Update communitymanage.vue
This commit is contained in:
parent
5c489b1e20
commit
3320c7bcec
|
|
@ -1,144 +1,112 @@
|
|||
<template>
|
||||
<div div class="indexx" :id="state.id">
|
||||
<div class="left-cont">
|
||||
<p class="titleLeftBg" style="font-style:italic;">警情详情</p>
|
||||
<ul v-if="infoData" style="margin-top: 10px;">
|
||||
<p class="titleLeftBg" style="font-style: italic">警情详情</p>
|
||||
<ul v-if="infoData" style="margin-top: 10px">
|
||||
<li style="margin-bottom: 20px">
|
||||
<span id="" style="color:#616161">
|
||||
事件类型:
|
||||
</span>
|
||||
<span id="" style="color: #616161"> 事件类型: </span>
|
||||
<span id="" style="color: #000000; margin-left: 10px">
|
||||
{{ infoData.alarmCode }}
|
||||
</span>
|
||||
</li>
|
||||
<li style="margin-bottom: 20px">
|
||||
<span id="" style="color:#616161">
|
||||
上报时间:
|
||||
</span>
|
||||
<span id="" style="color: #616161"> 上报时间: </span>
|
||||
<span id="" style="color: #000000; margin-left: 10px">
|
||||
{{ infoData.timestamp }}
|
||||
</span>
|
||||
</li>
|
||||
<li style="margin-bottom: 20px">
|
||||
<span id="" style="color:#616161">
|
||||
上报地点:
|
||||
</span>
|
||||
<span id="" style="color: #616161"> 上报地点: </span>
|
||||
<span id="" style="color: #000000; margin-left: 10px">
|
||||
{{ infoData.address }}
|
||||
</span>
|
||||
</li>
|
||||
<li style="margin-bottom: 20px">
|
||||
<span id="" style="color:#616161">
|
||||
上报来源:
|
||||
</span>
|
||||
<span id="" style="color: #616161"> 上报来源: </span>
|
||||
<span id="" style="color: #000000; margin-left: 10px">
|
||||
{{ infoData.alarmSource }}
|
||||
</span>
|
||||
</li>
|
||||
<li style="margin-bottom: 20px">
|
||||
<span id="" style="color:#616161">
|
||||
核验状态:
|
||||
</span>
|
||||
<span id="" style="color: #616161"> 核验状态: </span>
|
||||
<span id="" style="color: #000000; margin-left: 10px">
|
||||
{{ totypecn(infoData.fakeState) }}
|
||||
</span>
|
||||
</li>
|
||||
<li style="margin-bottom: 20px">
|
||||
<span id="" style="color:#616161">
|
||||
转发模式:
|
||||
</span>
|
||||
<span id="" style="color: #616161"> 转发模式: </span>
|
||||
<span id="" style="color: #000000; margin-left: 10px">
|
||||
{{ infoData.reportMode == '1' ? '自动转发' : infoData.reportMode == '2' ? '核验转发' : '' }}
|
||||
</span>
|
||||
</li>
|
||||
<li style="margin-bottom: 20px">
|
||||
<span id="" style="color:#616161">
|
||||
描述信息:
|
||||
</span>
|
||||
<span id="" style="color: #616161"> 描述信息: </span>
|
||||
<span id="" style="color: #000000; margin-left: 10px">
|
||||
{{ infoData.description }}
|
||||
</span>
|
||||
</li>
|
||||
<li style="margin-bottom: 20px">
|
||||
<span id="" style="color:#616161">
|
||||
案件类型:
|
||||
</span>
|
||||
<span id="" style="color: #616161"> 案件类型: </span>
|
||||
<span id="" style="color: #000000; margin-left: 10px">
|
||||
{{ infoData.alarmType }}
|
||||
</span>
|
||||
</li>
|
||||
<li style="margin-bottom: 20px">
|
||||
<span id="" style="color:#616161">
|
||||
案件分组:
|
||||
</span>
|
||||
<span id="" style="color: #616161"> 案件分组: </span>
|
||||
<span id="" style="color: #000000; margin-left: 10px">
|
||||
{{ infoData.alarmCode }}
|
||||
</span>
|
||||
</li>
|
||||
<li style="margin-bottom:20px;display:flex;">
|
||||
<div style="flex: 1;">
|
||||
<span id="" style="color:#616161">
|
||||
联系人1:
|
||||
</span>
|
||||
<li style="margin-bottom: 20px; display: flex">
|
||||
<div style="flex: 1">
|
||||
<span id="" style="color: #616161"> 联系人1: </span>
|
||||
<span id="" style="color: #000000; margin-left: 10px">
|
||||
{{ infoData.user1Name }}
|
||||
</span>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<span id="" style="color:#616161;margin-left:20px;">
|
||||
电话:
|
||||
</span>
|
||||
<div style="flex: 1">
|
||||
<span id="" style="color: #616161; margin-left: 20px"> 电话: </span>
|
||||
<span id="" style="color: #000000; margin-left: 10px">
|
||||
{{ infoData.user1Phone }}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li style="margin-bottom:20px;display: flex;">
|
||||
<div style="flex: 1;">
|
||||
<span id="" style="color:#616161">
|
||||
联系人2:
|
||||
</span>
|
||||
<li style="margin-bottom: 20px; display: flex">
|
||||
<div style="flex: 1">
|
||||
<span id="" style="color: #616161"> 联系人2: </span>
|
||||
<span id="" style="color: #000000; margin-left: 10px">
|
||||
{{ infoData.user2Name }}
|
||||
</span>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<span id="" style="color:#616161;margin-left:20px;">
|
||||
电话:
|
||||
</span>
|
||||
<div style="flex: 1">
|
||||
<span id="" style="color: #616161; margin-left: 20px"> 电话: </span>
|
||||
<span id="" style="color: #000000; margin-left: 10px">
|
||||
{{ infoData.user2Phone }}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li style="margin-bottom:20px;display: flex;">
|
||||
<div style="flex: 1;">
|
||||
<span id="" style="color:#616161">
|
||||
联系人3:
|
||||
</span>
|
||||
<li style="margin-bottom: 20px; display: flex">
|
||||
<div style="flex: 1">
|
||||
<span id="" style="color: #616161"> 联系人3: </span>
|
||||
<span id="" style="color: #000000; margin-left: 10px">
|
||||
{{ infoData.user3Name }}
|
||||
</span>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<span id="" style="color:#616161;margin-left:20px;">
|
||||
电话:
|
||||
</span>
|
||||
<div style="flex: 1">
|
||||
<span id="" style="color: #616161; margin-left: 20px"> 电话: </span>
|
||||
<span id="" style="color: #000000; margin-left: 10px">
|
||||
{{ infoData.user3Phone }}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li style="margin-bottom: 20px">
|
||||
<span id="" style="color:#616161">
|
||||
处置状态:
|
||||
</span>
|
||||
<span id="" style="color: #616161"> 处置状态: </span>
|
||||
<span id="" style="color: #000000; margin-left: 10px">
|
||||
{{ infoData.state == 'new' ? '新事件' : infoData.state == 'processing' ? '处置中' : infoData.state == 'processed' ? '处置完成' : infoData.state == 'close' ? '关闭' : '' }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<a-timeline style="color:#000;overflow-y: auto;height:248px;padding-top:10px;">
|
||||
<a-timeline style="color: #000; overflow-y: auto; height: 248px; padding-top: 10px">
|
||||
<a-timeline-item v-for="(item, index) in upstatuslist" :key="index">
|
||||
<p>{{ toCn(item.operation) }}</p>
|
||||
<p>时间:{{ item.timestamp }}</p>
|
||||
|
|
@ -148,29 +116,24 @@
|
|||
<el-button type="danger" size="small" @click="close(infoData)">关闭</el-button>
|
||||
</div>
|
||||
<div class="right-cont">
|
||||
<p class="titleLeftBg" style="font-style:italic;">周边力量</p>
|
||||
<div style="margin-top:20px;">
|
||||
<p class="titleLeftBg" style="font-style: italic">周边力量</p>
|
||||
<div style="margin-top: 20px">
|
||||
<el-input-number v-model="num" @change="handleChange" :step="50" />
|
||||
<span style="color:#fff;margin-left:15px;">米</span>
|
||||
<el-button @click="donwdata()"
|
||||
style="background:transparent;color:#868686;border:1px solid #1F9AD8;margin-left:80px;">消息下发</el-button>
|
||||
<span style="color: #fff; margin-left: 15px">米</span>
|
||||
<el-button @click="donwdata()" style="background: transparent; color: #868686; border: 1px solid #1f9ad8; margin-left: 80px">消息下发</el-button>
|
||||
</div>
|
||||
<div style="margin-top:10px;">
|
||||
<div style="margin-top: 10px">
|
||||
<ul v-if="datainfo">
|
||||
<li style="position:relative;" v-for="(item,index) in datainfo.mobileList" :key="index">
|
||||
<li style="position: relative" v-for="(item, index) in datainfo.mobileList" :key="index">
|
||||
<el-checkbox v-model="checked1" :true-label="item" size="large">{{ item.title }} </el-checkbox>
|
||||
<img @click="tolive(item)" src="./imag/video.png"
|
||||
style="width:20px;height:20px;position: absolute;right:20px;top:10px;" alt="">
|
||||
<img @click="tolive(item)" src="./imag/video.png" style="width: 20px; height: 20px; position: absolute; right: 20px; top: 10px" alt="" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p class="titleLeftBg" style="font-style:italic;">视频监控</p>
|
||||
<div v-if="datainfo" style="width:100%;display: flex;flex-wrap: wrap;margin-top:10px;">
|
||||
<div v-for="(item,index) in datainfo.ipcList" :key="index"
|
||||
style="width:48%;height:200px;background: #0D6899;margin-left:2%;margin-top:10px;">
|
||||
<iframe style="width:100%;height:100%;"
|
||||
:src="'https://www.jy-sh.com/h5sVideo/index.html?token='+item.pointCode+'&autoplay=true'"
|
||||
frameborder="0"></iframe>
|
||||
<p class="titleLeftBg" style="font-style: italic">视频监控</p>
|
||||
<div v-if="datainfo" style="width: 100%; display: flex; flex-wrap: wrap; margin-top: 10px">
|
||||
<div v-for="(item, index) in datainfo.ipcList" :key="index" style="width: 48%; height: 200px; background: #0d6899; margin-left: 2%; margin-top: 10px">
|
||||
<iframe style="width: 100%; height: 100%" :src="'https://www.jy-sh.com/h5sVideo/index.html?token=' + item.pointCode + '&autoplay=true'" frameborder="0"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -187,7 +150,7 @@
|
|||
<el-input v-model="form.address"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button style="width:100%;" type="primary" @click="send()">发送</el-button>
|
||||
<el-button style="width: 100%" type="primary" @click="send()">发送</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
|
|
@ -195,36 +158,38 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import closeimag from './imag/infoClose.png';
|
||||
import api from "@/axios";
|
||||
import { ElMessage } from 'element-plus';
|
||||
import image1 from './imag/hq.png';
|
||||
import image2 from './imag/she.png';
|
||||
import image3 from './imag/an.png';
|
||||
import { Ref, ref, watch, onMounted, onBeforeMount, reactive, getCurrentInstance } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
const router = useRouter();
|
||||
const infoData = ref();
|
||||
const upstatuslist = ref();
|
||||
import closeimag from './imag/infoClose.png'
|
||||
import api from '@/axios'
|
||||
import {ElMessage} from 'element-plus'
|
||||
import image1 from './imag/hq.png'
|
||||
import image2 from './imag/she.png'
|
||||
import image3 from './imag/an.png'
|
||||
import {ref, onMounted, reactive} from 'vue'
|
||||
import {useRouter} from 'vue-router'
|
||||
const router = useRouter()
|
||||
const infoData = ref<any>()
|
||||
const upstatuslist = ref()
|
||||
onMounted(() => {
|
||||
initMap();
|
||||
initMap()
|
||||
getData(router.currentRoute.value.query.multiAlarmId)
|
||||
infoData.value = JSON.parse(router.currentRoute.value.query.data)
|
||||
upstatuslist.value = JSON.parse(router.currentRoute.value.query.upstatuslist)
|
||||
console.log('router', router, JSON.parse(router.currentRoute.value.query.data))
|
||||
// showMark()
|
||||
});
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
const datainfo = ref();
|
||||
const getData = (multiAlarmId) => {
|
||||
api.post('/multialarm/client/alarm_event/get_all_resource', {
|
||||
})
|
||||
|
||||
const datainfo = ref()
|
||||
const getData = (multiAlarmId: any) => {
|
||||
api
|
||||
.post('/multialarm/client/alarm_event/get_all_resource', {
|
||||
range: 1000,
|
||||
multiAlarmId: multiAlarmId,
|
||||
}).then((res) => {
|
||||
multiAlarmId: multiAlarmId
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
console.log('ress', res)
|
||||
datainfo.value = res.data
|
||||
datainfo.value.ipcList.map((item) => {
|
||||
datainfo.value.ipcList.map((item: any) => {
|
||||
const marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(item['longitude'], item['latitude']),
|
||||
offset: new AMap.Pixel(-10, -10),
|
||||
|
|
@ -232,20 +197,20 @@
|
|||
image: image2,
|
||||
size: new AMap.Size(40, 46.5),
|
||||
imageSize: new AMap.Size(40, 46.5) //图标大小
|
||||
}),
|
||||
});
|
||||
})
|
||||
})
|
||||
marker.on('click', function () {
|
||||
deviceInfoWindow = new AMap.InfoWindow({
|
||||
isCustom: true, //使用自定义窗体
|
||||
content: createSubstanceInfowindow(item, '1'),
|
||||
offset: new AMap.Pixel(5, -13),
|
||||
});
|
||||
deviceInfoWindow.open(state.map, [item.longitude == null ? 0 : item.longitude, item.latitude == null ? 0 : item.latitude]);
|
||||
offset: new AMap.Pixel(5, -13)
|
||||
})
|
||||
deviceInfoWindow.open(state.map, [item.longitude == null ? 0 : item.longitude, item.latitude == null ? 0 : item.latitude])
|
||||
})
|
||||
state.map.setZoomAndCenter(12, [item['longitude'], item['latitude']])
|
||||
state.map.add(marker);
|
||||
state.map.add(marker)
|
||||
})
|
||||
datainfo.value.mobileList.map((item) => {
|
||||
datainfo.value.mobileList.map((item: any) => {
|
||||
const marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(item['longitude'], item['latitude']),
|
||||
offset: new AMap.Pixel(-10, -10),
|
||||
|
|
@ -253,53 +218,57 @@
|
|||
image: image3,
|
||||
size: new AMap.Size(40, 46.5),
|
||||
imageSize: new AMap.Size(40, 46.5) //图标大小
|
||||
}),
|
||||
});
|
||||
})
|
||||
})
|
||||
marker.on('click', function () {
|
||||
deviceInfoWindow = new AMap.InfoWindow({
|
||||
isCustom: true, //使用自定义窗体
|
||||
content: createSubstanceInfowindow(item, '1'),
|
||||
offset: new AMap.Pixel(5, -13),
|
||||
});
|
||||
deviceInfoWindow.open(state.map, [item.longitude == null ? 0 : item.longitude, item.latitude == null ? 0 : item.latitude]);
|
||||
offset: new AMap.Pixel(5, -13)
|
||||
})
|
||||
deviceInfoWindow.open(state.map, [item.longitude == null ? 0 : item.longitude, item.latitude == null ? 0 : item.latitude])
|
||||
})
|
||||
state.map.setZoomAndCenter(12, [item['longitude'], item['latitude']])
|
||||
state.map.add(marker);
|
||||
state.map.add(marker)
|
||||
})
|
||||
}
|
||||
})
|
||||
};
|
||||
}
|
||||
//关闭
|
||||
const close = (info) => {
|
||||
const close = (info: any) => {
|
||||
// console.log('data', info)
|
||||
api.post('/multialarm/client/alarm_event/close', {
|
||||
eventId: info.multiAlarmId,
|
||||
}).then((res) => {
|
||||
api
|
||||
.post('/multialarm/client/alarm_event/close', {
|
||||
eventId: info.multiAlarmId
|
||||
})
|
||||
.then((res) => {
|
||||
// console.log('关闭接口', res)
|
||||
if (res.code == 0) {
|
||||
ElMessage({
|
||||
message: '关闭成功',
|
||||
type: 'success',
|
||||
type: 'success'
|
||||
})
|
||||
} else {
|
||||
ElMessage.error('关闭失败')
|
||||
}
|
||||
})
|
||||
};
|
||||
const num = ref(1000);
|
||||
}
|
||||
const num = ref(1000)
|
||||
const handleChange = (value: number) => {
|
||||
// console.log('???',JSON.parse(router.currentRoute.value.query.data))
|
||||
api.post('/multialarm/client/alarm_event/get_all_resource', {
|
||||
api
|
||||
.post('/multialarm/client/alarm_event/get_all_resource', {
|
||||
range: value,
|
||||
multiAlarmId: JSON.parse(router.currentRoute.value.query.data)['multiAlarmId'],
|
||||
}).then((res) => {
|
||||
multiAlarmId: JSON.parse(router.currentRoute.value.query.data)['multiAlarmId']
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
console.log('ress', res)
|
||||
datainfo.value = res.data;
|
||||
datainfo.value = res.data
|
||||
}
|
||||
})
|
||||
};
|
||||
const totypecn = (data) => {
|
||||
}
|
||||
const totypecn = (data: any) => {
|
||||
if (data == '0') {
|
||||
return '未核验'
|
||||
} else if (data == '1') {
|
||||
|
|
@ -307,8 +276,8 @@
|
|||
} else if (data == '2') {
|
||||
return '核验为真'
|
||||
}
|
||||
};
|
||||
const toCn = (data) => {
|
||||
}
|
||||
const toCn = (data: any) => {
|
||||
if (data == 'report') {
|
||||
return '信息上报'
|
||||
} else if (data == 'modify.userinfo') {
|
||||
|
|
@ -328,31 +297,31 @@
|
|||
} else if (data == 'change.state') {
|
||||
return '修改状态'
|
||||
}
|
||||
};
|
||||
}
|
||||
//消息下发
|
||||
const checked1 = ref();
|
||||
const dialogVisible = ref(false);
|
||||
const checked1 = ref()
|
||||
const dialogVisible = ref(false)
|
||||
const form = reactive({
|
||||
title: '',
|
||||
address: '',
|
||||
content: '',
|
||||
content: ''
|
||||
})
|
||||
const donwdata = () => {
|
||||
console.log('消息下发', JSON.parse(router.currentRoute.value.query.data), checked1,)
|
||||
console.log('消息下发', JSON.parse(router.currentRoute.value.query.data), checked1)
|
||||
if (checked1.value == undefined) {
|
||||
ElMessage.error('请选择移动设备')
|
||||
} else {
|
||||
form.title = checked1.value.title;
|
||||
form.address = checked1.value.address;
|
||||
dialogVisible.value = true;
|
||||
form.title = checked1.value.title
|
||||
form.address = checked1.value.address
|
||||
dialogVisible.value = true
|
||||
}
|
||||
}
|
||||
};
|
||||
const send = () => {
|
||||
// console.log('发送', form, JSON.parse(router.currentRoute.value.query.data), checked1.value)
|
||||
let data = {
|
||||
address: checked1.value.address,
|
||||
borough: '',
|
||||
checkpoints: "",
|
||||
checkpoints: '',
|
||||
closetime: 0,
|
||||
content: form.content,
|
||||
createmode: '原发',
|
||||
|
|
@ -363,7 +332,7 @@
|
|||
operator: localStorage.getItem('loginname'),
|
||||
operatordevice: '',
|
||||
operatordevicetype: '',
|
||||
operatortype: "brigade",
|
||||
operatortype: 'brigade'
|
||||
},
|
||||
receiver: checked1.value.deviceId,
|
||||
relatealarmdata: '',
|
||||
|
|
@ -373,57 +342,55 @@
|
|||
station: checked1.value.station,
|
||||
status: '',
|
||||
title: form.title,
|
||||
type: '',
|
||||
type: ''
|
||||
}
|
||||
api.post('/iotserver/alarmtask/add', data).then((res) => {
|
||||
if (res.code == 0) {
|
||||
// console.log('ress', res)
|
||||
ElMessage.success({
|
||||
message: '恭喜你，这是一条成功消息',
|
||||
type: 'success',
|
||||
type: 'success'
|
||||
})
|
||||
dialogVisible.value = false;
|
||||
dialogVisible.value = false
|
||||
}
|
||||
})
|
||||
api.post('https://www.jy-sh.com/frectr/client/notice/sendmgtt', {
|
||||
api
|
||||
.post('https://www.jy-sh.com/frectr/client/notice/sendmgtt', {
|
||||
message: JSON.stringify(data),
|
||||
topic: checked1.value.deviceId + '_rtmtranfer'
|
||||
}).then((res) => {
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
console.log('ress', res)
|
||||
}
|
||||
})
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
var state = {
|
||||
id: "indexx",
|
||||
map: null as any,
|
||||
};
|
||||
const tolive = (item) => {
|
||||
id: 'indexx',
|
||||
map: null as any
|
||||
}
|
||||
const tolive = (item: any) => {
|
||||
window.open('https://www.jy-sh.com/webRtcVideo/moveDeviceVideoOne.html?id=' + item.deviceId)
|
||||
};
|
||||
const getSubstanceInfoWindowContent = (obj, type) => {
|
||||
// console.log('obj', obj)
|
||||
var station = obj["station"];
|
||||
var nickname = "";
|
||||
}
|
||||
const getSubstanceInfoWindowContent = (obj: any, type: any) => {
|
||||
if (type == '1' || type == '3') {
|
||||
return `
|
||||
<p>
|
||||
<span>归属单位：</span>
|
||||
<span>${obj["nickname"] == undefined || null ? '--' : obj["nickname"]}</span>
|
||||
<span>${obj['nickname'] == undefined || null ? '--' : obj['nickname']}</span>
|
||||
<span>名称：</span>
|
||||
<span>${obj["name"] == undefined || null ? '--' : obj["name"]}</span>
|
||||
<span>${obj['name'] == undefined || null ? '--' : obj['name']}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>联系人：</span>
|
||||
<span>${obj["contactName"] == undefined || null ? '--' : obj["contactName"]}</span>
|
||||
<span>${obj['contactName'] == undefined || null ? '--' : obj['contactName']}</span>
|
||||
<span>电话：</span>
|
||||
<span>${obj["userphone"] == undefined || null ? '--' : obj["userphone"]}</span>
|
||||
<span>${obj['userphone'] == undefined || null ? '--' : obj['userphone']}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span>地址:</span>
|
||||
<span>${obj["address"] == undefined || null ? '--' : obj["address"]}</span>
|
||||
<span>${obj['address'] == undefined || null ? '--' : obj['address']}</span>
|
||||
</p>
|
||||
`
|
||||
} else {
|
||||
|
|
@ -431,80 +398,79 @@
|
|||
<div style="display:flex">
|
||||
<div style="width:50%;">
|
||||
<span>第一联系人：</span>
|
||||
<span>${obj["userName"] == undefined || obj["userName"] == null || obj["userName"] == " " ? '--' : obj["userName"]}</span>
|
||||
<span>${obj['userName'] == undefined || obj['userName'] == null || obj['userName'] == ' ' ? '--' : obj['userName']}</span>
|
||||
</div>
|
||||
<div style="width:50%;">
|
||||
<span>电话：</span>
|
||||
<span>${obj["userPhone"] == undefined || obj["userPhone"] == null || obj["userPhone"] == " " ? '--' : obj["userPhone"]}</span>
|
||||
<span>${obj['userPhone'] == undefined || obj['userPhone'] == null || obj['userPhone'] == ' ' ? '--' : obj['userPhone']}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;margin-top:10px">
|
||||
<div style="width:50%;">
|
||||
<span>第二联系人：</span>
|
||||
<span>${obj["user2Name"] == undefined || obj["user2Name"] == null || obj["user2Name"] == " " ? '--' : obj["user2Name"]}</span>
|
||||
<span>${obj['user2Name'] == undefined || obj['user2Name'] == null || obj['user2Name'] == ' ' ? '--' : obj['user2Name']}</span>
|
||||
</div>
|
||||
<div style="width:50%;">
|
||||
<span>电话：</span>
|
||||
<span>${obj["user2Phone"] == undefined || obj["user2Phone"] == null || obj["user2Phone"] == " " ? '--' : obj["user2Phone"]}</span>
|
||||
<span>${obj['user2Phone'] == undefined || obj['user2Phone'] == null || obj['user2Phone'] == ' ' ? '--' : obj['user2Phone']}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;margin-top:10px">
|
||||
<div style="width:50%;">
|
||||
<span>第三联系人：</span>
|
||||
<span>${obj["user3Name"] == undefined || obj["user3Name"] == null || obj["user3Name"] == " " ? '--' : obj["user3Name"]}</span>
|
||||
<span>${obj['user3Name'] == undefined || obj['user3Name'] == null || obj['user3Name'] == ' ' ? '--' : obj['user3Name']}</span>
|
||||
</div>
|
||||
<div style="width:50%;">
|
||||
<span>电话：</span>
|
||||
<span>${obj["user3Phone"] == undefined || obj["user3Phone"] == null || obj["user3Phone"] == " " ? '--' : obj["user3Phone"]}</span>
|
||||
<span>${obj['user3Phone'] == undefined || obj['user3Phone'] == null || obj['user3Phone'] == ' ' ? '--' : obj['user3Phone']}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;margin-top:10px">
|
||||
<div style="width:50%;">
|
||||
<span>区域码:</span>
|
||||
<span>${obj["subCode"] == undefined || obj["subCode"] == null || obj["subCode"] == " " ? '--' : obj["subCode"]}</span>
|
||||
<span>${obj['subCode'] == undefined || obj['subCode'] == null || obj['subCode'] == ' ' ? '--' : obj['subCode']}</span>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
}
|
||||
const createSubstanceInfowindow = (obj, type) => {
|
||||
const createSubstanceInfowindow = (obj: any, type: any) => {
|
||||
//定义顶部标题
|
||||
var mdinfoTop = document.createElement("div");
|
||||
mdinfoTop.className = "mapPopInfo";
|
||||
var mdinfoTop = document.createElement('div')
|
||||
mdinfoTop.className = 'mapPopInfo'
|
||||
|
||||
var userinfotop = document.createElement("div");
|
||||
userinfotop.className = "mapPopInfo-top";
|
||||
var userinfotop = document.createElement('div')
|
||||
userinfotop.className = 'mapPopInfo-top'
|
||||
|
||||
var userinfoSpan = document.createElement("span");
|
||||
userinfoSpan.innerHTML = `<span>${obj["title"]}</span>`
|
||||
var userinfoSpan = document.createElement('span')
|
||||
userinfoSpan.innerHTML = `<span>${obj['title']}</span>`
|
||||
|
||||
var closeX = document.createElement("img");
|
||||
closeX.src = closeimag;
|
||||
var closeX = document.createElement('img')
|
||||
closeX.src = closeimag
|
||||
closeX.onclick = () => {
|
||||
deviceInfoWindow.close();
|
||||
};
|
||||
deviceInfoWindow.close()
|
||||
}
|
||||
|
||||
var popMian = document.createElement("div");
|
||||
popMian.className = "mapPopInfo-main"
|
||||
var popMian = document.createElement('div')
|
||||
popMian.className = 'mapPopInfo-main'
|
||||
popMian.innerHTML = `<div>
|
||||
${getSubstanceInfoWindowContent(obj, type)}
|
||||
</div>`
|
||||
|
||||
userinfotop.append(userinfoSpan);
|
||||
userinfotop.append(closeX);
|
||||
userinfotop.append(userinfoSpan)
|
||||
userinfotop.append(closeX)
|
||||
|
||||
mdinfoTop.append(userinfotop);
|
||||
mdinfoTop.append(popMian);
|
||||
mdinfoTop.append(userinfotop)
|
||||
mdinfoTop.append(popMian)
|
||||
|
||||
return mdinfoTop;
|
||||
return mdinfoTop
|
||||
}
|
||||
let deviceInfoWindow = ref(null);
|
||||
let deviceInfoWindow = ref(null)
|
||||
const initMap = () => {
|
||||
state.map = new AMap.Map(state.id, {
|
||||
center: [113.015117, 28.209425],
|
||||
zoom: 12
|
||||
});
|
||||
})
|
||||
if (state.map) {
|
||||
const marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(JSON.parse(router.currentRoute.value.query.data)['longitude'], JSON.parse(router.currentRoute.value.query.data)['latitude']),
|
||||
|
|
@ -516,40 +482,39 @@
|
|||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>`,
|
||||
});
|
||||
</div>`
|
||||
})
|
||||
marker.on('click', function () {
|
||||
deviceInfoWindow = new AMap.InfoWindow({
|
||||
isCustom: true, //使用自定义窗体
|
||||
content: createSubstanceInfowindow(item, '1'),
|
||||
offset: new AMap.Pixel(5, -13),
|
||||
});
|
||||
deviceInfoWindow.open(state.map, [item.longitude == null ? 0 : item.longitude, item.latitude == null ? 0 : item.latitude]);
|
||||
offset: new AMap.Pixel(5, -13)
|
||||
})
|
||||
deviceInfoWindow.open(state.map, [item.longitude == null ? 0 : item.longitude, item.latitude == null ? 0 : item.latitude])
|
||||
})
|
||||
state.map.setZoomAndCenter(12, [JSON.parse(router.currentRoute.value.query.data)['longitude'], JSON.parse(router.currentRoute.value.query.data)['latitude']])
|
||||
state.map.add(marker);
|
||||
state.map.add(marker)
|
||||
}
|
||||
|
||||
};
|
||||
const showMark = (a, b) => {
|
||||
// console.log('???', a, b, state.map)
|
||||
const marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(b, a),
|
||||
offset: new AMap.Pixel(-10, -10),
|
||||
icon: new AMap.Icon({
|
||||
image: image1,
|
||||
size: new AMap.Size(40, 46.5),
|
||||
imageSize: new AMap.Size(40, 46.5)//图标大小
|
||||
}),
|
||||
});
|
||||
state.map.add(marker);
|
||||
};
|
||||
}
|
||||
// const showMark = (a, b) => {
|
||||
// // console.log('???', a, b, state.map)
|
||||
// const marker = new AMap.Marker({
|
||||
// position: new AMap.LngLat(b, a),
|
||||
// offset: new AMap.Pixel(-10, -10),
|
||||
// icon: new AMap.Icon({
|
||||
// image: image1,
|
||||
// size: new AMap.Size(40, 46.5),
|
||||
// imageSize: new AMap.Size(40, 46.5) //图标大小
|
||||
// })
|
||||
// })
|
||||
// state.map.add(marker)
|
||||
// }
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-timeline .ant-timeline-item-head-blue) {
|
||||
color: #2CB7C7;
|
||||
border-color: #2CB7C7;
|
||||
color: #2cb7c7;
|
||||
border-color: #2cb7c7;
|
||||
}
|
||||
|
||||
:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-timeline .ant-timeline-item-head) {
|
||||
|
|
@ -562,7 +527,7 @@
|
|||
}
|
||||
|
||||
:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-timeline .ant-timeline-item-tail) {
|
||||
border-inline-start: 2px solid #2CB7C7;
|
||||
border-inline-start: 2px solid #2cb7c7;
|
||||
inset-inline-start: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -573,16 +538,16 @@
|
|||
:deep(.el-input__wrapper) {
|
||||
background-color: transparent;
|
||||
// box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
|
||||
box-shadow: 0 0 0 1px #1F9BD9;
|
||||
box-shadow: 0 0 0 1px #1f9bd9;
|
||||
}
|
||||
|
||||
:deep(.el-input-number__decrease) {
|
||||
border-right: 1px solid #1F9BD9;
|
||||
border-right: 1px solid #1f9bd9;
|
||||
}
|
||||
|
||||
:deep(.el-input-number__increase) {
|
||||
background: transparent;
|
||||
border-left: 1px solid #1F9BD9;
|
||||
border-left: 1px solid #1f9bd9;
|
||||
}
|
||||
|
||||
:deep(.el-input-number__decrease, .el-input-number__increase) {
|
||||
|
|
@ -610,13 +575,12 @@
|
|||
font-size: 16px;
|
||||
font-family: ysbth;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
|
||||
.left-cont {
|
||||
width: 350px;
|
||||
height: 100%;
|
||||
background-color: #F2F3F5;
|
||||
background-color: #f2f3f5;
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
|
|
@ -633,14 +597,13 @@
|
|||
font-size: 16px;
|
||||
font-family: ysbth;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.right-cont {
|
||||
width: 350px;
|
||||
height: 100%;
|
||||
background-color: #F2F3F5;
|
||||
background-color: #f2f3f5;
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
|
@ -664,7 +627,6 @@
|
|||
|
||||
.mapPopInfo {
|
||||
width: 400px;
|
||||
|
||||
}
|
||||
|
||||
.mapPopInfo-top {
|
||||
|
|
@ -673,7 +635,7 @@
|
|||
background: linear-gradient(to right, #0d6295, #0872b1, #0872b18c);
|
||||
padding: 0 15px;
|
||||
border: solid 2px #2d94b5;
|
||||
border-bottom: solid 1px #54bbda
|
||||
border-bottom: solid 1px #54bbda;
|
||||
}
|
||||
|
||||
.mapPopInfo-top > img {
|
||||
|
|
@ -681,7 +643,6 @@
|
|||
margin: 3px 0;
|
||||
}
|
||||
|
||||
|
||||
.mapPopInfo-top > span > span {
|
||||
float: left;
|
||||
width: 330px;
|
||||
|
|
@ -699,7 +660,6 @@
|
|||
}
|
||||
|
||||
.mapPopInfo-main > div > p {
|
||||
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
|
|
@ -711,13 +671,10 @@
|
|||
height: 26px;
|
||||
line-height: 26px;
|
||||
background: none;
|
||||
border: 1px solid #2081C1;
|
||||
border: 1px solid #2081c1;
|
||||
box-shadow: 0 0 3px 3px #244b68;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.amap-marker-content {
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
|
@ -798,7 +755,6 @@
|
|||
animation-delay: 0.66666s;
|
||||
}
|
||||
|
||||
|
||||
.riskMarkerImg {
|
||||
overflow: hidden;
|
||||
margin-top: 5px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue