Compare commits
8 Commits
projects/q
...
projects/q
| Author | SHA1 | Date | |
|---|---|---|---|
| 1a1a3a9129 | |||
| e91fcab0c8 | |||
|
|
1a0d786774 | ||
|
|
1b6e6702ed | ||
|
|
f23e025974 | ||
|
|
d77bebd375 | ||
| 4225ff35ae | |||
| dd85c50077 |
@@ -37,7 +37,9 @@ export default {
|
||||
this.outputData.push(item.outputNum)
|
||||
this.goodRateData.push(item.goodRate)
|
||||
})
|
||||
this.$nextTick(()=>{
|
||||
this.initChart();
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
||||
@@ -1,17 +1,20 @@
|
||||
<template>
|
||||
<div ref='dataBoardBoxB' class='dataBoardBoxB'>
|
||||
<div id="dataBoardBox" class='dataBoardBox' style="width: 1920px;height: 1080px;" :style="{ transform: 'scale(' + scaleNum + ')' }">
|
||||
<div ref="dataBoardBoxB" class="dataBoardBoxB">
|
||||
<div
|
||||
id="dataBoardBox"
|
||||
class="dataBoardBox"
|
||||
style="width: 1920px; height: 1080px"
|
||||
:style="{ transform: 'scale(' + scaleNum + ')' }">
|
||||
<DataBoardHeader
|
||||
:is-full-screen="isFullScreen"
|
||||
@screenfullChange="screenfullChange"
|
||||
/>
|
||||
<LeftTop :dataObj='dataObj'/>
|
||||
<LeftBottom :dataObj='dataObj'/>
|
||||
<CenterTop :scaleNum='scaleNum' :dataObj='dataObj'/>
|
||||
<CenterBottomL :dataObj='dataObj'/>
|
||||
<CenterBottomR :dataObj='dataObj'/>
|
||||
<RightTop :dataObj='dataObj'/>
|
||||
<RightBottom :dataObj='dataObj'/>
|
||||
@screenfullChange="screenfullChange" />
|
||||
<LeftTop :dataObj="dataObj" />
|
||||
<LeftBottom :dataObj="dataObj" />
|
||||
<CenterTop :scaleNum="scaleNum" :dataObj="dataObj" />
|
||||
<CenterBottomL :dataObj="dataObj" />
|
||||
<CenterBottomR :dataObj="dataObj" />
|
||||
<RightTop :dataObj="dataObj" />
|
||||
<RightBottom :dataObj="dataObj" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -28,10 +31,19 @@ import RightBottom from './components/RightBottom.vue';
|
||||
import { debounce } from '@/utils/debounce';
|
||||
import screenfull from 'screenfull';
|
||||
import { getAccessToken } from '@/utils/auth';
|
||||
import store from "@/store";
|
||||
import store from '@/store';
|
||||
export default {
|
||||
name: 'DataBoard',
|
||||
components: { DataBoardHeader,LeftTop,LeftBottom,CenterTop,CenterBottomL,CenterBottomR,RightTop,RightBottom },
|
||||
components: {
|
||||
DataBoardHeader,
|
||||
LeftTop,
|
||||
LeftBottom,
|
||||
CenterTop,
|
||||
CenterBottomL,
|
||||
CenterBottomR,
|
||||
RightTop,
|
||||
RightBottom,
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
@@ -41,44 +53,52 @@ export default {
|
||||
sseReader: null, // 保存流读取器
|
||||
abortController: null, // 用于中止 fetch 请求
|
||||
retryCount: 0, // 当前重试次数
|
||||
isDestroyed: false // 标记组件是否已销毁
|
||||
isDestroyed: false, // 标记组件是否已销毁
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
this.init();
|
||||
},
|
||||
mounted() {
|
||||
this.boxReset = debounce(() => {
|
||||
this.resetSize()
|
||||
}, 300)
|
||||
this.boxReset()
|
||||
this.resetSize();
|
||||
}, 300);
|
||||
this.boxReset();
|
||||
window.addEventListener('resize', () => {
|
||||
this.boxReset()
|
||||
})
|
||||
this.getData()
|
||||
this.boxReset();
|
||||
});
|
||||
this.getData();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.closeSSE();
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('resize', this.boxReset);
|
||||
},
|
||||
computed: {
|
||||
sidebarOpened() {
|
||||
return this.$store.state.app.sidebar.opened
|
||||
}
|
||||
return this.$store.state.app.sidebar.opened;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
sidebarOpened(newVal, oldVal) {
|
||||
this.boxReset()
|
||||
}
|
||||
this.boxReset();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async getData() {
|
||||
let _this = this;
|
||||
if (_this.isDestroyed) return;
|
||||
const url = process.env.VUE_APP_BASE_API+'/admin-api/monitoring/message/subscribe/'+store.getters.userId+'-'+Date.now();
|
||||
const token = getAccessToken()
|
||||
const url =
|
||||
process.env.VUE_APP_BASE_API +
|
||||
'/admin-api/monitoring/message/subscribe/' +
|
||||
store.getters.userId +
|
||||
'-' +
|
||||
Date.now();
|
||||
const token = getAccessToken();
|
||||
const headers = new Headers({
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'text/event-stream'
|
||||
Authorization: `Bearer ${token}`,
|
||||
'Content-Type': 'text/event-stream',
|
||||
});
|
||||
try {
|
||||
// 创建中止控制器
|
||||
@@ -87,12 +107,14 @@ export default {
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: headers,
|
||||
signal: _this.abortController.signal // 绑定中止信号
|
||||
signal: _this.abortController.signal, // 绑定中止信号
|
||||
});
|
||||
|
||||
// 获取流读取器
|
||||
_this.sseReader = response.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
let buffer = '';
|
||||
let receivedBytes = 0;
|
||||
|
||||
// 持续读取流数据
|
||||
while (true) {
|
||||
@@ -102,13 +124,34 @@ export default {
|
||||
_this.handleReconnect(); // 触发重连
|
||||
break;
|
||||
}
|
||||
// 处理 SSE 事件数据
|
||||
const data = decoder.decode(value);
|
||||
console.log('收到消息:', data);
|
||||
if (_this.isValidData(data)){
|
||||
_this.upDateMsg(data);
|
||||
// const data = decoder.decode(value);
|
||||
// console.log('收到消息:', data);
|
||||
|
||||
receivedBytes += value.length;
|
||||
console.log(
|
||||
`收到数据块: ${value.length} 字节, 累计: ${receivedBytes} 字节`
|
||||
);
|
||||
const chunk = decoder.decode(value, { stream: true });
|
||||
buffer += chunk;
|
||||
|
||||
// 处理完整的消息
|
||||
const messages = buffer.split('\n\n'); // SSE 消息以双换行分隔
|
||||
buffer = messages.pop() || ''; // 保留最后一个不完整的消息
|
||||
|
||||
for (const message of messages) {
|
||||
if (_this.isValidData(message)) {
|
||||
// console.log('完整 SSE 消息:', message);
|
||||
_this.upDateMsg(message);
|
||||
}
|
||||
}
|
||||
|
||||
// 处理 SSE 事件数据
|
||||
// const data = decoder.decode(value);
|
||||
// console.log('收到消息:', data);
|
||||
// if (_this.isValidData(data)){
|
||||
// _this.upDateMsg(data);
|
||||
// }
|
||||
}
|
||||
} catch (error) {
|
||||
// 主动中止的请求不报错
|
||||
if (error.name === 'AbortError') return;
|
||||
@@ -146,68 +189,70 @@ export default {
|
||||
},
|
||||
upDateMsg(data) {
|
||||
const jsonStr = data.replace(/^data:/, '').trim();
|
||||
console.log('jsonStr', jsonStr);
|
||||
|
||||
try {
|
||||
const dataObj = JSON.parse(jsonStr);
|
||||
this.dataObj = dataObj
|
||||
console.log('dataObj',this.dataObj)
|
||||
this.dataObj = dataObj;
|
||||
console.log('dataObj', this.dataObj);
|
||||
} catch (e) {
|
||||
console.error('JSON 解析失败:', e);
|
||||
}
|
||||
},
|
||||
change() {
|
||||
this.isFullScreen = screenfull.isFullscreen
|
||||
this.isFullScreen = screenfull.isFullscreen;
|
||||
},
|
||||
init() {
|
||||
if (!screenfull.isEnabled) {
|
||||
this.$message({
|
||||
message: 'you browser can not work',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
type: 'warning',
|
||||
});
|
||||
return false;
|
||||
}
|
||||
screenfull.on('change', this.change)
|
||||
screenfull.on('change', this.change);
|
||||
},
|
||||
destroy() {
|
||||
if (!screenfull.isEnabled) {
|
||||
this.$message({
|
||||
message: 'you browser can not work',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
type: 'warning',
|
||||
});
|
||||
return false;
|
||||
}
|
||||
screenfull.off('change', this.change)
|
||||
screenfull.off('change', this.change);
|
||||
},
|
||||
// 全屏
|
||||
screenfullChange() {
|
||||
if (!screenfull.isEnabled) {
|
||||
this.$message({
|
||||
message: 'you browser can not work',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
type: 'warning',
|
||||
});
|
||||
return false;
|
||||
}
|
||||
screenfull.toggle(this.$refs.dataBoardBoxB)
|
||||
screenfull.toggle(this.$refs.dataBoardBoxB);
|
||||
},
|
||||
resetSize() {
|
||||
const dataBoardBox = document.getElementById('dataBoardBox')
|
||||
const rw = parseFloat(window.innerWidth)
|
||||
const rh = parseFloat(window.innerHeight)
|
||||
const bw = parseFloat(dataBoardBox.style.width)
|
||||
const bh = parseFloat(dataBoardBox.style.height)
|
||||
let wx = 0
|
||||
let hy = 0
|
||||
const dataBoardBox = document.getElementById('dataBoardBox');
|
||||
const rw = parseFloat(window.innerWidth);
|
||||
const rh = parseFloat(window.innerHeight);
|
||||
const bw = parseFloat(dataBoardBox.style.width);
|
||||
const bh = parseFloat(dataBoardBox.style.height);
|
||||
let wx = 0;
|
||||
let hy = 0;
|
||||
if (screenfull.isFullscreen) {
|
||||
wx = rw / bw
|
||||
hy = rh / bh
|
||||
wx = rw / bw;
|
||||
hy = rh / bh;
|
||||
} else {
|
||||
if (this.$store.state.app.sidebar.opened) {
|
||||
wx = (rw - 283) / bw
|
||||
wx = (rw - 283) / bw;
|
||||
} else {
|
||||
wx = (rw - 88) / bw
|
||||
wx = (rw - 88) / bw;
|
||||
}
|
||||
hy = (rh - 150) / bh
|
||||
hy = (rh - 150) / bh;
|
||||
}
|
||||
this.scaleNum = wx < hy ? wx : hy
|
||||
this.scaleNum = wx < hy ? wx : hy;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -48,7 +48,7 @@ const tableProps = [
|
||||
prop: 'reportDate',
|
||||
label: '日期',
|
||||
width: 130,
|
||||
fixed: true
|
||||
fixed: true,
|
||||
},
|
||||
{
|
||||
prop: 'factoryName',
|
||||
@@ -290,6 +290,10 @@ export default {
|
||||
type: 'select',
|
||||
label: '维度',
|
||||
selectOptions: [
|
||||
// {
|
||||
// id: '0',
|
||||
// name: '班',
|
||||
// },
|
||||
{
|
||||
id: 1,
|
||||
name: '日',
|
||||
@@ -414,13 +418,17 @@ export default {
|
||||
buttonClick(val) {
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
|
||||
this.listQuery.pageNo = 1;
|
||||
this.listQuery.pageSize = 10;
|
||||
this.listQuery.factoryId = val.factoryId || undefined;
|
||||
this.listQuery.lineId = val.lineId ? [val.lineId] : [];
|
||||
this.listQuery.reportType = val.reportType || undefined;
|
||||
console.log(val.reportType);
|
||||
this.listQuery.reportType = val.reportType ? Number(val.reportType) :undefined
|
||||
this.listQuery.startTime = val.timeVal ? val.timeVal[0] : undefined;
|
||||
this.listQuery.endTime = val.timeVal ? val.timeVal[1] : undefined;
|
||||
console.log(this.listQuery.reportType);
|
||||
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'export':
|
||||
@@ -433,10 +441,41 @@ export default {
|
||||
// 获取数据列表
|
||||
getDataList() {
|
||||
this.dataListLoading = true;
|
||||
const arr = ['日', '周', '月', '年'];
|
||||
const arr = [
|
||||
{
|
||||
id: 0,
|
||||
name: '班',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '日',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '周',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '月',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '年',
|
||||
},
|
||||
]
|
||||
const reportTypeNameMap = arr.reduce((map, item) => {
|
||||
map[item.id] = item.name;
|
||||
return map;
|
||||
}, {});
|
||||
|
||||
this.urlOptions.getDataListURL(this.listQuery).then((response) => {
|
||||
this.tableData = response.data.list.map((item, index) => {
|
||||
item.reportType = arr[item.reportType - 1];
|
||||
const typeId = item.reportType;
|
||||
item.reportType = reportTypeNameMap[typeId] || '未知';
|
||||
// item.reportType = arr[item.reportType - 1];
|
||||
|
||||
item.reportDate = item.reportDate;
|
||||
|
||||
item.originalLossNum = item.original?.lossNum;
|
||||
item.originalLossArea = item.original?.lossArea;
|
||||
item.edgeLossNum = item.edge?.lossNum;
|
||||
|
||||
@@ -305,7 +305,7 @@ export default {
|
||||
this.startTime = new Date(payload.recordTime)
|
||||
this.queryParams.lineId = payload.lineId || null;
|
||||
this.queryParams.sectionId = payload.sectionId || null;
|
||||
this.queryParams.equipmentId = payload.equipmentId || null;
|
||||
this.queryParams.equipmentId = payload.equipmentId ? Number(payload.equipmentId) : undefined
|
||||
this.queryParams.recordTime = payload.recordTime
|
||||
? [
|
||||
payload.recordTime,
|
||||
|
||||
@@ -132,7 +132,7 @@ export default {
|
||||
},
|
||||
],
|
||||
queryParams: {
|
||||
equipmentId: null,
|
||||
equipmentId: undefined,
|
||||
recordTime: null,
|
||||
},
|
||||
graphList: [],
|
||||
@@ -153,7 +153,7 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
this.$refs['search-bar'].formInline.recordTime = formattedDate;
|
||||
});
|
||||
this.queryParams.equipmentId = Number(this.$route.query.eqid);
|
||||
this.queryParams.equipmentId = this.$route.query.eqid? Number(this.$route.query.eqid): undefined
|
||||
this.startTime = new Date(formattedDate);
|
||||
this.queryParams.recordTime = formattedDate
|
||||
? [
|
||||
@@ -207,7 +207,7 @@ export default {
|
||||
|
||||
/** 重置查询条件 */
|
||||
initQuery() {
|
||||
this.queryParams.equipmentId = null;
|
||||
this.queryParams.equipmentId = undefined;
|
||||
this.queryParams.recordTime = null;
|
||||
},
|
||||
|
||||
@@ -251,7 +251,7 @@ export default {
|
||||
},
|
||||
|
||||
handleSearchBarBtnClick({ btnName, ...payload }) {
|
||||
this.queryParams.equipmentId = Number(this.$route.query.eqid);
|
||||
this.queryParams.equipmentId = this.$route.query.eqid ? Number(this.$route.query.eqid) :undefined
|
||||
switch (btnName) {
|
||||
case 'search':
|
||||
if (!payload.recordTime || payload.recordTime.length <= 0) {
|
||||
|
||||
@@ -248,12 +248,11 @@ export default {
|
||||
this.lineArr = response.data;
|
||||
this.lineArr.forEach((item, index) => {
|
||||
const num = [
|
||||
'',
|
||||
'1672847052717821953',
|
||||
'1672847052717821954',
|
||||
'1686260211054157825',
|
||||
'1701892552632770122',
|
||||
'1714562503683465331',
|
||||
'20001',
|
||||
'20002',
|
||||
'20003',
|
||||
'20004',
|
||||
'20005',
|
||||
].indexOf(item.id);
|
||||
if (num > 0) {
|
||||
item.num = num;
|
||||
|
||||
@@ -260,14 +260,16 @@ export default {
|
||||
// Create a new array by duplicating each item
|
||||
const duplicatedArr = [];
|
||||
this.lineArr.forEach((item, index) => {
|
||||
console.log(item,'item');
|
||||
|
||||
// Process original item
|
||||
const num = [
|
||||
'',
|
||||
'1672847052717821953',
|
||||
'1672847052717821954',
|
||||
'1686260211054157825',
|
||||
'1701892552632770122',
|
||||
'1714562503683465331',
|
||||
20001,
|
||||
20002,
|
||||
20003,
|
||||
20004,
|
||||
20005,
|
||||
].indexOf(item.id);
|
||||
if (num > 0) {
|
||||
// Original item with copy=1
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user