数据图表

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

@@ -16,17 +16,17 @@
   .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: 676px; margin-top: 16px;}
-  .chart-main-bot{width: 100%;height: 494px;}
-  .chart-main-top img{width: 100%;height: 676px;}
-  .chart-main-bot img{width: 100%;height: 494px;}
+  .chart-main-top{width: 100%;height: auto; margin-top: 16px;}
+  .chart-main-bot{width: 100%;height: auto;}
+  .chart-main-top img{width: 100%;height: auto;}
+  .chart-main-bot img{width: 100%;height: 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{height: 1010px;}
+  .chart-main-max.table{min-height: 1000px;}
   .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;}

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

@@ -8,19 +8,39 @@ const chartContent = new Vue({
         shopId:0,
         volumeList:[],
         bannerList:[],
+        chartLogo:'',
+        chartBanner:'',
         summarize:'',
         summarize1:'',
-        summarize2:''
-
+        summarize2:'',
+        isLoading:false
     },
     computed: {
 
     },
     methods: {
+        openFullScreen2(shopId) {
+            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)
+            }, 200);
+        },
         chartInit(shopId){
             console.log('shopId',shopId)
             this.volumeList = this.chartData[shopId].volumeList
             this.bannerList = this.chartData[shopId].bannerList
+            this.chartLogo = this.chartData[shopId].chartLogo
+            this.chartBanner = this.chartData[shopId].chartBanner
             this.summarize = this.chartData[shopId].summarize
             this.summarize1 = this.chartData[shopId].summarize1
             this.summarize2 = this.chartData[shopId].summarize2
@@ -43,7 +63,7 @@ const chartContent = new Vue({
     },
     mounted: function () {
         this.shopId = getUrlParam("shopId");
-        this.chartInit(this.shopId)
+        this.openFullScreen2(this.shopId)
     }
 });
 

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

@@ -5,6 +5,10 @@ const jsonMixin = function () {// 通知消息
             return{
                 chartData:{
                     1378: {
+                        // 顶部logo
+                        chartLogo:'https://admin.caimei365.com/userfiles/1/images/photo/2023/11/ross-logo.png',
+                        // 顶部图
+                        chartBanner:'https://img.caimei365.com/group1/M00/04/A0/rB-lGGVcQ2eAOl_lAAFD4qvhKP4215.png',
                         // 第一阶段总结
                         summarize:'ROSS在9月份的体用户访问数量相对不高，因此意向客户数量偏少。对此有以下点因素综合影响：①缺少专业内容在公域进行传播；②部分渠道无法发送短内容，或传播营销内容；',
                         // 第二阶段总结
@@ -317,6 +321,10 @@ const jsonMixin = function () {// 通知消息
                         },
                     },
                     1634: {
+                        // 顶部logo
+                        chartLogo:'https://img.caimei365.com/group1/M00/04/A0/rB-lGGVcQ2eAILQCAAAYtawMIj0814.png',
+                        // 顶部图
+                        chartBanner:'https://img.caimei365.com/group1/M00/04/A0/rB-lGGVcQ2eAOl_lAAFD4qvhKP4215.png',
                         // 第一阶段总结
                         summarize:'自丝艾特携新品超清秀入驻以来，采美针对品牌特性，先后创作新品系列、推荐系列、科普系列、门店访谈等多维度推文，分别从技术原理到市场热度全面展现了超清秀的实力，并在采美全网渠道推送内容，通过内容传播获取更多客户资源；\n' +
                             '通过对比展现量和阅读量可以看出，超清秀在公众号、微博用户访问量较高，其中，微博和微信的营销规则管控力度较低，因此整体访问量偏高；后续采美通过设立/参与【高端皮肤管理】等相关话题活动，促进品牌在市场的知名度提升；',

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

@@ -11,124 +11,124 @@
 </head>
 <body>
 <!-- 引用头部 -->
-<header id="globalHead" xmlns:th="http://www.w3.org/1999/xhtml">
-  <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="/" class="logo none">
-        <img class="pcOnly" src="https://img.caimei365.com/group1/M00/04/A0/rB-lGGVcQ2eAILQCAAAYtawMIj0814.png" alt="采美 生美/医美采购服务平台"/>
-        <img class="h5Only" src="https://img.caimei365.com/group1/M00/04/A0/rB-lGGVcQ2eAILQCAAAYtawMIj0814.png" alt="采美 生美/医美采购服务平台"/>
-      </a>
-    </div>
-  </div>
-  <input type="hidden" th:value="${coreServer}" id="coreServer">
-  <input type="hidden" th:value="${agent}" id="userAgent">
-</header>
+<!--<header id="globalHead" xmlns:th="http://www.w3.org/1999/xhtml">-->
+
+<!--</header>-->
 <!-- 机构信息 -->
 <div id="chartContent" v-cloak>
-  <div class="chart-content">
-    <div class="chart-content-main">
-      <div class="chart-main-top">
-        <img src="https://img.caimei365.com/group1/M00/04/A0/rB-lGGVcQ2eAOl_lAAFD4qvhKP4215.png" alt="漏斗模型">
-      </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 src="https://img.caimei365.com/group1/M00/04/A0/rB-lGGVcQ2eAVvLYAADU4nvPMS4889.jpg" alt="漏斗模型">
-      </div>
-    </div>
-    <div class="chart-content-main">
-      <div class="chart-main-max ri" id="myChart1">
+    <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="chartLogo" alt="采美 生美/医美采购服务平台"/>
+                <img class="h5Only" :src="chartLogo" alt="采美 生美/医美采购服务平台"/>
+            </a>
+        </div>
+    </div>
+    <div class="chart-content" v-if="isLoading">
+        <div class="chart-content-main">
+          <div class="chart-main-top">
+            <img :src="chartBanner" alt="漏斗模型">
+          </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 src="https://img.caimei365.com/group1/M00/04/A0/rB-lGGVcQ2eAVvLYAADU4nvPMS4889.jpg" 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">
-        <div class="chart-main-min-title">6-10月超清秀公众号推文阅读量</div>
-        <el-table ref="table" :data="volumeList" border>
-          <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="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">
-      <div class="chart-main-box le" id="myChart2">
+          </div>
+        </div>
+        <div class="chart-content-main">
+          <div class="chart-main-max ri table">
+            <div class="chart-main-min-title">6-10月公众号推文阅读量</div>
+            <el-table ref="table" :data="volumeList" border>
+              <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="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">
+          <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 class="chart-title">
+          <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-468" id="myChart4"></div>
+          <div class="chart-main-300">
+            <div class="chart-main-min-title">访问用户全商城点击量</div>
+            <el-table ref="table" :data="bannerList" height="200px" border>
+              <el-table-column prop="title" label="广告位置" align="center"></el-table-column>
+              <el-table-column prop="image" label="广告图" align="center">
+                <template slot-scope="{ row }">
+                  <img :src="row.image" :alt="row.name" style="width: 50px;height: 50px;">
+                </template>
+              </el-table-column>
+              <el-table-column prop="number" label="点击量" align="center"></el-table-column>
+            </el-table>
+          </div>
+          <div class="chart-main-400" id="myChart5"></div>
+        </div>
+        <div class="chart-content-main">
+          <div class="chart-main-max" id="myChart0"></div>
+        </div>
+        <div class="chart-content-main">
+          <div class="chart-main-max" id="myChart6"></div>
+        </div>
+        <div class="chart-title">
+          <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>
-    <div class="chart-title">
-      <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-468" id="myChart4"></div>
-      <div class="chart-main-300">
-        <div class="chart-main-min-title">访问用户全商城点击量</div>
-        <el-table ref="table" :data="bannerList" height="200px" border>
-          <el-table-column prop="title" label="广告位置" align="center"></el-table-column>
-          <el-table-column prop="image" label="广告图" align="center">
-            <template slot-scope="{ row }">
-              <img :src="row.image" :alt="row.name" style="width: 50px;height: 50px;">
-            </template>
-          </el-table-column>
-          <el-table-column prop="number" label="点击量" align="center"></el-table-column>
-        </el-table>
-      </div>
-      <div class="chart-main-400" id="myChart5"></div>
-    </div>
-    <div class="chart-content-main">
-      <div class="chart-main-max" id="myChart0"></div>
-    </div>
-    <div class="chart-content-main">
-      <div class="chart-main-max" id="myChart6"></div>
-    </div>
-    <div class="chart-title">
-      <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/foot-link"></template>