Переглянути джерело

盯盘运营经理页面,运营个人页面提交测试,代码提交备份

朱鑫波 4 роки тому
батько
коміт
9881fb5694

+ 2 - 2
src/utils/request.js

@@ -16,8 +16,8 @@ else if (process.env.NODE_ENV == 'debug') {
 else if (process.env.NODE_ENV == 'production') { 
   
   // axios.defaults.baseURL = 'http://192.168.1.251/jeecg-boot';
-  // axios.defaults.baseURL = 'http://139.186.165.84:8806/jeecg-boot';     
-  axios.defaults.baseURL = 'http://api.tjyourong.com.cn/jeecg-boot';
+  axios.defaults.baseURL = 'http://139.186.165.84:8806/jeecg-boot';     
+  // axios.defaults.baseURL = 'http://api.tjyourong.com.cn/jeecg-boot';
 }
 const service = axios.create({
 //   baseURL: '/jeecg-boot', // api base_url

+ 0 - 5
src/views/modules/Statistics/components/customColumn.vue

@@ -90,7 +90,6 @@ export default {
     },
     listNum: {
       handler(newValue, oldValue) {
-        console.log(newValue, oldValue)
         this.mylistNum = newValue
       },
       immediate: true
@@ -100,7 +99,6 @@ export default {
   methods: {
      //li展示里的关闭按钮 删除当前被选中的这一个列
     deleteCol(item, index) {
-      console.log(this.mylistNum, 'this.mylistNumthis.mylistNumthis.mylistNumthis.mylistNum');
       this.mylistNum = this.mylistNum.filter((item1, num) => {
         return num != index
       })
@@ -121,7 +119,6 @@ export default {
         return
       }
       const newItems = [...this.mylistNum]
-      console.log(newItems)
       const src = newItems.findIndex(v => v.dataIndex === this.dragging)
       const dst = newItems.findIndex(v => v.dataIndex === item)
 
@@ -196,7 +193,6 @@ export default {
             index = ind
           }
         })
-        console.log(index)
         this.mylistNum.splice(index, 1)
       } else {
         this.mylistNum.push(val)
@@ -204,7 +200,6 @@ export default {
     }
   },
   mounted() {
-    console.log(this.mylistNum, 'mylistNum');
   }
 }
 </script>

+ 21 - 13
src/views/modules/stockWatch/accountPage.vue

@@ -2294,19 +2294,27 @@ const columns=[
             //         this.accountPageSpinning=false 
             //     }
             // })
-            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;
-                    this.accountPageSpinning=false;
-                }else{
-                    // this.$message.error(res.message)
-                    this.accountPageSpinning=false; 
-                }
-            })
+            if(localStorage.getItem('stockWatchAccountId')) {
+                this.accountId = localStorage.getItem('stockWatchAccountId');
+                this.selectaccountId = localStorage.getItem('stockWatchAccountId');
+                this.accountPageSpinning = false;
+            }
+            else {
+                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;
+                        this.accountPageSpinning=false;
+                    }else{
+                        // this.$message.error(res.message)
+                        this.accountPageSpinning=false; 
+                    }
+                })
+            }
+            
          
         },
         filters:{

+ 262 - 0
src/views/modules/stockWatch/modules/keep-manage/keep-manage-data.js

@@ -0,0 +1,262 @@
+/**
+ * @file 盯盘基础展示数据
+ * @author zhuxinbo(zhuxinbo@c-top.com.cn)
+ */
+import moment from 'moment'
+class keepPersonServer {
+    constructor() {}
+
+    // 固定不可删除的列-账户
+    setNoDeleteColumns() {
+        return [
+            {
+                title: '账户名称',
+                dataIndex: 'authName',
+                scopedSlots: { customRender: 'authName' },
+                align: 'center',
+                key: 'date',
+                width: 200,
+                fixed: 'left',
+            },
+            {
+                title: '运营人员',
+                dataIndex: 'realname',
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+            },
+            {
+                title: '消耗',
+                dataIndex: 'cost',
+                scopedSlots: { customRender: 'cost' },
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+                sorter: () => {},
+            },
+            {
+                title: '余额',
+                dataIndex: 'totalBalance',
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+                sorter: () => {},
+            },
+            {
+                title: '预算',
+                dataIndex: 'budget',
+                width: 150,
+                tip: '广告在投放期间的花费总额',
+                align: 'center',
+                customRender: function (text) {
+                    if (text>0) {
+                        return text
+                    } else {
+                        return '不限制预算'
+                    }
+                },
+            }
+        ]
+    }
+
+    // 固定不可删除的列-项目
+    setNoDeleteProjectColumns() {
+        return [
+            {
+                title: '项目名称',
+                dataIndex: 'projectName',
+                scopedSlots: { customRender: 'projectName' },
+                align: 'center',
+                key: 'date',
+                width: 200,
+                fixed: 'left',
+            },
+            {
+                title: '账户数量',
+                dataIndex: 'accountCount',
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+            },
+            {
+                title: '运营人数',
+                dataIndex: 'userCount',
+                scopedSlots: { customRender: 'userCount' },
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+                sorter: () => {},
+            },
+            {
+                title: '花费',
+                dataIndex: 'cost',
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+                sorter: () => {},
+            }
+        ]
+    }
+
+    // 默认初始展示列
+    setDefaultColumns() {
+        return [
+            {
+                title: '封面曝光数',
+                dataIndex: 'photoShow',
+                tip: '广告在瀑布流被观看次数',
+                align: 'center',
+                scopedSlots: { customRender: 'photoShow' },
+                sorter: () => {},
+            },
+            {
+                title: '封面点击数',
+                dataIndex: 'photoClick',
+                tip: '用户点击封面进入视频播放页的次数(数据会进行反作弊去重)',
+                align: 'center',
+        
+                scopedSlots: { customRender: 'photoClick' },
+                sorter: () => {},
+            },
+            {
+                title: '封面点击率',
+                dataIndex: 'clickRate',
+                tip: '封面点击数占封面展示数百分比',
+                align: 'center',
+                scopedSlots: { customRender: 'clickRate' },
+                sorter: () => {},
+            },
+            {
+                title: '素材曝光数',
+                dataIndex: 'aClick',
+                tip: '用户进入视频播放页观看的次数(数据会进行反作弊去重)',
+                align: 'center',
+        
+                scopedSlots: { customRender: 'aClick' },
+                sorter: () => {},
+            },
+            {
+                title: '行为数',
+                dataIndex: 'bClick',
+                tip: '用户在视频播放页单击转化按钮的次数/展示数*100%',
+                align: 'center',
+        
+                scopedSlots: { customRender: 'bClick' },
+                sorter: () => {},
+            },
+        
+            {
+                title: '行为率',
+                dataIndex: 'bClickRate',
+                tip: '行为数占素材曝光数百分比',
+                align: 'center',
+                scopedSlots: { customRender: 'bClickRate' },
+                sorter: () => {},
+            },
+            {
+                title: '平均千次封面曝光花费(元)',
+                dataIndex: 'cpm',
+                tip: '花费/封面曝光数*1000',
+                align: 'center',
+                scopedSlots: { customRender: 'cpm' },
+                sorter: () => {},
+            },
+            {
+                title: '平均封面点击单价(元)',
+                dataIndex: 'cpc',
+                tip: '花费/封面点击数',
+                align: 'center',
+                scopedSlots: { customRender: 'cpc' },
+                sorter: () => {},
+            },
+            {
+                title: '平均行为单价(元)',
+                dataIndex: 'cpb',
+                tip: '总花费/行为数',
+                align: 'center',
+                scopedSlots: { customRender: 'cpb' },
+                sorter: () => {},
+            },
+        ]
+    }
+
+    //时间段筛选
+    setTimeRange() {
+        return {
+            昨天: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+            // 今天: [moment(), moment()],
+    
+            近三天: [moment().subtract(3, 'days'), moment().subtract(1, 'days')],
+            近一周: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
+            近14天: [moment().subtract(14, 'days'), moment().subtract(1, 'days')],
+            近一月: [moment().subtract(1, 'months'), moment().subtract(1, 'days')],
+            近半年: [moment().subtract(6, 'months'), moment().subtract(1, 'days')],
+            近一年: [moment().subtract(12, 'months'), moment().subtract(1, 'days')],
+        }
+    }
+
+    //运营人员表格字段
+    setOperateField() {
+        return  [
+            {
+                title: '运营人员',
+                dataIndex: 'realName',
+                scopedSlots: { customRender: 'realName' },
+                align: 'center',
+                key: 'date',
+                width: 100,
+            },
+            {
+                title: '账户数量',
+                dataIndex: 'accountCount',
+                align: 'center',
+                width: 100,
+            },
+            {
+                title: '消耗',
+                dataIndex: 'charge',
+                scopedSlots: { customRender: 'charge' },
+                align: 'center',
+                width: 150,
+            },
+            {
+                title: '本周消耗',
+                dataIndex: 'weekCharge',
+                align: 'center',
+                width: 150,
+            },
+            {
+                title: '消耗环比',
+                dataIndex: 'grew',
+                width: 150,
+                tip: '广告在投放期间的花费总额',
+                align: 'center',
+            },
+            {
+                title: '有效素材数',
+                dataIndex: 'effectiveCount',
+                width: 150,
+                tip: '广告在投放期间的花费总额',
+                align: 'center',
+            },
+            {
+                title: '新上计划数',
+                dataIndex: 'campaignCount',
+                width: 150,
+                tip: '广告在投放期间的花费总额',
+                align: 'center',
+            },
+            {
+                title: '新上组数',
+                dataIndex: 'unitCount',
+                width: 150,
+                tip: '广告在投放期间的花费总额',
+                align: 'center',
+            }
+        ]
+    }
+
+
+}
+
+export default new keepPersonServer();

+ 110 - 2
src/views/modules/stockWatch/modules/keep-manage/keep-manage.less

@@ -1,3 +1,111 @@
 .keep-manage-content {
-    
-}
+    /deep/ .keep-manage-col {
+        min-height: 300px;
+        margin-bottom: 20px;
+    }
+    .keep-person-content {
+        .person-content-title {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 60px;
+            background: #fff;
+            padding: 0 20px;
+            .content-title-acount {
+                font-size: 20px;
+            }
+            .content-title-checkout {
+                .title-checkout-custom {
+                    cursor: pointer;
+                }
+                .title-checkout-time {
+                    margin-left: 20px;
+                }
+            }
+        }
+        .pagin-table-class {
+            display: flex;
+            justify-content: flex-end;
+            margin-top: 20px;
+        }
+    }
+    .title-checkout-select {
+        /deep/ .ant-select-enabled {
+            width: 150px;
+            margin-left: 10px;
+        }
+        
+    }
+    .accountIndexEchart {
+        width:100%;
+        height:260px;
+        margin:0 auto;
+    }
+    .card-content {
+        min-height: 400px;
+        max-height: 400px;
+        h2 {
+            display: flex;
+            justify-content: space-between;
+            .no-person {
+                color: rgb(0,153,255);
+                font-size: 36px;
+                font-weight: bold;
+            }
+        }
+        h1 {
+            text-align: center;
+            font-size: 40px;
+        }
+        .header-left-title {
+            height: 50px;
+            line-height: 50px;
+            font-size: 20px;
+            .left-title-radio {
+                margin-left: 30px;
+                color: #1afa29;
+                .title-radio-img {
+                    width: 25px;
+                    height: 25px;
+                    margin-bottom: 5px;
+                    margin-right: 5px;
+                }
+            }
+            .left-title-radio-down {
+                margin-left: 30px;
+                color: #d81e06;
+                .title-radio-img {
+                    width: 25px;
+                    height: 25px;
+                    margin-bottom: 5px;
+                    margin-right: 5px;
+                }
+            }
+        }
+        .header-left-title-else {
+            font-size: 16px;
+            display: flex;
+            line-height: 30px;
+            .title-label {
+                width: 100px;
+                text-align: right;
+                margin-right: 30px;
+            }
+        }
+    }
+    .between-row {
+        margin-bottom: 20px;
+    }
+}
+
+#outTable {
+    /deep/ .ant-table-header-column {
+        word-break: break-all; 
+        font-size: 14px; 
+        font-weight: 600
+    }
+   
+}
+/deep/ .ant-card-extra {
+    padding: 0!important;
+}

