|
|
@@ -1,172 +1,197 @@
|
|
|
<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 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 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"
|
|
|
+ >断面</el-button>
|
|
|
+ <el-button
|
|
|
+ id="message_btn2"
|
|
|
+ class="el-icon-blue-left"
|
|
|
+ >联络线</el-button>
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ id="message_btn3"
|
|
|
+ class="el-icon-blue-right"
|
|
|
+ >刷新
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ id="message_btn4"
|
|
|
+ class="el-icon-red-right"
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ id="message_btn4"
|
|
|
+ class="el-icon-yellow-right"
|
|
|
+ >
|
|
|
+ 修改
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ id="message_btn4"
|
|
|
+ class="el-icon-green-right"
|
|
|
+ @click="sendmessage()"
|
|
|
+ >
|
|
|
+ 新增
|
|
|
+ </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" title="新增数据" :center="true" :show-close="false">
|
|
|
+ <div slot="title" class="header-title">
|
|
|
+ <span style="font-weight:bold;font-size: 20px;"> 新增数据 </span>
|
|
|
+ </div>
|
|
|
+ <el-form ref="ruleForm" :model="ruleForm" label-position="center"
|
|
|
+ label-width="130px"
|
|
|
+ size="mini">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12" style="width: 40%; float: left;">
|
|
|
+ <el-form-item label="断面名称：" style="width: 100%; float: left;color: white">
|
|
|
+ <el-input v-model="xtpzName" placeholder="汗海-庆云断面" style="width: 100%;">启用</el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" style="width: 40%; float: left;">
|
|
|
+ <el-form-item label="状态：" style="width: 100%; float: right;">
|
|
|
+ <el-input v-model="xtpzStatus" placeholder="状态"
|
|
|
+ style="width: 100%; text-align: center;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12" style="width: 40%; float: left;">
|
|
|
+ <el-form-item label="from节点：" style="width: 100%; float: left;">
|
|
|
+ <el-input v-model="from" placeholder="汗海"
|
|
|
+ style="width: 100%;float: left;">汗海
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" style="width: 40%; float: left;">
|
|
|
+ <el-form-item label="to节点：" style="width: 100%; float: left;">
|
|
|
+ <el-input v-model="to" placeholder="庆云" style="width: 100%;float: left;">庆云</el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12" style="width: 40%; float: left;">
|
|
|
+ <el-form-item label="负限：" style="width: 100%; float: left;">
|
|
|
+ <el-input v-model="low" placeholder="250" style="width: 100%;">250</el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" style="width: 40%; float: left;">
|
|
|
+ <el-form-item label="正限：" style="width: 100%; float: right;">
|
|
|
+ <el-input v-model="height" placeholder="200" style="width: 100%;">200</el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <el-row class="hengxianimg">
|
|
|
+ <el-divider/>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-row :gutter="20" id="tijiao_btn">
|
|
|
+ <el-button
|
|
|
+ id="form_btn1"
|
|
|
+ class="el-icon-blue-left2"
|
|
|
+ @click="cancelForm()"
|
|
|
+ >
|
|
|
+ 保存
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ id="form_btn2"
|
|
|
+ class="el-icon-yellow-right2"
|
|
|
+ @click="cancelForm()"
|
|
|
+ >取消</el-button>
|
|
|
+
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
export default {
|
|
|
- name: 'Xtpz',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tableData: [],
|
|
|
- //弹框
|
|
|
- getmessage: false
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //弹框
|
|
|
- sendmessage() {
|
|
|
- this.getmessage = true
|
|
|
- }
|
|
|
+ name: 'Xtpz',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: [],
|
|
|
+ //弹框
|
|
|
+ getmessage: false,
|
|
|
+ ruleForm: {
|
|
|
+ xtpzName: '',
|
|
|
+ xtpzStatus: '',
|
|
|
+ from: '',
|
|
|
+ to: '',
|
|
|
+ low: '',
|
|
|
+ height: '',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //弹框
|
|
|
+ sendmessage() {
|
|
|
+ this.getmessage = true
|
|
|
},
|
|
|
- mounted() {
|
|
|
- const tableDataList = require('./xtpzdata.json');
|
|
|
- this.tableData = tableDataList.xtpzDataList
|
|
|
+ //弹框
|
|
|
+ cancelForm() {
|
|
|
+ this.getmessage = false
|
|
|
}
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ const tableDataList = require('./xtpzdata.json');
|
|
|
+ this.tableData = tableDataList.xtpzDataList
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -189,61 +214,127 @@ body {
|
|
|
|
|
|
}
|
|
|
|
|
|
+.el-divider--horizontal {
|
|
|
+ margin: 8px 0;
|
|
|
+ background: 0 0;
|
|
|
+ border-top: 1px dashed #e8eaec;
|
|
|
+ width: 90%;
|
|
|
+ text-align: center;
|
|
|
+ left: 5%;
|
|
|
+}
|
|
|
+
|
|
|
.el-icon-blue-left {
|
|
|
background: url("./img/bluebtn.png");
|
|
|
- width: 106px;
|
|
|
- height: 57px;
|
|
|
+ width: 100px;
|
|
|
+ height: 40px;
|
|
|
+ padding-top: 8px;
|
|
|
+ font-size: 25px;
|
|
|
+ color: whitesmoke;
|
|
|
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;
|
|
|
+ width: 100px;
|
|
|
+ height: 40px;
|
|
|
+ padding-top: 8px;
|
|
|
+ font-size: 25px;
|
|
|
+ color: whitesmoke;
|
|
|
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;
|
|
|
+ width: 100px;
|
|
|
+ height: 40px;
|
|
|
+ padding-top: 8px;
|
|
|
+ font-size: 25px;
|
|
|
+ color: whitesmoke;
|
|
|
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;
|
|
|
+ width: 100px;
|
|
|
+ height: 40px;
|
|
|
+ padding-top: 8px;
|
|
|
+ font-size: 25px;
|
|
|
+ color: whitesmoke;
|
|
|
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;
|
|
|
+ width: 100px;
|
|
|
+ height: 40px;
|
|
|
+ padding-top: 8px;
|
|
|
+ font-size: 25px;
|
|
|
+ color: whitesmoke;
|
|
|
border: 0px dashed;
|
|
|
- //border-radius: 0px;
|
|
|
+
|
|
|
background-repeat: no-repeat;
|
|
|
float: right;
|
|
|
}
|
|
|
|
|
|
|
|
|
+.el-icon-blue-left2 {
|
|
|
+ background: url("./img/submitbtn.png");
|
|
|
+ width: 145px;
|
|
|
+ height: 42px;
|
|
|
+ border: 0px dashed;
|
|
|
+ padding-top: 8px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ float: left;
|
|
|
+ text-align: center;
|
|
|
+ left: 10%;
|
|
|
+ font-size: 25px;
|
|
|
+ color: whitesmoke;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+#tijiao_btn {
|
|
|
+ float: left;
|
|
|
+ text-align: center;
|
|
|
+ left: 30%;
|
|
|
+}
|
|
|
+
|
|
|
+.el-icon-yellow-right2 {
|
|
|
+ background: url("./img/cancelbtn.png");
|
|
|
+ width: 145px;
|
|
|
+ height: 42px;
|
|
|
+ border: 0px dashed;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ float: left;
|
|
|
+ margin-left: 50px;
|
|
|
+ font-size: 25px;
|
|
|
+ padding-top: 8px;
|
|
|
+ color: whitesmoke;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/deep/ .header-title {
|
|
|
+ background: url("./img/m.png");
|
|
|
+ background-position: 50% 20%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 50% 130%;
|
|
|
+ text-align: center;
|
|
|
+ height: 40px;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
/deep/ .el-dialog {
|
|
|
background-color: rgba(255, 0, 0, 0.0);
|
|
|
color: #FFFFFF;
|
|
|
background-image: url("./img/tanchuangbg.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
isplay: flex;
|
|
|
flex-direction: column;
|
|
|
@@ -253,15 +344,26 @@ body {
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
/*height:600px;*/
|
|
|
- max-height: calc(100% - 200px);
|
|
|
- max-width: calc(100% - 30px);
|
|
|
+ max-height: calc(100% - 100px);
|
|
|
+ max-width: calc(100% - 70px);
|
|
|
}
|
|
|
|
|
|
/deep/ .el-dialog .el-dialog__body {
|
|
|
flex: 1;
|
|
|
overflow: auto;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-input__inner {
|
|
|
+ background-image: url("./img/inputbg.png");
|
|
|
+ background-color: rgba(255, 0, 0, 0.0);
|
|
|
+ color: white;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-form-item__label {
|
|
|
+ color: white;
|
|
|
}
|
|
|
|
|
|
.table-wrapper {
|
wangt
