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

update 设备加工数量

Browse Source
This commit is contained in:
lb 2023-09-22 10:29:28 +08:00
parent ee3d6f9dc6
commit f43b1c1eab
2 changed files with 27 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/views/monitoring/equipmentProcessAmount/graph.vue
View File

@ -17,11 +17,12 @@ import * as echarts from 'echarts';
export default { export default {
name: 'LineChartInEquipmentProcessAmount', name: 'LineChartInEquipmentProcessAmount',
components: {}, components: {},
props: ['equipmentList'], props: ['equipmentList', 'render'],
data() { data() {
return { return {
chart: null, chart: null,
option: { option: {
color: ['#288AFF'],
grid: { grid: {
top: 64, top: 64,
left: 56, left: 56,
@ -89,16 +90,19 @@ export default {
}, },
}; };
}, },
mounted() { watch: {
// console.log('this.eq list', this.equipmentList); render: {
if (!this.chart) this.chart = echarts.init(this.$refs.chart); handler: function (newVal, oldVal) {
if (!this.chart) this.chart = echarts.init(this.$refs.chart);
this.$nextTick(() => { this.$nextTick(() => {
this.chart.setOption(this.updateConfig(this.option)); if (this.chart) this.chart.setOption(this.updateConfig(this.option));
}); });
},
deep: true,
},
}, },
beforeDestroy() { beforeDestroy() {
this.chart.dispose(); if (this.chart) this.chart.dispose();
}, },
methods: { methods: {
updateConfig(config) { updateConfig(config) {
@ -126,5 +130,6 @@ export default {
.chart { .chart {
height: 100%; height: 100%;
width: 100%; width: 100%;
// background: lightcoral;
} }
</style> </style>

20
src/views/monitoring/equipmentProcessAmount/index.vue
View File

@ -89,9 +89,12 @@
<el-tab-pane :label="'\u3000柱状图\u3000'" name="graph"> <el-tab-pane :label="'\u3000柱状图\u3000'" name="graph">
<div class="graph" style="height: 56vh"> <div class="graph" style="height: 56vh">
<!-- graph --> <!-- graph -->
<Graph v-if="list.length" :equipment-list="list" /> <Graph
v-if="list.length"
:equipment-list="list"
:render="renderKey" />
<div <div
v-else v-if="list.length == 0"
style=" style="
color: #c7c7c7; color: #c7c7c7;
text-align: center; text-align: center;
@ -120,6 +123,7 @@ export default {
props: {}, props: {},
data() { data() {
return { return {
renderKey: Math.random(),
factoryListOpen: false, factoryListOpen: false,
currentFactory: null, currentFactory: null,
factoryList: [ factoryList: [
@ -327,13 +331,12 @@ export default {
}, },
handleTabClick(tab, event) { handleTabClick(tab, event) {
console.log('handle tab click: ', tab, event); if (tab.name == 'graph') this.renderKey = Math.random();
}, },
factoryChangeHandler(event) { factoryChangeHandler(event) {
this.factoryListOpen = false; this.factoryListOpen = false;
const fcId = event.target.dataset.value; const fcId = event.target.dataset.value;
console.log('fc id', fcId);
this.handleSidebarItemClick({ id: fcId, type: '工厂' }); this.handleSidebarItemClick({ id: fcId, type: '工厂' });
this.currentFactory = this.sidebarContent.find((item) => item.id == fcId); this.currentFactory = this.sidebarContent.find((item) => item.id == fcId);
}, },
@ -398,7 +401,7 @@ export default {
padding: 0; padding: 0;
color: #111; color: #111;
/* background: #f2f4f7; */ /* background: #f2f4f7; */
background: #E3EFFF !important; background: #e3efff !important;
} }
.vvv-enter, .vvv-enter,
@ -527,14 +530,17 @@ li {
padding: 8px 12px !important; padding: 8px 12px !important;
} }
.custom-tree-class >>> .el-tree-node__content:hover { .custom-tree-class >>> .el-tree-node__content:hover {
background: #E3EFFF; background: #e3efff;
} }
.custom-tree-class >>> .el-tree-node__children .el-tree-node__content { .custom-tree-class >>> .el-tree-node__children .el-tree-node__content {
padding: 8px 18px !important; padding: 8px 18px !important;
} }
.custom-tree-class >>> .el-tree-node__children .el-tree-node__children .el-tree-node__content { .custom-tree-class
>>> .el-tree-node__children
.el-tree-node__children
.el-tree-node__content {
padding: 8px 24px !important; padding: 8px 24px !important;
} }
</style> </style>