能源监控九个页面逻辑

src/router/index.js

@@ -28,9 +28,9 @@ const routes = [
       },
       // 能效管理
       {
-        path:"/nxgl",
+        path: "/nxgl",
-        name:"nxgl",
+        name: "nxgl",
-        component:()=>import("@/views/Zhou/NXGL.vue")
+        component: () => import("@/views/Zhou/NXGL.vue"),
       },
       {
         path: "pds",
@@ -43,6 +43,11 @@ const routes = [
         name: "pds1",
         component: () => import("../views/lll/NYJCD/PDS.vue"),
       },
+      {
+        path: "scx1",
+        name: "scx1",
+        component: () => import("../views/lll/NYJCD/SCX1.vue"),
+      },
       {
         path: "area",
         name: "area",
@@ -57,6 +62,18 @@ const routes = [
             path: "nyjcd",
             name: "nyjcd",
             component: () => import("../views/lll/NYJCD.vue"),
+            children: [
+              {
+                path: "scx1",
+                name: "scx1",
+                component: () => import("../views/lll/NYJCD/SCX1.vue"),
+              },
+              {
+                path: "pds",
+                name: "pds",
+                component: () => import("../views/lll/NYJCD/PDS.vue"),
+              },
+            ],
           },
           {
             path: "nyjcs",

src/views/lll/AREA.vue

@@ -81,9 +81,12 @@ export default {
     z-index: 2;
     top: 420px;
     right: 1351px;
+    z-index: 100;
 
     img {
       margin-right: 102px;
+      pointer-events: all;
+      cursor: pointer;
     }
   }
 }

src/views/lll/NYJCD.vue

@@ -57,7 +57,7 @@
       </div>
     </div>
 
-    <div class="left">
+    <div class="left" v-if="flag">
       <img src="../../assets/img/标题/能源监测-电.png" class="title" />
       <div class="qcssdh">
         <div class="imgBox">
@@ -106,7 +106,7 @@
       </div>
     </div>
 
-    <div class="right">
+    <div class="right" v-if="flag">
       <div class="yrfd">
         <div class="imgBox">
           <img src="../../assets/img/小标题栏.png" class="img" />
@@ -144,15 +144,21 @@
         </div>
       </div>
     </div>
+    <div class="area">
+      <router-view />
+    </div>
   </div>
 </template>
 <script>
+import { RouterView } from "vue-router";
+
 export default {
   data() {
     return {
       res: "月",
       click1: "",
       click2: "",
+      flag: true,
       option1: {
         xAxis: {
           type: "category",
@@ -176,7 +182,7 @@ export default {
           },
           min: 0,
           max: 500,
-          interval: 100, // 指定刻度间隔
+          interval: 100,
           axisLabel: {
             show: true,
             textStyle: {
@@ -202,7 +208,7 @@ export default {
               normal: {
                 color: "#00FF00",
                 lineStyle: {
-                  width: 5, //折线宽度
+                  width: 5,
                   color: "#21FF55", //折线颜色
                 },
               },
@@ -240,7 +246,7 @@ export default {
           },
           min: 0,
           max: 500,
-          interval: 100, // 指定刻度间隔
+          interval: 100,
           axisLabel: {
             show: true,
             textStyle: {
@@ -265,8 +271,8 @@ export default {
               normal: {
                 color: "#09E83E",
                 label: {
-                  show: true, //开启显示
+                  show: true,
-                  position: "top", //在上方显示
+                  position: "top",
                   value: "max",
                   textStyle: {
                     //数值样式
@@ -309,7 +315,7 @@ export default {
           },
           min: 0,
           max: 500,
-          interval: 100, // 指定刻度间隔
+          interval: 100,
           axisLabel: {
             show: true,
             textStyle: {
@@ -335,7 +341,7 @@ export default {
               normal: {
                 color: "#43FFF4",
                 lineStyle: {
-                  width: 5, //折线宽度
+                  width: 5,
                   color: "#43FFF4", //折线颜色
                 },
               },
@@ -393,7 +399,6 @@ export default {
       ],
     };
   },
-
   methods: {
     defineEcharts(dom, option) {
       var chartDom = document.getElementById(dom);
@@ -403,20 +408,55 @@ export default {
     goOne(a) {
       this.click2 = "";
       this.click1 = a;
+      this.flag = false;
+      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.flag = false;
+      this.$router.replace(
+        `/area/nyjcd/scx1?type=${this.click2}`,
+        () => {},
+        () => {}
+      );
     },
   },
+  created() {
+    this.flag = true;
+  },
   mounted() {
     this.defineEcharts("qcssdh", this.option1);
     this.defineEcharts("yrfd", this.option2);
     this.defineEcharts("ljfdl", this.option3);
   },
+  components: { RouterView },
 };
 </script>
 <style lang="less" scoped>
+.area {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  pointer-events: all;
+}
 .box {
   width: 100%;
   height: 100%;
@@ -426,8 +466,10 @@ export default {
   display: flex;
   justify-content: space-between;
   position: relative;
+  z-index: 10;
 }
 .imgLeft {
+  z-index: 100;
   position: absolute;
   left: 1300px;
   top: 1500px;
@@ -440,6 +482,7 @@ export default {
     font-size: 30px;
     background-image: url("../../assets/nyjc/组 2 76.png");
     margin: 37px;
+    cursor: pointer;
   }
   .active {
     background-image: url("../../assets/nyjc/组 276.png");
@@ -447,6 +490,7 @@ export default {
 }
 
 .imgRight {
+  z-index: 100;
   position: absolute;
   right: 1300px;
   top: 1300px;
@@ -459,6 +503,7 @@ export default {
     font-size: 30px;
     background-image: url(../../assets/nyjc/组\ 277.png);
     margin: 37px;
+    cursor: pointer;
   }
   .active {
     background-image: url("../../assets/nyjc/图层 1.png");

src/views/lll/NYJCD/PDS.vue

@@ -65,6 +65,82 @@
               <span>6</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>
+        </div>
+        <div class="chartBox">
+          <div id="pdsjk">
+            <el-table
+              :data="tableData1"
+              :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: #58caff"> {{ scope.row.date2 }}</span
+                  ><span>kWh</span>
+                </template>
+              </el-table-column>
+            </el-table>
           </div>
         </div>
       </div>
@@ -214,6 +290,100 @@ export default {
           },
         ],
       },
+      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,
+        },
+        {
+          date1: "二线生料磨电力室",
+          date2: "17.42",
+          date3: "17.42",
+          date4: true,
+        },
+        {
+          date1: "窑尾电力室",
+          date2: "12.22",
+          date3: "12.22",
+          date4: true,
+        },
+        {
+          date1: "一线窑头电力室1",
+          date2: "19.19",
+          date3: "19.19",
+          date4: false,
+        },
+        {
+          date1: "一线窑头电力室2",
+          date2: "19.19",
+          date3: "19.19",
+          date4: true,
+        },
+        {
+          date1: "二线窑头电力室1",
+          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",
+        },
+        {
+          date1: "一线窑头电力室1",
+          date2: "19.19",
+        },
+        {
+          date1: "一线窑头电力室2",
+          date2: "19.19",
+        },
+        {
+          date1: "二线窑头电力室1",
+          date2: "19.19",
+        },
+      ],
     };
   },
   methods: {
@@ -222,6 +392,12 @@ export default {
       var myChart = this.$echarts.init(chartDom);
       myChart.setOption(option);
     },
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 === 0) {
+        return "success-row";
+      }
+      return "";
+    },
   },
   mounted() {
     this.defineEcharts("pdsssdh", this.option1);
@@ -232,8 +408,8 @@ export default {
 <style scoped lang="less">
 .box {
   width: 100%;
+  margin-top: -800px;
   height: 100%;
-  padding-top: 400px;
   box-sizing: border-box;
   background-color: transparent;
   display: flex;
@@ -432,7 +608,7 @@ export default {
       margin-top: 50px;
       #pdsjk {
         width: 1156px;
-        height: 600px;
+        height: 900px;
         .title {
           display: flex;
           align-items: center;
@@ -446,6 +622,42 @@ export default {
             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;
+        }
       }
     }
   }

src/views/lll/NYJCD/SCX1.vue

@@ -0,0 +1,740 @@
+<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>{{ $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>
+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",
+        },
+      ],
+    };
+  },
+  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 "";
+    },
+    getHeaderCellStyle() {
+      return {
+        backgroundColor: "#1969A8",
+        color: "white",
+      };
+    },
+  },
+  mounted() {
+    this.defineEcharts("pdsssdh", this.option1);
+    this.defineEcharts("pdsydl", this.option2);
+    this.defineEcharts("pdstpt", this.option3);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  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;
+        }
+      }
+    }
+  }
+}
+</style>