侧边菜单栏
This commit is contained in:
surida
parent
399ced19e4
commit
611c658841
3
public/color.less
vendored
3
public/color.less
vendored
|
|
@ -5091,9 +5091,6 @@ form .ant-upload {
|
|||
.ant-layout {
|
||||
background: #f0f2f5;
|
||||
}
|
||||
.ant-layout-header {
|
||||
background: #001529;
|
||||
}
|
||||
.ant-layout-footer {
|
||||
background: #f0f2f5;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 12 KiB |
BIN
src/assets/img/analysisBG.png
Normal file
BIN
src/assets/img/analysisBG.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 561 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 137 KiB After Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 169 KiB After Width: | Height: | Size: 316 KiB |
BIN
src/assets/img/leftMenu.png
Normal file
BIN
src/assets/img/leftMenu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
|
@ -1,14 +1,14 @@
|
|||
@bordercolor : rgb(98,133,151);
|
||||
@headercolor : #ffffff;
|
||||
@backcolor : #ffffff;
|
||||
@inpuitbordercolor: rgb(45,103,132);
|
||||
@inpuitbackcolor : rgb(4,27,43);
|
||||
@inpuitbordercolor: #C3C3C3;
|
||||
@inpuitbackcolor : #C3C3C346;
|
||||
@labelDeaultColor : rgb(98,133,151);
|
||||
@defaultWhiteColor: rgb(98,133,151);
|
||||
@fontfamily : 'MyCustomFont3', sans-serif;
|
||||
@tableheadColor : #E5E8EB;
|
||||
@tableheadBgColor : linear-gradient(180deg, rgb(20,108,173),rgb(11,57,90));
|
||||
@tableColor : rgb(98,133,151);
|
||||
@tableheadColor : #363F56;
|
||||
@tableheadBgColor : linear-gradient(180deg, #D6DAE2,#B0B6C2);
|
||||
@tableColor : #6C758B;
|
||||
|
||||
@font-face {
|
||||
font-family: 'MyCustomFont1';
|
||||
|
|
@ -41,7 +41,7 @@ body{
|
|||
}
|
||||
.echartsTitle{
|
||||
height: 36px;
|
||||
background: linear-gradient(90deg, rgb(9,62,81),rgb(9,62,81),rgb(8,43,62));
|
||||
background: linear-gradient(90deg, #788095,#c5cad6);
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 34px;
|
||||
|
|
@ -56,9 +56,9 @@ body{
|
|||
|
||||
.linese{
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
height: 1px;
|
||||
margin: 10px 0;
|
||||
background: linear-gradient(90deg, rgb(49,112,157) 20px,rgb(26,63,86) 20px,rgb(26,63,86) calc(100% - 20px),rgb(49,112,157) calc(100% - 20px));
|
||||
background: linear-gradient(90deg, #1671DB 20px,#a2c6f1 20px,#a2c6f1 calc(100% - 20px),#1671DB calc(100% - 20px));
|
||||
}
|
||||
|
||||
/* 滚动条优化 start */
|
||||
|
|
@ -127,11 +127,24 @@ body {
|
|||
}
|
||||
|
||||
.ant-layout-header {
|
||||
// background-image: url('~@/assets/img/header_bg.png') !important;
|
||||
// background-size: 100% 100%;
|
||||
background: transparent !important;
|
||||
height: 130px !important;
|
||||
}
|
||||
.header-nowTime{
|
||||
background-image: url('~@/assets/img/header_bg.png') !important;
|
||||
background-size: 100% 66px;
|
||||
background-repeat: no-repeat !important;
|
||||
|
||||
color: #fff;
|
||||
font-family: 'Microsoft YaHei';
|
||||
font-size: 28px;
|
||||
letter-spacing: 3px;
|
||||
font-weight: 700;
|
||||
height:70px;
|
||||
img{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.signdiv,
|
||||
|
|
@ -260,9 +273,6 @@ ul li {
|
|||
color : @tableColor !important;
|
||||
}
|
||||
|
||||
.table-page-search-wrapper {
|
||||
padding: 30px 10px 10px 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -296,6 +306,12 @@ ul li {
|
|||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.ant-menu.ant-menu-dark .ant-menu-item-selected,
|
||||
.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
|
||||
background-color: transparent !important;
|
||||
background: linear-gradient(180deg, transparent 5px,#11B3FF 5px,#1E30A2 45px,transparent 45px);
|
||||
}
|
||||
|
||||
.ant-radio-inner,
|
||||
.ant-checkbox-inner {
|
||||
border-color: @bordercolor !important;
|
||||
|
|
@ -685,7 +701,7 @@ textarea,
|
|||
.ant-table-content .ant-table-thead>tr>th,
|
||||
.ant-table-content .ant-table-tbody>tr>td {
|
||||
border-right : 0 !important;
|
||||
border-bottom: 1px solid #31343d !important;
|
||||
border-bottom: 0 solid #31343d !important;
|
||||
line-height : 22px;
|
||||
background: @tableheadBgColor;
|
||||
}
|
||||
|
|
@ -815,15 +831,11 @@ textarea,
|
|||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.ant-menu-item>a>span,
|
||||
.ant-menu-submenu {
|
||||
color: rgb(28,204,253) !important;
|
||||
}
|
||||
|
||||
.ant-menu-item-selected>a>span,
|
||||
.ant-menu-item-active>a>span,
|
||||
.ant-menu-submenu:hover,
|
||||
.ant-menu-submenu-selected .ant-menu-submenu-title,
|
||||
.ant-menu-submenu-title,
|
||||
.ant-menu-submenu-title:hover {
|
||||
color: @headercolor !important;
|
||||
}
|
||||
|
|
@ -838,18 +850,34 @@ textarea,
|
|||
background: transparent !important;
|
||||
}
|
||||
|
||||
.ant-menu{
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
border-bottom: 1px dotted #00CBFF;
|
||||
}
|
||||
.ant-menu-submenu, .ant-menu-submenu-inline
|
||||
{
|
||||
transition: 0 !important;
|
||||
|
||||
}
|
||||
.ant-menu-vertical .ant-menu-item,
|
||||
.ant-menu-submenu.ant-menu-submenu-vertical {
|
||||
background-image: url('~@/assets/img/MenuSecDefault.png');
|
||||
// background-image: url('~@/assets/img/MenuSecDefault.png');
|
||||
background-size: 100% 100%;
|
||||
width : 165px !important;
|
||||
height : 40px !important;
|
||||
width : 263px !important;
|
||||
height : 50px !important;
|
||||
margin-bottom: 0 !important;
|
||||
margin-top : -1px !important;
|
||||
line-height: 50px !important;
|
||||
text-align: left;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
padding: 0 0 0 10px !important;
|
||||
padding: 0 0 0 20px !important;
|
||||
border-top: 1px dotted #00CBFF;
|
||||
}
|
||||
.ant-menu-item > a > span
|
||||
{
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.ant-menu-vertical .ant-menu-submenu-title {
|
||||
|
|
@ -860,7 +888,7 @@ textarea,
|
|||
.ant-menu-submenu-vertical.ant-menu-submenu-open,
|
||||
.ant-menu-vertical .ant-menu-item-selected,
|
||||
.ant-menu-vertical .ant-menu-item-active {
|
||||
background-image: url('~@/assets/img/MenuSecSelect.png');
|
||||
// background-image: url('~@/assets/img/MenuSecSelect.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
|
|
@ -875,13 +903,13 @@ textarea,
|
|||
}
|
||||
|
||||
.ant-modal-content{
|
||||
background-image: url('~@/assets/img/文件上传.png') !important;
|
||||
// background-image: url('~@/assets/img/文件上传.png') !important;
|
||||
background-size: 100% 100%;
|
||||
background-color: transparent !important;
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
.ant-modal-header{
|
||||
background: transparent !important;
|
||||
background: #1671DB !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
.ant-modal-title{
|
||||
|
|
@ -1051,7 +1079,7 @@ tr.ant-table-expanded-row:hover {
|
|||
.ant-table-thead>tr>th,
|
||||
.ant-table-tbody>tr>td {
|
||||
border-right : 0px solid #096A87 !important;
|
||||
border-bottom: 1px solid rgb(10,49,75) !important;
|
||||
border-bottom: 1px solid #1671DB48 !important;
|
||||
}
|
||||
|
||||
.ant-table-tbody>tr>td {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<a-layout-sider
|
||||
:class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
|
||||
width="408px"
|
||||
width="208px"
|
||||
:collapsible="collapsible"
|
||||
v-model="collapsed"
|
||||
:trigger="null">
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
:menu="menus"
|
||||
:theme="theme"
|
||||
@select="onSelect"
|
||||
@updateMenuTitle="onUpdateMenuTitle"
|
||||
:mode="mode"
|
||||
:style="smenuStyle">
|
||||
</s-menu>
|
||||
|
|
@ -19,7 +20,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import ALayoutSider from "ant-design-vue/es/layout/Sider"
|
||||
import ALayoutSider from 'ant-design-vue/es/layout/Sider'
|
||||
import Logo from '../tools/Logo'
|
||||
import SMenu from './index'
|
||||
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
||||
|
|
@ -68,6 +69,9 @@
|
|||
methods: {
|
||||
onSelect (obj) {
|
||||
this.$emit('menuSelect', obj)
|
||||
},
|
||||
onUpdateMenuTitle (obj) {
|
||||
this.$emit('updateMenuTitle', obj)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -136,41 +140,8 @@
|
|||
background-color: #999999;
|
||||
}
|
||||
}
|
||||
background-color: rgb(48, 65, 86);
|
||||
/deep/ .ant-menu-submenu-title:hover{
|
||||
background-color: #263445;
|
||||
}
|
||||
/deep/ .ant-menu-item:hover{
|
||||
background-color: #263445;
|
||||
}
|
||||
/deep/ .ant-menu-item-selected {
|
||||
background-color: #263445;
|
||||
}
|
||||
/deep/ .ant-menu-item-selected i{
|
||||
color: rgb(24, 144, 255);
|
||||
}
|
||||
/deep/ .ant-menu-item-selected span{
|
||||
color: rgb(24, 144, 255);
|
||||
}
|
||||
/deep/ .ant-menu-inline.ant-menu-sub{
|
||||
background-color: #1f2d3d;
|
||||
}
|
||||
/deep/ .ant-menu-inline.ant-menu-sub li:hover{
|
||||
background-color: #1f2d3d;
|
||||
}
|
||||
/deep/ .ant-menu-inline.ant-menu-sub .ant-menu-submenu-title:hover{
|
||||
background-color: #1f2d3d;
|
||||
}
|
||||
/deep/ .ant-menu-inline.ant-menu-sub .ant-menu-item-selected{
|
||||
background-color: #1f2d3d;
|
||||
}
|
||||
/deep/ .ant-menu-inline.ant-menu-sub .ant-menu-item-selected span{
|
||||
color: rgb(24, 144, 255);
|
||||
}
|
||||
/deep/ .ant-menu-inline.ant-menu-sub .ant-menu-item-selected i{
|
||||
color: rgb(24, 144, 255);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* update_end author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
|
||||
|
|
@ -178,7 +149,8 @@
|
|||
|
||||
<!-- update_begin author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
|
||||
<style lang="less">
|
||||
.ant-menu.ant-menu-root {
|
||||
// 选中首页的时候不显示背景颜色，只应用于左侧菜单
|
||||
.sider .ant-menu.ant-menu-root {
|
||||
& > .ant-menu-item:first-child {
|
||||
background-color: transparent;
|
||||
|
||||
|
|
|
|||
|
|
@ -60,15 +60,13 @@ export default {
|
|||
methods: {
|
||||
// select menu item
|
||||
onOpenChange (openKeys) {
|
||||
console.log('openKeys',openKeys)
|
||||
if(openKeys.length == 1 || this.selectedKeys[0] == '/dashboard/analysis') this.latestOpenKey = openKeys
|
||||
else if(openKeys.length == 2) this.latestOpenKey = [openKeys[1]]
|
||||
// openKeys = this.latestOpenKey
|
||||
console.log('latestOpenKey',this.latestOpenKey)
|
||||
console.log('selectedKeys',this.selectedKeys)
|
||||
openKeys = this.latestOpenKey
|
||||
// 在水平模式下时执行，并且不再执行后续
|
||||
if (this.mode === 'horizontal') {
|
||||
this.openKeys = this.latestOpenKey
|
||||
// this.openKeys = this.latestOpenKey
|
||||
this.openKeys = openKeys
|
||||
return
|
||||
}
|
||||
// 非水平模式时
|
||||
|
|
|
|||
|
|
@ -2,14 +2,11 @@
|
|||
<!-- , width: fixedHeader ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%' -->
|
||||
<a-layout-header
|
||||
v-if="!headerBarFixed"
|
||||
:class="[
|
||||
fixedHeader && 'ant-header-fixedHeader',
|
||||
//sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed',
|
||||
]"
|
||||
:class="[fixedHeader && 'ant-header-fixedHeader',sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed',]"
|
||||
:style="{ padding: '0' }"
|
||||
>
|
||||
<div v-if="mode === 'sidemenu'" class="header" :class="theme">
|
||||
<!-- <a-icon
|
||||
<a-icon
|
||||
v-if="device==='mobile'"
|
||||
class="trigger"
|
||||
:type="collapsed ? 'menu-fold' : 'menu-unfold'"
|
||||
|
|
@ -18,7 +15,7 @@
|
|||
v-else
|
||||
class="trigger"
|
||||
:type="collapsed ? 'menu-unfold' : 'menu-fold'"
|
||||
@click="toggle"/> -->
|
||||
@click="toggle"/>
|
||||
|
||||
<span v-if="device === 'desktop'"></span>
|
||||
<span v-else>Jeecg-Boot</span>
|
||||
|
|
@ -28,12 +25,13 @@
|
|||
<!-- 顶部导航栏模式 -->
|
||||
<div v-else :class="['top-nav-header-index', theme]">
|
||||
<div>
|
||||
<div class="header-index-center header-nowTime" > <img src="~@/assets/img/main-logo.png"/></div>
|
||||
<div class="header-index-center header-nowTime" > <img src="~@/assets/img/main-logo.png"/>末端数据接入处理系统</div>
|
||||
<div class="header-index-center" >
|
||||
<div class="header-index-wide">
|
||||
<div class="header-index-center" :style="topMenuStyle.topmenuCenter">
|
||||
<s-menu mode="horizontal" :menu="menus" :theme="theme" :triggerSubMenuAction="triggerSubMenuAction"></s-menu>
|
||||
<s-menu mode="horizontal" :menu="menus" :theme="theme" @triggerSubMenuAction="triggerSubMenuAction" @updateMenuTitle="handleUpdateMenuTitle"></s-menu>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<user-menu class="header-index-right" :theme="theme" />
|
||||
|
|
@ -162,6 +160,11 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
|
||||
// update-begin-author:sunjianlei date:20210508 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
|
||||
handleUpdateMenuTitle(value) {
|
||||
this.$emit('updateMenuTitle', value)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -217,14 +220,6 @@ export default {
|
|||
height: 64px;
|
||||
line-height: 64px;
|
||||
}
|
||||
.header-nowTime {
|
||||
color: #fff;
|
||||
font-family: 'Microsoft YaHei';
|
||||
font-size: 28px;
|
||||
letter-spacing: 3px;
|
||||
font-weight: 700;
|
||||
height:70px;
|
||||
}
|
||||
.header-index-right{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
|
|
|
|||
|
|
@ -92,7 +92,8 @@ export default {
|
|||
//this.menus = this.mainRouters.find((item) => item.path === '/').children;
|
||||
// var cc = this.permissionMenuList.shift()
|
||||
this.menus = this.permissionMenuList
|
||||
console.log('顶部菜单',this.permissionMenuList)
|
||||
// console.log('顶部菜单',this.permissionMenuList)
|
||||
this.collapsed=!this.sidebarOpened;
|
||||
// 根据后台配置菜单，重新排序加载路由信息
|
||||
//console.log('----加载菜单逻辑----')
|
||||
//console.log(this.mainRouters)
|
||||
|
|
@ -135,7 +136,6 @@ export default {
|
|||
},
|
||||
}
|
||||
</script>
|
||||
</style>
|
||||
<style lang="less">
|
||||
@import '../../assets/less/Suless.less';
|
||||
body {
|
||||
|
|
@ -148,8 +148,9 @@ body {
|
|||
}
|
||||
.ant-menu-submenu-popup,
|
||||
.ant-menu-submenu-content{
|
||||
left: 50px !important;
|
||||
top: 155px !important;
|
||||
left: 36px !important;
|
||||
top: 170px !important;
|
||||
z-index: 10 !important;
|
||||
width: 260px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<div class="page-header">
|
||||
<div class="page-header-index-wide">
|
||||
<a-breadcrumb class="breadcrumb">
|
||||
<a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
|
||||
<!-- <router-link v-if="item.name != name" :to="{ path: item.path }">
|
||||
{{ item.meta.title }}
|
||||
</router-link> -->
|
||||
<span v-if="item.meta.title != '首页'">{{ item.meta.title }}</span>
|
||||
</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
<div class="breadcrumb">
|
||||
<span>{{ breadList[2].meta.title }}</span>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <div class="lefttitle">
|
||||
<span>{{ breadList[1].meta.title }}</span>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="detail">
|
||||
<div class="main" v-if="!$route.meta.hiddenHeaderContent">
|
||||
|
|
@ -41,205 +41,226 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Breadcrumb from '@/components/tools/Breadcrumb'
|
||||
import Breadcrumb from '@/components/tools/Breadcrumb'
|
||||
|
||||
export default {
|
||||
name: "PageHeader",
|
||||
components: {
|
||||
"s-breadcrumb": Breadcrumb
|
||||
export default {
|
||||
name: "PageHeader",
|
||||
components: {
|
||||
"s-breadcrumb": Breadcrumb
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: false
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: false
|
||||
},
|
||||
breadcrumb: {
|
||||
type: Array,
|
||||
default: null,
|
||||
required: false
|
||||
},
|
||||
logo: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: false
|
||||
},
|
||||
avatar: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: false
|
||||
}
|
||||
breadcrumb: {
|
||||
type: Array,
|
||||
default: null,
|
||||
required: false
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: '',
|
||||
breadList: [],
|
||||
}
|
||||
logo: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: false
|
||||
},
|
||||
created() {
|
||||
avatar: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
name: '',
|
||||
breadList: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getBreadcrumb()
|
||||
},
|
||||
methods: {
|
||||
getBreadcrumb() {
|
||||
|
||||
this.breadList = []
|
||||
// this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
|
||||
|
||||
this.name = this.$route.name
|
||||
this.$route.matched.forEach((item) => {
|
||||
// item.name !== 'index' && this.breadList.push(item)
|
||||
this.breadList.push(item)
|
||||
})
|
||||
|
||||
console.log(this.breadList)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.getBreadcrumb()
|
||||
},
|
||||
methods: {
|
||||
getBreadcrumb() {
|
||||
|
||||
this.breadList = []
|
||||
// this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
|
||||
|
||||
this.name = this.$route.name
|
||||
this.$route.matched.forEach((item) => {
|
||||
// item.name !== 'index' && this.breadList.push(item)
|
||||
this.breadList.push(item)
|
||||
})
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.getBreadcrumb()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.page-header {
|
||||
z-index: 11;
|
||||
|
||||
|
||||
.page-header {
|
||||
margin: 0;
|
||||
padding: 8px 20px;
|
||||
height:40px;
|
||||
width:calc(100vw - 260px);
|
||||
.breadcrumb {
|
||||
position: absolute;
|
||||
top: 110px;
|
||||
left: 260px;
|
||||
background-color:#F1F4F8;
|
||||
border-top:2px solid #2B85D1;
|
||||
|
||||
.breadcrumb {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.detail {
|
||||
display: flex;
|
||||
/*margin-bottom: 16px;*/
|
||||
|
||||
.avatar {
|
||||
flex: 0 1 72px;
|
||||
margin: 0 24px 8px 0;
|
||||
|
||||
& > span {
|
||||
border-radius: 72px;
|
||||
display: block;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 100%;
|
||||
flex: 0 1 auto;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.avatar {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
font-weight: 500;
|
||||
color: rgba(0,0,0,.85);
|
||||
margin-bottom: 16px;
|
||||
flex: auto;
|
||||
|
||||
}
|
||||
.logo {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.content, .headerContent {
|
||||
flex: auto;
|
||||
color: rgba(0,0,0,.45);
|
||||
line-height: 22px;
|
||||
|
||||
.link {
|
||||
margin-top: 16px;
|
||||
line-height: 24px;
|
||||
|
||||
a {
|
||||
font-size: 14px;
|
||||
margin-right: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.extra {
|
||||
flex: 0 1 auto;
|
||||
margin-left: 88px;
|
||||
min-width: 242px;
|
||||
text-align: right;
|
||||
}
|
||||
.action {
|
||||
margin-left: 56px;
|
||||
min-width: 266px;
|
||||
flex: 0 1 auto;
|
||||
text-align: right;
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
left: 324px;
|
||||
top: 140px;
|
||||
font-size: 18px;
|
||||
color: #186CCC;
|
||||
z-index: 11;
|
||||
background: #E0E0E0;
|
||||
width: calc(100vw - 344px);
|
||||
height: 53px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.mobile .page-header {
|
||||
.lefttitle {
|
||||
position: absolute;
|
||||
top: 180px;
|
||||
left: 54px;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.detail {
|
||||
display: flex;
|
||||
/*margin-bottom: 16px;*/
|
||||
|
||||
.avatar {
|
||||
flex: 0 1 72px;
|
||||
margin: 0 24px 8px 0;
|
||||
|
||||
&>span {
|
||||
border-radius: 72px;
|
||||
display: block;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 100%;
|
||||
flex: 0 1 auto;
|
||||
|
||||
.row {
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.avatar {
|
||||
flex: 0 1 25%;
|
||||
margin: 0 2% 8px 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.content, .headerContent {
|
||||
flex: 0 1 70%;
|
||||
}
|
||||
|
||||
.link {
|
||||
margin-top: 16px;
|
||||
line-height: 24px;
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
|
||||
a {
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, .85);
|
||||
margin-bottom: 16px;
|
||||
flex: auto;
|
||||
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.content,
|
||||
.headerContent {
|
||||
flex: auto;
|
||||
color: rgba(0, 0, 0, .45);
|
||||
line-height: 22px;
|
||||
|
||||
.link {
|
||||
margin-top: 16px;
|
||||
line-height: 24px;
|
||||
|
||||
a {
|
||||
font-size: 14px;
|
||||
margin-right: 32px;
|
||||
}
|
||||
}
|
||||
.extra {
|
||||
flex: 1 1 auto;
|
||||
margin-left: 0;
|
||||
min-width: 0;
|
||||
text-align: right;
|
||||
}
|
||||
.action {
|
||||
margin-left: unset;
|
||||
min-width: 266px;
|
||||
flex: 0 1 auto;
|
||||
text-align: left;
|
||||
margin-bottom: 12px;
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.extra {
|
||||
flex: 0 1 auto;
|
||||
margin-left: 88px;
|
||||
min-width: 242px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.action {
|
||||
margin-left: 56px;
|
||||
min-width: 266px;
|
||||
flex: 0 1 auto;
|
||||
text-align: right;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile .page-header {
|
||||
|
||||
.main {
|
||||
|
||||
.row {
|
||||
flex-wrap: wrap;
|
||||
|
||||
.avatar {
|
||||
flex: 0 1 25%;
|
||||
margin: 0 2% 8px 0;
|
||||
}
|
||||
|
||||
.content,
|
||||
.headerContent {
|
||||
flex: 0 1 70%;
|
||||
|
||||
.link {
|
||||
margin-top: 16px;
|
||||
line-height: 24px;
|
||||
|
||||
a {
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.extra {
|
||||
flex: 1 1 auto;
|
||||
margin-left: 0;
|
||||
min-width: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.action {
|
||||
margin-left: unset;
|
||||
min-width: 266px;
|
||||
flex: 0 1 auto;
|
||||
text-align: left;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div :style="!$route.meta.pageHeader ? 'margin-top: 80px;border-top:1px solid rgb(18,45,60);' : null">
|
||||
<div :style="!$route.meta.pageHeader ? 'margin: 0;' : null">
|
||||
<!-- pageHeader , route meta hideHeader:true on hide -->
|
||||
<!-- <page-header v-if="!$route.meta.pageHeader" :title="title" :logo="logo" :avatar="avatar">
|
||||
<page-header v-if="!$route.meta.pageHeader" :title="title" :logo="logo" :avatar="avatar">
|
||||
<slot slot="action" name="action"></slot>
|
||||
<slot slot="content" name="headerContent"></slot>
|
||||
<div slot="content" v-if="!this.$slots.headerContent && desc">
|
||||
<!-- <slot slot="content" name="headerContent"></slot> -->
|
||||
<!-- <div slot="content" v-if="!this.$slots.headerContent && desc">
|
||||
<p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ desc }}</p>
|
||||
<div class="link">
|
||||
<template v-for="(link, index) in linkList">
|
||||
|
|
@ -13,22 +13,25 @@
|
|||
<span>{{ link.title }}</span>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<slot slot="extra" name="extra"></slot>
|
||||
<div slot="pageMenu">
|
||||
<div class="page-menu-search" v-if="search">
|
||||
<a-input-search style="width: 80%; max-width: 522px;" placeholder="请输入..." size="large" enterButton="搜索" />
|
||||
</div>
|
||||
<div class="page-menu-tabs" v-if="tabs && tabs.items">
|
||||
<a-tabs :tabBarStyle="{ margin: 0 }" @change="tabs.callback" :activeKey="tabs.active()">
|
||||
<a-tab-pane v-for="item in tabs.items" :tab="item.title" :key="item.key"></a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</page-header>
|
||||
<div class="leftMenu"></div> -->
|
||||
<div class="content">
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <slot slot="extra" name="extra"></slot>
|
||||
<div slot="pageMenu">
|
||||
<div class="page-menu-search" v-if="search">
|
||||
<a-input-search style="width: 80%; max-width: 522px;" placeholder="请输入..." size="large" enterButton="搜索" />
|
||||
</div>
|
||||
<div class="page-menu-tabs" v-if="tabs && tabs.items">
|
||||
<a-tabs :tabBarStyle="{ margin: 0 }" @change="tabs.callback" :activeKey="tabs.active()">
|
||||
<a-tab-pane v-for="item in tabs.items" :tab="item.title" :key="item.key"></a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</div> -->
|
||||
</page-header>
|
||||
<div class="leftMenu">
|
||||
<!-- <div class="parent"></div> -->
|
||||
<!-- <div class="child" v-for="(item,index) in menuList">{{ item.meta.title }}</div> -->
|
||||
</div>
|
||||
<div class="content">
|
||||
<div :class="['page-header-index-wide']">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
|
@ -38,11 +41,17 @@
|
|||
|
||||
<script>
|
||||
import PageHeader from './PageHeader'
|
||||
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
export default {
|
||||
name: "LayoutContent",
|
||||
components: {
|
||||
PageHeader
|
||||
PageHeader,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menuList: [],
|
||||
parentTitle:''
|
||||
}
|
||||
},
|
||||
// ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage']
|
||||
props: {
|
||||
|
|
@ -78,24 +87,79 @@ export default {
|
|||
type: Object,
|
||||
default: () => { }
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
// 主路由
|
||||
mainRouters: (state) => state.permission.addRouters,
|
||||
// 后台菜单
|
||||
permissionMenuList: (state) => state.user.permissionList,
|
||||
}),
|
||||
},
|
||||
mounted() {
|
||||
this.initMenuList()
|
||||
},
|
||||
methods: {
|
||||
initMenuList() {
|
||||
|
||||
this.menuList = []
|
||||
this.parentTitle = this.$route.matched[1].meta.title
|
||||
this.permissionMenuList.forEach((item) => {
|
||||
if (item.meta.title == this.parentTitle) this.menuList = item.children
|
||||
})
|
||||
|
||||
console.log(333, this.menuList)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// .leftMenu {
|
||||
// width: 260px;
|
||||
// height: calc(100vh - 64px);
|
||||
// background-color: #00467C;
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// }
|
||||
.leftMenu {
|
||||
background-image: url('~@/assets/img/leftMenu.png');
|
||||
background-repeat: no-repeat;
|
||||
width: 288px;
|
||||
height: calc(100vh - 64px);
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 140px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.leftMenu .parent{
|
||||
width: 263px;
|
||||
height: 46px;
|
||||
background: linear-gradient(0deg, #1E30A2, #11B3FF);
|
||||
color:#fff;
|
||||
text-align: left;
|
||||
padding-left: 20px;
|
||||
line-height: 46px;
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: 30px;
|
||||
}
|
||||
.leftMenu .child{
|
||||
height: 60px;
|
||||
background-color: #00467C;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.leftMenu .child.selected{
|
||||
background-color: #2B85D1;
|
||||
}
|
||||
|
||||
.content {
|
||||
// width: calc(100vw - 261px);
|
||||
// position: absolute;
|
||||
// left: 260px;
|
||||
// top: 140px;
|
||||
width: calc(100vw - 344px);
|
||||
height: 913px;
|
||||
background-color: #ffffff;
|
||||
position: absolute;
|
||||
left: 324px;
|
||||
top: 140px;
|
||||
padding: 72px 10px 0 20px;
|
||||
|
||||
.link {
|
||||
margin-top: 16px;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export default {
|
|||
primaryColor: '#1890FF', // primary color of ant design
|
||||
navTheme: 'dark', // theme for nav menu
|
||||
layout: 'topmenu', // nav menu position: sidemenu or topmenu
|
||||
contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu
|
||||
contentWidth: 'Fluid', // layout of content: Fluid or Fixed, only works when layout is topmenu
|
||||
fixedHeader: false, // sticky header
|
||||
fixSiderbar: false, // sticky siderbar
|
||||
autoHideHeader: false, // auto hide header
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@
|
|||
</a-col>
|
||||
<a-col :span="4" class="clickbutton" @click="openlink('/#/datalink/water')">
|
||||
<div class="buttontext">数据导入</div>
|
||||
<div class="buttonicon"><img src="~@/assets/img/数据导入.png"></div>
|
||||
<div class="buttonicon"><img src="~@/assets/img/数据接入.png"></div>
|
||||
</a-col>
|
||||
<a-col :span="4" class="clickbutton" @click="openlink('/#/datalink/dblink')">
|
||||
<div class="buttontext">数据接入</div>
|
||||
<div class="buttonicon"><img src="~@/assets/img/数据接入.png"></div>
|
||||
<div class="buttonicon"><img src="~@/assets/img/数据导入.png"></div>
|
||||
</a-col>
|
||||
<a-col :span="4" class="clickbutton" @click="openlink('/#/data/statistics')">
|
||||
<div class="buttontext">数据统计</div>
|
||||
|
|
@ -50,7 +50,11 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.analysisBG {
|
||||
background-image: url('~@/assets/img/homebg.png');
|
||||
background-image: url('~@/assets/img/analysisBG.png');
|
||||
background-repeat: no-repeat;
|
||||
margin-left: -20px;
|
||||
width: 1920px;
|
||||
height: 930px;
|
||||
}
|
||||
.buttonBG{
|
||||
margin-top: 12px;
|
||||
|
|
@ -61,7 +65,9 @@ export default {
|
|||
.clickbutton {
|
||||
margin-top: 5%;
|
||||
background-image: url('~@/assets/img/buttonbg.png');
|
||||
height: 484px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center top;
|
||||
height: 447px;
|
||||
width: 366px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2304,7 +2304,7 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.analysisBG {
|
||||
background-image: url('~@/assets/img/analysisBG.jpg');
|
||||
background-image: url('~@/assets/img/analysisBG.png');
|
||||
background-position: -10px -128px;
|
||||
padding: 12px 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,314 +1,296 @@
|
|||
<template>
|
||||
<a-row>
|
||||
<a-col :md="11" style="padding:0 20px;">
|
||||
<div class="linese"></div>
|
||||
<!-- 查询区域 -->
|
||||
<a-form layout="inline" @keyup.enter.native="gettagTables" style="margin-top: 10px; margin-left: 4px;">
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="10" :sm="2">
|
||||
<a-form-item label="标签类型">
|
||||
<a-select placeholder="选择标签类型" option-filter-prop="children" size="large" v-model="queryRefsParam.tagId" style="width: 180px;">
|
||||
<a-select-option v-for="d in datatagSources" :key="d.id">
|
||||
{{ d.tagName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-row>
|
||||
<a-col :md="11">
|
||||
<div class="linese"></div>
|
||||
<!-- 查询区域 -->
|
||||
<a-form layout="inline" @keyup.enter.native="gettagTables" style="margin-top: 10px;padding:10px; background: #e6e9f1;">
|
||||
<a-row>
|
||||
<a-col :span="10">
|
||||
<a-form-item label="标签类型" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
|
||||
<a-select placeholder="选择标签类型" option-filter-prop="children" v-model="queryRefsParam.tagId">
|
||||
<a-select-option v-for="d in datatagSources" :key="d.id">
|
||||
{{ d.tagName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="10">
|
||||
<a-form-item label="关键词" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
|
||||
<a-input placeholder="请输入搜索关键词" v-model="queryRefsParam.tableName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-col :md="4" :sm="3">
|
||||
<a-button type="primary" style="left: 10px" @click="gettagTables" icon="search">查询</a-button>
|
||||
</a-col>
|
||||
<a-col :md="10" :sm="1">
|
||||
<a-form-item label="关键词">
|
||||
<a-input placeholder="请输入搜索关键词" v-model="queryRefsParam.tableName"></a-input>
|
||||
</a-form-item>
|
||||
</span>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<!-- table区域-begin -->
|
||||
<div style="height:calc(100vh - 360px);background: #e6e9f1;">
|
||||
<a-table ref="tagtable" size="middle" :loading="tagloading" :row-selection="tagrowSelection" bordered rowKey="id" :pagination="false" :scroll="{ x: false, y: tableScrollY }" :columns="tagcolumns" :dataSource="dataRefsSources">
|
||||
</a-table>
|
||||
</div>
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
<a-col :md="2">
|
||||
<div style="padding-top: 100%; padding-left: 15%;">
|
||||
<a-button type="primary" @click="addtag"> <a-icon type="left" />添加标签 </a-button>
|
||||
<div style="height: 50px;"></div>
|
||||
<a-button type="primary" @click="detag">移除标签<a-icon type="right" /> </a-button>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :md="11" style="padding:0 20px;">
|
||||
<div class="linese"></div>
|
||||
<a-form layout="inline" @keyup.enter.native="getalltable" style="margin-top: 10px;padding:10px; background: #e6e9f1;">
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="20" :sm="1">
|
||||
<a-form-item label="关键词">
|
||||
<a-input placeholder="请输入搜索关键词" v-model="queryParam.tableName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-col :md="4" :sm="3">
|
||||
<a-button type="primary" style="left: 10px" @click="getalltable" icon="search">查询</a-button>
|
||||
</a-col>
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-col :md="4" :sm="3" >
|
||||
<a-button type="primary" style="left: 10px" @click="gettagTables" icon="search">查询</a-button>
|
||||
</a-col>
|
||||
</span>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<!-- table区域-begin -->
|
||||
<div style="height:calc(100vh - 324px);">
|
||||
<a-table
|
||||
ref="tagtable"
|
||||
size="middle"
|
||||
:loading="tagloading"
|
||||
:row-selection="tagrowSelection"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:pagination="false"
|
||||
:scroll="{ x:false,y: tableScrollY }"
|
||||
:columns="tagcolumns"
|
||||
:dataSource="dataRefsSources">
|
||||
</a-table>
|
||||
</div>
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
<a-col :md="2">
|
||||
<div style="padding-top: 100%; padding-left: 15%;">
|
||||
<a-button type="primary" @click="addtag"> <a-icon type="left" />添加标签 </a-button>
|
||||
<div style="height: 50px;"></div>
|
||||
<a-button type="primary" @click="detag">移除标签<a-icon type="right" /> </a-button>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :md="11" style="padding:0 20px;">
|
||||
<div class="linese"></div>
|
||||
<a-form layout="inline" @keyup.enter.native="getalltable" style="margin-top: 10px; margin-left: 4px;">
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="20" :sm="1">
|
||||
<a-form-item label="关键词">
|
||||
<a-input placeholder="请输入搜索关键词" v-model="queryParam.tableName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-col :md="4" :sm="3" >
|
||||
<a-button type="primary" style="left: 10px" @click="getalltable" icon="search">查询</a-button>
|
||||
</a-col>
|
||||
</span>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<!-- table区域-begin -->
|
||||
<div ref="tableContainer" style="height:calc(100vh - 324px);">
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
:row-selection="rowSelection"
|
||||
bordered
|
||||
:loading="loading"
|
||||
:rowKey="getRowKey"
|
||||
:pagination="false"
|
||||
:scroll="{ x:false,y:tableScrollY }"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource">
|
||||
</a-table>
|
||||
</div>
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store/'
|
||||
import {getAction} from '@/api/manage'
|
||||
import { idcTableTagRef,
|
||||
getTableTagRefs,
|
||||
getAllTable,
|
||||
idcTableTagRefdelete } from '@/api/idcTableTagRef'
|
||||
import { idcTableTaglist } from '@/api/tag'
|
||||
export default {
|
||||
name: "dataManage",
|
||||
components: {
|
||||
</span>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<!-- table区域-begin -->
|
||||
<div ref="tableContainer" style="height:calc(100vh - 360px);background: #e6e9f1;">
|
||||
<a-table ref="table" size="middle" :row-selection="rowSelection" bordered :loading="loading" :rowKey="getRowKey" :pagination="false" :scroll="{ x: false, y: tableScrollY }" :columns="columns" :dataSource="dataSource">
|
||||
</a-table>
|
||||
</div>
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store/'
|
||||
import { getAction } from '@/api/manage'
|
||||
import {
|
||||
idcTableTagRef,
|
||||
getTableTagRefs,
|
||||
getAllTable,
|
||||
idcTableTagRefdelete
|
||||
} from '@/api/idcTableTagRef'
|
||||
import { idcTableTaglist } from '@/api/tag'
|
||||
export default {
|
||||
name: "dataManage",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '标准库',
|
||||
contentList: [],
|
||||
percent: 0,
|
||||
websock: {},
|
||||
queryRefsParam: {
|
||||
tableName: "",
|
||||
tagId: "",
|
||||
pageNum: 1,
|
||||
pageSize: 9999999,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '标准库',
|
||||
contentList:[],
|
||||
percent:0,
|
||||
websock:{},
|
||||
queryRefsParam: {
|
||||
tableName :"",
|
||||
tagId:"",
|
||||
pageNum :1,
|
||||
pageSize:9999999,
|
||||
},
|
||||
queryParam: {
|
||||
tableName :"",
|
||||
tagId:"",
|
||||
pageNum :1,
|
||||
pageSize:9999999,
|
||||
},
|
||||
datatagSources: [],
|
||||
dataRefsSources:[],
|
||||
dataSource:[
|
||||
],
|
||||
tagloading:false,
|
||||
loading:false,
|
||||
columns: [
|
||||
{
|
||||
title: '表名',
|
||||
align:"left",
|
||||
width: 220,
|
||||
dataIndex: 'tableName',
|
||||
},
|
||||
{
|
||||
title: '报文名',
|
||||
align:"left",
|
||||
dataIndex: 'tableMessName'
|
||||
},
|
||||
],
|
||||
tagcolumns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key:'id',
|
||||
width: 60,
|
||||
align:"center",
|
||||
customRender:function (t,r,index) {
|
||||
return parseInt(index)+1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '表名',
|
||||
align:"left",
|
||||
width: 220,
|
||||
dataIndex: 'tableName',
|
||||
},
|
||||
{
|
||||
title: '报文名',
|
||||
align:"left",
|
||||
dataIndex: 'tableMessName'
|
||||
},
|
||||
],
|
||||
tagqueryParam: {
|
||||
pageNum :1,
|
||||
pageSize:20,
|
||||
tagName:""
|
||||
},
|
||||
selectedRowKeys: [],
|
||||
tagselectedRowKeys: [],
|
||||
selectedRowData: [],
|
||||
tagselectedRowData: [],
|
||||
tableScrollY: 0,
|
||||
}
|
||||
queryParam: {
|
||||
tableName: "",
|
||||
tagId: "",
|
||||
pageNum: 1,
|
||||
pageSize: 9999999,
|
||||
},
|
||||
mounted() {
|
||||
this.getdatatagSources()
|
||||
this.calculateScrollY();
|
||||
},
|
||||
computed: {
|
||||
getRowKey(record) {
|
||||
return `${record.schemaName}_${record.tableName}`
|
||||
datatagSources: [],
|
||||
dataRefsSources: [],
|
||||
dataSource: [
|
||||
],
|
||||
tagloading: false,
|
||||
loading: false,
|
||||
columns: [
|
||||
{
|
||||
title: '表名',
|
||||
align: "left",
|
||||
width: 220,
|
||||
dataIndex: 'tableName',
|
||||
},
|
||||
rowSelection() {
|
||||
return {
|
||||
selectedRowKeys: this.selectedRowKeys,
|
||||
onChange: this.handleSelectChange,
|
||||
preserveSelectedRowKeys: true, // 保持选中项key
|
||||
type: 'checkbox', // 多选模式
|
||||
columnWidth: 60, // 选择列宽度
|
||||
getCheckboxProps: record => ({
|
||||
// 可以在这里设置禁用条件
|
||||
// disabled: record.disabled
|
||||
})
|
||||
{
|
||||
title: '报文名',
|
||||
align: "left",
|
||||
dataIndex: 'tableMessName'
|
||||
},
|
||||
],
|
||||
tagcolumns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key: 'id',
|
||||
width: 60,
|
||||
align: "center",
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1;
|
||||
}
|
||||
},
|
||||
tagrowSelection() {
|
||||
return {
|
||||
selectedRowKeys: this.tagselectedRowKeys,
|
||||
onChange: this.taghandleSelectChange,
|
||||
preserveSelectedRowKeys: true, // 保持选中项key
|
||||
type: 'checkbox', // 多选模式
|
||||
columnWidth: 60, // 选择列宽度
|
||||
getCheckboxProps: record => ({
|
||||
// 可以在这里设置禁用条件
|
||||
// disabled: record.disabled
|
||||
})
|
||||
}
|
||||
}
|
||||
{
|
||||
title: '表名',
|
||||
align: "left",
|
||||
width: 220,
|
||||
dataIndex: 'tableName',
|
||||
},
|
||||
{
|
||||
title: '报文名',
|
||||
align: "left",
|
||||
dataIndex: 'tableMessName'
|
||||
},
|
||||
],
|
||||
tagqueryParam: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
tagName: ""
|
||||
},
|
||||
destroyed: function () {
|
||||
},
|
||||
created () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
calculateScrollY() {
|
||||
// 获取父容器高度（需减去表格内其他元素的高度，如分页栏）
|
||||
const container = this.$refs.tableContainer;
|
||||
const paginationHeight = 64; // 根据实际分页栏高度调整
|
||||
this.tableScrollY = container.clientHeight - paginationHeight;
|
||||
},
|
||||
handleSelectChange(selectedRowKeys,row) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.selectedRowData = row
|
||||
},
|
||||
taghandleSelectChange(selectedRowKeys,row) {
|
||||
this.tagselectedRowKeys = selectedRowKeys
|
||||
this.tagselectedRowData = row
|
||||
},
|
||||
gattable(){
|
||||
this.getalltable();
|
||||
this.gettagTables();
|
||||
},
|
||||
getdatatagSources(){
|
||||
idcTableTaglist(this.tagqueryParam).then((res) => {
|
||||
if (res.success) {
|
||||
this.datatagSources = res.result.records;
|
||||
this.queryRefsParam.tagId = res.result.records[0].id;
|
||||
this.gattable();
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
dataAdd(){
|
||||
getAction("/dataSpecial/special").then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
addtag(){
|
||||
var that = this;
|
||||
this.selectedRowData.forEach(item => {
|
||||
idcTableTagRef({
|
||||
"tagId": that.queryParam.tagId,
|
||||
"tableName": item.tableName,
|
||||
"schemaName": item.schemaName
|
||||
}).then((res) => {
|
||||
if (res.success) {
|
||||
that.gattable();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
})
|
||||
this.selectedRowData = [];
|
||||
this.selectedRowKeys = [];
|
||||
},
|
||||
detag(){
|
||||
var that = this;
|
||||
this.tagselectedRowKeys.forEach(item => {
|
||||
idcTableTagRefdelete({id: item}).then((res) => {
|
||||
if (res.success) {
|
||||
that.gattable();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
this.tagselectedRowKeys = [];
|
||||
this.tagselectedRowData = [];
|
||||
},
|
||||
getalltable(){
|
||||
this.queryParam.tagId = this.queryRefsParam.tagId
|
||||
this.loading = true;
|
||||
getAllTable(this.queryParam).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result;
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
gettagTables(){
|
||||
this.tagloading = true;
|
||||
getTableTagRefs(this.queryRefsParam).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataRefsSources = res.result.records;
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
this.tagloading = false;
|
||||
});
|
||||
},
|
||||
selectedRowKeys: [],
|
||||
tagselectedRowKeys: [],
|
||||
selectedRowData: [],
|
||||
tagselectedRowData: [],
|
||||
tableScrollY: 0,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getdatatagSources()
|
||||
this.calculateScrollY();
|
||||
},
|
||||
computed: {
|
||||
getRowKey(record) {
|
||||
return `${record.schemaName}_${record.tableName}`
|
||||
},
|
||||
rowSelection() {
|
||||
return {
|
||||
selectedRowKeys: this.selectedRowKeys,
|
||||
onChange: this.handleSelectChange,
|
||||
preserveSelectedRowKeys: true, // 保持选中项key
|
||||
type: 'checkbox', // 多选模式
|
||||
columnWidth: 60, // 选择列宽度
|
||||
getCheckboxProps: record => ({
|
||||
// 可以在这里设置禁用条件
|
||||
// disabled: record.disabled
|
||||
})
|
||||
}
|
||||
},
|
||||
tagrowSelection() {
|
||||
return {
|
||||
selectedRowKeys: this.tagselectedRowKeys,
|
||||
onChange: this.taghandleSelectChange,
|
||||
preserveSelectedRowKeys: true, // 保持选中项key
|
||||
type: 'checkbox', // 多选模式
|
||||
columnWidth: 60, // 选择列宽度
|
||||
getCheckboxProps: record => ({
|
||||
// 可以在这里设置禁用条件
|
||||
// disabled: record.disabled
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
/deep/ .ant-table-bordered .ant-table-header > table {
|
||||
border: none !important;
|
||||
}
|
||||
</style>
|
||||
},
|
||||
destroyed: function () {
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
calculateScrollY() {
|
||||
// 获取父容器高度（需减去表格内其他元素的高度，如分页栏）
|
||||
const container = this.$refs.tableContainer;
|
||||
const paginationHeight = 64; // 根据实际分页栏高度调整
|
||||
this.tableScrollY = container.clientHeight - paginationHeight;
|
||||
},
|
||||
handleSelectChange(selectedRowKeys, row) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.selectedRowData = row
|
||||
},
|
||||
taghandleSelectChange(selectedRowKeys, row) {
|
||||
this.tagselectedRowKeys = selectedRowKeys
|
||||
this.tagselectedRowData = row
|
||||
},
|
||||
gattable() {
|
||||
this.getalltable();
|
||||
this.gettagTables();
|
||||
},
|
||||
getdatatagSources() {
|
||||
idcTableTaglist(this.tagqueryParam).then((res) => {
|
||||
if (res.success) {
|
||||
this.datatagSources = res.result.records;
|
||||
this.queryRefsParam.tagId = res.result.records[0].id;
|
||||
this.gattable();
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
dataAdd() {
|
||||
getAction("/dataSpecial/special").then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
addtag() {
|
||||
var that = this;
|
||||
this.selectedRowData.forEach(item => {
|
||||
idcTableTagRef({
|
||||
"tagId": that.queryParam.tagId,
|
||||
"tableName": item.tableName,
|
||||
"schemaName": item.schemaName
|
||||
}).then((res) => {
|
||||
if (res.success) {
|
||||
that.gattable();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
})
|
||||
this.selectedRowData = [];
|
||||
this.selectedRowKeys = [];
|
||||
},
|
||||
detag() {
|
||||
var that = this;
|
||||
this.tagselectedRowKeys.forEach(item => {
|
||||
idcTableTagRefdelete({ id: item }).then((res) => {
|
||||
if (res.success) {
|
||||
that.gattable();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
this.tagselectedRowKeys = [];
|
||||
this.tagselectedRowData = [];
|
||||
},
|
||||
getalltable() {
|
||||
this.queryParam.tagId = this.queryRefsParam.tagId
|
||||
this.loading = true;
|
||||
getAllTable(this.queryParam).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result;
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
gettagTables() {
|
||||
this.tagloading = true;
|
||||
getTableTagRefs(this.queryRefsParam).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataRefsSources = res.result.records;
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
this.tagloading = false;
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
/deep/ .ant-table-bordered .ant-table-header>table {
|
||||
border: none !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,43 +1,35 @@
|
|||
<template>
|
||||
<a-row :gutter="30" style="padding: 0 10px;">
|
||||
<a-col :md="14" >
|
||||
<a-col :md="14">
|
||||
<div class="linese"></div>
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper" style="background: rgb(18, 44, 65);">
|
||||
<a-select placeholder="选择数据类型" option-filter-prop="children" v-model="datatypequeryParam.schemaName" @change="getTables" style="width: 40%;">
|
||||
<a-select-option v-for="d in dataTypedataSources" :key="d.enName">
|
||||
{{ d.cnName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<!-- table区域-begin -->
|
||||
<div ref="tableContainer" style="height:calc(100vh - 347px);background: rgb(18, 44, 65);padding:10px;">
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
:pagination="false"
|
||||
:scroll="{ y: tableScrollY }"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource">
|
||||
<!-- :locale="myLocale"-->
|
||||
<div class="table-page-search-wrapper" style="background: #e6e9f1;padding:10px;">
|
||||
<a-select placeholder="选择数据类型" option-filter-prop="children" v-model="datatypequeryParam.schemaName" @change="getTables" style="width: 40%;">
|
||||
<a-select-option v-for="d in dataTypedataSources" :key="d.enName">
|
||||
{{ d.cnName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<!-- table区域-begin -->
|
||||
<div ref="tableContainer" style="height:calc(100vh - 347px);background: #e6e9f1;padding:10px;">
|
||||
<a-table ref="table" size="middle" bordered :pagination="false" :scroll="{ y: tableScrollY }" rowKey="id" :columns="columns" :dataSource="dataSource">
|
||||
<!-- :locale="myLocale"-->
|
||||
|
||||
<!-- 字符串超长截取省略号显示-->
|
||||
</a-table>
|
||||
</div>
|
||||
<!-- 字符串超长截取省略号显示-->
|
||||
</a-table>
|
||||
</div>
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
<a-col :md="10">
|
||||
<div class="linese"></div>
|
||||
<a-card :bordered="false" style="background: rgb(18, 44, 65) !important;">
|
||||
<a-card :bordered="false" style="background: #e6e9f1 !important;">
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<div class="table-page-search-wrapper" style="padding:10px;">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="12">
|
||||
<a-form-item label="日志类型">
|
||||
<a-select placeholder="选择日志类型" option-filter-prop="children" size="large" v-model="queryParam.syncState">
|
||||
<a-select placeholder="选择日志类型" option-filter-prop="children" size="large" v-model="queryParam.syncState">
|
||||
<a-select-option key="">
|
||||
全部
|
||||
</a-select-option>
|
||||
|
|
@ -65,13 +57,13 @@
|
|||
<!-- table区域-begin -->
|
||||
<div class="datacleanResult">
|
||||
<div class="progressbg">
|
||||
<div class="title">清洗进度：</div>
|
||||
<div class="title">清洗进度:</div>
|
||||
<a-progress :percent="percent" status="active" class="progress" />
|
||||
</div>
|
||||
<a-list :data-source="contentList" style="padding:10px 20px;">
|
||||
<a-list-item slot="renderItem" slot-scope="item">
|
||||
{{ item }}
|
||||
</a-list-item>
|
||||
{{ item }}
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</div>
|
||||
</a-card>
|
||||
|
|
@ -81,197 +73,204 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store/'
|
||||
import {getAction} from '@/api/manage'
|
||||
import {
|
||||
dataTypePageList,
|
||||
dataTypeDeleteById } from '@/api/dataType'
|
||||
export default {
|
||||
name: "dataCleansing",
|
||||
components: {
|
||||
import store from '@/store/'
|
||||
import { getAction } from '@/api/manage'
|
||||
import {
|
||||
dataTypePageList,
|
||||
dataTypeDeleteById
|
||||
} from '@/api/dataType'
|
||||
export default {
|
||||
name: "dataCleansing",
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '原始库',
|
||||
contentList: [],
|
||||
percent: 0,
|
||||
websock: {},
|
||||
datatypequeryParam: {
|
||||
schemaName: "",
|
||||
sourceType: 1
|
||||
},
|
||||
queryParam: {
|
||||
pageNum: 1,
|
||||
pageSize: 9999999,
|
||||
},
|
||||
dataTypedataSources: [],
|
||||
dataSource: [
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key: 'id',
|
||||
width: 60,
|
||||
align: "id",
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '表名',
|
||||
align: "center",
|
||||
dataIndex: 'tableName',
|
||||
},
|
||||
{
|
||||
title: '报文名',
|
||||
align: "center",
|
||||
dataIndex: 'tableMessName'
|
||||
},
|
||||
{
|
||||
title: '开始时间',
|
||||
align: "center",
|
||||
dataIndex: 'startTime'
|
||||
},
|
||||
{
|
||||
title: '最后更新时间',
|
||||
align: "center",
|
||||
dataIndex: 'endTime'
|
||||
},
|
||||
{
|
||||
title: '标签类型',
|
||||
align: "center",
|
||||
dataIndex: 'tagNames'
|
||||
},
|
||||
],
|
||||
tableScrollY: 0,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
//初始化websocket
|
||||
this.initWebSocket()
|
||||
this.getselect()
|
||||
this.calculateScrollY();
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
destroyed: function () { // 离开页面生命周期函数
|
||||
var userId = store.getters.userInfo.id;
|
||||
this.websock.send("close_" + userId);
|
||||
this.websocketclose();
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
calculateScrollY() {
|
||||
// 获取父容器高度（需减去表格内其他元素的高度，如分页栏）
|
||||
const container = this.$refs.tableContainer;
|
||||
const paginationHeight = 64; // 根据实际分页栏高度调整
|
||||
this.tableScrollY = container.clientHeight - paginationHeight;
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
description: '原始库',
|
||||
contentList:[],
|
||||
percent:0,
|
||||
websock:{},
|
||||
datatypequeryParam: {
|
||||
schemaName:"",
|
||||
sourceType:1
|
||||
},
|
||||
queryParam: {
|
||||
pageNum :1,
|
||||
pageSize:9999999,
|
||||
},
|
||||
dataTypedataSources: [],
|
||||
dataSource:[
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key:'id',
|
||||
width:60,
|
||||
align:"id",
|
||||
customRender:function (t,r,index) {
|
||||
return parseInt(index)+1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '表名',
|
||||
align:"center",
|
||||
dataIndex: 'tableName',
|
||||
},
|
||||
{
|
||||
title: '报文名',
|
||||
align:"center",
|
||||
dataIndex: 'tableMessName'
|
||||
},
|
||||
{
|
||||
title: '开始时间',
|
||||
align:"center",
|
||||
dataIndex: 'startTime'
|
||||
},
|
||||
{
|
||||
title: '最后更新时间',
|
||||
align:"center",
|
||||
dataIndex: 'endTime'
|
||||
},
|
||||
{
|
||||
title: '标签类型',
|
||||
align:"center",
|
||||
dataIndex: 'tagNames'
|
||||
},
|
||||
],
|
||||
tableScrollY: 0,
|
||||
initWebSocket: function () {
|
||||
// WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
|
||||
var userId = store.getters.userInfo.id;
|
||||
var url = window._CONFIG['domianURL'].replace("https://", "ws://").replace("http://", "ws://") + "/websocket/" + userId + "/data_cleaning";
|
||||
this.websock = new WebSocket(url);
|
||||
this.websock.onopen = this.websocketonopen;
|
||||
this.websock.onerror = this.websocketonerror;
|
||||
this.websock.onmessage = this.websocketonmessage;
|
||||
this.websock.onclose = this.websocketclose;
|
||||
},
|
||||
websocketonopen: function () {
|
||||
this.contentList.unshift("消息服务连接成功");
|
||||
},
|
||||
websocketonerror: function (e) {
|
||||
this.contentList.unshift("消息服务连接失败" + JSON.stringify(e));
|
||||
},
|
||||
websocketonmessage: function (e) {
|
||||
var data = eval("(" + e.data + ")");
|
||||
if (data.content.length > 0) {
|
||||
this.contentList.unshift(data.content);
|
||||
}
|
||||
if (data.currProgress != null) {
|
||||
this.percent = data.currProgress;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
//初始化websocket
|
||||
this.initWebSocket()
|
||||
this.getselect()
|
||||
this.calculateScrollY();
|
||||
websocketclose: function (e) {
|
||||
console.log("connection closed (" + e + ")");
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
destroyed: function () { // 离开页面生命周期函数
|
||||
var userId = store.getters.userInfo.id;
|
||||
this.websock.send("close_"+userId);
|
||||
this.websocketclose();
|
||||
},
|
||||
created () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
calculateScrollY() {
|
||||
// 获取父容器高度（需减去表格内其他元素的高度，如分页栏）
|
||||
const container = this.$refs.tableContainer;
|
||||
const paginationHeight = 64; // 根据实际分页栏高度调整
|
||||
this.tableScrollY = container.clientHeight - paginationHeight;
|
||||
},
|
||||
initWebSocket: function () {
|
||||
// WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
|
||||
var userId = store.getters.userInfo.id;
|
||||
var url = window._CONFIG['domianURL'].replace("https://","ws://").replace("http://","ws://")+"/websocket/"+userId+"/data_cleaning";
|
||||
this.websock = new WebSocket(url);
|
||||
this.websock.onopen = this.websocketonopen;
|
||||
this.websock.onerror = this.websocketonerror;
|
||||
this.websock.onmessage = this.websocketonmessage;
|
||||
this.websock.onclose = this.websocketclose;
|
||||
},
|
||||
websocketonopen: function () {
|
||||
this.contentList.unshift("消息服务连接成功");
|
||||
},
|
||||
websocketonerror: function (e) {
|
||||
this.contentList.unshift("消息服务连接失败"+JSON.stringify(e));
|
||||
},
|
||||
websocketonmessage: function (e) {
|
||||
var data = eval("(" + e.data + ")");
|
||||
if(data.content.length >0){
|
||||
this.contentList.unshift(data.content);
|
||||
dataAdd() {
|
||||
getAction("/dataCleaning/cleaning?taskId=3806ce79-dc28-48a3-9250-c7729e6b3ad4").then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message);
|
||||
}
|
||||
if(data.currProgress != null){
|
||||
this.percent = data.currProgress;
|
||||
});
|
||||
},
|
||||
getselect() {
|
||||
dataTypePageList(this.queryParam).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataTypedataSources = res.result.rows || res.result;
|
||||
this.datatypequeryParam.schemaName = res.result.rows[0].cnName
|
||||
this.getTables();
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
},
|
||||
websocketclose: function (e) {
|
||||
console.log("connection closed (" + e + ")");
|
||||
},
|
||||
dataAdd(){
|
||||
getAction("/dataCleaning/cleaning?taskId=3806ce79-dc28-48a3-9250-c7729e6b3ad4").then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
getselect(){
|
||||
dataTypePageList(this.queryParam).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataTypedataSources = res.result.rows||res.result;
|
||||
this.datatypequeryParam.schemaName = res.result.rows[0].cnName
|
||||
this.getTables();
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
getTables(){
|
||||
getAction("/dataManager/getDataManagerInfo",this.datatypequeryParam).then((res) => {
|
||||
if (res.result) {
|
||||
this.dataSource = res.result;
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
},
|
||||
getTables() {
|
||||
getAction("/dataManager/getDataManagerInfo", this.datatypequeryParam).then((res) => {
|
||||
if (res.result) {
|
||||
this.dataSource = res.result;
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
/deep/ .ant-table-bordered .ant-table-header > table {
|
||||
border: none !important;
|
||||
}
|
||||
.datacleanResult{
|
||||
height:calc(100vh - 374px);
|
||||
overflow-y:auto;
|
||||
margin: 10px;
|
||||
background: rgb(11,34,52);
|
||||
/deep/ .ant-table-bordered .ant-table-header>table {
|
||||
border: none !important;
|
||||
}
|
||||
.datacleanResult .progressbg{
|
||||
|
||||
.datacleanResult {
|
||||
height: calc(100vh - 374px);
|
||||
overflow-y: auto;
|
||||
margin: 10px;
|
||||
background: #F1F4FA;
|
||||
}
|
||||
|
||||
.datacleanResult .progressbg {
|
||||
margin: 10px;
|
||||
height: 60px;
|
||||
padding:20px 10px;
|
||||
background: rgb(17,42,64);
|
||||
|
||||
padding: 20px 10px;
|
||||
background: #D6DAE2;
|
||||
|
||||
}
|
||||
.datacleanResult .title{
|
||||
|
||||
.datacleanResult .title {
|
||||
width: 14%;
|
||||
font-size: 16px;
|
||||
float: left;
|
||||
text-align: right;
|
||||
line-height: 20px;
|
||||
color:#fff;
|
||||
color: #363F56;
|
||||
}
|
||||
.datacleanResult .progress{
|
||||
|
||||
.datacleanResult .progress {
|
||||
width: 86%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.datacleanResult .ant-progress-bg,
|
||||
.datacleanResult .ant-progress-inner{
|
||||
.datacleanResult .ant-progress-inner {
|
||||
height: 16px !important;
|
||||
}
|
||||
.datacleanResult .ant-progress-bg{
|
||||
background: linear-gradient(180deg, rgb(43,97,48),rgb(75,160,75),rgb(43,97,48));
|
||||
|
||||
.datacleanResult .ant-progress-bg {
|
||||
background: linear-gradient(180deg, rgb(43, 97, 48), rgb(75, 160, 75), rgb(43, 97, 48));
|
||||
}
|
||||
|
||||
/deep/ .datacleanResult .ant-progress-text{
|
||||
color:#fff !important;
|
||||
}
|
||||
.datacleanResult .ant-list-items{
|
||||
border-bottom:1px dashed rgb(35,72,100);
|
||||
color:#fff;
|
||||
/deep/ .datacleanResult .ant-progress-text {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.datacleanResult .ant-list-items {
|
||||
border-bottom: 1px dashed rgb(35, 72, 100);
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,28 +1,28 @@
|
|||
<template>
|
||||
<div style="margin-top: 10px; margin-left: 10px;">
|
||||
<div style="margin-top: -10px;">
|
||||
<a-row :gutter="20">
|
||||
<a-col :md="12" :sm="1" style="height:calc(50vh - 125px);">
|
||||
<div class="linese"></div>
|
||||
<div class="echartsTitle"><div class="ecicon"></div>数据清洗差异统计</div>
|
||||
<div id="cleaningVariance" class="cleaningVariance" ref="cleaningVariance" style="width: 100%; height: calc(100% - 70px);"></div>
|
||||
<div id="cleaningVariance" class="cleaningVariance" ref="cleaningVariance" style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="2" style="height:calc(50vh - 125px);">
|
||||
<div class="linese"></div>
|
||||
<div class="echartsTitle"><div class="ecicon"></div>数据编目总量统计</div>
|
||||
<div id="totalNumberCatalogues" class="totalNumberCatalogues" ref="totalNumberCatalogues" style="width: 100%; height: calc(100% - 70px); "></div>
|
||||
<div id="totalNumberCatalogues" class="totalNumberCatalogues" ref="totalNumberCatalogues" style="width: 100%;background:#e6e9f1; height: calc(100% - 70px); "></div>
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="3" style="height:calc(50vh - 125px);">
|
||||
<div class="linese"></div>
|
||||
<div class="echartsTitle"><div class="ecicon"></div>数据类型存储占比统计</div>
|
||||
<div id="catalogingStorage" class="catalogingStorage" ref="catalogingStorage" style="width: 100%; height: calc(100% - 70px);"></div>
|
||||
<div id="catalogingStorage" class="catalogingStorage" ref="catalogingStorage" style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="4" style="height:calc(50vh - 125px);">
|
||||
<div class="linese"></div>
|
||||
<div class="echartsTitle"><div class="ecicon"></div>数据编目存储占比统计</div>
|
||||
<div id="typeStorage" class="typeStorage" ref="typeStorage" style="width: 100%; height: calc(100% - 70px);"></div>
|
||||
<div id="typeStorage" class="typeStorage" ref="typeStorage" style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
|
@ -105,41 +105,41 @@
|
|||
var option = {
|
||||
tooltip: {},
|
||||
grid:{
|
||||
left:'40px',
|
||||
left:'80px',
|
||||
right:'20px',
|
||||
top:'20px',
|
||||
bottom:'20px'
|
||||
bottom:'30px'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category' ,
|
||||
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
color: '#6C758B'
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
color: '#6C758B'
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
color: '#6C758B'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
color: '#6C758B'
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
color: '#6C758B'
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
color: '#6C758B'
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
@ -164,38 +164,38 @@
|
|||
left:'40px',
|
||||
right:'20px',
|
||||
top:'20px',
|
||||
bottom:'20px'
|
||||
bottom:'30px'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category' ,
|
||||
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
color: '#6C758B'
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
color: '#6C758B'
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
color: '#6C758B'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
color: '#6C758B'
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
color: '#6C758B'
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
color: '#6C758B'
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@
|
|||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="30" style="margin:-80px 0 20px;">
|
||||
<a-row :gutter="30">
|
||||
<a-col :md="20" >
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
</span>
|
||||
</a-col>
|
||||
<a-col :md="4">
|
||||
<a-col :md="4" style="margin-top:-65px; z-index: 12;">
|
||||
<span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
</span>
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<div style="height:calc(100vh - 300px);overflow:hidden;padding: 0 20px;">
|
||||
<div style="height:calc(100vh - 300px);overflow:hidden;">
|
||||
<div class="linese"></div>
|
||||
<a-table
|
||||
ref="table"
|
||||
|
|
|
|||
|
|
@ -1,220 +1,218 @@
|
|||
<template>
|
||||
<div style="margin-left: 10px;">
|
||||
<div>
|
||||
<a-row :gutter=20>
|
||||
<a-col :md="7">
|
||||
|
||||
<div class="linese"></div>
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="30">
|
||||
<a-col :md="18" :sm="10" >
|
||||
<a-form-item label="关键词">
|
||||
<a-input placeholder="请输入搜索关键词" v-model="queryParam.name"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="10" >
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button @click="loadData" type="primary" v-has="'cont:btn'" icon="search">查询</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<div class="linese"></div>
|
||||
<div class="table-page-search-wrapper" style="background:#e6e9f1;padding: 10px;">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="30">
|
||||
<a-col :md="18" :sm="10">
|
||||
<a-form-item label="关键词">
|
||||
<a-input placeholder="请输入搜索关键词" v-model="queryParam.name"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="10">
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button @click="loadData" type="primary" v-has="'cont:btn'" icon="search">查询</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
style="height:calc(100vh - 359px);"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
@change="handleTableChange">
|
||||
<a-table ref="table" size="middle" style="height:calc(100vh - 343px);background:#e6e9f1;padding: 10px;" bordered rowKey="id" :columns="columns" :dataSource="dataSource" @change="handleTableChange">
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">选中</a>
|
||||
</span>
|
||||
</a-table>
|
||||
|
||||
<div class="linese"></div>
|
||||
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
<a-col :md="17" style="padding-right:20px;">
|
||||
|
||||
<a-col :md="17" style="padding-right:10px;">
|
||||
|
||||
<div class="linese"></div>
|
||||
<a-row>
|
||||
<div style="margin-left: 10px;">
|
||||
|
||||
<a-col :span="5" class="quarter-div">
|
||||
<a-col :span="8">
|
||||
<img src="~@/assets/img/icon-结构化数据条数.png" />
|
||||
</a-col>
|
||||
<a-col :span="16">
|
||||
<div class="datanum">{{fileNum.totalNumRow}}</div>
|
||||
<div>结构化数据条数</div>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<img src="~@/assets/img/icon-结构化数据条数.png" />
|
||||
</a-col>
|
||||
<a-col :span="16">
|
||||
<div class="datanum">{{ fileNum.totalNumRow }}</div>
|
||||
<div>结构化数据条数</div>
|
||||
</a-col>
|
||||
</a-col>
|
||||
<a-col :span="5" class="quarter-div">
|
||||
<a-col :span="8">
|
||||
<img src="~@/assets/img/icon非结构化文件大小.png" />
|
||||
</a-col>
|
||||
<a-col :span="16">
|
||||
<div class="datanum">{{fileNum.totalFileSize}}GB</div>
|
||||
<div>非结构化文件(大小)</div>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<img src="~@/assets/img/icon非结构化文件大小.png" />
|
||||
</a-col>
|
||||
<a-col :span="16">
|
||||
<div class="datanum">{{ fileNum.totalFileSize }}GB</div>
|
||||
<div>非结构化文件(大小)</div>
|
||||
</a-col>
|
||||
</a-col>
|
||||
<a-col :span="4" class="quarter-div">
|
||||
<a-col :span="10">
|
||||
<img src="~@/assets/img/icon-表数量.png" />
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<div class="datanum">{{fileNum.tableCount}}</div>
|
||||
<div>表数量</div>
|
||||
</a-col>
|
||||
<a-col :span="10">
|
||||
<img src="~@/assets/img/icon-表数量.png" />
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<div class="datanum">{{ fileNum.tableCount }}</div>
|
||||
<div>表数量</div>
|
||||
</a-col>
|
||||
</a-col>
|
||||
<a-col :span="4" class="quarter-div">
|
||||
<a-col :span="10">
|
||||
<img src="~@/assets/img/icon-文件接引数量.png" />
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<div class="datanum">{{ fileNum.fileLinkCount }}</div>
|
||||
<div>文件接引数量</div>
|
||||
</a-col>
|
||||
<a-col :span="10">
|
||||
<img src="~@/assets/img/icon-文件接引数量.png" />
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<div class="datanum">{{ fileNum.fileLinkCount }}</div>
|
||||
<div>文件接引数量</div>
|
||||
</a-col>
|
||||
</a-col>
|
||||
<a-col :span="4" class="quarter-div">
|
||||
<a-col :span="10">
|
||||
<img src="~@/assets/img/icon-文档数量.png" />
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<div class="datanum">{{ fileNum.docFileCount }}</div>
|
||||
<div>文档数量</div>
|
||||
</a-col>
|
||||
<a-col :span="10">
|
||||
<img src="~@/assets/img/icon-文档数量.png" />
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<div class="datanum">{{ fileNum.docFileCount }}</div>
|
||||
<div>文档数量</div>
|
||||
</a-col>
|
||||
</a-col>
|
||||
</div>
|
||||
</a-row>
|
||||
|
||||
|
||||
<div class="linese"></div>
|
||||
<div class="linese"></div>
|
||||
<a-row :gutter="20">
|
||||
<a-col :md="12" :sm="1" style="height:calc(100vh - 420px);">
|
||||
<div class="echartsTitle"><div class="ecicon"></div>数据清洗差异统计</div>
|
||||
<div id="cleaningVariance" ref="cleaningVariance" style="width: 100%; height: calc(100% - 36px);background:rgb(8,34,52);"></div>
|
||||
<a-row :gutter="20" >
|
||||
<a-col :md="12" :sm="1" style="height:calc(100vh - 422px);">
|
||||
<div class="echartsTitle">
|
||||
<div class="ecicon"></div>数据清洗差异统计
|
||||
</div>
|
||||
<div id="cleaningVariance" ref="cleaningVariance" style="width: 100%; height: calc(100% - 31px);background:#e6e9f1;"></div>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="2" style="height:calc(100vh - 420px);padding-right:20px;">
|
||||
<div class="echartsTitle"><div class="ecicon"></div>数据类型存储占比统计</div>
|
||||
<div id="totalNumberCatalogues" ref="totalNumberCatalogues" style="width: 100%; height: calc(100% - 36px);background:rgb(8,34,52);"></div>
|
||||
<a-col :md="12" :sm="2" style="height:calc(100vh - 422px);padding-right:20px;">
|
||||
<div class="echartsTitle">
|
||||
<div class="ecicon"></div>数据类型存储占比统计
|
||||
</div>
|
||||
<div id="totalNumberCatalogues" ref="totalNumberCatalogues" style="width: 100%; height: calc(100% - 31px);background:#e6e9f1;"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { shipModelPageList,
|
||||
shipModeldeleteById } from '@/api/ship'
|
||||
import { getDataAnalysis,
|
||||
taskPageList,
|
||||
getTaskDataTypeAnalysis } from '@/api/task'
|
||||
import { getAction } from '@/api/manage'
|
||||
</template>
|
||||
|
||||
import JEllipsis from "@/components/jeecg/JEllipsis";
|
||||
export default {
|
||||
name: "statistics",
|
||||
components: {
|
||||
<script>
|
||||
import {
|
||||
shipModelPageList,
|
||||
shipModeldeleteById
|
||||
} from '@/api/ship'
|
||||
import {
|
||||
getDataAnalysis,
|
||||
taskPageList,
|
||||
getTaskDataTypeAnalysis
|
||||
} from '@/api/task'
|
||||
import { getAction } from '@/api/manage'
|
||||
|
||||
import JEllipsis from "@/components/jeecg/JEllipsis";
|
||||
export default {
|
||||
name: "statistics",
|
||||
components: {
|
||||
JEllipsis
|
||||
},
|
||||
data () {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '任务统计',
|
||||
dataSource: [],
|
||||
queryParam: {
|
||||
pageNum :1,
|
||||
pageSize:20,
|
||||
name:""
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key:'id',
|
||||
width:60,
|
||||
align:"id",
|
||||
customRender:function (t,r,index) {
|
||||
return parseInt(index)+1;
|
||||
description: '任务统计',
|
||||
dataSource: [],
|
||||
queryParam: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
name: ""
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key: 'id',
|
||||
width: 60,
|
||||
align: "id",
|
||||
customRender: function (t, r, index) {
|
||||
return parseInt(index) + 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '任务名称',
|
||||
align: "name",
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '结束时间',
|
||||
align: "endTime",
|
||||
dataIndex: 'endTime',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align: "center",
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
fileNum: {
|
||||
totalNumRow: 0,
|
||||
tableCount: 0,
|
||||
docFileCount: 0,
|
||||
totalFileSize: 0,
|
||||
fileLinkCount: 0
|
||||
},
|
||||
{
|
||||
title: '任务名称',
|
||||
align:"name",
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '结束时间',
|
||||
align:"endTime",
|
||||
dataIndex: 'endTime',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
align:"center",
|
||||
width:180,
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
fileNum:{
|
||||
totalNumRow:0,
|
||||
tableCount:0,
|
||||
docFileCount:0,
|
||||
totalFileSize:0,
|
||||
fileLinkCount:0
|
||||
},
|
||||
cleaningVariancesource:[],
|
||||
totalNumberCataloguesData:[]
|
||||
cleaningVariancesource: [],
|
||||
totalNumberCataloguesData: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadData();
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
mounted() {
|
||||
this.loadData();
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
destroyed: function () {
|
||||
},
|
||||
created () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
},
|
||||
destroyed: function () {
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleTableChange(pagination, filters, sorter) {
|
||||
if (Object.keys(sorter).length > 0) {
|
||||
this.isorter.column = sorter.field;
|
||||
this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
|
||||
this.isorter.column = sorter.field;
|
||||
this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
|
||||
}
|
||||
this.ipagination = pagination;
|
||||
this.loadData();
|
||||
},
|
||||
handleEdit(value){
|
||||
this.cleaningVariancesource =[];
|
||||
getDataAnalysis({taskId:value.id,startDate:value.startTime,endDate:value.endTime}).then((res) => {
|
||||
handleEdit(value) {
|
||||
this.cleaningVariancesource = [];
|
||||
getDataAnalysis({ taskId: value.id, startDate: value.startTime, endDate: value.endTime }).then((res) => {
|
||||
if (res.success) {
|
||||
res.result.schemaNames.forEach(row => {
|
||||
this.cleaningVariancesource.push([row, parseInt(res.result.numRowMap[row]) ])
|
||||
})
|
||||
this.fileNum.totalNumRow = res.result.totalNumRow
|
||||
this.fileNum.tableCount = res.result.tableCount
|
||||
this.fileNum.docFileCount = res.result.docFileCount
|
||||
this.fileNum.totalFileSize = res.result.totalFileSize
|
||||
this.fileNum.fileLinkCount = res.result.fileLinkCount
|
||||
this.getcleaningVariance();
|
||||
res.result.schemaNames.forEach(row => {
|
||||
this.cleaningVariancesource.push([row, parseInt(res.result.numRowMap[row])])
|
||||
})
|
||||
this.fileNum.totalNumRow = res.result.totalNumRow
|
||||
this.fileNum.tableCount = res.result.tableCount
|
||||
this.fileNum.docFileCount = res.result.docFileCount
|
||||
this.fileNum.totalFileSize = res.result.totalFileSize
|
||||
this.fileNum.fileLinkCount = res.result.fileLinkCount
|
||||
this.getcleaningVariance();
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
this.totalNumberCataloguesData =[]
|
||||
getTaskDataTypeAnalysis({taskId:value.id,startDate:value.startTime,endDate:value.endTime}).then((res) => {
|
||||
this.totalNumberCataloguesData = []
|
||||
getTaskDataTypeAnalysis({ taskId: value.id, startDate: value.startTime, endDate: value.endTime }).then((res) => {
|
||||
if (res.success) {
|
||||
res.result.typeName.forEach(row => {
|
||||
this.totalNumberCataloguesData.push({ value: parseFloat(res.result.numRowMap[row]), name: row })
|
||||
})
|
||||
this.gettotalNumberCatalogues();
|
||||
res.result.typeName.forEach(row => {
|
||||
this.totalNumberCataloguesData.push({ value: parseFloat(res.result.numRowMap[row]), name: row })
|
||||
})
|
||||
this.gettotalNumberCatalogues();
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
|
|
@ -223,115 +221,116 @@
|
|||
loadData() {
|
||||
taskPageList(this.queryParam).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.rows||res.result;
|
||||
this.dataSource = res.result.rows || res.result;
|
||||
this.handleEdit(res.result.rows[0]);
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
getcleaningVariance(){
|
||||
var myChart = this.$echarts.init(this.$refs.cleaningVariance);
|
||||
var option = {
|
||||
getcleaningVariance() {
|
||||
var myChart = this.$echarts.init(this.$refs.cleaningVariance);
|
||||
var option = {
|
||||
legend: {},
|
||||
tooltip: {},
|
||||
grid:{
|
||||
left:'40px',
|
||||
right:'20px',
|
||||
top:'20px',
|
||||
bottom:'20px'
|
||||
grid: {
|
||||
left: '50px',
|
||||
right: '20px',
|
||||
top: '20px',
|
||||
bottom: '30px'
|
||||
},
|
||||
dataset: {
|
||||
source: this.cleaningVariancesource
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
color: '#6C758B'
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color:'#6C758B'
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#6C758B'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
axisLabel: {
|
||||
color: '#6C758B'
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#6C758B'
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#6C758B'
|
||||
}
|
||||
},
|
||||
},
|
||||
// Declare several bar series, each will be mapped
|
||||
// to a column of dataset.source by default.
|
||||
series: [{ type: 'bar',barMaxWidth: 20, }],
|
||||
color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
||||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
gettotalNumberCatalogues(){
|
||||
var myChart = this.$echarts.init(this.$refs.totalNumberCatalogues);
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '占比',
|
||||
type: 'pie',
|
||||
radius: '80%',
|
||||
data: this.totalNumberCataloguesData,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
||||
series: [{ type: 'bar', barMaxWidth: 20, }],
|
||||
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
||||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
gettotalNumberCatalogues() {
|
||||
var myChart = this.$echarts.init(this.$refs.totalNumberCatalogues);
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '占比',
|
||||
type: 'pie',
|
||||
radius: '80%',
|
||||
data: this.totalNumberCataloguesData,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
||||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.quarter-div {
|
||||
height: 100px;
|
||||
float: left;
|
||||
margin-right: 16px;
|
||||
border: 2px solid rgb(11,72,98);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.quarter-div div{
|
||||
text-align: left;
|
||||
line-height: 30px;
|
||||
}
|
||||
.quarter-div .datanum{
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.quarter-div .ant-col-8,
|
||||
.quarter-div .ant-col-10
|
||||
{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.quarter-div {
|
||||
height: 100px;
|
||||
float: left;
|
||||
margin-right: 16px;
|
||||
background: #092776;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.quarter-div div {
|
||||
text-align: left;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.quarter-div .datanum {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.quarter-div .ant-col-8,
|
||||
.quarter-div .ant-col-10 {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user