瀏覽代碼

'加错误页面'

魏志佳 5 年之前
父節點
當前提交
c664315d1c

+ 5 - 0
src/config/router.config.js

@@ -80,4 +80,9 @@ export const constantRouterMap = [
     path: '/404',
     component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
   },
+  {
+    path: '/errorPage',
+    name: 'errorPage',
+    component: () => import(/* webpackChunkName: "fail" */ '@/views/errorPage')
+  },
 ]

+ 1 - 1
src/permission.js

@@ -10,7 +10,7 @@ import {generateIndexRouter} from "@/utils/util"
 NProgress.configure({showSpinner: false}) // NProgress Configuration
 
 
-const whiteList = ['/user/login', '/user/register', '/user/register-result', '/user/alteration','/user/transfer-local'] // no redirect whitelist
+const whiteList = ['/user/login', '/user/register', '/user/register-result', '/user/alteration','/user/transfer-local','/errorPage'] // no redirect whitelist
 
 router.beforeEach((to, from, next) => {
   NProgress.start() // start progress bar

+ 93 - 0
src/views/errorPage.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="exception">
+    <div class="img">
+      <img src="https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg"/>
+    </div>
+    <div class="content">
+      <h1>{{ }}</h1>
+      <div class="desc">{{ }}</div>
+      <div class="action">
+        <a-button type="primary" @click="handleToHome">返回登录</a-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name: "Exception",
+    // props: {
+    //   type: {
+    //     type: String,
+    //     default: '404'
+    //   }
+    // },
+    data() {
+      return {
+        errorInfo:''
+      }
+    },
+    methods: {
+      handleToHome() {
+         this.$router.push({name: 'login'})
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .exception {
+    min-height: 500px;
+    height: 80%;
+    align-items: center;
+    text-align: center;
+    margin-top: 150px;
+
+    .img {
+      display: inline-block;
+      padding-right: 52px;
+      zoom: 1;
+
+      img {
+        height: 360px;
+        max-width: 430px;
+      }
+    }
+
+    .content {
+      display: inline-block;
+      flex: auto;
+
+      h1 {
+        color: #434e59;
+        font-size: 72px;
+        font-weight: 600;
+        line-height: 72px;
+        margin-bottom: 24px;
+      }
+
+      .desc {
+        color: rgba(0, 0, 0, .45);
+        font-size: 20px;
+        line-height: 28px;
+        margin-bottom: 16px;
+      }
+    }
+  }
+
+  .mobile {
+    .exception {
+      margin-top: 30px;
+
+      .img {
+        padding-right: unset;
+
+        img {
+          height: 40%;
+          max-width: 80%;
+        }
+      }
+    }
+  }
+</style>

+ 127 - 8
src/views/modules/BatchCreate/crowedPackage.vue

@@ -119,20 +119,70 @@
             </div>
         </div>
         <!-- 上传人群包的界面 -->
-        <a-modal v-model="updatePackageVisiable"  @ok="updatePackageOk" width="75%" id="updatePackageOk">
+        <a-modal v-model="updatePackageVisiable"  @ok="updatePackageOk" width="750px" id="updatePackageOk" okText='上传'>
             <p class="title">上传人群包</p>
-            <div class="updatePackagebody">
+            <div class="updatePackagebody" >
                 <p class="item">
                     <span class="desc">匹配类型 <span class="redCircular"></span></span>
-                    <a-select size="default"  v-model="matchValue" style="width: 400px" @change="matchChange">
+                    <a-select size="default" placeholder='请选择匹配类型'  v-model="matchValue" style="width: 400px" @change="matchChange">
                         <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
                             {{ (i + 9).toString(36) + i }}
                         </a-select-option>
                     </a-select>
+                    <span class="tips">大部分是15位数字,如123456789012345(电信是14位)</span>
+                </p>
+                <p class="item">
+                    <span class="desc">人群包名称 <span class="redCircular"></span></span>
+                    <a-input placeholder="请输入人群包名称" v-model="crowedName" style="width: 400px" />
+                </p>
+                <p class="item">
+                    <span class="desc">类型匹配 <span class="Circular"></span></span>
+                    <a-radio-group name="radioGroup" v-model="typeMatch">
+                        <a-radio :value="1">
+                            设备号匹配
+                        </a-radio>
+                        <a-radio :value="2">
+                            uid匹配
+                        </a-radio>
+                    </a-radio-group>
+                    <span class="tips">
+                        <span class="tipsinfo">设备号匹配:定向/排除时直接按照设备号圈选,数据相对量少而精确</span>
+                        <span class="tipsinfo">UID匹配:定向/排除时圈选在该设备上登录的全部UID数据,数据相对量多而广泛</span>
+                    </span>
+                </p>
+                <p class="item">
+                    <span class="desc">人群分组 <span class="redCircular"></span></span>
+                    <span class="crowedGroup">
+                        <a-input-group compact >
+                            <a-input style="width: 290px" placeholder='请输入内容' v-model="populationGroup"/>
+                            <a-button type='default' @click="showGroupPage">选择已有<a-icon type="down" /></a-button>
+                        </a-input-group>
+                        <div class="crowedGroupPage" v-show="showcrowedPackage">
+                            <ul @click.stop="selectgroupName">
+                                <li class="crowedGroupPageItem">系统推荐</li>
+                                <li class="crowedGroupPageItem">哈哈哈</li>
+                                <li class="crowedGroupPageItem">嘿嘿</li>
+                                <li class="crowedGroupPageItem">魏志佳编辑</li>
+                                <li class="crowedGroupPageItem">1</li>
+                                <li class="crowedGroupPageItem">1</li>                               
+                            </ul>
+                        </div>
+                    </span>                                       
+                </p>
+                <p class="item">
+                    <span class="desc">上传文件 <span class="redCircular"></span></span>
+                    <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" directory>
+                        <a-button> <a-icon type="upload" /> 点击上传ZIP包 </a-button>
+                    </a-upload>
+                    <span class="tips">
+                        <span class="tipsTitle">文件格式说明</span>
+                        <span class="tipsinfo">1.安卓和IOS设备号,imei小写后MD5加密,IDFA大写后MD5加密,32位MD5均可</span>
+                        <span class="tipsinfo">2.上传文件内,每行一个号码,号码数量不多于3千万</span>
+                        <span class="tipsinfo">3.文件类型为单个或多个txt文件经过zip格式压缩得到,压缩后大小不超过1G</span>
+                        <span class="tipsinfo">4.上传过程中需要一定的格式校验时间,请耐心等待</span>
+                    </span>
                 </p>
             </div>
-            <p>Some contents...</p>
-            <p>Some contents...</p>
         </a-modal>
     </div>
 </template>
@@ -308,6 +358,10 @@ export default {
 
             updatePackageVisiable:false,//上传人群包的弹出框
             matchValue:undefined, //上传人群包的匹配框
+            crowedName:undefined,//上传人群包名称
+            typeMatch:2,//类型匹配
+            showcrowedPackage:false,
+            populationGroup:undefined,//上传人群包---人群分组
         }
     },
     methods: {
@@ -451,7 +505,21 @@ export default {
         updatePackageOk(){
             this.updatePackageVisiable = false;
         },
-
+        //匹配类型
+        matchChange(val){
+            console.log(val)
+        },
+        //上传人群包--选择已有的人群分组
+        showGroupPage(){
+            this.showcrowedPackage=!this.showcrowedPackage
+        },
+        //人群分组选中事件
+        selectgroupName(e){
+            // console.log(e)
+            this.populationGroup=e.target.innerText;
+            this.showcrowedPackage=!this.showcrowedPackage
+        },
+ 
         filterOption(input, option){
             console.log(input, option)
             return (
@@ -542,7 +610,7 @@ export default {
             display: inline-block;
             text-align: right;
             margin-right: 10px;
-            .redCircular{
+            .redCircular,.Circular{
                 display: inline-block;
                 margin-left: 5px;
                 width: 5px;
@@ -552,8 +620,59 @@ export default {
                 position: relative;
                 top: -2px;
             }
+            .Circular{
+                background-color: transparent;
+            }
+        }
+        .updatePackagebody{
+            .crowedGroup{
+                display: inline-block;
+                width: 500px;
+                position: relative;
+                .crowedGroupPage{
+                    position: absolute;
+                    width: 400px;
+                    height: 250px;
+                    top: 32px;
+                    left: 0;
+                    background-color: #fff;
+                    border: 1px solid #ddd;
+                    border-top: null;
+                    border-radius: 0  0 10px 10px ;
+                    overflow:auto;
+                    z-index: 3;
+                    ul{
+                        padding: 0;
+                        margin: 0em;
+                    }
+                    .crowedGroupPageItem{
+                        height: 30px;
+                        line-height: 30px;
+                        padding: 0 15px;
+                        list-style: none;
+                        
+                    }
+                    .crowedGroupPageItem:hover{
+                        background-color: rgba(0,0,0,.2);
+                    }
+                }
+            }
+            .tips{
+                display: block;
+                font-size: 12px;
+                color: #999;
+                margin-left: 110px;
+                margin-top: 10px;
+                .tipsinfo{
+                    display: block;
+                    margin-bottom: 6px;
+                }
+                .tipsTitle{
+                    display: block;
+                    color: #777;
+                }
+            }
         }
-        
 
     }
 </style>

+ 254 - 0
src/views/modules/BatchCreate/directionalPackage.vue

@@ -0,0 +1,254 @@
+<template>
+    <div class="directionalPackage">
+        <div class="tableBOX">
+            <div class="tableOpt">
+                <a-button class="search" type='primary' @click="openDirectionalPackage">新建定向包</a-button>
+
+             
+                <a-button class="addCol" type='primary' @click="addcolumns">自定义列</a-button>
+            </div>
+            <div class="tableArea">
+                <a-table 
+                :columns="columns" 
+                :data-source="dataSource" 
+                :row-selection="rowSelection" 
+                bordered
+                >
+                    <template slot="campaignName" slot-scope="text,record">                                       
+                        <editableCell :text="text" slotName='campaignName' @change="onCellChange(record.key, 'campaignName', $event)" />                       
+                    </template>
+                    <span slot="groupBudget" slot-scope="text,record">
+                       <editableCell :text="text" slotName='groupBudget' @change="onCellChange(record.key, 'groupBudget', $event)" /> 
+                    </span>
+                    
+                    <span slot="operation" slot-scope="text,record">
+                        <a href="javascript:;" style="margin-right:10px">推送</a>
+                        <a-popconfirm
+                            v-if="dataSource.length"
+                            title="确定要删除吗?"
+                            @confirm="() => onDelete(record.key)"
+                        >
+                            <a href="javascript:;">删除</a>
+                        </a-popconfirm>        
+                    </span>
+                    <span slot="parentGroup" slot-scope="text">
+                        <a href="javascript:;" >{{text}}</a>
+                    </span>
+                    <span slot="parentPlan" slot-scope="text">
+                        <a href="javascript:;" >{{text}}</a>
+                    </span>
+                    <span slot="cost" slot-scope="cost">       
+                        {{cost | formatCurrency }}
+                    </span>
+                </a-table>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import moment from 'moment';
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
+const columns = [
+  {
+    title: '定向包名称',
+    dataIndex: 'userName',
+    align: 'center',
+    key:'userName',
+    scopedSlots: { customRender: 'userName' }
+  },
+  {
+    title: '定向描述',
+    dataIndex: 'department',
+    align: 'center', 
+    key: 'department',
+    scopedSlots: { customRender: 'department' }
+  },
+  {
+    title: '定向包类型',
+    dataIndex: 'roleName',
+    align: 'center',
+    
+    key: 'roleName',
+    scopedSlots: { customRender: 'roleName' }
+  },
+  
+  {
+    title: '投放范围',
+    dataIndex: 'cost',
+    align: 'center',
+    scopedSlots: { customRender: 'cost' },
+    sorter:()=>{}
+  },
+  {
+    title: '关联计划',
+    dataIndex: 'accountName',
+    align: 'center',
+    scopedSlots: { customRender: 'accountName' },
+    
+  },   
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    align: 'center',
+    scopedSlots: { customRender: 'operation' },
+    
+  }
+]
+
+
+export default {
+    data() {
+        return {
+             //主页的表格
+            dataSource:[
+                {
+                    userName:'人群纠错包1',
+                    department:'运算',
+                    roleName:'2020-6-10',
+                    cost:16897546322,
+                    accountName:'伊对-01',
+                    status:true,
+                    key:0
+                },
+                {
+                    userName:'人群纠错包2',
+                    department:'运算',
+                    roleName:'2020-6-10',
+                    cost:16897322,
+                    accountName:'伊对-02',
+                    status:false,
+                    key:1
+                },
+                {
+                    userName:'人群纠错包3',
+                    department:'运算',
+                    roleName:'2020-6-10',
+                    cost:16322,
+                    accountName:'伊对-03',
+                    status:true,
+                    key:2
+                },
+            ],
+            columns,
+            selectedRowKeys:[],
+            rowSelection:{
+                onChange: (selectedRowKeys, selectedRows) => {
+                    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+                    console.log(selectedRowKeys);
+                    this.selectedRowKeys=selectedRowKeys;
+                },
+                onSelect: (record, selected, selectedRows) => {
+                    console.log(record, selected, selectedRows);
+                    
+                },
+                onSelectAll: (selected, selectedRows, changeRows) => {
+                    console.log(selected, selectedRows, changeRows);
+                    
+                },
+            },
+        }
+    }, 
+    methods: {
+        openDirectionalPackage(){
+            this.$router.push({path:'/modules/BatchCreate/newDirectedPackage'})
+            console.log()
+        },
+        //自定义列
+        addcolumns(){
+
+        }
+    },
+    filters: {
+        toPercentage(val) {
+            if(val){
+                if(typeof val != 'string'){
+                    return (val * 100).toFixed(2) + '%'
+                }else{
+                    return val
+                }
+            }else if(typeof val =='string'){
+                    return val
+                }
+            else{
+                return 0
+            }    
+        },
+        //保留两位小数并且变成货币格式
+        decimalsHandle(val){
+            
+            if(val && typeof val !='string'){
+            val=parseFloat(val).toFixed(2);
+            let numberStr = val.toString()
+            let str = numberStr.split('.')
+            
+            let str0=str[0].split('').reverse();
+            for (let i = 0; i < str0.length; i++) {
+            if ((i + 1) % 4 === 0) {
+                str0.splice(i, 0, ',')
+                }
+            }
+            str0.reverse()
+            let handleResult = ''
+            for (let j = 0; j < str0.length; j++) {
+                handleResult += str0[j]
+            }
+            
+            return handleResult+'.'+str[1]
+            }else if(typeof val =='string'){
+                return val
+            }
+            else{
+            return 0
+            }
+            
+            
+        },
+        //变成货币格式
+        formatCurrency(val){
+            if((val||val==0)&& typeof val !='string'){
+                let numberStr = val.toString()
+                let str = numberStr.split('').reverse()
+                for (let i = 0; i < str.length; i++) {
+                    if ((i + 1) % 4 === 0) {
+                    str.splice(i, 0, ',')
+                    }
+                }
+                str.reverse()
+                let handleResult = ''
+                for (let j = 0; j < str.length; j++) {
+                    handleResult += str[j]
+                }
+                return handleResult
+            }else if(typeof val =='string'){
+                    return val
+            }
+            else{
+                return '-'
+            }
+            
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.directionalPackage{
+    .tableBOX{
+        background: #fff;
+        padding: 15px 15px;
+        .tableOpt{
+            margin-bottom: 10px;
+            .search{
+                margin-right: 15px;
+            }
+            .addCol{
+                float:right;
+
+            }
+        }
+        
+    }
+
+}
+</style>

+ 476 - 0
src/views/modules/BatchCreate/newDirectedPackage.vue

@@ -0,0 +1,476 @@
+<template>
+    <div class="newDirectedPackage">
+        <div class="title">
+            新建定向包
+        </div>
+        <div class="optBOX">
+            <div class="leftBox">
+                <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
+                    <a-form-model-item label="定向包名称">
+                       <a-input placeholder="请输入定向包名称,至多20个字符" style="width:40%" />
+                    </a-form-model-item>
+                    <a-form-model-item label="媒体:">
+                        <a-radio-group default-value="toutiao" v-model="form.medialType" button-style="solid">
+                            <a-radio-button :value="1">头条</a-radio-button>
+                        </a-radio-group>
+                    </a-form-model-item>
+                    <a-form-model-item label="地域:" class="optItem">
+                        <a-radio-group default-value="" button-style="solid">
+                            <a-radio-button value="">不限</a-radio-button>
+                            <a-radio-button value="b">按省市</a-radio-button>
+                            <a-radio-button value="c">按区县</a-radio-button>
+                        </a-radio-group>
+                        <span class=""></span>
+                    </a-form-model-item>
+                    <a-form-model-item label="性别:" class="optItem">
+                         <a-radio-group default-value="" v-model="form.sex" button-style="solid">
+                            <a-radio-button value="">不限</a-radio-button>
+                            <a-radio-button value="men">男</a-radio-button>
+                            <a-radio-button value="women">女</a-radio-button>
+                        </a-radio-group>
+                    </a-form-model-item>
+                    <a-form-model-item label="年龄:" class="optItem">
+                        <a-radio-group default-value="" button-style="solid">
+                            <a-radio-button value="">不限</a-radio-button>
+                            <a-radio-button value="men">18-23</a-radio-button>
+                            <a-radio-button value="women">24-30</a-radio-button>
+                            <a-radio-button value="women">31-40</a-radio-button>
+                            <a-radio-button value="women">41-49</a-radio-button>
+                            <a-radio-button value="women">50+</a-radio-button>
+                        </a-radio-group>
+                    </a-form-model-item>
+                    <a-form-model-item label="精选流量包:" class="optItem">
+                        <a-radio-group default-value="" button-style="solid">
+                            <a-radio-button value="">不限</a-radio-button>
+                            <a-radio-button value="men">应用软件精选</a-radio-button>
+                            <a-radio-button value="women">游戏精选</a-radio-button>
+                        </a-radio-group>
+                        <span class="tishi"><a-icon type="exclamation-circle" class="tubiao" />精选流量包仅支持穿山甲、穿山甲-精选游戏广告位</span>
+                    </a-form-model-item>
+                    <a-form-model-item label="行为兴趣:" class="optItem">
+                        <a-radio-group default-value="" button-style="solid">
+                            <a-radio-button value="">不限</a-radio-button>
+                            <a-radio-button value="men">系统推荐</a-radio-button>
+                            <a-radio-button value="women">自定义</a-radio-button>
+                        </a-radio-group>
+                    </a-form-model-item>
+                    <a-form-model-item label="平台:" class="optItem">
+                        <a-radio-group default-value="" button-style="solid">
+                            <a-radio-button value="">不限</a-radio-button>
+                            <a-radio-button value="IOS">IOS</a-radio-button>
+                            <a-radio-button value="Android">Android</a-radio-button>
+                        </a-radio-group>
+                    </a-form-model-item>
+                    <a-form-model-item label="过滤已安装:" class="optItem">
+                        <a-radio-group default-value="" button-style="solid">
+                            <a-radio-button value="">不过滤</a-radio-button>
+                            <a-radio-button value="filter">过滤</a-radio-button>
+                        </a-radio-group>
+                    </a-form-model-item>
+                    <a-form-model-item label="运营商:" class="optItem">
+                       <a-radio-group default-value="" button-style="solid">
+                            <a-radio-button value="">不限</a-radio-button>
+                            <a-radio-button value="yidong">移动</a-radio-button>
+                            <a-radio-button value="liantong">联通</a-radio-button>
+                            <a-radio-button value="dianxin">电信</a-radio-button>
+                        </a-radio-group>
+                    </a-form-model-item>
+                    <a-form-model-item label="网络:" class="optItem">
+                       <a-radio-group default-value="" button-style="solid">
+                            <a-radio-button value="">不限</a-radio-button>
+                            <a-radio-button value="wifi">Wi-Fi</a-radio-button>
+                            <a-radio-button value="2G">2G</a-radio-button>
+                            <a-radio-button value="3G">3G</a-radio-button>
+                            <a-radio-button value="4G">4G</a-radio-button>
+                        </a-radio-group>
+                    </a-form-model-item>
+                    <a-form-model-item label="设备类型:" class="optItem">
+                       <a-radio-group default-value="" button-style="solid">
+                            <a-radio-button value="">不限</a-radio-button>
+                            <a-radio-button value="wifi">智能手机</a-radio-button>
+                            <a-radio-button value="2G">平板</a-radio-button>
+                        </a-radio-group>
+                    </a-form-model-item>
+                    <a-form-model-item label="手机品牌:" class="optItem">
+                       <a-radio-group default-value="" v-model="deviceBrand" button-style="solid">
+                            <a-radio-button value="">不限</a-radio-button>
+                            <a-radio-button value="byBrand">按品牌</a-radio-button>
+                        </a-radio-group>
+                        <div v-if="deviceBrand=='byBrand'" class="deviceBrand">
+                            <div class="selectBox">
+                                <div class="selectLeft">
+                                    <div class="title">手机品牌</div>
+                                    <div class="selectBox1">
+                                        <span class="selectLists"><a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" > 全选 </a-checkbox></span> 
+                                        <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="checkGroupChange" class="selectList" ></a-checkbox-group>
+                                    </div>
+                                </div>
+                                <div class="selectRight">
+                                    <div class="title">已选<a-button class="clear" type="link" @click="clearAll">清空</a-button></div>
+                                    <div class="selectBox1">
+                                        <span class="selectListitem" v-for="(item,index) in checkedList" :key='index'>{{item}}<a-icon type="close" id="close" @click="deleteItem(item)" /></span>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                        </div>
+                    </a-form-model-item>
+                    <a-form-model-item label="手机价格:"  class="optItem">
+                       <a-radio-group default-value="" v-model="launchPrice" button-style="solid">
+                            <a-radio-button value="">不限</a-radio-button>
+                            <a-radio-button value="custom">自定义</a-radio-button>
+                        </a-radio-group>
+                        <span v-if="launchPrice=='custom'">
+                            <a-slider range :marks="marks" :default-value="[2000, 7000]" :step="null"  :min='0' :max='11000'  @change="slideChange" />
+                        </span>
+                        <span v-else></span>
+                    </a-form-model-item>
+                    <a-form-model-item label="新用户:" class="optItem">                      
+                        <radioCheck :checkArr='newUser' @getSonValue='getNewUser' />
+                    </a-form-model-item>
+                    <a-form-model-item label="智能放量:" class="optItem">
+                        <a-radio-group default-value="" button-style="solid">
+                            <a-radio-button value="">不启用</a-radio-button>
+                            <a-radio-button value="open">启用</a-radio-button>
+                        </a-radio-group>
+                    </a-form-model-item>
+                    <a-form-model-item label="保存为模板:" class="optItem">
+                        <a-radio-group default-value="no" button-style="solid">
+                            <a-radio value="yes">是</a-radio>
+                            <a-radio value="no">否</a-radio>
+                        </a-radio-group>
+                    </a-form-model-item>
+                    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
+                        <a-button type="primary" @click="applicatiSubmit">
+                            应用
+                        </a-button>
+                        <a-button style="margin-left: 10px;" @click="cancel">
+                            取消
+                        </a-button>
+                    </a-form-model-item>       
+                </a-form-model>           
+            </div>
+            <div class="rightBox">
+                <div class="topBox">
+                    <p class="title">预估可覆盖</p>
+                    <div class="info">
+                        <p>抖音视频:<span class="num">{{}}</span>万日活跃用户</p>
+                        <p>西瓜视频:<span class="num">{{}}</span>万日活跃用户</p>
+                        <p>火山视频:<span class="num">{{}}</span>万日活跃用户</p>
+                        <p>今日头条:<span class="num">{{}}</span>万日活跃用户</p>
+                    </div>
+                </div>
+                <div class="bottomBox">
+                    <p class="title">受众信息</p>
+                    <div class="info">
+                        <p>性别:<span class="num">{{}}</span></p>
+                        <p>年龄:<span class="num">{{}}</span></p>
+                        <p>平台:<span class="num">{{}}</span></p>
+                        <p>网络:<span class="num">{{}}</span></p>
+                        <p>运营商:<span class="num">{{}}</span></p>
+                        <p>新用户:<span class="num">{{}}</span></p>
+                        <p>手机品牌:<span class="num">{{}}</span></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+const plainOptions = ['Apple', 'Pear', 'Orange','44','550','9982','5525'];
+const defaultCheckedList = ['Apple', 'Orange'];
+import radioCheck from './radioCheck';
+
+let newUser=[
+    {
+        value:'',
+        title:'不限'
+    },
+    {
+        value:'oneMonth',
+        title:'一月以内'
+    },
+    {
+        value:'twoMonth',
+        title:'一月到三个月'
+    },
+    {
+        value:'treeMonth',
+        title:'三月以上'
+    }
+]
+
+export default {
+    components:{
+        radioCheck,
+    },
+    data() {
+        return {
+            labelCol: { span: 4 },
+            wrapperCol: { span: 14 },
+            launchPrice:'',//手机价格
+            deviceBrand:'',//手机品牌
+            form:{
+                medialType:1,
+                sex:'',
+                launchPrice:[],//手机价格
+            },
+            marks: {
+                0: '0',
+                1000: '',
+                2000: '2000元',
+                2500: '',
+                3000: '',
+                3500: '',
+                4000: '',
+                4500: '',
+                5000: '5000元',
+                5500: '',
+                6000: '',
+                6500: '',
+                7000: '',
+                8000: '',                
+                9000: '',
+                10000: '10000元',                
+                11000: {
+                    style: {
+                        color: '#f50',
+                    },
+                    label: <strong>11000元</strong>,
+                },
+            },
+            //选择框
+            checkedList: defaultCheckedList,
+            indeterminate: true,
+            checkAll: false,
+            plainOptions,
+
+            newUser,//新用户的每一项值
+        }
+    },
+    methods: {
+        //应用按钮
+        applicatiSubmit(){
+            console.log('submit!', this.form);
+            this.$router.push('/modules/BatchCreate/directionalPackage')
+        },
+        //取消按钮
+        cancel(){
+            this.$router.push('/modules/BatchCreate/directionalPackage')
+        },
+        //huakuai de shijian 
+        slideChange(value) {
+            this.form.launchPrice=value;
+        },
+        btnChange(e){
+            console.log(e)
+        },
+
+        //多选的事件
+        checkGroupChange(checkedList) {
+            this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
+            this.checkAll = checkedList.length === plainOptions.length;
+        },
+        onCheckAllChange(e) {
+            Object.assign(this, {
+                checkedList: e.target.checked ? plainOptions : [],
+                indeterminate: false,
+                checkAll: e.target.checked,
+            });
+        },
+
+        deleteItem(item){
+            console.log(item);
+            this.checkedList=this.checkedList.filter((element,index) => {
+                return element!=item
+            });
+            if(this.checkedList.length==0){
+                this.indeterminate=false
+                this.checkAll=false
+            }
+        },
+        clearAll(){
+            this.checkedList=[];
+            this.indeterminate=false;
+            this.checkAll=false
+        },
+        //获取新用户的选中值
+        getNewUser(val){
+            console.log(val);
+            
+        },
+    },
+}
+</script>
+<style lang="scss">
+
+    .newDirectedPackage .ant-checkbox-group-item{
+        // width: 100%;
+        display: block ;
+        padding: 3px 0;
+        margin-right: 0;
+        padding: 5px 15px;
+    }
+    .newDirectedPackage .ant-checkbox-group-item:hover{
+        background-color: rgba(0,0,0,.1);
+    }
+
+    
+</style>
+<style lang="scss" scoped>
+.newDirectedPackage{
+    // background-color: #fff;
+    .title{
+        width: 100%;
+        font-size: 20px;
+        font-weight: 700;
+        padding: 15px 0;
+        text-align: center;
+        border-bottom: 1px solid #eee;
+        background-color: #fff;
+    }
+    .optBOX{
+        background-color: #fff;
+        padding: 15px 0;
+        position: relative;
+        .optItem{
+            // margin-bottom: 15px;
+            .typeName{
+                width: 130px;
+                text-align: right;
+                display: inline-block;
+                margin-right: 15px;
+            }
+            .tishi{
+                display: block;
+                
+                color: #999;
+                .tubiao{
+                    color: red;
+                    margin-right: 5px;
+                }
+            }
+            #btngroup .ant-btn:hover{
+                border-color: none;
+            }
+            .deviceBrand{
+                // background: rgb(116, 76, 76);
+                width: 100%;
+                height: 300px;
+
+            }
+            .selectBox{
+                display: flex;
+                .title{
+                    background: #f9f9f9;
+                    font-size: 14px;
+                    font-weight: 700;
+                    padding:0 15px;
+                    border-bottom: 1px solid #ddd;
+                    text-align: left;
+                    position: relative;
+                    
+                    .clear{
+                        position: absolute;
+                        top: 5px;
+                        right: 0;
+                    }
+                }
+                .selectLeft{
+                    width: 40%;
+                    margin-right: 2%;
+                    border: 1px solid #ddd;
+                    border-radius: 5px;
+                }
+                .selectRight{
+                    width: 20%;
+                    border: 1px solid #ddd;
+                    border-radius: 5px;
+                }
+                .selectBox1{
+                    height: 250px;
+                    overflow: auto;
+                    
+                    .selectList{                      
+                        display: block;
+                        width: 100%;
+                        // padding: 0 15px;
+                        // padding: 3px 0;
+                    }
+                    .selectLists{
+                        display: block;
+                        width: 100%;
+                        padding: 0 15px;
+                    }
+                    .selectLists:hover{
+                        background-color: rgba(0,0,0,.1);
+                    }
+                    .selectListitem{
+                        display: block;
+                        height: 25px;
+                        line-height: 25px;
+                        background-color: #eee;
+                        border-radius: 5px;
+                        padding: 0 10px;
+                        margin: 8px 10px;
+                        position: relative;
+                        #close{
+                            font-size: 12px;
+                            position: absolute;
+                            right: 10px;
+                            top: 5px;
+                            cursor: pointer;
+                        }
+                    }
+                }
+
+            }
+        }
+        .rightBox{
+            position: absolute;
+            top: 40px;
+            right: 20px;
+            width: 200px;
+            border: 1px solid #ddd;
+            border-radius: 10px;
+            font-size: 12px;
+            
+            .topBox,.bottomBox{
+                padding: 10px 15px;
+                background-color: #f9f9f9;
+                border-bottom: 1px solid #eee;
+                border-radius: 10px;
+                .title{
+                    background-color: #f9f9f9;
+                    font-size: 14px;
+                    text-align: left;
+                    margin: 0 0 10px;
+                    padding: 5px 0;
+                    font-weight: 400;
+                    border-bottom: 0;
+                    // border-radius: 10px;
+                }
+                .info p{
+                    margin-bottom: 6px;
+                    color: #999;
+                }
+                .info .num{
+                    color: #000;
+                    font-weight: 600;
+                }
+            }
+            .bottomBox{
+                background-color: #fff;
+                border-bottom:0;
+                 .title{
+                    background-color: #FFF;
+                }
+            }
+        }
+        
+    }
+
+    
+}
+</style>

+ 130 - 0
src/views/modules/BatchCreate/radioCheck.vue

@@ -0,0 +1,130 @@
+<template>
+    <div class="radioCheck" >
+        <label :class="{'item':true,'selection': selectValue.indexOf(item.value)>-1}" v-for="(item,index) in checkArr" :key="index" >
+            <span>
+                <input type="checkbox" :value="item.value" class="checkbox-button-input" @click="radioCheckChange">
+            </span>
+            <span>{{item.title}}</span>
+        </label>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectValue:[''],
+            currentSelect:'',
+        }
+    },
+   
+    props:['checkArr'],
+    methods: {
+        //单选多选的事件
+        radioCheckChange(e){
+            // console.log(e.target);
+            this.currentSelect=e.target.value;
+            if(e.target.value=='' || this.selectValue.length==0 ){
+                this.selectValue=[''];
+            }else{
+                if(this.selectValue.indexOf('')>-1){
+                    let i=this.selectValue.indexOf('');
+                    this.selectValue.splice(0,1)
+                }
+                
+                if(this.selectValue.indexOf(e.target.value)==-1){
+                    this.selectValue.push(e.target.value)
+                }else{
+                    let index=this.selectValue.indexOf(e.target.value);
+                    if(index==0){
+                        this.selectValue=[...this.selectValue.splice(1)]
+                    }else{
+                        this.selectValue=[...this.selectValue.splice(0,index),...this.selectValue.splice(index)]
+                    }
+                }
+
+                if(this.selectValue.length==0){
+                    this.selectValue=[''];
+                }
+                
+            }
+            // console.log(this.currentSelect,this.selectValue);
+            this.$emit('getSonValue',this.selectValue)
+        },
+    },
+    mounted() {
+        
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.radioCheck{        
+    border-radius: 5px;
+    height: 32px;
+    .item{
+        // min-width: 80px;
+        padding: 0px 15px;
+        text-align: center;
+        display: inline-block;
+        border: 1px solid #ccc;
+        border-left: 0;
+        height: 32px;
+        line-height: 32px;
+        cursor: pointer;
+        .checkbox-button-input{
+            width: 0;
+            height: 0;
+            opacity: 0;
+        }
+
+    }
+    .item::after{
+        content: "";
+        position: absolute;
+        right: 1px;
+        top: -2px;
+        width: 0;
+        height: 0;
+        border-top: 6px solid transparent;
+        border-bottom: 6px solid transparent;
+        border-left: 6px solid;
+        border-left-color: #e0e0e0;
+        -webkit-transform: rotate(-45deg);
+        -ms-transform: rotate(-45deg);
+        transform: rotate(-45deg);
+        border-radius: 2px;
+    }
+    .item:hover{
+        color: #1890ff;
+    }
+    .selection{
+        color: #fff;
+        background: #1890ff;
+    }
+    .item.selection:hover{
+        // color: #1890ff;
+        color: #fff;
+        background: #40a9ff;
+        border-color: #40a9ff;
+    }
+    .item.selection:after{
+        border-left: 6px solid #1890ff;
+    }
+    .item:hover::after{
+        // border-color: #40a9ff;
+        border-left: 6px solid #40a9ff;
+    }
+
+}
+.radioCheck .item:first-child {
+    border-radius: 5px 0 0 5px;
+    border-left: 1px solid #ccc;
+}
+.radioCheck .item:first-child:after{
+    border-left: 0;
+}
+.radioCheck .item:last-child {
+    border-radius: 0px 5px 5px 0px;
+}
+</style>

+ 257 - 2
src/views/modules/Statistics/performanceRelated/performanceRelated.vue

@@ -217,8 +217,59 @@ const columnsFixd = [
     
   }
 ]
+const elseColumns = [
+  {
+    title: '姓名',
+    dataIndex: 'userName',
+    align: 'center',
+    key:'userName',
+    scopedSlots: { customRender: 'userName' }
+  },
+  {
+    title: '部门',
+    dataIndex: 'department',
+    align: 'center', 
+    key: 'department',
+    scopedSlots: { customRender: 'department' }
+  },
+  {
+    title: '职位',
+    dataIndex: 'roleName',
+    align: 'center',
+    
+    key: 'roleName',
+    scopedSlots: { customRender: 'roleName' }
+  },
+  {
+    title: '媒体类型',
+    dataIndex: 'mediaType',
+    align: 'center',
+    scopedSlots: { customRender: 'mediaType' }
+  },
+   {
+    title: '季度',
+    dataIndex: 'quarters',
+    align: 'center',
+    scopedSlots: { customRender: 'quarters' }
+  },
+  {
+    title: '消耗',
+    dataIndex: 'cost',
+    align: 'center',
+    scopedSlots: { customRender: 'cost' },
+    sorter:()=>{}
+  },
+ 
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    align: 'center',
+    scopedSlots: { customRender: 'operation' },
+    
+  }
+]
 
-const detailColumns=[
+const operateDetailColumns=[
     {
         title: '季度',
         dataIndex: 'quarters',
@@ -252,6 +303,195 @@ const detailColumns=[
   },
 ]
 
+const saleDetailColumns = [
+    {
+        title: '季度',
+        dataIndex: 'quarters',
+        align: 'center',
+        scopedSlots: { customRender: 'quarters' },
+        sorter:()=>{},
+        width:110
+    },
+    {
+        title: '老客消耗',
+        dataIndex: 'projectName',
+        align: 'center',
+        scopedSlots: { customRender: 'projectName' },
+        sorter:()=>{},
+        width:120
+    },
+    {
+        title: '新客消耗',
+        dataIndex: 'authName',
+        align: 'center',
+        scopedSlots: { customRender: 'authName' },
+        sorter:()=>{},
+        width:120,
+    },
+    {
+        title: '老客提成比例',
+        dataIndex: 'projectName',
+        align: 'center',
+        scopedSlots: { customRender: 'projectName' },
+        sorter:()=>{},
+        width:100
+    },
+    {
+        title: '新客提成比例',
+        dataIndex: 'authName',
+        align: 'center',
+        scopedSlots: { customRender: 'authName' },
+        sorter:()=>{},
+        width:100,
+    },
+    {
+        title: '广告主名称',
+        dataIndex: 'cost',
+        align: 'center',
+        scopedSlots: { customRender: 'cost' },
+        sorter:()=>{},
+        width:200,
+  },
+    {
+        title: '总消耗',
+        dataIndex: 'cost',
+        align: 'center',
+        scopedSlots: { customRender: 'cost' },
+        sorter:()=>{}
+  },
+]
+
+const designDetailColumns = [
+    {
+        title: '媒体类型',
+        dataIndex: 'medialType',
+        align: 'center',
+        scopedSlots: { customRender: 'medialType' },
+        width:80,
+        customRender: (value, row, index) => {
+          const obj = {
+            children: value,
+            attrs: {},
+          };
+          if (index%5 === 0) {
+            obj.attrs.rowSpan = 5;
+          }
+          else{
+            obj.attrs.rowSpan = 0;
+          }
+         
+          return obj;
+        },
+    },
+    {
+        title: '项目',
+        dataIndex: 'projectName',
+        align: 'center',
+        scopedSlots: { customRender: 'projectName' },
+        width:100,
+        customRender: (value, row, index) => {
+          const obj = {
+            children: value,
+            attrs: {},
+          };
+          if (index%5 === 0) {
+            obj.attrs.rowSpan = 5;
+          }
+          else{
+            obj.attrs.rowSpan = 0;
+          }
+         
+          return obj;
+        },
+    },
+    {
+        title: '视频',
+        dataIndex: 'url',
+        align: 'center',
+        scopedSlots: { customRender: 'url' },
+        width:120,
+        customRender: (value, row, index) => {
+          const obj = {
+            children: value,
+            attrs: {},
+          };
+          if (index%5 === 0) {
+            obj.attrs.rowSpan = 5;
+          }
+          else{
+            obj.attrs.rowSpan = 0;
+          }
+         
+          return obj;
+        },
+    },
+    {
+        title: '消耗数',
+        dataIndex: 'cost',
+        align: 'center',
+        scopedSlots: { customRender: 'cost' },
+        sorter:()=>{},
+        width:100,
+        customRender: (value, row, index) => {
+          const obj = {
+            children: value,
+            attrs: {},
+          };
+          if (index%5 === 0) {
+            obj.attrs.rowSpan = 5;
+          }
+          else{
+            obj.attrs.rowSpan = 0;
+          }
+         
+          return obj;
+        },
+    },
+    {
+        title: '设计负责人',
+        dataIndex: 'authName',
+        align: 'center',
+        scopedSlots: { customRender: 'authName' },
+        width:100,
+        customRender: (value, row, index) => {
+          const obj = {
+            children: value,
+            attrs: {},
+          };
+          if (index%5 === 0) {
+            obj.attrs.rowSpan = 5;
+          }
+          else{
+            obj.attrs.rowSpan = 0;
+          }
+         
+          return obj;
+        },
+    },
+    {
+        title: '职位',
+        dataIndex: 'cost',
+        align: 'center',
+        scopedSlots: { customRender: 'cost' },
+        width:50,
+  },
+    {
+        title: '姓名',
+        dataIndex: 'cost',
+        align: 'center',
+        scopedSlots: { customRender: 'cost' },
+        width:50,
+  },
+    {
+        title: '绩效占比',
+        dataIndex: 'cost',
+        align: 'center',
+        scopedSlots: { customRender: 'cost' },
+  },
+]
+    
+
+
 export default {
     mixins:[JeecgListMixin],
     data() {
@@ -269,6 +509,7 @@ export default {
             //table数据
             columns:JSON.parse(JSON.stringify(columnsFixd)) ,//table的表头
             columnsFixd,
+            elseColumns,
             tableData:[],
             scrollX:0,       
             tableWidth: '',//设置表格的列宽
@@ -279,7 +520,10 @@ export default {
             visibleDetail:false, //明细表的开关
             detailData:[],
             loadingDetail:false,
-            detailColumns:JSON.parse(JSON.stringify(detailColumns)),
+            detailColumns:JSON.parse(JSON.stringify(operateDetailColumns)),
+            operateDetailColumns,//运行
+            saleDetailColumns,//销售的详细表头
+            designDetailColumns,//设计的详细表头
 
         }
     },
@@ -287,6 +531,16 @@ export default {
         moment,
         //chaxun anniu 
         search(){
+            if(this.department=='运营部'){
+                this.columns=this.columnsFixd;
+                this.detailColumns=this.operateDetailColumns
+            }else if(this.department=='设计部'){
+                this.columns=this.elseColumns;
+                this.detailColumns=this.designDetailColumns
+            }else if(this.department=='销售部'){
+                this.columns=this.elseColumns;
+                this.detailColumns=this.saleDetailColumns
+            }
             this.tableHttp();
         },
          //导出报表
@@ -373,6 +627,7 @@ export default {
         },
         //部门改变
         departmentChange(val){
+            console.log(val)
             this.department=val
         },
         //公司改变

+ 2 - 7
vue.config.js

@@ -72,13 +72,8 @@ module.exports = {
         // target: 'http://192.168.2.115:8080', //请求本地 需要jeecg-boot后台项目  祚云
         // target: 'http://192.168.1.54:8080', //请求本地 需要jeecg-boot后台项目  孙震
         // target: 'http://192.168.1.165:8088', //请求本地 需要jeecg-boot后台项目  毕洁泉
-        // target: 'http://192.168.1.165:8848', //请求本地 需要jeecg-boot后台项目  毕洁泉
-<<<<<<< HEAD
-        target: 'http://192.168.0.53:8088', //请求本地 需要jeecg-boot后台项目  毕洁泉
-        // target: 'http://192.168.1.251:8088', //请求本地 需要jeecg-boot后台项目 
-=======
-        target: 'http://adsp.tjyourong.com.cn/', //请求本地 需要jeecg-boot后台项目 
->>>>>>> 325b588c57ce231272ea2da86beeceea1eff7b69
+        // target: 'http://192.168.1.165:8848', //请求本地 需要jeecg-boot后台项目  毕洁泉        
+        target: 'http://192.168.1.251:80', //请求本地 需要jeecg-boot后台项目 
         ws: false,
         changeOrigin: true,
         // pathRewrite: {