仓储设备图色块修改，element组件国际化语言添加

huang

2025-10-23 b01723592cc0e6a9702dea57fb176a465c5ee45c

 UI-Project/src/views/GlassStorage/rawfilmstorage2.vue

@@ -23,56 +23,8 @@
const dialogFormVisiblee = ref(false)
const blindb = ref(false)
const Edit = ref(false)
const card1 = ref(false)
const card2 = ref(false)
const card3 = ref(false)
const card4 = ref(false)
const card5 = ref(false)
const card6 = ref(false)
const card7 = ref(false)
const card8 = ref(false)
const card9 = ref(false)
const card10 = ref(false)
const card11 = ref(false)
const card12 = ref(false)
const card13 = ref(false)
const card14 = ref(false)
const card15 = ref(false)
const card16 = ref(false)
const card17 = ref(false)
const card18 = ref(false)
const card19 = ref(false)
const card20 = ref(false)
const card21 = ref(false)
const card22 = ref(false)
const card23 = ref(false)
const card24 = ref(false)
const card25 = ref(false)
const card26 = ref(false)
const card27 = ref(false)
const card28 = ref(false)

const card31 = ref(false)
const card32 = ref(false)
const card33 = ref(false)
const card34 = ref(false)
const card35 = ref(false)
const card36 = ref(false)
const card37 = ref(false)

const card40 = ref(false)
const card41 = ref(false)
const card42 = ref(false)
const card43 = ref(false)
const card44 = ref(false)
const card45 = ref(false)
const card46 = ref(false)
const card47 = ref(false)
const card48 = ref(false)
const card49 = ref(false)

const card38 = ref(false)
const card101 = ref(false)
const cards = ref(Array(47).fill(false)); 

