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

# Conflicts:
#	src/router/index.js

package-lock.json

@@ -9,7 +9,9 @@
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.8.3",
+        "echarts": "^5.4.0",
         "element-ui": "^2.15.14",
+        "js-base64": "^3.7.5",
         "less": "^4.2.0",
         "less-loader": "^7.3.0",
         "vue": "^2.6.14",
@@ -23,6 +25,8 @@
         "@vue/cli-service": "~5.0.0",
         "eslint": "^7.32.0",
         "eslint-plugin-vue": "^8.0.3",
+        "sass": "1.32.13",
+        "sass-loader": "10.1.1",
         "vue-template-compiler": "^2.6.14"
       }
     },
@@ -5142,6 +5146,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/echarts": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.3.tgz",
+      "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.4.4"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -7143,6 +7161,11 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
+    "node_modules/js-base64": {
+      "version": "3.7.5",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.5.tgz",
+      "integrity": "sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA=="
+    },
     "node_modules/js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz",
@@ -9806,6 +9829,123 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "devOptional": true
     },
+    "node_modules/sass": {
+      "version": "1.32.13",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.13.tgz",
+      "integrity": "sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/sass-loader": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.1.1.tgz",
+      "integrity": "sha512-W6gVDXAd5hR/WHsPicvZdjAWHBcEJ44UahgxcIE196fW2ong0ZHMPO1kZuI5q0VlvMQZh32gpv69PLWQm70qrw==",
+      "dev": true,
+      "dependencies": {
+        "klona": "^2.0.4",
+        "loader-utils": "^2.0.0",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.0.0",
+        "semver": "^7.3.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "fibers": ">= 3.1.0",
+        "node-sass": "^4.0.0 || ^5.0.0",
+        "sass": "^1.3.0",
+        "webpack": "^4.36.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "fibers": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/sass-loader/node_modules/loader-utils": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+      "dev": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/sass-loader/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/sass-loader/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/sass-loader/node_modules/semver": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/sass-loader/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
     "node_modules/sax": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
@@ -11816,6 +11956,19 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
       "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
       "dev": true
+    },
+    "node_modules/zrender": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.4.tgz",
+      "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     }
   }
 }

src/router/index.js

@@ -3,41 +3,149 @@ import VueRouter from 'vue-router'
 import Login from '../views/Login/Login.vue'
 import Table1 from '../views/Articles/index.vue'
 import Fdjh from '../views/fdjh/fdjh.vue'
-import Rqdd from '../views/rqdd/rqdd.vue'
+import Gznfh1 from '@/views/ydjhdjk/gznfh/index.vue'
+import Gznfh from '@/views/ydjhdjk/gznfh/gznfh.vue'
+import Llx from '@/views/ystjjk/llx/llx.vue'
+import Llx1 from '@/views/ystjjk/llx/index.vue'
+import Dm from '@/views/ystjjk/dm/dm.vue'
+import Dm1 from '@/views/ystjjk/dm/index.vue'
+import Hd from '@/views/sjcjjk/hd/hd.vue'
+import Hd1 from '@/views/sjcjjk/hd/index.vue'
+import Fdgf from '@/views/sjcjjk/fdgf/fdgf.vue'
+import Fdgf1 from '@/views/sjcjjk/fdgf/index.vue'
+import Ptfh from '@/views/sjcjjk/ptfh/ptfh.vue'
+import Ptfh1 from '@/views/sjcjjk/ptfh/index.vue'
+import Gaoznfh from '@/views/sjcjjk/gznfh/gznfh.vue'
+import Gaoznfh1 from '@/views/sjcjjk/gznfh/index.vue'
+import Fdjhhd from '@/views/fdjh/hd/hd.vue'
+import Fdjhhd1 from '@/views/fdjh/hd/index.vue'
+import Fdjhgf from '@/views/fdjh/gf/gf.vue'
+import Fdjhgf1 from '@/views/fdjh/gf/index.vue'
+import Xtpz from '../views/xtpz/xtpz.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
-  {
-    path: '/xndc',
-    component: () => import('@/views/xndc/index'),
-    hidden: true
-  },
-  {
-    path: '/',
-    name: 'Login',
-    component: Login
-  },
-  {
-    path: '/table1',
-    name: 'Table1',
-    component: Table1
-  },
-  {
-    path: '/fdjh',
-    name: '发电计划',
-    component: Fdjh
-  },
-  {
-    path: '/rqdd',
-    name: '日前调度',
-    component: Rqdd
-  }
+    {
+        path: '/xndc',
+        component: () => import('@/views/xndc/index'),
+        hidden: true
+    },
+    {
+        path: '/',
+        name: 'Login',
+        component: Login
+    },
+    {
+        path: '/table1',
+        name: 'Table1',
+        component: Table1
+    },
+    {
+        path: '/fdjh',
+        name: '发电计划',
+        component: Fdjh
+    },
+    {
+        path: '/fdjhhd1',
+        name: '火电厂',
+        component: Fdjhhd1
+    },
+    {
+        path: '/fdjhhd',
+        name: '火电厂',
+        component: Fdjhhd
+    },
+    {
+        path: '/fdjhgf1',
+        name: '光伏电站',
+        component: Fdjhgf1
+    },
+    {
+        path: '/fdjhgf',
+        name: '光伏电站',
+        component: Fdjhgf
+    },
+    {
+        path: '/gznfh1',
+        name: '高载能负荷',
+        component: Gznfh1
+    },
+    {
+        path: '/gznfh',
+        name: '高载能负荷',
+        component: Gznfh
+    },
+    {
+        path: '/llx1',
+        name: '联络线',
+        component: Llx1
+    },
+    {
+        path: '/llx',
+        name: '联络线',
+        component: Llx
+    },
+    {
+        path: '/dm1',
+        name: '断面',
+        component: Dm1
+    },
+    {
+        path: '/dm',
+        name: '断面',
+        component: Dm
+    },
+    {
+        path: '/hd1',
+        name: '火电厂',
+        component: Hd1
+    },
+    {
+        path: '/hd',
+        name: '火电厂',
+        component: Hd
+    },
+    {
+        path: '/fdgf1',
+        name: '风电、光伏电站',
+        component: Fdgf1
+    },
+    {
+        path: '/fdgf',
+        name: '风电、光伏电站',
+        component: Fdgf
+    },
+    {
+        path: '/ptfh1',
+        name: '普通负荷',
+        component: Ptfh1
+    },
+    {
+        path: '/ptfh',
+        name: '普通负荷',
+        component: Ptfh
+    },
+    {
+        path: '/gaoznfh1',
+        name: '高载能负荷',
+        component: Gaoznfh1
+    },
+    {
+        path: '/gaoznfh',
+        name: '高载能负荷',
+        component: Gaoznfh
+    },
 
+    {
+        path: '/xtpz',
+        name: '系统配置',
+        component: Xtpz
+    }
 ]
 
 const router = new VueRouter({
-  routes
+    routes
 })
 
 export default router

src/views/fdjh/gf/gf.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="page">
+        <iframe class="image_2 pos_2">
+            <img src="../../fdjh/img/fdjh-left.png">
+        </iframe>
+        <div id="iframe1" class="image_3 pos_3" style="">
+            <iframe src="/public#/fdjhgf1" style="width: 100%;height: 100%">
+            </iframe>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'gf-name',
+}
+</script>
+
+<style lang="css" scoped>
+.page {
+    background-image: url('../../fdjh/img/fdjh-bj.png');
+    position: absolute;
+    width: 1920px;
+    height: 1080px;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.image {
+    width: 100vw;
+    height: 4.5833vw;
+}
+
+iframe {
+    border: 0;
+}
+
+#iframe1 {
+    background-image: url(../../fdjh/img/img.png);
+}
+
+.pos {
+    position: absolute;
+    width: 1920px;
+    height: 88px;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 992px;
+}
+
+.image_2 {
+    width: 23.56rem;
+    height: 56.88rem;
+}
+
+.pos_2 {
+    position: absolute;
+    width: 377px;
+    height: 910px;
+    left: 30px;
+    right: 1513px;
+    top: 142px;
+    bottom: 28px;
+}
+
+.image_3 {
+    width: 91.19rem;
+    height: 56.88rem;
+}
+
+.pos_3 {
+    position: absolute;
+    width: 1479px;
+    height: 910px;
+    left: 408px;
+    right: 33px;
+    top: 142px;
+    bottom: 28px;
+}
+</style>

src/views/fdjh/gf/index.vue

@@ -0,0 +1,314 @@
+<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-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-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
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+@font-face {
+  font-family: AliMaMa;//自定义字体名称
+  src: url("../../Articles/font/AlimamaDaoLiTi.ttf")
+}
+
+body {
+  border: 0;
+  background-image: url(../../Articles/img/bgc.png)
+}
+
+.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-form-item__label {
+    color: #fff;
+    font-size: 17px;
+  }
+
+  /deep/ .el-input__inner {
+    background-color: rgba(14, 73, 131);
+    border: 1px solid rgb(64, 153, 255);
+    height: 34px;
+    font-size: 17px;
+  }
+
+  /deep/ .el-table__header {
+    background: url(../../Articles/img/bg1.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-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;
+  }
+
+  /deep/ .el-icon-arrow-up {
+    transform: rotateZ(0deg);
+
+  }
+
+
+  /deep/ .el-icon-arrow-up:before {
+    content: url(../../Articles/img/xiala2.png);
+  }
+
+  /deep/ .el-input__prefix {
+    right: -60px;
+    padding-top: 3px;
+  }
+
+  /deep/ .el-icon-date:before {
+    content: url(../../Articles/img/riqi.png);
+  }
+
+  /deep/ .el-table__header tr {
+    background: url(../../Articles/img/bg1.png);
+    height: 49px;
+
+  }
+
+  /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>

src/views/fdjh/hd/hd.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="page">
+        <iframe class="image_2 pos_2">
+            <img src="../../fdjh/img/fdjh-left.png">
+        </iframe>
+        <div id="iframe1" class="image_3 pos_3" style="">
+            <iframe src="/public#/fdjhhd1" style="width: 100%;height: 100%">
+            </iframe>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'hd-name',
+}
+</script>
+
+<style lang="css" scoped>
+.page {
+    background-image: url('../../fdjh/img/fdjh-bj.png');
+    position: absolute;
+    width: 1920px;
+    height: 1080px;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.image {
+    width: 100vw;
+    height: 4.5833vw;
+}
+
+iframe {
+    border: 0;
+}
+
+#iframe1 {
+    background-image: url(../../fdjh/img/img.png);
+}
+
+.pos {
+    position: absolute;
+    width: 1920px;
+    height: 88px;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 992px;
+}
+
+.image_2 {
+    width: 23.56rem;
+    height: 56.88rem;
+}
+
+.pos_2 {
+    position: absolute;
+    width: 377px;
+    height: 910px;
+    left: 30px;
+    right: 1513px;
+    top: 142px;
+    bottom: 28px;
+}
+
+.image_3 {
+    width: 91.19rem;
+    height: 56.88rem;
+}
+
+.pos_3 {
+    position: absolute;
+    width: 1479px;
+    height: 910px;
+    left: 408px;
+    right: 33px;
+    top: 142px;
+    bottom: 28px;
+}
+</style>

src/views/fdjh/hd/index.vue

@@ -0,0 +1,314 @@
+<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-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-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
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+@font-face {
+  font-family: AliMaMa;//自定义字体名称
+  src: url("../../Articles/font/AlimamaDaoLiTi.ttf")
+}
+
+body {
+  border: 0;
+  background-image: url(../../Articles/img/bgc.png)
+}
+
+.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-form-item__label {
+    color: #fff;
+    font-size: 17px;
+  }
+
+  /deep/ .el-input__inner {
+    background-color: rgba(14, 73, 131);
+    border: 1px solid rgb(64, 153, 255);
+    height: 34px;
+    font-size: 17px;
+  }
+
+  /deep/ .el-table__header {
+    background: url(../../Articles/img/bg1.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-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;
+  }
+
+  /deep/ .el-icon-arrow-up {
+    transform: rotateZ(0deg);
+
+  }
+
+
+  /deep/ .el-icon-arrow-up:before {
+    content: url(../../Articles/img/xiala2.png);
+  }
+
+  /deep/ .el-input__prefix {
+    right: -60px;
+    padding-top: 3px;
+  }
+
+  /deep/ .el-icon-date:before {
+    content: url(../../Articles/img/riqi.png);
+  }
+
+  /deep/ .el-table__header tr {
+    background: url(../../Articles/img/bg1.png);
+    height: 49px;
+
+  }
+
+  /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>

src/views/sjcjjk/fdgf/fdgf.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="page">
+        <iframe class="image_2 pos_2">
+            <img src="../../fdjh/img/fdjh-left.png">
+        </iframe>
+        <div id="iframe1" class="image_3 pos_3" style="">
+            <iframe src="/public#/fdgf1" style="width: 100%;height: 100%">
+            </iframe>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'fdgf-name',
+}
+</script>
+
+<style lang="css" scoped>
+.page {
+    background-image: url('../../fdjh/img/fdjh-bj.png');
+    position: absolute;
+    width: 1920px;
+    height: 1080px;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.image {
+    width: 100vw;
+    height: 4.5833vw;
+}
+
+iframe {
+    border: 0;
+}
+
+#iframe1 {
+    background-image: url(../../fdjh/img/img.png);
+}
+
+.pos {
+    position: absolute;
+    width: 1920px;
+    height: 88px;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 992px;
+}
+
+.image_2 {
+    width: 23.56rem;
+    height: 56.88rem;
+}
+
+.pos_2 {
+    position: absolute;
+    width: 377px;
+    height: 910px;
+    left: 30px;
+    right: 1513px;
+    top: 142px;
+    bottom: 28px;
+}
+
+.image_3 {
+    width: 91.19rem;
+    height: 56.88rem;
+}
+
+.pos_3 {
+    position: absolute;
+    width: 1479px;
+    height: 910px;
+    left: 408px;
+    right: 33px;
+    top: 142px;
+    bottom: 28px;
+}
+</style>

src/views/sjcjjk/fdgf/index.vue

@@ -0,0 +1,199 @@
+<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-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="capacity"
+                >
+                </el-table-column>
+                <el-table-column
+                        align="center"
+                        label="测量时间"
+                        prop="time">
+                </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
+            },
+            tableData: []
+        }
+    },
+    methods: {},
+    mounted() {
+        const tableDataList = require('../../tabledata.json');
+        this.tableData = tableDataList.windDataList
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+@font-face {
+  font-family: AliMaMa;//自定义字体名称
+  src: url("../../Articles/font/AlimamaDaoLiTi.ttf")
+}
+
+body {
+  border: 0;
+  background-image: url(../../Articles/img/bgc.png)
+}
+
+.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-form-item__label {
+    color: #fff;
+    font-size: 17px;
+  }
+
+  /deep/ .el-input__inner {
+    background-color: rgba(14, 73, 131);
+    border: 1px solid rgb(64, 153, 255);
+    height: 34px;
+    font-size: 17px;
+  }
+
+  /deep/ .el-table__header {
+    background: url(../../Articles/img/bg1.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-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;
+  }
+
+  /deep/ .el-icon-arrow-up {
+    transform: rotateZ(0deg);
+
+  }
+
+
+  /deep/ .el-icon-arrow-up:before {
+    content: url(../../Articles/img/xiala2.png);
+  }
+
+  /deep/ .el-input__prefix {
+    right: -60px;
+    padding-top: 3px;
+  }
+
+  /deep/ .el-icon-date:before {
+    content: url(../../Articles/img/riqi.png);
+  }
+
+  /deep/ .el-table__header tr {
+    background: url(../../Articles/img/bg1.png);
+    height: 49px;
+
+  }
+
+  /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>

src/views/sjcjjk/gznfh/gznfh.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="page">
+        <iframe class="image_2 pos_2">
+            <img src="../../fdjh/img/fdjh-left.png">
+        </iframe>
+        <div id="iframe1" class="image_3 pos_3" style="">
+            <iframe src="/public#/gaoznfh1" style="width: 100%;height: 100%">
+            </iframe>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'gznfh-name',
+}
+</script>
+
+<style lang="css" scoped>
+.page {
+    background-image: url('../../fdjh/img/fdjh-bj.png');
+    position: absolute;
+    width: 1920px;
+    height: 1080px;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.image {
+    width: 100vw;
+    height: 4.5833vw;
+}
+
+iframe {
+    border: 0;
+}
+
+#iframe1 {
+    background-image: url(../../fdjh/img/img.png);
+}
+
+.pos {
+    position: absolute;
+    width: 1920px;
+    height: 88px;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 992px;
+}
+
+.image_2 {
+    width: 23.56rem;
+    height: 56.88rem;
+}
+
+.pos_2 {
+    position: absolute;
+    width: 377px;
+    height: 910px;
+    left: 30px;
+    right: 1513px;
+    top: 142px;
+    bottom: 28px;
+}
+
+.image_3 {
+    width: 91.19rem;
+    height: 56.88rem;
+}
+
+.pos_3 {
+    position: absolute;
+    width: 1479px;
+    height: 910px;
+    left: 408px;
+    right: 33px;
+    top: 142px;
+    bottom: 28px;
+}
+</style>

src/views/sjcjjk/gznfh/index.vue

@@ -0,0 +1,199 @@
+<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-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="capacity"
+                >
+                </el-table-column>
+                <el-table-column
+                        align="center"
+                        label="预测时间"
+                        prop="time">
+                </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
+            },
+            tableData: []
+        }
+    },
+    methods: {},
+    mounted() {
+        const tableDataList = require('../../tabledata.json');
+        this.tableData = tableDataList.windDataList
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+@font-face {
+  font-family: AliMaMa;//自定义字体名称
+  src: url("../../Articles/font/AlimamaDaoLiTi.ttf")
+}
+
+body {
+  border: 0;
+  background-image: url(../../Articles/img/bgc.png)
+}
+
+.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-form-item__label {
+    color: #fff;
+    font-size: 17px;
+  }
+
+  /deep/ .el-input__inner {
+    background-color: rgba(14, 73, 131);
+    border: 1px solid rgb(64, 153, 255);
+    height: 34px;
+    font-size: 17px;
+  }
+
+  /deep/ .el-table__header {
+    background: url(../../Articles/img/bg1.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-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;
+  }
+
+  /deep/ .el-icon-arrow-up {
+    transform: rotateZ(0deg);
+
+  }
+
+
+  /deep/ .el-icon-arrow-up:before {
+    content: url(../../Articles/img/xiala2.png);
+  }
+
+  /deep/ .el-input__prefix {
+    right: -60px;
+    padding-top: 3px;
+  }
+
+  /deep/ .el-icon-date:before {
+    content: url(../../Articles/img/riqi.png);
+  }
+
+  /deep/ .el-table__header tr {
+    background: url(../../Articles/img/bg1.png);
+    height: 49px;
+
+  }
+
+  /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>

src/views/sjcjjk/hd/hd.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="page">
+        <iframe class="image_2 pos_2">
+            <img src="../../fdjh/img/fdjh-left.png">
+        </iframe>
+        <div id="iframe1" class="image_3 pos_3" style="">
+            <iframe src="/public#/hd1" style="width: 100%;height: 100%">
+            </iframe>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'hd-name',
+}
+</script>
+
+<style lang="css" scoped>
+.page {
+    background-image: url('../../fdjh/img/fdjh-bj.png');
+    position: absolute;
+    width: 1920px;
+    height: 1080px;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.image {
+    width: 100vw;
+    height: 4.5833vw;
+}
+
+iframe {
+    border: 0;
+}
+
+#iframe1 {
+    background-image: url(../../fdjh/img/img.png);
+}
+
+.pos {
+    position: absolute;
+    width: 1920px;
+    height: 88px;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 992px;
+}
+
+.image_2 {
+    width: 23.56rem;
+    height: 56.88rem;
+}
+
+.pos_2 {
+    position: absolute;
+    width: 377px;
+    height: 910px;
+    left: 30px;
+    right: 1513px;
+    top: 142px;
+    bottom: 28px;
+}
+
+.image_3 {
+    width: 91.19rem;
+    height: 56.88rem;
+}
+
+.pos_3 {
+    position: absolute;
+    width: 1479px;
+    height: 910px;
+    left: 408px;
+    right: 33px;
+    top: 142px;
+    bottom: 28px;
+}
+</style>

src/views/sjcjjk/hd/index.vue

@@ -0,0 +1,199 @@
+<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-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="capacity"
+                >
+                </el-table-column>
+                <el-table-column
+                        align="center"
+                        label="测量时间"
+                        prop="time">
+                </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
+            },
+            tableData: []
+        }
+    },
+    methods: {},
+    mounted() {
+        const tableDataList = require('../../tabledata.json');
+        this.tableData = tableDataList.windDataList
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+@font-face {
+  font-family: AliMaMa;//自定义字体名称
+  src: url("../../Articles/font/AlimamaDaoLiTi.ttf")
+}
+
+body {
+  border: 0;
+  background-image: url(../../Articles/img/bgc.png)
+}
+
+.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-form-item__label {
+    color: #fff;
+    font-size: 17px;
+  }
+
+  /deep/ .el-input__inner {
+    background-color: rgba(14, 73, 131);
+    border: 1px solid rgb(64, 153, 255);
+    height: 34px;
+    font-size: 17px;
+  }
+
+  /deep/ .el-table__header {
+    background: url(../../Articles/img/bg1.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-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;
+  }
+
+  /deep/ .el-icon-arrow-up {
+    transform: rotateZ(0deg);
+
+  }
+
+
+  /deep/ .el-icon-arrow-up:before {
+    content: url(../../Articles/img/xiala2.png);
+  }
+
+  /deep/ .el-input__prefix {
+    right: -60px;
+    padding-top: 3px;
+  }
+
+  /deep/ .el-icon-date:before {
+    content: url(../../Articles/img/riqi.png);
+  }
+
+  /deep/ .el-table__header tr {
+    background: url(../../Articles/img/bg1.png);
+    height: 49px;
+
+  }
+
+  /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>

src/views/sjcjjk/ptfh/index.vue

@@ -0,0 +1,199 @@
+<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-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="capacity"
+                >
+                </el-table-column>
+                <el-table-column
+                        align="center"
+                        label="预测时间"
+                        prop="time">
+                </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
+            },
+            tableData: []
+        }
+    },
+    methods: {},
+    mounted() {
+        const tableDataList = require('../../tabledata.json');
+        this.tableData = tableDataList.windDataList
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+@font-face {
+  font-family: AliMaMa;//自定义字体名称
+  src: url("../../Articles/font/AlimamaDaoLiTi.ttf")
+}
+
+body {
+  border: 0;
+  background-image: url(../../Articles/img/bgc.png)
+}
+
+.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-form-item__label {
+    color: #fff;
+    font-size: 17px;
+  }
+
+  /deep/ .el-input__inner {
+    background-color: rgba(14, 73, 131);
+    border: 1px solid rgb(64, 153, 255);
+    height: 34px;
+    font-size: 17px;
+  }
+
+  /deep/ .el-table__header {
+    background: url(../../Articles/img/bg1.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-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;
+  }
+
+  /deep/ .el-icon-arrow-up {
+    transform: rotateZ(0deg);
+
+  }
+
+
+  /deep/ .el-icon-arrow-up:before {
+    content: url(../../Articles/img/xiala2.png);
+  }
+
+  /deep/ .el-input__prefix {
+    right: -60px;
+    padding-top: 3px;
+  }
+
+  /deep/ .el-icon-date:before {
+    content: url(../../Articles/img/riqi.png);
+  }
+
+  /deep/ .el-table__header tr {
+    background: url(../../Articles/img/bg1.png);
+    height: 49px;
+
+  }
+
+  /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>

src/views/sjcjjk/ptfh/ptfh.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="page">
+        <iframe class="image_2 pos_2">
+            <img src="../../fdjh/img/fdjh-left.png">
+        </iframe>
+        <div id="iframe1" class="image_3 pos_3" style="">
+            <iframe src="/public#/ptfh1" style="width: 100%;height: 100%">
+            </iframe>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ptfh-name',
+}
+</script>
+
+<style lang="css" scoped>
+.page {
+    background-image: url('../../fdjh/img/fdjh-bj.png');
+    position: absolute;
+    width: 1920px;
+    height: 1080px;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.image {
+    width: 100vw;
+    height: 4.5833vw;
+}
+
+iframe {
+    border: 0;
+}
+
+#iframe1 {
+    background-image: url(../../fdjh/img/img.png);
+}
+
+.pos {
+    position: absolute;
+    width: 1920px;
+    height: 88px;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 992px;
+}
+
+.image_2 {
+    width: 23.56rem;
+    height: 56.88rem;
+}
+
+.pos_2 {
+    position: absolute;
+    width: 377px;
+    height: 910px;
+    left: 30px;
+    right: 1513px;
+    top: 142px;
+    bottom: 28px;
+}
+
+.image_3 {
+    width: 91.19rem;
+    height: 56.88rem;
+}
+
+.pos_3 {
+    position: absolute;
+    width: 1479px;
+    height: 910px;
+    left: 408px;
+    right: 33px;
+    top: 142px;
+    bottom: 28px;
+}
+</style>

src/views/xndc/index.vue

@@ -19,6 +19,7 @@
           <div class="barTitle">
             风电发电功率
           </div>
+          <RightTop/>
         </div>
       </div>
       <div class="main-card">
@@ -26,6 +27,7 @@
           <div class="barTitle">
             负荷用电功率
           </div>
+          <LeftMiddle/>
         </div>
         <div class="barBox">
           <div class="barTitle">
@@ -36,6 +38,7 @@
           <div class="barTitle">
             光伏发电功率
           </div>
+          <RightMiddle/>
         </div>
       </div>
       <div class="main-card">
@@ -43,6 +46,7 @@
           <div class="barTitle">
             储能发电/用电功率
           </div>
+          <LeftBottom/>
         </div>
         <div class="barBox">
           <div class="barTitle">
@@ -53,6 +57,7 @@
           <div class="barTitle">
             火电发电功率
           </div>
+          <RightBottom/>
         </div>
       </div>
     </div>
@@ -60,7 +65,20 @@
 </template>
 
 <script>
+import LeftMiddle from "./modules/left-middle"
+import LeftBottom from "./modules/left-bottom"
+import RightTop from "./modules/right-top"
+import RightMiddle from "./modules/right-middle"
+import RightBottom from "./modules/right-bottom"
+
 export default {
+  components: {
+    LeftMiddle,
+    LeftBottom,
+    RightTop,
+    RightMiddle,
+    RightBottom
+  }
 }
 </script>
 

src/views/xndc/modules/left-bottom.vue

@@ -0,0 +1,263 @@
+<template>
+  <div class="left_bottom">
+    <Echart
+        :options="options"
+        id="leftBottomChart"
+        class="echarts_top"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import { graphic } from "echarts";
+export default {
+  data() {
+    return {
+      options: {},
+    };
+  },
+  props: {},
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      this.init({
+        "timePoints": ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+          '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+          '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+          '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
+        "jhData": [
+          1060,
+          1020,
+          1000,
+          970,
+          950,
+          980,
+          995,
+          1020,
+          1050,
+          1080,
+          1140,
+          1180,
+          1190,
+          1100,
+          1180,
+          1200,
+          1240,
+          1280,
+          1255,
+          1240,
+          1250,
+          1260,
+          1140,
+          1050
+        ],
+        "sfData": [
+          1100,
+          1085,
+          1060,
+          1032,
+          980,
+          1020,
+          1045,
+          1030,
+          1095,
+          1120,
+          1180,
+          1220,
+          1235
+        ],
+        "ycData": [
+          1160,
+          1120,
+          1100,
+          1070,
+          1050,
+          1080,
+          1095,
+          1120,
+          1150,
+          1180,
+          1240,
+          1300,
+          1330,
+          1200,
+          1280,
+          1300,
+          1340,
+          1380,
+          1355,
+          1340,
+          1350,
+          1360,
+          1240,
+          1150
+        ]
+      })
+    },
+    init(newData) {
+      this.options = {
+        title: {
+          subtext: "MW",
+          left: '5%',
+          top: '5px',
+          // left: 15,// 距离左边位置
+          // top: -10,// 距离上面位置
+          subtextStyle: { // 设置二级标题的样式
+            color: "#efefef"
+          }
+        },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,.6)",
+          borderColor: "rgba(147, 235, 248, .8)",
+          textStyle: {
+            color: "#efefef",
+          },
+        },
+        legend: {
+          textStyle: {
+            color: "#efefef",
+          },
+          itemStyle: {
+            // 去掉图例上的圆圈
+            opacity: 0
+          },
+          top: "20",
+        },
+        grid: {
+          top: '20%',
+          left: '6%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          data: newData.timePoints,
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          scale: true,//yAxis 刻度 自适应 最大值/最小值
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#efefef",
+              type: 'dashed'
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+            },
+          },
+          // // y轴横线
+          // axisTick: {
+          //   show: true
+          // }
+        },
+        series: [
+          {
+            name: "计划值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            itemStyle: {
+              color: "#f0e62f",
+            },
+            data: newData.jhData.sort(function () {
+              return Math.random() - 0.5
+            }),
+          },
+          {
+            name: "实发值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            itemStyle: {
+              color: "#2ff042",
+            },
+            label: {
+              show: true,
+              position: 'right',
+              textStyle: {
+                fontSize: 16,
+                fontWeight: 1000,
+                color: "#2ff042"
+              },
+              formatter: (params) => {
+                if (newData.sfData.length - 1 == params.dataIndex) {
+                  return params.value
+                } else {
+                  return ""
+                }
+              },
+            },
+            markLine: {
+              // 锁定最后一个元素展示纵向虚线
+              symbol: ['none', 'none'],
+              label: { show: false },
+              data: [{ xAxis: newData.sfData.length - 1 }],
+            },
+            areaStyle: {
+              //右，下，左，上
+              color: new graphic.LinearGradient(
+                  0, 0, 0, 1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(9,243,13,0.74)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(9,202,243,.0)",
+                    },
+                  ],
+                  false
+              ),
+            },
+            data: newData.sfData.sort(function () {
+              return Math.random() - 0.5
+            }),
+          },
+          // {
+          //   name: "预测值",
+          //   type: "line",
+          //   smooth: true,
+          //   // showAllSymbol: true,
+          //   // symbol: "emptyCircle",
+          //   symbolSize: 0,
+          //   lineStyle: {
+          //     color: "#f0692f",
+          //     type: 'dashed'
+          //   },
+          //   data: newData.ycData,
+          // },
+        ],
+      };
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.left_bottom {
+  width: 100%;
+  height: 100%;
+
+  .echarts_top {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/xndc/modules/left-middle.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="left_middle">
+    <Echart
+        :options="options"
+        id="leftMiddleChart"
+        class="echarts_top"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import { graphic } from "echarts";
+export default {
+  data() {
+    return {
+      options: {},
+    };
+  },
+  props: {},
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      this.init({
+        "timePoints": ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+          '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+          '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+          '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
+        "jhData": [
+          1060,
+          1020,
+          1000,
+          970,
+          950,
+          980,
+          995,
+          1020,
+          1050,
+          1080,
+          1140,
+          1180,
+          1190,
+          1100,
+          1180,
+          1200,
+          1240,
+          1280,
+          1255,
+          1240,
+          1250,
+          1260,
+          1140,
+          1050
+        ],
+        "sfData": [
+          1100,
+          1085,
+          1060,
+          1032,
+          980,
+          1020,
+          1045,
+          1030,
+          1095,
+          1120,
+          1180,
+          1220,
+          1235
+        ],
+        "ycData": [
+          1160,
+          1120,
+          1100,
+          1070,
+          1050,
+          1080,
+          1095,
+          1120,
+          1150,
+          1180,
+          1240,
+          1300,
+          1330,
+          1200,
+          1280,
+          1300,
+          1340,
+          1380,
+          1355,
+          1340,
+          1350,
+          1360,
+          1240,
+          1150
+        ]
+      })
+    },
+    init(newData) {
+      this.options = {
+        title: {
+          subtext: "MW",
+          left: '5%',
+          top: '5px',
+          // left: 15,// 距离左边位置
+          // top: -10,// 距离上面位置
+          subtextStyle: { // 设置二级标题的样式
+            color: "#efefef"
+          }
+        },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,.6)",
+          borderColor: "rgba(147, 235, 248, .8)",
+          textStyle: {
+            color: "#efefef",
+          },
+        },
+        legend: {
+          textStyle: {
+            color: "#efefef",
+          },
+          itemStyle: {
+            // 去掉图例上的圆圈
+            opacity: 0
+          },
+          top: "20",
+        },
+        grid: {
+          top: '20%',
+          left: '6%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          data: newData.timePoints,
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          scale: true,//yAxis 刻度 自适应 最大值/最小值
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#efefef",
+              type: 'dashed'
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+            },
+          },
+          // // y轴横线
+          // axisTick: {
+          //   show: true
+          // }
+        },
+        series: [
+          {
+            name: "计划值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            itemStyle: {
+              color: "#f0e62f",
+            },
+            data: newData.jhData.sort(function () {
+              return Math.random() - 0.5
+            }),
+          },
+          {
+            name: "实测值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            itemStyle: {
+              color: "#2ff042",
+            },
+            label: {
+              show: true,
+              position: 'right',
+              textStyle: {
+                fontSize: 16,
+                fontWeight: 1000,
+                color: "#2ff042"
+              },
+              formatter: (params) => {
+                if (newData.sfData.length - 1 == params.dataIndex) {
+                  return params.value
+                } else {
+                  return ""
+                }
+              },
+            },
+            markLine: {
+              // 锁定最后一个元素展示纵向虚线
+              symbol: ['none', 'none'],
+              label: { show: false },
+              data: [{ xAxis: newData.sfData.length - 1 }],
+            },
+            areaStyle: {
+              //右，下，左，上
+              color: new graphic.LinearGradient(
+                  0, 0, 0, 1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(9,243,13,0.74)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(9,202,243,.0)",
+                    },
+                  ],
+                  false
+              ),
+            },
+            data: newData.sfData.sort(function () {
+              return Math.random() - 0.5
+            }),
+          },
+          {
+            name: "预测值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            lineStyle: {
+              color: "#f0692f",
+              type: 'dashed'
+            },
+            data: newData.ycData.sort(function () {
+              return Math.random() - 0.5
+            }),
+          },
+        ],
+      };
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.left_middle {
+  width: 100%;
+  height: 100%;
+
+  .echarts_top {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/xndc/modules/right-bottom.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="right_bottom">
+    <Echart
+        :options="options"
+        id="rightMiddleChart"
+        class="echarts_top"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import { graphic } from "echarts";
+export default {
+  data() {
+    return {
+      options: {},
+    };
+  },
+  props: {},
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      this.init({
+        "timePoints": ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+          '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+          '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+          '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
+        "jhData": [
+          1060,
+          1020,
+          1000,
+          970,
+          950,
+          980,
+          995,
+          1020,
+          1050,
+          1080,
+          1140,
+          1180,
+          1190,
+          1100,
+          1180,
+          1200,
+          1240,
+          1280,
+          1255,
+          1240,
+          1250,
+          1260,
+          1140,
+          1050
+        ],
+        "sfData": [
+          1100,
+          1085,
+          1060,
+          1032,
+          980,
+          1020,
+          1045,
+          1030,
+          1095,
+          1120,
+          1180,
+          1220,
+          1235
+        ],
+        "ycData": [
+          1160,
+          1120,
+          1100,
+          1070,
+          1050,
+          1080,
+          1095,
+          1120,
+          1150,
+          1180,
+          1240,
+          1300,
+          1330,
+          1200,
+          1280,
+          1300,
+          1340,
+          1380,
+          1355,
+          1340,
+          1350,
+          1360,
+          1240,
+          1150
+        ]
+      })
+    },
+    init(newData) {
+      this.options = {
+        title: {
+          subtext: "MW",
+          left: '5%',
+          top: '5px',
+          // left: 15,// 距离左边位置
+          // top: -10,// 距离上面位置
+          subtextStyle: { // 设置二级标题的样式
+            color: "#efefef"
+          }
+        },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,.6)",
+          borderColor: "rgba(147, 235, 248, .8)",
+          textStyle: {
+            color: "#efefef",
+          },
+        },
+        legend: {
+          textStyle: {
+            color: "#efefef",
+          },
+          itemStyle: {
+            // 去掉图例上的圆圈
+            opacity: 0
+          },
+          top: "20",
+        },
+        grid: {
+          top: '20%',
+          left: '6%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          data: newData.timePoints,
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          scale: true,//yAxis 刻度 自适应 最大值/最小值
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#efefef",
+              type: 'dashed'
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+            },
+          },
+          // // y轴横线
+          // axisTick: {
+          //   show: true
+          // }
+        },
+        series: [
+          {
+            name: "计划值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            itemStyle: {
+              color: "#f0e62f",
+            },
+            data: newData.jhData.sort(function () {
+              return Math.random() - 0.5
+            }),
+          },
+          {
+            name: "实发值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            itemStyle: {
+              color: "#f0692f",
+            },
+            label: {
+              show: true,
+              position: 'right',
+              textStyle: {
+                fontSize: 16,
+                fontWeight: 1000,
+                color: "#f0862f"
+              },
+              formatter: (params) => {
+                if (newData.sfData.length - 1 == params.dataIndex) {
+                  return params.value
+                } else {
+                  return ""
+                }
+              },
+            },
+            markLine: {
+              // 锁定最后一个元素展示纵向虚线
+              symbol: ['none', 'none'],
+              label: { show: false },
+              data: [{ xAxis: newData.sfData.length - 1 }],
+            },
+            areaStyle: {
+              //右，下，左，上
+              color: new graphic.LinearGradient(
+                  0, 0, 0, 1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(249,128,58,0.9)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(9,202,243,.0)",
+                    },
+                  ],
+                  false
+              ),
+            },
+            data: newData.sfData.sort(function () {
+              return Math.random() - 0.5
+            }),
+          },
+        ],
+      };
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.right_bottom {
+  width: 100%;
+  height: 100%;
+
+  .echarts_top {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/xndc/modules/right-middle.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="right_middle">
+    <Echart
+        :options="options"
+        id="rightMiddleChart"
+        class="echarts_top"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import { graphic } from "echarts";
+export default {
+  data() {
+    return {
+      options: {},
+    };
+  },
+  props: {},
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      this.init({
+        "timePoints": ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+          '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+          '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+          '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
+        "jhData": [
+          1060,
+          1020,
+          1000,
+          970,
+          950,
+          980,
+          995,
+          1020,
+          1050,
+          1080,
+          1140,
+          1200,
+          1160,
+          1100,
+          1180,
+          1200,
+          1240,
+          1280,
+          1255,
+          1240,
+          1250,
+          1260,
+          1140,
+          1050
+        ],
+        "sfData": [
+          1100,
+          1085,
+          1060,
+          1032,
+          980,
+          1020,
+          1045,
+          1030,
+          1095,
+          1120,
+          1180,
+          1220,
+          1235
+        ],
+        "ycData": [
+          1160,
+          1120,
+          1100,
+          1070,
+          1050,
+          1080,
+          1095,
+          1120,
+          1150,
+          1180,
+          1240,
+          1300,
+          1330,
+          1200,
+          1280,
+          1300,
+          1340,
+          1380,
+          1355,
+          1340,
+          1350,
+          1360,
+          1240,
+          1150
+        ]
+      })
+    },
+    init(newData) {
+      this.options = {
+        title: {
+          subtext: "MW",
+          left: '5%',
+          top: '5px',
+          // left: 15,// 距离左边位置
+          // top: -10,// 距离上面位置
+          subtextStyle: { // 设置二级标题的样式
+            color: "#efefef"
+          }
+        },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,.6)",
+          borderColor: "rgba(147, 235, 248, .8)",
+          textStyle: {
+            color: "#efefef",
+          },
+        },
+        legend: {
+          textStyle: {
+            color: "#efefef",
+          },
+          itemStyle: {
+            // 去掉图例上的圆圈
+            opacity: 0
+          },
+          top: "20",
+        },
+        grid: {
+          top: '20%',
+          left: '6%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          data: newData.timePoints,
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          scale: true,//yAxis 刻度 自适应 最大值/最小值
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#efefef",
+              type: 'dashed'
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+            },
+          },
+          // // y轴横线
+          // axisTick: {
+          //   show: true
+          // }
+        },
+        series: [
+          {
+            name: "计划值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            itemStyle: {
+              color: "#f0e62f",
+            },
+            data: newData.jhData.sort(function () {
+              return Math.random() - 0.5
+            }),
+          },
+          {
+            name: "实发值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            itemStyle: {
+              color: "#2ff1e7",
+            },
+            label: {
+              show: true,
+              position: 'right',
+              textStyle: {
+                fontSize: 16,
+                fontWeight: 1000,
+                color: "#2ff0bd"
+              },
+              formatter: (params) => {
+                if (newData.sfData.length - 1 == params.dataIndex) {
+                  return params.value
+                } else {
+                  return ""
+                }
+              },
+            },
+            markLine: {
+              // 锁定最后一个元素展示纵向虚线
+              symbol: ['none', 'none'],
+              label: { show: false },
+              data: [{ xAxis: newData.sfData.length - 1 }],
+            },
+            areaStyle: {
+              //右，下，左，上
+              color: new graphic.LinearGradient(
+                  0, 0, 0, 1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(58,249,224,0.85)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(9,202,243,.0)",
+                    },
+                  ],
+                  false
+              ),
+            },
+            data: newData.sfData.sort(function () {
+              return Math.random() - 0.5
+            }),
+          },
+          {
+            name: "预测值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            lineStyle: {
+              color: "#f0692f",
+              type: 'dashed'
+            },
+            data: newData.ycData.sort(function () {
+              return Math.random() - 0.5
+            }),
+          },
+        ],
+      };
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.right_middle {
+  width: 100%;
+  height: 100%;
+
+  .echarts_top {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/xndc/modules/right-top.vue

@@ -0,0 +1,259 @@
+<template>
+  <div class="right_top">
+    <Echart
+        :options="options"
+        id="rightTopChart"
+        class="echarts_top"
+    ></Echart>
+  </div>
+</template>
+
+<script>
+import { graphic } from "echarts";
+export default {
+  data() {
+    return {
+      options: {},
+    };
+  },
+  props: {},
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData() {
+      this.init({
+        "timePoints": ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
+          '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
+          '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
+          '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
+        "jhData": [
+          1060,
+          1020,
+          1000,
+          970,
+          950,
+          980,
+          995,
+          1020,
+          1050,
+          1080,
+          1140,
+          1180,
+          1190,
+          1100,
+          1180,
+          1200,
+          1240,
+          1280,
+          1255,
+          1240,
+          1250,
+          1260,
+          1140,
+          1050
+        ],
+        "scData": [
+          1100,
+          1085,
+          1060,
+          1032,
+          980,
+          1020,
+          1045,
+          1030,
+          1095,
+          1120,
+          1180,
+          1220,
+          1235
+        ],
+        "ycData": [
+          1160,
+          1120,
+          1100,
+          1070,
+          1050,
+          1080,
+          1095,
+          1120,
+          1150,
+          1180,
+          1240,
+          1300,
+          1330,
+          1200,
+          1280,
+          1300,
+          1340,
+          1380,
+          1355,
+          1340,
+          1350,
+          1360,
+          1240,
+          1150
+        ]
+      })
+    },
+    init(newData) {
+      this.options = {
+        title: {
+          subtext: "MW",
+          left: '5%',
+          top: '5px',
+          // left: 15,// 距离左边位置
+          // top: -10,// 距离上面位置
+          subtextStyle: { // 设置二级标题的样式
+            color: "#efefef"
+          }
+        },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,.6)",
+          borderColor: "rgba(147, 235, 248, .8)",
+          textStyle: {
+            color: "#efefef",
+          },
+        },
+        legend: {
+          textStyle: {
+            color: "#efefef",
+          },
+          itemStyle: {
+            // 去掉图例上的圆圈
+            opacity: 0
+          },
+          top: "20",
+        },
+        grid: {
+          top: '20%',
+          left: '6%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          data: newData.timePoints,
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          scale: true,//yAxis 刻度 自适应 最大值/最小值
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#efefef",
+              type: 'dashed'
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+            },
+          },
+          // // y轴横线
+          // axisTick: {
+          //   show: true
+          // }
+        },
+        series: [
+          {
+            name: "计划值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            itemStyle: {
+              color: "#f0e62f",
+            },
+            data: newData.jhData,
+          },
+          {
+            name: "实测值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            itemStyle: {
+              color: "#2ff042",
+            },
+            label: {
+              show: true,
+              position: 'right',
+              textStyle: {
+                fontSize: 16,
+                fontWeight: 1000,
+                color: "#2ff042"
+              },
+              formatter: (params) => {
+                if (newData.scData.length - 1 == params.dataIndex) {
+                  return params.value
+                } else {
+                  return ""
+                }
+              },
+            },
+            markLine: {
+              // 锁定最后一个元素展示纵向虚线
+              symbol: ['none', 'none'],
+              label: { show: false },
+              data: [{ xAxis: newData.scData.length - 1 }],
+            },
+            areaStyle: {
+              //右，下，左，上
+              color: new graphic.LinearGradient(
+                  0, 0, 0, 1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(9,243,13,0.74)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(9,202,243,.0)",
+                    },
+                  ],
+                  false
+              ),
+            },
+            data: newData.scData,
+          },
+          {
+            name: "预测值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            lineStyle: {
+              color: "#f0692f",
+              type: 'dashed'
+            },
+            data: newData.ycData,
+          },
+        ],
+      };
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.right_top {
+  width: 100%;
+  height: 100%;
+
+  .echarts_top {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/xtpz/xtpz.vue

@@ -1,14 +1,345 @@
 <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>
 </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%;
+  isplay: flex;
+  flex-direction: column;
+  margin: 0 !important;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  /*height:600px;*/
+  max-height: calc(100% - 200px);
+  max-width: calc(100% - 30px);
+}
+
+/deep/ .el-dialog .el-dialog__body {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  justify-content: center;
+}
+
+.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>

src/views/xtpz/xtpzdata.json

@@ -0,0 +1,40 @@
+{
+"xtpzDataList": [
+{
+"xtpzName": "汗海-庆云断面",
+"xtpzStatus": "启用",
+"from": "汗海",
+"to": "庆云",
+"height": "200",
+"low": "250"
+},{
+    "xtpzName": "汗海-庆云断面",
+    "xtpzStatus": "启用",
+    "from": "汗海",
+    "to": "庆云",
+    "height": "200",
+    "low": "250"
+},{
+    "xtpzName": "汗海-庆云断面",
+    "xtpzStatus": "启用",
+    "from": "汗海",
+    "to": "庆云",
+    "height": "200",
+    "low": "250"
+},{
+    "xtpzName": "汗海-庆云断面",
+    "xtpzStatus": "启用",
+    "from": "汗海",
+    "to": "庆云",
+    "height": "200",
+    "low": "250"
+},{
+    "xtpzName": "汗海-庆云断面",
+    "xtpzStatus": "启用",
+    "from": "汗海",
+    "to": "庆云",
+    "height": "200",
+    "low": "250"
+}
+]
+}

src/views/ydjhdjk/gznfh/gznfh.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="page">
+        <iframe class="image_2 pos_2">
+            <img src="../../fdjh/img/fdjh-left.png">
+        </iframe>
+        <div id="iframe1" class="image_3 pos_3" style="">
+            <iframe src="/public#/gznfh1" style="width: 100%;height: 100%">
+            </iframe>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'gznfh-name',
+}
+</script>
+
+<style lang="css" scoped>
+.page {
+    background-image: url('../../fdjh/img/fdjh-bj.png');
+    position: absolute;
+    width: 1920px;
+    height: 1080px;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.image {
+    width: 100vw;
+    height: 4.5833vw;
+}
+
+iframe {
+    border: 0;
+}
+
+#iframe1 {
+    background-image: url(../../fdjh/img/img.png);
+}
+
+.pos {
+    position: absolute;
+    width: 1920px;
+    height: 88px;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 992px;
+}
+
+.image_2 {
+    width: 23.56rem;
+    height: 56.88rem;
+}
+
+.pos_2 {
+    position: absolute;
+    width: 377px;
+    height: 910px;
+    left: 30px;
+    right: 1513px;
+    top: 142px;
+    bottom: 28px;
+}
+
+.image_3 {
+    width: 91.19rem;
+    height: 56.88rem;
+}
+
+.pos_3 {
+    position: absolute;
+    width: 1479px;
+    height: 910px;
+    left: 408px;
+    right: 33px;
+    top: 142px;
+    bottom: 28px;
+}
+</style>

src/views/ydjhdjk/gznfh/index.vue

@@ -0,0 +1,291 @@
+<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-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-table-column
+                        align="center"
+                        label="节点名称"
+                        prop="stationName"
+                        width="270px"
+                >
+                </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
+            },
+            tableData: []
+        }
+    },
+    methods: {},
+    mounted() {
+        const tableDataList = require('../../tabledata.json');
+        this.tableData = tableDataList.windDataList
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+@font-face {
+  font-family: AliMaMa;//自定义字体名称
+  src: url("../../Articles/font/AlimamaDaoLiTi.ttf")
+}
+
+body {
+  border: 0;
+  background-image: url(../../Articles/img/bgc.png)
+}
+
+.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-form-item__label {
+    color: #fff;
+    font-size: 17px;
+  }
+
+  /deep/ .el-input__inner {
+    background-color: rgba(14, 73, 131);
+    border: 1px solid rgb(64, 153, 255);
+    height: 34px;
+    font-size: 17px;
+  }
+
+  /deep/ .el-table__header {
+    background: url(../../Articles/img/bg1.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-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;
+  }
+
+  /deep/ .el-icon-arrow-up {
+    transform: rotateZ(0deg);
+
+  }
+
+
+  /deep/ .el-icon-arrow-up:before {
+    content: url(../../Articles/img/xiala2.png);
+  }
+
+  /deep/ .el-input__prefix {
+    right: -60px;
+    padding-top: 3px;
+  }
+
+  /deep/ .el-icon-date:before {
+    content: url(../../Articles/img/riqi.png);
+  }
+
+  /deep/ .el-table__header tr {
+    background: url(../../Articles/img/bg1.png);
+    height: 49px;
+
+  }
+
+  /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>

src/views/ystjjk/dm/dm.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="page">
+        <iframe class="image_2 pos_2">
+            <img src="../../fdjh/img/fdjh-left.png">
+        </iframe>
+        <div id="iframe1" class="image_3 pos_3" style="">
+            <iframe src="/public#/dm1" style="width: 100%;height: 100%">
+            </iframe>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'dm-name',
+}
+</script>
+
+<style lang="css" scoped>
+.page {
+    background-image: url('../../fdjh/img/fdjh-bj.png');
+    position: absolute;
+    width: 1920px;
+    height: 1080px;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.image {
+    width: 100vw;
+    height: 4.5833vw;
+}
+
+iframe {
+    border: 0;
+}
+
+#iframe1 {
+    background-image: url(../../fdjh/img/img.png);
+}
+
+.pos {
+    position: absolute;
+    width: 1920px;
+    height: 88px;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 992px;
+}
+
+.image_2 {
+    width: 23.56rem;
+    height: 56.88rem;
+}
+
+.pos_2 {
+    position: absolute;
+    width: 377px;
+    height: 910px;
+    left: 30px;
+    right: 1513px;
+    top: 142px;
+    bottom: 28px;
+}
+
+.image_3 {
+    width: 91.19rem;
+    height: 56.88rem;
+}
+
+.pos_3 {
+    position: absolute;
+    width: 1479px;
+    height: 910px;
+    left: 408px;
+    right: 33px;
+    top: 142px;
+    bottom: 28px;
+}
+</style>

src/views/ystjjk/dm/index.vue

@@ -0,0 +1,209 @@
+<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-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="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="capacity">
+                </el-table-column>
+                <el-table-column
+                        align="center"
+                        label="实测值偏差值"
+                        prop="capacity">
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'Article-Index',
+    data() {
+        return {
+            form: {
+                taskNumber: '',
+                date: '',
+                current: 1,
+                size: 10
+            },
+            tableData: []
+        }
+    },
+    methods: {},
+    mounted() {
+        const tableDataList = require('../../tabledata.json');
+        this.tableData = tableDataList.windDataList
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+@font-face {
+  font-family: AliMaMa;//自定义字体名称
+  src: url("../../Articles/font/AlimamaDaoLiTi.ttf")
+}
+
+body {
+  border: 0;
+  background-image: url(../../Articles/img/bgc.png)
+}
+
+.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-form-item__label {
+    color: #fff;
+    font-size: 17px;
+  }
+
+  /deep/ .el-input__inner {
+    background-color: rgba(14, 73, 131);
+    border: 1px solid rgb(64, 153, 255);
+    height: 34px;
+    font-size: 17px;
+  }
+
+  /deep/ .el-table__header {
+    background: url(../../Articles/img/bg1.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-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;
+  }
+
+  /deep/ .el-icon-arrow-up {
+    transform: rotateZ(0deg);
+
+  }
+
+
+  /deep/ .el-icon-arrow-up:before {
+    content: url(../../Articles/img/xiala2.png);
+  }
+
+  /deep/ .el-input__prefix {
+    right: -60px;
+    padding-top: 3px;
+  }
+
+  /deep/ .el-icon-date:before {
+    content: url(../../Articles/img/riqi.png);
+  }
+
+  /deep/ .el-table__header tr {
+    background: url(../../Articles/img/bg1.png);
+    height: 49px;
+
+  }
+
+  /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>

src/views/ystjjk/llx/index.vue

@@ -0,0 +1,209 @@
+<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-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="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="capacity">
+                </el-table-column>
+                <el-table-column
+                        align="center"
+                        label="实测值偏差值"
+                        prop="capacity">
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'Article-Index',
+    data() {
+        return {
+            form: {
+                taskNumber: '',
+                date: '',
+                current: 1,
+                size: 10
+            },
+            tableData: []
+        }
+    },
+    methods: {},
+    mounted() {
+        const tableDataList = require('../../tabledata.json');
+        this.tableData = tableDataList.windDataList
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+@font-face {
+  font-family: AliMaMa;//自定义字体名称
+  src: url("../../Articles/font/AlimamaDaoLiTi.ttf")
+}
+
+body {
+  border: 0;
+  background-image: url(../../Articles/img/bgc.png)
+}
+
+.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-form-item__label {
+    color: #fff;
+    font-size: 17px;
+  }
+
+  /deep/ .el-input__inner {
+    background-color: rgba(14, 73, 131);
+    border: 1px solid rgb(64, 153, 255);
+    height: 34px;
+    font-size: 17px;
+  }
+
+  /deep/ .el-table__header {
+    background: url(../../Articles/img/bg1.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-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;
+  }
+
+  /deep/ .el-icon-arrow-up {
+    transform: rotateZ(0deg);
+
+  }
+
+
+  /deep/ .el-icon-arrow-up:before {
+    content: url(../../Articles/img/xiala2.png);
+  }
+
+  /deep/ .el-input__prefix {
+    right: -60px;
+    padding-top: 3px;
+  }
+
+  /deep/ .el-icon-date:before {
+    content: url(../../Articles/img/riqi.png);
+  }
+
+  /deep/ .el-table__header tr {
+    background: url(../../Articles/img/bg1.png);
+    height: 49px;
+
+  }
+
+  /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>

src/views/ystjjk/llx/llx.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="page">
+        <iframe class="image_2 pos_2">
+            <img src="../../fdjh/img/fdjh-left.png">
+        </iframe>
+        <div id="iframe1" class="image_3 pos_3" style="">
+            <iframe src="/public#/llx1" style="width: 100%;height: 100%">
+            </iframe>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'llx-name',
+}
+</script>
+
+<style lang="css" scoped>
+.page {
+    background-image: url('../../fdjh/img/fdjh-bj.png');
+    position: absolute;
+    width: 1920px;
+    height: 1080px;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.image {
+    width: 100vw;
+    height: 4.5833vw;
+}
+
+iframe {
+    border: 0;
+}
+
+#iframe1 {
+    background-image: url(../../fdjh/img/img.png);
+}
+
+.pos {
+    position: absolute;
+    width: 1920px;
+    height: 88px;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 992px;
+}
+
+.image_2 {
+    width: 23.56rem;
+    height: 56.88rem;
+}
+
+.pos_2 {
+    position: absolute;
+    width: 377px;
+    height: 910px;
+    left: 30px;
+    right: 1513px;
+    top: 142px;
+    bottom: 28px;
+}
+
+.image_3 {
+    width: 91.19rem;
+    height: 56.88rem;
+}
+
+.pos_3 {
+    position: absolute;
+    width: 1479px;
+    height: 910px;
+    left: 408px;
+    right: 33px;
+    top: 142px;
+    bottom: 28px;
+}
+</style>