|
@@ -68,12 +68,13 @@
|
|
|
<div class="equipment_status">
|
|
|
<span class="desSty">设备未连接:</span>
|
|
|
<img
|
|
|
+ @click="openTableFun"
|
|
|
style="width: 14px; height: 20px"
|
|
|
src="../assets/newAnimation/lanya.png"
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
- <span class="desSty">查看波形图</span>
|
|
|
+ <span class="desSty" @click="viewEchartsFun">查看波形图</span>
|
|
|
<span
|
|
|
style="font-size: 12px"
|
|
|
v-show="equipment == '2' && pulseTimeNum < 180 && pulseTimeNum > 0"
|
|
@@ -118,17 +119,107 @@
|
|
|
</el-col>
|
|
|
<el-col :span="1"> </el-col>
|
|
|
</el-row>
|
|
|
+
|
|
|
+ <el-dialog title="提示" :visible.sync="tableVisible" width="60%" center>
|
|
|
+ <span>
|
|
|
+ <el-table
|
|
|
+ :data="scanData"
|
|
|
+ style="width: 100%"
|
|
|
+ :header-cell-style="{
|
|
|
+ background: '#66B497',
|
|
|
+ color: '#FFFFFF',
|
|
|
+ 'letter-spacing': '4px',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <!-- <el-table-column type="selection" align="center" width="55">
|
|
|
+ </el-table-column> -->
|
|
|
+ <el-table-column prop="Rssi" align="center" label="信号强度">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="Name"
|
|
|
+ :formatter="nameFormatter"
|
|
|
+ align="center"
|
|
|
+ label="类型"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="MAC" align="center" label="mac">
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="操作" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ @click="linkFun(scope.$index, scope.row)"
|
|
|
+ class="xl_d_button"
|
|
|
+ size="mini"
|
|
|
+ slot="reference"
|
|
|
+ >
|
|
|
+ <span v-if="linkIndex == scope.$index">已连接</span
|
|
|
+ ><span v-if="linkIndex != scope.$index">连接</span></el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </span>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="tableVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="tableVisible = false"
|
|
|
+ >确 定</el-button
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog
|
|
|
+ title="查看波形图"
|
|
|
+ :visible.sync="echartsVisible"
|
|
|
+ width="80%"
|
|
|
+ center
|
|
|
+ >
|
|
|
+ <span>
|
|
|
+ <div class="outPage">
|
|
|
+ <div id="eegOne" class="naoOneClass"></div>
|
|
|
+ </div>
|
|
|
+ <div class="outPage">
|
|
|
+ <div id="eegTwo" class="naoOneClass"></div>
|
|
|
+ </div>
|
|
|
+ <div class="outThreePage">
|
|
|
+ <div id="eegThree" class="naoOneClass"></div>
|
|
|
+ </div>
|
|
|
+ </span>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="echartsVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="echartsVisible = false"
|
|
|
+ >确 定</el-button
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
//一个弹出框显示脑电或心电的显示图,外边显示脑电设备状态
|
|
|
// 查看选择设备的状态,判断波形是哪个?
|
|
|
+import * as echarts from "echarts";
|
|
|
import Utils from "./util.js";
|
|
|
const fs = require("fs");
|
|
|
const { ipcRenderer } = require("electron");
|
|
|
+const RingBuffer = require("ringbufferjs");
|
|
|
+// import RingBuffer from 'ringbufferjs'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ //echarts渲染标志
|
|
|
+ echartsVisible: false,
|
|
|
+ echartsOne: null,
|
|
|
+ echartsTwo: null,
|
|
|
+ echartsThree: null,
|
|
|
+
|
|
|
+ optionOne: null,
|
|
|
+ optionTwo: null,
|
|
|
+ optionThree: null,
|
|
|
+ //打开设备进行选择的列表
|
|
|
+ openTableFlag: "",
|
|
|
+ scanData: [],
|
|
|
+ websock: null,
|
|
|
+ tableVisible: false,
|
|
|
+ linkIndex: null,
|
|
|
//是否是单个训练
|
|
|
singleFlag: true,
|
|
|
buttonDisable: true,
|
|
@@ -262,6 +353,7 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
+ // RingBuffer=null;
|
|
|
//添加监听接收到数据后开始驱动
|
|
|
//脑电监听
|
|
|
|
|
@@ -274,8 +366,12 @@ export default {
|
|
|
window.addEventListener("resize", function () {
|
|
|
// that.getSize();
|
|
|
if (flagAnimation) {
|
|
|
+
|
|
|
setTimeout(() => {
|
|
|
that.getSize();
|
|
|
+ that.echartsOne.resize();
|
|
|
+ that.echartsTwo.resize();
|
|
|
+ that.echartsThree.resize();
|
|
|
flagAnimation = true;
|
|
|
}, 1000);
|
|
|
}
|
|
@@ -289,6 +385,7 @@ export default {
|
|
|
}, 1000);
|
|
|
that.singleFlag = that.$route.query.single;
|
|
|
console.log(that.singleFlag);
|
|
|
+
|
|
|
ipcRenderer.on("accelerationData-message", (event, arg) => {
|
|
|
if (arg["_c"].size == 1) {
|
|
|
this.waveData.push(arg["_c"].get("rawWaveData"));
|
|
@@ -298,6 +395,7 @@ export default {
|
|
|
}
|
|
|
} else {
|
|
|
if (arg["_c"].size == 11) {
|
|
|
+ console.log(arg);
|
|
|
// 当不为undefined时
|
|
|
let ll = 11;
|
|
|
// 获取长度
|
|
@@ -362,7 +460,7 @@ export default {
|
|
|
this.focusNao.shift();
|
|
|
}
|
|
|
// this.numEleDom = this.focusNaoAll.length.toString();
|
|
|
- if (this.currentFlag) {
|
|
|
+ if (this.echartsVisible) {
|
|
|
this.renderEegOne();
|
|
|
this.renderEegTwo();
|
|
|
this.renderEegThree();
|
|
@@ -370,8 +468,153 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
+ this.initWebsocket();
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ this.websock.close(1000);
|
|
|
},
|
|
|
methods: {
|
|
|
+ viewEchartsFun() {
|
|
|
+ this.echartsVisible = true;
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ if (this.echartsOne == null) {
|
|
|
+ this.echartsOne = echarts.init(document.getElementById("eegOne"));
|
|
|
+ this.echartsTwo = echarts.init(document.getElementById("eegTwo"));
|
|
|
+ this.echartsThree = echarts.init(document.getElementById("eegThree"));
|
|
|
+ }
|
|
|
+
|
|
|
+ // 先调用
|
|
|
+ this.renderEegOne();
|
|
|
+ this.renderEegTwo();
|
|
|
+ this.renderEegThree();
|
|
|
+ }, 2000);
|
|
|
+ },
|
|
|
+ //进行解析脑电数据
|
|
|
+
|
|
|
+ linkFun(index, val) {
|
|
|
+ // debugger;
|
|
|
+ let that = this;
|
|
|
+ that.$http.postTmp(
|
|
|
+ `/v1/device/connection`,
|
|
|
+ {
|
|
|
+ chip: val.Chip + "",
|
|
|
+ mac: val.MAC,
|
|
|
+ addrType: val.BdadrType,
|
|
|
+ filterName: val.Name == "BW-ECG-01" ? "1" : "0",
|
|
|
+ },
|
|
|
+ (res) => {
|
|
|
+ // debugger;
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ this.linkIndex = index;
|
|
|
+ that.openData();
|
|
|
+ this.$message.success("设备连接成功");
|
|
|
+ // that.tableData = res.data;
|
|
|
+ // that.totolSize = res.data.totalElements;
|
|
|
+ } else {
|
|
|
+ // this.$message.error("访问服务器失败!");
|
|
|
+ this.$message.error(res.data.message);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ //打开数据接口
|
|
|
+ openData() {
|
|
|
+ let that = this;
|
|
|
+ that.$http.getTmp(`/v1/device/open/notify`, {}, (res) => {
|
|
|
+ debugger;
|
|
|
+ if (res.code == 200) {
|
|
|
+ // that.tableData = res.data;
|
|
|
+ // that.totolSize = res.data.totalElements;
|
|
|
+ } else {
|
|
|
+ this.$message.error("访问服务器失败!");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ nameFormatter(val) {
|
|
|
+ if (val.Name == "BW-ECG-01") {
|
|
|
+ return "心电";
|
|
|
+ } else {
|
|
|
+ return "脑电";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ openTableFun() {
|
|
|
+ this.tableVisible = true;
|
|
|
+ //调用扫描接口
|
|
|
+ this.queryScan();
|
|
|
+ },
|
|
|
+ //扫描设备
|
|
|
+ queryScan() {
|
|
|
+ let that = this;
|
|
|
+ that.$http.postTmp(`/v1/device/scan`, {}, (res) => {
|
|
|
+ console.log(res);
|
|
|
+ if (res.code == 200) {
|
|
|
+ that.scanData = res.data;
|
|
|
+ // that.totolSize = res.data.totalElements;
|
|
|
+ } else {
|
|
|
+ this.$message.error("访问服务器失败!");
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //进来后先连接websocket
|
|
|
+ //连上后进行扫描
|
|
|
+ //扫描以后出现列表
|
|
|
+ //列表出现后点击连接并打开数据如果有数据才算成功
|
|
|
+
|
|
|
+ //初始化websocket
|
|
|
+ initWebsocket() {
|
|
|
+ const wsuri = "ws://127.0.0.1:8000/ws?uid=client&to_uid=server";
|
|
|
+ this.websock = new WebSocket(wsuri);
|
|
|
+ this.websock.onmessage = this.websocketonmessage;
|
|
|
+ this.websock.onopen = this.websocketonopen;
|
|
|
+ this.websock.onerror = this.websocketonerror;
|
|
|
+ this.websock.onclose = this.websocketclose;
|
|
|
+ },
|
|
|
+ websocketonopen() {
|
|
|
+ //连接建立之后执行send方法发送数据
|
|
|
+ let actions = { test: "12345" };
|
|
|
+ this.websocketsend(JSON.stringify(actions));
|
|
|
+ },
|
|
|
+ websocketonerror() {
|
|
|
+ //连接建立失败重连
|
|
|
+ this.initWebSocket();
|
|
|
+ },
|
|
|
+ websocketsend(Data) {
|
|
|
+ //数据发送
|
|
|
+ this.websock.send(Data);
|
|
|
+ },
|
|
|
+ websocketonmessage(e) {
|
|
|
+ //数据接收
|
|
|
+ const redata = JSON.parse(e.data);
|
|
|
+ // console.log(redata);
|
|
|
+ if (redata.content != "Successful connection to socket service") {
|
|
|
+ //判断设备类型是device还是data
|
|
|
+ if (redata.msgType == "device") {
|
|
|
+ let dataLin = JSON.parse(redata.content);
|
|
|
+ let list = [];
|
|
|
+ for (var key in dataLin) {
|
|
|
+ list.push(dataLin[key]);
|
|
|
+ }
|
|
|
+ this.scanData = list;
|
|
|
+ } else {
|
|
|
+ let dataLin = JSON.parse(redata.content);
|
|
|
+
|
|
|
+ ipcRenderer.send("asynchronoushrv-naoData", dataLin.value);
|
|
|
+ // if(){
|
|
|
+
|
|
|
+ // }
|
|
|
+ }
|
|
|
+
|
|
|
+ // console.log(this.scanData);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ websocketclose(e) {
|
|
|
+ if (e.code == 1005) {
|
|
|
+ this.initWebsocket();
|
|
|
+ } else {
|
|
|
+ console.log("断开连接", e);
|
|
|
+ }
|
|
|
+ },
|
|
|
//保存文件
|
|
|
saveFileGame(val) {
|
|
|
fs.appendFile("D:\\pulseGame.txt", val + "@", (err) => {
|
|
@@ -683,7 +926,7 @@ export default {
|
|
|
break;
|
|
|
default:
|
|
|
// this.urlThreeP = "../../../static/candle/index.html";
|
|
|
- this.urlThreeP = __static + "/candle/index.html";
|
|
|
+ this.urlThreeP = __static + "/candle/index.html";
|
|
|
}
|
|
|
this.gameScene = val;
|
|
|
this.flag = this.gameScene;
|
|
@@ -698,6 +941,574 @@ export default {
|
|
|
goBack() {
|
|
|
this.$router.go(-1);
|
|
|
},
|
|
|
+ renderEegOne() {
|
|
|
+ let sarr = [];
|
|
|
+ // 当全量小于等于10时 显示1-10
|
|
|
+ if (this.focusNaoAll.length <= 10) {
|
|
|
+ for (let i = 0; i <= 10; i++) {
|
|
|
+ // i = i.toFixed(3);
|
|
|
+ sarr.push(i.toString());
|
|
|
+ }
|
|
|
+ } else if (this.focusNaoAll.length > 10) {
|
|
|
+ for (
|
|
|
+ let i = this.focusNaoAll.length - 10;
|
|
|
+ i < this.focusNaoAll.length;
|
|
|
+ i++
|
|
|
+ ) {
|
|
|
+ sarr.push(i.toString());
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.optionOne = {
|
|
|
+ animation: false,
|
|
|
+ title: {
|
|
|
+ text: "频谱成分",
|
|
|
+ subtext: "",
|
|
|
+ left: "center",
|
|
|
+ align: "right",
|
|
|
+ x: "center",
|
|
|
+ y: "bottom",
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ bottom: 80,
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: [
|
|
|
+ "Delta",
|
|
|
+ "Theta",
|
|
|
+ "Low Alpha",
|
|
|
+ "High Alpha",
|
|
|
+ "Low Beta",
|
|
|
+ "High Beta",
|
|
|
+ "Low Gamma",
|
|
|
+ "Mid Gamma",
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ name: "秒(s)",
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLine: { onZero: false },
|
|
|
+ splitLine: { show: true },
|
|
|
+ data: sarr,
|
|
|
+ axisLabel: {
|
|
|
+ // interval: 999,
|
|
|
+ formatter: function (value, index) {
|
|
|
+ let a = parseInt(value);
|
|
|
+ if (a % 1000 == 0) {
|
|
|
+ if ((a / 1000) % 2 == 0) {
|
|
|
+ return a / 1000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return value;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ type: "value",
|
|
|
+ // max: 500,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: false,
|
|
|
+ name: "Delta",
|
|
|
+ type: "line",
|
|
|
+
|
|
|
+ areaStyle: {},
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ markArea: {
|
|
|
+ silent: true,
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 0.3,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ xAxis: "2009/9/10\n7:00",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ xAxis: "2009/9/20\n7:00",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ data: this.deltaData,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: false,
|
|
|
+ name: "Theta",
|
|
|
+ type: "line",
|
|
|
+
|
|
|
+ areaStyle: {},
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ markArea: {
|
|
|
+ silent: true,
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 0.3,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ xAxis: "2009/9/10\n7:00",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ xAxis: "2009/9/20\n7:00",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ data: this.thetaData,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: false,
|
|
|
+ name: "Low Alpha",
|
|
|
+ type: "line",
|
|
|
+
|
|
|
+ areaStyle: {},
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ markArea: {
|
|
|
+ silent: true,
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 0.3,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ xAxis: "2009/9/10\n7:00",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ xAxis: "2009/9/20\n7:00",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ data: this.lowAlphaData,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: false,
|
|
|
+ name: "High Alpha",
|
|
|
+ type: "line",
|
|
|
+
|
|
|
+ areaStyle: {},
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ markArea: {
|
|
|
+ silent: true,
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 0.3,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ xAxis: "2009/9/10\n7:00",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ xAxis: "2009/9/20\n7:00",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ data: this.highAlphaData,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: false,
|
|
|
+ name: "Low Beta",
|
|
|
+ type: "line",
|
|
|
+
|
|
|
+ areaStyle: {},
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ markArea: {
|
|
|
+ silent: true,
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 0.3,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ xAxis: "2009/9/10\n7:00",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ xAxis: "2009/9/20\n7:00",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ data: this.lowBetaData,
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: false,
|
|
|
+ name: "High Beta",
|
|
|
+ type: "line",
|
|
|
+
|
|
|
+ areaStyle: {},
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ markArea: {
|
|
|
+ silent: true,
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 0.3,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ xAxis: "2009/9/10\n7:00",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ xAxis: "2009/9/20\n7:00",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ data: this.highBetaData,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: false,
|
|
|
+ name: "Low Gamma",
|
|
|
+ type: "line",
|
|
|
+
|
|
|
+ areaStyle: {},
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ markArea: {
|
|
|
+ silent: true,
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 0.3,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ xAxis: "2009/9/10\n7:00",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ xAxis: "2009/9/20\n7:00",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ data: this.lowGammaData,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: false,
|
|
|
+ name: "Mid Gamma",
|
|
|
+ type: "line",
|
|
|
+
|
|
|
+ areaStyle: {},
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ markArea: {
|
|
|
+ silent: true,
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 0.3,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ xAxis: "2009/9/10\n7:00",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ xAxis: "2009/9/20\n7:00",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ data: this.midGammaData,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ this.echartsOne.setOption(this.optionOne);
|
|
|
+ },
|
|
|
+ renderEegTwo() {
|
|
|
+ let sarr = [];
|
|
|
+ // 当全量小于等于10时 显示1-10
|
|
|
+ if (this.focusNaoAll.length <= 10) {
|
|
|
+ for (let i = 0; i <= 10; i++) {
|
|
|
+ // i = i.toFixed(3);
|
|
|
+ sarr.push(i.toString());
|
|
|
+ }
|
|
|
+ } else if (this.focusNaoAll.length > 10) {
|
|
|
+ for (
|
|
|
+ let i = this.focusNaoAll.length - 10;
|
|
|
+ i < this.focusNaoAll.length;
|
|
|
+ i++
|
|
|
+ ) {
|
|
|
+ sarr.push(i.toString());
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.optionTwo = {
|
|
|
+ animation: false,
|
|
|
+ title: {
|
|
|
+ text: "注意力指标",
|
|
|
+ subtext: "",
|
|
|
+ left: "center",
|
|
|
+ align: "right",
|
|
|
+ x: "center",
|
|
|
+ y: "bottom",
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ bottom: 80,
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ["Noise", "Attention", "Medition"],
|
|
|
+ // left: 10,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ name: "秒(s)",
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLine: { onZero: false },
|
|
|
+ splitLine: { show: true },
|
|
|
+ data: sarr,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ name: "秒(s)",
|
|
|
+ type: "value",
|
|
|
+ // max: 500,
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // name: "秒(s)",
|
|
|
+ // nameLocation: "start",
|
|
|
+ // // max: 5,
|
|
|
+ // type: "value",
|
|
|
+ // inverse: false,
|
|
|
+ // },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: false,
|
|
|
+ name: "Noise",
|
|
|
+ type: "line",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ areaStyle: {},
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ markArea: {
|
|
|
+ silent: true,
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 0.3,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ xAxis: "2009/9/10\n7:00",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ xAxis: "2009/9/20\n7:00",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ data: this.noiseData,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: false,
|
|
|
+ name: "Attention",
|
|
|
+ type: "line",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ areaStyle: {},
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ markArea: {
|
|
|
+ silent: true,
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 0.3,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ xAxis: "2009/9/10\n7:00",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ xAxis: "2009/9/20\n7:00",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ data: this.attentionData,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: false,
|
|
|
+ name: "Medition",
|
|
|
+ type: "line",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ areaStyle: {},
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ markArea: {
|
|
|
+ silent: true,
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 0.3,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ [
|
|
|
+ {
|
|
|
+ xAxis: "2009/9/10\n7:00",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ xAxis: "2009/9/20\n7:00",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ data: this.meditationData,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ this.echartsTwo.setOption(this.optionTwo);
|
|
|
+ },
|
|
|
+ renderEegThree() {
|
|
|
+ let sarr = [];
|
|
|
+ // 当全量小于等于10时 显示1-10
|
|
|
+ if (this.waveDataAll.length <= 5120) {
|
|
|
+ for (let i = 0; i <= 5120; i++) {
|
|
|
+ // i = i.toFixed(3);
|
|
|
+ sarr.push(i.toString());
|
|
|
+ }
|
|
|
+ } else if (this.waveDataAll.length > 5120) {
|
|
|
+ for (
|
|
|
+ let i = this.waveDataAll.length - 5120;
|
|
|
+ i < this.waveDataAll.length;
|
|
|
+ i++
|
|
|
+ ) {
|
|
|
+ sarr.push(i.toString());
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.optionThree = {
|
|
|
+ animation: false,
|
|
|
+ title: {
|
|
|
+ text: "原始信号",
|
|
|
+ subtext: "",
|
|
|
+ left: "center",
|
|
|
+ align: "right",
|
|
|
+ x: "center",
|
|
|
+ y: "bottom",
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ bottom: 80,
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ["RAW Wave"],
|
|
|
+ // left: 10,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ name: "秒(s)",
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLine: { onZero: false },
|
|
|
+ splitLine: { show: true },
|
|
|
+ data: sarr,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 512,
|
|
|
+ formatter: function (value, index) {
|
|
|
+ // 当当前value除以1000为整数是
|
|
|
+ // console.log(value);
|
|
|
+ // 将value转化为int类型
|
|
|
+ let a = parseInt(value);
|
|
|
+ a = Math.round(a / 512);
|
|
|
+ // if (a %510 == 0) {
|
|
|
+ // // if ((a / 1000) % 2 == 0) {
|
|
|
+ // // return a / 1000;
|
|
|
+ // // }
|
|
|
+ // return a / 1000;
|
|
|
+ // }
|
|
|
+ return a;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ type: "value",
|
|
|
+ // max: 500,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ smooth: true,
|
|
|
+ showSymbol: false,
|
|
|
+
|
|
|
+ name: "RAW Wave",
|
|
|
+ type: "line",
|
|
|
+
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ data: this.waveData,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ this.echartsThree.setOption(this.optionThree);
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -765,4 +1576,9 @@ canvas {
|
|
|
flex-direction: row;
|
|
|
flex: 1;
|
|
|
}
|
|
|
+.naoOneClass {
|
|
|
+ width: 100%;
|
|
|
+ height: 30vh;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
</style>
|