数组转树形结构

packages/conv/creditScore/AppGridMemberScore/components/gridScoreDetail.vue

@@ -121,6 +121,9 @@ export default {
         }
       })
     },
+
+    // 事件汇总暂定
+
     // 余额变动明细
     getIntegralChange() {
       this.instance.post(`/app/appintegraluser/getChangeDetail`, null, {

packages/conv/creditScore/AppGridMemberScore/components/gridScoreStatistics.vue

@@ -43,25 +43,11 @@
       <template #content>
         <ai-search-bar>
           <template #left>
-            <el-select size="small" style="width: 200px;" v-model="search.girdId" placeholder="所属网格" clearable
-                      @change="getListInit()">
-              <el-option v-for="(item,i) in girdList" :key="i" :label="item.girdName" :value="item.id"></el-option>
-            </el-select>
-            <ai-select
-              v-model="search.level"
-              clearable
-              placeholder="类型"
-              :selectList="$dict.getDict('epidemicDangerousAreaLevel')"
-              @change="search.current = 1, getList()">
-            </ai-select>
-            <el-date-picker
-              v-model="time"
-              type="datetimerange"
-              range-separator="至"
-              size="small"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期">
-            </el-date-picker>
+            <el-cascader ref="cascader1" v-model="girdId" :options="girdOptions" placeholder="所属网格" size="small" 
+              :props="defaultProps" :show-all-levels="false" @change="gridChange"></el-cascader>
+            <!-- <el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd" 
+              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
+            </el-date-picker> -->
           </template>
           <template #right>
             <el-input size="small" placeholder="请输入居民名称或真实姓名" v-model="search.name" clearable
@@ -148,7 +134,6 @@ export default {
         value: 'id',
         checkStrictly: true,
         expandTrigger: 'hover',
-        children: 'girdList'
       }
     }
   },
@@ -156,13 +141,13 @@ export default {
     ...mapState(['user']),
     colConfigs() {
       return [
-        { prop: "", label: '姓名', align: "left", width: "200px" },
-        { prop: "", label: '所属网格', align: "center", width: "180px" },
-        { prop: "", label: '事件', align: "center",width: "200px" },
-        { prop: "", label: '类型', align: "center",width: "200px" },
-        { prop: "", label: '积分变动', align: "center", },
-        { prop: "", label: '剩余积分', align: "center", },
-        { prop: "", label: '时间', align: "center", },
+        { prop: "integralUserName", label: '姓名', align: "left", width: "200px" },
+        { prop: "girdName", label: '所属网格', align: "center", width: "180px" },
+        { prop: "eventDesc", label: '事件', align: "center",width: "200px" },
+        { prop: "integralType", label: '类型', align: "center",width: "200px" },
+        { prop: "changeIntegral", label: '积分变动', align: "center", },
+        { prop: "nowIntegral", label: '剩余积分', align: "center", },
+        { prop: "createTime", label: '时间', align: "center", },
         { slot: "options" }
       ]
     }
@@ -172,6 +157,7 @@ export default {
     this.getStatistics()
     this.getGridList()
     this.getRanking()
+    this.getTableData()
   },
   methods: {
     // 统计接口
@@ -189,7 +175,7 @@ export default {
         }
       })
     },
-    // 事件汇总暂定
+    
     // 人员、网格排行
     getRanking() {
       this.instance.post('/app/appintegraluser/userAndGirdIntegralSort',null,{
@@ -203,6 +189,25 @@ export default {
         console.log(res);
       })
     },
+    // 积分明细
+    getTableData() {
+      this.instance.post('/app/appintegraluser/girdIntegralDetail',null,{
+        params: {
+          ...this.page,
+          girdId: this.girdIdUser,
+          integralType: this.integralType,
+          startTime: this.startTime,
+          endTime: this.endTime,
+          name: this.search.name,
+        }
+      }).then(res => {
+        if(res?.data) {
+          this.tableData = res.data.records
+          this.page.total = res.data.total
+        }
+      })
+    },
+
     getColEcherts1() {
       let chartDom1 = document.getElementById('chart1');
       chartDom1.style.width = (window.innerWidth - 435) / 2 + "px";
@@ -332,36 +337,46 @@ export default {
     gridChange(val) {
       this.girdId = val?.[val.length - 1]
       this.$refs.cascader1.dropDownVisible = false;
+      this.getStatistics()
+      this.getRanking()
     },
 
     getGridList() {
-      this.instance.post(`/app/appgirdinfo/listAll`).then((res) => {
+      this.instance.post(`/app/appgirdinfo/listAll3`).then((res) => {
         if (res.code == 0) {
-          this.girdOptions = this.formatTree(res.data)
+          this.girdOptions = this.toTree(res.data)
         }
       })
     },
 
-    formatTree(data) {
-      for (var i = 0; i < data.length; i++){
-        if(data[i].girdList.length < 1) {
-          data[i].girdList = undefined
-        } else {
-          this.formatTree(data[i].girdList)
-        }
+    // 转树形结构
+    toTree(data) {
+      let result = [];
+      if (!Array.isArray(data)) {
+        return result
       }
-      return data
+      let map = {};
+      data.forEach(item => {
+        map[item.id] = item;
+      });
+      data.forEach(item => {
+        let parent = map[item.parentGirdId];
+        if (parent) {
+          (parent.children || (parent.children = [])).push(item);
+        } else {
+          result.push(item);
+        }
+      });
+      return result;
     },
 
-    getTableData() {},
-
     timeChange(index) {
       if(index == 3) {
         this.dialogDate = true
-        this.type = index
-      } else {
-        this.type = index
-      }
+      } 
+      this.type = index
+      this.getStatistics()
+      this.getRanking()
     },
 
     open(id) {