Merge pull request 'projects/mesxc-zjl' (#168) from projects/mesxc-zjl into projects/mesxc-test

Reviewed-on: #168
This commit is contained in:
朱菊兰 2024-01-04 16:41:50 +08:00
commit d21749c170
33 changed files with 1236 additions and 142 deletions

View File

@ -43,6 +43,7 @@
"dependencies": {
"@antv/x6": "^2.15.3",
"@babel/parser": "7.18.4",
"@jiaminghi/data-view": "^2.10.0",
"@riophae/vue-treeselect": "0.4.0",
"axios": "0.27.2",
"benz-amr-recorder": "^1.1.5",

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 37 KiB

View File

@ -88,7 +88,7 @@ export default {
visitedViews(newVal, oldVal){
let num = 0
newVal && newVal.map(item => {
if (item.path === '/databoard/kiln' || item.path === '/databoard/whole-plant') {
if (item.path === '/databoard/kiln' || item.path === '/databoard/whole-plant' || item.path === '/databoard/deep-processing') {
num++
}
})

View File

@ -9,6 +9,7 @@ import store from './store';
import router from './router';
import directive from './directive'; // directive
import plugins from './plugins'; // plugins
// import { borderBox1 } from '@jiaminghi/data-view'
import './assets/icons'; // icon
import './permission'; // permission control
@ -78,6 +79,7 @@ Vue.use(CodeBrickZj)
Vue.use(directive);
Vue.use(plugins);
Vue.use(VueMeta);
// Vue.use(dataV)
// Vue.use(hljs.vuePlugin);
// bpmnProcessDesigner 需要引入

View File

@ -4,7 +4,7 @@ const state = {
gasInfo:{},// 天然气流量图
sumGasInfo: {},// 天然气总量
israKiln:[],// ISRA缺陷检测
israKiln:[],// ISRA窑炉缺陷检测
material:[],// 原料
energyInfo: {
elecQty1: '',
@ -14,11 +14,17 @@ const state = {
energyWeekTrend:[],
energyMonthTrend:[],
energyYearTrend:[],// 能耗图
energyMonitoring: [], // 能源监控
exhaustGasInfo:{}, // 烟气
gasChartDayTrend:{}, // 烟气
gasChartWeekTrend:{}, // 烟气
gasChartMonthTrend:{}, // 烟气
gasChartYearTrend:{} // 烟气
gasChartYearTrend:{}, // 烟气
israDayStatistic: [],//缺陷统计
israWeekStatistic: [],//缺陷统计
israMonthStatistic: [],//缺陷统计
israYearStatistic: [],//缺陷统计
productline: [] // 产线产量及良品率
};
const mutations = {
SET_FANFREQUENCYINFO: (state, fanFrequencyInfo) => {
@ -60,6 +66,9 @@ const mutations = {
state.energyYearTrend = energyTrend.year
}
},
SET_ENERGY_MONITORING: (state, energyMonitoring) => {
state.energyMonitoring = energyMonitoring
},
SET_EXHAUSTGASINFO: (state, exhaustGasInfo) => {
state.exhaustGasInfo = exhaustGasInfo
},
@ -68,6 +77,15 @@ const mutations = {
state.gasChartWeekTrend = exhaustGasChart.gasChartWeekTrend
state.gasChartMonthTrend = exhaustGasChart.gasChartMonthTrend
state.gasChartYearTrend = exhaustGasChart.gasChartYearTrend
},
SET_DEFECTCHART: (state, israStatistic) => {
state.israDayStatistic = israStatistic.dayStatistic
state.israWeekStatistic = israStatistic.weekStatistic
state.israMonthStatistic = israStatistic.monthStatistic
state.israYearStatistic = israStatistic.yearStatistic
},
SET_PRODUCTLINE: (state, productline) => {
state.productline = productline
}
};
const actions = {
@ -97,12 +115,21 @@ const actions = {
setEnergyTrend({ commit }, energyTrend) {
commit('SET_ENERGYTREND', energyTrend.payload)
},
setEnergyMonitoring({ commit }, energyMonitoring) {
commit('SET_ENERGY_MONITORING', energyMonitoring.payload)
},
setExhaustGasInfo({ commit }, exhaustGasInfo) {
commit('SET_EXHAUSTGASINFO', exhaustGasInfo.payload)
},
setExhaustGasChart({ commit }, exhaustGasChart) {
commit('SET_EXHAUSTGASCHART', exhaustGasChart.payload)
},
setDefectChart({ commit }, israStatistic) {
commit('SET_DEFECTCHART', israStatistic.payload)
},
setProductline({ commit }, productline) {
commit('SET_PRODUCTLINE', productline.payload)
},
};
export default {
namespaced: true,

Binary file not shown.

After

Width:  |  Height:  |  Size: 558 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 615 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 789 B

View File

@ -55,6 +55,24 @@ export default {
return require('../assets/msg.png');
case '烟气处理':
return require('../assets/gas.png');
case '产线缺陷统计':
return require('../assets/defectStatistics.png');
case '产线当日缺陷分类':
return require('../assets/check.png');
case '本日生产良品率':
return require('../assets/goodRate.png');
case '订单完成情况':
return require('../assets/order.png');
case '设备报警':
return require('../assets/goodRate.png');
case '各工序缺陷汇总':
return require('../assets/check.png');
case '能源监控':
return require('../assets/defectStatistics.png');
case '产线产量及良品率':
return require('../assets/order.png');
case '工单监控':
return require('../assets/eqMonitor.png');
}
},
},

View File

@ -0,0 +1,216 @@
<template>
<div class="defect-chart"></div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
export default {
name: 'DefectChart',
mixins: [resize],
props: {
chartTime: ''
},
data() {
return {
chart: null,
tempData: []
}
},
computed: {
israDayStatistic() {
return this.$store.state.websocket.israDayStatistic
},
israWeekStatistic() {
return this.$store.state.websocket.israWeekStatistic
},
israMonthStatistic() {
return this.$store.state.websocket.israMonthStatistic
},
israYearStatistic() {
return this.$store.state.websocket.israYearStatistic
}
},
watch: {
israDayStatistic: {
handler(newVal, oldVal) {
if (this.chartTime === '日') {
this.tempData = israDayStatistic
this.updateChart()
}
}
},
israWeekStatistic: {
handler(newVal, oldVal) {
if (this.chartTime === '周') {
this.tempData = israWeekStatistic
this.updateChart()
}
}
},
israMonthStatistic: {
handler(newVal, oldVal) {
if (this.chartTime === '月') {
this.tempData = israMonthStatistic
this.updateChart()
}
}
},
israYearStatistic: {
handler(newVal, oldVal) {
if (this.chartTime === '年') {
this.tempData = israYearStatistic
this.updateChart()
}
}
}
},
mounted() {
this.$el.addEventListener('resize', () => {
console.log('resziing.....');
});
this.updateChart()
},
methods: {
updateChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
this.chart = echarts.init(this.$el);
let legendData = []
let xData = []
let yData = []
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 },
legend: {
top: 10,
left: 80,
padding: 5,
itemWidth: 12,
itemHeight: 12,
itemGap: 12,
height: 12,
textStyle: {
color: "#DFF1FE",
fontSize: 12,
},
data:['a','b','c','d','e'],
},
xAxis: {
type: "category",
data: xData,
axisLabel: {
color: "#fffc",
fontSize: 12,
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 1,
color: "#213259",
},
},
},
yAxis: {
name: "单位/个",
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",
},
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "defect-chart-tooltip"
},
series: series
};
option && this.chart.setOption(option)
}
}
}
</script>
<style scoped lang="scss">
.defect-chart {
width: 100%;
height: 100%;
}
</style>
<style>
.defect-chart-tooltip {
background: #0a2b4f77 !important;
border: none !important;
backdrop-filter: blur(12px);
}
.defect-chart-tooltip * {
color: #fff !important;
}
</style>

View File

@ -0,0 +1,170 @@
<template>
<div class="defect-class-chart"></div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
export default {
name: 'DefectClassChart',
mixins: [resize],
props: {
chartType: ''
},
data() {
return {
chart: null
}
},
computed: {
israDayStatistic() {
return this.$store.state.websocket.israDayStatistic
}
},
watch:{
israDayStatistic: {
handler(newVal, oldVal) {
if (newVal === oldVal) {
return false
}
this.updateChart()
}
},
chartType: {//
handler(newVal, oldVal) {
this.updateChart()
}
}
},
mounted() {
this.$el.addEventListener('resize', () => {
console.log('resziing.....');
});
this.updateChart()
},
methods: {
updateChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
this.chart = echarts.init(this.$el);
let tempData = []
let xData = []
let yData = []
this.israDayStatistic && this.israDayStatistic.length > 0 && this.israDayStatistic.map(item => {
if (this.chartType === item.name) {
tempData = item.data
return
}
})
tempData.length > 0 && tempData.map(item => {
xData.push(item.checkType)
yData.push(item.checkNum)
})
var option = {
color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'],
grid: { top: 40, right: 12, bottom: 80, left: 60 },
// legend: {
// top: 10,
// left: 80,
// padding: 5,
// itemWidth: 12,
// itemHeight: 12,
// itemGap: 12,
// height: 12,
// textStyle: {
// color: "#DFF1FE",
// fontSize: 12,
// },
// data:['a','b','c','d','e'],
// },
xAxis: {
type: "category",
data: xData,
axisLabel: {
color: "#fffc",
fontSize: 12,
rotate: 45
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 1,
color: "#213259",
},
},
},
yAxis: {
name: "单位/次",
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",
},
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "defect-chart-tooltip"
},
series: [
{
data: yData,
type: 'bar',
barWidth: 12,
label: {
show: true,
position: 'top'
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#5CB7FF' },
{ offset: 1, color: '#364BFE' }
])
},
}
]
};
option && this.chart.setOption(option)
}
}
}
</script>
<style scoped lang="scss">
.defect-class-chart {
width: 100%;
height: 100%;
}
</style>
<style>
.defect-chart-tooltip {
background: #0a2b4f77 !important;
border: none !important;
backdrop-filter: blur(12px);
}
.defect-chart-tooltip * {
color: #fff !important;
}
</style>

View File

@ -0,0 +1,157 @@
<template>
<div class="energe-monitoring-chart"></div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
export default {
name: 'EnergeMonitoringChart',
mixins: [resize],
data() {
return {
chart: null
}
},
computed: {
energyMonitoring() {
return this.$store.state.websocket.energyMonitoring
}
},
watch:{
energyMonitoring: {
handler(newVal, oldVal) {
if (newVal === oldVal) {
return false
}
this.updateChart()
}
}
},
mounted() {
this.$el.addEventListener('resize', () => {
console.log('resziing.....');
});
this.updateChart()
},
methods: {
updateChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
this.chart = echarts.init(this.$el);
let xData = []
let yData = []
this.energyMonitoring && this.energyMonitoring.length > 0 && this.energyMonitoring.map(item => {
xData.push(item.lineName)
yData.push(item.useQuantity)
})
var option = option = {
// color: ['#FF8A40','#FFD160','#99D66C','#5B9BFF','#8167F6','#2760FF'],
grid: { top: 32, right: 12, bottom: 20, left: 60 },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
},
className: "energe-monitoring-chart-tooltip"
},
legend: {
data: ['电耗能'],
textStyle: {
color: "#DFF1FE",
fontSize: 12,
}
},
xAxis: [
{
type: 'category',
data: xData,
axisPointer: {
type: 'shadow'
},
axisLabel: {
color: "#fff",
fontSize: 12,
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 1,
color: "#213259",
},
}
}
],
yAxis: [
{
type: 'value',
name: '单位',
// min: 0,
// max: 250,
// interval: 50,
axisLabel: {
color: "#fff",
fontSize: 12,
formatter: '{value}'
},
axisLine: {
show: true,
lineStyle: {
color: "#213259",
},
},
splitLine: {
lineStyle: {
color: "#213259a0",
},
}
}
],
series: [
{
name: '电耗能',
type: 'bar',
// barWidth: 12,
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
}
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#5CB7FF' },
{ offset: 1, color: '#364BFE' }
])
},
data: yData
}
]
}
option && this.chart.setOption(option)
}
}
}
</script>
<style scoped lang="scss">
.energe-monitoring-chart {
width: 100%;
height: 100%;
}
</style>
<style>
.energe-monitoring-chart-tooltip {
background: #0a2b4f77 !important;
border: none !important;
backdrop-filter: blur(12px);
}
.energe-monitoring-chart-tooltip * {
color: #fff !important;
}
</style>

