Merge branch 'master' of http://git.jiayuepowertech.com:9022/xiuwei/vpp

src/views/Articles/index.vue

@@ -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;
   }