地图点位和文件预览

.env.development

@@ -4,7 +4,7 @@ ENV = 'development'
 # base api
 VUE_APP_BASE_API = '/dashboard'
 
-VUE_APP_BASE_API2 = 'http://192.168.0.108:9027'
+VUE_APP_BASE_API2 = 'http://192.168.0.125:9027'
 
 VUE_APP_BASE_API3 = 'http://39.101.188.84:9027'
 

src/api/zongzhi/manage.js

@@ -40,4 +40,19 @@ export function zhuanxiangInfo(id) {
     url: "/zongzhi/zhuanxiang/" + id,
     method: "get",
   });
+}
+
+// 举报事件列表   可传  pageNum pageSize
+export function reportList() {
+  return request({
+    url: "/zongzhi/managescreen/map",
+    method: "get",
+  });
+}
+// 举报事件详情   
+export function reportInfo(id) {
+  return request({
+    url: "/zongzhi/report/" + id,
+    method: "get",
+  });
 }

src/views/privateOrder/ecosphere/components/componentLeft.vue

@@ -3,7 +3,7 @@
  * @Author: kery.chen
  * @Description: 总体概览左侧
  * @Date: 2021-11-30 11:08:50
- * @LastEditTime: 2023-08-22 17:20:02
+ * @LastEditTime: 2023-08-23 17:15:27
  * @FilePath     : \\tcingiocpro\\src\\views\\privateOrder\\ecosphere\\components\\componentLeft.vue
 -->
 <template>
@@ -330,7 +330,7 @@
       >
         <div
           v-if="fileExtension === 'docx' || fileExtension === 'doc'"
-          ref="file"
+          ref="fileDoc"
           class="file-content"
         ></div>
         <div v-if="fileExtension === 'pdf'" class="file-content">
