样式修改，分割线/echarts/字体
This commit is contained in:
su
parent
3fb9693bb2
commit
cfe4a17fda
BIN
src/assets/img/echartsTitlebg.png
Normal file
BIN
src/assets/img/echartsTitlebg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/img/icon-logo.png
Normal file
BIN
src/assets/img/icon-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
src/assets/img/icon-文件接引数量.png
Normal file
BIN
src/assets/img/icon-文件接引数量.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
src/assets/img/icon-文档数量.png
Normal file
BIN
src/assets/img/icon-文档数量.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
src/assets/img/icon-结构化数据条数.png
Normal file
BIN
src/assets/img/icon-结构化数据条数.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
src/assets/img/icon-表数量.png
Normal file
BIN
src/assets/img/icon-表数量.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
src/assets/img/icon非结构化文件大小.png
Normal file
BIN
src/assets/img/icon非结构化文件大小.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 MiB After Width: | Height: | Size: 169 KiB |
BIN
src/assets/img/main-logo.png
Normal file
BIN
src/assets/img/main-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 14 KiB |
BIN
src/assets/less/Acens-1.ttf
Normal file
BIN
src/assets/less/Acens-1.ttf
Normal file
Binary file not shown.
|
|
@ -117,7 +117,6 @@
|
|||
z-index: 15000;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
overflow-x: auto;
|
||||
margin: 2px 0;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,58 @@
|
|||
@bordercolor : #C8C8C8;
|
||||
@bordercolor : rgb(98,133,151);
|
||||
@headercolor : #ffffff;
|
||||
@backcolor : #ffffff;
|
||||
@inpuitbackcolor : #ffffff;
|
||||
@labelDeaultColor : #000000;
|
||||
@defaultWhiteColor: #000000;
|
||||
@fontfamily : 'Microsoft YaHei';
|
||||
@inpuitbordercolor : rgb(10,63,85);
|
||||
@inpuitbackcolor : rgb(4,27,43);
|
||||
@labelDeaultColor : rgb(98,133,151);
|
||||
@defaultWhiteColor: rgb(98,133,151);
|
||||
@fontfamily : 'MyCustomFont1', sans-serif;
|
||||
@tableheadColor : #E5E8EB;
|
||||
@tableColor : #000000;
|
||||
@tableheadBgColor : linear-gradient(180deg, rgb(20,108,173),rgb(11,57,90));
|
||||
@tableColor : rgb(98,133,151);
|
||||
|
||||
@font-face {
|
||||
font-family: 'MyCustomFont1';
|
||||
src: url('~@/assets/less/Acens-1.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'MyCustomFont2';
|
||||
src: url('~@/assets/less/锐字潮牌真言简2.0免费 特粗(REEJI-ZhenyanGB2.0-Black).ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'MyCustomFont3';
|
||||
src: url('~@/assets/less/锐字潮牌真言简2.0免费 常规(REEJI-ZhenyanGB2.0-Regular).ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.datanum{
|
||||
font-family: 'MyCustomFont2', sans-serif;
|
||||
}
|
||||
.echartsTitle{
|
||||
height: 36px;
|
||||
background: linear-gradient(90deg, rgb(9,62,81),rgb(8,43,62));
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 34px;
|
||||
.ecicon{
|
||||
margin-top: 2px;
|
||||
width:30px;
|
||||
height: 30px;
|
||||
float: left;
|
||||
background: url('~@/assets/img/echartsTitlebg.png') no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.linese{
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
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));
|
||||
}
|
||||
|
||||
/* 滚动条优化 start */
|
||||
::-webkit-scrollbar {
|
||||
|
|
@ -72,15 +118,17 @@ body {
|
|||
}
|
||||
|
||||
.ant-layout {
|
||||
// background: url('~@/assets/img/layoutbg.png') no-repeat center bottom !important;
|
||||
background-color: #fff !important;
|
||||
background-image: url('~@/assets/img/layoutbg.png') !important;
|
||||
background-size: 100% 100%;
|
||||
// background-color: #fff !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ant-layout-header {
|
||||
background-image: url('~@/assets/img/header_bg.png') !important;
|
||||
background-size: 100% 100%;
|
||||
height: 64px !important;
|
||||
// background-image: url('~@/assets/img/header_bg.png') !important;
|
||||
// background-size: 100% 100%;
|
||||
background: transparent !important;
|
||||
height: 130px !important;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -92,7 +140,6 @@ body {
|
|||
.ant-breadcrumb-separator,
|
||||
.border-card,
|
||||
.ant-tabs-tab {
|
||||
font-family: @fontfamily;
|
||||
font-weight: 400 !important;
|
||||
font-size : 16px !important;
|
||||
color : @labelDeaultColor !important;
|
||||
|
|
@ -206,7 +253,7 @@ ul {
|
|||
ul li {
|
||||
line-height: 32px;
|
||||
font-family: @fontfamily;
|
||||
font-weight: 400 !important;
|
||||
font-weight: 400;
|
||||
font-size : 16px !important;
|
||||
color : @tableColor !important;
|
||||
}
|
||||
|
|
@ -276,7 +323,7 @@ ul li {
|
|||
.ant-pagination-disabled .ant-pagination-item-link,
|
||||
.ant-pagination-item a,
|
||||
.ant-empty-normal,
|
||||
.anticon.anticon-schedule, .border-card:hover,
|
||||
.border-card:hover,
|
||||
.ant-tabs-tab:hover,
|
||||
.ant-form-item,
|
||||
.ant-select-arrow,
|
||||
|
|
@ -296,10 +343,10 @@ ul li {
|
|||
}
|
||||
|
||||
.ant-layout-content {
|
||||
padding : 0 !important;
|
||||
padding : 0 20px !important;
|
||||
// background : url(~@/assets/img/layoutcontentTop.png) 0 0 no-repeat, url(~@/assets/img/layoutcontentMiddle.png) 0 24px no-repeat, url(~@/assets/img/layoutcontentBottom.png) 0 calc(100vh - 182px) no-repeat;
|
||||
// background-size: calc(100vw - 80px) 24px, calc(100vw - 80px) calc(100vh - 206px), calc(100vw - 80px) 24px;
|
||||
height : calc(100vh - 64px) !important;
|
||||
height : calc(100vh - 130px) !important;
|
||||
margin-top: -2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -568,6 +615,7 @@ textarea,
|
|||
.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item-selected .ant-select-selected-icon,
|
||||
.ant-select-dropdown.ant-select-dropdown--multiple .ant-select-dropdown-menu-item:hover .ant-select-selected-icon {
|
||||
color: @defaultWhiteColor !important;
|
||||
min-height: 38px;
|
||||
}
|
||||
|
||||
input:not(.ant-calendar-input):not(.ant-calendar-range-picker-input):not(.ant-select-search__field):not(.ant-input-lg),
|
||||
|
|
@ -576,12 +624,12 @@ textarea,
|
|||
.ant-calendar-picker-input,
|
||||
.ant-input-number-handler-wrap,
|
||||
.ant-select-dropdown-content {
|
||||
border : 1px solid @bordercolor !important;
|
||||
border : 1px solid @inpuitbordercolor !important;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.ant-input-number-handler-down {
|
||||
border-top: 1px solid @bordercolor !important;
|
||||
border-top: 1px solid @inpuitbordercolor !important;
|
||||
}
|
||||
|
||||
.ant-dropdown-menu,
|
||||
|
|
@ -623,8 +671,8 @@ textarea,
|
|||
|
||||
.ant-table-tbody tr th,
|
||||
.ant-table-tbody tr td {
|
||||
background-color: @backcolor !important;
|
||||
color : @defaultWhiteColor;
|
||||
color : @tableheadColor;
|
||||
font-family: 'MyCustomFont3', sans-serif;
|
||||
|
||||
// height: 50px;
|
||||
a {
|
||||
|
|
@ -639,6 +687,7 @@ textarea,
|
|||
border-right : 0 !important;
|
||||
border-bottom: 1px solid #31343d !important;
|
||||
line-height : 22px;
|
||||
background: @tableheadBgColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -755,11 +804,11 @@ textarea,
|
|||
background-size: 100% 100% !important;
|
||||
min-width : 130px !important;
|
||||
margin : 0 10px !important;
|
||||
min-height : 36px !important;
|
||||
line-height : 36px !important;
|
||||
min-height : 55px !important;
|
||||
line-height : 50px !important;
|
||||
text-align : center;
|
||||
font-weight : bold;
|
||||
font-size : 16px !important;
|
||||
font-weight : 800;
|
||||
font-size : 20px !important;
|
||||
padding :0 20px !important;
|
||||
vertical-align: middle !important;
|
||||
font-family : @fontfamily;
|
||||
|
|
@ -768,7 +817,7 @@ textarea,
|
|||
|
||||
.ant-menu-item>a>span,
|
||||
.ant-menu-submenu {
|
||||
color: #787a89 !important;
|
||||
color: rgb(28,204,253) !important;
|
||||
}
|
||||
|
||||
.ant-menu-item-selected>a>span,
|
||||
|
|
@ -860,6 +909,9 @@ textarea,
|
|||
.ant-menu-inline .ant-menu-submenu-title {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
.ant-menu-item .anticon, .ant-menu-submenu-title .anticon{
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
// 外置的样式控制
|
||||
.user-dropdown-menu-wrapper.ant-dropdown-menu {
|
||||
|
|
@ -887,7 +939,6 @@ textarea,
|
|||
.ant-table-row-expand-icon {
|
||||
background-color: transparent !important;
|
||||
color : @labelDeaultColor !important;
|
||||
font-family : @fontfamily;
|
||||
font-weight : 400 !important;
|
||||
font-size : 16px !important;
|
||||
}
|
||||
|
|
@ -901,11 +952,6 @@ tr.ant-table-expanded-row:hover {
|
|||
background: transparent !important;
|
||||
}
|
||||
|
||||
// .ant-table-bordered .ant-table-thead > tr > th:first-child
|
||||
// {
|
||||
// background-color:#112834;
|
||||
// color:#00DEF4;
|
||||
// }
|
||||
.ant-table-row,
|
||||
.ant-table-row .ant-table-selection-column,
|
||||
.ant-avatar,
|
||||
|
|
@ -914,7 +960,7 @@ tr.ant-table-expanded-row:hover {
|
|||
background-color: transparent !important;
|
||||
color : #00A2FF;
|
||||
height : 50px;
|
||||
font-family : @fontfamily;
|
||||
font-family : 'MyCustomFont1', sans-serif;
|
||||
font-weight : 400 !important;
|
||||
font-size : 16px !important;
|
||||
}
|
||||
|
|
@ -935,9 +981,6 @@ tr.ant-table-expanded-row:hover {
|
|||
// color: #00DEF4 !important;
|
||||
// }
|
||||
|
||||
.ant-table-body {
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
|
||||
.ant-alert-info,
|
||||
// .ant-pagination,
|
||||
|
|
@ -971,7 +1014,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 #31343d !important;
|
||||
border-bottom: 1px solid rgb(10,49,75) !important;
|
||||
}
|
||||
|
||||
.ant-table-tbody>tr>td {
|
||||
|
|
@ -979,9 +1022,10 @@ tr.ant-table-expanded-row:hover {
|
|||
}
|
||||
.ant-table-align-center,
|
||||
.ant-table-thead tr th {
|
||||
background-color: @tableheadColor !important;
|
||||
color : @labelDeaultColor !important;
|
||||
font-weight: 700 !important;
|
||||
background: @tableheadBgColor !important;
|
||||
color : @tableheadColor !important;
|
||||
font-family: 'MyCustomFont3', sans-serif;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.ant-alert-info {
|
||||
|
|
|
|||
BIN
src/assets/less/锐字潮牌真言简2.0免费 常规(REEJI-ZhenyanGB2.0-Regular).ttf
Normal file
BIN
src/assets/less/锐字潮牌真言简2.0免费 常规(REEJI-ZhenyanGB2.0-Regular).ttf
Normal file
Binary file not shown.
BIN
src/assets/less/锐字潮牌真言简2.0免费 特粗(REEJI-ZhenyanGB2.0-Black).ttf
Normal file
BIN
src/assets/less/锐字潮牌真言简2.0免费 特粗(REEJI-ZhenyanGB2.0-Black).ttf
Normal file
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.8 KiB |
|
|
@ -114,7 +114,8 @@ export default {
|
|||
.main {
|
||||
width: 596px;
|
||||
height: 468px;
|
||||
margin: 390px 1020px;
|
||||
margin: 335px 1173px;
|
||||
padding-top: 80px;
|
||||
background: url(~@/assets/img/login_bg.png) no-repeat;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,16 +27,16 @@
|
|||
</div>
|
||||
<!-- 顶部导航栏模式 -->
|
||||
<div v-else :class="['top-nav-header-index', theme]">
|
||||
<div class="header-index-wide">
|
||||
<div class="header-nowTime" :style="topMenuStyle.headerIndexLeft">末端数据接入处理系统</div>
|
||||
<div class="header-index-center" :style="topMenuStyle.headerIndexCenter">
|
||||
<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"></s-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<user-menu class="header-index-right" :theme="theme" :style="topMenuStyle.headerIndexRight" />
|
||||
<user-menu class="header-index-right" :theme="theme" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -205,7 +205,9 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-index-center{
|
||||
text-align: center;
|
||||
}
|
||||
.ant-layout-header {
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
|
|
@ -213,9 +215,15 @@ export default {
|
|||
.header-nowTime {
|
||||
color: #fff;
|
||||
font-family: 'Microsoft YaHei';
|
||||
font-size: 26px;
|
||||
font-size: 28px;
|
||||
letter-spacing: 3px;
|
||||
font-weight: 700;
|
||||
padding-left:23px;
|
||||
height:70px;
|
||||
}
|
||||
.header-index-right{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: -4px;
|
||||
line-height: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -90,8 +90,9 @@ export default {
|
|||
created() {
|
||||
//--update-begin----author:scott---date:20190320------for:根据后台菜单配置，判断是否路由菜单字段，动态选择是否生成路由（为了支持参数URL菜单）------
|
||||
//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)
|
||||
// 根据后台配置菜单，重新排序加载路由信息
|
||||
//console.log('----加载菜单逻辑----')
|
||||
//console.log(this.mainRouters)
|
||||
|
|
|
|||
|
|
@ -88,7 +88,6 @@
|
|||
this.name = this.$route.name
|
||||
this.$route.matched.forEach((item) => {
|
||||
// item.name !== 'index' && this.breadList.push(item)
|
||||
console.log(this.$route.matched);
|
||||
this.breadList.push(item)
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div :style="!$route.meta.pageHeader ? 'margin: 0;' : null">
|
||||
<div :style="!$route.meta.pageHeader ? 'margin-top: 80px;border-top:1px solid rgb(18,45,60);' : null">
|
||||
<!-- pageHeader , route meta hideHeader:true on hide -->
|
||||
<!-- <page-header v-if="!$route.meta.pageHeader" :title="title" :logo="logo" :avatar="avatar">
|
||||
<slot slot="action" name="action"></slot>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<template>
|
||||
<div class="user-wrapper" :class="theme" style="min-width:460px">
|
||||
<div class="user-wrapper" :class="theme">
|
||||
<a-dropdown>
|
||||
<span class="action action-full ant-dropdown-link user-dropdown-menu" >
|
||||
<!-- <a-avatar class="avatar" size="small" :src="getAvatar()"/> -->
|
||||
<img src="~@/assets/u8.png" alt="logo" style="margin-right: 10px;margin-top: -6px;" >
|
||||
<span v-if="isDesktop()" style="color:#00c3ff">欢迎您，{{ nickname() }}</span>
|
||||
<img src="~@/assets/u8.png" alt="logo" style="margin-right: 10px;margin-top: -4px;height:16px;" >
|
||||
<span v-if="isDesktop()" style="color:#00c3ff">{{ nickname() }}</span>
|
||||
</span>
|
||||
</a-dropdown>
|
||||
<span class="action">
|
||||
<a class="logout_title" href="javascript:;" @click="handleLogout">
|
||||
<!-- <a-icon type="logout"/> -->
|
||||
<img src="~@/assets/u6.png" alt="logo" style="margin-right: 10px;margin-top: -4px;" >
|
||||
<span v-if="isDesktop()" style="color:#00c3ff"> 退出登录</span>
|
||||
<img src="~@/assets/u6.png" alt="logo" style="margin-right: 10px;margin-top: -4px; height:16px;" >
|
||||
<span v-if="isDesktop()" style="color:#00c3ff"></span>
|
||||
</a>
|
||||
</span>
|
||||
<user-password ref="userPassword"></user-password>
|
||||
|
|
|
|||
|
|
@ -1,82 +1,38 @@
|
|||
<template>
|
||||
<a-row :gutter="30">
|
||||
<a-col :md="11" :sm="1" >
|
||||
<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-form layout="inline" @keyup.enter.native="getTables" style="margin-top: 10px; margin-left: 4px;">
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="10" :sm="1">
|
||||
<a-form-item label="标签类型">
|
||||
<a-select placeholder="选择标签类型" option-filter-prop="children" size="large" @change="gattable" v-model="queryRefsParam.tagId" style="width: 200px;">
|
||||
<a-select-option v-for="d in datatagSources" :key="d.id">
|
||||
{{ d.tagName }}
|
||||
<a-form-item label="关键词">
|
||||
<a-input placeholder="请输入搜索关键词" v-model="queryParam.name"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="10" :sm="2">
|
||||
<a-form-item label="标签类型">
|
||||
<a-select placeholder="选择标签类型" option-filter-prop="children" size="large" v-model="queryParam.type" style="width: 200px;">
|
||||
<a-select-option v-for="d in dataTypedataSources" :key="d.id">
|
||||
{{ d.cnName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="10" :sm="2">
|
||||
<a-form-item label="关键词">
|
||||
<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-button type="primary" style="left: 10px" @click="loadData" icon="search">查询</a-button>
|
||||
</a-col>
|
||||
</span>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<!-- table区域-begin -->
|
||||
<div style="height:900px;overflow-y:auto;">
|
||||
<a-table
|
||||
ref="tagtable"
|
||||
size="middle"
|
||||
:loading="tagloading"
|
||||
:row-selection="tagrowSelection"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:pagination="false"
|
||||
:scroll="{ y: 800 }"
|
||||
:columns="tagcolumns"
|
||||
:dataSource="dataRefsSources">
|
||||
<!-- :locale="myLocale"-->
|
||||
|
||||
<!-- 字符串超长截取省略号显示-->
|
||||
</a-table>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :md="2" :sm="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" :sm="3" >
|
||||
<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 style="height:900px;overflow-y:auto;">
|
||||
<div style="height:calc(100vh - 324px);">
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
:row-selection="rowSelection"
|
||||
bordered
|
||||
:loading="loading"
|
||||
:rowKey="getRowKey"
|
||||
:pagination="false"
|
||||
:scroll="{ y: 800 }"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource">
|
||||
<!-- :locale="myLocale"-->
|
||||
|
|
@ -84,6 +40,46 @@
|
|||
<!-- 字符串超长截取省略号显示-->
|
||||
</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"> <a-icon type="left" />添加标签 </a-button>
|
||||
<div style="height: 50px;"></div>
|
||||
<a-button type="primary">移除标签<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="getTables" 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.name"></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="loadData" icon="search">查询</a-button>
|
||||
</a-col>
|
||||
</span>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<!-- table区域-begin -->
|
||||
<div style="height:calc(100vh - 324px);">
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="endataSource">
|
||||
<!-- :locale="myLocale"-->
|
||||
|
||||
<!-- 字符串超长截取省略号显示-->
|
||||
</a-table>
|
||||
</div>
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
|
|
@ -92,12 +88,9 @@
|
|||
<script>
|
||||
import store from '@/store/'
|
||||
import {getAction} from '@/api/manage'
|
||||
import { idcTableTagRef,
|
||||
getTableTagRefs,
|
||||
getAllTable,
|
||||
idcTableTagRefdelete } from '@/api/idcTableTagRef'
|
||||
import { idcTableTaglist } from '@/api/tag'
|
||||
import get from 'lodash.get'
|
||||
import {
|
||||
dataTypePageList,
|
||||
dataTypeDeleteById } from '@/api/dataType'
|
||||
export default {
|
||||
name: "dataManage",
|
||||
components: {
|
||||
|
|
@ -108,102 +101,75 @@ import get from 'lodash.get'
|
|||
contentList:[],
|
||||
percent:0,
|
||||
websock:{},
|
||||
queryRefsParam: {
|
||||
tableName :"",
|
||||
tagId:"",
|
||||
pageNum :1,
|
||||
pageSize:9999999,
|
||||
},
|
||||
queryParam: {
|
||||
tableName :"",
|
||||
tagId:"",
|
||||
pageNum :1,
|
||||
pageSize:9999999,
|
||||
name :"",
|
||||
type:"侦察预警"
|
||||
},
|
||||
datatagSources: [],
|
||||
dataRefsSources:[],
|
||||
dataTypedataSources: [],
|
||||
dataSource:[
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0001",
|
||||
data1:"舰艇综合导航信息II",
|
||||
},
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0002",
|
||||
data1:"动力报文",
|
||||
},
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0003",
|
||||
data1:"电测试报文",
|
||||
},
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0004",
|
||||
data1:"损管测试报文",
|
||||
},
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0005",
|
||||
data1:"舰炮测试报文",
|
||||
},
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0006",
|
||||
data1:"反潜测试报文",
|
||||
},
|
||||
],
|
||||
tagloading:false,
|
||||
loading:false,
|
||||
columns: [
|
||||
{
|
||||
title: '表名',
|
||||
align:"left",
|
||||
dataIndex: 'tableName',
|
||||
},
|
||||
{
|
||||
title: '报文名',
|
||||
align:"left",
|
||||
dataIndex: 'tableMessName'
|
||||
},
|
||||
],
|
||||
tagcolumns: [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: '',
|
||||
key:'id',
|
||||
width:60,
|
||||
align:"center",
|
||||
align:"id",
|
||||
customRender:function (t,r,index) {
|
||||
return parseInt(index)+1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '表名',
|
||||
align:"left",
|
||||
align:"center",
|
||||
dataIndex: 'tableName',
|
||||
},
|
||||
{
|
||||
title: '报文名',
|
||||
align:"left",
|
||||
dataIndex: 'tableMessName'
|
||||
align:"center",
|
||||
dataIndex: 'data1'
|
||||
},
|
||||
],
|
||||
endataSource:[
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0009",
|
||||
data1:"舰艇综合导航信息I",
|
||||
},
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0010",
|
||||
data1:"动力报文I",
|
||||
},
|
||||
],
|
||||
tagqueryParam: {
|
||||
pageNum :1,
|
||||
pageSize:20,
|
||||
tagName:""
|
||||
},
|
||||
selectedRowKeys: [],
|
||||
tagselectedRowKeys: [],
|
||||
selectedRowData: [],
|
||||
tagselectedRowData: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getdatatagSources()
|
||||
this.getselect()
|
||||
},
|
||||
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
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
destroyed: function () {
|
||||
},
|
||||
|
|
@ -211,29 +177,6 @@ import get from 'lodash.get'
|
|||
|
||||
},
|
||||
methods: {
|
||||
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) {
|
||||
|
|
@ -241,72 +184,15 @@ import get from 'lodash.get'
|
|||
}
|
||||
});
|
||||
},
|
||||
getselect(){
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
detag(){
|
||||
var that = this;
|
||||
this.tagselectedRowKeys.forEach(item => {
|
||||
idcTableTagRefdelete({id: item}).then((res) => {
|
||||
if (res.success) {
|
||||
that.gattable();
|
||||
} else {
|
||||
that.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
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;
|
||||
});
|
||||
getTables(){
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less';
|
||||
/deep/.ant-checkbox-inner {
|
||||
border: 1px solid #000 !important;
|
||||
}
|
||||
/deep/.ant-checkbox-checked .ant-checkbox-inner {
|
||||
background-color: #fff !important; /* 将背景颜色修改为白色 */
|
||||
border-color: #000 !important; /* 将边框颜色修改为黑色 */
|
||||
}
|
||||
/deep/.ant-checkbox-checked .ant-checkbox-inner::after {
|
||||
border-bottom: 2px solid #000;
|
||||
border-right: 2px solid #000;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,22 +1,21 @@
|
|||
<template>
|
||||
<a-row :gutter="30">
|
||||
<a-col :md="12" :sm="1" >
|
||||
<a-row :gutter="30" style="padding: 0 10px;">
|
||||
<a-col :md="14" >
|
||||
<div class="linese"></div>
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<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">
|
||||
<div class="table-page-search-wrapper" style="background: rgb(18, 44, 65);">
|
||||
<a-select placeholder="选择数据类型" option-filter-prop="children" @change="getTables" style="width: 40%;">
|
||||
<a-select-option v-for="d in dataTypedataSources" :key="d.id">
|
||||
{{ d.cnName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<!-- table区域-begin -->
|
||||
<div style="height:900px;overflow-y:auto;">
|
||||
<div style="height:calc(100vh - 347px);background: rgb(18, 44, 65);padding:10px;">
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
:pagination="false"
|
||||
:scroll="{ y: 800 }"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource">
|
||||
|
|
@ -25,27 +24,56 @@
|
|||
<!-- 字符串超长截取省略号显示-->
|
||||
</a-table>
|
||||
</div>
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="2" >
|
||||
<a-card :bordered="false">
|
||||
<a-col :md="10">
|
||||
<div class="linese"></div>
|
||||
<a-card :bordered="false" style="background: rgb(18, 44, 65) !important;">
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button @click="dataAdd" type="primary" icon="plus">数据清洗整编</a-button>
|
||||
</span>
|
||||
<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-option key="">
|
||||
全部
|
||||
</a-select-option>
|
||||
<a-select-option key="0">
|
||||
未同步
|
||||
</a-select-option>
|
||||
<a-select-option key="1">
|
||||
进行中
|
||||
</a-select-option>
|
||||
<a-select-option key="2">
|
||||
已结束
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="7">
|
||||
</a-col>
|
||||
<a-col :md="5">
|
||||
<a-button @click="dataAdd" type="primary">数据清洗整编</a-button>
|
||||
</a-col>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
<a-progress :percent="percent" status="active" />
|
||||
</div>
|
||||
<!-- table区域-begin -->
|
||||
<div style="height:900px;overflow-y:auto;">
|
||||
<a-list bordered :data-source="contentList">
|
||||
<a-list-item slot="renderItem" slot-scope="item, index">
|
||||
{{ item }}
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
<div class="datacleanResult">
|
||||
<div class="progressbg">
|
||||
<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>
|
||||
</a-list>
|
||||
</div>
|
||||
</a-card>
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
|
@ -66,16 +94,54 @@
|
|||
contentList:[],
|
||||
percent:0,
|
||||
websock:{},
|
||||
datatypequeryParam: {
|
||||
schemaName:"",
|
||||
sourceType:1
|
||||
},
|
||||
queryParam: {
|
||||
pageNum :1,
|
||||
pageSize:9999999,
|
||||
pageSize:20
|
||||
},
|
||||
dataTypedataSources: [],
|
||||
dataSource:[
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0001",
|
||||
data1:"舰艇综合导航信息II",
|
||||
data2:"2024-03-06 10:30:26",
|
||||
data3:"2024-03-06 15:30:26",
|
||||
data4:"侦察预警、指挥控制",
|
||||
},
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0002",
|
||||
data1:"动力报文",
|
||||
data2:"2024-03-06 10:30:26",
|
||||
data3:"2024-03-06 15:30:26",
|
||||
data4:"指挥控制",
|
||||
},
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0003",
|
||||
data1:"电测试报文",
|
||||
data2:"2024-03-06 10:30:26",
|
||||
data3:"2024-03-06 15:30:26",
|
||||
data4:"支援保障",
|
||||
},
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0004",
|
||||
data1:"损管测试报文",
|
||||
data2:"2024-03-06 10:30:26",
|
||||
data3:"2024-03-06 15:30:26",
|
||||
data4:"支援保障",
|
||||
},
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0005",
|
||||
data1:"舰炮测试报文",
|
||||
data2:"2024-03-06 10:30:26",
|
||||
data3:"2024-03-06 15:30:26",
|
||||
data4:"装备运行状态",
|
||||
},
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0006",
|
||||
data1:"反潜测试报文",
|
||||
data2:"2024-03-06 10:30:26",
|
||||
data3:"2024-03-06 15:30:26",
|
||||
data4:"装备运行状态",
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
|
|
@ -96,30 +162,30 @@
|
|||
{
|
||||
title: '报文名',
|
||||
align:"center",
|
||||
dataIndex: 'tableMessName'
|
||||
dataIndex: 'data1'
|
||||
},
|
||||
{
|
||||
title: '开始时间',
|
||||
align:"center",
|
||||
dataIndex: 'startTime'
|
||||
dataIndex: 'data2'
|
||||
},
|
||||
{
|
||||
title: '最后更新时间',
|
||||
align:"center",
|
||||
dataIndex: 'endTime'
|
||||
dataIndex: 'data3'
|
||||
},
|
||||
{
|
||||
title: '标签类型',
|
||||
align:"center",
|
||||
dataIndex: 'tagNames'
|
||||
dataIndex: 'data4'
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
//初始化websocket
|
||||
this.initWebSocket()
|
||||
this.getselect()
|
||||
this.initWebSocket()
|
||||
this.getselect()
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
|
|
@ -150,18 +216,23 @@
|
|||
},
|
||||
websocketonmessage: function (e) {
|
||||
var data = eval("(" + e.data + ")");
|
||||
console.log(data);
|
||||
//处理订阅信息
|
||||
if(data.content.length >0){
|
||||
var char = "当前同步百分比：";
|
||||
let index = data.content.indexOf(char);
|
||||
if (index >= 0) {
|
||||
let result = data.content.substring(index + char.length,data.content.length - 1); // 获取 "V" 及其后所有字符
|
||||
this.percent = parseInt(result) ;
|
||||
}
|
||||
this.contentList.unshift(data.content);
|
||||
}
|
||||
if(data.currProgress != null){
|
||||
this.percent = data.currProgress;
|
||||
}
|
||||
},
|
||||
websocketclose: function (e) {
|
||||
console.log("connection closed (" + e + ")");
|
||||
},
|
||||
dataAdd(){
|
||||
getAction("/dataCleaning/cleaning?taskId=3806ce79-dc28-48a3-9250-c7729e6b3ad4").then((res) => {
|
||||
getAction("/rawToStandard/syncMultipleSchemas?dataTaskId=123").then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message);
|
||||
}
|
||||
|
|
@ -171,25 +242,64 @@
|
|||
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);
|
||||
}
|
||||
});
|
||||
// datasyncgetTableInfo().then((res) => {
|
||||
// if (res.result) {
|
||||
// this.confirmLoading = false;
|
||||
// this.dataSource = res.result;
|
||||
// this.models = 2;
|
||||
// } else {
|
||||
// this.$message.warning(res.message);
|
||||
// }
|
||||
// });
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less';
|
||||
<style>
|
||||
.datacleanResult{
|
||||
height:calc(100vh - 374px);
|
||||
overflow-y:auto;
|
||||
margin: 10px;
|
||||
background: rgb(11,34,52);
|
||||
}
|
||||
.datacleanResult .progressbg{
|
||||
margin: 10px;
|
||||
height: 60px;
|
||||
padding:20px 10px;
|
||||
background: rgb(17,42,64);
|
||||
|
||||
}
|
||||
.datacleanResult .title{
|
||||
width: 12%;
|
||||
font-size: 16px;
|
||||
float: left;
|
||||
text-align: right;
|
||||
line-height: 20px;
|
||||
color:#fff;
|
||||
}
|
||||
.datacleanResult .progress{
|
||||
width: 88%;
|
||||
float: left;
|
||||
}
|
||||
.datacleanResult .ant-progress-bg,
|
||||
.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-text{
|
||||
color:#fff;
|
||||
}
|
||||
.datacleanResult .ant-list-items{
|
||||
border-bottom:1px dashed rgb(35,72,100);
|
||||
color:#fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<a-col :md="12" :sm="1" >
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-select placeholder="选择数据类型" option-filter-prop="children" v-model="datatypequeryParam.schemaName" @change="getTables" style="width: 40%;">
|
||||
<a-select placeholder="选择数据类型" option-filter-prop="children" @change="getTables" style="width: 40%;">
|
||||
<a-select-option v-for="d in dataTypedataSources" :key="d.id">
|
||||
{{ d.cnName }}
|
||||
</a-select-option>
|
||||
|
|
@ -15,8 +15,6 @@
|
|||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
:pagination="false"
|
||||
:scroll="{ y: 800 }"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource">
|
||||
|
|
@ -35,7 +33,7 @@
|
|||
<a-row :gutter="30">
|
||||
<a-col :md="6" :sm="10" >
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button @click="dataAdd" type="primary" icon="plus">发布到专题库</a-button>
|
||||
<a-button @click="dataAdd" type="primary" v-has="'cont:btn'" icon="plus">发布到专题库</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
|
@ -72,16 +70,54 @@
|
|||
contentList:[],
|
||||
percent:0,
|
||||
websock:{},
|
||||
datatypequeryParam: {
|
||||
schemaName:"",
|
||||
sourceType:2
|
||||
},
|
||||
queryParam: {
|
||||
pageNum :1,
|
||||
pageSize:9999999,
|
||||
pageSize:20
|
||||
},
|
||||
dataTypedataSources: [],
|
||||
dataSource:[
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0001",
|
||||
data1:"舰艇综合导航信息II",
|
||||
data2:"2024-03-06 10:30:26",
|
||||
data3:"2024-03-06 15:30:26",
|
||||
data4:"侦察预警、指挥控制",
|
||||
},
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0002",
|
||||
data1:"动力报文",
|
||||
data2:"2024-03-06 10:30:26",
|
||||
data3:"2024-03-06 15:30:26",
|
||||
data4:"指挥控制",
|
||||
},
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0003",
|
||||
data1:"电测试报文",
|
||||
data2:"2024-03-06 10:30:26",
|
||||
data3:"2024-03-06 15:30:26",
|
||||
data4:"支援保障",
|
||||
},
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0004",
|
||||
data1:"损管测试报文",
|
||||
data2:"2024-03-06 10:30:26",
|
||||
data3:"2024-03-06 15:30:26",
|
||||
data4:"支援保障",
|
||||
},
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0005",
|
||||
data1:"舰炮测试报文",
|
||||
data2:"2024-03-06 10:30:26",
|
||||
data3:"2024-03-06 15:30:26",
|
||||
data4:"装备运行状态",
|
||||
},
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0006",
|
||||
data1:"反潜测试报文",
|
||||
data2:"2024-03-06 10:30:26",
|
||||
data3:"2024-03-06 15:30:26",
|
||||
data4:"装备运行状态",
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
|
|
@ -102,22 +138,22 @@
|
|||
{
|
||||
title: '报文名',
|
||||
align:"center",
|
||||
dataIndex: 'tableMessName'
|
||||
dataIndex: 'data1'
|
||||
},
|
||||
{
|
||||
title: '开始时间',
|
||||
align:"center",
|
||||
dataIndex: 'startTime'
|
||||
dataIndex: 'data2'
|
||||
},
|
||||
{
|
||||
title: '最后更新时间',
|
||||
align:"center",
|
||||
dataIndex: 'endTime'
|
||||
dataIndex: 'data3'
|
||||
},
|
||||
{
|
||||
title: '标签类型',
|
||||
align:"center",
|
||||
dataIndex: 'tagNames'
|
||||
dataIndex: 'data4'
|
||||
},
|
||||
],
|
||||
}
|
||||
|
|
@ -179,21 +215,21 @@
|
|||
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);
|
||||
}
|
||||
});
|
||||
// datasyncgetTableInfo().then((res) => {
|
||||
// if (res.result) {
|
||||
// this.confirmLoading = false;
|
||||
// this.dataSource = res.result;
|
||||
// this.models = 2;
|
||||
// } else {
|
||||
// this.$message.warning(res.message);
|
||||
// }
|
||||
// });
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,29 @@
|
|||
<template>
|
||||
<div style="margin-top: 10px; margin-left: 10px;">
|
||||
<a-row>
|
||||
<a-col :md="12" :sm="1">
|
||||
<div id="cleaningVariance" class="cleaningVariance" ref="cleaningVariance" style="width: 820px; height: 410px; float: left"></div>
|
||||
<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 class="linese"></div>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="2">
|
||||
<div id="totalNumberCatalogues" class="totalNumberCatalogues" ref="totalNumberCatalogues" style="width: 820px; height: 410px; float: right"></div>
|
||||
<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 class="linese"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :md="12" :sm="3">
|
||||
<div id="catalogingStorage" class="catalogingStorage" ref="catalogingStorage" style="width: 820px; height: 410px;float: left"></div>
|
||||
<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 class="linese"></div>
|
||||
</a-col>
|
||||
<a-col :md="12" :sm="4">
|
||||
<div id="typeStorage" class="typeStorage" ref="typeStorage" style="width: 820px; height: 410px;float: right"></div>
|
||||
<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 class="linese"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
|
@ -30,14 +40,10 @@
|
|||
data () {
|
||||
return {
|
||||
description: '数据统计',
|
||||
cleaningVarianceData:[],
|
||||
totalNumberCataloguesData:[],
|
||||
catalogingStorageData:[],
|
||||
typeStorage:[]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getTables()
|
||||
this.getTables()
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
|
|
@ -48,64 +54,74 @@
|
|||
},
|
||||
methods: {
|
||||
dataAdd(){
|
||||
},
|
||||
getselect(){
|
||||
|
||||
},
|
||||
getTables(){
|
||||
this.cleaningVarianceData =[['product', '原始库', '标准库']];
|
||||
getAction("/dataAnalysis/getClnDiffStats",{}).then((res)=>{
|
||||
if(res.success){
|
||||
res.result.schemaNames.forEach(row => {
|
||||
this.cleaningVarianceData.push([row, parseInt(res.result.numRowOriMap[row]),parseInt(res.result.numRowStaMap[row]) ])
|
||||
})
|
||||
this.getcleaningVariance();
|
||||
}
|
||||
});
|
||||
this.totalNumberCataloguesData =[];
|
||||
getAction("/dataAnalysis/getTagStats",{}).then((res)=>{
|
||||
if(res.success){
|
||||
res.result.tagNames.forEach(row => {
|
||||
this.totalNumberCataloguesData.push([row, parseInt(res.result.tagNumRow[row]) ])
|
||||
})
|
||||
this.gettotalNumberCatalogues();
|
||||
}
|
||||
});
|
||||
this.catalogingStorageData =[];
|
||||
getAction("/dataAnalysis/getDataTypeAnalysis",{}).then((res)=>{
|
||||
if(res.success){
|
||||
res.result.typeName.forEach(row => {
|
||||
this.catalogingStorageData.push({ value: parseInt(res.result.numRowMap[row]), name: row })
|
||||
})
|
||||
this.getcatalogingStorage();
|
||||
}
|
||||
});
|
||||
this.typeStorage =[]
|
||||
getAction("/dataAnalysis/getTagNumRowStats",{}).then((res)=>{
|
||||
if(res.success){
|
||||
res.result.tagNames.forEach(row => {
|
||||
this.typeStorage.push({ value: parseInt(res.result.tagNumRow[row]), name: row })
|
||||
})
|
||||
this.gettypeStorage();
|
||||
}
|
||||
});
|
||||
this.getcleaningVariance();
|
||||
this.gettotalNumberCatalogues();
|
||||
this.getcatalogingStorage();
|
||||
this.gettypeStorage();
|
||||
},
|
||||
getcleaningVariance(){
|
||||
var myChart = this.$echarts.init(this.$refs.cleaningVariance);
|
||||
var option = {
|
||||
title: {
|
||||
text: '数据清洗差异统计'
|
||||
},
|
||||
legend: {
|
||||
bottom: 10,
|
||||
left: 'center'
|
||||
},
|
||||
tooltip: {},
|
||||
dataset: {
|
||||
source: this.cleaningVarianceData
|
||||
grid:{
|
||||
left:'40px',
|
||||
right:'20px',
|
||||
top:'20px',
|
||||
bottom:'20px'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category' ,
|
||||
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
}
|
||||
},
|
||||
},
|
||||
dataset: {
|
||||
source: [
|
||||
['product', '原始库', '标准库'],
|
||||
['平台', 43.3, 85.8],
|
||||
['编队', 83.1, 73.4],
|
||||
['航空兵', 86.4, 65.2],
|
||||
['陆战队', 72.4, 53.9],
|
||||
['作战', 72.4, 53.9],
|
||||
['反潜', 72.4, 53.9],
|
||||
['舰炮', 72.4, 53.9]
|
||||
]
|
||||
},
|
||||
xAxis: { type: 'category' },
|
||||
yAxis: {},
|
||||
// Declare several bar series, each will be mapped
|
||||
// to a column of dataset.source by default.
|
||||
series: [{ type: 'bar' }, { type: 'bar' }],
|
||||
series: [{ type: 'bar',barMaxWidth: 20, }, { type: 'bar',barMaxWidth: 20, }],
|
||||
color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
||||
};
|
||||
myChart.setOption(option);
|
||||
|
|
@ -113,21 +129,60 @@
|
|||
gettotalNumberCatalogues(){
|
||||
var myChart = this.$echarts.init(this.$refs.totalNumberCatalogues);
|
||||
var option = {
|
||||
title: {
|
||||
text: '数据编目总量统计'
|
||||
},
|
||||
legend: {
|
||||
bottom: 10,
|
||||
left: 'center'},
|
||||
tooltip: {},
|
||||
dataset: {
|
||||
source: this.totalNumberCataloguesData
|
||||
source: [
|
||||
['product', ''],
|
||||
['侦察预警', 43.3],
|
||||
['指挥控制', 83.1],
|
||||
['火力打击', 86.4],
|
||||
['支援保障', 72.4],
|
||||
['装备运行状态', 72.4],
|
||||
['作战环境', 72.4]
|
||||
]
|
||||
},
|
||||
grid:{
|
||||
left:'40px',
|
||||
right:'20px',
|
||||
top:'20px',
|
||||
bottom:'20px'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category' ,
|
||||
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
}
|
||||
},
|
||||
},
|
||||
xAxis: { type: 'category' },
|
||||
yAxis: {},
|
||||
// Declare several bar series, each will be mapped
|
||||
// to a column of dataset.source by default.
|
||||
series: [{ type: 'bar' }],
|
||||
series: [{ type: 'bar',barMaxWidth: 30, }],
|
||||
color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
||||
};
|
||||
myChart.setOption(option);
|
||||
|
|
@ -135,23 +190,23 @@
|
|||
getcatalogingStorage(){
|
||||
var myChart = this.$echarts.init(this.$refs.catalogingStorage);
|
||||
var option = {
|
||||
title: {
|
||||
text: '数据类型存储占比统计',
|
||||
left: 'left'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
bottom: 10,
|
||||
left: 'center',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '占比',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: this.catalogingStorageData,
|
||||
radius: '80%',
|
||||
data: [
|
||||
{ value: 1048, name: '平台' },
|
||||
{ value: 735, name: '编队' },
|
||||
{ value: 580, name: '航空兵' },
|
||||
{ value: 484, name: '陆战队' },
|
||||
{ value: 300, name: '作战' },
|
||||
{ value: 735, name: '反潜' },
|
||||
{ value: 580, name: '舰炮' }
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
|
|
@ -168,23 +223,22 @@
|
|||
gettypeStorage(){
|
||||
var myChart = this.$echarts.init(this.$refs.typeStorage);
|
||||
var option = {
|
||||
title: {
|
||||
text: '数据编目存储占比统计',
|
||||
left: 'left'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
bottom: 10,
|
||||
left: 'center',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '占比',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: this.typeStorage,
|
||||
radius: '80%',
|
||||
data: [
|
||||
{ value: 1048, name: '侦察预警' },
|
||||
{ value: 735, name: '指挥控制' },
|
||||
{ value: 580, name: '火力打击' },
|
||||
{ value: 484, name: '支援保障' },
|
||||
{ value: 300, name: '装备运行状态' },
|
||||
{ value: 300, name: '作战环境' }
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
|
|
|
|||
|
|
@ -1,28 +1,17 @@
|
|||
<template>
|
||||
<a-row :gutter="30">
|
||||
<a-col :md="24" :sm="1" >
|
||||
<div class="table-page-search-wrapper">
|
||||
<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.id">
|
||||
{{ d.cnName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<!-- table区域-begin -->
|
||||
<div style="height:900px;overflow-y:auto;">
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
:pagination="false"
|
||||
:scroll="{ y: 800 }"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource">
|
||||
<!-- :locale="myLocale"-->
|
||||
<!-- table区域-begin -->
|
||||
<div style="height:900px;overflow-y:auto;">
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource">
|
||||
|
||||
<!-- 字符串超长截取省略号显示-->
|
||||
</a-table>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
|
@ -30,11 +19,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store/'
|
||||
import {getAction} from '@/api/manage'
|
||||
import {
|
||||
dataTypePageList,
|
||||
dataTypeDeleteById } from '@/api/dataType'
|
||||
|
||||
export default {
|
||||
name: "thematicLibrary",
|
||||
components: {
|
||||
|
|
@ -43,16 +28,53 @@
|
|||
return {
|
||||
description: '专题库',
|
||||
contentList:[],
|
||||
datatypequeryParam: {
|
||||
schemaName:"",
|
||||
sourceType:3
|
||||
},
|
||||
queryParam: {
|
||||
pageNum :1,
|
||||
pageSize:9999999,
|
||||
pageSize:20
|
||||
},
|
||||
dataTypedataSources: [],
|
||||
dataSource:[
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0001",
|
||||
data1:"舰艇综合导航信息II",
|
||||
data2:"2024-03-06 10:30:26",
|
||||
data3:"2024-03-06 15:30:26",
|
||||
data4:"3646135477",
|
||||
},
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0002",
|
||||
data1:"动力报文",
|
||||
data2:"2024-03-06 10:30:26",
|
||||
data3:"2024-03-06 15:30:26",
|
||||
data4:"92547612",
|
||||
},
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0003",
|
||||
data1:"电测试报文",
|
||||
data2:"2024-03-06 10:30:26",
|
||||
data3:"2024-03-06 15:30:26",
|
||||
data4:"1658432215",
|
||||
},
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0004",
|
||||
data1:"损管测试报文",
|
||||
data2:"2024-03-06 10:30:26",
|
||||
data3:"2024-03-06 15:30:26",
|
||||
data4:"8535411",
|
||||
},
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0005",
|
||||
data1:"舰炮测试报文",
|
||||
data2:"2024-03-06 10:30:26",
|
||||
data3:"2024-03-06 15:30:26",
|
||||
data4:"1235744",
|
||||
},
|
||||
{
|
||||
tableName:"LA_DATA_TABLE_0006",
|
||||
data1:"反潜测试报文",
|
||||
data2:"2024-03-06 10:30:26",
|
||||
data3:"2024-03-06 15:30:26",
|
||||
data4:"159748153",
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
|
|
@ -73,28 +95,28 @@
|
|||
{
|
||||
title: '报文名',
|
||||
align:"center",
|
||||
dataIndex: 'tableMessName'
|
||||
dataIndex: 'data1'
|
||||
},
|
||||
{
|
||||
title: '开始时间',
|
||||
align:"center",
|
||||
dataIndex: 'startTime'
|
||||
dataIndex: 'data2'
|
||||
},
|
||||
{
|
||||
title: '最后更新时间',
|
||||
align:"center",
|
||||
dataIndex: 'endTime'
|
||||
dataIndex: 'data3'
|
||||
},
|
||||
{
|
||||
title: '标签类型',
|
||||
title: '数据量',
|
||||
align:"center",
|
||||
dataIndex: 'tagNames'
|
||||
dataIndex: 'data4'
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getselect()
|
||||
this.getTables()
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
|
|
@ -104,25 +126,16 @@
|
|||
|
||||
},
|
||||
methods: {
|
||||
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);
|
||||
}
|
||||
});
|
||||
// datasyncgetTableInfo().then((res) => {
|
||||
// if (res.result) {
|
||||
// this.confirmLoading = false;
|
||||
// this.dataSource = res.result;
|
||||
// this.models = 2;
|
||||
// } else {
|
||||
// this.$message.warning(res.message);
|
||||
// }
|
||||
// });
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,493 +1,479 @@
|
|||
<template>
|
||||
<div class="pageBackground">
|
||||
<div class="breadHeader">文件管理/列表</div>
|
||||
<div class="filecontent">
|
||||
<a-layout>
|
||||
<a-layout-sider>
|
||||
<div class="siderHeader">文件目录</div>
|
||||
<div class="flodContent">
|
||||
<a-dropdown :trigger="['contextmenu']">
|
||||
<a-directory-tree :tree-data="treeData" v-model:expandedKeys="expandedKeys"
|
||||
v-model:selectedKeys="selectedKeys" @select="changeSelect">
|
||||
<a-tree-node v-for="itemNode in treeData" :key="itemNode.id"
|
||||
:title="itemNode.title" :value="itemNode">
|
||||
</a-tree-node>
|
||||
</a-directory-tree>
|
||||
<template #overlay>
|
||||
<a-menu class="menu" @click="menuClick">
|
||||
<a-menu-item key="1">添加</a-menu-item>
|
||||
<a-menu-item key="2">重命名</a-menu-item>
|
||||
<a-menu-item key="3">删除</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
|
||||
|
||||
</div>
|
||||
</a-layout-sider>
|
||||
<a-layout-content>
|
||||
<div class="main">
|
||||
<div class="quarter-div">
|
||||
<a-row>
|
||||
<a-col :span="12" style="text-align: center;">
|
||||
<img style="margin-top: 10px;" :src="guaz" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div style="margin-top: 14px">{{fileNum.total}}</div>
|
||||
<div>文件总数</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="quarter-div">
|
||||
<a-row>
|
||||
<a-col :span="12" style="text-align: center;">
|
||||
<img style="margin-top: 10px;" :src="guaz" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div style="margin-top: 14px">{{fileNum.pictures}}</div>
|
||||
<div>图片</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="quarter-div">
|
||||
<a-row>
|
||||
<a-col :span="12" style="text-align: center;">
|
||||
<img style="margin-top: 10px;" :src="guaz" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div style="margin-top: 14px">{{fileNum.audio}}</div>
|
||||
<div>音频</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="quarter-div">
|
||||
<a-row>
|
||||
<a-col :span="12" style="text-align: center;">
|
||||
<img style="margin-top: 10px;" :src="guaz" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div style="margin-top: 14px">{{fileNum.dbfile}}</div>
|
||||
<div>数据库文件</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="quarter-div">
|
||||
<a-row>
|
||||
<a-col :span="12" style="text-align: center;">
|
||||
<img style="margin-top: 10px;" :src="guaz" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div style="margin-top: 14px">{{fileNum.video}}</div>
|
||||
<div>视频</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="quarter-div">
|
||||
<a-row>
|
||||
<a-col :span="12" style="text-align: center;">
|
||||
<img style="margin-top: 10px;" :src="guaz" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div style="margin-top: 14px">{{fileNum.document}}</div>
|
||||
<div>文档</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px;">
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form layout="inline">
|
||||
<a-form-item>
|
||||
<a-input placeholder="请输入" v-model="searchFile.queryCondition"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button type="primary" icon="search" style="margin-left: 21px" @click="searchgetFileList">查询</a-button>
|
||||
<a-button type="primary" icon="reload" style="margin-left: 8px" @click="reloadFileList">重置</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<a-col :span="12" style="text-align: right;">
|
||||
<a-button type="primary" style="margin-left: 8px" @click="clickfile">
|
||||
<a-icon type="upload"/>
|
||||
文件上传
|
||||
</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div style="margin-top: 15px">
|
||||
<a-table ref="table" bordered size="middle" rowKey="id" :columns="columns" class="fileTable"
|
||||
:dataSource="dataSource" :pagination="searchFileTable" :loading="loading"
|
||||
@change="handleTableChange">
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="download(record,$event)">下载</a> <a @click="viewFile(record,$event)">预览</a> <a @click="DeleteFile(record,$event)">删除</a>
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
<div>
|
||||
<div class="filecontent">
|
||||
<div class="flodContent">
|
||||
<div class="linese"></div>
|
||||
<div class="siderHeader echartsTitle">
|
||||
<div class="ecicon"></div>
|
||||
文件目录
|
||||
</div>
|
||||
<a-modal v-model:open="isopen" :title="modalTitle" ok-text="确认" cancel-text="取消" @ok="hideModal">
|
||||
<a-input placeholder="请输入" v-model="dirName" style="color: #000000 !important"></a-input>
|
||||
</a-modal>
|
||||
<uploadModal ref="modalForm"></uploadModal>
|
||||
<a-dropdown :trigger="['contextmenu']">
|
||||
<a-directory-tree
|
||||
:tree-data="treeData"
|
||||
v-model:expandedKeys="expandedKeys"
|
||||
class="teeediv"
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
@select="changeSelect"
|
||||
>
|
||||
<a-tree-node v-for="itemNode in treeData" :key="itemNode.id" :title="itemNode.title" :value="itemNode">
|
||||
</a-tree-node>
|
||||
</a-directory-tree>
|
||||
<template #overlay>
|
||||
<a-menu class="menu" @click="menuClick">
|
||||
<a-menu-item key="1">添加</a-menu-item>
|
||||
<a-menu-item key="2">重命名</a-menu-item>
|
||||
<a-menu-item key="3">删除</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
<div class="linese"></div>
|
||||
</div>
|
||||
<div class="righttop">
|
||||
<div class="linese"></div>
|
||||
<a-row class="quarter-div">
|
||||
<a-col :span="10">
|
||||
<img src="~@/assets/img/icon-结构化数据条数.png" />
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<div class="datanum">{{ fileNum.total }}</div>
|
||||
<div>文件总数</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="quarter-div">
|
||||
<a-col :span="10">
|
||||
<img src="~@/assets/img/icon非结构化文件大小.png" />
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<div class="datanum">{{ fileNum.pictures }}</div>
|
||||
<div>图片</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="quarter-div">
|
||||
<a-col :span="10">
|
||||
<img src="~@/assets/img/icon-表数量.png" />
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<div class="datanum">{{ fileNum.audio }}</div>
|
||||
<div>音频</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="quarter-div">
|
||||
<a-col :span="10">
|
||||
<img src="~@/assets/img/icon-文件接引数量.png" />
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<div class="datanum">{{ fileNum.dbfile }}</div>
|
||||
<div>数据库文件</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="quarter-div">
|
||||
<a-col :span="10">
|
||||
<img src="~@/assets/img/icon-文档数量.png" />
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<div class="datanum">{{ fileNum.video }}</div>
|
||||
<div>视频</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="quarter-div" style="margin-right: 0;">
|
||||
<a-col :span="10">
|
||||
<img src="~@/assets/img/icon-文档数量.png" />
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<div class="datanum">{{ fileNum.document }}</div>
|
||||
<div>文档</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div class="linese" style="float: left;"></div>
|
||||
<div class="linese" style="float: left;"></div>
|
||||
|
||||
<div>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form layout="inline">
|
||||
<a-form-item>
|
||||
<a-input placeholder="请输入" v-model="searchFile.queryCondition"></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button type="primary" icon="search" style="margin-left: 21px" @click="searchgetFileList"
|
||||
>查询</a-button
|
||||
>
|
||||
<a-button type="primary" icon="reload" style="margin-left: 8px" @click="reloadFileList">重置</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<a-col :span="12" style="text-align: right">
|
||||
<a-button type="primary" style="margin-left: 8px" @click="clickfile">
|
||||
<a-icon type="upload" />
|
||||
文件上传
|
||||
</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="rtable">
|
||||
<a-table
|
||||
ref="table"
|
||||
bordered
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
class="fileTable"
|
||||
:dataSource="dataSource"
|
||||
:pagination="searchFileTable"
|
||||
:loading="loading"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="download(record, $event)">下载</a> <a @click="viewFile(record, $event)">预览</a>
|
||||
<a @click="DeleteFile(record, $event)">删除</a>
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
<div class="linese"></div>
|
||||
</div>
|
||||
</div>
|
||||
<a-modal v-model="isopen" :title="modalTitle" ok-text="确认" cancel-text="取消" @ok="hideModal">
|
||||
<a-input placeholder="请输入" v-model="dirName" style="color: #000000 !important"></a-input>
|
||||
</a-modal>
|
||||
<uploadModal ref="modalForm"></uploadModal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import uploadModal from './modules/uploadModal'
|
||||
import guaz from '@assets/guaz.png'
|
||||
import {createDir,logicDelDir,renameDir,dirtreeList} from '@/api/dirapi'
|
||||
import {downloadFile,filePreview,logicDeleteFile,pageList,uoloadFile,countFileNum} from '@/api/fileapi'
|
||||
import { createDir, logicDelDir, renameDir, dirtreeList } from '@/api/dirapi'
|
||||
import { downloadFile, filePreview, logicDeleteFile, pageList, uoloadFile, countFileNum } from '@/api/fileapi'
|
||||
export default {
|
||||
name: "fileManage",
|
||||
components: {
|
||||
uploadModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dirName:"",
|
||||
guaz,
|
||||
expandedKeys: [],
|
||||
selectedKeys: [],
|
||||
treeData: [
|
||||
],
|
||||
isopen:false,
|
||||
columns: [
|
||||
{
|
||||
title: "序号",
|
||||
width: 70,
|
||||
customRender: (text, record, index) => `${index + 1}`,
|
||||
},
|
||||
{
|
||||
title: '文件名称',
|
||||
align: "center",
|
||||
dataIndex: 'fileName',
|
||||
width: 120,
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '文件后缀',
|
||||
align: "center",
|
||||
width: 100,
|
||||
dataIndex: 'fileSuffix',
|
||||
},
|
||||
{
|
||||
title: '文件大小',
|
||||
align: "center",
|
||||
width: 120,
|
||||
dataIndex: 'fileSize'
|
||||
},
|
||||
name: 'fileManage',
|
||||
components: {
|
||||
uploadModal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dirName: '',
|
||||
guaz,
|
||||
expandedKeys: [],
|
||||
selectedKeys: [],
|
||||
treeData: [],
|
||||
isopen: false,
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
width: 70,
|
||||
customRender: (text, record, index) => `${index + 1}`,
|
||||
},
|
||||
{
|
||||
title: '文件名称',
|
||||
align: 'center',
|
||||
dataIndex: 'fileName',
|
||||
width: 120,
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '文件后缀',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
dataIndex: 'fileSuffix',
|
||||
},
|
||||
{
|
||||
title: '文件大小',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
dataIndex: 'fileSize',
|
||||
},
|
||||
|
||||
{
|
||||
title: '文件类型',
|
||||
align: "center",
|
||||
width: 80,
|
||||
dataIndex: 'fileTypeName'
|
||||
},
|
||||
{
|
||||
title: '创建人',
|
||||
align: "center",
|
||||
width: 100,
|
||||
dataIndex: 'createByName'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
align: "center",
|
||||
width: 170
|
||||
}
|
||||
|
||||
],
|
||||
/* 分页参数 */
|
||||
searchFileTable: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['5', '10', '20','50','100'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + "-" + range[1] + " 共" + total + "条"
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
dataSource: [],
|
||||
loading: false,
|
||||
selectedRowKeys: [],
|
||||
selectId:"",
|
||||
modalTitle:"",
|
||||
modelType:"",
|
||||
searchFile:{
|
||||
"dirId":"",
|
||||
"queryCondition":"",
|
||||
"pageNum":"",
|
||||
"pageSize":"",
|
||||
},
|
||||
fileNum:{
|
||||
document:0,
|
||||
pictures:0,
|
||||
video:0,
|
||||
dbfile:0,
|
||||
audio:0,
|
||||
total:0
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
mounted() {
|
||||
this.getDirList();
|
||||
this.getcountFileNum();
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
clickfile(){
|
||||
if(this.selectId.length <= 0){
|
||||
this.$message.warning("必须选择文件上传目录");
|
||||
return;
|
||||
}
|
||||
console.log("dirid=" + this.searchFile.dirId)
|
||||
this.$refs.modalForm.title = "文件上传";
|
||||
this.$refs.modalForm.dirId = this.searchFile.dirId;
|
||||
this.$refs.modalForm.add();
|
||||
{
|
||||
title: '文件类型',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
dataIndex: 'fileTypeName',
|
||||
},
|
||||
getcountFileNum(){
|
||||
var that = this;
|
||||
countFileNum({}).then((res) => {
|
||||
if (res.success) {
|
||||
res.result.forEach((item,index)=>{
|
||||
that.setcountFileNum(item);
|
||||
})
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
{
|
||||
title: '创建人',
|
||||
align: 'center',
|
||||
width: 100,
|
||||
dataIndex: 'createByName',
|
||||
},
|
||||
setcountFileNum(item){
|
||||
switch (item.FILETYPE) {
|
||||
case "document":
|
||||
this.fileNum.document = item.NUMS
|
||||
break;
|
||||
case "pictures":
|
||||
this.fileNum.pictures = item.NUMS
|
||||
break;
|
||||
case "video":
|
||||
this.fileNum.video = item.NUMS
|
||||
break;
|
||||
case "dbfile":
|
||||
this.fileNum.dbfile = item.NUMS
|
||||
break;
|
||||
case "audio":
|
||||
this.fileNum.audio = item.NUMS
|
||||
break;
|
||||
case "total":
|
||||
this.fileNum.total = item.NUMS
|
||||
break;
|
||||
}
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
align: 'center',
|
||||
width: 170,
|
||||
},
|
||||
download(item){
|
||||
let apiBaseUrl = window._CONFIG['domianURL'] || "/jeecg-boot";
|
||||
window.open(apiBaseUrl+"/file/downloadFile?fileId="+item.id);
|
||||
],
|
||||
/* 分页参数 */
|
||||
searchFileTable: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['5', '10', '20', '50', '100'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
||||
},
|
||||
viewFile(item){
|
||||
filePreview({fileId:item.id}).then((res) => {
|
||||
if (res.success) {
|
||||
window.open("http://"+res.result,"_blank");
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
DeleteFile(item){
|
||||
var that = this;
|
||||
that.$confirm({
|
||||
title: "确认删除",
|
||||
content: "是否删除选中文件?",
|
||||
onOk: function () {
|
||||
logicDeleteFile({id:item.id}).then((res) => {
|
||||
that.$message.warning(res.message);
|
||||
that.searchgetFileList();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
onSelectChange(selectedRowKeys, selectedRows) {
|
||||
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
||||
},
|
||||
handleTableChange() {
|
||||
|
||||
},
|
||||
reloadFileList(){
|
||||
this.searchFile.queryCondition = "";
|
||||
this.searchFile.pageNum = 1;
|
||||
this.searchFile.pageSize = 10;
|
||||
this.getFileList();
|
||||
},
|
||||
searchgetFileList(){
|
||||
this.searchFile.dirId = this.selectId;
|
||||
this.searchFile.pageNum = this.searchFileTable.current;
|
||||
this.searchFile.pageSize = this.searchFileTable.pageSize;
|
||||
this.getFileList();
|
||||
},
|
||||
getFileList(){
|
||||
if(this.selectId.length <= 0){
|
||||
this.$message.warning("必须选择查询目录");
|
||||
return;
|
||||
}
|
||||
pageList(this.searchFile).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.rows
|
||||
this.searchFileTable.total = res.result.total
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
hideModal(){
|
||||
this.isopen =false;
|
||||
switch(this.modelType) {
|
||||
case "create":
|
||||
createDir({pid:this.selectId,dirName:this.dirName}).then((res) => {
|
||||
if (res.success) {
|
||||
this.treeData = res.result
|
||||
this.getDirList();
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
break;
|
||||
case "rename":
|
||||
renameDir({id:this.selectId,dirName:this.dirName}).then((res) => {
|
||||
if (res.success) {
|
||||
this.treeData = res.result
|
||||
this.getDirList();
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
},
|
||||
getDirList(){
|
||||
dirtreeList({dirName:""}).then((res) => {
|
||||
if (res.success) {
|
||||
this.treeData = res.result
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
menuClick(value){
|
||||
switch(value.key) {
|
||||
case "1":
|
||||
this.createDir();
|
||||
break;
|
||||
case "2":
|
||||
this.renameDir();
|
||||
break;
|
||||
case "3":
|
||||
this.logicDelDir();
|
||||
break;
|
||||
}
|
||||
},
|
||||
createDir(){
|
||||
this.modalTitle = "添加节点";
|
||||
this.isopen =true;
|
||||
this.modelType = "create";
|
||||
this.dirName="";
|
||||
},
|
||||
logicDelDir(){
|
||||
var that = this;
|
||||
this.$confirm({
|
||||
title: "确认删除",
|
||||
content: "是否删除选中目录?",
|
||||
onOk: function () {
|
||||
logicDelDir({id:that.selectId}).then((res) => {
|
||||
that.$message.warning(res.message);
|
||||
that.getDirList();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
renameDir(){
|
||||
this.modalTitle = "重命名节点";
|
||||
this.isopen =true;
|
||||
this.modelType = "rename";
|
||||
this.dirName="";
|
||||
},
|
||||
changeSelect(selectedKeys,e){
|
||||
this.selectId = e.node.dataRef.id
|
||||
this.searchFile.dirId = this.selectId
|
||||
this.searchgetFileList();
|
||||
}
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0,
|
||||
},
|
||||
dataSource: [],
|
||||
loading: false,
|
||||
selectedRowKeys: [],
|
||||
selectId: '',
|
||||
modalTitle: '',
|
||||
modelType: '',
|
||||
searchFile: {
|
||||
dirId: '',
|
||||
queryCondition: '',
|
||||
pageNum: '',
|
||||
pageSize: '',
|
||||
},
|
||||
fileNum: {
|
||||
document: 0,
|
||||
pictures: 0,
|
||||
video: 0,
|
||||
dbfile: 0,
|
||||
audio: 0,
|
||||
total: 0,
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.getDirList()
|
||||
this.getcountFileNum()
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
clickfile() {
|
||||
if (this.selectId.length <= 0) {
|
||||
this.$message.warning('必须选择文件上传目录')
|
||||
return
|
||||
}
|
||||
console.log('dirid=' + this.searchFile.dirId)
|
||||
this.$refs.modalForm.title = '文件上传'
|
||||
this.$refs.modalForm.dirId = this.searchFile.dirId
|
||||
this.$refs.modalForm.add()
|
||||
},
|
||||
getcountFileNum() {
|
||||
var that = this
|
||||
countFileNum({}).then((res) => {
|
||||
if (res.success) {
|
||||
res.result.forEach((item, index) => {
|
||||
that.setcountFileNum(item)
|
||||
})
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
setcountFileNum(item) {
|
||||
switch (item.FILETYPE) {
|
||||
case 'document':
|
||||
this.fileNum.document = item.NUMS
|
||||
break
|
||||
case 'pictures':
|
||||
this.fileNum.pictures = item.NUMS
|
||||
break
|
||||
case 'video':
|
||||
this.fileNum.video = item.NUMS
|
||||
break
|
||||
case 'dbfile':
|
||||
this.fileNum.dbfile = item.NUMS
|
||||
break
|
||||
case 'audio':
|
||||
this.fileNum.audio = item.NUMS
|
||||
break
|
||||
case 'total':
|
||||
this.fileNum.total = item.NUMS
|
||||
break
|
||||
}
|
||||
},
|
||||
download(item) {
|
||||
let apiBaseUrl = window._CONFIG['domianURL'] || '/jeecg-boot'
|
||||
window.open(apiBaseUrl + '/file/downloadFile?fileId=' + item.id)
|
||||
},
|
||||
viewFile(item) {
|
||||
filePreview({ fileId: item.id }).then((res) => {
|
||||
if (res.success) {
|
||||
window.open('http://' + res.result, '_blank')
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
DeleteFile(item) {
|
||||
var that = this
|
||||
that.$confirm({
|
||||
title: '确认删除',
|
||||
content: '是否删除选中文件?',
|
||||
onOk: function () {
|
||||
logicDeleteFile({ id: item.id }).then((res) => {
|
||||
that.$message.warning(res.message)
|
||||
that.searchgetFileList()
|
||||
})
|
||||
},
|
||||
})
|
||||
},
|
||||
onSelectChange(selectedRowKeys, selectedRows) {
|
||||
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
|
||||
},
|
||||
handleTableChange() {},
|
||||
reloadFileList() {
|
||||
this.searchFile.queryCondition = ''
|
||||
this.searchFile.pageNum = 1
|
||||
this.searchFile.pageSize = 10
|
||||
this.getFileList()
|
||||
},
|
||||
searchgetFileList() {
|
||||
this.searchFile.dirId = this.selectId
|
||||
this.searchFile.pageNum = this.searchFileTable.current
|
||||
this.searchFile.pageSize = this.searchFileTable.pageSize
|
||||
this.getFileList()
|
||||
},
|
||||
getFileList() {
|
||||
if (this.selectId.length <= 0) {
|
||||
this.$message.warning('必须选择查询目录')
|
||||
return
|
||||
}
|
||||
pageList(this.searchFile).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.rows
|
||||
this.searchFileTable.total = res.result.total
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
hideModal() {
|
||||
this.isopen = false
|
||||
switch (this.modelType) {
|
||||
case 'create':
|
||||
createDir({ pid: this.selectId, dirName: this.dirName }).then((res) => {
|
||||
if (res.success) {
|
||||
this.treeData = res.result
|
||||
this.getDirList()
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
})
|
||||
break
|
||||
case 'rename':
|
||||
renameDir({ id: this.selectId, dirName: this.dirName }).then((res) => {
|
||||
if (res.success) {
|
||||
this.treeData = res.result
|
||||
this.getDirList()
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
})
|
||||
break
|
||||
}
|
||||
},
|
||||
getDirList() {
|
||||
dirtreeList({ dirName: '' }).then((res) => {
|
||||
if (res.success) {
|
||||
this.treeData = res.result
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
menuClick(value) {
|
||||
switch (value.key) {
|
||||
case '1':
|
||||
this.createDir()
|
||||
break
|
||||
case '2':
|
||||
this.renameDir()
|
||||
break
|
||||
case '3':
|
||||
this.logicDelDir()
|
||||
break
|
||||
}
|
||||
},
|
||||
createDir() {
|
||||
this.modalTitle = '添加节点'
|
||||
this.isopen = true
|
||||
this.modelType = 'create'
|
||||
this.dirName = ''
|
||||
},
|
||||
logicDelDir() {
|
||||
var that = this
|
||||
this.$confirm({
|
||||
title: '确认删除',
|
||||
content: '是否删除选中目录?',
|
||||
onOk: function () {
|
||||
logicDelDir({ id: that.selectId }).then((res) => {
|
||||
that.$message.warning(res.message)
|
||||
that.getDirList()
|
||||
})
|
||||
},
|
||||
})
|
||||
},
|
||||
renameDir() {
|
||||
this.modalTitle = '重命名节点'
|
||||
this.isopen = true
|
||||
this.modelType = 'rename'
|
||||
this.dirName = ''
|
||||
},
|
||||
changeSelect(selectedKeys, e) {
|
||||
this.selectId = e.node.dataRef.id
|
||||
this.searchFile.dirId = this.selectId
|
||||
this.searchgetFileList()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pageBackground {
|
||||
background: #dee3ee;
|
||||
height: 100vh;
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
.breadHeader {
|
||||
height: 40px;
|
||||
background: #FFFFFF;
|
||||
line-height: 40px;
|
||||
font-size: 18px;
|
||||
color: #a3a8bb;
|
||||
padding: 0 100px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.menu{
|
||||
background: #ffffff !important;
|
||||
.menu {
|
||||
background: #ffffff !important;
|
||||
}
|
||||
.filecontent {
|
||||
height: calc(100vh - 48px);
|
||||
padding: 20px 30px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.siderHeader {
|
||||
height: 50px;
|
||||
color: #212224;
|
||||
line-height: 50px;
|
||||
font-size: 20px;
|
||||
background: #ebf0ff;
|
||||
text-align: center;
|
||||
height: calc(100vh - 48px);
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.flodContent {
|
||||
height: calc(100vh - 230px);
|
||||
overflow-y: auto;
|
||||
height: calc(100vh - 240px);
|
||||
overflow-y: auto;
|
||||
width: 300px;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.siderHeader {
|
||||
font-size: 18px;
|
||||
}
|
||||
.teeediv {
|
||||
height: calc(100vh - 320px);
|
||||
background: rgb(17, 42, 64);
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
/* position: absolute; */
|
||||
.righttop {
|
||||
width: calc(100vw - 400px);
|
||||
height: calc(100vh - 240px);
|
||||
float: left;
|
||||
}
|
||||
|
||||
.quarter-div {
|
||||
width: 15%;
|
||||
height: 100px;
|
||||
float: left;
|
||||
margin-right: 26px;
|
||||
background: #edf2ff;
|
||||
border: 1px solid #d3e5fd;
|
||||
border-radius: 10px;
|
||||
width:calc(16.6vw - 86px);
|
||||
height: 100px;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
border: 2px solid rgb(11, 72, 98);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
/deep/ .ant-layout-sider {
|
||||
background: #f6f8ff !important;
|
||||
border: 1px solid #dfe4f3;
|
||||
border-radius: 10px;
|
||||
height: calc(100vh - 180px);
|
||||
min-width: 200px !important;
|
||||
margin-left: 0px;
|
||||
margin-right: 50px;
|
||||
.quarter-div div {
|
||||
text-align: left;
|
||||
line-height: 30px;
|
||||
}
|
||||
.quarter-div .datanum {
|
||||
font-size: 26px;
|
||||
}
|
||||
.rtable{
|
||||
height: calc(100vh - 495px);
|
||||
margin-top: 15px
|
||||
}
|
||||
</style>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
selectedRowKeys.length }}</a>项
|
||||
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
||||
</div>
|
||||
<div style="height:calc(100vh - 128px);overflow:auto;">
|
||||
<div style="height:calc(100vh - 218px);overflow:auto;">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
size="middle"
|
||||
|
|
|
|||
|
|
@ -3,20 +3,59 @@
|
|||
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-row :gutter="30">
|
||||
<a-col :md="6" :sm="10" >
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="30" style="margin:-80px 0 20px;">
|
||||
<a-col :md="20" >
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
</span>
|
||||
</a-col>
|
||||
<a-col :md="4">
|
||||
<span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="关键词">
|
||||
<a-input placeholder="请输入搜索关键词" v-model="queryParam.databaseName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-form-item label="任务状态">
|
||||
<a-select placeholder="选择同步状态" option-filter-prop="children" size="large" v-model="queryParam.syncState">
|
||||
<a-select-option key="">
|
||||
全部
|
||||
</a-select-option>
|
||||
<a-select-option key="0">
|
||||
未同步
|
||||
</a-select-option>
|
||||
<a-select-option key="1">
|
||||
进行中
|
||||
</a-select-option>
|
||||
<a-select-option key="2">
|
||||
已结束
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||
<a-col :md="6" :sm="24" >
|
||||
<a-button type="primary" style="left: 10px" @click="loadData" icon="search">查询</a-button>
|
||||
</a-col>
|
||||
</span>
|
||||
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<!-- table区域-begin -->
|
||||
<div style="height:900px;overflow-y:auto;">
|
||||
<div style="height:calc(100vh - 300px);overflow:hidden;padding: 0 20px;">
|
||||
<div class="linese"></div>
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
style="height:calc(100vh - 344px);"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
|
|
@ -35,15 +74,16 @@
|
|||
<j-ellipsis :value="text" :length="20" />
|
||||
</span>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">修改</a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click="handleDistribute(record.id)">下发任务</a>
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<a-divider type="vertical"/>
|
||||
<a @click="handleDistribute(record.id)" >下发任务</a>
|
||||
<a-divider type="vertical" />
|
||||
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
</a-table>
|
||||
<div class="linese"></div>
|
||||
</div>
|
||||
<!-- table区域-end -->
|
||||
|
||||
|
|
@ -194,6 +234,3 @@
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less';
|
||||
</style>
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
<template>
|
||||
<div style="margin-top: 10px; margin-left: 10px;">
|
||||
<a-row>
|
||||
<a-col :md="8" :sm="1">
|
||||
<div style="margin-left: 10px;">
|
||||
<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">
|
||||
|
|
@ -12,7 +14,7 @@
|
|||
</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" icon="search">查询</a-button>
|
||||
<a-button @click="handleAdd" type="primary" v-has="'cont:btn'" icon="search">查询</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
|
@ -21,87 +23,82 @@
|
|||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
style="height:calc(100vh - 359px);"
|
||||
bordered
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
@change="handleTableChange">
|
||||
<!-- :locale="myLocale"-->
|
||||
|
||||
<!-- 字符串超长截取省略号显示-->
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="handleEdit(record)">选中</a>
|
||||
</span>
|
||||
:dataSource="dataSource">
|
||||
</a-table>
|
||||
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
<a-col :md="16" :sm="2">
|
||||
<a-col :md="17" style="padding-right:20px;">
|
||||
|
||||
<div class="linese"></div>
|
||||
<a-row>
|
||||
<div class="quarter">
|
||||
<div class="quarter-div">
|
||||
<a-row>
|
||||
<a-col :span="12" style="text-align: center;">
|
||||
<img style="margin-top: 10px;" :src="guaz" />
|
||||
<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="12">
|
||||
<div style="margin-top: 14px">{{fileNum.totalNumRow}}</div>
|
||||
<a-col :span="16">
|
||||
<div class="datanum">9694</div>
|
||||
<div>结构化数据条数</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="quarter-div">
|
||||
<a-row>
|
||||
<a-col :span="12" style="text-align: center;">
|
||||
<img style="margin-top: 10px;" :src="guaz" />
|
||||
</a-col>
|
||||
<a-col :span="5" class="quarter-div">
|
||||
<a-col :span="8">
|
||||
<img src="~@/assets/img/icon非结构化文件大小.png" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div style="margin-top: 14px">{{fileNum.totalFileSize}}GB</div>
|
||||
<a-col :span="16">
|
||||
<div class="datanum">10.92GB</div>
|
||||
<div>非结构化文件(大小)</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="quarter-div">
|
||||
<a-row>
|
||||
<a-col :span="12" style="text-align: center;">
|
||||
<img style="margin-top: 10px;" :src="guaz" />
|
||||
</a-col>
|
||||
<a-col :span="4" class="quarter-div">
|
||||
<a-col :span="10">
|
||||
<img src="~@/assets/img/icon-表数量.png" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div style="margin-top: 14px">{{fileNum.tableCount}}</div>
|
||||
<a-col :span="14">
|
||||
<div class="datanum">22</div>
|
||||
<div>表数量</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="quarter-div">
|
||||
<a-row>
|
||||
<a-col :span="12" style="text-align: center;">
|
||||
<img style="margin-top: 10px;" :src="guaz" />
|
||||
</a-col>
|
||||
<a-col :span="4" class="quarter-div">
|
||||
<a-col :span="10">
|
||||
<img src="~@/assets/img/icon-文件接引数量.png" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div style="margin-top: 14px">{{ fileNum.fileLinkCount }}</div>
|
||||
<a-col :span="14">
|
||||
<div class="datanum">7</div>
|
||||
<div>文件接引数量</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="quarter-div">
|
||||
<a-row>
|
||||
<a-col :span="12" style="text-align: center;">
|
||||
<img style="margin-top: 10px;" :src="guaz" />
|
||||
</a-col>
|
||||
<a-col :span="4" class="quarter-div">
|
||||
<a-col :span="10">
|
||||
<img src="~@/assets/img/icon-文档数量.png" />
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div style="margin-top: 14px">{{ fileNum.docFileCount }}</div>
|
||||
<a-col :span="14">
|
||||
<div class="datanum">5</div>
|
||||
<div>文档数量</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-col>
|
||||
</div>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :md="12" :sm="2">
|
||||
<div id="cleaningVariance" class="cleaningVariance" ref="cleaningVariance"></div>
|
||||
|
||||
<div class="linese"></div>
|
||||
<div class="linese"></div>
|
||||
<a-row :gutter="20">
|
||||
<a-col :md="12" :sm="2" 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-col>
|
||||
<a-col :md="12" :sm="2">
|
||||
<div id="totalNumberCatalogues" class="totalNumberCatalogues" ref="totalNumberCatalogues"></div>
|
||||
<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>
|
||||
</a-row>
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
|
@ -110,12 +107,14 @@
|
|||
<script>
|
||||
import { shipModelPageList,
|
||||
shipModeldeleteById } from '@/api/ship'
|
||||
import { getDataAnalysis,
|
||||
import { taskCreate,
|
||||
taskUpdateById,
|
||||
taskQueryById,
|
||||
taskPageList,
|
||||
getTaskDataTypeAnalysis } from '@/api/task'
|
||||
taskDistributeTask,
|
||||
taskDeleteById } from '@/api/task'
|
||||
import { getAction } from '@/api/manage'
|
||||
import JEllipsis from "@/components/jeecg/JEllipsis";
|
||||
import guaz from '@assets/guaz.png'
|
||||
export default {
|
||||
name: "statistics",
|
||||
components: {
|
||||
|
|
@ -124,12 +123,10 @@
|
|||
data () {
|
||||
return {
|
||||
description: '任务统计',
|
||||
dataSource: [],
|
||||
guaz,
|
||||
dataSources: [],
|
||||
queryParam: {
|
||||
pageNum :1,
|
||||
pageSize:20,
|
||||
name:""
|
||||
pageSize:20
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
|
|
@ -159,16 +156,7 @@
|
|||
width:180,
|
||||
scopedSlots: { customRender: 'action' },
|
||||
}
|
||||
],
|
||||
fileNum:{
|
||||
totalNumRow:0,
|
||||
tableCount:0,
|
||||
docFileCount:0,
|
||||
totalFileSize:0,
|
||||
fileLinkCount:0
|
||||
},
|
||||
cleaningVariancesource:[],
|
||||
totalNumberCataloguesData:[]
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -184,78 +172,85 @@
|
|||
|
||||
},
|
||||
methods: {
|
||||
//筛选需要重写handleTableChange
|
||||
handleTableChange(pagination, filters, sorter) {
|
||||
//分页、排序、筛选变化时触发
|
||||
//TODO 筛选
|
||||
if (Object.keys(sorter).length > 0) {
|
||||
this.isorter.column = sorter.field;
|
||||
this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
|
||||
}
|
||||
this.ipagination = pagination;
|
||||
this.loadData();
|
||||
dataAdd(){
|
||||
},
|
||||
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();
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
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();
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
getselect(){
|
||||
|
||||
},
|
||||
loadData() {
|
||||
taskPageList(this.queryParam).then((res) => {
|
||||
if (res.success) {
|
||||
this.dataSource = res.result.rows||res.result;
|
||||
this.handleEdit(res.result.rows[0]);
|
||||
if(res.result.total)
|
||||
{
|
||||
this.ipagination.total = res.result.total;
|
||||
}
|
||||
} else {
|
||||
this.$message.warning(res.message);
|
||||
}
|
||||
});
|
||||
},
|
||||
getTables(){
|
||||
this.getcleaningVariance();
|
||||
this.gettotalNumberCatalogues();
|
||||
},
|
||||
getcleaningVariance(){
|
||||
var myChart = this.$echarts.init(this.$refs.cleaningVariance);
|
||||
var option = {
|
||||
title: {
|
||||
text: '数据清洗差异统计'
|
||||
},
|
||||
legend: {},
|
||||
tooltip: {},
|
||||
dataset: {
|
||||
source: this.cleaningVariancesource
|
||||
grid:{
|
||||
left:'40px',
|
||||
right:'20px',
|
||||
top:'20px',
|
||||
bottom:'20px'
|
||||
},
|
||||
dataset: {
|
||||
source: [
|
||||
['product', '', ],
|
||||
['平台', 43.3],
|
||||
['编队', 83.1],
|
||||
['航空兵', 86.4],
|
||||
['陆战队', 72.4],
|
||||
['作战', 72.4],
|
||||
['反潜', 72.4],
|
||||
['舰炮', 72.4]
|
||||
]
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
axisLabel:{
|
||||
color: '#fff'
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: 'rgb(10,45,67)'
|
||||
}
|
||||
},
|
||||
},
|
||||
xAxis: { type: 'category',
|
||||
nameTextStyle: {
|
||||
align: "center"
|
||||
} },
|
||||
yAxis: {},
|
||||
// Declare several bar series, each will be mapped
|
||||
// to a column of dataset.source by default.
|
||||
series: [{ type: 'bar' }],
|
||||
series: [{ type: 'bar',barMaxWidth: 20, }],
|
||||
color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
||||
};
|
||||
myChart.setOption(option);
|
||||
|
|
@ -263,23 +258,23 @@
|
|||
gettotalNumberCatalogues(){
|
||||
var myChart = this.$echarts.init(this.$refs.totalNumberCatalogues);
|
||||
var option = {
|
||||
title: {
|
||||
text: '数据类型存储占比统计',
|
||||
left: 'left'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
bottom: 10,
|
||||
left: 'center',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '占比',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: this.totalNumberCataloguesData,
|
||||
radius: '80%',
|
||||
data: [
|
||||
{ value: 1048, name: '平台' },
|
||||
{ value: 735, name: '编队' },
|
||||
{ value: 580, name: '航空兵' },
|
||||
{ value: 484, name: '陆战队' },
|
||||
{ value: 300, name: '作战' },
|
||||
{ value: 735, name: '反潜' },
|
||||
{ value: 580, name: '舰炮' }
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
|
|
@ -297,33 +292,21 @@
|
|||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less';
|
||||
|
||||
.quarter-div {
|
||||
width: 18%;
|
||||
height: 100px;
|
||||
float: left;
|
||||
margin-right: 6px;
|
||||
background: #edf2ff;
|
||||
border: 1px solid #d3e5fd;
|
||||
border-radius: 10px;
|
||||
}
|
||||
/deep/ .ant-layout-sider {
|
||||
background: #f6f8ff !important;
|
||||
border: 1px solid #dfe4f3;
|
||||
border-radius: 10px;
|
||||
height: calc(100vh - 180px);
|
||||
min-width: 200px !important;
|
||||
margin-left: 0px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
.cleaningVariance {
|
||||
width: 620px; height: 450px; float: left; padding: 30px 10px 10px 20px;
|
||||
}
|
||||
.totalNumberCatalogues {
|
||||
width: 620px; height: 450px; float: right; padding: 30px 10px 10px 20px;
|
||||
}
|
||||
.quarter {
|
||||
margin-left: 10px; margin-bottom: 20px;padding: 30px 10px 10px 20px;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user