mudu-vx/src/views/vxEwm/enterprise/components/firmInfo.vue

<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"
        />
      </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 value-image">
          <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.query.id
      Toast.loading({
        message: '加载中...',
        duration: 0,
        forbidClick: true,
      })
      api.getChecksinfo(id).then((res) => {
        this.checksinfo = res.data
        document.title = this.checksinfo.enterpriseName || '企业' //修改浏览器标题

        // 显示地图
        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>
div {
  box-sizing: border-box;
}
.firm-info {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0.25rem 0.21rem;
  background: #ffffff;
  border-radius: 20px;
  .info-content {
    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-weight: 500;
        font-size: 0.21rem;
        color: #666666;
        text-align: left;
        // line-height: 0.8rem;
      }
      .item-value {
        flex: 1;

        font-weight: bold;
        font-size: 0.22rem;
        color: #333333;
        text-align: left;
        // line-height: 0.8rem;
      }
      .value-image {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }
    }
    .list-item-two {
      display: flex;
      flex-direction: column;
      .item-title {
        width: 1.8rem;
        flex-wrap: nowrap;

        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-weight: bold;
              font-size: 0.19rem;
              color: #ffffff;
              // line-height: 0.34rem;
            }
          }
          .value-title {
            font-weight: 500;
            font-size: 0.21rem;
            color: #333333;
            margin-left: 0.2rem;
          }
        }
      }
    }
  }
}
#show-maps {
  border-radius: 6px;
  border: 1px solid #acd5fe;
}
/deep/.van-image {
  width: 1.44rem;
  height: 0.96rem;
  border-radius: 6px;
  overflow: hidden;

  margin: 0 0.1rem 0.1rem 0;
}
</style>