From 9c0d409744cac5386f4d8083b46c81e1263776fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AA=86=E4=B9=90?= <342503599@qq.com>
Date: Fri, 18 Nov 2022 09:16:16 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=BA=E5=91=98=E5=AE=9A=E4=BD=8D=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=EF=BC=88=E7=82=B9=E4=BD=8D=E9=85=8D=E7=BD=AE=EF=BC=89?=
 =?UTF-8?q?=E5=9F=BA=E7=AB=99=E3=80=81=E6=A5=BC=E6=A0=8B=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/js/api/personnelPositioning.js     |   18 +-
 .../ConfigChildrenIndex/configuration.vue     |  850 ++++++++++++-
 .../ConfigChildrenIndex/positoningIndex.vue   | 1062 ++++++++++++++---
 3 files changed, 1714 insertions(+), 216 deletions(-)

diff --git a/src/assets/js/api/personnelPositioning.js b/src/assets/js/api/personnelPositioning.js
index 1601ca13..8ea16a95 100644
--- a/src/assets/js/api/personnelPositioning.js
+++ b/src/assets/js/api/personnelPositioning.js
@@ -3,7 +3,7 @@
  */
  import {post,get} from '../http'
 
-//点位配置-基站页面接口
+//点位配置-基站控制器接口
  export const addPersonnelLocationnApi = data => post('xmgl/personnelLocationBaseStation/addPersonnelLocationBaseStation', data);//新增人员定位-基站
  export const deletePersonnelLocationDeleteByIdApi = data => get('xmgl/personnelLocationBaseStation/deleteById', data);//根据id删除人员定位-基站
  export const getPersonnelLocationBaseStationGetByIdApi = data => get('xmgl/personnelLocationBaseStation/getById', data);//根据id查询人员定位-基站
@@ -11,7 +11,7 @@
  export const getPersonnelLocationBaseStationListApi = data => get('xmgl/personnelLocationBaseStation/list', data);//所有人员定位-基站
  export const getPersonnelLocationBaseStationApi = data => get('xmgl/personnelLocationBaseStation/selectPage', data);//分页查询人员定位-基站
 
- //点位配置-楼栋页面接口
+ //点位配置-楼栋控制器接口
  export const addBeaconDataApi = data => post('xmgl/personnelLocationBuilding/addBeaconData', data);//新增楼栋信标数据
  export const addPersonnelLocationBuildingApi = data => post('xmgl/personnelLocationBuilding/addPersonnelLocationBuilding', data);//新增人员定位-楼栋
  export const deletePersonnelLocationApi = data => get('xmgl/personnelLocationBuilding/deleteById', data);//根据id删除人员定位-楼栋
@@ -21,3 +21,17 @@
  export const getLocationBuildingSelectPageApi = data => get('xmgl/personnelLocationBuilding/selectPage', data);//分页查询人员定位-楼栋
  export const editPersonnelLocationBuildingUpdateApi = data => post('xmgl/personnelLocationBuilding/updatePersonnelLocationBuilding', data);//修改人员定位-楼栋
 
+
+ //点位配置-点位图控制器接口
+ export const getPlaneFigureApi = data => get('/xmgl/personnelLocationPlaneFigure/selectPage', data);//分页查询人员定位-点位图
+ export const addPlaneFigureApi = data => post('/xmgl/personnelLocationPlaneFigure/addPersonnelLocationPlaneFigure', data);//新增人员定位-点位图
+ export const editPlaneFigureApi = data => post('/xmgl/personnelLocationPlaneFigure/updatePersonnelLocationPlaneFigure', data);//修改人员定位-点位图
+ export const deletePlaneFigureApi = data => get('/xmgl/personnelLocationPlaneFigure/deleteById', data);//分页查询人员定位-点位图
+ export const getDetailsByIdApi = data => get('/xmgl/personnelLocationPlaneFigure/getDetailsById', data);//根据id查询人员定位-点位图  
+
+
+ //点位配置 点位图关联楼栋信息控制器
+ export const addPersonnelLocationPlaneFigureBuildingApi = data => post('/xmgl/personnelLocationPlaneFigureBuilding/addPersonnelLocationPlaneFigureBuilding', data);//新增人员定位-点位图关联楼栋信息
+ export const deleteByIdApi = data => get('/xmgl/personnelLocationPlaneFigureBuilding/deleteById', data);//根据id删除人员定位-点位图关联楼栋信息
+ export const updatePersonnelLocationPlaneFigureBuildingApi = data => post('/xmgl/personnelLocationPlaneFigureBuilding/updatePersonnelLocationPlaneFigureBuilding', data);//新增人员定位-点位图
+
diff --git a/src/views/projectFront/personnelPosition/ConfigChildrenIndex/configuration.vue b/src/views/projectFront/personnelPosition/ConfigChildrenIndex/configuration.vue
index 6d362182..0eb4c75f 100644
--- a/src/views/projectFront/personnelPosition/ConfigChildrenIndex/configuration.vue
+++ b/src/views/projectFront/personnelPosition/ConfigChildrenIndex/configuration.vue
@@ -3,29 +3,44 @@
     <div class="left2 whiteBlock">
       <div class="left_list">
         <div>
-          <!-- 基站地图列表 -->
+          <!-- 左侧楼栋平面图列表 -->
           <div class="dialog-content map-box">
             <div class="map-left">
-              <vue-scroll >
-            <div class="add-btn" >
-                <i class="el-icon-circle-plus-outline"></i>
-                <!-- 添加平面图 -->
-                <div class="addText">添加平面图</div>
-              </div>
+              <vue-scroll>
                 <ul>
-                  <li v-for="(item, index) in 4" :key="index">
-                    <img src="@/assets/images/login/p5.jpg" />
+                  <li
+                    v-for="(item, index) in deepImgList"
+                    :key="index"
+                    :class="{ 'img-active': activeImgIndex == index }"
+                  >
+                    <img :src="item.imageUrl" @click="checkImg(item, index)" />
                     <div class="actions-box">
-                      <span>地图</span>
+                      <span>{{item.planeFigureName}}</span>
                       <!-- 编辑 -->
-                      <el-button type="text" style="color: #84b2fa;" icon="el-icon-edit"></el-button>
+                      <el-button
+                        type="text"
+                        style="color: #84b2fa"
+                        icon="el-icon-edit"
+                        @click="editDeepimg(item)"
+                      ></el-button>
                       <!-- 删除 -->
-                      <el-button type="text" icon="el-icon-delete" style="color: #F56C6C"></el-button>
+                      <el-button
+                        type="text"
+                        icon="el-icon-delete"
+                        style="color: #f56c6c"
+                        @click="deleteDeepImg(item)"
+                      ></el-button>
+                      <!-- {{$t('message.deepFoundConfig.remove')}} -->
                     </div>
                   </li>
                 </ul>
               </vue-scroll>
             </div>
+            <div class="addMap">
+              <el-button type="primary" @click="openAddImgDialog"
+                >添加平面图</el-button
+              >
+            </div>
           </div>
         </div>
       </div>
@@ -45,7 +60,7 @@
             <i class="el-icon-arrow-down" style="font-size:17px"></i>
           </div> -->
           <div class="list" v-for="item in bulidList" :key="item.id">
-            <div slot="reference">{{ item.name }}</div>
+            <div slot="reference">{{ item.buildingName }}</div>
             <!-- <div style="margin:4px 0">1</div> -->
             <el-popover placement="bottom" min-width="80" trigger="hover">
               <div style=" margin: 0; text-align:center;">
@@ -70,30 +85,68 @@
         <!-- 右边展示 -->
         <div class="map-right">
           <div class="action-box" v-if="activeImgUrl">
-            <div v-show="!isEditPoint" class="btn-item">
+            <div v-show="!isEditPoint" class="btn-item" @click="editPoint">
               <img src="@/assets/images/deepFoundationPitManage/address.png" />
               <!-- 布点 -->
               布点
             </div>
-            <div v-show="isEditPoint" class="btn-item">
+            <div v-show="isEditPoint" class="btn-item" @click="savePoint">
               <img src="@/assets/images/deepFoundationPitManage/save.png" />
               <!-- 保存 -->
               保存
             </div>
-            <div class="btn-item">
+            <div class="btn-item" @click="changeImgSize(1)">
               <i class="el-icon-zoom-in"></i>
               <!-- 放大 -->
               放大
             </div>
-            <div class="btn-item">
+            <div class="btn-item" @click="changeImgSize(2)">
               <i class="el-icon-zoom-out"></i>
               <!-- 缩小 -->
               缩小
             </div>
           </div>
           <div ref="mapbox">
-            <vue-scroll style="height:780px;"> </vue-scroll>
-          </div>
+              <vue-scroll style="height:780px;">
+                <div
+                  class="img-box"
+                  :style="{'width': imgWidth + 'px', height: imgHeight + 'px', transform: 'scale(' + imgZoom +')'}"
+                >
+                  <img
+                    ref="map"
+                    v-if="activeImgUrl"
+                    style="border: 1px solid #eee;"
+                    :style="{'width': imgWidth + 'px', height: imgHeight + 'px'}"
+                    :src="activeImgUrl"
+                  />
+                  <ul class="point-list" v-if="activeImgUrl">
+                    <li
+                      v-for="(item,index) in pointList"
+                      :key="index"
+                      :ref="'point'+index"
+                      :style="{'top': item.mapY + 'px', 'left': item.mapX + 'px', 'display': item.status, 'transform': 'scale(' + 1/imgZoom +')'+ ' ' + item.transform}"
+                    >
+                     
+                      <div
+                        class="point-dialog point-title2"
+                        :class="{'right_title': item.mapY < 47 || item.mapX < 22}"
+                        :style="{'display': item.showDetail ? 'none':'block'}"
+                        @click="item.showDetail = true"
+                      >
+                        <span>{{item.buildingName}}</span>
+                      </div>
+                      <img
+                      @mousedown.prevent="move(index,$event)"
+                      @mouseup="up(index,$event)"
+                        style="width: 70px; height:70px;"
+                        src="@/assets/images/deepFoundationPitManage/ljz.png"
+                      />
+                    </li>
+                  </ul>
+                </div>
+              
+              </vue-scroll>
+            </div>
         </div>
       </div>
     </div>
@@ -116,12 +169,85 @@
           <el-button type="primary" icon="el-icon-circle-check" size="medium" @click="saveBatchMove">确定 </el-button>
         </div>
       </div>
+    </el-dialog>
+
+        <!-- 添加平面图 -->
+        <el-dialog
+      width="35%"
+      :title="title"
+      class="dialog-center"
+      :visible.sync="showAddImg"
+      @close="closeAddImg"
+      :modal-append-to-body="false"
+    >
+      <div class="dialog-content" style="height: 368px">
+        <el-form
+          size="medium"
+          class="formBox"
+          style="margin-bottom: 68px"
+          :model="testPointImgForm"
+          ref="testPointImgForm"
+          label-width="120px"
+          :rules="$t('message.deepFoundConfig.rules3')"
+        >
+          <!-- 平面图名称 -->
+          <el-form-item label="平面图名称" prop="planeFigureName">
+            <el-input
+              v-model="testPointImgForm.planeFigureName"
+              placeholder="请输入"
+            ></el-input>
+          </el-form-item>
+          <!-- 示意图 -->
+          <el-form-item label="示意图" prop="fileList">
+            <div
+              class="img_box"
+              v-for="(item, index) in testPointImgForm.fileList"
+              :key="index"
+            >
+              <el-image
+                :src="item.url"
+                :preview-src-list="[item.url]"
+                style="width: 148px; height: 148px; margin-right: 20px"
+              ></el-image>
+              <i
+                class="el-icon-error"
+                @click="testPointImgForm.fileList.splice(index, 1)"
+              ></i>
+            </div>
+            <el-upload
+              :action="$store.state.UPLOADURL"
+              name="files"
+              style="display: inline"
+              list-type="picture-card"
+              :show-file-list="false"
+              :on-preview="handlePictureCardPreview"
+              :on-remove="(file, fileList) => handleRemove(file, fileList, 4)"
+              :on-success="(res, file) => handleSuccess(res, file, 4)"
+              :file-list="testPointImgForm.fileList"
+            >
+              <i class="el-icon-plus"></i>
+            </el-upload>
+          </el-form-item>
+        </el-form>
+        <div class="btn-box">
+          <el-button icon="el-icon-circle-close" @click="closeAddImg"
+            >取消</el-button
+          >
+          <el-button
+            type="primary"
+            icon="el-icon-circle-check"
+            @click="submitImgConfig"
+            >确定</el-button
+          >
+        </div>
+      </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
 import {
+  //楼栋接口
   addBeaconDataApi,
   addPersonnelLocationBuildingApi,
   deletePersonnelLocationApi,
@@ -129,7 +255,16 @@ import {
   getLocationBuildingGetByIdApi,
   getLocationBuildingApi,
   getLocationBuildingSelectPageApi,
-  editPersonnelLocationBuildingUpdateApi
+  editPersonnelLocationBuildingUpdateApi,
+   //平面图接口
+  getPlaneFigureApi,
+  addPlaneFigureApi,
+  editPlaneFigureApi,
+  deletePlaneFigureApi,
+  getDetailsByIdApi,
+  addPersonnelLocationPlaneFigureBuildingApi,
+  deleteByIdApi,
+  updatePersonnelLocationPlaneFigureBuildingApi,
 } from '@/assets/js/api/personnelPositioning.js'
 export default {
   data() {
@@ -152,7 +287,10 @@ export default {
       bulidList: [], //楼栋列表
       bulidForm: {
         name: '', //楼栋名称
-        projectSn: ''
+        projectSn: '',
+        figureId:'',//点位id
+        planeFigureId:'',//平面图id
+        hotspot:[],//存储坐标字段
       },
       buildFormRules: {
         name: [
@@ -162,22 +300,48 @@ export default {
             trigger: 'change'
           }
         ]
-      }
+      },
+      deepImgList: [], //平面图列表
+      activeImgIndex: 0,
+      dialogType: 1, // 1添加 2 编辑
+      showAddImg: false, //添加平面图弹框
+      testPointImgForm: {
+        planeFigureName: "",
+        fileList: [],
+        id: "",
+        removeData: "",
+        removeType: "",
+      },
+      pointList: [],
+      dataType: "",
+      mapDate: {
+        width: "",
+        height: ""
+      },
+      figureId:'',//平面图id
+      startX: "",
+      startY: "",
+      ratio:"",
+      pointIndex:"",
+      figureId:'',
+      // planeFigureId:'',//平面图id
     }
   },
   created() {
     this.projectSn = this.$store.state.projectSn
-    this.getPersonnelLocationBuild()
-    this.imgGet()
+    // this.getPersonnelLocationBuild()
+    this.getPlaneFigureList();
+
   },
   mounted() {},
   computed: {},
   methods: {
+
+    //--------楼栋
     //获取所有楼栋信息
     getPersonnelLocationBuild() {
       getLocationBuildingApi({ projectSn: this.$store.state.projectSn }).then(res => {
         console.log('楼栋信息列表', res)
-        this.bulidList = res.result
       })
     },
     //新增楼栋按钮
@@ -186,7 +350,11 @@ export default {
       this.addBuildDialog = true
       this.bulidForm = {
         name: '', //楼栋名称
-        projectSn: ''
+        projectSn: '',
+        figureId:'',
+        figureExist:true,
+        figureId:'',
+        hotspot:'',
       }
       setTimeout(() => {
         this.$refs.bulidForm.clearValidate()
@@ -197,10 +365,14 @@ export default {
     editBuild(item) {
       this.teamDialogTitle = '编辑楼栋'
       this.addBuildDialog = true
-      this.bulidForm = JSON.parse(JSON.stringify(item))
+      item.name = item.buildingName
+      this.bulidForm = JSON.parse(JSON.stringify(item));
+      console.log("编辑时数据 ", this.bulidForm);
     },
     //新增/编辑楼栋确认提交
     saveBatchMove() {
+      this.bulidForm.planeFigureId=this.planeFigureId
+    this.bulidForm.figureId=this.figureId
       this.$refs.bulidForm.validate(valid => {
         if (valid) {
           this.bulidForm.projectSn = this.projectSn
@@ -208,14 +380,21 @@ export default {
             addPersonnelLocationBuildingApi(this.bulidForm).then(res => {
               console.log('新增楼栋', res)
               this.$message.success(res.message)
-              this.addBuildDialog = false
-              this.getPersonnelLocationBuild()
+              this.addBuildDialog = false   
+              this.getPlaneFigureList()
+              // this.getPersonnelLocationBuild()
+
             })
           } else if (this.teamDialogTitle == '编辑楼栋') {
+            this.bulidForm.figureExist = true;
+            this.bulidForm.id = this.bulidForm.buildingId;
+
             editPersonnelLocationBuildingUpdateApi(this.bulidForm).then(res => {
               this.$message.success(res.message)
               this.addBuildDialog = false
-              this.getPersonnelLocationBuild()
+              this.getPlaneFigureList()
+              // this.getPersonnelLocationBuild()
+
             })
           }
         }
@@ -230,8 +409,8 @@ export default {
         type: 'warning'
       })
         .then(() => {
-          deletePersonnelLocationApi({ id: item.id }).then(res => {
-            this.getPersonnelLocationBuild()
+          deleteByIdApi({ id: item.id }).then(res => {
+            this.getPlaneFigureList()
             this.$message({
               type: 'success',
               message: '删除成功!'
@@ -246,14 +425,393 @@ export default {
         })
     },
 
-    imgGet() {
-      this.activeImgUrl = '@/assets/images/login/p5.jpg'
-    }
+     //--------平面图
+    //获取平面图列表
+    getPlaneFigureList() {
+      getPlaneFigureApi({ projectSn: this.$store.state.projectSn }).then(
+        (res) => {
+          console.log("平面图列表", res);
+          if ((res.code = 200)) {
+            this.deepImgList = res.result.records;
+            if (this.deepImgList.length > 0) {
+              this.checkImg(this.deepImgList[0], 0);
+            }
+          }
+        }
+      );
+    },
+    // 切换平面图
+    checkImg(val, index) {
+      this.figureId = val.id;
+      this.planeFigureId = val.id;
+
+      console.log(val);
+      this.imgZoom = 1;
+      this.activeImgIndex = index;
+      this.activeImgUrl = val.imageUrl;
+      this.isEditPoint = false;
+      this.selectDeepExcavationPlaneFigureCoordinate(this.figureId);
+      this.$nextTick(() => {
+        this.getNaturalSize();
+      });
+    },
+    // 获取点位位置信息
+    selectDeepExcavationPlaneFigureCoordinate(val) {
+      getDetailsByIdApi({
+        id: val,
+        type: 1,
+      }).then((res) => {
+        console.log("点点点", res);
+        if (res.code == 200) {
+          // res.result.forEach(item => {
+          //   item.status = "block";
+          //   (item.transform = ""), (item.showDetail = false);
+          //   let arr = [];
+          //   // let obj = JSON.parse(item.dataField);
+          //   // let obj = item.sensorlist
+          //   // for (let key in obj) {
+          //   //   arr.push({
+          //   //     key: key,
+          //   //     keyName: obj[key]
+          //   //   });
+          //   // }
+          //   item.detailList = arr;
+          // });
+          this.relationIdList = res.result.figureBuildingList;
+          this.bulidList = res.result.figureBuildingList;
+          this.pointList = res.result.figureBuildingList;
+          this.pointList.forEach((res) => {
+            //[res.mapX,res.mapY]
+            if(res.hotspot != null) {
+              let hstspot = JSON.parse(res.hotspot)
+           res.mapX = hstspot[0]
+           res.mapY = hstspot[1]
+            }
+
+        }
+);
+          console.log("this.baseList", this.pointList);
+          console.log(" this.bulidList", this.bulidList);
+        }
+      });
+    },
+        // 获取平面图片大小
+    getNaturalSize(callback) {
+      let Domlement = this.$refs["map"];
+      console.dir(Domlement);
+      var natureSize = {};
+      if (window.naturalWidth && window.naturalHeight) {
+        natureSize.width = Domlement.naturalWidth;
+        natureSize.height = Domlement.naturalHeight;
+        // let heightRatio = natureSize.height / 569
+        // this.mapDate.width = natureSize.width*heightRatio
+      } else {
+        console.log(213);
+        let _this = this;
+        var img = new Image();
+        img.src = Domlement.src;
+        img.onload = function () {
+          natureSize.width = img.width;
+          natureSize.height = img.height;
+          console.log("------", natureSize);
+          _this.imgWidth = natureSize.width;
+          _this.imgHeight = natureSize.height;
+          _this.imgStartWidth = img.width;
+          _this.imgStartHeight = img.width;
+          console.log(
+            _this.$refs["mapbox"].clientWidth,
+            _this.$refs["mapbox"].clientHeight
+          );
+
+          // let heightRatio = 780 / natureSize.height
+          // let widthRatio = _this.$refs['mapbox'].clientWidth / natureSize.width
+          // if(heightRatio < widthRatio){
+          //     // _this.imgWidth = natureSize.width*heightRatio
+          //     // _this.imgHeight = natureSize.height*heightRatio
+          //     _this.imgZoom = heightRatio
+          // } else {
+          //     // _this.imgWidth = natureSize.width*widthRatio
+          //     // _this.imgHeight = natureSize.height*widthRatio
+          //     _this.imgZoom = widthRatio
+          // }
+          // _this.mapDate.width = natureSize.width*heightRatio
+          if (callback) {
+            return callback(natureSize);
+          }
+        };
+      }
+      console.log(natureSize);
+      // return natureSize;
+    },
+    // 添加平面图
+    openAddImgDialog() {
+      this.title = "添加平面图";
+      this.dialogType = 1;
+      this.showAddImg = true;
+    },
+     // 编辑布置图
+     editDeepimg(val) {
+      console.log("编辑", val);
+      this.title = "编辑平面图";
+      this.dialogType = 2;
+      this.showAddImg = true;
+      this.id = val.id;
+      this.testPointImgForm.planeFigureName = val.planeFigureName;
+      this.testPointImgForm.fileList = [{ url: val.imageUrl }];
+    },
+    
+    //新增/编辑平面图保存
+    submitImgConfig() {
+      this.$refs.testPointImgForm.validate((valid) => {
+        if (valid) {
+          if (this.dialogType == 1) {
+            addPlaneFigureApi({
+              planeFigureName: this.testPointImgForm.planeFigureName,
+              imageUrl: this.testPointImgForm.fileList[0].url,
+              projectSn: this.projectSn,
+            }).then(res=>{
+              this.$message.success(res.message);
+            this.showAddImg = false;
+            this.getPlaneFigureList();
+            });
+           
+          }else if(this.dialogType == 2){
+            editPlaneFigureApi({id:this.id,
+              planeFigureName: this.testPointImgForm.planeFigureName,
+              imageUrl: this.testPointImgForm.fileList[0].url,
+              projectSn: this.projectSn,
+              dataType: 0,
+            }).then(res=>{
+               this.$message.success("编辑成功");
+               this.showAddImg = false;
+               this.getPlaneFigureList();
+            })
+          }
+        }
+      });
+    },
+      // 删除布置图
+      deleteDeepImg(item) {
+        this.$confirm("此操作将永久删除, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          deletePlaneFigureApi({ id: item.id }).then((res) => {
+            this.getPlaneFigureList();
+            this.$message({
+              type: "success",
+              message: "删除成功!",
+            });
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    //上传图片
+    handleSuccess(res, file, type) {
+      if(res.status == "SUCCESS"){
+    
+        this.testPointImgForm.fileList = [
+        {
+          name: file.name,
+          url: this.$store.state.FILEURL + file.response.data[0].imageUrl,
+        },
+      ];
+      this.$refs["testPointImgForm"].clearValidate();
+      console.log(this.testPointImgForm.fileList);
+      }
+      
+    },
+    // 删除文件
+    handleRemove() {
+      this.testPointImgForm.fileList = fileList;
+    },
+    // 查看大图
+    handlePictureCardPreview(file, fileList) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible2 = true;
+    },
+    // 关闭添加图片弹窗
+    closeAddImg() {
+      this.showAddImg = false;
+      this.testPointImgForm = {
+        planeFigureName: "",
+        fileList: [],
+      };
+      this.$refs.testPointImgForm.resetFields();
+    },
+     //放大缩小
+     changeImgSize(val) {
+      if (val == 1) {
+        this.imgZoom = this.imgZoom + 0.5;
+        console.log(this.imgZoom);
+        // this.pointList.forEach(item=>{
+        //   item.x = Math.ceil(item.x)*1.5
+        //   item.y = Math.ceil(item.y)*1.6
+        // })
+      } else if (val == 2) {
+        this.imgZoom =
+          this.imgZoom - 0.5 <= 0 ? this.imgZoom : this.imgZoom - 0.5;
+        console.log(this.imgZoom);
+        // if((this.imgZoom - 0.5) > 0){
+        //   this.pointList.forEach(item=>{
+        //     item.x = Math.ceil(item.x)/1.5
+        //     item.y = Math.ceil(item.y)/1.5
+        //   })
+        // }
+      }
+    },
+    //编辑移动布点
+    editPoint() {
+      this.isEditPoint = true;
+      // 成功 请开始移动点位！
+      this.$notify({
+        title: this.$t("message.deepFoundConfig.success"),
+        message: this.$t("message.deepFoundConfig.notifyMsg"),
+        type: "success",
+      });
+    },
+    //布点保存
+    savePoint() {
+      console.log("点击进来了吗，",this.pointList);
+      this.pointList.forEach((res) => {
+    
+    res.planeFigureId = this.planeFigureId
+   res.hotspot = JSON.stringify([res.mapX,res.mapY])
+  }
+);
+        editPlaneFigureApi({
+              id: this.figureId,
+              // planeFigureId:this.planeFigureId,
+              projectSn: this.projectSn,
+              dataType: 1,
+              figureBuildingList:this.pointList,
+            }).then((res) => {
+              this.$message.success("保存成功");
+              this.getPlaneFigureList();
+            });
+           this.isEditPoint = false;
+    },
+         // 添加鼠标监听事件
+         move(val, e) {
+      console.log(val, e.pageX, e.pageY);
+      this.ratio = window.localStorage.getItem("zoom");
+      this.startX = e.pageX;
+      this.startY = e.pageY;
+      this.pointIndex = val;
+      // console.dir(this.$refs['point'+val])
+      // this.$refs['point'+val].style.opacity = '0'
+      this.bulidForm.hotspot=[e.pageX,e.pageY]
+      let _this = this;
+      // console.log('位置吗',this.pointList[val]);
+   
+      console.log('位置热区',this.hotspot);
+      if (this.isEditPoint) {
+        this.pointList[val].status = "none";
+        // this.$refs['point'+ val].style.display = 'none'
+        document.body.addEventListener("mousemove", this.movePoint, false);
+        document.body.addEventListener("mouseup", this.removeUp, false);
+      }
+        
+      // document.body.addEventListener('mousemove',(e)=>{
+      //   _this.movePoint(e,val,ratio,a,b)
+      // },false)
+      // document.body.addEventListener('mouseup',()=>{
+      //     // _this.movePoint(e,val,ratio,a,b,')
+      //     window.removeEventListener('mousemove',(e)=>{
+      //       // console.log(1232)
+      //       _this.movePoint(e,val,ratio,a,b)
+      //     },false)
+      // })
+    },
+        // 清除鼠标监听时间
+    removeUp(e) {
+      let top = (e.pageY - this.startY) / this.imgZoom,
+        left = (e.pageX - this.startX) / this.imgZoom;
+      console.log(top, left);
+      this.pointStatus = "none";
+      let x = Math.ceil(
+          Number(
+            this.pointList[this.pointIndex].mapX
+              ? this.pointList[this.pointIndex].mapX
+              : 0
+          ) +
+            left / this.ratio
+        ),
+        y = Math.ceil(
+          Number(
+            this.pointList[this.pointIndex].mapY
+              ? this.pointList[this.pointIndex].mapY
+              : 0
+          ) +
+            top / this.ratio
+        );
+      console.log(x, y, this.imgWidth, this.imgHeight);
+      if (y <= this.imgHeight && y >= 0) {
+        this.pointList[this.pointIndex].mapY = y;
+      }
+      if (x <= this.imgWidth && x >= 0) {
+        this.pointList[this.pointIndex].mapX = x;
+      }
+      this.pointList[this.pointIndex].status = "block";
+      console.log(this.pointList);
+      this.$forceUpdate();
+      // this.pointList[this.pointIndex].transform = 'translate(-150%, -150%)'
+      // this.$refs['point'+this.pointIndex].style.transform = 'translate(-150%, -150%)'
+      // this.$refs['point'+ this.pointIndex].style.display = 'block'
+      document.body.removeEventListener("mousemove", this.movePoint, false);
+      document.body.removeEventListener("mouseup", this.removeUp, false);
+    },
+    // 移动鼠标
+    movePoint(target) {
+      // console.log(target)
+      // console.log(window.localStorage.getItem('zoom'))
+
+      // console.dir(document.getElementById('app'))
+      let bodyWidth = document.body.clientWidth,
+        bodyHeight = document.body.clientHeight,
+        appWidth = document.getElementById("app").clientWidth * this.ratio,
+        appHeight = document.getElementById("app").clientHeight * this.ratio,
+        a = bodyWidth - appWidth,
+        b = bodyHeight - appHeight;
+      // console.log(document.body.clientHeight,document.body.clientWidth)
+      // this.$refs['pointFixed'].style.top = ((target.pageY)/ratio - (b*0.5)/ratio)-15/ratio + 'px'
+      // this.$refs['pointFixed'].style.left = ((target.pageX)/ratio - (a*0.5)/ratio)-15/ratio+ 'px'
+      if (this.ratio != 1) {
+        this.$refs["pointFixed"].style.transform = "translate(0px, -75px)";
+        this.pointTop = target.pageY / this.ratio - (b * 0.5) / this.ratio;
+        this.pointLeft =
+          target.pageX / this.ratio - (a * 0.5) / this.ratio - 60;
+      } else {
+        this.pointTop = target.pageY;
+        this.pointLeft = target.pageX - 60;
+      }
+
+      this.pointStatus = "block";
+
+      // console.log(target)
+    },
+    // 鼠标抬起
+    up(val, e) {
+      let _this = this;
+      if (this.isEditPoint) {
+        window.removeEventListener("mousemove", function(e) {
+          _this.movePoint();
+        });
+      }
+      // this.$refs['point'+val].style.display = '1'
+    },
   }
 }
 </script>
 <style lang="less" scoped>
-@import '../laborPersonCommon.less';
+@import "../laborPersonCommon.less";
 ::v-deep .el-button--medium {
   padding: 9px 10px;
 }
@@ -268,11 +826,15 @@ export default {
     position: relative;
 
     .left_list {
-      width: 350px;
+      width: 330px;
       text-align: center;
       height: calc(100% - 61px);
       margin-top: 45px;
     }
+    .addMap {
+      margin-top: 825px;
+      margin-left: -210px;
+    }
   }
   .right2 {
     margin-left: 11px !important;
@@ -283,41 +845,15 @@ export default {
       position: absolute;
     }
   }
+
   ::v-deep .right2 .team_list .list_wrap {
     margin-top: 12px;
   }
   ::v-deep .right2 .team_list .list_wrap .list div {
     padding: 6px 5px;
   }
+
   //----------分割
-  .add-btn {
-    width: 285px;
-    height: 120px;
-    margin-top: 10px;
-    margin-bottom: 19px;
-    margin-left: 33px;
-    background-color: skyblue;
-   ::v-deep .el-button {
-      background: rgba(#5181f6, 0.1);
-      border: 0;
-      color: #262d48;
-      width: 280px;
-      height: 36px;
-      line-height: 36px;
-      padding: 0;
-      display: block;
-      margin: 0 auto;
-      .el-icon-circle-plus-outline {
-        color: #5181f6;
-      }
-    }
-    .addText{
-      line-height: 60px;
-    }
-    .el-icon-circle-plus-outline{
-            line-height: 70px;
-    }
-  }
   .map-right {
     // flex: 1;
     width: calc(98%);
@@ -419,5 +955,189 @@ export default {
       }
     }
   }
+  .img-active {
+    border-color: #4a8bff;
+    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.14);
+  }
+  .dialog-content {
+    height: 650px;
+    margin-bottom: 30px;
+  }
+  .btn-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .map-box {
+  display: flex;
+  height: 820px;
+  .map-left {
+    width: 300px;
+    height: 802px;
+    .uploadBox {
+      width: 250px;
+      margin: 0 auto;
+      margin-bottom: 16px;
+    }
+    .add-btn {
+      width: 250px;
+      margin: 0 auto;
+      margin-bottom: 16px;
+      text-align: center;
+      background: rgba(#d8d8d8, 0.3);
+      height: 132px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      .el-icon-circle-plus-outline {
+        margin-bottom: 8px;
+        font-size: 26px;
+        color: #b4c8f3;
+      }
+    }
+    ul {
+      width: 265px;
+     margin-left: 30px;
+      li {
+        width: 100%;
+        margin-bottom: 16px;
+        cursor: pointer;
+        border: 1px solid #cdcdcd;
+        padding: 0 10px;
+        padding-top: 10px;
+        box-sizing: border-box;
+        img {
+          width: 100%;
+          margin: 0 auto;
+          display: block;
+          height: 132px;
+          // border: 1px solid #CDCDCD;
+        }
+        .actions-box {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding-right: 10px;
+          span {
+            flex: 1;
+          }
+        }
+      }
+      .img-active {
+        border-color: #4a8bff;
+        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.14);
+      }
+    }
+  }
+  .map-right {
+    // flex: 1;
+    width: calc(100% - 300px);
+    border: 1px solid #e6e6e6;
+    padding: 14px;
+    height: 802px;
+    .action-box {
+      display: flex;
+      margin-bottom: 10px;
+      .btn-item {
+        margin-right: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #5181f6;
+        border: 1px solid #5181f6;
+        border-radius: 3px;
+        cursor: pointer;
+        width: 62px;
+        height: 24px;
+        img {
+          margin-right: 4px;
+        }
+        i {
+          margin-right: 4px;
+        }
+      }
+    }
+    .img-box {
+      // margin: 0 auto;
+      // height: 100%;
+      // position: relative;
+      // top: 50%;
+      // transform: translateY(-50%);
+      transform-origin: left top;
+      position: relative;
+      .point-list {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        li {
+          display: inline-block;
+          position: absolute;
+        }
+        .point-dialog {
+          background: rgba(#2a2e3f, 0.9);
+          color: #fff;
+          width: 238px;
+          height: auto;
+          box-sizing: border-box;
+          padding: 0 16px;
+          padding-bottom: 18px;
+          position: absolute;
+          left: 50%;
+          top: -8px;
+          transform: translate(-50%, -100%);
+          font-size: 12px;
+          .el-icon-error {
+            position: absolute;
+            right: 12px;
+            top: 10px;
+            cursor: pointer;
+          }
+          .point-title {
+            // height: 40px;
+            line-height: 20px;
+            border-bottom: 1px solid rgba(254, 255, 255, 1);
+            margin-bottom: 13px;
+            font-size: 14px;
+            word-break: break-all;
+            padding: 10px 0;
+          }
+          .point-content {
+            font-size: 14px;
+            p {
+              line-height: 24px;
+            }
+          }
+        }
+        .point-title2 {
+          width: auto;
+          height: auto;
+          white-space: nowrap;
+          font-size: 16px;
+          padding: 10px 20px;
+        }
+        .right_detail {
+          left: 30px;
+          top: 0;
+          transform: translate(0, 0);
+        }
+        .right_title {
+          left: 30px;
+          top: -8px;
+          transform: translate(0, 0);
+        }
+      }
+      img {
+        // display: block;
+        // margin: 0 auto;
+        // position: relative;
+        // top: 50%;
+        // transform: translateY(-50%);
+      }
+    }
+  }
+}
 }
 </style>
diff --git a/src/views/projectFront/personnelPosition/ConfigChildrenIndex/positoningIndex.vue b/src/views/projectFront/personnelPosition/ConfigChildrenIndex/positoningIndex.vue
index 07bd25db..7b8e9df1 100644
--- a/src/views/projectFront/personnelPosition/ConfigChildrenIndex/positoningIndex.vue
+++ b/src/views/projectFront/personnelPosition/ConfigChildrenIndex/positoningIndex.vue
@@ -3,37 +3,63 @@
     <div class="left2 whiteBlock">
       <div class="left_list">
         <div>
-          <!-- 基站地图列表 -->
+          <!-- 左侧基站平面图列表 -->
           <div class="dialog-content map-box">
             <div class="map-left">
-              <vue-scroll style="800px">
+              <vue-scroll>
                 <ul>
-                  <li v-for="(item, index) in 4" :key="index">
-                    <img src="@/assets/images/login/p5.jpg" />
+                  <li
+                    v-for="(item, index) in deepImgList"
+                    :key="index"
+                    :class="{ 'img-active': activeImgIndex == index }"
+                  >
+                    <img :src="item.imageUrl" @click="checkImg(item, index)" />
                     <div class="actions-box">
-                      <span>地图</span>
+                      <span>{{ item.planeFigureName }}</span>
                       <!-- 编辑 -->
-                      <el-button type="text" style="color: #84b2fa;" icon="el-icon-edit"></el-button>
+                      <el-button
+                        type="text"
+                        style="color: #84b2fa"
+                        icon="el-icon-edit"
+                        @click="editDeepimg(item)"
+                      ></el-button>
                       <!-- 删除 -->
-                      <el-button type="text" icon="el-icon-delete" style="color: #F56C6C"></el-button>
+                      <el-button
+                        type="text"
+                        icon="el-icon-delete"
+                        style="color: #f56c6c"
+                        @click="deleteDeepImg(item)"
+                      ></el-button>
                       <!-- {{$t('message.deepFoundConfig.remove')}} -->
                     </div>
                   </li>
                 </ul>
               </vue-scroll>
             </div>
+            <div class="addMap">
+              <el-button type="primary" @click="openAddImgDialog"
+                >添加平面图</el-button
+              >
+            </div>
           </div>
         </div>
       </div>
     </div>
-
+    <!-- 基站 -->
     <div class="right2" style="width: 100%; margin-left: 0">
       <div class="title whiteBlock flex">
         <span>基站信息</span>
       </div>
 
       <div class="team_list whiteBlock flex2">
-        <el-button type="primary" plain icon="el-icon-plus" class="team_addBtn" @click="addBaseBtn">新增基站</el-button>
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          class="team_addBtn"
+          @click="addBaseBtn"
+          >新增基站</el-button
+        >
         <div class="flex2 list_wrap">
           <!-- <div class="list" :class="checkedTeamId == 0 && 'checkedTeam'">
             <div>全部基站</div>
@@ -44,52 +70,99 @@
             <div slot="reference">{{ item.name }}</div>
             <!-- <div style="margin:4px 0">1</div> -->
             <el-popover placement="bottom" min-width="80" trigger="hover">
-              <div style=" margin: 0; text-align:center;">
-                <div style=" cursor: pointer; margin-bottom:5px" @click="editBase(item)">
-                  <img src="@/assets/images/icon-edit.png" style="margin-right:5px" />
+              <div style="margin: 0; text-align: center">
+                <div
+                  style="cursor: pointer; margin-bottom: 5px"
+                  @click="editBase(item)"
+                >
+                  <img
+                    src="@/assets/images/icon-edit.png"
+                    style="margin-right: 5px"
+                  />
                   <span>编辑</span>
                 </div>
-                <div style="cursor: pointer;" @click="deletBase(item)">
-                  <img src="@/assets/images/icon-delete.png" style="margin-right:5px" />
+                <div style="cursor: pointer" @click="deletBase(item)">
+                  <img
+                    src="@/assets/images/icon-delete.png"
+                    style="margin-right: 5px"
+                  />
                   <span>删除</span>
                 </div>
               </div>
               <div slot="reference">
-                <i class="el-icon-arrow-down" style="font-size:17px"></i>
+                <i class="el-icon-arrow-down" style="font-size: 17px"></i>
               </div>
             </el-popover>
           </div>
         </div>
         <!-- <i class="el-icon-more-outline" style="font-size: 26px;cursor: pointer;color: #999;"></i> -->
       </div>
-      <div class="baseShow whiteBlock ">
-        <!-- 右边展示 -->
+      <div class="baseShow whiteBlock">
+        <!-- 右边大图展示 -->
         <div class="map-right">
           <div class="action-box" v-if="activeImgUrl">
-            <div v-show="!isEditPoint" class="btn-item">
+            <div v-show="!isEditPoint" class="btn-item" @click="editPoint">
               <img src="@/assets/images/deepFoundationPitManage/address.png" />
               <!-- 布点 -->
               布点
             </div>
-            <div v-show="isEditPoint" class="btn-item">
+            <div v-show="isEditPoint" class="btn-item" @click="savePoint">
               <img src="@/assets/images/deepFoundationPitManage/save.png" />
               <!-- 保存 -->
-              报存
+              保存
             </div>
-            <div class="btn-item">
+            <div class="btn-item" @click="changeImgSize(1)">
               <i class="el-icon-zoom-in"></i>
               <!-- 放大 -->
               放大
             </div>
-            <div class="btn-item">
+            <div class="btn-item" @click="changeImgSize(2)">
               <i class="el-icon-zoom-out"></i>
               <!-- 缩小 -->
               缩小
             </div>
           </div>
           <div ref="mapbox">
-            <vue-scroll style="height:780px;"> </vue-scroll>
-          </div>
+              <vue-scroll style="height:780px;">
+                <div
+                  class="img-box"
+                  :style="{'width': imgWidth + 'px', height: imgHeight + 'px', transform: 'scale(' + imgZoom +')'}"
+                >
+                  <img
+                    ref="map"
+                    v-if="activeImgUrl"
+                    style="border: 1px solid #eee;"
+                    :style="{'width': imgWidth + 'px', height: imgHeight + 'px'}"
+                    :src="activeImgUrl"
+                  />
+                  <ul class="point-list" v-if="activeImgUrl">
+                    <li
+                      v-for="(item,index) in pointList"
+                      :key="index"
+                      :ref="'point'+index"
+                      :style="{'top': item.mapY + 'px', 'left': item.mapX + 'px', 'display': item.status, 'transform': 'scale(' + 1/imgZoom +')'+ ' ' + item.transform}"
+                    >
+                     
+                      <div
+                        class="point-dialog point-title2"
+                        :class="{'right_title': item.mapY < 47 || item.mapX < 22}"
+                        :style="{'display': item.showDetail ? 'none':'block'}"
+                        @click="item.showDetail = true"
+                      >
+                        <span>{{item.name}}</span>
+                      </div>
+                      <img
+                      @mousedown.prevent="move(index,$event)"
+                        @mouseup="up(index,$event)"
+                        style="width: 70px; height:70px;"
+                        src="@/assets/images/deepFoundationPitManage/ljz.png"
+                      />
+                    </li>
+                  </ul>
+                </div>
+              
+              </vue-scroll>
+            </div>
         </div>
       </div>
     </div>
@@ -102,7 +175,14 @@
       width="740px"
     >
       <div class="dialog_content">
-        <el-form size="small" ref="baseForm" :model="baseForm" label-position="top" label-width="80px" :rules="baseFormRules">
+        <el-form
+          size="small"
+          ref="baseForm"
+          :model="baseForm"
+          label-position="top"
+          label-width="80px"
+          :rules="baseFormRules"
+        >
           <el-form-item label="基站名称" prop="name">
             <el-input v-model="baseForm.name" placeholder="请输入"></el-input>
           </el-form-item>
@@ -111,15 +191,15 @@
           </el-form-item>
           <el-form-item label="设备状态" prop="deviceState">
             <el-select v-model="baseForm.deviceState" style="width: 100%">
-              <el-option label="在线" value="1"></el-option>
-              <el-option label="离线" value="2"></el-option>
+              <el-option label="在线" :value="1"></el-option>
+              <el-option label="离线" :value="2"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="基站类型" prop="locationType">
             <el-select v-model="baseForm.locationType" style="width: 100%">
-              <el-option label="外置" value="1"></el-option>
-              <el-option label="内置" value="2"></el-option>
-              <el-option label="无" value="3"></el-option>
+              <el-option label="外置" :value="1"></el-option>
+              <el-option label="内置" :value="2"></el-option>
+              <el-option label="无" :value="3"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="范围设置" prop="range">
@@ -127,20 +207,113 @@
           </el-form-item>
           <el-form-item label="关联基站" prop="relationStationId">
             <el-select v-model="baseForm.relationStationId" style="width: 100%">
-              <!-- <el-option label="基站" value="1"></el-option> -->
-              <el-option v-for="item in relationIdList" :key="item.id" :label="item.relationStationId" :value="item.id"></el-option>
+              <!-- <el-option label="基站" :value="1"></el-option> -->
+              <el-option
+                v-for="item in relationIdList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="关联楼栋" prop="buildingId">
             <el-select v-model="baseForm.buildingId" style="width: 100%">
-              <!-- <el-option label="楼栋" value="1"></el-option> -->
-              <el-option v-for="item in buildingIdList" :key="item.id" :label="item.buildingId" :value="item.id"></el-option>
+              <!-- <el-option label="楼栋" :value="1"></el-option> -->
+              <el-option
+                v-for="item in buildingIdList"
+                :key="item.id"
+                :label="item.buildingId"
+                :value="item.id"
+              ></el-option>
             </el-select>
           </el-form-item>
         </el-form>
         <div class="dialog-footer">
-          <el-button class="cancleBtn" @click="addBaseDialog = false" icon="el-icon-circle-close" size="medium">取消</el-button>
-          <el-button type="primary" icon="el-icon-circle-check" size="medium" @click="saveBatchMove">确定 </el-button>
+          <el-button
+            class="cancleBtn"
+            @click="addBaseDialog = false"
+            icon="el-icon-circle-close"
+            size="medium"
+            >取消</el-button
+          >
+          <el-button
+            type="primary"
+            icon="el-icon-circle-check"
+            size="medium"
+            @click="saveBatchMove"
+            >确定
+          </el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 添加平面图 -->
+    <el-dialog
+      width="35%"
+      :title="title"
+      class="dialog-center"
+      :visible.sync="showAddImg"
+      @close="closeAddImg"
+      :modal-append-to-body="false"
+    >
+      <div class="dialog-content" style="height: 368px">
+        <el-form
+          size="medium"
+          class="formBox"
+          style="margin-bottom: 68px"
+          :model="testPointImgForm"
+          ref="testPointImgForm"
+          label-width="120px"
+          :rules="$t('message.deepFoundConfig.rules3')"
+        >
+          <!-- 平面图名称 -->
+          <el-form-item label="平面图名称" prop="planeFigureName">
+            <el-input
+              v-model="testPointImgForm.planeFigureName"
+              placeholder="请输入"
+            ></el-input>
+          </el-form-item>
+          <!-- 示意图 -->
+          <el-form-item label="示意图" prop="fileList">
+            <div
+              class="img_box"
+              v-for="(item, index) in testPointImgForm.fileList"
+              :key="index"
+            >
+              <el-image
+                :src="item.url"
+                :preview-src-list="[item.url]"
+                style="width: 148px; height: 148px; margin-right: 20px"
+              ></el-image>
+              <i
+                class="el-icon-error"
+                @click="testPointImgForm.fileList.splice(index, 1)"
+              ></i>
+            </div>
+            <el-upload
+              :action="$store.state.UPLOADURL"
+              name="files"
+              style="display: inline"
+              list-type="picture-card"
+              :show-file-list="false"
+              :on-preview="handlePictureCardPreview"
+              :on-remove="(file, fileList) => handleRemove(file, fileList, 4)"
+              :on-success="(res, file) => handleSuccess(res, file, 4)"
+              :file-list="testPointImgForm.fileList"
+            >
+              <i class="el-icon-plus"></i>
+            </el-upload>
+          </el-form-item>
+        </el-form>
+        <div class="btn-box">
+          <el-button icon="el-icon-circle-close" @click="closeAddImg"
+            >取消</el-button
+          >
+          <el-button
+            type="primary"
+            icon="el-icon-circle-check"
+            @click="submitImgConfig"
+            >确定</el-button
+          >
         </div>
       </div>
     </el-dialog>
@@ -149,193 +322,596 @@
 
 <script>
 import {
+  //基站接口
   addPersonnelLocationnApi,
   deletePersonnelLocationDeleteByIdApi,
   getPersonnelLocationBaseStationGetByIdApi,
   editPersonnelStationUpdateApi,
   getPersonnelLocationBaseStationListApi,
-  getPersonnelLocationBaseStationApi
-} from '@/assets/js/api/personnelPositioning.js'
+  getPersonnelLocationBaseStationApi,
+  //平面图接口
+  getPlaneFigureApi,
+  addPlaneFigureApi,
+  editPlaneFigureApi,
+  deletePlaneFigureApi,
+  getDetailsByIdApi,
+} from "@/assets/js/api/personnelPositioning.js";
 export default {
   data() {
     return {
-      title: '',
-      activeImgUrl: '',
-      pointStatus: 'none',
+      title: "",
+      activeImgUrl: true,
+      pointStatus: "none",
       pointTop: 0,
       pointLeft: 0,
       imgWidth: 0,
       imgHeight: 0,
       imgZoom: 1,
       isEditPoint: false,
-      activeImgUrl: '',
       checkedTeamId: 0, //选中的班组id
       // --------
-      projectSn: '', //项目Sn
-      teamDialogTitle: '', //新增/编辑弹框title
+      projectSn: "", //项目Sn
+      teamDialogTitle: "", //新增/编辑弹框title
       addBaseDialog: false, // 新增/编辑基站 弹窗
       baseList: [], //基站列表
       relationIdList: [], //关联基站
       buildingIdList: [], //关联楼栋
       baseForm: {
-        name: '', //基站名称
-        baseStationSn: '', //基站编号
-        deviceState: 0, //设备状态，1在线，2离线
-        locationType: 0, // 基站类型 1：外 2：内 3：无
-        range: 0, //范围设置 米数 单位：m
-        relationStationId: 0, //关联基站id
-        buildingId: 0, //关联楼栋id
-        projectSn: ''
+        name: "", //基站名称
+        baseStationSn: "", //基站编号
+        deviceState: "", //设备状态，1在线，2离线
+        locationType: "", // 基站类型 1：外 2：内 3：无
+        range: "", //范围设置 米数 单位：m
+        relationStationId: "", //关联基站id
+        buildingId: "", //关联楼栋id
+        projectSn: "",
+        planeFigureId: "", //点位图id
       },
       baseFormRules: {
         name: [
           {
             required: true,
-            message: '请输入基站名称',
-            trigger: 'change'
-          }
+            message: "请输入基站名称",
+            trigger: "change",
+          },
         ],
         baseStationSn: [
           {
             required: true,
-            message: '请输入基站编号',
-            trigger: 'change'
-          }
+            message: "请输入基站编号",
+            trigger: "change",
+          },
         ],
         deviceState: [
           {
             required: true,
-            message: '请选择设备状态',
-            trigger: 'change'
-          }
+            message: "请选择设备状态",
+            trigger: "change",
+          },
         ],
         locationType: [
           {
             required: true,
-            message: '请选择基站类型',
-            trigger: 'change'
-          }
+            message: "请选择基站类型",
+            trigger: "change",
+          },
         ],
         range: [
           {
             required: true,
-            message: '请输入范围',
-            trigger: 'change'
-          }
+            message: "请输入范围",
+            trigger: "change",
+          },
         ],
-        relationStationId: [
-          {
-            required: true,
-            message: '请选择关联基站',
-            trigger: 'change'
-          }
-        ],
-        buildingId: [
-          {
-            required: true,
-            message: '请选择关联楼栋',
-            trigger: 'change'
-          }
-        ]
-      }
-    }
+        // relationStationId: [
+        //   {
+        //     required: true,
+        //     message: "请选择关联基站",
+        //     trigger: "change",
+        //   },
+        // ],
+        // buildingId: [
+        //   {
+        //     required: true,
+        //     message: "请选择关联楼栋",
+        //     trigger: "change",
+        //   },
+        // ],
+      },
+      planeFigureId: "", //平面图id
+      deepImgList: [], //平面图列表
+      activeImgIndex: 0,
+      dialogType: 1, // 1添加 2 编辑
+      showAddImg: false, //添加平面图弹框
+      testPointImgForm: {
+        planeFigureName: "",
+        fileList: [],
+        id: "",
+        removeData: "",
+        removeType: "",
+      },
+      pointList: [],
+      dataType: "",
+      mapDate: {
+        width: "",
+        height: ""
+      },
+      startX: "",
+      startY: "",
+      ratio:"",
+      pointIndex:"",
+    };
   },
   created() {
-    this.projectSn = this.$store.state.projectSn
-    this.imgGet()
-    this.getPersonnelLocationBase()
+    this.projectSn = this.$store.state.projectSn;
+    // this.getPersonnelLocationBase();
+    this.getPlaneFigureList();
   },
   mounted() {},
   computed: {},
   methods: {
+    
+    //---------基站
     //获取人员定位基站
-    getPersonnelLocationBase() {
-      getPersonnelLocationBaseStationListApi({ projectSn: this.$store.state.projectSn }).then(res => {
-        console.log('基站列表111', res)
-        this.baseList = res.result
-        this.relationIdList = res.result
-        this.buildingIdList = res.result
-      })
+    getPersonnelLocationBase(val) {
+      getPersonnelLocationBaseStationGetByIdApi({
+        id: val,
+      }).then((res) => {
+        console.log("基站列表111", res);
+        this.baseList = res.result;
+        this.relationIdList = res.result;
+        this.buildingIdList = res.result;
+      });
     },
     //新增基站按钮
     addBaseBtn() {
-      this.teamDialogTitle = '新增基站'
-      this.addBaseDialog = true
+      this.teamDialogTitle = "新增基站";
+      this.addBaseDialog = true;
       this.baseForm = {
-        name: '', //基站名称
-        baseStationSn: '', //基站编号
-        deviceState: '', //设备状态，1在线，2离线
-        locationType: '', // 基站类型 1：外 2：内 3：无
-        range: '', //范围设置 米数 单位：m
-        relationStationId: '', //关联基站id
-        buildingId: '' //关联楼栋id
-      }
+        name: "", //基站名称
+        baseStationSn: "", //基站编号
+        deviceState: "", //设备状态，1在线，2离线
+        locationType: "", // 基站类型 1：外 2：内 3：无
+        range: "", //范围设置 米数 单位：m
+        relationStationId: "", //关联基站id
+        buildingId: "", //关联楼栋id
+        projectSn: "",
+        planeFigureId: "", //点位图id
+      };
       setTimeout(() => {
-        this.$refs.baseForm.clearValidate()
-      }, 120)
+        this.$refs.baseForm.clearValidate();
+      }, 120);
     },
     //编辑基站按钮
     editBase(item) {
-      this.addBaseDialog = true
-      this.teamDialogTitle = '编辑基站'
-      this.baseForm = JSON.parse(JSON.stringify(item))
+      this.addBaseDialog = true;
+      this.teamDialogTitle = "编辑基站";
+      this.baseForm = JSON.parse(JSON.stringify(item));
     },
     //新增/编辑基站确认提交
     saveBatchMove() {
-      this.$refs.baseForm.validate(valid => {
+      this.baseForm.planeFigureId = this.planeFigureId;
+      console.log("添加/编辑 提交的数据", this.baseForm);
+      this.$refs.baseForm.validate((valid) => {
         if (valid) {
-          this.baseForm.projectSn = this.projectSn
-          if (this.teamDialogTitle == '新增基站') {
-            addPersonnelLocationnApi(this.baseForm).then(res => {
-              console.log('新增基站', res)
-              this.$message.success(res.message)
-              this.addBaseDialog = false
-              this.getPersonnelLocationBase()
-            })
-          }else if( this.teamDialogTitle == '编辑基站'){
-            console.log('编辑进来了吗');
-             editPersonnelStationUpdateApi(this.baseForm).then((res)=>{
-             this.$message.success(res.message)
-              this.addBaseDialog = false
-              this.getPersonnelLocationBase()
-          })
+          this.baseForm.projectSn = this.projectSn;
+          if (this.teamDialogTitle == "新增基站") {
+            addPersonnelLocationnApi(this.baseForm).then((res) => {
+              console.log("新增基站", res);
+              this.$message.success(res.message);
+              this.addBaseDialog = false;
+              this.getPlaneFigureList();
+            });
+          } else if (this.teamDialogTitle == "编辑基站") {
+            console.log("编辑进来了吗");
+            editPersonnelStationUpdateApi(this.baseForm).then((res) => {
+              this.$message.success(res.message);
+              this.addBaseDialog = false;
+              this.getPlaneFigureList();
+            });
           }
         }
-      })
+      });
     },
     //删除基站
     deletBase(item) {
-      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
+      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
       })
         .then(() => {
-          deletePersonnelLocationDeleteByIdApi({ id: item.id }).then(res => {
-            this.getPersonnelLocationBase()
+          deletePersonnelLocationDeleteByIdApi({ id: item.id }).then((res) => {
+            this.getPersonnelLocationBase();
             this.$message({
-              type: 'success',
-              message: '删除成功!'
-            })
-          })
+              type: "success",
+              message: "删除成功!",
+            });
+          });
         })
         .catch(() => {
           this.$message({
-            type: 'info',
-            message: '已取消删除'
-          })
-        })
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    //--------平面图
+    //获取平面图列表
+    getPlaneFigureList() {
+      getPlaneFigureApi({ projectSn: this.$store.state.projectSn }).then(
+        (res) => {
+          console.log("平面图列表", res);
+          if ((res.code = 200)) {
+            this.deepImgList = res.result.records;
+            // this.id = res.result.records.id;
+            if (this.deepImgList.length > 0) {
+              this.checkImg(this.deepImgList[0], 0);
+            }
+          }
+        }
+      );
+    },
+    // 切换平面图
+    checkImg(val, index) {
+      this.planeFigureId = val.id;
+
+      console.log("cal 平面图数据", val);
+      console.log("cal 平面图数据", index);
+
+      this.imgZoom = 1;
+      this.activeImgIndex = index;
+      this.activeImgUrl = val.imageUrl;
+      this.isEditPoint = false;
+      this.selectDeepExcavationPlaneFigureCoordinate(this.planeFigureId);
+      this.$nextTick(() => {
+        this.getNaturalSize();
+      });
+    },
+    // 获取点位位置信息
+    selectDeepExcavationPlaneFigureCoordinate(val) {
+      getDetailsByIdApi({
+        id: val,
+        type: 2,
+      }).then((res) => {
+        console.log("点点点", res);
+        if (res.code == 200) {
+          // res.result.forEach(item => {
+          //   item.status = "block";
+          //   (item.transform = ""), (item.showDetail = false);
+          //   let arr = [];
+          //   // let obj = JSON.parse(item.dataField);
+          //   // let obj = item.sensorlist
+          //   // for (let key in obj) {
+          //   //   arr.push({
+          //   //     key: key,
+          //   //     keyName: obj[key]
+          //   //   });
+          //   // }
+          //   item.detailList = arr;
+          // });
+          this.relationIdList = res.result.baseStationList;
+          this.baseList = res.result.baseStationList;
+          this.pointList = res.result.baseStationList;
+          console.log("this.baseList", this.baseList);
+
+          console.log(" this.relationIdList", this.relationIdList);
+        }
+      });
+    },
+    // 获取平面图片大小
+    getNaturalSize(callback) {
+      let Domlement = this.$refs["map"];
+      console.dir(Domlement);
+      var natureSize = {};
+      if (window.naturalWidth && window.naturalHeight) {
+        natureSize.width = Domlement.naturalWidth;
+        natureSize.height = Domlement.naturalHeight;
+        // let heightRatio = natureSize.height / 569
+        // this.mapDate.width = natureSize.width*heightRatio
+      } else {
+        console.log(213);
+        let _this = this;
+        var img = new Image();
+        img.src = Domlement.src;
+        img.onload = function () {
+          natureSize.width = img.width;
+          natureSize.height = img.height;
+          console.log("------", natureSize);
+          _this.imgWidth = natureSize.width;
+          _this.imgHeight = natureSize.height;
+          _this.imgStartWidth = img.width;
+          _this.imgStartHeight = img.width;
+          console.log(
+            _this.$refs["mapbox"].clientWidth,
+            _this.$refs["mapbox"].clientHeight
+          );
+
+          // let heightRatio = 780 / natureSize.height
+          // let widthRatio = _this.$refs['mapbox'].clientWidth / natureSize.width
+          // if(heightRatio < widthRatio){
+          //     // _this.imgWidth = natureSize.width*heightRatio
+          //     // _this.imgHeight = natureSize.height*heightRatio
+          //     _this.imgZoom = heightRatio
+          // } else {
+          //     // _this.imgWidth = natureSize.width*widthRatio
+          //     // _this.imgHeight = natureSize.height*widthRatio
+          //     _this.imgZoom = widthRatio
+          // }
+          // _this.mapDate.width = natureSize.width*heightRatio
+          if (callback) {
+            return callback(natureSize);
+          }
+        };
+      }
+      console.log(natureSize);
+      // return natureSize;
+    },
+    // 添加平面图
+    openAddImgDialog() {
+      this.title = "添加平面图";
+      this.dialogType = 1;
+      this.showAddImg = true;
+    },
+    // 编辑布置图
+    editDeepimg(val) {
+      console.log("编辑", val);
+      this.title = "编辑平面图";
+      this.dialogType = 2;
+      this.showAddImg = true;
+      this.id = val.id;
+      this.testPointImgForm.planeFigureName = val.planeFigureName;
+      this.testPointImgForm.fileList = [{ url: val.imageUrl }];
     },
 
-    //测试图片
-    imgGet() {
-      this.activeImgUrl = '@/assets/images/login/p5.jpg'
-    }
-  }
-}
+    //新增/编辑平面图保存
+    submitImgConfig() {
+      this.$refs.testPointImgForm.validate((valid) => {
+        if (valid) {
+          if (this.dialogType == 1) {
+            addPlaneFigureApi({
+              planeFigureName: this.testPointImgForm.planeFigureName,
+              imageUrl: this.testPointImgForm.fileList[0].url,
+              projectSn: this.projectSn,
+            }).then((res) => {
+              this.$message.success(res.message);
+              this.showAddImg = false;
+              this.getPlaneFigureList();
+            });
+          } else if (this.dialogType == 2) {
+            editPlaneFigureApi({
+              id: this.id,
+              planeFigureName: this.testPointImgForm.planeFigureName,
+              imageUrl: this.testPointImgForm.fileList[0].url,
+              projectSn: this.projectSn,
+              dataType: 0,
+            }).then((res) => {
+              this.$message.success("编辑成功");
+              this.showAddImg = false;
+              this.getPlaneFigureList();
+            });
+          }
+        }
+      });
+    },
+    // 删除布置图
+    deleteDeepImg(item) {
+      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          deletePlaneFigureApi({ id: item.id }).then((res) => {
+            this.getPlaneFigureList();
+            this.$message({
+              type: "success",
+              message: "删除成功!",
+            });
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+    //上传图片
+    handleSuccess(res, file, type) {
+      if (res.status == "SUCCESS") {
+        this.testPointImgForm.fileList = [
+          {
+            name: file.name,
+            url: this.$store.state.FILEURL + file.response.data[0].imageUrl,
+          },
+        ];
+        this.$refs["testPointImgForm"].clearValidate();
+        console.log(this.testPointImgForm.fileList);
+      }
+    },
+        // 添加鼠标监听事件
+    move(val, e) {
+      console.log(val, e.pageX, e.pageY);
+      this.ratio = window.localStorage.getItem("zoom");
+      this.startX = e.pageX;
+      this.startY = e.pageY;
+      this.pointIndex = val;
+      // console.dir(this.$refs['point'+val])
+      // this.$refs['point'+val].style.opacity = '0'
+      let _this = this;
+      console.log(this.pointList[val]);
+      if (this.isEditPoint) {
+        this.pointList[val].status = "none";
+        // this.$refs['point'+ val].style.display = 'none'
+        document.body.addEventListener("mousemove", this.movePoint, false);
+        document.body.addEventListener("mouseup", this.removeUp, false);
+      }
+
+      // document.body.addEventListener('mousemove',(e)=>{
+      //   _this.movePoint(e,val,ratio,a,b)
+      // },false)
+      // document.body.addEventListener('mouseup',()=>{
+      //     // _this.movePoint(e,val,ratio,a,b,')
+      //     window.removeEventListener('mousemove',(e)=>{
+      //       // console.log(1232)
+      //       _this.movePoint(e,val,ratio,a,b)
+      //     },false)
+      // })
+    },
+        // 清除鼠标监听时间
+    removeUp(e) {
+      let top = (e.pageY - this.startY) / this.imgZoom,
+        left = (e.pageX - this.startX) / this.imgZoom;
+      console.log(top, left);
+      this.pointStatus = "none";
+      let x = Math.ceil(
+          Number(
+            this.pointList[this.pointIndex].mapX
+              ? this.pointList[this.pointIndex].mapX
+              : 0
+          ) +
+            left / this.ratio
+        ),
+        y = Math.ceil(
+          Number(
+            this.pointList[this.pointIndex].mapY
+              ? this.pointList[this.pointIndex].mapY
+              : 0
+          ) +
+            top / this.ratio
+        );
+      console.log(x, y, this.imgWidth, this.imgHeight);
+      if (y <= this.imgHeight && y >= 0) {
+        this.pointList[this.pointIndex].mapY = y;
+      }
+      if (x <= this.imgWidth && x >= 0) {
+        this.pointList[this.pointIndex].mapX = x;
+      }
+      this.pointList[this.pointIndex].status = "block";
+      console.log(this.pointList);
+      this.$forceUpdate();
+      // this.pointList[this.pointIndex].transform = 'translate(-150%, -150%)'
+      // this.$refs['point'+this.pointIndex].style.transform = 'translate(-150%, -150%)'
+      // this.$refs['point'+ this.pointIndex].style.display = 'block'
+      document.body.removeEventListener("mousemove", this.movePoint, false);
+      document.body.removeEventListener("mouseup", this.removeUp, false);
+    },
+    // 移动鼠标
+    movePoint(target) {
+      // console.log(target)
+      // console.log(window.localStorage.getItem('zoom'))
+
+      // console.dir(document.getElementById('app'))
+      let bodyWidth = document.body.clientWidth,
+        bodyHeight = document.body.clientHeight,
+        appWidth = document.getElementById("app").clientWidth * this.ratio,
+        appHeight = document.getElementById("app").clientHeight * this.ratio,
+        a = bodyWidth - appWidth,
+        b = bodyHeight - appHeight;
+      // console.log(document.body.clientHeight,document.body.clientWidth)
+      // this.$refs['pointFixed'].style.top = ((target.pageY)/ratio - (b*0.5)/ratio)-15/ratio + 'px'
+      // this.$refs['pointFixed'].style.left = ((target.pageX)/ratio - (a*0.5)/ratio)-15/ratio+ 'px'
+      if (this.ratio != 1) {
+        this.$refs["pointFixed"].style.transform = "translate(0px, -75px)";
+        this.pointTop = target.pageY / this.ratio - (b * 0.5) / this.ratio;
+        this.pointLeft =
+          target.pageX / this.ratio - (a * 0.5) / this.ratio - 60;
+      } else {
+        this.pointTop = target.pageY;
+        this.pointLeft = target.pageX - 60;
+      }
+
+      this.pointStatus = "block";
+
+      // console.log(target)
+    },
+    // 鼠标抬起
+    up(val, e) {
+      let _this = this;
+      if (this.isEditPoint) {
+        window.removeEventListener("mousemove", function(e) {
+          _this.movePoint();
+        });
+      }
+      // this.$refs['point'+val].style.display = '1'
+    },
+    // 删除文件
+    handleRemove() {
+      this.testPointImgForm.fileList = fileList;
+    },
+    // 查看大图
+    handlePictureCardPreview(file, fileList) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible2 = true;
+    },
+    // 关闭添加图片弹窗
+    closeAddImg() {
+      this.showAddImg = false;
+      this.testPointImgForm = {
+        planeFigureName: "",
+        fileList: [],
+      };
+      this.$refs.testPointImgForm.resetFields();
+    },
+    //放大缩小
+    changeImgSize(val) {
+      if (val == 1) {
+        this.imgZoom = this.imgZoom + 0.5;
+        console.log(this.imgZoom);
+        // this.pointList.forEach(item=>{
+        //   item.x = Math.ceil(item.x)*1.5
+        //   item.y = Math.ceil(item.y)*1.6
+        // })
+      } else if (val == 2) {
+        this.imgZoom =
+          this.imgZoom - 0.5 <= 0 ? this.imgZoom : this.imgZoom - 0.5;
+        console.log(this.imgZoom);
+        // if((this.imgZoom - 0.5) > 0){
+        //   this.pointList.forEach(item=>{
+        //     item.x = Math.ceil(item.x)/1.5
+        //     item.y = Math.ceil(item.y)/1.5
+        //   })
+        // }
+      }
+    },
+    //编辑移动布点
+    editPoint() {
+      this.isEditPoint = true;
+      // 成功 请开始移动点位！
+      this.$notify({
+        title: this.$t("message.deepFoundConfig.success"),
+        message: this.$t("message.deepFoundConfig.notifyMsg"),
+        type: "success",
+      });
+    },
+    //布点保存
+    savePoint() {
+      console.log("点击进来了吗，",this.pointList);
+      this.pointList.forEach((res) => {
+    
+        res.planeFigureId = this.planeFigureId,
+       res.projectSn = this.projectSn
+      }
+    );
+        editPlaneFigureApi({
+              id: this.planeFigureId,
+              projectSn: this.projectSn,
+              dataType: 2,
+              baseStationList:this.pointList
+            }).then((res) => {
+              this.$message.success("保存成功");
+              this.getPlaneFigureList();
+            });
+
+      this.isEditPoint = false;
+    },
+   
+  },
+};
 </script>
 <style lang="less" scoped>
