Ver código fonte

运营个人联调

liubei@c-top.com.cn 3 anos atrás
pai
commit
43cefa8643

+ 275 - 236
src/views/modules/stockWatch/modules/new-keepManage/account-newkeepManage.vue

@@ -5,7 +5,7 @@
                 <div style="display: flex;justify-content:space-around;margin: 25px;">
                     <div>
                         <p style="font-weight:900;font-size: 16px;">余额</p>
-                        <p>{{balance}}</p>
+                        <p>{{balance | formatNum}}</p>
                     </div>
                     <div>
                         <p style="font-weight:900;font-size: 16px;">投放状态</p>
@@ -13,13 +13,13 @@
                     </div>
                     <div>
                         <p style="font-weight:900;font-size: 16px;">今日消耗</p>
-                        <p>{{totalCost}}</p>
+                        <p>{{totalCost | formatNum}}</p>
                     </div>
                 </div>
 
             </a-col>
             <a-col :span="10" :pull="14">
-                <div style="margin:20px;">
+                <div style="margin:20px;" @click="changeAccount">
                     <p style="font-weight:900;font-size: 18px;">{{accountName}}</p>
                     <p>账户ID:{{accountId}}</p>
                 </div>
@@ -47,12 +47,20 @@
             </div>
             <a-row>
                 <a-col :span="8">
-                    <a-checkbox-group v-model="valueBtn" name="checkboxgroup" :options="plainOptions"
-                        @change="checkboxonChange" />
+                    <a-radio-group v-for="item in indexShowS" :key="item.key" v-model="valueBtn" @change="checkboxonChange">
+                        <a-radio :value="item.dataIndex">
+                          {{item.title}}
+                        </a-radio>
+                      </a-radio-group>
+                    <!-- <a-checkbox-group v-model="valueBtn" name="checkboxgroup" :options="plainOptions"
+                        @change="checkboxonChange" /> -->
 
                 </a-col>
                 <a-col :span="8" :offset="8">
-                    <p style="text-align: right;color: rgb(165, 165, 165);">显示指标</p>
+                    <a-button type="link" @click="indexShowClick" style="float: right;">
+                        显示指标
+                    </a-button>
+                    
                 </a-col>
             </a-row>
             <div id="accountIndexEchart" ref="accountIndexEchart" style="width: 90%;height: 315px;margin: 0 auto;">
@@ -81,7 +89,7 @@
             </div>
 
             <a-table size="middle" :dataSource="echartsData" :columns="columns" bordered id="outTable"
-                :pagination="false" :loading="echartsLoading" ref="accountTable" :scroll="{ x: scrollX }"
+                :pagination="false" :loading="echartsLoadingoutTable" ref="accountTable" :scroll="{ x: scrollX }"
                 v-if="outTableShow">
                 <!-- <span slot="status" slot-scope="text, record">
                     <a-switch :checked="text == 1"  @change="switchChange(text,record)"/>
@@ -94,6 +102,19 @@
                     </a-spin>
 
                 </span>
+                <span slot="operationAgree" slot-scope="text,record">
+                    <a-popover title="" trigger="hover" v-if="text">
+                        <template slot="content">
+                        <div style="width: 150px;margin-top: 10px;">{{record.operationAgreeInfo}}</div> 
+                        </template>
+                        <a href="javascript:;" type='primary'>{{text}}</a>
+                      </a-popover>
+                      <span v-else>-</span>
+                    <p style="height: 5px;line-height: 25px;color: rgb(157 157 157);">{{record.operationAgreeContent}}</p>
+                   
+                </span>
+
+
                 <span slot="operator" slot-scope="text,record">
 
                         <a href="javascript:;" type='primary' @click="modifyPriceClick(record)">调价</a>
@@ -156,11 +177,25 @@
             </div>
             <a-table size="middle" :dataSource="sourceMaterialData" :columns="sourceMaterial" bordered id="outTable"
                 :pagination="echartsIpagination" :loading="echartsLoading" ref="accountTable">
-                <span slot="unitvideoUrl" slot-scope="text, record">
+                <span slot="unitvideoUrl" slot-scope="text,record" >  
+                    <div style="background:#e8e8e8;text-align:center;border-radius:3px">
+                        <a-popover placement="right">
+                        <template slot="content">                                
+                            <video :src="record.videoUrl" style="width:250px" controls  ></video>
+                        </template>
+                        <template slot="title">                            
+                        </template>
+                       <span>图片</span>
+                    </a-popover>
+                    </div>                      
+                    
+                    
+                </span>
+                <!-- <span slot="unitvideoUrl" slot-scope="text, record">
                     <video class="video" :src="text" controls="controls" style="height:200px">
                         您的浏览器不支持 video 标签。
                     </video>
-                </span>
+                </span> -->
             </a-table>
         </a-card>
 
@@ -171,16 +206,16 @@
         <a-card class="card-content echarts-card">
             <a-row>
                 <a-col :span="12">
-                    <a-select v-model="selectValue" style="width:100px;" @change="selectValueChange">
-                        <a-select-option value="cost">花费</a-select-option>
-                        <a-select-option value="activationPrice">激活成本</a-select-option>
+                    <a-select v-model="selectValue" style="width:120px;" @change="selectValueChange">
+                        <a-select-option value="totalCost">花费</a-select-option> 
                         <a-select-option value="activation">激活数</a-select-option>
+                        <a-select-option value="activationPrice">激活成本</a-select-option>
                         <a-select-option value="eventPayRoi">ROI</a-select-option>
                         <a-select-option value="eventPay">付费次数</a-select-option>
+                        <a-select-option value="">付费金额</a-select-option>
                         <a-select-option value="eventPayCost">付费成本</a-select-option>
-                        <a-select-option value="eventPayPurchaseAmountFirstDay">首日付费金额</a-select-option>
-                        <a-select-option value="eventNextDayStay">次留数</a-select-option>
-                        <a-select-option value="leave">次留</a-select-option>
+                        <a-select-option value="nextDayOpen">次留数</a-select-option>
+                        <a-select-option value="nextDayOpenCost">次留成本</a-select-option>
                     </a-select>
                 </a-col>
                 <a-col :span="12">
@@ -190,15 +225,15 @@
             </a-row>
 
             <div style="display: flex;justify-content:space-around;margin-top: 20px;">
-
+                <div id="accountIndexEchartThreePie" ref="accountIndexEchartThreePie" style="width: 35%;height: 315px;border-right: 1px solid #ccc;">
+                </div>
                 <div id="accountIndexEchartOnePie" ref="accountIndexEchartOnePie"
                     style="width: 35%;height: 315px;border-right: 1px solid #ccc;"> </div>
 
                 <div id="accountIndexEchartTwoPie" ref="accountIndexEchartTwoPie"
-                    style="width: 35%;height: 315px;border-right: 1px solid #ccc;"> </div>
-
-                <div id="accountIndexEchartThreePie" ref="accountIndexEchartThreePie" style="width: 35%;height: 315px;">
-                </div>
+                    style="width: 35%;height: 315px;"> </div>
+                    
+               
 
             </div>
 
@@ -263,8 +298,17 @@
                 </a-row>
             </div>
         </a-modal>
+         <!-- 修改账户modal -->
+         <a-modal v-model="accountVisible" title="切换账户" @ok="accounthandleOk" :width='800' @cancel='accountCancel' >
+            <div class="linkBody" style='height:100px;display:flex;'>
+                <div style="height:32px;line-height:32px">选择账户:</div>
+                <Treeselect :appId.sync="selectaccountId" :multiple="false"  request="2,4"   ref="treeSelect" style="margin-bottom:8px;width:600px " />     
+            </div>
+        </a-modal>
         <customColumnProject :visible="visible" :listNum="listNum" :fiexColumn="columnsFixd" :mediaType="1"
             @closeCustomColumn="closeCustomColumn" @changeColumn="changeColumn" />
+            <customColumnProject :visible="visibleIndex" :listNum="listNumIndex" :fiexColumn="columnsFixdIndex" :mediaType="1"
+            @closeCustomColumn="closeCustomColumnIndex" @changeColumnIndex="changeColumnIndex" />
     </div>
 </template>
 