View File

@ -51,27 +51,34 @@ export default {
}
},
watch: {
energyWeekTrend: {//
energyWeekTrend: {//
handler(newVal, oldVal) {
if (this.chartTime === '周' && this.chartType === '电耗能') {
this.updateChart()
}
}
},
energyMonthTrend: {//
energyMonthTrend: {//
handler(newVal, oldVal) {
if (this.chartTime === '月' && this.chartType === '电耗能') {
this.updateChart()
}
}
},
energyYearTrend: {//
energyYearTrend: {//
handler(newVal, oldVal) {
if (this.chartTime === '年' && this.chartType === '电耗能') {
this.updateChart()
}
}
},
gasChartMsg: {//
handler(newVal, oldVal) {
if (this.chartType === '天然气I' || this.chartType === '天然气II') {
this.updateChart()
}
}
},
chartTime: {//
handler(newVal, oldVal) {
this.updateChart()
@ -114,33 +121,27 @@ export default {
break;
}
case '天然气I':{
yData = this.gasChartMsg.hisSumGas1 || []
if (this.chartTime === '周') {
yData = this.gasChartMsg.hisSumGas1For7Day || []
}else if(this.chartTime === '月') {
yData = this.gasChartMsg.sumGas1ForMonth || []
}else{
yData = this.gasChartMsg.sumGas1ForYear || []
}
gasName = '天然气I'
xData = 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()
xData = this.getXdata()
break;
}
default:
gasName = '天然气II'
yData = this.gasChartMsg.hisSumGas2 || []
xData = 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()
if (this.chartTime === '周') {
yData = this.gasChartMsg.hisSumGas2For7Day || []
}else if(this.chartTime === '月') {
yData = this.gasChartMsg.sumGas2ForMonth || []
}else{
yData = this.gasChartMsg.sumGas2ForYear || []
}
xData = this.getXdata()
}
if (yData.length == 0) {
seriesData = []
@ -177,7 +178,7 @@ export default {
this.chart = echarts.init(this.$el);
var option = {
color: colors,
grid: { top: 32, right: 12, bottom: 20, left: 48 },
grid: { top: 32, right: 12, bottom: 20, left: 60 },
xAxis: {
type: 'category',
data: xData,
@ -223,6 +224,40 @@ export default {
},
}
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);
}
},
};

View File

@ -0,0 +1,204 @@
<template>
<div class="num-rate-chart"></div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
export default {
name: 'NumRateChart',
mixins: [resize],
data() {
return {
chart: null
}
},
computed: {
productline() {
return this.$store.state.websocket.productline
}
},
watch:{
productline: {
handler(newVal, oldVal) {
if (newVal === oldVal) {
return false
}
this.updateChart()
}
}
},
mounted() {
this.$el.addEventListener('resize', () => {
console.log('resziing.....');
});
this.updateChart()
},
methods: {
updateChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
this.chart = echarts.init(this.$el);
let xData = []
let outputNum = []
let passRate = []
this.productline && this.productline.length > 0 && this.productline.map(item => {
xData.push(itme.productionLineId)
outputNum.push(itme.outputNum)
passRate.push(item.passRate)
})
var option = {
grid: { top: 32, right: 60, bottom: 20, left: 60 },
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "num-rate-chart-tooltip"
},
legend: {
data: ['产线产量', '合格率'],
textStyle: {
color: "#DFF1FE",
fontSize: 12,
}
},
xAxis: [
{
type: 'category',
data: ['Y61', 'Y62', 'Y63', 'Y64', 'Y65', 'Y66', 'Y67'],
axisLabel: {
color: "#fff",
fontSize: 12,
},
axisPointer: {
type: 'shadow'
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 1,
color: "#213259",
},
},
}
],
yAxis: [
{
type: 'value',
name: '产量/片',
// min: 0,
// max: 250,
// interval: 50,
axisLabel: {
color: "#fff",
fontSize: 12,
formatter: '{value}'
},
axisLine: {
show: true,
lineStyle: {
color: "#213259",
},
},
splitLine: {
lineStyle: {
color: "#213259a0",
},
}
},
{
type: 'value',
name: '良品率',
min: 0,
max: 25,
interval: 5,
axisLabel: {
color: "#fff",
fontSize: 12,
formatter: '{value} %'
},
axisLine: {
show: true,
lineStyle: {
color: "#213259",
},
},
splitLine: {
lineStyle: {
color: "#213259a0",
},
}
}
],
series: [
{
name: '产线产量',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value;
}
},
barWidth: 12,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#5CB7FF' },
{ offset: 1, color: '#364BFE' }
])
},
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
]
},
{
name: '合格率',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + '%';
}
},
itemStyle: {
color: '#FFD160'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#FFCB59' + "40" },
{ offset: 0.5, color: '#FFCB59' + "20" },
{ offset: 1, color: '#FFCB59' + "00" },
]),
},
lineStyle: {
width: 1
},
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
option && this.chart.setOption(option)
}
}
}
</script>
<style scoped lang="scss">
.num-rate-chart {
width: 100%;
height: 100%;
}
</style>
<style>
.num-rate-chart-tooltip {
background: #0a2b4f77 !important;
border: none !important;
backdrop-filter: blur(12px);
}
.num-rate-chart-tooltip * {
color: #fff !important;
}
</style>

