Merge remote-tracking branch 'origin/master'

src/router/index.js

@@ -14,7 +14,6 @@ import Ptfh from '@/views/sjcjjk/ptfh/index.vue'
 import Gaoznfh from '@/views/sjcjjk/gznfh/index.vue'
 import Fdjhhd from '@/views/fdjh/hd/index.vue'
 import Fdjhgf from '@/views/fdjh/gf/index.vue'
-import rqddjh from '@/views/rqdd/rqddjh.vue'
 import Fdjhcn from '@/views/fdjh/cn/index.vue'
 import Jkcx from '@/views/xtrz/jkcx/index.vue'
 import pzb from '@/views/xtpzyrz/xtpz/xtpz.vue'
@@ -67,11 +66,6 @@ const routes = [
         component: Fdjhgf
     },
     {
-        path: '/rqddjh',
-        name: '日前调度计划',
-        component: rqddjh
-    },
-    {
         path: '/fdjhcn',
         name: '储能',
         component: Fdjhcn

src/views/rqdd/rqdd.vue

@@ -1,20 +1,38 @@
 <template>
     <div class="app-container">
-        <div class="head">
-            <div class="slice">
-                <img alt="" src="./img/Slice 311.png">
+        <div class="topBanner">
+            <div class="topLogo">
             </div>
-            <div style="position: absolute;right: 377px;top: 18px">
-                <img alt="" src="./img/返回首页.png">
+            <div style="position: absolute;right: 18%;top: 8px">
+                <img alt="" onclick="window.open('/path#/xndc','_self')" src="./img/返回首页.png">
             </div>
             <div class="topButton1">
-                <div class="buttonWord">
-                    <span>离线运行</span>
+                <div class="textStatus">
+                    <span>离 线 运 行</span>
                 </div>
             </div>
-            <div class="topButton2">
-                <div class="buttonWord">
-                    <span>发电端计划监控</span>
+
+            <div class="crumb left33">
+                <div class="textCrumb1" onclick="window.open('/path#/fdjh','_self')">
+                    发电端计划监控
+                </div>
+            </div>
+            <div class="partition" style="left: 43.2%"/>
+            <div class="crumb left44">
+                <div class="textCrumb1">
+                    用电端计划监控
+                </div>
+            </div>
+            <div class="partition" style="left: 54.2%"/>
+            <div class="crumb left55">
+                <div class="textCrumb">
+                    约束条件监控
+                </div>
+            </div>
+            <div class="partition" style="left: 65.2%"/>
+            <div class="crumb left66">
+                <div class="textCrumb">
+                    数据采集监控
                 </div>
             </div>
         </div>
@@ -22,6 +40,7 @@
             <div class="littleHeadWord">
                 <span>信息总览</span>
             </div>
+            <LeftTop/>
         </div>
         <div class="zs2">
             <div class="littleHeadWord">
@@ -32,126 +51,156 @@
             <div class="littleHeadWord">
                 <span>联络线信息</span>
             </div>
+            <CenterMiddle1/>
         </div>
         <div class="yx1">
             <div class="littleHeadWord">
                 <span>断面信息</span>
             </div>
+            <CenterMiddle/>
         </div>
         <div class="zx">
             <div class="littleHeadWord">
                 <span>日前调度计划</span>
             </div>
-            <iframe scrolling="no" src="/#/rqddjh" style="width: 100%;height: 100%;border: 0;">
-            </iframe>
+            <CenterMiddle2/>
         </div>
     </div>
 </template>
 
 <script>
+import CenterMiddle2 from "@/views/rqdd/rqddjh.vue";
+import CenterMiddle from "@/views/rqdd/rqdddm.vue";
+import CenterMiddle1 from "@/views/rqdd/rqddllx.vue";
+import LeftTop from "@/views/rqdd/rqddxxzl.vue";
+
 export default {
-    name: 'rqdd-name'
+    name: 'rqdd-name',
+    components: {LeftTop, CenterMiddle, CenterMiddle1, CenterMiddle2}
 }
 </script>
 
 <style lang="css" scoped>
-.slice {
-    width: 300px;
-    position: absolute;
-    left: 30px;
+.left33 {
+    left: 33%;
 }
 
-.head {
-    width: 100%;
-    height: calc(8vh);
-    background: url(./img/装饰.png) no-repeat;
-    background-size: 100% 100%;
+.left44 {
+    left: 44.2%;
 }
 
-.zs1 {
-    width: 50%;
-    height: calc(70vh);
-    position: absolute;
-    top: 87px;
-    left: 2px;
-    background: url(./img/1.png) no-repeat;
+.left55 {
+    left: 55.2%;
+}
 
+.left66 {
+    left: 66.2%;
+}
 
+.textCrumb {
+    display: flex;
+    /*align-items: center;*/
+    margin-left: 20%;
+    margin-top: 2.5%;
+    font-size: 18px;
+    font-weight: bold;
 }
 
-.topButton1 {
-    background: url(./img/4灰大素材.png);
-    height: 42px;
-    width: 179px;
-    position: absolute;
-    top: 16px;
-    left: 379px
+.textCrumb1 {
+    display: flex;
+    /*align-items: center;*/
+    margin-left: 16%;
+    margin-top: 2.5%;
+    font-size: 18px;
+    font-weight: bold;
 }
 
-.topButton2 {
-    background: url(./img/色相饱和度4.png);
-    height: 42px;
+.textStatus {
+    display: flex;
+    align-items: center;
+    margin-left: 24%;
+    font-size: 18px;
+    font-weight: bold;
+    text-shadow: 0 0 5px #fff, 0 1px 2px rgba(0, 0, 0, 1);
+}
+
+.crumb {
+    position: absolute;
+    top: 5px;
     width: 182px;
+    height: 42px;
+    display: flex;
+    background-size: 100% 100%;
+    background-image: url('../../assets/images/crumb.png');
+}
+
+.partition {
     position: absolute;
-    top: 16px;
-    left: 608px
+    top: 7px;
+    width: 17px;
+    height: 35px;
+    display: flex;
+    background-size: 100% 100%;
+    background-image: url('../../assets/images/partition.png');
 }
 
-.topButton1 .buttonWord {
+.topButton1 {
     position: absolute;
-    top: 9px;
-    left: 45px;
-    color: white;
-    font-size: 19px;
-    font-weight: 1000;
-    font-family: AliMaMa;
+    left: 19.5%;
+    width: 179px;
+    height: 42px;
+    display: flex;
+    background-size: 100% 100%;
+    background-image: url('../../assets/images/b-disable.png')
 }
 
 
-.topButton2 .buttonWord {
+.zs1 {
+    width: 32%;
+    height: calc(32vh);
     position: absolute;
-    top: 9px;
-    left: 25px;
-    color: white;
-    font-size: 19px;
-    font-weight: 1000;
-    font-family: AliMaMa;
+    top: 87px;
+    left: 2px;
+    background: url(./img/1.png) no-repeat;
+
+
 }
 
 .zs2 {
-    width: 50%;
-    height: calc(80vh);
+    width: 32%;
+    height: calc(32vh);
     position: absolute;
     top: 87px;
-    left: 629px;
+    left: 568px;
     background: url(./img/1.png) no-repeat
 
 }
 
 .ys1 {
-    width: 29%;
-    height: calc(80vh);
+    width: 36%;
+    height: calc(44vh);
     position: absolute;
     top: 87px;
-    left: 1260px;
+    left: 1140px;
     background: url(./img/1.j.png) no-repeat
 
 }
 
 .yx1 {
-    width: 29%;
-    height: calc(38vh);
+    width: 36%;
+    height: calc(44vh);
     position: absolute;
-    top: 561px;
-    left: 1260px;
+    top: 500px;
+    left: 1140px;
     background: url(./img/1.j.png) no-repeat
 }
 
+
 .zx {
-    width: 69.5%;
-    height: calc(55vh);
+    width: 63.5%;
+    height: calc(58vh);
     position: absolute;
-    top: 399px;
+    top: 370px;
     left: 2px;
     background: url(./img/2.png) no-repeat
 }
@@ -160,13 +209,15 @@ export default {
     text-align: left;
     position: absolute;
     left: 70px;
-
 }
 
 .littleHeadWord span {
-    color: white;
-    font-size: 19px;
-    font-weight: 1000;
-    font-family: AliMaMa;
+    display: flex;
+    align-items: center;
+    margin-top: 5%;
+    font-size: 18px;
+    font-style: italic;
+    font-weight: bold;
+    text-shadow: 0 0 5px #fff, 0 1px 2px rgba(0, 0, 0, 1);
 }
 </style>

src/views/rqdd/rqdddm.vue

@@ -0,0 +1,263 @@
+<template>
+    <div class="table-wrapper">
+        <div class="table-box">
+            <el-table
+                    :cell-style="{border:0,color:'#fff'}"
+                    :data="tableData"
+                    :header-cell-style="{color:'#fff'}"
+                    :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
+                    size="mini"
+                    style="background: url(../Articles/img/组2460.png) -2px 8px no-repeat;
+                            background-position-x: 30%;font-size: 15px"
+            >
+                <el-table-column align="center" label="断面名称" prop="name" width="180px"></el-table-column>
+                <el-table-column align="center" label="状态" prop="state">
+                    <template slot-scope="scope">
+                        <img height="16px" src="../../assets/images/r-green.png">
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="有功" prop="ap"></el-table-column>
+                <el-table-column align="center" label="负限" prop="lower"></el-table-column>
+                <el-table-column align="center" label="正限" prop="upper"></el-table-column>
+                <el-table-column align="center" label="区间" prop="range">
+                    <template slot-scope="scope">
+                        <div style="color:#92fc53">正常</div>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            form: {
+                taskNumber: '',
+                date: '',
+                current: 1,
+                size: 10
+            },
+            tableData: []
+        }
+    },
+    methods: {},
+    mounted() {
+        this.tableData = [
+            {
+                "name": "汗海-庆云断面",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "汗海-庆云断面",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "汗海-庆云断面",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "汗海-庆云断面",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "汗海-庆云断面",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "汗海-庆云断面",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "汗海-庆云断面",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "汗海-庆云断面",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+        ]
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+.circle {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: #4ded68;
+}
+
+@font-face {
+  font-family: AliMaMa;//自定义字体名称
+  src: url("../Articles/font/AlimamaDaoLiTi.ttf")
+}
+
+/deep/ .el-table {
+  background: url(../Articles/img/组2460.png) -2px 8px no-repeat;
+  background-position-x: 30%;
+}
+
+.table-wrapper {
+  width: 90%;
+
+  .table-box {
+    //min-height: 600px;
+    margin-left: 6%;
+    margin-top: 8%;
+    width: 588px;
+    height: 99%;
+    background-size: cover;
+  }
+
+  /deep/ .el-form-item__label {
+    color: #fff;
+    //font-size: 17px;
+  }
+
+  /deep/ .el-input__inner {
+    background-color: rgba(14, 73, 131);
+    border: 1px solid rgb(64, 153, 255);
+    //height: 34px;
+    //font-size: 17px;
+  }
+
+
+  ///deep/ .el-table th.el-table__cell.is-leaf {
+  //  border-bottom: none;
+  //}
+
+  /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
+    background-color: rgb(103, 118, 49) !important
+  }
+
+  /deep/ .el-col {
+    padding: 0;
+    display: inline-block;
+    position: relative;
+  }
+
+  /deep/ .el-col:nth-child(1) {
+    width: 19%;
+  }
+
+  /deep/ .el-col:nth-child(2) {
+    width: 22%;
+  }
+
+  /deep/ .el-col:nth-child(3) {
+    width: 19%;
+  }
+
+  /deep/ .el-col:nth-child(4) {
+    width: 19%;
+  }
+
+  /deep/ .el-col:nth-child(5) {
+    width: 15%;
+  }
+
+  /deep/ .el-input__inner:nth-child(1) {
+    //width: 176px;
+  }
+
+  /deep/ .el-input__inner:nth-child(2) {
+    //width: 176px;
+  }
+
+  /deep/ .el-input__inner:nth-child(2) {
+    //width: 126px;
+  }
+
+  /deep/ .el-input__inner:nth-child(2) {
+    //width: 175px;
+  }
+
+  /deep/ .el-icon-arrow-up {
+    transform: rotateZ(0deg);
+
+  }
+
+  /deep/ .el-icon-arrow-up:before {
+    content: url(../../views/Articles/img/xiala2.png);
+  }
+
+  /deep/ .el-input__prefix {
+    right: -60px;
+    padding-top: 3px;
+  }
+
+  /deep/ .el-icon-date:before {
+    content: url(../Articles/img/riqi.png);
+  }
+
+
+  /deep/ .el-table__header tr {
+    background: url(../Articles/img/组2460.png) -2px 8px no-repeat;
+    background-position-x: 30%;
+    //height: 49px;
+  }
+
+
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /deep/ .el-table th.el-table__cell {
+    background: none;
+  }
+
+  /deep/ .el-table__body {
+    //-webkit-border-vertical-spacing: 13px; // 垂直间距
+  }
+
+  /deep/ .el-form-item__content {
+    text-align: left;
+  }
+
+  /deep/ .el-table, .el-table__expanded-cell {
+    background-color: rgb(1, 40, 81);
+
+  }
+}
+</style>

src/views/rqdd/rqddjh.vue

@@ -7,7 +7,7 @@
                     :header-cell-style="{color:'#fff'}"
                     :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
                     size="mini"
-                    style="width: 1429px;font-size: 17px;background: none"
+                    style="width: 1429px;font-size: 15px;background: none;"
             >
                 <el-table-column
                         align="center"
@@ -73,9 +73,17 @@ body {
   background-image: url(../Articles/img/bgc.png)
 }
 
+.el-table__row > td {
+  border: none;
+}
+
+.el-table::before {
+  height: 0px;
+}
+
 .table-wrapper {
   width: 97%;
-  height: 100%;
+  height: 92%;
   padding-left: 2%;
 
   .table-box {

src/views/rqdd/rqddllx.vue

@@ -0,0 +1,251 @@
+<template>
+    <div class="table-wrapper">
+        <div class="table-box">
+            <el-table
+                    :cell-style="{border:0,color:'#fff'}"
+                    :data="tableData"
+                    :header-cell-style="{color:'#fff'}"
+                    :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
+                    class="mytable"
+                    size="mini"
+                    style="background: none;font-size: 15px"
+            >
+                <el-table-column align="center" label="名称" prop="name" width="170px"></el-table-column>
+                <el-table-column align="center" label="状态" prop="state">
+                    <template slot-scope="scope">
+                        <img height="16px" src="../../assets/images/r-green.png">
+                    </template>
+                </el-table-column>
+                <el-table-column align="center" label="有功" prop="ap"></el-table-column>
+                <el-table-column align="center" label="负限" prop="lower"></el-table-column>
+                <el-table-column align="center" label="正限" prop="upper"></el-table-column>
+                <el-table-column align="center" label="区间" prop="range">
+                    <template slot-scope="scope">
+                        <div style="color:#92fc53">正常</div>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            form: {
+                taskNumber: '',
+                date: '',
+                current: 1,
+                size: 10
+            },
+            tableData: []
+        }
+    },
+    methods: {},
+    mounted() {
+        this.tableData = [
+            {
+                "name": "高德线",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "高德线",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "高德线",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "高德线",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "高德线",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "高德线",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "高德线",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+            {
+                "name": "高德线",
+                "state": "1",
+                "ap": "500",
+                "lower": "450",
+                "upper": "550",
+                "range": "1"
+            },
+        ]
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+.circle {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: #4ded68;
+}
+
+@font-face {
+  font-family: AliMaMa;//自定义字体名称
+  src: url("../Articles/font/AlimamaDaoLiTi.ttf")
+}
+
+.table-wrapper {
+  //width: 1483px;
+  //padding-left: 20px;
+
+  .table-box {
+    //min-height: 600px;
+    margin-left: 6%;
+    margin-top: 8%;
+    width: 588px;
+    height: 99%;
+    background-size: cover;
+  }
+
+  /deep/ .el-form-item__label {
+    color: #fff;
+    //font-size: 17px;
+  }
+
+  /deep/ .el-input__inner {
+    background-color: rgba(14, 73, 131);
+    border: 1px solid rgb(64, 153, 255);
+    //height: 34px;
+    //font-size: 17px;
+  }
+
+  /deep/ .el-table__header {
+    background: url(../Articles/img/bg1.png);
+  }
+
+  ///deep/ .el-table th.el-table__cell.is-leaf {
+  //  border-bottom: none;
+  //}
+
+  /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
+    background-color: rgb(103, 118, 49) !important
+  }
+
+
+  /deep/ .el-col {
+    padding: 0;
+    display: inline-block;
+    position: relative;
+  }
+
+  /deep/ .el-col:nth-child(1) {
+    width: 19%;
+  }
+
+  /deep/ .el-col:nth-child(2) {
+    width: 22%;
+  }
+
+  /deep/ .el-col:nth-child(3) {
+    width: 19%;
+  }
+
+  /deep/ .el-col:nth-child(4) {
+    width: 19%;
+  }
+
+  /deep/ .el-col:nth-child(5) {
+    width: 15%;
+  }
+
+  /deep/ .el-input__inner:nth-child(1) {
+    //width: 176px;
+  }
+
+  /deep/ .el-input__inner:nth-child(2) {
+    //width: 176px;
+  }
+
+  /deep/ .el-input__inner:nth-child(2) {
+    //width: 126px;
+  }
+
+  /deep/ .el-input__inner:nth-child(2) {
+    //width: 175px;
+  }
+
+  /deep/ .el-icon-arrow-up {
+    transform: rotateZ(0deg);
+
+  }
+
+  /deep/ .el-icon-arrow-up:before {
+    content: url(../../views/Articles/img/xiala2.png);
+  }
+
+  /deep/ .el-input__prefix {
+    right: -60px;
+    padding-top: 3px;
+  }
+
+  /deep/ .el-icon-date:before {
+    content: url(../Articles/img/riqi.png);
+  }
+
+  /deep/ .el-table__header tr {
+    background: url(../Articles/img/bg1.png);
+    //height: 49px;
+  }
+
+  /deep/ .el-table th.el-table__cell {
+    background: none;
+  }
+
+  /deep/ .el-table__body {
+    //-webkit-border-vertical-spacing: 13px; // 垂直间距
+  }
+
+  /deep/ .el-form-item__content {
+    text-align: left;
+  }
+
+  /deep/ .el-table, .el-table__expanded-cell {
+    background-color: rgb(1, 40, 81);
+  }
+}
+</style>

src/views/rqdd/rqddxxzl.vue

@@ -0,0 +1,209 @@
+<template>
+    <div class="table-wrapper">
+        <div class="table-box">
+            <!--      <div class="title"-->
+            <!--           style="font-family: AliMaMa;font-size: 30px;font-weight: 1000;text-align: left;height: 40px">-->
+            <!--        <span style="position: absolute;top:-3px;left: 70px">普通负荷</span>-->
+            <!--      </div>-->
+            <el-table
+                    :cell-style="{border:0,color:'#fff'}"
+                    :data="tableData"
+                    :header-cell-style="{color:'#fff'}"
+                    :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
+                    :show-header="false"
+                    size="mini"
+                    style="background: none;margin-top: -1%;font-size: 15px"
+            >
+                <el-table-column label="信息" prop="info">
+                    <template slot-scope="scope">
+                        <div style="height: 25px">
+                            <img :height="20" :width="20" alt=""
+                                 src="../../assets/images/shape1.png"
+                                 style="position:absolute;top: 8px">
+                            <img :height="25" :width="535"
+                                 alt=""
+                                 src="../../assets/images/bg/bg-table-row.png" style="position:absolute;left: 35px">
+                            <span style="position:absolute;top:8px;left: 43px">{{ scope.row.info }}</span>
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            form: {
+                taskNumber: '',
+                date: '',
+                current: 1,
+                size: 10
+            },
+            tableData: []
+        }
+    },
+    methods: {},
+    mounted() {
+        this.tableData = [
+            {
+                "info": "0:00时刻，现货数据接口正常",
+            },
+            {
+                "info": "0:00时刻，D5000数据接口正常",
+            },
+            {
+                "info": "0:15时刻，储能AGC数据下发正常",
+            },
+            {
+                "info": "0:15时刻，火电AGC数据下发正常",
+            },
+            {
+                "info": "0:15时刻，储能AGC数据下发正常",
+            },
+            {
+                "info": "0:15时刻，火电AGC数据下发正常",
+            },
+        ]
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+@font-face {
+  font-family: AliMaMa;//自定义字体名称
+  src: url("../Articles/font/AlimamaDaoLiTi.ttf")
+}
+
+.table-wrapper {
+  //width: 1483px;
+  padding-top: 20px;
+
+  width: 84%;
+
+  .table-box {
+    //min-height: 600px;
+    margin-left: 6%;
+    margin-top: 5%;
+    width: 550px;
+    background-size: cover;
+  }
+
+  .el-table__row > td {
+    border: none;
+  }
+
+  .el-table::before {
+    height: 0px;
+  }
+
+  /deep/ .el-form-item__label {
+    color: #fff;
+    //font-size: 17px;
+  }
+
+  /deep/ .el-input__inner {
+    background-color: rgba(14, 73, 131);
+    border: 1px solid rgb(64, 153, 255);
+    //height: 34px;
+    //font-size: 17px;
+  }
+
+  /deep/ .el-table__header {
+    background: url(../Articles/img/bg1.png);
+  }
+
+  ///deep/ .el-table th.el-table__cell.is-leaf {
+  //  border-bottom: none;
+  //}
+
+  /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
+    background-color: rgb(103, 118, 49) !important
+  }
+
+  /deep/ .el-col {
+    padding: 0;
+    display: inline-block;
+    position: relative;
+  }
+
+  /deep/ .el-col:nth-child(1) {
+    width: 19%;
+  }
+
+  /deep/ .el-col:nth-child(2) {
+    width: 22%;
+  }
+
+  /deep/ .el-col:nth-child(3) {
+    width: 19%;
+  }
+
+  /deep/ .el-col:nth-child(4) {
+    width: 19%;
+  }
+
+  /deep/ .el-col:nth-child(5) {
+    width: 15%;
+  }
+
+  /deep/ .el-input__inner:nth-child(1) {
+    //width: 176px;
+  }
+
+  /deep/ .el-input__inner:nth-child(2) {
+    //width: 176px;
+  }
+
+  /deep/ .el-input__inner:nth-child(2) {
+    //width: 126px;
+  }
+
+  /deep/ .el-input__inner:nth-child(2) {
+    //width: 175px;
+  }
+
+  /deep/ .el-icon-arrow-up {
+    transform: rotateZ(0deg);
+
+  }
+
+  /deep/ .el-icon-arrow-up:before {
+    content: url(../Articles/img/xiala2.png);
+  }
+
+  /deep/ .el-input__prefix {
+    right: -60px;
+    padding-top: 3px;
+  }
+
+  /deep/ .el-icon-date:before {
+    content: url(../Articles/img/riqi.png);
+  }
+
+  /deep/ .el-table__header tr {
+    background: url(../Articles/img/bg1.png);
+    //height: 49px;
+  }
+
+  /deep/ .el-table th.el-table__cell {
+    background: none;
+  }
+
+  /deep/ .el-table__body {
+    //-webkit-border-vertical-spacing: 13px; // 垂直间距
+  }
+
+  /deep/ .el-form-item__content {
+    text-align: left;
+  }
+
+  /deep/ .el-table, .el-table__expanded-cell {
+    background-color: rgb(1, 40, 81);
+  }
+}
+</style>

src/views/ssdd/LeftNav.vue

@@ -9,38 +9,41 @@
                 background-color="transparent"
                 class="sidebar-el-menu"
                 default-active="1"
-                text-color="#fff">
+                text-color="#fff"
+                @select="selectMenu">
             <!-- 一级菜单 -->
             <template v-for="item in list">
-                <el-submenu v-if="item.children && item.children.length" :key="item.path" :index="item.path">
-                    <template slot="title"><img :src="require('../fdjh/img/plan.png')" style="margin-right: 10px;"
-                                                width="28px"/><span style="font-size:18px;font-weight:bold">{{
-                        item.name
-                        }}</span>
+                <el-submenu v-if="item.children && item.children.length" :id="item.path" :key="item.path"
+                            :index="item.path">
+                    <template slot="title"><img :src="require('../fdjh/img/plan.png')" style="margin-right: 8px;"
+                                                width="28px"/><span style="font-size:18px;font-weight:bold"><div
+                            class="d1">{{ item.name }}</div></span>
                     </template>
                     <!-- 二级菜单 -->
                     <template v-for="itemChild in item.children">
-                        <el-submenu v-if="itemChild.children && itemChild.children.length" :key="itemChild.path"
+                        <el-submenu v-if="itemChild.children && itemChild.children.length" :id="itemChild.path"
+                                    :key="itemChild.path"
                                     :index="itemChild.path">
                             <template slot="title"><img :src="require('../fdjh/img/pc1.png')"
-                                                        style="margin-right: 10px;"/><span
+                                                        style="margin-right: 8px;"/><span
                                     style="font-size:16px;font-weight:bold">{{ itemChild.name }}</span></template>
                             <!-- 三级菜单 -->
-                            <el-menu-item v-for="itemChild_Child in itemChild.children" :key="itemChild_Child.path"
-                                          :index="itemChild_Child.path" @click="changePage(itemChild_Child)">
-                                <img :src="require('../fdjh/img/last1.png')" style="margin-right: 10px;"/><span
-                                    slot="title">{{ itemChild_Child.name }}</span></el-menu-item>
+                            <el-menu-item v-for="itemChild_Child in itemChild.children" :id="itemChild_Child.path"
+                                          :key="itemChild_Child.path"
+                                          :index="itemChild_Child.path">
+                                <img :src="require('../fdjh/img/last1.png')" style="margin-right: 8px;"/><span
+                                    slot="title"><div class="d1">{{ itemChild_Child.name }}</div></span></el-menu-item>
                         </el-submenu>
 
-                        <el-menu-item v-else :key="itemChild.path" :index="itemChild.path"><img
+                        <el-menu-item v-else :id="itemChild.path" :key="itemChild.path" :index="itemChild.path"><img
                                 :src="require('../fdjh/img/pc1.png')"
-                                style="margin-right: 10px;"/><span slot="title">{{ itemChild.name }}</span>
+                                style="margin-right: 8px;"/><span slot="title">{{ itemChild.name }}</span>
                         </el-menu-item>
                     </template>
                 </el-submenu>
-                <el-menu-item v-else :key="item.path" :index="item.path"><img :src="require('../fdjh/img/plan.png')"
-                                                                              style="margin-right: 10px;"
-                                                                              width="28px"/><span
+                <el-menu-item v-else :id="item.path" :key="item.path" :index="item.path"><img
+                        :src="require('../fdjh/img/plan.png')" style="margin-right: 8px;"
+                        width="28px"/><span
                         slot="title">{{ item.name }}</span></el-menu-item>
             </template>
         </el-menu>
@@ -120,16 +123,67 @@ export default {
         }
     },
     methods: {
-        changePage(obj) {
+        selectMenu(key, keyPath, node) {
+            // 右侧区域显示页面
             var parentIframe = parent.document.getElementById('showcontent');
-            parentIframe.src = obj.path;
-        }
+            parentIframe.src = key;
+
+            // 1、2级菜单设置
+            for (var i = 0; i < document.getElementsByClassName('el-submenu').length; i++) {
+                if (node.$parent.$attrs.id == document.getElementsByClassName('el-submenu')[i].id) {
+                    document.getElementById(document.getElementsByClassName('el-submenu')[i].id).getElementsByTagName('img')[0].src = require('../fdjh/img/pc.png');
+                    document.getElementById(document.getElementsByClassName('el-submenu')[i].id).getElementsByTagName('span')[0].style = 'color:rgb(227,220,10);font-size:16px;font-weight:bold';
+                } else {
+                    if (document.getElementsByClassName('el-submenu')[i].id != '/1') {
+                        document.getElementById(document.getElementsByClassName('el-submenu')[i].id).getElementsByTagName('img')[0].src = require('../fdjh/img/pc1.png');
+                        document.getElementById(document.getElementsByClassName('el-submenu')[i].id).getElementsByTagName('span')[0].style = 'font-size:16px;font-weight:bold';
+                    }
+                    if (document.getElementsByClassName('el-submenu')[i].id == '/1') {
+                        // root根设置背景图
+                        document.getElementById(document.getElementsByClassName('el-submenu')[i].id).getElementsByTagName('span')[0].className = "rootbg";
+                    }
+                }
+            }
+
+            // 3级菜单设置
+            for (var i = 0; i < document.getElementsByClassName('el-menu-item').length; i++) {
+                if (document.getElementsByClassName('el-menu-item')[i].id == key) {
+                    document.getElementsByClassName('el-menu-item')[i].getElementsByTagName('img')[0].src = require('../fdjh/img/last.png');
+                    document.getElementById(document.getElementsByClassName('el-menu-item')[i].id).getElementsByTagName('span')[0].className = "test";
+                    document.getElementById(document.getElementsByClassName('el-menu-item')[i].id).getElementsByTagName('span')[0].style = 'color:rgb(227,220,10);font-size:16px;font-weight:bold';
+                } else {
+                    document.getElementsByClassName('el-menu-item')[i].getElementsByTagName('img')[0].src = require('../fdjh/img/last1.png');
+                    document.getElementById(document.getElementsByClassName('el-menu-item')[i].id).getElementsByTagName('span')[0].className = "";
+                    document.getElementById(document.getElementsByClassName('el-menu-item')[i].id).getElementsByTagName('span')[0].style = 'font-size:16px;font-weight:bold';
+                }
+            }
+        },
 
     }
 }
 </script>
 
 <style scoped>
+.d1 {
+    padding-left: 8px;
+    height: 38px;
+    width: 90%;
+    display: inline-block;
+    line-height: 38px;
+}
+
+.test {
+    background: url(../fdjh/img/node_bg.png) no-repeat;
+//padding-left: 8px; height: 38px; width: 90%; display: inline-block;
+    line-height: 38px;
+}
+
+.rootbg {
+    background: url(../fdjh/img/root_bg.png) no-repeat;
+//padding-left: 8px; height: 38px; width: 90%; display: inline-block;
+    line-height: 38px;
+}
+
 .sidebar {
     display: block;
     text-align: left;
@@ -141,7 +195,9 @@ export default {
 }
 
 .sidebar-el-menu:not(.el-menu--collapse) {
-//position: absolute; //top: 6%; margin: 0px 0 30px 30px; background-size: 100% 100%; height: 90%;
+    margin: 0px 0 30px 30px;
+    background-size: 100% 100%;
+    height: 90%;
 }
 
 /deep/ .el-submenu__title:hover {

src/views/tabledata.json

@@ -261,6 +261,50 @@
       "plan": "50",
       "time": "00:00:00",
       "status": "是"
+    },
+    {
+      "stationName": "国电龙源官村风电场",
+      "type": "风机",
+      "plan": "50",
+      "time": "00:00:00",
+      "status": "是"
+    }
+  ],
+  "rqdddmList": [
+    {
+      "name": "汗海-庆云断面",
+      "plan": "500",
+      "fu": "450",
+      "zheng": "550",
+      "status": "正常"
+    },
+    {
+      "name": "汗海-庆云断面",
+      "plan": "500",
+      "fu": "450",
+      "zheng": "550",
+      "status": "正常"
+    },
+    {
+      "name": "汗海-庆云断面",
+      "plan": "500",
+      "fu": "450",
+      "zheng": "550",
+      "status": "正常"
+    },
+    {
+      "name": "汗海-庆云断面",
+      "plan": "500",
+      "fu": "450",
+      "zheng": "550",
+      "status": "正常"
+    },
+    {
+      "name": "汗海-庆云断面",
+      "plan": "500",
+      "fu": "450",
+      "zheng": "550",
+      "status": "正常"
     }
   ],
   "xAxisData": {

src/views/xtpzyrz/LeftNav.vue

@@ -9,38 +9,41 @@
                 background-color="transparent"
                 class="sidebar-el-menu"
                 default-active="1"
-                text-color="#fff">
+                text-color="#fff"
+                @select="selectMenu">
             <!-- 一级菜单 -->
             <template v-for="item in list">
-                <el-submenu v-if="item.children && item.children.length" :key="item.path" :index="item.path">
-                    <template slot="title"><img :src="require('../fdjh/img/plan.png')" style="margin-right: 10px;"
-                                                width="28px"/><span style="font-size:18px;font-weight:bold">{{
-                        item.name
-                        }}</span>
+                <el-submenu v-if="item.children && item.children.length" :id="item.path" :key="item.path"
+                            :index="item.path">
+                    <template slot="title"><img :src="require('../fdjh/img/plan.png')" style="margin-right: 8px;"
+                                                width="28px"/><span style="font-size:18px;font-weight:bold"><div
+                            class="d1">{{ item.name }}</div></span>
                     </template>
                     <!-- 二级菜单 -->
                     <template v-for="itemChild in item.children">
-                        <el-submenu v-if="itemChild.children && itemChild.children.length" :key="itemChild.path"
+                        <el-submenu v-if="itemChild.children && itemChild.children.length" :id="itemChild.path"
+                                    :key="itemChild.path"
                                     :index="itemChild.path">
                             <template slot="title"><img :src="require('../fdjh/img/pc1.png')"
-                                                        style="margin-right: 10px;"/><span
+                                                        style="margin-right: 8px;"/><span
                                     style="font-size:16px;font-weight:bold">{{ itemChild.name }}</span></template>
                             <!-- 三级菜单 -->
-                            <el-menu-item v-for="itemChild_Child in itemChild.children" :key="itemChild_Child.path"
-                                          :index="itemChild_Child.path" @click="changePage(itemChild_Child)">
-                                <img :src="require('../fdjh/img/last1.png')" style="margin-right: 10px;"/><span
-                                    slot="title">{{ itemChild_Child.name }}</span></el-menu-item>
+                            <el-menu-item v-for="itemChild_Child in itemChild.children" :id="itemChild_Child.path"
+                                          :key="itemChild_Child.path"
+                                          :index="itemChild_Child.path">
+                                <img :src="require('../fdjh/img/last1.png')" style="margin-right: 8px;"/><span
+                                    slot="title"><div class="d1">{{ itemChild_Child.name }}</div></span></el-menu-item>
                         </el-submenu>
 
-                        <el-menu-item v-else :key="itemChild.path" :index="itemChild.path"><img
+                        <el-menu-item v-else :id="itemChild.path" :key="itemChild.path" :index="itemChild.path"><img
                                 :src="require('../fdjh/img/pc1.png')"
-                                style="margin-right: 10px;"/><span slot="title">{{ itemChild.name }}</span>
+                                style="margin-right: 8px;"/><span slot="title">{{ itemChild.name }}</span>
                         </el-menu-item>
                     </template>
                 </el-submenu>
-                <el-menu-item v-else :key="item.path" :index="item.path"><img :src="require('../fdjh/img/plan.png')"
-                                                                              style="margin-right: 10px;"
-                                                                              width="28px"/><span
+                <el-menu-item v-else :id="item.path" :key="item.path" :index="item.path"><img
+                        :src="require('../fdjh/img/plan.png')" style="margin-right: 8px;"
+                        width="28px"/><span
                         slot="title">{{ item.name }}</span></el-menu-item>
             </template>
         </el-menu>
@@ -82,16 +85,67 @@ export default {
         }
     },
     methods: {
-        changePage(obj) {
+        selectMenu(key, keyPath, node) {
+            // 右侧区域显示页面
             var parentIframe = parent.document.getElementById('showcontent');
-            parentIframe.src = obj.path;
-        }
+            parentIframe.src = key;
+
+            // 1、2级菜单设置
+            for (var i = 0; i < document.getElementsByClassName('el-submenu').length; i++) {
+                if (node.$parent.$attrs.id == document.getElementsByClassName('el-submenu')[i].id) {
+                    document.getElementById(document.getElementsByClassName('el-submenu')[i].id).getElementsByTagName('img')[0].src = require('../fdjh/img/pc.png');
+                    document.getElementById(document.getElementsByClassName('el-submenu')[i].id).getElementsByTagName('span')[0].style = 'color:rgb(227,220,10);font-size:16px;font-weight:bold';
+                } else {
+                    if (document.getElementsByClassName('el-submenu')[i].id != '/1') {
+                        document.getElementById(document.getElementsByClassName('el-submenu')[i].id).getElementsByTagName('img')[0].src = require('../fdjh/img/pc1.png');
+                        document.getElementById(document.getElementsByClassName('el-submenu')[i].id).getElementsByTagName('span')[0].style = 'font-size:16px;font-weight:bold';
+                    }
+                    if (document.getElementsByClassName('el-submenu')[i].id == '/1') {
+                        // root根设置背景图
+                        document.getElementById(document.getElementsByClassName('el-submenu')[i].id).getElementsByTagName('span')[0].className = "rootbg";
+                    }
+                }
+            }
+
+            // 3级菜单设置
+            for (var i = 0; i < document.getElementsByClassName('el-menu-item').length; i++) {
+                if (document.getElementsByClassName('el-menu-item')[i].id == key) {
+                    document.getElementsByClassName('el-menu-item')[i].getElementsByTagName('img')[0].src = require('../fdjh/img/last.png');
+                    document.getElementById(document.getElementsByClassName('el-menu-item')[i].id).getElementsByTagName('span')[0].className = "test";
+                    document.getElementById(document.getElementsByClassName('el-menu-item')[i].id).getElementsByTagName('span')[0].style = 'color:rgb(227,220,10);font-size:16px;font-weight:bold';
+                } else {
+                    document.getElementsByClassName('el-menu-item')[i].getElementsByTagName('img')[0].src = require('../fdjh/img/last1.png');
+                    document.getElementById(document.getElementsByClassName('el-menu-item')[i].id).getElementsByTagName('span')[0].className = "";
+                    document.getElementById(document.getElementsByClassName('el-menu-item')[i].id).getElementsByTagName('span')[0].style = 'font-size:16px;font-weight:bold';
+                }
+            }
+        },
 
     }
 }
 </script>
 
 <style scoped>
+.d1 {
+    padding-left: 8px;
+    height: 38px;
+    width: 90%;
+    display: inline-block;
+    line-height: 38px;
+}
+
+.test {
+    background: url(../fdjh/img/node_bg.png) no-repeat;
+//padding-left: 8px; height: 38px; width: 90%; display: inline-block;
+    line-height: 38px;
+}
+
+.rootbg {
+    background: url(../fdjh/img/root_bg.png) no-repeat;
+//padding-left: 8px; height: 38px; width: 90%; display: inline-block;
+    line-height: 38px;
+}
+
 .sidebar {
     display: block;
     text-align: left;
@@ -103,7 +157,9 @@ export default {
 }
 
 .sidebar-el-menu:not(.el-menu--collapse) {
-//position: absolute; //top: 6%; margin: 0px 0 30px 30px; background-size: 100% 100%; height: 90%;
+    margin: 0px 0 30px 30px;
+    background-size: 100% 100%;
+    height: 90%;
 }
 
 /deep/ .el-submenu__title:hover {

src/views/xtpzyrz/xtpz/xtpz.vue

@@ -9,7 +9,7 @@
                 <el-button
                         id="message_btn1"
                         class="el-icon-blue-left"
-                        style="text-align: right"
+                        style="text-indent: 15%"
                 >断面
                 </el-button>
                 <el-button
@@ -49,13 +49,13 @@
                     :header-cell-style="{color:'#fff'}"
                     :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
                     size="mini"
-                    style="width: 1429px;font-size: 17px;background: none;padding-left: 15px"
+                    style="width: 1429px;font-size: 17px;background: none"
             >
                 <el-table-column
                         align="center"
                         label="断面名称"
                         prop="xtpzName"
-                        width="270px"
+                        width="230px"
                 >
                 </el-table-column>
                 <el-table-column
@@ -204,7 +204,6 @@ export default {
 
 <style lang="less" scoped>
 
-
 @font-face {
   font-family: AliMaMa;//自定义字体名称
   src: url("../../Articles/font/AlimamaDaoLiTi.ttf")
@@ -225,24 +224,27 @@ body {
 }
 
 .el-button:active {
-  background-color:transparent !important;
+  background-color: transparent !important;
   font-weight: bold;
 }
+
 /*按钮悬浮*/
 .el-button:hover {
-  background-color:transparent !important;
+  background-color: transparent !important;
   color: white !important;
   font-weight: bold;
   border-color: #01a8f9 !important;
 }
+
 /*按钮点击*/
 .el-button:focus {
-  background-color:transparent !important;
+  background-color: transparent !important;
   color: white !important;
   font-weight: bold;
 
   border-color: #01a8f9 !important;
 }
+
 .el-divider--horizontal {
   margin: 8px 0;
   background: 0 0;
@@ -395,14 +397,17 @@ body {
 /deep/ .el-form-item__label {
   color: white;
 }
+
 .table-box {
   min-height: 600px;
   padding-left: 2px;
   background-size: cover;
 }
+
 .table-wrapper {
-  width: 1450px;
-  padding-left: 20px;
+  width: 97%;
+  height: 100%;
+  padding-left: 2%;
 
   .table-box {
     min-height: 600px;

src/views/xtpzyrz/xtpzyrz.vue

@@ -13,7 +13,7 @@
 
 <script>
 export default {
-    name: 'fdjh-name'
+    name: 'xtpz-name'
 }
 </script>