@@ -284,18 +328,24 @@
     require('echarts/lib/component/graphic');
     require('echarts/lib/component/toolbox');
     require('echarts/lib/component/legend');
+    import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
+    import { mapGetters } from 'vuex'
     export default {
-        components: { customColumnProject },
+        components: { customColumnProject, Treeselect},
         data() {
             return {
                 targetVisible: false,
+                accountVisible:false,
+                visibleIndex:false,
                 outTableShow: true,
                 modifyPriceVisible:false,
                 listNum: [],
+                listNumIndex:[],
                 visible: false,
                 scrollX: 1500,
                 columnsFixd: keepPersonData.groupDelivery(),
-                valueBtn: ['花费'],
+                columnsFixdIndex:keepPersonData.groupDeliveryIndexShow(),
+                valueBtn: 'cost',
                 plainOptions: [
                     { label: '花费', value: '花费' },
                     { label: '激活成本', value: '激活成本' },
@@ -307,11 +357,21 @@
                 dateEchart: [moment(), moment()],
                 dateRanges: keepPersonData.setTimeRange(),
                 dateSource: [moment(), moment()],
-                selectValue: 'cost',
+                selectValue: 'totalCost',
                 datePie: [moment(), moment()],
                 echartsData: [],
                 sourceMaterialData: [],
+                echartsLoadingoutTable:false,
                 echartsLoading: false,
+                indexShowS:[
+                {
+                        title: '消耗(元)',
+                        dataIndex: 'cost',
+                        key: 'cost',
+                        align: 'center',
+                        scopedSlots: { customRender: 'cost' },
+                    },
+                ],
                 columns: [
                     {
                         title: '状态操作',
@@ -355,6 +415,7 @@
                         dataIndex: 'operationAgree',
                         key: 'operationAgree',
                         align: 'center',
+                        scopedSlots: { customRender: 'operationAgree' },
 
                     }, {
                         title: '操作',
@@ -382,21 +443,25 @@
                         dataIndex: 'showNum',
                         key: 'showNum',
                         align: 'center',
+                        sorter: (a, b) => a.showNum - b.showNum,
                     }, {
                         title: '花费',
                         dataIndex: 'totalCost',
                         key: 'totalCost',
                         align: 'center',
+                        sorter: (a, b) => a.totalCost - b.totalCost,
                     }, {
                         title: '激活数',
                         dataIndex: 'activation',
                         key: 'activation',
                         align: 'center',
+                        sorter: (a, b) => a.activation - b.activation,
                     }, {
                         title: '激活成本',
                         dataIndex: 'activationPrice',
                         key: 'activationPrice',
                         align: 'center',
+                        sorter: (a, b) => a.activationPrice - b.activationPrice,
                     },
                     {
                         title: '上线时间',
@@ -449,7 +514,10 @@
                 updateRelated: '',
                 accountIndexEchartThreePieShow: true,
                 accountIndexEchartTwoPieShow: true,
+                accountIndexEchartThreePieShowemarks:true,
                 accountIndexEchartOnePieShow: true,
+                custNmaeType:'',
+                selectaccountId:'',
             }
         },
         filters: {
@@ -472,10 +540,19 @@
                     return '-'
                 }
 
-            }
+            },
+            formatNum: function (value) {
+                if (!value) {
+                    return '暂无数据'
+                } else if (value == '暂无数据') {
+                    return '暂无数据'
+                }
+                return Number(value).toFixed(3).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
+            },
         },
         mounted() {
             this.showColumn();
+            this.showIndex();
             // 获取折线图
             this.getQueryNewlyData();
             // 第一个饼图
@@ -485,13 +562,66 @@
             this.getAccountNameData();
             this.getGroupLaunchData();
             this.getEchartOnePieData();
-
+            console.log(localStorage.getItem('stockWatchAccountId'));
+            if(localStorage.getItem('stockWatchAccountId')) {
+                let data = JSON.parse(localStorage.getItem('stockWatchAccountId'));
+                this.accountId = data.accountId;
+                this.selectaccountId = data.accountId;
+                this.dateValue = [moment(data.timeRange[0]),moment(data.timeRange[1])];
+                
+            }
+            else {
+                console.log(1111);
+                getAction('/etl/reportAccountHourly/getMaxChargeAccountIdByUser',{                
+                    userId:this.userInfo().id,
+                }).then(res=>{
+                    if(res.success){
+                        // this.currentAccount=res.result;
+                        this.accountId=res.result;
+                        this.selectaccountId=res.result;
+                        
+                    }else{
+                        // this.$message.error(res.message)
+                       
+                    }
+                })
+            }
         },
 
         methods: {
+            ...mapGetters([ 'userInfo']),
+            accounthandleOk(){
+                this.accountVisible=false;
+                this.dateValue=[moment(),moment()];
+                this.materialDate=[moment().subtract(1,'days'),moment().subtract(1,'days')]
+                this.accountId=this.selectaccountId;
+                
+                this.getCurrentAccountInfo();
+            },
+            getCurrentAccountInfo(val){
+                getAction('/etl/reportAccountHourly/getMaxChargeAccountId',{
+                    accountId:val || this.accountId ||undefined,
+                   
+                }).then(res=>{
+                    if(res.success){
+                        this.currentAccount=res.result;
+                        // this.accountId=res.result.accountId
+                    }else{
+                        this.$message.error(res.message)
+                        this.currentAccount=res.result;
+                    }
+                })
+            },
+            accountCancel(){                
+                this.accountVisible=false;
+                
+            },
+            changeAccount(){
+                this.accountVisible=true;
+               
+            },
             modifyPriceClick(row){
                 // this.accountId = row.accountId
-console.log(row);
                         this.unitId = row.unit_id
                         console.log(this.unitId);
                         this.bidType = row.bidType
@@ -508,7 +638,7 @@ console.log(row);
                 postAction(`/kuaishou/batch/batchUpdateUnitStatus`, {
                     accountId: this.accountId,
                     unitIds: [record.unit_id],
-                    id: record.id,
+                    // id: record.id,
                     putStatus
                 }).then((res) => {
 
@@ -523,6 +653,11 @@ console.log(row);
 
 
             },
+            // 显示指标
+            indexShowClick(){
+                this.visibleIndex = true;
+                this.listNumIndex = [...this.indexShowS]
+            },
             // 自定义列
             customColumn() {
                 this.visible = true;
@@ -532,8 +667,57 @@ console.log(row);
             closeCustomColumn() {
                 this.visible = false
             },
-            showColumn() {
+            closeCustomColumnIndex(){
+                this.visibleIndex = false;
+            },
+            showIndex(){
                 this.postDataAction('/toutiao/videoReportDaily/getColumnJson', {
+                    columnType: 106,
+                }).then((res) => {
+                    // console.log(res)
+                    if (res.success) {
+                        // console.log(JSON.parse(res.result))
+                        if (res.result) {
+                            let columns = JSON.parse(res.result)
+                            if (columns.length) {
+                                if (columns.length >= this.columnsFixdIndex.length) {
+                                    columns.map((item, index) => {
+                                        if (index > this.columnsFixdIndex.length - 1) {
+                                            item.sorter = function (a, b) { }
+                                        }
+                                    })
+                                    columns = columns.slice(this.columnsFixdIndex.length)
+                                    this.indexShowS = [...this.columnsFixdIndex, ...columns]
+                                }
+
+                                // console.log(this.columns)
+                            }
+                        }
+
+                        this.changeColumnIndex(this.indexShowS)
+
+
+                    }
+                })
+            },
+            changeColumnIndex(val){
+                if (val.length > 4) {
+                  return  this.$message.warning('最多只可以选择4个指标');
+                }else{
+                    this.indexShowS = [...val]
+                let arr = JSON.stringify(this.indexShowS)
+                this.postDataAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
+                    json: arr,
+                    columnType: 106,
+                }).then((res) => {
+                    // console.log(res)
+                })
+                }
+                
+            },
+            showColumn() {
+               
+                    this.postDataAction('/toutiao/videoReportDaily/getColumnJson', {
                     columnType: 103,
                 }).then((res) => {
                     // console.log(res)
@@ -561,29 +745,20 @@ console.log(row);
 
                     }
                 })
+                
+                
             },
+            
             changeColumn(val) {
-                this.outTableShow = false;
-                console.log(val);
-                console.log(this.columns);
 
+                this.outTableShow = false;
                 val.forEach((item,index) => {
                     if (item.title == '操作') {
                         item.fixed = 'left'
                         item.width = 180
                     }
                 });
-                // this.columns = [...val]
-                // this.columns.push({
-                //     title: '操作',
-                //     dataIndex: 'operator',
-                //     key: 'operator',
-                //     align: 'center',
-                //     scopedSlots: { customRender: 'operator' },
-                //     fixed:'right',
-                //     width:180
-                // })
-
+               
                 this.$nextTick(() => {
                     this.columns = [...val]
                     if (this.columns.length > this.columnsFixd.length && this.columns.length < 8) {
@@ -649,7 +824,6 @@ console.log(row);
                     }
                     this.outTableShow = true;
                     let arr = JSON.stringify(this.columns)
-                console.log(arr);
                 this.postDataAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
                     json: arr,
                     columnType: 103,
@@ -657,7 +831,7 @@ console.log(row);
                     // console.log(res)
                 })
                 })
-               
+            
             },
             //获取echart折线图的值
             initEchart(idName, optionName) {
@@ -759,10 +933,12 @@ console.log(row);
                         } else {
                             centerTwo = 'center'
                             this.accountIndexEchartTwoPieShow = '暂无数据';
+
                         }
 
                         if (res.result.scene.length != 0) {
                             this.accountIndexEchartThreePieShow = '分版位数据';
+                            this.accountIndexEchartThreePieShowemarks = '数据与消耗存在一定误差';
                             centerthree = '';
                             for (var i = 0; i < res.result.scene.length; i++) {
                                 var obj = new Object();
@@ -792,11 +968,12 @@ console.log(row);
                         } else {
                             centerthree = 'center'
                             this.accountIndexEchartThreePieShow = '暂无数据';
+                            this.accountIndexEchartThreePieShowemarks = '';
                         }
 
                         this.initEchart('accountIndexEchartOnePie', this.initPieOneData(pieData, this.accountIndexEchartOnePieShow, center));
                         this.initEchart('accountIndexEchartTwoPie', this.initPieTwoData(pie2d, this.accountIndexEchartTwoPieShow, centerTwo));
-                        this.initEchart('accountIndexEchartThreePie', this.initPieThreeData(pie3p, this.accountIndexEchartThreePieShow, centerthree));
+                        this.initEchart('accountIndexEchartThreePie', this.initPieThreeData(pie3p, this.accountIndexEchartThreePieShow, centerthree,this.accountIndexEchartThreePieShowemarks));
 
 
 
@@ -814,6 +991,7 @@ console.log(row);
             },
             // 素材相关数据
             getGroupLaunchData() {
+                this.echartsLoading = true;
                 let params = {
                     accountId: this.accountId,
                     startTime: this.dateSource[0].format('YYYY-MM-DD'),
@@ -827,6 +1005,7 @@ console.log(row);
                         this.updateRelated = res.timestamp;
                         this.sourceMaterialData = res.result.list;
                         this.echartsIpagination.total = res.result.total;
+                        this.echartsLoading = false;
                     }
                 })
             },
