From 2743ad133b132816126e847fc701f2785b198bd7 Mon Sep 17 00:00:00 2001
From: unknown <1535852499@qq.com>
Date: Fri, 15 Dec 2023 14:18:05 +0800
Subject: [PATCH] zyh

---
 .history/src/api/fhgl_20231215112551.js       |   44 +
 .history/src/api/kdfh_20231215133539.js       |   44 +
 .history/src/api/kdfh_20231215133547.js       |   44 +
 .history/src/api/kdfh_20231215133548.js       |   44 +
 .history/src/api/kdfh_20231215134414.js       |   44 +
 .history/src/api/kdfh_20231215134426.js       |   44 +
 .history/src/api/kdfh_20231215134431.js       |   44 +
 .history/src/api/kdfh_20231215134436.js       |   44 +
 .history/src/api/nxglnh_20231215112923.js     |   44 +
 .history/src/api/nxglnh_20231215113013.js     |   44 +
 .history/src/api/nxglnh_20231215130949.js     |   44 +
 .history/src/api/tzcgl_20231215093946.js      |    0
 .history/src/api/tzcgl_20231215131028.js      |    1 +
 .history/src/api/tzcgl_20231215131425.js      |   44 +
 .history/src/api/tzcgl_20231215131457.js      |   44 +
 .history/src/api/tzcgl_20231215131505.js      |   44 +
 .history/src/api/tzcgl_20231215131522.js      |   44 +
 .history/src/api/tzcgl_20231215131529.js      |   44 +
 .history/src/api/tzcgl_20231215131552.js      |   44 +
 .history/src/utils/request_20231215131845.js  |   54 +
 .history/src/utils/request_20231215133038.js  |   54 +
 .history/src/utils/request_20231215133448.js  |   54 +
 .../src/views/Zhou/KDFH_20231215132634.vue    | 1951 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215132651.vue    | 1952 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215132727.vue    | 1952 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215135147.vue    | 1952 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215135204.vue    | 1952 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215135457.vue    | 1953 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215135512.vue    | 1953 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215135527.vue    | 1954 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215135537.vue    | 1954 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215135707.vue    | 1957 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215135914.vue    | 1957 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215135938.vue    | 1957 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215140010.vue    | 1957 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215140123.vue    | 1958 +++++++++++++++++
 .../src/views/Zhou/KDFH_20231215140218.vue    | 1958 +++++++++++++++++
 .../src/views/Zhou/KDFH_20231215140425.vue    | 1942 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215140455.vue    | 1945 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215140510.vue    | 1946 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215140614.vue    | 1946 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215140643.vue    | 1946 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215140734.vue    | 1946 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215140747.vue    | 1946 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215140813.vue    | 1946 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215140943.vue    | 1946 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215141139.vue    | 1946 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215141207.vue    | 1946 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215141210.vue    | 1946 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215141233.vue    | 1946 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215141345.vue    | 1946 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215141404.vue    | 1946 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215141428.vue    | 1946 ++++++++++++++++
 .../src/views/Zhou/KDFH_20231215141446.vue    | 1947 ++++++++++++++++
 .history/vue.config_20231215133252.js         |   17 +
 .history/vue.config_20231215133339.js         |   17 +
 .history/vue.config_20231215133437.js         |   17 +
 .history/vue.config_20231215133819.js         |   17 +
 .history/vue.config_20231215133828.js         |   17 +
 .history/vue.config_20231215133907.js         |   17 +
 .history/vue.config_20231215134010.js         |   17 +
 .history/vue.config_20231215134237.js         |   16 +
 .history/vue.config_20231215134330.js         |   16 +
 .history/vue.config_20231215134646.js         |   16 +
 .history/vue.config_20231215134843.js         |   16 +
 src/api/fhgl.js                               |    7 -
 src/api/kdfh.js                               |   12 +-
 src/api/nxglnh.js                             |   12 +-
 src/api/tzcgl.js                              |   44 +
 src/utils/request.js                          |    2 +-
 src/views/Zhou/KDFH.vue                       |   78 +-
 vue.config.js                                 |   13 +-
 72 files changed, 63594 insertions(+), 63 deletions(-)
 create mode 100644 .history/src/api/fhgl_20231215112551.js
 create mode 100644 .history/src/api/kdfh_20231215133539.js
 create mode 100644 .history/src/api/kdfh_20231215133547.js
 create mode 100644 .history/src/api/kdfh_20231215133548.js
 create mode 100644 .history/src/api/kdfh_20231215134414.js
 create mode 100644 .history/src/api/kdfh_20231215134426.js
 create mode 100644 .history/src/api/kdfh_20231215134431.js
 create mode 100644 .history/src/api/kdfh_20231215134436.js
 create mode 100644 .history/src/api/nxglnh_20231215112923.js
 create mode 100644 .history/src/api/nxglnh_20231215113013.js
 create mode 100644 .history/src/api/nxglnh_20231215130949.js
 create mode 100644 .history/src/api/tzcgl_20231215093946.js
 create mode 100644 .history/src/api/tzcgl_20231215131028.js
 create mode 100644 .history/src/api/tzcgl_20231215131425.js
 create mode 100644 .history/src/api/tzcgl_20231215131457.js
 create mode 100644 .history/src/api/tzcgl_20231215131505.js
 create mode 100644 .history/src/api/tzcgl_20231215131522.js
 create mode 100644 .history/src/api/tzcgl_20231215131529.js
 create mode 100644 .history/src/api/tzcgl_20231215131552.js
 create mode 100644 .history/src/utils/request_20231215131845.js
 create mode 100644 .history/src/utils/request_20231215133038.js
 create mode 100644 .history/src/utils/request_20231215133448.js
 create mode 100644 .history/src/views/Zhou/KDFH_20231215132634.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215132651.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215132727.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215135147.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215135204.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215135457.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215135512.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215135527.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215135537.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215135707.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215135914.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215135938.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215140010.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215140123.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215140218.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215140425.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215140455.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215140510.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215140614.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215140643.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215140734.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215140747.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215140813.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215140943.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215141139.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215141207.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215141210.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215141233.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215141345.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215141404.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215141428.vue
 create mode 100644 .history/src/views/Zhou/KDFH_20231215141446.vue
 create mode 100644 .history/vue.config_20231215133252.js
 create mode 100644 .history/vue.config_20231215133339.js
 create mode 100644 .history/vue.config_20231215133437.js
 create mode 100644 .history/vue.config_20231215133819.js
 create mode 100644 .history/vue.config_20231215133828.js
 create mode 100644 .history/vue.config_20231215133907.js
 create mode 100644 .history/vue.config_20231215134010.js
 create mode 100644 .history/vue.config_20231215134237.js
 create mode 100644 .history/vue.config_20231215134330.js
 create mode 100644 .history/vue.config_20231215134646.js
 create mode 100644 .history/vue.config_20231215134843.js

