图斑清单编号搜索,基本信息接口联调,核查心机接口联调,监测类型情况图片及内容联调(图片加载无显示版本)

src/views/farmlandProtection/components/hcxx.vue

@@ -6,24 +6,26 @@
           label="图斑编号"
           label-class-name="my-label"
           content-class-name="my-content"
-          >{{ "6401812024070108270002" }}</el-descriptions-item
+          >{{ hcObj.jcbh }}</el-descriptions-item
         >
         <el-descriptions-item
           label="外业核实情况"
           content-class-name="my-content"
           :span="3"
-          >{{ "已核实" }}</el-descriptions-item
+          >{{ hcObj.wyhsqk }}</el-descriptions-item
         >
         <el-descriptions-item label="实际地类代码">{{
-          "4601"
+          hcObj.sjdldm
         }}</el-descriptions-item>
         <el-descriptions-item label="调查人员">{{
-          "刘子规"
+          hcObj.dcry
         }}</el-descriptions-item>
         <el-descriptions-item label="调查时间">{{
-          "20240116"
+          hcObj.dcsj
+        }}</el-descriptions-item>
+        <el-descriptions-item label="扩展信息1">{{
+          "无"
         }}</el-descriptions-item>
-        <el-descriptions-item label="扩展信息1">{{ "1" }}</el-descriptions-item>
         <el-descriptions-item label="扩展信息2">{{
           "无"
         }}</el-descriptions-item>
@@ -34,9 +36,7 @@
     </div>
     <div class="imgCon">
       <div class="echartTitle">
-        <div class="block-title">
-          监测类型情况 <span @click="ceshi">测试</span>
-        </div>
+        <div class="block-title">监测类型情况</div>
       </div>
       <div class="imgList">
         <div
@@ -48,8 +48,9 @@
           @mouseleave="handleMouseLeave(item, i)"
         >
           <span>{{ i + 1 }}</span>
-          <img :src="item.imgUrl" />
-          <p>{{ item.info }}</p>
+          <img :src="imgUrl" />
+          <!-- <img :src="imgUrl + item.imagerPath" /> -->
+          <p>{{ item.imagerSj }}</p>
         </div>
       </div>
     </div>
@@ -57,15 +58,20 @@
 </template>
 
 <script>