View File

@ -1,22 +1,34 @@
<template>
<div
class="bottom-two"
style="
display: grid;
gap: 16px;
grid-template-rows: 462px 462px;
">
<OrderStatus />
<YieldRate />
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
<div class="left-side" style="flex: 1">
<div
style="
display: grid;
grid-template-rows: 462px;
">
<EnergyMonitoring />
</div>
</div>
<div class="right-side" style="flex: 1">
<div
style="
display: grid;
grid-template-rows: 462px;
">
<NumRate />
</div>
</div>
</div>
</template>
<script>
import OrderStatus from './OrderStatus.vue';
import YieldRate from './YieldRate.vue';
import NumRate from './NumRate';
import EnergyMonitoring from './EnergyMonitoring';
export default {
name: 'BottomTwo',
components: { OrderStatus, YieldRate },
components: { NumRate, EnergyMonitoring },
props: {},
data() {
return {};

View File

@ -1,14 +1,14 @@
<template>
<div style="flex: 1;">
<Container name="本日生产良品率" size="small" style="">
0000987
<Container name="各工序缺陷汇总" size="small" style="">
设备报警
</Container>
</div>
</template>
<script>
import Container from '../components/Container.vue';
export default {
name: 'YieldRate',
name: 'DefectSum',
components: { Container },
}
</script>

View File

@ -0,0 +1,30 @@
<template>
<div style="flex: 1;">
<Container name="能源监控" size="small" style="">
<div class="chart" style="height: 370px; margin-top: 8px;">
<EnergeMonitoringChart/>
</div>
</Container>
</div>
</template>
<script>
import Container from '../components/Container.vue';
import EnergeMonitoringChart from '../components/EnergeMonitoringChart';
export default {
name: 'EnergyMonitoring',
components: { Container, EnergeMonitoringChart },
data() {
return {
}
},
methods: {
}
}
</script>
<style lang='scss' scoped>
.timeToggle {
position: absolute;
right: 20px;
top: 30px;
}
</style>

View File

@ -1,14 +1,14 @@
<template>
<div style="flex: 1;">
<Container name="订单完成情况" size="small" style="">
digndna
<Container name="设备报警" size="small" style="">
设备报警
</Container>
</div>
</template>
<script>
import Container from '../components/Container.vue';
export default {
name: 'OrderStatus',
name: 'EqAlarm',
components: { Container },
}
</script>

View File

@ -0,0 +1,30 @@
<template>
<div style="flex: 1;">
<Container name="产线产量及良品率" size="small" style="">
<div class="chart" style="height: 370px; margin-top: 8px;">
<NumRateChart />
</div>
</Container>
</div>
</template>
<script>
import Container from '../components/Container';
import NumRateChart from '../components/NumRateChart';
export default {
name: 'NumRate',
components: { Container, NumRateChart },
data() {
return {
}
},
methods: {
}
}
</script>
<style lang='scss' scoped>
.timeToggle {
position: absolute;
right: 20px;
top: 30px;
}
</style>

View File

@ -1,22 +1,44 @@
<template>
<div
class="top-three"
style="
display: grid;
gap: 16px;
grid-template-rows: 462px 462px;
">
<OrderStatus />
<YieldRate />
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px;">
<div class="left-side" style="flex: 1;">
<div
style="
display: grid;
grid-template-rows: 462px;
">
<EqAlarm />
</div>
</div>
<div class="middle-side" style="flex: 1">
<div
style="
display: grid;
grid-template-rows: 462px;
">
<DefectSum />
</div>
</div>
<div class="righe-side" style="flex: 1">
<div
style="
display: grid;
grid-template-rows: 462px;
">
<WorkOrderMonitoring />
</div>
</div>
</div>
</template>
<script>
import OrderStatus from './OrderStatus.vue';
import YieldRate from './YieldRate.vue';
import WorkOrderMonitoring from './WorkOrderMonitoring';
import EqAlarm from './EqAlarm'
import DefectSum from './DefectSum'
export default {
name: 'TopThree',
components: { OrderStatus, YieldRate },
components: { EqAlarm, DefectSum, WorkOrderMonitoring },
props: {},
data() {
return {};

View File

@ -0,0 +1,14 @@
<template>
<div style="flex: 1;">
<Container name="工单监控" size="small" style="">
设备报警111
</Container>
</div>
</template>
<script>
import Container from '../components/Container.vue';
export default {
name: 'WorkOrderMonitoring',
components: { Container },
}
</script>

View File

@ -18,18 +18,18 @@
"
:style="{transform:'scale('+scaleNum+')'}">
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='全厂总览驾驶舱'/>
<!-- <div
<div
class="main-body"
style="
display: grid;
gap: 16px;
grid-template-rows: 605px 320px;
grid-template-rows: 462px 462px;
">
<GasHandle />
<YieldRate />
</div> -->
<TopThree />
<BottomTwo />
</div>
<div
<!-- <div
class="main-body"
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
<div class="left-side" style="flex: 1">
@ -38,7 +38,7 @@
<div class="middle-side" style="flex: 1">
<BottomTwo />
</div>
</div>
</div> -->
</div>
</div>
</template>

View File

@ -76,28 +76,30 @@ export default {
//
toggleType(val) {
console.log('能源' + val)
if (val === '天然气I' || val === '天然气II') {
if (this.chartTime === '周') {
this.chartType = val
} else {
this.$message.warning('暂无数据')
}
}else {
this.chartType = val
}
this.chartType = val
// if (val === 'I' || val === 'II') {
// if (this.chartTime === '') {
// this.chartType = val
// } else {
// this.$message.warning('')
// }
// }else {
// this.chartType = val
// }
},
//
toggleDate(val) {
console.log('时间' + val)
if (val === '月' || val === '年') {
if (this.chartType === '电耗能') {
this.chartTime = val
} else {
this.$message.warning('暂无数据')
}
}else{
this.chartTime = val
}
this.chartTime = val
// if (val === '' || val === '') {
// if (this.chartType === '') {
// this.chartTime = val
// } else {
// this.$message.warning('')
// }
// }else{
// this.chartTime = val
// }
}
},
};

View File

@ -23,7 +23,7 @@
">
氧气含量
</span>
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo.O2_float}}%</span>
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.O2_float ? (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}}mg/</span>
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.NOX_float ? (exhaustGasInfo?.NOX_float).toFixed(2):''}}mg/</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}}mg/</span>
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.SO2_float ? (exhaustGasInfo?.SO2_float).toFixed(2): ''}}mg/</span>
</ShadowRect>
<ShadowRect>
@ -69,7 +69,7 @@
">
颗粒物浓度
</span>
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo.dust_float}}mg/</span>
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.dust_float ? (exhaustGasInfo?.dust_float).toFixed(2) : ''}}mg/</span>
</ShadowRect>
</div>
<KilnLine :horizontal="true" />

View File

@ -0,0 +1,38 @@
<template>
<div style="flex: 1;">
<Container name="产线当日缺陷分类" size="small">
<SelectorBtnGroup class="typeToggle" :options="['Y61', 'Y62', 'Y63', 'Y64', 'Y65']" @emitFun='toggleType' :active='chartType' />
<div class="chart" style="height: 370px; margin-top: 8px;">
<DefectClassChart :chartType='chartType'/>
</div>
</Container>
</div>
</template>
<script>
import Container from '../components/Container';
import SelectorBtnGroup from '../components/SelectorBtnGroup';
import DefectClassChart from '../components/DefectClassChart';
export default {
name: 'DefectClass',
components: { Container, SelectorBtnGroup, DefectClassChart },
data() {
return {
chartType:'Y61'
}
},
methods: {
// 线
toggleType(val) {
console.log('产线' + val)
this.chartType = val
}
}
}
</script>
<style lang='scss' scoped>
.typeToggle {
position: absolute;
right: 20px;
top: 30px;
}
</style>

View File

@ -2,16 +2,19 @@
<div style="flex: 1;">
<Container name="产线缺陷统计" size="small">
<SelectorBtnGroup class="timeToggle" :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
</Container>
<div class="chart" style="height: 238px; margin-top: 8px;">
<DefectChart :chartTime='chartTime'/>
</div>
</Container>
</div>
</template>
<script>
import Container from '../components/Container';
import SelectorBtnGroup from '../components/SelectorBtnGroup';
import DefectChart from '../components/DefectChart';
export default {
name: 'DefectStatistics',
components: { Container, SelectorBtnGroup },
components: { Container, SelectorBtnGroup, DefectChart },
data() {
return {
chartTime:'日'
@ -29,6 +32,7 @@ export default {
<style lang='scss' scoped>
.timeToggle {
position: absolute;
right: 0;
right: 20px;
top: 20px;
}
</style>

View File

@ -87,7 +87,7 @@ export default {
setRowStyle(v) {
if (v.rowIndex % 2 === 0) {
return {
background: 'rgba(11, 84, 153, 1)',
background: 'rgba(11, 84, 153, 0.5)',
color: 'rgba(255,255,255,0.8)',
height: '40px',
lineHeight: '40px',
@ -96,7 +96,7 @@ export default {
}
} else {
return {
background: 'rgba(4, 74, 132, 1)',
background: 'rgba(4, 74, 132, 0.5)',
color: 'rgba(255,255,255,0.8)',
height: '40px',
lineHeight: '40px',

View File

@ -7,16 +7,16 @@
grid-template-rows: 462px 462px;
">
<EnergeCost />
<YieldRate />
<DefectClass />
</div>
</template>
<script>
import EnergeCost from './../kiln/EnergeCost.vue';
import YieldRate from './YieldRate.vue';
import DefectClass from './DefectClass.vue';
export default {
name: 'RightFour',
components: { EnergeCost, YieldRate },
components: { EnergeCost, DefectClass },
props: {},
data() {
return {};

View File

@ -64,15 +64,15 @@ export default {
tableProps,
list:[
{time: '2023-12-12', name: '名称名称'},
{time: '2023-12-13', name: '名称名称'},
{time: '2023-12-14', name: '名称名称'},
{time: '2023-12-15', name: '名称名称'},
{time: '2023-12-16', name: '名称名称'},
{time: '2023-12-17', name: '名称名称'},
{time: '2023-12-18', name: '名称名称'},
{time: '2023-12-19', name: '名称名称'},
{time: '2023-12-20', name: '名称名称'},
{time: '2023-12-21', name: '名称名称'}
// {time: '2023-12-13', name: ''},
// {time: '2023-12-14', name: ''},
// {time: '2023-12-15', name: ''},
// {time: '2023-12-16', name: ''},
// {time: '2023-12-17', name: ''},
// {time: '2023-12-18', name: ''},
// {time: '2023-12-19', name: ''},
// {time: '2023-12-20', name: ''},
// {time: '2023-12-21', name: ''}
]
}
},

View File

@ -42,7 +42,7 @@ export function WsConnect(url, agentData, successCallback, errCallback) {
this.lockReconnect = true;
this.wsCreateHandler && clearTimeout(this.wsCreateHandler);
// 关闭心跳检查
heartCheck.stop();
// heartCheck.stop();
}
};
const initWsEventHandle = () => {
@ -50,13 +50,13 @@ export function WsConnect(url, agentData, successCallback, errCallback) {
// 连接成功
this.wsObj.onopen = (event) => {
onWsOpen(event);
heartCheck.start();
// heartCheck.start();
};
// 监听服务器端返回的信息
this.wsObj.onmessage = (event) => {
onWsMessage(event);
heartCheck.start();
// heartCheck.start();
};
this.wsObj.onclose = (event) => {
@ -136,41 +136,41 @@ export function WsConnect(url, agentData, successCallback, errCallback) {
};
// 心跳检查看看websocket是否还在正常连接中
let heartCheck = {
timeout: 15000,
timeoutObj: null,
serverTimeoutObj: null,
// 重启
reset() {
clearTimeout(this.timeoutObj);
clearTimeout(this.serverTimeoutObj);
this.start();
},
// 停止
stop() {
clearTimeout(this.timeoutObj);
clearTimeout(this.serverTimeoutObj);
},
// 开启定时器
start() {
this.timeoutObj && clearTimeout(this.timeoutObj);
this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
// 15s之内如果没有收到后台的消息则认为是连接断开了需要重连
this.timeoutObj = setTimeout(() => {
writeToScreen("心跳检查发送ping到后台");
try {
const datas = { ping: true };
this.wsObj.send(JSON.stringify(datas));
} catch (err) {
writeToScreen("发送ping异常");
}
console.log("内嵌定时器this.serverTimeoutObj: ", this.serverTimeoutObj);
// 内嵌定时器
this.serverTimeoutObj = setTimeout(() => {
writeToScreen("没有收到后台的数据,重新连接");
reconnect();
}, this.timeout);
}, this.timeout);
},
};
// let heartCheck = {
// timeout: 15000,
// timeoutObj: null,
// serverTimeoutObj: null,
// // 重启
// reset() {
// clearTimeout(this.timeoutObj);
// clearTimeout(this.serverTimeoutObj);
// this.start();
// },
// // 停止
// stop() {
// clearTimeout(this.timeoutObj);
// clearTimeout(this.serverTimeoutObj);
// },
// // 开启定时器
// start() {
// this.timeoutObj && clearTimeout(this.timeoutObj);
// this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
// // 15s之内如果没有收到后台的消息则认为是连接断开了需要重连
// this.timeoutObj = setTimeout(() => {
// writeToScreen("心跳检查发送ping到后台");
// try {
// const datas = { ping: true };
// this.wsObj.send(JSON.stringify(datas));
// } catch (err) {
// writeToScreen("发送ping异常");
// }
// console.log("内嵌定时器this.serverTimeoutObj: ", this.serverTimeoutObj);
// // 内嵌定时器
// this.serverTimeoutObj = setTimeout(() => {
// writeToScreen("没有收到后台的数据,重新连接");
// reconnect();
// }, this.timeout);
// }, this.timeout);
// },
// };
}

View File

@ -37,6 +37,7 @@ const dcsConn = new WsConnect(
console.log('失败的回调函数', err)
}
)
// ISRA
const mesIsra = new WsConnect(
'ws://10.70.2.2:8080/websocket/message?userId=KILN'+timestr,
'',
@ -106,6 +107,10 @@ const mesEN = new WsConnect(
store.dispatch({type: "websocket/setEnergyTrend", payload:msgData.data})
break;
}
case "EnergyMonitoring": {
store.dispatch({type: "websocket/setEnergyMonitoring", payload:msgData.data})
break;
}
default:
}
},
@ -144,12 +149,72 @@ const mesGAS = new WsConnect(
console.log('失败的回调函数', err)
}
)
// 缺陷分类/统计 IS
const mesIS = new WsConnect(
// websocket地址
'ws://10.70.2.2:8080/websocket/message?userId=IS'+timestr,
// 传递给后台的数据
'',
// 成功拿到后台返回的数据的回调函数
(data) => {
// console.log('mes 缺陷成功的回调函数, 接收到的data数据: ', data)
let msgData = JSON.parse(data)
if (msgData == null) return;
switch (msgData?.type) {
case "isra": {
store.dispatch({type: "websocket/setDefectChart", payload:{
dayStatistic: msgData.detData.dayStatistic,
weekStatistic: msgData.detData.weekStatistic,
monthStatistic: msgData.detData.monthStatistic,
yearStatistic: msgData.detData.yearStatistic,
}})
break;
}
default:
}
},
// websocket连接失败的回调函数
(err) => {
console.log('失败的回调函数', err)
}
)
// 产线产量及良品率 SJG
const mesSJG = new WsConnect(
// websocket地址
// 'ws://10.70.2.2:8080/websocket/message?userId=SJG'+timestr,
'ws://192.168.1.104:48082/websocket/message?userId=SJG'+timestr,
// 传递给后台的数据
'',
// 成功拿到后台返回的数据的回调函数
(data) => {
// console.log('mes 产线产量及良品率成功的回调函数, 接收到的data数据: ', data)
let msgData = JSON.parse(data)
if (msgData == null) return;
switch (msgData?.type) {
case "productline": {
store.dispatch({type: "websocket/setProductline", payload:msgData.detData})
break;
}
default:
}
},
// websocket连接失败的回调函数
(err) => {
console.log('失败的回调函数', err)
}
)
export const getDcsMsg = () => {
dcsConn.createWebSoket()
mesIsra.createWebSoket()
mesMA.createWebSoket()
mesEN.createWebSoket()
mesGAS.createWebSoket()
mesIS.createWebSoket()
// mesSJG.createWebSoket()
}
export const closeDcsMsg = () => {
dcsConn.closeWebsocket()
@ -157,4 +222,6 @@ export const closeDcsMsg = () => {
mesMA.closeWebsocket()
mesEN.closeWebsocket()
mesGAS.closeWebsocket()
mesIS.closeWebsocket()
// mesSJG.closeWebsocket()
}

View File

@ -1100,6 +1100,51 @@
"cssnano-preset-default" "^4.0.0"
"postcss" "^7.0.0"
"@jiaminghi/bezier-curve@*":
"integrity" "sha512-u9xJPOEl6Dri2E9FfmJoGxYQY7vYJkURNX04Vj64tdi535tPrpkuf9Sm0lNr3QTKdHQh0DdNRsaa62FLQNQEEw=="
"resolved" "https://registry.npmmirror.com/@jiaminghi/bezier-curve/-/bezier-curve-0.0.9.tgz"
"version" "0.0.9"
dependencies:
"@babel/runtime" "^7.5.5"
"@jiaminghi/c-render@^0.4.3":
"integrity" "sha512-FJfzj5hGj7MLqqqI2D7vEzHKbQ1Ynnn7PJKgzsjXaZpJzTqs2Yw5OSeZnm6l7Qj7jyPAP53lFvEQNH4o4j6s+Q=="
"resolved" "https://registry.npmmirror.com/@jiaminghi/c-render/-/c-render-0.4.3.tgz"
"version" "0.4.3"
dependencies:
"@babel/runtime" "^7.5.5"
"@jiaminghi/bezier-curve" "*"
"@jiaminghi/color" "*"
"@jiaminghi/transition" "*"
"@jiaminghi/charts@*":
"integrity" "sha512-K+HXaOOeWG9OOY1VG6M4mBreeeIAPhb9X+khG651AbnwEwL6G2UtcAQ8GWCq6GzhczcLwwhIhuaHqRygwHC0sA=="
"resolved" "https://registry.npmmirror.com/@jiaminghi/charts/-/charts-0.2.18.tgz"
"version" "0.2.18"
dependencies:
"@babel/runtime" "^7.5.5"
"@jiaminghi/c-render" "^0.4.3"
"@jiaminghi/color@*":
"integrity" "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg=="
"resolved" "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz"
"version" "1.1.3"
"@jiaminghi/data-view@^2.10.0":
"integrity" "sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA=="
"resolved" "https://registry.npmmirror.com/@jiaminghi/data-view/-/data-view-2.10.0.tgz"
"version" "2.10.0"
dependencies:
"@babel/runtime" "^7.5.5"
"@jiaminghi/charts" "*"
"@jiaminghi/transition@*":
"integrity" "sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg=="
"resolved" "https://registry.npmmirror.com/@jiaminghi/transition/-/transition-1.1.11.tgz"
"version" "1.1.11"
dependencies:
"@babel/runtime" "^7.5.5"
"@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2":
"integrity" "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ=="
"resolved" "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz"