Pārlūkot izejas kodu

文案库 页面 修改

jiayufei 4 gadi atpakaļ
vecāks
revīzija
4bc2f81537

+ 2 - 1
src/views/modules/copy-library/account-config-server.js

@@ -5,5 +5,6 @@
 
 
 // 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://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://139.186.165.84:8080'; // 测试
+export const urlAcount = 'http://192.168.1.8:8080'; // 学超

+ 12 - 1
src/views/modules/copy-library/copy-library.less

@@ -6,6 +6,9 @@
     .control-con-header {
     .control-con-header {
         margin-bottom: 20px;
         margin-bottom: 20px;
         position: relative;
         position: relative;
+        .common-input-long {
+            width: 320px;
+        }
         .acount-search-class {
         .acount-search-class {
             width: 450px;
             width: 450px;
         }
         }
@@ -57,8 +60,16 @@
                 width: 100%;
                 width: 100%;
             }
             }
             .mater-list-name {
             .mater-list-name {
+                display: flex;
                 height: 30px;
                 height: 30px;
                 margin: 0;
                 margin: 0;
+                .mater-list-show {
+                    display: inline-block;
+                    width: 400px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
                 .mater-list-icon {
                 .mater-list-icon {
                     margin-left: 10px;
                     margin-left: 10px;
                     color: #1890ff;
                     color: #1890ff;
@@ -121,7 +132,7 @@
             .content-modal-li {
             .content-modal-li {
                 border: 1px solid #e4e4e4;
                 border: 1px solid #e4e4e4;
                 width: 180px;
                 width: 180px;
-                height: 400px;
+                height: 360px;
                 text-align: center;
                 text-align: center;
                 position: relative;
                 position: relative;
                 margin: 0 10px 10px 0;
                 margin: 0 10px 10px 0;

+ 266 - 64
src/views/modules/copy-library/copy-library.vue

@@ -9,12 +9,28 @@
             >
             >
                 <a-row class="grid-form-options">
                 <a-row class="grid-form-options">
                     <a-form-item
                     <a-form-item
+                        v-if="controlTypeModel === '1'"
                         class="grid-form-item"
                         class="grid-form-item"
                         label="账户:"
                         label="账户:"
                         :colon="false"
                         :colon="false"
                     >
                     >
                         <acount-search class="acount-search-class" :appId.sync="configForm.acountId" :multiple="false" request="1,3"></acount-search>
                         <acount-search class="acount-search-class" :appId.sync="configForm.acountId" :multiple="false" request="1,3"></acount-search>
                     </a-form-item>
                     </a-form-item>
+                    <a-form-model-item v-if="controlTypeModel === '2'" label="项目:">
+                        <a-select
+                            class="common-input-long"
+                            v-model="configForm.adConvertId"
+                            placeholder="请选择"
+                        >
+                            <a-select-option
+                                v-for="(item, index) in optimizationOption"
+                                :key="index"
+                                :value="item.convert_id"
+                            >
+                                {{ item.external_name }}
+                            </a-select-option>
+                        </a-select>
+                    </a-form-model-item>
                     <a-form-item
                     <a-form-item
                         class="grid-form-item"
                         class="grid-form-item"
                         label="关键词:"
                         label="关键词:"
@@ -42,25 +58,54 @@
             <a-button type="primary" class="upload-person" @click="handleAddAccountConfig">新增文案</a-button>
             <a-button type="primary" class="upload-person" @click="handleAddAccountConfig">新增文案</a-button>
         </div>
         </div>
         <div class="control-con-table">
         <div class="control-con-table">
-            <a-table
-                ref="table"
-                size="middle"
-                bordered
-                :columns="columns"
-                :dataSource="dataSource"
-                :pagination="false"
-            >
-            </a-table>
-            <a-pagination
-                class="pagin-table-class"
-                :total="totalAll"
-                :show-total="total => `共 ${totalAll} 条`"
-                size="small"
-                show-size-changer
-                show-quick-jumper
-                @change="onShowSizeChange"
-                @showSizeChange="onShowSizeChange"
-            />
+            <a-tabs v-model="controlTypeModel" @change="handleTabsChange">
+                <a-tab-pane key="1" tab="通用">
+                    <a-table
+                        ref="table"
+                        size="middle"
+                        bordered
+                        :columns="currencyColumns"
+                        :dataSource="currencyData"
+                        :pagination="false"
+                    >
+                    </a-table>
+                    <a-pagination
+                        class="pagin-table-class"
+                        v-model="currencyPag.page"
+                        :page-size="currencyPag.size"
+                        :total="currencyTotalAll"
+                        :show-total="total => `共 ${currencyTotalAll} 条`"
+                        size="small"
+                        show-size-changer
+                        show-quick-jumper
+                        @change="handleCurrentPage"
+                        @showSizeChange="handleCurrentPage"
+                    />
+                </a-tab-pane>
+                <a-tab-pane key="2" tab="指定">
+                    <a-table
+                        ref="table"
+                        size="middle"
+                        bordered
+                        :columns="appointColumns"
+                        :dataSource="appointData"
+                        :pagination="false"
+                    >
+                    </a-table>
+                    <a-pagination
+                        class="pagin-table-class"
+                        v-model="appointPag.page"
+                        :page-size="appointPag.size"
+                        :total="appointTotalAll"
+                        :show-total="total => `共 ${appointTotalAll} 条`"
+                        size="small"
+                        show-size-changer
+                        show-quick-jumper
+                        @change="handleAppointPage"
+                        @showSizeChange="handleAppointPage"
+                    />
+                </a-tab-pane>
+            </a-tabs>
         </div>
         </div>
         <a-modal
         <a-modal
             v-if="causeVisible"
             v-if="causeVisible"
@@ -120,21 +165,21 @@
                                     v-for="item in modalSelectMaterial"
                                     v-for="item in modalSelectMaterial"
                                     :key="item.id"
                                     :key="item.id"
                                 >
                                 >
-                                    {{ item.name }}
+                                    <span class="mater-list-show">{{ item.materialName }}</span>
                                     <span class="mater-list-icon" @click="handleDelAlone(item)"><a-icon type="close"/></span>
                                     <span class="mater-list-icon" @click="handleDelAlone(item)"><a-icon type="close"/></span>
                                 </p>
                                 </p>
                             </div>
                             </div>
                         </div>
                         </div>
                     </div>
                     </div>
                 </div>
                 </div>
-                <div class="acount-title push-plate">
+                <div v-if="copywrittypeName === 'vertical'" class="acount-title push-plate">
                     <div class="acount-title-left">创意标题</div>
                     <div class="acount-title-left">创意标题</div>
                     <div class="acount-title-right">
                     <div class="acount-title-right">
                         <a-button type="primary" @click="handleAddOrigin"><a-icon type="plus" />创意标题</a-button>
                         <a-button type="primary" @click="handleAddOrigin"><a-icon type="plus" />创意标题</a-button>
                         <span style="margin-left: 20px;">已填:{{ titleFiledResult.length || 0 }}</span>
                         <span style="margin-left: 20px;">已填:{{ titleFiledResult.length || 0 }}</span>
                     </div>
                     </div>
                 </div>
                 </div>
-                <div class="acount-title">
+                <div v-if="copywrittypeName === 'vertical'" class="acount-title">
                     <div class="acount-title-left"></div>
                     <div class="acount-title-left"></div>
                     <div class="acount-title-right">
                     <div class="acount-title-right">
                         <a-form :form="examinForm">
                         <a-form :form="examinForm">
@@ -216,11 +261,11 @@
                             />
                             />
                         </a-form-item>
                         </a-form-item>
                     </a-col>
                     </a-col>
-                    <a-col :span="9">
+                    <!-- <a-col :span="9">
                         <a-form-item label="唯一标识" :labelCol="modalCol" :wrapperCol="modalWrapper">
                         <a-form-item label="唯一标识" :labelCol="modalCol" :wrapperCol="modalWrapper">
                             <a-input v-model="onlyIdentification" placeholder="请输入唯一标识,多个以,隔开"/>
                             <a-input v-model="onlyIdentification" placeholder="请输入唯一标识,多个以,隔开"/>
                         </a-form-item>
                         </a-form-item>
-                    </a-col>
+                    </a-col> -->
                     <a-col :span="4">
                     <a-col :span="4">
                         <a-button style="position: relative;top: 4px;">全选</a-button>
                         <a-button style="position: relative;top: 4px;">全选</a-button>
                         <a-button type="primary" style="position: relative;top: 4px;margin-left:5px" @click="handleSearchMaster">搜索</a-button>
                         <a-button type="primary" style="position: relative;top: 4px;margin-left:5px" @click="handleSearchMaster">搜索</a-button>
@@ -234,13 +279,15 @@
                                 :value="item.id"
                                 :value="item.id"
                             >
                             >
                             </a-checkbox>
                             </a-checkbox>
-                            <img src="@/assets/img/spLbLAbh.jpg"/>
-                            <div class="checkbox-select-time">时间:{{ item.statDate }}</div>
-                            <div class="checkbox-select-show"><a>查看视频</a></div>
+                            <img :src="item.coverUrl"/>
+                            <div class="checkbox-select-time">时间:{{ item.createTime }}</div>
+                            <!-- <div class="checkbox-select-show"><a>查看视频</a></div> -->
                         </li>
                         </li>
                     </a-checkbox-group>
                     </a-checkbox-group>
                     <a-pagination
                     <a-pagination
                         class="pagin-table-class"
                         class="pagin-table-class"
+                        v-model="masterPag.page"
+                        :page-size="masterPag.size"
                         :total="materTotalAll"
                         :total="materTotalAll"
                         :show-total="total => `共 ${materTotalAll} 条`"
                         :show-total="total => `共 ${materTotalAll} 条`"
                         size="small"
                         size="small"
@@ -260,7 +307,7 @@ import AcountSearch from '@/views/modules/Statistics/components/Treeselect.vue';
 import {getAction, putAction, deleteAction} from '@/api/manage';
 import {getAction, putAction, deleteAction} from '@/api/manage';
 import {fileCheck, fileEdit, fileEditAll, fileInsertV2, fileEditUpdate, fileEditUpdateBatch} from '@/api/actor';
 import {fileCheck, fileEdit, fileEditAll, fileInsertV2, fileEditUpdate, fileEditUpdateBatch} from '@/api/actor';
 import {mapGetters} from 'vuex';
 import {mapGetters} from 'vuex';
-import {urlAcount} from './account-config-server.js';
+import {urlAcount} from './copy-library-server.js';
 
 
 let COS = require('cos-js-sdk-v5');
 let COS = require('cos-js-sdk-v5');
 let cos = new COS({
 let cos = new COS({
@@ -275,6 +322,8 @@ export default {
     },
     },
     data() {
     data() {
         return {
         return {
+            optimizationOption: [], // 账户option
+            controlTypeModel: '1',
             fileList: [],
             fileList: [],
             modalSelectMaterial: [],
             modalSelectMaterial: [],
             materTotalAll: 0,
             materTotalAll: 0,
@@ -335,19 +384,90 @@ export default {
                 xs: {span: 14},
                 xs: {span: 14},
                 md: {span: 14}
                 md: {span: 14}
             },
             },
-            acountId: undefined, // 搜索的账户ID
-            totalAll: 0,
             configForm: {
             configForm: {
                 acountId: '',
                 acountId: '',
                 num: '',
                 num: '',
+                adConvertId: '',
                 launchDateRange: []
                 launchDateRange: []
             },
             },
-            tablePag: {
+            currencyPag: {
                 page: 1,
                 page: 1,
                 size: 10
                 size: 10
             },
             },
-            dataSource: [],
-            columns: [
+            currencyData: [],
+            currencyTotalAll: 0,
+            currencyColumns: [
+                {
+                    title: '文案',
+                    align: 'center',
+                    dataIndex: 'textCopywriter'
+                },
+                {
+                    title: '相关创意',
+                    align: 'center',
+                    dataIndex: 'creativeCount'
+                },
+                {
+                    title: '花费(元)',
+                    align: 'center',
+                    dataIndex: 'sumCost',
+                    sorter: () => {}
+                },
+                {
+                    title: '展示数',
+                    dataIndex: 'sumShowMaterial',
+                    align: 'center',
+                    sorter: () => {}
+                },
+                {
+                    title: '平均千次展现费用',
+                    dataIndex: 'costPerThousandShow',
+                    align: 'center',
+                    sorter: () => {}
+                },
+                {
+                    title: '点击数',
+                    dataIndex: 'sumClick',
+                    width: 180,
+                    align: 'center',
+                    sorter: () => {}
+                },
+                {
+                    title: '平均点击单价',
+                    dataIndex: 'costPerClick',
+                    align: 'center',
+                    sorter: () => {}
+                },
+                {
+                    title: '点击率',
+                    dataIndex: 'clickRate',
+                    align: 'center',
+                    width: 150,
+                    sorter: () => {}
+                },
+                {
+                    title: '转化数',
+                    dataIndex: 'sumConvertMaterial',
+                    align: 'center',
+                    width: 150,
+                    sorter: () => {}
+                },
+                {
+                    title: '转化率',
+                    dataIndex: 'convertRate',
+                    align: 'center',
+                    width: 150,
+                    sorter: () => {}
+                },
+                {
+                    title: '转化成本',
+                    dataIndex: 'costConvert',
+                    align: 'center',
+                    width: 150,
+                    sorter: () => {}
+                }
+            ],
+            appointColumns: [
                 {
                 {
                     title: '文案',
                     title: '文案',
                     align: 'center',
                     align: 'center',
@@ -418,6 +538,12 @@ export default {
                     sorter: () => {}
                     sorter: () => {}
                 }
                 }
             ],
             ],
+            appointData: [],
+            appointTotalAll: 0,
+            appointPag: {
+                page: 1,
+                size: 10
+            },
             masterPag: {
             masterPag: {
                 page: 1,
                 page: 1,
                 size: 10
                 size: 10
@@ -451,10 +577,87 @@ export default {
         this.form = this.$form.createForm(this);
         this.form = this.$form.createForm(this);
     },
     },
     mounted() {
     mounted() {
-        this.handleInitTable();
+        this.handleGetCurrencyList();
+        this.hendleMaterialInfo();
     },
     },
     methods: {
     methods: {
         ...mapGetters(['nickname', 'avatar', 'userInfo']),
         ...mapGetters(['nickname', 'avatar', 'userInfo']),
+        hendleMaterialInfo() {
+            const paramsData = {
+                startDate: this.masterTimes[0],
+                endDate: this.masterTimes[1],
+                pageNo: this.masterPag.page,
+                pageSize: this.masterPag.size
+            };
+            getAction('/ctop/materialInfo/listV2', paramsData).then(result => {
+                if (result.code === 0) {
+                    console.log(result.data.list, '-----result-----');
+                    this.viedoDefaultList = result.data.list;
+                    this.materTotalAll = result.data.total;
+                }
+                else {
+                    this.$message.error(result.message);
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
+        },
+        handleTabsChange(e) {
+            const page = {
+                page: 1,
+                size: 10
+            };
+            this.currencyPag = page;
+            this.appointPag = page;
+            if (e === '1') {
+                this.handleGetCurrencyList();
+            }
+            else if (e === '2') {
+                this.handleGetAppointList();
+            }
+        },
+        handleGetCurrencyList() {
+            let paramsData = {
+                accountId: this.configForm.acountId,
+                keyWord: this.configForm.num,
+                startTime: this.configForm.launchDateRange[0],
+                endTime: this.configForm.launchDateRange[0],
+                pageNo: this.currencyPag.page,
+                pageSize: this.currencyPag.size
+            };
+            getAction(urlAcount + '/bytedance-api/advertiser/bytedanceGeneralCopywriter/queryPageListByText', paramsData).then(result => {
+                if (result.code === 0) {
+                    this.currencyData = result.result.list;
+                    this.currencyTotalAll = result.result.total;
+                }
+                else {
+                    this.$message.error(result.message);
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
+        },
+        handleGetAppointList() {
+            let paramsData = {
+                prodId: this.configForm.adConvertId,
+                keyWord: this.configForm.num,
+                startTime: this.configForm.launchDateRange[0],
+                endTime: this.configForm.launchDateRange[0],
+                pageNo: this.appointPag.page,
+                pageSize: this.appointPag.size
+            };
+            getAction(urlAcount + '/bytedance-api/ctop/bytedanceVideoSlogenInfo/queryPageListByText', paramsData).then(result => {
+                if (result.code === 0) {
+                    this.appointData = result.result.list;
+                    this.appointTotalAll = result.result.total;
+                }
+                else {
+                    this.$message.error(result.message);
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
+        },
         handleChange(info) {
         handleChange(info) {
             console.log(info, 'info---info');
             console.log(info, 'info---info');
             this.fileList = info.fileList;
             this.fileList = info.fileList;
@@ -551,9 +754,10 @@ export default {
         },
         },
         handleMasterPageChange(current, pageSize) {
         handleMasterPageChange(current, pageSize) {
             this.masterPag = {
             this.masterPag = {
-                page: current,
+                page: current = pageSize !== this.masterPag.size ? 1 : current,
                 size: pageSize
                 size: pageSize
             };
             };
+            this.hendleMaterialInfo();
         },
         },
         handleSelectMaterial() {
         handleSelectMaterial() {
             this.visibleMatemal = true;
             this.visibleMatemal = true;
@@ -804,43 +1008,41 @@ export default {
             this.configForm.launchDateRange = dateString;
             this.configForm.launchDateRange = dateString;
         },
         },
         handleQueryList() {
         handleQueryList() {
-            console.log(this.configForm, '---000--00');
+            const page = {
+                page: 1,
+                size: 10
+            };
+            this.currencyPag = page;
+            this.appointPag = page;
+            if (this.controlTypeModel === '1') {
+                this.handleGetCurrencyList();
+            }
+            else if (this.controlTypeModel === '2') {
+                this.handleGetAppointList();
+            }
         },
         },
         handleResetList() {
         handleResetList() {
             console.log(this.configForm, '重置操作');
             console.log(this.configForm, '重置操作');
+            this.configForm = {
+                acountId: '',
+                num : '',
+                launchDateRange: []
+            };
+            this.handleInitTable();
         },
         },
-        handleInitTable() {
-            const paramsData = {
-                accountId: this.acountId,
-                loginUserId: this.userInfo().id,
-                pageNo: this.tablePag.page,
-                pageSize: this.tablePag.size
+        handleCurrentPage(current, pageSize) {
+            this.currencyPag = {
+                page: current = pageSize !== this.currencyPag.size ? 1 : current,
+                size: pageSize
             };
             };
-            // getAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/list', paramsData).then(result => {
-            //     if (result.code === 0) {
-            //         result.result.records.forEach(item => {
-            //             item.show = false;
-            //             item.visible = false;
-            //             if (item.accountBudgetMode === '1') {
-            //                 item.accountBudget = '不限';
-            //             }
-            //         });
-            //         this.dataSource = result.result.records;
-            //         this.totalAll = result.result.total;
-            //     }
-            //     else {
-            //         this.$message.error(result.message);
-            //     }
-            // }).catch(error => {
-            //     console.log(error, 'eeee');
-            // });
+            this.handleGetCurrencyList();
         },
         },
-        onShowSizeChange(current, pageSize) {
-            this.tablePag = {
-                page: current,
+        handleAppointPage(current, pageSize) {
+            this.appointPag = {
+                page: current = pageSize !== this.appointPag.size ? 1 : current,
                 size: pageSize
                 size: pageSize
             };
             };
-            this.handleInitTable();
+            this.handleGetAppointList();
         }
         }
     }
     }
 };
 };

+ 2 - 2
vue.config.js

@@ -87,8 +87,8 @@ module.exports = {
         // target: 'http://192.168.1.251/', //请求本地 需要jeecg-boot后台项目 
         // target: 'http://192.168.1.251/', //请求本地 需要jeecg-boot后台项目 
         // target:'http://118.24.244.213:8804',
         // target:'http://118.24.244.213:8804',
         // target: 'http://192.168.1.43:8080', // 子安
         // target: 'http://192.168.1.43:8080', // 子安
-        target: 'http://192.168.1.8:8806', // 学超
-      //  target:'http://139.186.165.84:8806', //测试
+        // target: 'http://192.168.1.8:8806', // 学超
+       target:'http://139.186.165.84:8806', //测试
         // target:'http://apipre.tjyourong.com.cn', //预生产
         // target:'http://apipre.tjyourong.com.cn', //预生产
 
 
         ws: false,
         ws: false,