地图图斑加载与表单接口接入

package.json

@@ -49,6 +49,8 @@
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
     "nprogress": "0.2.0",
+    "ol": "^6.14.1",
+    "proj4": "^2.11.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
@@ -58,7 +60,8 @@
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.0"
+    "vuex": "3.6.0",
+    "wellknown": "^0.5.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

src/views/remote/MapView.vue

@@ -0,0 +1,236 @@
+<template>
+  <div id="mapDiv"></div>
+  <!-- <div>
+    <div id="mapCon1"></div>
+    <div id="mapCon2"></div>
+  </div> -->
+</template>
+
+<script>
+import "ol/ol.css";
+// import { Map, View } from "ol"; //地图,视图
+// import OSM from "ol/source/OSM"; //可以理解为数据源,就是一张图片
+// // import TileLayer from "ol/layer/Tile"; //可以理解为图层
+// import XYZ from "ol/source/XYZ.js";
+import { get as getProjection, transform } from "ol/proj.js";
+// import { Vector as VectorSource } from "ol/source";
+// import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
+// import GeoJSON from "ol/format/GeoJSON";
+// import { Fill, Stroke, Style } from "ol/style";
+// // import { parse } from 'ol/expr/expression';
+// import TileWMS from "ol/source/TileWMS";
+// import { fromLonLat } from "ol/proj";
+// import { Circle as CircleStyle, RegularShape } from "ol/style";
+// import { Polygon } from "ol/geom";
+// import Feature from "ol/Feature";
+// // import {OlOverlay} from 'ol/comon';
+import parse from "wellknown";
+
+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 Style from "ol/style/Style";
+// import XYZ from "ol/source/XYZ";
+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 Draw, { createRegularPolygon, createBox } from "ol/interaction/Draw";
+import GeoJSON from "ol/format/GeoJSON";
+export default {
+  data() {
+    return {
+      map: null,
+      map2: null,
+      //   drawSource: new Vector(),
+      curPageResultLayer: null,
+      vectorLayer: null,
+    };
+  },
+  methods: {
+    createMap() {
+      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,
+        }),
+      });
+      //   var view = new View({
+      //     center: transform([103.23, 35.33], "EPSG:4326", "EPSG:3857"), //地图初始中心点
+      //     projection: "EPSG:3857",
+      //     zoom: 4,
+      //     minZoom: 1,
+      //   });
+      var view = new View({
+        center: [103.23, 35.33], //地图初始中心点
+        projection: "EPSG:4326",
+        zoom: 4,
+        minZoom: 1,
+      });
+      this.map = new Map({
+        target: "mapDiv",
+        // target: "mapCon1",
+        layers: [gaodeMapLayer],
+        //         layers: [
+        //      new TileLayer({
+        //        source: new TileWMS({
+        //          url: 'http://demo.boundlessgeo.com/geoserver/wms',
+        //          params: {'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'},
+        //          serverType: 'geoserver',
+        //        })
+        //      })
+        //    ],
+        view: view,
+      });
+      window.map = this.map;
+      window.view = this.map.view;
+      console.log(this.map, "mapmap");
+      //   var gaodeMapLayer2 = 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,
+      //     }),
+      //   });
+      //     this.map2 = new Map({
+      //       //地图容器div的ID
+      //       target: "mapCon2",
+      //       //地图容器中加载的图层
+      //       layers: [gaodeMapLayer2],
+      //       //地图视图设置
+      //       view: view, //同一个view
+      //     });
+    },
+    addGeoJson() {
+      //   let features = [];
+      let aaa = [
+        parse(
+          "SRID=4326;MULTIPOLYGON(((106.67591743605254 38.21012898330025,106.67588081160454 38.21003303839916,106.6755667227518 38.21006159193115,106.67551318487904 38.20994380861134,106.67578087424232 38.20991525507935,106.67573447475257 38.209776056610394,106.67594862624321 38.20973322631232,106.6759771797752 38.20983673286605,106.67621495734579 38.20981715370431,106.6761636759473 38.20962317624071,106.67538440246796 38.209765943901175,106.67538440246796 38.20984050880776,106.67519166939297 38.20987258822527,106.6752925390611 38.2102444053304,106.67591743605254 38.21012898330025)))"
+        ),
+        parse(
+          "SRID=4490;MULTIPOLYGON(((106.67591743605254 38.21012898330025,106.67588081160454 38.21003303839916,106.6755667227518 38.21006159193115,106.67551318487904 38.20994380861134,106.67578087424232 38.20991525507935,106.67573447475257 38.209776056610394,106.67594862624321 38.20973322631232,106.6759771797752 38.20983673286605,106.67621495734579 38.20981715370431,106.6761636759473 38.20962317624071,106.67538440246796 38.209765943901175,106.67538440246796 38.20984050880776,106.67519166939297 38.20987258822527,106.6752925390611 38.2102444053304,106.67591743605254 38.21012898330025)))"
+        ),
+        parse('MULTIPOLYGON (((106.67733442033443 38.21125613092812, 106.67738081982401 38.21093490369236, 106.6774129425475 38.210838535521646, 106.67766992433627 38.21060653807359, 106.6776669653542 38.21032654901211, 106.67760183022085 38.21030441628767, 106.67691082322631 38.210325163597304, 106.67688941155421 38.21061065255816, 106.67697048026685 38.21085452911319, 106.67702270721048 38.21094542330172, 106.6770605609463 38.211837288225865, 106.67703812786709 38.21193125341648, 106.67700838460445 38.21235360774489, 106.6777222229062 38.21252611866794, 106.67770437694878 38.2123119671773, 106.67766992433627 38.212137721230704, 106.67765574126179 38.212122871762745, 106.67758426373996 38.212112736890276, 106.67752001829297 38.21206276820914, 106.67739807450772 38.21193811456209, 106.67736100262493 38.21185544075013, 106.67733442033443 38.21125613092812)))')
+      ];
+      for (let i = 0; i < aaa.length; i++) {
+        // if (typeof data[i] == "string") {
+        //   data[i] = JSON.parse(data[i]);
+        // }
+        let features = new GeoJSON().readFeatures(aaa[i]);
+        this.curPageResultLayer.getSource().addFeatures(features);
+      }
+      let fullExtent = this.curPageResultLayer.getSource().getExtent();
+      this.map.getView().fit(fullExtent, {
+        duration: 3, //动画的持续时间,
+        callback: null,
+      });
+
+      //   console.log(features,'features');
+      //   let vectorSource = new VectorSource({
+      //     features: features,
+      //     // features: aaa.coordinates,
+      //   });
+      //   let vectorLayer = new VectorLayer({
+      //     source: vectorSource,
+      //     // 绘制后填充的颜色
+      //     style: new Style({
+      //       fill: new Fill({
+      //         color: "rgba(255, 0, 0, 0.2)"
+      //       }),
+      //       stroke: new Stroke({
+      //         color: "rgba(255, 0, 0, 1)",
+      //         width: 2
+      //       }),
+      //       image: new CircleStyle({
+      //         radius: 7,
+      //         fill: new Fill({
+      //           color: "rgba(255, 0, 0, 1)"
+      //         })
+      //       })
+      //     }),
+      //   });
+      //   console.log(vectorLayer,'vectorLayer');
+      //   this.map.addLayer(vectorLayer);
+      //   console.log(this.map,'this.map');
+    },
+    /**
+     * 初始化地图矢量图层
+     */
+    initVectorLayer() {
+      if (!this.vectorLayer) {
+        let vectorSource = new VectorSource({
+          // projection: "EPSG:3857",
+        });
+        this.vectorLayer = new VectorLayer({
+          source: vectorSource,
+          style: new Style({
+            stroke: new Stroke({
+              color: "#f00",
+              width: 2,
+            }),
+          }),
+        });
+        this.map.addLayer(this.vectorLayer);
+      }
+      if (!this.curPageResultLayer) {
+        let vectorSource = new VectorSource();
+        this.curPageResultLayer = new VectorLayer({
+          source: vectorSource,
+          zIndex: 99999,
+          style: new Style({
+            stroke: new Stroke({
+              color: "#1f1cd3",
+              width: 2,
+            }),
+          }),
+        });
+        this.map.addLayer(this.curPageResultLayer);
+      }
+    },
+  },
+  mounted() {
+    this.createMap();
+    this.initVectorLayer();
+    this.addGeoJson();
+  },
+};
+</script>
+
+<style scoped>
+#mapDiv {
+  width: 100%;
+  /* height: 700px; */
+  height: 91vh;
+  /* min-height: calc(100vh - 84px); */
+}
+
+#mapCon2 {
+  position: absolute;
+  top: 0px;
+  left: 50%;
+}
+#mapCon1 {
+  position: absolute;
+  top: 0px;
+  left: 0%;
+}
+#mapCon1,
+#mapCon2 {
+  width: 50%;
+  height: 100%;
+}
+</style>

