| | |
| | | <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'; |
| | | } |
| | | } |
| | | } |
| | |
| | | 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> |