yd_qycpfb/jp-mobile/pages/map/parkShow.vue

<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true" backUrl="/pages/map/mapVisualization-th">
			<block slot="backText">返回</block>
			<block slot="content">{{parkName}}</block>
		</cu-custom>

		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-titles text-blue"></text> 园区信息
			</view>
		</view>
		<view class="cu-card case" >
			<view class="cu-item shadow" style="margin: 10px;">
				<view class="image">
					<image :src="parkImage" mode="widthFix"></image>
				</view>
				<view class="cu-list menu" style="padding: 0px 5px 0px 0px;">
					<view class="cu-item cu-item-custom">
						<view class="content">
							<text class="cuIcon-right text-black"></text>
							<text class="text-black">厂房面积：</text>
							<text class="text-black">5000㎡</text>
						</view>
					</view>
					<view class="cu-item cu-item-custom">
						<view class="content">
							<text class="cuIcon-right text-black"></text>
							<text class="text-black">入驻企业：</text>
							<text class="text-black">28家</text>
						</view>
					</view>
					<view class="cu-item cu-item-custom">
						<button class="cu-btn content " open-type="contact">
							<text class="cuIcon-right text-black"></text>
							<text class="text-black">招商面积：</text>
							<text class="text-black">3500</text>
						</button>
					</view>
					<view class="cu-item cu-item-custom">
						<button class="cu-btn content " open-type="contact">
							<text class="cuIcon-right text-black"></text>
							<text class="text-black">厂房数：</text>
							<text class="text-black">5</text>
						</button>
					</view>
					<view class="cu-item cu-item-custom">
						<button class="cu-btn content " open-type="contact">
							<text class="cuIcon-right text-black"></text>
							<text class="text-black">距离高铁站：</text>
							<text class="text-black">10km</text>
						</button>
					</view>
					<view class="cu-item cu-item-custom">
						<button class="cu-btn content " open-type="contact">
							<text class="cuIcon-right text-black"></text>
							<text class="text-black">距离机场：</text>
							<text class="text-black">35km</text>
						</button>
					</view>
					<view class="cu-item cu-item-custom">
						<button class="cu-btn content " open-type="contact">
							<text class="cuIcon-right text-black"></text>
							<text class="text-black">负责人：</text>
							<text class="text-black">17830240934</text>
						</button>
					</view>
					<view class="cu-item cu-item-custom">
						<button class="cu-btn content " open-type="contact" style="width: 100%;">
							<text class="cuIcon-right text-black"></text>
							<text class="text-black" style="white-space: nowrap;">周边配套：</text>
							<text class="text-black cu-ellipsis">
								污水处理设、绿化设施、环保设施、环保设施、环保设施、环保设施、环保设施
							</text>
						</button>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-titles text-blue"></text> 厂房列表
			</view>
		</view>
		<view class="cu-card article">
			<!-- <view class="cu-item shadow"> -->
				<view style="border-radius: 5px; margin: 10px; display: block; background-color: #ffffff;">
					
				<view class="cu-list menu-avatar" style="border-radius: 5px;">
					<view class="cu-item" @click="plantClick('1')">
						<view class="cu-avatar round lg" style="line-height: 49px;">一</view>
						<!-- <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view> -->
						<view class="content">
							<view class="text-black">厂房一</view>
							<view class="text-gray text-sm flex">
								<view class="text-cut">
									层高：10米&nbsp;&nbsp;&nbsp;面积：8000㎡
								</view> </view>
						</view>
					</view>
					<view class="cu-item" @click="plantClick('2')">
						<view class="cu-avatar round lg" style="line-height: 49px;">二</view>
						<!-- <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);"></view> -->
						<view class="content">
							<view class="text-black">厂房二</view>
							<view class="text-gray text-sm flex">
								<view class="text-cut">
									层高：8米&nbsp;&nbsp;&nbsp;面积：6500㎡
								</view>
							</view>
						</view>
					</view>
					<view class="cu-item" @click="plantClick('3')">
						<view class="cu-avatar round lg" style="line-height: 49px;">三</view>
						<!-- <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);"></view> -->
						<view class="content">
							<view class="text-black">厂房三</view>
							<view class="text-gray text-sm flex">
								<view class="text-cut">
									层高：12米&nbsp;&nbsp;&nbsp;面积：7500㎡
								</view>
							</view>
						</view>
					</view>
					<view class="cu-item" @click="plantClick('4')">
						<view class="cu-avatar round lg" style="line-height: 49px;">四</view>
						<!-- <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);"></view> -->
						<view class="content">
							<view class="text-black">厂房四</view>
							<view class="text-gray text-sm flex">
								<view class="text-cut">
									层高：6米&nbsp;&nbsp;&nbsp;面积：2500㎡
								</view>
							</view>
						</view>
					</view>
					<view class="cu-item" @click="plantClick('5')">
						<view class="cu-avatar round lg" style="line-height: 49px;">五</view>
						<!-- <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);"></view> -->
						<view class="content">
							<view class="text-black">厂房五</view>
							<view class="text-gray text-sm flex">
								<view class="text-cut">
									层高：8米&nbsp;&nbsp;&nbsp;面积：3000㎡
								</view>
							</view>
						</view>
					</view>
				</view>
				
				</view>
			<!-- </view> -->
		</view>
		
	</view>
</template>

import { size } from 'lodash';

<script>
	import mapVisualizationService from '@/api/map/mapVisualization'

	export default {
		data() {
			return {
				parkId: '',
				parkName: '',
				parkImage: '',
				companyName: '',
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				scrollHeight: this.CustomBar + 55,
				hidden: true,
				listCurID: '',
				companyList: [],
				listCur: '',
			};
		},
		onLoad(options) {
			console.log(options, '=================>options')
			if (options.parkId) {
				this.parkId = options.parkId;
				this.parkName = options.parkName;
				this.parkImage = options.parkImage;
				// this.getCompanyList()
			}
		},
		mounted() {
			
		},
		onReady() {
			// let that = this;
			// uni.createSelectorQuery().select('.indexBar-box').boundingClientRect(function(res) {
			// 	that.boxTop = res.top
			// }).exec();
			// uni.createSelectorQuery().select('.indexes').boundingClientRect(function(res) {
			// 	that.barTop = res.top
			// }).exec()
		},
		methods: {
			plantClick(plantId){
				console.log( plantId );
				uni.navigateTo({
					url: '/pages/cfInfo/cfInfo'
				});
			},
			gotoBuildInfo(id) {
				uni.navigateTo({
					url: `/pages/comEdit/comEdit?id=${id}&ischeck=1`
				})
			},
			getCompanyList() {
				uni.showLoading()
				mapVisualizationService.getCompanyList({"parkId": this.parkId, "companyName": this.companyName}).then(({
					data
				}) => {
					console.log( data );
					this.companyList = data
					
					uni.hideLoading()
				}).catch((e) => {
					uni.hideLoading()
				})
			},
			buildingSearch() {
				console.log( this.companyName );
				this.getCompanyList()
			},
			//获取文字信息
			getCur(e) {
				this.hidden = false;
				this.listCur = this.companyList[e.target.id].name;
			},
			setCur(e) {
				this.hidden = true;
				this.listCur = this.listCur
			},
			//滑动选择Item
			tMove(e) {
				let y = e.touches[0].clientY,
					offsettop = this.boxTop,
					that = this;
				//判断选择区域,只有在选择区才会生效
				if (y > offsettop) {
					let num = parseInt((y - offsettop) / 20);
					this.listCur = that.companyList[num].name
				};
			},

			//触发全部开始选择
			tStart() {
				this.hidden = false
			},

			//触发结束选择
			tEnd() {
				this.hidden = true;
				this.listCurID = this.listCur
			},
			// indexSelect(e) {
			// 	let that = this;
			// 	let barHeight = this.barHeight;
			// 	let list = this.list;
			// 	let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
			// 	for (let i = 0; i < list.length; i++) {
			// 		if (scrollY < i + 1) {
			// 			that.listCur = list[i].name;
			// 			that.movableY = i * 20
			// 			return false
			// 		}
			// 	}
			// }
		}
	}
</script>

<style>
	/* 	page {
		padding-top: 100upx;
	} */
	.empty-state {
	  text-align: center;
	  font-size: 20px;
	  padding: 20px;
	  color: #a0a0a0
	}
	.indexes {
		position: relative;
	}

	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20upx 20upx 20upx 60upx;
		display: flex;
		align-items: center;
	}

	.indexBar .indexBar-box {
		width: 40upx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
	}

	.indexBar-item {
		flex: 1;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #888;
	}

	movable-view.indexBar-item {
		width: 40upx;
		height: 40upx;
		z-index: 9;
		position: relative;
	}

	movable-view.indexBar-item::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 10upx;
		height: 20upx;
		width: 4upx;
		background-color: #f37b1d;
	}

	.indexToast {
		position: fixed;
		top: 0;
		right: 80upx;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin: auto;
		color: #fff;
		line-height: 100upx;
		text-align: center;
		font-size: 48upx;
	}
	
	.cu-item-custom {
		min-height: 45px !important;
	}
	
	.cu-ellipsis {
		width: calc(100% - 105px);
	    white-space: nowrap; /* 防止文本换行 */
	    overflow: hidden; /* 隐藏溢出的文本 */
	    text-overflow: ellipsis; /* 显示省略号 */
	}
	
</style>