|
|
@@ -10,7 +10,13 @@
|
|
|
<div class="square-map">
|
|
|
<el-row >
|
|
|
<el-col v-for="item in images" :key="item" :span="8">
|
|
|
- <div class="grid-item"><img :src="item.url" /></div>
|
|
|
+
|
|
|
+ <div class="grid-item">
|
|
|
+ <img :src="item.url" @click="handleClickImg(item.alt)" />
|
|
|
+ </div>
|
|
|
+ <div class="grid-item-close">
|
|
|
+ <img src="../../images/closeremotebench.png" @click="handleCloseImg(item.alt)"/>
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
@@ -20,7 +26,7 @@
|
|
|
<status-bar :ready="readyCount" :occupied="occupiedCount" :offline="offlineCount"></status-bar>
|
|
|
</div>
|
|
|
<div class="square-list">
|
|
|
- <TabList :tabs="tabs" :itemRender="itemRender" size="small"></TabList>
|
|
|
+ <TabList :tabs="tabs" :itemRender="itemRender" :tabClass="tabClass"></TabList>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -33,6 +39,21 @@
|
|
|
import TabList from '../../components/TabList';
|
|
|
import SearchBar from '../../components/SearchBar'
|
|
|
import {mapState} from 'vuex'
|
|
|
+ import webSocket from "../../service/ws";
|
|
|
+
|
|
|
+ const ws = new webSocket();
|
|
|
+ let wsArray = [];
|
|
|
+ let wsArrayLength = 0;
|
|
|
+ for(var iR = 0; iR < 20; iR++)
|
|
|
+ {
|
|
|
+ const wsRemote = new webSocket();
|
|
|
+
|
|
|
+ wsRemote.open().then((res) => {
|
|
|
+ // console.log("res", res);
|
|
|
+ });
|
|
|
+ wsArray.push(wsRemote);
|
|
|
+ }
|
|
|
+
|
|
|
export default {
|
|
|
components: {StatusBar, TabList, SearchBar},
|
|
|
data() {
|
|
|
@@ -43,6 +64,8 @@
|
|
|
readyCount: 10,
|
|
|
occupiedCount: 5,
|
|
|
offlineCount: 3,
|
|
|
+ previousSelectedBenchList: [],
|
|
|
+ selectedBenchList: [],
|
|
|
tabs: [
|
|
|
{
|
|
|
title: 'Bench',
|
|
|
@@ -114,24 +137,266 @@
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
+ tabClass(){
|
|
|
+ return 'square';
|
|
|
+ },
|
|
|
...mapState({
|
|
|
images: state => state.benchList.benchImgList
|
|
|
+ }),
|
|
|
+ ...mapState({
|
|
|
+ benchList: state => {
|
|
|
+ return state.benchList.benchList;
|
|
|
+ }
|
|
|
})
|
|
|
},
|
|
|
+ created() {
|
|
|
+ ws.open().then((res) => {
|
|
|
+ // console.log("res", res);
|
|
|
+ });
|
|
|
+ window.handleListClick = this.handleListClick;
|
|
|
+ window.handleListDbClick = this.handleListDbClick;
|
|
|
+ window.handleClickImg = this.handleClickImg;
|
|
|
+ window.selectBench = this.selectBench.bind(this);
|
|
|
+ let that = this;
|
|
|
+ that.$store.dispatch('benchList/fetchBenchList');
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ 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;
|
|
|
+ let self = this;
|
|
|
+
|
|
|
+ var strRemoteBenchList = window.localStorage.getItem('remoteBenchList');
|
|
|
+ var objRBL = JSON.parse(strRemoteBenchList);
|
|
|
+ if (objRBL) {
|
|
|
+ console.log('objRBL',objRBL);
|
|
|
+ wsArrayLength = objRBL.length;
|
|
|
+ for(var iW = 0; iW< objRBL.length;iW++)
|
|
|
+ {
|
|
|
+
|
|
|
+ var i = JSON.parse(JSON.stringify(iW));
|
|
|
+ let benchId = JSON.parse(JSON.stringify(objRBL[i]));
|
|
|
+ setTimeout(()=>{
|
|
|
+ console.log('connect bench',benchId);
|
|
|
+ wsArray[i].connectBench({ bench_id: String(benchId) })
|
|
|
+ .then((res) => {
|
|
|
+ console.log('connect bench success',benchId);
|
|
|
+ self.getBenchImage(benchId, 1, wsArray[i], () => {
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log('connect bench failed',benchId);
|
|
|
+ this.$message({
|
|
|
+ message: "This bench is offline",
|
|
|
+ // message: "",
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },iW*2000)
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },3000)
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ //itemRender(item) {
|
|
|
+ //return `
|
|
|
+ // <div class="item-box">
|
|
|
+ // <div class="item-title">${item.title}</div>
|
|
|
+ // <div class="item-tag">
|
|
|
+ // <div class="tag">3b</div>
|
|
|
+ // <div class="tag">CN</div>
|
|
|
+ // </div>
|
|
|
+ //</div>`;
|
|
|
+ //},
|
|
|
+
|
|
|
+ sleep(delay) {
|
|
|
+ var start = new Date().getTime();
|
|
|
+ while (new Date().getTime() - start < delay) {
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ selectBench(benchId) {
|
|
|
+ var i = JSON.parse(JSON.stringify(wsArrayLength));
|
|
|
+ let self = this;
|
|
|
+ wsArrayLength++;
|
|
|
+ setTimeout(()=>{
|
|
|
+ console.log('connect bench',benchId);
|
|
|
+ wsArray[i].connectBench({ bench_id: String(benchId) })
|
|
|
+ .then((res) => {
|
|
|
+ console.log('connect bench success',benchId);
|
|
|
+ self.getBenchImage(benchId, 1, wsArray[i], () => {
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.log('connect bench failed',benchId);
|
|
|
+ this.$message({
|
|
|
+ message: "This bench is offline",
|
|
|
+ // message: "",
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },200)
|
|
|
+ //let self = this;
|
|
|
+ //let bench = this.benchList.find(b => b.id == benchId);
|
|
|
+ //if (this.previousSelectedBenchList.length) {
|
|
|
+ // this.selectedBenchList = JSON.parse(
|
|
|
+ // JSON.stringify(this.previousSelectedBenchList)
|
|
|
+ // );
|
|
|
+ //}
|
|
|
+ //this.previousSelectedBenchList = [];
|
|
|
+ //this.platform = null;
|
|
|
+ //this.benchList.forEach(b => b.selected = false)
|
|
|
+ //bench.selected = !bench.selected;
|
|
|
+ //if (bench.selected) {
|
|
|
+ // this.currentBench = bench;
|
|
|
+ // this.selectedBenchList.push(bench);
|
|
|
+ // // this.images = this.selectedBenchList.map((s) => {
|
|
|
+ // // return {
|
|
|
+ // // url: "",
|
|
|
+ // // alt: s.name,
|
|
|
+ // // };
|
|
|
+ // // });
|
|
|
+ //} else {
|
|
|
+ // for (let i in this.selectedBenchList) {
|
|
|
+ // if (this.selectedBenchList[i].id == bench.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();
|
|
|
+ // });
|
|
|
+ //} else {
|
|
|
+ // self.bmMapItemActivate();
|
|
|
+ //}
|
|
|
+ },
|
|
|
itemRender(item) {
|
|
|
+ if(item.benchType == 2)
|
|
|
+ {
|
|
|
+ item.image = require('../../assets/mechine2.png');
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ item.image = require('../../assets/mechine.png');
|
|
|
+ }
|
|
|
return `
|
|
|
- <div class="item-box">
|
|
|
- <div class="item-title">${item.title}</div>
|
|
|
- <div class="item-tag">
|
|
|
- <div class="tag">3b</div>
|
|
|
- <div class="tag">CN</div>
|
|
|
+ <div onDblClick="handleListDbClick(${item.id},${item.itemtype})" onClick="handleListClick(${item.id},${item.itemtype})" 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}
|
|
|
+ <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>
|
|
|
+ <div class="tag">${item.Market}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>`;
|
|
|
+
|
|
|
},
|
|
|
rowClassName() {
|
|
|
return 'row-class';
|
|
|
},
|
|
|
+ onFocus() {
|
|
|
+ this.isOpen = true;
|
|
|
+ },
|
|
|
+ onInput(value) {
|
|
|
+ this.inputValue = value;
|
|
|
+ },
|
|
|
+ onClickOutside() {
|
|
|
+ },
|
|
|
+ handleListClick(benchId,itemtype) {
|
|
|
+ },
|
|
|
+ handleListDbClick(benchId,itemtype) {
|
|
|
+ },
|
|
|
+ getBenchImage(benchId, screenType, wsRemote, func) {
|
|
|
+ let self = this;
|
|
|
+ setTimeout(() => {
|
|
|
+ wsRemote.getImage(String(benchId), screenType).then((res) => {
|
|
|
+ console.log("getImageRes", res);
|
|
|
+ // 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;
|
|
|
+ //self.getBenchImage(benchId, screenType, wsRemote, func);
|
|
|
+ this.$store.dispatch('benchList/setBenchImgList', {benchId, img: res.data.data});
|
|
|
+ });
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
+ handleClickImg(benchId) {
|
|
|
+ window.location.href = '/originPage?m=8b934420_ZJUb_b6f9&benchid='+benchId;
|
|
|
+ },
|
|
|
+ handleCloseImg(benchId) {
|
|
|
+ var strRemoteBenchList = window.localStorage.getItem('remoteBenchList');
|
|
|
+ var objRBL = JSON.parse(strRemoteBenchList);
|
|
|
+ if (objRBL) {
|
|
|
+ for(var i = 0; i< objRBL.length;i++)
|
|
|
+ {
|
|
|
+ if(parseInt(objRBL[i]) == parseInt(benchId))
|
|
|
+ {
|
|
|
+ console.log('images',this.images)
|
|
|
+
|
|
|
+ for(var ii = 0; ii< this.images.length;ii++)
|
|
|
+ {
|
|
|
+ if(parseInt(this.images[ii].alt) == parseInt(benchId))
|
|
|
+ {
|
|
|
+ this.images.splice(ii,1);
|
|
|
+ console.log('images',this.images)
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //delete objRBL[i];
|
|
|
+ objRBL.splice(i,1);
|
|
|
+ console.log('objRBL',objRBL);
|
|
|
+ window.localStorage.setItem('remoteBenchList',JSON.stringify(objRBL));
|
|
|
+
|
|
|
+
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
