1

src/router/router-static.js

@@ -20,6 +20,7 @@ import Station from '@/views/modules/station/list';
 import Weather from '@/views/modules/weather/list';
 import loadData from '@/views/modules/load-data/index';
 import loadForecasting from '@/views/modules/load-forecasting/index';
+import loadForecastingV2 from '@/views/modules/load-forecasting-v2/index';
 
 //2.配置路由   注意：名字
 export const routes = [
@@ -40,11 +41,11 @@ export const routes = [
         name: '变电站',
         component: Station,
       },
-	  {
-	    path: '/weather',
-	    name: '天气数据',
-	    component: Weather,
-	  },
+      {
+        path: '/weather',
+        name: '天气数据',
+        component: Weather,
+      },
       {
         path: '/loadData',
         name: '历史数据',
@@ -56,6 +57,11 @@ export const routes = [
         component: loadForecasting,
       },
       {
+        path: '/loadForecastingV2',
+        name: '负荷预测v2',
+        component: loadForecastingV2,
+      },
+      {
         path: '/updatePassword',
         name: '修改密码',
         component: UpdatePassword,

src/utils/menu.js

@@ -14,17 +14,17 @@ const menu = {
             ],
             menu: '变电站管理',
           },
-		  {
-		    child: [
-		      {
-		        appFrontIcon: 'cuIcon-qrcode',
-		        menu: '天气数据',
-		        menuJump: '列表',
-		        tableName: 'weather',
-		      },
-		    ],
-		    menu: '天气数据',
-		  },
+          {
+            child: [
+              {
+                appFrontIcon: 'cuIcon-qrcode',
+                menu: '天气数据',
+                menuJump: '列表',
+                tableName: 'weather',
+              },
+            ],
+            menu: '天气数据',
+          },
           {
             child: [
               {
@@ -35,7 +35,18 @@ const menu = {
               },
             ],
             menu: '负荷数据管理',
-          },  
+          },
+          {
+            child: [
+              {
+                appFrontIcon: 'cuIcon-qrcode',
+                menu: '负荷预测',
+                menuJump: '列表',
+                tableName: 'loadForecastingv2',
+              },
+            ],
+            menu: '负荷预测v2',
+          },
           {
             child: [
               {

src/views/modules/load-forecasting-v2/components/add-or-update.vue

@@ -0,0 +1,543 @@
+<template>
+  <div class="addEdit-block">
+    <el-form class="add-update-preview" ref="ruleForm" :model="ruleForm" label-width="180px">
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="变电站名称" prop="subNm">
+            <el-input v-model="ruleForm.subNm" placeholder="请输入变电站名称" :readonly="type == 'view'"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="归属县旗" prop="compNm">
+            <el-input v-model="ruleForm.compNm" placeholder="请输入归属县旗名称" :readonly="type == 'view'"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="预测类型" prop="forecastType">
+            <el-input type="number" v-model="ruleForm.forecastType" placeholder="请输入预测类型" :readonly="type == 'view'" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="预测参数" prop="forecastParams">
+            <el-input
+              type="number"
+              style="width: 100%"
+              v-model="ruleForm.forecastParams"
+              placeholder="请输入预测参数"
+              :readonly="type == 'view'"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="预测周期" prop="forecastCycle">
+            <el-input
+              type="number"
+              style="width: 100%"
+              v-model="ruleForm.forecastCycle"
+              placeholder="请输入预测周期"
+              :readonly="type == 'view'"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="预测开始时间" prop="forecastStartTime">
+            <el-input v-model="ruleForm.forecastStartTime" :readonly="type == 'view'" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="预测结束时间" prop="forecastEndTime">
+            <el-input v-model="ruleForm.forecastEndTime" :readonly="type == 'view'" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item class="btn">
+        <el-button class="btn3" v-if="type != 'view'" type="success" @click="onSubmit">
+          <span class="icon iconfont icon-xihuan"></span>
+          提交
+        </el-button>
+        <el-button class="btn4" v-if="type != 'view'" type="success" @click="back()">
+          <span class="icon iconfont icon-xihuan"></span>
+          取消
+        </el-button>
+        <el-button class="btn5" v-if="type == 'view'" type="success" @click="back()">
+          <span class="icon iconfont icon-xihuan"></span>
+          返回
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      type: 'view', // add, edit, view
+      ruleForm: {},
+    };
+  },
+  props: ['parent'],
+  methods: {
+    init(id, type) {
+      this.type = type;
+      this.resetForm();
+      if (id) this.info(id);
+    },
+    info(id) {
+      this.$http({
+        url: `subLoad/detail/${id}`,
+        method: 'get',
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.ruleForm = data.data;
+        } else {
+          this.$message.error(data.msg);
+        }
+      });
+    },
+    resetForm() {
+      this.ruleForm = {};
+    },
+    // 提交
+    async onSubmit() {
+      await this.$refs['ruleForm'].validate(async valid => {
+        if (valid) {
+          console.log(111);
+        }
+      });
+    },
+    // 返回
+    back() {
+      this.parent.showFlag = false;
+      this.resetForm();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.addEdit-block {
+  padding: 30px;
+  background: none;
+  width: 100%;
+}
+.add-update-preview {
+  border-radius: 10px;
+  padding: 40px 25% 40px 18%;
+  background: #ffffff;
+  border-color: #eee;
+  border-width: 1px;
+  border-style: solid;
+}
+.amap-wrapper {
+  width: 100%;
+  height: 500px;
+}
+
+.search-box {
+  position: absolute;
+}
+
+.el-date-editor.el-input {
+  width: auto;
+}
+.add-update-preview ::v-deep .el-form-item {
+  border: 0px solid #eee;
+  padding: 0;
+  margin: 0 0 22px 0;
+  display: inline-block;
+  width: 100%;
+}
+.add-update-preview .el-form-item ::v-deep .el-form-item__label {
+  padding: 0 10px 0 0;
+  color: #6e6e6e;
+  font-weight: 500;
+  width: 180px;
+  font-size: 15px;
+  line-height: 40px;
+  text-align: right;
+}
+
+.add-update-preview .el-form-item ::v-deep .el-form-item__content {
+  margin-left: 180px;
+}
+.add-update-preview .el-form-item span.text {
+  padding: 0 10px;
+  color: #333;
+  background: none;
+  font-weight: 500;
+  display: inline-block;
+  font-size: 15px;
+  line-height: 40px;
+  min-width: 50%;
+}
+
+.add-update-preview .el-input {
+  width: 100%;
+}
+.add-update-preview .el-input ::v-deep .el-input__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  min-width: 50%;
+  height: 40px;
+}
+.add-update-preview .el-input ::v-deep .el-input__inner[readonly='readonly'] {
+  border: 0px solid #ccc;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .el-input-number {
+  text-align: left;
+  width: 100%;
+}
+.add-update-preview .el-input-number ::v-deep .el-input__inner {
+  text-align: left;
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  min-width: 50%;
+  height: 40px;
+}
+.add-update-preview .el-input-number ::v-deep .is-disabled .el-input__inner {
+  text-align: left;
+  border: 0px solid #ccc;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 0 12px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .el-input-number ::v-deep .el-input-number__decrease {
+  display: none;
+}
+.add-update-preview .el-input-number ::v-deep .el-input-number__increase {
+  display: none;
+}
+.add-update-preview .el-select {
+  width: 100%;
+}
+.add-update-preview .el-select ::v-deep .el-input__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 10px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .el-select ::v-deep .is-disabled .el-input__inner {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 4px;
+  padding: 0 10px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 34px;
+}
+.add-update-preview .el-date-editor {
+  width: 100%;
+}
+.add-update-preview .el-date-editor ::v-deep .el-input__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 0 10px 0 30px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .el-date-editor ::v-deep .el-input__inner[readonly='readonly'] {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 0 10px 0 30px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  height: 40px;
+}
+.add-update-preview .viewBtn {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 15px;
+  margin: 0 20px 0 0;
+  color: #666;
+  background: #fff;
+  width: auto;
+  font-size: 15px;
+  line-height: 34px;
+  height: 34px;
+  .iconfont {
+    margin: 0 2px;
+    color: #666;
+    font-size: 16px;
+    height: 34px;
+  }
+}
+.add-update-preview .viewBtn:hover {
+  opacity: 0.8;
+}
+.add-update-preview .downBtn {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  padding: 0 15px;
+  margin: 0 20px 0 0;
+  color: #666;
+  background: #fff;
+  width: auto;
+  font-size: 15px;
+  line-height: 34px;
+  height: 34px;
+  .iconfont {
+    margin: 0 2px;
+    color: #666;
+    font-size: 16px;
+    height: 34px;
+  }
+}
+.add-update-preview .downBtn:hover {
+  opacity: 0.8;
+}
+.add-update-preview .unBtn {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 4px;
+  padding: 0 0px;
+  margin: 0 20px 0 0;
+  outline: none;
+  color: #999;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  line-height: 40px;
+  height: 40px;
+  .iconfont {
+    margin: 0 2px;
+    color: #fff;
+    display: none;
+    font-size: 14px;
+    height: 34px;
+  }
+}
+.add-update-preview .unBtn:hover {
+  opacity: 0.8;
+}
+.add-update-preview ::v-deep .el-upload--picture-card {
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  width: auto;
+  height: auto;
+  line-height: initial;
+  vertical-align: middle;
+}
+
+.add-update-preview ::v-deep .upload .upload-img {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  color: #666;
+  background: #fff;
+  width: 90px;
+  font-size: 24px;
+  line-height: 60px;
+  text-align: center;
+  height: 60px;
+}
+
+.add-update-preview ::v-deep .el-upload-list .el-upload-list__item {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  color: #666;
+  background: #fff;
+  width: 90px;
+  font-size: 24px;
+  line-height: 60px;
+  text-align: center;
+  height: 60px;
+}
+
+.add-update-preview ::v-deep .el-upload .el-icon-plus {
+  border: 1px solid #e8e8e8;
+  cursor: pointer;
+  border-radius: 0px;
+  color: #666;
+  background: #fff;
+  width: 90px;
+  font-size: 24px;
+  line-height: 60px;
+  text-align: center;
+  height: 60px;
+}
+.add-update-preview ::v-deep .el-upload__tip {
+  color: #666;
+  font-size: 15px;
+}
+
+.add-update-preview .el-textarea ::v-deep .el-textarea__inner {
+  border: 1px solid #e8e8e8;
+  border-radius: 0px;
+  padding: 12px;
+  color: #666;
+  background: #fff;
+  width: 100%;
+  font-size: 15px;
+  min-height: 150px;
+  height: auto;
+}
+.add-update-preview .el-textarea ::v-deep .el-textarea__inner[readonly='readonly'] {
+  border: 0;
+  cursor: not-allowed;
+  border-radius: 0px;
+  padding: 12px;
+  color: #666;
+  background: none;
+  width: auto;
+  font-size: 15px;
+  min-width: 400px;
+  height: auto;
+}
+.add-update-preview .el-form-item.btn {
+  padding: 0;
+  margin: 20px 0 0;
+  .btn1 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #0356bb;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn1:hover {
+    opacity: 0.8;
+  }
+  .btn2 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #39c9ee;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 34px;
+    }
+  }
+  .btn2:hover {
+    opacity: 0.8;
+  }
+  .btn3 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #6ea0dc;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn3:hover {
+    opacity: 0.8;
+  }
+  .btn4 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #4abcff;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn4:hover {
+    opacity: 0.8;
+  }
+  .btn5 {
+    border: 0px solid #ccc;
+    cursor: pointer;
+    border-radius: 6px;
+    padding: 0 10px;
+    margin: 0 10px 0 0;
+    color: #fff;
+    background: #0977fd;
+    width: auto;
+    font-size: 16px;
+    min-width: 110px;
+    height: 40px;
+    .iconfont {
+      margin: 0 2px;
+      color: #fff;
+      display: none;
+      font-size: 14px;
+      height: 40px;
+    }
+  }
+  .btn5:hover {
+    opacity: 0.8;
+  }
+}
+</style>

