xins
/
HwJyHbMes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改看板切换菜单

Browse Source
master
夜笙歌 7 months ago
parent f592646416
commit 1448619fee
1 changed files with 104 additions and 98 deletions
Show Stats Download Patch File Download Diff File

202
hw-ui/src/layout/index2.vue
Unescape Escape View File

@ -4,116 +4,122 @@
<div class="data" id="data">{{ data }}</div> <div class="data" id="data">{{ data }}</div>
<div class="time" id="time">{{ time }}</div> <div class="time" id="time">{{ time }}</div>
<div class="date" id="date">{{ date }}</div> <div class="date" id="date">{{ date }}</div>
<div class="top"> <div class="top">
<div class="select"> <div class="select">
<el-dropdown @command="handleCommand"> <el-dropdown @command="handleCommand">
<span class="el-dropdown-link"> <el-button type="primary" size="mini">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> 切换看板
</span> <i class="el-icon-arrow-down el-icon--right"></i>
<el-dropdown-menu slot="dropdown"> </el-button>
<el-dropdown-item command="/board/firstFloorProduction">一楼生产</el-dropdown-item> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="/board/firstFloorWarehouse">一楼能源</el-dropdown-item> <el-dropdown-item command="/index">后台系统</el-dropdown-item>
<el-dropdown-item command="/board/secondFloorProduction">二楼生产</el-dropdown-item> <el-dropdown-item command="/board/firstFloorProduction">一楼生产</el-dropdown-item>
<el-dropdown-item command="/board/secondFloorWarehouse">二楼仓储</el-dropdown-item> <el-dropdown-item command="/board/firstFloorWarehouse">一楼能源</el-dropdown-item>
<el-dropdown-item command="/board/thirdFloorProduction">三楼生产</el-dropdown-item> <el-dropdown-item command="/board/secondFloorProduction">二楼生产</el-dropdown-item>
<el-dropdown-item command="/board/thirdFloorWarehouse">三楼仓储</el-dropdown-item> <el-dropdown-item command="/board/secondFloorWarehouse">二楼仓储</el-dropdown-item>
<el-dropdown-item command="/board/fourthFloorProduction">四楼生产</el-dropdown-item> <el-dropdown-item command="/board/thirdFloorProduction">三楼生产</el-dropdown-item>
<el-dropdown-item command="/board/fourthFloorWarehouse">四楼仓储</el-dropdown-item> <el-dropdown-item command="/board/thirdFloorWarehouse">三楼仓储</el-dropdown-item>
<el-dropdown-item command="/board/fifthFloorProduction">五楼生产</el-dropdown-item> <el-dropdown-item command="/board/fourthFloorProduction">四楼生产</el-dropdown-item>
<el-dropdown-item command="/board/fifthFloorWarehouse">五楼仓储</el-dropdown-item> <el-dropdown-item command="/board/fourthFloorWarehouse">四楼仓储</el-dropdown-item>
</el-dropdown-menu> <el-dropdown-item command="/board/fifthFloorProduction">五楼生产</el-dropdown-item>
</el-dropdown> <el-dropdown-item command="/board/fifthFloorWarehouse">五楼仓储</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
let getDateIntervalFun = null let getDateIntervalFun = null
export default { export default {
name: 'BoardIndex', name: 'BoardIndex',
data() { data() {
return { return {
data:'', data: '',
time: '', time: '',
date: '', date: '',
value: '' value: ''
}
},
created() {
let floorData = JSON.parse(sessionStorage.getItem('FLOORDATA') || '{}')
this.data = floorData.query?.processName
const getDate = () => {
let date = new Date()
let YYYY = date.getFullYear()
let MM = (date.getMonth() + 1).toString().length === 1 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
let dd = date.getDate().toString().length === 1 ? ('0' + date.getDate()) : date.getDate()
let HH = date.getHours().toString().length === 1 ? ('0' + date.getHours()) : date.getHours()
let mm = date.getMinutes().toString().length === 1 ? ('0' + date.getMinutes()) : date.getMinutes()
let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds()
this.date = `${YYYY} - ${MM} - ${dd}`
this.time = `${HH} : ${mm} : ${ss}`
}
getDate()
getDateIntervalFun = setInterval(getDate, 1000)
},
methods: {
handleCommand(e) {
this.$router.push(e)
}
},
beforeDestroy() {
getDateIntervalFun = null
} }
},
created() {
let floorData = JSON.parse(sessionStorage.getItem('FLOORDATA') || '{}')
this.data = floorData.query?.processName
const getDate = () => {
let date = new Date()
let YYYY = date.getFullYear()
let MM = (date.getMonth() + 1).toString().length === 1 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
let dd = date.getDate().toString().length === 1 ? ('0' + date.getDate()) : date.getDate()
let HH = date.getHours().toString().length === 1 ? ('0' + date.getHours()) : date.getHours()
let mm = date.getMinutes().toString().length === 1 ? ('0' + date.getMinutes()) : date.getMinutes()
let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds()
this.date = `${YYYY} - ${MM} - ${dd}`
this.time = `${HH} : ${mm} : ${ss}`
}
getDate()
getDateIntervalFun = setInterval(getDate, 1000)
},
methods:{
handleCommand(e){
this.$router.push(e)
} }
},
beforeDestroy() {
getDateIntervalFun = null
}
}
</script> </script>
<style lang='less' scoped> <style lang="less" scoped>
/deep/ .el-dropdown { /deep/ .el-dropdown {
color: #fff; color: #fff;
} }
.top{
position:absolute;
top:0;
left:0;
width:100%;
height:10%;
&:hover{
.select{
display:block
}
}
.select{
display:none;
position:absolute;
top:65%;
left:50%;
transform:translate(-50%,-50%);
color:#fff
}
}
.time, .date, .data { .top {
position: absolute; position: absolute;
font-size: 0.8vw; top: 0;
color: #fcfcfc; left: 0;
transform: translate(-50%, -50%); width: 100%;
white-space: nowrap; height: 10%;
}
.data { &:hover {
top: 3.2%; .select {
right: 17%; display: block
} }
}
.time { .select {
top: 3.2%; display: none;
left: 85.8%; position: absolute;
} top: 65%;
right: 3%;
.date { transform: translateY(-50%);
top: 3.2%; color: #fff
left: 94.1%; }
} }
.time, .date, .data {
position: absolute;
font-size: 0.8vw;
color: #fcfcfc;
transform: translate(-50%, -50%);
white-space: nowrap;
}
.data {
top: 3.2%;
right: 17%;
}
.time {
top: 3.2%;
left: 85.8%;
}
.date {
top: 3.2%;
left: 94.1%;
}
</style> </style>

Write Preview
Loading…
Cancel
Save