neic-hefeng/src/components/check/operationRecords.vue

<template>
    <el-dialog width="50%" @open="opened()" @closed="closed()" :show-close="false" class="my-info-dialog">
        <template #title>
            <div class="showTitles">
                <div class="titles">校验记录详情</div>
            </div>
        </template>
        <div class="bodys">
            <!-- <el-cascader ref="cascaderHandle" :options="options" :props="{ checkStrictly: true }" clearable @change="handleChange">
            </el-cascader> -->
            <div class="left">
                <el-scrollbar>
                    <el-input placeholder="输入关键字进行过滤" v-model="filterText">
                    </el-input>
                    <el-tree class="filter-tree" :data="showData" :props="defaultProps" :filter-node-method="filterNode"
                        node-key="id" :default-expanded-keys="[0]" ref="tree" @node-click="handleChange">
                    </el-tree>
                </el-scrollbar>
            </div>
            <div class="rights">
                <div class="dateBar">
                    <el-date-picker class="pickers" @change="changes" v-model="timeValue" type="datetimerange"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                    <div class="buttons" @click="getControlRecord()">查询</div>
                </div>
                <el-scrollbar style="height:86%;">
                    <div class="tables">
                        <el-table :data="recordData" class="table" style=" width:100%" height="49vh" :header-cell-style="{
                            background: 'rgb(30,30,30)',
                            color: 'rgb(220,220,220)',
                            padding: '4px',
                            fontSize: '14px',
                            'border-bottom': 'solid 1px rgba(77, 77, 77, 1)',
                          }" :cell-style="{
                            height: '40px',
                            background: 'rgb(30,30,30)',
                            color: 'rgb(220,220,220)',
                            padding: '3px',
                            fontSize: '12px',
                            'border-bottom': '1px solid #000000'
                          }">
                            <el-table-column prop="time" label="日期" width="120" align="center">
                            </el-table-column>
                            <el-table-column prop="windturbineId" label="风机号" width="120" align="center">
                            </el-table-column>
                            <el-table-column prop="controls" label="控制命令" width="120" align="center">
                            </el-table-column>
                            <el-table-column prop="result" label="操作结果" align="center">
                            </el-table-column>
                            <el-table-column prop="userName" label="操作人" width="120" align="center">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-scrollbar>
                <div class="paginations">
                    <el-pagination :hide-on-single-page="true" :page-size="currentPage" background
                        layout="prev, pager, next" :total="total" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </div>

    </el-dialog>
