对接首页统计图接口

src/views/contentManagement/newsInformation/index.vue

@@ -463,7 +463,7 @@ export default {
       this.intervalId = setInterval(() => {
         queryCrawlerStatus({ id: this.checkId }).then(res => {
           if (res.data.status === '1') {
-            this.$message.success('抓取成功')
+            this.$message.success('成功添加' + res.data.num + '条数据')
             this.webLoading = false
             this.imgLoading = false
             this.loadData()

src/views/dashboard/index/index.vue

@@ -86,9 +86,12 @@
           <div slot="header" class="clearfix">
             <span>代言人推广次数展示:</span>
           </div>
-          <div id="echarts-peoplePromotionFrequency" class="span_1">
+          <div v-show="barShow" id="echarts-peoplePromotionFrequency" class="span_1">
             <div id="dataCharts_peoplePromotionFrequency" style="height: 16vh" />
           </div>
+          <div v-show="!barShow" class="nodata" style="height: 16vh">
+            暂无数据
+          </div>
         </el-card>
       </el-col>
       <el-col :span="8" style="height: 100%">
@@ -103,11 +106,11 @@
               style="width: 100%"
               class="top"
             >
-              <el-table-column type="index" label="序号" align="center" />
-              <el-table-column prop="name" label="姓名" align="center" />
-              <el-table-column prop="phone" label="手机号" align="center" />
-              <el-table-column prop="clickThroughRate" label="推广次数" align="center" />
-              <el-table-column prop="price" label="金额" align="center" />
+              <el-table-column type="index" label="序号" width="50" :show-overflow-tooltip="true"/>
+              <el-table-column prop="name" label="姓名" width="80" :show-overflow-tooltip="true"/>
+              <el-table-column prop="phone" label="手机号" :show-overflow-tooltip="true"/>
+              <el-table-column prop="clickThroughRate" label="推广次数" width="80" :show-overflow-tooltip="true"/>
+              <el-table-column prop="price" label="金额" width="50" :show-overflow-tooltip="true"/>
             </el-table>
             <vue-seamless-scroll
               :data="list"
@@ -120,11 +123,11 @@
                 style="width: 100%"
                 class="bottom"
               >
-                <el-table-column type="index" label="序号" align="center" />
-                <el-table-column prop="name" label="姓名" align="center" />
-                <el-table-column prop="phone" label="手机号" align="center" />
-                <el-table-column prop="clickThroughRate" label="推广次数" align="center" />
-                <el-table-column prop="price" label="金额" align="center" />
+                <el-table-column type="index" label="序号" width="50" :show-overflow-tooltip="true"/>
+                <el-table-column prop="name" label="姓名" width="80" :show-overflow-tooltip="true"/>
+                <el-table-column prop="phone" label="手机号" :show-overflow-tooltip="true" />
+                <el-table-column prop="clickThroughRate" label="推广次数" width="80" :show-overflow-tooltip="true"/>
+                <el-table-column prop="price" label="金额" width="50" :show-overflow-tooltip="true"/>
               </el-table>
             </vue-seamless-scroll>
 
@@ -143,9 +146,12 @@
               <div class="videNum">视频总推广次数:</div>
             </div>
           </div>
-          <div id="echarts-textPieChart" class="span_1">
+          <div v-show="pieShow" id="echarts-textPieChart" class="span_1" v-loading="loading">
             <div id="dataCharts_textPieChart" style="height: 16vh" />
           </div>
+          <div v-show="!pieShow" class="nodata" style="height: 16vh">
+            暂无数据
+          </div>
         </el-card>
       </el-col>
 
@@ -168,9 +174,12 @@
               </el-button>
             </div>
           </el-row>
-          <div id="echarts-leaveMessage" class="span_1">
+          <div v-show="promotionShow" id="echarts-leaveMessage" class="span_1" v-loading="loading">
             <div id="dataCharts_leaveMessage" style="height: 10vh" />
           </div>
+          <div v-show="!promotionShow" class="nodata" style="height: 10vh">
+            暂无数据
+          </div>
         </el-card>
       </el-col>
     </el-row>
@@ -193,6 +202,7 @@ export default {
     }
     return {
       list: [],
+      loading: true,
       allowScroll: true,
       isActive: '1',
       activeName: 'first',
@@ -222,7 +232,10 @@ export default {
       promotionArticle: [], // 柱状图文章
       promotionArticleNum: [], // 柱状图文章推广次数
       promotionVideo: [], // 柱状图视频
-      promotionVideoNum: [] // 柱状图视频推广次数
+      promotionVideoNum: [], // 柱状图视频推广次数
+      barShow: true,
+      pieShow: true,
+      promotionShow: true
     }
   },
   computed: {
@@ -294,15 +307,16 @@ export default {
   methods: {
     /** 切换所属商家*/
     changeCompany() {
-      this.getTableData() // 代言人，文章，视频数据
-      this.handleGetPeoplePromotionFrequency()
-      this.handleGetPeopleTextPie()
-      this.getPromotionArticle()
       this.deptList.forEach(item => {
         if (item.businessId === this.company) {
           this.companyName = item.unitName
         }
       })
+      this.getTableData() // 代言人，文章，视频数据
+      this.handleGetPeoplePromotionFrequency()
+      this.handlePieData()
+      // this.handleGetPeopleTextPie()
+      this.getPromotionArticle()
     },
     /** 商家下拉*/
     getDeptList() {
@@ -315,7 +329,8 @@ export default {
             this.getTableData() // 代言人，文章，视频数据
             this.handleGetTextVideoEcharts() // 文章视频echarts更新
             this.handleGetPeoplePromotionFrequency() // 代言人文章视频推广次数统计
-            this.handleGetPeopleTextPie() // 代言人文章视频饼图
+            this.handlePieData()
+            // this.handleGetPeopleTextPie() // 代言人文章视频饼图
             this.getPromotionArticle() // 滚动表格数据
           }
         })
@@ -354,6 +369,11 @@ export default {
     // 文章视频推广次数柱状图
     handleGetTextVideoEcharts() {
       if (this.isActive === '1') {
+        if (this.promotionArticle.length <= 0) {
+          this.promotionShow = false
+        } else {
+          this.promotionShow = true
+        }
         const myChartAverage = echarts.init(document.getElementById('dataCharts_leaveMessage'))
         const optionAverage = {
           tooltip: {
@@ -371,7 +391,18 @@ export default {
           },
           xAxis: {
             type: 'category',
-            data: ['文章1', '文章2', '文章3', '文章4', '文章5']
+            // data: ['文章1', '文章2', '文章3', '文章4', '文章5']
+            data: this.promotionArticle,
+            axisLabel: {
+              formatter: function(value) {
+                // 使用 15 个字符作为换行的阈值
+                if (value.length > 10) {
+                  return value.substring(0, 10) + '\n' + value.substring(10)
+                } else {
+                  return value
+                }
+              }
+            }
           },
           yAxis: {
             type: 'value'
@@ -383,12 +414,18 @@ export default {
               // 设置柱状图的颜色
               color: '#91CC75'
             },
-            data: [19, 11, 23, 9, 18]
+            // data: [19, 11, 23, 9, 18]
+            data: this.promotionArticleNum
           }]
         }
         myChartAverage.setOption(optionAverage)
       }
       if (this.isActive === '2') {
+        if (this.promotionVideo.length <= 0) {
+          this.promotionShow = false
+        } else {
+          this.promotionShow = true
+        }
         const myChartAverage = echarts.init(document.getElementById('dataCharts_leaveMessage'))
         const optionAverage = {
           tooltip: {
@@ -406,7 +443,8 @@ export default {
           },
           xAxis: {
             type: 'category',
-            data: ['视频1', '视频2', '视频3', '视频4', '视频5']
+            // data: ['视频1', '视频2', '视频3', '视频4', '视频5']
+            data: this.promotionVideo
           },
           yAxis: {
             type: 'value'
@@ -418,7 +456,8 @@ export default {
               // 设置柱状图的颜色
               color: '#91CC75'
             },
-            data: [1, 2, 3, 4, 5]
+            // data: [1, 2, 3, 4, 5]
+            data: this.promotionVideoNum
           }]
         }
         myChartAverage.setOption(optionAverage)
@@ -430,6 +469,11 @@ export default {
         console.log('res', res)
         if (res.code === 200) {
           const barChar = res.data
+          if (res.data == null || res.data.length <= 0) {
+            this.barShow = false
+          } else {
+            this.barShow = true
+          }
           this.barNameList = barChar.map(item => item.name)
           this.barArticle = barChar.map(item => item.newsRate)
           this.barVideo = barChar.map(item => item.videoRate)
@@ -482,18 +526,54 @@ export default {
         }
       })
     },
-    /** 代言人文章饼图*/
-    handleGetPeopleTextPie() {
+    handlePieData() {
+      this.pieShow = true
+      this.loading = true
       pieChart({ businessId: this.company, type: 0 }).then(res => {
         if (res.code === 200) {
+          if (res.data === null || res.data.length <= 0) {
+            this.pieShow = false
+            this.loading = false
+          }
           console.log('饼状图', res.data)
+          this.pieArticle = []
+          res.data.forEach(item => {
+            const article = {
+              value: item.rate,
+              name: item.title
+              // itemStyle: { color: '#54C0D8' }
+            }
+            this.pieArticle.push(article)
+          })
+          console.log('this.pieArticle', this.pieArticle)
+          this.promotionArticle = res.data.map(item => item.title)
+          this.promotionArticleNum = res.data.map(item => item.rate)
         }
       })
       pieChart({ businessId: this.company, type: 1 }).then(res => {
         if (res.code === 200) {
           console.log('饼状图', res.data)
+          this.pieVideo = []
+          res.data.forEach(item => {
+            const article = {
+              value: item.rate,
+              name: item.title
+              // itemStyle: { color: '#54C0D8' }
+            }
+            this.pieVideo.push(article)
+          })
+          this.promotionVideo = res.data.map(item => item.title)
+          this.promotionVideoNum = res.data.map(item => item.rate)
         }
       })
+      setTimeout(() => {
+        this.loading = false
+        this.handleGetPeopleTextPie()
+        this.handleGetTextVideoEcharts()
+      }, 2000)
+    },
+    /** 代言人文章饼图*/
+    handleGetPeopleTextPie() {
       const myChartPeopleTextPie = echarts.init(document.getElementById('dataCharts_textPieChart'))
       const optionAverage = {
         tooltip: {
@@ -509,26 +589,28 @@ export default {
             type: 'pie',
             radius: '85%',
             center: ['25%', '50%'], // 设置饼图的中心位置
-            data: [
-              { value: 19, name: '文章1', itemStyle: { color: '#54C0D8' }},
-              { value: 11, name: '文章2', itemStyle: { color: '#BF50E5' }},
-              { value: 23, name: '文章3', itemStyle: { color: '#E56250' }},
-              { value: 9, name: '文章4', itemStyle: { color: '#54D871' }},
-              { value: 18, name: '文章5', itemStyle: { color: '#91CC75' }}
-            ]
+            // data: [
+            //   { value: 19, name: '文章1', itemStyle: { color: '#54C0D8' }},
+            //   { value: 11, name: '文章2', itemStyle: { color: '#BF50E5' }},
+            //   { value: 23, name: '文章3', itemStyle: { color: '#E56250' }},
+            //   { value: 9, name: '文章4', itemStyle: { color: '#54D871' }},
+            //   { value: 18, name: '文章5', itemStyle: { color: '#91CC75' }}
+            // ]
+            data: this.pieArticle
           },
           {
             name: '视频',
             type: 'pie',
             radius: '85%',
             center: ['75%', '50%'], // 设置饼图的中心位置
-            data: [
-              { value: 11, name: '视频1', itemStyle: { color: '#54C0D8' }},
-              { value: 10, name: '视频2', itemStyle: { color: '#BF50E5' }},
-              { value: 6, name: '视频3', itemStyle: { color: '#E56250' }},
-              { value: 9, name: '视频4', itemStyle: { color: '#54D871' }},
-              { value: 7, name: '视频5', itemStyle: { color: '#91CC75' }}
-            ]
+            // data: [
+            //   { value: 11, name: '视频1', itemStyle: { color: '#54C0D8' }},
+            //   { value: 10, name: '视频2', itemStyle: { color: '#BF50E5' }},
+            //   { value: 6, name: '视频3', itemStyle: { color: '#E56250' }},
+            //   { value: 9, name: '视频4', itemStyle: { color: '#54D871' }},
+            //   { value: 7, name: '视频5', itemStyle: { color: '#91CC75' }}
+            // ]
+            data: this.pieVideo
           }
         ]
       }
@@ -653,6 +735,11 @@ export default {
   display: flex;
   width: 100%;
 }
+.nodata {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 >>> .top .el-table__body-wrapper {
   display: none !important;
 }