Skip to content

D
document-management
Commit af2a94a2 by lxyang
Options

feat：提交

parent ea6c5f86
Showing with 850 additions and 973 deletions
src/assets/icons/svg/search-new.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M6.24412,1.25 L11.707297,1.25 C12.0429629,1.25 12.364524,1.38500024 12.5995946,1.62461143 L17.1424186,6.25518441 C17.3714709,6.48866117 17.4998891,6.80261493 17.5001204,7.12968767 L17.5057602,15.0971675 C17.5057602,15.8279705 16.8556941,16.25 16.26158,16.25 L6.2499404,16.25 C5.65590262,16.25 5.00593036,15.8285213 5.00576079,15.0978959 L4.9999404,2.4023889 C4.9999404,1.67158462 5.65000713,1.25 6.24412,1.25 Z M6.25571609,15 L16.2556911,15 L16.2503946,7.51594365 L11.2500447,7.51594365 L11.2500447,2.5 L6.2499851,2.5 L6.25571609,15 Z M15.4018772,6.26594365 L12.5000453,6.26594365 L12.5000453,3.30806032 L15.4018772,6.26594365 Z M2.5,17.5159454 C2.5,18.2063031 3.05964559,18.7659442 3.75,18.7659442 L13.75,18.7659442 L13.75,17.5159442 L3.75,17.5159454 L3.75,6.25001669 L2.5,6.25001669 L2.5,17.5159454 Z" id="file-copy"></path>
</svg>
\ No newline at end of file
src/assets/icons/svg/search.svg
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M124.884 109.812L94.256 79.166c-.357-.357-.757-.629-1.129-.914a50.366 50.366 0 0 0 8.186-27.59C101.327 22.689 78.656 0 50.67 0 22.685 0 0 22.688 0 50.663c0 27.989 22.685 50.663 50.656 50.663 10.186 0 19.643-3.03 27.6-8.201.286.385.557.771.9 1.114l30.628 30.632a10.633 10.633 0 0 0 7.543 3.129c2.728 0 5.457-1.043 7.543-3.115 4.171-4.157 4.171-10.915.014-15.073M50.671 85.338C31.557 85.338 16 69.78 16 50.663c0-19.102 15.557-34.661 34.67-34.661 19.115 0 34.657 15.559 34.657 34.675 0 19.102-15.557 34.661-34.656 34.661"/></svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M6.24412,1.25 L11.707297,1.25 C12.0429629,1.25 12.364524,1.38500024 12.5995946,1.62461143 L17.1424186,6.25518441 C17.3714709,6.48866117 17.4998891,6.80261493 17.5001204,7.12968767 L17.5057602,15.0971675 C17.5057602,15.8279705 16.8556941,16.25 16.26158,16.25 L6.2499404,16.25 C5.65590262,16.25 5.00593036,15.8285213 5.00576079,15.0978959 L4.9999404,2.4023889 C4.9999404,1.67158462 5.65000713,1.25 6.24412,1.25 Z M6.25571609,15 L16.2556911,15 L16.2503946,7.51594365 L11.2500447,7.51594365 L11.2500447,2.5 L6.2499851,2.5 L6.25571609,15 Z M15.4018772,6.26594365 L12.5000453,6.26594365 L12.5000453,3.30806032 L15.4018772,6.26594365 Z M2.5,17.5159454 C2.5,18.2063031 3.05964559,18.7659442 3.75,18.7659442 L13.75,18.7659442 L13.75,17.5159442 L3.75,17.5159454 L3.75,6.25001669 L2.5,6.25001669 L2.5,17.5159454 Z" id="file-copy"></path>
</svg>
\ No newline at end of file
src/assets/icons/svg/server-new.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Bace基础/3.Icon图标/其他/server/white</title>
<path d="M5,6.5625 L5,5.3125 L8.75,5.3125 L8.75,6.5625 L5,6.5625 Z M2.50030518,2.5 L17.5003052,2.5 C17.8454173,2.5 18.1252122,2.77971875 18.1253052,3.1248305 L18.1264925,8.74985218 C18.1266618,9.09509659 17.8467369,9.37502205 17.5014925,9.37502205 L2.50149243,9.37502205 C2.15638068,9.37502205 1.87658564,9.09530342 1.87649202,8.75019133 L1.87530518,3.1251698 C1.87530518,2.77992561 2.15506099,2.5 2.50030518,2.5 Z M3.12547475,3.75 L16.8754745,3.75 L16.8763232,8.12502205 L3.12632248,8.12502205 L3.12547475,3.75 Z M8.7501353,14.6875 L8.7501353,13.4375 L5.0001356,13.4375 L5.0001356,14.6875 L8.7501353,14.6875 Z M2.50166148,10.6250173 L17.5016618,10.6250173 C17.8468394,10.6250173 18.1266618,10.9048396 18.1266618,11.2500173 L18.1266618,16.875 C18.1266618,17.2201777 17.8468394,17.5 17.5016618,17.5 L2.50166193,17.5 C2.15648398,17.5 1.87666151,17.2201777 1.87666151,16.875 L1.87666151,11.2500173 C1.87666151,10.904839 2.15648357,10.6250173 2.50166148,10.6250173 Z M3.12666148,11.8750173 L16.8766618,11.8750173 L16.8766618,16.25 L3.12666148,16.25 L3.12666148,11.8750173 Z" id="server"></path>
</svg>
\ No newline at end of file
src/assets/icons/svg/server.svg
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1547360688278" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M890 120H134a70 70 0 0 0-70 70v500a70 70 0 0 0 70 70h756a70 70 0 0 0 70-70V190a70 70 0 0 0-70-70z m-10 520a40 40 0 0 1-40 40H712V448a40 40 0 0 0-80 0v232h-80V368a40 40 0 0 0-80 0v312h-80V512a40 40 0 0 0-80 0v168H184a40 40 0 0 1-40-40V240a40 40 0 0 1 40-40h656a40 40 0 0 1 40 40zM696 824H328a40 40 0 0 0 0 80h368a40 40 0 0 0 0-80z" fill="#bfbfbf" p-id="6718"></path></svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Bace基础/3.Icon图标/其他/server/white</title>
<g id="全局" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="icon" transform="translate(-422.000000, -172.000000)">
<g id="1.Bace基础/3.Icon图标/其他/server/white" transform="translate(422.000000, 172.000000)">
<path d="M0,0 L20,0 L20,20 L0,20 Z" id="server-(Background)"></path>
<path d="M5,6.5625 L5,5.3125 L8.75,5.3125 L8.75,6.5625 L5,6.5625 Z M2.50030518,2.5 L17.5003052,2.5 C17.8454173,2.5 18.1252122,2.77971875 18.1253052,3.1248305 L18.1264925,8.74985218 C18.1266618,9.09509659 17.8467369,9.37502205 17.5014925,9.37502205 L2.50149243,9.37502205 C2.15638068,9.37502205 1.87658564,9.09530342 1.87649202,8.75019133 L1.87530518,3.1251698 C1.87530518,2.77992561 2.15506099,2.5 2.50030518,2.5 Z M3.12547475,3.75 L16.8754745,3.75 L16.8763232,8.12502205 L3.12632248,8.12502205 L3.12547475,3.75 Z M8.7501353,14.6875 L8.7501353,13.4375 L5.0001356,13.4375 L5.0001356,14.6875 L8.7501353,14.6875 Z M2.50166148,10.6250173 L17.5016618,10.6250173 C17.8468394,10.6250173 18.1266618,10.9048396 18.1266618,11.2500173 L18.1266618,16.875 C18.1266618,17.2201777 17.8468394,17.5 17.5016618,17.5 L2.50166193,17.5 C2.15648398,17.5 1.87666151,17.2201777 1.87666151,16.875 L1.87666151,11.2500173 C1.87666151,10.904839 2.15648357,10.6250173 2.50166148,10.6250173 Z M3.12666148,11.8750173 L16.8766618,11.8750173 L16.8766618,16.25 L3.12666148,16.25 L3.12666148,11.8750173 Z" id="server" fill="#FFFFFF"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/styles/index.scss
......@@ -122,7 +122,7 @@ aside {
//main-container全局样式
.app-container {
padding: 20px;
padding: 0;
}
.components-container {
......
src/assets/styles/sidebar.scss
......@@ -27,6 +27,9 @@
.scrollbar-wrapper {
overflow-x: hidden !important;
background: #fff;
padding-top: 16px;
border-right: 2px solid rgba(231, 231, 231, 1);
}
.el-scrollbar__bar.is-vertical {
......@@ -39,7 +42,7 @@
&.has-logo {
.el-scrollbar {
height: calc(100% - 50px);
height: calc(100% - 64px);
}
}
......@@ -54,7 +57,9 @@
}
.svg-icon {
margin-right: 16px;
margin-right: 4px;
font-size: 18px;
vertical-align: middle;
}
.el-menu {
......@@ -70,10 +75,33 @@
background-color: $menuHover !important;
}
}
.el-submenu__title {
padding: 0 !important;
height: 36px;
background: #0052D9 !important;
}
.is-active>.el-submenu__title {
padding: 0;
color: $subMenuActiveText !important;
}
.menu-wrapper {
background: #fff;
.el-menu-item {
margin: 0 8px 4px 8px;
height: 36px;
line-height: 36px;
width: 192px;
border-radius: 3px;
padding: 0 16px;
color: rgba(0, 0, 0, 0.6000) !important;
background: #fff !important;
&:hover, &.is-active {
color: #fff !important;
background: #0052D9 !important;
}
}
}
& .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item {
......
src/assets/styles/variables.scss
......@@ -19,7 +19,7 @@ $menuHover:#263445;
$subMenuBg:#1f2d3d;
$subMenuHover:#001528;
$sideBarWidth: 200px;
$sideBarWidth: 208px;
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
......
src/layout/components/AppMain.vue
......@@ -38,7 +38,7 @@ export default {
.hasTagsView {
.app-main {
/* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 104px);
min-height: calc(100vh - 64px);
}
.fixed-header+.app-main {
......
src/layout/components/Navbar.vue
<template>
<div class="navbar">
<div class="menu-item active">智能文档监测</div>
<div class="menu-item" @click="hint('探真')">探真</div>
<div class="menu-item" @click="hint('微舆情')">微舆情</div>
<div class="icon"><img class="icon-img" src="../../assets/image/user-circle.png" alt=""></div>
<div class="icon"><img class="icon-img" src="../../assets/image/phone.png" alt=""></div>
<div class="icon"><img class="icon-img" src="../../assets/image/message.png" alt=""></div>
<!-- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> -->
......@@ -81,6 +87,12 @@ export default {
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
},
hint(item) {
this.$message({
message: `${item}尽请期待！`,
type: 'warning'
});
},
async logout() {
this.$confirm('确定注销并退出系统吗？', '提示', {
confirmButtonText: '确定',
......@@ -98,17 +110,40 @@ export default {
<style lang="scss" scoped>
.navbar {
height: 50px;
height: 64px;
padding: 0 32px 0 16px;
background: #2C2C2C;
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
.icon {
float: right;
height: 22px;
margin: 21px 0 21px 24px;
cursor: pointer;
.icon-img {
height: 22px;
}
}
.menu-item {
margin: 12px 2px;
float: left;
font-size: 14px;
padding: 12px 24px;
color: rgba(255,255,255,0.55);
border-radius: 3px;
cursor: pointer;
&:hover, &.active {
background: #5E5E5E;
color: rgba(255,255,255,0.9);
}
}
.hamburger-container {
line-height: 46px;
line-height: 64px;
height: 100%;
float: left;
cursor: pointer;
color: #fff;
transition: background .3s;
-webkit-tap-highlight-color:transparent;
......
src/layout/components/Sidebar/Logo.vue
......@@ -46,9 +46,9 @@ export default {
.sidebar-logo-container {
position: relative;
width: 100%;
height: 50px;
line-height: 50px;
background: #2b2f3a;
height: 64px;
line-height: 64px;
background: #2C2C2C;
text-align: center;
overflow: hidden;
......
src/layout/components/TagsView/index.vue
<template>
<div id="tags-view-container" class="tags-view-container">
<scroll-pane ref="scrollPane" class="tags-view-wrapper">
<router-link
<!-- <scroll-pane ref="scrollPane" class="tags-view-wrapper"> -->
<!-- <router-link
v-for="tag in visitedViews"
ref="tag"
:key="tag.path"
......@@ -15,7 +15,7 @@
{{ tag.title }}
<span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
</router-link>
</scroll-pane>
</scroll-pane> -->
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
<li @click="refreshSelectedTag(selectedTag)">刷新页面</li>
<li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭当前</li>
......@@ -26,11 +26,11 @@
</template>
<script>
import ScrollPane from './ScrollPane'
// import ScrollPane from './ScrollPane'
import path from 'path'
export default {
components: { ScrollPane },
// components: { ScrollPane },
data() {
return {
visible: false,
......
src/layout/index.vue
......@@ -5,7 +5,7 @@
<div :class="{hasTagsView:needTagsView}" class="main-container">
<div :class="{'fixed-header':fixedHeader}">
<navbar />
<tags-view v-if="needTagsView" />
<!-- <tags-view v-if="needTagsView" /> -->
</div>
<app-main />
<right-panel v-if="showSettings">
......
src/router/index.js
......@@ -69,14 +69,14 @@ export const constantRoutes = [
{
path: '',
component: Layout,
name: '搜索',
name: '搜索文档',
redirect: 'index',
children: [
{
path: 'index',
component: () => import('@/views/index'),
name: '搜索',
meta: { title: '搜索', icon: 'log', noCache: true, affix: true }
name: '搜索文档',
meta: { title: '搜索文档', icon: 'search-new', noCache: true, affix: true }
}
]
},
......@@ -113,7 +113,7 @@ export const constantRoutes = [
component: Layout,
name: '文档管理',
meta: {
icon: 'system',
icon: 'server-new',
title: '文档管理'
},
path: '/documentManagement',
......@@ -122,29 +122,34 @@ export const constantRoutes = [
component: () => import('@/views/dataList/dashboard/index'),
meta: {
icon: '',
title: '跟踪文档'
title: '搜索文档详情'
},
name: 'tailAfter',
path: 'tailAfter'
path: 'tailAfter',
hidden: true
},
{
component: () => import('@/views/system/customer/index'),
meta: {
icon: '',
title: '任务列表'
title: '跟踪文档'
},
name: 'taskList',
path: 'taskList'
path: 'taskList',
props: {
default: false
}
// {
// component: () => import('@/views/dataList/product/index'),
// meta: {
// icon: '',
// title: '客户投放数据'
// },
// name: 'Product',
// path: 'Product'
// },
},
{
component: () => import('@/views/dataList/product/index'),
meta: {
icon: '',
title: '跟踪文档详情'
},
name: 'taskListDetails',
path: 'taskListDetails',
hidden: true
},
// {
// component: () => import('@/views/dataList/putIn/index'),
// meta: {
......
src/views/dataList/dashboard/index.vue
<template>
<div class="app-container">
<el-input placeholder="例如：腾讯" @keyup.enter.native="searchDocument" v-model="search" class="input-with-select">
<el-button slot="append" @click="searchDocument">搜索</el-button>
<div class="app-header">
<div class="search-logo"></div>
<el-input prefix-icon="el-icon-search" placeholder="例如：腾讯" @keyup.enter.native="searchDocument" v-model="search" class="input-with-select">
<el-button slot="append" @click="searchDocument">搜索文档</el-button>
</el-input>
</div>
<div class="content">
<div class="solid content-left scroll">
<div class="content-left scroll">
<div v-if="loadingLeft" class="content-right-content loading loading-left">
<div class="loading-div">
<i class="el-icon-loading loading-center"></i>
......@@ -14,31 +17,24 @@
<div class="content-left-center scroll">
<div v-if="!listLeft.length && !loadingLeft" class="not-data">暂无数据</div>
<div class="left-content" v-for="(item, index) in listLeft" :key="index">
<div class="left-content-title">{{item.media}}</div>
<div class="left-content-title">
<div class="logo"><img src="../../../assets/image/juliang.png" alt="" class="logo-img"></div>
<span class="media text">{{item.media}}</span>
<span class="text">更新日期：{{item.data}}</span>
</div>
<div class="content-text-header">
<a class="link" v-if="item.link" :href="item.link" target="_Blank">{{item.title}}</a>
<a class="link" v-if="item.link" :href="item.link" target="_blank">{{item.title}}</a>
<span v-else>{{item.title}}</span>
</div>
<div v-for="(items, index) in item.content" :key="index" class="content-text">{{items}}</div>
</div>
<div class="add-more" v-if="loadMoreLeft && listLeft.length" @click="seatchInitLeft"><span v-if="loadingLeft">加载中</span><span v-else>加载更多</span></div>
</div>
</div>
<div class="solid content-right">
<div class="change">近期变化</div>
<div v-if="loadingRight" class="content-right-content loading">
<div class="loading-div">
<i class="el-icon-loading loading-center"></i>
<div>加载中...</div>
</div>
<p v-for="(items, index) in item.content" :key="index" class="content-text" v-html="items.contentText"></p>
</div>
<div class="content-right-content scroll">
<div v-if="!listRight.length && !loadingRight" class="not-data">暂无数据</div>
<div class="right-content" v-for="(item, index) in listRight" :key="index">
<div class="content-text-header">{{item.media}}</div>
<div class="content-text" v-for="(items, index) in item.content" :key="index">{{index + 1}}. {{items}}</div>
</div>
<div class="add-more" v-if="loadMoreRight && listRight.length" @click="seatchInitRight"><span v-if="loadingRight">加载中</span><span v-else>加载更多</span></div>
<pagination v-show="queryParamsLeft.pageContent>0 && loadMoreLeft && listLeft.length"
:total="queryParamsLeft.pageContent"
:page.sync="queryParamsLeft.pageNo"
:limit.sync="queryParamsLeft.pageSize"
layout="total, prev, pager, next"
@pagination="seatchInitLeft" />
<!-- <div class="add-more" v-if="loadMoreLeft && listLeft.length" @click="seatchInitLeft"><span v-if="loadingLeft">加载中</span><span v-else>加载更多</span></div> -->
</div>
</div>
</div>
......@@ -52,27 +48,20 @@ export default {
return {
search: '',
loadingLeft: false,
loadingRight: false,
loadMoreLeft: true,
loadMoreRight: true,
queryParamsLeft: {
pageNo: 1,
pageSize: 10,
pageContent: 0
},
queryParamsRight: {
pageNo: 1,
pageSize: 10,
pageContent: 0
},
listLeft: [],
listRight: []
listLeft: []
}
},
watch: {},
created() {
if (this.$route.query.search) {
this.search = this.$route.query.search
console.log(this.$route.params.search)
if (this.$route.params.search) {
this.search = this.$route.params.search
this.searchDocument()
} else {
this.clearData()
......@@ -92,20 +81,60 @@ export default {
return
}
this.seatchInitLeft()
this.seatchInitRight()
},
// 搜索左侧
seatchInitLeft() {
this.loadingLeft = true
// listCustomer(this.queryParams)
// .then(response => {
if (this.queryParamsLeft.pageContent === 0) {
this.queryParamsLeft.pageContent = 100
this.queryParamsLeft.pageContent = 0
for (let i = 0; i < 10; i++) {
this.listLeft.push({
media: '巨量' + (i + 1),
let data = {
media: '巨量引擎',
title: '巨量引擎开放平台' + (i + 1),
data: '2022-10-18',
link: 'https://ad.oceanengine.com/pages/login/index.html?source=oceanengine',
content: ['视频或直播加热的功能，提升视频或直播间热度。','视频或直播加热的功能，提升视频或直播间热度。']
})
content: [
{
contentText: '通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。1234', // 这是完整的一段话
contentChange:[ // 这段话里有多少变化以及链接出处
{
text: '或使用v-model',
url: 'https://www.baidu.com/'
},
{
text: '输入框内显示的值',
url: 'https://www.cnblogs.com/1234wu/p/11055005.html'
},
]
},
{
contentText: '视频或直播加热的功能，提升视频或直播间热度。121212', // 这是完整的一段话
contentChange: [
{
text: '提升视频或直播间热度',
url: 'https://element.eleme.io/#/zh-CN/component/pagination#events'
},
]
}
]
}
let content = data.content
for (let a = 0; a < content.length; a++) {
let contentChange = content[a].contentChange
for (let b = 0; b < contentChange.length; b++) {
let text = contentChange[b].text
let url = contentChange[b].url
if (content[a].contentText.indexOf(text) >= 0) {
let values = content[a].contentText.split(text);
content[a].contentText = values.join(
`<a style="color: rgba(250, 0, 0, 1);" href="${url}" target="_blank">${text}</a>`
)
}
}
}
this.listLeft.push(data)
}
} else {
let page = this.queryParamsLeft.pageNo + 1
......@@ -117,71 +146,36 @@ export default {
} else {
this.loadMoreLeft = true
}
this.listLeft = []
for (let i = orderSize; i < number; i++) {
this.listLeft.push({
media: '巨量' + (i + 1),
title: '巨量引擎开放平台' + (i + 1),
data: '2022-10-18',
link: 'https://ad.oceanengine.com/pages/login/index.html?source=oceanengine',
content: ['视频或直播加热的功能，提升视频或直播间热度。','视频或直播加热的功能，提升视频或直播间热度。']
})
}
this.queryParamsLeft.pageNo = page
// })
// .catch(error => {
// this.loading = false;
// });
}
setTimeout(() => {
this.loadingLeft = false
}, 1000);
},
// 搜索右侧
seatchInitRight() {
this.loadingRight = true
if (this.queryParamsRight.pageContent === 0) {
this.queryParamsRight.pageContent = 100
for (let i = 0; i < 10; i++) {
this.listRight.push({
media: '巨量' + (i + 1),
content: ['企业抖音长效经营阵地，沉淀企业内容，展示品牌形象','企业抖音长效经营阵地，沉淀企业内容，展示品牌形象']
})
}
} else {
let page = this.queryParamsRight.pageNo + 1
let orderSize = this.queryParamsRight.pageNo * this.queryParamsRight.pageSize
let number = page * this.queryParamsRight.pageSize
let content = this.queryParamsRight.pageContent
if (number >= content) {
this.loadMoreRight = false
} else {
this.loadMoreRight = true
}
for (let i = orderSize; i < number; i++) {
this.listRight.push({
media: '巨量' + (i + 1),
content: ['企业抖音长效经营阵地，沉淀企业内容，展示品牌形象','企业抖音长效经营阵地，沉淀企业内容，展示品牌形象']
})
}
this.queryParamsRight.pageNo = page
}
setTimeout(() => {
this.loadingRight = false
}, 1000);
},
// 数据初始化
clearData() {
this.loadMoreLeft = true
this.loadMoreRight = true
this.loadingLeft = false
this.loadingRight = false
this.queryParamsLeft = {
pageNo: 1,
pageSize: 10,
pageContent: 0
}
this.queryParamsRight = {
pageNo: 1,
pageSize: 10,
pageContent: 0
}
this.listLeft = []
this.listRight = []
}
}
}
......
src/views/dataList/product/index.vue
<template>
<div class="app-container">
<!-- 筛选项 -->
<!-- 头部 -->
<div class="seachData" ref="seachDatas">
<el-form :inline="true">
<div class="seachData-left">
<el-form-item label="日期">
<el-date-picker v-model="searchDateRange"
size="small"
style="width: 220px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"></el-date-picker>
</el-form-item>
<el-form-item label="媒体">
<el-select v-model="queryParams.filtering.mediaCode"
:placeholder="mediaCode.placeholder"
clearable
size="small"
style="width: 220px">
<el-option v-for="dict in mediaCode.data"
:key="dict.value"
:label="dict.name"
:value="dict.value" />
</el-select>
</el-form-item>
<el-form-item label="客户区域">
<el-select v-model="queryParams.filtering.customerArea"
clearable
placeholder="请选择客户区域">
<el-option v-for="item in customerAreaOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="客户类型">
<el-select v-model="queryParams.filtering.customerType"
clearable
placeholder="请选择客户类型">
<el-option v-for="item in customerTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="数据来源">
<el-select v-model="queryParams.filtering.source"
clearable
:placeholder="sourceOptions.placeholder">
<el-option v-for="item in sourceOptions.data"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="应用包名">
<el-input v-model="queryParams.filtering.appPackageName"
placeholder="请输入应用包名"
clearable
size="small"
style="width: 220px"
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="应用名称">
<el-input v-model="queryParams.filtering.appName"
placeholder="请输入应用名称"
clearable
size="small"
style="width: 220px"
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="客户编号">
<el-input v-model="customerId"
placeholder="输入多个客户编号时用，隔开"
clearable
size="small"
style="width: 220px"
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="客户名称">
<el-input v-model="queryParams.filtering.customerName"
placeholder="请输入客户名称"
clearable
size="small"
style="width: 220px"
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="细分项">
<el-select v-model="groupBy"
multiple
collapse-tags
:placeholder="groupByOptions.placeholder">
<el-option v-for="item in groupByOptions.data"
:key="item.value"
:label="item.name"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<i class="el-icon-arrow-left left-span" @click="blackTaskList"></i>
<span>{{title ? title + '文档跟踪报告' : '文档跟踪报告'}}</span>
</div>
<div class="seachData-right">
<el-form-item class="active">
<el-button type="primary"
size="mini"
@click="handleQuery">筛选</el-button>
<el-button type="text"
size="mini"
@click="resetHandleQuery">重置筛选</el-button>
</el-form-item>
</div>
<div class="seachData-next-line">
<div class="seachData-next-div left-div">
<div class="content">
<div class="content-left scroll">
<div v-if="loading" class="content-right-content loading loading-left">
<div class="loading-div">
<i class="el-icon-loading loading-center"></i>
<div>加载中...</div>
</div>
</div>
<div class="content-left-center scroll">
<div v-if="deleteCenter.length && !loading">
<div class="delete-center" v-for="(item, index) in deleteCenter" :key="index">
<div class="title">
<span>更新日期:</span>
<span class="time">{{item.data}}</span>
<span>共{{item.change}}处更新</span>
</div>
<div class="center">
<div class="center-delete">
<div class="center-delete-tab green">新版</div>
<div class="center-delete-text" v-for="(items, indexs) in item.content" :key="indexs" v-html="items.contentText"></div>
</div>
<div class="center-delete">
<div class="center-delete-tab gray">旧版</div>
<div class="center-delete-text" v-for="(items, indexs) in item.contentOld" :key="indexs" v-html="items.contentText"></div>
</div>
</div>
</div>
</div>
<div class="none" v-else-if="!deleteCenter.length && !loading">
暂无数据
</div>
<div class="seachData-next-div right-div">
<el-button type="primary"
size="mini"
:disabled="downloadLoading"
:loading="downloadLoading"
@click="handleDownload">下载报表</el-button>
</div>
</div>
</el-form>
</div>
<el-table class="seachTable" v-loading="loading"
:data="customerList"
:height="tableHeightCount"
:default-sort="{prop: 'asc', order: 'desc'}"
ref="customerListHeight"
border>
<el-table-column fixed="left"
label="日期"
align="left"
prop="dateInt"
:key="'dateInt'"
sortable
width="200">
<template slot-scope="scope">
<span>{{ scope.row.dateInt ? scope.row.dateInt : '-' }}</span>
</template>
</el-table-column>
<el-table-column fixed="left"
label="媒体"
align="left"
prop="mediaCode"
:key="Math.random()"
v-if="queryParams.groupBy.mediaCode"
min-width="90">
<template slot-scope="scope">
<span>{{ scope.row.mediaCode }}</span>
</template>
</el-table-column>
<el-table-column fixed="left"
label="客户名称"
align="left"
prop="customerName"
:key="Math.random()"
v-if="queryParams.groupBy.customerName"
:show-overflow-tooltip="true"
min-width="200">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.customerName ? scope.row.customerName : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="客户编号"
align="left"
prop="customerId"
:key="Math.random()"
v-if="queryParams.groupBy.customerId"
:show-overflow-tooltip="true"
min-width="200">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.customerId ? scope.row.customerId : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="客户区域"
align="left"
prop="customerArea"
:key="Math.random()"
v-if="queryParams.groupBy.customerArea"
:show-overflow-tooltip="true"
min-width="90">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.customerArea ? scope.row.customerArea : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="客户类型"
align="left"
prop="customerType"
:key="Math.random()"
v-if="queryParams.groupBy.customerType"
:show-overflow-tooltip="true"
min-width="90">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ typeText(scope.row.customerType) ? typeText(scope.row.customerType) : '-'}}</div>
</template>
</el-table-column>
<el-table-column label="资质主体名称"
align="left"
prop="corporationName"
:key="Math.random()"
v-if="queryParams.groupBy.corporationName"
:show-overflow-tooltip="true"
min-width="90">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.corporationName ? scope.row.corporationName : '-'}}</div>
</template>
</el-table-column>
<el-table-column label="一级行业"
align="left"
prop="firstIndustryName"
:key="Math.random()"
v-if="queryParams.groupBy.firstIndustryName"
:show-overflow-tooltip="true"
min-width="90">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.firstIndustryName ? scope.row.firstIndustryName : '-'}}</div>
</template>
</el-table-column>
<el-table-column label="二级行业"
align="left"
prop="secondIndustryName"
:key="Math.random()"
v-if="queryParams.groupBy.secondIndustryName"
:show-overflow-tooltip="true"
min-width="90">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.secondIndustryName ? scope.row.secondIndustryName : '-'}}</div>
</template>
</el-table-column>
<el-table-column label="应用包名"
align="left"
prop="appPackageName"
:key="Math.random()"
v-if="queryParams.groupBy.appPackageName"
:show-overflow-tooltip="true"
min-width="90">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.appPackageName ? scope.row.appPackageName : '-'}}</div>
</template>
</el-table-column>
<el-table-column label="应用名称"
align="left"
prop="appName"
:key="Math.random()"
v-if="queryParams.groupBy.appName"
:show-overflow-tooltip="true"
min-width="90">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.appName ? scope.row.appName : '-'}}</div>
</template>
</el-table-column>
<el-table-column label="数据来源"
align="left"
prop="source"
:key="Math.random()"
v-if="queryParams.groupBy.source"
:show-overflow-tooltip="true"
min-width="90">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ typeTextSource(scope.row.source)}}</div>
</template>
</el-table-column>
<el-table-column label="有消耗计划总数"
align="right"
prop="costAboveZeroPlanNum"
:key="'costAboveZeroPlanNum'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.costAboveZeroPlanNum ? scope.row.costAboveZeroPlanNum : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="新增计划数"
align="right"
prop="newPlanNum"
:key="'newPlanNum'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.newPlanNum ? scope.row.newPlanNum : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="新增且有消耗的计划数"
align="right"
prop="costAboveZeroNewPlanNum"
:key="'costAboveZeroNewPlanNum'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.costAboveZeroNewPlanNum ? scope.row.costAboveZeroNewPlanNum : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="消耗"
align="right"
prop="cost"
:key="'cost'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.cost ? scope.row.cost : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="展示"
align="right"
prop="show"
:key="'show'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.show ? scope.row.show : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="点击"
align="right"
prop="click"
:key="'click'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.click ? scope.row.click : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="点击率"
align="right"
prop="clickRate"
:key="'clickRate'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.clickRate ? scope.row.clickRate : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="点击成本"
align="right"
prop="cpc"
:key="'cpc'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.cpc ? scope.row.cpc : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="平均千次展示成本"
align="right"
prop="cpm"
:key="'cpm'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.cpm ? scope.row.cpm : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="转化数"
align="right"
prop="convert"
:key="'convert'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.convert ? scope.row.convert : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="平均转化成本"
align="right"
prop="convertCost"
:key="'convertCost'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.convertCost ? scope.row.convertCost : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="转化率"
align="right"
prop="convertRate"
:key="'convertRate'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.convertRate ? scope.row.convertRate : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="深度转化数"
align="right"
prop="deepConvert"
:key="'deepConvert'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.deepConvert ? scope.row.deepConvert : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="深度转化成本"
align="right"
prop="deepConvertCost"
:key="'deepConvertCost'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.deepConvertCost ? scope.row.deepConvertCost : '-' }}</div>
</template>
</el-table-column>
<el-table-column label="深度转化率"
align="right"
prop="deepConvertRate"
:key="'deepConvertRate'"
sortable
:show-overflow-tooltip="true"
min-width="140">
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ scope.row.deepConvertRate ? scope.row.deepConvertRate : '-' }}</div>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<pagination v-show="total>0"
:total="total"
:page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
@pagination="searchCustomer" />
</div>
</template>
<script>
// 接口调用方法
import {
planPage,
planExport
} from "@/api/system/product";
// 克隆方法
import {
deepClone
} from "@/utils/index";
// 下载方法
import { hackDownloadFileNew } from "@/utils/ruoyi";
// // 接口调用方法
// import {
// planPage,
// planExport
// } from "@/api/system/product";
// // 克隆方法
// import {
// deepClone
// } from "@/utils/index";
// // 下载方法
// import { hackDownloadFileNew } from "@/utils/ruoyi";
export default {
data() {
return {
// 搜索日期范围
searchDateRange: [],
// 表格数据
customerList: [],
// 搜索数据
queryParams: {
pageNo: 1,
pageSize: 10,
sortBy: ['dateInt;desc', 'adsCost;desc'],
filtering: {
startDate: '',
endDate: '',
mediaCode: '',
customerArea: '',
customerType: '',
source: '',
customerId: [],
customerName: '',
appPackageName: '',
appName: ''
},
groupBy: {
"dateInt": true,
"mediaCode": true,
"customerArea": false,
"customerType": false,
"customerId": false,
"customerName": false,
"source": false,
"appPackageName": false,
"appName": false,
"corporationName": false,
"firstIndustryName": false,
"secondIndustryName": false
}
},
// 用户ID
customerId: '',
// 细分项记录
groupBy: ["dateInt", "mediaCode"],
// 细分项枚举值
groupByOptions: {
placeholder: '请选择细分项',
data: [
{ name: "日期", value: "dateInt" },
{ name: "媒体", value: "mediaCode" },
{ name: "客户区域", value: "customerArea" },
{ name: "客户类型", value: "customerType" },
{ name: "客户编号", value: "customerId" },
{ name: "数据来源", value: "source" },
{ name: "应用包名", value: "appPackageName" },
{ name: "应用名称", value: "appName" },
{ name: "资质主体名称", value: "corporationName" },
{ name: "一级行业", value: "firstIndustryName" },
{ name: "二级行业", value: "secondIndustryName" },
{ name: "客户名称", value: "customerName" }
]
},
// 数据来源
sourceOptions: {
placeholder: '请选择数据来源',
data: [
{ name: "ADS计划", value: "ADS" },
{ name: "非ADS计划", value: "SYNC" }
]
},
// 选择日期范围
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
end.setTime(end.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', [start, end]);
}
}],
disabledDate: time => {
let a = new Date().toLocaleDateString() + " " + "23:59:59";
let c = new Date(new Date() - 24 * 60 * 60 * 1000 * 7).getTime();
let b = new Date(a).getTime() - 3600 * 1000 * 24;
return c > time.getTime() || time.getTime() > b;
}
},
// 媒体
mediaCode: {
placeholder: '请选择媒体',
data: [
{ name: "头条", value: "toutiao" },
{ name: "快手", value: "kuaishou" },
{ name: "广点通", value: "gdt" },
{ name: '百度', value: 'baidu' }
]
},
// 客户区域
customerAreaOptions: [
{
label: "华北",
value: "华北"
},
{
label: "华南",
value: "华南"
},
{
label: "华东",
value: "华东"
}
],
// 客户类型
customerTypeOptions: [
{
label: "试用",
value: "TRIAL"
},
{
label: "签约",
value: "SIGNED"
},
{
label: "其他",
value: "OTHER"
}
],
// 列表加载等待
loading: false,
// 总条数
total: 0,
// 下载loading
downloadLoading: false,
title: '', // 跟踪文档标题抬头
deleteId: '', // 详情id
tableHeights: 0, // table高度
customerListHeights: 0 // table真实高度
loading: false,
deleteCenter: []
}
},
watch: {
customerId(newVal, oldVal) {
if (newVal !== oldVal) {
this.customerId = newVal.replace(/[^0-9\，]/,'')
}
}
},
created() {
this.init()
console.log(this.$route.query)
this.$nextTick(() => {
this.tableHeight();
})
......@@ -609,197 +78,188 @@ export default {
computed: {
// 计算过的height
tableHeightCount() {
return this.tableHeights > this.customerListHeights ? this.customerListHeights : this.tableHeights
return this.tableHeights
}
},
methods: {
// 初始化
init() {
const end = this.formatDate(1);
const start = this.formatDate(1);
this.$set(this, 'searchDateRange', [start, end])
this.title = this.$route.query.name
this.deleteId = this.$route.query.id
this.searchCustomer()
},
// 初始化日期格式化
formatDate(date) {
let d = new Date(),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate() - date,
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
// 返回跟踪文档
blackTaskList() {
this.$router.push({
path: '/documentManagement/taskList'
})
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNo = 1;
this.disposeData()
this.searchCustomer()
searchCustomer() {
this.loading = true;
// listCustomer(this.queryParams)
// .then(response => {
for (let i = 0; i < 10; i++) {
let data = {
data: '2022-10-18',
change: '4',
content: [ // 新数据及变化
{
contentText: '通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。', // 这是完整的一段话
contentTextOld: '',
contentChange:[ // 这段话里有多少变化以及链接出处
{
text: '或使用v-model',
url: 'https://www.baidu.com/'
},
{
text: '输入框内显示的值',
url: 'https://www.cnblogs.com/1234wu/p/11055005.html'
},
]
},
{
contentText: '视频或直播加热的功能，提升视频或直播间热度。121212', // 这是完整的一段话
contentChange: [
{
text: '提升视频或直播间热度',
url: 'https://element.eleme.io/#/zh-CN/component/pagination#events'
},
// 搜索数据处理
disposeData() {
let customerId = this.customerId ? this.customerId.split('，').filter(val => {if (val) return val}) : []
let groupBy = this.groupBy
let groupByData = {
"dateInt": false,
"mediaCode": false,
"customerArea": false,
"customerType": false,
"customerId": false,
"customerName": false,
"source": false,
"appPackageName": false,
"appName": false,
"corporationName": false,
"firstIndustryName": false,
"secondIndustryName": false
]
},
{
contentText: '视频或直播加热的功能，提升视频或直播间热度。121212', // 这是完整的一段话
contentChange: [
{
text: '视频或直播加热的功能',
url: 'https://element.eleme.io/#/zh-CN/component/pagination#events'
},
]
}
if (groupBy.length) {
groupBy.forEach(item => {
if (item) {
groupByData[item] = true
],
contentOld: [ // 旧数据
{
contentText: '通常情况下，应当处理 input 事件，并更新组件的绑定值。否则，输入框内显示的值将不会改变。'
},
{
contentText: '视频或直播加热的功能，提升视频或直播间热度。'
},
{
contentText: '视频或直播加热的功能，提升视频或直播间热度。'
}
})
]
}
let content = data.content
for (let a = 0; a < content.length; a++) {
let contentChange = content[a].contentChange
for (let b = 0; b < contentChange.length; b++) {
let text = contentChange[b].text
let url = contentChange[b].url
if (content[a].contentText.indexOf(text) >= 0) {
let values = content[a].contentText.split(text);
content[a].contentText = values.join(
`<a style="color: rgba(250, 0, 0, 1);" href="${url}" target="_blank">${text}</a>`
)
}
this.$refs.customerListHeight.clearSort()
this.$set(this.queryParams, 'sortBy', ['dateInt;desc', 'cost;desc'])
this.queryParams.groupBy = groupByData
this.queryParams.filtering.customerId = customerId
},
searchCustomer() {
this.loading = true;
if (!this.searchDateRange) {
this.$message({
message: '请选择日期在进行查询',
type: 'warning'
});
return false
}
if (this.searchDateRange) {
this.queryParams.filtering.startDate = this.searchDateRange[0];
this.queryParams.filtering.endDate = this.searchDateRange[1];
}
planPage(this.queryParams)
.then(response => {
this.total = response.data.total;
this.loading = false;
this.deleteCenter.push(data)
}
setTimeout(() => {
this.loading = false
}, 1000);
this.$nextTick(() => {
this.$set(this, 'customerList', response.data.records);
this.customerListHeights = this.$refs.customerListHeight.offsetHeight
})
})
.catch(error => {
this.loading = false;
this.customerList = [];
});
// })
// .catch(error => {
// this.loading = false;
// });
},
// 计算高度
tableHeight() {
let height = document.documentElement.clientHeight - 222 - this.$refs.seachDatas.offsetHeight
let height = document.documentElement.clientHeight - 128
this.tableHeights = height < 580 ? 580 : height
},
/** 重置筛选 */
resetHandleQuery() {
this.queryParams = {
pageNo: 1,
pageSize: 10,
sortBy: ['dateInt;desc', 'adsCost;desc'],
filtering: {
startDate: '',
endDate: '',
mediaCode: '',
customerArea: '',
customerType: '',
customerId: [],
customerName: '',
source: '',
appPackageName: '',
appName: ''
},
groupBy: {
"dateInt": true,
"mediaCode": true,
"customerArea": false,
"customerType": false,
"customerId": false,
"customerName": false,
"source": false,
"appPackageName": false,
"appName": false,
"corporationName": false,
"firstIndustryName": false,
"secondIndustryName": false
}
};
const end = this.formatDate(1);
const start = this.formatDate(1);
this.$set(this, 'searchDateRange', [start, end])
this.$set(this, 'customerId', '')
this.$set(this, 'groupBy', ["dateInt", "mediaCode"])
this.disposeData();
this.searchCustomer();
},
// 下载报表
handleDownload() {
this.downloadLoading = true;
if (!this.searchDateRange) {
this.$message({
message: '请选择日期在进行下载',
type: 'warning'
});
return false
}
if (this.searchDateRange) {
this.queryParams.filtering.startDate = this.searchDateRange[0];
this.queryParams.filtering.endDate = this.searchDateRange[1];
}
</script>
<style scoped lang="scss">
@import '@/views/main.scss';
.app-container {
.content {
top: 64px;
background: #fafafa;
}
let queryParams = deepClone(this.queryParams)
delete queryParams.pageNo
delete queryParams.pageSize
planExport(queryParams)
.then(res => {
hackDownloadFileNew(res, '客户投放数据_' + new Date().getTime());
this.msgSuccess("下载成功");
this.downloadLoading = false;
})
.catch(() => {
this.downloadLoading = false;
});
},
// 排序
sortChange(column, prop, order) {
if (!column.order) {
this.$set(this.queryParams, 'sortBy', ['dateInt;desc', 'adsCost;desc'])
} else {
let text = column.prop + ';'
if (column.order === 'descending') {
text = text + 'desc'
} else if (column.order === 'ascending') {
text = text + 'asc'
}
.seachData {
.seachData-left {
padding-left: 46px;
}
this.$set(this.queryParams, 'sortBy', [text])
}
.left-span {
margin-right: 18px;
color: #0052D9;
font-size: 26px;
text-align: center;
width: 18px;
cursor: pointer;
}
.delete-center {
width: 100%;
margin-bottom: 16px;
padding: 32px 36px;
background: #fff;
&:first-child {
margin-top: 16px;
}
.title {
font-size: 18px;
color: rgba(0, 0, 0, 0.9000);
.time {
margin-right: 24px;
}
}
.center {
width: 100%;
display: flex;
.center-delete {
width: 50%;
margin-top: 24px;
}
.center-delete-tab {
width: 44px;
height: 24px;
line-height: 24px;
text-align: center;
border-radius: 4px;
&.green {
background: #c8ffe8;
color: #4ec192;
}
&.gray {
background: rgba(0, 0, 0, 0.2000);
color: #8a8888;
}
this.searchCustomer();
},
// 客户类型
typeText(type) {
const opt = this.customerTypeOptions.find(item => item.value === type);
return opt && opt.label;
},
// 数据来源
typeTextSource(type) {
let types = {
'SYNC': '非ADS计划',
'ADS': 'ADS计划'
}
return types[type] ? types[type] : '-';
.center-delete-text {
margin-top: 24px;
text-align: left;
font-size: 14px;
line-height: 20px;
color: rgba(0, 0, 0, 0.6);
word-break: break-all;
}
}
}
</script>
<style scoped lang="scss">
@import '@/views/main.scss';
.content-left-center {
.none {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #8a8888;
font-size: 16px;
}
}
</style>
\ No newline at end of file
src/views/index.scss
.dashboard-editor-container {
padding: 32px;
background-color: #fff;
background-color: #fafafa;
position: absolute;
left: 0;
right: 0;
......@@ -15,33 +15,64 @@
}
.seach-center {
position: absolute;
top: 25%;
top: 200px;
left: 50%;
transform: translate(-50%, -50%);
transform: translate(-50%, 0);
z-index: 1;
.seach-logo {
width: 80px;
height: 35px;
line-height: 35px;
width: 190px;
height: 45px;
line-height: 45px;
background: #fff;
color: #222;
font-size: 26px;
font-size: 40px;
font-weight: 600;
text-align: center;
margin: 0 auto 40px auto;
margin: 0 auto 20px auto;
}
.common-url {
margin-top: 80px;
.common-url-title {
color: rgba(0,0,0,0.9);
font-size: 16px;
margin-bottom: 16px;
}
.common-url-center {
display: flex;
.link {
color: rgba(0, 82, 217, 1);
margin-right: 8px;
&:hover {
color: rgba(0, 82, 217, .9);
}
}
}
}
/deep/.el-input-group {
width: 700px;
height: 40px;
width: 800px;
height: 48px;
}
/deep/.el-input__prefix {
font-size: 16px;
left: 8px;
}
/deep/.el-input-group--append {
.el-input__inner {
height: 40px;
width: 600px;
height: 48px;
width: 680px;
padding-left: 40px;
border-color: rgba(220, 220, 220, 1);
border-radius: 4px 0 0 4px;
}
.el-input-group__append {
width: 100px;
width: 120px;
text-align: center;
background: rgba(0, 82, 217, 1);
color: rgba(255,255,255,0.9);
border-radius: 0 4px 4px 0;
&:hover {
background: rgba(0, 82, 217, .8);
}
}
}
}
src/views/index.vue
......@@ -2,9 +2,16 @@
<div class="dashboard-editor-container">
<div class="seach-center">
<div class="seach-logo">logo</div>
<el-input placeholder="例如：腾讯" @keyup.enter.native="searchDocument" v-model="search" class="input-with-select">
<el-button slot="append" @click="searchDocument">搜索</el-button>
<el-input prefix-icon="el-icon-search" placeholder="请输入你需要搜索的内容" @keyup.enter.native="searchDocument" v-model="search" class="input-with-select">
<el-button slot="append" @click="searchDocument">搜索文档</el-button>
</el-input>
<div class="common-url">
<div class="common-url-title">常用链接</div>
<div class="common-url-center">
<a href="https://www.oceanengine.com/" target="_blank" class="link">巨量引擎</a>
<a href="http://baidu.guojidxqf.com/?gclid=Cj0KCQiAmaibBhCAARIsAKUlaKQaOd7vK47N2G7vH6lSS4QeRNY_0gIbaJ13hSL4Og7A50CiNFRRL3waAjMAEALw_wcB" target="_blank" class="link">百度联盟</a>
</div>
</div>
</div>
</div>
</template>
......@@ -31,8 +38,8 @@ export default {
return
}
this.$router.push({
path: '/documentManagement/tailAfter',
query: {
name: 'tailAfter',
params: {
search: this.search
}
})
......
src/views/main.scss
// 上方搜索
/deep/.seachData {
height: 64px;
display: flex;
background: #fff;
box-shadow: inset 0px -1px 0px 0px #DCDCDC;
.el-form {
display: flex;
flex-wrap: wrap;
}
.el-button--primary {
min-width: 80px;
height: 34px;
min-width: 112px;
height: 32px;
background: rgba(0, 82, 217, 1);
border-color: rgba(0, 82, 217, 1);
font-size: 14px;
margin-left: 20px;
margin-bottom: 16px;
margin: 16px 0 16px 16px;
}
.el-button--text {
margin-left: 36px;
}
.el-form--inline {
.el-form-item {
margin: 0 20px 20px 0;
&.active {
......@@ -32,11 +36,6 @@
width: 220px;
}
}
.el-input__inner {
height: 34px;
font-size: 14px;
padding: 8px 10px;
}
.el-range-editor--small {
.el-range__close-icon {
vertical-align: middle;
......@@ -49,12 +48,29 @@
width: 220px;
}
.seachData-left {
width: calc(100% - 118px);
width: 50%;
color: rgba(0, 0, 0, 0.9000);
line-height: 64px;
padding-left: 32px;
font-size: 20px;
font-weight: 500;
}
.seachData-right {
width: 116px;
border-left: 1px solid #E4E4E4;
min-height: 90px;
width: 50%;
padding-right: 40px;
display: flex;
justify-content: flex-end;
.el-input {
width: 320px;
height: 32px;
margin: 16px 0;
}
.el-input__inner {
height: 32px;
width: 320px;
font-size: 14px;
padding: 8px 10px;
}
}
.seachData-next-line {
width: 100%;
......@@ -100,7 +116,6 @@
}
}
}
}
}
// 表格弹框
/deep/.from-pop-up {
......@@ -221,8 +236,8 @@
}
.app-container {
padding: 32px;
background-color: #fff;
padding: 0;
background-color: #fafafa;
position: absolute;
left: 0;
right: 0;
......@@ -230,13 +245,10 @@
bottom: 0;
.content {
position: absolute;
left: 32px;
bottom: 32px;
right: 32px;
top: 68px;
.solid {
border: 1px solid #999;
}
left: 0;
bottom: 0;
right: 0;
top: 96px;
.scroll {
overflow-y: auto;
&::-webkit-scrollbar-track-piece {
......@@ -286,49 +298,103 @@
position: absolute;
left: 0;
right: 432px;
top: 32px;
top: 0;
bottom: 0;
right: 0;
.content-left-center {
width: 100%;
height: 100%;
padding: 16px 16px 0 16px;
padding: 0 16px 0 16px;
position: relative;
/deep/.pagination-container {
background: #fafafa;
}
/deep/.el-pagination {
text-align: center;
width: 100%;
}
/deep/.el-pagination.is-background {
.el-pager li {
background-color: #fafafa;
border-radius: 3px;
color: rgba(0, 0, 0, 0.6000);
border: 1px solid rgba(220, 220, 220, 1);
border-radius: 3px;
&:not(.disabled).active {
color: #fff;
background: rgba(0, 82, 217, 1);
}
}
.btn-prev, .btn-next {
border: 0;
background: #fafafa;
color: rgba(0, 0, 0, 0.6000);
}
}
}
.left-content {
position: relative;
padding: 40px 56px;
padding-left: 80px;
width: 752px;
margin-bottom: 40px;
&:first-child {
margin-top: 40px;
}
.left-content-title {
width: 100%;
margin-bottom: 12px;
height: 20px;
.logo {
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
border: 1px solid #ccc;
margin-bottom: 20px;
.left-content-title {
position: absolute;
left: 0;
top: 0;
background: pink;
color: #222;
font-size: 18px;
padding: 4px 8px;
margin-right: 8px;
float: left;
.logo-img {
width: 18px;
height: 18px;
border-radius: 50%;
}
}
.media {
margin-right: 32px;
}
.text {
float: left;
font-size: 14px;
line-height: 20px;
color: rgba(0,0,0,0.4);
}
}
.content-text-header {
height: 32px;
height: 28px;
line-height: 28px;
font-size: 20px;
font-weight: 500;
color: #222;
color: rgba(0, 0, 0, 0.9000);
text-align: left;
margin-bottom: 8px;
.link {
cursor: pointer;
color: #222;
&:hover {
color: rgb(64, 158, 255);
color: #0052d9;
}
}
}
.content-text {
margin-top: 8px;
margin-bottom: 4px;
margin-top: 0;
text-align: left;
font-size: 14px;
color: #222;
line-height: 20px;
color: rgba(0,0,0,0.6);
word-break: break-all;
&:last-child {
margin-bottom: 0;
}
}
}
}
......@@ -391,5 +457,48 @@
}
}
.blue {
color: #1890ff;
color: #0052d9;
cursor: pointer;
&:hover {
color: #025cf1;
}
}
.app-header {
height: 96px;
background: #fff;
padding: 24px 36px;
display: flex;
.search-logo {
height: 32px;
width: 32px;
background: #fafafa;
margin: 8px 12px 8px 0;
float: left;
}
/deep/.el-input-group {
width: 800px;
}
/deep/.el-input-group--append {
float: left;
.el-input__inner {
height: 48px;
width: 680px;
padding-left: 40px;
border-color: rgba(220, 220, 220, 1);
border-radius: 4px 0 0 4px;
}
.el-input-group__append {
width: 120px;
text-align: center;
background: rgba(0, 82, 217, 1);
color: rgba(255,255,255,0.9);
border-radius: 0 4px 4px 0;
&:hover {
background: rgba(0, 82, 217, .8);
}
}
.el-input__prefix {
font-size: 16px;
}
}
}
src/views/system/customer/index.vue
......@@ -2,64 +2,63 @@
<div class="app-container">
<!-- 功能项-->
<div class="seachData" ref="seachDatas">
<el-form :inline="true">
<div class="seachData-left">
<el-form-item label="任务名称">
跟踪文档列表
</div>
<div class="seachData-right">
<el-input v-model="queryParams.taskName"
placeholder="请输入任务名称"
suffix-icon="el-icon-search"
clearable
size="small"
style="width: 220px"
@keyup.enter.native="handleQuery" />
</el-form-item>
</div>
<div class="seachData-right">
<el-form-item class="active">
<el-button type="primary"
size="mini"
@click="handleQuery">筛选</el-button>
<el-button type="text"
size="mini"
@click="resetHandleQuery">重置筛选</el-button>
</el-form-item>
</div>
<div class="seachData-next-line">
<div class="seachData-next-div left-div">
<el-button type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd">添加任务
@click="handleAdd">创建任务
</el-button>
</div>
</div>
</el-form>
</div>
<div class="table-center">
<el-table class="seachTable" v-loading="loading"
:data="customerList"
:height="tableHeightCount"
ref="customerListHeight"
border>
<el-table-column min-width="90"
<el-table-column label="订阅状态"
fixed="left"
label="任务id"
prop="id"
>
width="90"
align="subscriptionStatus">
<template slot-scope="scope">
<span class="blue">{{ isEmpty(scope.row, 'id') }}</span>
<el-switch v-model="scope.row.subscriptionStatus"
active-value="0"
inactive-value="1"
@change="handleStatusChange(scope.row)"></el-switch>
</template>
</el-table-column>
<el-table-column fixed="left"
min-width="200"
min-width="240"
label="任务名称"
prop="taskName"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ isEmpty(scope.row, 'taskName') }}</div>
<div class="ellipsis-hidden"><span class="blue" @click="routerTaskListDetails(scope.row)">{{ isEmpty(scope.row, 'taskName') }}</span></div>
</template>
</el-table-column>
<el-table-column min-width="160"
fixed="left"
label="任务ID"
prop="id"
>
<template slot-scope="scope">
<span>{{ isEmpty(scope.row, 'id') }}</span>
</template>
</el-table-column>
<el-table-column label="任务说明"
min-width="300"
min-width="280"
prop="explain"
:show-overflow-tooltip="true"
>
......@@ -68,27 +67,25 @@
</template>
</el-table-column>
<el-table-column label="创建时间"
align="center"
<el-table-column label="最后修改时间"
prop="createTime"
width="120">
width="200">
<template slot-scope="scope">
<span>{{ isEmpty(scope.row, 'createTime') }}</span>
</template>
</el-table-column>
<el-table-column label="状态"
align="center"
prop="status"
width="120">
<template slot-scope="scope">
<span>{{ statusTable(scope.row) }}</span>
<span :class="statusTable(scope.row).class">{{ statusTable(scope.row).text }}</span>
</template>
</el-table-column>
<el-table-column fixed="right"
label="操作"
width="240">
width="160">
<template slot-scope="scope">
<el-button @click="handleUpdate(scope.row)"
type="text"
......@@ -104,17 +101,19 @@
:total="total"
:page.sync="queryParams.current"
:limit.sync="queryParams.size"
layout="total, prev, pager, next"
@pagination="searchCustomer" />
<!-- 添加或修改角色配置对话框 -->
<el-dialog class="from-pop-up"
</div>
<el-drawer
class="from-pop-up"
:title="title"
:visible.sync="open"
width="640px">
:direction="'rtl'"
:wrapperClosable="false"
:before-close="cancel">
<el-form ref="form"
:model="form"
:rules="rules"
label-width="110px">
:rules="rules">
<el-form-item label="任务名称"
prop="taskName">
<el-input v-model.trim="form.taskName"
......@@ -150,6 +149,18 @@
placeholder="请输入任务说明" />
</el-form-item>
</el-form>
<div class="dialog-footer">
<el-button type="primary"
@click="submitForm"
:loading="submitLoading">确 定</el-button>
<el-button class="cancel" @click="cancel">取 消</el-button>
</div>
</el-drawer>
<!-- 添加或修改角色配置对话框 -->
<!-- <el-dialog class="from-pop-up"
:title="title"
:visible.sync="open"
width="640px">
<div slot="footer"
class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
......@@ -157,7 +168,7 @@
@click="submitForm"
:loading="submitLoading">确 定</el-button>
</div>
</el-dialog>
</el-dialog> -->
</div>
</template>
......@@ -275,14 +286,24 @@ export default {
computed: {
// 计算过的height
tableHeightCount() {
return this.tableHeights > this.customerListHeights ? this.customerListHeights : this.tableHeights
return this.tableHeights - 112
}
},
methods: {
tableHeight() {
let height = document.documentElement.clientHeight - 222 - this.$refs.seachDatas.offsetHeight
let height = document.documentElement.clientHeight - 128
this.tableHeights = height < 580 ? 580 : height
},
// 跳转跟踪文档详情界面
routerTaskListDetails(row) {
this.$router.push({
path: '/documentManagement/taskListDetails',
query: {
id: row.id,
name: row.taskName
}
})
},
// table显示内容
isEmpty(row, name) {
return !row[name] ? '-' : row[name]
......@@ -290,10 +311,31 @@ export default {
// table显示状态
statusTable(row) {
let status = {
0: "已失效",
1: "运行中"
0: {
text: "已失效",
class: "span-table span-red"
},
1: {
text: "运行中",
class: "span-table span-blue"
},
2: {
text: "已完成",
class: "span-table span-green"
}
}
return status[row.status] ? status[row.status] : {
text: "",
class: ""
}
return status[row.status] ? status[row.status] : "-"
},
handleStatusChange(row) {
// editStatus(row.id, row.subscriptionStatus)
// .then(() => {
this.searchCustomer();
this.msgSuccess("修改状态成功");
// })
// .catch(() => this.msgError("修改状态失败"));
},
searchCustomer() {
this.loading = true;
......@@ -304,6 +346,7 @@ export default {
id: 1,
taskName: '任务1',
explain: '这是一个任务1',
subscriptionStatus: '1',
createTime: '2020-10-22 20:16:01',
status: 0,
document: '1',
......@@ -313,6 +356,7 @@ export default {
{
id: 2,
taskName: '任务2',
subscriptionStatus: '1',
explain: '这是一个任务2',
createTime: '2020-10-22 20:16:01',
status: 1,
......@@ -324,8 +368,9 @@ export default {
id: 3,
taskName: '任务3',
explain: '',
subscriptionStatus: '0',
createTime: '2020-10-22 20:16:01',
status: 1,
status: 2,
document: '0',
link: '',
email: '111111111@.qq.com'
......@@ -335,14 +380,14 @@ export default {
this.customerList = data
// data
// this.total = response.data.total;
this.total = 10;
this.total = 0;
// 10;
setTimeout(() => {
this.loading = false;
}, 2000)
// this.$nextTick(() => {
// this.customerListHeights = this.$refs.customerListHeight.offsetHeight
// })
this.$nextTick(() => {
this.customerListHeights = this.$refs.customerListHeight.offsetHeight
})
// })
// .catch(error => {
// this.loading = false;
......@@ -481,4 +526,141 @@ export default {
</script>
<style scoped lang="scss">
@import '@/views/main.scss';
.table-center {
width: calc(100% - 32px);
height: calc(100% - 96px);
display: inline-block;
margin: 16px;
background: #fff;
}
/deep/.seachTable {
margin: 16px;
width: calc(100% - 32px);
&.el-table {
th {
background: #fff;
color: #a8a8a8;
}
.el-table__header-wrapper th {
color: #a8a8a8;
}
.el-button--small {
font-size: 14px;
color: #0052d9;
}
.el-button + .el-button {
margin-left: 16px;
}
.span-table {
padding-left: 16px;
position: relative;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
width: 8px;
height: 8px;
border-radius: 50%;
}
}
.span-red {
&::before {
background: rgba(227, 77, 89, 1);
}
}
.span-blue {
&::before {
background: rgba(0, 82, 217, 1);
}
}
.span-green {
&::before {
background: rgba(5, 168, 112, 1);
}
}
}
}
/deep/.pagination-container {
height: 32px;
margin: 0 16px 16px 16px;
padding: 0 !important;
width: calc(100% - 32px);
}
/deep/.el-pagination.is-background {
.el-pager li {
background-color: #fff;
border-radius: 3px;
color: rgba(0, 0, 0, 0.6000);
border: 1px solid rgba(220, 220, 220, 1);
border-radius: 3px;
&:not(.disabled).active {
color: #fff;
background: rgba(0, 82, 217, 1);
}
}
.btn-prev, .btn-next {
border: 0;
background: #fff;
color: rgba(0, 0, 0, 0.6000);
}
}
/deep/.el-drawer__header {
height: 64px;
font-size: 16px;
padding: 0;
line-height: 64px;
color: rgba(0, 0, 0, 0.9000);
font-weight: 500;
margin-bottom: 26px;
padding: 0 24px;
box-shadow: inset 0px -1px 0px 0px #dcdcdc;
}
.el-form {
padding: 0 24px;
/deep/.el-form-item__label {
width: 100% !important;
text-align: left;
}
/deep/.el-form-item__content {
margin-left: 0 !important;
}
/deep/.el-select, /deep/.el-select > .el-input {
width: 100%;
}
}
.dialog-footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
line-height: 64px;
height: 64px;
padding: 0 24px;
border-top: 1px solid rgba(231, 231, 231, 1);
/deep/.el-button--medium {
width: 60px;
height: 32px;
border-radius: 3px;
padding: 0;
text-align: center;
line-height: 32px;
font-size: 14px;
}
/deep/.el-button--primary {
background: #0052D9;
border-color: #0052D9;
}
.el-button--medium {
&.cancel {
background: #E7E7E7;
border-color: #E7E7E7;
color: rgba(0, 0, 0, 0.9000);
}
}
.el-button + .el-button {
margin-left: 8px;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment