朱鑫波 vor 4 Jahren
Ursprung
Commit
83d2a614c4

+ 30 - 0
src/components/ChartCard.vue

@@ -113,4 +113,34 @@ export default {
   line-height: 38px;
   height: 38px;
 }
+
+@media (min-width: 1600px) {
+  .total {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+    color: #000;
+    margin-top: 4px;
+    margin-bottom: 0;
+    font-size: 30px;
+    line-height: 38px;
+    height: 38px;
+  }
+}
+
+@media (max-width: 1599px) {
+  .total {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+    color: #000;
+    margin-top: 4px;
+    margin-bottom: 0;
+    font-size: 18px;
+    line-height: 38px;
+    height: 38px;
+  }
+}
 </style>

+ 2 - 2
src/utils/request.js

@@ -16,8 +16,8 @@ else if (process.env.NODE_ENV == 'debug') {
 else if (process.env.NODE_ENV == 'production') { 
   
   // axios.defaults.baseURL = 'http://192.168.1.251/jeecg-boot';
-  // axios.defaults.baseURL = 'http://139.186.165.84:8806/jeecg-boot';     
-  axios.defaults.baseURL = 'http://api.tjyourong.com.cn/jeecg-boot';
+  axios.defaults.baseURL = 'http://139.186.165.84:8806/jeecg-boot';     
+  // axios.defaults.baseURL = 'http://api.tjyourong.com.cn/jeecg-boot';
 }
 const service = axios.create({
 //   baseURL: '/jeecg-boot', // api base_url

+ 127 - 21
src/views/modules/Statistics/materialReport/marterialDetail.vue

@@ -23,18 +23,21 @@
   <a-row :gutter="10">
     <a-spin :spinning="spinning">
       <a-col :sm="6" style="margin-bottom: 20px; z-index: 10">
-        <a-card class="search-box" style="min-height: 500px" v-if="materialInfo">
-          <video class="video" :src="materialInfo.url" controls="controls" style="width: 100%">
+        <a-card class="search-box" style="min-height: 500px">
+          <video class="video" :src="materialInfo.url" controls="controls" style="width: 100%" v-if="materialInfo">
             您的浏览器不支持 video 标签。
           </video>
+          <img :src="noImg" alt="" v-else style="width: 100%" />
         </a-card>
       </a-col>
       <a-col :sm="18" style="margin-bottom: 20px; z-index: 10">
-        <a-card class="search-box info-detail" style="min-height: 300px" v-if="materialInfo">
-          <a-descriptions title="视频信息">
+        <a-card class="search-box info-detail" style="min-height: 300px">
+          <a-descriptions title="视频信息" v-if="materialInfo">
             <a-descriptions-item label="素材标题" :span="3"> {{ materialInfo.materialName }} </a-descriptions-item>
             <a-descriptions-item label="素材ID"> {{ materialInfo.materialId }} </a-descriptions-item>
-            <a-descriptions-item label="上线时间"> {{ materialInfo.createTime.split(' ')[0] }} </a-descriptions-item>
+            <a-descriptions-item label="上线时间">
+              {{ materialInfo.createTime ? materialInfo.createTime.split(' ')[0] : '无' }}
+            </a-descriptions-item>
             <a-descriptions-item label="素材类型">
               {{ materialInfo.materialType == '' ? '无' : materialInfo.materialType }}
             </a-descriptions-item>
@@ -75,7 +78,7 @@
             </a-descriptions-item>
           </a-descriptions>
         </a-card>
-        <a-card
+        <!-- <a-card
           class="search-box"
           style="min-height: 300px; margin: 20px 0"
           title="数据概览"
@@ -296,7 +299,7 @@
               <p><span>数据库均值</span>{{ dataView.follow[2].follow }}</p>
             </a-col>
           </a-row>
-        </a-card>
+        </a-card> -->
         <a-card class="search-box" style="min-height: 300px" title="数据消耗趋势">
           <div
             id="echartCircular"
@@ -324,6 +327,7 @@ export default {
   name: 'online-training-list',
   data() {
     return {
+      noImg: require('@/assets/noImg.png'),
       materialInfo: null,
       dataView: null,
       clientWidth: 1920,
@@ -422,7 +426,7 @@ export default {
               return item.cost.toFixed(3)
             }),
             symbol: 'circle',
-            symbolSize: 1,
+            symbolSize: 10,
             lineStyle: {
               normal: {
                 width: 2,
@@ -456,8 +460,111 @@ export default {
         })
       }
     },
+    getKuaishou() {
+      var params = {
+        mediaId: this.$route.query.mediaId,
+        md5: this.$route.query.md5,
+      }
+      var that = this
+      var getProjectIdByMd5 = new Promise(function (resolve, reject) {
+        that.postDataAction('/overView/getProjectIdByMd5', params).then((res) => {
+          if (res.success) {
+            var materialDetailCharge = new Promise(function (resolve, reject) {
+              that
+                .postDataAction('/overView/materialDetailCharge', { md5: that.$route.query.md5, projectId: res.result })
+                .then((res) => {
+                  if (res.success) {
+                    resolve(res.result)
+                  }
+                })
+            })
+            var materialDetailPhotoShow = new Promise(function (resolve, reject) {
+              that
+                .postDataAction('/overView/materialDetailPhotoShow', {
+                  md5: that.$route.query.md5,
+                  projectId: res.result,
+                })
+                .then((res) => {
+                  if (res.success) {
+                    resolve(res.result)
+                  }
+                })
+            })
+            var materialDetailPhotoClick = new Promise(function (resolve, reject) {
+              that
+                .postDataAction('/overView/materialDetailPhotoClick', {
+                  md5: that.$route.query.md5,
+                  projectId: res.result,
+                })
+                .then((res) => {
+                  if (res.success) {
+                    resolve(res.result)
+                  }
+                })
+            })
+            var materialDetailAClick = new Promise(function (resolve, reject) {
+              that
+                .postDataAction('/overView/materialDetailAClick', { md5: that.$route.query.md5, projectId: res.result })
+                .then((res) => {
+                  if (res.success) {
+                    resolve(res.result)
+                  }
+                })
+            })
+            var materialDetailBClick = new Promise(function (resolve, reject) {
+              that
+                .postDataAction('/overView/materialDetailBClick', { md5: that.$route.query.md5, projectId: res.result })
+                .then((res) => {
+                  if (res.success) {
+                    resolve(res.result)
+                  }
+                })
+            })
+            var materialDetailActivation = new Promise(function (resolve, reject) {
+              that
+                .postDataAction('/overView/materialDetailActivation', {
+                  md5: that.$route.query.md5,
+                  projectId: res.result,
+                })
+                .then((res) => {
+                  if (res.success) {
+                    resolve(res.result)
+                  }
+                })
+            })
+            var materialDetailPlay3sRate = new Promise(function (resolve, reject) {
+              that
+                .postDataAction('/overView/materialDetailPlay3sRate', {
+                  md5: that.$route.query.md5,
+                  projectId: res.result,
+                })
+                .then((res) => {
+                  if (res.success) {
+                    resolve(res.result)
+                  }
+                })
+            })
+            Promise
+              .all([
+                materialDetailPlay3sRate,
+                materialDetailCharge,
+                materialDetailPhotoShow,
+                materialDetailPhotoClick,
+                materialDetailAClick,
+                materialDetailBClick,
+                materialDetailActivation,
+               
+              ])
+              .then((item) => {
+                // dataView
+                console.log(item)
+              })
+          }
+        })
+      })
+    },
     getMaterialInfo() {
-      this.spinning = true
+      // this.spinning = true
       var params = {
         mediaId: this.$route.query.mediaId,
         md5: this.$route.query.md5,
@@ -465,20 +572,21 @@ export default {
       var data = []
       this.postDataAction('/overView/materialDetailInfo', params).then((res) => {
         if (res.success) {
-          this.materialInfo = res.result
-          
-        }
-      })
-      this.postDataAction('/overView/materialDetailAnalyse', params).then((res) => {
-        if (res.success) {
-          this.dataView = res.result
-           this.spinning = false
+          if (res.result) {
+            this.materialInfo = res.result
+          } else {
+            this.$error({
+              title: '页面数据加载出错',
+              content: '该视频未上传公司素材库,请重新上传之后,可展示视频信息',
+            })
+          }
         }
       })
+      this.getKuaishou()
+
       this.postDataAction('/overView/materialDetailChat', params).then((res) => {
         if (res.success) {
           this.initEchart('echartCircular', this.handlerEchartOption(res.result))
-          
         }
       })
     },
@@ -491,8 +599,6 @@ export default {
       this.getMaterialInfo()
     })
   },
-  created() {
-    
-  },
+  created() {},
 }
 </script>

+ 4 - 4
src/views/modules/Statistics/materialReport/marterialList.vue

@@ -190,14 +190,14 @@ const columnsFixd = [
     scopedSlots: { customRender: 'coverUrl' },
     align: 'center',
     key: 'date',
-    width: 200,
+    width: 100,
     fixed: 'left',
   },
   {
     title: '素材名称',
     dataIndex: 'materialName',
     align: 'center',
-    width: 200,
+    width: 100,
     fixed: 'left',
     customRender: function (text) {
       if (text) {
@@ -211,7 +211,7 @@ const columnsFixd = [
     title: '所属项目',
     dataIndex: 'projectName',
     align: 'center',
-    width: 200,
+    width: 100,
     fixed: 'left',
   },
 ]
@@ -378,7 +378,7 @@ export default {
       md5: '',
       visible: false,
       listNum: [],
-      scrollX: 1000,
+      scrollX: 1500,
       tableWidth: '', //设置表格的列宽
     }
   },

+ 4 - 4
src/views/modules/Statistics/materialReport/marterialTtList.vue

@@ -190,14 +190,14 @@ const columnsFixd = [
     scopedSlots: { customRender: 'coverUrl' },
     align: 'center',
     key: 'date',
-    width: 200,
+    width: 100,
     fixed: 'left',
   },
   {
     title: '素材名称',
     dataIndex: 'materialName',
     align: 'center',
-    width: 200,
+    width: 100,
     fixed: 'left',
     customRender: function (text) {
       if (text) {
@@ -211,7 +211,7 @@ const columnsFixd = [
     title: '所属项目',
     dataIndex: 'projectName',
     align: 'center',
-    width: 200,
+    width: 100,
     fixed: 'left',
   },
 ]
@@ -332,7 +332,7 @@ export default {
       md5: '',
       visible: false,
       listNum: [],
-      scrollX: 1000,
+      scrollX: 1500,
       tableWidth: '', //设置表格的列宽
     }
   },

+ 24 - 24
src/views/modules/Statistics/materialReport/materialReport.vue

@@ -31,7 +31,7 @@
 </style>
 <template>
   <div class="materialReport">
-    <div class="card-container">
+    <div class="card-containers">
       <a-tabs type="card">
         <a-tab-pane key="1">
           <span slot="tab">
@@ -108,7 +108,7 @@
       <a-row :gutter="24" style="margin-top: 20px">
         <a-col :sm="24" :md="12" :xl="6">
           <chart-card :loading="loading" title="总消耗" :total="cost | decimalsHandle">
-            <a-tooltip title="指标说明" slot="action">
+            <a-tooltip title="当前时间段的总消耗" slot="action">
               <a-icon type="info-circle-o" />
             </a-tooltip>
             <div slot="percentage">
@@ -129,7 +129,7 @@
         </a-col>
         <a-col :sm="24" :md="12" :xl="6">
           <chart-card :loading="loading" title="视频总数" :total="videoTotal + ''">
-            <a-tooltip title="指标说明" slot="action">
+            <a-tooltip title="当前时间段上新" slot="action">
               <a-icon type="info-circle-o" />
             </a-tooltip>
             <div slot="percentage">
@@ -145,8 +145,8 @@
           </chart-card>
         </a-col>
         <a-col :sm="24" :md="12" :xl="6">
-          <chart-card :loading="loading" title="爆款视频" :total="hotTotal + ''">
-            <a-tooltip title="指标说明" slot="action">
+          <chart-card :loading="loading" title="爆款视频" total="-">
+            <a-tooltip title="当前时间段爆款视频" slot="action">
               <a-icon type="info-circle-o" />
             </a-tooltip>
 
@@ -155,16 +155,16 @@
               <span slot="term">周同比</span>
               12%
             </trend> -->
-              <trend flag="down">
+              <!-- <trend flag="down">
                 <span slot="term">新增</span>
                 0
-              </trend>
+              </trend> -->
             </div>
           </chart-card>
         </a-col>
         <a-col :sm="24" :md="12" :xl="6">
-          <chart-card :loading="loading" title="有效视频" :total="xiaoTotal + ''">
-            <a-tooltip title="指标说明" slot="action">
+          <chart-card :loading="loading" title="有效视频" total="-">
+            <a-tooltip title="当前时间段有效视频" slot="action">
               <a-icon type="info-circle-o" />
             </a-tooltip>
             <div slot="percentage">
@@ -172,10 +172,10 @@
               <span slot="term">周同比</span>
               12%
             </trend> -->
-              <trend flag="down">
+              <!-- <trend flag="down">
                 <span slot="term">新增</span>
                 0
-              </trend>
+              </trend> -->
             </div>
           </chart-card>
         </a-col>
@@ -738,7 +738,7 @@ export default {
               return item.cost.toFixed(3)
             }),
             symbol: 'circle',
-            symbolSize: 1,
+            symbolSize: 10,
             lineStyle: {
               normal: {
                 width: 2,
@@ -881,31 +881,31 @@ export default {
 }
 </style>
 <style>
-.card-container {
-  overflow: hidden;
+.materialReport .card-containers {
+  overflow: hidden!important;
   /* padding: 24px; */
 }
-.card-container > .ant-tabs-card > .ant-tabs-content {
+.materialReport .card-containers > .ant-tabs-card > .ant-tabs-content {
   /* height: 120px; */
-  margin-top: -16px;
+  margin-top: -16px!important;
 }
 
-.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
-  background: #fff;
+.materialReport .card-containers > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
+  background: #fff!important;
   /* padding: 16px; */
 }
 
-.card-container > .ant-tabs-card > .ant-tabs-bar {
-  border-color: #fff;
+.materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar {
+  border-color: #fff!important;
 }
 
-.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
-  border-color: transparent;
+.materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
+  border-color: transparent!important;
   background: transparent !important;
 }
 
-.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
-  border-color: #fff;
+.materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
+  border-color: #fff!important;
   background: #fff !important;
 }
 </style>

+ 1 - 1
vue.config.js

@@ -86,7 +86,7 @@ module.exports = {
         //  target: 'http://adsp.tjyourong.com.cn/', //请求本地 需要jeecg-boot后台项目
         // target: 'http://192.168.1.251/', //请求本地 需要jeecg-boot后台项目
         // target:'http://118.24.244.213:8804',
-      //  target:'http://139.186.151.174:8804', //测试
+      //  target:'http://139.186.165.84:8806', //测试
 
         ws: false,