flx：调整地图回显偏移

src/views/projectFront/inspecPoint/inspection.vue

@@ -1,33 +1,16 @@
 <template>
   <div class="fullHeight">
     <div class="searchBox whiteBlock">
-      <el-form
+      <el-form :inline="true" size="medium" :model="searchForm" ref="searchForm">
-        :inline="true"
-        size="medium"
-        :model="searchForm"
-        ref="searchForm"
-      >
         <el-form-item label="巡检点名称">
-          <el-input
+          <el-input placeholder="请输入" v-model="searchForm.checkingPointName"></el-input>
-            placeholder="请输入"
-            v-model="searchForm.checkingPointName"
-          ></el-input>
         </el-form-item>
-        <el-button type="primary" size="medium" plain @click="getPointList"
+        <el-button type="primary" size="medium" plain @click="getPointList">查询</el-button>
-          >查询</el-button
+        <el-button type="warning" size="medium" plain @click="refresh">刷新</el-button>
-        >
+        <el-button type="primary" size="medium" @click="toAdd" v-permission="{
-        <el-button type="warning" size="medium" plain @click="refresh"
+          key: 'inspection_add',
-          >刷新</el-button
+          menuPath: '/project/inspecPoint/inspection',
-        >
+        }">
-        <el-button
-          type="primary"
-          size="medium"
-          @click="toAdd"
-          v-permission="{
-            key: 'inspection_add',
-            menuPath: '/project/inspecPoint/inspection',
-          }"
-        >
           新增
         </el-button>
       </el-form>
@@ -35,52 +18,15 @@
     <div class="table_wrap whiteBlock">
       <vue-scroll class="tables">
         <el-table :data="tableData">
-          <el-table-column
+          <el-table-column label="序号" align="center" type="index"></el-table-column>
-            label="序号"
+          <el-table-column prop="checkingPointName" label="巡检点名称" align="center"></el-table-column>
-            align="center"
+          <el-table-column prop="position" label="巡检位置" align="center"></el-table-column>
-            type="index"
+          <el-table-column width="150" prop="minInspectTime" label="最低巡检时长(分钟)" align="center"></el-table-column>
-          ></el-table-column>
+          <el-table-column prop="createUserName" label="创建人" align="center"></el-table-column>
-          <el-table-column
+          <el-table-column prop="createDate" label="创建时间" align="center"></el-table-column>
-            prop="checkingPointName"
+          <el-table-column prop="regionName" label="所属区域" align="center"></el-table-column>
-            label="巡检点名称"
+          <el-table-column prop="enterpriseName" label="责任企业" align="center"></el-table-column>
-            align="center"
+          <el-table-column prop="inspectUserNames" label="责任人" align="center"></el-table-column>
-          ></el-table-column>
-          <el-table-column
-            prop="position"
-            label="巡检位置"
-            align="center"
-          ></el-table-column>
-          <el-table-column
-            width="150"
-            prop="minInspectTime"
-            label="最低巡检时长(分钟)"
-            align="center"
-          ></el-table-column>
-          <el-table-column
-            prop="createUserName"
-            label="创建人"
-            align="center"
-          ></el-table-column>
-          <el-table-column
-            prop="createDate"
-            label="创建时间"
-            align="center"
-          ></el-table-column>
-          <el-table-column
-            prop="regionName"
-            label="所属区域"
-            align="center"
-          ></el-table-column>
-          <el-table-column
-            prop="enterpriseName"
-            label="责任企业"
-            align="center"
-          ></el-table-column>
-          <el-table-column
-            prop="inspectUserNames"
-            label="责任人"
-            align="center"
-          ></el-table-column>
           <!-- <el-table-column
             prop="noticeUserNames"
             label="通知人"
@@ -90,97 +36,54 @@
           <el-table-column prop="qrCode" label="二维码" align="center">
             <template slot-scope="{ row }">
               <!-- {{$store.state.FILEURL + row.qrCode}} -->
-              <el-image
+              <el-image style="
-                style="
+                      margin-right: 8px;
-                  margin-right: 8px;
+                      width: 80px;
-                  width: 80px;
+                      height: 80px;
-                  height: 80px;
+                      cursor: pointer;
-                  cursor: pointer;
+                      border-radius: 4px;
-                  border-radius: 4px;
+                    " fit="cover" :src="$store.state.FILEURL + row.qrCode"
-                "
+                :preview-src-list="[$store.state.FILEURL + row.qrCode]" />
-                fit="cover"
-                :src="$store.state.FILEURL + row.qrCode"
-                :preview-src-list="[$store.state.FILEURL + row.qrCode]"
-              />
             </template>
           </el-table-column>
 
-          <el-table-column
+          <el-table-column :label="
-            :label="
+            $t('message.personnelPosition.beaconManage.table.operation')
-              $t('message.personnelPosition.beaconManage.table.operation')
+          " align="center" width="400">
-            "
-            align="center"
-            width="400"
-          >
             <template slot-scope="scope">
               <div class="tableBtns">
-                <div
+                <div class="operationText" v-permission="{
-                  class="operationText"
+                  key: 'inspection_download',
-                  v-permission="{
+                  menuPath: '/project/inspecPoint/inspection',
-                    key: 'inspection_download',
+                }">
-                    menuPath: '/project/inspecPoint/inspection',
+                  <i class="el-icon-download" style="
-                  }"
+                          width: 30px;
-                >
+                          height: 30px;
-                  <i
+                          color: #1684fc;
-                    class="el-icon-download"
+                          margin-top: 15px;
-                    style="
+                        "></i>
-                      width: 30px;
+                  <a class="download" target="_blank" :href="$store.state.FILEURL + scope.row.qrCode" download>下载巡检二维码</a>
-                      height: 30px;
-                      color: #1684fc;
-                      margin-top: 15px;
-                    "
-                  ></i>
-                  <a
-                    class="download"
-                    target="_blank"
-                    :href="$store.state.FILEURL + scope.row.qrCode"
-                    download
-                    >下载巡检二维码</a
-                  >
                 </div>
 
-                <div
+                <div class="operationText" @click="deilBtn(scope.row)" v-permission="{
-                  class="operationText"
+                  key: 'inspection_detail',
-                  @click="deilBtn(scope.row)"
+                  menuPath: '/project/inspecPoint/inspection',
-                  v-permission="{
+                }">
-                    key: 'inspection_detail',
+                  <i class="el-icon-tickets" style="color: #8dacfa; font-size: 16px; margin-right: 2px"></i>
-                    menuPath: '/project/inspecPoint/inspection',
-                  }"
-                >
-                  <i
-                    class="el-icon-tickets"
-                    style="color: #8dacfa; font-size: 16px; margin-right: 2px"
-                  ></i>
                   <span>详情</span>
                 </div>
-                <div
+                <div class="operationText" @click="editBtn(scope.row)" v-permission="{
-                  class="operationText"
+                  key: 'inspection_edit',
-                  @click="editBtn(scope.row)"
+                  menuPath: '/project/inspecPoint/inspection',
-                  v-permission="{
+                }">
-                    key: 'inspection_edit',
+                  <img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
-                    menuPath: '/project/inspecPoint/inspection',
-                  }"
-                >
-                  <img
-                    src="@/assets/images/icon-edit.png"
-                    width="15px"
-                    height="15px"
-                  />
                   <span>编辑</span>
                 </div>
-                <div
+                <div @click="toDelete(scope.row)" class="operationText" v-permission="{
-                  @click="toDelete(scope.row)"
+                  key: 'inspection_delete',
-                  class="operationText"
+                  menuPath: '/project/inspecPoint/inspection',
-                  v-permission="{
+                }">
-                    key: 'inspection_delete',
+                  <img src="@/assets/images/icon-delete.png" width="15px" height="15px" />
-                    menuPath: '/project/inspecPoint/inspection',
-                  }"
-                >
-                  <img
-                    src="@/assets/images/icon-delete.png"
-                    width="15px"
-                    height="15px"
-                  />
                   <span>删除</span>
                 </div>
               </div>
