严智鑫
2024-04-24 18f6e14f2cb0e19fc8726e9821bc4db172a04d17
UI-Project/src/views/Slicecage/slicecage.vue
@@ -6,9 +6,20 @@
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { tr } from "element-plus/es/locale";
const dialogFormVisible = ref(false)
const dialogFormVisiblea = ref(false)
const dialogFormVisibleb = ref(false)
const carposition1 = ref(60);
const carposition2 = ref(200);
const timers1 =ref(true);
const timers2 =ref(true);
const cellshow=ref(false);
const cellshow1=ref(true);
const cellshow2=ref(true);
const million=ref(0);
const million1=ref(0);
const currentPage4 = ref(4)
const pageSize4 = ref(100)
@@ -20,7 +31,7 @@
    c: '123456789',
    d: '1568251',
    e: '1',
    f: '100',
    f: '100*100',
    g: '',
  },
]
@@ -32,7 +43,7 @@
    c: '123456789',
    d: '1568251',
    e: '1',
    f: '100',
    f: '100*100',
    g: '',
  }
]
@@ -59,6 +70,62 @@
      })
    })
}
  var timer=setInterval(() => {
    console.log(million.value,million1.value);
    million.value+=1;
    if(million.value-million1.value!==12){
      if(million.value-million1.value>=2){
        if(carposition1.value==200){
          timers1.value=false;
        }else if(carposition1.value==60){
          timers1.value=true;
        }
        if(timers1.value==true){
          carposition1.value=carposition1.value+14;
        }else{
          carposition1.value=carposition1.value-14;
        }
        if(carposition2.value==200){
          timers2.value=false;
        }else if(carposition2.value==60){
          timers2.value=true;
        }
        if(timers2.value==true){
          carposition2.value+=14;
        }else{
          carposition2.value-=14;
        }
      }else{
      }
    }else{
      million1.value=million.value;
      if(cellshow.value==true){
        cellshow.value=false;
      }else{
        cellshow.value=true;
      }
      if(cellshow1.value==true){
        cellshow1.value=false;
      }else{
        cellshow1.value=true;
      }
      if(cellshow2.value==true){
        cellshow2.value=false;
      }else{
        cellshow2.value=true;
      }
    }
  }, 1000);
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
@@ -133,7 +200,9 @@
          <el-table-column prop="d" align="center" label="流程卡号" min-width="120" />
          <el-table-column prop="e" align="center" label="钢化版图号" min-width="157" />
          <el-table-column prop="f" align="center" label="尺寸" min-width="120" />
          <el-table-column prop="g" align="center" label="结束任务" min-width="120" />
          <el-table-column prop="g" align="center" label="结束任务" min-width="120">
    <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="text">完成任务</el-button>
</el-table-column>
        </el-table>
      </div>
    </el-card>
@@ -149,33 +218,121 @@
          <el-table-column prop="d" align="center" label="流程卡号" min-width="120" />
          <el-table-column prop="e" align="center" label="钢化版图号" min-width="157" />
          <el-table-column prop="f" align="center" label="尺寸" min-width="120" />
          <el-table-column prop="g" align="center" label="结束任务" min-width="120" />
          <el-table-column prop="g" align="center" label="结束任务" min-width="120">
    <el-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="text">完成任务</el-button>
</el-table-column>
        </el-table>
      </div>
    </el-card>
    <div style="padding: 10px;display: flex;height:110px;">
                <div v-for="n in 9" :key="n" id="occupy">
      <div  id="occupy">
                    <el-col style="text-align:left;font-weight: bold;">#1</el-col>
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">使用率</span><span id="zhi">33%</span>
                        <span id="biao">使用率</span><span id="zhi">35%</span>
                    </el-col>
                    <hr style="width:80%;margin: 0 auto;" />
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">空间(片数)</span><span id="zhi">555</span>
                        <span id="biao">空闲(格子数)</span><span id="zhi">555</span>
                    </el-col>
                </div>
                </div>
                <div  id="occupy">
                    <el-col style="text-align:left;font-weight: bold;">#2</el-col>
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">使用率</span><span id="zhi">35%</span>
                    </el-col>
                    <hr style="width:80%;margin: 0 auto;" />
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">空闲(格子数)</span><span id="zhi">555</span>
                    </el-col>
                </div>
                <div  id="occupy">
                    <el-col style="text-align:left;font-weight: bold;">#3</el-col>
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">使用率</span><span id="zhi">35%</span>
                    </el-col>
                    <hr style="width:80%;margin: 0 auto;" />
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">空闲(格子数)</span><span id="zhi">555</span>
                    </el-col>
                </div>
                <div  id="occupy">
                    <el-col style="text-align:left;font-weight: bold;">#4</el-col>
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">使用率</span><span id="zhi">35%</span>
                    </el-col>
                    <hr style="width:80%;margin: 0 auto;" />
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">空闲(格子数)</span><span id="zhi">555</span>
                    </el-col>
                </div>
                <div  id="occupy">
                    <el-col style="text-align:left;font-weight: bold;">#5</el-col>
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">使用率</span><span id="zhi">35%</span>
                    </el-col>
                    <hr style="width:80%;margin: 0 auto;" />
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">空闲(格子数)</span><span id="zhi">555</span>
                    </el-col>
                </div>
                <div  id="occupy">
                    <el-col style="text-align:left;font-weight: bold;">#6</el-col>
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">使用率</span><span id="zhi">35%</span>
                    </el-col>
                    <hr style="width:80%;margin: 0 auto;" />
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">空闲(格子数)</span><span id="zhi">555</span>
                    </el-col>
                </div>
                <div  id="occupy">
                    <el-col style="text-align:left;font-weight: bold;">#7</el-col>
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">使用率</span><span id="zhi">35%</span>
                    </el-col>
                    <hr style="width:80%;margin: 0 auto;" />
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">空闲(格子数)</span><span id="zhi">555</span>
                    </el-col>
                </div>
                <div  id="occupy">
                    <el-col style="text-align:left;font-weight: bold;">#8</el-col>
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">使用率</span><span id="zhi">35%</span>
                    </el-col>
                    <hr style="width:80%;margin: 0 auto;" />
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">空闲(格子数)</span><span id="zhi">555</span>
                    </el-col>
                </div>
                <!-- <div v-for="n in 8" :key="n" id="occupy">
                    <el-col style="text-align:left;font-weight: bold;">#1</el-col>
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">使用率</span><span id="zhi">35%</span>
                    </el-col>
                    <hr style="width:80%;margin: 0 auto;" />
                    <el-col style="text-align:left;display:flex;justify-content: space-between;align-items: center;">
                        <span id="biao">空闲(格子数)</span><span id="zhi">555</span>
                    </el-col>
                </div> -->
    </div>
    <!-- <div id="awatch">
  <img src="../../assets/lpl.jpg" alt="" style="width: 10%;height: 10%;margin-left: 160px;">
  <img src="../../assets/cp.png" alt="" style="width: 70%;height: 70%;margin-left: 160px;">
