文件上传调整

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

@@ -9,6 +9,8 @@ export function listPipe(query) {
   })
 }
 
+
+
 // 查询管道信息详细
 export function getPipe(pipeId) {
   return request({
@@ -17,6 +19,17 @@ export function getPipe(pipeId) {
   })
 }
 
+
+// getAllDeviceInfo
+
+export function getAllDevice(data) {
+  return request({
+    url: '/device/pipe/getAllDeviceInfo',
+    method: 'post',
+    data: data
+  })
+}
+
 // 新增管道信息
 export function addPipe(data) {
   return request({

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

+@font-face {
+  font-family: "iconfont"; /* Project id 2692138 */
+  src: url('//at.alicdn.com/t/font_2692138_odrjf05krdd.woff2?t=1626922957592') format('woff2'),
+       url('//at.alicdn.com/t/font_2692138_odrjf05krdd.woff?t=1626922957592') format('woff'),
+       url('//at.alicdn.com/t/font_2692138_odrjf05krdd.ttf?t=1626922957592') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.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

@@ -25,15 +25,16 @@
       <div>电话： <span>13512451234</span></div>
       <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</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 class="warn-content">
-      <div>报警状态 <span>报警</span></div>
-      <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
-    </div>
-
-    <div class="btn">
-      <el-button class="elbtn" type="primary">生成工单</el-button>
-    </div>
   </div>
 </template>
 
@@ -49,7 +50,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 +58,7 @@ export default {
   .top {
     width: 100%;
     height: 51px;
-    background-color: #ff5a67;
+    background-color: #053B6A;
     .text {
       font-weight: 600;
       font-size: 16px;
@@ -135,6 +136,10 @@ 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">
-    <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>
+    :before-close="handleClose"
+  >
+    <el-form ref="editForm" :model="editForm" label-width="120px" size="mini">
+      <el-form-item label="管道id" prop="pipeId">
+        <el-input
+          disabled
+          class="el-input"
+          v-model="editForm.pipeId"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item label="企业id" prop="enterpriseId">
+        <el-input disabled v-model="editForm.enterpriseId"></el-input>
+      </el-form-item>
+
+      <el-form-item label="管道名称" prop="pipeName">
+        <el-input v-model="editForm.pipeName"></el-input>
+      </el-form-item>
+      <el-form-item label="管道编号" prop="pipeCode">
+        <el-input v-model="editForm.pipeCode"></el-input>
       </el-form-item>
-      <el-form-item label="名称" prop="b">
-        <el-input ></el-input>
+
+      <el-form-item label="管道所在地址" prop="iconUrl">
+        <el-input v-model="editForm.iconUrl"></el-input>
+      </el-form-item>
+      <el-form-item label="坐标" prop="coordinates">
+        <el-input disabled v-model="editForm.coordinates"></el-input>
+      </el-form-item>
+      <el-form-item label="管道长度" prop="pipeLength">
+        <el-input disabled v-model="editForm.pipeLength"></el-input>
       </el-form-item>
-      <el-form-item label="地址" prop="c">
-        <el-input></el-input>
+      <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="d">
-        <el-input></el-input>
+
+      <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="e">
-        <el-input></el-input>
+      <el-form-item label="上传图片" prop="">
+        <MyFileUpload listType="picture-card" @resFun="fileFinshed" @remove="listRemove" :fileArr="fileArr" />
       </el-form-item>
-      <el-form-item label="型号" prop="f">
-        <el-input></el-input>
+
+      <el-form-item label="设备图片路径" prop="url">
+        <el-input disabled v-model="editForm.url"></el-input>
       </el-form-item>
-      <el-form-item label="安装日期" prop="g">
+      <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="date"
+            placeholder="选择日期"
+            style="width: 100%"
+            v-model="editForm.installationTime"
+          ></el-date-picker>
         </el-col>
       </el-form-item>
-      <el-form-item label="最后巡检日期" prop="k">
+      <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-form-item label="备注信息" prop="textarea">
+        <el-input v-model="editForm.remarks" type="textarea"></el-input>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
@@ -44,64 +89,87 @@
     </span>
   </el-dialog>
 </template>
-
 <script>
-  export default {
-    props: {
-      title: { type: String },
-      lineOkCallBack:{ type:Function},
-      gaodeMap:{type:Object},
-      target:{type:Object},
-
-      //message: { type: String },
-      //duration: { type: Number, default: 2000 }
-    },
-    data () {
-      return {
-       // isShow: false,
-        editForm : {},
-        dialogVisible : false,
-      }
-    },
-    methods: {
-      ok(){
-        this.dialogVisible =false;
-        this.lineOkCallBack.call(this.gaodeMap,this.target);
+import MyFileUpload from "@/components/MyFileUpload";
+export default {
+  props: {
+    title: { type: String },
+    lineOkCallBack: { type: Function },
+    gaodeMap: { type: Object },
+    target: { type: Object },
+    //message: { type: String },
+    //duration: { type: Number, default: 2000 }
+  },
+  components: {
+    MyFileUpload,
+  },
+  
+  data() {
+    return {
+      // isShow: false,
+      fileArr:[],
+      editForm: {
+        pipeType: "1",
+        pipePressure: "1",
+        url:"",
       },
-      show () {
-        //this.isShow = true;
-        this.dialogVisible = true;
-        /*setTimeout(() => {
+      dialogVisible: false,
+    };
+  },
+  created(){
+    this.fileArr=this.editForm.url !="" ?[{url:this.editForm.url}] : [];
+  },
+  methods: {
+    ok() {
+      console.log(this.editForm);
+      this.dialogVisible = false;
+      this.lineOkCallBack.call(this.gaodeMap, this.target);
+    },
+    show() {
+      //this.isShow = true;
+      this.dialogVisible = true;
+      /*setTimeout(() => {
           this.hide()
         }, this.duration)*/
-      },
-      hide () {
-        this.isShow = false
-        this.remove()
-      },
-      handleClose(done) {
-        this.$confirm('确认关闭？')
-          .then(_ => {
-            done();
-          })
-          .catch(_ => {});
-      }
-      
+    },
+    hide() {
+      this.isShow = false;
+      this.remove();
+    },
+    handleClose(done) {
+      this.$confirm("确认关闭？")
+        .then((_) => {
+          done();
+        })
+        .catch((_) => {});
+    },
+    // 图片上传成功
+    fileFinshed(e){
+      this.editForm.url = e.url;
+    },
+    // 图片列表移除
+    listRemove(e){
+      this.editForm.url="";
+      this.fileArr=[];
     }
-  }
+  },
+};
 </script>
 
 <style lang="scss">
-  .notice {
-    background: white;
-    position: fixed;
-    top: 102px;
-    right: 0;
-    left: 0;
-    margin: auto;
-    width: 80%;
-    height: 80%;
-    border: solid 1px;
-  }
+.notice {
+  background: white;
+  position: fixed;
+  top: 102px;
+  right: 0;
+  left: 0;
+  margin: auto;
+  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

@@ -219,7 +219,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,
@@ -234,15 +234,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"
       });
 
@@ -283,13 +284,61 @@ 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);

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%"
-      @click="addDevice"
-      >新增</el-button
-    >
-    <el-button
-      type="primary"
-      style="position: absolute; top: 100px; left: 82%"
-      @click="editDevice"
-      >编辑</el-button
-    >
-    <el-button
-      type="primary"
-      style="position: absolute; top: 100px; left: 90%"
-      @click="deleteDevice"
-      >删除</el-button
-    >
-    <el-select
+    <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"
+        >
+          <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"
+        >
+          <span class="left">
+            <i class="iconfont icon-compile" />
+          </span>
+          <span class="right">编辑</span>
+        </div>
+        <div
+          class="el-btn"
+          :class="{ active: targetNum == 3 }"
+          @click="deleteDevice"
+        >
+          <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"
@@ -46,7 +100,24 @@
       <el-option label="阀门井" value="3"></el-option>
       <el-option label="流量计" value="4"></el-option>
       <el-option label="值班人员" value="5"></el-option>
-    </el-select>
+    </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>
@@ -59,6 +130,43 @@ export default {
       deviceType: false,
       value: "",
       operateType: "",
+      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() {
@@ -90,18 +198,54 @@ export default {
     gaoMap.addMouseTool();
   },
   methods: {
+    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();
+        }
+      }
+      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;
+    },
+    // 新建按钮还原
+    createReset() {
+      this.iconClass = "icon-create";
+      this.createValue = 0;
+      this.createLabel = "新建";
+    },
     editDevice() {
+      this.targetNum = this.targetNum != 2 ? 2 : 0;
+      this.createReset();
       this.deviceType = false;
-      this.gaoMap.lineType =2;
+      this.gaoMap.lineType = 2;
       this.gaoMap.mapOperateType = "edit";
       this.gaoMap.addMarkerDragg();
     },
     deleteDevice() {
+      this.targetNum = this.targetNum != 3 ? 3 : 0;
+      this.createReset();
       this.deviceType = false;
       this.gaoMap.mapOperateType = "delete";
       this.gaoMap.removeMarkerDragg();
@@ -121,7 +265,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;