<template>
    <div class="box" :style="'height:' + (vh - 23) + 'px ;'">
        <el-form v-show="false" label-width="80px">
            <el-form-item>
                <Timeinterval ref="Timeinterval" :interval="3" />
            </el-form-item>
        </el-form>
        <el-button type="primary" style="margin-left: 596px; visibility: hidden" size="mini" icon="el-icon-upload2">
            导出
        </el-button>

        <el-table
            stripe
            :data="tableData"
            style="width: 100%; margin-top: 5px"
            header-cell-class-name="table_header"
            highlight-current-row
            border
            :height="vh / 2 - 50 + 'px'"
            :default-sort="{ prop: 'updateTime', order: 'descending' }"
        >
            <!-- :row-style="{background: 'rgba(255, 255, 255, 0.75) '}"  -->
            <el-table-column :label="`离线终端 (${tableData.length}个)`">
                <el-table-column align="center" label="序号" type="index" width="70"></el-table-column>
                <el-table-column prop="updateTime" align="center" sortable label="中断时间" width="180">
                    <!-- <template slot-scope="scope">
            {{ parseInt(scope.row.updateTime) / 1000 }}
          </template> -->
                </el-table-column>
                <el-table-column
                    prop="subName"
                    align="center"
                    :show-overflow-tooltip="true"
                    label="变电站"
                ></el-table-column>
                <el-table-column
                    prop="devName"
                    align="center"
                    :show-overflow-tooltip="true"
                    label="装置名称"
                ></el-table-column>

                <el-table-column
                    prop="devType"
                    label="装置型号"
                    :formatter="formatter"
                    :show-overflow-tooltip="true"
                ></el-table-column>
                <el-table-column
                    prop="ip"
                    align="center"
                    :show-overflow-tooltip="true"
                    label="	网络参数"
                ></el-table-column>
            </el-table-column>
        </el-table>
        <div style="position: relative">
            <el-table
                stripe
                :data="tableData1"
                header-cell-class-name="table_header"
                style="width: 100%; margin-top: 10px"
                highlight-current-row
                fixed-columns-roll
                border
                :height="vh / 2 - 30 + 'px'"
                @row-click="handle"
                :default-sort="{ prop: 'startTime', order: 'descending' }"
            >
                <!-- :row-style="{background: 'rgba(255, 255, 255, 0.75) '}"  -->
                <el-table-column :label="`未处理暂态事件 (${tableData1.length}个)`">
                    <el-table-column label="序号" align="center" type="index" width="70"></el-table-column>
                    <el-table-column
                        prop="startTime"
                        align="center"
                        sortable
                        label="发生时刻"
                        show-overflow-tooltip
                        min-width="180"
                    ></el-table-column>
                    <el-table-column
                        prop="lineName"
                        align="center"
                        :show-overflow-tooltip="true"
                        label="监测点"
                        min-width="100"
                    ></el-table-column>
                    <el-table-column prop="featureAmplitude" align="center" label="暂降(骤升)幅值(%)" min-width="160">
                        <template slot-scope="scope">
                            {{ (scope.row.featureAmplitude * 100).toFixed(2) }}
                        </template>
                    </el-table-column>
                    <el-table-columns prop="duration" align="center" label="持续时间(s)" min-width="120">
                        <!-- <template slot-scope="scope">
              {{ (scope.row.duration / 1000).toFixed(2) }}
            </template> -->
                    </el-table-columns>
                </el-table-column>
            </el-table>
            <div style="position: absolute; top: 0px; right: 10px; z-index: 9999">
                <span style="color: #f1ff0d">(点击表格可定位监测点)</span>
                <el-button type="primary" icon="el-icon-s-promotion" size="mini" @click="message">
                    事件关联分析
                </el-button>
            </div>
        </div>
    </div>
</template>
<script>
import { getNoDealEvents, getAreaOffDev } from '@/api/monitoringpointStatistics/echart'
import { dicData } from '@/assets/commjs/dictypeData'
import Timeinterval from '@/views/components/TimePicker/index4'
export default {
    components: { Timeinterval },
    props: {},
    data() {
        return {
            vh: undefined,
            tableData: [],
            tableData1: [],
            statisticalType: {}
        }
    },
    created() {
        this.getclassificationData()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.info()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight')
        },
        message() {
            // this.$message("页面暂未开发");
            this.$router.push({
                path: '/Advancedanalysis/eventcorrelation',
                name: 'eventcorrelation'
            })
            // this.
        },
        getclassificationData() {
            var code = 'Statistical_Type'
            this.classificationData = dicData(code, ['Report_Type'])

            this.statisticalType = this.classificationData[0]
        },
        info() {
            let list = {
                deptIndex: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                monitorFlag: 2,
                powerFlag: 2,
                serverName: 'event-boot',
                statisticalType: this.statisticalType,
                searchBeginTime: this.$refs.Timeinterval.timeValue[0],
                searchEndTime: this.$refs.Timeinterval.timeValue[1]
            }
            getNoDealEvents(list).then(res => {
                this.tableData1 = res.data
            })
            getAreaOffDev(list).then(res => {
                this.tableData = res.data
            })
        },
        formatter(row) {
            let title = ''
            dicData('Dev_Type', []).forEach(item => {
                if (item.id == row.devType) {
                    title = item.name
                }
            })
            return title
        },
        // 表格单击
        handle(row, event, column) {
            this.$emit('rowClick', row)
        }
    },

    computed: {},

    watch: {}
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
</style>
<style lang="scss" scoped>
.box {
    width: 700px;
    padding: 5px;
    background: rgba(255, 255, 255, 0.75) !important;
}

/* 最外层透明 */
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
    background-color: transparent;
}

/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
    background-color: transparent;
}
</style>
