|  |  | 
 |  |  | <template> | 
 |  |  |     <TableLayout :permissions="['business:device:query']"> | 
 |  |  |         <!-- 搜索表单 --> | 
 |  |  |         <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" inline> | 
 |  |  |             <el-form-item title="名称" prop="name"> | 
 |  |  |                 <el-input v-model="searchForm.name" placeholder="请输入名称" @keypress.enter.native="search"></el-input> | 
 |  |  |             </el-form-item> | 
 |  |  |             <section> | 
 |  |  |                 <el-button type="primary" @click="search">搜索</el-button> | 
 |  |  |                 <el-button @click="reset">重置</el-button> | 
 |  |  |             </section> | 
 |  |  |         </el-form> | 
 |  |  |         <!-- 表格和分页 --> | 
 |  |  |         <template v-slot:table-wrap> | 
 |  |  |             <ul class="toolbar"> | 
 |  |  |                 <li><el-button type="primary" @click="synchronousData">同步</el-button></li> | 
 |  |  |             </ul> | 
 |  |  |             <el-table | 
 |  |  |                 v-loading="isWorking.search" | 
 |  |  |                 :data="tableData.list" | 
 |  |  |                 stripe | 
 |  |  |             > | 
 |  |  |                <el-table-column label="序号"  width="55" fixed><template slot-scope="scope" >{{scope.$index+1}}</template></el-table-column> | 
 |  |  |                <el-table-column prop="name" label="设备名称"></el-table-column> | 
 |  |  |                 <el-table-column prop="manufature" label="厂商"></el-table-column> | 
 |  |  |                 <el-table-column prop="no" label="设备编号"></el-table-column> | 
 |  |  |                 <el-table-column prop="online" label="在线状态"> | 
 |  |  |                     <template slot-scope="{row}"> | 
 |  |  |                         <span v-if="row.online == 0">离线</span> | 
 |  |  |                         <span v-if="row.online == 1">在线</span> | 
 |  |  |                     </template> | 
 |  |  |                 </el-table-column> | 
 |  |  |                 <el-table-column prop="ip" label="设备ip"></el-table-column> | 
 |  |  |                 <el-table-column prop="port" label="设备端口"></el-table-column> | 
 |  |  |             </el-table> | 
 |  |  |             <pagination | 
 |  |  |                 @size-change="handleSizeChange" | 
 |  |  |                 @current-change="handlePageChange" | 
 |  |  |                 :pagination="tableData.pagination" | 
 |  |  |             > | 
 |  |  |             </pagination> | 
 |  |  |         </template> | 
 |  |  |         <!-- 新建/修改 --> | 
 |  |  | <!--        <OperaDeviceWindow ref="operaDeviceWindow" @success="handlePageChange"/>--> | 
 |  |  |     </TableLayout> | 
 |  |  |   <TableLayout :permissions="['business:device:query']"> | 
 |  |  |     <!-- 搜索表单 --> | 
 |  |  |     <div ref="QueryFormRef" slot="search-form"> | 
 |  |  |       <el-form ref="searchForm" :model="searchForm" label-width="100px" inline> | 
 |  |  |         <el-form-item title="名称" prop="name"> | 
 |  |  |           <el-input v-model="searchForm.name" placeholder="请输入名称" @keypress.enter.native="search"></el-input> | 
 |  |  |         </el-form-item> | 
 |  |  |         <section> | 
 |  |  |           <el-button type="primary" @click="search">搜索</el-button> | 
 |  |  |           <el-button @click="reset">重置</el-button> | 
 |  |  |         </section> | 
 |  |  |       </el-form> | 
 |  |  |     </div> | 
 |  |  |  | 
 |  |  |     <!-- 表格和分页 --> | 
 |  |  |     <template v-slot:table-wrap> | 
 |  |  |       <ul class="toolbar"> | 
 |  |  |         <li><el-button type="primary" @click="synchronousData">同步</el-button></li> | 
 |  |  |       </ul> | 
 |  |  |       <el-table :max-height="tableHeight" v-loading="isWorking.search" :data="tableData.list" stripe> | 
 |  |  |         <el-table-column label="序号" width="55" fixed><template slot-scope="scope">{{ scope.$index + 1 | 
 |  |  |         }}</template></el-table-column> | 
 |  |  |         <el-table-column prop="name" label="设备名称"></el-table-column> | 
 |  |  |         <el-table-column prop="manufature" label="厂商"></el-table-column> | 
 |  |  |         <el-table-column prop="no" label="设备编号"></el-table-column> | 
 |  |  |         <el-table-column prop="online" label="在线状态"> | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  |             <span v-if="row.online == 0">离线</span> | 
 |  |  |             <span v-if="row.online == 1">在线</span> | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |         <el-table-column prop="ip" label="设备ip"></el-table-column> | 
 |  |  |         <el-table-column prop="port" label="设备端口"></el-table-column> | 
 |  |  |         <el-table-column v-if="containPermissions(['business:device:update'])" label="操作" min-width="120" fixed="right"> | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  |             <el-button type="text" @click="$refs.OperaDeviceLedWindow.open('设置屏显内容', row)" icon="el-icon-edit" | 
 |  |  |               v-permissions="['business:device:update']">设置屏显内容</el-button> | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |       </el-table> | 
 |  |  |       <pagination @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="tableData.pagination"> | 
 |  |  |       </pagination> | 
 |  |  |     </template> | 
 |  |  |     <!-- 新建/修改 --> | 
 |  |  |     <OperaDeviceLedWindow ref="OperaDeviceLedWindow" @success="handlePageChange" /> | 
 |  |  |   </TableLayout> | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script> | 
 |  |  | import BaseTable from '@/components/base/BaseTable' | 
 |  |  | import TableLayout from '@/layouts/TableLayout' | 
 |  |  | import Pagination from '@/components/common/Pagination' | 
 |  |  | import OperaDeviceWindow from '@/components/business/OperaDeviceWindow' | 
 |  |  | import OperaDeviceLedWindow from '@/components/business/OperaDeviceLedWindow' | 
 |  |  | import { syncDevices, updateEntranceById } from '@/api/business/device' | 
 |  |  | export default { | 
 |  |  |   name: 'Device', | 
 |  |  |   extends: BaseTable, | 
 |  |  |   components: { TableLayout, Pagination, OperaDeviceWindow }, | 
 |  |  |   data () { | 
 |  |  |   components: { TableLayout, Pagination, OperaDeviceLedWindow }, | 
 |  |  |   data() { | 
 |  |  |     return { | 
 |  |  |       // 搜索 | 
 |  |  |       searchForm: { | 
 |  |  | 
 |  |  |         regionPathName: '', | 
 |  |  |         isEntrance: '', | 
 |  |  |         online: '', | 
 |  |  |         type:2 | 
 |  |  |         type: 2 | 
 |  |  |       }, | 
 |  |  |       options: [] | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   created () { | 
 |  |  |   created() { | 
 |  |  |     this.config({ | 
 |  |  |       module: '设备信息表', | 
 |  |  |       api: '/business/device', | 
 |  |  | 
 |  |  |     }) | 
 |  |  |     this.search() | 
 |  |  |   }, | 
 |  |  |   mounted() { | 
 |  |  |     this.$nextTick(() => { | 
 |  |  |       this.tableHeight = document.body.scrollHeight - this.$refs.QueryFormRef.offsetHeight - 300 | 
 |  |  |     }) | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     changeManufature(e, row) { | 
 |  |  |       updateEntranceById({ | 
 |  |  | 
 |  |  |         isEntrance: e | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     synchronousData () { | 
 |  |  |     synchronousData() { | 
 |  |  |       this.$dialog.actionConfirm('操作确认提醒', '您确认同步全部信息吗?') | 
 |  |  |         .then(() => { | 
 |  |  |           this.isWorking.delete = true | 
 |  |  |           syncDevices({type:2}) | 
 |  |  |           syncDevices({ type: 2 }) | 
 |  |  |             .then(res => { | 
 |  |  |               this.$tip.apiSuccess(res || '同步成功') | 
 |  |  |               this.search() | 
 |  |  | 
 |  |  |               this.isWorking.delete = false | 
 |  |  |             }) | 
 |  |  |         }) | 
 |  |  |         .catch(() => {}) | 
 |  |  |         .catch(() => { }) | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | } |