<template>
    <div id="yqtj">
        <div class="top-yqtj">
            <div class="numCount">
                <div v-for="(item,index) in numCount">
                    <img class="numCount-icon" :src="item.img" alt="">
                    <div class="numCount-title">{{item.title}}<span class="el-icon-top"></span></div><br>
                    <div class="numCount-title" style="color: #ff9f00;">{{item.tjxx}}</div><br>
                    <div class="numCount-num" v-text="item.num"></div>
                    <img class="numCount-style" :src="img6" alt="">
                </div>
            </div>
        </div>
        <div class="bottom-yqtj">
            <div class="myEcharts" v-for="item in echartsList">
                <div class="myEcharts-title">
                    <img :src="img7" alt="">
                    <div v-text="item.title"></div>
                </div>
                <div :id="item.id" class="everyCharts"></div>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
#yqtj {
    width: 97%;
    height: 92%;
    margin: 20px;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    .top-yqtj {
        width: 100%;
        height: 20%;
        .numCount {
            width: 80%;
            height: 100%;
            margin: auto;
            div {
                width: 20%;
                float: left;
                .numCount-icon {
                    width: 100px;
                    height: 100px;
                    float: left;
                }
                .numCount-title {
                    width: calc(100% - 120px);
                    height: 20px;
                    margin-top: 10px;
                    padding-left: 10px;
                    box-sizing: border-box;
                    span {
                        float: right;
                        margin-right: 20px;
                        color: yellow;
                        font-weight: 900;
                    }
                }
                .numCount-num {
                    width: calc(100% - 120px);
                    height: 60px;
                    padding-left: 10px;
                    box-sizing: border-box;
                    font-size: 30px;
                    color: #00fee9;
                }
                .numCount-style {
                    margin-top: -12px;
                }
            }
        }
    }
    .bottom-yqtj {
        width: 100%;
        height: 80%;
        .myEcharts {
            width: 49%;
            height: 49%;
            float: left;
            margin-top: 1%;
            margin-left: 1%;
            .myEcharts-title {
                width: 150px;
                height: 30px;
                line-height: 30px;
                position: relative;
                left: 11%;
                top: 7%;
                img {
                    width: 30px;
                    height: 30px;
                    float: left;
                }
                div {
                    float: left;
                    font-size: 18px;
                    font-weight: 500;
                }
            }
            .everyCharts {
                width: 96%;
                height: calc(100% - 30px);
                margin-left: 2%;
                background-image: url(../../assets/img/yqjc/67.png);
                background-size: 100% 100%;
            }
        }
    }
}
</style> 

