Compare commits
2 Commits
55d735935d
...
7ee0f9d2a5
| Author | SHA1 | Date |
|---|---|---|
 徐景良
|
7ee0f9d2a5 | |
|
徐景良
|
38e3ebf660 |
|
|
@ -27,6 +27,9 @@
|
|||
<!-- 引入青犀插件内容 -->
|
||||
<script type="text/javascript" src="/monitor/monitorQX/EasyPlayer-element.min.js"></script>
|
||||
|
||||
<!-- 引入样式mars3d graphic popup 自定义样式 -->
|
||||
<link rel="stylesheet" href="/mars3d_graphic_style/mars3d_graphic_style.css">
|
||||
|
||||
<style>
|
||||
.mars3d-template-content{
|
||||
background-image:url(/public/map/popup-background.png);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,180 @@
|
|||
/*弹窗红色*/
|
||||
.verify-container{
|
||||
width: 324px;
|
||||
height: 415px;
|
||||
position: absolute;
|
||||
top: -418px;
|
||||
left: -180px;
|
||||
background-image: url(/public/components/Task/taskassign/detail-bg-active.png);
|
||||
background-size: 100% 100%;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.verify-container .title{
|
||||
font-size:16px;
|
||||
width: calc( 100% - 46px);
|
||||
height:30px;
|
||||
color:#fff;
|
||||
border-left: 3px solid rgb(240, 38, 38);
|
||||
margin: 22px 30px;
|
||||
line-height:30px;
|
||||
text-indent:10px;
|
||||
background: linear-gradient(270deg, rgb(39, 20, 16) 0%, rgb(116, 11, 9) 47%, rgb(204, 1, 1) 100%);
|
||||
}
|
||||
.verify-container .close-button{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
right:20px;
|
||||
background-image: url(/public/components/Task/taskassign/close-active.png);
|
||||
background-size:100% 100%;
|
||||
}
|
||||
.verify-container .image-container{
|
||||
width: calc( 100% - 60px);
|
||||
margin:0px auto;
|
||||
height: 154px;
|
||||
overflow:hidden;
|
||||
border: 2px solid rgb(240, 38, 38);
|
||||
}
|
||||
|
||||
.image-container img{
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
.verify-container .description-container{
|
||||
width: calc( 100% - 60px);
|
||||
margin:10px auto;
|
||||
height:160px;
|
||||
color:#fff;
|
||||
overflow-y:auto;
|
||||
|
||||
}
|
||||
|
||||
.verify-container .description-container .description-item{
|
||||
width:100%;
|
||||
min-height:24px;
|
||||
line-height:18px;
|
||||
margin:0px 0px;
|
||||
display:flex;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.verify-container .description-container .description-item .label{
|
||||
min-width:80px;
|
||||
position:relative;
|
||||
text-indent:20px;
|
||||
color:#cfcfcf;
|
||||
}
|
||||
|
||||
.verify-container .description-container .description-item .label::before{
|
||||
content:"";
|
||||
width:4px;
|
||||
height:4px;
|
||||
border-radius: 50%;
|
||||
position:absolute;
|
||||
top:8px;
|
||||
left:0px;
|
||||
background: #C9FFC7;
|
||||
box-shadow: 0px 0px 5px 1px #1FBF4B;
|
||||
}
|
||||
|
||||
.verify-container .description-container .description-item .value{
|
||||
flex:auto;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*弹窗绿色*/
|
||||
.verify-container-over{
|
||||
width: 324px;
|
||||
height: 415px;
|
||||
position: absolute;
|
||||
top: -418px;
|
||||
left: -180px;
|
||||
background-image: url(/public/components/Task/taskassign/detail-bg.png);
|
||||
background-size: 100% 100%;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.verify-container-over .title{
|
||||
font-size:16px;
|
||||
width: calc( 100% - 46px);
|
||||
height:30px;
|
||||
color:#fff;
|
||||
border-left:3px solid #20C24D;
|
||||
margin: 22px 30px;
|
||||
line-height:30px;
|
||||
text-indent:10px;
|
||||
background: linear-gradient( 270deg, #0A261E 0%, #15AF3F 47%, #17B241 100%);
|
||||
}
|
||||
.verify-container-over .close-button{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
right:20px;
|
||||
background-image: url(/public/components/Task/taskassign/close.png);
|
||||
background-size:100% 100%;
|
||||
}
|
||||
.verify-container-over .image-container{
|
||||
width: calc( 100% - 60px);
|
||||
margin:0px auto;
|
||||
height: 154px;
|
||||
overflow:hidden;
|
||||
border: 2px solid #1FBF4B;
|
||||
}
|
||||
|
||||
.image-container img{
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
.verify-container-over .description-container{
|
||||
width: calc( 100% - 60px);
|
||||
margin:10px auto;
|
||||
height:160px;
|
||||
color:#fff;
|
||||
overflow-y:auto;
|
||||
|
||||
}
|
||||
|
||||
.verify-container-over .description-container .description-item{
|
||||
width:100%;
|
||||
min-height:24px;
|
||||
line-height:18px;
|
||||
margin:0px 0px;
|
||||
display:flex;
|
||||
font-size:12px;
|
||||
}
|
||||
|
||||
.verify-container-over .description-container .description-item .label{
|
||||
min-width:80px;
|
||||
position:relative;
|
||||
text-indent:20px;
|
||||
color:#cfcfcf;
|
||||
}
|
||||
|
||||
.verify-container-over .description-container .description-item .label::before{
|
||||
content:"";
|
||||
width:4px;
|
||||
height:4px;
|
||||
border-radius: 50%;
|
||||
position:absolute;
|
||||
top:8px;
|
||||
left:0px;
|
||||
background: #C9FFC7;
|
||||
box-shadow: 0px 0px 5px 1px #1FBF4B;
|
||||
}
|
||||
|
||||
.verify-container-over .description-container .description-item .value{
|
||||
flex:auto;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -80,7 +80,6 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 右侧添加项目 -->
|
||||
|
|
@ -375,6 +374,20 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片预览 -->
|
||||
<!-- 图片预览组 -->
|
||||
<a-image-preview-group :preview="{ visible: imagePreviewVisible,onVisibleChange:onImagePreviewVisibleChange, current: imagePreviewCurrent }"
|
||||
>
|
||||
<a-image
|
||||
v-for="(img, index) in handlerAfterImageList"
|
||||
:key="index"
|
||||
:src="img"
|
||||
style="display:none;"
|
||||
/>
|
||||
</a-image-preview-group>
|
||||
|
||||
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {computed,PropType,toRefs,watch,reactive,ref,onMounted,onUnmounted,createVNode,defineOptions} from 'vue';
|
||||
|
|
@ -547,8 +560,31 @@
|
|||
el.scrollLeft = scrollLeft - walk
|
||||
})
|
||||
}
|
||||
|
||||
// 关闭核查弹窗
|
||||
const clsoeVerifyWindow = () => {
|
||||
windowGraphicLayer ? windowGraphicLayer.clear() : null;
|
||||
}
|
||||
|
||||
// 预览图片
|
||||
const imagePreviewVisible = ref(false);
|
||||
const imagePreviewCurrent = ref(0);
|
||||
|
||||
const previewVerifyImage = () => {
|
||||
imagePreviewVisible.value = true;
|
||||
imagePreviewCurrent.value = 0;
|
||||
}
|
||||
|
||||
const onImagePreviewVisibleChange = () => {
|
||||
imagePreviewVisible.value = false;
|
||||
imagePreviewCurrent.value = 0;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
window.clsoeVerifyWindow = clsoeVerifyWindow;
|
||||
window.previewVerifyImage = previewVerifyImage;
|
||||
|
||||
// 时间线左右滑动
|
||||
handlerTimeLineScroll();
|
||||
// 组件通信
|
||||
|
|
@ -693,6 +729,7 @@
|
|||
onUnmounted(()=>{
|
||||
monitorGraphicLayer ? monitorGraphicLayer.clear() : null;
|
||||
userGraphicLayer ? userGraphicLayer.clear() : null;
|
||||
windowGraphicLayer ? windowGraphicLayer.clear() : null;
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
|
|
@ -777,7 +814,6 @@
|
|||
|
||||
const handlerShowInfo = (event,item) => {
|
||||
|
||||
|
||||
detailInfo.value = item.showInfo;
|
||||
|
||||
const parentRect = container.value.getBoundingClientRect() // 父容器位置
|
||||
|
|
@ -787,13 +823,78 @@
|
|||
getImageList(item.info);
|
||||
|
||||
|
||||
listItem.value.forEach((item,index)=>{
|
||||
item.checked = false;
|
||||
})
|
||||
// listItem.value.forEach((item,index)=>{
|
||||
// item.checked = false;
|
||||
// })
|
||||
|
||||
item.checked = true;
|
||||
// item.checked = true;
|
||||
|
||||
currentTimeNode.value = item;
|
||||
|
||||
addVerifyWindowGraphic(item.info,item.showInfo)
|
||||
}
|
||||
|
||||
// 添加火情弹窗
|
||||
|
||||
let windowGraphicLayer:mars3d.layer.GraphicLayer;
|
||||
|
||||
function addVerifyWindowGraphic(info,showInfo) {
|
||||
|
||||
// 清空图层
|
||||
if(windowGraphicLayer){
|
||||
windowGraphicLayer.clear();
|
||||
}else{
|
||||
windowGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
window.globalMap.addLayer(windowGraphicLayer);
|
||||
}
|
||||
|
||||
// 设置图片
|
||||
let imageUrl = null;
|
||||
if(handlerAfterImageList.value?.length>0){
|
||||
imageUrl = handlerAfterImageList.value[0]
|
||||
}
|
||||
|
||||
// 显示内容
|
||||
let contentHtml = "";
|
||||
showInfo?.forEach((item)=>{
|
||||
let strHtml = `
|
||||
<div class="description-item">
|
||||
<div class="label">${item.label}</div>
|
||||
<div class="value">${item.value}</div>
|
||||
</div>
|
||||
`;
|
||||
contentHtml+=strHtml;
|
||||
})
|
||||
|
||||
let clueState = clueInfo.value.state > 2 ? "verify-container-over" : "verify-container";
|
||||
|
||||
// 弹窗
|
||||
const graphic = new mars3d.graphic.DivGraphic({
|
||||
position: [info.lng, info.lat],
|
||||
style: {
|
||||
html:`
|
||||
<div class="${clueState}">
|
||||
<div class="title">
|
||||
初始线索
|
||||
<div class="close-button" onclick="clsoeVerifyWindow()"></div>
|
||||
</div>
|
||||
<div class="image-container" style="display: ${imageUrl ? 'block' : 'none'}" >
|
||||
<img src="${imageUrl}" onclick="previewVerifyImage()">
|
||||
</div>
|
||||
<div class="description-container">
|
||||
${contentHtml}
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000),
|
||||
scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 200000, 0.2),
|
||||
clampToGround: true
|
||||
},
|
||||
pointerEvents: true
|
||||
})
|
||||
windowGraphicLayer.addGraphic(graphic)
|
||||
}
|
||||
|
||||
// 关闭
|
||||
|
|
@ -813,7 +914,7 @@
|
|||
const handlerDetail = () => {
|
||||
//
|
||||
let sql = `
|
||||
SELECT "Id","ReportPerson","ReportTime","Describe" ,"Address","Lng","Lat", CASE
|
||||
SELECT "Id","ReportPerson","ReportTime","Describe" ,"Address","Lng","Lat", "ClueNo", CASE
|
||||
WHEN "SourceType"='6' THEN '遥感监测线索'
|
||||
WHEN "SourceType"='2' THEN '高空瞭望线索'
|
||||
WHEN "SourceType"='3' THEN '无人机线索'
|
||||
|
|
@ -831,6 +932,8 @@
|
|||
let data = res.data.result[0];
|
||||
clueInfo.value = data;
|
||||
|
||||
console.log("clueInfo",clueInfo.value);
|
||||
|
||||
// 创建无人机连接
|
||||
createUavConnection();
|
||||
|
||||
|
|
@ -838,6 +941,11 @@
|
|||
handlerGetTaskList();
|
||||
|
||||
detailInfo.value = [
|
||||
{
|
||||
label:"线索编号",
|
||||
key:"clueNo",
|
||||
value:data.clueNo,
|
||||
},
|
||||
{
|
||||
label:"线索描述",
|
||||
key:"describe",
|
||||
|
|
@ -874,10 +982,10 @@
|
|||
}
|
||||
|
||||
function getImageList(data){
|
||||
console.log("data123",data);
|
||||
|
||||
let imageList = [];
|
||||
|
||||
if(!data.image){
|
||||
if(!data?.image){
|
||||
handlerAfterImageList.value = [];
|
||||
imageLoading.value = true;
|
||||
return null;
|
||||
|
|
@ -1076,7 +1184,7 @@
|
|||
|
||||
data.forEach((item,index)=>{
|
||||
let iconUrl = index == 0 ? '/public/components/task/taskassign/map-monitor-common.png' : '/public/components/task/taskassign/map-monitor-active.png';
|
||||
let labelName = index == 0 ? "LH"+clueInfo.value.id : "LH"+item.Name
|
||||
let labelName = index == 0 ? clueInfo.value.clueNo : item.Name
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
position: [parseFloat(item.Lng),parseFloat(item.Lat)],
|
||||
attr: item,
|
||||
|
|
@ -1185,8 +1293,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
// 更新位置
|
||||
// 更新位置
|
||||
console.log("messge9999999",topic);
|
||||
if (rs.data.latitude && rs.data.longitude) {
|
||||
console.log("messge9998",JSON.stringify(rs.data));
|
||||
handlerUpdateUavPostion(rs.data.longitude,rs.data.latitude)
|
||||
}
|
||||
|
||||
|
|
@ -1253,6 +1363,8 @@
|
|||
};
|
||||
servicesTopic(querys);
|
||||
services_replyTopic();
|
||||
// 下发任务
|
||||
handlerTask(3);
|
||||
},
|
||||
});
|
||||
} else {
|
||||
|
|
@ -1283,89 +1395,80 @@
|
|||
};
|
||||
servicesTopic(querys);
|
||||
services_replyTopic();
|
||||
// 下发任务
|
||||
handlerTask(3);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 下发任务
|
||||
handlerTask(3);
|
||||
|
||||
}
|
||||
|
||||
// 更新无人机图标位置
|
||||
let uavGraphicLayer:mars3d.layer.GraphicLayer;
|
||||
|
||||
function handlerUpdateUavPostion(lng,lat){
|
||||
|
||||
console.log("message666888",lng,lat);
|
||||
let uavGraphic = window.globalMap.graphicLayer.getGraphicById('uav_gaphic');
|
||||
|
||||
if (uavGraphic) { // 更新位置
|
||||
uavGraphic.setOptions({
|
||||
id:"uav_gaphic",
|
||||
position: [lng,lat],
|
||||
style: {
|
||||
pixelSize: 100,
|
||||
scale: 0.7,
|
||||
image: '/public/components/task/taskassign/map-uav.png',
|
||||
offset:[0,100],
|
||||
clampToGround: true,
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
pixelOffset: new Cesium.Cartesian2(0, 0),
|
||||
label:{
|
||||
text: "LH"+clueInfo.value.id, // 显示的文字，可换成 item 里的字段
|
||||
font: '14px sans-serif',
|
||||
fillColor: Cesium.Color.WHITE,
|
||||
outlineColor: Cesium.Color.BLACK,
|
||||
outlineWidth: 2,
|
||||
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
pixelOffset: new Cesium.Cartesian2(0, -116), // 向上偏移，值根据图标高度调整
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
},
|
||||
});
|
||||
} else { // 添加图标
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
id:"uav_gaphic",
|
||||
position: [lng,lat],
|
||||
style: {
|
||||
pixelSize: 100,
|
||||
scale: 0.7,
|
||||
image: '/public/components/task/taskassign/map-uav.png',
|
||||
offset:[0,100],
|
||||
clampToGround: true,
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
pixelOffset: new Cesium.Cartesian2(0, 0),
|
||||
label:{
|
||||
text: "LH"+clueInfo.value.id, // 显示的文字，可换成 item 里的字段
|
||||
font: '14px sans-serif',
|
||||
fillColor: Cesium.Color.WHITE,
|
||||
outlineColor: Cesium.Color.BLACK,
|
||||
outlineWidth: 2,
|
||||
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
pixelOffset: new Cesium.Cartesian2(0, -116), // 向上偏移，值根据图标高度调整
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
},
|
||||
});
|
||||
// 点击事件
|
||||
graphic.on(mars3d.EventType.click, function (event: any) {
|
||||
var data = event.graphic.options.attr;
|
||||
// 打开无人机视频
|
||||
uavControllerShow.value = true;
|
||||
isUAVLive.value = false;
|
||||
|
||||
setTimeout(function(){
|
||||
playVideo();
|
||||
},500);
|
||||
});
|
||||
window.globalMap.graphicLayer.addGraphic(graphic);
|
||||
if(uavGraphicLayer){
|
||||
uavGraphicLayer.clear();
|
||||
}else{
|
||||
uavGraphicLayer = new mars3d.layer.GraphicLayer();
|
||||
window.globalMap.addLayer(uavGraphicLayer);
|
||||
}
|
||||
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
id:"uav_gaphic",
|
||||
position: [lng,lat],
|
||||
style: {
|
||||
pixelSize: 100,
|
||||
scale: 0.7,
|
||||
image: '/public/components/task/taskassign/map-uav.png',
|
||||
offset:[0,100],
|
||||
clampToGround: true,
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
pixelOffset: new Cesium.Cartesian2(0, 0),
|
||||
label:{
|
||||
text: clueInfo.value.clueNo, // 显示的文字，可换成 item 里的字段
|
||||
font: '14px sans-serif',
|
||||
fillColor: Cesium.Color.WHITE,
|
||||
outlineColor: Cesium.Color.BLACK,
|
||||
outlineWidth: 2,
|
||||
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
pixelOffset: new Cesium.Cartesian2(0, -116), // 向上偏移，值根据图标高度调整
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 点击事件
|
||||
graphic.on(mars3d.EventType.click, function (event: any) {
|
||||
var data = event.graphic.options.attr;
|
||||
// 打开无人机视频
|
||||
uavControllerShow.value = true;
|
||||
isUAVLive.value = false;
|
||||
|
||||
setTimeout(function(){
|
||||
playVideo();
|
||||
},500);
|
||||
});
|
||||
uavGraphicLayer.addGraphic(graphic);
|
||||
|
||||
console.log("message666888",lng,lat);
|
||||
|
||||
// let uavGraphic = window.globalMap.graphicLayer.getGraphicById('uav_gaphic');
|
||||
// console.log("message666888",uavGraphic,lng,lat);
|
||||
|
||||
// if (uavGraphic) { // 更新位置
|
||||
// uavGraphic.setOptions({
|
||||
// position: [lng,lat]
|
||||
// });
|
||||
// } else { // 添加图标
|
||||
|
||||
// }
|
||||
}
|
||||
|
||||
// 直升机核查
|
||||
|
|
@ -1408,7 +1511,7 @@
|
|||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
pixelOffset: new Cesium.Cartesian2(0, 0),
|
||||
label:{
|
||||
text: "LH"+clueInfo.value.id, // 显示的文字，可换成 item 里的字段
|
||||
text: clueInfo.value.clueNo, // 显示的文字，可换成 item 里的字段
|
||||
font: '14px sans-serif',
|
||||
fillColor: Cesium.Color.WHITE,
|
||||
outlineColor: Cesium.Color.BLACK,
|
||||
|
|
@ -1482,10 +1585,10 @@
|
|||
// 关闭线索
|
||||
function handlerCloseClue(item){
|
||||
|
||||
hikversionShow.value = false;
|
||||
monitorGraphicLayer ? monitorGraphicLayer.clear() : null;
|
||||
userGraphicLayer ? userGraphicLayer.clear() : null;
|
||||
|
||||
windowGraphicLayer ? windowGraphicLayer.clear() :null;
|
||||
hikversionShow.value = false;
|
||||
|
||||
let submitForm = {
|
||||
taskid: clueInfo.value.id,
|
||||
|
|
@ -1526,14 +1629,17 @@
|
|||
function handlerCloseWindow(item){
|
||||
monitorGraphicLayer ? monitorGraphicLayer.clear() : null;
|
||||
userGraphicLayer ? userGraphicLayer.clear() : null;
|
||||
windowGraphicLayer ? windowGraphicLayer.clear() :null;
|
||||
hikversionShow.value = false;
|
||||
changeButton("关闭弹窗")
|
||||
}
|
||||
|
||||
// 应急响应
|
||||
function handlerResponseClue(item){
|
||||
|
||||
monitorGraphicLayer ? monitorGraphicLayer.clear() : null;
|
||||
userGraphicLayer ? userGraphicLayer.clear() : null;
|
||||
windowGraphicLayer ? windowGraphicLayer.clear() :null;
|
||||
hikversionShow.value = false;
|
||||
changeButton("应急响应")
|
||||
}
|
||||
|
|
@ -2294,8 +2400,9 @@
|
|||
.description-container{
|
||||
width: calc( 100% - 60px);
|
||||
margin:0px auto;
|
||||
height:200px;
|
||||
height:160px;
|
||||
color:#fff;
|
||||
overflow-y:auto;
|
||||
.description-item{
|
||||
width:100%;
|
||||
min-height:30px;
|
||||
|
|
@ -2339,7 +2446,7 @@
|
|||
height:620px;
|
||||
z-index:999;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
top:-630px;
|
||||
left:0px;
|
||||
display:flex;
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<a-carousel autoplay dots-class="slick-dots slick-thumb" preview-disabled v-if="imageLoading">
|
||||
<div v-for="item in dataset.imgArr">
|
||||
<a-image :src="item" />
|
||||
|
||||
</div>
|
||||
</a-carousel>
|
||||
</div>
|
||||
|
|
@ -31,7 +30,7 @@ import { EventBus } from '@/utils/eventBus';
|
|||
import { getAppEnvConfig } from '@/utils/env'
|
||||
import { getAssetsImg } from '@/utils/index';
|
||||
import { replaceSqlParams } from '@/utils/sqlHandler';
|
||||
|
||||
import axios from "axios";
|
||||
var { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
|
|
@ -77,23 +76,42 @@ onMounted(()=>{
|
|||
})
|
||||
// 图片处理
|
||||
props.chartConfig.option.dataset.imgArr = [];
|
||||
let tempImages = resData[0].image.split(",");
|
||||
|
||||
if(tempImages.length>0){
|
||||
tempImages?.forEach((img,idx)=>{
|
||||
props.chartConfig.option.dataset.imgArr.push(VITE_GLOB_API_URL+"/"+img)
|
||||
})
|
||||
}else{
|
||||
props.chartConfig.option.dataset.imgArr = [VITE_GLOB_API_URL+"/"+resData[0].image]
|
||||
}
|
||||
|
||||
imageLoading.value = true;
|
||||
props.chartConfig.option.dataset.data = data;
|
||||
|
||||
getImageToken().then(res=>{
|
||||
|
||||
let tempImages = resData[0].image.split(",");
|
||||
|
||||
if(tempImages.length>0){
|
||||
tempImages?.forEach((img,idx)=>{
|
||||
props.chartConfig.option.dataset.imgArr.push(img+"?token="+imageToken.value)
|
||||
})
|
||||
}else{
|
||||
props.chartConfig.option.dataset.imgArr = [VITE_GLOB_API_URL+"/"+resData[0].image]
|
||||
}
|
||||
|
||||
imageLoading.value = true;
|
||||
props.chartConfig.option.dataset.data = data;
|
||||
})
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
// 获取图片Token
|
||||
const imageToken = ref<String>();
|
||||
|
||||
async function getImageToken(){
|
||||
await axios({
|
||||
method:"get",
|
||||
url:"http://221.2.83.254:9001/api/YingJiJu/QueryFireToken?username=test&password=Bsh4oyWqURA57%2FKcppKqf2knhoUVI3sjGcZuTwUiVZmorKPbOYMkTpchoULYv1OnWVmMGq%2FtaKT9Z7UZBuGcZO%2BYnm33tWhTMQQFKS1k71d99GinTaJje%2FV9MDksDP%2B6Rj35mKvLGnFdbvdAxfOdyKodaIEdKjgIjUiSi5kpoiSn%2BwZ8knYpgTHsWHjWPL8j7zDJKOcBQUpyMyHFdMUOg6%2BGhp9dIrk98AqbdXy8owaQGdjmbcz0TyvfCWCiA53PQDGKH3qjSHHipUGHD2jWaMnx7gSV4ytMaH3X8P%2Bw7QxoZIVCDTB24E9OWNeopb53FAJOTnvO%2FK0JLg2K%2Buonlw%3D%3D"
|
||||
}).then(res=>{
|
||||
imageToken.value = res.data;
|
||||
})
|
||||
}
|
||||
|
||||
function firstLetterToLowerCase(str) {
|
||||
return str.charAt(0).toLowerCase() + str.slice(1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -203,7 +203,7 @@
|
|||
});
|
||||
|
||||
let waterGraphicData: any = [];
|
||||
let waterGraphicLayers = new mars3d.layer.GraphicLayer();
|
||||
let waterGraphicLayers = new mars3d.layer.GraphicLayer({id:"water-resources"});
|
||||
let goodsGraphicData: any = [];
|
||||
let goodsGraphicLayers = new mars3d.layer.GraphicLayer();
|
||||
let barrackGraphicData: any = [];
|
||||
|
|
@ -223,7 +223,7 @@
|
|||
} else {
|
||||
if (waterGraphicData.length > 0) {
|
||||
waterGraphicData?.forEach((graphicLayer) => {
|
||||
waterGraphicLayers.removeGraphic(graphicLayer);
|
||||
// waterGraphicLayers.removeGraphic(graphicLayer);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -319,6 +319,7 @@
|
|||
|
||||
// 水源
|
||||
function mapListShow_water() {
|
||||
alert("water");
|
||||
setTimeout(() => {
|
||||
let data: any = cloneDeep(option.dataset).filter((item) => parseInt(item.type) == 0);
|
||||
// switch (option.dataStyle.distanceradio) {
|
||||
|
|
@ -347,6 +348,8 @@
|
|||
// 图层数据
|
||||
waterGraphicData = [];
|
||||
data.forEach((dataItem, dataIndex) => {
|
||||
console.log("dataItem",dataItem);
|
||||
|
||||
let waterGraphic = new mars3d.graphic.BillboardEntity({
|
||||
id: 'ZhiChu_ModalTable' + '_water_' + dataIndex + '_' + dataItem.id,
|
||||
position: [parseFloat(dataItem.lng), parseFloat(dataItem.lat)],
|
||||
|
|
@ -415,6 +418,7 @@
|
|||
|
||||
// 将新图形添加到图层中
|
||||
waterGraphicLayers.addGraphic(waterGraphic);
|
||||
console.log("dataItem",waterGraphic)
|
||||
waterGraphicData.push(waterGraphic);
|
||||
});
|
||||
}, 500);
|
||||
|
|
|
|||
Loading…
Reference in New Issue