@@ -838,7 +1017,7 @@ console.log(row);
                 this.echartsIpagination.current = 1;
                 this.getGroupLaunchData();
             },
-            checkboxonChange() {
+            checkboxonChange(e) {
                 this.getQueryNewlyData();
             },
             dateChange() {
@@ -860,6 +1039,7 @@ console.log(row);
             },
             // 获取组投放数据表格
             getGroupDataList() {
+                this.echartsLoadingoutTable = true;
                 let params = {
                     accountId: this.accountId,
                     pageNum: this.tablePag.pageNum,
@@ -876,6 +1056,7 @@ console.log(row);
                         this.updateTimeGroup = res.timestamp;
                         this.echartsData = res.result
                         this.totalAll = res.result[0].totalCount
+                        this.echartsLoadingoutTable = false;
                     }
                 })
             },
@@ -899,7 +1080,6 @@ console.log(row);
             },
             // 修改出价
             bidChangeOk(record) {
-                console.log(record);
                 if (this.newBid) {
                   this.modifyPriceVisible = false
                     // record.accountId = this.accountId;
@@ -918,7 +1098,7 @@ console.log(row);
 
                     })
                 } else {
-                    this.bidErrorMessage = '请正确填写出价'
+                    this.$message.warning('请正确填写出价');
                     // this.$message.error('请正确填写出价')
                 }
 
@@ -1003,6 +1183,7 @@ console.log(row);
                     accountId: this.accountId,
                     startTime: this.dateEchart[0].format('YYYY-MM-DD'),
                     endTime: this.dateEchart[1].format('YYYY-MM-DD'),
+                    type:this.valueBtn
                 }
                 getAction(process.env.VUE_APP_BASE_STARE_URL + '/kuaiShouOpreate/kuaiShouMaterialStareController/getKuaiShouAccountInfoBrokenLine', params).then(res => {
                     if (res.code == 0) {
@@ -1015,148 +1196,28 @@ console.log(row);
                                 return item.yHour
                             })
 
-
-                            if (this.valueBtn.indexOf('花费') != -1) {
                                 today.data = res.result.map(itemprice => {
-                                    return itemprice.tCost
+                                    return itemprice.tData
                                 });
-                                today.name = '花费(今天)'
+                                today.name = '今天'
                                 yesterday.data = res.result.map(itemyes => {
-                                    return itemyes.yCost
-                                });
-                                yesterday.name = '花费(昨天)'
-                            } else {
-                                today.data = [];
-                                today.name = '';
-                                yesterday.data = [];
-                                yesterday.name = '';
-                            }
-                            let activation = {};
-                            let activationyes = {};
-                            if (this.valueBtn.indexOf('激活成本') != -1) {
-                                activation.data = res.result.map(itemprice => {
-                                    return itemprice.tActivationPrice
-                                });
-                                activation.name = '激活成本(今天)'
-
-                                activationyes.data = res.result.map(itemyes => {
-                                    return itemyes.yActivationPrice
+                                    return itemyes.yData
                                 });
-                                activationyes.name = '激活成本(昨天)'
-                            } else {
-                                activation.data = [];
-                                activation.name = '';
-                                activationyes.data = [];
-                                activationyes.name = '';
-                            }
-                            let pay = {};
-                            let payyes = {};
-                            if (this.valueBtn.indexOf('新增付费成本') != -1) {
-                                pay.data = res.result.map(itemprice => {
-                                    return itemprice.tEventNewUserPayCost
-                                });
-                                pay.name = '新增付费成本(今天)'
-
-                                payyes.data = res.result.map(itemyes => {
-                                    return itemyes.yEventNewUserPayCost
-                                });
-                                payyes.name = '新增付费成本(昨天)'
-                            } else {
-                                pay.data = [];
-                                pay.name = '';
-                                payyes.data = [];
-                                payyes.name = '';
-                            }
-                            let Secondary = {};
-                            let Secondaryyes = {};
-                            if (this.valueBtn.indexOf('次留率') != -1) {
-                                Secondary.data = res.result.map(itemprice => {
-                                    return itemprice.tLeave
-                                });
-                                Secondary.name = '次留率(今天)'
-
-                                Secondaryyes.data = res.result.map(itemyes => {
-                                    return itemyes.yLeave
-                                });
-                                Secondaryyes.name = '次留率(昨天)'
-                            } else {
-                                Secondary.data = [];
-                                Secondary.name = '';
-                                Secondaryyes.data = [];
-                                Secondaryyes.name = '';
-                            }
-
-
-
-
-                            this.initEchart('accountIndexEchart', this.initAccountIndexEchart(timeData, today, yesterday, activation, activationyes, pay, payyes, Secondary, Secondaryyes));
+                                yesterday.name = '昨天'
+                            this.initEchart('accountIndexEchart', this.initAccountIndexEchart(timeData, today, yesterday,this.valueBtn));
                         } else if (res.message == '账户日报折线图查询成功') {
                             let timeData = [];
+                            let today = {};
+                            let yesterday = {};
 
                             timeData = res.result.map(item => {
                                 return item.dateTime
                             })
-                            let today = {};
-                            let yesterday = {};
-                            let activation = {};
-                            let activationyes = {};
-                            if (this.valueBtn.indexOf('花费') != -1) {
-                                today.data = res.result.map(itemprice => {
-                                    return itemprice.cost
-                                });
-                                today.name = '花费'
-
-                            } else {
-                                today.data = [];
-                                today.name = '';
-
-                            }
-                            if (this.valueBtn.indexOf('激活成本') != -1) {
-                                yesterday.data = res.result.map(itemprice => {
-                                    return itemprice.activationPrice
-                                });
-                                yesterday.name = '激活成本'
-
-                            } else {
-                                yesterday.data = [];
-                                yesterday.name = '';
-
-                            }
-                            if (this.valueBtn.indexOf('新增付费成本') != -1) {
-                                activation.data = res.result.map(itemprice => {
-                                    return itemprice.eventNewUserPayCost
-                                });
-                                activation.name = '新增付费成本'
-
-                            } else {
-                                activation.data = [];
-                                activation.name = '';
-
-                            }
-                            if (this.valueBtn.indexOf('次留率') != -1) {
-                                activationyes.data = res.result.map(itemprice => {
-                                    return itemprice.leave
-                                });
-                                activationyes.name = '次留率'
-
-                            } else {
-                                activationyes.data = [];
-                                activationyes.name = '';
-
-                            }
-                            let pay = {};
-                            let payyes = {};
-                            let Secondary = {};
-                            let Secondaryyes = {};
-                            pay.name = '';
-                            pay.data = [];
-                            payyes.name = '';
-                            payyes.data = [];
-                            Secondary.name = '';
-                            Secondary.data = [];
-                            Secondaryyes.name = '';
-                            Secondaryyes.data = [];
-                            this.initEchart('accountIndexEchart', this.initAccountIndexEchart(timeData, today, yesterday, activation, activationyes, pay, payyes, Secondary, Secondaryyes));
+                            today.data = res.result.map(item => {
+                                return item.data
+                            })
+                            today.name = '汇总'
+                            this.initEchart('accountIndexEchart', this.initAccountIndexEchart(timeData, today, yesterday,this.valueBtn));
                         }
                     }
                 })