+ 721 - 2
src/views/modules/stockWatch/modules/keep-manage/keep-manage.vue

@@ -1,11 +1,730 @@
 <template>
     <div class="keep-manage-content">
-        这个是运营经理的页面
+        <a-spin :spinning="accountPageSpinning">
+            <a-row :gutter="24">
+                <a-col :sm="18" :md="18" :xl="18" class="keep-manage-col">
+                    <a-card title="运营人员" class="card-content">
+                        <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"
+                                    :ranges="dateRanges"
+                                    :disabled-date="disabledDate"
+                                    @change="setDataQuery"
+                                    />
+                                </span>
+                                <span class="title-checkout-select">
+                                    <a-select v-model="selectValue" @change="getQueryNewlyData">
+                                        <a-select-option value="charge">花费</a-select-option>
+                                        <a-select-option value="campaign">新上计划数</a-select-option>
+                                        <a-select-option value="unit">新上组数</a-select-option>
+                                    </a-select>
+                                </span>
+                            </div>
+                        </div>
+                        <div class="accountIndexEchart" id="accountIndexEchart" ref="accountIndexEchart" :style="{ width: (clientWidth / 24) * 18 - 48 - 24 + 'px' }">
+                            <a-empty  />
+                        </div>
+                    
+                    </a-card>
+                </a-col>
+                <a-col :sm="6" :md="6" :xl="6"  class="keep-manage-col">
+                    <a-card class="card-content" v-if="personData">
+                        <h2>
+                            <span>你好!{{personData.realName||'-'}}</span>
+                            <span class="no-person">NO.{{personData.rank||'-'}}</span>
+                        </h2>
+                        <div class="header-left-title">
+                            <span>今日消耗:</span>
+                            <span class="left-title-radio" v-if="personData && personData.grew >= 0">
+                                <img class="title-radio-img" src="@/assets/up.png" alt="">
+                                {{ personData.grew ? personData.grew + '%' : '-' }}
+                            </span>
+                            <!-- TODO 这个是下降的样式,后续优化  -->
+                            <span class="left-title-radio-down" v-else-if="personData && personData.grew < 0">
+                                <img class="title-radio-img" src="@/assets/down.png" alt="">
+                                {{personData.grew ? personData.grew + '%':'-'}}
+                            </span>
+                        </div>
+                        <h1><span v-if="personData">{{personData.charge | decimalsHandle}}</span><span v-else>-</span></h1>
+                        <div class="header-left-title-else">
+                            <span class="title-label">账户数:</span>
+                            <span>
+                                {{ personData.accouuntCount ? personData.accouuntCount : '-' }}
+                            </span>
+                        </div>
+                        <div class="header-left-title-else">
+                            <span class="title-label">本周消耗:</span>
+                            <span>
+                                {{ personData.weekCharge ? personData.weekCharge : '-' }}
+                            </span>
+                        </div>
+                        <div class="header-left-title-else">
+                            <span class="title-label">上周消耗:</span>
+                            <span>
+                                {{ personData.lweekCharge ? personData.lweekCharge : '-' }}
+                            </span>
+                        </div>
+                        <div class="header-left-title-else">
+                            <span class="title-label">周环比:</span>
+                            <span>
+                                {{ personData.weekGrew ? personData.weekGrew + '%':'-' }}
+                            </span>
+                        </div>
+                    </a-card>
+                </a-col>
+            </a-row>
+            <a-row :gutter="24" class="between-row">
+                <a-col>
+                    <a-card title="运营数据详情">
+                        <a-table
+                        size="middle"
+                        :dataSource="echartsData"
+                        bordered
+                        id="outTable"
+                        :pagination="echartsIpagination"
+                        :loading="echartsLoading"
+                        ref="accountTable"
+                        >
+                            <a-table-column key="realName" data-index="realName" title="运营人员" align="center"/>
+                            <a-table-column key="accountCount" data-index="accountCount" title="账户数量"  align="center"/>
+                            <a-table-column key="charge" data-index="charge" title="花费"  align="center"/>
+                            <a-table-column key="weekCharge" data-index="weekCharge"  align="center">
+                                <span slot="title">本周花费 
+                                    <a-tooltip>
+                                        <template slot="title">
+                                        最近本周(周一到周日)广告账户花费
+                                        </template>
+                                        <a-icon type="question-circle" />
+                                    </a-tooltip>
+                                </span>
+                            </a-table-column>
+                            <a-table-column key="grew" data-index="grew"  align="center">
+                                <span slot="title">花费环比 
+                                    <a-tooltip>
+                                        <template slot="title">
+                                        本周与上周的消耗环比
+                                        </template>
+                                        <a-icon type="question-circle" />
+                                    </a-tooltip>
+                                </span>
+                            </a-table-column>
+                            <a-table-column key="effectiveCount" data-index="effectiveCount" title="有效素材数"  align="center"/>
+                            <a-table-column key="campaignCount" data-index="campaignCount"  align="center">
+                                <span slot="title">新上计划数 
+                                    <a-tooltip>
+                                        <template slot="title">
+                                        显示数据为昨日新建计划数
+                                        </template>
+                                        <a-icon type="question-circle" />
+                                    </a-tooltip>
+                                </span>
+                            </a-table-column>
+                            <a-table-column key="unitCount" data-index="unitCount"  align="center">
+                                <span slot="title">新上组数 
+                                    <a-tooltip>
+                                        <template slot="title">
+                                        显示数据为昨日新建广告组数
+                                        </template>
+                                        <a-icon type="question-circle" />
+                                    </a-tooltip>
+                                </span>
+                            </a-table-column>
+                        </a-table>
+                    </a-card>
+                </a-col>
+            </a-row>
+            <a-card :title="typeValue === 'project' ? '项目列表' : '账户列表'">
+                <div class="keep-person-content" slot="extra">
+                    <div class="person-content-title">
+                        <div class="content-title-acount"></div>
+                        <div class="content-title-checkout">
+                            <span class="title-checkout-custom"><a @click="handleCustomClick">自定义列</a></span>
+                            <span class="title-checkout-time">
+                                <a-range-picker
+                                v-model="dateValue"
+                                :ranges="dateRanges"
+                                :disabled-date="disabledDate"
+                                @change="getPersonList()"
+                                />
+                            </span>
+                            <span class="title-checkout-time">
+                                <a-radio-group v-model="typeValue" @change="checkOutType">
+                                    <a-radio-button value="project">
+                                    项目
+                                    </a-radio-button>
+                                    <a-radio-button value="account">
+                                    账户
+                                    </a-radio-button>
+                                </a-radio-group>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <a-table
+                    size="middle"
+                    :columns="columns"
+                    :dataSource="dataSource"
+                    bordered
+                    id="outTable"
+                    :pagination="ipagination"
+                    :scroll="{ x: scrollX }"
+                    :loading="loading"
+                    ref="accountTable"
+                    @change="sort"
+                    v-if="showChange"
+                >
+                <!-- style="word-break: break-all; font-size: 16px; font-weight: 600" -->
+                    <a slot="projectName" slot-scope="text,records" @click="toAccount(records)">{{ text }}</a>
+                    <a slot="authName" slot-scope="text,records" @click="toDetail(records)">{{ text }}</a>
+                    <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
+                    <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
+                    <span slot="clickMaterial" slot-scope="clickMaterial">{{ clickMaterial | formatCurrency }}</span>
+                    <span slot="showMaterial" slot-scope="showMaterial">{{ showMaterial | formatCurrency }}</span>
+                    <span slot="convertMaterial" slot-scope="convertMaterial">{{ convertMaterial | formatCurrency }}</span>
+                    <span slot="play25FeedBreak" slot-scope="play25FeedBreak">{{ play25FeedBreak | formatCurrency }}</span>
+                    <span slot="play50FeedBreak" slot-scope="play50FeedBreak">{{ play50FeedBreak | formatCurrency }}</span>
+                    <span slot="play75FeedBreak" slot-scope="play75FeedBreak">{{ play75FeedBreak | formatCurrency }}</span>
+                    <span slot="play100FeedBreak" slot-scope="play100FeedBreak">{{ play100FeedBreak | formatCurrency }}</span>
+                    <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
+                    <span slot="downloadFinish" slot-scope="downloadFinish">{{ downloadFinish | formatCurrency }}</span>
+                    <span slot="downloadStart" slot-scope="downloadStart">{{ downloadStart | formatCurrency }}</span>
+                    <span slot="likeMaterial" slot-scope="likeMaterial">{{ likeMaterial | formatCurrency }}</span>
+                    <span slot="shareMaterial" slot-scope="shareMaterial">{{ shareMaterial | formatCurrency }}</span>
+                    <span slot="register" slot-scope="register">{{ register | formatCurrency }}</span>
+                    <span slot="follow" slot-scope="follow">{{ follow | formatCurrency }}</span>
+                    <span slot="formCount" slot-scope="formCount">{{ formCount | formatCurrency }}</span>
+                    <span slot="formCountCost" slot-scope="formCountCost">{{ formCountCost | decimalsHandle }}</span>
+                    <span slot="aClick" slot-scope="aClick">{{ aClick | formatCurrency }}</span>
+                    <span slot="photoShow" slot-scope="photoShow">{{ photoShow | formatCurrency }}</span>
+                    <span slot="photoClick" slot-scope="photoClick">{{ photoClick | formatCurrency }}</span>
+                    <span slot="bClick" slot-scope="bClick">{{ bClick | formatCurrency }}</span>
+                    <span slot="active" slot-scope="active">{{ active | formatCurrency }}</span>
+                    <span slot="submit" slot-scope="submit">{{ submit | formatCurrency }}</span>
+                    <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
+                    <span slot="eventCreditGrantLandingPage" slot-scope="eventCreditGrantLandingPage">{{
+                    eventCreditGrantLandingPage | formatCurrency
+                    }}</span>
+                    <span slot="submitCost" slot-scope="submitCost">{{ submitCost | decimalsHandle }}</span>
+                    <span slot="eventCreditGrantLandingPageCost" slot-scope="eventCreditGrantLandingPageCost">{{
+                    eventCreditGrantLandingPageCost | decimalsHandle
+                    }}</span>
+                    <span slot="submitRate" slot-scope="submitRate">{{ submitRate | toPercentage }}</span>
+                    <span slot="eventCreditGrantLandingPageRate" slot-scope="eventCreditGrantLandingPageRate">{{
+                    eventCreditGrantLandingPageRate | toPercentage
+                    }}</span>
+                    <span slot="play25FeedBreakRate" slot-scope="play25FeedBreakRate">{{
+                    play25FeedBreakRate | toPercentage
+                    }}</span>
+                    <span slot="playOverRate" slot-scope="playOverRate">{{ playOverRate | toPercentage }}</span>
+
+                    <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
+                    <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
+                    <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
+                    <span slot="cpc" slot-scope="cpc">{{ cpc | decimalsHandle }}</span>
+                    <span slot="cpm" slot-scope="cpm">{{ cpm | decimalsHandle }}</span>
+                    <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
+                    <span slot="installFinishRate" slot-scope="installFinishRate">{{ installFinishRate | toPercentage }}</span>
+                    <span slot="validPlayRate" slot-scope="validPlayRate">{{ validPlayRate | toPercentage }}</span>
+                    <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | decimalsHandle }}</span>
+                    <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
+                    <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | decimalsHandle }}</span>
+                    <span slot="activeCost" slot-scope="activeCost">{{ activeCost | decimalsHandle }}</span>
+                    <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
+                    <span slot="gameAddictionCost" slot-scope="gameAddictionCost">{{
+                    gameAddictionCost | decimalsHandle
+                    }}</span>
+                    <span slot="downloadFinishCost" slot-scope="downloadFinishCost">{{
+                    downloadFinishCost | decimalsHandle
+                    }}</span>
+                    <span slot="downloadStartCost" slot-scope="downloadStartCost">{{
+                    downloadStartCost | decimalsHandle
+                    }}</span>
+                    <span slot="installFinishCost" slot-scope="installFinishCost">{{
+                    installFinishCost | decimalsHandle
+                    }}</span>
+                    <span slot="convertCost" slot-scope="convertCost">{{ convertCost | decimalsHandle }}</span>
+
+                    <span slot="downloadStartRate" slot-scope="downloadStartRate">{{ downloadStartRate | toPercentage }}</span>
+                    <span slot="downloadFinishRate" slot-scope="downloadFinishRate">{{
+                    downloadFinishRate | toPercentage
+                    }}</span>
+                    <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
+                    <span slot="activeRegisterRate" slot-scope="activeRegisterRate">{{
+                    activeRegisterRate | toPercentage
+                    }}</span>
+                    <span slot="gameAddictionRate" slot-scope="gameAddictionRate">{{ gameAddictionRate | toPercentage }}</span>
+                    <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
+                </a-table>
+            </a-card>
+        </a-spin>
+        <customColumn
+            :visible="visible"
+            :listNum="listNum"
+            :fiexColumn="columnsFixd"
+            :mediaType="2"
+            @closeCustomColumn="closeCustomColumn"
+            @changeColumn="changeColumn"
+        />
     </div>
 </template>
 <script>
