|
|
<template>
|
|
|
<div class="app-container">
|
|
|
<el-row :gutter="20">
|
|
|
<!--左侧部门数据-->
|
|
|
<el-col :span="6" :xs="24">
|
|
|
<div class="head-container">
|
|
|
<el-input
|
|
|
v-model="deptName"
|
|
|
placeholder="请输入计量设备名称"
|
|
|
clearable
|
|
|
size="small"
|
|
|
prefix-icon="el-icon-search"
|
|
|
style="margin-bottom: 20px"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="head-container tree">
|
|
|
<el-tree
|
|
|
:data="deptOptions"
|
|
|
:props="defaultProps"
|
|
|
:expand-on-click-node="false"
|
|
|
:filter-node-method="filterNode"
|
|
|
ref="tree"
|
|
|
node-key="id"
|
|
|
:default-expanded-keys="[deptOptions[0].id]"
|
|
|
highlight-current
|
|
|
@node-click="handleNodeClick"
|
|
|
/>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<!--右侧用户数据-->
|
|
|
<el-col :span="18" :xs="24">
|
|
|
<!--头部搜索条件输入框 -->
|
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
<el-form-item label="采集时间">
|
|
|
<el-date-picker
|
|
|
v-model="dateRangeone"
|
|
|
style="width: 240px"
|
|
|
type="datetime"
|
|
|
placeholder="选择日期时间"
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
></el-date-picker>
|
|
|
</el-form-item>
|
|
|
<el-form-item><div>-</div></el-form-item>
|
|
|
<el-form-item><el-date-picker
|
|
|
v-model="dateRangetwo"
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
style="width: 240px"
|
|
|
type="datetime"
|
|
|
placeholder="选择日期时间"
|
|
|
></el-date-picker></el-form-item>
|
|
|
<el-form-item label="采集方式" prop="status">
|
|
|
<el-select
|
|
|
v-model="queryParams.collectType"
|
|
|
placeholder="请选择"
|
|
|
clearable
|
|
|
style="width: 240px"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="dict in dict"
|
|
|
:key="dict.value"
|
|
|
:label="dict.label"
|
|
|
:value="dict.value"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="记录时间">
|
|
|
<el-date-picker
|
|
|
v-model="daterangeRecordTime"
|
|
|
style="width: 340px"
|
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
|
type="datetimerange"
|
|
|
range-separator="-"
|
|
|
start-placeholder="开始时间"
|
|
|
end-placeholder="结束时间"
|
|
|
></el-date-picker>
|
|
|
</el-form-item>
|
|
|
<!-- 搜索、重置按钮 -->
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<!-- 新增等功能按钮 -->
|
|
|
<el-row :gutter="10" class="mb8">
|
|
|
<el-col :span="1.5">
|
|
|
<el-button
|
|
|
type="danger"
|
|
|
plain
|
|
|
icon="el-icon-delete"
|
|
|
size="mini"
|
|
|
:disabled="multiple"
|
|
|
@click="handleDelete"
|
|
|
v-hasPermi="['record:dnbInstant:remove']"
|
|
|
>删除</el-button>
|
|
|
</el-col>
|
|
|
<el-col :span="1.5">
|
|
|
<el-button
|
|
|
type="warning"
|
|
|
plain
|
|
|
icon="el-icon-download"
|
|
|
size="mini"
|
|
|
@click="handleExport"
|
|
|
>导出</el-button>
|
|
|
</el-col>
|
|
|
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>-->
|
|
|
</el-row>
|
|
|
<!-- 用户表格 -->
|
|
|
<el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
|
|
|
<el-table-column type="selection" width="50" align="center" />
|
|
|
<el-table-column label="计量设备编号" align="center" key="monitorId" prop="monitorId" v-if="columns[0].visible" width="100"/>
|
|
|
<el-table-column label="计量设备名称" align="center" key="monitorName" prop="monitorName" v-if="columns[1].visible" width="100" :show-overflow-tooltip="true" />
|
|
|
<el-table-column label="采集时间" align="center" key="collectTime" prop="collectTime" v-if="columns[2].visible" width="160"/>
|
|
|
<el-table-column label="A项电压(V)" align="center" key="va" prop="va" v-if="columns[3].visible" width="90"/>
|
|
|
<el-table-column label="B项电压(V)" align="center" key="vb" prop="vb" v-if="columns[4].visible" width="90"/>
|
|
|
<el-table-column label="C项电压(V)" align="center" key="vc" prop="vc" v-if="columns[5].visible" width="90"/>
|
|
|
<el-table-column label="A项电流(A)" align="center" key="ia" prop="ia" v-if="columns[6].visible" width="90"/>
|
|
|
<el-table-column label="B项电流(A)" align="center" key="ib" prop="ib" v-if="columns[7].visible" width="90"/>
|
|
|
<el-table-column label="C项电流(A)" align="center" key="ic" prop="ic" v-if="columns[8].visible" width="90"/>
|
|
|
<el-table-column label="功率因数" align="center" key="glys" prop="glys" v-if="columns[9].visible" width="90"/>
|
|
|
<el-table-column label="仪表值(kW·h)" align="center" key="zxyg" prop="zxyg" v-if="columns[10].visible" width="100"/>
|
|
|
<el-table-column label="采集方式" align="center" key="collectType" prop="collectType" v-if="columns[11].visible" :show-overflow-tooltip="true" >
|
|
|
<template slot-scope="scope1">
|
|
|
<div>{{scope1.row.collectType==0?'手动':(scope1.row.collectType==1?'自动':'抄表') }}</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="记录时间" align="center" prop="recordTime" v-if="columns[12].visible" width="160">
|
|
|
<template slot-scope="scope">
|
|
|
<span>{{ parseTime(scope.row.recordTime) }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
|
|
|
<!-- 分页 -->
|
|
|
<pagination
|
|
|
v-show="total>0"
|
|
|
:total="total"
|
|
|
:page.sync="queryParams.pageNum"
|
|
|
:limit.sync="queryParams.pageSize"
|
|
|
@pagination="getList"
|
|
|
/>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { listUser, treeDat,delDnbRemoveInstant,deptTreeSelect } from "@/api/ems/powerUse/HistoryElectricity";
|
|
|
import { getToken } from "@/utils/auth";
|
|
|
import Treeselect from "@riophae/vue-treeselect";
|
|
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
name: "User",
|
|
|
dicts: ['sys_normal_disable', 'sys_user_sex'],
|
|
|
components: { Treeselect },
|
|
|
data() {
|
|
|
return {
|
|
|
// 遮罩层
|
|
|
loading: true,
|
|
|
// 选中数组
|
|
|
ids: [],
|
|
|
// 非单个禁用
|
|
|
single: true,
|
|
|
// 非多个禁用
|
|
|
multiple: true,
|
|
|
// 显示搜索条件
|
|
|
showSearch: true,
|
|
|
// 总条数
|
|
|
total: 0,
|
|
|
// 用户表格数据
|
|
|
userList: null,
|
|
|
// 弹出层标题
|
|
|
title: "",
|
|
|
// 部门树选项
|
|
|
deptOptions: [{id: 2}],
|
|
|
// 是否显示弹出层
|
|
|
open: false,
|
|
|
// 部门名称
|
|
|
deptName: undefined,
|
|
|
// 默认密码
|
|
|
initPassword: undefined,
|
|
|
// 日期范围
|
|
|
dateRange: [],
|
|
|
dateRangeone:'',
|
|
|
dateRangetwo:'',
|
|
|
// 岗位选项
|
|
|
postOptions: [],
|
|
|
// 角色选项
|
|
|
roleOptions: [],
|
|
|
// 表单参数
|
|
|
form: {},
|
|
|
defaultProps: {
|
|
|
children: "children",
|
|
|
label: "lable"
|
|
|
},
|
|
|
// 用户导入参数
|
|
|
upload: {
|
|
|
// 是否显示弹出层（用户导入）
|
|
|
open: false,
|
|
|
// 弹出层标题（用户导入）
|
|
|
title: "",
|
|
|
// 是否禁用上传
|
|
|
isUploading: false,
|
|
|
// 是否更新已经存在的用户数据
|
|
|
updateSupport: 0,
|
|
|
// 设置上传的请求头部
|
|
|
headers: { Authorization: "Bearer " + getToken() },
|
|
|
// 上传的地址
|
|
|
url: process.env.VUE_APP_BASE_API + "/system/user/importData"
|
|
|
},
|
|
|
// 查询参数
|
|
|
queryParams: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
orderByColumn: 'collectTime',
|
|
|
isAsc: 'desc',
|
|
|
collectType: '',
|
|
|
monitorSubset:'',
|
|
|
params:{
|
|
|
beginCollectTime:'',
|
|
|
endCollectTime:''
|
|
|
}
|
|
|
},
|
|
|
daterangeRecordTime: [],
|
|
|
// 列信息
|
|
|
columns: [
|
|
|
{ key: 0, label: `计量设备编号`, visible: true },
|
|
|
{ key: 1, label: `计量设备名称`, visible: true },
|
|
|
{ key: 2, label: `采集时间`, visible: true },
|
|
|
{ key: 3, label: `A项电压(V)`, visible: true },
|
|
|
{ key: 4, label: `B项电压(V)`, visible: true },
|
|
|
{ key: 5, label: `C项电压(V)`, visible: true },
|
|
|
{ key: 6, label: `A项电流(A)`, visible: true },
|
|
|
{ key: 7, label: `B项电流(A)`, visible: true },
|
|
|
{ key: 8, label: `C项电流(A)`, visible: true },
|
|
|
{ key: 9, label: `功率因数`, visible: true },
|
|
|
{ key: 10, label: `仪表值(kW·h)`, visible: true },
|
|
|
{ key: 11, label: `采集方式`, visible: true },
|
|
|
{ key: 12, label: `记录时间`, visible: true }
|
|
|
|
|
|
],
|
|
|
// 表单校验
|
|
|
rules: {
|
|
|
userName: [
|
|
|
{ required: true, message: "用户名称不能为空", trigger: "blur" },
|
|
|
{ min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
|
|
|
],
|
|
|
nickName: [
|
|
|
{ required: true, message: "用户昵称不能为空", trigger: "blur" }
|
|
|
],
|
|
|
password: [
|
|
|
{ required: true, message: "用户密码不能为空", trigger: "blur" },
|
|
|
{ min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
|
|
|
],
|
|
|
email: [
|
|
|
{
|
|
|
type: "email",
|
|
|
message: "请输入正确的邮箱地址",
|
|
|
trigger: ["blur", "change"]
|
|
|
}
|
|
|
],
|
|
|
phonenumber: [
|
|
|
{
|
|
|
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
|
|
message: "请输入正确的手机号码",
|
|
|
trigger: "blur"
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
//采集方式
|
|
|
dict:[
|
|
|
{label:'手动',value:'0'},
|
|
|
{label:'自动',value:'1'},
|
|
|
{label:'抄表',value:'2'},
|
|
|
],
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
// 根据名称筛选部门树
|
|
|
deptName(val) {
|
|
|
this.$refs.tree.filter(val);
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.dateRangeone=new Date(new Date().setHours(0, 0, 0, 0));
|
|
|
var d = new Date(this.dateRangeone);
|
|
|
let m = ('0'+(d.getMonth()+1)).slice(-2);;
|
|
|
let tian = ('0'+d.getDate()).slice(-2);
|
|
|
let h = ('0'+d.getHours()).slice(-2);
|
|
|
let M = ('0'+d.getMinutes()).slice(-2);
|
|
|
let s = ('0'+d.getSeconds()).slice(-2);
|
|
|
|
|
|
console.log('d',d)
|
|
|
this.dateRangeone = d.getFullYear()+ '-'+m+ '-'+tian+ ' '+ h+ ':'+M+':'+s;
|
|
|
this.dateRangetwo=new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1);
|
|
|
var d1 = new Date(this.dateRangetwo);
|
|
|
let m1 = ('0'+(d1.getMonth()+1)).slice(-2);
|
|
|
let tian1 = ('0'+d1.getDate()).slice(-2);
|
|
|
let h1 = ('0'+d1.getHours()).slice(-2);
|
|
|
let M1 = ('0'+d1.getMinutes()).slice(-2);
|
|
|
let s1 = ('0'+d1.getSeconds()).slice(-2);
|
|
|
console.log('tian1.length',tian1)
|
|
|
this.dateRangetwo = d1.getFullYear()+ '-'+m1+ '-'+tian1+ ' '+ h1+ ':'+M1+':'+s1;
|
|
|
//this.dateRangetwo = d1.getFullYear()+ '-'+m1+ '-'+tian1+ ' '+ h1+ ':'+M1+':'+s1;
|
|
|
|
|
|
this.getList();
|
|
|
this.getDeptTree();
|
|
|
|
|
|
},
|
|
|
mounted() {
|
|
|
},
|
|
|
methods: {
|
|
|
/** 查询用户列表 */
|
|
|
getList() {
|
|
|
this.loading = true;
|
|
|
this.queryParams.params = {};
|
|
|
this.queryParams.params.beginCollectTime = this.dateRangeone;
|
|
|
this.queryParams.params.endCollectTime = this.dateRangetwo;
|
|
|
if (null != this.daterangeRecordTime && '' != this.daterangeRecordTime) {
|
|
|
this.queryParams.params["beginRecordTime"] = this.daterangeRecordTime[0];
|
|
|
this.queryParams.params["endRecordTime"] = this.daterangeRecordTime[1];
|
|
|
}
|
|
|
console.log('this.datatimeone',this.queryParams)
|
|
|
listUser(this.queryParams).then(response => {
|
|
|
this.userList = response.rows;
|
|
|
this.total = response.total;
|
|
|
this.loading = false;
|
|
|
}
|
|
|
);
|
|
|
},
|
|
|
//数组转树形结构
|
|
|
tranListToTreeData(list) {
|
|
|
// 最终要产出的树状数据的数组
|
|
|
const treeList = []
|
|
|
// 所有项都使用对象存储起来
|
|
|
const map = {}
|
|
|
|
|
|
// 建立一个映射关系：通过id快速找到对应的元素
|
|
|
list.forEach(item => {
|
|
|
if (!item.children) {
|
|
|
item.children = []
|
|
|
}
|
|
|
map[item.id] = item
|
|
|
})
|
|
|
|
|
|
list.forEach(item => {
|
|
|
// 对于每一个元素来说，先找它的上级
|
|
|
// 如果能找到，说明它有上级，则要把它添加到上级的children中去
|
|
|
// 如果找不到，说明它没有上级，直接添加到 treeList
|
|
|
const parent = map[item.pId]
|
|
|
// 如果存在则表示item不是最顶层的数据
|
|
|
if (parent) {
|
|
|
parent.children.push(item)
|
|
|
} else {
|
|
|
// 如果不存在 则是顶层数据
|
|
|
treeList.push(item)
|
|
|
}
|
|
|
})
|
|
|
// 返回出去
|
|
|
return treeList
|
|
|
},
|
|
|
/** 真查询部门下拉树结构 */
|
|
|
getDeptTree() {
|
|
|
treeDat().then(response => {
|
|
|
response.map((item,index)=>{
|
|
|
item,
|
|
|
item.oid=item.id,
|
|
|
item.lable = item.name
|
|
|
})
|
|
|
this.deptOptions = this.tranListToTreeData(response);
|
|
|
});
|
|
|
},
|
|
|
// 筛选节点
|
|
|
filterNode(value, data) {
|
|
|
if (!value) return true;
|
|
|
return data.lable.indexOf(value) !== -1;
|
|
|
},
|
|
|
// 节点单击事件
|
|
|
handleNodeClick(data) {
|
|
|
this.queryParams.monitorSubset = data.monitorId;
|
|
|
this.getList();
|
|
|
},
|
|
|
// 取消按钮
|
|
|
cancel() {
|
|
|
this.open = false;
|
|
|
this.reset();
|
|
|
},
|
|
|
/** 删除按钮操作 */
|
|
|
handleDelete(row) {
|
|
|
const objids = row.objid || this.ids;
|
|
|
this.$modal.confirm('是否确认删除电实时数据编号为"' + objids + '"的数据项？').then(function() {
|
|
|
return delDnbRemoveInstant(objids)
|
|
|
}) .then(() => {
|
|
|
this.getList()
|
|
|
this.$modal.msgSuccess('删除成功')
|
|
|
}).catch(() => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
// 表单重置
|
|
|
reset() {
|
|
|
this.form = {
|
|
|
userId: undefined,
|
|
|
deptId: undefined,
|
|
|
userName: undefined,
|
|
|
nickName: undefined,
|
|
|
password: undefined,
|
|
|
phonenumber: undefined,
|
|
|
email: undefined,
|
|
|
sex: undefined,
|
|
|
status: "0",
|
|
|
remark: undefined,
|
|
|
postIds: [],
|
|
|
roleIds: []
|
|
|
};
|
|
|
this.resetForm("form");
|
|
|
},
|
|
|
/** 搜索按钮操作 */
|
|
|
handleQuery() {
|
|
|
this.queryParams.pageNum = 1;
|
|
|
this.getList();
|
|
|
},
|
|
|
/** 重置按钮操作 */
|
|
|
resetQuery() {
|
|
|
//this.dateRange = [];
|
|
|
this.queryParams.collectType = '';
|
|
|
this.dateRangeone = '';
|
|
|
this.dateRangetwo = '';
|
|
|
this.resetForm("queryForm");
|
|
|
//this.queryParams.deptId = undefined;
|
|
|
//this.$refs.tree.setCurrentKey(null);
|
|
|
this.handleQuery();
|
|
|
},
|
|
|
// 多选框选中数据
|
|
|
handleSelectionChange(selection) {
|
|
|
this.ids = selection.map(item => item.objid)
|
|
|
this.single = selection.length!==1
|
|
|
this.multiple = !selection.length
|
|
|
},
|
|
|
// 更多操作触发
|
|
|
handleCommand(command, row) {
|
|
|
switch (command) {
|
|
|
case "handleResetPwd":
|
|
|
this.handleResetPwd(row);
|
|
|
break;
|
|
|
case "handleAuthRole":
|
|
|
this.handleAuthRole(row);
|
|
|
break;
|
|
|
default:
|
|
|
break;
|
|
|
}
|
|
|
},
|
|
|
|
|
|
/** 导出按钮操作 */
|
|
|
handleExport() {
|
|
|
let paramsexport = JSON.parse(JSON.stringify(this.queryParams));
|
|
|
delete paramsexport.pageSize;
|
|
|
delete paramsexport.pageNum;
|
|
|
this.download('/ems/record/dnbInstant/export', {
|
|
|
...paramsexport
|
|
|
}, `historyElectricity_${new Date().getTime()}.xlsx`)
|
|
|
},
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.tree {
|
|
|
width:220px;
|
|
|
::v-deep .el-tree-node {
|
|
|
white-space: normal;//关键代码!!!!!!!!!
|
|
|
.el-tree-node__content {
|
|
|
height: 100%;
|
|
|
align-items: start;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|