From 3320c7bcecd8c0ca205c144d0f29116027b2a890 Mon Sep 17 00:00:00 2001
From: TimSpan <cat20201314@163.com>
Date: Wed, 25 Dec 2024 15:43:03 +0800
Subject: [PATCH] Update communitymanage.vue

---
 src/views/page/communitymanage.vue | 1396 ++++++++++++++--------------
 1 file changed, 676 insertions(+), 720 deletions(-)

diff --git a/src/views/page/communitymanage.vue b/src/views/page/communitymanage.vue
index 7cf0daae..2256601b 100644
--- a/src/views/page/communitymanage.vue
+++ b/src/views/page/communitymanage.vue
@@ -1,826 +1,782 @@
 <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;">
-				<li style="margin-bottom:20px">
-					<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:#000000;margin-left:10px">
-						{{infoData.timestamp}}
-					</span>
-				</li>
-				<li style="margin-bottom:20px">
-					<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:#000000;margin-left:10px">
-						{{infoData.alarmSource}}
-					</span>
-				</li>
-				<li style="margin-bottom:20px">
-					<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:#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:#000000;margin-left:10px">
-						{{infoData.description}}
-					</span>
-				</li>
-				<li style="margin-bottom:20px">
-					<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:#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>
-						<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>
-						<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>
-						<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>
-						<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>
-						<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>
-						<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:#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-item v-for="(item,index) in upstatuslist" :key="index">
-					<p>{{toCn(item.operation)}}</p>
-					<p>时间:{{item.timestamp}}</p>
-					<p>操作者: {{item.operatorType}}</p>
-				</a-timeline-item>
-			</a-timeline>
-			<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;">
-				<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>
-			</div>
-			<div style="margin-top:10px;">
-				<ul v-if="datainfo">
-					<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="">
-					</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>
-				</div>
-			</div>
-		</div>
-		<el-dialog title="工单发送" v-model="dialogVisible" width="30%">
-			<el-divider content-position="left">{{form.title}}</el-divider>
-			<el-form :model="form" label-width="80px">
-				<el-form-item label="标题">
-					<el-input v-model="form.title"></el-input>
-				</el-form-item>
-				<el-form-item label="内容">
-					<el-input type="textarea" v-model="form.content"></el-input>
-				</el-form-item>
-				<el-form-item label="地址">
-					<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-form-item>
-			</el-form>
-		</el-dialog>
-	</div>
+  <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">
+        <li style="margin-bottom: 20px">
+          <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: #000000; margin-left: 10px">
+            {{ infoData.timestamp }}
+          </span>
+        </li>
+        <li style="margin-bottom: 20px">
+          <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: #000000; margin-left: 10px">
+            {{ infoData.alarmSource }}
+          </span>
+        </li>
+        <li style="margin-bottom: 20px">
+          <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: #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: #000000; margin-left: 10px">
+            {{ infoData.description }}
+          </span>
+        </li>
+        <li style="margin-bottom: 20px">
+          <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: #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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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: #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-item v-for="(item, index) in upstatuslist" :key="index">
+          <p>{{ toCn(item.operation) }}</p>
+          <p>时间:{{ item.timestamp }}</p>
+          <p>操作者: {{ item.operatorType }}</p>
+        </a-timeline-item>
+      </a-timeline>
+      <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">
+        <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>
+      </div>
+      <div style="margin-top: 10px">
+        <ul v-if="datainfo">
+          <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="" />
+          </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>
+        </div>
+      </div>
+    </div>
+    <el-dialog title="工单发送" v-model="dialogVisible" width="30%">
+      <el-divider content-position="left">{{ form.title }}</el-divider>
+      <el-form :model="form" label-width="80px">
+        <el-form-item label="标题">
+          <el-input v-model="form.title"></el-input>
+        </el-form-item>
+        <el-form-item label="内容">
+          <el-input type="textarea" v-model="form.content"></el-input>
+        </el-form-item>
+        <el-form-item label="地址">
+          <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-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
 </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();