+import customColumn from '@/views/modules/Statistics/components/customColumn.vue'
+import keepPersonData from './keep-manage-data';
+import { mapGetters } from 'vuex';
+import moment from 'moment';
+// 引入基本模板
+var echarts = require('echarts');
+// 引入柱状图组件
+require('echarts/lib/chart/line');
+// 引入提示框和title组件
+require('echarts/lib/component/tooltip');
+require('echarts/lib/component/title');
+require('echarts/lib/component/graphic');
+require('echarts/lib/component/toolbox');
+require('echarts/lib/component/legend');
 export default {
-    name: 'keep-manage'
+    name: 'keep-manage',
+    components: {
+        customColumn
+    },
+    data() {
+        return {
+            accountPageSpinning: false,
+            typeValue: 'project',
+            selectValue: 'charge',
+            loading: false,
+            totalAll: 100,
+            projectId: null,
+            dataSource: [],
+            showChange: true,
+            url: '/etl/reportAccountHourly/projectList',
+            listNum: [],
+            visible: false,
+            columns: [...keepPersonData.setNoDeleteProjectColumns() , ...keepPersonData.setDefaultColumns()],
+            echartsColumns: [...keepPersonData.setOperateField()],
+            echartsData: [],
+            columnsFixd: keepPersonData.setNoDeleteProjectColumns(),
+            scrollX: 1500,
+            personData: null,
+            dateEchart: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
+            dateValue: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
+            dateRanges: keepPersonData.setTimeRange(),
+            target: 'cost',
+            order: 'descend',
+            clientWidth: 0,
+            ipagination: {
+                current: 1,
+                pageSize: 10,
+                //   pageSizeOptions: ['10', '20', '30'],
+                showTotal: (total, range) => {
+                return range[0] + '-' + range[1] + ' 共' + total + '条'
+                },
+                showQuickJumper: true,
+                // showSizeChanger: true,
+                // pageSizeOptions: ['10', '30', '50'],
+                total: 0,
+                onChange: (current, pageSize) => {
+                    // 切换分页时的回调,
+                    // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
+                    this.ipagination.current = current
+                    this.ipagination.pageSize = pageSize
+                },
+            },
+            echartsLoading: false,
+            echartsIpagination: {
+                current: 1,
+                pageSize: 5,
+                //   pageSizeOptions: ['10', '20', '30'],
+                showTotal: (total, range) => {
+                return range[0] + '-' + range[1] + ' 共' + total + '条'
+                },
+                showQuickJumper: true,
+                // showSizeChanger: true,
+                // pageSizeOptions: ['10', '30', '50'],
+                total: 0,
+                onChange: (current, pageSize) => {
+                    // 切换分页时的回调,
+                    // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
+                    this.echartsIpagination.current = current
+                    this.echartsIpagination.pageSize = pageSize
+                },
+            },
+        }
+    },
+    methods: {
+        ...mapGetters(["userInfo"]),
+        
+        sort(pagination, filters, sorter, { currentDataSource }) {
+            // console.log(pagination, filters, sorter)
+            this.ipagination.current = pagination.current
+            this.ipagination.pageSize = pagination.pageSize
+            if (sorter.order) {
+                this.order = sorter.order ? sorter.order : 'descend'
+                this.target = sorter.columnKey
+                this.getPersonList({ target: sorter.columnKey, order: sorter.order ? sorter.order : 'descend' })
+            }
+        },
+        disabledDate(current) {
+            return current && current > moment().endOf('day')
+        },
+        handleDataPicker(date, dateString) {
+            console.log(date, dateString, '-------');
+        },
+        handleCustomClick () {
+            this.visible = true
+            this.listNum = [...this.columns]
+        },
+        onShowSizeChange(current, pageSize) {
+            console.log(current, pageSize, 'current, pageSize');
+        },
+        handleCauseSizeChange(current, pageSize) {
+            console.log(current, pageSize, 'size-size');
+        },
+        handleCancelClick(status) {
+            this.isCustomVisible = status;
+        },
+        //自定义列相关
+        closeCustomColumn() {
+            this.visible = false
+        },
+        changeColumn(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 = 0
+            } 
+            else if (this.columns.length >= 8) {
+                this.columns.forEach((element, index) => {
+                    if (index < this.columnsFixd.length) {
+                        element.width = 150
+                        element.fixed = 'left'
+                    }
+                })
+
+                this.scrollX = 1000 + 150 * (this.columns.length - this.columnsFixd.length)
+            } 
+            else {
+                this.scrollX = 0
+                this.columns.forEach((element) => {
+
+                    element.width = 'auto'
+                    element.fixed = false
+                    
+                })
+            }
+
+            let arr = JSON.stringify(this.columns)
+            this.postDataAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
+                json: arr,
+                columnType: this.typeValue === 'project' ? 15 : 16,
+            }).then((res) => {
+            })
+        },
+        showColumn() {
+            this.postDataAction('/toutiao/videoReportDaily/getColumnJson', {
+                columnType: this.typeValue === 'project' ? 15 : 16,
+            }).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.columnsFixd.length) {
+                        columns.map((item, index) => {
+                        if (index > this.columnsFixd.length - 1) {
+                            item.sorter = function (a, b) {}
+                        }
+                        })
+                        columns = columns.slice(this.columnsFixd.length)
+                        this.columns = [...this.columnsFixd, ...columns]
+
+                        // this.tableHandle()
+                    }
+
+                    // console.log(this.columns)
+                    }
+                }
+
+                this.changeColumn(this.columns)
+                }
+            })
+        },
+        //自定义列结束
+
+        //获取个人绩效
+        getPersonAchievements() {
+            let params = {};
+            params.userId = this.userInfo().id;
+            this.getAction('/etl/reportAccountHourly/personalAchievements', params).then(res => {
+                this.accountPageSpinning = false;
+                if(res.success) {
+                    this.personData = res.result;
+                }
+                else {
+                    this.$message.error(res.message);
+                }
+            }).catch(error => {
+                this.accountPageSpinning = false;
+                console.log(error, 'eeee');
+            });
+        },
+
+        //切换列表账户项目选项
+        checkOutType() {
+            this.showChange = false;
+            this.projectId = null;
+            if(this.typeValue === 'account') {
+                this.url = '/etl/reportAccountHourly/leaderAccountPageList';
+                this.columns = [...keepPersonData.setNoDeleteColumns() , ...keepPersonData.setDefaultColumns()];
+                this.columnsFixd = keepPersonData.setNoDeleteColumns();
+            }
+            else {
+                this.url = '/etl/reportAccountHourly/projectList';
+                this.columns = [...keepPersonData.setNoDeleteProjectColumns() , ...keepPersonData.setDefaultColumns()];
+                this.columnsFixd = keepPersonData.setNoDeleteProjectColumns();
+            }
+            this.showChange = true;
+            this.getPersonList();
+        },
+
+        //点击项目查看账户
+        toAccount(item) {
+            this.showChange = false;
+            this.projectId = item.projectId;
+            this.typeValue = 'account';
+            this.url = '/etl/reportAccountHourly/leaderAccountPageList';
+            this.columns = [...keepPersonData.setNoDeleteColumns() , ...keepPersonData.setDefaultColumns()];
+            this.columnsFixd = keepPersonData.setNoDeleteColumns();
+            this.showChange = true;
+            this.getPersonList();
+        },
+
+        //点击跳转盯盘详情页
+        toDetail(item) {
+            localStorage.setItem('stockWatchAccountId',item.accountId);
+            this.$nextTick(() => {
+                this.$router.push('/modules/stockWatch/accountPage');
+            })
+            
+        },
+
+        //获取列表
+        getPersonList(data) {
+            this.loading = true;
+            let params = {};
+            params.userId = this.userInfo().id;
+            params.startTime = this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null;
+            params.endTime = this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null;
+            params.pageNo = this.ipagination.current;
+            params.pageSize = this.ipagination.pageSize;
+            
+            if( this.typeValue === 'account' ) {
+                params.projectId = this.projectId
+            }
+
+            if (data) {
+                params.sortCode = data.target
+                if (data.order == 'descend') {
+                    params.sortType = 'DESC'
+                } 
+                else {
+                    params.sortType = 'ASC'
+                }
+            } 
+            else {
+                params.sortCode = this.target
+                params.sortType = this.order == 'descend' ? 'DESC' : 'ASC'
+            }
+            this.postDataAction(this.url,params).then(res => {
+                this.loading = false;
+                if(res.success) {
+                    this.dataSource = res.result.list
+                    this.ipagination.total = res.result.total
+                }
+            })
+        },
+
+        //获取运营人员详情列表
+        getOperatingStaffDataList() {
+            this.echartsLoading = true;
+            let params = {};
+            params.pageNo = this.echartsIpagination.current;
+            params.pageSize = this.echartsIpagination.pageSize;
+            params.userId = this.userInfo().id;
+            // echartsData
+            this.postDataAction('/etl/reportAccountHourly/operatingStaffDataList',params).then(res => {
+                this.echartsLoading = false;
+                if(res.success) {
+                    this.echartsData = res.result.list
+                    this.echartsIpagination.total = res.result.total
+                }
+                else {
+                    this.$message.error(res.message)
+                }
+            }).catch(error => {
+                this.echartsLoading = false;
+                console.log(error)
+            })
+        },
+
+        //单日数据只查询花费判断
+        setDataQuery() {
+            if(this.dateEchart.length === 2
+            &&
+            moment(this.dateEchart[0]).format('YYYY-MM-DD') === moment(this.dateEchart[1]).format('YYYY-MM-DD')) {
+                this.$message.warning('单日数据只查询花费')
+                this.selectValue = 'charge'
+            }
+            this.getQueryNewlyData()
+        },
+
+
+
+        //趋势图数据接口
+        getQueryNewlyData() {
+            let params = {};
+            params.userId = this.userInfo().id;
+            params.parameterCode = this.selectValue;
+            params.startTime = this.dateEchart.length === 2 ? moment(this.dateEchart[0]).format('YYYY-MM-DD') : null;
+            params.endTime = this.dateEchart.length === 2 ? moment(this.dateEchart[1]).format('YYYY-MM-DD') : null;
+            this.postDataAction('/etl/reportAccountHourly/queryNewlyData',params).then(res => {
+                if(res.success){
+                    this.initEchart('accountIndexEchart',this.initAccountIndexEchart(res.result))
+                }
+            }).catch(error => {
+                console.log(error)
+            })
+        },
+
+        //趋势图echarts配置
+        initAccountIndexEchart(data){
+            // let type='激活'
+            // console.log(res);(data)
+            let option = {
+                tooltip: {
+                    trigger: 'axis',
+                },
+                grid:{
+                    left:'5px',
+                    top:0,
+                    right:'5px',
+                    bottom:0
+                },
+                xAxis:[
+                    {
+                        type: 'category',
+                        show:false,
+                        boundaryGap: false,
+                        data:  data.map(item => {
+                            return item.time
+                        }),
+                        axisPointer: {
+                            type: 'none'
+                        },
+                        
+                    },
+                ] ,
+                yAxis: {
+                    type: 'value',
+                    show:false,
+                },
+                series: [
+                    {
+                        name: this.selectValue === 'campaign'
+                        ?'上新计划数':this.selectValue === 'unit'
+                        ?'上新组数':'花费',
+                        data: data.map(item => {
+                            return item.value
+                        }),
+                        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% 处的颜色
+                                }],
+                            }
+                        }
+                    },
+                
+                ]
+            };
+
+            return option
+        },  
+        //获取echart的值
+        initEchart(idName, optionName) {
+            let that = this;
+            const chart = this.$refs[idName]
+            //   // console.log(res);(chart)
+            if (chart) {
+                const myChart = echarts.init(document.getElementById(idName))
+                // myChart.showLoading({
+                //     text: "图表数据正在努力加载..."
+                // });
+                myChart.clear()
+                myChart.setOption(optionName)
+                window.addEventListener('resize', function() {
+                    that.clientWidth = document.documentElement.clientWidth - 224
+                    myChart.resize()
+                })
+            }
+        },
+    },
+    watch: {
+        'ipagination.current':function(n,o) {
+            if(n !== o) {
+                this.getPersonList()
+            }
+        },
+        'echartsIpagination.current':function(n,o) {
+            if(n !== o) {
+                this.getOperatingStaffDataList()
+            }
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.accountPageSpinning = true
+            this.clientWidth = document.documentElement.clientWidth - 224
+            this.showColumn();
+            this.getPersonAchievements();
+            this.getPersonList();
+            this.getQueryNewlyData();
+            this.getOperatingStaffDataList();
+           
+        })
+    }
 };
 </script>
 <style lang="less" scoped>

