v1.9 优化巡检明细无法点击查看按钮

wuxw
1 parent 27a95e94
Showing 4 changed files with 102 additions and 119 deletions
src/api/inspection/inspectionTaskDetailsApi.js
src/components/system/ViewMap.vue
src/i18n/commonLang.js
src/views/inspection/inspectionTaskDetailsList.vue
@@ -69,11 +69,7 @@ export function listInspectionRoutes(params) {
       params
     }).then(response => {
       const res = response.data
-      if (res.code === 0) {
         resolve(res)
-      } else {
-        reject(new Error(res.msg || '获取巡检路线列表失败'))
-      }
     }).catch(error => {
       reject(error)
     })
@@ -89,11 +85,7 @@ export function listInspectionPoints(params) {
       params
     }).then(response => {
       const res = response.data
-      if (res.code === 0) {
         resolve(res)
-      } else {
-        reject(new Error(res.msg || '获取巡检点列表失败'))
-      }
     }).catch(error => {
       reject(error)
     })
 <template>
-    <div id="viewMap" :style="{ visibility: viewMapInfo.showMap }">
-      <div class="map-container">
-        <div id="qqmapcontainer" style="width: 1200px; height: 400px; background-color: antiquewhite;"></div>
-        <i class="el-icon-close close-icon" @click="closeMap" />
-      </div>
+  <el-dialog
+    :title="$t('common.map')"
+    :visible.sync="viewMapInfo.showMap"
+    width="80%"
+    :before-close="closeMap"
+    :close-on-click-modal="false"
+    :close-on-press-escape="true"
+  >
+    <div class="map-container">
+      <div id="qqmapcontainer" style="width: 100%; height: 500px; background-color: antiquewhite;"></div>
     </div>
