From d91893dbd49538d312e299c1cc507a7792abd7d7 Mon Sep 17 00:00:00 2001
From: yangys <y_ys79@sina.com>
Date: 星期日, 14 一月 2024 14:20:25 +0800
Subject: [PATCH] 设备类型假如修改删除
---
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