From fb425fa682e957155d83edfd559572eabaf2275c Mon Sep 17 00:00:00 2001
From: FuxuanNet <2639364698@qq.com>
Date: Fri, 24 Jan 2025 11:41:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=20=E6=B7=BB=E5=8A=A0=E7=94=B5?=
 =?UTF-8?q?=E8=A1=A8=E7=9A=84=E6=94=B9=E8=A3=85-=E6=AC=A7=E5=A7=86?=
 =?UTF-8?q?=E8=A1=A8=E8=A1=A8=E7=9B=98=E7=BB=98=E5=88=B6=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  20 +--
 .../OhmmeterExperiment/OhmmeterApp.vue        | 151 ++++++++++++++++++
 .../OhmmeterExperiment/OhmmeterDial.vue       | 127 +++++++++++++++
 .../OhmmeterExperiment/OhmmeterTable.vue      | 106 ++++++++++++
 4 files changed, 392 insertions(+), 12 deletions(-)
 create mode 100644 src/components/OhmmeterExperiment/OhmmeterApp.vue
 create mode 100644 src/components/OhmmeterExperiment/OhmmeterDial.vue
 create mode 100644 src/components/OhmmeterExperiment/OhmmeterTable.vue

diff --git a/src/App.vue b/src/App.vue
index f8b7388..42059e3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,20 +41,12 @@
                         <span class="category-icon">{{ category.icon }}</span>
                         <span>{{ category.name }}</span>
                       </div>
-                      <svg
-                        class="category-arrow"
-                        :class="{
+                      <svg class="category-arrow" :class="{
                           'is-expanded': expandedCategories.has(category.name),
-                        }"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                      >
-                        <path
-                          fill-rule="evenodd"
+                        }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd"
                           d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                          clip-rule="evenodd"
-                        />
+                          clip-rule="evenodd" />
                       </svg>
                     </button>
                     <!-- 分类下的实验列表 -->
@@ -100,6 +92,9 @@
           <div v-else-if="selectedExperiment.id === 5">
             <BridgeExperiment />
           </div>
+          <div v-else-if="selectedExperiment.id === 30">
+            <OhmmeterExperiment />
+          </div>
           <div v-else-if="selectedExperiment.id === 36">
             <TemplateDemo />
           </div>
@@ -119,6 +114,7 @@
 import { ref } from "vue";
 import SpectrometerExperiment from "./components/SpectrometerExperiment.vue";
 import BridgeExperiment from "./components/BridgeExperiment.vue";
+import OhmmeterExperiment from "./components/OhmmeterExperiment/OhmmeterApp.vue";
 import TemplateDemo from "./components/TemplateDemo.vue";
 import ElementDemo from "./components/ElementDemo.vue";
 