@@ -1167,11 +1228,14 @@ console.log(row);
             },
 
             // 折线图
-            initAccountIndexEchart(timeData, today, yesterday, activation, activationyes, pay, payyes, Secondary, Secondaryyes) {
+            initAccountIndexEchart(timeData, today, yesterday,valueBtn) {
+                console.log(valueBtn);
                 let option = {
 
                     tooltip: {
-                        trigger: 'axis'
+                        show : true,
+                        trigger: 'axis',
+                        formatter: valueBtn == 'eventPayRate' || valueBtn == 'leave' || valueBtn == 'eventNewUserPayRate'  || valueBtn == 'keyActionRate' ?'{b}<br/>{a0}: {c0}%<br />{a1}: {c1}%<br />':''
                     },
                     legend: {
                         bottom: '0%',
@@ -1229,58 +1293,7 @@ console.log(row);
                                 borderWidth: 2,
                                 borderColor: '#00FF00'
                             },
-                        }, {
-                            name: activation.name,
-                            type: 'line',
-                            smooth: true,
-                            symbol: 'circle',
-                            data: activation.data,
-
-
-                        },
-                        {
-                            name: activationyes.name,
-                            type: 'line',
-                            smooth: true,
-                            symbol: 'circle',
-                            data: activationyes.data,
-
-
-                        }, {
-                            name: pay.name,
-                            type: 'line',
-                            smooth: true,
-                            symbol: 'circle',
-                            data: pay.data,
-
-
-                        },
-                        {
-                            name: payyes.name,
-                            type: 'line',
-                            smooth: true,
-                            symbol: 'circle',
-                            data: payyes.data,
-
-
-                        }, {
-                            name: Secondary.name,
-                            type: 'line',
-                            smooth: true,
-                            symbol: 'circle',
-                            data: Secondary.data,
-
-
-                        },
-                        {
-                            name: Secondaryyes.name,
-                            type: 'line',
-                            smooth: true,
-                            symbol: 'circle',
-                            data: Secondaryyes.data,
-
-
-                        },
+                        }, 
 
                     ]
                 };
@@ -1290,6 +1303,7 @@ console.log(row);
             // 第一个饼图
             initPieOneData(pieData, accountIndexEchartOnePieShow, center) {
                 var iconNone = require('../../../../../assets/nodata.png');
+                const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A','#9E87FF']
                 let option = {
                     tooltip: {
                         trigger: 'item'
@@ -1337,6 +1351,12 @@ console.log(row);
                             labelLine: {
                                 show: false
                             },
+                            itemStyle: {
+                            borderRadius: 5,
+                            color: (params) => {
+                                return colorList[params.dataIndex]
+                            }
+                        },
                             data: pieData
                         }
                     ]
@@ -1345,6 +1365,7 @@ console.log(row);
             },
             initPieTwoData(pie2d, accountIndexEchartThreePieShow, centerthree) {
                 var iconNoneThree = require('../../../../../assets/nodata.png');
+                const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A','#9E87FF']
                 let option = {
                     tooltip: {
                         trigger: 'item'
@@ -1391,6 +1412,12 @@ console.log(row);
                             labelLine: {
                                 show: false
                             },
+                            itemStyle: {
+                            borderRadius: 5,
+                            color: (params) => {
+                                return colorList[params.dataIndex]
+                            }
+                        },
                             data: pie2d
                         }
                     ]
@@ -1398,8 +1425,9 @@ console.log(row);
                 return option
             },
 
