jcdm-ui/src/views/main/kb/stationTerminal/index.vue

@@ -1,107 +1,145 @@
<template>
  <div class="app-container">
      <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :md="12" :lg="24" >
              <el-card class="update-log" style="height: 70px">
                  <el-form ref="elForm" :model="formData"  size="small" label-width="80px" :inline="true">
   <el-row :gutter="5">
     <el-col :span="6">
       <el-card shadow="hover">
         å·¥ä½ç¼–号:OP1010
       </el-card>
     </el-col>
     <el-col :span="6">
       <el-card shadow="hover">
         å·¥ä½åç§°:贴标机-贴码
       </el-card>
     </el-col>
     <el-col :span="6">
       <el-card shadow="hover">
         æ€»æˆç¼–码:1000000000000001
       </el-card>
     </el-col>
     <el-col :span="6">
       <el-card shadow="hover">
         é¼ æ ‡æ‚¬æµ®æ—¶æ˜¾ç¤º
       </el-card>
     </el-col>
   </el-row>
   <el-row :gutter="5" style="margin-top: 5px">
     <el-col :span="6" >
       <el-card class="bottom-card">
         <div slot="header" class="clearfix">
           <span>当前工件信息</span>
         </div>
         <el-descriptions :column="1" border>
           <el-descriptions-item>
             <template slot="label">
               <i class="el-icon-user"></i>
               <span>总成编号</span>
             </template>
             kooriookami
           </el-descriptions-item>
           <el-descriptions-item>
             <template slot="label">
               <i class="el-icon-mobile-phone"></i>
               æ‰‹æœºå·
             </template>
             18100000000
           </el-descriptions-item>
           <el-descriptions-item>
             <template slot="label">
               <i class="el-icon-location-outline"></i>
               å±…住地
             </template>
             è‹å·žå¸‚
           </el-descriptions-item>
           <el-descriptions-item>
             <template slot="label">
               <i class="el-icon-tickets"></i>
               å¤‡æ³¨
             </template>
             <el-tag size="small">学校</el-tag>
           </el-descriptions-item>
           <el-descriptions-item>
             <template slot="label">
               <i class="el-icon-office-building"></i>
               è”系地址
             </template>
             æ±Ÿè‹çœè‹å·žå¸‚吴中区吴中大道 1188 å·
           </el-descriptions-item>
         </el-descriptions>
         <el-divider></el-divider>
         <el-row>
           <el-col :span="12">
             <el-button class="circle-button" circle></el-button>
             <span>OPC心跳</span>
           </el-col>
           <el-col :span="12">
             <el-button class="circle-button" circle></el-button>
             <span>扫码枪状态</span>
           </el-col>
         </el-row>
         <el-row style="margin-top: 20px">
           <el-col :span="12">
             <el-button class="circle-button" circle></el-button>
             <span>工件到位</span>
           </el-col>
           <el-col :span="12">
             <el-button class="circle-button" circle></el-button>
             <span>扫码完成</span>
           </el-col>
         </el-row>
         <el-row style="margin-top: 20px">
           <el-col :span="12">
             <el-button class="circle-button" circle></el-button>
             <span>开始作业</span>
           </el-col>
           <el-col :span="12">
             <el-button class="circle-button" circle></el-button>
             <span>允许放行</span>
           </el-col>
         </el-row>
       </el-card>

                      <el-form-item label="工位编号" prop="field101">
                          <el-input v-model="formData.field101" placeholder="请输入单行文本" clearable>
                          </el-input>
                      </el-form-item>
                      <el-form-item label="工位名称" prop="field101">
                          <el-input v-model="formData.field101" placeholder="请输入单行文本" clearable >
                          </el-input>
                      </el-form-item>
                      <el-form-item label="总成编码" prop="field101">
                          <el-input v-model="formData.field101" placeholder="请输入单行文本" clearable >
                          </el-input>
                      </el-form-item>

                      <el-form-item style="float: right">
                          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">工位设置</el-button>
                      </el-form-item>
                  </el-form>
              </el-card>
          </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="12" :lg="6" >
          <el-card class="update-log" style="height: 600px">
            <div slot="header" class="clearfix" style="height: 12px">
              <span>当前工件信息  </span>
            </div>
            <div class="body">
              <el-form ref="elForm" :model="formData"  size="medium" label-width="80px" >

                <el-form-item label="总成编号" prop="field101">
                  <el-input v-model="formData.field101" placeholder="请输入单行文本" clearable>
                  </el-input>
                </el-form-item>
                <el-form-item label="工单编号" prop="field101">
                  <el-input v-model="formData.field101" placeholder="请输入单行文本" clearable >
                  </el-input>
                </el-form-item>
                <el-form-item label="物料编号" prop="field101">
                    <el-input v-model="formData.field101" placeholder="请输入单行文本" clearable >
                    </el-input>
                </el-form-item>
                <el-form-item label="产品型号" prop="field101">
                    <el-input v-model="formData.field101" placeholder="请输入单行文本" clearable >
                    </el-input>
                </el-form-item>
                <el-form-item label="单行文本" prop="field101">
                    <el-input v-model="formData.field101" placeholder="请输入单行文本" clearable >
                    </el-input>
                </el-form-item>
                  <hr />
              </el-form>
            </div>
            <div>

                  <button class="circle-btn"></button>11111
              <button class="circle-btn"></button>2222

            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="18">
                <el-tabs type="border-card"  style="height: 600px">
                    <el-tab-pane>
                        <span slot="label"> <a class="el-icon-date"></a>首页</span>
                        <el-empty >
                            <span slot="description">暂无数据</span>
                        </el-empty>
                    </el-tab-pane>
                    <el-tab-pane>
                        <span slot="label"> <b class="el-icon-date"></b>物料BOM</span>
                        <el-empty >
                            <span slot="description">暂无数据</span>
                        </el-empty>
                    </el-tab-pane>
                    <el-tab-pane>
                        <span slot="label"> <c class="el-icon-date"></c>采集清单</span>
                        <el-empty >
                            <span slot="description">暂无数据</span>
                        </el-empty>
                    </el-tab-pane>
                    <el-tab-pane>
                        <span slot="label"> <d class="el-icon-date"></d>安灯状态</span>
                        <el-empty >
                            <span slot="description">暂无数据</span>
                        </el-empty>
                    </el-tab-pane>
                    <el-tab-pane>
                        <span slot="label"> <e class="el-icon-date"></e>工艺配方</span>
                        <el-empty >
                            <span slot="description">暂无数据</span>
                        </el-empty>
                    </el-tab-pane>
                </el-tabs>
        </el-col>
      </el-row>


     </el-col>
     <el-col :span="18">
       <el-tabs type="border-card"  style="height: 600px">
         <el-tab-pane>
           <span slot="label"> <a class="el-icon-date"></a>首页</span>
           <el-col :span="8">
             <el-table>
               <el-table-column label="序号" align="center" prop="repairIdentification" width="60px"/>
               <el-table-column label="操作内容" align="center" prop="boxCode"  width="320px"/>
             </el-table>
           </el-col>
           <el-col :span="16">
             <el-image style="height: 520px;width: 100%" :src="imgSrc"></el-image>
           </el-col>
         </el-tab-pane>
         <el-tab-pane>
           <span slot="label"> <b class="el-icon-date"></b>物料BOM</span>
           <el-empty >
             <span slot="description">暂无数据</span>
           </el-empty>
         </el-tab-pane>
         <el-tab-pane>
           <span slot="label"> <c class="el-icon-date"></c>采集清单</span>
           <el-empty >
             <span slot="description">暂无数据</span>
           </el-empty>
         </el-tab-pane>
         <el-tab-pane>
           <span slot="label"> <d class="el-icon-date"></d>安灯状态</span>
           <el-empty >
             <span slot="description">暂无数据</span>
           </el-empty>
         </el-tab-pane>
         <el-tab-pane>
           <span slot="label"> <e class="el-icon-date"></e>工艺配方</span>
           <el-empty >
             <span slot="description">暂无数据</span>
           </el-empty>
         </el-tab-pane>
       </el-tabs>
     </el-col>
   </el-row>


  </div>
