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

merge

Browse Source
This commit is contained in:
helloDy
2024-01-08 16:24:27 +08:00
parent 16551a5f9d b7ab59d5cd
commit ce4aabaaf3
82 changed files with 4959 additions and 1830 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/OperationalOverview/AGVBoard.vue
View File

@@ -12,7 +12,7 @@
lineHeight: 88 + 'px',
fontSize: 31 + 'px'
}">
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.22em" alt="">
许昌安彩AGV原片周转看板
<h3 class="unit">单位：河南汇融科技服务有限公司</h3>
<h3 class="time">{{ times }}</h3>

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

File diff suppressed because it is too large Load Diff

2
src/views/OperationalOverview/components/baseContainer/index.vue
View File

@@ -2,7 +2,7 @@
* @Author: gtz
* @Date: 2022-01-19 15:58:17
* @LastEditors: zhp
* @LastEditTime: 2023-11-14 13:28:27
* @LastEditTime: 2024-01-04 16:16:22
* @Description: file content
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
-->

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

@@ -1,48 +1,51 @@
<!--
* @Date: 2020-12-14 09:07:03
* @LastEditors: zhp
* @LastEditTime: 2023-11-14 10:11:09
* @LastEditTime: 2024-01-04 16:16:00
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseTable.vue
* @Description:
-->
<template>
<div class="visual-base-table-container">
<el-table
v-loading="isLoading"
:header-cell-style="{background:'rgba(4, 74, 132, .19)',color:'#fff'}"
:row-style="setRowStyle"
:data="renderData"
border
style="width: 100%; background: transparent"
>
<el-table-column
v-if="page && limit && showIndex"
prop="_pageIndex"
:label="'tableHeader.index' | i18nFilter"
:width="70"
align="center"
/>
<el-table-column
v-for="item in renderTableHeadList"
:key="item.prop"
:show-overflow-tooltip="showOverflow"
v-bind="item"
>
<template slot-scope="scope">
<component
:is="item.subcomponent"
v-if="item.subcomponent"
:inject-data="{...scope.row, ...item}"
@emitData="emitData"
/>
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
<div class="visual-base-table-container scroll_table">
<div style="display: inline-block; width: 100%">
<el-table class="top" v-loading="isLoading"
:header-cell-style="{background:'rgba(4, 74, 132, .19)',color:'#fff',}" :row-style="setRowStyle"
:data="renderData" border style="width: 100%; background: transparent">
<el-table-column prop="_pageIndex" label="序号" :width="50" align="center" />
<el-table-column v-for="item in renderTableHeadList" :key="item.prop" :show-overflow-tooltip="showOverflow"
v-bind="item">
<template slot-scope="scope">
</template>
</el-table-column>
<slot name="content" />
</el-table>
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}"
@emitData="emitData" />
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</template>
</el-table-column>
<slot name="content" />
</el-table>
<vue-seamless-scroll :data="renderData" class="seamless-warp" style="width: 100%" :class-option="classOption">
<el-table class="bottom" v-loading="isLoading"
:header-cell-style="{background:'rgba(4, 74, 132, .19)',color:'#fff',}" :row-style="setRowStyle"
:data="renderData" border style="width: 100%; background: transparent">
<el-table-column prop="_pageIndex" label="序号" :width="50" align="center" />
<el-table-column v-for="item in renderTableHeadList" :key="item.prop" :show-overflow-tooltip="showOverflow"
v-bind="item">
<template slot-scope="scope">
<component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}"
@emitData="emitData" />
<span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span>
</template>
</el-table-column>
<slot name="content" />
</el-table>
</vue-seamless-scroll>
</div>
</div>
</template>
<script>
import { isObject, isString } from 'lodash'
@@ -110,7 +113,19 @@ export default {
return this.tableConfig.filter((item, index) => {
return this.selectedBox[index]
})
}
},
classOption() {
return {
step: 0.3, // 数值越大速度滚动越快
limitMoveNum: 1, // 开始无缝滚动的数据量 this.list
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
};
},
},
beforeMount() {
this.selectedBox = new Array(100).fill(true)
@@ -172,16 +187,23 @@ export default {
background-color: rgba(79,114,136,0.29) !important;
}
}
// .setting {
// text-align: right;
// padding: 15px;
// .setting-box {
// width: 100px;
// }
// i {
// color: #aaa;
// @extend .pointer;
// }
// }
</style>
<style lang="scss">
.seamless-warp {
height: 308px;
overflow: hidden;
}
.min {
display: flex;
width: 100%;
}
.top .el-table__body-wrapper {
display: none;
}
.bottom .el-table__header-wrapper {
display: none;
width: 100%;
}
</style>

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

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

215
src/views/OperationalOverview/components/pileBarChart.vue Normal file
View 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>

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

