浏览代码

素材大盘

朱鑫波 3 年之前
父节点
当前提交
950262a6c2

+ 16 - 1
src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <a-locale-provider :locale="locale">
     <div id="app">
-      <router-view />
+      <router-view v-if="isRouterAlive"/>
       <audio ref="mmPlayer"></audio>
     </div>
   </a-locale-provider>
@@ -10,10 +10,17 @@
 import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
 import enquireScreen from '@/utils/device'
 import { mapGetters, mapMutations, mapActions } from 'vuex'
+
 export default {
+  provide(){
+    return {
+      reload:this.reload
+    }
+  },
   data() {
     return {
       locale: zhCN,
+      isRouterAlive:true
     }
   },
   created() {
@@ -36,6 +43,7 @@ export default {
 
     this.$nextTick(() => {
       this.setAudioele(this.$refs.mmPlayer)
+
     })
   },
   methods: {
@@ -45,6 +53,13 @@ export default {
       setCurrentIndex: 'SET_CURRENTINDEX',
       setAudioele: 'SET_AUDIOELE',
     }),
+    ...mapGetters(['userInfo']),
+    reload(){
+      this.isRouterAlive = false
+      this.$nextTick(()=>{
+        this.isRouterAlive = true
+      })
+    }
   },
 }
 </script>

+ 8 - 1
src/permission.js

@@ -6,7 +6,8 @@ import 'nprogress/nprogress.css' // progress bar style
 import notification from 'ant-design-vue/es/notification'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 import { generateIndexRouter } from "@/utils/util"
-
+import warterMark from './warterMark'
+import { mapGetters, mapMutations, mapActions } from 'vuex'
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
 
