Project-Annex/operationSupport/src/views/patrolManagement/index.vue

<template>
    <div class="main">
        <div class="search">
            <el-input placeholder="请输入巡更点名称" class="search-input" clearable v-model="mixins_query.name"></el-input>
            <el-select v-model="mixins_query.communityId" placeholder="请选择所属社区" clearable>
                <el-option v-for="(item, index) in communityArr" :key="index" :label="item.communityName" :value="item.id"></el-option>
            </el-select>
            <el-button type="primary" 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="zoniot_font zoniot-icon-tianjia2" @click="addOrEdit('add')"></i>
                </el-tooltip>
            </div>
        </div>
        <zz-table
            :cols="cols"
            :settings="{ showIndex: true, stripe: true }"
            :loading="mixins_onQuery"
            :data="mixins_list"
            :pageset="mixins_pageset"
            @page-change="pageChange"
        >
            <template slot="pointQrcode">
                <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="下载二维码">
                        <i class="zoniot_font zoniot-icon-erweimaxiazai" @click="lookImg(scope.row)"></i>
                    </el-tooltip>
                    <el-tooltip effect="light" placement="bottom" content="编辑">
                        <i class="zoniot_font zoniot-icon-bianji" @click="addOrEdit('edit', scope.row)"></i>
                    </el-tooltip>
                    <el-tooltip effect="light" placement="bottom" content="删除">
                        <i class="zoniot_font zoniot-icon-shanchu redText" @click="deleteOne(scope.row.id)"></i>
                    </el-tooltip>
                </div>
            </template>
        </zz-table>

        <el-dialog title="下载二维码" :visible.sync="centerDialogVisible" width="400px">
            <div class="QRImg" ref="QRImg">
                <img :src="QRImg" alt="门禁设备二维码" />
                <div>{{ pointName }} - {{ pointNo }}</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';
import scheduling from './popups/scheduling.vue';
export default {
    mixins: [list],
    name: 'patrolManagement',
    components: {
        scheduling
    },
    data() {
        let _this = this;
        return {
            communityArr: [],
            communityTre: [],
            cols: [
                {
                    label: '所属社区',
                    prop: 'communityName'
                },
                {
                    label: '楼栋',
                    prop: 'buildingName'
                },
                {
                    label: '单元',
                    prop: 'unit'
                },
                {
                    label: '巡更点名称',
                    prop: 'pointName'
                },
                {
                    label: '位置编号',
                    prop: 'pointNo'
                },
                {
                    label: '巡更点二维码',
                    prop: 'pointQrcode',
                    slot: 'pointQrcode'
                },
                {
                    label: '操作',
                    prop: 'id',
                    slot: 'opt'
                }
            ],
            findUser: [],
            centerDialogVisible: false,
            mixins_post: 'post',
            pointName: '',
            pointNo: ''
        };
    },
    created() {
        this.getorgTree();
        this.mixins_dataUrl = '/sc-community/patrol/point/page';
        this.mixins_query = {};
        this.mixins_search();
        this.getUserList();
        this.getCommunity();
    },
    mounted() {},
    methods: {
        getorgTree() {
            this.$http
                .get('/sc-community/assets/community/list')
                .then((data) => {
                    this.communityArr = data.data;
                    this.$store.commit('setAreaSelect', data.data);
                })

                .catch(function () {});
        },
        getUserList() {
            this.$http.get('/sc-user-center/user/findUserList').then(({ data, status, msg }) => {
                this.findUser = data;
            });
        },
        getCommunity() {
            this.$http.get('/sc-community/assets/tree/community/find').then(({ data, status, msg }) => {
                this.communityTre = data;
            });
        },
        lookImg(row) {
            let _this = this;
            this.pointName = row.pointName;
            this.pointNo = row.pointNo;
            this.getBinary('/sc-community/device/generateQRCodeImage', { id: row.id, type: 'PATROLPOINT' }, 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.pointName} - ${this.pointNo}`;
                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;
        },
        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();
        },
        addOrEdit(todo, row) {
            let title = '添加巡更点';
            if (todo == 'edit') {
                title = '修改巡更点';
            }
            new Promise((resolve) => {
                this.$store.dispatch('addPopup', {
                    url: '/patrolManagement/popups/addPoint.vue',
                    width: '500px',
                    height: '500px',
                    props: {
                        callback: resolve,
                        communityArr: this.communityArr,
                        communityTre: this.communityTre,
                        data: row,
                        todo
                    },
                    title: title
                });
            }).then(() => {
                this.mixins_search();
            });
        },
        deleteOne(id) {
            this.$msgBox(`删除`, '删除后将无法恢复，请问是否继续?')
                .then(() => {
                    this.$http.get('/sc-community/patrol/point/delete', { id: id }).then(({ status, data, msg }) => {
                        if (0 === status) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.mixins_search();
                        }
                    });
                })
                .catch(() => {});
        }
    }
};
</script>
<style scoped lang='scss'>
.QRImg > div {
    position: absolute;
    width: 100%;
    bottom: 0;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
}
</style>