IDCDatasync/IDCDatasync-vue
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改统计及日期不切换

Browse Source
This commit is contained in:
wangchengming 2025-06-17 10:32:44 +08:00
parent 002dfe99e1
commit 2103ffa370
4 changed files with 219 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/dashboard/Analysis.vue
View File

@ -347,6 +347,9 @@ export default {
] ]
}; };
myChart.setOption(option); myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
}, },
getFillMemoryInfo() { getFillMemoryInfo() {
fillMemoryInfo().then(res => { fillMemoryInfo().then(res => {
@ -416,6 +419,10 @@ export default {
] ]
}; };
myChart.setOption(option); myChart.setOption(option);
// 监听窗口大小变化
window.addEventListener('resize', function () {
myChart.resize();
});
}, },
getFillJvmInfo() { getFillJvmInfo() {
fillJvmInfo().then(res => { fillJvmInfo().then(res => {
@ -484,6 +491,9 @@ export default {
] ]
}; };
myChart.setOption(option); myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
} }
}, },
} }

23
src/views/data/dataSearch.vue
View File

@ -162,12 +162,12 @@ export default {
if (res.success) { if (res.success) {
this.allTask = res.result this.allTask = res.result
if (res.result.length > 0) { if (res.result.length > 0) {
this.activeTaskId = res.result[0].id this.activeTaskId = res.result[0].id
const start = moment(res.result[0].startTime) const start = moment(res.result[0].startTime)
const end = moment(res.result[0].endTime) const end = moment(res.result[0].endTime)
this.defaultTime.push(start, end) this.defaultTime.push(start, end)
this.tableParams.startTime = start.format(this.dateFormat); this.tableParams.startTime = start.format(this.dateFormat);
this.tableParams.endTime = end.format(this.dateFormat) this.tableParams.endTime = end.format(this.dateFormat)
} }
} else { } else {
this.$message.warning(res.message); this.$message.warning(res.message);
@ -175,13 +175,14 @@ export default {
}) })
}, },
handleTaskChange(value) { handleTaskChange(value) {
var curTask = this.allTask.filter(item => item.id == value) var curTask = this.allTask.filter(item => item.id == value)[0]
const start = moment(curTask.startTime) if (curTask) {
const end = moment(curTask.endTime) const start = moment(curTask.startTime)
this.defaultTime.push(start, end) const end = moment(curTask.endTime)
this.tableParams.startTime = start.format(this.dateFormat); this.defaultTime.push(start, end)
this.tableParams.endTime = end.format(this.dateFormat) this.tableParams.startTime = start.format(this.dateFormat);
this.tableParams.endTime = end.format(this.dateFormat)
}
}, },
calculateScrollY() { calculateScrollY() {
// 获取父容器高度（需减去表格内其他元素的高度，如分页栏） // 获取父容器高度（需减去表格内其他元素的高度，如分页栏）

328
src/views/data/statistics.vue
View File

@ -3,96 +3,108 @@
<a-row :gutter="20"> <a-row :gutter="20">
<a-col :md="12" :sm="1" style="height:calc(50vh - 125px);"> <a-col :md="12" :sm="1" style="height:calc(50vh - 125px);">
<div class="linese"></div> <div class="linese"></div>
<div class="echartsTitle"><div class="ecicon"></div>数据清洗差异统计</div> <div class="echartsTitle">
<div id="cleaningVariance" class="cleaningVariance" ref="cleaningVariance" style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div> <div class="ecicon"></div>数据清洗差异统计
</div>
<div id="cleaningVariance" class="cleaningVariance" ref="cleaningVariance"
style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
<div class="linese"></div> <div class="linese"></div>
</a-col> </a-col>
<a-col :md="12" :sm="2" style="height:calc(50vh - 125px);"> <a-col :md="12" :sm="2" style="height:calc(50vh - 125px);">
<div class="linese"></div> <div class="linese"></div>
<div class="echartsTitle"><div class="ecicon"></div>数据编目总量统计</div> <div class="echartsTitle">
<div id="totalNumberCatalogues" class="totalNumberCatalogues" ref="totalNumberCatalogues" style="width: 100%;background:#e6e9f1; height: calc(100% - 70px); "></div> <div class="ecicon"></div>数据编目总量统计
</div>
<div id="totalNumberCatalogues" class="totalNumberCatalogues" ref="totalNumberCatalogues"
style="width: 100%;background:#e6e9f1; height: calc(100% - 70px); "></div>
<div class="linese"></div> <div class="linese"></div>
</a-col> </a-col>
<a-col :md="12" :sm="3" style="height:calc(50vh - 125px);"> <a-col :md="12" :sm="3" style="height:calc(50vh - 125px);">
<div class="linese"></div> <div class="linese"></div>
<div class="echartsTitle"><div class="ecicon"></div>数据类型存储占比统计</div> <div class="echartsTitle">
<div id="catalogingStorage" class="catalogingStorage" ref="catalogingStorage" style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div> <div class="ecicon"></div>数据类型存储占比统计
</div>
<div id="catalogingStorage" class="catalogingStorage" ref="catalogingStorage"
style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
<div class="linese"></div> <div class="linese"></div>
</a-col> </a-col>
<a-col :md="12" :sm="4" style="height:calc(50vh - 125px);"> <a-col :md="12" :sm="4" style="height:calc(50vh - 125px);">
<div class="linese"></div> <div class="linese"></div>
<div class="echartsTitle"><div class="ecicon"></div>数据编目存储占比统计</div> <div class="echartsTitle">
<div id="typeStorage" class="typeStorage" ref="typeStorage" style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div> <div class="ecicon"></div>数据编目存储占比统计
</div>
<div id="typeStorage" class="typeStorage" ref="typeStorage"
style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
<div class="linese"></div> <div class="linese"></div>
</a-col> </a-col>
</a-row> </a-row>
</div> </div>
</template> </template>
<script> <script>
import { getAction } from '@/api/manage' import { getAction } from '@/api/manage'
import JEllipsis from "@/components/jeecg/JEllipsis"; import JEllipsis from "@/components/jeecg/JEllipsis";
export default { export default {
name: "statistics", name: "statistics",
components: { components: {
JEllipsis JEllipsis
}, },
data () { data() {
return { return {
description: '数据统计', description: '数据统计',
cleaningVarianceData:[], cleaningVarianceData: [],
totalNumberCataloguesData:[], totalNumberCataloguesData: [],
catalogingStorageData:[], catalogingStorageData: [],
typeStorage:[] typeStorage: []
} }
}, },
mounted() { mounted() {
this.getTables() this.getTables()
}, },
computed: { computed: {
}, },
destroyed: function () { destroyed: function () {
}, },
created () { created() {
}, },
methods: { methods: {
dataAdd(){ dataAdd() {
}, },
getselect(){ getselect() {
}, },
getTables(){ getTables() {
this.cleaningVarianceData =[['product', '贴源库', '集成库']]; this.cleaningVarianceData = [['product', '贴源库', '集成库']];
getAction("/dataAnalysis/getClnDiffStats",{}).then((res)=>{ getAction("/dataAnalysis/getClnDiffStats", {}).then((res) => {
if(res.success){ if (res.success) {
res.result.schemaNames.forEach(row => { res.result.schemaNames.forEach(row => {
this.cleaningVarianceData.push([row, parseInt(res.result.numRowOriMap[row]),parseInt(res.result.numRowStaMap[row]) ]) this.cleaningVarianceData.push([row, parseInt(res.result.numRowOriMap[row]), parseInt(res.result.numRowStaMap[row])])
}) })
this.getcleaningVariance(); this.getcleaningVariance();
} }
}); });
this.totalNumberCataloguesData =[]; this.totalNumberCataloguesData = [];
getAction("/dataAnalysis/getTagStats",{}).then((res)=>{ getAction("/dataAnalysis/getTagStats", {}).then((res) => {
if(res.success){ if (res.success) {
res.result.tagNames.forEach(row => { res.result.tagNames.forEach(row => {
this.totalNumberCataloguesData.push([row, parseInt(res.result.tagNumRow[row]) ]) this.totalNumberCataloguesData.push([row, parseInt(res.result.tagNumRow[row])])
}) })
this.gettotalNumberCatalogues(); this.gettotalNumberCatalogues();
} }
}); });
this.catalogingStorageData =[]; this.catalogingStorageData = [];
getAction("/dataAnalysis/getDataTypeAnalysis",{}).then((res)=>{ getAction("/dataAnalysis/getDataTypeAnalysis", {}).then((res) => {
if(res.success){ if (res.success) {
res.result.typeName.forEach(row => { res.result.typeName.forEach(row => {
this.catalogingStorageData.push({ value: parseInt(res.result.numRowMap[row]), name: row }) this.catalogingStorageData.push({ value: parseInt(res.result.numRowMap[row]), name: row })
}) })
this.getcatalogingStorage(); this.getcatalogingStorage();
} }
}); });
this.typeStorage =[] this.typeStorage = []
getAction("/dataAnalysis/getTagNumRowStats",{}).then((res)=>{ getAction("/dataAnalysis/getTagNumRowStats", {}).then((res) => {
if(res.success){ if (res.success) {
res.result.tagNames.forEach(row => { res.result.tagNames.forEach(row => {
this.typeStorage.push({ value: parseInt(res.result.tagNumRow[row]), name: row }) this.typeStorage.push({ value: parseInt(res.result.tagNumRow[row]), name: row })
}) })
@ -100,45 +112,45 @@
} }
}); });
}, },
getcleaningVariance(){ getcleaningVariance() {
var myChart = this.$echarts.init(this.$refs.cleaningVariance); var myChart = this.$echarts.init(this.$refs.cleaningVariance);
var option = { var option = {
tooltip: {}, tooltip: {},
grid:{ grid: {
left:'80px', left: '80px',
right:'20px', right: '20px',
top:'20px', top: '20px',
bottom:'30px' bottom: '30px'
}, },
xAxis: { xAxis: {
type: 'category' , type: 'category',
axisLabel:{ axisLabel: {
color: '#6C758B' color: '#6C758B'
}, },
splitLine:{ splitLine: {
lineStyle:{ lineStyle: {
color: '#6C758B' color: '#6C758B'
} }
}, },
axisLine:{ axisLine: {
lineStyle:{ lineStyle: {
color: '#6C758B' color: '#6C758B'
} }
}, },
}, },
yAxis: { yAxis: {
axisLabel:{ axisLabel: {
color: '#6C758B' color: '#6C758B'
}, },
splitLine:{ splitLine: {
lineStyle:{ lineStyle: {
color: '#6C758B' color: '#6C758B'
} }
}, },
axisLine:{ axisLine: {
lineStyle:{ lineStyle: {
color: '#6C758B' color: '#6C758B'
} }
}, },
@ -148,117 +160,129 @@
}, },
// Declare several bar series, each will be mapped // Declare several bar series, each will be mapped
// to a column of dataset.source by default. // to a column of dataset.source by default.
series: [{ type: 'bar',barMaxWidth: 20, }, { type: 'bar',barMaxWidth: 20, }], series: [{ type: 'bar', barMaxWidth: 20, }, { type: 'bar', barMaxWidth: 20, }],
color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'] color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
}; };
myChart.setOption(option); myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
}, },
gettotalNumberCatalogues(){ gettotalNumberCatalogues() {
var myChart = this.$echarts.init(this.$refs.totalNumberCatalogues); var myChart = this.$echarts.init(this.$refs.totalNumberCatalogues);
var option = { var option = {
tooltip: {}, tooltip: {},
dataset: { dataset: {
source: this.totalNumberCataloguesData source: this.totalNumberCataloguesData
}, },
grid:{ grid: {
left:'40px', left: '40px',
right:'20px', right: '20px',
top:'20px', top: '20px',
bottom:'30px' bottom: '30px'
}, },
xAxis: { xAxis: {
type: 'category' , type: 'category',
axisLabel:{ axisLabel: {
color: '#6C758B' color: '#6C758B'
}, },
splitLine:{ splitLine: {
lineStyle:{ lineStyle: {
color: '#6C758B' color: '#6C758B'
} }
}, },
axisLine:{ axisLine: {
lineStyle:{ lineStyle: {
color: '#6C758B' color: '#6C758B'
} }
}, },
}, },
yAxis: { yAxis: {
axisLabel:{ axisLabel: {
color: '#6C758B' color: '#6C758B'
}, },
splitLine:{ splitLine: {
lineStyle:{ lineStyle: {
color: '#6C758B' color: '#6C758B'
} }
}, },
axisLine:{ axisLine: {
lineStyle:{ lineStyle: {
color: '#6C758B' color: '#6C758B'
} }
}, },
}, },
// Declare several bar series, each will be mapped // Declare several bar series, each will be mapped
// to a column of dataset.source by default. // to a column of dataset.source by default.
series: [{ type: 'bar',barMaxWidth: 30, }], series: [{ type: 'bar', barMaxWidth: 30, }],
color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'] color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
};
myChart.setOption(option);
},
getcatalogingStorage(){
var myChart = this.$echarts.init(this.$refs.catalogingStorage);
var option = {
tooltip: {
trigger: 'item'
},
series: [
{
name: 'MB',
type: 'pie',
radius: '70%',
data: this.catalogingStorageData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
],
color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
}; };
myChart.setOption(option); myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
}, },
gettypeStorage(){ getcatalogingStorage() {
var myChart = this.$echarts.init(this.$refs.typeStorage); var myChart = this.$echarts.init(this.$refs.catalogingStorage);
var option = { var option = {
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
series: [ series: [
{ {
name: '占比', name: 'MB',
type: 'pie', type: 'pie',
radius: '70%', radius: '70%',
data: this.typeStorage, data: this.catalogingStorageData,
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 10, shadowBlur: 10,
shadowOffsetX: 0, shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)' shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
} }
} ],
} color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
],
color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
}; };
myChart.setOption(option); myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
},
gettypeStorage() {
var myChart = this.$echarts.init(this.$refs.typeStorage);
var option = {
tooltip: {
trigger: 'item'
},
series: [
{
name: '占比',
type: 'pie',
radius: '70%',
data: this.typeStorage,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
],
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
};
myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
}, },
}
} }
</script> }
<style scoped> </script>
@import '~@assets/less/common.less'; <style scoped>
</style> @import '~@assets/less/common.less';
</style>

32
src/views/task/statistics.vue
View File

@ -13,15 +13,15 @@
</a-col> </a-col>
<a-col :md="6" :sm="10"> <a-col :md="6" :sm="10">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons"> <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button @click="loadData" type="primary" icon="search">查询</a-button> <a-button @click="loadData" type="primary" icon="search">查询</a-button>
</span> </span>
</a-col> </a-col>
</a-row> </a-row>
</a-form> </a-form>
</div> </div>
<a-table ref="table" size="middle" style="height:calc(100vh - 343px);background:#e6e9f1;padding: 10px;" bordered rowKey="id" <a-table ref="table" size="middle" style="height:calc(100vh - 343px);background:#e6e9f1;padding: 10px;"
:custom-row="handleCustomRow" bordered rowKey="id" :custom-row="handleCustomRow" :columns="columns" :dataSource="dataSource"
:columns="columns" :dataSource="dataSource" @change="handleTableChange"> @change="handleTableChange">
<span slot="action" slot-scope="text, record"> <span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">选中</a> <a @click="handleEdit(record)">选中</a>
</span> </span>
@ -83,18 +83,20 @@
<div class="linese"></div> <div class="linese"></div>
<div class="linese"></div> <div class="linese"></div>
<a-row :gutter="20" > <a-row :gutter="20">
<a-col :md="12" :sm="1" style="height:calc(100vh - 422px);"> <a-col :md="12" :sm="1" style="height:calc(100vh - 422px);">
<div class="echartsTitle"> <div class="echartsTitle">
<div class="ecicon"></div>数据总量统计 <div class="ecicon"></div>数据总量统计
</div> </div>
<div id="cleaningVariance" ref="cleaningVariance" style="width: 100%; height: calc(100% - 31px);background:#e6e9f1;"></div> <div id="cleaningVariance" ref="cleaningVariance"
style="width: 100%; height: calc(100% - 31px);background:#e6e9f1;"></div>
</a-col> </a-col>
<a-col :md="12" :sm="2" style="height:calc(100vh - 422px);padding-right:20px;"> <a-col :md="12" :sm="2" style="height:calc(100vh - 422px);padding-right:20px;">
<div class="echartsTitle"> <div class="echartsTitle">
<div class="ecicon"></div>数据类型存储占比统计 <div class="ecicon"></div>数据类型存储占比统计
</div> </div>
<div id="totalNumberCatalogues" ref="totalNumberCatalogues" style="width: 100%; height: calc(100% - 31px);background:#e6e9f1;"></div> <div id="totalNumberCatalogues" ref="totalNumberCatalogues"
style="width: 100%; height: calc(100% - 31px);background:#e6e9f1;"></div>
</a-col> </a-col>
</a-row> </a-row>
<div class="linese"></div> <div class="linese"></div>
@ -167,7 +169,7 @@ export default {
}, },
cleaningVariancesource: [], cleaningVariancesource: [],
totalNumberCataloguesData: [], totalNumberCataloguesData: [],
selectedRowId :null selectedRowId: null
} }
}, },
mounted() { mounted() {
@ -189,7 +191,7 @@ export default {
this.selectedRowId = record.id; this.selectedRowId = record.id;
}, },
class: { class: {
'row-highlight': this.selectedRowId === record.id 'row-highlight': this.selectedRowId === record.id
} }
}; };
}, },
@ -262,7 +264,7 @@ export default {
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color:'#6C758B' color: '#6C758B'
} }
}, },
axisLine: { axisLine: {
@ -292,6 +294,9 @@ export default {
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'] color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
}; };
myChart.setOption(option); myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
}, },
gettotalNumberCatalogues() { gettotalNumberCatalogues() {
var myChart = this.$echarts.init(this.$refs.totalNumberCatalogues); var myChart = this.$echarts.init(this.$refs.totalNumberCatalogues);
@ -317,6 +322,9 @@ export default {
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'] color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
}; };
myChart.setOption(option); myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
}, },
} }
} }
@ -341,10 +349,12 @@ export default {
.quarter-div .datanum { .quarter-div .datanum {
font-size: 26px; font-size: 26px;
} }
/* 高亮样式 */ /* 高亮样式 */
/deep/.row-highlight { /deep/.row-highlight {
background-color: #ffffff !important; background-color: #ffffff !important;
} }
.quarter-div .ant-col-8, .quarter-div .ant-col-8,
.quarter-div .ant-col-10 { .quarter-div .ant-col-10 {
text-align: center; text-align: center;