rsmonitoring-app/pages/index.vue

<template>
	<view class="orderPage">
		<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 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 {
		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 {
				showlist: false,
				isdetail: false,
				curPageResultLayer: {}
			};
		},
		onLoad() {},
		created() {},
		mounted() {},
		onReady() {

		},
		methods: {
			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();
				this.$refs.hclistRef.getList();
			},
			goDetail(val) {
				this.isdetail = true
				this.$refs.mapRef.setitem(val)
				this.$refs.detailsRef.handleClick(val);
			},
			addGeoJson(maplist) {
				this.$refs.mapRef.setlist(maplist)
			},
		},
	};
</script>

<style lang="scss">
	.orderPage {
		padding: 30rpx;
		//background: azure;
		padding-bottom: 50px;
		position: relative;
		height: 100vh;

	}
</style>