<template>
    <el-container v-if="!pollutantDetail">
        <el-main class="nopadding">
            <el-container>
                <el-header>
                    <div class="left-panel">污染源清单</div>
                </el-header>
                <el-main class="nopadding">
                    <el-container>
                        <el-header>
                            <div class="searchWrap">
                                <el-select v-model="query.cate" placeholder="污染源分类" @change="handleQuery" clearable>
                                    <el-option v-for="item in cateOptions" :key="item.id" :label="item.name"
                                        :value="item.id"></el-option>
                                </el-select>
                            </div>
                        </el-header>
                        <el-main class="nopadding">
                            <scTable ref="table" :data="tableData" style="width: 100%;" size="large" :apiObj="apiObj"
                                row-key="id" :params="params" :query="query" hidePagination @row-click="rowClick">
                                <el-table-column type="index" width="50" />
                                <el-table-column prop="number" label="污染源编号" width="180" />
                                <el-table-column prop="name" label="污染源名称" />
                                <el-table-column prop="name" label="污染源类型" />
                                <el-table-column prop="mgroup_name" label="所属工段" />
                            </scTable>
                        </el-main>
                    </el-container>
                </el-main>
            </el-container>
        </el-main>
    </el-container>
    <el-container v-else>
        <el-header>
            <div class="panel_title">污染源及关联设备信息
                <span class="backBtn" @click="handleClick"> 返回 </span>
            </div>
        </el-header>
        <el-main>
            <el-container>
                <el-aside style="width: 35%">
                    <div class="aside_one">
                        <div class="pageTitle">污染源及关联设备静态信息</div>
                        <div class="linesWrap">
                            <div class="typeLine">
                                <div class="greenBlock">
                                    <div class="greenBlockInner"></div>
                                </div>
                                <span>生产设备</span>
                            </div>
                            <div class="infoLine">
                                <span class="circles"></span>
                                <span>{{ eqs.name }}</span>
                            </div>
                            <el-row class="infoLine">
                                <el-col :span="12">
                                    <div><span class="infotitle">设备类型：</span>主要生产设备</div>
                                </el-col>
                                <el-col :span="12">
                                    <div>
                                        <span class="infotitle">电机功率：</span>
                                        <span v-if="eqs.power_kw">{{ eqs.power_kw }}kw</span>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div>
                                        <span class="infotitle">生产能力：</span>
                                        <span v-if="eqs.parameter_json && eqs.parameter_json.生产能力">{{
                                            eqs.parameter_json.生产能力
                                        }}</span>
                                    </div>
                                </el-col>
                            </el-row>
                            <div class="typeLine">
                                <div class="greenBlock">
                                    <div class="greenBlockInner"></div>
                                </div>
                                <span>治理设备</span>
                            </div>
                            <div class="infoLine">
                                <span class="circles"></span>
                                <span>{{ eqz.name }}</span>
                            </div>
                            <el-row class="infoLine">
                                <el-col :span="12">
                                    <div><span class="infotitle">风量：</span>
                                        <span v-if="eqz.parameter_json && eqz.parameter_json.风量">{{ eqz.parameter_json.风量
                                        }}m³/h</span>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div><span class="infotitle">过滤面积：</span>
                                        <span v-if="eqz.parameter_json && eqz.parameter_json.过滤面积">{{
                                            eqz.parameter_json.过滤面积
                                        }} m²</span>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div><span class="infotitle">布袋材质：</span>
                                        <span v-if="eqz.parameter_json && eqz.parameter_json.布袋材质">{{
                                            eqz.parameter_json.布袋材质
                                        }} </span>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div><span class="infotitle">过滤风速：</span>
                                        <span v-if="eqz.parameter_json && eqz.parameter_json.过滤风速">{{
                                            eqz.parameter_json.过滤风速
                                        }} </span>m/min
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div><span class="infotitle">额定功率：</span>
                                        <span v-if="eqz.parameter_json && eqz.parameter_json.额定功率">{{
                                            eqz.parameter_json.额定功率
                                        }} </span> Kw
                                    </div>
                                </el-col>
                            </el-row>
                            <div class="typeLine">
                                <div class="greenBlock">
                                    <div class="greenBlockInner"></div>
                                </div>

                                <span>污染源</span>
                            </div>
                            <div class="infoLine">
                                <span class="circles"></span>
                                <span>{{ detailItem.name }}</span>
                            </div>
                            <el-row class="infoLine">
                                <el-col :span="12">
                                    <div><span class="infotitle">排气筒高度：</span>{{ detailItem.height }} m</div>
                                </el-col>
                                <el-col :span="12">
                                    <div><span class="infotitle">废气处理量：</span> {{ detailItem.treatment_capacity }} m³/h
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div><span class="infotitle">PM超低排放限值： </span> {{ detailItem.pm_limit }} mg/Nm³</div>
                                </el-col>
                                <el-col :span="12">
                                    <div><span class="infotitle">排污许可状况： </span>已许可</div>
                                </el-col>
                                <el-col :span="12">
                                    <div><span class="infotitle">治理措施： </span>{{ detailItem.measure }}</div>
                                </el-col>
                            </el-row>
                            <div class="typeLine">
                                <div class="greenBlock">
                                    <div class="greenBlockInner"></div>
                                </div>
                                <span>监测设备</span>
                            </div>
                            <div class="infoLine">
                                <span class="circles"></span>
                                <span>{{ eqc.name }}</span>
                            </div>
                            <el-row class="infoLine">
                                <el-col :span="24">
                                    <div>
                                        <span class="infotitle">颗粒物：（实测值）</span>0.218 mg/m³
                                        <span class="infotitle">（折算值）</span>0.218 mg/m³
                                    </div>
                                </el-col>
                                <el-col :span="24">
                                    <div>
                                        <span class="infotitle">SO2：（实测值）</span>0.218 mg/m³
                                        <span class="infotitle">（折算值）</span>0.218 mg/m³
                                    </div>
                                </el-col>
                                <el-col :span="24">
                                    <div>
                                        <span class="infotitle">NOX：（实测值）</span>0.218 mg/m³
                                        <span class="infotitle">（折算值）</span>0.218 mg/m³
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div><span class="infotitle">流量：</span> 0.000 m³/h</div>
                                </el-col>
                                <el-col :span="12">
                                    <div><span class="infotitle">温度：</span> 0.000 ℃</div>
                                </el-col>
                                <el-col :span="12">
                                    <div><span class="infotitle">湿度：</span> 0.000 %</div>
                                </el-col>
                                <el-col :span="12">
                                    <div><span class="infotitle">压力：</span> 0.000 MPa</div>
                                </el-col>
                                <el-col :span="12">
                                    <div><span class="infotitle">含氧量：</span> 0.000 %</div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-aside>
                <el-main>
                    <div class="aside_side">
                        <div class="pageTitle">污染源及关联设备动态信息</div>
                        <div id="dataChart" style="width: 100%; height:200px;margin-top:1vh"></div>
                        <div id="dataChart2" style="width: 100%; height:200px;margin-top:1vh"></div>
                        <div id="dataChart3" style="width: 100%; height:200px;margin-top:1vh"></div>
                        <div id="dataChart4" style="width: 100%; height:200px;margin-top:1vh"></div>
                    </div>

                </el-main>
            </el-container>
        </el-main>
    </el-container>