@@ -188,112 +91,49 @@
           </el-table-column>
         </el-table>
       </vue-scroll>
-      <el-pagination
+      <el-pagination class="pagerBox" @size-change="handleSizeChange" @current-change="handleCurrentChange"
-        class="pagerBox"
+        :current-page="pageNo" :page-sizes="$store.state.PAGESIZRS" :page-size="pageSize"
-        @size-change="handleSizeChange"
+        layout="total, sizes, prev, pager, next" :total="Number(total)" background></el-pagination>
-        @current-change="handleCurrentChange"
-        :current-page="pageNo"
-        :page-sizes="$store.state.PAGESIZRS"
-        :page-size="pageSize"
-        layout="total, sizes, prev, pager, next"
-        :total="Number(total)"
-        background
-      ></el-pagination>
     </div>
     <!-- 新增巡检点弹框 -->
-    <el-dialog
+    <el-dialog :modal-append-to-body="false" :title="cardDialogTitle" :visible.sync="cardDialog" width="667px"
-      :modal-append-to-body="false"
+      @close="close">
-      :title="cardDialogTitle"
-      :visible.sync="cardDialog"
-      width="667px"
-      @close="close"
-    >
       <div class="dialog_content">
-        <el-form
+        <el-form size="medium" :model="cardForm" ref="cardForm" :rules="cardFormRules" label-width="150px"
-          size="medium"
+          class="dialogFormBox">
-          :model="cardForm"
-          ref="cardForm"
-          :rules="cardFormRules"
-          label-width="150px"
-          class="dialogFormBox"
-        >
           <el-form-item label="巡检点名称：" prop="checkingPointName">
-            <el-input
+            <el-input :disabled="cardDialogTitle == '详情'" v-model="cardForm.checkingPointName"
-              :disabled="cardDialogTitle == '详情'"
+              :placeholder="isAdding ? '请输入' : ''"></el-input>
-              v-model="cardForm.checkingPointName"
-              :placeholder="isAdding ? '请输入' : ''"
-            ></el-input>
           </el-form-item>
           <el-form-item label="巡检点位置：" prop="position">
-            <el-input
+            <el-input :disabled="cardDialogTitle == '详情'" v-model="cardForm.position"
-              :disabled="cardDialogTitle == '详情'"
+              :placeholder="isAdding ? '请输入' : ''"></el-input>
-              v-model="cardForm.position"
-              :placeholder="isAdding ? '请输入' : ''"
-            ></el-input>
           </el-form-item>
           <el-form-item label="所属区域：" prop="qualityRegionId">
-            <el-select
+            <el-select :disabled="cardDialogTitle == '详情'" collapse-tags filterable v-model="cardForm.qualityRegionId"
-              :disabled="cardDialogTitle == '详情'"
+              :placeholder="isAdding ? '请选择' : ''" @change="updateArea">
-              collapse-tags
+              <el-option v-for="item in pointAreaList" :key="item.id" :label="item.regionName" :value="item.id">
-              filterable
-              v-model="cardForm.qualityRegionId"
-              :placeholder="isAdding ? '请选择' : ''"
-              @change="updateArea"
-            >
-              <el-option
-                v-for="item in pointAreaList"
-                :key="item.id"
-                :label="item.regionName"
-                :value="item.id"
-              >
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="责任企业：" prop="enterpriseId">
-            <el-select
+            <el-select :disabled="cardDialogTitle == '详情'" collapse-tags filterable v-model="cardForm.enterpriseId"
-              :disabled="cardDialogTitle == '详情'"
+              multiple :placeholder="isAdding ? '请选择' : ''" @change="changeDutyId">
-              collapse-tags
+              <el-option v-for="item in enterpriseList" :key="item.id" :label="item.enterpriseName" :value="item.id">
-              filterable
-              v-model="cardForm.enterpriseId"
-              multiple
-              :placeholder="isAdding ? '请选择' : ''"
-              @change="changeDutyId"
-            >
-              <el-option
-                v-for="item in enterpriseList"
-                :key="item.id"
-                :label="item.enterpriseName"
-                :value="item.id"
-              >
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="责任人：" prop="inspectUserIds">
-            <el-select
+            <el-select :disabled="cardDialogTitle == '详情'" collapse-tags filterable v-model="cardForm.inspectUserIds"
-              :disabled="cardDialogTitle == '详情'"
+              multiple :placeholder="isAdding ? '请选择' : ''">
-              collapse-tags
+              <el-option v-for="item in chargerList" :key="item.userId + 'inspectUserIds'" :label="item.realName"
-              filterable
+                :value="item.userId">
-              v-model="cardForm.inspectUserIds"
-              multiple
-              :placeholder="isAdding ? '请选择' : ''"
-            >
-              <el-option
-                v-for="item in chargerList"
-                :key="item.userId + 'inspectUserIds'"
-                :label="item.realName"
-                :value="item.userId"
-              >
               </el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="最低巡检时长：" prop="minInspectTime">
