1

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

@@ -2,43 +2,22 @@
   <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 class="input" label="地区" prop="region" >
-         	<el-select
-         	  style="width: 100%"
-         	  v-model="ruleForm.regionId"
-         	  placeholder="请选择地区"
-         	  clearable
-         	>
-         	  <el-option label="全部" value="">全部</el-option>
-			  <el-option
-         	    v-for="item in regionList"
-         	    :key="item.value"
-         	    :label="item.label"
-         	    :value="item.value"
-         	  />
-         	</el-select>
-         </el-form-item>
+          <el-form-item class="input" label="地区" prop="regionId">
+            <el-select style="width: 100%" v-model="ruleForm.regionId" placeholder="请选择地区" clearable @change="getSubList">
+              <el-option label="全部" :value="null">全部</el-option>
+              <el-option v-for="item in regionList" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="变电站" prop="substationId" class="input">
+            <el-select style="width: 100%" v-model="ruleForm.substationId" placeholder="请选择变电站" clearable>
+              <el-option label="全部" :value="null">全部</el-option>
+              <el-option v-for="item in substationList" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
         </el-col>
-		<el-col :span="24">
-		  <el-form-item label="变电站" prop="subNm" class="input">
-		    <el-select
-		      style="width: 100%"
-		      v-model="ruleForm.substationId"
-		      placeholder="请选择变电站"
-		      clearable
-		    >
-		      <el-option label="全部" value="">全部</el-option>
-		      <el-option
-		        v-for="item in substationList"
-		        :key="item.value"
-		        :label="item.label"
-		        :value="item.value"
-		      />
-		    </el-select>
-		  </el-form-item>
-		</el-col>
         <!-- <el-col :span="24">
           <el-form-item label="预测方法" prop="predictType" class="input">
             <el-select
@@ -48,42 +27,70 @@
               clearable
             >
               <el-option label="依据历史数据" value="0">依据历史数据</el-option>
-			  <el-option label="温度和历史数据" value="2">温度和历史数据</el-option>
+              <el-option label="温度和历史数据" value="2">温度和历史数据</el-option>
             </el-select>
           </el-form-item>
         </el-col> -->
         <el-col :span="24">
           <el-form-item label="温度" prop="temperatures" class="input">
+            <el-input style="width: 100%" type="number" v-model="ruleForm.temperatures" placeholder="请输入温度" :readonly="type == 'view'">
+              <template slot="append">℃</template>
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="时间维度" prop="dimension">
+            <el-select style="width: 100%" v-model="ruleForm.dimension" placeholder="时间维度" clearable>
+              <el-option label="日" value="daily">日</el-option>
+              <el-option label="月" value="monthly">月</el-option>
+              <el-option label="年" value="yearly">年</el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="用户增长率" prop="userGrowthRate" class="input">
             <el-input
               style="width: 100%"
-              v-model="ruleForm.temperatures"
-              placeholder="请输入温度"
+              type="number"
+              v-model="ruleForm.userGrowthRate"
+              placeholder="请输入用户增长率"
               :readonly="type == 'view'"
-            />
+            >
+              <template slot="append">%</template>
+            </el-input>
           </el-form-item>
         </el-col>
         <el-col :span="24">
-          <el-form-item label="时间维度" prop="dimension">
-           <el-select
-             style="width: 100%"
-             v-model="ruleForm.dimension"
-             placeholder="时间维度"
-             clearable
-           >
-             <el-option label="日" value="daily">日</el-option>
-             <el-option label="月" value="monthly">月</el-option>
-			  <el-option label="年" value="yearly">年</el-option>
-           </el-select>
+          <el-form-item label="当前用户数量" prop="userCount" class="input">
+            <el-input
+              style="width: 100%"
+              type="number"
+              v-model="ruleForm.userCount"
+              placeholder="请输入当前用户数量"
+              :readonly="type == 'view'"
+            />
           </el-form-item>
         </el-col>
         <el-col :span="24">
           <el-form-item label="开始时间" prop="startTime">
