<template>
    <div>
        <Row :gutter="32">
            <i-col span="32">
                <row>
                    <!--筛选-->
                    <row>
            <span>
              <span class="title-span">
                <span class="date-btn" :style="dateBtnValue === '今日' ? 'background: #2D8CF0;color: #fff' : ''"
                      @click="dateBtnClick('今日')">今日</span>
                <span class="date-btn" :style="dateBtnValue === '本周' ? 'background: #2D8CF0;color: #fff' : ''"
                      @click="dateBtnClick('本周')">本周</span>
                <span class="date-btn" :style="dateBtnValue === '本月' ? 'background: #2D8CF0;color: #fff' : ''"
                      @click="dateBtnClick('本月')">本月</span>
                <span class="date-btn" :style="dateBtnValue === '自定义' ? 'background: #2D8CF0;color: #fff' : ''"
                      @click="dateBtnClick('自定义')">自定义</span>
              </span>
            </span>
                        <span class="title-select-date">
              <span class="view-text">{{dateBtnValue}}概览</span>
              <span v-if="dateBtnValue !== '自定义'" class="view-date">{{viewDate}}</span>
              <span class="left-10" v-if="dateBtnValue === '自定义'" style="vertical-align: top">
                <DatePicker v-model="selectStartTime" :options="options1" type="date" placeholder="请选择时间"
                            class="date-picker" size="small" @on-change="diyDateChange"></DatePicker>
                <span style="margin: 0 5px">至</span>
                <DatePicker v-model="selectEndTime" :options="options2" type="date" placeholder="请选择时间"
                            class="date-picker" size="small" @on-change="diyDateChange"></DatePicker>
                <Tooltip content="限制最大31天" placement="bottom">
                    <Icon type="ios-alert-outline" style="margin-left: 5px"/>
                </Tooltip>
              </span>
              <img src="../../../static/img/bsd-logo.png" class="title-logo"/>
            </span>
                    </row>
                    <!--5块客户数-->
                    <row class="top-20">
                        <Row class="text-center">
                            <i-col span="10">
                                <row type="flex" justify="center" class="code-row-bg">
                                    <i-col span="5" class="big-blank">
                                    </i-col>
                                    <i-col span="10" class="big-blank">
                                        <row class="top-5">
                                            <countTo :startVal='lastVal' :endVal='endVal' :duration='3000' class="huge-blank-font"></countTo>
                                        </row>
                                        <row><span class="weight-700">好友总数</span></row>
                                    </i-col>

<!--                                    <i-col span="5" class="big-blank">-->
<!--                                        <row class="top-5"><span class="huge-blank-font">{{customerViewVO.allValidCustomer}}</span>-->
<!--                                        </row>-->
<!--                                        <row><span class="left-10 weight-700">好友总数(去重)</span></row>-->
<!--                                    </i-col>-->
                                </row>
                            </i-col>
                            <i-col span="10">
                                <row type="flex" justify="center" class="code-row-bg">
<!--                                    <i-col span="4" class="big-blank">-->
<!--                                    </i-col>-->
                                    <i-col span="4" class="big-blank">
                                        <row class="top-15">
                                            <countTo :startVal='lastVal2' :endVal='endVal2' :duration='3000' class="big-blank-font"></countTo>

                                        </row>
                                        <row class="top-10"><span>新增好友</span></row>
                                    </i-col>
