From 0951c26dbf0cafdb70cb299edab3a129b23c732b Mon Sep 17 00:00:00 2001
From: lll <you@example.com>
Date: Mon, 11 Dec 2023 11:28:06 +0800
Subject: [PATCH] =?UTF-8?q?pds=E6=97=A0=E5=88=87=E5=9B=BE=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/lll/PDS.vue | 455 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 450 insertions(+), 5 deletions(-)

diff --git a/src/views/lll/PDS.vue b/src/views/lll/PDS.vue
index 1c5ce4e..bcccc04 100644
--- a/src/views/lll/PDS.vue
+++ b/src/views/lll/PDS.vue
@@ -28,20 +28,313 @@
     </div>
     <img src="../../assets/img/pdsbg.png" v-if="falg" alt="" class="bgt" />
 
-    <div class="boxLeft" v-if="falg"></div>
-    <div class="boxRight" v-if="falg"></div>
+    <div class="boxLeft" v-if="falg">
+      <div class="title">1号配电箱</div>
+      <div class="container">
+        <div class="head">基本信息</div>
+        <ul class="container-box">
+          <li>
+            <p>设备信息</p>
+            <p>xxxxxxxxxxxxxx</p>
+          </li>
+          <li>
+            <p>设备型号</p>
+            <p>xxxxxxxxxxxxxx</p>
+          </li>
+          <li>
+            <p>生产厂家</p>
+            <p>xxxxxxxxxxxxxx</p>
+          </li>
+          <li>
+            <p>额定容量</p>
+            <p>630kVA</p>
+          </li>
+          <li>
+            <p>额定电压</p>
+            <p>600V</p>
+          </li>
+          <li>
+            <p>投运日期</p>
+            <p>2001年</p>
+          </li>
+          <li>
+            <p>投运状态</p>
+            <p>运行</p>
+          </li>
+        </ul>
+        <div class="head">电流/电压曲线</div>
+        <div class="data">
+          <span :class="type == '电压' ? 'active' : ''" @click="type = '电压'"
+            >电压</span
+          >
+          <span :class="type == '电流' ? 'active' : ''" @click="type = '电流'"
+            >电流</span
+          >
+        </div>
+        <div id="dldy"></div>
+      </div>
+    </div>
+    <div class="boxRight" v-if="falg">
+      <div class="title">1号配电箱</div>
+      <div class="container">
+        <div class="head">实时数据</div>
+        <div class="iconBox">
+          <div class="smallBox">
+            <img src="../../assets/img/可调图标.png" alt="" />
+            <div class="iconRight">
+              <div>245.69</div>
+              <div>实时功率(kW)</div>
+            </div>
+          </div>
+          <div class="smallBox">
+            <img src="../../assets/img/可调图标.png" alt="" />
+            <div class="iconRight">
+              <div>70</div>
+              <div>负载率(%)</div>
+            </div>
+          </div>
+          <div class="smallBox">
+            <img src="../../assets/img/可调图标.png" alt="" />
+            <div class="iconRight">
+              <div>6</div>
+              <div>变损率(%)</div>
+            </div>
+          </div>
+          <div class="smallBox">
+            <img src="../../assets/img/可调图标.png" alt="" />
+            <div class="iconRight">
+              <div>正常</div>
+              <div>设备工况</div>
+            </div>
+          </div>
+        </div>
+        <div class="head">实时负荷功率</div>
+        <div id="ssfh"></div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
 import Viewer from "viewerjs";
 import { pdsJs } from "../../utils/pds";
