批次数据数据接入与检测图斑数据面板编写,接入数据

src/api/supervise/pcsj.js

@@ -42,3 +42,12 @@ export function delPcsj(id) {
     method: 'delete'
   })
 }
+
+// 查询监管批次数据列表
+export function listPcsjXQList(query) {
+  return request({
+    url: '/apply/supervise/xq/list',
+    method: 'get',
+    params: query
+  })
+}

src/views/remote/farmland/index.vue

@@ -14,12 +14,12 @@
     >
       <div class="jctbCon">
         <div class="tbTitle">
-          <span>检测图斑XXXXX</span>
+          <span>检测图斑{{ newObj.name }}</span>
 
           <el-input
             placeholder="请输入监测编号查询"
             prefix-icon="el-icon-search"
-            v-model="jcbh"
+            v-model="queryParams.jcbh"
           >
           </el-input>
           <el-button>下载</el-button>
@@ -27,40 +27,42 @@
         <div class="numCard">
           <div class="cardItem">
             <span>检测图斑个数(个):</span>
-            <span>455</span>
+            <span>{{ newObj.spotsnumber }}</span>
           </div>
           <div class="cardItem jc">
             <span>监测面积(亩):</span>
-            <span>751.12</span>
+            <span>{{ newObj.spotsarea }}</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>
+        <el-table :data="tableData" border style="width: 100%">
+          <el-table-column prop="jcbh" label="监测编号" width="220">
+          </el-table-column>
+          <el-table-column prop="xmc" label="区县名称" show-overflow-tooltip>
+          </el-table-column>
+          <el-table-column
+            prop="jcmj"
+            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>
+        <pagination
+          v-show="total > 0"
+          :total="total"
+          :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize"
+          @pagination="getList"
+        />
       </div>
     </el-drawer>
   </div>
@@ -69,42 +71,63 @@
   <script>
 import MapView from "../MapView.vue";
 import parse from "wellknown";
+import { getPcsj, listPcsjXQList } from "@/api/supervise/pcsj";
 export default {
   components: {
     MapView,
   },
   data() {
     return {
+      total: 0,
+      queryParams: {
+        jcbh: "", //监测编号
+        pageNum: 1,
+        pageSize: 10,
+        pcsjid: this.$route.query.id,
+      },
       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 弄'
-        }]
+
+      tableData: [],
+      // pcsjObj:{
+      //   name:'f52d8b03a7214d9098ca44a7ea641d9b',
+      //   spotsnumber:0,
+      //   spotsarea:0,
+
+      // },
+      newObj: {
+        name: "f52d8b03a7214d9098ca44a7ea641d9b",
+        spotsnumber: 0,
+        spotsarea: 0,
+      },
     };
   },
   mounted() {
+    console.log(this.$route.query);
     // this.addGeoJson()
+    // 绑定事件，编写回调函数
+    this.$nextTick(() => {
+      getPcsj(this.$route.query.id).then((response) => {
+        console.log(response, "response");
+        this.newObj = response.data;
+        // this.open = true;
+        // this.title = "修改监管批次数据";
+      });
+      this.getList();
+    });
   },
 
   methods: {
-    handleDetails(row){
-
+    getList() {
+      listPcsjXQList(this.queryParams).then((response) => {
+        console.log(response, "response1111111");
+        this.tableData = response.rows;
+        this.total = response.total;
+        // this.open = true;
+        // this.title = "修改监管批次数据";
+      });
     },
+    handleDetails(row) {},
     handleClose() {
       this.drawer = false;
     },
@@ -206,14 +229,14 @@ export default {
         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%
-              )
+    .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%
+      );
     }
   }
 }

src/views/remote/satellite/index.vue

@@ -365,7 +365,8 @@ export default {
     },
     // 浏览按钮
     handleBrowse(row) {
-      this.$router.push({ path: "/remote/gdjc" });
+      this.$router.push({ path: "/remote/gdjc" ,query: { id: row.id}});
+      // this.$bus.$emit('pcsjObj',row)
     },
 
     /** 修改按钮操作 */