添加(ui): 小时天气预报

ui-vue/src/c/sys/屏幕亮度.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import { getvcp } from "@/util/vcp.js";
+import { useInterval } from "@/hook/定时器.js";
+
+const 屏幕亮度 = ref(-1);
+
+async function 加载数据() {
+  const { v } = await getvcp("10");
+  屏幕亮度.value = v;
+}
+// 每 10s 刷新一次
+useInterval(加载数据, 10e3);
+onMounted(加载数据);
+</script>
+
+<template>
+  <span class="c-屏幕亮度">屏幕亮度: {{ 屏幕亮度 }}%</span>
+</template>
+
+<style scoped>
+</style>

ui-vue/src/c/sys/平均负载.vue

@@ -6,7 +6,7 @@ const 系统信息 = useSysInfo();
 
 const 平均负载 = computed(function () {
   // 格式化平均负载
-  return 系统信息.loadavg.value.join(", ");
+  return 系统信息.loadavg.value.map((x) => x.toFixed(2)).join(", ");
 });
 </script>
 

ui-vue/src/c/上半/大时钟.vue

@@ -14,33 +14,37 @@ const 星期 = computed(() => 格式化星期(d.value));
 
 <template>
   <div class="c-大时钟">
-    <div class="行1">
+    <div class="时间">
       <span class="时">{{ t[0] }}</span>
       <span class="d1">:</span>
       <span class="分">{{ t[1] }}</span>
       <span class="d2">:</span>
       <span class="秒">{{ t[2] }}</span>
     </div>
-    <div class="行2">
+    <div class="星期0">
       <span class="星期">星期{{ 星期 }}</span>
     </div>
   </div>
 </template>
 
 <style scoped>
 .c-大时钟 {
-  padding: 2em 1em;
+  padding: 1em;
+  padding-top: 2em;
+
+  display: flex;
+  justify-content: space-between;
 }
 
-.行1 {
+.时间 {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: flex-end;
 }
 
 .时, .分, .d1 {
-  font-size: 8em;
+  font-size: 7em;
   line-height: 1em;
   letter-spacing: 4px;
 }
@@ -50,7 +54,7 @@ const 星期 = computed(() => 格式化星期(d.value));
 }
 
 .秒, .d2 {
-  font-size: 6em;
+  font-size: 5.2em;
   line-height: 1em;
   letter-spacing: 6px;
 }
@@ -69,7 +73,7 @@ const 星期 = computed(() => 格式化星期(d.value));
 }
 
 .星期 {
-  font-size: 4em;
+  font-size: 3.4em;
   opacity: 0.8;
 }
 </style>

ui-vue/src/c/天气/qw实时天气.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { computed } from "vue";
+
+const p = defineProps({
+  天气数据: Object,
+});
+
+const 当前气温 = computed(() => p.天气数据.now.temp);
+const 天气状况 = computed(() => p.天气数据.now.text);
+const 相对湿度 = computed(() => p.天气数据.now.humidity);
+const 大气压强 = computed(() => (Number.parseFloat(p.天气数据.now.pressure) / 10).toFixed(1));
+const 风向 = computed(() => p.天气数据.now.windDir);
+const 风级 = computed(() => p.天气数据.now.windScale);
+const 风速 = computed(() => p.天气数据.now.windSpeed);
+</script>
+
+<template>
+  <v-col class="c-qw实时天气" cols="4">
+    <div class="d-flex align-start">
+      <div class="text-h2">{{ 当前气温 }}</div>
+      <div class="text-h2 温度单位"><span>&deg;C</span></div>
+
+      <div class="text-h4 天气状况">{{ 天气状况 }}</div>
+    </div>
+
+    <p class="信息2 d-flex py-2 justify-space-between text-medium-emphasis">
+      <span>湿度 {{ 相对湿度 }}%</span>
+      <span>气压 {{ 大气压强 }}kPa</span>
+    </p>
+    <p class="信息2 py-2 text-medium-emphasis">
+      <span>{{ 风向 }}, {{ 风级 }} 级 ({{ 风速 }}km/h)</span>
+    </p>
+  </v-col>
+</template>
+
+<style scoped>
+.温度单位 {
+  flex-grow: 1;
+  line-height: 0.5em;
+}
+
+.温度单位 span {
+  font-size: 0.6em;
+}
+
+.信息2 {
+  font-size: 1.4em;
+}
+</style>

