增加最新管护记录

src/components/amapPow.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2022-10-19 09:32:46
  * @LastEditors: wangcc
- * @LastEditTime: 2023-06-20 17:59:32
+ * @LastEditTime: 2023-06-21 17:41:51
  * @FilePath: \castgroup_bigscreen\src\components\amapPow.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->
@@ -24,6 +24,88 @@
     <el-dialog title="查看图片" :modal="false" :visible.sync="imgDialogVisible" width="40%">
       <img width="100%" style="height:580px" :src="dialogImageUrl" alt />
     </el-dialog>
+    <div id="dialog-mask" v-if="guanHuVisionLog" class="guanHu-back">
+      <div class="close-item" @click="closeLog"></div>
+      <div class="item-box" v-if="maintRecordData">
+        <div class="item-box-list">
+          <div class="item-box-list-title">
+            <i class="icon-item"></i>
+            <span>管护内容</span>
+          </div>
+          <div class="item-content">
+            <div
+              class="content-label"
+              v-for="(guanHu,index) in maintRecordData.manageList"
+              :key="index"
+            >
+              <p>
+                管护类型：
+                <span v-if="guanHu.manageType == 1">施肥</span>
+                <span v-if="guanHu.manageType == 2">除草</span>
+                <span v-if="guanHu.manageType == 3">采摘果实</span>
+                <span v-if="guanHu.manageType == 4">采摘叶子</span>
+              </p>
+              <p v-if="guanHu.manageType == 1">施肥面积：{{guanHu.num}}{{guanHu.unitName}}</p>
+              <p v-if="guanHu.manageType == 2">除草面积：{{guanHu.num}}{{guanHu.unitName}}</p>
+              <p
+                v-if="guanHu.manageType == 3 || guanHu.manageType == 4"
+              >采摘面积：{{guanHu.num}}{{guanHu.unitName}}</p>
+            </div>
+            <div class="content-label">
+              <label for>管护图片：</label>
+              <div class="imgs-list" v-viewer>
+                <img
+                  :src="imgs"
+                  alt
+                  v-for="(imgs,index) in maintRecordData.imagesList"
+                  :key="index"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="item-box-list" style="margin-top:24px">
+          <div class="item-box-list-title">
+            <i class="icon-item"></i>
+            <span>物资使用情况</span>
+          </div>
+          <div class="item-content">
+            <div v-for="(agri,index) in maintRecordData.agriList" :key="index">
+              <div class="content-label">
+                <p>物资名称：{{agri.materialName}}/{{agri.materialBrandName}}/{{agri.specs}}</p>
+              </div>
+              <div class="content-label">
+                <p>使用数量：{{agri.num}}{{agri.unitName}}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="item-box-list" style="margin-top:24px">
+          <div class="item-box-list-title">
+            <i class="icon-item"></i>
+            <span>其他信息</span>
+          </div>
+          <div class="item-content">
+            <div class="content-label">
+              <p>管护人次：{{maintRecordData.peopleNum}}人/次</p>
+              <p>登记时间:{{maintRecordData.createTime}}</p>
+            </div>
+            <div class="content-label">
+              <label for>站队图片：</label>
+              <div class="imgs-list" v-viewer>
+                <img
+                  :src="people"
+                  v-for="(people,index) in maintRecordData.peopleImagesList"
+                  :key="index"
+                  alt
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else>暂无信息</div>
+    </div>
   </div>
 </template>
 <script>
