Merge branch 'projects/mesxc-test' into projects/mesxc-lb
This commit is contained in:
當前提交
fa746ab9b0
二進制
src/assets/img/1.png
Normal file
二進制
src/assets/img/1.png
Normal file
未顯示二進位檔案。
之後 寬度: | 高度: | 大小: 75 KiB |
二進制
src/assets/img/OperationalOverview/AGV.png
Normal file
二進制
src/assets/img/OperationalOverview/AGV.png
Normal file
未顯示二進位檔案。
之後 寬度: | 高度: | 大小: 126 KiB |
未顯示二進位檔案。
之前 寬度: | 高度: | 大小: 75 KiB 之後 寬度: | 高度: | 大小: 41 KiB |
@ -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
|
||||
},
|
||||
series: []
|
||||
});
|
||||
} else {
|
||||
// 显示echarts图表
|
||||
this.chart.setOption({
|
||||
// color: colors,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
// formatter: '{value}'
|
||||
// textStyle: {
|
||||
// color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
// }
|
||||
},
|
||||
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}%'
|
||||
// }
|
||||
},
|
||||
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' // 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
// textStyle: {
|
||||
// color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
// formatter: '{value}'
|
||||
formatter: '{value} 片'
|
||||
// color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
// }
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#25528f'
|
||||
}
|
||||
},
|
||||
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]
|
||||
// }
|
||||
// },
|
||||
},
|
||||
{
|
||||
// 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' // 坐标线的宽度
|
||||
// }
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
// 坐标轴指示器,坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
// formatter: '{value}'
|
||||
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',
|
||||
},
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
// formatter: '{value}/kwh'
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#25528f",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#25528f",
|
||||
},
|
||||
}
|
||||
},
|
||||
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",
|
||||
},
|
||||
},
|
||||
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
|
||||
})
|
||||
// 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'
|
||||
|
載入中…
新增問題並參考
Block a user