数据图表版本

src/main/resources/static/css/supplier-center/encyclopedia/charts.css

@@ -13,6 +13,9 @@
   .header-title p.small{line-height: 30px;font-size: 16px;color: #666666;font-weight: normal;text-align: center}
   .header-time{width: 33.33%;height:100%;float: right;box-sizing: border-box;text-align: right; }
   .chart-content{width: 1200px;margin: 0 auto;padding-top: 100px;min-height: 600px;}
+  .chart-content-empty{ width: 100%;height: 600px; box-sizing: border-box;padding: 100px 0;margin-top:30px;text-align: center;color: #4A4F58;line-height: 30px;font-size: 16px;background: #FFF; }
+  .chart-content-empty img{ width: 260px;height: 200px; }
+  .chart-content-empty p{color: #999999; }
   .chart-content .chart-title{ width: 100%;float: left; line-height: 80px;font-size: 24px;color: #333333;font-weight: bold;}
   .chart-content .chart-title span{line-height: 80px;font-size: 16px;color: #333333;font-weight: normal;}
   .chart-content-text{ min-height: 100px;width: 100%;box-sizing: border-box;padding: 24px;background: #FFFFFF;float: left;margin-bottom: 16px; }
@@ -88,7 +91,7 @@
   .chartHeadCenter.account .wrap{}
   .chartHeadCenter .logo{ width: 24vw;height: auto; margin-right: 4vw;border-right: 1px solid #e1e1e1;box-sizing: border-box;padding-right:4vw;float: left;}
   .chartHeadCenter .logo.none{border-right: none;}
-  .chartHeadCenter .logo.none img{width: 24vw;height: auto;display: block;}
+  .chartHeadCenter .logo.none img{width: auto;height: 12vw;display: block;}
   .header-logo{float: left;width: 100%;}
   .header-title{float: left;width: 100%;height: 10vw;}
   .header-title p{line-height: 10vw;font-size: 4vw;color: #333333;font-weight: bold;float: left;}

src/main/resources/static/js/supplier-center/encyclopedia/charts.js

@@ -15,12 +15,27 @@ const chartContent = new Vue({
         summarize2:'',
         isLoading:false,
         isPreview:true,
+        isChartEmpty:false,
         queryParams:{
             type:2,
             shopId:'',
             marketReportId:'',
             startTime:'',
             endTime:''
+        },
+
+        pickerOptions1: {
+            disabledDate(time) {
+                // 获取时间选择器的月份信息
+                const timeYear = time.getFullYear(); // 获取时间选择器的年份
+                let timeMonth = time.getMonth() + 1; // 获取时间选择器的月份
+                if (timeMonth >= 1 && timeMonth <= 9) {
+                    timeMonth = "0" + timeMonth; // 如果月份小于10，前面补0
+                }
+                const elTimeData = timeYear.toString() + timeMonth.toString(); // 组合年份和月份字符串
+                // 根据需要禁用多个月份，这里禁用了2021年的10月和11月作为选择范围
+                return elTimeData === "202210" || elTimeData === "202211" || elTimeData === "202312";
+            }
         }
     },
     computed: {
@@ -43,15 +58,34 @@ const chartContent = new Vue({
                 _this.shopChartPreview()
             }, 1100);
         },
+        // 选择时间
+        handleDatePick() {
+            if (this.dataTime && this.dataTime.length > 0) {
+                this.queryParams.startTime = this.dataTime[0]
+                this.queryParams.endTime = this.dataTime[1]
+            } else {
+                this.queryParams.startTime = ''
+                this.queryParams.endTime = ''
+            }
+            this.shopChartPreview()
+        },
         shopChartPreview(){
             const _self = this;
             SupplierApi.shopChartPreview(this.queryParams,function (response) {//列表初始化
                 if(response.code===0){
-                    _self.chartInit(response.data)
+                    if(response.data.code === 0){
+                        _self.isChartEmpty = false
+                        setTimeout(() => {
+                            _self.chartInit(response.data)
+                        }, 500);
+                    }else{
+                        _self.isChartEmpty = true
+                    }
                 }
             })
         },
         chartInit(data){
+            this.yearMonth =  data.yearMonth
             this.volumeList =  data.volumeList
             this.bannerList =  data.bannerList
             this.shopInfo =  data.shopInfo

src/main/resources/static/js/supplier-center/encyclopedia/mixins/chartsMixin.js

@@ -2,8 +2,49 @@
 const chartsMixin = function () {// 通知消息
     return {
         data(){
-            return{
-
+            return {
+                dataTime: '',
+                yearMonth: []
+            }
+        },
+        computed:{
+            pickerOptions(){
+                const _self = this
+                return {
+                    disabledDate(time) {
+                        // 获取时间选择器的年份信息
+                        const timeYear = time.getFullYear(); // 获取时间选择器的年份
+                        // 获取时间选择器的月份信息
+                        let timeMonth = time.getMonth() + 1; // 获取时间选择器的月份
+                        if (timeMonth >= 1 && timeMonth <= 9) {
+                            timeMonth = "0" + timeMonth; // 如果月份小于10，前面补0
+                        }
+                        const elTimeData = timeYear.toString() + timeMonth.toString(); // 组合年份和月份字符串
+                        // 根据需要禁用多个月份，这里禁用了2021年的10月和11月作为选择范围
+                        return _self.yearMonth.includes(elTimeData)
+                    },
+                    shortcuts: [{
+                        text: '本月',
+                        onClick(picker) {
+                            picker.$emit('pick', [new Date(), new Date()]);
+                        }
+                    }, {
+                        text: '今年至今',
+                        onClick(picker) {
+                            const end = new Date();
+                            const start = new Date(new Date().getFullYear(), 0);
+                            picker.$emit('pick', [start, end]);
+                        }
+                    }, {
+                        text: '最近六个月',
+                        onClick(picker) {
+                            const end = new Date();
+                            const start = new Date();
+                            start.setMonth(start.getMonth() - 6);
+                            picker.$emit('pick', [start, end]);
+                        }
+                    }]
+                }
             }
         },
         methods: {

src/main/resources/templates/supplier-center/encyclopedia/charts.html

@@ -27,250 +27,277 @@
                         <img class="h5Only" v-if="shopInfo.logo" :src="shopInfo.logo" alt="采美 生美/医美采购服务平台"/>
                     </a>
                 </div>
-                <div class="header-title">
+                <div class="header-title" v-if="!isChartEmpty">
                     <p>营销数据看板</p>
                     <p class="small" v-text="shopInfo.chartTitle"></p>
                 </div>
+
                 <div class="header-time" v-if="isPreview">
-                    <el-date-picker
-                            class="time"
-                            v-model="queryParams.startTime"
-                            type="month"
-                            format="yyyy-MM"
-                            value-format="yyyy-MM"
-                            style="width: 150px"
-                            @change="shopChartPreview"
-                            placeholder="选择开始月份">
-                    </el-date-picker>
-                    至
-                    <el-date-picker
-                            class="time"
-                            v-model="queryParams.endTime"
-                            type="month"
-                            format="yyyy-MM"
-                            value-format="yyyy-MM"
-                            style="width: 150px"
-                            @change="shopChartPreview"
-                            placeholder="选择结束月份">
-                    </el-date-picker>
+                    <template v-if="isPC">
+                        <el-date-picker
+                                v-model="dataTime"
+                                type="monthrange"
+                                align="right"
+                                unlink-panels
+                                format="yyyy-MM"
+                                value-format="yyyy-MM"
+                                range-separator="至"
+                                start-placeholder="开始月份"
+                                end-placeholder="结束月份"
+                                :picker-options="pickerOptions"
+                                @change="handleDatePick"
+                        >
+                        </el-date-picker>
+                    </template>
+                    <template v-else>
+                        <el-date-picker
+                                class="time"
+                                v-model="queryParams.startTime"
+                                type="month"
+                                format="yyyy-MM"
+                                value-format="yyyy-MM"
+                                style="width: 150px"
+                                @change="shopChartPreview"
+                                :picker-options="pickerOptions1"
+                                placeholder="选择开始月份">
+                        </el-date-picker>
+                        至
+                        <el-date-picker
+                                class="time"
+                                v-model="queryParams.endTime"
+                                type="month"
+                                format="yyyy-MM"
+                                value-format="yyyy-MM"
+                                style="width: 150px"
+                                :picker-options="pickerOptions1"
+                                @change="shopChartPreview"
+                                placeholder="选择结束月份">
+                        </el-date-picker>
+                    </template>
                 </div>
             </div>
         </div>
     </header>
     <div class="chart-content clear" v-if="isLoading">
-        <div class="chart-content-main clear">
-            <div class="chart-main-top clear">
-                <div class="chart-main-top-title">采美数字化营销漏斗</div>
-                <div class="chart-main-top-main">
-                    <div class="chart-main-top-left">
-                        <div class="chart-main-top-left-li a">
-                            <div class="li-title">展现量</div>
-                            <div class="li-texts"><p>在搜索结果页面展现相关内容关键词提炼/关键词布局</p></div>
-                        </div>
-                        <div class="chart-main-top-left-li b">
-                            <div class="li-title">点击量</div>
-                            <div class="li-texts none"><p>内容撰写质量</p></div>
-                        </div>
-                        <div class="chart-main-top-left-li c">
-                            <div class="li-title">访问量</div>
-                            <div class="li-texts"><p>用户搜索关键词查询结果后访问官网页面，系统为用户打上智能标签</p></div>
-                        </div>
-                        <div class="chart-main-top-left-li d">
-                            <div class="li-title">咨询量</div>
-                            <div class="li-texts"><p>跟踪标签/精准营销/定向推送通过CRM系统进行线索培育</p></div>
-                        </div>
-                        <div class="chart-main-top-left-li e">
-                            <div class="li-title">报备&成交量</div>
-                            <div class="li-texts min none"><p>销售与服务，促使成单</p></div>
-                        </div>
-                    </div>
-                    <div class="chart-main-top-mids">
-                        <div class="chart-main-top-mids-li">
-                            <a href="javascript:void(0)" data-id="section-1" class="chart-main-top-mids-ch a" v-text="shopInfo.impressions"></a>
-                        </div>
-                        <div class="chart-main-top-mids-li">
-                            <a href="javascript:void(0)" data-id="section-1" class="chart-main-top-mids-ch b" v-text="shopInfo.hits"></a>
-                        </div>
-                        <div class="chart-main-top-mids-li">
-                            <a href="javascript:void(0)" data-id="section-2" class="chart-main-top-mids-ch c" v-text="shopInfo.visits"></a>
-                        </div>
-                        <div class="chart-main-top-mids-li">
-                            <a href="javascript:void(0)" data-id="section-3" class="chart-main-top-mids-ch d" v-text="shopInfo.consultation"></a>
-                        </div>
-                        <div class="chart-main-top-mids-li">
-                            <a href="javascript:void(0)" data-id="section-3" class="chart-main-top-mids-ch e" v-text="shopInfo.report"></a>
-                        </div>
-                    </div>
-                    <div class="chart-main-top-right">
-                        <div class="chart-main-top-right-li">
-                            <div class="chart-main-top-right-tips">
-                                <span class="tips a">品牌推广阶段</span>
+        <template v-if="!isChartEmpty">
+            <div class="chart-content-main clear">
+                <div class="chart-main-top clear">
+                    <div class="chart-main-top-title">采美数字化营销漏斗</div>
+                    <div class="chart-main-top-main">
+                        <div class="chart-main-top-left">
+                            <div class="chart-main-top-left-li a">
+                                <div class="li-title">展现量</div>
+                                <div class="li-texts"><p>在搜索结果页面展现相关内容关键词提炼/关键词布局</p></div>
+                            </div>
+                            <div class="chart-main-top-left-li b">
+                                <div class="li-title">点击量</div>
+                                <div class="li-texts none"><p>内容撰写质量</p></div>
+                            </div>
+                            <div class="chart-main-top-left-li c">
+                                <div class="li-title">访问量</div>
+                                <div class="li-texts"><p>用户搜索关键词查询结果后访问官网页面，系统为用户打上智能标签</p></div>
+                            </div>
+                            <div class="chart-main-top-left-li d">
+                                <div class="li-title">咨询量</div>
+                                <div class="li-texts"><p>跟踪标签/精准营销/定向推送通过CRM系统进行线索培育</p></div>
+                            </div>
+                            <div class="chart-main-top-left-li e">
+                                <div class="li-title">报备&成交量</div>
+                                <div class="li-texts min none"><p>销售与服务，促使成单</p></div>
                             </div>
-                            <p>在采美站外公域的推广结果</p>
                         </div>
-                        <div class="chart-main-top-right-li">
-                            <div class="chart-main-top-right-tips">
-                                <span class="tips b">潜客运营阶段</span>
+                        <div class="chart-main-top-mids">
+                            <div class="chart-main-top-mids-li">
+                                <a href="javascript:void(0)" data-id="section-1" class="chart-main-top-mids-ch a" v-text="shopInfo.impressions"></a>
+                            </div>
+                            <div class="chart-main-top-mids-li">
+                                <a href="javascript:void(0)" data-id="section-1" class="chart-main-top-mids-ch b" v-text="shopInfo.hits"></a>
+                            </div>
+                            <div class="chart-main-top-mids-li">
+                                <a href="javascript:void(0)" data-id="section-2" class="chart-main-top-mids-ch c" v-text="shopInfo.visits"></a>
+                            </div>
+                            <div class="chart-main-top-mids-li">
+                                <a href="javascript:void(0)" data-id="section-3" class="chart-main-top-mids-ch d" v-text="shopInfo.consultation"></a>
+                            </div>
+                            <div class="chart-main-top-mids-li">
+                                <a href="javascript:void(0)" data-id="section-3" class="chart-main-top-mids-ch e" v-text="shopInfo.report"></a>
                             </div>
-                            <p>在采美私域运营情况汇总</p>
                         </div>
-                        <div class="chart-main-top-right-li">
-                            <div class="chart-main-top-right-tips">
-                                <span class="tips c">销售转化阶段</span>
+                        <div class="chart-main-top-right">
+                            <div class="chart-main-top-right-li">
+                                <div class="chart-main-top-right-tips">
+                                    <span class="tips a">品牌推广阶段</span>
+                                </div>
+                                <p>在采美站外公域的推广结果</p>
+                            </div>
+                            <div class="chart-main-top-right-li">
+                                <div class="chart-main-top-right-tips">
+                                    <span class="tips b">潜客运营阶段</span>
+                                </div>
+                                <p>在采美私域运营情况汇总</p>
+                            </div>
+                            <div class="chart-main-top-right-li">
+                                <div class="chart-main-top-right-tips">
+                                    <span class="tips c">销售转化阶段</span>
+                                </div>
+                                <p>客户线索在采美的孵化动作和转化效果</p>
                             </div>
-                            <p>客户线索在采美的孵化动作和转化效果</p>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
-        <div class="chart-title">
-            <p>品牌推广阶段</p>
-        </div>
-        <div class="chart-content-text">
-            <h1>数据总结：</h1>
-            <div v-for="(text,index) in summarize" :key="index">
-                <p v-text="`【${text.addTime}】`"></p>
-                <p v-text="text.theme"></p>
+            <div class="chart-title">
+                <p>品牌推广阶段</p>
             </div>
-        </div>
-        <div class="chart-content-main">
-            <div class="chart-main-bot">
-                <img v-if="isPC" src="https://admin.caimei365.com/userfiles/1/images/photo/2023/12/chart-pc-2.png" alt="漏斗模型">
-                <img v-else src="https://admin.caimei365.com/userfiles/1/images/photo/2023/12/chart-h5-2.png" alt="漏斗模型">
+            <div class="chart-content-text">
+                <h1>数据总结：</h1>
+                <div v-for="(text,index) in summarize" :key="index">
+                    <p v-text="`【${text.addTime}】`"></p>
+                    <p v-text="text.theme"></p>
+                </div>
             </div>
-        </div>
-        <div class="chart-content-main">
-            <div class="chart-main-max ri" id="myChart1">
+            <div class="chart-content-main">
+                <div class="chart-main-bot">
+                    <img v-if="isPC" src="https://admin.caimei365.com/userfiles/1/images/photo/2023/12/chart-pc-2.png" alt="漏斗模型">
+                    <img v-else src="https://admin.caimei365.com/userfiles/1/images/photo/2023/12/chart-h5-2.png" alt="漏斗模型">
+                </div>
+            </div>
+            <div class="chart-content-main">
+                <div class="chart-main-max ri" id="myChart1">
 
+                </div>
             </div>
-        </div>
-        <div class="chart-content-main">
-            <div class="chart-main-max ri table clear">
-                <div class="chart-main-min-title">公众号推文点击量</div>
-                <el-table ref="table" :data="volumeList" border height="528">
-                    <el-table-column label="序号" align="center" width="50">
-                        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
-                    </el-table-column>
-                    <el-table-column label="发文主题"  prop="title" align="center" width="150">
-                        <template slot-scope="{ row }">
-                            <template>
-                                <a style="color: #2fa4e7" target="_blank" :href="row.link"> {{ row.title }}</a>
+            <div class="chart-content-main">
+                <div class="chart-main-max ri table clear">
+                    <div class="chart-main-min-title">公众号推文点击量</div>
+                    <el-table ref="table" :data="volumeList" border height="528">
+                        <el-table-column label="序号" align="center" width="50">
+                            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+                        </el-table-column>
+                        <el-table-column label="发文主题"  prop="title" align="center" width="150">
+                            <template slot-scope="{ row }">
+                                <template>
+                                    <a style="color: #2fa4e7" target="_blank" :href="row.link"> {{ row.title }}</a>
+                                </template>
                             </template>
-                        </template>
-                    </el-table-column>
-                    <el-table-column label="类型"  prop="type" align="center"  width="100"></el-table-column>
-                    <el-table-column label="首发时间"  prop="firstTime" align="center" width="120"></el-table-column>
-                    <el-table-column label="文章关键词"  prop="keyword" align="center"></el-table-column>
-                    <el-table-column label="分发渠道"  prop="channel" align="center"></el-table-column>
-                    <el-table-column label="总点击量"  prop="wechatNumber" align="center" width="120"></el-table-column>
-                    <el-table-column label="总展现量"  prop="touchNumber" align="center" width="120"></el-table-column>
-                </el-table>
+                        </el-table-column>
+                        <el-table-column label="类型"  prop="type" align="center"  width="100"></el-table-column>
+                        <el-table-column label="首发时间"  prop="firstTime" align="center" width="120"></el-table-column>
+                        <el-table-column label="文章关键词"  prop="keyword" align="center"></el-table-column>
+                        <el-table-column label="分发渠道"  prop="channel" align="center"></el-table-column>
+                        <el-table-column label="总点击量"  prop="wechatNumber" align="center" width="120"></el-table-column>
+                        <el-table-column label="总展现量"  prop="touchNumber" align="center" width="120"></el-table-column>
+                    </el-table>
+                </div>
             </div>
-        </div>
-        <div class="chart-content-main"  id="section-1">
-            <div class="chart-main-box le" id="myChart2">
+            <div class="chart-content-main"  id="section-1">
+                <div class="chart-main-box le" id="myChart2">
 
-            </div>
-            <div class="chart-main-box ri" id="myChart3">
+                </div>
+                <div class="chart-main-box ri" id="myChart3">
 
+                </div>
             </div>
-        </div>
-        <div class="chart-title" id="section-2">
-            <p>潜客运营阶段</p>
-        </div>
-        <div class="chart-content-text">
-            <h1>数据总结：</h1>
-            <div v-for="(text,index) in summarize1" :key="index">
-                <p v-text="`【${text.addTime}】`"></p>
-                <p v-text="text.theme"></p>
+            <div class="chart-title" id="section-2">
+                <p>潜客运营阶段</p>
             </div>
-        </div>
-        <div class="chart-content-main">
-            <div class="chart-main-max min clear">
-                <div class="chart-main-min-title">关键词SEO收录数据</div>
-                <el-table ref="table" :data="keywordList" height="390px" border>
-                    <el-table-column prop="keyword" label="关键词" align="center"></el-table-column>
-                    <el-table-column prop="seoRanking" label="SEO排名" align="center">
-                        <template slot-scope="{ row }">
-                            <el-popover
-                                    placement="top-start"
-                                    title=""
-                                    width="380"
-                                    trigger="hover"
-                            >
-                                <img :src="row.seoRanking" alt="" style="width:350px;height:350px;">
-                                <img slot="reference" :src="row.seoRanking" alt="" style="width:60px;height:60px;">
-                            </el-popover>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="searchVolume" label="搜索次数" align="center"></el-table-column>
-                </el-table>
+            <div class="chart-content-text">
+                <h1>数据总结：</h1>
+                <div v-for="(text,index) in summarize1" :key="index">
+                    <p v-text="`【${text.addTime}】`"></p>
+                    <p v-text="text.theme"></p>
+                </div>
             </div>
-        </div>
-        <div class="chart-content-main">
-            <div class="chart-main-box le" id="myChart5">
-
+            <div class="chart-content-main">
+                <div class="chart-main-max min clear">
+                    <div class="chart-main-min-title">关键词SEO收录数据</div>
+                    <el-table ref="table" :data="keywordList" height="390px" border>
+                        <el-table-column prop="keyword" label="关键词" align="center"></el-table-column>
+                        <el-table-column prop="seoRanking" label="SEO排名" align="center">
+                            <template slot-scope="{ row }">
+                                <el-popover
+                                        placement="top-start"
+                                        title=""
+                                        width="380"
+                                        trigger="hover"
+                                >
+                                    <img :src="row.seoRanking" alt="" style="width:350px;height:350px;">
+                                    <img slot="reference" :src="row.seoRanking" alt="" style="width:60px;height:60px;">
+                                </el-popover>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="searchVolume" label="搜索次数" align="center"></el-table-column>
+                    </el-table>
+                </div>
             </div>
-            <div class="chart-main-box ri" id="myChart8">
+            <div class="chart-content-main">
+                <div class="chart-main-box le" id="myChart5">
+
+                </div>
+                <div class="chart-main-box ri" id="myChart8">
 
+                </div>
             </div>
-        </div>
-        <div class="chart-content-main">
-            <div class="chart-main-390" id="myChart4"></div>
-            <div class="chart-main-390" id="myChart9"></div>
-            <div class="chart-main-390 none" id="myChart10"></div>
-        </div>
-        <div class="chart-content-main">
-            <div class="chart-main-max" id="myChart6"></div>
-        </div>
-        <div class="chart-content-main">
-            <div class="chart-main-max mins clear">
-                <div class="chart-main-min-title">访问用户全商城点击量</div>
-                <el-table ref="table" :data="bannerList" border>
-                    <el-table-column prop="position" label="广告位置/时间" align="center"></el-table-column>
-                    <el-table-column prop="home" label="首页" align="center">
-                        <template slot-scope="{ row }">
-                            <el-popover
-                                    placement="top-start"
-                                    title=""
-                                    width="380"
-                                    trigger="hover"
-                            >
-                                <img :src="row.home" alt="" style="width:350px;height:170px;">
-                                <img slot="reference" :src="row.home" alt="" style="width:170px;height:85px;">
-                            </el-popover>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="infoCenter" label="信息中心" align="center">
-                        <template slot-scope="{ row }">
-                            <el-popover
-                                    placement="top-start"
-                                    title=""
-                                    width="380"
-                                    trigger="hover"
-                            >
-                                <img :src="row.infoCenter" alt="" style="width:350px;height:170px;">
-                                <img slot="reference" :src="row.infoCenter" alt="" style="width:170px;height:85px;">
-                            </el-popover>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="hits" label="总点击量" align="center"></el-table-column>
-                </el-table>
+            <div class="chart-content-main">
+                <div class="chart-main-390" id="myChart4"></div>
+                <div class="chart-main-390" id="myChart9"></div>
+                <div class="chart-main-390 none" id="myChart10"></div>
             </div>
-        </div>
-        <div class="chart-title" id="section-3">
-            <p>销售转化阶段</p>
-        </div>
-        <div class="chart-content-text">
-            <h1>数据总结：</h1>
-            <div v-for="(text,index) in summarize2" :key="index">
-                <p v-text="`【${text.addTime}】`"></p>
-                <p v-text="text.theme"></p>
+            <div class="chart-content-main">
+                <div class="chart-main-max" id="myChart6"></div>
             </div>
-        </div>
-        <div class="chart-content-main">
-            <div class="chart-main-max" id="myChart7"></div>
+            <div class="chart-content-main">
+                <div class="chart-main-max mins clear">
+                    <div class="chart-main-min-title">访问用户全商城点击量</div>
+                    <el-table ref="table" :data="bannerList" border>
+                        <el-table-column prop="position" label="广告位置/时间" align="center"></el-table-column>
+                        <el-table-column prop="home" label="首页" align="center">
+                            <template slot-scope="{ row }">
+                                <el-popover
+                                        placement="top-start"
+                                        title=""
+                                        width="380"
+                                        trigger="hover"
+                                >
+                                    <img :src="row.home" alt="" style="width:350px;height:170px;">
+                                    <img slot="reference" :src="row.home" alt="" style="width:170px;height:85px;">
+                                </el-popover>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="infoCenter" label="信息中心" align="center">
+                            <template slot-scope="{ row }">
+                                <el-popover
+                                        placement="top-start"
+                                        title=""
+                                        width="380"
+                                        trigger="hover"
+                                >
+                                    <img :src="row.infoCenter" alt="" style="width:350px;height:170px;">
+                                    <img slot="reference" :src="row.infoCenter" alt="" style="width:170px;height:85px;">
+                                </el-popover>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="hits" label="总点击量" align="center"></el-table-column>
+                    </el-table>
+                </div>
+            </div>
+            <div class="chart-title" id="section-3">
+                <p>销售转化阶段</p>
+            </div>
+            <div class="chart-content-text">
+                <h1>数据总结：</h1>
+                <div v-for="(text,index) in summarize2" :key="index">
+                    <p v-text="`【${text.addTime}】`"></p>
+                    <p v-text="text.theme"></p>
+                </div>
+            </div>
+            <div class="chart-content-main">
+                <div class="chart-main-max" id="myChart7"></div>
+            </div>
+        </template>
+        <div v-else class="chart-content-empty">
+            <img src="/img/encyclopedia/chart/chart-empty@2x.png">
+            <p>暂无统计数据，请等待系统生成数据~</p>
         </div>
     </div>
 </div>