|
|
|
@ -1,11 +1,13 @@
|
|
|
|
|
<template>
|
|
|
|
|
<el-drawer class="drawer" :visible.sync="drawer" :direction="direction" :withHeader="withHeader" @select="handleSelect">
|
|
|
|
|
<el-menu class="menu" mode="horizontal">
|
|
|
|
|
<el-menu-item class="menu-item">抛丸</el-menu-item>
|
|
|
|
|
<el-menu-item class="menu-item">理料</el-menu-item>
|
|
|
|
|
<el-menu-item class="menu-item">划线</el-menu-item>
|
|
|
|
|
<el-menu-item class="menu-item">切割</el-menu-item>
|
|
|
|
|
</el-menu>
|
|
|
|
|
<el-drawer class="transparent-drawer" size="8%" :visible.sync="drawer" :direction="direction" :modal="false" :withHeader="withHeader">
|
|
|
|
|
<div class="drawer">
|
|
|
|
|
<template v-for="(item,index) in menu">
|
|
|
|
|
<div class="menu-item" @click="handleSelect(item)">
|
|
|
|
|
<img src="https://aigc365.cc/static/pageGroup/all.svg" alt="AIGC" title="AIGC" style="width: 48px; height: 48px; filter: brightness(0.9);">
|
|
|
|
|
<br/>{{item}}
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</el-drawer>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
@ -14,38 +16,56 @@ export default {
|
|
|
|
|
name: "Drawer",
|
|
|
|
|
data(){
|
|
|
|
|
return{
|
|
|
|
|
drawer:true,
|
|
|
|
|
menu:['抛丸','理料','划线','切割'],
|
|
|
|
|
drawer:false,
|
|
|
|
|
direction:'ltr',
|
|
|
|
|
withHeader:false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
handleSelect(key,path){
|
|
|
|
|
console.log(key,path)
|
|
|
|
|
show(){
|
|
|
|
|
this.drawer=true;
|
|
|
|
|
},
|
|
|
|
|
handleSelect(key){
|
|
|
|
|
switch (key){
|
|
|
|
|
case '抛丸':
|
|
|
|
|
this.$router.push(`/pwpg?zyq=${this.$route.query.zyq}&zyType=${this.$route.query.zyType}&deviceId=${this.$route.query.deviceId}`)
|
|
|
|
|
break;
|
|
|
|
|
case '理料':
|
|
|
|
|
this.$router.push(`/llpg?zyq=${this.$route.query.zyq}&zyType=${this.$route.query.zyType}&deviceId=${this.$route.query.deviceId}`)
|
|
|
|
|
break;
|
|
|
|
|
case '划线':
|
|
|
|
|
this.$router.push(`/hxpg?zyq=${this.$route.query.zyq}&zyType=${this.$route.query.zyType}&deviceId=${this.$route.query.deviceId}`)
|
|
|
|
|
break;
|
|
|
|
|
case '切割':
|
|
|
|
|
this.$router.push(`/qgpg?zyq=${this.$route.query.zyq}&zyType=${this.$route.query.zyType}&deviceId=${this.$route.query.deviceId}`)
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
//background: #002166;
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.drawer{
|
|
|
|
|
width: 25%;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
background: #003586;
|
|
|
|
|
|
|
|
|
|
.menu{
|
|
|
|
|
.menu-item{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
background-color: #002166;
|
|
|
|
|
|
|
|
|
|
.menu-item{
|
|
|
|
|
width: 90%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: white;
|
|
|
|
|
margin: 5vh 5px;
|
|
|
|
|
background: #0d84ff url('../../../assets/kban/cqbg.png') no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
height: 15%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: white;
|
|
|
|
|
padding: 100px 0 0 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.transparent-drawer{
|
|
|
|
|
::v-deep .el-drawer__body {
|
|
|
|
|
background-color: transparent; /* 设置背景透明 */
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|