拾取坐标、隐患级别

gassafetyprogress-web/public/index.html

@@ -8,6 +8,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
+    <script src="https://webapi.amap.com/maps?v=2.0&key=eed7ca3167f765467aa377fa78e61ece&plugin=Map3D,AMap.DistrictSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MouseTool,AMap.ControlBar,AMap.CircleEditor,AMap.PolyEditor"></script>
 	  <style>
     html,
     body,

gassafetyprogress-web/src/assets/mapImages/yalibiao.svg

+<svg id="组_2449" data-name="组 2449" xmlns="http://www.w3.org/2000/svg" width="23" height="33.9" viewBox="0 0 23 33.9">
+  <g id="路径_186" data-name="路径 186" fill="none">
+    <path d="M11.5,0A11.5,11.5,0,0,1,23,11.5c0,6.351-11.6,18.226-11.5,18.3S0,17.851,0,11.5A11.5,11.5,0,0,1,11.5,0Z" stroke="none"/>
+    <path d="M 11.5 0.9999942779541016 C 5.71027946472168 0.9999942779541016 1 5.710294723510742 1 11.50003433227539 C 1 15.44047451019287 6.295700073242188 22.62868881225586 11.47670364379883 28.30246925354004 C 12.68497562408447 26.95181846618652 15.33078575134277 23.97880172729492 17.65543937683105 20.72857475280762 C 19.63740921020508 17.95747375488281 22 14.10698509216309 22 11.50003433227539 C 22 5.710294723510742 17.28972053527832 0.9999942779541016 11.5 0.9999942779541016 M 11.5 -5.7220458984375e-06 C 17.85127067565918 -5.7220458984375e-06 23 5.148744583129883 23 11.50003433227539 C 23 17.82767868041992 11.48916530609131 29.63789367675781 11.49940204620361 29.80171203613281 C 11.36462783813477 29.63816833496094 0 17.78736114501953 0 11.50003433227539 C 0 5.148744583129883 5.14872932434082 -5.7220458984375e-06 11.5 -5.7220458984375e-06 Z M 11.49940204620361 29.80171203613281 C 11.50076866149902 29.80337142944336 11.50098419189453 29.80383491516113 11.5 29.80305480957031 C 11.49963855743408 29.80276870727539 11.49944019317627 29.80232429504395 11.49940204620361 29.80171203613281 Z" stroke="none" fill="#7bf8f4"/>
+  </g>
+  <path id="多边形_33" data-name="多边形 33" d="M4.471,0,8.941,5.961H0Z" transform="translate(16.094 29.804) rotate(180)" fill="#7bf8f4"/>
+  <path id="路径_966" data-name="路径 966" d="M99.476,156.616a6.028,6.028,0,0,1-1.622,2.267.9.9,0,0,1-.583.252.8.8,0,0,1-.567-.236.765.765,0,0,1-.236-.535.705.705,0,0,1,.236-.535,6.035,6.035,0,0,0,1.748-4.377A5.726,5.726,0,0,0,96.7,149.2a6.645,6.645,0,0,0-9.085.016,5.836,5.836,0,0,0-1.763,4.283,6.134,6.134,0,0,0,1.952,4.346.765.765,0,0,1,.236.535.705.705,0,0,1-.236.535.748.748,0,0,1-.567.236.8.8,0,0,1-.567-.236,7.414,7.414,0,0,1-2.047-2.724,7.528,7.528,0,0,1,1.748-8.266,7.836,7.836,0,0,1,2.629-1.685,9.392,9.392,0,0,1,6.361-.063,6.113,6.113,0,0,1,2.141,1.26c2.866,2.425,3.023,5.9,2.047,8.943Zm-7.337-7.684a4.366,4.366,0,0,0-4.377,4.267.5.5,0,0,1-.236.5.527.527,0,0,1-.567,0,.513.513,0,0,1-.236-.5,5.254,5.254,0,0,1,1.575-3.684,5.533,5.533,0,0,1,7.7,0,5.208,5.208,0,0,1,1.606,3.732.5.5,0,0,1-.236.5.527.527,0,0,1-.567,0,.513.513,0,0,1-.236-.5,4.382,4.382,0,0,0-4.424-4.314Zm.913,5.4a1.113,1.113,0,0,1-1.559-.047,1.054,1.054,0,0,1-.268-1.149l-1.212-1.2a.418.418,0,0,1,0-.6.479.479,0,0,1,.63,0l1.228,1.2a1.162,1.162,0,0,1,1.2.268,1.024,1.024,0,0,1,.331.771A1.093,1.093,0,0,1,93.052,154.333Zm.016-.016" transform="translate(-80.582 -142.727)" fill="#7bf8f4"/>
+</svg>

