产能预测

ems-ui-cloud/src/views/prediction/prod.vue

@@ -1,181 +1,73 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="园区代码" prop="areaCode">
-        <el-input
-            v-model="queryParams.areaCode"
-            placeholder="请输入园区代码"
-            clearable
-            @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="设施代码" prop="facsCode">
-        <el-input
-            v-model="queryParams.facsCode"
-            placeholder="请输入设施代码"
-            clearable
-            @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="日期" prop="date">
-        <el-date-picker clearable
-                        v-model="queryParams.date"
-                        type="date"
-                        value-format="yyyy-MM-dd"
-                        placeholder="请选择日期">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="发电量" prop="elecProdQuantity">
-        <el-input
-            v-model="queryParams.elecProdQuantity"
-            placeholder="请输入发电量"
-            clearable
-            @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="功率" prop="avgPower">
-        <el-input
-            v-model="queryParams.avgPower"
-            placeholder="请输入功率"
-            clearable
-            @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
+    <el-row :gutter="20">
+      <el-col :span="4" :xs="24">
+        <div class="head-container">
+          <el-input v-model="areaName" placeholder="请输入区域名称" clearable size="small" prefix-icon="el-icon-search"
+                    style="margin-bottom: 20px" />
+        </div>
+        <div class="head-container" style="height: 100vh; overflow: hidden; position: relative;">
+          <el-tree :data="areaOptions" :props="defaultProps" :expand-on-click-node="false"
+                   :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
+                   @node-click="handleNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;" />
+        </div>
+      </el-col>
+      <el-col :span="20" :xs="24">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
 
-    <el-row :gutter="10" class="mb8">
-<!--      <el-col :span="1.5">-->
-<!--        <el-button-->
-<!--            type="primary"-->
-<!--            plain-->
-<!--            icon="el-icon-plus"-->
-<!--            size="mini"-->
-<!--            @click="handleAdd"-->
-<!--            v-hasPermi="['ems:predictionProd:add']"-->
-<!--        >新增-->
-<!--        </el-button>-->
-<!--      </el-col>-->
-<!--      <el-col :span="1.5">-->
-<!--        <el-button-->
-<!--            type="success"-->
-<!--            plain-->
-<!--            icon="el-icon-edit"-->
-<!--            size="mini"-->
-<!--            :disabled="single"-->
-<!--            @click="handleUpdate"-->
-<!--            v-hasPermi="['ems:predictionProd:edit']"-->
-<!--        >修改-->
-<!--        </el-button>-->
-<!--      </el-col>-->
-<!--      <el-col :span="1.5">-->
-<!--        <el-button-->
-<!--            type="danger"-->
-<!--            plain-->
-<!--            icon="el-icon-delete"-->
-<!--            size="mini"-->
-<!--            :disabled="multiple"-->
-<!--            @click="handleDelete"-->
-<!--            v-hasPermi="['ems:predictionProd:remove']"-->
-<!--        >删除-->
-<!--        </el-button>-->
-<!--      </el-col>-->
-<!--      <el-col :span="1.5">-->
-<!--        <el-button-->
-<!--            type="warning"-->
-<!--            plain-->
-<!--            icon="el-icon-download"-->
-<!--            size="mini"-->
-<!--            @click="handleExport"-->
-<!--            v-hasPermi="['ems:predictionProd:export']"-->
-<!--        >导出-->
-<!--        </el-button>-->
-<!--      </el-col>-->
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+          <el-form-item label="选择设施" prop="facsCode">
+            <el-select v-model="queryParams.facsCode">
+              <el-option v-for="item in facsOptions" :label="item.facsName" :value="item.facsCode"
+                         :key="item.facsCode"
+              />
+            </el-select>
+          </el-form-item>
 
-    <el-table v-loading="loading" :data="predictionProdList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center"/>
-      <el-table-column label="序号" align="center" prop="id"/>
-      <el-table-column label="园区名称" align="center" prop="areaName"/>
-      <el-table-column label="设施代码" align="center" prop="facsCode"/>
-      <el-table-column label="设施名称" align="center" prop="facsName"/>
-      <el-table-column label="日期" align="center" prop="date" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.date, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="发电量(kW·h)" align="center" prop="elecProdQuantity"/>
-      <el-table-column label="功率(W)" align="center" prop="avgPower"/>
-<!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
-<!--        <template slot-scope="scope">-->
-<!--          <el-button-->
-<!--              size="mini"-->
-<!--              type="text"-->
-<!--              icon="el-icon-edit"-->
-<!--              @click="handleUpdate(scope.row)"-->
-<!--              v-hasPermi="['ems:predictionProd:edit']"-->
-<!--          >修改-->
-<!--          </el-button>-->
+          <el-form-item label="开始日期" prop="date">
+            <el-date-picker clearable
+                            v-model="queryParams.startRecTime"
+                            type="date"
+                            value-format="yyyy-MM-dd"
+                            placeholder="请选择日期">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
 
-<!--          <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn" @click="handleDelete(scope.row)"-->
-<!--                     v-hasPermi="['ems:predictionProd:remove']">-->
-<!--            删除-->
-<!--          </el-button>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
-    </el-table>
-    <pagination
-        v-show="total>0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
-    />
+        <el-row :gutter="10" class="mb8">
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
 
