merge test
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Date: 2020-12-14 09:07:03
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2023-11-14 10:11:09
|
||||
* @LastEditTime: 2023-12-28 09:00:44
|
||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
|
||||
* @Description:
|
||||
-->
|
||||
@@ -16,10 +16,9 @@
|
||||
style="width: 100%; background: transparent"
|
||||
>
|
||||
<el-table-column
|
||||
v-if="page && limit && showIndex"
|
||||
prop="_pageIndex"
|
||||
:label="'tableHeader.index' | i18nFilter"
|
||||
:width="70"
|
||||
label="序号"
|
||||
:width="50"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-09-21 09:06:28
|
||||
* @LastEditTime: 2023-10-16 14:20:45
|
||||
* @LastEditTime: 2023-12-29 16:18:17
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -60,98 +60,16 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
series: []
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [],
|
||||
barWidth: 6
|
||||
}]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('mounted')
|
||||
console.log('borderRadius: ', this.borderRadius)
|
||||
|
||||
this.series = [
|
||||
{
|
||||
name: this.dataList[0].name,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[0].topColor },
|
||||
{ offset: 1, color: this.dataList[0].bottomColor }
|
||||
]),
|
||||
barBorderRadius: this.borderRadius
|
||||
},
|
||||
data: this.dataList[0].data,
|
||||
barWidth: 6
|
||||
},
|
||||
{
|
||||
name: this.dataList[1].name,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[1].topColor },
|
||||
{ offset: 1, color: this.dataList[1].bottomColor }
|
||||
]),
|
||||
barBorderRadius: this.borderRadius
|
||||
},
|
||||
data: this.dataList[1].data,
|
||||
barWidth: 6
|
||||
},
|
||||
{
|
||||
name: this.dataList[2].name,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[2].topColor },
|
||||
{ offset: 1, color: this.dataList[2].bottomColor }
|
||||
]),
|
||||
// borderRadius: [5, 5, 0, 0]
|
||||
barBorderRadius: this.borderRadius
|
||||
},
|
||||
data: this.dataList[2].data,
|
||||
barWidth: 6
|
||||
},
|
||||
{
|
||||
name: this.dataList[3].name,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[3].topColor },
|
||||
{ offset: 1, color: this.dataList[3].bottomColor }
|
||||
]),
|
||||
// borderRadius: [5, 5, 0, 0]
|
||||
barBorderRadius: this.borderRadius
|
||||
},
|
||||
data: this.dataList[3].data,
|
||||
barWidth: 6
|
||||
},
|
||||
{
|
||||
name: this.dataList[4].name,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[4].topColor },
|
||||
{ offset: 1, color: this.dataList[4].bottomColor }
|
||||
]),
|
||||
// borderRadius: [5, 5, 0, 0]
|
||||
barBorderRadius: this.borderRadius
|
||||
},
|
||||
data: this.dataList[4].data,
|
||||
barWidth: 6
|
||||
},
|
||||
{
|
||||
name: this.dataList[5].name,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[5].topColor },
|
||||
{ offset: 1, color: this.dataList[5].bottomColor }
|
||||
]),
|
||||
// borderRadius: [5, 5, 0, 0]
|
||||
barBorderRadius: this.borderRadius
|
||||
},
|
||||
data: this.dataList[5].data,
|
||||
barWidth: 6
|
||||
}
|
||||
]
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
@@ -164,8 +82,50 @@ export default {
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
console.log(1)
|
||||
initChart(nameList, passRateList, outputNumList) {
|
||||
let series= [
|
||||
{
|
||||
name: '产线产量',
|
||||
type: 'bar',
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#9DD5FF' },
|
||||
{ offset: 1, color: '#1295FF' }
|
||||
])
|
||||
// barBorderRadius: this.borderRadius
|
||||
},
|
||||
barWidth: 12,
|
||||
data: outputNumList
|
||||
},
|
||||
{
|
||||
name: '产线良品率',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
areaStyle: {
|
||||
opacity: 0.8,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 209, 96, 0.18)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255, 234, 153, 0)'
|
||||
}
|
||||
])
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(255, 209, 96, 1)', //改变折线点的颜色
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 209, 96, 1)' //改变折线颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
data: passRateList
|
||||
}
|
||||
]
|
||||
const colors = ['#5470C6', '#91CC75', '#EE6666']
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
this.chart.setOption({
|
||||
@@ -177,7 +137,12 @@ export default {
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
right: '20%'
|
||||
left: "4%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
width: 'auto',
|
||||
height: "auto",
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
data: ['产线产量', '产线良品率'],
|
||||
@@ -205,7 +170,7 @@ export default {
|
||||
color: '#213259'
|
||||
}
|
||||
},
|
||||
data: ['钢一线', '钢二线', '钢三线', '钢四线', '钢五线', '钢六线', '钢七线', '钢八线']
|
||||
data: nameList
|
||||
},
|
||||
// yAxis: {
|
||||
|
||||
@@ -236,8 +201,7 @@ export default {
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#ced1d5', // 坐标值得具体的颜色
|
||||
formatter: '{value} 片'
|
||||
|
||||
formatter: '{value}%'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
@@ -262,7 +226,7 @@ export default {
|
||||
},
|
||||
scale: true,
|
||||
type: 'value',
|
||||
name: '产量/片', // y轴上方的单位
|
||||
name: '产量/㎡', // y轴上方的单位
|
||||
nameTextStyle: {// y轴上方单位的颜色
|
||||
color: '#fff'
|
||||
},
|
||||
@@ -295,29 +259,7 @@ export default {
|
||||
// },
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '产线产量',
|
||||
type: 'bar',
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#9DD5FF' },
|
||||
{ offset: 1, color: '#1295FF' }
|
||||
])
|
||||
// barBorderRadius: this.borderRadius
|
||||
},
|
||||
data: [
|
||||
2032, 3032, 1802, 2932, 2322, 2613, 2873, 2561
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '产线良品率',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
data: [98, 97, 94, 97.6, 98.2, 98.2, 97.4, 98.5]
|
||||
}
|
||||
]
|
||||
series: series
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -41,113 +41,39 @@ export default {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
nameList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
// nameList: {
|
||||
// type: Array,
|
||||
// default: () => []
|
||||
// },
|
||||
// dataList: {
|
||||
// type: Array,
|
||||
// default: () => []
|
||||
// }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
series: []
|
||||
nameList: [],
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [],
|
||||
barWidth: 6
|
||||
|
||||
}]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('mounted')
|
||||
console.log('borderRadius: ', this.borderRadius)
|
||||
|
||||
this.series = [
|
||||
{
|
||||
name: this.dataList[0].name,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[0].topColor },
|
||||
{ offset: 1, color: this.dataList[0].bottomColor }
|
||||
]),
|
||||
barBorderRadius: this.borderRadius
|
||||
},
|
||||
data: this.dataList[0].data,
|
||||
barWidth: 6
|
||||
},
|
||||
{
|
||||
name: this.dataList[1].name,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[1].topColor },
|
||||
{ offset: 1, color: this.dataList[1].bottomColor }
|
||||
]),
|
||||
barBorderRadius: this.borderRadius
|
||||
},
|
||||
data: this.dataList[1].data,
|
||||
barWidth: 6
|
||||
},
|
||||
{
|
||||
name: this.dataList[2].name,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[2].topColor },
|
||||
{ offset: 1, color: this.dataList[2].bottomColor }
|
||||
]),
|
||||
// borderRadius: [5, 5, 0, 0]
|
||||
barBorderRadius: this.borderRadius
|
||||
},
|
||||
data: this.dataList[2].data,
|
||||
barWidth: 6
|
||||
},
|
||||
{
|
||||
name: this.dataList[3].name,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[3].topColor },
|
||||
{ offset: 1, color: this.dataList[3].bottomColor }
|
||||
]),
|
||||
// borderRadius: [5, 5, 0, 0]
|
||||
barBorderRadius: this.borderRadius
|
||||
},
|
||||
data: this.dataList[3].data,
|
||||
barWidth: 6
|
||||
},
|
||||
{
|
||||
name: this.dataList[4].name,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[4].topColor },
|
||||
{ offset: 1, color: this.dataList[4].bottomColor }
|
||||
]),
|
||||
// borderRadius: [5, 5, 0, 0]
|
||||
barBorderRadius: this.borderRadius
|
||||
},
|
||||
data: this.dataList[4].data,
|
||||
barWidth: 6
|
||||
},
|
||||
{
|
||||
name: this.dataList[5].name,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[5].topColor },
|
||||
{ offset: 1, color: this.dataList[5].bottomColor }
|
||||
]),
|
||||
// borderRadius: [5, 5, 0, 0]
|
||||
barBorderRadius: this.borderRadius
|
||||
},
|
||||
data: this.dataList[5].data,
|
||||
barWidth: 6
|
||||
}
|
||||
]
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
// console.log('33333', this.dataList)
|
||||
// let arr = []
|
||||
// this.dataList.forEach(ele => {
|
||||
// console.log(ele);
|
||||
// this.series = []
|
||||
this.initChart()
|
||||
// this.$nextTick(() => {
|
||||
// // this.initChart()
|
||||
// })
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
@@ -157,9 +83,20 @@ export default {
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
console.log(1)
|
||||
initChart(nameList,dataList) {
|
||||
// console.log(1)
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
if (dataList.length !== 0) {
|
||||
// this.$set(this.series, "data", dataList);
|
||||
this.series = [{
|
||||
type: 'bar',
|
||||
data: dataList,
|
||||
barWidth: 6
|
||||
}]
|
||||
}
|
||||
if (nameList.length !== 0) {
|
||||
this.nameList = nameList
|
||||
}
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
@@ -216,19 +153,19 @@ export default {
|
||||
},
|
||||
type: 'value'
|
||||
},
|
||||
legend: {
|
||||
itemHeight: 10,
|
||||
itemWidth: 10,
|
||||
x: 'center', // 可设定图例在左、右、居中
|
||||
y: 'top', // 可设定图例在上、下、居中
|
||||
show: this.showLegend,
|
||||
data: this.dataList,
|
||||
right: '1%',
|
||||
textStyle: {
|
||||
fontSize: 12 * this.beilv,
|
||||
color: '#ced1d5'
|
||||
}
|
||||
},
|
||||
// legend: {
|
||||
// itemHeight: 10,
|
||||
// itemWidth: 10,
|
||||
// x: 'center', // 可设定图例在左、右、居中
|
||||
// y: 'top', // 可设定图例在上、下、居中
|
||||
// show: this.showLegend,
|
||||
// data: this.dataList,
|
||||
// right: '1%',
|
||||
// textStyle: {
|
||||
// fontSize: 12 * this.beilv,
|
||||
// color: '#ced1d5'
|
||||
// }
|
||||
// },
|
||||
series: this.series
|
||||
})
|
||||
}
|
||||
|
||||
215
src/views/OperationalOverview/components/pileBarChart.vue
Normal file
215
src/views/OperationalOverview/components/pileBarChart.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-12-27 13:54:52
|
||||
* @LastEditTime: 2023-12-29 16:28:26
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import 'echarts/theme/macarons' // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'OverviewBar',
|
||||
mixins: [resize],
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'linearBarChart'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
borderRadius: {
|
||||
type: Array,
|
||||
default: () => [9, 9, 0, 0]
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
showLegend: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// nameList: {
|
||||
// type: Array,
|
||||
// default: () => []
|
||||
// },
|
||||
// dataList: {
|
||||
// type: Array,
|
||||
// default: () => []
|
||||
// }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
nameList: [],
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: [],
|
||||
barWidth: 6
|
||||
|
||||
}]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log('mounted')
|
||||
// console.log('borderRadius: ', this.borderRadius)
|
||||
// console.log('33333', this.dataList)
|
||||
// let arr = []
|
||||
// this.dataList.forEach(ele => {
|
||||
// console.log(ele);
|
||||
// this.series = []
|
||||
this.initChart()
|
||||
// this.$nextTick(() => {
|
||||
// // this.initChart()
|
||||
// })
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
|
||||
// console.log(1)
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
let series = [
|
||||
{
|
||||
// 辅助系列
|
||||
name: '良品',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
// silent: true,
|
||||
// itemStyle: {
|
||||
color: '#0fdedb',
|
||||
// },
|
||||
barWidth: 10,
|
||||
data: passRateList
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
name: '废品',
|
||||
data: wasteList,
|
||||
barWidth: 10,
|
||||
// barWidth: 15,
|
||||
// label: {
|
||||
// position: [10, 10],
|
||||
// normal: {
|
||||
// position: [800, -24],
|
||||
// show: true,
|
||||
// textStyle: {
|
||||
// color: '#2359ec',
|
||||
// fontSize: 16,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
}
|
||||
]
|
||||
// for (i = 0; i < 5; i++) {
|
||||
// series.push({
|
||||
|
||||
// })
|
||||
// }
|
||||
this.chart.setOption({
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
width: 'auto',
|
||||
height: 'auto',
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
inside: true,
|
||||
interval: 0, //横轴信息全部显
|
||||
splitNumber: 50,
|
||||
// boundaryGap: [20, 20],
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
verticalAlign: 'bottom',
|
||||
fontSize: 12,
|
||||
align: 'left',
|
||||
padding: [0, 0, 15, -5]
|
||||
}
|
||||
},
|
||||
data: topNameList
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
inside: true,
|
||||
interval: 0, //横轴信息全部显
|
||||
splitNumber: 50,
|
||||
// boundaryGap: [20, 20],
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
verticalAlign: 'bottom',
|
||||
fontSize: 12,
|
||||
align: 'right',
|
||||
padding: [0, 0, 15, -5]
|
||||
}
|
||||
},
|
||||
data: nameWasteList
|
||||
}
|
||||
],
|
||||
xAxis: {
|
||||
// max: 120,
|
||||
show: false,
|
||||
},
|
||||
series:series
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -2,16 +2,16 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-07-19 15:18:30
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2023-12-19 14:25:07
|
||||
* @LastEditTime: 2023-12-29 15:15:50
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div id="container" ref="container" class="visual-container" :style="styles">
|
||||
<el-row class="container-title" :style="{
|
||||
height: 88 + 'px',
|
||||
lineHeight: 88 + 'px',
|
||||
fontSize: 31 + 'px'
|
||||
}">
|
||||
height: 88 + 'px',
|
||||
lineHeight: 88 + 'px',
|
||||
fontSize: 31 + 'px'
|
||||
}">
|
||||
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
|
||||
许昌安彩深加工看板
|
||||
<h3 class="unit">单位：河南汇融科技服务有限公司</h3>
|
||||
@@ -29,26 +29,21 @@
|
||||
<el-row class="container-main flex-col" type="flex">
|
||||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1">
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
||||
<base-container :title="'设备报警'" :title-icon="'5_1'">
|
||||
<base-container :title="'设备报警'" :title-icon="'eqAlarm'">
|
||||
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityYearTableProps"
|
||||
:table-data="qualityYearList" />
|
||||
:table-data="equipmentList" />
|
||||
</base-container>
|
||||
</el-col>
|
||||
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
||||
<base-container :title="'各工序缺陷汇总'" :title-icon="'5_2'">
|
||||
<div class="visual-select">
|
||||
<el-select class="coldSelect" v-model="modelMonth" size="mini" placeholder="">
|
||||
<el-option key="1" value="钢1线" label="钢1线" default />
|
||||
</el-select>
|
||||
</div>
|
||||
<base-container :title="'各工序缺陷汇总'" :title-icon="'scrap'">
|
||||
<base-table1 :page="1" :limit="9" :show-index="false" :table-config="qualityMonthTableProps"
|
||||
:table-data="qualityMonthList" />
|
||||
</base-container>
|
||||
</el-col>
|
||||
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8">
|
||||
<base-container :title="'设备监控'" :title-icon="'5_3'">
|
||||
<base-container :title="'工单监控'" :title-icon="'eqMonitoring'">
|
||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<top-radio-group />
|
||||
</div> -->
|
||||
@@ -59,13 +54,15 @@
|
||||
<!-- <el-row style="margin-bottom: 1em">
|
||||
<p class="now-team-title">加工工单进度</p>
|
||||
</el-row> -->
|
||||
<el-row v-for="op in orderProcessList" :key="op.id" style="margin-bottom: 1em">
|
||||
<el-progress :percentage="op.outRate * 100" class="custom-progress-bar" />
|
||||
<p v-if="op.outRate === 1" class="now-secondary-title" style="color:#4679FD">
|
||||
<el-row v-for="op in orderList" :key="op.id" style="margin-bottom: 1em">
|
||||
<!-- <el-col :span="12"> -->
|
||||
<el-progress :percentage="op.progressRate * 100" class="custom-progress-bar" />
|
||||
<!-- <p v-if="op.progressRate === 1" class="now-secondary-title" style="color:#4679FD">
|
||||
<i class="el-icon-check" />
|
||||
{{ op.name }}
|
||||
</p>
|
||||
<p v-else class="now-secondary-title">{{ op.name }}</p>
|
||||
</p> -->
|
||||
<p class="now-secondary-title">{{ op.name }}</p>
|
||||
<!-- </el-col> -->
|
||||
</el-row>
|
||||
<!-- <el-row>
|
||||
<el-progress :percentage="100" class="custom-progress-bar" />
|
||||
@@ -98,13 +95,14 @@
|
||||
|
||||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="12" type="flex" class="flex-1">
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||||
<base-container :height="256" :title="'能源监控'" :title-icon="'5_5'">
|
||||
<div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<base-container :height="256" :title="'能源监控'" :title-icon="'energyMonitoring'">
|
||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<top-radio-group />
|
||||
</div>
|
||||
</div> -->
|
||||
<el-row :gutter="9">
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24">
|
||||
<linear-bar-chart :name-list="cxNameList" :data-list="cxDataList" :height="359" :show-legend="true" />
|
||||
<linear-bar-chart ref="EnergyMonitoringChart" :name-list="EnergyMonitoringNameList"
|
||||
:data-list="EnergyMonitoringList" :height="359" />
|
||||
</el-col>
|
||||
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||||
<base-table3
|
||||
@@ -119,13 +117,13 @@
|
||||
</base-container>
|
||||
</el-col>
|
||||
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12">
|
||||
<base-container :height="318 + 338 + 16" :title="'产线产量及良品率'" :title-icon="'5_4'">
|
||||
<div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<base-container :height="318 + 338 + 16" :title="'产线产量及良品率'" :title-icon="'productLine'">
|
||||
<!-- <div style="width: 45%;position: absolute; top: 3em; right: 3em;">
|
||||
<top-radio-group />
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- 像下面这样表格里的limit值，也许可以用js动态计算出来 -->
|
||||
<double-y-chart :id=" 'doubleYChart' " :name-list="cxNameList" :data-list="cxDataList" :height="359"
|
||||
:show-legend="true" />
|
||||
<double-y-chart ref="productLineChart" :id=" 'doubleYChart' " :name-list="cxNameList"
|
||||
:data-list="cxDataList" :height="359" :show-legend="true" />
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -400,22 +398,22 @@ const legendData3 = [
|
||||
]
|
||||
const qualityYearTableProps = [
|
||||
{
|
||||
prop: 'eqName',
|
||||
prop: 'name',
|
||||
label: '设备名称'
|
||||
},
|
||||
{
|
||||
prop: 'eqCode',
|
||||
prop: 'code',
|
||||
label: '设备编码'
|
||||
},
|
||||
{
|
||||
prop: 'level',
|
||||
label: '报警级别',
|
||||
subcomponent: alarmLevel,
|
||||
prop: 'status',
|
||||
label: '设备状态',
|
||||
// subcomponent: alarmLevel,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
prop: 'content',
|
||||
label: '报警内容'
|
||||
prop: 'error',
|
||||
label: '是否故障'
|
||||
}
|
||||
]
|
||||
|
||||
@@ -439,206 +437,39 @@ const qualityYearList = [
|
||||
]
|
||||
const qualityMonthTableProps = [
|
||||
{
|
||||
prop: 'lineName',
|
||||
prop: 'productionLineName',
|
||||
label: '产线名'
|
||||
},
|
||||
{
|
||||
prop: 'process',
|
||||
prop: 'sectionName',
|
||||
label: '工序'
|
||||
},
|
||||
{
|
||||
prop: 'eqName',
|
||||
label: '设备名'
|
||||
prop: 'count',
|
||||
label: '损耗片数'
|
||||
},
|
||||
{
|
||||
prop: 'eqCode',
|
||||
label: '设备编码'
|
||||
prop: 'inspectionTypeName',
|
||||
label: '缺陷类型'
|
||||
},
|
||||
{
|
||||
prop: 'long',
|
||||
label: '总运行时长(h)'
|
||||
},
|
||||
// {
|
||||
// prop: 'createTime',
|
||||
// label: '保养时间'
|
||||
// },
|
||||
{
|
||||
prop: 'status',
|
||||
label: '设备状态'
|
||||
}
|
||||
// {
|
||||
// prop: 'nextCreateTime',
|
||||
// label: '下次保养时间'
|
||||
// }
|
||||
// {
|
||||
// prop: 'nextLong',
|
||||
// label: '距离保养时间(天)',
|
||||
// // subcomponent: nextDay,
|
||||
// align: 'center'
|
||||
// }
|
||||
]
|
||||
|
||||
const qualityMonthList = [
|
||||
{
|
||||
lineName: '钢一线',
|
||||
process: '41',
|
||||
eqName: '二次清洗机',
|
||||
eqCode: '2312312',
|
||||
long: '200',
|
||||
// createTime: '2021-02-25 12:00:01',
|
||||
status: '报警'
|
||||
// nextCreateTime: '2022-12-25 12:00:01',
|
||||
// nextLong: 365
|
||||
},
|
||||
{
|
||||
lineName: '钢二线',
|
||||
process: '41',
|
||||
eqName: '锻造机',
|
||||
eqCode: '43434',
|
||||
long: '252',
|
||||
// createTime: '2021-11-25 12:00:01',
|
||||
status: '正常'
|
||||
// nextCreateTime: '2022-12-25 12:00:01',
|
||||
// nextLong: 4
|
||||
},
|
||||
{
|
||||
lineName: '钢三线',
|
||||
process: '41',
|
||||
eqName: '设备3',
|
||||
eqCode: '23213212',
|
||||
long: '100',
|
||||
// createTime: '2021-10-25 12:00:01',
|
||||
status: '故障停机'
|
||||
// nextCreateTime: '2022-12-25 12:00:01',
|
||||
// nextLong: 24
|
||||
},
|
||||
{
|
||||
lineName: '钢四线',
|
||||
process: '41',
|
||||
eqName: '设备4',
|
||||
eqCode: '23213',
|
||||
long: '322',
|
||||
// createTime: '2021-02-25 12:00:01',
|
||||
status: '故障停机'
|
||||
// nextCreateTime: '2022-12-25 12:00:01',
|
||||
// nextLong: -36
|
||||
},
|
||||
{
|
||||
lineName: '钢五线',
|
||||
process: '41',
|
||||
eqName: '设备5',
|
||||
eqCode: '23121312',
|
||||
long: '232',
|
||||
// createTime: '2021-06-25 12:00:01',
|
||||
status: '待机'
|
||||
// nextCreateTime: '2022-12-25 12:00:01',
|
||||
// nextLong: 111
|
||||
},
|
||||
{
|
||||
lineName: '钢五线',
|
||||
process: '41',
|
||||
eqName: '设备5',
|
||||
eqCode: '23121312',
|
||||
long: '212',
|
||||
// createTime: '2021-06-25 12:00:01',
|
||||
status: '待机'
|
||||
// nextCreateTime: '2022-12-25 12:00:01',
|
||||
// nextLong: 111
|
||||
},
|
||||
{
|
||||
lineName: '钢五线',
|
||||
process: '41',
|
||||
eqName: '设备5',
|
||||
eqCode: '23121312',
|
||||
long: '123',
|
||||
// createTime: '2021-06-25 12:00:01',
|
||||
status: '镀膜机'
|
||||
// nextCreateTime: '2022-12-25 12:00:01',
|
||||
// nextLong: 111
|
||||
},
|
||||
{
|
||||
lineName: '钢五线',
|
||||
process: '41',
|
||||
eqName: '清洗机',
|
||||
eqCode: '23121312',
|
||||
long: '322',
|
||||
// createTime: '2021-06-25 12:00:01',
|
||||
status: 'Remote'
|
||||
// nextCreateTime: '2022-12-25 12:00:01',
|
||||
// nextLong: 111
|
||||
},
|
||||
{
|
||||
lineName: '钢五线',
|
||||
process: '41',
|
||||
eqName: '磨边机',
|
||||
eqCode: '23121312',
|
||||
long: '232',
|
||||
// createTime: '2021-06-25 12:00:01',
|
||||
status: 'Non-scheduled'
|
||||
// nextCreateTime: '2022-12-25 12:00:01',
|
||||
// nextLong: 111
|
||||
},
|
||||
{
|
||||
lineName: '钢五线',
|
||||
process: '41',
|
||||
eqName: '磨边机',
|
||||
eqCode: '23121312',
|
||||
long: '232',
|
||||
// createTime: '2021-06-25 12:00:01',
|
||||
status: 'Non-scheduled'
|
||||
// nextCreateTime: '2022-12-25 12:00:01',
|
||||
// nextLong: 111
|
||||
},
|
||||
{
|
||||
lineName: '钢五线',
|
||||
process: '41',
|
||||
eqName: '磨边机',
|
||||
eqCode: '23121312',
|
||||
long: '232',
|
||||
// createTime: '2021-06-25 12:00:01',
|
||||
status: 'Non-scheduled'
|
||||
// nextCreateTime: '2022-12-25 12:00:01',
|
||||
// nextLong: 111
|
||||
},
|
||||
{
|
||||
lineName: '钢五线',
|
||||
process: '41',
|
||||
eqName: '磨边机',
|
||||
eqCode: '23121312',
|
||||
long: '232',
|
||||
// createTime: '2021-06-25 12:00:01',
|
||||
status: 'Non-scheduled'
|
||||
// nextCreateTime: '2022-12-25 12:00:01',
|
||||
// nextLong: 111
|
||||
},
|
||||
{
|
||||
lineName: '钢五线',
|
||||
process: '41',
|
||||
eqName: '磨边机',
|
||||
eqCode: '23121312',
|
||||
long: '232',
|
||||
// createTime: '2021-06-25 12:00:01',
|
||||
status: 'Non-scheduled'
|
||||
// nextCreateTime: '2022-12-25 12:00:01',
|
||||
// nextLong: 111
|
||||
}
|
||||
]
|
||||
const orderProcessList = [
|
||||
{
|
||||
id: '1', outRate: '.8', name: '凯盛0322'
|
||||
}, {
|
||||
id: '1', outRate: '.4', name: '光伏玻璃4.0'
|
||||
id: '2', outRate: '.4', name: '光伏玻璃4.0'
|
||||
}, {
|
||||
id: '1', outRate: '.5', name: '光伏玻璃3.0'
|
||||
id: '3', outRate: '.5', name: '光伏玻璃3.0'
|
||||
}, {
|
||||
id: '1', outRate: '.3', name: '光伏玻璃2.0'
|
||||
id: '4', outRate: '.3', name: '光伏玻璃2.0'
|
||||
}, {
|
||||
id: '1', outRate: '.5', name: '光伏玻璃1.0'
|
||||
id: '5', outRate: '.5', name: '光伏玻璃1.0'
|
||||
}, {
|
||||
id: '1', outRate: '.8', name: '光伏玻璃'
|
||||
id: '6', outRate: '.8', name: '光伏玻璃'
|
||||
},
|
||||
{
|
||||
id: '1', outRate: '.8', name: '统计订单'
|
||||
id: '7', outRate: '.8', name: '统计订单'
|
||||
}
|
||||
]
|
||||
export default {
|
||||
@@ -661,11 +492,16 @@ export default {
|
||||
beilv2: 1,
|
||||
beilv: 1,
|
||||
value: 100,
|
||||
times:'',
|
||||
orderList:[],
|
||||
times: '',
|
||||
EnergyMonitoringNameList: [],
|
||||
equipmentList:[],
|
||||
EnergyMonitoringList: [],
|
||||
// offsetWidth: null,
|
||||
qualityYearTableProps,
|
||||
cxNameList,
|
||||
cxDataList,
|
||||
productLineList:[],
|
||||
qualityYearList,
|
||||
clientWidth: 0,
|
||||
containerWidth: 111111,
|
||||
@@ -673,7 +509,7 @@ export default {
|
||||
// orderProcessList: [],
|
||||
orderProcessList,
|
||||
qualityTableProps1,
|
||||
qualityMonthList,
|
||||
qualityMonthList:[],
|
||||
qualityMonthTableProps,
|
||||
modelMonth: '',
|
||||
qualityList1,
|
||||
@@ -719,8 +555,18 @@ export default {
|
||||
this.init()
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
this.initWebSocket()
|
||||
this.SJGInitWebSocket()
|
||||
this.getTimes()
|
||||
this.windowWidth(document.documentElement.clientWidth)
|
||||
const _this = this;
|
||||
_this.beilv2 = document.documentElement.clientWidth / 1920
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
_this.clientWidth = `${document.documentElement.clientWidth}`
|
||||
this.beilv2 = _this.clientWidth / 1920
|
||||
})()
|
||||
}
|
||||
// const _this = this;
|
||||
// window.onresize = () => {
|
||||
// return (() => {
|
||||
@@ -746,6 +592,23 @@ export default {
|
||||
// removeEventListener('resize', resizeFun)
|
||||
// },
|
||||
methods: {
|
||||
getList() {
|
||||
this.$axios.get(
|
||||
'base/core-production-line/listAll',
|
||||
'get',
|
||||
this.queryParams
|
||||
).then((res) => {
|
||||
// console.log('11111', res);
|
||||
this.productLineList = res.data
|
||||
})
|
||||
this.$axios.get(
|
||||
'base/quality-inspection-record/dayStatistics',
|
||||
'get',
|
||||
).then((res) => {
|
||||
// console.log('11111', res);
|
||||
this.qualityMonthList = res.data
|
||||
})
|
||||
},
|
||||
getTimes() {
|
||||
setInterval(this.getTimesInterval, 1000);
|
||||
},
|
||||
@@ -770,6 +633,174 @@ export default {
|
||||
//拼接格式化当前时间
|
||||
this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
|
||||
},
|
||||
initWebSocket() {
|
||||
if (typeof (WebSocket) === 'undefined') {
|
||||
alert('您的浏览器不支持WebSocket')
|
||||
} else {
|
||||
const wsUrl = `ws://10.70.2.2:8080/websocket/message?userId=EN${date}`
|
||||
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
|
||||
let date = new Date().valueOf()
|
||||
// const wsUrl = 'ws://10.70.2.2:8080/websocket/message?userId=EN111'
|
||||
// 实例化 WebSocket
|
||||
this.websocket = new WebSocket(wsUrl)
|
||||
// 监听 WebSocket 连接
|
||||
this.websocket.onopen = this.websocketOnOpen
|
||||
// 监听 WebSocket 错误信息
|
||||
this.websocket.onerror = this.websocketOnError
|
||||
// 监听 WebSocket 消息
|
||||
this.websocket.onmessage = this.websocketOnMessage
|
||||
// 监听 webSocket 断开信息
|
||||
this.websocket.onclose = this.websocketClose
|
||||
}
|
||||
},
|
||||
SJGInitWebSocket() {
|
||||
if (typeof (WebSocket) === 'undefined') {
|
||||
alert('您的浏览器不支持WebSocket')
|
||||
} else {
|
||||
// const wsUrl = `ws://10.70.2.2:8080/websocket/message?userId=EN${date}`
|
||||
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
|
||||
let date = new Date().valueOf()
|
||||
// console.log(date);
|
||||
const SJGWsUrl = `ws://10.70.2.2:8080/websocket/message?userId=SJG${date}`
|
||||
this.SJGWebsocket = new WebSocket(SJGWsUrl)
|
||||
// 监听 WebSocket 连接
|
||||
this.SJGWebsocket.onopen = this.SJGWebsocketOnOpen
|
||||
// 监听 WebSocket 错误信息
|
||||
this.SJGWebsocket.onerror = this.SJGWebsocketOnError
|
||||
// 监听 WebSocket 消息
|
||||
this.SJGWebsocket.onmessage = this.SJGWebsocketOnMessage
|
||||
// 监听 webSocket 断开信息
|
||||
this.SJGWebsocket.onclose = this.SJGWebsocketClose
|
||||
}
|
||||
},
|
||||
SJGWebsocketOnOpen() {
|
||||
console.log('socket连接成功')
|
||||
console.log(this.SJGWebsocket.onmessage);
|
||||
this.SJGWebsocket.onmessage()
|
||||
},
|
||||
// 连接建立失败重连
|
||||
SJGWebsocketOnError(e) {
|
||||
// console.log('11111', e)
|
||||
this.SJGInitWebSocket()
|
||||
},
|
||||
// 数据接收
|
||||
SJGWebsocketOnMessage(e) {
|
||||
// console.log(1111, e)
|
||||
this.SJGWsData = JSON.parse(e.data)
|
||||
// console.log(this.wsData.detData);
|
||||
// console.log('22222', this.wsData.data)
|
||||
if (this.SJGWsData.type === 'order') {
|
||||
this.orderList = this.SJGWsData.detData.map((ele, index) => {
|
||||
if (ele.progressRate != 1) {
|
||||
return {
|
||||
id: ele.id,
|
||||
name: ele.name,
|
||||
progressRate: ele.progressRate.toFixed(3)
|
||||
}
|
||||
}
|
||||
});
|
||||
console.log(this.orderList)
|
||||
} else if (this.SJGWsData.type === 'equipment') {
|
||||
this.equipmentList = this.SJGWsData.detData.map((ele, index) => {
|
||||
// if (ele.progressRate != 1) {
|
||||
return {
|
||||
id: ele.id,
|
||||
name: ele.name,
|
||||
code: ele.code,
|
||||
status: ele.status,
|
||||
error: ele.error=== true ? '是' : '否'
|
||||
}
|
||||
// }
|
||||
});
|
||||
// console.log(SJGWsData.orderList)
|
||||
} else if (this.SJGWsData.type === 'productline') {
|
||||
// console.log(this.wsData.detData);
|
||||
let nameList = []
|
||||
let passRateList = []
|
||||
let outputNumList = []
|
||||
|
||||
// console.log('2222222222', this.productLineList);
|
||||
this.productLineList.forEach((item) => {
|
||||
this.SJGWsData.detData.forEach((ele) => {
|
||||
if (item.id == ele.productionLineId) {
|
||||
nameList.push(item.name)
|
||||
}
|
||||
})
|
||||
})
|
||||
console.log(Array.from(new Set(nameList)))
|
||||
// progressRateList = EnergyNameList
|
||||
// let EnergyDataList = []
|
||||
this.SJGWsData.detData.forEach((ele) => {
|
||||
passRateList.push(ele.passRate *100
|
||||
)
|
||||
})
|
||||
this.SJGWsData.detData.forEach((ele) => {
|
||||
outputNumList.push(ele.outputNum
|
||||
)
|
||||
})
|
||||
// console.log(this.EnergyMonitoringNameList)
|
||||
// console.log(this.EnergyMonitoringList)
|
||||
// this.$nextTick(() => {
|
||||
this.$refs.productLineChart.initChart(nameList, passRateList, outputNumList)
|
||||
}
|
||||
},
|
||||
// 数据发送
|
||||
// SJGWebsocketSend() {
|
||||
// this.websocket.send('11111')
|
||||
// },
|
||||
// // 关闭
|
||||
// SJGWebsocketClose(e) {
|
||||
// console.log('WebSocket 断开连接', e)
|
||||
// },
|
||||
// // 连接建立之后执行send方法发送数据
|
||||
websocketOnOpen() {
|
||||
console.log('socket连接成功')
|
||||
this.websocket.onmessage()
|
||||
},
|
||||
// 连接建立失败重连
|
||||
websocketOnError(e) {
|
||||
console.log('11111', e)
|
||||
this.initWebSocket()
|
||||
},
|
||||
// 数据接收
|
||||
websocketOnMessage(e) {
|
||||
// console.log(1111, e)
|
||||
this.wsData = JSON.parse(e.data)
|
||||
// console.log('22222', this.wsData.data)
|
||||
if (this.wsData.type === 'EnergyMonitoring') {
|
||||
let EnergyNameList = []
|
||||
this.wsData.data.forEach((ele) => {
|
||||
EnergyNameList.push(ele.lineName)
|
||||
})
|
||||
this.EnergyMonitoringNameList = EnergyNameList
|
||||
let EnergyDataList = []
|
||||
this.wsData.data.forEach((ele) => {
|
||||
EnergyDataList.push(ele.useQuantity
|
||||
// {
|
||||
// type: 'bar',
|
||||
// data: ele.useQuantity,
|
||||
// barWidth: 6
|
||||
|
||||
// }
|
||||
)
|
||||
})
|
||||
this.EnergyMonitoringList = EnergyDataList
|
||||
console.log(EnergyDataList)
|
||||
// console.log(this.EnergyMonitoringNameList)
|
||||
// console.log(this.EnergyMonitoringList)
|
||||
// this.$nextTick(() => {
|
||||
this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList)
|
||||
// })
|
||||
}
|
||||
},
|
||||
// 数据发送
|
||||
websocketSend() {
|
||||
this.websocket.send('11111')
|
||||
},
|
||||
// 关闭
|
||||
websocketClose(e) {
|
||||
// console.log('WebSocket 断开连接', e)
|
||||
},
|
||||
windowWidth(value) {
|
||||
this.clientWidth = value
|
||||
this.beilv2 = this.clientWidth / 1920
|
||||
@@ -901,8 +932,8 @@ export default {
|
||||
top: 2em;
|
||||
}
|
||||
|
||||
// .container-main {
|
||||
// padding: 0px;
|
||||
// .container-main {
|
||||
// padding: 5px;
|
||||
// }
|
||||
|
||||
|
||||
|
||||
@@ -90,7 +90,7 @@ export default {
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间段',
|
||||
dateType: 'datetimerange',
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
rangeSeparator: '-',
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-18 14:16:25
|
||||
* @LastEditors: DY
|
||||
* @LastEditTime: 2023-11-23 18:45:15
|
||||
* @LastEditTime: 2023-12-26 16:59:25
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@@ -12,86 +12,162 @@
|
||||
:wrapper-closable="false"
|
||||
class="drawer"
|
||||
size="50%"> -->
|
||||
<div class="app-container">
|
||||
<div class="container">
|
||||
<!-- <small-title slot="title" :no-padding="true">
|
||||
{{ isdetail ? '详情' : !dataForm.id ? '新增' : '编辑' }}
|
||||
</small-title> -->
|
||||
<el-button style="float: right" type="primary" @click="goback()">返回</el-button>
|
||||
<div v-show="workOrderButton.length">
|
||||
<el-button v-for="(work, index) in workOrderButton" :key="index" type="primary" @click="init(work.id, true)">{{ work.name }}</el-button>
|
||||
<div v-show="workOrderButton.length" class="buttonDiv">
|
||||
<div style="display: flex; width: 100%;">
|
||||
<el-button v-show="showScroll" type="text" style="width: 30px; background: white; margin-right: 8px" @click="scrollLeft" icon="el-icon-caret-left"></el-button>
|
||||
<div ref="content" class="scrollDiv">
|
||||
<el-button style="border: none" v-for="(work, index) in workOrderButton" :key="index" @click="init(work.id, true)">{{ work.name }}</el-button>
|
||||
</div>
|
||||
<el-button v-show="showScroll" type="text" @click="scrolRight" style="width: 30px; background: white; margin-left: 8px" icon="el-icon-caret-right"></el-button>
|
||||
<el-button style="float: right" type="primary" size="small" plain @click="goback()">
|
||||
<svg-icon icon-class="return"/>返回
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div>
|
||||
<h1>工单编码：{{ dataForm.code }}</h1>
|
||||
</div>
|
||||
<small-title
|
||||
style="margin: 16px 0; padding-left: 8px"
|
||||
:no-padding="true">
|
||||
基本信息
|
||||
</small-title>
|
||||
<div class="formContent">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">工单名称:{{ dataForm.name }}</el-col>
|
||||
<el-col :span="8">工单来源:{{ dataForm.triggerOrigin === 1 ? 'MES' : dataForm.triggerOrigin === 2 ? 'ERP' : ''}}</el-col>
|
||||
<el-col :span="8">所属订单:
|
||||
<span v-for="(item, index) in orderList" :key="index" style="margin-right: 10px">{{ item.orderName }}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">产品名称:{{ dataForm.productName }}</el-col>
|
||||
<el-col :span="8">规 格:{{ dataForm.specifications }}</el-col>
|
||||
<el-col :span="8">计划生产数量:{{ dataForm.planQuantity }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">预计用时(小时):{{ dataForm.remainingTime }}</el-col>
|
||||
<el-col :span="8">计划投入数量:{{ dataForm.planAssignQuantity }}</el-col>
|
||||
<el-col :span="8">优先级:{{ fitlerP(dataForm.priority) }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">负责人:{{ dataForm.workers }}</el-col>
|
||||
<el-col :span="8">关联产线:
|
||||
<span v-for="(item, index) in dataForm.productLineNames" :key="index" style="margin-right: 10px">{{ item }}</span>
|
||||
</el-col>
|
||||
<el-col :span="8">物料计算方式:{{ dataForm.materialMethod === 1 ? '产品基础' : dataForm.materialMethod === 2 ? '工艺扩展' : '' }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">关联工艺:{{ dataForm.processFlowName }}</el-col>
|
||||
</el-row>
|
||||
<div class="card">
|
||||
<div class="boxTitle">
|
||||
<span class="blueTitle"></span>
|
||||
<span>工单编码：{{ dataForm.code }}</span>
|
||||
</div>
|
||||
<el-button v-if="!workOrderButton.length" style="float: right" type="primary" size="small" plain @click="goback()">
|
||||
<svg-icon icon-class="return"/>返回
|
||||
</el-button>
|
||||
<div class="formContent">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">工单名称</div>
|
||||
<div class="lightTip">{{ dataForm.name }}</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">工单来源</div>
|
||||
<div class="lightTip">{{ dataForm.triggerOrigin === 1 ? 'MES' : dataForm.triggerOrigin === 2 ? 'ERP' : ''}}</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">所属订单</div>
|
||||
<div class="lightTip">
|
||||
<span v-for="(item, index) in orderList" :key="index" style="margin-right: 10px">{{ item.orderName }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">产品名称</div>
|
||||
<div class="lightTip">{{ dataForm.productName }}</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">规 格</div>
|
||||
<div class="lightTip">{{ dataForm.specifications }}</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">计划生产数量</div>
|
||||
<div class="lightTip">{{ dataForm.planQuantity }}</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">预计用时(小时)</div>
|
||||
<div class="lightTip">{{ dataForm.remainingTime }}</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">计划投入数量</div>
|
||||
<div class="lightTip">{{ dataForm.planAssignQuantity }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">优先级</div>
|
||||
<div class="lightTip">{{ fitlerP(dataForm.priority) }}</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">负责人</div>
|
||||
<div class="lightTip">{{ dataForm.workers }}</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">关联产线</div>
|
||||
<div class="lightTip">
|
||||
<span v-for="(item, index) in dataForm.productLineNames" :key="index" style="margin-right: 10px">{{ item }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">物料计算方式</div>
|
||||
<div class="lightTip">{{ dataForm.materialMethod === 1 ? '产品基础' : dataForm.materialMethod === 2 ? '工艺扩展' : '' }}</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">关联工艺</div>
|
||||
<div class="lightTip">{{ dataForm.processFlowName }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<small-title
|
||||
style="margin: 16px 0; padding-left: 8px"
|
||||
:no-padding="true">
|
||||
生产信息
|
||||
</small-title>
|
||||
<div class="formContent">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">工单创建时间:{{ parseTime(dataForm.createTime) }}</el-col>
|
||||
<el-col :span="8">计划开始时间:{{ parseTime(dataForm.planStartTime) }}</el-col>
|
||||
<el-col :span="8">计划完成时间:{{ parseTime(dataForm.planFinishTime) }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">预计结束时间:{{ parseTime(dataForm.computeFinishTime) }}</el-col>
|
||||
<el-col :span="8">实际开始时间:{{ parseTime(dataForm.startProduceTime) }}</el-col>
|
||||
<el-col :span="8">实际完成时间:{{ parseTime(dataForm.finishProduceTime) }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">工单状态:{{ fitlerS(dataForm.status) }}</el-col>
|
||||
<el-col :span="8">实际投入数量:{{ dataForm.assignQuantity }}</el-col>
|
||||
<el-col :span="8">实际生产数量:{{ dataForm.actualQuantity }}</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">废片数量:{{ dataForm.nokQuantity }}</el-col>
|
||||
<el-col :span="8">检测瑕疵数:{{ }}</el-col>
|
||||
</el-row>
|
||||
<div class="card">
|
||||
<!-- <small-title
|
||||
style="margin: 16px 0; padding-left: 8px"
|
||||
:no-padding="true">
|
||||
生产信息
|
||||
</small-title> -->
|
||||
<div class="boxTitle">
|
||||
<span class="blueTitle"></span>
|
||||
<span>生产信息</span>
|
||||
</div>
|
||||
<div class="formContent">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">工单创建时间</div>
|
||||
<div class="lightTip">{{ parseTime(dataForm.createTime) }}</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">计划开始时间</div>
|
||||
<div class="lightTip">{{ parseTime(dataForm.planStartTime) }}</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">计划完成时间</div>
|
||||
<div class="lightTip">{{ parseTime(dataForm.planFinishTime) }}</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">预计结束时间</div>
|
||||
<div class="lightTip">{{ parseTime(dataForm.computeFinishTime) }}</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">实际开始时间</div>
|
||||
<div class="lightTip">{{ parseTime(dataForm.startProduceTime) }}</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">实际完成时间</div>
|
||||
<div class="lightTip">{{ parseTime(dataForm.finishProduceTime) }}</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">工单状态</div>
|
||||
<div class="lightTip">{{ fitlerS(dataForm.status) }}</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">实际投入数量</div>
|
||||
<div class="lightTip">{{ dataForm.assignQuantity }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">实际生产数量</div>
|
||||
<div class="lightTip">{{ dataForm.actualQuantity }}</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">废片数量</div>
|
||||
<div class="lightTip">{{ dataForm.nokQuantity }}</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="blodTip">检测瑕疵数</div>
|
||||
<div class="lightTip">{{ }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="attr-list">
|
||||
<small-title
|
||||
style="margin: 16px 0; padding-left: 8px"
|
||||
:no-padding="true">
|
||||
订单相关信息
|
||||
</small-title>
|
||||
<div class="card" style="padding-bottom: 16px; margin-bottom: 10px">
|
||||
<div class="boxTitle">
|
||||
<span class="blueTitle"></span>
|
||||
<span>订单相关信息</span>
|
||||
</div>
|
||||
<base-table
|
||||
:table-props="tableProps"
|
||||
:page="listQuery.pageNo"
|
||||
@@ -114,12 +190,11 @@
|
||||
@pagination="getList" /> -->
|
||||
</div>
|
||||
|
||||
<div class="attr-list">
|
||||
<small-title
|
||||
style="margin: 16px 0; padding-left: 8px"
|
||||
:no-padding="true">
|
||||
预计用料信息
|
||||
</small-title>
|
||||
<div class="card" style="padding-bottom: 16px;">
|
||||
<div class="boxTitle">
|
||||
<span class="blueTitle"></span>
|
||||
<span>预计用料信息</span>
|
||||
</div>
|
||||
<base-table
|
||||
:table-props="tableProps1"
|
||||
:page="listQuery1.pageNo"
|
||||
@@ -227,8 +302,11 @@ export default {
|
||||
// orderArray: [],
|
||||
visible: false,
|
||||
isdetail: false,
|
||||
showScroll: false,
|
||||
workOrderButton: [],
|
||||
processFlowList: []
|
||||
processFlowList: [],
|
||||
timer: null
|
||||
// tableH: this.tableHeight(510) / 2
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@@ -244,13 +322,38 @@ export default {
|
||||
name: work.name
|
||||
}
|
||||
})
|
||||
const contentRef = this.$refs.content
|
||||
if (contentRef.scrollWidth > contentRef.clientWidth) {
|
||||
this.showScroll = true
|
||||
} else {
|
||||
this.showScroll = false
|
||||
}
|
||||
console.log(contentRef.scrollWidth, contentRef.clientWidth)
|
||||
this.init(this.workOrderButton[0].id, true)
|
||||
})
|
||||
} else {
|
||||
} else {
|
||||
this.init(this.$route.query.id, true)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scrolRight() {
|
||||
// let contentRef = this.$refs.content
|
||||
// console.log('你好啊啊', contentRef.scrollWidth, contentRef.clientWidth)
|
||||
this.stopScroll()
|
||||
this.timer = setTimeout(() => {
|
||||
this.$refs.content.scrollLeft += 50
|
||||
}, 100)
|
||||
// if (contentRef.scrollWidth > contentRef.clientWi)
|
||||
},
|
||||
scrollLeft() {
|
||||
this.stopScroll()
|
||||
this.timer = setTimeout(() => {
|
||||
this.$refs.content.scrollLeft -= 50
|
||||
}, 100)
|
||||
},
|
||||
stopScroll() {
|
||||
clearTimeout(this.timer)
|
||||
},
|
||||
getDict() {
|
||||
// 工艺
|
||||
getProcessFlowList().then(res => {
|
||||
@@ -391,59 +494,26 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.drawer >>> .el-drawer {
|
||||
border-radius: 8px 0 0 8px;
|
||||
.scrollDiv {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
/* height: 50px; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* padding-bottom: -10px; */
|
||||
}
|
||||
|
||||
.drawer >>> .el-form-item__label {
|
||||
padding: 0;
|
||||
.scrollDiv::-webkit-scrollbar-track {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.drawer >>> .el-drawer__header {
|
||||
margin: 0;
|
||||
padding: 32px 32px 24px;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
}
|
||||
.drawer >>> .el-drawer__body {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
.buttonDiv {
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.drawer >>> .content {
|
||||
padding: 10px 24px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* height: 100%; */
|
||||
}
|
||||
|
||||
.drawer >>> .visual-part {
|
||||
flex: 1 auto;
|
||||
max-height: 76vh;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
padding-right: 10px; /* 调整滚动条样式 */
|
||||
}
|
||||
|
||||
.drawer >>> .el-form,
|
||||
.drawer >>> .attr-list {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.drawer-body__footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 18px;
|
||||
}
|
||||
.formContent {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
padding: 0 14px;
|
||||
}
|
||||
.action_btn {
|
||||
float: right;
|
||||
@@ -453,4 +523,43 @@ export default {
|
||||
.add {
|
||||
color: #0b58ff;
|
||||
}
|
||||
.blodTip {
|
||||
height: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgba(0,0,0,0.85);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.lightTip {
|
||||
/* height: 16px; */
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(102,102,102,0.75);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.container {
|
||||
background-color: rgb(242, 244, 249);
|
||||
}
|
||||
.card {
|
||||
padding: 16px 16px 0 16px;
|
||||
background-color: #fff;
|
||||
border-radius: 9px;
|
||||
}
|
||||
.boxTitle {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
margin:0 10px 20px 0;
|
||||
}
|
||||
.blueTitle {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
background-color: #0B58FF;
|
||||
border-radius: 1px;
|
||||
margin-right: 8px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -84,7 +84,7 @@ export default {
|
||||
label: '时间',
|
||||
dateType: 'monthrange',
|
||||
format: 'yyyy-MM',
|
||||
valueFormat: 'yyyy-MM-ddTHH:mm:ss',
|
||||
valueFormat: 'timestamp',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
|
||||
BIN
src/views/databoard/assets/check.png
Normal file
BIN
src/views/databoard/assets/check.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 492 B |
BIN
src/views/databoard/assets/energeCost.png
Normal file
BIN
src/views/databoard/assets/energeCost.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 322 B |
BIN
src/views/databoard/assets/msg.png
Normal file
BIN
src/views/databoard/assets/msg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 507 B |
@@ -11,12 +11,12 @@
|
||||
<i
|
||||
class=""
|
||||
style="display: inline-block; margin-left: 12px; padding-top: 4px">
|
||||
<img :src="imgSrc" width="18" height="16" alt="" />
|
||||
<img :src="imgSrc" width="20" height="20" alt="" />
|
||||
</i>
|
||||
<span
|
||||
style="
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-size: 24px;
|
||||
line-height: 2;
|
||||
margin-left: 6px;
|
||||
display: inline-block;
|
||||
@@ -48,11 +48,11 @@ export default {
|
||||
case '风机运行频率':
|
||||
return require('../assets/flow.png');
|
||||
case 'ISRA缺陷检测':
|
||||
return require('../assets/gas.png');
|
||||
return require('../assets/check.png');
|
||||
case '能耗':
|
||||
return require('../assets/gas.png');
|
||||
return require('../assets/energeCost.png');
|
||||
case '窑炉信息':
|
||||
return require('../assets/gas.png');
|
||||
return require('../assets/msg.png');
|
||||
case '烟气处理':
|
||||
return require('../assets/gas.png');
|
||||
}
|
||||
|
||||
@@ -11,9 +11,11 @@
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'GasChart',
|
||||
mixins: [resize],
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
@@ -110,11 +112,13 @@ export default {
|
||||
},
|
||||
};
|
||||
},
|
||||
inject: ['resizeChart'],
|
||||
computed: {
|
||||
sidebarStatus() {
|
||||
return this.$store.state.app.sidebar.opened;
|
||||
},
|
||||
gasChartMsg() {
|
||||
return this.$store.state.websocket.gasInfo
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
sidebarStatus(val) {
|
||||
@@ -126,10 +130,14 @@ export default {
|
||||
this.chart.setOption(this.option);
|
||||
}, 500);
|
||||
},
|
||||
// resizeChart(val) {
|
||||
// console.log('resizeChart', val);
|
||||
// val && this.chart && this.chart.resize();
|
||||
// },
|
||||
gasChartMsg: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log(newVal)
|
||||
// this.chartData = newVal
|
||||
console.log('newVal============')
|
||||
// this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$el.addEventListener('resize', () => {
|
||||
|
||||
@@ -7,69 +7,93 @@
|
||||
|
||||
<template>
|
||||
<header class="kiln-header">
|
||||
<h1
|
||||
style="
|
||||
font-size: 32px;
|
||||
margin-bottom: 36px;
|
||||
color: #0ee8e4;
|
||||
letter-spacing: 5px;
|
||||
">
|
||||
窑炉生产运行驾驶舱
|
||||
</h1>
|
||||
<h1>{{topTitle}}</h1>
|
||||
<!-- left: 312px; -->
|
||||
<div
|
||||
class="firm"
|
||||
style="
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 16.5vw;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
">
|
||||
class="firm">
|
||||
单位: 河南汇融科技服务有限公司
|
||||
</div>
|
||||
<div
|
||||
class="datetime"
|
||||
style="
|
||||
position: absolute;
|
||||
bottom: 18px;
|
||||
right: 15.5vw;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
">
|
||||
<DateBtnGroup />
|
||||
class="datetime">
|
||||
<!-- <DateBtnGroup /> -->
|
||||
{{ new Date().toLocaleString() }}
|
||||
</div>
|
||||
<el-button
|
||||
type="text"
|
||||
class="screen-btn"
|
||||
@click="changeFullScreen"
|
||||
>
|
||||
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
|
||||
<svg-icon v-else icon-class="fullScreenView" />
|
||||
</el-button>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DateBtnGroup from './DateBtnGroup.vue';
|
||||
// import DateBtnGroup from './DateBtnGroup.vue';
|
||||
|
||||
export default {
|
||||
name: 'KilnHeader',
|
||||
components: { DateBtnGroup },
|
||||
props: {},
|
||||
// components: { DateBtnGroup },
|
||||
props: {
|
||||
isFullScreen:false,
|
||||
topTitle: ''
|
||||
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
methods: {
|
||||
changeFullScreen() {
|
||||
this.$emit('screenfullChange')
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.kiln-header {
|
||||
background: url('../assets/head.png') no-repeat;
|
||||
height: 88px;
|
||||
height: 96px;
|
||||
background-size: 100%;
|
||||
background-position: 0 0;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
position: relative;
|
||||
h1{
|
||||
font-size: 32px;
|
||||
margin-bottom: 36px;
|
||||
color: #0ee8e4;
|
||||
letter-spacing: 8px;
|
||||
}
|
||||
.firm{
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
left: 325px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.datetime {
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
right: 240px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.screen-btn{
|
||||
color: #00fff0;
|
||||
font-size: 32px;
|
||||
position: absolute;
|
||||
right: 32px;
|
||||
top:28px
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -11,21 +11,32 @@
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import resize from './../mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'ISRAChart',
|
||||
mixins: [resize],
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
|
||||
chartData: [],
|
||||
option: {
|
||||
color: ['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
legend: {
|
||||
bottom: '3%',
|
||||
left: 'center',
|
||||
icon: 'circle',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 11234,
|
||||
text: 0,
|
||||
subtext: '总数',
|
||||
top: '43%',
|
||||
left: '49%',
|
||||
@@ -37,48 +48,95 @@ export default {
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 16,
|
||||
color: '#fff7',
|
||||
color: '#fff00',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
series: []
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
activated() {
|
||||
},
|
||||
computed: {
|
||||
israChartMsg() {
|
||||
return this.$store.state.websocket.israKiln
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
israChartMsg: {
|
||||
handler(newVal, oldVal) {
|
||||
console.log(newVal)
|
||||
this.chartData = newVal
|
||||
console.log('newVal============')
|
||||
this.updateChart()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el);
|
||||
this.chart.setOption(this.option);
|
||||
},
|
||||
updateChart() {
|
||||
console.log('update')
|
||||
let num = 0
|
||||
this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
|
||||
num+=i.num
|
||||
})
|
||||
this.chart.setOption({
|
||||
title:{
|
||||
text: num,
|
||||
subtext: '总数',
|
||||
top: '43%',
|
||||
left: '49%',
|
||||
textAlign: 'center',
|
||||
textStyle: {
|
||||
fontSize: 32,
|
||||
lineHeight: 16,
|
||||
color: '#fff',
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 16,
|
||||
color: '#fff00',
|
||||
},
|
||||
},
|
||||
series:[{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['60%', '85%'],
|
||||
radius: ['45%', '65%'],
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'outside',
|
||||
formatter: ({ dataIndex, percent }) => {
|
||||
// console.log(
|
||||
// ['#2760ff', '#518eec', '#0ee8e4', '#ddb523'][dataIndex % 4],
|
||||
// percent
|
||||
// );
|
||||
const styleName = ['a', 'b', 'c', 'd'][dataIndex % 4];
|
||||
return `{${styleName}|${percent}%}`;
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
color: '#2760ff',
|
||||
fontSize: 18,
|
||||
fontSize: 24,
|
||||
borderWidth: 0,
|
||||
textBorderWidth: 0,
|
||||
},
|
||||
b: {
|
||||
color: '#518eec',
|
||||
fontSize: 18,
|
||||
fontSize: 24,
|
||||
borderWidth: 0,
|
||||
textBorderWidth: 0,
|
||||
},
|
||||
c: {
|
||||
color: '#0ee8e4',
|
||||
fontSize: 18,
|
||||
fontSize: 24,
|
||||
borderWidth: 0,
|
||||
textBorderWidth: 0,
|
||||
},
|
||||
d: {
|
||||
color: '#ddb523',
|
||||
fontSize: 18,
|
||||
fontSize: 24,
|
||||
borderWidth: 0,
|
||||
textBorderWidth: 0,
|
||||
},
|
||||
@@ -88,141 +146,28 @@ export default {
|
||||
show: true,
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: 12,
|
||||
// borderColor: 'transparent',
|
||||
// borderWidth: 20
|
||||
borderRadius: 12
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 1048,
|
||||
name: '缺陷1',
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 1,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#2760ff', // 0% 处的颜色
|
||||
},
|
||||
// {
|
||||
// offset: 0.6,
|
||||
// color: 'transparent', // 80% 处的颜色
|
||||
// },
|
||||
{
|
||||
offset: 1,
|
||||
color: '#2760ff33', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 735,
|
||||
name: '缺陷2',
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#518eec', // 0% 处的颜色
|
||||
},
|
||||
// {
|
||||
// offset: 0.6,
|
||||
// color: 'transparent', // 80% 处的颜色
|
||||
// },
|
||||
{
|
||||
offset: 1,
|
||||
color: '#518eec33', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 580,
|
||||
name: '缺陷3',
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#0ee8e4', // 0% 处的颜色
|
||||
},
|
||||
// {
|
||||
// offset: 0.6,
|
||||
// color: 'transparent', // 80% 处的颜色
|
||||
// },
|
||||
{
|
||||
offset: 1,
|
||||
color: '#0ee8e433', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 484,
|
||||
name: '缺陷4',
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 1,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#ddb523', // 0% 处的颜色
|
||||
},
|
||||
// {
|
||||
// offset: 0.6,
|
||||
// color: 'transparent', // 70% 处的颜色
|
||||
// },
|
||||
{
|
||||
offset: 1,
|
||||
color: '#ddb52333', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
},
|
||||
activated() {
|
||||
// this.initChart();
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el);
|
||||
this.chart.setOption(this.option);
|
||||
},
|
||||
data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
|
||||
name:item.name,
|
||||
value: item.num,
|
||||
itemStyle:{
|
||||
color:{
|
||||
type: 'linear',
|
||||
x: 1,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
global: false,
|
||||
colorStops:[
|
||||
{offset: 0,color: this.colors[index%4]},
|
||||
{offset: 1,color: this.colors[index%4]+'33'}
|
||||
]
|
||||
}
|
||||
}
|
||||
}))}]
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -29,7 +29,9 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -36,7 +36,7 @@ export default {
|
||||
.switcher {
|
||||
:deep(.el-switch__core) {
|
||||
border: none;
|
||||
background-color: #213d566b;
|
||||
background-color:rgba(3, 35, 60, 1);
|
||||
|
||||
&::after {
|
||||
background-color: #02457e;
|
||||
@@ -46,7 +46,7 @@ export default {
|
||||
:deep(.is-checked) {
|
||||
.el-switch__core {
|
||||
border: none;
|
||||
background-color: #b4fffc;
|
||||
background-color: rgba(180, 255, 252, 0.71);
|
||||
|
||||
&::after {
|
||||
background-color: #08d8cd;
|
||||
|
||||
29
src/views/databoard/deepProcessing/BottomTwo.vue
Normal file
29
src/views/databoard/deepProcessing/BottomTwo.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div
|
||||
class="bottom-two"
|
||||
style="
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-rows: 462px 462px;
|
||||
">
|
||||
<OrderStatus />
|
||||
<YieldRate />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OrderStatus from './OrderStatus.vue';
|
||||
import YieldRate from './YieldRate.vue';
|
||||
export default {
|
||||
name: 'BottomTwo',
|
||||
components: { OrderStatus, YieldRate },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
14
src/views/databoard/deepProcessing/OrderStatus.vue
Normal file
14
src/views/databoard/deepProcessing/OrderStatus.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="订单完成情况" size="small" style="">
|
||||
digndna
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
export default {
|
||||
name: 'OrderStatus',
|
||||
components: { Container },
|
||||
}
|
||||
</script>
|
||||
29
src/views/databoard/deepProcessing/TopThree.vue
Normal file
29
src/views/databoard/deepProcessing/TopThree.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div
|
||||
class="top-three"
|
||||
style="
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-rows: 462px 462px;
|
||||
">
|
||||
<OrderStatus />
|
||||
<YieldRate />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OrderStatus from './OrderStatus.vue';
|
||||
import YieldRate from './YieldRate.vue';
|
||||
export default {
|
||||
name: 'TopThree',
|
||||
components: { OrderStatus, YieldRate },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
14
src/views/databoard/deepProcessing/YieldRate.vue
Normal file
14
src/views/databoard/deepProcessing/YieldRate.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="本日生产良品率" size="small" style="">
|
||||
0000987
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
export default {
|
||||
name: 'YieldRate',
|
||||
components: { Container },
|
||||
}
|
||||
</script>
|
||||
145
src/views/databoard/deepProcessing/index.vue
Normal file
145
src/views/databoard/deepProcessing/index.vue
Normal file
@@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div id='deepProcessingContainerB' ref='deepProcessingContainerB' style="width: 100%;height: 100%;">
|
||||
<div
|
||||
id='deepProcessingContainer'
|
||||
ref='deepProcessingContainer'
|
||||
class="deepProcessingBoard"
|
||||
style="
|
||||
position: absolute;
|
||||
transform-origin: 16px 8px;
|
||||
font-size: 16px;
|
||||
top: -8px;
|
||||
left: -16px;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
"
|
||||
:style="{transform:'scale('+scaleNum+')'}">
|
||||
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='全厂总览驾驶舱'/>
|
||||
<div
|
||||
class="main-body"
|
||||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
|
||||
<div class="left-side" style="flex: 1">
|
||||
<TopThree />
|
||||
</div>
|
||||
<div class="middle-side" style="flex: 1">
|
||||
<BottomTwo />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import KHeader from '../components/Header';
|
||||
import TopThree from './TopThree';
|
||||
import BottomTwo from './BottomTwo';
|
||||
import screenfull from 'screenfull'
|
||||
import { debounce } from '@/utils/debounce'
|
||||
import { getDcsMsg, getMesMsg } from './../utils/wsInterface'
|
||||
|
||||
export default {
|
||||
name: 'deepProcessingBoard',
|
||||
components: {
|
||||
KHeader,
|
||||
TopThree,
|
||||
BottomTwo
|
||||
},
|
||||
// provide() {
|
||||
// return {
|
||||
// resizeChart: null,
|
||||
// };
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
scaleNum: 0.8
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
destroy() {
|
||||
this.destroy()
|
||||
},
|
||||
mounted() {
|
||||
this.boxReset = debounce(() => {
|
||||
this.resetSize()
|
||||
}, 300)
|
||||
this.boxReset()
|
||||
window.addEventListener('resize', () => {
|
||||
this.boxReset()
|
||||
})
|
||||
// closeWebsocket()
|
||||
// getDcsMsg()
|
||||
// getMesMsg()
|
||||
console.log('mounted...........')
|
||||
},
|
||||
destroyed() {
|
||||
console.log('destroyed...........')
|
||||
},
|
||||
methods: {
|
||||
change() {
|
||||
this.isFullScreen = screenfull.isFullscreen
|
||||
},
|
||||
init() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.on('change', this.change)
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.off('change', this.change)
|
||||
}
|
||||
},
|
||||
// 全屏
|
||||
screenfullChange() {
|
||||
if (!screenfull.isEnabled) {
|
||||
this.$message({
|
||||
message: 'you browser can not work',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
screenfull.toggle(this.$refs.wholePlantContainerB)
|
||||
},
|
||||
resetSize() {
|
||||
let wholePlantContainerBox = document.querySelector('#wholePlantContainer')
|
||||
let rw = parseFloat(window.innerWidth)
|
||||
let rh = parseFloat(window.innerHeight)
|
||||
let bw = parseFloat(wholePlantContainerBox.style.width)
|
||||
let bh = parseFloat(wholePlantContainerBox.style.height)
|
||||
let wx = 0
|
||||
let hx = 0
|
||||
if (screenfull.isFullscreen) {
|
||||
console.log('全屏')
|
||||
wx = rw / bw
|
||||
hx = rh / bh
|
||||
console.log(this.scaleNum)
|
||||
}else{
|
||||
console.log('非全屏')
|
||||
console.log(this.$store.state.app.sidebar.opened)
|
||||
if (this.$store.state.app.sidebar.opened) {
|
||||
wx = (rw-264) / bw
|
||||
hx = (rh-116) / bh
|
||||
}else{
|
||||
wx = (rw-78) / bw
|
||||
hx = (rh-116) / bh
|
||||
}
|
||||
}
|
||||
this.scaleNum = wx
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.deepProcessingBoard {
|
||||
background: url(../assets/bg.png) no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 0 0;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -12,13 +12,13 @@
|
||||
<div class="" style="flex: 2; padding: 8px">
|
||||
<div
|
||||
class="header-line"
|
||||
style="margin-bottom: 8px; display: flex; align-items: center">
|
||||
style="margin: 8px 0 16px; display: flex; align-items: center">
|
||||
<h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 12px">
|
||||
烟气趋势图
|
||||
能耗趋势图
|
||||
</h2>
|
||||
<Switcher />
|
||||
<!-- <Switcher /> -->
|
||||
<div>
|
||||
<span class="lgd lgd-total">总量</span>
|
||||
<!-- <span class="lgd lgd-total">总量</span> -->
|
||||
<!-- <span class="lgd lgd-day">白班</span>
|
||||
<span class="lgd lgd-night">夜班</span> -->
|
||||
</div>
|
||||
@@ -31,10 +31,10 @@
|
||||
justify-content: space-between;
|
||||
">
|
||||
<SelectorBtnGroup
|
||||
:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
|
||||
<SelectorBtnGroup :options="['日', '周', '月', '年']" />
|
||||
:options="['电耗能', '天然气I', '天然气II']" @emitFun='toggleType'/>
|
||||
<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate'/>
|
||||
</div>
|
||||
<div class="chart" style="height: 150px; margin-top: 8px;">
|
||||
<div class="chart" style="height: 200px; margin-top: 8px;">
|
||||
<GasChart />
|
||||
</div>
|
||||
</div>
|
||||
@@ -45,8 +45,8 @@
|
||||
import Container from '../components/Container.vue';
|
||||
import ShadowRect from '../components/ShadowRect.vue';
|
||||
import SplitLine from '../components/line';
|
||||
import Switcher from '../components/Switcher.vue';
|
||||
import EnergeTop from './EnergeTop.vue';
|
||||
import Switcher from '../components/Switcher';
|
||||
import EnergeTop from './EnergeTop';
|
||||
import GasChart from '../components/GasChart.vue';
|
||||
import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
|
||||
export default {
|
||||
@@ -65,7 +65,16 @@ export default {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
methods: {
|
||||
// 切换能源
|
||||
toggleType() {
|
||||
|
||||
},
|
||||
// 切换时间
|
||||
toggleDate() {
|
||||
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -15,6 +15,7 @@
|
||||
grid-template-rows: auto;
|
||||
gap: 8px;
|
||||
padding: 4px;
|
||||
margin-bottom: 6px;
|
||||
">
|
||||
<ShadowRect
|
||||
style="grid-row: 1 / 3; flex-direction: column; justify-content: center">
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
<template>
|
||||
<Container name="风机运行频率" size="middle" style="">
|
||||
<div class="" style="position: absolute; top: 18px; left: 180px">
|
||||
<div class="" style="position: absolute; top: 26px; left: 220px">
|
||||
<Switcher />
|
||||
</div>
|
||||
<div
|
||||
@@ -17,22 +17,22 @@
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-auto-rows: auto;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
">
|
||||
<ShadowRect v-for="n in 14" :key="n" :rounded="false">
|
||||
<ShadowRect v-for="(value, key, i) in fanFrequencyInfo" :key="i" :rounded="false">
|
||||
<span
|
||||
style="
|
||||
font-size: 16px;
|
||||
line-height: 1.24;
|
||||
flex: 1.2;
|
||||
font-size: 18px;
|
||||
line-height: 1.1;
|
||||
flex: 3.5;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
letter-spacing: 1px;
|
||||
">
|
||||
{{ n }}#风机
|
||||
{{ key }}:
|
||||
</span>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">
|
||||
{{ Math.floor(Math.random() * 100) }}Hz
|
||||
<span style="font-size: 20px; line-height: 1; flex: 1">
|
||||
{{ value }}Hz
|
||||
</span>
|
||||
</ShadowRect>
|
||||
</div>
|
||||
@@ -42,16 +42,24 @@
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
import ShadowRect from '../components/ShadowRect.vue';
|
||||
import Switcher from '../components/Switcher.vue';
|
||||
import Switcher from '../components/Switcher';
|
||||
export default {
|
||||
name: 'FanSequence',
|
||||
components: { Container, ShadowRect, Switcher },
|
||||
computed: {
|
||||
fanFrequencyInfo() {
|
||||
return this.$store.state.websocket.fanFrequencyInfo
|
||||
}
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
<ShadowRect>
|
||||
<span
|
||||
style="
|
||||
font-size: 16px;
|
||||
font-size: 20px;
|
||||
line-height: 1.24;
|
||||
flex: 1.2;
|
||||
text-align: right;
|
||||
@@ -30,12 +30,12 @@
|
||||
">
|
||||
氧气含量
|
||||
</span>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
|
||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">82%</span>
|
||||
</ShadowRect>
|
||||
<ShadowRect>
|
||||
<div
|
||||
style="
|
||||
font-size: 16px;
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
flex: 1.2;
|
||||
text-align: right;
|
||||
@@ -45,13 +45,13 @@
|
||||
<p style="margin: 0; line-height: inherit">一氧化氮</p>
|
||||
<p style="margin: 0; line-height: inherit">排放浓度</p>
|
||||
</div>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
|
||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">82%</span>
|
||||
</ShadowRect>
|
||||
|
||||
<ShadowRect>
|
||||
<div
|
||||
style="
|
||||
font-size: 16px;
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
flex: 1.2;
|
||||
text-align: right;
|
||||
@@ -61,13 +61,13 @@
|
||||
<p style="margin: 0; line-height: inherit">二氧化硫</p>
|
||||
<p style="margin: 0; line-height: inherit">排放浓度</p>
|
||||
</div>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
|
||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">59mg/m³</span>
|
||||
</ShadowRect>
|
||||
|
||||
<ShadowRect>
|
||||
<div
|
||||
style="
|
||||
font-size: 16px;
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
flex: 1.2;
|
||||
text-align: right;
|
||||
@@ -77,22 +77,22 @@
|
||||
<p style="margin: 0; line-height: inherit">二氧化氮</p>
|
||||
<p style="margin: 0; line-height: inherit">排放浓度</p>
|
||||
</div>
|
||||
<span style="font-size: 16px; line-height: 1.24; flex: 1">82%</span>
|
||||
<span style="font-size: 20px; line-height: 1.24; flex: 1">82%</span>
|
||||
</ShadowRect>
|
||||
</div>
|
||||
<KilnLine :horizontal="true" />
|
||||
<div class="" style="flex: 2; padding: 8px">
|
||||
<div
|
||||
class="header-line"
|
||||
style="margin-bottom: 8px; display: flex; align-items: center">
|
||||
<h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 12px">
|
||||
style="margin-bottom: 10px; display: flex; align-items: center">
|
||||
<h2 class="" style="margin: 5px 0; color: #0ee8fe; margin-right: 12px">
|
||||
烟气趋势图
|
||||
</h2>
|
||||
<Switcher />
|
||||
<!-- <Switcher /> -->
|
||||
<div>
|
||||
<span class="lgd lgd-total">总量</span>
|
||||
<span class="lgd lgd-day">白班</span>
|
||||
<span class="lgd lgd-night">夜班</span>
|
||||
<!-- <span class="lgd lgd-total">总量</span> -->
|
||||
<!-- <span class="lgd lgd-day">白班</span>
|
||||
<span class="lgd lgd-night">夜班</span> -->
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@@ -103,10 +103,10 @@
|
||||
justify-content: space-between;
|
||||
">
|
||||
<SelectorBtnGroup
|
||||
:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
|
||||
:options="['氧气含量', '二氧化硫', '一氧化氮', '二氧化氮']" />
|
||||
<SelectorBtnGroup :options="['日', '周', '月', '年']" />
|
||||
</div>
|
||||
<div class="chart" style="height: 220px">
|
||||
<div class="chart" style="height: 250px;margin-top: 10px;">
|
||||
<GasChart />
|
||||
</div>
|
||||
</div>
|
||||
@@ -118,7 +118,7 @@
|
||||
import Container from '../components/Container.vue';
|
||||
import ShadowRect from '../components/ShadowRect.vue';
|
||||
import KilnLine from '../components/line';
|
||||
import Switcher from '../components/Switcher.vue';
|
||||
import Switcher from '../components/Switcher';
|
||||
import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
|
||||
import GasChart from '../components/GasChart.vue';
|
||||
|
||||
|
||||
@@ -7,9 +7,10 @@
|
||||
|
||||
<template>
|
||||
<Container name="ISRA缺陷检测" size="middle" style="">
|
||||
<div style="padding: 12px; display: flex; flex-direction: column; gap: 8px; height: 100%;">
|
||||
<ISRAChart />
|
||||
<!-- <div style="padding: 12px; display: flex; flex-direction: column; gap: 8px; height: 100%;">
|
||||
<div class="f" style="flex: 9;">
|
||||
<ISRAChart />
|
||||
|
||||
</div>
|
||||
<ul
|
||||
class="legend"
|
||||
@@ -27,7 +28,7 @@
|
||||
<li class="fault-3">缺陷3</li>
|
||||
<li class="fault-4">缺陷4</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> -->
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -17,22 +17,37 @@
|
||||
grid-auto-rows: auto;
|
||||
gap: 8px;
|
||||
">
|
||||
<ShadowRect v-for="info in kilnInfo" :key="info.name" :rounded="false">
|
||||
<span
|
||||
style="
|
||||
font-size: 16px;
|
||||
line-height: 1.45;
|
||||
flex: 1.2;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
letter-spacing: 1px;
|
||||
">
|
||||
{{ info.name }}
|
||||
</span>
|
||||
<span style="font-size: 16px; line-height: 1.45; flex: 1">
|
||||
{{ info.value }}
|
||||
<!-- {{ Math.floor(Math.random() * 100) }}Hz -->
|
||||
</span>
|
||||
<ShadowRect :rounded="false">
|
||||
<span class="kiln-info-item">窑炉压力:</span>
|
||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.kilnPressure }}</span>
|
||||
</ShadowRect>
|
||||
<ShadowRect :rounded="false">
|
||||
<span class="kiln-info-item">循环水温度:</span>
|
||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.waterTemp }}</span>
|
||||
</ShadowRect>
|
||||
<ShadowRect :rounded="false">
|
||||
<span class="kiln-info-item">循环水流量:</span>
|
||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.waterFlow }}</span>
|
||||
</ShadowRect>
|
||||
<ShadowRect :rounded="false">
|
||||
<span class="kiln-info-item">循环水压力:</span>
|
||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.waterPressure }}</span>
|
||||
</ShadowRect>
|
||||
<ShadowRect :rounded="false">
|
||||
<span class="kiln-info-item">助燃风压力:</span>
|
||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.combustionAirPressure }}</span>
|
||||
</ShadowRect>
|
||||
<ShadowRect :rounded="false">
|
||||
<span class="kiln-info-item">碹顶加权温度:</span>
|
||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.topTemp }}</span>
|
||||
</ShadowRect>
|
||||
<ShadowRect :rounded="false">
|
||||
<span class="kiln-info-item">压缩气压力:</span>
|
||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.compressedAirPressure }}</span>
|
||||
</ShadowRect>
|
||||
<ShadowRect :rounded="false">
|
||||
<span class="kiln-info-item">熔化加权温度:</span>
|
||||
<span style="font-size: 20px; line-height: 1.7; flex: 1">{{ kilnInfoMsg?.meltTemp }}</span>
|
||||
</ShadowRect>
|
||||
</div>
|
||||
</Container>
|
||||
@@ -48,24 +63,26 @@ export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
kilnInfo: [
|
||||
{ name: '窑炉压力', value: '83Kpa' },
|
||||
{ name: '循环水温度', value: '53℃' },
|
||||
{ name: '循环水流量', value: '23m³/h' },
|
||||
{ name: '循环水压力', value: '33Kpa' },
|
||||
{ name: '助燃风压力', value: '12Kpa' },
|
||||
{ name: '碹顶加权温度', value: '32℃' },
|
||||
{ name: '压缩气压力', value: '83Kpa' },
|
||||
{ name: '融化加权温度', value: '123℃' },
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
computed: {
|
||||
kilnInfoMsg() {
|
||||
return this.$store.state.websocket.kilnInfo
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.kiln-info {
|
||||
.kiln-info-item {
|
||||
font-size: 20px;
|
||||
line-height: 1.7;
|
||||
flex: 1.5;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-template-rows: 462px 462px;
|
||||
">
|
||||
<MaterialCost />
|
||||
<IsraCheck />
|
||||
@@ -25,7 +25,7 @@
|
||||
import MaterialCost from './MaterialCost.vue';
|
||||
import FanSequence from './FanSequence.vue';
|
||||
import IsraCheck from './IsraCheck.vue';
|
||||
import EnergeCost from './EnergeCost.vue';
|
||||
import EnergeCost from './EnergeCost';
|
||||
export default {
|
||||
name: 'LeftFour',
|
||||
components: { MaterialCost, EnergeCost, IsraCheck, FanSequence },
|
||||
|
||||
@@ -7,36 +7,66 @@
|
||||
|
||||
<template>
|
||||
<Container name="原料用量统计" size="middle" style="">
|
||||
<div
|
||||
class="absolute"
|
||||
style="
|
||||
padding: 12px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-auto-rows: auto;
|
||||
gap: 8px;
|
||||
">
|
||||
<ShadowRect v-for="n in 9" :key="n" :rounded="false">
|
||||
<div
|
||||
class="material"
|
||||
style="
|
||||
flex: 1;
|
||||
padding: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
">
|
||||
<span style="color: #0ee8e4; font-weight: 500; font-size: 32px">
|
||||
234
|
||||
</span>
|
||||
<span style="color: #fff; font-size: 14px; letter-spacing: 1px">
|
||||
- 原料1/吨 -
|
||||
</span>
|
||||
</div>
|
||||
</ShadowRect>
|
||||
<div style="flex: 1; display: flex; gap: 8px;flex-direction: column;">
|
||||
<div
|
||||
class="absolute"
|
||||
style="
|
||||
flex:3;
|
||||
padding: 12px 12px 0 12px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-auto-rows: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
">
|
||||
<ShadowRect v-for="(item, index) in materialMsg1" :key="index" :rounded="false">
|
||||
<div
|
||||
class="material"
|
||||
style="
|
||||
flex: 1;
|
||||
padding-bottom: 3px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
">
|
||||
<span style="color: #0ee8e4; font-weight: 500; font-size: 32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
|
||||
{{item.materialUsed}}
|
||||
</span>
|
||||
<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
|
||||
- {{item.materialName}} -
|
||||
</span>
|
||||
</div>
|
||||
</ShadowRect>
|
||||
</div>
|
||||
<div style="flex:1;
|
||||
padding: 0 12px 12px 12px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;">
|
||||
<ShadowRect v-for="(item, index) in materialMsg2" :key="index" :rounded="false">
|
||||
<div
|
||||
class="material"
|
||||
style="
|
||||
flex: 1;
|
||||
padding-bottom: 3px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
">
|
||||
<span style="color: #0ee8e4; font-weight: 500; font-size: 32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
|
||||
{{item.materialUsed}}
|
||||
</span>
|
||||
<span style="color: #fff; font-size: 16px; letter-spacing: 1px">
|
||||
- {{item.materialName}} -
|
||||
</span>
|
||||
</div>
|
||||
</ShadowRect>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
@@ -50,7 +80,14 @@ export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
computed: {
|
||||
materialMsg1() {
|
||||
return this.$store.state.websocket.material.slice(0,9)
|
||||
},
|
||||
materialMsg2() {
|
||||
return this.$store.state.websocket.material.slice(9)
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -8,7 +8,11 @@
|
||||
<template>
|
||||
<div
|
||||
class="right-two"
|
||||
style="display: flex; gap: 16px; flex-direction: column">
|
||||
style="
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-rows: 320px 605px;
|
||||
">
|
||||
<KilnInfo />
|
||||
<GasHandle />
|
||||
</div>
|
||||
@@ -18,7 +22,7 @@
|
||||
import Container from '../components/Container.vue';
|
||||
import ShadowRect from '../components/ShadowRect.vue';
|
||||
import KilnLine from '../components/line';
|
||||
import Switcher from '../components/Switcher.vue';
|
||||
import Switcher from '../components/Switcher';
|
||||
import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
|
||||
import KilnInfo from './KilnInfo.vue';
|
||||
import GasHandle from './GasHandle.vue';
|
||||
|
||||
@@ -6,25 +6,46 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="KilnDataBoard" style="">
|
||||
<KHeader />
|
||||
<div id='kilnContainerB' ref='kilnContainerB' style="width: 100%;height: 100%;">
|
||||
<div
|
||||
class="main-body"
|
||||
style="flex: 1; display: flex; gap: 16px; padding: 8px 16px">
|
||||
<div class="left-side" style="flex: 2">
|
||||
<LeftFour />
|
||||
</div>
|
||||
<div class="right-side" style="flex: 1">
|
||||
<RightTwo />
|
||||
id='kilnContainer'
|
||||
ref='kilnContainer'
|
||||
class="KilnDataBoard"
|
||||
style="
|
||||
position: absolute;
|
||||
transform-origin: 16px 8px;
|
||||
font-size: 16px;
|
||||
top: -8px;
|
||||
left: -16px;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
"
|
||||
:style="{transform:'scale('+scaleNum+')'}">
|
||||
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='窑炉生产运行驾驶舱'/>
|
||||
<div
|
||||
class="main-body"
|
||||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
|
||||
<div class="left-side" style="flex: 2">
|
||||
<LeftFour />
|
||||
</div>
|
||||
<div class="right-side" style="flex: 1">
|
||||
<RightTwo />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import KHeader from '../components/Header.vue';
|
||||
import LeftFour from './LeftFour.vue';
|
||||
import KHeader from '../components/Header';
|
||||
import LeftFour from './LeftFour';
|
||||
import RightTwo from './RightTwo.vue';
|
||||
import screenfull from 'screenfull'
|
||||
import { debounce } from '@/utils/debounce'
|
||||
import { getDcsMsg, getMesMsg } from './../utils/wsInterface'
|
||||
|
||||
export default {
|
||||
name: 'KilnDataBoard',
|
||||
@@ -38,15 +59,89 @@ export default {
|
||||
// resizeChart: null,
|
||||
// };
|
||||
// },
|
||||
mounted() {
|
||||
// this.$el.addEventListener('resize', () => {
|
||||
// console.log('resizzzze...')
|
||||
// this.resizeChart = Math.random();
|
||||
// });
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
isFullScreen: false,
|
||||
scaleNum: 0.8
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
destroy() {
|
||||
this.destroy()
|
||||
},
|
||||
mounted() {
|
||||
this.boxReset = debounce(() => {
|
||||
this.resetSize()
|
||||
}, 300)
|
||||
this.boxReset()
|
||||
window.addEventListener('resize', () => {
|
||||
this.boxReset()
|
||||
})
|
||||
// this.getMes()
|
||||
// closeWebsocket()
|
||||
getDcsMsg()
|
||||
getMesMsg()
|
||||
console.log('mounted...........')
|
||||
},
|
||||
destroyed() {
|
||||
console.log('destroyed...........')
|
||||
},
|
||||
methods: {
|
||||
change() {
|
||||
this.isFullScreen = screenfull.isFullscreen
|
||||
},
|
||||
|
||||
init() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.on('change', this.change)
|
||||
}
|
||||
},
|
||||
|
||||
destroy() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.off('change', this.change)
|
||||
}
|
||||
},
|
||||
// 全屏
|
||||
screenfullChange() {
|
||||
if (!screenfull.isEnabled) {
|
||||
this.$message({
|
||||
message: 'you browser can not work',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
screenfull.toggle(this.$refs.kilnContainerB)
|
||||
},
|
||||
resetSize() {
|
||||
let kilnContainerBox = document.querySelector('#kilnContainer')
|
||||
let rw = parseFloat(window.innerWidth)
|
||||
let rh = parseFloat(window.innerHeight)
|
||||
let bw = parseFloat(kilnContainerBox.style.width)
|
||||
let bh = parseFloat(kilnContainerBox.style.height)
|
||||
let wx = 0
|
||||
let hx = 0
|
||||
if (screenfull.isFullscreen) {
|
||||
console.log('全屏')
|
||||
wx = rw / bw
|
||||
hx = rh / bh
|
||||
console.log(this.scaleNum)
|
||||
}else{
|
||||
console.log('非全屏')
|
||||
console.log(this.$store.state.app.sidebar.opened)
|
||||
if (this.$store.state.app.sidebar.opened) {
|
||||
wx = (rw-264) / bw
|
||||
hx = (rh-116) / bh
|
||||
}else{
|
||||
wx = (rw-78) / bw
|
||||
hx = (rh-116) / bh
|
||||
}
|
||||
}
|
||||
this.scaleNum = wx
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -55,20 +150,6 @@ export default {
|
||||
background: url(../assets/bg.png) no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 0 0;
|
||||
;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// top: -8px;
|
||||
// left: -16px;
|
||||
// width: calc(100% + 28px);
|
||||
// height: calc(100% + 38px);
|
||||
// width: 100vw;
|
||||
// height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
55
src/views/databoard/mixins/resize.js
Normal file
55
src/views/databoard/mixins/resize.js
Normal file
@@ -0,0 +1,55 @@
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
$_sidebarElm: null,
|
||||
$_resizeHandler: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$_resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
// to fixed bug when cached by keep-alive
|
||||
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
|
||||
activated() {
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
deactivated() {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
methods: {
|
||||
// use $_ for mixins properties
|
||||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||
$_initResizeEvent() {
|
||||
window.addEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_destroyResizeEvent() {
|
||||
window.removeEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_sidebarResizeHandler(e) {
|
||||
if (e.propertyName === 'width') {
|
||||
this.$_resizeHandler()
|
||||
}
|
||||
},
|
||||
$_initSidebarResizeEvent() {
|
||||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
$_destroySidebarResizeEvent() {
|
||||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
}
|
||||
}
|
||||
}
|
||||
204
src/views/databoard/utils/websocket.js
Normal file
204
src/views/databoard/utils/websocket.js
Normal file
@@ -0,0 +1,204 @@
|
||||
// websocket实例
|
||||
let wsObj = null;
|
||||
// ws连接地址
|
||||
let wsUrl = null;
|
||||
// let userId = null;
|
||||
// 是否执行重连 true/不执行 ； false/执行
|
||||
let lockReconnect = false;
|
||||
// 重连定时器
|
||||
let wsCreateHandler = null;
|
||||
// 连接成功，执行回调函数
|
||||
let messageCallback = null;
|
||||
// 连接失败，执行回调函数
|
||||
let errorCallback = null;
|
||||
// 发送给后台的数据
|
||||
let sendDatas = {};
|
||||
|
||||
|
||||
/**
|
||||
* 发起websocket请求函数
|
||||
* @param {string} url ws连接地址
|
||||
* @param {Object} agentData 传给后台的参数
|
||||
* @param {function} successCallback 接收到ws数据，对数据进行处理的回调函数
|
||||
* @param {function} errCallback ws连接错误的回调函数
|
||||
*/
|
||||
export const connectWebsocket = (url, agentData, successCallback, errCallback) => {
|
||||
wsUrl = url;
|
||||
createWebSoket();
|
||||
messageCallback = successCallback;
|
||||
errorCallback = errCallback;
|
||||
sendDatas = agentData;
|
||||
}
|
||||
|
||||
// 手动关闭websocket （这里手动关闭会执行onclose事件）
|
||||
export const closeWebsocket = () => {
|
||||
if (wsObj) {
|
||||
writeToScreen('手动关闭websocket');
|
||||
wsObj.close() // 关闭websocket
|
||||
// wsObj.onclose() // 关闭websocket(如果上面的关闭不生效就加上这一条)
|
||||
// 关闭重连
|
||||
lockReconnect = true;
|
||||
wsCreateHandler && clearTimeout(wsCreateHandler);
|
||||
// 关闭心跳检查
|
||||
heartCheck.stop();
|
||||
}
|
||||
}
|
||||
|
||||
// 创建ws函数
|
||||
const createWebSoket = () => {
|
||||
if (typeof (WebSocket) === 'undefined') {
|
||||
writeToScreen("您的浏览器不支持WebSocket，无法获取数据");
|
||||
return false
|
||||
}
|
||||
// const host = window.location.host;
|
||||
// userId = GetQueryString("userId");
|
||||
// wsUrl = "ws://" + host + "/websoket" + userId;
|
||||
|
||||
try {
|
||||
wsObj = new WebSocket(wsUrl);
|
||||
initWsEventHandle();
|
||||
} catch (e) {
|
||||
writeToScreen("连接异常，开始重连");
|
||||
reconnect();
|
||||
}
|
||||
}
|
||||
|
||||
const initWsEventHandle = () => {
|
||||
try {
|
||||
// 连接成功
|
||||
wsObj.onopen = (event) => {
|
||||
onWsOpen(event);
|
||||
heartCheck.start();
|
||||
}
|
||||
|
||||
// 监听服务器端返回的信息
|
||||
wsObj.onmessage = (event) => {
|
||||
onWsMessage(event);
|
||||
heartCheck.start();
|
||||
}
|
||||
|
||||
wsObj.onclose = (event) => {
|
||||
writeToScreen('onclose执行关闭事件');
|
||||
onWsClose(event);
|
||||
}
|
||||
|
||||
wsObj.onerror = (event) => {
|
||||
writeToScreen('onerror执行error事件，开始重连');
|
||||
onWsError(event);
|
||||
reconnect();
|
||||
}
|
||||
} catch (err) {
|
||||
writeToScreen('绑定事件没有成功，开始重连');
|
||||
reconnect();
|
||||
}
|
||||
}
|
||||
|
||||
const onWsOpen = (event) => {
|
||||
writeToScreen('CONNECT');
|
||||
// // 客户端与服务器端通信
|
||||
// wsObj.send('我发送消息给服务端');
|
||||
// 添加状态判断，当为OPEN时，发送消息
|
||||
if (wsObj.readyState === wsObj.OPEN) { // wsObj.OPEN = 1
|
||||
// 发给后端的数据需要字符串化
|
||||
wsObj.send(JSON.stringify(sendDatas));
|
||||
}
|
||||
if (wsObj.readyState === wsObj.CLOSED) { // wsObj.CLOSED = 3
|
||||
writeToScreen('wsObj.readyState=3, ws连接异常，开始重连');
|
||||
reconnect();
|
||||
errorCallback(event);
|
||||
}
|
||||
}
|
||||
const onWsMessage = (event) => {
|
||||
const jsonStr = event.data;
|
||||
writeToScreen('onWsMessage接收到服务器的数据: ', jsonStr);
|
||||
messageCallback(jsonStr);
|
||||
}
|
||||
const onWsClose = (event) => {
|
||||
writeToScreen('DISCONNECT');
|
||||
// e.code === 1000 表示正常关闭。 无论为何目的而创建, 该链接都已成功完成任务。
|
||||
// e.code !== 1000 表示非正常关闭。
|
||||
console.log('onclose event: ', event)
|
||||
if (event && event.code !== 1000) {
|
||||
writeToScreen('非正常关闭');
|
||||
errorCallback(event);
|
||||
// 如果不是手动关闭，这里的重连会执行；如果调用了手动关闭函数，这里重连不会执行
|
||||
reconnect();
|
||||
}
|
||||
}
|
||||
const onWsError = (event) => {
|
||||
writeToScreen('onWsError: ', event.data);
|
||||
errorCallback(event);
|
||||
}
|
||||
|
||||
const writeToScreen = (massage) => {
|
||||
console.log(massage);
|
||||
}
|
||||
|
||||
// 重连函数
|
||||
const reconnect = () => {
|
||||
if (lockReconnect) {
|
||||
return;
|
||||
}
|
||||
writeToScreen('3秒后重连');
|
||||
lockReconnect = true;
|
||||
// 没连接上会一直重连，设置延迟避免请求过多
|
||||
wsCreateHandler && clearTimeout(wsCreateHandler);
|
||||
wsCreateHandler = setTimeout(() => {
|
||||
writeToScreen('重连...' + wsUrl);
|
||||
createWebSoket();
|
||||
lockReconnect = false;
|
||||
writeToScreen('重连完成');
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// 从浏览器地址中获取对应参数
|
||||
const GetQueryString = (name) => {
|
||||
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
||||
// 获取url中 ? 符后的字符串并正则匹配
|
||||
let r = window.location.search.substr(1).match(reg);
|
||||
let context = "";
|
||||
r && (context = r[2]);
|
||||
reg = null;
|
||||
r = null;
|
||||
return context;
|
||||
}
|
||||
|
||||
|
||||
// 心跳检查（看看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 };
|
||||
wsObj.send(JSON.stringify(datas));
|
||||
} catch (err) {
|
||||
writeToScreen("发送ping异常");
|
||||
}
|
||||
console.log("内嵌定时器this.serverTimeoutObj: ", this.serverTimeoutObj)
|
||||
// 内嵌定时器
|
||||
this.serverTimeoutObj = setTimeout(() => {
|
||||
writeToScreen("没有收到后台的数据，重新连接");
|
||||
reconnect();
|
||||
}, this.timeout)
|
||||
}, this.timeout)
|
||||
}
|
||||
}
|
||||
100
src/views/databoard/utils/wsInterface.js
Normal file
100
src/views/databoard/utils/wsInterface.js
Normal file
@@ -0,0 +1,100 @@
|
||||
import { connectWebsocket, closeWebsocket } from './../utils/websocket'
|
||||
import store from "@/store";
|
||||
|
||||
// 创建dcs链接
|
||||
export const getDcsMsg = () => {
|
||||
const userId = 'dcsmsg' + new Date().getTime()
|
||||
connectWebsocket(
|
||||
// 测试地址
|
||||
'ws://10.70.180.10:8081/xc-screen/websocket/'+userId,
|
||||
// 传递给后台的数据
|
||||
'',
|
||||
// 成功拿到后台返回的数据的回调函数
|
||||
(data) => {
|
||||
console.log('dcs成功的回调函数, 接收到的data数据: ', data)
|
||||
let msgData = JSON.parse(data)
|
||||
if (msgData == null) return;
|
||||
switch (msgData?.type) {
|
||||
case "FanFrequencyInfo": {
|
||||
store.dispatch({type: "websocket/setFanFrequencyInfo", payload:msgData.data.FanFrequencyInfo})
|
||||
break;
|
||||
}
|
||||
case "KilnInfo": {
|
||||
store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
|
||||
break;
|
||||
}
|
||||
case "GasInfo": {
|
||||
store.dispatch({type: "websocket/setGasInfo", payload: msgData.data})
|
||||
break;
|
||||
}
|
||||
default:
|
||||
}
|
||||
},
|
||||
// websocket连接失败的回调函数
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 创建mes链接
|
||||
export const getMesMsg = () => {
|
||||
const sj = new Date().getTime()
|
||||
// ISRA
|
||||
connectWebsocket(
|
||||
// 测试地址
|
||||
'ws://10.70.2.2:8080/websocket/message?userId=KI'+sj,
|
||||
// 传递给后台的数据
|
||||
'',
|
||||
// 成功拿到后台返回的数据的回调函数
|
||||
(data) => {
|
||||
console.log('mes ISRA成功的回调函数, 接收到的data数据: ', data)
|
||||
let msgData = JSON.parse(data)
|
||||
if (msgData == null) return;
|
||||
switch (msgData?.type) {
|
||||
case "israKiln": {
|
||||
store.dispatch({type: "websocket/setIsraKiln", payload:msgData.detData.dayStatistic})
|
||||
break;
|
||||
}
|
||||
// case "KilnInfo": {
|
||||
// // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
|
||||
// break;
|
||||
// }
|
||||
default:
|
||||
}
|
||||
},
|
||||
// websocket连接失败的回调函数
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
|
||||
// 原料 MA
|
||||
connectWebsocket(
|
||||
// 测试地址
|
||||
'ws://10.70.2.2:8080/websocket/message?userId=MA'+sj,
|
||||
// 传递给后台的数据
|
||||
'',
|
||||
// 成功拿到后台返回的数据的回调函数
|
||||
(data) => {
|
||||
console.log('mes 原料成功的回调函数, 接收到的data数据: ', data)
|
||||
let msgData = JSON.parse(data)
|
||||
if (msgData == null) return;
|
||||
switch (msgData?.type) {
|
||||
case "material": {
|
||||
store.dispatch({type: "websocket/setMaterial", payload:msgData.data})
|
||||
break;
|
||||
}
|
||||
// case "KilnInfo": {
|
||||
// // store.dispatch({type: "websocket/setKilnInfo", payload: msgData.data.kilnInfo})
|
||||
// break;
|
||||
// }
|
||||
default:
|
||||
}
|
||||
},
|
||||
// websocket连接失败的回调函数
|
||||
(err) => {
|
||||
console.log('失败的回调函数', err)
|
||||
}
|
||||
)
|
||||
}
|
||||
29
src/views/databoard/wholePlant/LeftTwo.vue
Normal file
29
src/views/databoard/wholePlant/LeftTwo.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div
|
||||
class="left-two"
|
||||
style="
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-rows: 462px 462px;
|
||||
">
|
||||
<OrderStatus />
|
||||
<YieldRate />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OrderStatus from './OrderStatus.vue';
|
||||
import YieldRate from './YieldRate.vue';
|
||||
export default {
|
||||
name: 'LeftFour',
|
||||
components: { OrderStatus, YieldRate },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
29
src/views/databoard/wholePlant/MiddleTwo.vue
Normal file
29
src/views/databoard/wholePlant/MiddleTwo.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div
|
||||
class="middle-two"
|
||||
style="
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-rows: 462px 462px;
|
||||
">
|
||||
<OrderStatus />
|
||||
<YieldRate />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OrderStatus from './OrderStatus.vue';
|
||||
import YieldRate from './YieldRate.vue';
|
||||
export default {
|
||||
name: 'MiddleFour',
|
||||
components: { OrderStatus, YieldRate },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
14
src/views/databoard/wholePlant/OrderStatus.vue
Normal file
14
src/views/databoard/wholePlant/OrderStatus.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="订单完成情况" size="small" style="">
|
||||
digndna
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
export default {
|
||||
name: 'OrderStatus',
|
||||
components: { Container },
|
||||
}
|
||||
</script>
|
||||
29
src/views/databoard/wholePlant/RightTwo.vue
Normal file
29
src/views/databoard/wholePlant/RightTwo.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div
|
||||
class="right-two"
|
||||
style="
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-rows: 462px 462px;
|
||||
">
|
||||
<OrderStatus />
|
||||
<YieldRate />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OrderStatus from './OrderStatus.vue';
|
||||
import YieldRate from './YieldRate.vue';
|
||||
export default {
|
||||
name: 'RightFour',
|
||||
components: { OrderStatus, YieldRate },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
14
src/views/databoard/wholePlant/YieldRate.vue
Normal file
14
src/views/databoard/wholePlant/YieldRate.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div style="flex: 1;">
|
||||
<Container name="本日生产良品率" size="small" style="">
|
||||
0000987
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Container from '../components/Container.vue';
|
||||
export default {
|
||||
name: 'YieldRate',
|
||||
components: { Container },
|
||||
}
|
||||
</script>
|
||||
150
src/views/databoard/wholePlant/index.vue
Normal file
150
src/views/databoard/wholePlant/index.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div id='wholePlantContainerB' ref='wholePlantContainerB' style="width: 100%;height: 100%;">
|
||||
<div
|
||||
id='wholePlantContainer'
|
||||
ref='wholePlantContainer'
|
||||
class="wholePlantBoard"
|
||||
style="
|
||||
position: absolute;
|
||||
transform-origin: 16px 8px;
|
||||
font-size: 16px;
|
||||
top: -8px;
|
||||
left: -16px;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
"
|
||||
:style="{transform:'scale('+scaleNum+')'}">
|
||||
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='全厂总览驾驶舱'/>
|
||||
<div
|
||||
class="main-body"
|
||||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px">
|
||||
<div class="left-side" style="flex: 1">
|
||||
<LeftTwo />
|
||||
</div>
|
||||
<div class="middle-side" style="flex: 1">
|
||||
<MiddleTwo />
|
||||
</div>
|
||||
<div class="right-side" style="flex: 1">
|
||||
<RightTwo />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import KHeader from '../components/Header';
|
||||
import LeftTwo from './LeftTwo';
|
||||
import MiddleTwo from './MiddleTwo';
|
||||
import RightTwo from './RightTwo';
|
||||
import screenfull from 'screenfull'
|
||||
import { debounce } from '@/utils/debounce'
|
||||
import { getDcsMsg, getMesMsg } from './../utils/wsInterface'
|
||||
|
||||
export default {
|
||||
name: 'wholePlantBoard',
|
||||
components: {
|
||||
KHeader,
|
||||
LeftTwo,
|
||||
MiddleTwo,
|
||||
RightTwo
|
||||
},
|
||||
// provide() {
|
||||
// return {
|
||||
// resizeChart: null,
|
||||
// };
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
isFullScreen: false,
|
||||
scaleNum: 0.8
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
destroy() {
|
||||
this.destroy()
|
||||
},
|
||||
mounted() {
|
||||
this.boxReset = debounce(() => {
|
||||
this.resetSize()
|
||||
}, 300)
|
||||
this.boxReset()
|
||||
window.addEventListener('resize', () => {
|
||||
this.boxReset()
|
||||
})
|
||||
// closeWebsocket()
|
||||
// getDcsMsg()
|
||||
// getMesMsg()
|
||||
console.log('mounted...........')
|
||||
},
|
||||
destroyed() {
|
||||
console.log('destroyed...........')
|
||||
},
|
||||
methods: {
|
||||
change() {
|
||||
this.isFullScreen = screenfull.isFullscreen
|
||||
},
|
||||
init() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.on('change', this.change)
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.off('change', this.change)
|
||||
}
|
||||
},
|
||||
// 全屏
|
||||
screenfullChange() {
|
||||
if (!screenfull.isEnabled) {
|
||||
this.$message({
|
||||
message: 'you browser can not work',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
screenfull.toggle(this.$refs.wholePlantContainerB)
|
||||
},
|
||||
resetSize() {
|
||||
let wholePlantContainerBox = document.querySelector('#wholePlantContainer')
|
||||
let rw = parseFloat(window.innerWidth)
|
||||
let rh = parseFloat(window.innerHeight)
|
||||
let bw = parseFloat(wholePlantContainerBox.style.width)
|
||||
let bh = parseFloat(wholePlantContainerBox.style.height)
|
||||
let wx = 0
|
||||
let hx = 0
|
||||
if (screenfull.isFullscreen) {
|
||||
console.log('全屏')
|
||||
wx = rw / bw
|
||||
hx = rh / bh
|
||||
console.log(this.scaleNum)
|
||||
}else{
|
||||
console.log('非全屏')
|
||||
console.log(this.$store.state.app.sidebar.opened)
|
||||
if (this.$store.state.app.sidebar.opened) {
|
||||
wx = (rw-264) / bw
|
||||
hx = (rh-116) / bh
|
||||
}else{
|
||||
wx = (rw-78) / bw
|
||||
hx = (rh-116) / bh
|
||||
}
|
||||
}
|
||||
this.scaleNum = wx
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wholePlantBoard {
|
||||
background: url(../assets/bg.png) no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 0 0;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -47,7 +47,7 @@
|
||||
向世界先进水平挑战，为人类社会文明做贡献
|
||||
</p>
|
||||
</div>
|
||||
<video
|
||||
<!-- <video
|
||||
src="/static/videos/login.webm"
|
||||
muted
|
||||
autoplay
|
||||
@@ -58,7 +58,7 @@
|
||||
top: 28%;
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
"></video>
|
||||
"></video> -->
|
||||
</div>
|
||||
<!-- 表单 -->
|
||||
<div class="field">
|
||||
|
||||
@@ -44,6 +44,7 @@ import { Message } from 'element-ui';
|
||||
import LocalDataManager from './utils/local-data-manager';
|
||||
// import response from './response';
|
||||
import moment from 'moment';
|
||||
import { parseTime } from '@/utils/ruoyi'
|
||||
|
||||
export default {
|
||||
name: 'EquipmentFullParams',
|
||||
@@ -51,9 +52,9 @@ export default {
|
||||
props: {},
|
||||
data() {
|
||||
const now = new Date();
|
||||
const [y, m, d] = [now.getFullYear(), now.getMonth(), now.getDate()];
|
||||
const today = new Date(y, m, d, 0, 0, 0, 0).getTime();
|
||||
const aWeekAgo = today - 3600 * 1000 * 24 * 7;
|
||||
// const [y, m, d] = [now.getFullYear(), now.getMonth(), now.getDate()];
|
||||
const today = new Date().getTime();
|
||||
const tenminAgo = today - (10 * 60 * 1000);
|
||||
return {
|
||||
searchBarFormConfig: [
|
||||
{
|
||||
@@ -73,7 +74,7 @@ export default {
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: '时间段',
|
||||
dateType: 'daterange', // datetimerange
|
||||
dateType: 'datetimerange', // datetimerange
|
||||
format: 'yyyy-MM-dd HH:mm:ss',
|
||||
// valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||||
valueFormat: 'timestamp',
|
||||
@@ -94,13 +95,19 @@ export default {
|
||||
],
|
||||
queryParams: {
|
||||
id: null,
|
||||
time: [new Date(aWeekAgo), new Date(today)],
|
||||
time: [tenminAgo, today],
|
||||
},
|
||||
tableList: [
|
||||
// {
|
||||
// key: 'base-table__key__1',
|
||||
// tableProps: [],
|
||||
// list: [],
|
||||
// tableProps: [{
|
||||
// prop: 'name',
|
||||
// label: 'name'
|
||||
// }],
|
||||
// dataManager: {dataList: [{name: '1'}]},
|
||||
// list: [{
|
||||
// name: '11'
|
||||
// }],
|
||||
// pageNo: 1,
|
||||
// pageSize: 3,
|
||||
// total: 0,
|
||||
@@ -122,6 +129,11 @@ export default {
|
||||
'defaultSelect',
|
||||
to.params.equipmentCode
|
||||
);
|
||||
vm.$set(
|
||||
vm.searchBarFormConfig[2],
|
||||
'defaultSelect',
|
||||
vm.queryParams.time
|
||||
);
|
||||
vm.handleQuery();
|
||||
});
|
||||
} else {
|
||||
@@ -268,11 +280,17 @@ export default {
|
||||
|
||||
async handleSearchBarBtnClick({ btnName, timeVal }) {
|
||||
if (timeVal && timeVal.length > 0) {
|
||||
this.queryParams.time = timeVal;
|
||||
if (timeVal[1] - timeVal[0] <= 10 * 60 * 1000) {
|
||||
this.queryParams.time = timeVal;
|
||||
await this.handleQuery();
|
||||
} else {
|
||||
this.$message.warning('时间范围最大一小时限制！')
|
||||
}
|
||||
} else {
|
||||
this.queryParams.time = [];
|
||||
this.$message.warning('时间段必选！')
|
||||
}
|
||||
await this.handleQuery();
|
||||
|
||||
},
|
||||
|
||||
handleEmitFun(table, val) {
|
||||
@@ -295,9 +313,12 @@ export default {
|
||||
}
|
||||
|
||||
.tables {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 18px;
|
||||
/* display: grid; */
|
||||
/* grid-template-columns: 1fr 1fr; */
|
||||
/* gap: 18px; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tables >>> .baseTable {
|
||||
@@ -306,5 +327,6 @@ export default {
|
||||
|
||||
.custom-table {
|
||||
overflow-x: hidden;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user