const timeRange = ref([])
const timeRangea = ref([])
@@ -141,152 +93,11 @@
  if (data.rawStationDetailsList != null) {
    loading.value = false
    tableDatab.value = data.rawStationDetailsList[0]
    if (data.rawStationDetailsList[0][0].patternThickness != null) {
      card1.value = true
    }
    if (data.rawStationDetailsList[0][1].patternThickness != null) {
      card2.value = true
    }
    if (data.rawStationDetailsList[0][2].patternThickness != null) {
      card3.value = true
    }
    if (data.rawStationDetailsList[0][3].patternThickness != null) {
      card4.value = true
    }
    if (data.rawStationDetailsList[0][4].patternThickness != null) {
      card5.value = true
    }
    if (data.rawStationDetailsList[0][5].patternThickness != null) {
      card6.value = true
    }
    if (data.rawStationDetailsList[0][6].patternThickness != null) {
      card7.value = true
    }
    if (data.rawStationDetailsList[0][7].patternThickness != null) {
      card8.value = true
    }
    if (data.rawStationDetailsList[0][8].patternThickness != null) {
      card9.value = true
    }
    if (data.rawStationDetailsList[0][9].patternThickness != null) {
      card10.value = true
    }
    if (data.rawStationDetailsList[0][10].patternThickness != null) {
      card11.value = true
    }
    if (data.rawStationDetailsList[0][11].patternThickness != null) {
      card12.value = true
    }
    if (data.rawStationDetailsList[0][12].patternThickness != null) {
      card13.value = true
    }
    if (data.rawStationDetailsList[0][13].patternThickness != null) {
      card14.value = true
    }
    if (data.rawStationDetailsList[0][14].patternThickness != null) {
      card15.value = true
    }
    if (data.rawStationDetailsList[0][15].patternThickness != null) {
      card16.value = true
    }
    if (data.rawStationDetailsList[0][16].patternThickness != null) {
      card17.value = true
    }
    if (data.rawStationDetailsList[0][17].patternThickness != null) {
      card18.value = true
    }
    if (data.rawStationDetailsList[0][18].patternThickness != null) {
      card19.value = true
    }
    if (data.rawStationDetailsList[0][19].patternThickness != null) {
      card20.value = true
    }
    if (data.rawStationDetailsList[0][20].patternThickness != null) {
      card21.value = true
    }
    if (data.rawStationDetailsList[0][21].patternThickness != null) {
      card22.value = true
    }
    if (data.rawStationDetailsList[0][22].patternThickness != null) {
      card23.value = true
    }
    if (data.rawStationDetailsList[0][23].patternThickness != null) {
      card24.value = true
    }
    if (data.rawStationDetailsList[0][24].patternThickness != null) {
      card25.value = true
    }
    if (data.rawStationDetailsList[0][25].patternThickness != null) {
      card26.value = true
    }
    if (data.rawStationDetailsList[0][26].patternThickness != null) {
      card27.value = true
    }
    if (data.rawStationDetailsList[0][27].patternThickness != null) {
      card28.value = true
    }

    if (data.rawStationDetailsList[0][28].patternThickness != null) {
      card31.value = true
    }
    if (data.rawStationDetailsList[0][29].patternThickness != null) {
      card32.value = true
    }
    if (data.rawStationDetailsList[0][30].patternThickness != null) {
      card33.value = true
    }
    if (data.rawStationDetailsList[0][31].patternThickness != null) {
      card34.value = true
    }
    if (data.rawStationDetailsList[0][32].patternThickness != null) {
      card35.value = true
    }
    if (data.rawStationDetailsList[0][33].patternThickness != null) {
      card36.value = true
    }
    if (data.rawStationDetailsList[0][34].patternThickness != null) {
      card37.value = true
    }


    if (data.rawStationDetailsList[0][35].patternThickness != null) {
      card40.value = true
    }
    if (data.rawStationDetailsList[0][36].patternThickness != null) {
      card41.value = true
    }
    if (data.rawStationDetailsList[0][37].patternThickness != null) {
      card42.value = true
    }
    if (data.rawStationDetailsList[0][38].patternThickness != null) {
      card43.value = true
    }
    if (data.rawStationDetailsList[0][39].patternThickness != null) {
      card44.value = true
    }
    if (data.rawStationDetailsList[0][40].patternThickness != null) {
      card45.value = true
    }
    if (data.rawStationDetailsList[0][41].patternThickness != null) {
      card46.value = true
    }
    if (data.rawStationDetailsList[0][42].patternThickness != null) {
      card47.value = true
    }
    if (data.rawStationDetailsList[0][43].patternThickness != null) {
      card48.value = true
    }
    if (data.rawStationDetailsList[0][44].patternThickness != null) {
      card49.value = true
    }

        
    if (data.rawStationDetailsList[0][45].patternThickness != null) {
      card38.value = true
    }

    if (data.rawStationDetailsList[0][46].patternThickness != null) {
      card101.value = true
    const stationList = data.rawStationDetailsList[0];
    for (let i = 0; i < 47; i++) {
      // stationList[i] 对应原 data.rawStationDetailsList[0][i]
      // cards[i] 对应原 card(i+1)
      cards.value[i] = stationList[i]?.patternThickness != null;
    }
  }
};
@@ -694,22 +505,24 @@
      </el-button>
      <el-button style="margin-left: 20px;" id="searchButton" type="success" @click="handleBinde">{{
        $t('film.warehouseReturn')
      }}
        }}
      </el-button>
      <el-button style="margin-left: 20px;" id="searchButton" type="success" @click="handlehistorical">{{
        $t('searchOrder.historicaltasks')
      }}
        }}
      </el-button>
      <el-date-picker style="margin-left: 10px;" v-model="timeRange" type="datetimerange" format="YYYY/MM/DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss" :start-placeholder="$t('film.starttime')"
        :end-placeholder="$t('film.endtime')" :default-time="defaultTime" />
      <el-select v-model="selectValuesa[0]" clearable :placeholder="$t('film.taskstatus')" style="margin-left: 10px; width: 200px;">
      <el-select v-model="selectValuesa[0]" clearable :placeholder="$t('film.taskstatus')"
        style="margin-left: 10px; width: 200px;">
        <el-option :label="$t('film.built')" value="0"></el-option>
        <el-option :label="$t('film.execution')" value="1"></el-option>
        <el-option :label="$t('film.finish')" value="2"></el-option>
        <el-option :label="$t('film.fail')" value="3"></el-option>
      </el-select>
      <el-select v-model="selectValuesa[1]" clearable :placeholder="$t('film.tasktype')" style="margin-left: 10px; width: 200px;">
      <el-select v-model="selectValuesa[1]" clearable :placeholder="$t('film.tasktype')"
        style="margin-left: 10px; width: 200px;">
        <el-option :label="$t('sorter.warehouseReturntasks')" value="1"></el-option>
        <el-option :label="$t('sorter.outputtasks')" value="2"></el-option>
        <el-option :label="$t('sorter.schedulingtasks')" value="3"></el-option>
@@ -717,7 +530,7 @@
        <el-option :label="$t('sorter.warehouseReturntasks')" value="5"></el-option>
      </el-select>
      <el-button type="primary" style="margin-left: 10px;" @click="selectReportData()">{{ $t('film.inquire')
      }}</el-button>
        }}</el-button>
    </div>
    <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
@@ -727,7 +540,7 @@
          <el-table-column prop="startSlot" align="center" :label="$t('film.originateslot')" />
          <el-table-column prop="endSlot" align="center" :label="$t('film.endoriginateslot')" />
          <el-table-column prop="patternQuantity" align="center" :label="$t('film.patternquantity')" />
          <el-table-column width="100" align="center" :label="$t('film.enabletype')" prop="taskType">
          <el-table-column width="150" align="center" :label="$t('film.enabletype')" prop="taskType">
            <template #default="scope">
              <el-tag :type="getStatusType1(scope.row.taskType)">
                {{ getStatusText1(scope.row.taskType) }}