@@ -112,16 +150,7 @@
  props: [],
  data() {
    return {
      formData: {
        field101: undefined,
      },
      rules: {
        field101: [{
          required: true,
          message: '请输入单行文本',
          trigger: 'blur'
        }],
      },
      imgSrc: '',
    }
  },
  computed: {},
@@ -132,23 +161,13 @@
}

</script>
<style>
hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
<style scoped>
.bottom-card{
  height: 600px;
}
blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    border-left: 5px solid #eee;
}
.circle-btn {
  border: none;
  width: 30px; /* æ ¹æ®éœ€æ±‚调整按钮大小 */
  height: 30px;
  border-radius: 50%; /* å°†è¾¹æ¡†å˜æˆåœ†è§’ */
  background-color: #e31116;
.circle-button{
  height: 40px;
  width: 40px;
  background-color: #ce0b0b;
}
</style>

 jcdm-ui/src/views/main/kb/stationTerminal/index1.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,228 @@
<template>
  <div class="app-container">
      <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :md="12" :lg="24" >
              <el-card class="update-log" style="height: 70px">
                  <el-form ref="elForm" :model="formData"  size="small" label-width="80px" :inline="true">

                      <el-form-item label="工位编号" prop="field101">
                          <el-input v-model="formData.field101" placeholder="请输入单行文本" clearable>
                          </el-input>
                      </el-form-item>
                      <el-form-item label="工位名称" prop="field101">
                          <el-input v-model="formData.field101" placeholder="请输入单行文本" clearable >
                          </el-input>
                      </el-form-item>
                      <el-form-item label="总成编码" prop="field101">
                          <el-input v-model="formData.field101" placeholder="请输入单行文本" clearable >
                          </el-input>
                      </el-form-item>

                      <el-form-item style="float: right">
                          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">工位设置</el-button>
                      </el-form-item>
                  </el-form>
              </el-card>
          </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="12" :lg="6" >
          <el-card class="update-log" style="height: 600px">
            <div slot="header" class="clearfix" style="height: 12px">
              <span>当前工件信息  </span>
            </div>
            <div class="body">
              <el-form ref="elForm" :model="formData"  size="medium" label-width="80px" >

                <el-form-item label="总成编号" prop="field101">
                  <el-input v-model="formData.field101" placeholder="请输入单行文本" clearable>
                  </el-input>
                </el-form-item>
                <el-form-item label="工单编号" prop="field101">
                  <el-input v-model="formData.field101" placeholder="请输入单行文本" clearable >
                  </el-input>
                </el-form-item>
                <el-form-item label="物料编号" prop="field101">
                    <el-input v-model="formData.field101" placeholder="请输入单行文本" clearable >
                    </el-input>
                </el-form-item>
                <el-form-item label="产品型号" prop="field101">
                    <el-input v-model="formData.field101" placeholder="请输入单行文本" clearable >
                    </el-input>
                </el-form-item>
                <el-form-item label="单行文本" prop="field101">
                    <el-input v-model="formData.field101" placeholder="请输入单行文本" clearable >
                    </el-input>
                </el-form-item>
                  <hr />
              </el-form>
            </div>
            <el-row>
              <el-col :span="12">
                <button class="circle-btn"></button>
                <span class="relative">工件到位</span>
              </el-col>
              <el-col :span="12">
                <button class="circle-btn"></button>
                <span class="relative">工件到位</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px">
              <el-col :span="12">
                <button class="circle-btn"></button>
                <span class="relative">工件到位</span>
              </el-col>
              <el-col :span="12">
                <button class="circle-btn"></button>
                <span class="relative">工件到位</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px">
              <el-col :span="12">
                <button class="circle-btn"></button>
                <span class="relative">工件到位</span>
              </el-col>
              <el-col :span="12">
                <button class="circle-btn"></button>
                <span class="relative">工件到位</span>
              </el-col>
            </el-row>
<!--            <el-row>-->
<!--              <el-col :span="12">-->
<!--                <el-button class="circle-button"></el-button>-->
<!--&lt;!&ndash;                <span class="relative">工件到位</span>&ndash;&gt;-->
<!--              </el-col>-->
<!--              <el-col :span="12">-->
<!--                <el-button circle style="background-color: #a95812;height: 50px;width: 50px"></el-button>-->
<!--                <span class="relative">工件到位</span>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--            <el-row style="margin-top: 20px">-->
<!--              <el-col :span="12">-->
<!--                <button class="circle-btn"></button>-->
<!--                <span class="relative">工件到位</span>-->
<!--              </el-col>-->
<!--              <el-col :span="12">-->
<!--                <button class="circle-btn"></button>-->
<!--                <span class="relative">工件到位</span>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--            <el-row style="margin-top: 20px">-->
<!--              <el-col :span="12">-->
<!--                <button class="circle-btn"></button>-->
<!--                <span class="relative">工件到位</span>-->
<!--              </el-col>-->
<!--              <el-col :span="12">-->
<!--                <button class="circle-btn"></button>-->
<!--                <span class="relative">工件到位</span>-->
<!--              </el-col>-->
<!--            </el-row>-->
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="18">
                <el-tabs type="border-card"  style="height: 600px">
                    <el-tab-pane>
                      <span slot="label"> <a class="el-icon-date"></a>首页</span>
                      <el-col :xs="5" :sm="5" :md="5" :lg="9" >
                        <el-table v-loading="loading" >
                          <el-table-column label="序号" align="center" prop="repairIdentification" width="60px"/>
                          <el-table-column label="操作内容" align="center" prop="boxCode"  width="320px"/>
                        </el-table>
                      </el-col>
                      <el-col :xs="5" :sm="5" :md="5" :lg="15" >
                        <el-row style="height: 520px">
                          <el-image style="height: 100%;width: 100%" :src="src"></el-image>
                        </el-row>
                      </el-col>
                    </el-tab-pane>
                    <el-tab-pane>
                        <span slot="label"> <b class="el-icon-date"></b>物料BOM</span>
                        <el-empty >
                            <span slot="description">暂无数据</span>
                        </el-empty>
                    </el-tab-pane>
                    <el-tab-pane>
                        <span slot="label"> <c class="el-icon-date"></c>采集清单</span>
                        <el-empty >
                            <span slot="description">暂无数据</span>
                        </el-empty>
                    </el-tab-pane>
                    <el-tab-pane>
                        <span slot="label"> <d class="el-icon-date"></d>安灯状态</span>
                        <el-empty >
                            <span slot="description">暂无数据</span>
                        </el-empty>
                    </el-tab-pane>
                    <el-tab-pane>
                        <span slot="label"> <e class="el-icon-date"></e>工艺配方</span>
                        <el-empty >
                            <span slot="description">暂无数据</span>
                        </el-empty>
                    </el-tab-pane>
                </el-tabs>
        </el-col>
      </el-row>




  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        field101: undefined,
      },
      rules: {
        field101: [{
          required: true,
          message: '请输入单行文本',
          trigger: 'blur'
        }],
      },
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
}

</script>
<style>
hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
}
blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    border-left: 5px solid #eee;
}
.circle-btn {
  border: none;
  width: 30px; /* æ ¹æ®éœ€æ±‚调整按钮大小 */
  height: 30px;
  border-radius: 50%; /* å°†è¾¹æ¡†å˜æˆåœ†è§’ */
  background-color: #e31116;
}
.relative{
  position: relative;
  left: 2px;
  bottom: 7px;
}
.circle-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e31116;

}
</style>