diff --git a/.env.development b/.env.development index 8f703d4..c500b62 100644 --- a/.env.development +++ b/.env.development @@ -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 diff --git a/src/components/Map/location/LocationMap.vue b/src/components/Map/location/LocationMap.vue index eec4ba2..4d31b7e 100644 --- a/src/components/Map/location/LocationMap.vue +++ b/src/components/Map/location/LocationMap.vue @@ -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"){ diff --git a/src/views/statistics/index.vue b/src/views/statistics/index.vue index 573682e..4efb598 100644 --- a/src/views/statistics/index.vue +++ b/src/views/statistics/index.vue @@ -2,10 +2,26 @@
切换运营区 - - - + + +
+ {{ item.areaName }} + {{ item.deptName }} +
+ +
@@ -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%; diff --git a/src/views/system/area/areaSet.vue b/src/views/system/area/areaSet.vue index 29303ef..90730ae 100644 --- a/src/views/system/area/areaSet.vue +++ b/src/views/system/area/areaSet.vue @@ -1,387 +1,672 @@ diff --git a/src/views/system/device/index.vue b/src/views/system/device/index.vue index 5f37ef6..a65843f 100644 --- a/src/views/system/device/index.vue +++ b/src/views/system/device/index.vue @@ -523,7 +523,9 @@ :status="form.status" :online-status="form.onlineStatus" :device-sn="form.sn" + :areaId="form.areaId" /> + @@ -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;