详情

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

@@ -73,14 +73,23 @@
         />
       </div>
     </el-drawer>
+    <el-dialog
+      title="详细信息"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <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";
@@ -110,6 +119,7 @@ import { removeWebGLTile, addTiff } from "@/utils/help";
 export default {
   components: {
     MapView,
+    CustomDetails,
   },
   data() {
     return {
@@ -134,6 +144,9 @@ export default {
       vectorLayer: {},
       nowObj: {},
       itemObj: {}, //用于存储分屏高亮的实体
+      dialogVisible: false,
+      infoObj: {},
+      detailInfos: detailInfos,
     };
   },
   mounted() {
@@ -180,7 +193,10 @@ export default {
       });
     },
     handleDetails(row) {
-      console.log("我是详情");
+      getPcsjXQ(row.id).then((res) => {
+        this.infoObj = res.data;
+        this.dialogVisible = true;
+      });
     },
     handleClose() {
       this.drawer = false;
@@ -286,7 +302,7 @@ export default {
   // left: 60px;
   // z-index: 40;
   .sx {
-    background: #ffffff;
+    background: rgb(151, 250, 222);
     padding: 5px 10px;
     border: 1px solid #4949492b;
     border-radius: 5px;
@@ -296,7 +312,7 @@ export default {
     z-index: 40;
   }
   .hsx {
-    left: calc(50% - 240px);
+    left: calc(50% - 220px);
   }
 }
 // .mask-layer{