@@ -644,13 +644,13 @@ export default {
     this.inventoryChange() // 三份清单自动切换
     this.getDynamicData() // 工作动态信息获取
     
-    this.time2 = setInterval(() => { // 安全隐患列表
-      if (this.dynamicList.length >= this.dongtaiTotal) {
-        clearInterval(this.time2)
-      } else {
-        this.getDynamicData()
-      }
-    }, 500)
+    // this.time2 = setInterval(() => { // 安全隐患列表
+    //   if (this.dynamicList.length >= this.dongtaiTotal) {
+    //     clearInterval(this.time2)
+    //   } else {
+    //     this.getDynamicData()
+    //   }
+    // }, 500)
   },
   methods: {
     // 工作动态信息获取
@@ -1034,16 +1034,16 @@ export default {
       this.currentPage = 1
       this.pageSize = 10
       let data = await dongtaiInfo(item.id)
-      console.log(data)
+      // console.log(data)
       this.tableHeader= ['材料名称']
       this.dialogTitle = data.data.materialsName
       const fileName = data.data.materialsFileName.split(',')
       const fileUrl = data.data.materialsFileUrl.split(',')
-      console.log(fileName)
+      if (fileUrl.length < 1 || fileName.length < 1) return
+      // console.log(fileName)
       if (fileName.length > 0) {
-        // TODO:缺截取点前面的字符
         fileName.forEach((item, index) => {
-          this.tableData.push({ '材料名称': item,'材料路径':fileUrl[index] })
+          this.tableData.push({ '材料名称': item.split('.')[0],'材料路径':fileUrl[index] })
         })
         this.networkPlatformDataTwo()
       } else {
@@ -1074,36 +1074,55 @@ export default {
     },
     rowClick(row) {
       console.log(row)
-      this.dialogDetails = true
-      // console.log(row)
+      // this.dialogDetails = true
+      console.log(process.env.VUE_APP_BASE_API2 + row['材料路径'])
       this.fileExtension = row['材料路径'].substring(
         row['材料路径'].lastIndexOf('.') + 1
       )
-      console.log('fileExtension', this.fileExtension)
-      if (['png', 'jpg', 'jpeg'].includes(row.材料路径.substring(row.材料路径.lastIndexOf('.') + 1))) {
-        this.imgSrc = `${process.env.NODE_ENV === 'production' ? window._CONFIG['fileNginxUrl'] : '/fileApi'}${row['材料路径']}`
-        this.dialogImg = true
-      } else if (this.fileExtension === 'docx' || this.fileExtension === 'doc') {
+      if (this.fileExtension == "pdf") {
+        this.getNumPages(`${process.env.NODE_ENV === 'production' ? window._CONFIG['fileNginxUrl'] : process.env.VUE_APP_BASE_API2}${row['材料路径']}`)
+      } else if (
+        this.fileExtension === "docx" ||
+        this.fileExtension === "doc"
+      ) {
         axios({
-          method: 'get',
-          responseType: 'blob', // 设置响应文件格式
-          url: `${
-            process.env.NODE_ENV === 'production'
-              ? window._CONFIG['fileNginxUrl']
-              : '/fileApi'
-          }${row['材料路径']}`
+          method: "get",
+          responseType: "blob", // 设置响应文件格式
+          url: process.env.VUE_APP_BASE_API2 + row['材料路径'],
         }).then(({ data }) => {
+          console.log(data,'docx,doc')
           if (data) {
-            this.dialogDetails = true
+            this.dialogDetails = true;
             this.$nextTick(() => {
-              docx.renderAsync(data, this.$refs.file) // 渲染到页面预览
-            })
+              docx.renderAsync(data, this.$refs.fileDoc); // 渲染到页面预览
+            });
           }
-        })
-      } else if (this.fileExtension === 'pdf') {
-        console.log('window._CONFIG[fileNginxUrl]',window._CONFIG['fileNginxUrl'])
-        this.getNumPages(`${process.env.NODE_ENV === 'production' ? window._CONFIG['fileNginxUrl'] : '/fileApi'}${row['材料路径']}`)
+        });
       }
+      // if (['png', 'jpg', 'jpeg'].includes(row.材料路径.substring(row.材料路径.lastIndexOf('.') + 1))) {
+      //   this.imgSrc = `${process.env.NODE_ENV === 'production' ? window._CONFIG['fileNginxUrl'] : '/fileApi'}${row['材料路径']}`
+      //   this.dialogImg = true
+      // } else if (this.fileExtension === 'docx' || this.fileExtension === 'doc') {
+      //   axios({
+      //     method: 'get',
+      //     responseType: 'blob', // 设置响应文件格式
+      //     url: `${
+      //       process.env.NODE_ENV === 'production'
+      //         ? window._CONFIG['fileNginxUrl']
+      //         : process.env.VUE_APP_BASE_API3
+      //     }${row['材料路径']}`
+      //   }).then(({ data }) => {
+      //     if (data) {
+      //       this.dialogDetails = true
+      //       this.$nextTick(() => {
+      //         docx.renderAsync(data, this.$refs.file) // 渲染到页面预览
+      //       })
+      //     }
+      //   })
+      // } else if (this.fileExtension === 'pdf') {
+      //   console.log('window._CONFIG[fileNginxUrl]',window._CONFIG['fileNginxUrl'])
+      //   this.getNumPages(`${process.env.NODE_ENV === 'production' ? window._CONFIG['fileNginxUrl'] : '/fileApi'}${row['材料路径']}`)
+      // }
     },
     getNumPages(url) {
       // console.log(url)

src/views/privateOrder/ecosphere/components/componentRight.vue

@@ -3,7 +3,7 @@
  * @Author: kery.chen
  * @Description: 总体概览右侧
  * @Date: 2021-11-30 11:08:50
- * @LastEditTime: 2023-08-22 14:16:17
+ * @LastEditTime: 2023-08-23 16:39:26
  * @FilePath     : \\tcingiocpro\\src\\views\\privateOrder\\ecosphere\\components\\componentRight.vue
 -->
 <template>
@@ -106,6 +106,7 @@
                 v-for="(item, index) in qlzxdtList"
                 :key="index"
                 style="width: 458px"
+                class="zxxd-item"
               >
                 <div class="img-item" :data-curData="index">
                   <div
@@ -369,7 +370,7 @@ export default {
     //  行动数据统计
     async managescreenData(){
       let res = await managescreen()
-      let data = res.data
+      let data = res.data || []
       let arr1 = [],arr2 = []
       data.map((item)=>{
         item.zhuanxiangTime = this.getDate(item.zhuanxiangTime)
@@ -858,6 +859,9 @@ export default {
       width: 3350px;
       display: flex;
       justify-content: space-around;
+      .zxxd-item {
+        margin-right: 20px;
+      }
       .img-item {
         margin-right: 20px;
         width: 457px;

src/views/privateOrder/ecosphere/components/componentmapbox.vue

@@ -70,10 +70,12 @@
 <script>
 import mapboxgl from 'mapbox-gl'
 import 'mapbox-gl/dist/mapbox-gl.css'
+import { reportList, reportInfo } from '@/api/zongzhi/manage'
 export default {
   data() {
     return {
       isShowDialog: false,
+      // 展示的内容
       currentMsg: {
         jbdx: '电子科技有限公司',
         szbh: 'SZ2023',
@@ -91,7 +93,18 @@ export default {
       ]
     }
   },
-  mounted() {
+  async mounted() {
+    let data = await reportList()
+    let arr = []
+    data.data.map((item)=>{
+      let obj = {}
+      obj.id = item.id
+      obj.lng = item.longitude
+      obj.lat = item.latitude
+      obj.title = item.jbdx
+      arr.push(obj)
+    })
+    this.pointList = arr
     const _this = this
     mapboxgl.accessToken = 'pk.eyJ1Ijoic2hhcmVhbGV4IiwiYSI6ImNsaXNhZmRjbTFhbnczZmxib3h1OW05YXYifQ.PhlKv60ar3K359d8x2yBPw'
     const map = new mapboxgl.Map({
@@ -116,7 +129,16 @@ export default {
           .setLngLat([item.lng, item.lat])
           .addTo(map)
         el.addEventListener('click', () => {
-          _this.isShowDialog = true
+          // 点击事件里去修改内容
+          reportInfo(item.id).then(res=>{
+            let { jbdx, jbbh, jbTime, address, content } = res.data
+            _this.currentMsg.jbdx = jbdx
+            _this.currentMsg.szbh = jbbh
+            _this.currentMsg.jbsj = jbTime
+            _this.currentMsg.dz = address
+            _this.currentMsg.jbnr = content
+            _this.isShowDialog = true
+          })
         })
       })
       map.addLayer({