合并到jzl地图index有改动

gassafety-web/package.json

@@ -24,6 +24,7 @@
     "js-beautify": "1.13.0",
     "js-cookie": "2.2.1",
     "jsencrypt": "3.0.0-rc.1",
+    "moment": "^2.29.1",
     "nprogress": "0.2.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",

gassafety-web/src/assets/styles/fonticon.scss

+@font-face {
+  font-family: "iconfont"; /* Project id 2692138 */
+  src: url('//at.alicdn.com/t/font_2692138_75daec8zfbv.woff2?t=1627011828763') format('woff2'),
+       url('//at.alicdn.com/t/font_2692138_75daec8zfbv.woff?t=1627011828763') format('woff'),
+       url('//at.alicdn.com/t/font_2692138_75daec8zfbv.ttf?t=1627011828763') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-ylb:before {
+  content: "\e60f";
+}
+
+.icon-fmj:before {
+  content: "\e608";
+}
+
+.icon-llj:before {
+  content: "\e609";
+}
+
+.icon-yh:before {
+  content: "\e60a";
+}
+
+.icon-tyx:before {
+  content: "\e60b";
+}
+
+.icon-yqb:before {
+  content: "\e60c";
+}
+
+.icon-zbry:before {
+  content: "\e60d";
+}
+
+.icon-gd:before {
+  content: "\e60e";
+}
+
+.icon-delete:before {
+  content: "\e604";
+}
+
+.icon-compile:before {
+  content: "\e603";
+}
+
+.icon-create:before {
+  content: "\e601";
+}

gassafety-web/src/components/MyFileUpload/index.vue

+<template>
+  <div class="upload-file">
+    <el-upload
+      :action="uploadFileUrl"
+      :before-upload="handleBeforeUpload"
+      :file-list="fileArr"
+      :limit="1"
+      :list-type="listType"
+      :on-error="handleUploadError"
+      :on-exceed="handleExceed"
+      :on-success="handleUploadSuccess"
+      :on-remove="handleRemove"
+      :on-preview="handleFileClick"
+      :show-file-list="true"
+      :headers="headers"
+      class="upload-file-uploader"
+      ref="upload"
+    >
+      <!-- 上传按钮 -->
+      <!-- <el-button size="mini" icon="" type="primary"></el-button> -->
+      <i class="el-icon-plus"></i>
+      <!-- 上传提示 -->
+      <div class="el-upload__tip" slot="tip" v-if="showTip">
+        请上传
+        <template v-if="fileSize">
+          大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
+        </template>
+        <template v-if="fileType">
+          格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
+        </template>
+        的文件
+      </div>
+    </el-upload>
+    <el-dialog  :modal="modal" :visible.sync="dialogVisible">
+      <img width="100%" :src="dialogImageUrl" alt="" />
+    </el-dialog>
+    <!-- 文件列表 -->
+    <!-- <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list">
+        <el-link :href="file.url" :underline="false" target="_blank">
+          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
+        </el-link>
+        <div class="ele-upload-list__item-content-action">
+          <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
+        </div>
+      </li>
+    </transition-group> -->
+  </div>
+</template>
+
+<script>
+import { getToken } from "@/utils/auth";
+
+export default {
+  props: {
+    // 值
+    value: [String, Object, Array],
+    listType: {
+      type: String,
+      defaule: "text",
+    },
+    // 大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 5,
+    },
+    fileArr: {
+      type: Array,
+      default: [],
+    },
+    // 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileType: {
+      type: Array,
+      default: () => ["doc", "xls", "ppt", "txt", "pdf", "png", "jpg", "jpeg"],
+    },
+    // 是否显示提示
+    isShowTip: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      fileList: [],
+      modal:false,
+      dialogVisible:false,
+      dialogImageUrl:"",
+    };
+  },
+  computed: {
+    // 是否显示提示
+    showTip() {
+      return this.isShowTip && (this.fileType || this.fileSize);
+    },
+    // 列表
+    list() {
+      let temp = 1;
+      if (this.value) {
+        // 首先将值转为数组
+        const list = Array.isArray(this.value) ? this.value : [this.value];
+        // 然后将数组转为对象数组
+        return list.map((item) => {
+          if (typeof item === "string") {
+            item = { name: item, url: item };
+          }
+          item.uid = item.uid || new Date().getTime() + temp++;
+          return item;
+        });
+      } else {
+        this.fileList = [];
+        return [];
+      }
+    },
+  },
+  methods: {
+    // 上传前校检格式和大小
+    handleBeforeUpload(file) {
+      // 校检文件类型
+      if (this.fileType) {
+        let fileExtension = "";
+        if (file.name.lastIndexOf(".") > -1) {
+          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
+        }
+        const isTypeOk = this.fileType.some((type) => {
+          if (file.type.indexOf(type) > -1) return true;
+          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
+          return false;
+        });
+        if (!isTypeOk) {
+          this.$message.error(
+            `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
+          );
+          return false;
+        }
+      }
+      // 校检文件大小
+      if (this.fileSize) {
+        const isLt = file.size / 1024 / 1024 < this.fileSize;
+        if (!isLt) {
+          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
+          return false;
+        }
+      }
+      return true;
+    },
+    // 文件个数超出
+    handleExceed() {
+      this.$message.error(`只允许上传单个文件`);
+    },
+    // 上传失败
+    handleUploadError(err) {
+      this.$message.error("上传失败, 请重试");
+    },
+    // 上传成功回调
+    handleUploadSuccess(res, file) {
+      this.$message.success("上传成功");
+      this.$emit("resFun", res);
+    },
+    // 文件列表移除文件
+    handleRemove(file, fileList) {
+      console.log("列表移除", file, fileList);
+      this.$emit("remove", file);
+    },
+    // 删除文件
+    handleDelete(index) {
+      this.fileList.splice(index, 1);
+      this.$emit("input", "");
+      // let that = this,
+      //   param;
+      // param = file.response ? file.response.fileName.replace(/\\/g, "%")
+      //   : file.response.url.replace(/\\/g, "%").slice(9);
+      // $.ajax({
+      //   type: "GET",
+      //   url: process.env.VUE_APP_BASE_API + "/common/deleteFile",
+      //   data: {savePath: param},
+      //   dataType: "json",
+      //   success: function(data){
+      //     if (data) that.$message.success("删除成功");
+      //     else return false;
+      //   }
+      // });
+    },
+    handleFileClick(file) {
+      this.dialogImageUrl = file.response.url;
+      this.dialogVisible=true;
+      console.log(file);
+    },
+    // 获取文件名称
+    getFileName(name) {
+      if (name.lastIndexOf("/") > -1) {
+        return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
+      } else {
+        return "";
+      }
+    },
+  },
+  created() {
+    // this.fileList = this.list;
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.upload-file-uploader {
+  margin-bottom: 5px;
+}
+.upload-file-list .el-upload-list__item {
+  border: 1px solid #e4e7ed;
+  line-height: 2;
+  margin-bottom: 10px;
+  position: relative;
+}
+.upload-file-list .ele-upload-list__item-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: inherit;
+}
+.ele-upload-list__item-content-action .el-link {
+  margin-right: 10px;
+}
+</style>

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

 <template>
   <div class="wrapper">
     <div class="top display-default">
-      <div class="left text">裕华路地埋管线</div>
-      <div class="right text">
+      <div class="left text">{{ obj.pipeName }}</div>
+      <div v-if="!obj.editorPage" class="right text">
         <img src="../../assets/images/closeBtn.png" alt="" />
       </div>
     </div>
     <!-- 设备信息 -->
     <div class="eq-content display-default">
       <div class="text-wrapper">
-        <div class="eq-text">设备编号：<span>aa</span></div>
-        <div class="eq-text">设备名称：<span>裕华路地埋管线</span></div>
-        <div class="eq-text">监测介质：<span>甲烷</span></div>
-        <div class="eq-text">设备状态：<span>报警</span></div>
-        <div class="eq-text">用户信息：<span>中厨燃气</span></div>
+        <div :title="obj.pipeName" class="eq-text">
+          <span>管道名称：</span>
+          <span>{{ obj.pipeName }}</span>
         </div>
+        <div class="eq-text">
+          <span>管道编号：</span>
+          <span>{{ obj.pipeCode }}</span>
+        </div>
+        <div class="eq-text">
+          <span>管道长度：</span>
+          <span>{{ `${obj.pipeLength ?obj.pipeLength+'米':""}` }}</span>
+        </div>
+        <div class="eq-text">
+          <span>管道类型：</span>
+          <span>{{ ["地埋管线", "地表管线"][obj.pipeType] }}</span>
+        </div>
+        <div class="eq-text">
+          <span>管道压力：</span>
+          <span>{{
+            ["低押", "中压", "次高压", "高压"][obj.pipePressure]
+          }}</span>
+        </div>
+      </div>
+
       <div class="pic">
-        <img src="" alt="" />
+        <img :src="obj.url" alt="" />
       </div>
     </div>
-    <!-- 维修人员 -->
+
     <div class="maintain-content">
-      <div>姓名： <span>高雄</span></div>
-      <div>电话： <span>13512451234</span></div>
-      <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
+      <div>
+        安装日期：<span>{{ obj.installationTime }}</span>
       </div>
-    <!-- 报警状态 -->
+      <div>
+        最后巡检日期：<span>{{ obj.inspectionTime }}</span>
+      </div>
+      <div>
+        备注信息；<span>{{ obj.remarks }}</span>
+      </div>
+    </div>
+    <template v-if="!obj.editorPage">
       <div class="warn-content">
         <div>报警状态 <span>报警</span></div>
         <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
       </div>
-
       <div class="btn">
         <el-button class="elbtn" type="primary">生成工单</el-button>
       </div>
+    </template>
+    <!-- 报警状态 -->
   </div>
 </template>
 
@@ -49,7 +74,7 @@ export default {
 <style lang="scss" scoped>
 .wrapper {
   width: 406px;
-  height: 488px;
+  // height: 488px;
   background: #fff;
   border-radius: 4px;
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
@@ -57,7 +82,7 @@ export default {
   .top {
     width: 100%;
     height: 51px;
-    background-color: #ff5a67;
+    background-color: #053b6a;
     .text {
       font-weight: 600;
       font-size: 16px;
@@ -73,7 +98,7 @@ export default {
   }
 
   .eq-content {
-    height: 156px;
+    min-height: 156px;
     box-sizing: border-box;
     padding: 13px 16px 13px 22px;
     border-bottom: 1px solid #e2e2e2;
@@ -87,6 +112,15 @@ export default {
         font-weight: 400;
         color: #1d1d1d;
         opacity: 1;
+
+        & > span {
+          display: inline-block;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          word-break: break-all;
+          max-width: 100px;
+        }
       }
     }
     .pic {
@@ -135,6 +169,9 @@ export default {
     }
   }
 }
+
+.wrapperEditorPage {
+}
 .display-default {
   display: flex;
   justify-content: space-between;

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

 <template>
-
   <el-dialog
     title="新增"
     :visible.sync="dialogVisible"
-    width="80%"
-    :before-close="handleClose">
+    :before-close="handleClose"
+  >
+    <el-row>
       <el-form ref="editForm" :model="editForm" label-width="120px" size="mini">
-      <el-form-item label="所属燃气公司" prop="a">
-        <el-input v-model="editForm.title"></el-input>
+        <el-col>
+          <el-form-item v-show="false" label="管道id" prop="pipeId">
+            <el-input
+              disabled
+              class="el-input"
+              v-model="editForm.pipeId"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+
+        <el-col>
+          <el-form-item v-show="false" label="企业id" prop="enterpriseId">
+            <el-input disabled v-model="editForm.enterpriseId"></el-input>
+          </el-form-item>
+        </el-col>
+
+        <el-col
+          ><el-form-item label="管道名称" prop="pipeName">
+            <el-input v-model="editForm.pipeName"></el-input> </el-form-item
+        ></el-col>
+
+        <el-col :span="11">
+          <el-form-item label="管道编号" prop="pipeCode">
+            <el-input v-model="editForm.pipeCode"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="11">
+          <el-form-item label="管道长度" prop="pipeLength">
+            <el-input v-model="editForm.pipeLength">
+              <i
+                slot="suffix"
+                style="color: #000; font-style: normal; margin-right: 10px"
+                >米</i
+              >
+            </el-input>
           </el-form-item>
-      <el-form-item label="名称" prop="b">
-        <el-input ></el-input>
+        </el-col>
+        <el-col>
+          <el-form-item label="管道所在地址" prop="iconUrl">
+            <el-input v-model="editForm.iconUrl"></el-input>
           </el-form-item>
-      <el-form-item label="地址" prop="c">
-        <el-input></el-input>
+        </el-col>
+        <el-col>
+          <el-form-item label="经纬度坐标" prop="coordinates">
+            <el-card class="box-card">
+              <div v-text="lnglatsArr"></div>
+              <!-- [<span
+              v-for="(item, index) in lnglatsArr"
+              :key="index"
+              class="text item"
+            >
+
+              {{`[${item[0]},${item[1]}],`}}
+            </span>] -->
+            </el-card>
           </el-form-item>
-      <el-form-item label="联系人" prop="d">
-        <el-input></el-input>
+        </el-col>
+        <el-col>
+          <el-form-item label="管道类型" prop="pipeType">
+            <!-- 下拉 -->
+
+            <el-radio-group v-model="editForm.pipeType">
+              <el-radio label="1">地埋管线</el-radio>
+              <el-radio label="2">地表管线</el-radio>
+            </el-radio-group>
           </el-form-item>
-      <el-form-item label="电话" prop="e">
-        <el-input></el-input>
+        </el-col>
+        <el-col>
+          <el-form-item label="管道压力" prop="pipePressure">
+            <!-- select -->
+            <el-radio-group v-model="editForm.pipePressure">
+              <!-- 1低压，2中压，3次高压，4高压 -->
+              <el-radio label="1">低押</el-radio>
+              <el-radio label="2">中压</el-radio>
+              <el-radio label="3">次高压</el-radio>
+              <el-radio label="4">高压</el-radio>
+            </el-radio-group>
           </el-form-item>
-      <el-form-item label="型号" prop="f">
-        <el-input></el-input>
+        </el-col>
+        <el-col>
+          <el-form-item label="上传图片" prop="">
+            <MyFileUpload
+              listType="picture-card"
+              @resFun="fileFinshed"
+              @remove="listRemove"
+              :fileArr="fileArr"
+            />
           </el-form-item>
-      <el-form-item label="安装日期" prop="g">
+        </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-form-item label="安装日期" prop="installationTime">
             <el-col :span="11">
-          <el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
+              <el-date-picker
+                type="datetime"
+                placeholder="选择日期"
+                style="width: 100%"
+                v-model="editForm.installationTime"
+              ></el-date-picker>
             </el-col>
           </el-form-item>
-      <el-form-item label="最后巡检日期" prop="k">
+        </el-col>
+        <!-- <el-col>
+        <el-form-item label="最后巡检日期" prop="inspectionTime">
           <el-col :span="11">
-          <el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
+            <el-date-picker
+              type="date"
+              placeholder="选择日期"
+              style="width: 100%"
+              v-model="editForm.inspectionTime"
+            ></el-date-picker>
           </el-col>
         </el-form-item>
-      <el-form-item label="备注信息" prop="l">
-        <el-input type="textarea"></el-input>
+      </el-col> -->
+        <el-col>
+          <el-form-item label="备注信息" prop="remarks">
+            <el-input v-model="editForm.remarks" type="textarea"></el-input>
           </el-form-item>
+        </el-col>
       </el-form>
+    </el-row>
+
     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button type="primary" @click="ok">确 定</el-button>
     </span>
   </el-dialog>
 </template>
-
 <script>
-  export default {
+import MyFileUpload from "@/components/MyFileUpload";
+import { addPipe, updatePipe } from "@/api/device/pipe.js";
+export default {
   props: {
+    lineData: {
+      type: Object,
+      // default:{}
+    },
+    // 经纬度路径
+    lnglatsArr: {
+      type: Array,
+    },
+    // 管道长度
+    pipeLength: { type: Number },
     title: { type: String },
-      lineOkCallBack:{ type:Function},
-      gaodeMap:{type:Object},
-      target:{type:Object},
-
+    //回调函数
+    lineOkCallBack: { type: Function },
+    gaodeMap: { type: Object },
+    target: { type: Object },
     //message: { type: String },
     //duration: { type: Number, default: 2000 }
   },
-    data () {
+  components: {
+    MyFileUpload,
+  },
+
+  data() {
     return {
       // isShow: false,
-        editForm : {},
-        dialogVisible : false,
+      fileArr: [],
+      editForm: {
+        pipeType: "1",
+        pipePressure: "1",
+        url: "",
+      },
+      dialogVisible: false,
+    };
+  },
+  created() {
+    console.log("lineData", this.lineData, this.lnglatsArr, this.pipeLength);
+    if (this.lineData?.pipeId) {
+      this.editForm = { ...this.lineData };
     }
+    this.editForm.coordinates = this.lnglatsArr;
+    // 如果有图片路径就赋显，如果没有就啥也没有
+    this.fileArr = this.editForm.url != "" ? [{ url: this.editForm.url }] : [];
   },
   methods: {
-      ok(){
-        this.dialogVisible =false;
-        this.lineOkCallBack.call(this.gaodeMap,this.target);
+    ok() {
+      // console.log(this.editForm.pipeId);
+      // if(this.editForm.pipeId){
+      //   console.log("更改")
+      // }else{
+      //   console.log("新增")
+      // }
+      const data = { ...this.editForm };
+      console.log("data", data);
+      console.log(this.editForm.pipeId);
+      this.requeset(this.editForm.pipeId).then((res) => {
+        this.dialogVisible = false;
+        this.lineOkCallBack.call(this.gaodeMap, this.target);
+      });
+      // console.log(this.gaodeMap,this.target)
     },
-      show () {
+    async requeset(id, data) {
+      id ? console.log("修改") : console.log("新增");
+      return id ? updatePipe(data) : addPipe(data);
+    },
+    show() {
       //this.isShow = true;
       this.dialogVisible = true;
       /*setTimeout(() => {
           this.hide()
         }, this.duration)*/
     },
-      hide () {
-        this.isShow = false
-        this.remove()
+    hide() {
+      this.isShow = false;
+      this.remove();
     },
     handleClose(done) {
-        this.$confirm('确认关闭？')
-          .then(_ => {
+      this.$confirm("确认关闭？")
+        .then((_) => {
           done();
         })
-          .catch(_ => {});
-      }
-      
-    }
-  }
+        .catch((_) => {});
+    },
+    // 图片上传成功
+    fileFinshed(e) {
+      this.editForm.url = e.url;
+    },
+    // 图片列表移除
+    listRemove(e) {
+      this.editForm.url = "";
+      this.fileArr = [];
+    },
+  },
+};
 </script>
 
 <style lang="scss">
-  .notice {
+.notice {
   background: white;
   position: fixed;
   top: 102px;
@@ -102,6 +249,9 @@
   width: 80%;
   height: 80%;
   border: solid 1px;
-  }
+}
+.el-input {
+  // width: 200px;
+}
 </style>
 

gassafety-web/src/main.js

@@ -7,6 +7,7 @@ import './assets/styles/element-variables.scss'
 
 import '@/assets/styles/index.scss' // global css
 import '@/assets/styles/gassafety.scss' // gassafety css
+import '@/assets/styles/fonticon.scss' // 字体图标css
 import App from './App'
 import store from './store'
 import router from './router'
@@ -17,6 +18,8 @@ import './permission' // permission control
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";
 import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, download, handleTree } from "@/utils/gassafety";
+
+import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
 import Pagination from "@/components/Pagination";
 // 自定义表格工具扩展
 import RightToolbar from "@/components/RightToolbar"
@@ -47,6 +50,8 @@ Vue.prototype.msgInfo = function (msg) {
 // 全局组件挂载
 Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)
+Vue.component(CollapseTransition.name, CollapseTransition)
+
 
 Vue.use(permission)
 

gassafety-web/src/utils/gaodeMap.js

@@ -284,7 +284,7 @@ class gaodeMap {
     for (let i = 0; i < path.length; i++) {
       let polyline = new AMap.Polyline({
         path: path[i],
-        strokeColor: "green",
+        strokeColor: "#F7FE38",
         strokeWeight: 8,
         strokeOpacity: 0.9,
         zIndex: 50,
@@ -299,15 +299,16 @@ class gaodeMap {
       this.polyLines.push(polyline);
       // 信息窗体
       const dom = createPop(lineInfoWindow, {
-        obj: { a: 123 }
+        obj: { a: 123, editorPage: true }
       });
 
       console.log("dom", dom.$el);
-      var infoWindow = new AMap.InfoWindow({
+
+      let infoWindow = new AMap.InfoWindow({
         isCustom: true,
         content: dom.$el,
         //信息船体偏移量
-        offset: new AMap.Pixel(20, -20),
+        offset: new AMap.Pixel(0, 0),
         anchor: "left-top"
       });
 
@@ -348,13 +349,63 @@ class gaodeMap {
 
       //添加事件
       polyline.on("mouseover", e => {
-        polyline.setOptions({ strokeColor: "red" });
+        // console.log("屏幕宽高",document.body.clientWidth,document.body.clientHeight)
+        // console.log('窗口大小',infoWindow.dom.offsetWidth)
+        // console.log("鼠标的位置",e.originEvent.clientX,e.originEvent.clientY);
+        // 上方导航的高
+        const topBar = 81;
+        // 坐标导航的宽
+        const leftBar = 100;
+        // 屏幕可视区的宽高
+        const {
+          clientWidth: windowClientWidth,
+          clientHeight: windowClientHeight
+        } = document.body;
+        // 弹出的信息窗口的宽高
+        // const { offsetWidth:infoWindowWidth,offsetHeight:infoWindowHeight} =infoWindow.dom;
+        // 406,316
+        const {
+          offsetWidth: infoWindowWidth,
+          offsetHeight: infoWindowHeight
+        } = { offsetWidth: 406, offsetHeight: 316 };
+        // 鼠标碰到线后的位置
+        const { clientX: mouseClientX, clientY: mouseClientY } = e.originEvent;
+        // 鼠标到左边界的距离
+        const offsetLeftX = mouseClientX - 100;
+        // 鼠标到右边界的距离
+        const offsetRightX = windowClientWidth - mouseClientX;
+        const offsetTopY = mouseClientY - 81;
+        const offsetBottomY = windowClientHeight - mouseClientY;
+
+        const offsetY = mouseClientY - 80 - infoWindowHeight;
+        let X = 20,
+          Y = -20;
+        if (offsetLeftX <= infoWindowWidth) {
+          console.log("靠左了");
+          X = 20;
+        } else if (offsetRightX <= infoWindowWidth) {
+          console.log("靠右了");
+          X = -infoWindowWidth - 20;
+        }
+        if (offsetTopY <= infoWindowHeight) {
+          console.log("靠上了");
+          Y = 20;
+        } else if (offsetBottomY <= infoWindowHeight + 81) {
+          console.log("靠下了");
+          Y = -infoWindowHeight - 20;
+        }
+        polyline.setOptions({ strokeColor: "#FF5A67" });
+        infoWindow.setOffset(new AMap.Pixel(X, Y));
         infoWindow.open(map, e.lnglat);
+
+        // const
       });
       polyline.on("mouseout", e => {
-        polyline.setOptions({ strokeColor: "green" });
+        polyline.setOptions({ strokeColor: "#F7FE38" });
         infoWindow.close();
       });
+      // 计算info的位置
+      // function infoPosition() {}
 
       // polyline.on("rightclick", e => {
       //   console.log(this.lineType);
@@ -438,7 +489,9 @@ class gaodeMap {
   newLineAddEvent(obj) {
     obj.polyEditor = new AMap.PolyEditor(map, obj);
     obj.on("click", () => {
+      console.log(this.lineType)
       // 获取当前状态 0普通状态，1是正编辑状态
+
       const { isState, type } = obj.getExtData();
       // 如果不是新线的时候并且没点编辑，点击是无效的
       if (type != "newLine" && this.lineType != 2) return;
@@ -450,10 +503,27 @@ class gaodeMap {
         console.log(opstions);
         obj.setExtData(opstions);
       } else {
-        this.infoWindowPipelineView({ obj, lineType: type });
+        // 经纬度
+        const lnglatsArr = obj.getPath().map(item=>([item.lng,item.lat]));
+        // 管道总长度
+        const pipeLength = obj.getLength();
+        // 传回来的数据 如果是新管道就是空
+        const lineData = type == "newLine" ? {} : obj.getExtData().lineData;
+        this.infoWindowPipelineView({ target:obj, lineType: type,lnglatsArr, pipeLength,lineData });
+      }
+    });
   }
+  // 关闭所有已经上传的线的编辑状态
+  linePolyEditorAllClose() {
+    this.polyLines.forEach(item => {
+      item.polyEditor.close();
+      // let opstions = obj.getExtData();
+      // opstions.isState = 1;
+      item.setExtData({isState:0});
+      item.setOptions({ strokeColor: "#F7FE38" });
     });
   }
+
   // 传进组件的会调 点确认的时候调
   lineOkCallBack(target) {
     target.polyEditor.close();
@@ -469,11 +539,17 @@ class gaodeMap {
   // 上传服务器用的组件
 
   infoWindowPipelineView(options) {
+    // const {} =options;
     const notice = createPop(pipelineView, {
       title: "管道",
-      //线是新线还是老线
-      lineType: options.lineType,
-      target: options.obj,
+      // 数据
+      // lineData: options.lineData,
+      // lnglatsArr:options.lnglatsArr,
+      // pipeLength:options.pipeLength,
+      // //线是新线还是老线
+      // lineType: options.lineType,
+      // target: options.obj,
+      ...options,
       //把当前对象当作that传进去
       gaodeMap: this,
       lineOkCallBack: this.lineOkCallBack

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

@@ -16,25 +16,79 @@
         <input id="close" type="button" class="btn" value="关闭绘图" />
       </div>
     </div>-->
-    <el-button
-      type="primary"
-      style="position: absolute; top: 100px; left: 75%"
+    <div class="btn-wrapper">
+      <!-- <el-button type="primary" class="el-btn" icon="el-icon-search" @click="addDevice"
+        >
+        新增
+      </el-button>
+      <el-button type="primary" class="el-btn" @click="editDevice"
+        >编辑
+      </el-button>
+      <el-button type="primary" class="el-btn" @click="deleteDevice"
+        >删除
+      </el-button> -->
+      <div class="myBtn">
+        <div
+          class="el-btn"
+          :class="{ active: targetNum == 1 }"
           @click="addDevice"
-      >新增</el-button
         >
-    <el-button
-      type="primary"
-      style="position: absolute; top: 100px; left: 82%"
+          <template v-if="iconClass == 'icon-create'">
+            <span class="left">
+              <i class="iconfont" :class="iconClass" />
+            </span>
+            <span class="right">{{ createLabel }}</span>
+          </template>
+          <template v-else>
+            <span class="newLetf">{{ createLabel }}</span>
+            <span class="newRight">
+              <i class="iconfont" :class="iconClass" />
+            </span>
+          </template>
+        </div>
+        <div
+          class="el-btn"
+          :class="{ active: targetNum == 2 }"
           @click="editDevice"
-      >编辑</el-button
         >
-    <el-button
-      type="primary"
-      style="position: absolute; top: 100px; left: 90%"
+          <span class="left">
+            <i class="iconfont icon-compile" />
+          </span>
+          <span class="right">编辑</span>
+        </div>
+        <div
+          class="el-btn"
+          :class="{ active: targetNum == 3 }"
           @click="deleteDevice"
-      >删除</el-button
         >
-    <el-select
+          <span class="left">
+            <i class="iconfont icon-delete" />
+          </span>
+          <span class="right">删除</span>
+        </div>
+      </div>
+
+      <div class="animate">
+        <el-collapse-transition>
+          <div v-show="deviceType">
+            <div v-for="item in changeBtnData" :key="item.value" class="option">
+              <div
+                class="op-btn"
+                :class="{ active: item.value == createValue }"
+                @click="createChange(item)"
+              >
+                <span class="left">
+                  <i class="iconfont" :class="item.icon" />
+                </span>
+                <span class="right">{{ item.label }}</span>
+              </div>
+            </div>
+          </div>
+        </el-collapse-transition>
+      </div>
+    </div>
+
+    <!-- <el-select
       v-model="value"
       placeholder="请选择..."
       @change="selectDeviceType"
@@ -45,11 +99,30 @@
       <el-option label="调压箱" value="2"></el-option>
       <el-option label="阀门井" value="3"></el-option>
       <el-option label="流量计" value="4"></el-option>
-    </el-select>
+      <el-option label="值班人员" value="5"></el-option>
+    </el-select> -->
+
+    <div class="leftBar-wrapper">
+      <div
+        v-for="item in changeBtnData"
+        :key="item.value"
+        class="box"
+        :class="{ active: leftBarNum.indexOf(item.value)>=0 }"
+        @click="leftBarChange(item)"
+      >
+        <div class="left">
+          <i class="iconfont" :class="item.icon"></i>
+        </div>
+        <div class="right">
+          {{ item.label }}
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
 import gaodeMap from "utils/gaodeMap.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 {
@@ -76,10 +149,50 @@ export default {
         inspectionTime: null,
         remarks: null
       },
+      radio1: "",
+      // 1新建，2编辑，3删除,点按钮变色
+      targetNum: 0,
+      // 左边的bar的active判定
+      leftBarNum:[1,2,3,4,5],
+
+      // 新建里的值
+      iconClass: "icon-create",
+      createValue: 0,
+      createLabel: "新增",
+      changeBtnData: [
+        {
+          value: 1,
+          icon: "icon-gd",
+          label: "管道",
+        },
+        {
+          value: 2,
+          icon: "icon-tyx",
+          label: "调压箱",
+        },
+        {
+          value: 3,
+          icon: "icon-fmj",
+          label: "阀门井",
+        },
+        {
+          value: 4,
+          icon: "icon-llj",
+          label: "流量计",
+        },
+        {
+          value: 5,
+          icon: "icon-ylb",
+          label: "压力表",
+        },
+      ],
     };
   },
   mounted() {
     let gaoMap = new gaodeMap("石家庄");
+    pipeAllInfoList().then(res=>{
+      console.log("管道",res);
+    })
     this.gaoMap = gaoMap;
     let path = [
       [
@@ -99,18 +212,69 @@ export default {
     this.getDeviceInfo();
   },
   methods: {
+    // 左边的Bar修改值
+    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)
+      }
+    },
     addDevice() {
-      this.deviceType = true;
+      if (this.iconClass == "icon-create") {
+        this.targetNum = this.targetNum != 1 ? 1 : 0;
+      } else {
+        if (this.deviceType) {
+          this.targetNum = 0;
+          this.createReset();
+        }
+      }
+      if(this.targetNum ==1 && this.createValue ==1){
+        this.gaoMap.lineType=1;
+      }
+      this.deviceType = !this.deviceType;
       this.gaoMap.mapOperateType = "add";
       this.gaoMap.removeMarkerDragg();
     },
+
+    // 选择新建项目哪个
+    createChange(item) {
+      this.deviceType = false;
+      this.iconClass = item.icon;
+      this.createValue = item.value;
+      this.createLabel = item.label;
+
+      if(this.targetNum==1 && this.createValue==1){
+        // 0是初始，1是新建 2是编辑 3删除
+        this.gaoMap.lineType=1;
+        this.gaoMap.createNewLine();
+      }
+    },
+    // 新建按钮还原
+    createReset() {
+      this.iconClass = "icon-create";
+      this.createValue = 0;
+      this.createLabel = "新建";
+    },
     editDevice() {
+      this.targetNum = this.targetNum != 2 ? 2 : 0;
+      this.gaoMap.lineType=this.targetNum;
+      console.log(this.gaoMap.lineType)
+      if(this.targetNum!=2) {
+        this.gaoMap.linePolyEditorAllClose();
+      }
+      this.createReset();
       this.deviceType = false;
-      this.gaoMap.lineType =2;
       this.gaoMap.mapOperateType = "edit";
       this.gaoMap.addMarkerDragg();
     },
     deleteDevice() {
+      this.targetNum = this.targetNum != 3 ? 3 : 0;
+      this.gaoMap.lineType=this.targetNum;
+
+      this.createReset();
       this.deviceType = false;
       this.gaoMap.mapOperateType = "delete";
       this.gaoMap.removeMarkerDragg();
@@ -150,7 +314,139 @@ export default {
   },
 };
 </script>
+
+
 <style lang="scss" scoped>
+// 左边的bar
+.leftBar-wrapper {
+  position: fixed;
+  left: 100px;
+  top: 100px;
+  .box {
+    width: 180px;
+    height: 48px;
+    display: flex;
+    background-color: #ffffff;
+    box-sizing: border-box;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-top: none;
+    cursor: pointer;
+    &:hover {
+      background-color: #053b6a;
+      color: #ffffff;
+    }
+    &:hover .left,
+    &:hover .right {
+      color: #ffffff;
+    }
+    &.active {
+      background-color: #053b6a;
+      .left,
+      .right {
+        color: #ffffff;
+      }
+    }
+    .left {
+      color: #053b6a;
+      line-height: 48px;
+      margin-left: 40px;
+    }
+    .right {
+      color: #1d1d1d;
+      line-height: 48px;
+      margin-left: 20px;
+    }
+  }
+}
+
+.btn-wrapper {
+  position: fixed;
+  right: 32px;
+  top: 100px;
+  .myBtn {
+    display: flex;
+    justify-content: space-between;
+    .el-btn {
+      width: 144px;
+      height: 44px;
+      background-color: #053b6a;
+      margin-right: 22px;
+      border-radius: 4px;
+      text-align: center;
+      line-height: 44px;
+      color: #fff;
+      cursor: pointer;
+      font-size: 18px;
+      display: flex;
+      justify-content: space-between;
+      &.active {
+        background: #31eaea;
+        color: #053b6a !important;
+      }
+      .left {
+        padding-left: 38px;
+        i {
+          font-size: 18px;
+        }
+      }
+      .right {
+        padding-right: 38px;
+      }
+
+      .newLetf {
+        margin-left: 20px;
+      }
+      .newRight {
+        margin-right: 20px;
+        position: relative;
+        i {
+          position: absolute;
+          right: 0px;
+          top: 1px;
+          font-size: 30px;
+        }
+      }
+    }
+  }
+  .animate {
+    .option {
+      .op-btn {
+        width: 144px;
+        height: 38px;
+        border-radius: 0;
+        color: #053b6a;
+        line-height: 38px;
+        background-color: #fff;
+        cursor: pointer;
+        position: relative;
+        border: 1px solid #cccccc;
+        border-top: 0;
+        &.active {
+          background-image: url("../../../assets/images/bac1.png");
+        }
+        .left {
+          position: relative;
+          margin-right: 30px;
+          margin-left: 22px;
+          i {
+            position: absolute;
+            top: -7px;
+            font-size: 20px;
+          }
+        }
+        .right {
+          display: inline-block;
+          font-size: 14px;
+          line-height: 38px;
+        }
+
+        &:hover {
+          background-image: url("../../../assets/images/bac1.png");
+        }
+      }
+    }
+  }
+}
 .input-card {
   display: flex;
   flex-direction: column;

gassafety-web/yarn.lock

@@ -5929,6 +5929,11 @@ mkdirp@^1.0.4:
   resolved "https://registry.nlark.com/mkdirp/download/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha1-PrXtYmInVteaXw4qIh3+utdcL34=
 
+moment@^2.29.1:
+  version "2.29.1"
+  resolved "https://registry.npm.taobao.org/moment/download/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha1-sr52n6MZQL6e7qZGnAdeNQBvo9M=
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"