310 lines
11 KiB
Vue
310 lines
11 KiB
Vue
<template>
|
|
<div style="margin-top: -10px;">
|
|
<a-row :gutter="20">
|
|
<a-col :md="12" :sm="1" style="height:calc(50vh - 125px);">
|
|
<div class="linese"></div>
|
|
<div class="echartsTitle">
|
|
<div class="ecicon"></div>数据清洗差异统计
|
|
<div style="text-align: right;">
|
|
<a-select placeholder="选择型号" option-filter-prop="children" show-search v-model="selectshipModel">
|
|
<a-select-option v-for="item in shipModel" :value="item">
|
|
{{ item }}
|
|
</a-select-option>
|
|
</a-select>
|
|
</div>
|
|
</div>
|
|
<div id="cleaningVariance" class="cleaningVariance" ref="cleaningVariance"
|
|
style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
|
|
<div class="linese"></div>
|
|
</a-col>
|
|
<a-col :md="12" :sm="2" style="height:calc(50vh - 125px);">
|
|
<div class="linese"></div>
|
|
<div class="echartsTitle">
|
|
<div class="ecicon"></div>数据编目总量统计
|
|
</div>
|
|
<div id="totalNumberCatalogues" class="totalNumberCatalogues" ref="totalNumberCatalogues"
|
|
style="width: 100%;background:#e6e9f1; height: calc(100% - 70px); "></div>
|
|
<div class="linese"></div>
|
|
</a-col>
|
|
<a-col :md="12" :sm="3" style="height:calc(50vh - 125px);">
|
|
<div class="linese"></div>
|
|
<div class="echartsTitle">
|
|
<div class="ecicon"></div>数据类型存储占比统计
|
|
</div>
|
|
<div id="catalogingStorage" class="catalogingStorage" ref="catalogingStorage"
|
|
style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
|
|
<div class="linese"></div>
|
|
</a-col>
|
|
<a-col :md="12" :sm="4" style="height:calc(50vh - 125px);">
|
|
<div class="linese"></div>
|
|
<div class="echartsTitle">
|
|
<div class="ecicon"></div>数据编目存储占比统计
|
|
</div>
|
|
<div id="typeStorage" class="typeStorage" ref="typeStorage"
|
|
style="width: 100%;background:#e6e9f1; height: calc(100% - 70px);"></div>
|
|
<div class="linese"></div>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getAction } from '@/api/manage'
|
|
import JEllipsis from "@/components/jeecg/JEllipsis";
|
|
import { Select } from 'ant-design-vue';
|
|
export default {
|
|
name: "statistics",
|
|
components: {
|
|
JEllipsis
|
|
},
|
|
data() {
|
|
return {
|
|
description: '数据统计',
|
|
cleaningVarianceData: [],
|
|
totalNumberCataloguesData: [],
|
|
catalogingStorageData: [],
|
|
typeStorage: [],
|
|
shipModel:["052D","055","054A","002","071"],
|
|
selectshipModel:"052D"
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getTables()
|
|
},
|
|
computed: {
|
|
},
|
|
destroyed: function () {
|
|
},
|
|
created() {
|
|
|
|
},
|
|
methods: {
|
|
dataAdd() {
|
|
},
|
|
getselect() {
|
|
|
|
},
|
|
getTables() {
|
|
this.cleaningVarianceData = [['product', '贴源库', '集成库']];
|
|
getAction("/dataAnalysis/getClnDiffStats?shipModel="+this.selectshipModel, {}).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();
|
|
}
|
|
});
|
|
},
|
|
getcleaningVariance() {
|
|
var myChart = this.$echarts.init(this.$refs.cleaningVariance);
|
|
var option = {
|
|
dataZoom: [
|
|
// 鼠标滚轮缩放
|
|
{
|
|
type: 'inside'
|
|
}
|
|
],
|
|
tooltip: {},
|
|
grid: {
|
|
left: '80px',
|
|
right: '20px',
|
|
top: '20px',
|
|
bottom: '30px'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
|
|
axisLabel: {
|
|
color: '#6C758B'
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#6C758B'
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#6C758B'
|
|
}
|
|
},
|
|
},
|
|
yAxis: {
|
|
|
|
axisLabel: {
|
|
color: '#6C758B'
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#6C758B'
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#6C758B'
|
|
}
|
|
},
|
|
},
|
|
dataset: {
|
|
source: this.cleaningVarianceData
|
|
},
|
|
// Declare several bar series, each will be mapped
|
|
// to a column of dataset.source by default.
|
|
series: [{ type: 'bar', barMaxWidth: 20, }, { type: 'bar', barMaxWidth: 20, }],
|
|
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener('resize', function () {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
gettotalNumberCatalogues() {
|
|
var myChart = this.$echarts.init(this.$refs.totalNumberCatalogues);
|
|
var option = {
|
|
dataZoom: [
|
|
// 鼠标滚轮缩放
|
|
{
|
|
type: 'inside'
|
|
}
|
|
],
|
|
tooltip: {},
|
|
dataset: {
|
|
source: this.totalNumberCataloguesData
|
|
},
|
|
grid: {
|
|
left: '40px',
|
|
right: '20px',
|
|
top: '20px',
|
|
bottom: '30px'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
|
|
axisLabel: {
|
|
color: '#6C758B'
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#6C758B'
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#6C758B'
|
|
}
|
|
},
|
|
},
|
|
yAxis: {
|
|
|
|
axisLabel: {
|
|
color: '#6C758B'
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#6C758B'
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#6C758B'
|
|
}
|
|
},
|
|
},
|
|
// Declare several bar series, each will be mapped
|
|
// to a column of dataset.source by default.
|
|
series: [{ type: 'bar', barMaxWidth: 30, }],
|
|
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener('resize', function () {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
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);
|
|
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>
|
|
@import '~@assets/less/common.less';
|
|
</style> |