<template lang="html">
    <div style="height: 40px;width: 100%;">
        <div style="display: inline-block;">
            <label class="control-label">组织机构</label>
            <right-tree :userid.sync='obj.userid'
                        :source.sync='obj.source'
                        @re-res="getRes"></right-tree>
        </div>
        <div style="display: inline-block;">
            <label class="control-label">用户类型</label>
            <v-select
                    v-model="f_user_type"
                    placeholder='用户类型'
                    value-single="true"
                    :value.sync="f_user_type"
                    :options='Gasusertype'
                    close-on-select>
            </v-select>
        </div>
        <div class="mystyle" style="display: inline-block;">
            <label class="control-label">失联分组项</label>
            <v-select v-model="groupname"
                      placeholder='分组项'
                      value-single="true"
                      :value.sync="groupname"
                      :options='getgroupname'
                      close-on-select></v-select>
        </div>
        <label class="control-label"></label>
        <button class="btn btn-success" @click="searchdata()">查询</button>
    </div>
    <div id="LargeScreenAnalysisEcharts" style="width: 100%;height: 90%;">
        <div style=" height: 50%;width: 100%;">
            <div id="LargeScreenAnalysis1" class="divtype" style=" height: 100%;width: 49%;"></div>
            <div id="LargeScreenAnalysis2" class="divtype" style=" height: 100%;width: 49%;"></div>
        </div>
        <div style=" height: 50%;width: 100%;">
            <div id="LargeScreenAnalysis3" class="divtype" style=" height: 100%;width: 49%;"></div>
            <div id="LargeScreenAnalysis4" class="divtype" style=" height: 100%;width: 49%;"></div>
        </div>
    </div>
</template>

