2025.7.18 动态溯源-测试版本

riku

2025-07-18 306ef09707d6bcf9ffa67de55f86ab6f4362deee

 src/views/sourcetrace/component/PollutedClueItem.vue

@@ -1,186 +1,166 @@
<template>
  <!-- <BaseCard>
    <template #content> -->
  <el-scrollbar class="clue-card">
    <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
      }}</el-text>
      <el-link
        type="primary"
        :underline="true"
        @click="showMarksAndPolygon(item)"
      >
        {{ item.showMore ? '收起异常' : '定位异常' }}
      </el-link>
    </el-row>
    <div>
      <el-text type="primary">
        污染区域：{{ item.pollutedArea.address }}
      </el-text>
    </div>
    <div>
      <el-text type="primary">
        溯源距离：{{ formatDistanceType(item.pollutedArea.distanceType) }}
      </el-text>
    </div>
    <div>
      <el-text type="primary">
        异常类型：{{ item.pollutedData.exception }}
      </el-text>
    </div>
    <el-row style="border-top: 1px solid white">
      <el-col :span="6">
        <el-statistic title="突变因子" :value="item.pollutedData.factorName" />
      </el-col>
      <el-col :span="6">
        <el-statistic
          title="变化幅度"
          :value="formatPercentage(item.pollutedData.avgPer)"
        />
      </el-col>
      <el-col :span="6">
        <el-statistic title="发生次数" :value="item.pollutedData.times" />
      </el-col>
      <el-col :span="6">
        <el-statistic
          title="平均风速"
          :value="item.pollutedData.windSpeed"
          suffix="m/s"
        />
      </el-col>
    </el-row>
    <el-row justify="space-between">
      <!-- <el-link
                    type="primary"
                    underline
                    @click="showMarksAndPolygon(item)"
                  >
                    {{
                      (item.showMore ? '收起溯源场景' : '查看溯源场景') +
                      '（' +
                      item.pollutedSource.sceneList.length +
                      '）'
                    }}
                  </el-link> -->
    </el-row>
    <!-- <div style="width: 320px; height: 80px"> -->
    <RealTimeLineChart
      v-for="(item1, index1) in item._chartOptions"
      :key="index1"
      :model-value="item1"
      chart-height="80px"
    ></RealTimeLineChart>
    <!-- </div> -->
    <div class="border-dashed">
      <el-text type="" tag="mark">
        {{ item.pollutedSource.conclusion }}
      </el-text>
    </div>
    <SceneTable
      :show-marks="item.showMore"
      :scene-list="item.pollutedSource.sceneList"
    ></SceneTable>
  <!-- <CardDialog
    :model-value="modelValue"
    @update:model-value="handleDialogShow"
    title="污染线索"
    draggable
    :modal="false"
    width="400px"
  >
    <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-space gap="4">
                  <el-tag :type="item.status == 1 ? 'danger' : 'info'">{{
                    item._statusStr
                  }}</el-tag>
                  <el-text type="default">{{ item.exception }}</el-text>
                </el-space>
                <el-row gap="4">
                  <el-text type="primary">发生时间：</el-text>
                  <el-text type="primary">{{
                    item.startTime + ' 至 '
                  }}</el-text>
                  <el-text type="primary">{{
                    item.status == 1 ? '当前' : item.endTime
                  }}</el-text>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <el-statistic title="因子" :value="item.factorName" />
                  </el-col>
                  <el-col :span="6">
                    <el-statistic title="均值" :value="item.avg" />
                  </el-col>
                  <el-col :span="6">
                    <el-statistic title="峰值" :value="item.max" />
                  </el-col>
                  <el-col :span="6">
                    <el-statistic title="谷值" :value="item.min" />
                  </el-col>
                </el-row>
                <el-row justify="space-between">
                  <el-link
                    type="primary"
                    @click="item.showMore = !item.showMore"
                  >
                    {{
                      (item.showMore ? '收起溯源场景' : '查看溯源场景') +
                      '（' +
                      item.relatedSceneList.length +
                      '）'
                    }}
                  </el-link>
                  <el-link type="primary" @click="drawSector(item)">
                    查看异常
                  </el-link>
                </el-row>
                <SceneTable
                  v-show="item.showMore"
                  :scene-list="item.relatedSceneList"
                ></SceneTable>
                <el-divider /> -->
  </el-scrollbar>
          <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="info" size="small">{{ item._timestr }}</el-text>
        </el-row>
        <el-space>
          <el-icon color="#F56C6C" :size="40"><WarnTriangleFilled /></el-icon>
          <el-text type="info">
            {{ item.advice }}
          </el-text>
        </el-space>
        <el-row justify="space-between">
          <el-text type="info" size="small">
            推荐路线总长{{ item.direction.distance }}米
          </el-text>
          <el-link type="info" size="small" @click="showPolyline">
            {{ lineShow ? '收起路线' : '定位路线' }}
          </el-link>
        </el-row>
        <SceneTable
          :show-marks="lineShow"
          :scene-list="formatSceneList(item.sortedSceneList)"
        >
          <el-table-column prop="_count" width="42" label="溯源次数" />
        </SceneTable>
      </el-scrollbar>
    </template>
  </BaseCard>
  <!-- </template>
  </BaseCard> -->
    <template #footer> </template>
  </CardDialog> -->