@@ -42,7 +124,8 @@ import {
   smallClassDetail,
   treePlant,
   projectList,
-  getProjectIcon
+  getProjectIcon,
+  maintRecordLatest
 } from '@/service/index.js';
 import axios from 'axios';
 export default {
@@ -50,6 +133,7 @@ export default {
   data() {
     return {
       imgDialogVisible: false,
+      guanHuVisionLog: false,
       dialogImageUrl: null,
       AMap: null,
       map: null,
@@ -111,7 +195,9 @@ export default {
       // 项目小班红点转边界图
       projectPolygonArr: [],
       projectIcon:
-        'http://miniores.hw.hongweisoft.com/mintou/1667460231789_a06fed1519c5e3d206e4ab9148d658e5.png'
+        'http://miniores.hw.hongweisoft.com/mintou/1667460231789_a06fed1519c5e3d206e4ab9148d658e5.png',
+      smallId: '',
+      maintRecordData: {}
       // projectIcon: ''
     };
   },
@@ -267,6 +353,8 @@ export default {
       handler: function (val, oldVal) {
         let _this = this;
         if (val) {
+          console.log(val);
+          this.smallId = val.id;
           if (val.longitude && val.latitude && !val.name) {
             this.map.remove(this.polygon);
             if (_this.smallMarkers) {
@@ -593,6 +681,13 @@ export default {
   },
   mounted() {
     this.initAMap();
+    const _this = this;
+    window.clickClose = function (channelNum) {
+      _this.nvrPreview();
+    };
+    window.guanHuClick = function () {
+      _this.guanHuVision();
+    };
     // 加载小班边界
     // this.getSmallClass();
   },
@@ -623,95 +718,92 @@ export default {
       }
       let closeIcon = require('@/assets/img/close.png');
       this.imgClick();
-      let smallLabel =
-        "<div class='info-details'>" +
-        "<h5 class='marker-title'>" +
-        val.countyName +
-        '-' +
-        val.smallNumber +
-        '</h5>' +
-        "<div class='marker-content'>" +
-        '<div>' +
-        '<p>小班号：' +
-        val.smallNumber +
-        '</p>' +
-        '<p>样地数：' +
-        val.sampleCount +
-        '</p>' +
-        '<p>小班蓄积量：' +
-        val.smallClassStock +
-        '(立方米)' +
-        '</p>' +
-        '<p>小班占地面积：' +
-        val.landArea +
-        '(亩)' +
-        '</p>' +
-        '<p>小班树种组成：' +
-        val.treeComp +
-        '</p>' +
-        '<p>地类：' +
-        val.landType +
-        '</p>' +
-        '<p>林地权属：' +
-        val.landOwner +
-        '</p>' +
-        '<p>林木权属：' +
-        val.forestOwner +
-        '</p>' +
-        '<p>林种：' +
-        val.forestClass +
-        '</p>' +
-        '<p>树种结构：' +
-        val.treeStruct +
-        '</p>' +
-        '</div>' +
-        '<div>' +
-        '<p>起源：' +
-        val.origin +
-        '</p>' +
-        '<p>优势树种：' +
-        val.superTree +
-        '</p>' +
-        '<p>主要灌木名称：' +
-        val.shrubName +
-        '</p>' +
-        '<p>地貌：' +
-        val.landForm +
-        '</p>' +
-        '<p>海拔：' +
-        val.altitude +
-        '</p>' +
-        '<p>坡位：' +
-        val.slopePosit +
-        '</p>' +
-        '<p>坡向：' +
-        val.slopeDirect +
-        '</p>' +
-        '<p>坡形：' +
-        val.slopeForm +
-        '</p>' +
-        '<p>坡度：' +
-        val.slope +
-        '</p>' +
-        '<p>森林健康度：' +
-        val.forestHealth +
-        '</p>' +
-        '</p>' +
-        '</div>' +
-        '</div>' +
-        '<div class="imgList">' +
-        "<span class='marker-span'>图片：</span>" +
-        '<div class="marker-imgs">' +
-        imgList +
-        '</div>' +
-        '</div>' +
-        '<a class="link-log" id="linkGuanHu">最新管护情况' +
-        '</a>' +
-        '<a class="link-close" id="linkClose">' +
-        '<img src="' +
-        closeIcon +
-        '" />';
-      '</a>' + '</div>';
+      let inHtml = `<div class='info-details'>
+        <h5 class='marker-title'>
+        ${val.countyName}
+        -
+        ${val.smallNumber}
+        </h5>
+        <div class='marker-content'>
+        <div>
+        <p>小班号：
+        ${val.smallNumber}
+        </p>
+        <p>样地数：
+        ${val.sampleCount}
+        </p>
+        <p>小班蓄积量：
+        ${val.smallClassStock}
+        (立方米)
+        </p>
+        <p>小班占地面积：
+        ${val.landArea}
+        (亩)
+        </p>
+        <p>小班树种组成：
+        ${val.treeComp}
+        </p>
+        <p>地类：
+        ${val.landType}
+        </p>
+        <p>林地权属：
+        ${val.landOwner}
+        </p>
+        <p>林木权属：
+        ${val.forestOwner}
+        </p>
+        <p>林种：
+        ${val.forestClass}
+        </p>
+        <p>树种结构：
+        ${val.treeStruct}
+        </p>
+        </div>
+        <div>
+        <p>起源：
+        ${val.origin}
+        </p>
+        <p>优势树种：
+        ${val.superTree}
+        </p>
+        <p>主要灌木名称：
+        ${val.shrubName}
+        </p>
+        <p>地貌：
+        ${val.landForm}
+        </p>
+        <p>海拔：
+        ${val.altitude}
+        </p>
+        <p>坡位：
+        ${val.slopePosit}
+        </p>
+        <p>坡向：
+        ${val.slopeDirect}
+        </p>
+        <p>坡形：
+        ${val.slopeForm}
+        </p>
+        <p>坡度：
+        ${val.slope}
+        </p>
+        <p>森林健康度：
+        ${val.forestHealth}
+        </p>
+        </p>
+        </div>
+        </div>
+        <div class="imgList">
+        <span class='marker-span'>图片：</span>
+        <div class="marker-imgs">
+        ${imgList}
+        </div>
+        </div>
+        <a class="link-log" id="linkGuanHu" onclick="guanHuClick()">最新管护情况
+        </a>
+        <a class="link-close" id="linkClose" onclick="clickClose()">
+        <img  src="${closeIcon}" />
+      </a></div>`;
       let infoIcon = new AMap.Icon({
         size: new AMap.Size(40, 25), // 图标尺寸
         image: require('@/assets/img/small-marker.png'),
@@ -728,23 +820,44 @@ export default {
       this.smallMarker.setLabel({
         direction: 'right',
         offset: new AMap.Pixel(-230, -150), //设置文本标注偏移量
-        content: smallLabel //设置文本标注内容
+        content: inHtml //设置文本标注内容
       });
       if (this.$store.state.addr.mapLevel == 'street') {
         this.map.setFitView(this.smallMarker, false, false, 14);
       }
       this.smallMarkers.push(_this.smallMarker);
-      this.smallMarker.on('click', (e) => {
-        if (_this.smallMarkers) {
-          _this.map.remove(_this.smallMarkers);
-        }
-        if (_this.projectPolygonArr) {
-          _this.map.remove(_this.projectPolygonArr);
-        }
-        if (_this.smallClassProject) {
-          _this.map.remove(_this.smallClassProject);
-        }
-      });
+      // this.smallMarker.on('click', (e) => {
+      //   if (_this.smallMarkers) {
+      //     _this.map.remove(_this.smallMarkers);
+      //   }
+      //   if (_this.projectPolygonArr) {
+      //     _this.map.remove(_this.projectPolygonArr);
+      //   }
+      //   if (_this.smallClassProject) {
+      //     _this.map.remove(_this.smallClassProject);
+      //   }
+      // });
+    },
+
+    nvrPreview() {
+      let _this = this;
+      if (_this.smallMarkers) {
+        _this.map.remove(_this.smallMarkers);
+      }
+      if (_this.projectPolygonArr) {
+        _this.map.remove(_this.projectPolygonArr);
+      }
+      if (_this.smallClassProject) {
+        _this.map.remove(_this.smallClassProject);
+      }
+    },
+    guanHuVision() {
+      this.guanHuVisionLog = true;
+      this.maintRecordData = {};
+      this.getMaintRecordLatest();
+    },
+    closeLog() {
+      this.guanHuVisionLog = false;
     },
     initAMap() {
       window._AMapSecurityConfig = {
@@ -1480,7 +1593,6 @@ export default {
             } else {
               imgList.push('暂无图片');
             }
-
             this.imgClick();
             let smallLabel =
               "<div class='info-details'>" +
@@ -1630,7 +1742,7 @@ export default {
         }
       });
     },
-    
+
     // 获取样地数据
     getForestSample(page) {
       forestSample({
@@ -1851,6 +1963,21 @@ export default {
         this.setMarkers(res, sampleMarker, iconMeta, page);
       });
     },
+    // 获取最新管护记录
+    getMaintRecordLatest() {
+      maintRecordLatest({ smallId: this.smallId }).then((res) => {
+        if (res.code == 200) {
+          console.log(res);
+          if (res.data) {
+            res.data.imagesList = res.data.images.split(';');
+            res.data.peopleImagesList = res.data.peopleImages.split(';');
+            this.maintRecordData = res.data;
+          }else {
+            this.maintRecordData = null;
+          }
+        }
+      });
+    },
     // 事件信息
     getEven() {
       let _this = this;
@@ -2195,8 +2322,8 @@ export default {
   }
   .link-close {
     cursor: pointer;
-    width: 50px;
-    height: 50px;
+    width: 30px;
+    height: 30px;
     position: absolute;
     top: 18px;
     right: 12px;
@@ -2370,4 +2497,74 @@ export default {
     cursor: pointer;
   }
 }
+.guanHu-back {
+  background-image: url('../assets/img/guanhu.png');
+  width: 550px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  // height: 497px;
+  position: fixed;
+  z-index: 999;
+  top: 25%;
+  left: 35%;
+  padding: 31px 29px;
+  .close-item {
+    background-image: url('../assets/img/close.png');
+    background-repeat: no-repeat;
+    width: 34px;
+    height: 33px;
+    position: absolute;
+    top: -14px;
+    right: 0;
+    cursor: pointer;
+  }
+  .item-box {
+    width: 100%;
+    &-list {
+      &-title {
+        text-align: left;
+        height: 22px;
+        display: flex;
+        align-items: center;
+        margin-bottom: 14px;
+        .icon-item {
+          background-image: url('../assets/img/tips.png');
+          width: 18px;
+          height: 17px;
+          background-repeat: no-repeat;
+          display: inline-block;
+        }
+        span {
+          color: #00f5ff;
+          margin-left: 10px;
+          font-size: 16px;
+        }
+      }
+    }
+    .item-content {
+      overflow: hidden;
+      .content-label {
+        font-size: 14px;
+        display: flex;
+        margin-bottom: 10px;
+        p {
+          margin: 0;
+          text-align: left;
+          width: 50%;
+        }
+        .imgs-list {
+          display: flex;
+          flex-wrap: wrap;
+          img {
+            width: 64px;
+            height: 64px;
+            cursor: pointer;
+            margin-right: 6px;
+            margin-bottom: 6px;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/service/index.js

@@ -150,7 +150,14 @@ export const alarmDataApi = data =>
     data,
     prefixUrl: "api2"
   });
-
+  // /admin/screen/smallClass/maintRecordLatest
+  // 查询小班最新管护记录
+export const maintRecordLatest = data =>
+  callApi({
+    url: "smallClass/maintRecordLatest",
+    data,
+    prefixUrl: "api2"
+  });
 export const page6echarts01 = data =>
   callApi({
     url: "event/statisVillage",