-            <el-input v-model="ruleForm.startTime" :readonly="type == 'view'" />
+            <el-date-picker
+              v-model="ruleForm.startTime"
+              :type="dateTypeMap[ruleForm.dimension]"
+              :value-format="dateTypeFormatMap[ruleForm.dimension]"
+              placeholder="请选择开始时间"
+              :readonly="type == 'view'"
+            />
           </el-form-item>
         </el-col>
         <el-col :span="24">
           <el-form-item label="结束时间" prop="endTime">
-            <el-input v-model="ruleForm.endTime" :readonly="type == 'view'" />
+            <el-date-picker
+              v-model="ruleForm.endTime"
+              :type="dateTypeMap[ruleForm.dimension]"
+              :value-format="dateTypeFormatMap[ruleForm.dimension]"
+              placeholder="请选择结束时间"
+              :readonly="type == 'view'"
+            />
           </el-form-item>
         </el-col>
       </el-row>
@@ -105,18 +112,39 @@
   </div>
 </template>
 <script>
+import publicMixins from '../publicMixins';
 export default {
+  mixins: [publicMixins],
   data() {
     return {
       type: 'view', // add, edit, view
       ruleForm: {
-		  region: '全部',
-		  substation: '全部'
-		  
-	  },
+        regionId: null,
+        substationId: null,
+        predictType: null,
+        temperatures: null,
+        dimension: null,
+        userGrowthRate: null,
+        userCount: null,
+        startTime: null,
+        endTime: null,
+      },
+      dateTypeMap: {
+        daily: 'date',
+        monthly: 'month',
+        yearly: 'year',
+      },
+      dateTypeFormatMap: {
+        daily: 'yyyy-MM-dd',
+        monthly: 'yyyy-MM',
+        yearly: 'yyyy',
+      },
     };
   },
   props: ['parent'],
