fix(项目报告模版): 修复开源版本打包时项目报告模版引用了xpack里组件而导致打包失败的问题
修复开源版本打包时项目报告模版引用了xpack里组件而导致打包失败的问题
This commit is contained in:
song-tianyang
BugKing
parent
d6c97e7df0
commit
19bd69c47f
|
|
@ -0,0 +1,329 @@
|
|||
<template>
|
||||
<div v-loading="loading">
|
||||
<el-card class="ms-test-chart" :style="{height: h + 'px'}" ref="msDrawer">
|
||||
<el-row class="ms-row">
|
||||
<p class="tip"><span style="margin-left: 5px"></span> {{ $t('commons.report_statistics.chart') }} </p>
|
||||
<div class="ms-test-chart-header" v-if="!readOnly">
|
||||
<el-dropdown @command="exportCommand" :hide-on-click="false">
|
||||
<span class="el-dropdown-link">
|
||||
{{ $t('commons.export') }}<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="jpg">JPG</el-dropdown-item>
|
||||
<el-dropdown-item command="png">PNG</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<span style="margin: 0px 10px 10px">|</span>
|
||||
<el-select v-model="chartType" class="ms-col-type" size="mini" style="width: 100px" @change="generateOption">
|
||||
<el-option :key="t.id" :value="t.id" :label="t.name" v-for="t in charts"/>
|
||||
</el-select>
|
||||
<span style="margin: 0px 10px 10px">|</span>
|
||||
<el-select v-model="order" class="ms-col-type" size="mini" style="width: 120px" @change="orderCharts">
|
||||
<el-option :key="t.id" :value="t.id" :label="t.name" v-for="t in orders"/>
|
||||
</el-select>
|
||||
<span style="margin: 0px 10px 10px">|</span>
|
||||
<font-awesome-icon v-if="!isFullScreen && showFullScreen" class="report-alt-ico" :icon="['fa', 'expand-alt']"
|
||||
size="lg" @click="fullScreen"/>
|
||||
<font-awesome-icon v-if="isFullScreen && showFullScreen" class="report-alt-ico" :icon="['fa', 'compress-alt']"
|
||||
size="lg" @click="unFullScreen"/>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row style="overflow: auto">
|
||||
<ms-chart ref="chart1" v-if="!loading" :options="dataOption"
|
||||
:style="{width: chartWidthNumber+'px', height: (h-70) + 'px'}" class="chart-config" :autoresize="true"
|
||||
:id="reportId"/>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts";
|
||||
import MsChart from "@/business/components/common/chart/MsChart";
|
||||
|
||||
export default {
|
||||
name: "ReportChart",
|
||||
components: {MsChart},
|
||||
props: {
|
||||
loadOption: {},
|
||||
pieOption: {},
|
||||
reportId: String,
|
||||
chartType: {
|
||||
type: String,
|
||||
default() {
|
||||
return "bar";
|
||||
}
|
||||
},
|
||||
chartWidth: Number,
|
||||
needFullScreen: Boolean,
|
||||
readOnly: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataOption: {},
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: document.documentElement.clientWidth - 760,
|
||||
h: document.documentElement.clientHeight * 0.5,
|
||||
chartWidthNumber: document.documentElement.clientWidth - 760,
|
||||
isFullScreen: false,
|
||||
originalW: 100,
|
||||
originalH: 100,
|
||||
showFullScreen: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
charts: [
|
||||
{id: 'bar', name: this.$t('commons.report_statistics.bar')},
|
||||
{id: 'pie', name: this.$t('commons.report_statistics.pie')}
|
||||
],
|
||||
order: "",
|
||||
orders: [{id: '', name: this.$t('commons.sort_default')}, {
|
||||
id: 'desc',
|
||||
name: this.$t('commons.report_statistics.desc')
|
||||
}, {
|
||||
id: 'asc',
|
||||
name: this.$t('commons.report_statistics.asc')
|
||||
}],
|
||||
loading: false,
|
||||
options: {},
|
||||
pieItemOption: {
|
||||
dataset: [{
|
||||
source: [
|
||||
['Product', 'Sales', 'Price', 'Year'],
|
||||
['Cake', 123, 32, 2011],
|
||||
['Cereal', 231, 14, 2011],
|
||||
['Tofu', 235, 5, 2011],
|
||||
['Dumpling', 341, 25, 2011],
|
||||
['Biscuit', 122, 29, 2011],
|
||||
['Cake', 143, 30, 2012],
|
||||
['Cereal', 201, 19, 2012],
|
||||
['Tofu', 255, 7, 2012],
|
||||
['Dumpling', 241, 27, 2012],
|
||||
['Biscuit', 102, 34, 2012],
|
||||
['Cake', 153, 28, 2013],
|
||||
['Cereal', 181, 21, 2013],
|
||||
['Tofu', 395, 4, 2013],
|
||||
['Dumpling', 281, 31, 2013],
|
||||
['Biscuit', 92, 39, 2013],
|
||||
['Cake', 223, 29, 2014],
|
||||
['Cereal', 211, 17, 2014],
|
||||
['Tofu', 345, 3, 2014],
|
||||
['Dumpling', 211, 35, 2014],
|
||||
['Biscuit', 72, 24, 2014],
|
||||
],
|
||||
}, {
|
||||
transform: {
|
||||
type: 'filter',
|
||||
config: {dimension: 'Year', value: 2011}
|
||||
},
|
||||
}, {
|
||||
transform: {
|
||||
type: 'filter',
|
||||
config: {dimension: 'Year', value: 2012}
|
||||
}
|
||||
}, {
|
||||
transform: {
|
||||
type: 'filter',
|
||||
config: {dimension: 'Year', value: 2013}
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
type: 'pie', radius: 50, center: ['50%', '25%'],
|
||||
datasetIndex: 1
|
||||
}, {
|
||||
type: 'pie', radius: 50, center: ['50%', '50%'],
|
||||
datasetIndex: 2
|
||||
}, {
|
||||
type: 'pie', radius: 50, center: ['50%', '75%'],
|
||||
datasetIndex: 3
|
||||
}],
|
||||
media: [{
|
||||
query: {minAspectRatio: 1},
|
||||
option: {
|
||||
series: [
|
||||
{center: ['25%', '50%']},
|
||||
{center: ['50%', '50%']},
|
||||
{center: ['75%', '50%']}
|
||||
]
|
||||
}
|
||||
}, {
|
||||
option: {
|
||||
series: [
|
||||
{center: ['50%', '25%']},
|
||||
{center: ['50%', '50%']},
|
||||
{center: ['50%', '75%']}
|
||||
]
|
||||
}
|
||||
}]
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.chartType === 'pie') {
|
||||
this.dataOption = this.pieOption;
|
||||
} else {
|
||||
this.dataOption = this.loadOption;
|
||||
}
|
||||
|
||||
if (this.needFullScreen) {
|
||||
this.w = document.documentElement.clientWidth;
|
||||
}
|
||||
this.countChartWidth();
|
||||
this.reload();
|
||||
},
|
||||
watch: {
|
||||
chartWidth() {
|
||||
this.countChartWidth();
|
||||
},
|
||||
chartType() {
|
||||
this.generateOption();
|
||||
this.countChartWidth();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
countChartWidth() {
|
||||
if (this.chartWidth === 0 || this.chartType === 'bar') {
|
||||
this.chartWidthNumber = this.w;
|
||||
} else {
|
||||
this.chartWidthNumber = this.chartWidth;
|
||||
}
|
||||
},
|
||||
orderCharts() {
|
||||
this.$emit('orderCharts', this.order);
|
||||
},
|
||||
generateOption() {
|
||||
if (this.chartType === 'pie') {
|
||||
this.dataOption = this.pieOption;
|
||||
} else {
|
||||
this.dataOption = this.loadOption;
|
||||
}
|
||||
this.dataOption.series.forEach(item => {
|
||||
item.type = this.chartType;
|
||||
});
|
||||
// this.reload();
|
||||
},
|
||||
reload() {
|
||||
this.loading = true
|
||||
this.generateOption();
|
||||
this.$nextTick(() => {
|
||||
this.loading = false;
|
||||
})
|
||||
},
|
||||
fullScreen() {
|
||||
this.originalW = this.w;
|
||||
this.originalH = this.h;
|
||||
this.w = document.body.clientWidth - 50;
|
||||
this.h = document.body.clientHeight;
|
||||
this.isFullScreen = true;
|
||||
this.$emit('hidePage', true);
|
||||
},
|
||||
unFullScreen() {
|
||||
this.w = this.originalW;
|
||||
this.h = this.originalH;
|
||||
this.isFullScreen = false;
|
||||
this.$emit('hidePage', false);
|
||||
},
|
||||
getImages(command) {
|
||||
let imageType = 'image/png';
|
||||
if (command === 'jpg') {
|
||||
imageType = 'image/jpg';
|
||||
}
|
||||
let returnImageDatas = "";
|
||||
if (document.getElementById(this.reportId)) {
|
||||
let chartsCanvas = document.getElementById(this.reportId).querySelectorAll('canvas')[0];
|
||||
if (chartsCanvas) {
|
||||
// toDataURL()是canvas对象的一种方法，用于将canvas对象转换为base64位编码
|
||||
returnImageDatas = chartsCanvas && chartsCanvas.toDataURL(imageType);
|
||||
}
|
||||
}
|
||||
this.$emit("getImage", returnImageDatas);
|
||||
return returnImageDatas;
|
||||
},
|
||||
exportCommand(command) {
|
||||
let fileName = 'report_pic.' + command;
|
||||
if (document.getElementById('picChart')) {
|
||||
let chartsCanvas = document.getElementById('picChart').querySelectorAll('canvas')[0]
|
||||
let mime = 'image/png';
|
||||
if (command === 'jpg') {
|
||||
mime = 'image/jpg';
|
||||
}
|
||||
if (chartsCanvas) {
|
||||
// toDataURL()是canvas对象的一种方法，用于将canvas对象转换为base64位编码
|
||||
let imageUrl = chartsCanvas && chartsCanvas.toDataURL(mime)
|
||||
if (navigator.userAgent.indexOf('Trident') > -1) {
|
||||
// IE11
|
||||
let arr = imageUrl.split(',')
|
||||
// atob() 函数对已经使用base64编码编码的数据字符串进行解码
|
||||
let bstr = atob(arr[1])
|
||||
let bstrLen = bstr.length
|
||||
// Uint8Array, 开辟 8 位无符号整数值的类型化数组。内容将初始化为 0
|
||||
let u8arr = new Uint8Array(bstrLen)
|
||||
while (bstrLen--) {
|
||||
// charCodeAt() 方法可返回指定位置的字符的 Unicode 编码
|
||||
u8arr[bstrLen] = bstr.charCodeAt(bstrLen)
|
||||
}
|
||||
// msSaveOrOpenBlob 方法允许用户在客户端上保存文件，方法如同从 Internet 下载文件，这是此类文件保存到“下载”文件夹的原因
|
||||
window.navigator.msSaveOrOpenBlob(new Blob([u8arr], {type: mime}), fileName);
|
||||
} else {
|
||||
// 其他浏览器
|
||||
let $a = document.createElement('a')
|
||||
$a.setAttribute('href', imageUrl)
|
||||
$a.setAttribute('download', fileName)
|
||||
$a.click()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.ms-test-chart-header {
|
||||
z-index: 999;
|
||||
width: 380px;
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.report-alt-ico {
|
||||
font-size: 15px;
|
||||
margin: 0px 10px 0px;
|
||||
color: #8c939d;
|
||||
}
|
||||
|
||||
.report-alt-ico:hover {
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/deep/ .echarts {
|
||||
height: calc(100vh / 1.95);
|
||||
}
|
||||
|
||||
.tip {
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
border-left: 2px solid #783887;
|
||||
margin: 0px 20px 0px;
|
||||
}
|
||||
|
||||
.ms-row {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.chart-config {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ .el-card__body {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import ReportChart from "@/business/components/xpack/reportstatistics/projectreport/components/chart/ReportChart";
|
||||
import ReportChart from "@/template/enterprise/share/ReportChart";
|
||||
import {getShareId} from "@/common/js/utils";
|
||||
|
||||
export default {
|
||||
|
|
|
|||
Loading…
Reference in New Issue