|
|
@@ -1,252 +1,364 @@
|
|
|
-<!--
|
|
|
- * @Author: zwy
|
|
|
- * @Date: 2021-01-30 16:14:28
|
|
|
- * @LastEditors: zwy
|
|
|
- * @LastEditTime: 2021-04-27 11:09:07
|
|
|
- * @Descripttion: 工作流管理
|
|
|
--->
|
|
|
<template>
|
|
|
- <div class="workflow">
|
|
|
- <div class="flow-content">
|
|
|
- <div class="search">
|
|
|
- <el-input placeholder="请输入流程名称" class="search-input" v-model.trim="mixins_query.name"></el-input>
|
|
|
- <el-button type="primary" placeholder="状态" class="search-btn" @click="mixins_search" icon="el-icon-search"
|
|
|
- >查询
|
|
|
- </el-button>
|
|
|
+ <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">{{
|
|
|
+ item.label
|
|
|
+ }}</el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-cascader
|
|
|
+ v-model="productIds"
|
|
|
+ :options="productOptions"
|
|
|
+ :props="defaultProps"
|
|
|
+ clearable
|
|
|
+ placeholder="设备类型"
|
|
|
+ @change="productChange($event)"
|
|
|
+ >
|
|
|
+ </el-cascader>
|
|
|
+ <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="addOrEdit('add')"></i>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
+ <div class="search-icon">
|
|
|
+ <el-tooltip class="item" effect="light" placement="bottom" content="删除">
|
|
|
+ <i class="iconfont" @click="deluserbyidFn()"></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="{ showIndex: true }"
|
|
|
+ :settings="{ showCheckbox: true, showIndex: true, stripe: true }"
|
|
|
+ :loading="mixins_onQuery"
|
|
|
+ :data="mixins_list"
|
|
|
:pageset="mixins_pageset"
|
|
|
@page-change="pageChange"
|
|
|
- :data="mixins_list"
|
|
|
- :loading="mixins_onQuery"
|
|
|
+ @selection-change="selectionChange"
|
|
|
>
|
|
|
- <template slot-scope="scope" slot="status">
|
|
|
- <p v-if="scope.row.processStatus == 2">启用</p>
|
|
|
- <p v-else style="color: #d8d8d8">未启用</p>
|
|
|
+ <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="设计">
|
|
|
- <i class="zoniot_font zoniot-icon-liucheng1" @click="workflowSetting(scope.index)"></i>
|
|
|
- </el-tooltip>
|
|
|
- <el-tooltip effect="light" placement="bottom" content="部署">
|
|
|
- <i class="zoniot_font zoniot-icon-fabu1" @click="dispose(scope.row.id)"></i>
|
|
|
- </el-tooltip>
|
|
|
<el-tooltip effect="light" placement="bottom" content="编辑">
|
|
|
- <i class="zoniot_font zoniot-icon-bianji" @click="addOrEdit('edit', scope.index)"></i>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
-var taskTypeList = [];
|
|
|
import list from '@utils/list.js';
|
|
|
+import html2canvas from 'html2canvas';
|
|
|
export default {
|
|
|
mixins: [list],
|
|
|
- name: 'flowManagement',
|
|
|
+ name: 'deviceManagement',
|
|
|
data() {
|
|
|
+ let _this = this;
|
|
|
return {
|
|
|
- currentId: '',
|
|
|
- cols: [
|
|
|
+ selectRow: [],
|
|
|
+ // 数据列表
|
|
|
+ deviceStatus: [
|
|
|
{
|
|
|
- label: '名称',
|
|
|
- prop: 'processName'
|
|
|
+ status: 1,
|
|
|
+ label: '正常'
|
|
|
},
|
|
|
{
|
|
|
- label: '描述',
|
|
|
- prop: 'processDesc'
|
|
|
+ status: 2,
|
|
|
+ label: '告警'
|
|
|
},
|
|
|
{
|
|
|
- label: '业务类型',
|
|
|
- prop: 'businessType',
|
|
|
+ status: 3,
|
|
|
+ label: '离线'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ status: 4,
|
|
|
+ label: '未启用'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ status: 5,
|
|
|
+ label: '报废'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ cols: [
|
|
|
+ {
|
|
|
+ label: '所属社区',
|
|
|
+ prop: 'communityId',
|
|
|
format(val) {
|
|
|
- let arr = ['', '安保巡更', '设备巡检', '运维工单'];
|
|
|
- return arr[val];
|
|
|
+ let va = '';
|
|
|
+ _this.$store.getters['getAreaSelect'].forEach((element) => {
|
|
|
+ if (element.id === val) {
|
|
|
+ va = element.communityName;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return va;
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
- label: '任务类型',
|
|
|
- prop: 'taskType',
|
|
|
+ label: '设备类型',
|
|
|
+ prop: 'deviceTypeName'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '设备编号',
|
|
|
+ prop: 'deviceNo'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '设备名称',
|
|
|
+ prop: 'deviceName'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '设备地址',
|
|
|
+ prop: 'address'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '添加日期',
|
|
|
+ prop: 'createDate'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '设备状态',
|
|
|
+ prop: 'deviceStatus',
|
|
|
format(val) {
|
|
|
- let typeName = '',
|
|
|
- isObj = taskTypeList.filter((item) => item.dictCode == val)[0];
|
|
|
- if (!!isObj) {
|
|
|
- typeName = isObj.dictValue;
|
|
|
+ if (val == '1') {
|
|
|
+ return '正常';
|
|
|
+ } else if (val == '2') {
|
|
|
+ return '告警';
|
|
|
+ } else if (val == '3') {
|
|
|
+ return '离线';
|
|
|
+ } else if (val == '4') {
|
|
|
+ return '未启用';
|
|
|
+ } else if (val == '5') {
|
|
|
+ return '报废';
|
|
|
}
|
|
|
- return typeName;
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
- label: '创建时间',
|
|
|
- prop: 'dateCreate'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '状态',
|
|
|
- slot: 'status'
|
|
|
+ label: '二维码',
|
|
|
+ prop: 'deviceQrcode',
|
|
|
+ slot: 'deviceQrcode'
|
|
|
},
|
|
|
{
|
|
|
label: '操作',
|
|
|
- width: 200,
|
|
|
- slot: 'opt'
|
|
|
+ prop: 'id',
|
|
|
+ slot: 'opt',
|
|
|
+ width: 150
|
|
|
}
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ mixins_post: 'post',
|
|
|
+ productOptions: [],
|
|
|
+ defaultProps: {
|
|
|
+ value: 'id', // 唯一标识
|
|
|
+ label: 'label', // 标签显示
|
|
|
+ children: 'children' // 子级
|
|
|
+ },
|
|
|
+ centerDialogVisible: false,
|
|
|
+ QRImg: '',
|
|
|
+ DeviceName: '',
|
|
|
+ deviceNo: ''
|
|
|
};
|
|
|
},
|
|
|
+ created() {
|
|
|
+ if (this.$store.getters['getAreaSelect'].length === 0) {
|
|
|
+ this.getorgTree();
|
|
|
+ }
|
|
|
+ this.mixins_dataUrl = '/sc-community/device/page';
|
|
|
+ this.mixins_query = {};
|
|
|
+ this.mixins_search();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getProductOptions();
|
|
|
+ },
|
|
|
methods: {
|
|
|
- // 流程设计
|
|
|
- workflowSetting(index) {
|
|
|
- new Promise((resolve) => {
|
|
|
- let row;
|
|
|
- row = this.mixins_list[index] || {};
|
|
|
- this.$store.dispatch('openModal', {
|
|
|
- url: '/flow/popups/workflowsetting.vue',
|
|
|
- title: row.processName,
|
|
|
- width: '1500px',
|
|
|
- height: '806px',
|
|
|
- notip: true,
|
|
|
- props: {
|
|
|
- data: row,
|
|
|
- // todo: todo,
|
|
|
- callback: resolve
|
|
|
- }
|
|
|
+ productChange(va) {
|
|
|
+ this.mixins_query.productId = _.last(va);
|
|
|
+ },
|
|
|
+ getorgTree() {
|
|
|
+ this.$http
|
|
|
+ .get('/sc-community/assets/community/list')
|
|
|
+ .then((data) => {
|
|
|
+ this.$store.commit('setAreaSelect', data.data);
|
|
|
+ })
|
|
|
+
|
|
|
+ .catch(function () {});
|
|
|
+ },
|
|
|
+ deluserbyidFn(id) {
|
|
|
+ let ids = [];
|
|
|
+ if (!!id) {
|
|
|
+ ids = [id];
|
|
|
+ } else {
|
|
|
+ if (!this.selectRow.length) {
|
|
|
+ this.$message.error('您尚未选择要删除的记录，请选择后再操作批量删除');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.selectRow.forEach((v) => {
|
|
|
+ ids.push(v.id);
|
|
|
});
|
|
|
- }).then(() => {
|
|
|
- this.mixins_search();
|
|
|
+ }
|
|
|
+
|
|
|
+ const h = this.$createElement;
|
|
|
+ this.$msgBox(`删除`, '删除后将无法恢复，请问是否继续?')
|
|
|
+ .then(() => {
|
|
|
+ this.$http.post('/sc-community/device/delete', 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-community/device/deviceScrapInterface', { id: id, deviceStatus: 5 })
|
|
|
+ .then(({ status, data, msg }) => {
|
|
|
+ if (0 === status) {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '报废成功!'
|
|
|
+ });
|
|
|
+ this.mixins_search();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .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;
|
|
|
});
|
|
|
},
|
|
|
- currentOrganId(data) {
|
|
|
- this.currentId = data || '';
|
|
|
+ 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, index) {
|
|
|
+ addOrEdit(todo, data = {}) {
|
|
|
new Promise((resolve) => {
|
|
|
- let row,
|
|
|
- title = '编辑流程';
|
|
|
- if ('add' == todo) {
|
|
|
- title = '新增流程';
|
|
|
- } else {
|
|
|
- row = this.mixins_list[index] || {};
|
|
|
- row = JSON.parse(JSON.stringify(row));
|
|
|
+ let title = '添加设备';
|
|
|
+ if (todo !== 'add') {
|
|
|
+ title = '修改设备';
|
|
|
}
|
|
|
- this.$store.dispatch('openModal', {
|
|
|
- url: '/flow/popups/AddOrEdit.vue',
|
|
|
- title: title,
|
|
|
- width: todo == 'add' ? '800px' : '500px',
|
|
|
- height: '480px',
|
|
|
+ this.$store.dispatch('addPopup', {
|
|
|
+ url: '/deviceManagement/popups/addDeviceManagement.vue',
|
|
|
+ width: '500px',
|
|
|
+ height: '400px',
|
|
|
props: {
|
|
|
- data: row,
|
|
|
- todo: todo,
|
|
|
+ data,
|
|
|
+ todo,
|
|
|
+ productOptions: this.productOptions,
|
|
|
callback: resolve
|
|
|
- }
|
|
|
+ },
|
|
|
+ title: title
|
|
|
});
|
|
|
}).then(() => {
|
|
|
this.mixins_search();
|
|
|
});
|
|
|
},
|
|
|
- deleteOne(id) {
|
|
|
- this.$msgBox(`刪除流程`, '删除后将无法恢复，请问是否继续?')
|
|
|
- .then(() => {
|
|
|
- this.$http.delete('/sc-community/workflow/process/delete', { id }).then(({ msg, status, data }) => {
|
|
|
- if (status == 0) {
|
|
|
- this.$message.success(msg);
|
|
|
- this.mixins_search();
|
|
|
- } else {
|
|
|
- this.$message.error(msg);
|
|
|
- }
|
|
|
- });
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
+ addCommand(command) {
|
|
|
+ if (command === 'add') {
|
|
|
+ this.addOrEdit('add');
|
|
|
+ }
|
|
|
+ if (command === 'template') {
|
|
|
+ this.__exportExcel('/sc-community/excel/download/template', { importType: 'DEVICE' });
|
|
|
+ return;
|
|
|
+ }
|
|
|
},
|
|
|
- dispose(id) {
|
|
|
- this.$http.get('/sc-community/workflow/process/deploy', { id }).then(({ msg, status, data }) => {
|
|
|
- if (status == 0) {
|
|
|
- this.$message.success(msg);
|
|
|
- this.mixins_search();
|
|
|
- } else {
|
|
|
- this.$message.error(msg);
|
|
|
- }
|
|
|
+ selectionChange(val) {
|
|
|
+ this.selectRow = val;
|
|
|
+ },
|
|
|
+ getProductOptions() {
|
|
|
+ this.$http.postForm('/sc-community/devicetype/selectList', { name: '' }).then((data) => {
|
|
|
+ this.productOptions = data;
|
|
|
});
|
|
|
},
|
|
|
- // 获取工单,任务类型
|
|
|
- getWorkList() {
|
|
|
- this.$api.common.getDictionaryData('SC_SECURITY_PATROL ').then(({ msg, status, data }) => {
|
|
|
- if (status == 0) {
|
|
|
- let item = data;
|
|
|
- this.$api.common.getDictionaryData('SC_EQUIPMENT_INSPECTION').then(({ msg, status, data }) => {
|
|
|
- if (status == 0) {
|
|
|
- taskTypeList = item.concat(data);
|
|
|
- this.$api.common.getDictionaryData('SC_WORK_ORDER_TYPE').then(({ msg, status, data }) => {
|
|
|
- if (status == 0) {
|
|
|
- taskTypeList = taskTypeList.concat(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];
|
|
|
}
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- currentId(newValue, oldValue) {
|
|
|
- this.mixins_query.comunityId = newValue;
|
|
|
- this.mixins_search();
|
|
|
+ }
|
|
|
+ xmlhttp.open('GET', url, true);
|
|
|
+ xmlhttp.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('SC_token'));
|
|
|
+
|
|
|
+ xmlhttp.responseType = 'blob';
|
|
|
+ xmlhttp.onload = function () {
|
|
|
+ success(this.response);
|
|
|
+ };
|
|
|
+ xmlhttp.send();
|
|
|
}
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.getWorkList();
|
|
|
- this.mixins_dataUrl = '/sc-community/workflow/process/getPage';
|
|
|
- this.mixins_post = 'get';
|
|
|
- this.mixins_query = {
|
|
|
- name: '',
|
|
|
- comunityId: ''
|
|
|
- };
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.workflow {
|
|
|
- // display: flex;
|
|
|
- height: 100%;
|
|
|
- .flow-content {
|
|
|
- margin-left: 20px;
|
|
|
- width: calc(100% - 280px);
|
|
|
- float: left;
|
|
|
- .search {
|
|
|
- background: #ffffff;
|
|
|
- height: 60px;
|
|
|
- padding: 16px 20px 14px 20px;
|
|
|
- .search-icon {
|
|
|
- vertical-align: top;
|
|
|
- float: right;
|
|
|
- .fr-fs-fc {
|
|
|
- color: #2787f1;
|
|
|
- font-size: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
- .search-btn {
|
|
|
- height: 30px;
|
|
|
- background: #2787f1;
|
|
|
- border-radius: 4px;
|
|
|
- padding: 9px 8px;
|
|
|
- box-sizing: border-box;
|
|
|
- // line-height: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+<style scoped lang='scss'>
|
|
|
+.QRImg > div {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ bottom: 0;
|
|
|
+ text-align: center;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
Shannon_mu