|
@@ -1,56 +1,39 @@
|
|
|
<template>
|
|
|
<div class="main">
|
|
|
<div class="search">
|
|
|
- <el-input placeholder="设备名称或编号" class="search-input" clearable v-model="mixins_query.deviceNo"></el-input>
|
|
|
- <el-select placeholder="状态" v-model="mixins_query.deviceStatus" clearable>
|
|
|
- <el-option v-for="(item, index) in deviceStatus" :key="index" :label="item.label" :value="item.status">{{
|
|
|
+ <el-input placeholder="输入广告名称/编号" class="search-input" clearable v-model="mixins_query.name"></el-input>
|
|
|
+ <el-select placeholder="状态" v-model="mixins_query.adStatus" clearable>
|
|
|
+ <el-option v-for="(item, index) in advertisingStatus" :key="index" :label="item.label" :value="item.status">{{
|
|
|
item.label
|
|
|
}}</el-option>
|
|
|
</el-select>
|
|
|
- <el-cascader
|
|
|
- v-model="productIds"
|
|
|
- :options="productOptions"
|
|
|
- :props="defaultProps"
|
|
|
- clearable
|
|
|
- placeholder="设备类型"
|
|
|
- @change="productChange($event)"
|
|
|
- >
|
|
|
- </el-cascader>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="times"
|
|
|
+ value-format="yyyyMMdd"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ @change="effectiveDateToggle"
|
|
|
+ ></el-date-picker>
|
|
|
<el-button type="primary" placeholder="状态" class="search-btn" @click="mixins_search" icon="el-icon-search">查询 </el-button>
|
|
|
|
|
|
<div class="search-icon">
|
|
|
- <el-tooltip class="item" effect="light" placement="bottom" content="删除">
|
|
|
- <i class="iconfont" @click="deluserbyidFn()"></i>
|
|
|
+ <el-tooltip class="item" effect="light" placement="bottom" content="新增">
|
|
|
+ <i class="zoniot_font zoniot-icon-tianjia2" @click="addOrEdit('add')"></i>
|
|
|
</el-tooltip>
|
|
|
- <el-dropdown type="primary" @command="addCommand">
|
|
|
- <span class="iconfont"></span>
|
|
|
- <el-dropdown-menu slot="dropdown" hide-on-click="false" class="device-search-dropdown">
|
|
|
- <el-dropdown-item command="add">单个添加</el-dropdown-item>
|
|
|
- <el-dropdown-item command="batchAdd">
|
|
|
- <div class="upload_div">
|
|
|
- <xk-upload class="upload_class" @callback="mixins_search" :params="{ importType: 'DEVICE' }">
|
|
|
- <span class="upload_text" slot="content">批量添加</span>
|
|
|
- </xk-upload>
|
|
|
- </div>
|
|
|
- </el-dropdown-item>
|
|
|
- <el-dropdown-item command="template">下载模板</el-dropdown-item>
|
|
|
- </el-dropdown-menu>
|
|
|
- </el-dropdown>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="roles-wrap">
|
|
|
<zz-table
|
|
|
:cols="cols"
|
|
|
- :settings="{ showCheckbox: true, showIndex: true, stripe: true }"
|
|
|
+ :settings="{ showIndex: true, stripe: true }"
|
|
|
:loading="mixins_onQuery"
|
|
|
:data="mixins_list"
|
|
|
:pageset="mixins_pageset"
|
|
|
@page-change="pageChange"
|
|
|
@selection-change="selectionChange"
|
|
|
>
|
|
|
- <template slot="deviceQrcode">
|
|
|
- <i class="zoniot_font zoniot-icon-erweimachakan" style="cursor: inherit"></i>
|
|
|
- </template>
|
|
|
<template slot-scope="scope" slot="opt">
|
|
|
<div class="opt">
|
|
|
<el-tooltip effect="light" placement="bottom" content="编辑">
|
|
@@ -59,118 +42,80 @@
|
|
|
<el-tooltip effect="light" placement="bottom" content="删除">
|
|
|
<i class="zoniot_font zoniot-icon-shanchu redText" @click="deluserbyidFn(scope.row.id)"></i>
|
|
|
</el-tooltip>
|
|
|
- <el-tooltip effect="light" placement="bottom" :content="scope.row.deviceStatus === 5 ? '已报废' : '报废'">
|
|
|
- <i v-if="scope.row.deviceStatus === 5" class="zoniot_font zoniot-icon-baofei ashText"></i>
|
|
|
- <i v-else class="zoniot_font zoniot-icon-baofei redText" @click="Scrap(scope.row.id)"></i>
|
|
|
- </el-tooltip>
|
|
|
- <el-tooltip effect="light" placement="bottom" content="下载二维码">
|
|
|
- <i class="zoniot_font zoniot-icon-erweimaxiazai" @click="lookImg(scope.row)"></i>
|
|
|
- </el-tooltip>
|
|
|
</div>
|
|
|
</template>
|
|
|
</zz-table>
|
|
|
</div>
|
|
|
- <el-dialog title="下载二维码" :visible.sync="centerDialogVisible" width="400px">
|
|
|
- <div class="QRImg" ref="QRImg">
|
|
|
- <img :src="QRImg" alt="门禁设备二维码" />
|
|
|
- <div>{{ DeviceName }} - {{ deviceNo }}</div>
|
|
|
- </div>
|
|
|
- <span slot="footer" class="dialog-footer">
|
|
|
- <el-button type="primary" @click="downImg">下载</el-button>
|
|
|
- </span>
|
|
|
- </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import list from '@utils/list.js';
|
|
|
-import html2canvas from 'html2canvas';
|
|
|
export default {
|
|
|
mixins: [list],
|
|
|
- name: 'deviceManagement',
|
|
|
+ name: 'advertisingManagement',
|
|
|
data() {
|
|
|
- let _this = this;
|
|
|
return {
|
|
|
- selectRow: [],
|
|
|
// 数据列表
|
|
|
- deviceStatus: [
|
|
|
+ advertisingStatus: [
|
|
|
+ {
|
|
|
+ status: 0,
|
|
|
+ label: '未开始'
|
|
|
+ },
|
|
|
{
|
|
|
status: 1,
|
|
|
- label: '正常'
|
|
|
+ label: '播放中'
|
|
|
},
|
|
|
{
|
|
|
status: 2,
|
|
|
- label: '告警'
|
|
|
+ label: '已结束'
|
|
|
},
|
|
|
{
|
|
|
status: 3,
|
|
|
- label: '离线'
|
|
|
- },
|
|
|
- {
|
|
|
- status: 4,
|
|
|
- label: '未启用'
|
|
|
- },
|
|
|
- {
|
|
|
- status: 5,
|
|
|
- label: '报废'
|
|
|
+ label: '已终止'
|
|
|
}
|
|
|
],
|
|
|
+ times: [],
|
|
|
cols: [
|
|
|
{
|
|
|
- label: '所属社区',
|
|
|
- prop: 'communityId',
|
|
|
- format(val) {
|
|
|
- let va = '';
|
|
|
- _this.$store.getters['getAreaSelect'].forEach((element) => {
|
|
|
- if (element.id === val) {
|
|
|
- va = element.communityName;
|
|
|
- }
|
|
|
- });
|
|
|
- return va;
|
|
|
- }
|
|
|
+ label: '广告编号',
|
|
|
+ prop: 'communityId'
|
|
|
},
|
|
|
{
|
|
|
- label: '设备类型',
|
|
|
- prop: 'deviceTypeName'
|
|
|
+ label: '广告名称',
|
|
|
+ prop: 'name'
|
|
|
},
|
|
|
{
|
|
|
- label: '设备编号',
|
|
|
- prop: 'deviceNo'
|
|
|
+ label: '投放社区',
|
|
|
+ prop: 'communityNames'
|
|
|
},
|
|
|
{
|
|
|
- label: '设备名称',
|
|
|
- prop: 'deviceName'
|
|
|
+ label: '开始播放日期',
|
|
|
+ prop: 'startTime'
|
|
|
},
|
|
|
{
|
|
|
- label: '设备地址',
|
|
|
- prop: 'address'
|
|
|
+ label: '结束播放日期',
|
|
|
+ prop: 'endTime'
|
|
|
},
|
|
|
{
|
|
|
- label: '添加日期',
|
|
|
+ label: '创建时间',
|
|
|
prop: 'createDate'
|
|
|
},
|
|
|
{
|
|
|
- label: '设备状态',
|
|
|
- prop: 'deviceStatus',
|
|
|
+ label: '状态',
|
|
|
+ prop: 'adStatus',
|
|
|
format(val) {
|
|
|
- if (val == '1') {
|
|
|
- return '正常';
|
|
|
- } else if (val == '2') {
|
|
|
- return '告警';
|
|
|
- } else if (val == '3') {
|
|
|
- return '离线';
|
|
|
- } else if (val == '4') {
|
|
|
- return '未启用';
|
|
|
- } else if (val == '5') {
|
|
|
- return '报废';
|
|
|
+ if (val == 0) {
|
|
|
+ return '未开始';
|
|
|
+ } else if (val == 1) {
|
|
|
+ return '播放中';
|
|
|
+ } else if (val == 2) {
|
|
|
+ return '已结束';
|
|
|
+ } else if (val == 3) {
|
|
|
+ return '已终止';
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- {
|
|
|
- label: '二维码',
|
|
|
- prop: 'deviceQrcode',
|
|
|
- slot: 'deviceQrcode'
|
|
|
- },
|
|
|
{
|
|
|
label: '操作',
|
|
|
prop: 'id',
|
|
@@ -178,33 +123,26 @@ export default {
|
|
|
width: 150
|
|
|
}
|
|
|
],
|
|
|
- mixins_post: 'post',
|
|
|
- productOptions: [],
|
|
|
- defaultProps: {
|
|
|
- value: 'id', // 唯一标识
|
|
|
- label: 'label', // 标签显示
|
|
|
- children: 'children' // 子级
|
|
|
- },
|
|
|
- centerDialogVisible: false,
|
|
|
- QRImg: '',
|
|
|
- DeviceName: '',
|
|
|
- deviceNo: ''
|
|
|
+ mixins_post: 'get'
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
if (this.$store.getters['getAreaSelect'].length === 0) {
|
|
|
this.getorgTree();
|
|
|
}
|
|
|
- this.mixins_dataUrl = '/sc-community/device/page';
|
|
|
+ this.mixins_dataUrl = '/sc-community/advertising/page';
|
|
|
this.mixins_query = {};
|
|
|
this.mixins_search();
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.getProductOptions();
|
|
|
- },
|
|
|
+ mounted() {},
|
|
|
methods: {
|
|
|
- productChange(va) {
|
|
|
- this.mixins_query.productId = _.last(va);
|
|
|
+ effectiveDateToggle(va) {
|
|
|
+ let arr = va;
|
|
|
+ if (!arr) {
|
|
|
+ arr = ['', ''];
|
|
|
+ }
|
|
|
+ this.mixins_query.startDate = arr[0];
|
|
|
+ this.mixins_query.endDate = arr[1];
|
|
|
},
|
|
|
getorgTree() {
|
|
|
this.$http
|
|
@@ -261,35 +199,6 @@ export default {
|
|
|
})
|
|
|
.catch(() => {});
|
|
|
},
|
|
|
- lookImg(row) {
|
|
|
- let _this = this;
|
|
|
- this.DeviceName = row.deviceName;
|
|
|
- this.deviceNo = row.deviceNo;
|
|
|
- this.getBinary('/sc-community/device/generateQRCodeImage', { id: row.id, type: 'DEVICE' }, function (data) {
|
|
|
- _this.QRImg = window.URL.createObjectURL(data);
|
|
|
- _this.centerDialogVisible = !_this.centerDialogVisible;
|
|
|
- });
|
|
|
- },
|
|
|
- downImg() {
|
|
|
- html2canvas(this.$refs.QRImg).then((canvas) => {
|
|
|
- let dataURL = canvas.toDataURL('image/png');
|
|
|
- let a = document.createElement('a');
|
|
|
- a.download = `${this.DeviceName} - ${this.deviceNo}`;
|
|
|
- a.href = dataURL;
|
|
|
- document.body.appendChild(a);
|
|
|
- a.click();
|
|
|
- document.body.removeChild(a);
|
|
|
- this.centerDialogVisible = !this.centerDialogVisible;
|
|
|
- });
|
|
|
-
|
|
|
- // let a = document.createElement('a');
|
|
|
- // a.download = `${this.DeviceName}${this.deviceNo}.png`;
|
|
|
- // a.href = this.QRImg;
|
|
|
- // document.body.appendChild(a);
|
|
|
- // a.click();
|
|
|
- // document.body.removeChild(a);
|
|
|
- // this.centerDialogVisible = !this.centerDialogVisible;
|
|
|
- },
|
|
|
addOrEdit(todo, data = {}) {
|
|
|
new Promise((resolve) => {
|
|
|
let title = '添加设备';
|
|
@@ -311,43 +220,6 @@ export default {
|
|
|
}).then(() => {
|
|
|
this.mixins_search();
|
|
|
});
|
|
|
- },
|
|
|
- addCommand(command) {
|
|
|
- if (command === 'add') {
|
|
|
- this.addOrEdit('add');
|
|
|
- }
|
|
|
- if (command === 'template') {
|
|
|
- this.__exportExcel('/sc-community/excel/download/template', { importType: 'DEVICE' });
|
|
|
- return;
|
|
|
- }
|
|
|
- },
|
|
|
- selectionChange(val) {
|
|
|
- this.selectRow = val;
|
|
|
- },
|
|
|
- getProductOptions() {
|
|
|
- this.$http.postForm('/sc-community/devicetype/selectList', { name: '' }).then((data) => {
|
|
|
- this.productOptions = data;
|
|
|
- });
|
|
|
- },
|
|
|
- getBinary(url, args, success) {
|
|
|
- var xmlhttp = new XMLHttpRequest();
|
|
|
- var data = eval(args);
|
|
|
- var i = 0;
|
|
|
- for (var key in data) {
|
|
|
- if (i++ === 0) {
|
|
|
- url += '?' + key + '=' + data[key];
|
|
|
- } else {
|
|
|
- url += '&' + key + '=' + data[key];
|
|
|
- }
|
|
|
- }
|
|
|
- xmlhttp.open('GET', url, true);
|
|
|
- xmlhttp.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('SC_token'));
|
|
|
-
|
|
|
- xmlhttp.responseType = 'blob';
|
|
|
- xmlhttp.onload = function () {
|
|
|
- success(this.response);
|
|
|
- };
|
|
|
- xmlhttp.send();
|
|
|
}
|
|
|
}
|
|
|
};
|