ui-vue/src/c/天气/qw小时预报.vue

@@ -0,0 +1,111 @@
+<script setup>
+import { computed } from "vue";
+import { 格式化时分 } from "@/util/时间.js";
+
+const p = defineProps({
+  天气数据: Object,
+});
+
+const 显示数据 = computed(() => {
+  const 结果 = p.天气数据.hourly.map((x) => ({
+    时间: 格式化时分(new Date(x.fxTime)),
+    温度: x.temp,
+    t: Number.parseFloat(x.temp),
+  }));
+  // 温度范围
+  let 最小 = 0;
+  let 最大 = 0;
+
+  for (const i of 结果) {
+    if (i.t < 最小) {
+      最小 = i.t;
+    }
+    if (i.t > 最大) {
+      最大 = i.t;
+    }
+  }
+  // 最大最小要有足够的差值
+  if ((最大 - 最小) < 1) {
+    最小 = 最大 - 1;
+  }
+  // 最大最小按 10 跳变
+  最小 = Math.floor(最小 / 10) * 10;
+  最大 = Math.ceil(最大 / 10) * 10;
+
+  // 温度条
+  for (const i of 结果) {
+    i.p = ((i.t - 最小) / (最大 - 最小)) * 100;
+  }
+
+  // 只显示 12 个, 太多显示不下
+  return 结果.slice(0, 12);
+});
+</script>
+
+<template>
+  <v-col class="c-qw小时预报 ml-2" col="8">
+    <v-row class="内容" no-gutters>
+      <template v-for="(i, j) in 显示数据">
+        <v-col class="列" col="1">
+          <span>{{ i.温度 }}&deg;C</span>
+
+          <div class="温度条0">
+            <div class="温度条1">
+              <div class="温度条2">
+                <v-progress-linear
+                  :model-value="i.p"
+                  :height="16"
+                  color="primary"
+                  rounded
+                />
+              </div>
+            </div>
+          </div>
+
+          <span
+            v-if="j % 3 == 0"
+            class="text-medium-emphasis"
+          >{{ i.时间 }}</span>
+          <span
+            v-if="j % 3 != 0"
+            class="占位 text-medium-emphasis"
+          >-</span>
+        </v-col>
+      </template>
+    </v-row>
+  </v-col>
+</template>
+
+<style scoped>
+.内容 {
+  height: 100%;
+}
+
+.列 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.温度条0 {
+  position: relative;
+  top: 0;
+  left: 0;
+  flex-grow: 1;
+}
+
+.温度条1 {
+  position: absolute;
+  top: 40%;
+  left: -45px;
+}
+
+.温度条2 {
+  width: 90px;
+  rotate: -90deg;
+}
+
+.占位 {
+  opacity: 0;
+}
+</style>

ui-vue/src/c/天气/天气.vue

@@ -1,87 +1,37 @@
 <script setup>
 import { computed } from "vue";
-import { 格式化时分 } from "@/util/时间.js";
 import { useWeather } from "@/hook/天气.js";
+import c天气qw from "./天气qw.vue";
 
 const { 天气配置, 天气正在加载, 天气数据, 天气错误 } = useWeather();
 
 const api = computed(() => 天气配置.value.api);
-
-const 更新时间 = computed(() => {
-  if ("qweather" == api.value) {
-    const d = new Date(天气数据.value.now.obsTime);
-    return 格式化时分(d);
-  }
-  return "";
-});
+const 正在加载 = computed(() => 天气正在加载.value && (null == 天气错误.value));
+const 显示错误 = computed(() => null != 天气错误.value);
+const 显示内容 = computed(() => !天气正在加载.value);
 </script>
 
 <template>
   <v-card
     class="c-天气"
     title="天气"
   >
