<template>
|
<div :class="'wrapper' + (item._selected ? ' wrapper-select' : '')">
|
<el-row v-if="item._type == '1'">
|
<el-col :span="3">
|
<el-tag :type="noWarn ? 'info' : 'warning'" effect="dark" size="small"
|
>溯源</el-tag
|
>
|
</el-col>
|
<el-col :span="21">
|
<el-row justify="space-between">
|
<el-space>
|
<el-text type="info" size="default">
|
<el-icon><Timer /></el-icon>
|
{{
|
item.pollutedData._startTime +
|
' - ' +
|
item.pollutedData._endTime
|
}}
|
</el-text>
|
</el-space>
|
<el-link type="info" @click="emits('open', item)"> 详情 </el-link>
|
</el-row>
|
<div>
|
<el-tag
|
effect="plain"
|
type="info"
|
style="color: black"
|
size="small"
|
hit
|
round
|
class="m-r-4"
|
>
|
<div
|
v-html="formatFactorName(item.pollutedData.statisticMap)"
|
></div>
|
</el-tag>
|
<el-text type="info">
|
{{ item.pollutedData.exception + '，' }}
|
</el-text>
|
<el-text type="info">{{
|
formatDistanceType(item.pollutedArea.distanceType)
|
}}</el-text>
|
<el-text :type="noWarn ? 'info' : 'warning'">
|
{{
|
item.pollutedSource.sceneList.length == 0
|
? '未找到风险源'
|
: '找到' + item.pollutedSource.sceneList.length + '个风险源'
|
}}
|
</el-text>
|
</div>
|
<div v-if="item.pollutedSource.sceneList.length > 0">
|
<div v-for="s in item.pollutedSource.sceneList" :key="s.guid">
|
<img style="width: 24px" :src="sceneIcon(s.typeId)" :alt="s.type" />
|
<el-text
|
type="warning"
|
tag="ins"
|
truncated
|
class="text-link"
|
@click="handleSetCenter(item, s)"
|
>
|
{{ s.name }}
|
</el-text>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
<div v-else-if="item._type == '2'">
|
<el-row justify="space-between">
|
<el-tag type="danger" effect="dark" size="small">线索</el-tag>
|
<el-link type="info" @click="emits('open')"> 详情 </el-link>
|
</el-row>
|
<el-space>
|
<el-icon color="#F56C6C" :size="40"><WarnTriangleFilled /></el-icon>
|
<el-text type="info">{{ item.advice }}</el-text>
|
</el-space>
|
</div>
|
<el-row v-else-if="item._type == '3'">
|
<el-col :span="3">
|
<el-tag type="primary" effect="dark" size="small">提醒</el-tag>
|
</el-col>
|
<el-col :span="21">
|
<el-row justify="space-between">
|
<el-space>
|
<el-text type="info" size="default">
|
<el-icon><Timer /></el-icon>
|
{{
|
item.pollutedData._startTime +
|
' - ' +
|
item.pollutedData._endTime
|
}}
|
</el-text>
|
</el-space>
|
<el-link type="info" @click="emits('open', item)"> 详情 </el-link>
|
</el-row>
|
<div>
|
<el-tag
|
effect="plain"
|
type="info"
|
size="small"
|
style="color: black"
|
hit
|
round
|
class="m-r-4"
|
>
|
<div
|
v-html="formatFactorName(item.pollutedData.statisticMap)"
|
></div>
|
</el-tag>
|
<el-text type="info">{{ item.pollutedData.exception }}</el-text>
|
</div>
|
<div v-if="item.pollutedSource.sceneList.length > 0">
|
<div v-for="s in item.pollutedSource.sceneList" :key="s.guid">
|
<img style="width: 24px" :src="sceneIcon(s.typeId)" :alt="s.type" />
|
<el-text
|
type="warning"
|
tag="ins"
|
truncated
|
class="text-link"
|
@click="handleSetCenter(item, s)"
|
>
|
{{ s.name }}
|
</el-text>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
<script setup>
|
import { computed } from 'vue';
|
import { sceneTypes, sceneIcon } from '@/constant/scene-types';
|
import MapUtil from '@/utils/map/util';
|
|
const props = defineProps({
|
item: Object
|
});
|
|
const emits = defineEmits(['open']);
|
|
const noWarn = computed(() => {
|
return props.item && props.item.pollutedSource.sceneList.length == 0;
|
});
|
|
function formatException(value) {
|
switch (value) {
|
case 4:
|
return '量级突变';
|
case 9:
|
return '快速上升';
|
default:
|
return '量级突变';
|
}
|
}
|
|
function formatDistanceType(value) {
|
switch (value) {
|
case 'TYPE1':
|
return '100米以内';
|
case 'TYPE2':
|
return '50米 - 500米以内';
|
case 'TYPE3':
|
return '50米 - 1公里以内';
|
case 'TYPE4':
|
return '50米 - 2公里以内';
|
|
default:
|
break;
|
}
|
}
|
|
function formatFactorName(statisticMap) {
|
const mapName = (n) => {
|
switch (n) {
|
case 'PM25':
|
return 'PM<sub>2.5</sub>';
|
case 'PM10':
|
return 'PM<sub>10</sub>';
|
case 'NO2':
|
return 'NO<sub>2</sub>';
|
case 'H2S':
|
return 'H<sub>2</sub>S';
|
case 'SO2':
|
return 'SO<sub>2</sub>';
|
case 'O3':
|
return 'O<sub>3</sub>';
|
case 'VOC':
|
return 'VOC<sub>s</sub>';
|
default:
|
return '';
|
}
|
};
|
let name = [];
|
for (const key in statisticMap) {
|
const value = statisticMap[key];
|
name.push(mapName(value.factorName));
|
}
|
return name.join('、');
|
}
|
|
function handleSetCenter(item, scene) {
|
MapUtil.setCenter([scene.longitude, scene.latitude], true);
|
emits('open', item);
|
}
|
</script>
|
<style scoped>
|
.wrapper {
|
margin-bottom: 8px;
|
border-bottom: 1px dashed rgba(253, 253, 253, 0.651);
|
}
|
.wrapper-select {
|
background: linear-gradient(
|
rgba(228, 228, 228, 0.274),
|
rgba(64, 165, 248, 0.089)
|
);
|
}
|
.no-warning {
|
color: var(--el-text-color-disabled) !important;
|
}
|
.text-link {
|
width: 90%;
|
cursor: pointer;
|
}
|
</style>
|
