wang
2024-04-22 d1efdba4a9a87969ddc4cbfd1dfa6814a292125e
UI-Project/src/views/Slicecage/slicecage.vue
@@ -12,203 +12,30 @@
const currentPage4 = ref(4)
const pageSize4 = ref(100)
// const tableData = [
//   {
//     id: '1',
//     long: '1005',
//     wide: '183.6',
//     thick: '1991',
//     type: '1234567',
//     typea: '1',
//   },
// ]
// const tableDatab = [
//   {
//     idb: '2',
//     longb: '105',
//     wideb: '183',
//     typeb: '123456',
//   }
// ]
const tableDataa = [
const tableData = [
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
  },
  {
    ida: '3',
    typea: '1991',
    id: '1',
    a: '1',
    b: '1',
    c: '123456789',
    d: '1568251',
    e: '1',
    f: '100*100',
    g: '',
  },
]
const tableDatab = [
  {
    id: '2',
    a: '2',
    b: '2',
    c: '123456789',
    d: '1568251',
    e: '1',
    f: '100*100',
    g: '',
  }
]
const dialogForm = () => {
  ElMessageBox.confirm(
    '确定要急停吗?',
@@ -300,13 +127,15 @@
        @selection-change="handleSelectionChange"
        :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="id" align="center" label="出片玻璃ID" min-width="80" />
          <el-table-column prop="long" align="center" label="笼子" min-width="120" />
          <el-table-column prop="wide" align="center" label="格子" min-width="120" />
          <el-table-column prop="type" align="center" label="工程号" min-width="120" />
          <el-table-column prop="type" align="center" label="流程卡号" min-width="120" />
          <el-table-column prop="type" align="center" label="钢化版图号" min-width="120" />
          <el-table-column prop="type" align="center" label="尺寸" min-width="120" />
          <el-table-column prop="type" align="center" label="结束任务" min-width="120" />
          <el-table-column prop="a" align="center" label="笼子" min-width="120" />
          <el-table-column prop="b" align="center" label="格子" min-width="120" />
          <el-table-column prop="c" align="center" label="工程号" min-width="120" />
          <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-button style="margin-top: 5px;margin-left: 10px;"   id="searchButton" type="text">完成任务</el-button>
</el-table-column>
        </el-table>
      </div>
    </el-card>
@@ -315,32 +144,122 @@
        <el-table height="100%" ref="table" 
        @selection-change="handleSelectionChange"
        :data="tableDatab" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="idb" align="center" label="进片玻璃ID" min-width="80" />
          <el-table-column prop="longb" align="center" label="笼子" min-width="120" />
          <el-table-column prop="wideb" align="center" label="格子" min-width="120" />
          <el-table-column prop="typeb" align="center" label="工程号" min-width="120" />
          <el-table-column prop="typeb" align="center" label="流程卡号" min-width="120" />
          <el-table-column prop="typeb" align="center" label="钢化版图号" min-width="120" />
          <el-table-column prop="typeb" align="center" label="尺寸" min-width="120" />
          <el-table-column prop="typeb" align="center" label="结束任务" min-width="120" />
          <el-table-column prop="id" align="center" label="进片玻璃ID" min-width="80" />
          <el-table-column prop="a" align="center" label="笼子" min-width="120" />
          <el-table-column prop="b" align="center" label="格子" min-width="120" />
          <el-table-column prop="c" align="center" label="工程号" min-width="120" />
          <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-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/xmjc.png" alt="" style="width: 70%;height: 100%;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>
<el-dialog v-model="dialogFormVisible" top="12vh" width="85%" title="请确认玻璃信息" >
  <div style="margin-left: 50px;margin-bottom: 10px;">
@@ -539,7 +458,7 @@
}
#occupy {
    height: 100%;
    width: 10%;
    width: 15%;
    background-color: white;
    margin: 0px 8px 0px 8px;
    border: 1px #EBEEF5 solid;
@@ -565,4 +484,37 @@
   ::-webkit-scrollbar {
     width: 0 !important;height: 0;
   }
   .img-list{
  position:relative;
}
.data-img{
  @apply float-none ;
  width:100%;
  height:16rem;
  background: rgba(0, 0, 0, 0);
  opacity: 1;
  border-radius: 0.5rem 0.5rem 0px 0px;
}
.check-img{
  position: absolute;
  width: 3.3125rem;
  height: 2.9375rem;
  top:20rem;
  right: 57rem;
  z-index: 10;
}
.check-imga{
  position: absolute;
  width: 3.3125rem;
  height: 2.9375rem;
  top:15rem;
  right: 29rem;
  z-index: 10;
}
</style>