From 10562a6dac1492fe3dda566a800a4fec1f6e3bca Mon Sep 17 00:00:00 2001 From: gaosp <gaosp> Date: 星期日, 14 一月 2024 15:09:34 +0800 Subject: [PATCH] Merge branch 'master' of http://www.beijingsoft.cn:9090/r/mdc-front --- src/views/home/index.vue | 160 ++++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 127 insertions(+), 33 deletions(-) diff --git a/src/views/home/index.vue b/src/views/home/index.vue index c53dc1f..d8cd09d 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -2,16 +2,58 @@ <Home> <template slot="menu"> <div class="menu-container"> - <ul class="" @click="navigateTo('map')"> - <li class="active">鐘舵�佺洃鎺�</li> - <li @click="navigateTo('map')">澶у睆灞曠ず</li> - <li>杞﹂棿鍦板浘</li> - <li>杞﹂棿鍒楄〃</li> - <li>璁惧淇濆吇</li> - <li>鎶ヨ〃鐢熸垚</li> - <li>鐝璁剧疆</li> - <li>宸ヤ欢淇℃伅</li> - <li>鏇村鑿滃崟</li> + <ul class=""> + <li :class="activeId ==='1' ? 'active' : ''" @click="navigateTo('1')">鐘舵�佺洃鎺�</li> + <li :class="activeId ==='0' ? 'active' : ''" @click="navigateTo('0')">澶у睆灞曠ず</li> + <li :class="activeId ==='2' ? 'active' : ''" @click="navigateTo('2')"> + <span> + 杞﹂棿鍦板浘 + </span> + + </li> + <li :class="activeId ==='3' ? 'active' : ''" @click="navigateTo('3')"> + <span> + 杞﹂棿鍒楄〃<i class="el-icon-caret-bottom"></i> + </span> + <ul v-if="showSub"> + <li v-for="item in plantList" :key="item.id" @click.stop="navigateTo('3',item)">{{ item.name }}</li> + </ul> + </li> + <li :class="activeId ==='4' ? 'active' : ''" @click="navigateTo('4')"> + <span> + 璁惧淇濆吇<i class="el-icon-caret-bottom"></i> + </span> + <!-- <ul v-if="showSub"> + <li>2鍘�</li> + <li>2鍘�</li> + <li>2鍘�</li> + <li>2鍘�</li> + </ul> --> + </li> + <li :class="activeId ==='5' ? 'active' : ''" @click="navigateTo('5')"> + <span> + 鎶ヨ〃鐢熸垚<i class="el-icon-caret-bottom"></i> + </span> + <ul v-if="showSub"> + <li>2鍘�</li> + <li>2鍘�</li> + <li>2鍘�</li> + <li>2鍘�</li> + </ul> + </li> + <li :class="activeId ==='6' ? 'active' : ''" @click="navigateTo('6')">鐝璁剧疆</li> + <li :class="activeId ==='7' ? 'active' : ''" @click="navigateTo('7')">宸ヤ欢淇℃伅</li> + <li :class="activeId ==='8' ? 'active' : ''" @click="navigateTo('8')"> + <span> + 鏇村鑿滃崟<i class="el-icon-caret-bottom"></i> + </span> + <ul v-if="showSub"> + <li>2鍘�</li> + <li>2鍘�</li> + <li>2鍘�</li> + <li>2鍘�</li> + </ul> + </li> </ul> <div class="user"> <span>Admin</span> @@ -20,12 +62,7 @@ </div> </template> <template slot="content"> - <div class="container"> - <!-- <div class="welcome"> - admin鎮ㄥソ锛屾杩庝娇鐢ㄥ崈鏂囩鎶�MDC灞曠ず绯荤粺 - </div> --> - <router-view></router-view> - </div> + <router-view></router-view> </template> </Home> </template> @@ -36,6 +73,16 @@ components: { Home }, + data () { + return { + activeId: '', + showSub: false, + plantList: [] + } + }, + created () { + this.getmachineList() + }, methods: { logout() { this.$store.dispatch('LogOut').then(() => { @@ -43,44 +90,91 @@ this.$router.push('/') }) }, - navigateTo (name) { - console.log(name) - this.$router.push('/home/map') - } + navigateTo (name,v) { + let routers = { + 2: 'map', + 3: 'workshop', + 4: 'maintenance', + 7: 'component' + } + console.log(name, '>>>>>>>') + if (name === this.activeId) { + this.showSub = !this.showSub + } else { + this.showSub = true + } + if (['3','5','8'].includes(name)) { + this.activeId = name + console.log(v) + this.$router.push({name: routers[name],params: {id: v.id},query: { + ...v + }}) + } else { + this.activeId = name + console.log(name) + // this.$router.push('/home/map') + this.$router.push({name: routers[name]}) + } + + }, + getmachineList () { + this.$http.post('/plant/list', { + }).then(res => { + this.plantList = res.data + }) + }, }, } </script> <style lang="scss" scoped> -.container { - position: absolute; - top: 0; - left: 50%; - width: 60%; - transform: translateX(-50%); - height: 100%; - background-image: url('./earth.png'); - background-repeat: no-repeat; - background-size: contain; -} + .menu-container { margin-left: auto; display: flex; line-height: 37px; - ul { + & > ul { flex: 0 1 auto; color: #AEAFAF; font-size: 18px; list-style: none; display: flex; - li { + & > li { cursor: pointer; background: #27394E; padding: 0 12px; white-space: nowrap; text-overflow: ellipsis; + position: relative; + ul { + display: none; + } // user-select:none; } + & > li.active { + & > ul { + padding: 0; + margin: 0; + padding-inline: 0; + list-style: none; + min-width: 100%; + display: block; + position: absolute; + left: 0; + z-index: 999; + background: rgba(0,0,0,.5); + text-align: center; + border: 1px solid #0170bc; + li { + padding: 4px; + margin: 0; + color: #FFF; + } + li:hover { + color: #68D9FF; + } + } + } li~li { margin-left: 10px; } -- Gitblit v1.9.3