添加全流程组件

src/assets/global.css

@@ -197,7 +197,7 @@
   background-image: linear-gradient(to top, #00aaff, #1deef5);
 }
 /* table */
-.el-dialog__body *,
+.el-dialog__body *,#WholeProcessManagement *,
 tr,
 td,
 th {

src/components/common/BottomForm/UploadingData.vue

@@ -119,12 +119,38 @@ export default {
     },
     // 删除文件之前
     beforeRemove(file, fileList) {
+      this.$store.state.mapMethodsCollection.get("RENDER").deletePolygonLayer("upload_layer");
+      delete map2DViewer.polygons["upload_layer"];
+      this.$message.success(`文件${file.name}移除成功！`);
       return true;
-      // return this.$confirm(`确定移除 ${file.name}？`);
     },
     // 文件上传成功时
     handleSuccess(response, file, fileList) {
-      console.log("文件上传成功", response, file, fileList);
+      this.getActionData(file);
+      // console.log("文件上传成功", response, file, fileList);
+    },
+    // 根据上传的文件渲染到地图中
+    uploadRENDER(geoJson) {
+      map2DViewer.polygons[`upload_layer`] = [];
+      let cid = "upload";
+      let color = "#67C23A";
+      // 地图定位
+      let firstPolygon = JSON.parse(JSON.stringify(geoJson[0]));
+      let coordinates = firstPolygon.geometry.coordinates[0][0][0];
+      this.$store.state.mapMethodsCollection.get("RENDER").setView(coordinates, 16);
+      this.$store.state.mapMethodsCollection.get("RENDER").addPolygonLayer(geoJson, cid, color);
+    },
+    // 读取file对象内容
+    getActionData(file) {
+      const __this = this;
+      var reader = new FileReader(); // 新建一个FileReader
+      reader.readAsText(file.raw, "UTF-8"); // 读取文件
+      reader.onload = function (evt) {
+        //读取文件完毕执行此函数
+        const dataJson = JSON.parse(evt.target.result);
+        __this.uploadRENDER(dataJson);
+        // console.log("上传的文件内容：", dataJson);
+      };
     },
     // 上传文件之前
     beforeAvatarUpload(file) {
@@ -145,11 +171,11 @@ export default {
 <style lang="less" scoped>
 #uploadingBox {
   display: flex;
-  .el-upload *:not(em){
-    color: #F2F6FC;
+  .el-upload *:not(em) {
+    color: #f2f6fc;
   }
-  .el-upload__tip{
-    color: #C0C4CC;
+  .el-upload__tip {
+    color: #c0c4cc;
   }
 }
 </style>

src/components/common/WholeProcessManagement.vue

@@ -0,0 +1,221 @@
+<template>
+  <div id="WholeProcessManagement">
+    <el-form :inline="true" ref="myTaskForm" :model="formInline" class="demo-form-inline">
+      <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-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-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="审计状态">
+        <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>
+      </el-form-item>
+      <el-form-item style="float: right">
+        <el-button type="primary" @click="onSubmit">查询</el-button>
+        <el-button @click="resetForm()">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table :data="tableData" style="width: 100%" 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>
+        </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>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div>
+      <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>
+  </div>
+</template>
+<script>
+export default {
+  name: "WholeProcessManagement",
+  data() {
+    return {
+      //   查询条件
+      formInline: {
+        taskType: "",
+        associatedItems: "",
+        auditStatus: ""
+      },
+      // 任务类型options
+      taskTypeOptions: [
+        {
+          label: "全部类型",
+          options: [
+            {
+              value: "all",
+              label: "全部类型"
+            }
+          ]
+        },
+        {
+          label: "基本类型",
+          options: [
+            {
+              value: "landResources",
+              label: "土地资源"
+            },
+            {
+              value: "ecologicalResources",
+              label: "生态资源"
+            },
+            {
+              value: "forestLandResources",
+              label: "林地资源"
+            },
+            {
+              value: "waterResources",
+              label: "水资源"
+            },
+            {
+              value: "townAreaTopic",
+              label: "镇域专题"
+            }
+          ]
+        },
+        {
+          label: "土地资源",
+          options: [
+            {
+              value: "lr_bfm",
+              label: "基本农田监控"
+            },
+            {
+              value: "lr_soclr",
+              label: "建设用地减量化监管"
+            }
+          ]
+        }
+      ],
+      // 关联项目options
+      associatedItemsOptions: [
+        {
+          value: "1",
+          label: "项目1"
+        },
+        {
+          value: "2",
+          label: "项目2"
+        }
+      ],
+      // 我的任务form表单
+      tableData: [
+        {
+          createDate: "2016-05-03",
+          taskName: "任务名称",
+          taskId: "任务编号",
+          state: "已审核",
+          taskType: "土地资源"
+        },
+        {
+          createDate: "2016-05-03",
+          taskName: "任务名称",
+          taskId: "任务编号",
+          state: "未审核",
+          taskType: "土地资源"
+        },
+        {
+          createDate: "2016-05-03",
+          taskName: "任务名称",
+          taskId: "任务编号",
+          state: "已审核",
+          taskType: "土地资源"
+        },
+        {
+          createDate: "2016-05-03",
+          taskName: "任务名称",
+          taskId: "任务编号",
+          state: "已审核",
+          taskType: "土地资源"
+        },
+        {
+          createDate: "2016-05-03",
+          taskName: "任务名称",
+          taskId: "任务编号",
+          state: "已审核",
+          taskType: "土地资源"
+        }
+      ]
+    };
+  },
+  props: {},
+  mounted() {},
+  watch: {},
+  methods: {
+    // 切换条数
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    //   切换页
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+    // 查询事件
+    onSubmit() {
+      console.log("submit!");
+    },
+    // 查询条件重置
+    resetForm() {
+      this.formInline = {
+        taskType: "",
+        associatedItems: "",
+        auditStatus: ""
+      };
+      this.onSubmit();
+    },
+    // 查看
+    ToView(index, rows) {
+      console.log(rows, index);
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+#WholeProcessManagement {
+  position: absolute;
+  display: flex;
+  background: #00274d;
+  z-index: 999;
+  margin-top: 60px;
+  width: 100%;
+  height: calc(100% - 60px);
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -khtml-user-select: none;
+  user-select: none;
+  overflow: hidden;
+  flex-direction: column;
+}
+</style>

src/components/map/MapHolder.vue

@@ -142,7 +142,7 @@ export default {
         attributionControl: false,
         zoomControl: false,
         minZoom: 10,
-        maxZoom: 17
+        maxZoom: 16
       }).setView(systemConfig.mapViewer.center, systemConfig.mapViewer.zoom);
 
       //添加默认图层

src/views/HomeView.vue

@@ -208,6 +208,10 @@
         </template>
       </MenuCard>
     </div>
+    <!-- 全流程管理 4 -->
+    <div id="stepsBox" v-if="$ifMenu('4', '')">
+      <WholeProcessManagement />
+    </div>
     <!-- 底部菜单 2 -- 疑点筛查 -->
     <div id="leftMenusB" v-show="$ifMenu('3', '')">
       <BottomMenus />
@@ -238,6 +242,8 @@ import Legend from "@/components/map/Legend.vue";
 // 综合分析
 import ComprehensiveAnalysis from "@/views/ComprehensiveAnalysis.vue";
 import TagProblemCard from "@/components/common/TagProblemCard.vue";
+// 全流程管理
+import WholeProcessManagement from "@/components/common/WholeProcessManagement.vue";
 export default {
   name: "HomeView",
   components: {
@@ -254,6 +260,7 @@ export default {
     ComprehensiveAnalysis,
     TagProblemCard,
     Legend,
+    WholeProcessManagement
   },
   data() {
     return {
@@ -751,6 +758,12 @@ export default {
   width: 100%;
   height: 100%;
 }
+#stepsBox {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
 #mainMenus {
   position: absolute;
   left: 430px;