@@ -18,7 +18,35 @@ export default { | |||||
levelList: null | levelList: null | ||||
} | } | ||||
}, | }, | ||||
computed: { | |||||
changeColor() { | |||||
if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main') { | |||||
return true | |||||
} else { | |||||
return false | |||||
} | |||||
}, | |||||
}, | |||||
watch: { | 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) { | $route(route) { | ||||
// if you go to the redirect page, do not update the breadcrumbs | // if you go to the redirect page, do not update the breadcrumbs | ||||
if (route.path.startsWith('/redirect/')) { | if (route.path.startsWith('/redirect/')) { | ||||
@@ -1,5 +1,5 @@ | |||||
<template> | <template> | ||||
<div class="navbar"> | |||||
<div ref="navbar" class="navbar"> | |||||
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" | <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" | ||||
@toggleClick="toggleSideBar" /> | @toggleClick="toggleSideBar" /> | ||||
@@ -41,6 +41,13 @@ export default { | |||||
'nickname', | 'nickname', | ||||
'device' | 'device' | ||||
]), | ]), | ||||
changeColor() { | |||||
if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main') { | |||||
return true | |||||
} else { | |||||
return false | |||||
} | |||||
}, | |||||
setting: { | setting: { | ||||
get() { | get() { | ||||
return this.$store.state.settings.showSettings | 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: { | methods: { | ||||
toggleSideBar() { | toggleSideBar() { | ||||
this.$store.dispatch('app/toggleSideBar') | this.$store.dispatch('app/toggleSideBar') | ||||
@@ -56,23 +56,26 @@ export default { | |||||
}, | }, | ||||
watch: { | watch: { | ||||
changeColor(val) { | 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() { | $route() { | ||||
this.addTags() | this.addTags() | ||||
@@ -96,11 +99,23 @@ export default { | |||||
return route.path === this.$route.path | return route.path === this.$route.path | ||||
}, | }, | ||||
activeStyle(tag) { | 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) { | isAffix(tag) { | ||||
return tag.meta && tag.meta.affix | return tag.meta && tag.meta.affix | ||||
@@ -2,7 +2,7 @@ | |||||
<div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }"> | <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }"> | ||||
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> | <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> | ||||
<sidebar v-if="!sidebar.hide" class="sidebar-container" /> | <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 }"> | <div :class="{ 'fixed-header': fixedHeader }"> | ||||
<navbar /> | <navbar /> | ||||
<tags-view v-if="needTagsView" /> | <tags-view v-if="needTagsView" /> | ||||
@@ -59,19 +59,14 @@ export default { | |||||
} | } | ||||
}, | }, | ||||
watch: { | 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: { | methods: { | ||||
handleClickOutside() { | handleClickOutside() { | ||||
@@ -1,7 +1,7 @@ | |||||
<!-- | <!-- | ||||
* @Author: zhp | * @Author: zhp | ||||
* @Date: 2023-11-06 15:15:30 | * @Date: 2023-11-06 15:15:30 | ||||
* @LastEditTime: 2024-07-05 09:31:40 | |||||
* @LastEditTime: 2024-07-05 15:16:01 | |||||
* @LastEditors: zhp | * @LastEditors: zhp | ||||
* @Description: | * @Description: | ||||
--> | --> | ||||
@@ -78,49 +78,51 @@ | |||||
dataForm.endDate[2] : '' }}</p> | dataForm.endDate[2] : '' }}</p> | ||||
</el-col> | </el-col> | ||||
</el-row> | </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> | </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> | </div> | ||||
</el-drawer> | </el-drawer> | ||||
@@ -154,6 +156,7 @@ export default { | |||||
barChart: null, | barChart: null, | ||||
equipmentLineChart: null, | equipmentLineChart: null, | ||||
visible: false, | visible: false, | ||||
loading:true, | |||||
dataForm: {}, | dataForm: {}, | ||||
colorList: ['#3E8EF7', '#69E6D8', '#F7C739'] // pie颜色 | colorList: ['#3E8EF7', '#69E6D8', '#F7C739'] // pie颜色 | ||||
} | } | ||||
@@ -206,6 +209,7 @@ export default { | |||||
if (id) { | if (id) { | ||||
getWorkOrderDetail(id).then(res => { | getWorkOrderDetail(id).then(res => { | ||||
if (res.code === 0) { | if (res.code === 0) { | ||||
this.loading = false | |||||
this.dataForm = res.data.prodWorkOrderDO | this.dataForm = res.data.prodWorkOrderDO | ||||
this.buildChart(this.dataForm) | this.buildChart(this.dataForm) | ||||
// 在制品 | // 在制品 | ||||