src/views/remote/farmland/index.vue

@@ -1,19 +1,232 @@
 <template>
-    <div>
-      我是耕地监测
+  <div id="mapApp">
+    <div class="btn">
+      <el-button @click="drawer = true">打开抽屉</el-button>
     </div>
-  </template>
+    <MapView />
+
+    <el-drawer
+      :visible.sync="drawer"
+      :with-header="false"
+      :modal="false"
+      :wrapperClosable="false"
+      modal-class="mask-layer"
+    >
+      <div class="jctbCon">
+        <div class="tbTitle">
+          <span>检测图斑XXXXX</span>
+
+          <el-input
+            placeholder="请输入监测编号查询"
+            prefix-icon="el-icon-search"
+            v-model="jcbh"
+          >
+          </el-input>
+          <el-button>下载</el-button>
+        </div>
+        <div class="numCard">
+          <div class="cardItem">
+            <span>检测图斑个数(个):</span>
+            <span>455</span>
+          </div>
+          <div class="cardItem jc">
+            <span>监测面积(亩):</span>
+            <span>751.12</span>
+          </div>
+        </div>
+        <el-table
+    :data="tableData"
+    border
+    style="width: 100%">
+    <el-table-column
+      prop="date"
+      label="监测编号"
+      width="220">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="区县名称" show-overflow-tooltip>
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="监测面积" show-overflow-tooltip>
+    </el-table-column>
+    <el-table-column label="操作" align="center" >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            @click="handleDetails(scope.row)"
+          >详情</el-button>
+        </template>
+      </el-table-column>
+  </el-table>
+      </div>
+    </el-drawer>
+  </div>
+</template>
   
   <script>
