chuangte/bick_back
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

范围

Browse Source
This commit is contained in:
tx 2024-08-14 18:05:34 +08:00
parent 550ebddfff
commit f95e1aceff
5 changed files with 1208 additions and 671 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@ -5,8 +5,8 @@ VUE_APP_TITLE = 共享电动车管理系统
ENV = 'development'
# 共享电动车管理系统/开发环境
# VUE_APP_BASE_API = 'https://dche.ccttiot.com/prod-api'
VUE_APP_BASE_API = 'http://192.168.2.46:8088'
VUE_APP_BASE_API = 'https://dche.ccttiot.com/prod-api'
# VUE_APP_BASE_API = 'http://192.168.2.46:8088'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

204
src/components/Map/location/LocationMap.vue
View File

@ -11,7 +11,8 @@ 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'
export default {
name: "LocationMap",
components: { AreaTextSelect },
@ -43,7 +44,11 @@ export default {
deviceSn: {
type: String,
default: ''
}
},
areaId: {
type: Number,
default: ''
},
},
data() {
return {
@ -55,13 +60,19 @@ export default {
keyword: null,
markers: [],
area: {
province: '福建省',
city: '宁德市',
}
// province: '福建省',
// city: '宁德市',
},
area:{},
parkingList:[],
noParkingList:[],
noridingList:[],
labels: [],
}
},
mounted() {
this.initAMap();
// this.initAMap();
this.getAreas(this.areaId)
},
beforeDestroy() {
console.log("轨迹=====组件将被销毁");
@ -86,6 +97,30 @@ export default {
// 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 时必填
@ -93,7 +128,7 @@ export default {
plugins: ["AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
this.AMap = AMap;
this.map = new AMap.Map("container", {
this.map = new AMap.Map("container", {
// 设置地图容器id
viewMode: "3D", // 是否为3D地图模式
zoom: 16, // 初始化地图级别
@ -106,7 +141,22 @@ export default {
// 逆地理编码
// 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();
@ -137,6 +187,41 @@ export default {
// })
}
},
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)
@ -152,9 +237,11 @@ export default {
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({
@ -174,6 +261,107 @@ export default {
// 将文本标签添加到地图实例
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"){

43
src/views/statistics/index.vue
View File

@ -2,10 +2,26 @@
<div class="page">
<div class="area-options">
<span style="margin-right: .625rem;">切换运营区</span>
<el-select v-model="areaId" placeholder="请选择运营区" clearable @change="handleAreaChange" size="medium">
<el-option v-for="item in areaOptions" :key="item.areaId" :label="item.areaName"
:value="item.areaId"></el-option>
</el-select>
<el-select
v-model="areaId"
placeholder="请选择运营区"
filterable
clearable
@change="handleAreaChange"
size="medium"
>
<el-option
v-for="item in areaOptions"
:key="item.areaId"
:label="item.areaName + ' - ' + item.deptName"
:value="item.areaId"
>
<div class="option-content" style=" display: flex;justify-content: space-between;">
<span class="area-name">{{ item.areaName }}</span>
<span class="dept-name">{{ item.deptName }}</span>
</div>
</el-option>
</el-select>
</div>
<div class="top_box">
<div class="tops_left">
@ -400,6 +416,25 @@ export default {
// height: 100vh;
display: flex;
flex-direction: column;
.option-content {
display: flex;
flex-wrap: nowrap;
// justify-content: space-between;
// align-items: center;
width: 100%;
.area-name {
// width: 10rem !important;
// flex-grow: 1;
// text-align: left;
}
.dept-name {
margin-left: 20px;
// flex-grow: 1;
// text-align: right;
}
}
.area-options {
width: 100%;

1622
src/views/system/area/areaSet.vue
View File

File diff suppressed because it is too large Load Diff

6
src/views/system/device/index.vue
View File

@ -523,7 +523,9 @@
:status="form.status"
:online-status="form.onlineStatus"
:device-sn="form.sn"
:areaId="form.areaId"
/>
</el-col>
</el-row>
<el-row>
@ -558,7 +560,7 @@
updateDevice,
handleLock,
handleUnlocking,
ring,
ring,
oneClickOnline,
oneClickOffline,
reboot,
@ -1065,7 +1067,9 @@ export default {
/** 详情按钮 */
handleView(row) {
this.open2 = true;
this.form = row;
console.log(this.form,'this.formthis.formthis.form');
this.showPlaceSearchMap = true;
this.key++;
this.orderRecordKey += 1;