Merge branch 'Lvtianfang' of http://39.101.188.84:7000/suzhou-jichuang-lanhai/mudu-vx

src/assets/css/all-style.css

@@ -220,8 +220,8 @@
   position: absolute;
   width: 0.3rem;
   height: 0.3rem;
-  border-radius: 0.3rem;
-  background-color: #2487ff;
+  /* border-radius: 0.3rem;
+  background-color: #2487ff; */
   left: calc(50% - 0.15rem);
   top: calc(50% - 0.15rem);
   z-index: 1000;

src/router/vxEwm.js

@@ -22,6 +22,12 @@ let routes = [
         name: '企业详情',
         component: () => import('@/views/vxEwm/enterprise/info.vue'),
       },
+      {
+        path: '/enterpriseData/check/info/:id',
+        name: '巡检详情',
+        component: () =>
+          import('@/views/vxEwm/enterprise/components/firmInfo.vue'),
+      },
     ],
   },
 ]

src/views/vxEwm/enterprise/components/firmInfo.vue

@@ -0,0 +1,278 @@
+<template>
+  <div class="firm-info">
+    <div class="info-content">
+          <div class="list-item">
+            <div class="item-title">巡查单位</div>
+            <div class="item-value">{{ checksinfo.enterpriseName }}</div>
+          </div>
+          <van-divider />
+          <div class="list-item">
+            <div class="item-title">巡查类别</div>
+            <div class="item-value">{{ checksinfo.typeName }}</div>
+          </div>
+          <van-divider />
+          <div class="list-item">
+            <div class="item-title">巡查内容</div>
+            <div class="item-value">{{ checksinfo.content }}</div>
+          </div>
+          <van-divider />
+          <div class="list-item">
+            <div class="item-title">打卡人</div>
+            <div class="item-value">{{ checksinfo.addUserName }}</div>
+          </div>
+          <van-divider />
+          <div class="list-item">
+            <div class="item-title">打卡位置</div>
+            <div class="item-value">{{ checksinfo.inAddress }}</div>
+          </div>
+          <div class="cell-map" id="show-maps">
+            <img class="cell-map-point" src="@/assets/image/vxEwm/location.png" v-if="showPosition"></img>
+          </div>
+          <van-divider />
+          <div class="list-item">
+            <div class="item-title">打卡时间</div>
+            <div class="item-value">{{ checksinfo.checkDate }}</div>
+          </div>
+          <van-divider />
+          <div class="list-item" v-show="isShow2">
+            <div class="item-title">现场图片</div>
+            <div class="item-value">
+              <van-image
+                fit="cover"
+                :src="filePath + item.src"
+                v-for="(item, index) in attachmentImgList"
+                :key="index"
+                @click="pic(index)"
+              />
+            </div>
+          </div>
+          <van-divider />
+          <div class="list-item-two" v-show="isShow1">
+            <div class="item-title">隐患上报记录</div>
+            <div class="item-two-value" v-for="(item, index) in troublelist" :key="index">
+              <div class="two-value-wai-bg">
+                <div class="two-value-nei-bg">
+                  <span>{{ index + 1 }}</span>
+                </div>
+                <div class="value-title">{{ item.description }}</div>
+              </div>
+            </div>
+          </div>
+          <van-divider />
+        </div>
+  </div>
+</template>
+<script>
+import L from 'leaflet'
+import 'proj4'
+import 'proj4leaflet'
+import '@/util/leaflet.ChineseTmsProviders.js'
+import '@/util/leaflet.mapCorrection.min.js'
+
+import * as api from '@/api/api2.js'
+import { ImagePreview, Toast } from 'vant'
+export default {
+  data() {
+    return {
+      filePath: process.env.VUE_APP_FILE_HOST,
+      globalMap:null,
+      // 隐患相关
+      isShow1: true,
+      isShow2: true,
+      checksinfo: [],
+      attachmentImgList: [],
+      imagesPre: [],
+      troublelist: [],
+      showPosition: false,
+    }
+  },
+  mounted(){
+    this.$nextTick(()=>{
+      this.initMap()
+      this.initData()
+    })
+  },
+  methods:{
+    initMap() {
+      // 初始化地图
+      this.globalMap = L.map('show-maps', {
+        crs: L.CRS.Baidu,
+        center: [31.2672, 120.491], // 地图中心[纬度，经度]
+        zoom: 16, // 地图层级
+        maxZoom: 19,
+        minZoom: 12,
+        zoomControl: false, // 放大缩小按钮
+        attributionControl: false, // 右下角leaflet图标
+        doubleClickZoom: false, // 双击放大
+        dragging: false, // 鼠标拖拽
+        scrollWheelZoom: false, // 滚轮放大
+        tap: false,
+        touchZoom: false,
+      })
+
+      L.tileLayer
+        .chinaProvider('Baidu.Normal.Map', {
+          maxZoom: 19,
+          minZoom: 5,
+        })
+        .addTo(this.globalMap)
+    },
+    // 初始化数据
+    initData() {
+      let id = this.$route.params.id
+      Toast.loading({
+        message: '加载中...',
+        duration: 0,
+        forbidClick: true,
+      })
+      api.getChecksinfo(id).then((res) => {
+        // console.log(res)
+        this.checksinfo = res.data
+
+        // 显示地图
+        var longitude = Number(res.data.longitude)
+        var latitude = Number(res.data.latitude)
+        this.showPosition = true
+        this.globalMap.setView([latitude, longitude], 16)
+
+        if (!res.data.inImgRelationID) {
+          this.isShow2 = false
+        } else {
+          this.getImageIdData(res.data.inImgRelationID)
+        }
+        Toast.clear()
+      })
+
+      // 获取隐患记录
+      let params = {
+        checksID: id,
+      }
+      api
+        .getTroublelist(params)
+        .then((res) => {
+          if (res.count == 0) {
+            this.isShow1 = false
+            return
+          }
+          // console.log('checksID获取隐患记录', res)
+          this.troublelist = res.data
+        })
+        .catch((err) => {
+          this.isShow1 = false
+        })
+    },
+    // 根据ID请求图片
+    getImageIdData(id) {
+      api.getAttachment(id).then((res) => {
+        // console.log('这是imgList', res)
+        if (res.code == 400) {
+          this.isShow2 = false
+          return
+        }
+        this.attachmentImgList = res.data
+        if (res.data != undefined) {
+          res.data.map((d) => {
+            this.imagesPre.push(process.env.VUE_APP_FILE_HOST + d.src)
+          })
+        }
+      })
+    },
+    // 点击预览图
+    pic(index) {
+      ImagePreview({
+        images: this.imagesPre,
+        startPosition: index,
+      })
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.firm-info {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  .info-content {
+    background: #FFFFFF;
+    border-radius: 0.24rem;
+    padding: 0.2rem 0;
+    height: calc(100% - 0.1rem);
+    overflow-y: auto;
+    .list-item {
+      display: flex;
+      // align-items: center;
+      margin-bottom: 20px;
+      .item-title {
+        width: 1.8rem;
+        flex-wrap: nowrap;
+        font-family: PingFang-SC, PingFang-SC;
+        font-weight: 500;
+        font-size: 0.21rem;
+        color: #666666;
+        text-align: left;
+        // line-height: 0.8rem;
+      }
+      .item-value {
+        flex: 1;
+        font-family: PingFang-SC, PingFang-SC;
+        font-weight: bold;
+        font-size: 0.22rem;
+        color: #333333;
+        text-align: left;
+        // line-height: 0.8rem;
+      }
+    }
+    .list-item-two {
+      display: flex;
+      flex-direction: column;
+      .item-title {
+        width: 1.8rem;
+        flex-wrap: nowrap;
+        font-family: PingFang-SC, PingFang-SC;
+        font-weight: 500;
+        font-size: 0.21rem;
+        color: #666666;
+        text-align: left;
+        // line-height: 0.8rem;
+      }
+      .item-two-value {
+        margin-top: 0.16rem;
+        .two-value-wai-bg {
+          // margin: 0.16rem 0;
+          padding: 0.14rem 0.3rem;
+          box-sizing: border-box;
+          width: 100%;
+          height: 0.5rem;
+          background: url('~@/assets/image/vxEwm/value-wai-bg.png');
+          background-size: 100% 100%;
+          display: flex;
+          align-items: center;
+          .two-value-nei-bg {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 0.29rem;
+            height: 0.29rem;
+            background: url('~@/assets/image/vxEwm/value-nei-bg.png');
+            background-size: 100% 100%;
+            span {
+              font-family: PingFang-SC, PingFang-SC;
+              font-weight: bold;
+              font-size: 0.19rem;
+              color: #FFFFFF;
+              // line-height: 0.34rem;
+            }
+          }
+          .value-title {
+            font-family: PingFang-SC, PingFang-SC;
+            font-weight: 500;
+            font-size: 0.21rem;
+            color: #333333;
+            margin-left: 0.2rem;
+          }
+        }  
+      }  
+    }
+  }
+}
+</style>

src/views/vxEwm/enterprise/index.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="vx-container">
     <div class="general-header"></div>
-    <div class="general-view">
+    <div class="general-info-bg"></div>
+    <div :class="$route.name == '巡检详情' ? 'general-view-two' : 'general-view'">
       <router-view />
     </div>
     <div class="general-footnote">
@@ -75,6 +76,16 @@ export default {
   background: url('~@/assets/image/vxEwm/top-header-bg.png');
   background-size: 100% 100%;
 }
+.general-info-bg {
+  position: absolute;
+  top: 15%;
+  left: 0;
+  z-index: 10;
+  width: 100%;
+  height: 74%;
+  background: url('~@/assets/image/vxEwm/middle-bg.png');
+  background-size: 100% 100%;
+}
 .general-view {
   position: absolute;
   top: 50%;
@@ -89,6 +100,20 @@ export default {
   box-sizing: border-box;
   padding: 0.3rem 0.21rem;
 }
+.general-view-two {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 20;
+  width: 90%;
+  height: 75%;
+  background-color: #FFFFFF;
+  border-radius: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
+  padding: 0.21rem;
+}
 .general-footnote {
   position: absolute;
   bottom: 0;