新增动态溯源异常更新列表

riku

2025-05-13 6c75516f1ba668873807cef33aa996d25cdf16c4

新增动态溯源异常更新列表

 src/api/index.js

@@ -4,14 +4,17 @@
const debug = true;

let ip1 = 'http://47.100.191.150:9029/';
let ws = `47.100.191.150:9030`;
// console.log(import.meta.env);
if (import.meta.env.VITE_DATA_MODE == 'jingan') {
  ip1 = 'http://114.215.109.124:8805/';
  ws = `114.215.109.124:9030`;
}

if (debug) {
  ip1 = 'http://192.168.0.110:8084/';
  // ip1 = 'http://locahost:8084/';
  ws = `192.168.0.110:9030`;
}

const $http = axios.create({
@@ -94,40 +97,9 @@
  );
});

// const $http = {
//   get(url) {
//     const controller = new AbortController();
//     return {
//       con: controller,
//       resp: axiosInstance.get(url, { signal: controller.signal })
//     };
//   },
//   put(url, data) {
//     const controller = new AbortController();
//     return {
//       con: controller,
//       resp: axiosInstance.put(url, data, { signal: controller.signal })
//     };
//   },
//   post(url, data) {
//     const controller = new AbortController();
//     return {
//       con: controller,
//       resp: axiosInstance.post(url, data, { signal: controller.signal })
//     };
//   },
//   delete(url) {
//     const controller = new AbortController();
//     return {
//       con: controller,
//       resp: axiosInstance.delete(url, { signal: controller.signal })
//     };
//   }
// };

function resToData(res) {
  res.resp = res.resp.then((res) => res.data);
  return res;
}

export { $http, resToData };
export { $http, resToData, ws };

 src/views/historymode/HistoryMode.vue

@@ -28,6 +28,7 @@
        :factor="factorDatas.factor[factorType]"
        @change="handleLegendTypeChange"
      ></FactorLegend>
      <SourceTrace></SourceTrace>
    </el-row>
    <el-row class="historical" justify="center">
      <HistoricalTrajectory
@@ -69,6 +70,7 @@
import { FactorDatas } from '@/model/FactorDatas';
import TrendAnalysis from './component/TrendAnalysis.vue';
import DataSheet from './component/DataSheet.vue';
import SourceTrace from '@/views/sourcetrace/SourceTrace.vue';
import { ElMessage } from 'element-plus';
import { fetchHistoryData } from '@/utils/factor/data';
import dataAnalysisApi from '@/api/dataAnalysisApi';
@@ -76,7 +78,7 @@
import { useSceneStore } from '@/stores/scene';

export default {
  components: { TrendAnalysis, DataSheet },
  components: { TrendAnalysis, DataSheet, SourceTrace },
  setup() {
    // é™å®šåˆ†é¡µæ•°æ®é‡ä¸º10000
    const { loading, fetchData } = useFetchData(10000);

 src/views/realtimemode/RealtimeMode.vue

@@ -14,6 +14,7 @@
        class="m-t-2"
        :factor="factorDatas.factor[factorType]"
      ></FactorLegend>
      <!-- <SourceTrace></SourceTrace> -->
    </el-row>
    <DashBoard class="dash-board" :factor-datas="factorDatas"></DashBoard>
    <RealTimeTrend
@@ -34,6 +35,7 @@
import DashBoard from './component/DashBoard.vue';
import RealTimeTrend from './component/RealTimeTrend.vue';
import DeviceChange from './component/DeviceChange.vue';
import SourceTrace from '@/views/sourcetrace/SourceTrace.vue';
import { realTimeMapAnimation } from '@/utils/map/animation';
import {
  fetchHistoryData,
@@ -45,7 +47,7 @@
// const mapAnimation = new MapAnimation();

export default {
  components: { DashBoard, RealTimeTrend, DeviceChange },
  components: { DashBoard, RealTimeTrend, DeviceChange, SourceTrace },
  setup() {
    const { loading, fetchData } = useFetchData(10000);
    return { loading, fetchData };

 src/views/sourcetrace/SourceTrace.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,82 @@
<template>
  <BaseCard>
    <template #content>
      <div>
        <el-input type="text" v-model="inputVal" />
        <button @click="handleSend">send</button>
        <button @click="handleLink">link</button>
      </div>
      <div>业务状态中控</div>
      <el-scrollbar ref="scrollbarRef" :height="height">
        <div ref="scrollContentRef">
          <div v-for="(item, index) in streams" :key="index">
            <el-text type="primary">[{{ item }}]: </el-text>
          </div>
        </div>
      </el-scrollbar>
    </template>
  </BaseCard>
</template>
<script setup>
import { reactive, ref, onMounted, onUnmounted, inject } from 'vue';
import { ws } from '@/api/index';

const height = `60vh`;

const scrollContentRef = ref();
const scrollbarRef = ref();

function scrollToBottom() {
  const h1 = scrollContentRef.value.clientHeight + 100;
  setTimeout(() => {
    scrollbarRef.value.setScrollTop(h1);
  }, 100);
}

const streams = reactive([]);

let socket;

const inputVal = ref('');
const handleSend = () => {
  if (socket) {
    socket.send(inputVal.value);
  }
};

const handleLink = () => {
  if (socket) {
    socket.close();
  }
  const url = 'ws://' + ws + '/ws';
  // socket = new WebSocket(`ws://192.168.0.138:8080/workstream`)
  socket = new WebSocket(url);
  // ä¸ŽæœåŠ¡å™¨å»ºç«‹è¿žæŽ¥ï¼šå‘送消息到服务器
  socket.onopen = () => {
    console.log('connect: ');
  };
  // æ”¶åˆ°æœåŠ¡å™¨å‘送的消息：event处理服务器返回的数据
  socket.onmessage = (event) => {
    console.log('receive: ', event.data);
    putWorkStream(event.data);
  };
  // è¿žæŽ¥æˆ–通信过程中发生错误
  socket.onerror = (event) => {
    console.log('errror: ', event);
  };
  // ä¸ŽæœåŠ¡å™¨æ–­å¼€è¿žæŽ¥
  socket.onclose = (event) => {
    console.log('close: ', event.code);
  };
};

/**
 * æ·»åŠ ä¸€æ¡å·¥ä½œæµä¿¡æ¯
 * @param {*} data
 */
function putWorkStream(data) {
  const obj = JSON.parse(data);
  streams.push(obj);
  scrollToBottom();
}
</script>