mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

merge test

Browse Source
This commit is contained in:
朱菊兰
2023-12-29 09:35:36 +08:00
parent 35bcb23920 14967cbf67
commit 75aa253a29
12 changed files with 1153 additions and 1283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1316
src/views/OperationalOverview/coldBoard.vue
View File

File diff suppressed because it is too large Load Diff

5
src/views/OperationalOverview/components/baseTable.vue
View File

@@ -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,9 +16,8 @@
style="width: 100%; background: transparent"
>
<el-table-column
v-if="page && limit && showIndex"
prop="_pageIndex"
:label="'tableHeader.index' | i18nFilter"
label="序号"
:width="70"
align="center"
/>

177
src/views/OperationalOverview/components/doubleYChart .vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2023-09-21 09:06:28
* @LastEditTime: 2023-10-16 14:20:45
* @LastEditTime: 2023-12-27 18:28:45
* @LastEditors: zhp
* @Description:
-->
@@ -60,98 +60,17 @@ export 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()
})
@@ -164,8 +83,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 +138,12 @@ export default {
}
},
grid: {
right: '20%'
left: "3%",
right: "4%",
bottom: "3%",
width: 'auto',
height: "auto",
containLabel: true
},
legend: {
data: ['产线产量', '产线良品率'],
@@ -205,7 +171,7 @@ export default {
color: '#213259'
}
},
data: ['钢一线', '钢二线', '钢三线', '钢四线', '钢五线', '钢六线', '钢七线', '钢八线']
data: nameList
},
// yAxis: {
@@ -236,8 +202,7 @@ export default {
axisLabel: {
textStyle: {
color: '#ced1d5', // 坐标值得具体的颜色
formatter: '{value} 片'
formatter: '{value}%'
}
},
splitLine: {
@@ -295,29 +260,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
})
}
}

163
src/views/OperationalOverview/components/linearBarChart.vue
View File

@@ -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
})
}

235
src/views/OperationalOverview/components/pileBarChart.vue Normal file
View File

@@ -0,0 +1,235 @@
<!--
* @Author: zhp
* @Date: 2023-12-27 13:54:52
* @LastEditTime: 2023-12-27 19:47:27
* @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',
// label: {
// show: true
// },
emphasis: {
focus: 'series'
},
data: passRateList,
itemStyle: {
normal: { color: '#2359ec' }
}
},
{
name: '废片面积',
type: 'bar',
stack: 'total',
// label: {
// show: true
// },
emphasis: {
focus: 'series'
},
barWidth: 12,
data: wasteList,
itemStyle: {
normal: { color: '#745fe4' }
}
},]
// for (i = 0; i < 5; i++) {
// series.push({
// })
// }
const yAxisDataLeft = topNameList;
// const yAxisDataRight = ['服装', '矿产', '服务业', '建筑业', '金融业'];
const yAxisDataRight = nameWasteList
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
// legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
width: 'auto',
height: 'auto',
containLabel: true
},
xAxis: {
type: 'value',
show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
axisTick: {
show: false // 不显示坐标轴刻度线
},
axisLine: {
show: false, // 不显示坐标轴线
},
axisLabel: {
show: false, // 不显示坐标轴上的文字
},
splitLine: {
show: false // 不显示网格线
},
},
yAxis: [
{
inverse: true,
data: yAxisDataLeft,
axisLabel: {
show: true,
inside: true,
textStyle: {
color: '#ffffff',
fontSize: 12,
align: 'left',
},
formatter: '{value}\n{a|占位}\n{a|占位}',
rich: {
a: {
color: 'transparent',
lineHeight: 24,
}
}
},
//offset: 30,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
}
},
{
inverse: false,
data: yAxisDataRight,
axisLabel: {
inside: true,
textStyle: {
color: '#ffffff',
fontSize: 12,
align: 'right',
},
formatter: '{value}\n{a|占位}\n{a|占位}',
rich: {
a: {
color: 'transparent',
lineHeight: 24,
fontFamily: 'digital'
}
}
},
offset: 0,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
}
}
],
series: series
})
}
}
}
</script>

459
src/views/OperationalOverview/processingBoard.vue
View File

@@ -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-28 10:22:06
* @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,17 @@ export default {
this.init()
},
mounted() {
this.getList()
this.initWebSocket()
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 +591,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 +632,165 @@ export default {
//拼接格式化当前时间
this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
},
initWebSocket() {
if (typeof (WebSocket) === 'undefined') {
alert('您的浏览器不支持WebSocket')
} else {
const wsUrl = `ws://192.168.0.33:48082/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://192.168.0.33:48082/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
// const wsUrl = 'ws://192.168.0.33:48082/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
}
},
SJGWebsocketOnOpen() {
console.log('socket连接成功')
console.log(this.SJGWebsocket.onmessage);
this.SJGWebsocket.onmessage()
},
// 连接建立失败重连
SJGWebsocketOnError(e) {
// console.log('11111', e)
this.initWebSocket()
},
// 数据接收
SJGWebsocketOnMessage(e) {
// console.log(1111, e)
this.wsData = JSON.parse(e.data)
// console.log(this.wsData.detData);
// console.log('22222', this.wsData.data)
if (this.wsData.type === 'order') {
this.orderList = this.wsData.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.wsData.type === 'equipment') {
this.equipmentList = this.wsData.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(this.orderList)
} else if (this.wsData.type === 'productline') {
console.log(this.wsData.detData);
let nameList = []
let passRateList = []
let outputNumList = []
// console.log('2222222222', this.productLineList);
this.productLineList.forEach((item) => {
this.wsData.detData.forEach((ele) => {
if (item.id == ele.productionLineId) {
nameList.push(item.name)
}
})
})
console.log(Array.from(new Set(nameList)))
// progressRateList = EnergyNameList
// let EnergyDataList = []
this.wsData.detData.forEach((ele) => {
passRateList.push(ele.passRate *100
)
})
this.wsData.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 +922,8 @@ export default {
top: 2em;
}
// .container-main {
// padding: 0px;
// .container-main {
// padding: 5px;
// }