合规性规划

src/api/ghss/hgxfx.js

@@ -0,0 +1,109 @@
+import request from '@/utils/request.js'
+const hgxfxApi = {
+    Add: '/analyse/fzss/AddHgxfx',
+    Delect: '/apply/hgxfx/DeleteFxjg',
+    GetFxjg: '/apply/hgxfx/GetFxjg',
+    GetPage: '/apply/hgxfx/GetPage',
+    GetScx: '/apply/hgxfx/GetScxList',
+    UpdateScx: '/apply/hgxfx/UpdateScx'
+}
+
+/**
+ * 登录
+ * @param parameter
+ * @returns {*}
+ * 
+ */
+export function Add(parameter) {
+    parameter.scxs = parameter.scxs.toString();
+    return request({
+        url: hgxfxApi.Add,
+        method: 'post',
+        data: parameter,
+        // headers: {
+        //     'Content-Type': 'application/json;charset=UTF-8'
+        // }
+    })
+}
+
+/**
+ * 删除项目信息
+ * @param parameter
+ * @returns {*}
+ */
+export function Delect(parameter) {
+    return request({
+        method: 'get',
+        url: hgxfxApi.Delect,
+        params: parameter,
+        headers: {
+            'Content-Type': 'application/json;charset=UTF-8'
+        }
+    })
+}
+
+/**
+ * 获取检查项
+ * @param parameter
+ * @returns {*}
+ * 
+ */
+export function GetScx(parameter) {
+    return request({
+        url: hgxfxApi.GetScx,
+        method: 'get',
+        params: parameter,
+        headers: {
+            'Content-Type': 'application/json;charset=UTF-8'
+        }
+    })
+}
+
+
+/**
+ * 分页获取选择任务
+ * @param parameter
+ * @returns {*}
+ */
+export function GetPage(parameter) {
+    return request({
+        method: 'get',
+        url: hgxfxApi.GetPage,
+        params: parameter,
+        headers: {
+            'Content-Type': 'application/json;charset=UTF-8'
+        }
+    })
+}
+
+/**
+ * 根据选址标识码查询结果
+ * @param parameter
+ * @returns {*}
+ */
+export function GetFxjg(parameter) {
+    return request({
+        method: 'get',
+        url: hgxfxApi.GetFxjg,
+        params: parameter,
+        headers: {
+            'Content-Type': 'application/json;charset=UTF-8'
+        }
+    })
+}
+
+/**
+ * 同步合规性审查因子项
+ * @param parameter
+ * @returns {*}
+ */
+export function UpdateScx(parameter) {
+    return request({
+        method: 'get',
+        url: hgxfxApi.UpdateScx,
+        params: parameter,
+        headers: {
+            'Content-Type': 'application/json;charset=UTF-8'
+        }
+    })
+}

src/common/js/common.js

@@ -1,7 +1,7 @@
 import Resource from "./language";
 
 //DrawHandler封装