-            initPieThreeData(pie3p, accountIndexEchartTwoPieShow, centerTwo) {
+            initPieThreeData(pie3p, accountIndexEchartTwoPieShow, centerTwo,accountIndexEchartThreePieShowemarks) {
                 var iconNoneTwo = require('../../../../../assets/nodata.png');
+                const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A','#9E87FF']
                 let option = {
                     tooltip: {
                         trigger: 'item'
@@ -1407,7 +1435,7 @@ console.log(row);
                     title: {
                         x: centerTwo,
                         y: centerTwo,
-                        text: accountIndexEchartTwoPieShow == '暂无数据' ? `{a| ${''}}` : accountIndexEchartTwoPieShow,
+                        text: accountIndexEchartTwoPieShow == '暂无数据' ? `{a| ${''}}` : accountIndexEchartTwoPieShow + `{b|${'  数据与消耗存在一定误差'}}`,
                         textStyle: {
                             rich: {
                                 a: {
@@ -1416,6 +1444,11 @@ console.log(row);
                                     backgroundColor: {
                                         image: iconNoneTwo,
                                     }
+                                },
+                                b: {
+                                   fontSize:12,
+                                   color:'#ccc'
+                                   
                                 }
                             }
 
@@ -1446,6 +1479,12 @@ console.log(row);
                             labelLine: {
                                 show: false
                             },
+                            itemStyle: {
+                            borderRadius: 5,
+                            color: (params) => {
+                                return colorList[params.dataIndex]
+                            }
+                        },
                             data: pie3p
                         }
                     ]

+ 1 - 0
src/views/modules/stockWatch/modules/new-keepManage/customColumnProject.vue

@@ -130,6 +130,7 @@
         this.visibleOk = false
         this.$emit('closeCustomColumn', false)
         this.$emit('changeColumn', this.mylistNum)
+        this.$emit('changeColumnIndex',this.mylistNum)
       },
       //取消按钮
       handleCancel() {

+ 2 - 2
src/views/modules/stockWatch/modules/new-keepManage/group-keepManage.vue

@@ -634,10 +634,10 @@
                 this.showColumn();
             },
             accountNameClick(row) {
-                // this.$router.push({ path: '/modules/stockWatch/modules/new-keepManage/account-newkeepManage', query: { accountId: row.accountId } })
+                this.$router.push({ path: '/modules/stockWatch/modules/new-keepManage/account-newkeepManage', query: { accountId: row.accountId } })
             },
             userNameClick(row) {
-                // this.$router.push({ path: '/modules/stockWatch/modules/new-keepManage/personal-keepManage', query: { userId: row.userId } })
+                this.$router.push({ path: '/modules/stockWatch/modules/new-keepManage/personal-keepManage', query: { userId: row.userId } })
             },
             // 运营组数据
             getOperationGroupData() {

+ 77 - 1
src/views/modules/stockWatch/modules/new-keepManage/new-keep-data.js

@@ -123,6 +123,82 @@
             
         ]
     }
+    setNoActionProjectColumns() {
+        return [
+            {
+                title: '账户名称',
+                dataIndex: 'accountName',
+                scopedSlots: { customRender: 'accountName' },
+                align: 'center',
+                key: 'date',
+                width: 200,
+                fixed: 'left',
+            },{
+                title: '账户ID',
+                dataIndex: 'accountId',
+                scopedSlots: { customRender: 'accountId' },
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+            },{
+                title: '预算',
+                dataIndex: 'warningAmount',
+                scopedSlots: { customRender: 'warningAmount' },
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+            },{
+                title: '余额',
+                dataIndex: 'balance',
+                scopedSlots: { customRender: 'balance' },
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+            },
+            {
+                title: '运营人员',
+                dataIndex: 'userName',
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+            },
+            {
+                title: '花费',
+                dataIndex: 'totalCost',
+                scopedSlots: { customRender: 'totalCost' },
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+                sorter: (a, b) => a.totalCost - b.totalCost,
+            },
+            {
+                title: '花费环比',
+                dataIndex: 'yearOnYear',
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+            },{
+                title: '花费同比',
+                dataIndex: 'equallyRate',
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+            },
+            
+        ]
+    }
+    groupDeliveryIndexShow(){
+        return[
+            {
+                title: '消耗(元)',
+                dataIndex: 'cost',
+                align: 'center',
+                scopedSlots: { customRender: 'cost' },
+                
+            }
+        ]
+    }
+    
     groupDelivery(){
         return [
             {
@@ -161,7 +237,7 @@
                     dataIndex: 'operationAgree',
                     key: 'operationAgree',
                     align: 'center',
-                     
+                    scopedSlots: { customRender: 'operationAgree' },
                     },{
                     title: '操作',
                     dataIndex: 'operator',

+ 654 - 91
src/views/modules/stockWatch/modules/new-keepManage/personal-keepManage.vue

@@ -1,71 +1,94 @@
+<style lang="less" scoped>
+    @import "../keep-manage/keep-manage.less";
+   .group-keep-ul li{
+   margin-bottom: 15px;
+   font-size: 16px;
+}
+</style>
+
 <template>
     <div>
         <a-row :gutter="24" style="margin-bottom: 20px;">
             <a-col :sm="18" :md="18" :xl="18" class="keep-manage-col">
                 <a-card class="card-content echarts-card">
                     <div slot="title">
-                        数据总览 更新时间:{{updateAccountEchart||'-'}}
+                        <span style="font-weight: bolder;">数据总览</span> 
                     </div>
                     <div class="person-content-title" slot="extra">
 
                         <div class="content-title-acount"></div>
                         <div class="content-title-checkout">
                             <span class="title-checkout-time">
-                                <a-range-picker v-model="dateEchart" :range="dateRanges" />
+                                <a-range-picker v-model="dateEchart" :range="dateRanges" @change="dateRangesChange"/>
                             </span>
                         </div>
                     </div>
-
-                    <div id="accountIndexEchart" ref="accountIndexEchart"
+                    <div v-if="yestadyNum == 1" id="accountIndexEchartDay" ref="accountIndexEchartDay"
+                    style="width: 90%;height: 315px;margin: 0 auto;">
+                    <a-empty />
+                    </div>
+                    <div v-else id="accountIndexEchart" ref="accountIndexEchart"
                     style="width: 90%;height: 315px;margin: 0 auto;">
                     <a-empty />
                     </div>
 
+                    
+                   
                 </a-card>
             </a-col>
 
             <a-col :sm="6" :md="6" :xl="6"  class="keep-manage-col">
-                <a-card title="运营个人数据" class="card-content">
+                <a-card  class="card-content">
+                    <div slot="title">
+                        <span style="font-weight: bolder;">运营个人数据</span> 
+                    </div>
                     <div style="width: 100%;height: 315px;">
                         <ul class="group-keep-ul">
                             <li>
-                                今日消耗: <span style="font-weight: bold;">21,233.958</span> 
+                                今日消耗: <span style="font-weight: bold;">{{todayCost | formatNum}}</span> 
                             </li>
                             <li>
-                                <span  style="margin-left:20%;" v-if="personData  < 0">
-                                    <img style=" width: 25px;height: 25px;" class="title-radio-img" src="@/assets/up.png" alt="">
-                                    <span style="color: green;">10%</span>
+                                <span style="margin-left:20%;" v-if="todayCompare.indexOf('-') == 0">
+                                    <img style=" width: 25px;height: 25px;" class="title-radio-img"
+                                        src="@/assets/greendown.png" alt="">
+                                    <span style="color: green;">{{todayCompare}}</span>
+
                                 </span>
-                                <span style="margin-left:20%;" v-else-if="personData>= 0">
-                                    <img style=" width: 25px;height: 25px;" class="title-radio-img" src="@/assets/down.png" alt="">
-                                    <span style="color: red;">10%</span>
+                                <span style="margin-left:20%;" v-else-if="todayCompare.indexOf('-') == -1">
+                                    <img style=" width: 25px;height: 25px;" class="title-radio-img"
+                                        src="@/assets/upred.png" alt="">
+                                    <span style="color: red;">{{todayCompare}}</span>
                                 </span>
+                               
                             </li>
                             <li>
-                                消耗:118,2335.112
+                               <span style="margin-left: 28px;">消耗: </span>{{timeCost  | formatNum}}
                             </li>
                             <li>
-                                <span>环比:</span>
-                                <span style="margin-left: 10%;" v-if="personData  < 0">
-                                    <img style=" width: 25px;height: 25px;" class="title-radio-img" src="@/assets/up.png" alt="">
-                                    <span style="color: green;">10%</span>
+                                <span style="margin-left: 28px;">环比:</span>
+                                <span  v-if="timeCompare.indexOf('-') == 0">
+                                    <img style=" width: 25px;height: 25px;" class="title-radio-img"
+                                        src="@/assets/greendown.png" alt="">
+                                    <span style="color: green;">{{timeCompare}}</span>
+
                                 </span>
-                                <span style="margin-left: 10%;" v-else-if="personData>= 0">
-                                    <img style=" width: 25px;height: 25px;" class="title-radio-img" src="@/assets/down.png" alt="">
-                                    <span style="color: red;">10%</span>
+                                <span v-else-if="timeCompare.indexOf('-') == -1">
+                                    <img style=" width: 25px;height: 25px;" class="title-radio-img"
+                                        src="@/assets/upred.png" alt="">
+                                    <span style="color: red;">{{timeCompare}}</span>
                                 </span>
                             </li>
                             <li>
-                                月消耗:12,520.525
+                                <span style="margin-left: 15px;">月消耗: </span>
                             </li>
                             <li>
-                                月激励:12,520.525
+                                <span style="margin-left: 15px;">月激励: </span>{{contractCharged  | formatNum}}
                             </li>
                             <li>
-                                月框返:12,520.525
+                                <span style="margin-left: 15px;">月框返: </span>{{directCharged  | formatNum}}
                             </li>
                             <li>
-                                团队内排名:1/86
+                                <span style="margin-left: -16px;">团队内排名: {{userIdRank}}/{{userRankTotalNum}}</span>
                             </li>
                         </ul>
                         
@@ -77,12 +100,15 @@
 
         <a-row :gutter="24">
             <a-col>
-                <a-card title="项目列表" >
+                <a-card >
+                    <div slot="title">
+                        <span style="font-weight: bolder;">{{titleName}}</span> 
+                    </div>
                     <div class="person-content-title" slot="extra">
                         <div class="content-title-acount"></div>
                         <div class="content-title-checkout">
                             <span style="margin-right: 20px;">
-                                <a-button type="link">
+                                <a-button type="link" @click="customColumn">
                                     自定义列
                                   </a-button>
                             </span>
@@ -90,10 +116,11 @@
                                 <a-range-picker
                                 v-model="dateMiddleProject"
                                 :ranges="dateRanges"
+                                @change="dateMiddleProjectChange"
                                 />
                             </span>
                             <span>
-                                <a-radio-group v-model="projectAccount" >
+                                <a-radio-group v-model="projectAccount" @change="projectAccountChange">
                                     <a-radio-button value="a">
                                       项目
                                     </a-radio-button>
@@ -114,17 +141,32 @@
                     :pagination="echartsIpaginationProject"
                     :loading="echartsLoading"
                     ref="accountTable"
-                    ></a-table>
+                    :scroll="{ x: scrollX }"
+                    @change="sort"
+                    >
+                    <span slot="leave" slot-scope="leave">{{leave | removalPercentage}}</span>
+                    <a slot="projectName" slot-scope="text,record" @click="projectNameClick(record)">{{ text }}</a>
+                    <a slot="accountName" slot-scope="text,record" @click="accountNameClick(record)">{{ text }}</a>
+                </a-table>
 
                 </a-card>
             </a-col>
         </a-row>
+        <customColumnProject
+        :visible="visible"
+        :listNum="listNum"
+        :fiexColumn="columnsFixd"
+        :mediaType="2"
+        @closeCustomColumn="closeCustomColumn"
+        @changeColumn="changeColumn"
+    />
     </div>
 </template>
 
 
 <script>
-    import keepPersonData from '../keep-manage/keep-manage-data.js';
+    import keepPersonData from './new-keep-data.js';
+    import customColumnProject from './customColumnProject.vue'
     import moment from 'moment';
     // 引入基本模板
     var echarts = require('echarts');
@@ -136,20 +178,36 @@
     require('echarts/lib/component/graphic');
     require('echarts/lib/component/toolbox');
     require('echarts/lib/component/legend');
+    import { mapGetters } from 'vuex'
     export default{
+        components:{customColumnProject},
         data() {
             return {
+                visible:false,
                 updateAccountEchart:'2021-12-22 8:00:00',
                 dateEchart:[moment(), moment()],
+                scrollX:1500,
                 dateRanges: keepPersonData.setTimeRange(),
                 personData:0,
+                columnsFixd:keepPersonData.setNoDeleteColumns(),
+                listNum:[],
                 dateMiddleProject:[moment(), moment()],
                 echartsDataProject:[],
+                queryUserId:this.$route.query.userId,
                 echartsLoading: false,
                 projectAccount:'a',
+                target: 'cost',
+                order: 'descend',
+                compare:'',
+                todayList:[],
+                yesterdayList:[],
+                timeData:[],
+                lengthData:[],
+                yestadyNum:1,
+                titleName:'项目列表',
                 echartsIpaginationProject:{
                 current: 1,
-                pageSize: 5,
+                pageSize: 10,
                 //   pageSizeOptions: ['10', '20', '30'],
                 showTotal: (total, range) => {
                 return range[0] + '-' + range[1] + ' 共' + total + '条'
@@ -169,62 +227,545 @@
                     {
                     title: '项目名称',
                     align: "center",
-                    dataIndex: ''
+                    dataIndex: 'projectName',
+                    scopedSlots: { customRender: 'projectName' },
                     },{
                     title: '账户数量',
                     align: "center",
-                    dataIndex: ''
+                    dataIndex: 'accountNum'
                     },{
-                    title: '运营人员',
+                    title: '运营人员数量',
                     align: "center",
-                    dataIndex: ''
+                    dataIndex: 'userNum'
                     },{
                     title: '花费',
                     align: "center",
-                    dataIndex: '',
-                    sorter: true,
+                    dataIndex: 'totalCost',
+                    sorter: (a, b) => a.totalCost - b.totalCost,
                     },{
                     title: '花费环比',
                     align: "center",
-                    dataIndex: ''
+                    dataIndex: 'rate'
                     },{
                     title: '花费同比',
                     align: "center",
-                    dataIndex: ''
+                    dataIndex: 'equallyRate'
                     },{
                     title: '上新素材数',
                     align: "center",
-                    dataIndex: ''
+                    dataIndex: 'newVideoNum'
                     },{
                     title: '有效素材数',
                     align: "center",
-                    dataIndex: ''
+                    dataIndex: 'newEffectNum'
                     },{
                     title: '爆款素材数',
                     align: "center",
-                    dataIndex: ''
+                    dataIndex: 'newHotNum'
                     },{
                     title: '激活数',
                     align: "center",
-                    dataIndex: ''
+                    dataIndex: 'activation'
                     },{
                     title: '激活单价',
                     align: "center",
-                    dataIndex: ''
+                    dataIndex: 'activationPrice'
                     },{
                     title: '行为数',
                     align: "center",
-                    dataIndex: ''
+                    dataIndex: 'keyActionCost'
                     },
-                ]
+                ],
+                todayCost:'',
+                timeCost:'',
+                todayCompare:'',
+                timeCompare:'',
+                contractCharged:'',
+                directCharged:'',
+                userRankTotalNum:'',
+                userIdRank:'',
             }
         },
+        filters:{
+            formatNum: function (value) {
+                if (!value) {
+                    return '暂无数据'
+                } else if (value == '暂无数据') {
+                    return '暂无数据'
+                }
+                return Number(value).toFixed(3).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
+            },
+        },
         mounted() {
+            this.showColumn()
             this.getQueryNewlyData();
+            this.personalData();
+            this.getItemList();
+
         },
         methods: {
+            ...mapGetters([ 'userInfo']),
+            // 个人数据
+            personalData(){
+                let params = {
+                    mediaType:2,
+                    userId:'',
+                    startTime: this.dateEchart[0].format('YYYY-MM-DD'),
+                    endTime: this.dateEchart[1].format('YYYY-MM-DD'),
+                }
+                if (this.queryUserId) {
+                    params.userId = this.queryUserId
+                }else{
+                    params.userId = this.userInfo().id
+                }
+                this.getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/kuaiShouOperateDateTotalPersonal',params).then(res=>{
+                    if (res.code == 0) {
+                        // 今日消耗
+                        console.log(res.result.todayCost);
+                        if (res.result.todayCost) {
+                            this.todayCost = res.result.todayCost
+                        }else{
+                            this.todayCost = '暂无数据'
+                        }
+                        // 今日环比
+                        if (res.result.todayCompare) {
+                            this.todayCompare = res.result.todayCompare;
+                        }else{
+                            this.todayCompare = '暂无数据'
+                        }
+                        // 时间段环比
+                        if(res.result.timeCompare){
+                            this.timeCompare = res.result.timeCompare;
+                        }else{
+                            this.timeCompare = '暂无数据'
+                        }
+                        // 框返
+                        if (res.result.directCharged) {
+                            this.directCharged = res.result.directCharged
+                        }else{
+                            this.directCharged = '暂无数据'
+                        }
+                        // 月激励
+                        if (res.result.contractCharged) {
+                            this.contractCharged = res.result.contractCharged
+                        }else{
+                            this.contractCharged = '暂无数据'
+                        }
+                        // 时间段消耗
+                        if(res.result.timeCost){
+                            this.timeCost = res.result.timeCost
+                        }else{
+                            this.timeCost = '暂无数据'
+                        }
+                        // 排名总数
+                        if(res.result.userRankTotalNum){
+                            this.userRankTotalNum = res.result.userRankTotalNum
+                        }else{
+                            this.userRankTotalNum = '暂无数据'
+                        }
+                        // 排名
+                        if(res.result.userIdRank){
+                            this.userIdRank = res.result.userIdRank;
+                        }else{
+                            this.userIdRank = '暂无数据'
+                        }
+                    }
+                })
+            },
+            // 项目列表
+            getItemList(){
+                this.echartsLoading = true;
+                let params = {
+                    startTime: this.dateMiddleProject[0].format('YYYY-MM-DD'),
+                    endTime: this.dateMiddleProject[1].format('YYYY-MM-DD'),
+                    userId:'',
+                    pageNum:this.echartsIpaginationProject.current,
+                    pageSize:this.echartsIpaginationProject.pageSize,
+                }
+                if (this.queryUserId) {
+                    params.userId = this.queryUserId
+                }else{
+                    params.userId = this.userInfo().id
+                }
+                this.getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/getKuaiShouOperateProjectInfo',params).then(res=>{
+                    if (res.code == 0) {
+                        this.echartsDataProject = res.result.list;
+                        this.echartsIpaginationProject.total = res.result.total;
+                        this.echartsLoading = false;
+                    }
+                })
+            },
+            getAccountData(){
+                let params = {
+                    startTime: this.dateMiddleProject[0].format('YYYY-MM-DD'),
+                    endTime: this.dateMiddleProject[1].format('YYYY-MM-DD'),
+                    userId:'',
+                    pageNum:this.echartsIpaginationProject.current,
+                    pageSize:this.echartsIpaginationProject.pageSize,
+                    projectId:this.projectId
+                }
+                if (this.queryUserId) {
+                    params.userId = this.queryUserId
+                }else{
+                    params.userId = this.userInfo().id
+                }
+                this.getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/getKuaiShouOperateAccountInfo',params).then(res=>{
+                    if (res.code == 0) {
+                        this.echartsDataProject = res.result.list;
+                        this.echartsIpaginationProject.total = res.result.total;
+                        this.echartsLoading = false;
+                    }
+                })
+            },
+            projectNameClick(row){
+                this.titleName = '账户列表'
+                this.echartsLoading = true;
+                this.columnsFixd = keepPersonData.setNoActionProjectColumns();
+                this.listNum = keepPersonData.setNoActionProjectColumns();
+                this.columnsProject=[
+                {
+                    title: '账户名称',
+                    align: "center",
+                    dataIndex: 'accountName',
+                    scopedSlots: { customRender: 'accountName' },
+                    }, {
+                    title: '运营人员名称',
+                    align: "center",
+                    dataIndex: 'userName'
+                    },{
+                title: '预算',
+                dataIndex: 'warningAmount',
+                scopedSlots: { customRender: 'warningAmount' },
+                align: 'center',
+            },{
+                title: '余额',
+                dataIndex: 'balance',
+                scopedSlots: { customRender: 'balance' },
+                align: 'center',
+            }, {
+                    title: '花费',
+                    align: "center",
+                    dataIndex: 'totalCost'
+                    }, {
+                    title: '花费环比',
+                    align: "center",
+                    dataIndex: 'yearOnYear',
+                    }, {
+                    title: '花费同比',
+                    align: "center",
+                    dataIndex: 'equallyRate',
+                    },
+                    
+                ],
+                this.projectId = row.projectId;
+                this.echartsIpaginationProject.current = 1;
+                this.getAccountData();
+                this.projectAccount = 'b';
+            },
+            accountNameClick(row){
+                this.$router.push({path:'/modules/stockWatch/modules/new-keepManage/account-newkeepManage',query:{accountId:row.accountId}})
+            },
+            sort(pagination, filters, sorter, { currentDataSource }){
+                this.echartsLoading = true;
+                
+            // console.log(pagination, filters, sorter)          
+            this.echartsIpaginationProject.current=pagination.current
+            this.echartsIpaginationProject.pageSize=pagination.pageSize
+            if (this.projectAccount == 'a') {
+            //     if (sorter.order) {
+            //     this.order = sorter.order ? sorter.order : 'descend'
+            //     this.target = sorter.columnKey
+            //     this.getItemList({ target: sorter.columnKey, order: sorter.order ? sorter.order : 'descend' })
+            // }
+            this.getItemList();
+                console.log(sorter);
+            }else{
+                this.getAccountData();
+            }
+            
+            
+        },
+        dateMiddleProjectChange(){
+                this.echartsLoading = true;
+                this.echartsIpaginationProject.current = 1;
+                if (this.projectAccount == 'a') {
+                    this.getItemList()
+                }else{
+                    this.getAccountData();
+                }
+            },
+        projectAccountChange(ent){
+                this.echartsLoading = true;
+                if (ent.target.value == 'a') {
+                    this.titleName = '项目列表'
+                    this.columnsFixd = keepPersonData.setNoDeleteColumns();
+                    this.listNum = keepPersonData.setNoDeleteColumns();
+                    this.projectId = '';
+                    this.columnsProject = [
+                {
+                    title: '项目名称',
+                    align: "center",
+                    dataIndex: 'projectName',
+                    scopedSlots: { customRender: 'projectName' },
+                    }, {
+                    title: '账户数量',
+                    align: "center",
+                    dataIndex: 'accountNum'
+                    }, {
+                    title: '运营人员数量',
+                    align: "center",
+                    dataIndex: 'userNum',
+                    }, {
+                    title: '花费',
+                    align: "center",
+                    dataIndex: 'totalCost'
+                    }, {
+                    title: '花费环比',
+                    align: "center",
+                    dataIndex: 'yearOnYear',
+                    }, {
+                    title: '花费同比',
+                    align: "center",
+                    dataIndex: 'equallyRate',
+                    }, {
+                    title: '上新素材数',
+                    align: "center",
+                    dataIndex: 'newVideoNum',
+                    },{
+                    title: '爆款素材数',
+                    align: "center",
+                    dataIndex: 'newHotNum',
+                    },{
+                    title: '有效素材数',
+                    align: "center",
+                    dataIndex: 'newEffectNum',
+                    },{
+                    title: '激活数',
+                    align: "center",
+                    dataIndex: 'activation',
+                    },
+                    {
+                    title: '激活单价',
+                    align: "center",
+                    dataIndex: 'activationPrice',
+                    },{
+                    title: '行为数',
+                    align: "center",
+                    dataIndex: 'keyActionCost'
+                    },
+                ],
+                this.echartsIpaginationProject.current = 1;
+                    this.getItemList()
+                }else{
+                    this.titleName = '账户列表';
+                    this.columnsFixd = keepPersonData.setNoActionProjectColumns();
+                    this.listNum = keepPersonData.setNoActionProjectColumns();
+                    console.log(this.columnsFixd);
+                    this.columnsProject=[
+                {
+                    title: '账户名称',
+                    align: "center",
+                    dataIndex: 'accountName',
+                    scopedSlots: { customRender: 'accountName' },
+                    }, {
+                    title: '运营人员名称',
+                    align: "center",
+                    dataIndex: 'userName'
+                    },{
+                title: '预算',
+                dataIndex: 'warningAmount',
+                scopedSlots: { customRender: 'warningAmount' },
+                align: 'center',
+            },{
+                title: '余额',
+                dataIndex: 'balance',
+                scopedSlots: { customRender: 'balance' },
+                align: 'center',
+            }, {
+                    title: '花费',
+                    align: "center",
+                    dataIndex: 'totalCost'
+                    }, {
+                    title: '花费环比',
+                    align: "center",
+                    dataIndex: 'yearOnYear',
+                    }, {
+                    title: '花费同比',
+                    align: "center",
+                    dataIndex: 'equallyRate',
+                    },
+                    
+                ],
+                this.echartsIpaginationProject.current = 1;
+                    this.getAccountData();
+                }
+                this.showColumn();
+            },
+                        // 自定义列
+                customColumn(){
+                this.visible = true;
+                this.listNum = [...this.columnsProject]
+            },
+             //自定义列相关
+             closeCustomColumn() {
+            this.visible = false
+            },
+            showColumn() {
+            this.postDataAction('/toutiao/videoReportDaily/getColumnJson', {
+                columnType: this.projectAccount === 'a' ? 104 : 105,
+            }).then((res) => {
+                // console.log(res)
+                if (res.success) {
+                // console.log(JSON.parse(res.result))
+                if (res.result) {
+                    let columns = JSON.parse(res.result)
+                    console.log(columns);
+                    if (columns.length) {
+                    if (columns.length >= this.columnsFixd.length) {
+                        columns.map((item, index) => {
+                        if (index > this.columnsFixd.length - 1) {
+                            item.sorter = function (a, b) {}
+                        }
+                        })
+                        columns = columns.slice(this.columnsFixd.length)
+                        this.columnsProject = [...this.columnsFixd, ...columns]
+                    }
+
+                    // console.log(this.columns)
+                    }
+                }
+
+                this.changeColumn(this.columnsProject)
+                }
+            })
+        },
+        changeColumn(val) {
+            this.columnsProject = [...val]
+            if (this.columnsProject.length > this.columnsFixd.length && this.columnsProject.length < 8) {
+                this.columnsProject.forEach((element, index) => {
+                if (index < this.columnsProject.length - 1) {
+                   
+                    element.width = 'auto'
+                    element.fixed = false
+                    
+                }
+                })
+
+                this.scrollX = 0
+            } 
+            else if (this.columnsProject.length > 8) {
+                this.columnsProject.forEach((element, index) => {
+                        if (index < this.columnsFixd.length) {
+                            if (element.dataIndex == 'accountNum') {
+                                element.width = 100
+                                element.fixed = 'left'
+                            } else if (element.dataIndex == 'userNum') {
+                                element.width = 100
+                                element.fixed = 'left'
+                            } else if (element.dataIndex == 'yearOnYear') {
+                                element.width = 100
+                                element.fixed = 'left'
+                            } else if (element.dataIndex == 'equallyRate') {
+                                element.width = 100
+                                element.fixed = 'left'
+                            } else {
+                                element.width = 150
+                                element.fixed = 'left'
+                            }
+
+                        }else if (this.columnsProject.length == this.columnsFixd.length) {
+                    this.columnsProject.forEach((element, index) => {
+                        element.width = 'auto';
+                        element.fixed = false;
+                    })
+                    this.scrollX = false
+                }else{
+                            element.width = 'auto';
+                            element.fixed = false
+                        }
+                    })
+                    
+                    this.scrollX = 1000 + 150 * (this.columnsProject.length - this.columnsFixd.length)
+            } 
+            else {
+                this.scrollX = 0
+                this.columnsProject.forEach((element) => {
+
+                    element.width = 'auto'
+                    element.fixed = false
+                    
+                })
+            }
+
+            let arr = JSON.stringify(this.columnsProject)
+            this.postDataAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
+                json: arr,
+                columnType: this.projectAccount === 'a' ? 104 : 105,
+            }).then((res) => {
+                // console.log(res)
+            })
+        },
             getQueryNewlyData(){
-                this.initEchart('accountIndexEchart',this.initAccountIndexEchart())
+                let params = {
+                    startTime: this.dateEchart[0].format('YYYY-MM-DD'),
+                    endTime: this.dateEchart[1].format('YYYY-MM-DD'),
+                    mediaType:2,
+                    userId:''
+                }
+                if (this.queryUserId) {
+                    params.userId = this.queryUserId
+                }else{
+                    params.userId = this.userInfo().id
+                }
+                this.getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/kuaiShousumDataPersonal',params).then(res=>{
+                    if (res.code == 0) {
+                        if (res.message == '查询运营个人-时报-汇总。') {
+                            
+                            this.todayList = res.result.todayList.map((item) => {
+                                return item.totalCost
+                            })
+                            this.yesterdayList = res.result.yesterdayList.map((item) => {
+                                return item.totalCost
+                            })
+
+                           
+                            this.timeData = res.result.yesterdayList.map((itemdate) => {
+                                return itemdate.hour
+                            })
+                            this.lengthData = ['今天', '昨天'];
+                            this.initEchart('accountIndexEchartDay', this.initAccountIndexEchartDay(this.todayList, this.yesterdayList, this.timeData,this.lengthData))
+                        }else if(res.message == '查询运营个人-日报-汇总成功。'){
+                           
+                            this.todayList = res.result.map((item) => {
+                                return item.totalCost
+                            })
+                            this.timeData = res.result.map((itemdate) => {
+                                return itemdate.dateTime
+                            })
+                            this.yesterdayList = [];
+                            this.lengthData = ['消耗汇总'];
+                           
+                            let series = {
+                                    name: '消耗汇总',
+                                    type: 'line',
+                                    smooth: true,
+                                    symbol: 'circle',
+                                    data: this.todayList
+                                };
+                            this.initEchart('accountIndexEchart', this.initAccountIndexEchart(this.todayList, this.yesterdayList, this.timeData,this.lengthData,series))
+                        }
+                       
+                    }
+                })
+                // this.initEchart('accountIndexEchart',this.initAccountIndexEchart())
+            },
+            dateRangesChange(e){
+                if (this.dateEchart[0].format('YYYY-MM-DD') ==this.dateEchart[1].format('YYYY-MM-DD')) {
+                    this.yestadyNum = 1
+                }else{
+                    this.yestadyNum = 2
+                }
+                this.getQueryNewlyData();
             },
                //获取echart的值
             initEchart(idName, optionName) {
@@ -246,7 +787,7 @@
                 }
             },
              //趋势图echarts配置
