2025.7.4 动态溯源

riku

2025-07-04 d6e6f8b5b31e132e4597eb531168d3e88f3bda72

 src/views/sourcetrace/component/ClueRecordItem.vue

@@ -1,12 +1,128 @@
<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-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="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"
            style="color: black"
            size="small"
            hit
            round
            class="m-r-4"
          >
          <el-tag v-else type="warning" effect="dark" size="small">异常</el-tag>
            <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-link type="primary" @click="emits('open')"> 详情 </el-link>
      </el-row>
      <el-space>
        <el-icon color="#F56C6C" :size="40"><WarnTriangleFilled /></el-icon>
        <el-text type="primary">{{ 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="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"
            style="color: black"
            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>
@@ -14,33 +130,18 @@
        <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-col>
      <!-- <el-col :span="2"> </el-col> -->
    </div>
    <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-row>
      <el-text type="danger">{{ item.advice }}</el-text>
    </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-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 +167,7 @@
function formatDistanceType(value) {
  switch (value) {
    case 'TYPE1':
      return '50米以内';
      return '100米以内';
    case 'TYPE2':
      return '50米 - 500米以内';
    case 'TYPE3':
@@ -77,6 +178,34 @@
    default:
      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>
@@ -93,4 +222,8 @@
.no-warning {
  color: var(--el-text-color-disabled) !important;
}
.text-link {
  width: 90%;
  cursor: pointer;
}
</style>