合并到jzl

gassafety-web/src/api/device/pipe.js

@@ -9,6 +9,7 @@ export function listPipe(query) {
   })
 }
 
+
 // 查询管道信息列表
 export function pipeAllInfoList(query) {
   return request({
@@ -18,11 +19,15 @@ export function pipeAllInfoList(query) {
   })
 }
 
-// 查询管道信息详细
-export function getPipe(pipeId) {
+
+
+// getAllDeviceInfo
+
+export function getAllDevice(data) {
   return request({
-    url: '/device/pipe/' + pipeId,
-    method: 'get'
+    url: '/device/pipe/getAllDeviceInfo',
+    method: 'post',
+    data: data
   })
 }
 

gassafety-web/src/components/PopWindow/pipelineView.vue

@@ -4,8 +4,14 @@
     :visible.sync="dialogVisible"
     :before-close="handleClose"
   >
-    <el-row>
-      <el-form ref="editForm" :model="editForm" label-width="120px" size="mini">
+    <el-row >
+      <el-form
+        :rules="rules"
+        ref="editForm"
+        :model="editForm"
+        label-width="120px"
+        size="mini"
+      >
         <el-col>
           <el-form-item v-show="false" label="管道id" prop="pipeId">
             <el-input
@@ -44,8 +50,8 @@
           </el-form-item>
         </el-col>
         <el-col>
-          <el-form-item label="管道所在地址" prop="iconUrl">
-            <el-input v-model="editForm.iconUrl"></el-input>
+          <el-form-item label="管道所在地址" prop="pipeAddr">
+            <el-input v-model="editForm.pipeAddr"></el-input>
           </el-form-item>
         </el-col>
         <el-col>
@@ -78,7 +84,7 @@
             <!-- select -->
             <el-radio-group v-model="editForm.pipePressure">
               <!-- 1低压，2中压，3次高压，4高压 -->
-              <el-radio label="1">低押</el-radio>
+              <el-radio label="1">低压</el-radio>
               <el-radio label="2">中压</el-radio>
               <el-radio label="3">次高压</el-radio>
               <el-radio label="4">高压</el-radio>
@@ -86,20 +92,21 @@
           </el-form-item>
         </el-col>
         <el-col>
-          <el-form-item label="上传图片" prop="">
+          <el-form-item label="上传图片" prop="iconUrl">
             <MyFileUpload
               listType="picture-card"
               @resFun="fileFinshed"
               @remove="listRemove"
               :fileArr="fileArr"
             />
+            <el-input v-show="false" disabled v-model="editForm.iconUrl"></el-input>
           </el-form-item>
+          <!-- <el-form-item v-show="false" label="设备图片路径" prop="iconUrl"> -->
+          <!-- </el-form-item> -->
         </el-col>
-        <el-col>
-          <el-form-item v-show="false" label="设备图片路径" prop="url">
-            <el-input disabled v-model="editForm.url"></el-input>
-          </el-form-item>
-        </el-col>
+        <!-- <el-col>
+         
+        </el-col> -->
         <el-col>
           <el-form-item label="安装日期" prop="installationTime">
             <el-col :span="11">
@@ -141,6 +148,8 @@
 <script>
 import MyFileUpload from "@/components/MyFileUpload";
 import { addPipe, updatePipe } from "@/api/device/pipe.js";
+import { getString } from "@/utils/gassafety.js";
+import moment from "moment";
 export default {
   props: {
     lineData: {
@@ -170,11 +179,42 @@ export default {
       // isShow: false,
       fileArr: [],
       editForm: {
+        pipeName:"",
         pipeType: "1",
         pipePressure: "1",
-        url: "",
+        iconUrl: "",
       },
       dialogVisible: false,
+      rules: {
+        pipeName: [
+          { required: true, message: "请输入管道名称", trigger: "blur" },
+          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        pipeCode: [
+          { required: true, message: "请输入管道编号", trigger: "blur" },
+        ],
+        pipeLength: [
+          { required: true, message: "请输入管道长度", trigger: "blur" },
+        ],
+        pipeAddr: [
+          { required: true, message: "请输入管道所在地址", trigger: "blur" },
+        ],
+        pipeType: [
+          { required: true, message: "请选择管道类型", trigger: "blur" },
+        ],
+        pipePressure: [
+          { required: true, message: "请选择管道压力", trigger: "blur" },
+        ],
+        iconUrl: [{ required: true, message: "请上传骨片", trigger: "change" }],
+        installationTime: [
+          {
+            // type: "date",
+            required: true,
+            message: "请选择日期",
+            trigger: "change",
+          },
+        ],
+      },
     };
   },
   created() {
@@ -182,25 +222,33 @@ export default {
     if (this.lineData?.pipeId) {
       this.editForm = { ...this.lineData };
     }
-    this.editForm.coordinates = this.lnglatsArr;
+    this.editForm.coordinates = getString(this.lnglatsArr);
     // 如果有图片路径就赋显，如果没有就啥也没有
-    this.fileArr = this.editForm.url != "" ? [{ url: this.editForm.url }] : [];
+    this.fileArr = this.lineData.pipeId ? [{ url: this.editForm.iconUrl }] : [];
   },
   methods: {
+    mouseup(){
+      console.log('组件mouseup')
+    },
     ok() {
-      // console.log(this.editForm.pipeId);
-      // if(this.editForm.pipeId){
-      //   console.log("更改")
-      // }else{
-      //   console.log("新增")
-      // }
+      this.$refs.editForm.validate((valid)=>{
+        if(valid){
           const data = { ...this.editForm };
+        data.installationTime = moment(this.editForm.installationTime).format(
+          "YYYY-MM-DD HH:mm:ss"
+        );
         console.log("data", data);
         console.log(this.editForm.pipeId);
-      this.requeset(this.editForm.pipeId).then((res) => {
+        this.requeset(this.editForm.pipeId, data).then((res) => {
+          // 改变this指向，传回去target ，传回去data
+          if (res.code == 200) {
             this.dialogVisible = false;
-        this.lineOkCallBack.call(this.gaodeMap, this.target);
+           data.pipeId =data.pipeId ?data.pipeId: res.data;
+            this.lineOkCallBack.call(this.gaodeMap, this.target, data);
+          }
         });
+        }
+      })
       // console.log(this.gaodeMap,this.target)
     },
     async requeset(id, data) {
@@ -222,16 +270,18 @@ export default {
       this.$confirm("确认关闭？")
         .then((_) => {
           done();
+          
         })
         .catch((_) => {});
     },
     // 图片上传成功
     fileFinshed(e) {
-      this.editForm.url = e.url;
+      this.editForm.iconUrl = e.url;
     },
     // 图片列表移除
     listRemove(e) {
-      this.editForm.url = "";
+      this.editForm.iconUrl = "";
+
       this.fileArr = [];
     },
   },

gassafety-web/src/utils/gassafety.js

@@ -3,27 +3,27 @@
  * Copyright (c) 2021 gassafety
  */
 
-const baseURL = process.env.VUE_APP_BASE_API
+const baseURL = process.env.VUE_APP_BASE_API;
 
 // 日期格式化
 export function parseTime(time, pattern) {
   if (arguments.length === 0 || !time) {
-		return null
+    return null;
   }
-	const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
-	let date
-	if (typeof time === 'object') {
-		date = time
+  const format = pattern || "{y}-{m}-{d} {h}:{i}:{s}";
+  let date;
+  if (typeof time === "object") {
+    date = time;
   } else {
-		if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
-			time = parseInt(time)
-		} else if (typeof time === 'string') {
-			time = time.replace(new RegExp(/-/gm), '/');
+    if (typeof time === "string" && /^[0-9]+$/.test(time)) {
+      time = parseInt(time);
+    } else if (typeof time === "string") {
+      time = time.replace(new RegExp(/-/gm), "/");
     }
-		if ((typeof time === 'number') && (time.toString().length === 10)) {
-			time = time * 1000
+    if (typeof time === "number" && time.toString().length === 10) {
+      time = time * 1000;
     }
-		date = new Date(time)
+    date = new Date(time);
   }
   const formatObj = {
     y: date.getFullYear(),
@@ -33,17 +33,19 @@ export function parseTime(time, pattern) {
     i: date.getMinutes(),
     s: date.getSeconds(),
     a: date.getDay()
-	}
+  };
   const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
-		let value = formatObj[key]
+    let value = formatObj[key];
     // Note: getDay() returns 0 on Sunday
-		if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
+    if (key === "a") {
+      return ["日", "一", "二", "三", "四", "五", "六"][value];
+    }
     if (result.length > 0 && value < 10) {
-			value = '0' + value
+      value = "0" + value;
     }
-		return value || 0
-	})
-	return time_str
+    return value || 0;
+  });
+  return time_str;
 }
 
 // 表单重置
@@ -57,8 +59,8 @@ export function resetForm(refName) {
 export function addDateRange(params, dateRange, propName) {
   var search = params;
   search.params = {};
-	if (null != dateRange && '' != dateRange) {
-		if (typeof (propName) === "undefined") {
+  if (null != dateRange && "" != dateRange) {
+    if (typeof propName === "undefined") {
       search.params["beginTime"] = dateRange[0];
       search.params["endTime"] = dateRange[1];
     } else {
@@ -72,13 +74,13 @@ export function addDateRange(params, dateRange, propName) {
 // 回显数据字典
 export function selectDictLabel(datas, value) {
   var actions = [];
-	Object.keys(datas).some((key) => {
-		if (datas[key].dictValue == ('' + value)) {
+  Object.keys(datas).some(key => {
+    if (datas[key].dictValue == "" + value) {
       actions.push(datas[key].dictLabel);
       return true;
     }
-	})
-	return actions.join('');
+  });
+  return actions.join("");
 }
 
 // 回显数据字典（字符串数组）
@@ -86,33 +88,40 @@ export function selectDictLabels(datas, value, separator) {
   var actions = [];
   var currentSeparator = undefined === separator ? "," : separator;
   var temp = value.split(currentSeparator);
-	Object.keys(value.split(currentSeparator)).some((val) => {
-		Object.keys(datas).some((key) => {
-			if (datas[key].dictValue == ('' + temp[val])) {
+  Object.keys(value.split(currentSeparator)).some(val => {
+    Object.keys(datas).some(key => {
+      if (datas[key].dictValue == "" + temp[val]) {
         actions.push(datas[key].dictLabel + currentSeparator);
       }
-		})
-	})
-	return actions.join('').substring(0, actions.join('').length - 1);
+    });
+  });
+  return actions.join("").substring(0, actions.join("").length - 1);
 }
 
 // 通用下载方法
 export function download(fileName) {
-	window.location.href = baseURL + "/common/download?fileName=" + encodeURI(fileName) + "&delete=" + true;
+  window.location.href =
+    baseURL +
+    "/common/download?fileName=" +
+    encodeURI(fileName) +
+    "&delete=" +
+    true;
 }
 
 // 字符串格式化(%s )
 export function sprintf(str) {
-	var args = arguments, flag = true, i = 1;
-	str = str.replace(/%s/g, function () {
+  var args = arguments,
+    flag = true,
+    i = 1;
+  str = str.replace(/%s/g, function() {
     var arg = args[i++];
-		if (typeof arg === 'undefined') {
+    if (typeof arg === "undefined") {
       flag = false;
-			return '';
+      return "";
     }
     return arg;
   });
-	return flag ? str : '';
+  return flag ? str : "";
 }
 
 // 转换字符串，undefined,null等转化为""
@@ -132,9 +141,9 @@ export function praseStrEmpty(str) {
  */
 export function handleTree(data, id, parentId, children) {
   let config = {
-		id: id || 'id',
-		parentId: parentId || 'parentId',
-		childrenList: children || 'children'
+    id: id || "id",
+    parentId: parentId || "parentId",
+    childrenList: children || "children"
   };
 
   var childrenListMap = {};
@@ -173,3 +182,37 @@ export function handleTree(data, id, parentId, children) {
   }
   return tree;
 }
+// 二维数组转字符串
+export const getString = objarr => {
+  const typeNO = objarr.length;
+  let tree = "[";
+  for (var i = 0; i < typeNO; i++) {
+    tree += "[";
+    tree += "'" + objarr[i][0] + "',";
+    tree += "'" + objarr[i][1] + "'";
+    tree += "]";
+    if (i < typeNO - 1) {
+      tree += ",";
+    }
+  }
+  tree += "]";
+  return tree;
+};
+
+// 二维数组字符串转回数组
+export const getArray = str => {
+  let newArr = str.slice(1, str.length - 1);
+  newArr = newArr.split("],")
+  return newArr.map((item, index, own) => {
+    let str = "",
+      arr = [];
+    str = item.replace(/\[/g, "");
+    str = str.replace(/]/g, "");
+    arr = str.split(",");
+    arr = arr.map(item => {
+      return Number(item);
+    });
+    return arr;
+  });
+  
+};

gassafety-web/src/views/enterprise/map/index.vue

@@ -31,7 +31,7 @@
         <div
           class="el-btn"
           :class="{ active: targetNum == 1 }"
-          @click="addDevice"
+          @click.stop="addDevice"
         >
           <template v-if="iconClass == 'icon-create'">
             <span class="left">
@@ -49,7 +49,7 @@
         <div
           class="el-btn"
           :class="{ active: targetNum == 2 }"
-          @click="editDevice"
+          @click.stop="editDevice"
         >
           <span class="left">
             <i class="iconfont icon-compile" />
@@ -59,7 +59,7 @@
         <div
           class="el-btn"
           :class="{ active: targetNum == 3 }"
-          @click="deleteDevice"
+          @click.stop="deleteDevice"
         >
           <span class="left">
             <i class="iconfont icon-delete" />
@@ -75,7 +75,7 @@
               <div
                 class="op-btn"
                 :class="{ active: item.value == createValue }"
-                @click="createChange(item)"
+                @click.stop="createChange($event, item)"
               >
                 <span class="left">
                   <i class="iconfont" :class="item.icon" />
@@ -89,8 +89,19 @@
     </div>
 
     <!-- <el-select-->
-    <el-input v-model="keyWord" placeholder="点击输入" id="tipinput" class="search-input"/>
-    <el-button type="red" icon="el-icon-search" class="search-but" @click="search()">搜索</el-button>
+    <el-input
+      v-model="keyWord"
+      placeholder="点击输入"
+      id="tipinput"
+      class="search-input"
+    />
+    <el-button
+      type="red"
+      icon="el-icon-search"
+      class="search-but"
+      @click="search()"
+      >搜索</el-button
+    >
     <!-- <el-button
       type="primary"
       style="position: absolute; top: 100px; left: 75%"
@@ -128,7 +139,7 @@
         v-for="item in changeBtnData"
         :key="item.value"
         class="box"
-        :class="{ active: leftBarNum.indexOf(item.value)>=0 }"
+        :class="{ active: leftBarNum.indexOf(item.value) >= 0 }"
         @click="leftBarChange(item)"
       >
         <div class="left">
@@ -143,7 +154,7 @@
 </template>
 <script>
 import gaodeMap from "utils/gaodeMap.js";
-import {pipeAllInfoList} from "@/api/device/pipe.js"
+import { pipeAllInfoList } from "@/api/device/pipe.js";
 import { map, DEVICE_TYPE, mapOperateType } from "utils/gaodeMap.js";
 import { getAllDeviceInfo } from "@/api/device/deviceInfo";
 export default {
@@ -168,13 +179,13 @@ export default {
         phone: null,
         installationTime: null,
         inspectionTime: null,
-        remarks: null
+        remarks: null,
       },
       radio1: "",
       // 1新建，2编辑，3删除,点按钮变色
       targetNum: 0,
       // 左边的bar的active判定
-      leftBarNum:[1,2,3,4,5],
+      leftBarNum: [1, 2, 3, 4, 5],
 
       // 新建里的值
       iconClass: "icon-create",
@@ -207,15 +218,14 @@ export default {
           label: "压力表",
         },
       ],
-      keyWord:""
+      keyWord: "",
     };
   },
   mounted() {
     let gaoMap = new gaodeMap("石家庄");
-    pipeAllInfoList().then(res=>{
-      console.log("管道",res);
-    })
+
     this.gaoMap = gaoMap;
+    window.addEventListener("click", this.barClose);
     let path = [
       [
         [114.436698, 38.083306],
@@ -229,20 +239,20 @@ export default {
         [114.530768, 38.00165],
       ],
     ];
-    gaoMap.addPolyline(path);
     gaoMap.addMouseTool();
     gaoMap.searchTips("tipinput");
     this.getDeviceInfo();
+    this.getPipeList();
   },
   methods: {
     // 左边的Bar修改值
-    leftBarChange(item){
+    leftBarChange(item) {
       // this.leftBarNum= this.leftBarNum != item.value ? item.value:0;
       const index = this.leftBarNum.indexOf(item.value);
-      if(index>=0){
-        this.leftBarNum.splice(index,1)
-      }else{
-         this.leftBarNum.push(item.value)
+      if (index >= 0) {
+        this.leftBarNum.splice(index, 1);
+      } else {
+        this.leftBarNum.push(item.value);
       }
     },
     addDevice() {
@@ -254,8 +264,8 @@ export default {
           this.createReset();
         }
       }
-      if(this.targetNum ==1 && this.createValue ==1){
-        this.gaoMap.lineType=1;
+      if (this.targetNum == 1 && this.createValue == 1) {
+        this.gaoMap.lineType = 1;
       }
       this.deviceType = !this.deviceType;
       this.gaoMap.mapOperateType = "add";
@@ -263,15 +273,16 @@ export default {
     },
 
     // 选择新建项目哪个
-    createChange(item) {
+    createChange(e, item) {
+      // e.stopPropagation();
       this.deviceType = false;
       this.iconClass = item.icon;
       this.createValue = item.value;
       this.createLabel = item.label;
 
-      if(this.targetNum==1 && this.createValue==1){
+      if (this.targetNum == 1 && this.createValue == 1) {
         // 0是初始，1是新建 2是编辑 3删除
-        this.gaoMap.lineType=1;
+        this.gaoMap.lineType = 1;
         this.gaoMap.createNewLine();
       }else {
         this.gaoMap.draw(this.createValue.toString());
@@ -285,12 +296,14 @@ export default {
     },
     editDevice() {
       this.targetNum = this.targetNum != 2 ? 2 : 0;
-      this.gaoMap.lineType=this.targetNum;
-      console.log(this.gaoMap.lineType)
-      if(this.targetNum!=2) {
+      this.gaoMap.lineType = this.targetNum;
+      console.log(this.gaoMap.lineType);
+      if (this.targetNum != 2) {
         this.gaoMap.linePolyEditorAllClose();
       }
       this.createReset();
+      // 如果正在新建线条，则清空
+      this.gaoMap.newLineReset();
       this.deviceType = false;
       this.gaoMap.mapOperateType = "edit";
       this.gaoMap.addMarkerDragg();
@@ -299,8 +312,9 @@ export default {
     },
     deleteDevice() {
       this.targetNum = this.targetNum != 3 ? 3 : 0;
-      this.gaoMap.lineType=this.targetNum;
-
+      this.gaoMap.lineType = this.targetNum;
+      // 如果正在新建线条，则清空
+      this.gaoMap.newLineReset();
       this.createReset();
       this.deviceType = false;
       this.gaoMap.mapOperateType = "delete";
@@ -320,19 +334,22 @@ export default {
         this.gaoMap.createNewLine();
       }
     },
-    getDeviceInfo(){
+    getDeviceInfo() {
       this.loading = true;
-      getAllDeviceInfo(this.queryParams).then(response => {
-        if(response.code == 200){
-          for(var i = 0;i < response.data.length; i++){
-            if("1" == response.data[i].deviceType){
-              this.gaoMap.addMarker(DEVICE_TYPE.REGEULATORBOX,response.data[i])
+      getAllDeviceInfo(this.queryParams).then((response) => {
+        if (response.code == 200) {
+          for (var i = 0; i < response.data.length; i++) {
+            if ("1" == response.data[i].deviceType) {
+              this.gaoMap.addMarker(
+                DEVICE_TYPE.REGEULATORBOX,
+                response.data[i]
+              );
             }
-            if("2" == response.data[i].deviceType){
-              this.gaoMap.addMarker(DEVICE_TYPE.VALUEWELL,response.data[i])
+            if ("2" == response.data[i].deviceType) {
+              this.gaoMap.addMarker(DEVICE_TYPE.VALUEWELL, response.data[i]);
             }
-            if("3" == response.data[i].deviceType){
-              this.gaoMap.addMarker(DEVICE_TYPE.FLOWMETER,response.data[i])
+            if ("3" == response.data[i].deviceType) {
+              this.gaoMap.addMarker(DEVICE_TYPE.FLOWMETER, response.data[i]);
             }
             if("4" == response.data[i].deviceType){
               this.gaoMap.addMarker(DEVICE_TYPE.PRESSUREGAGE,response.data[i])
@@ -341,12 +358,37 @@ export default {
         }
         this.loading = false;
       });
-
     },
-    search(){
+    getPipeList() {
+      pipeAllInfoList().then((res) => {
+        console.log("管道", res);
+        if (res.code == 200) {
+          this.gaoMap.addPolyline(res.data);
+        }
+      });
+    },
+    search() {
       this.gaoMap.placeSearch.clear();
-      this.gaoMap.placeSearch.search(this.keyWord)
+      this.gaoMap.placeSearch.search(this.keyWord);
+    },
+    // 新建下拉列表关闭
+    barClose() {
+      console.log("window");
+      this.deviceType = false;
+      // 如果没有选择的时候点window 则高亮消失
+      if (this.targetNum == 1 && this.iconClass == "icon-create") {
+        this.targetNum = 0;
       }
+      // 辅助新建重新画线
+      if (!this.gaoMap.lineFlag) return;
+      this.gaoMap.lineFlag = false;
+      this.gaoMap.createNewLine();
+    },
+  },
+
+  beforeDestroy() {
+    console.log("移除window事件");
+    window.removeEventListener("click", this.barClose);
   },
 };
 </script>
@@ -558,17 +600,19 @@ input[type="radio"] {
   width: 4rem;
   margin-right: 1rem;
 }
-.search-input{
+.search-input {
   position: absolute;
   top: 100px;
   left: 2%;
-  width:240px;
+  width: 240px;
 }
-.search-but{
+.search-but {
   position: absolute;
-  top: 100px; left: 19%;
-  width:85px;color: white;
-  background-color: #053B6A;
+  top: 100px;
+  left: 19%;
+  width: 85px;
+  color: white;
+  background-color: #053b6a;
 }
 </style>