修改ui
Esse commit está contido em:
‘937886381’
pai
44f3ab3e99
commit
865698a9be
@ -18,7 +18,35 @@ export default {
|
||||
levelList: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
changeColor() {
|
||||
if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main') {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// changeColor(val) {
|
||||
// if (val == true) {
|
||||
// var tag = document.getElementsByClassName("breadcrumb-container")
|
||||
// console.log('tag', tag)
|
||||
// // for (let i in tag) {
|
||||
// tag[i].style.color = 'rgba(255, 255, 255, 0.45)'
|
||||
// // tag[i].classList.remove("default")
|
||||
// // }
|
||||
// // console.log('this.$refs.scrollContainer', this.$refs.tag);
|
||||
// } else {
|
||||
// var tag = document.getElementsByClassName("breadcrumb-container")
|
||||
// console.log('tag', tag)
|
||||
// for (let i in tag) {
|
||||
// tag[i].style.color = ''
|
||||
// // tag[i].classList.remove("default")
|
||||
// }
|
||||
// // this.$refs.mainContainer.style.backgroundColor = ''
|
||||
// }
|
||||
// },
|
||||
$route(route) {
|
||||
// if you go to the redirect page, do not update the breadcrumbs
|
||||
if (route.path.startsWith('/redirect/')) {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="navbar">
|
||||
<div ref="navbar" class="navbar">
|
||||
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
|
||||
@toggleClick="toggleSideBar" />
|
||||
|
||||
@ -41,6 +41,13 @@ export default {
|
||||
'nickname',
|
||||
'device'
|
||||
]),
|
||||
changeColor() {
|
||||
if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main') {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
setting: {
|
||||
get() {
|
||||
return this.$store.state.settings.showSettings
|
||||
@ -58,6 +65,18 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// changeColor(val) {
|
||||
// if (val == true) {
|
||||
// // console.log('this.$refs.mainContainer', this.$refs.mainContainer);
|
||||
// this.$refs.navbar.style.backgroundColor = 'rgba(0, 21, 41, 1)'
|
||||
// this.$refs.navbar.style.boxShadow = '0px 1px 8px 0px rgba(0,131,255,0.35)'
|
||||
// } else {
|
||||
// this.$refs.navbar.style.backgroundColor = ''
|
||||
// this.$refs.navbar.style.boxShadow = ''
|
||||
// }
|
||||
// },
|
||||
},
|
||||
methods: {
|
||||
toggleSideBar() {
|
||||
this.$store.dispatch('app/toggleSideBar')
|
||||
|
||||
@ -56,23 +56,26 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
changeColor(val) {
|
||||
// if (val == true) {
|
||||
// this.$refs.tagsViewContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)'
|
||||
// var tag = document.getElementsByClassName("tags-view-item")
|
||||
// console.log('tag', tag)
|
||||
// for (let i in tag) {
|
||||
// tag[i].classList.add("changeColor")
|
||||
// // tag[i].classList.remove("default")
|
||||
// }
|
||||
// console.log('this.$refs.scrollContainer', this.$refs.tag);
|
||||
// } else {
|
||||
// this.$refs.tagsViewContainer.style.backgroundColor = ''
|
||||
// var tag = document.getElementsByClassName("tags-view-item")
|
||||
// for (let i in tag) {
|
||||
// // tag[i].classList.remove("changeColor")
|
||||
// // tag[i].classList.add("default")
|
||||
// }
|
||||
// }
|
||||
if (val == true) {
|
||||
console.log('this.$refs.tagsViewContainer', this.$refs.tagsViewContainer);
|
||||
this.$refs.tagsViewContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)'
|
||||
this.$refs.tagsViewContainer.style.borderTop = '0px solid #d8dce5'
|
||||
var tag = document.getElementsByClassName("tags-view-item")
|
||||
console.log('tag', tag)
|
||||
for (let i in tag) {
|
||||
tag[i].classList.add("changeColor")
|
||||
// tag[i].classList.remove("default")
|
||||
}
|
||||
console.log('this.$refs.scrollContainer', this.$refs.tag);
|
||||
} else {
|
||||
this.$refs.tagsViewContainer.style.backgroundColor = ''
|
||||
this.$refs.tagsViewContainer.style.borderTop = '1px solid #d8dce5'
|
||||
var tag = document.getElementsByClassName("tags-view-item")
|
||||
for (let i in tag) {
|
||||
tag[i].classList.remove("changeColor")
|
||||
// tag[i].classList.add("default")
|
||||
}
|
||||
}
|
||||
},
|
||||
$route() {
|
||||
this.addTags()
|
||||
@ -96,11 +99,23 @@ export default {
|
||||
return route.path === this.$route.path
|
||||
},
|
||||
activeStyle(tag) {
|
||||
if (!this.isActive(tag)) return {};
|
||||
return {
|
||||
"background-color": this.theme,
|
||||
"border-color": this.theme
|
||||
};
|
||||
if (this.changeColor) {
|
||||
if (!this.isActive(tag)) return {
|
||||
"background-color": 'rgba(0, 59, 115, 1)',
|
||||
"border-color": 'rgba(0, 59, 115, 1)',
|
||||
"color": 'rgba(255, 255, 255, 1)'
|
||||
};
|
||||
return {
|
||||
"background-color": this.theme,
|
||||
"border-color": this.theme
|
||||
};
|
||||
} else {
|
||||
if (!this.isActive(tag)) return {};
|
||||
return {
|
||||
"background-color": this.theme,
|
||||
"border-color": this.theme
|
||||
};
|
||||
}
|
||||
},
|
||||
isAffix(tag) {
|
||||
return tag.meta && tag.meta.affix
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
|
||||
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
|
||||
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
|
||||
<div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
|
||||
<div ref="mainContainer" :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
|
||||
<div :class="{ 'fixed-header': fixedHeader }">
|
||||
<navbar />
|
||||
<tags-view v-if="needTagsView" />
|
||||
@ -59,19 +59,14 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// changeColor(val) {
|
||||
// if (val == true) {
|
||||
// var tag = document.getElementsByClassName("main-container")
|
||||
// console.log('tag', tag);
|
||||
// tag.style.backgroundColor = 'rgba(0, 21, 41, 1)'
|
||||
// } else {
|
||||
// var tag = document.getElementsByClassName("main-container")
|
||||
// // for (let i in tag) {
|
||||
// tag.style.backgroundColor = ''
|
||||
// // tag[i].classList.add("default")
|
||||
// // }
|
||||
// }
|
||||
// },
|
||||
changeColor(val) {
|
||||
if (val == true) {
|
||||
console.log('this.$refs.mainContainer', this.$refs.mainContainer);
|
||||
this.$refs.mainContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)'
|
||||
} else {
|
||||
this.$refs.mainContainer.style.backgroundColor = ''
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleClickOutside() {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-11-06 15:15:30
|
||||
* @LastEditTime: 2024-07-05 09:31:40
|
||||
* @LastEditTime: 2024-07-05 15:16:01
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -78,49 +78,51 @@
|
||||
dataForm.endDate[2] : '' }}</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="width: 100%; padding: 0 32px">
|
||||
<el-divider style="margin: 0"></el-divider>
|
||||
<div v-loading="loading">
|
||||
<div style="width: 100%; padding: 0 32px">
|
||||
<el-divider style="margin: 0"></el-divider>
|
||||
</div>
|
||||
<el-row :gutter="0" style="margin: 20px 32px">
|
||||
<el-col :span="8">
|
||||
<div>
|
||||
<small-title slot="title" :no-padding="true">
|
||||
产品良率
|
||||
</small-title>
|
||||
<div ref="pie" :style="{ height: '40vh', width: '100%' }" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px">
|
||||
<small-title slot="title" :no-padding="true">
|
||||
待制品分布
|
||||
</small-title>
|
||||
<div ref="equipmentLine" :style="{ height: '40vh', width: '50vw' }" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="width: 100%; padding: 0 32px">
|
||||
<el-divider style="margin: 0"></el-divider>
|
||||
</div>
|
||||
<el-row :gutter="0" style="margin: 20px 32px">
|
||||
<el-col :span="8">
|
||||
<div>
|
||||
<small-title slot="title" :no-padding="true">
|
||||
生产明细
|
||||
</small-title>
|
||||
<div ref="bar" :style="{ height: '40vh', width: '100%' }" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div v-show="dataForm.orderStatus === 2"
|
||||
style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px">
|
||||
<small-title slot="title" :no-padding="true">
|
||||
历史趋势
|
||||
</small-title>
|
||||
<div ref="line" :style="{ height: '40vh', width: '50vw' }" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-row :gutter="0" style="margin: 20px 32px">
|
||||
<el-col :span="8">
|
||||
<div>
|
||||
<small-title slot="title" :no-padding="true">
|
||||
产品良率
|
||||
</small-title>
|
||||
<div ref="pie" :style="{ height: '40vh', width: '100%' }" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px">
|
||||
<small-title slot="title" :no-padding="true">
|
||||
待制品分布
|
||||
</small-title>
|
||||
<div ref="equipmentLine" :style="{ height: '40vh', width: '50vw' }" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="width: 100%; padding: 0 32px">
|
||||
<el-divider style="margin: 0"></el-divider>
|
||||
</div>
|
||||
<el-row :gutter="0" style="margin: 20px 32px">
|
||||
<el-col :span="8">
|
||||
<div>
|
||||
<small-title slot="title" :no-padding="true">
|
||||
生产明细
|
||||
</small-title>
|
||||
<div ref="bar" :style="{ height: '40vh', width: '100%' }" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<div v-show="dataForm.orderStatus === 2"
|
||||
style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px">
|
||||
<small-title slot="title" :no-padding="true">
|
||||
历史趋势
|
||||
</small-title>
|
||||
<div ref="line" :style="{ height: '40vh', width: '50vw' }" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
@ -154,6 +156,7 @@ export default {
|
||||
barChart: null,
|
||||
equipmentLineChart: null,
|
||||
visible: false,
|
||||
loading:true,
|
||||
dataForm: {},
|
||||
colorList: ['#3E8EF7', '#69E6D8', '#F7C739'] // pie颜色
|
||||
}
|
||||
@ -206,6 +209,7 @@ export default {
|
||||
if (id) {
|
||||
getWorkOrderDetail(id).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.loading = false
|
||||
this.dataForm = res.data.prodWorkOrderDO
|
||||
this.buildChart(this.dataForm)
|
||||
// 在制品
|
||||
|
||||
Carregando…
Referência em uma nova issue
Block a user