|
@@ -46,22 +46,67 @@
|
|
|
<div class="item">
|
|
|
<div class="todyCost">
|
|
|
<span>{{667.15 | decimalsHandle}}</span>
|
|
|
- <span>
|
|
|
- <a-icon type="rise" />
|
|
|
- <a-icon type="fall" />
|
|
|
+ <span class="sign">
|
|
|
+ <a-icon type="rise" class="rise"/>
|
|
|
+ <!-- <a-icon type="fall" class="fall" /> -->
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="yesterdayCost">
|
|
|
/昨日:{{407.16 | decimalsHandle}}
|
|
|
</div>
|
|
|
- <div class="IndexName">
|
|
|
+ <span class="IndexName" :class="{'IndexNameActive':isActive==1}" @click="getActiveIndexName(1)">
|
|
|
+ 激活成本
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="todyCost">
|
|
|
+ <span>{{667.15 | decimalsHandle}}</span>
|
|
|
+ <span class="sign">
|
|
|
+ <a-icon type="rise" class="rise"/>
|
|
|
+ <!-- <a-icon type="fall" class="fall" /> -->
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="yesterdayCost">
|
|
|
+ /昨日:{{407.16 | decimalsHandle}}
|
|
|
+ </div>
|
|
|
+ <span class="IndexName" :class="{'IndexNameActive':isActive==2}" @click="getActiveIndexName(2)">
|
|
|
激活数
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="todyCost">
|
|
|
+ <span>{{667.15 | decimalsHandle}}</span>
|
|
|
+ <span class="sign">
|
|
|
+ <a-icon type="rise" class="rise"/>
|
|
|
+ <!-- <a-icon type="fall" class="fall" /> -->
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="yesterdayCost">
|
|
|
+ /昨日:{{407.16 | decimalsHandle}}
|
|
|
</div>
|
|
|
+ <span class="IndexName" :class="{'IndexNameActive':isActive==3}" @click="getActiveIndexName(3)">
|
|
|
+ 激活数
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="todyCost">
|
|
|
+ <span>{{667.15 | decimalsHandle}}</span>
|
|
|
+ <span class="sign">
|
|
|
+ <a-icon type="rise" class="rise"/>
|
|
|
+ <!-- <a-icon type="fall" class="fall" /> -->
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="yesterdayCost">
|
|
|
+ /昨日:{{407.16 | decimalsHandle}}
|
|
|
+ </div>
|
|
|
+ <span class="IndexName" :class="{'IndexNameActive':isActive==4}" @click="getActiveIndexName(4)">
|
|
|
+ 激活数
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="echart">
|
|
|
+ <div class="echart" style="margin-top:10px">
|
|
|
<a-spin :spinning="accountIndexEchartSpinning">
|
|
|
- <div class="accountIndexEchart" id="accountIndexEchart" style='width:100%;height:350px;margin:0 auto;' ref="accountIndexEchart"></div>
|
|
|
+ <div class="accountIndexEchart" id="accountIndexEchart" style='width:100%;height:160px;margin:0 auto;' ref="accountIndexEchart"></div>
|
|
|
</a-spin>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -112,7 +157,7 @@
|
|
|
</div>
|
|
|
<div class="table">
|
|
|
<a-table
|
|
|
- :columns="columns"
|
|
|
+ :columns="newColumns"
|
|
|
:data-source="data"
|
|
|
|
|
|
:pagination="ipagination"
|
|
@@ -302,13 +347,66 @@
|
|
|
</div>
|
|
|
</a-spin>
|
|
|
</div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 修改检测链接的modal -->
|
|
|
+ <a-modal v-model="linkVisible" title="修改链接" @ok="linkhandleOk" :width='800'>
|
|
|
+ <div class="linkBody">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="4">
|
|
|
+ <p style="text-align:right">第三方检测链接:</p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="18">
|
|
|
+ <span>{{"https://www.baidu.com/s?wd=echart%E5%AE%9E%E7%8E%B0%E4%B8%A4%E4%B8%AAx%E8%BD%B4%E4%B8%A4%E4%B8%AAy%E8%BD%B4&rsv_spt=1&rsv_iqid=0x9a6bd47e00238246&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=43&rsv_sug1=35&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=16314&rsv_sug4=17094"}}</span>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <p></p>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="4">
|
|
|
+ <p style="text-align:right">修改链接:</p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="18">
|
|
|
+ <a-input placeholder="请输入监测链接" style="300px" v-model="newLink"/>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </a-modal>
|
|
|
+ <!-- 修改定向的modal -->
|
|
|
+ <a-modal v-model="targetVisible" title="修改定向" @ok="targethandleOk">
|
|
|
+ <div class="linkBody">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="4">
|
|
|
+ <p style="text-align:right">已有定向包:</p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="18">
|
|
|
+ <span>DM2021</span>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <p></p>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="4">
|
|
|
+ <p style="text-align:right">修改定向包:</p>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="18">
|
|
|
+ <a-select size="default" default-value="a1" style="width: 200px" >
|
|
|
+ <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
|
|
|
+ {{ (i + 9).toString(36) + i }}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </a-modal>
|
|
|
+ <customColumn :visible='visible' :listNum='listNum' :fiexColumn='columnsFixd' :mediaType='2' @closeCustomColumn='closeCustomColumn' @changeColumn='changeColumn' />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import moment from 'moment'
|
|
|
import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
|
|
|
-
|
|
|
+import customColumn from './modules/customColumn.vue'
|
|
|
import qs from 'qs'
|
|
|
// 引入基本模板
|
|
|
var echarts = require('echarts')
|
|
@@ -325,7 +423,7 @@ require('echarts/lib/component/graphic')
|
|
|
require('echarts/lib/component/toolbox')
|
|
|
require('echarts/lib/component/legend')
|
|
|
|
|
|
-const columns = [
|
|
|
+const newColumns = [
|
|
|
|
|
|
|
|
|
{
|
|
@@ -505,17 +603,59 @@ const indexValue = [
|
|
|
},
|
|
|
]
|
|
|
|
|
|
+const columnsFixd = [
|
|
|
+ {
|
|
|
+ title: '消耗',
|
|
|
+ dataIndex: 'cost',
|
|
|
+ key:'date',
|
|
|
+ },
|
|
|
+
|
|
|
+]
|
|
|
|
|
|
+const columns=[
|
|
|
+ {
|
|
|
+ title: '激活成本',
|
|
|
+ dataIndex: 'cost',
|
|
|
+ key:'date',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '激活数',
|
|
|
+ dataIndex: 'cost',
|
|
|
+ key:'date',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '行为数',
|
|
|
+ dataIndex: 'cost',
|
|
|
+ key:'date',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '表单提交数',
|
|
|
+ dataIndex: 'cost',
|
|
|
+ key:'date',
|
|
|
+ },
|
|
|
+]
|
|
|
export default {
|
|
|
name:'accountPage',
|
|
|
+ components:{
|
|
|
+ // DatePicker,
|
|
|
+ customColumn,
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
+ columnsFixd,
|
|
|
+ columns:[...columnsFixd,...columns],
|
|
|
+ visible:false,
|
|
|
+ listNum:[],
|
|
|
+ newLink:'',
|
|
|
+ linkVisible:false,
|
|
|
+ targetVisible:false,
|
|
|
+ isActive:1,
|
|
|
moment,
|
|
|
materialDate:[moment().subtract(1,'days'),moment().subtract(1,'days')],
|
|
|
currentAccount:{},
|
|
|
dateValue:[moment(),moment()],
|
|
|
data:[],
|
|
|
- columns:[...columns],
|
|
|
+ newColumns:[...newColumns],
|
|
|
loading:false,
|
|
|
ipagination: {
|
|
|
current: 1,
|
|
@@ -572,9 +712,61 @@ const indexValue = [
|
|
|
planBodyEchartSpinning:false,
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
methods: {
|
|
|
- showIndexChangeBox(){
|
|
|
+ //自定义之后修改父元素表头
|
|
|
+ changeColumn(val){
|
|
|
+ this.columns=[...val];
|
|
|
+ this.columns=[...val];
|
|
|
+ if(this.columns.length> this.columnsFixd.length&&this.columns.length<8){
|
|
|
+ this.columns.forEach((element,index) => {
|
|
|
+ if(index<this.columns.length-1){
|
|
|
+ element.width='auto'
|
|
|
+ element.fixed=false
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
|
|
|
+ }else if(this.columns.length>=8){
|
|
|
+ this.columns.forEach((element,index) => {
|
|
|
+ if(index<this.columnsFixd.length){
|
|
|
+ element.width=200
|
|
|
+ element.fixed='left'
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ this.scrollX=1000+200*(this.columns.length-this.columnsFixd.length)
|
|
|
+ } else{
|
|
|
+ this.scrollX=0;
|
|
|
+ this.columns.forEach(element => {
|
|
|
+ element.width='auto'
|
|
|
+ element.fixed=false
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ closeCustomColumn(){
|
|
|
+ this.visible=false;
|
|
|
+ },
|
|
|
+ //弹出框打开,自定义列
|
|
|
+ customColumns() {
|
|
|
+ this.visible = true
|
|
|
+ this.listNum = [...this.columns]
|
|
|
+ },
|
|
|
+ // 监测链接修改OK事件
|
|
|
+ linkhandleOk(e){
|
|
|
+ this.linkVisible=true
|
|
|
+ },
|
|
|
+ // 定向包修改OK事件
|
|
|
+ targethandleOk(e){
|
|
|
+ this.targetVisible=true
|
|
|
+ },
|
|
|
|
|
|
+ getActiveIndexName(val){
|
|
|
+ this.isActive=val
|
|
|
+ },
|
|
|
+ showIndexChangeBox(){
|
|
|
+ this.visible=true;
|
|
|
+ this.listNum = [...this.columns]
|
|
|
},
|
|
|
disabledDate(current) {
|
|
|
return current && current > moment() && current < moment().subtract(1,'months')
|
|
@@ -585,6 +777,83 @@ const indexValue = [
|
|
|
materialDataChange(date, dateString){
|
|
|
console.log(date, dateString)
|
|
|
},
|
|
|
+ initAccountIndexEchart(type,data){
|
|
|
+ // let type='激活'
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ formatter: `${type}<br />{a0} {b0}: {c0}<br />{a1} {b1}: {c1}`
|
|
|
+ },
|
|
|
+ grid:{
|
|
|
+ left:'5px',
|
|
|
+ top:0,
|
|
|
+ right:'5px',
|
|
|
+ bottom:0
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ show:false,
|
|
|
+ boundaryGap: false,
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ show:false,
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '今天',
|
|
|
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: false,
|
|
|
+ symbol: 'circle',
|
|
|
+ lineStyle: {
|
|
|
+ color: '#2461F1',
|
|
|
+ width: 3,
|
|
|
+ },
|
|
|
+ itemStyle:{
|
|
|
+ color:'#2461F1',
|
|
|
+ borderWidth:2,
|
|
|
+ borderColor:'#fff'
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color:{
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0, color: '#2461F1' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1, color: 'white' // 100% 处的颜色
|
|
|
+ }],
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '昨天',
|
|
|
+ data: [800, 962, 930, 950, 1200, 1380, 1420],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: false,
|
|
|
+ symbol: 'circle',
|
|
|
+ lineStyle: {
|
|
|
+ color: '#3CC6A5',
|
|
|
+ width: 3,
|
|
|
+ },
|
|
|
+ itemStyle:{
|
|
|
+ color:'#3CC6A5',
|
|
|
+ borderWidth:2,
|
|
|
+ borderColor:'#fff'
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ return option
|
|
|
+ },
|
|
|
initGaugechart(value){
|
|
|
var dataArr = value;
|
|
|
var colorSet = {
|
|
@@ -834,43 +1103,78 @@ const indexValue = [
|
|
|
},
|
|
|
initMaterialChart(data){
|
|
|
let option={
|
|
|
-
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis'
|
|
|
- },
|
|
|
legend: {
|
|
|
data: ['新上计划数', '新上组数', '新上创意数']
|
|
|
},
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: ['新上素材数量', '新上素材使用数', '素材总数', '有效素材', '爆量素材', '新上素材使用率'],
|
|
|
- axisLine: {
|
|
|
- show:false,
|
|
|
-
|
|
|
+ xAxis:[
|
|
|
+ {
|
|
|
+ // name:"a",
|
|
|
+ type: 'category',
|
|
|
+ data: ['新上素材数量', '新上素材使用数', '有效素材', '爆量素材', '新上素材使用率',''],
|
|
|
+ axisLine: {
|
|
|
+ show:false,
|
|
|
+
|
|
|
+ },
|
|
|
+ axisTick:{
|
|
|
+ show:false,
|
|
|
+ }
|
|
|
},
|
|
|
- axisTick:{
|
|
|
+ {
|
|
|
+ // name:"b",
|
|
|
+ type: 'category',
|
|
|
+ data: ['素材总数','','','','',''],
|
|
|
+ nameLocation: 'end',
|
|
|
+ axisLine: {
|
|
|
+ show:false,
|
|
|
+
|
|
|
+ },
|
|
|
+ axisTick:{
|
|
|
+ show:false,
|
|
|
+ },
|
|
|
+ position: 'bottom',
|
|
|
+ inverse: true
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ ] ,
|
|
|
+ yAxis:[
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
show:false,
|
|
|
- }
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- show:false,
|
|
|
- axisLine: {
|
|
|
- onZero: false,
|
|
|
+ axisLine: {
|
|
|
+ onZero: false,
|
|
|
+ show:false,
|
|
|
+ color: '#999',
|
|
|
+ lineStyle: {
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
show:false,
|
|
|
- color: '#999',
|
|
|
- lineStyle: {
|
|
|
- color: '#999'
|
|
|
- }
|
|
|
+ axisLine: {
|
|
|
+ onZero: false,
|
|
|
+ show:false,
|
|
|
+ color: '#999',
|
|
|
+ lineStyle: {
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ position: 'right',
|
|
|
+ // inverse: true
|
|
|
},
|
|
|
- },
|
|
|
+
|
|
|
+
|
|
|
+ ] ,
|
|
|
|
|
|
series: [
|
|
|
{
|
|
|
|
|
|
- data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
+ data: [820, 932, 901, 934, 1290 ],
|
|
|
type: 'bar',
|
|
|
barWidth: '30%',
|
|
|
+ xAxisIndex:0,
|
|
|
label:{
|
|
|
show:true,
|
|
|
position:'top',
|
|
@@ -895,6 +1199,37 @@ const indexValue = [
|
|
|
|
|
|
},
|
|
|
},
|
|
|
+ {
|
|
|
+
|
|
|
+ data: [13200000000],
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '30%',
|
|
|
+ xAxisIndex:1,
|
|
|
+ yAxisIndex:1,
|
|
|
+ label:{
|
|
|
+ show:true,
|
|
|
+ position:'top',
|
|
|
+ distance: 10 ,
|
|
|
+
|
|
|
+ },
|
|
|
+ backgroundStyle:{
|
|
|
+ borderRadius:[0, 0, 5, 5],
|
|
|
+ },
|
|
|
+ itemStyle:{
|
|
|
+
|
|
|
+ // normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#7820FF'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#3470FF'
|
|
|
+ }]),
|
|
|
+ barBorderRadius:[10, 10, 0, 0],
|
|
|
+ // },
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
|
|
|
]
|
|
|
}
|
|
@@ -1005,30 +1340,22 @@ const indexValue = [
|
|
|
|
|
|
|
|
|
getPieOption(){
|
|
|
+ const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A','#9E87FF']
|
|
|
let option = {
|
|
|
- // title: {
|
|
|
- // text: '南丁格尔玫瑰图',
|
|
|
- // subtext: '纯属虚构',
|
|
|
- // left: 'center'
|
|
|
- // },
|
|
|
+
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
|
},
|
|
|
legend: {
|
|
|
orient: 'vertical',
|
|
|
- left: '10%',
|
|
|
+ left: '3%',
|
|
|
top:'center',
|
|
|
|
|
|
},
|
|
|
toolbox: {
|
|
|
show: true,
|
|
|
- feature: {
|
|
|
- mark: {show: true},
|
|
|
- dataView: {show: true, readOnly: false},
|
|
|
- restore: {show: true},
|
|
|
- saveAsImage: {show: true}
|
|
|
- }
|
|
|
+
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
@@ -1037,18 +1364,27 @@ const indexValue = [
|
|
|
radius: [20, 140],
|
|
|
center: ['55%', '50%'],
|
|
|
roseType: 'area',
|
|
|
+ labelLine:{
|
|
|
+ length:5,
|
|
|
+ length2:5
|
|
|
+ },
|
|
|
+ label:{
|
|
|
+ position:'outside'
|
|
|
+ },
|
|
|
itemStyle: {
|
|
|
- borderRadius: 5
|
|
|
+ borderRadius: 5,
|
|
|
+ color: (params) => {
|
|
|
+ return colorList[params.dataIndex]
|
|
|
+ }
|
|
|
},
|
|
|
data: [
|
|
|
{value: 30, name: 'rose 1'},
|
|
|
- {value: 28, name: 'rose 2'},
|
|
|
- {value: 26, name: 'rose 3'},
|
|
|
- {value: 24, name: 'rose 4'},
|
|
|
- {value: 22, name: 'rose 5'},
|
|
|
- {value: 20, name: 'rose 6'},
|
|
|
- {value: 18, name: 'rose 7'},
|
|
|
- {value: 16, name: 'rose 8'}
|
|
|
+ {value: 25, name: 'rose 2'},
|
|
|
+ {value: 22, name: 'rose 3'},
|
|
|
+ {value: 20, name: 'rose 4'},
|
|
|
+ {value: 16, name: 'rose 5'},
|
|
|
+ {value: 10, name: 'rose 6'},
|
|
|
+
|
|
|
]
|
|
|
}
|
|
|
]
|
|
@@ -1131,7 +1467,7 @@ const indexValue = [
|
|
|
echartIndexChange(val){
|
|
|
console.log(`Selected: ${val}`);
|
|
|
let type=this.handlerTypeOfIndex(val);
|
|
|
-
|
|
|
+ console.log(type)
|
|
|
this.initEchart('adPositionEchart',this.initAdpositionChart(type,[]))
|
|
|
this.initEchart('ageEchart',this.initAdpositionChart(type,[]))
|
|
|
this.initEchart('genderEchart',this.initAdpositionChart(type,[]))
|
|
@@ -1197,11 +1533,14 @@ const indexValue = [
|
|
|
|
|
|
|
|
|
handlerTypeOfIndex(val){
|
|
|
- return this.indexValue.map(item=>{
|
|
|
+ let type=''
|
|
|
+ this.indexValue.forEach(item=>{
|
|
|
if(item.value==val){
|
|
|
- return item.type
|
|
|
+ type= item.type
|
|
|
}
|
|
|
})
|
|
|
+
|
|
|
+ return type
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
@@ -1209,6 +1548,9 @@ const indexValue = [
|
|
|
this.initEchart('gaugeEchart',this.initGaugechart(30))
|
|
|
this.initEchart('newDataEchart',this.initNewDataChart())
|
|
|
this.initEchart('materialEchart',this.initMaterialChart())
|
|
|
+ this.initEchart('accountIndexEchart',this.initAccountIndexEchart('激活',[]))
|
|
|
+ this.echartIndexChange('cost')
|
|
|
+
|
|
|
})
|
|
|
|
|
|
},
|
|
@@ -1288,6 +1630,7 @@ const indexValue = [
|
|
|
<style lang="scss" scoped>
|
|
|
// #
|
|
|
.accountPage{
|
|
|
+
|
|
|
.echart{
|
|
|
margin-top: 30px;
|
|
|
}
|
|
@@ -1312,7 +1655,7 @@ const indexValue = [
|
|
|
}
|
|
|
.accountBodyRight{
|
|
|
width: 25%;
|
|
|
- flex-shrink: 0;
|
|
|
+ // flex-shrink: 0;
|
|
|
padding: 25px;
|
|
|
}
|
|
|
.accountBodyLeft,.accountBodyRight{
|
|
@@ -1370,20 +1713,83 @@ const indexValue = [
|
|
|
.top{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
+ padding-top: 8px;
|
|
|
}
|
|
|
.item{
|
|
|
width: 20%;
|
|
|
+ min-width: 100px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .todyCost{
|
|
|
+ font-size: 2em;
|
|
|
+ font-weight: 700;
|
|
|
+ color:#303133;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ }
|
|
|
+ .sign{
|
|
|
+ font-size: 18px;
|
|
|
+ .rise{
|
|
|
+ color: #F2637B;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ text-align: center;
|
|
|
+ // background-color: #F2637B;
|
|
|
+ // border-radius: 50%;
|
|
|
+ // color: white;
|
|
|
+ // font-size: 14px;
|
|
|
+ transform: rotate(-30deg);
|
|
|
+ }
|
|
|
+ .fall{
|
|
|
+ color: green;
|
|
|
+ }
|
|
|
+ .up{
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #F2637B;
|
|
|
+ border-radius: 5px;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .yesterdayCost{
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 500;
|
|
|
+ color:#303133;
|
|
|
+ margin-bottom:8px ;
|
|
|
+ }
|
|
|
+ .IndexName{
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 600;
|
|
|
+ color:#303133;
|
|
|
+ display: inline-block;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .IndexNameActive{
|
|
|
+ color:#2461F1;
|
|
|
+ }
|
|
|
+ .IndexNameActive::after{
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 15px;
|
|
|
+ height: 3px;
|
|
|
+ background: #2461F1;
|
|
|
+ position: relative;
|
|
|
+ top: 5px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -8px;
|
|
|
}
|
|
|
-
|
|
|
.showIndex{
|
|
|
position: absolute;
|
|
|
top: -5px;
|
|
|
right: 0px;
|
|
|
- font-size: 14px;
|
|
|
+ font-size: 12px;
|
|
|
cursor: pointer;
|
|
|
+ color: #909399;
|
|
|
}
|
|
|
.showIndex:hover{
|
|
|
- color:#1890ff
|
|
|
+ color:#2461F1
|
|
|
}
|
|
|
}
|
|
|
|