<script>
import img1 from '../../assets/img/yqjc/61.png';
import img2 from '../../assets/img/yqjc/62.png';
import img3 from '../../assets/img/yqjc/63.png';
import img4 from '../../assets/img/yqjc/64.png';
import img5 from '../../assets/img/yqjc/65.png';
import img6 from '../../assets/img/yqjc/66.png';
import img7 from '../../assets/img/yqjc/68.png';
import * as echarts from "echarts";
import { queryYqtjgy, queryYqtjWeek, queryYqtj } from '../../api/es.js';
import { getTime_extent,get } from '../../util/http_util';
export default {
    name: 'yqtj',
    data() {
        return {
            img6: img6,
            img7: img7,
            numCount: [
                {
                    img: img1,
                    title: '舆情总量',
                    tjxx:'',
                    num: 0
                },
                {
                    img: img2,
                    title: 'TWITTER',
                    tjxx:'',
                    num: 0
                },
                {
                    img: img3,
                    title: 'FACEBOOK',
                    tjxx:'',
                    num: 0
                },
                {
                    img: img4,
                    title: '新闻',
                    tjxx:'',
                    num: 0
                },
                {
                    img: img5,
                    title: '智库',
                    tjxx:'',
                    num: 0
                },
            ],
            echartsList: [
                {
                    id: 'weekNum',
                    title: '本周总量',
                    option: {
                        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                        title: {
                            show: false,
                            text: '本周总量',
                            top: '-2%',
                            left: '10%',
                            textStyle: {
                                color: 'white'
                            }
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                                axisLabel: {
                                    textStyle: {
                                        color: 'white'
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: '#127186',
                                        width: 5,//这里是为了突出显示加上的
                                    }
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                splitLine: {
                                    show: false
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: 'white'
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: '#127186',
                                        width: 5,//这里是为了突出显示加上的
                                    }
                                }
                            }
                        ],
                        series: [
                            {
                                type: 'line',
                                smooth: true,
                                lineStyle: {
                                    width: 0
                                },
                                showSymbol: false,
                                label: {
                                    show: true,
                                    position: 'top'
                                },
                                areaStyle: {
                                    opacity: 0.8,
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(255, 191, 0)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(224, 62, 76)'
                                    }])
                                },
                                emphasis: {
                                    focus: 'series'
                                },
                                data: [220, 302, 181, 234, 210, 290, 150]
                            }
                        ]
                    }
                },
                {
                    id: 'newsNum',
                    title: '各洲新闻分布',
                    option: {
                        title: {
                            show: false,
                            text: '各洲新闻分布',
                            top: '-2%',
                            left: '10%',
                            textStyle: {
                                color: 'white'
                            }
                        },
                        legend: {
                            // data: ['总量', '新闻', 'Twitter', 'Facebook', '智库'],
                            textStyle: {
                                color: 'white'
                            },
                            top: '20',
                            right: '20'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                            axisLabel: {
                                textStyle: {
                                    color: 'white'
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#127186',
                                    width: 5,//这里是为了突出显示加上的
                                }
                            }
                        },
                        yAxis: {
                            type: 'value',
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                textStyle: {
                                    color: 'white'
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#127186',
                                    width: 5,//这里是为了突出显示加上的
                                }
                            }
                        },
                        series: [
                            {
                                barWidth: '10%',
                                type: 'bar',
                                data: [120, 132, 101, 134, 90, 230, 210]
                            }
                        ]
                    }
                },
                {
                    id: 'allNum',
                    title: '各国总量',
                    option: {
                        title: {
                            show: false,
                            text: '各国总量',
                            top: '-2%',
                            left: '10%',
                            textStyle: {
                                color: 'white'
                            }
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01],
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                textStyle: {
                                    color: 'white'
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#127186',
                                    width: 5,//这里是为了突出显示加上的
                                }
                            },

                        },
                        yAxis: {
                            type: 'category',
                            data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)'],
                            axisLabel: {
                                textStyle: {
                                    color: 'white'
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#127186',
                                    width: 5,//这里是为了突出显示加上的
                                }
                            },
                            axisTick: {
                                show: false
                            },
                        },
                        series: [
                            {
                                type: 'bar',
                                data: [18203, 23489, 29034, 104970, 131744, 630230],
                                itemStyle: {
                                    color: '#F7941D',
                                    barBorderRadius: [20, 20, 20, 20]
                                }
                            }
                        ]
                    }
                },
                {
                    id: 'mediaNum',
                    title: '媒体分布',
                    option: {
                        color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
                        title: {
                            show: false,
                            text: '媒体分布',
                            top: '-2%',
                            left: '10%',
                            textStyle: {
                                color: 'white'
                            }
                        },
                        radar: [
                            {
                                indicator: [
                                    { text: '指标一' },
                                    { text: '指标二' },
                                    { text: '指标三' },
                                    { text: '指标四' },
                                    { text: '指标五' }
                                ],
                                center: ['50%', '55%'],
                                radius: 80,
                                startAngle: 90,
                                splitNumber: 4,
                                shape: 'circle',
                                name: {
                                    formatter: '{value}',
                                    textStyle: {
                                        color: 'white',
                                        fontSize: 16
                                    }
                                },
                                splitArea: {
                                    areaStyle: {
                                        color: ['none', '#146C82', 'none', '#146C82'],
                                        shadowColor: 'rgba(0, 0, 0, 0.2)',
                                        shadowBlur: 10
                                    }
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: 'rgba(211, 253, 250, 0.8)'
                                    }
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: 'rgba(211, 253, 250, 0.8)'
                                    }
                                }
                            }
                        ],
                        series: [
                            {
                                name: '雷达图',
                                type: 'radar',
                                emphasis: {
                                    lineStyle: {
                                        width: 4
                                    }
                                },
                                data: [
                                    {
                                        value: [100, 8, 0.40, -80, 2000]
                                    }
                                ]
                            }
                        ]
                    }
                }
            ]
        }
    },
    activated() {
        //舆情概要统计
        queryYqtjgy().then(res => {
            this.numCount[0].num = res.news + res.twitter + res.facebook + res.thinkTank;
            this.numCount[1].num = res.twitter;
            this.numCount[2].num = res.facebook;
            this.numCount[3].num = res.news;
            this.numCount[4].num = res.thinkTank;
        }).then(res=>{
            //本周总量
            let paramWeek = {
                "dimensionInterval": "DAY",
                'stTime': getTime_extent(7).pre_rq_start,
                'edTime': getTime_extent(0).pre_rq_end,
            };
            queryYqtjWeek(paramWeek).then(res => {
                this.echartsList[0].option.xAxis[0].data = [];
                this.echartsList[0].option.series[0].data = [];
                res.forEach(item => {
                    this.echartsList[0].option.xAxis[0].data.push(item.title);
                    this.echartsList[0].option.series[0].data.push(item.count);
                });
            });
            //各洲新闻分布
            let param = {
                'dimensionRegion': 'CONTINENT'
            }
            queryYqtj(param).then(res => {
                this.echartsList[1].option.xAxis.data = [];
                this.echartsList[1].option.series[0].data = [];
                res.forEach(item => {
                    if(item.title != undefined && item.title != ''){
                        this.echartsList[1].option.xAxis.data.push(item.title);
                        this.echartsList[1].option.series[0].data.push(item.count);
                    }
                });
            });
            //各国总量
            let countryParam = {
                'dimensionRegion': 'COUNTRY'
            }
            queryYqtj(countryParam).then(res => {
                this.echartsList[2].option.yAxis.data = [];
                this.echartsList[2].option.series[0].data = [];
                res.forEach(item => {
                    this.echartsList[2].option.yAxis.data.unshift(item.title);
                    this.echartsList[2].option.series[0].data.unshift(item.count);
                });
            });
            //媒体分布
            let mediaParam = {
                'dimensionRegion': 'MEDIA'
            };
            queryYqtj(mediaParam).then(res => {
                this.echartsList[3].option.radar[0].indicator = [];
                this.echartsList[3].option.series[0].data[0].value = [];
                res.slice(0,20).forEach(item => {
                    this.echartsList[3].option.radar[0].indicator.push({ text: item.title });
                    this.echartsList[3].option.series[0].data[0].value.push(item.count);
                });
            });
            //初始化echarts图表
            setTimeout(() => {
                this.echartsList.forEach((item) => {
                    echarts.init(document.getElementById(item.id)).setOption(item.option);
                });
            }, 1000);
            get('api/rest/sentiment/querySentimentAccountNum').then(res => {
                this.numCount[1].tjxx = res.twitterUser;
                this.numCount[2].tjxx = res.facebookUser;
                this.numCount[3].tjxx = res.newsWebsite;
                this.numCount[4].tjxx = res.thinkTankSite;
            }).catch(err => {
                this.$message.warning(err.message);
            })
        })
        .catch((err)=>{
            this.$message.warning(err.message);
        })
    }
}
</script>