-	onMounted(() => {
-		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', {
-			range: 1000,
-			multiAlarmId: multiAlarmId,
-		}).then((res) => {
-			if (res.code == 0) {
-				console.log('ress', res)
-				datainfo.value = res.data
-				datainfo.value.ipcList.map((item) => {
-					const marker = new AMap.Marker({
-						position: new AMap.LngLat(item['longitude'], item['latitude']),
-						offset: new AMap.Pixel(-10, -10),
-						icon: new AMap.Icon({
-							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]);
-					})
-					state.map.setZoomAndCenter(12, [item['longitude'], item['latitude']])
-					state.map.add(marker);
-				})
-				datainfo.value.mobileList.map((item) => {
-					const marker = new AMap.Marker({
-						position: new AMap.LngLat(item['longitude'], item['latitude']),
-						offset: new AMap.Pixel(-10, -10),
-						icon: new AMap.Icon({
-							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]);
-					})
-					state.map.setZoomAndCenter(12, [item['longitude'], item['latitude']])
-					state.map.add(marker);
-				})
-			}
-		})
-	};
-	//关闭
-	const close = (info) => {
-		// console.log('data', info)
-		api.post('/multialarm/client/alarm_event/close', {
-			eventId: info.multiAlarmId,
-		}).then((res) => {
-			// console.log('关闭接口', res)
-			if (res.code == 0) {
-				ElMessage({
-					message: '关闭成功',
-					type: 'success',
-				})
-			} else {
-				ElMessage.error('关闭失败')
-			}
-		})
-	};
-	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', {
-			range: value,
-			multiAlarmId: JSON.parse(router.currentRoute.value.query.data)['multiAlarmId'],
-		}).then((res) => {
-			if (res.code == 0) {
-				console.log('ress', res)
-				datainfo.value = res.data;
-			}
-		})
-	};
-	const totypecn = (data) => {
-		if (data == '0') {
-			return '未核验'
-		} else if (data == '1') {
-			return '核验为假'
-		} else if (data == '2') {
-			return '核验为真'
-		}
-	};
-	const toCn = (data) => {
-		if (data == 'report') {
-			return '信息上报'
-		} else if (data == 'modify.userinfo') {
-			return '修改联系人信息'
-		} else if (data == 'modify.type') {
-			return '修改警报类型'
-		} else if (data == 'modify.fake') {
-			return '修改警报核验结果'
-		} else if (data == 'modify.description') {
-			return '修改警情描述'
-		} else if (data == 'file.add') {
-			return '添加文件'
-		} else if (data == 'Lock') {
-			return '警情信息锁定'
-		} else if (data == 'unLocKk') {
-			return '警情信息解锁'
-		} else if (data == 'change.state') {
-			return '修改状态'
-		}
-	};
-	//消息下发
-	const checked1 = ref();
-	const dialogVisible = ref(false);
-	const form = reactive({
-		title: '',
-		address: '',
-		content: '',
-	})
-	const donwdata = () => {
-		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;
-		}
-	};
-	const send = () => {
-		// console.log('发送', form, JSON.parse(router.currentRoute.value.query.data), checked1.value)
-		let data = {
-			address: checked1.value.address,
-			borough: '',
-			checkpoints: "",
-			closetime: 0,
-			content: form.content,
-			createmode: '原发',
-			detachment: '火炬警务区',
-			latitude: 31.240739,
-			longitude: 121.19686,
-			operator: {
-				operator: localStorage.getItem('loginname'),
-				operatordevice: '',
-				operatordevicetype: '',
-				operatortype: "brigade",
-			},
-			receiver: checked1.value.deviceId,
-			relatealarmdata: '',
-			relatealarmid: JSON.parse(router.currentRoute.value.query.data)['multiAlarmId'],
-			relatealarmtype: 'manual',
-			sender: localStorage.getItem('loginname'),
-			station: checked1.value.station,
-			status: '',
-			title: form.title,
-			type: '',
-		}
-		api.post('/iotserver/alarmtask/add', data).then((res) => {
-			if (res.code == 0) {
-				// console.log('ress', res)
-				ElMessage.success({
-					message: '恭喜你，这是一条成功消息',
-					type: 'success',
-				})
-				dialogVisible.value = false;
-			}
-		})
-		api.post('https://www.jy-sh.com/frectr/client/notice/sendmgtt', {
-			message: JSON.stringify(data),
-			topic: checked1.value.deviceId + '_rtmtranfer'
-		}).then((res) => {
-			if (res.code == 0) {
-				console.log('ress', res)
-			}
-		})
+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()
+  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()
+})
 
-	};
+const datainfo = ref()
+const getData = (multiAlarmId: any) => {
+  api
+    .post('/multialarm/client/alarm_event/get_all_resource', {
+      range: 1000,
+      multiAlarmId: multiAlarmId
+    })
+    .then((res) => {
+      if (res.code == 0) {
+        console.log('ress', res)
+        datainfo.value = res.data
+        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),
+            icon: new AMap.Icon({
+              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])
+          })
+          state.map.setZoomAndCenter(12, [item['longitude'], item['latitude']])
+          state.map.add(marker)
+        })
+        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),
+            icon: new AMap.Icon({
+              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])
+          })
+          state.map.setZoomAndCenter(12, [item['longitude'], item['latitude']])
+          state.map.add(marker)
+        })
+      }
+    })
+}
+//关闭
+const close = (info: any) => {
+  // console.log('data', info)
+  api
+    .post('/multialarm/client/alarm_event/close', {
+      eventId: info.multiAlarmId
+    })
+    .then((res) => {
+      // console.log('关闭接口', res)
+      if (res.code == 0) {
+        ElMessage({
+          message: '关闭成功',
+          type: 'success'
+        })
+      } else {
+        ElMessage.error('关闭失败')
+      }
+    })
+}
+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', {
+      range: value,
+      multiAlarmId: JSON.parse(router.currentRoute.value.query.data)['multiAlarmId']
+    })
+    .then((res) => {
+      if (res.code == 0) {
+        console.log('ress', res)
+        datainfo.value = res.data
+      }
+    })
+}
+const totypecn = (data: any) => {
+  if (data == '0') {
+    return '未核验'
+  } else if (data == '1') {
+    return '核验为假'
+  } else if (data == '2') {
+    return '核验为真'
+  }
+}
+const toCn = (data: any) => {
+  if (data == 'report') {
+    return '信息上报'
+  } else if (data == 'modify.userinfo') {
+    return '修改联系人信息'
+  } else if (data == 'modify.type') {
+    return '修改警报类型'
+  } else if (data == 'modify.fake') {
+    return '修改警报核验结果'
+  } else if (data == 'modify.description') {
+    return '修改警情描述'
+  } else if (data == 'file.add') {
+    return '添加文件'
+  } else if (data == 'Lock') {
+    return '警情信息锁定'
+  } else if (data == 'unLocKk') {
+    return '警情信息解锁'
+  } else if (data == 'change.state') {
+    return '修改状态'
+  }
+}
+//消息下发
+const checked1 = ref()
+const dialogVisible = ref(false)
+const form = reactive({
+  title: '',
+  address: '',
+  content: ''
+})
+const donwdata = () => {
+  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
+  }
+}
+const send = () => {
+  // console.log('发送', form, JSON.parse(router.currentRoute.value.query.data), checked1.value)
+  let data = {
+    address: checked1.value.address,
+    borough: '',
+    checkpoints: '',
+    closetime: 0,
+    content: form.content,
+    createmode: '原发',
+    detachment: '火炬警务区',
+    latitude: 31.240739,
+    longitude: 121.19686,
+    operator: {
+      operator: localStorage.getItem('loginname'),
+      operatordevice: '',
+      operatordevicetype: '',
+      operatortype: 'brigade'
+    },
+    receiver: checked1.value.deviceId,
+    relatealarmdata: '',
+    relatealarmid: JSON.parse(router.currentRoute.value.query.data)['multiAlarmId'],
+    relatealarmtype: 'manual',
+    sender: localStorage.getItem('loginname'),
+    station: checked1.value.station,
+    status: '',
+    title: form.title,
+    type: ''
+  }
+  api.post('/iotserver/alarmtask/add', data).then((res) => {
+    if (res.code == 0) {
+      // console.log('ress', res)
+      ElMessage.success({
+        message: '恭喜你，这是一条成功消息',
+        type: 'success'
+      })
+      dialogVisible.value = false
+    }
+  })
+  api
+    .post('https://www.jy-sh.com/frectr/client/notice/sendmgtt', {
+      message: JSON.stringify(data),
+      topic: checked1.value.deviceId + '_rtmtranfer'
+    })
+    .then((res) => {
+      if (res.code == 0) {
+        console.log('ress', res)
+      }
+    })
+}
 
