Skip to content

Commit 33ce447

Browse files
guohaomengguohaomeng
committed
添加波形发生器控制面板
1 parent 67ddda2 commit 33ce447

File tree

8 files changed

+169
-58
lines changed

8 files changed

+169
-58
lines changed

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="zh-CN" class="dark">
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>unplugin-element-plus-vite-example</title>
6+
<title>ESP32WebScope</title>
77
</head>
88
<body>
99
<div id="app"></div>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"@vue/compiler-sfc": "^3.2.37",
1818
"sass": "^1.53.0",
1919
"typescript": "^4.7.4",
20-
"unplugin-element-plus": "workspace:*",
20+
"unplugin-element-plus": "^0.4.1",
2121
"vite": "^3.0.2",
2222
"vite-plugin-inspect": "^0.6.0",
2323
"vue-tsc": "^0.38.8"

‎src/App.vue‎

Lines changed: 43 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,52 @@
11
<template>
2-
<div class="container">
3-
<h1>Custom theme example (on demand)</h1>
4-
2+
<div class="container" style="justify-content:normal;">
3+
<el-row justify="end" style="height:32px;">
4+
<el-form-item label="暗黑模式">
5+
<el-switch v-model="switchVal" @change="toggleDark()" inline-prompt active-text="否" inactive-text="是" />
6+
</el-form-item>
7+
</el-row>
58
<el-row>
6-
<el-button @click="onClick">Default</el-button>
7-
<el-button type="primary" @click="onClick">Primary</el-button>
8-
<el-button type="success" @click="onClick">Success</el-button>
9-
<el-button type="info" @click="onClick">Info</el-button>
10-
<el-button type="warning" @click="onClick">Warning</el-button>
11-
<el-button type="danger" @click="onClick">Danger</el-button>
9+
<!-- 左半屏幕 -->
10+
<el-col :span="12">
11+
<div class="LeftMain">
12+
<WaveGen msg="波形发生器控制面板" />
13+
</div>
14+
</el-col>
15+
<!-- 右半屏幕 -->
16+
<el-col :span="12">
17+
</el-col>
1218
</el-row>
1319

