Reviewed-on: http://git.picaiba.com/mt-fe-group/yudao-dev/pulls/174pull/175/head
@@ -24,11 +24,16 @@ VUE_APP_BASE_API = 'http://192.168.0.33:48082' | |||
# VUE_APP_BASE_API = 'http://192.168.1.104:48082' | |||
# VUE_APP_BASE_API = 'http://192.168.1.62:48082' | |||
# VUE_APP_BASE_API = 'http://192.168.1.78:48082' | |||
# socket地址 | |||
VUE_APP_Socket_API = 'ws://192.168.0.33:48082' | |||
<<<<<<< HEAD | |||
# dcs地址 | |||
VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081' | |||
======= | |||
>>>>>>> projects/mesxc-test | |||
# socket地址 | |||
VUE_APP_Socket_API = 'ws://10.70.2.2:8080' | |||
# VUE_APP_Socket_API = 'ws://192.168.0.33:48082' | |||
# VUE_APP_BASE_API = 'http://100.64.0.23:48082' | |||
# 积木报表指向地址 | |||
VUE_APP_JIMU_API = 'http://10.70.2.22:8080' | |||
@@ -20,6 +20,7 @@ const state = { | |||
gasChartWeekTrend:{}, // 烟气 | |||
gasChartMonthTrend:{}, // 烟气 | |||
gasChartYearTrend:{}, // 烟气 | |||
israCheckType: [], | |||
israDayStatistic: [],//缺陷统计 | |||
israWeekStatistic: [],//缺陷统计 | |||
israMonthStatistic: [],//缺陷统计 | |||
@@ -73,8 +74,17 @@ const state = { | |||
"productionLineId": 1737312466842456065, | |||
"sumInputNum": 27 | |||
}], // SJG产线产量及良品率 | |||
sjgEquipment:[],// SJG设备报警 | |||
sjgEquipment:[ | |||
{name: 'sadd', error:false,code: 'EQ202312121624540000072',status: "正常"} | |||
],// SJG设备报警 | |||
workOrder: [], // 工单监控 | |||
defectSum: [], // 缺陷汇总 | |||
order: [],// 订单完成情况 | |||
yieldRateTable: [],// 本日生产良率table | |||
cutChartDay:[], | |||
cutChartWeek:[], | |||
cutChartMonth:[], | |||
cutChartYear:[] | |||
}; | |||
const mutations = { | |||
SET_FANFREQUENCYINFO: (state, fanFrequencyInfo) => { | |||
@@ -123,12 +133,13 @@ const mutations = { | |||
state.exhaustGasInfo = exhaustGasInfo | |||
}, | |||
SET_EXHAUSTGASCHART: (state, exhaustGasChart) => { | |||
state.gasChartDayTrend = exhaustGasChart.gasChartDayTrend | |||
state.gasChartWeekTrend = exhaustGasChart.gasChartWeekTrend | |||
state.gasChartMonthTrend = exhaustGasChart.gasChartMonthTrend | |||
state.gasChartYearTrend = exhaustGasChart.gasChartYearTrend | |||
state.gasChartDayTrend = exhaustGasChart.dayTrend | |||
state.gasChartWeekTrend = exhaustGasChart.weekTrend | |||
state.gasChartMonthTrend = exhaustGasChart.monthTrend | |||
state.gasChartYearTrend = exhaustGasChart.yearTrend | |||
}, | |||
SET_DEFECTCHART: (state, israStatistic) => { | |||
state.israCheckType = israStatistic.checkType | |||
state.israDayStatistic = israStatistic.dayStatistic | |||
state.israWeekStatistic = israStatistic.weekStatistic | |||
state.israMonthStatistic = israStatistic.monthStatistic | |||
@@ -136,6 +147,33 @@ const mutations = { | |||
}, | |||
SET_PRODUCTLINE: (state, productline) => { | |||
state.productline = productline | |||
}, | |||
SET_SJGEQ: (state, equipment) => { | |||
state.sjgEquipment = equipment | |||
}, | |||
SET_WORKORDER: (state, workOrder) => { | |||
state.workOrder = workOrder | |||
}, | |||
SET_DEFECTSUM: (state, defectSum) => { | |||
state.defectSum = defectSum | |||
}, | |||
SET_ORDER: (state, order) => { | |||
state.order = order | |||
}, | |||
SET_YIELDRATETABLE: (state, yieldRateTable) => { | |||
state.yieldRateTable = yieldRateTable | |||
}, | |||
SET_CUTCHARDAY: (state, cutChartDay) => { | |||
state.cutChartDay = cutChartDay | |||
}, | |||
SET_CUTCHARWEEK: (state, cutChartWeek) => { | |||
state.cutChartWeek = cutChartWeek | |||
}, | |||
SET_CUTCHARMONTH: (state, cutChartMonth) => { | |||
state.cutChartMonth = cutChartMonth | |||
}, | |||
SET_CUTCHARYEAR: (state, cutChartYear) => { | |||
state.cutChartYear = cutChartYear | |||
} | |||
}; | |||
const actions = { | |||
@@ -180,6 +218,33 @@ const actions = { | |||
setProductline({ commit }, productline) { | |||
commit('SET_PRODUCTLINE', productline.payload) | |||
}, | |||
setSJGEq({ commit }, equipment) { | |||
commit('SET_SJGEQ', equipment.payload) | |||
}, | |||
setWorkOrder({ commit }, workOrder) { | |||
commit('SET_WORKORDER', workOrder.payload) | |||
}, | |||
setDefectSum({ commit }, defectSum) { | |||
commit('SET_DEFECTSUM', defectSum.payload) | |||
}, | |||
setOrder({ commit }, order) { | |||
commit('SET_ORDER', order.payload) | |||
}, | |||
setYieldRateTable({ commit }, yieldRateTable) { | |||
commit('SET_YIELDRATETABLE', yieldRateTable.payload) | |||
}, | |||
setCutChartDay({ commit }, cutChartDay) { | |||
commit('SET_CUTCHARDAY', cutChartDay.payload) | |||
}, | |||
setCutChartWeek({ commit }, cutChartWeek) { | |||
commit('SET_CUTCHARWEEK', cutChartWeek.payload) | |||
}, | |||
setCutChartMonth({ commit }, cutChartMonth) { | |||
commit('SET_CUTCHARMONTH', cutChartMonth.payload) | |||
}, | |||
setCutChartYear({ commit }, cutChartYear) { | |||
commit('SET_CUTCHARYEAR', cutChartYear.payload) | |||
} | |||
}; | |||
export default { | |||
namespaced: true, | |||
@@ -200,4 +200,12 @@ input, textarea{ | |||
// 弹出框,上下分布,去掉label的padding-bottom | |||
.el-form--label-top .el-form-item__label { | |||
padding: 0; | |||
} | |||
// 大屏滚动表格 | |||
.dv-scroll-board .rows .ceil, .dv-scroll-board .header .header-item { | |||
border-right: 1px solid rgba(13, 23, 40, 1); | |||
} | |||
.dv-scroll-board .rows .ceil:last-child, .dv-scroll-board .header .header-item:last-child { | |||
border-right: none; | |||
} |
@@ -17,6 +17,9 @@ export default { | |||
} | |||
}, | |||
computed: { | |||
israCheckType() { | |||
return this.$store.state.websocket.israCheckType | |||
}, | |||
israDayStatistic() { | |||
return this.$store.state.websocket.israDayStatistic | |||
}, | |||
@@ -34,7 +37,7 @@ export default { | |||
israDayStatistic: { | |||
handler(newVal, oldVal) { | |||
if (this.chartTime === '日') { | |||
this.tempData = israDayStatistic | |||
this.tempData = this.israDayStatistic | |||
this.updateChart() | |||
} | |||
} | |||
@@ -42,7 +45,7 @@ export default { | |||
israWeekStatistic: { | |||
handler(newVal, oldVal) { | |||
if (this.chartTime === '周') { | |||
this.tempData = israWeekStatistic | |||
this.tempData = this.israWeekStatistic | |||
this.updateChart() | |||
} | |||
} | |||
@@ -50,7 +53,7 @@ export default { | |||
israMonthStatistic: { | |||
handler(newVal, oldVal) { | |||
if (this.chartTime === '月') { | |||
this.tempData = israMonthStatistic | |||
this.tempData = this.israMonthStatistic | |||
this.updateChart() | |||
} | |||
} | |||
@@ -58,7 +61,7 @@ export default { | |||
israYearStatistic: { | |||
handler(newVal, oldVal) { | |||
if (this.chartTime === '年') { | |||
this.tempData = israYearStatistic | |||
this.tempData = this.israYearStatistic | |||
this.updateChart() | |||
} | |||
} | |||
@@ -80,56 +83,34 @@ export default { | |||
this.chart.dispose() | |||
} | |||
this.chart = echarts.init(this.$el); | |||
let legendData = [] | |||
let xData = [] | |||
let yData = [] | |||
let seriesData = [] | |||
for (let i = 0;i < this.israCheckType.length; i++) { | |||
let obj = {} | |||
obj.type = 'bar' | |||
obj.stack = 'all' | |||
obj.emphasis = { | |||
focus:"series" | |||
} | |||
obj.name = this.israCheckType[i] | |||
obj.barWidth = 12 | |||
obj.data = [] | |||
for (let j = 0;j < this.tempData.length; j++) { | |||
for (let k = 0; k < this.tempData[j].data.length; k++) { | |||
if (this.israCheckType[i] === this.tempData[j].data[k].checkType) { | |||
obj.data.push(this.tempData[j].data[k].checkNum) | |||
} | |||
} | |||
} | |||
seriesData.push(obj) | |||
} | |||
this.tempData && this.tempData.length > 0 && this.tempData.map(item => { | |||
xData.push(item.name) | |||
}) | |||
var series = [ | |||
{ | |||
data: [120, 200, 150, 80, 70, 110, 130], | |||
type: 'bar', | |||
stack: 'all', | |||
name: 'a', | |||
barWidth: 12, | |||
}, | |||
{ | |||
data: [10, 46, 64, '-', 0, '-', 0], | |||
type: 'bar', | |||
stack: 'all', | |||
name: 'b', | |||
barWidth: 12, | |||
}, | |||
{ | |||
data: [30, '-', 0, 20, 10, '-', 0], | |||
type: 'bar', | |||
stack: 'all', | |||
barWidth: 12, | |||
name: 'c' | |||
}, | |||
{ | |||
data: [30, '-', 0, 20, 10, '-', 0], | |||
type: 'bar', | |||
stack: 'all', | |||
barWidth: 12, | |||
name: 'd' | |||
}, | |||
{ | |||
data: [10, 20, 150, 0, '-', 50, 10], | |||
type: 'bar', | |||
stack: 'all', | |||
name: 'e', | |||
barWidth: 12, | |||
label: { | |||
show: true, | |||
position: 'top' | |||
} | |||
} | |||
]; | |||
var option = { | |||
color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'], | |||
grid: { top: 40, right: 12, bottom: 20, left: 48 }, | |||
color: ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160", "#FF8A40"], | |||
grid: { top: 80, right: 12, bottom: 20, left: 48 }, | |||
legend: { | |||
top: 10, | |||
left: 80, | |||
@@ -142,7 +123,7 @@ export default { | |||
color: "#DFF1FE", | |||
fontSize: 12, | |||
}, | |||
data:['a','b','c','d','e'], | |||
data:this.israCheckType, | |||
}, | |||
xAxis: { | |||
type: "category", | |||
@@ -191,7 +172,7 @@ export default { | |||
}, | |||
className: "defect-chart-tooltip" | |||
}, | |||
series: series | |||
series: seriesData | |||
}; | |||
option && this.chart.setOption(option) | |||
} | |||
@@ -119,19 +119,19 @@ export default { | |||
} | |||
switch (this.chartType) { | |||
case '氧气含量':{ | |||
temp2 = temp1.O2_float || [] | |||
temp2 = temp1?.O2_float || [] | |||
break; | |||
} | |||
case '二氧化硫':{ | |||
temp2 = temp1.SO2_float || [] | |||
temp2 = temp1?.SO2_float || [] | |||
break; | |||
} | |||
case '一氧化氮':{ | |||
temp2 = temp1.NOX_float || [] | |||
temp2 = temp1?.NOX_float || [] | |||
break; | |||
} | |||
case '颗粒物':{ | |||
temp2 = temp1.dust_float || [] | |||
temp2 = temp1?.dust_float || [] | |||
break; | |||
} | |||
default: | |||
@@ -221,6 +221,7 @@ export default { | |||
series: seriesData, | |||
tooltip: { | |||
trigger: 'axis', | |||
className: "gas-tooltip" | |||
}, | |||
} | |||
option && this.chart.setOption(option) | |||
@@ -269,3 +270,13 @@ export default { | |||
height: 100%; | |||
} | |||
</style> | |||
<style> | |||
.gas-tooltip { | |||
background: #0a2b4f77 !important; | |||
border: none !important; | |||
backdrop-filter: blur(12px); | |||
} | |||
.gas-tooltip * { | |||
color: #fff !important; | |||
} | |||
</style> |
@@ -1,6 +1,6 @@ | |||
<template> | |||
<div class="scroll-board-container"> | |||
<dv-scroll-board :config="config" :style="{'width':width,'height':height}" /> | |||
<dv-scroll-board :config="config" :style="{'width':width,'height':height}" :ref='id'/> | |||
</div> | |||
</template> | |||
<script> | |||
@@ -18,6 +18,10 @@ export default { | |||
height:{ | |||
type: String, | |||
default: '380px' | |||
}, | |||
id:{ | |||
type: String, | |||
default: '' | |||
} | |||
}, | |||
data() { | |||
@@ -25,14 +29,4 @@ export default { | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang='scss'> | |||
.scroll-board-container { | |||
.dv-scroll-board .rows .ceil, .dv-scroll-board .header .header-item { | |||
border-right: 1px solid rgba(13, 23, 40, 1); | |||
} | |||
.dv-scroll-board .rows .ceil:last-child, .dv-scroll-board .header .header-item:last-child { | |||
border-right: none; | |||
} | |||
} | |||
</style> | |||
</script> |
@@ -7,7 +7,7 @@ | |||
<template> | |||
<div class="switcher" style="display: flex; align-items: center; gap: 12px"> | |||
<el-switch v-model="value"></el-switch> | |||
<el-switch v-model="value" @change="handleClick"></el-switch> | |||
<span style="color: #fff; font-size: 16px">{{ mode }}</span> | |||
; | |||
</div> | |||
@@ -17,18 +17,31 @@ | |||
export default { | |||
name: 'Switcher', | |||
components: {}, | |||
props: {}, | |||
props: { | |||
showTitle:{ | |||
type: Array, | |||
required: true, | |||
default: () => { | |||
return [] | |||
} | |||
} | |||
}, | |||
data() { | |||
return { | |||
value: true, | |||
value: false, | |||
}; | |||
}, | |||
computed: { | |||
mode() { | |||
return this.value ? '历史详情' : '实时数据'; | |||
return this.value ? this.showTitle[0]: this.showTitle[1]; | |||
}, | |||
}, | |||
methods: {}, | |||
methods: { | |||
handleClick(v) { | |||
this.value = v; | |||
this.$emit('emitFun', v); | |||
} | |||
}, | |||
}; | |||
</script> | |||
@@ -0,0 +1,317 @@ | |||
<template> | |||
<div class="yield-rate-chart"></div> | |||
</template> | |||
<script> | |||
import * as echarts from 'echarts'; | |||
import resize from './../mixins/resize' | |||
import { formatDate } from '@/utils' | |||
export default { | |||
name: 'GasChart', | |||
mixins: [resize], | |||
components: {}, | |||
props: { | |||
chartType: '', // 能源类型 | |||
chartTime: '' | |||
}, | |||
data() { | |||
return { | |||
chart: null | |||
}; | |||
}, | |||
computed: { | |||
cutChartDay() { | |||
return this.$store.state.websocket.cutChartDay | |||
}, | |||
cutChartWeek() { | |||
return this.$store.state.websocket.cutChartWeek | |||
}, | |||
cutChartMonth() { | |||
return this.$store.state.websocket.cutChartMonth | |||
}, | |||
cutChartYear() { | |||
return this.$store.state.websocket.cutChartYear | |||
} | |||
}, | |||
watch: { | |||
cutChartDay: { | |||
handler(newVal, oldVal) { | |||
if (this.chartTime === '日') { | |||
this.updateChart() | |||
} | |||
} | |||
}, | |||
cutChartWeek: { | |||
handler(newVal, oldVal) { | |||
if (this.chartTime === '周') { | |||
this.updateChart() | |||
} | |||
} | |||
}, | |||
cutChartMonth: { | |||
handler(newVal, oldVal) { | |||
if (this.chartTime === '月') { | |||
this.updateChart() | |||
} | |||
} | |||
}, | |||
cutChartYear: { | |||
handler(newVal, oldVal) { | |||
if (this.chartTime === '年') { | |||
this.updateChart() | |||
} | |||
} | |||
}, | |||
chartTime: { | |||
handler(newVal, oldVal) { | |||
console.log("===================") | |||
console.log(newVal) | |||
this.updateChart() | |||
} | |||
}, | |||
chartType: { | |||
handler(newVal, oldVal) { | |||
this.updateChart() | |||
} | |||
} | |||
}, | |||
mounted() { | |||
this.$el.addEventListener('resize', () => { | |||
console.log('resziing.....'); | |||
}); | |||
this.updateChart() | |||
}, | |||
methods: { | |||
updateChart() { | |||
let chartData = [] | |||
let xData = [] | |||
let dayArr = [] | |||
let nightArr = [] | |||
let sumArr = [] | |||
let seriesData = [] | |||
switch(this.chartTime) { | |||
case '日': | |||
chartData = this.cutChartDay | |||
break; | |||
case '周': | |||
chartData = this.cutChartWeek | |||
break; | |||
case '月': | |||
chartData = this.cutChartMonth | |||
break; | |||
case '年': | |||
chartData = this.cutChartYear | |||
break; | |||
default: | |||
} | |||
chartData && chartData.length > 0 && chartData.map(item => { | |||
if (this.chartTime === '日') { | |||
xData.push((item.dataTime).slice(11)) | |||
}else{ | |||
xData.push((item.dataTime).slice(0,10)) | |||
} | |||
dayArr.push((item.day * 100).toFixed(2)) | |||
nightArr.push((item.night * 100).toFixed(2)) | |||
sumArr.push((item.sum * 100).toFixed(2)) | |||
}) | |||
if (this.chartType) { | |||
seriesData = [{ | |||
color: '#ff9e00', | |||
name: 'sum', | |||
data: sumArr, | |||
type: "line", | |||
areaStyle: { | |||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
{ offset: 0, color: '#FFCB5940' }, | |||
{ offset: 0.5, color: '#FFCB5920' }, | |||
{ offset: 1, color: '#FFCB5900' }, | |||
]), | |||
}, | |||
lineStyle: { | |||
width: 1 | |||
}, | |||
symbolSize: 1, | |||
emphasis: { | |||
focus: 'series' | |||
} | |||
}, | |||
{ | |||
color: '#08d8cd', | |||
name: 'day', | |||
data: dayArr, | |||
type: "line", | |||
areaStyle: { | |||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
{ offset: 0, color: "#12FFF540" }, | |||
{ offset: 0.5, color: "#12FFF520" }, | |||
{ offset: 1, color: "#12FFF510" }, | |||
]), | |||
}, | |||
lineStyle: { | |||
width: 1 | |||
}, | |||
symbolSize: 1, | |||
emphasis: { | |||
focus: 'series' | |||
} | |||
}, | |||
{ | |||
color: '#0b58ff', | |||
name: 'night', | |||
data: nightArr, | |||
type: "line", | |||
areaStyle: { | |||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
{ offset: 0, color: "#2760FF40" }, | |||
{ offset: 0.5, color: "#2760FF20" }, | |||
{ offset: 1, color: "#2760FF10" }, | |||
]), | |||
}, | |||
lineStyle: { | |||
width: 1 | |||
}, | |||
symbolSize: 1, | |||
emphasis: { | |||
focus: 'series' | |||
} | |||
}] | |||
}else{ | |||
seriesData = [{ | |||
color: '#ff9e00', | |||
name: 'sum', | |||
data: sumArr, | |||
type: "line", | |||
areaStyle: { | |||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
{ offset: 0, color: '#FFCB5940' }, | |||
{ offset: 0.5, color: '#FFCB5920' }, | |||
{ offset: 1, color: '#FFCB5900' }, | |||
]), | |||
}, | |||
lineStyle: { | |||
width: 1 | |||
}, | |||
symbolSize: 1, | |||
emphasis: { | |||
focus: 'series' | |||
} | |||
}] | |||
} | |||
// 绘图 | |||
if ( | |||
this.chart !== null && | |||
this.chart !== '' && | |||
this.chart !== undefined | |||
) { | |||
this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例 | |||
} | |||
this.chart = echarts.init(this.$el); | |||
var option = { | |||
grid: { top: 15, right: 12, bottom: 45, left: 60 }, | |||
xAxis: { | |||
type: 'category', | |||
data: xData, | |||
axisLabel: { | |||
color: "#fff", | |||
fontSize: 10, | |||
rotate: 25, | |||
margin: 13, | |||
}, | |||
axisTick: { show: false }, | |||
axisLine: { | |||
lineStyle: { | |||
width: 1, | |||
color: '#213259', | |||
}, | |||
}, | |||
}, | |||
yAxis: { | |||
nameTextStyle: { | |||
color: '#fff', | |||
fontSize: 10, | |||
align: 'right', | |||
}, | |||
type: 'value', | |||
axisLabel: { | |||
color: "#fff", | |||
fontSize: 12, | |||
formatter: "{value} %", | |||
}, | |||
axisLine: { | |||
show: true, | |||
lineStyle: { | |||
color: '#213259', | |||
}, | |||
}, | |||
splitLine: { | |||
lineStyle: { | |||
color: '#213259a0', | |||
}, | |||
}, | |||
interval: 10, | |||
min: 0, | |||
max: 100, | |||
}, | |||
series: seriesData, | |||
tooltip: { | |||
trigger: 'axis', | |||
className: "yield-rate-tooltip" | |||
}, | |||
} | |||
option && this.chart.setOption(option) | |||
}, | |||
getXdata() { | |||
const today = new Date(); | |||
const currentYear = today.getFullYear(); | |||
const currentMonth = today.getMonth() + 1; | |||
let days = 30; | |||
if (this.chartTime === '周') { | |||
return Array(7) | |||
.fill(1) | |||
.map((_, index) => { | |||
const today = new Date(); | |||
const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000; | |||
return `${new Date(dtimestamp).getMonth() + 1}.${new Date( | |||
dtimestamp | |||
).getDate()}`;}).reverse() | |||
}else if (this.chartTime == "月") { | |||
if (currentMonth in [1, 3, 5, 7, 8, 10, 12]) { | |||
days = 31; | |||
} else if (currentMonth == 2) { | |||
days = this.isLeapYear(currentYear) ? 29 : 28; | |||
} | |||
return Array(days) | |||
.fill(1) | |||
.map((_, index) => { | |||
return `${currentMonth}.${days - index}`;}).reverse() | |||
} else { | |||
return Array(12) | |||
.fill(1) | |||
.map((_, index) => { | |||
return `${currentYear}.${12 - index}`;}).reverse() | |||
} | |||
}, | |||
isLeapYear(year) { | |||
return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0); | |||
} | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.yield-rate-chart { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
</style> | |||
<style> | |||
.yield-rate-tooltip { | |||
background: #0a2b4f77 !important; | |||
border: none !important; | |||
backdrop-filter: blur(12px); | |||
} | |||
.yield-rate-tooltip * { | |||
color: #fff !important; | |||
} | |||
</style> |
@@ -2,17 +2,21 @@ | |||
<div style="flex: 1;"> | |||
<Container name="各工序缺陷汇总" size="small" style=""> | |||
<div style="padding: 5px 10px;"> | |||
<ScrollBoard :config = "config" width='575px' height='380px'/> | |||
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='defectScrollBoard'/> | |||
</div> | |||
</Container> | |||
</div> | |||
</template> | |||
<script> | |||
import Container from '../components/Container.vue'; | |||
import ScrollBoard from '../components/ScrollBoard' | |||
export default { | |||
name: 'DefectSum', | |||
components: { Container, ScrollBoard }, | |||
components: { Container }, | |||
computed: { | |||
defectSum() { | |||
return this.$store.state.websocket.defectSum | |||
} | |||
}, | |||
data() { | |||
return { | |||
config: { | |||
@@ -23,21 +27,25 @@ export default { | |||
evenRowBGC: 'rgba(14, 32, 62, 0.8)', | |||
columnWidth: [60], | |||
align: ['center'], | |||
data: [ | |||
[1, '产线1', '行1列3', '', ''], | |||
[2, '产线2', '行2列3', '', ''], | |||
[3, '产线3', '行3列3', '', ''], | |||
[4, '产线4', '行4列3', '', ''], | |||
[5, '产线5', '行5列3', '', ''], | |||
[6, '产线6', '行6列3', '', ''], | |||
[7, '产线7', '行7列3', '', ''], | |||
[8, '产线8', '行8列3', '', ''], | |||
[9, '产线9', '行9列3', '', ''], | |||
[10, '产线10', '行10列3', '', ''] | |||
], | |||
data: [], | |||
rowNum: 10 | |||
} | |||
} | |||
}, | |||
watch:{ | |||
defectSum: { | |||
handler(newVal, oldVal) { | |||
let outArr = this.defectSum.map((item, index) => [ | |||
index+1, | |||
item.productionLineName, | |||
item.sectionName, | |||
item.count, | |||
item.inspectionTypeName | |||
]); | |||
this.config.data = outArr | |||
this.$refs['defectScrollBoard'].updateRows(outArr) | |||
} | |||
} | |||
} | |||
} | |||
</script> |
@@ -2,19 +2,24 @@ | |||
<div style="flex: 1;"> | |||
<Container name="设备报警" size="small" style=""> | |||
<div style="padding: 5px 10px;"> | |||
<ScrollBoard :config = "config" width='575px' height='380px'/> | |||
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='eqScrollBoard'/> | |||
</div> | |||
</Container> | |||
</div> | |||
</template> | |||
<script> | |||
import Container from '../components/Container.vue'; | |||
import ScrollBoard from '../components/ScrollBoard' | |||
export default { | |||
name: 'EqAlarm', | |||
components: { Container, ScrollBoard }, | |||
components: { Container }, | |||
computed: { | |||
sjgEquipment() { | |||
return this.$store.state.websocket.sjgEquipment | |||
} | |||
}, | |||
data() { | |||
return { | |||
// config:{} | |||
config: { | |||
header: ['序号', '设备名称', '设备编码','设备状态','是否故障'], | |||
// headerHeight: '17', | |||
@@ -38,6 +43,23 @@ export default { | |||
rowNum: 10 | |||
} | |||
} | |||
}, | |||
mounted(){ | |||
}, | |||
watch:{ | |||
sjgEquipment: { | |||
handler(newVal, oldVal) { | |||
let outArr = this.sjgEquipment.map((item, index) => [ | |||
index+1, | |||
item.name, | |||
item.code, | |||
item.status, | |||
item.error? '是': '否' | |||
]); | |||
this.config.data = outArr | |||
this.$refs['eqScrollBoard'].updateRows(outArr) | |||
} | |||
} | |||
} | |||
} | |||
</script> |
@@ -2,17 +2,21 @@ | |||
<div style="flex: 1;"> | |||
<Container name="工单监控" size="small" style=""> | |||
<div style="padding: 5px 10px;"> | |||
<ScrollBoard :config = "config" width='575px' height='380px'/> | |||
<dv-scroll-board :config="config" style="width:575px;height:380px" ref='worderScrollBoard'/> | |||
</div> | |||
</Container> | |||
</div> | |||
</template> | |||
<script> | |||
import Container from '../components/Container.vue'; | |||
import ScrollBoard from '../components/ScrollBoard' | |||
export default { | |||
name: 'WorkOrderMonitoring', | |||
components: { Container, ScrollBoard }, | |||
components: { Container }, | |||
computed: { | |||
order() { | |||
return this.$store.state.websocket.workOrder | |||
} | |||
}, | |||
data() { | |||
return { | |||
config: { | |||
@@ -21,23 +25,41 @@ export default { | |||
headerBGC: 'rgba(32, 55, 96, 0.8)', | |||
oddRowBGC: 'rgba(32, 55, 96, 0.8)', | |||
evenRowBGC: 'rgba(14, 32, 62, 0.8)', | |||
columnWidth: [60], | |||
columnWidth: [60, 120, 80, 60, 80, 120, 120, 120], | |||
align: ['center'], | |||
data: [ | |||
[1, '设备1', '行1列3', '', '','','',''], | |||
[2, '设备2', '行2列3', '', '','','',''], | |||
[3, '设备3', '行3列3', '', '','','',''], | |||
[4, '设备4', '行4列3', '', '','','',''], | |||
[5, '设备5', '行5列3', '', '','','',''], | |||
[6, '设备6', '行6列3', '', '','','',''], | |||
[7, '设备7', '行7列3', '', '','','',''], | |||
[8, '设备8', '行8列3', '', '','','',''], | |||
[9, '设备9', '行9列3', '', '','','',''], | |||
[10, '设备10', '行10列3', '', '','','',''] | |||
[1, '工单1', '行1列3', '', '','','',''], | |||
[2, '工单2', '行2列3', '', '','','',''], | |||
[3, '工单3', '行3列3', '', '','','',''], | |||
[4, '工单4', '行4列3', '', '','','',''], | |||
[5, '工单5', '行5列3', '', '','','',''], | |||
[6, '工单6', '行6列3', '', '','','',''], | |||
[7, '工单7', '行7列3', '', '','','',''], | |||
[8, '工单8', '行8列3', '', '','','',''], | |||
[9, '工单9', '行9列3', '', '','','',''], | |||
[10, '工单10', '行10列3', '', '','','',''] | |||
], | |||
rowNum: 10 | |||
} | |||
} | |||
}, | |||
watch:{ | |||
order: { | |||
handler(newVal, oldVal) { | |||
let outArr = this.order.map((item, index) => [ | |||
index+1, | |||
item.name, | |||
item.specifications, | |||
item.lines, | |||
item.status, | |||
item.planFinishTime, | |||
item.planQuantity, | |||
item.planAssignQuantity | |||
]); | |||
this.config.data = outArr | |||
this.$refs['worderScrollBoard'].updateRows(outArr) | |||
} | |||
} | |||
} | |||
} | |||
</script> |
@@ -45,7 +45,7 @@ | |||
import Container from '../components/Container'; | |||
import ShadowRect from '../components/ShadowRect.vue'; | |||
import SplitLine from '../components/line'; | |||
import Switcher from '../components/Switcher'; | |||
// import Switcher from '../components/Switcher'; | |||
import EnergeTop from './EnergeTop'; | |||
import GasChart from '../components/GasChart.vue'; | |||
import SelectorBtnGroup from '../components/SelectorBtnGroup'; | |||
@@ -55,7 +55,6 @@ export default { | |||
Container, | |||
ShadowRect, | |||
SplitLine, | |||
Switcher, | |||
EnergeTop, | |||
GasChart, | |||
SelectorBtnGroup, | |||
@@ -42,10 +42,10 @@ | |||
<script> | |||
import Container from '../components/Container.vue'; | |||
import ShadowRect from '../components/ShadowRect.vue'; | |||
import Switcher from '../components/Switcher'; | |||
// import Switcher from '../components/Switcher'; | |||
export default { | |||
name: 'FanSequence', | |||
components: { Container, ShadowRect, Switcher }, | |||
components: { Container, ShadowRect }, | |||
computed: { | |||
fanFrequencyInfo() { | |||
return this.$store.state.websocket.fanFrequencyInfo | |||
@@ -23,7 +23,7 @@ | |||
"> | |||
氧气含量 | |||
</span> | |||
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.O2_float ? (exhaustGasInfo?.O2_float).toFixed(2): ''}}%</span> | |||
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.O2_float ? (Number(exhaustGasInfo.O2_float)).toFixed(2) : ''}}%</span> | |||
</ShadowRect> | |||
<ShadowRect> | |||
<div | |||
@@ -38,7 +38,7 @@ | |||
<p style="margin: 0; line-height: inherit">一氧化氮</p> | |||
<p style="margin: 0; line-height: inherit">排放浓度</p> | |||
</div> | |||
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.NOX_float ? (exhaustGasInfo?.NOX_float).toFixed(2):''}}mg/m³</span> | |||
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.NOX_float ? (Number(exhaustGasInfo.NOX_float)).toFixed(2) : ''}}mg/m³</span> | |||
</ShadowRect> | |||
<ShadowRect> | |||
@@ -54,7 +54,7 @@ | |||
<p style="margin: 0; line-height: inherit">二氧化硫</p> | |||
<p style="margin: 0; line-height: inherit">排放浓度</p> | |||
</div> | |||
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.SO2_float ? (exhaustGasInfo?.SO2_float).toFixed(2): ''}}mg/m³</span> | |||
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.SO2_float ? (Number(exhaustGasInfo.SO2_float)).toFixed(2) : ''}}mg/m³</span> | |||
</ShadowRect> | |||
<ShadowRect> | |||
@@ -69,7 +69,7 @@ | |||
"> | |||
颗粒物浓度 | |||
</span> | |||
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.dust_float ? (exhaustGasInfo?.dust_float).toFixed(2) : ''}}mg/m³</span> | |||
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.dust_float ? (Number(exhaustGasInfo.dust_float)).toFixed(2) : ''}}mg/m³</span> | |||
</ShadowRect> | |||
</div> | |||
<KilnLine :horizontal="true" /> | |||
@@ -110,7 +110,7 @@ | |||
import Container from '../components/Container'; | |||
import ShadowRect from '../components/ShadowRect.vue'; | |||
import KilnLine from '../components/line'; | |||
import Switcher from '../components/Switcher'; | |||
// import Switcher from '../components/Switcher'; | |||
import SelectorBtnGroup from '../components/SelectorBtnGroup'; | |||
import FlueGas from '../components/FlueGas'; | |||
@@ -120,7 +120,6 @@ export default { | |||
Container, | |||
ShadowRect, | |||
KilnLine, | |||
Switcher, | |||
SelectorBtnGroup, | |||
FlueGas, | |||
}, | |||
@@ -22,13 +22,12 @@ | |||
import Container from '../components/Container'; | |||
import ShadowRect from '../components/ShadowRect.vue'; | |||
import KilnLine from '../components/line'; | |||
import Switcher from '../components/Switcher'; | |||
import SelectorBtnGroup from '../components/SelectorBtnGroup'; | |||
import KilnInfo from './KilnInfo.vue'; | |||
import GasHandle from './GasHandle.vue'; | |||
export default { | |||
name: 'RightTwo', | |||
components: { Container, Switcher, SelectorBtnGroup, KilnLine, ShadowRect, KilnInfo, GasHandle }, | |||
components: { Container, SelectorBtnGroup, KilnLine, ShadowRect, KilnInfo, GasHandle }, | |||
props: {}, | |||
data() { | |||
return {}; | |||
@@ -2,17 +2,21 @@ | |||
<div style="flex: 1;"> | |||
<Container name="订单完成情况" size="small" style=""> | |||
<div style="padding: 5px 10px;"> | |||
<ScrollBoard :config = "config" width='575px' height='230px'/> | |||
<dv-scroll-board :config="config" style="width:575px;height:230px" ref='orderScrollBoard'/> | |||
</div> | |||
</Container> | |||
</div> | |||
</template> | |||
<script> | |||
import Container from '../components/Container' | |||
import ScrollBoard from '../components/ScrollBoard' | |||
export default { | |||
name: 'OrderStatus', | |||
components: { Container, ScrollBoard }, | |||
components: { Container }, | |||
computed: { | |||
order() { | |||
return this.$store.state.websocket.order | |||
} | |||
}, | |||
data() { | |||
return { | |||
config: { | |||
@@ -38,6 +42,20 @@ export default { | |||
rowNum: 6 | |||
} | |||
} | |||
}, | |||
watch:{ | |||
order: { | |||
handler(newVal, oldVal) { | |||
let outArr = this.order.map((item) => [ | |||
item.startProduceTime, | |||
item.name, | |||
item.specifications, | |||
item.completeRate | |||
]); | |||
this.config.data = outArr | |||
this.$refs['orderScrollBoard'].updateRows(outArr) | |||
} | |||
} | |||
} | |||
} | |||
</script> |
@@ -1,20 +1,53 @@ | |||
<template> | |||
<div style="flex: 2;" class="aaa"> | |||
<Container name="本日生产良品率" size="small" style=""> | |||
<ScrollBoard :config = "config" width='575px' height='300px'/> | |||
<div style="flex: 2;"> | |||
<Container name="本日生产良品率" size="small"> | |||
<div style="padding: 5px 10px;"> | |||
<dv-scroll-board :config="config" style="width:575px;height:230px" ref='yieldRateScrollBoard'/> | |||
</div> | |||
<KilnLine :horizontal="true" /> | |||
<div class="" style="flex: 2; padding: 8px"> | |||
<div | |||
class="header-line" | |||
style="margin: 8px 0 16px; display: flex; align-items: center"> | |||
<h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 5px"> | |||
生产良品率 | |||
</h2> | |||
<Switcher :showTitle='["班次详情","班次详情"]' @emitFun='changeType'/> | |||
<div style="width: 169px;"> | |||
<span class="lgd lgd-total">总量</span> | |||
<span class="lgd lgd-day" v-show='chartType'>白班</span> | |||
<span class="lgd lgd-night" v-show='chartType'>夜班</span> | |||
</div> | |||
<div> | |||
<SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/> | |||
</div> | |||
</div> | |||
<div class="chart" style="height: 230px;"> | |||
<YieldRateChart :chartTime='chartTime' :chartType='chartType'/> | |||
</div> | |||
</div> | |||
</Container> | |||
</div> | |||
</template> | |||
<script> | |||
import Container from '../components/Container'; | |||
import Container from '../components/Container' | |||
import ScrollBoard from '../components/ScrollBoard' | |||
import KilnLine from '../components/line' | |||
import Switcher from '../components/Switcher' | |||
import SelectorBtnGroup from '../components/SelectorBtnGroup'; | |||
import YieldRateChart from '../components/YieldRateChart' | |||
export default { | |||
name: 'YieldRate', | |||
components: { Container, ScrollBoard }, | |||
components: { Container, ScrollBoard, KilnLine, Switcher, SelectorBtnGroup, YieldRateChart }, | |||
computed: { | |||
yieldRateTable() { | |||
return this.$store.state.websocket.yieldRateTable | |||
} | |||
}, | |||
data() { | |||
return { | |||
config: { | |||
header: ['序号', '设备名称', '设备编码','设备状态','是否故障'], | |||
header: ['产线', '一等率', '二等率','成品率','废品率'], | |||
// headerHeight: '17', | |||
headerBGC: 'rgba(32, 55, 96, 0.8)', | |||
oddRowBGC: 'rgba(32, 55, 96, 0.8)', | |||
@@ -22,24 +55,71 @@ export default { | |||
columnWidth: [60], | |||
align: ['center'], | |||
data: [ | |||
[1, '设备1', '行1列3', '', ''], | |||
[2, '设备2', '行2列3', '', ''], | |||
[3, '设备3', '行3列3', '', ''], | |||
[4, '设备4', '行4列3', '', ''], | |||
[5, '设备5', '行5列3', '', ''], | |||
[6, '设备6', '行6列3', '', ''], | |||
[7, '设备7', '行7列3', '', ''], | |||
[8, '设备8', '行8列3', '', ''], | |||
[9, '设备9', '行9列3', '', ''], | |||
[10, '设备10', '行10列3', '', ''] | |||
[1, '产线1', '49%', '', ''], | |||
[2, '产线2', '49%', '', ''], | |||
[3, '产线3', '49%', '', ''], | |||
[4, '产线4', '49%', '', ''], | |||
[5, '产线5', '49%', '', ''] | |||
], | |||
rowNum: 10 | |||
} | |||
rowNum: 5 | |||
}, | |||
chartType:false, | |||
chartTime: "日" | |||
} | |||
}, | |||
watch:{ | |||
yieldRateTable: { | |||
handler(newVal, oldVal) { | |||
let outArr = this.yieldRateTable.map((item) => [ | |||
item.lineName, | |||
item.first, | |||
item.second, | |||
item.product, | |||
item.waste | |||
]); | |||
this.config.data = outArr | |||
this.$refs['yieldRateScrollBoard'].updateRows(outArr) | |||
} | |||
} | |||
}, | |||
methods: { | |||
changeType(val) { | |||
this.chartType = val | |||
}, | |||
// 切换时间 | |||
toggleDate(val) { | |||
this.chartTime = val | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang='scss'> | |||
<style lang='scss' scoped> | |||
.lgd { | |||
color: #fff; | |||
&:not(:last-child) { | |||
margin-right: 12px; | |||
} | |||
} | |||
.lgd::before { | |||
content: ''; | |||
display: inline-block; | |||
width: 8px; | |||
height: 8px; | |||
margin-right: 4px; | |||
border-radius: 2px; | |||
} | |||
.lgd.lgd-total::before { | |||
background-color: #ff9e00; | |||
} | |||
.lgd.lgd-day::before { | |||
background-color: #08d8cd; | |||
} | |||
.lgd.lgd-night::before { | |||
background-color: #0b58ff; | |||
} | |||
</style> |
@@ -6,7 +6,7 @@ import store from "@/store"; | |||
const timestr = new Date().getTime() | |||
const dcsConn = new WsConnect( | |||
// websocket地址 | |||
'ws://10.70.180.10:8081/xc-screen/websocket/dcsmsg'+timestr, | |||
process.env.VUE_APP_Socket_Dcs_API + '/xc-screen/websocket/dcsmsg'+timestr, | |||
// 传递给后台的数据 | |||
'', | |||
(data) => { | |||
@@ -39,7 +39,7 @@ const dcsConn = new WsConnect( | |||
) | |||
// ISRA | |||
const mesIsra = new WsConnect( | |||
'ws://10.70.2.2:8080/websocket/message?userId=KILN'+timestr, | |||
process.env.VUE_APP_Socket_API + '/websocket/message?userId=KILN'+timestr, | |||
'', | |||
(data) => { | |||
// console.log('mes ISRA成功的回调函数, 接收到的data数据: ', data) | |||
@@ -51,10 +51,6 @@ const mesIsra = new WsConnect( | |||
store.dispatch({type: "websocket/setIsraKiln", payload:msgData.detData.dayStatistic}) | |||
break; | |||
} | |||
// case "KilnInfo": { | |||
// // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo}) | |||
// break; | |||
// } | |||
default: | |||
} | |||
}, | |||
@@ -65,7 +61,7 @@ const mesIsra = new WsConnect( | |||
// 原料 MA | |||
const mesMA = new WsConnect( | |||
'ws://10.70.2.2:8080/websocket/message?userId=MA'+timestr, | |||
process.env.VUE_APP_Socket_API + '/websocket/message?userId=MA'+timestr, | |||
'', | |||
(data) => { | |||
// console.log('mes 原料成功的回调函数, 接收到的data数据: ', data) | |||
@@ -76,10 +72,6 @@ const mesMA = new WsConnect( | |||
store.dispatch({type: "websocket/setMaterial", payload:msgData.data}) | |||
break; | |||
} | |||
// case "KilnInfo": { | |||
// // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo}) | |||
// break; | |||
// } | |||
default: | |||
} | |||
}, | |||
@@ -90,7 +82,7 @@ const mesMA = new WsConnect( | |||
// 能耗 EN | |||
const mesEN = new WsConnect( | |||
// websocket地址 | |||
'ws://10.70.2.2:8080/websocket/message?userId=ENERGY'+timestr, | |||
process.env.VUE_APP_Socket_API + '/websocket/message?userId=ENERGY'+timestr, | |||
// 传递给后台的数据 | |||
'', | |||
// 成功拿到后台返回的数据的回调函数 | |||
@@ -122,7 +114,7 @@ const mesEN = new WsConnect( | |||
// 烟气 GAS | |||
const mesGAS = new WsConnect( | |||
// websocket地址 | |||
'ws://10.70.2.2:8080/websocket/message?userId=GAS'+timestr, | |||
process.env.VUE_APP_Socket_API + '/websocket/message?userId=GAS'+timestr, | |||
// 传递给后台的数据 | |||
'', | |||
// 成功拿到后台返回的数据的回调函数 | |||
@@ -153,7 +145,7 @@ const mesGAS = new WsConnect( | |||
// 缺陷分类/统计 IS | |||
const mesIS = new WsConnect( | |||
// websocket地址 | |||
'ws://10.70.2.2:8080/websocket/message?userId=IS'+timestr, | |||
process.env.VUE_APP_Socket_API + '/websocket/message?userId=IS'+timestr, | |||
// 传递给后台的数据 | |||
'', | |||
// 成功拿到后台返回的数据的回调函数 | |||
@@ -164,6 +156,7 @@ const mesIS = new WsConnect( | |||
switch (msgData?.type) { | |||
case "isra": { | |||
store.dispatch({type: "websocket/setDefectChart", payload:{ | |||
checkType: msgData.detData.checkType, | |||
dayStatistic: msgData.detData.dayStatistic, | |||
weekStatistic: msgData.detData.weekStatistic, | |||
monthStatistic: msgData.detData.monthStatistic, | |||
@@ -183,9 +176,7 @@ const mesIS = new WsConnect( | |||
// 深加工生产运行驾驶舱(除能源) SJG | |||
const mesSJG = new WsConnect( | |||
// websocket地址 | |||
// 'ws://10.70.2.2:8080/websocket/message?userId=SJG'+timestr, | |||
// 'ws://192.168.0.33:48082/websocket/message?userId=SJG'+timestr, | |||
'ws://192.168.1.62:48082/websocket/message?userId=SJG'+timestr, | |||
process.env.VUE_APP_Socket_API + '/websocket/message?userId=SJG'+timestr, | |||
// 传递给后台的数据 | |||
'', | |||
// 成功拿到后台返回的数据的回调函数 | |||
@@ -202,6 +193,14 @@ const mesSJG = new WsConnect( | |||
store.dispatch({type: "websocket/setSJGEq", payload:msgData.detData}) | |||
break; | |||
} | |||
case "order": { | |||
store.dispatch({type: "websocket/setWorkOrder", payload:msgData.detData}) | |||
break; | |||
} | |||
case "defectSum": { | |||
store.dispatch({type: "websocket/setDefectSum", payload:msgData.detData}) | |||
break; | |||
} | |||
default: | |||
} | |||
}, | |||
@@ -211,6 +210,76 @@ const mesSJG = new WsConnect( | |||
} | |||
) | |||
// 订单完成情况 OV | |||
const mesOV = new WsConnect( | |||
// websocket地址 | |||
process.env.VUE_APP_Socket_API + '/websocket/message?userId=OV'+timestr, | |||
// 'ws://192.168.0.33:48082/websocket/message?userId=OV'+timestr, | |||
// 传递给后台的数据 | |||
'', | |||
// 成功拿到后台返回的数据的回调函数 | |||
(data) => { | |||
// console.log('mes 产线产量及良品率成功的回调函数, 接收到的data数据: ', data) | |||
let msgData = JSON.parse(data) | |||
if (msgData == null) return; | |||
switch (msgData?.type) { | |||
case "order": { | |||
store.dispatch({type: "websocket/setOrder", payload:msgData.detData}) | |||
break; | |||
} | |||
default: | |||
} | |||
}, | |||
// websocket连接失败的回调函数 | |||
(err) => { | |||
console.log('失败的回调函数', err) | |||
} | |||
) | |||
// 本日生产良品率 CUTTING | |||
const mesCUTTING = new WsConnect( | |||
// websocket地址 | |||
process.env.VUE_APP_Socket_API + '/websocket/message?userId=CUTTING'+timestr, | |||
// 传递给后台的数据 | |||
'', | |||
// 成功拿到后台返回的数据的回调函数 | |||
(data) => { | |||
// console.log('mes 产线产量及良品率成功的回调函数, 接收到的data数据: ', data) | |||
let msgData = JSON.parse(data) | |||
if (msgData == null) return; | |||
console.log(msgData) | |||
switch (msgData?.type) { | |||
case "cutting": { | |||
if (msgData?.name === 'table') { | |||
store.dispatch({type: "websocket/setYieldRateTable", payload:msgData.data}) | |||
return | |||
} | |||
if (msgData?.dateType === 'day') { | |||
store.dispatch({type: "websocket/setCutChartDay", payload:msgData.detData}) | |||
return | |||
} | |||
if (msgData?.dateType === 'weekly') { | |||
store.dispatch({type: "websocket/setCutChartWeek", payload:msgData.detData}) | |||
return | |||
} | |||
if (msgData?.dateType === 'month') { | |||
store.dispatch({type: "websocket/setCutChartMonth", payload:msgData.detData}) | |||
return | |||
} | |||
if (msgData?.dateType === 'year') { | |||
store.dispatch({type: "websocket/setCutChartYear", payload:msgData.detData}) | |||
return | |||
} | |||
break; | |||
} | |||
default: | |||
} | |||
}, | |||
// websocket连接失败的回调函数 | |||
(err) => { | |||
console.log('失败的回调函数', err) | |||
} | |||
) | |||
export const getDcsMsg = () => { | |||
dcsConn.createWebSoket() | |||
@@ -220,6 +289,8 @@ export const getDcsMsg = () => { | |||
mesGAS.createWebSoket() | |||
mesIS.createWebSoket() | |||
mesSJG.createWebSoket() | |||
mesOV.createWebSoket() | |||
mesCUTTING.createWebSoket() | |||
} | |||
export const closeDcsMsg = () => { | |||
dcsConn.closeWebsocket() | |||
@@ -229,4 +300,6 @@ export const closeDcsMsg = () => { | |||
mesGAS.closeWebsocket() | |||
mesIS.closeWebsocket() | |||
mesSJG.closeWebsocket() | |||
mesOV.closeWebsocket() | |||
mesCUTTING.closeWebsocket() | |||
} |