-	var state = {
-		id: "indexx",
-		map: null as any,
-	};
-	const tolive = (item) => {
-		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 = "";
-		if (type == '1' || type == '3') {
-			return `
+var state = {
+  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: 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 {
-			return `
+  } else {
+    return `
 			    <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: any, type: any) => {
+  //定义顶部标题
+  var mdinfoTop = document.createElement('div')
+  mdinfoTop.className = 'mapPopInfo'
 
-	}
-	const createSubstanceInfowindow = (obj, type) => {
-		//定义顶部标题
-		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
+  closeX.onclick = () => {
+    deviceInfoWindow.close()
+  }
 
-		var closeX = document.createElement("img");
-		closeX.src = closeimag;
-		closeX.onclick = () => {
-			deviceInfoWindow.close();
-		};
-
-		var popMian = document.createElement("div");
-		popMian.className = "mapPopInfo-main"
-		popMian.innerHTML = `<div>
+  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;
-	}
-	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']),
-				offset: new AMap.Pixel(-10, -10),
-				content: `<div class="indexMarkerImg">
+  return mdinfoTop
+}
+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']),
+      offset: new AMap.Pixel(-10, -10),
+      content: `<div class="indexMarkerImg">
 										 <img style="width:20px;height:20px;left:12px;top:12px" src='${image1}'>
 										<div class="markerClass">
 											<div></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]);
-			})
-			state.map.setZoomAndCenter(12, [JSON.parse(router.currentRoute.value.query.data)['longitude'], JSON.parse(router.currentRoute.value.query.data)['latitude']])
-			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);
-	};
+									</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])
+    })
+    state.map.setZoomAndCenter(12, [JSON.parse(router.currentRoute.value.query.data)['longitude'], JSON.parse(router.currentRoute.value.query.data)['latitude']])
+    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;
-	}
+:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-timeline .ant-timeline-item-head-blue) {
+  color: #2cb7c7;
+  border-color: #2cb7c7;
+}
 
-	:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-timeline .ant-timeline-item-head) {
-		width: 10px;
-		height: 10px;
-	}
+:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-timeline .ant-timeline-item-head) {
+  width: 10px;
+  height: 10px;
+}
 
-	:deep(.el-checkbox.el-checkbox--large .el-checkbox__label) {
-		color: #868686;
-	}
+:deep(.el-checkbox.el-checkbox--large .el-checkbox__label) {
+  color: #868686;
+}
 
-	:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-timeline .ant-timeline-item-tail) {
-		border-inline-start: 2px solid #2CB7C7;
-		inset-inline-start: 4px;
-	}
+:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-timeline .ant-timeline-item-tail) {
+  border-inline-start: 2px solid #2cb7c7;
+  inset-inline-start: 4px;
+}
 
-	:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-timeline .ant-timeline-item-head) {
-		// background-color: transparent;
-	}
+:deep(:where(.css-dev-only-do-not-override-1qb1s0s).ant-timeline .ant-timeline-item-head) {
+  // background-color: transparent;
+}
 
-	: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;
-	}
+: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;
+}
 
-	:deep(.el-input-number__decrease) {
-		border-right: 1px solid #1F9BD9;
-	}
+:deep(.el-input-number__decrease) {
+  border-right: 1px solid #1f9bd9;
+}
 
-	:deep(.el-input-number__increase) {
-		background: transparent;
-		border-left: 1px solid #1F9BD9;
-	}
+:deep(.el-input-number__increase) {
+  background: transparent;
+  border-left: 1px solid #1f9bd9;
+}
 
-	:deep(.el-input-number__decrease, .el-input-number__increase) {
-		background: transparent;
-		background-color: transparent;
-	}
+:deep(.el-input-number__decrease, .el-input-number__increase) {
+  background: transparent;
+  background-color: transparent;
+}
 
-	:deep(.el-checkbox__inner) {
-		background-color: transparent;
-	}
+:deep(.el-checkbox__inner) {
+  background-color: transparent;
+}
 
-	:deep(.el-checkbox) {
-		color: #fff;
-	}
+:deep(.el-checkbox) {
+  color: #fff;
+}
 