<script>
    import co from 'co'
    import echarts from 'echarts'
    import {HttpResetClass} from 'vue-client'

    let getData = function* (self) {
        let load = new HttpResetClass()
        let f_user_type=''
        if (self.f_user_type[0]=='') {
            f_user_type="like '%用%'"
        }else {
            f_user_type=self.f_user_type[0]
        }
        load.load('POST', 'rs/logic/LargeScreenAnalysis',
            {
                data: {
                    f_filialeids: self.obj.resids,
                    groupname: self.groupname[0],
                    f_user_type: f_user_type
                }
            },
            {resolveMsg: null, rejectMsg: null}).then((res) => {
            console.log('开始进行图表重新选渲染')
            self.set(res.data)
        })
    }
    export default {
        title: '大屏分析',
        data() {
            return {
                Gasusertype: [],
                f_user_type: [""],
                groupname: ['f_user_type'],
                getgroupname: [
                    {label: '用户类型', value: 'f_user_type'},
                    {label: '用气性质', value: 'f_gasproperties'},
                    {label: '分公司', value: 'f_filiale'}
                ],
                obj: {
                    userid: this.$login.f.id,
                    source: `tool.getFullTree(this.getRights().where(row.getType() == $organization$))`,
                    res: this.$login.f.f_fengongsi,
                    resids: this.$login.f.f_orgids
                },
                xc1: '',
                xc2: '',
                xc3: '',
                xc4: ''
            }
        },
        ready() {
            this.getTypes()
            // this.searchdata()
        },
        methods: {
            getTypes() {
                let f_user_type = []
                let load = new HttpResetClass()
                let self = this
                load.load('POST', 'rs/sql/getTypes', {data: {}}, {warnMsg: null, resolveMsg: null}).then((res) => {
                    let i = 0
                    for (i = 0; i < res.data.length; i++) {
                        f_user_type[i] = res.data[i].f_user_type
                    }
                    self.Gasusertype = self.uniq(f_user_type)
                })
            },
            uniq(array) {
                array.sort();
                let arraytype = [{label: '全部', value: ''}]
                let dr = {label: '', value: ''}
                if (array[0] == null) {
                    dr = {label: '空值', value: 'is null'}
                } else {
                    dr = {label: array[0], value: "='" + array[0] + "'"}
                }
                arraytype.push(dr)
                let temp = [array[0]];
                console.log(array[0] + "array[0]")
                for (var i = 1; i < array.length; i++) {
                    if (array[i] !== temp[temp.length - 1]) {
                        if (array[i] == null) {
                            dr = {label: '空值', value: 'is null'}
                        } else {
                            dr = {label: array[i], value: "='" + array[i] + "'"}
                        }
                        arraytype.push(dr);
                        temp.push(array[i]);
                    }
                }
                return arraytype;
            },
            set(res) {
                //失联数据res:分组项，t:用户数
                let loseData = res.loseData
                //用气数据f_type:日期,f_oughtamount1:用气量(民用),f_oughtamount2:用气量(非民用)
                let gasData = res.gasData
                //指令数据 instructTime:日期,c:指令上报总表具数,c0:指令上报成功表具数,
                //f_bv2:指令成功率,f_bv1:表具指令成功率,f_bv0:综合指令成功率
                let instructData = res.instructData
                //抄表数据every_time:日期,f_bv1:抄表成功率,f_gas:日均户均用气量(成功),f_gas1:日均户均用气量(在用)
                let meterData = res.meterData
                this.xc1 = echarts.init(document.getElementById('LargeScreenAnalysis1'))
                this.xc1.setOption({
                    title: {
                        text: '用气分析图',
                        left: 'center',
                        y: '10',
                        textStyle: {
                            color: '#000',
                            fontSize: 20
                        }
                    },
                    color: ['#61a0a8', '#2f4554'],
                    tooltip: {
                        trigger: 'axis',
                        extraCssText: 'width: auto;height: auto;'
                    },
                    grid: {
                        top: '20%',
                    },
                    legend: {
                        y: '50',
                        data: ['用气量(民用)(m³)', '用气量(非民用)(m³)']
                    },
                    toolbox: {
                        y: '50',
                        show: true,
                        right: '2%',
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: []},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            name: '日期',
                            nameTextStyle: {
                                fontSize: 15
                            },
                            type: 'category',
                            data: gasData.f_type
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '用气量(m³)',
                            nameTextStyle: {
                                fontSize: 15
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    fontSize: 15,
                                    'color': '#7d8000'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '用气量(民用)(m³)',
                            type: 'bar',
                            smooth: true,
                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
                            data: gasData.f_oughtamount1,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        },
                        {
                            name: '用气量(非民用)(m³)',
                            type: 'bar',
                            smooth: true,
                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
                            data: gasData.f_oughtamount2,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        }
                    ]
                },true)
                this.xc2 = echarts.init(document.getElementById('LargeScreenAnalysis2'))
                this.xc2.setOption({
                    title: {
                        text: '表具失联分析',
                        'left': 'center',
                        textStyle: {
                            color: '#000',
                            fontSize: 15
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        extraCssText: 'width: auto;height: auto;'
                    },
                    toolbox: {
                        right:'2%',
                        show: true,
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: []},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            name: '分组项',
                            nameTextStyle: {
                                fontSize: 15
                            },
                            type: 'category',
                            data: loseData.res,
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    fontSize: 15
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            name: '用户数(户)',
                            nameTextStyle: {
                                fontSize: 15
                            },
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '表具数',
                            type: 'bar',
                            data: loseData.t,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        }
                    ]
                },true)
                this.xc3 = echarts.init(document.getElementById('LargeScreenAnalysis3'))
                this.xc3.setOption({
                    'title': {
                        'text': '抄表率分析',
                        'left': 'center',
                        'y': '10',
                        'textStyle': {
                            'color': '#696969',
                            fontSize: 20
                        }
                    },
                    'color': '#384757',
                    'tooltip': {
                        'trigger': 'axis',
                        'extraCssText': 'width: auto;height: auto;'
                    },
                    'legend': {
                        'data': [
                            {
                                'name': '日均户均用气量(成功)(m³)',
                                'icon': 'circle',
                                'textStyle': {
                                    'color': '#7d8000',
                                    fontSize: 12
                                }
                            },
                            {
                                'name': '日均户均用气量(在用)(m³)',
                                'icon': 'circle',
                                'textStyle': {
                                    'color': '#7b5541',
                                    fontSize: 12
                                }
                            },
                            {
                                'name': '抄表成功率%',
                                'icon': 'circle',
                                'textStyle': {
                                    'color': '#ffaa00',
                                    fontSize: 12
                                }
                            }
                        ],
                        'top': '10%',
                        'textStyle': {
                            'color': '#fff'
                        }
                    },
                    'xAxis': [
                        {
                            'type': 'category',
                            'data': meterData.every_time,
                            'axisPointer': {
                                'type': 'shadow'
                            },
                            'axisLabel': {
                                'show': true,
                                'textStyle': {
                                    'color': '#7d838b',
                                    fontSize: 10
                                }
                            }
                        }
                    ],
                    'yAxis': [
                        {
                            'type': 'value',
                            'name': '用气量(m³)',
                            nameTextStyle: {
                                fontSize: 10
                            },
                            'show': true,
                            'axisLabel': {
                                'show': true,
                                'textStyle': {
                                    'color': '#7d8000',
                                    fontSize: 10
                                }
                            }
                        },
                        {
                            'type': 'value',
                            'name': '完成率(%)',
                            nameTextStyle: {
                                fontSize: 10
                            },
                            'show': true,
                            'axisLabel': {
                                'show': true,
                                'textStyle': {
                                    'color': '#7d838b',
                                    fontSize: 10
                                }
                            }
                        }
                    ],
                    'grid': {
                        'top': '20%'
                    },
                    'series': [
                        {
                            'name': '日均户均用气量(成功)(m³)',
                            nameTextStyle: {
                                fontSize: 10
                            },
                            'type': 'bar',
                            'data': meterData.f_gas,
                            'markPoint': {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            },
                            'itemStyle': {
                                'normal': {
                                    'color': '#7d8000'
                                }
                            },
                            'barWidth': 'auto',
                            'barGap': '0'
                        },
                        {
                            'name': '日均户均用气量(在用)(m³)',
                            nameTextStyle: {
                                fontSize: 10
                            },
                            'type': 'bar',
                            'data': meterData.f_gas1,
                            'barWidth': 'auto',
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            },
                            'itemStyle': {
                                'normal': {
                                    'color': '#7b5541'
                                }
                            },
                            'barGap': '0'
                        },
                        {
                            'name': '抄表成功率%',
                            'type': 'line',
                            'yAxisIndex': 1,
                            'data': meterData.f_bv1,
                            'itemStyle': {
                                'normal': {
                                    'color': '#ffaa00',
                                    fontSize: 10
                                }
                            },
                            'smooth': true
                        }
                    ]
                },true)
                this.xc4 = echarts.init(document.getElementById('LargeScreenAnalysis4'))
                this.xc4.setOption({
                    'title': {
                        'text': '指令成功率分析',
                        'left': 'center',
                        'y': '10',
                        'textStyle': {
                            'color': '#696969',
                            fontSize: 20
                        }
                    },
                    'color': '#384757',
                    'tooltip': {
                        'trigger': 'axis',
                        'extraCssText': 'width: auto;height: auto;'
                    },
                    'legend': {
                        'data': [
                            {
                                'name': '指令成功表具数',
                                'icon': 'circle',
                                'textStyle': {
                                    'color': '#5b5',
                                    fontSize: 12
                                }
                            },
                            {
                                'name': '总表具数',
                                'icon': 'circle',
                                'textStyle': {
                                    'color': '#233564',
                                    fontSize: 12
                                }
                            },
                            {
                                'name': '表具指令成功率%',
                                'icon': 'circle',
                                'textStyle': {
                                    'color': '#ffaa00',
                                    fontSize: 12
                                }
                            },
                            {
                                'name': '指令成功率%',
                                'icon': 'circle',
                                'textStyle': {
                                    'color': '#ffaaff',
                                    fontSize: 12
                                }
                            },
                            {
                                'name': '综合指令成功率%',
                                'icon': 'circle',
                                'textStyle': {
                                    'color': '#ff0000',
                                    fontSize: 12
                                }
                            }
                        ],
                        'top': '10%',
                        'textStyle': {
                            'color': '#fff'
                        }
                    },
                    'xAxis': [
                        {
                            'type': 'category',
                            'data': instructData.instructTime,
                            'axisPointer': {
                                'type': 'shadow'
                            },
                            'axisLabel': {
                                'show': true,
                                'textStyle': {
                                    'color': '#7d838b',
                                    fontSize: 15
                                }
                            }
                        }
                    ],
                    'yAxis': [
                        {
                            'type': 'value',
                            'name': '表具数',
                            nameTextStyle: {
                                fontSize: 10
                            },
                            'show': true,
                            'axisLabel': {
                                'show': true,
                                'textStyle': {
                                    'color': '#7d838b',
                                    fontSize: 10
                                }
                            }
                        },
                        {
                            'type': 'value',
                            'name': '成功率%',
                            nameTextStyle: {
                                fontSize: 15
                            },
                            'show': true,
                            'axisLabel': {
                                'show': true,
                                'textStyle': {
                                    'color': '#ffaa00',
                                    fontSize: 15
                                }
                            }
                        }
                    ],
                    'grid': {
                        'top': '20%'
                    },
                    'series': [
                        {
                            'name': '指令成功表具数',
                            nameTextStyle: {
                                fontSize: 15
                            },
                            'type': 'bar',
                            'data': instructData.c0,
                            'markPoint': {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            },
                            'barWidth': 'auto',
                            'itemStyle': {
                                'normal': {
                                    'color': '#5b5'
                                }
                            },
                            'barGap': '0'
                        },
                        {
                            'name': '总表具数',
                            nameTextStyle: {
                                fontSize: 15
                            },
                            'type': 'bar',
                            'data': instructData.c,
                            'markPoint': {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            },
                            'barWidth': 'auto',
                            'itemStyle': {
                                'normal': {
                                    'color': '#233564'
                                }
                            },
                            'barGap': '0'
                        },
                        {
                            'name': '表具指令成功率%',
                            'type': 'line',
                            'yAxisIndex': 1,
                            'data': instructData.f_bv1,
                            'itemStyle': {
                                'normal': {
                                    'color': '#ffaa00',
                                    fontSize: 15
                                }
                            },
                            'smooth': true
                        },
                        {
                            'name': '指令成功率%',
                            'type': 'line',
                            'yAxisIndex': 1,
                            'data': instructData.f_bv2,
                            'itemStyle': {
                                'normal': {
                                    'color': '#ffaaff',
                                    fontSize: 15
                                }
                            },
                            'smooth': true
                        },
                        {
                            'name': '综合指令成功率%',
                            'type': 'line',
                            'yAxisIndex': 1,
                            'data': instructData.f_bv0,
                            'itemStyle': {
                                'normal': {
                                    'color': '#ff0000',
                                    fontSize: 15
                                }
                            },
                            'smooth': true
                        }
                    ]
                },true)
            },
            searchdata() {
                console.log("进入查询")
                let getGen = getData(this)
                co(getGen)
            }
        }
    }
</script>

<style>
    .mystyle {
        float: right;
        padding-right: 10%;
    }
    .divtype{
        display: inline-block;
    }
</style>
