Compare commits
2 Commits
66e0b31c86
...
98c00cd0fd
| Author | SHA1 | Date |
|---|---|---|
userName
|
98c00cd0fd | |
|
userName
|
4378557ef3 |
|
|
@ -18,11 +18,11 @@ export const option = {
|
|||
navsCheckColor: '#0D2822',
|
||||
navsCheckBackground: '#34FFE0',
|
||||
navsArr: [
|
||||
{ label: '待研判', value: '0'},
|
||||
{ label: '待签收', value: '13'},
|
||||
{ label: '待处置', value: '0'},
|
||||
{ label: '待审核', value: '0'},
|
||||
{ label: '已完成', value: '99+'}
|
||||
{ label: '待研判', value: '0', sql: '' },
|
||||
{ label: '待签收', value: '13', sql: '' },
|
||||
{ label: '待处置', value: '0', sql: '' },
|
||||
{ label: '待审核', value: '0', sql: '' },
|
||||
{ label: '已完成', value: '99+', sql: '' }
|
||||
],
|
||||
sectionDatas:[
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { chartInitConfig,requestSqlConfig } from '@/settings/designSetting'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { NowPositionConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
dataset: '',
|
||||
borderColor: '#457453',
|
||||
socketSrc: 'ws://111.36.45.20:18088/uav/ws/v1/admin/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjdXJyZW50VXNlciI6IlRLNHp5OTMyME1tS3BzdE9zVkpmdDlXanlKMjhBSThKVnV2OU55UjU1Vmw3WWptVUFZUCsveVV3eU1PaUE1VEc5Ykt1bGNhTnNsc0l6dkQ5M0ZkWGhxNlYxVm44L0dUL2NNQ2JhYjhvV0hwQ3BmTGRyNk5IQnorcytGOXM4YmNVZy9CSDlPRGlHck9ZSDhwbkpIclNjM0pIdEZFa09iSTAyVjY4RFdwNG8wRWZqYjE5YjJVQTE2WGpmWEhZUWZvNVpmMnNERzlxMnNsQ1R5VmJVUlBaMTJ1M25EWGI2TnNnODRHblM1ZVdYZTNHaFJ6VmZkYWdSMGMraG9lWG9UVTFLei9yZU1JUzlvZ3Zyb0ZWLzNpdUF6c1B1MVlVcm9RT3RheDNRdlF4WllXdGM4RFhoYlFLRFFiVXlBMGtZR2JHajFKQ3B0VFI0Y1B0aGhlb3N2dnhQTnV1ZjcyWmFUbDR3amgzUENMZVdrNThTc0Z3SjFJNnJGa3lGYWlTVlpUUSs0RzhIV2phRlIzUG9DSkk0QzAvRnM1bU16YTR4dldzZlUyZTgvKzhzSE1iUUtOZWlacjJ0cUxoTlVvN0Y5OURrbEJHbzZMcmJsMXR1bVFHdlN1bGMxL1RoaEZ3WUx0cS8zRnVybTNuMEJQS21JT2dKRGlPUmtYR1lObE4wUy9DeU1qVlRpNzJWOHoxdHhDNWl5VzlmM29od0NjazZJaVhSK2lZeXJ6N2I3YWpkN3ZZUkdCNU8wRmxaOGJRaTZXVnM1STgzSDMwREcwNEtTdWFybnJpNncvNm83NkJrTW1RQnlwbzI3NnlUMnJmcnFlZ0xwM0I0VGIvQkx1cGpHMUtjL0pUNlg5bVlUcTlIZVQxU09IQmdkUGs3RzgyN3BPL3NPTTFqZkxFWE5VSjluZjRJQVFHQkJMVnFmMjVBYWVtVkNVN0ljaEIvYWh0WVVJdkZJZDBXdHE1aXdNbk9PZXFhNTFmTG5RSTIwN0x0c0ZMMWd2d2daUFBsQTdtbkpSMUQrMzBBbDV3UXFTai9WNXhRYXVXTkQ1Z0FDV0cxcGZXZFFoTkM1bnM4djQ4a2pkdmlNcmVTRHNTekUzU3ZSVjFLeDk5SnpJa1B1UmNQZXR3cVVWbGk1dU9vWlBJSXRWbjc1UjlzdHpneHNCeW1JdUhjSDJsWmdLSkhhUmpTWlE4cEQxRlIzUzZZeGtSWDlIa3lvUHE4S3lZNktGckREUW9OanJJVTEvQTg1M0cydyswaEl0QXdOQWZNaXdBbUMvbE1zLytBRk04cm5UcFVCdU9LYnNTSnBxanAzT1k2TitQZVFSZ3pxN1VJcnVlWFBMRXVjQkh4MXRpZkdMZXcvbENGa1pVMDAxNlBWcTNFMDl4TTZha0xLRExTUVcyU1gzZVRxcitVaExkWllvM1RqZEM1NVJ5OW1lZDZTSFNPbWxwcURSaTBvRnZyVXRyL0N4UExwaG1HK0RKd2oyazVHdFFkanJoNkF5RGlpWm5xejFNREFlczZvVkVhUW81MFpkSE5FRU16a25xcUZCWWY3eU5PTVFvOVg4dTdIV2dLZWFndGdjc21DZ1pqVmIrekFsTWpLMk1uSzZGQTY4TlYxV3kxZU41eHp4ZUpySnFoOFBHVHJrMUdPUmQzTjJFdTZOTVdXSzVPVDdWNmNQZzFtMm1WNFNIdnphSnBCYUp0dCs5dFhibkdCNThHOEFUV0g2Um5WRVFWeW1UTGhHK2I3UmE5Q0ZkaWMzWm0yams3K0VROU5LRWxRVWd0UkxhTFJJUnlvZXUzOXhnUWt2dVMvOXA2NHJzc1diUHFoRGw2OHlzK0luRFBIaEVKcFkxRk16aDlWcmZxY290OFJwMlNqbXI2clVOM25sVGpLYzRKR08yakZOTVB4ZXpzaFdsdHpKVjhZeGxJZ0tnZEtPT0kySm8yUTVhbkYxSTRtN01jQ2ZQIiwiZXhwIjoxNzQyNzg0MjU1fQ.p5g59OlxRrof3q-mRXErhyP21f3wkIpeSz3FNaJUGR8',
|
||||
mapOptions:{
|
||||
"scene": {
|
||||
"center": {"lat":35.362625,"lng":118.033886,"alt":8306.3,"heading":360,"pitch":-45},
|
||||
"center": {"lat":35.362625,"lng":118.033886,"alt":22306.3,"heading":360,"pitch":-70},
|
||||
"scene3DOnly": false,
|
||||
"shadows": false,
|
||||
"removeDblClick": true,
|
||||
|
|
@ -125,6 +125,4 @@ export default class Config extends PublicConfigClass implements CreateComponent
|
|||
public attr = { ...chartInitConfig, w: 343, h: 224, zIndex: -1 }
|
||||
public chartConfig = cloneDeep(NowPositionConfig)
|
||||
public option = cloneDeep(option)
|
||||
public request = { ...requestSqlConfig, requestSQLContent: { sql: 'select * from ' }, }
|
||||
public filter = "return res.result;"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,15 @@
|
|||
<template>
|
||||
<!-- <CollapseItem name="内容" :expanded="true">
|
||||
<SettingItemBox name="socket" :alone="true">
|
||||
<n-input
|
||||
size="small"
|
||||
v-model:value="optionData.socketSrc"
|
||||
:minlength="1"
|
||||
type="text"
|
||||
placeholder="请输入"
|
||||
/>
|
||||
</SettingItemBox>
|
||||
</CollapseItem> -->
|
||||
<SettingItemBox name="样式">
|
||||
<SettingItem name="边框颜色">
|
||||
<n-color-picker
|
||||
|
|
|
|||
|
|
@ -21,27 +21,24 @@ const { w, h } = toRefs(props.chartConfig.attr)
|
|||
const {
|
||||
borderColor,
|
||||
mapOptions,
|
||||
dataset
|
||||
} = toRefs(props.chartConfig.option)
|
||||
|
||||
let map: mars3d.Map; // 地图对象
|
||||
const isFirstLoad = ref(true);
|
||||
const vChartRef = ref<HTMLElement>()
|
||||
let graphicLayer;
|
||||
const initMap = (newData: any) => {
|
||||
// 第一次加载
|
||||
if(isFirstLoad.value){
|
||||
map = new mars3d.Map(vChartRef.value, newData);
|
||||
}else{ // 之后更新
|
||||
// map.setOptions(newData);
|
||||
map.setSceneOptions(newData.scene);
|
||||
}
|
||||
isFirstLoad.value = false;
|
||||
graphicLayer = new mars3d.layer.GraphicLayer();
|
||||
map.addLayer(graphicLayer)
|
||||
}
|
||||
|
||||
|
||||
onMounted(()=>{
|
||||
|
||||
})
|
||||
const stopWatch = watch(
|
||||
() => props.chartConfig.option.mapOptions,
|
||||
async option => {
|
||||
|
|
@ -55,16 +52,89 @@ const stopWatch = watch(
|
|||
}
|
||||
)
|
||||
|
||||
// 预览
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
stopWatch()
|
||||
let arr = newData || [116.300467, 39.907761]
|
||||
map.flyTo({
|
||||
center: arr, // 中心点
|
||||
zoom: 18, // 缩放比例
|
||||
pitch: 0 // 倾斜度
|
||||
})
|
||||
})
|
||||
const myWebSocket = ref();
|
||||
const lockReconnect = ref(false);
|
||||
const myWebSocketTimer = ref();
|
||||
|
||||
function websocketReconnect() {
|
||||
if (lockReconnect.value) {
|
||||
// 是否已经执行重连
|
||||
return;
|
||||
}
|
||||
lockReconnect.value = true;
|
||||
// 没连接上会一直重连，设置延迟避免请求过多
|
||||
let tt;
|
||||
tt && clearTimeout(tt);
|
||||
|
||||
tt = setTimeout(function () {
|
||||
initWebSocket();
|
||||
lockReconnect.value = false;
|
||||
}, 120000);
|
||||
}
|
||||
function initWebSocket() {
|
||||
if ('WebSocket' in window) {
|
||||
myWebSocket.value = new WebSocket('ws://111.36.45.20:18088/uav/ws/v1/admin/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjdXJyZW50VXNlciI6IlRLNHp5OTMyME1tS3BzdE9zVkpmdDlXanlKMjhBSThKVnV2OU55UjU1Vmw3WWptVUFZUCsveVV3eU1PaUE1VEc5Ykt1bGNhTnNsc0l6dkQ5M0ZkWGhxNlYxVm44L0dUL2NNQ2JhYjhvV0hwQ3BmTGRyNk5IQnorcytGOXM4YmNVZy9CSDlPRGlHck9ZSDhwbkpIclNjM0pIdEZFa09iSTAyVjY4RFdwNG8wRWZqYjE5YjJVQTE2WGpmWEhZUWZvNVpmMnNERzlxMnNsQ1R5VmJVUlBaMTJ1M25EWGI2TnNnODRHblM1ZVdYZTNHaFJ6VmZkYWdSMGMraG9lWG9UVTFLei9yZU1JUzlvZ3Zyb0ZWLzNpdUF6c1B1MVlVcm9RT3RheDNRdlF4WllXdGM4RFhoYlFLRFFiVXlBMGtZR2JHajFKQ3B0VFI0Y1B0aGhlb3N2dnhQTnV1ZjcyWmFUbDR3amgzUENMZVdrNThTc0Z3SjFJNnJGa3lGYWlTVlpUUSs0RzhIV2phRlIzUG9DSkk0QzAvRnM1bU16YTR4dldzZlUyZTgvKzhzSE1iUUtOZWlacjJ0cUxoTlVvN0Y5OURrbEJHbzZMcmJsMXR1bVFHdlN1bGMxL1RoaEZ3WUx0cS8zRnVybTNuMEJQS21JT2dKRGlPUmtYR1lObE4wUy9DeU1qVlRpNzJWOHoxdHhDNWl5VzlmM29od0NjazZJaVhSK2lZeXJ6N2I3YWpkN3ZZUkdCNU8wRmxaOGJRaTZXVnM1STgzSDMwREcwNEtTdWFybnJpNncvNm83NkJrTW1RQnlwbzI3NnlUMnJmcnFlZ0xwM0I0VGIvQkx1cGpHMUtjL0pUNlg5bVlUcTlIZVQxU09IQmdkUGs3RzgyN3BPL3NPTTFqZkxFWE5VSjluZjRJQVFHQkJMVnFmMjVBYWVtVkNVN0ljaEIvYWh0WVVJdkZJZDBXdHE1aXdNbk9PZXFhNTFmTG5RSTIwN0x0c0ZMMWd2d2daUFBsQTdtbkpSMUQrMzBBbDV3UXFTai9WNXhRYXVXTkQ1Z0FDV0cxcGZXZFFoTkM1bnM4djQ4a2pkdmlNcmVTRHNTekUzU3ZSVjFLeDk5SnpJa1B1UmNQZXR3cVVWbGk1dU9vWlBJSXRWbjc1UjlzdHpneHNCeW1JdUhjSDJsWmdLSkhhUmpTWlE4cEQxRlIzUzZZeGtSWDlIa3lvUHE4S3lZNktGckREUW9OanJJVTEvQTg1M0cydyswaEl0QXdOQWZNaXdBbUMvbE1zLytBRk04cm5UcFVCdU9LYnNTSnBxanAzT1k2TitQZVFSZ3pxN1VJcnVlWFBMRXVjQkh4MXRpZkdMZXcvbENGa1pVMDAxNlBWcTNFMDl4TTZha0xLRExTUVcyU1gzZVRxcitVaExkWllvM1RqZEM1NVJ5OW1lZDZTSFNPbWxwcURSaTBvRnZyVXRyL0N4UExwaG1HK0RKd2oyazVHdFFkanJoNkF5RGlpWm5xejFNREFlczZvVkVhUW81MFpkSE5FRU16a25xcUZCWWY3eU5PTVFvOVg4dTdIV2dLZWFndGdjc21DZ1pqVmIrekFsTWpLMk1uSzZGQTY4TlYxV3kxZU41eHp4ZUpySnFoOFBHVHJrMUdPUmQzTjJFdTZOTVdXSzVPVDdWNmNQZzFtMm1WNFNIdnphSnBCYUp0dCs5dFhibkdCNThHOEFUV0g2Um5WRVFWeW1UTGhHK2I3UmE5Q0ZkaWMzWm0yams3K0VROU5LRWxRVWd0UkxhTFJJUnlvZXUzOXhnUWt2dVMvOXA2NHJzc1diUHFoRGw2OHlzK0luRFBIaEVKcFkxRk16aDlWcmZxY290OFJwMlNqbXI2clVOM25sVGpLYzRKR08yakZOTVB4ZXpzaFdsdHpKVjhZeGxJZ0tnZEtPT0kySm8yUTVhbkYxSTRtN01jQ2ZQIiwiZXhwIjoxNzQyNzg0MjU1fQ.p5g59OlxRrof3q-mRXErhyP21f3wkIpeSz3FNaJUGR8');
|
||||
myWebSocket.value.onopen = function () {
|
||||
if (myWebSocketTimer.value) {
|
||||
clearInterval(myWebSocketTimer.value);
|
||||
}
|
||||
webSocketHeart();
|
||||
};
|
||||
|
||||
myWebSocket.value.onmessage = function (evt) {
|
||||
const data = JSON.parse(evt.data);
|
||||
createListeningEvent(data);
|
||||
};
|
||||
myWebSocket.value.onclose = function () {
|
||||
// 如果断开则重新连接
|
||||
websocketReconnect();
|
||||
};
|
||||
} else {
|
||||
alert('您的浏览器不支持 WebSocket!');
|
||||
}
|
||||
}
|
||||
|
||||
function webSocketHeart() {
|
||||
//长连接心跳检测
|
||||
let total = 1;
|
||||
myWebSocketTimer.value = setInterval(function () {
|
||||
if (myWebSocket.value) {
|
||||
total = total + 1;
|
||||
}
|
||||
}, 30000);
|
||||
}
|
||||
const createListeningEvent = (value) => {
|
||||
if(value.type == 1 && value.isUavOn == 1){
|
||||
handlerAddEntity(value.data)
|
||||
}
|
||||
};
|
||||
// 添加Entity
|
||||
const handlerAddEntity = (data) => {
|
||||
let graphicOptions = {
|
||||
id: data.siteId,
|
||||
position: [parseFloat(data.longitude), parseFloat(data.latitude)],
|
||||
style: {
|
||||
image: '/src/assets/images/chart/equipment/wurenji.png',
|
||||
clampToGround: true,
|
||||
scale: 0.5,
|
||||
}
|
||||
}
|
||||
|
||||
let graphic = graphicLayer.getGraphicById(data.siteId);
|
||||
|
||||
if(graphic){
|
||||
graphicLayer.removeGraphic(graphic);
|
||||
graphic = new mars3d.graphic.BillboardEntity(graphicOptions);
|
||||
graphicLayer.addGraphic(graphic);
|
||||
}else{
|
||||
graphic = new mars3d.graphic.BillboardEntity(graphicOptions);
|
||||
graphicLayer.addGraphic(graphic);
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
stopWatch();
|
||||
initWebSocket();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -37,8 +37,8 @@ export const option = {
|
|||
desc: '2024.12.24 13:08:07'
|
||||
},
|
||||
{
|
||||
title: '暸望塔',
|
||||
desc: '费县瞭望塔'
|
||||
title: '线索来源',
|
||||
desc: '无人机上报'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="go-title-03">
|
||||
<div class="bannerbox">
|
||||
<a-carousel autoplay dots-class="slick-dots slick-thumb">
|
||||
<div v-for="item in bannerArr">
|
||||
<div v-for="item in bannerArr" @click="bannerClick(item)">
|
||||
<img :src="item" />
|
||||
</div>
|
||||
</a-carousel>
|
||||
|
|
@ -17,10 +17,13 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="bigImgbox" v-if="bigImgVisible" @click="hideClick">
|
||||
<img class="bigImg" :src="bigImgSrc" />
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue';
|
||||
import { PropType, toRefs, ref } from 'vue';
|
||||
import { CreateComponentType } from '@/packages/index.d';
|
||||
import { useChartDataFetch } from '@/hooks';
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
|
||||
|
|
@ -43,6 +46,16 @@ const {
|
|||
dataset
|
||||
} = toRefs(props.chartConfig.option)
|
||||
|
||||
const bigImgVisible = ref(false)
|
||||
const bigImgSrc = ref()
|
||||
const bannerClick = (item) =>{
|
||||
console.log('iii', item);
|
||||
bigImgSrc.value = item;
|
||||
// bigImgVisible.value = true
|
||||
}
|
||||
const hideClick = ()=>{
|
||||
bigImgVisible.value = false
|
||||
}
|
||||
// 数据callback处理（预览时触发）
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
||||
props.chartConfig.option.dataset = resData;
|
||||
|
|
@ -143,4 +156,18 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
|
|||
}
|
||||
|
||||
}
|
||||
.bigImgbox{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.3);
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.bigImg{
|
||||
width: 70%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue