|
|
|
@ -10,7 +10,7 @@ |
|
|
|
</div> |
|
|
|
<div class="watch-mode" v-show="chooseBot != 'tunnel'"> |
|
|
|
<div class="watch-left"> |
|
|
|
<component :is="componentLeft[chooseBot]" /> |
|
|
|
<component :is="componentLeft[chooseBot as ComponentKey]" /> |
|
|
|
</div> |
|
|
|
<div class="watch-center"> |
|
|
|
<div class="map-select" v-show="chooseBot != 'surveillance'"> |
|
|
|
@ -62,8 +62,8 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="watch-right" style="padding-left: 10%; box-sizing: border-box; padding-top: 1%"> |
|
|
|
<component :is="componentRight[chooseBot]" /> |
|
|
|
<div class="watch-right" style="padding-left: 8%; box-sizing: border-box; padding-top: 1%"> |
|
|
|
<component :is="componentRight[chooseBot as ComponentKey]" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
@ -110,8 +110,6 @@ import tunnel from '../tunnelMonitoring/container/index.vue'; |
|
|
|
import bottom from './container/bottom.vue'; |
|
|
|
import legend1 from '../../../components/Legend/index.vue'; |
|
|
|
import { |
|
|
|
pointData, |
|
|
|
responseData, |
|
|
|
chargeAddLayer1, |
|
|
|
chargeAddLayer2, |
|
|
|
chargeAddLayer3, |
|
|
|
@ -121,15 +119,25 @@ import { |
|
|
|
dailyAddLayer3, |
|
|
|
dailyAddLayer4, |
|
|
|
} from './test'; |
|
|
|
import { |
|
|
|
LayerConfig |
|
|
|
} from '@/components/MapContainer/index.vue'; |
|
|
|
const scene = ref(); |
|
|
|
const chooseBot = ref('monitoring'); |
|
|
|
const visible = ref<boolean>(false); |
|
|
|
const imageLayerRef = ref(null); |
|
|
|
const isImageAdded = ref<boolean>(false); // 标记图片资源是否已添加 |
|
|
|
// const isImageAdded = ref<boolean>(false); // 标记图片资源是否已添加 |
|
|
|
const showMapInfo = ref<boolean>(false); |
|
|
|
const time = ref(''); |
|
|
|
let timer; |
|
|
|
const action = ref<'map' | 'watch'>('map'); |
|
|
|
// const action = ref<'map' | 'watch'>('map'); |
|
|
|
type ComponentKey = |
|
|
|
| 'response' |
|
|
|
| 'monitoring' |
|
|
|
| 'charge' |
|
|
|
| 'holidays' |
|
|
|
| 'dataChart' |
|
|
|
| 'surveillance'; |
|
|
|
const componentLeft = { |
|
|
|
response: resPonseLeftList, |
|
|
|
monitoring: LeftList, |
|
|
|
@ -146,9 +154,9 @@ const componentRight = { |
|
|
|
dataChart: dataVisualizationrightList, |
|
|
|
surveillance: surveillancerightList, |
|
|
|
}; |
|
|
|
const getImageUrl = imagePath => { |
|
|
|
return new URL(`/src/${imagePath}`, import.meta.url).href; |
|
|
|
}; |
|
|
|
// const getImageUrl = imagePath => { |
|
|
|
// return new URL(`/src/${imagePath}`, import.meta.url).href; |
|
|
|
// }; |
|
|
|
function getDate() { |
|
|
|
const weeks = ['天', '一', '二', '三', '四', '五', '六']; |
|
|
|
const now = new Date(); |
|
|
|
@ -185,7 +193,7 @@ const changeModal = () => { |
|
|
|
visible.value = false; |
|
|
|
}; |
|
|
|
|
|
|
|
const handleshowModal = (e) => { |
|
|
|
const handleshowModal = (e: boolean) => { |
|
|
|
visible.value = e; |
|
|
|
}; |
|
|
|
const mapRef = ref(); |
|
|
|
@ -194,14 +202,13 @@ const handleLayerToggle = ({ layerName, show }: { layerName: string; show: boole |
|
|
|
}; |
|
|
|
|
|
|
|
// 底部导航栏 |
|
|
|
const handleIconSelected = (id) => { |
|
|
|
const handleIconSelected = (id:string) => { |
|
|
|
changeModal(); |
|
|
|
chooseBot.value = id; |
|
|
|
console.log('Received ID:', chooseBot); |
|
|
|
}; |
|
|
|
|
|
|
|
// 事件图层配置 |
|
|
|
const warnLayerConfig = { |
|
|
|
const warnLayerConfig: LayerConfig = { |
|
|
|
id: 'warn-layer', |
|
|
|
type: 'warn', |
|
|
|
data: dailyAddLayer1, |
|
|
|
@ -209,10 +216,10 @@ const warnLayerConfig = { |
|
|
|
size: 120, |
|
|
|
zIndex: 2, |
|
|
|
}, |
|
|
|
}; |
|
|
|
} as const; |
|
|
|
|
|
|
|
// 设备图层配置 |
|
|
|
const equipmentLayerConfig = { |
|
|
|
const equipmentLayerConfig: LayerConfig = { |
|
|
|
id: 'equipment-layer', |
|
|
|
type: 'equipment', |
|
|
|
data: dailyAddLayer2, |
|
|
|
@ -223,7 +230,7 @@ const equipmentLayerConfig = { |
|
|
|
}; |
|
|
|
|
|
|
|
// 车辆图层配置 |
|
|
|
const carLayerConfig = { |
|
|
|
const carLayerConfig: LayerConfig = { |
|
|
|
id: 'car-layer', |
|
|
|
type: 'car', |
|
|
|
data: dailyAddLayer3, |
|
|
|
@ -234,7 +241,7 @@ const carLayerConfig = { |
|
|
|
}; |
|
|
|
|
|
|
|
// 应急措施图层配置 |
|
|
|
const emergencyLayerConfig = { |
|
|
|
const emergencyLayerConfig: LayerConfig = { |
|
|
|
id: 'emergency-layer', |
|
|
|
type: 'emergency', |
|
|
|
data: dailyAddLayer4, |
|
|
|
@ -336,39 +343,39 @@ const chargeAddLayer = { |
|
|
|
}; |
|
|
|
|
|
|
|
//应急处理图层 |
|
|
|
const responseAdddLayer = () => { |
|
|
|
if (!isImageAdded.value) { |
|
|
|
scene.value.addImage('response', new URL('@/assets/highScore/record/event.png', import.meta.url).href); |
|
|
|
isImageAdded.value = true; |
|
|
|
} |
|
|
|
if (imageLayerRef.value) { |
|
|
|
scene.value.removeLayer(imageLayerRef.value); |
|
|
|
} |
|
|
|
|
|
|
|
imageLayerRef.value = new PointLayer({ |
|
|
|
name: 'responseLayer', |
|
|
|
zIndex: 1, |
|
|
|
}) |
|
|
|
.source(responseData, { |
|
|
|
parser: { |
|
|
|
type: 'json', |
|
|
|
x: 'lng', |
|
|
|
y: 'lat', |
|
|
|
}, |
|
|
|
}) |
|
|
|
.shape('response') |
|
|
|
.size(80) |
|
|
|
.style({ |
|
|
|
offsets: [0, 20], |
|
|
|
raisingHeight: 10, |
|
|
|
}) |
|
|
|
.on('click', (e) => { |
|
|
|
console.log('事件图层', e); |
|
|
|
showModal(); |
|
|
|
}); |
|
|
|
console.log('2222'); |
|
|
|
scene.value.addLayer(imageLayerRef.value); |
|
|
|
}; |
|
|
|
// const responseAdddLayer = () => { |
|
|
|
// if (!isImageAdded.value) { |
|
|
|
// scene.value.addImage('response', new URL('@/assets/highScore/record/event.png', import.meta.url).href); |
|
|
|
// isImageAdded.value = true; |
|
|
|
// } |
|
|
|
// if (imageLayerRef.value) { |
|
|
|
// scene.value.removeLayer(imageLayerRef.value); |
|
|
|
// } |
|
|
|
|
|
|
|
// imageLayerRef.value = new PointLayer({ |
|
|
|
// name: 'responseLayer', |
|
|
|
// zIndex: 1, |
|
|
|
// }) |
|
|
|
// .source(responseData, { |
|
|
|
// parser: { |
|
|
|
// type: 'json', |
|
|
|
// x: 'lng', |
|
|
|
// y: 'lat', |
|
|
|
// }, |
|
|
|
// }) |
|
|
|
// .shape('response') |
|
|
|
// .size(80) |
|
|
|
// .style({ |
|
|
|
// offsets: [0, 20], |
|
|
|
// raisingHeight: 10, |
|
|
|
// }) |
|
|
|
// .on('click', (e) => { |
|
|
|
// console.log('事件图层', e); |
|
|
|
// showModal(); |
|
|
|
// }); |
|
|
|
// console.log('2222'); |
|
|
|
// scene.value.addLayer(imageLayerRef.value); |
|
|
|
// }; |
|
|
|
|
|
|
|
const removeImageLayer = () => { |
|
|
|
if (imageLayerRef.value) { |
|
|
|
@ -492,7 +499,6 @@ onMounted(() => { |
|
|
|
justify-content: space-evenly; |
|
|
|
align-items: center; |
|
|
|
z-index: 999; |
|
|
|
background: url(/src/assets/coordinated/tcBg1.png) no-repeat 0 0 / 100% 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.control { |
|
|
|
@ -506,7 +512,6 @@ onMounted(() => { |
|
|
|
justify-content: space-evenly; |
|
|
|
align-items: center; |
|
|
|
z-index: 999; |
|
|
|
background: url('@/assets/coordinated/tcBg.png') no-repeat 0 0/100% 100%; |
|
|
|
|
|
|
|
.layer { |
|
|
|
margin: 0 10px; |
|
|
|
@ -623,7 +628,6 @@ onMounted(() => { |
|
|
|
font-weight: 500; |
|
|
|
font-size: 20px; |
|
|
|
text-align: center; |
|
|
|
background: url('@/assets/images/watch/circle-bg.png') no-repeat 0 0/100% 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.data-name { |
|
|
|
@ -647,7 +651,6 @@ onMounted(() => { |
|
|
|
padding: 0 10px; |
|
|
|
font-weight: 700; |
|
|
|
color: #84caff; |
|
|
|
background: url('@/assets/images/watch/title-bg.png') no-repeat 0 0/100% 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
|