+import { getJctbhcInfo } from "@/api/ghss/jctb.js";
 export default {
   props: {
     detailObj: {
       type: Object,
     },
+    jcbh: {
+      type: String,
+    },
   },
   components: {},
   data() {
     return {
+      imgUrl: "",
       monitorList: [
         {
           id: "s1",
@@ -121,6 +127,7 @@ export default {
       primitive: null,
       selectId: null,
       primitivesArray: [],
+      hcObj: null,
     };
   },
   computed: {},
@@ -131,16 +138,19 @@ export default {
       // this.ccc();
       // this.onClickButton();
       this.ddd();
+      // this.imgUrl =
+      //   "https://b0.bdstatic.com/ugc/Gr0RkpztmAdvrxnS4n54Iw49d04e3484c9bb1a11f03b38a819d893.jpg@h_1280";
     });
+    this.imgUrl = window.axiosURI + "/analyse/fzss/DownloadReport?filePath=";
   },
   methods: {
     handleMouseEnter(a, b) {
       console.log("鼠标移入", a, b);
-      this.ceshi('111')
+      this.ceshi("111");
     },
     handleMouseLeave(a, b) {
       console.log("鼠标移出");
-      this.ceshi()
+      this.ceshi();
     },
     changeData(name, updata) {
       this[name] = updata;
@@ -149,92 +159,28 @@ export default {
       this.$emit("updateParent", "emitImgList", this.monitorList);
       this.$emit("updateParent", "emitImgIndex", val);
     },
-    aaa() {
-      var redLine = viewer.entities.add({
-        // 贴在地面上 两点之间的直线距离
-        name: "line",
-        // polyline: {
-        // positions: Cesium.Cartesian3.fromDegreesArray([
-        //   // o.inx,
-        //   // o.iny,
-        //   // o.outx,
-        //   // o.outy,
-        //   109.5077, 18.309, 109.5111, 18.3093,
-        // ]),
-        //   width: 20,
-        //   // 不带箭头的线
-        //   // material: Cesium.Color.RED,
-        //   // 是否紧贴地面
-        //   clampToGround: true,
-        //   // 带箭头的线
-        //   material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED),
-        // },
-
-        polygon: {
-          hierarchy: Cesium.Cartesian3.fromDegreesArray([
-            // o.inx,
-            // o.iny,
-            // o.outx,
-            // o.outy,
-            109.5077, 18.309, 109.5111, 18.3093,
-          ]),
-          material: new Cesium.ColorMaterialProperty(
-            Cesium.Color.fromCssColorString("rgba(255, 255, 255, 1)")
-          ),
-          width: 15,
-        },
-      });
-    },
-    ccc() {
-      // // var viewer = new Cesium.Viewer("cesiumContainer");
-      // // var scene = viewer.scene;
-      // // 创建BillboardCollection来存储图片或图标
-      // var billboards = viewer.scene.primitives.add(
-      //   new Cesium.BillboardCollection()
-      // );
-      // // 添加一个带偏移量和旋转的图标
-      // var billboard = billboards.add({
-      //   image:
-      //     "https://img2.baidu.com/it/u=2726480512,4270878021&fm=253&fmt=auto&app=120&f=JPEG?w=193&h=193", // 替换为图片的路径
-      //   position: Cesium.Cartesian3.fromDegrees(109.5077, 18.309), // 设置图片的位置，采用经纬度
-      //   width: 64, // 设置图片的宽度
-      //   height: 64, // 设置图片的高度
-      //   rotation: Cesium.Math.toRadians(45), // 设置初始旋转角度（单位弧度）
-      //   // clampToGround: true,
-      //   pixelOffset: new Cesium.Cartesian2(30, -40), // 设置偏移量，X轴偏移30像素，Y轴偏移-40像素
-      //   heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
-      //   horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平锚点
-      //   verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直锚点
-      // });
-
-      // 创建一个Cesium视图
-      // var viewer = new Cesium.Viewer("cesiumContainer");
-
-      // 获取场景对象
-      var scene = viewer.scene;
-
-      // 创建一个BillboardCollection，用于存放所有Billboard对象
-      var billboards = scene.primitives.add(new Cesium.BillboardCollection());
-
-      // 定义图片的URL
-      var imageUrl = "https://example.com/your-image.png";
-
-      // 设置图片的初始位置（经纬度）
-      var longitude = -75.0;
-      var latitude = 40.0;
-      var height = 1000; // 距离地面1000米
-
-      // 创建Billboard对象
-      var billboard = billboards.add({
-        image: imageUrl, // 设置图片
-        position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height), // 设置位置
-        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 贴地
-        scale: 1.0, // 图片的缩放比例
-        rotation: Cesium.Math.toRadians(45), // 旋转角度，单位是弧度
-        pixelOffset: new Cesium.Cartesian2(50, 0), // 图片的偏移量，单位是像素（x, y）
-        alignedAxis: Cesium.Cartesian3.ZERO, // 不需要对齐轴
-      });
-    },
+    // aaa() {
+    //   var redLine = viewer.entities.add({
+    //     // 贴在地面上 两点之间的直线距离
+    //     name: "line",
+    //     polyline: {
+    //     positions: Cesium.Cartesian3.fromDegreesArray([
+    //       // o.inx,
+    //       // o.iny,
+    //       // o.outx,
+    //       // o.outy,
+    //       109.5077, 18.309, 109.5111, 18.3093,
+    //     ]),
+    //       width: 20,
+    //       // 不带箭头的线
+    //       // material: Cesium.Color.RED,
+    //       // 是否紧贴地面
+    //       clampToGround: true,
+    //       // 带箭头的线
+    //       material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED),
+    //     },
+    //   });
+    // },
     //点击事件
     onClickButton(e, val) {
       // 每次进来清空，然后再重新加载图片
@@ -375,7 +321,6 @@ export default {
       viewer.zoomTo(arrowEntity);
     },
     ceshi(item) {
-      // console.log(item,"?????");
       let aaa = viewer.entities.getById("jt1");
 
       if (item) {
@@ -477,8 +422,24 @@ export default {
       // }
     },
   },
-  watch: {},
-  watch: {},
+  watch: {
+    jcbh: {
+      handler(newVal, oldVal) {
+        getJctbhcInfo(newVal).then((res) => {
+          if (res.code == 200) {
+            this.monitorList = res.data.images;
+            this.hcObj = res.data;
+            this.monitorList.forEach((item) => {
+              item.name = res.data.dcry;
+            });
+          }
+          console.log(res.data.images, "?????????????????????????");
+        });
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
   beforeDestroy() {
     this.delatePoi("jt1");
     this.delatePoi("dw1");

src/views/farmlandProtection/components/jbxx.vue

@@ -7,7 +7,7 @@
           label="图斑编号"
           label-class-name="my-label"
           content-class-name="my-content"
-          >{{ detailObj.tbbh }}</el-descriptions-item
+          >{{ detailObj.jcbh }}</el-descriptions-item
         >
         <el-descriptions-item
           label="监测面积"
@@ -19,7 +19,7 @@
           label="行政名称"
           content-class-name="my-content"
           :span="3"
-          >{{ detailObj.xzmc }}</el-descriptions-item
+          >{{ detailObj.xmc }}</el-descriptions-item
         >
         <el-descriptions-item label="前时相">{{
           detailObj.qsx
@@ -28,12 +28,12 @@
           detailObj.hsx
         }}</el-descriptions-item>
         <el-descriptions-item label="前类型">{{
-          detailObj.qxl
+          detailObj.qlx
         }}</el-descriptions-item>
         <el-descriptions-item label="后类型">{{
           detailObj.hlx
         }}</el-descriptions-item>
-        <el-descriptions-item
+        <!-- <el-descriptions-item
           label="中心点经度"
           label-class-name="my-label"
           content-class-name="my-content"
@@ -44,13 +44,14 @@
           label-class-name="my-label"
           content-class-name="my-content"
           >{{ detailObj.zxdwd }}</el-descriptions-item
-        >
+        > -->
       </el-descriptions>
     </div>
   </div>
 </template>
 
 <script>
+import {getFilePath} from "@/api/ghss/jctb.js";
 export default {
   props: {
     detailObj: {
@@ -67,10 +68,19 @@ export default {
     changeData(name, updata) {
       this[name] = updata;
     },
-    clickOpen(){
-      this.$emit('updateParent','splitScreen',true)
+    clickOpen() {
+      this.$emit("updateParent", "splitScreen", true);
       // this.$refs.tbDetails.onClick(val);
-    }
+      var imageryProvider = new Cesium.UrlTemplateImageryProvider({
+        url: "http://192.168.60.2:8080/analyse/fzss/DownloadReport?filePath=/全域土地整治/jctb/1/0output/HN4602022023022004080080.tif",
+        format: "image/tiff",
+        tilingScheme: new Cesium.GeographicTilingScheme(),
+        maximumLevel: 18,
+      });
+      console.log(imageryProvider, "imageryProviderimageryProvider");
+      viewer.imageryLayers.addImageryProvider(imageryProvider);
+      viewer.flyTo(imageryProvider);
+    },
   },
   watch: {},
   watch: {},
@@ -95,7 +105,7 @@ export default {
   .dbBtn {
     width: 136px;
     height: 33px;
-    background-color:#0f7ac8;
+    background-color: #0f7ac8;
     line-height: 33px;
     text-align: center;
     margin-bottom: 10px;

src/views/farmlandProtection/components/tbDetails.vue

@@ -11,7 +11,7 @@
             <Jbxx :detailObj="detailObj" @updateParent="changeData" ref="jbxx"></Jbxx>
           </el-tab-pane>
           <el-tab-pane label="核查信息" name="hcxx">
-            <Hcxx @updateParent="changeData" v-if="activeTabs == 'hcxx'"></Hcxx>
+            <Hcxx @updateParent="changeData" :jcbh="detailObj.jcbh" v-if="activeTabs == 'hcxx'"></Hcxx>
           </el-tab-pane>
         </el-tabs>
       </div>

src/views/farmlandProtection/components/tbqd.vue

@@ -2,7 +2,7 @@
   <div class="tbqd">
     <div>
       <div class="headerInput">
-        <el-input v-model="input" placeholder="请输入监测编号搜索"></el-input>
+        <el-input v-model="input" placeholder="请输入监测编号搜索" @keyup.enter.native="initNew"></el-input>
         <span>共{{total}}条</span>
       </div>
       <div class="pagination">
@@ -134,7 +134,7 @@ import * as wellknown from "wellknown";
 import * as turf from "@turf/turf";
 import { QueryOne, QueryList } from "@/api/cockpitNew";
 import { loadGeoJSON } from "@/utils/MapHelper/help.js";
-import { JctbList } from "@/api/ghss/jctb.js";
+import { JctbList,getJctbInfo } from "@/api/ghss/jctb.js";
 let layerSources = {};
 export default {
   props: {
@@ -182,13 +182,11 @@ export default {
         jcbh: this.input,
       };
       JctbList(obj).then((res) => {
-        console.log(res,'>>>>>');
         this.active_dableData = res.rows;
         this.total = res.total
       });
     },
     handleClick(item) {
-      console.log(item, "---");
       if (!item.geom) {
         this.$message.warning("缺少定位图斑");
       } else {
@@ -209,6 +207,11 @@ export default {
     },
     handleDetails(row) {
       this.$emit("updateParent", "isShowTb", true);
+      getJctbInfo(row.id).then((res)=> {
+        if (res.code == 200) {
+          this.$emit("updateParent", "detailObj", res.data);
+        }
+      })
     },
     handleSizeChange(val) {
       this.pageSize = val;
@@ -257,9 +260,9 @@ export default {
       deep: true,
       immediate: true,
     },
-    input(newVal, oldVal){
-      this.initNew();
-    },
+    // input(newVal, oldVal){
+    //   this.initNew();
+    // },
     active_dableData(newVal, oldVal) {
       newVal.forEach((res, index) => {
         res.type = "图斑上图";

src/views/farmlandProtection/jctb/index.vue

@@ -102,12 +102,14 @@
             {{ item }}
             <div class="imgInfo">
               <p>
-                <span>拍摄时间:{{ item.info }}</span
+                <span>拍摄时间:{{ item.imagerSj }}</span
                 ><span>拍摄人:{{ item.name }}</span>
               </p>
               <p>
-                <span>拍摄坐标:{{ item.lat }}, {{ item.lon }}</span
-                ><span>拍摄方位:{{ item.psfw }}</span>
+                <span
+                  >拍摄坐标:{{ keepDigitDecimal(item.imagerLzb, 6) }},
+                  {{ keepDigitDecimal(item.imagerBzb, 6) }}</span
+                ><span>拍摄方位:{{ item.imagerAngleSm }}</span>
               </p>
             </div>
           </el-carousel-item>
@@ -141,18 +143,7 @@ export default {
     return {
       activeTabs: "tbzl",
       isShowTb: false,
-      // detailObj: null,
-      detailObj: {
-        tbbh: "6401812024070108270002",
-        jcmj: "3.98",
-        xzmc: "海棠区",
-        qsx: "20230925",
-        hsx: "20240701",
-        qxl: "草地",
-        hlx: "新增推堆土",
-        zxdjd: "106.675447",
-        zxdwd: "38.209985",
-      },
+      detailObj: {},
       // isShowImg: false,
       imgList: [],
       imgIndex: -1,
@@ -191,6 +182,14 @@ export default {
         // this.$refs.tbqd.initNew();
       }
     },
+    keepDigitDecimal(num, n) {
+      // 小于零，先转正数计算
+      if (num < 0) {
+        return (Math.floor(-1 * num * 10 ** n) / 10 ** n) * -1;
+      }
+
+      return Math.floor(num * 10 ** n) / 10 ** n;
+    },
     closeBox() {
       this.imgIndex = -1;
     },
@@ -323,7 +322,8 @@ export default {
       height: 332px;
     }
     .imgInfo {
-      width: 245px;
+      // width: 245px;
+      width: 60%;
       height: 46px;
       // background-color: rgba(255, 192, 203, 0.356);
       position: absolute;
@@ -378,7 +378,7 @@ export default {
   margin: 5px 0px;
   display: flex;
   justify-content: space-between;
-  /deep/ .el-select{
+  /deep/ .el-select {
     padding: 0 10px;
   }
   /deep/ .el-input--suffix .el-input__inner {
@@ -399,7 +399,7 @@ export default {
     color: #fff;
   }
 }
-.xz_box{
+.xz_box {
   padding-top: 0px;
 }
 </style>