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

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

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

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

@ -4,7 +4,7 @@
</template> </template>
<script> <script>
var echarts = require("echarts"); var echarts = require("echarts");
let $chartLine; import { markRaw } from 'vue'
export default { export default {
name: "Line", name: "Line",
props: { props: {
@ -18,6 +18,9 @@ export default {
}, },
data() { data() {
return { return {
chartLine: {
chart: null
},
defaultOption: { defaultOption: {
title: { title: {
text: '产量折线图', text: '产量折线图',
@ -46,8 +49,8 @@ export default {
}, },
toolbox: { toolbox: {
feature: { feature: {
// 自定义切换按钮,只能以 my 开头 // 自定义切换按钮,只能以 my 开头
mySwitch: { mySwitch: {
show: true, show: true,
title: '更多', 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', 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',
@ -139,7 +142,7 @@ export default {
}, },
created() { created() {
console.log("line loaded..."); console.log("line loaded...");
this.defaultOption = this.option || this.defaultOption; this.defaultOption = this.option || this.defaultOption;
}, },
mounted() { mounted() {
this.initLine(this.defaultOption); this.initLine(this.defaultOption);
@ -147,17 +150,20 @@ export default {
methods: { methods: {
initLine(option) { initLine(option) {
// console.log(option); // console.log(option);
if (!$chartLine) { if (!this.chartLine.chart) {
$chartLine = echarts.init(this.$refs.vline); 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() { destroyed() {
$chartLine = null; this.chartLine.chart = null;
// console.log("========line destroyed========");
}, },
}; };
</script> </script>

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

@ -108,6 +108,15 @@ const routes = [
keepAlive: false, keepAlive: false,
anonymous: true // 路由无需登录访问 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: { legend: {
data: ['工单1', '工单2', '工单3'], data: ['工单1', '工单2', '工单3'],
itemGap: 20, // 标签间距 itemGap: 20, // 标签间距
@ -336,6 +342,12 @@ let WorkData = {
} }
} }
}, },
grid: {
left: '2%',
right: '5%',
bottom: '2%',
containLabel: true
},
legend: { legend: {
data: ['工单1', '工单2', '工单3'], data: ['工单1', '工单2', '工单3'],
itemGap: 20, // 标签间距 itemGap: 20, // 标签间距
@ -433,8 +445,11 @@ let WeekProcess = {
type: 'cross', type: 'cross',
crossStyle: { crossStyle: {
color: '#999' color: '#999'
} },
} },
// formatter: function (params) {
// console.log(params);
// }
}, },
toolbox: { toolbox: {
feature: { feature: {

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

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