<template>
<div>
<virtual-scroll
:data
="
obj.content"
:item-size
="chart
Height"
:visible-count
="visibleChartCount"
>
<template v-slot
="{ item, index }">
<div class
="chartsList">
<echarts-one-component
v-if
="item
.type
=== '1'"
:
obj="item"
v-show
="isShow"
:ref
="'child' + index"
/>
<echarts-two-component
v-else-if
="item
.type
=== '2'"
:
obj="item"
v-show
="isShow"
:ref
="'child' + index"
/>
<TableComponent
v-else
:
obj="item"
v-show
="isShow"
:ref
="'table' + index"
/>
</div>
</template>
</virtual-scroll>
</div>
</template>
<script>
const echarts
= require('echarts')
import EchartsOneComponent from '
./echartsOneComponent'
import EchartsTwoComponent from '
./echartsTwoComponent'
import TableComponent from '
./tableComponent'
import JSZip from 'jszip'
import { downLoadPPT, fastApi } from '@/api/ai/aiDashboard'
import VirtualScroll from 'vue-virtual-scroll-list'
export default {
components: {
EchartsOneComponent,
TableComponent,
EchartsTwoComponent,
VirtualScroll
},
name: 'dashboardOneComponent',
props: {
obj: {
type:
Object
}
},
watch: {
obj: {
handler(newVal) {
//只有当DONE后才渲染
if (newVal
.finish
=== true) {
const ref
Obj = this
.$refs
this
.isShow
= true
for (
var i
= 0; i < this
.obj.content
.length; i++) {
if (ref
Obj['child' + i]) {
ref
Obj['child' + i][0]
.init(this
.obj.content[i])
}
if (ref
Obj['table' + i]) {
ref
Obj['table' + i][0]
.init(this
.obj.content[i])
}
}
this
.$emit('scrollDown')
}
},
immediate: true,
deep: true
}
},
data() {
return {
isShow: false,
isDownload:false,
chart
Height: 300, // 图表高度，根据实际情况调整
visibleChartCount: 5 // 可视区域显示的图表数量，根据屏幕大小调整
}
},
created() {
},
mounted() {
},
methods: {
//生成PPT和ZIP暂时注释
async download() {
if (this
.isDownload){
return
}
this
.isDownload
= true
const hide
= this
.$message
.loading('正在下载,大概需要1-2分钟,请耐心等待', 0)
try {
const zip
= new JSZip()
const charts
= [] // 所有图表实例
const analyse
= [] // 所有分析数据
const ref
Obj = this
.$refs
for (
var i
= 0; i < this
.obj.content
.length; i++) {
if (this
.obj.content[i]
.echatsName
=== '新能源') {
this
.obj.content[i]
.echatsName
= '私家车新能源'
} else if (this
.obj.content[i]
.echatsName
=== '燃油车') {
this
.obj.content[i]
.echatsName
= '私家车燃油车'
} else if (this
.obj.content[i]
.echatsName
=== '拓展') {
this
.obj.content[i]
.echatsName
= '业务品质监控扩展（计划）'
}
if (ref
Obj['child' + i]) {
charts
.push(
{
obj:ref
Obj['child' + i][0]
.getEcharts(),
name: ref
Obj['child' + i][0]
.getEchartTitle() + '@' + this
.obj.content[i]
.echatsName,
type: 'echats'
})
analyse
.push(
{
question: JSON
.stringify(this
.obj.content[i]),
name: ref
Obj['child' + i][0]
.getEchartTitle(),
direction: this
.obj.content[i]
.type
=== '1' ? '{direction:若是对分值的分析，则主要分析1分和10分数据，以及1分和10分各个月份的变化。若是对违章次数的分析，则主要分析0违章和-99+空违章占比趋势以及各个月份的变化。}' :
'{direction:分析LR和PLR之间的趋势，若是二者差异大，则指出二者差异大的区间，若是二者整体相似，则输出LR和PLR基本靠近，符合预期。}'
})
}else{
const tableImage
= ref
Obj['table' + i][0]
.exportImage()
charts
.push({
obj:tableImage,
name: ref
Obj['table' + i][0]
.getTableTitle() + '@' + this
.obj.content[i]
.echatsName,
type: 'table'
})
analyse
.push({
question: JSON
.stringify(this
.obj.content[i]),
name: ref
Obj['table' + i][0]
.getTableTitle(),
direction: '{direction:若是对高档位（高违章和高占比等）的分析，则不对北京机构进行分析输出，需要分析出占比明显偏高和偏少的数据，以及整体的变化趋势。若是对未开启占比进行分析，则要看一个时间趋势，机构之间没有相对性，看月份的变化，比如有没有新开的、新关的、逐月增加或减少的。}'
})
}
}
const formData
= new FormData()
// 对接工作流
await fastApi(analyse)
.then(res
=> {
if (res
.state
=== 'success') {
// 获取分析数据数组
const analyseData
= res
.data
// 转换为json文件，交给后端进行解析，用于整合进ppt
// const rawJsonBlob
= new Blob([JSON
.stringify(analyseData)], { type: 'application/json' })
// console
.log(rawJsonBlob)
// formData
.append('analysisData', rawJsonBlob, 'analysis_data
.json')
for (let i
= 0; i < charts
.length; i++) {
if (charts[i]
.type
=== 'table') {
zip
.file(charts[i]
.name + '
.png', charts[i]
.obj.split(',')[1], { base64: true })
} else {
const imgData
= charts[i]
.obj.getDataURL({ type: 'png', pixelRatio: 2, backgroundColor: '#fff' })
//formData
.append('file[]', imgData)
zip
.file(charts[i]
.name + '
.png', imgData
.split(',')[1], { base64: true })
}
}
zip
.generateAsync({ type: 'blob' })
.then(content
=> {
formData
.append('file', content, 'images
.zip')
downLoadPPT(formData)
.then(res
=> {
const blob
= new Blob([res], { type: res
.type })
const downloadElement
= document
.createElement('a')
const href
= window
.URL
.create
ObjectURL(blob) //创建下载的链接
downloadElement
.href
= href
downloadElement
.download
= 'test
.pptx'
document
.body
.appendChild(downloadElement)
downloadElement
.click() //点击下载
document
.body
.removeChild(downloadElement) //下载完成移除元素
window
.URL
.revoke
ObjectURL(href) //释放blob对象
this
.$message
.success('下载成功')
})
.catch((error)
=> {
})
})
} else {
console
.error('请求失败:', res
.message)
this
.errorMessage
= '分析请求失败，请重试'
}
})
.catch(error
=> {
console
.error('网络错误:', error)
this
.errorMessage
= '网络请求异常，请检查连接'
})
// setTimeout(()
=> {
// downLoadPPT(formData)
//
.then(res
=> {
// const blob
= new Blob([res], {type: res
.type})
// const downloadElement
= document
.createElement('a')
// const href
= window
.URL
.create
ObjectURL(blob) //创建下载的链接
// downloadElement
.href
= href
// downloadElement
.download
= 'test
.pptx'
// document
.body
.appendChild(downloadElement)
// downloadElement
.click() //点击下载
// document
.body
.removeChild(downloadElement) //下载完成移除元素
// window
.URL
.revoke
ObjectURL(href) //释放blob对象
// this
.$message
.success('下载成功')
// })
.catch((error)
=> {
// })
// }, 15000)
} catch (err) {
this
.$message
.warn('下载PPT异常请稍后再试')
} finally {
this
.isDownload
= false
this
.$message
.destroy(hide)
}
}
/*download() {
const zip
= new JSZip()
const charts
= [] // 所有图表实例
const ref
Obj = this
.$refs
for (
var i
= 0; i < this
.obj.content
.length; i++) {
if (ref
Obj['child' + i]) {
charts
.push(ref
Obj['child' + i][0]
.getEcharts())
}
}
const pdf
= new jsPDF('landscape', 'pt', 'a4') // 横向A4纸:ml-citation{ref
="2,7" data
="citationList"}
const page
Height = pdf
.internal
.pageSize
.get
Height()
let currentY
= 0 // 当前绘制高度
for (let i
= 0; i < charts
.length; i++) {
const imgData
= charts[i]
.getDataURL({type: 'png', pixelRatio: 2,backgroundColor: '#fff'})
const imgProps
= pdf
.getImageProperties(imgData)
const imgWidth
= pdf
.internal
.pageSize
.getWidth()
const img
Height = (imgProps
.height * imgWidth) / imgProps
.width
// 分页判断
if (currentY + img
Height > page
Height) {
pdf
.addPage()
currentY
= 0
}
pdf
.addImage(imgData, 'PNG', 0, currentY, imgWidth, img
Height)
currentY +
= img
Height + 20
//zip
.file(`chart${i + 1}
.png`, imgData
.split(',')[1],{ base64: true })
}
pdf
.save('chart
.pdf')
//pdf
.save('chart
.pdf')
/!*zip
.generateAsync({type: 'blob'})
.then(content
=> {
saveAs(content, 'charts
.zip')
})*!/
}*/
}
}
</script>
<
style scoped>
.chartsList{
display: flex;
justify-content: center;
text-align: center;
margin-bottom: 25px;
height: 300px;/* 根据实际高度设置 */
overflow: hidden;
}
</
style>
本文探讨了obj.offsetHeight与obj.style.height之间的区别，包括它们分别如何获取元素的高度信息、返回值的形式、是否包含padding以及读写特性等。此外，还对比了jQuery中的$(obj).height()与$(obj).css('height')的不同。
扫一扫
1071
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
