系统配置暂存

package-lock.json

@@ -9,7 +9,9 @@
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.8.3",
+        "echarts": "^5.4.0",
         "element-ui": "^2.15.14",
+        "js-base64": "^3.7.5",
         "less": "^4.2.0",
         "less-loader": "^7.3.0",
         "vue": "^2.6.14",
@@ -23,6 +25,8 @@
         "@vue/cli-service": "~5.0.0",
         "eslint": "^7.32.0",
         "eslint-plugin-vue": "^8.0.3",
+        "sass": "1.32.13",
+        "sass-loader": "10.1.1",
         "vue-template-compiler": "^2.6.14"
       }
     },
@@ -5142,6 +5146,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/echarts": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.3.tgz",
+      "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.4.4"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -7143,6 +7161,11 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
+    "node_modules/js-base64": {
+      "version": "3.7.5",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.5.tgz",
+      "integrity": "sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA=="
+    },
     "node_modules/js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz",
@@ -9806,6 +9829,123 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "devOptional": true
     },
+    "node_modules/sass": {
+      "version": "1.32.13",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.13.tgz",
+      "integrity": "sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/sass-loader": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.1.1.tgz",
+      "integrity": "sha512-W6gVDXAd5hR/WHsPicvZdjAWHBcEJ44UahgxcIE196fW2ong0ZHMPO1kZuI5q0VlvMQZh32gpv69PLWQm70qrw==",
+      "dev": true,
+      "dependencies": {
+        "klona": "^2.0.4",
+        "loader-utils": "^2.0.0",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.0.0",
+        "semver": "^7.3.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "fibers": ">= 3.1.0",
+        "node-sass": "^4.0.0 || ^5.0.0",
+        "sass": "^1.3.0",
+        "webpack": "^4.36.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "fibers": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/sass-loader/node_modules/loader-utils": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+      "dev": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/sass-loader/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/sass-loader/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/sass-loader/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/sass-loader/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
     "node_modules/sax": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
@@ -11816,6 +11956,19 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
       "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
       "dev": true
+    },
+    "node_modules/zrender": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.4.tgz",
+      "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     }
   }
 }

src/router/index.js

@@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
 import Login from '../views/Login/Login.vue'
 import Table1 from '../views/Articles/index.vue'
 import Fdjh from '../views/fdjh/fdjh.vue'
+import Xtpz from '../views/xtpz/xtpz.vue'
 
 Vue.use(VueRouter)
 
@@ -26,6 +27,11 @@ const routes = [
     path: '/fdjh',
     name: '发电计划',
     component: Fdjh
+  },
+  {
+    path: '/xtpz',
+    name: '系统配置',
+    component: Xtpz
   }
 
 ]

src/views/xtpz/xtpz.vue

@@ -1,14 +1,322 @@
 <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-row :gutter="20">
+        <el-button
+            id="message_btn1"
+            class="el-icon-blue-left"
+        ><span style="font-size: 25px;line-height: 0;color:aliceblue">断面</span></el-button>
+        <el-button
+            id="message_btn2"
+            class="el-icon-blue-left"
+        ><span style="font-size: 25px;line-height: 0;color:aliceblue">联络线</span></el-button>
 
-  
+        <el-button
+            id="message_btn3"
+            class="el-icon-blue-right"
+        ><span style="font-size: 25px;line-height: 0;color:aliceblue">刷新</span>
+        </el-button>
+        <el-button
+            id="message_btn4"
+            class="el-icon-red-right"
+        >
+          <span style="font-size: 25px;line-height: 0;color:aliceblue">删除</span>
+        </el-button>
+        <el-button
+            id="message_btn4"
+            class="el-icon-yellow-right"
+        >
+          <span style="font-size: 25px;line-height: 0;color:aliceblue">修改</span>
+        </el-button>
+        <el-button
+            id="message_btn4"
+            class="el-icon-green-right"
+        >
+          <span style="font-size: 25px;line-height: 0;color:aliceblue" @click="sendmessage()">新增</span>
+        </el-button>
+      </el-row>
+      <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="width: 1429px;font-size: 17px;background: none"
+      >
+        <el-table-column
+            align="center"
+            label="断面名称"
+            prop="xtpzName"
+            width="270px"
+        >
+        </el-table-column>
+        <el-table-column
+            align="center"
+            label="状态"
+            prop="xtpzStatus"
+        >
+        </el-table-column>
+        <el-table-column
+            align="center"
+            label="from节点"
+            prop="from">
+        </el-table-column>
+        <el-table-column
+            align="center"
+            label="to节点"
+            prop="to">
+        </el-table-column>
+        <el-table-column
+            align="center"
+            label="负限"
+            prop="low">
+        </el-table-column>
+        <el-table-column
+            align="center"
+            label="正限"
+            prop="height">
+        </el-table-column>
+      </el-table>
+      </div>
+
+
+  <!-- 弹出的页面内容 -->
+  <el-dialog :visible.sync="getmessage" class="tanchuang-dialog">
+    <el-form :model="ruleForm" ref="ruleForm" size="mini"
+             label-width="130px"
+             label-position="center">
+      <el-row>
+        <el-col :span="12">
+      <el-form-item label="断面名称：" style="width: 100%; text-align: left;">
+        <el-input v-model="xtpzName" placeholder="启用" style="margin-top: 10px;">启用</el-input>
+      </el-form-item>
+        </el-col>
+        <el-col :span="12">
+      <el-form-item label="状态" style="width: 100%; text-align: right;">
+        <el-input v-model="xtpzStatus" placeholder="状态" style="margin-top: 10px; text-align: center;"></el-input>
+      </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12">
+      <el-form-item label="from节点" style="width: 100%; text-align: left;">
+        <el-input v-model="from" placeholder="汗海" style="margin-top: 10px;">汗海</el-input>
+      </el-form-item>
+        </el-col>
+        <el-col :span="12">
+      <el-form-item label="to节点">
+        <el-input v-model="to" placeholder="庆云" style="margin-top: 10px;">庆云</el-input>
+      </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12">
+      <el-form-item label="负限" style="width: 100%; text-align: left;">
+        <el-input v-model="low" placeholder="250" style="margin-top: 10px;">250</el-input>
+      </el-form-item>
+        </el-col>
+        <el-col :span="12">
+      <el-form-item label="正限">
+        <el-input v-model="height" placeholder="200" style="margin-top: 10px;">200</el-input>
+      </el-form-item>
+      </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="负限">
+            <el-button type="primary" @click="submitForm('ruleForm')" style="float:right">确定</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="正限">
+            <el-button type="primary" @click="submitForm('ruleForm')" style="float:right">取消</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+  </el-dialog>
+  </div>
 </template>
 
 <script>
+
 export default {
-  name: 'rqdd-name'
+  name: 'Xtpz',
+  data() {
+    return {
+      tableData: [],
+      //弹框
+      getmessage:false
+    }
+  },
+  methods: {
+    //弹框
+    sendmessage(){
+      this.getmessage = true
+    }
+  },
+  mounted() {
+    const tableDataList = require('./xtpzdata.json');
+    this.tableData = tableDataList.xtpzDataList
+  }
 }
 </script>
 
-<style scoped lang="css">
+<style lang="less" scoped>
+
+
+@font-face {
+  font-family: AliMaMa;//自定义字体名称
+  src: url("../Articles/font/AlimamaDaoLiTi.ttf")
+}
+
+body {
+  border: 0;
+  background-image: url(./img/beijing.png)
+}
+
+/deep/ .el-table__header tr {
+  background: url(./img/tableTitlebg.png);
+  height: 49px;
+
+}
+.el-icon-blue-left {
+  background: url("./img/bluebtn.png");
+  width: 106px;
+  height: 57px;
+  border: 0px dashed;
+  //border-radius: 0px;
+  background-repeat: no-repeat;
+  float:left;
+}
+.el-icon-red-right {
+  background: url("./img/redbtn.png");
+  width: 106px;
+  height: 57px;
+  border: 0px dashed;
+  //border-radius: 0px;
+  background-repeat: no-repeat;
+  float:right;
+}
+.el-icon-blue-right {
+  background: url("./img/bluebtn.png");
+  width: 106px;
+  height: 57px;
+  border: 0px dashed;
+  //border-radius: 0px;
+  background-repeat: no-repeat;
+  float:right;
+}
+.el-icon-yellow-right {
+  background: url("./img/yellowbtn.png");
+  width: 106px;
+  height: 57px;
+  border: 0px dashed;
+  //border-radius: 0px;
+  background-repeat: no-repeat;
+  float:right;
+}
+.el-icon-green-right {
+  background: url("./img/greenbtn.png");
+  width: 106px;
+  height: 57px;
+  border: 0px dashed;
+  //border-radius: 0px;
+  background-repeat: no-repeat;
+  float:right;
+}
+
+
+/deep/ .el-dialog {
+  background-color: rgba(255, 0, 0, 0.0);
+  color: #FFFFFF;
+  background-image: url("./img/tanchuangbg.png");
+  background-size: 100%  100%;
+}
+.table-wrapper {
+  width: 1483px;
+  padding-left: 20px;
+
+  .table-box {
+    min-height: 600px;
+    background-size: cover;
+  }
+
+  .title {
+    margin-bottom: 20px;
+    margin-left: 60px;
+    font-size: 18px;
+    color: #fff;
+  }
+
+
+  /deep/ .el-table__header {
+    background: url(./img/tableTitlebg.png);
+  }
+
+  /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-icon-arrow-up {
+    transform: rotateZ(0deg);
+
+  }
+
+  /deep/ .el-input__prefix {
+    right: -60px;
+    padding-top: 3px;
+  }
+
+  /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/xtpz/xtpzdata.json

@@ -0,0 +1,40 @@
+{
+"xtpzDataList": [
+{
+"xtpzName": "汗海-庆云断面",
+"xtpzStatus": "启用",
+"from": "汗海",
+"to": "庆云",
+"height": "200",
+"low": "250"
+},{
+    "xtpzName": "汗海-庆云断面",
+    "xtpzStatus": "启用",
+    "from": "汗海",
+    "to": "庆云",
+    "height": "200",
+    "low": "250"
+},{
+    "xtpzName": "汗海-庆云断面",
+    "xtpzStatus": "启用",
+    "from": "汗海",
+    "to": "庆云",
+    "height": "200",
+    "low": "250"
+},{
+    "xtpzName": "汗海-庆云断面",
+    "xtpzStatus": "启用",
+    "from": "汗海",
+    "to": "庆云",
+    "height": "200",
+    "low": "250"
+},{
+    "xtpzName": "汗海-庆云断面",
+    "xtpzStatus": "启用",
+    "from": "汗海",
+    "to": "庆云",
+    "height": "200",
+    "low": "250"
+}
+]
+}