|
|
@@ -1,203 +1,180 @@
|
|
|
<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;margin-left: 90px;padding-top: 3px;margin-bottom: 20px">
|
|
|
- 风电
|
|
|
- </div>
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-form>
|
|
|
- <el-col >
|
|
|
- <el-form-item
|
|
|
- label="场站名称:"
|
|
|
- style="font-weight: 700"
|
|
|
- label-width="100px"
|
|
|
+ <div class="table-wrapper">
|
|
|
+ <div class="table-box">
|
|
|
+ <div class="title"
|
|
|
+ style="font-family: AliMaMa;font-size: 30px;font-weight: 1000;text-align: left;margin-left: 90px;padding-top: 3px;margin-bottom: 20px">
|
|
|
+ 风电
|
|
|
+ </div>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-form>
|
|
|
+ <el-col>
|
|
|
+ <el-form-item
|
|
|
+ label="场站名称:"
|
|
|
+ label-width="100px"
|
|
|
+ style="font-weight: 700"
|
|
|
+ >
|
|
|
+ <el-select v-model="form.taskNumber" placeholder="请选择" size="mini">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options0"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col>
|
|
|
+ <el-form-item
|
|
|
+ label="装机容量(MVA):"
|
|
|
+ label-width="150px"
|
|
|
+ style="font-weight: 700"
|
|
|
+ >
|
|
|
+ <el-select v-model="form.taskNumber" placeholder="请选择" size="mini">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options2"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col>
|
|
|
+ <el-form-item
|
|
|
+ label="是否受控:"
|
|
|
+ label-width="100px"
|
|
|
+ style="font-weight: 700"
|
|
|
+ >
|
|
|
+ <el-select v-model="form.taskNumber" placeholder="请选择" size="mini">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col>
|
|
|
+ <el-form-item
|
|
|
+ label="下发状态:"
|
|
|
+ label-width="100px"
|
|
|
+ style="font-weight: 700"
|
|
|
+ >
|
|
|
+ <el-select v-model="form.taskNumber" placeholder="请选择" size="mini">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options1"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col>
|
|
|
+ <el-form-item
|
|
|
+ label="日期:"
|
|
|
+ label-width="60px"
|
|
|
+ style="font-weight: 700"
|
|
|
+ >
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ size="mini"
|
|
|
+ type="date">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-form>
|
|
|
+ </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-select v-model="form.taskNumber" placeholder="请选择" size="mini">
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col >
|
|
|
- <el-form-item
|
|
|
- label="装机容量(MVA):"
|
|
|
- style="font-weight: 700"
|
|
|
- label-width="150px"
|
|
|
- >
|
|
|
- <el-select v-model="form.taskNumber" placeholder="请选择" size="mini">
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col>
|
|
|
- <el-form-item
|
|
|
- label="是否受控:"
|
|
|
- style="font-weight: 700"
|
|
|
- label-width="100px"
|
|
|
- >
|
|
|
- <el-select v-model="form.taskNumber" placeholder="请选择" size="mini">
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col >
|
|
|
- <el-form-item
|
|
|
- label="下发状态:"
|
|
|
- style="font-weight: 700"
|
|
|
- label-width="100px"
|
|
|
- >
|
|
|
- <el-select v-model="form.taskNumber" placeholder="请选择" size="mini">
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value">
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col >
|
|
|
- <el-form-item
|
|
|
- label="日期:"
|
|
|
- style="font-weight: 700"
|
|
|
- label-width="60px"
|
|
|
- >
|
|
|
- <el-date-picker
|
|
|
- v-model="form.date"
|
|
|
- type="date"
|
|
|
- size="mini"
|
|
|
- placeholder="选择日期">
|
|
|
- </el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-form>
|
|
|
- </el-row>
|
|
|
- <el-table
|
|
|
- :data="tableData"
|
|
|
- size="mini"
|
|
|
- style="width: 1429px;font-size: 17px;background: none"
|
|
|
- :header-cell-style="{color:'#fff'}"
|
|
|
- :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
|
|
|
- :cell-style="{border:0,color:'#fff'}"
|
|
|
- >
|
|
|
- <el-table-column
|
|
|
- prop="date"
|
|
|
- label="场站名称"
|
|
|
- align="center"
|
|
|
- >
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="name"
|
|
|
- label="是否受控"
|
|
|
- align="center"
|
|
|
- >
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="address"
|
|
|
- label="装机容量(MVA)"
|
|
|
- align="center">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="address"
|
|
|
- label="虚拟电厂计划值"
|
|
|
- align="center">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="address"
|
|
|
- label="现货系统计划值"
|
|
|
- align="center">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="address"
|
|
|
- label="计划时刻"
|
|
|
- align="center">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="address"
|
|
|
- label="执行时刻"
|
|
|
- align="center">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="address"
|
|
|
- label="下发状态"
|
|
|
- align="center">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="address"
|
|
|
- label="下发时间"
|
|
|
- align="center">
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="场站名称"
|
|
|
+ prop="stationName"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="是否受控"
|
|
|
+ prop="control"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="装机容量(MVA)"
|
|
|
+ prop="capacity">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="虚拟电厂计划值"
|
|
|
+ prop="capacity">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="现货系统计划值"
|
|
|
+ prop="capacity">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="计划时刻"
|
|
|
+ prop="time">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="执行时刻"
|
|
|
+ prop="time">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="下发状态"
|
|
|
+ prop="status">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="下发时间"
|
|
|
+ prop="date">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
export default {
|
|
|
- name: 'Article-Index',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- form: {
|
|
|
- taskNumber: '',
|
|
|
- date: '',
|
|
|
- current: 1,
|
|
|
- size: 10
|
|
|
- },
|
|
|
- options: [{
|
|
|
- value: '选项1',
|
|
|
- label: '黄金糕'
|
|
|
- }, {
|
|
|
- value: '选项2',
|
|
|
- label: '双皮奶'
|
|
|
- }, {
|
|
|
- value: '选项3',
|
|
|
- label: '蚵仔煎'
|
|
|
- }, {
|
|
|
- value: '选项4',
|
|
|
- label: '龙须面'
|
|
|
- }, {
|
|
|
- value: '选项5',
|
|
|
- label: '北京烤鸭'
|
|
|
- }],
|
|
|
- tableData: [{
|
|
|
- date: '2016-05-02',
|
|
|
- name: '王小虎',
|
|
|
- address: '是'
|
|
|
- }, {
|
|
|
- date: '2016-05-04',
|
|
|
- name: '王小虎',
|
|
|
- address: '是'
|
|
|
- }, {
|
|
|
- date: '2016-05-01',
|
|
|
- name: '王小虎',
|
|
|
- address: '是'
|
|
|
- }, {
|
|
|
- date: '2016-05-03',
|
|
|
- name: '王小虎',
|
|
|
- address: '是'
|
|
|
- }]
|
|
|
+ name: 'Article-Index',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ taskNumber: '',
|
|
|
+ date: '',
|
|
|
+ current: 1,
|
|
|
+ size: 10
|
|
|
+ },
|
|
|
+ options: [],
|
|
|
+ options0: [],
|
|
|
+ options1: [],
|
|
|
+ options2: [],
|
|
|
+ tableData: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {},
|
|
|
+ mounted() {
|
|
|
+ const tableDataList = require('../tabledata.json');
|
|
|
+ this.tableData = tableDataList.windDataList
|
|
|
+ this.options = tableDataList.yesOrNoOption
|
|
|
+ this.options1 = tableDataList.status
|
|
|
+ this.options2 = tableDataList.capacity
|
|
|
+ this.options0 = tableDataList.stationOption
|
|
|
}
|
|
|
- },
|
|
|
- methods: {},
|
|
|
- mounted() {
|
|
|
-
|
|
|
- }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -209,7 +186,6 @@ export default {
|
|
|
}
|
|
|
|
|
|
|
|
|
-
|
|
|
.table-wrapper {
|
|
|
width: 1483px;
|
|
|
padding: 0 20px;
|
|
|
@@ -238,33 +214,38 @@ export default {
|
|
|
height: 34px;
|
|
|
font-size: 17px;
|
|
|
}
|
|
|
- /deep/ .el-table__header{
|
|
|
+
|
|
|
+ /deep/ .el-table__header {
|
|
|
background: url(./img/bg1.png);
|
|
|
}
|
|
|
|
|
|
/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
|
|
|
- background-color: rgb(103,118,49) !important
|
|
|
- }
|
|
|
+ background-color: rgb(103, 118, 49) !important
|
|
|
+ }
|
|
|
|
|
|
- /deep/ .el-col{
|
|
|
+ /deep/ .el-col {
|
|
|
padding: 0;
|
|
|
display: inline-block;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
- /deep/ .el-col:nth-child(1){
|
|
|
+ /deep/ .el-col:nth-child(1) {
|
|
|
width: 19%;
|
|
|
}
|
|
|
- /deep/ .el-col:nth-child(2){
|
|
|
+
|
|
|
+ /deep/ .el-col:nth-child(2) {
|
|
|
width: 22%;
|
|
|
}
|
|
|
- /deep/ .el-col:nth-child(3){
|
|
|
+
|
|
|
+ /deep/ .el-col:nth-child(3) {
|
|
|
width: 19%;
|
|
|
}
|
|
|
- /deep/ .el-col:nth-child(4){
|
|
|
+
|
|
|
+ /deep/ .el-col:nth-child(4) {
|
|
|
width: 19%;
|
|
|
}
|
|
|
- /deep/ .el-col:nth-child(5){
|
|
|
+
|
|
|
+ /deep/ .el-col:nth-child(5) {
|
|
|
width: 15%;
|
|
|
}
|
|
|
|
|
|
@@ -272,12 +253,15 @@ export default {
|
|
|
/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;
|
|
|
}
|
|
|
@@ -289,32 +273,33 @@ export default {
|
|
|
|
|
|
|
|
|
/deep/ .el-icon-arrow-up:before {
|
|
|
- content:url(./img/xiala2.png);
|
|
|
+ content: url(./img/xiala2.png);
|
|
|
}
|
|
|
|
|
|
- /deep/ .el-input__prefix{
|
|
|
+ /deep/ .el-input__prefix {
|
|
|
right: -60px;
|
|
|
padding-top: 3px;
|
|
|
}
|
|
|
|
|
|
- /deep/ .el-icon-date:before{
|
|
|
- content:url(./img/riqi.png);
|
|
|
+ /deep/ .el-icon-date:before {
|
|
|
+ content: url(./img/riqi.png);
|
|
|
}
|
|
|
|
|
|
- /deep/ .el-table__header tr {
|
|
|
+ /deep/ .el-table__header tr {
|
|
|
background: url(./img/bg1.png);
|
|
|
height: 49px;
|
|
|
|
|
|
-}
|
|
|
+ }
|
|
|
|
|
|
- /deep/ .el-table th.el-table__cell{
|
|
|
- background:none ;
|
|
|
+ /deep/ .el-table th.el-table__cell {
|
|
|
+ background: none;
|
|
|
}
|
|
|
|
|
|
/deep/ .el-table__body {
|
|
|
-webkit-border-vertical-spacing: 13px; // 垂直间距
|
|
|
}
|
|
|
- /deep/ .el-form-item__content{
|
|
|
+
|
|
|
+ /deep/ .el-form-item__content {
|
|
|
text-align: left;
|
|
|
}
|
|
|
|
