整合表格完毕

src/views/Articles/index.vue

@@ -1,180 +1,181 @@
 <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="场站名称:"
-                                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"
+  <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-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>
+              <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-table-column
+            align="center"
+            label="场站名称"
+            prop="stationName"
+            width="270px"
+        >
+        </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>
 </template>
 
 <script>
 
 export default {
-    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
+  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
+  }
 }
 </script>
 
@@ -185,13 +186,16 @@ export default {
   src: url("./font/AlimamaDaoLiTi.ttf")
 }
 
+body {
+  border: 0;
+  background-image: url(./img/bgc.png)
+}
 
 .table-wrapper {
   width: 1483px;
-  padding: 0 20px;
+  padding-left: 20px;
 
   .table-box {
-    background: url(./img/bgc.png);
     min-height: 600px;
     background-size: cover;
   }

src/views/fdjh/fdjh.vue

@@ -3,8 +3,10 @@
     <iframe class="image_2 pos_2">
       <img src="./img/fdjh-left.png">
     </iframe>
-    <iframe class="image_3 pos_3"  src="/#/table1">
+    <div id="iframe1" class="image_3 pos_3" style="">
+    <iframe  style="width: 100%;height: 100%" src="/#/table1">
     </iframe>
+    </div>
   </div>
 </template>
 
@@ -29,6 +31,13 @@ export default {
   width: 100vw;
   height: 4.5833vw;
 }
+iframe{
+  border: 0;
+}
+#iframe1{
+  background-image: url(./img/img.png);
+}
+
 .pos {
   position: absolute;
   width: 1920px;
@@ -57,9 +66,9 @@ export default {
 }
 .pos_3 {
   position: absolute;
-  width: 1459px;
+  width: 1479px;
   height: 910px;
-  left: 428px;
+  left: 408px;
   right: 33px;
   top: 142px;
   bottom: 28px;