-    <!-- 添加或修改电力产能预测对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="园区代码" prop="areaCode">
-          <el-input v-model="form.areaCode" placeholder="请输入园区代码"/>
-        </el-form-item>
-        <el-form-item label="设施代码" prop="facsCode">
-          <el-input v-model="form.facsCode" placeholder="请输入设施代码"/>
-        </el-form-item>
-        <el-form-item label="日期" prop="date">
-          <el-date-picker clearable
-                          v-model="form.date"
-                          type="date"
-                          value-format="yyyy-MM-dd"
-                          placeholder="请选择日期">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="发电量" prop="elecProdQuantity">
-          <el-input v-model="form.elecProdQuantity" placeholder="请输入发电量"/>
-        </el-form-item>
-        <el-form-item label="功率" prop="avgPower">
-          <el-input v-model="form.avgPower" placeholder="请输入功率"/>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
+        <el-table v-loading="loading" :data="predictionProdList" >
+          <el-table-column label="园区名称" align="center" prop="areaName"/>
+          <el-table-column label="设施名称" align="center" prop="facsName"/>
+          <el-table-column label="日期" align="center" prop="date" width="180">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.date, '{y}-{m}-{d}') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="发电量(kW·h)" align="center" prop="elecProdQuantity"/>
+          <el-table-column label="平均功率(kW)" align="center" prop="avgPower"/>
+        </el-table>
+        <pagination
+          v-show="total>0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-import {
-  addPredictionProd,
-  delPredictionProd,
-  getPredictionProd,
-  listPredictionProd,
-  updatePredictionProd,
-} from '@/api/prediction/predictionProd';
+import { listPredictionProd } from '@/api/prediction/predictionProd';
+import { areaTreeByFacsCategory } from '@/api/basecfg/area'
+import { listAllFacs } from '@/api/basecfg/emsfacs'
 
 export default {
   name: 'PredictionProd',
@@ -199,13 +91,24 @@ export default {
       title: '',
       // 是否显示弹出层
       open: false,
+      // 表单参数
+      areaOptions: [],
+      areaName: undefined,
+      facsCategory: 'E',
+      facsSubCategory: 'E5',
+      // 设施选项
+      facsOptions: undefined,
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
         areaCode: null,
         facsCode: null,
-        date: null,
+        startRecTime: null,
         elecProdQuantity: null,
         avgPower: null,
       },
@@ -251,7 +154,16 @@ export default {
       },
     };
   },
+  watch: {
+    // 根据名称筛选区域树
+    areaName (val) {
+      this.$refs.tree.filter(val)
+    }
+  },
   created() {
+    this.getAreaList();
+    this.getFacsOptions();
+    this.setTodayDate();
     this.getList();
   },
   methods: {
@@ -264,6 +176,28 @@ export default {
         this.loading = false;
       });
     },
+    // 查询区域列表
+    async getAreaList () {
+      await areaTreeByFacsCategory(this.facsCategory, this.facsSubCategory, false).then(response => {
+        this.areaOptions = [{
+          id: '-1',
+          label: '全部',
+          children: []
+        }].concat(response.data)
+        this.selectedLabel = '全部'
+        this.queryParams.areaCode = '-1'
+      })
+    },
+    getFacsOptions() {
+      const getFacsParams = {
+        facsCategory: this.facsCategory,
+        subCategory: this.queryParams.deviceSubCategory,
+        refArea: this.queryParams.areaCode,
+      }
+      listAllFacs(getFacsParams).then(response => {
+        this.facsOptions = response.data
+      })
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -290,73 +224,34 @@ export default {
     resetQuery() {
       this.resetForm('queryForm');
       this.handleQuery();
-
-
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id);
-      this.single = selection.length !== 1;
-      this.multiple = !selection.length;
     },
     handle(selection) {
       this.ids = selection.map(item => item.id);
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = '添加电力产能预测';
-
+    setTodayDate() {
+      // 获取当前日期
+      const today = new Date();
+      // 格式化日期为 yyyy-MM-dd 格式
+      const year = today.getFullYear();
+      const month = String(today.getMonth() + 1).padStart(2, '0');
+      const day = String(today.getDate()).padStart(2, '0');
+      // 设置日期选择器的值
+      this.queryParams.startRecTime = `${year}-${month}-${day}`;
     },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id || this.ids;
-      getPredictionProd(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = '修改电力产能预测';
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs['form'].validate(valid => {
-        if (valid) {
-          if (this.form.id != null) {
-            updatePredictionProd(this.form).then(response => {
-              this.$modal.msgSuccess('修改成功');
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addPredictionProd(this.form).then(response => {
-              this.$modal.msgSuccess('新增成功');
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除电力产能预测编号为"' + ids + '"的数据项？').then(function () {
-        return delPredictionProd(ids);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess('删除成功');
-      }).catch(() => {
-      });
+    // 筛选节点
+    filterNode (value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
     },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('ems/predictionProd/export', {
-        ...this.queryParams,
-      }, `predictionProd_${new Date().getTime()}.xlsx`);
+    // 节点单击事件
+    handleNodeClick (data) {
+      this.queryParams.areaCode = data.id
+      this.selectedLabel = data.label
+      this.queryParams.facsCode = undefined
+      this.getFacsOptions()
+      this.getList()
     },
   },
 };