提交 5c5eaf24 authored 作者: 汪雄's avatar 汪雄

全部提交

上级 674e82f2
File added
......@@ -10,7 +10,7 @@
"dependencies": {
"ant-design-vue": "^4.2.6",
"axios": "0.28.1",
"dayjs": "^1.11.19",
"dayjs": "^1.11.20",
"echarts": "5.5.1",
"element-plus": "^2.9.6",
"express": "^5.1.0",
......@@ -3215,10 +3215,9 @@
}
},
"node_modules/dayjs": {
"version": "1.11.19",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz",
"integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==",
"license": "MIT"
"version": "1.11.20",
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.20.tgz",
"integrity": "sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ=="
},
"node_modules/debug": {
"version": "4.4.3",
......
......@@ -24,7 +24,7 @@
"dependencies": {
"ant-design-vue": "^4.2.6",
"axios": "0.28.1",
"dayjs": "^1.11.19",
"dayjs": "^1.11.20",
"echarts": "5.5.1",
"element-plus": "^2.9.6",
"express": "^5.1.0",
......
const express = require('express');
const path = require('path');
const http = require('http');
const WebSocket = require('ws');
const { createProxyMiddleware } = require('http-proxy-middleware');
const fs = require('fs');
const express = require("express");
const path = require("path");
const http = require("http");
const WebSocket = require("ws");
const { createProxyMiddleware } = require("http-proxy-middleware");
const fs = require("fs");
const app = express();
const PORT = 3010;
// 检测是否在 pkg 打包环境中
const isPacked = typeof process.pkg !== 'undefined';
const isPacked = typeof process.pkg !== "undefined";
// 动态获取静态文件路径
function getStaticPath() {
if (isPacked) {
const possiblePaths = [
path.join(process.cwd(), 'dist'),
path.join(__dirname, 'dist')
path.join(process.cwd(), "dist"),
path.join(__dirname, "dist"),
];
for (const staticPath of possiblePaths) {
try {
const testPath = path.join(staticPath, 'index.html');
const testPath = path.join(staticPath, "index.html");
if (fs.existsSync(testPath)) {
//console.log(`Found static files at: ${staticPath}`);
return staticPath;
......@@ -29,9 +29,9 @@ function getStaticPath() {
continue;
}
}
return path.join(__dirname, 'dist');
return path.join(__dirname, "dist");
} else {
return path.join(__dirname, 'dist');
return path.join(__dirname, "dist");
}
}
......@@ -40,68 +40,99 @@ console.log(`Serving static files from: ${staticPath}`);
// 1. CORS 中间件 - 放在最前面
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS, PATCH');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization, X-API-Key');
res.header("Access-Control-Allow-Origin", "*");
res.header(
"Access-Control-Allow-Methods",
"GET, POST, PUT, DELETE, OPTIONS, PATCH",
);
res.header(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept, Authorization, X-API-Key",
);
// 处理预检请求
if (req.method === 'OPTIONS') {
if (req.method === "OPTIONS") {
return res.status(200).end();
}
next();
});
// app.use((req, res, next) => {
// console.log('👉 请求进来了:', req.url);
// next();
// });
// 2. CSP配置 - 简化版本避免冲突
app.use((req, res, next) => {
// 对于API请求,使用更宽松的CSP或者不设置
if (req.path.startsWith('/api')) {
if (req.path.startsWith("/api")) {
next();
} else {
res.setHeader('Content-Security-Policy',
res.setHeader(
"Content-Security-Policy",
"default-src 'self' 'unsafe-inline' 'unsafe-eval'; " +
"connect-src 'self' http: https: ws: wss:; " +
"img-src 'self' data: blob: http: https:;"
"connect-src 'self' http: https: ws: wss:; " +
"img-src 'self' data: blob: http: https:;",
);
next();
}
});
// 3. API代理 - 简化版本
app.use('/api', createProxyMiddleware({
target: 'http://127.0.0.1:19020', // 后端API地址
// target: 'http://121.229.107.155:2251',
// target: 'http://121.229.107.155:2251',//测试环境
target: 'http://121.229.107.155:19021',//生产环境
// target: 'http://127.0.0.1:19021',//生产环境
changeOrigin: true,
pathRewrite: { '^/api': '/api' },
logLevel: 'debug',
// pathRewrite: { '^/api1': '/api' }, //进来的path没有api了,要么直接用app.use((req, res, next)=>{})
pathRewrite: function (path, req) {
// console.log('31800是否走了代理', path);
//由于app.use('/api')的原因,进入到这里后path是被去掉了api,所以要重新加上,
return '/api' + path;
},
logLevel: 'silent',
// 调试代理请求
onProxyReq: function (proxyReq, req, res) {
// 手动设置正确的路径(如果必要)
// const originalPath = req.originalUrl;
// if (originalPath.startsWith('/api1')) {
// const newPath = originalPath.replace('/api1', '/api');
// console.log('手动重写路径:', originalPath, '->', newPath);
// proxyReq.path = newPath;
// }
},
onProxyRes: function (proxyRes, req, res) {
// 确保代理响应包含正确的CORS头
proxyRes.headers['Access-Control-Allow-Origin'] = '*';
// 确保 CORS 头存在
const origin = req.headers.origin;
// 设置响应头
if (origin && ['http://localhost:3010', 'http://127.0.0.1:3010'].includes(origin)) {
res.setHeader('Access-Control-Allow-Origin', origin);
} else {
res.setHeader('Access-Control-Allow-Origin', '*');
}
proxyRes.headers['Access-Control-Allow-Credentials'] = 'true';
},
onError: (err, req, res) => {
console.error('Proxy Error:', err);
res.status(500).json({ error: 'Proxy error' });
},
// ws: true, // ws 转发
}
}));
// 4. 静态文件服务
app.use(express.static(staticPath));
// 5. 处理根路径请求
app.get('/', (req, res) => {
const indexPath = path.join(staticPath, 'index.html');
app.get("/", (req, res) => {
const indexPath = path.join(staticPath, "index.html");
if (fs.existsSync && !fs.existsSync(indexPath)) {
console.error(`Index.html not found at: ${indexPath}`);
return res.status(404).send('index.html not found');
return res.status(404).send("index.html not found");
}
res.sendFile(indexPath);
});
// 6. 处理.well-known路径
app.get('/.well-known/appspecific/com.chrome.devtools.json', (req, res) => {
// 6. 处理.well-known路径
app.get("/.well-known/appspecific/com.chrome.devtools.json", (req, res) => {
res.json({});
});
......@@ -111,27 +142,24 @@ const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
wss.on('connection', (ws) => {
wss.on("connection", (ws) => {
//console.log(ws, '连接------');
ws.send('连接成功');
ws.on('message', (message) => {
ws.send("连接成功");
ws.on("message", (message) => {
//console.log(message.toString(), ':ue发送给vue的数据');
ws.send('vue发给ue的数据+1');
ws.send("vue发给ue的数据+1");
});
ws.on('close', () => {
ws.on("close", () => {
//console.log('客户端断开连接');
});
ws.on('error', (error) => {
console.error('WebSocket错误:', error);
ws.on("error", (error) => {
console.error("WebSocket错误:", error);
});
});
server.listen(PORT, () => {
//console.log(`大屏中转服务启动: http://localhost:${PORT}`);
//console.log(`静态文件目录: ${staticPath}`);
//console.log(`运行模式: ${isPacked ? '打包模式' : '开发模式'}`);
// console.log(`大屏中转服务启动: http://localhost:${PORT}`);
// console.log(`静态文件目录: ${staticPath}`);
// console.log(`运行模式: ${isPacked ? "打包模式" : "开发模式"}`);
});
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -73,58 +73,27 @@ const data = computed(() => {
// console.log('y--props.data', props.data)
props.data.forEach(el => {
let y = el.y
// console.log('el.y', el.y)
if (Object.prototype.toString.call(y) == '[object Object]' && y.hasOwnProperty('dropRate')) {
y = y.dropRate
}
// console.log('y', y)
y.forEach(y => {
const { longitude: item, value, GridCode } = y
if (item.vertex1Lat !== null) {
result.push({
name: item.gridName,
code: GridCode,
count: value,
value: [
item.vertex1Lon,
item.vertex1Lat,
item.vertex2Lon,
item.vertex2Lat,
item.vertex3Lon,
item.vertex3Lat,
item.vertex4Lon,
item.vertex4Lat,
item.vertex5Lon,
item.vertex5Lat,
item.vertex6Lon,
item.vertex6Lat,
value,
],
})
}
const { value, GridCode } = y
result.push({
code: GridCode,
count: value,
})
// console.log('item', item)
})
})
result = result.sort((pre, next) => pre.count - next.count)
maxValue.value = result[result.length - 1]?.count || 0
// console.log('maxValue', maxValue)
result = mergeData(result, appStore.gridInfoList)
// if (myChart) {
// myChart.setOption({
// visualMap: {
// text: [maxValue, 0],
// range: [0, maxValue],
// min: 0,
// max: maxValue,
// },
// }, {
// notMerge: true // 👈 关键
// })
// }
// console.log('result', result)
return result
})
......@@ -154,7 +123,7 @@ const mergeData = (data, baseData = []) => {
_baseData.forEach(item => {
data.forEach(el => {
if (item.code == el.code) {
item.value = el.value
item.value[item.value.length - 1] = el.count
}
})
......@@ -286,6 +255,7 @@ function initChart() {
focus: "self",
},
renderItem(params, api) {
// debugger
if (api.value(0) == null) {
return null
}
......@@ -314,6 +284,8 @@ function initChart() {
},
}
} else {
console.log('val', val)
}
return {
......
......@@ -38,15 +38,8 @@
style="width: 8px; height: 10px;" />
</el-icon>
</el-button>
<!-- <el-button size="mini" @click="jumpToSpecificTime(new Date('2025-11-03 00:00:00'),true)">时间</el-button> -->
<!-- <el-button circle class="right_block_conter_btn" @click="playForward">
<el-icon>
<img src="@/assets/images/footers/videoPlay_right.png" alt="" style="width: 8px; height: 10px;" />
</el-icon>
</el-button> -->
</div>
<!-- || !is_flag_confirmAndPauseAndSpeed || speedChangedNormalDataBack -->
<el-select v-model="playbackSpeed" style="width: 70px" class="satellite-select"
:disabled="is_flag_isRealtime">
<el-option v-for="item in playbackSpeedOptions" :key="item.value" :label="item.label" :value="item.value"
......@@ -109,9 +102,10 @@ import { VideoPlay, VideoPause, CaretLeft, CaretRight } from '@element-plus/icon
import { ElLoading, ElMessage } from 'element-plus'
import Loading from '@/pages/all/components/loadingComponent/index.js'
import { ref, onMounted, onUnmounted, computed, watch, nextTick, onDeactivated } from 'vue';
import { ref, onMounted, onUnmounted, computed, watch, nextTick, watchEffect } from 'vue';
import wss from '@/utils/requestSocekt.js'
import useAppStore from '@/store/module/app'
import dayjs from 'dayjs';
const wssInstance = ref(wss)
// import { loading } from 'vxe-pc-ui';
......@@ -312,6 +306,7 @@ const wssMessageHandle = () => {
(wssInstance.value).onmessage = (event) => {
// console.log('wssMessageHandle', event.data);
const data = JSON.parse(event.data);
console.log('data', data)
// 只有history和实时模式数据,回复已收到数据的确认。要修改以下代码
if ((data.type === 'history' && !(data?.isLagrangeInterpolation === true))) {
wssOpenHandle({
......@@ -332,7 +327,7 @@ const wssMessageHandle = () => {
if (data.type === 'control' && (data.controlType === 'continue' && data?.messageTypeFalg === 'true')) {
jumpToSpecificTime(new Date(subtractSecondsAndFormat(alignTo56Seconds(tempDateTime.value).toISOString(), data.remainingTimeMs+1)), false)
jumpToSpecificTime(new Date(subtractSecondsAndFormat(alignTo56Seconds(tempDateTime.value).toISOString(), data.remainingTimeMs + 1)), false)
if (!hasPlayed.value) {
//console.log("我是playForward--3");
playForward();
......@@ -347,11 +342,7 @@ const wssMessageHandle = () => {
}
jumpToNextTime.value = data.remainingTimeMs || 0;
hasDraged_first_falseToTrue.value = true;
// console.log("我走22222222222", (useAppStoreInstance.footerTimeHasedSelectTimeToSub && !subSysToMainSysFirstDataBack.value));
// if (useAppStoreInstance.footerTimeHasedSelectTimeToSub && !subSysToMainSysFirstDataBack.value) {
// jumpToSpecificTime(new Date(alignTo56Seconds(selectedEndTime.value).toISOString()));
// }
isChange_flag_firstBackDate.value = true;
playForward();
hasPlayed.value = true;
......@@ -382,7 +373,6 @@ const wssMessageHandle = () => {
// }
// jumpToNextTime.value = data.remainingTimeMs || 0;
hasDraged_first_falseToTrue.value = true;
//console.log("000000new Date(subtractSecondsAndFormat(alignTo56Seconds(selectedEndTime.value).toISOString(), jumpToNextTime.value+1))",new Date(subtractSecondsAndFormat(alignTo56Seconds(selectedEndTime.value).toISOString(), jumpToNextTime.value+2)));
jumpToSpecificTime(new Date(subtractSecondsAndFormat(alignTo56Seconds(selectedEndTime.value).toISOString(), data.remainingTimeMs + 1)));
//console.log("我走了ElMessage",hasDraged_first_falseToTrue.value , !(data?.isLagrangeInterpolation === true) , (data.controlType === 'seekConfirm'));
......@@ -402,7 +392,7 @@ const wssMessageHandle = () => {
ElMessage({
type: 'error',
message:data.message ?`主系统:${data.message } `:`已暂停,没有查询到该时间段的历史数据!!!`,
message: data.message ? `主系统:${data.message} ` : `已暂停,没有查询到该时间段的历史数据!!!`,
})
// //console.log("获取的wssResponeFlag_isSuccess信息1:", wssResponeFlag_isSuccess.value);
useAppStoreInstance.setglobalStartWss(false)
......@@ -469,7 +459,7 @@ const wssMessageHandle = () => {
// (loading.value).close()
// }else{
// }
wssResponeFlag_isSuccess.value = true;
......@@ -505,15 +495,21 @@ const wssMessageHandle = () => {
// hasPlayed.value = false;
// }, ((1000*60)/playbackSpeed.value)-1000);
};
// WwflagToNext = setTimeout(() => {
// stopAutoPlay();
// }, (1000*60)/playbackSpeed.value);
}
// 日期时间状态 (精确到秒)
const endDateTime = ref(new Date(Date.now()).toISOString()); // 当前时间作为结束时间
const startDateTime = ref(new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString()); // 三天前作为开始时间
const now = dayjs().format('YYYY-MM-DD HH:mm:ss')
const tomorrow = dayjs().add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
console.log('now', now, tomorrow)
const startDateTime = ref(now);
// console.log('startDateTime', startDateTime.value)
const endDateTime = ref(tomorrow);
const dateRange = ref([]);
// 滑块位置(百分比)
......@@ -532,7 +528,7 @@ const selectedStartTime = ref(new Date(startDateTime.value));
const selectedEndTime = ref(new Date(startDateTime.value));
// 自动播放相关状态
const isPlaying = ref(false);
const isPlaying = ref(true);
const playbackSpeed = ref(1); // 播放速度倍数
const playbackDirection = ref(1); // 1表示向前播放,-1表示向后播放
const playbackInterval = ref(null);
......@@ -554,7 +550,7 @@ const showLength = computed(() => {
})
// 定义实时
const is_flag_isRealtime = ref(true);
// 禁用今天之后的日期
......@@ -564,36 +560,6 @@ const disabledDate = (time) => {
return time.getTime() > today.getTime();
};
// 日期选择器快捷选项
// const shortcuts = [
// {
// text: '最近一周',
// value: () => {
// const end = new Date();
// const start = new Date();
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
// return [start, end];
// },
// },
// {
// text: '最近一个月',
// value: () => {
// const end = new Date();
// const start = new Date();
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
// return [start, end];
// },
// },
// {
// text: '最近三个月',
// value: () => {
// const end = new Date();
// const start = new Date();
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
// return [start, end];
// },
// },
// ];
const pick_select_date = ref();
const pick_select_date_handFn = (val) => {
......@@ -653,6 +619,7 @@ const handleDateRangeChange = async (val, flag = false) => {
//console.log("cao cao1,Loading.show()");
}
// debugger
// Loading.show()
if (val && val.length === 2) {
//console.log("cao cao11",val);
......@@ -683,7 +650,7 @@ const handleDateRangeChange = async (val, flag = false) => {
updateSelectedTimes();
});
}
playbackSpeed.value = 1;
if (!flag) {
wssOpenHandle({
......@@ -706,10 +673,6 @@ const handleDateRangeChange = async (val, flag = false) => {
status: isPlaying.value ? "stop" : "continue",
//时间参数
// isRealtime:"false",
// startTime:"2025-11-03 00:00:00",
// endTime:"2025-11-04 00:00:00",
// taskCode:"1111111111"
})))
......@@ -717,12 +680,6 @@ const handleDateRangeChange = async (val, flag = false) => {
wssMessageHandle()
// if (wssResponeFlag_isSuccess.value) {
// toggleAutoPlay();
// }
} else {
......@@ -854,23 +811,25 @@ const timeMarkers = computed(() => {
const firstPosition = 0; // 因为就是起点
markers.push({
time: firstMarkerTime,
label: `${firstMarkerTime.getFullYear()}-${String(firstMarkerTime.getMonth() + 1).padStart(2, '0')}-${String(firstMarkerTime.getDate()).padStart(2, '0')} <br>${String(firstMarkerTime.getHours()).padStart(2, '0')}:${String(firstMarkerTime.getMinutes()).padStart(2, '0')}`,
label: dayjs(firstMarkerTime).add(1, 'day').format('YYYY-MM-DD HH:mm'),
position: firstPosition,
isMajor: true, // 起始点视为主刻度
showLabel: true
});
// 后续刻度:从 start 的下一个**整点**开始,每 60 分钟加一个
const nextHour = new Date(start);
nextHour.setMinutes(0, 0, 0); // 先对齐到当前小时整点
nextHour.setHours(nextHour.getHours() + 1); // 跳到下一个整点(避免重复)
let current = new Date(nextHour);
while (current <= end) {
// const nextHour = new Date(start);
// nextHour.setMinutes(0, 0, 0); // 先对齐到当前小时整点
// nextHour.setHours(nextHour.getHours() + 1); // 跳到下一个整点(避免重复)
let current = dayjs(start).toDate();
// console.log(dayjs(current).format('YYYY-MM-DD HH:mm'))
console.log('end', dayjs(end).format('YYYY-MM-DD HH:mm'))
while (current < end) {
const position = ((current.getTime() - start.getTime()) / totalMs) * 100;
markers.push({
time: new Date(current),
label: `${current.getFullYear()}-${String(current.getMonth() + 1).padStart(2, '0')}-${String(current.getDate()).padStart(2, '0')} <br>${String(current.getHours()).padStart(2, '0')}:${String(current.getMinutes()).padStart(2, '0')}`,
label: dayjs(current).add(1, 'day').format('YYYY-MM-DD HH:mm'),
position,
isMajor: true, // 每小时都是主刻度
showLabel: true
......@@ -878,6 +837,8 @@ const timeMarkers = computed(() => {
current.setHours(current.getHours() + 1); // 每次 +1 小时
}
// console.log('markers',markers)
return markers;
});
......@@ -981,16 +942,65 @@ const curplaybackDirection = ref(false);
// 切换自动播放状态
const toggleAutoPlay = () => {
if (is_flag_isRealtime.value) {
ElMessage({
type: 'warning',
message: '当前为实时播放模式,不可执行播放操作!',
})
// ElMessage({
// type: 'warning',
// message: '当前为实时播放模式,不可执行播放操作!',
// })
isPlaying.value = !isPlaying.value
console.log('isPlaying', isPlaying.value)
if (isPlaying.value) {
// stopAutoPlay();
if (window.ue5) {
startAutoPlay()
taskCode_everyChange.value = String(Date.now());
useAppStoreInstance.setglobalSubsystemTaskCode(taskCode_everyChange.value);
useAppStoreInstance.setGlobalRecordMainSysTaskCode(taskCode_everyChange.value)
useAppStoreInstance.setFooterTimeHasedSelectTimeToSub(true);
console.log('is_flag_isRealtime', is_flag_isRealtime.value)
console.log('taskCode', taskCode_everyChange.value)
// console.log('startTime',selectedStartTime.value)
// console.log('endTime',selectedEndTime.value)
console.log('startTime', formatDateTime(new Date(startDateTime.value)))
console.log('endTime', formatDateTime(new Date(endDateTime.value)))
console.log('currentTime', (formatDateTime(selectedEndTime.value)))
// return
wssOpenHandle({
isRealtime: is_flag_isRealtime.value ? true : false,
startTime: formatDateTime(new Date(startDateTime.value)),
endTime: formatDateTime(new Date(endDateTime.value)),
taskCode: String(taskCode_everyChange.value) === "" ? useAppStoreInstance.globalRecordMainSysTaskCode || (useAppStoreInstance.globalSubsystemTaskCode) : String(taskCode_everyChange.value),
})
window.ue5("callBackTimeFn", String(JSON.stringify({
isRealtime: is_flag_isRealtime.value ? true : false,
startTime: formatDateTime(new Date(startDateTime.value)),
endTime: formatDateTime(new Date(endDateTime.value)),
speed: playbackSpeed.value,
taskCode: String(taskCode_everyChange.value) === "" ? useAppStoreInstance.globalRecordMainSysTaskCode || (useAppStoreInstance.globalSubsystemTaskCode) : String(taskCode_everyChange.value),
currentTime: (formatDateTime(selectedEndTime.value)),
status: isPlaying.value ? "stop" : "continue",
//时间参数
})))
}
}
} else {
is_flag_playBackwarding.value = true;
if (isPlaying.value) {
//console.log("我是切换自动播放状态stopAutoPlay()",isPlaying.value);
//console.log("我走了这里7")
stopAutoPlay();
......@@ -1003,11 +1013,6 @@ const toggleAutoPlay = () => {
taskCode: String(taskCode_everyChange.value) === "" ? useAppStoreInstance.globalRecordMainSysTaskCode || (useAppStoreInstance.globalSubsystemTaskCode) : String(taskCode_everyChange.value),
})));
// window.ue5("callBackTimeFn", String(JSON.stringify({
// isRealtime: is_flag_isRealtime.value? true: false,
// status: "stop",
// taskCode: String(taskCode_everyChange.value) === "" ? useAppStoreInstance.globalRecordMainSysTaskCode || (useAppStoreInstance.globalSubsystemTaskCode) : String(taskCode_everyChange.value),
// })));
wssOpenHandle({
isRealtime: is_flag_isRealtime.value ? true : false,
status: "stop",
......@@ -1015,15 +1020,12 @@ const toggleAutoPlay = () => {
})
}
} else {
isConfirmedWithRange.value = false; // 开始播放时重置标记
jiangerTime.value = 0;
//console.log("我是playForward--4");
playForward();
// //console.log("我走了jumpToSpecificTime,-21",formatDateTime(selectedEndTime.value));
jumpToSpecificTime(new Date(addOneSecond(formatDateTime(selectedEndTime.value), 1)));
// //console.log("我走了jumpToSpecificTime,-21---------2",formatDateTime(selectedEndTime.value),subtractSecondsAndFormat(new Date((formatDateTime(selectedEndTime.value)).replace(' ', 'T') + '+08:00').toString(),-21));
if (window.ue5) {
window.ue5("callBackSpeedFn", String(JSON.stringify({
isRealtime: is_flag_isRealtime.value ? true : false,
......@@ -1031,11 +1033,6 @@ const toggleAutoPlay = () => {
speed: playbackSpeed.value,
taskCode: String(taskCode_everyChange.value) === "" ? useAppStoreInstance.globalRecordMainSysTaskCode || (useAppStoreInstance.globalSubsystemTaskCode) : String(taskCode_everyChange.value),
})));
// window.ue5("callBackTimeFn", String(JSON.stringify({
// isRealtime: is_flag_isRealtime.value? true: false,
// status: 'continue',
// taskCode: String(taskCode_everyChange.value) === "" ? useAppStoreInstance.globalRecordMainSysTaskCode || (useAppStoreInstance.globalSubsystemTaskCode) : String(taskCode_everyChange.value),
// })));
wssOpenHandle({
isRealtime: is_flag_isRealtime.value ? true : false,
status: 'continue',
......@@ -1243,7 +1240,14 @@ const changeSpeed = () => {
const startDrag = (handle, e) => {
//console.log("开始拖动");
is_flag_isRealtime.value = false;
if (is_flag_isRealtime) {
ElMessage({
type: 'warning',
message: '实时模式下无法进行拖拽',
})
return
}
// is_flag_isRealtime.value = false;
isDateRangeNotEmpty.value = false;
clearInterval(autoUpdateDateRange.value);
isDraged.value = true;
......@@ -1302,7 +1306,7 @@ const handleDrag = (e) => {
const alignTo56Seconds = (date) => {
const d = new Date(date);
const d = new Date(date);
const seconds = d.getSeconds();
if (seconds <= 56) {
......@@ -1377,7 +1381,7 @@ const endDrag = () => {
isDragging.value = false;
currentDragHandle.value = null;
hasPlayed.value = false;
if (window.ue5) {
if (isDraged.value) {
......@@ -1390,7 +1394,7 @@ const endDrag = () => {
speed: playbackSpeed.value,
status: isPlaying.value ? "continue" : "stop",
})));
wssOpenHandle({
isRealtime: false,
replayTime: formatDateTime(selectedEndTime.value),
......@@ -1514,6 +1518,7 @@ const handleSetTimeOutCycle = () => {
const tempDateTime = ref(new Date(useAppStoreInstance.globalTimeLineEndSelectTime))
onMounted(() => {
tempDateTime.value = ""
if (useAppStoreInstance.footerTimeHasedSelectTimeToSub) {
tempDateTime.value = useAppStoreInstance.globalTimeLineEndSelectTime
......@@ -1522,20 +1527,20 @@ onMounted(() => {
dateRange.value = [new Date((new Date(useAppStoreInstance.globalSubsystemSelectedStartTime[0]))).toISOString(), new Date((new Date(useAppStoreInstance.globalSubsystemSelectedStartTime[1]))).toISOString()]
pick_select_date.value = [new Date(dateRange.value[0]).toString(), new Date(dateRange.value[1]).toString()]
{
handleDateRangeChange(useAppStoreInstance.globalSubsystemSelectedStartTime, true);
// Loading.show();
wssOpenHandle({
isRealtime: is_flag_isRealtime.value ? true : false,
status: 'continue',
messageTypeFalg: true,
taskCode: useAppStoreInstance.globalRecordMainSysTaskCode || (useAppStoreInstance.globalSubsystemTaskCode),
})
}
{
handleDateRangeChange(useAppStoreInstance.globalSubsystemSelectedStartTime, true);
// Loading.show();
wssOpenHandle({
isRealtime: is_flag_isRealtime.value ? true : false,
status: 'continue',
messageTypeFalg: true,
taskCode: useAppStoreInstance.globalRecordMainSysTaskCode || (useAppStoreInstance.globalSubsystemTaskCode),
})
}
} else {
updateTimeline();
......@@ -1562,9 +1567,64 @@ onMounted(() => {
}
}
useAppStoreInstance.setGlobalisFromTosub(false)
console.log('isPlaying', isPlaying.value)
if (isPlaying.value) {
if (window.ue5) {
// startAutoPlay()
// taskCode_everyChange.value = String(Date.now());
// useAppStoreInstance.setglobalSubsystemTaskCode(taskCode_everyChange.value);
// useAppStoreInstance.setGlobalRecordMainSysTaskCode(taskCode_everyChange.value)
// useAppStoreInstance.setFooterTimeHasedSelectTimeToSub(true);
isChange_flag_select_date.value = true
// const startTime = formatDateTime(new Date(startDateTime.value))
// const endTime = formatDateTime(new Date(endDateTime.value))
// console.log('startTime',startTime)
// console.log('endTime',endTime)
realTimeData()
}
}
});
// 定义定时器引用
const realTimeData = () => {
startAutoPlay()
taskCode_everyChange.value = String(Date.now());
useAppStoreInstance.setglobalSubsystemTaskCode(taskCode_everyChange.value);
useAppStoreInstance.setGlobalRecordMainSysTaskCode(taskCode_everyChange.value)
useAppStoreInstance.setFooterTimeHasedSelectTimeToSub(true);
wssOpenHandle({
isRealtime: true,
taskCode: String(taskCode_everyChange.value) === "" ? useAppStoreInstance.globalRecordMainSysTaskCode || (useAppStoreInstance.globalSubsystemTaskCode) : String(taskCode_everyChange.value),
speed: 1
})
if (window.ue5) {
// console.log('1', dayjs(startDateTime.value).format('YYYY-MM-DD HH:mm'))
// console.log('2', dayjs(endDateTime.value).format('YYYY-MM-DD HH:mm'))
// console.log('3', dayjs(selectedEndTime.value).format('YYYY-MM-DD HH:mm'))
window.ue5("callBackTimeFn", String(JSON.stringify({
isRealtime: is_flag_isRealtime.value ? true : false,
startTime: dayjs(startDateTime.value).format('YYYY-MM-DD HH:mm'),
speed: playbackSpeed.value,
endTime: dayjs(endDateTime.value).format('YYYY-MM-DD HH:mm'),
taskCode: String(taskCode_everyChange.value) === "" ? useAppStoreInstance.globalRecordMainSysTaskCode || (useAppStoreInstance.globalSubsystemTaskCode) : String(taskCode_everyChange.value),
currentTime: dayjs(selectedEndTime.value).format('YYYY-MM-DD HH:mm'),
status: isPlaying.value ? "stop" : "continue",
//时间参数
})))
}
}
const isChange_flag_firstBackDate = ref(false)
const intervalTimer = ref(null);
// 监听 selectedEndTime 的变化,二无停,时间是2025-11-02 16:01:00
......@@ -1577,18 +1637,18 @@ watch(
// //console.log("每隔111111111122222-----bianhua");
// 检查是否满足条件
if (isChange_flag_firstBackDate.value ) {
if (isChange_flag_firstBackDate.value) {
// preTimeWindowEnd.value = new Date((new Date(new Date(selectedStartTime.value))).setSeconds(56+60)).toISOString();
// //console.log("我走了",compareTime(formatDateTime(selectedEndTime.value), preTimeWindowEnd.value),formatDateTime(selectedEndTime.value),preTimeWindowEnd.value,300%7.8947 ===0.0014);
if (window.ue5 ) {
if (window.ue5) {
// console.log("每隔1秒,callBackCycleTimePointFn",(formatDateTimeOne(selectedEndTime.value)));
window.ue5("callBackCycleTimePointFn", String(JSON.stringify({
// currentTime: trackCycleTimePoint(formatDateTime(selectedEndTime.value)),
currentTime: (formatDateTimeOne(selectedEndTime.value)),
})));
endDrag_opeartioning.value = false;
endDrag_opeartioning.value = false;
}
// 间隔5分钟即300秒,发送时轴de 当前时间给ue
const adjustedStep = Math.ceil(300 / playbackSpeed.value);
......@@ -1661,6 +1721,7 @@ onUnmounted(() => {
//console.log("jieshuli 1,组件卸载时要发暂停",getDayRangeFromTime(useAppStoreInstance.globalTimeLineEndSelectTime)[0],getDayRangeFromTime(useAppStoreInstance.globalTimeLineEndSelectTime)[1]);
if (is_flag_isRealtime.value) {
// 实时传输时,组件卸载时要发暂停
// todo list
} else {
// 非实时传输时,组件卸载时要发暂停
if (window.ue5) {
......@@ -1824,9 +1885,11 @@ onUnmounted(() => {
color: #b6b8b8;
font-weight: 500;
text-align: center;
white-space: nowrap;
/* white-space: nowrap; */
padding: 2px 6px;
border-radius: 4px;
width: 80px;
overflow-wrap: break-word;
}
/* 选中区域内的标签样式 */
......
......@@ -23,26 +23,26 @@
</el-input>
</div>
<el-table :data="rawData_up" size="small" height="440px" class="custom-table">
<el-table-column prop="segmentId" label="弧段编号" width="100" align="center"></el-table-column>
<el-table-column prop="satelliteId" label="卫星编号" width="120" align="center"></el-table-column>
<el-table-column prop="entryTime" label="入境时刻(北京时间)" width="150" align="center"></el-table-column>
<el-table-column prop="exitTime" label="出境时刻(北京时间)" width="150" align="center">
<el-table :data="rawData_up" size="small" :height="pxScale(440)" class="custom-table">
<el-table-column prop="segmentId" label="弧段编号" :width="pxScale(100)" align="center"></el-table-column>
<el-table-column prop="satelliteId" label="卫星编号" :width="pxScale(120)" align="center"></el-table-column>
<el-table-column prop="entryTime" label="入境时刻(北京时间)" :width="pxScale(150)" align="center"></el-table-column>
<el-table-column prop="exitTime" label="出境时刻(北京时间)" :width="pxScale(150)" align="center">
<template #default="scope">
{{ scope.row.exitTime ===
"-" ? scope.row.exitTime : compareTime(useAppStoreInstance.subSystemTimeLineEndSelectTime,
scope.row.exitTime)?scope.row.exitTime:"-" }}
</template>
</el-table-column>
<el-table-column prop="duration" label="时长(sec)" width="80" align="center">
<el-table-column prop="duration" label="时长(sec)" :width="pxScale(80)" align="center">
<template #default="scope">
{{ scope.row.duration ===
"-" ? scope.row.duration : compareTime(useAppStoreInstance.subSystemTimeLineEndSelectTime,
scope.row.exitTime)?scope.row.duration:"-" }}
</template>
</el-table-column>
<el-table-column prop="groundStation" label="地面站" width="90" align="center"></el-table-column>
<el-table-column prop="trackingType" label="测控类型" width="80" align="center"></el-table-column>
<el-table-column prop="groundStation" label="地面站" :width="pxScale(90)" align="center"></el-table-column>
<el-table-column prop="trackingType" label="测控类型" :width="pxScale(80)" align="center"></el-table-column>
<!-- <el-table-column prop="operationResult" label="操作结果" width="100" align="center">
<template #default="scope">
{{ scope.row.operationResult }}
......@@ -76,13 +76,13 @@
</el-input>
</div>
<el-table :data="alertData" size="small" height="380px" class="custom-table"
<el-table :data="alertData" size="small" :height="pxScale(380)" class="custom-table"
@row-click="handleAlertDataRowClick">
<el-table-column prop="alertCode" label="告警码" width="80" align="center"></el-table-column>
<el-table-column prop="alertName" label="告警名称" width="80" align="center"></el-table-column>
<el-table-column prop="alertObject" label="告警对象" width="120" align="center"></el-table-column>
<el-table-column prop="alertCode" label="告警码" :width="pxScale(80)" align="center"></el-table-column>
<el-table-column prop="alertName" label="告警名称" :width="pxScale(80)" align="center"></el-table-column>
<el-table-column prop="alertObject" label="告警对象" :width="pxScale(120)" align="center"></el-table-column>
<el-table-column prop="alertLevel" label="告警等级" width="80" align="center">
<el-table-column prop="alertLevel" label="告警等级" :width="pxScale(80)" align="center">
<template #default="scope">
<el-tag :class="`alert-level_${OpposeAlertLevelMap[scope.row.alertLevel]}`">
{{ scope.row.alertLevel }}
......@@ -90,8 +90,8 @@
</template>
</el-table-column>
<!-- <el-table-column prop="faultServiceLeve" label="服务故障等级" width="150" align="center"></el-table-column> -->
<el-table-column prop="alterCreateTime" label="告警产生时间" width="120" align="center"></el-table-column>
<el-table-column label="告警状态" width="70" align="center" fixed="right">
<el-table-column prop="alterCreateTime" label="告警产生时间" :width="pxScale(120)" align="center"></el-table-column>
<el-table-column label="告警状态" :width="pxScale(70)" align="center" fixed="right">
<template #default="scope">
<el-tag :class="`alert-status_${OpposeAlertDataStatusMap[scope.row.alertStatus]}`">
<!-- {{ scope.row.alertStatus === '0' ? '未处理' : '已处理' }} -->
......@@ -118,8 +118,7 @@
import { nextTick, onMounted, ref } from 'vue';
import errorDataShowComponent from './component/errorDataShowComponent.vue'
import useAppStore from '@/store/module/app'
import { fa } from 'element-plus/es/locales.mjs';
import {pxScale } from '@/utils/rem'
const useAppStoreInstance = useAppStore();
......
......@@ -16,6 +16,6 @@ export function pxScale(val) {
if (typeof val === "string" && val.includes("px")) {
log = parseFloat(val) * window._myscale;
}
console.log("log 数据", log);
// console.log("log 数据", log);
return log;
}
......@@ -51,7 +51,8 @@
import useAppStore from '@/store/module/app.js';
const apiUrl = `ws://121.229.107.155:19021/TestTimeSend`;
const apiUrl = `ws://121.229.107.155:19021/TestTimeSend`; //线上
// const apiUrl = `ws://127.0.0.1:19021/TestTimeSend`; //本地
let wss = null;
let timer = null;
const appStore = useAppStore();
......
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 1000px; height: 600px"></div>
<script>
const cn = "./china.json";
let json = null;
// const crsFn = (cx, cy, r) => {
// for (let i = 0; i < 6; i++) {
// const angle = (Math.PI / 3) * i;
// const x = cx + r * Math.cos(angle);
// const y = cy + r * Math.sin(angle);
// points.push([x, y]);
// }
// };
fetch(cn).then((res) => {
let cnJson = res.json();
console.log(1);
echarts.registerMap("china", { geoJSON: cnJson });
});
fetch("./test.json")
.then((res) => res.json())
.then((data) => {
console.log(data);
json = data.data; //返回的数据是经纬度,该怎么处理
// json = json.map((item) => [
// item.vertex1Lat,
// item.vertex1Lon,
// item.vertex2Lat,
// item.vertex2Lon,
// item.vertex3Lat,
// item.vertex3Lon,
// item.vertex4Lat,
// item.vertex4Lon,
// item.vertex5Lat,
// item.vertex5Lon,
// item.vertex6Lat,
// item.vertex6Lon,
// ]);
json = json.map((item) => [item.centerLat, item.centerLon]);
console.log("json", json);
const chart = echarts.init(document.getElementById("chart"));
// 六边形函数
function createHexagon(cx, cy, r) {
const points = [];
for (let i = 0; i < 6; i++) {
const angle = (Math.PI / 3) * i;
const x = cx + r * Math.cos(angle);
const y = cy + r * Math.sin(angle);
points.push([x, y]);
}
return points;
}
// 随机数据
// const data = [];
// for (let i = 0; i < 80; i++) {
// data.push([
// Math.random() * 1000,
// Math.random() * 600,
// Math.random() * 100,
// ]);
// }
option = {
tooltip: {},
geo: {
map: "china",
roam: true,
// zoom: 1.2,
// center: [104, 36],
},
visualMap: {
min: 0,
max: 1000,
left: "left",
bottom: 20,
calculable: true,
inRange: {
color: ["#e0ffff", "#006edd"],
},
},
xAxis: { show: false },
yAxis: { show: false },
// series: [
// {
// type: "custom",
// coordinateSystem: "geo",
// renderItem(params, api) {
// const points = [];
// console.log("params", params);
// console.log("api", api.value(0), api.value(1));
// // console.log("api value", api.coord);
// // for (let i = 0; i < 6; i++) {
// // const lat = api.value(i * 2);
// // const lng = api.value(i * 2 + 1);
// // // 经纬度 → 像素
// // const coord = api.coord([lng, lat]);
// // points.push(coord);
// // }
// // json = json.map((item) => [item.centerLat, item.centerLon]);
// const coord = api.coord([api.value(1), api.value(0)]);
// console.log("coord", coord);
// return {
// type: "polygon",
// shape: {
// points: createHexagon(coord[0], coord[1], 4),
// },
// style: api.style(),
// };
// },
// encode: {
// tooltip: 2,
// },
// data: json,
// },
// ],
};
chart.setOption(option);
});
</script>
</body>
</html>
......@@ -6,84 +6,100 @@
* @FilePath: \yuanxinPro\vite.config.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
import AutoImport from 'unplugin-auto-import/vite';
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import AutoImport from "unplugin-auto-import/vite";
import pxtorem from "postcss-pxtorem";
// https://vite.dev/config/
export default defineConfig({
plugins: [vue(),
AutoImport({
dts: './auto-imports.d.ts', // 项目根目录生成auto-imports.d.ts配置文件
imports: ["vue", "vue-router", "pinia",] // 设置自动导入的模块/插件(不用开发时每次都引入生命周期才能用)
})
plugins: [
vue(),
AutoImport({
dts: "./auto-imports.d.ts", // 项目根目录生成auto-imports.d.ts配置文件
imports: ["vue", "vue-router", "pinia"], // 设置自动导入的模块/插件(不用开发时每次都引入生命周期才能用)
}),
],
css: {
postcss: {
plugins: [
pxtorem({
rootValue: 16, // 🔥 推荐你用100(大屏项目)
propList: ["*"], // 所有属性都转
selectorBlackList: [".norem"], // 忽略类
minPixelValue: 2, // 小于2px不转
mediaQuery: false, // 媒体查询不转
exclude: /node_modules/i, // 忽略第三方库
}),
],
},
},
// 构建配置
build: {
target: 'es2015', // 编译目标
outDir: 'dist', // 输出目录
assetsDir: 'assets', // 静态资源目录
sourcemap: 'true', // 按需开启
minify: 'esbuild', // 压缩方式
cssCodeSplit: true, // CSS代码分割
drop: ['console', 'debugger'],
// Rollup配置
rollupOptions: {
output: {
// 代码分割策略
manualChunks(id) {
if (id.includes('node_modules')) {
return 'vendor'
}
if (id.includes('src/router')) {
return 'router'
}
},
// 文件命名规则
chunkFileNames: 'js/[name]-[hash].js',
entryFileNames: 'js/[name]-[hash].js',
assetFileNames: 'assets/[ext]/[name]-[hash][extname]'
build: {
target: "es2015", // 编译目标
outDir: "dist", // 输出目录
assetsDir: "assets", // 静态资源目录
sourcemap: "true", // 按需开启
minify: "esbuild", // 压缩方式
cssCodeSplit: true, // CSS代码分割
drop: ["console", "debugger"],
// Rollup配置
rollupOptions: {
output: {
// 代码分割策略
manualChunks(id) {
if (id.includes("node_modules")) {
return "vendor";
}
if (id.includes("src/router")) {
return "router";
}
},
// 外部依赖排除(如有需要)
external: ['some-cdn-library']
// 文件命名规则
chunkFileNames: "js/[name]-[hash].js",
entryFileNames: "js/[name]-[hash].js",
assetFileNames: "assets/[ext]/[name]-[hash][extname]",
},
// 外部依赖排除(如有需要)
external: ["some-cdn-library"],
},
// Terser压缩配置
terserOptions: {
compress: {
drop_console: true, // 移除console
drop_debugger: true // 移除debugger
},
format: {
comments: false // 移除注释
}
}
// Terser压缩配置
terserOptions: {
compress: {
drop_console: true, // 移除console
drop_debugger: true, // 移除debugger
},
format: {
comments: false, // 移除注释
},
},
},
//设置路径
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
"@": path.resolve(__dirname, "./src"),
},
},
server: {
port: 8081,//指定开发服务器的端口
port: 8081, //指定开发服务器的端口
// host: true,//指定开发度武器的主机名
host: '0.0.0.0',//开发服务器将监听所有可用的网络地址(包括局域网和本地网络)
open: true,//自动在默认浏览器上打开
host: "0.0.0.0", //开发服务器将监听所有可用的网络地址(包括局域网和本地网络)
open: true, //自动在默认浏览器上打开
proxy: {
'/api': {
target: 'http://121.229.107.155:19020',
// target: 'http://192.168.1.242:19020',
"/api": {
target: "http://121.229.107.155:19020",
// target: 'http://192.168.1.242:19020',
// ws: true,//代理websocked
changeOrigin: true, //是否跨域
secure: false, //是否https接口
rewrite: (path) => path.replace(/^\/api/, ""),//重写请求路径,使用正则表达式将请求路径中的 /dev-api 前缀替换为空字符串。例如,/dev-api/users 将被重写为 /users,然后代理到目标服务器。
changeOrigin: true, //是否跨域
secure: false, //是否https接口
rewrite: (path) => path.replace(/^\/api/, ""), //重写请求路径,使用正则表达式将请求路径中的 /dev-api 前缀替换为空字符串。例如,/dev-api/users 将被重写为 /users,然后代理到目标服务器。
},
}
},
},
})
});
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论