+ 162 - 0
src/views/modules/stockWatch/modules/keep-person/keep-person-data.js

@@ -0,0 +1,162 @@
+/**
+ * @file 盯盘基础展示数据
+ * @author zhuxinbo(zhuxinbo@c-top.com.cn)
+ */
+import moment from 'moment'
+class keepPersonServer {
+    constructor() {}
+
+    // 固定不可删除的列
+    setNoDeleteColumns() {
+        return [
+            {
+                title: '账户名称',
+                dataIndex: 'authName',
+                scopedSlots: { customRender: 'authName' },
+                align: 'center',
+                key: 'date',
+                width: 200,
+                fixed: 'left',
+            },
+            {
+                title: '运营人员',
+                dataIndex: 'realname',
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+            },
+            {
+                title: '消耗',
+                dataIndex: 'cost',
+                scopedSlots: { customRender: 'cost' },
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+                sorter: () => {},
+            },
+            {
+                title: '余额',
+                dataIndex: 'totalBalance',
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+                sorter: () => {},
+            },
+            {
+                title: '预算',
+                dataIndex: 'budget',
+                width: 150,
+                tip: '广告在投放期间的花费总额',
+                align: 'center',
+                customRender: function (text) {
+                    if (text>0) {
+                        return text
+                    } else {
+                        return '不限制预算'
+                    }
+                },
+            }
+        ]
+    }
+
+    // 默认初始展示列
+    setDefaultColumns() {
+        return [
+            {
+                title: '封面曝光数',
+                dataIndex: 'photoShow',
+                tip: '广告在瀑布流被观看次数',
+                align: 'center',
+                scopedSlots: { customRender: 'photoShow' },
+                sorter: () => {},
+            },
+            {
+                title: '封面点击数',
+                dataIndex: 'photoClick',
+                tip: '用户点击封面进入视频播放页的次数(数据会进行反作弊去重)',
+                align: 'center',
+        
+                scopedSlots: { customRender: 'photoClick' },
+                sorter: () => {},
+            },
+            {
+                title: '封面点击率',
+                dataIndex: 'clickRate',
+                tip: '封面点击数占封面展示数百分比',
+                align: 'center',
+                scopedSlots: { customRender: 'clickRate' },
+                sorter: () => {},
+            },
+            {
+                title: '素材曝光数',
+                dataIndex: 'aClick',
+                tip: '用户进入视频播放页观看的次数(数据会进行反作弊去重)',
+                align: 'center',
+        
+                scopedSlots: { customRender: 'aClick' },
+                sorter: () => {},
+            },
+            {
+                title: '行为数',
+                dataIndex: 'bClick',
+                tip: '用户在视频播放页单击转化按钮的次数/展示数*100%',
+                align: 'center',
+        
+                scopedSlots: { customRender: 'bClick' },
+                sorter: () => {},
+            },
+        
+            {
+                title: '行为率',
+                dataIndex: 'bClickRate',
+                tip: '行为数占素材曝光数百分比',
+                align: 'center',
+                scopedSlots: { customRender: 'bClickRate' },
+                sorter: () => {},
+            },
+            {
+                title: '平均千次封面曝光花费(元)',
+                dataIndex: 'cpm',
+                tip: '花费/封面曝光数*1000',
+                align: 'center',
+                scopedSlots: { customRender: 'cpm' },
+                sorter: () => {},
+            },
+            {
+                title: '平均封面点击单价(元)',
+                dataIndex: 'cpc',
+                tip: '花费/封面点击数',
+                align: 'center',
+                scopedSlots: { customRender: 'cpc' },
+                sorter: () => {},
+            },
+            {
+                title: '平均行为单价(元)',
+                dataIndex: 'cpb',
+                tip: '总花费/行为数',
+                align: 'center',
+                scopedSlots: { customRender: 'cpb' },
+                sorter: () => {},
+            },
+        ]
+    }
+
+    //时间段筛选
+    setTimeRange() {
+        return {
+            昨天: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+            // 今天: [moment(), moment()],
+    
+            近三天: [moment().subtract(3, 'days'), moment().subtract(1, 'days')],
+            近一周: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
+            近14天: [moment().subtract(14, 'days'), moment().subtract(1, 'days')],
+            近一月: [moment().subtract(1, 'months'), moment().subtract(1, 'days')],
+            近半年: [moment().subtract(6, 'months'), moment().subtract(1, 'days')],
+            近一年: [moment().subtract(12, 'months'), moment().subtract(1, 'days')],
+        }
+    }
+
+
+}
+
+export default new keepPersonServer();

