yudao-dev/src/views/choicePart/index.vue

<template>
  <div class="choicepart-container">
    <navbar />
    <div class="choicepart-wrapper">
      <div class="choicepart-box" id="choicepartBox" :style="'transform:scale('+scale+');width:1574px;height:538px;'">
      <div class="choicepart-line1">
        <div
          v-for="(item, index) in menuArr1"
          :key="index"
          class="choicepart-item"
          @click="handelClick(item, item.choicepart)"
          :style="{opacity: item.visible?1:0.4, pointerEvents:item.visible?'auto':'none'}"
        >
          <div>
            <img :src="require(`../../assets/images/choicepart/${item.name}.png`)" alt="">
          </div>
          <div class="choicepart-item-title">{{item.meta.title}}</div>
        </div>
      </div>
      <div class="choicepart-line2">
        <div
          v-for="(item, index) in menuArr2"
          :key="index"
          class="choicepart-item"
          @click="handelClick(item, item.choicepart)"
          :style="{opacity: item.visible?1:0.4, pointerEvents:item.visible?'auto':'none'}"
        >
          <div>
            <img :src="require(`../../assets/images/choicepart/${item.name}.png`)" alt="">
          </div>
          <div class="choicepart-item-title">{{item.meta.title}}</div>
        </div>
      </div>
    </div>
    </div>
    <div class="choicepart-footer">&copy; 中建材智能自动化研究院有限公司</div>
  </div>
</template>
<script>
import Navbar from './components/Navbar.vue'
import { debounce } from '@/utils/debounce'
export default {
  components: { Navbar },
  name: 'choicePart',
  data() {
    return {
      boxReset: '',
      scale: 1,
      menuArr1: [
        {
          name: 'Core',
          title: '基础核心',
          visible: false,
          meta: {
            title: ''
          }
        },
        {
          name: 'Order',
          title: '订单管理',
          visible: false,
          meta: {
            title: ''
          }
        },
        {
          name: 'Equipment',
          title: '设备管理',
          visible: false,
          meta: {
            title: ''
          }
        },
        {
          name: 'Group',
          title: '班组管理',
          visible: false,
          meta: {
            title: ''
          }
        },
        {
          name: 'Quality',
          title: '质量管理',
          visible: false,
          meta: {
            title: ''
          }
        },
        {
          name: 'Warehouse',
          title: '仓库管理',
          visible: false,
          meta: {
            title: ''
          }
        },
        {
          name: 'Energy',
          title: '能源管理',
          visible: false,
          meta: {
            title: ''
          }
        }
      ],
      menuArr2: [
        {
          name: 'Packaging',
          title: '包装管理',
          visible: false,
          meta: {
            title: ''
          }
        },
        {
          name: 'Material',
          title: '物料管理',
          visible: false,
          meta: {
            title: ''
          }
        },
        {
          name: 'Extend',
          title: '工艺管理',
          visible: false,
          meta: {
            title: ''
          }
        },
        {
          name: 'Delivery',
          title: '成品发货',
          visible: false,
          meta: {
            title: ''
          }
        },
        {
          name: 'Report',
          title: '报表管理',
          visible: false,
          meta: {
            title: ''
          }
        },
        {
          name: 'System',
          title: '系统管理',
          visible: false,
          meta: {
            title: ''
          }
        }
      ],
    }
  },
  // computed:{
  //   ...mapGetters(['sidebarRouters'])
  // },
  mounted() {
    this.getMsg()
    this.boxReset = debounce(() => {
      this.resetSize()
    }, 300)
    this.boxReset()
    window.addEventListener('resize', () => {
      this.boxReset()
    })
  },
  methods: {
    getMsg() {
      let menuList = this.$store.state.permission.sidebarRouters
      console.log(menuList)
      if (menuList.length > 0) {
        for (let i = 0; i < menuList.length; i ++) {
          for (let k = 0; k < 7; k++) {
            if (menuList[i].name === this.menuArr1[k].name) {
              this.menuArr1[k].visible = true
              this.menuArr1[k].id = menuList[i].id
              this.menuArr1[k].choicepart = i
              this.menuArr1[k].children = menuList[i].children
              this.menuArr1[k].meta = menuList[i].meta
            }
          }
          for (let j = 0; j < 6; j++) {
            if (menuList[i].name === this.menuArr2[j].name) {
              this.menuArr2[j].visible = true
              this.menuArr2[j].id = menuList[i].id
              this.menuArr2[j].choicepart = i
              this.menuArr2[j].children = menuList[i].children
              this.menuArr2[j].meta = menuList[i].meta
            }
          }
        }
      }
      console.log(this.menuArr1)
      console.log(this.menuArr2)
    },
    handelClick(item, index) {
      // this.$router.push({name: 'SystemUser'})
      this.$store.dispatch('app/setChoicepart', index)
      this.toRouter(item)
      // if (item.meta.unuse) {
      //   this.$message.warning(this.$t('暂无数据'))
      // } else {
      //   this.toRouter(item)
      // }
    },
    toRouter(item) {
      console.log(item)
      if (item.children) {
        this.toRouter(item.children[0])
      } else {
        this.$router.push({ name: item.name })
      }
    },
    resetSize() {
      let choicepartBox = document.querySelector('#choicepartBox')
      let rw = parseFloat(window.innerWidth)
      let rh = parseFloat(window.innerHeight)
      let bw = parseFloat(choicepartBox.style.width)
      let bh = parseFloat(choicepartBox.style.height)
      let wx = 0.82/(bw / rw)
      let hx = 0.56/(bh / rh)
      this.scale = wx > hx ? hx : wx
    }
  }
}
</script>
<style lang='scss' scoped>
.choicepart-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: url('../../assets/images/choicepart/choicepart-back.png') repeat;
  background-size: 100% 100%;
  .choicepart-wrapper {
    width: 100vw;
    height: calc(100vh - 94px);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .choicepart-box {
    // border: 1px solid red;
    .choicepart-line1 {
      width: 100%;
      margin-bottom: 80px;
      display: flex;
      flex-flow: row nowrap;
    }
    .choicepart-line2 {
      width: 100%;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
    }
    .choicepart-item {
      width: 184px;
      height: 224px;
      background: url('../../assets/images/choicepart/choice-item-back.png') no-repeat;
      background-size: 100% 100%;
      border-radius: 5px;
      overflow: hidden;
      cursor: pointer;
      position: relative;
      margin: 0 20px;
      img {
        width: 184px;
        height: 224px;
      }
      .choicepart-item-title {
        overflow: hidden;
        padding: 0 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: absolute;
        bottom: 0;
        left: 2px;
        right: 2px;
        text-align: center;
        color: #fff;
        font-size: 16px;
        line-height: 40px;
        height: 40px;
        letter-spacing: 2px;
        background-color: rgba($color: #0b58ff, $alpha: 0.45);
      }
    }
    .choicepart-item:hover {
      .choicepart-item-title {
        background-color: rgba($color: #0b58ff, $alpha: 1);
      }
    }
  }
  .choicepart-footer {
    position: absolute;
    width: 100%;
    color: #C7C7C7;
    user-select: none;
    font-size: 12px;
    letter-spacing: 1px;
    height: 30px;
    display: grid;
    place-content: center;
    bottom: 0;
    opacity: 0.5;
  }
}
</style>