1. 全流程管理分页样式调整

src/components/common/WholeProcessManagement.vue

@@ -1,22 +1,55 @@
 <template>
   <!-- 全流程管理列表组件 -->
   <div id="WholeProcessManagement">
-    <el-form :inline="true" ref="myTaskForm" :model="formInline" class="demo-form-inline" style="padding: 10px;">
+    <el-form
+      :inline="true"
+      ref="myTaskForm"
+      :model="formInline"
+      class="demo-form-inline"
+      style="padding: 10px"
+    >
       <el-form-item label="任务类型">
-        <el-select size="mini" v-model="formInline.taskType" placeholder="任务类型">
-          <el-option-group v-for="group in taskTypeOptions" :key="group.label" :label="group.label">
-            <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+        <el-select
+          size="mini"
+          v-model="formInline.taskType"
+          placeholder="任务类型"
+        >
+          <el-option-group
+            v-for="group in taskTypeOptions"
+            :key="group.label"
+            :label="group.label"
+          >
+            <el-option
+              v-for="item in group.options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
           </el-option-group>
         </el-select>
       </el-form-item>
       <el-form-item label="关联项目">
-        <el-select size="mini" v-model="formInline.associatedItems" placeholder="关联项目">
-          <el-option v-for="item in associatedItemsOptions" :key="item.value" :label="item.label" :value="item.value">
+        <el-select
+          size="mini"
+          v-model="formInline.associatedItems"
+          placeholder="关联项目"
+        >
+          <el-option
+            v-for="item in associatedItemsOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
           </el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="审计状态">
-        <el-select size="mini" v-model="formInline.auditStatus" placeholder="审计状态">
+        <el-select
+          size="mini"
+          v-model="formInline.auditStatus"
+          placeholder="审计状态"
+        >
           <el-option label="已审核" value="ReviewedAndApproved"></el-option>
           <el-option label="未审核" value="NotReviewed"></el-option>
         </el-select>
@@ -26,38 +59,46 @@
         <el-button @click="resetForm()">重置</el-button>
       </el-form-item>
     </el-form>
-    <el-table :data="tableData" style="width: calc(100% - 20px);padding:0 10px;" height="calc(80vh - 400px)" stripe>
+    <el-table
+      :data="tableData"
+      style="width: calc(100% - 20px); padding: 0 10px"
+      height="calc(80vh - 400px)"
+      stripe
+    >
       <el-table-column type="index" width="50"> </el-table-column>
       <el-table-column prop="taskId" label="任务编号"> </el-table-column>
       <el-table-column prop="taskName" label="任务名称"> </el-table-column>
       <el-table-column prop="createDate" label="创建时间"> </el-table-column>
       <el-table-column prop="state" label="状态">
         <template slot-scope="scope">
-          <el-tag :type="scope.row.state === '已审核' ? 'success' : 'info'" disable-transitions>{{ scope.row.state }}</el-tag>
+          <el-tag
+            :type="scope.row.state === '已审核' ? 'success' : 'info'"
+            disable-transitions
+            >{{ scope.row.state }}</el-tag
+          >
         </template>
       </el-table-column>
       <el-table-column prop="taskType" label="任务类型"> </el-table-column>
       <el-table-column fixed="right" label="操作">
         <template slot-scope="scope">
-          <el-button size="mini" icon="el-icon-search" @click="ToView(scope.$index, tableData)">查看</el-button>
+          <el-button
+            size="mini"
+            icon="el-icon-search"
+            @click="ToView(scope.$index, tableData)"
+            >查看</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
-    <div style="padding: 10px;">
-      <el-pagination
-        style="float: right"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="1"
-        :page-sizes="[5, 10, 20, 50]"
-        :page-size="10"
-        layout="total, prev, pager, next, sizes, jumper"
-        :total="400"
-      >
-      </el-pagination>
+    <div id="WholeProcessManagement-footer">
+      <Pagination :paginationData="paginationData" />
     </div>
     <!-- 全流程管理流程组件 -->
-    <StepsMyBox id="stepsBox" v-show="StepsMyBoxShowState" @hideStepsMyBoxState="StepsMyBoxShowState = false"/>
+    <StepsMyBox
+      id="stepsBox"
+      v-show="StepsMyBoxShowState"
+      @hideStepsMyBoxState="StepsMyBoxShowState = false"
+    />
   </div>
 </template>
 <script>
@@ -67,9 +108,10 @@
  * @Date: 2022年11月21-25日
  */
 import StepsMyBox from "./StepsMyBox.vue";
+import Pagination from "@/components/common/Pagination.vue";
 export default {
   name: "WholeProcessManagement",
-  components: {StepsMyBox},
+  components: { StepsMyBox, Pagination },
   data() {
     return {
       StepsMyBoxShowState: false,
@@ -77,7 +119,7 @@ export default {
       formInline: {
         taskType: "",
         associatedItems: "",
-        auditStatus: ""
+        auditStatus: "",
       },
       // 任务类型options
       taskTypeOptions: [
@@ -86,59 +128,59 @@ export default {
           options: [
             {
               value: "all",
-              label: "全部类型"
-            }
-          ]
+              label: "全部类型",
+            },
+          ],
         },
         {
           label: "基本类型",
           options: [
             {
               value: "landResources",
-              label: "土地资源"
+              label: "土地资源",
             },
             {
               value: "ecologicalResources",
-              label: "生态资源"
+              label: "生态资源",
             },
             {
               value: "forestLandResources",
-              label: "林地资源"
+              label: "林地资源",
             },
             {
               value: "waterResources",
-              label: "水资源"
+              label: "水资源",
             },
             {
               value: "townAreaTopic",
-              label: "镇域专题"
-            }
-          ]
+              label: "镇域专题",
+            },
+          ],
         },
         {
           label: "土地资源",
           options: [
             {
               value: "lr_bfm",
-              label: "基本农田监控"
+              label: "基本农田监控",
             },
             {
               value: "lr_soclr",
-              label: "建设用地减量化监管"
-            }
-          ]
-        }
+              label: "建设用地减量化监管",
+            },
+          ],
+        },
       ],
       // 关联项目options
       associatedItemsOptions: [
         {
           value: "1",
-          label: "项目1"
+          label: "项目1",
         },
         {
           value: "2",
-          label: "项目2"
-        }
+          label: "项目2",
+        },
       ],
       // 我的任务form表单
       tableData: [
@@ -147,37 +189,50 @@ export default {
           taskName: "任务名称",
           taskId: "任务编号",
           state: "已审核",
-          taskType: "土地资源"
+          taskType: "土地资源",
         },
         {
           createDate: "2016-05-03",
           taskName: "任务名称",
           taskId: "任务编号",
           state: "未审核",
-          taskType: "土地资源"
+          taskType: "土地资源",
         },
         {
           createDate: "2016-05-03",
           taskName: "任务名称",
           taskId: "任务编号",
           state: "已审核",
-          taskType: "土地资源"
+          taskType: "土地资源",
         },
         {
           createDate: "2016-05-03",
           taskName: "任务名称",
           taskId: "任务编号",
           state: "已审核",
-          taskType: "土地资源"
+          taskType: "土地资源",
         },
         {
           createDate: "2016-05-03",
           taskName: "任务名称",
           taskId: "任务编号",
           state: "已审核",
-          taskType: "土地资源"
-        }
-      ]
+          taskType: "土地资源",
+        },
+      ],
+      paginationData: {
+        pageSize: 0,
+        pagerCount: 5,
+        currentPage: 1,
+        pageSizes: [5, 10, 20, 50],
+        total: 200,
+        currentChange: (val) => {
+          this.handleCurrentChange(val);
+        },
+        handleSizeChange: (val) => {
+          this.handleSizeChange(val);
+        },
+      },
     };
   },
   props: {},
@@ -187,6 +242,7 @@ export default {
     // 切换条数
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
+      this.paginationData.currentPage = val;
     },
     //   切换页
     handleCurrentChange(val) {
@@ -201,7 +257,7 @@ export default {
       this.formInline = {
         taskType: "",
         associatedItems: "",
-        auditStatus: ""
+        auditStatus: "",
       };
       this.onSubmit();
     },
@@ -209,8 +265,8 @@ export default {
     ToView(index, rows) {
       this.StepsMyBoxShowState = true;
       console.log(rows, index);
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -229,5 +285,16 @@ export default {
   user-select: none;
   overflow: hidden;
   flex-direction: column;
+  &-footer {
+    width:99%;
+    margin: 0 auto;
+    height: 10%;
+    position: absolute;
+    bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+  }
 }
 </style>

src/config/common.js

@@ -393,6 +393,11 @@ export const treeModel = [
     type: "我的模型",
     children: [],
   },
+  {
+    id: publicFun.buildGuid(),
+    type: "我的图层",
+    children: [],
+  },
 ];
 
 /**

src/views/ComprehensiveAnalysis.vue

@@ -171,6 +171,7 @@ import { treeModel, defaultLayers } from "@/config/common";
 import AttributePopup from "@/components/popup/AttributePopup.vue";
 import LawPopup from "@/components/popup/LawPopup.vue";
 import { get } from "@/utils/request";
+import { nextTick } from "vue";
 export default {
   name: "ComprehensiveAnalysis",
   components: {
@@ -238,15 +239,31 @@ export default {
       // 我的模型相关数据
       myModel: null,
       filterText: "",
-      myMap: new Map(),
+      // 存储所有图层的node id
+      treeIdMap:new Map()
     };
   },
   computed: {
     getCustomModel() {
       return this.$store.state.customModelsArr;
     },
+    getLeftMenuTitle() {
+      return this.$store.state.leftMenuTitle;
+    },
   },
   watch: {
+    // getLeftMenuTitle(val) {
+    //   console.log(val, "current title");
+    // },
+    getLeftMenuTitle: {
+      handler(val) {
+        console.log(val, "current title");
+        this.$nextTick(() => {
+          // console.log(this.$refs.tree.data[1], "tree");
+        });
+      },
+      immediate: true,
+    },
     legendTitle(val) {
       // console.log(val, "监听当前图例item数量");
       if (val.length === 0) {
@@ -270,8 +287,10 @@ export default {
         let myModelRef = this.$refs.tree.data[2];
         if (myModelRef.label === "我的模型") {
           this.$refs.tree.data[2].children = val.map((ele) => {
+            let firstId = publicFun.buildGuid()
+            this.treeIdMap.set(`我的模型_${firstId}`, firstId)
             return {
-              id: publicFun.buildGuid(),
+              id: firstId,
               label: ele.name,
               data: ele.data,
             };
@@ -315,7 +334,6 @@ export default {
     // map2DViewer.drawToolFire = function (data) {
     //   console.log(data, "绘制的图形");
     // };
-
     // map2DViewer.setDrawTool({
     //   action: "add",
     //   offset: [150, 50],

src/views/FrequencyView.vue

@@ -102,7 +102,6 @@ export default {
           label: "2018",
         },
       ],
-      paginationData: {},
       tableData: [
         {
           createYear: "2021",