chore: 线路信息页面调整

src/views/distributionnetwork/maintenance/line-info/index.vue

@@ -10,12 +10,12 @@
       <el-form-item label="线路名称" prop="lineNm">
         <el-input v-model="queryParams.lineNm" placeholder="请输入"></el-input>
       </el-form-item>
-	  <el-form-item label="是否检修超期" prop="isMaintOverdue">
-	    <el-checkbox v-model="queryParams.isMaintOverdue"></el-checkbox> 
-	  </el-form-item>
-	  <el-form-item label="是否重复停电" prop="isRepeatPoweroff">
-	    <el-checkbox v-model="queryParams.isRepeatPoweroff"></el-checkbox> 
-	  </el-form-item>
+      <el-form-item label="是否检修超期" prop="isMaintOverdue">
+        <el-checkbox v-model="queryParams.isMaintOverdue"></el-checkbox>
+      </el-form-item>
+      <el-form-item label="是否重复停电" prop="isRepeatPoweroff">
+        <el-checkbox v-model="queryParams.isRepeatPoweroff"></el-checkbox>
+      </el-form-item>
       <!--el-form-item label="电压等级" prop="voltLvlDsc">
         <el-input
           v-model="queryParams.voltLvlDsc"
@@ -52,10 +52,82 @@
         v-loading="loading"
         :data="dataList"
         row-key="id"
-        lazy
-        :load="load"
-        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        :expand-row-keys="expands"
+        @expand-change="expndChange"
       >
+        <el-table-column type="expand">
+          <el-table :data="childrenList" v-loading="childrenLoading">
+            <el-table-column label="序号" width="80" align="center">
+              <template slot-scope="scope">
+                {{ scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="线路名称"
+              align="center"
+              prop="lineNm"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              label="电压等级"
+              prop="voltLvlDsc"
+              align="center"
+              :show-overflow-tooltip="true"
+            >
+            </el-table-column>
+            <el-table-column
+              label="线路长度(km)"
+              prop="lineTolLen"
+              align="center"
+              :show-overflow-tooltip="true"
+            >
+            </el-table-column>
+            <el-table-column
+              label="所属市公司"
+              prop="stdCityOrgNm"
+              align="center"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              label="所属县公司"
+              prop="stdCountyOrgNm"
+              align="center"
+              :show-overflow-tooltip="true"
+            >
+            </el-table-column>
+            <el-table-column
+              label="所属供电所"
+              prop="orgNm"
+              align="center"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              label="变电站名称"
+              prop="subNm"
+              align="center"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              label="停电次数"
+              prop="poweroffNum"
+              align="center"
+            />
+            <el-table-column
+              label="无故障持续时间"
+              prop="faultFreeDuration"
+              align="center"
+              :show-overflow-tooltip="true"
+            >
+            </el-table-column>
+            <el-table-column
+              label="奖励金额"
+              prop="rewardAmount"
+              align="center"
+              :show-overflow-tooltip="true"
+            >
+            </el-table-column>
+          </el-table>
+        </el-table-column>
         <el-table-column prop="" label="序号" width="80" align="center">
           <template slot-scope="scope">
             {{ scope.row.index }}
@@ -81,12 +153,12 @@
           :show-overflow-tooltip="true"
         >
         </el-table-column>
-		<el-table-column
-		  label="所属市公司"
-		  prop="stdCityOrgNm"
-		  align="center"
-		  :show-overflow-tooltip="true"
-		/>
+        <el-table-column
+          label="所属市公司"
+          prop="stdCityOrgNm"
+          align="center"
+          :show-overflow-tooltip="true"
+        />
         <el-table-column
           label="所属县公司"
           prop="stdCountyOrgNm"
@@ -94,23 +166,19 @@
           :show-overflow-tooltip="true"
         >
         </el-table-column>
-		<el-table-column
-		  label="所属供电所"
-		  prop="orgNm"
-		  align="center"
-		  :show-overflow-tooltip="true"
-		/>
-		<el-table-column
-		  label="变电站名称"
-		  prop="subNm"
-		  align="center"
-		  :show-overflow-tooltip="true"
-		/>
-		<el-table-column
-		  label="停电次数"
-		  prop="poweroffNum"
-		  align="center"
-		/>
+        <el-table-column
+          label="所属供电所"
+          prop="orgNm"
+          align="center"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column
+          label="变电站名称"
+          prop="subNm"
+          align="center"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column label="停电次数" prop="poweroffNum" align="center" />
         <el-table-column
           label="无故障持续时间"
           prop="faultFreeDuration"
@@ -148,10 +216,12 @@ export default {
   data() {
     return {
       dataList: [],
+      childrenList: [],
       // 显示搜索条件
       showSearch: true,
       // 遮罩层
       loading: true,
+      childrenLoading: true,
       total: 0,
       // 日期范围
       dateRange: [],
@@ -171,12 +241,31 @@ export default {
       workUnitOptions: [],
       // 风险类型
       exceptionTypeList: [],
+      expands: [],
     };
   },
   created() {
     this.getList();
   },
   methods: {
+    async expndChange(row, expandedRows) {
+      // 先判断该行是否已经展开了
+      if (!row.expand) {
+        this.childrenLoading = true;
+        const data = await selectBranchLineCompleteList({
+          pageNum: 1,
+          pageSize: 9999,
+          blgBigFeederId: row.feederId,
+        });
+        this.childrenList = data.rows;
+        this.childrenLoading = false;
+        row.expand = true;
+        this.expands = [row.id];
+      } else {
+        row.expand = false;
+        this.expands = [];
+      }
+    },
     /** 查询列表 */
     getList() {
       this.loading = true;
@@ -192,20 +281,20 @@ export default {
         this.loading = false;
       });
     },
-    async load(tree, treeNode, resolve) {
-      const data = await selectBranchLineCompleteList({
-        pageNum: 1,
-        pageSize: 9999,
-        blgBigFeederId: tree.feederId,
-      });
-      resolve(
-        data.rows.map((ite, i) => {
-          ite.id = Math.random();
-          ite.index = i + 1;
-          return ite;
-        })
-      );
-    },
+    // async load(tree, treeNode, resolve) {
+    //   const data = await selectBranchLineCompleteList({
+    //     pageNum: 1,
+    //     pageSize: 9999,
+    //     blgBigFeederId: tree.feederId,
+    //   });
+    //   resolve(
+    //     data.rows.map((ite, i) => {
+    //       ite.id = Math.random();
+    //       ite.index = i + 1;
+    //       return ite;
+    //     })
+    //   );
+    // },
     /** 搜索按钮操作 */
     handleQuery() {
       this.getList();