@@ -2,7 +2,7 @@ | |||
* @Author: zwq | |||
* @Date: 2021-07-19 15:18:30 | |||
* @LastEditors: zhp | |||
* @LastEditTime: 2024-03-27 10:25:15 | |||
* @LastEditTime: 2024-03-27 15:42:39 | |||
* @Description: | |||
--> | |||
<template> | |||
@@ -16,7 +16,7 @@ | |||
许昌安彩AGV原片周转看板 | |||
<h3 class="unit">单位:河南汇融数字科技有限公司</h3> | |||
<h3 class="time">{{ times }}</h3> | |||
<!-- <el-button | |||
<el-button | |||
type="text" | |||
class="title-button" | |||
:style="{ right: 33 + 'px', top: 37 + 'px' }" | |||
@@ -24,7 +24,7 @@ | |||
> | |||
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" /> | |||
<svg-icon v-else icon-class="fullScreenView" /> | |||
</el-button> --> | |||
</el-button> | |||
</el-row> | |||
<el-row class="container-main flex-col" type="flex"> | |||
<el-row :style="{ padding: '0 ' + 9 + 'px' }" :gutter="15 * beilv" type="flex" class="flex-1"> | |||
@@ -383,18 +383,18 @@ export default { | |||
this.isFullScreen = screenfull.isFullscreen | |||
}, | |||
init() { | |||
if (screenfull.enabled) { | |||
if (screenfull.isEnabled) { | |||
screenfull.on('change', this.change) | |||
} | |||
}, | |||
destroy() { | |||
if (screenfull.enabled) { | |||
if (screenfull.isEnabled) { | |||
screenfull.off('change', this.change) | |||
} | |||
}, | |||
changeFullScreen() { | |||
console.log(this.beilv); | |||
if (!screenfull.enabled) { | |||
if (!screenfull.isEnabled) { | |||
this.$message({ | |||
message: 'you browser can not work', | |||
type: 'warning' | |||
@@ -421,16 +421,16 @@ export default { | |||
// opacity: .8; | |||
.container-title { | |||
width: 100%; | |||
background: url('../../assets/img/OperationalOverview/title.png') no-repeat; | |||
background: url('../../assets/img/OperationalOverview/AGV.png') no-repeat; | |||
background-size: 100% 100%; | |||
color: #00fff0; | |||
text-align: center; | |||
letter-spacing: 8px; | |||
word-spacing: 8px; | |||
// word-spacing: 8px; | |||
position: relative; | |||
.unit{ | |||
position: absolute; | |||
left: 290px; | |||
left: 240px; | |||
top:25px; | |||
color: rgba($color: #ffffff, $alpha: 8); | |||
font-size: 20px; | |||
@@ -438,7 +438,7 @@ export default { | |||
} | |||
.time{ | |||
position: absolute; | |||
left: 1360px; | |||
left: 1400px; | |||
top:25px; | |||
color: rgba($color: #ffffff, $alpha: 8); | |||
font-size: 20px; | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-01-29 16:50:26 | |||
* @LastEditTime: 2024-03-27 10:58:39 | |||
* @LastEditTime: 2024-03-27 17:02:27 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -17,15 +17,11 @@ | |||
许昌安彩冷端看板 | |||
<h3 class="unit">单位:河南汇融数字科技有限公司</h3> | |||
<h3 class="time">{{ times }}</h3> | |||
<!-- <el-button | |||
type="text" | |||
class="title-button" | |||
:style="{ right: 33 + 'px', top: 37 + 'px' }" | |||
@click="changeFullScreen" | |||
> | |||
<el-button type="text" class="title-button" :style="{ right: 33 + 'px', top: 37 + 'px' }" | |||
@click="changeFullScreen"> | |||
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" /> | |||
<svg-icon v-else icon-class="fullScreenView" /> | |||
</el-button> --> | |||
</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"> | |||
@@ -68,8 +64,19 @@ | |||
</div> --> | |||
<!-- <el-row :gutter="9"> --> | |||
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="24"> --> | |||
<pile-bar-chart ref="pileChart" :name-list="EnergyMonitoringNameList" :data-list="EnergyMonitoringList" | |||
:height="359" /> | |||
<pile-bar-chart style="margin-bottom: -15px" ref="firstPileChart" :height="90" /> | |||
<second-pile-bar-chart style="margin-bottom: -15px" id=" 'second' " ref="secondPileChart" :height="90" /> | |||
<third-pile-bar-chart style="margin-bottom: -15px" id=" 'third' " ref="thirdPileChart" :height="90" /> | |||
<fourth-pile-bar-chart style="margin-bottom: -15px" id=" 'fourth' " ref="fourthPileChart" :height="90" /> | |||
<fifth-pile-bar-chart style="margin-bottom: -15px" id=" 'fifth' " ref="fifthPileChart" :height="100" /> | |||
<!-- <pile-bar-chart ref="secondPileChart" | |||
:height="90" /> | |||
<pile-bar-chart ref="thirdPileChart" | |||
:height="90" /> | |||
<pile-bar-chart ref="fourthPileChart" | |||
:height="90" /> | |||
<pile-bar-chart ref="fifthPileChart" | |||
:height="90" /> --> | |||
<!-- </el-col> --> | |||
<!-- <el-col :style="{ margin: 8 + 'px' + ' 0' }" :span="12"> | |||
<base-table3 | |||
@@ -136,6 +143,11 @@ import baseContainer from './components/baseContainer' | |||
import baseTable1 from './components/baseTable' | |||
import screenfull from 'screenfull' | |||
import pileBarChart from './components/pileBarChart' | |||
import secondPileBarChart from './components/pileBarChart' | |||
import thirdPileBarChart from './components/pileBarChart' | |||
import fourthPileBarChart from './components/pileBarChart' | |||
import fifthPileBarChart from './components/pileBarChart' | |||
import colorDiv from './components/colorDiv' | |||
import moment from "moment"; | |||
import doubleYChart from './components/coldDoubleYChart' | |||
@@ -152,7 +164,11 @@ export default { | |||
pileBarChart, | |||
doubleYChart, | |||
LinearBarChart, | |||
ISRAChart | |||
ISRAChart, | |||
secondPileBarChart, | |||
thirdPileBarChart , | |||
fourthPileBarChart, | |||
fifthPileBarChart , | |||
}, | |||
data() { | |||
return { | |||
@@ -256,6 +272,13 @@ export default { | |||
}, | |||
watch: { | |||
isFullScreen: function (val) { | |||
if (val) { | |||
this.beilv = document.body.offsetWidth / 1920 | |||
} else { | |||
this.beilv = document.getElementById('container').offsetWidth / 1920 | |||
} | |||
}, | |||
clientWidth(val) { | |||
if (!this.timer) { | |||
this.clientWidth = val | |||
@@ -287,21 +310,92 @@ export default { | |||
} | |||
}, | |||
mounted() { | |||
console.log(moment(this.logoutTime - 28800000).format('HH:mm:ss')); | |||
// let nameList = [] | |||
// let nameWasteList = [] | |||
// let topNameList = [] | |||
// let productList = [] | |||
// let wasteList = [] | |||
// // let sumAreaList = [] | |||
// // let yieldList = [] | |||
// // this.cutTableDataList = | |||
// let coldDetData = [ | |||
// { | |||
// "first": 0.8834, | |||
// "lineName": "Y61", | |||
// "product": 0.8834, | |||
// "productArea": 35069.28, | |||
// "second": 0, | |||
// 'sumArea': 38400, | |||
// 'wastArea': 3330.72, | |||
// "waste": 0.1166 | |||
// }, | |||
// { | |||
// "first": 0.847, | |||
// "lineName": "Y62", | |||
// "product": 0.847, | |||
// "productArea": 26765.46, | |||
// "second": 0, | |||
// 'sumArea': 1111111, | |||
// 'wastArea': 22222, | |||
// "waste": 0.153 | |||
// }, | |||
// { | |||
// "first": 0.8668, | |||
// "lineName": "Y63", | |||
// "product": 0.8668, | |||
// "productArea": 26448.46, | |||
// "second": 0, | |||
// 'sumArea': 1111111, | |||
// 'wastArea': 22222, | |||
// "waste": 0.1332 | |||
// }, | |||
// { | |||
// "first": 0.9064, | |||
// "lineName": "Y64", | |||
// "product": 0.9064, | |||
// "productArea": 26667.32, | |||
// "second": 0, | |||
// 'sumArea': 1111111, | |||
// 'wastArea': 22222, | |||
// "waste": 0.0936 | |||
// }, | |||
// { | |||
// "first": 0.8838, | |||
// "lineName": "Y65", | |||
// "product": 0.8838, | |||
// "productArea": 26554.32, | |||
// "second": 0, | |||
// 'sumArea': 1111111, | |||
// 'wastArea': 22222, | |||
// "waste": 0.1162 | |||
// } | |||
// ] | |||
// coldDetData.forEach((ele, index) => { | |||
// nameList.push(ele.lineName) | |||
// topNameList.push('产线: ' + ele.lineName + ' ' + '总面积:' + ele.sumArea) | |||
// productList.push(ele.productArea) | |||
// wasteList.push(ele.wastArea) | |||
// nameWasteList.push('缺陷面积:' + ele.wastArea) | |||
// // sumAreaList.push(ele.sumArea) | |||
// // yieldList.push((ele.yield * 100).toFixed(3)) | |||
// }) | |||
// this.$refs.firstPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]]) | |||
// this.$refs.secondPileChart.initChart(nameList, [topNameList[1]], [nameWasteList[1]], [productList[1]], [wasteList[1]]) | |||
// this.$refs.thirdPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]]) | |||
// this.$refs.fourthPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]]) | |||
// this.$refs.fifthPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]]) | |||
// this.$refs.productChart.initChart(nameList, yieldList, sumAreaList) | |||
this.getTimes() | |||
// console.log(moment(this.logoutTime - 28800000).format('HH:mm:ss')); | |||
this.funInitWebSocket() | |||
// if (num > 0) { | |||
if (!this.wsIsOpen) { | |||
getDcsMsg() | |||
this.wsIsOpen = true | |||
console.log('开启websocket==========') | |||
} | |||
// } else { | |||
// } | |||
this.CutInitWebSocket() | |||
this.SJGInitWebSocket() | |||
// this.getList() | |||
this.getTimes() | |||
const _this = this; | |||
_this.beilv2 = document.documentElement.clientWidth / 1920 | |||
window.onresize = () => { | |||
@@ -453,7 +547,11 @@ export default { | |||
sumAreaList.push(ele.sumArea) | |||
yieldList.push((ele.yield * 100).toFixed(3)) | |||
}) | |||
this.$refs.pileChart.initChart(nameList, topNameList, nameWasteList, productList, wasteList) | |||
this.$refs.firstPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]]) | |||
this.$refs.secondPileChart.initChart(nameList, [topNameList[1]], [nameWasteList[1]], [productList[1]], [wasteList[1]]) | |||
this.$refs.thirdPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]]) | |||
this.$refs.fourthPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]]) | |||
this.$refs.fifthPileChart.initChart(nameList, [topNameList[0]], [nameWasteList[0]], [productList[0]], [wasteList[0]]) | |||
this.$refs.productChart.initChart(nameList, yieldList, sumAreaList) | |||
} | |||
}; | |||
@@ -674,21 +772,22 @@ export default { | |||
this.beilv2 = this.clientWidth / 1920 | |||
}, | |||
change() { | |||
console.log(this.isFullScreen); | |||
this.isFullScreen = screenfull.isFullscreen | |||
}, | |||
init() { | |||
if (screenfull.enabled) { | |||
if (screenfull.isEnabled) { | |||
screenfull.on('change', this.change) | |||
} | |||
}, | |||
destroy() { | |||
if (screenfull.enabled) { | |||
if (screenfull.isEnabled) { | |||
screenfull.off('change', this.change) | |||
} | |||
}, | |||
changeFullScreen() { | |||
this.containerWidth = 223223223 | |||
if (!screenfull.enabled) { | |||
if (!screenfull.isEnabled) { | |||
this.$message({ | |||
message: 'you browser can not work', | |||
type: 'warning' | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2023-09-21 09:06:28 | |||
* @LastEditTime: 2024-03-26 16:16:50 | |||
* @LastEditTime: 2024-03-27 14:37:35 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -147,72 +147,40 @@ export default { | |||
] | |||
// const colors = ['#5470C6', '#91CC75', '#EE6666'] | |||
this.chart = echarts.init(document.getElementById(this.id)) | |||
this.chart.setOption({ | |||
// color: colors, | |||
tooltip: { | |||
trigger: 'axis', | |||
axisPointer: { | |||
type: 'cross' | |||
} | |||
}, | |||
grid: { top: 90, right: 60, bottom: 20, left: 90 }, | |||
legend: { | |||
itemWidth: 10, | |||
itemHeight: 10, | |||
top: '0%', | |||
right: '20px', | |||
data: ['产线产量', '产线良品率'], | |||
textStyle: { | |||
fontSize: 12 * this.beilv, | |||
color: '#ced1d5' | |||
} | |||
}, | |||
xAxis: { | |||
type: 'category', | |||
axisLine: { | |||
lineStyle: { | |||
type: 'solid', | |||
color: '#25528f', | |||
width: '1' // 坐标线的宽度 | |||
} | |||
if (!nameList && !passRateList && !outputNumList) { | |||
// 隐藏echarts图表 | |||
this.chart.clear(); // 清空图表 | |||
this.chart.setOption({ // 设置空的option | |||
title: { | |||
show: false | |||
}, | |||
axisLabel: { | |||
color: "#fff", | |||
fontSize: 12, | |||
// formatter: '{value}' | |||
// textStyle: { | |||
// color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色 | |||
// } | |||
series: [] | |||
}); | |||
} else { | |||
// 显示echarts图表 | |||
this.chart.setOption({ | |||
// color: colors, | |||
tooltip: { | |||
trigger: 'axis', | |||
axisPointer: { | |||
type: 'cross' | |||
} | |||
}, | |||
splitLine: { | |||
lineStyle: { | |||
color: '#25528f' | |||
grid: { top: 90, right: 60, bottom: 20, left: 90, containLabel: true }, | |||
legend: { | |||
itemWidth: 10, | |||
itemHeight: 10, | |||
top: '0%', | |||
right: '20px', | |||
data: ['产线产量', '产线良品率'], | |||
textStyle: { | |||
fontSize: 12 * this.beilv, | |||
color: '#ced1d5' | |||
} | |||
}, | |||
data: nameList | |||
}, | |||
// yAxis: { | |||
// }, | |||
yAxis: [ | |||
{ | |||
// min: function() { // 取最小值向下取整为最小刻度 | |||
// return 0 | |||
// }, | |||
// max: function(value) { // 取最大值向上取整为最大刻度 | |||
// return Math.ceil(value.max) | |||
// }, | |||
scale: true, | |||
type: 'value', | |||
name: '良品率/%', | |||
nameTextStyle: {// y轴上方单位的颜色 | |||
color: '#fff', | |||
align: "left", | |||
}, | |||
position: 'right', | |||
alignTicks: true, | |||
xAxis: { | |||
type: 'category', | |||
axisLine: { | |||
show: true, | |||
lineStyle: { | |||
type: 'solid', | |||
color: '#25528f', | |||
@@ -223,72 +191,118 @@ export default { | |||
color: "#fff", | |||
fontSize: 12, | |||
// formatter: '{value}' | |||
formatter: '{value}%' | |||
// textStyle: { | |||
// color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色 | |||
// } | |||
}, | |||
splitLine: { | |||
lineStyle: { | |||
color: '#25528f' | |||
} | |||
} | |||
// type: 'value' | |||
// axisLine: { | |||
// show: true, | |||
// lineStyle: { | |||
// color: colors[0] | |||
// } | |||
// }, | |||
}, | |||
{ | |||
// min: function() { // 取最小值向下取整为最小刻度 | |||
// return 0 | |||
// }, | |||
// max: function(value) { // 取最大值向上取整为最大刻度 | |||
// return Math.ceil(value.max) | |||
// }, | |||
scale: true, | |||
type: 'value', | |||
name: '产量/片', // y轴上方的单位 | |||
nameTextStyle: { | |||
color: "#fff", | |||
// fontSize: 10, | |||
align: "right", | |||
}, | |||
// position: 'left', | |||
alignTicks: true, | |||
axisLine: { | |||
show: true, | |||
lineStyle: { | |||
type: 'solid', | |||
color: '#25528f', // 左边线的颜色 | |||
width: '1' // 坐标线的宽度 | |||
data: nameList | |||
}, | |||
// yAxis: { | |||
// }, | |||
yAxis: [ | |||
{ | |||
// min: function() { // 取最小值向下取整为最小刻度 | |||
// return 0 | |||
// }, | |||
// max: function(value) { // 取最大值向上取整为最大刻度 | |||
// return Math.ceil(value.max) | |||
// }, | |||
scale: true, | |||
type: 'value', | |||
name: '良品率/%', | |||
nameTextStyle: {// y轴上方单位的颜色 | |||
color: '#fff', | |||
align: "left", | |||
}, | |||
position: 'right', | |||
alignTicks: true, | |||
axisLine: { | |||
show: true, | |||
lineStyle: { | |||
// type: 'solid', | |||
color: '#25528f', | |||
// width: '1' // 坐标线的宽度 | |||
} | |||
}, | |||
axisLabel: { | |||
color: "#fff", | |||
fontSize: 12, | |||
// formatter: '{value}' | |||
formatter: '{value}%' | |||
// } | |||
}, | |||
splitLine: { | |||
lineStyle: { | |||
color: '#25528f' | |||
} | |||
} | |||
// type: 'value' | |||
// axisLine: { | |||
// show: true, | |||
// lineStyle: { | |||
// color: colors[0] | |||
// } | |||
// }, | |||
}, | |||
axisLabel: { | |||
// textStyle: { | |||
// color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色 | |||
color: "#fff", | |||
fontSize: 12, | |||
// formatter: '{value}' | |||
formatter: '{value} 片' | |||
// } | |||
}, | |||
splitLine: { | |||
lineStyle: { | |||
color: '#25528f' | |||
{ | |||
// min: function() { // 取最小值向下取整为最小刻度 | |||
// return 0 | |||
// }, | |||
// max: function(value) { // 取最大值向上取整为最大刻度 | |||
// return Math.ceil(value.max) | |||
// }, | |||
scale: true, | |||
type: 'value', | |||
name: '产量/片', // y轴上方的单位 | |||
nameTextStyle: { | |||
color: "#fff", | |||
// fontSize: 10, | |||
align: "right", | |||
}, | |||
// position: 'left', | |||
alignTicks: true, | |||
axisLine: { | |||
show: true, | |||
lineStyle: { | |||
// type: 'solid', | |||
color: '#25528f', // 左边线的颜色 | |||
// width: '1' // 坐标线的宽度 | |||
} | |||
}, | |||
axisLabel: { | |||
// textStyle: { | |||
// color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色 | |||
color: "#fff", | |||
// show: true, | |||
lineStyle: { | |||
color: "#25528f", | |||
}, | |||
// } | |||
}, | |||
splitLine: { | |||
lineStyle: { | |||
color: '#25528f' | |||
} | |||
} | |||
// type: 'value' | |||
// axisLine: { | |||
// show: true, | |||
// lineStyle: { | |||
// color: colors[1] | |||
// }jik078u7uut9890999999999999999999999999999999999999999999999999999999999999995u8 | |||
// }, | |||
} | |||
// type: 'value' | |||
// axisLine: { | |||
// show: true, | |||
// lineStyle: { | |||
// color: colors[1] | |||
// }jik078u7uut9890999999999999999999999999999999999999999999999999999999999999995u8 | |||
// }, | |||
} | |||
], | |||
series: series | |||
}) | |||
], | |||
series: series | |||
}) | |||
} | |||
} | |||
} | |||
} | |||
@@ -87,8 +87,17 @@ export default { | |||
// console.log('1111', dataList); | |||
// console.log(1) | |||
this.chart = echarts.init(document.getElementById(this.id)) | |||
// if (dataList.length !== 0) { | |||
// this.$set(this.series, "data", dataList); | |||
if (!nameList && !dataList) { | |||
// 隐藏echarts图表 | |||
this.chart.clear(); // 清空图表 | |||
this.chart.setOption({ // 设置空的option | |||
title: { | |||
show: false | |||
}, | |||
series: [] | |||
}); | |||
} else { | |||
// 显示echarts图表 | |||
this.series = [{ | |||
type: 'bar', | |||
data: dataList, | |||
@@ -111,90 +120,94 @@ export default { | |||
}, | |||
barWidth: 12, | |||
}] | |||
// } | |||
// if (nameList.length !== 0) { | |||
// } | |||
// if (nameList.length !== 0) { | |||
this.nameList = nameList | |||
// } | |||
this.chart.setOption({ | |||
tooltip: { | |||
trigger: 'axis', | |||
axisPointer: { | |||
// 坐标轴指示器,坐标轴触发有效 | |||
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' | |||
} | |||
}, | |||
grid: { top: 90, right: 60, bottom: 20, left: 90 }, | |||
// legend: { | |||
// itemWidth: 10, | |||
// itemHeight: 10, | |||
// // right: '20px', | |||
// data: nameList, | |||
// textStyle: { | |||
// fontSize: 12 * this.beilv, | |||
// color: '#ced1d5' | |||
// } | |||
// }, | |||
xAxis: { | |||
type: 'category', | |||
axisLine: { | |||
lineStyle: { | |||
type: 'solid', | |||
color: '#25528f', // 左边线的颜色 | |||
width: '1' // 坐标线的宽度 | |||
} | |||
}, | |||
axisLabel: { | |||
color: "#fff", | |||
fontSize: 12, | |||
// formatter: '{value}' | |||
}, | |||
splitLine: { | |||
lineStyle: { | |||
color: '#25528f' | |||
// } | |||
this.chart.setOption({ | |||
tooltip: { | |||
trigger: 'axis', | |||
axisPointer: { | |||
// 坐标轴指示器,坐标轴触发有效 | |||
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' | |||
} | |||
}, | |||
data: this.nameList | |||
}, | |||
yAxis: { | |||
name: '单位kwh', | |||
nameTextStyle: { | |||
color: '#fff', | |||
fontSize: 10, | |||
align: 'right', | |||
}, | |||
type: 'value', | |||
axisLabel: { | |||
color: "#fff", | |||
fontSize: 12, | |||
// formatter: '{value}/kwh' | |||
}, | |||
axisLine: { | |||
show: true, | |||
lineStyle: { | |||
color: "#25528f", | |||
grid: { top: 90, right: 60, bottom: 20, left: 90, containLabel: true }, | |||
// legend: { | |||
// itemWidth: 10, | |||
// itemHeight: 10, | |||
// // right: '20px', | |||
// data: nameList, | |||
// textStyle: { | |||
// fontSize: 12 * this.beilv, | |||
// color: '#ced1d5' | |||
// } | |||
// }, | |||
xAxis: { | |||
type: 'category', | |||
axisLine: { | |||
lineStyle: { | |||
type: 'solid', | |||
color: '#25528f', // 左边线的颜色 | |||
width: '1' // 坐标线的宽度 | |||
} | |||
}, | |||
axisLabel: { | |||
color: "#fff", | |||
fontSize: 12, | |||
// formatter: '{value}' | |||
}, | |||
splitLine: { | |||
lineStyle: { | |||
color: '#25528f' | |||
} | |||
}, | |||
data: this.nameList | |||
}, | |||
splitLine: { | |||
lineStyle: { | |||
color: "#25528f", | |||
yAxis: { | |||
name: '单位kwh', | |||
nameTextStyle: { | |||
color: '#fff', | |||
fontSize: 10, | |||
align: 'right', | |||
}, | |||
} | |||
}, | |||
// 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 | |||
}) | |||
type: 'value', | |||
axisLabel: { | |||
color: "#fff", | |||
fontSize: 12, | |||
// formatter: '{value}/kwh' | |||
}, | |||
axisLine: { | |||
show: true, | |||
lineStyle: { | |||
color: "#25528f", | |||
}, | |||
}, | |||
splitLine: { | |||
lineStyle: { | |||
color: "#25528f", | |||
}, | |||
} | |||
}, | |||
// 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 | |||
}) | |||
} | |||
// if (dataList.length !== 0) { | |||
// this.$set(this.series, "data", dataList); | |||
} | |||
} | |||
} | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2023-12-27 13:54:52 | |||
* @LastEditTime: 2024-03-26 10:50:30 | |||
* @LastEditTime: 2024-03-27 16:50:04 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -42,7 +42,7 @@ export default { | |||
}, | |||
height: { | |||
type: Number, | |||
default: 200 | |||
default: 100 | |||
}, | |||
showLegend: { | |||
type: Boolean, | |||
@@ -127,23 +127,31 @@ export default { | |||
) : [] | |||
}; | |||
}); | |||
// this.charts.resize({ | |||
// //width: width, | |||
// //height: height, | |||
// // es6解构 | |||
// width, | |||
// height | |||
// }) | |||
this.chart.setOption({ | |||
legend: { | |||
itemWidth: 12, | |||
itemHeight: 12, | |||
top:'10', | |||
bottom: '20', | |||
left: '20', | |||
icon: 'rect', | |||
textStyle: { | |||
color: '#ffffff' | |||
} | |||
}, | |||
grid: { | |||
top:'80', | |||
top:'0', | |||
left: '3%', | |||
right: '4%', | |||
// bottom: '3%', | |||
width: 'auto', | |||
height: '300', | |||
height: '95', | |||
containLabel: true | |||
}, | |||
yAxis: [ | |||
@@ -170,7 +178,7 @@ export default { | |||
verticalAlign: 'bottom', | |||
fontSize: 12, | |||
align: 'left', | |||
padding: [0, 0, 15, -5] | |||
padding: [0, 0, 10, -5] | |||
} | |||
}, | |||
data: topNameList | |||
@@ -198,7 +206,7 @@ export default { | |||
verticalAlign: 'bottom', | |||
fontSize: 12, | |||
align: 'right', | |||
padding: [0, 0, 15, -5] | |||
padding: [0, 0, 10, -5] | |||
} | |||
}, | |||
data: nameWasteList | |||
@@ -210,6 +218,10 @@ export default { | |||
}, | |||
series:series | |||
}) | |||
this.chart.resize({ | |||
width: 'auto', | |||
height: 90 | |||
});; | |||
} | |||
} | |||
} | |||
@@ -2,7 +2,7 @@ | |||
* @Author: zwq | |||
* @Date: 2021-07-19 15:18:30 | |||
* @LastEditors: zhp | |||
* @LastEditTime: 2024-03-27 11:08:13 | |||
* @LastEditTime: 2024-03-27 16:13:14 | |||
* @Description: | |||
--> | |||
<template> | |||
@@ -16,6 +16,11 @@ | |||
许昌安彩深加工看板 | |||
<h3 class="unit">单位:河南汇融数字科技有限公司</h3> | |||
<h3 class="time">{{ times }}</h3> | |||
<el-button type="text" class="title-button" :style="{ right: 33 + 'px', top: 37 + 'px' }" | |||
@click="changeFullScreen"> | |||
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" /> | |||
<svg-icon v-else icon-class="fullScreenView" /> | |||
</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" style="height: 50%;"> | |||
@@ -39,7 +44,7 @@ | |||
<!-- <el-col :span="12"> --> | |||
<p class="now-secondary-title">{{ op.name }}</p> | |||
<el-progress define-back-color="rgba(32, 57, 96, 1)" text-color="white" | |||
:percentage="op.progressRate * 100" class="custom-progress-bar" /> | |||
:percentage="op.progressRate" class="custom-progress-bar" /> | |||
</el-row> | |||
</div> | |||
<!-- </div> --> | |||
@@ -271,6 +276,52 @@ export default { | |||
this.SJGWebsocketClose() | |||
}, | |||
mounted() { | |||
let detData = [ | |||
{ | |||
id:'1', | |||
name: '测试工单', | |||
progressRate:0.933333 | |||
}, | |||
{ | |||
id: '2', | |||
name: '测试工单2', | |||
progressRate: 0.932323 | |||
}, { | |||
id: '3', | |||
name: '测试工单3', | |||
progressRate: 0.23232 | |||
}, { | |||
id: '4', | |||
name: '测试工单4', | |||
progressRate: 0.32323 | |||
}, { | |||
id: '5', | |||
name: '测试工单', | |||
progressRate: 0.5555 | |||
}, { | |||
id: '6', | |||
name: '测试工单', | |||
progressRate: 0.66564 | |||
}, | |||
] | |||
this.orderList = detData.map((ele, index) => { | |||
if (ele.progressRate && ele.progressRate != 1) { | |||
return { | |||
id: ele.id, | |||
name: ele.name, | |||
progressRate: parseFloat((ele.progressRate * 100).toFixed(3)) | |||
} | |||
} | |||
}); | |||
let EnergyNameList = ['Y61', 'Y62', 'Y63', 'Y64', 'Y65',] | |||
this.EnergyMonitoringNameList = EnergyNameList | |||
let EnergyDataList = [1, 2, 3, 4, 5] | |||
// this.wsData.data.forEach((ele) => { | |||
// EnergyDataList.push(ele.useQuantity) | |||
// }) | |||
this.EnergyMonitoringList = EnergyDataList | |||
// console.log(EnergyDataList) | |||
this.$refs.EnergyMonitoringChart.initChart(this.EnergyMonitoringNameList, this.EnergyMonitoringList) | |||
let eqArr = this.qualityYearList.map((item, index) => [ | |||
`<span style="color:rgba(255,255,255,0.5)" >${index + 1 || ''} | |||
</span>`, | |||
@@ -452,7 +503,7 @@ export default { | |||
return { | |||
id: ele.id, | |||
name: ele.name, | |||
progressRate: ele.progressRate.toFixed(3) | |||
progressRate: parseFloat((ele.progressRate * 100).toFixed(3)) | |||
} | |||
} | |||
}); | |||
@@ -616,18 +667,18 @@ export default { | |||
this.isFullScreen = screenfull.isFullscreen | |||
}, | |||
init() { | |||
if (screenfull.enabled) { | |||
if (screenfull.isEnabled) { | |||
screenfull.on('change', this.change) | |||
} | |||
}, | |||
destroy() { | |||
if (screenfull.enabled) { | |||
if (screenfull.isEnabled) { | |||
screenfull.off('change', this.change) | |||
} | |||
}, | |||
changeFullScreen() { | |||
this.containerWidth = 223223223 | |||
if (!screenfull.enabled) { | |||
if (!screenfull.isEnabled) { | |||
this.$message({ | |||
message: 'you browser can not work', | |||
type: 'warning' | |||