Merge pull request 'projects/mesxc-zjl' (#168) from projects/mesxc-zjl into projects/mesxc-test
Reviewed-on: #168
This commit is contained in:
commit
d21749c170
@ -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 |
@ -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++
|
||||
}
|
||||
})
|
||||
|
@ -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 需要引入
|
||||
|
@ -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,
|
||||
|
BIN
src/views/databoard/assets/defectStatistics.png
Normal file
BIN
src/views/databoard/assets/defectStatistics.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 558 B |
BIN
src/views/databoard/assets/eqMonitor.png
Normal file
BIN
src/views/databoard/assets/eqMonitor.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 615 B |
BIN
src/views/databoard/assets/goodRate.png
Normal file
BIN
src/views/databoard/assets/goodRate.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.5 KiB |
BIN
src/views/databoard/assets/order.png
Normal file
BIN
src/views/databoard/assets/order.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 789 B |
@ -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');
|
||||
}
|
||||
},
|
||||
},
|
||||
|
216
src/views/databoard/components/DefectChart.vue
Normal file
216
src/views/databoard/components/DefectChart.vue
Normal 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>
|
170
src/views/databoard/components/DefectClassChart.vue
Normal file
170
src/views/databoard/components/DefectClassChart.vue
Normal 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>
|
157
src/views/databoard/components/EnergeMonitoringChart.vue
Normal file
157
src/views/databoard/components/EnergeMonitoringChart.vue
Normal 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>
|
@ -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);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
204
src/views/databoard/components/NumRateChart.vue
Normal file
204
src/views/databoard/components/NumRateChart.vue
Normal 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>
|
@ -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 {};
|
||||
|
@ -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>
|
30
src/views/databoard/deepProcessing/EnergyMonitoring.vue
Normal file
30
src/views/databoard/deepProcessing/EnergyMonitoring.vue
Normal 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>
|
@ -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>
|
30
src/views/databoard/deepProcessing/NumRate.vue
Normal file
30
src/views/databoard/deepProcessing/NumRate.vue
Normal 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>
|
@ -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 {};
|
||||
|
14
src/views/databoard/deepProcessing/WorkOrderMonitoring.vue
Normal file
14
src/views/databoard/deepProcessing/WorkOrderMonitoring.vue
Normal 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>
|
@ -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>
|
||||
|
@ -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
|
||||
// }
|
||||
}
|
||||
},
|
||||
};
|
||||
|
@ -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/m³</span>
|
||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.NOX_float ? (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}}mg/m³</span>
|
||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.SO2_float ? (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}}mg/m³</span>
|
||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.dust_float ? (exhaustGasInfo?.dust_float).toFixed(2) : ''}}mg/m³</span>
|
||||
</ShadowRect>
|
||||
</div>
|
||||
<KilnLine :horizontal="true" />
|
||||
|
38
src/views/databoard/wholePlant/DefectClass.vue
Normal file
38
src/views/databoard/wholePlant/DefectClass.vue
Normal 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>
|
@ -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>
|
@ -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',
|
||||
|
@ -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 {};
|
||||
|
@ -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: '名称名称'}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
@ -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);
|
||||
// },
|
||||
// };
|
||||
}
|
||||
|
@ -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()
|
||||
}
|
45
yarn.lock
45
yarn.lock
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user