</div> -->
<!-- // 父级框 -->
   <div class="img-list">
   <!-- // 浮在上方的图片  -->
  <img class="check-img" src="../../assets/lpl.jpg" alt="" style="width: 13%;height: 12%;margin-left: 160px;">
  <img class="check-imga" src="../../assets/lpl.jpg" alt="" style="width: 13%;height: 12%;margin-left: 160px;">
   <!-- // 底图 -->
  <img class="data-img " src="../../assets/dlpl.png" alt="" style="width: 1200px;height: 400px;margin-left: 130px;margin-top: 50px;">
   </div>
<div class="img-dlpl" >
    <div class="img-car1" :style="'z-index:999;left:247px;top:' + carposition1 + 'px;position:absolute;'">
      <div v-show="cellshow1" style="margin-top:10px;width:200px;height:5px;background-color:#409EFF;"></div>
    </div>
    <div class="img-car2" :style="'z-index:999;left:704px;top:' + carposition2 + 'px;position:absolute;'">
      <div v-show="cellshow2" style="margin-top:10px;width:200px;height:5px;background-color:#409EFF;"></div>
    </div>
    <div v-show="cellshow" style="width: 200px;height: 5px;position: absolute;top:70px;left: 480px;background-color: #409EFF;">
    </div>
</div>
  </div>
<el-dialog v-model="dialogFormVisible" top="12vh" width="85%" title="请确认玻璃信息" >
  <div style="margin-left: 50px;margin-bottom: 10px;">
@@ -374,7 +531,7 @@
}
#occupy {
    height: 100%;
    width: 10%;
    width: 15%;
    background-color: white;
    margin: 0px 8px 0px 8px;
    border: 1px #EBEEF5 solid;
@@ -428,9 +585,63 @@
  width: 3.3125rem;
  height: 2.9375rem;
  top:15rem;
  right: 29rem;
  right: 28.5rem;
  z-index: 10;
  
}
.vertical {
    width: 45px;
    height: 25px;
    background-color: #409EFF;
    top: 485px; /* 初始位置 */
    left: 899px; /* 水平居中 */
    transform: translateX(-50%);
    animation: move-vertical 6s infinite; /* 从上到下动画,持续6秒,无限循环 */
}
@keyframes move-vertical {
    0% {
        top: 485px; /* 起始位置 */
    }
    100% {
        top: calc(100% - 210px); /* 从上到下结束位置 */
    }
}
.img-dlpl{
  margin-left: 200px;
  background-image:url('../../assets/dlpl.png');
  background-repeat: no-repeat;
    background-attachment: local;
    min-height: 400px;
    width: 1200px;
    max-width: 100%;
    background-size: 1200px 400px;
    overflow: hidden;
    position:relative
}
.img-car1{
  background-image:url('../../assets/lp.png');
  position: absolute;
  background-repeat: no-repeat;
    background-attachment: local;
    min-height: 200px;
    width: 200px;
    max-width: 100%;
    background-size: 200px 70px;
    overflow: hidden;
    position:relative
}
.img-car2{
  background-image:url('../../assets/lpa.png');
  position: absolute;
  background-repeat: no-repeat;
    background-attachment: local;
    min-height: 200px;
    width: 200px;
    max-width: 100%;
    background-size: 200px 70px;
    overflow: hidden;
    position:relative
}
</style>