-const initHandler = function(DrawMode, clampMode) { //初始化，传入需要的类型
+const initHandler = function (DrawMode, clampMode) { //初始化，传入需要的类型
     let clampmode = 0;
     if (clampMode) {
         clampmode = clampMode
@@ -49,7 +49,7 @@ const initHandler = function(DrawMode, clampMode) { //初始化，传入需要
         viewer.scene.primitives.add(window.polylineCollection);
     }
 }
-const handlerDrawing = function(PolyType, tooltipNum) { //（传入操作的DrawHandler类型的字符串，如"Polygon"）
+const handlerDrawing = function (PolyType, tooltipNum) { //（传入操作的DrawHandler类型的字符串，如"Polygon"）
     let DrawHandler = judgeDrawHandlerType(PolyType); //获取操作对象
     return new Promise((resolve, reject) => { //做一些异步操作
         let tooltip = window.tooltip;
@@ -128,6 +128,7 @@ const clearHandlerDrawing = (PolyType) => {
     } else {
         DrawHandler = judgeDrawHandlerType(PolyType);
     }
+    if (!DrawHandler) return
     DrawHandler.deactivate();
     DrawHandler.clear()
     viewer.enableCursorStyle = true;
@@ -197,23 +198,23 @@ const Edit = (_this, callback, PolyType) => {
     }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
 }
 const clearEditHandler = () => {
-        if (window.editHandler) {
-            window.editHandler.deactivate();
-            window.editHandler.clear()
-        };
-        if (window.selectHandler) {
-            //移除鼠标移动事件监听
-            window.selectHandler.removeInputAction(
-                Cesium.ScreenSpaceEventType.LEFT_UP
-            );
-            window.selectHandler.removeInputAction(
-                Cesium.ScreenSpaceEventType.LEFT_CLICK
-            );
-            window.selectHandler.destroy()
-            window.selectHandler = null
-        }
+    if (window.editHandler) {
+        window.editHandler.deactivate();
+        window.editHandler.clear()
+    };
+    if (window.selectHandler) {
+        //移除鼠标移动事件监听
+        window.selectHandler.removeInputAction(
+            Cesium.ScreenSpaceEventType.LEFT_UP
+        );
+        window.selectHandler.removeInputAction(
+            Cesium.ScreenSpaceEventType.LEFT_CLICK
+        );
+        window.selectHandler.destroy()
+        window.selectHandler = null
     }
-    //判断两数组或对象相等
+}
+//判断两数组或对象相等
 const isSame = (arg1, arg2) => {
     let bol = true;
     if (Object.keys(arg1).length != Object.keys(arg2).length) {
@@ -235,22 +236,22 @@ const isSame = (arg1, arg2) => {
 
 //转化
 const cartographic = (objPosition) => {
-        let array = [].concat(objPosition);
-        let positions = [];
-        for (let i = 0, len = array.length; i < len; i++) {
-            let cartographic = Cesium.Cartographic.fromCartesian(array[i]);
-            let longitude = Cesium.Math.toDegrees(cartographic.longitude);
-            let latitude = Cesium.Math.toDegrees(cartographic.latitude);
-            let h = cartographic.height;
-            if (positions.indexOf(longitude) == -1 && positions.indexOf(latitude) == -1) {
-                positions.push(longitude);
-                positions.push(latitude);
-                positions.push(h);
-            }
+    let array = [].concat(objPosition);
+    let positions = [];
+    for (let i = 0, len = array.length; i < len; i++) {
+        let cartographic = Cesium.Cartographic.fromCartesian(array[i]);
+        let longitude = Cesium.Math.toDegrees(cartographic.longitude);
+        let latitude = Cesium.Math.toDegrees(cartographic.latitude);
+        let h = cartographic.height;
+        if (positions.indexOf(longitude) == -1 && positions.indexOf(latitude) == -1) {
+            positions.push(longitude);
+            positions.push(latitude);
+            positions.push(h);
         }
-        return positions
     }
-    // 类型判断
+    return positions
+}
+// 类型判断
 const judgeDrawHandlerType = (PolyType) => {
     let DrawHandler;
     switch (PolyType) {
@@ -278,22 +279,22 @@ const judgeDrawHandlerType = (PolyType) => {
 //axios本版本不支持jsonp 自己拓展一个
 const axiosJsonp = (url) => {
     if (!url) {
-      console.error('Axios.JSONP 至少需要一个url参数!')
-      return;
+        console.error('Axios.JSONP 至少需要一个url参数!')
+        return;
     }
     return new Promise((resolve, reject) => {
-      window.jsonCallBack = (result) => {
-        resolve(result)
-      }
-      var JSONP = document.createElement("script");
-      JSONP.type = "text/javascript";
-      JSONP.src = `${url}&callback=jsonCallBack`;
-      document.getElementsByTagName("head")[0].appendChild(JSONP);
-      setTimeout(() => {
-        document.getElementsByTagName("head")[0].removeChild(JSONP)
-      }, 500)
+        window.jsonCallBack = (result) => {
+            resolve(result)
+        }
+        var JSONP = document.createElement("script");
+        JSONP.type = "text/javascript";
+        JSONP.src = `${url}&callback=jsonCallBack`;
+        document.getElementsByTagName("head")[0].appendChild(JSONP);
+        setTimeout(() => {
+            document.getElementsByTagName("head")[0].removeChild(JSONP)
+        }, 500)
     })
-  }
+}
 export default {
     initHandler,
     handlerDrawing,

src/components/mapView/range.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="map-range">
+    <div class="xz_type">
+      <div
+        class="keyitem"
+        v-for="key in keys"
+        :key="key"
+        @click="onChangeRange(fwlist[key].id)"
+      >
+        <!-- <component
+          :is="fwlist[key].icon"
+          :style="
+            model.fwlx == fwlist[key].id
+              ? 'color:#409eff;height:30px'
+              : 'height:30px'
+          "
+        ></component> -->
+        <span :style="model.fwlx == fwlist[key].id ? 'color:#409eff' : ''">{{
+          fwlist[key].name
+        }}</span>
+      </div>
+    </div>
+    <div>
+      <div v-if="model.fwlx == 1" style="width: 90%" class="fwlxrange">
+        <div :class="model.xzmj == 0 ? 'pointer' : ''" @click="drawMap">
+          <el-button plain v-if="model.xzmj == 0" icon="edit-pen" size="mini"
+            >绘制范围</el-button
+          >
+          <span v-if="model.xzmj != 0">{{ model.xzmj }} m²</span>
+        </div>
+        <div @click="clearAll">清除</div>
+      </div>
+      <div v-if="model.fwlx == 2" class="fwlxrange">
+        <el-upload
+          class="upload-demo"
+          :on-change="handleChange"
+          :auto-upload="false"
+          :show-file-list="false"
+          :file-list="fileList"
+        >
+          <el-tooltip
+            v-if="fileList.length > 0"
+            :content="fileList[0].name"
+            placement="bottom-start"
+            effect="light"
+          >
+            <span
+              class="title-item"
+              style="display: inline-block; width: 100%"
+              >{{ fileList[0].name }}</span
+            >
+          </el-tooltip>
+          <el-button v-else class="upload-btn" icon="Upload" size="mini"
+            >上传文件</el-button
+          >
+        </el-upload>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ShapeUpload } from "@/api/ghss/hgxfx.js";
+import { ElMessage } from "element-ui";
+export default {
+  components: {},
+  props: {
+    //启用的组件，不传为所有
+    keys: {
+      type: Array,
+      default: ["xzq", "hx", "sc", "zbd"],
+    },
+    activeTabs: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      userXZQ: "", //store.state.user.user.dept.district,
+      fwlist: {
+        xzq: {
+          id: 0,
+          name: "行政区",
+          icon: "wind-power",
+        },
+        hx: {
+          id: 1,
+          name: "绘制",
+          icon: "Share",
+        },
+        sc: {
+          id: 2,
+          name: "上传",
+          icon: "Upload-filled",
+        },
+        zbd: {
+          id: 3,
+          name: "坐标点",
+          icon: "Location",
+        },
+      },
+      model: {
+        fwlx: 0,
+        xzfw: "",
+        xzmj: 0,
+        feature: null,
+      },
+      handlerDraw: null,
+      draw: null, //绘制
+      fileList: [], //文件
+    };
+  },
+  mounted() {
+    this.model.fwlx = this.fwlist[this.$props.keys[0]].id;
+  },
+  methods: {
+    //切换
+    onChangeRange(fwlx) {
+      this.clearAll();
+      this.model.fwlx = fwlx;
+    },
+
+    //上传文件
+    handleChange(file, fileList) {
+      if (fileList.length > 0) {
+        this.fileList = [fileList[fileList.length - 1]]; //这一步，是展示最后一次选择文件
+        this.clearAll();
+      }
+      const formdata = new FormData();
+      formdata.append("file", file.raw);
+      ShapeUpload(formdata).then((res) => {
+        if (res.success) {
+          var layer = myMap.addGeoJson("common_layer", res.data.geojson);
+          var url = `${SYS_LAYERS.XZQXZ}/0/query`;
+          var geom = layer.getSource().getFeatures()[0].getGeometry();
+          // 判断绘制范围是否在行政区范围内
+          let withinRange = true;
+          // arcMap.SearchWfsData(url, geom, function (fs) {
+          //   if (fs.length) {
+          //     fs.map((res) => {
+          //       let xzqdm = res.get("XZQDM");
+          //       if (!xzqdm.startsWith(this.userXZQ)) {
+          //         withinRange = false;
+          //       }
+          //     });
+          //   } else {
+          //     withinRange = false;
+          //   }
+          //   if (withinRange) {
+          //     this.model.xzfw = res.data.filepath;
+          //     this.model.feature = layer.getSource().getFeatures()[0];
+          //     this.model.xzmj = new OLTool().Tools.formatArea(
+          //       this.model.feature.getGeometry(),
+          //       true
+          //     );
+          //     myMap.zoomToextent(layer.getSource().getExtent());
+          //   } else {
+          //     this.clearAll();
+          //     ElMessage.warning("分析范围超出了权限范围，请重新上传文件！");
+          //   }
+          // });
+        }
+      });
+    },
+    //绘制
+    drawMap() {
+      if (!window.handlerPolygon) {
+        common.initHandler("Polygon");
+      }
+      common.handlerDrawing("Polygon").then(
+        (res) => {
+          console.log(res.positions, "------");
+        },
+        (err) => {
+          console.log(err);
+        }
+      );
+      window.handlerPolygon.activate();
+    },
+    clear() {
+      if (this.handlerDraw != null) {
+        this.handlerDraw.clear();
+        viewer.scene.globe.removeAllExcavationRegion();
+        this.handlerDraw.deactivate();
+        this.handlerDraw = null;
+        this.result = null;
+      }
+    },
+
+    //清除
+    clearAll() {
+      this.model.xzfw = "";
+      this.model.xzmj = 0;
+      common.clearHandlerDrawing("Polygon");
+    },
+    //输出：重置
+    reset() {
+      this.model = {
+        fwlx: this.fwlist[this.$props.keys[0]].id,
+        xzfw: "",
+        xzmj: 0,
+      };
+      this.fileList = []; //文件
+      this.clearAll();
+    },
+    //输出：获取范围
+    getRange() {
+      return this.model;
+    },
+  },
+
+  // watch(
+  //     () => prop.activeTabs,
+  //     (newValue, oldValue) => {
+  //       this.getXzq();
+  //     }
+  //   );
+};
+</script>
+
+<style lang="scss" scoped>
+.map-range {
+  width: 100px;
+  height: 100px;
+  color: #fff;
+  .xz_type {
+    margin-bottom: 10px;
+    // display: flex;
+    // justify-content: space-between;
+    .keyitem {
+      width: 100px;
+      height: 30px;
+      font-size: 16px;
+      line-height: 30px;
+      display: inline-block;
+      cursor: pointer;
+    }
+  }
+  .fwlxrange {
+    display: flex;
+    justify-content: space-between;
+  }
+  .upload-demo {
+  }
+}
+</style>

src/views/complianceAnalysis/components/hgxsc.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="hgxsc">
-    <div class="block-title">选址范围</div>
-    <range :keys="['hx', 'sc', 'zbd']" ref="range" />
+    <div class="rangDiv">
+      <div class="block-title">选址范围</div>
+      <range :keys="['hx', 'sc']" class="range" ref="range" />
+    </div>
     <el-form :model="ruleForm" label-width="75px">
       <div class="block-title">基本信息</div>
       <el-form-item label="项目名称:" prop="xmmc">
@@ -58,10 +60,12 @@
 </template>
 
 <script>
-// import range from "@/components/mapview/range.vue"; ///mapview/range
+import { Add, GetScx, UpdateScx } from "@/api/ghss/hgxfx.js";
+import { ElMessage, ElMessageBox } from "element-ui";
+import range from "@/components/mapview/range.vue"; ///mapview/range
 export default {
   components: {
-    // range,
+    range,
   },
   props: {
     activeTabs: {
@@ -87,22 +91,6 @@ export default {
           label: "二级控制线",
           children: [],
         },
-        {
-          id: 3,
-          label: "一级控制线",
-          children: [],
-        },
-        {
-          id: 4,
-          label: "二级控制线",
-          children: [
-            {
-              id: 41,
-              label: "二级控制线",
-              children: [],
-            },
-          ],
-        },
       ],
       defaultProps: {
         children: "children",
@@ -125,16 +113,16 @@ export default {
     };
   },
   mounted() {
-    // this.getKzx();
+    this.getTreeData(); //getKzx();
   },
   methods: {
     //获取检查要素
     getKzx() {
       GetScx().then((res) => {
         if (res) {
-          this.GetAll = res.data;
-          for (var t in this.GetAll) {
-            const getall = this.GetAll[t];
+          let GetAll = res.data;
+          for (var t in GetAll) {
+            const getall = GetAll[t];
             if (getall.kzxjb == 1) {
               this.treedata[0].children.push({
                 id: getall.bsm,
@@ -179,6 +167,23 @@ export default {
         }
       });
     },
+    //获取检查要素
+    getTreeData() {
+      this.treedata = [
+        { id: "XZFX", label: "现状分析" },
+        {
+          id: 2,
+          label: "三线分析",
+          children: [
+            { id: "YJJBNT", label: "永久基本农田" },
+            { id: "CZKFBJ", label: "城镇开发边界" },
+            { id: "STBHHX", label: "生态保护红线" },
+          ],
+        },
+        { id: "TDLYGH", label: "土地利用规划" },
+        { id: "KZXXXGH", label: "控制性详细规划" },
+      ];
+    },
     updateScx() {
       UpdateScx().then((res) => {
         if (res.statuscode == 200) {
@@ -223,19 +228,20 @@ export default {
           //   cancelButtonText: "取消",
           //   type: "warning",
           // }).then(() => {
-          //   parent.emit("update:loading", true);
-          //   Add({ ...this.ruleForm }).then((res) => {
-          //     if (res.success) {
-          //       parent.emit("update:rzMc", this.ruleForm.xmmc);
-          //       parent.emit("update:rzBsm", res.data);
-          //       parent.emit("update:rwBsm", res.data);
-          //     }
-          //     parent.emit("update:loading", false);
-          //   });
+            this.$parent.loading = true;
+            Add({ ...this.ruleForm }).then((res) => {
+              if (res.success) {
+                this.$parent.rzMc = this.ruleForm.xmmc;
+                this.$parent.rzBsm = res.data;
+                this.$parent.rwBsm = res.data;
+              }
+              this.$parent.loading = false;
+            });
           // });
         })
         .catch((res) => {
-          ElMessage.warning(res);
+          console.log("RES", res);
+          // ElMessage.warning(res);
         });
     },
     is_form() {
@@ -279,10 +285,22 @@ export default {
 .hgxsc {
   height: 100%;
   line-height: 40px;
+  .rangDiv {
+    width: 100%;
+    height: 100px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .range {
+    flex: 1;
+    width: calc(100% - 100px);
+    position: absolute;
+    left: 100px;
+  }
 
   .treeDiv {
     width: 100%;
-    height: calc(100% - 250px);
+    height: calc(100% - 390px);
     padding: 7px;
     margin-bottom: 10px;
     overflow-y: auto;

src/views/complianceAnalysis/ghzc.scss

@@ -91,6 +91,8 @@
             display: flex;
             justify-content: space-between;
             text-align: center;
+            position: absolute;
+            bottom: 10px;
         }
     }