2025.7.18 动态溯源-测试版本

riku

2025-07-18 306ef09707d6bcf9ffa67de55f86ab6f4362deee

 src/views/sourcetrace/component/PollutedExceptionItem.vue

@@ -11,10 +11,12 @@
    <template #content>
      <el-scrollbar class="clue-card">
        <el-row justify="space-between" align="bottom">
          <el-text type="warning" size="large"> 典型切片 </el-text>
          <el-text type="warning" style="font-weight: 600" size="large">
            溯源切片
          </el-text>

          <el-link
            type="primary"
            type="info"
            :underline="true"
            @click="showMarksAndPolygon(item)"
          >
@@ -23,67 +25,78 @@
          </el-link>
        </el-row>
        <div>
          <el-text type="primary">
          <el-text type="info">
            <el-icon><Timer /></el-icon>
            {{
              '切片时段：' +
              item.pollutedData.startTime +
              item.pollutedData._startTime +
              ' - ' +
              item.pollutedData.endTime
              item.pollutedData._endTime
            }}
          </el-text>
        </div>
        <div>
          <el-text type="primary">
          <el-text type="info">
            <el-icon><MapLocation /></el-icon>
            {{ '风险区域：' + item.pollutedArea.address }}
            {{
              '风险区域：' +
              (item.pollutedArea.address ? item.pollutedArea.address : '')
            }}
          </el-text>
        </div>
        <!-- <div>
          <el-text type="primary">
          <el-text type="info">
            溯源距离：{{ formatDistanceType(item.pollutedArea.distanceType) }}
          </el-text>
        </div> -->
        <div>
          <el-text type="primary">
            <el-icon><BellFilled /></el-icon>
          <el-text type="info">
            <el-icon><Bell /></el-icon>
            异常类型：{{ 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
              v-if="item.pollutedData.exceptionType == 4"
              title="变化幅度"
              :value="formatPercentage(item.pollutedData.avgPer)"
            />
            <el-statistic
              v-else-if="item.pollutedData.exceptionType == 9"
              title="变化速率"
              :value="formatChangeRate(item.pollutedData.avgRate)"
              suffix=""
            />
          </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>
        <div v-for="s in item.pollutedData.statisticMap" :key="s.factorId">
          <el-row style="border-top: 1px solid white">
            <el-col :span="6">
              <el-statistic title="突变因子" :value="s.factorName" />
            </el-col>
            <el-col :span="6">
              <el-statistic
                v-if="item.pollutedData.exceptionType == 4"
                title="变化幅度"
                :value="formatPercentage(s.avgPer)"
              />
              <el-statistic
                v-else-if="item.pollutedData.exceptionType == 9"
                title="变化速率"
                :value="formatChangeRate(s.avgRate)"
                suffix=""
              />
            </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"
                :precision="1"
                suffix="m/s"
              />
            </el-col>
          </el-row>
          <RealTimeLineChart
            v-for="(item1, index1) in s._chartOptions"
            :key="index1"
            :model-value="item1"
            chart-height="80px"
            :y-min-interval="20"
            :exception-index-arr="exceptionIndexArr"
          ></RealTimeLineChart>
        </div>
        <el-row justify="space-between">
          <!-- <el-link
                    type="primary"
                    type="info"
                    underline
                    @click="showMarksAndPolygon(item)"
                  >
@@ -96,16 +109,10 @@
                  </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"
          :y-min-interval="20"
        ></RealTimeLineChart>
        <!-- </div> -->
        <div class="border-dashed">
          <el-text type="" tag="mark">
          <el-icon color="#ffbc58" size="20"><WarningFilled /></el-icon>
          <el-text type="info" tag="b">
            {{ item.pollutedSource.conclusion }}
          </el-text>
        </div>
@@ -113,57 +120,6 @@
          :show-marks="item.showMore"
          :scene-list="item.pollutedSource.sceneList"
        ></SceneTable>

        <!-- <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>
    </template>
  </BaseCard>
@@ -171,11 +127,22 @@
  </CardDialog> -->
</template>
<script setup>
import { ref } from 'vue';
import { ref, computed } from 'vue';

const props = defineProps({
  modelValue: Boolean,
  item: Object
});

const exceptionIndexArr = computed(() => {
  const indexArr = [];
  props.item.pollutedData.dataVoList.forEach((e) => {
    const i = props.item.pollutedData.historyDataList.findIndex(
      (v) => v.time == e.time
    );
    indexArr.push([i - 1 < 0 ? 0 : i - 1, i]);
  });
  return indexArr;
});

const emits = defineEmits(['showMarksAndPolygon', 'update:modelValue']);
@@ -209,7 +176,7 @@
}
</script>
<style scoped>
:deep(.el-statistic) {
/* :deep(.el-statistic) {
  --el-statistic-title-color: rgb(215, 215, 215);
  --el-statistic-content-color: white;
}
@@ -220,7 +187,7 @@

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

.scrollbar {
  min-width: 300px;
@@ -233,13 +200,15 @@
  padding: 0 4px;
  /* margin-right: 2px; */
  width: 340px;
  height: 35vh;
  border-right: 1px solid white;
  height: 400px;
  /* border-right: 1px solid white; */
  border-radius: 2px;
}

.border-dashed {
  /* border: 1px dashed white; */
  display: flex;
  /* align-items: center; */
  border: 1px dashed #ffbc58;
  padding: 0px 1px;
  margin-bottom: 4px;