|
@@ -3,7 +3,7 @@
|
|
<a-spin :spinning="accountPageSpinning">
|
|
<a-spin :spinning="accountPageSpinning">
|
|
<a-row :gutter="24">
|
|
<a-row :gutter="24">
|
|
<a-col :sm="18" :md="18" :xl="18" class="keep-manage-col">
|
|
<a-col :sm="18" :md="18" :xl="18" class="keep-manage-col">
|
|
- <a-card title="运营人员" class="card-content">
|
|
|
|
|
|
+ <a-card title="运营人员" class="card-content echarts-card">
|
|
<div class="person-content-title" slot="extra">
|
|
<div class="person-content-title" slot="extra">
|
|
<div class="content-title-acount"></div>
|
|
<div class="content-title-acount"></div>
|
|
<div class="content-title-checkout">
|
|
<div class="content-title-checkout">
|
|
@@ -18,8 +18,8 @@
|
|
<span class="title-checkout-select">
|
|
<span class="title-checkout-select">
|
|
<a-select v-model="selectValue" @change="getQueryNewlyData">
|
|
<a-select v-model="selectValue" @change="getQueryNewlyData">
|
|
<a-select-option value="charge">花费</a-select-option>
|
|
<a-select-option value="charge">花费</a-select-option>
|
|
- <a-select-option value="campaign">新上计划数</a-select-option>
|
|
|
|
- <a-select-option value="unit">新上组数</a-select-option>
|
|
|
|
|
|
+ <a-select-option value="campaign" :disabled="checkDisabled">新上计划数</a-select-option>
|
|
|
|
+ <a-select-option value="unit" :disabled="checkDisabled">新上组数</a-select-option>
|
|
</a-select>
|
|
</a-select>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
@@ -38,12 +38,12 @@
|
|
</h2>
|
|
</h2>
|
|
<div class="header-left-title">
|
|
<div class="header-left-title">
|
|
<span>今日消耗:</span>
|
|
<span>今日消耗:</span>
|
|
- <span class="left-title-radio" v-if="personData && personData.grew >= 0">
|
|
|
|
|
|
+ <span class="left-title-radio" v-if="personData && personData.grew < 0">
|
|
<img class="title-radio-img" src="@/assets/up.png" alt="">
|
|
<img class="title-radio-img" src="@/assets/up.png" alt="">
|
|
{{ personData.grew ? personData.grew + '%' : '-' }}
|
|
{{ personData.grew ? personData.grew + '%' : '-' }}
|
|
</span>
|
|
</span>
|
|
<!-- TODO 这个是下降的样式,后续优化 -->
|
|
<!-- TODO 这个是下降的样式,后续优化 -->
|
|
- <span class="left-title-radio-down" v-else-if="personData && personData.grew < 0">
|
|
|
|
|
|
+ <span class="left-title-radio-down" v-else-if="personData && personData.grew >= 0">
|
|
<img class="title-radio-img" src="@/assets/down.png" alt="">
|
|
<img class="title-radio-img" src="@/assets/down.png" alt="">
|
|
{{personData.grew ? personData.grew + '%':'-'}}
|
|
{{personData.grew ? personData.grew + '%':'-'}}
|
|
</span>
|
|
</span>
|
|
@@ -68,10 +68,24 @@
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="header-left-title-else">
|
|
<div class="header-left-title-else">
|
|
- <span class="title-label">周环比:</span>
|
|
|
|
- <span>
|
|
|
|
- {{ personData.weekGrew ? personData.weekGrew + '%':'-' }}
|
|
|
|
|
|
+ <span class="title-label">
|
|
|
|
+ 周消耗环比:
|
|
|
|
+ </span>
|
|
|
|
+ <span class="left-title-radio" v-if="personData && personData.grew < 0">
|
|
|
|
+ {{ personData.weekGrew ? personData.weekGrew + '%' : '-' }}
|
|
|
|
+ <img class="title-radio-img" src="@/assets/up.png" alt="">
|
|
|
|
+ </span>
|
|
|
|
+ <!-- TODO 这个是下降的样式,后续优化 -->
|
|
|
|
+ <span class="left-title-radio-down" v-else-if="personData && personData.grew >= 0">
|
|
|
|
+ {{personData.grew ? personData.grew + '%':'-'}}
|
|
|
|
+ <img class="title-radio-img" src="@/assets/down.png" alt="">
|
|
</span>
|
|
</span>
|
|
|
|
+ <a-tooltip>
|
|
|
|
+ <template slot="title">
|
|
|
|
+ 本周与上周的消耗环比
|
|
|
|
+ </template>
|
|
|
|
+ <a-icon type="question-circle" />
|
|
|
|
+ </a-tooltip>
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</a-card>
|
|
</a-col>
|
|
</a-col>
|
|
@@ -309,8 +323,8 @@ export default {
|
|
columnsFixd: keepPersonData.setNoDeleteProjectColumns(),
|
|
columnsFixd: keepPersonData.setNoDeleteProjectColumns(),
|
|
scrollX: 1500,
|
|
scrollX: 1500,
|
|
personData: null,
|
|
personData: null,
|
|
- dateEchart: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
|
|
|
|
- dateValue: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
|
|
|
|
|
|
+ dateEchart: [moment(), moment()],
|
|
|
|
+ dateValue: [moment(), moment()],
|
|
dateRanges: keepPersonData.setTimeRange(),
|
|
dateRanges: keepPersonData.setTimeRange(),
|
|
target: 'cost',
|
|
target: 'cost',
|
|
order: 'descend',
|
|
order: 'descend',
|
|
@@ -354,6 +368,17 @@ export default {
|
|
},
|
|
},
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ computed: {
|
|
|
|
+ checkDisabled() {
|
|
|
|
+ if(this.dateEchart.length === 2&&
|
|
|
|
+ moment(this.dateEchart[0]).format('YYYY-MM-DD') === moment(this.dateEchart[1]).format('YYYY-MM-DD')) {
|
|
|
|
+ return true
|
|
|
|
+ }
|
|
|
|
+ else {
|
|
|
|
+ return false
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
methods: {
|
|
methods: {
|
|
...mapGetters(["userInfo"]),
|
|
...mapGetters(["userInfo"]),
|
|
|
|
|
|
@@ -617,29 +642,42 @@ export default {
|
|
trigger: 'axis',
|
|
trigger: 'axis',
|
|
},
|
|
},
|
|
grid:{
|
|
grid:{
|
|
- left:'5px',
|
|
|
|
- top:0,
|
|
|
|
- right:'5px',
|
|
|
|
- bottom:0
|
|
|
|
|
|
+ x: '6%',
|
|
|
|
+ width: '90%',
|
|
|
|
+ y: '12%',
|
|
|
|
+ bottom: '25px',
|
|
|
|
+ right: '15px'
|
|
|
|
+
|
|
},
|
|
},
|
|
- xAxis:[
|
|
|
|
- {
|
|
|
|
- type: 'category',
|
|
|
|
- show:false,
|
|
|
|
- boundaryGap: false,
|
|
|
|
- data: data.map(item => {
|
|
|
|
- return item.time
|
|
|
|
- }),
|
|
|
|
- axisPointer: {
|
|
|
|
- type: 'none'
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
|
|
+ xAxis: [{
|
|
|
|
+
|
|
|
|
+ type: 'category',
|
|
|
|
+ data: data.map(item => {
|
|
|
|
+ return item.time
|
|
|
|
+ }),
|
|
|
|
+ axisLine: {
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: '#ddd'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ axisTick: {
|
|
|
|
+ show: false
|
|
|
|
+ },
|
|
|
|
+ axisLabel: {
|
|
|
|
+ interval: 0,
|
|
|
|
+ textStyle: {
|
|
|
|
+ color: '#c56790'
|
|
},
|
|
},
|
|
- ] ,
|
|
|
|
- yAxis: {
|
|
|
|
- type: 'value',
|
|
|
|
- show:false,
|
|
|
|
|
|
+ margin: 15
|
|
},
|
|
},
|
|
|
|
+ boundaryGap: false
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }],
|
|
|
|
+ yAxis: [{
|
|
|
|
+ type: 'value',
|
|
|
|
+ show:true,
|
|
|
|
+ }],
|
|
series: [
|
|
series: [
|
|
{
|
|
{
|
|
name: this.selectValue === 'campaign'
|
|
name: this.selectValue === 'campaign'
|
|
@@ -650,14 +688,13 @@ export default {
|
|
}),
|
|
}),
|
|
type: 'line',
|
|
type: 'line',
|
|
smooth: true,
|
|
smooth: true,
|
|
- showSymbol: false,
|
|
|
|
symbol: 'circle',
|
|
symbol: 'circle',
|
|
lineStyle: {
|
|
lineStyle: {
|
|
- color: '#2461F1',
|
|
|
|
|
|
+ color: '#007AFF',
|
|
width: 3,
|
|
width: 3,
|
|
},
|
|
},
|
|
itemStyle:{
|
|
itemStyle:{
|
|
- color:'#2461F1',
|
|
|
|
|
|
+ color:'#007AFF',
|
|
borderWidth:2,
|
|
borderWidth:2,
|
|
borderColor:'#fff'
|
|
borderColor:'#fff'
|
|
},
|
|
},
|
|
@@ -669,7 +706,7 @@ export default {
|
|
x2: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
y2: 1,
|
|
colorStops: [{
|
|
colorStops: [{
|
|
- offset: 0, color: '#2461F1' // 0% 处的颜色
|
|
|
|
|
|
+ offset: 0, color: '#007AFF' // 0% 处的颜色
|
|
}, {
|
|
}, {
|
|
offset: 1, color: 'white' // 100% 处的颜色
|
|
offset: 1, color: 'white' // 100% 处的颜色
|
|
}],
|
|
}],
|