@@ -22,9 +23,11 @@ router.beforeEach((to, from, next) => {
     /* has token */
 
     if (to.path === '/user/login') {
+      warterMark.out()
       next({ path: '/dashboard/workplace' })
       NProgress.done()
     } else {
+      // warterMark.set(store.getters.userInfo.roleName)
       if (store.getters.permissionList.length === 0) {
         store.dispatch('GetPermissionList').then(res => {
           const menuData = res.result.menu;
@@ -54,19 +57,23 @@ router.beforeEach((to, from, next) => {
                message: '系统提示',
                description: '请求用户信息失败,请重试!'
              })*/
+            warterMark.out()
             store.dispatch('Logout').then(() => {
               next({ path: '/user/login', query: { redirect: to.fullPath } })
             })
           })
       } else {
+        warterMark.set(store.getters.userInfo.realname)
         next()
       }
     }
   } else {
     if (whiteList.indexOf(to.path) !== -1) {
       // 在免登录白名单,直接进入
+      // warterMark.set(store.getters.userInfo.roleName)
       next()
     } else {
+      warterMark.out()
       next({ path: '/user/login', query: { redirect: to.fullPath } })
       NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
     }

文件差异内容过多而无法显示
+ 645 - 257
src/views/modules/Statistics/materialReport/marterialDetail.vue


+ 177 - 120
src/views/modules/Statistics/materialReport/materialReport.vue

@@ -239,9 +239,21 @@
 					</a-card>
 				</a-col>
 			</a-row>
+		</a-spin>
+		<a-spin :spinning="spinningChart">
 			<a-row :gutter="24" style="margin-top: 20px" id="getWidth">
 				<a-col :xl="18">
 					<a-card title="数据趋势" style="width: 100%" :bordered="false">
+						<a-tabs v-model="active" @change="callback">
+							<a-tab-pane key="cost" tab="消耗">
+							</a-tab-pane>
+							<a-tab-pane key="active" tab="激活数">
+							</a-tab-pane>
+							<a-tab-pane key="aclick" tab="曝光数">
+							</a-tab-pane>
+							<!-- <a-tab-pane key="play_duration_3s" tab="3S播放率">
+							</a-tab-pane> -->
+						</a-tabs>
 						<div class="echart">
 							<div class="echartBody">
 								<div
@@ -261,6 +273,16 @@
 				</a-col>
 				<a-col :xl="6">
 					<a-card title="标签占比" style="width: 100%" :bordered="false">
+						<a-tabs v-model="active" @change="callback" style="visibility:hidden;">
+							<a-tab-pane key="cost" tab="消耗">
+							</a-tab-pane>
+							<a-tab-pane key="active" tab="激活数">
+							</a-tab-pane>
+							<a-tab-pane key="aclick" tab="曝光数">
+							</a-tab-pane>
+							<a-tab-pane key="play_duration_3s" tab="3S播放率">
+							</a-tab-pane>
+						</a-tabs>
 						<div class="echart">
 							<div class="echartBody">
 								<a-empty style="height: 350px; position: relative" />
@@ -276,118 +298,119 @@
 					</a-card>
 				</a-col>
 			</a-row>
-			<a-row :gutter="24" style="margin-top: 20px">
-				<a-col :xl="12">
-					<a-card title="top素材排行榜" style="width: 100%; min-height: 700px" :bordered="false">
-						<a-radio-group
-							v-if="mediaDimension === 'b'"
-							v-model="materialRankValue"
-							style="margin-bottom: 15px;"
-							@change="handleMaterialRanking"
-						>
-							<a-radio-button :value="0">内部</a-radio-button>
-							<a-radio-button :value="1">素造</a-radio-button>
-						</a-radio-group>
-						<a slot="extra" @click="getMoreVideoList">查看更多</a>
-						<div v-if="!signatureStatus && videoList.length > 0">
-							<ul class="top-ul-style">
-								<li v-for="(item, index) in videoList" :key="item.signature">
-									<div style="display: flex; position: relative; width: 80%; cursor: pointer">
-										<span style="position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px">
-											<img :src="require('./image/' + (index + 1) + '.png')" alt="" style="width: 25px; height: auto"/>
-										</span>
+		</a-spin>
+		<a-row :gutter="24" style="margin-top: 20px">
+			<a-col :xl="12">
+				<a-card title="top素材排行榜" style="width: 100%; min-height: 700px" :bordered="false">
+					<a-radio-group
+						v-if="mediaDimension === 'b'"
+						v-model="materialRankValue"
+						style="margin-bottom: 15px;"
+						@change="handleMaterialRanking"
+					>
+						<a-radio-button :value="0">内部</a-radio-button>
+						<a-radio-button :value="1">素造</a-radio-button>
+					</a-radio-group>
+					<a slot="extra" @click="getMoreVideoList">查看更多</a>
+					<div v-if="!signatureStatus && videoList.length > 0">
+						<ul class="top-ul-style">
+							<li v-for="(item, index) in videoList" :key="item.signature">
+								<div style="display: flex; position: relative; width: 80%; cursor: pointer">
+									<span style="position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px">
+										<img :src="require('./image/' + (index + 1) + '.png')" alt="" style="width: 25px; height: auto"/>
+									</span>
+									<div
+										style="
+										width: 25%;
+										height: 100%;
+										text-align: center;
+										background: #f2f2f2;
+										margin-left: 40px;
+										border-radius: 5px;
+										position: relative;
+										"
+									>
 										<div
-											style="
-											width: 25%;
-											height: 100%;
-											text-align: center;
-											background: #f2f2f2;
-											margin-left: 40px;
-											border-radius: 5px;
-											position: relative;
+											:style="{
+												backgroundImage: 'url(' + (item.coverUrl || noImg) + ')',
+												backgroundSize: 'cover',
+												backgroundRepeat: 'no-repeat',
+												backgroundPosition: 'center center',
+												overflow: 'hidden',
+												position: 'absolute',
+												top: '0',
+												zIndex: '0',
+											}"
+											class="showShare bg"
+											@click="
+												visibleVideo = true
+												videoUrlShow = item.url
 											"
 										>
-											<div
-												:style="{
-													backgroundImage: 'url(' + (item.coverUrl || noImg) + ')',
-													backgroundSize: 'cover',
-													backgroundRepeat: 'no-repeat',
-													backgroundPosition: 'center center',
-													overflow: 'hidden',
-													position: 'absolute',
-													top: '0',
-													zIndex: '0',
-												}"
-												class="showShare bg"
-												@click="
-													visibleVideo = true
-													videoUrlShow = item.url
-												"
-											>
-											</div>
-											<img
-												:src="item.coverUrl || noImg"
-												style="width: auto; height: 100%; max-width: 100%; position: relative; z-index: 2"
-												srcset=""
-												@click="
-													visibleVideo = true
-													videoUrlShow = item.url
-												"
-											/>
-										</div>
-										<div
-											style="display: flex; flex-flow: column; justify-content: space-between; width: 60%"
-											@click.stop="toDetail(item.signature)"
-										>
-											<p style="margin-left: 10px; color: #1890ff">
-												{{ item.materialName ? item.materialName : '无素材名称' }}
-											</p>
-											<p v-if="item.tag" style="margin-left: 10px; margin-bottom: 0">
-												<a-tag
-													v-for="(items, val) in item.tag.split(',')"
-													:key="val + 1"
-													style="margin-right: 5px"
-													v-if="val <= 3"
-												>
-													{{ items }}
-												</a-tag>
-											</p>
 										</div>
