فهرست منبع

定向包管理分支

朱鑫波 4 سال پیش
والد
کامیت
b9c45b3394

+ 65 - 0
src/views/modules/autoLaunch/directional/components/tree-select.less

@@ -0,0 +1,65 @@
+
+.tree-select-content {
+    .input-search {
+        width: 240px;
+        margin: 10px 0 10px 0;
+    }
+    .tree-select-class {
+        display: flex;
+        justify-content: space-between;
+        .class-left-header {
+            height: 50px;
+            line-height: 50px;
+            background-color: #f9fafd;
+            border-bottom: 1px solid #eee;
+            text-indent: 10px;
+        }
+        .select-class-left {
+            width: 60%;
+            height: 400px;
+            border: 1px solid #eee;
+            .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 #eee;
+            .class-left-content {
+                padding: 0 10px;
+                height: 348px;
+                overflow-y: auto;
+                .apply-right-tree {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: baseline;
+                    .left-content-p {
+                        display: inline-block;
+                        width: 85%;
+                        height: 25px;
+                        line-height: 25px;
+                        margin: 0;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                    }
+                    .delete-type-class {
+                        color: #1890ff;
+                        cursor: pointer;
+                    }
+                }
+            }
+            .no-data-class {
+                height: 340px;
+                line-height: 340px;
+                text-align: center;
+            }
+        }
+    }
+}

+ 272 - 0
src/views/modules/autoLaunch/directional/components/tree-select.vue

@@ -0,0 +1,272 @@
+<template>
+    <div class="tree-select-content">
+        <a-input-search class="input-search" placeholder="请输入账户名或ID" @change="onChange" />
+        <div class="tree-select-class">
+            <div class="select-class-left">
+                <div class="class-left-header">选择分享的账户名称</div>
+                <div class="class-left-content">
+                    <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">
+                    <div class="apply-right-tree" v-for="item in applyTypeOption" :key="item.key">
+                        <p class="left-content-p">
+                            <a-tooltip placement="left">
+                                <template slot="title">
+                                    <span>{{ item.title }}</span>
+                                </template>
+                                {{ item.title }}
+                            </a-tooltip>
+                        </p>
+                        <a-icon type="delete" class="delete-type-class" @click="handleDelTree(item)" />
+                    </div>
+                </div>
+                <div v-else class="no-data-class">暂无数据</div>
+            </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;
+                }
+            });
+        },
+        handleDelTree(list) {
+            const defaultTypeOption = JSON.parse(JSON.stringify(this.applyTypeOption));
+            const defaultCheckKey = JSON.parse(JSON.stringify(this.checkedKeys));
+            const len = defaultTypeOption.length;
+            const keysLen = defaultCheckKey.length;
+            for(let i = len - 1; i >= 0; i--) {
+                if(defaultTypeOption[i].key === list.key) {
+                    defaultTypeOption.splice(i, 1);
+                }
+            }
+            this.applyTypeOption = defaultTypeOption;
+            this.selectRightData = new Set(defaultTypeOption);
+            const txt = this.handleDelFindId(this.treeData, list.key);
+            const lastIndex = defaultCheckKey.findIndex(item => item === txt);
+            let value = null;
+            if (lastIndex > -1) {
+                value = defaultCheckKey.findIndex(item => item === txt);
+                for(let i = keysLen - 1; i >= 0; i--) {
+                    if(defaultCheckKey[i] === list.key) {
+                        defaultCheckKey.splice(i, 1);
+                    }
+                }
+            }
+            else {
+                value = defaultCheckKey.findIndex(item => item === list.key);
+            }
+            defaultCheckKey.splice(value, 1);
+            this.checkedKeys = defaultCheckKey;
+        },
+        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;
+            }
+        },
+        handleDelFindId(treeData, value) {
+            if (!treeData) {
+                return null;
+            }
+            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.key;
+                    for (let j = 0; j < children.length; j++) {
+                        if (children[j].key === value) {
+                            return text;
+                        }
+                    }
+                }
+            }
+        },
+        // 根据关键词查询所有相关的tree节点
+        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;
+        },
+        // 去重的方法
+        Es6duplicate(arr, type) {
+            if (!arr.length){
+                return arr;
+            }
+            else {
+                if (type) {
+                    let obj = {};
+                    let newArr = arr.reduce((cur, next) => {
+                        obj[next.key] ? '' : obj[next.key] = true && cur.push(next);
+                        return cur;
+                    }, []);
+                    return newArr;
+                }
+                else {
+                    return Array.from(new Set(arr));
+                }
+            }
+        },
+        onCheck(checkedKeys) {
+            // this.checkedKeys = checkedKeys;
+            this.nodes(this.treeData, checkedKeys);
+            const filterCheckKey = this.checkedKeys.filter(item=>typeof item ==='number');
+            let filterCheckKeySet = new Set(filterCheckKey);
+            let selectRightDataSet = new Set(this.selectRightData);
+            let difference = new Set([...selectRightDataSet].filter((item) => !filterCheckKeySet.has(item.key)));
+            this.selectRightData.delete(...difference);
+            this.applyTypeOption = this.Es6duplicate([...this.selectRightData], 'key');
+            const changeSelectData = this.applyTypeOption.map(item => item.key);
+            this.checkedKeys = changeSelectData;
+              
+            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>

+ 205 - 0
src/views/modules/autoLaunch/directional/directional-service.js

@@ -0,0 +1,205 @@
+/**
+ * @file 人群包管理基础服务
+ * @author jiayufei(jiayufei@c-top.com.cn)
+ */
+
+ class AppMarketService {
+    constructor() {}
+
+    // 相关账户的table列表
+    setAcountColumns() {
+        return [
+            {
+                title: '账户名称',
+                dataIndex: 'accountName',
+                width: '30%'
+            },
+            {
+                title: '所属项目',
+                dataIndex: 'projectName',
+                width: '30%'
+            },
+            {
+                title: '人群包数量',
+                dataIndex: 'count',
+                width: '20%'
+            },
+            {
+                title: '状态',
+                dataIndex: 'statusStr',
+                width: '20%'
+            }
+        ]
+    }
+
+    // 原因的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: '40%'
+            },
+            {
+                title: '账户数量',
+                dataIndex: 'accountCount',
+                width: '20%'
+            },
+            {
+                title: '人群包数量',
+                dataIndex: 'count',
+                width: '20%'
+            }
+        ]
+    }
+
+    // 状态枚举
+    setPlatform() {
+        return [
+            {
+                label: 0,
+                value: '不限'
+            },
+            {
+                label: 1,
+                value: 'Android'
+            },
+            {
+                label: 2,
+                value: 'IOS'
+            }
+        ]
+    }
+
+    // 上传人去报的校验规则
+    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();

