|
@@ -1,5 +1,6 @@
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
|
import * as echarts from 'echarts'
|
|
import * as echarts from 'echarts'
|
|
|
|
|
+import dayjs from 'dayjs'
|
|
|
import {
|
|
import {
|
|
|
ANIMATION,
|
|
ANIMATION,
|
|
|
ChartData,
|
|
ChartData,
|
|
@@ -18,6 +19,8 @@ const chartData = ref<ChartData>({
|
|
|
|
|
|
|
|
const chartRef = ref<HTMLDivElement>()
|
|
const chartRef = ref<HTMLDivElement>()
|
|
|
let chart: echarts.ECharts | null = null
|
|
let chart: echarts.ECharts | null = null
|
|
|
|
|
+const router = useRouter()
|
|
|
|
|
+let chartClickBound = false
|
|
|
|
|
|
|
|
function formatRate(value: number) {
|
|
function formatRate(value: number) {
|
|
|
return `${Number(value || 0).toFixed(2)}%`
|
|
return `${Number(value || 0).toFixed(2)}%`
|
|
@@ -139,9 +142,37 @@ function initChart() {
|
|
|
chart = echarts.init(chartRef.value, undefined, {
|
|
chart = echarts.init(chartRef.value, undefined, {
|
|
|
renderer: CHART_RENDERER
|
|
renderer: CHART_RENDERER
|
|
|
})
|
|
})
|
|
|
|
|
+ chart.getZr().on('click', handleChartClick)
|
|
|
|
|
+ chartClickBound = true
|
|
|
renderChart()
|
|
renderChart()
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+function getChartDayRange() {
|
|
|
|
|
+ const xAxis = chartData.value.xAxis || []
|
|
|
|
|
+ const startDate = dayjs(xAxis[0])
|
|
|
|
|
+ const endDate = dayjs(xAxis[xAxis.length - 1])
|
|
|
|
|
+ if (!startDate.isValid() || !endDate.isValid()) return null
|
|
|
|
|
+
|
|
|
|
|
+ return [
|
|
|
|
|
+ startDate.startOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
|
|
|
|
+ endDate.endOf('day').format('YYYY-MM-DD HH:mm:ss')
|
|
|
|
|
+ ]
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function handleChartClick() {
|
|
|
|
|
+ const createTime = getChartDayRange()
|
|
|
|
|
+ if (!createTime) return
|
|
|
|
|
+
|
|
|
|
|
+ router.push({
|
|
|
|
|
+ name: 'IotRhDailyReportSummary',
|
|
|
|
|
+ query: {
|
|
|
|
|
+ activeTab: '日报统计',
|
|
|
|
|
+ view: 'kanban',
|
|
|
|
|
+ createTime
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
function renderChart() {
|
|
function renderChart() {
|
|
|
chart?.setOption(getChartOption(chartData.value), true)
|
|
chart?.setOption(getChartOption(chartData.value), true)
|
|
|
}
|
|
}
|
|
@@ -151,8 +182,14 @@ function resizeChart() {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function destroyChart() {
|
|
function destroyChart() {
|
|
|
- chart?.dispose()
|
|
|
|
|
- chart = null
|
|
|
|
|
|
|
+ if (chart) {
|
|
|
|
|
+ if (chartClickBound) {
|
|
|
|
|
+ chart.getZr().off('click', handleChartClick)
|
|
|
|
|
+ chartClickBound = false
|
|
|
|
|
+ }
|
|
|
|
|
+ chart.dispose()
|
|
|
|
|
+ chart = null
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
async function loadChart() {
|
|
async function loadChart() {
|