|
|
@@ -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>
|
wangt