diff --git a/src/components/OhmmeterExperiment/OhmmeterApp.vue b/src/components/OhmmeterExperiment/OhmmeterApp.vue
new file mode 100644
index 0000000..713236f
--- /dev/null
+++ b/src/components/OhmmeterExperiment/OhmmeterApp.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import Ohmmeter from './OhmmeterDial.vue'
+import Table from './OhmmeterTable.vue'
+import ExperimentLayout from '../../templates/ExperimentLayout.vue'
+
+import { ref } from 'vue'
+
+// 存储从子组件传递过来的 resistances 和 ticks
+// 使用泛型和类型注解定义 ref
+const resistances = ref < string[] > ([]);
+const ticks = ref < number[] > ([]);
+
+// 定义数据类型为接口
+interface ResistanceData {
+    resistances: string[];
+    ticks: number[];
+}
+
+// 处理子组件传递的数据
+const handleUpdateResistancesAndTicks = (data: ResistanceData) => {
+    resistances.value = data.resistances;
+    ticks.value = data.ticks;
+    resistances.value = resistances.value.map(value => String(value));
+    ticks.value = ticks.value.map(value => String(value));
+    resistances.value.push('∞');
+    ticks.value.push(0);
+};
+</script>
+
+<template>
+    <div class="template-demo">
+        <!-- 实验概述卡片 -->
+        <div class="overview-card">
+            <h2 class="card-title">自动绘制欧姆表表头</h2>
+            <el-tag type="primary">网页介绍</el-tag>
+            <hr />
+            <p class="card-text">
+                这是电表的改装——绘制欧姆表头的网页，大家只需要把表格的数据替换成自己的即可自动绘制。
+            </p>
+            <el-tag type="success">使用说明</el-tag>
+            <hr />
+            <p class="card-text">填写表格修改自己实验时测得的刻度，表盘就会实时更新。</p>
+            <p class="card-text">将最后的网页效果另存为 PDF 然后打印出来即就可以啦。</p>
+            <el-tag type="warning">代码完善</el-tag>
+            <hr />
+            <p class="card-text">代码已上传到 <el-link type="primary"
+                    href="https://github.com/HEUOpenResource/heu-icicles">哈尔滨工程大学课程攻略共享计划</el-link> 和 <el-link
+                    type="primary" href="https://gitee.com/heuwings/Physics-experiments">大物实验数据处理平台</el-link>，欢迎完善与更新！
+            </p>
+        </div>
+        <div class="data-card">
+            <div class="card-header">
+                <h3 class="section-title">电表刻度</h3>
+                <div class="badge badge-blue">欧姆表的绘制</div>
+            </div>
+            <div class="table-container">
+                <Table @updateResistancesAndTicks="handleUpdateResistancesAndTicks"></Table>
+            </div>
+        </div>
+        <div class="data-card">
+            <Ohmmeter :resistances="resistances" :ticks="ticks"></Ohmmeter>
+        </div>
+    </div>
+
+
+</template>
+
+<style scoped>
+.template-demo {
+    padding: 20px;
+}
+
+/* 卡片基础样式 */
+.overview-card,
+.data-card {
+    background-color: white;
+    border-radius: 12px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    padding: 24px;
+    margin-bottom: 24px;
+    transition:
+        transform 0.3s,
+        box-shadow 0.3s;
+}
+
+.overview-card:hover,
+.data-card:hover {
+    box-shadow:
+        0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+/* 卡片标题和文本 */
+.card-title {
+    font-size: 24px;
+    font-weight: 700;
+    color: #111827;
+    margin-bottom: 16px;
+}
+
+.card-text {
+    color: #4b5563;
+}
+
+/* 卡片头部 */
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+}
+
+.section-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #111827;
+}
+
+/* 徽章样式 */
+.badge {
+    padding: 4px 12px;
+    border-radius: 9999px;
+    font-size: 14px;
+}
+
+.badge-blue {
+    background-color: #eff6ff;
+    color: #1d4ed8;
+}
+
+.badge-green {
+    background-color: #ecfdf5;
+    color: #047857;
+}
+
+.badge-purple {
+    background-color: #f5f3ff;
+    color: #6d28d9;
+}
+
+/* 表格容器 */
+.table-container {
+    overflow-x: auto;
+}
+
+@media (max-width: 650px) {
+    .template-demo {
+        padding: 0px;
+    }
+}
+</style>
diff --git a/src/components/OhmmeterExperiment/OhmmeterDial.vue b/src/components/OhmmeterExperiment/OhmmeterDial.vue
new file mode 100644
index 0000000..eda4b54
--- /dev/null
+++ b/src/components/OhmmeterExperiment/OhmmeterDial.vue
@@ -0,0 +1,127 @@
+<template>
+    <div class="ohmmeter-dial">
+        <canvas ref="dialCanvas" :width="canvasWidth" :height="canvasHeight"></canvas>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, watchEffect } from 'vue';
+
+// 定义 props 的类型
+const props = withDefaults(defineProps < {
+    resistances: string[];
+    ticks: number[];
+} > (), {
+    resistances: () => [],
+    ticks: () => []
+});
+
+const canvasWidth = ref < number > (1000);
+const canvasHeight = ref < number > (1000);
+// 添加 HTMLCanvasElement 类型
+const dialCanvas = ref < HTMLCanvasElement | null > (null);
+
+const isMobile = ref < boolean > (false);
+
+const updateCanvasSize = () => {
+    if (window.innerWidth < 700) {
+        canvasWidth.value = 400;
+        canvasHeight.value = 500;
+        isMobile.value = true; // 手机端
+    } else {
+        canvasWidth.value = 700;
+        canvasHeight.value = 700;
+        isMobile.value = false; // 桌面端
+    }
+};
+
+const drawDial = () => {
+    const canvas = dialCanvas.value as HTMLCanvasElement;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
+    ctx.clearRect(0, 0, canvasWidth.value, canvasHeight.value);
+
+    const centerX = canvasWidth.value / 2;
+    const centerY = canvasHeight.value / 2;
+    const radius = Math.min(centerX, centerY) * 0.9;
+
+    const angles = props.ticks.map(tick => (tick / 25) * (2 / 3) * Math.PI - (Math.PI * 5 / 6));
+
+    angles.forEach((angle, index) => {
+        const resistance = props.resistances[index];
+        const startX = centerX + radius * Math.cos(angle);
+        const startY = centerY + radius * Math.sin(angle);
+        const endX = centerX + (radius - 30) * Math.cos(angle);
+        const endY = centerY + (radius - 30) * Math.sin(angle);
+
+        ctx.beginPath();
+        ctx.moveTo(startX, startY);
+        ctx.lineTo(endX, endY);
+        ctx.strokeStyle = "red";
+        ctx.lineWidth = 2;
+        ctx.stroke();
+
+        const labelX = centerX + (isMobile.value ? radius + 30 : radius - 40) * Math.cos(angle);
+        const labelY = centerY + (isMobile.value ? radius + 30 : radius - 40) * Math.sin(angle);
+        ctx.font = "12px Arial";
+        ctx.fillStyle = "black";
+        ctx.textAlign = angle < -Math.PI / 3 ? "left" : angle > -2 * Math.PI / 3 ? "right" : "center";
+        ctx.fillText(`${resistance}Ω`, labelX, labelY);
+    });
+
+    for (let i = 0; i <= 100; i++) {
+        const angle = (i / 100) * (2 / 3) * Math.PI - (Math.PI * 5 / 6);
+        const startX = centerX + radius * Math.cos(angle);
+        const startY = centerY + radius * Math.sin(angle);
+        const endX = centerX + (radius - (i % 10 === 0 ? 15 : 10)) * Math.cos(angle);
+        const endY = centerY + (radius - (i % 10 === 0 ? 15 : 10)) * Math.sin(angle);
+
+        ctx.beginPath();
+        ctx.moveTo(startX, startY);
+        ctx.lineTo(endX, endY);
+        ctx.strokeStyle = "gray";
+        ctx.lineWidth = 1;
+        ctx.stroke();
+
+        if (i % 10 === 0) {
+            const labelX = centerX + (radius - 25) * Math.cos(angle);
+            const labelY = centerY + (radius - 25) * Math.sin(angle);
+            ctx.font = "10px Arial";
+            ctx.fillStyle = "gray";
+            ctx.textAlign = "center";
+            ctx.fillText(`${i}uA`, labelX, labelY);
+
+            if (i === 50) {
+                ctx.font = "14px Arial";
+                ctx.fillText("R中", labelX, labelY - 35);
+            }
+        }
+    }
+};
+
+onMounted(() => {
+    updateCanvasSize();
+    drawDial();
+    window.addEventListener('resize', updateCanvasSize);
+    window.addEventListener('resize', drawDial);
+});
+
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', updateCanvasSize);
+    window.removeEventListener('resize', drawDial);
+});
+
+watchEffect(() => {
+    drawDial();
+});
+</script>
+
+<style scoped>
+.ohmmeter-dial {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 20px;
+}
+</style>
diff --git a/src/components/OhmmeterExperiment/OhmmeterTable.vue b/src/components/OhmmeterExperiment/OhmmeterTable.vue
new file mode 100644
index 0000000..a408927
--- /dev/null
+++ b/src/components/OhmmeterExperiment/OhmmeterTable.vue
@@ -0,0 +1,106 @@
+<template>
+    <div class="flex row center">
+        <!-- 第一部分表格 -->
+        <el-table :data="firstHalfTableData" border style="width: 300px" class="m2">
+            <el-table-column prop="resistances" label="Rx/欧" width="150">
+                <template #default="scope">
+                    <el-input v-model="scope.row.resistances" placeholder="输入电阻值" size="small" />
+                </template>
+            </el-table-column>
+            <el-table-column prop="ticks" label="刻度" width="150">
+                <template #default="scope">
+                    <el-input v-model="scope.row.ticks" placeholder="输入刻度值" size="small" />
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <!-- 第二部分表格 -->
+        <el-table :data="secondHalfTableData" border style="width: 300px" class="m2">
+            <el-table-column prop="resistances" label="Rx/欧" width="150">
+                <template #default="scope">
+                    <el-input v-model="scope.row.resistances" placeholder="输入电阻值" size="small" />
+                </template>
+            </el-table-column>
+            <el-table-column prop="ticks" label="刻度" width="150">
+                <template #default="scope">
+                    <el-input v-model="scope.row.ticks" placeholder="输入刻度值" size="small" />
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+// 原始数据
+// 使用接口类型定义 ref
+const tableData = ref < TableDataItem[] > ([
+    { resistances: '0', ticks: '25.0' },
+    { resistances: '10', ticks: '23.0' },
+    { resistances: '20', ticks: '21.2' },
+    { resistances: '30', ticks: '19.7' },
+    { resistances: '60', ticks: '16.1' },
+    { resistances: '90', ticks: '13.8' },
+    { resistances: '120', ticks: '12.0' },
+    { resistances: '280', ticks: '7.0' },
+    { resistances: '360', ticks: '5.9' },
+    { resistances: '480', ticks: '4.9' },
+    { resistances: '600', ticks: '4.0' },
+    { resistances: '1000', ticks: '2.6' },
+    { resistances: '2000', ticks: '1.4' },
+    { resistances: '3000', ticks: '1.0' },
+]);
+
+// 将数据拆分为两部分，显式指定类型
+const firstHalfTableData = ref < TableDataItem[] > (tableData.value.slice(0, Math.ceil(tableData.value.length / 2)));
+const secondHalfTableData = ref < TableDataItem[] > (tableData.value.slice(Math.ceil(tableData.value.length / 2)));
+
+// 存储 resistances 和 ticks 的列表，指定类型
+const resistancesList = ref < string[] > ([]);
+const ticksList = ref < string[] > ([]);
+
+// 使用 defineEmits 定义事件
+// 定义 emit 事件的类型
+const emit = defineEmits < {
+    (e: 'updateResistancesAndTicks', data: {
+    resistances: string[];
+    ticks: string[];
+}): void
+}> ();
+
+// 监听 tableData 的变化，将 resistances 和 ticks 存储到列表中，并传递给父组件
+watch(tableData, (newTableData) => {
+    resistancesList.value = newTableData.map(item => item.resistances);
+    ticksList.value = newTableData.map(item => item.ticks);
+
+    // 触发事件，将列表传递给父组件
+    emit('updateResistancesAndTicks', { resistances: resistancesList.value, ticks: ticksList.value });
+}, { deep: true });
+</script>
+
+<style scoped>
+.flex {
+    display: flex;
+}
+
+.row {
+    flex-direction: row;
+}
+
+.center {
+    justify-content: center;
+    align-items: center;
+}
+
+.m2 {
+    margin: 2px;
+
+}
+
+@media (max-width: 650px) {
+    .row {
+        flex-direction: column;
+    }
+}
+</style>
-- 
Gitee