-  </template>
-  
-  <script>
-  export default {
-    name: 'ViewMap',
-    data() {
-      return {
-        viewMapInfo: {
-          lat: '',
-          lng: '',
-          showMap: 'hidden',
-          map: null
-        }
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'ViewMap',
+  data() {
+    return {
+      viewMapInfo: {
+        lat: '',
+        lng: '',
+        showMap: false,
+        map: null
       }
-    },
-    methods: {
-      open(param) {
+    }
+  },
+  methods: {
+    open(param) {
+      this.viewMapInfo.showMap = true
+
+      if (param.lng && param.lat) {
         const lngLat = this.wgs84togcj02(param.lng, param.lat)
         this.viewMapInfo.lat = lngLat.lat
         this.viewMapInfo.lng = lngLat.lon
-        this.viewMapInfo.showMap = 'visible'
-        this.launchIntoMapFullscreen()
-        this.$nextTick(() => this.initMap())
-      },
-      initMap() {
-        const center = new window.TMap.LatLng(this.viewMapInfo.lat, this.viewMapInfo.lng)
-        const container = document.getElementById('qqmapcontainer')
-        this.viewMapInfo.map = new window.TMap.Map(container, {
-          center,
-          zoom: 17.2,
-          viewMode: '2D'
-        })
-        new window.TMap.MultiMarker({
-          id: 'marker-layer',
-          map: this.viewMapInfo.map,
-          styles: {
-            marker: new window.TMap.MarkerStyle({
-              width: 25,
-              height: 35,
-              anchor: { x: 16, y: 32 },
-              src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
-            })
-          },
-          geometries: [{
-            id: 'demo',
-            styleId: 'marker',
-            position: new window.TMap.LatLng(this.viewMapInfo.lat, this.viewMapInfo.lng),
-            properties: { title: 'marker' }
-          }]
-        })
-      },
-      closeMap() {
-        this.exitMapFullscreen()
-        this.viewMapInfo.showMap = 'hidden'
+      } else {
+        this.viewMapInfo.lat = 36.72
+        this.viewMapInfo.lng = 100.985
+      }
+
+      this.$nextTick(() => this.initMap())
+    },
+    initMap() {
+      const center = new window.TMap.LatLng(this.viewMapInfo.lat, this.viewMapInfo.lng)
+      const container = document.getElementById('qqmapcontainer')
+      this.viewMapInfo.map = new window.TMap.Map(container, {
+        center,
+        zoom: 17.2,
+        viewMode: '2D'
+      })
+      new window.TMap.MultiMarker({
+        id: 'marker-layer',
+        map: this.viewMapInfo.map,
+        styles: {
+          marker: new window.TMap.MarkerStyle({
+            width: 25,
+            height: 35,
+            anchor: { x: 16, y: 32 },
+            src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
+          })
+        },
+        geometries: [{
+          id: 'demo',
+          styleId: 'marker',
+          position: new window.TMap.LatLng(this.viewMapInfo.lat, this.viewMapInfo.lng),
+          properties: { title: 'marker' }
+        }]
+      })
+    },
+    closeMap() {
+      this.viewMapInfo.showMap = false
+      if (this.viewMapInfo.map) {
         this.viewMapInfo.map.destroy()
-      },
-      launchIntoMapFullscreen() {
-        const full = document.getElementById('viewMap')
-        if (full.requestFullscreen) full.requestFullscreen()
-        else if (full.mozRequestFullScreen) full.mozRequestFullScreen()
-        else if (full.webkitRequestFullscreen) full.webkitRequestFullscreen()
-        else if (full.msRequestFullscreen) full.msRequestFullscreen()
-      },
-      exitMapFullscreen() {
-        if (document.exitFullscreen) document.exitFullscreen()
-        else if (document.mozCancelFullScreen) document.mozCancelFullScreen()
-        else if (document.webkitExitFullscreen) document.webkitExitFullscreen()
-      },
-      wgs84togcj02(lng, lat) {
-        // Placeholder for coordinate conversion
-        return { lon: lng, lat }
+        this.viewMapInfo.map = null
       }
+    },
+    wgs84togcj02(lng, lat) {
+      // Placeholder for coordinate conversion
+      return { lon: lng, lat }
     }
   }
-  </script>
-  
-  <style lang="scss" scoped>
-  #viewMap {
-    .map-container {
-      position: fixed;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      background-color: #fff;
-    }
-    .close-icon {
-      position: absolute;
-      right: 20px;
-      top: 20px;
-      font-size: 20px;
-      color: red;
-      cursor: pointer;
-    }
-  }
-  </style>
 \ No newline at end of file
+}
+</script>
+
+<style lang="scss" scoped>
+.map-container {
+  width: 100%;
+  height: 500px;
+}
+</style>
 \ No newline at end of file
@@ -80,6 +80,7 @@ export const messages = {
         friday: 'Friday',
         saturday: 'Saturday',
         sunday: 'Sunday',
+        map:'Map'
       }
     },
     zh: {
@@ -162,7 +163,8 @@ export const messages = {
         thursday:'星期四',
         friday:'星期五',
         saturday:'星期六',
-        sunday:'星期日'
+        sunday:'星期日',
+        map:'地图'
       }
     }
   } 
 \ No newline at end of file
@@ -43,22 +43,22 @@
         </el-row>
  
         <div v-show="inspectionTaskDetailManageInfo.moreCondition">
-          <el-row :gutter="20">
-            <el-col :span="8">
+          <el-row :gutter="20" class="margin-top">
+            <el-col :span="6">
               <el-select v-model="inspectionTaskDetailManageInfo.conditions.inspectionPlanId"
                 :placeholder="$t('inspectionTaskDetails.selectInspectionPlan')" style="width:100%">
                 <el-option v-for="(item, index) in inspectionTaskDetailManageInfo.inspectionPlanList" :key="index"
                   :label="item.inspectionPlanName" :value="item.inspectionPlanId"></el-option>
               </el-select>
             </el-col>
-            <el-col :span="8">
+            <el-col :span="6">
               <el-select v-model="inspectionTaskDetailManageInfo.conditions.inspectionRouteId"
                 :placeholder="$t('inspectionTaskDetails.selectInspectionRoute')" style="width:100%">
                 <el-option v-for="(item, index) in inspectionTaskDetailManageInfo.inspectionRouteList" :key="index"
                   :label="item.routeName" :value="item.inspectionRouteId"></el-option>
               </el-select>
             </el-col>
-            <el-col :span="8">
+            <el-col :span="6">
               <el-select v-model="inspectionTaskDetailManageInfo.conditions.inspectionId"
                 :placeholder="$t('inspectionTaskDetails.selectInspectionPoint')" style="width:100%">
                 <el-option v-for="(item, index) in inspectionTaskDetailManageInfo.inspectionPointList" :key="index"
@@ -68,20 +68,20 @@
           </el-row>
  
           <el-row :gutter="20" class="margin-top">
