<template>
    <el-container v-if="!pollutantDetail">
        <el-main class="nopadding">
            <el-container>
                <el-header class="panel_title">
                    <div class="left-panel">污染源清单</div>
                    <div class="right-panel">
                        <el-button type="primary" @click="backtoMap">返回地图</el-button>
                    </div>
                </el-header>
                <el-main class="nopadding">
                    <el-container>
                        <el-header class="searchWrap">
                            <div class="left-panel">
                                <div style="font-size: 1.8vh;">
                                    全厂污染源：<span class="totalNumber">{{ count }}</span>
                                </div>
                            </div>
                            <div class="right-panel">
                                <el-select v-model="query.cate" placeholder="污染源分类" @change="handleQuery" clearable>
                                    <el-option v-for="e in drainTypeEnum.values" :key="e.key" :value="e.key"
                                        :label="e.text"></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" @row-click="rowClick"
                                @dataChange="updateCount">
                                <!-- <el-table-column type="index" width="50" /> -->
                                <el-table-column prop="number" label="编号" width="80" />
                                <el-table-column prop="name" label="名称" width="120" />
                                <el-table-column prop="type" label="类型" width="100">
                                    <template #default="scope">{{ drainTypeEnum[scope.row.cate]?.text }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="mgroup_name" label="所属工段" width="100" />
                                <el-table-column label="物料名称" min-width="100" show-overflow-tooltip />
                                <el-table-column label="物料分类" min-width="80" show-overflow-tooltip />
                                <el-table-column label="主要参数" min-width="100" show-overflow-tooltip />
                                <el-table-column label="封闭方式" min-width="100" show-overflow-tooltip />
                                <el-table-column label="输送/堆取方式" min-width="120" show-overflow-tooltip />
                                <el-table-column label="治理措施" min-width="100" show-overflow-tooltip />
                                <el-table-column label="生产设备" min-width="100" show-overflow-tooltip>
                                    <template #default="scope">
                                        <div v-for="item in scope.row.equip_data" v-bind:key="item.id">
                                            <div v-if="item.type == 10">
                                                <div>
                                                    <el-tag :type="runningStateEnum[item.running_state]?.type">{{
                                                        runningStateEnum[item.running_state]?.text }}</el-tag>|
                                                    {{ item.name }}
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="治理设备" min-width="100" show-overflow-tooltip>
                                    <template #default="scope">
                                        <div v-for="item in scope.row.equip_data" v-bind:key="item.id">
                                            <div v-if="item.type == 30">
                                                <div>
                                                    <el-tag :type="runningStateEnum[item.running_state]?.type">{{
                                                        runningStateEnum[item.running_state]?.text }}</el-tag>|
                                                    {{ item.name }}
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="监测设备" min-width="100" show-overflow-tooltip>
                                    <template #default="scope">
                                        <div v-for="item in scope.row.equip_data" v-bind:key="item.id">
                                            <div v-if="item.type == 40">
                                                <div>
                                                    <el-tag :type="runningStateEnum[item.running_state]?.type">{{
                                                        runningStateEnum[item.running_state]?.text }}</el-tag>|
                                                    {{ item.name }}
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="监控设备" min-width="100" show-overflow-tooltip>
                                    <template #default="scope">
                                        <div v-for="item in scope.row.equip_data" v-bind:key="item.id">
                                            <div v-if="item.type == 50">
                                                <div>
                                                    <el-tag :type="runningStateEnum[item.running_state]?.type">{{
                                                        runningStateEnum[item.running_state]?.text }}</el-tag>|
                                                    {{ item.name }}
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                            </scTable>
                        </el-main>
                    </el-container>
                </el-main>
            </el-container>
        </el-main>
    </el-container>
    <el-container v-else>
        <el-header class="panel_title">
            <div class="left-panel">污染源及关联设备信息
            </div>
            <div class="right-panel">
                <el-button type="primary" @click="handleClick">返回</el-button>
            </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>{{ detailItem.name }}</span>
                            </div>
                            <el-row class="infoLine">
                                <el-col :span="12">
                                    <div><span class="infotitle">物料名称</span>{{ detailItem.height }} </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>{{ 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>{{ eqc.name }}</span>
                            </div>
                            <el-row class="infoLine">
                                <el-col :span="12">
                                    <div><span class="infotitle">TSP：</span> 0.000 m³/h</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>{{ eqj.name }}</span>
                            </div>
                            <el-row class="infoLine">
                                <el-col :span="12">
									<div id="divPlugin" class="plugin"></div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-aside>
                <el-main>
                    <div class="aside_side">
                        <div class="pageTitle">污染源及关联设备动态信息</div>
                        <div id="dataChart2" style="width: 100%; height:200px;margin-top:1vh; padding: 4px"></div>
                        <div id="dataChart" style="width: 100%; height:200px;margin-top:1vh; padding: 4px"></div>

                        <div id="dataChart3" style="width: 100%; height:200px;margin-top:1vh; padding: 4px"></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";
import { drainTypeEnum } from "@/utils/enum.js";
import { runningStateEnum } from "@/utils/enum.js";
export default {
    data() {
        return {
            runningStateEnum,
            drainTypeEnum,
            count: 0,
            eqs: {},
            eqc: {},
            eqz: {},
			eqj: {},
            pollutantDetail: false,
            query: {},
            apiObj: this.$API.enp.drain.list,
            params: { type: 20, equip_data: 'base' },
            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: 0,
                    top: 'top',
                    textStyle: {
                        color: '#fff'
                    }
                },
                legend: {
                    top: '5%',
                    textStyle: {
                        color: '#fff'
                    }
                },
                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' }]
            },
        }
    },
    mounted() {
		let that = this;
		that.init();
    },
    methods: {
        initDom() {
            var chart1 = echarts.init(document.getElementById('dataChart'), 'dark');
            var chart2 = echarts.init(document.getElementById('dataChart2'), 'dark');
            var chart3 = echarts.init(document.getElementById('dataChart3'), 'dark');
            echarts.connect([chart1, chart2, chart3]);
        },
        backtoMap() {
            this.$emit('close')
        },
        updateCount(res, tableData) {
            this.count = res.count
        },
        initTimeNow() {
            var now = new Date();
            var start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24);
            this.biquery['start_time'] = this.$TOOL.dateFormat(start, 'yyyy-MM-dd hh:mm:00')
            this.biquery['end_time'] = this.$TOOL.dateFormat(now, 'yyyy-MM-dd hh:mm:00')
        },
        handleQuery() {
            this.$refs.table.queryData(this.query);
        },
        rowClick(row) {
            this.pollutantDetail = true;
            this.detailItem = row;
            this.$nextTick(() => {
                this.getEquipments(row.equipments);
                this.initTimeNow();
                this.initDom();
            })
        },
        getEquipments(ids) {
            let that = this;
            let reqs = [];
            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 == 40) { //监测设备
                        that.eqc = res;
                        that.getDetailData(2, id);
                    } else if (res.type == 30) { //治理设备
                        that.eqz = res;

                        that.getDetailData(3, id);
                    }
					else if (res.type == 50) { //监控设备
						debugger;
						this.login(res);//监控摄像头
                        that.eqj = res;
                    }
                })
            });
        },
        getDetailData(type, id) {
            var that = this;
            var bicode = 'enp_edata2'
            if (type == 1) {
                var myChart = echarts.getInstanceByDom(document.getElementById('dataChart'));
                bicode = 'enp_eq_rs'
                myChart.showLoading();
            } else if (type == 2) {
                var myChart2 = echarts.getInstanceByDom(document.getElementById('dataChart2'));
                myChart2.showLoading();
            } else if (type == 3) {
                var myChart3 = echarts.getInstanceByDom(document.getElementById('dataChart3'));
                bicode = 'enp_eq_rs'
                myChart3.showLoading();
            }
            // 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(bicode, 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.hideLoading()
                    myChart.setOption(newOption);
                } else if (type == 2) {
                    newOption.series = [
                        { type: 'line', encode: { y: 'tsp', seriesName: ["tsp"] } },
                        // { type: 'line', encode: { y: '温度', seriesName: ["温度"] } },
                        // { type: 'line', encode: { y: '压力', seriesName: ["压力"] } }
                    ]
                    newOption.title.text = that.eqc.name;
                    newOption.yAxis.minInterval = 1;
                    myChart2.setOption(newOption);
                    myChart2.hideLoading()
                } else if (type == 3) {
                    newOption.title.text = that.eqz.name;
                    newOption.yAxis.minInterval = 1;
                    myChart3.setOption(newOption);
                    myChart3.hideLoading()
                }
                // else {
                //     newOption.title.text = that.eqc.name;
                //     myChart4.setOption(newOption);
                //     echarts.connect([myChart3, myChart4])
                // }
            })
        },
        handleClick() {
            this.pollutantDetail = false;
            this.detailItem = {};
        },

		//监控摄像头
		//初始化插件
		init() {

			WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
			//初始化
			alert(1)
			WebVideoCtrl.I_InitPlugin("divPlugin", 200, 200, {
				iWndowType: 2, //分裂系数N*N
				bWndFull: true, //双击全屏
				cbInitPluginCompleted: function () {
                     alert(1)
					 WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(() => {
						// 检查插件是否最新
						WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
							if (bFlag) {
								alert("检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！");
							}
							});
						}, () => {
							alert("插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！");
						});

					},
				});

			},

        //摄像头登录
		login(jkdata){

			  WebVideoCtrl.I_Login(
							jkdata.ip,
							1,
							jkdata.port,
							jkdata.login_name,
							jkdata.login_pwd,
							{
								async: true,
								cgi: 1,
								success: (xmlDoc) => {
									console.log("登录成功", xmlDoc);
									//预览
									WebVideoCtrl.I_StartRealPlay(szIp + "_" + ipPort, {
										success: () => {
											console.log("预览成功");
										},
									});
								},
								error: (xmlDoc) => {
									console.log("登录失败", xmlDoc);
								},
							}
						);
		}

    }
}
</script>
<style scoped>
.plugin {
	width: 200px;
	height: 200px;
	/* background: #ffffff; */
}
</style>
