From 0b78323501e7d62be59699ca57b00ef87fc2d49a Mon Sep 17 00:00:00 2001
From: lll <you@example.com>
Date: Thu, 23 Nov 2023 13:42:26 +0800
Subject: [PATCH] nyjcd

---
 src/App.vue             |   2 +-
 src/views/Index.vue     |  10 +-
 src/views/lll/NYJCD.vue | 218 +++++++++++++++++++++++++++++++++++++++-
 3 files changed, 225 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 559a9dc..ef8a319 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,8 +17,8 @@
   /* width: 100vw;
   height: 100vh; */
   overflow: hidden;
-  background: transparent;
   background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
     url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png);
+  background-color: transparent;
 }
 </style>
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 75d8912..d3b067c 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -72,7 +72,7 @@
         <img src="../assets/img/智能运维按_hover.png" alt="" class="tabbars5" />
         <p>智能运维</p>
       </div>
-      <div class="box6" v-if="isShow">
+      <div class="box6" v-if="isShow" @click="sendMessageToCSharp">
         <img src="../assets/img/碳资产管理.png" alt="" class="tabbars6" />
         <p>碳资产管理</p>
       </div>
@@ -99,6 +99,14 @@ export default {
       isShow: true,
     };
   },
+  methods: {
+    sendMessageToCSharp() {
+      window.vuplex.postMessage({
+        type: "Tog",
+        message: "碳资产管理_true",
+      });
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
diff --git a/src/views/lll/NYJCD.vue b/src/views/lll/NYJCD.vue
index 4e66e16..f134c7f 100644
--- a/src/views/lll/NYJCD.vue
+++ b/src/views/lll/NYJCD.vue
@@ -55,7 +55,36 @@
           <img src="../../assets/img/小标题栏.png" class="img" />
           <p>余热发电</p>
         </div>
-        <div class="chartBox"></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>
@@ -125,6 +154,10 @@ export default {
       option2: {
         legend: {
           data: ["余热发电量"],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
         },
         xAxis: {
           type: "category",
@@ -171,10 +204,80 @@ export default {
             data: [523, 410, 300, 300, 250],
             itemStyle: {
               normal: {
-                color: "#00FF00",
+                color: "#09E83E",
+                label: {
+                  show: true, //开启显示
+                  position: "top", //在上方显示
+                  value: "max",
+                  textStyle: {
+                    //数值样式
+                    color: "#09E83E",
+                    fontSize: 30,
+                  },
+                },
+              },
+            },
+          },
+        ],
+      },
+      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: "#21FF55", //折线颜色
+                  color: "#43FFF4", //折线颜色
                 },
               },
             },
@@ -199,6 +302,36 @@ export default {
           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",
+        },
+      ],
     };
   },
 
@@ -211,6 +344,8 @@ export default {
   },
   mounted() {
     this.defineEcharts("qcssdh", this.option1);
+    this.defineEcharts("yrfd", this.option2);
+    this.defineEcharts("ljfdl", this.option3);
   },
 };
 </script>
@@ -385,6 +520,83 @@ export default {
     }
     .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;
+        }
+      }
     }
   }
 }