碳排数据界面

ems-ui-cloud/src/views/basecfg/cacfg/index.vue

@@ -276,7 +276,8 @@ export default {
       const factorType = {
         1: '电力平均二氧化碳排放因子',
         2: '电力平均二氧化碳排放因子（不含市场化交易的非化石能源电量）',
-        3: '化石能源电力二氧化碳排放因子'
+        3: '化石能源电力二氧化碳排放因子',
+        4: '光伏发电电力碳足迹因子',
       };
       return factorType[cellValue] || '未知';
     }

ems-ui-cloud/src/views/ca/emission.vue

@@ -1,140 +1,70 @@
 <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="areaNamez">
-        <el-input
-          v-model="queryParams.areaName"
-          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>
-        <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="10" class="mb8">
-      <!--      <el-col :span="1.5">-->
-      <!--        <el-button-->
-      <!--          type="primary"-->
-      <!--          plain-->
-      <!--          icon="el-icon-plus"-->
-      <!--          size="mini"-->
-      <!--          @click="handleAdd"-->
-      <!--          v-hasPermi="['ems:caMeterD: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:caMeterD: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:caMeterD: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:caMeterD:export']"-->
-      <!--        >导出</el-button>-->
-      <!--      </el-col>-->
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+    <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-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 label="结束日期" prop="date">
+            <el-date-picker clearable
+                            v-model="queryParams.endRecTime"
+                            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-table v-loading="loading" :data="caMeterDList" @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="date" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.date, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="碳排放量(kg)" align="center" prop="caEmissionQuantity"/>
-      <el-table-column label="碳汇量(kg)" align="center" prop="caSinkQuantity"/>
-      <!--      <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:caMeterD:edit']"-->
-      <!--          >修改</el-button>-->
-      <!--          <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn" @click="handleDelete(scope.row)" v-hasPermi="['ems:caMeterD:remove']">-->
-      <!--            删除</el-button>-->
+        <el-row :gutter="10" class="mb8">
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
 
-      <!--        </template>-->
-      <!--      </el-table-column>-->
-    </el-table>
+        <el-table v-loading="loading" :data="caMeterDList">
+          <el-table-column label="园区名称" align="center" prop="areaName"/>
+          <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="碳排放量(kg)" align="center" prop="caEmissionQuantity"/>
+        </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 添加或修改碳计量日对话框 -->
-    <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="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="caEmissionQuantity">
-          <el-input v-model="form.caEmissionQuantity" placeholder="请输入碳排放量 "/>
-        </el-form-item>
-        <el-form-item label="碳汇量" prop="caSinkQuantity">
-          <el-input v-model="form.caSinkQuantity" 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>
+        <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 {addCaMeterD, delCaMeterD, getCaMeterD, listCaMeterD, updateCaMeterD} from "@/api/ca/caMeterD";
+import { areaTreeByFacsCategory } from '@/api/basecfg/area'
 
 export default {
   name: "CaMeterD",
@@ -158,14 +88,21 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      areaOptions: [],
+      areaName: undefined,
+      facsCategory: 'Z',
+      facsSubCategory: '',
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
         areaCode: null,
-        date: null,
-        caEmissionQuantity: null,
-        caSinkQuantity: null
+        startRecTime: null,
+        endRecTime: null,
       },
       // 表单参数
       form: {},
@@ -181,6 +118,8 @@ export default {
     };
   },
   created() {
+    this.setTodayDate();
+    this.getAreaList();
     this.getList();
   },
   methods: {
@@ -219,65 +158,48 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.single = selection.length !== 1
-      this.multiple = !selection.length
+    // 查询区域列表
+    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'
+      })
     },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加碳计量日";
+    setTodayDate() {
+      // 获取当前日期
+      const today = new Date();
+
+      // 设置开始日期为当月第一天
+      const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+      this.queryParams.startRecTime = this.formatDate(firstDayOfMonth);
+
+      // 设置结束日期为昨天
+      const yesterday = new Date(today);
+      yesterday.setDate(yesterday.getDate() - 1);
+      this.queryParams.endRecTime = this.formatDate(yesterday);
     },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id || this.ids