+  created() {
+    this.getRegionList();
+  },
   methods: {
     init(id, type) {
       this.type = type;
@@ -125,56 +153,63 @@ export default {
     },
     info(id) {
       this.$http({
-        url: `subLoad/detail/${id}`,
+        url: `predict-conf/info/${id}`,
         method: 'get',
       }).then(({ data }) => {
         if (data && data.code === 0) {
-          this.ruleForm = data.data;
+          this.ruleForm = {
+            ...data.data,
+            regionId: String(data.data.regionId),
+            substationId: String(data.data.substationId),
+          };
+          if (this.ruleForm.regionId) this.getSubList();
         } else {
           this.$message.error(data.msg);
         }
       });
     },
     resetForm() {
-      this.ruleForm = {};
+      this.ruleForm = {
+        regionId: null,
+        substationId: null,
+        predictType: null,
+        temperatures: null,
+        dimension: null,
+        userGrowthRate: null,
+        userCount: null,
+        startTime: null,
+        endTime: null,
+      };
     },
     // 提交
     async onSubmit() {
-      // await this.$refs['ruleForm'].validate(async valid => {
-      //   if (valid) {
-      //     console.log(111);
-      //   }
-      // });
-	  var objcross = this.$storage.getObj('crossObj');
-	  if(!this.ruleForm.id) {
-	  	delete this.ruleForm.userid
-	  }
-	  await this.$refs["ruleForm"].validate(async valid => {
-	  	if (valid) {
-	  		await this.$http({
-	  			url: `predict-conf/${!this.ruleForm.id ? "save" : "update"}`,
-	  			method: "post",
-	  			data: this.ruleForm
-	  		}).then(async ({ data }) => {
-	  			if (data && data.code === 0) {
-	  				this.$message({
-	  					message: "操作成功",
-	  					type: "success",
-	  					duration: 1500,
-	  					onClose: () => {
-	  						this.parent.showFlag = true;
-	  						this.parent.addOrUpdateFlag = false;
-	  						this.parent.rainfalldataCrossAddOrUpdateFlag = false;
-	  						this.parent.search();
-	  						this.parent.contentStyleChange();
-	  					}
-	  				});
-	  			} else {
-	  				this.$message.error(data.msg);
-	  			}
-	  		});
-	  	}
-	  });
+      await this.$refs['ruleForm'].validate(async valid => {
+        if (valid) {
+          const regObj = this.regionList.find(item => item.value == String(this.ruleForm.regionId));
+          this.ruleForm.region = regObj ? regObj.label : null;
+          const subObj = this.substationList.find(item => item.value == String(this.ruleForm.substationId));
+          this.ruleForm.substation = subObj ? subObj.label : null;
+          await this.$http({
+            url: `predict-conf/${!this.ruleForm.id ? 'save' : 'update'}`,
+            method: 'post',
+            data: this.ruleForm,
+          }).then(async ({ data }) => {
+            if (data && data.code === 0) {
+              this.$message({
+                message: '操作成功',
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.parent.showFlag = false;
+                  this.parent.search();
+                },
+              });
+            } else {
+              this.$message.error(data.msg);
+            }
+          });
+        }
+      });
     },
     // 返回
     back() {

src/views/modules/load-forecasting-v2/components/forecasting-detail.vue

@@ -1,157 +1,5 @@
 <template>
   <div class="addEdit-block">
-    <!-- 列表页 -->
-    <el-form
-      class="center-form-pv"
-      :style="{
-        border: '0px solid #fff',
-        padding: '10px',
-        margin: '0',
-        flexWrap: 'wrap',
-        background: '#ffffff',
-        display: 'flex',
-        width: '100%',
-      }"
-      :inline="true"
-      :model="searchForm"
-    >
-      <el-row
-        :style="{
-          padding: '10px',
-          alignItems: 'center',
-          flexWrap: 'wrap',
-          background: 'none',
-          display: 'flex',
-        }"
-      >
-        <div
-          :style="{
-            alignItems: 'center',
-            margin: '0 10px 0 0',
-            display: 'flex',
-          }"
-        >
-          <label
-            :style="{
-              margin: '0 10px 0 0',
-              whiteSpace: 'nowrap',
-              color: '#666',
-              display: 'inline-block',
-              lineHeight: '40px',
-              fontSize: 'inherit',
-              fontWeight: '500',
-              height: '40px',
-            }"
-            class="item-label"
-            >归属县旗</label
-          >
-          <el-select
-            style="width: 100%"
-            v-model="searchForm.compId"
-            placeholder="归属县旗"
-            @keydown.enter.native="search()"
-            @change="getSubList"
-            clearable
-          >
-            <el-option v-for="item in compList" :key="item.value" :label="item.label" :value="item.value" />
-          </el-select>
-        </div>
-        <div
-          :style="{
-            alignItems: 'center',
-            margin: '0 10px 0 0',
-            display: 'flex',
-          }"
-        >
-          <label
-            :style="{
-              margin: '0 10px 0 0',
-              whiteSpace: 'nowrap',
-              color: '#666',
-              display: 'inline-block',
-              lineHeight: '40px',
-              fontSize: 'inherit',
-              fontWeight: '500',
-              height: '40px',
-            }"
-            class="item-label"
-            >变电站</label
-          >
-          <el-select style="width: 100%" v-model="searchForm.subId" placeholder="变电站" @keydown.enter.native="search()" clearable>
-            <el-option v-for="item in subList" :key="item.value" :label="item.label" :value="item.value" />
-          </el-select>
-        </div>
-        <div
-          :style="{
-            alignItems: 'center',
-            margin: '0 10px 0 0',
-            display: 'flex',
-          }"
-        >
-          <label
-            :style="{
-              margin: '0 10px 0 0',
-              whiteSpace: 'nowrap',
-              color: '#666',
-              display: 'inline-block',
-              lineHeight: '40px',
-              fontSize: 'inherit',
-              fontWeight: '500',
-              height: '40px',
-            }"
-            class="item-label"
-            >时间范围</label
-          >
-          <el-date-picker
-            size="large"
-            v-model="searchForm.dateRange"
-            type="daterange"
-            value-format="yyyy-MM-dd"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-          />
-        </div>
-        <el-button class="search" type="success" @click="search()">
-          <span
-            class="icon iconfont icon-fangdajing07"
-            :style="{
-              margin: '0 2px',
-              fontSize: '16px',
-              color: '#fff',
-              display: 'none',
-              height: '40px',
-            }"
-          ></span>
-          搜索
-        </el-button>
-      </el-row>
-
-      <el-row
-        class="actions"
-        :style="{
-          padding: '10px',
-          margin: '0px 0',
-          flexWrap: 'wrap',
-          background: 'none',
-          display: 'flex',
-        }"
-      >
-        <el-button class="add" type="danger" @click="back()">
-          <span
-            class="icon iconfont icon-xihuan"
-            :style="{
-              margin: '0 2px',
-              fontSize: '14px',
-              color: '#fff',
-              display: 'none',
-              height: '34px',
-            }"
-          ></span>
-          返回
-        </el-button>
-      </el-row>
-    </el-form>
     <div
       :style="{
         border: '0px solid #fff',
