hb_pqs_web/src/views/cgy-harmonic-boot/CVT/components/algorithm.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>