jiayufei пре 4 година
родитељ
комит
445cec3d24

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

@@ -864,7 +864,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"

+ 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'; // 学超

+ 175 - 135
src/views/modules/headline-view/headline-view.vue

@@ -12,29 +12,32 @@
                                 :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: 23px;">
+                                    
                                     <a-tooltip >
                                         <template slot="title">
-                                            <span>截止此时与上一阶段的花费同比</span>
+                                            <span>截止此时今日与昨日的花费同比</span>
                                         </template>
                                         <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">
+                                    <a-icon type="arrow-down" style="color: #f00"/>
+                                    {{ yearCostReportList.compare || 0 }}
+                                </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 +48,34 @@
                         >
                             <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 === '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 === '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"
@@ -118,17 +122,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>
@@ -153,7 +152,6 @@
                         :columns="planColumns"
                         :data-source="planData"
                         :pagination="false"
-                        @change="handlePlaneSort"
                     >
                     <span slot="optStatus" slot-scope="text, record">
                         <a-switch :checked="text === 'AD_STATUS_ENABLE'" @change="handleSwitchChang($event, record)"/>
@@ -203,7 +201,6 @@
                         :columns="materialColumns"
                         :data-source="materialData"
                         :pagination="false"
-                        @change="materialChange"
                     >
                         <span slot="posterUrl" slot-scope="text,record">
                             <div style="background:#e8e8e8;text-align:center;border-radius:3px">
@@ -212,15 +209,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 +230,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 +285,8 @@
             </div>
         </a-modal>
         <a-modal
-            title="修改调价"
             v-if="budgetVisible"
+            title="修改调价"
             :visible="budgetVisible"
             dialog-class="mode-modal-class"
             @ok="handleBudgetSure"
@@ -298,9 +301,7 @@
                     :wrapper-col="wrapperCol"
                 >
                     <a-form-model-item label="调价" prop="budget">
-                        <a-input-number
-                            v-model="budgetForm.budget"
-                        /> 元
+                        <a-input-number v-model="budgetForm.budget"/> 元
                     </a-form-model-item>
                 </a-form-model>
             </div>
