用能预测

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

@@ -314,11 +314,10 @@ import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import { areaTreeSelect, listDetailArea } from '@/api/basecfg/area'
 import SubTitle from '@/components/SubTitle/index.vue'
 import { getDevProcess, getEmsTag } from '@/api/commonApi'
-import { delDevice, listDevice } from '@/api/device/meterDevice'
+import { listDevice } from '@/api/device/meterDevice'
 import { addAllByObj, listByObj ,getBoundaryTreeByArea } from '@/api/basecfg/meterBoundary'
 import { listDept } from '@/api/system/dept'
-import {getFacsCategoryTree, getFacsCategorygetByCode, listAllFacs, listFacs } from '@/api/basecfg/emsfacs'
-import { listDevRecursionByArea } from '@/api/device/device'
+import { getFacsCategoryTree, listAllFacs } from '@/api/basecfg/emsfacs'
 import { listSubsystemAll } from '@/api/adapter/subsystem'
 import {getTreeByFacs} from '@/api/device/device.js'
 

ems-ui-cloud/src/views/mgr/chargingpile.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="app-container">
+    <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">
+          <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" />
+        </div>
+      </el-col>
+      <el-col :span="20" :xs="24">
+        <el-row :gutter="20">
+          <el-col :span="6" v-for="(item, index) in chargingStation" :key="index">
+            <el-card class="box-card" :style="getCardStyle(item)">
+                <h2>{{ item.deviceName }}</h2>
+              <div class="status" :style="getStatusStyle(item.deviceStatus)">
+                {{ item.deviceStatus === 1 ? '在线' : '离线' }}
+              </div>
+              <div class="state" :style="getStateStyle(item.state)">
+                {{ item.stateName }}
+              </div>
+              <div class="card-content">
+                <p>电流：{{ item.current }} {{ item.currentUnit }}</p>
+                <p>电压：{{ item.voltage }} {{ item.voltageUnit }}</p>
+                <p>功率：{{ item.power }} {{ item.powerUnit }}</p>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+
+import { areaTreeByFacsCategory, areaTreeSelect } from '@/api/basecfg/area'
+import {getByCondition} from '@/api/device/device.js'
+import { getObjAttr } from '@/api/basecfg/objAttribute'
+
+
+export default {
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 充电桩表格数据
+      chargingStation: [],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      areaCode: undefined,
+      // 区域名称
+      areaName: undefined,
+      areaOptions: [],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        areaCode: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {},
+    };
+  },
+  created() {
+    this.getAreaTree('Z', '',false)
+    this.getList()
+  },
+  methods: {
+    /** 查询充电桩列表 */
+    getList() {
+      this.loading = true;
+      getByCondition({
+        areaCode: this.queryParams.areaCode,
+        psCode: 'DC-EVSE'
+      }).then(({ code, data }) => {
+        if (code === 200) {
+          const promises = data.map(item => {
+            return getObjAttr(2, item.deviceCode).then(response => {
+              if (response.code === 200) {
+                const measureData = response.data.Measure || [];
+                const power = measureData.find(attr => attr.attrKey === 'power')?.attrValue || '0';
+                const powerUnit = measureData.find(attr => attr.attrKey === 'power')?.attrUnit || 'W';
+                const voltage = measureData.find(attr => attr.attrKey === 'voltage')?.attrValue || '0';
+                const voltageUnit = measureData.find(attr => attr.attrKey === 'voltage')?.attrUnit || 'V';
+                const current = measureData.find(attr => attr.attrKey === 'current')?.attrValue || '0';
+                const currentUnit = measureData.find(attr => attr.attrKey === 'current')?.attrUnit || 'A';
+                const stateData = response.data.State || [];
+                const state = stateData.find(attr => attr.attrGroup === 'State')?.attrValue || -1;
+                const stateName = stateData.find(attr => attr.attrGroup === 'State')?.attrValueName || '';
+                item.current = current;
+                item.currentUnit = currentUnit;
+                item.voltage = voltage;
+                item.voltageUnit = voltageUnit;
+                item.power = power;
+                item.powerUnit = powerUnit;
+                item.state = state;
+                item.stateName = stateName;
+              }
+            });
+          });
+          Promise.all(promises).then(() => {
+            this.chargingStation = data;
+          });
+        }
+      })
+    },
+
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm('queryForm');
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+
+    // 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+
+    // 节点单击事件
+    handleNodeClick(data) {
+      if (data.id === '-1') {
+        this.queryParams.areaCode = null;
+      } else {
+        this.queryParams.areaCode = data.id;
+      }
+      this.handleQuery();
+    },
+    /** 查询区域树结构 */
+    getAreaTree(category, subCategory, recursion) {
+       areaTreeByFacsCategory(category, subCategory, recursion).then(response => {
+         this.areaOptions = [{
+           id: null,
+           label: '全部',
+           children: []
+         }].concat(response.data)
+      })
+    },
+    /** 获取卡片背景颜色*/
+    getCardStyle(item) {
+      if (item.deviceStatus === 0 || item.state === "2") {
+        return 'background: linear-gradient(135deg, #dcdcdc, #f0f0f0);';
+      } else {
+        return 'background: linear-gradient(135deg, #9AF576, #FFFFFF);';
+      }
+    },
+    /**获取设备在线状态文字样式*/
+    getStatusStyle(status) {
+      return status === 1 ? 'color: #fff; background: #67c23a;' : 'color: #fff; background: linear-gradient(135deg, #f44336, #e57373);';
+    },
+    /**获取设备使用状态文字样式 0=空闲，1=使用中，2=故障*/
+    getStateStyle(state) {
+      switch (state) {
+        case '0':
+          return 'color: #fff; background: #f44336;';
+        case '1':
+          return 'color: #fff; background: #67c23a; ';
+        case '2':
+          return 'color: #fff; background: #909399;';
+      }
+    },
+  },
+};
+</script>
+
+<style lang="css" scoped>
+.box-card {
+  margin: 10px;
+  width: calc(100% - 40px);
+  position: relative;
+}
+
+.status{
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #fff;
+}
+.state{
+  position: absolute;
+  top: 35px;
+  right: 10px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #fff;
+}
+
+
+</style>

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

@@ -1,184 +1,93 @@
 <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="objCode">
-        <el-input
-            v-model="queryParams.objCode"
-            placeholder="请输入对象代码"
-            clearable
-            @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="对象类型" prop="objType">
-        <el-select v-model="queryParams.objType" placeholder="请选择对象类型" clearable>
-          <el-option
-              v-for="dict in dict.type.obj_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-          />
-        </el-select>
-      </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:forecastConsume: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:forecastConsume: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:forecastConsume: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:forecastConsume:export']"-->
-<!--        >导出-->
-<!--        </el-button>-->
-<!--      </el-col>-->
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="forecastConsumeList" @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="objName" />
-      <el-table-column label="对象代码" align="center" prop="objCode" />
-      <el-table-column label="对象类型" align="center" prop="objType">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.obj_type" :value="scope.row.objType" />
-        </template>
-      </el-table-column>
-      <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="功率(W)" align="center" prop="elecUseQuantity" />
-<!--      <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:forecastConsume:edit']"-->
-<!--          >修改-->
-<!--          </el-button>-->
-<!--          <el-button size="mini" type="text" icon="el-icon-delete" class="deleteBtn" @click="handleDelete(scope.row)" v-hasPermi="['ems:forecastConsume:remove']">-->
-<!--            删除</el-button>-->
-
-
-<!--        </template>-->
-<!--      </el-table-column>-->
-    </el-table>
+    <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="objType">
+            <el-select v-model="queryParams.objType" placeholder="请选择对象类型" clearable>
+              <el-option
+                v-for="item in objTypeOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="选择对象" prop="objCode">
+            <treeselect
+              v-model="queryParams.objCode"
+              :options="objOptions"
+              :show-count="true"
+              placeholder="请选择对象"
+              class="fixed-width-treeselect"
+            />
+          </el-form-item>
 
-    <pagination
-        v-show="total>0"
-        :total="total"
-        :page.sync="queryParams.pageNum"
-        :limit.sync="queryParams.pageSize"
-        @pagination="getList"
-    />
+          <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-row :gutter="10" class="mb8">
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+        <el-table v-loading="loading" :data="forecastConsumeList" @selection-change="handleSelectionChange">
+          <el-table-column label="对象名称" align="center" prop="objName" />
+          <el-table-column label="对象类型" align="center" prop="objType">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.obj_type" :value="scope.row.objType" />
+            </template>
+          </el-table-column>
+          <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="elecUseQuantity" />
+        </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="objCode">
-          <el-input v-model="form.objCode" placeholder="请输入对象代码" />
-        </el-form-item>
-        <el-form-item label="对象类型" prop="objType">
-          <el-select v-model="form.objType" placeholder="请选择对象类型">
-            <el-option
-                v-for="dict in dict.type.obj_type"
-                :key="dict.value"
-                :label="dict.label"
-                :value="parseInt(dict.value)"
-            ></el-option>
-          </el-select>
-        </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="elecUseQuantity">
-          <el-input v-model="form.elecUseQuantity" 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 {
-  listForecastConsume, getForecastConsume, delForecastConsume, addForecastConsume, updateForecastConsume,
-} from '@/api/prediction/forecastConsume';
+
+import { listForecastConsume } from '@/api/prediction/forecastConsume';
+import { areaTreeByFacsCategory, areaTreeSelect } from '@/api/basecfg/area'
+import { getFacsCategoryTree } from '@/api/basecfg/emsfacs'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
 export default {
   name: 'ForecastConsume',
+  components: { Treeselect },
   dicts: ['obj_type'],
   data() {
     return {
@@ -200,6 +109,27 @@ export default {
       title: '',
       // 是否显示弹出层
       open: false,
+      // 表单参数
+      areaOptions: [],
+      areaName: undefined,
+      facsCategory: 'Z',
+      facsSubCategory: '',
+      // 设施选项
+      facsOptions: undefined,
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      objOptions: [],
+      objTypeOptions: [
+        { value: '1', label: '区域' },
+        { value: '2', label: '设施' }
+      ],
+      treeProps: {
+        label: 'name',
+        value: 'code',
+        children: 'children'
+      },
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -207,7 +137,7 @@ export default {
         areaCode: null,
         objCode: null,
         objType: null,
-        date: null,
+        startRecTime: null,
         elecUseQuantity: null,
       },
       // 表单参数
@@ -246,8 +176,32 @@ export default {
     };
   },
   created() {
+    this.getAreaList();
+    this.setTodayDate();
     this.getList();
   },
+  watch: {
+// 监听 objType 的变化
+    'queryParams.objType': {
+      handler(newVal, oldVal) {
+        // 清空之前的选择
+        this.queryParams.objCode = null;
+        this.objOptions = [];
+
+        if (!newVal) return;
+
+        // 根据不同的对象类型调用不同的API
+        switch (newVal) {
+          case '1': // 区域
+            this.loadAreaData();
+            break;
+          case '2': // 设施
+            this.loadFacilityData();
+            break;
+        }
+      }
+    }
+  },
   methods: {
     /** 查询电力消耗预测列表 */
     getList() {
@@ -258,6 +212,74 @@ 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}`;
+    },
+    // 加载区域数据
+    loadAreaData() {
+      areaTreeSelect(0, 2).then(response => {
+        // 获取原始数据
+        const originalData = response.data;
+
+        // 根据 areaCode 进行过滤
+        if (this.queryParams.areaCode === '-1') {
+          // areaCode=-1 时，展示全部数据
+          this.objOptions = originalData;
+        } else {
+          // 否则，只展示匹配 areaCode 的数据
+          const filteredData = originalData.filter(item =>
+            item.id === this.queryParams.areaCode
+          );
+          // 如果找到匹配项，则使用过滤后的数据；否则使用空数组
+          this.objOptions = filteredData.length > 0 ? filteredData : [];
+        }
+      }).catch(error => {
+        console.error('加载设施数据失败:', error);
+        this.$message.error('加载设施数据失败');
+      });
+    },
+    // 加载设施数据
+    loadFacilityData() {
+      getFacsCategoryTree(0, "Z").then(response => {
+        // 获取原始数据
+        const originalData = response.data;
+
+        // 根据 areaCode 进行过滤
+        if (this.queryParams.areaCode === '-1') {
+          // areaCode=-1 时，展示全部数据
+          this.objOptions = originalData;
+        } else {
+          // 否则，只展示匹配 areaCode 的数据
+          const filteredData = originalData.filter(item =>
+            item.id === this.queryParams.areaCode
+          );
+          // 如果找到匹配项，则使用过滤后的数据；否则使用空数组
+          this.objOptions = filteredData.length > 0 ? filteredData : [];
+        }
+      }).catch(error => {
+        console.error('加载设施数据失败:', error);
+        this.$message.error('加载设施数据失败');
+      });
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -291,58 +313,76 @@ export default {
       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;
-      getForecastConsume(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) {
-            updateForecastConsume(this.form).then(response => {
-              this.$modal.msgSuccess('修改成功');
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addForecastConsume(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 delForecastConsume(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/forecastConsume/export', {
-        ...this.queryParams,
-      }, `forecastConsume_${new Date().getTime()}.xlsx`);
+    // 节点单击事件
+    handleNodeClick (data) {
+      this.queryParams.areaCode = data.id
+      this.queryParams.objType = null
+      this.queryParams.objCode = null
+      this.getList()
     },
   },
 };
 </script>
+<style scoped>
+.flex-form-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.flex-form-item {
+  margin-right: 10px;
+  margin-bottom: 0;
+  flex: 1;
+  min-width: 180px;
+}
+
+.flex-form-item-buttons {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  margin-right: 0;
+}
+
+.flex-form-item-buttons .el-button {
+  margin-right: 5px;
+}
+
+.flex-form-item-buttons .el-button:last-child {
+  margin-right: 0;
+}
+
+/* 适配小屏幕 */
+@media (max-width: 768px) {
+  .flex-form-container {
+    justify-content: flex-start;
+  }
+
+  .flex-form-item {
+    min-width: 100%;
+    margin-right: 0;
+    margin-bottom: 10px;
+  }
+
+  .flex-form-item-buttons {
+    min-width: 100%;
+    margin-bottom: 0;
+  }
+}
+
+/* 固定宽度的TreeSelect */
+.fixed-width-treeselect {
+  width: 200px; /* 设置固定宽度 */
+}
+
+/* 如果TreeSelect组件有特殊的样式需求，可能需要使用/deep/或::v-deep穿透选择器 */
+::v-deep .fixed-width-treeselect .el-input {
+  width: 100%;
+}
+</style>
+

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

@@ -16,7 +16,7 @@
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
 
           <el-form-item label="选择设施" prop="facsCode">
-            <el-select v-model="queryParams.facsCode">
+            <el-select v-model="queryParams.facsCode" clearable>
               <el-option v-for="item in facsOptions" :label="item.facsName" :value="item.facsCode"
                          :key="item.facsCode"
               />