-            <el-col :span="8">
+            <el-col :span="6">
               <div class="form-group">
                 <el-input :placeholder="$t('inspectionTaskDetails.inputTaskDetailId')"
                   v-model="inspectionTaskDetailManageInfo.conditions.taskDetailId" clearable></el-input>
               </div>
             </el-col>
-            <el-col :span="8">
+            <el-col :span="6">
               <el-select v-model="inspectionTaskDetailManageInfo.conditions.inspectionState"
                 :placeholder="$t('inspectionTaskDetails.selectSignStatus')" style="width:100%">
                 <el-option v-for="(item, index) in inspectionTaskDetailManageInfo.inspectionStateTypes" :key="index"
                   :label="item.name" :value="item.statusCd"></el-option>
               </el-select>
             </el-col>
-            <el-col :span="8">
+            <el-col :span="6">
               <el-select v-model="inspectionTaskDetailManageInfo.conditions.state"
                 :placeholder="$t('inspectionTaskDetails.selectInspectionPointStatus')" style="width:100%">
                 <el-option v-for="(item, index) in inspectionTaskDetailManageInfo.stateTypes" :key="index"
@@ -90,15 +90,15 @@
             </el-col>
           </el-row>
  
-          <el-row :gutter="20">
-            <el-col :span="8">
+          <el-row :gutter="20" class="margin-top">
+            <el-col :span="6">
               <el-select v-model="inspectionTaskDetailManageInfo.conditions.taskState"
                 :placeholder="$t('inspectionTaskDetails.selectTaskStatus')" style="width:100%">
                 <el-option v-for="(item, index) in inspectionTaskDetailManageInfo.taskStates" :key="index"
                   :label="item.name" :value="item.statusCd"></el-option>
               </el-select>
             </el-col>
-            <el-col :span="8">
+            <el-col :span="6">
               <el-select v-model="inspectionTaskDetailManageInfo.conditions.patrolType"
                 :placeholder="$t('inspectionTaskDetails.selectPatrolStatus')" style="width:100%">
                 <el-option v-for="(item, index) in inspectionTaskDetailManageInfo.patrolTypes" :key="index"
@@ -228,7 +228,7 @@
 </template>
  
 <script>
-import { listInspectionTaskDetails, exportInspectionTaskDetails } from '@/api/inspection/inspectionTaskDetailsApi'
+import { listInspectionTaskDetails, exportInspectionTaskDetails,listInspectionPlans,listInspectionRoutes,listInspectionPoints } from '@/api/inspection/inspectionTaskDetailsApi'
 import { getDict } from '@/api/community/communityApi'
 import { getCommunityId } from '@/api/community/communityApi'
 import ViewMap from '@/components/system/ViewMap'
@@ -334,8 +334,8 @@ export default {
           page: 1,
           row: 200
         }
-        const res = await listInspectionTaskDetails(params)
-        this.inspectionTaskDetailManageInfo.inspectionPlanList = res.data.data
+        const res = await listInspectionPlans(params)
+        this.inspectionTaskDetailManageInfo.inspectionPlanList = res.data
       } catch (error) {
         console.error('获取巡检计划列表失败:', error)
       }
@@ -348,8 +348,8 @@ export default {
           page: 1,
           row: 200
         }
-        const res = await listInspectionTaskDetails(params)
-        this.inspectionTaskDetailManageInfo.inspectionRouteList = res.data.inspectionRoutes
+        const res = await listInspectionRoutes(params)
+        this.inspectionTaskDetailManageInfo.inspectionRouteList = res.inspectionRoutes
       } catch (error) {
         console.error('获取巡检路线列表失败:', error)
       }
@@ -362,8 +362,8 @@ export default {
           page: 1,
           row: 200
         }
-        const res = await listInspectionTaskDetails(params)
-        this.inspectionTaskDetailManageInfo.inspectionPointList = res.data.inspectionPoints
+        const res = await listInspectionPoints(params)
+        this.inspectionTaskDetailManageInfo.inspectionPointList = res.inspectionPoints
       } catch (error) {
         console.error('获取巡检点列表失败:', error)
       }
@@ -414,7 +414,7 @@ export default {
     },
  
     openMap(lat, lng) {
-      this.$refs.viewMap.open(lat, lng)
+      this.$refs.viewMap.open({lat: lat, lng: lng})
     },
  
     async exportExcel() {