@@ -180,25 +28,54 @@
         v-loading="dataListLoading"
       >
         <el-table-column :resizable="true" :sortable="true" label="序号" type="index" width="50" />
-        <el-table-column :resizable="true" :sortable="true" prop="subNm" label="变电站">
+        <el-table-column :resizable="true" :sortable="true" prop="substation" label="变电站">
           <template slot-scope="scope">
             <div style="color: #0977fd; text-decoration: underline; cursor: pointer" @click="handleClick(scope.row)">
-              {{ scope.row.subNm }}
+              {{ scope.row.substation }}
             </div>
           </template>
         </el-table-column>
-        <el-table-column :resizable="true" :sortable="true" prop="recordDate" label="所属地区" />
-        <el-table-column :resizable="true" :sortable="true" prop="recordDate" label="预测类型" />
-        <el-table-column :resizable="true" :sortable="true" prop="recordDate" label="预测参数" />
-        <el-table-column :resizable="true" :sortable="true" prop="recordDate" label="预测周期" />
-        <el-table-column :resizable="true" :sortable="true" prop="recordDate" label="预测开始时间" />
-        <el-table-column :resizable="true" :sortable="true" prop="recordDate" label="预测结束时间" />
-        <el-table-column :resizable="true" :sortable="true" prop="voltageLevel" label="预测结果">
+        <el-table-column :resizable="true" :sortable="true" prop="region" label="所属地区" />
+        <!-- <el-table-column :resizable="true" :sortable="true" prop="predictType" label="预测类型" /> -->
+        <el-table-column :resizable="true" :sortable="true" prop="temperatures" label="预测参数">
+          <template slot-scope="scope">
+            {{ '温度' + scope.row.temperatures + '℃' }}
+          </template>
+        </el-table-column>
+        <el-table-column :resizable="true" :sortable="true" prop="dimension" label="预测周期">
+          <template slot-scope="scope">
+            {{ scope.row.dimension == 'daily' ? '按日' : scope.row.dimension == 'monthly' ? '按月' : '按年' }}
+          </template>
+        </el-table-column>
+        <el-table-column :resizable="true" :sortable="true" prop="startTime" label="预测开始时间" />
+        <el-table-column :resizable="true" :sortable="true" prop="endTime" label="预测结束时间" />
+        <el-table-column :resizable="true" :sortable="true" prop="result" label="预测结果">
           <template slot-scope="scope">
-            {{ scope.row.voltageLevel }}
+            {{ scope.row.result == '0' ? '待预测' : scope.row.result == '1' ? '成功' : '失败' }}
           </template>
         </el-table-column>
