动态溯源（待完成）

Riku

2025-06-11 5679cbbb630092a197d991cb41997a2d953261e9

动态溯源（待完成）

 src/api/index.js

@@ -13,10 +13,10 @@
}

if (debug) {
  ip1 = 'http://192.168.0.103:8084/';
  // ip1 = 'http://localhost:8084/';
  ws = `192.168.0.103:9031`;
  // ws = `localhost:9031`;
  // ip1 = 'http://192.168.0.103:8084/';
  ip1 = 'http://localhost:8084/';
  // ws = `192.168.0.103:9031`;
  ws = `localhost:9031`;
}

const $http = axios.create({

 src/components.d.ts

@@ -39,7 +39,6 @@
    ElFormItem: typeof import('element-plus/es')['ElFormItem']
    ElIcon: typeof import('element-plus/es')['ElIcon']
    ElInput: typeof import('element-plus/es')['ElInput']
    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
    ElLink: typeof import('element-plus/es')['ElLink']
    ElOption: typeof import('element-plus/es')['ElOption']
    ElPagination: typeof import('element-plus/es')['ElPagination']
@@ -57,6 +56,7 @@
    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
    ElTabPane: typeof import('element-plus/es')['ElTabPane']
    ElTabs: typeof import('element-plus/es')['ElTabs']
    ElTag: typeof import('element-plus/es')['ElTag']
    ElText: typeof import('element-plus/es')['ElText']
    FactorCheckbox: typeof import('./components/monitor/FactorCheckbox.vue')['default']
    FactorLegend: typeof import('./components/monitor/FactorLegend.vue')['default']

 src/components/map/MapScene.vue

@@ -105,7 +105,7 @@
              sceneIcon(t),
              res,
              false,
              false
              true
            );
            lableMarkMap.set(key, { show: true, layer });
          });

 src/utils/map/line.js

@@ -9,7 +9,8 @@
  // eslint-disable-next-line no-undef
  return new AMap.Polyline({
    path: path,
    strokeStyle: 'solid',
    // strokeStyle: 'solid',
    strokeStyle: 'dashed',
    isOutline: true,
    borderWeight: 1,
    outlineColor: 'white',
@@ -21,7 +22,7 @@
}

function drawDirection(path) {
  const polyline = newPolyline(path, '#02ffea');
  const polyline = newPolyline(path, '#ffd82a');
  map.add(polyline);
  return polyline;
}

 src/views/realtimemode/RealtimeMode.vue

@@ -137,7 +137,13 @@
                deviceCode: this.deviceCode,
                // startTime: '2025-01-16 11:34:00',
                // endTime: '2025-01-16 11:35:00',
                startTime: '2024-11-27 11:50:41',
                // startTime: '2025-01-20 12:40:00',
                // startTime: '2024-12-27 08:30:00',
                // startTime: '2024-12-13 16:35:00',
                // startTime: '2024-11-27 11:50:41', // Pm, 中距离工地
                // startTime: '2024-08-30 15:28:00', // voc 近距离汽修
                startTime: '2024-07-23 15:22:00',
                // startTime: '2024-07-23 14:39:00',
                endTime: '2025-01-16 11:51:41',
                page,
                perPage: 10

 src/views/sourcetrace/SourceTrace.vue

@@ -15,9 +15,14 @@
              ref="scrollContentRef"
              style="display: flex; width: fit-content"
            >
              <template v-for="(item, index) in streams" :key="index">
                <PollutedClueItem :item="item"></PollutedClueItem>
              </template>
            <TransitionGroup name="list">
              <div v-for="(item, index) in streams" :key="index">
                <PollutedClueItem
                  :item="item"
                  @showMarksAndPolygon="showMarksAndPolygon"
                ></PollutedClueItem>
              </div>
            </TransitionGroup>
            </div>
          </el-scrollbar>
        </template>
@@ -187,26 +192,6 @@
  });
}

function formatPercentage(value) {
  return Math.round(value * 100) + '%';
}

function formatDistanceType(value) {
  switch (value) {
    case 'TYPE1':
      return '50米';
    case 'TYPE2':
      return '50米 - 500米';
    case 'TYPE3':
      return '50米 - 1公里';
    case 'TYPE4':
      return '50米 - 2公里';

    default:
      break;
  }
}

