312 lines
7.5 KiB
Vue
312 lines
7.5 KiB
Vue
<template>
|
||
<z-paging ref="paging" v-model="arrData" default-page-no="1" :default-page-size="pageNum" auto-show-back-to-top
|
||
@query="query">
|
||
<template #top>
|
||
<div style="display:flex;padding: 10px;">
|
||
<uni-easyinput v-model="siteName" placeholder="请输入站点名称" suffixIcon="search" @iconClick="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>
|
||
</template>
|
||
<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 class="divTool">
|
||
<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 v-if="arrData.length==0" class="divNoData">
|
||
暂无数据
|
||
</div>
|
||
</div>
|
||
|
||
</z-paging>
|
||
<div style="position:fixed;bottom:30px;right: 15px;z-index: 100;" @click="addSite">
|
||
<uni-icons type="plus" color="#7a6d6d" size="40" />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
onMounted,
|
||
onUnmounted
|
||
} from 'vue';
|
||
import {
|
||
showModelMessage
|
||
} from "@/utils/tools.js";
|
||
import {
|
||
useSelarea
|
||
} from "@/stores/selarea.js";
|
||
import {
|
||
onShow
|
||
} from "@dcloudio/uni-app";
|
||
import {
|
||
callOperateApi
|
||
} from '../../../utils/api';
|
||
import {
|
||
cloneDeep
|
||
} from 'lodash';
|
||
|
||
const arrSearch = ["实时车辆", "借车订单量", "还车订单量"]
|
||
const iconColor = " #BDBDBD";
|
||
const iconColorSel = "#000";
|
||
const searchIndex = ref(null);
|
||
const searchType = ref("");
|
||
const paging = ref(null);
|
||
//数据
|
||
const arrData = ref([]);
|
||
|
||
const showBtn = ref(false); //显示按钮
|
||
const btnContent = [{
|
||
text: '编辑',
|
||
active: false
|
||
}, {
|
||
text: '删除',
|
||
active: false
|
||
}];
|
||
const selAreaStore = useSelarea();
|
||
let zoneId = null;
|
||
let selData = null;
|
||
let loadType = "";
|
||
let siteName = ref(""); //查询条件
|
||
let pageNum = 5;
|
||
|
||
function query(pageNo, pageSize) {
|
||
let params = {
|
||
zoneId,
|
||
pageNum: pageNo.toString(),
|
||
pageSize: pageSize.toString(),
|
||
siteName: siteName.value
|
||
}
|
||
if(searchIndex.value==0){
|
||
showModelMessage("该功能暂未实现！");
|
||
return;
|
||
}
|
||
else{
|
||
const lx=searchType.value;
|
||
switch(searchIndex.value){
|
||
case "1":
|
||
if(lx=="up"){
|
||
params={...params,borrowingSort: 1}
|
||
}
|
||
else{
|
||
params={...params,borrowingSort: 2}
|
||
}
|
||
break;
|
||
case "2":
|
||
if(lx=="up"){
|
||
params={...params,returnOrder: 1}
|
||
}
|
||
else{
|
||
params={...params,returnOrder: 2}
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
|
||
uni.showLoading({
|
||
title:"加载中"
|
||
})
|
||
callOperateApi("ebikeRegion/pageSite", params, "get").then(res => {
|
||
const {
|
||
code,
|
||
data,
|
||
message
|
||
} = res;
|
||
if (code != 200) {
|
||
uni.hideLoading();
|
||
console.log("ebikeRegion/pageSite错误", message);
|
||
paging.value.complete(false);
|
||
return;
|
||
}
|
||
const {
|
||
records
|
||
} = data;
|
||
|
||
const arrNewData = [];
|
||
records.map((item, index) => {
|
||
const {
|
||
siteRegionId,
|
||
siteName,
|
||
createdTime,
|
||
allowedParkingNum,
|
||
siteAdress,
|
||
levelName,
|
||
siteTypeName,
|
||
borrowingOrder,
|
||
returnOrder
|
||
} = item;
|
||
const sindex = (pageNo - 1) * pageSize + index;
|
||
const newdata = {
|
||
id: siteRegionId,
|
||
zdlx: (siteTypeName && siteTypeName.length > 0) ? siteTypeName.substring(0, 1) :"", //站点类型
|
||
zdmc: siteName, //站点名称
|
||
zdjb: levelName, //站点级别
|
||
cjsj: createdTime, //创建时间
|
||
clsl1: 0, //车辆数量
|
||
clsl2: allowedParkingNum, //限制车辆数量
|
||
zcsl: borrowingOrder, //租车数量
|
||
hcsl: returnOrder, //还车数量
|
||
cjdd: siteAdress, //创建地点
|
||
cjr: "创建人", //创建人
|
||
pageNum,
|
||
index: sindex
|
||
}
|
||
arrNewData[index] = newdata;
|
||
});
|
||
paging.value.complete(arrNewData);
|
||
uni.hideLoading();
|
||
})
|
||
}
|
||
|
||
function search(e) {
|
||
paging.value.reload();
|
||
searchIndex.value=null;
|
||
searchType.value=null;
|
||
}
|
||
|
||
//排序
|
||
function changerOrder(index) {
|
||
if (searchIndex.value == index && searchType.value == "up") {
|
||
searchType.value = "down";
|
||
|
||
} else {
|
||
searchType.value = "up";
|
||
}
|
||
searchIndex.value = index;
|
||
paging.value.reload();
|
||
}
|
||
|
||
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(obj) {
|
||
const {
|
||
id,
|
||
pageNum: pn,
|
||
index,
|
||
zdmc
|
||
} = obj;
|
||
const params = {
|
||
ids: [id]
|
||
}
|
||
|
||
showModelMessage(`确认删除站点：${zdmc}？`, null, true).then((res) => {
|
||
const {
|
||
cancel,
|
||
confirm
|
||
} = res;
|
||
if (cancel) return;
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
})
|
||
callOperateApi("ebikeRegion/delSite", params, "post").then(res => {
|
||
const {
|
||
code,
|
||
data,
|
||
message
|
||
} = res;
|
||
if (code != 200) {
|
||
uni.hideLoading();
|
||
showModelMessage("删除失败！");
|
||
console.log("ebikeRegion/delSite错误", message)
|
||
return;
|
||
}
|
||
uni.hideLoading();
|
||
showModelMessage("删除成功！");
|
||
paging.value.reload();
|
||
})
|
||
})
|
||
|
||
}
|
||
|
||
|
||
|
||
onShow(() => {
|
||
zoneId = selAreaStore.value;
|
||
if (paging && paging.value) paging.value.refresh();
|
||
// loadData(pageNum);
|
||
});
|
||
|
||
</script>
|
||
|
||
<style scoped>
|
||
@import url("bikesite-list.css");
|
||
</style> |