Browse Source

素材 大盘 迭代内容

jiayufei 3 years ago
parent
commit
671ad12740
1 changed files with 146 additions and 173 deletions
  1. 146 173
      src/views/modules/Statistics/materialReport/materialReport.vue

+ 146 - 173
src/views/modules/Statistics/materialReport/materialReport.vue

@@ -50,10 +50,7 @@
 		<div class="card-containers">
 			<a-tabs type="card">
 				<a-tab-pane key="1">
-					<span slot="tab">
-						<a-icon type="unordered-list" />
-						大盘
-					</span>
+					<span slot="tab"><a-icon type="unordered-list"/>大盘</span>
 				</a-tab-pane>
 			</a-tabs>
 			<div class="option" style="justify-content: space-between">
@@ -81,16 +78,16 @@
 							<a-radio-button value="b" disabled>设计组</a-radio-button>
 						</a-radio-group>
 						<a-select
+							v-model="dataDimensionValue"
 							style="width: 300px; margin-left: 10px"
 							mode="multiple"
 							:maxTagCount="2"
-							v-model="dataDimensionValue"
-							allowClear
 							:loading="specificLoading"
-							showSearch
 							:filterOption="filterOption"
+							showSearch
+							allowClear
 						>
-							<a-select-option value="no" disabled v-if="dataDimensionList.length == 0 && specificLoading">
+							<a-select-option v-if="dataDimensionList.length == 0 && specificLoading" value="no" disabled>
 								数据请求中,请稍后。。。
 							</a-select-option>
 							<a-select-option
@@ -105,18 +102,18 @@
 				</div>
 				<div class="item" style="float: right">
 					<a-button
-						@click="handleSubmit"
-						type="primary"
 						:loading="searchLoading"
 						:disabled="dateValue.length == 0"
+						type="primary"
+						@click="handleSubmit"
 					>
 						搜索
 					</a-button>
 					<a-button
-						@click="resetSubmit"
-						style="margin-left: 15px"
 						:disabled="spinning"
 						:loading="resetLoading"
+						style="margin-left: 15px"
+						@click="resetSubmit"
 					>
 						重置
 					</a-button>
@@ -165,8 +162,8 @@
 						<div class="report-card-result">
 							<div class="report-card-money">{{ materialReportCardList.videoTotal || 0 }}</div>
 							<div
+								id="accountIndexEchart"
                                 class="accountIndexEchart"
-                                id="accountIndexEchart"
                                 style="width:100%; height:50px; margin:0 auto;"
                                 ref="accountIndexEchart"
                             >
@@ -249,8 +246,8 @@
 								>
 								</div>
 								<a-empty
-									style="width: 100%; height: 350px; position: absolute; top: 30%; z-index: 100; left: 0"
 									v-if="chartList.length == 0"
+									style="width: 100%; height: 350px; position: absolute; top: 30%; z-index: 100; left: 0"
 								/>
 							</div>
 						</div>
@@ -325,7 +322,6 @@
 											<img
 												:src="item.coverUrl || noImg"
 												style="width: auto; height: 100%; max-width: 100%; position: relative; z-index: 2"
-												alt=""
 												srcset=""
 												@click="
 													visibleVideo = true
@@ -340,7 +336,7 @@
 											<p style="margin-left: 10px; color: #1890ff">
 												{{ item.materialName ? item.materialName : '无素材名称' }}
 											</p>
-											<p style="margin-left: 10px; margin-bottom: 0" v-if="item.tag">
+											<p v-if="item.tag" style="margin-left: 10px; margin-bottom: 0">
 												<a-tag
 													v-for="(items, index) in item.tag.split(',')"
 													:key="index"
@@ -374,10 +370,10 @@
 						<a-table
 							:columns="columns"
 							:data-source="designTopList"
-							bordered
-							size="middle"
 							:loading="designTopLoading"
 							:pagination="false"
+							bordered
+							size="middle"
 						>
 							<span slot="cost" slot-scope="text, records">{{ text | decimalsHandle }}</span>
 						</a-table>
@@ -394,7 +390,6 @@
 </template>
 <script>
 import moment from 'moment';
-import {getAction, postAction, downFile, downFilePost} from '@/api/manage';
 import YoutTable from '@/components/youtTable/YoutTable';
 import ChartCard from '@/components/ChartCard';
 import Trend from '@/components/Trend';
