diff --git a/src/components/map/index.vue b/src/components/map/index.vue index 63ffebe..d55cbf7 100644 --- a/src/components/map/index.vue +++ b/src/components/map/index.vue @@ -8,7 +8,7 @@ import infoDetail from './infoWindow.vue' import infoDetail2 from './infoWindow2.vue' import infoDetailHot from './infoWindowHot.vue' -import { branchList, electNodeList } from './mock.js' +import { branchList, electNodeList, guangfuList } from './mock.js' import { getDictByCode } from '@/api/system/dict' import { electricityBranch, electricityNode, getAreaPosition, getDeviceListPage, getElectricityListAll, getMonitorStationList } from '@/api/api/index' const publicPath = import.meta.env.BASE_URL @@ -140,61 +140,61 @@ map.value.add([marker]) } // // 光伏标记点及光伏绘制 - // for (let i = 0; i < markerArr1.value.length; i++) { - // const icon = new AMap.Icon({ - // size: new AMap.Size(36, 36), // 图标尺寸 - // image: `${publicPath}img/icon2.png`, // Icon的图像 - // imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片 - // imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量,适于雪碧图等 - // }) - // const marker = new AMap.Marker({ - // zooms: [16, 20], - // position: markerArr1.value[i], // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9] - // map: map.value, - // icon, - // offset: new AMap.Pixel(-20, -20), - // }) - // // 信息窗体 - // infoWindow2.value = new AMap.InfoWindow({ - // isCustom: true, // 自定义信息窗体 - // content: windowInfoRef2.value.$el, // 窗体内容(vue组件) - // offset: new AMap.Pixel(9, -5), // 偏移 - // }) - // marker.on('click', (e) => { - // // 打开信息窗口 - // infoWindow2.value.open(map.value, e.lnglat) - // // 初始化信息窗口 - // windowInfoRef2.value.initialize({ - // overlay: e.target, - // infoWindow: infoWindow2.value, - // info: markerArrInfo1.value[i], - // }) - // }) - // // 标记点的文本 - // marker.setLabel({ - // zooms: [16, 20], - // offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量 - // content: `
${markerArrInfo1.value[i].stationName}
`, // 设置文本标注内容 - // direction: 'right', // 设置文本标注方位 - // }) - // map.value.add([marker]) - // // 绘制电网和节点连线 - // const path = markerArrInfo1.value.map((item) => { - // return [[Number(item.lng), Number(item.lat)], [Number(item.nodeLng), Number(item.nodeLat)]] - // }) - // const polyline = new AMap.Polyline({ - // path, - // strokeColor: '#03A382', - // strokeStyle: 'dashed', - // strokeDasharray: [10, 3], - // lineJoin: 'round', - // lineCap: 'round', - // zIndex: 50, - // zooms: [16, 20], - // }) - // polyline.setMap(map.value) - // map.value.add(polyline) - // } + for (let i = 0; i < markerArr1.value.length; i++) { + const icon = new AMap.Icon({ + size: new AMap.Size(36, 36), // 图标尺寸 + image: `${publicPath}img/icon2.png`, // Icon的图像 + imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片 + imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量,适于雪碧图等 + }) + const marker = new AMap.Marker({ + zooms: [16, 20], + position: markerArr1.value[i], // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9] + map: map.value, + icon, + offset: new AMap.Pixel(-20, -20), + }) + // 信息窗体 + infoWindow2.value = new AMap.InfoWindow({ + isCustom: true, // 自定义信息窗体 + content: windowInfoRef2.value.$el, // 窗体内容(vue组件) + offset: new AMap.Pixel(9, -5), // 偏移 + }) + marker.on('click', (e) => { + // 打开信息窗口 + infoWindow2.value.open(map.value, e.lnglat) + // 初始化信息窗口 + windowInfoRef2.value.initialize({ + overlay: e.target, + infoWindow: infoWindow2.value, + info: markerArrInfo1.value[i], + }) + }) + // 标记点的文本 + marker.setLabel({ + zooms: [16, 20], + offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量 + content: `
${markerArrInfo1.value[i].stationName}
`, // 设置文本标注内容 + direction: 'right', // 设置文本标注方位 + }) + map.value.add([marker]) + // 绘制电网和节点连线 + const path = markerArrInfo1.value.map((item) => { + return [[Number(item.lng), Number(item.lat)], [Number(item.nodeLng), Number(item.nodeLat)]] + }) + const polyline = new AMap.Polyline({ + path, + strokeColor: '#03A382', + strokeStyle: 'dashed', + strokeDasharray: [10, 3], + lineJoin: 'round', + lineCap: 'round', + zIndex: 50, + zooms: [16, 20], + }) + polyline.setMap(map.value) + map.value.add(polyline) + } // 电网支路折线绘制 for (let i = 0; i < lineArr.value.length; i++) { const path = lineArr.value[i].branchNodeInfos @@ -363,9 +363,10 @@ // console.log(res1.data, '折线记点') } // 获取光伏列表 - // const list1 = await getMonitorStationList() - // markerArr1.value = list1.data.map(item => ([Number(item.lng), Number(item.lat)])) - // markerArrInfo1.value = list1.data + const list1 = guangfuList + // console.log(list1, '广福街店') + markerArr1.value = list1.map(item => ([Number(item.lng), Number(item.lat)])) + markerArrInfo1.value = list1 // 初始化地图 await initMap() useElectricity() diff --git a/src/components/map/index.vue b/src/components/map/index.vue index 63ffebe..d55cbf7 100644 --- a/src/components/map/index.vue +++ b/src/components/map/index.vue @@ -8,7 +8,7 @@ import infoDetail from './infoWindow.vue' import infoDetail2 from './infoWindow2.vue' import infoDetailHot from './infoWindowHot.vue' -import { branchList, electNodeList } from './mock.js' +import { branchList, electNodeList, guangfuList } from './mock.js' import { getDictByCode } from '@/api/system/dict' import { electricityBranch, electricityNode, getAreaPosition, getDeviceListPage, getElectricityListAll, getMonitorStationList } from '@/api/api/index' const publicPath = import.meta.env.BASE_URL @@ -140,61 +140,61 @@ map.value.add([marker]) } // // 光伏标记点及光伏绘制 - // for (let i = 0; i < markerArr1.value.length; i++) { - // const icon = new AMap.Icon({ - // size: new AMap.Size(36, 36), // 图标尺寸 - // image: `${publicPath}img/icon2.png`, // Icon的图像 - // imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片 - // imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量,适于雪碧图等 - // }) - // const marker = new AMap.Marker({ - // zooms: [16, 20], - // position: markerArr1.value[i], // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9] - // map: map.value, - // icon, - // offset: new AMap.Pixel(-20, -20), - // }) - // // 信息窗体 - // infoWindow2.value = new AMap.InfoWindow({ - // isCustom: true, // 自定义信息窗体 - // content: windowInfoRef2.value.$el, // 窗体内容(vue组件) - // offset: new AMap.Pixel(9, -5), // 偏移 - // }) - // marker.on('click', (e) => { - // // 打开信息窗口 - // infoWindow2.value.open(map.value, e.lnglat) - // // 初始化信息窗口 - // windowInfoRef2.value.initialize({ - // overlay: e.target, - // infoWindow: infoWindow2.value, - // info: markerArrInfo1.value[i], - // }) - // }) - // // 标记点的文本 - // marker.setLabel({ - // zooms: [16, 20], - // offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量 - // content: `
${markerArrInfo1.value[i].stationName}
`, // 设置文本标注内容 - // direction: 'right', // 设置文本标注方位 - // }) - // map.value.add([marker]) - // // 绘制电网和节点连线 - // const path = markerArrInfo1.value.map((item) => { - // return [[Number(item.lng), Number(item.lat)], [Number(item.nodeLng), Number(item.nodeLat)]] - // }) - // const polyline = new AMap.Polyline({ - // path, - // strokeColor: '#03A382', - // strokeStyle: 'dashed', - // strokeDasharray: [10, 3], - // lineJoin: 'round', - // lineCap: 'round', - // zIndex: 50, - // zooms: [16, 20], - // }) - // polyline.setMap(map.value) - // map.value.add(polyline) - // } + for (let i = 0; i < markerArr1.value.length; i++) { + const icon = new AMap.Icon({ + size: new AMap.Size(36, 36), // 图标尺寸 + image: `${publicPath}img/icon2.png`, // Icon的图像 + imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片 + imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量,适于雪碧图等 + }) + const marker = new AMap.Marker({ + zooms: [16, 20], + position: markerArr1.value[i], // 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9] + map: map.value, + icon, + offset: new AMap.Pixel(-20, -20), + }) + // 信息窗体 + infoWindow2.value = new AMap.InfoWindow({ + isCustom: true, // 自定义信息窗体 + content: windowInfoRef2.value.$el, // 窗体内容(vue组件) + offset: new AMap.Pixel(9, -5), // 偏移 + }) + marker.on('click', (e) => { + // 打开信息窗口 + infoWindow2.value.open(map.value, e.lnglat) + // 初始化信息窗口 + windowInfoRef2.value.initialize({ + overlay: e.target, + infoWindow: infoWindow2.value, + info: markerArrInfo1.value[i], + }) + }) + // 标记点的文本 + marker.setLabel({ + zooms: [16, 20], + offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量 + content: `
${markerArrInfo1.value[i].stationName}
`, // 设置文本标注内容 + direction: 'right', // 设置文本标注方位 + }) + map.value.add([marker]) + // 绘制电网和节点连线 + const path = markerArrInfo1.value.map((item) => { + return [[Number(item.lng), Number(item.lat)], [Number(item.nodeLng), Number(item.nodeLat)]] + }) + const polyline = new AMap.Polyline({ + path, + strokeColor: '#03A382', + strokeStyle: 'dashed', + strokeDasharray: [10, 3], + lineJoin: 'round', + lineCap: 'round', + zIndex: 50, + zooms: [16, 20], + }) + polyline.setMap(map.value) + map.value.add(polyline) + } // 电网支路折线绘制 for (let i = 0; i < lineArr.value.length; i++) { const path = lineArr.value[i].branchNodeInfos @@ -363,9 +363,10 @@ // console.log(res1.data, '折线记点') } // 获取光伏列表 - // const list1 = await getMonitorStationList() - // markerArr1.value = list1.data.map(item => ([Number(item.lng), Number(item.lat)])) - // markerArrInfo1.value = list1.data + const list1 = guangfuList + // console.log(list1, '广福街店') + markerArr1.value = list1.map(item => ([Number(item.lng), Number(item.lat)])) + markerArrInfo1.value = list1 // 初始化地图 await initMap() useElectricity() diff --git a/src/components/map/mock.js b/src/components/map/mock.js index 7a20077..9901876 100644 --- a/src/components/map/mock.js +++ b/src/components/map/mock.js @@ -121,8 +121,8 @@ flowRate: '0.00', gs: 0, id: '1', - lat: '40.831333', - lng: '111.729712', + lat: '40.831326', + lng: '111.729689', nodeName: 'B座公寓', pd: '0.00', qd: '0.00', @@ -175,8 +175,8 @@ flowRate: '0.00', gs: 0, id: '1', - lat: '40.831498', - lng: '111.73034', + lat: '40.831475', + lng: '111.730364', nodeName: 'C座公寓', pd: '0.00', qd: '0.00', @@ -202,8 +202,8 @@ flowRate: '0.00', gs: 0, id: '1', - lat: '40.830977', - lng: '111.73115', + lat: '40.831027', + lng: '111.731106', nodeName: '网络教室', pd: '0.00', qd: '0.00', @@ -439,7 +439,7 @@ [111.730077, 40.83078], [111.730552, 40.830891], [111.729815, 40.831051], - [111.729712, 40.831333], + [111.729689, 40.831326], ], branchNumber: '1号支路', }, @@ -447,14 +447,14 @@ branchNodeInfos: [ [111.729815, 40.831051], [111.730472, 40.831205], - [111.73034, 40.831498], + [111.730364, 40.831475], ], branchNumber: '2号支路', }, { branchNodeInfos: [ [111.730552, 40.830891], - [111.731122, 40.831045], + [111.731106, 40.831027], [111.731217, 40.830697], ], branchNumber: '3号支路', @@ -474,3 +474,185 @@ branchNumber: '4号支路', }, ] +export const guangfuList = [ + { + createTime: '2023-05-10', + deviceId: '2', + deviceNo: '', + deviceType: '', + deviceTypeName: '', + electricalVoltage: '', + id: '2', + installLocaltion: '', + lat: '40.830948', + lng: '111.730561', + mbase: '100.00', + nodeId: '9', + // nodeLat: '40.830858', + // nodeLng: '111.730585', + pg: '0.30', + pmax: '10.00', + pmin: '0.00', + power: '', + qg: '0.00', + qmax: '0.00', + qmin: '0.00', + stationName: '教学北楼光伏采集点', + stationType: 0, + status: 1, + strength: '0.00', + sttusName: '', + uploadTime: '2023-08-02', + vg: '1.00', + }, + { + createTime: '2023-05-10', + deviceId: '2', + deviceNo: '', + deviceType: '', + deviceTypeName: '', + electricalVoltage: '', + id: '2', + installLocaltion: '', + lat: '40.831377', + lng: '111.729912', + mbase: '100.00', + nodeId: '9', + // nodeLat: '40.830858', + // nodeLng: '111.730585', + pg: '0.30', + pmax: '10.00', + pmin: '0.00', + power: '', + qg: '0.00', + qmax: '0.00', + qmin: '0.00', + stationName: 'B座公寓光伏采集点', + stationType: 0, + status: 1, + strength: '0.00', + sttusName: '', + uploadTime: '2023-08-02', + vg: '1.00', + }, + { + createTime: '2023-05-10', + deviceId: '2', + deviceNo: '', + deviceType: '', + deviceTypeName: '', + electricalVoltage: '', + id: '2', + installLocaltion: '', + lat: '40.831528', + lng: '111.730581', + mbase: '100.00', + nodeId: '9', + // nodeLat: '40.830858', + // nodeLng: '111.730585', + pg: '0.30', + pmax: '10.00', + pmin: '0.00', + power: '', + qg: '0.00', + qmax: '0.00', + qmin: '0.00', + stationName: 'C座公寓光伏采集点', + stationType: 0, + status: 1, + strength: '0.00', + sttusName: '', + uploadTime: '2023-08-02', + vg: '1.00', + }, + { + createTime: '2023-05-10', + deviceId: '2', + deviceNo: '', + deviceType: '', + deviceTypeName: '', + electricalVoltage: '', + id: '2', + installLocaltion: '', + lat: '40.830178', + lng: '111.730829', + mbase: '100.00', + nodeId: '9', + // nodeLat: '40.830858', + // nodeLng: '111.730585', + pg: '0.30', + pmax: '10.00', + pmin: '0.00', + power: '', + qg: '0.00', + qmax: '0.00', + qmin: '0.00', + stationName: '教学南楼光伏采集点', + stationType: 0, + status: 1, + strength: '0.00', + sttusName: '', + uploadTime: '2023-08-02', + vg: '1.00', + }, + { + createTime: '2023-05-10', + deviceId: '2', + deviceNo: '', + deviceType: '', + deviceTypeName: '', + electricalVoltage: '', + id: '2', + installLocaltion: '', + lat: '40.829763', + lng: '111.730109', + mbase: '100.00', + nodeId: '9', + // nodeLat: '40.830858', + // nodeLng: '111.730585', + pg: '0.30', + pmax: '10.00', + pmin: '0.00', + power: '', + qg: '0.00', + qmax: '0.00', + qmin: '0.00', + stationName: 'A座公寓光伏采集点', + stationType: 0, + status: 1, + strength: '0.00', + sttusName: '', + uploadTime: '2023-08-02', + vg: '1.00', + }, + { + createTime: '2023-05-10', + deviceId: '2', + deviceNo: '', + deviceType: '', + deviceTypeName: '', + electricalVoltage: '', + id: '2', + installLocaltion: '', + lat: '40.829607', + lng: '111.730734', + mbase: '100.00', + nodeId: '9', + // nodeLat: '40.830858', + // nodeLng: '111.730585', + pg: '0.30', + pmax: '10.00', + pmin: '0.00', + power: '', + qg: '0.00', + qmax: '0.00', + qmin: '0.00', + stationName: '四号楼光伏采集点', + stationType: 0, + status: 1, + strength: '0.00', + sttusName: '', + uploadTime: '2023-08-02', + vg: '1.00', + }, +]