-        <el-table-column :resizable="true" :sortable="true" prop="recordDate" label="执行时间" />
+        <el-table-column :resizable="true" :sortable="true" prop="execTime" label="执行时间">
+          <template slot-scope="scope">
+            {{ scope.row.execTime == null ? '---' : scope.row.execTime }}
+          </template>
+        </el-table-column>
+        <el-table-column :resizable="true" :sortable="true" v-for="key in columns" :key="key" :label="key">
+          <el-table-column :prop="`${key}_peakLoad`" label="最大负荷">
+            <template slot-scope="scope">
+              {{ scope.row[`${key}_peakLoad`] ? scope.row[`${key}_peakLoad`] : '---' }}
+            </template>
+          </el-table-column>
+          <el-table-column :prop="`${key}_loadRate`" label="最大负荷率">
+            <template slot-scope="scope">
+              {{ scope.row[`${key}_loadRate`] ? scope.row[`${key}_loadRate`] + '%' : '---' }}
+            </template>
+          </el-table-column>
+          <el-table-column :prop="`${key}_confidence`" label="置信度">
+            <template slot-scope="scope">
+              {{ scope.row[`${key}_confidence`] ? scope.row[`${key}_confidence`] + '%' : '---' }}
+            </template>
+          </el-table-column>
+        </el-table-column>
       </el-table>
     </div>
     <el-pagination