-  export default {
-  data(){
-    return{
-  
+import MapView from "../MapView.vue";
+import parse from "wellknown";
+export default {
+  components: {
+    MapView,
+  },
+  data() {
+    return {
+      drawer: true,
+      direction: "rtl",
+      jcbh: "", //监测编号
+      tableData: [{
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        }, {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }]
+    };
+  },
+  mounted() {
+    // this.addGeoJson()
+  },
+
+  methods: {
+    handleDetails(row){
+
+    },
+    handleClose() {
+      this.drawer = false;
+    },
+    test() {},
+
+    addGeoJson() {
+      let ol = this.$ol;
+      let aaa =
+        "SRID=4326;MULTIPOLYGON(((106.67591743605254 38.21012898330025,106.67588081160454 38.21003303839916,106.6755667227518 38.21006159193115,106.67551318487904 38.20994380861134,106.67578087424232 38.20991525507935,106.67573447475257 38.209776056610394,106.67594862624321 38.20973322631232,106.6759771797752 38.20983673286605,106.67621495734579 38.20981715370431,106.6761636759473 38.20962317624071,106.67538440246796 38.209765943901175,106.67538440246796 38.20984050880776,106.67519166939297 38.20987258822527,106.6752925390611 38.2102444053304,106.67591743605254 38.21012898330025)))";
+      const features = new GeoJSON({
+        featureProjection: "EPSG:4326",
+      }).readFeatures(parse(aaa));
+      const source = new VectorSource({
+        features,
+        // url: 'https://geo.datav.aliyun.com/areas_v3/bound/410000_full.json',
+        // format: new GeoJSON()
+      });
+
+      const vectorLayer = new VectorLayer({
+        source: source,
+        style: {
+          "fill-color": "rgba(255, 255, 255, 0.6)",
+          "stroke-width": 2,
+          "stroke-color": "#1469e9",
+          "circle-radius": 5,
+          "circle-fill-color": "rgba(255, 255, 255, 0.6)",
+          "circle-stroke-width": 1,
+          "circle-stroke-color": "#319FD3",
+        },
+      });
+      map.addLayer(vectorLayer);
+      const feature = source.getFeatures()[0];
+      const polygon = feature.getGeometry();
+      view.fit(polygon, { padding: [170, 50, 30, 150] });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.btn {
+  position: absolute;
+  top: 0;
+  left: 60px;
+  z-index: 40;
+}
+// .mask-layer{
+//   width: 264px !important;
+// }
+::v-deep .el-drawer__wrapper {
+  position: static !important;
+}
+::v-deep .el-drawer__container {
+  position: static !important;
+}
+.jctbCon {
+  .tbTitle {
+    display: flex;
+    justify-content: space-around;
+    ::v-deep .el-input {
+      width: 40%;
     }
   }
+  .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;
+      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%
+              )
+    }
   }
-  </script>
-  
-  <style>
-  
-  </style>
+}
+</style>
+  <style  scoped>
+html,
+body {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+}
+#mapApp {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/remote/satellite/index.vue

@@ -1,7 +1,14 @@
 <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="名称" prop="name">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item label="行政区">
         <el-input
           v-model="queryParams.name"
           placeholder="请输入名称"
@@ -9,7 +16,29 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="上传用户" prop="uploaduser">
+
+      <el-form-item label="活动时间">
+        <el-col :span="11">
+          <el-date-picker
+            type="date"
+            placeholder="选择日期"
+            v-model="form.date1"
+            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="form.date1"
+            style="width: 100%"
+            value-format="yyyy-MM-dd"
+          ></el-date-picker>
+        </el-col>
+      </el-form-item>
+      <el-form-item label="文件名称">
         <el-input
           v-model="queryParams.uploaduser"
           placeholder="请输入上传用户"
@@ -17,73 +46,17 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="上传时间" prop="uploadtime">
-        <el-date-picker clearable
-          v-model="queryParams.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="queryParams.filepath"
-          placeholder="请输入文件位置"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="shp位置" prop="shppath">
-        <el-input
-          v-model="queryParams.shppath"
-          placeholder="请输入shp位置"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="是否入库" prop="storage">
-        <el-input
-          v-model="queryParams.storage"
-          placeholder="请输入是否入库"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="行政区划代码" prop="xzqhdm">
-        <el-input
-          v-model="queryParams.xzqhdm"
-          placeholder="请输入行政区划代码"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="图斑数量" prop="spotsnumber">
-        <el-input
-          v-model="queryParams.spotsnumber"
-          placeholder="请输入图斑数量"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="图斑面积" prop="spotsarea">
-        <el-input
-          v-model="queryParams.spotsarea"
-          placeholder="请输入图斑面积"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="图斑大小" prop="spotssize">
-        <el-input
-          v-model="queryParams.spotssize"
-          placeholder="请输入图斑大小"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
       </el-form-item>
     </el-form>
 
@@ -96,7 +69,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['supervise:pcsj:add']"
-        >新增</el-button>
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -107,7 +81,8 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['supervise:pcsj:edit']"
-        >修改</el-button>
+          >修改</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -118,7 +93,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['supervise:pcsj:remove']"
-        >删除</el-button>
+          >删除</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -128,46 +104,62 @@
           size="mini"
           @click="handleExport"
           v-hasPermi="['supervise:pcsj:export']"
-        >导出</el-button>
+          >导出</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="pcsjList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="pcsjList"
+      @selection-change="handleSelectionChange"
+    >
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="id" align="center" prop="id" />
-      <el-table-column label="名称" align="center" prop="name" />
-      <el-table-column label="上传用户" align="center" prop="uploaduser" />
-      <el-table-column label="上传时间" align="center" prop="uploadtime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.uploadtime, '{y}-{m}-{d}') }}</span>
-        </template>
+      <el-table-column label="文件名称" align="center" prop="name" />
+      <el-table-column label="区县名称" align="center" prop="xzqdm" />
+      <el-table-column
+        label="图斑个数"
+        align="center"
+        prop="spotsnumber"
+        width="180"
+      >
+        <!-- <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.uploadtime, "{y}-{m}-{d}") }}</span>
+        </template> -->
       </el-table-column>