-      getCaMeterD(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改碳计量日";
-      });
+    formatDate(date) {
+      // 格式化日期为 yyyy-MM-dd 格式
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      return `${year}-${month}-${day}`
     },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.id != null) {
-            updateCaMeterD(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addCaMeterD(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
+    // 筛选节点
+    filterNode (value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
     },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除碳计量日编号为"' + ids + '"的数据项？').then(function () {
-        return delCaMeterD(ids);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {
-      });
+    // 节点单击事件
+    handleNodeClick (data) {
+      this.queryParams.areaCode = data.id
+      this.getList()
     },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('ems/caMeterD/export', {
-        ...this.queryParams
-      }, `caMeterD_${new Date().getTime()}.xlsx`)
-    }
   }
 };
 </script>

ems-ui-cloud/src/views/ca/emissionCalc.vue

@@ -1,136 +1,70 @@
 <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="areaNamez">
-        <el-input
-          v-model="queryParams.areaName"
-          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>
-        <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="10" class="mb8">
-      <!--      <el-col :span="1.5">-->
-      <!--        <el-button-->
-      <!--          type="primary"-->
-      <!--          plain-->
-      <!--          icon="el-icon-plus"-->
-      <!--          size="mini"-->
-      <!--          @click="handleAdd"-->
-      <!--          v-hasPermi="['ems:caMeterD: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:caMeterD: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:caMeterD: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:caMeterD:export']"-->
-      <!--        >导出</el-button>-->
-      <!--      </el-col>-->
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
+    <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-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 label="结束日期" prop="date">
+            <el-date-picker clearable
+                            v-model="queryParams.endRecTime"
+                            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-table v-loading="loading" :data="caMeterDList" @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="date" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.date, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="碳汇量(kg)" align="center" prop="caSinkQuantity"/>
-      <!--      <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:caMeterD:edit']"-->
-      <!--          >修改</el-button>-->
-      <!--          <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn" @click="handleDelete(scope.row)" v-hasPermi="['ems:caMeterD:remove']">-->
-      <!--            删除</el-button>-->
+        <el-row :gutter="10" class="mb8">
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
 
-      <!--        </template>-->
-      <!--      </el-table-column>-->
-    </el-table>
+        <el-table v-loading="loading" :data="caMeterDList">
+          <el-table-column label="园区名称" align="center" prop="areaName"/>
+          <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="碳汇量(kg)" align="center" prop="caSinkQuantity"/>
+        </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 添加或修改碳计量日对话框 -->
-    <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="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="caSinkQuantity">
-          <el-input v-model="form.caSinkQuantity" 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>
+        <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 {addCaMeterD, delCaMeterD, getCaMeterD, listCaMeterD, updateCaMeterD} from "@/api/ca/caMeterD";
+import {  listCaMeterD } from "@/api/ca/caMeterD";
+import { areaTreeByFacsCategory } from '@/api/basecfg/area'
 
 export default {
   name: "CaMeterD",
@@ -154,14 +88,21 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      areaOptions: [],
+      areaName: undefined,
+      facsCategory: 'Z',
+      facsSubCategory: '',
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
         areaCode: null,
-        date: null,
-        caEmissionQuantity: null,
-        caSinkQuantity: null
+        startRecTime: null,
+        endRecTime: null,
       },
       // 表单参数
       form: {},
@@ -177,6 +118,8 @@ export default {
     };
   },
   created() {
+    this.setTodayDate();
+    this.getAreaList();
     this.getList();
   },
   methods: {
@@ -215,65 +158,48 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.single = selection.length !== 1
-      this.multiple = !selection.length
+    // 查询区域列表
+    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'
+      })
     },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加碳计量日";
+    setTodayDate() {
+      // 获取当前日期
+      const today = new Date();
+
+      // 设置开始日期为当月第一天
+      const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+      this.queryParams.startRecTime = this.formatDate(firstDayOfMonth);
+
+      // 设置结束日期为昨天
+      const yesterday = new Date(today);
+      yesterday.setDate(yesterday.getDate() - 1);
+      this.queryParams.endRecTime = this.formatDate(yesterday);
     },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id || this.ids
