1、实现数据加工程序确认表以及刀具清单打印功能（未联调后端数据） 2、终端故障报修页面开发完成并联调 3、调整终端首页样式 4、增加系统页面访问终端页...

zhaowei

2025-06-06 bd08b30389140909ae7c27223dc1a33bad04da83

 src/views/dnc/base/TerminalIndex.vue

@@ -1,109 +1,194 @@
<template>
  <div class="page-view-container">
  <div>
    <div class="page-header">
      <div>现场情况上报平台</div>
      <span class="username">欢迎您，{{nickname()}}</span>
    </div>
    <slot name="function"/>
    <div class="header-container">现场情况上报平台</div>
    <div class="content-container">
      <a-row>
        <a-col :span="8">
          <div class="button" @click="navigateTo('work','上班')">上班</div>
        </a-col>
        <a-col :span="8">
          <div class="button">下班</div>
        </a-col>
        <a-col :span="8">
          <div class="button" @click="navigateTo('fault','设备故障')">设备故障</div>
        </a-col>
        <template v-for="(item,index) in buttonList">
          <a-col :span="6" v-if="index<4">
            <div :class="'button button'+(index+1)" @click="navigateTo(item)">
              <img :src="require(`@/assets/terminal/${item.routePath}.svg`)"/>
              <div>{{item.label}}</div>
            </div>
          </a-col>
        </template>
      </a-row>

      <a-row>
        <a-col :span="8">
          <div class="button" @click="navigateTo('close','停机上报')">停机上报</div>
        </a-col>
        <a-col :span="8">
          <div class="button" @click="navigateTo('spotCheck','点检')">点检</div>
        </a-col>
        <a-col :span="8">
          <div class="button">合格率</div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <div class="button">程序呼叫</div>
        </a-col>
        <a-col :span="8">
          <div class="button">开工完工</div>
        </a-col>
        <a-col :span="8">
          <div class="button">程序回传</div>
        </a-col>
        <template v-for="(item,index) in buttonList">
          <a-col :span="6" v-if="index>=4">
            <div :class="'button button'+(index+1)" @click="navigateTo(item)">
              <img :src="require(`@/assets/terminal/${item.routePath}.svg`)"/>
              <div>{{item.label}}</div>
            </div>
          </a-col>
        </template>
      </a-row>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    name: 'TerminalIndex',
    data() {
      return {
        buttonList: [
          {
            label: '上下班',
            routePath: 'work',
            isOpenNewPage: false
          },
          {
            label: '故障报修',
            routePath: 'fault',
            isOpenNewPage: false
          },
          {
            label: '停机上报',
            routePath: 'close',
            isOpenNewPage: false
          },
          {
            label: '点检',
            routePath: 'spotCheck',
            isOpenNewPage: true
          },
          {
            label: '合格率',
            routePath: 'passRate',
            isOpenNewPage: false
          },
          {
            label: '程序呼叫',
            routePath: 'call',
            isOpenNewPage: false
          },
          {
            label: '二保',
            routePath: 'maintenance',
            isOpenNewPage: true
          },
          {
            label: '三保',
            routePath: 'maintenance',
            isOpenNewPage: true
          }
        ]
      }
    },
    methods: {
      navigateTo(url, projectTitle) {
        this.$router.push('/terminal/' + url)
        document.title = 'MDC智慧车间-' + projectTitle
      ...mapGetters(['nickname']),

      navigateTo(record) {
        if (!record.isOpenNewPage) this.$router.push('/terminal/' + record.routePath)
        else {
          window.open(this.$router.resolve('/flowable/workflow/FlowTodo').href, '_blank')
          return
        }
        document.title = record.label + '-MDC智慧车间'
      }
    }
  }
</script>

<style scoped lang="less">
  .page-view-container {
    background: linear-gradient(to bottom, #fff -15%, #000 55%,);
  .page-header {
    font-size: 2vw;
    color: #000;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1vw;

    .header-container {
      font-size: 50px;
      color: #eee;
      text-align: center;
      height: 15%;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      -webkit-align-items: flex-end;
    }

    .content-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 3% 10%;

      .ant-row {
        flex: 1;

        .ant-col {
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;

          .button {
            width: 250px;
            height: 125px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #E3F2D9;
            font-size: 45px;
            border: 2px solid #33579D;
            box-shadow: inset -5px 5px 12px rgba(0, 0, 0, 0.6);
            cursor: pointer;
            transition: all .1s ease-in-out;

            &:hover {
              transform: scale(1.05);
            }
          }
        }
        /*display: flex;*/
        /*flex-direction: column;*/
      }
    span {
      font-size: 1.3vw;
      color: #999;
    }
  }

  .content-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 3% 10%;

    .ant-row {
      flex: 1;

      .ant-col {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .button {
          width: 9.63vw;
          height: 9.38vw;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          font-size: 1.3vw;
          color: #fff;
          border-radius: 1vw;
          cursor: pointer;
          transition: all .1s ease-in-out;

          img {
            width: 2.6vw;
            margin-bottom: 0.8vw;
          }

          &:hover {
            transform: scale(1.05);
          }

          &.button1 {
            background: linear-gradient(top, #5ADEAD, #3BC3A6);
            background: -webkit-linear-gradient(top, #5ADEAD, #3BC3A6);
          }

          &.button2 {
            background: linear-gradient(top, #76A9FA, #5B8CF3);
            background: -webkit-linear-gradient(top, #76A9FA, #5B8CF3);
          }

          &.button3 {
            background: linear-gradient(top, #FAB976, #FB9557);
            background: -webkit-linear-gradient(top, #FAB976, #FB9557);
          }

          &.button4 {
            background: linear-gradient(top, #5FC2F9, #45A4F4);
            background: -webkit-linear-gradient(top, #5FC2F9, #45A4F4);
          }

          &.button5 {
            background: linear-gradient(top, #62F2EA, #55D6CE);
            background: -webkit-linear-gradient(top, #62F2EA, #55D6CE);
          }

          &.button6 {
            background: linear-gradient(top, #91A0F5, #6D7CF7);
            background: -webkit-linear-gradient(top, #91A0F5, #6D7CF7);
          }

          &.button7 {
            background: linear-gradient(top, #FF6A5A, #DB5A50);
            background: -webkit-linear-gradient(top, #FF6A5A, #DB5A50);
          }

          &.button8 {
            background: linear-gradient(top, #FFF248, #EADE46);
            background: -webkit-linear-gradient(top, #FFF248, #EADE46);
          }
        }
      }
    }
  }
</style>