<template>
<!-- 环保设施涉外监控数据展示 -->
    <div class="hbjkbz">
        <div class="box">
            <el-tabs v-model="activeName" >
                <el-tab-pane label="环保监控实时数据" name="first">
                    <div class="box-top">
                        <div class="box-top-gjl">
                            <span style="font-size:14px;">数据获取时间：{{ getDataTime }}</span>
                            <!-- v-if="userInfo.data && userInfo.data.userId === 'admin'" -->
                            <el-checkbox
                                v-show="tableData.length > 0"
                                v-model="autoGetData"
                                style="margin-left: 7px;"
                            >自动更新数据</el-checkbox>
                        </div>
                    </div>
                    <div class="box-bottom">
                        <el-form
                            size="mini"
                            ref="dialog_form_arr"
                            label-width="0px"
                            :model="tableFormDataObj"
                        >
                            <el-table
                                stripe
                                id="singleTable"
                                ref="singleTable"
                                :data="tableData"
                                v-loading="tableLoading"
                                style="width: 100%;"
                                :height="singleTableHeight"
                                border
                                size="mini"
                                highlight-current-row
                                :span-method="arraySpanMethod"
                                :cell-style="setColor"
                            >
                                <el-table-column
                                    prop="wrType"
                                    label="污染源类别"
                                    width="110px"
                                    align="center"
                                    :show-overflow-tooltip="true"
                                ></el-table-column>
                                <el-table-column
                                    prop="drainName"
                                    label="排放口名称"
                                    width="150px"
                                    :show-overflow-tooltip="true"
                                ></el-table-column>
                                <el-table-column
                                    prop="sourceName"
                                    label="产污环节"
                                    width="150px"
                                    :show-overflow-tooltip="true"
                                ></el-table-column>
                                <el-table-column
                                    prop="location"
                                    label="点位位置"
                                    width="120px"
                                    :show-overflow-tooltip="true"
                                ></el-table-column>
                                <el-table-column
                                    prop="checkEle"
                                    label="监测因子"
                                    width="105px"
                                    :show-overflow-tooltip="true"
                                ></el-table-column>
                                <el-table-column
                                    prop="realval"
                                    label="监控值"
                                    min-width="100px"
                                    :show-overflow-tooltip="true"
                                >
                                    <template slot-scope="scope">
                                        <span :class="{ 'hbdata-error-warning' : scope.row.realval > scope.row.maxValue || scope.row.realval < scope.row.minValue ? 'red' : ''}">{{ scope.row.realval }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="排放标准">
                                    <el-table-column
                                    prop="minValue"
                                    label="最小值"
                                    min-width="90px"
                                    :show-overflow-tooltip="true">
                                    </el-table-column>
                                    <el-table-column
                                    prop="maxValue"
                                    label="最大值"
                                    min-width="90px"
                                    :show-overflow-tooltip="true">
                                    </el-table-column>
                                </el-table-column>
                            </el-table>
                        </el-form>
                        <!-- <el-pagination
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total"
                            :page-sizes="[10, 20, 50, 100, 500, 1000]"
                            :page-size="pageSize"
                            :current-page.sync="pageNum"
                            @size-change="tableSizeChange"
                            @current-change="getTableData()"
                            style="text-align: right;margin-top: 10px;"
                        ></el-pagination> -->
                    </div>
                </el-tab-pane>
                <el-tab-pane label="环保监控超标数据" name="second">
                    <div class="box-top">
                        <div class="box-top-gjl">
                            <span style="font-size:14px;">数据获取时间：{{ getDataTime }}</span>
                            <!-- v-if="userInfo.data && userInfo.data.userId === 'admin'" -->
                            <el-checkbox
                                v-show="tableData.length > 0"
                                v-model="autoGetData"
                                style="margin-left: 7px;"
                            >自动更新数据</el-checkbox>
                        </div>
                    </div>
                    <div class="box-bottom">
                        <el-form
                            size="mini"
                            ref="dialog_form_arr"
                            label-width="0px"
                            :model="tableFormDataObj"
                        >
                            <el-table
                                stripe
                                :data="exTableData"
                                v-loading="tableLoading"
                                style="width: 100%;"
                                :height="singleTableHeight"
                                border
                                size="mini"
                                highlight-current-row
                                :span-method="arraySpanMethod"
                                :cell-style="setColor"
                            >
                                <el-table-column
                                    prop="wrType"
                                    label="污染源类别"
                                    width="110px"
                                    align="center"
                                    :show-overflow-tooltip="true"
                                ></el-table-column>
                                <el-table-column
                                    prop="drainName"
                                    label="排放口名称"
                                    width="150px"
                                    :show-overflow-tooltip="true"
                                ></el-table-column>
                                <el-table-column
                                    prop="sourceName"
                                    label="产污环节"
                                    width="150px"
                                    :show-overflow-tooltip="true"
                                ></el-table-column>
                                <el-table-column
                                    prop="location"
                                    label="点位位置"
                                    width="120px"
                                    :show-overflow-tooltip="true"
                                ></el-table-column>
                                <el-table-column
                                    prop="checkEle"
                                    label="监测因子"
                                    width="105px"
                                    :show-overflow-tooltip="true"
                                ></el-table-column>
                                <el-table-column
                                    prop="realval"
                                    label="监控值"
                                    min-width="60px"
                                    :show-overflow-tooltip="true"
                                >
                                    <template slot-scope="scope">
                                        <span :class="{ 'hbdata-error-warning' : scope.row.realval > scope.row.maxValue || scope.row.realval < scope.row.minValue ? 'red' : ''}">{{ scope.row.realval }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="排放标准">
                                    <el-table-column
                                    prop="minValue"
                                    label="最小值"
                                    min-width="90px"
                                    :show-overflow-tooltip="true">
                                    </el-table-column>
                                    <el-table-column
                                    prop="maxValue"
                                    label="最大值"
                                    min-width="90px"
                                    :show-overflow-tooltip="true">
                                    </el-table-column>
                                </el-table-column>
                            </el-table>
                        </el-form>
                        <!-- <el-pagination
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total"
                            :page-sizes="[10, 20, 50, 100, 500, 1000]"
                            :page-size="pageSize"
                            :current-page.sync="pageNum"
                            @size-change="tableSizeChange"
                            @current-change="getTableData()"
                            style="text-align: right;margin-top: 10px;"
                        ></el-pagination> -->
                    </div>
                </el-tab-pane>
                <el-tab-pane label="环保监控历史数据" name="third">
                    <div class="box-top">
                        <el-form
                            style="overflow: hidden;padding-top:15px;"
                            :style="filterForm.show ? null : { height: '0px' }"
                            size="mini"
                            label-width="60px"
                        >
                            <el-row>
                                <el-col :span="6">
                                    <el-form-item label="日期选择">
                                        <el-date-picker
                                            v-model="filterForm.ranges"
                                            type="datetimerange"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            format="yyyy-MM-dd HH:mm:ss"
                                            value-format="yyyy-MM-dd HH:mm:ss">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                        <div class="box-top-gjl">
                            <!-- 当有审核与取消审核权限时，默认其为审核人，审核人无法修改数据 -->
                            <div style="float:right; text-align: right;">
                                <el-button
                                    class="button"
                                    type="primary"
                                    size="mini"
                                    icon="el-icon-search"
                                    @click="getHistoryData()"
                                >查询</el-button>
                                <el-button
                                    size="mini"
                                    :icon="filterForm.show ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"
                                    :title="filterForm.show ? '收起搜索区' : '展开搜索区'"
                                    @click="filterForm.show = !filterForm.show;
                                        $nextTick(() => {
                                            singleTableHeight = getRoleHeight($refs['singleTable'].$el) - 45;
                                        }
                                    );"
                                >{{ filterForm.show ? '收起' : '展开' }}</el-button>
                            </div>
                        </div>
                    </div>
                    <div class="box-bottom">
                        <el-table
                                stripe
                                ref="singleTable2"
                                :data="rangeTableData"
                                v-loading="tableLoading"
                                style="width: 100%;"
                                :height="singleTableHeight1"
                                border
                                size="mini"
                                highlight-current-row
                                :cell-style="setColor"
                            >
                                <el-table-column
                                    prop="wrType"
                                    label="污染源类别"
                                    width="110px"
                                    align="center"
                                    :show-overflow-tooltip="true"
                                ></el-table-column>
                                <el-table-column
                                    prop="drainName"
                                    label="排放口名称"
                                    width="150px"
                                    :show-overflow-tooltip="true"
                                ></el-table-column>
                                <el-table-column
                                    prop="sourceName"
                                    label="产污环节"
                                    width="150px"
                                    :show-overflow-tooltip="true"
                                ></el-table-column>
                                <el-table-column
                                    prop="location"
                                    label="点位位置"
                                    width="120px"
                                    :show-overflow-tooltip="true"
                                ></el-table-column>
                                <el-table-column
                                    prop="checkEle"
                                    label="监测因子"
                                    width="105px"
                                    :show-overflow-tooltip="true"
                                ></el-table-column>
                                <el-table-column
                                    prop="time"
                                    label="监测时间"
                                    width="125px"
                                    :show-overflow-tooltip="true"
                                ></el-table-column>
                                <el-table-column
                                    prop="state"
                                    label="是否连续异常"
                                    min-width="100px"
                                    :show-overflow-tooltip="true"
                                >
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.state === 1 ? "是" : "否" }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="meterValue"
                                    label="监控值"
                                    min-width="100px"
                                    :show-overflow-tooltip="true"
                                >
                                </el-table-column>
                                <el-table-column label="排放标准">
                                    <el-table-column
                                    prop="minValue"
                                    label="最小值"
                                    min-width="90px"
                                    :show-overflow-tooltip="true">
                                    </el-table-column>
                                    <el-table-column
                                    prop="maxValue"
                                    label="最大值"
                                    min-width="90px"
                                    :show-overflow-tooltip="true">
                                    </el-table-column>
                                </el-table-column>
                            </el-table>
                            <el-pagination
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="rangeTableInfo.total"
                                    :page-sizes="[10, 20, 50, 100, 500, 1000]"
                                    :page-size="rangeTableInfo.pageSize"
                                    :current-page.sync="rangeTableInfo.pageNum"
                                    @size-change="historyTableSizeChange"
                                    @current-change="pageChage"
                                    style="text-align: right;margin-top: 10px;"
                            ></el-pagination>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import { formatDate } from '@/utils/util.js';
import { zCheckNumber1 } from '@/utils/validator.js'
export default {
    name: 'hbData',
    data () {
        return {
            activeName: 'first',
            getDataTime: '',
            autoGetData: false,
            multipleSelection: [],
            tableFormDataObj: {},
            activeMenu: '',
            start: new Date(),
            filterForm: {
                show: true,
                ranges: '',
                data: {
                    wrType: '',
                    checkEle: '',
                    drainName: '', // 排放口名称
                    location: ''
                },
                rules: {

                }
            },
            pageNum: 1,
            pageSize: 500,
            total: 0,
            singleTableHeight: 100,
            singleTableHeight1: 145,
            tableData: [],
            exTableData: [],
            rangeTableData: [],
            nameObj: {
                wrType: {
                    arr: ['废气', '废水']
                },
                checkEle: {
                    arr: ['废气流量', '湿度', '温度', '颗粒物', '二氧化硫', '氮氧化物', '氧含量', 'COD', '氨氮', '总磷', '总氮', 'PH值']
                }
            },
            rangeTableInfo: {
                    pageNum: 1,
                    pageSize: 20,
                    total: 0,
                    tableData: []
            },
            loading: false,
            tableLoading: false,
            dialog: {
                editorBox: {
                    show: false,
                    type: '',
                    form: {
                        data: {
                            wrType: '', // 污染源类别
                            location: '', // 点位位置
                            drainName: '', // 排放口名称
                            sourceName: '', // 产污环节
                            checkEle: '', // 监测因子
                            memo: '', // 备注
                            minValue: '', // 最小值
                            maxValue: '', // 最大值
                            cName: '' // coredas表字段名
                        },
                        rules: {
                            wrType: [
                                { required: true, message: '该项不能为空', trigger: 'change' }
                            ],
                            location: [
                                { required: true, message: '该项不能为空', trigger: 'change' }
                            ],
                            drainName: [
                                { required: true, message: '该项不能为空', trigger: 'change' }
                            ],
                            sourceName: [
                                { required: true, message: '该项不能为空', trigger: 'change' }
                            ],
                            checkEle: [
                                { required: true, message: '该项不能为空', trigger: 'change' }
                            ],
                            minValue: [
                                { validator: zCheckNumber1, trigger: 'change' }
                            ],
                            maxValue: [
                                { validator: zCheckNumber1, trigger: 'change' }
                            ]
                        }
                    }
                },
                equationEditing: {
                    show: false,
                    form: {
                        data: {
                            clock: '',
                            code: ''
                        }
                    }
                }
            }
        }
    },
    created () {
        this.activeMenu = window.localStorage.getItem('activeMenu');
    },
    watch: {
        'autoGetData': function (newVal, oldVal) {
           let that = this;
            window.clearInterval(that.autoTimeId);
            that.autoSize = 0;
            if (that.autoGetData) {
                console.log('on')
                that.autoTimeId = setInterval(function () {
                    if (that.autoSize < 100) {
                        that.getHbData();
                        that.autoSize++;
                    } else {
                        that.autoGetData = false;
                    }
                }, 2000);
            } else {
                console.log('off')
            }
        }
    },
    mounted () {
        let that = this;
        window.PEDataObj = {
            // 将数据绑定到window上，供main页面使用
            vm: that,
            // tableArr：用于导出成Excel的表格的信息
            tableArr: [
                {
                    name: '',
                    id: 'singleTable'
                },
                {
                    name: '',
                    id: 'singleTable2'
                }
            ]
        };
        that.$nextTick(() => {
            // 立即获取的height有一定偏差，通过setTimeout延迟来解决
            setTimeout(() => {
                that.singleTableHeight = that.getRoleHeight(that.$refs['singleTable'].$el) - 45;
                that.singleTableHeight1 = that.getRoleHeight(that.$refs['singleTable2'].$el) - 185;
            }, 1);
        });
        that.getTableData();
        that.getHistoryData();
    },
    methods: {
        //  计算树区域高度
        getRoleHeight (dom) {
            return window.innerHeight - dom.offsetTop;
        },
        // 获取表格中的数据
        getTableData (pageNum) {
            let that = this,
                params = {
                    wrType: that.filterForm.data.wrType.toString(),
                    location: that.filterForm.data.location,
                    checkEle: that.filterForm.data.checkEle.toString(),
                    drainName: that.filterForm.data.drainName
                };
            that.pageNum = pageNum || that.pageNum;
            that.tableLoading = true;
            let url = 'pass/ems/v1/zghbjkbzs/list?pageNum=' + that.pageNum + '&pageSize=' + that.pageSize;
            that.axios.get(url, {
                params: params
            })
                .then(function (res) {
                    if (res.code === '0') {
                        for (let i = 0; i < res.data.list.length; i++) {
                            res.data.list[i].realval = null;
                        }
                        that.tableData = res.data.list;
                        that.total = res.data.total;
                        that.autoGetData = true;
                        that.getHbData();
                    } else {
                        that.$message.error(res.message);
                    }
                    that.tableLoading = false;
                }).catch(function () {
                    that.tableLoading = false;
                });
        },
        // 获取监控值
        getHbData () {
            let that = this;
            let dataUrl = 'pass/ems/v1/emshbsjs/?pageNum=1&pageSize=1';
             that.axios.get(dataUrl)
                .then(function (res) {
                    if (res.code === '0') {
                        that.exTableData = [];
                        let values = res.data.list[0];
                        that.getDataTime = values.id;
                        let obj = {};
                        for (let key in values) {
                            obj[key.toUpperCase()] = values[key];
                        }
                        for (let i = 0; i < that.tableData.length; i++) {
                            that.tableData[i].realval = obj[that.tableData[i].cName.toUpperCase()];
                            if (that.tableData[i].realval > that.tableData[i].maxValue) {
                                that.exTableData.push(that.tableData[i]);
                            }
                        }
                    } else {
                        that.$message.error(res.message);
                    }
                    // that.tableLoading = false;
                }).catch(function () {
                    that.tableLoading = false;
                });
        },
        // 获取历史数据
        getHistoryData () {
            let that = this;
             let params = {};
            if (that.filterForm.ranges === '') {
                let end = new Date();
                let start = new Date((new Date()).setTime((new Date()).getTime() - 3600 * 1000 * 24));
                let sy = start.getFullYear();
                let sm = start.getMonth();
                let sd = start.getDate();
                let ey = end.getFullYear();
                let em = end.getMonth();
                let ed = end.getDate();
                params = {
                    dateBegin: sy + '-' + (sm + 1) + '-' + sd + ' 00:00:00',
                    dateEnd: ey + '-' + (em + 1) + '-' + ed + ' 00:00:00'
                };
            } else {
                 params = {
                    dateBegin: that.filterForm.ranges[0],
                    dateEnd: that.filterForm.ranges[1]
                };
            }
            let url = 'pass/ems/v1/zghbjkbzlogs/?pageNum=' + that.rangeTableInfo.pageNum + '&pageSize=' + that.rangeTableInfo.pageSize;
            that.axios.get(url, {
                params: params
            })
                .then(function (res) {
                    if (res.code === '0') {
                        let list = [];
                        res.data.list.map((lists) => {
                            list.push({
                                checkEle: lists.CHECK_ELE,
                                drainName: lists.DRAIN_NAME,
                                id: lists.ID,
                                intervals: lists.INTERVALS,
                                location: lists.LOCATION,
                                maxValue: lists.MAX_VALUE,
                                meterValue: lists.METER_VALUE,
                                minValue: lists.MIN_VALUE,
                                sourceName: lists.SOURCE_NAME,
                                state: lists.STATE,
                                time: lists.TIM,
                                wrType: lists.WR_TYPE
                            })
                        })
                        that.rangeTableData = list;
                        that.rangeTableInfo.total = res.data.total;
                    } else {
                        that.$message.error(res.message);
                    }
                    that.tableLoading = false;
                }).catch(function () {
                    that.tableLoading = false;
                });
        },
        // 改变表格显示条数
        tableSizeChange (val) {
            let that = this;
            that.pageSize = val;
            that.getTableData(1);
        },
        historyTableSizeChange (val) {
            let that = this;
            that.rangeTableInfo.pageSize = val;
            that.rangeTableInfo.pageNum = 1;
            that.getHistoryData();
            console.log(that.rangeTableInfo.pageNum)
        },
        pageChage (val) {
            console.log(val)
            this.rangeTableInfo.pageNum = val;
            this.getHistoryData();
        },
        // 重置搜索
        tableDataCancel () {
            let that = this;
            for (let key in that.filterForm.data) {
                if (that.filterForm.data[key] instanceof Array) {
                    that.filterForm.data[key] = [];
                } else {
                    that.filterForm.data[key] = '';
                }
            }
            that.getTableData(1);
        },
        // 表格合并单元格
        arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
            let tableData = this.$refs.singleTable.tableData
            let arr = ['drainName', 'sourceName', 'location']
            let rowsPan = 1;
            let thisColomnData = row[column['property']];
            let dn = row['drainName'];
            let thisMergeFlag = false;
            if (arr.includes(column['property'])) {
                thisMergeFlag = true;
            }
            // 污染源类别列的 行合并
            if (column['property'] === 'wrType' && thisColomnData) {
                if (rowIndex > 0 && thisColomnData === tableData[rowIndex - 1][column['property']]) {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
                while (tableData[rowIndex + rowsPan] && thisColomnData === tableData[rowIndex + rowsPan][column['property']]) {
                    rowsPan += 1
                }
                return {
                    rowspan: rowsPan,
                    colspan: 1
                };
            }
            if (thisMergeFlag && thisColomnData) {
                if (rowIndex > 0 && thisColomnData === tableData[rowIndex - 1][column['property']] && dn === tableData[rowIndex - 1]['drainName']) {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
                while (tableData[rowIndex + rowsPan] && thisColomnData === tableData[rowIndex + rowsPan][column['property']] && dn === tableData[rowIndex + rowsPan]['drainName']) {
                    rowsPan += 1
                }
                return {
                    rowspan: rowsPan,
                    colspan: 1
                };
            }
        },
        setColor ({row, column, rowIndex, columnIndex}) {
            let _this = this;
            let arr = ['wrType', 'drainName', 'sourceName', 'location']
            if (arr.includes(column['property']) || columnIndex === 0) {
                return 'background-color:#fff'
            }
        }
    }
}
</script>

<style lang="less">
.hbjkbz {
    min-width: 700px;
    height: 100%;
    .box {
        height: 100%;
        padding: 15px 15px 0 15px;
        .box-top {
            .el-form-item {
                margin-bottom: 7px;
            }
            .box-top-gjl {
                overflow: hidden;
                // margin-top: -7px;
                padding: 7px 0;
                border-top: 1px solid #ccc;
                // border-bottom: 1px solid #ccc;
                // margin-bottom: 6px;
            }
        }
        .el-table .el-table__row {
            height: 35px;
        }
        .el-table__body .el-form-item--mini.el-form-item {
            margin: 0px;
            .error {
                overflow: hidden;
                color: #f56c6c;
                font-size: 12px;
                line-height: 1;
            }
        }
    }
    .color_no {
        color: #7a7a7a;
    }
    .color_yes {
        color: #1a9f17;
    }
    @keyframes myfirst
    {
        from {
            color: #fff;
            font-weight: normal;
            }
        to {
            color: #ec3219;
            font-weight: bold;
            }
    }

    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
        from {
            color: #fff;
            font-weight: normal;
            }
        to {
            color: #ec3219;
            font-weight: bold;
            }
    }
    .hbdata-error-warning {
        animation: myfirst 0.4s infinite;
    }
}
</style>