-            <el-input-number
+            <el-input-number :disabled="cardDialogTitle == '详情'" class="smallTimeInput" v-model="cardForm.minInspectTime"
-              :disabled="cardDialogTitle == '详情'"
+              :min="0" :controls="false">
-              class="smallTimeInput"
-              v-model="cardForm.minInspectTime"
-              :min="0"
-              :controls="false"
-            >
             </el-input-number>
             <span>(分钟)</span>
           </el-form-item>
@@ -383,64 +223,31 @@
           </el-form-item> -->
 
           <el-form-item label="自定义范围：" prop="standArea">
-            <el-select
+            <el-select :disabled="cardDialogTitle == '详情'" v-model="cardForm.standArea"
-              :disabled="cardDialogTitle == '详情'"
+              :placeholder="isAdding ? '请输入' : ''" @change="drawCircle()">
-              v-model="cardForm.standArea"
+              <el-option v-for="item in options" :key="item" :label="item + $t('message.laborMange.meter')" :value="item">
-              :placeholder="isAdding ? '请输入' : ''"
-              @change="drawCircle()"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item"
-                :label="item + $t('message.laborMange.meter')"
-                :value="item"
-              >
               </el-option>
             </el-select>
           </el-form-item>
           <div class="addrTitle" style="width: calc(100% - 160px):">
             <el-form-item label="区域：" prop="addr">
-              <el-input
+              <el-input :disabled="cardDialogTitle == '详情'" size="medium" v-model="cardForm.addr" id="tipinput"
-                :disabled="cardDialogTitle == '详情'"
+                :placeholder="isAdding ? '请输入' : ''">
-                size="medium"
-                v-model="cardForm.addr"
-                id="tipinput"
-                :placeholder="isAdding ? '请输入' : ''"
-              >
                 <el-button slot="append" icon="el-icon-search"></el-button>
               </el-input>
             </el-form-item>
           </div>
 
-          <div
+          <div id="container" style="width: 580px; height: 400px; background: pink"></div>
-            id="container"
-            style="width: 580px; height: 400px; background: pink"
-          ></div>
           <div class="addrTitle">{{ cardForm.addr }}</div>
           <!-- 动态表单 -->
-          <dynamicForms
+          <dynamicForms ref="dynamicFormsRef" :templateData="formData" :isAdding="isAdding"></dynamicForms>
-            ref="dynamicFormsRef"
-            :templateData="formData"
-            :isAdding="isAdding"
-          ></dynamicForms>
 
           <div id="qrCode" ref="qrCodeDiv"></div>
           <div class="dialog-footer">
-            <el-button
+            <el-button class="cancleBtn" @click="closeEvent" icon="el-icon-circle-close" size="medium">取消</el-button>
-              class="cancleBtn"
+            <el-button v-if="isAdding != false" type="primary" icon="el-icon-circle-check" @click="addCardFn"
-              @click="closeEvent"
+              size="medium">生成巡检二维码</el-button>
-              icon="el-icon-circle-close"
-              size="medium"
-              >取消</el-button
-            >
-            <el-button
-              v-if="isAdding != false"
-              type="primary"
-              icon="el-icon-circle-check"
-              @click="addCardFn"
-              size="medium"
-              >生成巡检二维码</el-button
-            >
           </div>
         </el-form>
       </div>
