2025.7.10 修改动态溯源模块

riku

2025-07-10 2cffd9c7db5c3191cf172641c800e5a328d6f3af

 src/views/sourcetrace/component/PollutedClueItem.vue

@@ -1,5 +1,5 @@
<template>
  <CardDialog
  <!-- <CardDialog
    :model-value="modelValue"
    @update:model-value="handleDialogShow"
    title="污染线索"
@@ -7,22 +7,38 @@
    :modal="false"
    width="400px"
  >
    <template #default>
      <template v-if="item">
    <template #default> -->
  <BaseCard v-if="item" v-show="modelValue">
    <template #content>
      <el-scrollbar class="clue-card">
        <el-row justify="space-between" align="bottom">
          <el-text type="danger" style="font-weight: 600" size="large">
            污染线索
          </el-text>

          <el-link
            type="info"
            :underline="true"
            @click="handleDialogShow(!modelValue)"
          >
            {{ modelValue ? '收起' : '打开' }}
            <el-icon size="large"><CircleClose /></el-icon>
          </el-link>
        </el-row>
        <el-row>
          <el-text type="primary" size="small">{{ item._timestr }}</el-text>
          <el-text type="info" size="small">{{ item._timestr }}</el-text>
        </el-row>
        <el-space>
          <el-icon color="#F56C6C" :size="40"><WarnTriangleFilled /></el-icon>
          <el-text type="primary">
          <el-text type="info">
            {{ item.advice }}
          </el-text>
        </el-space>
        <el-row justify="space-between">
          <el-text type="primary" size="small">
          <el-text type="info" size="small">
            推荐路线总长{{ item.direction.distance }}米
          </el-text>
          <el-link type="primary" size="small" @click="showPolyline">
          <el-link type="info" size="small" @click="showPolyline">
            {{ lineShow ? '收起路线' : '定位路线' }}
          </el-link>
        </el-row>
@@ -32,10 +48,12 @@
        >
          <el-table-column prop="_count" width="42" label="溯源次数" />
        </SceneTable>
      </el-scrollbar>
      </template>
    </template>
  </BaseCard>
  <!-- </template>
    <template #footer> </template>
  </CardDialog>
  </CardDialog> -->
</template>
<script setup>
import { ref, onMounted, onUnmounted, reactive, watch } from 'vue';
@@ -62,6 +80,7 @@
watch(
  () => [props.item, props.modelValue],
  (nV, oV) => {
    // 线索信息变更后，重新绘制路线图
    if (nV[0] != oV[0]) {
      const polyline = mapLine.drawDirection(
        nV[0].direction.paths.map((v) => [v.first, v.second])
@@ -72,8 +91,11 @@
      }
      lastPolyline = polyline;
      lineShow.value = true;
    } else if (nV[1]) {
      showPolyline(true);
    }
    // 显示隐藏变化时，对应显示或隐藏路线
    else if (nV[1] != oV[1]) {
      // showPolyline(nV[1]);
      handleDialogShow(nV[1]);
    }
  }
);
@@ -132,4 +154,13 @@
:deep(.el-link) {
  --el-link-text-color: #23dad1;
} */

.clue-card {
  padding: 0 4px;
  /* margin-right: 2px; */
  width: 340px;
  height: 360px;
  /* border-right: 1px solid white; */
  border-radius: 2px;
}
</style>