修改了供电系统的主界面

src/assets/css/global.css

@@ -58,15 +58,6 @@ body,
     margin-bottom: 10px;
 }
 
-.com-page {
-  width: 100%;
-  height: 100%;
-  overflow-y: scroll;
-  background-image:url("../img/bg.jpg");
-  background-repeat:no-repeat;
-  background-size:cover;
-}
-
 .com-container {
   width: 100%;
   height: 100%;

src/components/power_supply/configImg/Panel.vue

@@ -1,402 +1,78 @@
 <template>
-  <div>
-    <el-row :gutter="20">
-      <!-- 1-1 -->
-      <el-col :span="12">
-        <div class="grid-content ">
-          <span>
-            <p>
-              <font color=#FFFFFF>报警记录</font>
-            </p>
-          </span>
-          <el-card1>
-            <el-table
-              :data="alertData"
-              style="width:750px;height:300px"
-            >
-              <el-table-column
-                prop="name"
-                label="报警名称"
-                width="180"
-              >
-              </el-table-column>
-              <el-table-column
-                prop="time"
-                label="报警时间"
-                width="180"
-              >
-              </el-table-column>
-              <el-table-column
-                prop="rank"
-                label="级别"
-              >
-              </el-table-column>
-              <el-table-column
-                prop="result"
-                label="处理结果"
-              >
-              </el-table-column>
-            </el-table>
-          </el-card1>
-        </div>
-      </el-col>
-      <!-- 1-2 -->
-      <el-col :span="12">
-        <div class="grid-content ">
-          <span>
-            <p>
-              <font color=#FFFFFF>操作记录</font>
-            </p>
-          </span>
-          <el-card1>
-            <el-table
-              :data="operateData"
-              style="width:750px;height:300px"
-            >
-              <el-table-column
-                prop="date"
-                label="时间"
-                width="180"
-              >
-              </el-table-column>
-              <el-table-column
-                prop="name"
-                label="操作"
-                width="180"
-              >
-              </el-table-column>
-            </el-table>
-          </el-card1>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row :gutter="20">
-      <!-- 2-1 -->
-      <el-col :span="24">
-        <div class="grid-content ">
-          <span>
-            <p>
-              <font color=#FFFFFF>回路耗能分析</font>
-            </p>
-          </span>
-          <el-card>
-            <div class="panel_bar">
-              <div
-                class="chart"
-                style="width:1300px;height:300px"
-              >
-                <energyCunsumption></energyCunsumption>
-              </div>
-              <div class="panel-footer"></div>
-            </div>
-          </el-card>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row>
-      <!-- 2-2 -->
-      <el-col :span="24">
-        <div class="grid-content ">
-          <span>
-            <p>
-              <font color=#FFFFFF>回路参数曲线</font>
-            </p>
-          </span>
-          <el-card>
-            <div class="panel_bar">
-              <div
-                id="chart-wrap1"
-                style="width:1300px;height:300px"
-              >
-                <!--                <ReturnCircuit></ReturnCircuit>-->
-                <ReturnCircuitTest></ReturnCircuitTest>
-              </div>
-              <div class="panel-footer"></div>
-            </div>
-          </el-card>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row :gutter="20">
-      <el-col :span="24">
-        <div class="grid-content ">
-          <el-card>
-            <div class="panel_bar">
-              <div
-                id="chart-wrap2"
-                style="width:1300px;height:300px"
-              >
-                <ReturnCircuit2></ReturnCircuit2>
-              </div>
-              <div class="panel-footer"></div>
-            </div>
-          </el-card>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row :gutter="20">
-      <el-col :span="24">
-        <div class="grid-content ">
-          <el-card>
-            <div class="panel_bar">
-              <div
-                id="chart-wrap3"
-                style="width:1300px;height:300px"
-              >
-                <ReturnCircuit3></ReturnCircuit3>
-              </div>
-              <div class="panel-footer"></div>
-            </div>
-          </el-card>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row :gutter="20">
-      <el-col :span="24">
-        <div class="grid-content ">
-          <el-card>
-            <div class="panel_bar">
-              <div
-                id="chart-wrap4"
-                style="width:1300px;height:300px"
-              >
-                <ReturnCircuit4></ReturnCircuit4>
-              </div>
-              <div class="panel-footer"></div>
-            </div>
-          </el-card>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row :gutter="20">
-      <el-col :span="24">
-        <div class="grid-content ">
-          <el-card>
-            <div class="panel_bar">
-              <div
-                id="chart-wrap5"
-                style="width:1300px;height:300px"
-              >
-                <ReturnCircuit5></ReturnCircuit5>
-              </div>
-              <div class="panel-footer"></div>
-            </div>
-          </el-card>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row :gutter="20">
-      <el-col :span="24">
-        <div class="grid-content ">
-          <el-card>
-            <div class="panel_bar">
-              <div
-                id="chart-wrap6"
-                style="width:1300px;height:300px"
-              >
-                <ReturnCircuit6></ReturnCircuit6>
-              </div>
-              <div class="panel-footer"></div>
-            </div>
-          </el-card>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row :gutter="20">
-      <el-col :span="24">
-        <div class="grid-content ">
-          <el-card>
-            <div class="panel_bar">
-              <div
-                id="chart-wrap7"
-                style="width:1300px;height:300px"
-              >
-                <ReturnCircuit7></ReturnCircuit7>
-              </div>
-              <div class="panel-footer"></div>
-            </div>
-          </el-card>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row :gutter="20">
-      <el-col :span="24">
-        <div class="grid-content ">
-          <el-card>
-            <div class="panel_bar">
-              <div
-                id="chart-wrap8"
-                style="width:1300px;height:300px"
-              >
-                <ReturnCircuit8></ReturnCircuit8>
-              </div>
-              <div class="panel-footer"></div>
-            </div>
+  <div class="table-wrapper">
+    <el-table :data="tableData" border style="width: 100%">
+      <el-table-column prop="name" label="名称" width="180"> </el-table-column>
 
-          </el-card>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row :gutter="20">
-      <el-col :span="24">
-        <div class="grid-content ">
-          <el-card>
-            <div class="panel_bar">
-              <div
-                id="chart-wrap9"
-                style="width:1300px;height:300px"
-              >
-                <ReturnCircuit9></ReturnCircuit9>
-              </div>
-              <div class="panel-footer"></div>
-            </div>
-          </el-card>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row :gutter="20">
-      <el-col :span="24">
-        <div class="grid-content ">
-          <el-card>
-            <div class="panel_bar">
-              <div
-                id="chart-wrap10"
-                style="width:1300px;height:300px"
-              >
-                <ReturnCircuit10></ReturnCircuit10>
-              </div>
-              <div class="panel-footer"></div>
-            </div>
-
-          </el-card>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row :gutter="20">
-      <el-col :span="24">
-        <div class="grid-content ">
-          <el-card>
-            <div class="panel_bar">
-              <div
-                id="chart-wrap11"
-                style="width:1300px;height:300px"
-              >
-                <ReturnCircuit11></ReturnCircuit11>
-              </div>
-              <div class="panel-footer"></div>
-            </div>
-          </el-card>
-        </div>
-      </el-col>
-    </el-row>
+      <el-table-column prop="problem" label="记录" width="180">
+      </el-table-column>
+    </el-table>
   </div>
-
 </template>
 <script>
-import axios from "axios";
-import ReturnCircuitTest from "@/components/power_supply/configImg/ReturnCircuitTest";
-import EnergyCunsumption from "@/components/power_supply/configImg/EnergyCunsumption";
-// import ReturnCircuit from '@/components/ReturnCircuit'
-import ReturnCircuit2 from "@/components/power_supply/configImg/ReturnCircuit2";
-import ReturnCircuit3 from "@/components/power_supply/configImg/ReturnCircuit3";
-import ReturnCircuit4 from "@/components/power_supply/configImg/ReturnCircuit4";
-import ReturnCircuit5 from "@/components/power_supply/configImg/ReturnCircuit5";
-import ReturnCircuit6 from "@/components/power_supply/configImg/ReturnCircuit6";
-import ReturnCircuit7 from "@/components/power_supply/configImg/ReturnCircuit7";
-import ReturnCircuit8 from "@/components/power_supply/configImg/ReturnCircuit8";
-import ReturnCircuit9 from "@/components/power_supply/configImg/ReturnCircuit9";
-import ReturnCircuit10 from "@/components/power_supply/configImg/ReturnCircuit10";
-import ReturnCircuit11 from "@/components/power_supply/configImg/ReturnCircuit11";
 export default {
   data() {
     return {
-      // 报警记录
-      alertData: [
+      tableData: [
         {
-          name: "过热",
-          time: "2021-12-26 22:00",
-          rank: "1级",
-          result: "已处理",
+          name: 1,
+          problem: 2,
         },
         {
-          name: "嗡嗡响",
-          time: "2021-12-26 22:05",
-          rank: "2级",
-          result: "未处理",
+          name: 1,
+          problem: 2,
+        },
+        {
+          name: 1,
+          problem: 2,
         },
-      ],
-      // 操作记录
-      operateData: [
         {
-          date: "2021-12-26 22:06",
-          name: "1号回路开启",
+          name: 1,
+          problem: 2,
         },
       ],
     };
   },
-  mounted() {
-    this.getAlertData();
-    this.getOperateData();
-  },
-  methods: {
-    getAlertData() {
-      axios
-        .get("AlertData")
-        .then((response) => {
-          console.log(response.data);
-          this.alertData = response.data;
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    },
-    getOperateData() {
-      axios
-        .get("OperateData")
-        .then((response) => {
-          console.log(response.data);
-          this.operateData = response.data;
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    },
-  },
-  components: {
-    ReturnCircuitTest,
-    EnergyCunsumption,
-    // ReturnCircuit,
-    ReturnCircuit2,
-    ReturnCircuit3,
-    ReturnCircuit4,
-    ReturnCircuit5,
-    ReturnCircuit6,
-    ReturnCircuit7,
-    ReturnCircuit8,
-    ReturnCircuit9,
-    ReturnCircuit10,
-    ReturnCircuit11,
-  },
 };
 </script>
-<style scoped>
-.grid-content {
-  height: 400px;
-}
-.el-card {
-  height: 350px;
-  width: 1500px;
-}
-.el-card1 {
-  height: 350px;
-  width: 750px;
+
+<style lang='scss' scoped>
+.table-wrapper {
+   height: 80%;;
+   margin-top: 10px;
+   ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
+     background-color:  rgba(70, 130, 180, 0.2);
+     color: #fff;
+   }
+ }
+
+/* 删除表格下横线 */
+.table-wrapper ::v-deep .el-table::before {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 0px;
+  border: none;
 }
 
-.sapn {
-  font-family: sans-serif;
+.table-wrapper ::v-deep .el-table,
+.el-table__expanded-cell {
+  background-color: transparent;
+  border: none;
 }
 
-.panel_bar {
-  width: 100%;
+.table-wrapper ::v-deep .el-table tr {
+  background-color: transparent !important;
+  border: none;
+}
+.table-wrapper ::v-deep .el-table th {
+  background-color: transparent !important;
+  border: none;
+  color:#4ADEFE;
 }
-</style>>
+.table-wrapper ::v-deep .el-table td, .el-table th.is-leaf {
+  background-color: transparent !important;
+  color:#F3DB5C;
+  border: none;
+}
+</style>
+

src/components/power_supply/configImg/Table.vue

@@ -1,10 +1,10 @@
 <template>
   <div id="table">
-    <h1 align="center" style="color: rgb(121, 73, 255)">供电系统组态图</h1>
+    <h1 align="center" style="color: #4adefe">供电系统组态图</h1>
 
-    <img src="@/assets/img/OPEN.svg" id="imgswitch" />
+    <img src="@/assets/img/OPEN.svg" id="imgSwitch" />
     <el-main>
-      <table border="0" cellspacing="6" class="table1">
+      <table class="table1">
         <tr>
           <th></th>
           <th style="width: 120px">1#变压器出线</th>
@@ -22,7 +22,7 @@
           <th style="width: 150px; right: 400px">2#空压机</th>
         </tr>
         <tr align="center">
-          <td>Ia:</td>
+          <td><span>Ia:</span></td>
           <td>{{ six.transformerOut_1.Ia }}</td>
           <td>{{ six.transformerOut_2.Ia }}</td>
           <td>{{ six.workshop.Ia }}</td>
@@ -38,7 +38,7 @@
           <td>{{ six.airCompressor_2.Ia }}</td>
         </tr>
         <tr align="center">
-          <td>P:</td>
+          <td><span>P:</span></td>
           <td>{{ six.transformerOut_1.p }}</td>
           <td>{{ six.transformerOut_2.p }}</td>
           <td>{{ six.workshop.p }}</td>
@@ -54,7 +54,7 @@
           <td>{{ six.airCompressor_2.p }}</td>
         </tr>
         <tr align="center">
-          <td>Q:</td>
+          <td><span>Q:</span></td>
           <td>{{ six.transformerOut_1.q }}</td>
           <td>{{ six.transformerOut_2.q }}</td>
           <td>{{ six.workshop.q }}</td>
@@ -70,7 +70,7 @@
           <td>{{ six.airCompressor_2.q }}</td>
         </tr>
         <tr align="center">
-          <td>Cos:</td>
+          <td><span>Cos:</span></td>
           <td>{{ six.transformerOut_1.cos }}</td>
           <td>{{ six.transformerOut_2.cos }}</td>
           <td>{{ six.workshop.cos }}</td>
@@ -87,39 +87,41 @@
         </tr>
       </table>
     </el-main>
-    <el-row :gutter="20">
-      <el-col :offset="6" :span="6"
+    <el-row>
+      <el-col :offset="6" :span="7"
         ><div class="grid-content bg-purple">
-          <table border="0" cellspacing="20" class="table2">
+          <table class="table2">
             <tr align="left">
-              <td>Ua(KV):{{ four.right.Ua }}KV</td>
-              <td>Uab(KV):{{ four.right.Uab }} KV</td>
+              <td>Ua(KV):<span>{{ four.right.Ua }}KV</span></td>
+              <td>Uab(KV):<span>{{ four.right.Uab }}KV</span></td>
             </tr>
             <tr align="left">
-              <td>Ub(KV):{{ four.right.Ub }} KV</td>
-              <td>Ubc(KV):{{ four.right.Ubc }} KV</td>
+              <td>Ub(KV):<span>{{ four.right.Ub }}KV</span></td>
+              <td>Ubc(KV):<span>{{ four.right.Ubc }}KV</span></td>
             </tr>
             <tr align="left">
-              <td>Uc(KV):{{ four.right.Uc }} KV</td>
-              <td>Uca(KV):{{ four.right.Uca }} KV</td>
+              <td>Uc(KV):<span>{{ four.right.Uc }}KV</span></td>
+              <td>Uca(KV):<span>{{ four.right.Uca }}KV</span></td>
             </tr>
           </table>
         </div></el-col
       >
-      <el-col :span="6"
+      <el-col :span="8"
         ><div class="grid-content bg-purple">
-          <table border="0" cellspacing="20" class="table3">
+          <table class="table2">
             <tr align="left">
-              <td>Ua(KV):{{ four.left.Ua }} KV</td>
-              <td>Uab(KV):{{ four.left.Uab }} KV</td>
+              <td>
+                Ua(KV):<span>{{ four.left.Ua }}KV</span>
+              </td>
+              <td>Uab(KV):<span>{{ four.left.Uab }}KV</span></td>
             </tr>
             <tr align="left">
-              <td>Ub(KV):{{ four.left.Ub }} KV</td>
-              <td>Ubc(KV):{{ four.left.Ubc }} KV</td>
+              <td>Ub(KV):<span>{{ four.left.Ub }}KV</span></td>
+              <td>Ubc(KV):<span>{{ four.left.Ubc }}KV</span></td>
             </tr>
             <tr align="left">
-              <td>Uc(KV):{{ four.left.Uc }}KV</td>
-              <td>Uca(KV):{{ four.left.Uca }} KV</td>
+              <td>Uc(KV):<span>{{ four.left.Uc }}KV</span></td>
+              <td>Uca(KV):<span>{{ four.left.Uca }}KV</span></td>
             </tr>
           </table>
         </div></el-col
@@ -273,32 +275,35 @@ export default {
 <style scoped>
 .table1 {
   left: 0px;
-  width: 99%;
+  width: 100%;
   height: 300px;
   bottom: 150px;
-  color: white;
+  color:#4ADEFE;
   margin: 0px auto;
 }
+.table1 td {
+  color: #f3db5c;
+  font-size: 20px;
+}
+.table1 td span {
+  color:#4ADEFE;
+}
 
 .table2 {
-  /* margin: 60px;
-  width: 550px;
-  bottom: 20px; */
-  font-size: 17px;
+  /* margin: 60px; */
+  border-collapse: separate;
+  border-spacing: 20px 5px; /* 水平间距 垂直间距 */
+  /* width: 550px; */
+  bottom: 20px;
+  font-size: 20px;
   line-height: 20px;
-  color: white;
+  color:#4ADEFE;
   /* position: absolute; */
 }
 
-.table3 {
-  /* margin: 50px;
-  width: 550px;
-  right: 280px;
-  bottom: 20px; */
-  font-size: 17px;
-  line-height: 20px;
-  color: white;
-  /* position: absolute; */
+.table2 span {
+  color: #f3db5c;
+  padding-left: 40px;
 }
 
 .table4 {
@@ -310,9 +315,10 @@ export default {
   position: absolute;
 }
 
-#imgswitch {
+#imgSwitch {
   width: 95%;
   height: 50%;
   left: 50px;
+  margin-left: 30px;
 }
 </style>

src/views/power_supply/configImg/123

@@ -1,20 +0,0 @@
-      <a-row style="margin: 0 -12px">
-        <a-col
-          style="padding: 0 12px"
-          :xl="16"
-          :lg="24"
-          :md="24"
-          :sm="24"
-          :xs="24"
-        >
-        </a-col>
-        <a-col
-          style="padding: 0 12px"
-          :xl="8"
-          :lg="24"
-          :md="24"
-          :sm="24"
-          :xs="24"
-        >
-        </a-col>
-      </a-row>

src/views/power_supply/configImg/PanelPage.vue

@@ -18,5 +18,16 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style scoped>
+.com-page {
+  width: 100%;
+  height: 850px;
+  background-image: linear-gradient(
+    to right,
+    rgb(6, 19, 60) 0%,
+    rgb(1, 22, 105) 50%,
+    rgb(6, 19, 60) 100%
+  );
+  position: relative;
+}
 </style>

src/views/power_supply/configImg/TablePage.vue

@@ -5,18 +5,29 @@
 </template>
 
 <script>
-import Table from '@/components/power_supply/configImg/Table'
+import Table from "@/components/power_supply/configImg/Table";
 
 export default {
-  data () {
-    return {}
+  data() {
+    return {};
   },
   methods: {},
   components: {
-    Table: Table
-  }
-}
+    Table: Table,
+  },
+};
 </script>
 
-<style lang="less" scoped>
+<style scoped>
+.com-page {
+  width: 100%;
+  height: 850px;
+  background-image: linear-gradient(
+    to right,
+    rgb(6, 19, 60) 0%,
+    rgb(1, 22, 105) 50%,
+    rgb(6, 19, 60) 100%
+  );
+  position: relative;
+}
 </style>

src/views/transportation/configImg/belt/Chart.vue

@@ -139,14 +139,6 @@ export default {
   props: ["id", "title", "unit", "type"],
   methods: {
     addData(data) {
-      // console.log("data", data);
-      //                 data.forEach((item, index) => {
-      //   this.data.pop();
-      //   this.data.unshift(item[this.type]);
-      //   this.xData.pop();
-      //   this.xData.unshift(item["date"].split(" ")[1]);
-      // });
-      // 先扩展数组，然后删除多余元素
       if (this.count < 30) {
         for(let i = 0 ; i < data.length ; i++){
           this.data[this.count] = data[i][this.type];