@@ -688,23 +495,35 @@ export default {
         });
         console.log(1111111, event.obj, pathArr);
       });
-      console.log(11111111111, this.cardForm.addr, that.locationList);
+      // console.log(11111111111, this.cardForm.addr, that.locationList);
-
+      // this.cardForm.addr = "中国广东省深圳市宝安区福海路6161号福永意库";
       if (this.cardForm.addr) {
-        geocoder.getLocation(this.cardForm.addr, function (status, result) {
+        // 113.809842 22.673908
-          if (status === "complete" && result.geocodes.length) {
+        if (this.cardForm.latitude && this.cardForm.longitude) {
-            var lnglat = result.geocodes[0].location;
+          that.locationList = [
-            console.log(result.geocodes[0]);
+            {
-            // var arr = lnglat.split(',')
+              longitude: this.cardForm.longitude,
-            that.locationList = [
+              latitude: this.cardForm.latitude,
-              {
+            },
-                longitude: lnglat.lng,
+          ];
-                latitude: lnglat.lat,
+          that.drawCircle();
-              },
+        } else {
-            ];
+          geocoder.getLocation(this.cardForm.addr, function (status, result) {
-            that.drawCircle();
+            if (status === "complete" && result.geocodes.length) {
-          }
+              var lnglat = result.geocodes[0].location;
-        });
+              console.log(result.geocodes[0]);
+              // var arr = lnglat.split(',')
+              that.locationList = [
+                {
+                  longitude: lnglat.lng,
+                  latitude: lnglat.lat,
+                },
+              ];
+              that.drawCircle();
+            }
+          });
+        }
+
       } else {
         console.log(this.projectDetail.longitude, this.projectDetail.latitude)
         geocoder.getAddress(`${this.projectDetail.longitude},${this.projectDetail.latitude}`, function (status, result) {
@@ -805,10 +624,10 @@ export default {
       this.map.on("click", (e) => {
         console.log(
           "您在 [ " +
-            e.lnglat.getLng() +
+          e.lnglat.getLng() +
-            "," +
+          "," +
-            e.lnglat.getLat() +
+          e.lnglat.getLat() +
-            " ] 的位置单击了地图！"
+          " ] 的位置单击了地图！"
         );
         this.cardForm.latitude = e.lnglat.getLat();
         this.cardForm.longitude = e.lnglat.getLng();
@@ -1211,26 +1030,33 @@ export default {
 .download {
   text-decoration: none;
 }
+
 .smallTimeInput {
   display: inline-block;
   width: 65% !important;
+
   /deep/.el-input__inner {
     width: 100%;
   }
+
   /deep/.el-input {
     width: 100% !important;
   }
 }
+
 .smallInput {
   display: inline-block;
   width: 148px !important;
+
   /deep/.el-input__inner {
     width: 148px;
   }
+
   /deep/.el-input {
     width: 100% !important;
   }
 }
+
 ::v-deep .el-input__inner {
   height: 30px !important;
 }
@@ -1239,16 +1065,19 @@ export default {
 .el-range-editor--medium .el-range__close-icon {
   line-height: 10px;
 }
+
 ::v-deep .el-select__caret {
   line-height: 36px;
 }
 
 .dialogFormBox {
   width: 580px;
+
   /deep/.el-select .el-tag {
     display: flex;
     align-items: center;
   }
+
   /deep/.el-select .el-tag .el-select__tags-text {
     display: inline-block;
     width: 100%;
@@ -1256,13 +1085,16 @@ export default {
     overflow: hidden;
   }
 }
+
 .addrTitle {
   font-size: 16px;
   line-height: 56px;
 }
+
 ::v-deep .el-tag {
   max-width: 200px;
 }
+
 // 图片预览的关闭按钮
 ::v-deep .el-image-viewer__btn.el-image-viewer__close {
   color: white;