diff --git a/.history/src/api/fhgl_20231215112551.js b/.history/src/api/fhgl_20231215112551.js
new file mode 100644
index 0000000..d737fed
--- /dev/null
+++ b/.history/src/api/fhgl_20231215112551.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",
+  });
+}
diff --git a/.history/src/api/kdfh_20231215133539.js b/.history/src/api/kdfh_20231215133539.js
new file mode 100644
index 0000000..43efa78
--- /dev/null
+++ b/.history/src/api/kdfh_20231215133539.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    url: `/api//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/kdfh_20231215133547.js b/.history/src/api/kdfh_20231215133547.js
new file mode 100644
index 0000000..a0b7b83
--- /dev/null
+++ b/.history/src/api/kdfh_20231215133547.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    url: `/api/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/kdfh_20231215133548.js b/.history/src/api/kdfh_20231215133548.js
new file mode 100644
index 0000000..a0b7b83
--- /dev/null
+++ b/.history/src/api/kdfh_20231215133548.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    url: `/api/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/kdfh_20231215134414.js b/.history/src/api/kdfh_20231215134414.js
new file mode 100644
index 0000000..96d7ea4
--- /dev/null
+++ b/.history/src/api/kdfh_20231215134414.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    url: `/api/GetAdjustableload`,
+    method: 'GET'
+  })
+}
+// 可调负荷策略
+export function GetKdfhcl () {
+    return request({
+      url: `/api/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/kdfh_20231215134426.js b/.history/src/api/kdfh_20231215134426.js
new file mode 100644
index 0000000..a68f589
--- /dev/null
+++ b/.history/src/api/kdfh_20231215134426.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    url: `/api/GetAdjustableload`,
+    method: 'GET'
+  })
+}
+// 可调负荷策略
+export function GetKdfhcl () {
+    return request({
+      url: `/api/GetLoadControlStrategy`,
+      method: 'GET'
+    })
+  }
+// 可调负荷分析
+export function GetKdfhfx () {
+    return request({
+      url: `/api/GetAdjustableLoadAnalysis`,
+      method: 'GET'
+    })
+  }
+// 刚性可调负荷
+export function GetGang () {
+    return request({
+      url: `/api/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/kdfh_20231215134431.js b/.history/src/api/kdfh_20231215134431.js
new file mode 100644
index 0000000..db914f8
--- /dev/null
+++ b/.history/src/api/kdfh_20231215134431.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    url: `/api/GetAdjustableload`,
+    method: 'GET'
+  })
+}
+// 可调负荷策略
+export function GetKdfhcl () {
+    return request({
+      url: `/api/GetLoadControlStrategy`,
+      method: 'GET'
+    })
+  }
+// 可调负荷分析
+export function GetKdfhfx () {
+    return request({
+      url: `/api/GetAdjustableLoadAnalysis`,
+      method: 'GET'
+    })
+  }
+// 刚性可调负荷
+export function GetGang () {
+    return request({
+      url: `/api/GetRigidAdjustableLoads`,
+      method: 'GET'
+    })
+  }
+//   柔性可调负荷
+  export function GetRou () {
+    return request({
+      url: `/api/GetFlexibleAdjustableLoad`,
+      method: 'GET'
+    })
+  }
+//可调设备
+export function GetKdsb () {
+  return request({
+    url: `//GetAdjustableDevice`,
+    method: 'GET'
+  })
+}
diff --git a/.history/src/api/kdfh_20231215134436.js b/.history/src/api/kdfh_20231215134436.js
new file mode 100644
index 0000000..c9b279e
--- /dev/null
+++ b/.history/src/api/kdfh_20231215134436.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 可调负荷资源
+export function GetKdfhzy () {
+  return request({
+    url: `/api/GetAdjustableload`,
+    method: 'GET'
+  })
+}
+// 可调负荷策略
+export function GetKdfhcl () {
+    return request({
+      url: `/api/GetLoadControlStrategy`,
+      method: 'GET'
+    })
+  }
+// 可调负荷分析
+export function GetKdfhfx () {
+    return request({
+      url: `/api/GetAdjustableLoadAnalysis`,
+      method: 'GET'
+    })
+  }
+// 刚性可调负荷
+export function GetGang () {
+    return request({
+      url: `/api/GetRigidAdjustableLoads`,
+      method: 'GET'
+    })
+  }
+//   柔性可调负荷
+  export function GetRou () {
+    return request({
+      url: `/api/GetFlexibleAdjustableLoad`,
+      method: 'GET'
+    })
+  }
+//可调设备
+export function GetKdsb () {
+  return request({
+    url: `/api/GetAdjustableDevice`,
+    method: 'GET'
+  })
+}
diff --git a/.history/src/api/nxglnh_20231215112923.js b/.history/src/api/nxglnh_20231215112923.js
new file mode 100644
index 0000000..ccf89f4
--- /dev/null
+++ b/.history/src/api/nxglnh_20231215112923.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 GetNhgk () {
+  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_20231215113013.js b/.history/src/api/nxglnh_20231215113013.js
new file mode 100644
index 0000000..e9449aa
--- /dev/null
+++ b/.history/src/api/nxglnh_20231215113013.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 GetNhgk () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 系统能耗概况
+export function GetDfdj () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 能耗趋势
+export function GetNhqs () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/nxglnh_20231215130949.js b/.history/src/api/nxglnh_20231215130949.js
new file mode 100644
index 0000000..59a6fa1
--- /dev/null
+++ b/.history/src/api/nxglnh_20231215130949.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 GetSbnhgk () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 系统能耗概况
+export function GetXtnhgk () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 能耗趋势
+export function GetNhqs () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/tzcgl_20231215093946.js b/.history/src/api/tzcgl_20231215093946.js
new file mode 100644
index 0000000..e69de29
diff --git a/.history/src/api/tzcgl_20231215131028.js b/.history/src/api/tzcgl_20231215131028.js
new file mode 100644
index 0000000..fa41f92
--- /dev/null
+++ b/.history/src/api/tzcgl_20231215131028.js
@@ -0,0 +1 @@
+// 企业边界总览
\ No newline at end of file
diff --git a/.history/src/api/tzcgl_20231215131425.js b/.history/src/api/tzcgl_20231215131425.js
new file mode 100644
index 0000000..e264e7a
--- /dev/null
+++ b/.history/src/api/tzcgl_20231215131425.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 企业边界总览
+export function GetDh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 碳流图
+export function GetTan () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 碳排放量
+export function GetTpfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 各回路（设备）能耗概况
+export function GetSbnhgk () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 系统能耗概况
+export function GetXtnhgk () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 能耗趋势
+export function GetNhqs () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/tzcgl_20231215131457.js b/.history/src/api/tzcgl_20231215131457.js
new file mode 100644
index 0000000..927fc44
--- /dev/null
+++ b/.history/src/api/tzcgl_20231215131457.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 企业边界总览
+export function GetDh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 碳流图
+export function GetTan () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 碳排放量
+export function GetTpfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 各类排放占比
+export function GetSbnhgk () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 系统能耗概况
+export function GetXtnhgk () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 能耗趋势
+export function GetNhqs () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/tzcgl_20231215131505.js b/.history/src/api/tzcgl_20231215131505.js
new file mode 100644
index 0000000..d60b361
--- /dev/null
+++ b/.history/src/api/tzcgl_20231215131505.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 企业边界总览
+export function GetDh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 碳流图
+export function GetTan () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 碳排放量
+export function GetTpfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 各类排放占比
+export function GetGlpfzb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 系统能耗概况
+export function GetXtnhgk () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 能耗趋势
+export function GetNhqs () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/tzcgl_20231215131522.js b/.history/src/api/tzcgl_20231215131522.js
new file mode 100644
index 0000000..1cd3a1d
--- /dev/null
+++ b/.history/src/api/tzcgl_20231215131522.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 企业边界总览
+export function GetDh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 碳流图
+export function GetTan () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 碳排放量
+export function GetTpfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 各类排放占比
+export function GetGlpfzb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 实时碳排放
+export function GetXtnhgk () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 能耗趋势
+export function GetNhqs () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/tzcgl_20231215131529.js b/.history/src/api/tzcgl_20231215131529.js
new file mode 100644
index 0000000..94dd3d1
--- /dev/null
+++ b/.history/src/api/tzcgl_20231215131529.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 企业边界总览
+export function GetDh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 碳流图
+export function GetTan () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 碳排放量
+export function GetTpfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 各类排放占比
+export function GetGlpfzb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 实时碳排放
+export function GetSsTpf () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 能耗趋势
+export function GetNhqs () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/api/tzcgl_20231215131552.js b/.history/src/api/tzcgl_20231215131552.js
new file mode 100644
index 0000000..0084346
--- /dev/null
+++ b/.history/src/api/tzcgl_20231215131552.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 企业边界总览
+export function GetDh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 碳流图
+export function GetTan () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 碳排放量
+export function GetTpfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 各类排放占比
+export function GetGlpfzb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 实时碳排放
+export function GetSsTpf () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 碳中和
+export function GetTzh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/.history/src/utils/request_20231215131845.js b/.history/src/utils/request_20231215131845.js
new file mode 100644
index 0000000..0138d59
--- /dev/null
+++ b/.history/src/utils/request_20231215131845.js
@@ -0,0 +1,54 @@
+/* 封装axios用于发送请求 */
+import axios from "axios";
+import { Message } from "element-ui"; // 请确保你的项目中已经安装了 Element UI
+const request = axios.create({
+  baseURL: "http://111.229.30.246:32761/api/", // 设置基地址，博主这个请求跨域了因此我设置了代理服务器，因此基地址才这么短
+  timeout: 5000, // 请求超时：当5s没有响应就会结束请求
+});
+
+// 添加请求拦截器，一下内容是axios的拦截器，可以不用写
+request.interceptors.request.use(
+  function (config) {
+    // 在发送请求之前做些什么
+    return config;
+  },
+  function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error);
+  }
+);
+
+// 添加响应拦截器
+request.interceptors.response.use(
+  function (response) {
+    // 对响应数据做点什么
+    return response.data;
+  },
+  function (error) {
+    // 对响应错误做点什么
+    if (error.response) {
+      // 请求已发出，但服务器响应状态码不在 2xx 范围内
+      console.error("Error status:", error.response.status);
+      console.error("Error data:", error.response.data);
+      console.error("Error headers:", error.response.headers);
+
+      // 提示错误信息
+      Message.error(`请求错误：${error.response.status}`);
+    } else if (error.request) {
+      // 请求被发出但未收到响应
+      console.error("No response received:", error.request);
+
+      // 提示错误信息
+      Message.error("网络错误，请稍后重试");
+    } else {
+      // 设置请求时发生了一些错误
+      console.error("Error:", error.message);
+
+      // 提示错误信息
+      Message.error("请求失败，请稍后重试");
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default request;
diff --git a/.history/src/utils/request_20231215133038.js b/.history/src/utils/request_20231215133038.js
new file mode 100644
index 0000000..0138d59
--- /dev/null
+++ b/.history/src/utils/request_20231215133038.js
@@ -0,0 +1,54 @@
+/* 封装axios用于发送请求 */
+import axios from "axios";
+import { Message } from "element-ui"; // 请确保你的项目中已经安装了 Element UI
+const request = axios.create({
+  baseURL: "http://111.229.30.246:32761/api/", // 设置基地址，博主这个请求跨域了因此我设置了代理服务器，因此基地址才这么短
+  timeout: 5000, // 请求超时：当5s没有响应就会结束请求
+});
+
+// 添加请求拦截器，一下内容是axios的拦截器，可以不用写
+request.interceptors.request.use(
+  function (config) {
+    // 在发送请求之前做些什么
+    return config;
+  },
+  function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error);
+  }
+);
+
+// 添加响应拦截器
+request.interceptors.response.use(
+  function (response) {
+    // 对响应数据做点什么
+    return response.data;
+  },
+  function (error) {
+    // 对响应错误做点什么
+    if (error.response) {
+      // 请求已发出，但服务器响应状态码不在 2xx 范围内
+      console.error("Error status:", error.response.status);
+      console.error("Error data:", error.response.data);
+      console.error("Error headers:", error.response.headers);
+
+      // 提示错误信息
+      Message.error(`请求错误：${error.response.status}`);
+    } else if (error.request) {
+      // 请求被发出但未收到响应
+      console.error("No response received:", error.request);
+
+      // 提示错误信息
+      Message.error("网络错误，请稍后重试");
+    } else {
+      // 设置请求时发生了一些错误
+      console.error("Error:", error.message);
+
+      // 提示错误信息
+      Message.error("请求失败，请稍后重试");
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default request;
diff --git a/.history/src/utils/request_20231215133448.js b/.history/src/utils/request_20231215133448.js
new file mode 100644
index 0000000..823a2cf
--- /dev/null
+++ b/.history/src/utils/request_20231215133448.js
@@ -0,0 +1,54 @@
+/* 封装axios用于发送请求 */
+import axios from "axios";
+import { Message } from "element-ui"; // 请确保你的项目中已经安装了 Element UI
+const request = axios.create({
+  // baseURL: "api/", // 设置基地址，博主这个请求跨域了因此我设置了代理服务器，因此基地址才这么短
+  timeout: 5000, // 请求超时：当5s没有响应就会结束请求
+});
+
+// 添加请求拦截器，一下内容是axios的拦截器，可以不用写
+request.interceptors.request.use(
+  function (config) {
+    // 在发送请求之前做些什么
+    return config;
+  },
+  function (error) {
+    // 对请求错误做些什么
+    return Promise.reject(error);
+  }
+);
+
+// 添加响应拦截器
+request.interceptors.response.use(
+  function (response) {
+    // 对响应数据做点什么
+    return response.data;
+  },
+  function (error) {
+    // 对响应错误做点什么
+    if (error.response) {
+      // 请求已发出，但服务器响应状态码不在 2xx 范围内
+      console.error("Error status:", error.response.status);
+      console.error("Error data:", error.response.data);
+      console.error("Error headers:", error.response.headers);
+
+      // 提示错误信息
+      Message.error(`请求错误：${error.response.status}`);
+    } else if (error.request) {
+      // 请求被发出但未收到响应
+      console.error("No response received:", error.request);
+
+      // 提示错误信息
+      Message.error("网络错误，请稍后重试");
+    } else {
+      // 设置请求时发生了一些错误
+      console.error("Error:", error.message);
+
+      // 提示错误信息
+      Message.error("请求失败，请稍后重试");
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default request;
diff --git a/.history/src/views/Zhou/KDFH_20231215132634.vue b/.history/src/views/Zhou/KDFH_20231215132634.vue
new file mode 100644
index 0000000..bb09d62
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215132634.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);
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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.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/KDFH_20231215132651.vue b/.history/src/views/Zhou/KDFH_20231215132651.vue
new file mode 100644
index 0000000..bca8111
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215132651.vue
@@ -0,0 +1,1952 @@
+<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);
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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);
+    //     })
+    // }
+    this.getkdfhzy();
+  },
+  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);
+
+  },
+};
+</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/KDFH_20231215132727.vue b/.history/src/views/Zhou/KDFH_20231215132727.vue
new file mode 100644
index 0000000..9162513
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215132727.vue
@@ -0,0 +1,1952 @@
+<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);
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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);
+    //     })
+    // }
+    this.getkdfhzy();
+  },
+  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);
+
+  },
+};
+</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/KDFH_20231215135147.vue b/.history/src/views/Zhou/KDFH_20231215135147.vue
new file mode 100644
index 0000000..88bc516
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215135147.vue
@@ -0,0 +1,1952 @@
+<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.data);
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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);
+    //     })
+    // }
+    this.getkdfhzy();
+  },
+  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);
+
+  },
+};
+</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/KDFH_20231215135204.vue b/.history/src/views/Zhou/KDFH_20231215135204.vue
new file mode 100644
index 0000000..f6cf7af
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215135204.vue
@@ -0,0 +1,1952 @@
+<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.data[0]);
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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);
+    //     })
+    // }
+    this.getkdfhzy();
+  },
+  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);
+
+  },
+};
+</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/KDFH_20231215135457.vue b/.history/src/views/Zhou/KDFH_20231215135457.vue
new file mode 100644
index 0000000..217e268
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215135457.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 == 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.data[0]);
+      this.xfdata = (res.data[0].PeakClipping / res.data[0].Amount).toFixed(2);
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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);
+    //     })
+    // }
+    this.getkdfhzy();
+  },
+  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);
+
+  },
+};
+</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/KDFH_20231215135512.vue b/.history/src/views/Zhou/KDFH_20231215135512.vue
new file mode 100644
index 0000000..aba7160
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215135512.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 == 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.data[0]);
+      this.xfdata = (res.data[0].PeakClipping / res.data[0].Amount).toFixed(2) *100;
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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);
+    //     })
+    // }
+    this.getkdfhzy();
+  },
+  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);
+
+  },
+};
+</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/KDFH_20231215135527.vue b/.history/src/views/Zhou/KDFH_20231215135527.vue
new file mode 100644
index 0000000..e107a4b
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215135527.vue
@@ -0,0 +1,1954 @@
+<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.data[0]);
+      this.xfdata = (res.data[0].PeakClipping / res.data[0].Amount).toFixed(2) *100;
+      this.tgdata = (res.data[0].PeakClipping / res.data[0].Amount).toFixed(2) *100;
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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);
+    //     })
+    // }
+    this.getkdfhzy();
+  },
+  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);
+
+  },
+};
+</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/KDFH_20231215135537.vue b/.history/src/views/Zhou/KDFH_20231215135537.vue
new file mode 100644
index 0000000..14db396
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215135537.vue
@@ -0,0 +1,1954 @@
+<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.data[0]);
+      this.xfdata = (res.data[0].PeakClipping / res.data[0].Amount).toFixed(2) *100;
+      this.tgdata = (res.data[0].ValleyFilling / res.data[0].Amount).toFixed(2) *100;
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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);
+    //     })
+    // }
+    this.getkdfhzy();
+  },
+  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);
+
+  },
+};
+</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/KDFH_20231215135707.vue b/.history/src/views/Zhou/KDFH_20231215135707.vue
new file mode 100644
index 0000000..09889b9
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215135707.vue
@@ -0,0 +1,1957 @@
+<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.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [];
+      this.tglist=[];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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);
+    //     })
+    // }
+    this.getkdfhzy();
+  },
+  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);
+
+  },
+};
+</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/KDFH_20231215135914.vue b/.history/src/views/Zhou/KDFH_20231215135914.vue
new file mode 100644
index 0000000..84dc1b8
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215135914.vue
@@ -0,0 +1,1957 @@
+<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.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.tglist=[];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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);
+    //     })
+    // }
+    this.getkdfhzy();
+  },
+  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);
+
+  },
+};
+</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/KDFH_20231215135938.vue b/.history/src/views/Zhou/KDFH_20231215135938.vue
new file mode 100644
index 0000000..555623f
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215135938.vue
@@ -0,0 +1,1957 @@
+<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.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.tglist=[datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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);
+    //     })
+    // }
+    this.getkdfhzy();
+  },
+  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);
+
+  },
+};
+</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/KDFH_20231215140010.vue b/.history/src/views/Zhou/KDFH_20231215140010.vue
new file mode 100644
index 0000000..d6df984
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215140010.vue
@@ -0,0 +1,1957 @@
+<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.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.tglist=[datas.SecondValleyFilling,datas.MinuteValleyFilling,datas.HourlyValleyFilling,datas.DayValleyFilling];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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);
+    //     })
+    // }
+    this.getkdfhzy();
+  },
+  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);
+
+  },
+};
+</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/KDFH_20231215140123.vue b/.history/src/views/Zhou/KDFH_20231215140123.vue
new file mode 100644
index 0000000..2bf9f8e
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215140123.vue
@@ -0,0 +1,1958 @@
+<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.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.tglist=[datas.SecondValleyFilling,datas.MinuteValleyFilling,datas.HourlyValleyFilling,datas.DayValleyFilling];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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);
+    //     })
+    // }
+    this.getkdfhzy();
+    this.getkdfhcl();
+  },
+  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);
+
+  },
+};
+</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/KDFH_20231215140218.vue b/.history/src/views/Zhou/KDFH_20231215140218.vue
new file mode 100644
index 0000000..38cfeba
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215140218.vue
@@ -0,0 +1,1958 @@
+<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.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.tglist=[datas.SecondValleyFilling,datas.MinuteValleyFilling,datas.HourlyValleyFilling,datas.DayValleyFilling];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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);
+    //     })
+    // }
+    this.getkdfhzy();
+    this.getkdfhcl();
+  },
+  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);
+
+  },
+};
+</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;
+    max-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_20231215140425.vue b/.history/src/views/Zhou/KDFH_20231215140425.vue
new file mode 100644
index 0000000..231bbc6
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215140425.vue
@@ -0,0 +1,1942 @@
+<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: [],
+      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.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.tglist=[datas.SecondValleyFilling,datas.MinuteValleyFilling,datas.HourlyValleyFilling,datas.DayValleyFilling];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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);
+    //     })
+    // }
+    this.getkdfhzy();
+    this.getkdfhcl();
+  },
+  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);
+
+  },
+};
+</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;
+    max-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_20231215140455.vue b/.history/src/views/Zhou/KDFH_20231215140455.vue
new file mode 100644
index 0000000..fc812bb
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215140455.vue
@@ -0,0 +1,1945 @@
+<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: [],
+      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.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.tglist=[datas.SecondValleyFilling,datas.MinuteValleyFilling,datas.HourlyValleyFilling,datas.DayValleyFilling];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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);
+    //     })
+    // }
+    this.getkdfhzy();
+    this.getkdfhcl();
+    this.getkdfhfx();
+    this.getgang();
+    this.getrou();
+  },
+  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);
+
+  },
+};
+</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;
+    max-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_20231215140510.vue b/.history/src/views/Zhou/KDFH_20231215140510.vue
new file mode 100644
index 0000000..cad2034
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215140510.vue
@@ -0,0 +1,1946 @@
+<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: [],
+      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.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.tglist=[datas.SecondValleyFilling,datas.MinuteValleyFilling,datas.HourlyValleyFilling,datas.DayValleyFilling];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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);
+    //     })
+    // }
+    this.getkdfhzy();
+    this.getkdfhcl();
+    this.getkdfhfx();
+    this.getkdsb();
+    this.getgang();
+    this.getrou();
+  },
+  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);
+
+  },
+};
+</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;
+    max-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_20231215140614.vue b/.history/src/views/Zhou/KDFH_20231215140614.vue
new file mode 100644
index 0000000..693eeb3
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215140614.vue
@@ -0,0 +1,1946 @@
+<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,GetKdfhfx} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [],
+      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.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.tglist=[datas.SecondValleyFilling,datas.MinuteValleyFilling,datas.HourlyValleyFilling,datas.DayValleyFilling];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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);
+    //     })
+    // }
+    this.getkdfhzy();
+    this.getkdfhcl();
+    this.getkdfhfx();
+    this.getkdsb();
+    this.getgang();
+    this.getrou();
+  },
+  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);
+
+  },
+};
+</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;
+    max-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_20231215140643.vue b/.history/src/views/Zhou/KDFH_20231215140643.vue
new file mode 100644
index 0000000..51d3b1b
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215140643.vue
@@ -0,0 +1,1946 @@
+<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,GetKdfhfx,GetGang,GetRou,GetKdsb} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [],
+      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.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.tglist=[datas.SecondValleyFilling,datas.MinuteValleyFilling,datas.HourlyValleyFilling,datas.DayValleyFilling];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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);
+    //     })
+    // }
+    this.getkdfhzy();
+    this.getkdfhcl();
+    this.getkdfhfx();
+    this.getkdsb();
+    this.getgang();
+    this.getrou();
+  },
+  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);
+
+  },
+};
+</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;
+    max-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_20231215140734.vue b/.history/src/views/Zhou/KDFH_20231215140734.vue
new file mode 100644
index 0000000..ff80c14
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215140734.vue
@@ -0,0 +1,1946 @@
+<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,GetKdfhfx,GetGang,GetRou,GetKdsb} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [],
+      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.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.tglist=[datas.SecondValleyFilling,datas.MinuteValleyFilling,datas.HourlyValleyFilling,datas.DayValleyFilling];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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.data);
+      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);
+    //     })
+    // }
+    this.getkdfhzy();
+    this.getkdfhcl();
+    this.getkdfhfx();
+    this.getkdsb();
+    this.getgang();
+    this.getrou();
+  },
+  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);
+
+  },
+};
+</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;
+    max-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_20231215140747.vue b/.history/src/views/Zhou/KDFH_20231215140747.vue
new file mode 100644
index 0000000..05a2e9c
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215140747.vue
@@ -0,0 +1,1946 @@
+<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,GetKdfhfx,GetGang,GetRou,GetKdsb} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [],
+      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.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.tglist=[datas.SecondValleyFilling,datas.MinuteValleyFilling,datas.HourlyValleyFilling,datas.DayValleyFilling];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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.data);
+      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);
+    //     })
+    // }
+    this.getkdfhzy();
+    this.getkdfhcl();
+    this.getkdfhfx();
+    this.getkdsb();
+    this.getgang();
+    this.getrou();
+  },
+  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);
+
+  },
+};
+</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;
+    max-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_20231215140813.vue b/.history/src/views/Zhou/KDFH_20231215140813.vue
new file mode 100644
index 0000000..1f71067
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215140813.vue
@@ -0,0 +1,1946 @@
+<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,GetKdfhfx,GetGang,GetRou,GetKdsb} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [],
+      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.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.tglist=[datas.SecondValleyFilling,datas.MinuteValleyFilling,datas.HourlyValleyFilling,datas.DayValleyFilling];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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);
+    //     })
+    // }
+    this.getkdfhzy();
+    this.getkdfhcl();
+    this.getkdfhfx();
+    this.getkdsb();
+    this.getgang();
+    this.getrou();
+  },
+  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);
+
+  },
+};
+</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;
+    max-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_20231215140943.vue b/.history/src/views/Zhou/KDFH_20231215140943.vue
new file mode 100644
index 0000000..05a2e9c
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215140943.vue
@@ -0,0 +1,1946 @@
+<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,GetKdfhfx,GetGang,GetRou,GetKdsb} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [],
+      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.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.tglist=[datas.SecondValleyFilling,datas.MinuteValleyFilling,datas.HourlyValleyFilling,datas.DayValleyFilling];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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.data);
+      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);
+    //     })
+    // }
+    this.getkdfhzy();
+    this.getkdfhcl();
+    this.getkdfhfx();
+    this.getkdsb();
+    this.getgang();
+    this.getrou();
+  },
+  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);
+
+  },
+};
+</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;
+    max-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_20231215141139.vue b/.history/src/views/Zhou/KDFH_20231215141139.vue
new file mode 100644
index 0000000..7f17269
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215141139.vue
@@ -0,0 +1,1946 @@
+<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,GetKdfhfx,GetGang,GetRou,GetKdsb} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [],
+      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.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.tglist=[datas.SecondValleyFilling,datas.MinuteValleyFilling,datas.HourlyValleyFilling,datas.DayValleyFilling];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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.data);
+      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);
+    //     })
+    // }
+    this.getkdfhzy();
+    this.getkdfhcl();
+    this.getkdfhfx();
+    this.getkdsb();
+    this.getgang();
+    this.getrou();
+  },
+  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);
+
+  },
+};
+</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;
+    max-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_20231215141207.vue b/.history/src/views/Zhou/KDFH_20231215141207.vue
new file mode 100644
index 0000000..21f1aa9
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215141207.vue
@@ -0,0 +1,1946 @@
+<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,GetKdfhfx,GetGang,GetRou,GetKdsb} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [],
+      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.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.tglist=[datas.SecondValleyFilling,datas.MinuteValleyFilling,datas.HourlyValleyFilling,datas.DayValleyFilling];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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.data);
+      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);
+    //     })
+    // }
+    this.getkdfhzy();
+    this.getkdfhcl();
+    this.getkdfhfx();
+    this.getkdsb();
+    this.getgang();
+    this.getrou();
+  },
+  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);
+
+  },
+};
+</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;
+    max-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_20231215141210.vue b/.history/src/views/Zhou/KDFH_20231215141210.vue
new file mode 100644
index 0000000..5917677
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215141210.vue
@@ -0,0 +1,1946 @@
+<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,GetKdfhfx,GetGang,GetRou,GetKdsb} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [],
+      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.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.tglist=[datas.SecondValleyFilling,datas.MinuteValleyFilling,datas.HourlyValleyFilling,datas.DayValleyFilling];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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.data);
+      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);
+    //     })
+    // }
+    this.getkdfhzy();
+    this.getkdfhcl();
+    this.getkdfhfx();
+    this.getkdsb();
+    this.getgang();
+    this.getrou();
+  },
+  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);
+
+  },
+};
+</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;
+    max-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: 20px;
+            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_20231215141233.vue b/.history/src/views/Zhou/KDFH_20231215141233.vue
new file mode 100644
index 0000000..ae3d2c6
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215141233.vue
@@ -0,0 +1,1946 @@
+<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,GetKdfhfx,GetGang,GetRou,GetKdsb} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [],
+      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.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.tglist=[datas.SecondValleyFilling,datas.MinuteValleyFilling,datas.HourlyValleyFilling,datas.DayValleyFilling];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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.data);
+      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);
+    //     })
+    // }
+    this.getkdfhzy();
+    this.getkdfhcl();
+    this.getkdfhfx();
+    this.getkdsb();
+    this.getgang();
+    this.getrou();
+  },
+  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);
+
+  },
+};
+</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;
+    max-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: 20px;
+            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: 20px;
+            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_20231215141345.vue b/.history/src/views/Zhou/KDFH_20231215141345.vue
new file mode 100644
index 0000000..9994da4
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215141345.vue
@@ -0,0 +1,1946 @@
+<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,GetKdfhfx,GetGang,GetRou,GetKdsb} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [],
+      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.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.tglist=[datas.SecondValleyFilling,datas.MinuteValleyFilling,datas.HourlyValleyFilling,datas.DayValleyFilling];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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.data);
+      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);
+    //     })
+    // }
+    this.getkdfhzy();
+    this.getkdfhcl();
+    this.getkdfhfx();
+    this.getkdsb();
+    this.getgang();
+    this.getrou();
+  },
+  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);
+
+  },
+};
+</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;
+    max-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: 20px;
+            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: 20px;
+            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: 20px;
+            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_20231215141404.vue b/.history/src/views/Zhou/KDFH_20231215141404.vue
new file mode 100644
index 0000000..375731d
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215141404.vue
@@ -0,0 +1,1946 @@
+<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,GetKdfhfx,GetGang,GetRou,GetKdsb} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [],
+      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.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.tglist=[datas.SecondValleyFilling,datas.MinuteValleyFilling,datas.HourlyValleyFilling,datas.DayValleyFilling];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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.data);
+      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);
+    //     })
+    // }
+    this.getkdfhzy();
+    this.getkdfhcl();
+    this.getkdfhfx();
+    this.getkdsb();
+    this.getgang();
+    this.getrou();
+  },
+  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);
+
+  },
+};
+</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;
+    max-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: 20px;
+            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: 20px;
+            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: 20px;
+            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: 20px;
+            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_20231215141428.vue b/.history/src/views/Zhou/KDFH_20231215141428.vue
new file mode 100644
index 0000000..375731d
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215141428.vue
@@ -0,0 +1,1946 @@
+<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,GetKdfhfx,GetGang,GetRou,GetKdsb} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [],
+      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.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.tglist=[datas.SecondValleyFilling,datas.MinuteValleyFilling,datas.HourlyValleyFilling,datas.DayValleyFilling];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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.data);
+      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);
+    //     })
+    // }
+    this.getkdfhzy();
+    this.getkdfhcl();
+    this.getkdfhfx();
+    this.getkdsb();
+    this.getgang();
+    this.getrou();
+  },
+  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);
+
+  },
+};
+</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;
+    max-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: 20px;
+            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: 20px;
+            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: 20px;
+            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: 20px;
+            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_20231215141446.vue b/.history/src/views/Zhou/KDFH_20231215141446.vue
new file mode 100644
index 0000000..10cc541
--- /dev/null
+++ b/.history/src/views/Zhou/KDFH_20231215141446.vue
@@ -0,0 +1,1947 @@
+<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,GetKdfhfx,GetGang,GetRou,GetKdsb} from "@/api/kdfh";
+export default {
+  name: "FHGL",
+  data() {
+    return {
+      plan: [],
+      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.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.tglist=[datas.SecondValleyFilling,datas.MinuteValleyFilling,datas.HourlyValleyFilling,datas.DayValleyFilling];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
+    },
+    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.data);
+      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);
+    //     })
+    // }
+    this.getkdfhzy();
+    this.getkdfhcl();
+    this.getkdfhfx();
+    this.getkdsb();
+    this.getgang();
+    this.getrou();
+  },
+  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);
+
+  },
+};
+</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;
+    max-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;
+            margin-right: 20px;
+            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: 20px;
+            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: 20px;
+            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: 20px;
+            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: 20px;
+            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/vue.config_20231215133252.js b/.history/vue.config_20231215133252.js
new file mode 100644
index 0000000..5f006ba
--- /dev/null
+++ b/.history/vue.config_20231215133252.js
@@ -0,0 +1,17 @@
+const { defineConfig } = require("@vue/cli-service");
+
+module.exports = defineConfig({
+  transpileDependencies: true,
+  lintOnSave: false,
+  publicPath: './',
+  devServer: {
+    proxy: {
+      "/Handler": {
+        target: "http://111.229.30.246:10013",
+        pathRewrite: { "^/Handler": "" },
+        secure: false,
+        changeOrigin: true,
+      },
+    },
+  },
+});
diff --git a/.history/vue.config_20231215133339.js b/.history/vue.config_20231215133339.js
new file mode 100644
index 0000000..2258626
--- /dev/null
+++ b/.history/vue.config_20231215133339.js
@@ -0,0 +1,17 @@
+const { defineConfig } = require("@vue/cli-service");
+
+module.exports = defineConfig({
+  transpileDependencies: true,
+  lintOnSave: false,
+  publicPath: './',
+  devServer: {
+    proxy: {
+      "/Handler": {
+        target: "http://111.229.30.246:32761",
+        pathRewrite: { "^/Handler": "" },
+        secure: false,
+        changeOrigin: true,
+      },
+    },
+  },
+});
diff --git a/.history/vue.config_20231215133437.js b/.history/vue.config_20231215133437.js
new file mode 100644
index 0000000..837f5f4
--- /dev/null
+++ b/.history/vue.config_20231215133437.js
@@ -0,0 +1,17 @@
+const { defineConfig } = require("@vue/cli-service");
+
+module.exports = defineConfig({
+  transpileDependencies: true,
+  lintOnSave: false,
+  publicPath: './',
+  devServer: {
+    proxy: {
+      "/api": {
+        target: "http://111.229.30.246:32761",
+        pathRewrite: { "^/api": "" },
+        secure: false,
+        changeOrigin: true,
+      },
+    },
+  },
+});
diff --git a/.history/vue.config_20231215133819.js b/.history/vue.config_20231215133819.js
new file mode 100644
index 0000000..837f5f4
--- /dev/null
+++ b/.history/vue.config_20231215133819.js
@@ -0,0 +1,17 @@
+const { defineConfig } = require("@vue/cli-service");
+
+module.exports = defineConfig({
+  transpileDependencies: true,
+  lintOnSave: false,
+  publicPath: './',
+  devServer: {
+    proxy: {
+      "/api": {
+        target: "http://111.229.30.246:32761",
+        pathRewrite: { "^/api": "" },
+        secure: false,
+        changeOrigin: true,
+      },
+    },
+  },
+});
diff --git a/.history/vue.config_20231215133828.js b/.history/vue.config_20231215133828.js
new file mode 100644
index 0000000..8fddb69
--- /dev/null
+++ b/.history/vue.config_20231215133828.js
@@ -0,0 +1,17 @@
+const { defineConfig } = require("@vue/cli-service");
+
+module.exports = defineConfig({
+  transpileDependencies: true,
+  lintOnSave: false,
+  // publicPath: './',
+  devServer: {
+    proxy: {
+      "/api": {
+        target: "http://111.229.30.246:32761",
+        pathRewrite: { "^/api": "" },
+        secure: false,
+        changeOrigin: true,
+      },
+    },
+  },
+});
diff --git a/.history/vue.config_20231215133907.js b/.history/vue.config_20231215133907.js
new file mode 100644
index 0000000..8fddb69
--- /dev/null
+++ b/.history/vue.config_20231215133907.js
@@ -0,0 +1,17 @@
+const { defineConfig } = require("@vue/cli-service");
+
+module.exports = defineConfig({
+  transpileDependencies: true,
+  lintOnSave: false,
+  // publicPath: './',
+  devServer: {
+    proxy: {
+      "/api": {
+        target: "http://111.229.30.246:32761",
+        pathRewrite: { "^/api": "" },
+        secure: false,
+        changeOrigin: true,
+      },
+    },
+  },
+});
diff --git a/.history/vue.config_20231215134010.js b/.history/vue.config_20231215134010.js
new file mode 100644
index 0000000..8fddb69
--- /dev/null
+++ b/.history/vue.config_20231215134010.js
@@ -0,0 +1,17 @@
+const { defineConfig } = require("@vue/cli-service");
+
+module.exports = defineConfig({
+  transpileDependencies: true,
+  lintOnSave: false,
+  // publicPath: './',
+  devServer: {
+    proxy: {
+      "/api": {
+        target: "http://111.229.30.246:32761",
+        pathRewrite: { "^/api": "" },
+        secure: false,
+        changeOrigin: true,
+      },
+    },
+  },
+});
diff --git a/.history/vue.config_20231215134237.js b/.history/vue.config_20231215134237.js
new file mode 100644
index 0000000..ec9c5cf
--- /dev/null
+++ b/.history/vue.config_20231215134237.js
@@ -0,0 +1,16 @@
+const { defineConfig } = require("@vue/cli-service");
+module.exports = defineConfig({
+  transpileDependencies: true,
+  lintOnSave: false,
+  // publicPath: './',
+  devServer: {
+    proxy: {
+      "/api": {
+        target: "http://111.229.30.246:32761",
+        pathRewrite: { "^/api": "" },
+        secure: false,
+        changeOrigin: true,
+      },
+    },
+  },
+});
diff --git a/.history/vue.config_20231215134330.js b/.history/vue.config_20231215134330.js
new file mode 100644
index 0000000..ec9c5cf
--- /dev/null
+++ b/.history/vue.config_20231215134330.js
@@ -0,0 +1,16 @@
+const { defineConfig } = require("@vue/cli-service");
+module.exports = defineConfig({
+  transpileDependencies: true,
+  lintOnSave: false,
+  // publicPath: './',
+  devServer: {
+    proxy: {
+      "/api": {
+        target: "http://111.229.30.246:32761",
+        pathRewrite: { "^/api": "" },
+        secure: false,
+        changeOrigin: true,
+      },
+    },
+  },
+});
diff --git a/.history/vue.config_20231215134646.js b/.history/vue.config_20231215134646.js
new file mode 100644
index 0000000..ec9c5cf
--- /dev/null
+++ b/.history/vue.config_20231215134646.js
@@ -0,0 +1,16 @@
+const { defineConfig } = require("@vue/cli-service");
+module.exports = defineConfig({
+  transpileDependencies: true,
+  lintOnSave: false,
+  // publicPath: './',
+  devServer: {
+    proxy: {
+      "/api": {
+        target: "http://111.229.30.246:32761",
+        pathRewrite: { "^/api": "" },
+        secure: false,
+        changeOrigin: true,
+      },
+    },
+  },
+});
diff --git a/.history/vue.config_20231215134843.js b/.history/vue.config_20231215134843.js
new file mode 100644
index 0000000..646e6dd
--- /dev/null
+++ b/.history/vue.config_20231215134843.js
@@ -0,0 +1,16 @@
+const { defineConfig } = require("@vue/cli-service");
+module.exports = defineConfig({
+  transpileDependencies: true,
+  lintOnSave: false,
+  // publicPath: './',
+  devServer: {
+    proxy: {
+      "/api": {
+        target: "http://111.229.30.246:32761/api",
+        pathRewrite: { "^/api": "" },
+        secure: false,
+        changeOrigin: true,
+      },
+    },
+  },
+});
diff --git a/src/api/fhgl.js b/src/api/fhgl.js
index 2d856c1..d737fed 100644
--- a/src/api/fhgl.js
+++ b/src/api/fhgl.js
@@ -1,4 +1,3 @@
-<<<<<<< HEAD
 import request from '@/utils/request'
  
 // 负荷管理
