mapstakeline.vue 5.34 KB
<template>
	<view class="page">
		<!-- <pyh-nv ref="nv" :config="nvConfig"></pyh-nv> -->
		<!-- 		<view class="coupon-tab" :style="{'padding-top':(pageTop+'px')}">
			<view class="tab" :class="{'action':TabShow===0}" @click="onCouponTab(0)">
				<text>全部</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':TabShow===1}" @click="onCouponTab(1)">
				<text>正常</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':TabShow===2}" @click="onCouponTab(2)">
				<text>需维护</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':TabShow===3}" @click="onCouponTab(3)">
				<text></text>
				<text class="line"></text>
			</view>
		</view> -->
		<!-- <view class="listBox" :style="{'padding-top':(pageTop+'px')}"> -->
		<view class="content">
			<!-- 列表 -->
			<view class="user-list">
				<view class="topimg" style="padding: 25rpx;">
					<u-input placeholder="请输入" v-model="text">
						<template slot="suffix">
							<u-button @tap="getCode" text="搜索" type="primary" size="mini" ></u-button>
						</template>

					</u-input>

					<!-- <map style="width: 100%;" :min-scale="9"  id="customMap" :scale="15"   :markers="markers" layer-style="1" subkey="PTOBZ-QDQEG-DK3QM-QMYWN-I5WDZ-CCB6S"
					:latitude="address.latitude" :longitude="address.longitude">
				</map> -->
				</view>
				<view style="padding: 0 25rpx;">
					<view class="list" @click="mapstakelinedetail(item)" v-for="(item,index) in list" :key="index">
						<view class="title">
							<view>{{item.markerNumber}}【{{item.markerSpecification||'-'}}】</view>
							<text>位置:{{item.location}}</text>
						</view>
						<!-- 		<view class="more-content">
						<view class="more-content-img"><text class="more-content-text">正常</text><image src="../../static/right.png"></image></view>
					</view> -->
					</view>
				</view>
			</view>
		</view>
<!-- 		<view class="page-footer">
			<view class="footer-buy">
				<view class="cart-add" @click="mapdoorplatesuccess">
					<image src="../../static/btn5.png"></image>
					<text>添加界桩</text>
				</view>
			</view>
		</view> -->
<!-- 		<view class="skip-btn">
			<view class="cart-add" @click="gopath('/pages/mapstakelinedetail/addmapstakelinedetail')">
				<image src="../../static/btn3.png"></image>
				<text>添加界桩</text>
			</view>
		</view> -->
	</view>

</template>

<script>
	export default {
		data() {
			return {
				text:'',
				markers: [],
				address: {
					// 纬度
					latitude: 29.99599,
					// 经度
					longitude: 104.13412
				},
				TabShow: 0,
				nvConfig: {
					title: "界桩界线管护",
					bgColor: "#ffffff",
					color: "#000000",
					fixedAssist: {
						hide: true,
					},
				},
				list: [],
				pages: {
					pageNum: 1,
					pageSize: 10,
					markerNumber:''
				}
			}
		},
		onPageScroll(e) {
			// this.$refs.nv.pageScroll(e)
		},
		computed: {
			pageTop() {
				return parseInt(88 * uni.getSystemInfoSync().windowWidth / 750) + uni.getSystemInfoSync().statusBarHeight
			}
		},
		onShow() {
			this.getlist();
		},
		methods: {
			gopath(e) {
				uni.navigateTo({
					url: e
				})
			},
			getCode(e) {
				console.log(this.text)
				this.pages.markerNumber = this.text
				this.getlist();
			},
			addMarkers(list) {
				const positions = []
				list.forEach((item, index) => {

					positions.push({
						latitude: item.latitude,
						longitude: item.longitude,
						title: item.markerNumber,
					})
				})
				const newMarkers = []
				positions.forEach((p, i) => {
					// console.log(i)
					newMarkers.push(
						Object.assign({}, {
							id: i,

							joinCluster: false, // 指定了该参数才会参与聚合  
							label: {
								padding: 10,
								height: 30,
								borderRadius: 10,
								bgColor: '#0098ae',
								color: '#fff',
								content: `${p.title}`
							}
						}, p)
					)
				})
				this.markers = newMarkers
				const markers = newMarkers
				this._mapContext.addMarkers({
					markers,
					clear: false,
					complete(res) {
						console.log('addMarkers', res)
					}
				})
			},
			// 获取我的任务的列表
			getlist() {
				this.API.getplie(this.pages).then(res => {
					console.log("界桩", res);
					this.list = res.rows
					// this.addMarkers(this.list)
				})
			},
			onCouponTab(type) {
				this.TabShow = type;
			},
			mapstakelinedetail(e) {
				uni.navigateTo({
					url: '/pages/mapstakelinedetail/mapstakelinedetail?cent=' + JSON.stringify(e)
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'mapstakeline.scss';

	/* 底部 */
	.page-footer {
		position: fixed;
		bottom: 40rpx;
		// margin: 30rpx;
		display: flex;
		height: 100rpx;
		width: 100%;

		.footer-buy {
			height: 100%;
			width: 100%;

			.cart-add {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 60rpx;

				image {
					position: absolute;
					z-index: 0;
					width: 95%;
					height: 83rpx;
					box-shadow: 5rpx 10rpx 20rpx 0 #b7c8ff;
					border-radius: 100rpx;
				}

				text {
					font-size: 30rpx;
					font-weight: bold;
					color: #fff;
					position: absolute;
					z-index: 1;
				}
			}
		}
	}
</style>