服务详情核查信息

src/views/farmlandProtection/components/hcxx.vue

@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <div class="detailList">
+      <el-descriptions :column="1" border>
+        <el-descriptions-item
+          label="图斑编号"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >{{ "6401812024070108270002" }}</el-descriptions-item
+        >
+        <el-descriptions-item
+          label="外业核实情况"
+          content-class-name="my-content"
+          :span="3"
+          >{{ "已核实" }}</el-descriptions-item
+        >
+        <el-descriptions-item label="实际地类代码">{{
+          "4601"
+        }}</el-descriptions-item>
+        <el-descriptions-item label="调查人员">{{
+          "刘子规"
+        }}</el-descriptions-item>
+        <el-descriptions-item label="调查时间">{{
+          "20240116"
+        }}</el-descriptions-item>
+        <el-descriptions-item label="扩展信息1">{{ "1" }}</el-descriptions-item>
+        <el-descriptions-item label="扩展信息2">{{
+          "无"
+        }}</el-descriptions-item>
+        <el-descriptions-item label="扩展信息3">{{
+          "无"
+        }}</el-descriptions-item>
+      </el-descriptions>
+    </div>
+    <div class="imgCon">
+      <div class="echartTitle">
+        <div class="block-title">监测类型情况</div>
+        <div class="selectTab"></div>
+      </div>
+      <div class="imgList">
+        <div class="imgDiv" v-for="(item, i) in monitorList" :key="i">
+          <span>{{ i + 1 }}</span>
+          <img :src="item.imgUrl" />
+          <p>{{ item.info }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    detailObj: {
+      type: Object,
+    },
+  },
+  components: {},
+  data() {
+    return {
+      monitorList: [
+        {
+          imgUrl: require("./u385.jpg"),
+          info: "2024-09-27 15:04",
+        },
+        {
+          imgUrl: require("./u385.jpg"),
+          info: "2024-09-27 15:04",
+        },
+        {
+          imgUrl: require("./u385.jpg"),
+          info: "2024-09-27 15:04",
+        },
+        {
+          imgUrl: require("./u385.jpg"),
+          info: "2024-09-27 15:04",
+        },
+        {
+          imgUrl: require("./u385.jpg"),
+          info: "2024-09-27 15:04",
+        },
+      ],
+    };
+  },
+  computed: {},
+  mounted() {},
+  methods: {
+    changeData(name, updata) {
+      this[name] = updata;
+    },
+  },
+  watch: {},
+  watch: {},
+  beforeDestroy() {},
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .el-descriptions-item__label.is-bordered-label {
+  color: #fff;
+  background-color: transparent;
+}
+/deep/ .el-descriptions__body {
+  color: #fff;
+  background-color: transparent;
+}
+.imgCon {
+  .imgList {
+    width: 100%;
+    height: 410px;
+    background-color: rgba(255, 192, 203, 0.372);
+    .imgDiv {
+      width: 126px;
+      height: 83px;
+      background-color: rgba(0, 255, 255, 0.413);
+      position: relative;
+      img {
+        width: 126px;
+        height: 83px;
+      }
+      span {
+        width: 26px;
+        height: 26px;
+        display: inline-block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: #dbad70;
+        text-align: center;
+        line-height: 26px;
+      }
+      p {
+        position: absolute;
+        bottom: 0;
+        font-size: 10px;
+        color: #33ccff;
+        text-align: center;
+        width: 100%;
+        height: 30px;
+        line-height: 30px;
+      }
+    }
+  }
+}
+.detailList {
+  margin-top: 10px;
+}
+/deep/ .el-descriptions .is-bordered .el-descriptions-item__cell {
+  padding: 3px;
+}
+</style>

src/views/farmlandProtection/components/jbxx.vue

@@ -1,41 +1,57 @@
 <template>
   <div>