+										<img
+											:src="item.coverUrl || noImg"
+											style="width: auto; height: 100%; max-width: 100%; position: relative; z-index: 2"
+											srcset=""
+											@click="
+												visibleVideo = true
+												videoUrlShow = item.url
+											"
+										/>
 									</div>
-									<div class="li-cost">
-										<span>消耗</span>
-										<span>{{ (item.charge ? item.charge : item.cost) | decimalsHandle }}</span>
+									<div
+										style="display: flex; flex-flow: column; justify-content: space-between; width: 60%"
+										@click.stop="toDetail(item.signature)"
+									>
+										<p style="margin-left: 10px; color: #1890ff">
+											{{ item.materialName ? item.materialName : '无素材名称' }}
+										</p>
+										<p v-if="item.tag" style="margin-left: 10px; margin-bottom: 0">
+											<a-tag
+												v-for="(items, val) in item.tag.split(',')"
+												:key="val + 1"
+												style="margin-right: 5px"
+												v-if="val <= 3"
+											>
+												{{ items }}
+											</a-tag>
+										</p>
 									</div>
-								</li>
-							</ul>
-						</div>
-						<a-empty v-else-if="!signatureStatus && videoList.length === 0" style="margin-top: 20%"/>
-						<div v-else style="height: 200px;line-height: 200px;text-align: center;">
-							<a-spin/>
-						</div>
-					</a-card>
-				</a-col>
-				<a-col :xl="12">
-					<a-card title="top设计排行榜" style="width: 100%; min-height: 700px" :bordered="false">
-						<a-radio-group v-model="designRankingValue" style="margin-bottom: 15px;" @change="handleDesignRanking">
-							<a-radio-button :value="1">摄像</a-radio-button>
-							<a-radio-button :value="2">剪辑</a-radio-button>
-							<a-radio-button :value="3">编导</a-radio-button>
-						</a-radio-group>
-						<a-table
-							:columns="columns"
-							:data-source="designTopList"
-							:loading="designTopLoading"
-							:pagination="false"
-							bordered
-							size="middle"
-						>
-							<span slot="cost" slot-scope="text, records">{{ text | decimalsHandle }}</span>
-						</a-table>
-					</a-card>
-				</a-col>
-			</a-row>
-		</a-spin>
+								</div>
+								<div class="li-cost">
+									<span>消耗</span>
+									<span>{{ (item.charge ? item.charge : item.cost) | decimalsHandle }}</span>
+								</div>
+							</li>
+						</ul>
+					</div>
+					<a-empty v-else-if="!signatureStatus && videoList.length === 0" style="margin-top: 20%"/>
+					<div v-else style="height: 200px;line-height: 200px;text-align: center;">
+						<a-spin/>
+					</div>
+				</a-card>
+			</a-col>
+			<a-col :xl="12">
+				<a-card title="top设计排行榜" style="width: 100%; min-height: 700px" :bordered="false">
+					<a-radio-group v-model="designRankingValue" style="margin-bottom: 15px;" @change="handleDesignRanking">
+						<a-radio-button :value="1">摄像</a-radio-button>
+						<a-radio-button :value="2">剪辑</a-radio-button>
+						<a-radio-button :value="3">编导</a-radio-button>
+					</a-radio-group>
+					<a-table
+						:columns="columns"
+						:data-source="designTopList"
+						:loading="designTopLoading"
+						:pagination="false"
+						bordered
+						size="middle"
+					>
+						<span slot="cost" slot-scope="text, records">{{ text | decimalsHandle }}</span>
+					</a-table>
+				</a-card>
+			</a-col>
+		</a-row>
+
 		<a-modal title="查看视频" v-model="visibleVideo" :width="400" :footer="null">
 			<video class="video" :src="videoUrlShow" controls="controls" style="width: 100%">
 				您的浏览器不支持 video 标签。