@@ -2,17 +2,17 @@
* @Author: zwq
* @Date: 2021-07-19 15:18:30
* @LastEditors: zhp
* @LastEditTime: 2023-12-19 14:25:07
* @LastEditTime: 2024-01-04 15:52:52
* @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'
}">
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
height: 88 + 'px',
lineHeight: 88 + 'px',
fontSize: 31 + 'px'
}">
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.22em" alt="">
许昌安彩深加工看板
<h3 class="unit">单位：河南汇融科技服务有限公司</h3>
<h3 class="time">{{ times }}</h3>
@@ -27,28 +27,23 @@
</el-button> -->
</el-row>
<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'">
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15" type="flex" class="flex-1" style="height: 50%;">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
<base-container :title="'设备报警'" :height="318" :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>
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
<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'">
<el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="8" height="100%">
<base-container :height="318" :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 ? 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 {
let date = new Date().valueOf()
const wsUrl = process.env.VUE_APP_Socket_API + `/websocket/message?userId=EN${date}`
// const wsUrl = 'ws://192.168.1.104:48082/websocket/message?userId=SJG'
// 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);
console.log(process.env);
const SJGWsUrl = process.env.VUE_APP_Socket_API + `/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 = e?.data ? 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)
}
})
})
// 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(Array.from(new Set(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 = e?.data ? 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
@@ -895,17 +926,19 @@ export default {
background-color: unset;
background-image: linear-gradient(to right, #4573fe, #47f8dc);
}
// ::v-deep .el-progress-bar__outer {
// background-color:rgba(71, 248, 220, 1);
// // background-image: rgba(71, 248, 220, 1))
// }
.visual-select {
position: absolute;
right: 1em;
top: 2em;
}
// .container-main {
// padding: 0px;
// .container-main {
// padding: 5px;
// }
</style>
<style lang="scss">

BIN
src/views/databoard/assets/check.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 492 B

BIN
src/views/databoard/assets/defectStatistics.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 558 B

BIN
src/views/databoard/assets/energeCost.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 322 B

BIN
src/views/databoard/assets/eqMonitor.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 615 B

BIN
src/views/databoard/assets/goodRate.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/views/databoard/assets/msg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 507 B

BIN
src/views/databoard/assets/order.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 789 B

28
src/views/databoard/components/Container.vue
View File

@@ -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,13 +48,31 @@ 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');
case '产线缺陷统计':
return require('../assets/defectStatistics.png');
case '产线当日缺陷分类':
return require('../assets/check.png');
case '本日生产良品率':
return require('../assets/goodRate.png');
case '订单完成情况':
return require('../assets/order.png');
case '设备报警':
return require('../assets/goodRate.png');
case '各工序缺陷汇总':
return require('../assets/check.png');
case '能源监控':
return require('../assets/defectStatistics.png');
case '产线产量及良品率':
return require('../assets/order.png');
case '工单监控':
return require('../assets/eqMonitor.png');
}
},
},

216
src/views/databoard/components/DefectChart.vue Normal file
View File

@@ -0,0 +1,216 @@
<template>
<div class="defect-chart"></div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
export default {
name: 'DefectChart',
mixins: [resize],
props: {
chartTime: ''
},
data() {
return {
chart: null,
tempData: []
}
},
computed: {
israDayStatistic() {
return this.$store.state.websocket.israDayStatistic
},
israWeekStatistic() {
return this.$store.state.websocket.israWeekStatistic
},
israMonthStatistic() {
return this.$store.state.websocket.israMonthStatistic
},
israYearStatistic() {
return this.$store.state.websocket.israYearStatistic
}
},
watch: {
israDayStatistic: {
handler(newVal, oldVal) {
if (this.chartTime === '日') {
this.tempData = israDayStatistic
this.updateChart()
}
}
},
israWeekStatistic: {
handler(newVal, oldVal) {
if (this.chartTime === '周') {
this.tempData = israWeekStatistic
this.updateChart()
}
}
},
israMonthStatistic: {
handler(newVal, oldVal) {
if (this.chartTime === '月') {
this.tempData = israMonthStatistic
this.updateChart()
}
}
},
israYearStatistic: {
handler(newVal, oldVal) {
if (this.chartTime === '年') {
this.tempData = israYearStatistic
this.updateChart()
}
}
}
},
mounted() {
this.$el.addEventListener('resize', () => {
console.log('resziing.....');
});
this.updateChart()
},
methods: {
updateChart() {
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose()
}
this.chart = echarts.init(this.$el);
let legendData = []
let xData = []
let yData = []
this.tempData && this.tempData.length > 0 && this.tempData.map(item => {
xData.push(item.name)
})
var series = [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
stack: 'all',
name: 'a',
barWidth: 12,
},
{
data: [10, 46, 64, '-', 0, '-', 0],
type: 'bar',
stack: 'all',
name: 'b',
barWidth: 12,
},
{
data: [30, '-', 0, 20, 10, '-', 0],
type: 'bar',
stack: 'all',
barWidth: 12,
name: 'c'
},
{
data: [30, '-', 0, 20, 10, '-', 0],
type: 'bar',
stack: 'all',
barWidth: 12,
name: 'd'
},
{
data: [10, 20, 150, 0, '-', 50, 10],
type: 'bar',
stack: 'all',
name: 'e',
barWidth: 12,
label: {
show: true,
position: 'top'
}
}
];
var option = {
color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'],
grid: { top: 40, right: 12, bottom: 20, left: 48 },
legend: {
top: 10,
left: 80,
padding: 5,
itemWidth: 12,
itemHeight: 12,
itemGap: 12,
height: 12,
textStyle: {
color: "#DFF1FE",
fontSize: 12,
},
data:['a','b','c','d','e'],
},
xAxis: {
type: "category",
data: xData,
axisLabel: {
color: "#fffc",
fontSize: 12,
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 1,
color: "#213259",
},
},
},
yAxis: {
name: "单位/个",
nameTextStyle: {
color: "#fff",
fontSize: 10,
align: "right",
},
type: "value",
axisLabel: {
color: "#fff",
fontSize: 12,
formatter: "{value}",
},
axisLine: {
show: true,
lineStyle: {
color: "#213259",
},
},
splitLine: {
lineStyle: {
color: "#213259a0",
},
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
className: "defect-chart-tooltip"
},
series: series
};
option && this.chart.setOption(option)
}
}
}
</script>
<style scoped lang="scss">
.defect-chart {
width: 100%;
height: 100%;
}
</style>
<style>
.defect-chart-tooltip {
background: #0a2b4f77 !important;
border: none !important;
backdrop-filter: blur(12px);
}
.defect-chart-tooltip * {
color: #fff !important;
}
</style>

170
src/views/databoard/components/DefectClassChart.vue Normal file
View File

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

157
src/views/databoard/components/EnergeMonitoringChart.vue Normal file
View File

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

234
src/views/databoard/components/FlueGas.vue Normal file
View File

@@ -0,0 +1,234 @@
<template>
<div class="gas-chart"></div>
</template>
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
export default {
name: 'GasChart',
mixins: [resize],
components: {},
props: {
chartType: '',
chartTime: ''
},
data() {
const colors = [
'#12FFF5',
'#2760FF',
'#FFD160',
'#E80091',
'#8064ff',
'#ff8a3b',
'#8cd26d',
'#2aa1ff',
];
return {
chart: null
};
},
computed: {
gasChartDayTrend() {
return this.$store.state.websocket.gasChartDayTrend
},
gasChartWeekTrend() {
return this.$store.state.websocket.gasChartWeekTrend
},
gasChartMonthTrend() {
return this.$store.state.websocket.gasChartMonthTrend
},
gasChartYearTrend() {
return this.$store.state.websocket.gasChartYearTrend
}
},
watch: {
gasChartDayTrend: {
handler(newVal, oldVal) {
if (this.chartTime === '日') {
this.updateChart()
}
}
},
gasChartWeekTrend: {
handler(newVal, oldVal) {
if (this.chartTime === '周') {
this.updateChart()
}
}
},
gasChartMonthTrend: {
handler(newVal, oldVal) {
if (this.chartTime === '月') {
this.updateChart()
}
}
},
gasChartYearTrend: {
handler(newVal, oldVal) {
if (this.chartTime === '年') {
this.updateChart()
}
}
},
chartType: {// 监听类型变化，更新图
handler(newVal, oldVal) {
this.updateChart()
}
},
chartTime: {// 监听时间变化，更新图
handler(newVal, oldVal) {
this.updateChart()
}
}
},
mounted() {
this.$el.addEventListener('resize', () => {
console.log('resziing.....');
});
this.updateChart()
},
methods: {
updateChart() {
let gasName = ''
const colors = ['#FFCB59'];
let temp1 = []
let temp2 = []
let seriesData = []
let xData = []
let yData = []
switch (this.chartTime) {
case '日':{
temp1 = this.gasChartDayTrend
break;
}
case '周':{
temp1 = this.gasChartWeekTrend
break;
}
case '月':{
temp1 = this.gasChartMonthTrend
break;
}
case '年':{
temp1 = this.gasChartYearTrend
break;
}
default:
}
switch (this.chartType) {
case '氧气含量':{
temp2 = temp1.O2_float || []
break;
}
case '二氧化硫':{
temp2 = temp1.SO2_float || []
break;
}
case '一氧化氮':{
temp2 = temp1.NOX_float || []
break;
}
case '颗粒物':{
temp2 = temp1.dust_float || []
break;
}
default:
}
temp2.length > 0 && temp2.map(i => {
xData.push(i.time)
yData.push(i.value)
})
if (yData.length == 0) {
seriesData = []
}else {
seriesData = [{
name: gasName,
data: yData,
type: "line",
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#FFCB59' + "40" },
{ offset: 0.5, color: '#FFCB59' + "20" },
{ offset: 1, color: '#FFCB59' + "00" },
]),
},
lineStyle: {
width: 1
},
symbolSize: 1,
emphasis: {
focus: 'series'
}
}]
}
// 绘图
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
}
this.chart = echarts.init(this.$el);
var option = {
color: colors,
grid: { top: 32, right: 12, bottom: 20, left: 48 },
xAxis: {
type: 'category',
data: xData,
axisLabel: {
color: '#fff',
fontSize: 12,
},
axisTick: { show: false },
axisLine: {
lineStyle: {
width: 1,
color: '#213259',
},
},
},
yAxis: {
name: '单位m³/h',
nameTextStyle: {
color: '#fff',
fontSize: 10,
align: 'right',
},
type: 'value',
axisLabel: {
color: '#fff',
fontSize: 12,
},
axisLine: {
show: true,
lineStyle: {
color: '#213259',
},
},
splitLine: {
lineStyle: {
color: '#213259a0',
},
},
},
series: seriesData,
tooltip: {
trigger: 'axis',
},
}
option && this.chart.setOption(option)
}
},
};
</script>
<style scoped lang="scss">
.gas-chart {
width: 100%;
height: 100%;
}
</style>

255
src/views/databoard/components/GasChart.vue
View File

@@ -11,11 +11,16 @@
<script>
import * as echarts from 'echarts';
import resize from './../mixins/resize'
export default {
name: 'GasChart',
mixins: [resize],
components: {},
props: {},
props: {
chartType: '', // 能源类型
chartTime: ''
},
data() {
const colors = [
'#12FFF5',
@@ -28,22 +33,155 @@ export default {
'#2aa1ff',
];
return {
chart: null,
option: {
chart: null
};
},
computed: {
gasChartMsg() {
return this.$store.state.websocket.sumGasInfo
},
energyWeekTrend() {
return this.$store.state.websocket.energyWeekTrend
},
energyMonthTrend() {
return this.$store.state.websocket.energyMonthTrend
},
energyYearTrend() {
return this.$store.state.websocket.energyYearTrend
}
},
watch: {
energyWeekTrend: {// 监听周电能，更新图
handler(newVal, oldVal) {
if (this.chartTime === '周' && this.chartType === '电耗能') {
this.updateChart()
}
}
},
energyMonthTrend: {// 监听月电能，更新图
handler(newVal, oldVal) {
if (this.chartTime === '月' && this.chartType === '电耗能') {
this.updateChart()
}
}
},
energyYearTrend: {// 监听年电能，更新图
handler(newVal, oldVal) {
if (this.chartTime === '年' && this.chartType === '电耗能') {
this.updateChart()
}
}
},
gasChartMsg: {// 监听天然气，更新图
handler(newVal, oldVal) {
if (this.chartType === '天然气I' || this.chartType === '天然气II') {
this.updateChart()
}
}
},
chartTime: {// 监听时间变化，更新图
handler(newVal, oldVal) {
this.updateChart()
}
},
chartType: {// 监听能源类型变化，更新图
handler(newVal, oldVal) {
this.updateChart()
}
}
},
mounted() {
this.$el.addEventListener('resize', () => {
console.log('resziing.....');
});
this.updateChart()
},
methods: {
updateChart() {
let gasName = ''
const colors = ['#FFCB59'];
let temp = []
let seriesData = []
let xData = []
let yData = []
switch (this.chartType) {
case '电耗能':{
gasName = '电耗能'
if (this.chartTime === '周') {
temp = this.energyWeekTrend || []
}else if(this.chartTime === '月') {
temp = this.energyMonthTrend || []
}else{
temp = this.energyYearTrend || []
}
temp && temp.map(i => {
xData.push(i.time)
yData.push(i.qty)
})
break;
}
case '天然气I':{
if (this.chartTime === '周') {
yData = this.gasChartMsg.hisSumGas1For7Day || []
}else if(this.chartTime === '月') {
yData = this.gasChartMsg.sumGas1ForMonth || []
}else{
yData = this.gasChartMsg.sumGas1ForYear || []
}
gasName = '天然气I'
xData = this.getXdata()
break;
}
default:
gasName = '天然气II'
if (this.chartTime === '周') {
yData = this.gasChartMsg.hisSumGas2For7Day || []
}else if(this.chartTime === '月') {
yData = this.gasChartMsg.sumGas2ForMonth || []
}else{
yData = this.gasChartMsg.sumGas2ForYear || []
}
xData = this.getXdata()
}
if (yData.length == 0) {
seriesData = []
}else {
seriesData = [{
name: gasName,
data: yData,
type: "line",
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#FFCB59' + "40" },
{ offset: 0.5, color: '#FFCB59' + "20" },
{ offset: 1, color: '#FFCB59' + "00" },
]),
},
lineStyle: {
width: 1
},
symbolSize: 1,
emphasis: {
focus: 'series'
}
}]
}
// 绘图
if (
this.chart !== null &&
this.chart !== '' &&
this.chart !== undefined
) {
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
}
this.chart = echarts.init(this.$el);
var option = {
color: colors,
grid: { top: 32, right: 12, bottom: 20, left: 48 },
grid: { top: 32, right: 12, bottom: 20, left: 60 },
xAxis: {
type: 'category',
data: Array(7)
.fill(1)
.map((_, index) => {
const today = new Date();
const dtimestamp = today - index * 24 * 60 * 60 * 1000;
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
dtimestamp
).getDate()}`;
})
.reverse(),
data: xData,
axisLabel: {
color: '#fff',
fontSize: 12,
@@ -80,65 +218,48 @@ export default {
},
},
},
series: [
Array(7)
.fill(1)
.map((_) => Math.ceil(Math.random() * 100)),
Array(7)
.fill(1)
.map((_) => Math.ceil(Math.random() * 100)),
Array(7)
.fill(1)
.map((_) => Math.ceil(Math.random() * 100)),
].map((v, i) => ({
name: ['总量', '白班', '夜班'][i],
data: v,
type: 'line',
symbol: 'circle',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// i % 8 避免超过8个数据时无颜色的问题
{ offset: 0, color: colors[i % 8] + '40' },
{ offset: 0.5, color: colors[i % 8] + '20' },
{ offset: 1, color: colors[i % 8] + '00' },
]),
},
})),
series: seriesData,
tooltip: {
trigger: 'axis',
},
},
};
},
inject: ['resizeChart'],
computed: {
sidebarStatus() {
return this.$store.state.app.sidebar.opened;
}
option && this.chart.setOption(option)
},
},
watch: {
sidebarStatus(val) {
console.log('sidebarStatus', val);
this.chart && this.chart.dispose();
setTimeout(() => {
this.chart = echarts.init(this.$el);
this.chart.setOption(this.option);
}, 500);
getXdata() {
const today = new Date();
const currentYear = today.getFullYear();
const currentMonth = today.getMonth() + 1;
let days = 30;
if (this.chartTime === '周') {
return Array(7)
.fill(1)
.map((_, index) => {
const today = new Date();
const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
dtimestamp
).getDate()}`;}).reverse()
}else if (this.chartTime == "月") {
if (currentMonth in [1, 3, 5, 7, 8, 10, 12]) {
days = 31;
} else if (currentMonth == 2) {
days = this.isLeapYear(currentYear) ? 29 : 28;
}
return Array(days)
.fill(1)
.map((_, index) => {
return `${currentMonth}.${days - index}`;}).reverse()
} else {
return Array(12)
.fill(1)
.map((_, index) => {
return `${currentYear}.${12 - index}`;}).reverse()
}
},
// resizeChart(val) {
// console.log('resizeChart', val);
// val && this.chart && this.chart.resize();
// },
isLeapYear(year) {
return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0);
}
},
mounted() {
this.$el.addEventListener('resize', () => {
console.log('resziing.....');
});
this.chart = echarts.init(this.$el);
this.chart.setOption(this.option);
},
methods: {},
};
</script>

98
src/views/databoard/components/Header.vue
View File

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

266
src/views/databoard/components/ISRAChart.vue
View File

@@ -1,31 +1,35 @@
<!--
filename: ISRAChart.vue
author: liubin
date: 2023-12-12 09:05:25
description:
-->
<template>
<div class="isra-chart"></div>
</template>
<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,177 +41,10 @@ export default {
},
subtextStyle: {
fontSize: 16,
color: '#fff7',
color: '#fff00',
},
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['60%', '85%'],
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,
borderWidth: 0,
textBorderWidth: 0,
},
b: {
color: '#518eec',
fontSize: 18,
borderWidth: 0,
textBorderWidth: 0,
},
c: {
color: '#0ee8e4',
fontSize: 18,
borderWidth: 0,
textBorderWidth: 0,
},
d: {
color: '#ddb523',
fontSize: 18,
borderWidth: 0,
textBorderWidth: 0,
},
},
},
labelLine: {
show: true,
},
itemStyle: {
borderRadius: 12,
// borderColor: 'transparent',
// borderWidth: 20
},
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
},
},
},
],
},
],
series: []
},
};
},
@@ -215,14 +52,83 @@ export default {
this.initChart();
},
activated() {
// this.initChart();
},
computed: {},
computed: {
israChartMsg() {
return this.$store.state.websocket.israKiln
}
},
watch: {
israChartMsg: {
handler(newVal, oldVal) {
this.chartData = 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: 20,
color: '#fff00',
},
},
series:[{
name: 'ISRA缺陷检测',
type: 'pie',
center: ['50%', '40%'],
radius: ['45%', '70%'],
avoidLabelOverlap: true,
label: {
show: false
},
labelLine: {
show: true,
},
itemStyle: {
borderRadius: 12
},
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>

196
src/views/databoard/components/NumRateChart.vue Normal file
View File

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

38
src/views/databoard/components/ScrollBoard.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<div class="scroll-board-container">
<dv-scroll-board :config="config" :style="{'width':width,'height':height}" />
</div>
</template>
<script>
export default {
name: 'ScrollBoard',
props: {
config: {
type: Object,
default: () => ({})
},
width:{
type: String,
default: '600px'
},
height:{
type: String,
default: '380px'
}
},
data() {
return {
}
}
}
</script>
<style lang='scss'>
.scroll-board-container {
.dv-scroll-board .rows .ceil, .dv-scroll-board .header .header-item {
border-right: 1px solid rgba(13, 23, 40, 1);
}
.dv-scroll-board .rows .ceil:last-child, .dv-scroll-board .header .header-item:last-child {
border-right: none;
}
}
</style>

13
src/views/databoard/components/SelectorBtnGroup.vue
View File

@@ -11,7 +11,7 @@
class="btn"
v-for="opt in options"
:key="opt"
@click="active = opt"
@click="clickBtn(opt)"
:class="active == opt ? 'btn-active' : ''">
{{ opt }}
</button>
@@ -22,14 +22,19 @@
export default {
name: 'SelectorBtnGroup',
components: {},
props: ['options'],
props: ['options', 'active'],
data() {
return {
active: this.options[0] || 'default'
// active: this.options[0] || 'default'
};
},
computed: {},
methods: {},
methods: {
clickBtn(opt) {
// this.active = opt
this.$emit('emitFun', opt)
}
},
};
</script>

4
src/views/databoard/components/Switcher.vue
View File

@@ -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;

41
src/views/databoard/deepProcessing/BottomTwo.vue Normal file
View File

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

43
src/views/databoard/deepProcessing/DefectSum.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<div style="flex: 1;">
<Container name="各工序缺陷汇总" size="small" style="">
<div style="padding: 5px 10px;">
<ScrollBoard :config = "config" width='575px' height='380px'/>
</div>
</Container>
</div>
</template>
<script>
import Container from '../components/Container.vue';
import ScrollBoard from '../components/ScrollBoard'
export default {
name: 'DefectSum',
components: { Container, ScrollBoard },
data() {
return {
config: {
header: ['序号', '产线', '工序','损耗片数','缺陷类型'],
// headerHeight: '17',
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [60],
align: ['center'],
data: [
[1, '产线1', '行1列3', '', ''],
[2, '产线2', '行2列3', '', ''],
[3, '产线3', '行3列3', '', ''],
[4, '产线4', '行4列3', '', ''],
[5, '产线5', '行5列3', '', ''],
[6, '产线6', '行6列3', '', ''],
[7, '产线7', '行7列3', '', ''],
[8, '产线8', '行8列3', '', ''],
[9, '产线9', '行9列3', '', ''],
[10, '产线10', '行10列3', '', '']
],
rowNum: 10
}
}
}
}
</script>

30
src/views/databoard/deepProcessing/EnergyMonitoring.vue Normal file
View File

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

43
src/views/databoard/deepProcessing/EqAlarm.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<div style="flex: 1;">
<Container name="设备报警" size="small" style="">
<div style="padding: 5px 10px;">
<ScrollBoard :config = "config" width='575px' height='380px'/>
</div>
</Container>
</div>
</template>
<script>
import Container from '../components/Container.vue';
import ScrollBoard from '../components/ScrollBoard'
export default {
name: 'EqAlarm',
components: { Container, ScrollBoard },
data() {
return {
config: {
header: ['序号', '设备名称', '设备编码','设备状态','是否故障'],
// headerHeight: '17',
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [60],
align: ['center'],
data: [
[1, '设备1', '行1列3', '', ''],
[2, '设备2', '行2列3', '', ''],
[3, '设备3', '行3列3', '', ''],
[4, '设备4', '行4列3', '', ''],
[5, '设备5', '行5列3', '', ''],
[6, '设备6', '行6列3', '', ''],
[7, '设备7', '行7列3', '', ''],
[8, '设备8', '行8列3', '', ''],
[9, '设备9', '行9列3', '', ''],
[10, '设备10', '行10列3', '', '']
],
rowNum: 10
}
}
}
}
</script>

30
src/views/databoard/deepProcessing/NumRate.vue Normal file
View File

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

51
src/views/databoard/deepProcessing/TopThree.vue Normal file
View File

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

43
src/views/databoard/deepProcessing/WorkOrderMonitoring.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<div style="flex: 1;">
<Container name="工单监控" size="small" style="">
<div style="padding: 5px 10px;">
<ScrollBoard :config = "config" width='575px' height='380px'/>
</div>
</Container>
</div>
</template>
<script>
import Container from '../components/Container.vue';
import ScrollBoard from '../components/ScrollBoard'
export default {
name: 'WorkOrderMonitoring',
components: { Container, ScrollBoard },
data() {
return {
config: {
header: ['序号', '工单名称', '规格','产线','工单状态', '计划完成时间', '计划产量', '实际产量'],
// headerHeight: '17',
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [60],
align: ['center'],
data: [
[1, '设备1', '行1列3', '', '','','',''],
[2, '设备2', '行2列3', '', '','','',''],
[3, '设备3', '行3列3', '', '','','',''],
[4, '设备4', '行4列3', '', '','','',''],
[5, '设备5', '行5列3', '', '','','',''],
[6, '设备6', '行6列3', '', '','','',''],
[7, '设备7', '行7列3', '', '','','',''],
[8, '设备8', '行8列3', '', '','','',''],
[9, '设备9', '行9列3', '', '','','',''],
[10, '设备10', '行10列3', '', '','','','']
],
rowNum: 10
}
}
}
}
</script>

156
src/views/databoard/deepProcessing/index.vue Normal file
View File

@@ -0,0 +1,156 @@
<template>
<div id='deepProcessingContainerB' ref='deepProcessingContainerB' style="width: 100%;height: 100%;">
<div
id='deepProcessingContainer'
ref='deepProcessingContainer'
class="deepProcessingBoard"
style="
position: absolute;
transform-origin: left top;
font-size: 16px;
top: 0px;
left: 0px;
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="
display: grid;
gap: 16px;
grid-template-rows: 462px 462px;
">
<TopThree />
<BottomTwo />
</div>
<!-- <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.deepProcessingContainerB)
},
resetSize() {
let deepProcessingContainer = document.querySelector('#deepProcessingContainer')
let rw = parseFloat(window.innerWidth)
let rh = parseFloat(window.innerHeight)
let bw = parseFloat(deepProcessingContainer.style.width)
let bh = parseFloat(deepProcessingContainer.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>

66
src/views/databoard/kiln/EnergeCost.vue
View File

@@ -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,24 +31,24 @@
justify-content: space-between;
">
<SelectorBtnGroup
:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
<SelectorBtnGroup :options="['日', '周', '月', '年']" />
:options="['电耗能', '天然气I', '天然气II']" @emitFun='toggleType' :active='chartType'/>
<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/>
</div>
<div class="chart" style="height: 150px; margin-top: 8px;">
<GasChart />
<div class="chart" style="height: 200px; margin-top: 8px;">
<GasChart :chartType='chartType' :chartTime='chartTime'/>
</div>
</div>
</Container>
</template>
<script>
import Container from '../components/Container.vue';
import Container from '../components/Container';
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';
import SelectorBtnGroup from '../components/SelectorBtnGroup';
export default {
name: 'EnergeCost',
components: {
@@ -62,10 +62,46 @@ export default {
},
props: {},
data() {
return {};
return {
chartType:'电耗能',
chartTime:'周'
};
},
computed: {
gasInfoMsg() {
return this.$store.state.websocket.gasInfo
},
},
methods: {
// 切换能源
toggleType(val) {
console.log('能源' + val)
this.chartType = val
// if (val === '天然气I' || val === '天然气II') {
// if (this.chartTime === '周') {
// this.chartType = val
// } else {
// this.$message.warning('暂无数据')
// }
// }else {
// this.chartType = val
// }
},
// 切换时间
toggleDate(val) {
console.log('时间' + val)
this.chartTime = val
// if (val === '月' || val === '年') {
// if (this.chartType === '电耗能') {
// this.chartTime = val
// } else {
// this.$message.warning('暂无数据')
// }
// }else{
// this.chartTime = val
// }
}
},
computed: {},
methods: {},
};
</script>

34
src/views/databoard/kiln/EnergeTop.vue
View File

@@ -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">
@@ -22,8 +23,7 @@
style="
font-size: 16px;
line-height: 1.55;
text-align: right;
padding-right: 8px;
text-align: center;
letter-spacing: 1px;
">
余热发电
@@ -32,11 +32,10 @@
style="
font-size: 16px;
line-height: 1.55;
text-align: right;
padding-right: 8px;
text-align: center;
letter-spacing: 1px;
">
1023kWh
{{energyInfo.elecQty1}}kwh
</span>
</ShadowRect>
@@ -45,14 +44,14 @@
style="
font-size: 16px;
line-height: 1.25;
flex: 1.2;
flex: 1;
text-align: right;
padding-right: 8px;
letter-spacing: 3px;
">
<p style="margin: 0; line-height: inherit">水耗量</p>
</div>
<span style="font-size: 16px; line-height: 1.24; flex: 1">32Km³</span>
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{energyInfo.waterQty}}m³</span>
</ShadowRect>
<ShadowRect>
@@ -60,14 +59,14 @@
style="
font-size: 16px;
line-height: 1.25;
flex: 1.2;
flex: 1;
text-align: right;
padding-right: 8px;
letter-spacing: 3px;
">
<p style="margin: 0; line-height: inherit">天然气I</p>
</div>
<span style="font-size: 16px; line-height: 1.24; flex: 1">322Km³</span>
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{sumGasInfo.sumGas1Now}}</span>
</ShadowRect>
<ShadowRect>
@@ -75,14 +74,14 @@
style="
font-size: 16px;
line-height: 1.25;
flex: 1.2;
flex: 1;
text-align: right;
padding-right: 8px;
letter-spacing: 3px;
">
<p style="margin: 0; line-height: inherit">电耗量</p>
</div>
<span style="font-size: 16px; line-height: 1.24; flex: 1">132kWh</span>
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{energyInfo.elecQty2}}kwh</span>
</ShadowRect>
<ShadowRect>
@@ -90,14 +89,14 @@
style="
font-size: 16px;
line-height: 1.25;
flex: 1.2;
flex: 1;
text-align: right;
padding-right: 8px;
letter-spacing: 3px;
">
<p style="margin: 0; line-height: inherit">天然气II</p>
</div>
<span style="font-size: 16px; line-height: 1.24; flex: 1">992Km³</span>
<span style="font-size: 16px; line-height: 1.24; flex: 1">{{sumGasInfo.sumGas2Now}}</span>
</ShadowRect>
</div>
</template>
@@ -112,7 +111,14 @@ export default {
data() {
return {};
},
computed: {},
computed: {
sumGasInfo(){
return this.$store.state.websocket.sumGasInfo
},
energyInfo() {
return this.$store.state.websocket.energyInfo
}
},
methods: {},
};
</script>

36
src/views/databoard/kiln/FanSequence.vue
View File

@@ -7,32 +7,32 @@
<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> -->
<div
class="absolute"
style="
padding: 12px;
padding: 5px 12px;
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.15;
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.15; 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>

90
src/views/databoard/kiln/GasHandle.vue
View File

@@ -1,10 +1,3 @@
<!--
filename: GasHandle.vue
author: liubin
date: 2023-12-11 09:02:40
description:
-->
<template>
<div class="gas-handle" style="flex: 2">
<Container name="烟气处理" size="large" style="">
@@ -21,21 +14,21 @@
<ShadowRect>
<span
style="
font-size: 16px;
font-size: 20px;
line-height: 1.24;
flex: 1.2;
text-align: right;
padding-right: 8px;
letter-spacing: 1px;
letter-spacing: 3px;
">
氧气含量
</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">{{exhaustGasInfo?.O2_float ? (exhaustGasInfo?.O2_float).toFixed(2): ''}}%</span>
</ShadowRect>
<ShadowRect>
<div
style="
font-size: 16px;
font-size: 20px;
line-height: 1.5;
flex: 1.2;
text-align: right;
@@ -45,13 +38,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">{{exhaustGasInfo?.NOX_float ? (exhaustGasInfo?.NOX_float).toFixed(2):''}}mg/m³</span>
</ShadowRect>
<ShadowRect>
<div
style="
font-size: 16px;
font-size: 20px;
line-height: 1.5;
flex: 1.2;
text-align: right;
@@ -61,38 +54,37 @@
<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">{{exhaustGasInfo?.SO2_float ? (exhaustGasInfo?.SO2_float).toFixed(2): ''}}mg/m³</span>
</ShadowRect>
<ShadowRect>
<div
<span
style="
font-size: 16px;
line-height: 1.5;
font-size: 20px;
line-height: 1.24;
flex: 1.2;
text-align: right;
padding-right: 8px;
letter-spacing: 3px;
letter-spacing: 1px;
">
<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>
<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.dust_float ? (exhaustGasInfo?.dust_float).toFixed(2) : ''}}mg/m³</span>
</ShadowRect>
</div>
<KilnLine :horizontal="true" />
<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,11 +95,11 @@
justify-content: space-between;
">
<SelectorBtnGroup
:options="['氧气含量', '二氧化硫', '一氧化氢', '二氧化氢']" />
<SelectorBtnGroup :options="['日', '周', '月', '年']" />
:options="['氧气含量', '二氧化硫', '一氧化氮', '颗粒物']" @emitFun='toggleType' :active='chartType'/>
<SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
</div>
<div class="chart" style="height: 220px">
<GasChart />
<div class="chart" style="height: 250px;margin-top: 10px;">
<FlueGas :chartType='chartType' :chartTime='chartTime'/>
</div>
</div>
</Container>
@@ -115,12 +107,12 @@
</template>
<script>
import Container from '../components/Container.vue';
import Container from '../components/Container';
import ShadowRect from '../components/ShadowRect.vue';
import KilnLine from '../components/line';
import Switcher from '../components/Switcher.vue';
import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
import GasChart from '../components/GasChart.vue';
import Switcher from '../components/Switcher';
import SelectorBtnGroup from '../components/SelectorBtnGroup';
import FlueGas from '../components/FlueGas';
export default {
name: 'GasHandle',
@@ -130,14 +122,32 @@ export default {
KilnLine,
Switcher,
SelectorBtnGroup,
GasChart,
FlueGas,
},
props: {},
data() {
return {};
return {
chartType:'氧气含量',
chartTime:'日'
};
},
computed: {
exhaustGasInfo() {
return this.$store.state.websocket.exhaustGasInfo
}
},
methods: {
// 烟气
toggleType(val) {
console.log('烟气' + val)
this.chartType = val
},
// 切换时间
toggleDate(val) {
console.log('时间' + val)
this.chartTime = val
}
},
computed: {},
methods: {},
};
</script>

9
src/views/databoard/kiln/IsraCheck.vue
View File

@@ -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,12 +28,12 @@
<li class="fault-3">缺陷3</li>
<li class="fault-4">缺陷4</li>
</ul>
</div>
</div> -->
</Container>
</template>
<script>
import Container from '../components/Container.vue';
import Container from '../components/Container';
import ShadowRect from '../components/ShadowRect.vue';
import ISRAChart from '../components/ISRAChart.vue';

71
src/views/databoard/kiln/KilnInfo.vue
View File

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

4
src/views/databoard/kiln/LeftFour.vue
View File

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

99
src/views/databoard/kiln/MaterialCost.vue
View File

@@ -7,41 +7,71 @@
<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}}/kg-
</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}}/kg-
</span>
</div>
</ShadowRect>
</div>
</div>
</Container>
</template>
<script>
import Container from '../components/Container.vue';
import Container from '../components/Container';
import ShadowRect from '../components/ShadowRect.vue';
export default {
name: 'MaterialCost',
@@ -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>

12
src/views/databoard/kiln/RightTwo.vue
View File

@@ -8,18 +8,22 @@
<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>
</template>
<script>
import Container from '../components/Container.vue';
import Container from '../components/Container';
import ShadowRect from '../components/ShadowRect.vue';
import KilnLine from '../components/line';
import Switcher from '../components/Switcher.vue';
import SelectorBtnGroup from '../components/SelectorBtnGroup.vue';
import Switcher from '../components/Switcher';
import SelectorBtnGroup from '../components/SelectorBtnGroup';
import KilnInfo from './KilnInfo.vue';
import GasHandle from './GasHandle.vue';
export default {

153
src/views/databoard/kiln/index.vue
View File

@@ -1,63 +1,141 @@
<!--
filename: KilnDataBoard.vue
author: liubin
date: 2023-12-04 16:51:00
description:
-->
<template>
<div
class="KilnDataBoard"
style="
position: absolute;
top: -8px;
left: -16px;
width: calc(100% + 28px);
height: calc(100% + 38px);
display: flex;
flex-direction: column;
gap: 16px;
">
<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: left top;
font-size: 16px;
top: 0px;
left: 0px;
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'
export default {
name: 'KilnDataBoard',
name: 'Kiln',
components: {
KHeader,
LeftFour,
RightTwo,
},
computed:{
sidebarStatus() {
return this.$store.state.app.sidebar.opened;
}
},
// provide() {
// return {
// resizeChart: null,
// };
// },
mounted() {
// this.$el.addEventListener('resize', () => {
// console.log('resizzzze...')
// this.resizeChart = Math.random();
// });
},
data() {
return {};
return {
isFullScreen: false,
scaleNum: 0.8
};
},
watch: {
sidebarStatus() {
this.boxReset()
},
},
created() {
this.init()
},
destroy() {
this.destroy()
},
mounted() {
this.boxReset = debounce(() => {
this.resetSize()
}, 300)
this.boxReset()
window.addEventListener('resize', () => {
this.boxReset()
})
},
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>
@@ -66,5 +144,6 @@ export default {
background: url(../assets/bg.png) no-repeat;
background-size: cover;
background-position: 0 0;
overflow: auto;
}
</style>

55
src/views/databoard/mixins/resize.js Normal file
View 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
View 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)
}
}

160
src/views/databoard/utils/wsInterface.js Normal file
View File

@@ -0,0 +1,160 @@
import { connectWebsocket, closeWebsocket } from './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;
}
case "SumGasInfo": {
store.dispatch({type: "websocket/setSumGasInfo", 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)
// }
// )
// 能耗 EN
// connectWebsocket(
// // 测试地址
// 'ws://10.70.2.2:8080/websocket/message?userId=ENERGY'+sj,
// // 传递给后台的数据
// '',
// // 成功拿到后台返回的数据的回调函数
// (data) => {
// console.log('mes 能耗成功的回调函数, 接收到的data数据: ', data)
// let msgData = JSON.parse(data)
// if (msgData == null) return;
// switch (msgData?.type) {
// case "EnergyInfo": {
// store.dispatch({type: "websocket/setEnergyInfo", payload:msgData.data})
// break;
// }
// default:
// }
// },
// // websocket连接失败的回调函数
// (err) => {
// console.log('失败的回调函数', err)
// }
// )
// 烟气 GAS
connectWebsocket(
// 测试地址
'ws://10.70.2.2:8080/websocket/message?userId=GAS'+sj,
// 传递给后台的数据
'',
// 成功拿到后台返回的数据的回调函数
(data) => {
console.log('mes 烟气成功的回调函数, 接收到的data数据: ', data)
let msgData = JSON.parse(data)
if (msgData == null) return;
switch (msgData?.type) {
case "exhaustGas": {
store.dispatch({type: "websocket/setExhaustGasInfo", payload:msgData.realtime})
store.dispatch({type: "websocket/setExhaustGasChart", payload:{
dayTrend: msgData.dayTrend,
weekTrend: msgData.weekTrend,
monthTrend: msgData.monthTrend,
yearTrend: msgData.yearTrend,
}})
break;
}
default:
}
},
// websocket连接失败的回调函数
(err) => {
console.log('失败的回调函数', err)
}
)
}

38
src/views/databoard/wholePlant/DefectClass.vue Normal file
View File

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

38
src/views/databoard/wholePlant/DefectStatistics.vue Normal file
View File

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

29
src/views/databoard/wholePlant/LeftTwo.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<div
class="left-two"
style="
display: grid;
gap: 16px;
grid-template-rows: 308px 616px;
">
<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
View File

@@ -0,0 +1,29 @@
<template>
<div
class="middle-two"
style="
display: grid;
gap: 16px;
grid-template-rows: 605px 320px;
">
<GasHandle />
<DefectStatistics />
</div>
</template>
<script>
import GasHandle from './../kiln/GasHandle';
import DefectStatistics from './DefectStatistics';
export default {
name: 'MiddleFour',
components: { GasHandle, DefectStatistics },
props: {},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss"></style>

43
src/views/databoard/wholePlant/OrderStatus.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<div style="flex: 1;">
<Container name="订单完成情况" size="small" style="">
<div style="padding: 5px 10px;">
<ScrollBoard :config = "config" width='575px' height='230px'/>
</div>
</Container>
</div>
</template>
<script>
import Container from '../components/Container'
import ScrollBoard from '../components/ScrollBoard'
export default {
name: 'OrderStatus',
components: { Container, ScrollBoard },
data() {
return {
config: {
header: ['上线时间', '客户名称', '规格','完成度'],
// headerHeight: '17',
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
// columnWidth: [60],
align: ['center'],
data: [
['2023-12-01', '客户1', '行1列3', ''],
['2023-12-01', '客户2', '行2列3', ''],
['2023-12-01', '客户3', '行3列3', ''],
['2023-12-01', '客户4', '行4列3', ''],
['2023-12-01', '客户5', '行5列3', ''],
['2023-12-01', '客户6', '行6列3', ''],
['2023-12-01', '客户7', '行7列3', ''],
['2023-12-01', '客户8', '行8列3', ''],
['2023-12-01', '客户9', '行9列3', ''],
['2023-12-01', '客户10', '行10列3', '']
],
rowNum: 6
}
}
}
}
</script>

29
src/views/databoard/wholePlant/RightTwo.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<div
class="right-two"
style="
display: grid;
gap: 16px;
grid-template-rows: 462px 462px;
">
<EnergeCost />
<DefectClass />
</div>
</template>
<script>
import EnergeCost from './../kiln/EnergeCost.vue';
import DefectClass from './DefectClass.vue';
export default {
name: 'RightFour',
components: { EnergeCost, DefectClass },
props: {},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss"></style>

45
src/views/databoard/wholePlant/YieldRate.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<div style="flex: 2;" class="aaa">
<Container name="本日生产良品率" size="small" style="">
<ScrollBoard :config = "config" width='575px' height='300px'/>
</Container>
</div>
</template>
<script>
import Container from '../components/Container';
import ScrollBoard from '../components/ScrollBoard'
export default {
name: 'YieldRate',
components: { Container, ScrollBoard },
data() {
return {
config: {
header: ['序号', '设备名称', '设备编码','设备状态','是否故障'],
// headerHeight: '17',
headerBGC: 'rgba(32, 55, 96, 0.8)',
oddRowBGC: 'rgba(32, 55, 96, 0.8)',
evenRowBGC: 'rgba(14, 32, 62, 0.8)',
columnWidth: [60],
align: ['center'],
data: [
[1, '设备1', '行1列3', '', ''],
[2, '设备2', '行2列3', '', ''],
[3, '设备3', '行3列3', '', ''],
[4, '设备4', '行4列3', '', ''],
[5, '设备5', '行5列3', '', ''],
[6, '设备6', '行6列3', '', ''],
[7, '设备7', '行7列3', '', ''],
[8, '设备8', '行8列3', '', ''],
[9, '设备9', '行9列3', '', ''],
[10, '设备10', '行10列3', '', '']
],
rowNum: 10
}
}
},
methods: {
}
}
</script>
<style lang='scss'>
</style>

146
src/views/databoard/wholePlant/index.vue Normal file
View File

@@ -0,0 +1,146 @@
<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: 0px;
left: 0px;
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'
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()
})
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>

4
src/views/login.vue
View File

@@ -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">

11
src/views/specialEquipment/basic/FireFighthing.vue
View File

@@ -170,7 +170,12 @@ export default {
{ width: 256, prop: 'code', label: '设备编码' },
{ prop: 'location', label: '位置' },
{ prop: 'responsiblePeopleName', label: '负责人' },
{ prop: 'dueTime', label: '有效期至' },
{
prop: 'dueDate',
label: '有效期至',
filter: (val) =>
val != null ? moment(val).format('yyyy-MM-DD HH:mm:ss') : '--',
},
{ prop: 'remark', label: '备注' },
],
searchBarFormConfig: [
@@ -250,8 +255,8 @@ export default {
[
{
datetime: true,
label: '有效期至',
prop: 'dueTime',
label: '有效期',
prop: 'dueDate',
bind: { clearable: true },
},
{},

9
src/views/specialEquipment/maintain/Record.vue
View File

@@ -195,18 +195,21 @@ export default {
{ id: 3, name: '特种设备' },
],
filterable: true,
defaultSelect: null
},
{
type: 'select',
label: '设备',
placeholder: '请选择设备',
param: 'equipmentId',
defaultSelect: null
},
{
type: 'select',
label: '计划名称',
placeholder: '请选择计划名称',
param: 'maintainPlanId',
defaultSelect: null
},
// 开始结束时间
{
@@ -220,6 +223,7 @@ export default {
endPlaceholder: '结束日期',
defaultTime: ['00:00:00', '23:59:59'],
param: 'startTime',
defaultSelect: null
// width: 350,
},
{
@@ -229,6 +233,7 @@ export default {
{ name: '是', id: 1 },
{ name: '否', id: 2 },
],
defaultSelect: null,
param: 'relatePlan',
},
{
@@ -434,12 +439,16 @@ export default {
created() {
this.initSearchBar();
if (this.$route.query) {
this.queryParams.specialType =
this.$route.query?.specialType ?? undefined;
this.queryParams.equipmentId =
this.$route.query?.equipmentId ?? undefined;
this.queryParams.maintainPlanId =
this.$route.query?.maintainPlanId ?? undefined;
this.queryParams.relatePlan = this.$route.query?.relatePlan ?? undefined;
this.queryParams.startTime = this.$route.query?.createTime ?? undefined;
this.searchBarFormConfig[0].defaultSelect =
this.$route.query.specialType ?? undefined;
this.searchBarFormConfig[1].defaultSelect =
this.$route.query.equipmentId ?? undefined;
this.searchBarFormConfig[2].defaultSelect =