biexueqin
/
high-score-visualization
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

新增图层

wisdom
biexueqin 4 weeks ago
parent
eee211b3f0
commit
c25a98e819
6 changed files with 1233 additions and 1675 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/highScore/monitoring.png
  2. BIN
      src/assets/highScore/tollStation.png
  3. 161
      src/components/Legend/index.vue
  4. 718
      src/components/MapContainer/index.vue
  5. 521
      src/views/highScore/dailyMonitoring/index.vue
  6. 262
      src/views/highScore/dailyMonitoring/test.ts

BIN
src/assets/highScore/monitoring.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/highScore/tollStation.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

161
src/components/Legend/index.vue
View File

@ -0,0 +1,161 @@
<template>
<div class="lanyer">
<div>
<img src="/src/assets/highScore/mapIcon1.png" />
图例名称
</div>
<div v-for="item in layerList" :key="item.id" class="custom-checkbox">
<label>
<input type="checkbox" :checked="item.show" @change="toggleLayer(item.layerName)"/>
<img :src="item.url" />
<span>{{ item.name }}</span>
</label>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, watch } from 'vue';
const props = defineProps({
chooseBot: {
type: String,
default: ''
}
});
const emit = defineEmits(['layer-toggle']);
const allLayerLists = {
default: [
{
id: 1,
layerName: 'warnLayer',
name: '事件',
show: true,
url: new URL('@/assets/highScore/warnicon1.png', import.meta.url).href,
},
{
id: 2,
layerName: 'equipmentLayer',
name: '设备',
show: true,
url: new URL('@/assets/highScore/equipment.png', import.meta.url).href,
},
{
id: 3,
layerName: 'carLayer',
name: '车辆',
show: true,
url: new URL('@/assets/highScore/caricon.png', import.meta.url).href,
},
{
id: 4,
layerName: 'emergencyLayer',
name: '应急设施',
show: true,
url: new URL('@/assets/highScore/Materialsicon.png', import.meta.url).href,
},
],
charge: [
{
id: 1,
layerName: 'monitoring',
name: '监控',
show: true,
url: new URL('@/assets/highScore/monitoring.png', import.meta.url).href,
},
{
id: 2,
layerName: 'peopleLayer',
name: '设备',
show: true,
url: new URL('@/assets/highScore/equipment.png', import.meta.url).href,
},
{
id: 3,
layerName: 'carLayer',
name: '车辆',
show: true,
url: new URL('@/assets/highScore/caricon.png', import.meta.url).href,
},
{
id: 4,
layerName: 'tollStation',
name: '收费站',
show: true,
url: new URL('@/assets/highScore/tollStation.png', import.meta.url).href,
},
],
};
const layerList = ref(allLayerLists.default);
// 根据 chooseBot 过滤图层列表
const filteredLayerList = computed(() => {
return layerList.value.filter(item => item.show);
});
// 监听 chooseBot 变化
watch(() => props.chooseBot, (newVal) => {
switch(newVal) {
case 'charge':
layerList.value = allLayerLists.charge;
break;
case 'dataChart':
layerList.value = allLayerLists.charge;
break;
default:
layerList.value = allLayerLists.default;
}
}, { immediate: true });
// 切换图层显示状态
const toggleLayer = (layerName: string) => {
const layer = layerList.value.find(item => item.layerName === layerName);
if (layer) {
layer.show = !layer.show;
emit('layer-toggle', {
layerName,
show: layer.show
});
}
};
</script>
<style lang="less" scoped>
.lanyer {
padding: 30px 0 0 20px;
width: 500.34px;
height: 550.65px;
color: white;
z-index: 9999 !important;
position: absolute;
bottom: 20%;
right: 18%;
background: url('@/assets/highScore/lanyerBg.png') no-repeat 0 0/100% 100%;
div {
font-size: 40px;
}
.custom-checkbox {
margin: 30px 0 20px 80px; /* 调整间距 */
}
.custom-checkbox img {
width: 50px;
height: 50px;
filter: brightness(0.88) contrast(1.22) grayscale(0) hue-rotate(360deg) opacity(1) saturate(1.1) sepia(0.54) invert(0.9);
}
.custom-checkbox label {
display: flex;
align-items: center;
gap: 25px; /* 调整图标和文字的间距 */
cursor: pointer;
}
.custom-checkbox input[type='checkbox'] {
width: 40px;
height: 40px;
cursor: pointer;
}
.custom-checkbox span {
color: white;
font-size: 36px;
}
}
</style>

718
src/components/MapContainer/index.vue
View File