@@ -407,7 +402,7 @@ const columnsFixd = [
 		title: '排名',
 		dataIndex: 'rowNumber',
 		align: 'center',
-		customRender:(t, r, index)=> {
+		customRender:(t, r, index) => {
         	return index + 1;
 		}
 	},
@@ -445,11 +440,6 @@ export default {
 			visibleVideo: false,
 			videoUrlShow: '',
 			cost: '0',
-			costLink: 0,
-			videoTotal: '0',
-			newVideo: 0,
-			hotTotal: '0',
-			xiaoTotal: '0',
 			spinning: false,
 			loading: false,
 			chartList: [],
@@ -472,8 +462,6 @@ export default {
 			dataDimensionValue: [],
 			dataDimensionList: [],
 			specificLoading: false,
-			order: 'descend',
-			target: 'cost',
 			clientWidth: 0,
 			resetLoading: false,
 			searchLoading: false
@@ -705,11 +693,11 @@ export default {
 				this.getChartDataList(),
 				this.getVideoTopList(),
 				this.getDesignTopList()
-			]).then((res) => {
+			]).then(res => {
 				this.spinning = false;
 				this.resetLoading = false;
 				this.searchLoading = false;
-			}).catch((error) => {
+			}).catch(error => {
 				this.spinning = false;
 				this.resetLoading = false;
 				this.searchLoading = false;
@@ -724,30 +712,28 @@ export default {
 			return new Promise((resolve, reject) => {
 				this.postDataAction(
 					'/overView/getProjects?userId=' + this.userInfo().id + '&mediaId=' + (this.mediaDimension == 'a' ? 1 : 2)
-				).then((res) => {
+				).then(res => {
 					this.specificLoading = false;
 					if (res.success) {
 						this.dataDimensionList = res.result;
 						resolve(res.result);
-					} else {
+					}
+					else {
 						reject(res.message);
 					}
 				});
 			});
 		},
 		getSumData() {
-			var that = this;
+			let that = this;
 			return new Promise((resolve, reject) => {
-				that
-				.postDataAction('/overView/sumData', {
+				that.postDataAction('/overView/sumData', {
 					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) => {
+				}).then(res => {
 					if (res.success) {
-						console.log(res, 'res--res--res');
 						this.materialReportCardList = res.result;
 						this.initEchart('accountIndexEchart', this.initAccountIndexEchart(res.result));
 						this.initEchart('effectiveVideoEcharts', this.handleEffectiveVideoEcharts(res.result));
@@ -767,7 +753,7 @@ export default {
 					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) => {
+				}).then(res => {
 					if (res.success) {
 						this.chartList = res.result;
 						if (res.result.length == 0) {
@@ -822,7 +808,7 @@ export default {
 			}
 		},
 		toDetail(md5) {
-			var params = {md5: md5, mediaId: this.mediaDimension == 'a' ? 1 : 2};
+			let params = {md5: md5, mediaId: this.mediaDimension == 'a' ? 1 : 2};
 			localStorage.setItem('videoInfo', JSON.stringify(params));
 			this.$router.push({
 				path: '/materialReport/marterialDetail'
@@ -846,10 +832,11 @@ export default {
 		},
 		getTagProportionAnalyseList() {
 			return new Promise((resolve, reject) => {
-				this.postDataAction('/overView/tagProportionAnalyse', {}).then((res) => {
+				this.postDataAction('/overView/tagProportionAnalyse', {}).then(res => {
 					if (res.success) {
 						resolve(res.result);
-					} else {
+					}
+					else {
 						reject(res.message);
 					}
 				});
@@ -870,7 +857,7 @@ export default {
 		},
 		//获取echart的值
 		initEchart(idName, optionName) {
-			var that = this;
+			let that = this;
 			const chart = this.$refs[idName];
 			if (chart) {
 				const myChart = echarts.init(document.getElementById(idName));
@@ -882,164 +869,150 @@ export default {
 			}
 		},
 		handlerEchartOption(data) {
-			var option = {
+			let option = {
 				noDataLoadingOption: {
-				text: '暂无数据',
-				effect: 'bubble',
-				effectOption: {
-					effect: {
-					n: 0,
-					},
-				},
+					text: '暂无数据',
+					effect: 'bubble',
+					effectOption: {
+						effect: {
+							n: 0
+						}
+					}
 				},
-				// title: {
-				//     text: '折线图堆叠'
-				// },
 				tooltip: {
-				trigger: 'axis',
+					trigger: 'axis'
 				},
-				// legend: {
-				//     data: ['邮件营销', '联盟广告', ]
-				// },
 				grid: {
-				left: '3%',
-				right: '4%',
-				bottom: '3%',
-				containLabel: true,
+					left: '3%',
+					right: '4%',
+					bottom: '3%',
+					containLabel: true
 				},
 				legend: {
-				icon: 'circle',
-				top: '5%',
-				right: '5%',
-				itemWidth: 6,
-				itemGap: 20,
-				textStyle: {
-					color: '#556677',
-				},
-				},
-				toolbox: {
-				// feature: {
-				//     saveAsImage: {}
-				// }
+					icon: 'circle',
+					top: '5%',
+					right: '5%',
+					itemWidth: 6,
+					itemGap: 20,
+					textStyle: {
+						color: '#556677'
+					}
 				},
 				xAxis: {
-				type: 'category',
-				data: data.map((item) => {
-					return item.statDate
-				}),
-				boundaryGap: false,
-				// 坐标轴线
-				axisLine: {
-					show: false,
-					lineStyle: {
-					color: '#999',
-					},
-				},
-				// 分割线
-				splitLine: {
-					show: true,
-					lineStyle: {
-					type: 'dashed',
-					color: '#e5e5e5',
+					type: 'category',
+					data: data.map(item => {
+						return item.statDate;
+					}),
+					boundaryGap: false,
+					// 坐标轴线
+					axisLine: {
+						show: false,
+						lineStyle: {
+							color: '#999'
+						}
 					},
-				},
+					// 分割线
+					splitLine: {
+						show: true,
+						lineStyle: {
+							type: 'dashed',
+							color: '#e5e5e5'
+						}
+					}
 				},
 				yAxis: {
-				type: 'value',
-				axisLine: {
-					show: false,
-					lineStyle: {
-					color: '#999',
-					},
-				},
-				splitLine: {
-					lineStyle: {
-					type: 'dashed',
-					color: '#e5e5e5',
+					type: 'value',
+					axisLine: {
+						show: false,
+						lineStyle: {
+							color: '#999'
+						}
 					},
-				},
+					splitLine: {
+						lineStyle: {
+							type: 'dashed',
+							color: '#e5e5e5'
+						}
+					}
 				},
 				series: [
-				{
-					smooth: true,
-					name: '消耗',
-					type: 'line',
-					stack: '总量',
-					data: data.map((item) => {
-					return item.cost.toFixed(3)
-					}),
-					symbol: 'circle',
-					symbolSize: 6,
-					lineStyle: {
-					normal: {
-						width: 2,
-						// color: '#0bcd74'
-					},
-					},
-					itemStyle: {
-					borderColor: '#ffffff',
-					borderWidth: 0,
-					},
-				},
-				],
+					{
+						smooth: true,
+						name: '消耗',
+						type: 'line',
+						stack: '总量',
+						data: data.map(item => {
+							return item.cost.toFixed(3);
+						}),
+						symbol: 'circle',
+						symbolSize: 6,
+						lineStyle: {
+							normal: {
+								width: 2
+							}
+						},
+						itemStyle: {
+							borderColor: '#ffffff',
+							borderWidth: 0
+						}
+					}
+				]
 			};
 			return option;
 		},
 		handlerAgeOption(data) {
 			const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'];
-			var option = {
+			let option = {
 				color: colorList,
 				backgroundColor: '#fff',
-
 				tooltip: {
-				formatter: '{b}:{c}',
+					formatter: '{b}:{c}'
 				},
-
 				legend: {
-				orient: 'horizontal',
-				top: 'top',
-				icon: 'circle',
-				width: '100%',
-				data: ['形式标签', '场景标签', '基调标签', '其他'],
+					orient: 'horizontal',
+					top: 'top',
+					icon: 'circle',
+					width: '100%',
+					data: ['形式标签', '场景标签', '基调标签', '其他']
 				},
 				series: [
-				{
-					name: '',
-					type: 'pie',
-					radius: ['40%', '70%'],
-					center: ['50%', '50%'],
-					data: [
-					{ value: 0, name: '形式标签' },
-					{ value: 0, name: '基调标签' },
-					{ value: 0, name: '场景标签' },
-					{ value: 0, name: '其他' },
-					],
-					labelLine: {
-					length: 5,
-					length2: 5,
-					},
-					label: {
-					show: false,
-					position: 'center',
-					},
-					emphasis: {
-					label: {
-						show: true,
-						fontSize: '18',
-						fontWeight: 'bold',
-					},
-					},
-					labelLine: {
-					show: true,
-					},
-					itemStyle: {
-					borderRadius: 5,
-					color: (params) => {
-						return colorList[params.dataIndex]
-					},
-					},
-				},
-				],
+					{
+						name: '',
+						type: 'pie',
+						radius: ['40%', '70%'],
+						center: ['50%', '50%'],
+						data: [
+							{value: 0, name: '形式标签'},
+							{value: 0, name: '基调标签'},
+							{value: 0, name: '场景标签'},
+							{value: 0, name: '其他'}
+						],
+						labelLine: {
+							length: 5,
+							length2: 5
+						},
+						label: {
+							show: false,
+							position: 'center'
+						},
+						emphasis: {
+							label: {
+								show: true,
+								fontSize: '18',
+								fontWeight: 'bold'
+							}
+						},
+						labelLine: {
+							show: true
+						},
+						itemStyle: {
+							borderRadius: 5,
+							color: params => {
+								return colorList[params.dataIndex];
+							}
+						}
+					}
+				]
 			};
 			return option;
 		},