+
+
+
diff --git a/src/components/mapBak/infoWindow.vue b/src/components/mapBak/infoWindow.vue
new file mode 100644
index 0000000..7893e43
--- /dev/null
+++ b/src/components/mapBak/infoWindow.vue
@@ -0,0 +1,95 @@
+
+
+
+
+
+
diff --git a/src/components/mapBak/infoWindow2.vue b/src/components/mapBak/infoWindow2.vue
new file mode 100644
index 0000000..e4aca59
--- /dev/null
+++ b/src/components/mapBak/infoWindow2.vue
@@ -0,0 +1,88 @@
+
+
+
+
+
+
diff --git a/src/components.d.ts b/src/components.d.ts
index d4f61cb..f643af8 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -20,6 +20,7 @@
BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
BenchCol: typeof import('./components/benchCol/index.vue')['default']
ButtonBox: typeof import('./components/buttonBox/buttonBox.vue')['default']
+ copy: typeof import('./components/map copy/index.vue')['default']
Copyright: typeof import('./components/Copyright/index.vue')['default']
DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
DetailBlock: typeof import('./components/DetailPage/DetailBlock.vue')['default']
@@ -38,6 +39,7 @@
InfoWindowHot: typeof import('./components/map/infoWindowHot.vue')['default']
LineChart: typeof import('./components/Echart/LineChart.vue')['default']
Map: typeof import('./components/map/index.vue')['default']
+ MapBak: typeof import('./components/mapBak/index.vue')['default']
NormalTable: typeof import('./components/NormalTable/index.vue')['default']
PageHeader: typeof import('./components/PageHeader/index.vue')['default']
PageMain: typeof import('./components/PageMain/index.vue')['default']
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index cf07cce..63ffebe 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -8,6 +8,7 @@
import infoDetail from './infoWindow.vue'
import infoDetail2 from './infoWindow2.vue'
import infoDetailHot from './infoWindowHot.vue'
+import { branchList, electNodeList } 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
@@ -82,8 +83,8 @@
// 初始化地图
map.value = new AMap.Map('map', {
viewMode: '3D', // 是否为3D地图模式
- zoom: 17, // 初始化地图级别
- center: [111.765785, 40.718114],
+ zoom: 18, // 初始化地图级别
+ center: [111.73142, 40.830627],
resizeEnable: true,
})
// 图层实例
@@ -112,7 +113,7 @@
position: markerArr.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
map: map.value,
icon,
- offset: new AMap.Pixel(3, -30),
+ offset: new AMap.Pixel(0, -20),
})
// 支路点详细信息// 信息窗体
infoWindow.value = new AMap.InfoWindow({
@@ -138,55 +139,76 @@
})
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: `
`, // 设置文本标注内容
- 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({
+ // // 光伏标记点及光伏绘制
+ // 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: `
`, // 设置文本标注内容
+ // 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
+ var polyline = new AMap.Polyline({
path,
- strokeColor: '#03A382',
- strokeStyle: 'dashed',
+ isOutline: true,
+ strokeColor: '#008d68',
+ // strokeOpacity: 1,
+ strokeWeight: 3,
+ // 折线样式还支持 'dashed'
+ // strokeStyle是dashed时有效
strokeDasharray: [10, 3],
lineJoin: 'round',
+ // lineCap: 'square',
lineCap: 'round',
zIndex: 50,
zooms: [16, 20],
@@ -194,90 +216,89 @@
polyline.setMap(map.value)
map.value.add(polyline)
}
- // 电网支路折线绘制
- for (let i = 0; i < lineArr.value.length; i++) {
- // console.log(lineArr.value[i])
- const path = lineArr.value.map(item => item.branchNodeInfos)
- const line = path.map(item => (
- item.map((child) => {
- return ([[child.flng, child.flat], [child.tlng, child.tlat], child.status2])
- })
- ))
- line.forEach((item) => {
- item.forEach((child) => {
- const path = [child[0], child[1]]
- const polyline = new AMap.Polyline({
- path,
- // isOutline: true,
- strokeColor: child[2] === 1 ? '#008d68' : '#000',
- // strokeOpacity: 1,
- strokeWeight: 3,
- // 折线样式还支持 'dashed'
- strokeStyle: child[2] !== 1 ? 'dashed' : 'dashed ',
- // strokeStyle是dashed时有效
- strokeDasharray: [10, 3],
- lineJoin: 'round',
- showDir: child[2] === 1,
- // lineCap: 'square',
- lineCap: 'round',
- zIndex: 50,
- zooms: [16, 20],
+ // for (let i = 0; i < lineArr.value.length; i++) {
+ // // console.log(lineArr.value[i])
+ // const path = lineArr.value.map(item => item.branchNodeInfos)
+ // const line = path.map(item => (
+ // item.map((child) => {
+ // return ([[child.flng, child.flat], [child.tlng, child.tlat], child.status2])
+ // })
+ // ))
+ // line.forEach((item) => {
+ // item.forEach((child) => {
+ // const path = [child[0], child[1]]
+ // const polyline = new AMap.Polyline({
+ // path,
+ // // isOutline: true,
+ // strokeColor: child[2] === 1 ? '#008d68' : '#000',
+ // // strokeOpacity: 1,
+ // strokeWeight: 3,
+ // // 折线样式还支持 'dashed'
+ // strokeStyle: child[2] !== 1 ? 'dashed' : 'dashed ',
+ // // strokeStyle是dashed时有效
+ // strokeDasharray: [10, 3],
+ // lineJoin: 'round',
+ // showDir: child[2] === 1,
+ // // lineCap: 'square',
+ // lineCap: 'round',
+ // zIndex: 50,
+ // zooms: [16, 20],
- })
- // 离线支路连接添加开关图标
- if (child[2] === 0) {
- const data = [(Number(child[0][0]) + Number(child[1][0])) / 2, (Number(child[0][1]) + Number(child[1][1])) / 2]
- const icon = new AMap.Icon({
- size: new AMap.Size(36, 36), // 图标尺寸
- image: `${publicPath}img/icon3.png`, // Icon的图像
- imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
- imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
- })
- const marker = new AMap.Marker({
- zooms: [16, 20],
- position: data, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
- map: map.value,
- icon,
- offset: new AMap.Pixel(-20, -20),
- })
- map.value.add([marker])
- }
- polyline.setMap(map.value)
- map.value.add(polyline)
- })
- })
- // 添加支路折线文本
- // 创建纯文本标记
- // const textArr = path.map(item => (
- // item.map((child) => {
- // return ([[(Number(child.flng) + Number(child.tlng)) / 2, (Number(child.flat) + Number(child.tlat)) / 2], child.flowRate])
- // })
- // ))
- // textArr.forEach((item) => {
- // // console.log(item, 'item')
- // item.forEach((child) => {
- // const icon = new AMap.Icon({
- // size: new AMap.Size(36, 36), // 图标尺寸
- // // image: '', // Icon的图像
- // imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
- // imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
- // })
- // // const content = '
'
- // const marker = new AMap.Marker({
- // position: child[0], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
- // map: map.value,
- // content: '
',
- // offset: new AMap.Pixel(-20, -20),
- // })
- // marker.setLabel({
- // offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
- // content: `
`, // 设置文本标注内容
- // direction: 'right', // 设置文本标注方位
- // })
- // map.value.add([marker])
- // })
- // })
- }
+ // })
+ // // 离线支路连接添加开关图标
+ // if (child[2] === 0) {
+ // const data = [(Number(child[0][0]) + Number(child[1][0])) / 2, (Number(child[0][1]) + Number(child[1][1])) / 2]
+ // const icon = new AMap.Icon({
+ // size: new AMap.Size(36, 36), // 图标尺寸
+ // image: `${publicPath}img/icon3.png`, // Icon的图像
+ // imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+ // imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+ // })
+ // const marker = new AMap.Marker({
+ // zooms: [16, 20],
+ // position: data, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+ // map: map.value,
+ // icon,
+ // offset: new AMap.Pixel(-20, -20),
+ // })
+ // map.value.add([marker])
+ // }
+ // polyline.setMap(map.value)
+ // map.value.add(polyline)
+ // })
+ // })
+ // 添加支路折线文本
+ // 创建纯文本标记
+ // const textArr = path.map(item => (
+ // item.map((child) => {
+ // return ([[(Number(child.flng) + Number(child.tlng)) / 2, (Number(child.flat) + Number(child.tlat)) / 2], child.flowRate])
+ // })
+ // ))
+ // textArr.forEach((item) => {
+ // // console.log(item, 'item')
+ // item.forEach((child) => {
+ // const icon = new AMap.Icon({
+ // size: new AMap.Size(36, 36), // 图标尺寸
+ // // image: '', // Icon的图像
+ // imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+ // imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+ // })
+ // // const content = '
'
+ // const marker = new AMap.Marker({
+ // position: child[0], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+ // map: map.value,
+ // content: '
',
+ // offset: new AMap.Pixel(-20, -20),
+ // })
+ // marker.setLabel({
+ // offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
+ // content: `
`, // 设置文本标注内容
+ // direction: 'right', // 设置文本标注方位
+ // })
+ // map.value.add([marker])
+ // })
+ // })
+ // }
}
// 绘制用热监测相关
const useHot = () => {
@@ -326,20 +347,25 @@
try {
const list = await getElectricityListAll()
// 电网列表
+ console.log(list.data, '电网列表')
electricityList.value = list.data
// 查询节点列表(标记点)
if (electricityList.value.length) {
const res = await electricityNode(electricityList.value[0].id)
- markerArr.value = res.data.map(item => ([Number(item.lng), Number(item.lat)]))
- markerArrInfo.value = res.data
+ // markerArr.value = res.data.map(item => ([Number(item.lng), Number(item.lat)]))
+ // markerArrInfo.value = res.data
+ markerArr.value = electNodeList.map(item => ([Number(item.lng), Number(item.lat)]))
+ markerArrInfo.value = electNodeList
+ console.log(res.data, '电网标记点')
// 获取支路信息(折线)
- const res1 = await electricityBranch(electricityList.value[0].id)
- lineArr.value = res1.data
+ // const res1 = await electricityBranch(electricityList.value[0].id)
+ lineArr.value = branchList
+ // 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 = await getMonitorStationList()
+ // markerArr1.value = list1.data.map(item => ([Number(item.lng), Number(item.lat)]))
+ // markerArrInfo1.value = list1.data
// 初始化地图
await initMap()
useElectricity()
@@ -454,13 +480,13 @@
+
+
+
diff --git a/src/components/mapBak/infoWindow.vue b/src/components/mapBak/infoWindow.vue
new file mode 100644
index 0000000..7893e43
--- /dev/null
+++ b/src/components/mapBak/infoWindow.vue
@@ -0,0 +1,95 @@
+
+
+
+
+
+
+
+ {{ info?.nodeName }}
+
+
+ x
+
+
+
+ 节点编号 : {{ info?.busId }}
+
+
+ 负荷有功功率 : {{ info?.pd }} MW 负荷无功功率 : {{ info?.qd }} MW
+
+
+ 节点碳势 : {{ info?.en }} gCO2/kWh 节点负荷碳流率 : {{ info?.flowRate }} kgCO2/h
+
+
+ 采集时间 : {{ info?.colTime }}
+
+
+
+
+
+
diff --git a/src/components/mapBak/infoWindow2.vue b/src/components/mapBak/infoWindow2.vue
new file mode 100644
index 0000000..e4aca59
--- /dev/null
+++ b/src/components/mapBak/infoWindow2.vue
@@ -0,0 +1,88 @@
+
+
+
+
+
+
+
+ {{ info?.stationName }}
+
+
+ x
+
+
+
+ 光伏挂载节点 : {{ info?.nodeId }}
+
+
+ 发电机组有功 : {{ info?.pg }} MW 发电机组无功 : {{ info?.qg }} MW
+
+
+ 碳排强度 : {{ info?.strength }} gCO2·/kWh
+
+
+
+
+
diff --git a/src/components/mapBak/infoWindowHot.vue b/src/components/mapBak/infoWindowHot.vue
new file mode 100644
index 0000000..9b69483
--- /dev/null
+++ b/src/components/mapBak/infoWindowHot.vue
@@ -0,0 +1,94 @@
+
+
+
+
+
+
+
+ {{ info?.deviceName }}
+
+
+ x
+
+
+
+ 设备编号 : {{ info?.deviceNo }} 设备类型 : {{ info?.deviceTypeName }}
+
+
+ 所属分区 : {{ info?.ptnName }} 监测对象 : {{ info?.monitorObjName }}
+
+
+ 监测值 : {{ info?.monitorVal }} 监测单位 : {{ info?.monitorUnit }}
+
+
+ 碳势 : {{ info?.en }} gCO2/KJ 采集时间 : {{ info?.uploadTime }}
+
+
+ 安装位置 : {{ info?.installLocaltion }} 安装时间 : {{ info?.installTime }}
+
+
+
+
+
diff --git a/src/components.d.ts b/src/components.d.ts
index d4f61cb..f643af8 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -20,6 +20,7 @@
BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
BenchCol: typeof import('./components/benchCol/index.vue')['default']
ButtonBox: typeof import('./components/buttonBox/buttonBox.vue')['default']
+ copy: typeof import('./components/map copy/index.vue')['default']
Copyright: typeof import('./components/Copyright/index.vue')['default']
DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
DetailBlock: typeof import('./components/DetailPage/DetailBlock.vue')['default']
@@ -38,6 +39,7 @@
InfoWindowHot: typeof import('./components/map/infoWindowHot.vue')['default']
LineChart: typeof import('./components/Echart/LineChart.vue')['default']
Map: typeof import('./components/map/index.vue')['default']
+ MapBak: typeof import('./components/mapBak/index.vue')['default']
NormalTable: typeof import('./components/NormalTable/index.vue')['default']
PageHeader: typeof import('./components/PageHeader/index.vue')['default']
PageMain: typeof import('./components/PageMain/index.vue')['default']
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index cf07cce..63ffebe 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -8,6 +8,7 @@
import infoDetail from './infoWindow.vue'
import infoDetail2 from './infoWindow2.vue'
import infoDetailHot from './infoWindowHot.vue'
+import { branchList, electNodeList } 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
@@ -82,8 +83,8 @@
// 初始化地图
map.value = new AMap.Map('map', {
viewMode: '3D', // 是否为3D地图模式
- zoom: 17, // 初始化地图级别
- center: [111.765785, 40.718114],
+ zoom: 18, // 初始化地图级别
+ center: [111.73142, 40.830627],
resizeEnable: true,
})
// 图层实例
@@ -112,7 +113,7 @@
position: markerArr.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
map: map.value,
icon,
- offset: new AMap.Pixel(3, -30),
+ offset: new AMap.Pixel(0, -20),
})
// 支路点详细信息// 信息窗体
infoWindow.value = new AMap.InfoWindow({
@@ -138,55 +139,76 @@
})
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({
+ // // 光伏标记点及光伏绘制
+ // 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
+ var polyline = new AMap.Polyline({
path,
- strokeColor: '#03A382',
- strokeStyle: 'dashed',
+ isOutline: true,
+ strokeColor: '#008d68',
+ // strokeOpacity: 1,
+ strokeWeight: 3,
+ // 折线样式还支持 'dashed'
+ // strokeStyle是dashed时有效
strokeDasharray: [10, 3],
lineJoin: 'round',
+ // lineCap: 'square',
lineCap: 'round',
zIndex: 50,
zooms: [16, 20],
@@ -194,90 +216,89 @@
polyline.setMap(map.value)
map.value.add(polyline)
}
- // 电网支路折线绘制
- for (let i = 0; i < lineArr.value.length; i++) {
- // console.log(lineArr.value[i])
- const path = lineArr.value.map(item => item.branchNodeInfos)
- const line = path.map(item => (
- item.map((child) => {
- return ([[child.flng, child.flat], [child.tlng, child.tlat], child.status2])
- })
- ))
- line.forEach((item) => {
- item.forEach((child) => {
- const path = [child[0], child[1]]
- const polyline = new AMap.Polyline({
- path,
- // isOutline: true,
- strokeColor: child[2] === 1 ? '#008d68' : '#000',
- // strokeOpacity: 1,
- strokeWeight: 3,
- // 折线样式还支持 'dashed'
- strokeStyle: child[2] !== 1 ? 'dashed' : 'dashed ',
- // strokeStyle是dashed时有效
- strokeDasharray: [10, 3],
- lineJoin: 'round',
- showDir: child[2] === 1,
- // lineCap: 'square',
- lineCap: 'round',
- zIndex: 50,
- zooms: [16, 20],
+ // for (let i = 0; i < lineArr.value.length; i++) {
+ // // console.log(lineArr.value[i])
+ // const path = lineArr.value.map(item => item.branchNodeInfos)
+ // const line = path.map(item => (
+ // item.map((child) => {
+ // return ([[child.flng, child.flat], [child.tlng, child.tlat], child.status2])
+ // })
+ // ))
+ // line.forEach((item) => {
+ // item.forEach((child) => {
+ // const path = [child[0], child[1]]
+ // const polyline = new AMap.Polyline({
+ // path,
+ // // isOutline: true,
+ // strokeColor: child[2] === 1 ? '#008d68' : '#000',
+ // // strokeOpacity: 1,
+ // strokeWeight: 3,
+ // // 折线样式还支持 'dashed'
+ // strokeStyle: child[2] !== 1 ? 'dashed' : 'dashed ',
+ // // strokeStyle是dashed时有效
+ // strokeDasharray: [10, 3],
+ // lineJoin: 'round',
+ // showDir: child[2] === 1,
+ // // lineCap: 'square',
+ // lineCap: 'round',
+ // zIndex: 50,
+ // zooms: [16, 20],
- })
- // 离线支路连接添加开关图标
- if (child[2] === 0) {
- const data = [(Number(child[0][0]) + Number(child[1][0])) / 2, (Number(child[0][1]) + Number(child[1][1])) / 2]
- const icon = new AMap.Icon({
- size: new AMap.Size(36, 36), // 图标尺寸
- image: `${publicPath}img/icon3.png`, // Icon的图像
- imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
- imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
- })
- const marker = new AMap.Marker({
- zooms: [16, 20],
- position: data, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
- map: map.value,
- icon,
- offset: new AMap.Pixel(-20, -20),
- })
- map.value.add([marker])
- }
- polyline.setMap(map.value)
- map.value.add(polyline)
- })
- })
- // 添加支路折线文本
- // 创建纯文本标记
- // const textArr = path.map(item => (
- // item.map((child) => {
- // return ([[(Number(child.flng) + Number(child.tlng)) / 2, (Number(child.flat) + Number(child.tlat)) / 2], child.flowRate])
- // })
- // ))
- // textArr.forEach((item) => {
- // // console.log(item, 'item')
- // item.forEach((child) => {
- // const icon = new AMap.Icon({
- // size: new AMap.Size(36, 36), // 图标尺寸
- // // image: '', // Icon的图像
- // imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
- // imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
- // })
- // // const content = '
111
'
- // const marker = new AMap.Marker({
- // position: child[0], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
- // map: map.value,
- // content: '
',
- // offset: new AMap.Pixel(-20, -20),
- // })
- // marker.setLabel({
- // offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
- // content: `
${`${child[1]}kgCO2/h`}
`, // 设置文本标注内容
- // direction: 'right', // 设置文本标注方位
- // })
- // map.value.add([marker])
- // })
- // })
- }
+ // })
+ // // 离线支路连接添加开关图标
+ // if (child[2] === 0) {
+ // const data = [(Number(child[0][0]) + Number(child[1][0])) / 2, (Number(child[0][1]) + Number(child[1][1])) / 2]
+ // const icon = new AMap.Icon({
+ // size: new AMap.Size(36, 36), // 图标尺寸
+ // image: `${publicPath}img/icon3.png`, // Icon的图像
+ // imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+ // imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+ // })
+ // const marker = new AMap.Marker({
+ // zooms: [16, 20],
+ // position: data, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+ // map: map.value,
+ // icon,
+ // offset: new AMap.Pixel(-20, -20),
+ // })
+ // map.value.add([marker])
+ // }
+ // polyline.setMap(map.value)
+ // map.value.add(polyline)
+ // })
+ // })
+ // 添加支路折线文本
+ // 创建纯文本标记
+ // const textArr = path.map(item => (
+ // item.map((child) => {
+ // return ([[(Number(child.flng) + Number(child.tlng)) / 2, (Number(child.flat) + Number(child.tlat)) / 2], child.flowRate])
+ // })
+ // ))
+ // textArr.forEach((item) => {
+ // // console.log(item, 'item')
+ // item.forEach((child) => {
+ // const icon = new AMap.Icon({
+ // size: new AMap.Size(36, 36), // 图标尺寸
+ // // image: '', // Icon的图像
+ // imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+ // imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+ // })
+ // // const content = '
111
'
+ // const marker = new AMap.Marker({
+ // position: child[0], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+ // map: map.value,
+ // content: '
',
+ // offset: new AMap.Pixel(-20, -20),
+ // })
+ // marker.setLabel({
+ // offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
+ // content: `
${`${child[1]}kgCO2/h`}
`, // 设置文本标注内容
+ // direction: 'right', // 设置文本标注方位
+ // })
+ // map.value.add([marker])
+ // })
+ // })
+ // }
}
// 绘制用热监测相关
const useHot = () => {
@@ -326,20 +347,25 @@
try {
const list = await getElectricityListAll()
// 电网列表
+ console.log(list.data, '电网列表')
electricityList.value = list.data
// 查询节点列表(标记点)
if (electricityList.value.length) {
const res = await electricityNode(electricityList.value[0].id)
- markerArr.value = res.data.map(item => ([Number(item.lng), Number(item.lat)]))
- markerArrInfo.value = res.data
+ // markerArr.value = res.data.map(item => ([Number(item.lng), Number(item.lat)]))
+ // markerArrInfo.value = res.data
+ markerArr.value = electNodeList.map(item => ([Number(item.lng), Number(item.lat)]))
+ markerArrInfo.value = electNodeList
+ console.log(res.data, '电网标记点')
// 获取支路信息(折线)
- const res1 = await electricityBranch(electricityList.value[0].id)
- lineArr.value = res1.data
+ // const res1 = await electricityBranch(electricityList.value[0].id)
+ lineArr.value = branchList
+ // 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 = await getMonitorStationList()
+ // markerArr1.value = list1.data.map(item => ([Number(item.lng), Number(item.lat)]))
+ // markerArrInfo1.value = list1.data
// 初始化地图
await initMap()
useElectricity()
@@ -454,13 +480,13 @@
-
+
+
+
diff --git a/src/components/mapBak/infoWindow.vue b/src/components/mapBak/infoWindow.vue
new file mode 100644
index 0000000..7893e43
--- /dev/null
+++ b/src/components/mapBak/infoWindow.vue
@@ -0,0 +1,95 @@
+
+
+
+
+
+
+
+ {{ info?.nodeName }}
+
+
+ x
+
+
+
+ 节点编号 : {{ info?.busId }}
+
+
+ 负荷有功功率 : {{ info?.pd }} MW 负荷无功功率 : {{ info?.qd }} MW
+
+
+ 节点碳势 : {{ info?.en }} gCO2/kWh 节点负荷碳流率 : {{ info?.flowRate }} kgCO2/h
+
+
+ 采集时间 : {{ info?.colTime }}
+
+
+
+
+
+
diff --git a/src/components/mapBak/infoWindow2.vue b/src/components/mapBak/infoWindow2.vue
new file mode 100644
index 0000000..e4aca59
--- /dev/null
+++ b/src/components/mapBak/infoWindow2.vue
@@ -0,0 +1,88 @@
+
+
+
+
+
+
+
+ {{ info?.stationName }}
+
+
+ x
+
+
+
+ 光伏挂载节点 : {{ info?.nodeId }}
+
+
+ 发电机组有功 : {{ info?.pg }} MW 发电机组无功 : {{ info?.qg }} MW
+
+
+ 碳排强度 : {{ info?.strength }} gCO2·/kWh
+
+
+
+
+
diff --git a/src/components/mapBak/infoWindowHot.vue b/src/components/mapBak/infoWindowHot.vue
new file mode 100644
index 0000000..9b69483
--- /dev/null
+++ b/src/components/mapBak/infoWindowHot.vue
@@ -0,0 +1,94 @@
+
+
+
+
+
+
+
+ {{ info?.deviceName }}
+
+
+ x
+
+
+
+ 设备编号 : {{ info?.deviceNo }} 设备类型 : {{ info?.deviceTypeName }}
+
+
+ 所属分区 : {{ info?.ptnName }} 监测对象 : {{ info?.monitorObjName }}
+
+
+ 监测值 : {{ info?.monitorVal }} 监测单位 : {{ info?.monitorUnit }}
+
+
+ 碳势 : {{ info?.en }} gCO2/KJ 采集时间 : {{ info?.uploadTime }}
+
+
+ 安装位置 : {{ info?.installLocaltion }} 安装时间 : {{ info?.installTime }}
+
+
+
+
+
diff --git a/src/components/mapBak/trendChart.vue b/src/components/mapBak/trendChart.vue
new file mode 100644
index 0000000..5fbdd3d
--- /dev/null
+++ b/src/components/mapBak/trendChart.vue
@@ -0,0 +1,163 @@
+
+
+
+
+
+
+
+
+
+ 日
+
+
+ 月
+
+
+ 年
+
+
+
+
+
+
+
diff --git a/src/components.d.ts b/src/components.d.ts
index d4f61cb..f643af8 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -20,6 +20,7 @@
BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
BenchCol: typeof import('./components/benchCol/index.vue')['default']
ButtonBox: typeof import('./components/buttonBox/buttonBox.vue')['default']
+ copy: typeof import('./components/map copy/index.vue')['default']
Copyright: typeof import('./components/Copyright/index.vue')['default']
DeptSelect: typeof import('./components/DeptSelect/index.vue')['default']
DetailBlock: typeof import('./components/DetailPage/DetailBlock.vue')['default']
@@ -38,6 +39,7 @@
InfoWindowHot: typeof import('./components/map/infoWindowHot.vue')['default']
LineChart: typeof import('./components/Echart/LineChart.vue')['default']
Map: typeof import('./components/map/index.vue')['default']
+ MapBak: typeof import('./components/mapBak/index.vue')['default']
NormalTable: typeof import('./components/NormalTable/index.vue')['default']
PageHeader: typeof import('./components/PageHeader/index.vue')['default']
PageMain: typeof import('./components/PageMain/index.vue')['default']
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index cf07cce..63ffebe 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -8,6 +8,7 @@
import infoDetail from './infoWindow.vue'
import infoDetail2 from './infoWindow2.vue'
import infoDetailHot from './infoWindowHot.vue'
+import { branchList, electNodeList } 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
@@ -82,8 +83,8 @@
// 初始化地图
map.value = new AMap.Map('map', {
viewMode: '3D', // 是否为3D地图模式
- zoom: 17, // 初始化地图级别
- center: [111.765785, 40.718114],
+ zoom: 18, // 初始化地图级别
+ center: [111.73142, 40.830627],
resizeEnable: true,
})
// 图层实例
@@ -112,7 +113,7 @@
position: markerArr.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
map: map.value,
icon,
- offset: new AMap.Pixel(3, -30),
+ offset: new AMap.Pixel(0, -20),
})
// 支路点详细信息// 信息窗体
infoWindow.value = new AMap.InfoWindow({
@@ -138,55 +139,76 @@
})
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({
+ // // 光伏标记点及光伏绘制
+ // 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
+ var polyline = new AMap.Polyline({
path,
- strokeColor: '#03A382',
- strokeStyle: 'dashed',
+ isOutline: true,
+ strokeColor: '#008d68',
+ // strokeOpacity: 1,
+ strokeWeight: 3,
+ // 折线样式还支持 'dashed'
+ // strokeStyle是dashed时有效
strokeDasharray: [10, 3],
lineJoin: 'round',
+ // lineCap: 'square',
lineCap: 'round',
zIndex: 50,
zooms: [16, 20],
@@ -194,90 +216,89 @@
polyline.setMap(map.value)
map.value.add(polyline)
}
- // 电网支路折线绘制
- for (let i = 0; i < lineArr.value.length; i++) {
- // console.log(lineArr.value[i])
- const path = lineArr.value.map(item => item.branchNodeInfos)
- const line = path.map(item => (
- item.map((child) => {
- return ([[child.flng, child.flat], [child.tlng, child.tlat], child.status2])
- })
- ))
- line.forEach((item) => {
- item.forEach((child) => {
- const path = [child[0], child[1]]
- const polyline = new AMap.Polyline({
- path,
- // isOutline: true,
- strokeColor: child[2] === 1 ? '#008d68' : '#000',
- // strokeOpacity: 1,
- strokeWeight: 3,
- // 折线样式还支持 'dashed'
- strokeStyle: child[2] !== 1 ? 'dashed' : 'dashed ',
- // strokeStyle是dashed时有效
- strokeDasharray: [10, 3],
- lineJoin: 'round',
- showDir: child[2] === 1,
- // lineCap: 'square',
- lineCap: 'round',
- zIndex: 50,
- zooms: [16, 20],
+ // for (let i = 0; i < lineArr.value.length; i++) {
+ // // console.log(lineArr.value[i])
+ // const path = lineArr.value.map(item => item.branchNodeInfos)
+ // const line = path.map(item => (
+ // item.map((child) => {
+ // return ([[child.flng, child.flat], [child.tlng, child.tlat], child.status2])
+ // })
+ // ))
+ // line.forEach((item) => {
+ // item.forEach((child) => {
+ // const path = [child[0], child[1]]
+ // const polyline = new AMap.Polyline({
+ // path,
+ // // isOutline: true,
+ // strokeColor: child[2] === 1 ? '#008d68' : '#000',
+ // // strokeOpacity: 1,
+ // strokeWeight: 3,
+ // // 折线样式还支持 'dashed'
+ // strokeStyle: child[2] !== 1 ? 'dashed' : 'dashed ',
+ // // strokeStyle是dashed时有效
+ // strokeDasharray: [10, 3],
+ // lineJoin: 'round',
+ // showDir: child[2] === 1,
+ // // lineCap: 'square',
+ // lineCap: 'round',
+ // zIndex: 50,
+ // zooms: [16, 20],
- })
- // 离线支路连接添加开关图标
- if (child[2] === 0) {
- const data = [(Number(child[0][0]) + Number(child[1][0])) / 2, (Number(child[0][1]) + Number(child[1][1])) / 2]
- const icon = new AMap.Icon({
- size: new AMap.Size(36, 36), // 图标尺寸
- image: `${publicPath}img/icon3.png`, // Icon的图像
- imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
- imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
- })
- const marker = new AMap.Marker({
- zooms: [16, 20],
- position: data, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
- map: map.value,
- icon,
- offset: new AMap.Pixel(-20, -20),
- })
- map.value.add([marker])
- }
- polyline.setMap(map.value)
- map.value.add(polyline)
- })
- })
- // 添加支路折线文本
- // 创建纯文本标记
- // const textArr = path.map(item => (
- // item.map((child) => {
- // return ([[(Number(child.flng) + Number(child.tlng)) / 2, (Number(child.flat) + Number(child.tlat)) / 2], child.flowRate])
- // })
- // ))
- // textArr.forEach((item) => {
- // // console.log(item, 'item')
- // item.forEach((child) => {
- // const icon = new AMap.Icon({
- // size: new AMap.Size(36, 36), // 图标尺寸
- // // image: '', // Icon的图像
- // imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
- // imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
- // })
- // // const content = '
111
'
- // const marker = new AMap.Marker({
- // position: child[0], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
- // map: map.value,
- // content: '
',
- // offset: new AMap.Pixel(-20, -20),
- // })
- // marker.setLabel({
- // offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
- // content: `
${`${child[1]}kgCO2/h`}
`, // 设置文本标注内容
- // direction: 'right', // 设置文本标注方位
- // })
- // map.value.add([marker])
- // })
- // })
- }
+ // })
+ // // 离线支路连接添加开关图标
+ // if (child[2] === 0) {
+ // const data = [(Number(child[0][0]) + Number(child[1][0])) / 2, (Number(child[0][1]) + Number(child[1][1])) / 2]
+ // const icon = new AMap.Icon({
+ // size: new AMap.Size(36, 36), // 图标尺寸
+ // image: `${publicPath}img/icon3.png`, // Icon的图像
+ // imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+ // imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+ // })
+ // const marker = new AMap.Marker({
+ // zooms: [16, 20],
+ // position: data, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+ // map: map.value,
+ // icon,
+ // offset: new AMap.Pixel(-20, -20),
+ // })
+ // map.value.add([marker])
+ // }
+ // polyline.setMap(map.value)
+ // map.value.add(polyline)
+ // })
+ // })
+ // 添加支路折线文本
+ // 创建纯文本标记
+ // const textArr = path.map(item => (
+ // item.map((child) => {
+ // return ([[(Number(child.flng) + Number(child.tlng)) / 2, (Number(child.flat) + Number(child.tlat)) / 2], child.flowRate])
+ // })
+ // ))
+ // textArr.forEach((item) => {
+ // // console.log(item, 'item')
+ // item.forEach((child) => {
+ // const icon = new AMap.Icon({
+ // size: new AMap.Size(36, 36), // 图标尺寸
+ // // image: '', // Icon的图像
+ // imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+ // imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+ // })
+ // // const content = '
111
'
+ // const marker = new AMap.Marker({
+ // position: child[0], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+ // map: map.value,
+ // content: '
',
+ // offset: new AMap.Pixel(-20, -20),
+ // })
+ // marker.setLabel({
+ // offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
+ // content: `
${`${child[1]}kgCO2/h`}
`, // 设置文本标注内容
+ // direction: 'right', // 设置文本标注方位
+ // })
+ // map.value.add([marker])
+ // })
+ // })
+ // }
}
// 绘制用热监测相关
const useHot = () => {
@@ -326,20 +347,25 @@
try {
const list = await getElectricityListAll()
// 电网列表
+ console.log(list.data, '电网列表')
electricityList.value = list.data
// 查询节点列表(标记点)
if (electricityList.value.length) {
const res = await electricityNode(electricityList.value[0].id)
- markerArr.value = res.data.map(item => ([Number(item.lng), Number(item.lat)]))
- markerArrInfo.value = res.data
+ // markerArr.value = res.data.map(item => ([Number(item.lng), Number(item.lat)]))
+ // markerArrInfo.value = res.data
+ markerArr.value = electNodeList.map(item => ([Number(item.lng), Number(item.lat)]))
+ markerArrInfo.value = electNodeList
+ console.log(res.data, '电网标记点')
// 获取支路信息(折线)
- const res1 = await electricityBranch(electricityList.value[0].id)
- lineArr.value = res1.data
+ // const res1 = await electricityBranch(electricityList.value[0].id)
+ lineArr.value = branchList
+ // 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 = await getMonitorStationList()
+ // markerArr1.value = list1.data.map(item => ([Number(item.lng), Number(item.lat)]))
+ // markerArrInfo1.value = list1.data
// 初始化地图
await initMap()
useElectricity()
@@ -454,13 +480,13 @@
-
+
+
+
diff --git a/src/components/mapBak/infoWindow.vue b/src/components/mapBak/infoWindow.vue
new file mode 100644
index 0000000..7893e43
--- /dev/null
+++ b/src/components/mapBak/infoWindow.vue
@@ -0,0 +1,95 @@
+
+
+
+
+
+
+
+ {{ info?.nodeName }}
+
+
+ x
+
+
+
+ 节点编号 : {{ info?.busId }}
+
+
+ 负荷有功功率 : {{ info?.pd }} MW 负荷无功功率 : {{ info?.qd }} MW
+
+
+ 节点碳势 : {{ info?.en }} gCO2/kWh 节点负荷碳流率 : {{ info?.flowRate }} kgCO2/h
+
+
+ 采集时间 : {{ info?.colTime }}
+
+
+
+
+
+
diff --git a/src/components/mapBak/infoWindow2.vue b/src/components/mapBak/infoWindow2.vue
new file mode 100644
index 0000000..e4aca59
--- /dev/null
+++ b/src/components/mapBak/infoWindow2.vue
@@ -0,0 +1,88 @@
+
+
+
+
+
+
+
+ {{ info?.stationName }}
+
+
+ x
+
+
+
+ 光伏挂载节点 : {{ info?.nodeId }}
+
+
+ 发电机组有功 : {{ info?.pg }} MW 发电机组无功 : {{ info?.qg }} MW
+
+
+ 碳排强度 : {{ info?.strength }} gCO2·/kWh
+
+
+
+
+
diff --git a/src/components/mapBak/infoWindowHot.vue b/src/components/mapBak/infoWindowHot.vue
new file mode 100644
index 0000000..9b69483
--- /dev/null
+++ b/src/components/mapBak/infoWindowHot.vue
@@ -0,0 +1,94 @@
+
+
+
+
+
+
+
+ {{ info?.deviceName }}
+
+
+ x
+
+
+
+ 设备编号 : {{ info?.deviceNo }} 设备类型 : {{ info?.deviceTypeName }}
+
+
+ 所属分区 : {{ info?.ptnName }} 监测对象 : {{ info?.monitorObjName }}
+
+
+ 监测值 : {{ info?.monitorVal }} 监测单位 : {{ info?.monitorUnit }}
+
+
+ 碳势 : {{ info?.en }} gCO2/KJ 采集时间 : {{ info?.uploadTime }}
+
+
+ 安装位置 : {{ info?.installLocaltion }} 安装时间 : {{ info?.installTime }}
+
+
+
+
+
diff --git a/src/components/mapBak/trendChart.vue b/src/components/mapBak/trendChart.vue
new file mode 100644
index 0000000..5fbdd3d
--- /dev/null
+++ b/src/components/mapBak/trendChart.vue
@@ -0,0 +1,163 @@
+
+
+
+
+
+
+
+
+
+ 日
+
+
+ 月
+
+
+ 年
+
+
+
+
+
+
+
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 9f395ae..4a28d5f 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -28,7 +28,7 @@
-