+ 15 - 0
src/views/modules/stockWatch/modules/keep-person/keep-person.less

@@ -98,5 +98,20 @@
             justify-content: flex-end;
             margin-top: 20px;
         }
+
     }
 }
+
+#outTable {
+    /deep/ .ant-table-header-column {
+        word-break: break-all; 
+        font-size: 14px; 
+        font-weight: 600
+    }
+   
+}
+/deep/ .ant-card-extra {
+    padding: 0!important;
+}
+
+

+ 333 - 69
src/views/modules/stockWatch/modules/keep-person/keep-person.vue

@@ -4,125 +4,256 @@
             <div class="person-header-left">
                 <div class="header-left-img"><img src="@/assets/daiban.png" alt=""></div>
                 <div>
-                    <div class="header-left-title">早安,antdesign,祝你开心每一天</div>
+                    <div class="header-left-title">你好,{{ personData ? personData.realName : 'admin' }},祝你开心每一天</div>
                     <div class="header-left-title">
                         <span>今日消耗:</span>
-                        <span>1000000</span>
-                        <span class="left-title-radio"><img class="title-radio-img" src="@/assets/up.png" alt="">10.765%</span>
+                        <span>{{ personData ? personData.charge : '-' }}</span>
+                        <span class="left-title-radio" v-if="personData && personData.grew >= 0">
+                            <img class="title-radio-img" src="@/assets/up.png" alt="">
+                            {{ personData.grew ? personData.grew + '%' : '-' }}
+                        </span>
                         <!-- TODO 这个是下降的样式,后续优化  -->
-                        <!-- <span class="left-title-radio-down"><img class="title-radio-img" src="@/assets/down.png" alt="">10.765%</span> -->
+                        <span class="left-title-radio-down" v-else-if="personData && personData.grew < 0">
+                            <img class="title-radio-img" src="@/assets/down.png" alt="">
+                            {{personData.grew ? personData.grew + '%':'-'}}
+                        </span>
                     </div>
                 </div>
             </div>
             <div class="person-header-right">
                 <div class="header-right-msg">
                     <div class="right-msg-class">周消耗环比</div>
-                    <div class="right-msg-class msg-class-up"><img class="title-radio-img" src="@/assets/up.png" alt="">23.98%</div>
-                    <!-- <div class="right-msg-class msg-class-down"><img class="title-radio-img" src="@/assets/down.png" alt="">23.98%</div> -->
+                    <div class="right-msg-class msg-class-up" v-if="personData && personData.weekGrew >= 0">
+                        <img class="title-radio-img" src="@/assets/up.png" alt="">
+                        {{ personData.weekGrew ? personData.weekGrew + '%' : '-' }}
+                    </div>
+                    <div class="right-msg-class msg-class-down" v-else-if="personData && personData.weekGrew < 0">
+                        <img class="title-radio-img" src="@/assets/down.png" alt="">
+                        {{ personData.weekGrew ? personData.weekGrew + '%' : '-' }}
+                    </div>
                 </div>
                 <div class="header-right-msg">
                     <div class="right-msg-class">本周消耗</div>
-                    <div class="right-msg-class">4356345635</div>
+                    <div class="right-msg-class">{{ personData ? personData.weekCharge : '-' }}</div>
                 </div>
                 <div class="header-right-msg">
                     <div class="right-msg-class">上周消耗</div>
-                    <div class="right-msg-class">45654567567</div>
+                    <div class="right-msg-class">{{ personData ? personData.lweekCharge : '-' }}</div>
                 </div>
                 <div class="header-right-msg">
                     <div class="right-msg-class">团队内排名</div>
-                    <div class="right-msg-class"><span class="msg-ranking">8</span> / 24</div>
+                    <div class="right-msg-class">
+                        <span class="msg-ranking">{{ personData ? personData.rank : '-' }}</span> 
+                        /{{ personData ? personData.total : '-' }}
+                    </div>
                 </div>
             </div>
         </div>