gassafetyprogress-web/src/assets/styles/index.scss

@@ -189,3 +189,7 @@ aside {
 .multiselect--active {
   z-index: 1000 !important;
 }
+
+.amap-sug-result{
+  z-index:999999;
+}

gassafetyprogress-web/src/components/GetPos/index.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-02-12 11:07:10
+ * @LastEditTime: 2022-02-12 15:13:41
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /test/hello-world/src/components/GetPos.vue/index.vue
+-->
+<template>
+  <el-dialog
+    class="getpos"
+    title="定位"
+    :visible.sync="dialogVisible"
+    width="60%"
+    :before-close="handleClose"
+  >
+    <div class="search-wrapper pos">
+      <el-input
+        v-model="searchinput"
+        class="searchinput"
+        placeholder="请输入内容"
+        size="mini"
+        style="width: 150px"
+        ref="input"
+      ></el-input>
+    </div>
+
+    <div @click="pos" class="positionBtn pos">
+      <el-button type="primary" size="mini" icon="el-icon-position"
+        >定位</el-button
+      >
+    </div>
+
+    <div id="getposmap"></div>
+  </el-dialog>
+</template>
+
+<script>
+import { EditorMap } from "./untils/getPath.js";
+export default {
+  props: {
+    //管道路径，二维数组
+    pipePath: {
+      type: Array,
+      default: () => [],
+    },
+    // marker位置，数组
+    devicePos: {
+      type: Array,
+      default: () => [],
+    },
+    // 设备类型，管道传pipe，marker就不用传值
+    device: {
+      type: String,
+      default: "",
+    },
+    // 显示隐藏
+    dialogVisible:{
+      type:Boolean,
+      default:false,
+    }
+  },
+  data() {
+    return {
+      // dialogVisible: false,
+      map: null,
+      searchinput: "",
+    };
+  },
+  watch: {
+    dialogVisible(newValue) {
+      if (newValue) {
+        this.init();
+      } else {
+        this.map.destroy();
+      }
+      this.$nextTick(() => {
+        const input = this.$refs.input.$refs.input;
+        this.map.positionSearch(input);
+      });
+    },
+  },
+  mounted() {
+  },
+  methods: {
+    init() {
+      this.$nextTick(() => {
+        this.map = new EditorMap("getposmap", {}, this);
+        // 如果不传值就是设备,传pipe就是管道
+        if (this.device == "") {
+          // 如果传了路径就创建一个marker，如果没传就直接激活手动创建
+          if (this.devicePos.length > 0) {
+            this.map.addDevice({path:this.devicePos});
+          } else {
+            this.map.mouseAddMarker();
+          }
+        } else {
+          if (this.pipePath.length > 0) {
+            this.map.addPipeLine({path:this.pipePath});
+          } else {
+            this.mouseAddPipeline();
+          }
+        }
+      });
+    },
+    handleClose() {
+      this.$emit("close")
+    },
+    open() {
+      this.dialogVisible = true;
+    },
+    // 返回坐标
+    pos() {
+      this.path = this.map.getPath();
+      this.$emit("getPath", this.path);
+      console.log(this.path)
+      if (this.path?.length > 0) {
+        this.$emit("update:dialogVisible", false);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.search-wrapper {
+  left: 30px;
+}
+.positionBtn {
+  right: 30px;
+}
+.pos {
+  position: absolute;
+  top: 90px;
+  z-index: 20;
+}
+#getposmap {
+  width: 100%;
+  height: 500px;
+}
+</style>

gassafetyprogress-web/src/views/standingBook/hidden/index.vue

@@ -67,16 +67,17 @@
 
     <el-table v-loading="loading" :data="hiddenList" >
       <el-table-column label="隐患名称" align="center" prop="hiddenTitle" width="200px"/>
-      <el-table-column label="隐患类型" align="center" prop="hiddenType" width="180px">
+      <el-table-column label="隐患等级" align="center" prop="hiddenType" width="160px">
         <template slot-scope="scope">
-          <span v-if="scope.row.hiddenType == '1'"></span>
-          <span v-if="scope.row.hiddenType == '2'"></span>
+          <span v-if="scope.row.hiddenType == '1'">一级隐患</span>
+          <span v-if="scope.row.hiddenType == '2'">二级隐患</span>
+          <span v-if="scope.row.hiddenType == '3'">三级隐患</span>
         </template>
       </el-table-column>
       <el-table-column label="隐患位置" align="center" prop="hiddenLocation" width="300px"/>
       <el-table-column label="隐患发现人员" align="center" prop="hiddenFindPeople" width="150px"/>
-      <el-table-column label="发现时间" align="center" prop="hiddenFindDate" width="180px"/>
-      <el-table-column label="处理方案" align="center" prop="dealPlanUrl" width="120px">
+      <el-table-column label="发现时间" align="center" prop="hiddenFindDate" width="160px"/>
+      <el-table-column label="处理方案" align="center" prop="dealPlanUrl" width="150px">
         <template slot-scope="scope">
           <span
             class="dbtn"
@@ -139,8 +140,8 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="隐患类型" prop="hiddenType">
-              <el-select v-model="form.hiddenType" placeholder="请选择隐患类型" style="width: 100%">
+            <el-form-item label="隐患等级" prop="hiddenType">
+              <el-select v-model="form.hiddenType" placeholder="请选择隐患等级" style="width: 100%">
                 <el-option
                   v-for="dict in typeOptions"
                   :key="dict.dictValue"
@@ -234,14 +235,13 @@
       </div>
     </el-dialog>
 
-    <Mapdialog
-      v-if="loadmap"
-      :dialogTableVisible="dialogTableVisible"
-      @dialogcancelFun="dialogcancelFun"
-      :slat="form.latitude"
-      :slng="form.longitude"
-      @confirmFun="confirmFun($event)"
-    ></Mapdialog>
+    <GetPos
+      :dialogVisible.sync="dialogTableVisible"
+      device=""
+      :devicePos="devicePos"
+      @close="dialogcancelFun"
+      @getPath="getPath"
+    />
 
   </div>
 </template>
@@ -250,13 +250,15 @@
 import { listHidden, getHidden, delHidden, addHidden, updateHidden, exportHidden } from "@/api/standingBook/hidden";
 import Editor from '@/components/Editor';
 import FileUpload from '@/components/FileUpload';
+import GetPos from '@/components/GetPos';
 
 let uploadfile = require("@/assets/uploadfile.png");
 export default {
   name: "Hidden",
   components: {
     Editor,
-    FileUpload
+    FileUpload,
+    GetPos
   },
   data() {
     return {
@@ -285,8 +287,8 @@ export default {
       // 上传文件列表
       fileList: [],
       // 地图
-      loadmap: false,
       dialogTableVisible: false,
+      devicePos: [],
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -303,9 +305,9 @@ export default {
         hiddenTitle: [
           { required: true, message: "请输入隐患名称", trigger: "blur" },
         ],
-        /*hiddenType: [
-          { required: true, message: "请选择隐患类型", trigger: "blur" },
-        ],*/
+        hiddenType: [
+          { required: true, message: "请选择隐患等级", trigger: "blur" },
+        ],
         hiddenContent: [
           { required: true, message: "请输入隐患内容", trigger: "blur" },
         ],
@@ -399,6 +401,7 @@ export default {
             url: uploadfile,
           });
         }
+        this.devicePos = [this.form.longitude, this.form.latitude];
         this.open = true;
         this.title = "修改隐患整治台账";
       });
@@ -477,19 +480,19 @@ export default {
       this.form.dealPlan = "";
       this.fileList = [];
     },
-    confirmFun(res) {
-      //确认选择经纬度
-      this.form.longitude = res.lng;
-      this.form.latitude = res.lat;
-    },
     MapdialogFun() {
-      this.loadmap = true;
       this.dialogTableVisible = true;
+      // this.devicePos = [this.form.longitude, this.form.latitude];
+      console.log("devicePos",this.devicePos)
     },
     dialogcancelFun() {
-      this.loadmap = false;
       this.dialogTableVisible = false;
     },
+    getPath(res){
+      //确认选择经纬度
+      this.form.longitude = res[0];
+      this.form.latitude = res[1];
+    }
   }
 };
 </script>

gassafetyprogress-web/src/views/standingBook/hiddenDetail/index.vue

@@ -30,8 +30,10 @@
               </el-form-item>
             </el-col>
             <el-col :span="6">
-              <el-form-item label="隐患类型:" prop="hiddenType">
-                <font>{{form.hiddenType}}</font>
+              <el-form-item label="隐患等级:" prop="hiddenType">
+                <font v-if="form.hiddenType == '1'">一级隐患</font>
+                <font v-if="form.hiddenType == '2'">二级隐患</font>
+                <font v-if="form.hiddenType == '3'">三级隐患</font>
               </el-form-item>
               <el-form-item label="发现时间:" prop="hiddenFindDate">
                 <font>{{form.hiddenFindDate}}</font>

gassafetyprogress-web/src/views/standingBook/trouble/index.vue

@@ -232,24 +232,25 @@
       </div>
     </el-dialog>
 
-    <Mapdialog
-      v-if="loadmap"
-      :dialogTableVisible="dialogTableVisible"
-      @dialogcancelFun="dialogcancelFun"
-      :slat="form.latitude"
-      :slng="form.longitude"
-      @confirmFun="confirmFun($event)"
-    ></Mapdialog>
+    <GetPos
+      :dialogVisible.sync="dialogTableVisible"
+      device=""
+      :devicePos="devicePos"
+      @close="dialogcancelFun"
+      @getPath="getPath"
+    />
 
   </div>
 </template>
 
 <script>
 import { listTrouble, getTrouble, delTrouble, addTrouble, updateTrouble, exportTrouble } from "@/api/standingBook/trouble";
+import GetPos from '@/components/GetPos';
 
 export default {
   name: "Trouble",
   components: {
+    GetPos
   },
   data() {
     return {
@@ -273,8 +274,8 @@ export default {
       troubleTypeOptions: [],
       isDealOptions: [],
       // 地图
-      loadmap: false,
       dialogTableVisible: false,
+      devicePos: [],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -385,6 +386,7 @@ export default {
       const troubleId = row.troubleId || this.ids
       getTrouble(troubleId).then(response => {
         this.form = response.data;
+        this.devicePos = [this.form.longitude, this.form.latitude];
         this.open = true;
         this.title = "修改事故台账";
       });
@@ -448,19 +450,17 @@ export default {
         }
       })
     },
-    confirmFun(res) {
-      //确认选择经纬度
-      this.form.longitude = res.lng;
-      this.form.latitude = res.lat;
-    },
     MapdialogFun() {
-      this.loadmap = true;
       this.dialogTableVisible = true;
     },
     dialogcancelFun() {
-      this.loadmap = false;
       this.dialogTableVisible = false;
     },
+    getPath(res){
+      //确认选择经纬度
+      this.form.longitude = res[0];
+      this.form.latitude = res[1];
+    }
   }
 };
 </script>