-	.indexx {
-		width: 100%;
-		height: 100%;
+.indexx {
+  width: 100%;
+  height: 100%;
 
-		.titleLeftBg {
-			width: 100%;
-			line-height: 32px;
-			color: #fff;
-			text-indent: 30px;
-			font-size: 16px;
-			font-family: ysbth;
-			font-weight: 600;
+  .titleLeftBg {
+    width: 100%;
+    line-height: 32px;
+    color: #fff;
+    text-indent: 30px;
+    font-size: 16px;
+    font-family: ysbth;
+    font-weight: 600;
+  }
 
-		}
+  .left-cont {
+    width: 350px;
+    height: 100%;
+    background-color: #f2f3f5;
+    z-index: 999;
+    position: absolute;
+    padding: 10px;
 
-		.left-cont {
-			width: 350px;
-			height: 100%;
-			background-color: #F2F3F5;
-			z-index: 999;
-			position: absolute;
-			padding: 10px;
+    .titleLeftBg {
+      width: 100%;
+      line-height: 32px;
+      color: #616161;
+      text-indent: 30px;
+      font-size: 16px;
+      font-family: ysbth;
+      font-weight: 600;
+      text-indent: 30px;
+      font-size: 16px;
+      font-family: ysbth;
+      font-weight: 600;
+    }
+  }
 
-			.titleLeftBg {
-				width: 100%;
-				line-height: 32px;
-				color: #616161;
-				text-indent: 30px;
-				font-size: 16px;
-				font-family: ysbth;
-				font-weight: 600;
-				text-indent: 30px;
-				font-size: 16px;
-				font-family: ysbth;
-				font-weight: 600;
+  .right-cont {
+    width: 350px;
+    height: 100%;
+    background-color: #f2f3f5;
+    z-index: 999;
+    position: absolute;
+    right: 0;
+    padding: 10px;
 
-			}
-		}
+    .titleLeftBg {
+      width: 100%;
+      line-height: 32px;
+      color: #616161;
+      text-indent: 30px;
+      font-size: 16px;
+      font-family: ysbth;
+      font-weight: 600;
+      text-indent: 30px;
+      font-size: 16px;
+      font-family: ysbth;
+      font-weight: 600;
+    }
+  }
+}
 
-		.right-cont {
-			width: 350px;
-			height: 100%;
-			background-color: #F2F3F5;
-			z-index: 999;
-			position: absolute;
-			right: 0;
-			padding: 10px;
+.mapPopInfo {
+  width: 400px;
+}
 
-			.titleLeftBg {
-				width: 100%;
-				line-height: 32px;
-				color: #616161;
-				text-indent: 30px;
-				font-size: 16px;
-				font-family: ysbth;
-				font-weight: 600;
-				text-indent: 30px;
-				font-size: 16px;
-				font-family: ysbth;
-				font-weight: 600;
-			}
-		}
-	}
+.mapPopInfo-top {
+  height: 33px;
+  line-height: 33px;
+  background: linear-gradient(to right, #0d6295, #0872b1, #0872b18c);
+  padding: 0 15px;
+  border: solid 2px #2d94b5;
+  border-bottom: solid 1px #54bbda;
+}
 
-	.mapPopInfo {
-		width: 400px;
+.mapPopInfo-top > img {
+  float: right;
+  margin: 3px 0;
+}
 
-	}
+.mapPopInfo-top > span > span {
+  float: left;
+  width: 330px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
-	.mapPopInfo-top {
-		height: 33px;
-		line-height: 33px;
-		background: linear-gradient(to right, #0d6295, #0872b1, #0872b18c);
-		padding: 0 15px;
-		border: solid 2px #2d94b5;
-		border-bottom: solid 1px #54bbda
-	}
+.mapPopInfo-main {
+  padding: 15px;
+  background: #13213bab;
+  box-shadow: inset 1px 1px 14px 2px #32689e;
+  border: solid 2px #2d94b5;
+  border-top: 0;
+}
 
-	.mapPopInfo-top>img {
-		float: right;
-		margin: 3px 0;
-	}
+.mapPopInfo-main > div > p {
+  line-height: 30px;
+}
 
+.mapPopInfo-main > div > p > span:nth-child(3) {
+  margin-left: 10px;
+}
 
-	.mapPopInfo-top>span>span {
-		float: left;
-		width: 330px;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
+.mapPopInfo-main > div > p > button {
+  height: 26px;
+  line-height: 26px;
+  background: none;
+  border: 1px solid #2081c1;
+  box-shadow: 0 0 3px 3px #244b68;
+}
 
-	.mapPopInfo-main {
-		padding: 15px;
-		background: #13213bab;
-		box-shadow: inset 1px 1px 14px 2px #32689e;
-		border: solid 2px #2d94b5;
-		border-top: 0;
-	}
+.amap-marker-content {
+  white-space: normal !important;
+}
 
-	.mapPopInfo-main>div>p {
+.amap-info-contentContainer.bottom-center {
+  padding-bottom: 0 !important;
+}
 
-		line-height: 30px;
-	}
+.indexMarkerImg {
+  width: 32px;
+  height: 60px;
+  border-radius: 50%;
+  position: relative;
+}
 
-	.mapPopInfo-main>div>p>span:nth-child(3) {
-		margin-left: 10px;
-	}
+.indexMarkerImg > img {
+  position: absolute;
+}
 
-	.mapPopInfo-main>div>p>button {
-		height: 26px;
-		line-height: 26px;
-		background: none;
-		border: 1px solid #2081C1;
-		box-shadow: 0 0 3px 3px #244b68;
-	}
+.indexMarkerImg > img {
+  width: 100%;
+  height: 100%;
+  left: 4px;
+  top: 4px;
+  z-index: 20;
+}
 
+@keyframes jumper {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
 
+  5% {
+    opacity: 1;
+  }
 
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
 
-	.amap-marker-content {
-		white-space: normal !important;
-	}
+.markerClass {
+  position: relative;
+  left: 28px;
+  top: 33px;
+  right: 0;
+  bottom: 0;
+  width: 40px;
+  height: 40px;
+}
 
-	.amap-info-contentContainer.bottom-center {
-		padding-bottom: 0 !important;
-	}
+.markerClass > div {
+  background-color: #f4090a;
+  width: 15px;
+  height: 15px;
+  border-radius: 100%;
+  margin: 2px;
+  animation-fill-mode: both;
+  position: absolute;
+  left: -80px;
+  top: -86px;
+  opacity: 0;
+  margin: 0;
+  width: 75px;
+  height: 75px;
+  animation: jumper 3s 0s linear infinite;
+}
 
-	.indexMarkerImg {
-		width: 32px;
-		height: 60px;
-		border-radius: 50%;
-		position: relative;
-	}
+.markerClass > div:nth-child(2) {
+  -webkit-animation-delay: 0.33333s;
+  animation-delay: 0.33333s;
+}
 
-	.indexMarkerImg>img {
-		position: absolute;
-	}
+.markerClass > div:nth-child(3) {
+  -webkit-animation-delay: 0.66666s;
+  animation-delay: 0.66666s;
+}
 
-	.indexMarkerImg>img {
-		width: 100%;
-		height: 100%;
-		left: 4px;
-		top: 4px;
-		z-index: 20;
-	}
+.riskMarkerImg {
+  overflow: hidden;
+  margin-top: 5px;
+}
 
-	@keyframes jumper {
-		0% {
-			transform: scale(0);
-			opacity: 0;
-		}
+.riskMarkerImg > span {
+  float: left;
+}
 
-		5% {
-			opacity: 1;
-		}
+.riskMarkerImg > img {
+  float: left;
+  width: 120px;
+  height: 80px;
+  margin: 0 10px;
+  border-radius: 4px;
+}
 
-		100% {
-			transform: scale(1);
-			opacity: 0;
-		}
-	}
-
-	.markerClass {
-		position: relative;
-		left: 28px;
-		top: 33px;
-		right: 0;
-		bottom: 0;
-		width: 40px;
-		height: 40px;
-	}
-
-	.markerClass>div {
-		background-color: #f4090a;
-		width: 15px;
-		height: 15px;
-		border-radius: 100%;
-		margin: 2px;
-		animation-fill-mode: both;
-		position: absolute;
-		left: -80px;
-		top: -86px;
-		opacity: 0;
-		margin: 0;
-		width: 75px;
-		height: 75px;
-		animation: jumper 3s 0s linear infinite;
-	}
-
-	.markerClass>div:nth-child(2) {
-		-webkit-animation-delay: 0.33333s;
-		animation-delay: 0.33333s;
-	}
-
-	.markerClass>div:nth-child(3) {
-		-webkit-animation-delay: 0.66666s;
-		animation-delay: 0.66666s;
-	}
-
-
-	.riskMarkerImg {
-		overflow: hidden;
-		margin-top: 5px;
-	}
-
-	.riskMarkerImg>span {
-		float: left;
-	}
-
-	.riskMarkerImg>img {
-		float: left;
-		width: 120px;
-		height: 80px;
-		margin: 0 10px;
-		border-radius: 4px;
-	}
-
-	.riskMarkerImg>span:last-child {
-		width: 120px;
-		height: 80px;
-		background: #000;
-		margin-left: 10px;
-		border-radius: 4px;
-	}
-</style>
\ No newline at end of file
+.riskMarkerImg > span:last-child {
+  width: 120px;
+  height: 80px;
+  background: #000;
+  margin-left: 10px;
+  border-radius: 4px;
+}
+</style>