|
|
@@ -18,6 +18,16 @@
|
|
|
</template>
|
|
|
</dropdown>
|
|
|
</div>
|
|
|
+ <div class="ordinary-map-hidden" id="ordinary-map-hidden">
|
|
|
+ <div class="square-count">
|
|
|
+ <status-bar :ready="readyCount" :occupied="occupiedCount" :offline="offlineCount"></status-bar>
|
|
|
+ </div>
|
|
|
+ <div class="bench-list">
|
|
|
+ <div class="bench-list-buttons" @click="clickBenchList()">
|
|
|
+ My Bench List
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="ordinary-map-hidden" id="ordinary-map-hidden">
|
|
|
<div class="ordinary-map-blocker" id="ordinary-map-blocker">
|
|
|
<Transition name="slide">
|
|
|
@@ -33,11 +43,14 @@
|
|
|
:key="key"
|
|
|
class="bmMapItem el-icon-location"
|
|
|
:style="{
|
|
|
- left: item.left - 24 + 'px',
|
|
|
- top: item.top - 25 + 'px',
|
|
|
+ left: item.left - 23 + 'px',
|
|
|
+ top: item.top - 140 + 'px',
|
|
|
+ scale: item.scale,
|
|
|
}"
|
|
|
:class="item.status"
|
|
|
@click="bmMapItemSelect(key)"
|
|
|
+ @mouseover="bmMapItemSelect(key)"
|
|
|
+ @mouseleave="bmMapItemUnSelect()"
|
|
|
>
|
|
|
<Transition v-if="item.selected">
|
|
|
<template>
|
|
|
@@ -158,11 +171,12 @@
|
|
|
<img :src="mainSnapshot" />
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="ordinary-list">
|
|
|
- <TabList :tabs="tabs" :itemRender="itemRender" :tabClass="tabClass"></TabList>
|
|
|
+ <TabList :tabs="tabs" :itemRender="itemRender" v-if="renderBenchList" :tabClass="tabClass"></TabList>
|
|
|
</div>
|
|
|
|
|
|
<bench-detail :is-detail-visible="isDetailVisible" :is-remote-btn-visible="isRemoteBtnVisible" :closeDetail="closeDetail" ref="benchdetail" :bench="currentBench"/>
|
|
|
@@ -176,12 +190,17 @@
|
|
|
import Dropdown from './components/DropDown';
|
|
|
import TableComponent from './components/TableComponent';
|
|
|
import BenchDetail from '../../components/BenchDetail'
|
|
|
+ import StatusBar from '../../components/StatusBar';
|
|
|
//import { benchList } from './api'
|
|
|
import THREE from 'three'
|
|
|
import {uwbMain} from '../../uwb-sample'
|
|
|
import { mapState } from "vuex"
|
|
|
+
|
|
|
+ import webSocket from "../../service/ws";
|
|
|
+
|
|
|
+ const ws = new webSocket();
|
|
|
export default {
|
|
|
- components: {TabList, SearchBar, Dropdown,TableComponent,BenchDetail},
|
|
|
+ components: {StatusBar, TabList, SearchBar, Dropdown,TableComponent,BenchDetail},
|
|
|
data() {
|
|
|
return {
|
|
|
inputValue: '',
|
|
|
@@ -191,6 +210,13 @@
|
|
|
benchDisplayVisible: false,
|
|
|
mainSnapshot: "",
|
|
|
currentBench: {},
|
|
|
+ readyCount: 10,
|
|
|
+ occupiedCount: 5,
|
|
|
+ offlineCount: 3,
|
|
|
+ previousSelectedBenchList: [],
|
|
|
+ selectedBenchList: [],
|
|
|
+ renderBenchList: true,
|
|
|
+ filters: [],
|
|
|
tabs: [
|
|
|
{
|
|
|
title: 'Bench',
|
|
|
@@ -277,18 +303,22 @@
|
|
|
})
|
|
|
},
|
|
|
created() {
|
|
|
- console.log("zmgA10");
|
|
|
+ ws.open().then((res) => {
|
|
|
+ // console.log("res", res);
|
|
|
+ });
|
|
|
window.handleListClick = this.handleListClick;
|
|
|
+ window.handleListDbClick = this.handleListDbClick;
|
|
|
window.showBenchPos = this.showBenchPos;
|
|
|
let that = this;
|
|
|
window.bmMapItemSelect = this.bmMapItemSelect.bind(this);
|
|
|
+ window.bmMapItemUnSelect = this.bmMapItemUnSelect.bind(this);
|
|
|
+ window.selectBench = this.selectBench.bind(this);
|
|
|
that.$store.dispatch('benchList/fetchBenchList');
|
|
|
//setInterval(() => {
|
|
|
// that.$store.dispatch('benchList/fetchBenchList');
|
|
|
//}, 1500)
|
|
|
},
|
|
|
async mounted() {
|
|
|
- console.log("zmgA10");
|
|
|
let mapDom = document.getElementsByClassName('ordinary-map')[0]
|
|
|
let style = getComputedStyle(mapDom);
|
|
|
let width = parseFloat(style.width);
|
|
|
@@ -297,8 +327,48 @@
|
|
|
//this.getBenchList();
|
|
|
console.log(this.benchList, 'benchList')
|
|
|
this.tabs[0].list = this.benchList;
|
|
|
+ setTimeout(()=>
|
|
|
+ {
|
|
|
+ var readyCount = 0;
|
|
|
+ var occupiedCount = 0;
|
|
|
+ var offlineCount = 0;
|
|
|
+ console.log("this.benchList", this.benchList.length)
|
|
|
+ this.benchList.forEach(element =>
|
|
|
+ {
|
|
|
+ //console.log('element',element);
|
|
|
+ if(element.status == "ready")
|
|
|
+ {
|
|
|
+ readyCount++;
|
|
|
+ }
|
|
|
+ else if(element.status == "error")
|
|
|
+ {
|
|
|
+ offlineCount++;
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ occupiedCount++;
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ this.readyCount=readyCount;
|
|
|
+ this.offlineCount=offlineCount;
|
|
|
+ this.occupiedCount=occupiedCount;
|
|
|
+ },3000)
|
|
|
},
|
|
|
methods: {
|
|
|
+ bmMapItemUnSelect() {
|
|
|
+ let items = document.getElementsByClassName('item-box');
|
|
|
+ for(var index = 0; index<items.length;index++)
|
|
|
+ {
|
|
|
+ items[index].style.background = "#00000032"
|
|
|
+ let title = items[index].getElementsByClassName('item-title');
|
|
|
+ console.log('textContent',title[0].textContent)
|
|
|
+ let itemOther = this.benchList.find(b => parseInt(b.id) == parseInt(title[0].textContent));
|
|
|
+ itemOther.selected = false;
|
|
|
+ itemOther.scale = 1;
|
|
|
+ }
|
|
|
+ },
|
|
|
bmMapItemSelect(key) {
|
|
|
let self = this;
|
|
|
if (this.previousSelectedBenchList.length) {
|
|
|
@@ -359,7 +429,40 @@
|
|
|
//this.isDetailVisible = true;
|
|
|
this.$nextTick(() => {
|
|
|
//this.$refs.benchdetail.init(benchId);
|
|
|
+ //this.benchList.forEach(element =>
|
|
|
+ //{
|
|
|
+ // element.style = "{background: rgba(0, 0, 0, 1)}"
|
|
|
+ //});
|
|
|
+ let items = document.getElementsByClassName('item-box');
|
|
|
+ for(var index = 0; index<items.length;index++)
|
|
|
+ {
|
|
|
+ items[index].style.background = "#00000032"
|
|
|
+ let title = items[index].getElementsByClassName('item-title');
|
|
|
+ console.log('textContent',title[0].textContent)
|
|
|
+ let itemOther = this.benchList.find(b => parseInt(b.id) == parseInt(title[0].textContent));
|
|
|
+ itemOther.selected = false;
|
|
|
+ itemOther.scale = 1;
|
|
|
+ if(parseInt(benchId) == parseInt(title[0].textContent))
|
|
|
+ {
|
|
|
+ items[index].style.background = "#000000C0"
|
|
|
+ this.currentBench = this.benchList.find(b => b.id == benchId);
|
|
|
+ this.currentBench.selected = true;
|
|
|
+ this.currentBench.scale = 1.5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleListDbClick(benchId) {
|
|
|
+ //this.currentBench = this.benchList.find(b => b.id == benchId);
|
|
|
+ //this.isDetailVisible = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ //this.$refs.benchdetail.init(benchId);
|
|
|
+ //this.benchList.forEach(element =>
|
|
|
+ //{
|
|
|
+ // element.style = "{background: rgba(0, 0, 0, 1)}"
|
|
|
+ //});
|
|
|
this.currentBench = this.benchList.find(b => b.id == benchId);
|
|
|
+ //this.currentBench.style = "{background: rgba(0, 0, 0, 1)}"
|
|
|
console.log('current bench',this.currentBench)
|
|
|
this.isRemoteBtnVisible = true;
|
|
|
this.isDetailVisible = true;
|
|
|
@@ -369,19 +472,46 @@
|
|
|
console.log('benchList',benchList);
|
|
|
for (var item of benchList) {
|
|
|
var currentBench = this.benchList.find(b => b.id == item.benchId);
|
|
|
- console.log('currentBench',currentBench);
|
|
|
- currentBench.left = item.x;
|
|
|
- currentBench.top = item.y;
|
|
|
+ if(currentBench)
|
|
|
+ {
|
|
|
+ //console.log('currentBench',currentBench);
|
|
|
+ currentBench.left = item.x;
|
|
|
+ currentBench.top = item.y;
|
|
|
+ currentBench.benchId = item.benchId;
|
|
|
+ currentBench.benchType = item.benchType;
|
|
|
+ if(currentBench.benchType == 2)
|
|
|
+ {
|
|
|
+ currentBench.image = require('../../assets/mechine2.png');
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ currentBench.image = require('../../assets/mechine.png');
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+ this.renderBenchList = false;
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.renderBenchList = true;
|
|
|
+ },10)
|
|
|
+
|
|
|
},
|
|
|
itemRender(item) {
|
|
|
- item.image = require('../../assets/mechine.png')
|
|
|
+ if(item.benchType == 2)
|
|
|
+ {
|
|
|
+ item.image = require('../../assets/mechine2.png');
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ item.image = require('../../assets/mechine.png');
|
|
|
+ }
|
|
|
return `
|
|
|
- <div onDblClick="handleListClick(${item.id})" class="item-box">
|
|
|
+ <div onDblClick="handleListDbClick(${item.id})" onClick="handleListClick(${item.id})" class="item-box">
|
|
|
<div class="item-image"><img src="${item.image}" alt="${item.title}"></div>
|
|
|
<div class="item-right">
|
|
|
<div class="item-text">
|
|
|
- <div class="item-title">${item.id}</div>
|
|
|
+ <div class="item-title">${item.id}
|
|
|
+ <span onClick="selectBench(${item.id})" class="el-icon-s-platform ${item.status}"></span>
|
|
|
+ </div>
|
|
|
<div class="item-description">${item.name}</div>
|
|
|
<div class="item-tag">
|
|
|
<div class="tag">${item.Cluster}</div>
|
|
|
@@ -398,6 +528,10 @@
|
|
|
rowClassName() {
|
|
|
return 'row-class';
|
|
|
},
|
|
|
+ clickBenchList()
|
|
|
+ {
|
|
|
+ window.location.href = '/squarePage?m=8b934420_ZJUb_b6f9';
|
|
|
+ },
|
|
|
//async getBenchList() {
|
|
|
// const res = await benchList();
|
|
|
// const data = res?.data?.data;
|
|
|
@@ -413,6 +547,217 @@
|
|
|
// }});
|
|
|
// console.log(JSON.parse(data[0].groups))
|
|
|
//},
|
|
|
+ bmMapItemSelect(key) {
|
|
|
+ let self = this;
|
|
|
+ if (this.previousSelectedBenchList.length) {
|
|
|
+ this.selectedBenchList = JSON.parse(
|
|
|
+ JSON.stringify(this.previousSelectedBenchList)
|
|
|
+ );
|
|
|
+ }
|
|
|
+ this.previousSelectedBenchList = [];
|
|
|
+ this.platform = null;
|
|
|
+ this.benchList.forEach(b => b.selected = false)
|
|
|
+ this.benchList[key].selected = !this.benchList[key].selected;
|
|
|
+ if (this.benchList[key].selected) {
|
|
|
+ this.currentBench = this.benchList[key];
|
|
|
+ this.selectedBenchList.push(this.benchList[key]);
|
|
|
+ // this.images = this.selectedBenchList.map((s) => {
|
|
|
+ // return {
|
|
|
+ // url: "",
|
|
|
+ // alt: s.name,
|
|
|
+ // };
|
|
|
+ // });
|
|
|
+ } else {
|
|
|
+ for (let i in this.selectedBenchList) {
|
|
|
+ if (this.selectedBenchList[i].id == this.benchList[key].id) {
|
|
|
+ this.selectedBenchList.splice(i, 1);
|
|
|
+ // this.images = this.selectedBenchList.map((s) => {
|
|
|
+ // return {
|
|
|
+ // url: "",
|
|
|
+ // alt: s.name,
|
|
|
+ // };
|
|
|
+ // });
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.selectedBenchList.length == 0) {
|
|
|
+ nextTick(() => {
|
|
|
+ self.initBmInfoNsChart();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectBench(benchId) {
|
|
|
+ window.location.href = '/originPage?m=8b934420_ZJUb_b6f9&benchid='+benchId;
|
|
|
+ return;
|
|
|
+ },
|
|
|
+ setSendAudioBus(benchId) {
|
|
|
+ let self = this;
|
|
|
+ bus.on("sendAudio" + benchId, (data) => {
|
|
|
+ self.sendAudioTransformCode(data.data, true);
|
|
|
+ this.loopSendAudioTime++;
|
|
|
+
|
|
|
+ this.sendAudioTimer = setTimeout(() => {
|
|
|
+ this.loopSendAudioTime = 5;
|
|
|
+ self.sendAudioTransformCode("", false);
|
|
|
+ }, 500);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ sendAudioTransformCode(data, fill) {
|
|
|
+ let dataU8 = [];
|
|
|
+ let dataF32 = [];
|
|
|
+ let arr = [];
|
|
|
+ let self = this;
|
|
|
+ this.sendAudioString += data;
|
|
|
+ if (this.loopSendAudioTime > 4) {
|
|
|
+ arr = this.sendAudioString.split("");
|
|
|
+ for (let i = 0; i < arr.length; i++) {
|
|
|
+ dataU8[i] = arr[i].charCodeAt();
|
|
|
+ }
|
|
|
+ dataU8 = new Uint8Array(dataU8);
|
|
|
+ dataF32 = new Float32Array(dataU8.buffer);
|
|
|
+ if (!fill) {
|
|
|
+ // console.log("dataF32-", dataF32);
|
|
|
+ let newDataF32 = new Float32Array(5120);
|
|
|
+ for (let i = 0; i < 5120; i++) {
|
|
|
+ if (i < dataF32.length) {
|
|
|
+ newDataF32[i] = dataF32[i];
|
|
|
+ } else {
|
|
|
+ newDataF32[i] = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ dataF32 = newDataF32;
|
|
|
+ // console.log("dataF32+", dataF32);
|
|
|
+ }
|
|
|
+ self.pcPlayAudio(dataF32, 1, 8000);
|
|
|
+
|
|
|
+ this.sendAudioString = "";
|
|
|
+ this.loopSendAudioTime = 0;
|
|
|
+ }
|
|
|
+ if (fill) {
|
|
|
+ clearTimeout(this.sendAudioTimer);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ pcPlayAudio(data, channels, sampleRate) {
|
|
|
+ let self = this;
|
|
|
+ var audioCtx = new (window.AudioContext || window.webkitAudioContext)({
|
|
|
+ sampleRate: sampleRate,
|
|
|
+ });
|
|
|
+
|
|
|
+ var myArrayBuffer = audioCtx.createBuffer(
|
|
|
+ channels,
|
|
|
+ data.length,
|
|
|
+ sampleRate
|
|
|
+ );
|
|
|
+
|
|
|
+ for (let channel = 0; channel < channels; channel++) {
|
|
|
+ var nowBuffering = myArrayBuffer.getChannelData(channel);
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ if (i < data.length) {
|
|
|
+ nowBuffering[i] = data[i];
|
|
|
+ } else {
|
|
|
+ nowBuffering[i] = 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // console.log("audioCtx", audioCtx);
|
|
|
+ // console.log("nowBuffering", nowBuffering);
|
|
|
+
|
|
|
+ var source = audioCtx.createBufferSource();
|
|
|
+ source.buffer = myArrayBuffer;
|
|
|
+ source.connect(audioCtx.destination);
|
|
|
+ source.start();
|
|
|
+ },
|
|
|
+
|
|
|
+ pressPtt() {
|
|
|
+ let self = this;
|
|
|
+ ws.press_ptt({
|
|
|
+ benchId: this.selectedBenchList[0].benchId,
|
|
|
+ }).then(
|
|
|
+ (res) => {},
|
|
|
+ (rej) => {}
|
|
|
+ );
|
|
|
+ },
|
|
|
+ getBenchImage(benchId, screenType, func) {
|
|
|
+ let self = this;
|
|
|
+ setTimeout(() => {
|
|
|
+ ws.getImage(String(benchId), screenType).then((res) => {
|
|
|
+ // console.log("getImageRes", res);
|
|
|
+ func();
|
|
|
+ // let screen = screenType == 1 ? "upper" : "lower";
|
|
|
+ if (screenType == 1) {
|
|
|
+ self.benchImgUpper = "data:image/png;base64," + res.data.data;
|
|
|
+ } else {
|
|
|
+ self.benchImgLower = "data:image/png;base64," + res.data.data;
|
|
|
+ }
|
|
|
+ // let screen = res.data.screen_type;
|
|
|
+ if (benchId == this.connetedBenchId) {
|
|
|
+ self.getBenchImage(benchId, screenType, func);
|
|
|
+ this.$store.dispatch('benchList/setBenchImgList', {benchId, img: res.data.data});
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
+ bmMapItemActivate() {
|
|
|
+
|
|
|
+ let self = this;
|
|
|
+ if (this.selectedBenchList.length == 0) {
|
|
|
+ this.$message({
|
|
|
+ message: "Please select a bench to activate.",
|
|
|
+ // message: "",
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.selectedBenchList = [this.selectedBenchList[0]];
|
|
|
+ console.log("selectedBenchList[0]", this.selectedBenchList);
|
|
|
+ let key = 0;
|
|
|
+ for (let i in this.benchList) {
|
|
|
+ this.benchList[i].selected = false;
|
|
|
+ }
|
|
|
+ for (let i in this.benchList) {
|
|
|
+ if (this.benchList[i].id == this.selectedBenchList[0].id) {
|
|
|
+ this.benchList[i].selected = true;
|
|
|
+ key = i;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.benchList[key].acitveAnimation = true;
|
|
|
+ let benchId = this.benchList[key].benchId;
|
|
|
+ let screenType = "1" || this.benchList[key].screenType;
|
|
|
+ this.connetedBenchId = benchId;
|
|
|
+ setTimeout(() => {
|
|
|
+ console.log('connect bench',benchId);
|
|
|
+ ws.connectBench({ bench_id: String(benchId) })
|
|
|
+ .then((res) => {
|
|
|
+ console.log('connect bench success');
|
|
|
+ self.getBenchImage(benchId, 1, () => {
|
|
|
+ if (this.benchList[key].acitveAnimation) {
|
|
|
+ this.benchList[key].acitveAnimation = false;
|
|
|
+ this.benchDisplayVisible = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (screenType == "duo") {
|
|
|
+ self.getBenchImage(String(benchId), 2, () => {
|
|
|
+ this.benchDisplayLowerVisible = true;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.benchDisplayLowerVisible = false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log('connect bench failed');
|
|
|
+ this.benchList[key].acitveAnimation = false;
|
|
|
+ this.$message({
|
|
|
+ message: "This bench is offline",
|
|
|
+ // message: "",
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }, 300);
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