@@ -366,7 +367,7 @@ export default {
                     key: 'activation',
                     today: 0,
                     yesterday: 0,
-                    type: 'int'
+                    type: 'string'
                 },
                 {
                     title: '转化率',
@@ -403,68 +404,77 @@ export default {
                     dataIndex: 'adName',
                     key: 'adName',
                     align: 'center',
-                    width: 120,
-                    ellipsis: true
+                    width: 120
                 },
                 {
                     title: '花费',
                     dataIndex: 'cost',
                     key: 'cost',
-                    align: 'center'
+                    align: 'center',
+                    sorter: (a, b) => a.cost - b.cost
                 },
                 {
                     title: '出价',
-                    dataIndex: 'bid',
-                    key: 'bid',
-                    align: 'center'
+                    dataIndex: 'cpaBid',
+                    key: 'cpaBid',
+                    align: 'center',
+                    sorter: (a, b) => a.cpaBid - b.cpaBid
                 },
                 {
                     title: '展示数',
                     dataIndex: 'showNum',
                     key: 'showNum',
-                    align: 'center'
+                    align: 'center',
+                    sorter: (a, b) => a.showNum - b.showNum
                 },
                 {
                     title: '平均千次展现费用',
                     dataIndex: 'averageShow',
                     key: 'averageShow',
-                    align: 'center'
+                    align: 'center',
+                    sorter: (a, b) => a.averageShow - b.averageShow
                 },
                 {
                     title: '点击数',
                     dataIndex: 'click',
                     key: 'click',
-                    align: 'center'
+                    align: 'center',
+                    sorter: (a, b) => a.click - b.click
                 },
                 {
                     title: '平均点击单价',
                     dataIndex: 'averageClick',
                     key: 'averageClick',
-                    align: 'center'
+                    align: 'center',
+                    sorter: (a, b) => a.averageClick - b.averageClick
                 },
                 {
                     title: '点击率',
                     dataIndex: 'clickRate',
                     key: 'clickRate',
-                    align: 'center'
+                    align: 'center',
+                    sorter: (a, b) => a.clickRate.split('%')[0] - b.clickRate.split('%')[0]
                 },
                 {
                     title: '转化数',
                     dataIndex: 'convertNum',
                     key: 'convertNum',
-                    align: 'center'
+                    align: 'center',
+                    sorter: (a, b) => a.convertNum - b.convertNum
                 },
                 {
                     title: '转化率',
                     dataIndex: 'converRate',
                     key: 'converRate',
-                    align: 'center'
+                    align: 'center',
+                    sorter: (a, b) => a.converRate.split('%')[0] - b.converRate.split('%')[0]
                 },
                 {
                     title: '转化成本',
                     dataIndex: 'conver',
                     key: 'conver',
-                    align: 'center'
+                    align: 'center',
+                    sorter: (a, b) => a.conver - b.conver
                 },
                 {
                     title: '环比',
@@ -511,49 +521,56 @@ export default {
                     title: '花费',
                     dataIndex: 'cost',
                     align: 'center',
-                    sorter: () => {}
+                    sorter: (a, b) => a.cost - b.cost
                 },
                 {
                     title: '展示数',
                     dataIndex: 'showMaterial',
                     key: 'showMaterial',
-                    align: 'center'
+                    align: 'center',
+                    sorter: (a, b) => a.showMaterial - b.showMaterial
                 },
                 {
                     title: '平均千次展现费用',
                     dataIndex: 'costPerThousandShow',
                     key: 'costPerThousandShow',
-                    align: 'center'
+                    align: 'center',
+                    sorter: (a, b) => a.costPerThousandShow - b.costPerThousandShow
                 },
                 {
                     title: '点击数',
                     dataIndex: 'click',
                     key: 'click',
-                    align: 'center'
+                    align: 'center',
+                    sorter: (a, b) => a.click - b.click
                 },
                 {
-                    title: '平均店家单价',
+                    title: '平均点击单价',
                     dataIndex: 'costPerClick',
                     key: 'costPerClick',
-                    align: 'center'
+                    align: 'center',
+                    sorter: (a, b) => a.costPerClick - b.costPerClick
                 },
                 {
                     title: '点击率',
                     dataIndex: 'clickRate',
                     key: 'clickRate',
-                    align: 'center'
+                    align: 'center',
+                    sorter: (a, b) => a.clickRate.split('%')[0] - b.clickRate.split('%')[0]
                 },
                 {
                     title: '转化数',
                     dataIndex: 'convertMaterial',
                     key: 'convertMaterial',
-                    align: 'center'
+                    align: 'center',
+                    sorter: (a, b) => a.convertMaterial - b.convertMaterial
                 },
                 {
                     title: '转化率',
                     dataIndex: 'convertRate',
                     key: 'convertRate',
-                    align: 'center'
+                    align: 'center',
+                    sorter: (a, b) => a.convertRate.split('%')[0] - b.convertRate.split('%')[0]
                 },
                 {
                     title: '转化成本',
@@ -572,8 +589,7 @@ export default {
                     dataIndex: 'materialUploadTime',
                     key: 'photoShow',
                     align: 'center',
-                    scopedSlots: {customRender: 'photoShow'},
-                    sorter: () => {}
+                    scopedSlots: {customRender: 'photoShow'}
                 }
             ],
             materialData: [],
@@ -589,7 +605,8 @@ export default {
             topCostList: {},
             yearCostReportList: {}, // 环比数据
             selectiveList: [],
-            currentUnit: {}
+            currentUnit: {},
+            packageName: ''
         };
     },
     mounted() {
@@ -599,10 +616,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 +651,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 +721,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 {
@@ -757,10 +790,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;
                 }
@@ -782,7 +812,11 @@ export default {
             };
             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 +854,7 @@ export default {
         // 修改定向的取消按钮
         handleTargethandleCancel() {
             this.adAudiencePackageId = '';
+            this.packageName = '';
             this.targetVisible = false;
         },
         handleAccounthandleOk() {
@@ -827,8 +862,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 +880,7 @@ export default {
         },
         // 计划点击分页操作
         handleOnShowSizeChange(current, pageSize) {
+            console.log(current, pageSize, 'current, pageSize');
             this.planPagin = {
                 page: current,
                 size: pageSize
@@ -868,12 +904,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 +932,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 +973,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) {
@@ -971,14 +1005,24 @@ export default {
                     trigger: 'axis',
                     formatter: params => {
                         let isType = '';
+                        let showBai = '';
                         this.throwColumns.forEach(item => {
+                            console.log(item, 'item--item');
                             if (item.dataIndex === this.isActive) {
                                 isType = item.title;
                             }
+                            if (item.type === 'int') {
+                                showBai = '%';
+                            }
+                            else {
+                                showBai = '';
+                            }
                         });
+                        console.log(showBai, 'showBai');
                         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 +1083,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 +1110,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 +1202,12 @@ export default {
                                 fontFamily: 'PingFangSC'
                             }
                         },
-                        data: [{
-                            name: '花费占比',
-                            value: dataArr
-                        }],
+                        data: [
+                            {
+                                name: '',
+                                value: dataArr
+                            }
+                        ],
                         pointer: {
                             show: true,
                             length: '75%',
@@ -1226,44 +1291,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;
@@ -1401,14 +1434,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 +1472,13 @@ export default {
         }
         .accountBodyLeftCostRight {
             width: 45%;
+            margin-left: 15px;
+            position: relative;
+            .cost-radio-tool {
+                position: absolute;
+                bottom: 34px;
+                left: 28%;
+            }
         }
         .accountBodyLeftOther {
             width: 60%;