|  | @@ -0,0 +1,138 @@
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +  <div id="addUser" v-loading="getDeviceListLoading">
 | 
	
		
			
				|  |  | +    <el-dialog
 | 
	
		
			
				|  |  | +      title="选择设备"
 | 
	
		
			
				|  |  | +      width="40%"
 | 
	
		
			
				|  |  | +      top="2rem"
 | 
	
		
			
				|  |  | +      :close-on-click-modal="false"
 | 
	
		
			
				|  |  | +      :visible.sync="showDialog"
 | 
	
		
			
				|  |  | +      :destroy-on-close="true"
 | 
	
		
			
				|  |  | +      @close="close()"
 | 
	
		
			
				|  |  | +    >
 | 
	
		
			
				|  |  | +      <div class="page-header">
 | 
	
		
			
				|  |  | +        <div class="page-header-btn">
 | 
	
		
			
				|  |  | +          搜索:
 | 
	
		
			
				|  |  | +          <el-input @input="getDeviceList" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
 | 
	
		
			
				|  |  | +                    prefix-icon="el-icon-search" v-model="searchSrt" clearable></el-input>
 | 
	
		
			
				|  |  | +          在线状态:
 | 
	
		
			
				|  |  | +          <el-select size="mini" style="width: 8rem; margin-right: 1rem;" @change="getDeviceList" v-model="online" placeholder="请选择"
 | 
	
		
			
				|  |  | +                     default-first-option>
 | 
	
		
			
				|  |  | +            <el-option label="全部" value=""></el-option>
 | 
	
		
			
				|  |  | +            <el-option label="在线" value="true"></el-option>
 | 
	
		
			
				|  |  | +            <el-option label="离线" value="false"></el-option>
 | 
	
		
			
				|  |  | +          </el-select>
 | 
	
		
			
				|  |  | +          <el-button icon="el-icon-refresh-right" circle size="mini" :loading="getDeviceListLoading"
 | 
	
		
			
				|  |  | +                     @click="getDeviceList()"></el-button>
 | 
	
		
			
				|  |  | +        </div>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +      <!--设备列表-->
 | 
	
		
			
				|  |  | +      <el-table :data="deviceList" style="width: 100%;font-size: 12px;" :height="winHeight" header-row-class-name="table-header" @selection-change="handleSelectionChange">
 | 
	
		
			
				|  |  | +        <el-table-column type="selection" width="55" >
 | 
	
		
			
				|  |  | +        </el-table-column>
 | 
	
		
			
				|  |  | +        <el-table-column prop="name" label="名称" min-width="160">
 | 
	
		
			
				|  |  | +        </el-table-column>
 | 
	
		
			
				|  |  | +        <el-table-column prop="deviceId" label="设备编号" min-width="200" >
 | 
	
		
			
				|  |  | +        </el-table-column>
 | 
	
		
			
				|  |  | +        <el-table-column prop="manufacturer" label="厂家" min-width="120" >
 | 
	
		
			
				|  |  | +        </el-table-column>
 | 
	
		
			
				|  |  | +        <el-table-column label="状态" min-width="120">
 | 
	
		
			
				|  |  | +          <template slot-scope="scope">
 | 
	
		
			
				|  |  | +            <div slot="reference" class="name-wrapper">
 | 
	
		
			
				|  |  | +              <el-tag size="medium" v-if="scope.row.onLine">在线</el-tag>
 | 
	
		
			
				|  |  | +              <el-tag size="medium" type="info" v-if="!scope.row.onLine">离线</el-tag>
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +        </el-table-column>
 | 
	
		
			
				|  |  | +      </el-table>
 | 
	
		
			
				|  |  | +      <el-pagination
 | 
	
		
			
				|  |  | +        style="float: right"
 | 
	
		
			
				|  |  | +        @size-change="handleSizeChange"
 | 
	
		
			
				|  |  | +        @current-change="currentChange"
 | 
	
		
			
				|  |  | +        :current-page="currentPage"
 | 
	
		
			
				|  |  | +        :page-size="count"
 | 
	
		
			
				|  |  | +        :page-sizes="[15, 25, 35, 50, 200, 1000, 50000]"
 | 
	
		
			
				|  |  | +        layout="total, sizes, prev, pager, next"
 | 
	
		
			
				|  |  | +        :total="total">
 | 
	
		
			
				|  |  | +      </el-pagination>
 | 
	
		
			
				|  |  | +    </el-dialog>
 | 
	
		
			
				|  |  | +  </div>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +export default {
 | 
	
		
			
				|  |  | +  name: "gbDeviceSelect",
 | 
	
		
			
				|  |  | +  props: {},
 | 
	
		
			
				|  |  | +  computed: {},
 | 
	
		
			
				|  |  | +  data() {
 | 
	
		
			
				|  |  | +    return {
 | 
	
		
			
				|  |  | +      showDialog: false,
 | 
	
		
			
				|  |  | +      deviceList: [], //设备列表
 | 
	
		
			
				|  |  | +      currentDevice: {}, //当前操作设备对象
 | 
	
		
			
				|  |  | +      searchSrt: "",
 | 
	
		
			
				|  |  | +      online: null,
 | 
	
		
			
				|  |  | +      videoComponentList: [],
 | 
	
		
			
				|  |  | +      updateLooper: 0, //数据刷新轮训标志
 | 
	
		
			
				|  |  | +      currentDeviceChannelsLenth: 0,
 | 
	
		
			
				|  |  | +      winHeight: window.innerHeight - 200,
 | 
	
		
			
				|  |  | +      currentPage: 1,
 | 
	
		
			
				|  |  | +      count: 15,
 | 
	
		
			
				|  |  | +      total: 0,
 | 
	
		
			
				|  |  | +      getDeviceListLoading: false,
 | 
	
		
			
				|  |  | +      multipleSelection: [],
 | 
	
		
			
				|  |  | +    };
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  mounted() {
 | 
	
		
			
				|  |  | +    this.initData();
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  methods: {
 | 
	
		
			
				|  |  | +    initData: function () {
 | 
	
		
			
				|  |  | +      this.getDeviceList();
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    currentChange: function (val) {
 | 
	
		
			
				|  |  | +      this.currentPage = val;
 | 
	
		
			
				|  |  | +      this.getDeviceList();
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    handleSizeChange: function (val) {
 | 
	
		
			
				|  |  | +      this.count = val;
 | 
	
		
			
				|  |  | +      this.getDeviceList();
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    handleSelectionChange: function (val){
 | 
	
		
			
				|  |  | +      this.multipleSelection = val;
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    getDeviceList: function () {
 | 
	
		
			
				|  |  | +      this.getDeviceListLoading = true;
 | 
	
		
			
				|  |  | +      this.$axios({
 | 
	
		
			
				|  |  | +        method: 'get',
 | 
	
		
			
				|  |  | +        url: `/api/device/query/devices`,
 | 
	
		
			
				|  |  | +        params: {
 | 
	
		
			
				|  |  | +          page: this.currentPage,
 | 
	
		
			
				|  |  | +          count: this.count,
 | 
	
		
			
				|  |  | +          query: this.searchSrt,
 | 
	
		
			
				|  |  | +          status: this.online,
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      }).then( (res)=> {
 | 
	
		
			
				|  |  | +        if (res.data.code === 0) {
 | 
	
		
			
				|  |  | +          this.total = res.data.data.total;
 | 
	
		
			
				|  |  | +          this.deviceList = res.data.data.list;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        this.getDeviceListLoading = false;
 | 
	
		
			
				|  |  | +      }).catch( (error)=> {
 | 
	
		
			
				|  |  | +        console.error(error);
 | 
	
		
			
				|  |  | +        this.getDeviceListLoading = false;
 | 
	
		
			
				|  |  | +      });
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    openDialog: function (callback) {
 | 
	
		
			
				|  |  | +      this.listChangeCallback = callback;
 | 
	
		
			
				|  |  | +      this.showDialog = true;
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    onSubmit: function () {
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    close: function () {
 | 
	
		
			
				|  |  | +      this.showDialog = false;
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +};
 | 
	
		
			
				|  |  | +</script>
 |