全流程管理dom元素顺序调整，避免样式冲突或异常。

添加ico图标和标题。

src/components/common/WholeProcessManagement.vue

@@ -1,54 +1,22 @@
 <template>
   <!-- 全流程管理列表组件 -->
   <div id="WholeProcessManagement">
-    <el-form
-      :inline="true"
-      ref="myTaskForm"
-      :model="formInline"
-      style="padding: 10px"
-    >
+    <el-form :inline="true" ref="myTaskForm" :model="formInline" 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>
@@ -58,18 +26,21 @@
         <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 :row-class-name="tableRowClassName" @row-click="rowClick">
+    <el-table
+      :data="tableData"
+      style="width: calc(100% - 20px); padding: 0 10px"
+      height="calc(80vh - 400px)"
+      stripe
+      :row-class-name="tableRowClassName"
+      @row-click="rowClick"
+    >
       <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>
@@ -78,11 +49,7 @@
       <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>
@@ -103,7 +70,7 @@ export default {
       formInline: {
         taskType: "",
         associatedItems: "",
-        auditStatus: "",
+        auditStatus: ""
       },
       // 任务类型options
       taskTypeOptions: [
@@ -112,59 +79,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: [
@@ -173,36 +140,36 @@ 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,
@@ -210,13 +177,13 @@ export default {
         currentPage: 1,
         pageSizes: [5, 10, 20, 50],
         total: 200,
-        currentChange: (val) => {
+        currentChange: val => {
           this.handleCurrentChange(val);
         },
-        handleSizeChange: (val) => {
+        handleSizeChange: val => {
           this.handleSizeChange(val);
-        },
-      },
+        }
+      }
     };
   },
   props: {},
@@ -241,23 +208,23 @@ export default {
       this.formInline = {
         taskType: "",
         associatedItems: "",
-        auditStatus: "",
+        auditStatus: ""
       };
       this.onSubmit();
     },
     // 给每一行row的数据对象里添加index属性
-    tableRowClassName({ row,rowIndex }) {
+    tableRowClassName({ row, rowIndex }) {
       row.index = rowIndex;
     },
     // 用户单击某行时触发操作
-    rowClick(row,column,event){
+    rowClick(row, column, event) {
       // console.log(row,column,event);
-      this.ToView(row.index)
+      this.ToView(row.index);
     },
     // 查看
     ToView(index) {
       this.StepsMyBoxShowState = true;
-      console.log("选中的历史项目的index:",index);
+      console.log("选中的历史项目的index:", index);
     }
   }
 };
@@ -279,7 +246,7 @@ export default {
   overflow: hidden;
   flex-direction: column;
   &-footer {
-    width:99%;
+    width: 99%;
     margin: 0 auto;
     height: 10%;
     position: absolute;

src/main.js

@@ -49,6 +49,9 @@ Vue.prototype.$ifLeftMenu = (leftMenuTitle) => {
 };
 // 添加全局路由前置守卫
 router.beforeEach((to, from, next) => {
+  if (to.meta.title) {
+    document.title = to.meta.title;
+  }
   if (to.path === '/' && from.path === '/login') {
     // 退出操作成功后
     next();

src/router/index.js

@@ -9,11 +9,17 @@ const routes = [
   {
     path: '/',
     name: 'home',
-    component: HomeView
+    component: HomeView,
+    meta:{
+      title: '浦东新区智慧审计平台',
+    }
   },{
     path: '/login',
     name: 'login',
-    component: Login
+    component: Login,
+    meta:{
+      title: '浦东新区智慧审计平台-登录',
+    }
   }
 ]
 

src/views/HomeView.vue

@@ -3,6 +3,16 @@
     <MapHolder ref="mapLoaderRef"></MapHolder>
     <Header @navSelect="navSelect"></Header>
 
+    <!-- 全流程管理 4 -->
+    <div id="stepsBox" v-if="$ifMenu('4', '')">
+      <WholeProcessManagement />
+    </div>
+
+    <!-- 底部菜单 2 -- 疑点筛查 -->
+    <div id="leftMenusB" v-show="$ifMenu('3', '')">
+      <BottomMenus />
+    </div>
+
     <!-- 镇域专题 -->
     <div id="TownContainer" v-if="$ifMenu('2', '5')">
       <Legend
@@ -148,14 +158,6 @@
         </template>
       </MenuCard>
     </div>
-    <!-- 全流程管理 4 -->
-    <div id="stepsBox" v-show="$ifMenu('4', '')">
-      <WholeProcessManagement />
-    </div>
-    <!-- 底部菜单 2 -- 疑点筛查 -->
-    <div id="leftMenusB" v-show="$ifMenu('3', '')">
-      <BottomMenus />
-    </div>
   </div>
 </template>
 <script>
@@ -343,7 +345,7 @@ export default {
             imageUrl: "/static/images/2.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            menuName:"土地资源",
+            menuName: "土地资源",
             position: "left",
             gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" }
           },
@@ -356,7 +358,7 @@ export default {
             imageUrl: "/static/images/3.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            menuName:"土地资源",
+            menuName: "土地资源",
             position: "left",
             gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" }
           },
@@ -369,7 +371,7 @@ export default {
             imageUrl: "/static/images/1.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            menuName:"土地资源",
+            menuName: "土地资源",
             position: "left",
             gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" }
           },
@@ -382,7 +384,7 @@ export default {
             imageUrl: "/static/images/4.png",
             menuIndex: "2",
             subMenuIndex: "1",
-            menuName:"土地资源",
+            menuName: "土地资源",
             position: "left",
             gotoPageInfo: { index: "3", subIndex: "", name: "综合分析" }
           }