Переглянути джерело

Merge branch 'feature/work-jyf' of http://git.tjyourong.com.cn/ctop/adsp-vue into feature/work-jyf

朱鑫波 4 роки тому
батько
коміт
db7cbe10ec

BIN
src/assets/down.png


BIN
src/assets/up.png


+ 55 - 52
src/views/modules/crowd-control/components/tree-select/tree-select.less

@@ -1,61 +1,64 @@
-.tree-select-class {
-    display: flex;
-    justify-content: space-between;
-    .class-left-header {
-        height: 50px;
-        line-height: 50px;
-        background-color: #ccc;
-        text-indent: 10px;
-    }
+
+.tree-select-content {
     .input-search {
-        width: 200px;
-        margin: 10px;
+        width: 240px;
+        margin: 10px 0 10px 0;
     }
-    .select-class-left {
-        width: 60%;
-        height: 400px;
-        border: 1px solid #ccc;
-        .class-left-content {
-            overflow-y: auto;
-            height: 340px;
+    .tree-select-class {
+        display: flex;
+        justify-content: space-between;
+        .class-left-header {
+            height: 50px;
+            line-height: 50px;
+            background-color: #ccc;
+            text-indent: 10px;
         }
-        .example {
-            text-align: center;
-            line-height: 200px;
+        .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;
-            .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;
+        .select-class-right {
+            width: 35%;
+            height: 400px;
+            border: 1px solid #ccc;
+            .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;
+            .no-data-class {
+                height: 340px;
+                line-height: 340px;
+                text-align: center;
+            }
         }
     }
 }

+ 47 - 44
src/views/modules/crowd-control/components/tree-select/tree-select.vue

@@ -1,52 +1,54 @@
 <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="请输入账户名或ID" @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>
+    <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>
-                    <span><a-icon type="question-circle" /></span>
-                </a-popover>
+                    <div class="example">
+                        <a-spin :spinning="spinning"/>
+                        <span v-if="leftTreeNoData">暂无数据</span>
+                    </div>
+                </div>
             </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 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 v-else class="no-data-class">暂无数据</div>
         </div>
     </div>
 </template>
@@ -123,6 +125,7 @@ export default {
                 }
             }
             this.applyTypeOption = defaultTypeOption;
+            this.selectRightData = new Set(defaultTypeOption);
             for(let i = keysLen - 1; i >= 0; i--) {
                 if(defaultCheckKey[i] === list.key) {
                     defaultCheckKey.splice(i, 1);

+ 4 - 7
src/views/modules/crowd-control/crowd-control.vue

@@ -63,7 +63,7 @@
                     <a @click="handleDelete(record)">删除</a>
                 </span>
                 <span slot="cause" slot-scope="text, record">
-                    <a class="cause-text-class" @click="handleCause(record)">{{ text }}</a>
+                    <a class="cause-text-class" @click="handleCause(record)">失败原因</a>
                 </span>
                 <span slot="depRelax" slot-scope="text, record">
                     <a @click="handleAcountRelax('dep', record)">{{ text }}</a>
@@ -286,15 +286,12 @@ export default {
                 },
                 {
                     title: '状态',
-                    dataIndex: 'status',
-                    align: 'center',
-                    customRender(t) {
-                        return t ? that.statusTasks.find(item => item.label === t).value : '-';
-                    }
+                    dataIndex: 'statusStr',
+                    align: 'center'
                 },
                 {
                     title: '原因',
-                    dataIndex: 'statusStr',
+                    dataIndex: '',
                     align: 'center',
                     scopedSlots: {customRender: 'cause'}
                 },

+ 3 - 0
src/views/modules/stockWatch/keep-market.less

@@ -0,0 +1,3 @@
+.keep-market-content {
+    
+}

+ 27 - 0
src/views/modules/stockWatch/keep-market.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="keep-market-content"></div>
+</template>
+<script>
+export default {
+    name: 'keep-market',
+    data() {
+        return {
+            rotureType: 'person'
+        };
+    },
+    mounted() {
+        if (this.rotureType === 'person') {
+            this.$router.push('/modules/stockWatch/modules/keep-person/keep-person');
+        }
+        else if (this.rotureType === 'manage') {
+            this.$router.push('/modules/stockWatch/modules/keep-manage/keep-manage');
+        }
+    },
+    methods: {
+
+    }
+};
+</script>
+<style lang="less" scoped>
+    @import "keep-market";
+</style>

+ 109 - 0
src/views/modules/stockWatch/modules/custom-columns/custom-columns.less

@@ -0,0 +1,109 @@
+/deep/ .custom-columns-modal {
+    width: 800px !important;
+    .custom-modal-content {
+        .input-search {
+            width: 200px;
+            margin: 10px 0 10px 0;
+        }
+        .class-left-header {
+            height: 50px;
+            line-height: 50px;
+            background-color: #ccc;
+            padding: 0 10px;
+            display: flex;
+            justify-content: space-between;
+        }
+        .active {
+            background: #ccc;
+            color:cyan;
+            cursor: pointer;
+        }
+        .modal-content-table {
+            display: flex;
+            justify-content: space-between;
+            .select-class-left {
+                width: 65%;
+                height: 400px;
+                border: 1px solid #ccc;
+                .class-left-main {
+                    display: flex;
+                    .left-main-left {
+                        width: 140px;
+                        border-right: 1px solid #ccc;
+                        .main-left-select {
+                            height: 40px;
+                            line-height: 40px;
+                            text-align: center;
+                        }
+                    }
+                    .left-main-right {
+                        width: 100%;
+                        height: 348px;
+                        overflow-y: auto;
+                        padding: 10px;
+                        .main-right-class {
+                            height: 200px;
+                            .check-box-p {
+                                height: 20px;
+                                line-height: 20px;
+                            }
+                            .check-box-select-muster {
+                                .check-box-class {
+                                    display: inline-block;
+                                    width: 50%;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            .select-class-right {
+                width: 30%;
+                height: 400px;
+                border: 1px solid #ccc;
+                .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;
+                }
+            }
+        }
+    }
+    // .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;
+    // }
+}

+ 154 - 0
src/views/modules/stockWatch/modules/custom-columns/custom-columns.vue

@@ -0,0 +1,154 @@
+<template>
+    <a-modal
+        title="自定义列表"
+        :visible="visible"
+        dialog-class="custom-columns-modal"
+        @ok="handleOk"
+        @cancel="handleCancel"
+    >
+        <div class="custom-modal-content">
+            <a-input-search class="input-search" placeholder="请输入指标名称" @change="onChange" />
+            <div class="modal-content-table">
+                <div class="select-class-left">
+                    <div class="class-left-header">可添加的列</div>
+                    <div class="class-left-main">
+                        <div class="left-main-left">
+                            <div
+                                class="main-left-select"
+                                v-for="(item, index) in selectLeftList"
+                                :key="index"
+                                :class="{active: cur === index}"
+                                @click="handleSelectNum(index)"
+                            >
+                                {{item}}
+                            </div>
+                        </div>
+                        <div class="left-main-right">
+                            <div v-show="isConNumOne" class="main-right-class">
+                                <p class="check-box-p">展示数据</p>
+                                <div class="check-box-select-muster">
+                                    <a-checkbox-group @change="handleChangeBox">
+                                        <span
+                                            class="check-box-class"
+                                            v-for="(item, index) in selectCheckboxData"
+                                            :key="index"
+                                        >
+                                            <a-checkbox :value="item">{{ item }}</a-checkbox>
+                                        </span>
+                                    </a-checkbox-group>
+                                </div>
+                            </div>
+                            <div v-show="isConNumTwo" class="main-right-class">内容二</div>
+                            <div v-show="isConNumThree" class="main-right-class">内容三</div>
+                            <div v-show="isConNumFour" class="main-right-class">内容四</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="select-class-right">
+                    <div class="class-left-header">
+                        <span>已选100个</span>
+                        <span><a @click="handleClearAll">清空全部</a></span>
+                    </div>
+                    <div v-if="applyTypeOption.length" class="class-left-content">
+                        <div class="apply-right-tree" v-for="(item, index) in applyTypeOption" :key="index">
+                            <p class="left-content-p">
+                                <a-tooltip placement="left">
+                                    <template slot="title">
+                                        <span>{{ item }}</span>
+                                    </template>
+                                    {{ item }}
+                                </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>
+    </a-modal>
+</template>
+<script>
+export default {
+    name: 'custom-columns',
+    props: {
+        // treeData: {
+        //     type: Array,
+        //     default: () => []
+        // },
+        // searchValue: {
+        //     type: String,
+        //     default: ''
+        // },
+        visible: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            selectCheckboxData: ['花费', '封面曝光数', '行为数', '举报书', '拉黑数', '评论数'],
+            selectLeftList: ['111', '222', '333', '444'],
+            cur: 0,
+            isConNumOne: true,
+            isConNumTwo: true,
+            isConNumThree: true,
+            isConNumFour: true,
+            applyTypeOption: []
+        };
+    },
+    methods: {
+        handleDelTree(item) {
+            console.log(item, 'item');
+            this.applyTypeOption = [];
+        },
+        handleChangeBox(val) {
+            console.log(val, 'checkboc111');
+            this.applyTypeOption = val;
+        },
+        handleSelectNum(index) {
+            this.cur = index;
+            if (index === 0) {
+                this.isConNumOne = true;
+                this.isConNumTwo = true;
+                this.isConNumThree = true;
+                this.isConNumFour = true;
+            }
+            else if (index === 1) {
+                this.isConNumOne = false;
+                this.isConNumTwo = true;
+                this.isConNumThree = true;
+                this.isConNumFour = true;
+            }
+            else if (index === 2) {
+                this.isConNumOne = false;
+                this.isConNumTwo = false;
+                this.isConNumThree = true;
+                this.isConNumFour = true;
+            }
+            else if (index === 3) {
+                this.isConNumOne = false;
+                this.isConNumTwo = false;
+                this.isConNumThree = false;
+                this.isConNumFour = true;
+            }
+        },
+        handleOk() {
+            console.log('这个是确定按钮');
+        },
+        handleCancel() {
+            console.log('这个是取消按钮');
+            this.$emit('cancelClick', false);
+        },
+        onChange(e) {
+            console.log(e.target.value, '---------');
+        },
+        handleClearAll() {
+            console.log('清空全部按钮事件');
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+    @import "custom-columns";
+</style>

+ 3 - 0
src/views/modules/stockWatch/modules/keep-manage/keep-manage.less

@@ -0,0 +1,3 @@
+.keep-manage-content {
+    
+}

+ 13 - 0
src/views/modules/stockWatch/modules/keep-manage/keep-manage.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="keep-manage-content">
+        这个是运营经理的页面
+    </div>
+</template>
+<script>
+export default {
+    name: 'keep-manage'
+};
+</script>
+<style lang="less" scoped>
+    @import "keep-manage";
+</style>

+ 102 - 0
src/views/modules/stockWatch/modules/keep-person/keep-person.less

@@ -0,0 +1,102 @@
+.keep-person-main {
+    .keep-person-header {
+        display: flex;
+        justify-content: space-between;
+        height: 120px;
+        background: #fff;
+        margin-bottom: 15px;
+        .person-header-left {
+            display: flex;
+            align-items: center;
+            .header-left-img {
+                margin-left: 20px;
+                margin-right: 20px;
+                width: 60px;
+                height:60px;
+                img {
+                    width: 100%;
+                }
+            }
+            .header-left-title {
+                height: 50px;
+                line-height: 50px;
+                font-size: 20px;
+                .left-title-radio {
+                    margin-left: 30px;
+                    color: #1afa29;
+                    .title-radio-img {
+                        width: 25px;
+                        height: 25px;
+                        margin-bottom: 5px;
+                        margin-right: 5px;
+                    }
+                }
+                .left-title-radio-down {
+                    margin-left: 30px;
+                    color: #d81e06;
+                    .title-radio-img {
+                        width: 25px;
+                        height: 25px;
+                        margin-bottom: 5px;
+                        margin-right: 5px;
+                    }
+                }
+            }
+        }
+        .person-header-right {
+            display: flex;
+            align-items: center;
+            text-align: center;
+            margin-right: 20px;
+            .header-right-msg {
+                font-size: 20px;
+                margin-right: 60px;
+                .right-msg-class {
+                    height: 50px;
+                    line-height: 50px;
+                    .title-radio-img {
+                        width: 25px;
+                        height: 25px;
+                        margin-bottom: 5px;
+                        margin-right: 5px;
+                    }
+                    .msg-ranking {
+                        font-size: 30px;
+                    }
+                }
+                .msg-class-up {
+                    color: #1afa29;
+                }
+                .msg-class-down {
+                    color: #d81e06;
+                }
+            }
+        }
+    }
+    .keep-person-content {
+        .person-content-title {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 60px;
+            background: #fff;
+            padding: 0 20px;
+            .content-title-acount {
+                font-size: 20px;
+            }
+            .content-title-checkout {
+                .title-checkout-custom {
+                    cursor: pointer;
+                }
+                .title-checkout-time {
+                    margin-left: 20px;
+                }
+            }
+        }
+        .pagin-table-class {
+            display: flex;
+            justify-content: flex-end;
+            margin-top: 20px;
+        }
+    }
+}

+ 140 - 0
src/views/modules/stockWatch/modules/keep-person/keep-person.vue

@@ -0,0 +1,140 @@
+<template>
+    <div class="keep-person-main">
+        <div class="keep-person-header">
+            <div class="person-header-left">
+                <div class="header-left-img"><img src="@/assets/daiban.png" alt=""></div>
+                <div>
+                    <div class="header-left-title">早安,antdesign,祝你开心每一天</div>
+                    <div class="header-left-title">
+                        <span>今日消耗:</span>
+                        <span>1000000</span>
+                        <span class="left-title-radio"><img class="title-radio-img" src="@/assets/up.png" alt="">10.765%</span>
+                        <!-- <span class="left-title-radio-down"><img class="title-radio-img" src="@/assets/down.png" alt="">10.765%</span> -->
+                    </div>
+                </div>
+            </div>
+            <div class="person-header-right">
+                <div class="header-right-msg">
+                    <div class="right-msg-class">周消耗环比</div>
+                    <div class="right-msg-class msg-class-up"><img class="title-radio-img" src="@/assets/up.png" alt="">23.98%</div>
+                    <!-- <div class="right-msg-class msg-class-down"><img class="title-radio-img" src="@/assets/down.png" alt="">23.98%</div> -->
+                </div>
+                <div class="header-right-msg">
+                    <div class="right-msg-class">本周消耗</div>
+                    <div class="right-msg-class">4356345635</div>
+                </div>
+                <div class="header-right-msg">
+                    <div class="right-msg-class">上周消耗</div>
+                    <div class="right-msg-class">45654567567</div>
+                </div>
+                <div class="header-right-msg">
+                    <div class="right-msg-class">团队内排名</div>
+                    <div class="right-msg-class"><span class="msg-ranking">8</span> / 24</div>
+                </div>
+            </div>
+        </div>
+        <div class="keep-person-content">
+            <div class="person-content-title">
+                <div class="content-title-acount">账户列表</div>
+                <div class="content-title-checkout">
+                    <span class="title-checkout-custom"><a @click="handleCustomClick">自定义列</a></span>
+                    <span class="title-checkout-time"><a-date-picker @change="handleDataPicker" /></span>
+                </div>
+            </div>
+            <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>
+        <custom-columns :visible="isCustomVisible" @cancelClick="handleCancelClick"></custom-columns>
+    </div>
+</template>
+<script>
+import CustomColumns from '../custom-columns/custom-columns';
+export default {
+    name: 'keep-person',
+    components: {
+        CustomColumns
+    },
+    data() {
+        return {
+            isCustomVisible: false,
+            totalAll: 100,
+            dataSource: [],
+            columns: [
+                {
+                    title: '人群包名称',
+                    width: 200,
+                    ellipsis: true,
+                    dataIndex: 'orientationName'
+                },
+                {
+                    title: '人群包类型',
+                    align: 'center',
+                    dataIndex: 'populationType'
+                },
+                {
+                    title: '匹配类型',
+                    align: 'center',
+                    dataIndex: 'typeStr'
+                },
+                {
+                    title: '上传时间',
+                    dataIndex: 'statDate',
+                    align: 'center'
+                }
+            ]
+        };
+    },
+    methods: {
+        handleDataPicker(date, dateString) {
+            console.log(date, dateString, '-------');
+        },
+        handleCustomClick () {
+            console.log('这个是自定义列的点击事件');
+            this.isCustomVisible = true;
+        },
+        onShowSizeChange(current, pageSize) {
+            console.log(current, pageSize, 'current, pageSize');
+        },
+        handleCauseSizeChange(current, pageSize) {
+            console.log(current, pageSize, 'size-size');
+        },
+        handleCancelClick(status) {
+            this.isCustomVisible = status;
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+    @import "keep-person";
+</style>