SmartCommunity/energyManagement/src/views/instrumentManagement/electricityMeter.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-select v-model="mixins_query.useType" placeholder="选择用途" clearable>
                <el-option label="房间表" :value="1"></el-option>
                <el-option label="公摊表" :value="2"></el-option>
            </el-select>
            <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-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-guan" @click="exportExcel"></i>
                </el-tooltip>
                <el-tooltip class="item" effect="light" placement="bottom" content="开阀">
                    <i class="zoniot_font zoniot-icon-kai" @click="exportExcel"></i>
                </el-tooltip>
                <el-tooltip class="item" effect="light" placement="bottom" content="删除">
                    <i class="iconfont" @click="deluserbyidFn()">&#xe63b;</i>
                </el-tooltip>
                <el-tooltip class="item" effect="light" placement="bottom" content="导出">
                    <i class="zoniot_font zoniot-icon-daochu2" @click="exportExcel"></i>
                </el-tooltip>

                <el-dropdown type="primary" @command="addCommand">
                    <span class="iconfont">&#xe641;</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 }"
                :loading="mixins_onQuery"
                :data="mixins_list"
                :pageset="mixins_pageset"
                @page-change="pageChange"
                @selection-change="selectionChange"
            >
                <template slot-scope="scope" slot="opt">
                    <div class="opt">
                        <el-tooltip class="item" effect="light" placement="bottom" content="查看">
                            <i class="zoniot_font zoniot-icon-xiangqing" @click="lookPage(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="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>
                    </div>
                </template>
            </zz-table>
        </div>
    </div>
</template>

<script>
import list from '@utils/list.js';
export default {
    mixins: [list],
    data() {
        return {
            selectRow: [],
            // 数据列表
            deviceStatus: [
                {
                    status: 1,
                    label: '正常'
                },
                {
                    status: 2,
                    label: '告警'
                },
                {
                    status: 3,
                    label: '离线'
                },
                {
                    status: 4,
                    label: '未启用'
                },
                {
                    status: 5,
                    label: '报废'
                }
            ],
            cols: [
                {
                    label: '所属社区',
                    prop: 'communityName'
                },
                {
                    label: '地址',
                    prop: 'address'
                },
                {
                    label: '设备编号',
                    prop: 'deviceNo'
                },
                {
                    label: '设备名称',
                    prop: 'deviceName'
                },
                {
                    label: '用途',
                    prop: 'useType',
                    format(val, data) {
                        return val == 1 ? '房间表' : '公摊表';
                    }
                },
                {
                    label: '当前读数',
                    prop: 'readData'
                },

                {
                    label: '设备状态',
                    prop: 'deviceStatus',
                    format(val, data) {
                        switch (val) {
                            case 1:
                                return '正常';
                            case 2:
                                return '告警';
                            case 3:
                                return '离线';
                            case 4:
                                return '未启用';
                            case 5:
                                return '报废';
                            default:
                                return '-';
                        }
                    }
                },
                {
                    label: '电闸状态',
                    prop: 'valveStatus',
                    format(val, data) {
                        switch (val) {
                            case 0:
                                return '关';
                            case 1:
                                return '开';
                            case 2:
                                return '无闸';
                            default:
                                return '-';
                        }
                    }
                },
                {
                    label: '最后上报时间',
                    prop: 'lastReceiveTime'
                },
                {
                    label: '操作',
                    prop: 'id',
                    slot: 'opt'
                }
            ],
            mixins_post: 'get',
            productOptions: [],
            defaultProps: {
                value: 'id', // 唯一标识
                label: 'label', // 标签显示
                children: 'children' // 子级
            },
            viewParams: {},
            communityArr: []
        };
    },
    created() {
        this.getorgTree();
        this.mixins_dataUrl = '/sc-energy/device/getPage';
        this.mixins_query = {
            categoryId: 2
        };
        this.mixins_search();
    },
    mounted() {
        this.getProductOptions();
    },
    methods: {
        getorgTree() {
            this.$http
                .get('/sc-community/assets/community/list')
                .then((data) => {
                    this.communityArr = data.data;
                    this.$store.commit('setAreaSelect', data.data);
                })

                .catch(function () {});
        },
        deluserbyidFn(id) {
            let ids = [];
            if (!this.selectRow.length) {
                this.$message.error('您尚未选择要删除的记录，请选择后再操作批量删除');
                return;
            }
            this.selectRow.forEach((v) => {
                ids.push(v.id);
            });

            const h = this.$createElement;
            this.$msgBox(`删除`, '删除后将无法恢复，请问是否继续?')
                .then(() => {
                    this.$http.post('/sc-energy/device/batchDelete', ids).then(({ status, data, msg }) => {
                        if (0 === status) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.mixins_search();
                        }
                    });
                })
                .catch(() => {});
        },
        Scrap(id) {
            this.$msgBox(`确认提示`, '设备报废后将无法正常接收数据，请问是否继续?')
                .then(() => {
                    this.$http.post('/sc-energy/device/edit/status', { id: id, deviceStatus: 5 }).then(({ status, data, msg }) => {
                        if (0 === status) {
                            this.$message({
                                type: 'success',
                                message: '报废成功!'
                            });
                            this.mixins_search();
                        }
                    });
                })
                .catch(() => {});
        },
        addOrEdit(todo, data = {}) {
            new Promise((resolve) => {
                let title = '添加电表';
                if (todo !== 'add') {
                    title = '修改电表';
                }
                this.$store.dispatch('addPopup', {
                    url: '/instrumentManagement/popups/addDeviceManagement.vue',
                    width: '500px',
                    height: '490px',
                    props: {
                        data,
                        todo,
                        mixins_query: this.mixins_query,
                        productOptions: this.productOptions,
                        callback: resolve
                    },
                    title: title
                });
            }).then(() => {
                this.mixins_search();
            });
        },
        addCommand(command) {
            if (command === 'add') {
                this.addOrEdit('add');
            }
            if (command === 'template') {
                this.__exportExcel('/sc-energy/device/downTemplate', { categoryId: 2 });
                return;
            }
        },
        exportExcel() {
            this.__exportExcel('/sc-energy/device/getDeviceExcel', this.mixins_query);
        },
        selectionChange(val) {
            this.selectRow = val;
        },
        getProductOptions() {
            this.$http.postForm('/sc-energy/product/tree', { categoryId: 2 }).then((data) => {
                this.productOptions = data;
            });
        },
        valveToggle(satus) {
            if (!this.selectRow.length) {
                this.$message.error('您尚未选择要操作的记录，请选择后再操作');
                return;
            } else if (this.selectRow.length > 1) {
                this.$message.error('请选择单条数据操作');
                return;
            }

            this.$http
                .post('/sc-energy/api/valveControl', {
                    categoryId: this.mixins_query.categoryId,
                    valveStatus: satus,
                    houseId: this.selectRow[0].houseId
                })
                .then(({ status, data, msg }) => {
                    if (status === 0) {
                        this.$message.success(msg);
                        this.mixins_search();
                    } else {
                        this.$message.error(msg);
                    }
                });
        },
        lookPage(row) {
            this.$router.push({
                path: '/instrumentViewDetail',
                query: {
                    id: row.id,
                    type: this.mixins_query.categoryId
                }
            });
        }
    }
};
</script>