ccongli
/
yxsc-net6
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

大屏页面BUG问题修复、响应式渲染处理

Browse Source
dev-0829
ccongli 1 year ago
parent 1c48d19c51
commit 5aa767e3d5
7 changed files with 203 additions and 51 deletions
Show Stats Download Patch File Download Diff File

38
vol-vue3/src/components/echarts/Bar.vue
Unescape View File

@ -3,8 +3,8 @@
<div class="bar" ref="vbar"></div>
</template>
<script>
var echarts = require("echarts");
let $chartBar;
import * as echarts from 'echarts';
import { markRaw } from 'vue'
export default {
name: "Bar",
props: {
@ -18,6 +18,10 @@ export default {
},
data() {
return {
// chartBar: null,
chartBar: {
chart: null
},
defaultOption: {
tooltip: {
trigger: 'axis',
@ -149,18 +153,32 @@ export default {
},
methods: {
initBar(option) {
// console.log(option);
if ($chartBar) {
$chartBar.dispose();
console.log(option);
// 直接赋值给 reactive 响应式 Proxy对象，会导致tooltip不显示
// this.chartBar = echarts.init(this.$refs.vbar);
// 改为Proxy对象属性去接收赋值
if (!this.chartBar.chart) {
let chart = markRaw(echarts.init(this.$refs.vbar));
chart.setOption(option, true);
this.chartBar.chart = chart;
} else {
this.$nextTick(() => {
this.chartBar.chart.setOption(option, true);
});
}
this.$nextTick(() => {
$chartBar = echarts.init(this.$refs.vbar);
$chartBar.setOption(option);
});
// echarts重绘模式
// if(this.chartBar.chart){
// this.chartBar.chart.dispose();
// }
// this.$nextTick(() => {
// let chart = echarts.init(this.$refs.vbar);
// chart.setOption(option, true);
// this.chartBar.chart = chart;
// });
}
},
destroyed() {
$chartBar = null;
this.chartBar.chart = null;
},
};
</script>

36
vol-vue3/src/components/echarts/Gauge.vue
Unescape View File

@ -4,7 +4,6 @@
</template>
<script>
var echarts = require("echarts");
let $chartGauge;
export default {
name: "Gauge",
props: {
@ -18,6 +17,7 @@ export default {
},
data() {
return {
chartGauge: null,
defaultOption: {
series: [{
radius: '130%',
@ -97,8 +97,8 @@ export default {
},
data: [
{
value: 0.70,
name: '利用率'
name: '西门子828D-1',
value: 0.99,
}
]
}]
@ -114,19 +114,35 @@ export default {
},
methods: {
initGauge(option) {
// console.log(option);
if ($chartGauge) {
$chartGauge.dispose();
if (!this.chartGauge) {
this.chartGauge = echarts.init(this.$refs.vgauge);
}
this.$nextTick(() => {
$chartGauge = echarts.init(this.$refs.vgauge);
$chartGauge.setOption(option);
// this.chartGauge.clear(); // 清除上一步历史,会使得变化很突兀
this.chartGauge.setOption(option, true);
});
}
},
// watch:{
// 'option.series.0.data': {
// handler: function(newVal, oldVal) {
// console.log(newVal, oldVal);
// this.defaultOption.series[0].data = newVal;
// // console.log(this.defaultOption);
// this.initGauge(this.defaultOption);
// },
// deep: true
// },
// option: { // 复杂类型直接监听的是地址变化
// handler: function(newVal, oldVal) {
// console.log(newVal, oldVal);
// },
// deep: true
// }
// },
destroyed() {
$chartGauge = null;
},
this.chartGauge = null;
}
};
</script>
<style lang="less" scoped>

26
vol-vue3/src/components/echarts/Line.vue
Unescape View File

@ -4,7 +4,7 @@
</template>
<script>
var echarts = require("echarts");
let $chartLine;
import { markRaw } from 'vue'
export default {
name: "Line",
props: {
@ -18,6 +18,9 @@ export default {
},
data() {
return {
chartLine: {
chart: null
},
defaultOption: {
title: {
text: '产量折线图',
@ -46,8 +49,8 @@ export default {
},
toolbox: {
feature: {
// 自定义切换按钮,只能以 my 开头
mySwitch: {
// 自定义切换按钮,只能以 my 开头
mySwitch: {
show: true,
title: '更多',
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
@ -147,17 +150,20 @@ export default {
methods: {
initLine(option) {
// console.log(option);
if (!$chartLine) {
$chartLine = echarts.init(this.$refs.vline);
if (!this.chartLine.chart) {
let chart = markRaw(echarts.init(this.$refs.vline));
chart.setOption(option, true);
this.chartLine.chart = chart;
} else {
this.$nextTick(() => {
this.chartLine.chart.setOption(option, true);
});
}
this.$nextTick(() => {
$chartLine.clear();
$chartLine.setOption(option);
});
}
},
destroyed() {
$chartLine = null;
this.chartLine.chart = null;
// console.log("========line destroyed========");
},
};
</script>

9
vol-vue3/src/router/index.js
Unescape View File

@ -108,6 +108,15 @@ const routes = [
keepAlive: false,
anonymous: true // 路由无需登录访问
}
},
{
path: '/datatest',
name: 'datatest',
component: () => import('@/views/data/bigscreen/test.vue'),
meta: {
keepAlive: false,
anonymous: true // 路由无需登录访问
}
}
]

19
vol-vue3/src/views/data/bigscreen/chart-options.js
Unescape View File

@ -229,6 +229,12 @@ let WorkData = {
}
}
},
grid: {
left: '2%',
right: '5%',
bottom: '2%',
containLabel: true
},
legend: {
data: ['工单1', '工单2', '工单3'],
itemGap: 20, // 标签间距
@ -336,6 +342,12 @@ let WorkData = {
}
}
},
grid: {
left: '2%',
right: '5%',
bottom: '2%',
containLabel: true
},
legend: {
data: ['工单1', '工单2', '工单3'],
itemGap: 20, // 标签间距
@ -433,8 +445,11 @@ let WeekProcess = {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
},
// formatter: function (params) {
// console.log(params);
// }
},
toolbox: {
feature: {

62
vol-vue3/src/views/data/bigscreen/index.vue
Unescape View File

@ -26,7 +26,8 @@
<div class="content">
<div class="oee">
<div class="chart" v-for="(machine, index) in machineList" :key="index">
<Gauge :option="machineOption(machine)" ref="vgauge"></Gauge>
<!-- {{machine.name + "--" + machine.oee}} -->
<Gauge :option="machineOption(machine,index)" ref="vgauge"></Gauge>
</div>
</div>
<div class="machine">
@ -230,18 +231,19 @@ export default {
gdfrom: {
target: "turnout",
configId: 1
}
},
timer: null
}
},
mounted() {
// console.log(this.$refs.vbar);
// console.log(this.$set);
// console.log(this.$nextTick);
console.log(this.$refs.vline); // ！！ undefine 问题解决不了
console.log("数据加载中...");
this.onLoading();
this.datetime = this.base.getDate(true);
setInterval(() => {
this.datetime = this.base.getDate(true);
});
window.addEventListener('beforeunload', this.clearTimer); // 监听页面刷新或关闭
},
methods: {
onLoading() {
@ -250,20 +252,22 @@ export default {
this.getWeekWorkData();
setTimeout(() => {
this.loading = false;
},3000);
}, 3000);
// 10分钟定时发送请求数据
// setInterval(() => {
// this.getMachineData();
// this.getWeekProcessData();
// this.getWeekWorkData();
// }, 10000);
this.timer = setInterval(() => {
this.getMachineData(true);
this.getWeekProcessData(true);
this.getWeekWorkData(true);
}, 10000);
},
changeDevice(value) {
this.gdfrom.configId = value;
this.getWeekWorkData();
this.getWeekWorkData(true);
},
// 切换工单指标数据
changeQuota(value) {
// console.log(this.$refs);
// console.log(this.$refs.vline);
let option = this.workdata[value];
this.$refs.vline.initLine(option);
},
@ -277,7 +281,7 @@ export default {
machineOption.series[0].data[0] = oeeObj;
return machineOption;
},
getMachineData() { // 获取机床数据
getMachineData(rerender) { // 获取机床数据
this.http.post("/api/Data_Screen/GetMachineData", {}, true)
.then(result => {
let machineList = [];
@ -292,9 +296,16 @@ export default {
});
}
this.machineList = machineList;
// console.log(this.machineList);
if(rerender) {
for(let index in this.machineList) {
let machineOption = this.machineOption(this.machineList[index]);
this.$refs.vgauge[index].initGauge(machineOption);
}
}
});
},
getWeekProcessData() { // 获取近一周生产加工数据
getWeekProcessData(rerender) { // 获取近一周生产加工数据
this.http.post("/api/Data_Screen/GetTurnOutByWeekDays", {}, true)
.then(result => {
// console.log(result);
@ -318,10 +329,13 @@ export default {
}
this.weekprocess.yAxis = yAxis;
this.weekprocess.series = series;
console.log(this.weekprocess);
// console.log(this.weekprocess);
if (rerender) { // 是否重新渲染
this.$refs.vbar.initBar(this.weekprocess);
}
});
},
getWeekWorkData() { // 获取近一周工单数据
getWeekWorkData(rerender) { // 获取近一周工单数据
// 对象转formData
let params = this.gdfrom;
const formData = new FormData();
@ -343,8 +357,10 @@ export default {
targetData.series[index].data = dataList[index];
}
}
console.log(this.workdata);
// this.changeQuota(this.gdfrom.target);
// console.log(this.workdata);
if (rerender) {
this.changeQuota(this.gdfrom.target);
}
});
},
getDeviceConfig() { // 获取设备配置列表
@ -375,6 +391,10 @@ export default {
console.log(res);
});
},
clearTimer() { //清除定时器
clearInterval(this.timer);
this.timer = null;
}
},
computed: {
machineNameMap() {
@ -387,6 +407,12 @@ export default {
// // Proxy对象需要处理为干净的数据对象
// return JSON.parse(JSON.stringify(this.pagination));
// }
},
beforeDestroy() {
this.timer && this.clearTimer();
},
destroyed() {
window.removeEventListener('beforeunload', this.clearTimer) // 卸载监听事件
}
}
</script>

62
vol-vue3/src/views/data/bigscreen/test.vue
Unescape View File

@ -0,0 +1,62 @@
<template>
<div class="test">
<Gauge :option="machineinfo" ref="vgauge"></Gauge>
</div>
</template>
<script>
import Gauge from "@/components/echarts/Gauge.vue";
import { MachineInfo, WorkData, WeekProcess } from "./chart-options";
export default {
components: {
Gauge,
// Bar,
// Line,
},
data() {
return {
machineinfo: MachineInfo
}
},
mounted() {
console.log(this.$refs.vgauge);
console.log("数据测试...");
this.onLoading();
window.addEventListener('beforeunload', this.clearTimer); // 监听页面刷新或关闭
},
methods: {
getMachineInfo(){
this.machineinfo = this.base.deepClone(MachineInfo);
},
onLoading() {
this.timer = setInterval(() => {
// this.machineinfo.series[0].data[0].value += 0.01;
this.getMachineInfo();
console.log(123456);
}, 10000);
},
clearTimer() { //清除定时器
clearInterval(this.timer);
this.timer = null;
}
},
beforeDestroy() {
this.timer && this.clearTimer();
},
destroyed() {
window.removeEventListener('beforeunload', this.clearTimer) // 卸载监听事件
}
}
</script>
<style lang="less" scoped>
// vue3 改写dv-loading样式
.test {
width: 500px;
height: 500px;
}
</style>
Write Preview
Loading…
Cancel
Save