</template>
<script>
    import dayjs from 'dayjs'
    import api from "api/index";
    export default {
        props: {

        },
        updated() {
            if (this.timeValue.length === 0) {
                let date = new Date()
                this.timeValue[0] = date.getTime() - 28800000
                this.timeValue[1] = date.getTime() + 3600000
            }
        },
        mounted() {

        },
        data() {
            return {
                currentPage: 10,
                filterText: '',
                pageIndex: 1,
                datas: {},
                chooseStation: {},
                timeValue: [],
                showData: [
                    {
                        id: 0,
                        windturbineId: '全部',
                        stationId: "",
                        children: [
                            {
                                id: 1,
                                windturbineId: '麻黄山',
                                stationId: "MHS_FDC",
                                children: []
                            }, {
                                id: 2,
                                windturbineId: '牛首山',
                                stationId: "NSS_FDC",
                                children: []
                            }, {
                                id: 3,
                                windturbineId: '青山',
                                stationId: "QS_FDC",
                                children: []
                            }, {
                                id: 4,
                                windturbineId: '石板泉',
                                stationId: "SBQ_FDC",
                                children: []
                            }, {
                                id: 5,
                                windturbineId: '香山',
                                stationId: "XS_FDC",
                                children: []
                            },
                        ]
                    },
                ],
                defaultProps: {
                    children: 'children',
                    label: 'windturbineId'
                },
                recordData: [],
                total: '',
                controlErorCodes: [
                    "控制成功",
                    "控制命令发送失败",
                    "无效的控制地址",
                    "被控设备异常",
                    "无效的控制功能",
                    "网络连接错误,检查场站通信",
                    "控制结果读取超时",
                    "未知错误",
                    "控制命令错误",
                    "收到无法识别数据",
                    "未读取到数据包",
                    "未知错误",
                    "风机操作过频繁",
                    "风机被挂牌",
                    "风机操作与风机状态不符",
                    "需要登录",
                ],
            };
        },
        methods: {
            dataDeal() {
                this.datas = this.$store.state.windturbinelist ? this.$store.state.windturbinelist : {}
                let arr = Object.keys(this.datas).sort()
                for (let id of arr) {
                    let item = this.datas[id];
                    switch (item.windturbineId.slice(0, 2)) {
                        case 'MG':
                            this.showData[0].children[0].children.push(item)
                            break;
                        case 'NG':
                            this.showData[0].children[1].children.push(item)
                            break;
                        case 'QG':
                            this.showData[0].children[2].children.push(item)
                            break;
                        case 'SG':
                            this.showData[0].children[3].children.push(item)
                            break;
                        case 'XG':
                            this.showData[0].children[4].children.push(item)
                            break;
                    }
                }
                console.log(this.showData);
            },
            handleChange(value) {
                this.chooseStation = value
                this.pageIndex = 1
                this.getControlRecord(value)
            },
            closed() {
                this.pageIndex = 1
                this.chooseStation = {}
                this.showData = [
                    {
                        id: 0,
                        windturbineId: '全部',
                        stationId: "",
                        children: [
                            {
                                id: 1,
                                windturbineId: '麻黄山',
                                stationId: "MHS_FDC",
                                children: []
                            }, {
                                id: 2,
                                windturbineId: '牛首山',
                                stationId: "NSS_FDC",
                                children: []
                            }, {
                                id: 3,
                                windturbineId: '青山',
                                stationId: "QS_FDC",
                                children: []
                            }, {
                                id: 4,
                                windturbineId: '石板泉',
                                stationId: "SBQ_FDC",
                                children: []
                            }, {
                                id: 5,
                                windturbineId: '香山',
                                stationId: "XS_FDC",
                                children: []
                            },
                        ]
                    },
                ],
                this.$emit('closed');
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.windturbineId.indexOf(value) !== -1;
            },
            handleCurrentChange(val) {
                this.pageIndex = val
                this.getControlRecord()
            },
            opened(){
                let date = new Date()
                this.timeValue[0] = date.getTime() - 28800000
                this.timeValue[1] = date.getTime() + 3600000
                this.getControlRecord()
            },
            getControlRecord() {
                api.controlRecord({
                    stationId: this.chooseStation.stationId ? this.chooseStation.stationId : "",
                    userName: "",
                    windturbineId: this.chooseStation.id ? "" : this.chooseStation.stationId ? this.chooseStation.windturbineId : "",
                    startTime: dayjs(this.timeValue[0]).format('YYYY/MM/DD HH:mm:ss'),
                    endTime: dayjs(this.timeValue[1]).format('YYYY/MM/DD HH:mm:ss'),
                    pageSize: this.currentPage,
                    pageIndex: this.pageIndex,
                }).then(res => {
                    if (res) {
                        let types = {
                            Start: '启动',
                            Stop: '停止',
                            Reset: '复位',
                            Maintain: '维护',
                            UnMaintain: '取消维护',
                            Lock: '挂牌',
                            UnLock: '取消挂牌',

                        }
                        res.data.dataList.forEach(item => {
                            item.time = dayjs(item.time).format('MM-DD HH:mm:ss')
                            item.result = this.controlErorCodes[item.errorCode]
                            item.controls = types[item.controlType]
                        })
                        this.total = res.data.total
                        this.recordData = res.data.dataList
                    }
                })
            },
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
    }
</script>

<style scoped>
    .showTitles {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-top: -10px;
        font-size: 18px;
        color: #FFFFFF;
        height: 40px;
    }

    .titles {
        font-size: 16px;
        color: #FFFFFF;
    }

    .el-dialog__body {
        padding: 30px 10px 10px 10px;
    }

    .bodys {
        display: flex;
        flex-direction: row;
        background-color: black;
        width: 100%;
        margin-top: -30px;
        height: 60vh;
    }

    .left {
        width: 20%;
        height: 100%;
        background-color: rgba(77, 77, 77, 1);
        border-right: 2px solid #000000;
    }

    .rights {
        width: 80%;
        height: 100%;
        background-color: rgba(77, 77, 77, 1);
    }

    .el-tree {
        color: #FFFFFF !important;
        background-color: rgba(77, 77, 77, 1) !important;
    }

    .el-tree-node:focus>.el-tree-node__content {
        background-color: #000000 !important;
    }

    .el-tree-node__content:hover {
        background-color: #000000 !important;
    }

    .dateBar {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-left: 20px;
    }

    .pickers {
        margin-left: 20px;
    }

    .tables {
        margin-top: 20px;
        width: 95%;
        margin-left: 3%;
    }

    .table {
        background-color: rgba(77, 77, 77, 1) !important;
    }

    .el-table td,
    .el-table th.is-leaf {
        border-bottom: 1px solid rgba(77, 77, 77, 1) !important;
    }

    .el-table__header {
        width: 100% !important;
    }

    .el-table__body-wrapper {
        background-color: rgba(77, 77, 77, 1) !important;
    }

    .el-table::before {
        width: 0;
    }

    tr {
        line-height: 1.5;
        background: #1e1e1e;
        margin-bottom: 2px;
        border-radius: 5px;
    }

    .table-main {
        font-size: 14px;
        width: 600px;
        text-align: center;
        background: #000000;
        margin: 5px;
        border-collapse: separate;
        border-spacing: 0px 5px;
    }

    .paginations {
        display: flex;
        flex-direction: row-reverse;
    }
</style>