| | |
| | | <template> |
| | | <div :class="'wrapper' + (item._selected ? ' wrapper-select' : '')"> |
| | | <div v-if="item._type == '1'"> |
| | | <el-row justify="space-between"> |
| | | <el-space> |
| | | <el-tag v-if="noWarn" type="info" effect="dark" size="small" |
| | | >异常</el-tag |
| | | > |
| | | <el-tag v-else type="warning" effect="dark" size="small">异常</el-tag> |
| | | <el-text type="primary">{{ |
| | | item.pollutedData.startTime + ' - ' + item.pollutedData.endTime |
| | | }}</el-text> |
| | | </el-space> |
| | | <el-link type="primary" @click="emits('open', item)"> 详情 </el-link> |
| | | </el-row> |
| | | <el-col :span="24"> |
| | | <el-text type="primary">{{ |
| | | item.pollutedData.factorName + |
| | | formatException(item.pollutedData.exceptionType) + |
| | | ',' + |
| | | formatDistanceType(item.pollutedArea.distanceType) |
| | | }}</el-text> |
| | | <el-text :type="noWarn ? 'primary' : 'warning'"> |
| | | {{ |
| | | item.pollutedSource.sceneList.length == 0 |
| | | ? '未找到可疑污染源' |
| | | : '找到' + item.pollutedSource.sceneList.length + '个可疑污染源' |
| | | }} |
| | | </el-text> |
| | | <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="2"> </el-col> --> |
| | | </div> |
| | | <el-col :span="21"> |
| | | <el-row justify="space-between"> |
| | | <el-space> |
| | | <el-text type="primary" size="default"> |
| | | <el-icon><Timer /></el-icon> |
| | | {{ |
| | | item.pollutedData.startTime + ' - ' + item.pollutedData.endTime |
| | | }} |
| | | </el-text> |
| | | </el-space> |
| | | <el-link type="primary" @click="emits('open', item)"> 详情 </el-link> |
| | | </el-row> |
| | | <div> |
| | | <el-tag |
| | | effect="plain" |
| | | type="info" |
| | | size="small" |
| | | hit |
| | | round |
| | | class="m-r-4" |
| | | > |
| | | <div v-html="formatFactorName(item.pollutedData.factorName)"></div> |
| | | </el-tag> |
| | | <el-text type="primary"> |
| | | {{ item.pollutedData.exception + ',' }} |
| | | </el-text> |
| | | <el-text type="primary">{{ |
| | | formatDistanceType(item.pollutedArea.distanceType) |
| | | }}</el-text> |
| | | <el-text :type="noWarn ? 'primary' : '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-row> |
| | | <el-text type="danger">{{ item.advice }}</el-text> |
| | | </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="primary" size="default"> |
| | | <el-icon><Timer /></el-icon> |
| | | {{ |
| | | item.pollutedData.startTime + ' - ' + item.pollutedData.endTime |
| | | }} |
| | | </el-text> |
| | | </el-space> |
| | | <el-link type="primary" @click="emits('open', item)"> 详情 </el-link> |
| | | </el-row> |
| | | <div> |
| | | <el-tag |
| | | effect="plain" |
| | | type="info" |
| | | size="small" |
| | | hit |
| | | round |
| | | class="m-r-4" |
| | | > |
| | | <div v-html="formatFactorName(item.pollutedData.factorName)"></div> |
| | | </el-tag> |
| | | <el-text type="primary">{{ 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 justify="space-between"> |
| | | <el-space> |
| | | <el-tag type="primary" effect="dark" size="small">提醒</el-tag> |
| | | <el-text type="primary">{{ |
| | | item.pollutedData.startTime + ' - ' + item.pollutedData.endTime |
| | | }}</el-text> |
| | | </el-space> |
| | | <el-link type="primary" @click="emits('open', item)"> 详情 </el-link> |
| | | </el-row> |
| | | <el-col :span="24"> |
| | | <el-tag effect="plain" type="info" size="small" hit round class="m-r-4"> |
| | | <div v-html="formatFactorName(item.pollutedData.factorName)"></div> |
| | | </el-tag> |
| | | <el-text type="primary">{{ item.pollutedData.exception }}</el-text> |
| | | </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 |
| | |
| | | break; |
| | | } |
| | | } |
| | | |
| | | function formatFactorName(name) { |
| | | switch (name) { |
| | | case 'PM25': |
| | | return 'PM<sub>2.5</sub>'; |
| | | // return '<span>PM2.5</span>'; |
| | | 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: |
| | | break; |
| | | } |
| | | } |
| | | |
| | | function handleSetCenter(item, scene) { |
| | | MapUtil.setCenter([scene.longitude, scene.latitude], true); |
| | | emits('open', item); |
| | | } |
| | | </script> |
| | | <style scoped> |
| | | .wrapper { |
| | |
| | | .no-warning { |
| | | color: var(--el-text-color-disabled) !important; |
| | | } |
| | | .text-link { |
| | | width: 90%; |
| | | cursor: pointer; |
| | | } |
| | | </style> |