petalinux_zynq7 驅動DAC以及ADC模塊之五：nodejs+vue3實現web網頁波形顯示

前文：

petalinux_zynq7 C語言驅動DAC以及ADC模塊之一：建立IPhttps://blog.csdn.net/qq_27158179/article/details/136234296petalinux_zynq7 C語言驅動DAC以及ADC模塊之二：petalinuxhttps://blog.csdn.net/qq_27158179/article/details/136236138petalinux_zynq7 C語言驅動DAC以及ADC模塊之三：實現C語言API并編譯出庫被python調用https://blog.csdn.net/qq_27158179/article/details/136238093petalinux_zynq7 C語言驅動DAC以及ADC模塊之四：python實現http_apihttps://blog.csdn.net/qq_27158179/article/details/136239572注意暫時mizar z7010暫時無法部署本web，提示堆棧內存不足，編譯出錯。但是可以在局域網內的linux或者windows機子上部署。nodejs是跨平臺的。

0. 環境

- win10
- vscode

-ubuntu18

1. 搭建環境-win10

1.1 安裝 node

安裝 node-v20.10.0-x64.msi

安裝到：
D:\Programs\nodejs\

cmd
node -v
npm -v

在node.js安裝路徑D:\Programs\nodejs下新建 node_cache 和 node_global 文件夾，

然后在cmd中運行
npm config set prefix "D:\Programs\nodejs\node_global"
npm config set cache “D:\Programs\nodejs\node_cache”

配置鏡像加速，輸入命令
npm config set registry=http://registry.npm.taobao.org

配置環境變量
在系統變量中新增
NODE_PATH D:\Programs\nodejs\node_global

在用戶變量中的Path中新增
D:\Programs\nodejs\node_global

重新打開 cmd

1.2 全局安裝 vue

npm install vue -g
npm install @vue/cli -g
vue -V

1.3 vue ui 創建項目

cmd
vue ui

瀏覽器切換到：http://localhost:8000/project/select
-> Create
-> 文件夾瀏覽到： E:\Workspaces\web
-> + Create a new project here
-> Details.Project folder: adda_vue
-> Details.Package manager: npm
-> 取消勾選 ?Git repository
-> Next
-> Presets.Select a preset: Manual -> Next
-> Features.Enable features: 勾選 Babel, Router, Vuex, Linter
-> Pick a linter / formatter config: ESLint with error prevention only
-> Create project
-> Continue without saving

-> Project dashboard -> Tasks ->?
-> build: Run task
-> serve: Run task
-> serve: Run task
?? ?-> 點擊輸出
?? ?->?
?? ??? ? ?App running at:
?? ??? ? ?- Local: ? http://localhost:8081/?
?? ??? ? ?- Network: http://192.168.123.238:8081/

1.4 helloworld

瀏覽器打開 http://localhost:8081/?

2. 搭建環境-ubuntu18

2.1 安裝 nodejs

下載?
https://nodejs.org/en/download/

得到?
node-v16.20.2-linux-x64.tar.xz

解壓

tar -xvf node-v16.20.2-linux-x64.tar.xz
export PATH=$PATH:/home/xxjianvm/work/node-v16.20.2-linux-x64/bin
node -v
npm -v

配置鏡像加速，輸入命令

npm config set registry=http://registry.npm.taobao.org

2.2 全局安裝 vue

npm install vue -g
npm install @vue/cli -g
npm install @vue/cli-init -g?
vue -V

問題：FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
解決辦法：npm install -g increase-memory-limit

~~在zynq上空白項目可以解決，但是后面增加了功能后仍會出現，暫未解決。~~

2.3 創建項目

用vue create

cd ~
mkdir work && cd work
vue create adda_vue

? ? -> manual?
?? ?-> Features.Enable features: 勾選 Babel, Router, Vuex, Linter
?? ?-> 3.x
?? ?-> ESLint with error prevention only
?? ?-> Lint on save
?? ?-> In dedicated config files
?? ?

cd adda_vue
npm run serve

目前虛擬機內的ubuntu18自帶火狐，顯示白屏。和當前版本的nodejs + vue3不兼容。

瀏覽器打開 http://192.168.125.137:8080/

后續win10和ubuntu開發vue3的編程方法一樣。

3. 新增頁面Adc

切換目錄

cd /home/xxjianvm/work/adda_vue/

3.1 AdcWave.vue

添加文件：

gedit src/components/AdcWave.vue

添加內容：

<template><div class="hello"><h1>{{ msg }}</h1><h2>Essential Links</h2><ul><li><a href="/">Home</a></li></ul></div></template><script>export default {name: 'AdcWave',props: {msg: String}}</script>

3.2 index.js

修改 router/index.js

gedit src/router/index.js

添加

import AdcWave from '@/components/AdcWave.vue'
const routes = [...{path: '/adc',name: 'adc',component: AdcWave},
]

3.3 App.vue?

修改 App.vue

gedit src/App.vue

添加：
?

 ? <router-link to="/adc">Adc</router-link> |

4.?echarts 折線圖 demo

4.1 安裝依賴（vscode內的TERMINAL執行也可以）

需要進入項目目錄安裝

cd /home/xxjianvm/work/adda_vue
npm install vue-echarts echarts

4.2 main.js中全局注冊組件

修改 main.js

gedit src/main.js

添加：

import Echarts from "vue-echarts"
import * as echarts from "echarts"

把

createApp(App).use(store).use(router).mount('#app')

修改為：

const app = createApp(App)
app.component("v-chart", Echarts)
app.config.globalProperties.$echarts = echarts
app.use(store).use(router).use(Echarts).mount('#app')

4.3 修改頁面

-> 修改 src/components/AdcWave.vue

gedit src/components/AdcWave.vue

4.3.1 <template>添加內容：

<template>...<div class="echarts-box"><div id="myEcharts" :style="{ width: '900px', height: '300px' }"></div></div>
</template>

4.3.2 <script>?

<script >
import * as echarts from "echarts"
import {onMounted} from "vue";export default {name: 'AdcWave',props: {msg: String},setup() {onMounted(() => { // 需要獲取到element,所以是onMounted的Hooklet myChart = echarts.init(document.getElementById("myEcharts"));// 繪制圖表myChart.setOption({xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]});window.onresize = function () { // 自適應大小myChart.resize();};});}
}
</script>

5.?輸入文本配置采樣頻率和數據長度

5.1 安裝依賴（vscode內的TERMINAL執行也可以）

需要進入項目目錄安裝

cd /home/xxjianvm/work/adda_vue
npm install element-plus
npm install axios

5.2?修改main.js中全局注冊組件

修改 main.js

gedit src/main.js

直接給出內容：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'import Echarts from "vue-echarts"
import * as echarts from "echarts"import ElementPlus from "element-plus";
import "element-plus/dist/index.css";const app = createApp(App)
app.component("v-chart", Echarts)
app.config.globalProperties.$echarts = echarts
app.use(store).use(router).use(echarts).use(ElementPlus)
app.mount('#app')

5.3 vue.config.js

修改工程根目錄下的 vue.config.js
文件內容：

module.exports = {publicPath: './',transpileDependencies: true,devServer: {// 設置代理proxy: {"/api": {target: "http://192.168.123.138:5000", // 訪問數據的計算機域名ws: true, // 是否啟用websocketschangOrigin: true, //開啟代理,pathRewrite: { // 重寫代理規則，/api開頭，代理到/'^/api': '/'// 例：/api/user/login代理到// http://localhost:5000/user/login},},},},
};

注意：192.168.123.138是ZYNQ的IP。

5.4?AdcWave.vue內容

編輯文件

gedit src/components/AdcWave.vue

修改內容：

給出文件內容：

<template><div class="hello"><h1>{{ msg }}</h1><h2>Essential Links</h2><ul><li><a href="/">Home</a></li></ul></div><div class="echarts-box"><div id="myEcharts" :style="{ width: '900px', height: '300px' }"></div></div><div class="home"><el-form ref="adcParamFormRef" :model="adcParamForm" class="demo-form-inline" label-width="150px"><el-form-item label="采樣頻率"><el-col :span="5"><el-input v-model="adcParamForm.sampleFrequency"></el-input></el-col></el-form-item><el-form-item label="采樣長度"><el-col :span="5"><el-input v-model="adcParamForm.sampleLength"></el-input></el-col></el-form-item></el-form><el-button type="primary" @click.enter.prevent="toAdcStart()">開始</el-button><el-button type="primary" @click.enter.prevent="toAdcStop()">停止</el-button></div>
</template><script >
import {onMounted} from "vue";
// @ is an alias to /src
import axios from "axios";
import { ElMessage } from 'element-plus'import * as echarts from "echarts"export default {name: 'AdcWave',props: {msg: String},data () {return {// 這是登錄表單的數據綁定對象adcParamForm: {sampleFrequency: '100000',sampleLength: '100'},}},setup() {onMounted(() => { // 需要獲取到element,所以是onMounted的Hookvar chartDom = document.getElementById('myEcharts');var myChart = echarts.init(chartDom);var option;option = {title: {text: 'Dynamic Data & Time Axis'},tooltip: {trigger: 'axis',formatter: function (params) {params = params[0];return (String(params.value[1]));},axisPointer: {animation: false}},xAxis: {name: 'x',},yAxis: {name: 'y',},series: [{name: 'Fake Data',type: 'line',showSymbol: false,data: [],}]};function hexToArr(str) {// hex字符串長度通常都是2的倍數，但為了放止意外，判斷一下長度，不是2的倍數就在最前面補0if (str.length % 2) str = "0" + strlet arr=[]for (let i = 0; i < str.length; i+=2) {let a=parseInt(str.slice(i,i+2),16)arr.push(a)}return arr}function trim(str) {var reg = /[\t\r\f\n\s]*/g;var trimStr;if (typeof str === 'string') {trimStr = str.replace(reg,'');}// console.log(trimStr)return trimStr}function generateDataFromArr(data_arr) {let data = [];for (let i = 0; i <= data_arr.length; i += 1) {data.push([i, data_arr[i]]);}return data;}setInterval(function () {var adc_enable = sessionStorage.getItem("adc_enable")if(adc_enable == undefined)   return;else if(adc_enable == "false") return;else{var adc_sampleFrequency = parseInt(sessionStorage.getItem("adc_sampleFrequency"))var adc_sampleLength = parseInt(sessionStorage.getItem("adc_sampleLength"))console.log(adc_sampleFrequency)console.log(adc_sampleLength)axios.post("/api/adda/adc",{sampleFrequency: adc_sampleFrequency,adc_length: adc_sampleLength},{}).then((res) => {if (res.data.code === 0) {var adc_data_arr = hexToArr(trim(res.data.hexString))myChart.setOption({series: [{data: generateDataFromArr(adc_data_arr)}]});}});}}, 1000);option && myChart.setOption(option);});},methods: {toAdcStart(){ElMessage("開始采樣");sessionStorage.setItem("adc_enable",true)sessionStorage.setItem("adc_sampleFrequency",this.adcParamForm.sampleFrequency)sessionStorage.setItem("adc_sampleLength",this.adcParamForm.sampleLength)},toAdcStop(){ElMessage("結束采樣");sessionStorage.setItem("adc_enable",false);}}
}
</script>