
<style>
.sex{
  height: calc(100% - 25px);
}
.statistics-title {
  font-size: 24px;
  color: #111;
  margin-bottom: 30px;
  font-family: perfectFont;
}
.sex .conten-box{
    display: flex;
    flex-direction: column;
    height: calc(100% - 62px);
}
.sex .conten-box  .el-card .el-card__header {
  font-weight: normal !important;
}
.Opinionpolls .conten-box .top{
    flex: 1!important;
    margin-bottom: 25px;
}
.sex .conten-box .bottom{
    flex: .8;
}
.sex .conten-box .left{
    height: 100%;
}
.sex .conten-box .el-card.blue {
  background: #0D2481!important;
  color: #fff !important;
  height: calc(100% - 2px);
}
.sex .conten-box .el-card .el-card__body {
    padding: 20px;
    height: calc(100% - 98px);
    max-height: calc(100% - 98px);
}
.sex .conten-box .img {
    display: flex;
    align-items: flex-end;
    text-align: center;
    padding: 20px 70px 10px 70px!important;
    justify-content: space-between;
    font-size: 14px;
}
.sex .sjsm{
    display: flex;
    flex-direction: column;
}
.sex .sjsm>div{
    margin-bottom: 20px;
}
.sex .sjsm>div{
    flex: 1;
    background:rgba(244,245,249,1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}
.sex .sjsm>div .left{
    display: flex;
    align-items: center;
}
.sex .sjsm>div .left img{
    padding-right: 10px;
}
.sex .sjsm>div .right{
    text-align: right;
    color: #888888;
    font-size: 12px;
}
.sex .hight-font{
    color: #0D2481 !important;
    font-size: 14px;
}
.sex .secondDiv .el-card .el-card__header{
    border: none!important;
    font-size: 14px;
    color:#111111;
    font-weight: bold!important;
    padding: 18px 20px 0 18px!important;
}
.Opinionpolls .countryUl li{
    position: relative;
    padding: 30px 0;
    border-bottom: 1px solid #E2E4EF;
    display: flex;
    align-items: center;
}
.Opinionpolls .countryUl li .rightSpan{
    position: absolute;
    right: 0;
    bottom: 32px;
}

.Opinionpolls .countryUl li img{
    width:40px;
    height:26px;
    border-radius:6px;

}
.Opinionpolls .index{
    font-weight: bold;
    margin-right:20px;
}
.Opinionpolls .countryUl li:nth-child(1) .index{
    color:#FFA475 
}
.Opinionpolls .countryUl li:nth-child(2) .index{
    color:#94B877 
}
.Opinionpolls .countryUl li:nth-child(3) .index{
    color:#0D2481 
}
.Opinionpolls .countryUl li:nth-child(4) .index{
    color:#55BDE9 
}
.Opinionpolls .timeUl li{
    position: relative;

}
.timeChart{
    width: 100%;
    height: 386px;
}
</style>
<template>
  <div class="sex Opinionpolls" v-loading="loading">
    <div class="statistics-title bold18">意见调查统计</div>
    <div class="conten-box">
        <el-row :gutter="25" class="top">
            <el-col :span="6" style="height: 450px">
                <el-card style="height: calc(100% - 2px);background:#FFA475">
                    <p style="color:#FDFEFE;margin-top:15px;font-size:14px" >意见调查总和</p>
                    <div>
                        <img style="width:80%;display:block;margin:0 auto" src="../../assets/img/tongji/yj1.png" alt="">
                        <img style="width:100%;" src="../../assets/img/tongji/yj2.png" alt="">
                    </div>  
                </el-card>
            </el-col>
            <el-col :span="18" class="left">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>景点评分（前10名）</span>
                    </div>
                    <el-row :gutter="80" style="height: 100%;">
                        <!-- <sexChart v-if="isShowTop" style="height:350px;" :myData="chartData" :strArr="strArr"/> -->
                        <div id="tenTopchart" style="height:350px;" class="tenTopchart" ref="tenTopchart"></div>
                    </el-row>
                </el-card>
            </el-col>
            
        </el-row>
        <el-row :gutter="22" class="secondDiv" style="margin-bottom:30px">
            <el-col :span="9" style="height: 100%;">
                <el-card style="height: calc(100% - 2px);">
                    <div slot="header" class="clearfix">
                        <span>首选印象产品</span>
                    </div>
                    <shopChart v-if="isShowTop" :shopChartData="shopChartData"/>
                </el-card>
            </el-col>
            <el-col :span="7">
                <el-card style="height: calc(100% - 2px);">
                    <div slot="header" class="clearfix">
                        <span>下次出行时间</span>
                    </div>
                    <!-- <sexChart :myData="chartData" :strArr="strArr"/> -->
                    <div id="timeChart" class="timeChart" ref="timeChart"></div>
                </el-card>
            </el-col>
            <el-col :span="8" style="height: 100%;">
                <el-card style="height: calc(100% - 2px);">
                    <div slot="header" class="clearfix">
                        <span>国家/目的地</span>
                    </div>
                    <ul class="countryUl">
                        <li v-for="(item,index) in dataList.countryList" :key="index">
                            <span class="index" style="font-size:14px">NO.{{index+1}}</span>
                            <!-- <img style="margin:0 15px" src="../../assets/img/tongji/cj.png" alt=""> -->
                            <span style="font-size:18px;">{{item.ItemName}}</span>
                            <span class="rightSpan">{{item.OrderCount}}<span class="font-size-12">票</span> </span>
                        </li>
                    </ul>
                </el-card>
                
            </el-col>
        </el-row>
        <el-row :gutter="22" class="bottom" >
            <el-col :span="16"  style="height: 100%;">
                <el-card style="height: 100%;">
                    <div slot="header" class="clearfix">
                        <span>数据说明</span>
                    </div>
                    <div style="height: 100%;" class="sjsm">
                        <div v-for="(item, index) in dataList.GuestSurveyShopList" :key="index">
                            <div class="left">
                                <img v-if="item.SeasonType === 1" src="../../assets/img/tongji/cj.png" alt="">
                                <img v-if="item.SeasonType === 2" src="../../assets/img/tongji/xj.png" alt="">
                                <img v-if="item.SeasonType === 3" src="../../assets/img/tongji/qj.png" alt="">
                                <img v-if="item.SeasonType === 4" src="../../assets/img/tongji/dj.png" alt="">
                                <span class="font-size-12">{{item.SeasonTypeName}}</span>
                            </div>
                            <div class="right">
                                <p>累计报名<span class="hight-font">{{item.SeasonCount}}</span>人，关联购物金额<span class="hight-font">{{item.TotalMoney}}</span>万，报名均价为<span class="hight-font">{{item.Unit_Price}}</span>元</p>
                                <p>最喜爱产品<span class="hight-font">《{{item.LtName}}》</span></p>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8" style="height: 100%;">
                <el-card style="height: 100%;">
                    <div slot="header" class="clearfix">
                        <el-row style="width:100%">
                            <el-col :span="12" size="30">
                            推荐解答
                            </el-col>
                            <!-- <el-col :span="12" class="right-title">
                            <i class="iconfont icondianzan1"></i> 点赞
                            </el-col> -->
                        </el-row>
                    </div>
                    <div class="situ">
                        <div class="c">根据对客户意见调查的统计可以，更好的了解客人的喜好，消费能力的判读，从而快速的推荐团队给客人</div>
                        <div class="bot"  @click="drawer = true">
                            查看更多，参与讨论(1)
                            <i class="el-icon-d-arrow-right"></i>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
    <el-drawer
      size='695px'
      :visible.sync="drawer"
      direction="rtl"
      :with-header="false">
      <discussBox :id="discussID"/>
    </el-drawer>
  </div>
</template>
<script>
import sexChart from './model/sexChart'
import shopChart from './model/shopChart'
import discussBox from "./model/discussBox";
export default {
    components: {
        sexChart,
        shopChart,
        discussBox
    },
    data() {
        return {
            discussID: 0,
            drawer: false,
            chartData: [],
            shopChartData: [],
            SexOrder: [],
            loading: false,
            strArr: [],
            orders:[],
            dataList:{},
            isShowTop:false,

            //出游日期
            chuyouDate:[],
            chuyouList:[],
        };
    },watch:{
        
    },
    mounted() {
        this.getData();
        
    },
    methods: {
        initTimeChart(){
            var myChart = this.$echarts.init(document.getElementById('timeChart'));
            var option={
                xAxis: {
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    type: 'category',
                    data: this.chuyouDate
                },
                yAxis: {
                    show : false,
                    type: 'value'
                },
                series: [{
                    data: this.chuyouList,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    },
                    barWidth: '20',
                    itemStyle: {
                        color: '#0D2481'
                    }
                    
                }]
            };
            myChart.setOption(option);
        },
        //初始化top10插件
        initTopTen(){
            let myChart = this.$echarts.init(document.getElementById('tenTopchart'));
            let option = {
                grid: {
                    left: '75',
                    right: '75'
                },
                xAxis: {
                    data: this.strArr,
                    type: 'category',
                    axisLabel: {
                        color: '#999999'
                    },
                    axisLine: {
                        show: false
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: '#999999',
                        formatter: '{value} %'
                    },
                    max: 100,
                },
                series: [{
                    data: this.chartData,
                    type: 'bar',
                    itemStyle: {
                        color: '#FFA475',
                    },
                    barWidth: '44'
                }]
            };
            myChart.setOption(option);
        },
        getData(){
            this.loading = true
            this.apipost("/api/Statistic/GetGuestSurveyList", {}, res => {
                this.loading=false;
                if(res.data.resultCode==1){
                    this.dataList=res.data.data;
                    this.chartData=[];
                    this.strArr=[];
                    var totalTenCount=0;
                    var totalChuyou=0;
                    this.dataList.TopTenScenicList.forEach((x,index) => {
                        this.strArr.push('TOP'+(index+1));
                        totalTenCount+=x.OrderCount;
                    });
                    this.dataList.TopTenScenicList.forEach((x,index) => {
                        this.chartData.push();
                        this.chartData.push(parseFloat(((x.OrderCount/totalTenCount)*100).toFixed(2)));
                    });
                    //获取总的出游首选
                    this.dataList.souXuanList.forEach(x=>{
                        totalChuyou+=x.OrderCount;
                    })
                    var hefeng = this.dataList.souXuanList[0].OrderCount
                    var xierdunSj = this.dataList.souXuanList[1].OrderCount
                    var dantuan = this.dataList.souXuanList[2].OrderCount
                    var xierdun = this.dataList.souXuanList[3].OrderCount
                    //和风畅享系列
                    this.shopChartData.push(
                        {
                            num: Number(((hefeng/totalChuyou)*100).toFixed(0)),
                            color: "#0D2481",
                            text: '和风畅享系列'
                        }
                    )
                    this.shopChartData.push(
                        {
                            num: Number(((xierdunSj/totalChuyou)*100).toFixed(0)),
                            color: "#FFA97C",
                            text: '希尔顿假期<升级版>'
                        }
                    )
                    this.shopChartData.push(
                        {
                            num: Number(((dantuan/totalChuyou)*100).toFixed(0)),
                            color: "#99BD7B",
                            text: '单团小团系列(本州大阪.东京)'
                        }
                    )
                    this.shopChartData.push(
                        {
                            num: Number(((xierdun/totalChuyou)*100).toFixed(0)),
                            color: "#D2C9F1",
                            text: '希尔顿假期系列'
                        }
                    )

                    //遍历出游计划
                    this.chuyouDate=[];
                    this.chuyouList=[];
                    this.dataList.chuyouList.forEach(x=>{
                        this.chuyouDate.push(x.ItemName);
                        this.chuyouList.push(x.OrderCount);
                    })

                    this.isShowTop=true;
                    this.initTimeChart();
                    this.initTopTen();
                }else{
                    this.$message.error(res.data.message);
                }

            });
        },
    }
}
</script>