From a7d61aa6e1cc0edbe89919bf77f6ee0b20916016 Mon Sep 17 00:00:00 2001
From: lll <you@example.com>
Date: Fri, 24 Nov 2023 10:12:00 +0800
Subject: [PATCH] 1

---
 src/router/index.js         |  11 +
 src/views/lll/AREA.vue      |  11 +-
 src/views/lll/NYJCD/PDS.vue | 453 ++++++++++++++++++
 src/views/lll/NYJCM.vue     | 909 ++++++++++++++++++++++++++++++++++++
 4 files changed, 1383 insertions(+), 1 deletion(-)
 create mode 100644 src/views/lll/NYJCD/PDS.vue
 create mode 100644 src/views/lll/NYJCM.vue

diff --git a/src/router/index.js b/src/router/index.js
index 84bf5c8..5c2321b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -29,6 +29,12 @@ const routes = [
         name: "pds",
         component: () => import("../views/lll/PDS.vue"),
       },
+      //测试页面
+      {
+        path: "pds1",
+        name: "pds1",
+        component: () => import("../views/lll/NYJCD/PDS.vue"),
+      },
       {
         path: "area",
         name: "area",
@@ -49,6 +55,11 @@ const routes = [
             name: "nyjcs",
             component: () => import("../views/lll/NYJCS.vue"),
           },
+          {
+            path: "nyjcm",
+            name: "nyjcm",
+            component: () => import("../views/lll/NYJCM.vue"),
+          },
         ],
       },
     ],
diff --git a/src/views/lll/AREA.vue b/src/views/lll/AREA.vue
index a78d57a..846b72d 100644
--- a/src/views/lll/AREA.vue
+++ b/src/views/lll/AREA.vue
@@ -37,7 +37,16 @@
         src="../../assets/nyjc/煤1.png"
         alt=""
         v-show="!mei"
-        @click="(dian = false), (shui = false), (mei = true)"
+        @click="
+          (dian = false),
+            (shui = false),
+            (mei = true),
+            $router.push(
+              '/area/nyjcm',
+              () => {},
+              () => {}
+            )
+        "
       />
       <img src="../../assets/nyjc/煤.png" alt="" v-show="mei" />
     </div>