/******************************************************************************************************************** */

/**
@@ -339,3 +324,22 @@
  margin-bottom: 4px;
}
</style>
<style>
.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}
</style>

 src/views/sourcetrace/UnderwayAdvice.vue

@@ -7,7 +7,7 @@
    width="400px"
  >
    <template #default>
      <template v-if="latestResult">
      <!-- <template v-if="latestResult">
        <el-row>
          <el-text size="small">{{ latestResult._timestr }}</el-text>
        </el-row>
@@ -25,7 +25,54 @@
            推荐路线总长{{ latestResult.direction.distance }}米
          </el-text>
        </el-row>
      </template> -->
      <TransitionGroup name="list">
        <div v-for="(item, index) in analysisResultList" :key="index">
          <template v-if="index == 0">
            <el-row justify="space-between">
              <el-text size="small">{{ item._timestr }}</el-text>
              <el-tag type="danger" effect="dark">最新线索</el-tag>
            </el-row>
            <el-space>
              <el-icon color="#F56C6C" :size="40"
                ><WarnTriangleFilled
              /></el-icon>
              <el-text>
                {{ item.advice }}
              </el-text>
            </el-space>
            <el-row justify="space-between">
              <el-link type="primary" :underline="true" @click="showPolyline">
                {{ lineShow ? '收起路线' : '定位路线' }}
              </el-link>
              <el-text size="small">
                推荐路线总长{{ item.direction.distance }}米
              </el-text>
            </el-row>
            <el-divider>历史线索</el-divider>
      </template>
          <template v-else>
            <el-row>
              <el-text size="small">{{ item._timestr }}</el-text>
            </el-row>
            <el-space>
              <!-- <el-icon color="#F56C6C" :size="40"><WarnTriangleFilled /></el-icon> -->
              <el-text>
                {{ item.advice }}
              </el-text>
            </el-space>
            <!-- <el-row justify="space-between">
              <el-link type="primary" :underline="true" @click="showPolyline">
                {{ lineShow ? '收起路线' : '定位路线' }}
              </el-link>
              <el-text size="small">
                推荐路线总长{{ item.direction.distance }}米
              </el-text>
            </el-row> -->
            <el-divider></el-divider>
          </template>
        </div>
      </TransitionGroup>
    </template>
    <template #footer> </template>
  </CardDialog>
@@ -105,5 +152,25 @@

:deep(.el-link) {
  --el-link-text-color: #23dad1;
  /* color: #ffd82a; */
}
</style>
<style>
.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}
</style>

 src/views/sourcetrace/component/PollutedClueItem.vue

@@ -5,7 +5,7 @@
    <el-row justify="space-between">
      <!-- <el-tag v-if="index == 0" type="danger">最新</el-tag> -->
      <el-text type="primary">{{
        '线索时间：' +
        '切片时间：' +
        item.pollutedData.startTime +
        ' - ' +
        item.pollutedData.endTime
@@ -39,7 +39,13 @@
      </el-col>
      <el-col :span="6">
        <el-statistic
          v-if="item.pollutedData.exceptionType == 4"
          title="变化幅度"
          :value="formatPercentage(item.pollutedData.avgPer)"
        />
        <el-statistic
          v-else-if="item.pollutedData.exceptionType == 9"
          title="变化速率"
          :value="formatPercentage(item.pollutedData.avgPer)"
        />
      </el-col>
@@ -146,6 +152,36 @@
const props = defineProps({
  item: Object
});

const emits = defineEmits(['showMarksAndPolygon']);

function showMarksAndPolygon(item) {
  emits('showMarksAndPolygon', item);
}

function formatPercentage(value) {
  return Math.round(value * 100) + '%';
}

function formatDistanceType(value) {
  switch (value) {
    case 'TYPE1':
      return '50米';
    case 'TYPE2':
      return '50米 - 500米';
    case 'TYPE3':
      return '50米 - 1公里';
    case 'TYPE4':
      return '50米 - 2公里';

    default:
      break;
  }
}

function formatChangeRate() {
  
}
</script>
<style scoped>
:deep(.el-statistic) {