-        <div class="keep-person-content">
-            <div class="person-content-title">
-                <div class="content-title-acount">账户列表</div>
-                <div class="content-title-checkout">
-                    <span class="title-checkout-custom"><a @click="handleCustomClick">自定义列</a></span>
-                    <span class="title-checkout-time"><a-date-picker @change="handleDataPicker" /></span>
+        <a-card title="账户列表">
+            <div class="keep-person-content" slot="extra">
+                <div class="person-content-title" >
+                    <div class="content-title-acount"></div>
+                    <div class="content-title-checkout">
+                        <span class="title-checkout-custom"><a @click="handleCustomClick">自定义列</a></span>
+                        <span class="title-checkout-time">
+                            <a-range-picker
+                            v-model="dateValue"
+                            :ranges="dateRanges"
+                            :disabled-date="disabledDate"
+                            @change="getPersonList()"
+                            />
+                        </span>
+                    </div>
                 </div>
+
             </div>
             <a-table
-                ref="table"
                 size="middle"
-                bordered
                 :columns="columns"
                 :dataSource="dataSource"
-                :pagination="false"
+                bordered
+                id="outTable"
+                :pagination="ipagination"
+                :scroll="{ x: scrollX }"
+                :loading="loading"
+                ref="accountTable"
+                @change="sort"
             >
-                <span slot="action" slot-scope="text, record">
-                    <a @click="handleEdit(record)">推送</a>
-                    <a-divider type="vertical" />
-                    <a @click="handleDelete(record)">删除</a>
-                </span>
-                <span slot="cause" slot-scope="text, record">
-                    <a class="cause-text-class" @click="handleCause(record)">{{ text }}</a>
-                </span>
-                <span slot="depRelax" slot-scope="text, record">
-                    <a @click="handleAcountRelax('dep', record)">{{ text }}</a>
-                </span>
-                <span slot="acountRelax" slot-scope="text, record">
-                    <a @click="handleAcountRelax('acount', record)">{{ text }}</a>
-                </span>
+            <!-- style="word-break: break-all; font-size: 16px; font-weight: 600" -->
+                <a slot="authName" slot-scope="text,records" @click="toDetail(records)">{{ text }}</a>
+                <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
+                <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
+                <span slot="clickMaterial" slot-scope="clickMaterial">{{ clickMaterial | formatCurrency }}</span>
+                <span slot="showMaterial" slot-scope="showMaterial">{{ showMaterial | formatCurrency }}</span>
+                <span slot="convertMaterial" slot-scope="convertMaterial">{{ convertMaterial | formatCurrency }}</span>
+                <span slot="play25FeedBreak" slot-scope="play25FeedBreak">{{ play25FeedBreak | formatCurrency }}</span>
+                <span slot="play50FeedBreak" slot-scope="play50FeedBreak">{{ play50FeedBreak | formatCurrency }}</span>
+                <span slot="play75FeedBreak" slot-scope="play75FeedBreak">{{ play75FeedBreak | formatCurrency }}</span>
+                <span slot="play100FeedBreak" slot-scope="play100FeedBreak">{{ play100FeedBreak | formatCurrency }}</span>
+                <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
+                <span slot="downloadFinish" slot-scope="downloadFinish">{{ downloadFinish | formatCurrency }}</span>
+                <span slot="downloadStart" slot-scope="downloadStart">{{ downloadStart | formatCurrency }}</span>
+                <span slot="likeMaterial" slot-scope="likeMaterial">{{ likeMaterial | formatCurrency }}</span>
+                <span slot="shareMaterial" slot-scope="shareMaterial">{{ shareMaterial | formatCurrency }}</span>
+                <span slot="register" slot-scope="register">{{ register | formatCurrency }}</span>
+                <span slot="follow" slot-scope="follow">{{ follow | formatCurrency }}</span>
+                <span slot="formCount" slot-scope="formCount">{{ formCount | formatCurrency }}</span>
+                <span slot="formCountCost" slot-scope="formCountCost">{{ formCountCost | decimalsHandle }}</span>
+                <span slot="aClick" slot-scope="aClick">{{ aClick | formatCurrency }}</span>
+                <span slot="photoShow" slot-scope="photoShow">{{ photoShow | formatCurrency }}</span>
+                <span slot="photoClick" slot-scope="photoClick">{{ photoClick | formatCurrency }}</span>
+                <span slot="bClick" slot-scope="bClick">{{ bClick | formatCurrency }}</span>
+                <span slot="active" slot-scope="active">{{ active | formatCurrency }}</span>
+                <span slot="submit" slot-scope="submit">{{ submit | formatCurrency }}</span>
+                <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
+                <span slot="eventCreditGrantLandingPage" slot-scope="eventCreditGrantLandingPage">{{
+                eventCreditGrantLandingPage | formatCurrency
+                }}</span>
+                <span slot="submitCost" slot-scope="submitCost">{{ submitCost | decimalsHandle }}</span>
+                <span slot="eventCreditGrantLandingPageCost" slot-scope="eventCreditGrantLandingPageCost">{{
+                eventCreditGrantLandingPageCost | decimalsHandle
+                }}</span>
+                <span slot="submitRate" slot-scope="submitRate">{{ submitRate | toPercentage }}</span>
+                <span slot="eventCreditGrantLandingPageRate" slot-scope="eventCreditGrantLandingPageRate">{{
+                eventCreditGrantLandingPageRate | toPercentage
+                }}</span>
+                <span slot="play25FeedBreakRate" slot-scope="play25FeedBreakRate">{{
+                play25FeedBreakRate | toPercentage
+                }}</span>
+                <span slot="playOverRate" slot-scope="playOverRate">{{ playOverRate | toPercentage }}</span>
+
+                <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
+                <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
+                <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
+                <span slot="cpc" slot-scope="cpc">{{ cpc | decimalsHandle }}</span>
+                <span slot="cpm" slot-scope="cpm">{{ cpm | decimalsHandle }}</span>
+                <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
+                <span slot="installFinishRate" slot-scope="installFinishRate">{{ installFinishRate | toPercentage }}</span>
+                <span slot="validPlayRate" slot-scope="validPlayRate">{{ validPlayRate | toPercentage }}</span>
+                <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | decimalsHandle }}</span>
+                <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
+                <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | decimalsHandle }}</span>
+                <span slot="activeCost" slot-scope="activeCost">{{ activeCost | decimalsHandle }}</span>
+                <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
+                <span slot="gameAddictionCost" slot-scope="gameAddictionCost">{{
+                gameAddictionCost | decimalsHandle
+                }}</span>
+                <span slot="downloadFinishCost" slot-scope="downloadFinishCost">{{
+                downloadFinishCost | decimalsHandle
+                }}</span>
+                <span slot="downloadStartCost" slot-scope="downloadStartCost">{{
+                downloadStartCost | decimalsHandle
+                }}</span>
+                <span slot="installFinishCost" slot-scope="installFinishCost">{{
+                installFinishCost | decimalsHandle
+                }}</span>
+                <span slot="convertCost" slot-scope="convertCost">{{ convertCost | decimalsHandle }}</span>
+
+                <span slot="downloadStartRate" slot-scope="downloadStartRate">{{ downloadStartRate | toPercentage }}</span>
+                <span slot="downloadFinishRate" slot-scope="downloadFinishRate">{{
+                downloadFinishRate | toPercentage
+                }}</span>
+                <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
+                <span slot="activeRegisterRate" slot-scope="activeRegisterRate">{{
+                activeRegisterRate | toPercentage
+                }}</span>
+                <span slot="gameAddictionRate" slot-scope="gameAddictionRate">{{ gameAddictionRate | toPercentage }}</span>
+                <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
             </a-table>
-            <a-pagination
-                class="pagin-table-class"
-                :total="totalAll"
-                :show-total="total => `共 ${totalAll} 条`"
-                size="small"
-                show-size-changer
-                show-quick-jumper
-                @change="onShowSizeChange"
-                @showSizeChange="onShowSizeChange"
-            />
-        </div>
-        <custom-columns :visible="isCustomVisible" @cancelClick="handleCancelClick"></custom-columns>
+        </a-card>
+
+        <customColumn
+            :visible="visible"
+            :listNum="listNum"
+            :fiexColumn="columnsFixd"
+            :mediaType="2"
+            @closeCustomColumn="closeCustomColumn"
+            @changeColumn="changeColumn"
+        />
     </div>
 </template>
 <script>
