licp
2024-07-29 7257363fabc7b4f11fb5dfa1a553b1bc6f89bd02
src/components/view/a6-device.vue
@@ -2,17 +2,87 @@
  <div class="device-page">
    <div class="device-left">
      <el-input placeholder="输入设备名称" suffix-icon="el-icon-search" v-model="search" size="small"
      style="margin-bottom: 5px;" clearable></el-input>
      @keyup.enter="handleSearch"
      style="margin-bottom: 5px;" clearable @change="handleSearch"></el-input>
      <ul v-loading="loading">
        <li v-for="(item,index) in 28" :title="item" :class="{active:index==current}" @click="getCurrentDevice(item,index)">设备列表设备列表设备列表设备列表</li>
      </ul>
    </div>
    <div class="device-right"></div>
    <div class="device-right">
      <el-radio-group v-model="currentPage" size="small">
        <el-radio-button :label="item.id" v-for="(item,index) in tabList" :key="index"
          size="small">{{ item.title }}</el-radio-button>
      </el-radio-group>
      <div class="device-right-content">
        <component :is="currentPage"></component>
      </div>
    </div>
  </div>
</template>
<script>
import operationOverview from '../do/a6-device/operation-overview.vue';
export default {
  components:{
    operationOverview,
  },
  data(){
    return {
      search:''
      search:'',
      current:0,
      loading:false,
      tabList:[
        {
          id:'operationOverview',
          title:'设备运行总览',
        },
        {
          id:1,
          title:'设备档案',
        },
        {
          id:2,
          title:'设备验收',
        },
        {
          id:3,
          title:'设备校准',
        },
        {
          id:4,
          title:'设备核查',
        },
        {
          id:5,
          title:'设备维护',
        },
        {
          id:6,
          title:'设备借用',
        },
        {
          id:7,
          title:'设备故障',
        },
        {
          id:8,
          title:'使用记录',
        },
        {
          id:9,
          title:'设备停用/启用',
        },
      ],
      currentPage:'operationOverview'
    }
  },
  methods:{
    handleSearch(m){
      // this.loading = true;
    },
    getCurrentDevice(item,index){
      this.current = index;
      this.currentPage = 'operationOverview';
    }
  }
}
@@ -31,10 +101,42 @@
  background: #fff;
  margin-right: 10px;
  border-radius: 16px;
  box-sizing: border-box;
  padding: 10px 16px;
}
.device-left ul{
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: #999999;
  cursor: pointer;
  margin-top: 10px;
  height: calc(100% - 46px);
  overflow-y: scroll;
}
.device-left ul li{
  white-space: nowrap;         /* 禁止换行 */
  overflow: hidden;            /* 隐藏溢出的文本 */
  text-overflow: ellipsis;     /* 用省略号表示溢出的文本 */
  padding: 3px 0;
}
.device-left ul li:hover{
  color: #3A7BFA;
}
.device-left ul li.active{
  color: #3A7BFA;
}
.device-right{
  background: #fff;
  flex: 1;
  border-radius: 16px;
  box-sizing: border-box;
  padding: 10px 16px;
}
.device-right-content{
  margin-top: 10px;
  height: calc(100% - 42px);
}
</style>