|
@@ -6,10 +6,10 @@
|
|
<div class="accountBodyLeftCost">
|
|
<div class="accountBodyLeftCost">
|
|
<div class="accountBodyLeftCostLeft">
|
|
<div class="accountBodyLeftCostLeft">
|
|
<div class="top">
|
|
<div class="top">
|
|
- <p class="title" >花费</p>
|
|
|
|
|
|
+ <div class="title" >花费</div>
|
|
<a-range-picker
|
|
<a-range-picker
|
|
v-model="dateValue"
|
|
v-model="dateValue"
|
|
- style="width:170px;"
|
|
|
|
|
|
+ style="width:180px;"
|
|
:allowClear=false
|
|
:allowClear=false
|
|
:disabled-date="disabledDate"
|
|
:disabled-date="disabledDate"
|
|
@change="onChange"
|
|
@change="onChange"
|
|
@@ -17,20 +17,20 @@
|
|
</div>
|
|
</div>
|
|
<div class="costInfo">
|
|
<div class="costInfo">
|
|
<div class="yesterdayInfo">
|
|
<div class="yesterdayInfo">
|
|
- <p>上阶段花费</p>
|
|
|
|
- <p style="font-size:16px;font-weight:600">{{columnsFixd[0].yesterday | decimalsHandle}}</p>
|
|
|
|
|
|
+ <div style="margin-bottom:8px">上阶段花费</div>
|
|
|
|
+ <div style="font-size:14px;font-weight:600">{{columnsFixd[0].yesterday | decimalsHandle}}</div>
|
|
</div>
|
|
</div>
|
|
<a-divider type="vertical" />
|
|
<a-divider type="vertical" />
|
|
<div class="tongbi">
|
|
<div class="tongbi">
|
|
- <p>同比
|
|
|
|
|
|
+ <div style="margin-bottom:8px">同比
|
|
<a-tooltip >
|
|
<a-tooltip >
|
|
<template slot="title">
|
|
<template slot="title">
|
|
<span>截止此时与上一阶段的花费同比</span>
|
|
<span>截止此时与上一阶段的花费同比</span>
|
|
</template>
|
|
</template>
|
|
<a-icon type="question-circle" />
|
|
<a-icon type="question-circle" />
|
|
</a-tooltip>
|
|
</a-tooltip>
|
|
- </p>
|
|
|
|
- <p style="font-size:16px;font-weight:600">{{AggregateByHourList.today?AggregateByHourList.today.grew:0}}%</p>
|
|
|
|
|
|
+ </div>
|
|
|
|
+ <div style="font-size:14px;font-weight:600">{{AggregateByHourList.today?AggregateByHourList.today.grew:0}}%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="costNum">
|
|
<div class="costNum">
|
|
@@ -38,6 +38,7 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="accountBodyLeftCostRight">
|
|
<div class="accountBodyLeftCostRight">
|
|
|
|
+
|
|
<div class="gaugeEchart" id="gaugeEchart" style='width:100%;height:200px;margin:0 auto' ref="gaugeEchart">
|
|
<div class="gaugeEchart" id="gaugeEchart" style='width:100%;height:200px;margin:0 auto' ref="gaugeEchart">
|
|
<a-empty />
|
|
<a-empty />
|
|
</div>
|
|
</div>
|
|
@@ -48,7 +49,9 @@
|
|
<div class="top">
|
|
<div class="top">
|
|
<div class="item" v-for="(item,index) in columns" :key='item.dataIndex' v-show="index>0">
|
|
<div class="item" v-for="(item,index) in columns" :key='item.dataIndex' v-show="index>0">
|
|
<div class="todyCost">
|
|
<div class="todyCost">
|
|
- <span>{{item.today | decimalsHandle}}</span>
|
|
|
|
|
|
+ <span v-if="item.type=='double'">{{item.today | decimalsHandle}}</span>
|
|
|
|
+ <span v-else-if="item.type=='string'">{{item.today +'%'}}</span>
|
|
|
|
+ <span v-else-if="item.type=='int'">{{item.today | formatCurrency}}</span>
|
|
<span class="sign">
|
|
<span class="sign">
|
|
<a-icon type="rise" class="rise" v-show="item.today-item.yesterday>0"/>
|
|
<a-icon type="rise" class="rise" v-show="item.today-item.yesterday>0"/>
|
|
<a-icon type="fall" class="fall" v-show="item.today-item.yesterday<0" />
|
|
<a-icon type="fall" class="fall" v-show="item.today-item.yesterday<0" />
|
|
@@ -58,12 +61,15 @@
|
|
/<a-tooltip >
|
|
/<a-tooltip >
|
|
<template slot="title">
|
|
<template slot="title">
|
|
<span>
|
|
<span>
|
|
- {{dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')?dateValue[0].format('YYYY-MM-DD'):''}}
|
|
|
|
|
|
+ {{dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')?moment(dateValue[0]).subtract(1,'days').format('YYYY-MM-DD'):dateStringShow}}
|
|
的{{item.title}}
|
|
的{{item.title}}
|
|
</span>
|
|
</span>
|
|
</template>
|
|
</template>
|
|
<a-icon type="question-circle" />
|
|
<a-icon type="question-circle" />
|
|
- </a-tooltip>:{{item.yesterday | decimalsHandle}}
|
|
|
|
|
|
+ </a-tooltip>:
|
|
|
|
+ <span v-if="item.type=='double'">{{item.yesterday | decimalsHandle}}</span>
|
|
|
|
+ <span v-else-if="item.type=='string'">{{item.yesterday +'%'}}</span>
|
|
|
|
+ <span v-else-if="item.type=='int'">{{item.yesterday | formatCurrency}}</span>
|
|
</div>
|
|
</div>
|
|
<span class="IndexName" :class="{'IndexNameActive':isActive==item.dataIndex}" @click="getActiveIndexName(item)">
|
|
<span class="IndexName" :class="{'IndexNameActive':isActive==item.dataIndex}" @click="getActiveIndexName(item)">
|
|
<a-tooltip >
|
|
<a-tooltip >
|
|
@@ -76,9 +82,12 @@
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div class="echart" style="margin-top:10px">
|
|
|
|
|
|
+ <div class="echart" style="margin-top:20px;position:relative">
|
|
|
|
+ <div style="position:absolute;right:5px;top:-15px">
|
|
|
|
+ 更新时间:{{updateAccountEchart||'-'}}
|
|
|
|
+ </div>
|
|
<a-spin :spinning="accountIndexEchartSpinning">
|
|
<a-spin :spinning="accountIndexEchartSpinning">
|
|
- <div class="accountIndexEchart" id="accountIndexEchart" style='width:100%;height:160px;margin:0 auto;' ref="accountIndexEchart">
|
|
|
|
|
|
+ <div class="accountIndexEchart" id="accountIndexEchart" style='width:100%;height:150px;margin:0 auto;' ref="accountIndexEchart">
|
|
<a-empty />
|
|
<a-empty />
|
|
</div>
|
|
</div>
|
|
</a-spin>
|
|
</a-spin>
|
|
@@ -88,32 +97,32 @@
|
|
<div class="accountBodyRight">
|
|
<div class="accountBodyRight">
|
|
<div class="accountBodyRighTitle" @click="changeAccount">
|
|
<div class="accountBodyRighTitle" @click="changeAccount">
|
|
<h1>{{currentAccount.accountName}}<a-icon type="down" style="font-size:14px" /></h1>
|
|
<h1>{{currentAccount.accountName}}<a-icon type="down" style="font-size:14px" /></h1>
|
|
- <p class="accountBodyRighTitleID">账户ID:{{currentAccount.accountId || 9647490}}</p>
|
|
|
|
|
|
+ <div class="accountBodyRighTitleID">账户ID:{{currentAccount.accountId || accountId}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="accountBodyRightInfo">
|
|
<div class="accountBodyRightInfo">
|
|
- <p class="accountBodyRightInfoItem">
|
|
|
|
|
|
+ <div class="accountBodyRightInfoItem">
|
|
<span class="name">余额:</span>
|
|
<span class="name">余额:</span>
|
|
{{currentAccount.totalBalance |decimalsHandle }}
|
|
{{currentAccount.totalBalance |decimalsHandle }}
|
|
- </p>
|
|
|
|
- <p class="accountBodyRightInfoItem">
|
|
|
|
|
|
+ </div>
|
|
|
|
+ <div class="accountBodyRightInfoItem">
|
|
<span class="name">投放状态:</span>
|
|
<span class="name">投放状态:</span>
|
|
{{currentAccount.statusStr}}
|
|
{{currentAccount.statusStr}}
|
|
- </p>
|
|
|
|
- <p class="accountBodyRightInfoItem createNum" @click="gorejectCreativePage">
|
|
|
|
|
|
+ </div>
|
|
|
|
+ <div class="accountBodyRightInfoItem createNum" @click="gorejectCreativePage">
|
|
<span class="name">被拒创意数:</span>
|
|
<span class="name">被拒创意数:</span>
|
|
- {{currentAccount.rejectedCounts}}
|
|
|
|
- </p>
|
|
|
|
|
|
+ {{currentAccount.rejectedCounts}}<a-icon type="right" style="font-size:12px;position:absolute;right:10px;top:16px"/>
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bodyBox planBody">
|
|
<div class="bodyBox planBody">
|
|
<div class="planBodyLeft">
|
|
<div class="planBodyLeft">
|
|
<div class="title">
|
|
<div class="title">
|
|
- <p class="titleContext">
|
|
|
|
|
|
+ <div class="titleContext">
|
|
<span class="spot"> </span>
|
|
<span class="spot"> </span>
|
|
广告上新
|
|
广告上新
|
|
<span class="titleTip">该广告账户近七天上新数据</span>
|
|
<span class="titleTip">该广告账户近七天上新数据</span>
|
|
- </p>
|
|
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
<div class="echart">
|
|
<div class="echart">
|
|
<a-spin :spinning="planBodyEchartSpinning">
|
|
<a-spin :spinning="planBodyEchartSpinning">
|
|
@@ -125,13 +134,13 @@
|
|
</div>
|
|
</div>
|
|
<div class="planBodyRight">
|
|
<div class="planBodyRight">
|
|
<div class="title">
|
|
<div class="title">
|
|
- <p class="titleContext">
|
|
|
|
|
|
+ <div class="titleContext">
|
|
<span class="spot"> </span>
|
|
<span class="spot"> </span>
|
|
投放数据
|
|
投放数据
|
|
<span class="titleTip">更新时间:{{data.length?data[0].updateTime: '-'}}</span>
|
|
<span class="titleTip">更新时间:{{data.length?data[0].updateTime: '-'}}</span>
|
|
- </p>
|
|
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
- <div class="table">
|
|
|
|
|
|
+ <div class="table" style="height:400px">
|
|
<a-table
|
|
<a-table
|
|
:columns="newColumns"
|
|
:columns="newColumns"
|
|
:data-source="data"
|
|
:data-source="data"
|
|
@@ -139,7 +148,8 @@
|
|
:pagination="ipagination"
|
|
:pagination="ipagination"
|
|
:loading="loading"
|
|
:loading="loading"
|
|
@change="sort"
|
|
@change="sort"
|
|
- :scroll="{ x: 950,}"
|
|
|
|
|
|
+ :scroll="{ x: 950,y:300}"
|
|
|
|
+ size='middle'
|
|
style="font-size:14px">
|
|
style="font-size:14px">
|
|
<div style='' slot="unitName" slot-scope="text">
|
|
<div style='' slot="unitName" slot-scope="text">
|
|
<a-tooltip placement="topLeft">
|
|
<a-tooltip placement="topLeft">
|
|
@@ -219,11 +229,20 @@
|
|
</div>
|
|
</div>
|
|
<div class="materialBodyLeft">
|
|
<div class="materialBodyLeft">
|
|
<div class="title">
|
|
<div class="title">
|
|
- <p class="titleContext">
|
|
|
|
|
|
+ <div class="titleContext">
|
|
<span class="spot"> </span>
|
|
<span class="spot"> </span>
|
|
素材相关
|
|
素材相关
|
|
|
|
+ <a-tooltip >
|
|
|
|
+ <template slot="title">
|
|
|
|
+ <div style="margin-bottom:8px">新上素材数:前一日上传的素材数</div>
|
|
|
|
+ <div style="margin-bottom:8px">有效素材:素材上线14天内消耗超过5000的素材数量</div>
|
|
|
|
+ <div style="margin-bottom:8px">爆量素材:素材上线7天内消耗超过50000的素材数量</div>
|
|
|
|
+ <div >素材总数:账户的素材总数</div>
|
|
|
|
+ </template>
|
|
|
|
+ <a-icon type="question-circle" />
|
|
|
|
+ </a-tooltip>
|
|
<span class="titleTip">更新时间:{{materialBodyUpdateTime || '-'}}</span>
|
|
<span class="titleTip">更新时间:{{materialBodyUpdateTime || '-'}}</span>
|
|
- </p>
|
|
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
<div class="echart">
|
|
<div class="echart">
|
|
<a-spin :spinning="materialBodyEchartSpinning">
|
|
<a-spin :spinning="materialBodyEchartSpinning">
|
|
@@ -239,10 +258,11 @@
|
|
<a-table
|
|
<a-table
|
|
:columns="materialColumns"
|
|
:columns="materialColumns"
|
|
:data-source="materialData"
|
|
:data-source="materialData"
|
|
- :scroll="{ x: 950,}"
|
|
|
|
|
|
+ :scroll="{ x: 950,y:260}"
|
|
:pagination="materialIpagination"
|
|
:pagination="materialIpagination"
|
|
:loading="materialLoading"
|
|
:loading="materialLoading"
|
|
@change="materialChange"
|
|
@change="materialChange"
|
|
|
|
+ size='middle'
|
|
style="font-size:14px">
|
|
style="font-size:14px">
|
|
|
|
|
|
<span slot="coverUrl" slot-scope="text,record" >
|
|
<span slot="coverUrl" slot-scope="text,record" >
|
|
@@ -289,10 +309,10 @@
|
|
<div class="dataMode">
|
|
<div class="dataMode">
|
|
<div class="adPositionMode">
|
|
<div class="adPositionMode">
|
|
<div class="title">
|
|
<div class="title">
|
|
- <p class="titleContext">
|
|
|
|
|
|
+ <div class="titleContext">
|
|
<span class="spot"> </span>
|
|
<span class="spot"> </span>
|
|
分版位数据
|
|
分版位数据
|
|
- </p>
|
|
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
<div class="eachrt">
|
|
<div class="eachrt">
|
|
<a-spin :spinning="adPositionEchartSpinning">
|
|
<a-spin :spinning="adPositionEchartSpinning">
|
|
@@ -305,10 +325,10 @@
|
|
<a-divider type="vertical" />
|
|
<a-divider type="vertical" />
|
|
<div class="ageMode">
|
|
<div class="ageMode">
|
|
<div class="title">
|
|
<div class="title">
|
|
- <p class="titleContext">
|
|
|
|
|
|
+ <div class="titleContext">
|
|
<span class="spot"> </span>
|
|
<span class="spot"> </span>
|
|
分年龄数据
|
|
分年龄数据
|
|
- </p>
|
|
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
<div class="eachrt">
|
|
<div class="eachrt">
|
|
<a-spin :spinning="ageEchartSpinning">
|
|
<a-spin :spinning="ageEchartSpinning">
|
|
@@ -319,10 +339,10 @@
|
|
<a-divider type="vertical" />
|
|
<a-divider type="vertical" />
|
|
<div class="genderMode">
|
|
<div class="genderMode">
|
|
<div class="title">
|
|
<div class="title">
|
|
- <p class="titleContext">
|
|
|
|
|
|
+ <div class="titleContext">
|
|
<span class="spot"> </span>
|
|
<span class="spot"> </span>
|
|
分性别数据
|
|
分性别数据
|
|
- </p>
|
|
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
<div class="eachrt">
|
|
<div class="eachrt">
|
|
<a-spin :spinning="genderEchartSpinning">
|
|
<a-spin :spinning="genderEchartSpinning">
|
|
@@ -339,20 +359,20 @@
|
|
|
|
|
|
|
|
|
|
<!-- 修改检测链接的modal -->
|
|
<!-- 修改检测链接的modal -->
|
|
- <a-modal v-model="linkVisible" title="修改链接" @ok="linkhandleOk" :width='800' @cancel='linkhandleCancel'>
|
|
|
|
|
|
+ <a-modal v-model="linkVisible" title="修改链接" @ok="linkhandleOk" :width='800' :height='400' @cancel='linkhandleCancel'>
|
|
<div class="linkBody">
|
|
<div class="linkBody">
|
|
<a-row>
|
|
<a-row>
|
|
<a-col :span="4">
|
|
<a-col :span="4">
|
|
- <p style="text-align:right">第三方检测链接:</p>
|
|
|
|
|
|
+ <div style="text-align:right">第三方检测链接:</div>
|
|
</a-col>
|
|
</a-col>
|
|
<a-col :span="18">
|
|
<a-col :span="18">
|
|
<span>{{oldLink || '-'}}</span>
|
|
<span>{{oldLink || '-'}}</span>
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
- <p></p>
|
|
|
|
|
|
+ <div style="margin-bottom:20px"></div>
|
|
<a-row>
|
|
<a-row>
|
|
<a-col :span="4">
|
|
<a-col :span="4">
|
|
- <p style="text-align:right">修改链接:</p>
|
|
|
|
|
|
+ <div style="text-align:right">修改链接:</div>
|
|
</a-col>
|
|
</a-col>
|
|
<a-col :span="18">
|
|
<a-col :span="18">
|
|
<a-input placeholder="请输入监测链接" style="300px" v-model="newLink"/>
|
|
<a-input placeholder="请输入监测链接" style="300px" v-model="newLink"/>
|
|
@@ -364,14 +384,14 @@
|
|
<a-modal v-model="targetVisible" title="修改定向" @ok="targethandleOk" @cancel='targethandleCancel'>
|
|
<a-modal v-model="targetVisible" title="修改定向" @ok="targethandleOk" @cancel='targethandleCancel'>
|
|
<div class="linkBody">
|
|
<div class="linkBody">
|
|
|
|
|
|
- <p></p>
|
|
|
|
|
|
+
|
|
<a-row>
|
|
<a-row>
|
|
<a-col :span="6">
|
|
<a-col :span="6">
|
|
- <p style="text-align:right">修改定向包:</p>
|
|
|
|
|
|
+ <div style="text-align:right">修改定向包:</div>
|
|
</a-col>
|
|
</a-col>
|
|
<a-col :span="16">
|
|
<a-col :span="16">
|
|
<a-select size="default" v-model="selectDirectionalId" style="width: 300px" >
|
|
<a-select size="default" v-model="selectDirectionalId" style="width: 300px" >
|
|
- <a-select-option v-for="i in directionalList" :key="i.id" :value='i.id'>
|
|
|
|
|
|
+ <a-select-option v-for="i in directionalList" :key="i.templateId" :value='i.templateId'>
|
|
{{ i.templateName }}
|
|
{{ i.templateName }}
|
|
</a-select-option>
|
|
</a-select-option>
|
|
</a-select>
|
|
</a-select>
|
|
@@ -517,7 +537,7 @@ const materialColumns = [
|
|
title: '素材ID',
|
|
title: '素材ID',
|
|
dataIndex: 'signature',
|
|
dataIndex: 'signature',
|
|
key: 'signature',
|
|
key: 'signature',
|
|
- width:170,
|
|
|
|
|
|
+ width:150,
|
|
align: 'center',
|
|
align: 'center',
|
|
scopedSlots: { customRender: 'signature' },
|
|
scopedSlots: { customRender: 'signature' },
|
|
},
|
|
},
|
|
@@ -583,6 +603,7 @@ const indexValue = [
|
|
label:'激活数',
|
|
label:'激活数',
|
|
value:'activation',
|
|
value:'activation',
|
|
type:'pie',
|
|
type:'pie',
|
|
|
|
+
|
|
},
|
|
},
|
|
{
|
|
{
|
|
label:'激活成本',
|
|
label:'激活成本',
|
|
@@ -639,28 +660,32 @@ const columns=[
|
|
dataIndex: 'activationCost',
|
|
dataIndex: 'activationCost',
|
|
key:'activationCost',
|
|
key:'activationCost',
|
|
today:0,
|
|
today:0,
|
|
- yesterday:0
|
|
|
|
|
|
+ yesterday:0,
|
|
|
|
+ type:'double'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '激活数',
|
|
title: '激活数',
|
|
dataIndex: 'activation',
|
|
dataIndex: 'activation',
|
|
key:'activation',
|
|
key:'activation',
|
|
today:0,
|
|
today:0,
|
|
- yesterday:0
|
|
|
|
|
|
+ yesterday:0,
|
|
|
|
+ type:'int'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '行为数',
|
|
title: '行为数',
|
|
dataIndex: 'bclick',
|
|
dataIndex: 'bclick',
|
|
key:'bclick',
|
|
key:'bclick',
|
|
today:0,
|
|
today:0,
|
|
- yesterday:0
|
|
|
|
|
|
+ yesterday:0,
|
|
|
|
+ type:'int'
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '表单提交数',
|
|
title: '表单提交数',
|
|
dataIndex: 'formCount',
|
|
dataIndex: 'formCount',
|
|
key:'formCount',
|
|
key:'formCount',
|
|
today:0,
|
|
today:0,
|
|
- yesterday:0
|
|
|
|
|
|
+ yesterday:0,
|
|
|
|
+ type:'int'
|
|
},
|
|
},
|
|
]
|
|
]
|
|
|
|
|
|
@@ -676,6 +701,8 @@ const columns=[
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ dateStringShow:'',//为了账户哪儿的问号显示对应段时间
|
|
|
|
+ updateAccountEchart:'',//账户图标的更新时间
|
|
selectaccountId:'',
|
|
selectaccountId:'',
|
|
adPositionEchartSpinning:false,
|
|
adPositionEchartSpinning:false,
|
|
ageEchartSpinning:false,
|
|
ageEchartSpinning:false,
|
|
@@ -709,7 +736,7 @@ const columns=[
|
|
loading:false,
|
|
loading:false,
|
|
ipagination: {
|
|
ipagination: {
|
|
current: 1,
|
|
current: 1,
|
|
- pageSize: 4,
|
|
|
|
|
|
+ pageSize: 10,
|
|
// pageSizeOptions: ['10', '20', '30'],
|
|
// pageSizeOptions: ['10', '20', '30'],
|
|
showTotal: (total, range) => {
|
|
showTotal: (total, range) => {
|
|
return range[0] + "-" + range[1] + " 共" + total + "条"
|
|
return range[0] + "-" + range[1] + " 共" + total + "条"
|
|
@@ -733,7 +760,7 @@ const columns=[
|
|
materialLoading:false,
|
|
materialLoading:false,
|
|
materialIpagination:{
|
|
materialIpagination:{
|
|
current: 1,
|
|
current: 1,
|
|
- pageSize: 3,
|
|
|
|
|
|
+ pageSize: 10,
|
|
// pageSizeOptions: ['10', '20', '30'],
|
|
// pageSizeOptions: ['10', '20', '30'],
|
|
showTotal: (total, range) => {
|
|
showTotal: (total, range) => {
|
|
return range[0] + "-" + range[1] + " 共" + total + "条"
|
|
return range[0] + "-" + range[1] + " 共" + total + "条"
|
|
@@ -808,7 +835,7 @@ const columns=[
|
|
this.currentUnit=record;
|
|
this.currentUnit=record;
|
|
this.targetVisible=true;
|
|
this.targetVisible=true;
|
|
|
|
|
|
- getAction('/kuaishou/batch/getDirectionalTemplate',{
|
|
|
|
|
|
+ getAction('/batch/kuaishouTemplate/list',{
|
|
accountId:this.accountId,
|
|
accountId:this.accountId,
|
|
}).then(res=>{
|
|
}).then(res=>{
|
|
// console.log(res);(res);
|
|
// console.log(res);(res);
|
|
@@ -837,7 +864,10 @@ const columns=[
|
|
},
|
|
},
|
|
accounthandleOk(){
|
|
accounthandleOk(){
|
|
this.accountVisible=false;
|
|
this.accountVisible=false;
|
|
- this.accountId=this.selectaccountId
|
|
|
|
|
|
+ this.dateValue=[moment(),moment()];
|
|
|
|
+ this.materialDate=[moment().subtract(1,'days'),moment().subtract(1,'days')]
|
|
|
|
+ this.accountId=this.selectaccountId;
|
|
|
|
+
|
|
// this.getCurrentAccountInfo();
|
|
// this.getCurrentAccountInfo();
|
|
},
|
|
},
|
|
accountCancel(){
|
|
accountCancel(){
|
|
@@ -951,10 +981,10 @@ const columns=[
|
|
templateId:this.selectDirectionalId
|
|
templateId:this.selectDirectionalId
|
|
}).then(res=>{
|
|
}).then(res=>{
|
|
|
|
|
|
- if(res.success){mat
|
|
|
|
- this.$message.success('修改成功')
|
|
|
|
|
|
+ if(res.success){
|
|
|
|
+ this.$message.success(res.message)
|
|
}else{
|
|
}else{
|
|
- this.$message.error('修改失败,请重试')
|
|
|
|
|
|
+ this.$message.error(res.message)
|
|
}
|
|
}
|
|
this.selectDirectionalId=undefined
|
|
this.selectDirectionalId=undefined
|
|
})
|
|
})
|
|
@@ -976,15 +1006,22 @@ const columns=[
|
|
return current && !(current > (moment().subtract(1,'months')) && current < moment())
|
|
return current && !(current > (moment().subtract(1,'months')) && current < moment())
|
|
},
|
|
},
|
|
onChange(date, dateString) {
|
|
onChange(date, dateString) {
|
|
- // console.log(res);(date, dateString);
|
|
|
|
|
|
+ console.log(date, dateString);
|
|
this.getAllIndex();
|
|
this.getAllIndex();
|
|
- this.getAccountIndexData()
|
|
|
|
|
|
+ this.getAccountIndexData();
|
|
|
|
+
|
|
|
|
+ if(dateString.length>0&&dateString[0]!=dateString[1]){
|
|
|
|
+ let interval=date[1].diff(date[0],'days')
|
|
|
|
+ console.log(interval);
|
|
|
|
+ this.dateStringShow=`${moment(date[0]).subtract(1+interval,'days').format('YYYY-MM-DD')}~${moment(date[0]).subtract(1,'days').format('YYYY-MM-DD')}`
|
|
|
|
+ console.log(this.dateStringShow)
|
|
|
|
+ }
|
|
},
|
|
},
|
|
materialDataChange(date, dateString){
|
|
materialDataChange(date, dateString){
|
|
// console.log(res);(date, dateString);
|
|
// console.log(res);(date, dateString);
|
|
this.materialIpagination.current=1
|
|
this.materialIpagination.current=1
|
|
this.getMaterialData()
|
|
this.getMaterialData()
|
|
- this.getMaterialOverview()
|
|
|
|
|
|
+ // this.getMaterialOverview()
|
|
},
|
|
},
|
|
initAccountIndexEchart(type,data){
|
|
initAccountIndexEchart(type,data){
|
|
// let type='激活'
|
|
// let type='激活'
|
|
@@ -992,7 +1029,15 @@ const columns=[
|
|
let option = {
|
|
let option = {
|
|
tooltip: {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
trigger: 'axis',
|
|
- formatter: `${type}<br />{a0} {b0}: {c0}<br />{a1} {b1}: {c1}`
|
|
|
|
|
|
+ // `${type}<br />{a0} {b0}: {c0}<br />{a1} {b1}: {c1}`
|
|
|
|
+ formatter: function(params){
|
|
|
|
+ // console.log(params);
|
|
|
|
+ let option=type+'<br/>';
|
|
|
|
+ for (var i = 0, length = params.length; i < length; i++) {
|
|
|
|
+ option +=`<span style="width:8px;height:8px;border-radius:50%;background:${params[i].color};display:inline-block;position:relative;top:-2px;margin-right:5px"></span>`+ params[i].seriesName + ' '+ params[i].axisValue + ' '+params[i].data+ '<br/>'
|
|
|
|
+ }
|
|
|
|
+ return option
|
|
|
|
+ }
|
|
},
|
|
},
|
|
grid:{
|
|
grid:{
|
|
left:'5px',
|
|
left:'5px',
|
|
@@ -1005,13 +1050,20 @@ const columns=[
|
|
type: 'category',
|
|
type: 'category',
|
|
show:false,
|
|
show:false,
|
|
boundaryGap: false,
|
|
boundaryGap: false,
|
|
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
|
+ axisPointer: {
|
|
|
|
+ type: 'none'
|
|
|
|
+ },
|
|
|
|
+
|
|
},
|
|
},
|
|
{
|
|
{
|
|
type: 'category',
|
|
type: 'category',
|
|
show:false,
|
|
show:false,
|
|
boundaryGap: false,
|
|
boundaryGap: false,
|
|
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
|
|
|
+ data: ['1', '2', '3', '4', '5', '6', '7'],
|
|
|
|
+ axisPointer: {
|
|
|
|
+ type: 'none'
|
|
|
|
+ },
|
|
},
|
|
},
|
|
] ,
|
|
] ,
|
|
yAxis: {
|
|
yAxis: {
|
|
@@ -1021,7 +1073,7 @@ const columns=[
|
|
series: [
|
|
series: [
|
|
{
|
|
{
|
|
name: '昨天',
|
|
name: '昨天',
|
|
- data: [800, 962, 930, 950, 1200, 1380, 1420],
|
|
|
|
|
|
+ data: [100, 290, 204, 258, 105, 117, 290],
|
|
type: 'line',
|
|
type: 'line',
|
|
smooth: true,
|
|
smooth: true,
|
|
xAxisIndex: 0,
|
|
xAxisIndex: 0,
|
|
@@ -1040,7 +1092,7 @@ const columns=[
|
|
},
|
|
},
|
|
{
|
|
{
|
|
name: '今天',
|
|
name: '今天',
|
|
- data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
|
|
|
+ data: [150, 230, 224, 218, 135, 147, 260],
|
|
type: 'line',
|
|
type: 'line',
|
|
smooth: true,
|
|
smooth: true,
|
|
showSymbol: false,
|
|
showSymbol: false,
|
|
@@ -1073,23 +1125,30 @@ const columns=[
|
|
|
|
|
|
]
|
|
]
|
|
};
|
|
};
|
|
- // 单一天数
|
|
|
|
- if(this.dateValue[0]==this.dateValue[1]){
|
|
|
|
|
|
+ //单一天数
|
|
|
|
+ console.log(data)
|
|
|
|
+
|
|
|
|
+ if(this.dateValue[0].format('YYYY-MM-DD')==this.dateValue[1].format('YYYY-MM-DD')){
|
|
option.xAxis[0].data=data.xData;
|
|
option.xAxis[0].data=data.xData;
|
|
option.xAxis[1].data=data.xData;
|
|
option.xAxis[1].data=data.xData;
|
|
-
|
|
|
|
- }else{
|
|
|
|
|
|
+
|
|
|
|
+ }else {
|
|
// 时间段
|
|
// 时间段
|
|
|
|
+ // let xdata=[]
|
|
option.xAxis[0].data=data.xData?data.xData.yesterday:[]
|
|
option.xAxis[0].data=data.xData?data.xData.yesterday:[]
|
|
option.xAxis[1].data=data.xData?data.xData.today:[]
|
|
option.xAxis[1].data=data.xData?data.xData.today:[]
|
|
|
|
|
|
}
|
|
}
|
|
- option.series[0].name=data.yData.yesterday.name
|
|
|
|
- option.series[1].name=data.yData.today.name
|
|
|
|
- option.series[0].data=data.yData.yesterday.data
|
|
|
|
- option.series[1].data=data.yData.today.data
|
|
|
|
|
|
+ option.series[0].name=data.yData?data.yData.yesterday.name:''
|
|
|
|
+ option.series[1].name=data.yData?data.yData.today.name:''
|
|
|
|
+ option.series[0].data=data.yData?data.yData.yesterday.data:[]
|
|
|
|
+ option.series[1].data=data.yData?data.yData.today.data:[]
|
|
|
|
+ console.log(option)
|
|
return option
|
|
return option
|
|
},
|
|
},
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
initGaugechart(value){
|
|
initGaugechart(value){
|
|
var dataArr = value;
|
|
var dataArr = value;
|
|
var colorSet = {
|
|
var colorSet = {
|
|
@@ -1112,7 +1171,7 @@ const columns=[
|
|
axisLine: {
|
|
axisLine: {
|
|
lineStyle: {
|
|
lineStyle: {
|
|
color: [
|
|
color: [
|
|
- [dataArr / 100, colorSet.color],
|
|
|
|
|
|
+ [dataArr / 100 || 0, colorSet.color],
|
|
[1, "#111F42"]
|
|
[1, "#111F42"]
|
|
],
|
|
],
|
|
width: 8
|
|
width: 8
|
|
@@ -1342,6 +1401,12 @@ const columns=[
|
|
legend: {
|
|
legend: {
|
|
data: ['新上计划数', '新上组数', '新上创意数']
|
|
data: ['新上计划数', '新上组数', '新上创意数']
|
|
},
|
|
},
|
|
|
|
+ grid:{
|
|
|
|
+ left:'15px',
|
|
|
|
+ // top:'20px',
|
|
|
|
+ right:'15px',
|
|
|
|
+ // bottom:'20px'
|
|
|
|
+ },
|
|
xAxis:[
|
|
xAxis:[
|
|
{
|
|
{
|
|
// ['新上素材数量', '有效素材', '爆量素材','新上素材使用数', '新上素材使用率',''],
|
|
// ['新上素材数量', '有效素材', '爆量素材','新上素材使用数', '新上素材使用率',''],
|
|
@@ -1354,6 +1419,10 @@ const columns=[
|
|
},
|
|
},
|
|
axisTick:{
|
|
axisTick:{
|
|
show:false,
|
|
show:false,
|
|
|
|
+ },
|
|
|
|
+ axisLabel: {
|
|
|
|
+ interval: 0, // 坐标轴刻度标签的显示间隔
|
|
|
|
+ // rotate: 40 // 标签倾斜的角度
|
|
}
|
|
}
|
|
},
|
|
},
|
|
{
|
|
{
|
|
@@ -1478,19 +1547,24 @@ const columns=[
|
|
initAdpositionChart(type,data){
|
|
initAdpositionChart(type,data){
|
|
|
|
|
|
// console.log(res);(type,data)
|
|
// console.log(res);(type,data)
|
|
-
|
|
|
|
|
|
+ let indexName='';
|
|
|
|
+ this.indexValue.forEach(item=>{
|
|
|
|
+ if(item.value==this.echartIndex){
|
|
|
|
+ indexName= item.label
|
|
|
|
+ }
|
|
|
|
+ })
|
|
let option={};
|
|
let option={};
|
|
if(type=='line'){
|
|
if(type=='line'){
|
|
- option= this.getLineOption(data);
|
|
|
|
|
|
+ option= this.getLineOption(indexName,data);
|
|
|
|
|
|
}else if( type=='pie'){
|
|
}else if( type=='pie'){
|
|
- option= this.getPieOption(data);
|
|
|
|
|
|
+ option= this.getPieOption(indexName,data);
|
|
|
|
|
|
}
|
|
}
|
|
return option
|
|
return option
|
|
},
|
|
},
|
|
|
|
|
|
- getLineOption(data){
|
|
|
|
|
|
+ getLineOption(name,data){
|
|
const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A','#9E87FF']
|
|
const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A','#9E87FF']
|
|
let lineOption = {
|
|
let lineOption = {
|
|
tooltip: {
|
|
tooltip: {
|
|
@@ -1557,13 +1631,13 @@ const columns=[
|
|
},
|
|
},
|
|
|
|
|
|
|
|
|
|
- getPieOption(data){
|
|
|
|
|
|
+ getPieOption(name,data){
|
|
const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A','#9E87FF']
|
|
const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A','#9E87FF']
|
|
let option = {
|
|
let option = {
|
|
|
|
|
|
tooltip: {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
trigger: 'item',
|
|
- formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
|
|
|
|
+ formatter: `${name} <br/>{a} <br/>{b} : {c} ({d}%)`
|
|
},
|
|
},
|
|
legend: {
|
|
legend: {
|
|
// orient: 'vertical',
|
|
// orient: 'vertical',
|
|
@@ -1592,7 +1666,7 @@ const columns=[
|
|
option.series=[];
|
|
option.series=[];
|
|
option.series.push(
|
|
option.series.push(
|
|
{
|
|
{
|
|
- name:'',
|
|
|
|
|
|
+ name:`${moment().subtract(8,'days').format('YYYY-MM-DD')}~${moment().subtract(2,'days').format('YYYY-MM-DD')}`,
|
|
type: 'pie',
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
radius: ['40%', '70%'],
|
|
labelLine:{
|
|
labelLine:{
|
|
@@ -1840,8 +1914,8 @@ const columns=[
|
|
item.today=res.result.today?res.result.today[item.dataIndex]:0;
|
|
item.today=res.result.today?res.result.today[item.dataIndex]:0;
|
|
item.yesterday=res.result.yesterday?res.result.yesterday[item.dataIndex]:0
|
|
item.yesterday=res.result.yesterday?res.result.yesterday[item.dataIndex]:0
|
|
})
|
|
})
|
|
- let activationRatio=res.result.today?res.result.today.activationRatio:0
|
|
|
|
- this.initEchart('gaugeEchart',this.initGaugechart(activationRatio))
|
|
|
|
|
|
+ let clickOnActivationRatio=res.result.today?res.result.today.clickOnActivationRatio:0
|
|
|
|
+ this.initEchart('gaugeEchart',this.initGaugechart(clickOnActivationRatio))
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
},
|
|
@@ -1871,7 +1945,7 @@ const columns=[
|
|
}else{
|
|
}else{
|
|
this.accountPageSpinning=false;
|
|
this.accountPageSpinning=false;
|
|
this.$message.error(res.message)
|
|
this.$message.error(res.message)
|
|
- this.currentAccount={};
|
|
|
|
|
|
+ this.currentAccount=res.result;
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
},
|
|
@@ -1894,20 +1968,20 @@ const columns=[
|
|
// console.log(res);(res);
|
|
// console.log(res);(res);
|
|
this.accountIndexEchartSpinning=false;
|
|
this.accountIndexEchartSpinning=false;
|
|
if(res.success){
|
|
if(res.success){
|
|
- let data={
|
|
|
|
- xData:null,
|
|
|
|
- yData:{
|
|
|
|
- yesterday:{
|
|
|
|
- name:"",
|
|
|
|
- data:[]
|
|
|
|
- },
|
|
|
|
- today:{
|
|
|
|
- name:"",
|
|
|
|
- data:[]
|
|
|
|
- },
|
|
|
|
- }
|
|
|
|
|
|
+ let data={
|
|
|
|
+ xData:null,
|
|
|
|
+ yData:{
|
|
|
|
+ yesterday:{
|
|
|
|
+ name:"",
|
|
|
|
+ data:[]
|
|
|
|
+ },
|
|
|
|
+ today:{
|
|
|
|
+ name:"",
|
|
|
|
+ data:[]
|
|
|
|
+ },
|
|
|
|
+ }
|
|
};
|
|
};
|
|
-
|
|
|
|
|
|
+ this.updateAccountEchart=res.result.updateTime
|
|
|
|
|
|
// 单天的数据
|
|
// 单天的数据
|
|
|
|
|
|
@@ -1923,6 +1997,10 @@ const columns=[
|
|
data.yData.today.data=res.result.today.map((item,index)=>{
|
|
data.yData.today.data=res.result.today.map((item,index)=>{
|
|
return item.value?item.value:0
|
|
return item.value?item.value:0
|
|
})
|
|
})
|
|
|
|
+ data.yData.today.data=Array.apply(null, Array(24)).map((item, i)=> {
|
|
|
|
+
|
|
|
|
+ return data.yData.today.data[i]?data.yData.today.data[i]:0
|
|
|
|
+ });
|
|
// console.log(data)
|
|
// console.log(data)
|
|
this.initEchart('accountIndexEchart',this.initAccountIndexEchart(indexName,data))
|
|
this.initEchart('accountIndexEchart',this.initAccountIndexEchart(indexName,data))
|
|
|
|
|
|
@@ -1944,7 +2022,7 @@ const columns=[
|
|
this.initEchart('accountIndexEchart',this.initAccountIndexEchart(indexName,data))
|
|
this.initEchart('accountIndexEchart',this.initAccountIndexEchart(indexName,data))
|
|
|
|
|
|
}else{
|
|
}else{
|
|
-
|
|
|
|
|
|
+ this.initEchart('accountIndexEchart',this.initAccountIndexEchart(indexName,{}))
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
@@ -1955,7 +2033,7 @@ const columns=[
|
|
|
|
|
|
}else{
|
|
}else{
|
|
this.accountIndexEchartSpinning=false;
|
|
this.accountIndexEchartSpinning=false;
|
|
- this.initEchart('accountIndexEchart',this.initAccountIndexEchart(indexName,[]))
|
|
|
|
|
|
+ this.initEchart('accountIndexEchart',this.initAccountIndexEchart(indexName,{}))
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
},
|
|
@@ -1963,6 +2041,7 @@ const columns=[
|
|
getAgeData(){
|
|
getAgeData(){
|
|
this.ageEchartSpinning=true
|
|
this.ageEchartSpinning=true
|
|
let type=this.handlerTypeOfIndex(this.echartIndex);
|
|
let type=this.handlerTypeOfIndex(this.echartIndex);
|
|
|
|
+
|
|
// // console.log(res);(this.echartIndex)
|
|
// // console.log(res);(this.echartIndex)
|
|
postAction('/etl/audienceAccountDaily/getAgeInfo',{
|
|
postAction('/etl/audienceAccountDaily/getAgeInfo',{
|
|
accountId:this.accountId,
|
|
accountId:this.accountId,
|
|
@@ -1997,29 +2076,40 @@ const columns=[
|
|
},
|
|
},
|
|
handlerLineData(res){
|
|
handlerLineData(res){
|
|
let data;
|
|
let data;
|
|
|
|
+ let xData=Array.apply(null, Array(7)).map((item, i)=> {return moment().subtract(2+i,'days').format('YYYY-MM-DD')}).reverse();
|
|
|
|
+
|
|
data={
|
|
data={
|
|
yData:[],
|
|
yData:[],
|
|
legend:[],
|
|
legend:[],
|
|
};
|
|
};
|
|
data.legend=[];
|
|
data.legend=[];
|
|
- res.result.forEach(item=>{
|
|
|
|
|
|
+ Object.keys(res.result).forEach((key)=>{
|
|
|
|
+ // console.log(key)
|
|
|
|
+ })
|
|
|
|
+ res.result[xData[0]].forEach(item=>{
|
|
if(data.legend.indexOf(item.type)==-1){
|
|
if(data.legend.indexOf(item.type)==-1){
|
|
data.legend.push(item.type)
|
|
data.legend.push(item.type)
|
|
}
|
|
}
|
|
});
|
|
});
|
|
- // // console.log(res);(data)
|
|
|
|
-
|
|
|
|
|
|
+ console.log(data)
|
|
data.legend.forEach((item,index)=>{
|
|
data.legend.forEach((item,index)=>{
|
|
data.yData.push({
|
|
data.yData.push({
|
|
name:item,
|
|
name:item,
|
|
data:[]
|
|
data:[]
|
|
})
|
|
})
|
|
- res.result.forEach((ele)=>{
|
|
|
|
- if(item==ele.type){
|
|
|
|
- data.yData[index].data.push(ele.value)
|
|
|
|
- }
|
|
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ xData.forEach(item=>{
|
|
|
|
+ res.result[item].forEach(ele=>{
|
|
|
|
+ data.yData.forEach((element)=>{
|
|
|
|
+ if(ele.type==element.name){
|
|
|
|
+ element.data.push(ele.value)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+
|
|
});
|
|
});
|
|
})
|
|
})
|
|
|
|
+ console.log(data)
|
|
return data
|
|
return data
|
|
},
|
|
},
|
|
// 性别对应数据图
|
|
// 性别对应数据图
|
|
@@ -2037,12 +2127,15 @@ const columns=[
|
|
let data=[]
|
|
let data=[]
|
|
if(res.success&&res.result){
|
|
if(res.success&&res.result){
|
|
if(type=='pie'){
|
|
if(type=='pie'){
|
|
- data=res.result.map(item=>{
|
|
|
|
- return {
|
|
|
|
- name:item.type,
|
|
|
|
- value:item.value
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
|
|
+ data=res.result.map(item=>{
|
|
|
|
+
|
|
|
|
+ return {
|
|
|
|
+ name:item.type,
|
|
|
|
+ value:item.value
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+
|
|
this.initEchart('genderEchart',this.initAdpositionChart(type,data))
|
|
this.initEchart('genderEchart',this.initAdpositionChart(type,data))
|
|
}else{
|
|
}else{
|
|
this.initEchart('genderEchart',this.initAdpositionChart(type,this.handlerLineData(res)))
|
|
this.initEchart('genderEchart',this.initAdpositionChart(type,this.handlerLineData(res)))
|
|
@@ -2187,7 +2280,12 @@ const columns=[
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
|
|
+
|
|
.accountPage .accountBody{
|
|
.accountPage .accountBody{
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ line-height: 1;
|
|
.ant-input {
|
|
.ant-input {
|
|
-webkit-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
@@ -2213,25 +2311,27 @@ const columns=[
|
|
transition: all 0.3s;
|
|
transition: all 0.3s;
|
|
}
|
|
}
|
|
.ant-calendar-range-picker-separator {
|
|
.ant-calendar-range-picker-separator {
|
|
- display: inline-block;
|
|
|
|
- min-width: 10px;
|
|
|
|
- height: 100%;
|
|
|
|
- color: white;
|
|
|
|
- white-space: nowrap;
|
|
|
|
- text-align: center;
|
|
|
|
- vertical-align: top;
|
|
|
|
- pointer-events: none;
|
|
|
|
|
|
+ display: inline-block;
|
|
|
|
+ min-width: 10px;
|
|
|
|
+ height: 100%;
|
|
|
|
+ color: white;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ text-align: center;
|
|
|
|
+ vertical-align: top;
|
|
|
|
+ pointer-events: none;
|
|
}
|
|
}
|
|
|
|
|
|
.ant-divider, .ant-divider-vertical {
|
|
.ant-divider, .ant-divider-vertical {
|
|
- position: relative;
|
|
|
|
- top: -0.06em;
|
|
|
|
- display: inline-block;
|
|
|
|
- width: 1px;
|
|
|
|
- height: 2.9em;
|
|
|
|
- margin: 0 8px;
|
|
|
|
- vertical-align: middle;
|
|
|
|
|
|
+ position: relative;
|
|
|
|
+ top: -0.06em;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 1px;
|
|
|
|
+ height: 2.9em;
|
|
|
|
+ margin: 0 8px;
|
|
|
|
+ vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+
|
|
}
|
|
}
|
|
.accountPage .materialBody{
|
|
.accountPage .materialBody{
|
|
.ant-divider, .ant-divider-vertical {
|
|
.ant-divider, .ant-divider-vertical {
|
|
@@ -2256,7 +2356,13 @@ const columns=[
|
|
vertical-align: middle;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+// .accountPage{
|
|
|
|
+ .ant-tooltip {
|
|
|
|
+
|
|
|
|
+ max-width: 400px;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+// }
|
|
</style>
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
// #
|
|
// #
|
|
@@ -2314,14 +2420,19 @@ const columns=[
|
|
font-size: 26px;
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
padding: 0;
|
|
padding: 0;
|
|
|
|
+ margin-bottom: 10px;
|
|
}
|
|
}
|
|
.costInfo{
|
|
.costInfo{
|
|
margin: 20px 0 0 0;
|
|
margin: 20px 0 0 0;
|
|
width: 70%;
|
|
width: 70%;
|
|
display: flex;
|
|
display: flex;
|
|
- justify-content: space-between;
|
|
|
|
-
|
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ }
|
|
|
|
+ .yesterdayInfo{
|
|
|
|
+ width:50%;
|
|
|
|
+ flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
+
|
|
.costNum{
|
|
.costNum{
|
|
width: 90%;
|
|
width: 90%;
|
|
font-size: 26px;
|
|
font-size: 26px;
|
|
@@ -2330,9 +2441,25 @@ const columns=[
|
|
background: white;
|
|
background: white;
|
|
text-align: center;
|
|
text-align: center;
|
|
border-radius: 10px;
|
|
border-radius: 10px;
|
|
- margin: 15px 0;
|
|
|
|
- padding: 3px 0px;
|
|
|
|
|
|
+ margin: 20px 0;
|
|
|
|
+ padding: 10px 0px;
|
|
|
|
+ }
|
|
|
|
+ @media screen and (max-width:1980px) and (min-width:1560px) {
|
|
|
|
+ .costNum {
|
|
|
|
+ font-size: 22px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
+ @media screen and (max-width:1560px) and (min-width:1280px) {
|
|
|
|
+ .costNum {
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ @media screen and (max-width:1280px) {
|
|
|
|
+ .costNum {
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
}
|
|
}
|
|
.accountBodyLeftCostRight{
|
|
.accountBodyLeftCostRight{
|
|
width: 45%;
|
|
width: 45%;
|
|
@@ -2358,7 +2485,7 @@ const columns=[
|
|
font-size: 1.2rem;
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
color:#303133;
|
|
color:#303133;
|
|
- margin-bottom: 3px;
|
|
|
|
|
|
+ margin-bottom: 10px;
|
|
width: 100%;
|
|
width: 100%;
|
|
|
|
|
|
}
|
|
}
|
|
@@ -2399,7 +2526,7 @@ const columns=[
|
|
font-size: 0.89rem;
|
|
font-size: 0.89rem;
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
color:#303133;
|
|
color:#303133;
|
|
- margin-bottom:3px ;
|
|
|
|
|
|
+ margin-bottom:8px ;
|
|
}
|
|
}
|
|
.IndexName{
|
|
.IndexName{
|
|
// width: 100%;
|
|
// width: 100%;
|
|
@@ -2422,7 +2549,7 @@ const columns=[
|
|
height: 3px;
|
|
height: 3px;
|
|
background: #2461F1;
|
|
background: #2461F1;
|
|
position: relative;
|
|
position: relative;
|
|
- top: 5px;
|
|
|
|
|
|
+ top: 3px;
|
|
left: 50%;
|
|
left: 50%;
|
|
margin-left: -8px;
|
|
margin-left: -8px;
|
|
}
|
|
}
|
|
@@ -2544,10 +2671,13 @@ const columns=[
|
|
}
|
|
}
|
|
.accountBodyRightInfoItem{
|
|
.accountBodyRightInfoItem{
|
|
background: rgb(238,241,255);
|
|
background: rgb(238,241,255);
|
|
- padding:10px 15px;
|
|
|
|
- margin: 15px 0 0;
|
|
|
|
|
|
+ padding:15px 15px;
|
|
|
|
+ margin: 20px 0 0;
|
|
border-radius: 5px;
|
|
border-radius: 5px;
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
|
|
+ white-space:nowrap;
|
|
|
|
+ overflow:hidden;
|
|
|
|
+ text-overflow:ellipsis;
|
|
.name{
|
|
.name{
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
@@ -2555,6 +2685,7 @@ const columns=[
|
|
}
|
|
}
|
|
.createNum{
|
|
.createNum{
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
|
+ position: relative;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|