Libt
/
multiple-police-situations
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update communitymanage.vue

This commit is contained in:
TimSpan 2024-12-25 15:43:03 +08:00
parent 5c489b1e20
commit 3320c7bcec
1 changed files with 676 additions and 720 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

408
src/views/page/communitymanage.vue
View File

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