自动手动-树结构

Signed-off-by: hsshuxian <3049816743@qq.com>

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

@@ -898,7 +898,7 @@ export default {
                 .then(response => {
                   if (response.code === 200) {
                     this.$message.success('属性添加成功')
-                  } 
+                  }
                 })
             }
           }

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

@@ -565,10 +565,10 @@ export default {
         { code: 2, name: '需量电价' }
       ],
       repeatTypeOptions: [
-        { name: '执行1次', value: 1 },
+        // { name: '执行1次', value: 1 },
         { name: '每天', value: 2 },
-        { name: '法定工作日（跳过节假日）', value: 3 },
-        { name: '法定节假日（跳过工作日）', value: 4 },
+        // { name: '法定工作日（跳过节假日）', value: 3 },
+        // { name: '法定节假日（跳过工作日）', value: 4 },
         { name: '周一至周五', value: 5 },
         { name: '自定义', value: 6 }
       ],

ems-ui-cloud/src/views/devmgr/meterData/index.vue

@@ -9,10 +9,8 @@
           />
         </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"
-          />
+          <el-tree :data="mergedTreeData" :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>
@@ -163,6 +161,7 @@ export default {
   name: 'ElecMeterH',
   data() {
     return {
+      mergedTreeData: [],
       activeTab: 'first',
       // 遮罩层
       loading: true,
@@ -238,10 +237,8 @@ export default {
     handleTabChange() {
       // 根据newTabName给someParam赋值
       if (this.activeTab === 'first') {
-        // 电表读数
         this.getElecList()
       } else if (this.activeTab === 'second') {
-        // 水表读数
         this.getWaterList()
       }
       this.handleQuery()
@@ -255,14 +252,44 @@ export default {
     handleNodeClick(data) {
       this.queryParams.areaCode = data.id
       console.log('this.queryParams.areaCode ', this.queryParams.areaCode)
-      this.handleQuery()
+    //  this.handleQuery()
+      if (this.activeTab === 'first') {
+        this.getElecList();
+      } else if (this.activeTab === 'second') {
+        this.getWaterList();
+      }
     },
     /**树结构*/
     async getAreaTreeSelect(areaCode, recursion) {
       await areaTreeSelect(areaCode, recursion).then(response => {
         this.areaOptions = response.data
+        console.log("树结构",this.areaOptions)
+        this.mergeData()
       })
     },
+    mergeData() {
+      if (!this.areaOptions || (!this.elecMeterHList && !this.waterMeterHList)) return;
+      const deviceMap = {};
+      const allDevices = this.activeTab === 'first' ? this.elecMeterHList : this.waterMeterHList;
+
+      allDevices.forEach(device => {
+        if (!deviceMap[device.areaCode]) {
+          deviceMap[device.areaCode] = [];
+        }
+        deviceMap[device.areaCode].push({
+          id: device.deviceCode,
+          label: device.deviceName,
+        });
+      });
+
+      // 合并数据
+      this.mergedTreeData = this.areaOptions.map(area => ({
+        ...area,
+        children: deviceMap[area.id] || []
+      }));
+    },
+
+
     formatDateTime(dateTime) {
       if (!dateTime) return ''
       const date = new Date(dateTime)
@@ -278,8 +305,10 @@ export default {
       this.loading = true
       listElecMeterH(this.queryParams).then(response => {
         this.elecMeterHList = response.rows
+        console.log("电表数据",this.elecMeterHList)
         this.total = response.total
         this.loading = false
+        this.mergeData(); // 合并数据
       })
     },
 
@@ -288,8 +317,10 @@ export default {
       this.loading = true
       listWaterMeterH(this.queryParams).then(response => {
         this.waterMeterHList = response.rows
+        console.log("水表数据",this.waterMeterHList)
         this.total = response.total
         this.loading = false
+        this.mergeData(); // 合并数据
       })
     },
 

ems-ui-cloud/src/views/devmgr/meterRead/index.vue

@@ -7,8 +7,9 @@
             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" />
+          <el-tree :data="mergedTreeData" :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">
@@ -27,38 +28,75 @@
             <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
           </el-form-item>
         </el-form>
-        <el-table v-loading="loading" :data="deviceList">
-          <el-table-column label="表计名称" align="left" prop="deviceName" width="200px">
-            <template slot-scope="scope">
-              <span>{{ scope.row.deviceName }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="设备代码" align="center" prop="deviceCode" />
-          <el-table-column label="计量标签" align="center" prop="objTag">
-            <template slot-scope="scope">
-              <span>{{ getObjTagName(scope.row.objTag) }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="抄表周期" align="center" prop="colCycle">
-            <template slot-scope="scope">
-              <span>{{ getColCycleName(scope.row.colCycle) }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="上次抄表日期" align="center" prop="lastTime" />
-          <el-table-column label="上次抄表示数" align="center" prop="lastReading" />
-          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template slot-scope="scope">
-              <el-button size="mini" type="text" :disabled="!canFill(scope.row.lastTime)" icon="el-icon-info" @click="handleRecord(scope.row)">
-                填报</el-button>
-              <el-button size="mini" type="text"  icon="el-icon-document" @click="handleViewRec(scope.row)">
-                查看</el-button>
 
-            </template>
-          </el-table-column>
-        </el-table>
+            <!-- 上半部分：表格 -->
+                <el-table v-loading="loading" :data="deviceList">
+                  <el-table-column label="表计名称" align="left" prop="deviceName" width="200px">
+                    <template slot-scope="scope">
+                      <span>{{ scope.row.deviceName }}</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="设备代码" align="center" prop="deviceCode" />
+                  <el-table-column label="计量标签" align="center" prop="objTag">
+                    <template slot-scope="scope">
+                      <span>{{ getObjTagName(scope.row.objTag) }}</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="抄表周期" align="center" prop="colCycle">
+                    <template slot-scope="scope">
+                      <span>{{ getColCycleName(scope.row.colCycle) }}</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="上次抄表日期" align="center" prop="lastTime" />
+                  <el-table-column label="上次抄表示数" align="center" prop="lastReading" />
+                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                    <template slot-scope="scope">
+                      <el-button size="mini" type="text" :disabled="!canFill(scope.row.lastTime)" icon="el-icon-info" @click="handleRecord(scope.row)">
+                        填报</el-button>
+                      <el-button size="mini" type="text" icon="el-icon-document" @click="handleViewRec(scope.row)">
+                        查看</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" />
 
-        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-          @pagination="getList" />
+            <!-- 下半部分：查看 -->
+                <el-form ref="recListForm" :model="recListForm" label-width="80px">
+                  <el-form-item label="年份" prop="year">
+                    <el-date-picker v-model="recListForm.year" :clearable="false" @change="getHistoryList" value-format="yyyy" type="year"
+                                    placeholder="选择年份">
+                    </el-date-picker>
+                  </el-form-item>
+                  <el-form-item label="计量设备" prop="year">
+                    <el-input disabled :value="recListForm.deviceCode" />
+                  </el-form-item>
+                  <el-form-item label="抄表历史" prop="recList">
+                    <el-table v-loading="loading" :data="recListForm.recList" max-height="280px">
+                      <el-table-column label="年份" align="center" prop="year" />
+                      <el-table-column label="月份" align="center" prop="meterMonth">
+                        <template slot-scope="scope">
+                          <!-- 使用 JavaScript 字符串方法截取月份部分 -->
+                          {{ scope.row.meterMonth.slice(-2) }}
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="抄表示数" align="center" prop="meterReading" />
+                      <el-table-column label="用量" align="center" prop="increase" />
+                      <el-table-column label="抄表日期" align="center" prop="meterTime" />
+                      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                        <template slot-scope="scope">
+                          <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="!canEdit(scope.row.meterMonth)"
+                                     @click="updateRecord(scope.row)">修改</el-button>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+                  </el-form-item>
+                </el-form>
+                <div slot="footer" class="dialog-footer">
+                  <el-button @click="closeRecList">关 闭</el-button>
+                </div>
+
+       <!--填报-->
         <el-dialog :title="fillTitle" :visible.sync="fillFormOpen" width="500px" append-to-body>
           <el-form ref="fillForm" :model="fillForm" label-width="150px">
             <el-form-item label="表计编号">
@@ -91,41 +129,41 @@
           </div>
         </el-dialog>
         <!-- 历史抄表记录 -->
-        <el-dialog :title="title" :visible.sync="recListOpen" width="1200px" append-to-body>
-          <el-form ref="recListForm" :model="recListForm" label-width="80px">
-            <el-form-item label="年份" prop="year">
-              <el-date-picker v-model="recListForm.year" :clearable="false" @change="getHistoryList" value-format="yyyy" type="year"
-                placeholder="选择年份">
-              </el-date-picker>
-            </el-form-item>
-            <el-form-item label="计量设备" prop="year">
-              <el-input disabled :value="recListForm.deviceCode" />
-            </el-form-item>
-            <el-form-item label="抄表历史" prop="recList">
-              <el-table v-loading="loading" :data="recListForm.recList" max-height="280px">
-                <el-table-column label="年份" align="center" prop="year" />
-                <el-table-column label="月份" align="center" prop="meterMonth" >
-                  <template slot-scope="scope">
-                    <!-- 使用 JavaScript 字符串方法截取月份部分 -->
-                    {{ scope.row.meterMonth.slice(-2) }}
-                  </template>
-                </el-table-column>
-                <el-table-column label="抄表示数" align="center" prop="meterReading" />
-                <el-table-column label="用量" align="center" prop="increase" />
-                <el-table-column label="抄表日期" align="center" prop="meterTime" />
-                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-                  <template slot-scope="scope">
-                    <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="!canEdit(scope.row.meterMonth)"
-                      @click="updateRecord(scope.row)">修改</el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </el-form-item>
-          </el-form>
-          <div slot="footer" class="dialog-footer">
-            <el-button @click="closeRecList">关 闭</el-button>
-          </div>
-        </el-dialog>
+<!--        <el-dialog :title="title" :visible.sync="recListOpen" width="1200px" append-to-body>-->
+<!--          <el-form ref="recListForm" :model="recListForm" label-width="80px">-->
+<!--            <el-form-item label="年份" prop="year">-->
+<!--              <el-date-picker v-model="recListForm.year" :clearable="false" @change="getHistoryList" value-format="yyyy" type="year"-->
+<!--                placeholder="选择年份">-->
+<!--              </el-date-picker>-->
+<!--            </el-form-item>-->
+<!--            <el-form-item label="计量设备" prop="year">-->
+<!--              <el-input disabled :value="recListForm.deviceCode" />-->
+<!--            </el-form-item>-->
+<!--            <el-form-item label="抄表历史" prop="recList">-->
+<!--              <el-table v-loading="loading" :data="recListForm.recList" max-height="280px">-->
+<!--                <el-table-column label="年份" align="center" prop="year" />-->
+<!--                <el-table-column label="月份" align="center" prop="meterMonth" >-->
+<!--                  <template slot-scope="scope">-->
+<!--                    &lt;!&ndash; 使用 JavaScript 字符串方法截取月份部分 &ndash;&gt;-->
+<!--                    {{ scope.row.meterMonth.slice(-2) }}-->
+<!--                  </template>-->
+<!--                </el-table-column>-->
+<!--                <el-table-column label="抄表示数" align="center" prop="meterReading" />-->
+<!--                <el-table-column label="用量" align="center" prop="increase" />-->
+<!--                <el-table-column label="抄表日期" align="center" prop="meterTime" />-->
+<!--                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
+<!--                  <template slot-scope="scope">-->
+<!--                    <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="!canEdit(scope.row.meterMonth)"-->
+<!--                      @click="updateRecord(scope.row)">修改</el-button>-->
+<!--                  </template>-->
+<!--                </el-table-column>-->
+<!--              </el-table>-->
+<!--            </el-form-item>-->
+<!--          </el-form>-->
+<!--          <div slot="footer" class="dialog-footer">-->
+<!--            <el-button @click="closeRecList">关 闭</el-button>-->
+<!--          </div>-->
+<!--        </el-dialog>-->
       </el-col>
     </el-row>
   </div>
@@ -144,6 +182,7 @@ export default {
   data() {
     const nowDay = new Date()
     return {
+      mergedTreeData: [] ,// 合并后的树结构数据
       currentMonth: dateFormat(nowDay, 'yyyyMM'),
       activeTab: 'first',
       // 遮罩层
@@ -211,8 +250,9 @@ export default {
     }
   },
   created() {
-    this.getAreaTreeSelect('0', false)
     this.getList()
+    this.getAreaTreeSelect('0', false)
+
   },
 
   methods: {
@@ -228,6 +268,7 @@ export default {
         }))
         this.total = response.total
         this.loading = false
+
         this.deviceList.forEach(async item => {
           await getLastRecord(item.areaCode, item.deviceCode).then(({ data }) => {
             if (data) {
@@ -237,8 +278,35 @@ export default {
             }
           })
         })
+        this.mergeData();
       })
     },
+
+    // 获取树结构数据
+    async getAreaTreeSelect() {
+      const response = await areaTreeSelect('0', false);
+      this.areaOptions = response.data;
+      this.mergeData();
+    },
+    // 合并数据
+    mergeData() {
+      if (!this.areaOptions || !this.deviceList) return;
+      const deviceMap = {};
+      this.deviceList.forEach(device => {
+        if (!deviceMap[device.areaCode]) {
+          deviceMap[device.areaCode] = [];
+        }
+        deviceMap[device.areaCode].push({
+          id: device.deviceCode,
+          label: device.deviceName,
+        });
+      });
+      this.mergedTreeData = this.areaOptions.map(area => ({
+        ...area,
+        children: deviceMap[area.id] || []
+      }));
+    },
+
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1
@@ -284,11 +352,8 @@ export default {
       }
       return tagMap[objTag] || '未知'
     },
-    async getAreaTreeSelect(areaCode, recursion) {
-      await areaTreeSelect(areaCode, recursion).then(response => {
-        this.areaOptions = response.data
-      })
-    },
+
+
     // 筛选节点
     filterNode(value, data) {
       if (!value) return true
@@ -296,10 +361,12 @@ export default {
     },
     // 节点单击事件
     handleNodeClick(data) {
+      console.log("树结构点击",data)
       this.queryParams.areaCode = data.id
-      this.handleQuery()
+      this.handleQuery(data)
     },
     handleViewRec(row) {
+      console.log("查看row",row)
       this.recListForm = this.$options.data().recListForm
       this.resetForm('recListForm')
       this.title = row.deviceName