bms-web/src/views/devices/ubi.vue

<template>
	<div class="zy-template">
		<div class="zy-main-title">设备列表-普适型</div>
		<div class="zy-module">
			<el-form ref="form" :model="query" label-width="60px">
				<el-form-item label="设备码:" class="zy-search-form-item">
					<el-input v-model="query.openNum" size="mini" clearable></el-input>
				</el-form-item>
				<el-form-item label="设备组:" class="zy-search-form-item">
					<el-select v-model="query.groupId" filterable clearable placeholder=" " size="mini">
						<el-option v-for="item in groups" :key="item" :value="item" />
					</el-select>
				</el-form-item>
				<el-button type="primary" size="mini" @click="submit">查询</el-button>
			</el-form>
		</div>

		<div class="zy-module">
			<el-table :data="page.records" header-cell-class-name="zy-table-header-cell" cell-class-name='zy-table-cell'
				stripe>
				<el-table-column prop="openNum" label="设备码" min-width="180">
					<template #default="scope">IMEI{{scope.row.openNum}}</template>
				</el-table-column>
				<el-table-column prop="groupId" label="设备组" min-width="120" />
				<el-table-column prop="createTime" label="创建时间" min-width="180" />
				<el-table-column prop="freq" label="上传频率(秒)" min-width="120" />
				<el-table-column prop="powerVolt" label="电池电压" min-width="100" />
				<el-table-column prop="signal4g" label="4G信号" min-width="80" />
				<el-table-column prop="oemType" label="板卡类型" min-width="100" />
				<el-table-column prop="version" label="软件版本号" min-width="100" />
				<el-table-column prop="lon" label="经度" min-width="120" />
				<el-table-column prop="lat" label="纬度" min-width="120" />
				<el-table-column prop="satNum" label="卫星颗数" min-width="80" />
				<el-table-column label="状态" min-width="100">
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.status===1" size="small">在线</el-tag>
						<el-tag type="danger" v-if="scope.row.status===0" size="small">离线</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="updateTime" label="最近通讯时间" min-width="180" />
<!--				<el-table-column label="操作" min-width="80">-->
<!--					<template #default="scope">-->
<!--						<el-button @click="detailHandler(scope.row.openNum)" type="text" size="small">详情</el-button>-->
<!--					</template>-->
<!--				</el-table-column>-->
			</el-table>
			<el-pagination class="zy-table-pagination" background layout="prev, pager, next"
				:current-page="page.current" :total="page.total" :page-size="page.size" @current-change="pagination" />
		</div>

		<el-dialog title="设备详情" v-model="detailDialog" width="500px">
			<el-descriptions :column="2" border>
				<el-descriptions-item label="设备码:">{{detail.openNum}}</el-descriptions-item>
				<el-descriptions-item label="定位模式:">{{detail.mode==1?'GPS':'基站'}}</el-descriptions-item>
			</el-descriptions>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				query: {
					openNum: "",
					type: null,
				},
				page: {
					current: 1,
					size: 20,
				},
				groups: [], //设备组
				detailDialog: false, //详情弹出框
				detail: {}, //设备详情
			};
		},
		mounted() {
			this.getDevicesList();
			this.getGroupList();
		},
		methods: {
			/**
			 * 提交查询条件
			 */
			submit: function() {
				const param = {
					current: 1,
					size: this.page.size,
					groupId: this.query.groupId,
					openNum: this.query.openNum,
				};
				this.getDevicesList(param);
			},
			/**
			 * 分页点击事件
			 */
			pagination: function(current) {
				const param = {
					current: current,
					size: this.page.size,
					groupId: this.query.groupId,
					openNum: this.query.openNum,
				};
				this.getDevicesList(param);
			},

			/**
			 * 查看详情
			 */
			detailHandler: function(openNum) {
				this.detailDialog = true;
				this.getDeviceDetail(openNum);
			},

			/**
			 * 获取设备列表
			 */
			getDevicesList: function(params) {
				this.$http.Get(this.$global.ubi.listPage, params).then(res => {
					this.page = res.data;
				})
			},

			/**
			 * 获取设备详情
			 */
			getDeviceDetail: function(openNum) {
				const params = {
					openNum: openNum
				};
				this.$http.Get(this.$global.ubi.detail, params).then(res => {
					console.log(res.data);
					this.detail = res.data;
				})
			},

			/**
			 * 获取设备组
			 */
			getGroupList() {
				this.$http.Get(this.$global.group.listAll, {}).then(res => {
					const arr = [];
					this.groups = res.data.forEach(item => {
						if (item.type == 'gnss') {
							arr.push(item.code)
						}
					});
					this.groups = arr;
				})
			}
		}
	};
</script>