270 lines
6.9 KiB
Vue
270 lines
6.9 KiB
Vue
<template>
|
||
<div style="background-color:#F2F2F2;height: 100vh;">
|
||
<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>
|
||
<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>
|
||
<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,
|
||
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 arrData = ref([]);
|
||
|
||
const showBtn = ref(false); //显示按钮
|
||
const btnContent = [{
|
||
text: '编辑',
|
||
active: false
|
||
}, {
|
||
text: '删除',
|
||
active: false
|
||
}];
|
||
const selAreaStore = useSelarea();
|
||
let zoneId = null;
|
||
let pageNum = 1;
|
||
let pageSize = 10;
|
||
let selData=null;
|
||
let loadType="";
|
||
let siteName = ref(""); //查询条件
|
||
|
||
function search(e) {
|
||
console.log("111111111111111","search", e,siteName.value);
|
||
}
|
||
|
||
//排序
|
||
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(data) {
|
||
console.log("0000000000000",data);
|
||
const{id,pageNum:pn,index,zdmc}=data;
|
||
const params={
|
||
ids:[id]
|
||
}
|
||
|
||
showModelMessage(`确认删除站点：${zdmc}？`,null,true).then((res)=>{
|
||
const{cancel,confirm}=res;
|
||
if(cancel) return;
|
||
callOperateApi("ebikeRegion/delSite",params,"post").then(res=>{
|
||
console.log("11111111111111111111111", "ebikeRegion/delSite", res);
|
||
const {
|
||
code,
|
||
data,
|
||
message
|
||
} = res;
|
||
if (code != 200) {
|
||
showModelMessage("删除失败！");
|
||
console.log("ebikeRegion/delSite错误", message)
|
||
return;
|
||
}
|
||
selData=data;
|
||
loadType="del";
|
||
loadData(pn,()=>{
|
||
showModelMessage("删除成功！");
|
||
});
|
||
})
|
||
})
|
||
|
||
}
|
||
|
||
function loadData(pn,callbak) {
|
||
const params = {
|
||
zoneId,
|
||
pageNum:pn,
|
||
pageSize,
|
||
siteName:siteName.value
|
||
}
|
||
callOperateApi("ebikeRegion/pageSite", params, "get").then(res => {
|
||
console.log("11111111111111111111111", "ebikeRegion/pageSite", res,loadType);
|
||
const {
|
||
code,
|
||
data,
|
||
message
|
||
} = res;
|
||
if (code != 200) {
|
||
console.log("ebikeRegion/pageSite错误", message)
|
||
return;
|
||
}
|
||
const {
|
||
records
|
||
} = data;
|
||
const arrNewData=cloneDeep(arrData.value);
|
||
if(loadType=="del"){
|
||
const{index}=selData;
|
||
if(pageNum>pn){
|
||
arrNewData.splice(index,arrNewData.length-index);
|
||
}
|
||
}
|
||
records.map((item,index) => {
|
||
const {
|
||
siteRegionId,
|
||
siteName,
|
||
createdTime,
|
||
allowedParkingNum,
|
||
siteAdress,levelName
|
||
} = item;
|
||
const sindex=(pn-1)*pageSize+index;
|
||
|
||
const newdata = {
|
||
id: siteRegionId,
|
||
zdlx: "停", //站点类型
|
||
zdmc: siteName, //站点名称
|
||
zdjb: levelName, //站点级别
|
||
cjsj: createdTime, //创建时间
|
||
clsl1: 0, //车辆数量
|
||
clsl2: allowedParkingNum, //限制车辆数量
|
||
zcsl: 0, //租车数量
|
||
hcsl: 0, //还车数量
|
||
cjdd: siteAdress, //创建地点
|
||
cjr: "创建人", //创建人
|
||
pageNum,
|
||
index:sindex
|
||
}
|
||
console.log("666666666666666666",newdata);
|
||
arrNewData[sindex]=newdata;
|
||
});
|
||
arrData.value=arrNewData;
|
||
if(callbak) callbak();
|
||
})
|
||
}
|
||
|
||
onShow(() => {
|
||
zoneId = selAreaStore.value;
|
||
loadData(pageNum);
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
console.log("9999999999999999999999999onUnmounted")
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
@import url("bikesite-list.css");
|
||
</style> |