@@ -757,60 +570,38 @@
      <div class="img-car1" style="z-index:999;top:250px;left:20px;position:absolute;"></div>

      <div class="glasscard1">
        <!-- <div class="img-car1" :style="'z-index:999;top:250px;left:' + 20 + 'px;position:absolute;'"></div> -->
        <div class="card1" v-show="card1" style="z-index:999;"></div>
        <div class="card2" v-show="card2" style="z-index:999;"></div>
        <div class="card3" v-show="card3" style="z-index:999;"></div>
        <div class="card4" v-show="card4" style="z-index:999;"></div>
        <div class="card5" v-show="card5" style="z-index:999;"></div>
        <div class="card6" v-show="card6" style="z-index:999;"></div>
        <div class="card7" v-show="card7" style="z-index:999;"></div>
        <div class="card8" v-show="card8" style="z-index:999;"></div>
        <div class="card9" v-show="card9" style="z-index:999;"></div>
        <div class="card10" v-show="card10" style="z-index:999;"></div>
        <div class="card11" v-show="card11" style="z-index:999;"></div>
        <div class="card12" v-show="card12" style="z-index:999;"></div>
        <div class="card13" v-show="card13" style="z-index:999;"></div>
        <div class="card14" v-show="card14" style="z-index:999;"></div>
        <div class="card15" v-show="card15" style="z-index:999;"></div>
        <div class="card16" v-show="card16" style="z-index:999;"></div>
        <div class="card17" v-show="card17" style="z-index:999;"></div>
        <div class="card18" v-show="card18" style="z-index:999;"></div>
        <div class="card19" v-show="card19" style="z-index:999;"></div>
        <div class="card20" v-show="card20" style="z-index:999;"></div>
        <div class="card21" v-show="card21" style="z-index:999;"></div>
        <div class="card22" v-show="card22" style="z-index:999;"></div>
        <div class="card23" v-show="card23" style="z-index:999;"></div>
        <div class="card24" v-show="card24" style="z-index:999;"></div>
        <div class="card25" v-show="card25" style="z-index:999;"></div>
        <div class="card26" v-show="card26" style="z-index:999;"></div>
        <div class="card27" v-show="card27" style="z-index:999;"></div>
        <div class="card28" v-show="card28" style="z-index:999;position:absolute;"></div>
      </div>
      <div class="glasscard2">
        <div class="card31" v-show="card31" style="z-index:999;"></div>
        <div class="card32" v-show="card32" style="z-index:999;"></div>
        <div class="card33" v-show="card33" style="z-index:999;"></div>
        <div class="card34" v-show="card34" style="z-index:999;"></div>
        <div class="card35" v-show="card35" style="z-index:999;"></div>
        <div class="card36" v-show="card36" style="z-index:999;"></div>
        <div class="card37" v-show="card37" style="z-index:999;"></div>
        <div class="card38" v-show="card38" style="z-index:999;"></div>
        <!-- i 为 28个 -->
        <div v-for="i in 28" :key="'group1-' + i" :class="`card${i}`" :style="{
          left: `${-1 + (i - 1) * 27}px`, // 计算 left（第一个从 -1 开始）
          width: '18px',
          height: '128px',
          backgroundColor: '#911005',
          }" v-show="cards[i-1]">
        </div>
      </div>

      <div class="glasscard3">
        <div class="card40" v-show="card40" style="z-index:999;"></div>
        <div class="card41" v-show="card41" style="z-index:999;"></div>
        <div class="card42" v-show="card42" style="z-index:999;"></div>
        <div class="card43" v-show="card43" style="z-index:999;"></div>
        <div class="card44" v-show="card44" style="z-index:999;"></div>
        <div class="card45" v-show="card45" style="z-index:999;"></div>
        <div class="card46" v-show="card46" style="z-index:999;"></div>
        <div class="card47" v-show="card47" style="z-index:999;"></div>
        <div class="card48" v-show="card48" style="z-index:999;"></div>
        <div class="card49" v-show="card49" style="z-index:999;"></div>
      <div class="card101" :style="{
        position: 'absolute',
        zIndex: 999,
      }" v-show="cards[46]">
      </div>
      <div class="card101" v-show="card101" style="z-index:999;"></div>

      <div class="glasscard2">
        <!-- i 为 17个 -->
        <div v-for="i in 17" :key="'group2-' + i" :class="`card${28 + i}`" :style="{
          left: `${-1 + (i - 1) * 27}px`, // 计算 left（第一个从 -1 开始）
          width: '18px', // 每个卡片的宽度
          height: '128px', // 每个卡片的高度
          backgroundColor: '#911005', // 卡片的背景颜色
        }" v-show="cards[27 + i]">
        </div>
      </div>

      <div class="card99" :style="{
        position: 'absolute',
        zIndex: 999,
      }" v-show="cards[45]">
      </div>
    </div>

    <el-dialog v-model="dialogFormVisiblea" top="5vh" width="85%">
