diff --git a/.history/src/utils/pds_20231204174125.js b/.history/src/utils/pds_20231204174125.js
new file mode 100644
index 0000000..8fe1761
--- /dev/null
+++ b/.history/src/utils/pds_20231204174125.js
@@ -0,0 +1,497 @@
+export let pdsJs = [
+  {
+    name: "总降电力室",
+    list: [
+      "6.3KV#1破碎出线",
+      "6.3KV#1窑头出线",
+      "6.3KV#1原料#1出线",
+      "6.3KV#1原料#2出线",
+      "6.3KV#2窑头出线",
+      
+      "6.3KV#2原料#1出线",
+      "6.3KV#2原料#2出线",
+      "6.3KV#1发电机出线(安热线)",
+      "6.3KV#主变1进线",
+      "6.3KV#主变2进线",
+      "6.3KV#1水泥磨出线",
+      "6.3KV塑料厂出线",
+      "6.3KV骨料出线",
+      "6.3KV#3石灰石出线",
+      "6.3KV#3原料出线",
+      "6.3KV#3窑尾出线",
+      "6.3KV#3窑头出线",
+      "6.3KV#2水泥磨出线",
+      "6.3KV#2发电机出线"
+    ],
+  },
+  {
+    name: "矿山电力室",
+    list: [
+      "1#石灰石破碎机",
+      "2#石灰石破碎机",
+      "矿山进线柜",
+      "矿山变压器",
+      "矿山皮带机",
+    ],
+  },
+  {
+    name: "原材料电力室",
+    list: [
+      "28F1板喂机",
+      "水井总电源",
+      "2802皮带机",
+      "2305皮带机",
+      "2306皮带机",
+
+      "仓库电源",
+      "1#圆锥取料机",
+      "2#圆锥取料机",
+      "28F2板喂机",
+      "2803皮带机",
+      "2801皮带机",
+      "2302堆料机",
+      "2403皮带机",
+      "2402皮带机",
+      "2401皮带机",
+      "3504可逆皮带机",
+      "3502皮带机",
+      "3501皮带机",
+      "2304取料机",
+      "2303取料机",
+    ],
+  },
+  {
+    name: "一线生料磨电力室",
+    list: [
+      "1#进线",
+      "2#进线",
+      "原材料变压器",
+      "1#后排风机",
+      "1#变压器",
+
+      "2#变压器",
+      "生料磨主电机",
+      "1#生料磨高温风机",
+      "窑尾变压器",
+      "窑中整流变压器",
+      "1#循环风机",
+      "西院变压器",
+      "取暖泵1#2#3#",
+      "取暖泵4#",
+      "取暖泵5#",
+      "食堂公寓",
+      "1#空压机",
+      "2#空压机",
+      "3#空压机",
+      "选粉机",
+      "入库提升机",
+    ],
+  },
+  {
+    name: "二线生料磨电力室",
+    list: [
+      "1#进线",
+      "1#变压器",
+      "2#变压器",
+      "生料磨主电机",
+      "2#生料磨高温风机",
+
+      "窑尾变压器",
+      "窑中整流变压器",
+      "2#后排风机",
+      "2#循环风机",
+      "2#进线",
+      "6#水井",
+      "选粉机",
+      "4#空压机",
+      "入库提升机",
+    ],
+  },
+  {
+    name: "窑尾电力室",
+    list: ["南入窑提升机", "北入窑提升机", "入窑提升机1", "入窑提升机2"],
+  },
+  {
+    name: "一线窑头电力室1",
+    list: [
+      "辊式破碎机",
+      "煤磨控制柜电源",
+      "F7风机",
+      "F8风机",
+      "F9风机",
+
+      "FR风机",
+      "F4风机",
+      "F5风机",
+      "5703空浮风机",
+      "7517风机",
+      "7516风机",
+      "1#液压电源",
+      "2#液压电源",
+      "F3风机",
+      "F2风机",
+      "F1风机",
+      "FB风机",
+      "FA风机",
+      "7518风机",
+      "F6风机",
+      "斜斗",
+    ],
+  },
+  {
+    name: "一线窑头电力室2",
+    list: [
+      "1#窑头进线",
+      "1#煤磨主电机",
+      "1#煤磨通风机",
+      "1#变压器",
+      "2#变压器",
+
+      "1#过剩风机",
+      "熟料外放1",
+      "7602堆料机、7603取料机",
+      "老中控楼、化验室",
+      "循环水泵房",
+      "1#煤磨辅机设备",
+      "熟料外放2",
+    ],
+  },
+  {
+    name: "二线窑头电力室1",
+    list: [
+      "FR风机",
+      "F1风机",
+      "F2风机",
+      "F3风机",
+      "F4风机",
+      "F5风机",
+
+      "F6风机",
+      "F7风机",
+      "F8风机",
+      "FA风机",
+      "原煤板喂机",
+      "6635风机",
+      "FB风机",
+      "5703空浮风机",
+      "7516风机",
+      "液压站一段油泵",
+      "液压站二段油泵",
+      "辊破电源",
+      "熟料链斗输送机",
+      "5703备用风机",
+      "7517风机",
+      "老中控楼电源",
+      "空调",
+    ],
+  },
+  {
+    name: "二线窑头电力室2",
+    list: [
+      "2#窑头进线",
+      "2#煤磨主电机",
+      "2#煤磨通风机",
+      "1#变压器",
+      "2#变压器",
+
+      "2#过剩风机",
+      "2#煤磨辅机",
+      "2#熟料外放",
+    ],
+  },
+  {
+    name: "一线原煤电力室",
+    list: [
+      "7102皮带机",
+      "7103皮带机",
+      "7601皮带机",
+      "原煤输送皮带",
+      "7605皮带机",
+
+      "7610皮带机",
+      "7604皮带机",
+    ],
+  },
+  {
+    name: "水泥磨电力室",
+    list: [
+      "万吨仓电源",
+      "水泥磨收尘风机",
+      "1#包装除尘器",
+      "1#包装机电源",
+      "2#包装除尘器",
+
+      "总进线柜",
+      "变压器",
+      "水泥磨主电机",
+      "水泥磨辊压机",
+      "水泥库底1#斜槽风机",
+      "2#3#4#库侧卸料罗茨风机",
+      "1#库侧罗茨风机",
+      "水泥库底2#斜槽风机",
+      "2#库侧罗茨风机",
+      "3#库侧罗茨风机",
+      "1#2#3#4#库侧水泥散装机",
+      "1#包装斗式提升机",
+      "4#库侧罗茨风机",
+      "1#库侧卸料罗茨风机",
+      "4#空压机",
+      "1#包装收尘风机电院",
+      "1#回灰斜槽风机",
+      "2#包装收尘变频电源",
+      "2#包装提升机",
+      "2#包装机",
+      "粉煤灰空压机",
+      "料饼提升机",
+      "选粉机",
+      "循环风机",
+    ],
+  },
+  {
+    name: "万吨仓电力室",
+    list: ["污水处理"],
+  },
+  {
+    name: "余热发电电力室",
+    list: [
+      "1#循环水泵",
+      "2#循环水泵",
+      "3#循环水泵",
+      "4#循环水泵",
+      "润滑高压油泵",
+    ],
+  },
+  // 有问题，暂时没有写三号线熟料配电室
+  {
+    name: "三号线熟料配电室",
+    list: [
+      "电源进线",
+      "备用抽屉柜",
+      "与窑头电力室联络电源",
+      "侧式悬臂堆料机电源",
+      "521FN05VF01离心通风机变频柜",
+      
+      "照明电源",
+      "侧式悬臂堆料机备用柜",
+      "1#桥式取料机电源",
+      "2#桥式取料机电源",
+      "251BC03MT01带式输送机软起柜",
+      "741BC01MT01带式输送机软起柜",
+      "521FN06VF01离心通风机变频柜",
+      "521FN04VF01离心通风机变频柜",
+      "521FN03VF01离心通风机变频柜",
+      "521FN02VF01离心通风机变频柜",
+      "521BC06SS01带式输送机软起柜",
+      "进线电源",
+    ],
+  },
+  // 有问题，暂时没有写三号线窑头配电室
+  {
+    name: "三号线窑头配电室",
+    list: [
+      "FA冷却风机",
+      "FB冷却风机",
+      "F2冷却风机",
+      "F4冷却风机",
+      "FRB1冷却风机变频柜",
+
+      "电源进线",
+      "应急电源",
+      "备用抽屉柜",
+      "与窑尾电力室联络电源",
+      "与2#变压器联络电源",
+      "备用抽屉柜",
+      "3#空气悬浮离心风机",
+      "1#空气悬浮离心风机",
+      "2#空气悬浮离心风机",
+      "1#液压油泵软起柜",
+      "2#液压油泵软起柜",
+      "3#液压油泵软起柜",
+      "4#液压油泵软起柜",
+      "电源进线",
+      "与1#变压器联络电源",
+      "发电备用抽屉柜",
+      "照明电源",
+      "备用抽屉柜",
+      "备用抽屉柜",
+      "与3#变压器联络电源",
+      "熟料输送机软起柜",
+      "FC冷却风机",
+      "FR冷却风机",
+      "F1冷却风机",
+      "F3冷却风机变频柜",
+      "F5冷却风机变频柜",
+      "电源进线",
+      "2#空压机电源",
+      "1#空压机电源",
+      "与2#变压器联络电源",
+      "3#空压机电源",
+      "4#空压机电源",
+      "与熟料库电气室联络电源",
+      "3#可逆螺旋输送机",
+      "无741JX编号",
+      "备用抽屉柜",
+      "1#空气悬浮离心鼓风机",
+      "3#空气悬浮离心鼓风机",
+      "2#空气悬浮离心鼓风机",
+      "备用抽屉柜",
+      "5#液压油泵软起柜",
+      "6#液压油泵软起柜",
+      "F8冷却风机",
+      "离心通风机变频柜",
+      "F9冷却风机变频柜",
+      "F7冷却风机变频柜",
+      "F6冷却风机变频柜",
+      "备用高压柜",
+      "熟料库变压器",
+      "窑头变压器3",
+      "窑头变压器2",
+      "窑头变压器1",
+      "窑头排风机",
+      "煤磨风机",
+      "煤磨主电机",
+      "电源进线",
+    ],
+  },
+  // 三号线窑尾配电室
+  {
+    name: "三号线窑尾配电室",
+    list: [
+      "电源进线",
+      "备用抽屉柜",
+      "1#磁悬浮鼓风机控制柜",
+      "废气处理电源",
+      "3#磁悬浮鼓风机控制柜",
+
+      "照明电源",
+      "4#磁悬浮鼓风机控制柜",
+      "与原料磨电气室联络电源",
+      "与窑头电气室联络",
+      "罗茨鼓风机变频柜",
+      "窑辅助传动及制动器软起柜",
+      "斗式提升机软起柜",
+    ],
+  },
+  // 三号线生料配电室
+  {
+    name: "三号线生料配电室",
+    list: [
+      "电源进线",
+      "窑尾变压器",
+      "窑中主传动柜",
+      "窑尾排风机变频柜",
+      "窑尾高温风机变频柜",
+
+      "辊压机固定辊主电机",
+      "辊压机活动辊主电机",
+      "循环风机变频柜",
+      "原料磨电气室变压器",
+      "辅料处理电气室变压器",
+      "原料配料站电气室变压器",
+      "电机备用",
+      "反击式破碎机主电机",
+      "电源进线",
+      "垃圾处理变压器1",
+      "垃圾处理变压器2",
+      "变压器备用",
+      "电源进线",
+      "照明电源",
+      "与原料配料电气室联络电源",
+      "与窑尾电气室联络电源",
+      "备用抽屉柜",
+      "1#链板式提升机软启动柜1",
+      "1#链板式提升机软启动柜2",
+      "361BE02SS012#链板式提升机软启动柜1",
+      "361BE02SS022#链板式提升机软启动柜2",
+      "391BE01SS01胶带斗式提升机软启动",
+      "361SR02VF01选粉机变频器",
+      "341BC01VF01带式输送机变频柜",
+      "391FN01VF01离心通风机变频柜",
+    ],
+  },
+  // 辅料处理配电室
+  {
+    name: "辅料处理配电室",
+    list: [
+      "电源进线",
+      "251CA01AP01辅料智能抓斗电源",
+      "721CA01AP01原煤智能抓斗电源",
+      "与原料配料电气室联络电源",
+      "331ST01LP01SP侧式悬臂堆料机备用柜",
+
+      "照明电源",
+      "331ST01LP01侧式悬臂堆料机电源",
+      "备用抽屉柜",
+      "251BC01MT01带式输送机软起柜",
+      "251FN02MT01离心风机变频柜",
+      "进线电源",
+      "备用抽屉柜",
+    ],
+  },
+  {
+    name: "原料配料配电室",
+    list: [
+      "电源进线",
+      "照明电源",
+      "与原料磨电气室联络电源",
+      "1#定量给料机电源",
+      "备用抽屉柜",
+
+      "331RE01LP011#侧式刮板取料机电源",
+      "331RE02LP012#侧式刮板取料机电源",
+      "331RE02LP01SP2#侧式刮板取料机备用",
+      "321SE01LP01圆形堆场堆取料机电源",
+      "1#定量给料机备用电源",
+      "2#定量给料机电源",
+      "2#定量给料机备用电源",
+      "4#定量给料机电源",
+      "4#定量给料机备用电源",
+      "与辅材处理电气室联络电源",
+      "2A1BC05MT01带式输送机软起柜",
+      "331BC04MT01带式输送机软起柜",
+      "331BC03MT01带式输送机软起柜",
+      "331BC02MT01带式输送机软起柜",
+      "321BC02MT01带式输送机软起柜",
+      "321BC01MT01带式输送机软起柜",
+      "综合材料库电源",
+      "循环水电源",
+      "备用抽屉柜",
+      "721BC02MT01带式输送机电源",
+    ],
+  },
+  {
+    name: "石灰石破碎配电室",
+    list: [
+      "电源进线",
+      "照明电源",
+      "备用抽屉柜",
+      "1#重型板式喂料机变频柜",
+      "2#重型板式喂料机变频柜",
+
+      "211FN01VF01离心通风机变频柜",
+      "211FN02VF01离心通风机变频柜",
+      "211BC01SS01带式输送机软起柜",
+      "211BC02SS01带式输送机软起柜",
+      "电源进线柜",
+      "3#破碎机1#主电机",
+      "3#破碎机2#主电机",
+      "2#破碎机1#主电机",
+      "2#破碎机2#主电机",
+      "矿山电力室变压器",
+      "电机备用",
+    ],
+  },
+  {
+    name: "石灰石输送控制室1、2",
+    list: [
+      "2A1BC02MT01带式输送机软起柜",
+      "2A1BC01MT01带式输送机软起柜",
+      "电源进线",
+      "2A1BC06MT01带式输送机软起柜",
+      "2A1BC04MT01带式输送机软起柜",
+
+      "2A1BC03MT01带式输送机软起柜",
+      "电源进线",
+    ],
+  },
+];
diff --git a/.history/src/utils/pds_20231204174600.js b/.history/src/utils/pds_20231204174600.js
new file mode 100644
index 0000000..8fe1761
--- /dev/null
+++ b/.history/src/utils/pds_20231204174600.js
@@ -0,0 +1,497 @@
+export let pdsJs = [
+  {
+    name: "总降电力室",
+    list: [
+      "6.3KV#1破碎出线",
+      "6.3KV#1窑头出线",
+      "6.3KV#1原料#1出线",
+      "6.3KV#1原料#2出线",
+      "6.3KV#2窑头出线",
+      
+      "6.3KV#2原料#1出线",
+      "6.3KV#2原料#2出线",
+      "6.3KV#1发电机出线(安热线)",
+      "6.3KV#主变1进线",
+      "6.3KV#主变2进线",
+      "6.3KV#1水泥磨出线",
+      "6.3KV塑料厂出线",
+      "6.3KV骨料出线",
+      "6.3KV#3石灰石出线",
+      "6.3KV#3原料出线",
+      "6.3KV#3窑尾出线",
+      "6.3KV#3窑头出线",
+      "6.3KV#2水泥磨出线",
+      "6.3KV#2发电机出线"
+    ],
+  },
+  {
+    name: "矿山电力室",
+    list: [
+      "1#石灰石破碎机",
+      "2#石灰石破碎机",
+      "矿山进线柜",
+      "矿山变压器",
+      "矿山皮带机",
+    ],
+  },
+  {
+    name: "原材料电力室",
+    list: [
+      "28F1板喂机",
+      "水井总电源",
+      "2802皮带机",
+      "2305皮带机",
+      "2306皮带机",
+
+      "仓库电源",
+      "1#圆锥取料机",
+      "2#圆锥取料机",
+      "28F2板喂机",
+      "2803皮带机",
+      "2801皮带机",
+      "2302堆料机",
+      "2403皮带机",
+      "2402皮带机",
+      "2401皮带机",
+      "3504可逆皮带机",
+      "3502皮带机",
+      "3501皮带机",
+      "2304取料机",
+      "2303取料机",
+    ],
+  },
+  {
+    name: "一线生料磨电力室",
+    list: [
+      "1#进线",
+      "2#进线",
+      "原材料变压器",
+      "1#后排风机",
+      "1#变压器",
+
+      "2#变压器",
+      "生料磨主电机",
+      "1#生料磨高温风机",
+      "窑尾变压器",
+      "窑中整流变压器",
+      "1#循环风机",
+      "西院变压器",
+      "取暖泵1#2#3#",
+      "取暖泵4#",
+      "取暖泵5#",
+      "食堂公寓",
+      "1#空压机",
+      "2#空压机",
+      "3#空压机",
+      "选粉机",
+      "入库提升机",
+    ],
+  },
+  {
+    name: "二线生料磨电力室",
+    list: [
+      "1#进线",
+      "1#变压器",
+      "2#变压器",
+      "生料磨主电机",
+      "2#生料磨高温风机",
+
+      "窑尾变压器",
+      "窑中整流变压器",
+      "2#后排风机",
+      "2#循环风机",
+      "2#进线",
+      "6#水井",
+      "选粉机",
+      "4#空压机",
+      "入库提升机",
+    ],
+  },
+  {
+    name: "窑尾电力室",
+    list: ["南入窑提升机", "北入窑提升机", "入窑提升机1", "入窑提升机2"],
+  },
+  {
+    name: "一线窑头电力室1",
+    list: [
+      "辊式破碎机",
+      "煤磨控制柜电源",
+      "F7风机",
+      "F8风机",
+      "F9风机",
+
+      "FR风机",
+      "F4风机",
+      "F5风机",
+      "5703空浮风机",
+      "7517风机",
+      "7516风机",
+      "1#液压电源",
+      "2#液压电源",
+      "F3风机",
+      "F2风机",
+      "F1风机",
+      "FB风机",
+      "FA风机",
+      "7518风机",
+      "F6风机",
+      "斜斗",
+    ],
+  },
+  {
+    name: "一线窑头电力室2",
+    list: [
+      "1#窑头进线",
+      "1#煤磨主电机",
+      "1#煤磨通风机",
+      "1#变压器",
+      "2#变压器",
+
+      "1#过剩风机",
+      "熟料外放1",
+      "7602堆料机、7603取料机",
+      "老中控楼、化验室",
+      "循环水泵房",
+      "1#煤磨辅机设备",
+      "熟料外放2",
+    ],
+  },
+  {
+    name: "二线窑头电力室1",
+    list: [
+      "FR风机",
+      "F1风机",
+      "F2风机",
+      "F3风机",
+      "F4风机",
+      "F5风机",
+
+      "F6风机",
+      "F7风机",
+      "F8风机",
+      "FA风机",
+      "原煤板喂机",
+      "6635风机",
+      "FB风机",
+      "5703空浮风机",
+      "7516风机",
+      "液压站一段油泵",
+      "液压站二段油泵",
+      "辊破电源",
+      "熟料链斗输送机",
+      "5703备用风机",
+      "7517风机",
+      "老中控楼电源",
+      "空调",
+    ],
+  },
+  {
+    name: "二线窑头电力室2",
+    list: [
+      "2#窑头进线",
+      "2#煤磨主电机",
+      "2#煤磨通风机",
+      "1#变压器",
+      "2#变压器",
+
+      "2#过剩风机",
+      "2#煤磨辅机",
+      "2#熟料外放",
+    ],
+  },
+  {
+    name: "一线原煤电力室",
+    list: [
+      "7102皮带机",
+      "7103皮带机",
+      "7601皮带机",
+      "原煤输送皮带",
+      "7605皮带机",
+
+      "7610皮带机",
+      "7604皮带机",
+    ],
+  },
+  {
+    name: "水泥磨电力室",
+    list: [
+      "万吨仓电源",
+      "水泥磨收尘风机",
+      "1#包装除尘器",
+      "1#包装机电源",
+      "2#包装除尘器",
+
+      "总进线柜",
+      "变压器",
+      "水泥磨主电机",
+      "水泥磨辊压机",
+      "水泥库底1#斜槽风机",
+      "2#3#4#库侧卸料罗茨风机",
+      "1#库侧罗茨风机",
+      "水泥库底2#斜槽风机",
+      "2#库侧罗茨风机",
+      "3#库侧罗茨风机",
+      "1#2#3#4#库侧水泥散装机",
+      "1#包装斗式提升机",
+      "4#库侧罗茨风机",
+      "1#库侧卸料罗茨风机",
+      "4#空压机",
+      "1#包装收尘风机电院",
+      "1#回灰斜槽风机",
+      "2#包装收尘变频电源",
+      "2#包装提升机",
+      "2#包装机",
+      "粉煤灰空压机",
+      "料饼提升机",
+      "选粉机",
+      "循环风机",
+    ],
+  },
+  {
+    name: "万吨仓电力室",
+    list: ["污水处理"],
+  },
+  {
+    name: "余热发电电力室",
+    list: [
+      "1#循环水泵",
+      "2#循环水泵",
+      "3#循环水泵",
+      "4#循环水泵",
+      "润滑高压油泵",
+    ],
+  },
+  // 有问题，暂时没有写三号线熟料配电室
+  {
+    name: "三号线熟料配电室",
+    list: [
+      "电源进线",
+      "备用抽屉柜",
+      "与窑头电力室联络电源",
+      "侧式悬臂堆料机电源",
+      "521FN05VF01离心通风机变频柜",
+      
+      "照明电源",
+      "侧式悬臂堆料机备用柜",
+      "1#桥式取料机电源",
+      "2#桥式取料机电源",
+      "251BC03MT01带式输送机软起柜",
+      "741BC01MT01带式输送机软起柜",
+      "521FN06VF01离心通风机变频柜",
+      "521FN04VF01离心通风机变频柜",
+      "521FN03VF01离心通风机变频柜",
+      "521FN02VF01离心通风机变频柜",
+      "521BC06SS01带式输送机软起柜",
+      "进线电源",
+    ],
+  },
+  // 有问题，暂时没有写三号线窑头配电室
+  {
+    name: "三号线窑头配电室",
+    list: [
+      "FA冷却风机",
+      "FB冷却风机",
+      "F2冷却风机",
+      "F4冷却风机",
+      "FRB1冷却风机变频柜",
+
+      "电源进线",
+      "应急电源",
+      "备用抽屉柜",
+      "与窑尾电力室联络电源",
+      "与2#变压器联络电源",
+      "备用抽屉柜",
+      "3#空气悬浮离心风机",
+      "1#空气悬浮离心风机",
+      "2#空气悬浮离心风机",
+      "1#液压油泵软起柜",
+      "2#液压油泵软起柜",
+      "3#液压油泵软起柜",
+      "4#液压油泵软起柜",
+      "电源进线",
+      "与1#变压器联络电源",
+      "发电备用抽屉柜",
+      "照明电源",
+      "备用抽屉柜",
+      "备用抽屉柜",
+      "与3#变压器联络电源",
+      "熟料输送机软起柜",
+      "FC冷却风机",
+      "FR冷却风机",
+      "F1冷却风机",
+      "F3冷却风机变频柜",
+      "F5冷却风机变频柜",
+      "电源进线",
+      "2#空压机电源",
+      "1#空压机电源",
+      "与2#变压器联络电源",
+      "3#空压机电源",
+      "4#空压机电源",
+      "与熟料库电气室联络电源",
+      "3#可逆螺旋输送机",
+      "无741JX编号",
+      "备用抽屉柜",
+      "1#空气悬浮离心鼓风机",
+      "3#空气悬浮离心鼓风机",
+      "2#空气悬浮离心鼓风机",
+      "备用抽屉柜",
+      "5#液压油泵软起柜",
+      "6#液压油泵软起柜",
+      "F8冷却风机",
+      "离心通风机变频柜",
+      "F9冷却风机变频柜",
+      "F7冷却风机变频柜",
+      "F6冷却风机变频柜",
+      "备用高压柜",
+      "熟料库变压器",
+      "窑头变压器3",
+      "窑头变压器2",
+      "窑头变压器1",
+      "窑头排风机",
+      "煤磨风机",
+      "煤磨主电机",
+      "电源进线",
+    ],
+  },
+  // 三号线窑尾配电室
+  {
+    name: "三号线窑尾配电室",
+    list: [
+      "电源进线",
+      "备用抽屉柜",
+      "1#磁悬浮鼓风机控制柜",
+      "废气处理电源",
+      "3#磁悬浮鼓风机控制柜",
+
+      "照明电源",
+      "4#磁悬浮鼓风机控制柜",
+      "与原料磨电气室联络电源",
+      "与窑头电气室联络",
+      "罗茨鼓风机变频柜",
+      "窑辅助传动及制动器软起柜",
+      "斗式提升机软起柜",
+    ],
+  },
+  // 三号线生料配电室
+  {
+    name: "三号线生料配电室",
+    list: [
+      "电源进线",
+      "窑尾变压器",
+      "窑中主传动柜",
+      "窑尾排风机变频柜",
+      "窑尾高温风机变频柜",
+
+      "辊压机固定辊主电机",
+      "辊压机活动辊主电机",
+      "循环风机变频柜",
+      "原料磨电气室变压器",
+      "辅料处理电气室变压器",
+      "原料配料站电气室变压器",
+      "电机备用",
+      "反击式破碎机主电机",
+      "电源进线",
+      "垃圾处理变压器1",
+      "垃圾处理变压器2",
+      "变压器备用",
+      "电源进线",
+      "照明电源",
+      "与原料配料电气室联络电源",
+      "与窑尾电气室联络电源",
+      "备用抽屉柜",
+      "1#链板式提升机软启动柜1",
+      "1#链板式提升机软启动柜2",
+      "361BE02SS012#链板式提升机软启动柜1",
+      "361BE02SS022#链板式提升机软启动柜2",
+      "391BE01SS01胶带斗式提升机软启动",
+      "361SR02VF01选粉机变频器",
+      "341BC01VF01带式输送机变频柜",
+      "391FN01VF01离心通风机变频柜",
+    ],
+  },
+  // 辅料处理配电室
+  {
+    name: "辅料处理配电室",
+    list: [
+      "电源进线",
+      "251CA01AP01辅料智能抓斗电源",
+      "721CA01AP01原煤智能抓斗电源",
+      "与原料配料电气室联络电源",
+      "331ST01LP01SP侧式悬臂堆料机备用柜",
+
+      "照明电源",
+      "331ST01LP01侧式悬臂堆料机电源",
+      "备用抽屉柜",
+      "251BC01MT01带式输送机软起柜",
+      "251FN02MT01离心风机变频柜",
+      "进线电源",
+      "备用抽屉柜",
+    ],
+  },
+  {
+    name: "原料配料配电室",
+    list: [
+      "电源进线",
+      "照明电源",
+      "与原料磨电气室联络电源",
+      "1#定量给料机电源",
+      "备用抽屉柜",
+
+      "331RE01LP011#侧式刮板取料机电源",
+      "331RE02LP012#侧式刮板取料机电源",
+      "331RE02LP01SP2#侧式刮板取料机备用",
+      "321SE01LP01圆形堆场堆取料机电源",
+      "1#定量给料机备用电源",
+      "2#定量给料机电源",
+      "2#定量给料机备用电源",
+      "4#定量给料机电源",
+      "4#定量给料机备用电源",
+      "与辅材处理电气室联络电源",
+      "2A1BC05MT01带式输送机软起柜",
+      "331BC04MT01带式输送机软起柜",
+      "331BC03MT01带式输送机软起柜",
+      "331BC02MT01带式输送机软起柜",
+      "321BC02MT01带式输送机软起柜",
+      "321BC01MT01带式输送机软起柜",
+      "综合材料库电源",
+      "循环水电源",
+      "备用抽屉柜",
+      "721BC02MT01带式输送机电源",
+    ],
+  },
+  {
+    name: "石灰石破碎配电室",
+    list: [
+      "电源进线",
+      "照明电源",
+      "备用抽屉柜",
+      "1#重型板式喂料机变频柜",
+      "2#重型板式喂料机变频柜",
+
+      "211FN01VF01离心通风机变频柜",
+      "211FN02VF01离心通风机变频柜",
+      "211BC01SS01带式输送机软起柜",
+      "211BC02SS01带式输送机软起柜",
+      "电源进线柜",
+      "3#破碎机1#主电机",
+      "3#破碎机2#主电机",
+      "2#破碎机1#主电机",
+      "2#破碎机2#主电机",
+      "矿山电力室变压器",
+      "电机备用",
+    ],
+  },
+  {
+    name: "石灰石输送控制室1、2",
+    list: [
+      "2A1BC02MT01带式输送机软起柜",
+      "2A1BC01MT01带式输送机软起柜",
+      "电源进线",
+      "2A1BC06MT01带式输送机软起柜",
+      "2A1BC04MT01带式输送机软起柜",
+
+      "2A1BC03MT01带式输送机软起柜",
+      "电源进线",
+    ],
+  },
+];
diff --git a/.history/src/views/lll/NYJCD/SCX1_20231205100141.vue b/.history/src/views/lll/NYJCD/SCX1_20231205100141.vue
new file mode 100644
index 0000000..eba19e2
--- /dev/null
+++ b/.history/src/views/lll/NYJCD/SCX1_20231205100141.vue
@@ -0,0 +1,2209 @@
+<template>
+  <div class="box">
+    <div class="left">
+      <img class="title" :src="src" />
+      <div class="pdsssdh">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线实时负荷</p> -->
+
+          <p>{{ $route.query.type }}实时电荷</p>
+        </div>
+        <div class="data">
+          <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+            >年</span
+          >
+          <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+            >月</span
+          >
+          <span :class="res == '日' ? 'active' : ''" @click="res = '日'"
+            >日</span
+          >
+        </div>
+        <div id="pdsssdh"></div>
+      </div>
+      <div class="pdsydl">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电量</p> -->
+          <p>{{ $route.query.type }}用电量</p>
+        </div>
+        <div class="data">
+          <span
+            :class="type == '总用电' ? 'active' : ''"
+            @click="type = '总用电'"
+            >总用电</span
+          >
+          <span
+            :class="type == '分时段' ? 'active' : ''"
+            @click="type = '分时段'"
+            >分时段</span
+          >
+        </div>
+        <div id="pdsydl"></div>
+      </div>
+      <div class="pdstpt">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电量对比</p> -->
+          <p>{{ $route.query.type }}用电量对比</p>
+        </div>
+        <div id="pdstpt">
+          <div class="data">
+            <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+              >年</span
+            >
+            <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+              >月</span
+            >
+            <span :class="res1 == '日' ? 'active' : ''" @click="res1 = '日'"
+              >日</span
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线监控</p> -->
+          <p>{{ $route.query.type }}监控</p>
+        </div>
+        <div class="chartBox">
+          <div id="pdsjk">
+            <div class="title">
+              <p>设备数量：</p>
+              <span>5</span>
+              <p>个</p>
+            </div>
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column label="序号" align="center">
+                <template slot-scope="scope">
+                  {{ scope.$index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="date1"
+                label="生产工艺名称"
+                align="center"
+                width="300px"
+              >
+              </el-table-column>
+              <el-table-column prop="date2" label="实时电荷" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58ff70"> {{ scope.row.date2 }}</span
+                  ><span>kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="今日用电量" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58caff"> {{ scope.row.date3 }}</span
+                  ><span>kWh</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date2" label="设备状态" align="center"
+                ><template slot-scope="scope">
+                  <span v-if="scope.row.date4"
+                    ><img src="../../../assets/KDFH/tongguo.png"
+                  /></span>
+                  <span v-else
+                    ><img src="../../../assets/KDFH/jinggao.png"
+                  /></span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线监控</p> -->
+          <p>负荷占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="fhzb"></div>
+          <!-- 饼图下面的底座 -->
+          <div class="buttomCharts"></div>
+        </div>
+      </div>
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电排名</p> -->
+          <p>{{ $route.query.type }}用电排名</p>
+        </div>
+        <div class="chartBox">
+          <div id="pdsjk">
+            <el-table
+              :data="tableData1"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              :header-cell-style="getHeaderCellStyle"
+            >
+              <el-table-column label="序号" align="center">
+                <template slot-scope="scope">
+                  {{ scope.$index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="date1"
+                label="配电室名称"
+                align="center"
+                width="300px"
+              >
+              </el-table-column>
+              <el-table-column prop="date2" label="用电量" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58caff"> {{ scope.row.date2 }}</span
+                  ><span>kWh</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import highcharts from "highcharts";
+export default {
+  data() {
+    return {
+      res: "月",
+      res1: "月",
+      type: "总用电",
+      src: "",
+      option1: {
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:KW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 500,
+          interval: 100, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [200, 300, 500, 400, 334],
+            itemStyle: {
+              normal: {
+                color: "#00FF00",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21FF55", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      },
+      //   option2: {
+      //     legend: {
+      //       data: [
+      //         { icon: "rect", name: "昨日" },
+      //         { icon: "rect", name: "今日" },
+      //       ],
+      //       textStyle: {
+      //         color: "#fff",
+      //         fontSize: "20px",
+      //       },
+      //     },
+      //     xAxis: {
+      //       type: "category",
+      //       data: ["1月", "2月", "3月", "4月", "5月"],
+      //       axisLabel: {
+      //         show: true,
+      //         textStyle: {
+      //           color: "#fff",
+      //           fontSize: 20,
+      //         },
+      //         interval: 0, //代表显示所有x轴标签显示
+      //       },
+      //     },
+      //     yAxis: {
+      //       type: "value",
+      //       name: "单位:kWh",
+      //       nameTextStyle: {
+      //         color: "#fff",
+      //         fontSize: 20,
+      //         padding: 10,
+      //       },
+      //       min: 0,
+      //       max: 500,
+      //       interval: 100, // 指定刻度间隔
+      //       axisLabel: {
+      //         show: true,
+      //         textStyle: {
+      //           color: "#fff",
+      //           fontSize: 20,
+      //         },
+      //       },
+      //     },
+      //     grid: {
+      //       // 让图表占满容器
+      //       //   top: "5%",
+      //       left: "8%",
+      //       right: "5%",
+      //       bottom: "8%",
+      //     },
+      //     series: [
+      //       {
+      //         type: "bar",
+      //         name: "昨日",
+      //         data: [200, 300, 500, 400, 334],
+      //         itemStyle: {
+      //           normal: {
+      //             color: "#11C3FF",
+      //             lineStyle: {
+      //               width: 5, //折线宽度
+      //               color: "#11C3FF", //折线颜色
+      //             },
+      //           },
+      //         },
+      //       },
+      //       {
+      //         type: "bar",
+      //         name: "今日",
+      //         data: [200, 300, 500, 400, 334],
+      //         itemStyle: {
+      //           normal: {
+      //             color: "#09E83E",
+      //             lineStyle: {
+      //               width: 5, //折线宽度
+      //               color: "#09E83E", //折线颜色
+      //             },
+      //           },
+      //         },
+      //       },
+      //     ],
+      //   },
+      option3: {
+        legend: {
+          data: [
+            { icon: "rect", name: "昨日" },
+            { icon: "rect", name: "今日" },
+          ],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          boundaryGap: [0, 0.01],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: ["生料磨", "生料收尘", "篦冷机", "熟料收尘", "回转窑"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        series: [
+          {
+            name: "昨日",
+            type: "bar",
+            data: [45, 55, 17, 60, 12],
+            itemStyle: {
+              color: "#3AF0FF", //折线颜色
+            },
+          },
+          {
+            name: "今日",
+            type: "bar",
+            data: [65, 65, 36, 19, 30],
+            itemStyle: {
+              color: "#5BFAB1", //折线颜色
+            },
+          },
+        ],
+      },
+      tableData: [
+        {
+          date1: "回转窑",
+          date2: "20.34",
+          date3: "20.34",
+          date4: true,
+        },
+        {
+          date1: "熟料收尘",
+          date2: "17.42",
+          date3: "17.42",
+          date4: true,
+        },
+        {
+          date1: "篦冷机",
+          date2: "12.22",
+          date3: "12.22",
+          date4: true,
+        },
+        {
+          date1: "生料收尘",
+          date2: "19.19",
+          date3: "19.19",
+          date4: false,
+        },
+      ],
+      tableData1: [
+        {
+          date1: "总降电力室",
+          date2: "20.34",
+        },
+        {
+          date1: "矿山电力室",
+          date2: "17.42",
+        },
+        {
+          date1: "原材料电力室",
+          date2: "12.22",
+        },
+        {
+          date1: "一线生料磨电力室",
+          date2: "19.19",
+        },
+        {
+          date1: "二线生料磨电力室",
+          date2: "17.42",
+        },
+        {
+          date1: "窑尾电力室",
+          date2: "12.22",
+        },
+      ],
+      optionData: [
+        {
+          name: "破碎系统",
+          value: 38,
+          itemStyle: {
+            color: "rgba(1, 224, 239,0.9)",
+          },
+        },
+        {
+          name: "生料系统", //名称
+          value: 41, //值
+          itemStyle: {
+            //颜色
+            color: "rgba(26, 166, 228,0.9)",
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 21,
+          itemStyle: {
+            color: "rgba(81, 244, 193,0.9)",
+          },
+        },
+      ],
+      option: {},
+    };
+  },
+  watch: {
+    // 监听,当路由发生变化的时候执行
+    $route: {
+      // $route可以用引号，也可以不用引号
+      handler(to, from) {
+        this.src = require(`../../../assets/img/标题/能源监测-电-${this.$route.query.type}.png`);
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    },
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    //配电室用电量  3d
+    pdsydl() {
+      let xaxisData = ["1月", "2月", "3月", "4月", "5月"];
+      let yaxisData = [90, 80, 100, 70, 65];
+      let yaxisData2 = [60, 56, 34, 69, 79];
+
+      //拿到最大值
+      const maxValue = Math.max(...yaxisData);
+      const maxValue2 = Math.max(...yaxisData2);
+
+      const offsetX = 15;
+      const offsetY = 5;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          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);
+
+      let option = {
+        legend: {
+          data: [
+            { icon: "rect", name: "昨日" },
+            { icon: "rect", name: "今日" },
+          ],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   backgroundColor: "rgba(255,255,255,0.75)",
+        //   extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
+        //   textStyle: {
+        //     fontSize: 20,
+        //     color: "#000",
+        //   },
+        //   formatter: (params, ticket, callback) => {
+        //     const item = params[1];
+        //     return item.name + " : " + item.value + " 个";
+        //   },
+        // },
+        grid: {
+          left: "1%",
+          right: "0%",
+          top: "16%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLine: {
+            show: true,
+            // lineStyle: {
+            //   width: 1,
+            // },
+          },
+          axisTick: {
+            show: true,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#FFFFFF",
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:kWh",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+          },
+          splitLine: {
+            show: true,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#FFFFFF",
+          },
+        },
+        series: [
+          {
+            type: "bar",
+            itemStyle: {
+              color: "transparent",
+            },
+            data: yaxisData,
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                formatter: (e) => {
+                  return e.value === maxValue ? e.value : "";
+                },
+                fontSize: 20,
+                color: "#02C262",
+                offset: [0, -15],
+              },
+            },
+          },
+          {
+            type: "bar",
+            itemStyle: {
+              color: "transparent",
+            },
+            data: yaxisData2,
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                formatter: (e) => {
+                  return e.value === maxValue2 ? e.value : "";
+                },
+                fontSize: 20,
+                color: "#3286FF",
+                offset: [0, -15],
+              },
+            },
+          },
+
+          {
+            type: "custom",
+            name: "今日",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              const xAxisPoint = api.coord([api.value(0), 0]);
+              const distance = 50;
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#10C6FF",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#377DFF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#4464FF",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0673D5",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#0B68D5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#115DD5",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: "#0964FF",
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "昨日",
+            barCategoryGap: "20%",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#08E83C",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#1FE77D",
+                        },
+                        {
+                          offset: 1,
+                          color: "#38E7C5",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C25D",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#05C269",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0BC27B",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: "#05E861",
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+
+      this.defineEcharts("pdsydl", option);
+    },
+    // //初始化构建
+    // init() {
+    //   //构建3d饼状图
+    //   let myChart = this.$echarts.init(document.getElementById("fhzb"));
+    //   // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
+    //   this.option = this.getPie3D(this.optionData, 0.8);
+    //   //将配置项设置进去
+    //   myChart.setOption(this.option);
+    //   //鼠标移动上去特效效果
+    //   this.bindListen(myChart);
+    // },
+    // //配置构建 pieData 饼图数据 internalDiameterRatio:透明的空心占比
+    // getPie3D(pieData, internalDiameterRatio) {
+    //   let that = this;
+    //   let series = [];
+    //   let sumValue = 0;
+    //   let startValue = 0;
+    //   let endValue = 0;
+    //   let legendData = [];
+    //   let legendBfb = [];
+    //   let k = 1 - internalDiameterRatio;
+    //   pieData.sort((a, b) => {
+    //     return b.value - a.value;
+    //   });
+    //   // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
+    //   for (let i = 0; i < pieData.length; i++) {
+    //     sumValue += pieData[i].value;
+    //     let seriesItem = {
+    //       //系统名称
+    //       name:
+    //         typeof pieData[i].name === "undefined"
+    //           ? `series${i}`
+    //           : pieData[i].name,
+    //       type: "surface",
+    //       //是否为参数曲面（是）
+    //       parametric: true,
+    //       //曲面图网格线（否）上面一根一根的
+    //       wireframe: {
+    //         show: false,
+    //       },
+    //       pieData: pieData[i],
+    //       pieStatus: {
+    //         selected: false,
+    //         hovered: false,
+    //         k: k,
+    //       },
+    //       //设置饼图在容器中的位置(目前没发现啥用)
+    //       center: ["80%", "100%"],
+    //       radius: "60%",
+    //     };
+    //     //曲面的颜色、不透明度等样式。
+    //     if (typeof pieData[i].itemStyle != "undefined") {
+    //       let itemStyle = {};
+    //       typeof pieData[i].itemStyle.color != "undefined"
+    //         ? (itemStyle.color = pieData[i].itemStyle.color)
+    //         : null;
+    //       typeof pieData[i].itemStyle.opacity != "undefined"
+    //         ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+    //         : null;
+    //       seriesItem.itemStyle = itemStyle;
+    //     }
+    //     series.push(seriesItem);
+    //   }
+    //   // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+    //   // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+    //   legendData = [];
+    //   legendBfb = [];
+    //   for (let i = 0; i < series.length; i++) {
+    //     endValue = startValue + series[i].pieData.value;
+    //     series[i].pieData.startRatio = startValue / sumValue;
+    //     series[i].pieData.endRatio = endValue / sumValue;
+    //     series[i].parametricEquation = that.getParametricEquation(
+    //       series[i].pieData.startRatio,
+    //       series[i].pieData.endRatio,
+    //       false,
+    //       false,
+    //       k,
+    //       series[i].pieData.value
+    //     );
+
+    //     startValue = endValue;
+    //     let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
+    //     legendData.push({
+    //       name: series[i].name,
+    //       value: bfb,
+    //     });
+    //     legendBfb.push({
+    //       name: series[i].name,
+    //       value: bfb,
+    //     });
+    //   }
+
+    //   //(第二个参数可以设置你这个环形的高低程度)
+    //   let boxHeight = this.getHeight3D(series, 15); //通过传参设定3d饼/环的高度
+    //   // 准备待返回的配置项，把准备好的 legendData、series 传入。
+    //   let option = {
+    //     //移动上去提示的文本内容(我没来得及改 你们可以根据需求改)
+    //     tooltip: {
+    //       formatter: (params) => {
+    //         if (
+    //           params.seriesName !== "mouseoutSeries" &&
+    //           params.seriesName !== "pie2d"
+    //         ) {
+    //           let bfb = (
+    //             (this.option.series[params.seriesIndex].pieData.endRatio -
+    //               this.option.series[params.seriesIndex].pieData.startRatio) *
+    //             100
+    //           ).toFixed(2);
+    //           return (
+    //             `${params.seriesName}<br/>` +
+    //             `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>` +
+    //             `${bfb}%`
+    //           );
+    //         }
+    //       },
+    //     },
+    //     label: {
+    //       // normal: {
+    //       //   show: true,
+    //       //   position: "right",
+    //       //   formatter: "{b} \n{c} {d}%",
+    //       // },
+
+    //       normal: {
+    //         show: true,
+    //         color: "#fff",
+    //         position: "right",
+    //         // distance:-10,
+    //         offset: [0, 3],
+    //         formatter: [
+    //           "{d|{d}%}",
+    //           "————",
+    //           //   '{c|{c}}{b|台}',
+    //           "{b|{b}}",
+    //         ].join("\n"), // 用\n来换行
+    //         rich: {
+    //           b: {
+    //             lineHeight: 25,
+    //             align: "left",
+    //             color: "#fff",
+    //           },
+    //           c: {
+    //             fontSize: 22,
+    //             // color: '#fff',
+    //             textShadowColor: "#1c90a6",
+    //             textShadowOffsetX: 0,
+    //             textShadowOffsetY: 2,
+    //             textShadowBlur: 5,
+    //             color: "#fff",
+    //           },
+    //           d: {
+    //             color: "#fff",
+    //             align: "left",
+    //           },
+    //         },
+    //       },
+    //     },
+    //     labelLine: {
+    //       // normal: {
+    //       //   show: true,
+    //       //   lineStyle: {
+    //       //     color: "#7BC0CB",
+    //       //   },
+    //       //   length: 0,
+    //       //   length2: 100000,
+    //       // },
+
+    //       normal: {
+    //         show: true,
+    //         length2: 30,
+    //         lineStyle: {
+    //           width: 1,
+    //           color: "#fff",
+    //         },
+    //       },
+    //     },
+
+    //     //这个可以变形
+    //     xAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     yAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     zAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     //此处是修改样式的重点
+    //     grid3D: {
+    //       show: false,
+    //       boxHeight: boxHeight, //圆环的高度
+    //       //这是饼图的位置
+    //       top: "-20.5%",
+    //       left: "-4%",
+    //       viewControl: {
+    //         //3d效果可以放大、旋转等，请自己去查看官方配置
+    //         alpha: 25, //角度(这个很重要 调节角度的)
+    //         distance: 160, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+    //         rotateSensitivity: 0, //设置为0无法旋转
+    //         zoomSensitivity: 0, //设置为0无法缩放
+    //         panSensitivity: 0, //设置为0无法平移
+    //         autoRotate: false, //自动旋转
+    //       },
+    //     },
+    //     series: series,
+    //   };
+    //   return option;
+    // },
+    //获取3d丙图的最高扇区的高度
+    // getHeight3D(series, height) {
+    //   series.sort((a, b) => {
+    //     return b.pieData.value - a.pieData.value;
+    //   });
+    //   return (height * 25) / series[0].pieData.value;
+    // },
+    // // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    // getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+    //   // 计算
+    //   let midRatio = (startRatio + endRatio) / 2;
+    //   let startRadian = startRatio * Math.PI * 2;
+    //   let endRadian = endRatio * Math.PI * 2;
+    //   let midRadian = midRatio * Math.PI * 2;
+    //   // 如果只有一个扇形，则不实现选中效果。
+    //   if (startRatio === 0 && endRatio === 1) {
+    //     isSelected = false;
+    //   }
+    //   // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+    //   k = typeof k !== "undefined" ? k : 1 / 3;
+    //   // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+    //   let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+    //   let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+    //   // 计算高亮效果的放大比例（未高亮，则比例为 1）
+    //   let hoverRate = isHovered ? 1.05 : 1;
+    //   // 返回曲面参数方程
+    //   return {
+    //     u: {
+    //       min: -Math.PI,
+    //       max: Math.PI * 3,
+    //       step: Math.PI / 32,
+    //     },
+    //     v: {
+    //       min: 0,
+    //       max: Math.PI * 2,
+    //       step: Math.PI / 20,
+    //     },
+    //     x: function (u, v) {
+    //       if (u < startRadian) {
+    //         return (
+    //           offsetX +
+    //           Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       if (u > endRadian) {
+    //         return (
+    //           offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+    //     },
+    //     y: function (u, v) {
+    //       if (u < startRadian) {
+    //         return (
+    //           offsetY +
+    //           Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       if (u > endRadian) {
+    //         return (
+    //           offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+    //     },
+    //     z: function (u, v) {
+    //       if (u < -Math.PI * 0.5) {
+    //         return Math.sin(u);
+    //       }
+    //       if (u > Math.PI * 2.5) {
+    //         return Math.sin(u) * h * 0.1;
+    //       }
+    //       return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+    //     },
+    //   };
+    // },
+    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    bindListen(myChart) {
+      let that = this;
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on("click", function (params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        let isSelected =
+          !that.option.series[params.seriesIndex].pieStatus.selected;
+        let isHovered =
+          that.option.series[params.seriesIndex].pieStatus.hovered;
+        let k = that.option.series[params.seriesIndex].pieStatus.k;
+        let startRatio =
+          that.option.series[params.seriesIndex].pieData.startRatio;
+        let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation =
+            that.getParametricEquation(
+              that.option.series[selectedIndex].pieData.startRatio,
+              that.option.series[selectedIndex].pieData.endRatio,
+              false,
+              false,
+              k,
+              that.option.series[selectedIndex].pieData.value
+            );
+          that.option.series[selectedIndex].pieStatus.selected = false;
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation =
+          that.getParametricEquation(
+            startRatio,
+            endRatio,
+            isSelected,
+            isHovered,
+            k,
+            that.option.series[params.seriesIndex].pieData.value
+          );
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? (selectedIndex = params.seriesIndex) : null;
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option);
+      });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", function (params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return;
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio;
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio;
+            k = that.option.series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation =
+              that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[hoveredIndex].pieData.value
+              );
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "pie2d"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              that.option.series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              that.option.series[params.seriesIndex].pieData.startRatio;
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
+            k = that.option.series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation =
+              that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[params.seriesIndex].pieData.value + 5
+              );
+            that.option.series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", function () {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = that.option.series[hoveredIndex].pieStatus.k;
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio;
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation =
+            that.getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              that.option.series[hoveredIndex].pieData.value
+            );
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option);
+      });
+    },
+    //这是一个自定义计算的方法
+    fomatFloat(num, n) {
+      var f = parseFloat(num);
+      if (isNaN(f)) {
+        return false;
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
+      var s = f.toString();
+      var rs = s.indexOf(".");
+      //判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length;
+        s += ".";
+      }
+      while (s.length <= rs + n) {
+        s += "0";
+      }
+      return s;
+    },
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          color:"#",
+          position: "outside",
+          formatter: (params) => {
+            var total = 0;
+            optionsData.forEach((item, index) => {
+              console.log(item.value);
+              total += item.value;
+            });
+            console.log(total);
+            let percent = ((params.value / total) * 100).toFixed(2);
+            console.log(params);
+            return (
+              `{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+            },
+            colors: {
+              fontSize: 30,
+              color:optionsData[0].itemStyle.color,
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("fhzb", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+    getEchart() {
+      var chartDom = document.getElementById("pdsydl");
+      var myChart = echarts.init(chartDom);
+      var option;
+      const sideData = [220, 182, 191, 234, 290];
+      const sideData1 = [100, 110, 120, 134, 190];
+
+      option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: [
+            {
+              name: "今日",
+              textStyle: {
+                color: "white",
+              },
+            },
+            {
+              name: "昨日",
+              textStyle: {
+                color: "white",
+              },
+            },
+          ],
+        },
+        grid: {
+          top: "10%",
+          bottom: "62%",
+          right: "15%",
+          containLabel: true,
+        },
+        toolbox: {
+          show: true,
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: "category",
+            splitLine: {
+              show: false,
+            },
+            data: ["1月", "2月", "3月", "4月", "5月"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#fff", //X轴文字颜色
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#fff", //X轴文字颜色
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            tooltip: {
+              show: false,
+            },
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#2d8cf0", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#2d8cf0", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#2d8cf0", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: sideData,
+            barGap: 10,
+          },
+          {
+            name: "昨日",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#09337C", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#0761C0", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#0575DE", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            barGap: 0,
+            data: sideData,
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "white",
+                fontSize: 10,
+              },
+            },
+          },
+          {
+            name: "昨日",
+            tooltip: {
+              show: false,
+            },
+            type: "pictorialBar",
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#0571D5",
+              color: "#288ef3", // 控制顶部方形的颜色
+            },
+            symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
+            symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
+            symbolOffset: ["-10", "-4"], // 控制顶部放行 左右和上下
+            symbolRotate: -16,
+            symbolPosition: "end",
+            data: sideData,
+            z: 3,
+          },
+          {
+            name: "今日",
+            tooltip: {
+              show: false,
+            },
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#15a00f", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#11ad0a", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#19c213", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: sideData1,
+            barGap: 0,
+          },
+          {
+            name: "今日",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#26ec10", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#26ec10", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#26ec10", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            barGap: 0,
+            data: sideData1,
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "white",
+                fontSize: 10,
+              },
+            },
+          },
+          {
+            name: "今日",
+            tooltip: {
+              show: false,
+            },
+            type: "pictorialBar",
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#fff",
+              color: "#26ec10", // 顶部方块的颜色
+            },
+            symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
+            symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
+            symbolOffset: ["10", "-4"], // 控制顶部放行 左右和上下
+            symbolRotate: -16,
+            symbolPosition: "end",
+            data: sideData1,
+            z: 3,
+          },
+        ],
+      };
+
+      myChart.setOption(option, true);
+    },
+  },
+  mounted() {
+    this.defineEcharts("pdsssdh", this.option1);
+    // this.defineEcharts("pdsydl", this.option2);
+    this.pdsydl();
+    // this.getEchart();
+    this.defineEcharts("pdstpt", this.option3);
+    this.init();
+  },
+};
+</script>
+<style scoped lang="less">
+//饼图底座（我也想给你们底座图片 可是我不知道咋给）
+.buttomCharts {
+  background: center top url("../../../assets/img/底盘.png") no-repeat;
+  background-size: 100% 100%;
+  height: 280px;
+  width: 800px;
+  margin-top: -290px;
+  margin-left: 12%;
+}
+
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  background-image: url(../../../assets/img/左遮罩.png), url(../../../assets/img/右遮罩.png);
+  margin-top: -800px;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+}
+
+.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;
+  }
+
+  .pdsssdh {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+      }
+
+      .active {
+        background: linear-gradient(
+          to right,
+          rgba(33, 76, 124, 0.3) 20%,
+          rgba(152, 207, 230, 0.3) 100%,
+          rgba(33, 76, 124, 0.3) 20%
+        );
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdsssdh {
+      width: 1155px;
+      height: 500px;
+      margin-top: 50px;
+    }
+  }
+
+  .pdsydl {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+      }
+
+      .active {
+        background: linear-gradient(
+          to right,
+          rgba(33, 76, 124, 0.3) 20%,
+          rgba(152, 207, 230, 0.3) 100%,
+          rgba(33, 76, 124, 0.3) 20%
+        );
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdsydl {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+    }
+  }
+
+  .pdstpt {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdstpt {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+        cursor: pointer;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .pdsjk {
+    position: relative;
+    margin-top: 130px;
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      margin-top: 50px;
+
+      #pdsjk {
+        width: 1156px;
+        height: 400px;
+
+        .title {
+          display: flex;
+          align-items: center;
+          color: #fff;
+          font-size: 20px;
+          margin-left: 50px;
+          margin-bottom: 20px;
+
+          span {
+            margin: 0 20px;
+            font-size: 30px;
+            color: #56f671;
+          }
+        }
+
+        /deep/.el-table tr {
+          background: #16253b;
+          color: #fff;
+          font-size: 30px;
+          height: 50px;
+
+          .cell {
+            line-height: 50px;
+          }
+        }
+
+        // 去掉eltable的hover效果
+        ::v-deep .el-table tbody tr:hover > td {
+          background-color: #0b679e !important;
+        }
+
+        //修改表头颜色
+        ::v-deep .has-gutter {
+          background-color: #1969a8;
+
+          th {
+            background-color: #1969a8;
+          }
+        }
+
+        //奇偶行颜色
+        ::v-deep .el-table .success-row {
+          background: #184167;
+        }
+
+        //去掉边框白线
+        ::v-deep .el-table__row > td {
+          border: none;
+        }
+
+        ::v-deep .el-table::before {
+          height: 0px;
+        }
+
+        /* 移除表头的下边框 */
+        ::v-deep .el-table__header th {
+          border-bottom: none;
+        }
+      }
+
+      #fhzb {
+        width: 1156px;
+        height: 500px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/lll/NYJCD/SCX1_20231205100612.vue b/.history/src/views/lll/NYJCD/SCX1_20231205100612.vue
new file mode 100644
index 0000000..3bac253
--- /dev/null
+++ b/.history/src/views/lll/NYJCD/SCX1_20231205100612.vue
@@ -0,0 +1,2210 @@
+<template>
+  <div class="box">
+    <div class="left">
+      <img class="title" :src="src" />
+      <div class="pdsssdh">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线实时负荷</p> -->
+
+          <p>{{ $route.query.type }}实时电荷</p>
+        </div>
+        <div class="data">
+          <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+            >年</span
+          >
+          <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+            >月</span
+          >
+          <span :class="res == '日' ? 'active' : ''" @click="res = '日'"
+            >日</span
+          >
+        </div>
+        <div id="pdsssdh"></div>
+      </div>
+      <div class="pdsydl">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电量</p> -->
+          <p>{{ $route.query.type }}用电量</p>
+        </div>
+        <div class="data">
+          <span
+            :class="type == '总用电' ? 'active' : ''"
+            @click="type = '总用电'"
+            >总用电</span
+          >
+          <span
+            :class="type == '分时段' ? 'active' : ''"
+            @click="type = '分时段'"
+            >分时段</span
+          >
+        </div>
+        <div id="pdsydl"></div>
+      </div>
+      <div class="pdstpt">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电量对比</p> -->
+          <p>{{ $route.query.type }}用电量对比</p>
+        </div>
+        <div id="pdstpt">
+          <div class="data">
+            <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+              >年</span
+            >
+            <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+              >月</span
+            >
+            <span :class="res1 == '日' ? 'active' : ''" @click="res1 = '日'"
+              >日</span
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线监控</p> -->
+          <p>{{ $route.query.type }}监控</p>
+        </div>
+        <div class="chartBox">
+          <div id="pdsjk">
+            <div class="title">
+              <p>设备数量：</p>
+              <span>5</span>
+              <p>个</p>
+            </div>
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column label="序号" align="center">
+                <template slot-scope="scope">
+                  {{ scope.$index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="date1"
+                label="生产工艺名称"
+                align="center"
+                width="300px"
+              >
+              </el-table-column>
+              <el-table-column prop="date2" label="实时电荷" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58ff70"> {{ scope.row.date2 }}</span
+                  ><span>kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="今日用电量" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58caff"> {{ scope.row.date3 }}</span
+                  ><span>kWh</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date2" label="设备状态" align="center"
+                ><template slot-scope="scope">
+                  <span v-if="scope.row.date4"
+                    ><img src="../../../assets/KDFH/tongguo.png"
+                  /></span>
+                  <span v-else
+                    ><img src="../../../assets/KDFH/jinggao.png"
+                  /></span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线监控</p> -->
+          <p>负荷占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="fhzb"></div>
+          <!-- 饼图下面的底座 -->
+          <div class="buttomCharts"></div>
+        </div>
+      </div>
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电排名</p> -->
+          <p>{{ $route.query.type }}用电排名</p>
+        </div>
+        <div class="chartBox">
+          <div id="pdsjk">
+            <el-table
+              :data="tableData1"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              :header-cell-style="getHeaderCellStyle"
+            >
+              <el-table-column label="序号" align="center">
+                <template slot-scope="scope">
+                  {{ scope.$index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="date1"
+                label="配电室名称"
+                align="center"
+                width="300px"
+              >
+              </el-table-column>
+              <el-table-column prop="date2" label="用电量" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58caff"> {{ scope.row.date2 }}</span
+                  ><span>kWh</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import highcharts from "highcharts";
+export default {
+  data() {
+    return {
+      res: "月",
+      res1: "月",
+      type: "总用电",
+      src: "",
+      option1: {
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:KW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 500,
+          interval: 100, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [200, 300, 500, 400, 334],
+            itemStyle: {
+              normal: {
+                color: "#00FF00",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21FF55", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      },
+      //   option2: {
+      //     legend: {
+      //       data: [
+      //         { icon: "rect", name: "昨日" },
+      //         { icon: "rect", name: "今日" },
+      //       ],
+      //       textStyle: {
+      //         color: "#fff",
+      //         fontSize: "20px",
+      //       },
+      //     },
+      //     xAxis: {
+      //       type: "category",
+      //       data: ["1月", "2月", "3月", "4月", "5月"],
+      //       axisLabel: {
+      //         show: true,
+      //         textStyle: {
+      //           color: "#fff",
+      //           fontSize: 20,
+      //         },
+      //         interval: 0, //代表显示所有x轴标签显示
+      //       },
+      //     },
+      //     yAxis: {
+      //       type: "value",
+      //       name: "单位:kWh",
+      //       nameTextStyle: {
+      //         color: "#fff",
+      //         fontSize: 20,
+      //         padding: 10,
+      //       },
+      //       min: 0,
+      //       max: 500,
+      //       interval: 100, // 指定刻度间隔
+      //       axisLabel: {
+      //         show: true,
+      //         textStyle: {
+      //           color: "#fff",
+      //           fontSize: 20,
+      //         },
+      //       },
+      //     },
+      //     grid: {
+      //       // 让图表占满容器
+      //       //   top: "5%",
+      //       left: "8%",
+      //       right: "5%",
+      //       bottom: "8%",
+      //     },
+      //     series: [
+      //       {
+      //         type: "bar",
+      //         name: "昨日",
+      //         data: [200, 300, 500, 400, 334],
+      //         itemStyle: {
+      //           normal: {
+      //             color: "#11C3FF",
+      //             lineStyle: {
+      //               width: 5, //折线宽度
+      //               color: "#11C3FF", //折线颜色
+      //             },
+      //           },
+      //         },
+      //       },
+      //       {
+      //         type: "bar",
+      //         name: "今日",
+      //         data: [200, 300, 500, 400, 334],
+      //         itemStyle: {
+      //           normal: {
+      //             color: "#09E83E",
+      //             lineStyle: {
+      //               width: 5, //折线宽度
+      //               color: "#09E83E", //折线颜色
+      //             },
+      //           },
+      //         },
+      //       },
+      //     ],
+      //   },
+      option3: {
+        legend: {
+          data: [
+            { icon: "rect", name: "昨日" },
+            { icon: "rect", name: "今日" },
+          ],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          boundaryGap: [0, 0.01],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: ["生料磨", "生料收尘", "篦冷机", "熟料收尘", "回转窑"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        series: [
+          {
+            name: "昨日",
+            type: "bar",
+            data: [45, 55, 17, 60, 12],
+            itemStyle: {
+              color: "#3AF0FF", //折线颜色
+            },
+          },
+          {
+            name: "今日",
+            type: "bar",
+            data: [65, 65, 36, 19, 30],
+            itemStyle: {
+              color: "#5BFAB1", //折线颜色
+            },
+          },
+        ],
+      },
+      tableData: [
+        {
+          date1: "回转窑",
+          date2: "20.34",
+          date3: "20.34",
+          date4: true,
+        },
+        {
+          date1: "熟料收尘",
+          date2: "17.42",
+          date3: "17.42",
+          date4: true,
+        },
+        {
+          date1: "篦冷机",
+          date2: "12.22",
+          date3: "12.22",
+          date4: true,
+        },
+        {
+          date1: "生料收尘",
+          date2: "19.19",
+          date3: "19.19",
+          date4: false,
+        },
+      ],
+      tableData1: [
+        {
+          date1: "总降电力室",
+          date2: "20.34",
+        },
+        {
+          date1: "矿山电力室",
+          date2: "17.42",
+        },
+        {
+          date1: "原材料电力室",
+          date2: "12.22",
+        },
+        {
+          date1: "一线生料磨电力室",
+          date2: "19.19",
+        },
+        {
+          date1: "二线生料磨电力室",
+          date2: "17.42",
+        },
+        {
+          date1: "窑尾电力室",
+          date2: "12.22",
+        },
+      ],
+      optionData: [
+        {
+          name: "破碎系统",
+          value: 38,
+          itemStyle: {
+            color: "rgba(1, 224, 239,0.9)",
+          },
+        },
+        {
+          name: "生料系统", //名称
+          value: 41, //值
+          itemStyle: {
+            //颜色
+            color: "rgba(26, 166, 228,0.9)",
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 21,
+          itemStyle: {
+            color: "rgba(81, 244, 193,0.9)",
+          },
+        },
+      ],
+      option: {},
+    };
+  },
+  watch: {
+    // 监听,当路由发生变化的时候执行
+    $route: {
+      // $route可以用引号，也可以不用引号
+      handler(to, from) {
+        this.src = require(`../../../assets/img/标题/能源监测-电-${this.$route.query.type}.png`);
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    },
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    //配电室用电量  3d
+    pdsydl() {
+      let xaxisData = ["1月", "2月", "3月", "4月", "5月"];
+      let yaxisData = [90, 80, 100, 70, 65];
+      let yaxisData2 = [60, 56, 34, 69, 79];
+
+      //拿到最大值
+      const maxValue = Math.max(...yaxisData);
+      const maxValue2 = Math.max(...yaxisData2);
+
+      const offsetX = 15;
+      const offsetY = 5;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          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);
+
+      let option = {
+        legend: {
+          data: [
+            { icon: "rect", name: "昨日" },
+            { icon: "rect", name: "今日" },
+          ],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   backgroundColor: "rgba(255,255,255,0.75)",
+        //   extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
+        //   textStyle: {
+        //     fontSize: 20,
+        //     color: "#000",
+        //   },
+        //   formatter: (params, ticket, callback) => {
+        //     const item = params[1];
+        //     return item.name + " : " + item.value + " 个";
+        //   },
+        // },
+        grid: {
+          left: "1%",
+          right: "0%",
+          top: "16%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLine: {
+            show: true,
+            // lineStyle: {
+            //   width: 1,
+            // },
+          },
+          axisTick: {
+            show: true,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#FFFFFF",
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:kWh",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+          },
+          splitLine: {
+            show: true,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#FFFFFF",
+          },
+        },
+        series: [
+          {
+            type: "bar",
+            itemStyle: {
+              color: "transparent",
+            },
+            data: yaxisData,
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                formatter: (e) => {
+                  return e.value === maxValue ? e.value : "";
+                },
+                fontSize: 20,
+                color: "#02C262",
+                offset: [0, -15],
+              },
+            },
+          },
+          {
+            type: "bar",
+            itemStyle: {
+              color: "transparent",
+            },
+            data: yaxisData2,
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                formatter: (e) => {
+                  return e.value === maxValue2 ? e.value : "";
+                },
+                fontSize: 20,
+                color: "#3286FF",
+                offset: [0, -15],
+              },
+            },
+          },
+
+          {
+            type: "custom",
+            name: "今日",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              const xAxisPoint = api.coord([api.value(0), 0]);
+              const distance = 50;
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#10C6FF",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#377DFF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#4464FF",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0673D5",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#0B68D5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#115DD5",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: "#0964FF",
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "昨日",
+            barCategoryGap: "20%",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#08E83C",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#1FE77D",
+                        },
+                        {
+                          offset: 1,
+                          color: "#38E7C5",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C25D",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#05C269",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0BC27B",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: "#05E861",
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+
+      this.defineEcharts("pdsydl", option);
+    },
+    // //初始化构建
+    // init() {
+    //   //构建3d饼状图
+    //   let myChart = this.$echarts.init(document.getElementById("fhzb"));
+    //   // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
+    //   this.option = this.getPie3D(this.optionData, 0.8);
+    //   //将配置项设置进去
+    //   myChart.setOption(this.option);
+    //   //鼠标移动上去特效效果
+    //   this.bindListen(myChart);
+    // },
+    // //配置构建 pieData 饼图数据 internalDiameterRatio:透明的空心占比
+    // getPie3D(pieData, internalDiameterRatio) {
+    //   let that = this;
+    //   let series = [];
+    //   let sumValue = 0;
+    //   let startValue = 0;
+    //   let endValue = 0;
+    //   let legendData = [];
+    //   let legendBfb = [];
+    //   let k = 1 - internalDiameterRatio;
+    //   pieData.sort((a, b) => {
+    //     return b.value - a.value;
+    //   });
+    //   // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
+    //   for (let i = 0; i < pieData.length; i++) {
+    //     sumValue += pieData[i].value;
+    //     let seriesItem = {
+    //       //系统名称
+    //       name:
+    //         typeof pieData[i].name === "undefined"
+    //           ? `series${i}`
+    //           : pieData[i].name,
+    //       type: "surface",
+    //       //是否为参数曲面（是）
+    //       parametric: true,
+    //       //曲面图网格线（否）上面一根一根的
+    //       wireframe: {
+    //         show: false,
+    //       },
+    //       pieData: pieData[i],
+    //       pieStatus: {
+    //         selected: false,
+    //         hovered: false,
+    //         k: k,
+    //       },
+    //       //设置饼图在容器中的位置(目前没发现啥用)
+    //       center: ["80%", "100%"],
+    //       radius: "60%",
+    //     };
+    //     //曲面的颜色、不透明度等样式。
+    //     if (typeof pieData[i].itemStyle != "undefined") {
+    //       let itemStyle = {};
+    //       typeof pieData[i].itemStyle.color != "undefined"
+    //         ? (itemStyle.color = pieData[i].itemStyle.color)
+    //         : null;
+    //       typeof pieData[i].itemStyle.opacity != "undefined"
+    //         ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+    //         : null;
+    //       seriesItem.itemStyle = itemStyle;
+    //     }
+    //     series.push(seriesItem);
+    //   }
+    //   // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+    //   // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+    //   legendData = [];
+    //   legendBfb = [];
+    //   for (let i = 0; i < series.length; i++) {
+    //     endValue = startValue + series[i].pieData.value;
+    //     series[i].pieData.startRatio = startValue / sumValue;
+    //     series[i].pieData.endRatio = endValue / sumValue;
+    //     series[i].parametricEquation = that.getParametricEquation(
+    //       series[i].pieData.startRatio,
+    //       series[i].pieData.endRatio,
+    //       false,
+    //       false,
+    //       k,
+    //       series[i].pieData.value
+    //     );
+
+    //     startValue = endValue;
+    //     let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
+    //     legendData.push({
+    //       name: series[i].name,
+    //       value: bfb,
+    //     });
+    //     legendBfb.push({
+    //       name: series[i].name,
+    //       value: bfb,
+    //     });
+    //   }
+
+    //   //(第二个参数可以设置你这个环形的高低程度)
+    //   let boxHeight = this.getHeight3D(series, 15); //通过传参设定3d饼/环的高度
+    //   // 准备待返回的配置项，把准备好的 legendData、series 传入。
+    //   let option = {
+    //     //移动上去提示的文本内容(我没来得及改 你们可以根据需求改)
+    //     tooltip: {
+    //       formatter: (params) => {
+    //         if (
+    //           params.seriesName !== "mouseoutSeries" &&
+    //           params.seriesName !== "pie2d"
+    //         ) {
+    //           let bfb = (
+    //             (this.option.series[params.seriesIndex].pieData.endRatio -
+    //               this.option.series[params.seriesIndex].pieData.startRatio) *
+    //             100
+    //           ).toFixed(2);
+    //           return (
+    //             `${params.seriesName}<br/>` +
+    //             `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>` +
+    //             `${bfb}%`
+    //           );
+    //         }
+    //       },
+    //     },
+    //     label: {
+    //       // normal: {
+    //       //   show: true,
+    //       //   position: "right",
+    //       //   formatter: "{b} \n{c} {d}%",
+    //       // },
+
+    //       normal: {
+    //         show: true,
+    //         color: "#fff",
+    //         position: "right",
+    //         // distance:-10,
+    //         offset: [0, 3],
+    //         formatter: [
+    //           "{d|{d}%}",
+    //           "————",
+    //           //   '{c|{c}}{b|台}',
+    //           "{b|{b}}",
+    //         ].join("\n"), // 用\n来换行
+    //         rich: {
+    //           b: {
+    //             lineHeight: 25,
+    //             align: "left",
+    //             color: "#fff",
+    //           },
+    //           c: {
+    //             fontSize: 22,
+    //             // color: '#fff',
+    //             textShadowColor: "#1c90a6",
+    //             textShadowOffsetX: 0,
+    //             textShadowOffsetY: 2,
+    //             textShadowBlur: 5,
+    //             color: "#fff",
+    //           },
+    //           d: {
+    //             color: "#fff",
+    //             align: "left",
+    //           },
+    //         },
+    //       },
+    //     },
+    //     labelLine: {
+    //       // normal: {
+    //       //   show: true,
+    //       //   lineStyle: {
+    //       //     color: "#7BC0CB",
+    //       //   },
+    //       //   length: 0,
+    //       //   length2: 100000,
+    //       // },
+
+    //       normal: {
+    //         show: true,
+    //         length2: 30,
+    //         lineStyle: {
+    //           width: 1,
+    //           color: "#fff",
+    //         },
+    //       },
+    //     },
+
+    //     //这个可以变形
+    //     xAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     yAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     zAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     //此处是修改样式的重点
+    //     grid3D: {
+    //       show: false,
+    //       boxHeight: boxHeight, //圆环的高度
+    //       //这是饼图的位置
+    //       top: "-20.5%",
+    //       left: "-4%",
+    //       viewControl: {
+    //         //3d效果可以放大、旋转等，请自己去查看官方配置
+    //         alpha: 25, //角度(这个很重要 调节角度的)
+    //         distance: 160, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+    //         rotateSensitivity: 0, //设置为0无法旋转
+    //         zoomSensitivity: 0, //设置为0无法缩放
+    //         panSensitivity: 0, //设置为0无法平移
+    //         autoRotate: false, //自动旋转
+    //       },
+    //     },
+    //     series: series,
+    //   };
+    //   return option;
+    // },
+    //获取3d丙图的最高扇区的高度
+    // getHeight3D(series, height) {
+    //   series.sort((a, b) => {
+    //     return b.pieData.value - a.pieData.value;
+    //   });
+    //   return (height * 25) / series[0].pieData.value;
+    // },
+    // // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    // getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+    //   // 计算
+    //   let midRatio = (startRatio + endRatio) / 2;
+    //   let startRadian = startRatio * Math.PI * 2;
+    //   let endRadian = endRatio * Math.PI * 2;
+    //   let midRadian = midRatio * Math.PI * 2;
+    //   // 如果只有一个扇形，则不实现选中效果。
+    //   if (startRatio === 0 && endRatio === 1) {
+    //     isSelected = false;
+    //   }
+    //   // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+    //   k = typeof k !== "undefined" ? k : 1 / 3;
+    //   // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+    //   let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+    //   let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+    //   // 计算高亮效果的放大比例（未高亮，则比例为 1）
+    //   let hoverRate = isHovered ? 1.05 : 1;
+    //   // 返回曲面参数方程
+    //   return {
+    //     u: {
+    //       min: -Math.PI,
+    //       max: Math.PI * 3,
+    //       step: Math.PI / 32,
+    //     },
+    //     v: {
+    //       min: 0,
+    //       max: Math.PI * 2,
+    //       step: Math.PI / 20,
+    //     },
+    //     x: function (u, v) {
+    //       if (u < startRadian) {
+    //         return (
+    //           offsetX +
+    //           Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       if (u > endRadian) {
+    //         return (
+    //           offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+    //     },
+    //     y: function (u, v) {
+    //       if (u < startRadian) {
+    //         return (
+    //           offsetY +
+    //           Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       if (u > endRadian) {
+    //         return (
+    //           offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+    //     },
+    //     z: function (u, v) {
+    //       if (u < -Math.PI * 0.5) {
+    //         return Math.sin(u);
+    //       }
+    //       if (u > Math.PI * 2.5) {
+    //         return Math.sin(u) * h * 0.1;
+    //       }
+    //       return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+    //     },
+    //   };
+    // },
+    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    bindListen(myChart) {
+      let that = this;
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on("click", function (params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        let isSelected =
+          !that.option.series[params.seriesIndex].pieStatus.selected;
+        let isHovered =
+          that.option.series[params.seriesIndex].pieStatus.hovered;
+        let k = that.option.series[params.seriesIndex].pieStatus.k;
+        let startRatio =
+          that.option.series[params.seriesIndex].pieData.startRatio;
+        let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation =
+            that.getParametricEquation(
+              that.option.series[selectedIndex].pieData.startRatio,
+              that.option.series[selectedIndex].pieData.endRatio,
+              false,
+              false,
+              k,
+              that.option.series[selectedIndex].pieData.value
+            );
+          that.option.series[selectedIndex].pieStatus.selected = false;
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation =
+          that.getParametricEquation(
+            startRatio,
+            endRatio,
+            isSelected,
+            isHovered,
+            k,
+            that.option.series[params.seriesIndex].pieData.value
+          );
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? (selectedIndex = params.seriesIndex) : null;
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option);
+      });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", function (params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return;
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio;
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio;
+            k = that.option.series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation =
+              that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[hoveredIndex].pieData.value
+              );
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "pie2d"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              that.option.series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              that.option.series[params.seriesIndex].pieData.startRatio;
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
+            k = that.option.series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation =
+              that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[params.seriesIndex].pieData.value + 5
+              );
+            that.option.series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", function () {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = that.option.series[hoveredIndex].pieStatus.k;
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio;
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation =
+            that.getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              that.option.series[hoveredIndex].pieData.value
+            );
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option);
+      });
+    },
+    //这是一个自定义计算的方法
+    fomatFloat(num, n) {
+      var f = parseFloat(num);
+      if (isNaN(f)) {
+        return false;
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
+      var s = f.toString();
+      var rs = s.indexOf(".");
+      //判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length;
+        s += ".";
+      }
+      while (s.length <= rs + n) {
+        s += "0";
+      }
+      return s;
+    },
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          color:"#",
+          position: "outside",
+          formatter: (params) => {
+            var total = 0;
+            optionsData.forEach((item, index) => {
+              console.log(item.value);
+              total += item.value;
+            });
+            console.log(total);
+            let percent = ((params.value / total) * 100).toFixed(2);
+            console.log(params);
+            return (
+              `{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+            },
+            colors: {
+              fontSize: 30,
+              color:optionsData[0].itemStyle.color,
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("fhzb", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+    getEchart() {
+      var chartDom = document.getElementById("pdsydl");
+      var myChart = echarts.init(chartDom);
+      var option;
+      const sideData = [220, 182, 191, 234, 290];
+      const sideData1 = [100, 110, 120, 134, 190];
+
+      option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: [
+            {
+              name: "今日",
+              textStyle: {
+                color: "white",
+              },
+            },
+            {
+              name: "昨日",
+              textStyle: {
+                color: "white",
+              },
+            },
+          ],
+        },
+        grid: {
+          top: "10%",
+          bottom: "62%",
+          right: "15%",
+          containLabel: true,
+        },
+        toolbox: {
+          show: true,
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: "category",
+            splitLine: {
+              show: false,
+            },
+            data: ["1月", "2月", "3月", "4月", "5月"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#fff", //X轴文字颜色
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#fff", //X轴文字颜色
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            tooltip: {
+              show: false,
+            },
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#2d8cf0", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#2d8cf0", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#2d8cf0", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: sideData,
+            barGap: 10,
+          },
+          {
+            name: "昨日",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#09337C", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#0761C0", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#0575DE", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            barGap: 0,
+            data: sideData,
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "white",
+                fontSize: 10,
+              },
+            },
+          },
+          {
+            name: "昨日",
+            tooltip: {
+              show: false,
+            },
+            type: "pictorialBar",
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#0571D5",
+              color: "#288ef3", // 控制顶部方形的颜色
+            },
+            symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
+            symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
+            symbolOffset: ["-10", "-4"], // 控制顶部放行 左右和上下
+            symbolRotate: -16,
+            symbolPosition: "end",
+            data: sideData,
+            z: 3,
+          },
+          {
+            name: "今日",
+            tooltip: {
+              show: false,
+            },
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#15a00f", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#11ad0a", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#19c213", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: sideData1,
+            barGap: 0,
+          },
+          {
+            name: "今日",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#26ec10", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#26ec10", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#26ec10", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            barGap: 0,
+            data: sideData1,
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "white",
+                fontSize: 10,
+              },
+            },
+          },
+          {
+            name: "今日",
+            tooltip: {
+              show: false,
+            },
+            type: "pictorialBar",
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#fff",
+              color: "#26ec10", // 顶部方块的颜色
+            },
+            symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
+            symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
+            symbolOffset: ["10", "-4"], // 控制顶部放行 左右和上下
+            symbolRotate: -16,
+            symbolPosition: "end",
+            data: sideData1,
+            z: 3,
+          },
+        ],
+      };
+
+      myChart.setOption(option, true);
+    },
+  },
+  mounted() {
+    this.defineEcharts("pdsssdh", this.option1);
+    // this.defineEcharts("pdsydl", this.option2);
+    this.pdsydl();
+    // this.getEchart();
+    this.defineEcharts("pdstpt", this.option3);
+    // this.init();
+    this.getbing();
+  },
+};
+</script>
+<style scoped lang="less">
+//饼图底座（我也想给你们底座图片 可是我不知道咋给）
+.buttomCharts {
+  background: center top url("../../../assets/img/底盘.png") no-repeat;
+  background-size: 100% 100%;
+  height: 280px;
+  width: 800px;
+  margin-top: -290px;
+  margin-left: 12%;
+}
+
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  background-image: url(../../../assets/img/左遮罩.png), url(../../../assets/img/右遮罩.png);
+  margin-top: -800px;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+}
+
+.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;
+  }
+
+  .pdsssdh {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+      }
+
+      .active {
+        background: linear-gradient(
+          to right,
+          rgba(33, 76, 124, 0.3) 20%,
+          rgba(152, 207, 230, 0.3) 100%,
+          rgba(33, 76, 124, 0.3) 20%
+        );
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdsssdh {
+      width: 1155px;
+      height: 500px;
+      margin-top: 50px;
+    }
+  }
+
+  .pdsydl {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+      }
+
+      .active {
+        background: linear-gradient(
+          to right,
+          rgba(33, 76, 124, 0.3) 20%,
+          rgba(152, 207, 230, 0.3) 100%,
+          rgba(33, 76, 124, 0.3) 20%
+        );
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdsydl {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+    }
+  }
+
+  .pdstpt {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdstpt {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+        cursor: pointer;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .pdsjk {
+    position: relative;
+    margin-top: 130px;
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      margin-top: 50px;
+
+      #pdsjk {
+        width: 1156px;
+        height: 400px;
+
+        .title {
+          display: flex;
+          align-items: center;
+          color: #fff;
+          font-size: 20px;
+          margin-left: 50px;
+          margin-bottom: 20px;
+
+          span {
+            margin: 0 20px;
+            font-size: 30px;
+            color: #56f671;
+          }
+        }
+
+        /deep/.el-table tr {
+          background: #16253b;
+          color: #fff;
+          font-size: 30px;
+          height: 50px;
+
+          .cell {
+            line-height: 50px;
+          }
+        }
+
+        // 去掉eltable的hover效果
+        ::v-deep .el-table tbody tr:hover > td {
+          background-color: #0b679e !important;
+        }
+
+        //修改表头颜色
+        ::v-deep .has-gutter {
+          background-color: #1969a8;
+
+          th {
+            background-color: #1969a8;
+          }
+        }
+
+        //奇偶行颜色
+        ::v-deep .el-table .success-row {
+          background: #184167;
+        }
+
+        //去掉边框白线
+        ::v-deep .el-table__row > td {
+          border: none;
+        }
+
+        ::v-deep .el-table::before {
+          height: 0px;
+        }
+
+        /* 移除表头的下边框 */
+        ::v-deep .el-table__header th {
+          border-bottom: none;
+        }
+      }
+
+      #fhzb {
+        width: 1156px;
+        height: 500px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/lll/NYJCD/SCX1_20231205100728.vue b/.history/src/views/lll/NYJCD/SCX1_20231205100728.vue
new file mode 100644
index 0000000..5ebf16a
--- /dev/null
+++ b/.history/src/views/lll/NYJCD/SCX1_20231205100728.vue
@@ -0,0 +1,2210 @@
+<template>
+  <div class="box">
+    <div class="left">
+      <img class="title" :src="src" />
+      <div class="pdsssdh">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线实时负荷</p> -->
+
+          <p>{{ $route.query.type }}实时电荷</p>
+        </div>
+        <div class="data">
+          <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+            >年</span
+          >
+          <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+            >月</span
+          >
+          <span :class="res == '日' ? 'active' : ''" @click="res = '日'"
+            >日</span
+          >
+        </div>
+        <div id="pdsssdh"></div>
+      </div>
+      <div class="pdsydl">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电量</p> -->
+          <p>{{ $route.query.type }}用电量</p>
+        </div>
+        <div class="data">
+          <span
+            :class="type == '总用电' ? 'active' : ''"
+            @click="type = '总用电'"
+            >总用电</span
+          >
+          <span
+            :class="type == '分时段' ? 'active' : ''"
+            @click="type = '分时段'"
+            >分时段</span
+          >
+        </div>
+        <div id="pdsydl"></div>
+      </div>
+      <div class="pdstpt">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电量对比</p> -->
+          <p>{{ $route.query.type }}用电量对比</p>
+        </div>
+        <div id="pdstpt">
+          <div class="data">
+            <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+              >年</span
+            >
+            <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+              >月</span
+            >
+            <span :class="res1 == '日' ? 'active' : ''" @click="res1 = '日'"
+              >日</span
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线监控</p> -->
+          <p>{{ $route.query.type }}监控</p>
+        </div>
+        <div class="chartBox">
+          <div id="pdsjk">
+            <div class="title">
+              <p>设备数量：</p>
+              <span>5</span>
+              <p>个</p>
+            </div>
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column label="序号" align="center">
+                <template slot-scope="scope">
+                  {{ scope.$index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="date1"
+                label="生产工艺名称"
+                align="center"
+                width="300px"
+              >
+              </el-table-column>
+              <el-table-column prop="date2" label="实时电荷" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58ff70"> {{ scope.row.date2 }}</span
+                  ><span>kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="今日用电量" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58caff"> {{ scope.row.date3 }}</span
+                  ><span>kWh</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date2" label="设备状态" align="center"
+                ><template slot-scope="scope">
+                  <span v-if="scope.row.date4"
+                    ><img src="../../../assets/KDFH/tongguo.png"
+                  /></span>
+                  <span v-else
+                    ><img src="../../../assets/KDFH/jinggao.png"
+                  /></span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线监控</p> -->
+          <p>负荷占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="fhzb"></div>
+          <!-- 饼图下面的底座 -->
+          <div class="buttomCharts"></div>
+        </div>
+      </div>
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电排名</p> -->
+          <p>{{ $route.query.type }}用电排名</p>
+        </div>
+        <div class="chartBox">
+          <div id="pdsjk">
+            <el-table
+              :data="tableData1"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              :header-cell-style="getHeaderCellStyle"
+            >
+              <el-table-column label="序号" align="center">
+                <template slot-scope="scope">
+                  {{ scope.$index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="date1"
+                label="配电室名称"
+                align="center"
+                width="300px"
+              >
+              </el-table-column>
+              <el-table-column prop="date2" label="用电量" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58caff"> {{ scope.row.date2 }}</span
+                  ><span>kWh</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import highcharts from "highcharts";
+export default {
+  data() {
+    return {
+      res: "月",
+      res1: "月",
+      type: "总用电",
+      src: "",
+      option1: {
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:KW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 500,
+          interval: 100, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [200, 300, 500, 400, 334],
+            itemStyle: {
+              normal: {
+                color: "#00FF00",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21FF55", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      },
+      //   option2: {
+      //     legend: {
+      //       data: [
+      //         { icon: "rect", name: "昨日" },
+      //         { icon: "rect", name: "今日" },
+      //       ],
+      //       textStyle: {
+      //         color: "#fff",
+      //         fontSize: "20px",
+      //       },
+      //     },
+      //     xAxis: {
+      //       type: "category",
+      //       data: ["1月", "2月", "3月", "4月", "5月"],
+      //       axisLabel: {
+      //         show: true,
+      //         textStyle: {
+      //           color: "#fff",
+      //           fontSize: 20,
+      //         },
+      //         interval: 0, //代表显示所有x轴标签显示
+      //       },
+      //     },
+      //     yAxis: {
+      //       type: "value",
+      //       name: "单位:kWh",
+      //       nameTextStyle: {
+      //         color: "#fff",
+      //         fontSize: 20,
+      //         padding: 10,
+      //       },
+      //       min: 0,
+      //       max: 500,
+      //       interval: 100, // 指定刻度间隔
+      //       axisLabel: {
+      //         show: true,
+      //         textStyle: {
+      //           color: "#fff",
+      //           fontSize: 20,
+      //         },
+      //       },
+      //     },
+      //     grid: {
+      //       // 让图表占满容器
+      //       //   top: "5%",
+      //       left: "8%",
+      //       right: "5%",
+      //       bottom: "8%",
+      //     },
+      //     series: [
+      //       {
+      //         type: "bar",
+      //         name: "昨日",
+      //         data: [200, 300, 500, 400, 334],
+      //         itemStyle: {
+      //           normal: {
+      //             color: "#11C3FF",
+      //             lineStyle: {
+      //               width: 5, //折线宽度
+      //               color: "#11C3FF", //折线颜色
+      //             },
+      //           },
+      //         },
+      //       },
+      //       {
+      //         type: "bar",
+      //         name: "今日",
+      //         data: [200, 300, 500, 400, 334],
+      //         itemStyle: {
+      //           normal: {
+      //             color: "#09E83E",
+      //             lineStyle: {
+      //               width: 5, //折线宽度
+      //               color: "#09E83E", //折线颜色
+      //             },
+      //           },
+      //         },
+      //       },
+      //     ],
+      //   },
+      option3: {
+        legend: {
+          data: [
+            { icon: "rect", name: "昨日" },
+            { icon: "rect", name: "今日" },
+          ],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          boundaryGap: [0, 0.01],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: ["生料磨", "生料收尘", "篦冷机", "熟料收尘", "回转窑"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        series: [
+          {
+            name: "昨日",
+            type: "bar",
+            data: [45, 55, 17, 60, 12],
+            itemStyle: {
+              color: "#3AF0FF", //折线颜色
+            },
+          },
+          {
+            name: "今日",
+            type: "bar",
+            data: [65, 65, 36, 19, 30],
+            itemStyle: {
+              color: "#5BFAB1", //折线颜色
+            },
+          },
+        ],
+      },
+      tableData: [
+        {
+          date1: "回转窑",
+          date2: "20.34",
+          date3: "20.34",
+          date4: true,
+        },
+        {
+          date1: "熟料收尘",
+          date2: "17.42",
+          date3: "17.42",
+          date4: true,
+        },
+        {
+          date1: "篦冷机",
+          date2: "12.22",
+          date3: "12.22",
+          date4: true,
+        },
+        {
+          date1: "生料收尘",
+          date2: "19.19",
+          date3: "19.19",
+          date4: false,
+        },
+      ],
+      tableData1: [
+        {
+          date1: "总降电力室",
+          date2: "20.34",
+        },
+        {
+          date1: "矿山电力室",
+          date2: "17.42",
+        },
+        {
+          date1: "原材料电力室",
+          date2: "12.22",
+        },
+        {
+          date1: "一线生料磨电力室",
+          date2: "19.19",
+        },
+        {
+          date1: "二线生料磨电力室",
+          date2: "17.42",
+        },
+        {
+          date1: "窑尾电力室",
+          date2: "12.22",
+        },
+      ],
+      optionData: [
+        {
+          name: "破碎系统",
+          value: 38,
+          itemStyle: {
+            color: "rgba(1, 224, 239,0.9)",
+          },
+        },
+        {
+          name: "生料系统", //名称
+          value: 41, //值
+          itemStyle: {
+            //颜色
+            color: "rgba(26, 166, 228,0.9)",
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 21,
+          itemStyle: {
+            color: "rgba(81, 244, 193,0.9)",
+          },
+        },
+      ],
+      option: {},
+    };
+  },
+  watch: {
+    // 监听,当路由发生变化的时候执行
+    $route: {
+      // $route可以用引号，也可以不用引号
+      handler(to, from) {
+        this.src = require(`../../../assets/img/标题/能源监测-电-${this.$route.query.type}.png`);
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    },
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    //配电室用电量  3d
+    pdsydl() {
+      let xaxisData = ["1月", "2月", "3月", "4月", "5月"];
+      let yaxisData = [90, 80, 100, 70, 65];
+      let yaxisData2 = [60, 56, 34, 69, 79];
+
+      //拿到最大值
+      const maxValue = Math.max(...yaxisData);
+      const maxValue2 = Math.max(...yaxisData2);
+
+      const offsetX = 15;
+      const offsetY = 5;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          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);
+
+      let option = {
+        legend: {
+          data: [
+            { icon: "rect", name: "昨日" },
+            { icon: "rect", name: "今日" },
+          ],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   backgroundColor: "rgba(255,255,255,0.75)",
+        //   extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
+        //   textStyle: {
+        //     fontSize: 20,
+        //     color: "#000",
+        //   },
+        //   formatter: (params, ticket, callback) => {
+        //     const item = params[1];
+        //     return item.name + " : " + item.value + " 个";
+        //   },
+        // },
+        grid: {
+          left: "1%",
+          right: "0%",
+          top: "16%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLine: {
+            show: true,
+            // lineStyle: {
+            //   width: 1,
+            // },
+          },
+          axisTick: {
+            show: true,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#FFFFFF",
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:kWh",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+          },
+          splitLine: {
+            show: true,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#FFFFFF",
+          },
+        },
+        series: [
+          {
+            type: "bar",
+            itemStyle: {
+              color: "transparent",
+            },
+            data: yaxisData,
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                formatter: (e) => {
+                  return e.value === maxValue ? e.value : "";
+                },
+                fontSize: 20,
+                color: "#02C262",
+                offset: [0, -15],
+              },
+            },
+          },
+          {
+            type: "bar",
+            itemStyle: {
+              color: "transparent",
+            },
+            data: yaxisData2,
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                formatter: (e) => {
+                  return e.value === maxValue2 ? e.value : "";
+                },
+                fontSize: 20,
+                color: "#3286FF",
+                offset: [0, -15],
+              },
+            },
+          },
+
+          {
+            type: "custom",
+            name: "今日",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              const xAxisPoint = api.coord([api.value(0), 0]);
+              const distance = 50;
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#10C6FF",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#377DFF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#4464FF",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0673D5",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#0B68D5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#115DD5",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: "#0964FF",
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "昨日",
+            barCategoryGap: "20%",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#08E83C",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#1FE77D",
+                        },
+                        {
+                          offset: 1,
+                          color: "#38E7C5",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C25D",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#05C269",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0BC27B",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: "#05E861",
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+
+      this.defineEcharts("pdsydl", option);
+    },
+    // //初始化构建
+    // init() {
+    //   //构建3d饼状图
+    //   let myChart = this.$echarts.init(document.getElementById("fhzb"));
+    //   // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
+    //   this.option = this.getPie3D(this.optionData, 0.8);
+    //   //将配置项设置进去
+    //   myChart.setOption(this.option);
+    //   //鼠标移动上去特效效果
+    //   this.bindListen(myChart);
+    // },
+    // //配置构建 pieData 饼图数据 internalDiameterRatio:透明的空心占比
+    // getPie3D(pieData, internalDiameterRatio) {
+    //   let that = this;
+    //   let series = [];
+    //   let sumValue = 0;
+    //   let startValue = 0;
+    //   let endValue = 0;
+    //   let legendData = [];
+    //   let legendBfb = [];
+    //   let k = 1 - internalDiameterRatio;
+    //   pieData.sort((a, b) => {
+    //     return b.value - a.value;
+    //   });
+    //   // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
+    //   for (let i = 0; i < pieData.length; i++) {
+    //     sumValue += pieData[i].value;
+    //     let seriesItem = {
+    //       //系统名称
+    //       name:
+    //         typeof pieData[i].name === "undefined"
+    //           ? `series${i}`
+    //           : pieData[i].name,
+    //       type: "surface",
+    //       //是否为参数曲面（是）
+    //       parametric: true,
+    //       //曲面图网格线（否）上面一根一根的
+    //       wireframe: {
+    //         show: false,
+    //       },
+    //       pieData: pieData[i],
+    //       pieStatus: {
+    //         selected: false,
+    //         hovered: false,
+    //         k: k,
+    //       },
+    //       //设置饼图在容器中的位置(目前没发现啥用)
+    //       center: ["80%", "100%"],
+    //       radius: "60%",
+    //     };
+    //     //曲面的颜色、不透明度等样式。
+    //     if (typeof pieData[i].itemStyle != "undefined") {
+    //       let itemStyle = {};
+    //       typeof pieData[i].itemStyle.color != "undefined"
+    //         ? (itemStyle.color = pieData[i].itemStyle.color)
+    //         : null;
+    //       typeof pieData[i].itemStyle.opacity != "undefined"
+    //         ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+    //         : null;
+    //       seriesItem.itemStyle = itemStyle;
+    //     }
+    //     series.push(seriesItem);
+    //   }
+    //   // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+    //   // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+    //   legendData = [];
+    //   legendBfb = [];
+    //   for (let i = 0; i < series.length; i++) {
+    //     endValue = startValue + series[i].pieData.value;
+    //     series[i].pieData.startRatio = startValue / sumValue;
+    //     series[i].pieData.endRatio = endValue / sumValue;
+    //     series[i].parametricEquation = that.getParametricEquation(
+    //       series[i].pieData.startRatio,
+    //       series[i].pieData.endRatio,
+    //       false,
+    //       false,
+    //       k,
+    //       series[i].pieData.value
+    //     );
+
+    //     startValue = endValue;
+    //     let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
+    //     legendData.push({
+    //       name: series[i].name,
+    //       value: bfb,
+    //     });
+    //     legendBfb.push({
+    //       name: series[i].name,
+    //       value: bfb,
+    //     });
+    //   }
+
+    //   //(第二个参数可以设置你这个环形的高低程度)
+    //   let boxHeight = this.getHeight3D(series, 15); //通过传参设定3d饼/环的高度
+    //   // 准备待返回的配置项，把准备好的 legendData、series 传入。
+    //   let option = {
+    //     //移动上去提示的文本内容(我没来得及改 你们可以根据需求改)
+    //     tooltip: {
+    //       formatter: (params) => {
+    //         if (
+    //           params.seriesName !== "mouseoutSeries" &&
+    //           params.seriesName !== "pie2d"
+    //         ) {
+    //           let bfb = (
+    //             (this.option.series[params.seriesIndex].pieData.endRatio -
+    //               this.option.series[params.seriesIndex].pieData.startRatio) *
+    //             100
+    //           ).toFixed(2);
+    //           return (
+    //             `${params.seriesName}<br/>` +
+    //             `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>` +
+    //             `${bfb}%`
+    //           );
+    //         }
+    //       },
+    //     },
+    //     label: {
+    //       // normal: {
+    //       //   show: true,
+    //       //   position: "right",
+    //       //   formatter: "{b} \n{c} {d}%",
+    //       // },
+
+    //       normal: {
+    //         show: true,
+    //         color: "#fff",
+    //         position: "right",
+    //         // distance:-10,
+    //         offset: [0, 3],
+    //         formatter: [
+    //           "{d|{d}%}",
+    //           "————",
+    //           //   '{c|{c}}{b|台}',
+    //           "{b|{b}}",
+    //         ].join("\n"), // 用\n来换行
+    //         rich: {
+    //           b: {
+    //             lineHeight: 25,
+    //             align: "left",
+    //             color: "#fff",
+    //           },
+    //           c: {
+    //             fontSize: 22,
+    //             // color: '#fff',
+    //             textShadowColor: "#1c90a6",
+    //             textShadowOffsetX: 0,
+    //             textShadowOffsetY: 2,
+    //             textShadowBlur: 5,
+    //             color: "#fff",
+    //           },
+    //           d: {
+    //             color: "#fff",
+    //             align: "left",
+    //           },
+    //         },
+    //       },
+    //     },
+    //     labelLine: {
+    //       // normal: {
+    //       //   show: true,
+    //       //   lineStyle: {
+    //       //     color: "#7BC0CB",
+    //       //   },
+    //       //   length: 0,
+    //       //   length2: 100000,
+    //       // },
+
+    //       normal: {
+    //         show: true,
+    //         length2: 30,
+    //         lineStyle: {
+    //           width: 1,
+    //           color: "#fff",
+    //         },
+    //       },
+    //     },
+
+    //     //这个可以变形
+    //     xAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     yAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     zAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     //此处是修改样式的重点
+    //     grid3D: {
+    //       show: false,
+    //       boxHeight: boxHeight, //圆环的高度
+    //       //这是饼图的位置
+    //       top: "-20.5%",
+    //       left: "-4%",
+    //       viewControl: {
+    //         //3d效果可以放大、旋转等，请自己去查看官方配置
+    //         alpha: 25, //角度(这个很重要 调节角度的)
+    //         distance: 160, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+    //         rotateSensitivity: 0, //设置为0无法旋转
+    //         zoomSensitivity: 0, //设置为0无法缩放
+    //         panSensitivity: 0, //设置为0无法平移
+    //         autoRotate: false, //自动旋转
+    //       },
+    //     },
+    //     series: series,
+    //   };
+    //   return option;
+    // },
+    //获取3d丙图的最高扇区的高度
+    // getHeight3D(series, height) {
+    //   series.sort((a, b) => {
+    //     return b.pieData.value - a.pieData.value;
+    //   });
+    //   return (height * 25) / series[0].pieData.value;
+    // },
+    // // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    // getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+    //   // 计算
+    //   let midRatio = (startRatio + endRatio) / 2;
+    //   let startRadian = startRatio * Math.PI * 2;
+    //   let endRadian = endRatio * Math.PI * 2;
+    //   let midRadian = midRatio * Math.PI * 2;
+    //   // 如果只有一个扇形，则不实现选中效果。
+    //   if (startRatio === 0 && endRatio === 1) {
+    //     isSelected = false;
+    //   }
+    //   // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+    //   k = typeof k !== "undefined" ? k : 1 / 3;
+    //   // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+    //   let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+    //   let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+    //   // 计算高亮效果的放大比例（未高亮，则比例为 1）
+    //   let hoverRate = isHovered ? 1.05 : 1;
+    //   // 返回曲面参数方程
+    //   return {
+    //     u: {
+    //       min: -Math.PI,
+    //       max: Math.PI * 3,
+    //       step: Math.PI / 32,
+    //     },
+    //     v: {
+    //       min: 0,
+    //       max: Math.PI * 2,
+    //       step: Math.PI / 20,
+    //     },
+    //     x: function (u, v) {
+    //       if (u < startRadian) {
+    //         return (
+    //           offsetX +
+    //           Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       if (u > endRadian) {
+    //         return (
+    //           offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+    //     },
+    //     y: function (u, v) {
+    //       if (u < startRadian) {
+    //         return (
+    //           offsetY +
+    //           Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       if (u > endRadian) {
+    //         return (
+    //           offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+    //     },
+    //     z: function (u, v) {
+    //       if (u < -Math.PI * 0.5) {
+    //         return Math.sin(u);
+    //       }
+    //       if (u > Math.PI * 2.5) {
+    //         return Math.sin(u) * h * 0.1;
+    //       }
+    //       return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+    //     },
+    //   };
+    // },
+    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    bindListen(myChart) {
+      let that = this;
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on("click", function (params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        let isSelected =
+          !that.option.series[params.seriesIndex].pieStatus.selected;
+        let isHovered =
+          that.option.series[params.seriesIndex].pieStatus.hovered;
+        let k = that.option.series[params.seriesIndex].pieStatus.k;
+        let startRatio =
+          that.option.series[params.seriesIndex].pieData.startRatio;
+        let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation =
+            that.getParametricEquation(
+              that.option.series[selectedIndex].pieData.startRatio,
+              that.option.series[selectedIndex].pieData.endRatio,
+              false,
+              false,
+              k,
+              that.option.series[selectedIndex].pieData.value
+            );
+          that.option.series[selectedIndex].pieStatus.selected = false;
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation =
+          that.getParametricEquation(
+            startRatio,
+            endRatio,
+            isSelected,
+            isHovered,
+            k,
+            that.option.series[params.seriesIndex].pieData.value
+          );
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? (selectedIndex = params.seriesIndex) : null;
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option);
+      });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", function (params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return;
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio;
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio;
+            k = that.option.series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation =
+              that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[hoveredIndex].pieData.value
+              );
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "pie2d"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              that.option.series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              that.option.series[params.seriesIndex].pieData.startRatio;
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
+            k = that.option.series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation =
+              that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[params.seriesIndex].pieData.value + 5
+              );
+            that.option.series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", function () {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = that.option.series[hoveredIndex].pieStatus.k;
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio;
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation =
+            that.getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              that.option.series[hoveredIndex].pieData.value
+            );
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option);
+      });
+    },
+    //这是一个自定义计算的方法
+    fomatFloat(num, n) {
+      var f = parseFloat(num);
+      if (isNaN(f)) {
+        return false;
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
+      var s = f.toString();
+      var rs = s.indexOf(".");
+      //判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length;
+        s += ".";
+      }
+      while (s.length <= rs + n) {
+        s += "0";
+      }
+      return s;
+    },
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 14,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          color:"#",
+          position: "outside",
+          formatter: (params) => {
+            var total = 0;
+            optionsData.forEach((item, index) => {
+              console.log(item.value);
+              total += item.value;
+            });
+            console.log(total);
+            let percent = ((params.value / total) * 100).toFixed(2);
+            console.log(params);
+            return (
+              `{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+            },
+            colors: {
+              fontSize: 30,
+              color:optionsData[0].itemStyle.color,
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("fhzb", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+    getEchart() {
+      var chartDom = document.getElementById("pdsydl");
+      var myChart = echarts.init(chartDom);
+      var option;
+      const sideData = [220, 182, 191, 234, 290];
+      const sideData1 = [100, 110, 120, 134, 190];
+
+      option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: [
+            {
+              name: "今日",
+              textStyle: {
+                color: "white",
+              },
+            },
+            {
+              name: "昨日",
+              textStyle: {
+                color: "white",
+              },
+            },
+          ],
+        },
+        grid: {
+          top: "10%",
+          bottom: "62%",
+          right: "15%",
+          containLabel: true,
+        },
+        toolbox: {
+          show: true,
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: "category",
+            splitLine: {
+              show: false,
+            },
+            data: ["1月", "2月", "3月", "4月", "5月"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#fff", //X轴文字颜色
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#fff", //X轴文字颜色
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            tooltip: {
+              show: false,
+            },
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#2d8cf0", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#2d8cf0", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#2d8cf0", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: sideData,
+            barGap: 10,
+          },
+          {
+            name: "昨日",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#09337C", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#0761C0", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#0575DE", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            barGap: 0,
+            data: sideData,
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "white",
+                fontSize: 10,
+              },
+            },
+          },
+          {
+            name: "昨日",
+            tooltip: {
+              show: false,
+            },
+            type: "pictorialBar",
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#0571D5",
+              color: "#288ef3", // 控制顶部方形的颜色
+            },
+            symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
+            symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
+            symbolOffset: ["-10", "-4"], // 控制顶部放行 左右和上下
+            symbolRotate: -16,
+            symbolPosition: "end",
+            data: sideData,
+            z: 3,
+          },
+          {
+            name: "今日",
+            tooltip: {
+              show: false,
+            },
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#15a00f", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#11ad0a", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#19c213", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: sideData1,
+            barGap: 0,
+          },
+          {
+            name: "今日",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#26ec10", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#26ec10", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#26ec10", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            barGap: 0,
+            data: sideData1,
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "white",
+                fontSize: 10,
+              },
+            },
+          },
+          {
+            name: "今日",
+            tooltip: {
+              show: false,
+            },
+            type: "pictorialBar",
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#fff",
+              color: "#26ec10", // 顶部方块的颜色
+            },
+            symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
+            symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
+            symbolOffset: ["10", "-4"], // 控制顶部放行 左右和上下
+            symbolRotate: -16,
+            symbolPosition: "end",
+            data: sideData1,
+            z: 3,
+          },
+        ],
+      };
+
+      myChart.setOption(option, true);
+    },
+  },
+  mounted() {
+    this.defineEcharts("pdsssdh", this.option1);
+    // this.defineEcharts("pdsydl", this.option2);
+    this.pdsydl();
+    // this.getEchart();
+    this.defineEcharts("pdstpt", this.option3);
+    // this.init();
+    this.getbing();
+  },
+};
+</script>
+<style scoped lang="less">
+//饼图底座（我也想给你们底座图片 可是我不知道咋给）
+.buttomCharts {
+  background: center top url("../../../assets/img/底盘.png") no-repeat;
+  background-size: 100% 100%;
+  height: 280px;
+  width: 800px;
+  margin-top: -290px;
+  margin-left: 12%;
+}
+
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  background-image: url(../../../assets/img/左遮罩.png), url(../../../assets/img/右遮罩.png);
+  margin-top: -800px;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+}
+
+.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;
+  }
+
+  .pdsssdh {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+      }
+
+      .active {
+        background: linear-gradient(
+          to right,
+          rgba(33, 76, 124, 0.3) 20%,
+          rgba(152, 207, 230, 0.3) 100%,
+          rgba(33, 76, 124, 0.3) 20%
+        );
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdsssdh {
+      width: 1155px;
+      height: 500px;
+      margin-top: 50px;
+    }
+  }
+
+  .pdsydl {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+      }
+
+      .active {
+        background: linear-gradient(
+          to right,
+          rgba(33, 76, 124, 0.3) 20%,
+          rgba(152, 207, 230, 0.3) 100%,
+          rgba(33, 76, 124, 0.3) 20%
+        );
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdsydl {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+    }
+  }
+
+  .pdstpt {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdstpt {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+        cursor: pointer;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .pdsjk {
+    position: relative;
+    margin-top: 130px;
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      margin-top: 50px;
+
+      #pdsjk {
+        width: 1156px;
+        height: 400px;
+
+        .title {
+          display: flex;
+          align-items: center;
+          color: #fff;
+          font-size: 20px;
+          margin-left: 50px;
+          margin-bottom: 20px;
+
+          span {
+            margin: 0 20px;
+            font-size: 30px;
+            color: #56f671;
+          }
+        }
+
+        /deep/.el-table tr {
+          background: #16253b;
+          color: #fff;
+          font-size: 30px;
+          height: 50px;
+
+          .cell {
+            line-height: 50px;
+          }
+        }
+
+        // 去掉eltable的hover效果
+        ::v-deep .el-table tbody tr:hover > td {
+          background-color: #0b679e !important;
+        }
+
+        //修改表头颜色
+        ::v-deep .has-gutter {
+          background-color: #1969a8;
+
+          th {
+            background-color: #1969a8;
+          }
+        }
+
+        //奇偶行颜色
+        ::v-deep .el-table .success-row {
+          background: #184167;
+        }
+
+        //去掉边框白线
+        ::v-deep .el-table__row > td {
+          border: none;
+        }
+
+        ::v-deep .el-table::before {
+          height: 0px;
+        }
+
+        /* 移除表头的下边框 */
+        ::v-deep .el-table__header th {
+          border-bottom: none;
+        }
+      }
+
+      #fhzb {
+        width: 1156px;
+        height: 500px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/lll/NYJCD/SCX1_20231205100740.vue b/.history/src/views/lll/NYJCD/SCX1_20231205100740.vue
new file mode 100644
index 0000000..d8644c3
--- /dev/null
+++ b/.history/src/views/lll/NYJCD/SCX1_20231205100740.vue
@@ -0,0 +1,2210 @@
+<template>
+  <div class="box">
+    <div class="left">
+      <img class="title" :src="src" />
+      <div class="pdsssdh">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线实时负荷</p> -->
+
+          <p>{{ $route.query.type }}实时电荷</p>
+        </div>
+        <div class="data">
+          <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+            >年</span
+          >
+          <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+            >月</span
+          >
+          <span :class="res == '日' ? 'active' : ''" @click="res = '日'"
+            >日</span
+          >
+        </div>
+        <div id="pdsssdh"></div>
+      </div>
+      <div class="pdsydl">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电量</p> -->
+          <p>{{ $route.query.type }}用电量</p>
+        </div>
+        <div class="data">
+          <span
+            :class="type == '总用电' ? 'active' : ''"
+            @click="type = '总用电'"
+            >总用电</span
+          >
+          <span
+            :class="type == '分时段' ? 'active' : ''"
+            @click="type = '分时段'"
+            >分时段</span
+          >
+        </div>
+        <div id="pdsydl"></div>
+      </div>
+      <div class="pdstpt">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电量对比</p> -->
+          <p>{{ $route.query.type }}用电量对比</p>
+        </div>
+        <div id="pdstpt">
+          <div class="data">
+            <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+              >年</span
+            >
+            <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+              >月</span
+            >
+            <span :class="res1 == '日' ? 'active' : ''" @click="res1 = '日'"
+              >日</span
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线监控</p> -->
+          <p>{{ $route.query.type }}监控</p>
+        </div>
+        <div class="chartBox">
+          <div id="pdsjk">
+            <div class="title">
+              <p>设备数量：</p>
+              <span>5</span>
+              <p>个</p>
+            </div>
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column label="序号" align="center">
+                <template slot-scope="scope">
+                  {{ scope.$index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="date1"
+                label="生产工艺名称"
+                align="center"
+                width="300px"
+              >
+              </el-table-column>
+              <el-table-column prop="date2" label="实时电荷" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58ff70"> {{ scope.row.date2 }}</span
+                  ><span>kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="今日用电量" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58caff"> {{ scope.row.date3 }}</span
+                  ><span>kWh</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date2" label="设备状态" align="center"
+                ><template slot-scope="scope">
+                  <span v-if="scope.row.date4"
+                    ><img src="../../../assets/KDFH/tongguo.png"
+                  /></span>
+                  <span v-else
+                    ><img src="../../../assets/KDFH/jinggao.png"
+                  /></span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线监控</p> -->
+          <p>负荷占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="fhzb"></div>
+          <!-- 饼图下面的底座 -->
+          <div class="buttomCharts"></div>
+        </div>
+      </div>
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电排名</p> -->
+          <p>{{ $route.query.type }}用电排名</p>
+        </div>
+        <div class="chartBox">
+          <div id="pdsjk">
+            <el-table
+              :data="tableData1"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              :header-cell-style="getHeaderCellStyle"
+            >
+              <el-table-column label="序号" align="center">
+                <template slot-scope="scope">
+                  {{ scope.$index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="date1"
+                label="配电室名称"
+                align="center"
+                width="300px"
+              >
+              </el-table-column>
+              <el-table-column prop="date2" label="用电量" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58caff"> {{ scope.row.date2 }}</span
+                  ><span>kWh</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import highcharts from "highcharts";
+export default {
+  data() {
+    return {
+      res: "月",
+      res1: "月",
+      type: "总用电",
+      src: "",
+      option1: {
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:KW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 500,
+          interval: 100, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [200, 300, 500, 400, 334],
+            itemStyle: {
+              normal: {
+                color: "#00FF00",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21FF55", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      },
+      //   option2: {
+      //     legend: {
+      //       data: [
+      //         { icon: "rect", name: "昨日" },
+      //         { icon: "rect", name: "今日" },
+      //       ],
+      //       textStyle: {
+      //         color: "#fff",
+      //         fontSize: "20px",
+      //       },
+      //     },
+      //     xAxis: {
+      //       type: "category",
+      //       data: ["1月", "2月", "3月", "4月", "5月"],
+      //       axisLabel: {
+      //         show: true,
+      //         textStyle: {
+      //           color: "#fff",
+      //           fontSize: 20,
+      //         },
+      //         interval: 0, //代表显示所有x轴标签显示
+      //       },
+      //     },
+      //     yAxis: {
+      //       type: "value",
+      //       name: "单位:kWh",
+      //       nameTextStyle: {
+      //         color: "#fff",
+      //         fontSize: 20,
+      //         padding: 10,
+      //       },
+      //       min: 0,
+      //       max: 500,
+      //       interval: 100, // 指定刻度间隔
+      //       axisLabel: {
+      //         show: true,
+      //         textStyle: {
+      //           color: "#fff",
+      //           fontSize: 20,
+      //         },
+      //       },
+      //     },
+      //     grid: {
+      //       // 让图表占满容器
+      //       //   top: "5%",
+      //       left: "8%",
+      //       right: "5%",
+      //       bottom: "8%",
+      //     },
+      //     series: [
+      //       {
+      //         type: "bar",
+      //         name: "昨日",
+      //         data: [200, 300, 500, 400, 334],
+      //         itemStyle: {
+      //           normal: {
+      //             color: "#11C3FF",
+      //             lineStyle: {
+      //               width: 5, //折线宽度
+      //               color: "#11C3FF", //折线颜色
+      //             },
+      //           },
+      //         },
+      //       },
+      //       {
+      //         type: "bar",
+      //         name: "今日",
+      //         data: [200, 300, 500, 400, 334],
+      //         itemStyle: {
+      //           normal: {
+      //             color: "#09E83E",
+      //             lineStyle: {
+      //               width: 5, //折线宽度
+      //               color: "#09E83E", //折线颜色
+      //             },
+      //           },
+      //         },
+      //       },
+      //     ],
+      //   },
+      option3: {
+        legend: {
+          data: [
+            { icon: "rect", name: "昨日" },
+            { icon: "rect", name: "今日" },
+          ],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          boundaryGap: [0, 0.01],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: ["生料磨", "生料收尘", "篦冷机", "熟料收尘", "回转窑"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        series: [
+          {
+            name: "昨日",
+            type: "bar",
+            data: [45, 55, 17, 60, 12],
+            itemStyle: {
+              color: "#3AF0FF", //折线颜色
+            },
+          },
+          {
+            name: "今日",
+            type: "bar",
+            data: [65, 65, 36, 19, 30],
+            itemStyle: {
+              color: "#5BFAB1", //折线颜色
+            },
+          },
+        ],
+      },
+      tableData: [
+        {
+          date1: "回转窑",
+          date2: "20.34",
+          date3: "20.34",
+          date4: true,
+        },
+        {
+          date1: "熟料收尘",
+          date2: "17.42",
+          date3: "17.42",
+          date4: true,
+        },
+        {
+          date1: "篦冷机",
+          date2: "12.22",
+          date3: "12.22",
+          date4: true,
+        },
+        {
+          date1: "生料收尘",
+          date2: "19.19",
+          date3: "19.19",
+          date4: false,
+        },
+      ],
+      tableData1: [
+        {
+          date1: "总降电力室",
+          date2: "20.34",
+        },
+        {
+          date1: "矿山电力室",
+          date2: "17.42",
+        },
+        {
+          date1: "原材料电力室",
+          date2: "12.22",
+        },
+        {
+          date1: "一线生料磨电力室",
+          date2: "19.19",
+        },
+        {
+          date1: "二线生料磨电力室",
+          date2: "17.42",
+        },
+        {
+          date1: "窑尾电力室",
+          date2: "12.22",
+        },
+      ],
+      optionData: [
+        {
+          name: "破碎系统",
+          value: 38,
+          itemStyle: {
+            color: "rgba(1, 224, 239,0.9)",
+          },
+        },
+        {
+          name: "生料系统", //名称
+          value: 41, //值
+          itemStyle: {
+            //颜色
+            color: "rgba(26, 166, 228,0.9)",
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 21,
+          itemStyle: {
+            color: "rgba(81, 244, 193,0.9)",
+          },
+        },
+      ],
+      option: {},
+    };
+  },
+  watch: {
+    // 监听,当路由发生变化的时候执行
+    $route: {
+      // $route可以用引号，也可以不用引号
+      handler(to, from) {
+        this.src = require(`../../../assets/img/标题/能源监测-电-${this.$route.query.type}.png`);
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    },
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    //配电室用电量  3d
+    pdsydl() {
+      let xaxisData = ["1月", "2月", "3月", "4月", "5月"];
+      let yaxisData = [90, 80, 100, 70, 65];
+      let yaxisData2 = [60, 56, 34, 69, 79];
+
+      //拿到最大值
+      const maxValue = Math.max(...yaxisData);
+      const maxValue2 = Math.max(...yaxisData2);
+
+      const offsetX = 15;
+      const offsetY = 5;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          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);
+
+      let option = {
+        legend: {
+          data: [
+            { icon: "rect", name: "昨日" },
+            { icon: "rect", name: "今日" },
+          ],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   backgroundColor: "rgba(255,255,255,0.75)",
+        //   extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
+        //   textStyle: {
+        //     fontSize: 20,
+        //     color: "#000",
+        //   },
+        //   formatter: (params, ticket, callback) => {
+        //     const item = params[1];
+        //     return item.name + " : " + item.value + " 个";
+        //   },
+        // },
+        grid: {
+          left: "1%",
+          right: "0%",
+          top: "16%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLine: {
+            show: true,
+            // lineStyle: {
+            //   width: 1,
+            // },
+          },
+          axisTick: {
+            show: true,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#FFFFFF",
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:kWh",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+          },
+          splitLine: {
+            show: true,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#FFFFFF",
+          },
+        },
+        series: [
+          {
+            type: "bar",
+            itemStyle: {
+              color: "transparent",
+            },
+            data: yaxisData,
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                formatter: (e) => {
+                  return e.value === maxValue ? e.value : "";
+                },
+                fontSize: 20,
+                color: "#02C262",
+                offset: [0, -15],
+              },
+            },
+          },
+          {
+            type: "bar",
+            itemStyle: {
+              color: "transparent",
+            },
+            data: yaxisData2,
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                formatter: (e) => {
+                  return e.value === maxValue2 ? e.value : "";
+                },
+                fontSize: 20,
+                color: "#3286FF",
+                offset: [0, -15],
+              },
+            },
+          },
+
+          {
+            type: "custom",
+            name: "今日",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              const xAxisPoint = api.coord([api.value(0), 0]);
+              const distance = 50;
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#10C6FF",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#377DFF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#4464FF",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0673D5",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#0B68D5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#115DD5",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: "#0964FF",
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "昨日",
+            barCategoryGap: "20%",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#08E83C",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#1FE77D",
+                        },
+                        {
+                          offset: 1,
+                          color: "#38E7C5",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C25D",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#05C269",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0BC27B",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: "#05E861",
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+
+      this.defineEcharts("pdsydl", option);
+    },
+    // //初始化构建
+    // init() {
+    //   //构建3d饼状图
+    //   let myChart = this.$echarts.init(document.getElementById("fhzb"));
+    //   // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
+    //   this.option = this.getPie3D(this.optionData, 0.8);
+    //   //将配置项设置进去
+    //   myChart.setOption(this.option);
+    //   //鼠标移动上去特效效果
+    //   this.bindListen(myChart);
+    // },
+    // //配置构建 pieData 饼图数据 internalDiameterRatio:透明的空心占比
+    // getPie3D(pieData, internalDiameterRatio) {
+    //   let that = this;
+    //   let series = [];
+    //   let sumValue = 0;
+    //   let startValue = 0;
+    //   let endValue = 0;
+    //   let legendData = [];
+    //   let legendBfb = [];
+    //   let k = 1 - internalDiameterRatio;
+    //   pieData.sort((a, b) => {
+    //     return b.value - a.value;
+    //   });
+    //   // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
+    //   for (let i = 0; i < pieData.length; i++) {
+    //     sumValue += pieData[i].value;
+    //     let seriesItem = {
+    //       //系统名称
+    //       name:
+    //         typeof pieData[i].name === "undefined"
+    //           ? `series${i}`
+    //           : pieData[i].name,
+    //       type: "surface",
+    //       //是否为参数曲面（是）
+    //       parametric: true,
+    //       //曲面图网格线（否）上面一根一根的
+    //       wireframe: {
+    //         show: false,
+    //       },
+    //       pieData: pieData[i],
+    //       pieStatus: {
+    //         selected: false,
+    //         hovered: false,
+    //         k: k,
+    //       },
+    //       //设置饼图在容器中的位置(目前没发现啥用)
+    //       center: ["80%", "100%"],
+    //       radius: "60%",
+    //     };
+    //     //曲面的颜色、不透明度等样式。
+    //     if (typeof pieData[i].itemStyle != "undefined") {
+    //       let itemStyle = {};
+    //       typeof pieData[i].itemStyle.color != "undefined"
+    //         ? (itemStyle.color = pieData[i].itemStyle.color)
+    //         : null;
+    //       typeof pieData[i].itemStyle.opacity != "undefined"
+    //         ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+    //         : null;
+    //       seriesItem.itemStyle = itemStyle;
+    //     }
+    //     series.push(seriesItem);
+    //   }
+    //   // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+    //   // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+    //   legendData = [];
+    //   legendBfb = [];
+    //   for (let i = 0; i < series.length; i++) {
+    //     endValue = startValue + series[i].pieData.value;
+    //     series[i].pieData.startRatio = startValue / sumValue;
+    //     series[i].pieData.endRatio = endValue / sumValue;
+    //     series[i].parametricEquation = that.getParametricEquation(
+    //       series[i].pieData.startRatio,
+    //       series[i].pieData.endRatio,
+    //       false,
+    //       false,
+    //       k,
+    //       series[i].pieData.value
+    //     );
+
+    //     startValue = endValue;
+    //     let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
+    //     legendData.push({
+    //       name: series[i].name,
+    //       value: bfb,
+    //     });
+    //     legendBfb.push({
+    //       name: series[i].name,
+    //       value: bfb,
+    //     });
+    //   }
+
+    //   //(第二个参数可以设置你这个环形的高低程度)
+    //   let boxHeight = this.getHeight3D(series, 15); //通过传参设定3d饼/环的高度
+    //   // 准备待返回的配置项，把准备好的 legendData、series 传入。
+    //   let option = {
+    //     //移动上去提示的文本内容(我没来得及改 你们可以根据需求改)
+    //     tooltip: {
+    //       formatter: (params) => {
+    //         if (
+    //           params.seriesName !== "mouseoutSeries" &&
+    //           params.seriesName !== "pie2d"
+    //         ) {
+    //           let bfb = (
+    //             (this.option.series[params.seriesIndex].pieData.endRatio -
+    //               this.option.series[params.seriesIndex].pieData.startRatio) *
+    //             100
+    //           ).toFixed(2);
+    //           return (
+    //             `${params.seriesName}<br/>` +
+    //             `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>` +
+    //             `${bfb}%`
+    //           );
+    //         }
+    //       },
+    //     },
+    //     label: {
+    //       // normal: {
+    //       //   show: true,
+    //       //   position: "right",
+    //       //   formatter: "{b} \n{c} {d}%",
+    //       // },
+
+    //       normal: {
+    //         show: true,
+    //         color: "#fff",
+    //         position: "right",
+    //         // distance:-10,
+    //         offset: [0, 3],
+    //         formatter: [
+    //           "{d|{d}%}",
+    //           "————",
+    //           //   '{c|{c}}{b|台}',
+    //           "{b|{b}}",
+    //         ].join("\n"), // 用\n来换行
+    //         rich: {
+    //           b: {
+    //             lineHeight: 25,
+    //             align: "left",
+    //             color: "#fff",
+    //           },
+    //           c: {
+    //             fontSize: 22,
+    //             // color: '#fff',
+    //             textShadowColor: "#1c90a6",
+    //             textShadowOffsetX: 0,
+    //             textShadowOffsetY: 2,
+    //             textShadowBlur: 5,
+    //             color: "#fff",
+    //           },
+    //           d: {
+    //             color: "#fff",
+    //             align: "left",
+    //           },
+    //         },
+    //       },
+    //     },
+    //     labelLine: {
+    //       // normal: {
+    //       //   show: true,
+    //       //   lineStyle: {
+    //       //     color: "#7BC0CB",
+    //       //   },
+    //       //   length: 0,
+    //       //   length2: 100000,
+    //       // },
+
+    //       normal: {
+    //         show: true,
+    //         length2: 30,
+    //         lineStyle: {
+    //           width: 1,
+    //           color: "#fff",
+    //         },
+    //       },
+    //     },
+
+    //     //这个可以变形
+    //     xAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     yAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     zAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     //此处是修改样式的重点
+    //     grid3D: {
+    //       show: false,
+    //       boxHeight: boxHeight, //圆环的高度
+    //       //这是饼图的位置
+    //       top: "-20.5%",
+    //       left: "-4%",
+    //       viewControl: {
+    //         //3d效果可以放大、旋转等，请自己去查看官方配置
+    //         alpha: 25, //角度(这个很重要 调节角度的)
+    //         distance: 160, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+    //         rotateSensitivity: 0, //设置为0无法旋转
+    //         zoomSensitivity: 0, //设置为0无法缩放
+    //         panSensitivity: 0, //设置为0无法平移
+    //         autoRotate: false, //自动旋转
+    //       },
+    //     },
+    //     series: series,
+    //   };
+    //   return option;
+    // },
+    //获取3d丙图的最高扇区的高度
+    // getHeight3D(series, height) {
+    //   series.sort((a, b) => {
+    //     return b.pieData.value - a.pieData.value;
+    //   });
+    //   return (height * 25) / series[0].pieData.value;
+    // },
+    // // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    // getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+    //   // 计算
+    //   let midRatio = (startRatio + endRatio) / 2;
+    //   let startRadian = startRatio * Math.PI * 2;
+    //   let endRadian = endRatio * Math.PI * 2;
+    //   let midRadian = midRatio * Math.PI * 2;
+    //   // 如果只有一个扇形，则不实现选中效果。
+    //   if (startRatio === 0 && endRatio === 1) {
+    //     isSelected = false;
+    //   }
+    //   // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+    //   k = typeof k !== "undefined" ? k : 1 / 3;
+    //   // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+    //   let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+    //   let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+    //   // 计算高亮效果的放大比例（未高亮，则比例为 1）
+    //   let hoverRate = isHovered ? 1.05 : 1;
+    //   // 返回曲面参数方程
+    //   return {
+    //     u: {
+    //       min: -Math.PI,
+    //       max: Math.PI * 3,
+    //       step: Math.PI / 32,
+    //     },
+    //     v: {
+    //       min: 0,
+    //       max: Math.PI * 2,
+    //       step: Math.PI / 20,
+    //     },
+    //     x: function (u, v) {
+    //       if (u < startRadian) {
+    //         return (
+    //           offsetX +
+    //           Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       if (u > endRadian) {
+    //         return (
+    //           offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+    //     },
+    //     y: function (u, v) {
+    //       if (u < startRadian) {
+    //         return (
+    //           offsetY +
+    //           Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       if (u > endRadian) {
+    //         return (
+    //           offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+    //     },
+    //     z: function (u, v) {
+    //       if (u < -Math.PI * 0.5) {
+    //         return Math.sin(u);
+    //       }
+    //       if (u > Math.PI * 2.5) {
+    //         return Math.sin(u) * h * 0.1;
+    //       }
+    //       return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+    //     },
+    //   };
+    // },
+    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    bindListen(myChart) {
+      let that = this;
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on("click", function (params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        let isSelected =
+          !that.option.series[params.seriesIndex].pieStatus.selected;
+        let isHovered =
+          that.option.series[params.seriesIndex].pieStatus.hovered;
+        let k = that.option.series[params.seriesIndex].pieStatus.k;
+        let startRatio =
+          that.option.series[params.seriesIndex].pieData.startRatio;
+        let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation =
+            that.getParametricEquation(
+              that.option.series[selectedIndex].pieData.startRatio,
+              that.option.series[selectedIndex].pieData.endRatio,
+              false,
+              false,
+              k,
+              that.option.series[selectedIndex].pieData.value
+            );
+          that.option.series[selectedIndex].pieStatus.selected = false;
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation =
+          that.getParametricEquation(
+            startRatio,
+            endRatio,
+            isSelected,
+            isHovered,
+            k,
+            that.option.series[params.seriesIndex].pieData.value
+          );
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? (selectedIndex = params.seriesIndex) : null;
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option);
+      });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", function (params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return;
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio;
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio;
+            k = that.option.series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation =
+              that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[hoveredIndex].pieData.value
+              );
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "pie2d"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              that.option.series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              that.option.series[params.seriesIndex].pieData.startRatio;
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
+            k = that.option.series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation =
+              that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[params.seriesIndex].pieData.value + 5
+              );
+            that.option.series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", function () {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = that.option.series[hoveredIndex].pieStatus.k;
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio;
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation =
+            that.getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              that.option.series[hoveredIndex].pieData.value
+            );
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option);
+      });
+    },
+    //这是一个自定义计算的方法
+    fomatFloat(num, n) {
+      var f = parseFloat(num);
+      if (isNaN(f)) {
+        return false;
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
+      var s = f.toString();
+      var rs = s.indexOf(".");
+      //判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length;
+        s += ".";
+      }
+      while (s.length <= rs + n) {
+        s += "0";
+      }
+      return s;
+    },
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 14,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["40%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          color:"#",
+          position: "outside",
+          formatter: (params) => {
+            var total = 0;
+            optionsData.forEach((item, index) => {
+              console.log(item.value);
+              total += item.value;
+            });
+            console.log(total);
+            let percent = ((params.value / total) * 100).toFixed(2);
+            console.log(params);
+            return (
+              `{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+            },
+            colors: {
+              fontSize: 30,
+              color:optionsData[0].itemStyle.color,
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("fhzb", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+    getEchart() {
+      var chartDom = document.getElementById("pdsydl");
+      var myChart = echarts.init(chartDom);
+      var option;
+      const sideData = [220, 182, 191, 234, 290];
+      const sideData1 = [100, 110, 120, 134, 190];
+
+      option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: [
+            {
+              name: "今日",
+              textStyle: {
+                color: "white",
+              },
+            },
+            {
+              name: "昨日",
+              textStyle: {
+                color: "white",
+              },
+            },
+          ],
+        },
+        grid: {
+          top: "10%",
+          bottom: "62%",
+          right: "15%",
+          containLabel: true,
+        },
+        toolbox: {
+          show: true,
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: "category",
+            splitLine: {
+              show: false,
+            },
+            data: ["1月", "2月", "3月", "4月", "5月"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#fff", //X轴文字颜色
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#fff", //X轴文字颜色
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            tooltip: {
+              show: false,
+            },
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#2d8cf0", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#2d8cf0", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#2d8cf0", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: sideData,
+            barGap: 10,
+          },
+          {
+            name: "昨日",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#09337C", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#0761C0", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#0575DE", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            barGap: 0,
+            data: sideData,
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "white",
+                fontSize: 10,
+              },
+            },
+          },
+          {
+            name: "昨日",
+            tooltip: {
+              show: false,
+            },
+            type: "pictorialBar",
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#0571D5",
+              color: "#288ef3", // 控制顶部方形的颜色
+            },
+            symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
+            symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
+            symbolOffset: ["-10", "-4"], // 控制顶部放行 左右和上下
+            symbolRotate: -16,
+            symbolPosition: "end",
+            data: sideData,
+            z: 3,
+          },
+          {
+            name: "今日",
+            tooltip: {
+              show: false,
+            },
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#15a00f", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#11ad0a", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#19c213", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: sideData1,
+            barGap: 0,
+          },
+          {
+            name: "今日",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#26ec10", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#26ec10", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#26ec10", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            barGap: 0,
+            data: sideData1,
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "white",
+                fontSize: 10,
+              },
+            },
+          },
+          {
+            name: "今日",
+            tooltip: {
+              show: false,
+            },
+            type: "pictorialBar",
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#fff",
+              color: "#26ec10", // 顶部方块的颜色
+            },
+            symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
+            symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
+            symbolOffset: ["10", "-4"], // 控制顶部放行 左右和上下
+            symbolRotate: -16,
+            symbolPosition: "end",
+            data: sideData1,
+            z: 3,
+          },
+        ],
+      };
+
+      myChart.setOption(option, true);
+    },
+  },
+  mounted() {
+    this.defineEcharts("pdsssdh", this.option1);
+    // this.defineEcharts("pdsydl", this.option2);
+    this.pdsydl();
+    // this.getEchart();
+    this.defineEcharts("pdstpt", this.option3);
+    // this.init();
+    this.getbing();
+  },
+};
+</script>
+<style scoped lang="less">
+//饼图底座（我也想给你们底座图片 可是我不知道咋给）
+.buttomCharts {
+  background: center top url("../../../assets/img/底盘.png") no-repeat;
+  background-size: 100% 100%;
+  height: 280px;
+  width: 800px;
+  margin-top: -290px;
+  margin-left: 12%;
+}
+
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  background-image: url(../../../assets/img/左遮罩.png), url(../../../assets/img/右遮罩.png);
+  margin-top: -800px;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+}
+
+.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;
+  }
+
+  .pdsssdh {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+      }
+
+      .active {
+        background: linear-gradient(
+          to right,
+          rgba(33, 76, 124, 0.3) 20%,
+          rgba(152, 207, 230, 0.3) 100%,
+          rgba(33, 76, 124, 0.3) 20%
+        );
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdsssdh {
+      width: 1155px;
+      height: 500px;
+      margin-top: 50px;
+    }
+  }
+
+  .pdsydl {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+      }
+
+      .active {
+        background: linear-gradient(
+          to right,
+          rgba(33, 76, 124, 0.3) 20%,
+          rgba(152, 207, 230, 0.3) 100%,
+          rgba(33, 76, 124, 0.3) 20%
+        );
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdsydl {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+    }
+  }
+
+  .pdstpt {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdstpt {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+        cursor: pointer;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .pdsjk {
+    position: relative;
+    margin-top: 130px;
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      margin-top: 50px;
+
+      #pdsjk {
+        width: 1156px;
+        height: 400px;
+
+        .title {
+          display: flex;
+          align-items: center;
+          color: #fff;
+          font-size: 20px;
+          margin-left: 50px;
+          margin-bottom: 20px;
+
+          span {
+            margin: 0 20px;
+            font-size: 30px;
+            color: #56f671;
+          }
+        }
+
+        /deep/.el-table tr {
+          background: #16253b;
+          color: #fff;
+          font-size: 30px;
+          height: 50px;
+
+          .cell {
+            line-height: 50px;
+          }
+        }
+
+        // 去掉eltable的hover效果
+        ::v-deep .el-table tbody tr:hover > td {
+          background-color: #0b679e !important;
+        }
+
+        //修改表头颜色
+        ::v-deep .has-gutter {
+          background-color: #1969a8;
+
+          th {
+            background-color: #1969a8;
+          }
+        }
+
+        //奇偶行颜色
+        ::v-deep .el-table .success-row {
+          background: #184167;
+        }
+
+        //去掉边框白线
+        ::v-deep .el-table__row > td {
+          border: none;
+        }
+
+        ::v-deep .el-table::before {
+          height: 0px;
+        }
+
+        /* 移除表头的下边框 */
+        ::v-deep .el-table__header th {
+          border-bottom: none;
+        }
+      }
+
+      #fhzb {
+        width: 1156px;
+        height: 500px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/lll/NYJCD/SCX1_20231205100832.vue b/.history/src/views/lll/NYJCD/SCX1_20231205100832.vue
new file mode 100644
index 0000000..33d576e
--- /dev/null
+++ b/.history/src/views/lll/NYJCD/SCX1_20231205100832.vue
@@ -0,0 +1,2210 @@
+<template>
+  <div class="box">
+    <div class="left">
+      <img class="title" :src="src" />
+      <div class="pdsssdh">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线实时负荷</p> -->
+
+          <p>{{ $route.query.type }}实时电荷</p>
+        </div>
+        <div class="data">
+          <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+            >年</span
+          >
+          <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+            >月</span
+          >
+          <span :class="res == '日' ? 'active' : ''" @click="res = '日'"
+            >日</span
+          >
+        </div>
+        <div id="pdsssdh"></div>
+      </div>
+      <div class="pdsydl">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电量</p> -->
+          <p>{{ $route.query.type }}用电量</p>
+        </div>
+        <div class="data">
+          <span
+            :class="type == '总用电' ? 'active' : ''"
+            @click="type = '总用电'"
+            >总用电</span
+          >
+          <span
+            :class="type == '分时段' ? 'active' : ''"
+            @click="type = '分时段'"
+            >分时段</span
+          >
+        </div>
+        <div id="pdsydl"></div>
+      </div>
+      <div class="pdstpt">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电量对比</p> -->
+          <p>{{ $route.query.type }}用电量对比</p>
+        </div>
+        <div id="pdstpt">
+          <div class="data">
+            <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+              >年</span
+            >
+            <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+              >月</span
+            >
+            <span :class="res1 == '日' ? 'active' : ''" @click="res1 = '日'"
+              >日</span
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线监控</p> -->
+          <p>{{ $route.query.type }}监控</p>
+        </div>
+        <div class="chartBox">
+          <div id="pdsjk">
+            <div class="title">
+              <p>设备数量：</p>
+              <span>5</span>
+              <p>个</p>
+            </div>
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column label="序号" align="center">
+                <template slot-scope="scope">
+                  {{ scope.$index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="date1"
+                label="生产工艺名称"
+                align="center"
+                width="300px"
+              >
+              </el-table-column>
+              <el-table-column prop="date2" label="实时电荷" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58ff70"> {{ scope.row.date2 }}</span
+                  ><span>kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="今日用电量" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58caff"> {{ scope.row.date3 }}</span
+                  ><span>kWh</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date2" label="设备状态" align="center"
+                ><template slot-scope="scope">
+                  <span v-if="scope.row.date4"
+                    ><img src="../../../assets/KDFH/tongguo.png"
+                  /></span>
+                  <span v-else
+                    ><img src="../../../assets/KDFH/jinggao.png"
+                  /></span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线监控</p> -->
+          <p>负荷占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="fhzb"></div>
+          <!-- 饼图下面的底座 -->
+          <div class="buttomCharts"></div>
+        </div>
+      </div>
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电排名</p> -->
+          <p>{{ $route.query.type }}用电排名</p>
+        </div>
+        <div class="chartBox">
+          <div id="pdsjk">
+            <el-table
+              :data="tableData1"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              :header-cell-style="getHeaderCellStyle"
+            >
+              <el-table-column label="序号" align="center">
+                <template slot-scope="scope">
+                  {{ scope.$index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="date1"
+                label="配电室名称"
+                align="center"
+                width="300px"
+              >
+              </el-table-column>
+              <el-table-column prop="date2" label="用电量" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58caff"> {{ scope.row.date2 }}</span
+                  ><span>kWh</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import highcharts from "highcharts";
+export default {
+  data() {
+    return {
+      res: "月",
+      res1: "月",
+      type: "总用电",
+      src: "",
+      option1: {
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:KW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 500,
+          interval: 100, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [200, 300, 500, 400, 334],
+            itemStyle: {
+              normal: {
+                color: "#00FF00",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21FF55", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      },
+      //   option2: {
+      //     legend: {
+      //       data: [
+      //         { icon: "rect", name: "昨日" },
+      //         { icon: "rect", name: "今日" },
+      //       ],
+      //       textStyle: {
+      //         color: "#fff",
+      //         fontSize: "20px",
+      //       },
+      //     },
+      //     xAxis: {
+      //       type: "category",
+      //       data: ["1月", "2月", "3月", "4月", "5月"],
+      //       axisLabel: {
+      //         show: true,
+      //         textStyle: {
+      //           color: "#fff",
+      //           fontSize: 20,
+      //         },
+      //         interval: 0, //代表显示所有x轴标签显示
+      //       },
+      //     },
+      //     yAxis: {
+      //       type: "value",
+      //       name: "单位:kWh",
+      //       nameTextStyle: {
+      //         color: "#fff",
+      //         fontSize: 20,
+      //         padding: 10,
+      //       },
+      //       min: 0,
+      //       max: 500,
+      //       interval: 100, // 指定刻度间隔
+      //       axisLabel: {
+      //         show: true,
+      //         textStyle: {
+      //           color: "#fff",
+      //           fontSize: 20,
+      //         },
+      //       },
+      //     },
+      //     grid: {
+      //       // 让图表占满容器
+      //       //   top: "5%",
+      //       left: "8%",
+      //       right: "5%",
+      //       bottom: "8%",
+      //     },
+      //     series: [
+      //       {
+      //         type: "bar",
+      //         name: "昨日",
+      //         data: [200, 300, 500, 400, 334],
+      //         itemStyle: {
+      //           normal: {
+      //             color: "#11C3FF",
+      //             lineStyle: {
+      //               width: 5, //折线宽度
+      //               color: "#11C3FF", //折线颜色
+      //             },
+      //           },
+      //         },
+      //       },
+      //       {
+      //         type: "bar",
+      //         name: "今日",
+      //         data: [200, 300, 500, 400, 334],
+      //         itemStyle: {
+      //           normal: {
+      //             color: "#09E83E",
+      //             lineStyle: {
+      //               width: 5, //折线宽度
+      //               color: "#09E83E", //折线颜色
+      //             },
+      //           },
+      //         },
+      //       },
+      //     ],
+      //   },
+      option3: {
+        legend: {
+          data: [
+            { icon: "rect", name: "昨日" },
+            { icon: "rect", name: "今日" },
+          ],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          boundaryGap: [0, 0.01],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: ["生料磨", "生料收尘", "篦冷机", "熟料收尘", "回转窑"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        series: [
+          {
+            name: "昨日",
+            type: "bar",
+            data: [45, 55, 17, 60, 12],
+            itemStyle: {
+              color: "#3AF0FF", //折线颜色
+            },
+          },
+          {
+            name: "今日",
+            type: "bar",
+            data: [65, 65, 36, 19, 30],
+            itemStyle: {
+              color: "#5BFAB1", //折线颜色
+            },
+          },
+        ],
+      },
+      tableData: [
+        {
+          date1: "回转窑",
+          date2: "20.34",
+          date3: "20.34",
+          date4: true,
+        },
+        {
+          date1: "熟料收尘",
+          date2: "17.42",
+          date3: "17.42",
+          date4: true,
+        },
+        {
+          date1: "篦冷机",
+          date2: "12.22",
+          date3: "12.22",
+          date4: true,
+        },
+        {
+          date1: "生料收尘",
+          date2: "19.19",
+          date3: "19.19",
+          date4: false,
+        },
+      ],
+      tableData1: [
+        {
+          date1: "总降电力室",
+          date2: "20.34",
+        },
+        {
+          date1: "矿山电力室",
+          date2: "17.42",
+        },
+        {
+          date1: "原材料电力室",
+          date2: "12.22",
+        },
+        {
+          date1: "一线生料磨电力室",
+          date2: "19.19",
+        },
+        {
+          date1: "二线生料磨电力室",
+          date2: "17.42",
+        },
+        {
+          date1: "窑尾电力室",
+          date2: "12.22",
+        },
+      ],
+      optionData: [
+        {
+          name: "破碎系统",
+          value: 38,
+          itemStyle: {
+            color: "rgba(1, 224, 239,0.9)",
+          },
+        },
+        {
+          name: "生料系统", //名称
+          value: 41, //值
+          itemStyle: {
+            //颜色
+            color: "rgba(26, 166, 228,0.9)",
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 21,
+          itemStyle: {
+            color: "rgba(81, 244, 193,0.9)",
+          },
+        },
+      ],
+      option: {},
+    };
+  },
+  watch: {
+    // 监听,当路由发生变化的时候执行
+    $route: {
+      // $route可以用引号，也可以不用引号
+      handler(to, from) {
+        this.src = require(`../../../assets/img/标题/能源监测-电-${this.$route.query.type}.png`);
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    },
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    //配电室用电量  3d
+    pdsydl() {
+      let xaxisData = ["1月", "2月", "3月", "4月", "5月"];
+      let yaxisData = [90, 80, 100, 70, 65];
+      let yaxisData2 = [60, 56, 34, 69, 79];
+
+      //拿到最大值
+      const maxValue = Math.max(...yaxisData);
+      const maxValue2 = Math.max(...yaxisData2);
+
+      const offsetX = 15;
+      const offsetY = 5;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          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);
+
+      let option = {
+        legend: {
+          data: [
+            { icon: "rect", name: "昨日" },
+            { icon: "rect", name: "今日" },
+          ],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   backgroundColor: "rgba(255,255,255,0.75)",
+        //   extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
+        //   textStyle: {
+        //     fontSize: 20,
+        //     color: "#000",
+        //   },
+        //   formatter: (params, ticket, callback) => {
+        //     const item = params[1];
+        //     return item.name + " : " + item.value + " 个";
+        //   },
+        // },
+        grid: {
+          left: "1%",
+          right: "0%",
+          top: "16%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLine: {
+            show: true,
+            // lineStyle: {
+            //   width: 1,
+            // },
+          },
+          axisTick: {
+            show: true,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#FFFFFF",
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:kWh",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+          },
+          splitLine: {
+            show: true,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#FFFFFF",
+          },
+        },
+        series: [
+          {
+            type: "bar",
+            itemStyle: {
+              color: "transparent",
+            },
+            data: yaxisData,
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                formatter: (e) => {
+                  return e.value === maxValue ? e.value : "";
+                },
+                fontSize: 20,
+                color: "#02C262",
+                offset: [0, -15],
+              },
+            },
+          },
+          {
+            type: "bar",
+            itemStyle: {
+              color: "transparent",
+            },
+            data: yaxisData2,
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                formatter: (e) => {
+                  return e.value === maxValue2 ? e.value : "";
+                },
+                fontSize: 20,
+                color: "#3286FF",
+                offset: [0, -15],
+              },
+            },
+          },
+
+          {
+            type: "custom",
+            name: "今日",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              const xAxisPoint = api.coord([api.value(0), 0]);
+              const distance = 50;
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#10C6FF",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#377DFF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#4464FF",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0673D5",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#0B68D5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#115DD5",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: "#0964FF",
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "昨日",
+            barCategoryGap: "20%",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#08E83C",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#1FE77D",
+                        },
+                        {
+                          offset: 1,
+                          color: "#38E7C5",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C25D",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#05C269",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0BC27B",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: "#05E861",
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+
+      this.defineEcharts("pdsydl", option);
+    },
+    // //初始化构建
+    // init() {
+    //   //构建3d饼状图
+    //   let myChart = this.$echarts.init(document.getElementById("fhzb"));
+    //   // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
+    //   this.option = this.getPie3D(this.optionData, 0.8);
+    //   //将配置项设置进去
+    //   myChart.setOption(this.option);
+    //   //鼠标移动上去特效效果
+    //   this.bindListen(myChart);
+    // },
+    // //配置构建 pieData 饼图数据 internalDiameterRatio:透明的空心占比
+    // getPie3D(pieData, internalDiameterRatio) {
+    //   let that = this;
+    //   let series = [];
+    //   let sumValue = 0;
+    //   let startValue = 0;
+    //   let endValue = 0;
+    //   let legendData = [];
+    //   let legendBfb = [];
+    //   let k = 1 - internalDiameterRatio;
+    //   pieData.sort((a, b) => {
+    //     return b.value - a.value;
+    //   });
+    //   // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
+    //   for (let i = 0; i < pieData.length; i++) {
+    //     sumValue += pieData[i].value;
+    //     let seriesItem = {
+    //       //系统名称
+    //       name:
+    //         typeof pieData[i].name === "undefined"
+    //           ? `series${i}`
+    //           : pieData[i].name,
+    //       type: "surface",
+    //       //是否为参数曲面（是）
+    //       parametric: true,
+    //       //曲面图网格线（否）上面一根一根的
+    //       wireframe: {
+    //         show: false,
+    //       },
+    //       pieData: pieData[i],
+    //       pieStatus: {
+    //         selected: false,
+    //         hovered: false,
+    //         k: k,
+    //       },
+    //       //设置饼图在容器中的位置(目前没发现啥用)
+    //       center: ["80%", "100%"],
+    //       radius: "60%",
+    //     };
+    //     //曲面的颜色、不透明度等样式。
+    //     if (typeof pieData[i].itemStyle != "undefined") {
+    //       let itemStyle = {};
+    //       typeof pieData[i].itemStyle.color != "undefined"
+    //         ? (itemStyle.color = pieData[i].itemStyle.color)
+    //         : null;
+    //       typeof pieData[i].itemStyle.opacity != "undefined"
+    //         ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+    //         : null;
+    //       seriesItem.itemStyle = itemStyle;
+    //     }
+    //     series.push(seriesItem);
+    //   }
+    //   // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+    //   // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+    //   legendData = [];
+    //   legendBfb = [];
+    //   for (let i = 0; i < series.length; i++) {
+    //     endValue = startValue + series[i].pieData.value;
+    //     series[i].pieData.startRatio = startValue / sumValue;
+    //     series[i].pieData.endRatio = endValue / sumValue;
+    //     series[i].parametricEquation = that.getParametricEquation(
+    //       series[i].pieData.startRatio,
+    //       series[i].pieData.endRatio,
+    //       false,
+    //       false,
+    //       k,
+    //       series[i].pieData.value
+    //     );
+
+    //     startValue = endValue;
+    //     let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
+    //     legendData.push({
+    //       name: series[i].name,
+    //       value: bfb,
+    //     });
+    //     legendBfb.push({
+    //       name: series[i].name,
+    //       value: bfb,
+    //     });
+    //   }
+
+    //   //(第二个参数可以设置你这个环形的高低程度)
+    //   let boxHeight = this.getHeight3D(series, 15); //通过传参设定3d饼/环的高度
+    //   // 准备待返回的配置项，把准备好的 legendData、series 传入。
+    //   let option = {
+    //     //移动上去提示的文本内容(我没来得及改 你们可以根据需求改)
+    //     tooltip: {
+    //       formatter: (params) => {
+    //         if (
+    //           params.seriesName !== "mouseoutSeries" &&
+    //           params.seriesName !== "pie2d"
+    //         ) {
+    //           let bfb = (
+    //             (this.option.series[params.seriesIndex].pieData.endRatio -
+    //               this.option.series[params.seriesIndex].pieData.startRatio) *
+    //             100
+    //           ).toFixed(2);
+    //           return (
+    //             `${params.seriesName}<br/>` +
+    //             `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>` +
+    //             `${bfb}%`
+    //           );
+    //         }
+    //       },
+    //     },
+    //     label: {
+    //       // normal: {
+    //       //   show: true,
+    //       //   position: "right",
+    //       //   formatter: "{b} \n{c} {d}%",
+    //       // },
+
+    //       normal: {
+    //         show: true,
+    //         color: "#fff",
+    //         position: "right",
+    //         // distance:-10,
+    //         offset: [0, 3],
+    //         formatter: [
+    //           "{d|{d}%}",
+    //           "————",
+    //           //   '{c|{c}}{b|台}',
+    //           "{b|{b}}",
+    //         ].join("\n"), // 用\n来换行
+    //         rich: {
+    //           b: {
+    //             lineHeight: 25,
+    //             align: "left",
+    //             color: "#fff",
+    //           },
+    //           c: {
+    //             fontSize: 22,
+    //             // color: '#fff',
+    //             textShadowColor: "#1c90a6",
+    //             textShadowOffsetX: 0,
+    //             textShadowOffsetY: 2,
+    //             textShadowBlur: 5,
+    //             color: "#fff",
+    //           },
+    //           d: {
+    //             color: "#fff",
+    //             align: "left",
+    //           },
+    //         },
+    //       },
+    //     },
+    //     labelLine: {
+    //       // normal: {
+    //       //   show: true,
+    //       //   lineStyle: {
+    //       //     color: "#7BC0CB",
+    //       //   },
+    //       //   length: 0,
+    //       //   length2: 100000,
+    //       // },
+
+    //       normal: {
+    //         show: true,
+    //         length2: 30,
+    //         lineStyle: {
+    //           width: 1,
+    //           color: "#fff",
+    //         },
+    //       },
+    //     },
+
+    //     //这个可以变形
+    //     xAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     yAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     zAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     //此处是修改样式的重点
+    //     grid3D: {
+    //       show: false,
+    //       boxHeight: boxHeight, //圆环的高度
+    //       //这是饼图的位置
+    //       top: "-20.5%",
+    //       left: "-4%",
+    //       viewControl: {
+    //         //3d效果可以放大、旋转等，请自己去查看官方配置
+    //         alpha: 25, //角度(这个很重要 调节角度的)
+    //         distance: 160, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+    //         rotateSensitivity: 0, //设置为0无法旋转
+    //         zoomSensitivity: 0, //设置为0无法缩放
+    //         panSensitivity: 0, //设置为0无法平移
+    //         autoRotate: false, //自动旋转
+    //       },
+    //     },
+    //     series: series,
+    //   };
+    //   return option;
+    // },
+    //获取3d丙图的最高扇区的高度
+    // getHeight3D(series, height) {
+    //   series.sort((a, b) => {
+    //     return b.pieData.value - a.pieData.value;
+    //   });
+    //   return (height * 25) / series[0].pieData.value;
+    // },
+    // // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    // getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+    //   // 计算
+    //   let midRatio = (startRatio + endRatio) / 2;
+    //   let startRadian = startRatio * Math.PI * 2;
+    //   let endRadian = endRatio * Math.PI * 2;
+    //   let midRadian = midRatio * Math.PI * 2;
+    //   // 如果只有一个扇形，则不实现选中效果。
+    //   if (startRatio === 0 && endRatio === 1) {
+    //     isSelected = false;
+    //   }
+    //   // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+    //   k = typeof k !== "undefined" ? k : 1 / 3;
+    //   // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+    //   let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+    //   let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+    //   // 计算高亮效果的放大比例（未高亮，则比例为 1）
+    //   let hoverRate = isHovered ? 1.05 : 1;
+    //   // 返回曲面参数方程
+    //   return {
+    //     u: {
+    //       min: -Math.PI,
+    //       max: Math.PI * 3,
+    //       step: Math.PI / 32,
+    //     },
+    //     v: {
+    //       min: 0,
+    //       max: Math.PI * 2,
+    //       step: Math.PI / 20,
+    //     },
+    //     x: function (u, v) {
+    //       if (u < startRadian) {
+    //         return (
+    //           offsetX +
+    //           Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       if (u > endRadian) {
+    //         return (
+    //           offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+    //     },
+    //     y: function (u, v) {
+    //       if (u < startRadian) {
+    //         return (
+    //           offsetY +
+    //           Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       if (u > endRadian) {
+    //         return (
+    //           offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+    //     },
+    //     z: function (u, v) {
+    //       if (u < -Math.PI * 0.5) {
+    //         return Math.sin(u);
+    //       }
+    //       if (u > Math.PI * 2.5) {
+    //         return Math.sin(u) * h * 0.1;
+    //       }
+    //       return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+    //     },
+    //   };
+    // },
+    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    bindListen(myChart) {
+      let that = this;
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on("click", function (params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        let isSelected =
+          !that.option.series[params.seriesIndex].pieStatus.selected;
+        let isHovered =
+          that.option.series[params.seriesIndex].pieStatus.hovered;
+        let k = that.option.series[params.seriesIndex].pieStatus.k;
+        let startRatio =
+          that.option.series[params.seriesIndex].pieData.startRatio;
+        let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation =
+            that.getParametricEquation(
+              that.option.series[selectedIndex].pieData.startRatio,
+              that.option.series[selectedIndex].pieData.endRatio,
+              false,
+              false,
+              k,
+              that.option.series[selectedIndex].pieData.value
+            );
+          that.option.series[selectedIndex].pieStatus.selected = false;
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation =
+          that.getParametricEquation(
+            startRatio,
+            endRatio,
+            isSelected,
+            isHovered,
+            k,
+            that.option.series[params.seriesIndex].pieData.value
+          );
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? (selectedIndex = params.seriesIndex) : null;
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option);
+      });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", function (params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return;
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio;
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio;
+            k = that.option.series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation =
+              that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[hoveredIndex].pieData.value
+              );
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "pie2d"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              that.option.series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              that.option.series[params.seriesIndex].pieData.startRatio;
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
+            k = that.option.series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation =
+              that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[params.seriesIndex].pieData.value + 5
+              );
+            that.option.series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", function () {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = that.option.series[hoveredIndex].pieStatus.k;
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio;
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation =
+            that.getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              that.option.series[hoveredIndex].pieData.value
+            );
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option);
+      });
+    },
+    //这是一个自定义计算的方法
+    fomatFloat(num, n) {
+      var f = parseFloat(num);
+      if (isNaN(f)) {
+        return false;
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
+      var s = f.toString();
+      var rs = s.indexOf(".");
+      //判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length;
+        s += ".";
+      }
+      while (s.length <= rs + n) {
+        s += "0";
+      }
+      return s;
+    },
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 14,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["20%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          color:"#",
+          position: "outside",
+          formatter: (params) => {
+            var total = 0;
+            optionsData.forEach((item, index) => {
+              console.log(item.value);
+              total += item.value;
+            });
+            console.log(total);
+            let percent = ((params.value / total) * 100).toFixed(2);
+            console.log(params);
+            return (
+              `{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+            },
+            colors: {
+              fontSize: 30,
+              color:optionsData[0].itemStyle.color,
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("fhzb", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+    getEchart() {
+      var chartDom = document.getElementById("pdsydl");
+      var myChart = echarts.init(chartDom);
+      var option;
+      const sideData = [220, 182, 191, 234, 290];
+      const sideData1 = [100, 110, 120, 134, 190];
+
+      option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: [
+            {
+              name: "今日",
+              textStyle: {
+                color: "white",
+              },
+            },
+            {
+              name: "昨日",
+              textStyle: {
+                color: "white",
+              },
+            },
+          ],
+        },
+        grid: {
+          top: "10%",
+          bottom: "62%",
+          right: "15%",
+          containLabel: true,
+        },
+        toolbox: {
+          show: true,
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: "category",
+            splitLine: {
+              show: false,
+            },
+            data: ["1月", "2月", "3月", "4月", "5月"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#fff", //X轴文字颜色
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#fff", //X轴文字颜色
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            tooltip: {
+              show: false,
+            },
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#2d8cf0", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#2d8cf0", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#2d8cf0", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: sideData,
+            barGap: 10,
+          },
+          {
+            name: "昨日",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#09337C", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#0761C0", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#0575DE", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            barGap: 0,
+            data: sideData,
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "white",
+                fontSize: 10,
+              },
+            },
+          },
+          {
+            name: "昨日",
+            tooltip: {
+              show: false,
+            },
+            type: "pictorialBar",
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#0571D5",
+              color: "#288ef3", // 控制顶部方形的颜色
+            },
+            symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
+            symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
+            symbolOffset: ["-10", "-4"], // 控制顶部放行 左右和上下
+            symbolRotate: -16,
+            symbolPosition: "end",
+            data: sideData,
+            z: 3,
+          },
+          {
+            name: "今日",
+            tooltip: {
+              show: false,
+            },
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#15a00f", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#11ad0a", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#19c213", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: sideData1,
+            barGap: 0,
+          },
+          {
+            name: "今日",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#26ec10", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#26ec10", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#26ec10", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            barGap: 0,
+            data: sideData1,
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "white",
+                fontSize: 10,
+              },
+            },
+          },
+          {
+            name: "今日",
+            tooltip: {
+              show: false,
+            },
+            type: "pictorialBar",
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#fff",
+              color: "#26ec10", // 顶部方块的颜色
+            },
+            symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
+            symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
+            symbolOffset: ["10", "-4"], // 控制顶部放行 左右和上下
+            symbolRotate: -16,
+            symbolPosition: "end",
+            data: sideData1,
+            z: 3,
+          },
+        ],
+      };
+
+      myChart.setOption(option, true);
+    },
+  },
+  mounted() {
+    this.defineEcharts("pdsssdh", this.option1);
+    // this.defineEcharts("pdsydl", this.option2);
+    this.pdsydl();
+    // this.getEchart();
+    this.defineEcharts("pdstpt", this.option3);
+    // this.init();
+    this.getbing();
+  },
+};
+</script>
+<style scoped lang="less">
+//饼图底座（我也想给你们底座图片 可是我不知道咋给）
+.buttomCharts {
+  background: center top url("../../../assets/img/底盘.png") no-repeat;
+  background-size: 100% 100%;
+  height: 280px;
+  width: 800px;
+  margin-top: -290px;
+  margin-left: 12%;
+}
+
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  background-image: url(../../../assets/img/左遮罩.png), url(../../../assets/img/右遮罩.png);
+  margin-top: -800px;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+}
+
+.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;
+  }
+
+  .pdsssdh {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+      }
+
+      .active {
+        background: linear-gradient(
+          to right,
+          rgba(33, 76, 124, 0.3) 20%,
+          rgba(152, 207, 230, 0.3) 100%,
+          rgba(33, 76, 124, 0.3) 20%
+        );
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdsssdh {
+      width: 1155px;
+      height: 500px;
+      margin-top: 50px;
+    }
+  }
+
+  .pdsydl {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+      }
+
+      .active {
+        background: linear-gradient(
+          to right,
+          rgba(33, 76, 124, 0.3) 20%,
+          rgba(152, 207, 230, 0.3) 100%,
+          rgba(33, 76, 124, 0.3) 20%
+        );
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdsydl {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+    }
+  }
+
+  .pdstpt {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdstpt {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+        cursor: pointer;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .pdsjk {
+    position: relative;
+    margin-top: 130px;
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      margin-top: 50px;
+
+      #pdsjk {
+        width: 1156px;
+        height: 400px;
+
+        .title {
+          display: flex;
+          align-items: center;
+          color: #fff;
+          font-size: 20px;
+          margin-left: 50px;
+          margin-bottom: 20px;
+
+          span {
+            margin: 0 20px;
+            font-size: 30px;
+            color: #56f671;
+          }
+        }
+
+        /deep/.el-table tr {
+          background: #16253b;
+          color: #fff;
+          font-size: 30px;
+          height: 50px;
+
+          .cell {
+            line-height: 50px;
+          }
+        }
+
+        // 去掉eltable的hover效果
+        ::v-deep .el-table tbody tr:hover > td {
+          background-color: #0b679e !important;
+        }
+
+        //修改表头颜色
+        ::v-deep .has-gutter {
+          background-color: #1969a8;
+
+          th {
+            background-color: #1969a8;
+          }
+        }
+
+        //奇偶行颜色
+        ::v-deep .el-table .success-row {
+          background: #184167;
+        }
+
+        //去掉边框白线
+        ::v-deep .el-table__row > td {
+          border: none;
+        }
+
+        ::v-deep .el-table::before {
+          height: 0px;
+        }
+
+        /* 移除表头的下边框 */
+        ::v-deep .el-table__header th {
+          border-bottom: none;
+        }
+      }
+
+      #fhzb {
+        width: 1156px;
+        height: 500px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/lll/NYJCD/SCX1_20231205100904.vue b/.history/src/views/lll/NYJCD/SCX1_20231205100904.vue
new file mode 100644
index 0000000..5ebf16a
--- /dev/null
+++ b/.history/src/views/lll/NYJCD/SCX1_20231205100904.vue
@@ -0,0 +1,2210 @@
+<template>
+  <div class="box">
+    <div class="left">
+      <img class="title" :src="src" />
+      <div class="pdsssdh">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线实时负荷</p> -->
+
+          <p>{{ $route.query.type }}实时电荷</p>
+        </div>
+        <div class="data">
+          <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+            >年</span
+          >
+          <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+            >月</span
+          >
+          <span :class="res == '日' ? 'active' : ''" @click="res = '日'"
+            >日</span
+          >
+        </div>
+        <div id="pdsssdh"></div>
+      </div>
+      <div class="pdsydl">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电量</p> -->
+          <p>{{ $route.query.type }}用电量</p>
+        </div>
+        <div class="data">
+          <span
+            :class="type == '总用电' ? 'active' : ''"
+            @click="type = '总用电'"
+            >总用电</span
+          >
+          <span
+            :class="type == '分时段' ? 'active' : ''"
+            @click="type = '分时段'"
+            >分时段</span
+          >
+        </div>
+        <div id="pdsydl"></div>
+      </div>
+      <div class="pdstpt">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电量对比</p> -->
+          <p>{{ $route.query.type }}用电量对比</p>
+        </div>
+        <div id="pdstpt">
+          <div class="data">
+            <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+              >年</span
+            >
+            <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+              >月</span
+            >
+            <span :class="res1 == '日' ? 'active' : ''" @click="res1 = '日'"
+              >日</span
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线监控</p> -->
+          <p>{{ $route.query.type }}监控</p>
+        </div>
+        <div class="chartBox">
+          <div id="pdsjk">
+            <div class="title">
+              <p>设备数量：</p>
+              <span>5</span>
+              <p>个</p>
+            </div>
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column label="序号" align="center">
+                <template slot-scope="scope">
+                  {{ scope.$index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="date1"
+                label="生产工艺名称"
+                align="center"
+                width="300px"
+              >
+              </el-table-column>
+              <el-table-column prop="date2" label="实时电荷" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58ff70"> {{ scope.row.date2 }}</span
+                  ><span>kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="今日用电量" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58caff"> {{ scope.row.date3 }}</span
+                  ><span>kWh</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date2" label="设备状态" align="center"
+                ><template slot-scope="scope">
+                  <span v-if="scope.row.date4"
+                    ><img src="../../../assets/KDFH/tongguo.png"
+                  /></span>
+                  <span v-else
+                    ><img src="../../../assets/KDFH/jinggao.png"
+                  /></span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线监控</p> -->
+          <p>负荷占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="fhzb"></div>
+          <!-- 饼图下面的底座 -->
+          <div class="buttomCharts"></div>
+        </div>
+      </div>
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电排名</p> -->
+          <p>{{ $route.query.type }}用电排名</p>
+        </div>
+        <div class="chartBox">
+          <div id="pdsjk">
+            <el-table
+              :data="tableData1"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              :header-cell-style="getHeaderCellStyle"
+            >
+              <el-table-column label="序号" align="center">
+                <template slot-scope="scope">
+                  {{ scope.$index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="date1"
+                label="配电室名称"
+                align="center"
+                width="300px"
+              >
+              </el-table-column>
+              <el-table-column prop="date2" label="用电量" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58caff"> {{ scope.row.date2 }}</span
+                  ><span>kWh</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import highcharts from "highcharts";
+export default {
+  data() {
+    return {
+      res: "月",
+      res1: "月",
+      type: "总用电",
+      src: "",
+      option1: {
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:KW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 500,
+          interval: 100, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [200, 300, 500, 400, 334],
+            itemStyle: {
+              normal: {
+                color: "#00FF00",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21FF55", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      },
+      //   option2: {
+      //     legend: {
+      //       data: [
+      //         { icon: "rect", name: "昨日" },
+      //         { icon: "rect", name: "今日" },
+      //       ],
+      //       textStyle: {
+      //         color: "#fff",
+      //         fontSize: "20px",
+      //       },
+      //     },
+      //     xAxis: {
+      //       type: "category",
+      //       data: ["1月", "2月", "3月", "4月", "5月"],
+      //       axisLabel: {
+      //         show: true,
+      //         textStyle: {
+      //           color: "#fff",
+      //           fontSize: 20,
+      //         },
+      //         interval: 0, //代表显示所有x轴标签显示
+      //       },
+      //     },
+      //     yAxis: {
+      //       type: "value",
+      //       name: "单位:kWh",
+      //       nameTextStyle: {
+      //         color: "#fff",
+      //         fontSize: 20,
+      //         padding: 10,
+      //       },
+      //       min: 0,
+      //       max: 500,
+      //       interval: 100, // 指定刻度间隔
+      //       axisLabel: {
+      //         show: true,
+      //         textStyle: {
+      //           color: "#fff",
+      //           fontSize: 20,
+      //         },
+      //       },
+      //     },
+      //     grid: {
+      //       // 让图表占满容器
+      //       //   top: "5%",
+      //       left: "8%",
+      //       right: "5%",
+      //       bottom: "8%",
+      //     },
+      //     series: [
+      //       {
+      //         type: "bar",
+      //         name: "昨日",
+      //         data: [200, 300, 500, 400, 334],
+      //         itemStyle: {
+      //           normal: {
+      //             color: "#11C3FF",
+      //             lineStyle: {
+      //               width: 5, //折线宽度
+      //               color: "#11C3FF", //折线颜色
+      //             },
+      //           },
+      //         },
+      //       },
+      //       {
+      //         type: "bar",
+      //         name: "今日",
+      //         data: [200, 300, 500, 400, 334],
+      //         itemStyle: {
+      //           normal: {
+      //             color: "#09E83E",
+      //             lineStyle: {
+      //               width: 5, //折线宽度
+      //               color: "#09E83E", //折线颜色
+      //             },
+      //           },
+      //         },
+      //       },
+      //     ],
+      //   },
+      option3: {
+        legend: {
+          data: [
+            { icon: "rect", name: "昨日" },
+            { icon: "rect", name: "今日" },
+          ],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          boundaryGap: [0, 0.01],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: ["生料磨", "生料收尘", "篦冷机", "熟料收尘", "回转窑"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        series: [
+          {
+            name: "昨日",
+            type: "bar",
+            data: [45, 55, 17, 60, 12],
+            itemStyle: {
+              color: "#3AF0FF", //折线颜色
+            },
+          },
+          {
+            name: "今日",
+            type: "bar",
+            data: [65, 65, 36, 19, 30],
+            itemStyle: {
+              color: "#5BFAB1", //折线颜色
+            },
+          },
+        ],
+      },
+      tableData: [
+        {
+          date1: "回转窑",
+          date2: "20.34",
+          date3: "20.34",
+          date4: true,
+        },
+        {
+          date1: "熟料收尘",
+          date2: "17.42",
+          date3: "17.42",
+          date4: true,
+        },
+        {
+          date1: "篦冷机",
+          date2: "12.22",
+          date3: "12.22",
+          date4: true,
+        },
+        {
+          date1: "生料收尘",
+          date2: "19.19",
+          date3: "19.19",
+          date4: false,
+        },
+      ],
+      tableData1: [
+        {
+          date1: "总降电力室",
+          date2: "20.34",
+        },
+        {
+          date1: "矿山电力室",
+          date2: "17.42",
+        },
+        {
+          date1: "原材料电力室",
+          date2: "12.22",
+        },
+        {
+          date1: "一线生料磨电力室",
+          date2: "19.19",
+        },
+        {
+          date1: "二线生料磨电力室",
+          date2: "17.42",
+        },
+        {
+          date1: "窑尾电力室",
+          date2: "12.22",
+        },
+      ],
+      optionData: [
+        {
+          name: "破碎系统",
+          value: 38,
+          itemStyle: {
+            color: "rgba(1, 224, 239,0.9)",
+          },
+        },
+        {
+          name: "生料系统", //名称
+          value: 41, //值
+          itemStyle: {
+            //颜色
+            color: "rgba(26, 166, 228,0.9)",
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 21,
+          itemStyle: {
+            color: "rgba(81, 244, 193,0.9)",
+          },
+        },
+      ],
+      option: {},
+    };
+  },
+  watch: {
+    // 监听,当路由发生变化的时候执行
+    $route: {
+      // $route可以用引号，也可以不用引号
+      handler(to, from) {
+        this.src = require(`../../../assets/img/标题/能源监测-电-${this.$route.query.type}.png`);
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    },
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    //配电室用电量  3d
+    pdsydl() {
+      let xaxisData = ["1月", "2月", "3月", "4月", "5月"];
+      let yaxisData = [90, 80, 100, 70, 65];
+      let yaxisData2 = [60, 56, 34, 69, 79];
+
+      //拿到最大值
+      const maxValue = Math.max(...yaxisData);
+      const maxValue2 = Math.max(...yaxisData2);
+
+      const offsetX = 15;
+      const offsetY = 5;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          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);
+
+      let option = {
+        legend: {
+          data: [
+            { icon: "rect", name: "昨日" },
+            { icon: "rect", name: "今日" },
+          ],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   backgroundColor: "rgba(255,255,255,0.75)",
+        //   extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
+        //   textStyle: {
+        //     fontSize: 20,
+        //     color: "#000",
+        //   },
+        //   formatter: (params, ticket, callback) => {
+        //     const item = params[1];
+        //     return item.name + " : " + item.value + " 个";
+        //   },
+        // },
+        grid: {
+          left: "1%",
+          right: "0%",
+          top: "16%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLine: {
+            show: true,
+            // lineStyle: {
+            //   width: 1,
+            // },
+          },
+          axisTick: {
+            show: true,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#FFFFFF",
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:kWh",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+          },
+          splitLine: {
+            show: true,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#FFFFFF",
+          },
+        },
+        series: [
+          {
+            type: "bar",
+            itemStyle: {
+              color: "transparent",
+            },
+            data: yaxisData,
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                formatter: (e) => {
+                  return e.value === maxValue ? e.value : "";
+                },
+                fontSize: 20,
+                color: "#02C262",
+                offset: [0, -15],
+              },
+            },
+          },
+          {
+            type: "bar",
+            itemStyle: {
+              color: "transparent",
+            },
+            data: yaxisData2,
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                formatter: (e) => {
+                  return e.value === maxValue2 ? e.value : "";
+                },
+                fontSize: 20,
+                color: "#3286FF",
+                offset: [0, -15],
+              },
+            },
+          },
+
+          {
+            type: "custom",
+            name: "今日",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              const xAxisPoint = api.coord([api.value(0), 0]);
+              const distance = 50;
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#10C6FF",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#377DFF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#4464FF",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0673D5",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#0B68D5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#115DD5",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: "#0964FF",
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "昨日",
+            barCategoryGap: "20%",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#08E83C",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#1FE77D",
+                        },
+                        {
+                          offset: 1,
+                          color: "#38E7C5",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C25D",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#05C269",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0BC27B",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: "#05E861",
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+
+      this.defineEcharts("pdsydl", option);
+    },
+    // //初始化构建
+    // init() {
+    //   //构建3d饼状图
+    //   let myChart = this.$echarts.init(document.getElementById("fhzb"));
+    //   // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
+    //   this.option = this.getPie3D(this.optionData, 0.8);
+    //   //将配置项设置进去
+    //   myChart.setOption(this.option);
+    //   //鼠标移动上去特效效果
+    //   this.bindListen(myChart);
+    // },
+    // //配置构建 pieData 饼图数据 internalDiameterRatio:透明的空心占比
+    // getPie3D(pieData, internalDiameterRatio) {
+    //   let that = this;
+    //   let series = [];
+    //   let sumValue = 0;
+    //   let startValue = 0;
+    //   let endValue = 0;
+    //   let legendData = [];
+    //   let legendBfb = [];
+    //   let k = 1 - internalDiameterRatio;
+    //   pieData.sort((a, b) => {
+    //     return b.value - a.value;
+    //   });
+    //   // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
+    //   for (let i = 0; i < pieData.length; i++) {
+    //     sumValue += pieData[i].value;
+    //     let seriesItem = {
+    //       //系统名称
+    //       name:
+    //         typeof pieData[i].name === "undefined"
+    //           ? `series${i}`
+    //           : pieData[i].name,
+    //       type: "surface",
+    //       //是否为参数曲面（是）
+    //       parametric: true,
+    //       //曲面图网格线（否）上面一根一根的
+    //       wireframe: {
+    //         show: false,
+    //       },
+    //       pieData: pieData[i],
+    //       pieStatus: {
+    //         selected: false,
+    //         hovered: false,
+    //         k: k,
+    //       },
+    //       //设置饼图在容器中的位置(目前没发现啥用)
+    //       center: ["80%", "100%"],
+    //       radius: "60%",
+    //     };
+    //     //曲面的颜色、不透明度等样式。
+    //     if (typeof pieData[i].itemStyle != "undefined") {
+    //       let itemStyle = {};
+    //       typeof pieData[i].itemStyle.color != "undefined"
+    //         ? (itemStyle.color = pieData[i].itemStyle.color)
+    //         : null;
+    //       typeof pieData[i].itemStyle.opacity != "undefined"
+    //         ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+    //         : null;
+    //       seriesItem.itemStyle = itemStyle;
+    //     }
+    //     series.push(seriesItem);
+    //   }
+    //   // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+    //   // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+    //   legendData = [];
+    //   legendBfb = [];
+    //   for (let i = 0; i < series.length; i++) {
+    //     endValue = startValue + series[i].pieData.value;
+    //     series[i].pieData.startRatio = startValue / sumValue;
+    //     series[i].pieData.endRatio = endValue / sumValue;
+    //     series[i].parametricEquation = that.getParametricEquation(
+    //       series[i].pieData.startRatio,
+    //       series[i].pieData.endRatio,
+    //       false,
+    //       false,
+    //       k,
+    //       series[i].pieData.value
+    //     );
+
+    //     startValue = endValue;
+    //     let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
+    //     legendData.push({
+    //       name: series[i].name,
+    //       value: bfb,
+    //     });
+    //     legendBfb.push({
+    //       name: series[i].name,
+    //       value: bfb,
+    //     });
+    //   }
+
+    //   //(第二个参数可以设置你这个环形的高低程度)
+    //   let boxHeight = this.getHeight3D(series, 15); //通过传参设定3d饼/环的高度
+    //   // 准备待返回的配置项，把准备好的 legendData、series 传入。
+    //   let option = {
+    //     //移动上去提示的文本内容(我没来得及改 你们可以根据需求改)
+    //     tooltip: {
+    //       formatter: (params) => {
+    //         if (
+    //           params.seriesName !== "mouseoutSeries" &&
+    //           params.seriesName !== "pie2d"
+    //         ) {
+    //           let bfb = (
+    //             (this.option.series[params.seriesIndex].pieData.endRatio -
+    //               this.option.series[params.seriesIndex].pieData.startRatio) *
+    //             100
+    //           ).toFixed(2);
+    //           return (
+    //             `${params.seriesName}<br/>` +
+    //             `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>` +
+    //             `${bfb}%`
+    //           );
+    //         }
+    //       },
+    //     },
+    //     label: {
+    //       // normal: {
+    //       //   show: true,
+    //       //   position: "right",
+    //       //   formatter: "{b} \n{c} {d}%",
+    //       // },
+
+    //       normal: {
+    //         show: true,
+    //         color: "#fff",
+    //         position: "right",
+    //         // distance:-10,
+    //         offset: [0, 3],
+    //         formatter: [
+    //           "{d|{d}%}",
+    //           "————",
+    //           //   '{c|{c}}{b|台}',
+    //           "{b|{b}}",
+    //         ].join("\n"), // 用\n来换行
+    //         rich: {
+    //           b: {
+    //             lineHeight: 25,
+    //             align: "left",
+    //             color: "#fff",
+    //           },
+    //           c: {
+    //             fontSize: 22,
+    //             // color: '#fff',
+    //             textShadowColor: "#1c90a6",
+    //             textShadowOffsetX: 0,
+    //             textShadowOffsetY: 2,
+    //             textShadowBlur: 5,
+    //             color: "#fff",
+    //           },
+    //           d: {
+    //             color: "#fff",
+    //             align: "left",
+    //           },
+    //         },
+    //       },
+    //     },
+    //     labelLine: {
+    //       // normal: {
+    //       //   show: true,
+    //       //   lineStyle: {
+    //       //     color: "#7BC0CB",
+    //       //   },
+    //       //   length: 0,
+    //       //   length2: 100000,
+    //       // },
+
+    //       normal: {
+    //         show: true,
+    //         length2: 30,
+    //         lineStyle: {
+    //           width: 1,
+    //           color: "#fff",
+    //         },
+    //       },
+    //     },
+
+    //     //这个可以变形
+    //     xAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     yAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     zAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     //此处是修改样式的重点
+    //     grid3D: {
+    //       show: false,
+    //       boxHeight: boxHeight, //圆环的高度
+    //       //这是饼图的位置
+    //       top: "-20.5%",
+    //       left: "-4%",
+    //       viewControl: {
+    //         //3d效果可以放大、旋转等，请自己去查看官方配置
+    //         alpha: 25, //角度(这个很重要 调节角度的)
+    //         distance: 160, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+    //         rotateSensitivity: 0, //设置为0无法旋转
+    //         zoomSensitivity: 0, //设置为0无法缩放
+    //         panSensitivity: 0, //设置为0无法平移
+    //         autoRotate: false, //自动旋转
+    //       },
+    //     },
+    //     series: series,
+    //   };
+    //   return option;
+    // },
+    //获取3d丙图的最高扇区的高度
+    // getHeight3D(series, height) {
+    //   series.sort((a, b) => {
+    //     return b.pieData.value - a.pieData.value;
+    //   });
+    //   return (height * 25) / series[0].pieData.value;
+    // },
+    // // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    // getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+    //   // 计算
+    //   let midRatio = (startRatio + endRatio) / 2;
+    //   let startRadian = startRatio * Math.PI * 2;
+    //   let endRadian = endRatio * Math.PI * 2;
+    //   let midRadian = midRatio * Math.PI * 2;
+    //   // 如果只有一个扇形，则不实现选中效果。
+    //   if (startRatio === 0 && endRatio === 1) {
+    //     isSelected = false;
+    //   }
+    //   // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+    //   k = typeof k !== "undefined" ? k : 1 / 3;
+    //   // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+    //   let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+    //   let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+    //   // 计算高亮效果的放大比例（未高亮，则比例为 1）
+    //   let hoverRate = isHovered ? 1.05 : 1;
+    //   // 返回曲面参数方程
+    //   return {
+    //     u: {
+    //       min: -Math.PI,
+    //       max: Math.PI * 3,
+    //       step: Math.PI / 32,
+    //     },
+    //     v: {
+    //       min: 0,
+    //       max: Math.PI * 2,
+    //       step: Math.PI / 20,
+    //     },
+    //     x: function (u, v) {
+    //       if (u < startRadian) {
+    //         return (
+    //           offsetX +
+    //           Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       if (u > endRadian) {
+    //         return (
+    //           offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+    //     },
+    //     y: function (u, v) {
+    //       if (u < startRadian) {
+    //         return (
+    //           offsetY +
+    //           Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       if (u > endRadian) {
+    //         return (
+    //           offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+    //     },
+    //     z: function (u, v) {
+    //       if (u < -Math.PI * 0.5) {
+    //         return Math.sin(u);
+    //       }
+    //       if (u > Math.PI * 2.5) {
+    //         return Math.sin(u) * h * 0.1;
+    //       }
+    //       return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+    //     },
+    //   };
+    // },
+    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    bindListen(myChart) {
+      let that = this;
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on("click", function (params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        let isSelected =
+          !that.option.series[params.seriesIndex].pieStatus.selected;
+        let isHovered =
+          that.option.series[params.seriesIndex].pieStatus.hovered;
+        let k = that.option.series[params.seriesIndex].pieStatus.k;
+        let startRatio =
+          that.option.series[params.seriesIndex].pieData.startRatio;
+        let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation =
+            that.getParametricEquation(
+              that.option.series[selectedIndex].pieData.startRatio,
+              that.option.series[selectedIndex].pieData.endRatio,
+              false,
+              false,
+              k,
+              that.option.series[selectedIndex].pieData.value
+            );
+          that.option.series[selectedIndex].pieStatus.selected = false;
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation =
+          that.getParametricEquation(
+            startRatio,
+            endRatio,
+            isSelected,
+            isHovered,
+            k,
+            that.option.series[params.seriesIndex].pieData.value
+          );
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? (selectedIndex = params.seriesIndex) : null;
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option);
+      });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", function (params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return;
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio;
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio;
+            k = that.option.series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation =
+              that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[hoveredIndex].pieData.value
+              );
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "pie2d"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              that.option.series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              that.option.series[params.seriesIndex].pieData.startRatio;
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
+            k = that.option.series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation =
+              that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[params.seriesIndex].pieData.value + 5
+              );
+            that.option.series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", function () {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = that.option.series[hoveredIndex].pieStatus.k;
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio;
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation =
+            that.getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              that.option.series[hoveredIndex].pieData.value
+            );
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option);
+      });
+    },
+    //这是一个自定义计算的方法
+    fomatFloat(num, n) {
+      var f = parseFloat(num);
+      if (isNaN(f)) {
+        return false;
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
+      var s = f.toString();
+      var rs = s.indexOf(".");
+      //判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length;
+        s += ".";
+      }
+      while (s.length <= rs + n) {
+        s += "0";
+      }
+      return s;
+    },
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 14,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          color:"#",
+          position: "outside",
+          formatter: (params) => {
+            var total = 0;
+            optionsData.forEach((item, index) => {
+              console.log(item.value);
+              total += item.value;
+            });
+            console.log(total);
+            let percent = ((params.value / total) * 100).toFixed(2);
+            console.log(params);
+            return (
+              `{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+            },
+            colors: {
+              fontSize: 30,
+              color:optionsData[0].itemStyle.color,
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("fhzb", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+    getEchart() {
+      var chartDom = document.getElementById("pdsydl");
+      var myChart = echarts.init(chartDom);
+      var option;
+      const sideData = [220, 182, 191, 234, 290];
+      const sideData1 = [100, 110, 120, 134, 190];
+
+      option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: [
+            {
+              name: "今日",
+              textStyle: {
+                color: "white",
+              },
+            },
+            {
+              name: "昨日",
+              textStyle: {
+                color: "white",
+              },
+            },
+          ],
+        },
+        grid: {
+          top: "10%",
+          bottom: "62%",
+          right: "15%",
+          containLabel: true,
+        },
+        toolbox: {
+          show: true,
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: "category",
+            splitLine: {
+              show: false,
+            },
+            data: ["1月", "2月", "3月", "4月", "5月"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#fff", //X轴文字颜色
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#fff", //X轴文字颜色
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            tooltip: {
+              show: false,
+            },
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#2d8cf0", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#2d8cf0", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#2d8cf0", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: sideData,
+            barGap: 10,
+          },
+          {
+            name: "昨日",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#09337C", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#0761C0", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#0575DE", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            barGap: 0,
+            data: sideData,
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "white",
+                fontSize: 10,
+              },
+            },
+          },
+          {
+            name: "昨日",
+            tooltip: {
+              show: false,
+            },
+            type: "pictorialBar",
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#0571D5",
+              color: "#288ef3", // 控制顶部方形的颜色
+            },
+            symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
+            symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
+            symbolOffset: ["-10", "-4"], // 控制顶部放行 左右和上下
+            symbolRotate: -16,
+            symbolPosition: "end",
+            data: sideData,
+            z: 3,
+          },
+          {
+            name: "今日",
+            tooltip: {
+              show: false,
+            },
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#15a00f", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#11ad0a", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#19c213", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: sideData1,
+            barGap: 0,
+          },
+          {
+            name: "今日",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#26ec10", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#26ec10", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#26ec10", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            barGap: 0,
+            data: sideData1,
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "white",
+                fontSize: 10,
+              },
+            },
+          },
+          {
+            name: "今日",
+            tooltip: {
+              show: false,
+            },
+            type: "pictorialBar",
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#fff",
+              color: "#26ec10", // 顶部方块的颜色
+            },
+            symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
+            symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
+            symbolOffset: ["10", "-4"], // 控制顶部放行 左右和上下
+            symbolRotate: -16,
+            symbolPosition: "end",
+            data: sideData1,
+            z: 3,
+          },
+        ],
+      };
+
+      myChart.setOption(option, true);
+    },
+  },
+  mounted() {
+    this.defineEcharts("pdsssdh", this.option1);
+    // this.defineEcharts("pdsydl", this.option2);
+    this.pdsydl();
+    // this.getEchart();
+    this.defineEcharts("pdstpt", this.option3);
+    // this.init();
+    this.getbing();
+  },
+};
+</script>
+<style scoped lang="less">
+//饼图底座（我也想给你们底座图片 可是我不知道咋给）
+.buttomCharts {
+  background: center top url("../../../assets/img/底盘.png") no-repeat;
+  background-size: 100% 100%;
+  height: 280px;
+  width: 800px;
+  margin-top: -290px;
+  margin-left: 12%;
+}
+
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  background-image: url(../../../assets/img/左遮罩.png), url(../../../assets/img/右遮罩.png);
+  margin-top: -800px;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+}
+
+.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;
+  }
+
+  .pdsssdh {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+      }
+
+      .active {
+        background: linear-gradient(
+          to right,
+          rgba(33, 76, 124, 0.3) 20%,
+          rgba(152, 207, 230, 0.3) 100%,
+          rgba(33, 76, 124, 0.3) 20%
+        );
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdsssdh {
+      width: 1155px;
+      height: 500px;
+      margin-top: 50px;
+    }
+  }
+
+  .pdsydl {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+      }
+
+      .active {
+        background: linear-gradient(
+          to right,
+          rgba(33, 76, 124, 0.3) 20%,
+          rgba(152, 207, 230, 0.3) 100%,
+          rgba(33, 76, 124, 0.3) 20%
+        );
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdsydl {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+    }
+  }
+
+  .pdstpt {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdstpt {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+        cursor: pointer;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .pdsjk {
+    position: relative;
+    margin-top: 130px;
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      margin-top: 50px;
+
+      #pdsjk {
+        width: 1156px;
+        height: 400px;
+
+        .title {
+          display: flex;
+          align-items: center;
+          color: #fff;
+          font-size: 20px;
+          margin-left: 50px;
+          margin-bottom: 20px;
+
+          span {
+            margin: 0 20px;
+            font-size: 30px;
+            color: #56f671;
+          }
+        }
+
+        /deep/.el-table tr {
+          background: #16253b;
+          color: #fff;
+          font-size: 30px;
+          height: 50px;
+
+          .cell {
+            line-height: 50px;
+          }
+        }
+
+        // 去掉eltable的hover效果
+        ::v-deep .el-table tbody tr:hover > td {
+          background-color: #0b679e !important;
+        }
+
+        //修改表头颜色
+        ::v-deep .has-gutter {
+          background-color: #1969a8;
+
+          th {
+            background-color: #1969a8;
+          }
+        }
+
+        //奇偶行颜色
+        ::v-deep .el-table .success-row {
+          background: #184167;
+        }
+
+        //去掉边框白线
+        ::v-deep .el-table__row > td {
+          border: none;
+        }
+
+        ::v-deep .el-table::before {
+          height: 0px;
+        }
+
+        /* 移除表头的下边框 */
+        ::v-deep .el-table__header th {
+          border-bottom: none;
+        }
+      }
+
+      #fhzb {
+        width: 1156px;
+        height: 500px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/lll/NYJCD/SCX1_20231205100927.vue b/.history/src/views/lll/NYJCD/SCX1_20231205100927.vue
new file mode 100644
index 0000000..992ffb8
--- /dev/null
+++ b/.history/src/views/lll/NYJCD/SCX1_20231205100927.vue
@@ -0,0 +1,2210 @@
+<template>
+  <div class="box">
+    <div class="left">
+      <img class="title" :src="src" />
+      <div class="pdsssdh">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线实时负荷</p> -->
+
+          <p>{{ $route.query.type }}实时电荷</p>
+        </div>
+        <div class="data">
+          <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+            >年</span
+          >
+          <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+            >月</span
+          >
+          <span :class="res == '日' ? 'active' : ''" @click="res = '日'"
+            >日</span
+          >
+        </div>
+        <div id="pdsssdh"></div>
+      </div>
+      <div class="pdsydl">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电量</p> -->
+          <p>{{ $route.query.type }}用电量</p>
+        </div>
+        <div class="data">
+          <span
+            :class="type == '总用电' ? 'active' : ''"
+            @click="type = '总用电'"
+            >总用电</span
+          >
+          <span
+            :class="type == '分时段' ? 'active' : ''"
+            @click="type = '分时段'"
+            >分时段</span
+          >
+        </div>
+        <div id="pdsydl"></div>
+      </div>
+      <div class="pdstpt">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电量对比</p> -->
+          <p>{{ $route.query.type }}用电量对比</p>
+        </div>
+        <div id="pdstpt">
+          <div class="data">
+            <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+              >年</span
+            >
+            <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+              >月</span
+            >
+            <span :class="res1 == '日' ? 'active' : ''" @click="res1 = '日'"
+              >日</span
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线监控</p> -->
+          <p>{{ $route.query.type }}监控</p>
+        </div>
+        <div class="chartBox">
+          <div id="pdsjk">
+            <div class="title">
+              <p>设备数量：</p>
+              <span>5</span>
+              <p>个</p>
+            </div>
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column label="序号" align="center">
+                <template slot-scope="scope">
+                  {{ scope.$index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="date1"
+                label="生产工艺名称"
+                align="center"
+                width="300px"
+              >
+              </el-table-column>
+              <el-table-column prop="date2" label="实时电荷" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58ff70"> {{ scope.row.date2 }}</span
+                  ><span>kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="今日用电量" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58caff"> {{ scope.row.date3 }}</span
+                  ><span>kWh</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date2" label="设备状态" align="center"
+                ><template slot-scope="scope">
+                  <span v-if="scope.row.date4"
+                    ><img src="../../../assets/KDFH/tongguo.png"
+                  /></span>
+                  <span v-else
+                    ><img src="../../../assets/KDFH/jinggao.png"
+                  /></span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线监控</p> -->
+          <p>负荷占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="fhzb"></div>
+          <!-- 饼图下面的底座 -->
+          <div class="buttomCharts"></div>
+        </div>
+      </div>
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电排名</p> -->
+          <p>{{ $route.query.type }}用电排名</p>
+        </div>
+        <div class="chartBox">
+          <div id="pdsjk">
+            <el-table
+              :data="tableData1"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              :header-cell-style="getHeaderCellStyle"
+            >
+              <el-table-column label="序号" align="center">
+                <template slot-scope="scope">
+                  {{ scope.$index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="date1"
+                label="配电室名称"
+                align="center"
+                width="300px"
+              >
+              </el-table-column>
+              <el-table-column prop="date2" label="用电量" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58caff"> {{ scope.row.date2 }}</span
+                  ><span>kWh</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import highcharts from "highcharts";
+export default {
+  data() {
+    return {
+      res: "月",
+      res1: "月",
+      type: "总用电",
+      src: "",
+      option1: {
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:KW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 500,
+          interval: 100, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [200, 300, 500, 400, 334],
+            itemStyle: {
+              normal: {
+                color: "#00FF00",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21FF55", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      },
+      //   option2: {
+      //     legend: {
+      //       data: [
+      //         { icon: "rect", name: "昨日" },
+      //         { icon: "rect", name: "今日" },
+      //       ],
+      //       textStyle: {
+      //         color: "#fff",
+      //         fontSize: "20px",
+      //       },
+      //     },
+      //     xAxis: {
+      //       type: "category",
+      //       data: ["1月", "2月", "3月", "4月", "5月"],
+      //       axisLabel: {
+      //         show: true,
+      //         textStyle: {
+      //           color: "#fff",
+      //           fontSize: 20,
+      //         },
+      //         interval: 0, //代表显示所有x轴标签显示
+      //       },
+      //     },
+      //     yAxis: {
+      //       type: "value",
+      //       name: "单位:kWh",
+      //       nameTextStyle: {
+      //         color: "#fff",
+      //         fontSize: 20,
+      //         padding: 10,
+      //       },
+      //       min: 0,
+      //       max: 500,
+      //       interval: 100, // 指定刻度间隔
+      //       axisLabel: {
+      //         show: true,
+      //         textStyle: {
+      //           color: "#fff",
+      //           fontSize: 20,
+      //         },
+      //       },
+      //     },
+      //     grid: {
+      //       // 让图表占满容器
+      //       //   top: "5%",
+      //       left: "8%",
+      //       right: "5%",
+      //       bottom: "8%",
+      //     },
+      //     series: [
+      //       {
+      //         type: "bar",
+      //         name: "昨日",
+      //         data: [200, 300, 500, 400, 334],
+      //         itemStyle: {
+      //           normal: {
+      //             color: "#11C3FF",
+      //             lineStyle: {
+      //               width: 5, //折线宽度
+      //               color: "#11C3FF", //折线颜色
+      //             },
+      //           },
+      //         },
+      //       },
+      //       {
+      //         type: "bar",
+      //         name: "今日",
+      //         data: [200, 300, 500, 400, 334],
+      //         itemStyle: {
+      //           normal: {
+      //             color: "#09E83E",
+      //             lineStyle: {
+      //               width: 5, //折线宽度
+      //               color: "#09E83E", //折线颜色
+      //             },
+      //           },
+      //         },
+      //       },
+      //     ],
+      //   },
+      option3: {
+        legend: {
+          data: [
+            { icon: "rect", name: "昨日" },
+            { icon: "rect", name: "今日" },
+          ],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          boundaryGap: [0, 0.01],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: ["生料磨", "生料收尘", "篦冷机", "熟料收尘", "回转窑"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        series: [
+          {
+            name: "昨日",
+            type: "bar",
+            data: [45, 55, 17, 60, 12],
+            itemStyle: {
+              color: "#3AF0FF", //折线颜色
+            },
+          },
+          {
+            name: "今日",
+            type: "bar",
+            data: [65, 65, 36, 19, 30],
+            itemStyle: {
+              color: "#5BFAB1", //折线颜色
+            },
+          },
+        ],
+      },
+      tableData: [
+        {
+          date1: "回转窑",
+          date2: "20.34",
+          date3: "20.34",
+          date4: true,
+        },
+        {
+          date1: "熟料收尘",
+          date2: "17.42",
+          date3: "17.42",
+          date4: true,
+        },
+        {
+          date1: "篦冷机",
+          date2: "12.22",
+          date3: "12.22",
+          date4: true,
+        },
+        {
+          date1: "生料收尘",
+          date2: "19.19",
+          date3: "19.19",
+          date4: false,
+        },
+      ],
+      tableData1: [
+        {
+          date1: "总降电力室",
+          date2: "20.34",
+        },
+        {
+          date1: "矿山电力室",
+          date2: "17.42",
+        },
+        {
+          date1: "原材料电力室",
+          date2: "12.22",
+        },
+        {
+          date1: "一线生料磨电力室",
+          date2: "19.19",
+        },
+        {
+          date1: "二线生料磨电力室",
+          date2: "17.42",
+        },
+        {
+          date1: "窑尾电力室",
+          date2: "12.22",
+        },
+      ],
+      optionData: [
+        {
+          name: "破碎系统",
+          value: 38,
+          itemStyle: {
+            color: "rgba(1, 224, 239,0.9)",
+          },
+        },
+        {
+          name: "生料系统", //名称
+          value: 41, //值
+          itemStyle: {
+            //颜色
+            color: "rgba(26, 166, 228,0.9)",
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 21,
+          itemStyle: {
+            color: "rgba(81, 244, 193,0.9)",
+          },
+        },
+      ],
+      option: {},
+    };
+  },
+  watch: {
+    // 监听,当路由发生变化的时候执行
+    $route: {
+      // $route可以用引号，也可以不用引号
+      handler(to, from) {
+        this.src = require(`../../../assets/img/标题/能源监测-电-${this.$route.query.type}.png`);
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    },
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    //配电室用电量  3d
+    pdsydl() {
+      let xaxisData = ["1月", "2月", "3月", "4月", "5月"];
+      let yaxisData = [90, 80, 100, 70, 65];
+      let yaxisData2 = [60, 56, 34, 69, 79];
+
+      //拿到最大值
+      const maxValue = Math.max(...yaxisData);
+      const maxValue2 = Math.max(...yaxisData2);
+
+      const offsetX = 15;
+      const offsetY = 5;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          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);
+
+      let option = {
+        legend: {
+          data: [
+            { icon: "rect", name: "昨日" },
+            { icon: "rect", name: "今日" },
+          ],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   backgroundColor: "rgba(255,255,255,0.75)",
+        //   extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
+        //   textStyle: {
+        //     fontSize: 20,
+        //     color: "#000",
+        //   },
+        //   formatter: (params, ticket, callback) => {
+        //     const item = params[1];
+        //     return item.name + " : " + item.value + " 个";
+        //   },
+        // },
+        grid: {
+          left: "1%",
+          right: "0%",
+          top: "16%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLine: {
+            show: true,
+            // lineStyle: {
+            //   width: 1,
+            // },
+          },
+          axisTick: {
+            show: true,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#FFFFFF",
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:kWh",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+          },
+          splitLine: {
+            show: true,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#FFFFFF",
+          },
+        },
+        series: [
+          {
+            type: "bar",
+            itemStyle: {
+              color: "transparent",
+            },
+            data: yaxisData,
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                formatter: (e) => {
+                  return e.value === maxValue ? e.value : "";
+                },
+                fontSize: 20,
+                color: "#02C262",
+                offset: [0, -15],
+              },
+            },
+          },
+          {
+            type: "bar",
+            itemStyle: {
+              color: "transparent",
+            },
+            data: yaxisData2,
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                formatter: (e) => {
+                  return e.value === maxValue2 ? e.value : "";
+                },
+                fontSize: 20,
+                color: "#3286FF",
+                offset: [0, -15],
+              },
+            },
+          },
+
+          {
+            type: "custom",
+            name: "今日",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              const xAxisPoint = api.coord([api.value(0), 0]);
+              const distance = 50;
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#10C6FF",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#377DFF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#4464FF",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0673D5",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#0B68D5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#115DD5",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: "#0964FF",
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "昨日",
+            barCategoryGap: "20%",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#08E83C",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#1FE77D",
+                        },
+                        {
+                          offset: 1,
+                          color: "#38E7C5",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C25D",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#05C269",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0BC27B",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: "#05E861",
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+
+      this.defineEcharts("pdsydl", option);
+    },
+    // //初始化构建
+    // init() {
+    //   //构建3d饼状图
+    //   let myChart = this.$echarts.init(document.getElementById("fhzb"));
+    //   // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
+    //   this.option = this.getPie3D(this.optionData, 0.8);
+    //   //将配置项设置进去
+    //   myChart.setOption(this.option);
+    //   //鼠标移动上去特效效果
+    //   this.bindListen(myChart);
+    // },
+    // //配置构建 pieData 饼图数据 internalDiameterRatio:透明的空心占比
+    // getPie3D(pieData, internalDiameterRatio) {
+    //   let that = this;
+    //   let series = [];
+    //   let sumValue = 0;
+    //   let startValue = 0;
+    //   let endValue = 0;
+    //   let legendData = [];
+    //   let legendBfb = [];
+    //   let k = 1 - internalDiameterRatio;
+    //   pieData.sort((a, b) => {
+    //     return b.value - a.value;
+    //   });
+    //   // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
+    //   for (let i = 0; i < pieData.length; i++) {
+    //     sumValue += pieData[i].value;
+    //     let seriesItem = {
+    //       //系统名称
+    //       name:
+    //         typeof pieData[i].name === "undefined"
+    //           ? `series${i}`
+    //           : pieData[i].name,
+    //       type: "surface",
+    //       //是否为参数曲面（是）
+    //       parametric: true,
+    //       //曲面图网格线（否）上面一根一根的
+    //       wireframe: {
+    //         show: false,
+    //       },
+    //       pieData: pieData[i],
+    //       pieStatus: {
+    //         selected: false,
+    //         hovered: false,
+    //         k: k,
+    //       },
+    //       //设置饼图在容器中的位置(目前没发现啥用)
+    //       center: ["80%", "100%"],
+    //       radius: "60%",
+    //     };
+    //     //曲面的颜色、不透明度等样式。
+    //     if (typeof pieData[i].itemStyle != "undefined") {
+    //       let itemStyle = {};
+    //       typeof pieData[i].itemStyle.color != "undefined"
+    //         ? (itemStyle.color = pieData[i].itemStyle.color)
+    //         : null;
+    //       typeof pieData[i].itemStyle.opacity != "undefined"
+    //         ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+    //         : null;
+    //       seriesItem.itemStyle = itemStyle;
+    //     }
+    //     series.push(seriesItem);
+    //   }
+    //   // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+    //   // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+    //   legendData = [];
+    //   legendBfb = [];
+    //   for (let i = 0; i < series.length; i++) {
+    //     endValue = startValue + series[i].pieData.value;
+    //     series[i].pieData.startRatio = startValue / sumValue;
+    //     series[i].pieData.endRatio = endValue / sumValue;
+    //     series[i].parametricEquation = that.getParametricEquation(
+    //       series[i].pieData.startRatio,
+    //       series[i].pieData.endRatio,
+    //       false,
+    //       false,
+    //       k,
+    //       series[i].pieData.value
+    //     );
+
+    //     startValue = endValue;
+    //     let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
+    //     legendData.push({
+    //       name: series[i].name,
+    //       value: bfb,
+    //     });
+    //     legendBfb.push({
+    //       name: series[i].name,
+    //       value: bfb,
+    //     });
+    //   }
+
+    //   //(第二个参数可以设置你这个环形的高低程度)
+    //   let boxHeight = this.getHeight3D(series, 15); //通过传参设定3d饼/环的高度
+    //   // 准备待返回的配置项，把准备好的 legendData、series 传入。
+    //   let option = {
+    //     //移动上去提示的文本内容(我没来得及改 你们可以根据需求改)
+    //     tooltip: {
+    //       formatter: (params) => {
+    //         if (
+    //           params.seriesName !== "mouseoutSeries" &&
+    //           params.seriesName !== "pie2d"
+    //         ) {
+    //           let bfb = (
+    //             (this.option.series[params.seriesIndex].pieData.endRatio -
+    //               this.option.series[params.seriesIndex].pieData.startRatio) *
+    //             100
+    //           ).toFixed(2);
+    //           return (
+    //             `${params.seriesName}<br/>` +
+    //             `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>` +
+    //             `${bfb}%`
+    //           );
+    //         }
+    //       },
+    //     },
+    //     label: {
+    //       // normal: {
+    //       //   show: true,
+    //       //   position: "right",
+    //       //   formatter: "{b} \n{c} {d}%",
+    //       // },
+
+    //       normal: {
+    //         show: true,
+    //         color: "#fff",
+    //         position: "right",
+    //         // distance:-10,
+    //         offset: [0, 3],
+    //         formatter: [
+    //           "{d|{d}%}",
+    //           "————",
+    //           //   '{c|{c}}{b|台}',
+    //           "{b|{b}}",
+    //         ].join("\n"), // 用\n来换行
+    //         rich: {
+    //           b: {
+    //             lineHeight: 25,
+    //             align: "left",
+    //             color: "#fff",
+    //           },
+    //           c: {
+    //             fontSize: 22,
+    //             // color: '#fff',
+    //             textShadowColor: "#1c90a6",
+    //             textShadowOffsetX: 0,
+    //             textShadowOffsetY: 2,
+    //             textShadowBlur: 5,
+    //             color: "#fff",
+    //           },
+    //           d: {
+    //             color: "#fff",
+    //             align: "left",
+    //           },
+    //         },
+    //       },
+    //     },
+    //     labelLine: {
+    //       // normal: {
+    //       //   show: true,
+    //       //   lineStyle: {
+    //       //     color: "#7BC0CB",
+    //       //   },
+    //       //   length: 0,
+    //       //   length2: 100000,
+    //       // },
+
+    //       normal: {
+    //         show: true,
+    //         length2: 30,
+    //         lineStyle: {
+    //           width: 1,
+    //           color: "#fff",
+    //         },
+    //       },
+    //     },
+
+    //     //这个可以变形
+    //     xAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     yAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     zAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     //此处是修改样式的重点
+    //     grid3D: {
+    //       show: false,
+    //       boxHeight: boxHeight, //圆环的高度
+    //       //这是饼图的位置
+    //       top: "-20.5%",
+    //       left: "-4%",
+    //       viewControl: {
+    //         //3d效果可以放大、旋转等，请自己去查看官方配置
+    //         alpha: 25, //角度(这个很重要 调节角度的)
+    //         distance: 160, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+    //         rotateSensitivity: 0, //设置为0无法旋转
+    //         zoomSensitivity: 0, //设置为0无法缩放
+    //         panSensitivity: 0, //设置为0无法平移
+    //         autoRotate: false, //自动旋转
+    //       },
+    //     },
+    //     series: series,
+    //   };
+    //   return option;
+    // },
+    //获取3d丙图的最高扇区的高度
+    // getHeight3D(series, height) {
+    //   series.sort((a, b) => {
+    //     return b.pieData.value - a.pieData.value;
+    //   });
+    //   return (height * 25) / series[0].pieData.value;
+    // },
+    // // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    // getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+    //   // 计算
+    //   let midRatio = (startRatio + endRatio) / 2;
+    //   let startRadian = startRatio * Math.PI * 2;
+    //   let endRadian = endRatio * Math.PI * 2;
+    //   let midRadian = midRatio * Math.PI * 2;
+    //   // 如果只有一个扇形，则不实现选中效果。
+    //   if (startRatio === 0 && endRatio === 1) {
+    //     isSelected = false;
+    //   }
+    //   // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+    //   k = typeof k !== "undefined" ? k : 1 / 3;
+    //   // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+    //   let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+    //   let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+    //   // 计算高亮效果的放大比例（未高亮，则比例为 1）
+    //   let hoverRate = isHovered ? 1.05 : 1;
+    //   // 返回曲面参数方程
+    //   return {
+    //     u: {
+    //       min: -Math.PI,
+    //       max: Math.PI * 3,
+    //       step: Math.PI / 32,
+    //     },
+    //     v: {
+    //       min: 0,
+    //       max: Math.PI * 2,
+    //       step: Math.PI / 20,
+    //     },
+    //     x: function (u, v) {
+    //       if (u < startRadian) {
+    //         return (
+    //           offsetX +
+    //           Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       if (u > endRadian) {
+    //         return (
+    //           offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+    //     },
+    //     y: function (u, v) {
+    //       if (u < startRadian) {
+    //         return (
+    //           offsetY +
+    //           Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       if (u > endRadian) {
+    //         return (
+    //           offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+    //     },
+    //     z: function (u, v) {
+    //       if (u < -Math.PI * 0.5) {
+    //         return Math.sin(u);
+    //       }
+    //       if (u > Math.PI * 2.5) {
+    //         return Math.sin(u) * h * 0.1;
+    //       }
+    //       return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+    //     },
+    //   };
+    // },
+    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    bindListen(myChart) {
+      let that = this;
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on("click", function (params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        let isSelected =
+          !that.option.series[params.seriesIndex].pieStatus.selected;
+        let isHovered =
+          that.option.series[params.seriesIndex].pieStatus.hovered;
+        let k = that.option.series[params.seriesIndex].pieStatus.k;
+        let startRatio =
+          that.option.series[params.seriesIndex].pieData.startRatio;
+        let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation =
+            that.getParametricEquation(
+              that.option.series[selectedIndex].pieData.startRatio,
+              that.option.series[selectedIndex].pieData.endRatio,
+              false,
+              false,
+              k,
+              that.option.series[selectedIndex].pieData.value
+            );
+          that.option.series[selectedIndex].pieStatus.selected = false;
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation =
+          that.getParametricEquation(
+            startRatio,
+            endRatio,
+            isSelected,
+            isHovered,
+            k,
+            that.option.series[params.seriesIndex].pieData.value
+          );
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? (selectedIndex = params.seriesIndex) : null;
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option);
+      });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", function (params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return;
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio;
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio;
+            k = that.option.series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation =
+              that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[hoveredIndex].pieData.value
+              );
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "pie2d"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              that.option.series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              that.option.series[params.seriesIndex].pieData.startRatio;
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
+            k = that.option.series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation =
+              that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[params.seriesIndex].pieData.value + 5
+              );
+            that.option.series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", function () {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = that.option.series[hoveredIndex].pieStatus.k;
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio;
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation =
+            that.getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              that.option.series[hoveredIndex].pieData.value
+            );
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option);
+      });
+    },
+    //这是一个自定义计算的方法
+    fomatFloat(num, n) {
+      var f = parseFloat(num);
+      if (isNaN(f)) {
+        return false;
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
+      var s = f.toString();
+      var rs = s.indexOf(".");
+      //判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length;
+        s += ".";
+      }
+      while (s.length <= rs + n) {
+        s += "0";
+      }
+      return s;
+    },
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 14,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          color:"#",
+          position: "outside",
+          formatter: (params) => {
+            var total = 0;
+            optionsData.forEach((item, index) => {
+              console.log(item.value);
+              total += item.value;
+            });
+            console.log(total);
+            let percent = ((params.value / total) * 100).toFixed(2);
+            console.log(params);
+            return (
+              `{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+            },
+            colors: {
+              fontSize: 30,
+              color:optionsData[0].itemStyle.color,
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 400, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("fhzb", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+    getEchart() {
+      var chartDom = document.getElementById("pdsydl");
+      var myChart = echarts.init(chartDom);
+      var option;
+      const sideData = [220, 182, 191, 234, 290];
+      const sideData1 = [100, 110, 120, 134, 190];
+
+      option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: [
+            {
+              name: "今日",
+              textStyle: {
+                color: "white",
+              },
+            },
+            {
+              name: "昨日",
+              textStyle: {
+                color: "white",
+              },
+            },
+          ],
+        },
+        grid: {
+          top: "10%",
+          bottom: "62%",
+          right: "15%",
+          containLabel: true,
+        },
+        toolbox: {
+          show: true,
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: "category",
+            splitLine: {
+              show: false,
+            },
+            data: ["1月", "2月", "3月", "4月", "5月"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#fff", //X轴文字颜色
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#fff", //X轴文字颜色
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            tooltip: {
+              show: false,
+            },
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#2d8cf0", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#2d8cf0", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#2d8cf0", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: sideData,
+            barGap: 10,
+          },
+          {
+            name: "昨日",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#09337C", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#0761C0", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#0575DE", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            barGap: 0,
+            data: sideData,
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "white",
+                fontSize: 10,
+              },
+            },
+          },
+          {
+            name: "昨日",
+            tooltip: {
+              show: false,
+            },
+            type: "pictorialBar",
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#0571D5",
+              color: "#288ef3", // 控制顶部方形的颜色
+            },
+            symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
+            symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
+            symbolOffset: ["-10", "-4"], // 控制顶部放行 左右和上下
+            symbolRotate: -16,
+            symbolPosition: "end",
+            data: sideData,
+            z: 3,
+          },
+          {
+            name: "今日",
+            tooltip: {
+              show: false,
+            },
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#15a00f", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#11ad0a", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#19c213", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: sideData1,
+            barGap: 0,
+          },
+          {
+            name: "今日",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#26ec10", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#26ec10", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#26ec10", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            barGap: 0,
+            data: sideData1,
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "white",
+                fontSize: 10,
+              },
+            },
+          },
+          {
+            name: "今日",
+            tooltip: {
+              show: false,
+            },
+            type: "pictorialBar",
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#fff",
+              color: "#26ec10", // 顶部方块的颜色
+            },
+            symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
+            symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
+            symbolOffset: ["10", "-4"], // 控制顶部放行 左右和上下
+            symbolRotate: -16,
+            symbolPosition: "end",
+            data: sideData1,
+            z: 3,
+          },
+        ],
+      };
+
+      myChart.setOption(option, true);
+    },
+  },
+  mounted() {
+    this.defineEcharts("pdsssdh", this.option1);
+    // this.defineEcharts("pdsydl", this.option2);
+    this.pdsydl();
+    // this.getEchart();
+    this.defineEcharts("pdstpt", this.option3);
+    // this.init();
+    this.getbing();
+  },
+};
+</script>
+<style scoped lang="less">
+//饼图底座（我也想给你们底座图片 可是我不知道咋给）
+.buttomCharts {
+  background: center top url("../../../assets/img/底盘.png") no-repeat;
+  background-size: 100% 100%;
+  height: 280px;
+  width: 800px;
+  margin-top: -290px;
+  margin-left: 12%;
+}
+
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  background-image: url(../../../assets/img/左遮罩.png), url(../../../assets/img/右遮罩.png);
+  margin-top: -800px;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+}
+
+.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;
+  }
+
+  .pdsssdh {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+      }
+
+      .active {
+        background: linear-gradient(
+          to right,
+          rgba(33, 76, 124, 0.3) 20%,
+          rgba(152, 207, 230, 0.3) 100%,
+          rgba(33, 76, 124, 0.3) 20%
+        );
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdsssdh {
+      width: 1155px;
+      height: 500px;
+      margin-top: 50px;
+    }
+  }
+
+  .pdsydl {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+      }
+
+      .active {
+        background: linear-gradient(
+          to right,
+          rgba(33, 76, 124, 0.3) 20%,
+          rgba(152, 207, 230, 0.3) 100%,
+          rgba(33, 76, 124, 0.3) 20%
+        );
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdsydl {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+    }
+  }
+
+  .pdstpt {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdstpt {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+        cursor: pointer;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .pdsjk {
+    position: relative;
+    margin-top: 130px;
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      margin-top: 50px;
+
+      #pdsjk {
+        width: 1156px;
+        height: 400px;
+
+        .title {
+          display: flex;
+          align-items: center;
+          color: #fff;
+          font-size: 20px;
+          margin-left: 50px;
+          margin-bottom: 20px;
+
+          span {
+            margin: 0 20px;
+            font-size: 30px;
+            color: #56f671;
+          }
+        }
+
+        /deep/.el-table tr {
+          background: #16253b;
+          color: #fff;
+          font-size: 30px;
+          height: 50px;
+
+          .cell {
+            line-height: 50px;
+          }
+        }
+
+        // 去掉eltable的hover效果
+        ::v-deep .el-table tbody tr:hover > td {
+          background-color: #0b679e !important;
+        }
+
+        //修改表头颜色
+        ::v-deep .has-gutter {
+          background-color: #1969a8;
+
+          th {
+            background-color: #1969a8;
+          }
+        }
+
+        //奇偶行颜色
+        ::v-deep .el-table .success-row {
+          background: #184167;
+        }
+
+        //去掉边框白线
+        ::v-deep .el-table__row > td {
+          border: none;
+        }
+
+        ::v-deep .el-table::before {
+          height: 0px;
+        }
+
+        /* 移除表头的下边框 */
+        ::v-deep .el-table__header th {
+          border-bottom: none;
+        }
+      }
+
+      #fhzb {
+        width: 1156px;
+        height: 500px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/lll/NYJCD/SCX1_20231205101029.vue b/.history/src/views/lll/NYJCD/SCX1_20231205101029.vue
new file mode 100644
index 0000000..752402c
--- /dev/null
+++ b/.history/src/views/lll/NYJCD/SCX1_20231205101029.vue
@@ -0,0 +1,2210 @@
+<template>
+  <div class="box">
+    <div class="left">
+      <img class="title" :src="src" />
+      <div class="pdsssdh">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线实时负荷</p> -->
+
+          <p>{{ $route.query.type }}实时电荷</p>
+        </div>
+        <div class="data">
+          <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+            >年</span
+          >
+          <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+            >月</span
+          >
+          <span :class="res == '日' ? 'active' : ''" @click="res = '日'"
+            >日</span
+          >
+        </div>
+        <div id="pdsssdh"></div>
+      </div>
+      <div class="pdsydl">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电量</p> -->
+          <p>{{ $route.query.type }}用电量</p>
+        </div>
+        <div class="data">
+          <span
+            :class="type == '总用电' ? 'active' : ''"
+            @click="type = '总用电'"
+            >总用电</span
+          >
+          <span
+            :class="type == '分时段' ? 'active' : ''"
+            @click="type = '分时段'"
+            >分时段</span
+          >
+        </div>
+        <div id="pdsydl"></div>
+      </div>
+      <div class="pdstpt">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电量对比</p> -->
+          <p>{{ $route.query.type }}用电量对比</p>
+        </div>
+        <div id="pdstpt">
+          <div class="data">
+            <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+              >年</span
+            >
+            <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+              >月</span
+            >
+            <span :class="res1 == '日' ? 'active' : ''" @click="res1 = '日'"
+              >日</span
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线监控</p> -->
+          <p>{{ $route.query.type }}监控</p>
+        </div>
+        <div class="chartBox">
+          <div id="pdsjk">
+            <div class="title">
+              <p>设备数量：</p>
+              <span>5</span>
+              <p>个</p>
+            </div>
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column label="序号" align="center">
+                <template slot-scope="scope">
+                  {{ scope.$index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="date1"
+                label="生产工艺名称"
+                align="center"
+                width="300px"
+              >
+              </el-table-column>
+              <el-table-column prop="date2" label="实时电荷" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58ff70"> {{ scope.row.date2 }}</span
+                  ><span>kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="今日用电量" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58caff"> {{ scope.row.date3 }}</span
+                  ><span>kWh</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date2" label="设备状态" align="center"
+                ><template slot-scope="scope">
+                  <span v-if="scope.row.date4"
+                    ><img src="../../../assets/KDFH/tongguo.png"
+                  /></span>
+                  <span v-else
+                    ><img src="../../../assets/KDFH/jinggao.png"
+                  /></span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线监控</p> -->
+          <p>负荷占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="fhzb"></div>
+          <!-- 饼图下面的底座 -->
+          <div class="buttomCharts"></div>
+        </div>
+      </div>
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电排名</p> -->
+          <p>{{ $route.query.type }}用电排名</p>
+        </div>
+        <div class="chartBox">
+          <div id="pdsjk">
+            <el-table
+              :data="tableData1"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              :header-cell-style="getHeaderCellStyle"
+            >
+              <el-table-column label="序号" align="center">
+                <template slot-scope="scope">
+                  {{ scope.$index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="date1"
+                label="配电室名称"
+                align="center"
+                width="300px"
+              >
+              </el-table-column>
+              <el-table-column prop="date2" label="用电量" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58caff"> {{ scope.row.date2 }}</span
+                  ><span>kWh</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import highcharts from "highcharts";
+export default {
+  data() {
+    return {
+      res: "月",
+      res1: "月",
+      type: "总用电",
+      src: "",
+      option1: {
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:KW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 500,
+          interval: 100, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [200, 300, 500, 400, 334],
+            itemStyle: {
+              normal: {
+                color: "#00FF00",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21FF55", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      },
+      //   option2: {
+      //     legend: {
+      //       data: [
+      //         { icon: "rect", name: "昨日" },
+      //         { icon: "rect", name: "今日" },
+      //       ],
+      //       textStyle: {
+      //         color: "#fff",
+      //         fontSize: "20px",
+      //       },
+      //     },
+      //     xAxis: {
+      //       type: "category",
+      //       data: ["1月", "2月", "3月", "4月", "5月"],
+      //       axisLabel: {
+      //         show: true,
+      //         textStyle: {
+      //           color: "#fff",
+      //           fontSize: 20,
+      //         },
+      //         interval: 0, //代表显示所有x轴标签显示
+      //       },
+      //     },
+      //     yAxis: {
+      //       type: "value",
+      //       name: "单位:kWh",
+      //       nameTextStyle: {
+      //         color: "#fff",
+      //         fontSize: 20,
+      //         padding: 10,
+      //       },
+      //       min: 0,
+      //       max: 500,
+      //       interval: 100, // 指定刻度间隔
+      //       axisLabel: {
+      //         show: true,
+      //         textStyle: {
+      //           color: "#fff",
+      //           fontSize: 20,
+      //         },
+      //       },
+      //     },
+      //     grid: {
+      //       // 让图表占满容器
+      //       //   top: "5%",
+      //       left: "8%",
+      //       right: "5%",
+      //       bottom: "8%",
+      //     },
+      //     series: [
+      //       {
+      //         type: "bar",
+      //         name: "昨日",
+      //         data: [200, 300, 500, 400, 334],
+      //         itemStyle: {
+      //           normal: {
+      //             color: "#11C3FF",
+      //             lineStyle: {
+      //               width: 5, //折线宽度
+      //               color: "#11C3FF", //折线颜色
+      //             },
+      //           },
+      //         },
+      //       },
+      //       {
+      //         type: "bar",
+      //         name: "今日",
+      //         data: [200, 300, 500, 400, 334],
+      //         itemStyle: {
+      //           normal: {
+      //             color: "#09E83E",
+      //             lineStyle: {
+      //               width: 5, //折线宽度
+      //               color: "#09E83E", //折线颜色
+      //             },
+      //           },
+      //         },
+      //       },
+      //     ],
+      //   },
+      option3: {
+        legend: {
+          data: [
+            { icon: "rect", name: "昨日" },
+            { icon: "rect", name: "今日" },
+          ],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          boundaryGap: [0, 0.01],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: ["生料磨", "生料收尘", "篦冷机", "熟料收尘", "回转窑"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        series: [
+          {
+            name: "昨日",
+            type: "bar",
+            data: [45, 55, 17, 60, 12],
+            itemStyle: {
+              color: "#3AF0FF", //折线颜色
+            },
+          },
+          {
+            name: "今日",
+            type: "bar",
+            data: [65, 65, 36, 19, 30],
+            itemStyle: {
+              color: "#5BFAB1", //折线颜色
+            },
+          },
+        ],
+      },
+      tableData: [
+        {
+          date1: "回转窑",
+          date2: "20.34",
+          date3: "20.34",
+          date4: true,
+        },
+        {
+          date1: "熟料收尘",
+          date2: "17.42",
+          date3: "17.42",
+          date4: true,
+        },
+        {
+          date1: "篦冷机",
+          date2: "12.22",
+          date3: "12.22",
+          date4: true,
+        },
+        {
+          date1: "生料收尘",
+          date2: "19.19",
+          date3: "19.19",
+          date4: false,
+        },
+      ],
+      tableData1: [
+        {
+          date1: "总降电力室",
+          date2: "20.34",
+        },
+        {
+          date1: "矿山电力室",
+          date2: "17.42",
+        },
+        {
+          date1: "原材料电力室",
+          date2: "12.22",
+        },
+        {
+          date1: "一线生料磨电力室",
+          date2: "19.19",
+        },
+        {
+          date1: "二线生料磨电力室",
+          date2: "17.42",
+        },
+        {
+          date1: "窑尾电力室",
+          date2: "12.22",
+        },
+      ],
+      optionData: [
+        {
+          name: "破碎系统",
+          value: 38,
+          itemStyle: {
+            color: "rgba(1, 224, 239,0.9)",
+          },
+        },
+        {
+          name: "生料系统", //名称
+          value: 41, //值
+          itemStyle: {
+            //颜色
+            color: "rgba(26, 166, 228,0.9)",
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 21,
+          itemStyle: {
+            color: "rgba(81, 244, 193,0.9)",
+          },
+        },
+      ],
+      option: {},
+    };
+  },
+  watch: {
+    // 监听,当路由发生变化的时候执行
+    $route: {
+      // $route可以用引号，也可以不用引号
+      handler(to, from) {
+        this.src = require(`../../../assets/img/标题/能源监测-电-${this.$route.query.type}.png`);
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    },
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    //配电室用电量  3d
+    pdsydl() {
+      let xaxisData = ["1月", "2月", "3月", "4月", "5月"];
+      let yaxisData = [90, 80, 100, 70, 65];
+      let yaxisData2 = [60, 56, 34, 69, 79];
+
+      //拿到最大值
+      const maxValue = Math.max(...yaxisData);
+      const maxValue2 = Math.max(...yaxisData2);
+
+      const offsetX = 15;
+      const offsetY = 5;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          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);
+
+      let option = {
+        legend: {
+          data: [
+            { icon: "rect", name: "昨日" },
+            { icon: "rect", name: "今日" },
+          ],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   backgroundColor: "rgba(255,255,255,0.75)",
+        //   extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
+        //   textStyle: {
+        //     fontSize: 20,
+        //     color: "#000",
+        //   },
+        //   formatter: (params, ticket, callback) => {
+        //     const item = params[1];
+        //     return item.name + " : " + item.value + " 个";
+        //   },
+        // },
+        grid: {
+          left: "1%",
+          right: "0%",
+          top: "16%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLine: {
+            show: true,
+            // lineStyle: {
+            //   width: 1,
+            // },
+          },
+          axisTick: {
+            show: true,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#FFFFFF",
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:kWh",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+          },
+          splitLine: {
+            show: true,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#FFFFFF",
+          },
+        },
+        series: [
+          {
+            type: "bar",
+            itemStyle: {
+              color: "transparent",
+            },
+            data: yaxisData,
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                formatter: (e) => {
+                  return e.value === maxValue ? e.value : "";
+                },
+                fontSize: 20,
+                color: "#02C262",
+                offset: [0, -15],
+              },
+            },
+          },
+          {
+            type: "bar",
+            itemStyle: {
+              color: "transparent",
+            },
+            data: yaxisData2,
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                formatter: (e) => {
+                  return e.value === maxValue2 ? e.value : "";
+                },
+                fontSize: 20,
+                color: "#3286FF",
+                offset: [0, -15],
+              },
+            },
+          },
+
+          {
+            type: "custom",
+            name: "今日",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              const xAxisPoint = api.coord([api.value(0), 0]);
+              const distance = 50;
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#10C6FF",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#377DFF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#4464FF",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0673D5",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#0B68D5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#115DD5",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: "#0964FF",
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "昨日",
+            barCategoryGap: "20%",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#08E83C",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#1FE77D",
+                        },
+                        {
+                          offset: 1,
+                          color: "#38E7C5",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C25D",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#05C269",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0BC27B",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: "#05E861",
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+
+      this.defineEcharts("pdsydl", option);
+    },
+    // //初始化构建
+    // init() {
+    //   //构建3d饼状图
+    //   let myChart = this.$echarts.init(document.getElementById("fhzb"));
+    //   // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
+    //   this.option = this.getPie3D(this.optionData, 0.8);
+    //   //将配置项设置进去
+    //   myChart.setOption(this.option);
+    //   //鼠标移动上去特效效果
+    //   this.bindListen(myChart);
+    // },
+    // //配置构建 pieData 饼图数据 internalDiameterRatio:透明的空心占比
+    // getPie3D(pieData, internalDiameterRatio) {
+    //   let that = this;
+    //   let series = [];
+    //   let sumValue = 0;
+    //   let startValue = 0;
+    //   let endValue = 0;
+    //   let legendData = [];
+    //   let legendBfb = [];
+    //   let k = 1 - internalDiameterRatio;
+    //   pieData.sort((a, b) => {
+    //     return b.value - a.value;
+    //   });
+    //   // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
+    //   for (let i = 0; i < pieData.length; i++) {
+    //     sumValue += pieData[i].value;
+    //     let seriesItem = {
+    //       //系统名称
+    //       name:
+    //         typeof pieData[i].name === "undefined"
+    //           ? `series${i}`
+    //           : pieData[i].name,
+    //       type: "surface",
+    //       //是否为参数曲面（是）
+    //       parametric: true,
+    //       //曲面图网格线（否）上面一根一根的
+    //       wireframe: {
+    //         show: false,
+    //       },
+    //       pieData: pieData[i],
+    //       pieStatus: {
+    //         selected: false,
+    //         hovered: false,
+    //         k: k,
+    //       },
+    //       //设置饼图在容器中的位置(目前没发现啥用)
+    //       center: ["80%", "100%"],
+    //       radius: "60%",
+    //     };
+    //     //曲面的颜色、不透明度等样式。
+    //     if (typeof pieData[i].itemStyle != "undefined") {
+    //       let itemStyle = {};
+    //       typeof pieData[i].itemStyle.color != "undefined"
+    //         ? (itemStyle.color = pieData[i].itemStyle.color)
+    //         : null;
+    //       typeof pieData[i].itemStyle.opacity != "undefined"
+    //         ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+    //         : null;
+    //       seriesItem.itemStyle = itemStyle;
+    //     }
+    //     series.push(seriesItem);
+    //   }
+    //   // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+    //   // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+    //   legendData = [];
+    //   legendBfb = [];
+    //   for (let i = 0; i < series.length; i++) {
+    //     endValue = startValue + series[i].pieData.value;
+    //     series[i].pieData.startRatio = startValue / sumValue;
+    //     series[i].pieData.endRatio = endValue / sumValue;
+    //     series[i].parametricEquation = that.getParametricEquation(
+    //       series[i].pieData.startRatio,
+    //       series[i].pieData.endRatio,
+    //       false,
+    //       false,
+    //       k,
+    //       series[i].pieData.value
+    //     );
+
+    //     startValue = endValue;
+    //     let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
+    //     legendData.push({
+    //       name: series[i].name,
+    //       value: bfb,
+    //     });
+    //     legendBfb.push({
+    //       name: series[i].name,
+    //       value: bfb,
+    //     });
+    //   }
+
+    //   //(第二个参数可以设置你这个环形的高低程度)
+    //   let boxHeight = this.getHeight3D(series, 15); //通过传参设定3d饼/环的高度
+    //   // 准备待返回的配置项，把准备好的 legendData、series 传入。
+    //   let option = {
+    //     //移动上去提示的文本内容(我没来得及改 你们可以根据需求改)
+    //     tooltip: {
+    //       formatter: (params) => {
+    //         if (
+    //           params.seriesName !== "mouseoutSeries" &&
+    //           params.seriesName !== "pie2d"
+    //         ) {
+    //           let bfb = (
+    //             (this.option.series[params.seriesIndex].pieData.endRatio -
+    //               this.option.series[params.seriesIndex].pieData.startRatio) *
+    //             100
+    //           ).toFixed(2);
+    //           return (
+    //             `${params.seriesName}<br/>` +
+    //             `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>` +
+    //             `${bfb}%`
+    //           );
+    //         }
+    //       },
+    //     },
+    //     label: {
+    //       // normal: {
+    //       //   show: true,
+    //       //   position: "right",
+    //       //   formatter: "{b} \n{c} {d}%",
+    //       // },
+
+    //       normal: {
+    //         show: true,
+    //         color: "#fff",
+    //         position: "right",
+    //         // distance:-10,
+    //         offset: [0, 3],
+    //         formatter: [
+    //           "{d|{d}%}",
+    //           "————",
+    //           //   '{c|{c}}{b|台}',
+    //           "{b|{b}}",
+    //         ].join("\n"), // 用\n来换行
+    //         rich: {
+    //           b: {
+    //             lineHeight: 25,
+    //             align: "left",
+    //             color: "#fff",
+    //           },
+    //           c: {
+    //             fontSize: 22,
+    //             // color: '#fff',
+    //             textShadowColor: "#1c90a6",
+    //             textShadowOffsetX: 0,
+    //             textShadowOffsetY: 2,
+    //             textShadowBlur: 5,
+    //             color: "#fff",
+    //           },
+    //           d: {
+    //             color: "#fff",
+    //             align: "left",
+    //           },
+    //         },
+    //       },
+    //     },
+    //     labelLine: {
+    //       // normal: {
+    //       //   show: true,
+    //       //   lineStyle: {
+    //       //     color: "#7BC0CB",
+    //       //   },
+    //       //   length: 0,
+    //       //   length2: 100000,
+    //       // },
+
+    //       normal: {
+    //         show: true,
+    //         length2: 30,
+    //         lineStyle: {
+    //           width: 1,
+    //           color: "#fff",
+    //         },
+    //       },
+    //     },
+
+    //     //这个可以变形
+    //     xAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     yAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     zAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     //此处是修改样式的重点
+    //     grid3D: {
+    //       show: false,
+    //       boxHeight: boxHeight, //圆环的高度
+    //       //这是饼图的位置
+    //       top: "-20.5%",
+    //       left: "-4%",
+    //       viewControl: {
+    //         //3d效果可以放大、旋转等，请自己去查看官方配置
+    //         alpha: 25, //角度(这个很重要 调节角度的)
+    //         distance: 160, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+    //         rotateSensitivity: 0, //设置为0无法旋转
+    //         zoomSensitivity: 0, //设置为0无法缩放
+    //         panSensitivity: 0, //设置为0无法平移
+    //         autoRotate: false, //自动旋转
+    //       },
+    //     },
+    //     series: series,
+    //   };
+    //   return option;
+    // },
+    //获取3d丙图的最高扇区的高度
+    // getHeight3D(series, height) {
+    //   series.sort((a, b) => {
+    //     return b.pieData.value - a.pieData.value;
+    //   });
+    //   return (height * 25) / series[0].pieData.value;
+    // },
+    // // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    // getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+    //   // 计算
+    //   let midRatio = (startRatio + endRatio) / 2;
+    //   let startRadian = startRatio * Math.PI * 2;
+    //   let endRadian = endRatio * Math.PI * 2;
+    //   let midRadian = midRatio * Math.PI * 2;
+    //   // 如果只有一个扇形，则不实现选中效果。
+    //   if (startRatio === 0 && endRatio === 1) {
+    //     isSelected = false;
+    //   }
+    //   // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+    //   k = typeof k !== "undefined" ? k : 1 / 3;
+    //   // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+    //   let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+    //   let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+    //   // 计算高亮效果的放大比例（未高亮，则比例为 1）
+    //   let hoverRate = isHovered ? 1.05 : 1;
+    //   // 返回曲面参数方程
+    //   return {
+    //     u: {
+    //       min: -Math.PI,
+    //       max: Math.PI * 3,
+    //       step: Math.PI / 32,
+    //     },
+    //     v: {
+    //       min: 0,
+    //       max: Math.PI * 2,
+    //       step: Math.PI / 20,
+    //     },
+    //     x: function (u, v) {
+    //       if (u < startRadian) {
+    //         return (
+    //           offsetX +
+    //           Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       if (u > endRadian) {
+    //         return (
+    //           offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+    //     },
+    //     y: function (u, v) {
+    //       if (u < startRadian) {
+    //         return (
+    //           offsetY +
+    //           Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       if (u > endRadian) {
+    //         return (
+    //           offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+    //     },
+    //     z: function (u, v) {
+    //       if (u < -Math.PI * 0.5) {
+    //         return Math.sin(u);
+    //       }
+    //       if (u > Math.PI * 2.5) {
+    //         return Math.sin(u) * h * 0.1;
+    //       }
+    //       return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+    //     },
+    //   };
+    // },
+    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    bindListen(myChart) {
+      let that = this;
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on("click", function (params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        let isSelected =
+          !that.option.series[params.seriesIndex].pieStatus.selected;
+        let isHovered =
+          that.option.series[params.seriesIndex].pieStatus.hovered;
+        let k = that.option.series[params.seriesIndex].pieStatus.k;
+        let startRatio =
+          that.option.series[params.seriesIndex].pieData.startRatio;
+        let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation =
+            that.getParametricEquation(
+              that.option.series[selectedIndex].pieData.startRatio,
+              that.option.series[selectedIndex].pieData.endRatio,
+              false,
+              false,
+              k,
+              that.option.series[selectedIndex].pieData.value
+            );
+          that.option.series[selectedIndex].pieStatus.selected = false;
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation =
+          that.getParametricEquation(
+            startRatio,
+            endRatio,
+            isSelected,
+            isHovered,
+            k,
+            that.option.series[params.seriesIndex].pieData.value
+          );
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? (selectedIndex = params.seriesIndex) : null;
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option);
+      });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", function (params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return;
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio;
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio;
+            k = that.option.series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation =
+              that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[hoveredIndex].pieData.value
+              );
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "pie2d"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              that.option.series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              that.option.series[params.seriesIndex].pieData.startRatio;
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
+            k = that.option.series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation =
+              that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[params.seriesIndex].pieData.value + 5
+              );
+            that.option.series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", function () {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = that.option.series[hoveredIndex].pieStatus.k;
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio;
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation =
+            that.getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              that.option.series[hoveredIndex].pieData.value
+            );
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option);
+      });
+    },
+    //这是一个自定义计算的方法
+    fomatFloat(num, n) {
+      var f = parseFloat(num);
+      if (isNaN(f)) {
+        return false;
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
+      var s = f.toString();
+      var rs = s.indexOf(".");
+      //判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length;
+        s += ".";
+      }
+      while (s.length <= rs + n) {
+        s += "0";
+      }
+      return s;
+    },
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 14,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          color:"#",
+          position: "outside",
+          formatter: (params) => {
+            var total = 0;
+            optionsData.forEach((item, index) => {
+              console.log(item.value);
+              total += item.value;
+            });
+            console.log(total);
+            let percent = ((params.value / total) * 100).toFixed(2);
+            console.log(params);
+            return (
+              `{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+            },
+            colors: {
+              fontSize: 30,
+              color:optionsData[0].itemStyle.color,
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 20,
+            beta: 20,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("fhzb", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+    getEchart() {
+      var chartDom = document.getElementById("pdsydl");
+      var myChart = echarts.init(chartDom);
+      var option;
+      const sideData = [220, 182, 191, 234, 290];
+      const sideData1 = [100, 110, 120, 134, 190];
+
+      option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: [
+            {
+              name: "今日",
+              textStyle: {
+                color: "white",
+              },
+            },
+            {
+              name: "昨日",
+              textStyle: {
+                color: "white",
+              },
+            },
+          ],
+        },
+        grid: {
+          top: "10%",
+          bottom: "62%",
+          right: "15%",
+          containLabel: true,
+        },
+        toolbox: {
+          show: true,
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: "category",
+            splitLine: {
+              show: false,
+            },
+            data: ["1月", "2月", "3月", "4月", "5月"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#fff", //X轴文字颜色
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#fff", //X轴文字颜色
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            tooltip: {
+              show: false,
+            },
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#2d8cf0", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#2d8cf0", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#2d8cf0", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: sideData,
+            barGap: 10,
+          },
+          {
+            name: "昨日",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#09337C", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#0761C0", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#0575DE", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            barGap: 0,
+            data: sideData,
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "white",
+                fontSize: 10,
+              },
+            },
+          },
+          {
+            name: "昨日",
+            tooltip: {
+              show: false,
+            },
+            type: "pictorialBar",
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#0571D5",
+              color: "#288ef3", // 控制顶部方形的颜色
+            },
+            symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
+            symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
+            symbolOffset: ["-10", "-4"], // 控制顶部放行 左右和上下
+            symbolRotate: -16,
+            symbolPosition: "end",
+            data: sideData,
+            z: 3,
+          },
+          {
+            name: "今日",
+            tooltip: {
+              show: false,
+            },
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#15a00f", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#11ad0a", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#19c213", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: sideData1,
+            barGap: 0,
+          },
+          {
+            name: "今日",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#26ec10", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#26ec10", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#26ec10", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            barGap: 0,
+            data: sideData1,
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "white",
+                fontSize: 10,
+              },
+            },
+          },
+          {
+            name: "今日",
+            tooltip: {
+              show: false,
+            },
+            type: "pictorialBar",
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#fff",
+              color: "#26ec10", // 顶部方块的颜色
+            },
+            symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
+            symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
+            symbolOffset: ["10", "-4"], // 控制顶部放行 左右和上下
+            symbolRotate: -16,
+            symbolPosition: "end",
+            data: sideData1,
+            z: 3,
+          },
+        ],
+      };
+
+      myChart.setOption(option, true);
+    },
+  },
+  mounted() {
+    this.defineEcharts("pdsssdh", this.option1);
+    // this.defineEcharts("pdsydl", this.option2);
+    this.pdsydl();
+    // this.getEchart();
+    this.defineEcharts("pdstpt", this.option3);
+    // this.init();
+    this.getbing();
+  },
+};
+</script>
+<style scoped lang="less">
+//饼图底座（我也想给你们底座图片 可是我不知道咋给）
+.buttomCharts {
+  background: center top url("../../../assets/img/底盘.png") no-repeat;
+  background-size: 100% 100%;
+  height: 280px;
+  width: 800px;
+  margin-top: -290px;
+  margin-left: 12%;
+}
+
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  background-image: url(../../../assets/img/左遮罩.png), url(../../../assets/img/右遮罩.png);
+  margin-top: -800px;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+}
+
+.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;
+  }
+
+  .pdsssdh {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+      }
+
+      .active {
+        background: linear-gradient(
+          to right,
+          rgba(33, 76, 124, 0.3) 20%,
+          rgba(152, 207, 230, 0.3) 100%,
+          rgba(33, 76, 124, 0.3) 20%
+        );
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdsssdh {
+      width: 1155px;
+      height: 500px;
+      margin-top: 50px;
+    }
+  }
+
+  .pdsydl {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+      }
+
+      .active {
+        background: linear-gradient(
+          to right,
+          rgba(33, 76, 124, 0.3) 20%,
+          rgba(152, 207, 230, 0.3) 100%,
+          rgba(33, 76, 124, 0.3) 20%
+        );
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdsydl {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+    }
+  }
+
+  .pdstpt {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdstpt {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+        cursor: pointer;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .pdsjk {
+    position: relative;
+    margin-top: 130px;
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      margin-top: 50px;
+
+      #pdsjk {
+        width: 1156px;
+        height: 400px;
+
+        .title {
+          display: flex;
+          align-items: center;
+          color: #fff;
+          font-size: 20px;
+          margin-left: 50px;
+          margin-bottom: 20px;
+
+          span {
+            margin: 0 20px;
+            font-size: 30px;
+            color: #56f671;
+          }
+        }
+
+        /deep/.el-table tr {
+          background: #16253b;
+          color: #fff;
+          font-size: 30px;
+          height: 50px;
+
+          .cell {
+            line-height: 50px;
+          }
+        }
+
+        // 去掉eltable的hover效果
+        ::v-deep .el-table tbody tr:hover > td {
+          background-color: #0b679e !important;
+        }
+
+        //修改表头颜色
+        ::v-deep .has-gutter {
+          background-color: #1969a8;
+
+          th {
+            background-color: #1969a8;
+          }
+        }
+
+        //奇偶行颜色
+        ::v-deep .el-table .success-row {
+          background: #184167;
+        }
+
+        //去掉边框白线
+        ::v-deep .el-table__row > td {
+          border: none;
+        }
+
+        ::v-deep .el-table::before {
+          height: 0px;
+        }
+
+        /* 移除表头的下边框 */
+        ::v-deep .el-table__header th {
+          border-bottom: none;
+        }
+      }
+
+      #fhzb {
+        width: 1156px;
+        height: 500px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/lll/NYJCD/SCX1_20231205101057.vue b/.history/src/views/lll/NYJCD/SCX1_20231205101057.vue
new file mode 100644
index 0000000..5ebf16a
--- /dev/null
+++ b/.history/src/views/lll/NYJCD/SCX1_20231205101057.vue
@@ -0,0 +1,2210 @@
+<template>
+  <div class="box">
+    <div class="left">
+      <img class="title" :src="src" />
+      <div class="pdsssdh">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线实时负荷</p> -->
+
+          <p>{{ $route.query.type }}实时电荷</p>
+        </div>
+        <div class="data">
+          <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+            >年</span
+          >
+          <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+            >月</span
+          >
+          <span :class="res == '日' ? 'active' : ''" @click="res = '日'"
+            >日</span
+          >
+        </div>
+        <div id="pdsssdh"></div>
+      </div>
+      <div class="pdsydl">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电量</p> -->
+          <p>{{ $route.query.type }}用电量</p>
+        </div>
+        <div class="data">
+          <span
+            :class="type == '总用电' ? 'active' : ''"
+            @click="type = '总用电'"
+            >总用电</span
+          >
+          <span
+            :class="type == '分时段' ? 'active' : ''"
+            @click="type = '分时段'"
+            >分时段</span
+          >
+        </div>
+        <div id="pdsydl"></div>
+      </div>
+      <div class="pdstpt">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电量对比</p> -->
+          <p>{{ $route.query.type }}用电量对比</p>
+        </div>
+        <div id="pdstpt">
+          <div class="data">
+            <span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
+              >年</span
+            >
+            <span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
+              >月</span
+            >
+            <span :class="res1 == '日' ? 'active' : ''" @click="res1 = '日'"
+              >日</span
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线监控</p> -->
+          <p>{{ $route.query.type }}监控</p>
+        </div>
+        <div class="chartBox">
+          <div id="pdsjk">
+            <div class="title">
+              <p>设备数量：</p>
+              <span>5</span>
+              <p>个</p>
+            </div>
+            <el-table
+              :data="tableData"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
+              <el-table-column label="序号" align="center">
+                <template slot-scope="scope">
+                  {{ scope.$index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="date1"
+                label="生产工艺名称"
+                align="center"
+                width="300px"
+              >
+              </el-table-column>
+              <el-table-column prop="date2" label="实时电荷" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58ff70"> {{ scope.row.date2 }}</span
+                  ><span>kW</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date3" label="今日用电量" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58caff"> {{ scope.row.date3 }}</span
+                  ><span>kWh</span>
+                </template>
+              </el-table-column>
+              <el-table-column prop="date2" label="设备状态" align="center"
+                ><template slot-scope="scope">
+                  <span v-if="scope.row.date4"
+                    ><img src="../../../assets/KDFH/tongguo.png"
+                  /></span>
+                  <span v-else
+                    ><img src="../../../assets/KDFH/jinggao.png"
+                  /></span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线监控</p> -->
+          <p>负荷占比</p>
+        </div>
+        <div class="chartBox">
+          <div id="fhzb"></div>
+          <!-- 饼图下面的底座 -->
+          <div class="buttomCharts"></div>
+        </div>
+      </div>
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <!-- <p>一号生产线用电排名</p> -->
+          <p>{{ $route.query.type }}用电排名</p>
+        </div>
+        <div class="chartBox">
+          <div id="pdsjk">
+            <el-table
+              :data="tableData1"
+              :row-class-name="tableRowClassName"
+              style="width: 100%"
+              :header-cell-style="getHeaderCellStyle"
+            >
+              <el-table-column label="序号" align="center">
+                <template slot-scope="scope">
+                  {{ scope.$index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="date1"
+                label="配电室名称"
+                align="center"
+                width="300px"
+              >
+              </el-table-column>
+              <el-table-column prop="date2" label="用电量" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58caff"> {{ scope.row.date2 }}</span
+                  ><span>kWh</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import highcharts from "highcharts";
+export default {
+  data() {
+    return {
+      res: "月",
+      res1: "月",
+      type: "总用电",
+      src: "",
+      option1: {
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:KW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 500,
+          interval: 100, // 指定刻度间隔
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [200, 300, 500, 400, 334],
+            itemStyle: {
+              normal: {
+                color: "#00FF00",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21FF55", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      },
+      //   option2: {
+      //     legend: {
+      //       data: [
+      //         { icon: "rect", name: "昨日" },
+      //         { icon: "rect", name: "今日" },
+      //       ],
+      //       textStyle: {
+      //         color: "#fff",
+      //         fontSize: "20px",
+      //       },
+      //     },
+      //     xAxis: {
+      //       type: "category",
+      //       data: ["1月", "2月", "3月", "4月", "5月"],
+      //       axisLabel: {
+      //         show: true,
+      //         textStyle: {
+      //           color: "#fff",
+      //           fontSize: 20,
+      //         },
+      //         interval: 0, //代表显示所有x轴标签显示
+      //       },
+      //     },
+      //     yAxis: {
+      //       type: "value",
+      //       name: "单位:kWh",
+      //       nameTextStyle: {
+      //         color: "#fff",
+      //         fontSize: 20,
+      //         padding: 10,
+      //       },
+      //       min: 0,
+      //       max: 500,
+      //       interval: 100, // 指定刻度间隔
+      //       axisLabel: {
+      //         show: true,
+      //         textStyle: {
+      //           color: "#fff",
+      //           fontSize: 20,
+      //         },
+      //       },
+      //     },
+      //     grid: {
+      //       // 让图表占满容器
+      //       //   top: "5%",
+      //       left: "8%",
+      //       right: "5%",
+      //       bottom: "8%",
+      //     },
+      //     series: [
+      //       {
+      //         type: "bar",
+      //         name: "昨日",
+      //         data: [200, 300, 500, 400, 334],
+      //         itemStyle: {
+      //           normal: {
+      //             color: "#11C3FF",
+      //             lineStyle: {
+      //               width: 5, //折线宽度
+      //               color: "#11C3FF", //折线颜色
+      //             },
+      //           },
+      //         },
+      //       },
+      //       {
+      //         type: "bar",
+      //         name: "今日",
+      //         data: [200, 300, 500, 400, 334],
+      //         itemStyle: {
+      //           normal: {
+      //             color: "#09E83E",
+      //             lineStyle: {
+      //               width: 5, //折线宽度
+      //               color: "#09E83E", //折线颜色
+      //             },
+      //           },
+      //         },
+      //       },
+      //     ],
+      //   },
+      option3: {
+        legend: {
+          data: [
+            { icon: "rect", name: "昨日" },
+            { icon: "rect", name: "今日" },
+          ],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          boundaryGap: [0, 0.01],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: ["生料磨", "生料收尘", "篦冷机", "熟料收尘", "回转窑"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        series: [
+          {
+            name: "昨日",
+            type: "bar",
+            data: [45, 55, 17, 60, 12],
+            itemStyle: {
+              color: "#3AF0FF", //折线颜色
+            },
+          },
+          {
+            name: "今日",
+            type: "bar",
+            data: [65, 65, 36, 19, 30],
+            itemStyle: {
+              color: "#5BFAB1", //折线颜色
+            },
+          },
+        ],
+      },
+      tableData: [
+        {
+          date1: "回转窑",
+          date2: "20.34",
+          date3: "20.34",
+          date4: true,
+        },
+        {
+          date1: "熟料收尘",
+          date2: "17.42",
+          date3: "17.42",
+          date4: true,
+        },
+        {
+          date1: "篦冷机",
+          date2: "12.22",
+          date3: "12.22",
+          date4: true,
+        },
+        {
+          date1: "生料收尘",
+          date2: "19.19",
+          date3: "19.19",
+          date4: false,
+        },
+      ],
+      tableData1: [
+        {
+          date1: "总降电力室",
+          date2: "20.34",
+        },
+        {
+          date1: "矿山电力室",
+          date2: "17.42",
+        },
+        {
+          date1: "原材料电力室",
+          date2: "12.22",
+        },
+        {
+          date1: "一线生料磨电力室",
+          date2: "19.19",
+        },
+        {
+          date1: "二线生料磨电力室",
+          date2: "17.42",
+        },
+        {
+          date1: "窑尾电力室",
+          date2: "12.22",
+        },
+      ],
+      optionData: [
+        {
+          name: "破碎系统",
+          value: 38,
+          itemStyle: {
+            color: "rgba(1, 224, 239,0.9)",
+          },
+        },
+        {
+          name: "生料系统", //名称
+          value: 41, //值
+          itemStyle: {
+            //颜色
+            color: "rgba(26, 166, 228,0.9)",
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 21,
+          itemStyle: {
+            color: "rgba(81, 244, 193,0.9)",
+          },
+        },
+      ],
+      option: {},
+    };
+  },
+  watch: {
+    // 监听,当路由发生变化的时候执行
+    $route: {
+      // $route可以用引号，也可以不用引号
+      handler(to, from) {
+        this.src = require(`../../../assets/img/标题/能源监测-电-${this.$route.query.type}.png`);
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    },
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
+    //配电室用电量  3d
+    pdsydl() {
+      let xaxisData = ["1月", "2月", "3月", "4月", "5月"];
+      let yaxisData = [90, 80, 100, 70, 65];
+      let yaxisData2 = [60, 56, 34, 69, 79];
+
+      //拿到最大值
+      const maxValue = Math.max(...yaxisData);
+      const maxValue2 = Math.max(...yaxisData2);
+
+      const offsetX = 15;
+      const offsetY = 5;
+      // 绘制左侧面
+      const CubeLeft = echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          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);
+
+      let option = {
+        legend: {
+          data: [
+            { icon: "rect", name: "昨日" },
+            { icon: "rect", name: "今日" },
+          ],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        // tooltip: {
+        //   trigger: "axis",
+        //   axisPointer: {
+        //     type: "shadow",
+        //   },
+        //   backgroundColor: "rgba(255,255,255,0.75)",
+        //   extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
+        //   textStyle: {
+        //     fontSize: 20,
+        //     color: "#000",
+        //   },
+        //   formatter: (params, ticket, callback) => {
+        //     const item = params[1];
+        //     return item.name + " : " + item.value + " 个";
+        //   },
+        // },
+        grid: {
+          left: "1%",
+          right: "0%",
+          top: "16%",
+          bottom: "5%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xaxisData,
+          axisLine: {
+            show: true,
+            // lineStyle: {
+            //   width: 1,
+            // },
+          },
+          axisTick: {
+            show: true,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#FFFFFF",
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:kWh",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+          },
+          splitLine: {
+            show: true,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#FFFFFF",
+          },
+        },
+        series: [
+          {
+            type: "bar",
+            itemStyle: {
+              color: "transparent",
+            },
+            data: yaxisData,
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                formatter: (e) => {
+                  return e.value === maxValue ? e.value : "";
+                },
+                fontSize: 20,
+                color: "#02C262",
+                offset: [0, -15],
+              },
+            },
+          },
+          {
+            type: "bar",
+            itemStyle: {
+              color: "transparent",
+            },
+            data: yaxisData2,
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                formatter: (e) => {
+                  return e.value === maxValue2 ? e.value : "";
+                },
+                fontSize: 20,
+                color: "#3286FF",
+                offset: [0, -15],
+              },
+            },
+          },
+
+          {
+            type: "custom",
+            name: "今日",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              const xAxisPoint = api.coord([api.value(0), 0]);
+              const distance = 50;
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#10C6FF",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#377DFF",
+                        },
+                        {
+                          offset: 1,
+                          color: "#4464FF",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#0673D5",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#0B68D5",
+                        },
+                        {
+                          offset: 1,
+                          color: "#115DD5",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0] - distance,
+                      y: location[1],
+                      xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
+                    },
+                    style: {
+                      fill: "#0964FF",
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData2,
+          },
+          {
+            type: "custom",
+            name: "昨日",
+            barCategoryGap: "20%",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#08E83C",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#1FE77D",
+                        },
+                        {
+                          offset: 1,
+                          color: "#38E7C5",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: "#00C25D",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#05C269",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0BC27B",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: "#05E861",
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
+        ],
+      };
+
+      this.defineEcharts("pdsydl", option);
+    },
+    // //初始化构建
+    // init() {
+    //   //构建3d饼状图
+    //   let myChart = this.$echarts.init(document.getElementById("fhzb"));
+    //   // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
+    //   this.option = this.getPie3D(this.optionData, 0.8);
+    //   //将配置项设置进去
+    //   myChart.setOption(this.option);
+    //   //鼠标移动上去特效效果
+    //   this.bindListen(myChart);
+    // },
+    // //配置构建 pieData 饼图数据 internalDiameterRatio:透明的空心占比
+    // getPie3D(pieData, internalDiameterRatio) {
+    //   let that = this;
+    //   let series = [];
+    //   let sumValue = 0;
+    //   let startValue = 0;
+    //   let endValue = 0;
+    //   let legendData = [];
+    //   let legendBfb = [];
+    //   let k = 1 - internalDiameterRatio;
+    //   pieData.sort((a, b) => {
+    //     return b.value - a.value;
+    //   });
+    //   // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
+    //   for (let i = 0; i < pieData.length; i++) {
+    //     sumValue += pieData[i].value;
+    //     let seriesItem = {
+    //       //系统名称
+    //       name:
+    //         typeof pieData[i].name === "undefined"
+    //           ? `series${i}`
+    //           : pieData[i].name,
+    //       type: "surface",
+    //       //是否为参数曲面（是）
+    //       parametric: true,
+    //       //曲面图网格线（否）上面一根一根的
+    //       wireframe: {
+    //         show: false,
+    //       },
+    //       pieData: pieData[i],
+    //       pieStatus: {
+    //         selected: false,
+    //         hovered: false,
+    //         k: k,
+    //       },
+    //       //设置饼图在容器中的位置(目前没发现啥用)
+    //       center: ["80%", "100%"],
+    //       radius: "60%",
+    //     };
+    //     //曲面的颜色、不透明度等样式。
+    //     if (typeof pieData[i].itemStyle != "undefined") {
+    //       let itemStyle = {};
+    //       typeof pieData[i].itemStyle.color != "undefined"
+    //         ? (itemStyle.color = pieData[i].itemStyle.color)
+    //         : null;
+    //       typeof pieData[i].itemStyle.opacity != "undefined"
+    //         ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+    //         : null;
+    //       seriesItem.itemStyle = itemStyle;
+    //     }
+    //     series.push(seriesItem);
+    //   }
+    //   // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+    //   // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+    //   legendData = [];
+    //   legendBfb = [];
+    //   for (let i = 0; i < series.length; i++) {
+    //     endValue = startValue + series[i].pieData.value;
+    //     series[i].pieData.startRatio = startValue / sumValue;
+    //     series[i].pieData.endRatio = endValue / sumValue;
+    //     series[i].parametricEquation = that.getParametricEquation(
+    //       series[i].pieData.startRatio,
+    //       series[i].pieData.endRatio,
+    //       false,
+    //       false,
+    //       k,
+    //       series[i].pieData.value
+    //     );
+
+    //     startValue = endValue;
+    //     let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
+    //     legendData.push({
+    //       name: series[i].name,
+    //       value: bfb,
+    //     });
+    //     legendBfb.push({
+    //       name: series[i].name,
+    //       value: bfb,
+    //     });
+    //   }
+
+    //   //(第二个参数可以设置你这个环形的高低程度)
+    //   let boxHeight = this.getHeight3D(series, 15); //通过传参设定3d饼/环的高度
+    //   // 准备待返回的配置项，把准备好的 legendData、series 传入。
+    //   let option = {
+    //     //移动上去提示的文本内容(我没来得及改 你们可以根据需求改)
+    //     tooltip: {
+    //       formatter: (params) => {
+    //         if (
+    //           params.seriesName !== "mouseoutSeries" &&
+    //           params.seriesName !== "pie2d"
+    //         ) {
+    //           let bfb = (
+    //             (this.option.series[params.seriesIndex].pieData.endRatio -
+    //               this.option.series[params.seriesIndex].pieData.startRatio) *
+    //             100
+    //           ).toFixed(2);
+    //           return (
+    //             `${params.seriesName}<br/>` +
+    //             `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>` +
+    //             `${bfb}%`
+    //           );
+    //         }
+    //       },
+    //     },
+    //     label: {
+    //       // normal: {
+    //       //   show: true,
+    //       //   position: "right",
+    //       //   formatter: "{b} \n{c} {d}%",
+    //       // },
+
+    //       normal: {
+    //         show: true,
+    //         color: "#fff",
+    //         position: "right",
+    //         // distance:-10,
+    //         offset: [0, 3],
+    //         formatter: [
+    //           "{d|{d}%}",
+    //           "————",
+    //           //   '{c|{c}}{b|台}',
+    //           "{b|{b}}",
+    //         ].join("\n"), // 用\n来换行
+    //         rich: {
+    //           b: {
+    //             lineHeight: 25,
+    //             align: "left",
+    //             color: "#fff",
+    //           },
+    //           c: {
+    //             fontSize: 22,
+    //             // color: '#fff',
+    //             textShadowColor: "#1c90a6",
+    //             textShadowOffsetX: 0,
+    //             textShadowOffsetY: 2,
+    //             textShadowBlur: 5,
+    //             color: "#fff",
+    //           },
+    //           d: {
+    //             color: "#fff",
+    //             align: "left",
+    //           },
+    //         },
+    //       },
+    //     },
+    //     labelLine: {
+    //       // normal: {
+    //       //   show: true,
+    //       //   lineStyle: {
+    //       //     color: "#7BC0CB",
+    //       //   },
+    //       //   length: 0,
+    //       //   length2: 100000,
+    //       // },
+
+    //       normal: {
+    //         show: true,
+    //         length2: 30,
+    //         lineStyle: {
+    //           width: 1,
+    //           color: "#fff",
+    //         },
+    //       },
+    //     },
+
+    //     //这个可以变形
+    //     xAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     yAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     zAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     //此处是修改样式的重点
+    //     grid3D: {
+    //       show: false,
+    //       boxHeight: boxHeight, //圆环的高度
+    //       //这是饼图的位置
+    //       top: "-20.5%",
+    //       left: "-4%",
+    //       viewControl: {
+    //         //3d效果可以放大、旋转等，请自己去查看官方配置
+    //         alpha: 25, //角度(这个很重要 调节角度的)
+    //         distance: 160, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+    //         rotateSensitivity: 0, //设置为0无法旋转
+    //         zoomSensitivity: 0, //设置为0无法缩放
+    //         panSensitivity: 0, //设置为0无法平移
+    //         autoRotate: false, //自动旋转
+    //       },
+    //     },
+    //     series: series,
+    //   };
+    //   return option;
+    // },
+    //获取3d丙图的最高扇区的高度
+    // getHeight3D(series, height) {
+    //   series.sort((a, b) => {
+    //     return b.pieData.value - a.pieData.value;
+    //   });
+    //   return (height * 25) / series[0].pieData.value;
+    // },
+    // // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    // getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+    //   // 计算
+    //   let midRatio = (startRatio + endRatio) / 2;
+    //   let startRadian = startRatio * Math.PI * 2;
+    //   let endRadian = endRatio * Math.PI * 2;
+    //   let midRadian = midRatio * Math.PI * 2;
+    //   // 如果只有一个扇形，则不实现选中效果。
+    //   if (startRatio === 0 && endRatio === 1) {
+    //     isSelected = false;
+    //   }
+    //   // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+    //   k = typeof k !== "undefined" ? k : 1 / 3;
+    //   // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+    //   let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+    //   let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+    //   // 计算高亮效果的放大比例（未高亮，则比例为 1）
+    //   let hoverRate = isHovered ? 1.05 : 1;
+    //   // 返回曲面参数方程
+    //   return {
+    //     u: {
+    //       min: -Math.PI,
+    //       max: Math.PI * 3,
+    //       step: Math.PI / 32,
+    //     },
+    //     v: {
+    //       min: 0,
+    //       max: Math.PI * 2,
+    //       step: Math.PI / 20,
+    //     },
+    //     x: function (u, v) {
+    //       if (u < startRadian) {
+    //         return (
+    //           offsetX +
+    //           Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       if (u > endRadian) {
+    //         return (
+    //           offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+    //     },
+    //     y: function (u, v) {
+    //       if (u < startRadian) {
+    //         return (
+    //           offsetY +
+    //           Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       if (u > endRadian) {
+    //         return (
+    //           offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+    //     },
+    //     z: function (u, v) {
+    //       if (u < -Math.PI * 0.5) {
+    //         return Math.sin(u);
+    //       }
+    //       if (u > Math.PI * 2.5) {
+    //         return Math.sin(u) * h * 0.1;
+    //       }
+    //       return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+    //     },
+    //   };
+    // },
+    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    bindListen(myChart) {
+      let that = this;
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on("click", function (params) {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        let isSelected =
+          !that.option.series[params.seriesIndex].pieStatus.selected;
+        let isHovered =
+          that.option.series[params.seriesIndex].pieStatus.hovered;
+        let k = that.option.series[params.seriesIndex].pieStatus.k;
+        let startRatio =
+          that.option.series[params.seriesIndex].pieData.startRatio;
+        let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+          that.option.series[selectedIndex].parametricEquation =
+            that.getParametricEquation(
+              that.option.series[selectedIndex].pieData.startRatio,
+              that.option.series[selectedIndex].pieData.endRatio,
+              false,
+              false,
+              k,
+              that.option.series[selectedIndex].pieData.value
+            );
+          that.option.series[selectedIndex].pieStatus.selected = false;
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        that.option.series[params.seriesIndex].parametricEquation =
+          that.getParametricEquation(
+            startRatio,
+            endRatio,
+            isSelected,
+            isHovered,
+            k,
+            that.option.series[params.seriesIndex].pieData.value
+          );
+        that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        isSelected ? (selectedIndex = params.seriesIndex) : null;
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option);
+      });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", function (params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          return;
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected = that.option.series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio = that.option.series[hoveredIndex].pieData.startRatio;
+            endRatio = that.option.series[hoveredIndex].pieData.endRatio;
+            k = that.option.series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            that.option.series[hoveredIndex].parametricEquation =
+              that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[hoveredIndex].pieData.value
+              );
+            that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "pie2d"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              that.option.series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              that.option.series[params.seriesIndex].pieData.startRatio;
+            endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
+            k = that.option.series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            that.option.series[params.seriesIndex].parametricEquation =
+              that.getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                that.option.series[params.seriesIndex].pieData.value + 5
+              );
+            that.option.series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(that.option);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", function () {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = that.option.series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = that.option.series[hoveredIndex].pieStatus.k;
+          startRatio = that.option.series[hoveredIndex].pieData.startRatio;
+          endRatio = that.option.series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          that.option.series[hoveredIndex].parametricEquation =
+            that.getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              that.option.series[hoveredIndex].pieData.value
+            );
+          that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(that.option);
+      });
+    },
+    //这是一个自定义计算的方法
+    fomatFloat(num, n) {
+      var f = parseFloat(num);
+      if (isNaN(f)) {
+        return false;
+      }
+      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
+      var s = f.toString();
+      var rs = s.indexOf(".");
+      //判定如果是整数，增加小数点再补0
+      if (rs < 0) {
+        rs = s.length;
+        s += ".";
+      }
+      while (s.length <= rs + n) {
+        s += "0";
+      }
+      return s;
+    },
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
+
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 14,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          color:"#",
+          position: "outside",
+          formatter: (params) => {
+            var total = 0;
+            optionsData.forEach((item, index) => {
+              console.log(item.value);
+              total += item.value;
+            });
+            console.log(total);
+            let percent = ((params.value / total) * 100).toFixed(2);
+            console.log(params);
+            return (
+              `{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+            },
+            colors: {
+              fontSize: 30,
+              color:optionsData[0].itemStyle.color,
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("fhzb", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
+    getEchart() {
+      var chartDom = document.getElementById("pdsydl");
+      var myChart = echarts.init(chartDom);
+      var option;
+      const sideData = [220, 182, 191, 234, 290];
+      const sideData1 = [100, 110, 120, 134, 190];
+
+      option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: [
+            {
+              name: "今日",
+              textStyle: {
+                color: "white",
+              },
+            },
+            {
+              name: "昨日",
+              textStyle: {
+                color: "white",
+              },
+            },
+          ],
+        },
+        grid: {
+          top: "10%",
+          bottom: "62%",
+          right: "15%",
+          containLabel: true,
+        },
+        toolbox: {
+          show: true,
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: "category",
+            splitLine: {
+              show: false,
+            },
+            data: ["1月", "2月", "3月", "4月", "5月"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#fff", //X轴文字颜色
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#fff", //X轴文字颜色
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            tooltip: {
+              show: false,
+            },
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#2d8cf0", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#2d8cf0", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#2d8cf0", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: sideData,
+            barGap: 10,
+          },
+          {
+            name: "昨日",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#09337C", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#0761C0", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#0575DE", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            barGap: 0,
+            data: sideData,
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "white",
+                fontSize: 10,
+              },
+            },
+          },
+          {
+            name: "昨日",
+            tooltip: {
+              show: false,
+            },
+            type: "pictorialBar",
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#0571D5",
+              color: "#288ef3", // 控制顶部方形的颜色
+            },
+            symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
+            symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
+            symbolOffset: ["-10", "-4"], // 控制顶部放行 左右和上下
+            symbolRotate: -16,
+            symbolPosition: "end",
+            data: sideData,
+            z: 3,
+          },
+          {
+            name: "今日",
+            tooltip: {
+              show: false,
+            },
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#15a00f", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#11ad0a", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#19c213", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: sideData1,
+            barGap: 0,
+          },
+          {
+            name: "今日",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#26ec10", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#26ec10", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#26ec10", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            barGap: 0,
+            data: sideData1,
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "white",
+                fontSize: 10,
+              },
+            },
+          },
+          {
+            name: "今日",
+            tooltip: {
+              show: false,
+            },
+            type: "pictorialBar",
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#fff",
+              color: "#26ec10", // 顶部方块的颜色
+            },
+            symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
+            symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
+            symbolOffset: ["10", "-4"], // 控制顶部放行 左右和上下
+            symbolRotate: -16,
+            symbolPosition: "end",
+            data: sideData1,
+            z: 3,
+          },
+        ],
+      };
+
+      myChart.setOption(option, true);
+    },
+  },
+  mounted() {
+    this.defineEcharts("pdsssdh", this.option1);
+    // this.defineEcharts("pdsydl", this.option2);
+    this.pdsydl();
+    // this.getEchart();
+    this.defineEcharts("pdstpt", this.option3);
+    // this.init();
+    this.getbing();
+  },
+};
+</script>
+<style scoped lang="less">
+//饼图底座（我也想给你们底座图片 可是我不知道咋给）
+.buttomCharts {
+  background: center top url("../../../assets/img/底盘.png") no-repeat;
+  background-size: 100% 100%;
+  height: 280px;
+  width: 800px;
+  margin-top: -290px;
+  margin-left: 12%;
+}
+
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  background-image: url(../../../assets/img/左遮罩.png), url(../../../assets/img/右遮罩.png);
+  margin-top: -800px;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+}
+
+.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;
+  }
+
+  .pdsssdh {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+      }
+
+      .active {
+        background: linear-gradient(
+          to right,
+          rgba(33, 76, 124, 0.3) 20%,
+          rgba(152, 207, 230, 0.3) 100%,
+          rgba(33, 76, 124, 0.3) 20%
+        );
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdsssdh {
+      width: 1155px;
+      height: 500px;
+      margin-top: 50px;
+    }
+  }
+
+  .pdsydl {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+      }
+
+      .active {
+        background: linear-gradient(
+          to right,
+          rgba(33, 76, 124, 0.3) 20%,
+          rgba(152, 207, 230, 0.3) 100%,
+          rgba(33, 76, 124, 0.3) 20%
+        );
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdsydl {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+    }
+  }
+
+  .pdstpt {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+      cursor: pointer;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #pdstpt {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+
+      .data {
+        position: absolute;
+        font-size: 20px;
+        font-family: "DOUYU";
+        color: #ffffff;
+        line-height: 18px;
+        display: flex;
+        right: 0;
+        top: 120px;
+        z-index: 1;
+        cursor: pointer;
+
+        span {
+          width: 122px;
+          height: 38px;
+          margin: 10px;
+          display: block;
+          line-height: 38px;
+          text-align: center;
+        }
+
+        .active {
+          background: linear-gradient(
+            to right,
+            rgba(33, 76, 124, 0.3) 20%,
+            rgba(152, 207, 230, 0.3) 100%,
+            rgba(33, 76, 124, 0.3) 20%
+          );
+        }
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .pdsjk {
+    position: relative;
+    margin-top: 130px;
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      margin-top: 50px;
+
+      #pdsjk {
+        width: 1156px;
+        height: 400px;
+
+        .title {
+          display: flex;
+          align-items: center;
+          color: #fff;
+          font-size: 20px;
+          margin-left: 50px;
+          margin-bottom: 20px;
+
+          span {
+            margin: 0 20px;
+            font-size: 30px;
+            color: #56f671;
+          }
+        }
+
+        /deep/.el-table tr {
+          background: #16253b;
+          color: #fff;
+          font-size: 30px;
+          height: 50px;
+
+          .cell {
+            line-height: 50px;
+          }
+        }
+
+        // 去掉eltable的hover效果
+        ::v-deep .el-table tbody tr:hover > td {
+          background-color: #0b679e !important;
+        }
+
+        //修改表头颜色
+        ::v-deep .has-gutter {
+          background-color: #1969a8;
+
+          th {
+            background-color: #1969a8;
+          }
+        }
+
+        //奇偶行颜色
+        ::v-deep .el-table .success-row {
+          background: #184167;
+        }
+
+        //去掉边框白线
+        ::v-deep .el-table__row > td {
+          border: none;
+        }
+
+        ::v-deep .el-table::before {
+          height: 0px;
+        }
+
+        /* 移除表头的下边框 */
+        ::v-deep .el-table__header th {
+          border-bottom: none;
+        }
+      }
+
+      #fhzb {
+        width: 1156px;
+        height: 500px;
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/lll/NYJCD_20231205100405.vue b/.history/src/views/lll/NYJCD_20231205100405.vue
new file mode 100644
index 0000000..ecc5422
--- /dev/null
+++ b/.history/src/views/lll/NYJCD_20231205100405.vue
@@ -0,0 +1,1076 @@
+<template>
+  <div class="box">
+    <div class="imgLeft">
+      <div
+        @click="goOne('1号生产线')"
+        :class="click1 == '1号生产线' ? 'active' : ''"
+      >
+        1号生产线
+      </div>
+      <div
+        @click="goOne('2号生产线')"
+        :class="click1 == '2号生产线' ? 'active' : ''"
+      >
+        2号生产线
+      </div>
+      <div
+        @click="goOne('3号生产线')"
+        :class="click1 == '3号生产线' ? 'active' : ''"
+      >
+        3号生产线
+      </div>
+      <div @click="goOne('配电室')" :class="click1 == '配电室' ? 'active' : ''">
+        配电室
+      </div>
+    </div>
+
+    <div class="imgRight">
+      <div
+        @click="goTwo('破碎系统')"
+        :class="click2 == '破碎系统' ? 'active' : ''"
+      >
+        破碎系统
+      </div>
+      <div
+        @click="goTwo('生料系统')"
+        :class="click2 == '生料系统' ? 'active' : ''"
+      >
+        生料系统
+      </div>
+      <div
+        @click="goTwo('回转窑系统')"
+        :class="click2 == '回转窑系统' ? 'active' : ''"
+      >
+        回转窑系统
+      </div>
+      <div
+        @click="goTwo('煤磨系统')"
+        :class="click2 == '煤磨系统' ? 'active' : ''"
+      >
+        煤磨系统
+      </div>
+      <div
+        @click="goTwo('水泥磨系统')"
+        :class="click2 == '水泥磨系统' ? 'active' : ''"
+      >
+        水泥磨系统
+      </div>
+    </div>
+
+    <div class="left" v-show="flag">
+      <img src="../../assets/img/标题/能源监测-电.png" class="title" />
+      <div class="qcssdh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>全厂实时电荷</p>
+        </div>
+        <div class="data">
+          <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+            >年</span
+          >
+          <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+            >月</span
+          >
+          <span :class="res == '日' ? 'active' : ''" @click="res = '日'"
+            >日</span
+          >
+        </div>
+        <div id="qcssdh"></div>
+      </div>
+      <div class="qcydl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>全厂用电量</p>
+        </div>
+        <div class="chartBox">
+          <div class="chartbox" v-for="item in list">
+            <span>{{ item.name }}</span>
+            <div class="bigBox">
+              <div
+                class="smallBox"
+                :style="{ width: `${35 * item.value}px` }"
+              ></div>
+            </div>
+            <span>{{ item.value }}kWh</span>
+          </div>
+        </div>
+      </div>
+      <div class="zjtpt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>总降拓扑图</p>
+        </div>
+        <div class="imgBox1">
+          <el-image
+            v-for="item in arr"
+            :src="item.url"
+            :preview-src-list="item.srcList"
+          >
+          </el-image>
+        </div>
+      </div>
+    </div>
+
+    <div class="right" v-show="flag">
+      <div class="yrfd">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>余热发电</p>
+        </div>
+        <div class="chartBox">
+          <div id="yrfd"></div>
+        </div>
+      </div>
+      <div class="ljfdl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>垃圾发电量</p>
+        </div>
+        <div class="chartBox">
+          <div id="ljfdl"></div>
+        </div>
+      </div>
+      <div class="qcsbydpm">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>全厂设备用电排名</p>
+        </div>
+        <div class="chartBox">
+          <div class="chartbox" v-for="item in list1">
+            <span>{{ item.name }}</span>
+            <div class="bigBox">
+              <div
+                class="smallBox"
+                :style="{ width: `${40 * item.value}px` }"
+              ></div>
+            </div>
+            <span>{{ item.value }}kWh</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="area1">
+      <router-view />
+    </div>
+  </div>
+</template>
+<script>
+import { RouterView } from "vue-router";
+import * as echarts from "echarts";
+import Viewer from "viewerjs";
+export default {
+  data() {
+    return {
+      res: "月",
+      click1: "",
+      click2: "",
+      flag: false,
+      option1: {
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:KW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 500,
+          interval: 100,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [200, 300, 500, 400, 334],
+            itemStyle: {
+              normal: {
+                color: "#00FF00",
+                lineStyle: {
+                  width: 5,
+                  color: "#21FF55", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        legend: {
+          data: [{ icon: "rect", name: "垃圾发电量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:KW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 500,
+          interval: 100,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "垃圾发电量",
+            symbolSize: 15,
+            data: [200, 300, 500, 400, 334],
+            itemStyle: {
+              normal: {
+                color: "#43FFF4",
+                lineStyle: {
+                  width: 5,
+                  color: "#43FFF4", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      },
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "6.21",
+        },
+        {
+          name: "3号生产线",
+          value: "6.21",
+        },
+        {
+          name: "生活办公区",
+          value: "6.52",
+        },
+      ],
+      list1: [
+        {
+          name: "回转窑",
+          value: "15.20",
+        },
+        {
+          name: "熟料收尘",
+          value: "6.21",
+        },
+        {
+          name: "篦冷机",
+          value: "6.21",
+        },
+        {
+          name: "生料收尘",
+          value: "6.52",
+        },
+        {
+          name: "生料磨",
+          value: "4.57",
+        },
+        {
+          name: "预热器",
+          value: "4.27",
+        },
+        {
+          name: "配电室",
+          value: "3.27",
+        },
+      ],
+      arr: [
+        {
+          url: require("../../assets/tpt/总降电力室.png"),
+          srcList: [require("../../assets/tpt/总降电力室.png")],
+        },
+      ],
+    };
+  },
+  methods: {
+    initViewer() {
+      this.viewer = new Viewer(this.$el, {
+        inline: false,
+        button: true,
+        navbar: true,
+        title: false,
+        toolbar: true,
+        tooltip: true,
+        movable: false,
+        zoomable: true,
+        rotatable: false,
+        scalable: true,
+        transition: true,
+        fullscreen: true,
+        keyboard: true,
+        url(image) {
+          console.log(image.src);
+          return image.src;
+        },
+        ready() {
+          console.log("Viewer is ready");
+        },
+      });
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    sendMessageToCSharp(name) {
+      window.vuplex.postMessage({
+        type: "Tog",
+        message: `${name}_true`,
+      });
+    },
+    goOne(a) {
+      this.click2 = "";
+      this.click1 = a;
+      // this.sendMessageToCSharp(this.click1);
+      if (this.click1 == "配电室") {
+        this.$router.replace(
+          "/area/nyjcd/pds",
+          () => {},
+          () => {}
+        );
+      } else {
+        this.$router.replace(
+          `/area/nyjcd/scx1?type=${this.click1}`,
+          () => {},
+          () => {}
+        );
+      }
+    },
+    goTwo(a) {
+      this.click1 = "";
+      this.click2 = a;
+      this.sendMessageToCSharp(this.click2);
+      this.$router.replace(
+        `/area/nyjcd/scx1?type=${this.click2}`,
+        () => {},
+        () => {}
+      );
+    },
+    //余热发电  3d
+    yrfd() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月"];
+      let seriesData = [100, 200, 300, 400, 300];
+      //拿到最大值
+      const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#04E886"],
+        ["#0AE841", "rgba(56,231,197,1)"],
+        ["#02C25F", "rgba(11,194,121,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   // data: [
+        //   //   {
+        //   //     icon: "rect",
+        //   //     name: "余热发电",
+        //   //   },
+        //   // ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "余热发电",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                formatter: (e) => {
+                  return e.value === maxValue ? e.value : "";
+                },
+                fontSize: 20,
+                color: "#09E83E",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("yrfd", option);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // }
+    // function addMessageListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   });
+    // }
+  },
+  watch: {
+    // 监听,当路由发生变化的时候执行
+    $route: {
+      handler(to, from) {
+        if (to.path == "/area/nyjcd") {
+          this.flag = true;
+        } else {
+          this.flag = false;
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    },
+  },
+  mounted() {
+    let dom = document.querySelector(".area1");
+    dom.style.pointerEvents = "none";
+    this.initViewer();
+    this.defineEcharts("qcssdh", this.option1);
+    // this.defineEcharts("yrfd", this.option2);
+    this.yrfd();
+    this.defineEcharts("ljfdl", this.option3);
+  },
+  beforeDestroy() {
+    if (this.viewer) {
+      this.viewer.destroy();
+    }
+  },
+  components: { RouterView },
+};
+</script>
+<style lang="less" scoped>
+.area1 {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  pointer-events: none;
+}
+
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  justify-content: space-between;
+  position: relative;
+  pointer-events: all;
+}
+
+.imgLeft {
+  z-index: 100;
+  position: absolute;
+  left: 1300px;
+  top: 1500px;
+
+  div {
+    width: 540px;
+    height: 147px;
+    text-align: center;
+    line-height: 147px;
+    color: #fff;
+    font-size: 40px;
+    font-weight: bold;
+    padding-left: 88px;
+    box-sizing: border-box;
+    font-family: "FZZCHJW-1";
+    background-image: url("../../assets/nyjc/左默认.png");
+    margin: 37px;
+    cursor: pointer;
+  }
+
+  .active {
+    background-image: url("../../assets/nyjc/左选中.png");
+  }
+}
+
+.imgRight {
+  z-index: 100;
+  position: absolute;
+  right: 1300px;
+  top: 1300px;
+
+  div {
+    width: 550px;
+    height: 147px;
+    text-align: center;
+    line-height: 147px;
+    color: #fff;
+    font-size: 40px;
+    font-weight: bold;
+    padding-right: 108px;
+    box-sizing: border-box;
+    background-image: url("../../assets/nyjc/右默认.png");
+    background-size: cover;
+    font-family: "FZZCHJW-1";
+    margin: 37px;
+    cursor: pointer;
+  }
+
+  .active {
+    background-image: url("../../assets/nyjc/右选中.png");
+  }
+}
+
+.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;
+  }
+
+  .qcssdh {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+      }
+
+      .active {
+        background: linear-gradient(
+          to right,
+          rgba(33, 76, 124, 0.3) 20%,
+          rgba(152, 207, 230, 0.3) 100%,
+          rgba(33, 76, 124, 0.3) 20%
+        );
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #qcssdh {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+    }
+  }
+
+  .qcydl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+
+      .chartbox {
+        width: 100%;
+        color: #fff;
+        font-size: 30px;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .bigBox {
+          width: 661px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          color: #10ff3c;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+
+  .zjtpt {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .imgBox1 {
+      margin-top: 50px;
+      width: 1156px;
+      height: 500px;
+      pointer-events: all;
+      cursor: pointer;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .yrfd {
+    position: relative;
+    margin-top: 130px;
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      margin-top: 50px;
+
+      #yrfd {
+        width: 1156px;
+        height: 600px;
+      }
+    }
+  }
+
+  .ljfdl {
+    position: relative;
+    margin-top: 50px;
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      margin-top: 50px;
+
+      #ljfdl {
+        width: 1156px;
+        height: 600px;
+      }
+    }
+  }
+
+  .qcsbydpm {
+    position: relative;
+    margin-top: 50px;
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+
+      .chartbox {
+        width: 100%;
+        color: #fff;
+        font-size: 30px;
+        align-items: center;
+        display: flex;
+        margin-top: 40px;
+
+        .bigBox {
+          width: 661px;
+          height: 26px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 26px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          color: #10ff3c;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/lll/NYJCD_20231205100421.vue b/.history/src/views/lll/NYJCD_20231205100421.vue
new file mode 100644
index 0000000..35791c7
--- /dev/null
+++ b/.history/src/views/lll/NYJCD_20231205100421.vue
@@ -0,0 +1,1076 @@
+<template>
+  <div class="box">
+    <div class="imgLeft">
+      <div
+        @click="goOne('1号生产线')"
+        :class="click1 == '1号生产线' ? 'active' : ''"
+      >
+        1号生产线
+      </div>
+      <div
+        @click="goOne('2号生产线')"
+        :class="click1 == '2号生产线' ? 'active' : ''"
+      >
+        2号生产线
+      </div>
+      <div
+        @click="goOne('3号生产线')"
+        :class="click1 == '3号生产线' ? 'active' : ''"
+      >
+        3号生产线
+      </div>
+      <div @click="goOne('配电室')" :class="click1 == '配电室' ? 'active' : ''">
+        配电室
+      </div>
+    </div>
+
+    <div class="imgRight">
+      <div
+        @click="goTwo('破碎系统')"
+        :class="click2 == '破碎系统' ? 'active' : ''"
+      >
+        破碎系统
+      </div>
+      <div
+        @click="goTwo('生料系统')"
+        :class="click2 == '生料系统' ? 'active' : ''"
+      >
+        生料系统
+      </div>
+      <div
+        @click="goTwo('回转窑系统')"
+        :class="click2 == '回转窑系统' ? 'active' : ''"
+      >
+        回转窑系统
+      </div>
+      <div
+        @click="goTwo('煤磨系统')"
+        :class="click2 == '煤磨系统' ? 'active' : ''"
+      >
+        煤磨系统
+      </div>
+      <div
+        @click="goTwo('水泥磨系统')"
+        :class="click2 == '水泥磨系统' ? 'active' : ''"
+      >
+        水泥磨系统
+      </div>
+    </div>
+
+    <div class="left" v-show="flag">
+      <img src="../../assets/img/标题/能源监测-电.png" class="title" />
+      <div class="qcssdh">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>全厂实时电荷</p>
+        </div>
+        <div class="data">
+          <span :class="res == '年' ? 'active' : ''" @click="res = '年'"
+            >年</span
+          >
+          <span :class="res == '月' ? 'active' : ''" @click="res = '月'"
+            >月</span
+          >
+          <span :class="res == '日' ? 'active' : ''" @click="res = '日'"
+            >日</span
+          >
+        </div>
+        <div id="qcssdh"></div>
+      </div>
+      <div class="qcydl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>全厂用电量</p>
+        </div>
+        <div class="chartBox">
+          <div class="chartbox" v-for="item in list">
+            <span>{{ item.name }}</span>
+            <div class="bigBox">
+              <div
+                class="smallBox"
+                :style="{ width: `${35 * item.value}px` }"
+              ></div>
+            </div>
+            <span>{{ item.value }}kWh</span>
+          </div>
+        </div>
+      </div>
+      <div class="zjtpt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>总降拓扑图</p>
+        </div>
+        <div class="imgBox1">
+          <el-image
+            v-for="item in arr"
+            :src="item.url"
+            :preview-src-list="item.srcList"
+          >
+          </el-image>
+        </div>
+      </div>
+    </div>
+
+    <div class="right" v-show="flag">
+      <div class="yrfd">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>余热发电</p>
+        </div>
+        <div class="chartBox">
+          <div id="yrfd"></div>
+        </div>
+      </div>
+      <div class="ljfdl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>垃圾发电量</p>
+        </div>
+        <div class="chartBox">
+          <div id="ljfdl"></div>
+        </div>
+      </div>
+      <div class="qcsbydpm">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>全厂设备用电排名</p>
+        </div>
+        <div class="chartBox">
+          <div class="chartbox" v-for="item in list1">
+            <span>{{ item.name }}</span>
+            <div class="bigBox">
+              <div
+                class="smallBox"
+                :style="{ width: `${40 * item.value}px` }"
+              ></div>
+            </div>
+            <span>{{ item.value }}kWh</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="area1">
+      <router-view />
+    </div>
+  </div>
+</template>
+<script>
+import { RouterView } from "vue-router";
+import * as echarts from "echarts";
+import Viewer from "viewerjs";
+export default {
+  data() {
+    return {
+      res: "月",
+      click1: "",
+      click2: "",
+      flag: false,
+      option1: {
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:KW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 500,
+          interval: 100,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            symbol: "circle",
+            symbolSize: 20,
+            data: [200, 300, 500, 400, 334],
+            itemStyle: {
+              normal: {
+                color: "#00FF00",
+                lineStyle: {
+                  width: 5,
+                  color: "#21FF55", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        legend: {
+          data: [{ icon: "rect", name: "垃圾发电量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: ["1月", "2月", "3月", "4月", "5月"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:KW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          min: 0,
+          max: 500,
+          interval: 100,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          //   top: "5%",
+          left: "8%",
+          right: "5%",
+          bottom: "8%",
+        },
+        series: [
+          {
+            type: "line",
+            name: "垃圾发电量",
+            symbolSize: 15,
+            data: [200, 300, 500, 400, 334],
+            itemStyle: {
+              normal: {
+                color: "#43FFF4",
+                lineStyle: {
+                  width: 5,
+                  color: "#43FFF4", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      },
+      list: [
+        {
+          name: "1号生产线",
+          value: "15.20",
+        },
+        {
+          name: "2号生产线",
+          value: "6.21",
+        },
+        {
+          name: "3号生产线",
+          value: "6.21",
+        },
+        {
+          name: "生活办公区",
+          value: "6.52",
+        },
+      ],
+      list1: [
+        {
+          name: "回转窑",
+          value: "15.20",
+        },
+        {
+          name: "熟料收尘",
+          value: "6.21",
+        },
+        {
+          name: "篦冷机",
+          value: "6.21",
+        },
+        {
+          name: "生料收尘",
+          value: "6.52",
+        },
+        {
+          name: "生料磨",
+          value: "4.57",
+        },
+        {
+          name: "预热器",
+          value: "4.27",
+        },
+        {
+          name: "配电室",
+          value: "3.27",
+        },
+      ],
+      arr: [
+        {
+          url: require("../../assets/tpt/总降电力室.png"),
+          srcList: [require("../../assets/tpt/总降电力室.png")],
+        },
+      ],
+    };
+  },
+  methods: {
+    initViewer() {
+      this.viewer = new Viewer(this.$el, {
+        inline: false,
+        button: true,
+        navbar: true,
+        title: false,
+        toolbar: true,
+        tooltip: true,
+        movable: false,
+        zoomable: true,
+        rotatable: false,
+        scalable: true,
+        transition: true,
+        fullscreen: true,
+        keyboard: true,
+        url(image) {
+          console.log(image.src);
+          return image.src;
+        },
+        ready() {
+          console.log("Viewer is ready");
+        },
+      });
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+    sendMessageToCSharp(name) {
+      window.vuplex.postMessage({
+        type: "Tog",
+        message: `${name}_true`,
+      });
+    },
+    goOne(a) {
+      this.click2 = "";
+      this.click1 = a;
+      this.sendMessageToCSharp(this.click1);
+      if (this.click1 == "配电室") {
+        this.$router.replace(
+          "/area/nyjcd/pds",
+          () => {},
+          () => {}
+        );
+      } else {
+        this.$router.replace(
+          `/area/nyjcd/scx1?type=${this.click1}`,
+          () => {},
+          () => {}
+        );
+      }
+    },
+    goTwo(a) {
+      this.click1 = "";
+      this.click2 = a;
+      this.sendMessageToCSharp(this.click2);
+      this.$router.replace(
+        `/area/nyjcd/scx1?type=${this.click2}`,
+        () => {},
+        () => {}
+      );
+    },
+    //余热发电  3d
+    yrfd() {
+      const offsetX = 24; //bar宽
+      const offsetY = 8; //倾斜角度
+      // 绘制左侧面
+      const CubeLeft = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          // 会canvas的应该都能看得懂，shape是从custom传入的
+          const xAxisPoint = shape.xAxisPoint;
+          // console.log(shape);
+          const c0 = [shape.x, shape.y];
+          const c1 = [shape.x - offsetX, shape.y - offsetY];
+          const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
+          const c3 = [xAxisPoint[0], xAxisPoint[1]];
+          ctx
+            .moveTo(c0[0], c0[1])
+            .lineTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .closePath();
+        },
+      });
+      // 绘制右侧面
+      const CubeRight = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const xAxisPoint = shape.xAxisPoint;
+          const c1 = [shape.x, shape.y];
+          const c2 = [xAxisPoint[0], xAxisPoint[1]];
+          const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
+          const c4 = [shape.x + offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 绘制顶面
+      const CubeTop = this.$echarts.graphic.extendShape({
+        shape: {
+          x: 0,
+          y: 0,
+        },
+        buildPath: function (ctx, shape) {
+          const c1 = [shape.x, shape.y];
+          const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
+          // const c3 = [shape.x, shape.y - offsetX];
+          const c3 = [shape.x, shape.y - offsetY * 2];
+          const c4 = [shape.x - offsetX, shape.y - offsetY];
+          ctx
+            .moveTo(c1[0], c1[1])
+            .lineTo(c2[0], c2[1])
+            .lineTo(c3[0], c3[1])
+            .lineTo(c4[0], c4[1])
+            .closePath();
+        },
+      });
+      // 注册三个面图形
+      this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
+      this.$echarts.graphic.registerShape("CubeRight", CubeRight);
+      this.$echarts.graphic.registerShape("CubeTop", CubeTop);
+      let xAxisData = ["1月", "2月", "3月", "4月", "5月"];
+      let seriesData = [100, 200, 300, 400, 300];
+      //拿到最大值
+      const maxValue = Math.max(...seriesData);
+
+      let colorArr = [
+        ["#04E886"],
+        ["#0AE841", "rgba(56,231,197,1)"],
+        ["#02C25F", "rgba(11,194,121,1)"],
+      ];
+      let option = {
+        // legend: {
+        //   // data: [
+        //   //   {
+        //   //     icon: "rect",
+        //   //     name: "余热发电",
+        //   //   },
+        //   // ],
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: "20px",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: function (params, ticket, callback) {
+            const item = params[1];
+            return item.name + " : " + item.value;
+          },
+        },
+        grid: {
+          // 让图表占满容器
+          left: "5%",
+          right: "5%",
+          bottom: "0%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+          axisLine: {
+            show: true,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: 20,
+            color: "#fff",
+            margin: 15,
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {},
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          // boundaryGap: ['20%', '20%'],
+        },
+        series: [
+          {
+            type: "custom",
+            name: "余热发电",
+            renderItem: (params, api) => {
+              const location = api.coord([api.value(0), api.value(1)]);
+              return {
+                type: "group",
+                children: [
+                  {
+                    type: "CubeLeft",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[1][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[1][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeRight",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[2][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[2][1],
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    type: "CubeTop",
+                    shape: {
+                      api,
+                      xValue: api.value(0),
+                      yValue: api.value(1),
+                      x: location[0],
+                      y: location[1],
+                      xAxisPoint: api.coord([api.value(0), 0]),
+                    },
+                    style: {
+                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                          offset: 0,
+                          color: colorArr[0][0],
+                        },
+                        {
+                          offset: 1,
+                          color: colorArr[0][0],
+                        },
+                      ]),
+                    },
+                  },
+                ],
+              };
+            },
+            data: seriesData,
+          },
+          {
+            type: "bar",
+            label: {
+              normal: {
+                show: true,
+                position: "top",
+                formatter: (e) => {
+                  return e.value === maxValue ? e.value : "";
+                },
+                fontSize: 20,
+                color: "#09E83E",
+                offset: [0, -15],
+              },
+            },
+            itemStyle: {
+              color: "transparent",
+            },
+            tooltip: {},
+            data: seriesData,
+          },
+        ],
+      };
+      this.defineEcharts("yrfd", option);
+    },
+  },
+  created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // }
+    // function addMessageListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   });
+    // }
+  },
+  watch: {
+    // 监听,当路由发生变化的时候执行
+    $route: {
+      handler(to, from) {
+        if (to.path == "/area/nyjcd") {
+          this.flag = true;
+        } else {
+          this.flag = false;
+        }
+      },
+      deep: true, // 深度观察监听
+      immediate: true, // 第一次初始化渲染就可以监听到
+    },
+  },
+  mounted() {
+    let dom = document.querySelector(".area1");
+    dom.style.pointerEvents = "none";
+    this.initViewer();
+    this.defineEcharts("qcssdh", this.option1);
+    // this.defineEcharts("yrfd", this.option2);
+    this.yrfd();
+    this.defineEcharts("ljfdl", this.option3);
+  },
+  beforeDestroy() {
+    if (this.viewer) {
+      this.viewer.destroy();
+    }
+  },
+  components: { RouterView },
+};
+</script>
+<style lang="less" scoped>
+.area1 {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  pointer-events: none;
+}
+
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+  justify-content: space-between;
+  position: relative;
+  pointer-events: all;
+}
+
+.imgLeft {
+  z-index: 100;
+  position: absolute;
+  left: 1300px;
+  top: 1500px;
+
+  div {
+    width: 540px;
+    height: 147px;
+    text-align: center;
+    line-height: 147px;
+    color: #fff;
+    font-size: 40px;
+    font-weight: bold;
+    padding-left: 88px;
+    box-sizing: border-box;
+    font-family: "FZZCHJW-1";
+    background-image: url("../../assets/nyjc/左默认.png");
+    margin: 37px;
+    cursor: pointer;
+  }
+
+  .active {
+    background-image: url("../../assets/nyjc/左选中.png");
+  }
+}
+
+.imgRight {
+  z-index: 100;
+  position: absolute;
+  right: 1300px;
+  top: 1300px;
+
+  div {
+    width: 550px;
+    height: 147px;
+    text-align: center;
+    line-height: 147px;
+    color: #fff;
+    font-size: 40px;
+    font-weight: bold;
+    padding-right: 108px;
+    box-sizing: border-box;
+    background-image: url("../../assets/nyjc/右默认.png");
+    background-size: cover;
+    font-family: "FZZCHJW-1";
+    margin: 37px;
+    cursor: pointer;
+  }
+
+  .active {
+    background-image: url("../../assets/nyjc/右选中.png");
+  }
+}
+
+.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;
+  }
+
+  .qcssdh {
+    position: relative;
+    margin-top: 56px;
+
+    .data {
+      position: absolute;
+      font-size: 20px;
+      font-family: "DOUYU";
+      color: #ffffff;
+      line-height: 18px;
+      display: flex;
+      right: 0;
+      top: 120px;
+      z-index: 1;
+
+      span {
+        width: 122px;
+        height: 38px;
+        margin: 10px;
+        display: block;
+        line-height: 38px;
+        text-align: center;
+      }
+
+      .active {
+        background: linear-gradient(
+          to right,
+          rgba(33, 76, 124, 0.3) 20%,
+          rgba(152, 207, 230, 0.3) 100%,
+          rgba(33, 76, 124, 0.3) 20%
+        );
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    #qcssdh {
+      width: 1155px;
+      height: 600px;
+      margin-top: 50px;
+    }
+  }
+
+  .qcydl {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+
+      .chartbox {
+        width: 100%;
+        color: #fff;
+        font-size: 30px;
+        align-items: center;
+        display: flex;
+        margin-top: 100px;
+
+        .bigBox {
+          width: 661px;
+          height: 65px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 65px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          color: #10ff3c;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+
+  .zjtpt {
+    position: relative;
+    margin-top: 56px;
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .imgBox1 {
+      margin-top: 50px;
+      width: 1156px;
+      height: 500px;
+      pointer-events: all;
+      cursor: pointer;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+
+  .yrfd {
+    position: relative;
+    margin-top: 130px;
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      margin-top: 50px;
+
+      #yrfd {
+        width: 1156px;
+        height: 600px;
+      }
+    }
+  }
+
+  .ljfdl {
+    position: relative;
+    margin-top: 50px;
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      margin-top: 50px;
+
+      #ljfdl {
+        width: 1156px;
+        height: 600px;
+      }
+    }
+  }
+
+  .qcsbydpm {
+    position: relative;
+    margin-top: 50px;
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+
+    .chartBox {
+      width: 1155px;
+      margin-top: 50px;
+
+      .chartbox {
+        width: 100%;
+        color: #fff;
+        font-size: 30px;
+        align-items: center;
+        display: flex;
+        margin-top: 40px;
+
+        .bigBox {
+          width: 661px;
+          height: 26px;
+          background-color: #273546;
+
+          .smallBox {
+            width: 100px;
+            height: 26px;
+            background: linear-gradient(
+              to right,
+              rgba(1, 191, 249, 1) 20%,
+              rgba(68, 161, 201, 1) 100%,
+              rgba(42, 196, 243, 1) 20%
+            );
+          }
+        }
+
+        span:nth-of-type(1) {
+          width: 231px;
+        }
+
+        span:nth-of-type(2) {
+          color: #10ff3c;
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/utils/pds.js b/src/utils/pds.js
index acfef55..8fe1761 100644
--- a/src/utils/pds.js
+++ b/src/utils/pds.js
@@ -7,6 +7,7 @@ export let pdsJs = [
       "6.3KV#1原料#1出线",
       "6.3KV#1原料#2出线",
       "6.3KV#2窑头出线",
+      
       "6.3KV#2原料#1出线",
       "6.3KV#2原料#2出线",
       "6.3KV#1发电机出线(安热线)",
@@ -488,7 +489,7 @@ export let pdsJs = [
       "电源进线",
       "2A1BC06MT01带式输送机软起柜",
       "2A1BC04MT01带式输送机软起柜",
-      
+
       "2A1BC03MT01带式输送机软起柜",
       "电源进线",
     ],
diff --git a/src/views/lll/NYJCD/SCX1.vue b/src/views/lll/NYJCD/SCX1.vue
index 6601fb2..5ebf16a 100644
--- a/src/views/lll/NYJCD/SCX1.vue
+++ b/src/views/lll/NYJCD/SCX1.vue
@@ -836,293 +836,293 @@ export default {
 
       this.defineEcharts("pdsydl", option);
     },
-    //初始化构建
-    init() {
-      //构建3d饼状图
-      let myChart = this.$echarts.init(document.getElementById("fhzb"));
-      // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
-      this.option = this.getPie3D(this.optionData, 0.8);
-      //将配置项设置进去
-      myChart.setOption(this.option);
-      //鼠标移动上去特效效果
-      this.bindListen(myChart);
-    },
-    //配置构建 pieData 饼图数据 internalDiameterRatio:透明的空心占比
-    getPie3D(pieData, internalDiameterRatio) {
-      let that = this;
-      let series = [];
-      let sumValue = 0;
-      let startValue = 0;
-      let endValue = 0;
-      let legendData = [];
-      let legendBfb = [];
-      let k = 1 - internalDiameterRatio;
-      pieData.sort((a, b) => {
-        return b.value - a.value;
-      });
-      // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
-      for (let i = 0; i < pieData.length; i++) {
-        sumValue += pieData[i].value;
-        let seriesItem = {
-          //系统名称
-          name:
-            typeof pieData[i].name === "undefined"
-              ? `series${i}`
-              : pieData[i].name,
-          type: "surface",
-          //是否为参数曲面（是）
-          parametric: true,
-          //曲面图网格线（否）上面一根一根的
-          wireframe: {
-            show: false,
-          },
-          pieData: pieData[i],
-          pieStatus: {
-            selected: false,
-            hovered: false,
-            k: k,
-          },
-          //设置饼图在容器中的位置(目前没发现啥用)
-          center: ["80%", "100%"],
-          radius: "60%",
-        };
-        //曲面的颜色、不透明度等样式。
-        if (typeof pieData[i].itemStyle != "undefined") {
-          let itemStyle = {};
-          typeof pieData[i].itemStyle.color != "undefined"
-            ? (itemStyle.color = pieData[i].itemStyle.color)
-            : null;
-          typeof pieData[i].itemStyle.opacity != "undefined"
-            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
-            : null;
-          seriesItem.itemStyle = itemStyle;
-        }
-        series.push(seriesItem);
-      }
-      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
-      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
-      legendData = [];
-      legendBfb = [];
-      for (let i = 0; i < series.length; i++) {
-        endValue = startValue + series[i].pieData.value;
-        series[i].pieData.startRatio = startValue / sumValue;
-        series[i].pieData.endRatio = endValue / sumValue;
-        series[i].parametricEquation = that.getParametricEquation(
-          series[i].pieData.startRatio,
-          series[i].pieData.endRatio,
-          false,
-          false,
-          k,
-          series[i].pieData.value
-        );
+    // //初始化构建
+    // init() {
+    //   //构建3d饼状图
+    //   let myChart = this.$echarts.init(document.getElementById("fhzb"));
+    //   // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
+    //   this.option = this.getPie3D(this.optionData, 0.8);
+    //   //将配置项设置进去
+    //   myChart.setOption(this.option);
+    //   //鼠标移动上去特效效果
+    //   this.bindListen(myChart);
+    // },
+    // //配置构建 pieData 饼图数据 internalDiameterRatio:透明的空心占比
+    // getPie3D(pieData, internalDiameterRatio) {
+    //   let that = this;
+    //   let series = [];
+    //   let sumValue = 0;
+    //   let startValue = 0;
+    //   let endValue = 0;
+    //   let legendData = [];
+    //   let legendBfb = [];
+    //   let k = 1 - internalDiameterRatio;
+    //   pieData.sort((a, b) => {
+    //     return b.value - a.value;
+    //   });
+    //   // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
+    //   for (let i = 0; i < pieData.length; i++) {
+    //     sumValue += pieData[i].value;
+    //     let seriesItem = {
+    //       //系统名称
+    //       name:
+    //         typeof pieData[i].name === "undefined"
+    //           ? `series${i}`
+    //           : pieData[i].name,
+    //       type: "surface",
+    //       //是否为参数曲面（是）
+    //       parametric: true,
+    //       //曲面图网格线（否）上面一根一根的
+    //       wireframe: {
+    //         show: false,
+    //       },
+    //       pieData: pieData[i],
+    //       pieStatus: {
+    //         selected: false,
+    //         hovered: false,
+    //         k: k,
+    //       },
+    //       //设置饼图在容器中的位置(目前没发现啥用)
+    //       center: ["80%", "100%"],
+    //       radius: "60%",
+    //     };
+    //     //曲面的颜色、不透明度等样式。
+    //     if (typeof pieData[i].itemStyle != "undefined") {
+    //       let itemStyle = {};
+    //       typeof pieData[i].itemStyle.color != "undefined"
+    //         ? (itemStyle.color = pieData[i].itemStyle.color)
+    //         : null;
+    //       typeof pieData[i].itemStyle.opacity != "undefined"
+    //         ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+    //         : null;
+    //       seriesItem.itemStyle = itemStyle;
+    //     }
+    //     series.push(seriesItem);
+    //   }
+    //   // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+    //   // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+    //   legendData = [];
+    //   legendBfb = [];
+    //   for (let i = 0; i < series.length; i++) {
+    //     endValue = startValue + series[i].pieData.value;
+    //     series[i].pieData.startRatio = startValue / sumValue;
+    //     series[i].pieData.endRatio = endValue / sumValue;
+    //     series[i].parametricEquation = that.getParametricEquation(
+    //       series[i].pieData.startRatio,
+    //       series[i].pieData.endRatio,
+    //       false,
+    //       false,
+    //       k,
+    //       series[i].pieData.value
+    //     );
 
-        startValue = endValue;
-        let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
-        legendData.push({
-          name: series[i].name,
-          value: bfb,
-        });
-        legendBfb.push({
-          name: series[i].name,
-          value: bfb,
-        });
-      }
+    //     startValue = endValue;
+    //     let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
+    //     legendData.push({
+    //       name: series[i].name,
+    //       value: bfb,
+    //     });
+    //     legendBfb.push({
+    //       name: series[i].name,
+    //       value: bfb,
+    //     });
+    //   }
 
-      //(第二个参数可以设置你这个环形的高低程度)
-      let boxHeight = this.getHeight3D(series, 15); //通过传参设定3d饼/环的高度
-      // 准备待返回的配置项，把准备好的 legendData、series 传入。
-      let option = {
-        //移动上去提示的文本内容(我没来得及改 你们可以根据需求改)
-        tooltip: {
-          formatter: (params) => {
-            if (
-              params.seriesName !== "mouseoutSeries" &&
-              params.seriesName !== "pie2d"
-            ) {
-              let bfb = (
-                (this.option.series[params.seriesIndex].pieData.endRatio -
-                  this.option.series[params.seriesIndex].pieData.startRatio) *
-                100
-              ).toFixed(2);
-              return (
-                `${params.seriesName}<br/>` +
-                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>` +
-                `${bfb}%`
-              );
-            }
-          },
-        },
-        label: {
-          // normal: {
-          //   show: true,
-          //   position: "right",
-          //   formatter: "{b} \n{c} {d}%",
-          // },
+    //   //(第二个参数可以设置你这个环形的高低程度)
+    //   let boxHeight = this.getHeight3D(series, 15); //通过传参设定3d饼/环的高度
+    //   // 准备待返回的配置项，把准备好的 legendData、series 传入。
+    //   let option = {
+    //     //移动上去提示的文本内容(我没来得及改 你们可以根据需求改)
+    //     tooltip: {
+    //       formatter: (params) => {
+    //         if (
+    //           params.seriesName !== "mouseoutSeries" &&
+    //           params.seriesName !== "pie2d"
+    //         ) {
+    //           let bfb = (
+    //             (this.option.series[params.seriesIndex].pieData.endRatio -
+    //               this.option.series[params.seriesIndex].pieData.startRatio) *
+    //             100
+    //           ).toFixed(2);
+    //           return (
+    //             `${params.seriesName}<br/>` +
+    //             `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>` +
+    //             `${bfb}%`
+    //           );
+    //         }
+    //       },
+    //     },
+    //     label: {
+    //       // normal: {
+    //       //   show: true,
+    //       //   position: "right",
+    //       //   formatter: "{b} \n{c} {d}%",
+    //       // },
 
-          normal: {
-            show: true,
-            color: "#fff",
-            position: "right",
-            // distance:-10,
-            offset: [0, 3],
-            formatter: [
-              "{d|{d}%}",
-              "————",
-              //   '{c|{c}}{b|台}',
-              "{b|{b}}",
-            ].join("\n"), // 用\n来换行
-            rich: {
-              b: {
-                lineHeight: 25,
-                align: "left",
-                color: "#fff",
-              },
-              c: {
-                fontSize: 22,
-                // color: '#fff',
-                textShadowColor: "#1c90a6",
-                textShadowOffsetX: 0,
-                textShadowOffsetY: 2,
-                textShadowBlur: 5,
-                color: "#fff",
-              },
-              d: {
-                color: "#fff",
-                align: "left",
-              },
-            },
-          },
-        },
-        labelLine: {
-          // normal: {
-          //   show: true,
-          //   lineStyle: {
-          //     color: "#7BC0CB",
-          //   },
-          //   length: 0,
-          //   length2: 100000,
-          // },
+    //       normal: {
+    //         show: true,
+    //         color: "#fff",
+    //         position: "right",
+    //         // distance:-10,
+    //         offset: [0, 3],
+    //         formatter: [
+    //           "{d|{d}%}",
+    //           "————",
+    //           //   '{c|{c}}{b|台}',
+    //           "{b|{b}}",
+    //         ].join("\n"), // 用\n来换行
+    //         rich: {
+    //           b: {
+    //             lineHeight: 25,
+    //             align: "left",
+    //             color: "#fff",
+    //           },
+    //           c: {
+    //             fontSize: 22,
+    //             // color: '#fff',
+    //             textShadowColor: "#1c90a6",
+    //             textShadowOffsetX: 0,
+    //             textShadowOffsetY: 2,
+    //             textShadowBlur: 5,
+    //             color: "#fff",
+    //           },
+    //           d: {
+    //             color: "#fff",
+    //             align: "left",
+    //           },
+    //         },
+    //       },
+    //     },
+    //     labelLine: {
+    //       // normal: {
+    //       //   show: true,
+    //       //   lineStyle: {
+    //       //     color: "#7BC0CB",
+    //       //   },
+    //       //   length: 0,
+    //       //   length2: 100000,
+    //       // },
 
-          normal: {
-            show: true,
-            length2: 30,
-            lineStyle: {
-              width: 1,
-              color: "#fff",
-            },
-          },
-        },
+    //       normal: {
+    //         show: true,
+    //         length2: 30,
+    //         lineStyle: {
+    //           width: 1,
+    //           color: "#fff",
+    //         },
+    //       },
+    //     },
 
-        //这个可以变形
-        xAxis3D: {
-          min: -1,
-          max: 1,
-        },
-        yAxis3D: {
-          min: -1,
-          max: 1,
-        },
-        zAxis3D: {
-          min: -1,
-          max: 1,
-        },
-        //此处是修改样式的重点
-        grid3D: {
-          show: false,
-          boxHeight: boxHeight, //圆环的高度
-          //这是饼图的位置
-          top: "-20.5%",
-          left: "-4%",
-          viewControl: {
-            //3d效果可以放大、旋转等，请自己去查看官方配置
-            alpha: 25, //角度(这个很重要 调节角度的)
-            distance: 160, //调整视角到主体的距离，类似调整zoom(这是整体大小)
-            rotateSensitivity: 0, //设置为0无法旋转
-            zoomSensitivity: 0, //设置为0无法缩放
-            panSensitivity: 0, //设置为0无法平移
-            autoRotate: false, //自动旋转
-          },
-        },
-        series: series,
-      };
-      return option;
-    },
+    //     //这个可以变形
+    //     xAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     yAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     zAxis3D: {
+    //       min: -1,
+    //       max: 1,
+    //     },
+    //     //此处是修改样式的重点
+    //     grid3D: {
+    //       show: false,
+    //       boxHeight: boxHeight, //圆环的高度
+    //       //这是饼图的位置
+    //       top: "-20.5%",
+    //       left: "-4%",
+    //       viewControl: {
+    //         //3d效果可以放大、旋转等，请自己去查看官方配置
+    //         alpha: 25, //角度(这个很重要 调节角度的)
+    //         distance: 160, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+    //         rotateSensitivity: 0, //设置为0无法旋转
+    //         zoomSensitivity: 0, //设置为0无法缩放
+    //         panSensitivity: 0, //设置为0无法平移
+    //         autoRotate: false, //自动旋转
+    //       },
+    //     },
+    //     series: series,
+    //   };
+    //   return option;
+    // },
     //获取3d丙图的最高扇区的高度
-    getHeight3D(series, height) {
-      series.sort((a, b) => {
-        return b.pieData.value - a.pieData.value;
-      });
-      return (height * 25) / series[0].pieData.value;
-    },
-    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
-    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
-      // 计算
-      let midRatio = (startRatio + endRatio) / 2;
-      let startRadian = startRatio * Math.PI * 2;
-      let endRadian = endRatio * Math.PI * 2;
-      let midRadian = midRatio * Math.PI * 2;
-      // 如果只有一个扇形，则不实现选中效果。
-      if (startRatio === 0 && endRatio === 1) {
-        isSelected = false;
-      }
-      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
-      k = typeof k !== "undefined" ? k : 1 / 3;
-      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
-      let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
-      let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
-      // 计算高亮效果的放大比例（未高亮，则比例为 1）
-      let hoverRate = isHovered ? 1.05 : 1;
-      // 返回曲面参数方程
-      return {
-        u: {
-          min: -Math.PI,
-          max: Math.PI * 3,
-          step: Math.PI / 32,
-        },
-        v: {
-          min: 0,
-          max: Math.PI * 2,
-          step: Math.PI / 20,
-        },
-        x: function (u, v) {
-          if (u < startRadian) {
-            return (
-              offsetX +
-              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
-            );
-          }
-          if (u > endRadian) {
-            return (
-              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
-            );
-          }
-          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
-        },
-        y: function (u, v) {
-          if (u < startRadian) {
-            return (
-              offsetY +
-              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
-            );
-          }
-          if (u > endRadian) {
-            return (
-              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
-            );
-          }
-          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
-        },
-        z: function (u, v) {
-          if (u < -Math.PI * 0.5) {
-            return Math.sin(u);
-          }
-          if (u > Math.PI * 2.5) {
-            return Math.sin(u) * h * 0.1;
-          }
-          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
-        },
-      };
-    },
+    // getHeight3D(series, height) {
+    //   series.sort((a, b) => {
+    //     return b.pieData.value - a.pieData.value;
+    //   });
+    //   return (height * 25) / series[0].pieData.value;
+    // },
+    // // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    // getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+    //   // 计算
+    //   let midRatio = (startRatio + endRatio) / 2;
+    //   let startRadian = startRatio * Math.PI * 2;
+    //   let endRadian = endRatio * Math.PI * 2;
+    //   let midRadian = midRatio * Math.PI * 2;
+    //   // 如果只有一个扇形，则不实现选中效果。
+    //   if (startRatio === 0 && endRatio === 1) {
+    //     isSelected = false;
+    //   }
+    //   // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+    //   k = typeof k !== "undefined" ? k : 1 / 3;
+    //   // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+    //   let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+    //   let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+    //   // 计算高亮效果的放大比例（未高亮，则比例为 1）
+    //   let hoverRate = isHovered ? 1.05 : 1;
+    //   // 返回曲面参数方程
+    //   return {
+    //     u: {
+    //       min: -Math.PI,
+    //       max: Math.PI * 3,
+    //       step: Math.PI / 32,
+    //     },
+    //     v: {
+    //       min: 0,
+    //       max: Math.PI * 2,
+    //       step: Math.PI / 20,
+    //     },
+    //     x: function (u, v) {
+    //       if (u < startRadian) {
+    //         return (
+    //           offsetX +
+    //           Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       if (u > endRadian) {
+    //         return (
+    //           offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+    //     },
+    //     y: function (u, v) {
+    //       if (u < startRadian) {
+    //         return (
+    //           offsetY +
+    //           Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       if (u > endRadian) {
+    //         return (
+    //           offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+    //         );
+    //       }
+    //       return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+    //     },
+    //     z: function (u, v) {
+    //       if (u < -Math.PI * 0.5) {
+    //         return Math.sin(u);
+    //       }
+    //       if (u > Math.PI * 2.5) {
+    //         return Math.sin(u) * h * 0.1;
+    //       }
+    //       return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+    //     },
+    //   };
+    // },
     // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
     bindListen(myChart) {
       let that = this;
@@ -1287,7 +1287,316 @@ export default {
       }
       return s;
     },
+    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      const midRatio = (startRatio + endRatio) / 2;
+      const startRadian = startRatio * Math.PI * 2;
+      const endRadian = endRatio * Math.PI * 2;
+      const midRadian = midRatio * Math.PI * 2;
+      // 如果只有一个扇形，则不实现选中效果。
+      if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+      }
+      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+      k = 1;
+      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+      // 计算高亮效果的放大比例（未高亮，则比例为 1）
+      const hoverRate = isHovered ? 1.05 : 1;
+      // 返回曲面参数方程
+      return {
+        u: {
+          min: -Math.PI,
+          max: Math.PI * 3,
+          step: Math.PI / 32,
+        },
+        v: {
+          min: 0,
+          max: Math.PI * 2,
+          step: Math.PI / 20,
+        },
+        x: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetX +
+              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+          if (u < startRadian) {
+            return (
+              offsetY +
+              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          if (u > endRadian) {
+            return (
+              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
+            );
+          }
+          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+          if (u < -Math.PI * 0.5) {
+            return Math.sin(u);
+          }
+          if (u > Math.PI * 2.5) {
+            return Math.sin(u) * h * 0.1;
+          }
+          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+      };
+    },
 
+    getPie3D(
+      pieData,
+      internalDiameterRatio,
+      distance,
+      alpha,
+      pieHeight,
+      opacity = 1
+    ) {
+      const series = [];
+      let sumValue = 0;
+      let startValue = 0;
+      let endValue = 0;
+      const legendData = [];
+      const k =
+        typeof internalDiameterRatio !== "undefined"
+          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+          : 1 / 3;
+      // 为每一个饼图数据，生成一个 series-surface 配置
+      for (let i = 0; i < pieData.length; i += 1) {
+        sumValue += pieData[i].value;
+        const seriesItem = {
+          name:
+            typeof pieData[i].name === "undefined"
+              ? `series${i}`
+              : pieData[i].name,
+          type: "surface",
+          parametric: true,
+          wireframe: {
+            show: false,
+          },
+          pieData: pieData[i],
+          pieStatus: {
+            selected: false,
+            hovered: false,
+            k: k,
+          },
+        };
+        if (typeof pieData[i].itemStyle !== "undefined") {
+          const itemStyle = {};
+          if (typeof pieData[i].itemStyle.color !== "undefined") {
+            itemStyle.color = pieData[i].itemStyle.color;
+          }
+          if (typeof pieData[i].itemStyle.opacity !== "undefined") {
+            itemStyle.opacity = pieData[i].itemStyle.opacity;
+          }
+          seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+      }
+      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+      for (let i = 0; i < series.length; i += 1) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        console.log(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        series[i].parametricEquation = this.getParametricEquation(
+          series[i].pieData.startRatio,
+          series[i].pieData.endRatio,
+          false,
+          false,
+          k,
+          series[i].pieData.value
+        );
+        startValue = endValue;
+        legendData.push(series[i].name);
+      }
+      return series;
+    },
+    getbing() {
+      const optionsData = [
+        {
+          name: "生料系统",
+          value: 11,
+          itemStyle: {
+            color: "#0BA0E3",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "水泥磨系统",
+          value: 33,
+          itemStyle: {
+            color: "#01E3F4",
+            // opacity: 1,
+          },
+        },
+        {
+          name: "破碎系统",
+          value: 22,
+          itemStyle: {
+            color: "#50F4C1",
+            // opacity: 1,
+          },
+        },
+      ];
+
+      const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+
+      series.push({
+        name: "pie2d",
+        type: "pie",
+        label: {
+          opacity: 1,
+          fontSize: 14,
+          lineHeight: 20,
+        },
+        labelLine: {
+          length: 30,
+          length2: 30,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "50%"],
+        data: optionsData,
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+
+      let option = {
+        // legend: {
+        //   tooltip: {
+        //     show: true,
+        //   },
+        //   data: ["生料系统", "水泥磨系统", "破碎系统"],
+        //   bottom: "10%",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 12,
+        //   },
+        // },
+        // tooltip: {
+        //   formatter: (params) => {
+        //     console.log(params);
+        //     console.log(params.seriesName);
+        //     if (
+        //       params.seriesName !== "mouseoutSeries" &&
+        //       params.seriesName !== "pie2d"
+        //     ) {
+        //       let bfb = (
+        //         (option.series[params.seriesIndex].pieData.endRatio -
+        //           option.series[params.seriesIndex].pieData.startRatio) *
+        //         100
+        //       ).toFixed(2);
+        //       return (
+        //         `${params.seriesName}<br/>` +
+        //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+        //         `${bfb}%`
+        //       );
+        //     }
+        //   },
+        // },
+        // title: {
+        //   text: "3D 饼图",
+        //   x: "center",
+        //   top: "20",
+        //   textStyle: {
+        //     color: "#fff",
+        //     fontSize: 22,
+        //   },
+        // },
+        labelLine: {
+          show: true,
+          lineStyle: {
+            color: "#7BC0CB",
+          },
+        },
+        label: {
+          show: true,
+          color:"#",
+          position: "outside",
+          formatter: (params) => {
+            var total = 0;
+            optionsData.forEach((item, index) => {
+              console.log(item.value);
+              total += item.value;
+            });
+            console.log(total);
+            let percent = ((params.value / total) * 100).toFixed(2);
+            console.log(params);
+            return (
+              `{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
+            );
+          },
+          rich: {
+            name: {
+              fontSize: 24,
+            },
+            colors: {
+              fontSize: 30,
+              color:optionsData[0].itemStyle.color,
+              fontWeight: 700,
+            },
+          },
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
+          viewControl: {
+            alpha: 40,
+            beta: 40,
+            distance: 500, //调整视角到主体的距离，类似调整zoom
+            rotateSensitivity: 0, // 设置为0无法旋转
+            zoomSensitivity: 0, // 设置为0无法缩放
+            panSensitivity: 0, // 设置为0无法平移
+            autoRotate: false, // 自动旋转
+          },
+        },
+        series: series,
+      };
+      this.defineEcharts("fhzb", option);
+    },
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom, null, {
+        devicePixelRatio: 10, // 设置为2或更高的值
+      });
+      myChart.setOption(option);
+    },
     getEchart() {
       var chartDom = document.getElementById("pdsydl");
       var myChart = echarts.init(chartDom);
@@ -1555,7 +1864,8 @@ export default {
     this.pdsydl();
     // this.getEchart();
     this.defineEcharts("pdstpt", this.option3);
-    this.init();
+    // this.init();
+    this.getbing();
   },
 };
 </script>