From 05919719fc4f02113073f60bc39d77a0d0b88008 Mon Sep 17 00:00:00 2001
From: laiczhang <i@laiczhang.com>
Date: Fri, 22 Apr 2022 15:24:47 +0800
Subject: [PATCH] chore: use ts in dashborad page

---
 src/views/dashboard/Layout.vue    |   4 +-
 src/views/echarts/AreaStack.vue   |  13 +-
 src/views/echarts/Bar1.vue        | 169 +++++++++++++-------------
 src/views/echarts/LineMarker.vue  | 193 ++++++++++++++----------------
 src/views/echarts/Radar.vue       | 105 ++++++++--------
 src/views/echarts/weatherInfo.vue |   7 +-
 6 files changed, 231 insertions(+), 260 deletions(-)

diff --git a/src/views/dashboard/Layout.vue b/src/views/dashboard/Layout.vue
index 0a5f0b97..a107d71d 100644
--- a/src/views/dashboard/Layout.vue
+++ b/src/views/dashboard/Layout.vue
@@ -32,7 +32,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useClipboard } from '@vueuse/core'
@@ -59,7 +59,7 @@ const shareCurrentWeather = async() => {
     userId: store.state.userInfo.userId,
   })
   if (data) {
-    const { text, copy } = useClipboard()
+    const { copy } = useClipboard()
     copy(`${shareForeUrl}?shareId=${data.shareId}`)
     ElMessage.success('分享链接已复制到剪切板，快去分享吧')
   }
diff --git a/src/views/echarts/AreaStack.vue b/src/views/echarts/AreaStack.vue
index 875fe74f..06367deb 100644
--- a/src/views/echarts/AreaStack.vue
+++ b/src/views/echarts/AreaStack.vue
@@ -2,15 +2,16 @@
   <div id="area-stack" ref="myRef" />
 </template>
 
-<script setup>
+<script setup lang="ts">
 import * as echarts from 'echarts'
