projects/mes-zjl #381

Merged
juzi merged 3 commits from projects/mes-zjl into projects/mes-test 2024-07-16 10:07:04 +08:00
24 changed files with 342 additions and 317 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.8 KiB

View File

@ -2,17 +2,27 @@
<div class="choicepart-container"> <div class="choicepart-container">
<navbar /> <navbar />
<div class="choicepart-wrapper"> <div class="choicepart-wrapper">
<div class="choicepart-box" id="choicepartBox" :style="'transform:scale('+scale+');width:1574px;height:538px;'" v-show="showItem"> <div
class="choicepart-box"
id="choicepartBox"
:style="'transform:scale(' + scale + ');width:1574px;height:538px;'"
v-show="showItem">
<div class="choicepart-line1"> <div class="choicepart-line1">
<div <div
v-for="(item, index) in menuArr1" v-for="(item, index) in menuArr1"
:key="index" :key="index"
class="choicepart-item" class="choicepart-item"
@click="handelClick(item, item.choicepart)" @click="handelClick(item, item.choicepart)"
:style="{opacity: item.visible?1:0.4, pointerEvents:item.visible?'auto':'none'}" :style="{
> opacity: item.visible ? 1 : 0.4,
pointerEvents: item.visible ? 'auto' : 'none',
}">
<div> <div>
<img :src="require(`../../assets/images/choicepart/${item.name}.png`)" alt=""> <img
:src="
require(`../../assets/images/choicepart/${item.name}.png`)
"
alt="" />
</div> </div>
<div class="choicepart-item-title">{{ item.meta.title }}</div> <div class="choicepart-item-title">{{ item.meta.title }}</div>
</div> </div>
@ -23,10 +33,16 @@
:key="index" :key="index"
class="choicepart-item" class="choicepart-item"
@click="handelClick(item, item.choicepart)" @click="handelClick(item, item.choicepart)"
:style="{opacity: item.visible?1:0.4, pointerEvents:item.visible?'auto':'none'}" :style="{
> opacity: item.visible ? 1 : 0.4,
pointerEvents: item.visible ? 'auto' : 'none',
}">
<div> <div>
<img :src="require(`../../assets/images/choicepart/${item.name}.png`)" alt=""> <img
:src="
require(`../../assets/images/choicepart/${item.name}.png`)
"
alt="" />
</div> </div>
<div class="choicepart-item-title">{{ item.meta.title }}</div> <div class="choicepart-item-title">{{ item.meta.title }}</div>
</div> </div>
@ -37,8 +53,8 @@
</div> </div>
</template> </template>
<script> <script>
import Navbar from './components/Navbar' import Navbar from './components/Navbar';
import { debounce } from '@/utils/debounce' import { debounce } from '@/utils/debounce';
export default { export default {
components: { Navbar }, components: { Navbar },
name: 'choicePart', name: 'choicePart',
@ -52,57 +68,57 @@ export default {
title: '基础核心', title: '基础核心',
visible: false, visible: false,
meta: { meta: {
title: '' title: '',
} },
}, },
{ {
name: 'Order', name: 'Order',
title: '订单管理', title: '订单管理',
visible: false, visible: false,
meta: { meta: {
title: '' title: '',
} },
}, },
{ {
name: 'Equipment', name: 'Equipment',
title: '设备管理', title: '设备管理',
visible: false, visible: false,
meta: { meta: {
title: '' title: '',
} },
}, },
{ {
name: 'Group', name: 'Group',
title: '班组管理', title: '班组管理',
visible: false, visible: false,
meta: { meta: {
title: '' title: '',
} },
}, },
{ {
name: 'Quality', name: 'Quality',
title: '质量管理', title: '质量管理',
visible: false, visible: false,
meta: { meta: {
title: '' title: '',
} },
}, },
{ {
name: 'Warehouse', name: 'Warehouse',
title: '仓库管理', title: '仓库管理',
visible: false, visible: false,
meta: { meta: {
title: '' title: '',
} },
}, },
{ {
name: 'Energy', name: 'Energy',
title: '能源管理', title: '能源管理',
visible: false, visible: false,
meta: { meta: {
title: '' title: '',
} },
} },
], ],
menuArr2: [ menuArr2: [
{ {
@ -110,99 +126,107 @@ export default {
title: '包装管理', title: '包装管理',
visible: false, visible: false,
meta: { meta: {
title: '' title: '',
} },
}, },
{ {
name: 'Material', name: 'Material',
title: '物料管理', title: '物料管理',
visible: false, visible: false,
meta: { meta: {
title: '' title: '',
} },
}, },
{ {
name: 'Extend', name: 'Extend',
title: '工艺管理', title: '工艺管理',
visible: false, visible: false,
meta: { meta: {
title: '' title: '',
} },
}, },
{ {
name: 'Delivery', name: 'Delivery',
title: '成品发货', title: '成品发货',
visible: false, visible: false,
meta: { meta: {
title: '' title: '',
} },
}, },
{ {
name: 'Report', name: 'Report',
title: '报表管理', title: '报表管理',
visible: false, visible: false,
meta: { meta: {
title: '' title: '',
} },
}, },
{ {
name: 'System', name: 'System',
title: '系统管理', title: '系统管理',
visible: false, visible: false,
meta: { meta: {
title: '' title: '',
} },
} },
{
name: 'Devconfig',
title: '开发配置',
visible: false,
meta: {
title: '',
},
},
], ],
showItem: false showItem: false,
} };
}, },
// computed:{ // computed:{
// ...mapGetters(['sidebarRouters']) // ...mapGetters(['sidebarRouters'])
// }, // },
mounted() { mounted() {
this.getMsg() this.getMsg();
this.boxReset = debounce(() => { this.boxReset = debounce(() => {
this.resetSize() this.resetSize();
}, 300) }, 300);
this.boxReset() this.boxReset();
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.boxReset() this.boxReset();
}) });
}, },
methods: { methods: {
getMsg() { getMsg() {
let menuList = this.$store.state.permission.sidebarRouters let menuList = this.$store.state.permission.sidebarRouters;
console.log(menuList) console.log(menuList);
if (menuList.length > 0) { if (menuList.length > 0) {
for (let i = 0; i < menuList.length; i++) { for (let i = 0; i < menuList.length; i++) {
for (let k = 0; k < 7; k++) { for (let k = 0; k < 7; k++) {
if (menuList[i].name === this.menuArr1[k].name) { if (menuList[i].name === this.menuArr1[k].name) {
this.menuArr1[k].visible = true this.menuArr1[k].visible = true;
this.menuArr1[k].id = menuList[i].id this.menuArr1[k].id = menuList[i].id;
this.menuArr1[k].choicepart = i this.menuArr1[k].choicepart = i;
this.menuArr1[k].children = menuList[i].children this.menuArr1[k].children = menuList[i].children;
this.menuArr1[k].meta = menuList[i].meta this.menuArr1[k].meta = menuList[i].meta;
} }
} }
for (let j = 0; j < 6; j++) { for (let j = 0; j < 7; j++) {
if (menuList[i].name === this.menuArr2[j].name) { if (menuList[i].name === this.menuArr2[j].name) {
this.menuArr2[j].visible = true this.menuArr2[j].visible = true;
this.menuArr2[j].id = menuList[i].id this.menuArr2[j].id = menuList[i].id;
this.menuArr2[j].choicepart = i this.menuArr2[j].choicepart = i;
this.menuArr2[j].children = menuList[i].children this.menuArr2[j].children = menuList[i].children;
this.menuArr2[j].meta = menuList[i].meta this.menuArr2[j].meta = menuList[i].meta;
} }
} }
} }
} }
console.log(this.menuArr1) console.log(this.menuArr1);
console.log(this.menuArr2) console.log(this.menuArr2);
}, },
handelClick(item, index) { handelClick(item, index) {
// this.$router.push({name: 'SystemUser'}) // this.$router.push({name: 'SystemUser'})
this.$store.dispatch('app/setChoicepart', index) this.$store.dispatch('app/setChoicepart', index);
this.toRouter(item) this.toRouter(item);
// if (item.meta.unuse) { // if (item.meta.unuse) {
// this.$message.warning(this.$t('')) // this.$message.warning(this.$t(''))
// } else { // } else {
@ -210,38 +234,38 @@ export default {
// } // }
}, },
toRouter(item) { toRouter(item) {
console.log(item) console.log(item);
if (item.children) { if (item.children) {
this.toRouter(item.children[0]) this.toRouter(item.children[0]);
} else { } else {
this.$router.push({ name: item.name }) this.$router.push({ name: item.name });
} }
}, },
resetSize() { resetSize() {
let _this = this let _this = this;
_this.showItem = false _this.showItem = false;
_this.loading = true _this.loading = true;
let choicepartBox = document.querySelector('#choicepartBox') let choicepartBox = document.querySelector('#choicepartBox');
let rw = parseFloat(window.innerWidth) let rw = parseFloat(window.innerWidth);
let rh = parseFloat(window.innerHeight) let rh = parseFloat(window.innerHeight);
let bw = parseFloat(choicepartBox.style.width) let bw = parseFloat(choicepartBox.style.width);
let bh = parseFloat(choicepartBox.style.height) let bh = parseFloat(choicepartBox.style.height);
let wx = 0.82/(bw / rw) let wx = 0.82 / (bw / rw);
let hx = 0.56/(bh / rh) let hx = 0.56 / (bh / rh);
_this.scale = wx > hx ? hx : wx _this.scale = wx > hx ? hx : wx;
setTimeout(_this.showItemFun, 700) setTimeout(_this.showItemFun, 700);
}, },
showItemFun() { showItemFun() {
this.loading = false this.loading = false;
this.showItem = true this.showItem = true;
} },
}, },
beforeDestroy() { beforeDestroy() {
this.showItem = false this.showItem = false;
} },
} };
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.choicepart-container { .choicepart-container {
position: relative; position: relative;
width: 100%; width: 100%;
@ -272,7 +296,8 @@ export default {
.choicepart-item { .choicepart-item {
width: 184px; width: 184px;
height: 224px; height: 224px;
background: url('../../assets/images/choicepart/choice-item-back.png') no-repeat; background: url('../../assets/images/choicepart/choice-item-back.png')
no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
@ -310,7 +335,7 @@ export default {
.choicepart-footer { .choicepart-footer {
position: absolute; position: absolute;
width: 100%; width: 100%;
color: #C7C7C7; color: #c7c7c7;
user-select: none; user-select: none;
font-size: 12px; font-size: 12px;
letter-spacing: 1px; letter-spacing: 1px;