@ -5,12 +5,7 @@
<div class="searchText"> <div class="searchText">
<img src="/src/assets/highScore/searchIcon.png" /> <img src="/src/assets/highScore/searchIcon.png" />
<div style="margin-bottom: 10%"> <div style="margin-bottom: 10%">
<a-input <a-input v-model:value="keyword" :bordered="false" placeholder="搜索" class="custom-textarea" />
v-model:value="keyword"
:bordered="false"
placeholder="搜索"
class="custom-textarea"
/>
</div> </div>
</div> </div>
</div> </div>
@ -31,27 +26,23 @@ const searchValue = ref();
const boardRef = ref(); const boardRef = ref();
const devRef = ref(); const devRef = ref();
const router = useRouter(); const router = useRouter();
import {
lineLayerData,
lineLayerData1,
lineLayerData2,
pointData
} from '../../views/highScore/dailyMonitoring/test';
const emit = defineEmits(['checkWarring', 'showModal']); const emit = defineEmits(['checkWarring', 'showModal']);
// const emit1 = defineEmits(['showModal']); // const emit1 = defineEmits(['showModal']);
const layerGroups = reactive<Record<string, { iconLayer: any; textLayer: any }>>({}); const layerGroups = reactive<Record<string, { iconLayer: any; textLayer: any; }>>({});
interface LayerConfig { interface LayerConfig {
id: string; id: string;
type: type:
| 'road'
| 'tunnel'
| 'board'
| 'fire'
| 'device'
| 'highWay'
| 'explosives'
| 'tourism'
| 'ThreeShuttleBus'
| 'fireWorks'
| 'chemistryCar'
| 'warn' | 'warn'
| 'people' | 'people'
| 'car' | 'car'
| 'materials'; | 'emergency'
| 'equipment';
data: any; data: any;
style?: { style?: {
color?: string; color?: string;
@ -75,22 +66,13 @@ interface Props {
tileUrl?: string; tileUrl?: string;
amapKey?: string; amapKey?: string;
tdtKey?: string; tdtKey?: string;
roadLayer?: LayerConfig;
tunnelLayer?: LayerConfig;
boardLayer?: LayerConfig;
fireLayer?: LayerConfig;
deviceLayer?: LayerConfig;
highWayLayer?: LayerConfig;
explosivesLayer?: LayerConfig;
tourismLayer?: LayerConfig;
ThreeShuttleBusLayer?: LayerConfig;
fireWorksLayer?: LayerConfig;
chemistryCarLayer?: LayerConfig;
lineLayer?: LayerConfig; lineLayer?: LayerConfig;
warnLayer?: LayerConfig; warnLayer?: LayerConfig;
peopleLayer?: LayerConfig; peopleLayer?: LayerConfig;
carLayer?: LayerConfig; carLayer?: LayerConfig;
materialsLayer?: LayerConfig; materialsLayer?: LayerConfig;
equipmentLayer?: LayerConfig;
emergencyLayer?: LayerConfig;
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
@ -125,38 +107,91 @@ const initL7Map = async () => {
parser: { type: 'rasterTile', tileSize: 256, dataType: 'image' }, parser: { type: 'rasterTile', tileSize: 256, dataType: 'image' },
}); });
scene.value?.addLayer(baseLayer); scene.value?.addLayer(baseLayer);
}
//圆圈 //名字
if (props.warnLayer) { const layer = new PointLayer()
const pointLayer = new PointLayer() .source(pointData.features, {
.source({ parser: {
type: 'FeatureCollection', type: 'json',
features: [ x: 'j',
{ y: 'w',
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: [106.5488177260367, 29.58682303545917],
}, },
})
.shape('square')
.color('backgoundColor')
.size(50);
scene.value.addLayer(layer);
const textLayer = new PointLayer({})
.source(pointData.features, {
parser: {
type: 'json',
x: 'j',
y: 'w',
}, },
],
}) })
.shape('circle') .shape('m', 'text')
.size(230) // 圆圈直径（像素） .size(30)
.color('#045697') // 填充颜色 .color('black')
.style({ .style({
stroke: '#04c4cb', // 边框颜色 textAnchor: 'center',
strokeWidth: 3, // 边框宽度 textOffset: [2, -5],
opacity: 0.5, // 透明度 spacing: 2,
padding: [1, 1],
stroke: 'black',
strokeWidth: 0.3,
strokeOpacity: 1.0,
fontFamily: 'Times New Roman',
textAllowOverlap: true,
}); });
scene.value?.addLayer(pointLayer); scene.value.addLayer(textLayer);
// const lineLayer = new LineLayer({
// name: 'lineLayer',
// visible: true,
// })
// .source(lineLayerData)
// .size(5)
// .color('color')
// .style({
// opacity: 1,
// });
// scene.value.addLayer(lineLayer);
// const lineLayer1 = new LineLayer({
// name: 'lineLayer',
// visible: true,
// })
// .source(lineLayerData1)
// .size(5)
// .color('color')
// .style({
// opacity: 1,
// });
// scene.value.addLayer(lineLayer1);
// const lineLayer2 = new LineLayer({
// name: 'lineLayer',
// visible: true,
// })
// .source(lineLayerData2)
// .size(5)
// .style({
// opacity: 1,
// sourceColor: '#00887f',
// targetColor: '#00887f',
// linearDir: 'horizontal',
// });
// scene.value.addLayer(lineLayer2);
} }
// 2. 事件图层 // 2. 事件图层
if (props.warnLayer) { if (props.warnLayer) {
await scene.value.addImage( await scene.value.addImage(
'warn-icon', 'warn-icon',
new URL('@/assets/coordinated/warnicon.png', import.meta.url).href, new URL('@/assets/highScore/eventLanyer.png', import.meta.url).href,
); );
const warnLayer = new PointLayer({ const warnLayer = new PointLayer({
zIndex: props.warnLayer.style?.zIndex || 1, zIndex: props.warnLayer.style?.zIndex || 1,
@ -175,30 +210,36 @@ const initL7Map = async () => {
.size(props.warnLayer.style?.size || 2); .size(props.warnLayer.style?.size || 2);
scene.value?.addLayer(warnLayer); scene.value?.addLayer(warnLayer);
warnLayer.on('click', e => { warnLayer.on('click', e => {
console.log('事件图层', e); // console.log('事件图层', e);
emit('showModal'); // emit('showModal');
}); });
layerInstances['warnLayer'] = warnLayer; layerInstances['warnLayer'] = warnLayer;
} }
// 3. 人员图层 // 3. 设备图层
if (props.peopleLayer) { if (props.equipmentLayer) {
await scene.value.addImage( await scene.value.addImage(
'people-icon', 'equipmentLayer-icon',
new URL('@/assets/coordinated/people.png', import.meta.url).href, new URL('@/assets/highScore/equipmentLanyer.png', import.meta.url).href,
); );
const peopleLayer = new PointLayer({ const equipmentLayer = new PointLayer({
zIndex: props.peopleLayer.style?.zIndex || 2, zIndex: props.equipmentLayer.style?.zIndex || 2,
name: 'people-layer', name: 'equipmentLayer-layer',
visible: true, visible: true,
}) })
.source(props.peopleLayer.data) .source(props.equipmentLayer.data, {
.shape('people-icon') parser: {
.size(props.peopleLayer.style?.size || 50); type: 'json',
scene.value?.addLayer(peopleLayer); x: 'lng',
layerInstances['peopleLayer'] = peopleLayer; y: 'lat',
peopleLayer.on('click', e => { },
})
.shape('equipmentLayer-icon')
.size(props.equipmentLayer.style?.size || 50);
scene.value?.addLayer(equipmentLayer);
layerInstances['equipmentLayer'] = equipmentLayer;
equipmentLayer.on('click', e => {
emit('showModal'); emit('showModal');
}); });
} }
@ -207,7 +248,7 @@ const initL7Map = async () => {
if (props.carLayer) { if (props.carLayer) {
await scene.value.addImage( await scene.value.addImage(
'car-icon', 'car-icon',
new URL('@/assets/coordinated/car.png', import.meta.url).href, new URL('@/assets/highScore/carLanyer.png', import.meta.url).href,
); );
const carLayer = new PointLayer({ const carLayer = new PointLayer({
@ -215,7 +256,13 @@ const initL7Map = async () => {
name: 'car-layer', name: 'car-layer',
visible: true, visible: true,
}) })
.source(props.carLayer.data) .source(props.carLayer.data,{
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('car-icon') .shape('car-icon')
.size(props.carLayer.style?.size || 15) .size(props.carLayer.style?.size || 15)
.style({ .style({
@ -228,522 +275,32 @@ const initL7Map = async () => {
layerInstances['carLayer'] = carLayer; layerInstances['carLayer'] = carLayer;
} }
// 5. 物资图层 // 5. 应急措施图层
if (props.materialsLayer) { if (props.emergencyLayer) {
await scene.value.addImage(
'materials-icon',
new URL('@/assets/coordinated/Materials.png', import.meta.url).href,
);
const materialsLayer = new PointLayer({
zIndex: props.materialsLayer.style?.zIndex || 5,
name: 'materials-layer',
visible: true,
})
.source(props.materialsLayer.data)
.shape('materials-icon')
.size(props.materialsLayer.style?.size || 25)
.animate({
enable: true,
speed: 1,
rings: 3,
});
scene.value?.addLayer(materialsLayer);
materialsLayer.on('click', e => {
emit('showModal');
});
layerInstances['materialsLayer'] = materialsLayer;
}
// 2. 公路图层（线图层）
if (props.roadLayer) {
const roadLayer = new LineLayer({
zIndex: props.roadLayer.style?.zIndex || 1,
name: 'road-layer',
visible: true,
})
.source(props.roadLayer.data)
.size(props.roadLayer.style?.size || 2)
.color(props.roadLayer.style?.color || '#4a7af0');
scene.value?.addLayer(roadLayer);
layerInstances['lineLayer'] = roadLayer;
}
// 3. 隧道图层（点图层+文字标注）
if (props.tunnelLayer) {
await scene.value.addImage(
'tunnel-icon',
new URL('@/assets/images/traffic/point/tunnel.svg', import.meta.url).href,
);
const tunnelLayer = new PointLayer({
zIndex: props.tunnelLayer.style?.zIndex || 2,
name: 'tunnel-layer',
visible: false,
})
.source(props.tunnelLayer.data)
.shape('tunnel-icon')
.size(props.tunnelLayer.style?.size || 50);
scene.value?.addLayer(tunnelLayer);
layerInstances['tunnelLayer'] = tunnelLayer;
tunnelLayer.on('click', e => {
console.log('隧道图层', e);
router.push('/tunnel/' + e.feature.id);
});
}
// 4. 情报板图层
if (props.boardLayer) {
await scene.value.addImage(
'board-icon',
new URL('@/assets/images/traffic/point/board.svg', import.meta.url).href,
);
const boardLayer = new PointLayer({
zIndex: props.boardLayer.style?.zIndex || 4,
name: 'board-layer',
visible: false,
})
.source(props.boardLayer.data)
.shape('board-icon')
.size(props.boardLayer.style?.size || 15)
.style({
offsets: [0, 20],
});
scene.value?.addLayer(boardLayer);
boardLayer.on('click', e => {
console.log('情报板图层', e);
boardRef.value.open = true;
});
layerInstances['boardLayer'] = boardLayer;
}
// 5. 火灾图层
if (props.fireLayer) {
await scene.value.addImage(
'fire-icon',
new URL('@/assets/images/traffic/point/fire.svg', import.meta.url).href,
);
const fireLayer = new PointLayer({
zIndex: props.fireLayer.style?.zIndex || 5,
name: 'fire-layer',
visible: false,
})
.source(props.fireLayer.data)
.shape('fire-icon')
.size(props.fireLayer.style?.size || 25)
.animate({
enable: true,
speed: 1,
rings: 3,
});
scene.value?.addLayer(fireLayer);
fireLayer.on('click', e => {
console.log('监控', e);
devRef.value.open = true;
});
layerInstances['fireLayer'] = fireLayer;
}
// 6. 隧道分布器图层
if (props.deviceLayer) {
await scene.value.addImage( await scene.value.addImage(
'device-icon', 'emergency-icon',
new URL('@/assets/images/traffic/point/device.svg', import.meta.url).href, new URL('@/assets/highScore/emergencyLanyer.png', import.meta.url).href,
); );
const deviceLayer = new PointLayer({ const emergencyLayer = new PointLayer({
zIndex: props.deviceLayer.style?.zIndex || 6, zIndex: props.emergencyLayer.style?.zIndex || 5,
name: 'device-layer', name: 'emergency-layer',
visible: false,
})
.source(props.deviceLayer.data)
.shape('device-icon')
.size(props.deviceLayer.style?.size || 15);
scene.value?.addLayer(deviceLayer);
deviceLayer.on('click', e => {
console.log('监控', e);
devRef.value.open = true;
});
layerInstances['deviceLayer'] = deviceLayer;
}
//7.高速公路文字标注图层
if (props.highWayLayer) {
// await scene.value.addImage(
// 'highWay-icon',
// new URL('@/assets/images/watch/blueBg.png', import.meta.url).href,
// );
const layer = new PointLayer({
zIndex: props.highWayLayer.style?.zIndex || 7,
name: 'highWay-layer',
visible: true,
})
.source(props.highWayLayer.data.list, {
parser: {
type: 'json',
x: 'j',
y: 'w',
},
})
.shape('square')
.color('c')
.size(15)
.style({
stroke: 'white',
strokeWidth: 0.5,
});
scene.value?.addLayer(layer);
const highWayLayer = new PointLayer({
zIndex: props.highWayLayer.style?.zIndex || 7,
name: 'highWay-layer',
visible: true, visible: true,
}) })
.source(props.emergencyLayer.data,{
.source(props.highWayLayer.data.list, {
parser: {
type: 'json',
x: 'j',
y: 'w',
},
})
.shape('m', 'text')
// .shape('highWay-icon')
.size(props.highWayLayer.style?.size || 15)
.color('f')
.style({
textAnchor: 'center',
textOffset: [0, 0],
spacing: 2,
padding: [1, 1],
strokeOpacity: 1.0,
});
scene.value?.addLayer(highWayLayer);
// const highWayLayer1 = new PointLayer({
// zIndex: props.highWayLayer.style?.zIndex || 7,
// name: 'highWay-layer',
// visible: true,
// })
// .source(props.highWayLayer.data.list, {
// parser: {
// type: 'json',
// x: 'j',
// y: 'w',
// },
// })
// .shape('m', 'text')
// .size(12)
// .color('f')
// .style({
// textAnchor: 'center',
// textOffset: [0, 0],
// spacing: 2,
// padding: [1, 1],
// strokeOpacity: 1.0,
// });
// scene.value?.addLayer(highWayLayer1);
layerInstances['highWayLayer'] = highWayLayer;
}
//8.民用爆炸品专用车图层
if (props.explosivesLayer) {
await scene.value.addImage(
'explosives-icon',
new URL('@/assets/images/danger/point/1.svg', import.meta.url).href,
);
const iconLayer = new PointLayer({
zIndex: props.explosivesLayer.style?.zIndex || 6,
name: 'explosives-layer',
visible: true,
})
.source(props.explosivesLayer.data)
.shape('explosives-icon')
.size(props.explosivesLayer.style?.size || 15);
const textLayer = new PointLayer({
zIndex: props.explosivesLayer.style?.zIndex || 6,
name: 'explosives-layer',
visible: true,
})
.source(props.explosivesLayer.data)
.shape('text')
.size(15)
.color('#026b88')
.style({
textOffset: [5, 70], // 文本相对锚点的偏移量 [水平, 垂直]
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#00DCFF', // 描边颜色
strokeWidth: 0.5, // 描边宽度
strokeOpacity: 1.0,
});
// 添加到场景
scene.value?.addLayer(iconLayer);
scene.value?.addLayer(textLayer);
iconLayer.on('click', e => {
emit('checkWarring');
});
// 保存图层组
layerGroups['explosivesLayer'] = {
iconLayer,
textLayer,
};
}
//9.旅游包车图层
if (props.tourismLayer) {
await scene.value.addImage(
'tourism-icon',
new URL('@/assets/images/danger/point/2.svg', import.meta.url).href,
);
const iconLayer = new PointLayer({
zIndex: props.tourismLayer.style?.zIndex || 6,
name: 'tourism-layer',
visible: true,
})
.source(props.tourismLayer.data)
.shape('tourism-icon')
.size(props.tourismLayer.style?.size || 15);
const textLayer = new PointLayer({
zIndex: props.tourismLayer.style?.zIndex || 6,
name: 'tourism-layer',
visible: true,
})
.source(props.tourismLayer.data)
.shape('text')
.size(15)
.color('#023d7d')
.style({
textOffset: [5, 70], // 文本相对锚点的偏移量 [水平, 垂直]
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#0276b6', // 描边颜色
strokeWidth: 0.5, // 描边宽度
strokeOpacity: 1.0,
});
// 添加到场景
scene.value?.addLayer(iconLayer);
scene.value?.addLayer(textLayer);
iconLayer.on('click', e => {
emit('checkWarring');
});
// 保存图层组
layerGroups['tourismLayer'] = {
iconLayer,
textLayer,
};
}
//10.三类以上班线客车
if (props.ThreeShuttleBusLayer) {
await scene.value.addImage(
'ThreeShuttleBus-icon',
new URL('@/assets/images/danger/point/3.svg', import.meta.url).href,
);
const iconLayer = new PointLayer({
zIndex: props.ThreeShuttleBusLayer.style?.zIndex || 6,
name: 'Three-shuttle-bus-layer',
visible: true,
})
.source(props.ThreeShuttleBusLayer.data)
.shape('ThreeShuttleBus-icon')
.size(props.ThreeShuttleBusLayer.style?.size || 15);
const textLayer = new PointLayer({
zIndex: props.ThreeShuttleBusLayer.style?.zIndex || 6,
name: 'Three-shuttle-bus-layer',
visible: true,
})
.source(props.ThreeShuttleBusLayer.data)
.shape('text')
.size(15)
.color('#028978')
.style({
textOffset: [5, 70], // 文本相对锚点的偏移量 [水平, 垂直]
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#03a583', // 描边颜色
strokeWidth: 0.5, // 描边宽度
strokeOpacity: 1.0,
});
// 添加到场景
scene.value?.addLayer(iconLayer);
scene.value?.addLayer(textLayer);
iconLayer.on('click', e => {
emit('checkWarring');
});
// 保存图层组
layerGroups['ThreeShuttleBusLayer'] = {
iconLayer,
textLayer,
};
}
//11.烟花爆竹专用车
if (props.fireWorksLayer) {
await scene.value.addImage(
'fireWorks-icon',
new URL('@/assets/images/danger/point/4.svg', import.meta.url).href,
);
const iconLayer = new PointLayer({
zIndex: props.fireWorksLayer.style?.zIndex || 6,
name: 'fire-works-layer',
visible: true,
})
.source(props.fireWorksLayer.data)
.shape('fireWorks-icon')
.size(props.fireWorksLayer.style?.size || 15);
const textLayer = new PointLayer({
zIndex: props.fireWorksLayer.style?.zIndex || 6,
name: 'fire-works-layer',
visible: true,
})
.source(props.fireWorksLayer.data)
.shape('text')
.size(15)
.color('#864a05')
.style({
textOffset: [5, 70], // 文本相对锚点的偏移量 [水平, 垂直]
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#ba7b3d', // 描边颜色
strokeWidth: 0.5, // 描边宽度
strokeOpacity: 1.0,
});
// 添加到场景
scene.value?.addLayer(iconLayer);
scene.value?.addLayer(textLayer);
iconLayer.on('click', e => {
emit('checkWarring');
});
// 保存图层组
layerGroups['fireWorksLayer'] = {
iconLayer,
textLayer,
};
}
//12.危险化学品专用车
if (props.chemistryCarLayer) {
await scene.value.addImage(
'chemistryCar-icon',
new URL('@/assets/images/danger/point/5.svg', import.meta.url).href,
);
const iconLayer = new PointLayer({
zIndex: props.chemistryCarLayer.style?.zIndex || 6,
name: 'chemistry-car-layer',
visible: true,
})
.source(props.chemistryCarLayer.data)
.shape('chemistryCar-icon')
.size(props.chemistryCarLayer.style?.size || 15);
const textLayer = new PointLayer({
zIndex: props.chemistryCarLayer.style?.zIndex || 6,
name: 'chemistry-car-layer',
visible: true,
})
.source(props.chemistryCarLayer.data)
.shape('text')
.size(15)
.color('#902506')
.style({
textOffset: [5, 70], // 文本相对锚点的偏移量 [水平, 垂直]
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#c84724', // 描边颜色
strokeWidth: 0.5, // 描边宽度
strokeOpacity: 1.0,
});
// 添加到场景
scene.value?.addLayer(iconLayer);
scene.value?.addLayer(textLayer);
iconLayer.on('click', e => {
emit('checkWarring');
});
// 保存图层组
layerGroups['chemistryCarLayer'] = {
iconLayer,
textLayer,
};
}
// 13.3D弧线
if (props.lineLayer) {
await scene.value.addImage(
'marker',
'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ',
);
const data = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [106.5828177260367, 29.55982303545917],
},
},
],
};
const imageLayer = new PointLayer().source(data).shape('marker').size(20).style({
zIndex: 10,
});
const layer = new LineLayer({})
.source(props.lineLayer.data, {
parser: {
type: 'json',
x: 'lng1',
y: 'lat1',
x1: 'lng2',
y1: 'lat2',
z: 'height', // 使用高度字段
},
})
.size(2)
.shape('arc3d')
.color('#dfe2b4')
.style({
zIndex: 1,
curvature: 3.0,
});
// 提取所有终点坐标
const endPoints = props.lineLayer.data.map(item => ({
lng: item.lng2,
lat: item.lat2,
name: item.name,
}));
// 添加终点圆点图层
const endPointLayer = new PointLayer()
.source(endPoints, {
parser: { parser: {
type: 'json', type: 'json',
x: 'lng', x: 'lng',
y: 'lat', y: 'lat',
}, },
}) })
.shape('circle') .shape('emergency-icon')
.size(8) .size(props.emergencyLayer.style?.size || 25)
.color('#5289d2') scene.value?.addLayer(emergencyLayer);
.style({ emergencyLayer.on('click', e => {
stroke: '#FFF', emit('showModal');
strokeWidth: 2,
zIndex: 10,
}); });
scene.value?.addLayer(imageLayer); layerInstances['emergencyLayer'] = emergencyLayer;
scene.value?.addLayer(endPointLayer);
scene.value?.addLayer(layer);
} }
}); });
}; };
@ -788,12 +345,14 @@ onBeforeUnmount(() => {
left: 7%; left: 7%;
width: 6000px; width: 6000px;
height: 2500px; height: 2500px;
border-radius: 15% / 50%; /* 使边框变成椭圆形，横轴和纵轴不同的比例 */ border-radius: 15% / 50%;
overflow: hidden; /* 防止内容溢出 */ /* 使边框变成椭圆形，横轴和纵轴不同的比例 */
overflow: hidden;
/* 防止内容溢出 */
position: relative; position: relative;
filter: brightness(0.88) contrast(1.22) grayscale(0) hue-rotate(360deg) opacity(1) saturate(1.1) filter: brightness(0.88) contrast(1.22) grayscale(0) hue-rotate(360deg) opacity(1) saturate(1.1) sepia(0.54) invert(0.9);
sepia(0.54) invert(0.9);
} }
.map-search-input { .map-search-input {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
@ -814,6 +373,7 @@ onBeforeUnmount(() => {
background: url('/src/assets/highScore/searchBg.png') no-repeat 0 0/100% 100%; background: url('/src/assets/highScore/searchBg.png') no-repeat 0 0/100% 100%;
width: 250px; width: 250px;
height: 32px; height: 32px;
.searchText { .searchText {
width: 246px; width: 246px;
height: 32px; height: 32px;
@ -822,6 +382,7 @@ onBeforeUnmount(() => {
position: absolute; position: absolute;
top: 6%; top: 6%;
left: 2%; left: 2%;
img { img {
position: absolute; position: absolute;
top: 20%; top: 20%;
@ -829,16 +390,19 @@ onBeforeUnmount(() => {
width: 15px; width: 15px;
height: 16px; height: 16px;
} }
div { div {
position: absolute; position: absolute;
top: -10%; top: -10%;
left: 8%; left: 8%;
} }
.custom-textarea::placeholder { .custom-textarea::placeholder {
color: white; color: white;
opacity: 1; opacity: 1;
font-size: 18px; font-size: 18px;
} }
.ant-input { .ant-input {
margin-bottom: 10px; margin-bottom: 10px;
font-size: 18px; font-size: 18px;

521
src/views/highScore/dailyMonitoring/index.vue
View File

@ -24,15 +24,11 @@
<div class="map-data"> <div class="map-data">
<!-- <div id="watch-map" v-show="chooseBot != 'surveillance'"></div> --> <!-- <div id="watch-map" v-show="chooseBot != 'surveillance'"></div> -->
<div v-show="chooseBot != 'surveillance'"> <div v-show="chooseBot != 'surveillance'">
<MapContainer <MapContainer :center="[106.5488177260367, 29.58682303545917]" :zoom="13" :warn-layer="warnLayerConfig"
:center="[106.5488177260367, 29.58682303545917]" :emergency-layer="emergencyLayerConfig"
:zoom="13" :car-layer="carLayerConfig" :equipment-layer="equipmentLayerConfig" :showSearch="true"
:showSearch="true" tileUrl="http://192.168.1.37:9999/sys/common/static/vec/{z}/{x}/{y}/tile.png" id="watch-map"
tileUrl="http://192.168.1.37:9999/sys/common/static/vec/{z}/{x}/{y}/tile.png" ref="mapRef" />
id="watch-map"
ref="mapRef"
/>
</div> </div>
<surveillance class="watch-video" v-show="chooseBot === 'surveillance'" /> <surveillance class="watch-video" v-show="chooseBot === 'surveillance'" />
@ -81,51 +77,39 @@
<div class="event-detail" v-show="visible"> <div class="event-detail" v-show="visible">
<resPonseShowModal @cancel-icon="handleshowModal" /> <resPonseShowModal @cancel-icon="handleshowModal" />
</div> </div>
<legend1 v-show="chooseBot != 'tunnel' && chooseBot != 'surveillance'" @layer-toggle="handleLayerToggle"
:choose-bot="chooseBot"></legend1>
<div class="lanyer" v-show="chooseBot != 'tunnel' && chooseBot != 'surveillance'">
<div>
<img src="/src/assets/highScore/mapIcon1.png" />
图例名称
</div>
<div v-for="item in layerList" :key="item.id" class="custom-checkbox">
<label>
<input type="checkbox" :checked="item.show" @change="handleLayer(item.layerName)" />
<img :src="item.url" />
<span>{{ item.name }}</span>
</label>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import { BaiduMap } from '@antv/l7-maps'; import { BaiduMap } from '@antv/l7-maps';
import { Scene, LineLayer, PointLayer } from '@antv/l7'; import { Scene, LineLayer, PointLayer } from '@antv/l7';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
const router = useRouter(); const router = useRouter();
import LeftList from './container/containerLeft.vue'; import LeftList from './container/containerLeft.vue';
import rightList from './container/containerright.vue'; import rightList from './container/containerright.vue';
import resPonseLeftList from '../emergencyResponse/container/containerLeft.vue'; import resPonseLeftList from '../emergencyResponse/container/containerLeft.vue';
import resPonserightList from '../emergencyResponse/container/containerright.vue'; import resPonserightList from '../emergencyResponse/container/containerright.vue';
import resPonseShowModal from '../emergencyResponse/container/showModal.vue'; import resPonseShowModal from '../emergencyResponse/container/showModal.vue';
import chargerightList from '../chargeMonitoring/container/containerright.vue'; import chargerightList from '../chargeMonitoring/container/containerright.vue';
import chargeLeftList from '../chargeMonitoring/container/containerLeft.vue'; import chargeLeftList from '../chargeMonitoring/container/containerLeft.vue';
import holidaysrightList from '../holidays/container/containerright.vue'; import holidaysrightList from '../holidays/container/containerright.vue';
import holidaysLeftList from '../holidays/container/containerLeft.vue'; import holidaysLeftList from '../holidays/container/containerLeft.vue';
import dataVisualizationrightList from '../dataVisualization/container/containerright.vue'; import dataVisualizationrightList from '../dataVisualization/container/containerright.vue';
import dataVisualizationLeftList from '../dataVisualization/container/containerLeft.vue'; import dataVisualizationLeftList from '../dataVisualization/container/containerLeft.vue';
import surveillancerightList from '../video/container/containerright.vue'; import surveillancerightList from '../video/container/containerright.vue';
import surveillanceLeftList from '../video/container/containerLeft.vue'; import surveillanceLeftList from '../video/container/containerLeft.vue';
import surveillance from '../video/container/index.vue'; import surveillance from '../video/container/index.vue';
import MapContainer from '../../../components/MapContainer/index.vue'; import MapContainer from '../../../components/MapContainer/index.vue';
import tunnel from '../tunnelMonitoring/container/index.vue'; import tunnel from '../tunnelMonitoring/container/index.vue';
import bottom from './container/bottom.vue'; import bottom from './container/bottom.vue';
import { import legend1 from '../../../components/Legend/index.vue';
lineLayerData, import {
lineLayerData1,
lineLayerData2,
pointData, pointData,
responseData, responseData,
chargeAddLayer1, chargeAddLayer1,
@ -136,36 +120,36 @@
dailyAddLayer2, dailyAddLayer2,
dailyAddLayer3, dailyAddLayer3,
dailyAddLayer4, dailyAddLayer4,
} from './test'; } from './test';
const scene = ref(); const scene = ref();
const chooseBot = ref('monitoring'); const chooseBot = ref('monitoring');
const visible = ref<boolean>(false); const visible = ref<boolean>(false);
const imageLayerRef = ref(null); const imageLayerRef = ref(null);
const isImageAdded = ref<boolean>(false); // 标记图片资源是否已添加 const isImageAdded = ref<boolean>(false); // 标记图片资源是否已添加
const showMapInfo = ref<boolean>(false); const showMapInfo = ref<boolean>(false);
const time = ref(''); const time = ref('');
let timer; let timer;
const action = ref<'map' | 'watch'>('map'); const action = ref<'map' | 'watch'>('map');
const componentLeft = { const componentLeft = {
response: resPonseLeftList, response: resPonseLeftList,
monitoring: LeftList, monitoring: LeftList,
charge: chargeLeftList, charge: chargeLeftList,
holidays: holidaysLeftList, holidays: holidaysLeftList,
dataChart: dataVisualizationLeftList, dataChart: dataVisualizationLeftList,
surveillance: surveillanceLeftList, surveillance: surveillanceLeftList,
}; };
const componentRight = { const componentRight = {
response: resPonserightList, response: resPonserightList,
monitoring: rightList, monitoring: rightList,
charge: chargerightList, charge: chargerightList,
holidays: holidaysrightList, holidays: holidaysrightList,
dataChart: dataVisualizationrightList, dataChart: dataVisualizationrightList,
surveillance: surveillancerightList, surveillance: surveillancerightList,
}; };
const getImageUrl = imagePath => { const getImageUrl = imagePath => {
return new URL(`/src/${imagePath}`, import.meta.url).href; return new URL(`/src/${imagePath}`, import.meta.url).href;
}; };
function getDate() { function getDate() {
const weeks = ['天', '一', '二', '三', '四', '五', '六']; const weeks = ['天', '一', '二', '三', '四', '五', '六'];
const now = new Date(); const now = new Date();
const year = now.getFullYear(); const year = now.getFullYear();
@ -189,271 +173,80 @@
); );
const time = fn(year, month, day, weeks[week], hours, minutes, seconds); const time = fn(year, month, day, weeks[week], hours, minutes, seconds);
return time; return time;
} }
timer = setInterval(() => { timer = setInterval(() => {
time.value = getDate(); time.value = getDate();
}, 1000); }, 1000);
const layerList = ref< const showModal = () => {
{
id: number;
layerName: string;
name: string;
show: boolean;
url: string;
}[]
>([
{
id: 1,
layerName: 'warnLayer',
name: '事件',
show: true,
url: new URL('@/assets/highScore/warnicon1.png', import.meta.url).href,
},
{
id: 2,
layerName: 'peopleLayer',
name: '设备',
show: true,
url: new URL('@/assets/highScore/equipment.png', import.meta.url).href,
},
{
id: 3,
layerName: 'carLayer',
name: '车辆',
show: true,
url: new URL('@/assets/highScore/caricon.png', import.meta.url).href,
},
{
id: 4,
layerName: 'materialsLayer',
name: '应急设施',
show: true,
url: new URL('@/assets/highScore/Materialsicon.png', import.meta.url).href,
},
]);
const showModal = () => {
visible.value = true; visible.value = true;
}; };
const changeModal = () => { const changeModal = () => {
visible.value = false; visible.value = false;
}; };
const handleshowModal = (e) => { const handleshowModal = (e) => {
visible.value = e; visible.value = e;
}; };
const mapRef = ref();
const handleLayerToggle = ({ layerName, show }: { layerName: string; show: boolean; }) => {
console.log(`图层 ${layerName} 状态变为: ${show ? '显示' : '隐藏'}`);
mapRef.value.setLayerVisible(layerName,show);
};
// 底部导航栏 // 底部导航栏
const handleIconSelected = (id) => { const handleIconSelected = (id) => {
changeModal(); changeModal();
chooseBot.value = id; chooseBot.value = id;
console.log('Received ID:', chooseBot); console.log('Received ID:', chooseBot);
// if (chooseBot.value == 'response') { };
// responseAdddLayer();
// } else if (chooseBot.value == 'charge') {
// Object.values(chargeAddLayer).forEach((method) => {
// if (typeof method === 'function') {
// method();
// }
// });
// } else if (chooseBot.value == 'tunnel') {
// // router.push('/highScore/tunnelMonitoring');
// } else if (chooseBot.value == 'holidays') {
// Object.values(chargeAddLayer).forEach((method) => {
// if (typeof method === 'function') {
// method();
// }
// });
// showMapInfo.value = true;
// } else {
// showMapInfo.value = false;
// removeImageLayer();
// }
};
// 路线图层
const adddLayer = {
// 线路
lineLayer() {
const lineLayer = new LineLayer({
name: 'lineLayer',
visible: true,
})
.source(lineLayerData)
.size(5)
.color('color')
.style({
opacity: 1,
});
scene.value.addLayer(lineLayer);
},
lineLayer1() {
const lineLayer = new LineLayer({
name: 'lineLayer',
visible: true,
})
.source(lineLayerData1)
.size(5)
.color('color')
.style({
opacity: 1,
});
scene.value.addLayer(lineLayer);
},
lineLayer2() {
const lineLayer = new LineLayer({
name: 'lineLayer',
visible: true,
})
.source(lineLayerData2)
.size(5)
.style({
opacity: 1,
sourceColor: '#00887f',
targetColor: '#00887f',
linearDir: 'horizontal',
});
scene.value.addLayer(lineLayer);
},
//名字
nameLayer() {
const layer = new PointLayer()
.source(pointData.features, {
parser: {
type: 'json',
x: 'j',
y: 'w',
},
})
.shape('square')
.color('backgoundColor')
.size(65);
scene.value.addLayer(layer);
const textLayer = new PointLayer({})
.source(pointData.features, {
parser: {
type: 'json',
x: 'j',
y: 'w',
},
})
.shape('m', 'text')
.size(40)
.color('black')
.style({
textAnchor: 'center',
textOffset: [2, -5],
spacing: 2,
padding: [1, 1],
stroke: '#ffffff',
strokeWidth: 0.3,
strokeOpacity: 1.0,
fontFamily: 'Times New Roman',
textAllowOverlap: true,
});
scene.value.addLayer(textLayer);
},
};
//日常监控图层 // 事件图层配置
const dailyAddLayer = { const warnLayerConfig = {
//事件 id: 'warn-layer',
addLayer1() { type: 'warn',
scene.value.addImage('addLayer1', new URL('@/assets/highScore/eventLanyer.png', import.meta.url).href); data: dailyAddLayer1,
const addLayer1 = new PointLayer({ style: {
name: 'addLayer1', size: 120,
zIndex: 2, zIndex: 2,
})
.source(dailyAddLayer1, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('addLayer1')
.size(88)
.style({
offsets: [0, 20],
raisingHeight: 10,
});
scene.value.addLayer(addLayer1);
}, },
};
//设备 // 设备图层配置
addLayer2() { const equipmentLayerConfig = {
scene.value.addImage('addLayer2', new URL('@/assets/highScore/equipmentLanyer.png', import.meta.url).href); id: 'equipment-layer',
const addLayer2 = new PointLayer({ type: 'equipment',
name: 'addLayer2', data: dailyAddLayer2,
style: {
size: 120,
zIndex: 2, zIndex: 2,
})
.source(dailyAddLayer2, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('addLayer2')
.size(88)
.style({
offsets: [0, 20],
raisingHeight: 10,
});
scene.value.addLayer(addLayer2);
}, },
};
//车辆 // 车辆图层配置
addLayer3() { const carLayerConfig = {
scene.value.addImage('addLayer3', new URL('@/assets/highScore/carLanyer.png', import.meta.url).href); id: 'car-layer',
const addLayer3 = new PointLayer({ type: 'car',
name: 'addLayer3', data: dailyAddLayer3,
style: {
size: 120,
zIndex: 2, zIndex: 2,
})
.source(dailyAddLayer3, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('addLayer3')
.size(88)
.style({
offsets: [0, 20],
raisingHeight: 10,
});
scene.value.addLayer(addLayer3);
}, },
};
//应急设施 // 应急措施图层配置
addLayer4() { const emergencyLayerConfig = {
scene.value.addImage('addLayer4', new URL('@/assets/highScore/emergencyLanyer.png', import.meta.url).href); id: 'emergency-layer',
const addLayer4 = new PointLayer({ type: 'emergency',
name: 'addLayer4', data: dailyAddLayer4,
style: {
size: 120,
zIndex: 2, zIndex: 2,
})
.source(dailyAddLayer4, {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('addLayer4')
.size(88)
.style({
offsets: [0, 20],
raisingHeight: 10,
});
scene.value.addLayer(addLayer4);
}, },
}; };
//收费监控图层 //收费监控图层
const chargeAddLayer = { const chargeAddLayer = {
addLayer1() { addLayer1() {
scene.value.addImage('addLayer1', new URL('@/assets/highScore/charge/LayerIcon.png', import.meta.url).href); scene.value.addImage('addLayer1', new URL('@/assets/highScore/charge/LayerIcon.png', import.meta.url).href);
const addLayer1 = new PointLayer({ const addLayer1 = new PointLayer({
@ -541,10 +334,10 @@
}); });
scene.value.addLayer(addLayer4); scene.value.addLayer(addLayer4);
}, },
}; };
//应急处理图层 //应急处理图层
const responseAdddLayer = () => { const responseAdddLayer = () => {
if (!isImageAdded.value) { if (!isImageAdded.value) {
scene.value.addImage('response', new URL('@/assets/highScore/record/event.png', import.meta.url).href); scene.value.addImage('response', new URL('@/assets/highScore/record/event.png', import.meta.url).href);
isImageAdded.value = true; isImageAdded.value = true;
@ -576,47 +369,30 @@
}); });
console.log('2222'); console.log('2222');
scene.value.addLayer(imageLayerRef.value); scene.value.addLayer(imageLayerRef.value);
}; };
const removeImageLayer = () => { const removeImageLayer = () => {
if (imageLayerRef.value) { if (imageLayerRef.value) {
scene.value.removeLayer(imageLayerRef.value); scene.value.removeLayer(imageLayerRef.value);
imageLayerRef.value = null; // 重置引用 imageLayerRef.value = null; // 重置引用
} }
}; };
onMounted(() => { onMounted(() => {
// router.push('/highScore/dailyMonitoring');
scene.value = new Scene({
id: 'watch-map',
map: new BaiduMap({
center: [106.5488177260367, 29.58682303545917],
zoom: 30,
style: '344b005fd5b4220a55241c25e7733e81',
logoVisible: false,
}),
});
Object.values(adddLayer).forEach((method) => {
if (typeof method === 'function') {
method();
}
});
Object.values(dailyAddLayer).forEach((method) => {
if (typeof method === 'function') { });
method();
}
});
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import './dailyMonitoring.less'; @import './dailyMonitoring.less';
.watch-bottom {
.watch-bottom {
z-index: 9999 !important; z-index: 9999 !important;
position: absolute; position: absolute;
bottom: 3%; bottom: 3%;
left: 35%; left: 35%;
} }
.lanyer {
.lanyer {
padding: 30px 0 0 20px; padding: 30px 0 0 20px;
width: 500.34px; width: 500.34px;
height: 550.65px; height: 550.65px;
@ -626,23 +402,29 @@
bottom: 20%; bottom: 20%;
right: 18%; right: 18%;
background: url('@/assets/highScore/lanyerBg.png') no-repeat 0 0/100% 100%; background: url('@/assets/highScore/lanyerBg.png') no-repeat 0 0/100% 100%;
div { div {
font-size: 40px; font-size: 40px;
} }
.custom-checkbox { .custom-checkbox {
margin: 30px 0 20px 80px; /* 调整间距 */ margin: 30px 0 20px 80px;
/* 调整间距 */
} }
.custom-checkbox img { .custom-checkbox img {
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
.custom-checkbox label { .custom-checkbox label {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 25px; /* 调整图标和文字的间距 */ gap: 25px;
/* 调整图标和文字的间距 */
cursor: pointer; cursor: pointer;
} }
.custom-checkbox input[type='checkbox'] { .custom-checkbox input[type='checkbox'] {
width: 40px; width: 40px;
height: 40px; height: 40px;
@ -653,8 +435,9 @@
color: white; color: white;
font-size: 36px; font-size: 36px;
} }
} }
.time {
.time {
width: 898px; width: 898px;
height: 88px; height: 88px;
font-family: font-family:
@ -668,31 +451,37 @@
position: absolute; position: absolute;
right: 1%; right: 1%;
top: 53%; top: 53%;
span { span {
font-size: 66px; font-size: 66px;
} }
} }
.event-detail {
.event-detail {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 9999; z-index: 9999;
} }
.flipped {
.flipped {
transform: rotate(180deg); transform: rotate(180deg);
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
.watch-mode {
.watch-mode {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 50px 150px; padding: 50px 150px;
display: flex; display: flex;
.watch-left, .watch-left,
.watch-right { .watch-right {
width: 25%; width: 25%;
height: 100%; height: 100%;
} }
.control-top { .control-top {
width: 30vmin; width: 30vmin;
height: 8%; height: 8%;
@ -706,6 +495,7 @@
z-index: 999; z-index: 999;
background: url(/src/assets/coordinated/tcBg1.png) no-repeat 0 0 / 100% 100%; background: url(/src/assets/coordinated/tcBg1.png) no-repeat 0 0 / 100% 100%;
} }
.control { .control {
width: 80vmin; width: 80vmin;
height: 10vmin; height: 10vmin;
@ -718,9 +508,11 @@
align-items: center; align-items: center;
z-index: 999; z-index: 999;
background: url('@/assets/coordinated/tcBg.png') no-repeat 0 0/100% 100%; background: url('@/assets/coordinated/tcBg.png') no-repeat 0 0/100% 100%;
.layer { .layer {
margin: 0 10px; margin: 0 10px;
font-size: 18px; font-size: 18px;
img { img {
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -729,11 +521,13 @@
} }
} }
} }
.watch-center { .watch-center {
flex: 1; flex: 1;
margin-right: 10px; margin-right: 10px;
margin-top: 30px; margin-top: 30px;
position: relative; position: relative;
.map-select { .map-select {
width: 114px; width: 114px;
height: 877px; height: 877px;
@ -744,13 +538,16 @@
position: absolute; position: absolute;
top: 3%; top: 3%;
left: 2%; left: 2%;
img { img {
margin-top: 45%; margin-top: 45%;
} }
} }
.map-data { .map-data {
height: 80%; height: 80%;
position: relative; position: relative;
.watch-video { .watch-video {
position: absolute; position: absolute;
top: -6%; top: -6%;
@ -758,35 +555,42 @@
width: 130%; width: 130%;
height: 120%; height: 120%;
} }
.info-map { .info-map {
display: flex; display: flex;
z-index: 9998 !important; z-index: 9998 !important;
position: absolute; position: absolute;
top: 10%; top: 10%;
left: 23%; left: 23%;
.info1 { .info1 {
width: 1300px; width: 1300px;
height: 200px; height: 200px;
background: url('@/assets/highScore/holidays/mapInfoBg.png') no-repeat 0 0/100% 100%; background: url('@/assets/highScore/holidays/mapInfoBg.png') no-repeat 0 0/100% 100%;
} }
.title { .title {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
text-align: left; text-align: left;
padding: 2% 0 0 0; padding: 2% 0 0 0;
div { div {
font-weight: 500; font-weight: 500;
font-size: 34px; font-size: 34px;
color: #ffffff; color: #ffffff;
} }
} }
.num { .num {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
div { div {
font-weight: 500; font-weight: 500;
font-size: 34px; font-size: 34px;
color: #ffffff; color: #ffffff;
span { span {
width: 200px; width: 200px;
height: 200px; height: 200px;
@ -797,6 +601,7 @@
} }
} }
} }
.data { .data {
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -805,11 +610,13 @@
height: 57vmin; height: 57vmin;
padding: 10px 0; padding: 10px 0;
background-color: rgba(31, 67, 101, 0.8); background-color: rgba(31, 67, 101, 0.8);
.item { .item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 10px;
.data-value { .data-value {
width: 6.5vmin; width: 6.5vmin;
height: 6.5vmin; height: 6.5vmin;
@ -819,18 +626,21 @@
text-align: center; text-align: center;
background: url('@/assets/images/watch/circle-bg.png') no-repeat 0 0/100% 100%; background: url('@/assets/images/watch/circle-bg.png') no-repeat 0 0/100% 100%;
} }
.data-name { .data-name {
font-size: 14px; font-size: 14px;
} }
} }
} }
} }
.car-statistics { .car-statistics {
margin-top: 2px; margin-top: 2px;
width: 100%; width: 100%;
height: 28vmin; height: 28vmin;
padding: 0 10px; padding: 0 10px;
background-color: rgba(6, 30, 72, 0.8); background-color: rgba(6, 30, 72, 0.8);
.title { .title {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
@ -840,6 +650,7 @@
color: #84caff; color: #84caff;
background: url('@/assets/images/watch/title-bg.png') no-repeat 0 0/100% 100%; background: url('@/assets/images/watch/title-bg.png') no-repeat 0 0/100% 100%;
} }
.content { .content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -847,14 +658,18 @@
height: 25vmin; height: 25vmin;
padding: 1%; padding: 1%;
box-sizing: border-box; box-sizing: border-box;
.left { .left {
margin-right: 10px; margin-right: 10px;
.car { .car {
display: flex; display: flex;
margin-bottom: 25px; margin-bottom: 25px;
img { img {
height: 6vmin; height: 6vmin;
} }
.name { .name {
min-width: 22vmin; min-width: 22vmin;
height: 3.5vmin; height: 3.5vmin;
@ -863,10 +678,12 @@
background-color: rgba(31, 61, 84, 0.7); background-color: rgba(31, 61, 84, 0.7);
margin-bottom: 10px; margin-bottom: 10px;
} }
.value { .value {
color: #91bcf3; color: #91bcf3;
font-weight: 600; font-weight: 600;
font-size: 18px; font-size: 18px;
.unit { .unit {
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
@ -875,6 +692,7 @@
} }
} }
} }
.right { .right {
.right-title { .right-title {
width: 19vmin; width: 19vmin;
@ -883,6 +701,7 @@
text-align: center; text-align: center;
background: url('@/assets/images/watch/statistics3.png') no-repeat 0 0/100% 100%; background: url('@/assets/images/watch/statistics3.png') no-repeat 0 0/100% 100%;
} }
#percent-chart { #percent-chart {
width: 60vmin; width: 60vmin;
height: 19vmin; height: 19vmin;
@ -891,5 +710,5 @@
} }
} }
} }
} }
</style> </style>

262
src/views/highScore/dailyMonitoring/test.ts
View File

@ -4,11 +4,15 @@ export const lineLayerData = {
{ {
geometry: { geometry: {
coordinates: [ coordinates: [
[106.548357837707, 29.58680219459827, 3], [106.540, 29.580, 3],
[106.5484601219108, 29.58680682983413, 3], [106.542, 29.581, 3],
[106.5484601219108, 29.58680682983413, 3], [106.544, 29.582, 3],
[106.5485623058675, 29.58681146052703, 3], [106.546, 29.583, 3],
[106.5486644902761, 29.58681609124043, 3], [106.548, 29.584, 3],
[106.550, 29.585, 3],
[106.552, 29.586, 3],
[106.554, 29.587, 3],
[106.556, 29.588, 3]
], ],
type: 'LineString', type: 'LineString',
}, },
@ -16,22 +20,20 @@ export const lineLayerData = {
color: '#ffff00', // 黄色 color: '#ffff00', // 黄色
UserID: 0, UserID: 0,
z: 3, z: 3,
width: 5 // 增加线宽
}, },
type: 'Feature', type: 'Feature',
}, },
{ {
geometry: { geometry: {
coordinates: [ coordinates: [
[106.5486644902761, 29.58681609124043, 3], [106.556, 29.588, 3],
[106.5488177260367, 29.58682303545917, 3], [106.558, 29.589, 3],
[106.5489199317008, 29.5868276671358, 3], [106.560, 29.590, 3],
[106.5490220371176, 29.58683229426947, 3], [106.562, 29.591, 3],
[106.5490730902784, 29.58683460785685, 3], [106.564, 29.592, 3],
[106.5490730902784, 29.58683660785685, 3], [106.566, 29.593, 3],
[106.5490730902784, 29.58683860785685, 3], [106.568, 29.594, 3]
[106.5490730902784, 29.58684060785685, 3],
[106.5490730902784, 29.58684260785685, 3],
], ],
type: 'LineString', type: 'LineString',
}, },
@ -39,49 +41,53 @@ export const lineLayerData = {
color: 'red', color: 'red',
UserID: 0, UserID: 0,
z: 3, z: 3,
width: 5 // 增加线宽
}, },
type: 'Feature', type: 'Feature',
}, },
], ],
}; };
export const lineLayerData1 = { export const lineLayerData1 = {
type: 'FeatureCollection', type: 'FeatureCollection',
features: [ features: [
{ {
geometry: { geometry: {
coordinates: [ coordinates: [
[106.5472909339584, 29.58596744065201, 3], [106.540, 29.595, 3],
[106.5472909339584, 29.58616744065201, 3], [106.545, 29.595, 3],
[106.5472909339584, 29.58636744065201, 3], [106.550, 29.595, 3],
[106.555, 29.595, 3],
[106.560, 29.595, 3],
[106.565, 29.595, 3],
[106.570, 29.595, 3]
], ],
// type: "LineString"
type: 'LineString', type: 'LineString',
}, },
properties: { properties: {
color: '#ffff00', // 黄色 color: '#ffff00', // 黄色
UserID: 0, UserID: 0,
z: 3, z: 3,
width: 5
}, },
type: 'Feature', type: 'Feature',
}, },
{ {
geometry: { geometry: {
coordinates: [ coordinates: [
[106.5472909339584, 29.58636744065201, 3], [106.570, 29.595, 3],
[106.5472909439584, 29.58666744065201, 3], [106.570, 29.590, 3],
[106.5472509439584, 29.58696744065201, 3], [106.570, 29.585, 3],
[106.5472609339584, 29.58726744065201, 3], [106.570, 29.580, 3],
[106.5472909339584, 29.58746744065201, 3], [106.570, 29.575, 3]
[106.5472909339584, 29.58766744065201, 3],
[106.5472909339584, 29.58776744065201, 3],
], ],
// type: "LineString"
type: 'LineString', type: 'LineString',
}, },
properties: { properties: {
color: 'red', color: 'red',
UserID: 0, UserID: 0,
z: 3, z: 3,
width: 5
}, },
type: 'Feature', type: 'Feature',
}, },
@ -94,29 +100,40 @@ export const lineLayerData2 = {
{ {
geometry: { geometry: {
coordinates: [ coordinates: [
[106.5486909339584, 29.58556744065201, 3], [106.545, 29.580, 3],
[106.5484909339584, 29.58596744065201, 3], [106.550, 29.585, 3],
[106.5484909339584, 29.58616744065201, 3], [106.555, 29.590, 3],
[106.5484909339584, 29.58636744065201, 3], [106.560, 29.595, 3],
[106.5484909339584, 29.58666744065201, 3], [106.565, 29.600, 3],
[106.5484909339584, 29.58696744065201, 3], [106.570, 29.605, 3],
[106.5484909339584, 29.58676744065201, 3], [106.575, 29.610, 3]
[106.5484909339584, 29.58686744065201, 3], ],
[106.5484909339584, 29.58696744065201, 3], type: 'LineString',
[106.5484909339584, 29.58706744065201, 3], },
[106.5484909339584, 29.58716744065201, 3], properties: {
[106.5484909339584, 29.58726744065201, 3], color: '#00ff00', // 绿色
[106.5484909339584, 29.58746744065201, 3], UserID: 0,
[106.5484909339584, 29.58756744065201, 3], z: 3,
[106.5484909339584, 29.58766744065201, 3], width: 8 // 更宽的线
[106.5484909339584, 29.58776744065201, 3], },
type: 'Feature',
},
{
geometry: {
coordinates: [
[106.575, 29.610, 3],
[106.570, 29.615, 3],
[106.565, 29.620, 3],
[106.560, 29.625, 3],
[106.555, 29.630, 3]
], ],
// type: "LineString"
type: 'LineString', type: 'LineString',
}, },
properties: { properties: {
color: '#0000ff', // 蓝色
UserID: 0, UserID: 0,
z: 3, z: 3,
width: 8
}, },
type: 'Feature', type: 'Feature',
}, },
@ -127,136 +144,134 @@ export const pointData = {
type: 'FeatureCollection', type: 'FeatureCollection',
features: [ features: [
{ {
w: 29.58596744065201, w: 29.54702303545917,
t: 24.6, t: 24.6,
l: 11, l: 11,
m: 'G234', m: 'G234',
j: 106.5484909339584, j: 106.6812177260367,
h: '59838', h: '59838',
backgoundColor: 'red', backgoundColor: 'red',
}, },
{ {
w: 29.58596744065201, w: 29.60702303545917,
t: 24.6, t: 24.6,
l: 11, l: 11,
m: 'G241', m: 'G234',
j: 106.5472909339584, j: 106.6812177260367,
h: '59838', h: '59838',
backgoundColor: 'red', backgoundColor: 'red',
}, },
{ {
w: 29.58798044065201, w: 29.60702303545917,
t: 24.6, t: 24.6,
l: 11, l: 11,
m: 'G241', m: 'G234',
j: 106.5472909339584, j: 106.6312177260367,
h: '59838', h: '59838',
backgoundColor: 'red', backgoundColor: 'red',
}, },
{ {
w: 29.58648044065201, w: 29.65702303545917,
t: 24.6, t: 24.6,
l: 11, l: 11,
m: 'G234', m: 'G234',
j: 106.5468909339584, j: 106.6022177260367,
h: '59838', h: '59838',
backgoundColor: 'red', backgoundColor: 'red',
}, },
{ {
w: 29.58728044065201, w: 29.65702303545917,
t: 24.6, t: 24.6,
l: 11, l: 11,
m: 'G234', m: 'G234',
j: 106.5478909339584, j: 106.5622177260367,
h: '59838', h: '59838',
backgoundColor: 'red', backgoundColor: 'red',
}, },
{ {
w: 29.58768044065201, w: 29.63702303545917,
t: 24.6, t: 24.6,
l: 11, l: 11,
m: 'G234', m: 'G234',
j: 106.5479909339584, j: 106.5822177260367,
h: '59838', h: '59838',
backgoundColor: 'red', backgoundColor: 'red',
}, },
{ {
w: 29.58608044065201, w: 29.58702303545917,
t: 24.6, t: 24.6,
l: 11, l: 11,
m: 'G234', m: 'G234',
j: 106.5490909339584, j: 106.6022177260367,
h: '59838', h: '59838',
backgoundColor: 'red', backgoundColor: 'red',
}, },
{ {
w: 29.58668044065201, w: 29.55702303545917,
t: 24.6, t: 24.6,
l: 11, l: 11,
m: 'G234', m: 'G234',
j: 106.5489909339584, j: 106.6022177260367,
h: '59838', h: '59838',
backgoundColor: 'red', backgoundColor: 'red',
}, },
{ {
w: 29.58650044065201, w: 29.65702303545917,
t: 24.6, t: 24.6,
l: 11, l: 11,
m: 'x456', m: 'G234',
j: 106.5476909339584, j: 106.4822177260367,
h: '59838', h: '59838',
backgoundColor: 'skyblue', backgoundColor: 'red',
}, },
{ {
w: 29.58682044065201, w: 29.62702303545917,
t: 24.6, t: 24.6,
l: 11, l: 11,
m: 'x456', m: 'x456',
j: 106.5480909339584, j: 106.5222177260367,
h: '59838', h: '59838',
backgoundColor: 'skyblue', backgoundColor: 'skyblue',
}, },
{ {
w: 29.58742044065201, //上下，大是越上 w: 29.60702303545917,
t: 24.6, t: 24.6,
l: 11, l: 11,
m: 'x456', m: 'x456',
j: 106.5486909339584, //左右，大是往右偏 j: 106.5822177260367,
h: '59838', h: '59838',
backgoundColor: 'skyblue', backgoundColor: 'skyblue',
}, },
{ {
w: 29.58672044065201, w: 29.62702303545917,
t: 24.6, t: 24.6,
l: 11, l: 11,
m: 'x456', m: 'x456',
j: 106.5494909339584, j: 106.6222177260367,
h: '59838', h: '59838',
backgoundColor: 'skyblue', backgoundColor: 'skyblue',
}, },
{ {
w: 29.58582044065201, w: 29.56702303545917,
t: 24.6, t: 24.6,
l: 11, l: 11,
m: 'x456', m: 'x456',
j: 106.5492909339584, j: 106.5622177260367,
h: '59838', h: '59838',
backgoundColor: 'skyblue', backgoundColor: 'skyblue',
}, },
{ {
w: 29.58722044065201, w: 29.56702303545917,
t: 24.6, t: 24.6,
l: 11, l: 11,
m: 'x456', m: 'x456',
j: 106.5498909339584, j: 106.5622177260367,
h: '59838', h: '59838',
backgoundColor: 'skyblue', backgoundColor: 'skyblue',
}, },
{ {
w: 29.58742044065201, w: 29.53742044065201,
t: 24.6, t: 24.6,
l: 11, l: 11,
m: 'x456', m: 'x456',
@ -265,83 +280,74 @@ export const pointData = {
backgoundColor: 'skyblue', backgoundColor: 'skyblue',
}, },
{ {
w: 29.58742044065201, w: 29.59702303545917,
t: 24.6,
l: 11,
m: 'S234',
j: 106.55072909339584,
h: '59838',
backgoundColor: 'yellow',
},
{
w: 29.58762044065201,
t: 24.6, t: 24.6,
l: 11, l: 11,
m: 'S234', m: 'x456',
j: 106.55122909339584, j: 106.5022177260367,
h: '59838', h: '59838',
backgoundColor: 'yellow', backgoundColor: 'skyblue',
}, },
{ {
w: 29.58662044065201, w: 29.57702303545917,
t: 24.6, t: 24.6,
l: 11, l: 11,
m: 'S234', m: 'x456',
j: 106.55122909339584, j: 106.4822177260367,
h: '59838', h: '59838',
backgoundColor: 'yellow', backgoundColor: 'skyblue',
}, },
{ {
w: 29.58682044065201, w: 29.62702303545917,
t: 24.6, t: 24.6,
l: 11, l: 11,
m: 'S234', m: 'S234',
j: 106.5498909339584, j: 106.4822177260367,
h: '59838', h: '59838',
backgoundColor: 'yellow', backgoundColor: 'yellow',
}, },
{ {
w: 29.58662044065201, w: 29.60702303545917,
t: 24.6, t: 24.6,
l: 11, l: 11,
m: 'S234', m: 'S234',
j: 106.5496909339584, j: 106.462177260367,
h: '59838', h: '59838',
backgoundColor: 'yellow', backgoundColor: 'yellow',
}, },
{ {
w: 29.58762044065201, w: 29.54702303545917,
t: 24.6, t: 24.6,
l: 11, l: 11,
m: 'S234', m: 'S234',
j: 106.5498909339584, j: 106.462177260367,
h: '59838', h: '59838',
backgoundColor: 'yellow', backgoundColor: 'yellow',
}, },
{ {
w: 29.58792044065201, w: 29.52702303545917,
t: 24.6, t: 24.6,
l: 11, l: 11,
m: 'S234', m: 'S234',
j: 106.5496909339584, j: 106.442177260367,
h: '59838', h: '59838',
backgoundColor: 'yellow', backgoundColor: 'yellow',
}, },
{ {
w: 29.58792044065201, w: 29.56702303545917,
t: 24.6, t: 24.6,
l: 11, l: 11,
m: 'S234', m: 'S234',
j: 106.5500909339584, j: 106.522177260367,
h: '59838', h: '59838',
backgoundColor: 'yellow', backgoundColor: 'yellow',
}, },
{ {
w: 29.58792044065201, w: 29.56702303545917,
t: 24.6, t: 24.6,
l: 11, l: 11,
m: 'S234', m: 'S234',
j: 106.5480909339584, j: 106.542177260367,
h: '59838', h: '59838',
backgoundColor: 'yellow', backgoundColor: 'yellow',
}, },
@ -620,46 +626,54 @@ export const chargeAddLayer4 = [
export const dailyAddLayer1 = [ export const dailyAddLayer1 = [
{ {
lng: 106.5509177260367, // 中心点经度 lng: 106.5509177260367,
lat: 29.58742303545917, // 中心点纬度 lat: 29.62742303545917,
},
{
lng: 106.4309177260367,
lat: 29.63942303545917,
}, },
]; ];
export const dailyAddLayer2 = [ export const dailyAddLayer2 = [
{ {
lng: 106.5509177260367, // 中心点经度 lng: 106.6089177260367,
lat: 29.58622303545917, // 中心点纬度 lat: 29.52922303545917,
}, },
{ {
lng: 106.5509177260367, // 中心点经度 lng: 106.6689177260367,
lat: 29.58622303545917, // 中心点纬度 lat: 29.51522303545917,
},
{
lng: 106.4889177260367,
lat: 29.53922303545917,
}, },
]; ];
//车辆 //车辆
export const dailyAddLayer3 = [ export const dailyAddLayer3 = [
{ {
lng: 106.5509177260367, // 中心点经度 lng: 106.6509177260367,
lat: 29.58712303545917, // 中心点纬度 lat: 29.58712303545917,
}, },
{ {
lng: 106.5469177260367, // 中心点经度 lng: 106.4069177260367,
lat: 29.58712303545917, // 中心点纬度 lat: 29.57712303545917,
}, },
{ {
lng: 106.5469177260367, // 中心点经度 lng: 106.4269177260367,
lat: 29.58602303545917, // 中心点纬度 lat: 29.50712303545917,
}, },
]; ];
//应急设施 //应急设施
export const dailyAddLayer4 = [ export const dailyAddLayer4 = [
{ {
lng: 106.5512177260367, // 中心点经度 lng: 106.7012177260367,
lat: 29.58702303545917, // 中心点纬度 lat: 29.57702303545917,
}, },
{ {
lng: 106.5505177260367, // 中心点经度 lng: 106.6312177260367,
lat: 29.58682303545917, // 中心点纬度 lat: 29.55702303545917,
}, },
]; ];

Write Preview
Loading…
Cancel
Save