Merge remote-tracking branch 'origin/master'

value

2023-09-07 523d7a54fb07fdf756fbc4faa5eb7fef7263a556

 src/views/laboratory/gather/index.vue

@@ -1,13 +1,148 @@
<template>
  <div>设备采集</div>
  <div class="content-main">
    <div class="top-bar">
      <el-form style="margin-top: 10px;" ref="form" :inline="true" :model="searchData">
        <el-form-item label="设备编号:" style="margin-right: 50px;">
          <el-input size="small" v-model="searchData.code" placeholder="请输入设备编号">
          </el-input>
        </el-form-item>
        <el-form-item label="设备名称:" style="margin-right: 20px;">
          <el-input size="small" v-model="searchData.name" placeholder="请输入设备名称">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="searchInspections">查询</el-button>
            <el-button size="small" type="primary" plain @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="library-table">
      <el-card v-for="(item,index) in device" :key="index" class="box-card" style="width: 22.8%;">
        <div class="header">
          <div style="display: flex;justify-content: start; width: 100%;">
            <div class="el-icon-set-up" style="font-size: 25px;color: rgb(103, 194, 58);line-height: 55px ;"></div>
            <div class="device_code">{{ item.code }}</div>
          </div>
          <div v-show="item.status === 0" class="status">
            <el-tag type="success">运行</el-tag>
          </div>
          <div v-show="item.status === 1" class="status">
            <el-tag type="danger">故障</el-tag>
          </div>
        </div>
        <div class="content">
          <div>
            <span style="color: rgb(136, 135, 135);">设备名称： </span>
            <span>{{ item.name }}</span>
          </div>
          <div>
            <span style="color: rgb(136, 135, 135);">鉴定有效期： </span>
            <span>{{ item.valid }}</span>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="footer">
          <el-button type="text" icon="el-icon-document">项目详情</el-button>
          <el-divider direction="vertical" style="width: 200px;"></el-divider>
          <el-button type="text" icon="el-icon-pie-chart">项目采集</el-button>
        </div>
        
      </el-card>
    </div>
  </div>
</template>

<script>
export default {

  data(){
    return {
      searchData:{
        code: '',
        name: ''
      },
      device:[
        {
          code: 'NF-220907',
          status: 0,
          name: '拉力机U60',
          valid: '2022-11-09 ~ 2023.11.10'
        },
        {
          code: 'NF-220907',
          status: 0,
          name: '拉力机U60',
          valid: '2022-11-09 ~ 2023.11.10'
        }
      ]
    }
  },
   methods:{
      searchInspections(){
			
      },
      reset(){
			
      }
   }
}
</script>

<style lang="scss" scoped>

.content-main{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    .top-bar{
      margin: -25px -15px;
      background: #fff;
      display: flex;
      justify-content: space-between;
      padding: 5px 24px 0px 24px;
      .rightBtn{
        display: flex;
        justify-content: space-between;
      }
    }
    .library-table{
      background-color: #fff;
      flex: 1;
      margin: 0px -15px;
      margin-top: 40px;
      display: flex;
      // flex-direction: space-evenly;
      flex-wrap: wrap;
      .el-card{
        height: 300px;
        margin-left: 30px;
        margin-top: 20px;
        .header{
          display: flex;
          justify-content: space-between;
          height: 60px;
          line-height: 60px;
          .device_code{
            font-size: 24px;
            font-weight: bold;
            margin-left: 20px;
          }
        }
        .content{
          font-size: 16px;
          margin-top: 10px;
          >div{
            padding: 10px 0px;
          }
        }
        .footer{
          .el-button{
            width: 45%;
            font-size: 18px;
            color: black;
            // background-color: #bfa;
          }
        }
      }
    }
}
</style>