ebike-ui/ebike-maintenance/pages/devops/bikesite/bikesite-list.vue

<template>
	<div style="background-color:#F2F2F2;height: 100vh;">
		<div style="display:flex;padding: 10px;">
			<uni-easyinput placeholder="请输入站点名称" suffixIcon="search" />
			<label style="margin-left: 10px;" @click="openMap">
				<uni-icons custom-prefix="iconfont" type="icon-ebikeditu2" color="#1b1a1a" size="40" />
			</label>
		</div>

		<div class="divSearch">
			<div v-for="(item,index) in arrSearch " :key="index"
				:class="'divSearchTab'+(searchIndex==index?' divSearchTabSel':'')" @click="changerOrder(index)">
				<label>{{item}}</label>
				<div class="divSearchRow">
					<div class="divSearchCel">
						<uni-icons custom-prefix="iconfont" type="icon-ebikesanjiaoxing"
							:color="(searchIndex==index&&searchType=='up')?iconColorSel:iconColor" size="8" />
					</div>
					<div class="divSearchCel">
						<uni-icons custom-prefix="iconfont" type="icon-ebikesanjiaoxing-copy"
							:color="(searchIndex==index&&searchType=='down')?iconColorSel:iconColor" size="8" />
					</div>
				</div>
			</div>
		</div>
		<div>
			<uni-card v-for="(item,index) in arrData" :key="'c'+index">
				<div style="display: flex;align-items: center;">
					<div class="divListItemType">
						{{item.zdlx}}
					</div>
					<div class="divListItemSite">
						{{item.zdmc}}
					</div>
					<div>
						<label style="padding-left: 10px;" @click="editSite(item)">
							<uni-icons custom-prefix="iconfont" type="icon-ebikebianji" color="rgb(121 116 116)"
								size="20"  />
						</label>
						<label style="padding-left: 10px;" @click="delSite(item)">
							<uni-icons custom-prefix="iconfont" type="icon-ebikeshanchu" color="rgb(121 116 116)"
								size="20"  />
						</label>
					</div>
				</div>
				<div class="divListItem">
					<div class="divListItemTitle">站点级别</div>
					<div class="divListItemValue" style="color: red;">{{item.zdjb}}</div>
				</div>
				<div class="divListItem">
					<div class="divListItemTitle">创建时间</div>
					<div class="divListItemValue">{{item.cjsj}}</div>
				</div>
				<div class="divListItem">
					<div class="divListItemTitle">车辆数量</div>
					<div class="divListItemValue">{{item.clsl1}}/{{item.clsl2}}</div>
				</div>
				<div class="divListItem">
					<div class="divListItemTitle">租/还车辆数</div>
					<div class="divListItemValue">{{item.zcsl}}/{{item.hcsl}}</div>
				</div>
				<div class="divListItem">
					<div class="divListItemTitle">创建地点</div>
					<div class="divListItemValue" style="line-height: 18px;">{{item.cjdd}}</div>
				</div>
				<div class="divListItem">
					<div class="divListItemTitle">创建人</div>
					<div class="divListItemValue">{{item.cjr}}</div>
				</div>
			</uni-card>
		</div>
		<div style="position:absolute;bottom:30px;right: 15px;" @click="addSite">
			<uni-icons type="plus" color="#7a6d6d" size="40"  />
		</div>
	</div>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		showModelMessage
	} from "@/utils/tools.js";
	import {useSelarea} from "@/stores/selarea.js";
	import {onShow} from "@dcloudio/uni-app";

	const arrSearch = ["实时车辆", "借车订单量", "还车订单量"]
	const iconColor = " #BDBDBD";
	const iconColorSel = "#000";
	const searchIndex = ref(null);
	const searchType = ref("");
	//数据
	const arrData = ref([{
		id:"1111",
		zdlx: "停", //站点类型
		zdmc: "簇锦街道武兴四路武侯区人民政府政务服务中心", //站点名称
		zdjb: "1级", //站点级别
		cjsj: "2025-03-12 19:16:03", //创建时间
		clsl1: 0, //车辆数量
		clsl2: 10, //限制车辆数量
		zcsl: 0, //租车数量
		hcsl: 0, //还车数量
		cjdd: "四川省成都市武侯区簇锦街道武兴四路武侯区人民政府政务服务中心", //创建地点
		cjr: "创建人" //创建人
	}, {
		id:"22222222222",
		zdlx: "停", //站点类型
		zdmc: "簇锦街道武兴四路武侯区人民政府政务服务中心", //站点名称
		zdjb: "1级", //站点级别
		cjsj: "2025-03-12 19:16:03", //创建时间
		clsl1: 0, //车辆数量
		clsl2: 10, //限制车辆数量
		zcsl: 0, //租车数量
		hcsl: 0, //还车数量
		cjdd: "四川省成都市武侯区簇锦街道武兴四路武侯区人民政府政务服务中心", //创建地点
		cjr: "创建人" //创建人
	}]);

	const showBtn = ref(false); //显示按钮
	const btnContent = [{
		text: '编辑',
		active: false
	}, {
		text: '删除',
		active: false
	}];
	const selAreaStore=useSelarea();
    console.log("555555555555555555555555","行政区划",selAreaStore.value);
	function search(e) {
		console.log("111111111111111", e);
	}

	//排序
	function changerOrder(index) {
		showModelMessage("该功能暂未实现！");
		if (searchIndex.value == index&&searchType.value=="up") {
			searchType.value = "down";
			
		}
		else{
			searchType.value = "up";
		}
		searchIndex.value=index;
	}

	function openMap(){
		uni.navigateTo({
			url:"/pages/map/map-bikesite?type=view"
		})
	}

	//添加站点
	function addSite() {
		uni.navigateTo({
			url:"/pages/map/map-bikesite?type=add&k="+Date.now()
		});
	}

	//编辑
	function editSite(data) {
		const{id,radius}=data;
	    uni.navigateTo({
			url:`/pages/devops/bikesite/bikesite-info?type=edit&id=${id}&k=${Date.now()}`
		});
	}

	function delSite() {
		showModelMessage("该功能暂未实现！");
	}
	
	onShow(()=>{
		
	});
</script>

<style scoped>
	@import url("bikesite-list.css");
</style>