cuihongwei/QingAnVue2TV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: cuihongwei:b6d85869a6a51fbf5ded5267f19057923c6da568
Branches Tags
cuihongwei:master
...
compare: cuihongwei:b96bd8976bdf0c4690c8fa02a320c34df0c6312f
Branches Tags
cuihongwei:master

2 Commits
b6d85869a6 ... b96bd8976b

Author SHA1 Message Date
Cui Hongwei
b96bd8976b feat: update QingAn dashboard units and camera views 2026-07-11 13:47:09 +08:00
Cui Hongwei
4d72a72541 chore: save dashboard state before unit updates 2026-07-08 19:52:21 +08:00
4 changed files with 340 additions and 97 deletions
Expand all files Collapse all files

4
public/config.js
View File

@@ -1,6 +1,8 @@
window.dt_Config = {
titleText: '智能制造数字孪生系统',
iframeAddress: 'http://localhost:10061/#?transparent=true',
dtIframe: 'http://localhost:10056/',
smIframe: 'http://localhost:10059/#?dmtmode=SM&autoPlayCraftCode=',
autoPlayCraftCode: 'E8077755-9B85-46A1-9B8A-85083C00DF26',
serverAddress: 'http://127.0.0.1:10057/submit/MESCommonBase.ashx'
}

BIN
public/png/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 63 KiB

428
src/views/qingAn.vue
View File

