299 lines
11 KiB
Vue
299 lines
11 KiB
Vue
<template>
|
||
<div>
|
||
<el-dialog
|
||
:close-on-click-modal="false"
|
||
title="算法"
|
||
:visible.sync="dialogVisible"
|
||
width="600px"
|
||
:before-close="handleClose"
|
||
>
|
||
<div class="mb10 boxTop">
|
||
<div>
|
||
执行日期:
|
||
<el-date-picker
|
||
v-model="time"
|
||
type="datetimerange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
format="yyyy-MM-dd HH:mm:ss"
|
||
:picker-options="pickerOptions"
|
||
:clearable="false"
|
||
></el-date-picker>
|
||
</div>
|
||
<el-button type="primary" @click="execute">执 行</el-button>
|
||
</div>
|
||
<el-input placeholder="输入关键字检索" v-model="filterText" style="margin-bottom: 10px" clearable>
|
||
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||
</el-input>
|
||
<div :style="'height:45vh;overflow-y:auto'">
|
||
<el-tree
|
||
class="ele-tree-menu xiaoshou"
|
||
:data="treeMenuData"
|
||
:show-checkbox="true"
|
||
:default-expanded-keys="expandID"
|
||
node-key="id"
|
||
:filter-node-method="filterNode"
|
||
:check-strictly="false"
|
||
:expand-on-click-node="true"
|
||
:highlight-current="true"
|
||
:default-checked-keys="checkedarr"
|
||
@check="treeckeck"
|
||
:props="{ label: 'name', children: 'children' }"
|
||
ref="menuTree"
|
||
accordion
|
||
:render-content="renderContent"
|
||
></el-tree>
|
||
</div>
|
||
|
||
<div class="mt10"></div>
|
||
<!-- <span slot="footer" class="dialog-footer">
|
||
<el-button @click="handleClose">取 消</el-button>
|
||
|
||
</span> -->
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import api from '@/api/harmonic/onlineData'
|
||
import { dicData } from '@/assets/commjs/dictypeData'
|
||
import { measurementPointExecutorByHour } from '@/api/CVT/index.js'
|
||
export default {
|
||
components: {},
|
||
props: {},
|
||
data() {
|
||
return {
|
||
time: [],
|
||
// value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
|
||
dialogVisible: false,
|
||
checkedarr: [],
|
||
fiveData: [],
|
||
treeMenuData: [],
|
||
expandID: [],
|
||
formData: {
|
||
//后面需要修改
|
||
deptIndex: '',
|
||
monitorFlag: 2,
|
||
powerFlag: 2,
|
||
loadType: null,
|
||
manufacturer: null,
|
||
serverName: 'harmonic-boot',
|
||
statisticalType: '',
|
||
scale: null
|
||
},
|
||
filterText: '',
|
||
fiveData: [],
|
||
fatherID: [],
|
||
pickerOptions: {
|
||
disabledDate(time) {
|
||
return time.getTime() > Date.now() - 8.64e6
|
||
// 或者return time.getTime() > Date.now();
|
||
}
|
||
}
|
||
}
|
||
},
|
||
|
||
created() {},
|
||
|
||
methods: {
|
||
handleFilter(val) {
|
||
this.$refs.menuTree.filter(val)
|
||
},
|
||
// 点击树节点
|
||
treeckeck(data, checked, indeterminate) {},
|
||
open() {
|
||
this.dialogVisible = true
|
||
api.getTerminalTreeForFive(this.formData).then(res => {
|
||
if (res.code === 'A0000') {
|
||
this.fiveData = []
|
||
this.fiveData = res.data
|
||
this.chuli()
|
||
}
|
||
})
|
||
// 获取年份
|
||
const year = new Date().getFullYear()
|
||
// 获取月份（注意：getMonth 返回值是 0 - 11，所以要加 1），并确保是两位数
|
||
const month = String(new Date().getMonth() + 1).padStart(2, '0')
|
||
// 获取日期，并确保是两位数
|
||
const day = String(new Date().getDate()).padStart(2, '0')
|
||
// 获取小时，并确保是两位数
|
||
const hours = String(new Date().getHours()).padStart(2, '0')
|
||
// 获取分钟，并确保是两位数
|
||
const minutes = String(new Date().getMinutes()).padStart(2, '0')
|
||
// 获取秒数，并确保是两位数
|
||
const seconds = String(new Date().getSeconds()).padStart(2, '0')
|
||
|
||
this.time = [`${year}-${month}-${day} 00:00:00`, `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`]
|
||
},
|
||
chuli() {
|
||
this.fatherID = []
|
||
var data = this.fiveData
|
||
var arr = []
|
||
data.forEach(item => {
|
||
item.children.forEach(item2 => {
|
||
var p = {
|
||
children: item2.children,
|
||
comFlag: item2.comFlag,
|
||
id: item2.id,
|
||
level: item2.level,
|
||
loadType: item2.loadType,
|
||
manufacturer: item2.manufacturer,
|
||
name: item2.name,
|
||
pid: item2.pid,
|
||
pids: item2.pids,
|
||
ptType: item2.ptType,
|
||
scale: item2.scale,
|
||
sort: item2.sort
|
||
}
|
||
arr.push(p)
|
||
})
|
||
})
|
||
|
||
// this.fiveData = arr
|
||
if (arr[0].children[0].children[0].children.length > 0) {
|
||
arr.forEach(m => {
|
||
m.icon = 'el-icon-menu'
|
||
this.fatherID.push(m.id)
|
||
m.children.forEach(n => {
|
||
n.icon = 'el-icon-share'
|
||
this.fatherID.push(n.id)
|
||
n.children.forEach(d => {
|
||
d.icon = 'el-icon-s-flag'
|
||
d.children.forEach((f, i) => {
|
||
f.icon = 'el-icon-warning'
|
||
f.name = i + 1 + '_' + f.name
|
||
// f.children.forEach((h) => {
|
||
// h.icon = "el-icon-warning";
|
||
// });
|
||
})
|
||
})
|
||
})
|
||
})
|
||
this.treeMenuData = arr
|
||
//设置树节点点一个最字节的被选中
|
||
this.currentNode = arr[0].children[0].children[0].children[0].id
|
||
} else if (arr[0].children[0].children[0].children.length == 0) {
|
||
arr.forEach(m => {
|
||
m.icon = 'el-icon-menu'
|
||
this.fatherID.push(m.id)
|
||
m.children.forEach(n => {
|
||
n.icon = 'el-icon-share'
|
||
this.fatherID.push(n.id)
|
||
n.children.forEach((d, i) => {
|
||
d.icon = 'el-icon-warning'
|
||
d.name = i + 1 + '_' + d.name
|
||
// d.children.forEach((f) => {
|
||
// f.icon = "el-icon-warning";
|
||
d.jxfs = 0
|
||
// });
|
||
})
|
||
})
|
||
})
|
||
this.treeMenuData = arr
|
||
//设置树节点点一个最字节的被选中
|
||
this.currentNode = arr[0].children[0].children[0].id
|
||
window.sessionStorage.setItem('lineId', this.currentNode)
|
||
this.tree = JSON.stringify(arr)
|
||
}
|
||
|
||
window.sessionStorage.setItem('tree', this.tree)
|
||
this.expandID.push(this.currentNode)
|
||
|
||
//初始化触发默认点击方法
|
||
//alert('初始1')
|
||
this.$emit('chushiData', this.currentNode, this.treeMenuData)
|
||
},
|
||
|
||
renderContent(h, { node, data, store }) {
|
||
this.onlinename = node.label
|
||
|
||
return (
|
||
<span style="flex: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 8px;">
|
||
<span class="span-ellipsis">
|
||
<i
|
||
class={data.icon}
|
||
style={data.comFlag == 0 && data.level == 6 ? { color: 'red' } : { color: 'green' }}
|
||
></i>
|
||
<span class="title">{node.label}</span>
|
||
</span>
|
||
</span>
|
||
)
|
||
},
|
||
// 执行算法
|
||
async execute() {
|
||
if (this.$refs.menuTree.getCheckedKeys().length == 0) return this.$message.error('请选择监测点!')
|
||
|
||
let data = {
|
||
beginTime: this.time[0],
|
||
dataDate: '',
|
||
endTime: this.time[1],
|
||
fullChain: false,
|
||
idList: this.$refs.menuTree.getCheckedKeys().filter(item => !this.fatherID.includes(item)),
|
||
repair: true,
|
||
tagNames: ['dataHarmRateVCvt']
|
||
}
|
||
await measurementPointExecutorByHour(data)
|
||
this.$message.success('算法执行成功!')
|
||
this.handleClose()
|
||
},
|
||
|
||
// 关闭弹窗
|
||
handleClose() {
|
||
this.dialogVisible = false
|
||
this.$emit('close')
|
||
},
|
||
// 过滤树节点
|
||
filterNode(value, data, node) {
|
||
if (!value) {
|
||
return true
|
||
}
|
||
let _array = [] //这里使用数组存储 只是为了存储值。
|
||
this.getReturnNode(node, _array, value)
|
||
let result = false
|
||
_array.forEach(item => {
|
||
result = result || item
|
||
})
|
||
|
||
return result
|
||
},
|
||
getReturnNode(node, _array, value) {
|
||
let isPass = node.data && node.data.name && node.data.name.indexOf(value) !== -1
|
||
isPass ? _array.push(isPass) : ''
|
||
this.index++
|
||
if (!isPass && node.name != 1 && node.parent) {
|
||
this.getReturnNode(node.parent, _array, value)
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
var info = window.sessionStorage.getItem('Info')
|
||
info = eval('(' + info + ')')
|
||
this.vh = window.sessionStorage.getItem('appheight') - 20 + 'px'
|
||
|
||
this.formData.statisticalType = dicData('Statistical_Type', ['Report_Type'])[0]
|
||
this.formData.deptIndex = info.deptId
|
||
},
|
||
|
||
computed: {},
|
||
watch: {
|
||
filterText(val) {
|
||
console.log('🚀 ~ filterText ~ val:', val)
|
||
|
||
this.$refs.menuTree.filter(val)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
@import url('../../../../styles/comStyle.less');
|
||
|
||
::v-deep .el-dialog .el-dialog__body {
|
||
padding: 20px !important;
|
||
}
|
||
.boxTop {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
</style>
|