|
|
@@ -1,154 +1,217 @@
|
|
|
<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-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>
|
|
|
+ <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 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 label="设备二维码" min-width="120">
|
|
|
+ <el-popover placement="right" :width="200" trigger="click">
|
|
|
+ <template #reference>
|
|
|
+ <el-button type="text">点击查看</el-button>
|
|
|
+ </template>
|
|
|
+ <img src="http://lq.ailishi.org:4032/chenyi/static/bg.59f1ed01.png" alt="二维码" width="200"
|
|
|
+ height="200">
|
|
|
+ </el-popover>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="电池电压" min-width="80">
|
|
|
+ <template #default="scope">
|
|
|
+ {{scope.row.powerVolt==null?'':scope.row.powerVolt.toFixed(2)}}
|
|
|
+ <el-tooltip effect="dark" content="电压低于10V" placement="right-start"
|
|
|
+ v-if="scope.row.powerVolt!=null && scope.row.powerVolt.toFixed(2)<10">
|
|
|
+ <i class="el-icon-warning warning"/>
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="4G信号" min-width="80">
|
|
|
+ <template #default="scope">
|
|
|
+ {{scope.row.signal4g}}
|
|
|
+ <el-tooltip effect="dark" content="信号值低于18" placement="right-start"
|
|
|
+ v-if="scope.row.signal4g != null && scope.row.signal4g!==''&& parseInt(scope.row.signal4g)<18">
|
|
|
+ <i class="el-icon-warning warning"/>
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <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 prop="sim" label="卡号" min-width="120"/>
|
|
|
+ <el-table-column prop="freq" label="上传频率(秒)" min-width="120"/>
|
|
|
+ <el-table-column prop="updateTime" label="最近通讯时间" min-width="180"/>
|
|
|
+ <el-table-column prop="createTime" label="创建时间" min-width="180"/>
|
|
|
+ <el-table-column prop="remark" label="备注" min-width="240"/>
|
|
|
+ <el-table-column label="操作" min-width="80">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button @click="editRemark(scope.row)" 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>
|
|
|
+ <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>
|
|
|
+ <el-dialog title="编辑" v-model="updateDialog" width="500px">
|
|
|
+ <el-form ref="updateForm" :model="updateForm" label-width="100px" :rules="rules">
|
|
|
+ <el-form-item label="备注:">
|
|
|
+ <el-input type="textarea" v-model="updateForm.remark" maxlength="100"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="updateDialog = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="updateSubmit('updateForm')">提 交</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </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);
|
|
|
- },
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ query: {
|
|
|
+ openNum: "",
|
|
|
+ type: null,
|
|
|
+ },
|
|
|
+ page: {
|
|
|
+ current: 1,
|
|
|
+ size: 20,
|
|
|
+ },
|
|
|
+ groups: [], //设备组
|
|
|
+ detailDialog: false, //详情弹出框
|
|
|
+ updateDialog: false, //更新表单
|
|
|
+ updateForm: {}, //更新表单
|
|
|
+ detail: {}, //设备详情
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getListPage();
|
|
|
+ this.getGroupList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 提交查询条件
|
|
|
+ */
|
|
|
+ submit: function () {
|
|
|
+ const param = {
|
|
|
+ current: 1,
|
|
|
+ size: this.page.size,
|
|
|
+ groupId: this.query.groupId,
|
|
|
+ openNum: this.query.openNum,
|
|
|
+ };
|
|
|
+ this.getListPage(param);
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 分页点击事件
|
|
|
+ */
|
|
|
+ pagination: function (current) {
|
|
|
+ const param = {
|
|
|
+ current: current,
|
|
|
+ size: this.page.size,
|
|
|
+ groupId: this.query.groupId,
|
|
|
+ openNum: this.query.openNum,
|
|
|
+ };
|
|
|
+ this.getListPage(param);
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 编辑备注
|
|
|
+ */
|
|
|
+ editRemark: function (obj) {
|
|
|
+ this.updateForm = {
|
|
|
+ openNum: obj.openNum,
|
|
|
+ remark: obj.remark
|
|
|
+ };
|
|
|
+ this.updateDialog = true;
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 查看详情
|
|
|
- */
|
|
|
- detailHandler: function(openNum) {
|
|
|
- this.detailDialog = true;
|
|
|
- this.getDeviceDetail(openNum);
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 获取设备列表
|
|
|
+ */
|
|
|
+ getListPage: function (params) {
|
|
|
+ this.$http.Get(this.$global.ubi.listPage, params).then(res => {
|
|
|
+ this.page = res.data;
|
|
|
+ })
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 获取设备列表
|
|
|
- */
|
|
|
- getDevicesList: function(params) {
|
|
|
- this.$http.Get(this.$global.ubi.listPage, params).then(res => {
|
|
|
- this.page = res.data;
|
|
|
- })
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 提交更新表单
|
|
|
+ */
|
|
|
+ updateSubmit: function (formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (!valid) return false;
|
|
|
+ //提交表单
|
|
|
+ this.$http.Post(this.$global.deviceBase.updateRemark, this.updateForm).then(res => {
|
|
|
+ this.$message.success("修改成功!");
|
|
|
+ this.refresh();
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 获取设备详情
|
|
|
- */
|
|
|
- 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;
|
|
|
+ })
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 获取设备组
|
|
|
- */
|
|
|
- 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;
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
+ /**
|
|
|
+ * 刷新列表
|
|
|
+ */
|
|
|
+ refresh: function () {
|
|
|
+ this.updateDialog = false;
|
|
|
+ const params = {
|
|
|
+ current: this.page.current,
|
|
|
+ size: this.page.size,
|
|
|
+ groupId: this.query.groupId,
|
|
|
+ openNum: this.query.openNum,
|
|
|
+ };
|
|
|
+ this.getListPage(params);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
</script>
|