</template>
<script>
import * as echarts from "echarts";
export default {
    data() {
        return {
            eqs: {},
            eqc: {},
            eqz: {},
            pollutantDetail: false,
            query: {},

            cateOptions: [{ id: 'mtrans', name: '生产工艺' }, { id: 'product', name: '物料输送' }, { id: 'mstore', name: '物料储存' }],
            apiObj: this.$API.enp.drain.list,
            params: { type: 20 },
            detailItem: {},
            detailForm: {
                day: 18,
                year: 2024,
                month: 1
            },
            biquery: {
                end_time: '2024-02-01',
                start_time: '2024-01-29',
                time_bucket: "1 minute",
                equipment_id: "3491356310052896768",
            },
            basicOption: {
                title: {
                    text: '设备名称',
                    left: 'center',
                    top: 'top',
                    textStyle: {
                        color: '#fff'
                    }
                },
                legend: {
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 20
                    },
                    {
                        start: 0,
                        end: 20
                    }
                ],
                dataset: {
                    source: []
                },
                xAxis: { type: 'category' },
                yAxis: {},
                series: [{ type: 'line' }]
            },
        }
    },
    methods: {
        initTimeNow() {
            var now = new Date();
            let year = now.getFullYear(); // 年份
            let month = now.getMonth() + 1; // 月份
            let day = now.getDate(); // 日期
            this.detailForm.year = year;
            this.detailForm.month = month;
            this.detailForm.day = day;
        },
        handleQuery() {
            this.$refs.table.queryData(this.query);
        },
        rowClick(row) {
            this.pollutantDetail = true;
            this.detailItem = row;
            this.$nextTick(() => {
                this.getEquipments(row.equipments);
                this.getDetailData();
            })
        },
        getEquipments(ids) {
            let that = this;
            console.log(ids);
            ids.forEach(id => {
                that.$API.em.equipment.item.req(id).then(res => {
                    if (res.type == 10) {
                        that.eqs = res;
                        that.getDetailData(1, id);
                    } else if (res.type == 20) {
                        that.eqc = res;
                        that.getDetailData(2, id);
                    } else if (res.type == 30) {
                        that.eqz = res;
                        that.getDetailData(3, id);
                    }
                })
            });
        },
        getDetailData(type, id) {
            var that = this;
            if (type == 1) {
                var chartDom = document.getElementById('dataChart');
                var myChart = echarts.init(chartDom);
            } else if (type == 2) {
                var chartDom2 = document.getElementById('dataChart2');
                var myChart2 = echarts.init(chartDom2);
            } else if (type == 3) {
                var chartDom3 = document.getElementById('dataChart3');
                var myChart3 = echarts.init(chartDom3);
            } else {
                var chartDom4 = document.getElementById('dataChart4');
                var myChart4 = echarts.init(chartDom4);
            }
            let obj = that.biquery;
            obj.equipment_id = id;
            let params = { query: obj };
            that.$API.bi.dataset.exec.req('eq_status', params).then(res => {
                let newOption = Object.assign({}, this.basicOption);
                newOption.dataset.source = res.data.ds0;
                newOption.dataZoom.startValue = that.biquery.start_time;
                if (type == 1) {
                    newOption.title.text = that.eqs.name;
                    myChart.setOption(newOption);
                } else if (type == 2) {
                    newOption.title.text = that.eqc.name;
                    myChart2.setOption(newOption);
                    echarts.connect([myChart, myChart2])
                } else if (type == 3) {
                    newOption.title.text = that.eqz.name;
                    myChart3.setOption(newOption);
                    echarts.connect([myChart2, myChart3])
                } else {
                    newOption.title.text = that.eqc.name;
                    myChart4.setOption(newOption);
                    echarts.connect([myChart3, myChart4])
                }
            }).then(() => { myChart.hideLoading() })
            myChart.hideLoading()
        },
        handleClick() {
            this.pollutantDetail = false;
            this.detailItem = {};
        },
    }
}
</script>