Quellcode durchsuchen

Merge branch 'feature/middle-jyf'

jiayufei vor 4 Jahren
Ursprung
Commit
abc2dc95c3

BIN
src/assets/img/spLbLAbh.jpg


+ 2 - 2
src/utils/request.js

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

+ 3 - 2
src/views/modules/account-config/account-config-server.js

@@ -3,7 +3,8 @@
  * @author jiayufei
  */
 
-export const urlAcount = 'http://118.24.244.213:8080'; // 线上
+// export const urlAcount = 'http://118.24.244.213:8080'; // 线上
 // export const urlAcount = 'http://apipre.tjyourong.com.cn'; // 预生产
 // export const urlAcount = 'http://192.168.1.43:8080'; // 子安
-// export const urlAcount = 'http://139.186.165.84:8080'; // 测试
+export const urlAcount = 'http://139.186.165.84:8080'; // 测试
+// export const urlAcount = 'http://192.168.1.8:8080'; // 学超

+ 74 - 1
src/views/modules/account-config/components/configuration-modal.less

@@ -144,7 +144,7 @@
                 display: inline-block;
                 .ant-form-item-label {
                     width: 160px;
-                    margin-left: 73px;
+                    margin-left: 53px;
                 }
                 .ant-form-item-control-wrapper {
                     width: 110px;
@@ -234,6 +234,25 @@
             .adver-position-radio {
                 margin-left: 140px;
                 margin-bottom: 15px;
+                .create-web-url-class {
+                    width: 320px;
+                    height: 110px;
+                    background-color: #f9f8f8;
+                    display: flex;
+                    .web-url-img {
+                        width: 53px;
+                        img {
+                            width: 100%;
+                        }
+                    }
+                    .web-url-content {
+                        margin-top: 10px;
+                        margin-left: 10px;
+                        .url-content-id {
+                            margin-top: 10px;
+                        }
+                    }
+                }
                 .creative-label-content {
                     width: 400px;
                     height: 200px;
@@ -269,4 +288,58 @@
             }
         }
     }
