车间看板页面调整设备状态位置至页头右侧，原页头右侧功能按钮区域移至页头左侧

zhuzhuanzhuan

2023-11-21 ab30f3859d73caa2d668b5bb6dbdff942d89c3db

车间看板页面调整设备状态位置至页头右侧，原页头右侧功能按钮区域移至页头左侧

 src/views/WorkshopSignage.vue

@@ -2,7 +2,7 @@
  <dv-full-screen-container class="full-screen-container">
    <header class="page-header">
      {{ workshopDetails.workshopName }}
      <div class="header-right" v-has="'home:saveDevicePositionAndSize'">
      <div class="header-left" v-has="'home:saveDevicePositionAndSize'">
        <a-space>
          <span v-if="!isSwitchChecked">开启功能</span>
          <span v-else>关闭功能</span>
@@ -15,6 +15,13 @@
          />
        </a-space>
        <a-button type="primary" icon="save" size="large" @click="saveDevicePositionAndSizeByApi">保存位置</a-button>
      </div>
      <div class="device-status-info">
        <div v-for="item in deviceStatusList" :key="item.value" class="single-status-info">
          <div>{{ item.label }}</div>
          <div class="status-square" :style="{ backgroundColor: item.color }"></div>
          <div>{{ getDeviceNumberByStatus(item.value) }}</div>
        </div>
      </div>
    </header>

@@ -70,13 +77,7 @@
            </div>
          </div>
        </VueDragResize>
        <div class="device-status-info">
          <div v-for="item in deviceStatusList" :key="item.value" class="single-status-info">
            <div>{{ item.label }}</div>
            <div class="status-square" :style="{ backgroundColor: item.color }"></div>
            <div>{{ getDeviceNumberByStatus(item.value) }}</div>
          </div>
        </div>

      </div>
    </dv-border-box-8>

@@ -317,29 +318,23 @@
      text-align: center;
      position: relative;

      .header-right {
      .header-left {
        width: 450px;
        position: absolute;
        right: 0px;
        left: 0px;
        top: 35px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        font-size: 16px;
      }
    }

    .content-container {
      width: 100%;
      height: calc(100% - 80px);
      background-repeat: no-repeat;
      background-size: 100% 100%;

      .device-status-info {
        font-size: 16px;
        width: 400px;
        position: absolute;
        top: 5px;
        right: 5px;
        top: 40px;
        right: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
@@ -358,6 +353,14 @@
          }
        }
      }
    }

    .content-container {
      width: 100%;
      height: calc(100% - 80px);
      background-repeat: no-repeat;
      background-size: 100% 100%;


      .single-device {
        position: absolute;