diff --git a/src/views/lll/NYJCD/PDS.vue b/src/views/lll/NYJCD/PDS.vue
new file mode 100644
index 0000000..44d2bcf
--- /dev/null
+++ b/src/views/lll/NYJCD/PDS.vue
@@ -0,0 +1,453 @@
+<template>
+  <div class="box">
+    <div class="left">
+      <img
+        src="../../../assets/img/标题/能源监测-电-配电室.png"
+        class="title"
+      />
+      <div class="pdsssdh">
+        <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="pdsssdh"></div>
+      </div>
+      <div class="pdsydl">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <p>配电室用电量</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>
+        </div>
+        <div id="pdstpt">
+          <img src="../../../assets/znyw/tpt.png" />
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="pdsjk">
+        <div class="imgBox">
+          <img src="../../../assets/img/小标题栏.png" class="img" />
+          <p>配电室监控</p>
+        </div>
+        <div class="chartBox">
+          <div id="pdsjk">
+            <div class="title">
+              <p>配电室数量：</p>
+              <span>6</span>
+              <p>个</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      res: "月",
+      type: "总用电",
+      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", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    defineEcharts(dom, option) {
+      var chartDom = document.getElementById(dom);
+      var myChart = this.$echarts.init(chartDom);
+      myChart.setOption(option);
+    },
+  },
+  mounted() {
+    this.defineEcharts("pdsssdh", this.option1);
+    this.defineEcharts("pdsydl", this.option2);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 400px;
+  box-sizing: border-box;
+  background-color: transparent;
+  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: 600px;
+      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;
+      img {
+        width: 100%;
+        height: 94%;
+      }
+    }
+  }
+}
+.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: 600px;
+        .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;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/lll/NYJCM.vue b/src/views/lll/NYJCM.vue
new file mode 100644
index 0000000..59eb06e
--- /dev/null
+++ b/src/views/lll/NYJCM.vue
@@ -0,0 +1,909 @@
+<template>
+  <div class="box">
+    <div class="left">
+      <img src="../../assets/img/标题/能源监测-煤.png" class="title" />
+      <div class="top">
+        <div>
+          <img src="../../assets/nyjc/组 963.png" alt="" />
+          <p>平阴水泥厂</p>
+        </div>
+        <div class="two">
+          <div class="txt">
+            <span style="color: #95fffe">1218</span><span>t</span>
+          </div>
+          <img src="../../assets/nyjc/煤 拷贝.png" alt="" />
+          <p>今日用煤量</p>
+        </div>
+      </div>
+      <div class="rysl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>日用煤量</p>
+        </div>
+        <div class="tip">
+          <span>今日用煤量</span><span>870</span><span>t</span><span>↑</span>
+        </div>
+        <div id="rysl"></div>
+      </div>
+      <div class="yysl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>月用煤量</p>
+        </div>
+        <div class="tip">
+          <span>本月用煤量</span><span>870</span><span>t</span><span>↑</span>
+        </div>
+        <div id="yysl"></div>
+      </div>
+      <div class="nysl">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>年用煤量</p>
+        </div>
+        <div class="tip">
+          <span>本年用煤量</span><span>870</span><span>t</span><span>↑</span>
+        </div>
+        <div id="nysl"></div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="ystj">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>用煤统计</p>
+        </div>
+        <div class="chartBox">
+          <div id="ystj">
+            <img src="../../assets/nyjc/组 964.png" alt="" />
+            <div class="zs">
+              <span>总数：</span
+              ><span style="color: #58caff; font-size: 30px">5</span>
+            </div>
+            <div class="zx">
+              <span>在线：</span
+              ><span style="color: #56f671; font-size: 30px">118</span>
+            </div>
+            <div class="zxl">
+              <span>在线率：</span
+              ><span style="color: #56f671; font-size: 30px">72%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="sbjc">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>用煤设备监测</p>
+        </div>
+        <div class="chartBox">
+          <div id="sbjc">
+            <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">
+              </el-table-column>
+              <el-table-column prop="date2" label="用煤量" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58ff70"> {{ scope.row.date2 }}</span
+                  ><span>t</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>t</span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="date4"
+                label="单位热值含碳量"
+                align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #abb9fe"> {{ scope.row.date4 }}</span>
+                  <span>tCO2/t</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+      <div class="tpt">
+        <div class="imgBox">
+          <img src="../../assets/img/小标题栏.png" class="img" />
+          <p>用煤排名</p>
+        </div>
+        <div class="chartBox">
+          <div id="tpt">
+            <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>
+            <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">
+              </el-table-column>
+              <el-table-column prop="date2" label="用煤量" align="center"
+                ><template slot-scope="scope">
+                  <span style="color: #58ff70"> {{ scope.row.date2 }}</span
+                  ><span>t</span>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      res: "月",
+      option1: {
+        legend: {
+          data: [{ icon: "rect", name: "日用煤量" }],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["1月", "2月", "3月", "4月", "5月"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          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: "日用煤量",
+            data: [280, 350, 120, 270, 290],
+            smooth: true,
+
+            itemStyle: {
+              normal: {
+                color: "#21EF06",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#21EF06", //折线颜色
+                },
+                areaStyle: {
+                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 1, color: "#0C3431" },
+                    { offset: 0.5, color: "#198522" },
+                    { offset: 0, color: "#18881C" },
+                  ]),
+                },
+              },
+            },
+
+            markPoint: {
+              data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+          },
+        ],
+      },
+      option2: {
+        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: "单位:t",
+          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",
+            markPoint: {
+              data: [{ type: "max", name: "Max" }],
+              label: {
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 15,
+                },
+              },
+            },
+            name: "月用煤量",
+            data: [280, 350, 120, 270, 290],
+            smooth: true,
+
+            itemStyle: {
+              normal: {
+                color: "#11C3FF",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#11C3FF", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      },
+      option3: {
+        legend: {
+          data: [
+            { icon: "rect", name: "去年用煤量" },
+            { icon: "rect", name: "今年用煤量" },
+          ],
+          textStyle: {
+            color: "#fff",
+            fontSize: "20px",
+          },
+        },
+        xAxis: {
+          type: "category",
+          data: ["2019", "2020", "2021", "2022", "2023"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+              fontSize: 20,
+            },
+            interval: 0, //代表显示所有x轴标签显示
+          },
+        },
+        yAxis: {
+          type: "value",
+          name: "单位:t",
+          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: "去年用煤量",
+            data: [240, 334, 123, 270, 296],
+            symbolSize: 15,
+            itemStyle: {
+              normal: {
+                color: "#56F671",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#56F671", //折线颜色
+                },
+              },
+            },
+          },
+          {
+            type: "line",
+            name: "今年用煤量",
+            symbolSize: 15,
+            data: [223, 434, 423, 254, 216],
+            itemStyle: {
+              normal: {
+                color: "#43FFF4",
+                lineStyle: {
+                  width: 5, //折线宽度
+                  color: "#43FFF4", //折线颜色
+                },
+              },
+            },
+          },
+        ],
+      },
+      tableData: [
+        {
+          date1: "回转窑",
+          date2: "20.34",
+          date3: "20.34",
+          date4: "20.34",
+        },
+        {
+          date1: "熟料收尘",
+          date2: "17.42",
+          date3: "17.42",
+          date4: "17.42",
+        },
+        {
+          date1: "篦冷机",
+          date2: "12.22",
+          date3: "12.22",
+          date4: "12.22",
+        },
+        {
+          date1: "生料收尘",
+          date2: "19.19",
+          date3: "19.19",
+          date4: "19.19",
+        },
+        {
+          date1: "熟料收尘",
+          date2: "17.42",
+          date3: "17.42",
+          date4: "17.42",
+        },
+        {
+          date1: "篦冷机",
+          date2: "12.22",
+          date3: "12.22",
+          date4: "12.22",
+        },
+        {
+          date1: "生料收尘",
+          date2: "19.19",
+          date3: "19.19",
+          date4: "19.19",
+        },
+      ],
+      tableData1: [
+        {
+          date1: "1号回转窑",
+          date2: "120.34",
+        },
+        {
+          date1: "2号回转窑",
+          date2: "87.42",
+        },
+        {
+          date1: "3号回转窑",
+          date2: "82.22",
+        },
+        {
+          date1: "1号线预加热分解炉",
+          date2: "79.19",
+        },
+        {
+          date1: "2号线预加热分解炉",
+          date2: "76.76",
+        },
+        {
+          date1: "3号线预加热分解炉",
+          date2: "45.76",
+        },
+      ],
+    };
+  },
+  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 "";
+    },
+  },
+  mounted() {
+    this.defineEcharts("rysl", this.option1);
+    this.defineEcharts("yysl", this.option2);
+    this.defineEcharts("nysl", this.option3);
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  display: flex;
+  padding-top: 400px;
+  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;
+  }
+  .top {
+    position: relative;
+    margin-top: 100px;
+    color: #fff;
+    font-size: 22px;
+    display: flex;
+    div {
+      display: flex;
+      flex-direction: column;
+      width: 1155px;
+      align-items: center;
+      justify-content: space-between;
+      img {
+        height: 130px;
+        width: 200px;
+      }
+      p {
+        margin-top: 20px;
+      }
+    }
+    .two {
+      .txt {
+        position: absolute;
+        display: flex;
+        justify-content: space-around;
+        span:nth-of-type(1) {
+          font-size: 30px;
+        }
+        span:nth-of-type(2) {
+          font-size: 20px;
+          position: absolute;
+          top: 10px;
+          right: 530px;
+        }
+      }
+    }
+  }
+  .rysl {
+    position: relative;
+    margin-top: 56px;
+    .tip {
+      margin-left: 20px;
+      font-size: 20px;
+      position: absolute;
+      color: #fff;
+      top: 110px;
+      span:nth-of-type(1) {
+        margin-right: 30px;
+      }
+      span:nth-of-type(2) {
+        color: #09e83e;
+        font-weight: 600;
+      }
+      span:nth-of-type(4) {
+        color: #09e83e;
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+    #rysl {
+      width: 1155px;
+      height: 500px;
+      margin-top: 50px;
+    }
+  }
+  .yysl {
+    position: relative;
+    margin-top: 56px;
+    .tip {
+      margin-left: 20px;
+      font-size: 20px;
+      position: absolute;
+      color: #fff;
+      top: 110px;
+      span:nth-of-type(1) {
+        margin-right: 30px;
+      }
+      span:nth-of-type(2) {
+        color: #11c3ff;
+        font-weight: 600;
+      }
+      span:nth-of-type(4) {
+        color: #11c3ff;
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+    #yysl {
+      width: 1155px;
+      height: 500px;
+      margin-top: 50px;
+    }
+  }
+  .nysl {
+    position: relative;
+    margin-top: 56px;
+    .tip {
+      margin-left: 20px;
+      font-size: 20px;
+      position: absolute;
+      color: #fff;
+      top: 110px;
+      span:nth-of-type(1) {
+        margin-right: 30px;
+      }
+      span:nth-of-type(2) {
+        color: #43fff4;
+        font-weight: 600;
+      }
+      span:nth-of-type(4) {
+        color: #43fff4;
+      }
+    }
+
+    .imgBox {
+      height: 93px;
+      width: 1156px;
+      p {
+        position: absolute;
+        color: #fff;
+        top: 20px;
+        left: 50px;
+        font-size: 30px;
+        font-family: "MicrosoftYaHei";
+      }
+    }
+    #nysl {
+      width: 1155px;
+      height: 500px;
+      margin-top: 50px;
+    }
+  }
+}
+.right {
+  width: 1237px;
+  height: 2500px;
+  margin-right: 61px;
+  background-image: url("../../assets/img/侧边.png");
+  padding-left: 59px;
+  padding-right: 45px;
+  box-sizing: border-box;
+  .ystj {
+    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;
+      #ystj {
+        width: 1156px;
+        font-size: 20px;
+        color: #fff;
+        position: relative;
+        img {
+          height: 180px;
+          width: 200px;
+          margin-left: 60px;
+        }
+
+        .zs {
+          position: absolute;
+          top: 80px;
+          left: 400px;
+        }
+        .zx {
+          position: absolute;
+          top: 30px;
+          left: 700px;
+        }
+        .zxl {
+          position: absolute;
+          top: 100px;
+          left: 700px;
+        }
+      }
+    }
+  }
+  .sbjc {
+    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";
+      }
+    }
+    #sbjc {
+      width: 1155px;
+      height: 650px;
+      margin-top: 50px;
+      .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;
+      }
+
+      /deep/ .el-table {
+        tr th,
+        tr td {
+          border-right: none;
+        }
+      }
+    }
+  }
+  .tpt {
+    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";
+      }
+    }
+    #tpt {
+      width: 1155px;
+      height: 650px;
+      margin-top: 100px;
+
+      .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%
+          );
+        }
+      }
+      /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;
+      }
+
+      /deep/ .el-table {
+        tr th,
+        tr td {
+          border-right: none;
+        }
+      }
+    }
+  }
+}
+</style>