-    <v-card-text v-if="天气正在加载 && (null == 天气错误)">
+    <v-card-text v-if="正在加载" class="d-flex justify-center">
       <v-progress-circular color="primary" indeterminate />
     </v-card-text>
-    <v-card-text v-if="天气错误 != null">
+    <v-card-text v-if="显示错误">
       <v-alert title="错误" :text="天气错误" type="error" />
     </v-card-text>
 
-    <template v-if="!天气正在加载">
-      <template v-if="api == 'qweather'">
-        <v-card-text class="py-0 d-flex">
-          <v-row no-gutters>
-            <v-col cols="4">
-              <div class="d-flex align-start">
-                <div class="text-h2">{{ 天气数据.now.temp }}</div>
-                <div class="text-h2 温度单位"><span>&deg;C</span></div>
-
-                <div class="text-h3 天气状况">{{ 天气数据.now.text }}</div>
-              </div>
-
-              <p class="信息2 d-flex py-2 justify-space-between text-medium-emphasis">
-                <span>湿度 {{ 天气数据.now.humidity }}%</span>
-                <span>气压 {{ (Number.parseFloat(天气数据.now.pressure) / 10).toFixed(1) }}kPa</span>
-              </p>
-            </v-col>
-
-            <v-col col="8">
-              <div class="d-flex justify-center">(TODO)</div>
-            </v-col>
-          </v-row>
-        </v-card-text>
-
-        <v-divider class="mt-3" />
-        <v-card-actions class="数据来源0">
-          <span class="数据来源 text-medium-emphasis">数据来源: <a href="https://www.qweather.com" target="_blank">和风天气</a></span>
-          <span class="更新时间 text-medium-emphasis">(更新时间 {{ 更新时间 }})</span>
-        </v-card-actions>
-      </template>
-
+    <template v-if="显示内容">
+      <c天气qw
+        v-if="api == 'qweather'"
+        :天气配置="天气配置"
+        :天气数据="天气数据"
+      />
     </template>
   </v-card>
 </template>
 
 <style scoped>
-.温度单位 {
-  flex-grow: 1;
-  line-height: 0.5em;
-}
-
-.温度单位 span {
-  font-size: 0.6em;
-}
-
-.信息2 {
-  font-size: 1.2em;
-}
-
-.数据来源 {
-  flex-grow: 1;
-}
-
-.数据来源0 {
-  font-size: 0.8em;
-}
 </style>

ui-vue/src/c/天气/天气qw.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { computed } from "vue";
+import { 格式化时分 } from "@/util/时间.js";
+import cqw实时天气 from "./qw实时天气.vue";
+import cqw小时预报 from "./qw小时预报.vue";
+
+const p = defineProps({
+  天气配置: Object,
+  天气数据: Object,
+});
+
+const 更新时间 = computed(() => {
+  const d = new Date(p.天气数据.实时.now.obsTime);
+  return 格式化时分(d);
+});
+</script>
+
+<template>
+  <v-card-text class="py-0 d-flex">
+    <v-row no-gutters>
+      <cqw实时天气 :天气数据="p.天气数据.实时" />
+      <cqw小时预报 :天气数据="p.天气数据.小时预报" />
+    </v-row>
+  </v-card-text>
+
+  <v-divider class="mt-3" />
+  <v-card-actions class="数据来源0">
+    <span class="数据来源 text-medium-emphasis">数据来源: 和风天气 https://www.qweather.com</span>
+    <span class="更新时间 text-medium-emphasis">(更新时间 {{ 更新时间 }})</span>
+  </v-card-actions>
+</template>
+
+<style scoped>
+.数据来源 {
+  flex-grow: 1;
+}
+
+.数据来源0 {
+  font-size: 0.8em;
+}
+</style>