提交： 项目管理 详情也添加 项目地址 地图展示效果

src/views/iot/project/profileV2/details.vue

@@ -54,9 +54,67 @@
             <el-descriptions-item label="联系人3：">
               {{ infoData["contacts3"] || "--" }}
             </el-descriptions-item>
-            <el-descriptions-item label="项目地址：">{{
+            <el-descriptions-item label="项目地址：">
-              infoData.projectAddress
+              <div class="e-descriptions-address">
-            }}</el-descriptions-item>
+                <span class="e-address-span" :title="infoData.projectAddress">
+                  {{ infoData.projectAddress }}
+                </span>
+                <i
+                  class="el-icon-map-location e-i-custom"
+                  @click="mapClick"
+                ></i>
+                <el-popover
+                  placement="bottom"
+                  title="项目地址坐标"
+                  width="1080"
+                  trigger="manual"
+                  v-model="visible"
+                  style="top: 30px; left: -85%; position: relative"
+                >
+                  <!-- 地图模块选择和设置 -->
+                  <slot>
+                    <el-row>
+                      <el-col :span="10">
+                        <span>经度：{{ mapForm.lng }}</span>
+                      </el-col>
+                      <el-col :span="10">
+                        <span>纬度：{{ mapForm.lat }}</span>
+                      </el-col>
+                      <!-- <el-col :span="10">
+                        <span>地址：{{ mapForm.address }}</span>
+                      </el-col> -->
+                    </el-row>
+
+                    <shop-location
+                      v-if="visible === true"
+                      style="height: 450px; margin-top: 10px"
+                      :mapCenter="mapCenter"
+                      :draggable="false"
+                      @mapEvent="mapEvent"
+                      :zoom="zoom"
+                    />
+
+                    <div
+                      style="
+                        width: 100%;
+                        height: 35px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: flex-end;
+                        margin-top: 5px;
+                      "
+                    >
+                      <el-button
+                        type="primary"
+                        size="mini"
+                        @click="visible = false"
+                        >确 定</el-button
+                      >
+                    </div>
+                  </slot>
+                </el-popover>
+              </div>
+            </el-descriptions-item>
           </el-descriptions>
         </div>
         <div class="info-divider"></div>
@@ -73,9 +131,11 @@
         <e-nav-menu
           v-model="activeType"
           :activeList="activeList"
-          @eventShrink="(data) => {
+          @eventShrink="
-            isShrink = data ? true : false
+            (data) => {
-          }"
+              isShrink = data ? true : false;
+            }
+          "
           @input="
             (data) => {
               activeName = data['template'];
@@ -83,7 +143,10 @@
             }
           "
         />
-        <div class="main-block" :style="isShrink ? 'width: 100%;':'width: calc(100% - 150px);'">
+        <div
+          class="main-block"
+          :style="isShrink ? 'width: 100%;' : 'width: calc(100% - 150px);'"
+        >
           <component
             :is="activeName"
             :projectInfo="infoData"
@@ -150,6 +213,9 @@ import EDeviceSwitchWarning from "./SafetyTemplate/EDeviceSwitchWarning";
 import EElectricity from "./EnergyManage/EElectricity";
 import EEnergyLoad from "./EnergyManage/EEnergyLoad";
 
+import { initMap, gjzCode } from "@/utils/latlngFromAddress";
+import ShopLocation from "@/components/Amap/components/shopLocation/index";
+
 export default {
   name: "projectDetailV2",
   components: {
@@ -171,6 +237,7 @@ export default {
     EDeviceSwitchWarning,
     EElectricity,
     EEnergyLoad,
+    ShopLocation,
   },
   props: {
     sourceId: {
@@ -180,6 +247,16 @@ export default {
   },
   data() {
     return {
+      // 地图 弹窗
+      visible: false,
+      BMap: null,
+      mapCenter: {
+        lng: 119.459889,
+        lat: 25.98974,
+      },
+      zoom: 15,
+      mapForm: {},
+      // 行政划分树选项
       stateSourceId: null,
       resultInfo: {},
       activeName: "EObjectContainer",
@@ -338,6 +415,7 @@ export default {
     },
     stateSourceId(val) {
       this.init();
+      this.visible = false;
     },
     opened: {
       handler() {
@@ -363,6 +441,31 @@ export default {
     },
   },
   methods: {
+    mapEvent(data) {
+      this.mapForm.lng = data.lng;
+      this.mapForm.lat = data.lat;
+      this.mapForm.address = data.address;
+      this.$forceUpdate();
+    },
+    // 使用地图方式定位
+    mapClick() {
+      if (this.infoData.projectLng && this.infoData.projectLat) {
+        this.mapCenter.lng = this.infoData.projectLng;
+        this.mapCenter.lat = this.infoData.projectLat;
+        this.mapForm.lng = this.infoData.projectLng;
+        this.mapForm.lat = this.infoData.projectLat;
+        this.mapForm.address = this.infoData.projectAddress;
+      } else {
+        this.mapCenter = {
+          lng: 119.459889,
+          lat: 25.98974,
+        };
+        this.mapForm.lng = 119.459889;
+        this.mapForm.lat = 25.98974;
+        this.mapForm.address = "";
+      }
+      this.visible = !this.visible;
+    },
     init() {
       this.getInfoByProjectId();
       this.getProjectCount();
@@ -647,5 +750,24 @@ export default {
     color: #1890ff !important;
     font-size: 20px !important;
   }
+  .e-descriptions-address {
+    display: flex;
+    width: 100%;
+    .e-address-span {
+      display: block;
+      max-width: calc(500px - 100px);
+      display: block;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+  }
+  .e-i-custom {
+    margin-left: 5px;
+    margin-top: 3px;
+  }
+  .e-i-custom:hover {
+    color: #1890ff;
+  }
 }
 </style>

src/views/iot/video/site/index.vue

@@ -470,9 +470,9 @@ import { listSite, getSite, delSite, addSite, updateSite } from "@/api/iot/site"
 import {
   listProject
 } from "@/api/iot/project";
-import { initMap, gjzCode } from "@/utils/latlngFromAddress";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { initMap, gjzCode } from "@/utils/latlngFromAddress";
 import ShopLocation from "@/components/Amap/components/shopLocation/index";
 import SelectTableWrap from "@/components/SelectTable/index";
 import { serviceApiDesc } from '@/config/dvr.config'
@@ -922,7 +922,6 @@ export default {
     },
     /** 提交按钮 */
     submitForm: function () {
-      console.log(this.form);
       this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.recordId != undefined) {