|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
+ <div class="content">
|
|
|
<div class="tabs">
|
|
|
<ul>
|
|
|
<li v-for="(tab,i) in tabs" @click="goTab(tab.url)" :class="{'active':tabIndex == i}">
|
|
|
@@ -11,17 +11,19 @@
|
|
|
<div class="panel-body">
|
|
|
<div class=" panel_control">
|
|
|
<el-row :gutter="20">
|
|
|
- <el-col :span="4">
|
|
|
- <em>设备ID:</em>
|
|
|
- <el-input v-model="panel.keyword" placeholder="请输入设备ID"></el-input>
|
|
|
- </el-col>
|
|
|
- <el-col :span="4">
|
|
|
- <em>MAC:</em>
|
|
|
- <el-input v-model="panel.keyword" placeholder="请输入MAC地址"></el-input>
|
|
|
+ <el-col :span="6">
|
|
|
+ <em>登记时间:</em>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="panel.time1"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期">
|
|
|
+ </el-date-picker>
|
|
|
</el-col>
|
|
|
<el-col :span="4">
|
|
|
- <em>所属区域:</em>
|
|
|
- <el-select v-model="panel.taskstatus">
|
|
|
+ <em>时限类型:</em>
|
|
|
+ <el-select v-model="panel.timeType">
|
|
|
<el-option
|
|
|
v-for="item in panel.options"
|
|
|
:key="item.value"
|
|
|
@@ -30,15 +32,9 @@
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <em>登记时间:</em>
|
|
|
- <el-date-picker
|
|
|
- v-model="panel.time1"
|
|
|
- type="daterange"
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="开始日期"
|
|
|
- end-placeholder="结束日期">
|
|
|
- </el-date-picker>
|
|
|
+ <el-col :span="4">
|
|
|
+ <em>关键词:</em>
|
|
|
+ <el-input v-model="panel.keyword" placeholder="请输入关键词"></el-input>
|
|
|
</el-col>
|
|
|
<el-col :span="4">
|
|
|
<el-button size="small" type="primary" @click="query">查询</el-button>
|
|
|
@@ -63,42 +59,48 @@
|
|
|
width="55">
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="name"
|
|
|
- label="设备ID"
|
|
|
+ prop="QrId"
|
|
|
+ label="二维码编号"
|
|
|
>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="date"
|
|
|
- label="检测时间"
|
|
|
+ prop="CreateTime"
|
|
|
+ label="创建时间"
|
|
|
width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{scope.row.CreateTime |fmtDate}}
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="name"
|
|
|
- label="探测区域"
|
|
|
+ prop="Frequency"
|
|
|
+ label="有效时长(分钟)"
|
|
|
>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="name"
|
|
|
- label="信道"
|
|
|
+ prop="DetIdStr"
|
|
|
+ label="探测器"
|
|
|
width="180">
|
|
|
+ <!--探测器详细信息 todo-->
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="address"
|
|
|
- label="信号频段">
|
|
|
+ prop="QrName"
|
|
|
+ label="二维码名字">
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="address"
|
|
|
- label="数据量">
|
|
|
+ prop="Tel"
|
|
|
+ label="联系电话">
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="address"
|
|
|
- label="信号强度">
|
|
|
+ prop="Memo"
|
|
|
+ label="备注">
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="address"
|
|
|
- label="操作记录">
|
|
|
+ prop="QrId"
|
|
|
+ label="操作">
|
|
|
<template slot-scope="scope">
|
|
|
- <span @click="goRecord(scope.row)">探测记录</span>
|
|
|
+ <el-button class="control_btn" type="text" @click="goPoster(scope.row)">海报</el-button>
|
|
|
+ <el-button class="control_btn" type="text" @click="goQrcode(scope.row)">二维码</el-button>
|
|
|
+ <el-button class="control_btn red" type="text" @click="pauseQrcode(scope.row)">禁用</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
@@ -121,40 +123,64 @@
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="10">
|
|
|
<label>
|
|
|
- 设备ID
|
|
|
+ 二维码名称 *
|
|
|
+ </label>
|
|
|
+ <el-input v-model="dialog.comname"></el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <label>
|
|
|
+ 电话 *
|
|
|
</label>
|
|
|
- <el-input v-model="dialog.name"></el-input>
|
|
|
+ <el-input v-model="dialog.tel"></el-input>
|
|
|
</el-col>
|
|
|
<el-col :span="10">
|
|
|
<label>
|
|
|
- MAC地址
|
|
|
+ 房间号 *
|
|
|
</label>
|
|
|
- <el-input v-model="dialog.name"></el-input>
|
|
|
+ <el-input v-model="dialog.qrname"></el-input>
|
|
|
</el-col>
|
|
|
<el-col :span="10">
|
|
|
<label>
|
|
|
- 标签名
|
|
|
+ 备注
|
|
|
</label>
|
|
|
- <el-input v-model="dialog.name"></el-input>
|
|
|
+ <el-input v-model="dialog.memo"></el-input>
|
|
|
</el-col>
|
|
|
<el-col :span="10">
|
|
|
<label>
|
|
|
- 设备所属楼层
|
|
|
+ 房间所属探测器
|
|
|
</label>
|
|
|
- <el-select v-model="dialog.region" placeholder="请选择所属楼层">
|
|
|
+ <!--改成list todo -->
|
|
|
+ <el-checkbox-group v-model="dialog.checkList">
|
|
|
+ <el-checkbox :label="det.Id" v-for="det in dialog.detOptions">{{det.Name}}</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <label>
|
|
|
+ 海报有效期 *
|
|
|
+ </label>
|
|
|
+ <el-radio v-model="dialog.timeType" label="1">无限期</el-radio>
|
|
|
+ <el-radio v-model="dialog.timeType" label="2">有时限</el-radio>
|
|
|
+
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" v-if="dialog.timeType == 2">
|
|
|
+ <label>
|
|
|
+ 有效期时长
|
|
|
+ </label>
|
|
|
+ <el-input class="short" v-model="dialog.frequency"></el-input>
|
|
|
+ <el-select class="short shortRight" v-model="dialog.region" placeholder="时间单位">
|
|
|
<el-option
|
|
|
- v-for="item in panel.options"
|
|
|
+ v-for="item in dialog.timeOptions"
|
|
|
:key="item.value"
|
|
|
:label="item.label"
|
|
|
:value="item.value">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</el-col>
|
|
|
- <el-col :span="20">
|
|
|
+ <el-col :span="10">
|
|
|
<label>
|
|
|
- 备注
|
|
|
+ 单位形象图 * todo
|
|
|
</label>
|
|
|
- <el-input type="textarea" v-model="dialog.memo"></el-input>
|
|
|
+ <!--todo-->
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
@@ -165,13 +191,15 @@
|
|
|
<script>
|
|
|
import Global from '../Global.js'
|
|
|
import dialog_referrer_list from '../components/dialog_referrer_list'
|
|
|
+ import {GetRegionAndDectorSelect} from '../api/getApiRes.js'
|
|
|
|
|
|
+ let qs = require('qs');
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
// dialog
|
|
|
dialog_state: false,
|
|
|
- dialog_title: '添加设备',
|
|
|
+ dialog_title: '添加二维码',
|
|
|
dialog_type: '',//类型,1是添加,2是修改
|
|
|
tabIndex: 0,
|
|
|
tabs: [
|
|
|
@@ -184,11 +212,11 @@
|
|
|
compname: '',
|
|
|
keyword: '',
|
|
|
USERCODE: '',
|
|
|
- taskstatus: 99,
|
|
|
+ timeType: 99,
|
|
|
options: [
|
|
|
{value: 99, label: '全部'},
|
|
|
- {value: 1, label: '进行中'},
|
|
|
- {value: 2, label: '已完成'},
|
|
|
+ {value: 1, label: '无期限'},
|
|
|
+ {value: 2, label: '有时限'},
|
|
|
],
|
|
|
time1: globalBt2(),
|
|
|
},
|
|
|
@@ -199,32 +227,47 @@
|
|
|
pageIndex: 1,
|
|
|
},
|
|
|
dialog: {
|
|
|
- name: 10,
|
|
|
- region: 10,
|
|
|
+ comname: '',
|
|
|
+ tel: '',
|
|
|
+ qrname: '',
|
|
|
+ detId: '',
|
|
|
+ timeType: '1',
|
|
|
memo: '',
|
|
|
+ detOptions: [],
|
|
|
+ checkList: [],
|
|
|
+ timeOptions: [
|
|
|
+ {value: 1, label: '分钟'},
|
|
|
+ {value: 2, label: '小时'},
|
|
|
+ {value: 3, label: '天'},
|
|
|
+ {value: 4, label: '月(30天)'},
|
|
|
+ {value: 5, label: '年'},
|
|
|
+ ],
|
|
|
},
|
|
|
multipleSelection: [],
|
|
|
- tableData: [{
|
|
|
- date: '2016-05-02',
|
|
|
- name: '王小虎',
|
|
|
- address: '上海市普陀区金沙江路 1518 弄'
|
|
|
- }, {
|
|
|
- date: '2016-05-04',
|
|
|
- name: '王小虎',
|
|
|
- address: '上海市普陀区金沙江路 1517 弄'
|
|
|
- }, {
|
|
|
- date: '2016-05-01',
|
|
|
- name: '王小虎',
|
|
|
- address: '上海市普陀区金沙江路 1519 弄'
|
|
|
- }, {
|
|
|
- date: '2016-05-03',
|
|
|
- name: '王小虎',
|
|
|
- address: '上海市普陀区金沙江路 1516 弄'
|
|
|
- }]
|
|
|
+ tableData: [
|
|
|
+ {
|
|
|
+ "QrId": 3,
|
|
|
+ "ComId": 7,
|
|
|
+ "ComName": "一瓦科技",
|
|
|
+ "Tel": "15253135699",
|
|
|
+ "QrName": "会议室",
|
|
|
+ "DetIdStr": "2,3",
|
|
|
+ "PicPath": "8e51ac9d6bcad2c296e7b26f1f88949f",
|
|
|
+ "Memo": "线上展示,请勿删改",
|
|
|
+ "State": 1,
|
|
|
+ "Frequency": 60000,
|
|
|
+ "ExpTime": "2020-08-14T02:27:32.161505+08:00",
|
|
|
+ "Vfcode": "d6caec11e8fb88b519614c6096622a50",
|
|
|
+ "CreateTime": "2020-07-03T09:54:44.728978+08:00",
|
|
|
+ "TagnameStr": "会议室1,会议室2,会议室3",
|
|
|
+ "LocationStr": "------会议室,------会议室,------会议室"
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getTableQuery();
|
|
|
+ this.getDetList();
|
|
|
},
|
|
|
methods: {
|
|
|
// 跳转tab页面
|
|
|
@@ -240,6 +283,19 @@
|
|
|
this.multipleSelection = val;
|
|
|
console.log(val);
|
|
|
},
|
|
|
+ // 获取探测器列表
|
|
|
+ getDetList() {
|
|
|
+ let param = {
|
|
|
+ 'token': localStorage.token,
|
|
|
+ };
|
|
|
+ let postdata = qs.stringify(param);
|
|
|
+ GetRegionAndDectorSelect(postdata).then(res => {
|
|
|
+ let json = res;
|
|
|
+ if (json.Code == 0) {
|
|
|
+ this.dialog.detOptions = json.DectectorRs;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
// 页面数据查询
|
|
|
getTableQuery() {
|
|
|
// let that = this;
|
|
|
@@ -315,21 +371,39 @@
|
|
|
},
|
|
|
addList() {
|
|
|
this.dialog_state = true;
|
|
|
- this.dialog_title = '添加设备';
|
|
|
+ this.dialog_title = '添加二维码';
|
|
|
+ // clear
|
|
|
+ this.dialog.detId = '';
|
|
|
+ this.dialog.timeType = '1';
|
|
|
+ this.dialog.memo = '';
|
|
|
+ this.dialog.checkList = [];
|
|
|
},
|
|
|
delList() {
|
|
|
+ let that = this;
|
|
|
// checkNum
|
|
|
if (!this.multipleSelection.length) {
|
|
|
- this.$message({
|
|
|
+ that.$message({
|
|
|
showClose: true,
|
|
|
message: '错了哦,需要先选中至少一条记录',
|
|
|
type: 'error'
|
|
|
});
|
|
|
return false
|
|
|
}
|
|
|
- // todo delEquip
|
|
|
+ let qrcodeid = that.multipleSelection[0].QrId;
|
|
|
+ console.log(qrcodeid);
|
|
|
+ // ajax todo
|
|
|
+ // ok
|
|
|
+ that.dialog_state = false;
|
|
|
+ that.$message({
|
|
|
+ message: '选中的二维码已删除',
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ // 重载列表
|
|
|
+ that.getTableQuery();
|
|
|
+
|
|
|
},
|
|
|
changeList() {
|
|
|
+ let that = this;
|
|
|
// checkNum
|
|
|
if (!this.multipleSelection.length) {
|
|
|
this.$message({
|
|
|
@@ -347,6 +421,23 @@
|
|
|
});
|
|
|
return false
|
|
|
}
|
|
|
+ this.dialog_state = true;
|
|
|
+ this.dialog_title = '修改二维码';
|
|
|
+ that.dialog_type = 2;
|
|
|
+ let row = this.multipleSelection[0];
|
|
|
+ this.dialog.comname = row.ComName;
|
|
|
+ this.dialog.tel = row.Tel;
|
|
|
+ this.dialog.qrname = row.QrName;
|
|
|
+ this.dialog.memo = row.Memo;
|
|
|
+ this.dialog.checkList = row.DetIdStr.split(',').map(Number);
|
|
|
+ // 为0时候表示无限期
|
|
|
+ // 获取时限类型
|
|
|
+ let timeType = parseInt(row.Frequency);
|
|
|
+ if (timeType == 0) {
|
|
|
+ that.dialog.timeType = 1;
|
|
|
+ } else {
|
|
|
+ that.dialog.timeType = 2;
|
|
|
+ }
|
|
|
},
|
|
|
// 探测记录
|
|
|
goRecord(row) {
|
|
|
@@ -358,12 +449,118 @@
|
|
|
that.dialog_state = false;
|
|
|
},
|
|
|
dialog_ok() {
|
|
|
+ if (this.dialog_type == 1) {
|
|
|
+ this.confirmAddQrcode();
|
|
|
+ } else {
|
|
|
+ this.confirmEditQrcode();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 确认添加新的二维码
|
|
|
+ confirmAddQrcode() {
|
|
|
+ // checkVal
|
|
|
let that = this;
|
|
|
- let dialog_type = that.dialog_type;
|
|
|
- let name = that.field_name;
|
|
|
- let id = that.field_id;
|
|
|
+ // checkVal
|
|
|
+ if (!that.dialog.qrname) {
|
|
|
+ this.$message.error('错了哦,区域名称不能空');
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (that.dialog.qrname.length > 20) {
|
|
|
+ this.$message.error('错了哦,区域名称不能超过20个字符');
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (!that.dialog.name) {
|
|
|
+ this.$message.error('错了哦,区域名称不能空');
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (that.dialog.name.length > 20) {
|
|
|
+ this.$message.error('错了哦,区域名称不能超过20个字符');
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ // ajax todo
|
|
|
+ // ok
|
|
|
+ that.dialog_state = false;
|
|
|
+ that.$message({
|
|
|
+ message: '主建筑已添加',
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ // 确认修改旧的二维码
|
|
|
+ confirmEditQrcode() {
|
|
|
+ },
|
|
|
+ // 禁用二维码
|
|
|
+ pauseQrcode(row) {
|
|
|
+ let that = this;
|
|
|
+ let param = {
|
|
|
+ token: localStorage.token,
|
|
|
+ qrcodeid: row.QrId,
|
|
|
+ status: 0//新状态0禁用1启用 9删除
|
|
|
+ };
|
|
|
+ let postdata = qs.stringify(param);
|
|
|
+ this.$confirm('是否禁用' + row.QrName + '的二维码?', '禁用操作', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ // // ajax todo
|
|
|
+ // RegionStatusEdit(postdata).then(res => {
|
|
|
+ // let json = res;
|
|
|
+ // if (json.Code == 0) {
|
|
|
+ that.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: `禁用成功`
|
|
|
+ });
|
|
|
+ that.getTableQuery();
|
|
|
+ // } else {
|
|
|
+ // that.$message.error(json.Memo);
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ }).catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: 'info',
|
|
|
+ message: '已取消禁用'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 查看海报
|
|
|
+ goPoster(node){
|
|
|
+ this.$router.push({
|
|
|
+ path:'/poster',
|
|
|
+ query:{
|
|
|
+ shopname:1,
|
|
|
+ ComName :node.ComName,
|
|
|
+ qrname :node.QrName,
|
|
|
+ qrcodeId :node.QrId,
|
|
|
+ vfcode :node.Vfcode,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 查看二维码
|
|
|
+ goQrcode(node){
|
|
|
+ this.$router.push({
|
|
|
+ path:'/createmeetingqrcode',
|
|
|
+ query:{
|
|
|
+ shopname:1,
|
|
|
+ ComName :node.ComName,
|
|
|
+ qrname :node.QrName,
|
|
|
+ qrcodeId :node.QrId,
|
|
|
+ vfcode :node.Vfcode,
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
},
|
|
|
+ filters: {
|
|
|
+ fmtDate: function (value) {
|
|
|
+ let res = '';
|
|
|
+ if (!value) {
|
|
|
+ return '---';
|
|
|
+ } else {
|
|
|
+ res = new Date(+new Date(value) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
|
|
|
+ return res;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ,
|
|
|
components: {
|
|
|
dialog_referrer_list
|
|
|
}
|
|
|
@@ -381,4 +578,56 @@
|
|
|
table span {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+
|
|
|
+ .control_btn {
|
|
|
+ float: left;
|
|
|
+ margin: 0 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ display: block;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-content .el-select {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .modal-content .el-select .el-input .el-select__caret {
|
|
|
+ position: relative;
|
|
|
+ top: 10px;
|
|
|
+ line-height: 0px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-radio {
|
|
|
+ width: 45%;
|
|
|
+ height: 35px;
|
|
|
+ float: left;
|
|
|
+ padding-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-radio__input {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-radio__inner {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-radio__label {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .short {
|
|
|
+ width: 40%;
|
|
|
+ float: left;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .red {
|
|
|
+ color: red !important;
|
|
|
+ }
|
|
|
</style>
|