|
|
@@ -1,171 +1,172 @@
|
|
|
<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>
|
|
|
+ <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 ref="ruleForm" :model="ruleForm" label-position="center"
|
|
|
+ label-width="130px"
|
|
|
+ size="mini">
|
|
|
+ <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;width: 50%;height: 50%">汗海
|
|
|
+ </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-button style="float:right" type="primary" @click="submitForm('ruleForm')">确定
|
|
|
+ </el-button>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-button style="float:right" type="primary" @click="submitForm('ruleForm')">取消
|
|
|
+ </el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
export default {
|
|
|
- name: 'Xtpz',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tableData: [],
|
|
|
- //弹框
|
|
|
- getmessage:false
|
|
|
+ name: 'Xtpz',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: [],
|
|
|
+ //弹框
|
|
|
+ getmessage: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //弹框
|
|
|
+ sendmessage() {
|
|
|
+ this.getmessage = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ const tableDataList = require('./xtpzdata.json');
|
|
|
+ this.tableData = tableDataList.xtpzDataList
|
|
|
}
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //弹框
|
|
|
- sendmessage(){
|
|
|
- this.getmessage = true
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- const tableDataList = require('./xtpzdata.json');
|
|
|
- this.tableData = tableDataList.xtpzDataList
|
|
|
- }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -187,6 +188,7 @@ body {
|
|
|
height: 49px;
|
|
|
|
|
|
}
|
|
|
+
|
|
|
.el-icon-blue-left {
|
|
|
background: url("./img/bluebtn.png");
|
|
|
width: 106px;
|
|
|
@@ -194,8 +196,9 @@ body {
|
|
|
border: 0px dashed;
|
|
|
//border-radius: 0px;
|
|
|
background-repeat: no-repeat;
|
|
|
- float:left;
|
|
|
+ float: left;
|
|
|
}
|
|
|
+
|
|
|
.el-icon-red-right {
|
|
|
background: url("./img/redbtn.png");
|
|
|
width: 106px;
|
|
|
@@ -203,8 +206,9 @@ body {
|
|
|
border: 0px dashed;
|
|
|
//border-radius: 0px;
|
|
|
background-repeat: no-repeat;
|
|
|
- float:right;
|
|
|
+ float: right;
|
|
|
}
|
|
|
+
|
|
|
.el-icon-blue-right {
|
|
|
background: url("./img/bluebtn.png");
|
|
|
width: 106px;
|
|
|
@@ -212,8 +216,9 @@ body {
|
|
|
border: 0px dashed;
|
|
|
//border-radius: 0px;
|
|
|
background-repeat: no-repeat;
|
|
|
- float:right;
|
|
|
+ float: right;
|
|
|
}
|
|
|
+
|
|
|
.el-icon-yellow-right {
|
|
|
background: url("./img/yellowbtn.png");
|
|
|
width: 106px;
|
|
|
@@ -221,8 +226,9 @@ body {
|
|
|
border: 0px dashed;
|
|
|
//border-radius: 0px;
|
|
|
background-repeat: no-repeat;
|
|
|
- float:right;
|
|
|
+ float: right;
|
|
|
}
|
|
|
+
|
|
|
.el-icon-green-right {
|
|
|
background: url("./img/greenbtn.png");
|
|
|
width: 106px;
|
|
|
@@ -230,7 +236,7 @@ body {
|
|
|
border: 0px dashed;
|
|
|
//border-radius: 0px;
|
|
|
background-repeat: no-repeat;
|
|
|
- float:right;
|
|
|
+ float: right;
|
|
|
}
|
|
|
|
|
|
|
|
|
@@ -238,8 +244,26 @@ body {
|
|
|
background-color: rgba(255, 0, 0, 0.0);
|
|
|
color: #FFFFFF;
|
|
|
background-image: url("./img/tanchuangbg.png");
|
|
|
- background-size: 100% 100%;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ isplay: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin: 0 !important;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ /*height:600px;*/
|
|
|
+ max-height: calc(100% - 200px);
|
|
|
+ max-width: calc(100% - 30px);
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-dialog .el-dialog__body {
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
+
|
|
|
.table-wrapper {
|
|
|
width: 1483px;
|
|
|
padding-left: 20px;
|
|
|
@@ -292,7 +316,6 @@ body {
|
|
|
}
|
|
|
|
|
|
|
|
|
-
|
|
|
/deep/ .el-icon-arrow-up {
|
|
|
transform: rotateZ(0deg);
|
|
|
|
