Yangwl
/
lanju-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update - ems用电实时数据优化

Browse Source
master
yinq 8 months ago
parent 7f0da1e927
commit a751d97141
1 changed files with 146 additions and 190 deletions
Show Stats Download Patch File Download Diff File

336
src/views/energy/powerUse/RealTime/index.vue
Unescape Escape View File

@ -41,84 +41,91 @@
icon="el-icon-download"
size="mini"
@click="handleExport"
>一键秒表</el-button>
>一键秒表
</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" />
<el-table-column label="计量设备名称" align="center" key="monitorName" prop="monitorName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
<el-table-column label="采集时间" align="center" key="collectTime" prop="collectTime" v-if="columns[2].visible" :show-overflow-tooltip="true" />
<el-table-column label="A项电压(V)" align="center" key="va" prop="va" v-if="columns[3].visible" :show-overflow-tooltip="true" />
<el-table-column label="B项电压(V)" align="center" key="vb" prop="vb" v-if="columns[4].visible" width="120" />
<el-table-column label="C项电压(V)" align="center" key="vc" prop="vc" v-if="columns[5].visible" width="120" />
<el-table-column label="A项电流(A)" align="center" key="ia" prop="ia" v-if="columns[6].visible" width="120" />
<el-table-column label="B项电流(A)" align="center" key="ib" prop="ib" v-if="columns[7].visible" width="120" />
<el-table-column label="C项电流(A)" align="center" key="ic" prop="ic" v-if="columns[8].visible" width="120" />
<el-table-column label="功率因数" align="center" key="glys" prop="glys" v-if="columns[9].visible" width="120" />
<el-table-column label="正向有功(kW·h)" align="center" key="zxyg" prop="zxyg" v-if="columns[10].visible" width="120" />
<el-table-column type="selection" width="50" align="center"/>
<el-table-column label="计量设备编号" align="center" key="monitorId" prop="monitorId" v-if="columns[0].visible"/>
<el-table-column label="计量设备名称" align="center" key="monitorName" prop="monitorName" v-if="columns[1].visible"
:show-overflow-tooltip="true"/>
<el-table-column label="采集时间" align="center" key="collectTime" prop="collectTime" v-if="columns[2].visible"
:show-overflow-tooltip="true"/>
<el-table-column label="A项电压(V)" align="center" key="va" prop="va" v-if="columns[3].visible"
:show-overflow-tooltip="true"/>
<el-table-column label="B项电压(V)" align="center" key="vb" prop="vb" v-if="columns[4].visible" width="120"/>
<el-table-column label="C项电压(V)" align="center" key="vc" prop="vc" v-if="columns[5].visible" width="120"/>
<el-table-column label="A项电流(A)" align="center" key="ia" prop="ia" v-if="columns[6].visible" width="120"/>
<el-table-column label="B项电流(A)" align="center" key="ib" prop="ib" v-if="columns[7].visible" width="120"/>
<el-table-column label="C项电流(A)" align="center" key="ic" prop="ic" v-if="columns[8].visible" width="120"/>
<el-table-column label="功率因数" align="center" key="glys" prop="glys" v-if="columns[9].visible" width="120"/>
<el-table-column label="正向有功(kW·h)" align="center" key="zxyg" prop="zxyg" v-if="columns[10].visible"
width="120"/>
<!-- <el-table-column label="有功功率(KW)" align="center" key="activePower" prop="activePower" v-if="columns[11].visible" width="120" />
<el-table-column label="无功功率(Kvar)" align="center" key="reactivePower" prop="reactivePower" v-if="columns[12].visible" width="120" />
<el-table-column label="采集方式" align="center" key="collectType" prop="collectType" v-if="columns[13].visible" width="120" /> -->
</el-table>
<!-- 分页 -->
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- <pagination-->
<!-- v-show="total>0"-->
<!-- :total="total"-->
<!-- :page.sync="queryParams.pageNum"-->
<!-- :limit.sync="queryParams.pageSize"-->
<!-- @pagination="getList"-->
<!-- />-->
<el-card style="margin-top: 30px;" class="box-card">
<el-table v-loading="loading" :data="userListtwo" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="计量设备编号" align="center" key="monitorId" prop="monitorId" />
<el-table-column label="回路计量设备名称" align="center" key="monitorName" prop="monitorName" :show-overflow-tooltip="true" />
<el-table-column label="采集时间" align="center" key="collectTime" prop="collectTime" :show-overflow-tooltip="true" />
<el-table-column label="正向有功(kW·h)" align="center" key="zxyg" prop="zxyg" width="120" />
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getListtwo"
/>
</el-card>
<el-table v-loading="loading" :data="userListtwo" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center"/>
<el-table-column label="计量设备编号" align="center" key="monitorId" prop="monitorId"/>
<el-table-column label="回路计量设备名称" align="center" key="monitorName" prop="monitorName"
:show-overflow-tooltip="true"/>
<el-table-column label="采集时间" align="center" key="collectTime" prop="collectTime"
:show-overflow-tooltip="true"/>
<el-table-column label="正向有功(kW·h)" align="center" key="zxyg" prop="zxyg" width="120"/>
</el-table>
<!-- <pagination-->
<!-- v-show="total>0"-->
<!-- :total="total"-->
<!-- :page.sync="queryParams.pageNum"-->
<!-- :limit.sync="queryParams.pageSize"-->
<!-- @pagination="getListtwo"-->
<!-- />-->
</el-card>
</el-col>
</el-row>
<el-dialog :title="title2" :visible.sync="opentwo" @close="canceltwo" width="400px" append-to-body>
<el-form ref="form" :model="form" label-width="80px">
<el-col>
<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">
<el-tree
:data="deptOptionsselect"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
node-key="id"
show-checkbox
:default-expanded-keys="[2]"
highlight-current
@check-change="handleCheckChange"
/>
</div>
</el-col>
<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">
<el-tree
:data="deptOptionsselect"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
node-key="id"
show-checkbox
:default-expanded-keys="[2]"
highlight-current
@check-change="handleCheckChange"
/>
</div>
</el-col>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFormtwo">确 定</el-button>
@ -129,15 +136,15 @@
</template>
<script>
import { listUser,treeDat, instantLis,editMeterReading } from "@/api/energy/powerUse/RealTime";
import { getToken } from "@/utils/auth";
import {listUser, treeDat, instantLis, editMeterReading} from "@/api/energy/powerUse/RealTime";
import {getToken} from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "User",
dicts: ['sys_normal_disable', 'sys_user_sex'],
components: { Treeselect },
components: {Treeselect},
data() {
return {
// 遮罩层
@ -154,14 +161,14 @@ export default {
total: 0,
// 用户表格数据
userList: null,
userListtwo:null,
userListtwo: null,
// 弹出层标题
title: "",
title2:'',
formadd:{
monitorIds:[],
title2: '',
formadd: {
monitorIds: [],
},
opentwo:false,
opentwo: false,
// 部门树选项
deptOptions: undefined,
deptOptionsselect: undefined,
@ -179,84 +186,40 @@ export default {
roleOptions: [],
// 表单参数
form: {},
params:[],
params: [],
defaultProps: {
children: "children",
label: "name"
},
// 用户导入参数
upload: {
// 是否显示弹出层（用户导入）
open: false,
// 弹出层标题（用户导入）
title: "",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + "/system/user/importData"
},
monitorIddata:'',
monitorIddata: '',
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
orderByColumn: "collectTime",
isAsc: "desc",
monitorSubset:'',
collectType: undefined,
monitorSubset: '',
collectType: '',
params:{beginCollectTime:'',endCollectTime:''}
params: {beginCollectTime: '', endCollectTime: ''}
},
// 列信息
columns: [
{ key: 0, label: `计量设备编号`, visible: true },
{ key: 1, label: `计量设备名称`, visible: true },
{ key: 2, label: `采集时间`, visible: true },
{ key: 3, label: `A项电压(V)`, visible: false },
{ key: 4, label: `B项电压(V)`, visible: false },
{ key: 5, label: `C项电压(V)`, visible: false },
{ key: 6, label: `A项电流(A)`, visible: false },
{ key: 7, label: `B项电流(A)`, visible: false },
{ key: 8, label: `C项电流(A)`, visible: false },
{ key: 9, label: `功率因数`, visible: false },
{ key: 10, label: `正向有功(kW·h)`, visible: true },
{key: 0, label: `计量设备编号`, visible: true},
{key: 1, label: `计量设备名称`, visible: true},
{key: 2, label: `采集时间`, visible: true},
{key: 3, label: `A项电压(V)`, visible: false},
{key: 4, label: `B项电压(V)`, visible: false},
{key: 5, label: `C项电压(V)`, visible: false},
{key: 6, label: `A项电流(A)`, visible: false},
{key: 7, label: `B项电流(A)`, visible: false},
{key: 8, label: `C项电流(A)`, visible: false},
{key: 9, label: `功率因数`, visible: false},
{key: 10, label: `正向有功(kW·h)`, visible: true},
// { key: 11, label: `有功功率(KW)`, visible: true },
// { key: 12, label: `无功功率(Kvar)`, visible: true },
// { key: 13, 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"
}
]
}
};
},
watch: {
@ -287,7 +250,7 @@ export default {
},
getListtwo() {
this.loading = true;
instantLis( {monitorSubset: this.monitorIddata,sortOrder:"asc"}).then(response => {
instantLis({monitorSubset: this.monitorIddata, sortOrder: "asc"}).then(response => {
this.userListtwo = response.rows;
this.total = response.total;
this.loading = false;
@ -301,46 +264,45 @@ export default {
// });
// },
//
tranListToTreeData(list) {
// 最终要产出的树状数据的数组
const treeList = []
// 所有项都使用对象存储起来
const map = {}
tranListToTreeData(list) {
// 最终要产出的树状数据的数组
const treeList = []
// 所有项都使用对象存储起来
const map = {}
// 建立一个映射关系：通过id快速找到对应的元素
list.forEach(item => {
if (!item.children) {
item.children = []
}
map[item.id] = item
})
// 建立一个映射关系：通过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
},
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)=>{
response.map((item, index) => {
item,
item.oid=item.id,
item.lable = item.name
item.oid = item.id,
item.lable = item.name
})
this.deptOptions = this.tranListToTreeData(response);
console.log(this.deptOptions)
});
},
// 筛选节点
@ -364,43 +326,36 @@ export default {
this.opentwo = false;
this.resettwo();
},
resettwo(){
this.formadd={
monitorIds:[]
resettwo() {
this.formadd = {
monitorIds: []
}
},
// 二次弹窗节点单击事件
handleCheckChange(data, checked, indeterminat) {
console.log('data',data, checked, indeterminat);
// this.formadd.deptId = data.label;
//this.monitorIdslist.push(data.monitorId);
if(checked === false){
this.formadd.monitorIds.map((item,index)=>{
if(data.monitorId==item){
// 二次弹窗节点单击事件
handleCheckChange(data, checked, indeterminat) {
if (checked === false) {
this.formadd.monitorIds.map((item, index) => {
if (data.monitorId == item) {
this.formadd.monitorIds.splice(index, 1)
}
})
}else{
this.formadd.monitorIds.push(data.monitorId) ;
} else {
this.formadd.monitorIds.push(data.monitorId);
}
console.log('this.formadd.monitorIds',this.formadd.monitorIds)
// this.handleQuery();
},
//二次弹窗确认按钮
submitFormtwo: function() {
submitFormtwo: function () {
let paramsstr = this.formadd.monitorIds.join('+');
console.log('paramsstr',paramsstr);
editMeterReading({monitorIds:paramsstr}).then(response => {
if(response.msg=== "操作成功"){
editMeterReading({monitorIds: paramsstr}).then(response => {
if (response.msg === "操作成功") {
this.$message({
message: '一键秒表成功',
type: 'success'
});
message: '一键秒表成功',
type: 'success'
});
this.canceltwo();
//this.getList();
}else{
} else {
this.$message.error('一键秒表失败');
}
});
@ -449,10 +404,10 @@ console.log('this.formadd.monitorIds',this.formadd.monitorIds)
handleExport() {
this.reset();
treeDat().then(response => {
response.map((item,index)=>{
response.map((item, index) => {
item,
item.oid=item.id,
item.lable = item.name
item.oid = item.id,
item.lable = item.name
})
this.deptOptionsselect = this.tranListToTreeData(response);
//this.deptOptionsselect = response.data;
@ -465,9 +420,10 @@ console.log('this.formadd.monitorIds',this.formadd.monitorIds)
</script>
<style lang="scss" scoped>
.tree {
width:220px;
::v-deep .el-tree-node {
white-space: normal;//关键代码!!!!!!!!!
width: 220px;
::v-deep .el-tree-node {
white-space: normal; //关键代码!!!!!!!!!
.el-tree-node__content {
height: 100%;
align-items: start;

Write Preview
Loading…
Cancel
Save