@@ -241,48 +118,39 @@ export default {
   mixins: [publicMixins],
   data() {
     return {
-      searchForm: {
-        subId: '',
-        compId: '',
-        dateRange: [],
-      },
       dataList: [],
-      subList: [],
       pageIndex: 1,
       pageSize: 10,
       totalPage: 0,
       dataListLoading: false,
-      dataListSelections: [],
       layouts: ['prev', 'pager', 'next', 'sizes'],
-      compList: [],
       chartVisiable1: false,
+      columns: [],
     };
   },
   props: ['parent'],
   methods: {
     init(id) {
-      this.resetForm();
-      this.search();
+      this.getDataList(id);
     },
     // 获取数据列表
-    getDataList() {
+    getDataList(id) {
       this.dataListLoading = true;
-      let params = {
-        page: this.pageIndex,
-        limit: this.pageSize,
-        sort: 'id',
-        order: 'desc',
-        ...this.searchForm,
-        record_date_start: this.searchForm.dateRange[0],
-        record_date_end: this.searchForm.dateRange[1],
-      };
       this.$http({
-        url: '/electric-heating/page',
+        url: `/voltageLoad/predictList/${id}`,
         method: 'get',
-        params: params,
       }).then(({ data }) => {
         if (data && data.code === 0) {
-          this.dataList = data.data.list;
+          this.dataList = data.data.list.map(ite => {
+            const keys = Object.keys(ite.predictions);
+            this.columns = keys;
+            keys.forEach(key => {
+              ite[`${key}_peakLoad`] = ite.predictions[key].peakLoad;
+              ite[`${key}_loadRate`] = ite.predictions[key].loadRate;
+              ite[`${key}_confidence`] = ite.predictions[key].confidence;
+            });
+            return ite;
+          });
           this.totalPage = data.data.total;
         } else {
           this.dataList = [];
@@ -291,9 +159,6 @@ export default {
         this.dataListLoading = false;
       });
     },
-    resetForm() {
-      this.ruleForm = {};
-    },
     // 统计接口
     handleClick(row) {
       this.chartVisiable1 = !this.chartVisiable1;
@@ -308,18 +173,39 @@ export default {
           tooltip: { trigger: 'axis', backgroundColor: 'transparent' },
           xAxis: {
             type: 'category',
-            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+            data: this.columns,
           },
-          yAxis: {
-            nameTextStyle: {
-              color: '#333',
+          yAxis: [
+            {
+              name: 'mV',
+              nameTextStyle: {
+                color: '#333',
+              },
+              type: 'value',
             },
-            type: 'value',
-          },
+            {
+              name: '%',
+              nameTextStyle: {
+                color: '#333',
+              },
+              type: 'value',
+            },
+          ],
           series: [
             {
-              data: [150, 230, 224, 218, 135, 147, 260, 230, 224, 218, 135, 147],
+              data: this.columns.map(key => row[`${key}_peakLoad`]),
+              type: 'line',
+              yAxisIndex: 0,
+            },
+            {
+              data: this.columns.map(key => row[`${key}_loadRate`]),
+              type: 'line',
+              yAxisIndex: 1,
+            },
+            {
+              data: this.columns.map(key => row[`${key}_confidence`]),
               type: 'line',
+              yAxisIndex: 1,
             },
           ],
         });

src/views/modules/load-forecasting-v2/index.vue

@@ -54,75 +54,10 @@
               @change="getSubList"
               clearable
             >
-			  <el-option label="全部" value="">全部</el-option>
+              <el-option label="全部" :value="null">全部</el-option>
               <el-option v-for="item in regionList" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </div>
-		  <div
-		    :style="{
-		      alignItems: 'center',
-		      margin: '0 10px 0 0',
-		      display: 'flex',
-		    }"
-		  >
-		    <label
-		      :style="{
-		        margin: '0 10px 0 0',
-		        whiteSpace: 'nowrap',
-		        color: '#666',
-		        display: 'inline-block',
-		        lineHeight: '40px',
-		        fontSize: 'inherit',
-		        fontWeight: '500',
-		        height: '40px',
-		      }"
-		      class="item-label"
-		      >变电站</label
-		    >
-		    <el-select
-		      style="width: 100%"
-		      v-model="searchForm.regionId"
-		      placeholder="变电站"
-		      @keydown.enter.native="search()"
-		      clearable
-		    >
-		  			  <el-option label="全部" value="">全部</el-option>
-		      <el-option v-for="item in substationList" :key="item.value" :label="item.label" :value="item.value" />
-		    </el-select>
-		  </div>
-		  <div
-		    :style="{
-		      alignItems: 'center',
-		      margin: '0 10px 0 0',
-		      display: 'flex',
-		    }"
-		  >
-		    <label
-		      :style="{
-		        margin: '0 10px 0 0',
-		        whiteSpace: 'nowrap',
-		        color: '#666',
-		        display: 'inline-block',
-		        lineHeight: '40px',
-		        fontSize: 'inherit',
-		        fontWeight: '500',
-		        height: '40px',
-		      }"
-		      class="item-label"
-		      >时间维度</label
-		    >
-		    <el-select
-		      style="width: 100%"
-		      v-model="searchForm.dimension"
-		      placeholder="时间维度"
-		      @keydown.enter.native="search()"
-		      clearable
-		    >
-		  	<el-option label="日" value="daily">日</el-option>
-		  	<el-option label="月" value="monthly">月</el-option>
-		  	 <el-option label="年" value="yearly">年</el-option>
-		    </el-select>
-		  </div>
           <div
             :style="{
               alignItems: 'center',
@@ -130,7 +65,7 @@
               display: 'flex',
             }"
           >
-           <!-- <label
+            <label
               :style="{
                 margin: '0 10px 0 0',
                 whiteSpace: 'nowrap',
@@ -144,9 +79,43 @@
               class="item-label"
               >变电站</label
             >
-            <el-select style="width: 100%" v-model="searchForm.subId" placeholder="变电站" @keydown.enter.native="search()" clearable>
-              <el-option v-for="item in subList" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select> -->
+            <el-select
+              style="width: 100%"
+              v-model="searchForm.substationId"
+              placeholder="变电站"
+              @keydown.enter.native="search()"
+              clearable
+            >
+              <el-option label="全部" :value="null">全部</el-option>
+              <el-option v-for="item in substationList" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </div>
+          <div
+            :style="{
+              alignItems: 'center',
+              margin: '0 10px 0 0',
+              display: 'flex',
+            }"
+          >
+            <label
+              :style="{
+                margin: '0 10px 0 0',
+                whiteSpace: 'nowrap',
+                color: '#666',
+                display: 'inline-block',
+                lineHeight: '40px',
+                fontSize: 'inherit',
+                fontWeight: '500',
+                height: '40px',
+              }"
+              class="item-label"
+              >时间维度</label
+            >
+            <el-select style="width: 100%" v-model="searchForm.dimension" placeholder="时间维度" @keydown.enter.native="search()" clearable>
+              <el-option label="日" value="daily">日</el-option>
+              <el-option label="月" value="monthly">月</el-option>
+              <el-option label="年" value="yearly">年</el-option>
+            </el-select>
           </div>
           <div
             :style="{