14-
<el-radio-group v-model="radioVal">
15-
<el-radio-button label="New York"></el-radio-button>
16-
<el-radio-button label="Washington"></el-radio-button>
17-
<el-radio-button label="Los Angeles"></el-radio-button>
18-
<el-radio-button label="Chicago"></el-radio-button>
19-
</el-radio-group>
20-
21-
<div>
22-
<el-switch v-model="switchVal"></el-switch>&nbsp;
23-
<el-switch
24-
v-model="switchVal"
25-
active-color="#13ce66"
26-
inactive-color="#ff4949"
27-
/>
28-
</div>
29-
30-
<div>
31-
<el-select>
32-
<el-option value="test">test</el-option>
33-
</el-select>
34-
&nbsp;
35-
<el-date-picker></el-date-picker>
36-
</div>
37-
38-
<el-slider v-model="sliderVal"></el-slider>
39-
40-
<p>
41-
It is a example built by vite.&nbsp; More info see
42-
<a
43-
href="https://github.com/element-plus/unplugin-element-plus"
44-
target="_blank"
45-
>unplugin-element-plus</a
46-
>.
47-
</p>
4820
</div>
4921
</template>
22+
<style>
5023
24+
.LeftMain {
25+
width: 100%;
26+
height: 100%;
27+
}
28+
29+
.el-row {
30+
margin-bottom: 0px;
31+
}
32+
</style>
5133
<script setup lang="ts">
5234
import { ref } from 'vue'
5335
import {
54-
ElButton,
55-
ElDatePicker,
5636
ElNotification,
57-
ElOption,
58-
ElRadioButton,
59-
ElRadioGroup,
6037
ElRow,
61-
ElSelect,
62-
ElSlider,
38+
ElCol,
6339
ElSwitch,
40+
ElFormItem
6441
} from 'element-plus'
6542
66-
const radioVal = ref('New York')
43+
// 自动切换暗黑模式
44+
import { useDark, useToggle } from '@vueuse/core'
45+
const isDark = useDark()
46+
const toggleDark = useToggle(isDark)
47+
6748
const switchVal = ref(true)
68-
const sliderVal = ref(50)
49+
6950
7051
function onClick() {
7152
ElNotification({
@@ -76,3 +57,13 @@ function onClick() {
7657
})
7758
}
7859
</script>
60+
<script lang="ts">
61+
import WaveGen from './components/WaveGen.vue'
62+
export default {
63+
name: 'App',
64+
components: {
65+
//2.声明或注册组件
66+
WaveGen
67+
}
68+
}
69+
</script>

‎src/components/WaveGen.vue‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<template>
2+
<h2>{{ msg }}</h2>
3+
4+
<div class="waveGen">
5+
<!-- 表单1 -->
6+
<el-form ref="form" :model="form" label-width="auto" :size="formSize" :label-position="labelPosition">
7+
<el-form-item label="波形选择">
8+
<el-select v-model="waveType" placeholder="请选择波形">
9+
<el-option label="正弦波" value="1"></el-option>
10+
<el-option label="方波" value="2"></el-option>
11+
<el-option label="锯齿波" value="3"></el-option>
12+
</el-select>
13+
</el-form-item>
14+
<el-form-item label="频率" style="width:100%s">
15+
<el-input-number v-model="freq" @change="freqChange(freq)" :min="1" :max="1500" :step="1" label="频率">
16+
</el-input-number>
17+
</el-form-item>
18+
<el-form-item label="占空比">
19+
<el-input-number v-model="duty" @change="dutyChange(duty)" :min="1" :max="99" :step="1" label="占空比">
20+
</el-input-number>
21+
</el-form-item>
22+
<el-form-item label="峰峰值">
23+
<el-input-number v-model="uMaxValue" @change="uMaxValueChange(uMaxValue)" :min="0" :max="3.3" :precision="2"
24+
:step="0.2" label="峰峰值"></el-input-number>
25+
</el-form-item>
26+
<el-form-item label="偏置电压">
27+
<el-input-number v-model="biasVoltage" @change="biasChange(biasVoltage)" :min="0" :max="3.3" :precision="2"
28+
:step="0.2" label="频率"></el-input-number>
29+
</el-form-item>
30+
<el-form-item>
31+
<el-button type="primary" @click="onSubmit" style="width: 40%; margin-right: 5%;">立即设置</el-button>
32+
<el-button style="width: 40%; margin-left: 0%;">取消</el-button>
33+
</el-form-item>
34+
</el-form>
35+
</div>
36+
37+
</template>
38+
<script setup lang="ts">
39+
import { ref } from "vue";
40+
import {
41+
ElForm,
42+
ElFormItem,
43+
ElButton,
44+
ElOption,
45+
ElInputNumber,
46+
ElRow,
47+
ElCol,
48+
ElSelect,
49+
ElSlider,
50+
ElSwitch,
51+
} from 'element-plus'
52+
53+
import { reactive } from 'vue'
54+
55+
defineProps<{ msg: string }>();
56+
57+
const formSize = ref('large')
58+
const labelPosition = ref('right')
59+
60+
const waveType = ref("1")
61+
const freq = ref(100)
62+
const duty = ref(50)
63+
const uMaxValue = ref(3.3)
64+
const biasVoltage = ref(1.65);
65+
const form = reactive({
66+
waveType: '1',
67+
freq: ref(100),
68+
duty: ref(50),
69+
uMaxValue: ref(3.3),
70+
biasVoltage: ref(1.65),
71+
72+
})
73+
74+
const onSubmit = () => {
75+
console.log('submit!')
76+
}
77+
const freqChange = (value: number) => {
78+
console.log(value);
79+
form.freq = value;
80+
}
81+
const dutyChange = (value: number) => {
82+
console.log(value);
83+
form.duty = value;
84+
}
85+
const uMaxValueChange = (value: number) => {
86+
console.log(value);
87+
}
88+
const biasChange = (value: number) => {
89+
console.log(value);
90+
}
91+
92+
</script>
93+
94+
<script lang="ts">
95+
export default {
96+
name: "WaveGen",
97+
props1: {
98+
msg: String
99+
}
100+
}
101+
</script>
102+
103+
<style>
104+
.waveGen {
105+
width: 50%;
106+
height: 100%;
107+
margin: 0 auto;
108+
font-size: 2em;
109+
}
110+
111+
.el-input-number {
112+
width: 100%;
113+
min-width: 200px;
114+
}
115+
.el-select{
116+
width: 100%;
117+
min-width: 200px;
118+
}
119+
</style>

‎src/main.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@ import { createApp } from 'vue'
22
import App from './App.vue'
33

44
import '~/styles/index.scss'
5+
import 'element-plus/theme-chalk/dark/css-vars.css'
56

67
createApp(App).mount('#app')

‎src/styles/element/index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
22
$colors: (
33
'primary': (
4-
'base': #003261,
4+
'base': #409EFF,
55
),
66
'success': (
77
'base': #21ba45,

‎src/styles/index.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
display: flex;
55
flex-direction: column;
6-
justify-content: space-between;
6+
justify-content: normal;
77

88
min-height: 90vh;
99
}

‎vite.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default defineConfig({
2222
vue(),
2323
ElementPlus({
2424
useSource: true,
25-
defaultLocale: 'zh-tw',
25+
defaultLocale: 'zh-cn',
2626
}),
2727
Inspect(),
2828
],

0 commit comments

Comments
 (0)