Merge branch 'master' of http://114.244.114.158:8802/zhenghongxun/spotcheck-management

src/api/supervise/pcsj.js

@@ -51,3 +51,10 @@ export function listPcsjXQList(query) {
     params: query
   })
 }
+export function getPcsjXQ(id) {
+  return request({
+    url: '/apply/supervise/xq/' + id,
+    method: 'get',
+
+  })
+}

src/components/custom-detailsInfo.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="custom-detailsInfo">
+    <div v-for="(row, index) in config" :key="index" class="detailsInfo">
+      <template v-if="Array.isArray(row)">
+        <el-row :gutter="20">
+          <el-col
+            v-for="rowItem in row"
+            :key="rowItem.label"
+            :span="rowItem.span || 24 / row.length"
+          >
+            <el-row :gutter="20">
+              <el-col
+                v-for="item in rowItem"
+                :key="item.label"
+                :span="item.span"
+                :class="
+                  item.flag === 'label'
+                    ? 'labelcol'
+                    : !item.isslot
+                    ? 'detailcol'
+                    : ''
+                "
+              >
+                <template v-if="item.flag === 'label'">
+                  <span class="required">{{ item.value }}</span>
+                </template>
+                <template v-else>
+                  <div class="detail ellipsisText">
+                    <slot v-if="item.isslot" :name="item.value"></slot>
+                    <el-tooltip
+                      v-else
+                      class="box-item"
+                      effect="light"
+                      popper-class="tooltipLight"
+                      :content="model[item.value] + ''"
+                      :disabled="
+                        model[item.value] && model[item.value].length < 10
+                      "
+                      placement="top"
+                    >
+                      <span class="information">
+                        {{ model[item.value]
+                        }}<span v-if="model[item.value]">{{ item.unit }}</span>
+                      </span>
+                    </el-tooltip>
+                  </div>
+                </template>
+              </el-col>
+            </el-row>
+          </el-col>
+        </el-row>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    model: Object,
+    config: Array,
+  },
+  data() {
+    return {
+      map: null,
+    };
+  },
+  mounted() {
+    console.log(this.config);
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.custom-detailsInfo {
+  color: #fff;
+  .labelcol {
+    text-align: right;
+    height: 36px;
+  }
+  .detailcol {
+    height: 36px;
+  }
+  .required {
+    font-size: 14px;
+    font-weight: 400;
+    color: #babdc1;
+    height: 39px;
+    line-height: 39px;
+  }
+  .ellipsisText {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .information {
+    font-size: 14px;
+    font-weight: 400;
+    color: #000;
+    height: 39px;
+    line-height: 39px;
+    // white-space: nowrap;
+    // overflow: hidden;
+    // text-overflow: ellipsis;
+  }
+}
+</style>

src/views/remote/farmland/config.js

@@ -0,0 +1,45 @@
+
+// 详情字段
+export const detailInfos = [
+  // [[
+  //   { flag: 'label', value: '行政区代码', span: 8 },
+  //   { flag: 'value', value: 'xzqhdm', span: 16 }
+  // ]],
+  [[
+    { flag: 'label', value: '行政区名称', span: 8 },
+    { flag: 'value', value: 'xmc', span: 16 }
+  ]],
+  [[
+    { flag: 'label', value: '监测编号', span: 8 },
+    { flag: 'value', value: 'jcbh', span: 16 }
+  ]]
+  [[
+    { flag: 'label', value: '前类型', span: 8 },
+    { flag: 'value', value: 'qlxmc', span: 16 }
+  ]],
+  [[
+    { flag: 'label', value: '后类型', span: 8 },
+    { flag: 'value', value: 'hlxmc', span: 16 }
+  ]],
+  [[
+    { flag: 'label', value: '中心点经度', span: 8 },
+    { flag: 'value', value: 'lzb', span: 16 }
+  ]],
+  [[
+    { flag: 'label', value: '中心点纬度', span: 8 },
+    { flag: 'value', value: 'bzb',  span: 16 }//unit: '人',
+  ]],
+  [[
+    { flag: 'label', value: '监测面积(亩)', span: 8 },
+    { flag: 'value', value: 'jcmj', span: 16 }
+  ]],
+  [[
+    { flag: 'label', value: '前时相', span: 8 },
+    { flag: 'value', value: 'qsx', span: 16 }
+  ]],
+  [[
+    { flag: 'label', value: '后时相', span: 8 },
+    { flag: 'value', value: 'hsx', span: 16, }// isslot: true
+  ]]
+]
+

src/views/remote/farmland/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div id="mapApp">
-    <div class="btn">
-      <el-button @click="drawer = true">打开抽屉</el-button>
+    <div class="btn" v-if="nowObj.qsx">
+      <!-- <el-button @click="drawer = true">打开抽屉</el-button> -->
+      <span class="sx qsx">前时相:{{ nowObj.qsx }}</span>
+      <span class="sx hsx">后时相:{{ nowObj.hsx }}</span>
     </div>
     <MapView :maptype="maptype" ref="MapView" />
 
@@ -71,14 +73,18 @@
         />
       </div>
     </el-drawer>
+    <el-dialog title="详细信息" :visible.sync="dialogVisible" width="30%">
+      <CustomDetails :model="infoObj" :config="detailInfos"></CustomDetails>
+    </el-dialog>
   </div>
 </template>
   
   <script>
 import MapView from "../MapView.vue";
+import CustomDetails from "@/components/custom-detailsInfo.vue";
 import parse from "wellknown";
-import { getPcsj, listPcsjXQList } from "@/api/supervise/pcsj";
-
+import { getPcsj, listPcsjXQList, getPcsjXQ } from "@/api/supervise/pcsj";
+import { detailInfos } from "./config";
 import "ol/ol.css";
 // import { get as getProjection, transform } from "ol/proj.js";
 import Map from "ol/Map";
@@ -108,6 +114,7 @@ import { removeWebGLTile, addTiff } from "@/utils/help";
 export default {
   components: {
     MapView,
+    CustomDetails,
   },
   data() {
     return {
@@ -130,8 +137,11 @@ export default {
       },
       curPageResultLayer: {},
       vectorLayer: {},
-      nowId: "",
+      nowObj: {},
       itemObj: {}, //用于存储分屏高亮的实体
+      dialogVisible: false,
+      infoObj: {},
+      detailInfos: detailInfos,
     };
   },
   mounted() {
@@ -151,15 +161,15 @@ export default {
       removeWebGLTile("mapCon2");
       let urlQsx = this.newObj.proxypath + row.qsxtif;
       let urlHsx = this.newObj.proxypath + row.hsxtif;
-      if (this.nowId != row.id) {
+      if (this.nowObj.id != row.id) {
         this.maptype = "split";
-        this.nowId = row.id;
+        this.nowObj = row;
         addTiff("mapCon1", urlQsx);
         addTiff("mapCon2", urlHsx);
         this.test(row);
       } else {
         this.maptype = "normal";
-        this.nowId = "";
+        this.nowObj = {};
       }
     },
 
@@ -178,7 +188,10 @@ export default {
       });
     },
     handleDetails(row) {
-      console.log("我是详情");
+      getPcsjXQ(row.id).then((res) => {
+        this.infoObj = res.data;
+        this.dialogVisible = true;
+      });
     },
     handleClose() {
       this.drawer = false;
@@ -279,10 +292,23 @@ export default {
 </script>
 <style lang="scss" scoped>
 .btn {
-  position: absolute;
-  top: 0;
-  left: 60px;
-  z-index: 40;
+  // position: absolute;
+  // top: 0;
+  // left: 60px;
+  // z-index: 40;
+  .sx {
+    background: rgb(151, 250, 222);
+    padding: 5px 10px;
+    border: 1px solid #4949492b;
+    border-radius: 5px;
+    position: absolute;
+    top: 20px;
+    left: calc(50% - 420px);
+    z-index: 40;
+  }
+  .hsx {
+    left: calc(50% - 220px);
+  }
 }
 // .mask-layer{
 //   width: 264px !important;