-             initAccountIndexEchart() {
+             initAccountIndexEchart(todayList,yesterdayList, timeData,lengthData,series) {
                 // this.clientWidth  =  document.documentElement.clientWidth - 224
                 // var myChart = echarts.init(document.getElementById('accountIndexEchart'))
                 let option = {
@@ -255,7 +796,7 @@
                         trigger: 'axis'
                     },
                     legend: {
-                        data: ['today','yesterday']
+                        data: lengthData
                     },
                     grid: {
                         left: '3%',
@@ -272,56 +813,78 @@
                     xAxis: {
                         type: 'category',
                         boundaryGap: false,
-                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                        data: timeData
                     },
                     yAxis: {
                         type: 'value'
                     },
-                    series: [
-                        {
-                            name: 'today',
-                            type: 'line',
-                            smooth: true,
-                            symbol: 'circle',
-                            data: [120, 132, 101, 134, 90, 230, 210],
-                            lineStyle: {                               
-                            color: '#00BFFF',   
-                            width: 2,
-                            },
-                            itemStyle:{
-                            color:'#00BFFF',
-                            borderWidth:2,
-                            borderColor:'#00BFFF'
-                            },
-                        },
-                        {
-                            name: 'yesterday',
-                            type: 'line',
-                            smooth: true,
-                            symbol: 'circle',
-                            data: [220, 182, 191, 234, 290, 330, 310],
-                            lineStyle: {                               
-                            color: '#00FF7F',   
-                            width: 2,
-                            },
-                            itemStyle:{
-                            color:'#00FF7F',
-                            borderWidth:2,
-                            borderColor:'#00FF00'
-                            },
-                        },
-                       
-                    ]
+                    series:series
                 };
                 return option
             },
+            initAccountIndexEchartDay(todayList,yesterdayList, timeData,lengthData){
+                let option = {
+                  
+                  tooltip: {
+                      trigger: 'axis'
+                  },
+                  legend: {
+                      data: lengthData
+                  },
+                  grid: {
+                      left: '3%',
+                      right: '4%',
+                      bottom: '3%',
+                      containLabel: true
+
+                  },
+                  // toolbox: {
+                  //     feature: {
+                  //         saveAsImage: {}
+                  //     }
+                  // },
+                  xAxis: {
+                      type: 'category',
+                      boundaryGap: false,
+                      data: timeData
+                  },
+                  yAxis: {
+                      type: 'value'
+                  },
+                  series:[{
+                                    name: '今天',
+                                    type: 'line',
+                                    smooth: true,
+                                    symbol: 'circle',
+                                    data: todayList,
+                                    lineStyle: {
+                                        color: '#00BFFF',
+                                        width: 2,
+                                    },
+                                    itemStyle: {
+                                        color: '#00BFFF',
+                                        borderWidth: 2,
+                                        borderColor: '#00BFFF'
+                                    },
+                                },{
+                                    name: '昨天',
+                                    type: 'line',
+                                    smooth: true,
+                                    symbol: 'circle',
+                                    data: yesterdayList,
+                                    lineStyle: {
+                                        color: '#00FF7F',
+                                        width: 2,
+                                    },
+                                    itemStyle: {
+                                        color: '#00FF7F',
+                                        borderWidth: 2,
+                                        borderColor: '#00FF00'
+                                    },
+                                }]
+              };
+              return option
+            },
         },
     }
 </script>
-<style lang="less" scoped>
-     @import "../keep-manage/keep-manage.less";
-    .group-keep-ul li{
-    margin-bottom: 15px;
-    font-size: 16px;
-}
-</style>