Jelajahi Sumber

Merge branch 'master' of http://git.tjyourong.com.cn/ctop/adsp-vue

zhuxinbo 5 tahun lalu
induk
melakukan
89bf27f2fb

+ 185 - 0
src/views/modules/BatchCreate/MultiCheckBox.vue

@@ -0,0 +1,185 @@
+<template>
+    <div class="multiCheckbox" >
+        <div class="linkMulti_list" ref="mycheckMul">
+            <div class="title">{{title}}</div>
+            <ul class="linkMulti_list_one">
+                <li class="checkAll"><a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange"> 全选</a-checkbox> </li>
+                <li @click="listItemClick(item)" v-for="(item,index) in listArr" :key='index' >
+                    <a-checkbox   @change='checkItemChange' >{{item.name}}</a-checkbox>                       
+                    <span class="more" v-show="item.children"><a-icon type="right" /></span>
+                </li>                    
+            </ul>                               
+        </div> 
+        <MultiCheckBox class="childClass"  :title='currentItem.name'  :listArr='currentItem.children'  v-if="currentItem" :curLayerNum='currentLayerNum'  />     
+    </div>    
+</template>
+
+<script>
+const plainOptions = ['Apple', 'Pear', 'Orange'];
+    export default {
+        name:'MultiCheckBox',
+        props:['title','listArr','curLayerNum'],
+        data() {
+            return {
+               checkedList: [],
+                indeterminate: false,
+                checkAll: false,
+                plainOptions,
+                layersNum:0,//控制层级
+                currentLayerNum:0,//当前层级是多少层,
+                currentItem:null,
+            }
+        },
+        methods: {
+            onChange(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,
+                });
+            },
+            listItemClick(item){
+                console.log(item);
+                if(item.children){
+                    this.currentLayerNum++;
+                    this.currentItem=item;
+                    this.$refs.mycheckMul.style='width:50%;border-right:1px solid #ccc';
+                    
+                }
+            },
+            checkItemChange(e){
+                console.log(e.target.checked);
+                // if(e.target.checked){
+
+                // }   
+            },
+            //判断传入的数组的children层数
+            getLayersNum(arr){
+                arr.map((item,index)=>{
+                    if(item.children){
+
+                    }
+                })
+            }
+        },
+        mounted() {
+            this.currentLayerNum=this.curLayerNum;
+            console.log(this.curLayerNum)
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+.multiCheckbox{   
+    // width:100%;
+    // overflow: auto;   
+    height: 100%;
+    display: flex;
+    overflow: scorll;
+    ul,li{
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+    .linkMulti_list{
+        // padding: 5px 0px;
+        display: inline-block;
+        width: 100%;
+        height: 300px;
+        box-sizing: border-box;       
+        overflow: hidden;   
+        .title{
+            height: 36px;
+            line-height: 36px;
+            font-size: 14px;
+            font-weight: 600;
+            border-radius: 5px 5px 0 0;
+            background-color: rgb(248,249,250);
+            padding: 0 15px;
+            border-bottom: 1px solid #ccc;
+        }
+        ul{
+            height: 264px;
+            overflow: auto;
+        }
+        .checkAll{
+            
+        }
+        li{
+            height: 30px;
+            line-height: 30px;
+            cursor: pointer;
+            padding: 0 15px;
+            position: relative;
+            .more{
+                position:absolute;
+                top: 2px;
+                right: 10px;
+            }
+        }
+        li:hover{
+            background-color: rgb(240,240,240);
+        }
+    
+    }
+    .ant-checkbox-group{
+        width: 100%;
+    }
+}
+ul,li{
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+.linkMulti_list{
+    // padding: 5px 0px;
+    display: inline-block;
+    width: 100%;
+    min-width: 200px;
+    height: 300px;
+    box-sizing: border-box;       
+    overflow: auto;
+    .title{
+        height: 36px;
+        line-height: 36px;
+        font-size: 14px;
+        font-weight: 600;
+        border-radius: 5px 5px 0 0;
+        background-color: rgb(248,249,250);
+        padding: 0 15px;
+        border-bottom: 1px solid #ccc;
+    }
+    ul{
+        height: 264px;
+        overflow: auto;   
+    }
+    .checkAll{
+        
+    }
+    li{
+        height: 30px;
+        line-height: 30px;
+        cursor: pointer;
+        padding: 0 15px;
+        position: relative;
+        .more{
+            position:absolute;
+            top: 2px;
+            right: 10px;
+        }
+    }
+    li:hover{
+        background-color: rgb(240,240,240);
+    }
+
+}
+
+.addborder{
+    border-right: 1px solid #ccc;
+}
+
+</style>

+ 1 - 2
src/views/modules/BatchCreate/directionalPackage.vue

@@ -151,8 +151,7 @@ export default {
     }, 
     methods: {
         openDirectionalPackage(){
-            this.$router.push({path:'/modules/BatchCreate/newDirectedPackage'})
-            console.log()
+            this.$router.push({path:'/BatchCreate/newDirectedPackage'})
         },
         //自定义列
         addcolumns(){

+ 82 - 0
src/views/modules/BatchCreate/linkMultiSelect.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="linkMultiSel">
+        <div class="leftBox">
+            <div class="">
+                <MultiCheckBox  :title="title" :listArr='listArr' :curLayerNum='1' />
+            </div>           
+           
+        </div>
+        
+        <div class="rightBox"  >
+            <div class="title">已选</div>
+            <div class="linkMulti_list">
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import MultiCheckBox from './MultiCheckBox'
+    export default {
+        props:['title','listArr'],
+        components:{
+            MultiCheckBox,
+        },
+        data() {
+            return {
+                
+            }
+        },
+        methods: {
+            
+        },
+        mounted() {
+            
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+.linkMultiSel{
+    width: 100%;
+    height: 300px;
+    display: flex;
+    ul,li{
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+    .leftBox{
+        width: 62%;
+        margin-right: 3%;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+
+    }
+    .rightBox{
+        width: 35%;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+    }
+    .title{
+        height: 36px;
+        line-height: 36px;
+        font-size: 14px;
+        font-weight: 600;
+        border-radius: 5px 5px 0 0;
+        background-color: rgb(248,249,250);
+        padding: 0 15px;
+        border-bottom: 1px solid #ccc;
+    }
+    
+
+
+
+
+
+
+    
+}
+</style>

+ 562 - 12
src/views/modules/BatchCreate/newDirectedPackage.vue

@@ -14,15 +14,65 @@
                             <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-form-model-item label="地域:" class="optItem" >
+                        <a-radio-group default-value="" button-style="solid" v-model="regionValue">
                             <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-button value="REGION_LEVEL_PROVINCE">按省市</a-radio-button>
+                            <a-radio-button value="REGION_LEVEL_DISTRICT">按区县</a-radio-button>
+                            <a-radio-button value="REGION_LEVEL_BUSINESS_DISTRICT">按商圈</a-radio-button>
                         </a-radio-group>
-                        <span class="">
-
-                        </span>
+                        <div class="region" v-show="regionValue!=''">
+                            <!-- 省市 -->
+                            <div class="provincyCity" v-if="regionValue=='REGION_LEVEL_PROVINCE'">
+                                <div class="region_input">
+                                    <a-input-search placeholder="输入搜索的省市" enter-button  />
+                                </div>
+                                <div class="tabChange">
+                                    <div class="tabBox">
+                                        <a-tabs v-model="cityTab" @change="cityTabChange">
+                                            <a-tab-pane key="geography" tab="地理划分">
+                                                <linkMultiSelect title='省份' :listArr='shengshiArr' @getSelectedArr='getSelectedCityArr'/>
+                                            </a-tab-pane>
+                                            <a-tab-pane key="development" tab="发展划分" >
+                                                <linkMultiSelect title='等级' :listArr='[]' @getSelectedArr='getSelectedCityArr'/>
+                                            </a-tab-pane>
+                                        </a-tabs>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- 区县 -->
+                            <div class="district" v-else-if="regionValue=='REGION_LEVEL_DISTRICT'">
+                                <linkMultiSelect title='省份' :listArr='[]' @getSelectedArr='getSelectedCityArr'/>
+                            </div>
+                            <!-- 商圈 -->
+                            <div class="businessCircle" v-else>
+                                <div class="tabChange">
+                                    <div class="tabBox">
+                                        <a-tabs v-model="businessTab" @change="businessTabChange">
+                                            <a-tab-pane key="businessCircle" tab="商圈">
+                                                <a-cascader :options="businessOptionsArr" change-on-select @change="businessChange" />
+                                                <linkMultiSelect :titleArr='["商圈"]' :listArr='[]' @getSelectedArr='getSelectedCityArr'/>
+                                            </a-tab-pane>
+                                            <a-tab-pane key="addFromMap" tab="从地图添加" >
+                                                <a-input-search placeholder="请输入搜索地址"  v-model="MapselectValue" @search="MapSearch">
+                                                    <a-button slot="enterButton">
+                                                        搜索
+                                                    </a-button>
+                                                </a-input-search>
+                                            </a-tab-pane>
+                                        </a-tabs>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="region_people">
+                                <a-radio-group v-model="regionPeopleValue" @change="regionPeopleChange">
+                                    <a-radio value="HOME">居住在该地区的用户</a-radio>
+                                    <a-radio value="TRAVEL"> 到该地区旅行的用户</a-radio>
+                                    <a-radio value="ALL">该地区内的所有用户</a-radio>
+                                    <a-radio value="CURRENT">正在该地区的用户</a-radio>
+                                </a-radio-group>
+                            </div>
+                        </div>                        
                     </a-form-model-item>
                     <a-form-model-item label="性别:" class="optItem">
                          <a-radio-group default-value="" v-model="form.sex" button-style="solid">
@@ -43,12 +93,171 @@
                         <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-group v-model="interestActionMode" 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-button value="RECOMMEND">
+                                系统推荐
+                                <a-tooltip>
+                                    <template slot="title">
+                                        如与自定义人群包同时使用,系统推荐不生效
+                                    </template>
+                                    <a-icon type="question-circle" />
+                                </a-tooltip>
+                            </a-radio-button>
+                            <a-radio-button value="CUSTOM">自定义</a-radio-button>
                         </a-radio-group>
+                        
                     </a-form-model-item>
+                    <div class="interestActionMode" v-show="interestActionMode=='CUSTOM'">
+                            <a-form-model-item label="行为:" class="optItem">
+                                <div>
+                                    <span style="margin-right:5px">在</span> 
+                                    <a-select
+                                        mode="multiple"
+                                        label-in-value
+                                        style="width: 210px"
+                                        placeholder="所有行为场景中"
+                                        @change="actionSceneChange"
+                                        :maxTagCount='1'
+                                    >
+                                        <a-select-option value='E-COMMERCE'> 电商互动行为</a-select-option>
+                                        <a-select-option value='NEWS'> 咨询互动行为</a-select-option>
+                                        <a-select-option value='APP'> APP推广行为</a-select-option>
+                                    </a-select>
+                                    <span>中,选择用户</span>
+                                    <a-select  v-model="actionDays" style="width: 90px">
+                                        <a-select-option :value='7'>7天 </a-select-option>
+                                        <a-select-option :value='15'>15天 </a-select-option>
+                                        <a-select-option :value='30'>30天 </a-select-option>
+                                        <a-select-option :value='60'>60天 </a-select-option>
+                                        <a-select-option :value='90'>90天 </a-select-option>
+                                        <a-select-option :value='180'>180天 </a-select-option>
+                                        <a-select-option :value='365'>365天 </a-select-option>
+                                    </a-select>
+                                    <span>内发生的行为:</span> 
+                                </div>
+                                <div class="actionBottom">
+                                    <div class="action_left">
+                                        <a-tabs default-active-key="1" >
+                                            <a-tab-pane key="1" tab="添加类目词">
+                                                <div class="Taxonomic">
+                                                    <div class="Taxonomic_search">
+                                                         <a-input-search placeholder="请输入行为类目词" style="width: 100%" @search="TaxonomicSearch" />
+                                                    </div>
+                                                    <div class="Taxonomic_checkbox">
+
+                                                    </div>
+                                                    <div class="Taxonomic_relevant">
+                                                        <span class="Taxonomic_relevant_top">
+                                                            <span class="Taxonomic_relevant_top_title">{{}}相关词:</span>
+                                                            <a-button type='link' class="Taxonomic_relevant_top_more">更多></a-button>
+                                                        </span>
+                                                        
+                                                        <span class="Taxonomic_relevant_bottom">
+                                                            <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+游戏</a>
+                                                            <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+手游</a>
+                                                            <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+王者荣耀</a>
+                                                            <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+吃鸡</a>
+                                                        </span>
+                                                    </div>
+                                                </div>
+                                            </a-tab-pane>
+                                            <a-tab-pane key="2" tab="添加关键词" >
+                                                <div class="Taxonomic keyWord">
+                                                    <div class="Taxonomic_search">
+                                                         <a-input-search placeholder="请输入行为类目词或关键词" style="width: 100%"  @search="keyWordSearch" />
+                                                    </div>
+                                                    <div class="Taxonomic_checkbox keyWords_box">
+                                                        <div class="keyWords_box_title">
+                                                            {{}}
+                                                        </div>
+                                                        <ul class="keyWords_box_list">
+                                                            <li>
+                                                                <span class="mingzi">游戏</span>
+                                                                <span class="renshu">21亿</span>
+                                                                <span class="caozuo" >
+                                                                    <a href="javascript:;" class="addKeywords">添加</a>
+                                                                    <a href="javascript:;" class="searchKeyWord">查关键词</a>
+                                                                </span>
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <div class="Taxonomic_relevant">
+                                                        <span class="Taxonomic_relevant_top">
+                                                            <a href="javascript:;" class="Taxonomic_relevant_bottom_item">添加全部“{{}}”相关词</a>
+                                                        </span>
+                                                    </div>
+                                                </div>
+                                            </a-tab-pane>                                           
+                                        </a-tabs>
+                                    </div>
+                                    <div class="action_right">
+                                        <div class="action_right_title">
+                                            <span class="action_right_sum">还可以添加行为:{{}}个</span>
+                                            <span class="action_right_info">
+                                                <span>类目词:{{}}</span>
+                                                <span>关键词:{{}}</span>
+                                            </span>
+                                            <a-button type='link' class="action_right_btn">清空</a-button>
+                                        </div>
+                                        <div class="action_right_bottom">
+                                            <div class="action_right_option">
+                                                <a-select v-model="actOrint" style="width: 80px;"  >
+                                                    <a-select-option value="all">
+                                                        全部
+                                                    </a-select-option>
+                                                    <a-select-option value="lucy">
+                                                        类目词
+                                                    </a-select-option>
+                                                    <a-select-option value="disabled" >
+                                                        关键词
+                                                    </a-select-option>
+                                                </a-select>
+                                                <span class="coverPeople">覆盖人数</span>
+                                            </div>
+                                            <div class="action_right_select_list">
+                                                <ul>
+                                                    <li>
+                                                        <span class="mingzi">游戏</span>
+                                                        <span class="renshu">21亿</span>
+                                                        <span class="caozuo" >
+                                                             <a href="javascript:;" class="delete">删除</a>
+                                                             <a href="javascript:;" class="searchKeyWord">查关键词</a>
+                                                        </span>
+                                                    </li>
+                                                    <li>
+                                                        <span class="mingzi">游戏</span>
+                                                        <span class="renshu">21亿</span>
+                                                        <span class="caozuo" >
+                                                             <a href="javascript:;" class="delete">删除</a>
+                                                             <a href="javascript:;" class="searchKeyWord">查关键词</a>
+                                                        </span>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                            <div class="action_right_AISelect">
+                                                <a-tooltip class="actionTooltip">
+                                                    <template slot="title">
+                                                        已添加的行为关键词需大于20个,才可以使用自动选词
+                                                    </template>
+                                                        <a-button type='link' :disabled='AIselect'>使用自动选词</a-button>
+                                                        
+                                                </a-tooltip>
+                                                <a-tooltip class="actionTooltip">
+                                                    <template slot="title">
+                                                        系统根据行为定向所有已选结果,自动推荐词包
+                                                    </template>
+                                                        <a-icon type="question-circle" />
+                                                </a-tooltip>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </a-form-model-item>
+                            <a-form-model-item label="兴趣:" class="optItem">
+
+                            </a-form-model-item>
+                        </div>
                     <a-form-model-item label="平台:" class="optItem">
                         <radioCheck :checkArr='platformArr' @getSonValue='getNewUser' />
                     </a-form-model-item>
@@ -162,7 +371,7 @@
 const plainOptions = ['Apple', 'Pear', 'Orange','44','550','9982','5525'];
 const defaultCheckedList = ['Apple', 'Orange'];
 import radioCheck from './radioCheck';
-
+import linkMultiSelect from './linkMultiSelect'
 let newUser=[
     {
         value:'',
@@ -265,9 +474,70 @@ let ageArr=[
     },
 ]
 
+let options=[
+        {
+          value: 'zhejiang',
+          label: 'Zhejiang',
+          children: [
+            {
+              value: 'hangzhou',
+              label: 'Hangzhou',
+              children: [
+                {
+                  value: 'xihu',
+                  label: 'West Lake',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          value: 'jiangsu',
+          label: 'Jiangsu',
+          children: [
+            {
+              value: 'nanjing',
+              label: 'Nanjing',
+              children: [
+                {
+                  value: 'zhonghuamen',
+                  label: 'Zhong Hua Men',
+                },
+              ],
+            },
+          ],
+        },
+];
+
+let shengshiArr=[
+    {name:'北京'},
+    {name:'天津'},
+    {
+        name:'山西',
+        children:[
+            {
+                name:'太原',
+            },
+            {
+                name:'阳泉',
+                children:[
+                    {
+                        name:'盂县',
+                        children:[
+                            {
+                                name:'上社镇'
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    },
+]
 export default {
     components:{
         radioCheck,
+        linkMultiSelect
     },
     data() {
         return {
@@ -315,6 +585,25 @@ export default {
             carrierArr,//运营商
             ageArr,//受众年龄
             platformArr,//受众平台
+            //地域下的人群的受众位置分类
+            regionPeopleValue:'HOME',
+            regionValue:'',//地域的选择项
+            cityTab:'geography',//省市下的tab切换
+            businessTab:'businessCircle',//商圈的tab值
+            businessOptionsArr:[],//商圈的联动数据
+            MapselectValue:undefined,//地图的搜索地址
+
+            //行为兴趣选择
+            interestActionMode:'',
+            actionScene:[],//行为场景
+
+            actionDays:30,//行为天数
+            actOrint:'all',
+            TaxonomicValue:undefined,//行为下的类目词
+            keyWordValue:undefined,//行为下的关键词
+            AIselect:true,//行为下的自动选词是否可用
+
+            shengshiArr,
         }
     },
     methods: {
@@ -366,8 +655,56 @@ export default {
         //获取新用户的选中值
         getNewUser(val){
             console.log(val);
+        },
+        //地域选择里的搜索
+        regionOnSearch(value) {
+            console.log(value);
+        },
 
+        //地域里的受众人群的位置
+        regionPeopleChange(e){
+            console.log(e.target.value,this.regionPeopleValue)
         },
+        //获取选中的城市
+        getSelectedCityArr(val){
+            console.log(val)
+        },
+        //省市的tab切换
+        cityTabChange(key){
+            console.log(key)
+        },
+        //商圈的tab改变
+        businessTabChange(key){
+            console.log(key)
+        },
+
+        //商圈的联动改变
+
+        businessChange(val){
+            console.log(val)
+        },
+        //地图的搜索事件
+        MapSearch(val){
+            console.log(val)
+        },
+
+        //行为场景
+        actionSceneChange(value){
+            console.log(value)
+        },
+
+        //行为下的 类目搜索框
+        TaxonomicSearch(value){
+            console.log(value);
+            this.TaxonomicValue=value
+        },
+        //行为下的 关键词搜索框
+        keyWordSearch(value){
+            console.log(value);
+            this.keyWordValue=value
+        },
+
+        
     },
 }
 </script>
@@ -501,7 +838,7 @@ export default {
             right: 20px;
             width: 230px;
             // height: 500px;
-            max-height: 450px;
+            max-height: 500px;
             border: 1px solid #ddd;
             border-radius: 10px;
             font-size: 12px;
@@ -543,4 +880,217 @@ export default {
 
     
 }
+</style>
+
+<style lang="scss">
+    .actionBottom{
+        ul,li{
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+        width: 70%;
+        height: 400px;
+        display:flex;     
+        margin-top: 20px;
+        .action_left{
+            width:60% ;
+            margin-right: 2%;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            padding: 10px 2px;
+            .Taxonomic{
+                padding: 0 10px;
+                .Taxonomic_checkbox{
+                    margin-top: 10PX;
+                    height: 220px;
+                    border: 1px solid #ccc;
+                    border-radius: 5px;
+                }
+                
+                .Taxonomic_relevant{
+                     font-size: 12px;
+                     margin-top: 10px;
+                    .Taxonomic_relevant_top{
+                        position: relative;
+                        display: block;
+                        height: 20px;
+                        line-height: 20px;
+                        .Taxonomic_relevant_top_title{
+                           
+                        }
+                        .Taxonomic_relevant_top_more{
+                            position: absolute;
+                            top: 0;
+                            right: 0;
+                            font-size: 12px;
+                            display: block;
+                            height: 20px;
+                            line-height: 20px;
+                        }
+                    }
+                    .Taxonomic_relevant_bottom{
+                        display: block;
+                        height: 20px;
+                        line-height: 20px;
+                        .Taxonomic_relevant_bottom_item{
+                            margin-right: 5px;
+                        }
+                    }
+                }
+            }
+            .keyWords_box_title{
+                font-size: 16px;
+                font-weight: 600;
+                color: #000;
+                height: 35px;
+                line-height: 35px;
+                background-color: rgb(248,249,250);
+            }
+            .keyWords_box_list{
+                height: 185px;
+                overflow: auto;
+                li{
+                    height: 30px;
+                    line-height: 30px;
+                    font-size: 14px;
+                    color: #333;
+                    .caozuo{
+                        display: none;
+                        // display: inline-block;
+                        width:50%;
+                        text-align: right;
+                        .delete{
+                            margin-left: 5px;
+                        }
+                        .searchKeyWord{
+                            margin-left: 15px;
+                        }
+                    }
+                    .mingzi{
+                        display: inline-block;
+                        width: 30%;
+                        
+                    }
+                    .renshu{
+                        display: inline-block;
+                        width: 15%;
+                        line-height: 30px;
+                        height: 30px;
+                    }
+                }
+            }
+            .keyWords_box_list li:hover .caozuo{
+                display: inline-block;
+            }
+        }
+        .action_right{
+            width: 35%;
+            height: 100%;
+            border-radius: 5px; 
+            border: 1px solid #ccc;
+            .action_right_title{
+                background-color: rgb(248,249,250);
+                padding: 10px 10px 0;
+                border-radius: 5px 5px 0 0;
+                border-bottom: 1px solid #ccc;
+                position: relative;
+            }
+            .action_right_sum{
+                display: block;
+                margin-bottom: 5px;
+                height: 20px;
+                line-height: 20px;
+                font-size: 14px;
+                color: #333;
+            }
+            .action_right_info{
+                display: block;
+                margin-bottom: 5px;
+                height: 20px;
+                line-height: 20px;
+                font-size: 14px;
+                color: #999;
+            }
+            .action_right_btn{
+                position: absolute;
+                top: 0px;
+                right: -5px;
+            }
+            .action_right_bottom{
+                
+                .action_right_option{
+                    
+                    border-bottom: 1px  solid #ccc;
+                }
+                .ant-select-selection{
+                    border: 0;
+                }
+                .coverPeople{
+                    margin-left: 5px;
+                }
+                .caozuo{
+                    display: none;
+                    .delete{
+                        margin-left: 5px;
+                    }
+                    .searchKeyWord{
+                        margin-left: 2px;
+                    }
+                }
+                .mingzi{
+                    display: inline-block;
+                    width: 70px;
+                    
+                }
+                .renshu{
+                    display: inline-block;
+                    width: 40px;
+                    line-height: 20px;
+                    height: 20px;
+                }
+                .action_right_select_list{
+                    padding: 5px 10px;
+                    height: 250px;
+                    overflow: auto;
+                }
+                .action_right_select_list li{
+                    line-height: 20px;
+                    height: 20px;
+                }
+                .action_right_select_list li:hover .caozuo{
+                    display: inline-block;
+                }
+
+                .action_right_AISelect{
+                    height: 30px;
+                    line-height: 30px;
+                    font-size: 14px;
+                    padding: 5px 10px;
+                    border-top: 1px solid #ccc;
+                }
+            }
+        }
+    }
+    .ant-tooltip-inner,.ant-tooltip,.ant-tooltip-arrow::before{
+        background-color: #fff;
+        color: #666;
+        font-size: 12px;
+    }
+</style>
+
+<style lang="scss">
+    .region{
+        width: 70%;
+        margin-top: 10px;
+        .region_input{
+            width: 60%;
+        }
+        .tabChange{
+
+        }
+        .ant-tabs-bar{
+            border: 0;
+        }
+    }
 </style>

+ 45 - 29
src/views/modules/Statistics/accountReport.vue

@@ -347,21 +347,21 @@ const columnsFixd = [
     scopedSlots: { customRender: 'date' },
     align: 'center',
     key:'date',
-    customRender: (value, row, index) => {
-      const obj = {
-        children: value,
-        attrs: {}
-      }
-      if(length){
-          // console.log(length)
-        if (index == 0) {           
-            obj.attrs.rowSpan = length
-        } else if(index>0&&index<length){
-            obj.attrs.rowSpan = 0
-        }
-      }
-      return obj
-    }
+    // customRender: (value, row, index) => {
+    //   const obj = {
+    //     children: value,
+    //     attrs: {}
+    //   }
+    //   if(length){
+    //       // console.log(length)
+    //     if (index == 0) {           
+    //         obj.attrs.rowSpan = length
+    //     } else if(index>0&&index<length){
+    //         obj.attrs.rowSpan = 0
+    //     }
+    //   }
+    //   return obj
+    // }
   },
   {
     title: '账户ID',
@@ -442,9 +442,6 @@ let initDay ={
   }
 }
 
-let initDate={
-  
-}
 export default {
   components:{
         DatePicker,
@@ -498,7 +495,7 @@ export default {
         //table的数据
         timeSelectValue:23,//table上选择时间
         timeValueString:'',
-        timeDefaultValue:'',
+        timeDefaultValue:undefined,
         visible:false,//自定义页面的打开
         columns:JSON.parse(JSON.stringify(columnsFixd)) ,//table的表头
         columnsFixd,
@@ -521,7 +518,7 @@ export default {
     },
     dateValue(newName,oldName){
       // console.log(newName,oldName)
-          this.timeValueString='';
+          this.timeValueString=undefined;
           this.timeSelectValue=23;
           this.timeDefaultValue =''
           if(newName[0].format('YYYY-MM-DD')==oldName[0].format('YYYY-MM-DD') || newName[0].format('YYYY-MM-DD')==moment().format('YYYY-MM-DD')){
@@ -536,7 +533,7 @@ export default {
     //项目改变后的事件
     treeChange(val) {
       // console.log(this.treeData)
-      console.log(val)
+      // console.log(val)
       this.accountId = [];
       //选择一个后禁用其他
       if(val.length==1){
@@ -552,7 +549,7 @@ export default {
                       })
                   }                   
               });
-              console.log(selectindex)
+              // console.log(selectindex)
               if(selectindex ||selectindex==0){
                 this.treeData.forEach((ele,index)=>{
                     if(index!=selectindex){
@@ -614,12 +611,12 @@ export default {
       if(val){
         val.forEach((ele,index)=>{
           if(ele*1){
-              this.accountId.push(ele.value)
+              this.accountId.push(ele)
           }else{              
               let projectArr=this.treeData.filter((item)=>{
                   return item.value==ele
               });
-              console.log(projectArr)
+              // console.log(projectArr)
               projectArr[0].children.forEach((element)=>{
                  this.accountId.push(element.value)
               })
@@ -652,8 +649,8 @@ export default {
       
       this.myChart.clear()
       if(this.accountId.length>0){
-        // console.log();
-        
+        // console.log();  
+             
         this.loading=true;
         this.searchDisabled=true;
         this.tabCost={}
@@ -668,6 +665,13 @@ export default {
           startDate:this.dateValue[0].format('YYYY-MM-DD'),
           endDate:this.dateValue[1].format('YYYY-MM-DD')
         })
+        if(this.accountId.length==1  &&  this.dateValue[0].format('YYYY.MM.DD')!=this.dateValue[1].format('YYYY.MM.DD')){
+            this.target='stat_Datetime',
+            this.order='asc'
+        }else{
+            this.target='cost',
+            this.order='desc'
+        } 
         this.tableHttp();
       }else{
         this.$message.error('请选择账户后再查询!');
@@ -1030,7 +1034,12 @@ export default {
                      if(this.timeValueString){
                        element.date=this.dateValue[0].format('YYYY.MM.DD')+'—'+this.timeValueString
                      }else{
-                       element.date=this.dateValue[0].format('YYYY.MM.DD')+"-"+this.dateValue[1].format('YYYY.MM.DD')
+                       if(this.accountId.length==1 && this.dateValue[0].format('YYYY.MM.DD')!=this.dateValue[1].format('YYYY.MM.DD')){
+                            element.date=element.statDate;
+                       }else{
+                          element.date=this.dateValue[0].format('YYYY.MM.DD')+"-"+this.dateValue[1].format('YYYY.MM.DD')
+                       }
+                       
                      }
                       
                    });
@@ -1054,6 +1063,7 @@ export default {
                       this.tableData=res.result
                       length =this.tableData.length-3;
                     }else{
+                      
                         res.result[res.result.length-1].date='总计';
                         res.result[res.result.length-1].authName='-';
                         res.result[res.result.length-1].accountId='-';
@@ -1124,8 +1134,14 @@ export default {
               this.order='desc'    
               this.target=sorter.columnKey;
           }else{
-              this.order='desc'
-              this.target='cost';
+            if(this.accountId.length==1  &&  this.dateValue[0].format('YYYY.MM.DD')!=this.dateValue[1].format('YYYY.MM.DD')){
+                this.target='stat_Datetime',
+                this.order='asc'
+            }else{
+                this.target='cost',
+                this.order='desc'
+            } 
+              
           }
           
           this.tableHttp();

+ 634 - 0
src/views/modules/Statistics/mediaReport.vue

@@ -0,0 +1,634 @@
+<template>
+    <div class="mediaReport">
+        <div class="mediaReport_header">
+            <div class="option-top">
+                <span class="item">
+                    <span class="title">
+                         公司
+                        <a-tooltip class="tipinfo">
+                            <template slot="title">
+                                不选时,默认查询全部公司(包括渠道)。
+                            </template>
+                           
+                            <a-icon type="question-circle" />
+                        </a-tooltip>              
+                    </span>
+                    <span>:</span>
+                    <a-select placeholder="请选择公司" style="width: 120px" v-model="company" @change="companyChange">
+                        <a-select-option value="">全部</a-select-option>
+                        <a-select-option v-for="item in companyArr" :key="item.companyId" :value='item.companyId'>
+                            {{item.area}}
+                        </a-select-option>
+                    </a-select>
+                    
+                </span>
+                <span class="item">
+                    <span class="title">
+                        广告主
+                       <a-tooltip class="tipinfo">
+                            <template slot="title">
+                                不选时,默认查询全部广告主。不选择公司时,不可选择广告主。
+                            </template>
+                            <a-icon type="question-circle" />
+                        </a-tooltip> 
+                       
+                    </span>
+                    <span>:</span>
+                    <a-select
+                        show-search
+                        placeholder='请选择或搜索广告主'
+                        option-filter-prop="children"
+                         style="width: 300px"     
+                        :filter-option="filterOption"
+                        @focus="handleFocus"
+                        @blur="handleBlur"
+                        @change="advertisersChange"                                                       
+                        v-model="advertiser"                       
+                        >
+                        <a-select-option value="">全部</a-select-option>
+                        <a-select-option v-for="item in advertisersArr" :key="item.id" :value='item.id'>
+                            {{item.name}}
+                        </a-select-option>
+                    </a-select>
+                    
+                </span>
+                <span class="item">
+                     <span class="title">
+                         项目
+                        <a-tooltip class="tipinfo">
+                            <template slot="title">
+                                不选时,默认查询全部项目。不选广告主时,不可选择项目
+                            </template>
+                            <a-icon type="question-circle" />
+                        </a-tooltip>            
+                    </span>
+                    <span>:</span>
+                    <a-select
+                        show-search                        
+                        option-filter-prop="children"   
+                        :filter-option="filterOption"
+                        @focus="handleFocus"
+                        @blur="handleBlur"
+                        placeholder='请选择或搜索项目'
+                        style="width: 200px"                        
+                        @change="projectChange"
+                        v-model="project"
+                        
+                        >
+                        <a-select-option value="">全部</a-select-option>
+                        <a-select-option v-for="item in projectArr" :key="item.id" :value='item.id'>
+                            {{item.project_name}}
+                        </a-select-option>
+                    </a-select>
+                    
+                </span>
+                
+            </div>
+            <div class="option-bot">
+                 <span class="item">
+                    <span class="title">
+                        媒体
+                        <a-tooltip class="tipinfo">
+                            <template slot="title">
+                                不选时,默认查询全部媒介。
+                            </template>
+                            <a-icon type="question-circle" />
+                        </a-tooltip>
+                    </span>
+                    <span>:</span>
+                    <a-select placeholder="请选择媒体" style="width: 120px" v-model="mediaType" >
+                        <a-select-option value="">全部</a-select-option>
+                        <a-select-option :value='1'>头条</a-select-option>
+                        <a-select-option :value='3'>头条内广</a-select-option>
+                        <a-select-option :value='2'>快手</a-select-option>
+                        <a-select-option :value='4'>快手内广</a-select-option>
+                    </a-select>                   
+                </span>
+
+                <span class="item">
+                    <span class="title">
+                        日期
+                        <a-tooltip class="tipinfo">
+                            <template slot="title">
+                                将以选择的日期为准,做前一天和选择当天的消耗差
+                            </template>
+                            <a-icon type="question-circle" />
+                        </a-tooltip>
+                       
+                    </span>
+                    <span>:</span>
+                        <a-date-picker @change="onChange" v-model="dateValue" placeholder='请选择日期'  :disabled-date="disabledDate" />
+                        
+                </span>
+               
+            </div>
+            <a-button type='primary' class="option-btn" @click="searchHandle">搜索</a-button>
+        </div>
+        <div class="tableBox">
+            <div class="tableOption">
+                <a-button type='primary' class="export" @click="exportExcel">导出报表</a-button>
+            </div>
+            <div class="tableBody">
+                <a-table
+                    size="middle"
+                    :columns="columns"
+                    :dataSource="tableData"
+                    bordered
+                    id="outTable"
+                    :pagination="ipagination"
+                    :loading="loading"
+                    ref="accountTable"
+                    @change="tableChange"                   
+                    style="word-break: break-all;font-size:16px;font-weight:600"
+                >
+                    <span slot="mediaType" slot-scope="text">
+                        <span v-if="text==1">头条</span>
+                        <span v-if="text==2">快手</span>
+                        <span v-if="text==3">头条内广</span>
+                        <span v-if="text==4">快手内广</span>
+                        <span v-if="text==0">-</span>
+                    </span>
+                     <span slot="cost" slot-scope="yesterdayCost">{{yesterdayCost | decimalsHandle}}</span>
+                     <span slot="cost" slot-scope="todayCost">{{todayCost | decimalsHandle}}</span>
+                     <span slot="cost" slot-scope="diffCost">{{diffCost | decimalsHandle}}</span>
+                     <span slot="operatorManger" slot-scope="operatorManger">{{operatorManger | blankHandle}}</span>
+                     <span slot="operator" slot-scope="operator">{{operator | blankHandle}}</span>
+                     <span slot="sale" slot-scope="sale">{{sale | blankHandle}}</span>
+                     <span slot="plan" slot-scope="plan">{{plan | blankHandle}}</span>
+                     <span slot="shot" slot-scope="shot">{{shot | blankHandle}}</span>
+                     <span slot="clip" slot-scope="clip">{{clip | blankHandle}}</span>
+                </a-table>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import moment from 'moment';
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
+import { JeecgListMixin } from '@/mixins/ipagination'
+
+export default {
+    mixins:[JeecgListMixin],
+    data() {
+        return {
+            moment,
+            company:undefined,//公司的默认值
+            mediaType:undefined,// 媒体类型
+            advertiser:undefined,//广告主
+            project:undefined,//项目
+            dateValue:moment(),//
+            advertisersArr:[],//广告主数组
+            projectArr:[],//项目数组
+            companyArr:[],//公司数组
+            mediaTypeArr:[],           
+            tableData:[],
+            loading:false,
+            dateString1:moment().subtract(1,'days').format('YYYY-MM-DD'),
+            dateString2:moment().format('YYYY-MM-DD'),
+            columns:[
+                {
+                    title: '媒体',
+                    dataIndex: 'mediaType',
+                    align: 'center',        
+                    scopedSlots: { customRender: 'mediaType' },
+                    width:50
+                },
+                {
+                    title: '广告主',
+                    dataIndex: 'advertiserName',
+                    align: 'center',       
+                    scopedSlots: { customRender: 'advertiserName' }
+                },
+                {
+                    title: '项目',
+                    dataIndex: 'projectName',
+                    align: 'center',
+                    scopedSlots: { customRender: 'projectName' },
+                    width:80
+                },
+                {
+                    title:moment().subtract(1,'days').format('YYYY-MM-DD'),
+                    dataIndex: 'yesterdayCost',
+                    align: 'center',
+                    scopedSlots: { customRender: 'accountId' }
+                },
+                {
+                    title:moment().format('YYYY-MM-DD'),
+                    dataIndex: 'todayCost',
+                    align: 'center',
+                    scopedSlots: { customRender: 'accountId' }
+                },
+                {
+                    title: '消耗差值',
+                    dataIndex: 'diffCost',
+                    align: 'center',
+                    scopedSlots: { customRender: 'diffCost' }
+                },
+                {
+                    title: '运营经理',
+                    dataIndex: 'operatorManger',
+                    align: 'center',
+                    scopedSlots: { customRender: 'operatorManger' },
+                    width:80
+                },
+                {
+                    title: '运营',
+                    dataIndex: 'operator',
+                    align: 'center',
+                    scopedSlots: { customRender: 'operator' },
+                    width:200
+                },
+                {
+                    title: '销售',
+                    dataIndex: 'sale',
+                    align: 'center',
+                    scopedSlots: { customRender: 'sale' },
+                    width:80
+                },
+                {
+                    title: '策划',
+                    dataIndex: 'plan',
+                    align: 'center',
+                    scopedSlots: { customRender: 'plan' },
+                    width:200
+                },
+                {
+                    title: '拍摄',
+                    dataIndex: 'shot',
+                    align: 'center',
+                    scopedSlots: { customRender: 'shot' },
+                    width:200
+                },
+                {
+                    title: '剪辑',
+                    dataIndex: 'clip',
+                    align: 'center',
+                    scopedSlots: { customRender: 'clip' },
+                    width:200
+                },
+                
+            ]
+        }
+    },
+    methods: {
+       
+        companyChange(value){
+            if(this.company=='' || this.company==undefined){
+                this.advertisersArr=[];
+                this.projectArr=[];
+                this.advertiser=undefined;
+                this.project=undefined;
+            }else{
+                //网络请求获取广告主数据
+                this.advertisersArr=[];
+                this.projectArr=[];
+                this.advertiser=undefined;
+                this.project=undefined;
+                getAction('/ctop/media/report/getAdvertiser', { 
+                    companyId:this.company              
+                }).then(res => {
+                    if(res.success){
+                        console.log(res)
+                        this.advertisersArr=res.result
+                    }
+                })
+            }
+        },
+        //广告主改变
+        advertisersChange(value){
+            console.log(`selected ${value}`);
+            if(this.advertiser=='' || this.advertiser==undefined){
+                
+                this.project=undefined;
+                this.projectArr=[];
+            }else{
+                this.project=undefined;
+                this.projectArr=[];
+                getAction('/ctop/media/report/getProject', { 
+                    companyId:this.company,
+                    advertiserId:this.advertiser           
+                }).then(res => {
+                    if(res.success){                       
+                        console.log(res)
+                        this.projectArr=res.result
+                    }
+                })
+            }
+        },
+        projectChange(value){
+            console.log(`selected ${value}`);
+            if(this.project==''){
+                // this.project=undefined
+            }
+        },
+        //日期改变
+        onChange(date, dateString) {
+            // console.log(date, dateString,this.dateValue);
+            let addCol=[
+                {
+                    title:moment(date).subtract(1,'days').format('YYYY-MM-DD'),
+                    dataIndex: 'yesterdayCost',
+                    align: 'center',
+                    scopedSlots: { customRender: 'accountId' }
+                },
+                {
+                    title:dateString,
+                    dataIndex: 'todayCost',
+                    align: 'center',
+                    scopedSlots: { customRender: 'accountId' }
+                },
+            ];
+
+            this.columns.splice(3,2,addCol[0],addCol[1]);
+            this.searchHandle();
+        },
+
+        //搜索
+        searchHandle(){
+            let company='';
+            let advertiser='';
+            let project='';
+            let mediaType=''
+            if(this.company==undefined){
+                company=''
+            }else{
+                company=this.company
+            }
+            if(this.advertiser==undefined){
+                advertiser=''
+            }else{
+                advertiser=this.advertiser
+            }
+            if(this.project==undefined){
+                project=''
+            }else{
+                project=this.project
+            }
+            if(this.mediaType==undefined){
+                mediaType=''
+            }else{
+                mediaType=this.mediaType
+            }
+
+            this.tableHttp({
+                companyId:company,
+                advertiserId:advertiser,
+                projectId:project,
+                mediaType,
+                todayDate:this.dateValue.format('YYYY-MM-DD'),
+                yesterdayDate:moment(this.dateValue).subtract(1,"days").format('YYYY-MM-DD'),
+            })
+        },
+        //table的改变(页码改变请求数据,也可以写排序)
+        tableChange(pagination, filters, sorter, { currentDataSource }){
+         
+            
+            this.searchHandle();
+        },
+        //table的网络请求
+        tableHttp(params){
+            this.loading=true;
+            this.tableData=[]
+            postAction(`/ctop/media/report/${this.ipagination.current}/${this.ipagination.pageSize}`, params).then(res => {
+                if(res.success){
+                    // console.log(res)
+                    this.loading=false;
+                    this.ipagination.total = res.result.total 
+                    if(res.success){
+                        res.result.list.map((item,index)=>{
+                            item.key=index
+                        })
+                        this.tableData=res.result.list
+                    } 
+                }
+            })
+        },
+         //导出报表
+        exportExcel() {
+            let company='';
+            let advertiser='';
+            let project='';
+            let mediaType=''
+            if(this.company==undefined){
+                company=''
+            }else{
+                company=this.company
+            }
+            if(this.advertiser==undefined){
+                advertiser=''
+            }else{
+                advertiser=this.advertiser
+            }
+            if(this.project==undefined){
+                project=''
+            }else{
+                project=this.project
+            }
+            if(this.mediaType==undefined){
+                mediaType=''
+            }else{
+                mediaType=this.mediaType
+            }
+
+
+            downFilePost('/ctop/media/report/excel', {
+                companyId:company,
+                advertiserId:advertiser,
+                projectId:project,
+                mediaType,
+                todayDate:this.dateValue.format('YYYY-MM-DD'),
+                yesterdayDate:this.dateValue.subtract(1,"days").format('YYYY-MM-DD'),               
+            }).then(res => {
+                let blob = new Blob([res], {
+                type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+                })
+                let downloadElement = document.createElement('a')
+                let href = window.URL.createObjectURL(blob) //创建下载的链接
+                downloadElement.href = href
+                downloadElement.download = moment().format('YYYY-MM-DD') + '媒介报表.xlsx' //下载后文件名
+                document.body.appendChild(downloadElement)
+                downloadElement.click() //点击下载
+                document.body.removeChild(downloadElement) //下载完成移除元素
+                window.URL.revokeObjectURL(href) //释放掉blob对象
+            })
+        },
+
+        handleBlur() {
+            // console.log('blur');
+        },
+        handleFocus() {
+            // console.log('focus');
+        },
+        filterOption(input, option) {
+            return (
+                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            );
+        },
+        disabledDate(current) {
+            // console.log(current)
+            // return  current &&current > moment()
+        },
+
+    },
+    mounted() {
+        getAction('/ctop/media/report/getCompany', {               
+        }).then(res => {
+            if(res.success){
+                this.companyArr=res.result
+            }
+        });
+
+        this.tableHttp({
+            companyId:'',
+            advertiserId:'',
+            projectId:'',
+            mediaType:'',
+            todayDate:this.dateValue.format('YYYY-MM-DD'),
+            yesterdayDate:this.dateValue.subtract(1,'days').format('YYYY-MM-DD'),
+        })
+       
+       
+    },
+    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 '-'
+            }
+                
+        },
+
+        //处理空白为 --
+        blankHandle(val){
+            if(val){
+                return val
+            }else{
+                return '-'
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+    .mediaReport{
+        padding: 0 10px;
+        .mediaReport_header{
+            padding: 15px 10px;
+            background: #fff;
+            position: relative;
+            .option-top,.option-bot{
+                .item{
+                    margin-right: 20px;
+                    display: inline-block;
+                    .title{
+                        display: inline-block;
+                        position: relative;
+                        padding-right: 15px;
+                        margin-right: 5px;
+                    }
+                    .tipinfo{
+                        position: absolute;
+                        font-size: 12px;
+                        right: 0px;
+                        top: 0;
+                    }
+                }
+                
+            }
+            .option-top{
+                margin-bottom: 15px;
+            }
+           
+            .option-btn{
+                position: absolute;
+                top: 15px;
+                right: 10px;
+            }
+
+        }
+        .mediaReport_header:hover{
+            border-radius: 5px;
+            box-shadow: 0 0 15px rgba(0,0,0,.2);
+        }
+        .tableBox{
+            margin-top: 30px;
+            background: #fff;
+            padding: 10px 10px;
+            .tableOption{
+                margin-bottom: 10px;
+                text-align: right;
+            }
+        }
+    }
+</style>
+<style lang="scss">
+    .ant-tooltip-inner,.ant-tooltip,.ant-tooltip-arrow::before{
+        background-color: #fff;
+        color: #666;
+        font-size: 12px;
+    }
+
+</style>

+ 7 - 7
src/views/modules/Statistics/performanceRelated/performanceRelated.vue

@@ -779,13 +779,13 @@ export default {
         },
 
         onVisibleChange (key) { //Tooltip 显示隐藏的回调,类似onmouseenter 进入离开事件,用来显示我们不同的信息提醒
-        console.log(key)
-            let str = '';
-            switch (key) {
-                case 1:
-                str = '你的姓名';
-                default:
-                break;
+            console.log(key)
+                let str = '';
+                switch (key) {
+                    case 1:
+                    str = '你的姓名';
+                    default:
+                    break;
             }
 
             // this.filterTitleKey=str        

+ 8 - 11
vue.config.js

@@ -64,30 +64,27 @@ module.exports = {
          }
        },*/
       '/jeecg-boot': {
-        // target: 'http://39.97.120.42:8080', //请求本地 需要jeecg-boot后台项目  生产环境
+       
         // target: 'http://192.168.1.23:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
-        // target: 'http://192.168.1.22:8080', //请求本地 需要jeecg-boot后台项目  英豪
+       
         // target: 'http://192.168.0.111:8088', //请求本地 需要jeecg-boot后台项目  英豪
-        // target: 'http://192.168.1.103:8080', //请求本地 需要jeecg-boot后台项目
+       
         // 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.51:8088', //请求本地 需要jeecg-boot后台项目  毕洁泉
         // target: 'http://192.168.1.165:8848', //请求本地 需要jeecg-boot后台项目  毕洁泉
         target: 'http://api.tjyourong.com.cn/jeecg-boot', //请求本地 需要jeecg-boot后台项目 
         // target: 'https://trac.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目 
-
-        // target: 'http://192.168.0.53:8088', //请求本地 需要jeecg-boot后台项目  毕洁泉
-        // target: 'http://192.168.1.251:8080', //请求本地 需要jeecg-boot后台项目 
-
+        // target: 'http://192.168.1.251:8088', //请求本地 需要jeecg-boot后台项目 
         // target: 'http://adsp.tjyourong.com.cn/', //请求本地 需要jeecg-boot后台项目 
 
         
 
         ws: false,
         changeOrigin: true,
-        pathRewrite: {
-            '/jeecg-boot': ''  //默认所有请求都加了jeecg-boot前缀,需要去掉
-        }
+        // pathRewrite: {
+        //     '/jeecg-boot': ''  //默认所有请求都加了jeecg-boot前缀,需要去掉
+        // }
       },
     },
     // before(app) {