src/views/modules/load-forecasting-v2/publicMixins.js

@@ -0,0 +1,66 @@
+export default {
+  data() {
+    return {
+      subList: [],
+      compList: [],
+    };
+  },
+  created() {
+    this.getCompList();
+    this.getDataList();
+  },
+  methods: {
+    // 获取变电站列表
+    async getSubList() {
+      this.subList = [];
+      let params = {
+        page: this.pageIndex,
+        limit: this.pageSize,
+        sort: 'id',
+        order: 'desc',
+        compId: this.searchForm.compId,
+      };
+      const { data } = await this.$http({
+        url: '/sub/page',
+        method: 'get',
+        params: params,
+      });
+      if (data && data.code === 0) {
+        this.subList = data.data.list.map(item => ({
+          label: item.subName,
+          value: String(item.id),
+        }));
+        this.searchForm.subId = undefined;
+      }
+    },
+    // 获取公司列表
+    async getCompList() {
+      this.compList = [];
+      const { data } = await this.$http({
+        url: `/company/lists`,
+        method: 'get',
+      });
+      if (data && data.code === 0) {
+        this.compList = data.data.map(item => ({
+          label: item.compName,
+          value: String(item.id),
+        }));
+      }
+    },
+    search() {
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 每页数
+    sizeChangeHandle(val) {
+      this.pageSize = val;
+      this.pageIndex = 1;
+      this.getDataList();
+    },
+    // 当前页
+    currentChangeHandle(val) {
+      this.pageIndex = val;
+      this.getDataList();
+    },
+  },
+};