-      getCaMeterD(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改碳计量日";
-      });
+    formatDate(date) {
+      // 格式化日期为 yyyy-MM-dd 格式
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      return `${year}-${month}-${day}`
     },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.id != null) {
-            updateCaMeterD(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addCaMeterD(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
+    // 筛选节点
+    filterNode (value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
     },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除碳计量日编号为"' + ids + '"的数据项？').then(function () {
-        return delCaMeterD(ids);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {
-      });
+    // 节点单击事件
+    handleNodeClick (data) {
+      this.queryParams.areaCode = data.id
+      this.getList()
     },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.download('ems/caMeterD/export', {
-        ...this.queryParams
-      }, `caMeterD_${new Date().getTime()}.xlsx`)
-    }
   }
 };
 </script>

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

@@ -1,151 +1,62 @@
 <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="areaName">
-        <el-input
-            v-model="queryParams.areaCode"
-            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="caEmission">
-        <el-input
-            v-model="queryParams.caEmission"
-            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="10" class="mb8">
-<!--      <el-col :span="1.5">-->
-<!--        <el-button-->
-<!--            type="primary"-->
-<!--            plain-->
-<!--            icon="el-icon-plus"-->
-<!--            size="mini"-->
-<!--            @click="handleAdd"-->
-<!--            v-hasPermi="['ems:forecastCa: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:forecastCa: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:forecastCa: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:forecastCa:export']"-->
-<!--        >导出-->
-<!--        </el-button>-->
-<!--      </el-col>-->
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="forecastCaList" @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="date" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.date, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="碳排量（kg）" align="center" prop="caEmission" />
-<!--      <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:forecastCa:edit']"-->
-<!--          >修改-->
-<!--          </el-button>-->
+    <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-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:forecastCa:remove']">-->
-<!--            删除</el-button>-->
-<!--        </template>-->
-<!--      </el-table-column>-->
-    </el-table>
+        <el-row :gutter="10" class="mb8">
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
 
-    <pagination
-        v-show="total>0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
-    />
+        <el-table v-loading="loading" :data="forecastCaList" @selection-change="handleSelectionChange">
+          <el-table-column label="园区名称" align="center" prop="areaName" />
+          <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="碳排量（kg）" align="center" prop="caEmission" />
+        </el-table>
 
-    <!-- 添加或修改碳排放预测对话框 -->
-    <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="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="caEmission">
-          <el-input v-model="form.caEmission" 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>
+        <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 {
-  listForecastCa, getForecastCa, delForecastCa, addForecastCa, updateForecastCa,
-} from '@/api/prediction/forecastCa';
+import { listForecastCa } from '@/api/prediction/forecastCa';
+import { areaTreeByFacsCategory } from '@/api/basecfg/area'
 
 export default {
   name: 'ForecastCa',
@@ -169,13 +80,21 @@ export default {
       title: '',
       // 是否显示弹出层
       open: false,
+      // 表单参数
+      areaOptions: [],
+      areaName: undefined,
+      facsCategory: 'Z',
+      facsSubCategory: '',
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
         areaCode: null,
-        date: null,
-        caEmission: null,
+        startRecTime: null,
       },
       // 表单参数
       form: {},
@@ -199,6 +118,8 @@ export default {
     };
   },
   created() {
+    this.setTodayDate();
+    this.getAreaList();
     this.getList();
   },
   methods: {
@@ -211,6 +132,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'
+      })
+    },
+    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}`;
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -236,63 +179,15 @@ export default {
       this.resetForm('queryForm');
       this.handleQuery();
     },
-    // 多选框选中数据
-    handleSelectionChange(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 = '添加碳排放预测';
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      const id = row.id || this.ids;
-      getForecastCa(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) {
-            updateForecastCa(this.form).then(response => {
-              this.$modal.msgSuccess('修改成功');
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addForecastCa(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 delForecastCa(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/forecastCa/export', {
-        ...this.queryParams,
-      }, `forecastCa_${new Date().getTime()}.xlsx`);
+    // 节点单击事件
+    handleNodeClick (data) {
+      this.queryParams.areaCode = data.id
+      this.getList()
     },
   },
 };

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

@@ -42,7 +42,7 @@
         </el-row>
 
         <el-table v-loading="loading" :data="predictionProdList" >
-          <el-table-column label="园区名称" align="center" prop="areaName"/>
+          <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">