-      <el-table-column label="文件位置" align="center" prop="filepath" />
-      <el-table-column label="shp位置" align="center" prop="shppath" />
-      <el-table-column label="文件服务发布地址" align="center" prop="proxypath" />
-      <el-table-column label="解压文件地址" align="center" prop="unzippath" />
-      <el-table-column label="文件类型" align="center" prop="filetype" />
-      <el-table-column label="是否入库" align="center" prop="storage" />
-      <el-table-column label="状态 0 未处理 1 发布中 2 发布成功" align="center" prop="status" />
-      <el-table-column label="行政区划代码" align="center" prop="xzqhdm" />
-      <el-table-column label="图斑数量" align="center" prop="spotsnumber" />
-      <el-table-column label="图斑面积" align="center" prop="spotsarea" />
-      <el-table-column label="图斑大小" align="center" prop="spotssize" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="监测面积（亩）" align="center" prop="spotsarea" />
+      <el-table-column label="文件大小" align="center" prop="spotssize" />
+      <el-table-column label="文件大小" align="center" prop="filetime" />
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
           <el-button
             size="mini"
             type="text"
             icon="el-icon-edit"
             @click="handleBrowse(scope.row)"
-          >浏览</el-button>
+            >浏览</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleDownload(scope.row)"
+            >下载</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
-    
+
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
@@ -184,11 +176,13 @@
           <el-input v-model="form.uploaduser" placeholder="请输入上传用户" />
         </el-form-item>
         <el-form-item label="上传时间" prop="uploadtime">
