|
@@ -1,124 +1,139 @@
|
|
|
<template>
|
|
|
- <div class="zy-template">
|
|
|
- <div class="zy-module">
|
|
|
- <el-form :model="query" label-width="60px">
|
|
|
- <el-form-item label="设备码" class="zy-search-form-item">
|
|
|
- <el-input v-model="query.num" size="mini"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="状态" class="zy-search-form-item">
|
|
|
- <el-select v-model="query.status" size="mini" placeholder=" ">
|
|
|
- <el-option label="在线" value="1" />
|
|
|
- <el-option label="离线" value="0" />
|
|
|
- </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-module">
|
|
|
+ <el-form :model="query" label-width="60px">
|
|
|
+ <el-form-item label="设备码" class="zy-search-form-item">
|
|
|
+ <el-input v-model="query.num" size="mini"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态" class="zy-search-form-item">
|
|
|
+ <el-select v-model="query.status" size="mini" placeholder=" ">
|
|
|
+ <el-option label="在线" value="1"/>
|
|
|
+ <el-option label="离线" value="0"/>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button type="primary" size="mini" @click="submit">查询</el-button>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="zy-template_table">
|
|
|
- <el-table :data="page.records" max-height="800" stripe size="small"
|
|
|
- header-cell-class-name="zy-table-header-cell" cell-class-name='zy-table-cell'>
|
|
|
- <el-table-column prop="num" label="设备码" width="180" min-width="10%" />
|
|
|
- <el-table-column prop="clientId" label="MQTT-clientId" width="300" min-width="10%" />
|
|
|
- <el-table-column prop="password" label="MQTT-password" width="300" min-width="10%" />
|
|
|
- <el-table-column prop="groupId" label="设备组" width="100" min-width="10%" />
|
|
|
- <el-table-column prop="createTime" label="创建时间" width="180" min-width="10%" />
|
|
|
- <el-table-column label="操作" width="100" min-width="10%">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button @click="handleSet(scope.row.clientId)" type="text" size="small">设置</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ <div class="zy-template_table">
|
|
|
+ <el-table :data="page.records" max-height="800" stripe header-cell-class-name="zy-table-header-cell"
|
|
|
+ cell-class-name='zy-table-cell'>
|
|
|
+ <el-table-column prop="deviceNum" label="设备码" width="180" fixed/>
|
|
|
+ <el-table-column prop="deviceId" label="MQTT-clientId" width="300" fixed/>
|
|
|
+ <el-table-column label="状态" width="150">
|
|
|
+ <template #default="scope">
|
|
|
+ {{scope.row.mode ===1?'在线':'离线'}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="batteryNum" label="电量" width="100"/>
|
|
|
+ <el-table-column prop="signalNum" label="信号" width="100"/>
|
|
|
+ <el-table-column prop="lon" label="经度" width="150"/>
|
|
|
+ <el-table-column prop="lat" label="纬度" width="150"/>
|
|
|
+ <el-table-column prop="num" label="收星颗数" width="100"/>
|
|
|
+ <el-table-column label="定位模式" width="100">
|
|
|
+ <template #default="scope">
|
|
|
+ {{scope.row.mode ===1?'北斗定位':(scope.row.mode===2?"基站定位":'GPS定位')}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="uploadTime" label="定位时间" width="180"/>
|
|
|
+ <el-table-column prop="site" label="逆地理位置" width="400"/>
|
|
|
+ <el-table-column prop="createTime" label="创建时间" width="180"/>
|
|
|
+ <el-table-column label="操作" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button @click="handleSet(scope.row.clientId)" type="text" size="small">设置</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
|
|
|
- <el-pagination class="pagination" background layout="prev, pager, next" :current-page="page.current"
|
|
|
- :total="page.total" :page-size="page.size" @current-change="pagination" />
|
|
|
- </div>
|
|
|
+ <el-pagination class="pagination" background layout="prev, pager, next" :current-page="page.current"
|
|
|
+ :total="page.total" :page-size="page.size" @current-change="pagination"/>
|
|
|
+ </div>
|
|
|
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- query: {
|
|
|
- num: '',
|
|
|
- status: ''
|
|
|
- },
|
|
|
- page: {
|
|
|
- current: 1,
|
|
|
- size: 20,
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
- mounted: function() {
|
|
|
- this.getDeviceList();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- /**
|
|
|
- * 提交查询条件
|
|
|
- */
|
|
|
- submit: function() {
|
|
|
- const params = {
|
|
|
- num: this.condition.num,
|
|
|
- status: this.condition.status
|
|
|
- };
|
|
|
- this.getDeviceList(params);
|
|
|
- },
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ query: {
|
|
|
+ num: '',
|
|
|
+ status: ''
|
|
|
+ },
|
|
|
+ page: {
|
|
|
+ current: 1,
|
|
|
+ size: 20,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted: function () {
|
|
|
+ this.getDeviceList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 提交查询条件
|
|
|
+ */
|
|
|
+ submit: function () {
|
|
|
+ const params = {
|
|
|
+ num: this.condition.num,
|
|
|
+ status: this.condition.status
|
|
|
+ };
|
|
|
+ this.getDeviceList(params);
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 分页点击事件
|
|
|
- */
|
|
|
- pagination: function(current) {
|
|
|
- const params = {
|
|
|
- num: this.condition.num,
|
|
|
- status: this.condition.status,
|
|
|
- current: current,
|
|
|
- size: this.page.size,
|
|
|
- };
|
|
|
- this.getUserList(params);
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 分页点击事件
|
|
|
+ */
|
|
|
+ pagination: function (current) {
|
|
|
+ const params = {
|
|
|
+ num: this.condition.num,
|
|
|
+ status: this.condition.status,
|
|
|
+ current: current,
|
|
|
+ size: this.page.size,
|
|
|
+ };
|
|
|
+ this.getUserList(params);
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 获取设备列表
|
|
|
- */
|
|
|
- getDeviceList: function(params) {
|
|
|
- const that = this;
|
|
|
- this.$http.Post(this.$global.getDeviceList, params).then(res => {
|
|
|
- console.log(res.data);
|
|
|
- that.page = res.data;
|
|
|
- })
|
|
|
- },
|
|
|
+ /**
|
|
|
+ * 获取设备列表
|
|
|
+ */
|
|
|
+ getDeviceList: function (params) {
|
|
|
+ const that = this;
|
|
|
+ this.$http.Post(this.$global.getDeviceList, params).then(res => {
|
|
|
+ console.log(res.data);
|
|
|
+ that.page = res.data;
|
|
|
+ })
|
|
|
+ },
|
|
|
|
|
|
- /**
|
|
|
- * 跳转至设置页面
|
|
|
- */
|
|
|
- handleSet: function(deviceId) {
|
|
|
- this.$router.push({
|
|
|
- name: 'Set',
|
|
|
- params: {
|
|
|
- deviceId: deviceId
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
+ /**
|
|
|
+ * 跳转至设置页面
|
|
|
+ */
|
|
|
+ handleSet: function (deviceId) {
|
|
|
+ this.$router.push({
|
|
|
+ name: 'Set',
|
|
|
+ params: {
|
|
|
+ deviceId: deviceId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .header-cell {
|
|
|
- background: #f3f5f9 !important;
|
|
|
- }
|
|
|
+ .header-cell {
|
|
|
+ background: #f3f5f9 !important;
|
|
|
+ }
|
|
|
|
|
|
- .zy-template {
|
|
|
- width: 100%;
|
|
|
+ .zy-template {
|
|
|
+ width: 100%;
|
|
|
|
|
|
- &_table {
|
|
|
- border-radius: 5px;
|
|
|
- width: 100%;
|
|
|
- background: white;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
+ &_table {
|
|
|
+ border-radius: 5px;
|
|
|
+ width: 100%;
|
|
|
+ background: white;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|