自动手动抄表-树结构

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

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

@@ -9,8 +9,10 @@
           />
         </div>
         <div class="head-container">
-          <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"/>
+          <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>
@@ -161,7 +163,6 @@ export default {
   name: 'ElecMeterH',
   data() {
     return {
-      mergedTreeData: [],
       activeTab: 'first',
       // 遮罩层
       loading: true,
@@ -237,8 +238,10 @@ export default {
     handleTabChange() {
       // 根据newTabName给someParam赋值
       if (this.activeTab === 'first') {
+        // 电表读数
         this.getElecList()
       } else if (this.activeTab === 'second') {
+        // 水表读数
         this.getWaterList()
       }
       this.handleQuery()
@@ -252,44 +255,14 @@ export default {
     handleNodeClick(data) {
       this.queryParams.areaCode = data.id
       console.log('this.queryParams.areaCode ', this.queryParams.areaCode)
-    //  this.handleQuery()
-      if (this.activeTab === 'first') {
-        this.getElecList();
-      } else if (this.activeTab === 'second') {
-        this.getWaterList();
-      }
+      this.handleQuery()
     },
     /**树结构*/
     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)
@@ -305,10 +278,8 @@ 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(); // 合并数据
       })
     },
 
@@ -317,10 +288,8 @@ 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

@@ -4,12 +4,11 @@
       <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" />
+                    style="margin-bottom: 20px" />
         </div>
         <div class="head-container">
-          <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"
-          />
+          <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">
@@ -28,75 +27,38 @@
             <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>
 
-            <!-- 上半部分：表格 -->
-                <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" />
+            </template>
+          </el-table-column>
+        </el-table>
 
-            <!-- 下半部分：查看 -->
-                <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>
-
-       <!--填报-->
+        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+                    @pagination="getList" />
         <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="表计编号">
@@ -129,41 +91,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">-->
-<!--                    &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-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-col>
     </el-row>
   </div>
@@ -182,7 +144,6 @@ export default {
   data() {
     const nowDay = new Date()
     return {
-      mergedTreeData: [] ,// 合并后的树结构数据
       currentMonth: dateFormat(nowDay, 'yyyyMM'),
       activeTab: 'first',
       // 遮罩层
@@ -250,9 +211,8 @@ export default {
     }
   },
   created() {
-    this.getList()
     this.getAreaTreeSelect('0', false)
-
+    this.getList()
   },
 
   methods: {
@@ -268,7 +228,6 @@ export default {
         }))
         this.total = response.total
         this.loading = false
-
         this.deviceList.forEach(async item => {
           await getLastRecord(item.areaCode, item.deviceCode).then(({ data }) => {
             if (data) {
@@ -278,35 +237,8 @@ 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
@@ -352,8 +284,11 @@ 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
@@ -361,12 +296,10 @@ export default {
     },
     // 节点单击事件
     handleNodeClick(data) {
-      console.log("树结构点击",data)
       this.queryParams.areaCode = data.id
-      this.handleQuery(data)
+      this.handleQuery()
     },
     handleViewRec(row) {
-      console.log("查看row",row)
       this.recListForm = this.$options.data().recListForm
       this.resetForm('recListForm')
       this.title = row.deviceName
@@ -412,7 +345,7 @@ export default {
       // if (row.meterMonth===this.currentMonth) {
       //   this.$modal.msgError('当前月份已填报')
       // } else {
-        this.fillFormOpen = true
+      this.fillFormOpen = true
       // }
     },
     canEdit(meterMonth) {