地图更新
This commit is contained in:
parent
7f2c968e00
commit
18870b33f2
|
|
@ -102,3 +102,10 @@ export function selectDeptByAreaId(areaId) {
|
|||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 根据运营区id获取运营商
|
||||
export function getleaderboard(type,timeLimit) {
|
||||
return request({
|
||||
url: '/index/admim/leaderboard?type='+type+'&timeLimit='+timeLimit,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -132,6 +132,14 @@ export function reboot(data){
|
|||
method: 'post'
|
||||
})
|
||||
}
|
||||
// 获取轨迹
|
||||
export function gettrajectory(data){
|
||||
console.log(data, 'data');
|
||||
return request({
|
||||
url: '/system/device/trajectory?sn=' + data.sn + '&startTime=' + data.startTime + '&endTime=' + data.endTime,
|
||||
method: 'post'
|
||||
});
|
||||
}
|
||||
// 根据sn查询设备
|
||||
export function getDeviceBySn(sn){
|
||||
return request({
|
||||
|
|
|
|||
616
src/components/Map/location/LocationMaps.vue
Normal file
616
src/components/Map/location/LocationMaps.vue
Normal file
|
|
@ -0,0 +1,616 @@
|
|||
<template>
|
||||
<div class="place-search-map" :style="{width: width, height: height}" v-loading="loading">
|
||||
<div id="container"></div>
|
||||
<el-row class="search-row" :gutter="8" type="flex">
|
||||
</el-row>
|
||||
<div id="panel"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import globalConfig from '@/utils/config/globalConfig'
|
||||
import { debounce } from '@/utils'
|
||||
import AreaTextSelect from '@/components/AreaTextSelect/index.vue'
|
||||
import { getArea } from '@/api/system/area'
|
||||
import { listParking } from '@/api/system/parking'
|
||||
import { getDeviceBySn } from '@/api/system/device'
|
||||
export default {
|
||||
name: "LocationMap",
|
||||
components: { AreaTextSelect },
|
||||
props: {
|
||||
width: {
|
||||
type: String,
|
||||
default: "100%"
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: "100%"
|
||||
},
|
||||
initLng: {
|
||||
type: String,
|
||||
default: '120.250452'
|
||||
},
|
||||
initLat: {
|
||||
type: String,
|
||||
default: '27.101745'
|
||||
},
|
||||
status: {
|
||||
type: String,
|
||||
default: '0'
|
||||
},
|
||||
onlineStatus: {
|
||||
type: String,
|
||||
default: '0'
|
||||
},
|
||||
deviceSn: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
tripRouteStr: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
AMap: null,
|
||||
map: null, // 地图实例
|
||||
placeSearch: null, // POI查询
|
||||
geocoder: null, // 逆地理编码
|
||||
loading: false,
|
||||
keyword: null,
|
||||
markers: [],
|
||||
area: {
|
||||
// province: '福建省',
|
||||
// city: '宁德市',
|
||||
},
|
||||
// area:{},
|
||||
parkingList:[],
|
||||
noParkingList:[],
|
||||
noridingList:[],
|
||||
labels: [],
|
||||
areaId:''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.initAMap();
|
||||
// this.getAreas(this.areaId)
|
||||
|
||||
getDeviceBySn(this.deviceSn).then(response => {
|
||||
this.areaId=response.data.areaId
|
||||
console.log(response,'responseresponse');
|
||||
this.getAreas(this.areaId)
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
console.log("轨迹=====组件将被销毁");
|
||||
this.destroyMap();
|
||||
},
|
||||
methods: {
|
||||
destroyMap() {
|
||||
if (this.map) {
|
||||
console.log("位置=====地图实例存在，销毁地图...");
|
||||
this.map.destroy();
|
||||
console.log("位置=====地图已销毁");
|
||||
} else {
|
||||
console.log("位置=====地图实例不存在，无需销毁");
|
||||
}
|
||||
},
|
||||
// onChangeArea() {
|
||||
// this.loadPlaceSearch(this.area.province, this.area.city);
|
||||
// if (this.keyword != null) {
|
||||
// this.doPlaceSearch(this.keyword);
|
||||
// } else {
|
||||
// let city = this.area.city === '市辖区' ? this.area.province : this.area.city;
|
||||
// this.doPlaceSearch(city + '人民政府');
|
||||
// }
|
||||
// },
|
||||
|
||||
async getAreas(areaId) {
|
||||
getArea(this.areaId).then(response => {
|
||||
|
||||
console.log(response,'responseresponse');
|
||||
this.area = response.data;
|
||||
|
||||
|
||||
listParking({ areaId: this.area.areaId }).then(response => {
|
||||
let list = response.rows;
|
||||
console.log(list,'listlistlist');
|
||||
list.forEach(item => {
|
||||
if (item.type == '1') {
|
||||
this.parkingList.push(item);
|
||||
} else if (item.type == '2') {
|
||||
this.noParkingList.push(item);
|
||||
} else if (item.type == '3') {
|
||||
this.noridingList.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
this.initAMap();
|
||||
});
|
||||
});
|
||||
},
|
||||
initAMap() {
|
||||
AMapLoader.load({
|
||||
key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: ["AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
}).then((AMap) => {
|
||||
this.AMap = AMap;
|
||||
this.map = new AMap.Map("container", {
|
||||
// 设置地图容器id
|
||||
viewMode: "3D", // 是否为3D地图模式
|
||||
zoom: 16, // 初始化地图级别
|
||||
center: [this.initLng == null ? 120.250452 : this.initLng, this.initLat == null ? 27.101745 : this.initLat], // 初始化地图中心点位置
|
||||
});
|
||||
// this.map.on('click', this.onClickMap);
|
||||
|
||||
// POI
|
||||
// this.loadPlaceSearch(this.area.province, this.area.city);
|
||||
|
||||
// 逆地理编码
|
||||
// this.loadGeoCoder();
|
||||
this.addArea(JSON.parse( this.area.boundaryStr) || []);
|
||||
//停车区
|
||||
this.parkingList.forEach(parking => {
|
||||
this.addParking(JSON.parse(parking.boundaryStr) || [], parking.parkingName, parking.longitude, parking.latitude);
|
||||
this.addMarker2(parking, "https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh", parking.parkingName, "#1890ff");
|
||||
});
|
||||
//禁停区
|
||||
this.noParkingList.forEach(noparking => {
|
||||
this.addNoParking(JSON.parse(noparking.boundaryStr) || []);
|
||||
this.addMarker2(noparking, "https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab", noparking.parkingName, "#ff4444");
|
||||
});
|
||||
//禁行区
|
||||
this.noridingList.forEach(noriding => {
|
||||
this.addNoriding(JSON.parse(noriding.boundaryStr) || [], noriding.parkingName, noriding.longitude, noriding.latitude);
|
||||
this.addMarker2(noriding, "https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2", noriding.parkingName, "#ffcc00");
|
||||
});
|
||||
// 加载初始地址
|
||||
this.initMarker();
|
||||
// setTimeout(() => {
|
||||
// this.trajectory()
|
||||
// }, 500);
|
||||
|
||||
|
||||
}).catch((e) => {
|
||||
console.log("地图加载失败！！！");
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
trajectory() {
|
||||
console.log('轨迹调用了',this.tripRouteStr);
|
||||
this.line = JSON.parse(this.tripRouteStr)
|
||||
console.log("this.line================" + this.line)
|
||||
let abb;
|
||||
try {
|
||||
abb = JSON.parse(this.tripRouteStr);
|
||||
} catch (error) {
|
||||
console.error("Error parsing tripRouteStr:", error);
|
||||
return;
|
||||
}
|
||||
let latitude = parseFloat(abb[0][1]);
|
||||
let longitude = parseFloat(abb[0][0]);
|
||||
let latitude1 = parseFloat(abb[abb.length - 1][1]);
|
||||
let longitude1 = parseFloat( abb[abb.length - 1][0]);
|
||||
|
||||
this.marker = new AMap.Marker({
|
||||
map: this.map,
|
||||
position: [longitude, latitude],
|
||||
icon: new AMap.Icon({
|
||||
size: new AMap.Size(25, 38), // 图标大小
|
||||
image: "https://lxnapi.ccttiot.com/bike/img/static/u06paUGiHLvL08Pw7BGr",
|
||||
imageSize: new AMap.Size(25, 38) // 图标图片大小
|
||||
}),
|
||||
offset: new AMap.Pixel(-12.5, -19.5),
|
||||
});
|
||||
this.marker = new AMap.Marker({
|
||||
map: this.map,
|
||||
position: [longitude1, latitude1],
|
||||
icon: new AMap.Icon({
|
||||
size: new AMap.Size(25, 38), // 图标大小
|
||||
image: "https://lxnapi.ccttiot.com/bike/img/static/uwpAj9vYtPRmhtTOtflx",
|
||||
imageSize: new AMap.Size(25, 38) // 图标图片大小
|
||||
}),
|
||||
offset: new AMap.Pixel(-12.5, -19.5),
|
||||
});
|
||||
// console.log(latitude,longitude,'longitudelongitudelongitude');
|
||||
let line = this.line;
|
||||
this.marker = new AMap.Marker({
|
||||
map: this.map,
|
||||
position: line[0],
|
||||
icon: new AMap.Icon({
|
||||
image: globalConfig.icon.trajectory,
|
||||
size: new AMap.Size(25, 39), // 设置图标的宽高
|
||||
imageSize: new AMap.Size(25, 39) // 设置图标的实际显示尺寸
|
||||
}),
|
||||
offset: new AMap.Pixel(-12.5, -19.5),
|
||||
autoRotation: true,
|
||||
angle: 90
|
||||
});
|
||||
// 绘制轨迹
|
||||
let polyline = new AMap.Polyline({
|
||||
map: this.map,
|
||||
path: line,
|
||||
showDir: true,
|
||||
strokeColor: "#28F", //线颜色
|
||||
// strokeOpacity: 1, //线透明度
|
||||
strokeWeight: 6 //线宽
|
||||
// strokeStyle: "solid" //线样式
|
||||
});
|
||||
|
||||
let passedPolyline = new AMap.Polyline({
|
||||
map: this.map,
|
||||
// path: this.lineArr,
|
||||
strokeColor: "#AF5", //线颜色
|
||||
// strokeOpacity: 1, //线透明度
|
||||
strokeWeight: 6 //线宽
|
||||
// strokeStyle: "solid" //线样式
|
||||
});
|
||||
|
||||
this.marker.on("moving", function (e) {
|
||||
passedPolyline.setPath(e.passedPath);
|
||||
});
|
||||
|
||||
this.map.setFitView();
|
||||
},
|
||||
initMarker() {
|
||||
this.removeAllMarker();
|
||||
if (this.initLng != null && this.initLat != null) {
|
||||
// this.getGeoAddress(this.initLng, this.initLat).then(res => {
|
||||
// 标点
|
||||
this.removeAllMarker();
|
||||
console.log("添加标记点")
|
||||
console.log("====",this.initLng, this.initLat,this.deviceSn, this.status, this.onlineStatus)
|
||||
this.addMarker(this.initLng, this.initLat, this.deviceSn, this.status, this.onlineStatus);
|
||||
// this.$emit('map-geo', res, this.initLng, this.initLat);
|
||||
|
||||
// 地区
|
||||
// let component = res.regeocode.addressComponent;
|
||||
// this.area = {
|
||||
// province: component.province,
|
||||
// city: component.city === '' ? '市辖区' : component.city,
|
||||
// }
|
||||
// }).finally(() => {
|
||||
// this.loading = false;
|
||||
// })
|
||||
}
|
||||
},
|
||||
addMarker2(parking, icon, title, color) {
|
||||
let marker = new AMap.Marker({
|
||||
map: this.map,
|
||||
icon: new AMap.Icon({
|
||||
image: icon,
|
||||
size: new AMap.Size(25, 36), // 设置图标的宽高
|
||||
imageSize: new AMap.Size(25, 36) // 设置图标的实际显示尺寸
|
||||
}),
|
||||
position: [parking.longitude, parking.latitude],
|
||||
offset: new AMap.Pixel(-12.5, -36)
|
||||
});
|
||||
|
||||
this.markers.push(marker);
|
||||
|
||||
// console.log("title============="+title)
|
||||
// 创建一个 Text 实例来显示标题
|
||||
let text = new AMap.Text({
|
||||
text: title,
|
||||
anchor: 'center', // 设置文本的锚点
|
||||
position: [parking.longitude, parking.latitude],
|
||||
offset: new AMap.Pixel(0, -50),
|
||||
style: {
|
||||
'background-color': color, // 背景颜色为蓝色
|
||||
'border': 'none', // 边框颜色与背景一致
|
||||
'border-radius': '5px', // 圆角 5px
|
||||
'color': 'white', // 文字颜色为白色
|
||||
'font-size': '12px', // 字体大小
|
||||
}
|
||||
});
|
||||
|
||||
// 将文本标签添加到地图实例
|
||||
this.map.add(text);
|
||||
// console.log("text=============",text)
|
||||
this.labels.push(text)
|
||||
},
|
||||
addMarker: function(lng, lat, title, status, onlineStatus) {
|
||||
//创建一个 Marker 实例：
|
||||
console.log('title===========' + title)
|
||||
let icon = this.formarStatus(status, onlineStatus)
|
||||
console.log('icon===========' + icon)
|
||||
let marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(lng, lat), //经纬度对象
|
||||
icon: new AMap.Icon({
|
||||
image: icon,
|
||||
size: new AMap.Size(25, 30), // 设置图标的宽高
|
||||
imageSize: new AMap.Size(25, 30) // 设置图标的实际显示尺寸
|
||||
}),
|
||||
title: title,
|
||||
offset: new AMap.Pixel(-12.5, -35)
|
||||
})
|
||||
|
||||
//将创建的点标记添加到已有的地图实例：
|
||||
this.map.add(marker)
|
||||
this.markers.push(marker)
|
||||
console.log();
|
||||
|
||||
// 创建一个 Text 实例来显示标题
|
||||
let text = new AMap.Text({
|
||||
text: title,
|
||||
anchor: 'center', // 设置文本的锚点
|
||||
position: new AMap.LngLat(lng, lat), // 经纬度对象
|
||||
offset: new AMap.Pixel(0, -50),
|
||||
style: {
|
||||
'background-color': '#1890ff', // 背景颜色为蓝色
|
||||
'border': 'none', // 边框颜色与背景一致
|
||||
'border-radius': '5px', // 圆角 5px
|
||||
'color': 'white', // 文字颜色为白色
|
||||
'font-size': '14px', // 字体大小
|
||||
'padding': '5px 10px' // 内边距，调整文本框的大小
|
||||
}
|
||||
})
|
||||
|
||||
// 将文本标签添加到地图实例
|
||||
this.map.add(text)
|
||||
},
|
||||
addParking(data, title, lon, lat) {
|
||||
let polygon = new AMap.Polygon({
|
||||
path: data,
|
||||
fillColor: '#ccebc5',
|
||||
strokeOpacity: 1,
|
||||
fillOpacity: 0.5,
|
||||
strokeColor: '#3b7ed9', // 修改边界颜色为红色
|
||||
strokeWeight: 2, // 加粗边界
|
||||
strokeStyle: 'solid',
|
||||
strokeDasharray: [5, 5],
|
||||
});
|
||||
polygon.on('mouseover', () => {
|
||||
polygon.setOptions({
|
||||
fillOpacity: 0.7,
|
||||
fillColor: '#71b7cc' // 鼠标悬浮时填充颜色为红色
|
||||
});
|
||||
});
|
||||
polygon.on('mouseout', () => {
|
||||
polygon.setOptions({
|
||||
fillOpacity: 0.5,
|
||||
fillColor: '#a7c1d0' // 鼠标移出时恢复填充颜色
|
||||
});
|
||||
});
|
||||
this.map.add(polygon);
|
||||
},
|
||||
addNoParking(data) {
|
||||
let polygon = new AMap.Polygon({
|
||||
path: data,
|
||||
fillColor: '#ccebc5',
|
||||
strokeOpacity: 1,
|
||||
fillOpacity: 0.5,
|
||||
strokeColor: '#ff0000', // 修改边界颜色为红色
|
||||
strokeWeight: 2, // 加粗边界
|
||||
strokeStyle: 'solid',
|
||||
strokeDasharray: [5, 5],
|
||||
});
|
||||
polygon.on('mouseover', () => {
|
||||
polygon.setOptions({
|
||||
fillOpacity: 0.7,
|
||||
fillColor: '#ff0000' // 鼠标悬浮时填充颜色为红色
|
||||
});
|
||||
});
|
||||
polygon.on('mouseout', () => {
|
||||
polygon.setOptions({
|
||||
fillOpacity: 0.5,
|
||||
fillColor: '#cc7b7b' // 鼠标移出时恢复填充颜色
|
||||
});
|
||||
});
|
||||
this.map.add(polygon);
|
||||
},
|
||||
addNoriding(data, title, lon, lat) {
|
||||
let polygon = new AMap.Polygon({
|
||||
path: data,
|
||||
fillColor: '#ccebc5',
|
||||
strokeOpacity: 1,
|
||||
fillOpacity: 0.5,
|
||||
strokeColor: '#ffcc00', // 修改边界颜色为红色
|
||||
strokeWeight: 2, // 加粗边界
|
||||
strokeStyle: 'solid',
|
||||
strokeDasharray: [5, 5],
|
||||
});
|
||||
polygon.on('mouseover', () => {
|
||||
polygon.setOptions({
|
||||
fillOpacity: 0.7,
|
||||
fillColor: '#FFEBA4FF'
|
||||
});
|
||||
});
|
||||
polygon.on('mouseout', () => {
|
||||
polygon.setOptions({
|
||||
fillOpacity: 0.5,
|
||||
fillColor: '#ffeba4'
|
||||
});
|
||||
});
|
||||
this.map.add(polygon);
|
||||
},
|
||||
|
||||
addArea(data) {
|
||||
let polygon = new AMap.Polygon({
|
||||
path: data,
|
||||
fillColor: '#ccebc5',
|
||||
strokeOpacity: 1,
|
||||
fillOpacity: 0.5,
|
||||
strokeColor: '#2b8cbe',
|
||||
strokeWeight: 1,
|
||||
strokeStyle: 'dashed',
|
||||
strokeDasharray: [5, 5],
|
||||
});
|
||||
// polygon.on('mouseover', () => {
|
||||
// polygon.setOptions({
|
||||
// fillOpacity: 0.7,
|
||||
// fillColor: '#7bccc4'
|
||||
// })
|
||||
// })
|
||||
// polygon.on('mouseout', () => {
|
||||
// polygon.setOptions({
|
||||
// fillOpacity: 0.5,
|
||||
// fillColor: '#ccebc5'
|
||||
// })
|
||||
// })
|
||||
this.map.add(polygon);
|
||||
},
|
||||
formarStatus(status,onlineStatus){
|
||||
if(onlineStatus == "0"){
|
||||
if(status == "3"){
|
||||
return globalConfig.icon.redyellow;
|
||||
}else if(status == "4"){
|
||||
return globalConfig.icon.orangered;
|
||||
}
|
||||
return globalConfig.icon.red;
|
||||
}else{
|
||||
if(status == "0"){
|
||||
return globalConfig.icon.gray;
|
||||
}else if(status == "1"){
|
||||
return globalConfig.icon.blue;
|
||||
}else if(status == "2"){
|
||||
return globalConfig.icon.green;
|
||||
}else if(status == "3"){
|
||||
return globalConfig.icon.yellow;
|
||||
}else if(status == "4"){
|
||||
return globalConfig.icon.orange;
|
||||
}else if(status == "8"){
|
||||
return globalConfig.icon.gray;
|
||||
}else if(status == "9"){
|
||||
return globalConfig.icon.gray;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 删除所有的标记点
|
||||
removeAllMarker() {
|
||||
this.map.remove(this.markers);
|
||||
this.markers = [];
|
||||
},
|
||||
// 点击地图事件
|
||||
// onClickMap(e) {
|
||||
// console.log('clickMap', e);
|
||||
// let lng = e.lnglat.lng;
|
||||
// let lat = e.lnglat.lat;
|
||||
// this.changeMarker(lng, lat);
|
||||
// },
|
||||
// // 逆地理编码，并标点
|
||||
// changeMarker(lng, lat) {
|
||||
// console.log('changeMarker', lng,lat);
|
||||
// this.loading = true;
|
||||
// this.getGeoAddress(lng, lat).then(res => {
|
||||
// this.removeAllMarker();
|
||||
// this.addMarker(lng, lat, res.regeocode.formattedAddress);
|
||||
// this.$emit('map-geo', res, lng, lat);
|
||||
// }).finally(() => {
|
||||
// this.loading = false;
|
||||
// })
|
||||
// },
|
||||
// // 获取逆地理编码
|
||||
// getGeoAddress(lng, lat) {
|
||||
// console.log('getGeoAddress', lng,lat);
|
||||
// console.log('this.geocoder', this.geocoder);
|
||||
// if(this.geocoder){
|
||||
// return new Promise((resolve, reject) =>{
|
||||
// this.geocoder.getAddress([lng, lat], (status, result) => {
|
||||
// if (status === 'complete' && result.info === 'OK') {
|
||||
// console.log('resolve', result);
|
||||
// resolve(result);
|
||||
// } else {
|
||||
// console.log('reject', status,result);
|
||||
// reject(status);
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
// }
|
||||
// },
|
||||
// // 加载逆地理编码
|
||||
// loadGeoCoder() {
|
||||
// AMap.plugin('AMap.Geocoder', () => {
|
||||
// this.geocoder = new AMap.Geocoder({
|
||||
// city: '全国' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
|
||||
// })
|
||||
// })
|
||||
// },
|
||||
// // 加载POI
|
||||
// loadPlaceSearch(province, city) {
|
||||
// if (city == null) {
|
||||
// city = '北京市';
|
||||
// }
|
||||
// if (city === '市辖区') {
|
||||
// city = province;
|
||||
// }
|
||||
// AMap.plugin(["AMap.PlaceSearch"], () => {
|
||||
// //构造地点查询类
|
||||
// this.placeSearch = new AMap.PlaceSearch({
|
||||
// pageSize: 5, // 单页显示结果条数
|
||||
// pageIndex: 1, // 页码
|
||||
// city: city, // 兴趣点城市
|
||||
// citylimit: true, //是否强制限制在设置的城市内搜索
|
||||
// map: this.map, // 展现结果的地图实例
|
||||
// panel: "panel", // 结果列表将在此容器中进行展示。
|
||||
// autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
|
||||
// });
|
||||
// });
|
||||
// // 事件绑定
|
||||
// this.placeSearch.on('selectChanged', (data) => {
|
||||
// this.$emit('select-changed', data);
|
||||
// })
|
||||
// },
|
||||
//关键字查询
|
||||
doPlaceSearch(keyword) {
|
||||
if (keyword == null) {
|
||||
return this.$message.warning("请输入关键词");
|
||||
}
|
||||
this.loading = true;
|
||||
this.placeSearch.search(keyword, (status, result) => {
|
||||
this.loading = false;
|
||||
console.log("POI", status, result);
|
||||
});
|
||||
},
|
||||
// 周边搜索
|
||||
doSearchNearBy(keyword, lng, lat, radius = 200) {
|
||||
if (keyword == null) {
|
||||
return this.$message.warning("请输入关键词");
|
||||
}
|
||||
this.loading = true;
|
||||
this.placeSearch.searchNearBy(keyword, [lng, lat], radius, (status, result) => {
|
||||
this.loading = false;
|
||||
console.log("POI NearBy", status, result);
|
||||
})
|
||||
},
|
||||
// 根据地图中心点查询周边
|
||||
doSearchNearByCenter(keyword) {
|
||||
let center = this.map.getCenter();
|
||||
this.doSearchNearBy(keyword, center.lng, center.lat, 1000);
|
||||
},
|
||||
// 监听输入事件
|
||||
onInputSearch: debounce(function () {
|
||||
this.doPlaceSearch(this.keyword)
|
||||
}, 600)
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.place-search-map {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.search-row {
|
||||
margin: 0.5em;
|
||||
}
|
||||
#container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#panel {
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
max-height: 90%;
|
||||
overflow-y: auto;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -246,6 +246,20 @@ export const dynamicRoutes = [
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/system/areaRange',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
permissions: ['system:parking:list'],
|
||||
children: [
|
||||
{
|
||||
path: 'index/:areaId(\\d+)?', // 将参数设置为可选
|
||||
component: () => import('@/views/system/area/areaRange'),
|
||||
name: 'Data',
|
||||
meta: { title: '运营区范围设置', activeMenu: '/system/areaRange' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/system/area-noriding',
|
||||
component: Layout,
|
||||
|
|
|
|||
|
|
@ -4,76 +4,151 @@
|
|||
<div class="info_li">
|
||||
<div class="card1">
|
||||
<div class="txt">运营商数</div>
|
||||
<div class="num">{{StatisticsInfo.operatorCount }}</div>
|
||||
<div class="txt1">独立小程序：{{StatisticsInfo.appCount }}</div>
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uZdZtiQN8BGMcSEamOmj" alt="">
|
||||
<div class="num">{{ StatisticsInfo.operatorCount }}</div>
|
||||
<div class="txt1">独立小程序：{{ StatisticsInfo.appCount }}</div>
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uZdZtiQN8BGMcSEamOmj"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="card1" style="background: linear-gradient( 270deg, #A6A6E7 0%, rgba(166,166,231,0.44) 100%);">
|
||||
<div
|
||||
class="card1"
|
||||
style="
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
#a6a6e7 0%,
|
||||
rgba(166, 166, 231, 0.44) 100%
|
||||
);
|
||||
"
|
||||
>
|
||||
<div class="txt">商户总余额</div>
|
||||
<div class="num">{{StatisticsInfo.totalBalance }}</div>
|
||||
<div class="num">{{ StatisticsInfo.totalBalance }}</div>
|
||||
<div class="txt1">已提现金额：{{ StatisticsInfo.withdrawn }}</div>
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uy7fzOouY8czRqSuh76D" alt=""
|
||||
style="width: 6.42rem;height: 7rem;">
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uy7fzOouY8czRqSuh76D"
|
||||
alt=""
|
||||
style="width: 6.42rem; height: 7rem"
|
||||
/>
|
||||
</div>
|
||||
<div class="card1" style="background: linear-gradient( 270deg, #64B6A7 0%, rgba(100,182,167,0.44) 100%);">
|
||||
<div
|
||||
class="card1"
|
||||
style="
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
#64b6a7 0%,
|
||||
rgba(100, 182, 167, 0.44) 100%
|
||||
);
|
||||
"
|
||||
>
|
||||
<div class="txt">运营区数</div>
|
||||
<div class="num">{{StatisticsInfo.areaCount }}</div>
|
||||
<div class="txt1">已提现金额：{{StatisticsInfo.otalOrderCount }}</div>
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uErTaNSlejRXjjzHAdym" alt="">
|
||||
<div class="num">{{ StatisticsInfo.areaCount }}</div>
|
||||
<div class="txt1">
|
||||
已提现金额：{{ StatisticsInfo.otalOrderCount }}
|
||||
</div>
|
||||
<div class="card1" style="background: linear-gradient( 270deg, #60ADFD 0%, rgba(148,198,250,0.5) 100%), #FFFFFF;">
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uErTaNSlejRXjjzHAdym"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="card1"
|
||||
style="
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
#60adfd 0%,
|
||||
rgba(148, 198, 250, 0.5) 100%
|
||||
),
|
||||
#ffffff;
|
||||
"
|
||||
>
|
||||
<div class="txt">车辆总数</div>
|
||||
<div class="num">{{StatisticsInfo.vehicleVo.allNum }}</div>
|
||||
<div class="txt1">车辆型号：{{StatisticsInfo.modelCount }}</div>
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uTBhrhUajBERKs81lJSe" alt=""
|
||||
style="width: 7.33rem;height: 6.08rem;">
|
||||
<div class="num">{{ StatisticsInfo.vehicleVo.allNum }}</div>
|
||||
<div class="txt1">车辆型号：{{ StatisticsInfo.modelCount }}</div>
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uTBhrhUajBERKs81lJSe"
|
||||
alt=""
|
||||
style="width: 7.33rem; height: 6.08rem"
|
||||
/>
|
||||
</div>
|
||||
<div class="card1"
|
||||
style="background: linear-gradient( 270deg, #FFB2B2 0%, rgba(255,178,178,0.36) 100%), #FFFFFF;">
|
||||
<div
|
||||
class="card1"
|
||||
style="
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
#ffb2b2 0%,
|
||||
rgba(255, 178, 178, 0.36) 100%
|
||||
),
|
||||
#ffffff;
|
||||
"
|
||||
>
|
||||
<div class="txt">用户总数</div>
|
||||
<div class="num">{{StatisticsInfo.userCount }}</div>
|
||||
<div class="txt1">今日新增：{{StatisticsInfo.todayUserCount }}</div>
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uyqanVA0Qi2ZWg0cNmwg" alt=""
|
||||
style="width: 7.33rem;height: 7.42rem;">
|
||||
<div class="num">{{ StatisticsInfo.userCount }}</div>
|
||||
<div class="txt1">今日新增：{{ StatisticsInfo.todayUserCount }}</div>
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uyqanVA0Qi2ZWg0cNmwg"
|
||||
alt=""
|
||||
style="width: 7.33rem; height: 7.42rem"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info_li" style="margin-top: 1.25rem;">
|
||||
<div class="info_li" style="margin-top: 1.25rem">
|
||||
<div class="card2">
|
||||
<div class="txt">今日订单数</div>
|
||||
<div class="num">{{StatisticsInfo.todayOrderCount }}</div>
|
||||
<div class="txt1">总订单数：{{StatisticsInfo.totalOrderCount }}</div>
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uNs2VyDSLLmF11ydeaFN" alt="">
|
||||
<div class="num">{{ StatisticsInfo.todayOrderCount }}</div>
|
||||
<div class="txt1">总订单数：{{ StatisticsInfo.totalOrderCount }}</div>
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uNs2VyDSLLmF11ydeaFN"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="card2">
|
||||
<div class="txt">今日订单金额</div>
|
||||
<div class="num">{{StatisticsInfo.todayOrderFee }}</div>
|
||||
<div class="txt1">订单总金额：{{StatisticsInfo.totalOrderFee }}</div>
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uxbM4kTP9Jdzi4suo83W" alt="">
|
||||
<div class="num">{{ StatisticsInfo.todayOrderFee }}</div>
|
||||
<div class="txt1">订单总金额：{{ StatisticsInfo.totalOrderFee }}</div>
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uxbM4kTP9Jdzi4suo83W"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="card2">
|
||||
<div class="txt">今日退款金额</div>
|
||||
<div class="num">{{StatisticsInfo.todayRefundFee }}</div>
|
||||
<div class="txt1">总退款金额：{{StatisticsInfo.totalRefundFee }}</div>
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uwJ6enKaUs6qMMXC7xEt" alt="">
|
||||
<div class="num">{{ StatisticsInfo.todayRefundFee }}</div>
|
||||
<div class="txt1">
|
||||
总退款金额：{{ StatisticsInfo.totalRefundFee }}
|
||||
</div>
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uwJ6enKaUs6qMMXC7xEt"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="card2">
|
||||
<div class="txt">待付款订单金额</div>
|
||||
<div class="num">{{StatisticsInfo.unpaidOrderFee }}</div>
|
||||
<div class="txt1">待付款订单数：{{StatisticsInfo.unpaidOrderCount }}</div>
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/un9hBy1mNXjAsRnrSt14" alt="">
|
||||
<div class="num">{{ StatisticsInfo.unpaidOrderFee }}</div>
|
||||
<div class="txt1">
|
||||
待付款订单数：{{ StatisticsInfo.unpaidOrderCount }}
|
||||
</div>
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/un9hBy1mNXjAsRnrSt14"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="card2">
|
||||
<div class="txt">待审核还车押金扣款</div>
|
||||
<div class="num">{{StatisticsInfo.returnOrderDeductFee }}</div>
|
||||
<div class="txt1">还车待审核订单数:{{StatisticsInfo.returnOrderCount }}</div>
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uBV6yOFFWUvTValGnmfw" alt="">
|
||||
<div class="num">{{ StatisticsInfo.returnOrderDeductFee }}</div>
|
||||
<div class="txt1">
|
||||
还车待审核订单数:{{ StatisticsInfo.returnOrderCount }}
|
||||
</div>
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uBV6yOFFWUvTValGnmfw"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cont_box">
|
||||
<div class="echart_box">
|
||||
<div class="tit"> 营收统计</div>
|
||||
<div class="tit">营收统计</div>
|
||||
<div class="echarts_cont">
|
||||
<div id="myChart" style="width: 100%;height: 100%;"></div>
|
||||
<div id="myChart" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_box">
|
||||
|
|
@ -81,17 +156,26 @@
|
|||
<div class="info_li">
|
||||
<div class="card2">
|
||||
<div class="txt">今日支付手续费</div>
|
||||
<div class="num">{{StatisticsInfo.todayHandlingFee }}</div>
|
||||
<div class="txt1">总支付手续费：{{StatisticsInfo.totalHandlingFee }}</div>
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uNs2VyDSLLmF11ydeaFN" alt="">
|
||||
<div class="num">{{ StatisticsInfo.todayHandlingFee }}</div>
|
||||
<div class="txt1">
|
||||
总支付手续费：{{ StatisticsInfo.totalHandlingFee }}
|
||||
</div>
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uNs2VyDSLLmF11ydeaFN"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="card2">
|
||||
<div class="txt">今日服务费</div>
|
||||
<div class="num">{{StatisticsInfo.todayServiceFee }}</div>
|
||||
<div class="txt1">总服务费：{{StatisticsInfo.totalServiceFee }}</div>
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uxbM4kTP9Jdzi4suo83W" alt="">
|
||||
<div class="num">{{ StatisticsInfo.todayServiceFee }}</div>
|
||||
<div class="txt1">
|
||||
总服务费：{{ StatisticsInfo.totalServiceFee }}
|
||||
</div>
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uxbM4kTP9Jdzi4suo83W"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="car_info_box">
|
||||
|
|
@ -100,7 +184,10 @@
|
|||
<div class="info_li">
|
||||
<div class="info_cont">
|
||||
<div class="info_cont_top">
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uUSztvtXXdRtxHzQVWgH" alt="">投放中（辆）
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uUSztvtXXdRtxHzQVWgH"
|
||||
alt=""
|
||||
/>投放中（辆）
|
||||
</div>
|
||||
<div class="info_cont_txt">
|
||||
{{ StatisticsInfo.vehicleVo.inOperation }}
|
||||
|
|
@ -108,7 +195,10 @@
|
|||
</div>
|
||||
<div class="info_cont">
|
||||
<div class="info_cont_top">
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uUAe2gRT4blxwsIKs0id" alt="">骑行中（辆）
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uUAe2gRT4blxwsIKs0id"
|
||||
alt=""
|
||||
/>骑行中（辆）
|
||||
</div>
|
||||
<div class="info_cont_txt">
|
||||
{{ StatisticsInfo.vehicleVo.ridingNum }}
|
||||
|
|
@ -116,7 +206,10 @@
|
|||
</div>
|
||||
<div class="info_cont">
|
||||
<div class="info_cont_top">
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uAoVo6LxxZ4PthTHZtiH" alt="">仓库中（辆）
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uAoVo6LxxZ4PthTHZtiH"
|
||||
alt=""
|
||||
/>仓库中（辆）
|
||||
</div>
|
||||
<div class="info_cont_txt">
|
||||
{{ StatisticsInfo.vehicleVo.inStashNum }}
|
||||
|
|
@ -126,7 +219,10 @@
|
|||
<div class="info_li">
|
||||
<div class="info_cont">
|
||||
<div class="info_cont_top">
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uxx6Ajx0ne7Ho6LH8Bfg" alt="">禁用中（辆）
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uxx6Ajx0ne7Ho6LH8Bfg"
|
||||
alt=""
|
||||
/>禁用中（辆）
|
||||
</div>
|
||||
<div class="info_cont_txt">
|
||||
{{ StatisticsInfo.vehicleVo.disabledNum }}
|
||||
|
|
@ -134,7 +230,10 @@
|
|||
</div>
|
||||
<div class="info_cont">
|
||||
<div class="info_cont_top">
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uUgJO8VOMNI48H7ab5yU" alt="">调度中（辆）
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uUgJO8VOMNI48H7ab5yU"
|
||||
alt=""
|
||||
/>调度中（辆）
|
||||
</div>
|
||||
<div class="info_cont_txt">
|
||||
{{ StatisticsInfo.vehicleVo.dispatchNum }}
|
||||
|
|
@ -142,7 +241,10 @@
|
|||
</div>
|
||||
<div class="info_cont">
|
||||
<div class="info_cont_top">
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uAKVUuosyqvFJx5Ynjbp" alt="">离线（辆）
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uAKVUuosyqvFJx5Ynjbp"
|
||||
alt=""
|
||||
/>离线（辆）
|
||||
</div>
|
||||
<div class="info_cont_txt">
|
||||
{{ StatisticsInfo.vehicleVo.offlineNum }}
|
||||
|
|
@ -151,16 +253,16 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="bot_box">
|
||||
<div class="tit">运维状态</div>
|
||||
<div class="cont_box">
|
||||
|
||||
<div class="cont_li">
|
||||
<div class="cont_li_top">
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uDOL2U9faZ5ku81NTPnU" alt="">4g解锁失败
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uDOL2U9faZ5ku81NTPnU"
|
||||
alt=""
|
||||
/>4g解锁失败
|
||||
</div>
|
||||
<div class="cont_li_bot">
|
||||
{{ StatisticsInfo.operationVo.failedUnlockCount }}
|
||||
|
|
@ -168,15 +270,21 @@
|
|||
</div>
|
||||
<div class="cont_li">
|
||||
<div class="cont_li_top">
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uuCZPQA3uCAJsAqca8Bv" alt="">蓝牙解锁数
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uuCZPQA3uCAJsAqca8Bv"
|
||||
alt=""
|
||||
/>蓝牙解锁数
|
||||
</div>
|
||||
<div class="cont_li_bot">
|
||||
{{ StatisticsInfo.operationVo.bluetoothUnlockCount}}
|
||||
{{ StatisticsInfo.operationVo.bluetoothUnlockCount }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="cont_li">
|
||||
<div class="cont_li_top">
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uwGblBABW5uKSVzW4FjE" alt="">设备离线率
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uwGblBABW5uKSVzW4FjE"
|
||||
alt=""
|
||||
/>设备离线率
|
||||
</div>
|
||||
<div class="cont_li_bot">
|
||||
{{ StatisticsInfo.operationVo.deviceOfflineRate }}%
|
||||
|
|
@ -184,7 +292,10 @@
|
|||
</div>
|
||||
<div class="cont_li">
|
||||
<div class="cont_li_top">
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uDOL2U9faZ5ku81NTPnU" alt="">异常排查车辆
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uDOL2U9faZ5ku81NTPnU"
|
||||
alt=""
|
||||
/>异常排查车辆
|
||||
</div>
|
||||
<div class="cont_li_bot">
|
||||
{{ StatisticsInfo.operationVo.faultOrderCount }}
|
||||
|
|
@ -192,7 +303,10 @@
|
|||
</div>
|
||||
<div class="cont_li">
|
||||
<div class="cont_li_top">
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uuCZPQA3uCAJsAqca8Bv" alt="">待换电
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uuCZPQA3uCAJsAqca8Bv"
|
||||
alt=""
|
||||
/>待换电
|
||||
</div>
|
||||
<div class="cont_li_bot">
|
||||
{{ StatisticsInfo.operationVo.replacementOrderCount }}
|
||||
|
|
@ -200,7 +314,10 @@
|
|||
</div>
|
||||
<div class="cont_li">
|
||||
<div class="cont_li_top">
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uwGblBABW5uKSVzW4FjE" alt="">待维修
|
||||
<img
|
||||
src="https://lxnapi.ccttiot.com/bike/img/static/uwGblBABW5uKSVzW4FjE"
|
||||
alt=""
|
||||
/>待维修
|
||||
</div>
|
||||
<div class="cont_li_bot">
|
||||
{{ StatisticsInfo.operationVo.repairCount }}
|
||||
|
|
@ -209,51 +326,152 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
1
|
||||
<div class="rights">
|
||||
<div class="check_li">
|
||||
|
||||
<span>时间：</span>
|
||||
<el-select
|
||||
v-model="data"
|
||||
filterable
|
||||
placeholder="请选择排序时间"
|
||||
clearable
|
||||
@change="changetime"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
|
||||
<span>类型：</span>
|
||||
<el-select
|
||||
v-model="type"
|
||||
filterable
|
||||
placeholder="请选择排序类型"
|
||||
clearable
|
||||
@change="changetype"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in optionss"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div class="li" v-for="(item,index) in leaderboardList" :key="index">
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/uM68bA3PUCCXFEkIZJ6c" alt="" v-if="index==0">
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/u5drfWtvysvsCjN8IuAE" alt="" v-if="index==1">
|
||||
<img src="https://lxnapi.ccttiot.com/bike/img/static/u35XPUX5r0HrV2IWit5F" alt="" v-if="index==2">
|
||||
<div class="paim" v-if="index!=0&&index!=1&&index!=2">
|
||||
{{index+1}}
|
||||
</div>
|
||||
<div class="li_txt">
|
||||
{{item.areaName}}
|
||||
</div>
|
||||
<div class="li_txt">
|
||||
订单金额:{{item.orderFee}}
|
||||
</div>
|
||||
<div class="li_txt">
|
||||
订单数:{{item.orderCount}}
|
||||
</div>
|
||||
<div class="li_txt">
|
||||
进行中的订单:{{item.inProgressOrderCount}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { getAdminStatistics } from '@/api/system/area'
|
||||
import * as echarts from 'echarts';
|
||||
import { getAdminStatistics,getleaderboard } from "@/api/system/area";
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "Index",
|
||||
data() {
|
||||
return {
|
||||
StatisticsInfo: {},
|
||||
userName: undefined,
|
||||
chartInstance:null
|
||||
chartInstance: null,
|
||||
data: "1",
|
||||
options: [
|
||||
{
|
||||
value: "1",
|
||||
label: "今天",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "本周",
|
||||
},
|
||||
],
|
||||
optionss: [
|
||||
{
|
||||
value: "1",
|
||||
label: "订单数",
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
label: "订单金额",
|
||||
},
|
||||
|
||||
{
|
||||
value: "3",
|
||||
label: "进行中的订单",
|
||||
},
|
||||
],
|
||||
type:"2",
|
||||
leaderboardList:[]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.userName = this.$store.state.user.name;
|
||||
this.AdminStatistics();
|
||||
window.addEventListener('resize', this.handleResize);
|
||||
window.addEventListener("resize", this.handleResize);
|
||||
this.getlibord()
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.handleResize);
|
||||
window.removeEventListener("resize", this.handleResize);
|
||||
if (this.chartInstance) {
|
||||
this.chartInstance.dispose();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changetype(value){
|
||||
this.getlibord()
|
||||
console.log('点击了',value);
|
||||
},
|
||||
changetime(value){
|
||||
this.getlibord()
|
||||
console.log('点击了',value);
|
||||
},
|
||||
AdminStatistics() {
|
||||
getAdminStatistics().then(response => {
|
||||
getAdminStatistics().then((response) => {
|
||||
this.StatisticsInfo = response.data;
|
||||
this.StatisticsInfo.incomeVoList.reverse();
|
||||
setTimeout(() => {
|
||||
this.drawLine()
|
||||
this.drawLine();
|
||||
}, 1000);
|
||||
|
||||
console.log("areaOptions", this.areaOptions);
|
||||
});
|
||||
},
|
||||
getlibord() {
|
||||
getleaderboard(this.type,this.data).then((response) => {
|
||||
this.leaderboardList=response.data
|
||||
// this.StatisticsInfo = response.data;
|
||||
// this.StatisticsInfo.incomeVoList.reverse();
|
||||
// setTimeout(() => {
|
||||
// this.drawLine();
|
||||
// }, 1000);
|
||||
|
||||
console.log("areaOptions", this.areaOptions);
|
||||
});
|
||||
},
|
||||
drawLine() {
|
||||
this.chartInstance = echarts.init(document.getElementById("myChart"));
|
||||
// 设置图表的配置项和数据
|
||||
|
|
@ -265,90 +483,137 @@ export default {
|
|||
bottom: 20,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: ['订单金额', '订单']
|
||||
data: ["订单金额", "订单"],
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: this.StatisticsInfo.incomeVoList.map(item => item.day)
|
||||
data: this.StatisticsInfo.incomeVoList.map((item) => item.day),
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '订单金额',
|
||||
position: 'left',
|
||||
type: "value",
|
||||
name: "订单金额",
|
||||
position: "left",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#5470C6'
|
||||
}
|
||||
color: "#5470C6",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value} 元'
|
||||
}
|
||||
formatter: "{value} 元",
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '订单',
|
||||
position: 'right',
|
||||
type: "value",
|
||||
name: "订单",
|
||||
position: "right",
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#91CC75'
|
||||
}
|
||||
color: "#91CC75",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
}
|
||||
}
|
||||
formatter: "{value}",
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '订单金额',
|
||||
type: 'line',
|
||||
data: this.StatisticsInfo.incomeVoList.map(item => item.orderFee),
|
||||
name: "订单金额",
|
||||
type: "line",
|
||||
data: this.StatisticsInfo.incomeVoList.map((item) => item.orderFee),
|
||||
yAxisIndex: 0,
|
||||
itemStyle: {
|
||||
color: '#5470C6'
|
||||
color: "#5470C6",
|
||||
},
|
||||
smooth: true
|
||||
smooth: true,
|
||||
},
|
||||
{
|
||||
name: '订单',
|
||||
type: 'line',
|
||||
data: this.StatisticsInfo.incomeVoList.map(item => item.orderNum),
|
||||
name: "订单",
|
||||
type: "line",
|
||||
data: this.StatisticsInfo.incomeVoList.map((item) => item.orderNum),
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: '#91CC75'
|
||||
color: "#91CC75",
|
||||
},
|
||||
smooth: true
|
||||
}
|
||||
]
|
||||
smooth: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page {
|
||||
padding: 1.92rem;
|
||||
background: #F7F8FA;
|
||||
background: #f7f8fa;
|
||||
width: 100%;
|
||||
// height: 100vh;
|
||||
display: flex;
|
||||
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: row;
|
||||
.right{
|
||||
width: 24%;
|
||||
.rights {
|
||||
width: 27%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
align-content: flex-start;
|
||||
flex-direction: row;
|
||||
|
||||
.check_li{
|
||||
padding: 0 1rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
height: 3rem;
|
||||
span{
|
||||
width: 3.5rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.li {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
width: 90%;
|
||||
height: 3rem;
|
||||
background: #fff;
|
||||
box-shadow: 0px 10px 64px 0px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 10%;
|
||||
img{
|
||||
width: 37px;
|
||||
height: 23.6px;
|
||||
}
|
||||
.left{
|
||||
width: 75%;
|
||||
.li_txt{
|
||||
width: 20%;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
.paim{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
border-radius: 50%;
|
||||
// background-color: #ccc;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.left {
|
||||
width: 72%;
|
||||
.cont_box {
|
||||
width: 100%;
|
||||
margin-top: 1.33rem;
|
||||
|
|
@ -360,7 +625,7 @@ export default {
|
|||
margin-right: 1.17rem;
|
||||
width: 59%;
|
||||
height: 31.83rem;
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
border-radius: 0rem 0rem 0rem 0rem;
|
||||
|
||||
.echarts_cont {
|
||||
|
|
@ -372,7 +637,7 @@ export default {
|
|||
.tit {
|
||||
font-weight: 500;
|
||||
font-size: 1.33rem;
|
||||
color: #1D252F;
|
||||
color: #1d252f;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -407,7 +672,7 @@ export default {
|
|||
.txt {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: #1D252F;
|
||||
color: #1d252f;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
|
@ -416,13 +681,13 @@ export default {
|
|||
margin-bottom: 0.44rem;
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
color: #1D252F;
|
||||
color: #1d252f;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.txt1 {
|
||||
font-size: 1rem;
|
||||
color: #1D252F;
|
||||
color: #1d252f;
|
||||
line-height: 1.58rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
@ -431,14 +696,11 @@ export default {
|
|||
position: absolute;
|
||||
right: 1.75rem;
|
||||
top: 1.42rem;
|
||||
width: 4.5rem;
|
||||
height: 4.5rem;
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -447,13 +709,13 @@ export default {
|
|||
padding: 0.75rem 1.67rem;
|
||||
width: 100%;
|
||||
height: 20.25rem;
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
border-radius: 0rem 0rem 0rem 0rem;
|
||||
|
||||
.tit {
|
||||
font-weight: 500;
|
||||
font-size: 1.33rem;
|
||||
color: #1D252F;
|
||||
color: #1d252f;
|
||||
}
|
||||
|
||||
.info_li {
|
||||
|
|
@ -489,13 +751,12 @@ export default {
|
|||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 2rem;
|
||||
color: #3D3D3D;
|
||||
color: #3d3d3d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.bot_box {
|
||||
|
|
@ -504,14 +765,14 @@ export default {
|
|||
margin-top: 1.33rem;
|
||||
width: 100%;
|
||||
height: 12.42rem;
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
border-radius: 0rem 0rem 0rem 0rem;
|
||||
|
||||
.tit {
|
||||
width: 100%;
|
||||
font-weight: 500;
|
||||
font-size: 1.33rem;
|
||||
color: #1D252F;
|
||||
color: #1d252f;
|
||||
}
|
||||
|
||||
.cont_box {
|
||||
|
|
@ -521,7 +782,7 @@ export default {
|
|||
.cont_li {
|
||||
width: 16.6%;
|
||||
height: 5.67rem;
|
||||
border-right: 1px solid #D8D8D8;
|
||||
border-right: 1px solid #d8d8d8;
|
||||
|
||||
.cont_li_top {
|
||||
width: 100%;
|
||||
|
|
@ -538,8 +799,7 @@ export default {
|
|||
|
||||
font-weight: 700;
|
||||
font-size: 1.33rem;
|
||||
color: #3D3D3D;
|
||||
|
||||
color: #3d3d3d;
|
||||
}
|
||||
|
||||
.cont_li_bot {
|
||||
|
|
@ -548,9 +808,8 @@ export default {
|
|||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 1.67rem;
|
||||
color: #3D3D3D;
|
||||
color: #3d3d3d;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -570,11 +829,13 @@ export default {
|
|||
background: #fff;
|
||||
border-radius: 0rem 0rem 0rem 0rem;
|
||||
|
||||
.txt, .num, .txt1 {
|
||||
.txt,
|
||||
.num,
|
||||
.txt1 {
|
||||
font-weight: 500;
|
||||
position: relative; // 确保文字相对于父容器定位
|
||||
z-index: 10; // 确保文字在图片上方
|
||||
color: #1D252F;
|
||||
color: #1d252f;
|
||||
}
|
||||
|
||||
.txt {
|
||||
|
|
@ -594,14 +855,13 @@ export default {
|
|||
|
||||
img {
|
||||
position: absolute;
|
||||
right: 1.75rem;
|
||||
right: 1.25rem;
|
||||
top: 1.42rem;
|
||||
width: 4.5rem;
|
||||
height: 4.5rem;
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
z-index: 0; // 确保图片在文字下方
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.card1 {
|
||||
margin-right: 1%;
|
||||
|
|
@ -609,13 +869,17 @@ export default {
|
|||
position: relative;
|
||||
width: 20%;
|
||||
height: 10.42rem;
|
||||
background: linear-gradient(270deg, #60ADFD 0%, rgba(148, 198, 250, 0.5) 100%);
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
#60adfd 0%,
|
||||
rgba(148, 198, 250, 0.5) 100%
|
||||
);
|
||||
border-radius: 0rem 0rem 0rem 0rem;
|
||||
|
||||
.txt {
|
||||
font-weight: 500;
|
||||
font-size: 1.33rem;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.num {
|
||||
|
|
@ -623,12 +887,12 @@ export default {
|
|||
margin-bottom: 0.44rem;
|
||||
font-weight: 500;
|
||||
font-size: 2rem;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.txt1 {
|
||||
font-size: 1.17rem;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
line-height: 1.58rem;
|
||||
}
|
||||
|
||||
|
|
@ -640,9 +904,7 @@ export default {
|
|||
height: 7.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
17
src/views/system/area/areaRange.vue
Normal file
17
src/views/system/area/areaRange.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<div class="page">
|
||||
11111111
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.page{
|
||||
margin-top: 200rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -95,6 +95,13 @@
|
|||
<span>去设置</span>
|
||||
</router-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="运营区区域范围设置" align="center" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
<router-link :to="'/system/areaRange/index/' + scope.row.areaId" class="link-type">
|
||||
<span>去设置</span>
|
||||
</router-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="收费方式" align="center" prop="ruleStr" :show-overflow-tooltip="true" />
|
||||
<!-- <el-table-column label="联系人" align="center" prop="contact" />-->
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user