Merge remote-tracking branch 'origin/developerA' into developer

src/main/java/com/caimei/www/controller/authorized/supplier/SupplierPageController.java

@@ -103,8 +103,6 @@ public class SupplierPageController extends BaseController {
     /** 供应商采美百科词条预览页面 */
     private static final String ENCYCLOPEDIA_PREVIEW = "supplier-center/encyclopedia/preview";
     /** 供应商采美数据报表页面 */
-    private static final String SHOP_CHART = "supplier-center/encyclopedia/chart";
-    /** 供应商采美数据报表页面 */
     private static final String SHOP_CHARTS = "supplier-center/encyclopedia/charts";
 
     /** 我的采美 */
@@ -344,12 +342,6 @@ public class SupplierPageController extends BaseController {
         return ENCYCLOPEDIA_PREVIEW;
     }
 
-    /** 意向客户数据汇总 */
-    @GetMapping("/supplier/chart.html")
-    public String shopChart(){
-        return SHOP_CHART;
-    }
-
     /** 意向客户数据汇总 */
     @GetMapping("/supplier/charts.html")
     public String shopCharts(){

src/main/resources/static/css/base/base.pc.css

@@ -27,7 +27,7 @@ iframe{width:320px !important;height: 280px !important}
 .jqSelect ul li{box-sizing:border-box;padding:0 15px;display:inline-block;width:100%;height:38px;line-height:38px;white-space:nowrap;text-align:left;cursor:pointer}
 .jqSelect ul li:hover{background:#FEF6F3;color:#FF5B00}
 .wrap{width:1184px;margin:0 auto;}
-.icon:before,.baseTopNav .nav:after{content:'';display:inline-block;background:url(/img/supplier-login/PC.png) no-repeat;font-size:0;}
+.icon:before,.baseTopNav .nav:after{content:'';display:inline-block;background:url(/img/base/icon.png) no-repeat;font-size:0;}
 .WEB-icon:before{content:'';display:inline-block;background:url(/img/base/WEB-icon.png) no-repeat;font-size:0;}
 .icon.shop,.icon.heart{vertical-align:middle;display:inline-block;height:25px;line-height:25px;}
 .icon.shop:before{width:30px;height:25px;background-position:5px -297px}

src/main/resources/static/css/supplier-center/dashboard.css

@@ -32,7 +32,13 @@
      .product-title .product-sel span{}
      .product-title .product-sel .state{width: 160px;}
      .product ul {height: 50px;line-height: 80px;background-color: #ffffff;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);padding: 15px;}
-     .product li {display: inline-block;margin-right: 20px;width: 110px;text-align: center;color: #333333;position: relative;cursor: pointer;}
+     .product li {height: 100%; display: inline-block;margin-right: 20px;width: 110px;text-align: center;color: #333333;position: relative;cursor: pointer;}
+     .product .product-ul {height: 50px;line-height: 80px;background-color: #ffffff;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);padding: 15px;}
+     .product .product-li {width: 110px;height: 100%; display: block;margin-right: 20px;text-align: center;color: #333333;position: relative;cursor: pointer;}
+     .product .product-li .product-li-icon{ width:100%;height: 26px;float: left;}
+     .product .product-li .icon{ width: 26px;height: 26px;margin: 0 auto; display: block;position: relative;}
+     .product .product-li .icon:before {width: 26px;height: 26px;background-position: -192px -805px;position: absolute;left: 0;}
+     .product .product-li p{ width:100%;height: 24px;float: left;line-height: 24px;font-size: 14px; }
      .icon.confirm:before {width: 34px;height: 35px;background-position:-159px -405px;position: absolute;right: 53px;}
      .icon.other:before {background-position: -197px -405px;}
      .icon.down:before{background-position: -234px -405px;}

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

@@ -1,108 +0,0 @@
-/*PC端**/
- @media screen and (min-width:768px) {
-  body{background-color: #F5F5F5;}
-  header{box-shadow: none;}
-  table, td, th{border: none;}
-  .baseHeadCenter .logo{ width: auto;height: 52px; margin-right: 20px;border-right: 1px solid #e1e1e1;box-sizing: border-box;padding-right:16px;}
-  .baseHeadCenter .logo.none{border-right: none;}
-  .baseHeadCenter.account .wrap{padding-top: 25px;}
-  .baseHeadCenter.account{border-bottom: none;}
-  .header-title{float: left;margin-left: 70px;}
-  .header-title p{line-height: 50px;font-size: 24px;color: #333333;font-weight: bold;}
-  .header-title span{line-height: 50px;font-size: 16px;color: #333333;font-weight: normal;}
-  .chart-content{width: 1200px;margin: 0 auto;}
-  .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; }
-  .chart-content-text h1,.chart-content-text p{font-size: 14px;color: #666666;line-height: 28px;}
-  .chart-content-main{width: 100%;height: auto;float: left;margin-bottom: 16px;}
-  .chart-main-top{width: 100%;height: 520px; margin-top: 16px;box-sizing: border-box;padding: 57px;background: #FFFFFF;}
-  .chart-main-top-title{ width: 100%;line-height: 40px;font-size: 24px;font-weight: bold;color: #333333;text-align: center;margin-bottom:30px;}
-  .chart-main-top-main{ width: 100%;height: 324px; }
-  .chart-main-top-left{width: 340px;height: 100%; float: left;}
-  .chart-main-top-left-li{ width: 100%;height: 63px;float: left;box-sizing: border-box;border-left: 3px solid #FFFFFF;margin-bottom: 2px;}
-  .chart-main-top-left-li .li-title{ float: left;line-height: 63px;font-size: 18px;font-weight: bold;color: #333333;box-sizing: border-box;padding: 0 10px;margin-right: 14px;text-align: center;}
-  .chart-main-top-left-li .li-texts{ width: 240px;box-sizing: border-box;height: 63px;padding: 10px 0;float: left;}
-  .chart-main-top-left-li .li-texts.min{width: 182px;}
-  .chart-main-top-left-li .li-texts.none p{line-height: 43px;}
-  .chart-main-top-left-li .li-texts p{ line-height: 22px;font-size: 14px;color: #666666;}
-  .chart-main-top-left-li.a{border-color: #73C0DE;background: linear-gradient(89deg, #E1F6FE 0%, #FFFFFF 100%);}
-  .chart-main-top-left-li.b{border-color: #EE6666;background: linear-gradient(88deg, #FFECEC 0%, #FFFFFF 100%);}
-  .chart-main-top-left-li.c{border-color: #5470C6;background: linear-gradient(87deg, #E6ECFF 0%, #FFFFFF 100%);}
-  .chart-main-top-left-li.d{border-color: #91CC75;background: linear-gradient(87deg, #EEFEE7 0%, #FFFFFF 100%);}
-  .chart-main-top-left-li.e{border-color: #FAC858;background: linear-gradient(88deg, #FFF5DF 0%, #FFFFFF 100%);}
-  .chart-main-top-mids{width: 400px;height: 100%;float: left; }
-  .chart-main-top-mids-li{width: 100%;height: 64px;margin-bottom: 2px;}
-  .chart-main-top-mids-ch{margin: 0 auto; height: 100%;line-height: 64px;display: block;font-size: 16px;color: #ffffff;text-align: center;position: relative;transition:all 0.5s;}
-  .chart-main-top-mids-li:hover .chart-main-top-mids-ch{transform: scale(1.1);-ms-transform: scale(1.1);-webkit-transform: scale(1.1);color: #FFFFFF;}
-  .chart-main-top-mids-ch.a{ background: url("/img/encyclopedia/chart/chart_a@2x.png");}
-  .chart-main-top-mids-ch.b{width: 320px; background: url("/img/encyclopedia/chart/chart_b@2x.png");}
-  .chart-main-top-mids-ch.c{width: 240px; background: url("/img/encyclopedia/chart/chart_c@2x.png");}
-  .chart-main-top-mids-ch.d{width: 160px; background: url("/img/encyclopedia/chart/chart_d@2x.png");}
-  .chart-main-top-mids-ch.e{width: 80px; background: url("/img/encyclopedia/chart/chart_e@2x.png");}
-  .chart-main-top-right{width: 312px;height: 100%;float: left;margin-left: 34px; }
-  .chart-main-top-right-li{ width: 100%; height: 110px;box-sizing: border-box;padding: 22px 0 14px 0;border-bottom: 1px solid #E1E1E1; float: left;}
-  .chart-main-top-right-tips {width: 100%;height: 36px;margin-bottom: 10px; }
-  .chart-main-top-right-tips .tips{ display: inline-block;border-radius: 4px; box-sizing: border-box;padding: 0 10px;font-size: 18px;line-height: 36px;color: #333333;text-align: center;font-weight: bold;}
-  .chart-main-top-right-tips .tips.a{ background: #73C0DE; }
-  .chart-main-top-right-tips .tips.b{ background: #5470C6; }
-  .chart-main-top-right-tips .tips.c{ background: #91CC75; }
-  .chart-main-top-right-li p{ font-size: 14px;line-height: 22px;color: #666666; }
-
-  .chart-main-bot{width: 100%;height: auto;box-sizing: border-box;padding: 20px 0;background: #FFFFFF;}
-  .chart-main-top img{width: 100%;height: auto;}
-  .chart-main-bot img{width: 792px;height: 203px;display: block;margin: 0 auto; }
-  .chart-main-box{width: 592px;height: 420px;background: #FFFFFF;box-sizing: border-box;padding: 24px;}
-  .chart-main-box.le{float: left;}
-  .chart-main-box.ri{float: right;}
-  .chart-main-min{width: 592px;height: 320px;background: #FFFFFF;box-sizing: border-box;padding: 24px;}
-  .chart-main-min-title{width: 100%;line-height: 28px;font-size: 18px;font-weight: bold;color: #666666;margin-bottom: 20px;}
-  .chart-main-max{width: 100%;height: 485px;background: #FFFFFF;box-sizing: border-box;padding: 24px;}
-  .chart-main-max.table{min-height: 620px;}
-  .chart-main-max.min{height: 480px;}
-  .chart-main-min.le{float: left;}
-  .chart-main-min.ri{float: right;}
-  .chart-main-468{width: 468px;height: 360px;background: #FFFFFF;box-sizing: border-box;padding: 24px;float: left;}
-  .chart-main-568{width: 568px;height: 360px;background: #FFFFFF;box-sizing: border-box;padding: 24px;float: left;}
-  .chart-main-568 img{width: 100%;height: 100%;display: block;}
-  .chart-main-300{width: 300px;height: 360px;background: #FFFFFF;box-sizing: border-box;padding: 24px;float: right;margin-left: 16px;}
-  .chart-main-400{width: 400px;height: 360px;background: #FFFFFF;box-sizing: border-box;padding: 24px;float: right;margin-left: 16px;}
-  .chart-main-390{width: 390px;height: 360px;background: #FFFFFF;box-sizing: border-box;padding: 24px;float: left;margin-right: 15px;}
-  .chart-main-390.none{margin-right: 0;}
-  footer{width: 100%;float: left;}
-  #scrollTop .item .phone{ display: none; }
-  #scrollTop .item .Iphone{ display: none; }
-
-}
-
-/*移动端**/
- @media screen and (max-width:768px){
-  body{background-color: #F5F5F5;}
-  footer{display: none;}
-  header{box-shadow: none;}
-  table, td, th{border: none;}
-  .baseHeadCenter.account .wrap{padding-top: 10px;}
-  .baseHeadCenter.account{border-bottom: none;}
-  .header-title{display: none;}
-  .chart-content{width: 100%;margin: 0 auto;box-sizing: border-box;padding: 3vw;}
-  .chart-title{ width: 100%;float: left; line-height: 8vw;font-size: 4vw;color: #333333;font-weight: bold;}
-  .chart-title span{line-height: 8vw;font-size: 16px;color: #333333;font-weight: normal;}
-  .chart-content-text{ min-height: 60vw;width: 100%;box-sizing: border-box;padding: 3vw;background: #FFFFFF;float: left;margin-bottom: 4vw; }
-  .chart-content-text h1,.chart-content-text p{font-size: 3.4vw;color: #666666;line-height: 6vw;}
-  .chart-content-main{width: 100%;height: auto;float: left;margin-bottom: 16px;}
-
-  .chart-main-bot{width: 100%;height: auto;box-sizing: border-box;padding: 3vw;background: #FFFFFF;}
-  .chart-main-top img{width: 100%;height: auto;}
-  .chart-main-bot img{width: 100%;height: auto;display: block;}
-  .chart-main-box{width: 100%;height: 86vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;}
-  .chart-main-box.le{float: left;margin-bottom: 16px;}
-  .chart-main-box.ri{float: left;}
-  .chart-main-min{width: 100%;height: 42vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;}
-  .chart-main-max{width: 100%;min-height: 86vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;}
-  .chart-main-min.le{float: left;margin-bottom: 16px;}
-  .chart-main-min.ri{float: left;}
-  .chart-main-568{width: 100%;height: 86vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;float: left;margin-bottom: 16px;}
-  .chart-main-468{width: 100%;height: 86vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;float: left;margin-bottom: 16px;}
-  .chart-main-400{width: 100%;height: 86vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;float: left;margin-bottom: 16px;}
-  .chart-main-300{width: 100%;height: 60vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;float: left;margin-bottom: 16px;}
-}

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

@@ -1,16 +1,21 @@
 /*PC端**/
  @media screen and (min-width:768px) {
   body{background-color: #F5F5F5;}
-  header{box-shadow: none;}
+  header{box-shadow: none;position: fixed;width: 100%;z-index: 99;}
   table, td, th{border: none;}
-  .baseHeadCenter .logo{ width: auto;height: 52px; margin-right: 20px;border-right: 1px solid #e1e1e1;box-sizing: border-box;padding-right:16px;}
-  .baseHeadCenter .logo.none{border-right: none;}
-  .baseHeadCenter.account .wrap{padding-top: 25px;}
-  .baseHeadCenter.account{border-bottom: none;}
-  .header-title{float: left;margin-left: 70px;}
-  .header-title p{line-height: 50px;font-size: 24px;color: #333333;font-weight: bold;}
-  .header-title span{line-height: 50px;font-size: 16px;color: #333333;font-weight: normal;}
-  .chart-content{width: 1200px;margin: 0 auto;}
+  .chartHeadCenter{ width: 100%;height: 100px;background: #FFFFFF;box-sizing: border-box;padding: 25px 0 10px 0; }
+  .chartHeadCenter.account .header-logo{ width: 33.33%;float: left;}
+  .chartHeadCenter .logo{ width: auto;height: 52px; margin-right: 20px;border-right: 1px solid #e1e1e1;box-sizing: border-box;padding-right:16px;float: left;}
+  .chartHeadCenter .logo.none{border-right: none;}
+  .chartHeadCenter .logo.none img{width: auto;height: 52px;display: block;}
+  .header-title{width: 33.33%;float: left;}
+  .header-title p{line-height: 24px;font-size: 24px;color: #333333;font-weight: bold;text-align: center;}
+  .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; }
@@ -79,19 +84,60 @@
 /*移动端**/
  @media screen and (max-width:768px){
   body{background-color: #F5F5F5;}
-  header{box-shadow: none;}
+  header{box-shadow: none;width: 100%;z-index: 99;}
   footer{display: none;}
   table, td, th{border: none;}
-  .baseHeadCenter.account .wrap{padding-top: 10px;}
-  .baseHeadCenter.account{border-bottom: none;}
-  .header-title{display: none;}
-  .chart-content{width: 100%;margin: 0 auto;box-sizing: border-box;padding: 3vw;}
-  .chart-title{ width: 100%;float: left; line-height: 8vw;font-size: 4vw;color: #333333;font-weight: bold;}
-  .chart-title span{line-height: 8vw;font-size: 16px;color: #333333;font-weight: normal;}
+  .chartHeadCenter{ width: 100%;height: auto;background: #FFFFFF;box-sizing: border-box;padding: 2vw; }
+  .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: auto;height: 12vw;display: block;}
+  .header-logo{float: left;width: 100%;margin-bottom: 3vw;}
+  .header-title{float: left;width: 100%;height: 10vw;}
+  .header-title p{line-height: 10vw;font-size: 4vw;color: #333333;font-weight: bold;float: left;}
+  .header-title p.small{font-size: 3.4vw;color: #666666;font-weight: normal;}
+  .header-time{width: 100%;height:100%;float: left;box-sizing: border-box; }
+  .chart-content{width: 100%;margin: 0 auto;margin-top: 4vw;}
+  .chart-content-empty{ width: 100%;height: 190vw; box-sizing: border-box;padding: 50vw 0;text-align: center;color: #4A4F58;background: #FFF; }
+  .chart-content-empty img{ width: 40vw;height: auto; }
+  .chart-content-empty p{color: #999999; line-height: 10vw;font-size:3.2vw;}
+  .chart-title{ width: 100%;float: left; line-height: 8vw;font-size: 4.6vw;color: #333333;font-weight: bold;box-sizing: border-box;padding: 0 3vw;background: #FFFFFF;}
+  .chart-title span{line-height: 8vw;font-size: 3.4vw;color: #333333;font-weight: normal;}
   .chart-content-text{ min-height: 60vw;width: 100%;box-sizing: border-box;padding: 3vw;background: #FFFFFF;float: left;margin-bottom: 4vw; }
   .chart-content-text h1,.chart-content-text p{font-size: 3.4vw;color: #666666;line-height: 6vw;}
-  .chart-content-main{width: 100%;height: auto;float: left;margin-bottom: 16px;}
-
+  .chart-content-main{width: 100%;height: auto;float: left;margin-bottom: 3vw;}
+  .chart-main-top{width: 100%;height: auto; margin-top: 3vw;box-sizing: border-box;padding:0 3vw 3vw 3vw;background: #FFFFFF;}
+  .chart-main-top-title{ width: 100%;line-height: 10vw;font-size: 4vw;font-weight: bold;color: #333333;text-align: center;margin-bottom:3vw;}
+  .chart-main-top-main{ width: 100%;height: auto;  display: flex;flex-direction: column; }
+  .chart-main-top-left{width: 100%;height: auto; float: left;margin-bottom: 5vw;}
+  .chart-main-top-left-li{ width: 100%;height: 14vw;float: left;box-sizing: border-box;border-left: 3px solid #FFFFFF;margin-bottom: 2px;}
+  .chart-main-top-left-li .li-title{ float: left;line-height: 14vw;font-size: 3.6vw;font-weight: bold;color: #333333;box-sizing: border-box;padding: 0 10px;margin-right: 3vw;text-align: center;}
+  .chart-main-top-left-li .li-texts{ width: 70vw;box-sizing: border-box;height: 14vw;padding: 2vw 0;float: left;}
+  .chart-main-top-left-li .li-texts.min{width: 58vw;}
+  .chart-main-top-left-li .li-texts.none p{line-height: 43px;}
+  .chart-main-top-left-li .li-texts p{ line-height: 22px;font-size: 14px;color: #666666;}
+  .chart-main-top-left-li.a{border-color: #73C0DE;background: linear-gradient(89deg, #E1F6FE 0%, #FFFFFF 100%);}
+  .chart-main-top-left-li.b{border-color: #EE6666;background: linear-gradient(88deg, #FFECEC 0%, #FFFFFF 100%);}
+  .chart-main-top-left-li.c{border-color: #5470C6;background: linear-gradient(87deg, #E6ECFF 0%, #FFFFFF 100%);}
+  .chart-main-top-left-li.d{border-color: #91CC75;background: linear-gradient(87deg, #EEFEE7 0%, #FFFFFF 100%);}
+  .chart-main-top-left-li.e{border-color: #FAC858;background: linear-gradient(88deg, #FFF5DF 0%, #FFFFFF 100%);}
+  .chart-main-top-mids{width: 100%;height: auto;order: -1; margin-bottom: 4vw;}
+  .chart-main-top-mids-li{width: 100%;height: 12.6vw;margin-bottom: 2px;}
+  .chart-main-top-mids-ch{margin: 0 auto; height: 100%;line-height: 12.6vw;display: block;font-size: 3.4vw;color: #ffffff;text-align: center;position: relative;transition:all 0.5s;}
+  .chart-main-top-mids-li:hover .chart-main-top-mids-ch{transform: scale(1.1);-ms-transform: scale(1.1);-webkit-transform: scale(1.1);color: #FFFFFF;}
+  .chart-main-top-mids-ch.a{width: 81.6vw;background: url("/img/encyclopedia/chart/chart_h5_a@2x.png");background-size: cover;}
+  .chart-main-top-mids-ch.b{width: 64vw; background: url("/img/encyclopedia/chart/chart_h5_b@2x.png");background-size: cover;}
+  .chart-main-top-mids-ch.c{width: 47.5vw; background: url("/img/encyclopedia/chart/chart_h5_c@2x.png");background-size: cover;}
+  .chart-main-top-mids-ch.d{width: 31.4vw; background: url("/img/encyclopedia/chart/chart_h5_d@2x.png");background-size: cover;}
+  .chart-main-top-mids-ch.e{width: 15.6vw; background: url("/img/encyclopedia/chart/chart_h5_e@2x.png");background-size: cover;}
+  .chart-main-top-right{width: 100%;height: auto;float: left;}
+  .chart-main-top-right-li{ width: 100%; height: auto;box-sizing: border-box;padding: 3vw 0 2vw 0;border-bottom: 1px solid #E1E1E1; float: left;}
+  .chart-main-top-right-tips {width: 100%;height: 7.2vw;margin-bottom: 3vw; }
+  .chart-main-top-right-tips .tips{ display: inline-block;border-radius: 1vw; box-sizing: border-box;padding: 0 2vw;font-size: 4.2vw;line-height:7.2vw;color: #333333;text-align: center;font-weight: bold;}
+  .chart-main-top-right-tips .tips.a{ background: #73C0DE; }
+  .chart-main-top-right-tips .tips.b{ background: #5470C6; }
+  .chart-main-top-right-tips .tips.c{ background: #91CC75; }
+  .chart-main-top-right-li p{ font-size: 3.4vw;line-height: 4vw;color: #666666; }
 
   .chart-main-bot{width: 100%;height: auto;box-sizing: border-box;padding: 3vw ;background: #FFFFFF;}
   .chart-main-top img{width: 100%;height: auto;}
@@ -100,7 +146,7 @@
   .chart-main-box.le{float: left;margin-bottom: 16px;}
   .chart-main-box.ri{float: left;}
   .chart-main-min{width: 100%;height: 42vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;}
-  .chart-main-max{width: 100%;min-height: 86vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;}
+  .chart-main-max{width: 100%;min-height: 54vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;}
   .chart-main-min.le{float: left;margin-bottom: 16px;}
   .chart-main-min.ri{float: left;}
   .chart-main-568{width: 100%;height: 86vw;background: #FFFFFF;box-sizing: border-box;padding: 3vw;float: left;margin-bottom: 16px;}

src/main/resources/static/js/common/serviceapi/supplier.service.js

@@ -1103,6 +1103,17 @@ var SupplierApi = {
             }).then(function (res) {
                 callback(res);
             });
+        },
+        // 供应商数据报表
+        shopChartPreview: function (params, callback) {
+            Http.AjaxService({
+                url: '/user/shop/preview',
+                type:'get',
+                data:params,
+                json:false,
+            }).then(function (res) {
+                callback(res);
+            });
         }
 
 

src/main/resources/static/js/supplier-center/dashboard.js

@@ -4,7 +4,9 @@
     data:{
         isRequset:true,
         userId:'',
+        shopId:'',
         homeData:'',
+        isMark:false,
         formData:new FormData(),
         goodImage:'',
         shopinfo:{},
@@ -33,6 +35,7 @@
                      _this.shopinfo = res.data.shop;
                      _this.userInfo = res.data.user;
                      _this.promotions = res.data.promotions;
+                     _this.isMark = res.data.isMark;
                      _this.rankingList = res.data.salesRankingList;
                      if(res.data.constraint === '0'){
                          CAIMEI.Alert('您的供应商账号上架费将于30日后到期，到期后将无法发布和编辑商品，同时也会影响到其他采美提供的支持服务。请联系采美工作人员进行续费，联系电话0755-22907771 或15338851365', '确定', false);
@@ -202,6 +205,7 @@
         var _this = this;
         if(globalUserData) {
             _this.userId = globalUserData.userId;
+            _this.shopId = globalUserData.shopId;
             this.dashboardDataInfo();
         };
     }

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

@@ -1,78 +0,0 @@
-/**
- * Created by xw on 2023/10/31.
- */
-const chartContent = new Vue({
-    el:"#chartContent",
-    mixins: [jsonMixin,chartMixin],
-    data: {
-        shopId:0,
-        volumeList:[],
-        bannerList:[],
-        keywordList:[],
-        shopInfo:{},
-        summarize:'',
-        summarize1:'',
-        summarize2:'',
-        isLoading:false
-    },
-    computed: {
-
-    },
-    methods: {
-        openFullScreen2(shopId,month) {
-            const _this = this
-            const loading = this.$loading({
-                lock: true,
-                text: 'Loading',
-                spinner: 'el-icon-loading',
-                background: 'rgba(0, 0, 0, 0.4)'
-            });
-            setTimeout(() => {
-                _this.isLoading = true
-                loading.close();
-            }, 100);
-            setTimeout(() => {
-                _this.chartInit(shopId,month)
-            }, 200);
-        },
-        chartInit(shopId,month){
-            console.log('shopId',shopId)
-            this.volumeList = this.chartData[shopId][month].volumeList
-            this.bannerList = this.chartData[shopId][month].bannerList
-            this.shopInfo = this.chartData[shopId][month].shopInfo
-            this.summarize = this.chartData[shopId][month].summarize
-            this.summarize1 = this.chartData[shopId][month].summarize1
-            this.summarize2 = this.chartData[shopId][month].summarize2
-            this.keywordList = this.chartData[shopId][month].keywordList
-            // this.chartWordCloud(this.chartData[shopId].keywords)
-            this.chartWechats(this.chartData[shopId][month].wechats,this.shopInfo.shopName)
-            this.chartIntention(this.chartData[shopId][month].intention,this.shopInfo.shopName)
-            this.chartAllVisits(this.chartData[shopId][month].allVisits,this.shopInfo.shopName)
-            this.chartProportion(this.chartData[shopId][month].proportion,this.shopInfo.shopName)
-            this.chartStationVisits(this.chartData[shopId][month].stationVisits,this.shopInfo.shopName)
-            this.chartVisitTimes(this.chartData[shopId][month].visitTimes,this.shopInfo.shopName)
-            this.chartLeadUserMonthly(this.chartData[shopId][month].leadUserMonthly,this.shopInfo.shopName)
-            this.chartChannels(this.chartData[shopId][month].channels,this.shopInfo.shopName)
-            this.chartUrbanize(this.chartData[shopId][month].urbanize,this.shopInfo.shopName)
-            this.chartUserIdentity(this.chartData[shopId][month].userIdentity,this.shopInfo.shopName)
-            this.chartIntentions(this.chartData[shopId][month].intentions,this.shopInfo.shopName)
-            $('.chart-main-top-mids-li').find('a').on('click', function () {
-                const id = '#' + $(this).attr('data-id');
-                const scrollTop = innerWidth > 768 ? $(id).offset().top : $(id).offset().top ;
-                $("html, body").animate({
-                    scrollTop: scrollTop
-                }, {duration: 500, easing: "swing"});
-                return false;
-            })
-        }
-    },
-    created: function () {
-
-    },
-    mounted: function () {
-        this.shopId = getUrlParam("shopId");
-        const month = getUrlParam("month");
-        this.openFullScreen2(this.shopId,month)
-    }
-});
-

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

@@ -3,7 +3,7 @@
  */
 const chartContent = new Vue({
     el:"#chartContent",
-    mixins: [jsonMixin,chartMixin],
+    mixins: [jsonMixin,chartsMixin],
     data: {
         shopId:0,
         volumeList:[],
@@ -13,49 +13,84 @@ const chartContent = new Vue({
         summarize:'',
         summarize1:'',
         summarize2:'',
-        isLoading:false
+        isLoading:false,
+        isPreview:true,
+        isChartEmpty:false,
+        queryParams:{
+            type:2,
+            shopId:'',
+            marketReportId:'',
+            startTime:'',
+            endTime:''
+        }
     },
     computed: {
 
     },
     methods: {
-        openFullScreen2(shopId,month) {
+        openFullScreen2() {
             const _this = this
             const loading = this.$loading({
                 lock: true,
                 text: 'Loading',
                 spinner: 'el-icon-loading',
-                background: 'rgba(0, 0, 0, 0.4)'
+                background: 'rgba(255, 255, 255, 1)'
             });
             setTimeout(() => {
                 _this.isLoading = true
                 loading.close();
-            }, 100);
+            }, 1000);
             setTimeout(() => {
-                _this.chartInit(shopId,month)
-            }, 200);
+                _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){
+                    if(response.data.code === 0){
+                        _self.isChartEmpty = false
+                        setTimeout(() => {
+                            _self.chartInit(response.data)
+                        }, 500);
+                    }else{
+                        _self.isChartEmpty = true
+                    }
+                }
+            })
         },
-        chartInit(shopId,month){
-            console.log('shopId',shopId)
-            this.volumeList = this.chartData[shopId][month].volumeList
-            this.bannerList = this.chartData[shopId][month].bannerList
-            this.shopInfo = this.chartData[shopId][month].shopInfo
-            this.summarize = this.chartData[shopId][month].summarize
-            this.summarize1 = this.chartData[shopId][month].summarize1
-            this.summarize2 = this.chartData[shopId][month].summarize2
-            this.keywordList = this.chartData[shopId][month].keywordList
+        chartInit(data){
+            this.yearMonth =  data.yearMonth
+            this.volumeList =  data.volumeList
+            this.bannerList =  data.bannerList
+            this.shopInfo =  data.shopInfo
+            this.summarize =  data.summarize
+            this.summarize1 =  data.summarize1
+            this.summarize2 =  data.summarize2
+            this.keywordList =  data.keywordList
+            this.chartWechats( data.wechats,this.shopInfo.shopName)
+            this.chartIntention( data.intention,this.shopInfo.shopName)
+            this.chartAllVisits( data.allVisits,this.shopInfo.shopName)
+            this.chartProportion( data.proportion,this.shopInfo.shopName)
+            this.chartStationVisits( data.stationVisits,this.shopInfo.shopName)
+            this.chartVisitTimes( data.visitTimes,this.shopInfo.shopName)
+            this.chartLeadUserMonthly( data.leadUserMonthly,this.shopInfo.shopName)
+            this.chartChannels( data.channels,this.shopInfo.shopName)
+            this.chartUrbanize( data.urbanize,this.shopInfo.shopName)
+            this.chartUserIdentity( data.userIdentity,this.shopInfo.shopName)
+            // this.chartIntentions( data.intentions)
             // this.chartWordCloud(this.chartData[shopId].keywords)
-            this.chartWechats(this.chartData[shopId][month].wechats,this.shopInfo.shopName)
-            this.chartIntention(this.chartData[shopId][month].intention,this.shopInfo.shopName)
-            this.chartAllVisits(this.chartData[shopId][month].allVisits,this.shopInfo.shopName)
-            this.chartProportion(this.chartData[shopId][month].proportion,this.shopInfo.shopName)
-            this.chartStationVisits(this.chartData[shopId][month].stationVisits,this.shopInfo.shopName)
-            this.chartVisitTimes(this.chartData[shopId][month].visitTimes,this.shopInfo.shopName)
-            this.chartLeadUserMonthly(this.chartData[shopId][month].leadUserMonthly,this.shopInfo.shopName)
-            this.chartChannels(this.chartData[shopId][month].channels,this.shopInfo.shopName)
-            this.chartUrbanize(this.chartData[shopId][month].urbanize,this.shopInfo.shopName)
-            this.chartUserIdentity(this.chartData[shopId][month].userIdentity,this.shopInfo.shopName)
-            // this.chartIntentions(this.chartData[shopId][month].intentions)
             $('.chart-main-top-mids-li').find('a').on('click', function () {
                 const id = '#' + $(this).attr('data-id');
                 const scrollTop = innerWidth > 768 ? $(id).offset().top : $(id).offset().top ;
@@ -70,9 +105,11 @@ const chartContent = new Vue({
 
     },
     mounted: function () {
-        this.shopId = getUrlParam("shopId");
-        const month = getUrlParam("month");
-        this.openFullScreen2(this.shopId,month)
+        this.queryParams.shopId = getUrlParam("shopId");
+        this.queryParams.marketReportId = getUrlParam("marketReportId") ? getUrlParam("marketReportId") : '';
+        this.queryParams.type = getUrlParam("type") ? getUrlParam("type") : 2;
+        this.isPreview = getUrlParam("type") !== '1'
+        this.openFullScreen2()
     }
 });
 

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

@@ -1,759 +0,0 @@
-'use strict';
-const chartMixin = function () {// 通知消息
-    return {
-        data(){
-            return{
-
-            }
-        },
-        methods: {
-            chartWordCloud(data){// 词云
-                let myChart = echarts.init(document.getElementById('myChart0'));
-                let option = {
-                    title: {text: '关键词云图'},
-                    tooltip: {trigger: 'item'},
-                    series: [{
-                        type: 'wordCloud',
-                        shape: 'circle',
-                        keepAspect: false,
-                        maskImage: '',
-                        left: 'center',
-                        top: 'center',
-                        width: '90%',
-                        height: '85%',
-                        right: null,
-                        bottom: null,
-                        sizeRange: [12, 60],
-                        rotationRange: [-90, 90],
-                        rotationStep: 45,
-                        gridSize: 10,
-                        drawOutOfBound: false,
-                        shrinkToFit: false,
-                        layoutAnimation: true,
-                        textStyle: {
-                            fontFamily: 'sans-serif',
-                            fontWeight: 'bold',
-                            color: function () {
-                                // Random color
-                                return 'rgb(' + [
-                                    Math.round(Math.random() * 160),
-                                    Math.round(Math.random() * 160),
-                                    Math.round(Math.random() * 160)
-                                ].join(',') + ')';
-                            }
-                        },
-                        emphasis: {
-                            focus: 'self',
-                            textStyle: {
-                                textShadowBlur: 10,
-                                textShadowColor: '#333'
-                            }
-                        },
-                        data:data
-                    }]
-                }
-                myChart.setOption(option)
-                window.addEventListener("resize", function() {
-                    myChart.resize()
-                })
-            },
-            //公众号推文
-            chartWechats(data,shopName){
-                let myChart = echarts.init(document.getElementById('myChart1'))
-                let option = {
-                    title: {
-                        text: `【${shopName}】公众号推文数据`
-                    },
-                    tooltip: {
-                        trigger: 'axis',
-                        axisPointer: {
-                            type: 'shadow'
-                        }
-                    },
-                    legend: {},
-                    grid: {
-                        left: '3%',
-                        right: '4%',
-                        bottom: '3%',
-                        containLabel: true
-                    },
-                    xAxis: {
-                        type: 'category',
-                        data: data.xAxis
-                    },
-                    yAxis: {
-                        type: 'value',
-                        boundaryGap: [0, 0.01],
-                    },
-                    series: [
-                        {
-                            name: '点击量',
-                            type: 'line',
-                            color:['#A294FF'],
-                            data: data.yAxis.yuedu
-                        },
-                        {
-                            name: '展现量',
-                            type: 'line',
-                            color:['#45CCF8'],
-                            data: data.yAxis.chuda
-                        }
-                    ]
-                };
-                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
-            },
-            chartIntention(data,shopName){ // 采美全渠道展现量
-                let myChart = echarts.init(document.getElementById('myChart2'))
-                let option = {
-                    title: {
-                        text: `【${shopName}】采美全渠道展现量`
-                    },
-                    tooltip: {
-                        trigger: 'axis',
-                        axisPointer: {
-                            type: 'shadow' //
-                        }
-                    },
-                    legend: {
-                        orient: 'horizontal',
-                        right: '0%',
-                        top:'0%',
-                        itemGap: 10, // 这里可以设置图例每项之间的间隔
-                        itemWidth: 20, // 这里可以设置图例标记的宽度
-                        itemHeight: 14, // 这里可以设置图例标记的高度
-                        textStyle: {
-                            fontSize: 12,
-                        },
-                        data: ['公众号', '微博', '小红书','其他渠道']
-                    },
-                    grid: {
-                        left: '3%',
-                        right: '4%',
-                        bottom: '3%',
-                        containLabel: true
-                    },
-                    xAxis: {
-                        type: 'category',
-                        data: data.xAxis
-                    },
-                    yAxis: {
-                        type: 'value',
-                    },
-                    series: [
-                        {
-                            name: '公众号',
-                            type: 'bar',
-                            stack: 'total',
-                            label: {
-                                show: false
-                            },
-                            emphasis: {
-                                focus: 'series'
-                            },
-                            barGap:'60%',
-                            barCategoryGap:'60%',
-                            data: data.yAxis.general
-                        },
-                        {
-                            name: '微博',
-                            type: 'bar',
-                            stack: 'total',
-                            label: {
-                                show: false
-                            },
-                            emphasis: {
-                                focus: 'series'
-                            },
-                            barGap:'60%',
-                            barCategoryGap:'60%',
-                            data: data.yAxis.twitter
-                        },
-                        {
-                            name: '小红书',
-                            type: 'bar',
-                            stack: 'total',
-                            label: {
-                                show: false
-                            },
-                            emphasis: {
-                                focus: 'series'
-                            },
-                            barGap:'60%',
-                            barCategoryGap:'60%',
-                            data: data.yAxis.redBook
-                        },
-                        {
-                            name: '其他渠道',
-                            type: 'bar',
-                            stack: 'total',
-                            label: {
-                                show: false
-                            },
-                            emphasis: {
-                                focus: 'series'
-                            },
-                            barGap:'60%',
-                            barCategoryGap:'60%',
-                            data: data.yAxis.other
-                        }
-                    ]
-                };
-                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
-            },
-            // 全渠道访问用户数量
-            chartAllVisits(data,shopName){
-                let myChart = echarts.init(document.getElementById('myChart3'))
-                let option = {
-                    title: {
-                        text: `【${shopName}】采美全渠道点击量`
-                    },
-                    tooltip: {
-                        trigger: 'axis',
-                        axisPointer: {
-                            type: 'shadow' //
-                        }
-                    },
-                    legend: {
-                        orient: 'horizontal',
-                        right: '0%',
-                        top:'0%',
-                        itemGap: 10, // 这里可以设置图例每项之间的间隔
-                        itemWidth: 20, // 这里可以设置图例标记的宽度
-                        itemHeight: 14, // 这里可以设置图例标记的高度
-                        textStyle: {
-                            fontSize: 12,
-                        },
-                        data: ['公众号', '微博', '小红书','其他渠道']
-                    },
-                    grid: {
-                        left: '3%',
-                        right: '4%',
-                        bottom: '3%',
-                        containLabel: true
-                    },
-                    xAxis: {
-                        type: 'category',
-                        data: data.xAxis
-                    },
-                    yAxis: {
-                        type: 'value',
-                    },
-                    series: [
-                        {
-                            name: '公众号',
-                            type: 'bar',
-                            stack: 'total',
-                            label: {
-                                show: false
-                            },
-                            emphasis: {
-                                focus: 'series'
-                            },
-                            barGap:'60%',
-                            barCategoryGap:'60%',
-                            data: data.yAxis.general
-                        },
-                        {
-                            name: '微博',
-                            type: 'bar',
-                            stack: 'total',
-                            label: {
-                                show: false
-                            },
-                            emphasis: {
-                                focus: 'series'
-                            },
-                            barGap:'60%',
-                            barCategoryGap:'60%',
-                            data: data.yAxis.twitter
-                        },
-                        {
-                            name: '小红书',
-                            type: 'bar',
-                            stack: 'total',
-                            label: {
-                                show: false
-                            },
-                            emphasis: {
-                                focus: 'series'
-                            },
-                            barGap:'60%',
-                            barCategoryGap:'60%',
-                            data: data.yAxis.redBook
-                        },
-                        {
-                            name: '其他渠道',
-                            type: 'bar',
-                            stack: 'total',
-                            label: {
-                                show: false
-                            },
-                            emphasis: {
-                                focus: 'series'
-                            },
-                            barGap:'60%',
-                            barCategoryGap:'60%',
-                            data: data.yAxis.other
-                        }
-                    ]
-                };
-                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
-            },
-            chartProportion(data,shopName){ // 渠道来源占比
-                let myChart = echarts.init(document.getElementById('myChart4'))
-                let option = {
-                    title: {
-                        text: `【${shopName}】访问用户渠道来源占比`
-                    },
-                    legend: {
-                        orient: 'horizontal',
-                        right: '0%',
-                        top:'0%',
-                        itemGap: 10, // 这里可以设置图例每项之间的间隔
-                        itemWidth: 20, // 这里可以设置图例标记的宽度
-                        itemHeight: 14, // 这里可以设置图例标记的高度
-                        textStyle: {
-                            fontSize: 12,
-                        },
-                        data: ['商城', '公众号', '小红书']
-
-                    },
-                    xAxis: {
-                        type: 'category',
-                        data: data.xAxis
-                    },
-                    yAxis: {
-                        type: 'value',
-                    },
-                    series: [
-                        {
-                            name: '搜索引擎',
-                            type: 'line',
-                            data: data.yAxis.search,
-                            label: {
-                                show: true,
-                                formatter(param) {
-                                    // correct the percentage
-                                    return param.value + '%'
-                                }
-                            }
-                        },
-                        {
-                            name: '微信平台',
-                            type: 'line',
-                            data: data.yAxis.general,
-                            label: {
-                                show: true,
-                                formatter(param) {
-                                    // correct the percentage
-                                    return param.value + '%'
-                                }
-                            }
-                        },
-                        {
-                            name: '微博',
-                            type: 'line',
-                            data: data.yAxis.redBook,
-                            label: {
-                                show: true,
-                                formatter(param) {
-                                    // correct the percentage
-                                    return param.value + '%'
-                                }
-                            }
-                        },
-                        {
-                            name: '直接访问',
-                            type: 'line',
-                            data: data.yAxis.mall,
-                            label: {
-                                show: true,
-                                formatter(param) {
-                                    // correct the percentage
-                                    return param.value + '%'
-                                }
-                            }
-                        }
-                    ]
-                };
-                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
-            },
-            // 采美站内访问量
-            chartStationVisits(data,shopName){
-                let myChart = echarts.init(document.getElementById('myChart5'))
-                let option = {
-                    title: {
-                        text: `【${shopName}】品牌整体访问量`
-                    },
-                    tooltip: {
-                        trigger: 'axis',
-                        axisPointer: {
-                            type: 'shadow' //
-                        }
-                    },
-                    legend: {
-                        orient: 'horizontal',
-                        right: '0%',
-                        top:'0%',
-                        itemGap: 10, // 这里可以设置图例每项之间的间隔
-                        itemWidth: 20, // 这里可以设置图例标记的宽度
-                        itemHeight: 14, // 这里可以设置图例标记的高度
-                        textStyle: {
-                            fontSize: 12,
-                        },
-                        data: ['游客访问量', '机构访问量']
-                    },
-                    grid: {
-                        left: '3%',
-                        right: '4%',
-                        bottom: '3%',
-                        containLabel: true
-                    },
-                    xAxis: {
-                        type: 'category',
-                        data: data.xAxis
-                    },
-                    yAxis: {
-                        type: 'value',
-                    },
-                    series: [
-                        {
-                            name: '游客访问量',
-                            type: 'bar',
-                            stack: 'total',
-                            label: {
-                                show: false
-                            },
-                            emphasis: {
-                                focus: 'series'
-                            },
-                            barGap:'60%',
-                            barCategoryGap:'60%',
-                            data: data.yAxis.tourist
-                        },
-                        {
-                            name: '机构访问量',
-                            type: 'bar',
-                            stack: 'total',
-                            label: {
-                                show: false
-                            },
-                            emphasis: {
-                                focus: 'series'
-                            },
-                            barGap:'60%',
-                            barCategoryGap:'60%',
-                            data: data.yAxis.clubs
-                        }
-                    ]
-                };
-                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
-            },
-            chartVisitTimes(data,shopName){ // 页面平均访问时长top5
-                let myChart = echarts.init(document.getElementById('myChart6'))
-                let option = {
-                    title: {
-                        text: `【${shopName}】访问页面平均时长top5（单位：秒）`,
-                        left: 'left'
-                    },
-                    tooltip: {
-                        trigger: 'axis',
-                        color:'#FE8645',
-                        formatter: function(params) { // 格式化 tooltip 内容
-                            return '访问时长：'+ params[0].value + 's'
-                        },
-                        axisPointer: {
-                            type: 'shadow'
-                        }
-                    },
-                    legend: {
-                        show:false,
-                    },
-                    grid: {
-                        left: '3%',
-                        right: '4%',
-                        bottom: '3%',
-                        containLabel: true
-                    },
-                    xAxis: {
-                        type: 'category',
-                        data: data.xAxis
-                    },
-                    yAxis: {
-                        type: 'value',
-                        splitLine:{
-                            show: true,
-                            lineStyle:{
-                                opacity:0.8,
-                                color:'#E1E1E1',
-                                type:'dashed'
-                            }
-                        },
-                        boundaryGap: [0, 0.01],
-                        axisLabel:{
-                            show: true,
-                            textStyle:{
-                                color: '#999999',  //更改坐标轴文字颜色
-                                fontSize : 14,      //更改坐标轴文字大小
-                            }
-                        },
-                        axisTick: {//轴网格,在xAxis或yAxis根下
-                            lineStyle:{
-                                width:1,
-                                color:'#E1E1E1',
-                                type:'dashed'
-                            }
-                        }
-                    },
-                    series: [
-                        {
-                            type: 'line',
-                            name: '访问时长',
-                            data: data.yAxis.series,
-                            color:'#4880FF',
-                            label: {
-                                show: true
-                            },
-                            areaStyle: {
-                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                                    {
-                                        offset: 0,
-                                        color: 'rgb(72,128,255)'
-                                    },
-                                    {
-                                        offset: 1,
-                                        color: 'rgb(68,92,207)'
-                                    }
-                                ])
-                            }
-                        }
-                    ]
-                };
-                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
-            },
-            // 咨询用户月度分布
-            chartLeadUserMonthly(data,shopName){
-                let myChart = echarts.init(document.getElementById('myChart7'))
-                let option = {
-                    title: {
-                        text: `【${shopName}】咨询用户月度分布(单位：个)`
-                    },
-                    tooltip: {
-                        trigger: 'axis',
-                        axisPointer: {
-                            type: 'shadow' //
-                        }
-                    },
-                    legend: {
-                        orient: 'horizontal',
-                        right: '0%',
-                        top:'0%',
-                        itemGap: 10, // 这里可以设置图例每项之间的间隔
-                        itemWidth: 20, // 这里可以设置图例标记的宽度
-                        itemHeight: 14, // 这里可以设置图例标记的高度
-                        textStyle: {
-                            fontSize: 12,
-                        },
-                        data: ['6月', '7月', '8月', '9月','10月']
-                    },
-                    grid: {
-                        left: '3%',
-                        right: '4%',
-                        bottom: '3%',
-                        containLabel: true
-                    },
-                    xAxis: {
-                        type: 'category',
-                        data: data.xAxis
-                    },
-                    yAxis: {
-                        type: 'value',
-                    },
-                    series: [
-                        {
-                            name: '咨询用户月度分布',
-                            type: 'bar',
-                            stack: 'total',
-                            label: {
-                                show: true
-                            },
-                            emphasis: {
-                                focus: 'series'
-                            },
-                            barGap:'60%',
-                            barCategoryGap:'60%',
-                            color:'#4880FF',
-                            data: data.yAxis.series
-                        }
-                    ]
-                };
-                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
-            },
-            chartChannels(data,shopName){// 咨询用户地狱分布
-                let myChart = echarts.init(document.getElementById('myChart8'))
-                let option = {
-                    title: {
-                        text: `【${shopName}】咨询用户地域分布`
-                    },
-                    tooltip: {
-                        trigger: 'item'
-                    },
-                    visualMap: {
-                        min: 0,
-                        max: 1000,
-                        left: 'left',
-                        top: 'bottom',
-                        text: ['高', '低'], // 文本，默认为数值文本
-                        calculable: true,
-                        inRange: {
-                            color: ['#e0ffff', '#006edd']
-                        }
-                    },
-                    series: [
-                        {
-                            name: '中国',
-                            type: 'map',
-                            mapType: 'china', // 设置地图类型为中国省份地图
-                            roam: false, // 禁止缩放和平移操作
-                            label: {
-                                show: true // 显示省份标签
-                            },
-                            data: data.yAxis.series,
-                            itemStyle:{
-                                fontSize: 14,
-                                color:'#FE8645'
-                            }
-                        }
-                    ]
-                };
-                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
-            },
-            chartUrbanize(data,shopName){ // 用户类型分布
-                let myChart = echarts.init(document.getElementById('myChart9'))
-                let option = {
-                    title: {
-                        text: `【${shopName}】访问用户类型分布`,
-                        left: 'left'
-                    },
-                    tooltip: {
-                        trigger: 'item'
-                    },
-                    legend: {
-                        orient: 'horizontal',
-                        top:'bottom'
-                    },
-                    series: [
-                        {
-                            name: '',
-                            color:['#45CCF8','#4880FF','#FE8645'],
-                            type: 'pie',
-                            radius: ['35%', '25%'],
-                            center: ['50%', '50%'],
-                            avoidLabelOverlap: false,
-                            label: {
-                                show: true,
-                                formatter(param) {
-                                    // correct the percentage
-                                    return param.name + ' (' + param.value + '%)';
-                                }
-                            },
-                            emphasis: {
-                                itemStyle: {
-                                    shadowBlur: 10,
-                                    shadowOffsetX: 0,
-                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
-                                }
-                            },
-                            data: data.series
-                        }
-                    ]
-                };
-                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
-            },
-            chartUserIdentity(data,shopName){ // 用户身份分布
-                let myChart = echarts.init(document.getElementById('myChart10'))
-                let option = {
-                    title: {
-                        text: `【${shopName}】访问用户身份分布`,
-                        left: 'left'
-                    },
-                    tooltip: {
-                        trigger: 'item'
-                    },
-                    legend: {
-                        orient: 'horizontal',
-                        top:'bottom'
-                    },
-                    series: [
-                        {
-                            name: '',
-                            color:['#45CCF8','#4880FF','#1CC170'],
-                            type: 'pie',
-                            radius: ['35%', '25%'],
-                            center: ['50%', '50%'],
-                            avoidLabelOverlap: false,
-                            label: {
-                                show: true,
-                                formatter(param) {
-                                    // correct the percentage
-                                    return param.name + ' (' + param.value + '%)';
-                                }
-                            },
-                            emphasis: {
-                                itemStyle: {
-                                    shadowBlur: 10,
-                                    shadowOffsetX: 0,
-                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
-                                }
-                            },
-                            data: data.series
-                        }
-                    ]
-                };
-                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
-            },
-            chartIntentions(data,shopName){ // 用户意向分布
-                let myChart = echarts.init(document.getElementById('myChart11'))
-                let option = {
-                    title: {
-                        text: `【${shopName}】用户意向分布`,
-                        left: 'left'
-                    },
-                    tooltip: {
-                        trigger: 'item'
-                    },
-                    legend: {
-                        orient: 'horizontal',
-                        top:'bottom'
-                    },
-                    series: [
-                        {
-                            name: '',
-                            color:['#45CCF8','#4880FF','#1CC170','#FF726E'],
-                            type: 'pie',
-                            radius: ['35%', '25%'],
-                            center: ['50%', '50%'],
-                            avoidLabelOverlap: false,
-                            label: {
-                                show: true,
-                                formatter(param) {
-                                    // correct the percentage
-                                    return param.name + ' (' + param.value + '%)';
-                                }
-                            },
-                            emphasis: {
-                                itemStyle: {
-                                    shadowBlur: 10,
-                                    shadowOffsetX: 0,
-                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
-                                }
-                            },
-                            data:data.series
-                        }
-                    ]
-                };
-                myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
-            }
-        },
-    };
-}();

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

@@ -1,9 +1,67 @@
 'use strict';
-const chartMixin = function () {// 通知消息
+const chartsMixin = function () {// 通知消息
     return {
         data(){
-            return{
-
+            return {
+                dataTime: '',
+                yearMonth: []
+            }
+        },
+        computed:{
+            pickerOptionsH5(){
+                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)
+                    }
+                }
+            },
+            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: {
@@ -62,7 +120,7 @@ const chartMixin = function () {// 通知消息
                 let myChart = echarts.init(document.getElementById('myChart1'))
                 let option = {
                     title: {
-                        text: `【${shopName}】公众号推文数据`
+                        text: ` 公众号推文数据`
                     },
                     tooltip: {
                         trigger: 'axis',
@@ -79,7 +137,7 @@ const chartMixin = function () {// 通知消息
                     },
                     xAxis: {
                         type: 'category',
-                        data: data.xAxis
+                        data: data.names
                     },
                     yAxis: {
                         type: 'value',
@@ -90,13 +148,13 @@ const chartMixin = function () {// 通知消息
                             name: '点击量',
                             type: 'line',
                             color:['#A294FF'],
-                            data: data.yAxis.yuedu
+                            data: data.values
                         },
                         {
                             name: '展现量',
                             type: 'line',
                             color:['#45CCF8'],
-                            data: data.yAxis.chuda
+                            data: data.backupsValues
                         }
                     ]
                 };
@@ -106,7 +164,7 @@ const chartMixin = function () {// 通知消息
                 let myChart = echarts.init(document.getElementById('myChart2'))
                 let option = {
                     title: {
-                        text: `【${shopName}】采美全渠道展现量`
+                        text: ` 采美全渠道展现量`
                     },
                     tooltip: {
                         trigger: 'axis',
@@ -133,7 +191,7 @@ const chartMixin = function () {// 通知消息
                     },
                     xAxis: {
                         type: 'category',
-                        data: data.xAxis
+                        data: data.names
                     },
                     yAxis: {
                         type: 'value'
@@ -150,7 +208,7 @@ const chartMixin = function () {// 通知消息
                             },
                             barGap:'55%',
                             barCategoryGap:'55%',
-                            data: data.yAxis,
+                            data: data.values,
                             itemStyle: {
                                 color: function(params) {
                                     // params 是当前柱状图的数据点信息对象
@@ -163,12 +221,12 @@ const chartMixin = function () {// 通知消息
                 };
                 myChart.setOption(option);  // 将选项应用到图表实例上，生成图表
             },
-            // 全渠道访问用户数量
+            // 采美全渠道点击量
             chartAllVisits(data,shopName){
                 let myChart = echarts.init(document.getElementById('myChart3'))
                 let option = {
                     title: {
-                        text: `【${shopName}】采美全渠道点击量`
+                        text: ` 采美全渠道点击量`
                     },
                     tooltip: {
                         trigger: 'axis',
@@ -195,7 +253,7 @@ const chartMixin = function () {// 通知消息
                     },
                     xAxis: {
                         type: 'category',
-                        data: data.xAxis
+                        data: data.names
                     },
                     yAxis: {
                         type: 'value',
@@ -212,7 +270,7 @@ const chartMixin = function () {// 通知消息
                             },
                             barGap:'55%',
                             barCategoryGap:'55%',
-                            data: data.yAxis,
+                            data: data.values,
                             itemStyle: {
                                 color: function(params) {
                                     // params 是当前柱状图的数据点信息对象
@@ -229,7 +287,7 @@ const chartMixin = function () {// 通知消息
                 let myChart = echarts.init(document.getElementById('myChart4'))
                 let option = {
                     title: {
-                        text: `【${shopName}】访问用户渠道来源占比`
+                        text: ` 访问用户渠道来源占比`
                     },
                     tooltip: {
                         trigger: 'item'
@@ -260,7 +318,7 @@ const chartMixin = function () {// 通知消息
                                     shadowColor: 'rgba(0, 0, 0, 0.5)'
                                 }
                             },
-                            data:data.series
+                            data:data
                         }
                     ]
                 };
@@ -271,7 +329,7 @@ const chartMixin = function () {// 通知消息
                 let myChart = echarts.init(document.getElementById('myChart5'))
                 let option = {
                     title: {
-                        text: `【${shopName}】品牌整体访问量`
+                        text: ` 品牌整体访问量`
                     },
                     tooltip: {
                         trigger: 'axis',
@@ -298,7 +356,7 @@ const chartMixin = function () {// 通知消息
                     },
                     xAxis: {
                         type: 'category',
-                        data: data.xAxis
+                        data: data.names
                     },
                     yAxis: {
                         type: 'value',
@@ -315,7 +373,7 @@ const chartMixin = function () {// 通知消息
                             },
                             barGap:'80%',
                             barCategoryGap:'80%',
-                            data: data.yAxis,
+                            data: data.values,
                             itemStyle: {
                                 color: function(params) {
                                     // params 是当前柱状图的数据点信息对象
@@ -332,7 +390,7 @@ const chartMixin = function () {// 通知消息
                 let myChart = echarts.init(document.getElementById('myChart6'))
                 let option = {
                     title: {
-                        text: `【${shopName}】访问页面平均时长top5（单位：秒）`,
+                        text: ` 访问页面平均时长top5（单位：秒）`,
                         left: 'left'
                     },
                     tooltip: {
@@ -356,7 +414,7 @@ const chartMixin = function () {// 通知消息
                     },
                     xAxis: {
                         type: 'category',
-                        data: data.xAxis
+                        data: data.names
                     },
                     yAxis: {
                         type: 'value',
@@ -388,7 +446,7 @@ const chartMixin = function () {// 通知消息
                         {
                             type: 'line',
                             name: '访问时长',
-                            data: data.yAxis.series,
+                            data: data.values,
                             color:'#4880FF',
                             label: {
                                 show: true
@@ -415,7 +473,7 @@ const chartMixin = function () {// 通知消息
                 let myChart = echarts.init(document.getElementById('myChart7'))
                 let option = {
                     title: {
-                        text: `【${shopName}】咨询用户月度数量(单位：个)`
+                        text: ` 咨询用户月度数量(单位：个)`
                     },
                     tooltip: {
                         trigger: 'axis',
@@ -446,7 +504,7 @@ const chartMixin = function () {// 通知消息
                     },
                     yAxis: {
                         type: 'category',
-                        data: data.xAxis
+                        data: data.names
                     },
                     series: [
                         {
@@ -462,7 +520,7 @@ const chartMixin = function () {// 通知消息
                             barGap:'80%',
                             barCategoryGap:'80%',
                             color:'#4880FF',
-                            data: data.yAxis.series
+                            data: data.values
                         }
                     ]
                 };
@@ -472,7 +530,7 @@ const chartMixin = function () {// 通知消息
                 let myChart = echarts.init(document.getElementById('myChart8'))
                 let option = {
                     title: {
-                        text: `【${shopName}】访问用户地域分布`
+                        text: ` 访问用户地域分布`
                     },
                     tooltip: {
                         trigger: 'item'
@@ -501,7 +559,7 @@ const chartMixin = function () {// 通知消息
                                 //     return param.name + ' (' + param.value + '%)';
                                 // }
                             },
-                            data: data.yAxis.series,
+                            data: data,
                             itemStyle:{
                                 fontSize: 14,
                                 color:'#FE8645'
@@ -515,7 +573,7 @@ const chartMixin = function () {// 通知消息
                 let myChart = echarts.init(document.getElementById('myChart9'))
                 let option = {
                     title: {
-                        text: `【${shopName}】访问用户类型分布`,
+                        text: ` 访问用户类型分布`,
                         left: 'left'
                     },
                     tooltip: {
@@ -547,7 +605,7 @@ const chartMixin = function () {// 通知消息
                                     shadowColor: 'rgba(0, 0, 0, 0.5)'
                                 }
                             },
-                            data: data.series
+                            data: data
                         }
                     ]
                 };
@@ -557,7 +615,7 @@ const chartMixin = function () {// 通知消息
                 let myChart = echarts.init(document.getElementById('myChart10'))
                 let option = {
                     title: {
-                        text: `【${shopName}】访问用户身份分布`,
+                        text: ` 访问用户身份分布`,
                         left: 'left'
                     },
                     tooltip: {
@@ -589,7 +647,7 @@ const chartMixin = function () {// 通知消息
                                     shadowColor: 'rgba(0, 0, 0, 0.5)'
                                 }
                             },
-                            data: data.series
+                            data: data
                         }
                     ]
                 };
@@ -599,7 +657,7 @@ const chartMixin = function () {// 通知消息
                 let myChart = echarts.init(document.getElementById('myChart11'))
                 let option = {
                     title: {
-                        text: `【${shopName}】用户意向分布`,
+                        text: ` 用户意向分布`,
                         left: 'left'
                     },
                     tooltip: {

src/main/resources/templates/supplier-center/dashboard.html

@@ -63,6 +63,19 @@
                         <span class="ziliao">资料完整度：<span>{{homeData.dataIntegrity}}</span></span>
                     </div>
                 </div>
+                <div class="product clear" v-if="isMark">
+                    <div class="product-title">
+                        <p>营销数据</p>
+                    </div>
+                    <div class="product-ul">
+                        <a class="product-li" target="_blank" :href="`/supplier/charts.html?shopId=${shopId}`">
+                            <div class="product-li-icon">
+                                <i class="icon mIcon"></i>
+                            </div>
+                            <p>数据看板</p>
+                        </a>
+                    </div>
+                </div>
                 <div class="product clear">
                     <div class="product-title">
                         <p>商品数据</p>

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

@@ -1,287 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-      xsi:schemaLocation="https://www.thymeleaf.org ">
-<head>
-  <title>意向用户数据汇总</title>
-  <!--禁止抓取本页，禁止抓取和跟踪本页的其它链接-->
-  <meta name='robots' content='noindex,nofollow' />
-  <template th:replace="components/head-link"></template>
-  <link th:href="@{/css/supplier-center/encyclopedia/chart.css(v=${version})}" rel="stylesheet" type="text/css">
-  <template th:replace="components/analysis"></template>
-</head>
-<body>
-<div id="chartContent" v-cloak>
-    <!-- 引用头部 -->
-    <header>
-        <input type="hidden" th:value="${coreServer}" id="coreServer">
-        <input type="hidden" th:value="${agent}" id="userAgent">
-        <div class="baseHeadCenter account">
-            <div class="wrap clear">
-                <a href="/" class="logo">
-                    <img class="pcOnly" src="https://admin.caimei365.com/userfiles/1/images/photo/2023/11/%E9%87%87%E7%BE%8Elogo.png" alt="采美 生美/医美采购服务平台"/>
-                    <img class="h5Only" src="https://admin.caimei365.com/userfiles/1/images/photo/2023/11/%E9%87%87%E7%BE%8Elogo.png" alt="采美 生美/医美采购服务平台"/>
-                </a>
-                <a href="javascript:void(0)" class="logo none">
-                    <img class="pcOnly" :src="shopInfo.chartLogo" alt="采美 生美/医美采购服务平台"/>
-                    <img class="h5Only" :src="shopInfo.chartLogo" alt="采美 生美/医美采购服务平台"/>
-                </a>
-                <div class="header-title"><p v-text="shopInfo.chartTitle"></p></div>
-            </div>
-        </div>
-    </header>
-    <div class="chart-content" v-if="isLoading">
-        <div class="chart-content-main">
-          <div class="chart-main-top">
-              <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.number"></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.number1"></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.number2"></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.number3"></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.number4"></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>
-                          </div>
-                          <p>【<span v-text="shopInfo.shopName"></span>】在采美站外公域的推广结果</p>
-                      </div>
-                      <div class="chart-main-top-right-li">
-                          <div class="chart-main-top-right-tips">
-                              <span class="tips b">潜客运营阶段</span>
-                          </div>
-                          <p>【<span v-text="shopInfo.shopName"></span>】在采美私域运营情况汇总</p>
-                      </div>
-                      <div class="chart-main-top-right-li">
-                          <div class="chart-main-top-right-tips">
-                              <span class="tips c">销售转化阶段</span>
-                          </div>
-                          <p>【<span v-text="shopInfo.shopName"></span>】客户线索在采美的孵化动作和转化效果</p>
-                      </div>
-                  </div>
-              </div>
-          </div>
-        </div>
-        <div class="chart-title">
-          <p>品牌推广阶段</p>
-        </div>
-        <div class="chart-content-text">
-          <h1>数据总结：</h1>
-          <p v-text="summarize"></p>
-        </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>
-        </div>
-        <div class="chart-content-main">
-          <div class="chart-main-max ri" id="myChart1">
-
-          </div>
-        </div>
-        <div class="chart-content-main">
-          <div class="chart-main-max ri table clear">
-            <div class="chart-main-min-title">【{{ shopInfo.shopName }}】公众号推文点击量</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="name" align="center" width="150">
-                <template slot-scope="{ row }">
-                  <template>
-                    <a style="color: #2fa4e7" target="_blank" :href="row.link"> {{ row.name }}</a>
-                  </template>
-                </template>
-              </el-table-column>
-              <el-table-column label="类型"  prop="type" align="center"  width="100"></el-table-column>
-              <el-table-column label="首发时间"  prop="time" 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 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>
-        <div class="chart-title" id="section-2">
-          <p>潜客运营阶段</p>
-        </div>
-        <div class="chart-content-text">
-          <h1>数据总结：</h1>
-          <p v-text="summarize1"></p>
-        </div>
-        <div class="chart-content-main">
-            <div class="chart-main-max min clear">
-                <div class="chart-main-min-title">【{{ shopInfo.shopName }}】关键词SEO收录数据</div>
-                <el-table ref="table" :data="keywordList" height="375px" border>
-                    <el-table-column prop="name" label="关键词" align="center"></el-table-column>
-                    <el-table-column prop="seo" label="SEO排名" align="center">
-                        <template slot-scope="{ row }">
-                            <el-popover
-                                    placement="top-start"
-                                    title=""
-                                    width="380"
-                                    trigger="hover"
-                            >
-                                <img :src="row.seo" alt="" style="width:350px;height:350px;">
-                                <img slot="reference" :src="row.seo" alt="" style="width:40px;height:40px;">
-                            </el-popover>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="value" label="搜索次数" align="center"></el-table-column>
-                </el-table>
-            </div>
-        </div>
-        <div class="chart-content-main">
-            <div class="chart-main-box le" id="myChart5">
-
-            </div>
-            <div class="chart-main-box ri" id="myChart4">
-
-            </div>
-        </div>
-        <div class="chart-content-main">
-            <div class="chart-main-max min clear">
-                <div class="chart-main-min-title">【{{ shopInfo.shopName }}】访问用户全商城点击量</div>
-                <el-table ref="table" :data="bannerList" height="270px" border>
-                    <el-table-column prop="title" label="广告位置" align="center"></el-table-column>
-                    <el-table-column prop="image" label="第一期" align="center">
-                        <template slot-scope="{ row }">
-                            <el-popover
-                                    v-if="row.image"
-                                    placement="top-start"
-                                    title=""
-                                    width="380"
-                                    trigger="hover"
-                            >
-                                <img :src="row.image" alt="" style="width:350px;height:170px;">
-                                <img slot="reference" :src="row.image" alt="" style="width:170px;height:85px;">
-                            </el-popover>
-                            <template v-else>
-                                <span>- -</span>
-                            </template>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="image1" label="第二期" align="center">
-                        <template slot-scope="{ row }">
-                            <el-popover
-                                    placement="top-start"
-                                    title=""
-                                    width="380"
-                                    trigger="hover"
-                            >
-                                <img :src="row.image1" alt="" style="width:350px;height:170px;">
-                                <img slot="reference" :src="row.image1" alt="" style="width:170px;height:85px;">
-                            </el-popover>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="image2" label="第三期" align="center">
-                        <template slot-scope="{ row }">
-                            <el-popover
-                                    placement="top-start"
-                                    title=""
-                                    width="380"
-                                    trigger="hover"
-                            >
-                                <img :src="row.image2" alt="" style="width:350px;height:170px;">
-                                <img slot="reference" :src="row.image2" alt="" style="width:170px;height:85px;">
-                            </el-popover>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="image3" label="第四期" align="center">
-                        <template slot-scope="{ row }">
-                            <el-popover
-                                    v-if="row.image3"
-                                    placement="top-start"
-                                    title=""
-                                    width="380"
-                                    trigger="hover"
-                            >
-                                <img :src="row.image3" alt="" style="width:350px;height:170px;">
-                                <img slot="reference" :src="row.image3" alt="" style="width:170px;height:85px;">
-                            </el-popover>
-                            <template v-else>
-                                <span>- -</span>
-                            </template>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="number" label="点击量" align="center"></el-table-column>
-                </el-table>
-            </div>
-        </div>
-        <div class="chart-content-main">
-          <div class="chart-main-max" id="myChart6"></div>
-        </div>
-        <div class="chart-title" id="section-3">
-          <p>销售转化阶段</p>
-        </div>
-        <div class="chart-content-text">
-          <h1>数据总结：</h1>
-          <p v-text="summarize2"></p>
-        </div>
-        <div class="chart-content-main">
-          <div class="chart-main-box le" id="myChart7"></div>
-          <div class="chart-main-box ri" id="myChart8"></div>
-        </div>
-        <div class="chart-content-main">
-          <div class="chart-main-390" id="myChart9"></div>
-          <div class="chart-main-390" id="myChart10"></div>
-          <div class="chart-main-390 none" id="myChart11"></div>
-        </div>
-      </div>
-</div>
-<!-- 引入底部 -->
-<template th:replace="components/footer"></template>
-<template th:replace="components/foot-link"></template>
-<script charset="utf-8" type="text/javascript" th:src="@{/lib/echarts.min.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/lib/china.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/lib/echarts-wordcloud.min.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
-<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/mixins/jsonMixin.js(v=${version})}"></script>
-<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/mixins/chartMixin.js(v=${version})}"></script>
-<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/chart.js(v=${version})}"></script>
-</body>
-</html>

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

@@ -15,225 +15,289 @@
     <header>
         <input type="hidden" th:value="${coreServer}" id="coreServer">
         <input type="hidden" th:value="${agent}" id="userAgent">
-        <div class="baseHeadCenter account">
+        <div class="chartHeadCenter account">
             <div class="wrap clear">
-                <a href="/" class="logo">
-                    <img class="pcOnly" src="https://admin.caimei365.com/userfiles/1/images/photo/2023/11/%E9%87%87%E7%BE%8Elogo.png" alt="采美 生美/医美采购服务平台"/>
-                    <img class="h5Only" src="https://admin.caimei365.com/userfiles/1/images/photo/2023/11/%E9%87%87%E7%BE%8Elogo.png" alt="采美 生美/医美采购服务平台"/>
-                </a>
-                <a href="javascript:void(0)" class="logo none">
-                    <img class="pcOnly" v-if="shopInfo.chartLogo" :src="shopInfo.chartLogo" alt="采美 生美/医美采购服务平台"/>
-                    <img class="h5Only" v-if="shopInfo.chartLogo" :src="shopInfo.chartLogo" alt="采美 生美/医美采购服务平台"/>
-                </a>
-                <div class="header-title"><p v-text="shopInfo.chartTitle"></p></div>
+                <div class="header-logo">
+                    <a href="/" class="logo">
+                        <img class="pcOnly" src="https://admin.caimei365.com/userfiles/1/images/photo/2023/11/%E9%87%87%E7%BE%8Elogo.png" />
+                        <img class="h5Only" src="https://admin.caimei365.com/userfiles/1/images/photo/2023/11/%E9%87%87%E7%BE%8Elogo.png" />
+                    </a>
+                    <a href="javascript:void(0)" class="logo none">
+                        <img class="pcOnly" v-if="shopInfo.logo" :src="shopInfo.logo" alt="采美 生美/医美采购服务平台"/>
+                        <img class="h5Only" v-if="shopInfo.logo" :src="shopInfo.logo" alt="采美 生美/医美采购服务平台"/>
+                    </a>
+                </div>
+                <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">
+                    <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="pickerOptionsH5"
+                                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="pickerOptionsH5"
+                                @change="shopChartPreview"
+                                placeholder="选择结束月份">
+                        </el-date-picker>
+                    </template>
+                </div>
             </div>
         </div>
     </header>
-    <div class="chart-content" v-if="isLoading">
-        <div class="chart-content-main">
-            <div class="chart-main-top">
-                <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.number"></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.number1"></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.number2"></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.number3"></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.number4"></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>
+    <div class="chart-content clear" v-if="isLoading">
+        <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>【<span v-text="shopInfo.shopName"></span>】在采美站外公域的推广结果</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>【<span v-text="shopInfo.shopName"></span>】在采美私域运营情况汇总</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>【<span v-text="shopInfo.shopName"></span>】客户线索在采美的孵化动作和转化效果</p>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
-        <div class="chart-title">
-            <p>品牌推广阶段</p>
-        </div>
-        <div class="chart-content-text">
-            <h1>数据总结：</h1>
-            <p v-text="summarize"></p>
-        </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-title">
+                <p>品牌推广阶段</p>
             </div>
-        </div>
-        <div class="chart-content-main">
-            <div class="chart-main-max ri" id="myChart1">
+            <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 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">【{{ shopInfo.shopName }}】公众号推文点击量</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="name" align="center" width="150">
-                        <template slot-scope="{ row }">
-                            <template>
-                                <a style="color: #2fa4e7" target="_blank" :href="row.link"> {{ row.name }}</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="time" 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>
-            <p v-text="summarize1"></p>
-        </div>
-        <div class="chart-content-main">
-            <div class="chart-main-max min clear">
-                <div class="chart-main-min-title">【{{ shopInfo.shopName }}】关键词SEO收录数据</div>
-                <el-table ref="table" :data="keywordList" height="390px" border>
-                    <el-table-column prop="name" label="关键词" align="center"></el-table-column>
-                    <el-table-column prop="seo" label="SEO排名" align="center">
-                        <template slot-scope="{ row }">
-                            <el-popover
-                                    placement="top-start"
-                                    title=""
-                                    width="380"
-                                    trigger="hover"
-                            >
-                                <img :src="row.seo" alt="" style="width:350px;height:350px;">
-                                <img slot="reference" :src="row.seo" alt="" style="width:60px;height:60px;">
-                            </el-popover>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="value" label="搜索次数" align="center"></el-table-column>
-                </el-table>
+            <div class="chart-title" id="section-2">
+                <p>潜客运营阶段</p>
             </div>
-        </div>
-        <div class="chart-content-main">
-            <div class="chart-main-box le" id="myChart5">
-
+            <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 class="chart-main-box ri" id="myChart8">
+            <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-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">【{{ shopInfo.shopName }}】访问用户全商城点击量</div>
-                <el-table ref="table" :data="bannerList" border>
-                    <el-table-column prop="title" label="广告位置/时间" align="center"></el-table-column>
-                    <el-table-column prop="image" label="首页" align="center">
-                        <template slot-scope="{ row }">
-                            <el-popover
-                                    placement="top-start"
-                                    title=""
-                                    width="380"
-                                    trigger="hover"
-                            >
-                                <img :src="row.image" alt="" style="width:350px;height:170px;">
-                                <img slot="reference" :src="row.image" alt="" style="width:170px;height:85px;">
-                            </el-popover>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="image1" label="信息中心" align="center">
-                        <template slot-scope="{ row }">
-                            <el-popover
-                                    placement="top-start"
-                                    title=""
-                                    width="380"
-                                    trigger="hover"
-                            >
-                                <img :src="row.image1" alt="" style="width:350px;height:170px;">
-                                <img slot="reference" :src="row.image1" alt="" style="width:170px;height:85px;">
-                            </el-popover>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="number" label="11月总点击量" 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>
-            <p v-text="summarize2"></p>
-        </div>
-        <div class="chart-content-main">
-            <div class="chart-main-max" id="myChart7"></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>
+            </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>