zyh

.history/src/router/index_20231123113141.js

@@ -0,0 +1,42 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    name: "index",
+    component: () => import("../views/Index.vue"),
+    children: [
+      {
+        path: "/znyw",
+        name: "znyw",
+        component: () => import("../views/lll/ZNYW.vue"),
+      },
+      {
+        path:"/fhgl",
+        name:"fhgl",
+        component:()=>import("@/views/Zhou/FHGL.vue")
+      },
+      {
+        path:"/kdfh",
+        name:"kdfh",
+        component:()=>import("@/views/Zhou/KDFH.vue")
+      },
+      {
+        path: "/pds",
+        name: "pds",
+        component: () => import("../views/lll/PDS.vue"),
+      },
+    ],
+  },
+];
+
+const router = new VueRouter({
+  mode: "history",
+  base: process.env.BASE_URL,
+  routes,
+});
+
+export default router;

src/router/index.js

@@ -23,7 +23,12 @@ const routes = [
         path:"/kdfh",
         name:"kdfh",
         component:()=>import("@/views/Zhou/KDFH.vue")
-      }
+      },
+      {
+        path: "/pds",
+        name: "pds",
+        component: () => import("../views/lll/PDS.vue"),
+      },
     ],
   },
 ];

src/views/lll/PDS.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="box">
+    <div class="left">
+      <img src="../../assets/img/标题/回路名称.png" class="title" />
+      <ul class="list">
+        <li
+          v-for="item in list"
+          :class="res == item ? 'active' : ''"
+          @click="res = item"
+        >
+          {{ item }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        "6.3KV#1破碎出线",
+        "6.3KV#1窑头出线",
+        "6.3KV#1原料#1出线",
+        "6.3KV#1原料#2出线",
+        "6.3KV#2窑头出线",
+        "6.3KV#2原料#1出线",
+        "6.3KV#2原料#2出线",
+        "6.3KV#1发电机出线(安热线)",
+        "6.3KV#主变1进线",
+        "6.3KV#主变2进线",
+      ],
+      res: "6.3KV#1破碎出线",
+    };
+  },
+};
+</script>
+<style scoped lang="less">
+.box {
+  width: 100%;
+  height: 100%;
+  padding-top: 500px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  .left {
+    width: 1237px;
+    height: 1484px;
+    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;
+    }
+    .list {
+      margin-top: 50px;
+      list-style-type: none;
+      color: #fff;
+      font-size: 30px;
+      li {
+        width: 1128px;
+        height: 103px;
+        background-color: #123c63;
+        text-align: left;
+        line-height: 103px;
+        text-indent: 50px;
+        margin: 20px;
+        cursor: pointer;
+      }
+      .active {
+        color: #00fcff;
+      }
+    }
+  }
+}
+</style>

src/views/lll/ZNYW.vue

@@ -162,7 +162,11 @@
           <div>垃圾处理站排放物监测</div>
           <div>一层</div>
           <div>
-            <el-table :data="tableData" style="width: 100%">
+            <el-table
+              :data="tableData"
+              style="width: 100%"
+              header-cell-style="background-color: #1969A8; color: white"
+            >
               <el-table-column prop="date1" label="监测点1" align="center">
               </el-table-column>
               <el-table-column prop="date2" label="监测点2" align="center">
@@ -219,6 +223,7 @@
             :data="plan"
             style="width: 100%"
             :row-class-name="tableRowClassName"
+            header-cell-style="background-color: #1969A8; color: white"
           >
             <el-table-column prop="date1" label="计划名称" align="center">
             </el-table-column>
@@ -255,6 +260,7 @@
             :data="list"
             style="width: 100%"
             :row-class-name="tableRowClassName"
+            header-cell-style="background-color: #1969A8; color: white"
           >
             <el-table-column prop="date1" label="发生时间" align="center">
             </el-table-column>
@@ -402,6 +408,9 @@ export default {
         },
         yAxis: {
           type: "value",
+          min: 0,
+          max: 0.15,
+          interval: 0.05, // 指定刻度间隔
           axisLabel: {
             show: true,
             textStyle: {
@@ -423,8 +432,32 @@ export default {
             type: "bar",
             data: [0.08, 0.08, 0.06, 0.12, 0.09],
           },
+          //   {
+          //     type: "bar",
+          //     data: data.map((item) => {
+          //       // 找到三个值中的最大值
+          //       let max = Math.max(item.value1, item.value2, item.value3);
+          //       return {
+          //         name: item.name,
+          //         value: max,
+          //       };
+          //     }),
+          //     // itemStyle: {
+          //     //   colorStops: [
+          //     //     {
+          //     //       offset: 0,
+          //     //       color: "#192060", // 0% 处的颜色
+          //     //     },
+          //     //     {
+          //     //       offset: 0.9,
+          //     //       color: "#2D6E38", // 90% 处的颜色
+          //     //     },
+          //     //   ],
+          //     // },
+          //   },
           {
             name: "预警",
+
             type: "bar",
             data: [0.06, 0.07, 0.03, 0.06, 0.04],
           },
@@ -688,27 +721,11 @@ export default {
         .el-table__row--selected {
           background-color: transparent !important;
         }
-        //表体颜色
+
-        /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: #102b49 !important;
         }
-        //修改表头颜色
-        ::v-deep .has-gutter {
-          background-color: #102b49;
-          th {
-            background-color: #102b49;
-          }
-        }
 
         //去掉边框白线
         ::v-deep .el-table__row > td {
@@ -871,7 +888,7 @@ export default {
       ::v-deep .el-table tbody tr:hover > td {
         background-color: #0b679e !important;
       }
-      //修改表头颜色
+      //修改表头颜色s
       ::v-deep .has-gutter {
         background-color: #1969a8;
         th {