openlayers

package.json

@@ -25,18 +25,20 @@
     "element-plus": "2.7.6",
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",
+    "gcoord": "^1.0.6",
     "js-beautify": "1.14.11",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
     "nprogress": "0.2.0",
-    "ol": "^10.3.1",
+    "ol": "^10.0.0",
     "pinia": "2.1.7",
     "proj4": "^2.15.0",
     "splitpanes": "3.1.5",
     "vue": "3.4.31",
     "vue-cropper": "1.1.1",
     "vue-router": "4.4.0",
-    "vuedraggable": "4.1.0"
+    "vuedraggable": "4.1.0",
+    "wellknown": "^0.5.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "5.0.5",

src/api/supervise/pcsj.js

@@ -0,0 +1,183 @@
+import request from '@/utils/request'
+
+
+export function tiffUpload(parameter) {
+  return request({
+    url: '/file/uploadSpotZip',
+    method: 'post',
+    data: parameter,
+    headers: {
+      'Content-Type': 'multipart/form-data;'
+    }
+  })
+}
+
+// 查询监管批次数据列表
+export function listPcsj(query) {
+  return request({
+    url: '/apply/supervise/pcsj/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询监管批次数据详细
+export function getPcsj(id) {
+  return request({
+    url: '/apply/supervise/pcsj/' + id,
+    method: 'get'
+  })
+}
+
+// 新增监管批次数据
+export function addPcsj(data) {
+  return request({
+    url: '/apply/supervise/pcsj',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改监管批次数据
+export function updatePcsj(data) {
+  return request({
+    url: '/apply/supervise/pcsj',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除监管批次数据
+export function delPcsj(id) {
+  return request({
+    url: '/apply/supervise/pcsj/' + id,
+    method: 'delete'
+  })
+}
+
+// 查询监管批次数据列表
+export function listPcsjXQList(query) {
+  return request({
+    url: '/apply/supervise/xq/list',
+    method: 'get',
+    params: query
+  })
+}
+export function getPcsjXQ(id) {
+  return request({
+    url: '/apply/supervise/xq/' + id,
+    method: 'get',
+
+  })
+}
+export function getYwlxList(query) {
+  return request({
+    url: '/apply/supervise/ywlx/list',
+    method: 'get',
+    params: query
+  })
+}
+// 新增模版数据
+export function addYwlx(data) {
+  return request({
+    url: '/apply/supervise/ywlx',
+    method: 'post',
+    data: data
+  })
+}
+// 删除模版数据
+export function delYwlx(id) {
+  return request({
+    url: '/apply/supervise/ywlx/' + id,
+    method: 'delete'
+  })
+}
+//修改模版数据
+export function updateYwlx(data) {
+  return request({
+    url: '/apply/supervise/ywlx',
+    method: 'put',
+    data: data
+  })
+}
+
+//模版字段查询列表
+export function getYwlxFieldList(query) {
+  return request({
+    url: '/apply/supervise/ywlx/field/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 模版字段新增
+export function addYwlxField(data) {
+  return request({
+    url: '/apply/supervise/ywlx/field',
+    method: 'post',
+    data: data
+  })
+}
+// 删除模版数据
+export function delYwlxField(id) {
+  return request({
+    url: '/apply/supervise/ywlx/field/' + id,
+    method: 'delete'
+  })
+}
+//模版字段详情查询
+export function getYwlxField(id) {
+  return request({
+    url: '/apply/supervise/ywlx/field/' + id,
+    method: 'get'
+  })
+}
+//修改模版数据
+export function updateYwlxField(data) {
+  return request({
+    url: '/apply/supervise/ywlx/field',
+    method: 'put',
+    data: data
+  })
+}
+
+//查询图斑列表信息列表map
+export function getXqListMap(query) {
+  return request({
+    url: '/apply/supervise/xq/list.map',
+    method: 'get',
+    params: query
+  })
+}
+//查询图斑列表信息列表key
+export function getXqListKey(query) {
+  return request({
+    url: '/apply/supervise/xq/list.key',
+    method: 'get',
+    params: query
+  })
+}
+export function getXqIdMap(query) {
+  return request({
+    url: '/apply/supervise/xq/id.map',
+    method: 'get',
+    params: query
+  })
+}
+export function getXqIdKey(query) {
+  return request({
+    url: '/apply/supervise/xq/id.key',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// 查询部门列表
+export function listDept(query) {
+  return request({
+    url: '/system/dept/deptTree',
+    method: 'get',
+    params: query
+  })
+}

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/utils/help.js

@@ -0,0 +1,28 @@
+import WebGLTile from "ol/layer/WebGLTile";
+import GeoTIFF from "ol/source/GeoTIFF";
+export function removeWebGLTile(name) {
+  // console.log(name);
+  const allLayers = window.map[name].getLayers().getArray();
+  allLayers.forEach((layer) => {
+    if (layer instanceof WebGLTile) {
+      window.map[name].removeLayer(layer);
+    }
+  });
+  // console.log(window.map[name].getLayers().getArray(), name);
+}
+export function addTiff(name, url) {
+  const source = new GeoTIFF({
+    sources: [
+      {
+        url,
+        nodata: 0,
+        imageExtent: [38.207187, 106.672957, 38.21268, 106.67845],
+        projection: "EPSG:4326",
+      },
+    ],
+  });
+  const layer = new WebGLTile({
+    source: source,
+  });
+  window.map[name].addLayer(layer);
+}

src/views/remote/MapView.vue

@@ -0,0 +1,358 @@
+<template>
+  <div class="map">
+    <div id="mapDiv" v-show="maptype == 'normal'"></div>
+    <template>
+      <div id="mapCon1" v-show="maptype == 'split'"></div>
+      <div id="mapCon2" v-show="maptype == 'split'"></div>
+    </template>
+    <!-- 单屏影像切换 -->
+    <div class="ImageList" v-show="maptype == 'normal'">
+      <div
+        :class="['item', item.imgName]"
+        @click="shpBaseMap('mapDiv', item.index)"
+        v-for="(item, i) in containerList"
+        :key="i"
+      >
+        <span class="label"> {{ item.name }} </span>
+      </div>
+    </div>
+    <!-- 分屏的影像切换 -->
+    <div v-show="maptype == 'split'">
+      <div class="ImageList ImageList1">
+        <div
+          :class="['item', item.imgName]"
+          @click="shpBaseMap('mapCon1', item.index)"
+          v-for="(item, i) in containerList"
+          :key="i"
+        >
+          <span class="label"> {{ item.name }} </span>
+        </div>
+      </div>
+      <div class="ImageList">
+        <div
+          :class="['item', item.imgName]"
+          @click="shpBaseMap('mapCon2', item.index)"
+          v-for="(item, i) in containerList"
+          :key="i"
+        >
+          <span class="label"> {{ item.name }} </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import { ref, onMounted } from "vue";
+import "ol/ol.css";
+import { get as getProjection, transform } from "ol/proj.js";
+import { Map, View } from "ol";
+import Tile from "ol/layer/Tile";
+import OSM from "ol/source/OSM";
+import { Vector as SourceVec, XYZ } from "ol/source";
+import { defaults as defaultControls, ScaleLine } from "ol/control";
+export default {
+  props: {
+    maptype: {
+      type: String,
+      default: "normal",
+    },
+  },
+  data() {
+    return {
+      // type: "normal",
+      maps: {},
+      curPageResultLayer: null,
+      vectorLayer: null,
+      vecLayer: null, //矢量地图
+      cvaLayer: null, //矢量标注
+      imgLayer: null, //影像地图
+      imgCiaLayer: null, //影像标注
+      terLayer: null, //地形晕染
+      ctaLayer: null, //地形标注
+      containerList: [
+        {
+          name: "矢量地图",
+          index: 1,
+          imgName: "shiliangditu",
+        },
+        {
+          name: "影像地图",
+          index: 2,
+          imgName: "yingxiangditu",
+        },
+        {
+          name: "地形晕染",
+          index: 3,
+          imgName: "dixingyunran",
+        },
+      ],
+    };
+  },
+  methods: {
+    shpBaseMap(container, base) {
+      // this.changeBaseLayers("mapDiv", 2);
+      this.changeBaseLayers(container, base);
+    },
+    createMap() {
+      var view = new View({
+        center: transform([103.23, 35.33], "EPSG:4326", "EPSG:3857"), //地图初始中心点
+        // center: gcoord.transform(
+        //   [106.67591743605254, 38.21012898330025],
+        //   gcoord.WGS84,
+        //   gcoord.BD09
+        // ), //地图初始中心点
+        projection: "EPSG:4326",
+        zoom: 4,
+        minZoom: 1,
+      });
+      this.addMap("mapDiv", view);
+      // } else {
+      this.addMap("mapCon1", view);
+      this.addMap("mapCon2", view);
+      // }
+    },
+    changeBaseLayers(container, base) {
+      let indexs = [];
+      switch (base) {
+        case 1:
+          indexs = [0, 1];
+          break;
+        case 2:
+          indexs = [2, 3];
+          break;
+        case 3:
+          indexs = [4, 5];
+          break;
+      }
+      for (let i = 0; i <= 5; i++) {
+        this.maps[container]
+          .getAllLayers()
+          [i].setVisible(indexs.indexOf(i) > -1);
+      }
+    },
+    addMap(target, view) {
+      if (this.maps[target]) return;
+      // var gaodeMapLayer = new TileLayer({
+      //   title: "高德地图",
+      //   // source: new XYZ({
+      //   //   url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
+      //   //   wrapX: false,
+      //   // }),
+      //   source: new XYZ({
+      //     url: `https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=${this.arcgisKey}`,
+      //     // url: `https://wayback.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/WMTS/1.0.0/default028mm/MapServer/tile/4905/{z}/{y}/{x}`,
+      //     crossOrigin: "anonymous",
+      //     // attributions: ["ArcGIS", new Date().getFullYear()],
+      //   }),
+      // });
+      //实例化比例尺控件（ScaleLine）
+      var scaleLineControl = new ScaleLine({
+        //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
+        units: "metric",
+      });
+      var key = "12df6e32906dbb916fad14dc65ebdbf8"; // 请替换成你的key
+      // 矢量底图
+      let vecLayer = new Tile({
+        source: new XYZ({
+          url:
+            "http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
+            key,
+        }),
+        visible: true,
+      });
+      // 矢量标注
+      let cvaLayer = new Tile({
+        source: new XYZ({
+          url:
+            "http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
+            key,
+        }),
+        visible: true,
+      });
+
+      // 影像底图
+      let imgLayer = new Tile({
+        source: new XYZ({
+          url:
+            "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
+            key,
+        }),
+        visible: false,
+      });
+      // 影像标注
+      let imgCiaLayer = new Tile({
+        source: new XYZ({
+          url:
+            "http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
+            key,
+        }),
+        visible: false,
+      });
+      // 地形晕染
+      let terLayer = new Tile({
+        source: new XYZ({
+          url:
+            "http://t0.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
+            key,
+        }),
+        visible: false,
+      });
+      // 地形标注层
+      let ctaLayer = new Tile({
+        source: new XYZ({
+          url:
+            "http://t0.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
+            key,
+        }),
+        visible: false,
+      });
+
+      let map = new Map({
+        //地图容器div的ID
+        target,
+        //地图容器中加载的图层
+        // layers: [gaodeMapLayer],
+        layers: [vecLayer, cvaLayer, imgLayer, imgCiaLayer, terLayer, ctaLayer], //
+        // layers: [this.imgLayer,this.imgCiaLayer,],
+        //地图视图设置
+        view, //同一个view
+        controls: defaultControls({
+          //地图中默认控件
+          attribution: false, //地图数据源信息控件是否可收缩,默认为true
+        }).extend([scaleLineControl]), //加载鼠标位置控件
+      });
+      this.maps[target] = map;
+      window.map = this.maps;
+      map.on("moveend", function (e) {
+        var zoom = map.getView().getZoom(); //获取当前地图的缩放级别
+        console.log(zoom);
+        if (zoom >= 12) {
+          // tianjinlayer.getSource().clear(); //控制地图图层不可见
+          console.log("我大于12");
+        } else {
+          console.log("我小于12");
+        }
+      });
+    },
+  },
+  mounted() {
+    this.createMap();
+  },
+  watch: {
+    maptype() {
+      this.$nextTick(() => {
+        window.map.mapDiv.updateSize(); // 更新地图尺寸
+        window.map.mapCon1.updateSize(); // 更新地图尺寸
+        window.map.mapCon2.updateSize(); // 更新地图尺寸
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.map {
+  // width: calc(100% - 520px);
+  width: 70%;
+  height: 91vh;
+  position: relative;
+}
+
+#mapDiv {
+  width: 100%;
+  height: 100%;
+}
+
+#mapCon2 {
+  position: absolute;
+  top: 0px;
+  left: 50%;
+}
+
+#mapCon1 {
+  position: absolute;
+  top: 0px;
+  left: 0%;
+}
+
+#mapCon1,
+#mapCon2 {
+  width: 50%;
+  height: 100%;
+}
+
+.ImageList {
+  width: 265px;
+  height: 70px;
+  // background-color: rgba(255, 192, 203, 0.427);
+  position: absolute;
+  bottom: 20px;
+  // left: calc(50% - 100px);
+  left: calc(100% - 290px);
+  z-index: 40;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  .item {
+    width: 76px;
+    height: 57px;
+    background: rgba(14, 30, 69, 0.52);
+    line-height: 30px;
+    text-align: center;
+    cursor: pointer;
+    margin-right: 6px;
+    position: relative;
+    border-radius: 1.5px;
+    // box-sizing: content-box;
+    // box-sizing: border-box;
+
+    .label {
+      display: inline-block;
+      width: 146px;
+      height: 26px;
+      line-height: 26px;
+      position: absolute;
+      right: 2px;
+      bottom: 2px;
+      font-size: 21px;
+      background: #dddddd8f;
+      transform: scale(0.5);
+      transform-origin: bottom right;
+      border-radius: 2px 0 0 2px;
+      color: rgb(19, 113, 251);
+    }
+  }
+
+  .item1 {
+    position: absolute;
+    bottom: 20px;
+    // left: calc(50% - 100px);
+    left: calc(50% - 290px);
+  }
+
+  .shiliangditu {
+    background: url("@/assets/dituimg/shiliangditu.png") no-repeat !important;
+    background-size: 100% 100% !important;
+  }
+
+  .yingxiangditu {
+    background: url("@/assets/dituimg/yingxiangditu.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .dixingyunran {
+    background: url("@/assets/dituimg/dixingyunran.png") no-repeat;
+    background-size: 100% 100%;
+  }
+}
+
+.ImageList1 {
+  position: absolute;
+  bottom: 20px;
+  // left: calc(50% - 100px);
+  left: calc(50% - 290px);
+  z-index: 40;
+}
+</style>

src/views/remote/farmland/config.js

@@ -0,0 +1,49 @@
+
+// 详情字段
+export const detailInfos = [
+
+  [[
+    { flag: 'label', value: '监测编号', span: 8 },
+    { flag: 'value', value: 'jcbh', span: 16 }
+  ]],
+  [[
+    { flag: 'label', value: '监测面积(亩)', span: 8 },
+    { flag: 'value', value: 'jcmj', span: 16 }
+  ]],
+  // [[
+  //   { 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: 'qlxmc', span: 16 }
+  ]],
+  [[
+    { flag: 'label', value: '后类型', span: 8 },
+    { flag: 'value', value: 'hlxmc', 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
+  ]],
+  [[
+    { flag: 'label', value: '中心点经度', span: 8 },
+    { flag: 'value', value: 'lzb', span: 16 }
+  ]],
+  [[
+    { flag: 'label', value: '中心点纬度', span: 8 },
+    { flag: 'value', value: 'bzb', span: 16 }//unit: '人',
+  ]],
+
+
+]
+

src/views/remote/farmland/index.vue

@@ -0,0 +1,595 @@
+<template>
+  <div id="mapApp">
+    <div class="btn" v-if="nowObj['前时相']">
+      <!-- <el-button @click="drawer = true">打开抽屉</el-button> -->
+      <span class="sx qsx">前时相:{{ nowObj["前时相"] }}</span>
+      <span class="sx hsx">后时相:{{ nowObj["后时相"] }}</span>
+    </div>
+    <MapView :maptype="maptype" ref="MapView" />
+
+    <el-drawer
+      v-model="drawer"
+      :with-header="false"
+      :modal="false"
+      :wrapperClosable="false"
+      modal-class="mask-layer"
+      size="28vw"
+    >
+      <div class="jctbCon">
+        <div class="tbTitle">
+          <span>监测图斑{{ newObj.name }}</span>
+          <el-select
+            v-model="domains"
+            multiple
+            collapse-tags
+            placeholder="请选择其它搜索条件"
+            @change="handleChange"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.value == '监测编号' ? true : false"
+            >
+            </el-option>
+          </el-select>
+          <el-button @click="handleDownload">下载</el-button>
+          <!-- <el-input
+            placeholder="请输入监测编号查询"
+            prefix-icon="el-icon-search"
+            v-model="queryParams['监测编号']"
+            @change="getTemplate()"
+          >
+          </el-input> -->
+          <div class="demo-input-suffix">
+            监测编号:
+            <el-input
+              placeholder="请输入监测编号查询"
+              prefix-icon="el-icon-search"
+              v-model="queryParams['监测编号']"
+              @change="getTemplate()"
+            >
+            </el-input>
+          </div>
+          <div class="demo-input-suffix" v-for="(ditem, i) in domains" :key="i">
+            {{ ditem + ":" }}
+            <el-input
+              :placeholder="'请输入' + ditem + '查询'"
+              prefix-icon="el-icon-search"
+              v-model="queryParams[ditem]"
+              @change="getTemplate()"
+            >
+            </el-input>
+            <el-button @click.prevent="removeDomain(ditem)">删除</el-button>
+          </div>
+        </div>
+        <div class="numCard">
+          <div class="cardItem">
+            <span>监测图斑个数(个):</span>
+            <span>{{ newObj.spotsnumber }}</span>
+          </div>
+          <div class="cardItem jc">
+            <span>监测面积(亩):</span>
+            <span>{{ newObj.spotsarea }}</span>
+          </div>
+        </div>
+        <el-table
+          :data="tableData"
+          border
+          style="width: 100%"
+          @row-click="tableClick"
+        >
+          <el-table-column
+            :prop="templateList[i]"
+            :label="templateList[i]"
+            show-overflow-tooltip
+            v-for="(item, i) in templateList"
+            :key="i"
+            :width="templateList[i] == '监测编号' ? 200 : ''"
+            align="center"
+          >
+          </el-table-column>
+          <el-table-column label="操作" align="center">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                @click.stop="handleDetails(scope.row)"
+                >详情</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getTemplate"
+        />
+      </div>
+    </el-drawer>
+    <el-dialog title="详细信息" :visible.sync="dialogVisible" width="30%">
+      <!-- <CustomDetails :model="infoObj" :config="detailInfos"></CustomDetails> -->
+      <el-descriptions class="margin-top" :column="1">
+        <el-descriptions-item
+          :label="item"
+          v-for="(item, i) in descriptionsList"
+          :key="i"
+          >{{ infoObj[item] }}</el-descriptions-item
+        >
+      </el-descriptions>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import MapView from "../MapView.vue";
+import CustomDetails from "@/components/custom-detailsInfo.vue";
+import parse from "wellknown";
+// import { pinyin } from "pinyin-pro";
+import {
+  getPcsj,
+  listPcsjXQList,
+  getPcsjXQ,
+  getXqListMap,
+  getXqListKey,
+  getXqIdMap,
+  getXqIdKey,
+} 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";
+import View from "ol/View";
+import TileLayer from "ol/layer/Tile";
+import VectorSource from "ol/source/Vector";
+import VectorLayer from "ol/layer/Vector";
+import Feature from "ol/Feature";
+import LineString from "ol/geom/LineString";
+import Stroke from "ol/style/Stroke";
+import Fill from "ol/style/Fill";
+import { Vector as LayerVec } from "ol/layer";
+import { Style, Icon } from "ol/style";
+import { Point } from "ol/geom";
+import { Vector as SourceVec, XYZ } from "ol/source";
+import Tile from "ol/layer/Tile";
+import { OSM } from "ol/source";
+import * as control from "ol/control";
+import * as coordinate from "ol/coordinate";
+import ImageLayer from "ol/layer/Image";
+import ImageStatic from "ol/source/ImageStatic";
+import Draw from "ol/interaction/Draw";
+import GeoJSON from "ol/format/GeoJSON";
+// import { transform } from "@/utils/transformUtils";
+import { removeWebGLTile, addTiff } from "@/utils/help";
+
+export default {
+  components: {
+    MapView,
+    CustomDetails,
+  },
+  data() {
+    return {
+      options: [],
+      domains: [], //存储动态搜索列表
+      // value: ["监测编号"], //下拉框选中的值
+      maptype: "normal",
+      total: 0,
+      queryParams: {
+        监测编号: "", //监测编号
+        pageNum: 1,
+        pageSize: 10,
+        pcsjid: this.$route.query.id,
+      },
+      drawer: true,
+      direction: "rtl",
+
+      tableData: [],
+      newObj: {
+        name: "f52d8b03a7214d9098ca44a7ea641d9b",
+        spotsnumber: 0,
+        spotsarea: 0,
+      },
+      curPageResultLayer: {},
+      vectorLayer: {},
+      nowObj: {},
+      itemObj: {}, //用于存储分屏高亮的实体
+      dialogVisible: false,
+      infoObj: {},
+      detailInfos: detailInfos,
+      templateList: [],
+      descriptionsList: [], //详情描述列表存储字段
+      envelopegeomObj: {}, //用于存储进入页面飞入视角的对象
+    };
+  },
+  mounted() {
+    // 绑定事件，编写回调函数
+    this.$nextTick(() => {
+      getPcsj(this.$route.query.id).then((response) => {
+        this.newObj = response.data;
+
+        // if (this.newObj.envelopegeom && this.newObj.envelopegeom != "") {
+        //   if (typeof this.newObj.envelopegeom === "string") {
+        //     let geom = this.newObj.envelopegeom;
+        //     this.newObj.envelopegeom = parse(geom);
+        //   }
+        //   let features = new GeoJSON().readFeatures(this.newObj.envelopegeom);
+        //   this.envelopegeomObj = new VectorLayer({
+        //     source: new VectorSource({
+        //       features: features,
+        //     }),
+        //     style: function (feature) {
+        //       return new Style({
+        //         stroke: new Stroke({
+        //           //边界样式
+        //           color: "rgba(255, 0, 0, 1)",
+        //           width: 2,
+        //         }),
+        //       });
+        //     },
+        //     zIndex: 9999,
+        //   });
+        //   let fullExtent = this.envelopegeomObj.getSource().getExtent();
+
+        //   window.map["mapDiv"]
+        //     .getView()
+        //     .fit(fullExtent, window.map["mapDiv"].getSize());
+        //   window.map["mapDiv"].addLayer(this.envelopegeomObj);
+        // }
+      });
+      this.getTemplate();
+    });
+  },
+
+  methods: {
+    removeDomain(item) {
+      var index = this.domains.indexOf(item);
+      if (index !== -1) {
+        this.domains.splice(index, 1);
+        this.$delete(this.queryParams, item); //删除对象属性
+        this.getTemplate();
+      }
+    },
+    handleDelete(row) {
+      this.tableData.forEach((item, i) => {
+        window.map["mapDiv"].removeLayer(this.curPageResultLayer["mapDiv" + i]);
+      });
+    },
+    handleChange(val) {
+      // this.$set(this.queryParams, val, "");
+      // this.domains.push(val);
+      // this.domains = val;
+      if (this.domains.indexOf(val) == -1) {
+        this.domains = val;
+        this.$set(this.queryParams, val, "");
+      } else {
+        this.domains.splice(this.domains.indexOf(val), 1);
+        this.$delete(this.queryParams, item);
+      }
+      console.log(this.queryParams, ";this.queryParams", this.domains);
+    },
+    //动态获取设置的模版字段
+    getTemplate() {
+      this.handleDelete();
+      let arr = [
+        "中心点经度",
+        "中心点纬度",
+        "前时相",
+        "后时相",
+        "空间信息",
+        "geom",
+        "前时相对应影像数据",
+        "后时相对应影像数据",
+      ];
+      this.templateList = [];
+      this.options = [];
+
+      getXqListKey(this.queryParams).then((res) => {
+        res.data.forEach((i) => {
+          if (!arr.includes(i)) {
+            this.templateList.push(i);
+            // this.options.push({
+            //   // value: pinyin(i, {
+            //   //   pattern: "first",
+            //   //   toneType: "none",
+            //   //   separator: "",
+            //   // }),
+            //   label: i,
+            // });
+            this.options.push({
+              value: i,
+              label: i,
+            });
+          }
+        });
+      });
+
+      getXqListMap(this.queryParams).then((res) => {
+        console.log(res, "======");
+        this.tableData = res.rows;
+        this.total = res.total;
+        this.initVectorLayer("mapDiv");
+        this.initVectorLayer("mapCon1");
+        this.initVectorLayer("mapCon2");
+        this.addGeoJson("mapDiv");
+        this.addGeoJson("mapCon1");
+        this.addGeoJson("mapCon2");
+      });
+    },
+    handleDownload() {
+      const zipfile = this.newObj.proxypath + ".zip";
+      window.open(`${zipfile}`);
+    },
+    tableClick(row) {
+      removeWebGLTile("mapCon1");
+      removeWebGLTile("mapCon2");
+      let urlQsx = this.newObj.proxypath + row["前时相对应影像数据"];
+      let urlHsx = this.newObj.proxypath + row["后时相对应影像数据"];
+      if (this.nowObj.id != row.id) {
+        this.maptype = "split";
+        this.nowObj = row;
+        addTiff("mapCon1", urlQsx);
+        addTiff("mapCon2", urlHsx);
+        this.test(row);
+      } else {
+        this.maptype = "normal";
+        this.nowObj = {};
+      }
+    },
+
+    getList() {
+      listPcsjXQList(this.queryParams).then((response) => {
+        this.tableData = response.rows;
+        this.total = response.total;
+        this.initVectorLayer("mapDiv");
+        this.initVectorLayer("mapCon1");
+        this.initVectorLayer("mapCon2");
+        this.addGeoJson("mapDiv");
+        this.addGeoJson("mapCon1");
+        this.addGeoJson("mapCon2");
+      });
+    },
+    handleDetails(row) {
+      getXqIdMap({ pcsjid: this.$route.query.id, id: row.id }).then((res) => {
+        this.infoObj = res.data;
+      });
+      getXqIdKey({ pcsjid: this.$route.query.id }).then((res) => {
+        this.descriptionsList = res.data;
+      });
+      this.dialogVisible = true;
+    },
+    handleClose() {
+      this.drawer = false;
+    },
+    test(item) {
+      window.map["mapCon1"].removeLayer(this.itemObj);
+      window.map["mapCon2"].removeLayer(this.itemObj);
+      if (item.geom && item.geom != "") {
+        if (typeof item.geom === "string") {
+          let geom = this.tableData[i].geom;
+          item.geom = parse(geom);
+        }
+        let features = new GeoJSON().readFeatures(item.geom);
+        this.itemObj = new VectorLayer({
+          source: new VectorSource({
+            features: features,
+          }),
+          style: function (feature) {
+            return new Style({
+              stroke: new Stroke({
+                //边界样式
+                color: "rgba(255, 0, 0, 1)",
+                width: 2,
+              }),
+            });
+          },
+          zIndex: 9999,
+        });
+        window.map["mapCon1"].getView().animate({
+          center: [item["中心点经度"], item["中心点纬度"]],
+          zoom: 16.5,
+          duration: 2000, // 动画持续时间，单位毫秒
+        });
+        window.map["mapCon1"].addLayer(this.itemObj);
+        window.map["mapCon2"].addLayer(this.itemObj);
+      }
+    },
+    //创建监测图斑列表实体
+    addGeoJson(name) {
+      this.tableData.forEach((titem, i) => {
+        if (titem.geom && titem.geom != "") {
+          if (typeof titem.geom === "string") {
+            let geom = this.tableData[i].geom;
+            titem.geom = parse(geom);
+          }
+          let features = new GeoJSON().readFeatures(titem.geom);
+          var tempName = name + i;
+          this.curPageResultLayer[tempName] = new VectorLayer({
+            source: new VectorSource({
+              features: features,
+            }),
+            style: function (feature) {
+              return new Style({
+                stroke: new Stroke({
+                  //边界样式
+                  color: "rgba(0, 0, 255, 1)",
+                  width: 2,
+                }),
+              });
+            },
+            zIndex: 9999,
+          });
+          window.map[name].addLayer(this.curPageResultLayer[tempName]);
+        }
+      });
+      let fullExtent = this.curPageResultLayer[
+        name + (this.tableData.length - 1)
+      ]
+        .getSource()
+        .getExtent();
+      window.map[name].getView().fit(fullExtent, {
+        duration: 3, //动画的持续时间,
+        callback: null,
+      });
+    },
+    /**
+     * 初始化地图矢量图层
+     */
+    initVectorLayer(name) {
+      if (!this.vectorLayer[name]) {
+        let vectorSource = new VectorSource({
+          // projection: "EPSG:3857",
+        });
+        this.vectorLayer[name] = new VectorLayer({
+          source: vectorSource,
+          style: new Style({
+            stroke: new Stroke({
+              color: "#f00",
+              width: 2,
+            }),
+          }),
+        });
+        window.map[name].addLayer(this.vectorLayer[name]);
+      }
+      if (!this.curPageResultLayer[name]) {
+        let vectorSource = new VectorSource();
+        this.curPageResultLayer[name] = new VectorLayer({
+          source: vectorSource,
+          zIndex: 999,
+          style: new Style({
+            stroke: new Stroke({
+              color: "#1f1cd3",
+              width: 2,
+            }),
+          }),
+        });
+        window.map[name].addLayer(this.curPageResultLayer[name]);
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.btn {
+  // 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;
+// }
+::v-deep .el-drawer__wrapper {
+  position: static !important;
+}
+
+::v-deep .el-drawer__container {
+  position: static !important;
+}
+
+::v-deep .el-drawer__body {
+  width: 28vw;
+}
+
+.jctbCon {
+  .tbTitle {
+    display: flex;
+    justify-content: space-around;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+
+    ::v-deep .el-input {
+      // width: 28%;
+      width: 55%;
+    }
+
+    ::v-deep .el-input--suffix {
+      width: 100% !important;
+    }
+  }
+
+  .numCard {
+    width: 100%;
+    height: 120px;
+    display: flex;
+    // background-color: rgba(255, 192, 203, 0.272);
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    .cardItem {
+      // width: 230px;
+      width: 200px;
+      height: 85px;
+      background: linear-gradient(
+        180deg,
+        rgba(30, 198, 149, 1) 0%,
+        rgba(30, 198, 149, 1) 0%,
+        rgba(51, 204, 204, 1) 100%,
+        rgba(51, 204, 204, 1) 100%
+      );
+      border: none;
+      border-radius: 4px;
+      -moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
+      -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
+      box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.349019607843137);
+      font-family: "Arial Negreta", "Arial Normal", "Arial";
+      font-weight: 700;
+      font-style: normal;
+      font-size: 14px;
+      color: #ffffff;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      span {
+        display: inline-block;
+        width: 100%;
+        height: 39%;
+        // background: #faebd78c;
+        text-align: center;
+      }
+    }
+
+    .jc {
+      background: linear-gradient(
+        90deg,
+        rgba(244, 174, 149, 1) 0%,
+        rgba(244, 174, 149, 1) 0%,
+        rgba(226, 113, 140, 1) 100%,
+        rgba(226, 113, 140, 1) 100%
+      );
+    }
+  }
+}
+</style>
+<style scoped>
+html,
+body {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+}
+
+#mapApp {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/remote/satellite/index.vue

@@ -0,0 +1,485 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="行政区">
+        <!-- <el-col :span="4"> -->
+        <treeselect v-model="queryParams.xzqdm" :options="deptOptions" :normalizer="normalizer" placeholder="选择行政区"
+          noOptionsText="暂无数据" noChildrenText="没有子选项" :value="selectedValues" @select="treeselecthange" />
+        <!-- </el-col> -->
+      </el-form-item>
+      <el-form-item label="文件名称">
+        <el-input v-model="queryParams.name" placeholder="请输入文件名称" clearable @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item label="数据日期">
+        <el-col :span="11">
+          <el-date-picker type="date" placeholder="选择开始日期" v-model="queryParams.beginTime" style="width: 100%"
+            value-format="yyyy-MM-dd"></el-date-picker>
+        </el-col>
+        <el-col class="line" :span="2">-</el-col>
+        <el-col :span="11">
+          <el-date-picker type="date" placeholder="选择截止日期" v-model="queryParams.endTime" style="width: 100%"
+            value-format="yyyy-MM-dd"></el-date-picker>
+        </el-col>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
+          v-hasPermi="['supervise:pcsj:list']">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          v-hasPermi="['supervise:pcsj:list']">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-upload" @click="fileUploadHandle" size="mini"
+          v-hasPermi="['supervise:pcsj:upload']">上传</el-button>
+      </el-col>
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['supervise:pcsj:add']"
+          >新增</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['supervise:pcsj:edit']"
+          >修改</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['supervise:pcsj:remove']"
+          >删除</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['supervise:pcsj:export']"
+          >导出</el-button
+        >
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar> -->
+    </el-row>
+
+    <el-table v-loading="loading" :data="pcsjList">
+      <!-- @selection-change="handleSelectionChange" -->
+      <!-- <el-table-column type="selection" width="55" align="center" /> -->
+      <!-- <el-table-column label="序号" align="center" prop="index" /> -->
+      <el-table-column label="序号" type="index" align="center">
+        <!-- <template #default="scope">
+          <span>{{ scope.$index + 1 }}</span>
+        </template> -->
+      </el-table-column>
+      <el-table-column label="文件名称" align="center" prop="name" />
+      <el-table-column label="区县名称" align="center" prop="xzqmc" />
+      <el-table-column label="图斑个数(个)" align="center" prop="spotsnumber" width="180">
+        <!-- <template #default="scope">
+          <span>{{ parseTime(scope.row.uploadtime, "{y}-{m}-{d}") }}</span>
+        </template> -->
+      </el-table-column>
+      <el-table-column label="监测面积（亩）" align="center" prop="spotsarea" />
+      <el-table-column label="文件大小(MB)" align="center" prop="spotssize">
+        <template #default="scope">
+          <!-- <span>{{
+            scope.row.spotssize
+              ? (scope.row.spotssize / 1024 / 1024).toFixed(2)
+              : ""
+          }}</span> -->
+          <!-- <span>{{ scope.row.spotssize }}</span> -->
+        </template>
+      </el-table-column>
+      <el-table-column label="上传时间" align="center" prop="readtime" />
+      <el-table-column label="数据日期" align="center" prop="filetime" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleBrowse(scope.row)"
+            :disabled="scope.row.readstatus != 0" v-hasPermi="['supervise:pcsj:list']">浏览</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleDownload(scope.row)"
+            v-hasPermi="['supervise:pcsj:list']">下载</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+            v-hasPermi="['supervise:pcsj:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
+
+    <!-- 添加或修改监管批次数据对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入名称" />
+        </el-form-item>
+        <el-form-item label="上传用户" prop="uploaduser">
+          <el-input v-model="form.uploaduser" placeholder="请输入上传用户" />
+        </el-form-item>
+        <el-form-item label="上传时间" prop="uploadtime">
+          <el-date-picker clearable v-model="form.uploadtime" type="date" value-format="yyyy-MM-dd"
+            placeholder="请选择上传时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="文件位置" prop="filepath">
+          <el-input v-model="form.filepath" placeholder="请输入文件位置" />
+        </el-form-item>
+        <el-form-item label="shp位置" prop="shppath">
+          <el-input v-model="form.shppath" placeholder="请输入shp位置" />
+        </el-form-item>
+        <el-form-item label="文件服务发布地址" prop="proxypath">
+          <el-input v-model="form.proxypath" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="解压文件地址" prop="unzippath">
+          <el-input v-model="form.unzippath" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="是否入库" prop="storage">
+          <el-input v-model="form.storage" placeholder="请输入是否入库" />
+        </el-form-item>
+        <el-form-item label="行政区划代码" prop="xzqhdm">
+          <el-input v-model="form.xzqhdm" placeholder="请输入行政区划代码" />
+        </el-form-item>
+        <el-form-item label="图斑数量" prop="spotsnumber">
+          <el-input v-model="form.spotsnumber" placeholder="请输入图斑数量" />
+        </el-form-item>
+        <el-form-item label="图斑面积" prop="spotsarea">
+          <el-input v-model="form.spotsarea" placeholder="请输入图斑面积" />
+        </el-form-item>
+        <el-form-item label="图斑大小" prop="spotssize">
+          <el-input v-model="form.spotssize" placeholder="请输入图斑大小" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" v-hasPermi="['supervise:pcsj:upload']" @click="submitForm">确 定</el-button>
+        <el-button v-hasPermi="['supervise:pcsj:upload']" @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog title="文件上传" :visible.sync="fileUploadDiv" width="400px" append-to-body>
+      <el-upload class="upload-demo" drag :action="uploadFileUrl" :before-upload="handleBeforeUpload"
+        :on-error="handleUploadError" :on-success="handleUploadSuccess" :limit="1" accept=".zip" :file-list="fileList"
+        :show-file-list="true" multiple>
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip" slot="tip">只能上传zip文件</div>
+      </el-upload>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listPcsj,
+  getPcsj,
+  delPcsj,
+  addPcsj,
+  updatePcsj,
+  tiffUpload,
+  listDept,
+} from "@/api/supervise/pcsj";
+// import Treeselect from "@riophae/vue-treeselect";
+// import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+export default {
+  name: "Pcsj",
+  // components: { Treeselect },
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 监管批次数据表格数据
+      pcsjList: [
+        // {
+        //   name: "", //文件名称
+        //   xzqdm: "", //区县名称
+        //   spotsnumber: "", //图斑个数
+        //   spotsarea: "", //监测面积（亩）
+        //   spotssize: "", //文件大小
+        //   filetime: "", //录入时间
+        // },
+      ],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: "", //文件名称
+        xzqdm: undefined, //区县编码
+        beginTime: "", //录入时间
+        endTime: "", //处理时间
+      },
+      // 表单参数
+      form: {
+        name: "1",
+        uploaduser: "1",
+        uploadtime: "1",
+        filepath: "1",
+        shppath: "1",
+        proxypath: "1",
+        unzippath: "1",
+        filetype: "1",
+        storage: "1",
+        status: "1",
+        xzqhdm: "1",
+        spotsnumber: "1",
+        spotsarea: "1",
+        spotssize: "1",
+      },
+      // 表单校验
+      rules: {},
+      fileList: [],
+      fileUploadDiv: false, //文件上传弹窗
+      loading2: null,
+      uploadFileUrl: '',//process.env.VUE_APP_BASE_API + "/file/uploadSpotZip",
+      // 部门树选项
+      deptOptions: [],
+      selectedValues: [],
+    };
+  },
+  created() {
+    this.getList();
+    this.getDept();
+  },
+  computed: {
+    watchDeptId() {
+      return this.queryParams.xzqdm;
+    },
+  },
+  watch: {
+    watchDeptId(newVal) {
+      // console.log(newVal,'newValnewVal');
+    },
+  },
+  methods: {
+    getDept() {
+      // console.log(this.$store.state, '----')
+      // 查询参数
+      let queryParams = {
+        deptId: '101010',//this.$store.state.user.deptId,
+        status: undefined,
+      };
+      listDept(queryParams).then((res) => {
+        this.deptOptions = res.data;
+      });
+    },
+    treeselecthange(value) {
+      this.selectedValues = value.district;
+      this.queryParams.xzqdm = value.district;
+    },
+    handleChange() { },
+    /** 转换部门数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.district,
+        label: node.label,
+        children: node.children,
+      };
+    },
+    fileUploadHandle() {
+      console.log(this.uploadFileUrl);
+      this.uploadFileUrl = this.uploadFileUrl;
+      this.fileList = [];
+      this.fileUploadDiv = true;
+    },
+    handleBeforeUpload(file) {
+      this.$modal.loading("正在上传文件，请稍候...");
+      return true;
+    },
+    // 上传失败
+    handleUploadError(err) {
+      this.$modal.msgError("上传文件失败，请重试");
+      this.$modal.closeLoading();
+    },
+    // 上传成功回调
+    handleUploadSuccess(res, file) {
+      console.log("handleUploadSuccess");
+      this.fileList = [];
+      this.fileUploadDiv = false;
+      this.$modal.closeLoading();
+      this.$modal.msgSuccess(res.message);
+      this.getList();
+    },
+    handleDownload(row) {
+      const zipfile = row.proxypath + ".zip";
+      window.open(`${zipfile}`);
+    },
+    /** 查询监管批次数据列表 */
+    getList() {
+      this.loading = true;
+      listPcsj(this.queryParams).then((response) => {
+        this.pcsjList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        name: null,
+        uploaduser: null,
+        uploadtime: null,
+        filepath: null,
+        shppath: null,
+        proxypath: null,
+        unzippath: null,
+        filetype: null,
+        storage: null,
+        status: null,
+        xzqhdm: null,
+        xzqmc: null,
+        spotsnumber: null,
+        spotsarea: null,
+        spotssize: null,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      // this.resetForm("queryForm");
+      // 查询参数
+      (this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        name: "", //文件名称
+        xzqdm: "", //区县名称
+        beginTime: "", //录入时间
+        endTime: "", //处理时间
+      }),
+        this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加监管批次数据";
+    },
+    // 浏览按钮
+    handleBrowse(row) {
+      this.$router.push({ path: "/remote/gdjc", query: { id: row.id } });
+    },
+
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids;
+      getPcsj(id).then((response) => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改监管批次数据";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.id != null) {
+            updatePcsj(this.form).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addPcsj(this.form).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      console.log(row)
+      const ids = row.id || this.ids;
+      const idname = row.name;
+      this.$modal
+        .confirm('是否确认删除监管批次数据名称为"' + idname + '"的数据项？')
+        .then(function () {
+          return delPcsj(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => { });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download(
+        "supervise/pcsj/export",
+        {
+          ...this.queryParams,
+        },
+        `pcsj_${new Date().getTime()}.xlsx`
+      );
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+::v-deep .el-form-item--medium .el-form-item__label {
+  font-size: 11px;
+}
+
+::v-deep .vue-treeselect {
+  display: table-caption !important;
+  width: 200px;
+}
+</style>