-import { defineComponent, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { getStackdataApi } from '@/api'
 import router from '@/router'
 
 const myRef = ref(null)
 const init = async() => {
-  const myChart = echarts.init(document.getElementById('area-stack'))
+  const element = document.getElementById('area-stack') as HTMLElement
+  const myChart = echarts.init(element)
   const currentRoute = router.currentRoute.value
   const ip = currentRoute.query.ip
   const stackData = await getStackdataApi({ ip })
@@ -28,7 +29,7 @@ const init = async() => {
       bottom: '10%',
     },
     xAxis: {
-      data: stackData.arr.map((item) => {
+      data: stackData.arr.map((item: any) => {
         return item[0]
       }),
     },
@@ -93,7 +94,7 @@ const init = async() => {
       {
         name: '最高温度',
         type: 'line',
-        data: stackData.arr.map((item) => {
+        data: stackData.arr.map((item: any) => {
           return item[1]
         }),
         markLine: {
@@ -123,7 +124,7 @@ const init = async() => {
       {
         name: '最低温度',
         type: 'line',
-        data: stackData.arr.map((item) => {
+        data: stackData.arr.map((item: any) => {
           return item[2]
         }),
         markLine: {
diff --git a/src/views/echarts/Bar1.vue b/src/views/echarts/Bar1.vue
index 20f138cb..d6862661 100644
--- a/src/views/echarts/Bar1.vue
+++ b/src/views/echarts/Bar1.vue
@@ -2,99 +2,92 @@
   <div id="bar1" ref="myRef" />
 </template>
 
-<script>
+<script setup lang="ts">
 import * as echarts from 'echarts'
-import { defineComponent, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import store from '@/store'
 
-export default defineComponent({
-  name: 'Bar1',
-  setup() {
-    const myRef = ref(null)
-    const init = () => {
-      const myChart = echarts.init(document.getElementById('bar1'))
-      const futureDay = store.state.weatherData.futureDay
-      const week = []
-      const wtTemp1List = []
-      const wtTemp2List = []
-      futureDay.forEach((item) => {
-        week.push(item.week)
-        wtTemp1List.push(item.wtTemp1)
-        wtTemp2List.push(item.wtTemp2)
-      })
-      const option = {
-        title: {
-          text: '一周昼夜温差',
-          // subtext: 'Fake Data',
-        },
-        tooltip: {
-          trigger: 'axis',
-        },
-        legend: {
-          data: ['白天', '夜间'],
+const myRef = ref(null)
+const init = () => {
+  const element = document.getElementById('bar1') as HTMLElement
+  const myChart = echarts.init(element)
+  const futureDay = store.state.weatherData.futureDay
+  const week: Array<string> = []
+  const wtTemp1List: Array<number> = []
+  const wtTemp2List: Array<number> = []
+  futureDay.forEach((item: any) => {
+    week.push(item.week)
+    wtTemp1List.push(item.wtTemp1)
+    wtTemp2List.push(item.wtTemp2)
+  })
+  const option = {
+    title: {
+      text: '一周昼夜温差',
+      // subtext: 'Fake Data',
+    },
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {
+      data: ['白天', '夜间'],
+    },
+    //   toolbox: {
+    //     show: true,
+    //     feature: {
+    //       dataView: { show: true, readOnly: false },
+    //       magicType: { show: true, type: ['line', 'bar'] },
+    //       restore: { show: true },
+    //       saveAsImage: { show: true },
+    //     },
+    //   },
+    calculable: true,
+    xAxis: [
+      {
+        type: 'category',
+        // prettier-ignore
+        data: week,
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+      },
+    ],
+    series: [
+      {
+        name: '白天',
+        type: 'bar',
+        data: wtTemp1List,
+        //   markPoint: {
+        //     data: [
+        //       { type: 'max', name: 'Max' },
+        //       { type: 'min', name: 'Min' },
+        //     ],
+        //   },
+        markLine: {
+          data: [{ type: 'average', name: 'Avg' }],
         },
-        //   toolbox: {
-        //     show: true,
-        //     feature: {
-        //       dataView: { show: true, readOnly: false },
-        //       magicType: { show: true, type: ['line', 'bar'] },
-        //       restore: { show: true },
-        //       saveAsImage: { show: true },
-        //     },
+      },
+      {
+        name: '夜间',
+        type: 'bar',
+        data: wtTemp2List,
+        //   markPoint: {
+        //     data: [
+        //       { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
+        //       { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 },
+        //     ],
         //   },
-        calculable: true,
-        xAxis: [
-          {
-            type: 'category',
-            // prettier-ignore
-            data: week,
-          },
-        ],
-        yAxis: [
-          {
-            type: 'value',
-          },
-        ],
-        series: [
-          {
-            name: '白天',
-            type: 'bar',
-            data: wtTemp1List,
-            //   markPoint: {
-            //     data: [
-            //       { type: 'max', name: 'Max' },
-            //       { type: 'min', name: 'Min' },
-            //     ],
-            //   },
-            markLine: {
-              data: [{ type: 'average', name: 'Avg' }],
-            },
-          },
-          {
-            name: '夜间',
-            type: 'bar',
-            data: wtTemp2List,
-            //   markPoint: {
-            //     data: [
-            //       { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
-            //       { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 },
-            //     ],
-            //   },
-            markLine: {
-              data: [{ type: 'average', name: 'Avg' }],
-            },
-          },
-        ],
-      }
-      myChart.setOption(option)
-    }
-    onMounted(() => {
-      init()
-    })
-    return {
-      myRef,
-    }
-  },
+        markLine: {
+          data: [{ type: 'average', name: 'Avg' }],
+        },
+      },
+    ],
+  }
+  myChart.setOption(option)
+}
+onMounted(() => {
+  init()
 })
 </script>
 
diff --git a/src/views/echarts/LineMarker.vue b/src/views/echarts/LineMarker.vue
index bc6b7a04..86314653 100644
--- a/src/views/echarts/LineMarker.vue
+++ b/src/views/echarts/LineMarker.vue
@@ -2,111 +2,104 @@
   <div id="link-marker" ref="myRef" />
 </template>
 
-<script>
+<script setup lang="ts">
 import * as echarts from 'echarts'
-import { defineComponent, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import store from '@/store'
 
-export default defineComponent({
-  name: 'LinkMarker',
-  setup() {
-    const myRef = ref(null)
-    const initT = () => {
-      const myChart = echarts.init(document.getElementById('link-marker'))
-      const futureHour = store.state.weatherData.futureHour
-      const xAxisData = []
-      const wtTempList = []
-      futureHour.forEach((item) => {
-        const datedh = item.dateYmdh.substring(5).slice(0, -3)
-        xAxisData.push(datedh)
-        wtTempList.push(item.wtTemp)
-      })
-      const option = {
-        title: {
-          text: '未来24小时温度变化',
+const myRef = ref(null)
+const initT = () => {
+  const element = document.getElementById('link-marker') as HTMLElement
+  const myChart = echarts.init(element)
+  const futureHour = store.state.weatherData.futureHour
+  const xAxisData: Array<number> = []
+  const wtTempList: Array<number> = []
+  futureHour.forEach((item: any) => {
+    const datedh = item.dateYmdh.substring(5).slice(0, -3)
+    xAxisData.push(datedh)
+    wtTempList.push(item.wtTemp)
+  })
+  const option = {
+    title: {
+      text: '未来24小时温度变化',
+    },
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {},
+    // toolbox: {
+    //   show: true,
+    //   feature: {
+    //     dataZoom: {
+    //       yAxisIndex: 'none',
+    //     },
+    //     dataView: { readOnly: false },
+    //     magicType: { type: ['line', 'bar'] },
+    //     restore: {},
+    //     saveAsImage: {},
+    //   },
+    // },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: xAxisData,
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        formatter: '{value} °C',
+      },
+    },
+    series: [
+      // {
+      //   name: '温度(白天)',
+      //   type: 'line',
+      //   data: wtTemp1List,
+      //   markPoint: {
+      //     // data: [
+      //     //   { type: 'max', name: 'Max' },
+      //     //   { type: 'min', name: 'Min' },
+      //     // ],
+      //   },
+      //   markLine: {
+      //     data: [{ type: 'average', name: 'Avg' }],
+      //   },
+      // },
+      {
+        name: '温度',
+        type: 'line',
+        data: wtTempList,
+        markPoint: {
+          // data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }],
         },
-        tooltip: {
-          trigger: 'axis',
+        markLine: {
+          data: [
+            { type: 'average', name: 'Avg' },
+            [
+              {
+                symbol: 'none',
+                x: '90%',
+                yAxis: 'max',
+              },
+              {
+                symbol: 'circle',
+                label: {
+                  position: 'start',
+                  formatter: 'Max',
+                },
+                type: 'max',
+                name: '最高点',
+              },
+            ],
+          ],
         },
-        legend: {},
-        // toolbox: {
-        //   show: true,
-        //   feature: {
-        //     dataZoom: {
-        //       yAxisIndex: 'none',
-        //     },
-        //     dataView: { readOnly: false },
-        //     magicType: { type: ['line', 'bar'] },
-        //     restore: {},
-        //     saveAsImage: {},
-        //   },
-        // },
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          data: xAxisData,
-        },
-        yAxis: {
-          type: 'value',
-          axisLabel: {
-            formatter: '{value} °C',
-          },
-        },
-        series: [
-          // {
-          //   name: '温度(白天)',
-          //   type: 'line',
-          //   data: wtTemp1List,
-          //   markPoint: {
-          //     // data: [
-          //     //   { type: 'max', name: 'Max' },
-          //     //   { type: 'min', name: 'Min' },
-          //     // ],
-          //   },
-          //   markLine: {
-          //     data: [{ type: 'average', name: 'Avg' }],
-          //   },
-          // },
-          {
-            name: '温度',
-            type: 'line',
-            data: wtTempList,
-            markPoint: {
-              // data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }],
-            },
-            markLine: {
-              data: [
-                { type: 'average', name: 'Avg' },
-                [
-                  {
-                    symbol: 'none',
-                    x: '90%',
-                    yAxis: 'max',
-                  },
-                  {
-                    symbol: 'circle',
-                    label: {
-                      position: 'start',
-                      formatter: 'Max',
-                    },
-                    type: 'max',
-                    name: '最高点',
-                  },
-                ],
-              ],
-            },
-          },
-        ],
-      }
-      myChart.setOption(option)
-    }
-    onMounted(() => {
-      initT()
-    })
-    return {
-      myRef,
-    }
-  },
+      },
+    ],
+  }
+  myChart.setOption(option)
+}
+onMounted(() => {
+  initT()
 })
 </script>
 
diff --git a/src/views/echarts/Radar.vue b/src/views/echarts/Radar.vue
index a2277ad8..83c87282 100644
--- a/src/views/echarts/Radar.vue
+++ b/src/views/echarts/Radar.vue
@@ -5,72 +5,61 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import * as echarts from 'echarts'
-import { defineComponent, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import LifeIndex from './LifeIndex.vue'
 import store from '@/store'
 
-export default defineComponent({
-  name: 'Radar',
-  components: {
-    LifeIndex,
-  },
-  setup() {
-    const myRef = ref(null)
-    const init = () => {
-      const myChart = echarts.init(document.getElementById('radar'))
-      const realTime = store.state.weatherData.realTime
-      const indicator = [
-        { name: '能见度', max: 20 },
-        { name: 'AQI', max: 300 },
-        { name: '温度', max: 40 },
-        { name: '湿度', max: 100 },
-        { name: '降雨量', max: 100 },
-        { name: '风速', max: 50 },
-        { name: '风力', max: 10 },
-      ]
-      const option = {
-        title: {
-          text: '实时天气指数',
-        },
-        // legend: {
-        //   data: ['Allocated Budget', 'Actual Spending'],
-        // },
-        radar: {
-          // shape: 'circle',
-          indicator,
-        },
-        series: [
+const myRef = ref(null)
+const init = () => {
+  const myChart = echarts.init(document.getElementById('radar') as HTMLElement)
+  const realTime = store.state.weatherData.realTime
+  const indicator = [
+    { name: '能见度', max: 20 },
+    { name: 'AQI', max: 300 },
+    { name: '温度', max: 40 },
+    { name: '湿度', max: 100 },
+    { name: '降雨量', max: 100 },
+    { name: '风速', max: 50 },
+    { name: '风力', max: 10 },
+  ]
+  const option = {
+    title: {
+      text: '实时天气指数',
+    },
+    // legend: {
+    //   data: ['Allocated Budget', 'Actual Spending'],
+    // },
+    radar: {
+      // shape: 'circle',
+      indicator,
+    },
+    series: [
+      {
+        // name: 'Budget vs spending',
+        type: 'radar',
+        data: [
           {
-            // name: 'Budget vs spending',
-            type: 'radar',
-            data: [
-              {
-                value: [
-                  realTime.wtVisibility < indicator[0].max ? realTime.wtVisibility : indicator[0].max,
-                  realTime.wtAqi < indicator[1].max ? realTime.wtAqi : indicator[1].max,
-                  realTime.wtTemp < indicator[2].max ? realTime.wtTemp : indicator[2].max,
-                  realTime.wtHumi < indicator[3].max ? realTime.wtHumi : indicator[3].max,
-                  realTime.wtRainfall < indicator[4].max ? realTime.wtRainfall : indicator[4].max,
-                  realTime.wtWins < indicator[5].max ? realTime.wtWins : indicator[5].max,
-                  realTime.wtWinp < indicator[6].max ? realTime.wtWinp : indicator[6].max,
-                ],
-                // name: 'Allocated Budget',
-              },
+            value: [
+              realTime.wtVisibility < indicator[0].max ? realTime.wtVisibility : indicator[0].max,
+              realTime.wtAqi < indicator[1].max ? realTime.wtAqi : indicator[1].max,
+              realTime.wtTemp < indicator[2].max ? realTime.wtTemp : indicator[2].max,
+              realTime.wtHumi < indicator[3].max ? realTime.wtHumi : indicator[3].max,
+              realTime.wtRainfall < indicator[4].max ? realTime.wtRainfall : indicator[4].max,
+              realTime.wtWins < indicator[5].max ? realTime.wtWins : indicator[5].max,
+              realTime.wtWinp < indicator[6].max ? realTime.wtWinp : indicator[6].max,
             ],
+            // name: 'Allocated Budget',
           },
         ],
-      }
-      myChart.setOption(option)
-    }
-    onMounted(() => {
-      init()
-    })
-    return {
-      myRef,
-    }
-  },
+      },
+    ],
+  }
+  myChart.setOption(option)
+}
+onMounted(() => {
+  init()
 })
 </script>
 
diff --git a/src/views/echarts/weatherInfo.vue b/src/views/echarts/weatherInfo.vue
index a6ed895a..30c6a950 100644
--- a/src/views/echarts/weatherInfo.vue
+++ b/src/views/echarts/weatherInfo.vue
@@ -5,13 +5,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import LifeIndex from './LifeIndex.vue'
-export default {
-  components: {
-    LifeIndex,
-  },
-}
 </script>
 
 <style lang="less" scoped>