</template>
<script setup>
import { ref } from 'vue';
import { ref, onMounted, onUnmounted, reactive, watch } from 'vue';

import { sceneTypes, sceneIcon } from '@/constant/scene-types';
import mapLine from '@/utils/map/line';
import mapUtil from '@/utils/map/util';
import marks from '@/utils/map/marks';

const props = defineProps({
  modelValue: Boolean,
  item: Object
});
</script>
<style scoped>
:deep(.el-statistic) {
  --el-statistic-title-color: rgb(215, 215, 215);
  --el-statistic-content-color: white;

const lineShow = ref(true);
// 上一条导航路线
let lastPolyline = undefined;
// 上一个导航目的地
// let lastDestination = undefined;
// let layer = undefined;

const emits = defineEmits(['update:modelValue']);

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])
      );
      // polylineList.unshift(polyline);
      if (lastPolyline) {
        mapUtil.removeViews(lastPolyline);
      }
      lastPolyline = polyline;
      lineShow.value = true;
    }
    // 显示隐藏变化时，对应显示或隐藏路线
    else if (nV[1] != oV[1]) {
      // showPolyline(nV[1]);
      handleDialogShow(nV[1]);
    }
  }
);

function showPolyline(show) {
  if (typeof show === 'boolean') {
    lineShow.value = show;
  } else {
    lineShow.value = !lineShow.value;
  }

  if (lineShow.value && lastPolyline) {
    mapUtil.addViews(lastPolyline);
  } else {
    mapUtil.removeViews(lastPolyline);
  }
}

:deep(.el-text.el-text--primary) {
// function removeLayer() {
//   if (layer != undefined) {
//     mapUtil.removeViews(layer);
//     layer = undefined;
//   }
// }

// function drawMarks(sceneList) {
//   removeLayer();
//   if (sceneList.length != 0) {
//     const icons = [];
//     sceneList.forEach((s) => {
//       icons.push(sceneIcon(s.typeId));
//     });
//     layer = marks.createLabelMarks(icons, sceneList, false);
//   }
// }

function formatSceneList(sceneList) {
  return sceneList.map((v) => {
    return {
      ...v.first,
      _count: v.second
    };
  });
}

function handleDialogShow(value) {
  showPolyline(value);
  emits('update:modelValue', value);
}
</script>
<style scoped>
/* :deep(.el-text.el-text--primary) {
  --el-text-color: white;
}

:deep(.el-link) {
  --el-link-text-color: #23dad1;
}

.scrollbar {
  min-width: 300px;
  max-width: 60vw;
  /* height: 35vh; */
  /* color: #02ffea; */
}
} */

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

.border-dashed {
  /* border: 1px dashed white; */
  border: 1px dashed #ffbc58;
  padding: 0px 1px;
  margin-bottom: 4px;
}
</style>