-import CustomColumns from '../custom-columns/custom-columns';
+import customColumn from '@/views/modules/Statistics/components/customColumn.vue'
+import keepPersonData from './keep-person-data';
+import { mapGetters } from 'vuex';
+import moment from 'moment'
 export default {
     name: 'keep-person',
     components: {
-        CustomColumns
+        customColumn
     },
     data() {
         return {
             isCustomVisible: false,
+            loading: false,
             totalAll: 100,
             dataSource: [],
-            columns: [
-                {
-                    title: '人群包名称',
-                    width: 200,
-                    ellipsis: true,
-                    dataIndex: 'orientationName'
+            listNum: [],
+            visible: false,
+            columns: [...keepPersonData.setNoDeleteColumns() , ...keepPersonData.setDefaultColumns()],
+            columnsFixd: keepPersonData.setNoDeleteColumns(),
+            scrollX: 1500,
+            personData: null,
+            dateValue: [moment().subtract(6, 'days'), moment()],
+            dateRanges: keepPersonData.setTimeRange(),
+            target: 'cost',
+            order: 'descend',
+            ipagination: {
+                current: 1,
+                pageSize: 10,
+                //   pageSizeOptions: ['10', '20', '30'],
+                showTotal: (total, range) => {
+                return range[0] + '-' + range[1] + ' 共' + total + '条'
                 },
-                {
-                    title: '人群包类型',
-                    align: 'center',
-                    dataIndex: 'populationType'
+                showQuickJumper: true,
+                // showSizeChanger: true,
+                // pageSizeOptions: ['10', '30', '50'],
+                total: 0,
+                onChange: (current, pageSize) => {
+                    // 切换分页时的回调,
+                    // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
+                    this.ipagination.current = current
+                    this.ipagination.pageSize = pageSize
                 },
-                {
-                    title: '匹配类型',
-                    align: 'center',
-                    dataIndex: 'typeStr'
-                },
-                {
-                    title: '上传时间',
-                    dataIndex: 'statDate',
-                    align: 'center'
-                }
-            ]
+            },
         };
     },
+    watch: {
+        'ipagination.current':function(n,o) {
+            if(n !== o) {
+                this.getPersonList()
+            }
+        }
+    },
     methods: {
+        ...mapGetters(["userInfo"]),
+        //点击跳转盯盘详情页
+        toDetail(item) {
+            localStorage.setItem('stockWatchAccountId',item.accountId);
+            this.$nextTick(() => {
+                this.$router.push('/modules/stockWatch/accountPage');
+            })
+            
+        },
+        sort(pagination, filters, sorter, { currentDataSource }) {
+            // console.log(pagination, filters, sorter)
+            this.ipagination.current = pagination.current
+            this.ipagination.pageSize = pagination.pageSize
+            if (sorter.order) {
+                this.order = sorter.order ? sorter.order : 'descend'
+                this.target = sorter.columnKey
+                this.getPersonList({ target: sorter.columnKey, order: sorter.order ? sorter.order : 'descend' })
+            }
+        },
+        disabledDate(current) {
+            return current && current > moment().endOf('day')
+        },
         handleDataPicker(date, dateString) {
             console.log(date, dateString, '-------');
         },
         handleCustomClick () {
-            console.log('这个是自定义列的点击事件');
-            this.isCustomVisible = true;
+            this.visible = true
+            this.listNum = [...this.columns]
         },
         onShowSizeChange(current, pageSize) {
             console.log(current, pageSize, 'current, pageSize');
@@ -132,7 +263,140 @@ export default {
         },
         handleCancelClick(status) {
             this.isCustomVisible = status;
+        },
+        //自定义列相关
+        closeCustomColumn() {
+            this.visible = false
+        },
+        changeColumn(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 = 0
+            } 
+            else if (this.columns.length >= 8) {
+                this.columns.forEach((element, index) => {
+                    if (index < this.columnsFixd.length) {
+                        element.width = 150
+                        element.fixed = 'left'
+                    }
+                })
+
+                this.scrollX = 1000 + 150 * (this.columns.length - this.columnsFixd.length)
+            } 
+            else {
+                this.scrollX = 0
+                this.columns.forEach((element) => {
+
+                    element.width = 'auto'
+                    element.fixed = false
+                    
+                })
+            }
+
+            let arr = JSON.stringify(this.columns)
+            this.postDataAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
+                json: arr,
+                columnType: 13,
+            }).then((res) => {
+                // console.log(res)
+            })
+        },
+        showColumn() {
+            this.postDataAction('/toutiao/videoReportDaily/getColumnJson', {
+                columnType: 13,
+            }).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.columnsFixd.length) {
+                        columns.map((item, index) => {
+                        if (index > this.columnsFixd.length - 1) {
+                            item.sorter = function (a, b) {}
+                        }
+                        })
+                        columns = columns.slice(this.columnsFixd.length)
+                        this.columns = [...this.columnsFixd, ...columns]
+
+                        // this.tableHandle()
+                    }
+
+                    // console.log(this.columns)
+                    }
+                }
+
+                this.changeColumn(this.columns)
+                }
+            })
+        },
+        //自定义列结束
+
+        //获取个人绩效
+        getPersonAchievements() {
+            let params = {}
+            params.userId = this.userInfo().id
+            this.getAction('/etl/reportAccountHourly/personalAchievements', params).then(res => {
+                console.log(res)
+                if(res.success) {
+                    this.personData = res.result
+                }
+                else {
+                    this.$message.error(res.message);
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
+        },
+
+        //获取列表
+        getPersonList(data) {
+            this.loading = true;
+            let params = {};
+            params.userId = this.userInfo().id;
+            params.startTime = this.dateValue.length === 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null;
+            params.endTime = this.dateValue.length === 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null;
+            params.pageNo = this.ipagination.current;
+            params.pageSize = this.ipagination.pageSize;
+
+            if (data) {
+                params.sortCode = data.target
+                if (data.order == 'descend') {
+                    params.sortType = 'DESC'
+                } 
+                else {
+                    params.sortType = 'ASC'
+                }
+            } 
+            else {
+                params.sortCode = this.target
+                params.sortType = this.order == 'descend' ? 'DESC' : 'ASC'
+            }
+            this.postDataAction('/etl/reportAccountHourly/accountPageList',params).then(res => {
+                this.loading = false;
+                if(res.success) {
+                    this.dataSource = res.result.list
+                    this.ipagination.total = res.result.total
+                }
+            })
         }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.showColumn();
+            this.getPersonAchievements();
+            this.getPersonList();
+        })
     }
 };
 </script>

+ 2 - 2
vue.config.js

@@ -77,10 +77,10 @@ module.exports = {
         // target: 'http://192.168.1.43:8088', //请求本地 需要jeecg-boot后台项目  毕洁泉
         // target: 'http://192.168.1.43:8806', //请求本地 需要jeecg-boot后台项目  毕洁泉
         // target: 'http://192.168.0.252:8098', //请求本地 需要jeecg-boot后台项目  毕洁泉
-        // target: 'http://192.168.1.219:8080', //请求本地 需要jeecg-boot后台项目  赵西安
+        target: 'http://192.168.1.219:8080', //请求本地 需要jeecg-boot后台项目  赵西安
         // target: 'http://192.168.1.193:8080', //请求本地 需要jeecg-boot后台项目  李煜一
         // target: 'http://192.168.1.193:31012', //请求本地 需要jeecg-boot后台项目  李煜一
-         target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
+        //  target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
         // target: 'https://trac.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
         // target: 'http://39.106.184.70:8088/', //请求本地 需要jeecg-boot后台项目
         //  target: 'http://adsp.tjyourong.com.cn/', //请求本地 需要jeecg-boot后台项目