<!--                                    <i-col span="2" class="big-blank">-->
<!--                                    </i-col>-->
<!--                                    <i-col span="5" class="big-blank">-->
<!--                                        <row class="top-15"><span class="big-blank-font">{{customerViewVO.newValidCustomer}}</span>-->
<!--                                        </row>-->
<!--                                        <row class="top-10"><span>新增好友(去重)</span></row>-->
<!--                                    </i-col>-->
<!--                                    <i-col span="2" class="big-blank">-->
<!--                                    </i-col>-->
<!--                                    <i-col span="6" class="big-blank">-->
<!--                                        <row class="top-15"><span class="big-blank-font">{{customerViewVO.validDeleteCustomer}}</span>-->
<!--                                        </row>-->
<!--                                        <row class="top-10"><span>拉黑数(累计)</span></row>-->
<!--                                    </i-col>-->
                                </row>
                            </i-col>
                        </Row>
                    </row>
                    <!--柱状图-->
                    <row class="top-10">
                        <i-col span="16" class="outline">
                            <span class="blue-logo"></span>
                            <span class="chart-title-date">{{this.$moment(startTime).format("YYYY-MM-DD")}}至{{this.$moment(endTime).format("YYYY-MM-DD")}}（{{recentName}}）趋势图</span>
                            <ve-histogram :data="chartData" :extend="chartExtend" :colors="chartColor"></ve-histogram>
                        </i-col>
                        <i-col span="8" class="padding-left-10">
                            <row class="outline">
                                <span class="blue-logo"></span>
                                <span class="chart-title-span">好友&会员情况</span>
                                <row class="chart-row">
                                    <i-col span="6" style="border-right: 1px solid #D3D3D3;">
                                        <row class="chart-row-customer-row1"></row>
                                        <row class="percent-text"><span>好友总数(去重)</span></row>
                                        <row class="chart-row-customer-row2"></row>
                                        <row class="percent-text"><span>会员总数</span></row>
                                        <row class="chart-row-customer-row3"></row>
                                    </i-col>
                                    <i-col span="18">
                                        <row class="chart-row-customer-row1"></row>
                                        <row><span class="percent-span" style="background: #EC6A2F;"
                                                   :style="percent1"></span><span>{{customerViewVO.allValidCustomer}}</span>
                                        </row>
                                        <row class="chart-row-customer-row2"></row>
                                        <row><span class="percent-span" style="background: #FFCC00;"
                                                   :style="percent2"></span><span>{{customerViewVO.allVipCount}}</span>
                                        </row>
                                        <row class="chart-row-customer-row3"></row>
                                    </i-col>
                                </row>
                            </row>
                        </i-col>

                    </row>
                    <!--前十名-->
                    <row class="top-10">
                        <i-col span="6">
                            <row class="outline chart-top-10-row">
                                <span class="blue-logo"></span>
                                <span class="chart-top-10-title-span">零售公司店均新增好友top10</span>
                                <row v-if="customerViewVO.orgNewCustomerList.length === 0" class="text-center">暂无数据
                                </row>
                                <row v-if="customerViewVO.orgNewCustomerList.length > 0" class="padding-12">
                                    <row v-for="item in customerViewVO.orgNewCustomerList" :key="item.orgId">
                                        <i-col span="8" class="text-ellipsis" style="text-align: left;padding-right: 5px;">
                                            {{item.orgName}}
                                        </i-col>
                                        <i-col span="16"><span class="top10-percent-span" style="background: #FFCC00;"
                                                               :style="'width:' + item.newCustomerCount/customerViewVO.orgNewCustomerList[0].newCustomerCount*80 + '%'"></span><span>{{item.newCustomerCount}}</span>
                                        </i-col>
                                    </row>
                                </row>
                            </row>
                        </i-col>

                        <i-col span="10" class="padding-left-10">
                            <row class="outline chart-top-10-row">
                                <span class="blue-logo"></span>
                                <span class="chart-top-10-title-span">店铺新增好友top10</span>
                                <row v-if="customerViewVO.shopNewCustomerList.length === 0" class="text-center">暂无数据
                                </row>
                                <row v-if="customerViewVO.shopNewCustomerList.length > 0" class="padding-12">
                                    <row v-for="item in customerViewVO.shopNewCustomerList" :key="item.shopId">
                                        <i-col span="9" class="text-ellipsis" style="text-align: left;padding-right: 5px;">
                                            {{item.shopName}}
                                        </i-col>
                                        <i-col span="15"><span class="top10-percent-span" style="background: #EC6A2F;"
                                                               :style="'width:' + item.newCustomerCount/customerViewVO.shopNewCustomerList[0].newCustomerCount*80 + '%'"></span><span>{{item.newCustomerCount}}</span>
                                        </i-col>
                                    </row>
                                </row>
                            </row>
                        </i-col>

                        <i-col span="8" class="padding-left-10">
                            <row class="outline chart-top-10-row">
                                <span class="blue-logo"></span>
                                <span class="chart-top-10-title-span">推广为0的店铺数</span>
                                <span style="position: absolute;right: 5px;cursor: pointer"
                                      @click="zeroExtendMore"><span style="vertical-align: top">更多</span><img
                                        src="../../../static/img/right-angle.png"/></span>
                                <row v-if="customerViewVO.zeroExtendList.length === 0" class="text-center">暂无数据</row>
                                <row v-if="customerViewVO.zeroExtendList.length > 0" class="padding-12">
                                    <row>
                                        <i-col span="1"><span style="visibility: hidden">visible</span></i-col>
                                        <i-col span="9">零售公司</i-col>
                                        <i-col span="7">店铺总数</i-col>
                                        <i-col span="7">0推广店铺数</i-col>
                                    </row>
                                    <row v-for="item in customerViewVO.zeroExtendList" :key="item.orgId">
                                        <i-col span="1"><span style="visibility: hidden">visible</span></i-col>
                                        <i-col span="9" class="text-ellipsis">{{item.orgName}}</i-col>
                                        <i-col span="7">{{item.allShopCount}}</i-col>
                                        <i-col span="7">{{item.zeroShopCount}}</i-col>
                                    </row>
                                </row>
                            </row>
                        </i-col>
                    </row><!--条形图结束-->
                    <Spin style="top: 50px" size="large" fix v-if="spinShow"></Spin>
                </row>
            </i-col>
        </Row>
    </div>