@@ -11,8 +11,11 @@
>
<div class="title-png">
<div class="left-control-bar">
<button type="button" class="mode-button">孪生模式</button>
<button type="button" class="mode-button">仿真模式</button>
<img class="brand-logo" src="/png/logo.png" alt="庆安" />
<div class="mode-button-group">
<button type="button" class="mode-button" :class="{ 'mode-button--active': currentMode === 'DT' }" @click="changeDtMode">孪生模式</button>
<button type="button" class="mode-button" :class="{ 'mode-button--active': currentMode === 'SM' }" @click="changeSmMode">仿真模式</button>
</div>
</div>
<span class="title-text">{{ titleText }}</span>
<div class="right-control-bar">
@@ -38,8 +41,9 @@
<div class="rightLine"></div>
<div class="main-content">
<iframe id="dmtIframe" v-if="iframeAddress" allowtransparency="true" class="model-bg-frame" :src="iframeAddress" title="三维模型"></iframe>
<div v-else class="model-placeholder">等待配置三维模型地址</div>
<iframe id="dmtIframe" v-if="mode === 'DT' && srcDt" allowtransparency="true" class="model-bg-frame" :src="srcDt" title="数字孪生模型" @load="handleIframeLoad"></iframe>
<iframe id="dmtIframe" v-if="mode === 'SM' && srcSm" allowtransparency="true" class="model-bg-frame" :src="srcSm" title="仿真模型" @load="handleIframeLoad"></iframe>
<div v-if="!mode || (!srcDt && !srcSm)" class="model-placeholder">等待配置三维模型地址</div>
<div class="left-box">
<section class="qa-panel qa-panel--combined">
@@ -47,45 +51,51 @@
<span class="left-title-text">线体任务联动状态</span>
</div>
<div class="qa-panel-body line-monitor-body">
<div v-for="row in lineMonitorRows" :key="row.name" class="monitor-card">
<div class="monitor-head">
<div class="monitor-title">
<strong>{{ row.name }}</strong>
<span>{{ row.taskNo }}</span>
</div>
<span class="line-status" :class="`line-status--${row.type}`">{{ row.status }}</span>
</div>
<div class="line-monitor-scroll-box">
<scroll class="line-monitor-scroll" :data="lineMonitorScrollList" :class-option="lineMonitorScrollOption">
<div class="line-monitor-content">
<div v-for="(row, index) in lineMonitorScrollList" :key="row.name + index" class="monitor-card">
<div class="monitor-head">
<div class="monitor-title">
<strong>{{ row.name }}</strong>
<span>{{ row.taskNo }}</span>
</div>
<span class="line-status" :class="`line-status--${row.type}`">{{ row.status }}</span>
</div>
<div class="task-summary">
<div class="task-route">
<span>起止位置</span>
<strong>{{ row.startPos }} -> {{ row.endPos }}</strong>
</div>
<div v-for="item in row.taskInfo" :key="item.label" class="task-field">
<span>{{ item.label }}</span>
<strong>{{ item.value }}</strong>
</div>
</div>
<div class="task-summary">
<div class="task-route">
<span>起止位置</span>
<strong>{{ row.startPos }} -> {{ row.endPos }}</strong>
</div>
<div v-for="item in row.taskInfo" :key="item.label" class="task-field">
<span>{{ item.label }}</span>
<strong>{{ item.value }}</strong>
</div>
</div>
<div class="signal-section">
<span class="signal-section__title">线体状态</span>
<div class="signal-grid signal-grid--line">
<div v-for="signal in row.lineSignals" :key="signal.label" class="signal-chip" :class="`signal-chip--${signal.state}`">
<i></i>
<span>{{ signal.label }}</span>
<div class="signal-section">
<span class="signal-section__title">线体状态</span>
<div class="signal-grid signal-grid--line">
<div v-for="signal in row.lineSignals" :key="signal.label" class="signal-chip" :class="`signal-chip--${signal.state}`">
<i></i>
<span>{{ signal.label }}</span>
</div>
</div>
</div>
<div class="signal-section">
<span class="signal-section__title">任务握手</span>
<div class="signal-grid signal-grid--handshake">
<div v-for="signal in row.handshakes" :key="signal.label" class="signal-chip" :class="`signal-chip--${signal.state}`">
<i></i>
<span>{{ signal.label }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="signal-section">
<span class="signal-section__title">任务握手</span>
<div class="signal-grid signal-grid--handshake">
<div v-for="signal in row.handshakes" :key="signal.label" class="signal-chip" :class="`signal-chip--${signal.state}`">
<i></i>
<span>{{ signal.label }}</span>
</div>
</div>
</div>
</scroll>
</div>
</div>
</section>
@@ -261,35 +271,56 @@ export default {
headerDateCn: '',
headerTime: '',
iframeAddress: '',
mode: 'DT',
currentMode: 'DT',
srcDt: 'http://localhost:10056/',
srcSm: 'http://localhost:10059/',
autoPlayCraftCode: '',
modeSwitchTimer: null,
cameraSyncTimer: null,
iframeReadyTimer: null,
dmtIframeReady: false,
clockTimer: null,
resizeHandler: null,
alarmPieChart: null,
activeView: 'longRail',
viewButtons: [
{ label: '长地轨视角', value: 'longRail' },
{ label: '短地轨视角', value: 'shortRail' },
{ label: '关节视角', value: 'joint' }
{ label: '加工中心单元视角', value: 'longRail' },
{ label: '车床加工单元视角', value: 'shortRail' },
{ label: '插齿机单元视角', value: 'joint' },
{ label: '磨床加工单元视角', value: 'grinder' },
{ label: '全揽视角', value: 'overview' }
],
cameraViews: {
longRail: {
target: { x: -5.725619423653396, y: 1.559219531820475, z: -5.23360272959924 },
position: { x: -15.805974184853365, y: 1.6199255013441012, z: 10.689003987116454 },
position: { x: -18.7530206850084, y: 1.6376732214652037, z: 15.344064598520557 },
zoom0: 1
},
shortRail: {
target: { x: -5.814177085428968, y: 16.255194514605996, z: -5.3456965650308055 },
position: { x: -15.390514108568938, y: 16.312865185653482, z: 9.780779815848938 },
position: { x: -17.571406723801864, y: 16.32599896951042, z: 13.22564819859711 },
zoom0: 1
},
joint: {
target: { x: 2.7622940494890424, y: 15.83905572715569, z: 0.08552052688719107 },
position: { x: -3.2731867066688367, y: 15.875402633541817, z: 9.618973337149745 },
target: { x: 2.7622940494890424, y: 15.83905572715569, z: 0.08552052688719117 },
position: { x: -4.6476929900921515, y: 15.883680193065107, z: 11.790099601955712 },
zoom0: 1
},
grinder: {
target: { x: -10.128808700176803, y: -15.480679803858136, z: 1.9651555238025413 },
position: { x: -21.43448244172167, y: -15.531783203240701, z: 12.347383997813267 },
zoom0: 1
},
overview: {
target: { x: -2.4540886878602937, y: -1.7690793306726371, z: -0.104103172990748 },
position: { x: -44.67609815729721, y: -1.5148097061598855, z: 38.669527626788486 },
zoom0: 1
}
},
lineMonitorRows: [
{
name: '长地轨',
name: '加工中心单元',
status: '执行中',
type: 'on',
taskNo: 'TASK 1001',
@@ -314,7 +345,7 @@ export default {
]
},
{
name: '短地轨',
name: '车床加工单元',
status: '准备就绪',
type: 'ok',
taskNo: 'TASK 1002',
@@ -339,7 +370,7 @@ export default {
]
},
{
name: '关节',
name: '插齿机单元',
status: '异常中断',
type: 'alarm',
taskNo: 'TASK 1003',
@@ -362,6 +393,31 @@ export default {
{ label: '错误', state: 'alarm' },
{ label: '完成', state: 'off' }
]
},
{
name: '磨床加工单元',
status: '预制待命',
type: 'ok',
taskNo: 'TASK 1004',
startPos: '05',
endPos: '10',
taskInfo: [
{ label: '配方号', value: 'RCP-18' },
{ label: '托盘', value: 'Pallet-D' }
],
lineSignals: [
{ label: 'PCS运行', state: 'on' },
{ label: '允许接收', state: 'on' },
{ label: '自动模式', state: 'warn' },
{ label: '急停', state: 'off' }
],
handshakes: [
{ label: '启动', state: 'off' },
{ label: '准备好', state: 'on' },
{ label: '忙碌', state: 'off' },
{ label: '错误', state: 'off' },
{ label: '完成', state: 'on' }
]
}
],
equipmentList: [
@@ -370,49 +426,57 @@ export default {
{ name: 'L2100SY', target: '3301 件', actual: '3298 件', status: '运行中', type: 'on', tags: [{ text: '上料完成', type: 'ok' }, { text: '下料完成', type: 'ok' }] },
{ name: '新日', target: '4108 件', actual: '4108 件', status: '运行中', type: 'on', tags: [{ text: '上料就绪', type: 'ok' }, { text: '下料就绪', type: 'ok' }] },
{ name: 'MAZAK', target: '-', actual: '-', status: '报警', type: 'alarm', tags: [{ text: '上料就绪', type: 'ok' }, { text: '下料就绪', type: 'ok' }] },
{ name: '磨床单元', target: '860 件', actual: '856 件', status: '待机', type: 'idle', tags: [{ text: '上料就绪', type: 'ok' }, { text: '砂轮就绪', type: 'ok' }] },
{ name: 'YKD5132H', target: '5104 件', actual: '5104 件', status: '待机', type: 'idle', tags: [{ text: '上料就绪', type: 'ok' }, { text: '下料就绪', type: 'ok' }] }
],
assistList: [
{ name: '长地轨打标机', status: '待机', type: 'idle', tags: [{ text: '待机中', type: 'idle' }] },
{ name: '短地轨打标机', status: '打标中', type: 'on', tags: [{ text: '开机中', type: 'ok' }, { text: '打标中', type: 'on' }] },
{ name: '关节打标机', status: '待机', type: 'idle', tags: [{ text: '开机中', type: 'ok' }, { text: '待机中', type: 'idle' }] },
{ name: '加工中心单元打标机', status: '待机', type: 'idle', tags: [{ text: '待机中', type: 'idle' }] },
{ name: '车床加工单元打标机', status: '打标中', type: 'on', tags: [{ text: '开机中', type: 'ok' }, { text: '打标中', type: 'on' }] },
{ name: '插齿机单元打标机', status: '待机', type: 'idle', tags: [{ text: '开机中', type: 'ok' }, { text: '待机中', type: 'idle' }] },
{ name: '清洗机', status: '运行中', type: 'on', tags: [{ text: '上料就绪', type: 'ok' }, { text: '运行中', type: 'on' }] },
{ name: '测量仪', status: '报警', type: 'alarm', tags: [{ text: '错误', type: 'alarm' }, { text: '下料就绪', type: 'ok' }] }
],
storageGroups: [
{
name: '长地轨库区',
name: '加工中心单元库区',
total: 9,
filled: 6,
slots: this.createSlots(['S1', 'S2', 'S4', 'S6', 'S7', 'S9'], 9)
},
{
name: '短地轨库区',
name: '车床加工单元库区',
total: 9,
filled: 6,
slots: this.createSlots(['S1', 'S3', 'S4', 'S6', 'S8', 'S9'], 9)
},
{
name: '关节库区',
name: '插齿机单元库区',
total: 6,
filled: 4,
slots: this.createSlots(['S1', 'S3', 'S5', 'S6'], 6)
},
{
name: '磨床加工单元库区',
total: 6,
filled: 3,
slots: this.createSlots(['S2', 'S4', 'S6'], 6)
}
],
alarmEvents: [
{ time: '10:26', device: 'MAZAK', level: '严重', type: 'alarm', message: 'ALARM=1，建议定位机床侧运行条件。' },
{ time: '10:22', device: '测量仪', level: '严重', type: 'alarm', message: '测量流程中断，等待复测确认。' },
{ time: '10:18', device: 'L2100SY', level: '警告', type: 'warn', message: '目标程序与实际程序不一致。' },
{ time: '10:12', device: '关节机器人', level: '警告', type: 'warn', message: '自动模式待恢复，需要人工确认。' },
{ time: '10:12', device: '插齿机单元机器人', level: '警告', type: 'warn', message: '自动模式待恢复，需要人工确认。' },
{ time: '10:08', device: '清洗机', level: '警告', type: 'warn', message: '下料等待时间超过设定阈值。' },
{ time: '10:03', device: '短地轨', level: '提示', type: 'idle', message: '任务已接收，等待上游放行。' }
{ time: '10:03', device: '车床加工单元', level: '提示', type: 'idle', message: '任务已接收，等待上游放行。' },
{ time: '09:58', device: '磨床加工单元', level: '提示', type: 'idle', message: '预制单元待接入，当前按模拟节拍展示。' }
],
alarmFrequencyTop5: [
{ name: 'MAZAK', value: 12 },
{ name: '测量仪', value: 9 },
{ name: '关节机器人', value: 7 },
{ name: '插齿机单元', value: 7 },
{ name: 'L2100SY', value: 5 },
{ name: '清洗机', value: 4 }
{ name: '磨床加工单元', value: 4 }
],
historyTicks: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
historyLegend: [
@@ -422,9 +486,10 @@ export default {
{ label: '报警', type: 'alarm' }
],
deviceHistoryList: [
{ name: '长地轨机器人', segments: [{ label: '待机', type: 'standby', start: 0, end: 3.4 }, { label: '运行', type: 'run', start: 3.4, end: 10.8 }, { label: '待机', type: 'standby', start: 10.8, end: 12.1 }, { label: '运行', type: 'run', start: 12.1, end: 20.4 }, { label: '关机', type: 'off', start: 20.4, end: 24 }] },
{ name: '短地轨机器人', segments: [{ label: '运行', type: 'run', start: 0, end: 5.2 }, { label: '待机', type: 'standby', start: 5.2, end: 8.8 }, { label: '运行', type: 'run', start: 8.8, end: 17.6 }, { label: '待机', type: 'standby', start: 17.6, end: 18.7 }, { label: '运行', type: 'run', start: 18.7, end: 24 }] },
{ name: '关节机器人', segments: [{ label: '关机', type: 'off', start: 0, end: 2.5 }, { label: '运行', type: 'run', start: 2.5, end: 9.4 }, { label: '报警', type: 'alarm', start: 9.4, end: 10.3 }, { label: '待机', type: 'standby', start: 10.3, end: 13.1 }, { label: '运行', type: 'run', start: 13.1, end: 24 }] },
{ name: '加工中心单元机器人', segments: [{ label: '待机', type: 'standby', start: 0, end: 3.4 }, { label: '运行', type: 'run', start: 3.4, end: 10.8 }, { label: '待机', type: 'standby', start: 10.8, end: 12.1 }, { label: '运行', type: 'run', start: 12.1, end: 20.4 }, { label: '关机', type: 'off', start: 20.4, end: 24 }] },
{ name: '车床加工单元机器人', segments: [{ label: '运行', type: 'run', start: 0, end: 5.2 }, { label: '待机', type: 'standby', start: 5.2, end: 8.8 }, { label: '运行', type: 'run', start: 8.8, end: 17.6 }, { label: '待机', type: 'standby', start: 17.6, end: 18.7 }, { label: '运行', type: 'run', start: 18.7, end: 24 }] },
{ name: '插齿机单元机器人', segments: [{ label: '关机', type: 'off', start: 0, end: 2.5 }, { label: '运行', type: 'run', start: 2.5, end: 9.4 }, { label: '报警', type: 'alarm', start: 9.4, end: 10.3 }, { label: '待机', type: 'standby', start: 10.3, end: 13.1 }, { label: '运行', type: 'run', start: 13.1, end: 24 }] },
{ name: '磨床加工单元', segments: [{ label: '关机', type: 'off', start: 0, end: 3.2 }, { label: '待机', type: 'standby', start: 3.2, end: 6.4 }, { label: '运行', type: 'run', start: 6.4, end: 15.8 }, { label: '待机', type: 'standby', start: 15.8, end: 17.2 }, { label: '运行', type: 'run', start: 17.2, end: 24 }] },
{ name: 'F500', segments: [{ label: '运行', type: 'run', start: 0, end: 7.8 }, { label: '待机', type: 'standby', start: 7.8, end: 9.2 }, { label: '运行', type: 'run', start: 9.2, end: 18.6 }, { label: '待机', type: 'standby', start: 18.6, end: 19.4 }, { label: '运行', type: 'run', start: 19.4, end: 24 }] },
{ name: 'L2100SY', segments: [{ label: '关机', type: 'off', start: 0, end: 4.1 }, { label: '运行', type: 'run', start: 4.1, end: 11.6 }, { label: '报警', type: 'alarm', start: 11.6, end: 12.8 }, { label: '运行', type: 'run', start: 12.8, end: 24 }] },
{ name: 'L2000LSY', segments: [{ label: '运行', type: 'run', start: 0, end: 6.6 }, { label: '待机', type: 'standby', start: 6.6, end: 7.8 }, { label: '运行', type: 'run', start: 7.8, end: 16.2 }, { label: '待机', type: 'standby', start: 16.2, end: 17.1 }, { label: '运行', type: 'run', start: 17.1, end: 24 }] },
@@ -433,13 +498,16 @@ export default {
{ name: 'YKD5132H', segments: [{ label: '关机', type: 'off', start: 0, end: 2.8 }, { label: '运行', type: 'run', start: 2.8, end: 12.2 }, { label: '待机', type: 'standby', start: 12.2, end: 13.5 }, { label: '运行', type: 'run', start: 13.5, end: 24 }] },
{ name: '清洗机', segments: [{ label: '关机', type: 'off', start: 0, end: 4.4 }, { label: '运行', type: 'run', start: 4.4, end: 9.7 }, { label: '待机', type: 'standby', start: 9.7, end: 13.6 }, { label: '运行', type: 'run', start: 13.6, end: 18.8 }, { label: '关机', type: 'off', start: 18.8, end: 24 }] },
{ name: '测量仪', segments: [{ label: '待机', type: 'standby', start: 0, end: 5.1 }, { label: '运行', type: 'run', start: 5.1, end: 13.3 }, { label: '待机', type: 'standby', start: 13.3, end: 14.2 }, { label: '运行', type: 'run', start: 14.2, end: 24 }] },
{ name: '长地轨打标机', segments: [{ label: '待机', type: 'standby', start: 0, end: 6.5 }, { label: '运行', type: 'run', start: 6.5, end: 11.2 }, { label: '待机', type: 'standby', start: 11.2, end: 15.8 }, { label: '运行', type: 'run', start: 15.8, end: 24 }] },
{ name: '短地轨打标机', segments: [{ label: '待机', type: 'standby', start: 0, end: 4.9 }, { label: '运行', type: 'run', start: 4.9, end: 12.6 }, { label: '待机', type: 'standby', start: 12.6, end: 13.4 }, { label: '运行', type: 'run', start: 13.4, end: 24 }] },
{ name: '关节打标机', segments: [{ label: '待机', type: 'standby', start: 0, end: 7.1 }, { label: '运行', type: 'run', start: 7.1, end: 10.9 }, { label: '待机', type: 'standby', start: 10.9, end: 16.5 }, { label: '运行', type: 'run', start: 16.5, end: 24 }] }
{ name: '加工中心单元打标机', segments: [{ label: '待机', type: 'standby', start: 0, end: 6.5 }, { label: '运行', type: 'run', start: 6.5, end: 11.2 }, { label: '待机', type: 'standby', start: 11.2, end: 15.8 }, { label: '运行', type: 'run', start: 15.8, end: 24 }] },
{ name: '车床加工单元打标机', segments: [{ label: '待机', type: 'standby', start: 0, end: 4.9 }, { label: '运行', type: 'run', start: 4.9, end: 12.6 }, { label: '待机', type: 'standby', start: 12.6, end: 13.4 }, { label: '运行', type: 'run', start: 13.4, end: 24 }] },
{ name: '插齿机单元打标机', segments: [{ label: '待机', type: 'standby', start: 0, end: 7.1 }, { label: '运行', type: 'run', start: 7.1, end: 10.9 }, { label: '待机', type: 'standby', start: 10.9, end: 16.5 }, { label: '运行', type: 'run', start: 16.5, end: 24 }] }
]
}
},
computed: {
lineMonitorScrollList() {
return [...this.lineMonitorRows, ...this.lineMonitorRows]
},
equipmentScrollList() {
return [...this.equipmentList, ...this.equipmentList]
},
@@ -449,6 +517,18 @@ export default {
deviceHistoryScrollList() {
return [...this.deviceHistoryList, ...this.deviceHistoryList]
},
lineMonitorScrollOption() {
return {
step: 0.38,
limitMoveNum: 3,
hoverStop: true,
direction: 1,
openTouch: false,
singleHeight: 168,
waitTime: 1200,
autoPlay: true
}
},
equipmentScrollOption() {
return {
step: 0.45,
@@ -487,8 +567,12 @@ export default {
}
},
mounted() {
this.iframeAddress = window.dt_Config && window.dt_Config.iframeAddress ? window.dt_Config.iframeAddress : ''
this.titleText = window.dt_Config.titleText
const config = window.dt_Config || {}
this.iframeAddress = config.iframeAddress ? config.iframeAddress : ''
this.autoPlayCraftCode = config.autoPlayCraftCode || 'E8077755-9B85-46A1-9B8A-85083C00DF26'
this.srcDt = this.buildIframeUrl(config.dtIframe || this.srcDt, this.autoPlayCraftCode)
this.srcSm = this.buildIframeUrl(config.smIframe || this.srcSm, this.autoPlayCraftCode)
this.titleText = config.titleText
this.updateTime()
this.setScale()
this.$nextTick(this.initAlarmPieChart)
@@ -500,6 +584,7 @@ export default {
}
}
window.addEventListener('resize', this.resizeHandler)
window.addEventListener('message', this.handleDmtMessage)
},
beforeDestroy() {
if (this.clockTimer) {
@@ -510,6 +595,19 @@ export default {
window.removeEventListener('resize', this.resizeHandler)
this.resizeHandler = null
}
window.removeEventListener('message', this.handleDmtMessage)
if (this.modeSwitchTimer) {
clearTimeout(this.modeSwitchTimer)
this.modeSwitchTimer = null
}
if (this.cameraSyncTimer) {
clearTimeout(this.cameraSyncTimer)
this.cameraSyncTimer = null
}
if (this.iframeReadyTimer) {
clearTimeout(this.iframeReadyTimer)
this.iframeReadyTimer = null
}
if (this.alarmPieChart) {
this.alarmPieChart.dispose()
this.alarmPieChart = null
@@ -535,18 +633,99 @@ export default {
},
changeView(value) {
this.activeView = value
const camera = this.cameraViews[value]
if (!camera) return
if (this.dmtIframeReady) {
this.syncActiveCamera()
}
},
buildIframeUrl(baseUrl, craftCode) {
if (!baseUrl) {
return ''
}
let nextUrl = baseUrl
if (craftCode && nextUrl.includes('autoPlayCraftCode=') && !nextUrl.includes(craftCode)) {
const separator = nextUrl.endsWith('=') || nextUrl.endsWith('/') ? '' : '/'
nextUrl = `${nextUrl}${separator}${craftCode}`
}
return this.withTransparentParam(nextUrl)
},
withTransparentParam(url) {
if (!url || url.includes('transparent=true')) {
return url
}
const hashIndex = url.indexOf('#')
if (hashIndex > -1) {
const separator = url.slice(hashIndex).includes('?') ? '&' : '?'
return `${url}${separator}transparent=true`
}
return `${url}${url.endsWith('/') ? '' : '/'}#?transparent=true`
},
handleIframeLoad() {
this.dmtIframeReady = false
if (this.iframeReadyTimer) {
clearTimeout(this.iframeReadyTimer)
this.iframeReadyTimer = null
}
},
handleDmtMessage(event) {
if (!event || !event.data || event.data.type !== 'dmt_load_finish') {
return
}
const iframe = document.getElementById('dmtIframe')
if (!iframe || !iframe.contentWindow) return
iframe.contentWindow.postMessage({
type: 'set_camera',
data: {
target: camera.target,
position: camera.position,
zoom0: camera.zoom0
}
}, '*')
if (!iframe || event.source !== iframe.contentWindow) {
return
}
this.markDmtIframeReady()
},
markDmtIframeReady() {
this.dmtIframeReady = true
if (this.iframeReadyTimer) {
clearTimeout(this.iframeReadyTimer)
this.iframeReadyTimer = null
}
this.syncActiveCamera()
},
syncActiveCamera() {
const camera = this.cameraViews[this.activeView]
if (!camera) return
if (!this.dmtIframeReady) return
if (this.cameraSyncTimer) {
clearTimeout(this.cameraSyncTimer)
}
this.cameraSyncTimer = setTimeout(() => {
const iframe = document.getElementById('dmtIframe')
if (!iframe || !iframe.contentWindow) return
iframe.contentWindow.postMessage({
type: 'set_camera',
data: {
target: camera.target,
position: camera.position,
zoom0: camera.zoom0
}
}, '*')
this.cameraSyncTimer = null
}, 300)
},
switchMode(mode) {
this.currentMode = mode
this.mode = ''
this.dmtIframeReady = false
if (this.iframeReadyTimer) {
clearTimeout(this.iframeReadyTimer)
this.iframeReadyTimer = null
}
if (this.modeSwitchTimer) {
clearTimeout(this.modeSwitchTimer)
}
this.modeSwitchTimer = setTimeout(() => {
this.mode = mode
this.modeSwitchTimer = null
}, 600)
},
changeDtMode() {
this.switchMode('DT')
},
changeSmMode() {
this.switchMode('SM')
},
initAlarmPieChart() {
if (!this.$refs.alarmPieChart) {
@@ -720,7 +899,6 @@ body,
z-index: 0;
background:
radial-gradient(circle at 50% 48%, rgba(44, 143, 255, 0.14), transparent 34%);
mix-blend-mode: screen;
opacity: 0.42;
pointer-events: none;
}
@@ -739,12 +917,12 @@ body,
pointer-events: none;
display: flex;
justify-content: center;
filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32);
}
.view-switch {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 6px;
pointer-events: auto;
}
@@ -762,7 +940,7 @@ body,
inset 0 -10px 18px rgba(0, 0, 0, 0.18),
0 6px 14px rgba(0, 0, 0, 0.28);
font-family: inherit;
font-size: 12px;
font-size: 11px;
font-weight: 700;
line-height: 28px;
white-space: nowrap;
@@ -840,10 +1018,48 @@ body,
0 0 18px rgba(75, 245, 209, 0.22);
}
.mode-button--active {
color: #ffffff;
border-color: rgba(128, 255, 230, 0.95);
background:
linear-gradient(90deg, rgba(12, 62, 78, 0.96), rgba(26, 122, 132, 0.88), rgba(12, 62, 78, 0.96)),
rgba(4, 20, 35, 0.86);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.26),
inset 0 0 20px rgba(75, 245, 209, 0.24),
0 0 20px rgba(75, 245, 209, 0.28);
}
.mode-button:focus {
outline: none;
}
.brand-logo {
display: block;
width: 300px;
height: 50px;
box-sizing: border-box;
padding: 6px 12px;
object-fit: contain;
object-position: left center;
pointer-events: none;
border: 1px solid rgba(255, 255, 255, 0.72);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(231, 242, 248, 0.9)),
rgba(255, 255, 255, 0.92);
box-shadow:
inset 0 0 0 1px rgba(114, 206, 255, 0.14),
0 0 16px rgba(114, 232, 255, 0.18),
0 8px 20px rgba(0, 0, 0, 0.18);
}
.mode-button-group {
display: flex;
width: 300px;
height: 30px;
gap: 10px;
}
.title-text {
margin-right: 37px;
color: #fff;
@@ -914,18 +1130,19 @@ body,
.left-control-bar,
.right-control-bar {
position: absolute;
width: 300px;
height: 30px;
width: 520px;
z-index: 20;
pointer-events: auto;
}
.left-control-bar {
top: 50px;
top: 18px;
left: 80px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
height: 66px;
gap: 7px;
}
.right-control-bar {
@@ -939,12 +1156,16 @@ body,
box-sizing: border-box;
}
.right-control-bar .df-header__timebar,
.right-control-bar .view-switch {
.right-control-bar .df-header__timebar {
width: 236px;
justify-self: end;
}
.right-control-bar .view-switch {
width: 520px;
justify-self: end;
}
.model-bg-frame {
position: absolute;
inset: 0;
@@ -1019,15 +1240,30 @@ body,
}
.line-monitor-body {
display: flex;
flex-direction: column;
gap: 7px;
padding: 8px 12px;
overflow: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
}
.line-monitor-scroll-box {
width: 100%;
height: 100%;
overflow: hidden;
}
.line-monitor-scroll,
.line-monitor-content {
min-height: 100%;
overflow: hidden;
}
.line-monitor-content {
display: flex;
flex-direction: column;
gap: 8px;
}
.right-box .qa-panel:first-child {
flex: 1;
min-height: 0;
@@ -1301,8 +1537,8 @@ body,
}
.monitor-card {
flex: 1;
min-height: 0;
flex: 0 0 168px;
min-height: 168px;
margin-bottom: 0;
padding: 8px 12px;
display: flex;
@@ -1628,7 +1864,7 @@ body,
.assist-head,
.assist-status-row {
display: grid;
grid-template-columns: 86px minmax(138px, 1fr) 50px;
grid-template-columns: 118px minmax(108px, 1fr) 50px;
align-items: center;
gap: 8px;
}
@@ -1691,7 +1927,7 @@ body,
.storage-groups {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
align-items: stretch;
width: 100%;
@@ -1863,7 +2099,7 @@ body,
.history-head,
.history-row {
display: grid;
grid-template-columns: 92px 1fr;
grid-template-columns: 132px 1fr;
align-items: center;
gap: 10px;
box-sizing: border-box;

5
vue.config.js
View File

@@ -26,6 +26,11 @@ module.exports = {
}
}
}
},
configureWebpack: {
output: {
hashFunction: 'sha256'
}
}
// publicPath: '/GQMobile/'
}