cuijian
2025-07-28 accebdce93486d3b4f26e55ffdea047549cce20c
src/views/mdc/base/WorkshopSignageEntrance.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,94 @@
<template>
  <div class="page-container">
    <a-row>
      <h1>车间布局看板</h1>
      <a-list :grid="{gutter: 16, column:4}">
        <a-list-item v-for="item in workshopList" :key="item.id">
          <div class="workshop-name" @click="navigateToWorkshopSignage(item.id)">{{item.workshopName}}</div>
        </a-list-item>
      </a-list>
    </a-row>
    <a-row>
      <h1>分级看板</h1>
      <a-list :grid="{gutter: 16, column:4}">
        <a-list-item>
          <div class="workshop-name" @click="navigateToWorkshopSignageByUrl('/GradeWorkshopSignage')">分级看板</div>
        </a-list-item>
        <a-list-item>
          <div class="workshop-name" @click="navigateToWorkshopSignageByUrl('/RepairWorkshopSignage')">维修看板</div>
        </a-list-item>
      </a-list>
    </a-row>
  </div>
</template>
<script>
  import api from '@/api/mdc'
  export default {
    name: 'WorkshopSignageEntrance',
    data() {
      return {
        indexStyle: 1,
        workshopList: []
      }
    },
    created() {
      this.getWorkshopListByApi()
    },
    methods: {
      /**
       * é€šè¿‡è½¦é—´Id跳转至相应车间大屏看板
       * @param id è½¦é—´Id
       */
      navigateToWorkshopSignage(id) {
        const url = this.$router.resolve(`/MdcWorkshopSignage/${id}`).href
        window.open(url, '_blank')
      },
      /**
       * é€šè¿‡è½¦é—´Url地址跳转至对应大屏看板
       * @param httpUrl è½¦é—´Url地址
       */
      navigateToWorkshopSignageByUrl(httpUrl) {
        const url = this.$router.resolve(httpUrl).href
        window.open(url, '_blank')
      },
      /**
       * èŽ·å–è½¦é—´åˆ—è¡¨
       */
      getWorkshopListByApi() {
        api.getWorkshopListInHomePageApi().then(res => {
          console.log('res', res)
          if (res.result && res.result.length > 0) {
            this.workshopList = res.result
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .page-container {
    padding: 30px 30px 0;
    .workshop-name {
      /*width: 100%;*/
      background: #fff;
      padding: 55px 0;
      border-radius: 20px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 30px;
      cursor: pointer;
      margin: 0 8px;
    }
  }
</style>