</template>
<script>
    import customerView from "../../services/datacenter/customerView";
    import countTo from 'vue-count-to';

    export default {
        inject: ['setMenuName'],
        components: {
            countTo
        },
        data() {
            return {
                userId: null,
                intervalId : 0,
                //加载遮罩
                spinShow: false,
                dateBtnValue: "今日",
                viewDate: this.$moment(new Date()).format("YYYY-MM-DD"),
                //近七天日期
                recentName: "近七天",
                //选中时间
                selectStartTime: "",
                selectEndTime: "",
                //柱状图时间
                startTime: "",
                endTime: "",
                //人数占比
                percent1: "width:0%",
                percent2: "width:0%",
                customerViewVO: {
                    newCustomer: 0,
                    newValidCustomer: 0,
                    allCustomer: 0,
                    allValidCustomer: 0,
                    validDeleteCustomer: 0,
                    allVipCount: 0,
                    //柱状图
                    customerList: [],
                    validCustomerList: [],
                    //下面3大块
                    orgNewCustomerList: [],
                    shopNewCustomerList: [],
                    zeroExtendList: [],
                },
                chartExtend: {
                    barWidth: 28,
                    label: {show: true, position: "top"}
                },
                chartColor: ["#ffcc00", "#ec6a2f"],
                chartData: {
                    columns: ['date', '新增好友', '新增好友(去重)'],
                    rows: [
                        {'date': '1/1', '新增好友': 14, '新增好友(去重)': 14},
                        {'date': '1/1', '新增好友': 20, '新增好友(去重)': 10},
                        {'date': '1/1', '新增好友': 30, '新增好友(去重)': 25},
                        {'date': '1/1', '新增好友': 11, '新增好友(去重)': 11},
                        {'date': '1/1', '新增好友': 14, '新增好友(去重)': 14},
                        {'date': '1/1', '新增好友': 20, '新增好友(去重)': 10},
                        {'date': '1/1', '新增好友': 30, '新增好友(去重)': 25},
                    ]
                },
                timer: null,
                startVal: 0,
                endVal: 0,
                lastVal: 0,
                startVal2: 0,
                endVal2: 0,
                lastVal2: 0
            }
        },
        computed: {
            options1() {
                let that = this;
                return {
                    disabledDate(date) {
                        if (that.selectEndTime == null || that.selectEndTime == "") {
                            return false;
                        } else {
                            return date && date.valueOf() > that.$moment(that.selectEndTime) || date && date.valueOf() < that.$moment(that.selectEndTime).add(-31, "days");
                        }
                    }
                }

            },
            options2() {
                let that = this;
                return {
                    disabledDate(date) {
                        if (that.selectStartTime == null || that.selectStartTime == "") {
                            return false;
                        } else {
                            return date && date.valueOf() < that.$moment(that.selectStartTime) || date && date.valueOf() > that.$moment(that.selectStartTime).add(31, "days");
                        }
                    }
                }
            },
        },
        mounted: function () {
            if(!JSON.parse(sessionStorage.getItem("loginInfo"))){
                this.$router.push("/login");
                return;
            }
            this.userId = JSON.parse(sessionStorage.getItem("loginInfo")).userId;

            this.dateBtnClick('今日');
            this.timingRefresh();
        },
        // 页面销毁清除定时器
        beforeDestroy() {
            if (this.timer){
                clearInterval(this.timer);
            }
        },
        methods: {
            //页面重绘
            resizeWindow: function () {
                let event = document.createEvent("HTMLEvents");
                event.initEvent("resize", true, true);
                window.dispatchEvent(event);
            },
            //占比重绘
            percentResize: function () {
                let allValidCustomer = this.customerViewVO.allValidCustomer;
                let allVipCount = this.customerViewVO.allVipCount;
                let sum = allValidCustomer + allVipCount;
                if (sum === 0) {
                    this.percent1 = "width:0%";
                    this.percent2 = "width:0%";
                    return;
                }
                if (allValidCustomer > allVipCount) {
                    let p2 = Math.floor(allVipCount / allValidCustomer * 100 * 100) / 100 * 0.8;
                    this.percent1 = "width:80%";
                    this.percent2 = "width:" + p2 + "%";
                }
                if (allValidCustomer < allVipCount) {
                    let p1 = Math.floor(allValidCustomer / allVipCount * 100 * 100) / 100 * 0.8;
                    this.percent1 = "width:" + p1 + "%";
                    this.percent2 = "width:80%";
                }
                if (allValidCustomer === allVipCount) {
                    this.percent1 = "width:80%";
                    this.percent2 = "width:80%";
                }
            },

            //0转null
            checkZero: function (value) {
                if (value === 0) {
                    return null;
                }
                return value;
            },
            //日期按钮
            dateBtnClick: function (value) {
                switch (value) {
                    case '今日':
                        this.dateBtnValue = "今日";
                        this.recentName = "近七天";
                        this.dateSelectChange('今日');
                        this.chartExtend.barWidth = 28;
                        this.chartExtend.label.show = true;
                        break;
                    case '本周':
                        this.dateBtnValue = "本周";
                        this.recentName = "本周";
                        this.dateSelectChange('本周');
                        this.chartExtend.barWidth = 28;
                        this.chartExtend.label.show = true;
                        break;
                    case '本月':
                        this.dateBtnValue = "本月";
                        this.recentName = "本月";
                        this.dateSelectChange('本月');
                        this.chartExtend.barWidth = 8;
                        this.chartExtend.label.show = false;
                        break;
                    case '自定义':
                        this.dateBtnValue = "自定义";
                        this.recentName = "自定义";
                        this.diyDateChange();
                        break;
                }
            },
            //自定义日期
            diyDateChange: function () {
                if (this.selectStartTime && this.selectEndTime) {
                    //超过15天，柱状图不显示数字
                    if (this.$moment(this.selectEndTime).valueOf() - this.$moment(this.selectStartTime).valueOf() > 15 * 24 * 60 * 60 * 1000) {
                        this.chartExtend.barWidth = 8;
                        this.chartExtend.label.show = false;
                    } else {
                        this.chartExtend.barWidth = 28;
                        this.chartExtend.label.show = true;
                    }
                    this.dateSelectChange('自定义');
                }
            },
            //日期改变
            dateSelectChange: function (value) {
                //概览日期text
                let nowDate = this.$moment(new Date());
                switch (value) {
                    case '今日':
                        this.viewDate = nowDate.format("YYYY-MM-DD");
                        this.selectStartTime = this.$moment(new Date()).format("YYYY-MM-DD 00:00:00");
                        this.selectEndTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
                        this.startTime = this.$moment(new Date()).add(-6, "days").format("YYYY-MM-DD 00:00:00");
                        this.endTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
                        break;
                    case '本周':
                        this.viewDate = nowDate.startOf('week').format("YYYY-MM-DD") + ' 至 ' + this.$moment(new Date()).format("YYYY-MM-DD");
                        this.selectStartTime = this.$moment(new Date()).startOf("week").format("YYYY-MM-DD 00:00:00");
                        this.selectEndTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
                        this.startTime = this.selectStartTime;
                        this.endTime = this.$moment(new Date()).endOf("week").format("YYYY-MM-DD HH:mm:ss");
                        break;
                    case '本月':
                        this.viewDate = nowDate.startOf('month').format("YYYY-MM-DD") + ' 至 ' + this.$moment(new Date()).format("YYYY-MM-DD");
                        this.selectStartTime = this.$moment(new Date()).startOf("month").format("YYYY-MM-DD 00:00:00");
                        this.selectEndTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
                        this.startTime = this.selectStartTime;
                        this.endTime = this.$moment(new Date()).endOf("month").format("YYYY-MM-DD HH:mm:ss");
                        break;
                    case '自定义':
                        this.selectStartTime = this.$moment(this.selectStartTime).format("YYYY-MM-DD 00:00:00");
                        this.selectEndTime = this.$moment(this.selectEndTime).format("YYYY-MM-DD 23:59:59");
                        this.startTime = this.selectStartTime;
                        this.endTime = this.selectEndTime;
                        break;
                }
                this.getMainList();
                this.getMainVip();
                this.getMainDateList();
                this.getMainDel();
                this.getAllCount();
            },
            getAllCount: function(){
                let that = this;
                that.lastVal = that.startVal;

                customerView.getAllCount({
                    userId: this.userId
                },function (data) {
                    if (data.data.code !== "0000") {
                        that.$Message.error("系统异常");
                    }
                    data = data.data.results;
                    that.customerViewVO.allCustomer = data.allCustomer;
                    that.customerViewVO.allValidCustomer = data.allValidCustomer;
                    that.endVal = data.allCustomer;

                });
            },
            /**mainList*/
            getMainList: function () {
                let request = {
                    userId: this.userId,
                    selectStartTime: this.selectStartTime == null ? null : this.$moment(this.selectStartTime).format("YYYY-MM-DD 00:00:00"),
                    selectEndTime: this.selectEndTime == null ? null : this.$moment(this.selectEndTime).format("YYYY-MM-DD HH:mm:ss"),
                    startTime: this.startTime,
                    endTime: this.endTime
                };
                let that = this;

                that.lastVal2 = that.startVal2;
                customerView.getMainRequest(request, function (data) {
                    if (data.data.code !== "0000") {
                        that.$Message.error("系统异常");
                    }
                    data = data.data.results;
                    // that.customerViewVO = data;//数据部分没刷新
                    that.customerViewVO.newCustomer = data.newCustomer;
                    that.endVal2 = data.newCustomer;

                    that.customerViewVO.newValidCustomer = data.newValidCustomer;
                    that.customerViewVO.customerList = data.customerList;
                    that.customerViewVO.validCustomerList = data.validCustomerList;
                    that.chartData.rows = [];
                    if (that.startTime && that.endTime) {
                        let tmpStartTime = that.startTime;
                        while (that.$moment(tmpStartTime).format("YYYY-MM-DD") <= that.$moment(that.endTime).format("YYYY-MM-DD")) {
                            let date = that.$moment(tmpStartTime).format("M-DD");
                            let customerDO = that.customerViewVO.customerList.filter(customer => date === that.$moment(customer.registerTime).format("M-DD"));
                            let validCustomerDO = that.customerViewVO.validCustomerList.filter(customer => date === that.$moment(customer.registerTime).format("M-DD"));
                            let customerSize = customerDO.length === 0 ? 0 : customerDO[0].customerSize;
                            let validCustomerSize = validCustomerDO.length === 0 ? 0 : validCustomerDO[0].customerSize;
                            let obj = {
                                date: date,
                                "新增好友": customerSize,
                                "新增好友(去重)": validCustomerSize,
                            };
                            that.chartData.rows.push(obj);
                            tmpStartTime = that.$moment(tmpStartTime).add(1, "days").format("YYYY-MM-DD HH:mm:ss");
                        }
                    }
                    //占比重绘
                    that.percentResize();
                    //页面重绘(柱状图)
                    that.resizeWindow();
                });
            },
            getMainVip: function () {
                let request = {
                    userId: this.userId
                };
                let that = this;
                customerView.getMainVipRequest(request, function (data) {
                    if (data.data.code !== "0000") {
                        that.$Message.error("系统异常");
                    }
                    data = data.data.results;
                    that.customerViewVO.allVipCount = data.allVipCount;
                    //占比重绘
                    that.percentResize();
                    //页面重绘(柱状图)
                    that.resizeWindow();
                });
            },
            getMainDateList: function () {
                let request = {
                    userId: this.userId,
                    selectStartTime: this.selectStartTime == null ? null : this.$moment(this.selectStartTime).format("YYYY-MM-DD 00:00:00"),
                    selectEndTime: this.selectEndTime == null ? null : this.$moment(this.selectEndTime).format("YYYY-MM-DD HH:mm:ss")
                };
                let that = this;
                //加载遮罩
                this.spinShow = true;
                customerView.getMainDateRequest(request, function (data) {
                    that.spinShow = false;
                    if (data.data.code !== "0000") {
                        that.$Message.error("系统异常");
                    }
                    data = data.data.results;
                    that.customerViewVO.orgNewCustomerList = data.orgNewCustomerList;
                    that.customerViewVO.shopNewCustomerList = data.shopNewCustomerList;
                    that.customerViewVO.zeroExtendList = data.zeroExtendList;
                    //占比重绘
                    that.percentResize();
                    //页面重绘(柱状图)
                    that.resizeWindow();
                });
            },
            getMainDel: function () {
                let request = {
                    userId: this.userId
                };
                let that = this;
                //加载遮罩
                customerView.getMainDel(request, function (data) {
                    if (data.data.code !== "0000") {
                        that.$Message.error("系统异常");
                    }
                    that.customerViewVO.validDeleteCustomer = data.validDeleteCustomer;
                });
            },
            //零推广更多跳转
            zeroExtendMore: function () {
                this.setMenuName("首页", "推广为0店铺数");
                let that = this;
                this.$router.push({
                    path: '/zero/extend/detail',
                    query: {
                        userId: that.userId,
                        startDate: that.selectStartTime,
                        endDate: that.selectEndTime,
                    }
                });
            },
            //定时刷新
            timingRefresh: function () {
                let that = this;
                // that.timer =  setInterval(function () {
                //     that.dateBtnClick(that.dateBtnValue);
                // }, 1000 * 60 * 5);
            }

        }
    }
