Browse Source

middle-素材大盘 迭代内容

jiayufei 3 years ago
parent
commit
a18050b6ca
2 changed files with 97 additions and 25 deletions
  1. 95 23
      src/views/modules/Statistics/materialReport/materialReport.vue
  2. 2 2
      vue.config.js

+ 95 - 23
src/views/modules/Statistics/materialReport/materialReport.vue

@@ -92,7 +92,7 @@
 							</a-select-option>
 							</a-select-option>
 							<a-select-option
 							<a-select-option
 								v-for="(item, index) in dataDimensionList"
 								v-for="(item, index) in dataDimensionList"
-								:key="index"
+								:key="index + 1"
 								:value="item.projectId"
 								:value="item.projectId"
 							>
 							>
 								{{ item.projectName }}
 								{{ item.projectName }}
@@ -134,14 +134,14 @@
 							<div class="report-card-msg">
 							<div class="report-card-msg">
 								<span>
 								<span>
 									同比
 									同比
-									<a-icon v-if="materialReportCardList.yearOnYearCompare >= 0" type="caret-up" style="color: green"/>
-									<a-icon v-else type="caret-down" style="color: #f00"/>
+									<a-icon v-if="materialReportCardList.yearOnYearCompare >= 0" type="caret-down" style="color: green"/>
+									<a-icon v-else type="caret-up" style="color: #f00"/>
 									{{ Number(materialReportCardList.yearOnYearCompare * 100).toFixed(2) }}%
 									{{ Number(materialReportCardList.yearOnYearCompare * 100).toFixed(2) }}%
 								</span>
 								</span>
 								<span>
 								<span>
 									日环比
 									日环比
-									<a-icon v-if="materialReportCardList.chainCompare >= 0" type="caret-up" style="color: green"/>
-									<a-icon v-else type="caret-down" style="color: #f00"/>
+									<a-icon v-if="materialReportCardList.chainCompare >= 0" type="caret-down" style="color: green"/>
+									<a-icon v-else type="caret-up" style="color: #f00"/>
 									{{ Number(materialReportCardList.chainCompare * 100).toFixed(2) }}%
 									{{ Number(materialReportCardList.chainCompare * 100).toFixed(2) }}%
 								</span>
 								</span>
 							</div>
 							</div>
@@ -160,8 +160,9 @@
 							</a-tooltip>
 							</a-tooltip>
 						</span>
 						</span>
 						<div class="report-card-result">
 						<div class="report-card-result">
-							<div class="report-card-money">{{ materialReportCardList.videoTotal || 0 }}</div>
+							<div class="report-card-money">{{ accountIndexList.videoTotal || 0 }}</div>
 							<div
 							<div
+								v-if="timeShowEchartsStatus"
 								id="accountIndexEchart"
 								id="accountIndexEchart"
                                 class="accountIndexEchart"
                                 class="accountIndexEchart"
                                 style="width:100%; height:50px; margin:0 auto;"
                                 style="width:100%; height:50px; margin:0 auto;"
@@ -171,7 +172,7 @@
 						</div>
 						</div>
 						<div class="report-card-line"></div>
 						<div class="report-card-line"></div>
 						<div class="report-card-radio">
 						<div class="report-card-radio">
-							<span>素材使用率:{{ Number(materialReportCardList.useCompare).toFixed(2) }}%</span>
+							<span>素材使用率:{{ Number(accountIndexList.useCompare).toFixed(2) }}%</span>
 						</div>
 						</div>
 					</a-card>
 					</a-card>
 				</a-col>
 				</a-col>
@@ -183,8 +184,9 @@
 							</a-tooltip>
 							</a-tooltip>
 						</span>
 						</span>
 						<div class="report-card-result">
 						<div class="report-card-result">
-							<div class="report-card-money">{{ materialReportCardList.effectiveTotal || 0 }}</div>
+							<div class="report-card-money">{{ accountIndexList.effectiveTotal || 0 }}</div>
 							<div
 							<div
