修改看板切换菜单

hw-ui/src/layout/index2.vue

@@ -4,116 +4,122 @@
     <div class="data" id="data">{{ data }}</div>
     <div class="time" id="time">{{ time }}</div>
     <div class="date" id="date">{{ date }}</div>
-<div class="top">
-<div class="select">
-  <el-dropdown @command="handleCommand">
-  <span class="el-dropdown-link">
-    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
-  </span>
-  <el-dropdown-menu slot="dropdown">
-    <el-dropdown-item command="/board/firstFloorProduction">一楼生产</el-dropdown-item>
-    <el-dropdown-item command="/board/firstFloorWarehouse">一楼能源</el-dropdown-item>
-    <el-dropdown-item command="/board/secondFloorProduction">二楼生产</el-dropdown-item>
-    <el-dropdown-item command="/board/secondFloorWarehouse">二楼仓储</el-dropdown-item>
-    <el-dropdown-item command="/board/thirdFloorProduction">三楼生产</el-dropdown-item>
-    <el-dropdown-item command="/board/thirdFloorWarehouse">三楼仓储</el-dropdown-item>
-    <el-dropdown-item command="/board/fourthFloorProduction">四楼生产</el-dropdown-item>
-    <el-dropdown-item command="/board/fourthFloorWarehouse">四楼仓储</el-dropdown-item>
-    <el-dropdown-item command="/board/fifthFloorProduction">五楼生产</el-dropdown-item>
-    <el-dropdown-item command="/board/fifthFloorWarehouse">五楼仓储</el-dropdown-item>
-  </el-dropdown-menu>
-</el-dropdown>
+    <div class="top">
+      <div class="select">
+        <el-dropdown @command="handleCommand">
+          <el-button type="primary" size="mini">
+            切换看板
+            <i class="el-icon-arrow-down el-icon--right"></i>
+          </el-button>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="/index">后台系统</el-dropdown-item>
+            <el-dropdown-item command="/board/firstFloorProduction">一楼生产</el-dropdown-item>
+            <el-dropdown-item command="/board/firstFloorWarehouse">一楼能源</el-dropdown-item>
+            <el-dropdown-item command="/board/secondFloorProduction">二楼生产</el-dropdown-item>
+            <el-dropdown-item command="/board/secondFloorWarehouse">二楼仓储</el-dropdown-item>
+            <el-dropdown-item command="/board/thirdFloorProduction">三楼生产</el-dropdown-item>
+            <el-dropdown-item command="/board/thirdFloorWarehouse">三楼仓储</el-dropdown-item>
+            <el-dropdown-item command="/board/fourthFloorProduction">四楼生产</el-dropdown-item>
+            <el-dropdown-item command="/board/fourthFloorWarehouse">四楼仓储</el-dropdown-item>
+            <el-dropdown-item command="/board/fifthFloorProduction">五楼生产</el-dropdown-item>
+            <el-dropdown-item command="/board/fifthFloorWarehouse">五楼仓储</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
 
-</div>
-</div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 
-let getDateIntervalFun = null
-export default {
-  name: 'BoardIndex',
-  data() {
-    return {
-      data:'',
-      time: '',
-      date: '',
-      value: ''
+  let getDateIntervalFun = null
+  export default {
+    name: 'BoardIndex',
+    data() {
+      return {
+        data: '',
+        time: '',
+        date: '',
+        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>
-<style lang='less' scoped>
-/deep/ .el-dropdown {
+<style lang="less" scoped>
+  /deep/ .el-dropdown {
     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
-}
-}
+  }
+
+  .top {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 10%;
+
+    &:hover {
+      .select {
+        display: block
+      }
+    }
+
+    .select {
+      display: none;
+      position: absolute;
+      top: 65%;
+      right: 3%;
 
-.time, .date, .data {
-  position: absolute;
-  font-size: 0.8vw;
-  color: #fcfcfc;
-  transform: translate(-50%, -50%);
-  white-space: nowrap;
-}
+      transform: translateY(-50%);
+      color: #fff
+    }
+  }
 
-.data {
-  top: 3.2%;
-  right: 17%;
-}
+  .time, .date, .data {
+    position: absolute;
+    font-size: 0.8vw;
+    color: #fcfcfc;
+    transform: translate(-50%, -50%);
+    white-space: nowrap;
+  }
 
-.time {
-  top: 3.2%;
-  left: 85.8%;
-}
+  .data {
+    top: 3.2%;
+    right: 17%;
+  }
 
-.date {
-  top: 3.2%;
-  left: 94.1%;
-}
+  .time {
+    top: 3.2%;
+    left: 85.8%;
+  }
+
+  .date {
+    top: 3.2%;
+    left: 94.1%;
+  }
 </style>