+import * as echarts from "echarts";
 export default {
   data() {
     return {
       arr: [],
       list: [],
       res: "",
-      falg: false,
+      falg: true,
+      type: "电流",
+      option: {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["A相", "B相", "C相"],
+          left: "right",
+          textStyle: {
+            color: "#fff",
+            fontSize: 20,
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#fff", // 将红色作为X轴线条的颜色
+            },
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:A",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        series: [
+          {
+            name: "A相",
+            type: "line",
+            showSymbol: false, // 设置为 false 隐藏数据点
+            data: [120, 132, 101, 134, 90, 230, 210],
+            itemStyle: {
+              normal: {
+                color: "#00DE8D", // 设置线条颜色为红色
+              },
+            },
+          },
+          {
+            name: "B相",
+            type: "line",
+            showSymbol: false, // 设置为 false 隐藏数据点
+            data: [220, 182, 191, 234, 290, 330, 310],
+            itemStyle: {
+              normal: {
+                color: "#00FBFE", // 设置线条颜色为红色
+              },
+            },
+          },
+          {
+            name: "C相",
+            type: "line",
+            showSymbol: false, // 设置为 false 隐藏数据点
+            data: [150, 232, 201, 154, 190, 330, 410],
+            itemStyle: {
+              normal: {
+                color: "#8E7CFF", // 设置线条颜色为红色
+              },
+            },
+          },
+        ],
+      },
+      option1: {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["昨日", "今日"],
+          left: "right",
+          textStyle: {
+            color: "#fff",
+            fontSize: 20,
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#fff", // 将红色作为X轴线条的颜色
+            },
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:kW",
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 20,
+            padding: 10,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+          },
+        },
+        series: [
+          {
+            name: "昨日",
+            type: "line",
+            smooth: true,
+            showSymbol: false, // 设置为 false 隐藏数据点
+            data: [220, 182, 191, 234, 290, 330, 310],
+            itemStyle: {
+              normal: {
+                color: "#1181C3", // 设置线条颜色为红色
+                width: 2,
+              },
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgba(7, 140, 217, 0.9)", // 渐变色的起始颜色
+                },
+                {
+                  offset: 0.5,
+                  color: "rgba(7, 140, 217, 0.6)", // 渐变色的起始颜色
+                },
+                {
+                  offset: 0.8,
+                  color: "rgba(7, 140, 217, 0.3)", // 渐变色的起始颜色
+                },
+                {
+                  offset: 1,
+                  color: "rgba(7, 140, 217, 0.1)", // 渐变色的结束颜色
+                },
+              ]),
+            },
+          },
+          {
+            name: "今日",
+            type: "line",
+            smooth: true,
+            showSymbol: false, // 设置为 false 隐藏数据点
+            data: [120, 132, 101, 134, 90, 230, 210],
+            itemStyle: {
+              normal: {
+                color: "#86B763", // 设置线条颜色为红色
+                width: 2,
+              },
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgba(188, 244, 93, 0.9)", // 渐变色的起始颜色
+                },
+                {
+                  offset: 0.5,
+                  color: "rgba(188, 244, 93, 0.9)", // 渐变色的起始颜色
+                },
+                {
+                  offset: 0.8,
+                  color: "rgba(188, 244, 93, 0.9)", // 渐变色的起始颜色
+                },
+                {
+                  offset: 1,
+                  color: "rgba(188, 244, 93, 0.9)", // 渐变色的起始颜色
+                },
+              ]),
+            },
+          },
+        ],
+      },
     };
   },
   created() {
@@ -221,9 +514,21 @@ export default {
       //   };
       // }
     },
+    dldy() {
+      var chartDom = document.getElementById("dldy");
+      var myChart = echarts.init(chartDom);
+      myChart.setOption(this.option);
+    },
+    ssfh() {
+      var chartDom = document.getElementById("ssfh");
+      var myChart = echarts.init(chartDom);
+      myChart.setOption(this.option1);
+    },
   },
   mounted() {
     this.initViewer();
+    this.dldy();
+    this.ssfh();
   },
   beforeDestroy() {
     this.falg = false;
@@ -353,17 +658,157 @@ export default {
 .boxLeft {
   width: 1089px;
   height: 1468px;
-  background-color: red;
+  background-color: rgba(32, 64, 111, 0.5);
   position: absolute;
   left: 2237px;
   top: 1200px;
+  color: #ffffff;
+  .data {
+    position: absolute;
+    font-size: 20px;
+    font-family: "DOUYU";
+    color: #ffffff;
+    line-height: 18px;
+    display: flex;
+    right: 0;
+    top: 650px;
+    z-index: 1;
+    cursor: pointer;
+    right: 60px;
+
+    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%
+      );
+    }
+  }
+  .title {
+    background: url(../../assets/img/小标题栏.png);
+    background-size: cover;
+    height: 49px;
+    font-size: 30px;
+    font-weight: bold;
+    height: 104px;
+    line-height: 104px;
+    text-indent: 92px;
+  }
+  .container {
+    height: calc(100% - 104px);
+    width: 100%;
+    padding: 0 60px 0 60px;
+    box-sizing: border-box;
+    .head {
+      font-size: 24px;
+      font-weight: bold;
+      line-height: 104px;
+      height: 104px;
+    }
+    .container-box {
+      list-style: none;
+      li {
+        height: 52px;
+        font-size: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        p:nth-of-type(1) {
+          margin-left: 100px;
+        }
+        p:nth-of-type(2) {
+          width: 550px;
+          text-align: center;
+          color: #bdf55d;
+        }
+      }
+      li:nth-of-type(2n-1) {
+        background-color: #2a5e8d;
+      }
+    }
+    #dldy {
+      width: 100%;
+      height: 600px;
+      margin-top: 40px;
+    }
+  }
 }
 .boxRight {
   width: 1089px;
   height: 1317px;
-  background-color: red;
+  background-color: rgba(32, 64, 111, 0.5);
   position: absolute;
   left: 5400px;
   top: 1200px;
+  .title {
+    background: url(../../assets/img/小标题栏.png);
+    background-size: cover;
+    height: 49px;
+    font-size: 30px;
+    font-family: "MicrosoftYaHei";
+    font-weight: bold;
+    height: 104px;
+    color: #ffffff;
+    line-height: 104px;
+    text-indent: 92px;
+  }
+  .container {
+    height: calc(100% - 104px);
+    width: 100%;
+    padding: 0 60px 0 60px;
+    box-sizing: border-box;
+    color: #fff;
+    .head {
+      font-size: 24px;
+      font-weight: bold;
+      line-height: 104px;
+      height: 104px;
+    }
+    .iconBox {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      .smallBox {
+        width: 40%;
+        display: flex;
+        align-items: center;
+        img {
+          width: 137px;
+          height: 137px;
+        }
+        .iconRight {
+          height: 130px;
+          margin-left: 30px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          div:nth-of-type(1) {
+            font-size: 37px;
+            color: #bdf55d;
+          }
+          div:nth-of-type(2) {
+            font-size: 20px;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+    #ssfh {
+      width: 100%;
+      height: 600px;
+      margin-top: 20px;
+    }
+  }
 }
 </style>