|
@@ -1,20 +1,4 @@
|
|
|
<style>
|
|
|
-.statistics .ant-col-6 {
|
|
|
- margin: 10px 0;
|
|
|
-}
|
|
|
-.statistics .ant-col-6 .ant-card-body {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
-}
|
|
|
-.statistics .ant-col-6 p,
|
|
|
-.statistics .ant-col-6 span {
|
|
|
- text-align: center;
|
|
|
- line-height: 40px;
|
|
|
- font-size: 30px;
|
|
|
- font-weight: 600;
|
|
|
- color: red;
|
|
|
- margin: 0;
|
|
|
-}
|
|
|
.search-box .ant-card-body {
|
|
|
padding: 5px 15px;
|
|
|
}
|
|
@@ -71,7 +55,7 @@
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<a-row :gutter="16" v-if="kuaishou">
|
|
|
- <a-col :span="6">
|
|
|
+ <a-col :sm="24" :md="12" :xl="12" :xxl="6">
|
|
|
<lifting
|
|
|
:kuaishou.sync="kuaishou"
|
|
|
:active.sync="active"
|
|
@@ -80,7 +64,7 @@
|
|
|
typeThan="costProportion"
|
|
|
></lifting>
|
|
|
</a-col>
|
|
|
- <a-col :span="6">
|
|
|
+ <a-col :sm="24" :md="12" :xl="12" :xxl="6">
|
|
|
<lifting
|
|
|
:kuaishou.sync="kuaishou"
|
|
|
:active.sync="active"
|
|
@@ -89,7 +73,7 @@
|
|
|
typeThan="photoClickProportion"
|
|
|
></lifting>
|
|
|
</a-col>
|
|
|
- <a-col :span="6">
|
|
|
+ <a-col :sm="24" :md="12" :xl="12" :xxl="6">
|
|
|
<lifting
|
|
|
:kuaishou.sync="kuaishou"
|
|
|
:active.sync="active"
|
|
@@ -98,7 +82,7 @@
|
|
|
typeThan="showProportion"
|
|
|
></lifting>
|
|
|
</a-col>
|
|
|
- <a-col :span="6">
|
|
|
+ <a-col :sm="24" :md="12" :xl="12" :xxl="6">
|
|
|
<lifting
|
|
|
:kuaishou.sync="kuaishou"
|
|
|
:active.sync="active"
|
|
@@ -136,8 +120,8 @@
|
|
|
style="width:400px"
|
|
|
:disabledDate="disabledDate"
|
|
|
:showTime="{
|
|
|
- hideDisabledOptions: true,
|
|
|
- }"
|
|
|
+ hideDisabledOptions: true
|
|
|
+ }"
|
|
|
format="YYYY-MM-DD"
|
|
|
v-model="contrastValue"
|
|
|
/>
|
|
@@ -146,125 +130,129 @@
|
|
|
<a-row :gutter="15" style="margin-bottom:15px;margin-top:15px" v-if="contrastDataAll">
|
|
|
<a-col :span="6">
|
|
|
<a-card title="总消耗对比">
|
|
|
- <p>{{contrastDataAll.beCompared.statDate}}:{{contrastDataAll.beCompared.cost}}</p>
|
|
|
+ <p>{{ contrastDataAll.beCompared.statDate }}:{{ contrastDataAll.beCompared.cost }}</p>
|
|
|
<p>
|
|
|
- {{contrastDataAll.compared.statDate}}:{{contrastDataAll.compared.cost}}
|
|
|
+ {{ contrastDataAll.compared.statDate }}:{{ contrastDataAll.compared.cost }}
|
|
|
<a-icon
|
|
|
- v-if="contrastDataAll.compared.costProportion>0"
|
|
|
+ v-if="contrastDataAll.compared.costProportion > 0"
|
|
|
type="rise"
|
|
|
class="styleElse"
|
|
|
style="color:red;"
|
|
|
/>
|
|
|
<a-icon
|
|
|
- v-else-if="contrastDataAll.compared.costProportion<0"
|
|
|
+ v-else-if="contrastDataAll.compared.costProportion < 0"
|
|
|
type="fall"
|
|
|
class="styleElse"
|
|
|
style="color:#0bcd74;"
|
|
|
/>
|
|
|
<a-icon
|
|
|
- v-else-if="contrastDataAll.compared.costProportion==0"
|
|
|
+ v-else-if="contrastDataAll.compared.costProportion == 0"
|
|
|
type="minus"
|
|
|
class="styleElse"
|
|
|
style="color:#0bcd74"
|
|
|
/>
|
|
|
<span
|
|
|
- :style="contrastDataAll.compared.costProportion>0?'color:red':'color:#0bcd74'"
|
|
|
+ :style="contrastDataAll.compared.costProportion > 0 ? 'color:red' : 'color:#0bcd74'"
|
|
|
class="styleElse"
|
|
|
style=" margin-left:0"
|
|
|
- >{{Math.abs(contrastDataAll.compared.costProportion).toFixed(2)+'%'}}</span>
|
|
|
+ >{{ Math.abs(contrastDataAll.compared.costProportion).toFixed(2) + '%' }}</span
|
|
|
+ >
|
|
|
</p>
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
<a-col :span="6">
|
|
|
<a-card title="封面点击数对比">
|
|
|
- <p>{{contrastDataAll.beCompared.statDate}}:{{contrastDataAll.beCompared.photoClick}}</p>
|
|
|
+ <p>{{ contrastDataAll.beCompared.statDate }}:{{ contrastDataAll.beCompared.photoClick }}</p>
|
|
|
<p>
|
|
|
- {{contrastDataAll.compared.statDate}}:{{contrastDataAll.compared.photoClick}}
|
|
|
+ {{ contrastDataAll.compared.statDate }}:{{ contrastDataAll.compared.photoClick }}
|
|
|
<a-icon
|
|
|
- v-if="contrastDataAll.compared.photoClickProportion>0"
|
|
|
+ v-if="contrastDataAll.compared.photoClickProportion > 0"
|
|
|
type="rise"
|
|
|
class="styleElse"
|
|
|
style="color:red;"
|
|
|
/>
|
|
|
<a-icon
|
|
|
- v-else-if="contrastDataAll.compared.photoClickProportion<0"
|
|
|
+ v-else-if="contrastDataAll.compared.photoClickProportion < 0"
|
|
|
type="fall"
|
|
|
class="styleElse"
|
|
|
style="color:#0bcd74;"
|
|
|
/>
|
|
|
<a-icon
|
|
|
- v-else-if="contrastDataAll.compared.photoClickProportion==0"
|
|
|
+ v-else-if="contrastDataAll.compared.photoClickProportion == 0"
|
|
|
type="minus"
|
|
|
class="styleElse"
|
|
|
style="color:#0bcd74"
|
|
|
/>
|
|
|
<span
|
|
|
- :style="contrastDataAll.compared.photoClickProportion>0?'color:red':'color:#0bcd74'"
|
|
|
+ :style="contrastDataAll.compared.photoClickProportion > 0 ? 'color:red' : 'color:#0bcd74'"
|
|
|
class="styleElse"
|
|
|
style=" margin-left:0"
|
|
|
- >{{Math.abs(contrastDataAll.compared.photoClickProportion).toFixed(2)+'%'}}</span>
|
|
|
+ >{{ Math.abs(contrastDataAll.compared.photoClickProportion).toFixed(2) + '%' }}</span
|
|
|
+ >
|
|
|
</p>
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
<a-col :span="6">
|
|
|
<a-card title="封面曝光数对比">
|
|
|
- <p>{{contrastDataAll.beCompared.statDate}}:{{contrastDataAll.beCompared.photoShow}}</p>
|
|
|
+ <p>{{ contrastDataAll.beCompared.statDate }}:{{ contrastDataAll.beCompared.photoShow }}</p>
|
|
|
<p>
|
|
|
- {{contrastDataAll.compared.statDate}}:{{contrastDataAll.compared.photoShow}}
|
|
|
+ {{ contrastDataAll.compared.statDate }}:{{ contrastDataAll.compared.photoShow }}
|
|
|
<a-icon
|
|
|
- v-if="contrastDataAll.compared.showProportion>0"
|
|
|
+ v-if="contrastDataAll.compared.showProportion > 0"
|
|
|
type="rise"
|
|
|
class="styleElse"
|
|
|
style="color:red;"
|
|
|
/>
|
|
|
<a-icon
|
|
|
- v-else-if="contrastDataAll.compared.showProportion<0"
|
|
|
+ v-else-if="contrastDataAll.compared.showProportion < 0"
|
|
|
type="fall"
|
|
|
class="styleElse"
|
|
|
style="color:#0bcd74;"
|
|
|
/>
|
|
|
<a-icon
|
|
|
- v-else-if="contrastDataAll.compared.showProportion==0"
|
|
|
+ v-else-if="contrastDataAll.compared.showProportion == 0"
|
|
|
type="minus"
|
|
|
class="styleElse"
|
|
|
style="color:#0bcd74"
|
|
|
/>
|
|
|
<span
|
|
|
- :style="contrastDataAll.compared.showProportion>0?'color:red':'color:#0bcd74'"
|
|
|
+ :style="contrastDataAll.compared.showProportion > 0 ? 'color:red' : 'color:#0bcd74'"
|
|
|
class="styleElse"
|
|
|
style=" margin-left:0"
|
|
|
- >{{Math.abs(contrastDataAll.compared.showProportion).toFixed(2)+'%'}}</span>
|
|
|
+ >{{ Math.abs(contrastDataAll.compared.showProportion).toFixed(2) + '%' }}</span
|
|
|
+ >
|
|
|
</p>
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
<a-col :span="6">
|
|
|
<a-card title="素材曝光数对比">
|
|
|
- <p>{{contrastDataAll.beCompared.statDate}}:{{contrastDataAll.beCompared.aclick}}</p>
|
|
|
+ <p>{{ contrastDataAll.beCompared.statDate }}:{{ contrastDataAll.beCompared.aclick }}</p>
|
|
|
<p>
|
|
|
- {{contrastDataAll.compared.statDate}}:{{contrastDataAll.compared.aclick}}
|
|
|
+ {{ contrastDataAll.compared.statDate }}:{{ contrastDataAll.compared.aclick }}
|
|
|
<a-icon
|
|
|
- v-if="contrastDataAll.compared.comparedAclick>0"
|
|
|
+ v-if="contrastDataAll.compared.comparedAclick > 0"
|
|
|
type="rise"
|
|
|
class="styleElse"
|
|
|
style="color:red;"
|
|
|
/>
|
|
|
<a-icon
|
|
|
- v-else-if="contrastDataAll.compared.comparedAclick<0"
|
|
|
+ v-else-if="contrastDataAll.compared.comparedAclick < 0"
|
|
|
type="fall"
|
|
|
class="styleElse"
|
|
|
style="color:#0bcd74;"
|
|
|
/>
|
|
|
<a-icon
|
|
|
- v-else-if="contrastDataAll.compared.comparedAclick==0"
|
|
|
+ v-else-if="contrastDataAll.compared.comparedAclick == 0"
|
|
|
type="minus"
|
|
|
class="styleElse"
|
|
|
style="color:#0bcd74"
|
|
|
/>
|
|
|
<span
|
|
|
- :style="contrastDataAll.compared.comparedAclick>0?'color:red':'color:#0bcd74'"
|
|
|
+ :style="contrastDataAll.compared.comparedAclick > 0 ? 'color:red' : 'color:#0bcd74'"
|
|
|
class="styleElse"
|
|
|
style=" margin-left:0"
|
|
|
- >{{Math.abs(contrastDataAll.compared.comparedAclick).toFixed(2)+'%'}}</span>
|
|
|
+ >{{ Math.abs(contrastDataAll.compared.comparedAclick).toFixed(2) + '%' }}</span
|
|
|
+ >
|
|
|
</p>
|
|
|
</a-card>
|
|
|
</a-col>
|
|
@@ -284,7 +272,7 @@
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
- <a-row style="margin-bottom:15px;margin-top:15px" v-if="dataTableTwo.length>0">
|
|
|
+ <a-row style="margin-bottom:15px;margin-top:15px" v-if="dataTableTwo.length > 0">
|
|
|
<a-col :span="24">
|
|
|
<a-card
|
|
|
:tabList="tableCard"
|
|
@@ -303,13 +291,7 @@
|
|
|
:activeTabKey="noTitleKeyTable"
|
|
|
@tabChange="key => onTabChange(key, 'noTitleKeyTable')"
|
|
|
>
|
|
|
- <a-table
|
|
|
- :columns="columns"
|
|
|
- :dataSource="dataTable"
|
|
|
- :pagination="false"
|
|
|
- :loading="loading"
|
|
|
- bordered
|
|
|
- ></a-table>
|
|
|
+ <a-table :columns="columns" :dataSource="dataTable" :pagination="false" :loading="loading" bordered></a-table>
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
@@ -542,11 +524,11 @@ export default {
|
|
|
})
|
|
|
} else {
|
|
|
this.dataAllTableTwo = res[0]
|
|
|
- this.dataTableTwo = res[0].beComparedDetail.map((item,index)=>{
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- key:index
|
|
|
- }
|
|
|
+ this.dataTableTwo = res[0].beComparedDetail.map((item, index) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ key: index
|
|
|
+ }
|
|
|
})
|
|
|
}
|
|
|
})
|
|
@@ -639,7 +621,10 @@ export default {
|
|
|
type: 'pie',
|
|
|
radius: '35%',
|
|
|
center: ['50%', '50%'],
|
|
|
- data: [{ value: 944332, name: '2019-09' }, { value: 6839241.89, name: '2019-10' }],
|
|
|
+ data: [
|
|
|
+ { value: 944332, name: '2019-09' },
|
|
|
+ { value: 6839241.89, name: '2019-10' }
|
|
|
+ ],
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: function(params) {
|
|
@@ -1497,7 +1482,7 @@ export default {
|
|
|
that.getReportList(1, that.allValue)
|
|
|
upDate = window.setInterval(() => {
|
|
|
setTimeout(() => {
|
|
|
- that.drawLine(1)
|
|
|
+ that.drawLine(that.active)
|
|
|
that.getKsDetail(that.active).then(res => {
|
|
|
that.drawPie('cost', res)
|
|
|
})
|