</script>
<style scoped>
    /*日期按钮*/
    .date-btn {
        display: inline-block;
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 8px;
        cursor: pointer;
    }

    /*概览字体*/
    .view-text {
        font-size: 18px;
        font-weight: 600;
        font-family: "Microsoft YaHei";
    }

    /*概览日期*/
    .view-date {
        font-size: 16px;
        color: #97A4B3;
        margin-left: 10px;
    }

    /*5大块客户数*/
    .huge-blank-font {
        color: #EC6A2F;
        font-size: 40px;
        font-weight: 700;
        font-family: 'Microsoft YaHei';
    }

    .big-blank {
        min-height: 100px;
        border-radius: 4px;
    }

    .big-blank-font {
        color: #2D8CF0;
        font-size: 28px;
        font-weight: 700;
        font-family: 'Microsoft YaHei';
    }

    .weight-700 {
        font-weight: 700;
    }

    /*蓝色logo*/
    .blue-logo {
        background: #1A80D2;
        height: 26px;
        width: 6px;
        border-radius: 3px;
        display: inline-block;
        vertical-align: middle;
    }

    /*外面的边框*/
    .outline {
        border: #e8ecf2 2px solid;
        padding: 10px;
        border-radius: 4px;
    }

    .left-10 {
        margin-left: 10px;
    }

    .left-15 {
        margin-left: 15px;
    }

    .left-25 {
        margin-left: 25px;
    }

    .top-5 {
        margin-top: 5px;
    }

    .top-10 {
        margin-top: 10px;
    }

    .top-15 {
        margin-top: 15px;
    }

    .top-20 {
        margin-top: 20px;
    }

    .top-30 {
        margin-top: 30px;
    }

    .padding-12 {
        padding: 12px;
    }

    .padding-left-10 {
        padding-left: 10px;
    }

    /*占比样式*/
    .percent-text {
        height: 38px;
        line-height: 38px;
        text-align: right;
        padding-right: 8px;
    }

    .percent-span {
        display: inline-block;
        vertical-align: middle;
        height: 38px;
        line-height: 38px;
        margin-right: 5px;
    }

    /*文字过长...*/
    .text-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*top10,占比样式*/
    .top10-percent-span {
        display: inline-block;
        vertical-align: middle;
        height: 18px;
        line-height: 18px;
        margin-right: 5px;
    }

    .title-span {
        width: 330px;
        border: 1px solid #E8ECF2;
        border-radius: 8px;
        padding: 3px;
        display: inline-block;
    }

    .title-select-date {
        height: 38px;
        line-height: 38px;
        margin-left: 25px;
    }

    .date-picker {
        width: 120px;
    }

    .title-logo {
        position: absolute;
        right: 0px;
        top: -10px;
    }

    .text-center {
        text-align: center;
    }

    .chart-title-date {
        display: inline-block;
        margin-left: 5px;
    }

    .chart-title-span {
        display: inline-block;
        margin-left: 5px;
    }

    .chart-row {
        height: 399px;
        padding: 99px 15px;
    }

    .chart-row-customer-row1 {
        height: 50px;
    }

    .chart-row-customer-row2 {
        height: 25px;
    }

    .chart-row-customer-row3 {
        height: 50px;
    }

    .chart-top-10-row {
        min-height: 425px;
    }

    .chart-top-10-title-span {
        display: inline-block;
        margin-left: 5px;
    }
</style>
