页面搭建

pages/index.vue

@@ -1,156 +1,136 @@
 <template>
 	<view class="orderPage">
-		<hcCounts @golist="golist"></hcCounts>
-		<!-- sticky 
-<uni-segmented-control :current="current" :values="tabOptions" style-type="text"
-					active-color="#007aff" @clickItem="onClickItem" />-->
-		<!-- <van-sticky :offset-top="140">
-		<van-tabs v-model="searchForm.basetype" @click="tabList(searchForm.basetype)">
-			<van-tab v-for="(item, key) in tabOptions" :key="key" :name="item.name"
-				:title="`${item.name}(${item.num})`"></van-tab>
-		</van-tabs>
-		<!-- </van-sticky>-->
-		<!-- :finished="finished" -->
-		<van-list v-if="showlist" v-model="loading" :immediate-check="false" :error.sync="error"
-			error-text="请求失败，点击重新加载" finished-text="没有更多了~" @load="getList">
-			<view class="list-item" v-for="(item, key) in pcsjList" :key="key" @click="goDetail(item)">
-				<div class="nameTitle">{{ item.name }}</div>
-				<div>{{ item.dkbh }}</div>
-				<div>监测面积：{{ item.dkmj }}</div>
-				<div>核查截止日期：{{ item.jsdw }}</div>
-			</view>
-		</van-list>
-		<!-- <button type="primary" @click="submit">提交</button> -->
+		<hcCounts v-show="!showlist" ref="hcRef" @golist="golist"></hcCounts>
+		<view v-show="showlist">
+			<MapView ref="mapRef"></MapView>
+			<hcList ref="hclistRef" v-show="!isdetail" @returnCount="returnCount" @addmap="addGeoJson"
+				@goDetail="goDetail"></hcList>
+			<hcDetails ref="detailsRef" v-show="isdetail" @returnList="returnList"></hcDetails>
+		</view>
 	</view>
 </template>
 <script>
-	//import { Tabs } from "vant";
 	import hcCounts from "./index/common/hcCounts.vue";
+	import hcList from "./index/common/hcList.vue";
+	import hcDetails from "./index/common/hcDetails.vue";
+	import MapView from "./check/MapView.vue";
+	import parse from "wellknown";
+	import VectorLayer from "ol/layer/Vector";
+	import VectorSource from "ol/source/Vector";
 	import {
-		listDkjbxx
-	} from "@/api/dkjbxx.js";
+		Style,
+		Icon
+	} from "ol/style";
+	import Stroke from "ol/style/Stroke";
+	import GeoJSON from "ol/format/GeoJSON";
 	export default {
 		name: "list",
 		components: {
 			hcCounts,
+			MapView,
+			hcList,
+			hcDetails,
+
 		},
 		data() {
 			return {
-				activeName: "a",
-				searchForm: {},
-				tabOptions: [{
-						name: "待核查",
-						num: 2,
-					},
-					{
-						name: "核查中",
-						num: 1,
-					},
-					{
-						name: "已核查",
-						num: 1,
-					},
-					{
-						name: "已退回",
-						num: 1,
-					},
-				],
 				showlist: false,
-				queryParams: {
-					pageNum: 1,
-					pageSize: 10,
-					time: ["", ""],
-					startTime: "",
-					endTime: "",
-					auditflowList: [],
-					dkmjbs: "",
-					dkmj: "",
-					descValue: "dkmj",
-					dkbh: "",
-					xzqdm: null,
-				},
-				loading: false,
-				pcsjList: [],
-				total: 0,
+				isdetail: false,
+				curPageResultLayer: {}
 			};
 		},
-		onLoad() {
-			// console.log("aaaa", "00s00s");
-			// this.getUser();
-		},
-		created() {
-			console.log("aaZZaa", "00s00s");
-		},
-		mounted() {
-			console.log("aaaa", "00s00s");
-
-		},
+		onLoad() {},
+		created() {},
+		mounted() {},
 		onReady() {
-			//this.$refs.form.setRules(this.rules)
+
 		},
 		methods: {
-			golist() {
-				this.showlist = true
-				this.activeName = 'a'
-				console.log("aaaa", "00s00s");
-				//this.getList();
+			golist(a, hccount) {
+				this.showlist = true;
+				this.$refs.hclistRef.golist(a, hccount);
+			},
+			returnCount() {
+				this.showlist = false;
+				this.$refs.hcRef.getList();
+			},
+			returnList() {
+				this.isdetail = false;
+				this.$refs.hcRef.getList();
+			},
+			goDetail(val) {
+				this.isdetail = true
+				this.$refs.detailsRef.handleClick(val);
 			},
-			getList() {
-				this.loading = true;
-				console.log("", "00s00s");
-				listDkjbxx(this.queryParams).then((res) => {
-					console.log(res, "00s00s");
-					this.pcsjList = res.rows;
-					this.total = res.total;
-					this.loading = false;
+			flyto(item) {
+				// window.map["mapDiv"]
+				this.$refs.mapRef.maps['container'].getView().animate({
+					center: [item.lzb, item.bzb],
+					zoom: 16.5,
+					duration: 2000, // 动画持续时间，单位毫秒
 				});
 			},
-			//跳转到详情页
-			goDetail(value) {
-				uni.setStorage({
-					key: "my_param",
-					data: value,
-					success: () => {
-						uni.switchTab({
-							url: "/pages/check/index",
+			//创建监测图斑列表实体
+			addGeoJson(maplist, name = 'container', isfly = true) {
+
+				maplist.forEach((titem, i) => {
+					if (titem.geom && titem.geom != "") {
+						if (typeof titem.geom === "string") {
+							// let geom = this.tableData[i].geom;
+							titem.geom = parse(titem.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,
 						});
-					},
+						this.$refs.mapRef.maps[name].addLayer(this.curPageResultLayer[tempName]);
+					}
 				});
-				//   uni.navigateTo({
-				//     url: "/pages/check/index?item=" + value,
-				//   });
+				let map = this.$refs.mapRef.maps[name]
+				console.log(map.getSize(), name, isfly)
+				if (isfly) {
+					// this.flyto(maplist[0])
+					let fullExtent = this.curPageResultLayer[
+							name + (maplist.length - 1)
+						]
+						.getSource()
+						.getExtent();
+					console.log(fullExtent, name, isfly)
+					map.getView().fit(fullExtent, {
+						duration: 3, //动画的持续时间,
+						callback: null,
+						//size: map.getSize(),
+						padding: [0, 0, 0, 0],
+						//constrainResolution: false, // 允许视图超出分辨率限制
+					});
+				}
 			},
+
+
 		},
 	};
 </script>
 
 <style lang="scss">
-	.button {
-		display: flex;
-		align-items: center;
-		height: 35px;
-		line-height: 35px;
-		margin-left: 10px;
-	}
-
 	.orderPage {
 		padding: 30rpx;
-		background: azure;
+		//background: azure;
 		padding-bottom: 50px;
+		position: relative;
+		height: 100vh;
 
-		.list-item {
-			background: #fff;
-			padding: 40rpx 20rpx;
-			border-radius: 20rpx;
-			margin-bottom: 30rpx;
-			position: relative;
-
-			.nameTitle {
-				color: red;
-				line-height: 50rpx;
-			}
-
-
-		}
 	}
 </style>