@@ -154,6 +123,13 @@
               margin: '0 10px 0 0',
               display: 'flex',
             }"
+          ></div>
+          <div
+            :style="{
+              alignItems: 'center',
+              margin: '0 10px 0 0',
+              display: 'flex',
+            }"
           >
             <label
               :style="{
@@ -248,34 +224,40 @@
         >
           <el-table-column :resizable="true" :sortable="true" label="序号" type="index" width="50" />
           <el-table-column :resizable="true" :sortable="true" prop="region" label="所属地区" />
-		  <el-table-column :resizable="true" :sortable="true" prop="substation" label="变电站" />
+          <el-table-column :resizable="true" :sortable="true" prop="substation" label="变电站" />
           <!-- <el-table-column :resizable="true" :sortable="true" prop="recordDate" label="预测方法" /> -->
-          <el-table-column :resizable="true" :sortable="true" prop="temperatures" label="预测参数" >
-			  <template slot-scope="scope">
-			    {{ "温度"+scope.row.temperatures +"℃"}}
-			  </template>
-		 </el-table-column>
+          <el-table-column :resizable="true" :sortable="true" prop="temperatures" label="预测参数">
+            <template slot-scope="scope">
+              {{ '温度' + scope.row.temperatures + '℃' }}
+            </template>
+          </el-table-column>
           <el-table-column :resizable="true" :sortable="true" prop="dimension" label="时间维度">
-			  <template slot-scope="scope">
-			    {{ scope.row.dimension=='daily'?'按日':(scope.row.dimension=='monthly'?'按月':'按年')}}
-			  </template>
-		  </el-table-column>
+            <template slot-scope="scope">
+              {{ scope.row.dimension == 'daily' ? '按日' : scope.row.dimension == 'monthly' ? '按月' : '按年' }}
+            </template>
+          </el-table-column>
           <el-table-column :resizable="true" :sortable="true" prop="startTime" label="开始时间" />
           <el-table-column :resizable="true" :sortable="true" prop="endTime" label="结束时间" />
+          <el-table-column :resizable="true" :sortable="true" prop="userGrowthRate" label="用户增长率">
+            <template slot-scope="scope">
+              {{ scope.row.userGrowthRate + '%' }}
+            </template>
+          </el-table-column>
+          <el-table-column :resizable="true" :sortable="true" prop="userCount" label="当前用户数量" />
           <el-table-column :resizable="true" :sortable="true" prop="result" label="预测结果">
             <template slot-scope="scope">
-              {{ scope.row.result=='0'?'待预测':(scope.row.result=='1'?'成功':'失败')}}
+              {{ scope.row.result == '0' ? '待预测' : scope.row.result == '1' ? '成功' : '失败' }}
             </template>
           </el-table-column>
           <el-table-column :resizable="true" :sortable="true" prop="execTime" label="执行时间">
-			  <template slot-scope="scope">
-			    {{ scope.row.execTime==null?'---': scope.row.execTime}}
-			  </template>
-		  </el-table-column>
-		  <el-table-column :resizable="true" :sortable="true" prop="createTime" label="添加时间" />
+            <template slot-scope="scope">
+              {{ scope.row.execTime == null ? '---' : scope.row.execTime }}
+            </template>
+          </el-table-column>
+          <el-table-column :resizable="true" :sortable="true" prop="createTime" label="添加时间" />
           <el-table-column width="300" label="操作">
             <template slot-scope="scope">
-              <el-button class="view" type="success" @click="handleForecastingDetail(scope.row.id)">
+              <el-button class="view" type="success" @click="handleForecastingDetail(scope.row)">
                 <span
                   class="icon iconfont icon-xihuan"
                   :style="{ margin: '0 2px', fontSize: '14px', color: '#fff', display: 'none', height: '40px' }"
@@ -343,77 +325,36 @@
 <script>
 import addOrUpdate from './components/add-or-update.vue';
 import forecastingDetail from './components/forecasting-detail.vue';
