add(ruoyi-ui): 新增图表组件和实用工具函数- 添加 Chart.vue 组件用于创建图表
- 新增 dateReportUtils.js 文件，提供日期范围计算函数 - 添加 electricityIcon.svg 图标文件 - 新增 export.js 文件，实现表格导出功能 - 在 package.json 中添加 echarts-liquidfill 和 xlsx 依赖IOT
parent
9b1ae8246e
commit
0f2acb6e99
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import 'echarts-liquidfill'
|
||||
import Logo from "@/layout/components/Sidebar/Logo";
|
||||
|
||||
export default {
|
||||
watch:{
|
||||
chartOption: {
|
||||
handler(newVal, oldVal) {
|
||||
if(newVal){
|
||||
this.initChart(newVal)
|
||||
}
|
||||
},
|
||||
deep: true, // 是否深度监听
|
||||
}
|
||||
},
|
||||
props:['chartOption'],
|
||||
expose: ['setData'],
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if(this.chartOption){
|
||||
this.initChart(this.chartOption)
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
setData(option) {
|
||||
this.initChart(option)
|
||||
},
|
||||
initChart(option) {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,63 @@
|
||||
export function getHoursBetween(startHourStr, endHourStr) {
|
||||
const startHour = new Date(startHourStr)
|
||||
let endHour = new Date(endHourStr)
|
||||
let nowDate = new Date()
|
||||
nowDate.setHours(nowDate.getHours() - 1);
|
||||
if (endHour.getTime() > nowDate.getTime()) {
|
||||
endHour = nowDate
|
||||
}
|
||||
const hours = []
|
||||
while (startHour <= endHour) {
|
||||
const hourString = `${startHour.getFullYear()}-${String(startHour.getMonth() + 1).padStart(2, '0')}-${String(startHour.getDate()).padStart(2, '0')} ${String(startHour.getHours()).padStart(2, '0')}:00:00`
|
||||
hours.push(hourString)
|
||||
startHour.setTime(startHour.getTime() + 60 * 60 * 1000)
|
||||
}
|
||||
// return hours;
|
||||
return hours.sort((a, b) => new Date(b) - new Date(a))
|
||||
}
|
||||
|
||||
export function getDatesBetween(startDateStr, endDateStr) {
|
||||
const startDate = new Date(startDateStr)
|
||||
let endDate = new Date(endDateStr)
|
||||
let nowDate = new Date()
|
||||
nowDate.setHours(nowDate.getHours() - 1);
|
||||
if (endDate.getTime() > nowDate.getTime()) {
|
||||
endDate = nowDate
|
||||
}
|
||||
const dates = []
|
||||
while (startDate <= endDate) {
|
||||
dates.push(`${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}`)
|
||||
startDate.setDate(startDate.getDate() + 1)
|
||||
}
|
||||
// return dates;
|
||||
return dates.sort((a, b) => new Date(b) - new Date(a))
|
||||
}
|
||||
|
||||
export function getMonthsBetween(startMonthStr, endMonthStr) {
|
||||
const result = []
|
||||
const startDate = new Date(startMonthStr + '-01')
|
||||
let endDate = new Date(endMonthStr + '-01')
|
||||
const currentDate = new Date(startDate)
|
||||
let nowDate = new Date()
|
||||
nowDate.setHours(nowDate.getHours() - 1);
|
||||
if (endDate.getTime() > nowDate.getTime()) {
|
||||
endDate = nowDate
|
||||
}
|
||||
while (currentDate <= endDate) {
|
||||
const year = currentDate.getFullYear()
|
||||
const month = String(currentDate.getMonth() + 1).padStart(2, '0')
|
||||
result.push(`${year}-${month}`)
|
||||
currentDate.setMonth(currentDate.getMonth() + 1)
|
||||
}
|
||||
return result.sort((a, b) => new Date(b) - new Date(a))
|
||||
}
|
||||
|
||||
export function getYearsBetween(startYearStr, endYearStr) {
|
||||
const result = []
|
||||
const startYear = Number(startYearStr.substring(0, 4))
|
||||
const endYear = Number(endYearStr.substring(0, 4))
|
||||
for (let i = startYear; i <= endYear; i++) {
|
||||
result.push(`${i}`)
|
||||
}
|
||||
return result.sort((a, b) => new Date(b) - new Date(a))
|
||||
}
|
||||
Loading…
Reference in New Issue