@@ -439,6 +462,7 @@ export default {
 	},
 	data() {
 		return {
+			active:'cost',
 			timeShowEchartsStatus: true,
 			signatureStatus: false,
 			materialReportCardList: {},
@@ -452,6 +476,7 @@ export default {
 			videoUrlShow: '',
 			cost: '0',
 			spinning: false,
+			spinningChart:false,
 			loading: false,
 			chartList: [],
 			videoList: [],
@@ -699,13 +724,16 @@ export default {
 		},
 		getData() {
 			this.spinning = true
+			this.spinningChart = true
+			this.active = 'cost'
+			this.getAccountIndexData()
+			this.getPopularVideoData()
+			this.getChartDataList()
+			this.getVideoTopList()
+			this.getDesignTopList()
 			Promise.all([
 				this.getSumData(),
-				this.getAccountIndexData(),
-				this.getPopularVideoData(),
-				this.getChartDataList(),
-				this.getVideoTopList(),
-				this.getDesignTopList()
+			
 			]).then(res => {
 				this.spinning = false;
 				this.resetLoading = false;
@@ -714,10 +742,10 @@ export default {
 				this.spinning = false;
 				this.resetLoading = false;
 				this.searchLoading = false;
-				this.$error({
-					title: '页面数据加载出错',
-					content: '请刷新重试或联系管理员查询'
-				});
+				// this.$error({
+				// 	title: '页面数据加载出错',
+				// 	content: '请刷新重试或联系管理员查询'
+				// });
 			});
 		},
 		getProjectList() {
@@ -862,6 +890,9 @@ export default {
 				});
 			});
 		},
+		callback(){
+			this.initEchart('echart', this.handlerEchartOption(this.chartList, this.active));
+		},
 		getChartDataList() {
 			return new Promise((resolve, reject) => {
 				this.postDataAction('/overView/chartData', {
@@ -870,6 +901,7 @@ export default {
 					endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
 					projects: this.dataDimensionValue
 				}).then(res => {
+					this.spinningChart = false
 					if (res.success) {
 						this.chartList = res.result;
 						if (res.result.length == 0) {
@@ -877,7 +909,7 @@ export default {
 							myChart.dispose();
 						}
 						else {
-							this.initEchart('echart', this.handlerEchartOption(res.result));
+							this.initEchart('echart', this.handlerEchartOption(res.result, 'cost'));
 						}
 						resolve(res.result);
 					} else {
@@ -947,6 +979,9 @@ export default {
 				if (res.success) {
 					this.designTopLoading = false;
 					this.designTopList = res.result;
+				}else{
+					this.designTopLoading = false;
+					this.$message.error(this.message)
 				}
 			});
 		},
@@ -996,7 +1031,7 @@ export default {
 				});
 			}
 		},
-		handlerEchartOption(data) {
+		handlerEchartOption(data, typeShow) {
 			let option = {
 				noDataLoadingOption: {
 					text: '暂无数据',
@@ -1008,7 +1043,15 @@ export default {
 					}
 				},
 				tooltip: {
-					trigger: 'axis'
+					trigger: 'axis',
+					// formatter: function(params) {
+					// 	if(typeShow == 'play_duration_3s'){
+					// 		return `${params[0].marker}${params[0].name}<br/>${params[0].seriesName}:${params[0].value}%`
+					// 	}else{
+					// 		return `${params[0].marker}${params[0].name}<br/>${params[0].seriesName}:${params[0].value}`
+					// 	}
+					
+					// },
 				},
 				grid: {
 					left: '3%',
@@ -1066,11 +1109,25 @@ export default {
 				series: [
 					{
 						smooth: true,
-						name: '消耗',
+						name: typeShow == 'cost'?'消耗':typeShow == 'aclick'?'曝光数':typeShow == 'active'?'激活数':'3S播放率',
 						type: 'line',
 						stack: '总量',
 						data: data.map(item => {
-							return item.cost.toFixed(3);
+							switch (typeShow) {
+								case 'cost':
+									return item.cost.toFixed(3);
+									break;
+								case 'aclick':
+									return item.aclick
+									break;
+								case 'active':
+									return item.active
+									break;           
+								case 'play_duration_3s':
+									return item.play_duration_3s.slice(0,item.play_duration_3s.length-1)
+									break;
+							}
+							
 						}),
 						symbol: 'circle',
 						symbolSize: 6,

+ 62 - 0
src/warterMark.js

@@ -0,0 +1,62 @@
+
+let watermark = {}
+ 
+let setWatermark = (str) => {
+  let id = '1.23452384164.123412415'
+ 
+  if (document.getElementById(id) !== null) {
+    document.body.removeChild(document.getElementById(id))
+  }
+ 
+  let can = document.createElement('canvas')
+  can.width = 300
+  can.height = 300
+ 
+  let cans = can.getContext('2d')
+  cans.rotate(-20 * Math.PI / 180)
+  cans.font = '20px Vedana'
+  cans.fillStyle = 'rgba(200, 200, 200, 0.40)'
+  cans.textAlign = 'left'
+  cans.textBaseline = 'Middle'
+  cans.fillText(str, can.width / 3, can.height / 2)
+ 
+  let div = document.createElement('div')
+  div.id = id
+  div.style.pointerEvents = 'none'
+  div.style.top = '70px'
+  div.style.left = '100px'
+  div.style.position = 'fixed'
+  div.style.zIndex = '100000'
+  div.style.width = document.documentElement.clientWidth - 100 + 'px'
+  div.style.height = document.documentElement.clientHeight - 100 + 'px'
+  div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
+  document.body.appendChild(div)
+  return id
+}
+ 
+// 该方法只允许调用一次
+watermark.set = (str) => {
+  let id = setWatermark(str)
+  setInterval(() => {
+    if (document.getElementById(id) === null) {
+      id = setWatermark(str)
+    }
+  }, 500)
+  window.onresize = () => {
+    setWatermark(str)
+  }
+}
+
+const outWatermark = (id) => {
+  if (document.getElementById(id) !== null) {
+    const div = document.getElementById(id)
+    div.style.display = 'none'
+  }
+}
+
+watermark.out = () => {
+  const str = '7.432756475.689573874'
+  outWatermark(str)
+}
+ 
+export default watermark

+ 2 - 2
vue.config.js

@@ -108,7 +108,7 @@ module.exports = {
         // target: 'http://192.168.1.219:7701', //请求本地 需要jeecg-boot后台项目  赵西安
         // target: 'http://192.168.1.193:8080', //请求本地 需要jeecg-boot后台项目  李煜一
         // target: 'http://192.168.1.193:31012', //请求本地 需要jeecg-boot后台项目  李煜一
-        target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
+        // target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
         // target: 'https://trac.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
         // target: 'http://39.106.184.70:8088/', //请求本地 需要jeecg-boot后台项目
         //  target: 'http://adsp.tjyourong.com.cn/', //请求本地 需要jeecg-boot后台项目
@@ -118,7 +118,7 @@ module.exports = {
         // target: 'http://192.168.1.8:9999', // 学超
         // target:'http://gateway.tjyourong.com.cn', //测试
         // target:'http://apipre.tjyourong.com.cn', //预生产
-        // target: 'http://192.168.1.134:7001', //请求本地 需要jeecg-boot后台项目  周泽宇
+        target: 'http://192.168.1.134:7001', //请求本地 需要jeecg-boot后台项目  周泽宇
 
         // target:'http://gateway.tjyourong.com.cn/',//测试