-    <div class="ServiceCon">
-      <div class="detailList">
-        <el-descriptions :column="1" border>
-          <el-descriptions-item
-            label="图斑编号"
-            label-class-name="my-label"
-            content-class-name="my-content"
-            >{{ detailObj.tbbh }}</el-descriptions-item
-          >
-          <el-descriptions-item
-            label="行政名称"
-            content-class-name="my-content"
-            :span="3"
-            >{{ detailObj.xzmc }}</el-descriptions-item
-          >
-          <el-descriptions-item label="前时相">{{
-            detailObj.qsx
-          }}</el-descriptions-item>
-          <el-descriptions-item label="后时项">{{
-            detailObj.hsx
-          }}</el-descriptions-item>
-          <el-descriptions-item label="前类型">{{
-            detailObj.qxl
-          }}</el-descriptions-item>
-          <el-descriptions-item label="后类型">{{
-            detailObj.hlx
-          }}</el-descriptions-item>
-        </el-descriptions>
-      </div>
+    <div class="detailList">
+      <el-descriptions :column="1" border>
+        <el-descriptions-item
+          label="图斑编号"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >{{ detailObj.tbbh }}</el-descriptions-item
+        >
+        <el-descriptions-item
+          label="监测面积"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >{{ detailObj.jcmj }}</el-descriptions-item
+        >
+        <el-descriptions-item
+          label="行政名称"
+          content-class-name="my-content"
+          :span="3"
+          >{{ detailObj.xzmc }}</el-descriptions-item
+        >
+        <el-descriptions-item label="前时相">{{
+          detailObj.qsx
+        }}</el-descriptions-item>
+        <el-descriptions-item label="后时项">{{
+          detailObj.hsx
+        }}</el-descriptions-item>
+        <el-descriptions-item label="前类型">{{
+          detailObj.qxl
+        }}</el-descriptions-item>
+        <el-descriptions-item label="后类型">{{
+          detailObj.hlx
+        }}</el-descriptions-item>
+        <el-descriptions-item
+          label="中心点经度"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >{{ detailObj.zxdjd }}</el-descriptions-item
+        >
+        <el-descriptions-item
+          label="中心点维度"
+          label-class-name="my-label"
+          content-class-name="my-content"
+          >{{ detailObj.zxdwd }}</el-descriptions-item
+        >
+      </el-descriptions>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-    props: {
+  props: {
     detailObj: {
       type: Object,
     },
@@ -66,5 +82,10 @@ export default {
   color: #fff;
   background-color: transparent;
 }
-
+/deep/ .el-descriptions .is-bordered .el-descriptions-item__cell {
+  padding: 3px;
+}
+.detailList{
+  margin-top: 10px;
+}
 </style>

src/views/farmlandProtection/components/tbDetails.vue

@@ -8,9 +8,11 @@
       <div class="ServiceCon">
         <el-tabs type="border-card" class="xz_box" v-model="activeTabs" stretch>
           <el-tab-pane label="基本信息" name="jbxx">
-            <Jbxx :detailObj="detailObj"  @updateParent="changeData"></Jbxx>
+            <Jbxx :detailObj="detailObj" @updateParent="changeData"></Jbxx>
+          </el-tab-pane>
+          <el-tab-pane label="核查信息" name="hcxx">
+            <Hcxx @updateParent="changeData"></Hcxx>
           </el-tab-pane>
-          <el-tab-pane label="核查信息" name="hcxx"> 核查信息 </el-tab-pane>
         </el-tabs>
       </div>
     </div>
@@ -19,6 +21,7 @@
 
 <script>
 import Jbxx from "./jbxx.vue";
+import Hcxx from "./hcxx.vue";
 export default {
   props: {
     detailObj: {
@@ -27,6 +30,7 @@ export default {
   },
   components: {
     Jbxx,
+    Hcxx,
   },
   data() {
     return {
@@ -74,11 +78,28 @@ export default {
   }
 }
 
+.sm-panel {
+  width: 400px;
+  max-width: 400px;
+  /deep/ .el-icon-close:before {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: larger;
+    font-weight: bold;
+
+    &:hover {
+      color: aqua;
+    }
+  }
+}
+
 .sm-function-module-query {
   max-height: 800px !important;
+  top: 28px !important;
 }
-
-.sm-panel {
-  top: 38px;
+.xz_box {
+  padding: 1rem 0.5rem 0px 0.5rem;
+  height: 100% !important;
 }
 </style>

src/views/farmlandProtection/components/tbqd.vue

@@ -164,5 +164,4 @@ export default {
   //     border-bottom: transparent !important;
   //   }
 }
-
 </style>

src/views/farmlandProtection/jctb/index.vue

@@ -43,11 +43,14 @@ export default {
       // detailObj: null,
       detailObj: {
         tbbh: "6401812024070108270002",
+        jcmj:'3.98',
         xzmc: "海棠区",
         qsx: "20230925",
         hsx: "20240701",
-        qxl: "前类型",
-        hlx: "后类型",
+        qxl: "草地",
+        hlx: "新增推堆土",
+        zxdjd:'106.675447',
+        zxdwd:'38.209985'
       },
     };
   },
@@ -79,6 +82,7 @@ export default {
 
   .xz_box {
     padding-bottom: 0;
+    height: 100%;
   }
 }
 </style>