+								v-if="timeShowEchartsStatus"
                                 class="accountIndexEchart"
                                 class="accountIndexEchart"
                                 id="effectiveVideoEcharts"
                                 id="effectiveVideoEcharts"
                                 style="width:100%; height:50px; margin:0 auto;"
                                 style="width:100%; height:50px; margin:0 auto;"
@@ -194,7 +196,7 @@
 						</div>
 						</div>
 						<div class="report-card-line"></div>
 						<div class="report-card-line"></div>
 						<div class="report-card-radio">
 						<div class="report-card-radio">
-							<span>素材有效率:{{ Number(materialReportCardList.effectiveCompare).toFixed(2) }}%</span>
+							<span>素材有效率:{{ Number(accountIndexList.effectiveCompare).toFixed(2) }}%</span>
 						</div>
 						</div>
 					</a-card>
 					</a-card>
 				</a-col>
 				</a-col>
@@ -206,8 +208,9 @@
 							</a-tooltip>
 							</a-tooltip>
 						</span>
 						</span>
 						<div class="report-card-result">
 						<div class="report-card-result">
-							<div class="report-card-money">{{ materialReportCardList.hotTotal }}</div>
+							<div class="report-card-money">{{ popularVideoList.hotTotal }}</div>
 							<div
 							<div
+								v-if="timeShowEchartsStatus"
                                 class="accountIndexEchart"
                                 class="accountIndexEchart"
                                 id="popularVideoEcharts"
                                 id="popularVideoEcharts"
                                 style="width:100%; height:50px; margin:0 auto;"
                                 style="width:100%; height:50px; margin:0 auto;"
@@ -219,15 +222,15 @@
 						<div class="report-card-radio">
 						<div class="report-card-radio">
 							<span>
 							<span>
 								同比
 								同比
-								<a-icon v-if="materialReportCardList.hotYearOnYearCompare >= 0" type="caret-up" style="color: green"/>
-								<a-icon v-else type="caret-down" style="color: #f00"/>
-								{{ Number(materialReportCardList.hotYearOnYearCompare * 100).toFixed(2) }}%
+								<a-icon v-if="popularVideoList.hotYearOnYearCompare >= 0" type="caret-down" style="color: green"/>
+								<a-icon v-else type="caret-up" style="color: #f00"/>
+								{{ Number(popularVideoList.hotYearOnYearCompare * 100).toFixed(2) }}%
 							</span>
 							</span>
 							<span>
 							<span>
 								日环比
 								日环比
-								<a-icon v-if="materialReportCardList.hostCompare >= 0" type="caret-up" style="color: green"/>
-								<a-icon v-else type="caret-down" style="color: #f00"/>
-								{{ Number(materialReportCardList.hostCompare * 100).toFixed(2) }}%
+								<a-icon v-if="popularVideoList.hostCompare >= 0" type="caret-down" style="color: green"/>
+								<a-icon v-else type="caret-up" style="color: #f00"/>
+								{{ Number(popularVideoList.hostCompare * 100).toFixed(2) }}%
 							</span>
 							</span>
 						</div>
 						</div>
 					</a-card>
 					</a-card>
@@ -283,9 +286,9 @@
 							<a-radio-button :value="1">素造</a-radio-button>
 							<a-radio-button :value="1">素造</a-radio-button>
 						</a-radio-group>
 						</a-radio-group>
 						<a slot="extra" @click="getMoreVideoList">查看更多</a>
 						<a slot="extra" @click="getMoreVideoList">查看更多</a>
-						<div v-if="videoList.length > 0">
+						<div v-if="!signatureStatus && videoList.length > 0">
 							<ul class="top-ul-style">
 							<ul class="top-ul-style">
-								<li v-for="(item, index) in videoList" :key="index">
+								<li v-for="(item, index) in videoList" :key="item.signature">
 									<div style="display: flex; position: relative; width: 80%; cursor: pointer">
 									<div style="display: flex; position: relative; width: 80%; cursor: pointer">
 										<span style="position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px">
 										<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"/>
 											<img :src="require('./image/' + (index + 1) + '.png')" alt="" style="width: 25px; height: auto"/>
@@ -338,10 +341,10 @@
 											</p>
 											</p>
 											<p v-if="item.tag" style="margin-left: 10px; margin-bottom: 0">
 											<p v-if="item.tag" style="margin-left: 10px; margin-bottom: 0">
 												<a-tag
 												<a-tag