+import publicMixins from './publicMixins';
 export default {
   components: {
     addOrUpdate,
     forecastingDetail,
   },
+  mixins: [publicMixins],
   data() {
     return {
       showFlag: false,
       showForecastingFlag: false,
       searchForm: {
-        subId: '',
-        regionId: '',
+        substationId: null,
+        regionId: null,
         dateRange: [],
       },
       dataList: [],
-      subList: [],
       pageIndex: 1,
       pageSize: 10,
       totalPage: 0,
       dataListLoading: false,
       dataListSelections: [],
       layouts: ['prev', 'pager', 'next', 'sizes'],
-      compList: [],
     };
   },
-  created() {
-    this.getCompList();
+  async created() {
+    await this.getRegionList();
     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.regionList = [];
-      const { data } = await this.$http({
-        url: `/company/lists`,
-        method: 'get',
-      });
-      if (data && data.code === 0) {
-        this.regionList = data.data.map(item => ({
-          label: item.compName,
-          value: String(item.id),
-        }));
-      }
-    },
-    search() {
-      this.pageIndex = 1;
-      this.getDataList();
-    },
     // 获取数据列表
     getDataList() {
       this.dataListLoading = true;
@@ -441,6 +382,10 @@ export default {
         this.dataListLoading = false;
       });
     },
+    search() {
+      this.pageIndex = 1;
+      this.getDataList();
+    },
     // 每页数
     sizeChangeHandle(val) {
       this.pageSize = val;
@@ -460,10 +405,41 @@ export default {
       });
     },
     // 详情页
-    handleForecastingDetail(id) {
+    handleForecastingDetail(row) {
+      if (row.result != '1') {
+        this.$message.error('该条数据未完成预测，不能查看详情');
+        return;
+      }
       this.showForecastingFlag = true;
       this.$nextTick(() => {
-        this.$refs.forecastingDetail.init(id);
+        this.$refs.forecastingDetail.init(row.id);
+      });
+    },
+    // 预测
+    predictHandler(id) {
+      const loading = this.$loading({
+        lock: true,
+        text: '预测中...',
+        background: 'rgba(0, 0, 0, 0.7)',
+      });
+      this.$http({
+        url: `/voltageLoad/predict/${id}`,
+        method: 'post',
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.$message({
+            message: '预测成功',
+            type: 'success',
+          });
+          loading.close();
+          this.getDataList();
+        } else {
+          this.$message({
+            message: data.msg || '预测失败',
+            type: 'error',
+          });
+          loading.close();
+        }
       });
     },
     /// 删除

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

@@ -1,66 +1,50 @@
 export default {
   data() {
     return {
-      subList: [],
-      compList: [],
+      substationList: [],
+      regionList: [],
+      ruleForm: {},
+      searchForm: {},
     };
   },
-  created() {
-    this.getCompList();
-    this.getDataList();
-  },
   methods: {
     // 获取变电站列表
     async getSubList() {
-      this.subList = [];
+      this.substationList = [];
       let params = {
         page: this.pageIndex,
         limit: this.pageSize,
         sort: 'id',
         order: 'desc',
-        compId: this.searchForm.compId,
+        compId: this.searchForm.regionId,
       };
       const { data } = await this.$http({
-        url: '/sub/page',
+        url: '/substation/list',
         method: 'get',
         params: params,
       });
       if (data && data.code === 0) {
-        this.subList = data.data.list.map(item => ({
-          label: item.subName,
+        this.substationList = data.data.list.map(item => ({
+          label: item.substation,
           value: String(item.id),
         }));
-        this.searchForm.subId = undefined;
+        this.searchForm.substationId = null;
+        this.ruleForm.substationId = null;
       }
     },
     // 获取公司列表
-    async getCompList() {
-      this.compList = [];
+    async getRegionList() {
+      this.regionList = [];
       const { data } = await this.$http({
         url: `/company/lists`,
         method: 'get',
       });
       if (data && data.code === 0) {
-        this.compList = data.data.map(item => ({
+        this.regionList = 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();
-    },
   },
 };