diff --git a/.history/src/api/fhgl_20231215094105.js b/.history/src/api/fhgl_20231215094105.js
new file mode 100644
index 0000000..1dc364a
--- /dev/null
+++ b/.history/src/api/fhgl_20231215094105.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+ 
+// 负荷管理
+export function GetFhgl () {
+  return request({
+    // url: 'brand',
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/fhgl_20231215094115.js b/.history/src/api/fhgl_20231215094115.js
new file mode 100644
index 0000000..a1ed919
--- /dev/null
+++ b/.history/src/api/fhgl_20231215094115.js
@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+ 
+// 负荷管理
+export function GetFhgl () {
+  return request({
+    // url: 'brand',
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分析
+export function GetFhfx () {
+  return request({
+    // url: 'brand',
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/fhgl_20231215094146.js b/.history/src/api/fhgl_20231215094146.js
new file mode 100644
index 0000000..d2ecae7
--- /dev/null
+++ b/.history/src/api/fhgl_20231215094146.js
@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+ 
+// 负荷管理
+export function GetFhgl () {
+  return request({
+    // url: 'brand',
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分析
+export function GetFhfx () {
+  return request({
+    // url: 'brand',
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 变压器负载率
+export function GetFzl () {
+  return request({
+    // url: 'brand',
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/fhgl_20231215094206.js b/.history/src/api/fhgl_20231215094206.js
new file mode 100644
index 0000000..7a510ed
--- /dev/null
+++ b/.history/src/api/fhgl_20231215094206.js
@@ -0,0 +1,23 @@
+import request from '@/utils/request'
+ 
+// 负荷管理
+export function GetFhgl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分析
+export function GetFhfx () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 变压器负载率
+export function GetByqfzl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
diff --git a/.history/src/api/fhgl_20231215094515.js b/.history/src/api/fhgl_20231215094515.js
new file mode 100644
index 0000000..176ee58
--- /dev/null
+++ b/.history/src/api/fhgl_20231215094515.js
@@ -0,0 +1,30 @@
+import request from '@/utils/request'
+ 
+// 负荷管理
+export function GetFhgl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分析
+export function GetFhfx () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 变压器负载率
+export function GetByqfzl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分类
+export function GetFhfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
diff --git a/.history/src/api/fhgl_20231215094557.js b/.history/src/api/fhgl_20231215094557.js
new file mode 100644
index 0000000..8ceddd4
--- /dev/null
+++ b/.history/src/api/fhgl_20231215094557.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 负荷管理
+export function GetFhgl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分析
+export function GetFhfx () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 变压器负载率
+export function GetByqfzl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分类
+export function GetFhfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分类
+export function GetFhfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分类
+export function GetFhfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/fhgl_20231215094616.js b/.history/src/api/fhgl_20231215094616.js
new file mode 100644
index 0000000..8630865
--- /dev/null
+++ b/.history/src/api/fhgl_20231215094616.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 负荷管理
+export function GetFhgl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分析
+export function GetFhfx () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 变压器负载率
+export function GetByqfzl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分类
+export function GetFhfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 生产线负荷占比
+export function GetFhfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分类
+export function GetFhfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/fhgl_20231215094623.js b/.history/src/api/fhgl_20231215094623.js
new file mode 100644
index 0000000..b8410d7
--- /dev/null
+++ b/.history/src/api/fhgl_20231215094623.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 负荷管理
+export function GetFhgl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分析
+export function GetFhfx () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 变压器负载率
+export function GetByqfzl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分类
+export function GetFhfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 生产线负荷占比
+export function GetFhzb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分类
+export function GetFhfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/fhgl_20231215094644.js b/.history/src/api/fhgl_20231215094644.js
new file mode 100644
index 0000000..fe99511
--- /dev/null
+++ b/.history/src/api/fhgl_20231215094644.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 负荷管理
+export function GetFhgl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分析
+export function GetFhfx () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 变压器负载率
+export function GetByqfzl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分类
+export function GetFhfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 生产线负荷占比
+export function GetFhzb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 生产线负荷
+export function GetScxfh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/kdfh_20231215085600.js b/.history/src/api/kdfh_20231215085600.js
new file mode 100644
index 0000000..f4f0b49
--- /dev/null
+++ b/.history/src/api/kdfh_20231215085600.js
@@ -0,0 +1,38 @@
+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'
+    })
+  }
+//可调设备
diff --git a/.history/src/api/kdfh_20231215085927.js b/.history/src/api/kdfh_20231215085927.js
new file mode 100644
index 0000000..7dcdf29
--- /dev/null
+++ b/.history/src/api/kdfh_20231215085927.js
@@ -0,0 +1,51 @@
+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'
+    })
+  }
+//可调设备
+export function GetRou () {
+  return request({
+    url: `//GetFlexibleAdjustableLoad`,
+    method: 'GET'
+  })
+}
+// 
+export function GetRou () {
+  return request({
+    url: `//GetAdjustableDevice`,
+    method: 'GET'
+  })
+}
diff --git a/.history/src/api/kdfh_20231215085943.js b/.history/src/api/kdfh_20231215085943.js
new file mode 100644
index 0000000..dc26d67
--- /dev/null
+++ b/.history/src/api/kdfh_20231215085943.js
@@ -0,0 +1,51 @@
+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'
+    })
+  }
+//可调设备
+export function GetRou () {
+  return request({
+    url: `//GetFlexibleAdjustableLoad`,
+    method: 'GET'
+  })
+}
+// 
+export function GetKdsb () {
+  return request({
+    url: `//GetAdjustableDevice`,
+    method: 'GET'
+  })
+}
diff --git a/.history/src/api/kdfh_20231215090003.js b/.history/src/api/kdfh_20231215090003.js
new file mode 100644
index 0000000..4364f95
--- /dev/null
+++ b/.history/src/api/kdfh_20231215090003.js
@@ -0,0 +1,44 @@
+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'
+    })
+  }
+//可调设备
+export function GetKdsb () {
+  return request({
+    url: `//GetAdjustableDevice`,
+    method: 'GET'
+  })
+}
diff --git a/.history/src/api/nxgl_20231215093924.js b/.history/src/api/nxgl_20231215093924.js
new file mode 100644
index 0000000..e69de29
diff --git a/.history/src/api/nxgl_20231215102726.js b/.history/src/api/nxgl_20231215102726.js
new file mode 100644
index 0000000..fe99511
--- /dev/null
+++ b/.history/src/api/nxgl_20231215102726.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 负荷管理
+export function GetFhgl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分析
+export function GetFhfx () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 变压器负载率
+export function GetByqfzl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分类
+export function GetFhfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 生产线负荷占比
+export function GetFhzb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 生产线负荷
+export function GetScxfh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/nxgl_20231215102815.js b/.history/src/api/nxgl_20231215102815.js
new file mode 100644
index 0000000..1e10dbb
--- /dev/null
+++ b/.history/src/api/nxgl_20231215102815.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 能源流向
+export function GetNylx () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分析
+export function GetFhfx () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 变压器负载率
+export function GetByqfzl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分类
+export function GetFhfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 生产线负荷占比
+export function GetFhzb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 生产线负荷
+export function GetScxfh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/nxgl_20231215102940.js b/.history/src/api/nxgl_20231215102940.js
new file mode 100644
index 0000000..f12fa6e
--- /dev/null
+++ b/.history/src/api/nxgl_20231215102940.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 能源流向
+export function GetNylx () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 复费率
+export function GetFfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 能效对标
+export function GetNxdb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分类
+export function GetFhfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 生产线负荷占比
+export function GetFhzb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 生产线负荷
+export function GetScxfh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/nxgl_20231215103221.js b/.history/src/api/nxgl_20231215103221.js
new file mode 100644
index 0000000..37f4057
--- /dev/null
+++ b/.history/src/api/nxgl_20231215103221.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 能源流向
+export function GetNylx () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 复费率
+export function GetFfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 能效对标
+export function GetNxdb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 节能量
+export function GetJnl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 生产线负荷占比
+export function GetFhzb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 生产线负荷
+export function GetScxfh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/nxgl_20231215103240.js b/.history/src/api/nxgl_20231215103240.js
new file mode 100644
index 0000000..7dc93a1
--- /dev/null
+++ b/.history/src/api/nxgl_20231215103240.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 能源流向
+export function GetNylx () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 复费率
+export function GetFfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 能效对标
+export function GetNxdb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 节能量
+export function GetJnl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 电费单价
+export function GetFhzb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 生产线负荷
+export function GetScxfh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/nxgl_20231215103305.js b/.history/src/api/nxgl_20231215103305.js
new file mode 100644
index 0000000..707221b
--- /dev/null
+++ b/.history/src/api/nxgl_20231215103305.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 能源流向
+export function GetNylx () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 复费率
+export function GetFfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 能效对标
+export function GetNxdb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 节能量
+export function GetJnl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 电费单价
+export function GetDfdj () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 设备运行情况
+export function GetScxfh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/nxgl_20231215103311.js b/.history/src/api/nxgl_20231215103311.js
new file mode 100644
index 0000000..efc7878
--- /dev/null
+++ b/.history/src/api/nxgl_20231215103311.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 能源流向
+export function GetNylx () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 复费率
+export function GetFfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 能效对标
+export function GetNxdb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 节能量
+export function GetJnl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 电费单价
+export function GetDfdj () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 设备运行情况
+export function GetSbyxqk () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/nxgl_20231215110244.js b/.history/src/api/nxgl_20231215110244.js
new file mode 100644
index 0000000..efc7878
--- /dev/null
+++ b/.history/src/api/nxgl_20231215110244.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 能源流向
+export function GetNylx () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 复费率
+export function GetFfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 能效对标
+export function GetNxdb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 节能量
+export function GetJnl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 电费单价
+export function GetDfdj () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 设备运行情况
+export function GetSbyxqk () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/nxgl_20231215110249.js b/.history/src/api/nxgl_20231215110249.js
new file mode 100644
index 0000000..efc7878
--- /dev/null
+++ b/.history/src/api/nxgl_20231215110249.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 能源流向
+export function GetNylx () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 复费率
+export function GetFfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 能效对标
+export function GetNxdb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 节能量
+export function GetJnl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 电费单价
+export function GetDfdj () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 设备运行情况
+export function GetSbyxqk () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/nxglnh_20231215093936.js b/.history/src/api/nxglnh_20231215093936.js
new file mode 100644
index 0000000..e69de29
diff --git a/.history/src/api/nxglnh_20231215110343.js b/.history/src/api/nxglnh_20231215110343.js
new file mode 100644
index 0000000..1315da5
--- /dev/null
+++ b/.history/src/api/nxglnh_20231215110343.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 单耗
+export function GetDh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 复费率
+export function GetFfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 能效对标
+export function GetNxdb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 节能量
+export function GetJnl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 电费单价
+export function GetDfdj () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 设备运行情况
+export function GetSbyxqk () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/nxglnh_20231215110409.js b/.history/src/api/nxglnh_20231215110409.js
new file mode 100644
index 0000000..b0a15e9
--- /dev/null
+++ b/.history/src/api/nxglnh_20231215110409.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 单耗
+export function GetDh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 分类能耗
+export function GetFlnh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 能效对标
+export function GetNxdb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 节能量
+export function GetJnl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 电费单价
+export function GetDfdj () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 设备运行情况
+export function GetSbyxqk () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/nxglnh_20231215110500.js b/.history/src/api/nxglnh_20231215110500.js
new file mode 100644
index 0000000..827be99
--- /dev/null
+++ b/.history/src/api/nxglnh_20231215110500.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 单耗
+export function GetDh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 分类能耗
+export function GetFlnh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 能耗日历
+export function GetNxdb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 节能量
+export function GetJnl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 电费单价
+export function GetDfdj () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 设备运行情况
+export function GetSbyxqk () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/nxglnh_20231215110506.js b/.history/src/api/nxglnh_20231215110506.js
new file mode 100644
index 0000000..f5209fd
--- /dev/null
+++ b/.history/src/api/nxglnh_20231215110506.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 单耗
+export function GetDh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 分类能耗
+export function GetFlnh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 能耗日历
+export function GetNhrl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 节能量
+export function GetJnl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 电费单价
+export function GetDfdj () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 设备运行情况
+export function GetSbyxqk () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/views/Zhou/FHGL_20231215110734.vue b/.history/src/views/Zhou/FHGL_20231215110734.vue
new file mode 100644
index 0000000..7b55647
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231215110734.vue
@@ -0,0 +1,1294 @@
+<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="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+import {ShowMessage} from "@/utils/ShowMessage";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: [
+            "",
+            "02:30",
+            "",
+            "03:30",
+            "",
+            "04:30",
+            "",
+            "05:30",
+            "",
+            "06:30",
+          ],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520, 325, 370, 90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280, 367, 287, 360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      ShowMessage("添加成功","success");
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text: sum + "{danwei|" + danwei + "}",
+          formatter: function (value) {
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#DAFFF8",
+            fontSize: 50,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich: {
+              danwei: {
+                color: "#fff",
+                fontSize: 32,
+              },
+            },
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  console.log(params.name);
+                  if (params.name == "一级") {
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle1|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  } else if (params.name == "二级") {
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle2|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  } else {
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle3|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle1: {
+                  color: color[2],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+                myStyle2: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+                myStyle3: {
+                  color: color[1],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // 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("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 325px;
+    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;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    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";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    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";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    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";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231215110738.vue b/.history/src/views/Zhou/FHGL_20231215110738.vue
new file mode 100644
index 0000000..3ce7330
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231215110738.vue
@@ -0,0 +1,1294 @@
+<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="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+import {ShowMessage} from "@/utils/ShowMessage";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: [
+            "",
+            "02:30",
+            "",
+            "03:30",
+            "",
+            "04:30",
+            "",
+            "05:30",
+            "",
+            "06:30",
+          ],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520, 325, 370, 90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280, 367, 287, 360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      ShowMessage("添加成功","success");
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text: sum + "{danwei|" + danwei + "}",
+          formatter: function (value) {
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#DAFFF8",
+            fontSize: 50,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich: {
+              danwei: {
+                color: "#fff",
+                fontSize: 32,
+              },
+            },
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  console.log(params.name);
+                  if (params.name == "一级") {
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle1|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  } else if (params.name == "二级") {
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle2|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  } else {
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle3|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle1: {
+                  color: color[2],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+                myStyle2: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+                myStyle3: {
+                  color: color[1],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // 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("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 325px;
+    z-index: 2;
+    top: 420px;
+    right: 880px;
+    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;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    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";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    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";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    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";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/FHGL_20231215110823.vue b/.history/src/views/Zhou/FHGL_20231215110823.vue
new file mode 100644
index 0000000..34fee25
--- /dev/null
+++ b/.history/src/views/Zhou/FHGL_20231215110823.vue
@@ -0,0 +1,1294 @@
+<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="fhgl">
+        <div class="imgBox1">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷管理</p>
+        </div>
+        <div class="controls">
+          <div class="con1">
+            <div class="con_r1">
+              <h2>10300<span>kW</span></h2>
+              <p>可监测负荷</p>
+            </div>
+          </div>
+          <div class="con2">
+            <div class="con_r1">
+              <h2>5100<span>kW</span></h2>
+              <p>实时负荷</p>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="con_r1">
+              <h2>87<span>%</span></h2>
+              <p>可监测负荷占比</p>
+            </div>
+          </div>
+          <div class="con4">
+            <div class="con_r1">
+              <h2>52<span>%</span></h2>
+              <p>实时负荷占比</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fhfx">
+        <div class="imgBox2">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分析</p>
+        </div>
+        <div id="main"></div>
+      </div>
+      <div class="byqfzl">
+        <div class="imgBox3">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>变压器负载率</p>
+        </div>
+        <div class="fuzailv">
+          <ul>
+            <li class="ji">
+              <p class="p_l">1#变压器</p>
+              <p class="p_r">15.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">5#变压器</p>
+              <p class="p_r">14.4%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">3#变压器</p>
+              <p class="p_r">13.9%</p>
+            </li>
+            <li class="ou">
+              <p class="p_l">2#变压器</p>
+              <p class="p_r">13.8%</p>
+            </li>
+            <li class="ji">
+              <p class="p_l">4#变压器</p>
+              <p class="p_r">12.2%</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="fhfl">
+        <div class="imgBox4">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>负荷分类</p>
+        </div>
+        <div id="bingtu"></div>
+        <div class="fhzb">
+          <div class="imgBox5">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷占比</p>
+          </div>
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+        <div class="scxfh">
+          <div class="imgBox6">
+            <img src="../../assets/img/小标题栏.png" class="img" />
+            <p>生产线负荷</p>
+          </div>
+          <div>
+            <div class="chartBox">
+              <div class="chartbox" v-for="item in list">
+                <span class="chartname">{{ item.name }}</span>
+                <div class="bigBox">
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
+                </div>
+                <span>{{ item.value * 100 }}kW</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+import {ShowMessage} from "@/utils/ShowMessage";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "9.27",
+        },
+        {
+          name: "3号生产线",
+          value: "6.28",
+        },
+      ],
+      option: {
+        // tooltip: {
+        //     trigger: 'axis',
+        // },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          // containLabel: true
+        },
+        // toolbox: {
+        //     feature: {
+        //         saveAsImage: {}
+        //     }
+        // },
+        xAxis: {
+          type: "category",
+          // boundaryGap: false,
+          data: [
+            "",
+            "02:30",
+            "",
+            "03:30",
+            "",
+            "04:30",
+            "",
+            "05:30",
+            "",
+            "06:30",
+          ],
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          // boundaryGap: true,
+          name: "单位:kW",
+          data: ["100", "200", "300", "400", "500"],
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        legend: {
+          data: [
+            {
+              icon: "rect",
+              name: "可调负荷",
+            },
+            {
+              icon: "rect",
+              name: "实时负荷",
+            },
+          ],
+          x: "center",
+          y: "top",
+          itemGap: 200,
+          textStyle: {
+            color: "#fff",
+            fontSize: "28px",
+          },
+          fontSize: "28px",
+        },
+        series: [
+          {
+            name: "实时负荷",
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [450, 120, 450, 428, 540, 100, 520, 325, 370, 90],
+            lineStyle: {
+              width: 5,
+              color: "#3FFF5A",
+            },
+            itemStyle: {
+              color: "#3FFF5A",
+            },
+          },
+          {
+            name: "可调负荷",
+            type: "line",
+            // stack: 'Total',
+            symbol: "circle",
+            symbolSize: 20,
+            data: [180, 420, 90, 470, 500, 90, 280, 367, 287, 360],
+            lineStyle: {
+              width: 5,
+              color: "#43FFF4",
+            },
+            itemStyle: {
+              color: "#43FFF4",
+            },
+          },
+        ],
+      },
+      optionData: [
+        {
+          name: "1号生产线",
+          value: 176,
+        },
+        {
+          name: "3号生产线",
+          value: 288,
+        },
+        {
+          name: "2号生产线",
+          value: 88,
+        },
+      ],
+      statusChart: null,
+      option1: {},
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      ShowMessage("添加成功","success");
+      window.vuplex.postMessage("负荷管理");
+      this.$router.push("/kdfh");
+    },
+    BingTu() {
+      // 复制代码
+      const color = ["#00FF9C", "#2CB2C5", "#00D2FF"];
+      const chartData = [
+        {
+          value: 380,
+          name: "二级",
+          itemStyle: {
+            color: color[0],
+          },
+        },
+        {
+          value: 142,
+          name: "三级",
+          itemStyle: {
+            color: color[1],
+          },
+        },
+        {
+          value: 694,
+          name: "一级",
+          itemStyle: {
+            color: color[2],
+          },
+        },
+      ];
+      const sum = chartData.reduce((per, cur) => per + cur.value, 0);
+      const danwei = "kW";
+      const gap = (1 * sum) / 100;
+      const pieData1 = [];
+      const gapData = {
+        name: "",
+        value: gap,
+        itemStyle: {
+          color: "transparent",
+        },
+      };
+      for (let i = 0; i < chartData.length; i++) {
+        // 第一圈数据
+        pieData1.push({
+          ...chartData[i],
+        });
+        pieData1.push(gapData);
+      }
+      let option = {
+        title: {
+          show: true,
+          text: sum + "{danwei|" + danwei + "}",
+          formatter: function (value) {
+            console.log(value);
+          },
+          subtext: "总负荷",
+          x: "39.5%",
+          y: "43%",
+          itemGap: 6,
+          textStyle: {
+            color: "#DAFFF8",
+            fontSize: 50,
+            fontWeight: "400",
+            lineHeight: 60,
+            rich: {
+              danwei: {
+                color: "#fff",
+                fontSize: 32,
+              },
+            },
+          },
+          subtextStyle: {
+            color: "#fff",
+            fontSize: 26,
+            fontWeight: "400",
+            lineHeight: 36,
+          },
+          textAlign: "center",
+        },
+        series: [
+          {
+            name: "",
+            type: "pie",
+            roundCap: true,
+            radius: ["40%", "56%"],
+            center: ["40%", "50%"],
+            data: pieData1,
+            label: {
+              show: true,
+              // 这里需要进行修改
+              formatter: function (params) {
+                console.log(params.dataIndex);
+                if (params.name) {
+                  console.log(params.name);
+                  if (params.name == "一级") {
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle1|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  } else if (params.name == "二级") {
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle2|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  } else {
+                    return (
+                      "{name|" +
+                      params.name +
+                      "}" +
+                      `\n` +
+                      "\n" +
+                      "{myStyle3|" +
+                      params.value +
+                      "}" +
+                      "\t" +
+                      "{name|" +
+                      "kw" +
+                      "}"
+                    );
+                  }
+                }
+              },
+              rich: {
+                name: {
+                  color: "#fff",
+                  fontSize: 28,
+                },
+                myStyle1: {
+                  color: color[2],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+                myStyle2: {
+                  color: color[0],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+                myStyle3: {
+                  color: color[1],
+                  fontWeight: "bold",
+                  fontSize: 40,
+                },
+              },
+            },
+            labelLine: {
+              length: 88,
+              length2: 20,
+              lineStyle: {
+                width: 2,
+              },
+            },
+          },
+          {
+            type: "pie",
+            radius: ["32%", "34%"],
+            center: ["40%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "32%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["40%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ],
+      };
+      var chartDom2 = document.getElementById("bingtu");
+      var myChart = echarts.init(chartDom2);
+      option && myChart.setOption(option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //   console.log(this[optionName].series[params.seriesIndex],'this[optionName].series[params.seriesIndex].pieStatus');
+      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //   const isSelected =
+      //     !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //   const isHovered =
+      //     this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //   const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //   const startRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //   const endRatio =
+      //     this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //     this[optionName].series[selectedIndex].parametricEquation =
+      //       getParametricEquation(
+      //         this[optionName].series[selectedIndex].pieData.startRatio,
+      //         this[optionName].series[selectedIndex].pieData.endRatio,
+      //         false,
+      //         false,
+      //         k,
+      //         this[optionName].series[selectedIndex].pieData.value
+      //       );
+      //     this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //   }
+      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //   this[optionName].series[params.seriesIndex].parametricEquation =
+      //     getParametricEquation(
+      //       startRatio,
+      //       endRatio,
+      //       isSelected,
+      //       isHovered,
+      //       k,
+      //       this[optionName].series[params.seriesIndex].pieData.value
+      //     );
+      //   this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //     isSelected;
+      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //   selectedIndex = isSelected ? params.seriesIndex : null;
+      //   // 使用更新后的 option，渲染图表
+      //   myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // 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("main");
+    var myChart = echarts.init(chartDom);
+    this.option && myChart.setOption(this.option);
+    this.$nextTick(() => {
+      this.BingTu();
+      this.initChart();
+    });
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  //   background-color: transparent;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: transparent;
+  justify-content: space-between;
+
+  .a {
+    position: absolute;
+    width: 325px;
+    z-index: 2;
+    top: 420px;
+    right: 1450px;
+    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;
+  .title {
+    margin-top: 15px;
+    margin-left: 60px;
+  }
+  .fhgl {
+    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";
+      }
+    }
+
+    // 左边的第一个
+    .controls {
+      width: 100%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-top: 113px;
+
+      .con1 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/11.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #58fd64;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con2 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/12.png);
+        background-size: cover;
+        margin-bottom: 82px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 208px;
+          height: 41px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con3 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/13.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          text-align: center;
+          font-family: Impact;
+          font-weight: 400;
+          color: #36b1ff;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            margin-left: 18px;
+            font-size: 33px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+
+      .con4 {
+        width: 510px;
+        height: 177px;
+        // background: rgba(37, 31, 1, 0.1);
+        // border: 1px solid;
+        // border-image: linear-gradient(180deg, #83FFEC, #00FFD8) 10 10;
+        border-radius: 24px 3px 3px 24px;
+        background: url(../../assets/FHGL/14.png);
+        background-size: cover;
+        margin-bottom: 102px;
+
+        .con_r1 {
+          margin: 41px 108px 79px 236px;
+        }
+
+        h2 {
+          width: 166px;
+          height: 57px;
+          font-size: 54px;
+          font-family: Impact;
+          font-weight: 400;
+          color: #03ffd8;
+
+          // line-height: 341px;
+          span {
+            width: 50px;
+            height: 27px;
+            font-size: 33px;
+            margin-left: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            // line-height: 341px;
+          }
+        }
+
+        p {
+          margin-top: 18px;
+          width: 291px;
+          height: 42px;
+          font-size: 36px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+          // line-height: 196px;
+        }
+      }
+    }
+  }
+
+  .fhfx {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox2 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 50px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #main {
+      width: 1098px;
+      height: 600px;
+    }
+  }
+
+  .byqfzl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox3 {
+      height: 93px;
+      width: 1156px;
+      margin-bottom: 80px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .fuzailv {
+      ul {
+        // margin: 0px 38px 0px 43px;
+        width: 1236px;
+        height: 2477px;
+
+        li {
+          width: 1155px;
+          height: 102px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          align-items: center;
+
+          p.p_l {
+            width: 275px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 98px;
+          }
+
+          p.p_r {
+            width: 123px;
+            height: 102px;
+            font-size: 42px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #40fff1;
+            line-height: 98px;
+          }
+        }
+
+        li.ji {
+          background: rgba(25, 105, 168, 0.4);
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .fhfl {
+    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";
+      }
+    }
+
+    #bingtu {
+      width: 100%;
+      height: 600px;
+    }
+  }
+
+  .fhzb {
+    position: relative;
+    margin-top: 128px;
+
+    .imgBox5 {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    // #bingtu2 {
+    //   width: 100%;
+    //   height: 600px;
+    //   // background-color: red;
+    // }
+  }
+
+  .scxfh {
+    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";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+      margin-left: 60px;
+
+      .chartbox {
+        width: 1000%;
+        color: #fff;
+        font-size: 30px;
+        position: relative;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .chartname {
+          position: absolute;
+          left: 24px;
+          top: 10px;
+        }
+
+        .bigBox {
+          width: 961px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          font-size: 32px;
+          color: #43fff1;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 600px;
+
+  .chart {
+    z-index: 1;
+  }
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 38px;
+    left: 50%;
+    z-index: 0;
+    height: 400px;
+    width: 720px;
+    background: no-repeat center;
+    // background-image: url("~@/assets/imgs/piebg.png");
+    background: center top url("../../assets/img/底盘.png") no-repeat;
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/KDFH_20231215084718.vue b/.history/src/views/Zhou/KDFH_20231215084718.vue
new file mode 100644
index 0000000..07e7803
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215084718.vue
@@ -0,0 +1,1920 @@
+<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;
+  }
+  //表体颜色
+  /deep/ .el-table__body-wrapper {
+          overflow-y: auto;
+          height: 300px;
+        }
+        //隐藏滚动条
+        /deep/ .el-table__body-wrapper::-webkit-scrollbar {
+          display: none;
+        }
+  .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_20231215084731.vue b/.history/src/views/Zhou/KDFH_20231215084731.vue
new file mode 100644
index 0000000..d3cb768
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215084731.vue
@@ -0,0 +1,1923 @@
+<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__body-wrapper {
+    overflow-y: auto;
+    height: 300px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+  .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_20231215084813.vue b/.history/src/views/Zhou/KDFH_20231215084813.vue
new file mode 100644
index 0000000..731f379
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215084813.vue
@@ -0,0 +1,1915 @@
+<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_20231215084936.vue b/.history/src/views/Zhou/KDFH_20231215084936.vue
new file mode 100644
index 0000000..861eb6d
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215084936.vue
@@ -0,0 +1,1925 @@
+<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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 300px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215085026.vue b/.history/src/views/Zhou/KDFH_20231215085026.vue
new file mode 100644
index 0000000..e09a12a
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215085026.vue
@@ -0,0 +1,1925 @@
+<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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 500px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215085049.vue b/.history/src/views/Zhou/KDFH_20231215085049.vue
new file mode 100644
index 0000000..b465440
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215085049.vue
@@ -0,0 +1,1925 @@
+<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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 450px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215085105.vue b/.history/src/views/Zhou/KDFH_20231215085105.vue
new file mode 100644
index 0000000..0759546
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215085105.vue
@@ -0,0 +1,1925 @@
+<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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 520px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215085116.vue b/.history/src/views/Zhou/KDFH_20231215085116.vue
new file mode 100644
index 0000000..4f92d03
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215085116.vue
@@ -0,0 +1,1925 @@
+<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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215085233.vue b/.history/src/views/Zhou/KDFH_20231215085233.vue
new file mode 100644
index 0000000..bd8d5a4
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215085233.vue
@@ -0,0 +1,1925 @@
+<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: [
+        {
+          DeviceName: "回转窑",
+          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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215085252.vue b/.history/src/views/Zhou/KDFH_20231215085252.vue
new file mode 100644
index 0000000..063a1d1
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215085252.vue
@@ -0,0 +1,1925 @@
+<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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: true,
+          DeviceName: "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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215085311.vue b/.history/src/views/Zhou/KDFH_20231215085311.vue
new file mode 100644
index 0000000..f64dd1f
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215085311.vue
@@ -0,0 +1,1925 @@
+<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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: true,
+          RealTimeLoad: "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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215085314.vue b/.history/src/views/Zhou/KDFH_20231215085314.vue
new file mode 100644
index 0000000..a1ab395
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215085314.vue
@@ -0,0 +1,1925 @@
+<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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215085320.vue b/.history/src/views/Zhou/KDFH_20231215085320.vue
new file mode 100644
index 0000000..f691fec
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215085320.vue
@@ -0,0 +1,1925 @@
+<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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "102.00",
+        },
+        {
+          date1: "熟料收尘",
+          date2: "0",
+          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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215085427.vue b/.history/src/views/Zhou/KDFH_20231215085427.vue
new file mode 100644
index 0000000..a05e318
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215085427.vue
@@ -0,0 +1,1940 @@
+<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="DeviceName" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="DeviceState" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.DeviceState == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="RealTimeLoad" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.RealTimeLoad }}</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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "篦冷机",
+          DeviceState: true,
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "生料收尘",
+          DeviceState: false,
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "回转窑",
+          DeviceState: true,
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: false,
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: false,
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: false,
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: false,
+          RealTimeLoad: "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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215085523.vue b/.history/src/views/Zhou/KDFH_20231215085523.vue
new file mode 100644
index 0000000..be1caf7
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215085523.vue
@@ -0,0 +1,1940 @@
+<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="DeviceName" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="DeviceState" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.DeviceState == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="RealTimeLoad" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.RealTimeLoad }}</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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "篦冷机",
+          DeviceState: "1",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "生料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215090341.vue b/.history/src/views/Zhou/KDFH_20231215090341.vue
new file mode 100644
index 0000000..a69c025
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215090341.vue
@@ -0,0 +1,1943 @@
+<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="DeviceName" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="DeviceState" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.DeviceState == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="RealTimeLoad" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.RealTimeLoad }}</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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "篦冷机",
+          DeviceState: "1",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "生料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "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);
+      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];
+    },
+    async getkdsb() {
+      let res = await GetKdsb();
+      console.log(res);
+      this.devices = 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: 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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215090344.vue b/.history/src/views/Zhou/KDFH_20231215090344.vue
new file mode 100644
index 0000000..61ab25a
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215090344.vue
@@ -0,0 +1,1943 @@
+<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="DeviceName" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="DeviceState" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.DeviceState == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="RealTimeLoad" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.RealTimeLoad }}</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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "篦冷机",
+          DeviceState: "1",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "生料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "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);
+      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];
+    },
+    async getkdsb() {
+      let res = await GetKdsb();
+      console.log(res);
+      this.devices = 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: 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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215090410.vue b/.history/src/views/Zhou/KDFH_20231215090410.vue
new file mode 100644
index 0000000..61ab25a
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215090410.vue
@@ -0,0 +1,1943 @@
+<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="DeviceName" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="DeviceState" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.DeviceState == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="RealTimeLoad" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.RealTimeLoad }}</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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "篦冷机",
+          DeviceState: "1",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "生料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "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);
+      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];
+    },
+    async getkdsb() {
+      let res = await GetKdsb();
+      console.log(res);
+      this.devices = 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: 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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215090751.vue b/.history/src/views/Zhou/KDFH_20231215090751.vue
new file mode 100644
index 0000000..714ddc7
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215090751.vue
@@ -0,0 +1,1953 @@
+<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="DeviceName" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="DeviceState" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.DeviceState == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="RealTimeLoad" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.RealTimeLoad }}</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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "篦冷机",
+          DeviceState: "1",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "生料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "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);
+      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];
+    },
+    async getkdsb() {
+      let res = await GetKdsb();
+      console.log(res);
+      this.devices = 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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 360px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215090914.vue b/.history/src/views/Zhou/KDFH_20231215090914.vue
new file mode 100644
index 0000000..8f435eb
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215090914.vue
@@ -0,0 +1,1953 @@
+<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="DeviceName" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="DeviceState" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.DeviceState == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="RealTimeLoad" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.RealTimeLoad }}</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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "篦冷机",
+          DeviceState: "1",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "生料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "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);
+      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];
+    },
+    async getkdsb() {
+      let res = await GetKdsb();
+      console.log(res);
+      this.devices = 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: 600px;
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 360px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215090946.vue b/.history/src/views/Zhou/KDFH_20231215090946.vue
new file mode 100644
index 0000000..d32a19c
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215090946.vue
@@ -0,0 +1,1951 @@
+<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="DeviceName" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="DeviceState" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.DeviceState == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="RealTimeLoad" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.RealTimeLoad }}</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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "篦冷机",
+          DeviceState: "1",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "生料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "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);
+      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];
+    },
+    async getkdsb() {
+      let res = await GetKdsb();
+      console.log(res);
+      this.devices = 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 {
+  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: 600px;
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 360px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215091005.vue b/.history/src/views/Zhou/KDFH_20231215091005.vue
new file mode 100644
index 0000000..6a21e0a
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215091005.vue
@@ -0,0 +1,1953 @@
+<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="DeviceName" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="DeviceState" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.DeviceState == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="RealTimeLoad" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.RealTimeLoad }}</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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "篦冷机",
+          DeviceState: "1",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "生料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "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);
+      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];
+    },
+    async getkdsb() {
+      let res = await GetKdsb();
+      console.log(res);
+      this.devices = 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 {
+  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: 600px;
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        width: 100%;
+        height: 360px;
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 360px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215091157.vue b/.history/src/views/Zhou/KDFH_20231215091157.vue
new file mode 100644
index 0000000..75f9fae
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215091157.vue
@@ -0,0 +1,2005 @@
+<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="DeviceName" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="DeviceState" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.DeviceState == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="RealTimeLoad" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.RealTimeLoad }}</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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "篦冷机",
+          DeviceState: "1",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "生料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "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);
+      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];
+    },
+    async getkdsb() {
+      let res = await GetKdsb();
+      console.log(res);
+      this.devices = 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 {
+  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: 600px;
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        width: 100%;
+        height: 360px;
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 360px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+  .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;
+  }
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215091206.vue b/.history/src/views/Zhou/KDFH_20231215091206.vue
new file mode 100644
index 0000000..560b14d
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215091206.vue
@@ -0,0 +1,2017 @@
+<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="DeviceName"
+                label="可调设备名称"
+                align="center"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="DeviceState"
+                label="开关状态"
+                align="center"
+              >
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.DeviceState == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="RealTimeLoad"
+                label="实时负荷"
+                align="center"
+              >
+                <template scope="scope">
+                  <span class="count">{{ scope.row.RealTimeLoad }}</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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "篦冷机",
+          DeviceState: "1",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "生料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "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);
+      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];
+    },
+    async getkdsb() {
+      let res = await GetKdsb();
+      console.log(res);
+      this.devices = 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 {
+  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: 600px;
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table {
+        width: 100%;
+        height: 360px;
+        .el-table__body-wrapper {
+          overflow-y: auto;
+          height: 360px;
+        }
+        //隐藏滚动条
+        .el-table__body-wrapper::-webkit-scrollbar {
+          display: none;
+        }
+        .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;
+        }
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table {
+        .el-table__body-wrapper {
+          overflow-y: auto;
+          height: 530px;
+        }
+        //隐藏滚动条
+        .el-table__body-wrapper::-webkit-scrollbar {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .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_20231215091259.vue b/.history/src/views/Zhou/KDFH_20231215091259.vue
new file mode 100644
index 0000000..d32a19c
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215091259.vue
@@ -0,0 +1,1951 @@
+<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="DeviceName" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="DeviceState" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.DeviceState == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="RealTimeLoad" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.RealTimeLoad }}</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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "篦冷机",
+          DeviceState: "1",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "生料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "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);
+      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];
+    },
+    async getkdsb() {
+      let res = await GetKdsb();
+      console.log(res);
+      this.devices = 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 {
+  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: 600px;
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 360px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215091306.vue b/.history/src/views/Zhou/KDFH_20231215091306.vue
new file mode 100644
index 0000000..51ce6d9
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215091306.vue
@@ -0,0 +1,1951 @@
+<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="DeviceName" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="DeviceState" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.DeviceState == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="RealTimeLoad" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.RealTimeLoad }}</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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "篦冷机",
+          DeviceState: "1",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "生料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "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);
+      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];
+    },
+    async getkdsb() {
+      let res = await GetKdsb();
+      console.log(res);
+      this.devices = 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 {
+  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: 600px;
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 400px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215091314.vue b/.history/src/views/Zhou/KDFH_20231215091314.vue
new file mode 100644
index 0000000..b027d72
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215091314.vue
@@ -0,0 +1,1951 @@
+<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="DeviceName" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="DeviceState" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.DeviceState == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="RealTimeLoad" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.RealTimeLoad }}</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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "篦冷机",
+          DeviceState: "1",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "生料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "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);
+      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];
+    },
+    async getkdsb() {
+      let res = await GetKdsb();
+      console.log(res);
+      this.devices = 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 {
+  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: 600px;
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 200px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215091323.vue b/.history/src/views/Zhou/KDFH_20231215091323.vue
new file mode 100644
index 0000000..e160005
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215091323.vue
@@ -0,0 +1,1951 @@
+<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="DeviceName" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="DeviceState" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.DeviceState == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="RealTimeLoad" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.RealTimeLoad }}</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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "篦冷机",
+          DeviceState: "1",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "生料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "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);
+      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];
+    },
+    async getkdsb() {
+      let res = await GetKdsb();
+      console.log(res);
+      this.devices = 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 {
+  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: 600px;
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 240px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215091328.vue b/.history/src/views/Zhou/KDFH_20231215091328.vue
new file mode 100644
index 0000000..e21eb40
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215091328.vue
@@ -0,0 +1,1951 @@
+<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="DeviceName" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="DeviceState" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.DeviceState == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="RealTimeLoad" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.RealTimeLoad }}</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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "篦冷机",
+          DeviceState: "1",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "生料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "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);
+      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];
+    },
+    async getkdsb() {
+      let res = await GetKdsb();
+      console.log(res);
+      this.devices = 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 {
+  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: 600px;
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 230px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215091338.vue b/.history/src/views/Zhou/KDFH_20231215091338.vue
new file mode 100644
index 0000000..952fff3
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215091338.vue
@@ -0,0 +1,1951 @@
+<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="DeviceName" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="DeviceState" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.DeviceState == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="RealTimeLoad" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.RealTimeLoad }}</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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "篦冷机",
+          DeviceState: "1",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "生料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "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);
+      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];
+    },
+    async getkdsb() {
+      let res = await GetKdsb();
+      console.log(res);
+      this.devices = 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 {
+  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: 600px;
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 220px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215091351.vue b/.history/src/views/Zhou/KDFH_20231215091351.vue
new file mode 100644
index 0000000..73b205f
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215091351.vue
@@ -0,0 +1,1951 @@
+<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="DeviceName" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="DeviceState" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.DeviceState == true"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="RealTimeLoad" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.RealTimeLoad }}</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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "篦冷机",
+          DeviceState: "1",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "生料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "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);
+      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];
+    },
+    async getkdsb() {
+      let res = await GetKdsb();
+      console.log(res);
+      this.devices = 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 {
+  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: 600px;
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 218px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215102032.vue b/.history/src/views/Zhou/KDFH_20231215102032.vue
new file mode 100644
index 0000000..240c9e1
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215102032.vue
@@ -0,0 +1,1951 @@
+<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="DeviceName" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="DeviceState" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.DeviceState == false"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="RealTimeLoad" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.RealTimeLoad }}</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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "篦冷机",
+          DeviceState: "1",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "生料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "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);
+      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];
+    },
+    async getkdsb() {
+      let res = await GetKdsb();
+      console.log(res);
+      this.devices = 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 {
+  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: 600px;
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 218px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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_20231215110839.vue b/.history/src/views/Zhou/KDFH_20231215110839.vue
new file mode 100644
index 0000000..c516043
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215110839.vue
@@ -0,0 +1,1951 @@
+<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="DeviceName" label="可调设备名称" align="center">
+              </el-table-column>
+              <el-table-column prop="DeviceState" label="开关状态" align="center">
+                <template scope="scope">
+                  <img
+                    src="../../assets/KDFH/tongguo.png"
+                    v-if="scope.row.DeviceState == false"
+                  />
+                  <img src="../../assets/KDFH/jinggao.png" v-else />
+                </template>
+              </el-table-column>
+              <el-table-column prop="RealTimeLoad" label="实时负荷" align="center">
+                <template scope="scope">
+                  <span class="count">{{ scope.row.RealTimeLoad }}</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: [
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "篦冷机",
+          DeviceState: "1",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "生料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "102.00",
+        },
+        {
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "29.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "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);
+      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];
+    },
+    async getkdsb() {
+      let res = await GetKdsb();
+      console.log(res);
+      this.devices = 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: 325px;
+    z-index: 2;
+    top: 420px;
+    right: 1450px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+/deep/.table {
+  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: 600px;
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 218px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
+    }
+  }
+
+  .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/NXGLNH_20231215095429.vue b/.history/src/views/Zhou/NXGLNH_20231215095429.vue
new file mode 100644
index 0000000..4dfbabe
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231215095429.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="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </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 class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" 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="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    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() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [
+                {
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 80,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            },
+            {
+            type: "pie",
+            radius: ["43%", "45%"],
+            center: ["36%", "56%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "36%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["36%", "56%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统\n耗能',
+                    top: '47%',
+                    textAlign: "center",
+                    left: "35.5%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400',
+                        lineHeight:40,
+                        align:"center"
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[2],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[3],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$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 = this.$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 = this.$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 c3 = [shape.x, shape.y - offsetY * 2];
+        //             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();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    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;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    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%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        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";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉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;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        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";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: red;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231215095616.vue b/.history/src/views/Zhou/NXGLNH_20231215095616.vue
new file mode 100644
index 0000000..2b9b1ad
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231215095616.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="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p :class="data.isSelected ? 'is-selected' : ''" style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p :class="data.isSelected ? 'is-selected' : ''" style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p :class="data.isSelected ? 'is-selected' : ''" style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </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 class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" 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="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    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() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [
+                {
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 80,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            },
+            {
+            type: "pie",
+            radius: ["43%", "45%"],
+            center: ["36%", "56%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "36%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["36%", "56%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统\n耗能',
+                    top: '47%',
+                    textAlign: "center",
+                    left: "35.5%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400',
+                        lineHeight:40,
+                        align:"center"
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[2],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[3],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$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 = this.$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 = this.$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 c3 = [shape.x, shape.y - offsetY * 2];
+        //             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();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    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;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    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%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        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";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉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;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        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";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231215095628.vue b/.history/src/views/Zhou/NXGLNH_20231215095628.vue
new file mode 100644
index 0000000..4ac53bf
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231215095628.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="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p :class="data.isSelected ? 'is-selected' : ''" style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p :class="data.isSelected ? 'is-selected' : ''" style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p :class="data.isSelected ? 'is-selected' : ''" style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </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 class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" 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="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    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() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [
+                {
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 80,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            },
+            {
+            type: "pie",
+            radius: ["43%", "45%"],
+            center: ["36%", "56%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "36%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["36%", "56%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统\n耗能',
+                    top: '47%',
+                    textAlign: "center",
+                    left: "35.5%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400',
+                        lineHeight:40,
+                        align:"center"
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[2],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[3],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$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 = this.$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 = this.$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 c3 = [shape.x, shape.y - offsetY * 2];
+        //             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();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    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;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    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%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        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";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉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;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        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";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #57FF5B;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231215095637.vue b/.history/src/views/Zhou/NXGLNH_20231215095637.vue
new file mode 100644
index 0000000..678d856
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231215095637.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="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p>
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p :class="data.isSelected ? 'is-selected' : ''" style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p :class="data.isSelected ? 'is-selected' : ''" style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p :class="data.isSelected ? 'is-selected' : ''" style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </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 class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" 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="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    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() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [
+                {
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 80,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            },
+            {
+            type: "pie",
+            radius: ["43%", "45%"],
+            center: ["36%", "56%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "36%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["36%", "56%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统\n耗能',
+                    top: '47%',
+                    textAlign: "center",
+                    left: "35.5%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400',
+                        lineHeight:40,
+                        align:"center"
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[2],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[3],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$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 = this.$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 = this.$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 c3 = [shape.x, shape.y - offsetY * 2];
+        //             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();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    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;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    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%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        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";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉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;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        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";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #57FF5B;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231215095813.vue b/.history/src/views/Zhou/NXGLNH_20231215095813.vue
new file mode 100644
index 0000000..6c9f10f
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231215095813.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="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </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 class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" 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="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    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() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [
+                {
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 80,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            },
+            {
+            type: "pie",
+            radius: ["43%", "45%"],
+            center: ["36%", "56%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "36%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["36%", "56%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统\n耗能',
+                    top: '47%',
+                    textAlign: "center",
+                    left: "35.5%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400',
+                        lineHeight:40,
+                        align:"center"
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[2],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[3],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$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 = this.$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 = this.$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 c3 = [shape.x, shape.y - offsetY * 2];
+        //             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();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    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;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    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%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        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";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉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;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        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";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231215100036.vue b/.history/src/views/Zhou/NXGLNH_20231215100036.vue
new file mode 100644
index 0000000..64000e3
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231215100036.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="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p class="lan">{{ "12.45" }}</p>
+                                <p class="lan">0</p>
+                                <p  class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </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 class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" 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="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    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() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [
+                {
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 80,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            },
+            {
+            type: "pie",
+            radius: ["43%", "45%"],
+            center: ["36%", "56%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "36%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["36%", "56%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统\n耗能',
+                    top: '47%',
+                    textAlign: "center",
+                    left: "35.5%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400',
+                        lineHeight:40,
+                        align:"center"
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[2],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[3],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$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 = this.$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 = this.$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 c3 = [shape.x, shape.y - offsetY * 2];
+        //             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();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    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;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    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%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        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";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉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;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        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";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231215100048.vue b/.history/src/views/Zhou/NXGLNH_20231215100048.vue
new file mode 100644
index 0000000..6c9f10f
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231215100048.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="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </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 class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" 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="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    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() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [
+                {
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 80,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            },
+            {
+            type: "pie",
+            radius: ["43%", "45%"],
+            center: ["36%", "56%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "36%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["36%", "56%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统\n耗能',
+                    top: '47%',
+                    textAlign: "center",
+                    left: "35.5%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400',
+                        lineHeight:40,
+                        align:"center"
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[2],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[3],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$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 = this.$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 = this.$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 c3 = [shape.x, shape.y - offsetY * 2];
+        //             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();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    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;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    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%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        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";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉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;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        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";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231215100529.vue b/.history/src/views/Zhou/NXGLNH_20231215100529.vue
new file mode 100644
index 0000000..7080bb1
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231215100529.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="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </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 class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" 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="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    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() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [
+                {
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 80,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            },
+            {
+            type: "pie",
+            radius: ["43%", "45%"],
+            center: ["36%", "56%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "36%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["36%", "56%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统\n耗能',
+                    top: '47%',
+                    textAlign: "center",
+                    left: "35.5%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400',
+                        lineHeight:40,
+                        align:"center"
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[2],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[3],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$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 = this.$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 = this.$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 c3 = [shape.x, shape.y - offsetY * 2];
+        //             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();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    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;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    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%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        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";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉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;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        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";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+        color: green;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231215100555.vue b/.history/src/views/Zhou/NXGLNH_20231215100555.vue
new file mode 100644
index 0000000..83a6944
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231215100555.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="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </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 class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" 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="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    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() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [
+                {
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 80,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            },
+            {
+            type: "pie",
+            radius: ["43%", "45%"],
+            center: ["36%", "56%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "36%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["36%", "56%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统\n耗能',
+                    top: '47%',
+                    textAlign: "center",
+                    left: "35.5%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400',
+                        lineHeight:40,
+                        align:"center"
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[2],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[3],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$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 = this.$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 = this.$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 c3 = [shape.x, shape.y - offsetY * 2];
+        //             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();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    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;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    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%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        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";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉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;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        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";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+        color: red;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231215100608.vue b/.history/src/views/Zhou/NXGLNH_20231215100608.vue
new file mode 100644
index 0000000..6e145d0
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231215100608.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="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </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 class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" 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="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    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() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [
+                {
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 80,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            },
+            {
+            type: "pie",
+            radius: ["43%", "45%"],
+            center: ["36%", "56%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "36%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["36%", "56%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统\n耗能',
+                    top: '47%',
+                    textAlign: "center",
+                    left: "35.5%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400',
+                        lineHeight:40,
+                        align:"center"
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[2],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[3],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$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 = this.$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 = this.$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 c3 = [shape.x, shape.y - offsetY * 2];
+        //             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();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    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;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    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%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        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";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉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;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        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";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+        color: red:  !important;;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231215100613.vue b/.history/src/views/Zhou/NXGLNH_20231215100613.vue
new file mode 100644
index 0000000..2d09991
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231215100613.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="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </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 class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" 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="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    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() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [
+                {
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 80,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            },
+            {
+            type: "pie",
+            radius: ["43%", "45%"],
+            center: ["36%", "56%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "36%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["36%", "56%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统\n耗能',
+                    top: '47%',
+                    textAlign: "center",
+                    left: "35.5%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400',
+                        lineHeight:40,
+                        align:"center"
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[2],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[3],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$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 = this.$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 = this.$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 c3 = [shape.x, shape.y - offsetY * 2];
+        //             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();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    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;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    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%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        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";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉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;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        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";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+        color: red!important;;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231215100717.vue b/.history/src/views/Zhou/NXGLNH_20231215100717.vue
new file mode 100644
index 0000000..fd931a1
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231215100717.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="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </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 class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" 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="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    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() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [
+                {
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 80,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            },
+            {
+            type: "pie",
+            radius: ["43%", "45%"],
+            center: ["36%", "56%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "36%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["36%", "56%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统\n耗能',
+                    top: '47%',
+                    textAlign: "center",
+                    left: "35.5%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400',
+                        lineHeight:40,
+                        align:"center"
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[2],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[3],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$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 = this.$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 = this.$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 c3 = [shape.x, shape.y - offsetY * 2];
+        //             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();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    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;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    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%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        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";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉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;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        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";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+        .el-calendar-day{
+            p.lan{
+                color: red!important;
+            }
+        }
+
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231215100801.vue b/.history/src/views/Zhou/NXGLNH_20231215100801.vue
new file mode 100644
index 0000000..44e3851
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231215100801.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="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </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 class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" 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="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    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() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [
+                {
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 80,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            },
+            {
+            type: "pie",
+            radius: ["43%", "45%"],
+            center: ["36%", "56%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "36%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["36%", "56%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统\n耗能',
+                    top: '47%',
+                    textAlign: "center",
+                    left: "35.5%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400',
+                        lineHeight:40,
+                        align:"center"
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[2],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[3],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$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 = this.$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 = this.$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 c3 = [shape.x, shape.y - offsetY * 2];
+        //             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();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    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;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    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%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        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";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉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;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        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";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+        .el-calendar-day{
+            p.lan{
+                color: #57FF5B!important;
+            }
+        }
+
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231215100820.vue b/.history/src/views/Zhou/NXGLNH_20231215100820.vue
new file mode 100644
index 0000000..a78f441
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231215100820.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="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </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 class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" 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="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    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() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [
+                {
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 80,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            },
+            {
+            type: "pie",
+            radius: ["43%", "45%"],
+            center: ["36%", "56%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "36%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["36%", "56%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统\n耗能',
+                    top: '47%',
+                    textAlign: "center",
+                    left: "35.5%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400',
+                        lineHeight:40,
+                        align:"center"
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[2],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[3],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$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 = this.$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 = this.$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 c3 = [shape.x, shape.y - offsetY * 2];
+        //             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();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    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;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    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%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        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";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉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;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        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";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+        .el-calendar-day{
+            p.lan{
+                color: #57FF5B!important;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231215110855.vue b/.history/src/views/Zhou/NXGLNH_20231215110855.vue
new file mode 100644
index 0000000..dc6a238
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231215110855.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="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </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 class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" 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="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    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() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [
+                {
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 80,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            },
+            {
+            type: "pie",
+            radius: ["43%", "45%"],
+            center: ["36%", "56%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "36%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["36%", "56%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统\n耗能',
+                    top: '47%',
+                    textAlign: "center",
+                    left: "35.5%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400',
+                        lineHeight:40,
+                        align:"center"
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[2],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[3],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$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 = this.$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 = this.$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 c3 = [shape.x, shape.y - offsetY * 2];
+        //             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();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+    width: 325px;
+    z-index: 2;
+    top: 420px;
+    right: 1450px;
+    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;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    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%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        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";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 50%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉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;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        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";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+        .el-calendar-day{
+            p.lan{
+                color: #57FF5B!important;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGLNH_20231215111357.vue b/.history/src/views/Zhou/NXGLNH_20231215111357.vue
new file mode 100644
index 0000000..37b2027
--- /dev/null
+++ b/.history/src/views/Zhou/NXGLNH_20231215111357.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="dh">
+                <div class="imgBox1">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>单耗</p>
+                </div>
+                <div class="first">
+                    <img src="../../assets/NXGL/jide.png" alt="">
+                    <ul>
+                        <li class="danhao" v-for="(item, index) in list" :key="index">
+                            <span>{{ item.name }}</span>
+                            <span class="count">{{ item.count }}</span>
+                            <span class="danwei">kgce/t</span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="flnh">
+                    <div class="imgBox2">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>分类能耗</p>
+                    </div>
+                    <div class="second">
+                        <div class="s_one">
+                            <div class="s_l">
+                                <p>今日:3122kWh</p>
+                                <p>昨日:9400kWh</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">201%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_two">
+                            <div class="s_l">
+                                <p>今日:134t</p>
+                                <p>昨日:114t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">-15.1%</span>
+                                    <img src="../../assets/NXGL/图层 916.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                        <div class="s_three">
+                            <div class="s_l">
+                                <p>今日:14.3t</p>
+                                <p>昨日:14.9t</p>
+                            </div>
+                            <div class="s_r">
+                                <p>
+                                    同比:<span class="tongbi">4.2%</span>
+                                    <img src="../../assets/NXGL/图层 905.png" alt="">
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="nhrl">
+                    <div class="imgBox3">
+                        <img src="../../assets/img/小标题栏.png" class="img" />
+                        <p>能耗日历</p>
+                    </div>
+                    <div class="data">
+                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
+                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
+                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
+                    </div>
+                    <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="ghlnhgk">
+                <div class="imgBox4">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>各回路（设备）能耗概况</p>
+                </div>
+                <div class="data">
+                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
+                </div>
+                <div class="tabledata">
+                    <div class="table">
+                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </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 class="table">
+                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
+                            <el-table-column prop="date1" label="设备名称" align="center">
+                                <template scope="scope">
+                                    <p>{{ scope.row.date1 }}</p>
+                                    <p class="time">{{ scope.row.date2 }}</p>
+                                </template>
+                            </el-table-column>
+                            <el-table-column prop="date2" 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="xtnhgk">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>系统能耗概况</p>
+                </div>
+                <div id="nhzk"></div>
+            </div>
+            <div class="nhqs">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>能耗趋势</p>
+                </div>
+                <div class="data">
+                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
+                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
+                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
+                </div>
+                <div class="biaoti">
+                    <div class="first">
+                        <span class="bg"></span>
+                        <span>计划耗能</span>
+                    </div>
+                    <div class="second">
+                        <span class="bg"></span>
+                        <span>小于计划</span>
+                    </div>
+                    <div class="thrid">
+                        <span class="bg"></span>
+                        <span>大于计划</span>
+                    </div>
+                </div>
+                <div id="nhqs"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+    name: 'ShuinichangNXGL',
+
+    data() {
+        return {
+            res2: "水",
+            ddd: new Date(),
+            today: new Date(),
+            list: [
+                {
+                    name: "水泥单位产品综合能耗：",
+                    count: "80",
+                },
+                {
+                    name: "水泥大内产品综合电耗：",
+                    count: "40",
+                },
+                {
+                    name: "熟料单位产品综合能耗：",
+                    count: "100",
+                },
+                {
+                    name: "熟料单位产品综合电耗：",
+                    count: "48",
+                },
+                {
+                    name: "熟料单位产品综合煤耗：",
+                    count: "94",
+                },
+            ],
+            devices1: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            devices2: [
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: "2022-08-18 00:00:00",
+                    date3: "29.00",
+                }
+            ],
+            res: "日",
+            res1: '水',
+        };
+    },
+    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() {
+        this.$nextTick(() => {
+            this.getbing();
+            this.nhqs();
+        })
+    },
+
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "能效管理_true",
+            // });
+            window.vuplex.postMessage("能效管理-能耗");
+            this.$router.push('/nxgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '回转窑系统',
+                value: 427.2
+            }, {
+                name: '煤磨系统',
+                value: 1342.2
+            }, {
+                name: '生料系统',
+                value: 1115
+            }, {
+                name: '破碎系统',
+                value: 237.6
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 60,
+                    name: "",
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [
+                {
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                if (params.name !== "") {
+                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
+                                } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                aa: {
+                                    fontSize: 24,
+                                    color: "#fff",
+                                }
+                            }
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 80,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            },
+            {
+            type: "pie",
+            radius: ["43%", "45%"],
+            center: ["36%", "56%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "36%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["36%", "56%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+        ];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                // backgroundColor:"transparent",
+                color: color,
+                title: {
+                    text: '系统\n耗能',
+                    top: '47%',
+                    textAlign: "center",
+                    left: "35.5%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400',
+                        lineHeight:40,
+                        align:"center"
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '回转窑系统',
+                            value: "427.2"
+                        },
+                        {
+                            name: '煤磨系统',
+                            value: "1342.2"
+                        },
+                        {
+                            name: '生料系统',
+                            value: "1115"
+                        },{
+                            name: '破碎系统',
+                            value: "237.6"
+                        }],
+                    formatter: function (name) {
+                        var percent = 0;
+                        var total = 0;
+                        for (var i = 0; i < trafficWay.length; i++) {
+                            total += trafficWay[i].value;
+                        }
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        console.log(item);
+                        percent = ((item.value / total) * 100).toFixed(2);
+                        if (name !== '') {
+                            if(name=="回转窑系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}%}`;
+                            }else if(name=="煤磨系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}%}`;
+                            }else if(name=="生料系统"){
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}%}`;
+                            }else{
+                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}%}`;
+                            }
+
+                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+                        } else {
+                            return '';
+                        }
+                    },
+                    left: 800,
+                    bottom: 80,
+                    align: 'left',
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 24,
+                                color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 28,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 28,
+                                color: color[1],
+                            },
+                            num3: {
+                                fontSize: 28,
+                                color: color[2],
+                            },
+                            num4: {
+                                fontSize: 28,
+                                color: color[3],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("nhzk");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+
+            console.log(this.$refs.getcalendar)
+        },
+        nhqs() {
+            // mock 数据
+            const dataArr = {
+                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
+                rateData: [10, 36, 40, 10, 46, 30],
+                disinfeced: [32, 34, 48, 10, 38, 32],
+                // placeData: [320, 435, 490, 340, 320, 270, 360]
+            }
+            var colors1 =
+            {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
+                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
+                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
+                ],
+            }
+            var colors2 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
+                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
+                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
+                ],
+            }
+            var colors3 = {
+                type: 'linear',
+                x: 0, x2: 1, y: 0, y2: 0,
+                colorStops: [
+                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
+                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
+                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
+                ],
+            }
+            // const legend = {
+            //     data: [
+            //         {
+            //             name: '小于计划',
+            //             icon: "rect"
+            //         },
+            //         {
+            //             name: '大于计划',
+            //             icon: "rect"
+            //         }, {
+            //             name: '计划耗能',
+            //             icon: "rect"
+            //         }],
+            //     textStyle: {
+            //         color: "#fff",
+            //         fontSize: "20px",
+            //     },
+            //     itemWidth: 25,
+            //     itemHeight: 15,
+            //     itemGap: 15,
+            //     // bottom: '5%',
+            //     selectedMode: false
+            // }
+            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
+            // xAxis
+            const xAxis = {
+                axisTick: { show: true },
+                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
+                data: dataArr.xdata
+            }
+
+            // yAxis
+            const yAxis = [{
+                type: "value",
+                name: "单位:kWh",
+                nameTextStyle:{
+                        color:"#fff",
+                        fontSize:20,
+                    },
+                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+                axisLine: { show: false, lineStyle: { color: "#fff" } },
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
+                splitLine:{show:true,lineStyle:{color:"#fff"}}
+            },
+            {
+                // 双y轴，主要用于折线图，所以不需要显示坐标
+                type: "value",
+                show: false,
+                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
+            }
+            ]
+
+            // series
+            const series = [
+                {
+                    z: 2,
+                    name: '底部',
+                    type: 'pictorialBar',
+                    data: [1, 1, 1, 1, 1, 1, 1, 1],
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        color: function (params) {
+                            console.log(params);
+                            // console.log("1234是否进入");
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        }
+                    },
+                }, {
+                    z: 3,
+                    name: '上部1',
+                    type: 'pictorialBar',
+                    symbolPosition: 'end',
+                    data: dataArr.disinfeced,
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 20],
+                    itemStyle: {
+                        borderColor: 'rgba(17, 195, 255, 1)',
+                        borderWidth: 2,
+
+                        // color: 'rgba(17, 195, 255, 1)'
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+
+                                return "rgba(94,251,97,1)"
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return "rgba(252, 79, 84, 1)"
+                            } else {
+                                return "rgba(17, 195, 255, 1)"
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 1,
+                    // stack: '总量',
+                    type: 'bar',
+                    name: '',
+                    barWidth: 30,
+                    // barGap: '-100%',
+                    data: dataArr.disinfeced,
+                    itemStyle: {
+                        color: function (params) {
+                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
+                                return colors3
+                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
+                                return colors2
+                            } else {
+                                return colors1
+                            }
+                        },
+                    },
+                },
+                {
+                    z: 9,
+                    // 双y轴
+                    yAxisIndex: 1,
+                    name: '计划耗能', type: 'line',
+                    symbol: 'circle',
+                    symbolSize: [12, 12],
+                    color: {
+                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                        // 0% 处的颜色                           // 100% 处的颜色
+                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                        global: false // 缺省为 false
+                    },
+                    lineStyle: {
+                        color: {
+                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
+                            // 0% 处的颜色                           // 100% 处的颜色
+                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
+                            global: false // 缺省为 false
+                        }
+                    },
+                    // 修改的是线下区域的颜色
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            // 右/下/左/上
+                            0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
+                            { offset: 1, color: 'transparent' }
+                        ])
+                    },
+                    label: {
+                        show: true,
+                        textStyle: { fontSize: 20, color: '#fff' }
+                    },
+                    data: dataArr.rateData
+                }]
+            //legend
+            let option = { xAxis, yAxis, series, grid, }
+            this.defineEcharts("nhqs", option);
+        },
+        // nhqs() {
+        //     const offsetX = 24; //bar宽
+        //     const offsetY = 8; //倾斜角度
+        //     // 绘制左侧面
+        //     const CubeLeft = this.$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 = this.$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 = this.$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 c3 = [shape.x, shape.y - offsetY * 2];
+        //             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();
+        //         },
+        //     });
+        //     // 注册三个面图形
+        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
+        //     let seriesData = [
+        //         {
+        //             name: "",
+        //             value: 100,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 200,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 300,
+        //         },
+        //         {
+        //             name: "",
+        //             value: 400,
+        //         }];
+        //     let zheDate = [99, 180, 320, 400, 300, 420];
+        //     for (var i = 0; i < seriesData.length; i++) {
+        //         if (seriesData[i].value < zheDate[i]) {
+        //             seriesData[i].name = "小于计划"
+        //         } else if (seriesData[i].value > zheDate[i]) {
+        //             seriesData[i].name = "大于计划"
+        //         }
+        //     }
+        //     //拿到最大值
+        //     // const maxValue = Math.max(...seriesData);
+
+        //     let colorArr = [
+        //         ["#0A67FF"],
+        //         ["#10C6FF", "rgba(60,113,255,1)"],
+        //         ["#0774D6", "rgba(17,94,213,1)"],
+        //     ];
+        //     let option = {
+        //         legend: {
+        //             data: [
+        //                 {
+        //                     icon: "rect",
+        //                     name: "小于计划",
+        //                 },
+        //                 {
+        //                     icon: "rect",
+        //                     name: "大于计划",
+        //                 },
+        //             ],
+        //             textStyle: {
+        //                 color: "#fff",
+        //                 fontSize: "20px",
+        //             },
+        //         },
+        //         tooltip: {
+        //             trigger: "axis",
+        //             axisPointer: {
+        //                 type: "shadow",
+        //             },
+        //             formatter: function (params, ticket, callback) {
+        //                 const item = params[1];
+        //                 return item.name + " : " + item.value;
+        //             },
+        //         },
+        //         grid: {
+        //             // 让图表占满容器
+        //             left: "5%",
+        //             right: "5%",
+        //             bottom: "0%",
+        //             containLabel: true,
+        //         },
+        //         xAxis: {
+        //             type: "category",
+        //             data: xAxisData,
+        //             axisLine: {
+        //                 show: true,
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 fontSize: 20,
+        //                 color: "#fff",
+        //                 margin: 15,
+        //             },
+        //         },
+        //         yAxis: {
+        //             type: "value",
+        //             name: "单位:t",
+        //             nameTextStyle: {
+        //                 color: "#fff",
+        //                 fontSize: 20,
+        //                 padding: 10,
+        //             },
+        //             splitLine: {
+        //                 show: true,
+        //                 lineStyle: {},
+        //             },
+        //             axisTick: {
+        //                 show: false,
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 textStyle: {
+        //                     color: "#fff",
+        //                     fontSize: 20,
+        //                 },
+        //             },
+        //             // boundaryGap: ['20%', '20%'],
+        //         },
+        //         series: [
+        //             {
+        //                 type: "custom",
+        //                 name: "小于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "custom",
+        //                 name: "大于计划",
+        //                 renderItem: (params, api) => {
+        //                     const location = api.coord([api.value(0), api.value(1)]);
+        //                     return {
+        //                         type: "group",
+        //                         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: colorArr[1][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[1][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[2][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[2][1],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                             {
+        //                                 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: colorArr[0][0],
+        //                                         },
+        //                                         {
+        //                                             offset: 1,
+        //                                             color: colorArr[0][0],
+        //                                         },
+        //                                     ]),
+        //                                 },
+        //                             },
+        //                         ],
+        //                     };
+        //                 },
+        //                 data: seriesData,
+        //             },
+        //             {
+        //                 type: "bar",
+        //                 label: {
+        //                     normal: {
+        //                         show: false,
+        //                         position: "top",
+        //                         // formatter: (e) => {
+        //                         //     return e.value === maxValue ? e.value : "";
+        //                         // },
+        //                         fontSize: 20,
+        //                         color: "#11C3FF",
+        //                         offset: [0, -15],
+        //                     },
+        //                 },
+        //                 itemStyle: {
+        //                     color: "transparent",
+        //                 },
+        //                 tooltip: {},
+        //                 data: seriesData,
+        //             },
+        //         ],
+        //     };
+        //     this.defineEcharts("nhqs", option);
+        // },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    width: 100%;
+    height: 100%;
+    padding-top: 400px;
+    box-sizing: border-box;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    background-color: transparent;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+    width: 325px;
+    z-index: 2;
+    top: 420px;
+    right: 1450px;
+    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;
+
+    .title {
+        margin-top: 15px;
+        margin-left: 60px;
+    }
+
+    .dh {
+        position: relative;
+        margin-top: 56px;
+
+        .imgBox1 {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 88px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .first {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            img {
+                width: 320px;
+            }
+
+            ul {
+                width: 555px;
+                list-style: none;
+
+                .danhao {
+                    padding-left: 20px;
+                    color: #fff;
+                    width: 555px;
+                    height: 60px;
+                    line-height: 60px;
+                    margin-bottom: 18px;
+                    opacity: 1;
+                    background: url(../../assets/NXGL/组\ 277.png);
+                    background-size: cover;
+                    font-size: 30px;
+
+                    .count {
+                        width: 60px;
+                        height: 60px;
+                        color: #00C0FA;
+                        font-size: 40px;
+                        padding-right: 10px;
+                    }
+                }
+            }
+
+        }
+
+        // 左边第二个    
+        .flnh {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox2 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 78px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .second {
+                .s_one {
+                    width: 100%;
+                    height: 175px;
+                    background: url(../../assets/NXGL/组\ 278.png);
+                    background-size: cover;
+                    margin-top: 80px;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_two {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 279.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #DA1015;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+
+                .s_three {
+                    width: 100%;
+                    height: 175px;
+                    margin-top: 60px;
+                    background: url(../../assets/NXGL/组\ 280.png);
+                    background-size: cover;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .s_l {
+                        padding-top: 10px;
+                        margin-left: 200px;
+                        width: 299px;
+                        height: 120px;
+                        font-size: 40px;
+                        font-family: MicrosoftYaHei;
+                        color: #FFFFFF;
+                    }
+
+                    .s_r {
+                        width: 300px;
+                        height: 120px;
+                        line-height: 120px;
+                        font-size: 40px;
+
+                        p {
+                            width: 300px;
+                            height: 54px;
+                            // line-height: 54px;
+                            color: #FFFFFF;
+                        }
+
+                        span.tongbi {
+                            font-size: 40px;
+                            width: 133px;
+                            height: 54px;
+                            // line-height: 54px;
+                            font-weight: 700;
+                            font-family: YouSheBiaoTiHei;
+                            color: #58FD64;
+                            margin-left: 8px;
+                            margin-right: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .nhrl {
+            position: relative;
+            margin-top: 56px;
+
+            .data {
+                position: absolute;
+                font-size: 20px;
+                font-family: "DOUYU";
+                color: #ffffff;
+                line-height: 18px;
+                display: flex;
+                right: 0;
+                top: 120px;
+                z-index: 1;
+
+                span {
+                    width: 122px;
+                    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%);
+                }
+            }
+
+            .imgBox3 {
+                height: 93px;
+                width: 1156px;
+                margin-bottom: 88px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+        }
+    }
+}
+
+.right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .ghlnhgk {
+        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";
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        /deep/ .tabledata {
+            margin-top: 60px;
+            display: flex;
+
+            .table {
+                width: 49.5%;
+                margin-top: 50px;
+
+                .time {
+                    font-size: 20px;
+                }
+
+                .count {
+                    color: #05F0FF;
+                    font-size: 28px;
+                }
+
+                //表体颜色
+                .el-table tr {
+                    background: #16253b;
+                    color: #fff;
+                    font-size: 30px;
+                    height: 40px;
+
+                    .cell {
+                        line-height: 40px;
+                    }
+                }
+
+                // 去掉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;
+                }
+            }
+        }
+    }
+
+    .xtnhgk {
+        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";
+            }
+        }
+
+        #nhzk {
+            width: 100%;
+            height: 400px;
+        }
+    }
+
+    .nhqs {
+        position: relative;
+        margin-top: 60px;
+
+        .imgBox {
+            height: 93px;
+            width: 1156px;
+            margin-bottom: 150px;
+
+            p {
+                position: absolute;
+                color: #fff;
+                top: 20px;
+                left: 50px;
+                font-size: 30px;
+                font-family: "MicrosoftYaHei";
+            }
+        }
+
+        .biaoti {
+            width: 600px;
+            position: absolute;
+            left: 300px;
+            display: flex;
+            justify-content: space-around;
+            top: 200px;
+
+            .first {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #11C3FF;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .second {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #5EFB61;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+
+            .thrid {
+                width: 160px;
+                color: #fff;
+                font-size: 24px;
+                display: flex;
+                line-height: 32px;
+
+                .bg {
+                    width: 56px;
+                    height: 23px;
+                    background: #FC4F54;
+                    opacity: 1;
+                    display: block;
+                }
+
+                span:nth-child(2) {
+                    margin-left: 5px;
+                    height: 32px;
+                    line-height: 24px;
+                    display: block;
+                }
+            }
+        }
+
+        .data {
+            position: absolute;
+            font-size: 20px;
+            font-family: "DOUYU";
+            color: #ffffff;
+            line-height: 18px;
+            display: flex;
+            right: 0;
+            top: 120px;
+            z-index: 1;
+
+            span {
+                width: 122px;
+                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%);
+            }
+        }
+
+        #nhqs {
+            width: 100%;
+            height: 600px;
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+        .el-calendar-day{
+            p.lan{
+                color: #57FF5B!important;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/NXGL_20231215110848.vue b/.history/src/views/Zhou/NXGL_20231215110848.vue
new file mode 100644
index 0000000..20a6fa3
--- /dev/null
+++ b/.history/src/views/Zhou/NXGL_20231215110848.vue
@@ -0,0 +1,1645 @@
+<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="nylx">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能源流向</p>
+        </div>
+        <div id="nylx">
+          <div class="zbm">原始值折标煤</div>
+          <div class="shui">水</div>
+          <div class="dian">电</div>
+          <div class="yrfd">余热发电</div>
+          <div class="mei">煤</div>
+          <div class="yr_one">1号生产线</div>
+          <div class="yr_two">2号生产线</div>
+          <div class="yr_three">3号生产线</div>
+          <div class="mei_one">1号生产线</div>
+          <div class="mei_two">2号生产线</div>
+          <div class="mei_three">3号生产线</div>
+        </div>
+      </div>
+      <div class="ffl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>复费率</p>
+        </div>
+        <div class="tit">
+          <div class="first">
+            <span class="one"></span>
+            <span class="two">尖峰时段用电量</span>
+          </div>
+          <div class="second">
+            <span class="one"></span>
+            <span class="two">平时段用电量</span>
+          </div>
+          <div class="thrid">
+            <span class="one"></span>
+            <span class="two">深谷时段用电量</span>
+          </div>
+          <div class="fourth">
+            <span class="one"></span>
+            <span class="two">峰时段用电量</span>
+          </div>
+          <div class="fifth">
+            <span class="one"></span>
+            <span class="two">谷时段用电量</span>
+          </div>
+        </div>
+        <div id="ffl"></div>
+      </div>
+      <div class="nxdb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>能效对标（定额管理）</p>
+        </div>
+        <div id="nxdb">
+          <div class="table">
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column prop="date1" label="" align="center" width="480">
+              </el-table-column>
+              <el-table-column prop="date2" label="先进值" align="center">
+              </el-table-column>
+              <el-table-column prop="date3" label="企业" align="center">
+              </el-table-column>
+              <el-table-column prop="date4" label="同比" align="center">
+                <template scope="scope">
+                  <span style="color: #40fff1">{{ scope.row.date4 }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="jnl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>节能量（节电率）</p>
+        </div>
+        <div class="chartBox">
+          <div id="jnl">
+            <img src="../../assets/NXGL/r1.png" alt="" />
+            <div class="zx">
+              <span>节能量（节电率）:</span>
+            </div>
+            <div class="span_jnl">
+              <span style="color: #07cdff; font-size: 40px">24.32tce(24%)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dfdj">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>电费电价</p>
+        </div>
+        <div class="chartBox">
+          <div id="dfdj"></div>
+        </div>
+      </div>
+      <div class="sbyxqk">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>设备运行情况</p>
+        </div>
+        <div id="sbyxqk">
+          <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>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      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",
+        },
+      ],
+      option1: {
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "12%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name;
+            },
+            rich: {
+              // white: {
+              //   fontSize: 20,
+              //   padding: [10, 0, 0, 0],
+              // },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            focus: "adjacency",
+          },
+          data: [
+            { name: "原始值折标煤", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            { name: "电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "水", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "余热发电", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            { name: "煤", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            {
+              name: "1号生产线",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "1号生产线",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "",
+              id: "121",
+              itemStyle: { color: "transparent" },
+              depth: 2,
+            },
+            {
+              name: "",
+              id: "122",
+              itemStyle: { color: "transparent" },
+              depth: 2,
+            },
+          ],
+          links: [
+            { source: "原始值折标煤", target: "水", value: 5 },
+            { source: "原始值折标煤", target: "电", value: 5 },
+            { source: "原始值折标煤", target: "余热发电", value: 9 },
+            { source: "原始值折标煤", target: "煤", value: 9 },
+
+            { source: "水", target: "121", value: 5 },
+            { source: "电", target: "122", value: 5 },
+            { source: "余热发电", target: "1", value: 3 },
+            { source: "余热发电", target: "2", value: 3 },
+            { source: "余热发电", target: "3", value: 3 },
+            { source: "煤", target: "11", value: 3 },
+            { source: "煤", target: "22", value: 3 },
+            { source: "煤", target: "33", value: 3 },
+          ],
+        },
+      },
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "能效管理_true",
+      // });
+      window.vuplex.postMessage("能效管理");
+      this.$router.push("/nxglnh");
+    },
+    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 "";
+    },
+    dfdj() {
+      // mock 数据
+      const dataArr = {
+        xdata: ["1月", "2月", "3月", "4月", "5月"],
+        rateData: [0.4, 0.6, 0.5, 0.16, 0.62],
+        disinfeced: [32, 34, 48, 14, 38],
+        // placeData: [320, 435, 490, 340, 320, 270, 360]
+      };
+
+      const legend = {
+        data: [
+          {
+            name: "电费",
+            icon: "rect",
+          },
+          {
+            name: "销售电价",
+            icon: "rect",
+          },
+        ],
+        textStyle: {
+          color: "#fff",
+          fontSize: "20px",
+        },
+        itemWidth: 25,
+        itemHeight: 15,
+        itemGap: 15,
+        // bottom: '5%',
+        selectedMode: false,
+      };
+      const grid = { top: "10%", left: "10%", right: "3%", bottom: "15%" };
+      // xAxis
+      const xAxis = {
+        axisTick: { show: true },
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 20, color: "#fff" } },
+        data: dataArr.xdata,
+      };
+
+      // yAxis
+      const yAxis = [
+        {
+          type: "value",
+          name: "单位:kWh",
+          splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
+          axisLine: { show: false, lineStyle: { color: "#fff" } },
+          axisLabel: { textStyle: { fontSize: 20, color: "#fff" } },
+        },
+        {
+          // 双y轴，主要用于折线图，所以不需要显示坐标
+          type: "value",
+          show: true,
+          min: 0,
+          max: 1,
+          axisLabel: { textStyle: { fontSize: 20, color: "#fff" } },
+        },
+      ];
+
+      // series
+      const series = [
+        {
+          z: 2,
+          name: "底部",
+          type: "pictorialBar",
+          data: [1, 1, 1, 1, 1, 1, 1, 1],
+          symbol: "diamond",
+          symbolOffset: [0, "50%"],
+          symbolSize: [30, 20],
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(15, 199, 255, 1)" },
+                // { offset: 0.5, color: "rgba(14, 99, 213, 1)" },
+                // { offset: 0.5, color: "rgba(14, 99, 213, 1)" },
+                { offset: 1, color: "rgba(17, 93, 213, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 3,
+          name: "上部1",
+          type: "pictorialBar",
+          symbolPosition: "end",
+          data: dataArr.disinfeced,
+          symbol: "diamond",
+          symbolOffset: [0, "-50%"],
+          symbolSize: [30, 20],
+          itemStyle: {
+            borderColor: "rgba(14, 99, 213, 1)",
+            borderWidth: 2,
+            color: "rgba(14, 99, 213, 1)",
+          },
+        },
+        {
+          z: 1,
+          stack: "总量",
+          type: "bar",
+          name: "电费",
+          barWidth: 30,
+          // barGap: '-100%',
+          data: dataArr.disinfeced,
+          itemStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(15, 199, 255, 1)" },
+                // { offset: 0.5, color: "rgba(14, 99, 213, 1)" },
+                // { offset: 0.5, color: "rgba(14, 99, 213, 1)" },
+                { offset: 1, color: "rgba(17, 93, 213, 1)" },
+              ],
+            },
+          },
+        },
+        {
+          z: 9,
+          // 双y轴
+          yAxisIndex: 1,
+          name: "销售电价",
+          type: "line",
+          symbol: "circle",
+          symbolSize: [12, 12],
+          color: {
+            type: "linear",
+            x: 1,
+            y: 0,
+            x2: 0,
+            y2: 0,
+            // 0% 处的颜色                           // 100% 处的颜色
+            colorStops: [
+              { offset: 0, color: "#43FFF4 " },
+              { offset: 1, color: "#43FFF4" },
+            ],
+            global: false, // 缺省为 false
+          },
+          lineStyle: {
+            color: {
+              type: "linear",
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              // 0% 处的颜色                           // 100% 处的颜色
+              colorStops: [
+                { offset: 0, color: "#43FFF4 " },
+                { offset: 1, color: "#43FFF4" },
+              ],
+              global: false, // 缺省为 false
+            },
+          },
+          // 修改的是线下区域的颜色
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(
+              // 右/下/左/上
+              0,
+              0,
+              0,
+              1,
+              [
+                { offset: 0, color: "rgba(255, 209, 26, .2)" },
+                { offset: 1, color: "transparent" },
+              ]
+            ),
+          },
+          label: {
+            show: false,
+            textStyle: { fontSize: 16, color: "#ffd11a" },
+          },
+          data: dataArr.rateData,
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid, legend };
+      this.defineEcharts("dfdj", option);
+    },
+    ffl() {
+      let lengthData = [];
+      let Lengths = [];
+      let data = [[], [], [], [], []];
+      let sum = 0;
+      let arr = [];
+      let dom = 800;
+      let barWidth = dom / 20;
+      let JsonData = [
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "2373",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "1",
+          JCRWS: "52",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "6534",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "2",
+          JCRWS: "15",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "5338",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "3",
+          JCRWS: "20",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "7133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "4",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "6133",
+          ZTLB: "1月",
+          TJRQ: "2023-09",
+          ID: "5",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "8201",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "6",
+          JCRWS: "31",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "6327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "7",
+          JCRWS: "99",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "5621",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "8",
+          JCRWS: "70",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "4327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "9",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "6327",
+          ZTLB: "2月",
+          TJRQ: "2023-09",
+          ID: "10",
+          JCRWS: "107",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "7737",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "11",
+          JCRWS: "40",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "5491",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "12",
+          JCRWS: "45",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "6541",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "13",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "8128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "4128",
+          ZTLB: "3月",
+          TJRQ: "2023-09",
+          ID: "14",
+          JCRWS: "55",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "5795",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "16",
+          JCRWS: "90",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "9056",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "17",
+          JCRWS: "57",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "3181",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "18",
+          JCRWS: "53",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "2304",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "19",
+          JCRWS: "39",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "2204",
+          ZTLB: "4月",
+          TJRQ: "2023-09",
+          ID: "20",
+          JCRWS: "50",
+        },
+        {
+          FXDJ: "尖峰时段用电量",
+          ZTSL: "4846",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "21",
+          JCRWS: "54",
+        },
+        {
+          FXDJ: "平时段用电量",
+          ZTSL: "7491",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "22",
+          JCRWS: "84",
+        },
+        {
+          FXDJ: "深谷时段用电量",
+          ZTSL: "6507",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "23",
+          JCRWS: "86",
+        },
+        {
+          FXDJ: "峰时段用电量",
+          ZTSL: "8831",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "24",
+          JCRWS: "94",
+        },
+        {
+          FXDJ: "谷时段用电量",
+          ZTSL: "8301",
+          ZTLB: "5月",
+          TJRQ: "2023-09",
+          ID: "25",
+          JCRWS: "94",
+        },
+      ];
+
+      for (let item of JsonData) {
+        // x轴数据
+        if (!lengthData.some((t) => t === item.ZTLB)) {
+          lengthData.push(item.ZTLB);
+        }
+        // 图例数据
+        if (!Lengths.some((t) => t === item.FXDJ)) {
+          Lengths.push(item.FXDJ);
+        }
+      }
+      Lengths.forEach((e, j) => {
+        JsonData.forEach((k, i) => {
+          lengthData.forEach((m, n) => {
+            console.log(m, k.ZTLB, k.ZTSL);
+            if (m == k.ZTLB && e == k.FXDJ) {
+              data[j][n] = k.ZTSL;
+            }
+          });
+        });
+      });
+
+      let xData = lengthData.map((item, index) => {
+        return {
+          value: item,
+        };
+      });
+
+      let colors = [
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "rgba(255, 180, 29, .7)",
+            },
+            {
+              offset: 0.5,
+              color: "rgba(255, 180, 29, .5)",
+            },
+            {
+              offset: 0.5,
+              color: "rgba(255, 180, 29, .5)",
+            },
+            {
+              offset: 1,
+              color: "rgba(255, 180, 29, .7)",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "rgba(231, 238, 1, .7)",
+            },
+            {
+              offset: 0.5,
+              color: "rgba(231, 238, 1, .5)",
+            },
+            {
+              offset: 0.5,
+              color: "rgba(231, 238, 1, .7)",
+            },
+            {
+              offset: 1,
+              color: "rgba(231, 238, 1, .5)",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "rgba(3, 210, 88, .7)",
+            },
+            {
+              offset: 0.5,
+              color: "rgba(3, 210, 88, .5)",
+            },
+            {
+              offset: 0.5,
+              color: "rgba(3, 210, 88, .5)",
+            },
+            {
+              offset: 1,
+              color: "rgba(3, 210, 88, .7)",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "rgba(27, 158, 228, .7)",
+            },
+            {
+              offset: 0.5,
+              color: "rgba(27, 158, 228, .5)",
+            },
+            {
+              offset: 0.5,
+              color: "rgba(27, 158, 228, .5)",
+            },
+            {
+              offset: 1,
+              color: "rgba(27, 158, 228, .7)",
+            },
+          ],
+        },
+        {
+          type: "linear",
+          x: 0,
+          x2: 1,
+          y: 0,
+          y2: 0,
+          colorStops: [
+            {
+              offset: 0,
+              color: "rgba(2, 207, 205, .7)",
+            },
+            {
+              offset: 0.5,
+              color: "rgba(2, 207, 205, .5)",
+            },
+            {
+              offset: 0.5,
+              color: "rgba(2, 207, 205, .5)",
+            },
+            {
+              offset: 1,
+              color: "rgba(2, 207, 205, .7)",
+            },
+          ],
+        },
+      ];
+      let option = {
+        //提示框
+        tooltip: {
+          show: true,
+          trigger: "axis", //axis , item
+          // backgroundColor: "RGBA(0, 49, 85, 0.5)",
+          borderColor: "rgba(0, 151, 251, 0)",
+          borderWidth: 1,
+          borderRadius: 0,
+          textStyle: {
+            color: "#BCE9FC",
+            fontSize: 20,
+            align: "left",
+          },
+          confine: true,
+          // formatter(e,i){
+          //     console.log(e,i)
+          // },
+        },
+        /**区域位置*/
+        grid: {
+          left: "6%",
+          right: "4%",
+          top: "6%",
+          bottom: 40,
+        },
+        /**图例大小*/
+        // legend: {
+        //   icon: "rect",
+        //   data: Lengths,
+        //   textStyle: {
+        //     color: "#BFEBFF",
+        //     fontSize: 30,
+        //   },
+        //   itemHeight: 16,
+        //   itemWidth: 30,
+        //   left: "15%",
+        //   top: 0,
+        //   itemGap: 50,
+        // },
+        //X轴
+        xAxis: {
+          data: xData,
+          axisLabel: {
+            margin: 20,
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            textStyle: {
+              color: "#FFFFFF",
+              fontStyle: "normal",
+              fontSize: 16,
+            },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        yAxis: {
+          name: "单位：kWh",
+          nameTextStyle: {
+            fontSize: 18,
+            color: "#FFFFFF",
+          },
+          show: true,
+          splitNumber: 4,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#FFFFFF",
+            },
+          },
+          splitLine: {
+            //坐标轴在 grid 区域中的分隔线。
+            show: false,
+            lineStyle: {
+              color: "rgba(77, 128, 254, 0.2)",
+            },
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置。
+            interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
+            formatter: function (value) {
+              if (value >= 10000) {
+                return (value / 10000).toFixed(0) + " 万";
+              } else {
+                return value.toString();
+              }
+            },
+            textStyle: {
+              color: "#FFFFFF",
+              fontStyle: "normal",
+              fontSize: 18,
+            },
+          },
+          axisTick: {
+            //坐标轴刻度相关设置。
+            show: false,
+          },
+        },
+        series: [
+          {
+            //图例一底部底片
+            z: 2,
+            type: "pictorialBar",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+          {
+            //图例一顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: data[0],
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+                color: function (params) {
+                  return colors[0].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          },
+        ],
+      };
+      data.forEach((e, i) => {
+        arr.push(e);
+        if (sum < i) {
+          sum++;
+          option.series.push({
+            //图例二顶部底片
+            z: 3,
+            type: "pictorialBar",
+            symbolPosition: "end",
+            data: this.addArray(arr),
+            symbol: "diamond",
+            symbolOffset: [0, "-50%"],
+            symbolSize: [barWidth, barWidth * 0.5],
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return colors[i].colorStops[0].color;
+                },
+              },
+            },
+            tooltip: {
+              show: false,
+            },
+          });
+        }
+        option.series.push({
+          type: "bar",
+          name: Lengths[i],
+          barWidth: barWidth,
+          itemStyle: {
+            normal: {
+              color: function (params) {
+                return colors[i].colorStops[0].color;
+              },
+            },
+          },
+          stack: "1",
+          data: e,
+        });
+      });
+      this.defineEcharts("ffl", option);
+    },
+    addArray(arr) {
+      let result = [];
+      for (let i = 0; i < arr.length; i++) {
+        arr[i].forEach((value, index) => {
+          if (result[index] == null || result[index] == "") {
+            result[index] = 0;
+          }
+          result[index] += parseInt(value);
+        });
+      }
+      return result;
+    },
+  },
+  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() {
+    // this.defineEcharts("nylx", this.option1);
+    // this.dfdj();
+    // this.defineEcharts("yysl", this.option2);
+    // this.defineEcharts("nysl", this.option3);
+    // this.defineEcharts("nhfx", this.option4);
+    this.dfdj();
+    this.ffl();
+  },
+};
+</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: 325px;
+    z-index: 2;
+    top: 420px;
+    right: 1450px;
+    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;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .nylx {
+      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";
+        }
+      }
+
+      #nylx {
+        width: 1155px;
+        height: 650px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/能效.png);
+        background-size: cover;
+        font-size: 24px;
+        font-family: MicrosoftYaHei;
+        color: #ffffff;
+        position: relative;
+        .zbm {
+          position: absolute;
+          left: 60px;
+          top: 200px;
+        }
+        .shui {
+          position: absolute;
+          left: 470px;
+          top: 15px;
+        }
+        .dian {
+          position: absolute;
+          left: 470px;
+          top: 96px;
+        }
+        .yrfd {
+          position: absolute;
+          left: 470px;
+          top: 272px;
+        }
+
+        .mei {
+          position: absolute;
+          left: 470px;
+          top: 526px;
+        }
+        .yr_one {
+          position: absolute;
+          left: 880px;
+          top: 182px;
+        }
+        .yr_two {
+          position: absolute;
+          left: 880px;
+          top: 262px;
+        }
+        .yr_three {
+          position: absolute;
+          left: 880px;
+          top: 342px;
+        }
+        .mei_one {
+          position: absolute;
+          left: 880px;
+          top: 432px;
+        }
+        .mei_two {
+          position: absolute;
+          left: 880px;
+          top: 512px;
+        }
+        .mei_three {
+          position: absolute;
+          left: 880px;
+          top: 592px;
+        }
+      }
+    }
+
+    .ffl {
+      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";
+        }
+      }
+      .tit {
+        width: 1000px;
+        height: 90px;
+        margin-top: 40px;
+        margin-left: 100px;
+        display: flex;
+        flex-wrap: wrap;
+        box-sizing: border-box;
+        justify-content: flex-start;
+        align-content: space-around;
+        .first {
+          width: 234px;
+          margin-left: 80px;
+          height: 33px;
+          font-size: 20px;
+          font-family: MicrosoftYaHei;
+          color: #ffffff;
+          line-height: 20px;
+          display: flex;
+          .one {
+            width: 55px;
+            height: 23px;
+            background: #ffb41d;
+            opacity: 1;
+            display: block;
+            margin-right: 10px;
+          }
+        }
+        .second {
+          width: 234px;
+          margin-left: 80px;
+          height: 33px;
+          font-size: 20px;
+          font-family: MicrosoftYaHei;
+          color: #ffffff;
+          line-height: 20px;
+          display: flex;
+          .one {
+            width: 55px;
+            height: 23px;
+            background: #e7ee01;
+            opacity: 1;
+            display: block;
+            margin-right: 10px;
+          }
+        }
+        .thrid {
+          width: 234px;
+          margin-left: 80px;
+          height: 33px;
+          font-size: 20px;
+          font-family: MicrosoftYaHei;
+          color: #ffffff;
+          line-height: 20px;
+          display: flex;
+          .one {
+            width: 55px;
+            height: 23px;
+            background: #03d258;
+            opacity: 1;
+            display: block;
+            margin-right: 10px;
+          }
+        }
+        .fourth {
+          width: 234px;
+          margin-left: 80px;
+          height: 33px;
+          font-size: 20px;
+          font-family: MicrosoftYaHei;
+          color: #ffffff;
+          line-height: 20px;
+          display: flex;
+          .one {
+            width: 55px;
+            height: 23px;
+            background: #1b9ee4;
+            opacity: 1;
+            display: block;
+            margin-right: 10px;
+          }
+        }
+        .fifth {
+          width: 234px;
+          margin-left: 80px;
+          height: 33px;
+          font-size: 20px;
+          font-family: MicrosoftYaHei;
+          color: #ffffff;
+          line-height: 20px;
+          display: flex;
+          .one {
+            width: 55px;
+            height: 23px;
+            background: #02cfcd;
+            opacity: 1;
+            display: block;
+            margin-right: 10px;
+          }
+        }
+      }
+      #ffl {
+        width: 1155px;
+        height: 600px;
+        margin-top: 50px;
+      }
+    }
+
+    .nxdb {
+      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";
+        }
+      }
+
+      #nxdb {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+
+        /deep/ .table {
+          margin-top: 50px;
+
+          .time {
+            font-size: 20px;
+          }
+
+          .count {
+            color: #05f0ff;
+            font-size: 28px;
+          }
+
+          //表体颜色
+          .el-table tr {
+            background: #16253b;
+            color: #fff;
+            font-size: 30px;
+            height: 40px;
+
+            .cell {
+              line-height: 40px;
+            }
+          }
+
+          // 去掉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;
+          }
+        }
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .jnl {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #jnl {
+          width: 1156px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+
+          img {
+            width: 320px;
+            height: auto;
+            margin-left: 80px;
+          }
+
+          .zx {
+            font-size: 30px;
+            position: absolute;
+            top: 100px;
+            left: 700px;
+          }
+
+          .span_jnl {
+            position: absolute;
+            top: 150px;
+            left: 700px;
+          }
+        }
+      }
+    }
+
+    .dfdj {
+      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";
+        }
+      }
+
+      #dfdj {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .sbyxqk {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      /deep/ .table {
+        margin-top: 50px;
+
+        .time {
+          font-size: 20px;
+        }
+
+        .count {
+          color: #05f0ff;
+          font-size: 28px;
+        }
+
+        //表体颜色
+        .el-table tr {
+          background: #16253b;
+          color: #fff;
+          font-size: 30px;
+          height: 40px;
+
+          .cell {
+            line-height: 40px;
+          }
+        }
+
+        // 去掉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;
+        }
+      }
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #sbyxqk {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/RiLi_20231215091702.vue b/.history/src/views/Zhou/RiLi_20231215091702.vue
new file mode 100644
index 0000000..e69de29
diff --git a/.history/src/views/Zhou/RiLi_20231215091854.vue b/.history/src/views/Zhou/RiLi_20231215091854.vue
new file mode 100644
index 0000000..41117e5
--- /dev/null
+++ b/.history/src/views/Zhou/RiLi_20231215091854.vue
@@ -0,0 +1,48 @@
+<template>
+    <div>
+        <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ShuinichangRiLi',
+
+    data() {
+        return {
+            
+        };
+    },
+
+    mounted() {
+        
+    },
+
+    methods: {
+        
+    },
+};
+</script>
+
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/RiLi_20231215091908.vue b/.history/src/views/Zhou/RiLi_20231215091908.vue
new file mode 100644
index 0000000..fd5ae5d
--- /dev/null
+++ b/.history/src/views/Zhou/RiLi_20231215091908.vue
@@ -0,0 +1,48 @@
+<template>
+    <div>
+        <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ShuinichangRiLi',
+
+    data() {
+        return {
+            ddd: new Date(),
+        };
+    },
+
+    mounted() {
+        
+    },
+
+    methods: {
+        
+    },
+};
+</script>
+
+<style lang="less" scoped>
+
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/RiLi_20231215092005.vue b/.history/src/views/Zhou/RiLi_20231215092005.vue
new file mode 100644
index 0000000..0562ed0
--- /dev/null
+++ b/.history/src/views/Zhou/RiLi_20231215092005.vue
@@ -0,0 +1,141 @@
+<template>
+    <div>
+        <div class="calendars">
+                        <div class="title">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ShuinichangRiLi',
+
+    data() {
+        return {
+            ddd: new Date(),
+        };
+    },
+
+    mounted() {
+        
+    },
+
+    methods: {
+        
+    },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .calendars {
+    .title {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231215100847.vue b/.history/src/views/Zhou/TZCGLSL_20231215100847.vue
new file mode 100644
index 0000000..005e791
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231215100847.vue
@@ -0,0 +1,1382 @@
+<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="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            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",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#09E83E",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#09E83E",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [
+                {
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            },
+            {
+            type: "pie",
+            radius: ["43%", "45%"],
+            center: ["36%", "56%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "36%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["36%", "56%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          }
+        ];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    itemGap: 200,
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    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() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</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;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            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";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        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%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            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";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+                        cursor: pointer;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            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";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            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";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+        .el-calendar-day{
+            p.lan{
+                color: #57FF5B!important;
+            }
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231215110917.vue b/.history/src/views/Zhou/TZCGLSL_20231215110917.vue
new file mode 100644
index 0000000..c564228
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231215110917.vue
@@ -0,0 +1,1382 @@
+<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="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            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",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#09E83E",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#09E83E",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [
+                {
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            },
+            {
+            type: "pie",
+            radius: ["43%", "45%"],
+            center: ["36%", "56%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "36%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["36%", "56%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          }
+        ];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    itemGap: 200,
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar(message) {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    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() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</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: 325px;
+    z-index: 2;
+    top: 420px;
+    right: 1450px;
+    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;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            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";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        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%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            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";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+                        cursor: pointer;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            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";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            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";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+        .el-calendar-day{
+            p.lan{
+                color: #57FF5B!important;
+            }
+        }
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGL_20231215110906.vue b/.history/src/views/Zhou/TZCGL_20231215110906.vue
new file mode 100644
index 0000000..3cb8333
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGL_20231215110906.vue
@@ -0,0 +1,2125 @@
+<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="qybjzl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>企业边界总览</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+          <div class="data">
+            <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+              >年</span
+            >
+            <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+              >月</span
+            >
+          </div>
+        </div>
+        <div id="qybjzl">
+          <div class="first_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>总量</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>破碎</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>熟料</p>
+            </div>
+          </div>
+          <div class="second_one">
+            <div class="one">
+              <p>2641.76</p>
+              <p>粉磨</p>
+            </div>
+            <div class="two">
+              <p>0</p>
+              <p>辅助生产系统</p>
+            </div>
+            <div class="three">
+              <p>257.1</p>
+              <p>办公生活</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="tlt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳流图</p>
+        </div>
+        <div class="top">
+          <p>单位：tCO2</p>
+        </div>
+        <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="qiyou">
+            <p>汽油<span class="count">18.31</span></p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_po">破碎<span class="count">747.24</span></div>
+          <div class="d_fen">粉磨站<span class="count">128.53</span></div>
+          <div class="d_fzgj">辅助工具<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="chai_ydy">移动源<span class="count">747.24</span></div>
+          <div class="qi_ydy">移动源<span class="count">747.24</span></div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+      </div>
+      <div class="tpfl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳排放量</p>
+        </div>
+        <div class="data">
+          <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+            >年</span
+          >
+          <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+            >月</span
+          >
+        </div>
+        <div id="tpfl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pfzb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>各类排放占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="pfzb"></div>
+        </div>
+      </div>
+      <div class="sstpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>实时碳排放</p>
+        </div>
+        <div class="chartBox">
+          <div id="sstpf"></div>
+        </div>
+      </div>
+      <div class="tzh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>碳中和</p>
+        </div>
+        <div id="tzh">
+          <div class="chart-container">
+            <div class="chart" ref="chart"></div>
+            <!-- 底座背景 -->
+            <div class="bg"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import { getPie3D, getParametricEquation } from "../../utils/fhgl";
+const color = ["#099FE3", "#00DBEB", "#50F4C1"];
+export default {
+  data() {
+    return {
+      res: "年",
+      res1: "年",
+      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",
+        },
+      ],
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "碳排放量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [
+            "",
+            "",
+            "",
+            "",
+            "12:20",
+            "",
+            "",
+            "",
+            "",
+            "13:20",
+            "",
+            "",
+            "",
+            "",
+            "14:20",
+            "",
+            "",
+            "",
+            "",
+            "15:20",
+          ],
+          axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+          axisLine:{
+            show:false,
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            // interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:tCO2",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 40,
+          interval: 10, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "碳排放量",
+            data: [
+              15, 30, 25, 20, 30, 20, 25, 23, 21, 19, 32, 36, 19, 20, 18, 20, 9,
+              28, 21, 32, 24,
+            ],
+            // smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+            markPoint: {
+              // data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        // nodeWidth:120,
+        layoutIterations: 0,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "mousemove",
+        },
+        grid: {
+          top: "25px",
+          left: "10px",
+          right: "10px",
+          bottom: "6%",
+          containLabel: true,
+        },
+        series: {
+          type: "sankey",
+          layout: "none",
+          top: "2%",
+          bottom: "5%",
+          left: "5%",
+          right: "13%",
+          draggable: false,
+          lineStyle: {
+            opacity: 0.3,
+            color: "gradient",
+            curveness: 0.7,
+          },
+          label: {
+            color: "#fff",
+            fontSize: 16,
+            formatter: function (params) {
+              return params.name + params.value;
+            },
+            rich: {
+              white: {
+                fontSize: 20,
+                padding: [10, 0, 0, 0],
+              },
+            },
+          },
+          nodeGap: 10,
+          emphasis: {
+            // focus: "adjacency",
+          },
+          data: [
+            {
+              name: "总量",
+              value: "2641.76",
+              itemStyle: { color: "#5FE3D9" },
+              depth: 0,
+            },
+            {
+              name: "煤",
+              value: "28.51",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "电",
+              value: "871",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "柴油",
+              value: "329",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "汽油",
+              value: "18.31",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            {
+              name: "原材料",
+              value: "255",
+              itemStyle: { color: "#55A9CE" },
+              depth: 1,
+            },
+            //1
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "1",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "128.53",
+              id: "2",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "114.19",
+              id: "3",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //2
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "破碎",
+              value: "747.24",
+              id: "44",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "粉磨站",
+              value: "128.53",
+              id: "55",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "辅助办公",
+              value: "114.19",
+              id: "66",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //3
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "444",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //4
+            {
+              name: "移动源",
+              value: "747.24",
+              id: "1111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            //5
+            {
+              name: "1号生产线",
+              value: "747.24",
+              id: "11111",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "2号生产线",
+              value: "28.51",
+              id: "22222",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+            {
+              name: "3号生产线",
+              value: "28.51",
+              id: "33333",
+              itemStyle: { color: "#52DBF1" },
+              depth: 2,
+            },
+          ],
+          links: [
+            // L1→L3	 4509
+            { source: "总量", target: "煤", value: 1800 },
+            { source: "总量", target: "电", value: 3600 },
+            { source: "总量", target: "柴油", value: 2400 },
+            { source: "总量", target: "汽油", value: 800 },
+            { source: "总量", target: "原材料", value: 1800 },
+            // L1→L2→L3	 2404
+            { source: "煤", target: "1", value: 300 },
+            { source: "煤", target: "2", value: 300 },
+            { source: "煤", target: "3", value: 300 },
+
+            { source: "电", target: "11", value: 300 },
+            { source: "电", target: "22", value: 300 },
+            { source: "电", target: "33", value: 300 },
+            { source: "电", target: "44", value: 300 },
+            { source: "电", target: "55", value: 300 },
+            { source: "电", target: "66", value: 300 },
+
+            { source: "柴油", target: "111", value: 300 },
+            { source: "柴油", target: "222", value: 300 },
+            { source: "柴油", target: "333", value: 300 },
+            { source: "柴油", target: "444", value: 300 },
+
+            { source: "汽油", target: "1111", value: 400 },
+
+            { source: "原材料", target: "11111", value: 300 },
+            { source: "原材料", target: "22222", value: 300 },
+            { source: "原材料", target: "33333", value: 300 },
+          ],
+        },
+      },
+      optionData: [
+        {
+          name: "城市垃圾",
+          value: 176,
+        },
+        {
+          name: "余热发电",
+          value: 288,
+        },
+        {
+          name: "光伏",
+          value: 88,
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //     type: "Tog",
+      //     message: "碳资产管理_true",
+      // });
+      window.vuplex.postMessage("碳资产管理");
+      this.$router.push("/tzcglsl");
+    },
+    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 "";
+    },
+    getbing() {
+      var trafficWay = [
+        {
+          name: "原煤",
+          value: 73.02,
+        },
+        {
+          name: "原材料",
+          value: 12.6,
+        },
+        {
+          name: "电",
+          value: 171.49,
+        },
+      ];
+      var data = [];
+      var labels = "";
+      // var index = 0;
+      var color = [
+        "#7EFAB7",
+        "#55A9CE",
+        "#53DCF1",
+      ];
+      trafficWay.forEach((item, index) => {
+        data.push(
+          {
+            value: item.value,
+            name: item.name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[index],
+                shadowColor: color[index],
+                color: color[index],
+              },
+            },
+          },
+          {
+            value: 15,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+        labels = {
+          show: true,
+          position: "outside",
+          color: "#fff",
+          formatter: function (params) {
+            var percent = 0;
+            var total = 0;
+            for (var k = 0; k < trafficWay.length; k++) {
+              total += trafficWay[k].value;
+            }
+            percent = ((params.value / total) * 100).toFixed(0);
+            if (params.name !== "") {
+              if(params.name=="原煤"){
+              return (
+                "{colors1|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else if(params.name=="电"){
+                return (
+                "{colors2|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }else{
+                return (
+                "{colors3|" +
+                percent +
+                "%" +
+                "}" +
+                "\n" +
+                "\n" +
+                "{names|" +
+                params.name +
+                "}"
+              );
+              }
+            } else {
+              return "";
+            }
+          },
+          rich: {
+            colors1: {
+              color: color[0],
+              fontSize: 40,
+              align: "left",
+            },
+            colors2: {
+              color: color[2],
+              fontSize: 40,
+              align: "left",
+            },
+            colors3: {
+              color: color[1],
+              fontSize: 40,
+              align: "left",
+            },
+            names: {
+              color: "#fff",
+              fontSize: 30,
+            },
+          },
+        };
+      });
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [195, 199],
+          center: ["36%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: labels,
+              labelLine: {
+                length: 20,
+                length2: 60,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+        {
+            type: "pie",
+            radius: ["46%", "48%"],
+            center: ["36%", "50%"],
+            animation: false,
+            hoverAnimation: false,
+            data: [
+              {
+                value: 100,
+              },
+            ],
+            label: {
+              show: false,
+              // 这里需要进行修改
+              // formatter: function (params) {
+              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
+              // }
+            },
+            labelLine: {
+              //label线的长度
+              show: true, //数据标签引导线
+              showAbove: true,
+              length: 40,
+              length2: 20,
+              lineStyle: { cap: "round" },
+            },
+            itemStyle: {
+              normal: {
+                color: "#3BC5EF",
+              },
+            },
+          },
+          {
+            name: "",
+            type: "pie",
+            startAngle: 90,
+            radius: "40%",
+            animation: false,
+            hoverAnimation: false,
+            center: ["36%", "50%"],
+            itemStyle: {
+              normal: {
+                labelLine: {
+                  show: false,
+                },
+                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
+                  {
+                    offset: 1,
+                    color: "rgba(50,171,241, 0)",
+                  },
+                  {
+                    offset: 0.5,
+                    color: "rgba(50,171,241, .4)",
+                  },
+                  {
+                    offset: 0,
+                    color: "rgba(55,70,130, 0)",
+                  },
+                ]),
+                shadowBlur: 60,
+              },
+            },
+            data: [
+              {
+                value: 100,
+              },
+            ],
+          },
+      ];
+      let option = {
+        // backgroundColor: '#0A2E5D',
+        color: color,
+        title: {
+          text: "257.1t",
+          top: "48%",
+          textAlign: "center",
+          left: "36%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 36,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                // image: "transparent",
+                width: 178,
+                height: 178,
+              },
+              left: "center",
+              top: "center",
+              position: [100, 100],
+            },
+          ],
+        },
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          itemWidth: 16,
+          itemHeight: 16,
+          icon: "rect",
+          orient: "",
+          x: "right",
+          data: [
+            {
+              name: "原煤",
+              value: "13.68",
+            },
+            {
+              name: "原材料",
+              value: "13.68",
+            },
+            {
+              name: "电",
+              value: "13.68",
+            },
+          ],
+          left: 800,
+          bottom: 240,
+          align: "left",
+          formatter: (name) => {
+            const item = trafficWay.filter((item) => item.name === name)[0];
+            if(name=="原煤"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num1|${item.value}t}`
+            );
+            }else if(name=="电"){
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num2|${item.value}t}`
+            );
+            }else{
+              return (
+              `\t\t\t{name|${name}}\t\t\t\t\t\t\t\t\t\t\t` +
+              `{num3|${item.value}t}`
+            );
+            }
+
+            // return "\t" + "\t" + name + "\t" + "\t" + item.value + "\t" + "\t" + "kWh"
+          },
+          textStyle: {
+            color: "#fff",
+            rich: {
+              name: {
+                fontSize: 24,
+                color: "#fff",
+              },
+              num1: {
+                fontSize: 28,
+                color: color[0],
+              },
+              num2: {
+                fontSize: 28,
+                color: color[2],
+              },
+              num3: {
+                fontSize: 28,
+                color: color[1],
+              },
+            },
+          },
+          itemGap: 20,
+        },
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      let chartDom = document.getElementById("pfzb");
+      let myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tpfl() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$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 = this.$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 = this.$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 c3 = [shape.x, shape.y - offsetY * 2];
+          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();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"];
+      let seriesData = [100, 200, 300, 380, 200, 380, 300, 280];
+      //拿到最大值
+      // const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#0A67FF"],
+        ["#10C6FF", "rgba(60,113,255,1)"],
+        ["#0774D6", "rgba(17,94,213,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   data: [
+        //     {
+        //       icon: "rect",
+        //       name: "炭排放量",
+        //     },
+        //   ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "碳排放量",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                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: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    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: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    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: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: false,
+                position: "top",
+                // formatter: (e) => {
+                //   return e.value === maxValue ? e.value : "";
+                // },
+                fontSize: 20,
+                color: "#11C3FF",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("tpfl", option);
+    },
+    // 初始化label样式
+    setLabel() {
+      this.optionData.forEach((item, index) => {
+        item.itemStyle = {
+          color: color[index],
+        };
+        item.label = {
+          normal: {
+            show: true,
+            color: color[index],
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                fontSize: 30,
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: color[index],
+              },
+              d: {
+                color: color[index],
+                fontSize: 40,
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            length2: 200,
+            lineStyle: {
+              width: 2,
+              color: color[index],
+            },
+          },
+        };
+      });
+    },
+    // // 图表初始化
+    initChart() {
+      this.statusChart = echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.option = getPie3D(this.optionData, 0, 270, 26, 40, 1);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        name: "信用评价", //自己根据场景修改
+        backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "60%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      // myChart.on("click", (params) => {
+      //     console.log(this[optionName].series[params.seriesIndex], 'this[optionName].series[params.seriesIndex].pieStatus');
+      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+      //     const isSelected =
+      //         !this[optionName].series[params.seriesIndex].pieStatus.selected;
+      //     const isHovered =
+      //         this[optionName].series[params.seriesIndex].pieStatus.hovered;
+      //     const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+      //     const startRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.startRatio;
+      //     const endRatio =
+      //         this[optionName].series[params.seriesIndex].pieData.endRatio;
+      //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+      //     if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+      //         this[optionName].series[selectedIndex].parametricEquation =
+      //             getParametricEquation(
+      //                 this[optionName].series[selectedIndex].pieData.startRatio,
+      //                 this[optionName].series[selectedIndex].pieData.endRatio,
+      //                 false,
+      //                 false,
+      //                 k,
+      //                 this[optionName].series[selectedIndex].pieData.value
+      //             );
+      //         this[optionName].series[selectedIndex].pieStatus.selected = false;
+      //     }
+      //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+      //     this[optionName].series[params.seriesIndex].parametricEquation =
+      //         getParametricEquation(
+      //             startRatio,
+      //             endRatio,
+      //             isSelected,
+      //             isHovered,
+      //             k,
+      //             this[optionName].series[params.seriesIndex].pieData.value
+      //         );
+      //     this[optionName].series[params.seriesIndex].pieStatus.selected =
+      //         isSelected;
+      //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+      //     selectedIndex = isSelected ? params.seriesIndex : null;
+      //     // 使用更新后的 option，渲染图表
+      //     myChart.setOption(this[optionName]);
+      // });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "信用评价"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+  },
+  created() {
+    this.setLabel();
+    // 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() {
+    this.defineEcharts("sstpf", this.option1);
+    // this.defineEcharts("tlt", this.option2);
+    this.$nextTick(() => {
+      this.getbing();
+      this.tpfl();
+      this.initChart();
+    });
+  },
+};
+</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: 325px;
+    z-index: 2;
+    top: 420px;
+    right: 1450px;
+    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;
+
+    .title {
+      margin-top: 15px;
+      margin-left: 60px;
+    }
+
+    .qybjzl {
+      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";
+        }
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 30px;
+
+        p {
+          font-size: 24px;
+          color: #fff;
+        }
+
+        .data {
+          // position: absolute;
+          font-size: 20px;
+          font-family: "DOUYU";
+          color: #ffffff;
+          line-height: 18px;
+          display: flex;
+          // right: 0;
+          // top: 120px;
+          z-index: 1;
+
+          span {
+            width: 122px;
+            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%
+            );
+          }
+        }
+      }
+
+      #qybjzl {
+        margin-top: 20px;
+        width: 1151px;
+        height: 511px;
+        background: url(../../assets/TZCGL/背景框6.png);
+        background-size: cover;
+        // background: #37433F;
+        opacity: 0.6;
+        padding-top: 27px;
+        box-sizing: border-box;
+
+        .first_one {
+          display: flex;
+          margin-top: 20px;
+          justify-content: space-around;
+
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+
+        .second_one {
+          display: flex;
+          margin-top: 27px;
+          justify-content: space-around;
+
+          // align-content: space-around;
+          .one {
+            width: 190px;
+            height: 190px;
+            color: #3cff1c;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1185.png);
+          }
+
+          .two {
+            width: 190px;
+            height: 190px;
+            color: #4ab0dd;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 120px;
+              margin-left: 30px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1186.png);
+          }
+
+          .three {
+            width: 190px;
+            height: 190px;
+            color: #39d7ee;
+            text-align: center;
+
+            p:nth-child(1) {
+              margin-top: 60px;
+              height: 30px;
+              line-height: 30px;
+            }
+
+            p:nth-child(2) {
+              width: 80px;
+              margin-left: 50px;
+              text-align: center;
+            }
+
+            font-size: 28px;
+            background: url(../../assets/TZCGL/组\ 1187.png);
+          }
+        }
+      }
+    }
+
+    .tlt {
+      position: relative;
+      margin-top: 30px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+      .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+      #tlt {
+        width: 1155px;
+        height: 760px;
+        margin-top: 50px;
+        background: url(../../assets/liutu/碳1.png);
+        background-size: cover;
+        position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+      }
+      .zong {
+        position: absolute;
+        left: 56px;
+        top: 400px;
+        .count {
+          color: #5ffff3;
+        }
+      }
+      .mei {
+        position: absolute;
+        left: 456px;
+        top: 28px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .dian {
+        position: absolute;
+        left: 456px;
+        top: 228px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .chaiyou {
+        position: absolute;
+        left: 456px;
+        top: 456px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+      .qiyou {
+        position: absolute;
+        left: 456px;
+        top: 585px;
+        .count {
+          margin-left: 20px;
+          color: #48c4fb;
+        }
+      }
+      .ycl {
+        position: absolute;
+        left: 456px;
+        top: 668px;
+        .count {
+          color: #48c4fb;
+        }
+      }
+
+      .m_one {
+        position: absolute;
+        left: 846px;
+        top: 0px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_two {
+        position: absolute;
+        left: 846px;
+        top: 45px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .m_three {
+        position: absolute;
+        left: 846px;
+        top: 90px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_one {
+        position: absolute;
+        left: 846px;
+        top: 140px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_two {
+        position: absolute;
+        left: 846px;
+        top: 185px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_three {
+        position: absolute;
+        left: 846px;
+        top: 230px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_po {
+        position: absolute;
+        left: 846px;
+        top: 270px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fen {
+        position: absolute;
+        left: 846px;
+        top: 310px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .d_fzgj {
+        position: absolute;
+        left: 846px;
+        top: 355px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_one {
+        position: absolute;
+        left: 846px;
+        top: 405px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_two {
+        position: absolute;
+        left: 846px;
+        top: 450px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_three {
+        position: absolute;
+        left: 846px;
+        top: 495px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .chai_ydy {
+        position: absolute;
+        left: 846px;
+        top: 535px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .qi_ydy {
+        position: absolute;
+        left: 846px;
+        top: 585px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_one {
+        position: absolute;
+        left: 846px;
+        top: 640px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_two {
+        position: absolute;
+        left: 846px;
+        top: 680px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+      .ycl_three {
+        position: absolute;
+        left: 846px;
+        top: 725px;
+        .count {
+          margin-left: 30px;
+          color: #52dbf1;
+        }
+      }
+    }
+
+    .tpfl {
+      position: relative;
+      margin-top: 40px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+
+        span {
+          width: 122px;
+          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%
+          );
+        }
+      }
+
+      #tpfl {
+        width: 1155px;
+        height: 500px;
+        margin-top: 50px;
+      }
+    }
+  }
+
+  .right {
+    width: 1237px;
+    height: 2500px;
+    margin-right: 61px;
+    background-image: url("../../assets/img/侧边.png");
+    padding-left: 59px;
+    padding-right: 45px;
+    box-sizing: border-box;
+
+    .pfzb {
+      position: relative;
+      margin-top: 130px;
+
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      .chartBox {
+        margin-top: 50px;
+
+        #pfzb {
+          width: 1156px;
+          height: 600px;
+          font-size: 20px;
+          color: #fff;
+          position: relative;
+        }
+      }
+    }
+
+    .sstpf {
+      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";
+        }
+      }
+
+      #sstpf {
+        width: 1155px;
+        height: 630px;
+        margin-top: 50px;
+      }
+    }
+
+    .tzh {
+      position: relative;
+      margin-top: 56px;
+
+      // margin-bottom: 50px;
+      .imgBox {
+        height: 93px;
+        width: 1156px;
+
+        p {
+          position: absolute;
+          color: #fff;
+          top: 20px;
+          left: 50px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+        }
+      }
+
+      #tzh {
+        width: 1155px;
+        height: 400px;
+        margin-top: 50px;
+
+        .chart-container {
+          position: relative;
+          width: 100%;
+          height: 600px;
+
+          .chart {
+            z-index: 1;
+          }
+
+          .chart,
+          .bg {
+            width: 100%;
+            height: 100%;
+          }
+
+          .bg {
+            position: absolute;
+            bottom: 38px;
+            left: 50%;
+            z-index: 0;
+            height: 400px;
+            width: 720px;
+            background: no-repeat center;
+            // background-image: url("~@/assets/imgs/piebg.png");
+            background: center top url("../../assets/img/底盘.png") no-repeat;
+            background-size: 100% 100%;
+            transform: translateX(-50%);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/Zhou/ZNYWJK_20231215110926.vue b/.history/src/views/Zhou/ZNYWJK_20231215110926.vue
new file mode 100644
index 0000000..dc10984
--- /dev/null
+++ b/.history/src/views/Zhou/ZNYWJK_20231215110926.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: 325px;
+    z-index: 2;
+    top: 420px;
+    right: 1450px;
+    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/.history/src/views/lll/ZNYW_20231215110934.vue b/.history/src/views/lll/ZNYW_20231215110934.vue
new file mode 100644
index 0000000..e108133
--- /dev/null
+++ b/.history/src/views/lll/ZNYW_20231215110934.vue
@@ -0,0 +1,1200 @@
+<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="hbsj">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>环保数据</p>
+        </div>
+        <div class="btns">
+          <div>一号窑系统</div>
+          <div>二号窑系统</div>
+          <div>三号窑系统</div>
+        </div>
+        <div class="date">
+          <div class="one">
+            <div>
+              <span>SO2折算值：</span>
+              <span>0.47</span>
+            </div>
+            <div>
+              <span>颗粒折算值：</span>
+              <span>0.20</span>
+            </div>
+            <div>
+              <span>NOX折算值：</span>
+              <span>41.42</span>
+            </div>
+            <div>
+              <span>CO折算值：</span>
+              <span>219.70</span>
+            </div>
+          </div>
+          <div class="one">
+            <div>
+              <span>实际值：</span>
+              <span>0.60</span>
+            </div>
+            <div>
+              <span>实际值：</span>
+              <span>0.26</span>
+            </div>
+            <div>
+              <span>实际值：</span>
+              <span>52.78</span>
+            </div>
+            <div>
+              <span>实际值：</span>
+              <span>280.00</span>
+            </div>
+          </div>
+          <div class="one">
+            <div>
+              <span>O2:：</span>
+              <span>6.98</span>
+            </div>
+            <div>
+              <span>流量：</span>
+              <span style="color: red">615218.94</span>
+            </div>
+            <div>
+              <span>流速：</span>
+              <span>18.74</span>
+            </div>
+            <div>
+              <span>压力：</span>
+              <span>-0.07</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="hbgzjc">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>环境感知监测</p>
+        </div>
+        <div class="date">
+          <div>
+            <p>
+              <span>烟尘实测值：0.23</span>
+              <span>流量：0.23</span>
+              <span>温度：0.23</span>
+              <span>湿度：0.23</span>
+            </p>
+            <p>
+              <span>烟尘折算值：0.23</span>
+              <span>流速：0.23</span>
+              <span>压力：0.23</span>
+              <span>氧气：0.23</span>
+            </p>
+          </div>
+          <div>
+            <p>
+              <span>烟尘实测值：0.23</span>
+              <span>流量：0.23</span>
+              <span>温度：0.23</span>
+              <span>湿度：0.23</span>
+            </p>
+            <p>
+              <span>烟尘折算值：0.23</span>
+              <span>流速：0.23</span>
+              <span>压力：0.23</span>
+              <span>氧气：0.23</span>
+            </p>
+          </div>
+          <div>
+            <p>
+              <span>烟尘实测值：0.23</span>
+              <span>流量：0.23</span>
+              <span>温度：0.23</span>
+              <span>湿度：0.23</span>
+            </p>
+            <p>
+              <span>烟尘折算值：0.23</span>
+              <span>流速：0.23</span>
+              <span>压力：0.23</span>
+              <span>氧气：0.23</span>
+            </p>
+          </div>
+          <div>
+            <p>
+              <span>烟尘实测值：0.23</span>
+              <span>流量：0.23</span>
+              <span>温度：0.23</span>
+              <span>湿度：0.23</span>
+            </p>
+            <p>
+              <span>烟尘折算值：0.23</span>
+              <span>流速：0.23</span>
+              <span>压力：0.23</span>
+              <span>氧气：0.23</span>
+            </p>
+          </div>
+          <div>
+            <p>
+              <span>烟尘实测值：0.23</span>
+              <span>流量：0.23</span>
+              <span>温度：0.23</span>
+              <span>湿度：0.23</span>
+            </p>
+            <p>
+              <span>烟尘折算值：0.23</span>
+              <span>流速：0.23</span>
+              <span>压力：0.23</span>
+              <span>氧气：0.23</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="kqwrpf">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>空气污染排放</p>
+        </div>
+        <div class="btns">
+          <div>甲烷</div>
+          <div>硫化氢</div>
+          <div>一氧化碳</div>
+          <div>氧气</div>
+        </div>
+        <div class="date">
+          <div>垃圾处理站排放物监测</div>
+          <div>一层</div>
+          <div>
+            <el-table
+              :data="tableData"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column prop="date1" label="监测点1" align="center">
+              </el-table-column>
+              <el-table-column prop="date2" label="监测点2" align="center">
+              </el-table-column>
+              <el-table-column prop="date3" label="监测点3" align="center">
+              </el-table-column>
+              <el-table-column prop="date4" label="监测点4" align="center">
+              </el-table-column>
+              <el-table-column prop="date5" label="监测点5" align="center">
+              </el-table-column>
+              <el-table-column prop="date6" label="监测点6" align="center">
+              </el-table-column>
+              <el-table-column prop="date7" label="监测点7" align="center">
+              </el-table-column>
+              <el-table-column prop="date8" label="监测点8" align="center">
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="yxzt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>运行状态</p>
+        </div>
+        <div class="date">
+          <div>
+            <img src="../../assets/znyw/安全.png" />
+            <p style="color: #6aca32">安全</p>
+          </div>
+          <div>
+            <img src="../../assets/znyw/警戒.png" />
+            <p style="color: #fbae28">警戒</p>
+          </div>
+          <div>
+            <img src="../../assets/znyw/紧急.png" />
+            <p style="color: #f12f08">紧急</p>
+          </div>
+          <div>
+            <img src="../../assets/znyw/恢复.png" />
+            <p style="color: #00ebf2">恢复</p>
+          </div>
+        </div>
+      </div>
+      <div class="xjjh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>巡检计划</p>
+        </div>
+        <div class="table">
+          <el-table
+            :data="plan"
+            style="width: 100%"
+            :row-class-name="tableRowClassName"
+            header-cell-style="background-color: #1969A8; color: white"
+          >
+            <el-table-column prop="date1" label="计划名称" align="center">
+            </el-table-column>
+            <el-table-column prop="date2" label="计划内容" align="center">
+            </el-table-column>
+            <el-table-column prop="date3" label="巡检区域" align="center">
+            </el-table-column>
+            <el-table-column prop="date4" label="巡检周期(h)" align="center">
+              <template scope="scope">
+                <span style="color: #58ff70">{{ scope.row.date4 }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="date5" label="巡检日期" align="center">
+            </el-table-column>
+            <el-table-column prop="date6" label="巡检人" align="center">
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+      <div class="sbyctj">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>设备异常统计</p>
+        </div>
+        <ul class="legend">
+          <li>
+            <div class="rect" style="background-color: #49e339"></div>
+            <div class="txt">正常</div>
+          </li>
+          <li>
+            <div class="rect" style="background-color: #fff045"></div>
+            <div class="txt">预警</div>
+          </li>
+          <li>
+            <div class="rect" style="background-color: #ff7f21"></div>
+            <div class="txt">故障</div>
+          </li>
+        </ul>
+        <div id="charts"></div>
+      </div>
+      <div class="gjlb">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>告警列表</p>
+        </div>
+        <div class="table">
+          <el-table
+            :data="list"
+            style="width: 100%"
+            :row-class-name="tableRowClassName"
+            header-cell-style="background-color: #1969A8; color: white"
+          >
+            <el-table-column prop="date1" label="发生时间" align="center">
+            </el-table-column>
+            <el-table-column prop="date2" label="告警等级" align="center">
+              <template scope="scope">
+                <span v-if="scope.row.date2 == '重大'" style="color: red">{{
+                  scope.row.date2
+                }}</span>
+                <span v-else style="color: yellow">{{ scope.row.date2 }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="date3" label="告警内容" align="center">
+            </el-table-column>
+            <el-table-column prop="date4" label="处理人" align="center">
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          date1: "12",
+          date2: "10",
+          date3: "15",
+          date4: "18",
+          date5: "12",
+          date6: "15",
+          date7: "18",
+          date8: "12",
+        },
+      ],
+      plan: [
+        {
+          date1: "计划检修",
+          date2: "定量给料机(2#3512)检修",
+          date3: "给料机",
+          date4: "24",
+          date5: "2023-12-01",
+          date6: "贾同凯",
+        },
+        {
+          date1: "计划检修",
+          date2: "单段锤式破碎机 检修",
+          date3: "破碎机",
+          date4: "8",
+          date5: "2023-08-14",
+          date6: "",
+        },
+        {
+          date1: "计划检修",
+          date2: "1#模式喂料机检修",
+          date3: "喂料机",
+          date4: "10",
+          date5: "2023-05-30",
+          date6: "",
+        },
+        {
+          date1: "计划检修",
+          date2: "1#带式输送机",
+          date3: "输送机",
+          date4: "1",
+          date5: "2023-04-20",
+          date6: "江宗林",
+        },
+        {
+          date1: "计划检修",
+          date2: "1#板式喂料机检修",
+          date3: "喂料机",
+          date4: "0",
+          date5: "2023-02-24",
+          date6: "邱傲宇",
+        },
+        {
+          date1: "计划检修",
+          date2: "料饼提升机检修",
+          date3: "提升机",
+          date4: "60",
+          date5: "2022-12-22",
+          date6: "朱涛",
+        },
+        {
+          date1: "计划检修",
+          date2: "锅压机检修",
+          date3: "锅压机",
+          date4: "20",
+          date5: "2022-12-22",
+          date6: "古荣平",
+        },
+        {
+          date1: "计划检修",
+          date2: "锅压机检修",
+          date3: "锅压机",
+          date4: "30",
+          date5: "2022-12-22",
+          date6: "古荣平",
+        },
+        {
+          date1: "计划检修",
+          date2: "水泥磨检修",
+          date3: "水泥磨",
+          date4: "130",
+          date5: "2022-12-22",
+          date6: "朱涛",
+        },
+        {
+          date1: "计划检修",
+          date2: "水泥磨主减速机检修",
+          date3: "减速机",
+          date4: "10",
+          date5: "2022-12-22",
+          date6: "古荣平",
+        },
+        {
+          date1: "计划检修",
+          date2: "水泥磨检修",
+          date3: "水泥磨",
+          date4: "20",
+          date5: "2022-12-22",
+          date6: "古荣平",
+        },
+        {
+          date1: "计划检修",
+          date2: "水泥磨检修",
+          date3: "水泥磨",
+          date4: "30",
+          date5: "2022-12-22",
+          date6: "钱林堂",
+        },
+        {
+          date1: "内协任务单",
+          date2: "水泥磨检修",
+          date3: "水泥磨",
+          date4: "40",
+          date5: "2022-12-22",
+          date6: "",
+        },
+        {
+          date1: "计划检修",
+          date2: "水泥磨检修",
+          date3: "水泥磨",
+          date4: "60",
+          date5: "2022-12-21",
+          date6: "钱林堂",
+        },
+        {
+          date1: "内协任务单",
+          date2: "水泥磨检修",
+          date3: "水泥磨",
+          date4: "60",
+          date5: "2022-12-21",
+          date6: "",
+        },
+        {
+          date1: "计划检修",
+          date2: "2#RF5/5000旋风预热器",
+          date3: "预热器",
+          date4: "20",
+          date5: "2022-12-27",
+          date6: "钱吉亮",
+        },
+        {
+          date1: "计划检修",
+          date2: "1#回转窑(58.01)检修",
+          date3: "回转窑",
+          date4: "4",
+          date5: "2022-12-18",
+          date6: "尹茂建",
+        },
+        {
+          date1: "计划检修",
+          date2: "胶带输送机1#2404检修",
+          date3: "输送机",
+          date4: "16",
+          date5: "2022-12-22",
+          date6: "",
+        },
+      ],
+      selectedRow: null, // 用于存储选中的行数据
+      list: [
+        {
+          date1: "2023-10-21 20:30",
+          date2: "紧急",
+          date3: "配电房温度过高",
+          date4: "张三",
+        },
+        {
+          date1: "2023-10-22 20:30",
+          date2: "重大",
+          date3: "变压器设备发生故障",
+          date4: "李四",
+        },
+        {
+          date1: "2023-10-26 20:30",
+          date2: "紧急",
+          date3: "配电房温度过高",
+          date4: "王五",
+        },
+      ],
+    };
+  },
+  methods: {
+    //U3D交互的绑定
+    sendMessageToCSharp() {
+      // window.vuplex.postMessage({
+      //   type: "Tog",
+      //   message: "智能运维_true",
+      // });
+      window.vuplex.postMessage("智能运维");
+      this.$router.push("/znywjk");
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    defineEcharts() {
+      var data = [
+        {
+          category: "2023-02-12",
+          markPoints: [
+            { value: 0.13, color: "#92F469" },
+            { value: 0.08, color: "#F39A44" },
+            { value: 0.06, color: "#D9D539" },
+          ],
+        },
+        {
+          category: "2023-03-12",
+          markPoints: [
+            { value: 0.11, color: "#92F469" },
+            { value: 0.08, color: "#F39A44" },
+            { value: 0.15, color: "#D9D539" },
+          ],
+        },
+        {
+          category: "2023-04-12",
+          markPoints: [
+            { value: 0.08, color: "#92F469" },
+            { value: 0.06, color: "#F39A44" },
+            { value: 0.03, color: "#D9D539" },
+          ],
+        },
+        {
+          category: "2023-05-12",
+          markPoints: [
+            { value: 0.14, color: "#92F469" },
+            { value: 0.13, color: "#F39A44" },
+            { value: 0.06, color: "#D9D539" },
+          ],
+        },
+        {
+          category: "2023-06-12",
+          markPoints: [
+            { value: 0.13, color: "#92F469" },
+            { value: 0.14, color: "#F39A44" },
+            { value: 0.04, color: "#D9D539" },
+          ],
+        },
+      ];
+      //拿到最大值用来渲染柱子高度
+      var newData = data.map((item) => {
+        // 找到 markPoints 数组中最大值的对象
+        let maxMarkPoint = item.markPoints.reduce((max, current) =>
+          max.value > current.value ? max : current
+        );
+        // 返回包含最大值和对应颜色的新对象
+        return {
+          maxValue: maxMarkPoint.value,
+          maxColor: maxMarkPoint.color,
+        };
+      });
+
+      // 将数据转换成 echarts 需要的格式
+      var seriesData = newData.map((item) => ({
+        value: item.maxValue,
+        itemStyle: {
+          color: item.maxColor, // 将颜色应用于每个柱子
+          opacity: 0.3,
+        },
+      }));
+      // 配置项
+      var option = {
+        xAxis: {
+          type: "category",
+          data: data.map((item) => item.category),
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "bar",
+            data: seriesData,
+            barWidth: 60, // 柱子宽度
+            markPoint: {
+              symbol: "roundRect", // 标记点的形状，这里使用矩形
+              symbolSize: [60, 25], // 矩形的大小
+              symbolOffset: [0, 15], // 矩形的偏移，使其在柱子中间
+              label: {
+                show: false,
+              },
+              data: data.flatMap((item) =>
+                item.markPoints.map((point) => ({
+                  name: item.category,
+                  value: point.value,
+                  xAxis: item.category,
+                  yAxis: point.value,
+                  itemStyle: {
+                    color: point.color, // 为每个点设置不同的颜色
+                  },
+                }))
+              ),
+            },
+          },
+        ],
+      };
+      //   获取容器实例;
+      var chartDom = document.getElementById("charts");
+      //   赋值并初始化ecahrts;
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+  },
+  created() {},
+  mounted() {
+    this.defineEcharts();
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  background-color: transparent;
+  background-image: url(../../assets/img/左遮罩.png),
+    url(../../assets/img/右遮罩.png);
+  position: relative;
+
+  .a {
+    position: absolute;
+    width: 325px;
+    z-index: 2;
+    top: 420px;
+    right: 1450px;
+    z-index: 100;
+
+    img {
+      margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
+    }
+  }
+}
+
+#img {
+  position: absolute;
+  right: 0px;
+}
+
+.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;
+  }
+
+  .hbsj {
+    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";
+      }
+    }
+
+    .btns {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 50px;
+      margin-bottom: 50px;
+      padding-left: 149px;
+      padding-right: 124px;
+      box-sizing: border-box;
+
+      div {
+        width: 211px;
+        height: 55px;
+        background: #3ce9c2;
+        border-radius: 12px 12px 12px 12px;
+        border: 1px solid #36ffd3;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+        color: #ffffff;
+        line-height: 55px;
+        text-align: center;
+      }
+    }
+
+    .date {
+      width: 1132px;
+      height: 400px;
+      background: linear-gradient(NaNdeg, #1e5181 0%);
+      border: 1px solid #135064;
+      border-image: radial-gradient(circle, rgba(30, 81, 129, 1)) 1 1;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      color: #fff;
+
+      .one {
+        height: 100%;
+
+        div {
+          height: 68px;
+          width: 313px;
+          line-height: 68px;
+          font-size: 30px;
+          font-family: "MicrosoftYaHei";
+          display: flex;
+          margin: 20px;
+          justify-content: space-between;
+          background: linear-gradient(
+            90deg,
+            rgba(56, 183, 161, 0.3) 30%,
+            rgba(79, 180, 163, 0.3) 30%,
+            rgba(81, 147, 136, 0.3) 40%
+          );
+          border-left: 5px solid #28a896;
+          padding-left: 16px;
+          padding-right: 16px;
+          color: #fff;
+          box-sizing: border-box;
+
+          span:nth-of-type(2) {
+            color: #28ff50;
+          }
+        }
+      }
+    }
+  }
+
+  .hbgzjc {
+    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";
+      }
+    }
+
+    .date {
+      margin-top: 50px;
+
+      div {
+        width: 1128px;
+        height: 124px;
+        margin-top: 30px;
+        font-size: 30px;
+        color: #ffffff;
+        line-height: 60px;
+        position: relative;
+
+        p {
+          position: absolute;
+          right: 10px;
+
+          span {
+            margin: 0 34px;
+          }
+        }
+
+        p:nth-of-type(1) {
+          top: 10px;
+        }
+
+        p:nth-of-type(2) {
+          top: 60px;
+        }
+      }
+
+      div:nth-of-type(1) {
+        background: url("../../assets/znyw/1.png");
+      }
+
+      div:nth-of-type(2) {
+        background: url("../../assets/znyw/2.png");
+      }
+
+      div:nth-of-type(3) {
+        background: url("../../assets/znyw/3.png");
+      }
+
+      div:nth-of-type(4) {
+        background: url("../../assets/znyw/4.png");
+      }
+
+      div:nth-of-type(5) {
+        background: url("../../assets/znyw/5.png");
+      }
+    }
+  }
+
+  .kqwrpf {
+    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";
+      }
+    }
+
+    .btns {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 50px;
+      margin-bottom: 50px;
+      padding-left: 64px;
+      padding-right: 51px;
+      box-sizing: border-box;
+
+      div {
+        width: 211px;
+        height: 55px;
+        background: #24ccd4;
+        border-radius: 12px 12px 12px 12px;
+        border: 1px solid #36ffd3;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+        color: #ffffff;
+        line-height: 55px;
+        text-align: center;
+      }
+    }
+
+    .date {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 1156px;
+
+      div {
+        width: 100%;
+        font-size: 30px;
+        font-family: "SourceHanSansCN";
+        font-weight: bold;
+        text-align: center;
+        color: #ffffff;
+      }
+
+      div:nth-of-type(1) {
+        background-color: #1969a8;
+        height: 103px;
+        line-height: 103px;
+      }
+
+      div:nth-of-type(2) {
+        background-color: #15456e;
+        height: 103px;
+        line-height: 103px;
+      }
+
+      div:nth-of-type(3) {
+        /deep/ .el-table {
+          background-color: transparent;
+          height: 300px;
+        }
+
+        .el-table::before {
+          background-color: transparent;
+        }
+
+        /deep/.el-table__body {
+          height: 100px;
+        }
+
+        /* 设置表头文字颜色为白色，如果需要 */
+        /deep/.table__header thead colgroup {
+          color: #fff;
+          background-color: transparent !important;
+        }
+
+        /deep/.el-table__row {
+          background-color: #102b44 !important;
+          color: #fff;
+        }
+
+        /deep/ .el-table__row--current,
+        .el-table__row--selected {
+          background-color: transparent !important;
+        }
+
+        // 去掉eltable的hover效果
+        ::v-deep .el-table tbody tr:hover > td {
+          background-color: #102b49 !important;
+        }
+
+        //去掉边框白线
+        ::v-deep .el-table__row > td {
+          border: none;
+        }
+
+        ::v-deep .el-table::before {
+          height: 0px;
+        }
+
+        /* 移除表头的下边框 */
+        ::v-deep .el-table__header th {
+          border-bottom: none;
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .yxzt {
+    position: relative;
+    margin-top: 130px;
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .date {
+      display: flex;
+      margin-top: 50px;
+      justify-content: space-around;
+
+      div {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        p {
+          font-size: 30px;
+        }
+      }
+    }
+  }
+
+  .xjjh {
+    position: relative;
+    margin-top: 50px;
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .table {
+      margin-top: 50px;
+      //table组件纵向滚动
+      /deep/ .el-table__body-wrapper {
+        overflow-y: auto;
+        height: 500px;
+      }
+      //隐藏滚动条
+      /deep/ .el-table__body-wrapper::-webkit-scrollbar {
+        display: none;
+      }
+
+      //表体颜色
+      /deep/.el-table tr {
+        background: #16253b;
+        color: #fff;
+        font-size: 30px;
+        height: 50px;
+
+        .cell {
+          line-height: 50px;
+        }
+      }
+
+      // 去掉eltable的hover效果
+      ::v-deep .el-table tbody tr:hover > td {
+        background-color: #0b679e !important;
+      }
+
+      //修改表头颜色
+      ::v-deep .has-gutter {
+        background-color: #1969a8;
+
+        th {
+          background-color: #1969a8;
+        }
+      }
+
+      //奇偶行颜色
+      ::v-deep .el-table .success-row {
+        background: #184167;
+      }
+
+      //去掉边框白线
+      ::v-deep .el-table__row > td {
+        border: none;
+      }
+
+      ::v-deep .el-table::before {
+        height: 0px;
+      }
+
+      /* 移除表头的下边框 */
+      ::v-deep .el-table__header th {
+        border-bottom: none;
+      }
+    }
+  }
+
+  .sbyctj {
+    position: relative;
+    margin-top: 50px;
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #charts {
+      margin-top: 50px;
+      width: 1155px;
+      height: 400px;
+    }
+
+    .legend {
+      position: absolute;
+      list-style: none;
+      display: flex;
+      left: 50%;
+      transform: translateX(-50%);
+      li {
+        display: flex;
+        font-size: 20px;
+        color: #fff;
+        align-items: center;
+        margin: 10px;
+        .rect {
+          width: 30px;
+          height: 20px;
+          margin-right: 5px;
+        }
+      }
+    }
+  }
+
+  .gjlb {
+    position: relative;
+    margin-top: 50px;
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .table {
+      margin-top: 50px;
+
+      //表体颜色
+      /deep/.el-table tr {
+        background: #16253b;
+        color: #fff;
+        font-size: 30px;
+        height: 50px;
+
+        .cell {
+          line-height: 50px;
+        }
+      }
+
+      // 去掉eltable的hover效果
+      ::v-deep .el-table tbody tr:hover > td {
+        background-color: #0b679e !important;
+      }
+
+      //修改表头颜色s
+      ::v-deep .has-gutter {
+        background-color: #1969a8;
+
+        th {
+          background-color: #1969a8;
+        }
+      }
+
+      //奇偶行颜色
+      ::v-deep .el-table .success-row {
+        background: #184167;
+      }
+
+      //去掉边框白线
+      ::v-deep .el-table__row > td {
+        border: none;
+      }
+
+      ::v-deep .el-table::before {
+        height: 0px;
+      }
+
+      /* 移除表头的下边框 */
+      ::v-deep .el-table__header th {
+        border-bottom: none;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/api/fhgl.js b/src/api/fhgl.js
index d3735a6..2d856c1 100644
--- a/src/api/fhgl.js
+++ b/src/api/fhgl.js
@@ -1,9 +1,50 @@
+<<<<<<< HEAD
+import request from '@/utils/request'
+ 
+// 负荷管理
+export function GetFhgl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分析
+export function GetFhfx () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 变压器负载率
+export function GetByqfzl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 负荷分类
+export function GetFhfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 生产线负荷占比
+export function GetFhzb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 生产线负荷
+export function GetScxfh () {
+=======
 import request from "@/utils/request";
 
 //
 export function loadBrand(limit) {
+>>>>>>> d12dd164c5611f550b3ec7804fac54967e0e4100
   return request({
-    // url: 'brand',
     url: `brand?limit=${limit}`,
     method: "GET",
   });
diff --git a/src/api/kdfh.js b/src/api/kdfh.js
index ade0d14..9e76980 100644
--- a/src/api/kdfh.js
+++ b/src/api/kdfh.js
@@ -29,9 +29,24 @@ export function GetGang() {
   });
 }
 //   柔性可调负荷
+<<<<<<< HEAD
 export function GetRou() {
   return request({
     url: `//GetFlexibleAdjustableLoad`,
     method: "GET",
   });
+=======
+  export function GetRou () {
+    return request({
+      url: `//GetFlexibleAdjustableLoad`,
+      method: 'GET'
+    })
+  }
+//可调设备
+export function GetKdsb () {
+  return request({
+    url: `//GetAdjustableDevice`,
+    method: 'GET'
+  })
+>>>>>>> 62a18469e4b1f9e2a4b0bfec7d32a8876b7f566b
 }
diff --git a/src/api/nxgl.js b/src/api/nxgl.js
new file mode 100644
index 0000000..efc7878
--- /dev/null
+++ b/src/api/nxgl.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 能源流向
+export function GetNylx () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 复费率
+export function GetFfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 能效对标
+export function GetNxdb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 节能量
+export function GetJnl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 电费单价
+export function GetDfdj () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 设备运行情况
+export function GetSbyxqk () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/src/api/nxglnh.js b/src/api/nxglnh.js
new file mode 100644
index 0000000..f5209fd
--- /dev/null
+++ b/src/api/nxglnh.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 单耗
+export function GetDh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 分类能耗
+export function GetFlnh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 能耗日历
+export function GetNhrl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 节能量
+export function GetJnl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 电费单价
+export function GetDfdj () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 设备运行情况
+export function GetSbyxqk () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/src/api/tzcgl.js b/src/api/tzcgl.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/api/tzcglsl.js b/src/api/tzcglsl.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/api/znyw.js b/src/api/znyw.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/api/zwywjk.js b/src/api/zwywjk.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/Zhou/FHGL.vue b/src/views/Zhou/FHGL.vue
index b2872c6..34fee25 100644
--- a/src/views/Zhou/FHGL.vue
+++ b/src/views/Zhou/FHGL.vue
@@ -804,10 +804,10 @@ export default {
 
   .a {
     position: absolute;
-    width: 1300px;
+    width: 325px;
     z-index: 2;
     top: 420px;
-    right: 480px;
+    right: 1450px;
     z-index: 100;
 
     img {
diff --git a/src/views/Zhou/KDFH.vue b/src/views/Zhou/KDFH.vue
index 3fab7ed..853321c 100644
--- a/src/views/Zhou/KDFH.vue
+++ b/src/views/Zhou/KDFH.vue
@@ -103,20 +103,20 @@
               style="width: 100%"
               :row-class-name="tableRowClassName"
             >
-              <el-table-column prop="date1" label="可调设备名称" align="center">
+              <el-table-column prop="DeviceName" label="可调设备名称" align="center">
               </el-table-column>
-              <el-table-column prop="date2" label="开关状态" align="center">
+              <el-table-column prop="DeviceState" label="开关状态" align="center">
                 <template scope="scope">
                   <img
                     src="../../assets/KDFH/tongguo.png"
-                    v-if="scope.row.date2 == true"
+                    v-if="scope.row.DeviceState == false"
                   />
                   <img src="../../assets/KDFH/jinggao.png" v-else />
                 </template>
               </el-table-column>
-              <el-table-column prop="date3" label="实时负荷" align="center">
+              <el-table-column prop="RealTimeLoad" label="实时负荷" align="center">
                 <template scope="scope">
-                  <span class="count">{{ scope.row.date3 }}</span>
+                  <span class="count">{{ scope.row.RealTimeLoad }}</span>
                   <span class="danwei">kW</span>
                 </template>
               </el-table-column>
@@ -212,34 +212,49 @@ export default {
       ],
       devices: [
         {
-          date1: "回转窑",
-          date2: true,
-          date3: "102.00",
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "102.00",
         },
         {
-          date1: "熟料收尘",
-          date2: true,
-          date3: "29.00",
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "29.00",
         },
         {
-          date1: "篦冷机",
-          date2: true,
-          date3: "45.00",
+          DeviceName: "篦冷机",
+          DeviceState: "1",
+          RealTimeLoad: "45.00",
         },
         {
-          date1: "生料收尘",
-          date2: false,
-          date3: "102.00",
+          DeviceName: "生料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "102.00",
         },
         {
-          date1: "回转窑",
-          date2: true,
-          date3: "29.00",
+          DeviceName: "回转窑",
+          DeviceState: "1",
+          RealTimeLoad: "29.00",
         },
         {
-          date1: "熟料收尘",
-          date2: false,
-          date3: "45.00",
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
+        },
+        {
+          DeviceName: "熟料收尘",
+          DeviceState: "0",
+          RealTimeLoad: "45.00",
         },
       ],
       option: {
@@ -1165,15 +1180,29 @@ export default {
       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;
+<<<<<<< HEAD
       this.ganglist = res.data[0];
+=======
+>>>>>>> 62a18469e4b1f9e2a4b0bfec7d32a8876b7f566b
     },
     async getrou() {
       let res = await GetRou();
       console.log(res);
+<<<<<<< HEAD
       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];
+=======
+      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];
+    },
+    async getkdsb() {
+      let res = await GetKdsb();
+      console.log(res);
+      this.devices = res.data;
+>>>>>>> 62a18469e4b1f9e2a4b0bfec7d32a8876b7f566b
     },
   },
   created() {
@@ -1217,10 +1246,10 @@ export default {
 
   .a {
     position: absolute;
-    width: 1300px;
+    width: 325px;
     z-index: 2;
     top: 420px;
-    right: 480px;
+    right: 1450px;
     z-index: 100;
 
     img {
@@ -1232,8 +1261,6 @@ export default {
 }
 
 /deep/.table {
-  // width: 100%;
-  // height: 500px;
   margin-top: 50px;
 
   .count {
@@ -1345,7 +1372,7 @@ export default {
 
       #fhzy {
         width: 100%;
-        height: 500px;
+        height: 600px;
       }
     }
   }
@@ -1371,6 +1398,16 @@ export default {
     #fhdkcl {
       width: 100%;
       height: 360px;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 218px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
     }
   }
 
@@ -1640,6 +1677,16 @@ export default {
     #kdsb {
       width: 100%;
       height: 500px;
+      /deep/ .table{
+        .el-table__body-wrapper {
+    overflow-y: auto;
+    height: 530px;
+  }
+  //隐藏滚动条
+  .el-table__body-wrapper::-webkit-scrollbar {
+    display: none;
+  }
+      }
     }
   }
 
diff --git a/src/views/Zhou/NXGL.vue b/src/views/Zhou/NXGL.vue
index 06ec74d..20a6fa3 100644
--- a/src/views/Zhou/NXGL.vue
+++ b/src/views/Zhou/NXGL.vue
@@ -1151,10 +1151,10 @@ export default {
   position: relative;
   .a {
     position: absolute;
-    width: 1300px;
+    width: 325px;
     z-index: 2;
     top: 420px;
-    right: 480px;
+    right: 1450px;
     z-index: 100;
 
     img {
diff --git a/src/views/Zhou/NXGLNH.vue b/src/views/Zhou/NXGLNH.vue
index 6c9f10f..37b2027 100644
--- a/src/views/Zhou/NXGLNH.vue
+++ b/src/views/Zhou/NXGLNH.vue
@@ -1206,11 +1206,11 @@ export default {
 
     .a {
         position: absolute;
-        width: 1300px;
-        z-index: 2;
-        top: 420px;
-        right: 480px;
-        z-index: 100;
+    width: 325px;
+    z-index: 2;
+    top: 420px;
+    right: 1450px;
+    z-index: 100;
 
         img {
             margin-right: 102px;
@@ -1567,7 +1567,7 @@ export default {
             display: flex;
 
             .table {
-                width: 50%;
+                width: 49.5%;
                 margin-top: 50px;
 
                 .time {
@@ -1876,6 +1876,11 @@ export default {
 
     .el-calendar-table td.is-selected {
         background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+        .el-calendar-day{
+            p.lan{
+                color: #57FF5B!important;
+            }
+        }
     }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/Zhou/TZCGL.vue b/src/views/Zhou/TZCGL.vue
index 5648e8b..3cb8333 100644
--- a/src/views/Zhou/TZCGL.vue
+++ b/src/views/Zhou/TZCGL.vue
@@ -1481,10 +1481,10 @@ export default {
 
   .a {
     position: absolute;
-    width: 1300px;
+    width: 325px;
     z-index: 2;
     top: 420px;
-    right: 480px;
+    right: 1450px;
     z-index: 100;
 
     img {
diff --git a/src/views/Zhou/TZCGLSL.vue b/src/views/Zhou/TZCGLSL.vue
index 5902fa5..c564228 100644
--- a/src/views/Zhou/TZCGLSL.vue
+++ b/src/views/Zhou/TZCGLSL.vue
@@ -898,11 +898,11 @@ export default {
 
     .a {
         position: absolute;
-        width: 1300px;
-        z-index: 2;
-        top: 420px;
-        right: 480px;
-        z-index: 100;
+    width: 325px;
+    z-index: 2;
+    top: 420px;
+    right: 1450px;
+    z-index: 100;
 
         img {
             margin-right: 102px;
@@ -1371,6 +1371,11 @@ opacity: 1
 
     .el-calendar-table td.is-selected {
         background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+        .el-calendar-day{
+            p.lan{
+                color: #57FF5B!important;
+            }
+        }
     }
 }
 </style>
diff --git a/src/views/Zhou/ZNYWJK.vue b/src/views/Zhou/ZNYWJK.vue
index 14eb9d2..dc10984 100644
--- a/src/views/Zhou/ZNYWJK.vue
+++ b/src/views/Zhou/ZNYWJK.vue
@@ -910,10 +910,10 @@ export default {
 
   .a {
     position: absolute;
-    width: 1300px;
+    width: 325px;
     z-index: 2;
     top: 420px;
-    right: 480px;
+    right: 1450px;
     z-index: 100;
 
     img {
diff --git a/src/views/lll/ZNYW.vue b/src/views/lll/ZNYW.vue
index ebdfccc..e108133 100644
--- a/src/views/lll/ZNYW.vue
+++ b/src/views/lll/ZNYW.vue
@@ -655,10 +655,10 @@ export default {
 
   .a {
     position: absolute;
-    width: 1300px;
+    width: 325px;
     z-index: 2;
     top: 420px;
-    right: 480px;
+    right: 1450px;
     z-index: 100;
 
     img {