+}
+.web-url-modal {
+    width: 1000px !important;
+    .mater-viedo-content {
+        .viedo-header-class {
+            display: flex;
+            justify-content: space-between;
+            border-bottom: 1px solid #eee;
+            .refush-btn-mat {
+                margin-left: 20px;
+            }
+        }
+        .viedo-serach-class {
+            margin-top: 20px;
+        }
+        .viedo-content-class {
+            .viedo-content-group {
+                display: flex;
+                flex-wrap: wrap;
+            }
+            .no-data-group {
+                height: 200px;
+                line-height: 200px;
+                text-align: center;
+            }
+            .content-modal-li {
+                border: 1px solid #e4e4e4;
+                width: 180px;
+                height: 425px;
+                text-align: center;
+                position: relative;
+                margin: 0 10px 10px 0;
+                .checkbox-select-show,
+                .checkbox-select-time {
+                    text-align: left;
+                    margin-top: 14px;
+                    padding-left: 10px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+                img {
+                    width: 90%;
+                    margin-top: 20px;
+                }
+                .viedo-content-checkbox {
+                    position: absolute;
+                    z-index: 100;
+                    left: 0;
+                    top: 0;
+                }
+            }
+        }
+    }
 }

+ 274 - 33
src/views/modules/account-config/components/configuration-modal.vue

@@ -106,10 +106,21 @@
                 <a-form-model-item label="广告组名称" prop="campaignName">
                     <a-input
                         class="common-input-long"
+                        id="campaignName"
                         v-model="configForm.campaignName"
                         allow-clear
                         placeholder="请输入广告组名称"
                     />
+                    <!-- <div>
+                        <a-tag
+                            v-for="item in campaignTags"
+                            :key="item"
+                            color="#1890ff"
+                            @click="handleGetChangeAll(item, 'campaignName', 'campaignName')"
+                        >
+                            + {{ item }}
+                        </a-tag>
+                    </div> -->
                 </a-form-model-item>
                 <a-form-model-item label="广告计划名称" prop="adName">
                     <a-input
@@ -124,7 +135,7 @@
                             v-for="item in adNameTags"
                             :key="item"
                             color="#1890ff"
-                            @click="handleGetChangeAll(item, 'groupName')"
+                            @click="handleGetChangeAll(item, 'groupName', 'adName')"
                         >
                             + {{ item }}
                         </a-tag>
@@ -201,6 +212,29 @@
                         allow-clear
                     />
                 </a-form-model-item>
+                <a-form-model-item v-if="platformLoadingType === 'APP_ANDROID'" label="应用下载详情页" prop="creativeWebUrl">
+                    <a-input
+                        class="common-input-long"
+                        v-model="configForm.creativeWebUrl"
+                        placeholder="请输入应用下载详情页"
+                        :disabled="modalTitle === 'edit'"
+                        allow-clear
+                        @change="handleCreativeWebUrl"
+                    />
+                    <span style="margin-left: 10px;"><a :disabled="modalTitle === 'edit'" @click="handleHaveWebUrl">使用已有</a></span>
+                </a-form-model-item>
+                <div v-if="platformLoadingType === 'APP_ANDROID'" class="adver-position-radio">
+                    <div class="create-web-url-class">
+                        <div class="web-url-img">
+                            <img v-if="landingPageShowData.thumbnail" :src="landingPageShowData.thumbnail"/>
+                            <img v-else src="@/assets/noImg.png"/>
+                        </div>
+                        <div class="web-url-content">
+                            <div class="url-content-name"><a>{{ landingPageShowData.name }}</a></div>
+                            <div class="url-content-id">ID:{{ landingPageShowData.siteId || '暂无' }}</div>
+                        </div>
+                    </div>
+                </div>
                 <a-form-model-item v-if="configForm.adDownloadType === 'DOWNLOAD_URL'" label="优先应用商店下载">
                     <a-radio-group
                         v-model="configForm.adDownloadMode"
@@ -273,7 +307,7 @@
                     </div>
                     <div v-if="configForm.adverPosition === 'b'" class="position-radio-change">
                         <p>位置选择</p>
-                        <a-checkbox-group v-model="configForm.checkboxChangeValue">
+                        <a-checkbox-group v-model="configForm.checkboxChangeValue" @change="NewCheckboxChangeValue">
                             <a-checkbox :style="radioStyle" value="INVENTORY_FEED">今日头条</a-checkbox>
                             <a-checkbox :style="radioStyle" value="INVENTORY_VIDEO_FEED">西瓜视频</a-checkbox>
                             <a-checkbox :style="radioStyle" value="INVENTORY_HOTSOON_FEED">抖音火山版</a-checkbox>
@@ -604,7 +638,12 @@
                     </a-input-group>
                 </a-form-model-item>
                 <a-form-model-item label="投放时间">
-                    <a-radio-group :disabled="modalTitle === 'edit'" v-model="configForm.adScheduleType" button-style="solid" @change="handleAdScheduleType">
+                    <a-radio-group
+                        :disabled="modalTitle === 'edit' || configForm.adBudgetMode === 'BUDGET_MODE_TOTAL'"
+                        v-model="configForm.adScheduleType"
+                        button-style="solid"
+                        @change="handleAdScheduleType"
+                    >
                         <a-radio-button value="SCHEDULE_FROM_NOW">从今天起长期投放</a-radio-button>
                         <a-radio-button value="SCHEDULE_START_END">设置开始和结束日期</a-radio-button>
                     </a-radio-group>
@@ -733,13 +772,13 @@
             </div>
             <div class="separate-module-con">
                 <p class="rock-title">创意信息</p>
-                <a-form-model-item label="创意方式">
+                <a-form-model-item v-if="isTomatoStatus" label="创意方式">
                     <a-radio-group v-model="configForm.creativeMaterialMode" button-style="solid">
                         <a-radio-button value="STATIC_ASSEMBLE" :disabled="modalTitle === 'edit'">程序化创意</a-radio-button>
                         <a-radio-button value="NONE" :disabled="modalTitle === 'edit'">自定义创意</a-radio-button>
                     </a-radio-group>
                 </a-form-model-item>
-                <a-form-model-item label="创意内容">
+                <a-form-model-item v-if="isTomatoStatus" label="创意内容">
                     <a-radio-group v-model="configForm.creativeImageMode" button-style="solid">
                         <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">竖版视频</a-radio-button>
                         <a-radio-button value="CREATIVE_IMAGE_MODE_VIDEO">横版视频</a-radio-button>
@@ -748,7 +787,7 @@
                         <a-radio-button value="CREATIVE_IMAGE_MODE_LARGE_VERTICAL">大图竖图</a-radio-button>
                     </a-radio-group>
                 </a-form-model-item>
-                <a-form-model-item label="卡片主图">
+                <a-form-model-item v-if="isTAwemeStatus" label="卡片主图">
                     <a-upload
                         name="avatar"
                         list-type="picture-card"
@@ -772,7 +811,7 @@
                     </a-upload>
                     <span class="especial-label">*</span>
                 </a-form-model-item>
-                <a-form-model-item label="卡片标题" prop="creativeProductDescription">
+                <a-form-model-item v-if="isTAwemeStatus" label="卡片标题" prop="creativeProductDescription">
                     <a-input
                         class="common-input-long"
                         placeholder="请输入卡片标题"
@@ -780,13 +819,13 @@
                         allow-clear
                     />
                 </a-form-model-item>
-                <a-form-model-item label="推广卖点">
+                <a-form-model-item v-if="isTAwemeStatus" label="推广卖点">
                     <a-button type="primary" @click="handleAddOrigin">
                         <a-icon type="plus" />推广卖点
                     </a-button>
                     <span class="especial-label">*</span>
                 </a-form-model-item>
-                <div class="adver-position-radio">
+                <div v-if="isTAwemeStatus" class="adver-position-radio">
                     <a-form-model-item
                         v-for="(item, index) in configForm.defaultFormList"
                         :key="item.id"
@@ -801,14 +840,14 @@
                         <a-icon class="examin-form-icon" type="delete" @click="handleDelOrigin(item)"/>
                     </a-form-model-item>
                 </div>
-                <a-form-model-item label="行动号召">
+                <a-form-model-item v-if="isTAwemeStatus" label="行动号召">
                     <a-radio-group v-model="configForm.creativeEnablePersonalAction" button-style="solid">
                         <a-radio-button :value="true">开启智能优选</a-radio-button>
                         <a-radio-button :value="false">关闭智能优选</a-radio-button>
                     </a-radio-group>
                     <span class="especial-label">*</span>
                 </a-form-model-item>
-                <div class="adver-position-radio">
+                <div v-if="isTAwemeStatus" class="adver-position-radio">
                     <a-form-model-item prop="creativeCallToAction">
                         <a-select
                             class="common-input-long"
@@ -824,7 +863,7 @@
                         </a-select>
                     </a-form-model-item>
                 </div>
-                <a-form-model-item label="来源" :prop="getSource">
+                <a-form-model-item v-if="isTomatoStatus" label="来源" :prop="getSource">
                     <a-input
                         class="common-input-long"
                         placeholder="请输入来源"
@@ -843,7 +882,7 @@
                 <a-form-model-item v-if="configForm.adDownloadType === 'DOWNLOAD_URL' && platformLoadingType === 'APP_ANDROID'" label="副标题">
                     <a-input
                         class="common-input-long"
-                        placeholder="请输入来源"
+                        placeholder="请输入副标题"
                         v-model="configForm.creativeSubTitle"
                         allow-clear
                         @blur="handleCreativeSubTitleBlur"
@@ -862,32 +901,32 @@
                         <a-radio-button :value="1">启用</a-radio-button>
                     </a-radio-group>
                 </a-form-model-item>
-                <a-form-model-item label="广告评论">
+                <a-form-model-item v-if="isTomatoStatus" label="广告评论">
                     <a-radio-group v-model="configForm.creativeIsCommentDisable" button-style="solid">
                         <a-radio-button :value="1">关闭</a-radio-button>
                         <a-radio-button :value="0">开启</a-radio-button>
                     </a-radio-group>
                 </a-form-model-item>
-                <a-form-model-item label="客户端下载视频">
+                <a-form-model-item v-if="isTomatoStatus" label="客户端下载视频">
                     <a-radio-group v-model="configForm.creativeDownloadStatus" button-style="solid">
                         <a-radio-button :value="1">关闭</a-radio-button>
                         <a-radio-button :value="0">开启</a-radio-button>
                     </a-radio-group>
                 </a-form-model-item>
-                <a-form-model-item label="创意展现">
+                <a-form-model-item v-if="isTomatoStatus" label="创意展现">
                     <a-radio-group v-model="configForm.creativeDisplayMode" button-style="solid">
                         <a-radio-button value="CREATIVE_DISPLAY_MODE_CTR">优选模式</a-radio-button>
                         <a-radio-button value="CREATIVE_DISPLAY_MODE_RANDOM">轮播模式</a-radio-button>
                     </a-radio-group>
                 </a-form-model-item>
-                <div v-if="configForm.creativeDisplayMode === 'CREATIVE_DISPLAY_MODE_CTR'" class="adver-position-radio">
+                <div v-if="isTomatoStatus && configForm.creativeDisplayMode === 'CREATIVE_DISPLAY_MODE_CTR'" class="adver-position-radio">
                     选择优选模式,系统会自动对效果好的创意进行展示量倾斜,创意效果越好展示量越高
                 </div>
-                <div v-if="configForm.creativeDisplayMode === 'CREATIVE_DISPLAY_MODE_RANDOM'" class="adver-position-radio">
+                <div v-if="isTomatoStatus && configForm.creativeDisplayMode === 'CREATIVE_DISPLAY_MODE_RANDOM'" class="adver-position-radio">
                     使用创意轮播,系统将平分各创意展现机会,便于广告主比较各创意投放效果
                 </div>
             </div>
-            <div class="separate-module-con">
+            <div v-if="isTomatoStatus" class="separate-module-con">
                 <p class="rock-title">创意分类</p>
                 <a-form-model-item label="创意分类" prop="creativeThirdIndustryIds">
                     <a-cascader
@@ -934,6 +973,46 @@
             </div>
         </a-form-model>
     </div>
+    <a-modal
+        v-if="isWebUrl"
+        title="使用落地页"
+        :visible="isWebUrl"
+        dialog-class="web-url-modal"
+        :footer="false"
+        @cancel="handleCancelAll"
+    >
+        <div class="mater-viedo-content">
+            <a-row class="viedo-serach-class" :gutter="24">
+                <a-col :span="9">
+                    <a-form-item label="落地页名称" :labelCol="modalCol" :wrapperCol="modalWrapper">
+                        <a-input v-model="weburlModel" placeholder="请输入落地页名称关键字"/>
+                    </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                    <a-button type="primary" style="position: relative;top: 4px;" @click="handleWebUrlSearch">搜索</a-button>
+                    <a-button type="primary" style="position: relative;top: 4px;margin-left: 15px;" @click="handleWebUrlUpdate">重置</a-button>
+                </a-col>
+            </a-row>
+            <div class="viedo-content-class">
+                <div v-if="viedoDefaultList.length" class="viedo-content-group">
+                    <li
+                        class="content-modal-li"
+                        v-for="(item, index) in viedoDefaultList"
+                        :key="index"
+                        @click="handleViedoListClick(item)"
+                    >
+                        <img v-if="item.thumbnail" :src="item.thumbnail"/>
+                        <img v-else src="@/assets/noImg.png"/>
+                        <div class="checkbox-select-show"><a>{{ item.name }}</a></div>
+                        <div class="checkbox-select-time">ID:{{ item.siteId }}</div>
+                    </li>
+                </div>
+                <div v-else class="no-data-group">
+                    暂无数据
+                </div>
+            </div>
+        </div>
+    </a-modal>
 </div>
 </template>
 <script>
@@ -1043,6 +1122,23 @@ export default {
             }
         };
         return {
+            landingPageShowData: {},
+            weburlModel: '',
+            modalCol: {
+                lg: {span: 6},
+                sm: {span: 6},
+                xs: {span: 6},
+                md: {span: 6}
+            },
+            modalWrapper: {
+                lg: {span: 18},
+                sm: {span: 18},
+                xs: {span: 14},
+                md: {span: 14}
+            },
+            viedoDefaultList: [],
+            viedoDefaultListUpdate: [],
+            isWebUrl: false,
             sureLoading: false,
             subTitleMsgStatus: false,
             subTitleMsg: '',
@@ -1172,6 +1268,7 @@ export default {
             md5Result: '',
             urlResult: '',
             createOptions: [],
+            campaignTags: ['序号', '日期'],
             adNameTags: ['出价方式', '素材名称', '日期', '创意方式'],
             fieldNames: {
                 label: 'industryName',
@@ -1310,13 +1407,17 @@ export default {
                     {validator: adMaxBidValidator, trigger: 'blur'}
                 ],
                 adName: [
-                    {required: true, message: '请输入广告计划名称'},
+                    {required: true, message: '请输入广告计划名称', trigger: 'blur'},
                     {validator: handleCharacterLen100, trigger: 'blur'}
                 ],
                 creativeProductDescription: [
                     {required: true, message: '请输入', trigger: 'blur'},
                     {min: 1, max: 7, message: '请输入1-7个字', trigger: 'blur'}
                 ],
+                creativeWebUrl: [
+                    {required: true, message: '请输入', trigger: 'blur'},
+                    {validator: handleConfirmValue, trigger: 'blur'}
+                ],
                 adAudiencePackageId: [{required: true, message: '请选择', trigger: 'change'}],
                 creativeCallToAction: [{required: true, message: '请选择', trigger: 'change'}],
                 adConvertType: [{required: true, message: '请选择', trigger: 'change'}],
@@ -1324,6 +1425,7 @@ export default {
                 creativeThirdIndustryIds: [{required: true, message: '请选择', trigger: 'change'}]
             },
             configForm: {
+                creativeWebUrl: '',
                 adAppType: '',
                 adDirectionalFlag: 'add',
                 adInterestActionMode: 'UNLIMITED',
@@ -1415,7 +1517,9 @@ export default {
                 adAutoExtendTargets: '',
                 creativeCallToAction: '', // 行动号召
                 creativeLabel: undefined // 倡议标签
-            }
+            },
+            isTomatoStatus: true,
+            isTAwemeStatus: true
         };
     },
     computed: {
@@ -1446,13 +1550,37 @@ export default {
         },
         NewPlatformLoadingType() {
             return this.platformLoadingType;
+        },
+        NewIsTAwemeStatus() {
+            return this.isTAwemeStatus;
         }
     },
     watch: {
+        NewIsTAwemeStatus(newVal) {
+            if (!newVal) {
+                this.md5Result = '';
+                this.urlResult = '';
+                this.imageUrl = '';
+                this.configForm.creativeProductDescription = '';
+                this.configForm.defaultFormList = [];
+                this.configForm.creativeEnablePersonalAction = '';
+                this.configForm.creativeCallToAction = '';
+            }
+            else {
+                this.configForm.creativeEnablePersonalAction = true;
+            }
+        },
         NewPlatformLoadingType(newVal, oldVal) {
             if (newVal) {
                 this.configForm.adAppType = newVal;
             }
+            if (newVal && this.configForm.accountId) {
+                this.handleGetChengZiSite();
+            }
+            else {
+                this.landingPageShowData = {};
+                this.configForm.creativeWebUrl = '';
+            }
         },
         NewAdExternalUrl(newVal, oldVal) {
             if (newVal && this.configForm.accountId) {
@@ -1496,11 +1624,18 @@ export default {
                 };
                 this.handleGetOptimizationObjective(paramsData);
             }
+            if (newVal && this.platformLoadingType) {
+                this.handleGetChengZiSite();
+            }
+            else {
+                this.landingPageShowData = {};
+                this.configForm.creativeWebUrl = '';
+            }
             if (newVal) {
                 this.handleGetCreativeClassification();
                 this.handleGetAdvertiserStrategy();
                 this.handleDirectionalList();
-                this.handleGetAdAudiencePackage()
+                this.handleGetAdAudiencePackage();
             }
             else {
                 this.createOptions = [];
@@ -1523,11 +1658,69 @@ export default {
     methods: {
         ...mapGetters(['nickname', 'avatar', 'userInfo']),
         moment,
+        NewCheckboxChangeValue(newVal) {
+            if (newVal.length) {
+                if (newVal.includes('INVENTORY_AWEME_FEED')) {
+                    this.isTAwemeStatus = true;
+                }
+                else {
+                    this.isTAwemeStatus = false;
+                }
+            }
+            else {
+                this.isTAwemeStatus = true;
+            }
+        },
+        handleGetChengZiSite() {
+            const paramsData = {
+                accountId: this.configForm.accountId
+            };
+            getAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getChengZiSite', paramsData).then(result => {
+                if (result.code === 0) {
+                    this.viedoDefaultList = result.result;
+                    this.viedoDefaultListUpdate = result.result;
+                }
+                else {
+                    this.$message.error(result.message);
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
+        },
+        handleViedoListClick(data) {
+            this.landingPageShowData = data;
+            this.configForm.creativeWebUrl = data.creativeWebUrl;
+            this.weburlModel = '';
+            this.isWebUrl = false;
+        },
+        handleWebUrlSearch() {
+            let defaultList = [];
+            this.viedoDefaultListUpdate.forEach(item => {
+                if (item.name && item.name.indexOf(this.weburlModel) !== -1) {
+                    defaultList.push(item);
+                }
+            });
+            this.viedoDefaultList = defaultList;
+        },
+        handleWebUrlUpdate() {
+            this.viedoDefaultList = [...this.viedoDefaultListUpdate];
+            this.weburlModel = '';
+        },
+        handleCancelAll() {
+            this.handleWebUrlUpdate();
+            this.isWebUrl = false;
+        },
+        handleHaveWebUrl() {
+            this.isWebUrl = true;
+        },
         handleAdhideConver(e) {
             const defaultValue = e.target.value;
             if (defaultValue === 'CUSTOMER' || defaultValue === 'APP') {
                 this.configForm.adConvertedTimeDuration = 'THREE_MONTH';
             }
+            else {
+                this.configForm.adConvertedTimeDuration = '';
+            }
         },
         handleAdAutoExtend(e) {
             const defaultValue = e.target.value;
@@ -1916,12 +2109,14 @@ export default {
             if (e.target.value === 'a') {
                 this.configForm.radioChangeValue = '';
                 this.configForm.checkboxChangeValue = [];
+                this.isTAwemeStatus = true;
             }
             else if (e.target.value === 'b') {
                 this.configForm.radioChangeValue = '';
             }
             else if (e.target.value === 'c') {
                 this.configForm.checkboxChangeValue = [];
+                this.isTAwemeStatus = true;
             }
         },
         handleAccountMode(e) {
@@ -1934,6 +2129,9 @@ export default {
         },
         handleAdDownLoadType(e) {
             this.optimizationOption = [];
+            this.landingPageShowData = {};
+            this.configForm.creativeWebUrl = '';
+            this.platformLoadingType = '';
             const defaultValue = e.target.value;
             if (defaultValue === 'DOWNLOAD_URL') {
                 this.configForm.adExternalUrl = '';
@@ -2024,6 +2222,22 @@ export default {
                         this.configForm.adConvertType = detailData.adConvertType || '';
                         this.configForm.adDistrict = detailData.adDistrict || 'NONE';
                         this.configForm.adAppType = detailData.adAppType;
+                        getAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getChengZiSite', {accountId: detailData.accountId}).then(result => {
+                            if (result.code === 0) {
+                                const defaultResult = result.result;
+                                defaultResult.forEach(item => {
+                                    if (item.creativeWebUrl === detailData.creativeWebUrl) {
+                                        this.landingPageShowData = item;
+                                    }
+                                });
+                                this.configForm.creativeWebUrl = detailData.creativeWebUrl;
+                            }
+                            else {
+                                this.$message.error(result.message);
+                            }
+                        }).catch(error => {
+                            console.log(error, 'eeee');
+                        });
                         if (detailData.adDownloadType === 'DOWNLOAD_URL') {
                             this.handleGetPackage();
                         }
@@ -2061,7 +2275,7 @@ export default {
                                 this.optimizationOption = updateResult[0].external_actions;
                                 setTimeout(() => {
                                     this.configForm.adConvertId = detailData.adConvertId;
-                                }, 1000);
+                                }, 1500);
                             }
                             else {
                                 this.$message.error(result.message);
@@ -2140,9 +2354,9 @@ export default {
                         this.configForm.adMaxBid = detailData.adMaxBid;
                         this.configForm.adStepBid = detailData.adStepBid;
                         this.configForm.adBidCreateType = detailData.adBidCreateType;
-                        this.configForm.creativeThirdIndustryIds[0] = detailData.creativeThirdIndustryId.substr(0, 4);
-                        this.configForm.creativeThirdIndustryIds[1] = detailData.creativeThirdIndustryId.substr(0, 6);
-                        this.configForm.creativeThirdIndustryIds[2] = detailData.creativeThirdIndustryId;
+                        this.configForm.creativeThirdIndustryIds[0] = detailData.creativeThirdIndustryId && detailData.creativeThirdIndustryId.substr(0, 4);
+                        this.configForm.creativeThirdIndustryIds[1] = detailData.creativeThirdIndustryId && detailData.creativeThirdIndustryId.substr(0, 6);
+                        this.configForm.creativeThirdIndustryIds[2] = detailData.creativeThirdIndustryId && detailData.creativeThirdIndustryId;
                         this.imageUrl = detailData.imageUrl;
                         this.urlResult = detailData.imageUrl;
                         this.md5Result = detailData.creativeProductImageCode;
@@ -2178,6 +2392,12 @@ export default {
                         else if (detailData.creativeInventoryType) {
                             this.configForm.adverPosition = 'b';
                             this.configForm.checkboxChangeValue = detailData.creativeInventoryType.split(',');
+                            if (this.configForm.checkboxChangeValue.includes('INVENTORY_AWEME_FEED')) {
+                                this.isTAwemeStatus = true;
+                            }
+                            else {
+                                this.isTAwemeStatus = false;
+                            }
                         }
                         else {
                             this.configForm.adverPosition = 'a';
@@ -2263,16 +2483,16 @@ export default {
             });
         },
         // 点击获取光标位置进行字段插入
-        handleGetChangeAll(item, field) {
+        handleGetChangeAll(item, field, type) {
             let node = document.getElementById(field);
             let startPos = node.selectionStart; // input 第0个字符到选中的字符
             let endPos = node.selectionEnd; // 选中的字符到最后的字符
             let txt = node.value;
             if (startPos === 0 || endPos === 0) {
-                this.configForm.adName += '-{{' + item + '}}-';
+                this.configForm[type] += '-{{' + item + '}}-';
             }
             else {
-                this.configForm.adName = txt.substring(0, startPos) + '-{{' + item + '}}-' + txt.substring(endPos);
+                this.configForm[type] = txt.substring(0, startPos) + '-{{' + item + '}}-' + txt.substring(endPos);
                 node.selectionStart = startPos + item.length + 6;
                 node.selectionEnd = startPos + item.length + 6;
             }
@@ -2319,8 +2539,19 @@ export default {
                 });
             });
         },
+        handleCreativeWebUrl(e) {
+            const defaultValue = e.target.value;
+            this.landingPageShowData = {};
+        },
         handleDownloadLink(e) {
-            this.handleGetPackage();
+            const defaultValue = e.target.value;
+            if (defaultValue) {
+                this.handleGetPackage();
+            }
+            else {
+                this.platformLoadingType = '';
+                this.configForm.adPackage = '';
+            }
         },
         handleDeleteImg() {
             this.imageUrl = '';
@@ -2485,15 +2716,17 @@ export default {
                 this.$message.error('请选择投放时段');
                 return;
             }
-            if (!this.urlResult) {
+            // this.isTomatoStatus = true;
+            // this.isTAwemeStatus = true;
+            if (this.isTAwemeStatus && !this.urlResult) {
                 this.$message.error('请上传图片');
                 return;
             }
-            if (!this.configForm.defaultFormList.length) {
+            if (this.isTAwemeStatus && !this.configForm.defaultFormList.length) {
                 this.$message.error('请添加卖点');
                 return;
             }
-            if (!this.creativeTag.length) {
+            if (this.isTomatoStatus && !this.creativeTag.length) {
                 this.$message.error('请添加标签');
                 return;
             }
@@ -2515,9 +2748,17 @@ export default {
                 paramsFormData.creativeSmartInventory = 1;
             }
             else if (paramsFormData.adverPosition === 'b') {
+                if (!paramsFormData.checkboxChangeValue.length) {
+                    this.$message.error('请选择媒体指定位置');
+                    return;
+                }
                 paramsFormData.creativeInventoryTypes = paramsFormData.checkboxChangeValue;
             }
             else if (paramsFormData.adverPosition === 'c') {
+                if (!paramsFormData.radioChangeValue) {
+                    this.$message.error('请选择场景指定位置');
+                    return;
+                }
                 paramsFormData.creativeSceneInventory = paramsFormData.radioChangeValue;
             }
             if (paramsFormData.launchTimeInterval === 'buxian') {

+ 281 - 29
src/views/modules/creative-copywrit/creative-copywrit.vue

@@ -346,7 +346,7 @@
                     </a-col>
                     <a-col :md="8" :sm="8">
                         <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
-                            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+                            <a-button type="primary" @click="handleSubmit" icon="search">查询</a-button>
                             <a-button type="primary" @click="searchRe" icon="reload" style="margin-left: 8px">重置</a-button>
                         </span>
                     </a-col>
@@ -1491,6 +1491,7 @@
                     <div class="acount-title-left">创意标题</div>
                     <div class="acount-title-right">
                         <a-button type="primary" @click="handleAddOrigin"><a-icon type="plus" />创意标题</a-button>
+                        <!-- TODO 暂时功能隐藏 -->
                         <!-- <a-button class="examin-select-title" @click="handleSelectTitle">选标题</a-button> -->
                         <span style="margin-left: 20px;">已填:{{ titleFiledResult.length || 0 }}</span>
                     </div>
@@ -1510,17 +1511,41 @@
                                 <a-input
                                     v-decorator="[
                                         item.name,
-                                        { rules: [
-                                            {required: true, message: '请输入创意标题', trigger: 'blur'},
-                                            {min: 5, max: 30, message: '创意标题5-30个字', trigger: 'blur'}
+                                        {rules: [
+                                            {validator: validatePass, trigger: 'blur'}
                                         ]}
                                     ]"
                                     class="examin-form-input"
+                                    :id="item.name"
                                     placeholder="请输入"
-                                    @change="handleFormInputChang($event, item)"
+                                    @change="handleFormInputChang($event, item.name, item.id)"
                                 />
-                                <span class="examin-form-num">{{ handleFilterName(item.name) }}/30</span>
+                                <span class="examin-form-num">{{ item.lenSize }}/30</span>
                                 <a-icon class="examin-form-icon" type="delete" @click="handleDelOrigin(item)"/>
+                                <div class="ad-name-tags-class">
+                                    <div v-if="item.tabStatus === 'alone'" class="name-tags-left">
+                                        <a-tag
+                                            v-for="val in item.updateTagsList"
+                                            :key="val.id"
+                                            color="#1890ff"
+                                            @click="handleGetChangeAll(val.name, item.name, item.id)"
+                                        >
+                                            + {{ val.name }}
+                                        </a-tag>
+                                    </div>
+                                    <div v-if="item.tabStatus === 'all'" class="name-tags-left">
+                                        <a-tag
+                                            v-for="val in item.defaultTagsList"
+                                            :key="val.id"
+                                            color="#1890ff"
+                                            @click="handleGetChangeAll(val.name, item.name, item.id)"
+                                        >
+                                            + {{ val.name }}
+                                        </a-tag>
+                                    </div>
+                                    <div v-if="item.tabStatus === 'alone'"><a @click="handleMoreTagsShow(item.id, 'more')">更多</a></div>
+                                    <div v-if="item.tabStatus === 'all'"><a @click="handleMoreTagsShow(item.id, 'little')">收起</a></div>
+                                </div>
                             </a-form-item>
                         </a-form>
                     </div>
@@ -1549,6 +1574,7 @@
                     <div class="acount-title-left">创意标题</div>
                     <div class="acount-title-right">
                         <a-button type="primary" @click="handleAddOrigin"><a-icon type="plus" />创意标题</a-button>
+                        <!-- TODO 暂时功能隐藏 -->
                         <!-- <a-button class="examin-select-title" @click="handleSelectTitle">选标题</a-button> -->
                         <span style="margin-left: 20px;">已填:{{ titleFiledResult.length || 0 }}</span>
                     </div>
@@ -1569,16 +1595,39 @@
                                     v-decorator="[
                                         item.name,
                                         { rules: [
-                                            {required: true, message: '请输入创意标题', trigger: 'blur'},
-                                            {min: 5, max: 30, message: '创意标题5-30个字', trigger: 'blur'}
+                                            {validator: validatePass, trigger: 'blur'}
                                         ]}
                                     ]"
                                     class="examin-form-input"
                                     placeholder="请输入"
-                                    @change="handleFormInputChang($event, item)"
+                                    @change="handleFormInputChang($event, item.name, item.id)"
                                 />
-                                <span class="examin-form-num">{{ handleFilterName(item.name) }}/30</span>
+                                <span class="examin-form-num">{{ item.lenSize }}/30</span>
                                 <a-icon class="examin-form-icon" type="delete" @click="handleDelOrigin(item)"/>
+                                <div class="ad-name-tags-class">
+                                    <div v-if="item.tabStatus === 'alone'" class="name-tags-left">
+                                        <a-tag
+                                            v-for="val in item.updateTagsList"
+                                            :key="val.id"
+                                            color="#1890ff"
+                                            @click="handleGetChangeAll(val.name, item.name, item.id)"
+                                        >
+                                            + {{ val.name }}
+                                        </a-tag>
+                                    </div>
+                                    <div v-if="item.tabStatus === 'all'" class="name-tags-left">
+                                        <a-tag
+                                            v-for="val in item.defaultTagsList"
+                                            :key="val.id"
+                                            color="#1890ff"
+                                            @click="handleGetChangeAll(val.name, item.name, item.id)"
+                                        >
+                                            + {{ val.name }}
+                                        </a-tag>
+                                    </div>
+                                    <div v-if="item.tabStatus === 'alone'"><a @click="handleMoreTagsShow(item.id, 'more')">更多</a></div>
+                                    <div v-if="item.tabStatus === 'all'"><a @click="handleMoreTagsShow(item.id, 'little')">收起</a></div>
+                                </div>
                             </a-form-item>
                         </a-form>
                     </div>
@@ -1619,6 +1668,7 @@ export default {
     },
     data() {
         return {
+            adNameTags: [],
             materTitltStatus: false,
             accountMaster: {
                 height: '35px',
@@ -1896,6 +1946,7 @@ export default {
             }
         });
         this.getHangye();
+        this.handleGetCreativeWord();
     },
     watch: {
         $route(n, o) {
@@ -1948,6 +1999,141 @@ export default {
     },
     methods: {
         ...mapGetters(['nickname', 'avatar', 'userInfo']),
+        handleSubmit() {
+            this.searchQuery();
+            this.checkArr = [];
+        },
+        handleMoreTagsShow(val, type) {
+            if (type === 'more') {
+                this.defaultFormList.forEach(item => {
+                    if (item.id === val) {
+                        item.tabStatus = 'all';
+                    }
+                });
+            }
+            else if (type === 'little') {
+                this.defaultFormList.forEach(item => {
+                    if (item.id === val) {
+                        item.tabStatus = 'alone';
+                    }
+                });
+            }
+        },
+        handleGetCreativeWord() {
+            getAction('/ctop/ByteDanceCreativeWordPackage/list').then(result => {
+                if (result.code === 0) {
+                    this.adNameTags = result.result.records;
+                }
+                else {
+                    this.$message.error(result.message);
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
+        },
+        validatePass(rule, value, callback) {
+            this.$nextTick(() => {
+                let finallyLenList = this.handleJudgeExec(value);
+                console.log(finallyLenList, 'finallyLenList---finallyLenList--finallyLenList');
+                let updateFinallyResult = this.adNameTags.filter(item => finallyLenList.includes(item.name)).map(val => val.name);
+                console.log(updateFinallyResult, '000000000000');
+                let resultSelectSize = 0;
+                if (finallyLenList.length) {
+                    const inputDefaultLen = value.length;
+                    let tagsLen = finallyLenList.length * 4;
+                    let tagsSureLen = 0;
+                    this.adNameTags.forEach(item => {
+                        finallyLenList.forEach(val => {
+                            if (item.name === val) {
+                                tagsSureLen += item.maxWordLen;
+                            }
+                        });
+                    });
+                    finallyLenList.forEach(item => {
+                        tagsLen += item.length;
+                    });
+                    resultSelectSize = inputDefaultLen - tagsLen + tagsSureLen;
+                }
+                else {
+                    resultSelectSize = value.length;
+                }
+                if (resultSelectSize === 0) {
+                    callback(new Error('请输入'));
+                }
+                else if (resultSelectSize > 30 || resultSelectSize < 5) {
+                    callback(new Error('创意标题5-30个字'));
+                }
+                else if (updateFinallyResult.length > 2) {
+                    callback(new Error('最多选择两个词包'));
+                }
+                else {
+                    callback();
+                }
+            });
+        },
+        handleJudgeExec(item) {
+            let re = /\{\{(.+?)\}\}/g;
+            let array = [];
+            let temp;
+            while ((temp = re.exec(item))) {
+                array.push(temp[1]);
+            };
+            return array;
+        },
+        // 点击获取光标位置进行字段插入
+        handleGetChangeAll(item, field, formId) {
+            let node = document.getElementById(field);
+            let startPos = node.selectionStart; // input 第0个字符到选中的字符
+            let endPos = node.selectionEnd; // 选中的字符到最后的字符
+            let txt = node.value;
+            this.$nextTick(() => {
+                let finallyLenList = this.handleJudgeExec(txt);
+                let updateFinallyResult = this.adNameTags.filter(item => finallyLenList.includes(item.name)).map(val => val.name);
+                if (updateFinallyResult.length >= 2) {
+                    this.$message.error('最多选择两个词包');
+                    return;
+                }
+                if (startPos === 0 || endPos === 0) {
+                    txt += '{{' + item + '}}';
+                    this.examinForm.setFieldsValue({[field]: txt});
+                }
+                else {
+                    this.examinForm.setFieldsValue({[field]: txt.substring(0, startPos) + '{{' + item + '}}' + txt.substring(endPos)});
+                    node.selectionStart = startPos + item.length + 6;
+                    node.selectionEnd = startPos + item.length + 6;
+                }
+                node.focus();
+                node.blur();
+            });
+            this.$nextTick(() => {
+                const dynamicWordPackIds = [];
+                let changeData = this.handleJudgeExec(this.examinForm.getFieldsValue()[field]);
+                let updateChangeData = this.adNameTags.filter(item => changeData.includes(item.name)).map(val => val.name);
+                const inputDefaultLen = this.examinForm.getFieldsValue()[field].length;
+                let tagsLen = updateChangeData.length * 4;
+                let tagsSureLen = 0;
+                let resultSelectSize = 0;
+                this.adNameTags.forEach(item => {
+                    updateChangeData.forEach(val => {
+                        if (item.name === val) {
+                            tagsSureLen += item.maxWordLen;
+                            dynamicWordPackIds.push(item.creativeWordId);
+                        }
+                    });
+                });
+                updateChangeData.forEach(item => {
+                    tagsLen += item.length;
+                });
+                resultSelectSize = inputDefaultLen - tagsLen + tagsSureLen;
+                this.defaultFormList.forEach(item => {
+                    if (item.id === formId) {
+                        item.lenSize = resultSelectSize;
+                        item.value = this.examinForm.getFieldsValue()[field];
+                        item.wordPackId = dynamicWordPackIds;
+                    }
+                });
+            });
+        },
         handleMaterTitleClick() {
             this.materTitltStatus = !this.materTitltStatus;
             if (this.materTitltStatus) {
@@ -1982,7 +2168,11 @@ export default {
                 this.defaultFormList.push({
                     id: randomNum,
                     name: 'username' + randomNum,
-                    value: ''
+                    value: '',
+                    lenSize: 0,
+                    tabStatus: 'alone',
+                    defaultTagsList: this.adNameTags,
+                    updateTagsList: this.adNameTags.slice(0, 4)
                 });
             }
         },
@@ -1994,7 +2184,7 @@ export default {
             let changeSlogan = this.defaultFormList;
             changeSlogan.forEach(item => {
                 item.title = item.value;
-                item.creative_word_ids = [];
+                item.creative_word_ids = item.wordPackId;
             });
             let params = {
                 ids: this.modalShowBatchList.map(item => item.id) || [],
@@ -2018,7 +2208,6 @@ export default {
             });
         },
         handleBatchCancel() {
-            console.log('批量取消按钮');
             this.batchVisible = false;
         },
         handleFodderWind() {
@@ -2066,7 +2255,6 @@ export default {
                     this.showUrlWater = res.result.watermarkUrl;
                     this.name = res.result.watermarkCode;
                     this.materialName = res.result.materialName;
-                    // 0317淘特除螨仪.mp4     0317幸福里 没钱 高清版.mp4    0316幸福里来北京五年 高清  大妈和美女2高清.mp4  WIFIAQZS2004JYL.mp4
                     res.result.slogans.forEach(item => {
                         item.name = 'username' + item.id;
                     });
@@ -2126,10 +2314,10 @@ export default {
                 this.solganForm.setFieldsValue({[data.name]: data.slogan});
             });
         },
-        handleFormInputChang(e, data) {
+        handleFormInputChang(e, field, formId) {
             const changeFiled = [];
             this.defaultFormList.forEach(item => {
-                if (item.id === data.id) {
+                if (item.id === formId) {
                     item.value = e.target.value;
                 }
             });
@@ -2138,7 +2326,34 @@ export default {
                     changeFiled.push(item.value);
                 }
             });
-            this.titleFiledResult = changeFiled;
+            this.$nextTick(() => {
+                const dynamicWordPackIds = [];
+                let finallyLenList = this.handleJudgeExec(this.examinForm.getFieldsValue()[field]);
+                let updateFinallyResult = this.adNameTags.filter(item => finallyLenList.includes(item.name)).map(val => val.name);
+                const inputDefaultLen = this.defaultFormList.filter(item => item.id === formId)[0].value.length;
+                let tagsLen = updateFinallyResult.length * 4;
+                let tagsSureLen = 0;
+                let resultSelectSize = 0;
+                this.adNameTags.forEach(item => {
+                    updateFinallyResult.forEach(val => {
+                        if (item.name === val) {
+                            tagsSureLen += item.maxWordLen;
+                            dynamicWordPackIds.push(item.creativeWordId);
+                        }
+                    });
+                });
+                updateFinallyResult.forEach(item => {
+                    tagsLen += item.length;
+                });
+                resultSelectSize = inputDefaultLen - tagsLen + tagsSureLen;
+                this.defaultFormList.forEach(item => {
+                    if (item.id === formId) {
+                        item.lenSize = resultSelectSize;
+                        item.wordPackId = dynamicWordPackIds;
+                    }
+                });
+                this.titleFiledResult = changeFiled;
+            });
         },
         handleCheckBoxChang(data) {
             this.applyTypeOption = data;
@@ -2196,7 +2411,10 @@ export default {
                 this.defaultFormList.push({
                     id: dateTime,
                     name: name,
-                    value: item
+                    value: item,
+                    tabStatus: 'alone',
+                    defaultTagsList: this.adNameTags,
+                    updateTagsList: this.adNameTags.slice(0, 4)
                 });
             });
             this.titleResult = [];
@@ -2219,7 +2437,11 @@ export default {
             this.defaultFormList.push({
                 id: randomNum,
                 name: 'username' + randomNum,
-                value: ''
+                value: '',
+                lenSize: 0,
+                tabStatus: 'alone',
+                defaultTagsList: this.adNameTags,
+                updateTagsList: this.adNameTags.slice(0, 4)
             });
         },
         handleDelOrigin(list) {
@@ -2234,15 +2456,40 @@ export default {
                 if (res.success) {
                     if (res.result.slogans.length) {
                         res.result.slogans.forEach(item => {
+                            let finallyLenList = this.handleJudgeExec(item.slogan);
+                            let resultSelectSize = 0;
+                            if (finallyLenList.length) {
+                                const inputDefaultLen = item.slogan.length;
+                                let tagsLen = finallyLenList.length * 4;
+                                let tagsSureLen = 0;
+                                this.adNameTags.forEach(item => {
+                                    finallyLenList.forEach(val => {
+                                        if (item.name === val) {
+                                            tagsSureLen += item.maxWordLen;
+                                        }
+                                    });
+                                });
+                                finallyLenList.forEach(item => {
+                                    tagsLen += item.length;
+                                });
+                                resultSelectSize = inputDefaultLen - tagsLen + tagsSureLen;
+                            }
+                            else {
+                                resultSelectSize = item.slogan.length;
+                            }
                             item.name = 'username' + item.id;
                             item.value = item.slogan;
+                            item.lenSize = resultSelectSize;
+                            item.tabStatus = 'alone';
+                            item.defaultTagsList = this.adNameTags;
+                            item.updateTagsList = this.adNameTags.slice(0, 4);
                         });
                         this.defaultFormList = res.result.slogans;
-                        this.$nextTick(() => {
-                            this.defaultFormList.forEach(item => {
-                                this.defaultFormList.setFieldsValue({[item.name]: item.slogan});
-                            });
-                        });
+                        // this.$nextTick(() => {
+                        //     this.defaultFormList.forEach(item => {
+                        //         this.defaultFormList.setFieldsValue({[item.name]: item.slogan});
+                        //     });
+                        // });
                     }
                     else {
                         for (let i = 0; i < 3; i++) {
@@ -2250,7 +2497,11 @@ export default {
                             this.defaultFormList.push({
                                 id: randomNum,
                                 name: 'username' + randomNum,
-                                value: ''
+                                value: '',
+                                lenSize: 0,
+                                tabStatus: 'alone',
+                                defaultTagsList: this.adNameTags,
+                                updateTagsList: this.adNameTags.slice(0, 4)
                             });
                         }
                     }
@@ -2264,6 +2515,7 @@ export default {
             this.causeVisible = true;
             this.recommendVisible = false;
             this.titleResult = [];
+            this.checkArr = [];
         },
         handleCauseCancel() {
             this.causeVisible = false;
@@ -2277,7 +2529,7 @@ export default {
             let changeSlogan = this.defaultFormList;
             changeSlogan.forEach(item => {
                 item.title = item.value;
-                item.creative_word_ids = [];
+                item.creative_word_ids = item.wordPackId;
             });
             let params = {
                 id: this.currentPageOnlyList.id,
@@ -2627,6 +2879,7 @@ export default {
             this.$refs.selectTable.getData()
             this.labelValue = [];
             this.loadData(1);
+            this.checkArr = [];
         },
         getList(value) {
             // if (value) {
@@ -2647,8 +2900,6 @@ export default {
             }
         },
         onChangeCheck(checkedList, data) {
-            console.log(data, 'data--data');
-            console.log(checkedList, this.checkArr, this.dataSource, '-------');
             if (data.value === '0') {
                 this.showTabsTitle = '0';
             }
@@ -2859,7 +3110,8 @@ export default {
                         this.visibleDetail = false;
                         closeAllVideoFun();
                     });
-                } else {
+                }
+                else {
                     fileEdit({
                         id: this.id,
                         status: editStatus,

+ 2 - 2
src/views/modules/headline-view/headline-view-server.js

@@ -3,8 +3,8 @@
  * @author jiayufei
  */
 
-export const urlAcount = 'http://118.24.244.213:8080'; // 线上
+// export const urlAcount = 'http://118.24.244.213:8080'; // 线上
 // export const urlAcount = 'http://apipre.tjyourong.com.cn'; // 预生产
-// export const urlAcount = 'http://192.168.1.43:8080'; // 子安
+export const urlAcount = 'http://192.168.1.43:8080'; // 子安
 // export const urlAcount = 'http://139.186.165.84:8080'; // 测试
 // export const urlAcount = 'http://192.168.1.8:8080'; // 学超

+ 266 - 182
src/views/modules/headline-view/headline-view.vue

@@ -12,29 +12,35 @@
                                 :allowClear="false"
                                 format="YYYY-MM-DD"
                                 :disabled-date="disabledDate"
-                                @change="onChange"
+                                @change="handleCostTimeChange" 
                             />
                         </div>
                         <div class="costInfo">
                             <div class="yesterdayInfo">
-                                <div style="margin-bottom:8px">上阶段花费</div>
-                                <div style="font-size:14px;font-weight:600">{{ yearCostReportList.lastCost || 0 }}</div>
+                                <div style="margin-bottom:8px">昨日花费</div>
+                                <div style="font-size:14px;font-weight:600">{{ Number(yearCostReportList.lastCost) | decimalsHandle }}</div>
                             </div>
                             <a-divider type="vertical"/>
                             <div class="tongbi">
-                                <div style="margin-bottom:8px">
-                                    
+                                <div style="margin-bottom:8px;margin-left: 10px;">
+                                    
                                     <a-tooltip >
                                         <template slot="title">
-                                            <span>截止此时与上一阶段的花费同比</span>
+                                            <span>截止此时今日与昨日的花费同比</span>
                                         </template>
-                                        <a-icon type="question-circle" />
+                                        <a-icon type="question-circle"/>
                                     </a-tooltip>
                                 </div>
-                                <div style="font-size:14px;font-weight:600">{{ yearCostReportList.compare || 0 }}</div>
+                                <div style="font-size:14px;font-weight:600;text-align: end;">
+                                    <span class="sign">
+                                        <a-icon v-if="Number(yearCostReportList.compare) >= 0" type="rise" class="rise"/>
+                                        <a-icon v-if="Number(yearCostReportList.compare) < 0" type="fall" class="fall"/>
+                                    </span>
+                                    {{ yearCostReportList.compare ? yearCostReportList.compare + '%' : '-' }}
+                                </div>
                             </div>
                         </div>
-                        <div class="costNum">{{ yearCostReportList.nowCost || 0 }}</div>
+                        <div class="costNum">{{ Number(yearCostReportList.nowCost) | decimalsHandle }}</div>
                     </div>
                     <div class="accountBodyLeftCostRight">
                         <div
@@ -45,33 +51,36 @@
                         >
                             <a-empty/>
                         </div>
+                        <span class="cost-radio-tool">
+                            花费占比
+                            <a-tooltip>
+                                <template slot="title">
+                                    <span>花费占比指花费占账户预算的比例</span>
+                                </template>
+                                <a-icon type="question-circle"/>
+                            </a-tooltip>
+                        </span>
                     </div>
                 </div>
                 <div class="accountBodyLeftOther">
                     <div class="top">                       
                         <div class="item" v-for="item in throwColumns" :key="item.dataIndex">
                             <div class="todyCost">
-                                <span v-if="item.type === 'double'">{{ item.today }}</span>
-                                <span v-else-if="item.type === 'string'">{{ item.today }}</span>
-                                <span v-else-if="item.type === 'int'">{{ item.today }}</span>
+                                <span v-if="item.type === 'spend'">{{ Number(item.today) | decimalsHandle }}</span>
+                                <span v-else-if="item.type === 'double'">{{ Number(item.today) | decimalsHandle }}</span>
+                                <span v-else-if="item.type === 'string'">{{ Number(item.today) | decimalsHandle }}</span>
+                                <span v-else-if="item.type === 'int'">{{ item.today !== 0 ? item.today + '%' : 0 }}</span>
                                 <span class="sign">
                                     <a-icon type="rise" class="rise" v-show="item.today - item.yesterday > 0"/>
                                     <a-icon type="fall" class="fall" v-show="item.today - item.yesterday < 0" />
                                 </span>
                             </div>
                             <div class="yesterdayCost">
-                                <a-tooltip >
-                                    <template slot="title">
-                                    <span>
-                                        <!-- {{dateValue[0].format('YYYY-MM-DD') === dateValue[1].format('YYYY-MM-DD') ? moment(dateValue[0]).subtract(1,'days').format('YYYY-MM-DD') : dateStringShow}}
-                                        的{{item.title}} -->
-                                    </span>
-                                    </template>
-                                    <a-icon type="question-circle" />
-                                </a-tooltip>:
-                                <span v-if="item.type === 'double'">{{ item.yesterday }}</span>
-                                <span v-else-if="item.type === 'string'">{{ item.yesterday }}</span>
-                                <span v-else-if="item.type === 'int'">{{ item.yesterday }}</span>
+                                <span>/ 昨日: </span>
+                                <span v-if="item.type === 'spend'">{{ Number(item.yesterday) | decimalsHandle }}</span>
+                                <span v-else-if="item.type === 'double'">{{ Number(item.yesterday) | decimalsHandle }}</span>
+                                <span v-else-if="item.type === 'string'">{{ Number(item.yesterday) | decimalsHandle }}</span>
+                                <span v-else-if="item.type === 'int'">{{ item.yesterday !== 0 ? item.yesterday + '%' : 0 }}</span>
                             </div>
                             <span
                                 class="IndexName"
@@ -90,6 +99,9 @@
                         </div>
                     </div>
                     <div class="echart" style="margin-top:20px;position:relative">
+                        <div style="position:absolute;right:5px;top:-15px">
+                            更新时间:{{ yearCostReportList.updTime || '-' }}
+                        </div>
                         <a-spin :spinning="accountIndexEchartSpinning">
                             <div
                                 class="accountIndexEchart"
@@ -118,17 +130,12 @@
                 <div class="accountBodyRightInfo">
                     <div class="accountBodyRightInfoItem">
                         <span class="name">余额:</span>
-                        <span>{{ topAccountMsg.accountMap && topAccountMsg.accountMap.validBalance }}</span>
+                        <span>{{ topAccountMsg.accountMap && Number(topAccountMsg.accountMap.validBalance) | decimalsHandle }}</span>
                     </div>
                     <div class="accountBodyRightInfoItem">
                         <span class="name">投放状态:</span>
                         <span>{{ topAccountMsg.accountMap && topAccountMsg.accountMap.accountStatus === 0 ? '投放中' : '未投放' }}</span>
                     </div>
-                    <div class="accountBodyRightInfoItem createNum" @click="gorejectCreativePage">
-                        <span class="name">被拒创意数:</span>
-                        <span>0</span>
-                        <a-icon type="right" style="font-size:12px;position:absolute;right:10px;top:16px"/>
-                    </div>
                 </div>
             </div>
         </div>
@@ -137,6 +144,7 @@
                 <div class="title">
                     <div class="titleContext">
                         投放数据
+                        <span class="titleTip">更新时间:{{ planData.length ? planData[0].updateTime : '-' }}</span>
                     </div>
                     <div style="float: right;margin-top: -23px;">
                         <a-range-picker 
@@ -153,7 +161,7 @@
                         :columns="planColumns"
                         :data-source="planData"
                         :pagination="false"
-                        @change="handlePlaneSort"
+                        :scroll="{x: 1500}"
                     >
                     <span slot="optStatus" slot-scope="text, record">
                         <a-switch :checked="text === 'AD_STATUS_ENABLE'" @change="handleSwitchChang($event, record)"/>
@@ -196,14 +204,16 @@
                     />
                 </div>
             </div>
-            <div class="titleContext source-material"> 素材相关</div>
+            <div class="titleContext source-material">
+                素材相关
+                <span class="titleTip">更新时间:{{ materialData.length ? materialData[0].updateTime : '-' }}</span></div>
             <div class="materialBodyRight">
                 <div class="material-table-class">
                     <a-table
                         :columns="materialColumns"
                         :data-source="materialData"
                         :pagination="false"
-                        @change="materialChange"
+                        :scroll="{x: 1500}"
                     >
                         <span slot="posterUrl" slot-scope="text,record">
                             <div style="background:#e8e8e8;text-align:center;border-radius:3px">
@@ -212,15 +222,15 @@
                                         <video :src="record.videoUrl" style="width:250px" controls></video>
                                     </template>
                                     <img v-if="text" :src="text" style="width:20px">
-                                    <img v-if="!text" src="@/assets/feishu.png" style="width:20px">
+                                    <img v-if="!text" src="@/assets/noImg.png" style="width:20px">
                                 </a-popover>
                             </div>
                         </span>
                     </a-table>
                     <a-pagination
-                        class="pagin-table-class"
                         :total="materTotalAll"
                         :show-total="total => `共 ${materTotalAll} 条`"
+                        class="pagin-table-class"
                         size="small"
                         show-size-changer
                         show-quick-jumper
@@ -233,13 +243,19 @@
         <!-- 修改定向的modal -->
         <a-modal
             v-model="targetVisible"
-            title="修改定向"
+            title="修改定向"
             @ok="handleTargethandleOk"
             @cancel="handleTargethandleCancel"
         >
             <div class="linkBody">
                 <a-row>
                     <a-col :span="6">
+                        <div style="text-align:right">已优先定向:</div>
+                    </a-col>
+                    <a-col :span="16">{{ packageName }}</a-col>
+                </a-row>
+                <a-row style="margin-top: 20px;">
+                    <a-col :span="6">
                         <div style="text-align:right">修改定向包:</div>
                     </a-col>
                     <a-col :span="16">
@@ -282,8 +298,8 @@
             </div>
         </a-modal>
         <a-modal
-            title="修改调价"
             v-if="budgetVisible"
+            title="修改出价"
             :visible="budgetVisible"
             dialog-class="mode-modal-class"
             @ok="handleBudgetSure"
@@ -297,10 +313,8 @@
                     :label-col="labelCol"
                     :wrapper-col="wrapperCol"
                 >
-                    <a-form-model-item label="调价" prop="budget">
-                        <a-input-number
-                            v-model="budgetForm.budget"
-                        /> 元
+                    <a-form-model-item label="出价" prop="budget">
+                        <a-input-number v-model="budgetForm.budget"/> 元
                     </a-form-model-item>
                 </a-form-model>
             </div>
@@ -353,6 +367,14 @@ export default {
             accountVisible: false,
             throwColumns: [
                 {
+                    title: '花费',
+                    dataIndex: 'spendCost',
+                    key: 'spendCost',
+                    today: 0,
+                    yesterday: 0,
+                    type: 'spend'
+                },
+                {
                     title: '转化成本',
                     dataIndex: 'activationCost',
                     key: 'activationCost',
@@ -366,7 +388,7 @@ export default {
                     key: 'activation',
                     today: 0,
                     yesterday: 0,
-                    type: 'int'
+                    type: 'string'
                 },
                 {
                     title: '转化率',
@@ -388,9 +410,9 @@ export default {
             newLink: '',
             linkVisible: false,
             targetVisible: false,
-            isActive: 'activationCost',
+            isActive: 'spendCost',
             moment,
-            materialDate: [],
+            materialDate: [moment().subtract(1,'days').format('YYYY-MM-DD'), moment().subtract(1,'days').format('YYYY-MM-DD')],
             dateValue: [],
             planData: [],
             planPagin: {
@@ -403,80 +425,101 @@ export default {
                     dataIndex: 'adName',
                     key: 'adName',
                     align: 'center',
-                    width: 120,
-                    ellipsis: true
+                    width: 240
                 },
                 {
                     title: '花费',
                     dataIndex: 'cost',
                     key: 'cost',
-                    align: 'center'
+                    align: 'center',
+                    width: 180,
+                    sorter: (a, b) => a.cost - b.cost
                 },
                 {
                     title: '出价',
-                    dataIndex: 'bid',
-                    key: 'bid',
-                    align: 'center'
+                    dataIndex: 'cpaBid',
+                    key: 'cpaBid',
+                    align: 'center',
+                    width: 180,
+                    sorter: (a, b) => a.cpaBid - b.cpaBid
                 },
                 {
                     title: '展示数',
                     dataIndex: 'showNum',
                     key: 'showNum',
-                    align: 'center'
+                    align: 'center',
+                    width: 180,
+                    sorter: (a, b) => a.showNum - b.showNum
                 },
                 {
                     title: '平均千次展现费用',
                     dataIndex: 'averageShow',
                     key: 'averageShow',
-                    align: 'center'
+                    align: 'center',
+                    width: 180,
+                    sorter: (a, b) => a.averageShow - b.averageShow
                 },
                 {
                     title: '点击数',
                     dataIndex: 'click',
                     key: 'click',
-                    align: 'center'
+                    align: 'center',
+                    width: 180,
+                    sorter: (a, b) => a.click - b.click
                 },
                 {
                     title: '平均点击单价',
                     dataIndex: 'averageClick',
                     key: 'averageClick',
-                    align: 'center'
+                    align: 'center',
+                    width: 180,
+                    sorter: (a, b) => a.averageClick - b.averageClick
                 },
                 {
                     title: '点击率',
                     dataIndex: 'clickRate',
                     key: 'clickRate',
-                    align: 'center'
+                    align: 'center',
+                    width: 180,
+                    sorter: (a, b) => a.clickRate.split('%')[0] - b.clickRate.split('%')[0]
                 },
                 {
                     title: '转化数',
                     dataIndex: 'convertNum',
                     key: 'convertNum',
-                    align: 'center'
+                    align: 'center',
+                    width: 180,
+                    sorter: (a, b) => a.convertNum - b.convertNum
                 },
                 {
                     title: '转化率',
                     dataIndex: 'converRate',
                     key: 'converRate',
-                    align: 'center'
+                    align: 'center',
+                    width: 180,
+                    sorter: (a, b) => a.converRate.split('%')[0] - b.converRate.split('%')[0]
                 },
                 {
                     title: '转化成本',
                     dataIndex: 'conver',
                     key: 'conver',
-                    align: 'center'
+                    align: 'center',
+                    width: 180,
+                    sorter: (a, b) => a.conver - b.conver
                 },
                 {
-                    title: '比',
+                    title: '比',
                     dataIndex: 'compare',
                     key: 'compare',
-                    align: 'center'
+                    align: 'center',
+                    width: 180
                 },
                 {
                     title: '状态',
                     dataIndex: 'optStatus',
                     key: 'optStatus',
                     align: 'center',
+                    width: 180,
                     scopedSlots: {customRender: 'optStatus'}
                 },
                 {
@@ -484,6 +527,8 @@ export default {
                     dataIndex: 'operator',
                     key: 'operator',
                     align: 'center',
+                    fixed: 'right',
+                    width: 200,
                     scopedSlots: {customRender: 'operator'}
                 }
             ],
@@ -505,66 +550,84 @@ export default {
                     title: '素材ID',
                     dataIndex: 'materialId',
                     key: 'materialId',
+                    width: 180,
                     align: 'center'
                 },
                 {
                     title: '花费',
                     dataIndex: 'cost',
                     align: 'center',
-                    sorter: () => {}
+                    width: 180,
+                    sorter: (a, b) => a.cost - b.cost
                 },
                 {
                     title: '展示数',
                     dataIndex: 'showMaterial',
                     key: 'showMaterial',
-                    align: 'center'
+                    align: 'center',
+                    width: 180,
+                    sorter: (a, b) => a.showMaterial - b.showMaterial
                 },
                 {
                     title: '平均千次展现费用',
                     dataIndex: 'costPerThousandShow',
                     key: 'costPerThousandShow',
-                    align: 'center'
+                    align: 'center',
+                    width: 180,
+                    sorter: (a, b) => a.costPerThousandShow - b.costPerThousandShow
                 },
                 {
                     title: '点击数',
                     dataIndex: 'click',
                     key: 'click',
-                    align: 'center'
+                    align: 'center',
+                    width: 180,
+                    sorter: (a, b) => a.click - b.click
                 },
                 {
-                    title: '平均店家单价',
+                    title: '平均点击单价',
                     dataIndex: 'costPerClick',
                     key: 'costPerClick',
-                    align: 'center'
+                    align: 'center',
+                    width: 180,
+                    sorter: (a, b) => a.costPerClick - b.costPerClick
                 },
                 {
                     title: '点击率',
                     dataIndex: 'clickRate',
                     key: 'clickRate',
-                    align: 'center'
+                    align: 'center',
+                    width: 180,
+                    sorter: (a, b) => a.clickRate.split('%')[0] - b.clickRate.split('%')[0]
                 },
                 {
                     title: '转化数',
                     dataIndex: 'convertMaterial',
                     key: 'convertMaterial',
-                    align: 'center'
+                    align: 'center',
+                    width: 180,
+                    sorter: (a, b) => a.convertMaterial - b.convertMaterial
                 },
                 {
                     title: '转化率',
                     dataIndex: 'convertRate',
                     key: 'convertRate',
-                    align: 'center'
+                    align: 'center',
+                    width: 180,
+                    sorter: (a, b) => a.convertRate.split('%')[0] - b.convertRate.split('%')[0]
                 },
                 {
                     title: '转化成本',
                     dataIndex: 'costConvert',
                     key: 'costConvert',
+                    width: 180,
                     align: 'center'
                 },
                 {
                     title: '关联创意数',
                     dataIndex: 'count',
                     key: 'count',
+                    width: 180,
                     align: 'center'
                 },
                 {
@@ -572,8 +635,8 @@ export default {
                     dataIndex: 'materialUploadTime',
                     key: 'photoShow',
                     align: 'center',
-                    scopedSlots: {customRender: 'photoShow'},
-                    sorter: () => {}
+                    width: 180,
+                    scopedSlots: {customRender: 'photoShow'}
                 }
             ],
             materialData: [],
@@ -589,7 +652,8 @@ export default {
             topCostList: {},
             yearCostReportList: {}, // 环比数据
             selectiveList: [],
-            currentUnit: {}
+            currentUnit: {},
+            packageName: ''
         };
     },
     mounted() {
@@ -599,10 +663,7 @@ export default {
         ...mapGetters(['userInfo']),
         // 获取所有的定向包的列表
         handleGetAdAudiencePackage(account) {
-            const params = {
-                accountId: account
-            };
-            getAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getAdAudiencePackage', params)
+            getAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getAdAudiencePackage', {accountId: account})
                 .then(result => {
                     if (result.code === 0) {
                         this.selectiveList = result.result || [];
@@ -637,7 +698,24 @@ export default {
                 console.log(error, 'eeee');
             });
         },
+        handleGetADAudiencePackageId(actId, id) {
+            const paramsData = {
+                accountId: actId,
+                adId: id
+            };
+            getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/getADAudiencePackageId', paramsData).then(result => {
+                if (result.code === 0) {
+                    this.packageName = result.result.packageId ? this.selectiveList.filter(item => item.audience_package_id === Number(result.result.packageId))[0].name : '暂无';
+                }
+                else {
+                    this.$message.error(result.message);
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
+        },
         handleUpdateDirectional(record) {
+            this.handleGetADAudiencePackageId(this.topAccountMsg.accountMap.accountId, record.adId);
             this.currentUnit = record;
             this.targetVisible = true;
         },
@@ -690,8 +768,10 @@ export default {
             };
             getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/getReportPlanCost', paramsData).then(result => {
                 if (result.code === 0) {
-                    console.log(result.result, '计划列表数据');
-                    this.planData = result.result.list;
+                    this.planData = result.result.list.map(item => {
+                        item.converRate = item.converRate + '%';
+                        return item;
+                    });
                     this.planTotalAll = result.result.total;
                 }
                 else {
@@ -712,15 +792,17 @@ export default {
                 if (result.code === 0) {
                     this.yearCostReportList = result.result;
                     this.initEchart('gaugeEchart', this.initGaugechart(result.result.costShare));
-                    this.initEchart('accountIndexEchart', this.initAccountIndexEchart(result.result, 'activationCost'));
-                    this.throwColumns[0].today = Number(result.result.nowMap.conver);
-                    this.throwColumns[0].yesterday = Number(result.result.lastMap.conver);
-                    this.throwColumns[1].today = Number(result.result.nowMap.converNum);
-                    this.throwColumns[1].yesterday = Number(result.result.lastMap.converNum);
-                    this.throwColumns[2].today = Number(result.result.nowMap.converRate);
-                    this.throwColumns[2].yesterday = Number(result.result.lastMap.converRate);
-                    this.throwColumns[3].today = Number(result.result.nowMap.averageShow);
-                    this.throwColumns[3].yesterday = Number(result.result.lastMap.averageShow);
+                    this.initEchart('accountIndexEchart', this.initAccountIndexEchart(result.result, 'spendCost'));
+                    this.throwColumns[0].today = Number(result.result.nowCost);
+                    this.throwColumns[0].yesterday = Number(result.result.lastCost);
+                    this.throwColumns[1].today = Number(result.result.nowMap.conver);
+                    this.throwColumns[1].yesterday = Number(result.result.lastMap.conver);
+                    this.throwColumns[2].today = Number(result.result.nowMap.converNum);
+                    this.throwColumns[2].yesterday = Number(result.result.lastMap.converNum);
+                    this.throwColumns[3].today = Number(result.result.nowMap.converRate);
+                    this.throwColumns[3].yesterday = Number(result.result.lastMap.converRate);
+                    this.throwColumns[4].today = Number(result.result.nowMap.averageShow);
+                    this.throwColumns[4].yesterday = Number(result.result.lastMap.averageShow);
                 }
                 else {
                     this.$message.error(result.message);
@@ -741,7 +823,6 @@ export default {
                     const defaultTime = [result.result.startTime, result.result.endTime];
                     this.dateValue = [...defaultTime];
                     this.planRangePicker = [...defaultTime];
-                    this.materialDate = [...defaultTime];
                     this.handleGetAccountMessage(result.result.account.accountId);
                     this.handleYearOnYearCost(result.result);
                     this.handleGetPlanTableList(result.result);
@@ -757,10 +838,7 @@ export default {
         },
         // 获取头部最右侧数据
         handleGetAccountMessage(value) {
-            const paramsData = {
-                accountId: value
-            };
-            getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/getAccountCost', paramsData).then(result => {
+            getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/getAccountCost', {accountId: value}).then(result => {
                 if (result.code === 0) {
                     this.topAccountMsg = result.result;
                 }
@@ -775,14 +853,18 @@ export default {
         handleGetmaterialData(data) {
             const paramsData = {
                 accountId: data.account.accountId,
-                startTime: data.startTime,
-                endTime: data.endTime,
+                startTime: this.materialDate[0],
+                endTime: this.materialDate[1],
                 pageNum: this.materPagin.page,
                 pageSize: this.materPagin.size
             };
             getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/selectMaterialDailyReport', paramsData).then(result => {
                 if (result.code === 0) {
-                    this.materialData = result.result.list;
+                    this.materialData = result.result.list.map(item => {
+                        item.clickRate = item.clickRate + '%';
+                        item.convertRate = item.convertRate + '%';
+                        return item;
+                    });
                     this.materTotalAll = result.result.total;
                 }
                 else {
@@ -820,6 +902,7 @@ export default {
         // 修改定向的取消按钮
         handleTargethandleCancel() {
             this.adAudiencePackageId = '';
+            this.packageName = '';
             this.targetVisible = false;
         },
         handleAccounthandleOk() {
@@ -827,8 +910,8 @@ export default {
                 account: {
                     accountId: this.selectaccountId
                 },
-                startTime: this.topCostList.startTime,
-                endTime: this.topCostList.startTime
+                startTime: this.dateValue[0],
+                endTime: this.dateValue[1]
             };
             this.topCostList = paramsData;
             this.handleGetAccountMessage(this.selectaccountId);
@@ -845,6 +928,7 @@ export default {
         },
         // 计划点击分页操作
         handleOnShowSizeChange(current, pageSize) {
+            console.log(current, pageSize, 'current, pageSize');
             this.planPagin = {
                 page: current,
                 size: pageSize
@@ -868,12 +952,12 @@ export default {
                 account: {
                     accountId: this.topCostList.account.accountId
                 },
-                startTime: this.planRangePicker[0],
-                endTime: this.planRangePicker[1]
+                startTime: this.materialDate[0],
+                endTime: this.materialDate[1]
             };
             this.handleGetmaterialData(paramsData);
         },
-        // have 跳转到拒审重提-创意页面
+        // TODO 暂时功能隐藏 跳转到拒审重提-创意页面
         gorejectCreativePage() {
             this.$router.push('/Statistics/refuseDataCreatNew');
         },
@@ -896,11 +980,8 @@ export default {
             };
             this.handleGetPlanTableList(paramsData);
         },
-        onChange(date, dateString) {
-            if (dateString.length > 0 && dateString[0] !== dateString[1]) {
-                let interval = date[1].diff(date[0], 'days');
-                this.dateStringShow = `${moment(date[0]).subtract(1 + interval, 'days').format('YYYY-MM-DD')}~${moment(date[0]).subtract(1, 'days').format('YYYY-MM-DD')}`;
-            }
+        handleCostTimeChange(date, dateString) {
+            this.dateValue = dateString;
             const paramsData = {
                 account: {
                     accountId: this.topCostList.account.accountId
@@ -940,6 +1021,7 @@ export default {
         },
         // 默认echarts
         initAccountIndexEchart(data, type) {
+            const LastX = data.lastMap.costList.map(item => item.time);
             const todayX = data.nowMap.costList.map(item => item.time);
             let specialIdentification = '';
             if (todayX.length && todayX[0].indexOf('-') !== -1) {
@@ -950,7 +1032,11 @@ export default {
             }
             let tadayShowY = [];
             let yestodayShowY = [];
-            if (type === 'activationCost') {
+            if (type === 'spendCost') {
+                tadayShowY = data.nowMap.costList.map(item => item.cost);
+                yestodayShowY = data.lastMap.costList.map(item => item.cost);
+            }
+            else if (type === 'activationCost') {
                 tadayShowY = data.nowMap.costList.map(item => item.conver);
                 yestodayShowY = data.lastMap.costList.map(item => item.conver);
             }
@@ -971,6 +1057,7 @@ export default {
                     trigger: 'axis',
                     formatter: params => {
                         let isType = '';
+                        let showBai = this.isActive === 'bclick' || this.isActive === 'formCount' ? '%' : '';
                         this.throwColumns.forEach(item => {
                             if (item.dataIndex === this.isActive) {
                                 isType = item.title;
@@ -978,7 +1065,8 @@ export default {
                         });
                         let option = isType + '<br/>';
                         for (let i = 0, length = params.length; i < length; i++) {
-                            option += `<span style="width:8px;height:8px;border-radius:50%;background:${params[i].color};display:inline-block;position:relative;top:-2px;margin-right:5px"></span>` + ' ' + params[i].axisValue + specialIdentification + '  ' + params[i].data + '<br />';
+                            const showTime = specialIdentification === '时' ? params[i].seriesName : '';
+                            option += `<span style="width:8px;height:8px;border-radius:50%;background:${params[i].color};display:inline-block;position:relative;top:-2px;margin-right:5px"></span>${showTime} ${params[i].axisValue}${specialIdentification} ${params[i].data}${showBai}<br />`;
                         }
                         return option;
                     }
@@ -1039,11 +1127,14 @@ export default {
                                 y: 0,
                                 x2: 0,
                                 y2: 1,
-                                colorStops: [{
-                                    offset: 0, color: '#2461F1' // 0% 处的颜色
-                                }, {
-                                    offset: 1, color: 'white' // 100% 处的颜色
-                                }]
+                                colorStops: [
+                                    {
+                                        offset: 0, color: '#2461F1' // 0% 处的颜色
+                                    },
+                                    {
+                                        offset: 1, color: 'white' // 100% 处的颜色
+                                    }
+                                ]
                             }
                         }
                     },
@@ -1063,12 +1154,28 @@ export default {
                             color: '#3CC6A5',
                             borderWidth: 2,
                             borderColor: '#fff'
+                        },
+                        areaStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    {
+                                        offset: 0, color: '#3CC6A5' // 0% 处的颜色
+                                    }, {
+                                        offset: 1, color: 'white' // 100% 处的颜色
+                                    }
+                                ]
+                            }
                         }
                     }
                 ]
             };
             option.xAxis[0].data = todayX;
-            option.xAxis[1].data = todayX;
+            option.xAxis[1].data = LastX;
             option.series[0].data = tadayShowY;
             option.series[1].data = yestodayShowY;
             return option;
@@ -1139,10 +1246,12 @@ export default {
                                 fontFamily: 'PingFangSC'
                             }
                         },
-                        data: [{
-                            name: '花费占比',
-                            value: dataArr
-                        }],
+                        data: [
+                            {
+                                name: '',
+                                value: dataArr
+                            }
+                        ],
                         pointer: {
                             show: true,
                             length: '75%',
@@ -1226,44 +1335,12 @@ export default {
                 ]
             };
             return option;
-        },
-        // 投放点击排序功能
-        handlePlaneSort(pagination, filters, sorter, {currentDataSource}) {
-            if (sorter.order === 'descend') {
-                this.newDataSortType = 'DESC';
-                this.newDataSortCode = sorter.columnKey;
-            }
-            else if (sorter.order === 'ascend') {
-                this.newDataSortType = 'ASC';
-                this.newDataSortCode = sorter.columnKey;
-            }
-            else {
-                this.newDataSortType = 'DESC';
-                this.newDataSortCode = 'charge';
-            }
-            this.getLaunchData();
-        },
-        // 素材点击排序功能
-        materialChange(pagination, filters, sorter) {
-            console.log(sorter, 'v--sorter--sorter');
-            if (sorter.order === 'descend') {
-                this.materialSortType = 'DESC';
-                this.materialSortCode = sorter.columnKey;
-            }
-            else if (sorter.order === 'ascend') {
-                this.materialSortType = 'ASC';
-                this.materialSortCode = sorter.columnKey;
-            }
-            else {
-                this.materialSortType = 'DESC';
-                this.materialSortCode = 'charge';
-            }
         }
     }
 };
 </script>
 <style lang="scss">
-    .accountPage .accountBody{
+    .accountPage .accountBody {
         line-height: 1;
         .ant-input {
             -webkit-box-sizing: border-box;
@@ -1342,6 +1419,31 @@ export default {
         .common-input-long {
             width: 140px !important;
         }
+        .sign {
+            font-size: 18px;
+            .rise {
+                color: #F2637B;
+                width: 16px;
+                height: 16px;
+                text-align: center;
+                transform: rotate(-30deg);
+            }
+            .fall {
+                color: green;
+                width: 16px;
+                height: 16px;
+                text-align: center;
+                transform: rotate(30deg);
+            }
+            .up {
+                width: 16px;
+                height: 16px;
+                text-align: center;
+                background-color: #F2637B;
+                border-radius: 5px;
+                color: white;
+            }
+        }
         .pagin-table-class {
             display: flex;
             justify-content: flex-end;
@@ -1365,14 +1467,14 @@ export default {
             
         }
         .accountBodyLeft {
-            width: 75%;
+            width: 80%;
             margin-right: 26px;
             padding: 20px;
             display: flex;
             justify-content: space-between;
         }
         .accountBodyRight {
-            width: 25%;
+            width: 18%;
             padding: 25px;
         }
         .accountBodyLeft,.accountBodyRight {
@@ -1401,14 +1503,14 @@ export default {
             }
             .costInfo {
                 margin: 20px 0 0 0;
-                width: 70%;
+                width: 100%;
                 display: flex;
                 justify-content: space-between;    
             }
-            .yesterdayInfo {
-                width:50%;
-                flex-shrink: 0;
-            }
+            // .yesterdayInfo {
+            //     width:50%;
+            //     flex-shrink: 0;
+            // }
             .costNum{
                 width: 90%;
                 font-size: 26px;
@@ -1439,6 +1541,13 @@ export default {
         }
         .accountBodyLeftCostRight {
             width: 45%;
+            margin-left: 15px;
+            position: relative;
+            .cost-radio-tool {
+                position: absolute;
+                bottom: 34px;
+                left: 28%;
+            }
         }
         .accountBodyLeftOther {
             width: 60%;
@@ -1461,31 +1570,6 @@ export default {
                 margin-bottom: 10px;
                 width: 100%;
             }
-            .sign {
-                font-size: 18px;
-                .rise {
-                    color: #F2637B;
-                    width: 16px;
-                    height: 16px;
-                    text-align: center;
-                    transform: rotate(-30deg);
-                }
-                .fall {
-                    color: green;
-                    width: 16px;
-                    height: 16px;
-                    text-align: center;
-                    transform: rotate(30deg);
-                }
-                .up {
-                    width: 16px;
-                    height: 16px;
-                    text-align: center;
-                    background-color: #F2637B;
-                    border-radius: 5px;
-                    color: white;
-                }
-            }
             .yesterdayCost {
                 font-size: 0.89rem;
                 font-weight: 500;

+ 2 - 2
vue.config.js

@@ -88,8 +88,8 @@ module.exports = {
         // target:'http://118.24.244.213:8804',
         // target: 'http://192.168.1.43:8080', // 子安
         // target: 'http://192.168.1.8:8806', // 学超
-      //  target:'http://139.186.165.84:8806', //测试
-        target:'http://apipre.tjyourong.com.cn', //预生产
+       target:'http://139.186.165.84:8806', //测试
+        // target:'http://apipre.tjyourong.com.cn', //预生产
 
         ws: false,