@@ -38,12 +37,6 @@ export function GetFhzb () {
 }
 // 生产线负荷
 export function GetScxfh () {
-=======
-import request from "@/utils/request";
-
-//
-export function loadBrand(limit) {
->>>>>>> d12dd164c5611f550b3ec7804fac54967e0e4100
   return request({
     url: `brand?limit=${limit}`,
     method: "GET",
diff --git a/src/api/kdfh.js b/src/api/kdfh.js
index 4364f95..c9b279e 100644
--- a/src/api/kdfh.js
+++ b/src/api/kdfh.js
@@ -3,42 +3,42 @@ import request from '@/utils/request'
 // 可调负荷资源
 export function GetKdfhzy () {
   return request({
-    url: `/GetAdjustableload`,
+    url: `/api/GetAdjustableload`,
     method: 'GET'
   })
 }
 // 可调负荷策略
 export function GetKdfhcl () {
     return request({
-      url: `/GetLoadControlStrategy`,
+      url: `/api/GetLoadControlStrategy`,
       method: 'GET'
     })
   }
 // 可调负荷分析
 export function GetKdfhfx () {
     return request({
-      url: `//GetAdjustableLoadAnalysis`,
+      url: `/api/GetAdjustableLoadAnalysis`,
       method: 'GET'
     })
   }
 // 刚性可调负荷
 export function GetGang () {
     return request({
-      url: `//GetRigidAdjustableLoads`,
+      url: `/api/GetRigidAdjustableLoads`,
       method: 'GET'
     })
   }
 //   柔性可调负荷
   export function GetRou () {
     return request({
-      url: `//GetFlexibleAdjustableLoad`,
+      url: `/api/GetFlexibleAdjustableLoad`,
       method: 'GET'
     })
   }
 //可调设备
 export function GetKdsb () {
   return request({
-    url: `//GetAdjustableDevice`,
+    url: `/api/GetAdjustableDevice`,
     method: 'GET'
   })
 }
diff --git a/src/api/nxglnh.js b/src/api/nxglnh.js
index f5209fd..59a6fa1 100644
--- a/src/api/nxglnh.js
+++ b/src/api/nxglnh.js
@@ -21,22 +21,22 @@ export function GetNhrl () {
     method: 'GET'
   })
 }
-// 节能量
-export function GetJnl () {
+// 各回路（设备）能耗概况
+export function GetSbnhgk () {
   return request({
     url: `brand?limit=${limit}`,
     method: 'GET'
   })
 }
-// 电费单价
-export function GetDfdj () {
+// 系统能耗概况
+export function GetXtnhgk () {
   return request({
     url: `brand?limit=${limit}`,
     method: 'GET'
   })
 }
-// 设备运行情况
-export function GetSbyxqk () {
+// 能耗趋势
+export function GetNhqs () {
   return request({
     url: `brand?limit=${limit}`,
     method: 'GET'
diff --git a/src/api/tzcgl.js b/src/api/tzcgl.js
index e69de29..0084346 100644
--- a/src/api/tzcgl.js
+++ b/src/api/tzcgl.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+ 
+// 企业边界总览
+export function GetDh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 碳流图
+export function GetTan () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 碳排放量
+export function GetTpfl () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 各类排放占比
+export function GetGlpfzb () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 实时碳排放
+export function GetSsTpf () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
+// 碳中和
+export function GetTzh () {
+  return request({
+    url: `brand?limit=${limit}`,
+    method: 'GET'
+  })
+}
\ No newline at end of file
diff --git a/src/utils/request.js b/src/utils/request.js
index 332ec13..823a2cf 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -2,7 +2,7 @@
 import axios from "axios";
 import { Message } from "element-ui"; // 请确保你的项目中已经安装了 Element UI
 const request = axios.create({
-  baseURL: "https://localhost:44352/api/", // 设置基地址，博主这个请求跨域了因此我设置了代理服务器，因此基地址才这么短
+  // baseURL: "api/", // 设置基地址，博主这个请求跨域了因此我设置了代理服务器，因此基地址才这么短
   timeout: 5000, // 请求超时：当5s没有响应就会结束请求
 });
 
diff --git a/src/views/Zhou/KDFH.vue b/src/views/Zhou/KDFH.vue
index c516043..10cc541 100644
--- a/src/views/Zhou/KDFH.vue
+++ b/src/views/Zhou/KDFH.vue
@@ -188,28 +188,12 @@
 <script>
 import "../../utils/echarts-liquidfill.min.js";
 import * as echarts from "echarts";
-import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
+import { GetKdfhzy, GetKdfhcl,GetKdfhfx,GetGang,GetRou,GetKdsb} 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小时",
-        },
-      ],
+      plan: [],
       devices: [
         {
           DeviceName: "回转窑",
@@ -300,7 +284,7 @@ export default {
             label: {
               normal: {
                 formatter: function (params) {
-                  console.log(params);
+                  // console.log(params);
                   return params.value * 100 + "{d|%}";
                 },
                 rich: {
@@ -1162,7 +1146,15 @@ export default {
     },
     async getkdfhzy() {
       let res = await GetKdfhzy();
-      console.log(res);
+      console.log(res.data[0]);
+      let datas = res.data[0];
+      this.xfdata = (datas.PeakClipping / datas.Amount).toFixed(2) *100;
+      this.tgdata = (datas.ValleyFilling / datas.Amount).toFixed(2) *100;
+      this.xflist = [datas.SecondPeakClipping,datas.MinutePeakClipping,datas.HourlyPeakClipping,datas.DayPeakClipping];
+      this.tglist=[datas.SecondValleyFilling,datas.MinuteValleyFilling,datas.HourlyValleyFilling,datas.DayValleyFilling];
+      this.xf();
+    this.tg();
+    this.kdfhzy();
     },
     async getkdfhcl() {
       let res = await GetKdfhcl();
@@ -1190,7 +1182,7 @@ export default {
     },
     async getkdsb() {
       let res = await GetKdsb();
-      console.log(res);
+      console.log("可调设备",res.data);
       this.devices = res.data;
     },
   },
@@ -1205,6 +1197,12 @@ export default {
     //         console.log("JSON received" + json);
     //     })
     // }
+    this.getkdfhzy();
+    this.getkdfhcl();
+    this.getkdfhfx();
+    this.getkdsb();
+    this.getgang();
+    this.getrou();
   },
   mounted() {
     var chartDom = document.getElementById("gang");
@@ -1213,10 +1211,7 @@ export default {
     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>
@@ -1390,7 +1385,7 @@ export default {
       /deep/ .table{
         .el-table__body-wrapper {
     overflow-y: auto;
-    height: 218px;
+    max-height: 218px;
   }
   //隐藏滚动条
   .el-table__body-wrapper::-webkit-scrollbar {
@@ -1721,7 +1716,7 @@ export default {
           color: #ffffff;
 
           .gang_one {
-            width: 34px;
+            // width: 34px;
             height: 34px;
             display: block;
             background: #2eedaf;
@@ -1731,11 +1726,12 @@ export default {
           }
 
           .gang_count {
-            width: 55px;
+            // width: 55px;
             height: 43px;
             font-size: 34px;
             font-family: TRENDS;
             color: #2eedaf;
+            margin-right: 20px;
             line-height: 22px;
           }
         }
@@ -1752,7 +1748,7 @@ export default {
           color: #ffffff;
 
           .gang_two {
-            width: 34px;
+            // width: 34px;
             height: 34px;
             display: block;
             margin-right: 20px;
@@ -1762,11 +1758,11 @@ export default {
           }
 
           .gang_count {
-            width: 55px;
+            // width: 55px;
             height: 43px;
             font-size: 34px;
             margin-left: 10px;
-            margin-right: 40px;
+            margin-right: 20px;
             font-family: TRENDS;
             color: #2eedd8;
             line-height: 22px;
@@ -1785,7 +1781,7 @@ export default {
           color: #ffffff;
 
           .gang_three {
-            width: 34px;
+            // width: 34px;
             height: 34px;
             margin-right: 20px;
             display: block;
@@ -1795,11 +1791,11 @@ export default {
           }
 
           .gang_count {
-            width: 55px;
+            // width: 55px;
             height: 43px;
             font-size: 34px;
             margin-left: 10px;
-            margin-right: 40px;
+            margin-right: 20px;
             font-family: TRENDS;
             color: #9acafd;
             line-height: 22px;
@@ -1851,7 +1847,7 @@ export default {
           color: #ffffff;
 
           .gang_one {
-            width: 34px;
+            // width: 34px;
             height: 34px;
             display: block;
             background: #2eedaf;
@@ -1882,7 +1878,7 @@ export default {
           color: #ffffff;
 
           .gang_two {
-            width: 34px;
+            // width: 34px;
             height: 34px;
             display: block;
             margin-right: 20px;
@@ -1892,11 +1888,11 @@ export default {
           }
 
           .gang_count {
-            width: 55px;
+            // width: 55px;
             height: 43px;
             font-size: 34px;
             margin-left: 10px;
-            margin-right: 40px;
+            margin-right: 20px;
             font-family: TRENDS;
             color: #2eedd8;
             line-height: 22px;
@@ -1915,7 +1911,7 @@ export default {
           color: #ffffff;
 
           .gang_three {
-            width: 34px;
+            // width: 34px;
             height: 34px;
             margin-right: 20px;
             display: block;
@@ -1925,11 +1921,11 @@ export default {
           }
 
           .gang_count {
-            width: 55px;
+            // width: 55px;
             height: 43px;
             font-size: 34px;
             margin-left: 10px;
-            margin-right: 40px;
+            margin-right: 20px;
             font-family: TRENDS;
             color: #9acafd;
             line-height: 22px;
diff --git a/vue.config.js b/vue.config.js
index a302d6f..646e6dd 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,7 +1,16 @@
 const { defineConfig } = require("@vue/cli-service");
-
 module.exports = defineConfig({
   transpileDependencies: true,
   lintOnSave: false,
-  publicPath: './',
+  // publicPath: './',
+  devServer: {
+    proxy: {
+      "/api": {
+        target: "http://111.229.30.246:32761/api",
+        pathRewrite: { "^/api": "" },
+        secure: false,
+        changeOrigin: true,
+      },
+    },
+  },
 });