✨ feat(设备监控): 导出为图片

src/views/pms/device/monitor/TdDeviceInfo.vue

@@ -14,8 +14,6 @@ dayjs.extend(quarterOfYear)
 
 const { query } = useRoute()
 
-console.log('query :>> ', query)
-
 const data = ref({
   deviceCode: query.code || '',
   deviceName: query.name || '',
@@ -83,6 +81,33 @@ const handleClickSpec = (modelName: string) => {
 const chartRef = ref<HTMLDivElement | null>(null)
 let chart: echarts.ECharts | null = null
 
+const exportChart = () => {
+  if (!chart) return
+  let img = new Image()
+  img.src = chart.getDataURL({
+    type: 'png',
+    pixelRatio: 1,
+    backgroundColor: '#fff'
+  })
+
+  img.onload = function () {
+    let canvas = document.createElement('canvas')
+    canvas.width = img.width
+    canvas.height = img.height
+    let ctx = canvas.getContext('2d')
+    ctx?.drawImage(img, 0, 0)
+    let dataURL = canvas.toDataURL('image/png')
+
+    let a = document.createElement('a')
+
+    let event = new MouseEvent('click')
+
+    a.href = dataURL
+    a.download = `${data.value.deviceName}-设备监控-${dayjs().format('YYYY-MM-DD HH:mm:ss')}.png`
+    a.dispatchEvent(event)
+  }
+}
+
 const chartInit = () => {
   if (!chart) return
 
@@ -447,7 +472,8 @@ onUnmounted(() => {
       </h3>
 
       <div class="flex gap-4">
-        <el-button type="primary" size="default" @click="reset">重置</el-button>
+        <el-button type="primary" size="default" @click="exportChart">导出为图片</el-button>
+        <el-button size="default" @click="reset">重置</el-button>
         <el-date-picker
           v-model="date"
           value-format="YYYY-MM-DD HH:mm:ss"