riku
2025-07-16 c23ac06446a9a1edc41cc13723e5d0b8eabdfd63
src/views/sourcetrace/component/ClueRecordItem.vue
@@ -1,46 +1,135 @@
<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="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="primary" @click="emits('open')"> 详情 </el-link>
        <el-link type="info" @click="emits('open')"> 详情 </el-link>
      </el-row>
      <el-text type="danger">{{ item.advice }}</el-text>
      <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
@@ -66,7 +155,7 @@
function formatDistanceType(value) {
  switch (value) {
    case 'TYPE1':
      return '50米以内';
      return '100米以内';
    case 'TYPE2':
      return '50米 - 500米以内';
    case 'TYPE3':
@@ -77,6 +166,40 @@
    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>
@@ -93,4 +216,8 @@
.no-warning {
  color: var(--el-text-color-disabled) !important;
}
.text-link {
  width: 90%;
  cursor: pointer;
}
</style>