-													v-for="(items, index) in item.tag.split(',')"
-													:key="index"
+													v-for="(items, val) in item.tag.split(',')"
+													:key="val + 1"
 													style="margin-right: 5px"
 													style="margin-right: 5px"
-													v-if="index <= 3"
+													v-if="val <= 3"
 												>
 												>
 													{{ items }}
 													{{ items }}
 												</a-tag>
 												</a-tag>
@@ -355,6 +358,7 @@
 								</li>
 								</li>
 							</ul>
 							</ul>
 						</div>
 						</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;">
 						<div v-else style="height: 200px;line-height: 200px;text-align: center;">
 							<a-spin/>
 							<a-spin/>
 						</div>
 						</div>
@@ -402,7 +406,7 @@ const columnsFixd = [
 		title: '排名',
 		title: '排名',
 		dataIndex: 'rowNumber',
 		dataIndex: 'rowNumber',
 		align: 'center',
 		align: 'center',
-		customRender:(t, r, index) => {
+		customRender: (t, r, index) => {
         	return index + 1;
         	return index + 1;
 		}
 		}
 	},
 	},
@@ -432,7 +436,11 @@ export default {
 	},
 	},
 	data() {
 	data() {
 		return {
 		return {
+			timeShowEchartsStatus: true,
+			signatureStatus: false,
 			materialReportCardList: {},
 			materialReportCardList: {},
+			accountIndexList: {},
+			popularVideoList: {},
 			materialRankValue: 0,
 			materialRankValue: 0,
 			designRankingValue: 1,
 			designRankingValue: 1,
 			designTopLoading: false,
 			designTopLoading: false,
@@ -690,6 +698,8 @@ export default {
 			this.spinning = true
 			this.spinning = true
 			Promise.all([
 			Promise.all([
 				this.getSumData(),
 				this.getSumData(),
+				this.getAccountIndexData(),
+				this.getPopularVideoData(),
 				this.getChartDataList(),
 				this.getChartDataList(),
 				this.getVideoTopList(),
 				this.getVideoTopList(),
 				this.getDesignTopList()
 				this.getDesignTopList()
@@ -716,6 +726,18 @@ export default {
 					this.specificLoading = false;
 					this.specificLoading = false;
 					if (res.success) {
 					if (res.success) {
 						this.dataDimensionList = res.result;
 						this.dataDimensionList = res.result;
+						// 找到重复的数据
+						// const changeData = res.result.map(item => item.projectId);
+						// let rep = [];
+						// changeData.forEach((item,index)=>{
+						// 	if(changeData.indexOf(item)!=index){ // 匹配数组元素第一个item位置和当前循环的index
+						// 		let obj = {};
+						// 		obj.key = (changeData.indexOf(item) + 1) + '|' + (index + 1); // 用'|'分隔两个重复项的下标   
+						// 		obj.value = item;
+						// 		rep.push(obj);
+						// 	}
+						// });
+						// console.log(rep, 'newArr--newArr');
 						resolve(res.result);
 						resolve(res.result);
 					}
 					}
 					else {
 					else {
@@ -735,8 +757,46 @@ export default {
 				}).then(res => {
 				}).then(res => {
 					if (res.success) {
 					if (res.success) {
 						this.materialReportCardList = res.result;
 						this.materialReportCardList = res.result;
+						resolve(res.result);
+					}
+					else {
+						reject(res.message);
+					}
+				});
+			});
+		},
+		getAccountIndexData() {
+			let that = this;
+			return new Promise((resolve, reject) => {
+				that.postDataAction('/overView/sumDataVideoNewEffective', {
+					mediaId: this.mediaDimension == 'a' ? 1 : 2,
+					startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
+					endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
+					projects: this.dataDimensionValue
+				}).then(res => {
+					if (res.success) {
+						this.accountIndexList = res.result;
 						this.initEchart('accountIndexEchart', this.initAccountIndexEchart(res.result));
 						this.initEchart('accountIndexEchart', this.initAccountIndexEchart(res.result));
 						this.initEchart('effectiveVideoEcharts', this.handleEffectiveVideoEcharts(res.result));
 						this.initEchart('effectiveVideoEcharts', this.handleEffectiveVideoEcharts(res.result));
+						resolve(res.result);
+					}
+					else {
+						reject(res.message);
+					}
+				});
+			});
+		},
+		getPopularVideoData() {
+			let that = this;
+			return new Promise((resolve, reject) => {
+				that.postDataAction('/overView/sumDataVideoHot', {
+					mediaId: this.mediaDimension == 'a' ? 1 : 2,
+					startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
+					endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
+					projects: this.dataDimensionValue
+				}).then(res => {
+					if (res.success) {
+						this.popularVideoList = res.result;
 						this.initEchart('popularVideoEcharts', this.handlePopularVideoEcharts(res.result));
 						this.initEchart('popularVideoEcharts', this.handlePopularVideoEcharts(res.result));
 						resolve(res.result);
 						resolve(res.result);
 					}
 					}
@@ -772,6 +832,7 @@ export default {
 		},
 		},
 		getVideoTopList() {
 		getVideoTopList() {
 			this.videoList = []
 			this.videoList = []
+			this.signatureStatus = true;
 			return new Promise((resolve, reject) => {
 			return new Promise((resolve, reject) => {
 				this.postDataAction('/overView/materialTop', {
 				this.postDataAction('/overView/materialTop', {
 					mediaId: this.mediaDimension == 'a' ? 1 : 2,
 					mediaId: this.mediaDimension == 'a' ? 1 : 2,
@@ -780,13 +841,16 @@ export default {
 					channelType: this.materialRankValue,
 					channelType: this.materialRankValue,
 					projects: this.dataDimensionValue
 					projects: this.dataDimensionValue
 				}).then(res => {
 				}).then(res => {
+					this.signatureStatus = false;
 					if (res.success) {
 					if (res.success) {
-						this.videoList = res.result;
+						this.videoList = res.result || [];
 						resolve(res.result);
 						resolve(res.result);
 					}
 					}
 					else {
 					else {
 						reject(res.message);
 						reject(res.message);
 					}
 					}
+				}).catch(error => {
+					this.signatureStatus = false;
 				});
 				});
 			});
 			});
 		},
 		},
@@ -845,6 +909,14 @@ export default {
 		handleSubmit() {
 		handleSubmit() {
 			this.spinning = true;
 			this.spinning = true;
 			this.searchLoading = true;
 			this.searchLoading = true;
+			const dataOne = new Date(this.dateValue[0]).getTime();
+			const dataTwo = new Date(this.dateValue[1]).getTime();
+			if (dataTwo === dataOne) {
+				this.timeShowEchartsStatus = false;
+			}
+			else {
+				this.timeShowEchartsStatus = true;
+			}
 			this.getData();
 			this.getData();
 		},
 		},
 		resetSubmit() {
 		resetSubmit() {

+ 2 - 2
vue.config.js

@@ -86,9 +86,9 @@ module.exports = {
 				//  target: 'http://adsp.tjyourong.com.cn/', //请求本地 需要jeecg-boot后台项目
 				//  target: 'http://adsp.tjyourong.com.cn/', //请求本地 需要jeecg-boot后台项目
 				// target: 'http://192.168.1.251/', //请求本地 需要jeecg-boot后台项目
 				// target: 'http://192.168.1.251/', //请求本地 需要jeecg-boot后台项目
 				// target:'http://118.24.244.213:8804',
 				// target:'http://118.24.244.213:8804',
-				target: 'http://192.168.1.43:9090', // 子安
+				// target: 'http://192.168.1.43:9090', // 子安
 				// target: 'http://192.168.1.8:8806', // 学超
 				// target: 'http://192.168.1.8:8806', // 学超
-				// target:'http://139.186.165.84:8806', //测试
+				target:'http://139.186.165.84:8806', //测试
 				// target:'http://apipre.tjyourong.com.cn', //预生产
 				// target:'http://apipre.tjyourong.com.cn', //预生产
 
 
 				ws: false,
 				ws: false,