-@import '../laborPersonCommon.less';
+@import "../laborPersonCommon.less";
 ::v-deep .el-button--medium {
   padding: 9px 10px;
 }
@@ -350,11 +926,15 @@ export default {
     position: relative;
 
     .left_list {
-      width: 350px;
+      width: 330px;
       text-align: center;
       height: calc(100% - 61px);
       margin-top: 45px;
     }
+    .addMap {
+      margin-top: 825px;
+      margin-left: -210px;
+    }
   }
   .right2 {
     margin-left: 11px !important;
@@ -468,12 +1048,196 @@ export default {
           transform: translate(0, 0);
         }
         .right_title {
-          left: 30px;
-          top: -8px;
+          left: 53px;
+          top: 2px;
           transform: translate(0, 0);
         }
       }
     }
   }
+  .img-active {
+    border-color: #4a8bff;
+    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.14);
+  }
+  .dialog-content {
+    height: 650px;
+    margin-bottom: 30px;
+  }
+  .btn-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .map-box {
+    display: flex;
+    height: 820px;
+    .map-left {
+      width: 300px;
+      height: 802px;
+      .uploadBox {
+        width: 250px;
+        margin: 0 auto;
+        margin-bottom: 16px;
+      }
+      .add-btn {
+        width: 250px;
+        margin: 0 auto;
+        margin-bottom: 16px;
+        text-align: center;
+        background: rgba(#d8d8d8, 0.3);
+        height: 132px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        .el-icon-circle-plus-outline {
+          margin-bottom: 8px;
+          font-size: 26px;
+          color: #b4c8f3;
+        }
+      }
+      ul {
+        width: 265px;
+        margin-left: 30px;
+        li {
+          width: 100%;
+          margin-bottom: 16px;
+          cursor: pointer;
+          border: 1px solid #cdcdcd;
+          padding: 0 10px;
+          padding-top: 10px;
+          box-sizing: border-box;
+          img {
+            width: 100%;
+            margin: 0 auto;
+            display: block;
+            height: 132px;
+            // border: 1px solid #CDCDCD;
+          }
+          .actions-box {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding-right: 10px;
+            span {
+              flex: 1;
+            }
+          }
+        }
+        .img-active {
+          border-color: #4a8bff;
+          box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.14);
+        }
+      }
+    }
+    .map-right {
+      // flex: 1;
+      width: calc(100% - 300px);
+      border: 1px solid #e6e6e6;
+      padding: 14px;
+      height: 802px;
+      .action-box {
+        display: flex;
+        margin-bottom: 10px;
+        .btn-item {
+          margin-right: 20px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #5181f6;
+          border: 1px solid #5181f6;
+          border-radius: 3px;
+          cursor: pointer;
+          width: 62px;
+          height: 24px;
+          img {
+            margin-right: 4px;
+          }
+          i {
+            margin-right: 4px;
+          }
+        }
+      }
+      .img-box {
+        // margin: 0 auto;
+        // height: 100%;
+        // position: relative;
+        // top: 50%;
+        // transform: translateY(-50%);
+        transform-origin: left top;
+        position: relative;
+        .point-list {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          li {
+            display: inline-block;
+            position: absolute;
+          }
+          .point-dialog {
+            background: rgba(#2a2e3f, 0.9);
+            color: #fff;
+            width: 238px;
+            height: auto;
+            box-sizing: border-box;
+            padding: 0 16px;
+            padding-bottom: 18px;
+            position: absolute;
+            left: 50%;
+            top: -8px;
+            transform: translate(-50%, -100%);
+            font-size: 12px;
+            .el-icon-error {
+              position: absolute;
+              right: 12px;
+              top: 10px;
+              cursor: pointer;
+            }
+            .point-title {
+              // height: 40px;
+              line-height: 20px;
+              border-bottom: 1px solid rgba(254, 255, 255, 1);
+              margin-bottom: 13px;
+              font-size: 14px;
+              word-break: break-all;
+              padding: 10px 0;
+            }
+            .point-content {
+              font-size: 14px;
+              p {
+                line-height: 24px;
+              }
+            }
+          }
+          .point-title2 {
+            width: auto;
+            height: auto;
+            white-space: nowrap;
+            font-size: 16px;
+            padding: 10px 20px;
+          }
+          .right_detail {
+            left: 30px;
+            top: 0;
+            transform: translate(0, 0);
+          }
+          .right_title {
+            left: 30px;
+            top: -8px;
+            transform: translate(0, 0);
+          }
+        }
+        img {
+          // display: block;
+          // margin: 0 auto;
+          // position: relative;
+          // top: 50%;
+          // transform: translateY(-50%);
+        }
+      }
+    }
+  }
 }
 </style>