-          <el-date-picker clearable
+          <el-date-picker
+            clearable
             v-model="form.uploadtime"
             type="date"
             value-format="yyyy-MM-dd"
-            placeholder="请选择上传时间">
+            placeholder="请选择上传时间"
+          >
           </el-date-picker>
         </el-form-item>
         <el-form-item label="文件位置" prop="filepath">
@@ -198,10 +192,18 @@
           <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-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-input
+            v-model="form.unzippath"
+            type="textarea"
+            placeholder="请输入内容"
+          />
         </el-form-item>
         <el-form-item label="是否入库" prop="storage">
           <el-input v-model="form.storage" placeholder="请输入是否入库" />
@@ -228,7 +230,13 @@
 </template>
 
 <script>
-import { listPcsj, getPcsj, delPcsj, addPcsj, updatePcsj } from "@/api/supervise/pcsj";
+import {
+  listPcsj,
+  getPcsj,
+  delPcsj,
+  addPcsj,
+  updatePcsj,
+} from "@/api/supervise/pcsj";
 
 export default {
   name: "Pcsj",
@@ -249,22 +257,13 @@ export default {
       // 监管批次数据表格数据
       pcsjList: [
         {
-          id:'1111',
-          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'
-        }
+          name: "", //文件名称
+          xzqdm: "", //区县名称
+          spotsnumber: "", //图斑个数
+          spotsarea: "", //监测面积（亩）
+          spotssize: "", //文件大小
+          filetime: "", //文件大小
+        },
       ],
       // 弹出层标题
       title: "",
@@ -274,51 +273,53 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        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'
+        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",
       },
       // 表单参数
       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'
+        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: {
-      }
+      rules: {},
     };
   },
   created() {
-    // this.getList();
+    this.getList();
   },
   methods: {
+    handleDownload(row) {
+      console.log("下载");
+    },
     /** 查询监管批次数据列表 */
     getList() {
       this.loading = true;
-      listPcsj(this.queryParams).then(response => {
+      listPcsj(this.queryParams).then((response) => {
         this.pcsjList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -346,7 +347,7 @@ export default {
         xzqhdm: null,
         spotsnumber: null,
         spotsarea: null,
-        spotssize: null
+        spotssize: null,
       };
       this.resetForm("form");
     },
@@ -362,9 +363,9 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+      this.ids = selection.map((item) => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
     },
     /** 新增按钮操作 */
     handleAdd() {
@@ -373,16 +374,15 @@ export default {
       this.title = "添加监管批次数据";
     },
     // 浏览按钮
-    handleBrowse(row){
-      this.$router.push({path:'/remote/Gdjc'})
+    handleBrowse(row) {
+      this.$router.push({ path: "/remote/gdjc" });
     },
 
-
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      const id = row.id || this.ids
-      getPcsj(id).then(response => {
+      const id = row.id || this.ids;
+      getPcsj(id).then((response) => {
         this.form = response.data;
         this.open = true;
         this.title = "修改监管批次数据";
@@ -390,16 +390,16 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.id != null) {
-            updatePcsj(this.form).then(response => {
+            updatePcsj(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addPcsj(this.form).then(response => {
+            addPcsj(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -411,19 +411,27 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除监管批次数据编号为"' + ids + '"的数据项？').then(function() {
-        return delPcsj(ids);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      this.$modal
+        .confirm('是否确认删除监管批次数据编号为"' + ids + '"的数据项？')
+        .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`)
-    }
-  }
+      this.download(
+        "supervise/pcsj/export",
+        {
+          ...this.queryParams,
+        },
+        `pcsj_${new Date().getTime()}.xlsx`
+      );
+    },
+  },
 };
 </script>