From fe7f6bd1f3bab7f1f41e1833900bad8f9aa0d2da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B6=E5=BF=97=E8=B6=85?= <yezhichao@hwasmart.com>
Date: Tue, 16 Nov 2021 12:04:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0clock=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/render/App.vue                   |   4 +-
 src/render/components/Clock.vue      | 130 +++++++++++++++++++++++++++
 src/render/components/WaterLevel.vue |  26 +++---
 3 files changed, 145 insertions(+), 15 deletions(-)
 create mode 100644 src/render/components/Clock.vue

diff --git a/src/render/App.vue b/src/render/App.vue
index 62e0a08..ea2ef0b 100644
--- a/src/render/App.vue
+++ b/src/render/App.vue
@@ -8,7 +8,7 @@
       <div class="block-left-right-content flex flex-1 mt-5">
         <div class="block-left-content w-1/5 flex flex-col">
           <div class="clock-content mb-2 flex-1">
-            <!-- <Clock /> -->
+            <Clock />
           </div>
           <div class="compass-content mb-2 flex-1">
             <Compass />
@@ -29,7 +29,7 @@
 import FullScreenContainer from './components/Layout/FullScreenContainer.vue'
 import TheHeader from './components/Layout/TheHeader.vue'
 import DigitalFlopContainer from './components/DigitalFlopContainer.vue'
-// import Clock from './components/Clock.vue'
+import Clock from './components/Clock.vue'
 import Compass from './components/Compass.vue'
 import WaterLevel from './components/WaterLevel.vue'
 import Map from './components/Map.vue'
diff --git a/src/render/components/Clock.vue b/src/render/components/Clock.vue
new file mode 100644
index 0000000..ccf4258
--- /dev/null
+++ b/src/render/components/Clock.vue
@@ -0,0 +1,130 @@
+<template>
+  <v-chart :option="option" />
+</template>
+
+<script lang="ts" setup>
+import { use } from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+import { TitleComponent } from "echarts/components";
+import { GaugeChart } from "echarts/charts";
+
+import VChart from "vue-echarts";
+import { ref } from "vue";
+
+use([
+  CanvasRenderer,
+  TitleComponent,
+  GaugeChart
+]);
+
+const option = ref({
+  title: {
+    text: '时间',
+    left: 'center'
+  },
+  series: [
+    {
+      name: 'hour',
+      type: 'gauge',
+      radius: '65%',
+      min : 0,
+      max : 12,
+      splitNumber: 12,
+      startAngle: 90,
+      endAngle:-270,
+      axisTick:{
+        lineStyle: {
+          color: '#eee'
+        },
+      },
+      splitLine: {
+        length :15,
+        lineStyle: {
+          color: '#eee'
+        }
+      },
+      axisLabel:{
+        formatter: function(v: Number){
+          switch(v){
+            case 0:return '';
+            default: return v;
+          }
+        }
+      },
+      pointer:{
+        length :'40%',
+        width  :8,
+        itemStyle: {
+          color: 'rgb(0,0,255)'
+        }
+			},
+      detail: {
+        show:false
+      },
+      data: [{ value: 11.2 }]
+    }, {
+      name: 'minute',
+      type: 'gauge',
+      min : 0,
+      max : 60,
+      splitNumber: 60,
+      startAngle: 90,
+      endAngle:-270,
+      axisLine: {
+        show: false
+      },
+      axisTick:{
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisLabel:{
+        show: false
+      },
+      pointer:{
+        length :'50%',
+        width  :5,
+        itemStyle: {
+          color: 'rgb(0,255,0)'
+        }
+			},
+      detail: {
+        show:false
+      },
+      data: [{ value: 35.6}]
+    }, {
+      name: 'second',
+      type: 'gauge',
+      min : 0,
+      max : 60,
+      splitNumber: 60,
+      startAngle: 90,
+      endAngle:-270,
+      axisLine: {
+        show: false
+      },
+      axisTick:{
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisLabel:{
+        show: false
+      },
+      pointer:{
+        length :'75%',
+        width  :3,
+        itemStyle: {
+          color: 'rgb(255,0,0)'
+        }
+			},
+      detail: {
+        show:false
+      },
+      data: [{ value: 30 }]
+    }
+  ]
+});
+</script>
\ No newline at end of file
diff --git a/src/render/components/WaterLevel.vue b/src/render/components/WaterLevel.vue
index c0d17d4..fbc7575 100644
--- a/src/render/components/WaterLevel.vue
+++ b/src/render/components/WaterLevel.vue
@@ -13,7 +13,7 @@ import VChart from "vue-echarts";
 
 use([
   CanvasRenderer,
-	TitleComponent
+  TitleComponent
 ]);
 
 
@@ -22,18 +22,18 @@ const option = reactive({
     text: '海拔',
     left: 'center'
   },
-	series: [{
-		type: 'liquidFill',
-		backgroundStyle: {
-			color: 'transparency'
-		},
-		label: {
-			formatter: function({ value }) {
-				return value
-			}
-		},
-		data: [60, 0.5, 0.4, 0.3]
-	}]
+  series: [{
+    type: 'liquidFill',
+    backgroundStyle: {
+      color: 'transparency'
+    },
+    label: {
+      formatter: function({ value }) {
+        return value
+      }
+    },
+    data: [60, 0.5, 0.4, 0.3]
+  }]
 })
 
 const update = console.log