Explorar el Código

Merge branch 'feature/work-jyf' into V1.1.7

jiayufei hace 4 años
padre
commit
899b9abe70

La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 19777 - 0
package-lock.json


+ 1 - 0
src/views/modules/Statistics/materialReport/marterialDetail.vue

@@ -209,6 +209,7 @@
               color: rgba(0, 0, 0, 0.85);
               font-weight: bold;
               font-size: 16px;
+               
               line-height: 1.5;
             "
           >

+ 50 - 0
src/views/modules/crowd-control/components/tree-select/tree-select.less

@@ -0,0 +1,50 @@
+.tree-select-class {
+    display: flex;
+    justify-content: space-between;
+    .class-left-header {
+        height: 50px;
+        line-height: 50px;
+        background-color: #ccc;
+        text-indent: 10px;
+    }
+    .input-search {
+        width: 200px;
+        margin: 10px;
+    }
+    .select-class-left {
+        width: 60%;
+        height: 400px;
+        border: 1px solid #ccc;
+        .class-left-content {
+            overflow-y: auto;
+            height: 340px;
+        }
+        .example {
+            text-align: center;
+            line-height: 200px;
+        }
+    }
+    .select-class-right {
+        width: 35%;
+        height: 400px;
+        border: 1px solid #ccc;
+        .class-left-content {
+            padding: 0 10px;
+            height: 348px;
+            overflow-y: auto;
+            .left-content-p {
+                height: 25px;
+                line-height: 25px;
+                margin: 0;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+        .no-data-class {
+            height: 340px;
+            line-height: 340px;
+            text-align: center;
+        }
+    }
+}

+ 191 - 0
src/views/modules/crowd-control/components/tree-select/tree-select.vue

@@ -0,0 +1,191 @@
+<template>
+    <div class="tree-select-class">
+        <div class="select-class-left">
+            <div class="class-left-header">
+                选择分享的账户名称
+            </div>
+            <div class="class-left-content">
+                <a-input-search class="input-search" placeholder="Search" @change="onChange" />
+                <template>
+                    <a-tree
+                        v-model="checkedKeys"
+                        checkable
+                        :expanded-keys="expandedKeys"
+                        :auto-expand-parent="autoExpandParent"
+                        :selected-keys="selectedKeys"
+                        :tree-data="treeData"
+                        @check="onCheck"
+                        @expand="onExpand"
+                    />
+                </template>
+                <div class="example">
+                    <a-spin :spinning="spinning"/>
+                    <span v-if="leftTreeNoData">暂无数据</span>
+                </div>
+            </div>
+        </div>
+        <div class="select-class-right">
+            <div class="class-left-header">
+                已选 ({{ applyTypeOption.length ? applyTypeOption.length : 0}}/100)
+                <a-popover placement="topRight">
+                    <template slot="content">
+                        <p>1、输入账户超出推送范围,请检查是否同主体账户</p>
+                        <p>2、有效账户将不会重复推送,请登录该账户查看使用</p>
+                    </template>
+                    <span><a-icon type="question-circle" /></span>
+                </a-popover>
+            </div>
+            <div v-if="applyTypeOption.length" class="class-left-content">
+                <p v-for="item in applyTypeOption" class="left-content-p" :key="item.key">
+                    <a-tooltip placement="top">
+                        <template slot="title">
+                            <span>{{ item.title }}</span>
+                        </template>
+                        {{ item.title }}
+                    </a-tooltip>
+                </p>
+            </div>
+            <div v-else class="no-data-class">暂无数据</div>
+        </div>
+    </div>
+</template>
+<script>
+import {mapGetters} from 'vuex';
+import {postAction} from '@/api/manage';
+
+export default {
+    name: 'tree-select',
+    data() {
+        return {
+            expandedKeys: [],
+            autoExpandParent: true,
+            checkedKeys: [],
+            selectedKeys: [],
+            treeData: [],
+            updateTreeData: [],
+            applyTypeOption: [],
+            selectRightData: new Set(),
+            spinning: true,
+            leftTreeNoData: false
+        };
+    },
+    mounted() {
+        this.getAccountId();
+    },
+    methods: {
+        ...mapGetters(['userInfo']),
+        getAccountId() {
+            postAction('/ctop/projectMember/participateListByMediaId', {
+                userId: this.userInfo().id,
+                type: 'kuaishou',
+            }).then(result => {
+                if (result.result.length) {
+                    this.spinning = false;
+                    this.treeData = result.result.map(item => {
+                        return {
+                            key: item.projectId + 'projectId',
+                            title: item.projectName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + item.advertiserName,
+                            children: item.accountList
+                            ? item.accountList.map(i => {
+                                return {
+                                    key: i.accountId,
+                                    title:
+                                    (i.userName.length == 2
+                                        ? i.userName + '\xa0\xa0\xa0\xa0\xa0'
+                                        : i.userName.length == 3
+                                        ? i.userName + '\xa0\xa0\xa0\xa0'
+                                        : i.userName) +
+                                    '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
+                                    i.accountId +
+                                    '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +
+                                    i.authName,
+                                }
+                            }) : []
+                        };
+                    });
+                    this.updateTreeData = [...this.treeData];
+                }
+                else {
+                    this.spinning = false;
+                    this.leftTreeNoData = true;
+                }
+            });
+        },
+        onChange(e) {
+            const value = e.target.value;
+            this.treeData = value !== '' ? this.getNewTreeData(this.updateTreeData, value) : [...this.updateTreeData];
+            if (!this.treeData.length) {
+                this.spinning = false;
+                this.leftTreeNoData = true;
+            }
+            else {
+                this.leftTreeNoData = false;
+            }
+        },
+        getNewTreeData(treeData, value) {
+            if (!treeData) {
+                return null;
+            }
+            let newTreeData = new Array();
+            let node = null;
+            let children = null;
+            let text = '';
+            for (let i = 0; i < treeData.length; i++) { // 多个根节点开始遍历
+                node = treeData[i];
+                if (node.children) {
+                    children = node.children;
+                }
+                text = node.title;
+                if (text.indexOf(value) > -1) {
+                    newTreeData.push(node);
+                    continue;
+                } else {
+                    if (children) {
+                        let newNodes = this.getNewTreeData(node.children, value);
+                        if (newNodes.length > 0) {
+                            node.children = newNodes;
+                            newTreeData.push(node);
+                        }
+                    }
+                }
+
+            }
+            return newTreeData;
+        },
+        onExpand(expandedKeys) {
+            this.expandedKeys = expandedKeys;
+            this.autoExpandParent = false;
+        },
+        onCheck(checkedKeys) {
+            this.nodes(this.treeData, checkedKeys);
+            this.applyTypeOption = [...this.selectRightData];
+            const changeSelectData = [...this.selectRightData].map(item => item.key);
+            if (this.applyTypeOption.length > 100) {
+                const lastOptionKey = this.applyTypeOption[99].key;
+                const lastIndex = changeSelectData.findIndex(item => item === lastOptionKey);
+                this.checkedKeys = changeSelectData.slice(0, lastIndex + 1);
+                this.applyTypeOption = [...this.selectRightData].slice(0, 100);
+            }
+            this.$emit('applyType', this.applyTypeOption);
+        },
+        nodes(data, checkedKeys) {
+            data.forEach(item => {
+                if (item.children) {
+                    this.nodes(item.children, checkedKeys);
+                }
+                else { 
+                    if (checkedKeys.indexOf(item.key) !== -1) {
+                        this.selectRightData.add(item);
+                    }
+                    else {
+                        this.selectRightData.delete(item);
+                    }
+                }
+            })
+        }
+    },
+};
+</script>
+<style lang="less" scoped>
+    @import 'tree-select';
+</style>

+ 220 - 0
src/views/modules/crowd-control/crowd-control-service.js

@@ -0,0 +1,220 @@
+/**
+ * @file 人群包管理基础服务
+ * @author jiayufei(jiayufei@c-top.com.cn)
+ */
+
+class AppMarketService {
+    constructor() {}
+
+    // 相关账户的table列表
+    setAcountColumns() {
+        return [
+            {
+                title: '项目名称',
+                dataIndex: 'accountName',
+                width: '25%'
+            },
+            {
+                title: '所属项目',
+                dataIndex: 'projectName',
+                width: '15%'
+            },
+            {
+                title: '人群包数量',
+                dataIndex: 'count',
+                width: '40%'
+            }
+        ]
+    }
+
+    // 原因的table列表
+    setCauseColumns() {
+        return [
+            {
+                title: '项目名称',
+                dataIndex: 'projectName',
+                width: '30%'
+            },
+            {
+                title: '账户名称',
+                dataIndex: 'accountName',
+                width: '30%'
+            },
+            {
+                title: '原因',
+                dataIndex: 'message',
+                width: '40%'
+            }
+        ]
+    }
+
+    // 相关项目的table列表
+    setDepColumns() {
+        return [
+            {
+                title: '项目名称',
+                dataIndex: 'projectName',
+                width: '30%'
+            },
+            {
+                title: '账户数量',
+                dataIndex: 'accountCount',
+                width: '15%'
+            },
+            {
+                title: '人群包数量',
+                dataIndex: 'count',
+                width: '40%'
+            }
+        ]
+    }
+
+    // 状态枚举
+    setStatusTasks() {
+        return [
+            {
+                label: 0,
+                value: '计算中'
+            },
+            {
+                label: 1,
+                value: '已生效'
+            },
+            {
+                label: 2,
+                value: '已删除'
+            },
+            {
+                label: 3,
+                value: '推送中'
+            },
+            {
+                label: 4,
+                value: '已推送'
+            },
+            {
+                label: 5,
+                value: '计算失败'
+            },
+            {
+                label: 6,
+                value: '推送失败'
+            },
+            {
+                label: 7,
+                value: '已失效'
+            }
+        ]
+    }
+
+    // 上传人去报的校验规则
+    setPersonRules() {
+        return {
+            name: [
+                {required: true, message: '人群包名称不能为空', trigger: 'blur'},
+                {min: 1, max: 20, message: '人群包名称不能超过20个字符', trigger: 'blur'}
+            ],
+            resource: [
+                {required: true, message: '请选择匹配类型', trigger: 'change'}
+            ]
+        }
+    }
+
+    // 人群包类型枚举值
+    setPopulationTypeTasks() {
+        return [
+            {
+                label: 1,
+                value: '上传人群'
+            }, {
+                label: 2,
+                value: '广告人群'
+            }, {
+                label: 3,
+                value: '主题专区'
+            }, {
+                label: 4,
+                value: '逻辑规则'
+            }, {
+                label: 5,
+                value: '人群扩展'
+            }, {
+                label: 6,
+                value: '平台制定'
+            }, {
+                label: 7,
+                value: '定制付费'
+            }, {
+                label: 8,
+                value: '网红粉丝类别'
+            }, {
+                label: 9,
+                value: '内容付费行为'
+            }, {
+                label: 10,
+                value: '移动应用安装'
+            }, {
+                label: 11,
+                value: '快手使用活跃度'
+            }, {
+                label: 12,
+                value: '行业分类'
+            }, {
+                label: 13,
+                value: '商业兴趣'
+            }, {
+                label: 14,
+                value: '固话标签'
+            }, {
+                label: 15,
+                value: '行业偏好'
+            }, {
+                label: 16,
+                value: '第三方标签'
+            }, {
+                label: 17,
+                value: '产品关键词'
+            }, {
+                label: 19,
+                value: '应用渗透率'
+            }, {
+                label: 22,
+                value: '指定网红'
+            }, {
+                label: 23,
+                value: '行业分类'
+            }
+        ]
+    }
+
+    // 匹配类型枚举值
+    setMateTypeTasks() {
+        return [
+            {
+                label: 1,
+                value: 'IMEI'
+            }, {
+                label: 2,
+                value: 'IDFA'
+            }, {
+                label: 3,
+                value: 'IMEI_MD5'
+            }, {
+                label: 4,
+                value: 'IDFA_MD5'
+            }, {
+                label: 5,
+                value: '手机号-MD5'
+            }, {
+                label: 7,
+                value: 'OAID'
+            }, {
+                label: 8,
+                value: 'OAID_MD5'
+            }
+        ]
+    }
+
+}
+
+export default new AppMarketService();

+ 94 - 0
src/views/modules/crowd-control/crowd-control.less

@@ -0,0 +1,94 @@
+.crowd-control-content {
+    background: #fff;
+    height: calc(100vh - 137px);
+    padding: 20px;
+    overflow-y: auto;
+    .control-con-header {
+        margin-bottom: 20px;
+        position: relative;
+        /deep/ .ant-form-inline .ant-form-item > .ant-form-item-control-wrapper, .ant-form-inline .ant-form-item > .ant-form-item-label {
+            width: 200px !important;
+        }
+        .reset-class {
+            margin-right: 10px !important;
+        }
+        .upload-person {
+            position: absolute;
+            right: 10px;
+            top: 0;
+        }
+    }
+    .cause-text-class {
+        cursor: pointer;
+    }
+    .pagin-table-class {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 20px;
+    }
+    .acount-search-class {
+        width: 200% !important;
+    }
+    .grid-form-type {
+        margin-left: 210px;
+    }
+}
+/deep/ .push-modal {
+    width: 600px !important;
+    .acount-title {
+        display: flex;
+        font-size: 14px;
+        height: 40px;
+        line-height: 40px;
+        .acount-title-left {
+            margin-right: 20px;
+            width: 100px;
+        }
+    }
+    .push-plate {
+        margin-bottom: 20px;
+    }
+}
+.person-modal {
+    width: 500px;
+    /deep/ .ant-form-item {
+        display: flex;
+    }
+    /deep/ .ant-form-item-label {
+        width: 20%;
+    }
+    /deep/ .ant-form-item-control-wrapper {
+        width: 80%;
+    }
+    .acount-search-class {
+        width: 100% !important;
+    }
+}
+/deep/ .cause-modal {
+    width: 600px !important;
+    .cause-modal-table-class {
+        height: 500px;
+        overflow-y: auto;
+    }
+    .pagin-table-class {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 20px;
+    }
+}
+/deep/ .relax-modal {
+    width: 600px !important;
+    .acount-title {
+        display: flex;
+        font-size: 14px;
+        height: 40px;
+        line-height: 40px;
+        .acount-title-left {
+            margin-right: 20px;
+            width: 100px;
+        }
+    }
+    .push-plate {
+        margin-bottom: 20px;
+    }
+}

+ 599 - 0
src/views/modules/crowd-control/crowd-control.vue

@@ -0,0 +1,599 @@
+<template>
+    <div class="crowd-control-content">
+        <div class="control-con-header">
+            <a-form
+                class="grid-form" layout="inline"
+                :form="form"
+                hide-required-mark
+                @submit="handleQueryList"
+            >
+                <a-row class="grid-form-options">
+                    <a-form-item
+                        class="grid-form-item"
+                        label="名称"
+                        :colon="false"
+                    >
+                        <a-input
+                            v-decorator="['name']" type="text"
+                            placeholder="请输入"
+                        />
+                    </a-form-item>
+                    <a-form-item
+                        class="grid-form-item" label="账户"
+                        :colon="false"
+                    >
+                        <acount-search class="acount-search-class" :appId.sync="acountId" :multiple="false"></acount-search>
+                    </a-form-item>
+                    <a-form-item
+                        class="grid-form-item grid-form-type" label="状态"
+                        :colon="false"
+                    >
+                        <a-select
+                            v-decorator="['status']"
+                            placeholder="请选择"
+                            allow-clear
+                        >
+                            <a-select-option v-for="item in statusTasks" :key="item.label">
+                                {{ item.value }}
+                            </a-select-option>
+                        </a-select>
+                    </a-form-item>
+                    <a-form-item class="form-handle-btn">
+                        <a-button type="default" class="reset-class" @click="handleResetForm">重置</a-button>
+                        <a-button type="primary" html-type="submit">查询</a-button>
+                    </a-form-item>
+                </a-row>
+            </a-form>
+            <a-button type="primary" class="upload-person" @click="handleUploadPerson">
+                上传人群包
+            </a-button>
+        </div>
+        <div class="control-con-table">
+            <a-table
+                ref="table"
+                size="middle"
+                bordered
+                :columns="columns"
+                :dataSource="dataSource"
+                :pagination="false"
+            >
+                <span slot="action" slot-scope="text, record">
+                    <a @click="handleEdit(record)">推送</a>
+                    <a-divider type="vertical" />
+                    <a @click="handleDelete(record)">删除</a>
+                </span>
+                <span slot="cause" slot-scope="text, record">
+                    <a class="cause-text-class" @click="handleCause(record)">{{ text }}</a>
+                </span>
+                <span slot="depRelax" slot-scope="text, record">
+                    <a @click="handleAcountRelax('dep', record)">{{ text }}</a>
+                </span>
+                <span slot="acountRelax" slot-scope="text, record">
+                    <a @click="handleAcountRelax('acount', record)">{{ text }}</a>
+                </span>
+            </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"
+            />
+        </div>
+        <a-modal
+            v-if="personVisible"
+            title="上传人群包"
+            class="person-modal"
+            :visible="personVisible"
+            :confirm-loading="confirmLoading"
+            @ok="handleOk"
+            @cancel="handleCancel"
+        >
+            <div>
+                <a-form-model
+                    ref="ruleForm"
+                    :model="personForm"
+                    :rules="personRules"
+                    :label-col="labelCol"
+                    :wrapper-col="wrapperCol"
+                >
+                    <a-form-model-item label="匹配类型" prop="resource">
+                        <a-radio-group v-model="personForm.resource">
+                            <a-radio v-for="item in mateTypeTasks" :key="item.label" :value="item.label">{{ item.value }}</a-radio>
+                        </a-radio-group>
+                    </a-form-model-item>
+                    <a-form-model-item ref="name" label="人群包名称" prop="name">
+                        <a-input
+                            v-model="personForm.name"
+                            placeholder="请输入人群包名称"
+                        />
+                    </a-form-model-item>
+                    <a-form-model-item label="选择账户">
+                        <acount-search class="acount-search-class" :appId.sync="uploadAcountIds" :multiple="false"></acount-search>
+                    </a-form-model-item>
+                    <a-form-model-item label="上传人群包">
+                        <a-upload
+                            name="file"
+                            :file-list="fileList"
+                            :before-upload="beforeUpload"
+                        >
+                            <a-button><a-icon type="upload" />文件上传</a-button>
+                        </a-upload>
+                        <p class="upload-txt-rules">1、文件格式:支持上传*.txt(utf-8)文本;也支持将单个/多个*.txt文件经过Zip格式压缩上传</p>
+                        <p class="upload-txt-rules">2、文件大小:单个文件大小不能超过1G</p>
+                        <p class="upload-txt-rules">3、内容编排:每行一条记录</p>
+                    </a-form-model-item>
+                </a-form-model>
+            </div>
+        </a-modal>
+        <a-modal
+            title="推送账户"
+            v-if="pushVisible"
+            :visible="pushVisible"
+            :confirm-loading="pushConfirmLoading"
+            dialog-class="push-modal"
+            @ok="handlePushSure"
+            @cancel="handlePushCancel"
+        >
+            <div>
+                <div class="acount-title">
+                    <div class="acount-title-left">已选人群包</div>
+                    <div class="acount-title-right">{{ tableSelectList.orientationName }}</div>
+                </div>
+                <div class="acount-title push-plate">
+                    <div class="acount-title-left">推送平台</div>
+                    <div class="acount-title-right">
+                        <a-radio-group default-value="a" button-style="solid">
+                            <a-radio-button value="a">效果</a-radio-button>
+                            <a-radio-button value="b" disabled>品牌</a-radio-button>
+                        </a-radio-group>
+                    </div>
+                </div>
+                <tree-select @applyType="handleApplyType"></tree-select>
+            </div>
+        </a-modal>
+        <a-modal
+            title="相关项目"
+            v-if="causeVisible"
+            :visible="causeVisible"
+            :confirm-loading="causeConfirmLoading"
+            :footer="null"
+            dialog-class="cause-modal"
+            @cancel="handleCauseCancel"
+        >
+            <div>
+                <div class="cause-modal-table-class">
+                    <a-table :columns="causeColumns" :data-source="causeData" bordered :pagination="false"></a-table>
+                </div>
+                <a-pagination
+                    class="pagin-table-class"
+                    :total="totalAllCause"
+                    size="small"
+                    @change="handleCauseSizeChange"
+                />
+            </div>
+        </a-modal>   
+        <a-modal
+            title="相关项目"
+            v-if="relaxVisible"
+            :visible="relaxVisible"
+            :confirm-loading="relaxConfirmLoading"
+            :footer="null"
+            dialog-class="relax-modal"
+            @cancel="handleRelaxCancel"
+        >
+            <div>
+                <div class="acount-title">
+                    <div class="acount-title-left">人群包名称</div>
+                    <div class="acount-title-right">{{ acountRelaxDetail.orientationName }}</div>
+                </div>
+                <div class="acount-title push-plate">
+                    <div class="acount-title-left">目标账户</div>
+                    <div class="acount-title-right">{{ acountRelaxDetail.accountName }}</div>
+                </div>
+                <template v-if="relaxStatus === 'dep'">
+                    <a-table :columns="depColumns" :data-source="depData" bordered>
+                    </a-table>
+                </template>
+                <template v-if="relaxStatus === 'acount'">
+                    <a-table :columns="acountColumns" :data-source="acountData" bordered></a-table>
+                </template>
+            </div>
+        </a-modal>
+    </div>
+</template>
+<script>
+import TreeSelect from './components/tree-select/tree-select';
+import {getAction, postAction} from '@/api/manage';
+import AcountSearch from '@/views/modules/Statistics/components/Treeselect.vue';
+import AppMarketService from './crowd-control-service';
+
+let COS = require('cos-js-sdk-v5');
+let cos = new COS({
+    SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
+    SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9'
+});
+export default {
+    name: 'crowd-control',
+    components: {
+        TreeSelect,
+        AcountSearch
+    },
+    data() {
+        let that = this;
+        return {
+            totalAllCause: 0,
+            acountId: undefined, // 搜索的账户ID
+            uploadAcountIds: '',
+            totalAll: 10,
+            finallyRightTree: [],
+            fileList: [],
+            relaxVisible: false,
+            relaxConfirmLoading: false,
+            pushVisible: false,
+            pushConfirmLoading: false,
+            causeVisible: false,
+            causeConfirmLoading: false,
+            labelCol: {span: 4},
+            wrapperCol: {span: 14},
+            personVisible: false,
+            confirmLoading: false,
+            mateTypeTasks: AppMarketService.setMateTypeTasks(), // 匹配类型
+            populationTypeTasks: AppMarketService.setPopulationTypeTasks(), // 人群包类型
+            statusTasks: AppMarketService.setStatusTasks(), // 状态枚举
+            relaxStatus: '',
+            causeData: [], // 原因的table列表数据,
+            depData: [], // 相关项目的table列表数据,
+            acountData: [], // 相关账户的table列表数据,
+            acountColumns: AppMarketService.setAcountColumns(), // 相关账户的table列表
+            depColumns: AppMarketService.setDepColumns(), // 相关项目的table列表
+            causeColumns: AppMarketService.setCauseColumns(), // 原因的table列表
+            dataSource: [],
+            columns: [
+                {
+                    title: '人群包名称',
+                    align: 'center',
+                    width: 200,
+                    ellipsis: true,
+                    dataIndex: 'orientationName'
+                },
+                {
+                    title: '人群包类型',
+                    align: 'center',
+                    dataIndex: 'populationType',
+                    customRender(t) {
+                        return t ? that.populationTypeTasks.find(item => item.label === Number(t)).value : '-';
+                    }
+                },
+                {
+                    title: '匹配类型',
+                    align: 'center',
+                    dataIndex: 'typeStr'
+                },
+                {
+                    title: '上传时间',
+                    dataIndex: 'statDate',
+                    align: 'center'
+                },
+                {
+                    title: '覆盖数量',
+                    dataIndex: 'coverNum',
+                    align: 'center'
+                },
+                {
+                    title: '状态',
+                    dataIndex: 'status',
+                    align: 'center',
+                    customRender(t) {
+                        return t ? that.statusTasks.find(item => item.label === t).value : '-';
+                    }
+                },
+                {
+                    title: '原因',
+                    dataIndex: 'statusStr',
+                    align: 'center',
+                    scopedSlots: {customRender: 'cause'}
+                },
+                {
+                    title: '目标账户',
+                    dataIndex: 'accountName',
+                    align: 'center'
+                },
+                {
+                    title: '相关项目',
+                    dataIndex: 'projectCount',
+                    align: 'center',
+                    scopedSlots: {customRender: 'depRelax'}
+                },
+                {
+                    title: '相关账户',
+                    dataIndex: 'accountCount',
+                    align: 'center',
+                    scopedSlots: {customRender: 'acountRelax'}
+                },
+                {
+                    title: '操作',
+                    dataIndex: 'action',
+                    align: 'center',
+                    scopedSlots: {customRender: 'action'}
+                }
+            ],
+            personForm: {
+                name: '',
+                resource: ''
+            },
+            personRules: AppMarketService.setPersonRules(), // 上传人群包表单校验规则
+            tablePag: {
+                page: 1,
+                size: 10
+            },
+            // table 原因的分页
+            causePag: {
+                page: 1,
+                size: 10
+            },
+            tableSelectList: {},
+            acountRelaxDetail: {},
+            causeDetailData: {}
+        };
+    },
+    created() {
+        this.form = this.$form.createForm(this);
+    },
+    mounted() {
+        this.handleGetTableList({});
+    },
+    methods: {
+        onShowSizeChange(current, pageSize) {
+            const paramsData = this.form.getFieldsValue();
+            this.tablePag = {
+                page: current,
+                size: pageSize
+            };
+            this.handleGetTableList(paramsData);
+        },
+        handleCauseSizeChange(current, pageSize) {
+            this.causePag = {
+                page: current,
+                size: pageSize
+            };
+            this.handleCauseTableData();
+        },
+        handleGetTableList(data) {
+            const paramsData = {
+                orientationName: data.name,
+                accountName: this.acountId,
+                status: data.status,
+                pageNo: this.tablePag.page,
+                pageSize: this.tablePag.size
+            };
+            getAction('/kuaishouCrowdPack/queryPageList', paramsData).then(result => {
+                if (result.code === 200) {
+                    this.dataSource = result.result.list || [];
+                    this.totalAll = result.result.total || 0;
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
+        },
+        handleDelete(data) {
+            this.$confirm({
+                title: '删除提示',
+                content: '确定要删除这一条吗?',
+                onOk() {
+                    getAction('/kuaishouCrowdPack/delete', {id: data.id}).then(result => {
+                        if (result.code === 200) {
+                            this.handleGetTableList({});
+                        }
+                    }).catch(error => {
+                        console.log(error, 'eeee');
+                    });
+                }
+            });
+        },
+        handleAcountRelaxTable() {
+            const paramsData = {
+                signature: this.acountRelaxDetail.signature,
+                accountId: this.acountRelaxDetail.accountId,
+                type: this.relaxStatus === 'dep' ? 1 : 2
+            };
+            getAction('/kuaishouCrowdPack/queryRel', paramsData).then(result => {
+                if (result.code === 200) {
+                    if (this.relaxStatus === 'dep') {
+                        this.depData = result.result.list;
+                    }
+                    else if (this.relaxStatus === 'acount') {
+                        this.acountData = result.result.list;
+                    }
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
+        },
+        handleAcountRelax(txt, recd) {
+            if (txt === 'dep') {
+                this.relaxStatus = 'dep';
+            }
+            else if (txt === 'acount') {
+                this.relaxStatus = 'acount';
+            }
+            this.acountRelaxDetail = recd;
+            this.handleAcountRelaxTable();
+            this.relaxVisible = true;
+        },
+        handleRelaxCancel() {
+            this.relaxVisible = false;
+        },
+        handleCause(list) {
+            this.causeVisible = true;
+            this.causeDetailData = list;
+            this.handleCauseTableData();
+        },
+        handleCauseTableData() {
+            const paramsData = {
+                orientationId: this.causeDetailData.orientationId,
+                pageNo: this.causePag.page,
+                pageSize: this.causePag.size
+            };
+            getAction('/kuaishouCrowdPack/queryFailReason', paramsData).then(result => {
+                if (result.code === 200) {
+                    this.causeData = result.result.list || [];
+                    this.totalAllCause = result.result.total || 0;
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
+        },
+        handleApplyType(list) {
+            this.finallyRightTree = list;
+        },
+        handleEdit(val) {
+            this.tableSelectList = val;
+            this.pushVisible = true;
+        },
+        handleCauseCancel() {
+            this.causeVisible = false;
+        },
+        handlePushSure() {
+            const paramsData = {
+                accountIds: this.finallyRightTree.map(item => item.key),
+                orientationId: this.tableSelectList.orientationId,
+                accountId: this.tableSelectList.accountId
+            };
+            postAction('/kuaishouCrowdPack/accountPush', paramsData).then(result => {
+                if (result.code === 200) {
+                    this.pushVisible = false;
+                    this.handleGetTableList({});
+                }
+            }).catch(error => {
+                console.log(error, 'eeeeeee');
+            });
+        },
+        handlePushCancel() {
+            this.pushVisible = false;
+        },
+        beforeUpload(file) {
+            const isZip = file.type.includes('zip') || file.type.includes('text');
+            const fileOvesize = file.size > (1024 * 1024 * 1024);
+            if (!isZip) {
+                this.fileList = [];
+                this.$message.error('只能上传zip格式的文件或者txt文件');
+                return false;
+            }
+            if (fileOvesize) {
+                this.$message.error('文件大小不能超过1G');
+                return;
+            }
+            this.cosUpload(file);
+        },
+        cosUpload(file) {
+            let that = this;
+            let date = new Date();
+            let y = date.getFullYear();
+            let MM = date.getMonth() + 1;
+            MM = MM < 10 ? '0' + MM : MM;
+            let d = date.getDate();
+            d = d < 10 ? '0' + d : d;
+            let timeElse = new Date().getTime();
+            let arr = file.name.split('.');
+            let str = '';
+            for (let i = 0; i < arr.length; i++) {
+                if (i === arr.length - 1) {
+                }
+                else {
+                    if (i === arr.length - 2) {
+                        str += arr[i];
+                    }
+                    else {
+                        str += arr[i] + '.';
+                    }
+                }
+            }
+            cos.putObject(
+                {
+                    Bucket: 'media-1301855440',
+                    Region: 'ap-chongqing',
+                    // 存储桶所在地域,必须字段
+                    Key: that.uploadType + '/' + y + '-' + MM + '-' + d + '/' + str + '-' + timeElse + '.' + arr[arr.length - 1],
+                    StorageClass: 'STANDARD',
+                    Body: file // 上传文件对象
+                },
+                function (err, data) {
+                    if (err) {
+                        that.$message.error('上传失败!!!' + err);
+                        return;
+                    }
+                    that.loadingElse = false;
+                    that.fileList.push({
+                        uid: file.name,
+                        name: file.name,
+                        status: 'done',
+                        url: '//' + data.Location
+                    });
+                    if (that.fileList.length > 1) {
+                        that.fileList = that.fileList.slice(-1);
+                    }
+                }
+            );
+        },
+        handleQueryList(event) {
+            event.preventDefault();
+            const paramsData = this.form.getFieldsValue();
+            this.handleGetTableList(paramsData);
+        },
+        handleResetForm() {
+            this.form.resetFields();
+            this.acountId = undefined;
+            this.handleGetTableList({});
+        },
+        handleUploadPerson() {
+            this.personVisible = true;
+        },
+        handleOk() {
+            this.$refs.ruleForm.validate(valid => {
+                if (valid) {
+                    if (!this.uploadAcountIds) {
+                        this.$message.error('请选择账户');
+                        return;
+                    }
+                    if (!this.fileList.length) {
+                        this.$message.error('请上传文件');
+                        return;
+                    }
+                    this.handleUploadRuleForm();
+                }
+                else {
+                    return false;
+                }
+            });
+        },
+        handleUploadRuleForm() {
+            const paramsData = {
+                type: this.personForm.resource,
+                orientationName: this.personForm.name,
+                accountId: this.uploadAcountIds,
+                url: this.fileList[0].url
+            };
+            postAction('/kuaishouCrowdPack/uploadCrowdPack', paramsData).then(result => {
+                if (result.code === 200) {
+                    this.personVisible = false;
+                    this.handleGetTableList({});
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
+        },
+        handleCancel() {
+            this.personVisible = false;
+            this.$refs.ruleForm.resetFields();
+            this.uploadAcountIds = '';
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+    @import "crowd-control";
+</style>

+ 1 - 1
vue.config.js

@@ -80,7 +80,7 @@ module.exports = {
         // target: 'http://192.168.1.219:8080', //请求本地 需要jeecg-boot后台项目  赵西安
         // target: 'http://192.168.1.193:8080', //请求本地 需要jeecg-boot后台项目  李煜一
         // target: 'http://192.168.1.193:31012', //请求本地 需要jeecg-boot后台项目  李煜一
-        //  target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
+         target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
         // target: 'https://trac.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
         // target: 'http://39.106.184.70:8088/', //请求本地 需要jeecg-boot后台项目
         //  target: 'http://adsp.tjyourong.com.cn/', //请求本地 需要jeecg-boot后台项目