@@ -1065,7 +856,7 @@
  min-height: 800px;
  width: 1070px;
  max-width: 100%;
  background-size: 980px 700px;
  background-size: 873px 628px;
  overflow: hidden;
  position: relative;
}
@@ -1087,397 +878,41 @@
}

.glasscard1 {
  height: 118px;
  height: 48px;
  position: relative;
  margin-top: 625px;
  margin-left: 493px;
  margin-top: 439px;
  margin-left: 57px;
}

.card1 {
  width: 8px;
  height: 95px;
  background-color: #911005;
.glasscard1 > [class^="card"] {
  position: absolute;
  left: 0;
}

.card2 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 19px;
}

.card3 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 38px;
}

.card4 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 57px;
}

.card5 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 76px;
}

.card6 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 95px;
}

.card7 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 114px;
}

.card8 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 133px;
}

.card9 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 152px;
}

.card10 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 171px;
}

.card11 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 190px;
}

.card12 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 209px;
}

.card13 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 228px;
}

.card14 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 247px;
}

.card15 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 266px;
}

.card16 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 285px;
}

.card17 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 304px;
}

.card18 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 323px;
}

.card19 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 342px;
}

.card20 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 361px;
}

.card21 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 380px;
}

.card22 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 399px;
}

.card23 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 418px;
}

.card24 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 437px;
}

.card25 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 456px;
}

.card26 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 475px;
}

.card27 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 494px;
}

.card28 {
  width: 8px;
  height: 95px;
  background-color: #911005;
  position: absolute;
  left: 513px;
  z-index: 999;
}

.glasscard2 {
  position: relative;
  margin-top: -420px;
  margin-left: 495px;
  margin-top: -425px;
  margin-left: 274px;
}

.card31 {
  width: 8px;
  height: 90px;
  background-color: #911005;
.glasscard2 > [class^="card"] {
  position: absolute;
  left: 0;
  z-index: 999;
}

.card32 {
  width: 8px;
  height: 90px;
  background-color: #911005;
  position: absolute;
  left: 19px;
}

.card33 {
  width: 8px;
  height: 90px;
  background-color: #911005;
  position: absolute;
  left: 38px;
}

.card34 {
  width: 8px;
  height: 90px;
  background-color: #911005;
  position: absolute;
  left: 57px;
}

.card35 {
  width: 8px;
  height: 90px;
  background-color: #911005;
  position: absolute;
  left: 76px;
}

.card36 {
  width: 8px;
  height: 90px;
  background-color: #911005;
  position: absolute;
  left: 95px;
}

.card37 {
  width: 8px;
  height: 90px;
  background-color: #911005;
  position: absolute;
  left: 114px;
}

.card38 {
  width: 8px;
  height: 90px;
  background-color: #911005;
  position: absolute;
  left: 136px;
}

.glasscard3 {
  position: relative;
  margin-left: 806px;
  margin-top: -90px;
}

.card40 {
  width: 8px;
  height: 90px;
  background-color: #911005;
  position: absolute;
  left: 0;
}

.card41 {
  width: 8px;
  height: 90px;
  background-color: #911005;
  position: absolute;
  left: 19px;
}

.card42 {
  width: 8px;
  height: 90px;
  background-color: #911005;
  position: absolute;
  left: 38px;
}

.card43 {
  width: 8px;
  height: 90px;
  background-color: #911005;
  position: absolute;
  left: 57px;
}

.card44 {
  width: 8px;
  height: 90px;
  background-color: #911005;
  position: absolute;
  left: 76px;
}

.card45 {
  width: 8px;
  height: 90px;
  background-color: #911005;
  position: absolute;
  left: 95px;
}

.card46 {
  width: 8px;
  height: 90px;
  background-color: #911005;
  position: absolute;
  left: 114px;
}

.card47 {
  width: 8px;
  height: 90px;
  background-color: #911005;
  position: absolute;
  left: 133px;
}

.card48 {
  width: 8px;
  height: 90px;
  background-color: #911005;
  position: absolute;
  left: 152px;
}

.card49 {
  width: 8px;
  height: 90px;
  background-color: #911005;
  position: absolute;
  left: 171px;
.card99 {
  width: 19px;
  height: 128px;
  background-color: #911005; 
  top: 61px;
  left: 796px;
}

.card101 {
  width: 8px;
  height: 90px;
  background-color: #911005;
  position: absolute;
  left: 1023px;
  width: 19px;
  height: 128px;
  background-color: #911005; 
  top: 66px;
  left: 48px;
}
</style>