+ 110 - 0
src/views/modules/autoLaunch/directional/directional.less

@@ -0,0 +1,110 @@
+.directional-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;
+    }
+    .upload-txt-rules {
+        margin-top: 10px;
+        margin-bottom: 10px;
+        line-height: 1.5;
+    }
+    /deep/ .ant-radio-group {
+        line-height: 30px;
+    }
+}
+/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;
+    }
+}
+
+.grid-form-item-account {
+    /deep/ .ant-form-item-control {
+        line-height: inherit;
+    }
+}
+
+

+ 677 - 0
src/views/modules/autoLaunch/directional/directional.vue

@@ -0,0 +1,677 @@
+<template>
+    <div class="directional-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 grid-form-item-account" 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 platform" :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="ipagination"
+            >
+                <span slot="action" slot-scope="text, record">
+                    <a @click="handleEdit(record)" :disabled="record.status !== 4">推送</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)">失败原因</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>
+        </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" :disabled="personResourceDisabled">
+                            <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="请输入人群包名称"
+                            :disabled="personNameDisabled"
+                        />
+                    </a-form-model-item>
+                    <a-form-model-item label="选择账户" class="grid-form-item-account">
+                        <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"
+                            @change="handleChange"
+                        >
+                            <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 }} (ID: {{ tableSelectList.id }})</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="relaxStatus === 'dep' ? '相关项目' : '相关账户'"
+            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';
+import {getAction, postAction} from '@/api/manage';
+import AcountSearch from '@/views/modules/Statistics/components/Treeselect.vue';
+import AppMarketService from './directional-service';
+import BMF from 'browser-md5-file';
+
+let COS = require('cos-js-sdk-v5');
+let cos = new COS({
+    SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
+    SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9'
+});
+export default {
+    name: 'directional',
+    components: {
+        TreeSelect,
+        AcountSearch
+    },
+    data() {
+        let that = this;
+        return {
+            personResourceDisabled: false,
+            personNameDisabled: false,
+            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(), // 人群包类型
+            platform: AppMarketService.setPlatform(), // 状态枚举
+            relaxStatus: '',
+            causeData: [], // 原因的table列表数据,
+            depData: [], // 相关项目的table列表数据,
+            acountData: [], // 相关账户的table列表数据,
+            acountColumns: AppMarketService.setAcountColumns(), // 相关账户的table列表
+            depColumns: AppMarketService.setDepColumns(), // 相关项目的table列表
+            causeColumns: AppMarketService.setCauseColumns(), // 原因的table列表
+            dataSource: [],
+            ipagination: {
+                current: 1,
+                pageSize: 10,
+                //   pageSizeOptions: ['10', '20', '30'],
+                showTotal: (total, range) => {
+                    return range[0] + "-" + range[1] + " 共" + total + "条"
+                },
+                showQuickJumper: true,
+                showSizeChanger:false,
+                pageSizeOptions: ['10', '30', '50'],
+                total: 0,
+                onChange: (current, pageSize) => {
+                    // 切换分页时的回调,
+                    // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
+                    this.ipagination.current = current;
+                    this.ipagination.pageSize= pageSize;
+                }
+            },
+            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: 'statusStr',
+                    align: 'center'
+                },
+                {
+                    title: '原因',
+                    dataIndex: '',
+                    align: 'center',
+                    scopedSlots: {customRender: 'cause'}
+                },
+                {
+                    title: '目标账户',
+                    dataIndex: 'accountName',
+                    align: 'center',
+                    ellipsis: true
+                },
+                {
+                    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,
+                accountId: this.acountId,
+                status: data.status,
+                pageNo: this.tablePag.page,
+                pageSize: this.tablePag.size
+            };
+            this.dataSource = []
+            getAction('/kuaishouCrowdPack/queryPageList', paramsData).then(result => {
+                if (result.code === 200) {
+                    this.dataSource = result.result.list || [];
+                    this.totalAll = result.result.total || 0;
+                }
+                else {
+                    this.$message.error(result.message);
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
+        },
+        handleDelete(data) {
+            let that = this
+            this.$confirm({
+                title: '删除提示',
+                content: '确定要删除这一条吗?',
+                onOk() {
+                    getAction('/kuaishouCrowdPack/delete', {id: data.id}).then(result => {
+                        if (result.code === 200) {
+                            that.handleGetTableList({});
+                            that.$message.success('删除成功');
+                        }
+                        else {
+                            that.$message.error(result.message);
+                        }
+                    }).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;
+                    }
+                }
+                else {
+                    this.$message.error(result.message);
+                }
+            }).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 = {
+                signature: this.causeDetailData.signature,
+                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;
+                }
+                else {
+                    this.$message.error(result.message);
+                }
+            }).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),
+                signature: this.tableSelectList.signature,
+                accountId: this.tableSelectList.accountId
+            };
+            postAction('/kuaishouCrowdPack/accountPush', paramsData).then(result => {
+                if (result.code === 200) {
+                    this.pushVisible = false;
+                    this.handleGetTableList({});
+                }
+                else {
+                    this.$message.error(result.message);
+                }
+            }).catch(error => {
+                console.log(error, 'eeeeeee');
+            });
+        },
+        handlePushCancel() {
+            this.pushVisible = false;
+        },
+        beforeUpload(file) {
+            this.cosUpload(file);
+        },
+        handleMd5(file) {
+            let bmf = new BMF();
+            let that = this;
+            return new Promise(function (resolve, reject) {
+                bmf.md5(file, (err, md5) => {
+                    getAction('/kuaishouCrowdPack/checkCrowdPackage', {signature: md5}).then(result => {
+                        if (result.code === 200) {
+                            that.personNameDisabled = false;
+                            that.personResourceDisabled = false;
+                            resolve();
+                        }
+                        else if (result.code === 201) {
+                            that.$message.error(result.message);
+                            that.personForm.name = result.result.orientationName;
+                            that.personForm.resource = result.result.type;
+                            that.personNameDisabled = true;
+                            that.personResourceDisabled = true;
+                            reject();
+                        }
+                    }).catch(error => {
+                        console.log(error, 'eeee');
+                        reject();
+                    });
+                })
+            })
+        },
+        handleChange(info) {
+            this.fileList = info.fileList;
+        },
+        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);
+                    }
+                    const isZip = file.type.includes('zip') || file.type.includes('text');
+                    const fileOvesize = file.size > (1024 * 1024 * 1024);
+                    if (!isZip) {
+                        that.$message.error('只能上传zip格式的文件或者txt文件');
+                        return;
+                    }
+                    if (fileOvesize) {
+                        that.$message.error('文件大小不能超过1G');
+                        return;
+                    }
+                    that.handleMd5(file);
+                }
+            );
+        },
+        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.confirmLoading = true
+                    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 => {
+                this.confirmLoading = false
+                if (result.code === 200) {
+                    this.personVisible = false;
+                    this.personResourceDisabled = false;
+                    this.personNameDisabled = false;
+                    this.$message.success('上传成功');
+                    this.handleGetTableList({});
+                    this.fileList = [];
+                    this.personForm.name = '';
+                    this.personForm.resource = '';
+                    this.uploadAcountIds = undefined;
+                }
+                else {
+                    this.$message.error(result.message);
+                }
+            }).catch(error => {
+                console.log(error, 'eeee');
+            });
+        },
+        handleCancel() {
+            this.confirmLoading = false
+            this.personVisible = false;
+            this.personResourceDisabled = false;
+            this.personNameDisabled = false;
+            this.$refs.ruleForm.resetFields();
+            this.uploadAcountIds = '';
+            this.personForm.name = '';
+            this.personForm.resource = '';
+            this.fileList = [];
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+    @import "directional";
+</style>

+ 2 - 2
vue.config.js

@@ -80,13 +80,13 @@ 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后台项目
         // target: 'http://192.168.1.251/', //请求本地 需要jeecg-boot后台项目 
         // target:'http://118.24.244.213:8804',
-      //  target:'http://139.186.165.84:8806', //测试
+       target:'http://139.186.165.84:8806', //测试
 
         ws: false,