Skip to content

GitLab

C
CFET_WidgetUI
Commit 2ab139cb authored by XieXiaohan's avatar XieXiaohan
Browse files
Options

V2

parent fe15f2f2
Show whitespace changes
Inline Side-by-side
Showing with 767 additions and 111 deletions
src/App.vue
View file @ 2ab139cb
......@@ -38,7 +38,7 @@
<a class="navbar-item navpadding" @click="refactor"
>
Widget_layout
Widget layout
</a>
</div>
......@@ -151,6 +151,7 @@ import { indexOf } from "typescript-collections/dist/lib/arrays";
//when add more available widgets add ref to the widgets
import Status from "./components/Status/Status.vue";
import LabelStatus from "./components/Status/LabelStatus.vue";
import Navigation from "./components/Navigation/Navigation.vue";
import WaveView from "./components/WaveView/WaveView.vue";
import Method from "./components/Method/Method.vue";
......@@ -173,6 +174,7 @@ import Windows from "./components/Common/Windows.vue";
components: {
//when add more available widgets add ref to the widgets
Status,
LabelStatus,
WaveView,
Method,
Config,
......@@ -205,6 +207,7 @@ export default class App extends Vue {
schemas?:any[];
isShowDrag:boolean = false;
isShowRes : boolean = false;
fragment:string = "";
......@@ -212,6 +215,7 @@ export default class App extends Vue {
//when add more available widgets add its name here
availableWidgets = [
"Status",
"LabelStatus",
"Config",
"BoolConfig",
"WaveView",
......@@ -326,6 +330,7 @@ export default class App extends Vue {
if (fragment != "#blank" && fragment != "#Blank" && fragment != "#") {
fragment = fragment.substring(1, fragment.length);
var customViewURL = "/customView/template" + fragment;
console.log(customViewURL);
var isCustomview: boolean = false;
//axios之前出现过cache过多刷不出来的问题，所以本项目的axios都加上了禁止cache的头文件
axios
......@@ -351,7 +356,7 @@ export default class App extends Vue {
);
this.widgetList = widgets.widgetList;
this.lastWidgetIndex = Number(widgets.currentRef);
//this.$forceUpdate();
this.$forceUpdate();
//todo:替换startpath;判断是否存在$startpath$
......@@ -377,6 +382,7 @@ export default class App extends Vue {
// }
fragment = fragment.substring(1,fragment.length);
this.fragment = fragment;
console.log(fragment);
this.importActiveWidgetList(fragment);
});
......@@ -386,6 +392,7 @@ export default class App extends Vue {
this.dataAccess(dataURL);
}
}).catch(err=>{
alert(err);
var dataURL = fragment;
this.dataAccess(dataURL);
console.log(dataURL);
......@@ -406,6 +413,7 @@ export default class App extends Vue {
UpdateWidget(EditData:any) {
console.log(EditData);
this.$refs[EditData.edit.index][0].EditData = EditData;
console.log(EditData);
this.$refs[EditData.edit.index][0].pathPoke();
this.$refs[EditData.edit.index][0].viewLoad(EditData.params.Args);
}
......@@ -447,7 +455,7 @@ export default class App extends Vue {
this.$forceUpdate();
Vue.nextTick(() => {
// changed here
this.importActiveWidgetList();
this.importActiveWidgetList(this.fragment);
});
};
......@@ -514,14 +522,19 @@ export default class App extends Vue {
</script>
<style lang="scss">
<style lang="scss" >
// Import Bulma's core
// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";
@import "~bulma/sass/utilities/_all";
$info: red;
$colors: (
//$info: red;
/* $colors: (
"info": ($info, $info-invert),
);
);*/
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
......@@ -579,8 +592,4 @@ export default class App extends Vue {
// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";
</style>
src/Windows/WindowsApp.vue
View file @ 2ab139cb
......@@ -14,8 +14,7 @@
<tr class="is-selected is-fullwidth">
<th>{{EditData.edit.type}}</th>
<td>Enter the Thingin the input box below, </td>
<td>then the return value will Automatic updates</td>
<td>Enter the Thing in the input box below, </td>
<td>click 'POKE' to get the parameters</td>
</tr>
......@@ -23,7 +22,7 @@
<tr v-if="EditData.edit.type == 'Navigation'">
<td><button class="button has-text-primary" style="margin-left: 15px;" @click="addInput">Add Input</button></td>
<td><table class="table">
<tbody v-for="(data,index) in EditData.edit.url">
<tbody v-for="(data,index) in EditData.edit.UserInnputUrl">
<tr>
<input class="input has-text-primary" v-model="data.url"></tr>
<tr>
......@@ -33,12 +32,13 @@
</table></td>
</tr>
<tr v-if="EditData.edit.type != 'Navigation'">
<tr>
<th>url:</th>
<td> <input class="input has-text-primary" v-model="EditData.edit.url" type="text"></td>
<td><button class="button has-text-primary" style="margin-left: 15px;" @click="pathPoke">POKE</button></td>
</tr>
<tr v-for="(prop,key) in EditData.props" v-if="key != 'StateIndicatorFile'">
<th>{{key}}</th>
<td><input v-if="key != 'titleSize'" class="input has-text-primary" v-model="EditData.props[key]" type="text">
......@@ -50,6 +50,15 @@
</select>
</div>
</td>
<td>
<div v-if="key == 'unit'">
<toggle-button v-model="EditData.edit.isShowStateVlaue"
width="80"
height="30"
switch-color="{checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}"
:labels="{checked: 'show', unchecked: 'hide'}"/>
</div>
</td>
<!--<td v-if="key == 'setPathPoke' || key == 'getPathPoke'"><button class="button has-text-primary" style="margin-left: 15px;" @click="pathPoke(key)">POKE</button></td>-->
</tr>
......@@ -163,11 +172,27 @@ export default class WindowsApp extends Vue {
created() {
/*var localURL = window.location.hash;
if (localURL.indexOf("?") != -1) {
//var url = localURL.substr(1); //for test
var url = localURL.substr(3); //for build
console.log(url);
var httpData = unescape(url); // for build
console.log(httpData);
//var jsondata = decodeURIComponent(httpData);
//console.log(jsondata);
//var jsondata = decodeURI(httpData); //for build
var data = JSON.parse(httpData);
console.log(data);
this.EditData = data;
}*/
var localURL = location.search;
if (localURL.indexOf("?") != -1) {
var url = localURL.substr(1);
var jsondata = decodeURI(url);
var data = JSON.parse(jsondata);
var httpData = unescape(url);
//var jsondata = decodeURI(url);
var data = JSON.parse(httpData);
this.EditData = data;
}
......@@ -187,11 +212,11 @@ export default class WindowsApp extends Vue {
}
addInput(){
this.EditData.edit.url.push({});
this.EditData.edit.UserInnputUrl.push({});
}
deleteRow(index) {
this.EditData.edit.url.splice(index, 1);
this.EditData.edit.UserInnputUrl.splice(index, 1);
}
/*loadTextFromStateFile(ev: any){
......@@ -274,26 +299,18 @@ export default class WindowsApp extends Vue {
<style lang="scss">
// Import Bulma's core
@import "~bulma/sass/utilities/_all";
$info: red;
$selected: #843fdc;
$colors: (
"info": ($info, $info-invert),
);
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
height: 100%;
}
// Import Bulma and Buefy styles
//@import "~bulma";
//@import "~buefy/src/scss/buefy";
// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";
</style>
src/Windows/main.ts
View file @ 2ab139cb
import Vue from 'vue';
import WindowsApp from './WindowsApp.vue';
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
import 'font-awesome/css/font-awesome.min.css'
import WindowsApp from './WindowsApp.vue';
//import hscmap from '@hscmap/vue-window'
import * as VueWindow from '@hscmap/vue-window'
import ToggleButton from 'vue-js-toggle-button'
Vue.use(Buefy)
Vue.use(ToggleButton)
import router from 'vue-router'
......@@ -24,7 +28,7 @@ import 'video.js/dist/video-js.css'
Vue.config.productionTip = false;
//Vue.use(BootstrapVue)
Vue.use(Buefy)
Vue.use(VueWindow)
Vue.use(VideoPlayer)
......
src/axios/index.js 0 → 100644
View file @ 2ab139cb
import Vue from 'vue'
import axios from 'axios'
// 响应时间
axios.defaults.timeout = 1000;
// 配置cookie
// axios.defaults.withCredentials = true
// 配置请求头
axios.defaults.headers['Pragma'] ='no-cache';
axios.defaults.headers['Cache-Control'] ='no-cache';
//axios.defaults.headers = "{'Pragma': 'no-cache','Cache-Control': 'no-cache'}" //这部分请求头与跨域有关，需要保留
//axios.defaults.headers['Content-Type'] = 'application/json' //本来尝试使用此来解决后端获取req body为空的问题，但是使用此则不能正常跨域了
// 静态资源
Vue.prototype.$static = ''
window.$axios=axios;
src/axios/websocket.js 0 → 100644
View file @ 2ab139cb
class WebSocketEvent {
constructor(){
this.ws = new WebSocket("ws://192.168.0.195:8088");
console.log(this.ws);
}
sentMessage(message) {
message = message.toString();
console.log(message);
//this.ws = new WebSocket("ws://192.168.0.195:8088");
//console.log(this.ws);
console.log(this.ws);
this.ws.onopen = function (event){
console.log("web socket connect success～");
this.ws.send("{'SourcesAndTypes':[{'Source':'.*','EventType':'Changed'}],'action':0}");
};
}
getMessage() {
this.ws.onmessage = function (event){
console.log("receive respond message");
console.log("event.data",event.data)
return event.data;
};
}
close() {
this.ws.onclose = function (event){
console.log("web socket close～")
};
}
}
export default new WebSocketEvent();
src/components/Config/BoolConfig.vue
View file @ 2ab139cb
<template>
<div class="container">
<div class="columns content " v-bind:class="EditData.props.titleSize" style="margin-bottom: 0px;">
<div class="column content-table-cell-heading-color is-narrow" style="margin: 0px;">
<div class="container" style="margin-top: 30px;">
<div class="columns content " v-bind:class="EditData.props.titleSize" style="margin-bottom: 0px;padding-left: 7px;">
<div class="column content-table-cell-heading-color is-narrow" style="margin: 0px;padding: 0px;">
<h3>{{EditData.props.title}}</h3>
</div>
</div>
<div class="columns" style="padding: 5px;margin-top: 5px;">
<div class="columns" style="padding: 5px;">
<toggle-button v-model="switchValue"
:sync="true"
......@@ -200,8 +201,9 @@
openWindows(){
var fragment = window.location.origin;
var JsonData = JSON.stringify(this.EditData);
var url ="http://localhost:8080/WindowsAppIndex.html/?";
var url =fragment+"/WindowsAppIndex.html/?";
window.open(url+JsonData, "WidgetWindow",'height=100, width=100, top=10, left=10, toolbar=no');
}
......
src/components/Config/Config.vue
View file @ 2ab139cb
<template>
<div class="container">
<div class="container" style="margin-top: 30px;">
<div class="columns content " v-bind:class="EditData.props.titleSize" style="margin-bottom: 0px;">
<div class="column content-table-cell-heading-color is-narrow" style="margin: 0px;">
<div class="columns content " v-bind:class="EditData.props.titleSize" style="margin-bottom: 0px;padding-left: 7px;">
<div class="column content-table-cell-heading-color is-narrow" style="margin: 0px;padding: 0px;">
<h3>{{EditData.props.title}}</h3>
</div>
</div>
<div class="columns" style="margin-top:5px;padding: 5px;">
<div class="columns" style="padding: 5px;">
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" type="text" v-model="setUserData">
<input class="input is-info" type="text" v-model="setUserData">
</div>
</div>
</div>
......@@ -201,10 +201,11 @@ export default class Config extends Widget {
openWindows(){
var fragment = window.location.origin;
console.log(fragment);
var JsonData = JSON.stringify(this.EditData);
var url ="http://localhost:8080/WindowsAppIndex.html/?";
window.open(url+JsonData, "WidgetWindow",'height=100, width=100, top=10, left=10, toolbar=no');
var url =fragment+"/WindowsAppIndex.html/?";
window.open(url+JsonData, "WidgetWindow",'height=500, width=500, top=50, left=50, toolbar=no');
}
del(){
......@@ -420,6 +421,7 @@ export default class Config extends Widget {
async setData(url: string) {
var apiLoad = url;
console.log(url);
await axios.post(apiLoad, {
headers: {
'Pragma': 'no-cache',
......@@ -427,6 +429,7 @@ export default class Config extends Widget {
}
}).then(response => {
this.setUserData = response.data.CFET2CORE_SAMPLE_VAL;
console.log(this.setUserData);
if(response.data.CFET2CORE_SAMPLE_ISVALID == true){
alert('success');
}
......@@ -459,8 +462,10 @@ export default class Config extends Widget {
if(Object.prototype.toString.call( Args.variables) == '[object Undefined]' ){
this.userSetInputData.set(this.setLabel,this.setUserData);
}else{
console.log("in");
this.userSetInputData = Args.variables;
this.userSetInputData.set(this.setLabel,this.setUserData);
console.log(this.userSetInputData);
}
this.setPathwithVar = this.pathProcessor.FillPathWithVar(this.userSetInputData, this.config.data.set.url);
......
src/components/Method/Method.vue
View file @ 2ab139cb
<template>
<div class="container" style="padding-bottom: 30px;padding-right: 30px;" >
<div class="container" style="padding-bottom: 30px;padding-right: 30px;margin-top: 30px;" >
<div class="columns content " v-bind:class="EditData.props.titleSize" style="margin-bottom: 0px;">
<div class="column content-table-cell-heading-color is-narrow" style="margin: 0px;">
<div class="columns content " v-bind:class="EditData.props.titleSize" style="margin-bottom: 0px;padding-left: 10px;">
<div class="column content-table-cell-heading-color is-narrow" style="margin: 0px;padding: 0px;">
<h3>{{EditData.props.title}}</h3>
</div>
</div>
<div class="columns">
<button class="column button has-text-info is-light is-10 is-offset-1" style="padding: 4px;margin-top: 5px;" @click="viewInvokeLoad(EditData.params.Args)">invoke</button>
<div class="buttons">
<button class="button has-text-info is-light is-medium is-fullwidth" style="padding: 4px;margin-bottom: 25px;" @click="viewInvokeLoad(EditData.params.Args)">
<span style="margin: auto;">invoke</span>
</button>
</div>
<div class="columns">
......@@ -140,8 +143,9 @@ export default class Method extends Widget {
}
openWindows(){
var fragment = window.location.origin;
var JsonData = JSON.stringify(this.EditData);
var url ="http://localhost:8080/WindowsAppIndex.html/?";
var url =fragment+"/WindowsAppIndex.html/?";
window.open(url+JsonData, "WidgetWindow",'height=100, width=100, top=10, left=10, toolbar=no');
}
......
src/components/Navigation/Navigation.vue
View file @ 2ab139cb
<template>
<div class="container" id="RightClick">
<div class="container" id="RightClick" style="margin-top: 10px;">
<div class="columns">
<button class="column button has-text-info is-light is-10 is-offset-1" style="padding: 4px;margin-top: 25px;" @click="isShowParams = true">Navigation</button>
<div class="buttons">
<button class="button has-text-info is-light is-medium is-fullwidth" style="padding: 4px;margin-bottom: 25px;" @click="isShowParams = !isShowParams">
<span style="margin: auto;">Navigation</span>
</button>
</div>
<div v-for="url in EditData.edit.url" v-if="isShowParams">
<div v-for="url in EditData.edit.UserInnputUrl" v-if="isShowParams">
<a v-bind:href="url.url" target="_blank">{{url.url}}</a>
</div>
<div v-if="isShowParams">
<a :href="EditData.params.parentPath" target="_blank">parentPath:{{ EditData.params.parentPath }}</a>
</div>
<div
v-if="isShowParams"
v-for="(path, index) in EditData.params.childrenPath"
:key="index"
>
<a :href="path" target="_blank">childrenPath:{{path}}</a>
</div>
</div>
......@@ -32,6 +46,7 @@
import { WidgetRef } from "@/models/WidgetRef";
import PathProcessor from "@/models/PathProcessor";
import StrMapObjChange from "@/models/StrMapObjChange";
import axios from "axios";
@Component({
......@@ -53,6 +68,9 @@
pathId: string = "";
userInputData = new Map<string, string>();
isShowParams: boolean = false;
parentPath!: string;
childrenPath!: string[];
config: WidgetConfig = {
WidgetComponentName: "Navigation",
......@@ -65,7 +83,8 @@
EditData = {
edit:{
url:[],
UserInnputUrl:[],
url:'',
type:'Navigation',
index:this.refIndex,
},
......@@ -75,6 +94,8 @@
action:'get',
Args : {},
tempUserInputData:{},
parentPath:'',
childrenPath:[],
},
};
......@@ -143,12 +164,25 @@
openWindows(){
//windows.open -> another single page application
var fragment = window.location.origin;
var JsonData = JSON.stringify(this.EditData);
var url ="http://localhost:8080/WindowsAppIndex.html/?";
var url =fragment+"/WindowsAppIndex.html/?";
window.open(url+JsonData, "WidgetWindow",'height=100, width=100, top=10, left=10, toolbar=no');
}
pathPoke() {
var apiLoad = this.EditData.edit.url;
axios.get(apiLoad).then(response => {
console.log(response.data);
console.log(response.data.ParentPath as string);
this.EditData.params.parentPath = response.data.ParentPath as string;
this.EditData.params.childrenPath = response.data.ChildrenPath as string[];
});
}
//app
updateUI() {
......
src/components/State/BoolState.vue
View file @ 2ab139cb
<template>
<div class="container">
<div class="container" style="margin-top: 30px;">
<div class="columns content " v-bind:class="EditData.props.titleSize" style="margin-bottom: 0px;">
<div class="column content-table-cell-heading-color is-narrow" style="margin: 0px;">
<div class="columns content " v-bind:class="EditData.props.titleSize" style="margin-bottom: 0px;padding-left: 7px;">
<div class="column content-table-cell-heading-color is-narrow" style="margin: 0px;padding: 0px;">
<h3>{{EditData.props.title}}</h3>
</div>
</div>
<div class="columns" style="margin-top: 5px;padding: 5px;">
<div class="columns" style="padding: 5px;">
<span style="background-color: #bbb;border-radius: 50%;display: inline-block;"
v-bind:style="{ backgroundColor: activeColor, height: EditData.props.fontSize + 'px' ,width: EditData.props.fontSize + 'px'}"></span>
......@@ -165,8 +165,9 @@
openWindows(){
var fragment = window.location.origin;
var JsonData = JSON.stringify(this.EditData);
var url ="http://localhost:8080/WindowsAppIndex.html/?";
var url =fragment+"/WindowsAppIndex.html/?";
window.open(url+JsonData, "WidgetWindow",'height=100, width=100, top=10, left=10, toolbar=no');
}
......
src/components/State/State.vue
View file @ 2ab139cb
<template>
<div class="container">
<div class="container" style="margin-top: 30px;">
<div class="columns content " v-bind:class="EditData.props.titleSize" style="margin-bottom: 0px;">
<div class="column content-table-cell-heading-color is-narrow" style="margin: 0px;">
<div class="columns content " v-bind:class="EditData.props.titleSize" style="margin-bottom: 0px;padding-left: 7px;">
<div class="column content-table-cell-heading-color is-narrow" style="margin: 0px;padding: 0px;">
<h3>{{EditData.props.title}}</h3>
</div>
</div>
<div class="columns" style="padding: 5px;margin-top: 5px;">
<div class="columns" style="padding: 5px;">
<span style="background-color: #bbb;border-radius: 50%;display: inline-block;"
v-bind:style="{ backgroundColor: activeColor, height: EditData.props.fontSize + 'px' ,width: EditData.props.fontSize + 'px'}"></span>
......@@ -163,8 +163,9 @@ export default class State extends Widget {
openWindows(){
var fragment = window.location.origin;
var JsonData = JSON.stringify(this.EditData);
var url ="http://localhost:8080/WindowsAppIndex.html/?";
var url =fragment+"/WindowsAppIndex.html/?";
window.open(url+JsonData, "WidgetWindow",'height=100, width=100, top=10, left=10, toolbar=no');
}
......
src/components/Status/LabelStatus.vue 0 → 100644
View file @ 2ab139cb
<template>
<div class="container" id="RightClick" style="margin-top: 30px;">
<div class="columns content " v-bind:class="EditData.props.titleSize" style="margin-bottom: 0px;padding-left: 7px;">
<div class="column content-table-cell-heading-color is-narrow" style="margin: 0px;padding: 0px;">
<h3>{{EditData.props.title}}</h3>
</div>
</div>
<!-- <div class="columns">
<div class="column is-four-sixths is-offset-one-sixth" style="overflow:auto;">
<div style="border: solid 1px;" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }" >{{ StatusValue }}</div>
</div>
<div class="column" v-if="EditData.edit.isShowStateVlaue" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }" >{{EditData.props.unit}}</div>
<WidgetParams
class="column"
ref="WidgetParams"
v-show="isShowParams"
action="get"
@updataVariables="viewLoad"
></WidgetParams>
</div> -->
<div style=" display: flex; justify-content: center; align-items:center;" class="columns">
<div class="column is-four-sixths is-offset-one-sixth" style="overflow:auto;">
<div style="border: solid 1px;" v-bind:style="{ color: activeColor, fontSize: EditData.props.fontSize + 'px' }" >{{ StatusValue }}</div>
</div>
<div style="margin-left: 5px;" v-if="EditData.edit.isShowStateVlaue" v-bind:style="{ color: activeColor, fontSize: EditData.props.fontSize + 'px' }" >{{EditData.props.unit}}</div>
<WidgetParams
class="column"
ref="WidgetParams"
v-show="isShowParams"
action="get"
@updataVariables="viewLoad"
></WidgetParams>
</div>
</div>
</template>
<script lang="ts">
let gauge;
import Vue from "vue";
import { VueSvgGauge } from "vue-svg-gauge";
import Component from "vue-class-component";
import { Prop, Watch } from "vue-property-decorator";
import { WidgetConfig } from "@/models/WidgetConfig";
import { UpdatePayload } from "@/models/UpdatePayload";
import { Widget } from "@/models/widget";
import { ResourceInfo } from "@/models/Customview";
import WidgetParams from "@/components/Common/WidgetParams.vue";
import { WidgetRef } from "@/models/WidgetRef";
import axios from "../../axios/index";
import PathProcessor from "@/models/PathProcessor";
import StrMapObjChange from "@/models/StrMapObjChange";
import { forEach } from "typescript-collections/dist/lib/arrays";
import { map } from "d3";
import Navigation from "@/components/Common/Navigation.vue";
import Windows from "@/components/Common/Windows.vue";
import g2plot from '@antv/g2plot';
import WebSocketEvent from '@/axios/websocket';
import { Gauge } from '@antv/g2plot';
@Component({
components: {
WidgetParams,
Navigation,
Windows,
}
})
export default class LabelStatus extends Widget {
@Prop() index!:number;
@Prop() refIndex!:number;
@Prop() widgetList:WidgetRef[] = [];
pathProcessor = new PathProcessor();
strMapObjChange = new StrMapObjChange();
WidgetComponentName: string = "LabelStatus";
StatusValue: string = "undefined";
pathId: string = "";
userInputData = new Map<string, string>();
pathwithVar: string = "";
timer?: number;
isShowPath: boolean = false;
isShowParams: boolean = false;
EditPathPoke : string = "";
//fontSize:number = 55;
activeColor:string = '';
value:number = 0;
message:string = "{'SourcesAndTypes':[{'PerformanceLevel':0,'Source':'.*','EventType':'Changed'}],'action':0}";
config: WidgetConfig = {
WidgetComponentName: "LabelStatus",
data: {
url: "",
displayname:"",
userInputData: ""
}
};
EditData = {
edit:{
type:'LabelStatus',
url:this.config.data.url,
index:this.refIndex,
isShowStateVlaue:false,
},
props:{
fontSize:22,
title:'',
titleSize:'',
unit:'',
},
params:{
PokedPath:this.EditPathPoke,
action:'get',
Args : {},
tempUserInputData:{},
},
};
created() {
this.config.data.userInputData = this.strMapObjChange.strMapToObj(
this.userInputData
);
}
mounted() {
//var ws = WebSocketEvent;
//ws.sentMessage("{'SourcesAndTypes':[{'Source':'.*','EventType':'Changed'}],'action':0}");
//ws.close();
//ws.getMessage();
//console.log(ws.getMessage());
//this.StatusValue = ws.getMessage().CFET2CORE_SAMPLE_VAL;
this.timer = setInterval(this.refresh, 4000); // temp 注释
/*
let _this = this;
//todo: 需要获取ip+端口
var ws;
var timer;
function connectWebsocket(){
ws = new WebSocket("ws://192.168.0.195:8088");
ws.onopen = function(event){
console.log("web socket connect success～");
ws.send(_this.message);
heartCheck.start();
clearInterval(timer);
};
ws.onmessage = function(event){
console.log("receive respond message");
heartCheck.reset();
var JsonData = JSON.parse(event.data);
console.log("event.data",JsonData.Sample.Context.CFET2CORE_SAMPLE_VAL);
_this.StatusValue = JsonData.Sample.Context.CFET2CORE_SAMPLE_VAL;
};
}
connectWebsocket();
var heartCheck = {
timeout: 60000,//60s
timeoutObj: null,
reset: function(){
clearInterval(this.timeoutObj);
this.start();
},
start: function(){
this.timeoutObj = setInterval(function(){
if(ws.readyState==1){
ws.send("{'SourcesAndTypes':[{'Source':'','EventType':''}],'action':0}");
}
}, this.timeout)
}
};
ws.onclose = function(event){
console.log("web socket close～");
timer = setInterval(connectWebsocket, 6000);
//connectWebsocket();
};*/
let containerlist = document.getElementsByClassName('container');
//CreateContainerId
var self = this;
let RightClickField = containerlist[this.index];
RightClickField.oncontextmenu = function (e) {
e.preventDefault();
let menu = document.querySelector('.menu');//获取盒子menu。
if(menu) menu.remove();//判断清除初始盒子
menu = document.createElement('div');//创建盒子。
menu.classList.add('menu');//添加类
let menu1 = document.createElement('BUTTON');//创建盒子menu1。
menu1.innerHTML = 'del';//盒子menu1添加文本XXXX
menu1.onclick = self.del;
menu.appendChild(menu1);//menu末尾添加新的节点menu1
let menu2 = document.createElement('BUTTON');//创建盒子menu1。
menu2.innerHTML = 'edit';//盒子menu1添加文本XXXX
menu2.onclick = self.openWindows;
menu.appendChild(menu2);//menu末尾添加新的节点menu1
RightClickField.appendChild(menu);//body末尾添加新的节点menu
menu.style.left = e.offsetX +"px";
menu.style.top = e.offsetY +"px";
menu.style.position = 'absolute';
};
RightClickField.onclick = e => {
let menu = document.querySelector('.menu')
if (menu && !menu.contains(e.target))
menu.remove()
}
}
destroyed() {
clearInterval(this.timer);
}
del(){
this.$emit('del', this.index);
}
ParsingStateNum(){
}
openWindows(){
//windows.open -> another single page application
var fragment = window.location.origin;
var JsonData = JSON.stringify(this.EditData);
//var httpData = escape(JsonData); //build
var httpData = encodeURIComponent(JsonData);
var url =fragment+"/WindowsAppIndex.html/?";
window.open(url+httpData, "WidgetWindow",'height=100, width=100, top=10, left=10, toolbar=no');
}
//app
updateUI() {
this.isShowPath = false;
this.EditData.params.PokedPath = this.config.data.url;
this.EditData.edit.url = this.config.data.url;
this.openWindows();
}
//app
getConfig(): [WidgetConfig,object] {
// this.config.data.userInputData =(this.$refs.WidgetParams as WidgetParams).getVariableValues();
/*this.config.data.userInputData = this.strMapObjChange.strMapToObj(
(this.$refs.WidgetParams as WidgetParams).getVariableValues()
);*/
return [this.config,this.EditData];
}
//app
setConfig(setConfigData: [WidgetConfig,object],fragment:string): void {
this.config = setConfigData[0];
this.EditData = setConfigData[1];
if(this.EditData.edit.url.search("startpath") != -1 ){this.replaceStartPath(fragment)}
var temp = this.EditData.params.tempUserInputData;
temp = JSON.parse(JSON.stringify(temp));
temp = this.strMapObjChange.objToStrMap(temp);
//this.EditData.params.tempUserInputData = temp;
var Args: UpdatePayload = {
action: this.EditData.params.action,
variables: temp,
target: ["self"]
};
this.viewLoad(Args);
}
pathPoke() {
console.log(this.EditData);
this.config.data.url = this.EditData.edit.url;
this.EditPathPoke = this.EditData.edit.url;
const urlRegExp = /(?<=\/)\w*(?=\/)/g;
const result = this.config.data.url.match(urlRegExp);
this.message = this.message.replace(".*", "/"+result[0]+"/.*");
console.log(this.message);
var pokepath = this.EditData.edit.url;
window.$axios.get(pokepath).then(response => {
this.samplePoke(response.data);
this.updateUI();
}).catch(err => {
this.EditData.params.PokedPath = this.config.data.url;
this.openWindows();
});
}
//app
samplePoke(sample: any) {
var samplePath = sample.CFET2CORE_SAMPLE_PATH;
var pokedPath: string;
pokedPath = samplePath;
var count: number = 0;
var temp = sample.Actions.get.Parameters;
temp = JSON.parse(JSON.stringify(temp));
temp = this.strMapObjChange.objToStrMap(temp);
var Parameters: Map<string, string>;
Parameters = temp;
Parameters.forEach((value, key) => {
count++;
if (count == 1) {
pokedPath = pokedPath + "?";
}
pokedPath = pokedPath + key + "=$" + key + "$&";
});
if (count != 0) {
pokedPath = pokedPath.substring(0, pokedPath.length - 1);
}
this.config.data.url = pokedPath;
}
//app
parentUpdate(payload: UpdatePayload): void {
var shouldUpdate:boolean = false
this.userInputData = this.strMapObjChange.strMapToObj(
(this.$refs.WidgetParams as WidgetParams).getVariableValues());
var temp = this.userInputData;
temp = this.strMapObjChange.objToStrMap(temp);
this.userInputData = temp;
this.userInputData.forEach((value , key) =>{
payload.variables.forEach((valueofpayload,keyofpayload)=>{
if(key == keyofpayload && ((this.userInputData.get(key) as string) != (payload.variables.get(keyofpayload) as string)))
{
this.userInputData.set(key,payload.variables.get(keyofpayload) as string);
shouldUpdate = true;
}
});
});
if(shouldUpdate)
{
(this.$refs.WidgetParams as WidgetParams).setVariableInput(this.userInputData);
//this.updateUI();
(this.$refs.WidgetParams as WidgetParams).setVariableList(
this.pathProcessor.extractVarFromPath(this.config.data.url)
);
}
}
//app
refresh() {
this.viewLoad(this.EditData.params.Args);
}
replaceStartPath(startPath: string): void {
this.config.data.url = this.config.data.url.replace("$startpath$", startPath);
this.EditData.edit.url = this.EditData.edit.url.replace("$startpath$", startPath);
}
async getData(url: string) {
var apiLoad = url;
await window.$axios.get(apiLoad)
.then(response => {
this.StatusValue = response.data.CFET2CORE_SAMPLE_VAL;
if(this.StatusValue == undefined)
{
this.StatusValue = "undefined";
}
})
}
//called when widgetParams action clicked
async viewLoad(Args: UpdatePayload) {
// this.config.data.userInputData = Args.variables;
//this.userInputData = Args.variables;
this.userInputData =Args.variables;
this.pathwithVar = this.pathProcessor.FillPathWithVar(
// this.config.data.userInputData,
this.userInputData,
this.config.data.url
);
await this.getData(this.pathwithVar);
this.ParsingStateNum();
if(typeof this.StatusValue == "number"){
this.ParsingStateNum();
}
}
}
</script>
<style scoped>
.waveView {
width: 100%;
height: auto;
}
.hflex{
display: flex;
flex-direction: row-reverse;
align-items: center;
}
</style>
src/components/Status/Status.vue
View file @ 2ab139cb
<template>
<div class="container" id="RightClick">
<div class="container" id="RightClick" style="margin-top: 30px;">
<div class="columns content " v-bind:class="EditData.props.titleSize" style="margin-bottom: 0px;">
<div class="column content-table-cell-heading-color is-narrow" style="margin: 0px;">
<div class="columns content " v-bind:class="EditData.props.titleSize" style="margin-bottom: 0px;padding-left: 7px;">
<div class="column content-table-cell-heading-color is-narrow" style="margin: 0px;padding: 0px;">
<h3>{{EditData.props.title}}</h3>
</div>
</div>
<div class="columns" style="margin-top:5px;margin-bottom: 0px;">
<div class="columns" style="margin-bottom: 0px;">
<div class="column is-four-sixths is-offset-one-sixth gauge" ref="gauge" style="height: 250px;overflow:auto;"></div>
</div>
<div class="columns">
<div style=" display: flex; justify-content: center;">
<!--<div class="column is-four-sixths is-offset-one-sixth" style="overflow:auto;">-->
<div v-bind:style="{ color: activeColor, fontSize: EditData.props.fontSize + 'px' }" >{{ StatusValue }}</div>
<div style="margin-left: 5px;" v-if="EditData.edit.isShowStateVlaue" v-bind:style="{ color: activeColor, fontSize: EditData.props.fontSize + 'px' }" >{{EditData.props.unit}}</div>
<div class="column is-four-sixths is-offset-one-sixth" style="overflow:auto;">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }" >{{ StatusValue }}</div>
</div>
<WidgetParams
class="column"
......@@ -40,7 +41,7 @@
<script lang="ts">
let gauge;
//let gauge;
import Vue from "vue";
import { VueSvgGauge } from "vue-svg-gauge";
import Component from "vue-class-component";
......@@ -51,7 +52,7 @@ import { Widget } from "@/models/widget";
import { ResourceInfo } from "@/models/Customview";
import WidgetParams from "@/components/Common/WidgetParams.vue";
import { WidgetRef } from "@/models/WidgetRef";
import axios from "axios";
import axios from "../../axios/index";
import PathProcessor from "@/models/PathProcessor";
import StrMapObjChange from "@/models/StrMapObjChange";
import { forEach } from "typescript-collections/dist/lib/arrays";
......@@ -59,6 +60,7 @@ import { map } from "d3";
import Navigation from "@/components/Common/Navigation.vue";
import Windows from "@/components/Common/Windows.vue";
import g2plot from '@antv/g2plot';
import WebSocketEvent from '@/axios/websocket';
import { Gauge } from '@antv/g2plot';
......@@ -88,13 +90,13 @@ export default class Status extends Widget {
isShowPath: boolean = false;
isShowParams: boolean = false;
EditPathPoke : string = "";
fontSize:number = 35;
//fontSize:number = 22;
activeColor:string = '';
value:number = 0;
tempValue:number = 0;
gaugeTicks:number[]=[0, 0.2, 0.4, 0.75, 1];
gaugeColor:string[] = ['red', 'yellow', 'green'];
gauge:object;
config: WidgetConfig = {
WidgetComponentName: "Status",
......@@ -110,16 +112,18 @@ export default class Status extends Widget {
type:'status',
url:this.config.data.url,
index:this.refIndex,
isShowStateVlaue:false,
},
props:{
fontSize:this.fontSize,
fontSize:22,
title:'',
titleSize:'',
unit:'',
StateIndicatorFile:{
hh:85,
h:70,
l:20,
ll:10,
hh:80,
h:75,
l:40,
ll:20,
max:100,
min:0,
},
......@@ -142,8 +146,30 @@ export default class Status extends Widget {
mounted() {
//var ws = WebSocketEvent;
//ws.sentMessage("{'SourcesAndTypes':[{'Source':'.*','EventType':'Changed'}],'action':0}");
//ws.close();
//ws.getMessage();
//console.log(ws.getMessage());
//this.StatusValue = ws.getMessage().CFET2CORE_SAMPLE_VAL;
this.timer = setInterval(this.refresh, 4000); // temp 注释
/* //todo: 需要获取ip+端口
var ws = new WebSocket("ws://192.168.2.36:8088");
ws.onopen = function(event){
console.log("web socket connect success～");
ws.send("{'SourcesAndTypes':[{'Source':'.*','EventType':'Changed'}],'action':0}")
};
ws.onmessage = function(event){
console.log("receive respond message");
console.log("event.data",event.data)
};
ws.onclose = function(event){
console.log("web socket close～")
};*/
this.timer = setInterval(this.refresh, 1000);
let containerlist = document.getElementsByClassName('container');
//CreateContainerId
......@@ -185,8 +211,9 @@ export default class Status extends Widget {
if (menu && !menu.contains(e.target))
menu.remove()
}
console.log(this.$refs);
gauge = new Gauge(this.$refs.gauge,{
this.gauge = new Gauge(this.$refs.gauge,{
percent:0,
range: {
ticks: [0, 0.2, 0.4, 0.75, 0.8, 1],
......@@ -199,7 +226,7 @@ export default class Status extends Widget {
},
});
gauge.render();
this.gauge.render();
}
......@@ -226,13 +253,13 @@ export default class Status extends Widget {
this.gaugeTicks[3] = parseFloat((this.EditData.props.StateIndicatorFile.h - this.EditData.props.StateIndicatorFile.min)/(this.EditData.props.StateIndicatorFile.max-this.EditData.props.StateIndicatorFile.min));
this.gaugeTicks[4] = parseFloat((this.EditData.props.StateIndicatorFile.hh - this.EditData.props.StateIndicatorFile.min)/(this.EditData.props.StateIndicatorFile.max-this.EditData.props.StateIndicatorFile.min));
this.gaugeTicks[5] = 1;
gauge.options.percent = this.value;
gauge.options.range = {
this.gauge.options.percent = this.value;
this.gauge.options.range = {
ticks: this.gaugeTicks,
color: ['red', 'yellow', 'green','yellow','red'],
};
gauge.render();
this.gauge.render();
if(this.StatusValue >= parseFloat(this.EditData.props.StateIndicatorFile.hh)){
this.activeColor = 'red';
......@@ -253,9 +280,11 @@ export default class Status extends Widget {
openWindows(){
//windows.open -> another single page application
var fragment = window.location.origin;
var JsonData = JSON.stringify(this.EditData);
var url ="http://localhost:8080/WindowsAppIndex.html/?";
window.open(url+JsonData, "WidgetWindow",'height=100, width=100, top=10, left=10, toolbar=no');
var httpData = encodeURIComponent(JsonData);
var url =fragment+"/WindowsAppIndex.html/?";
window.open(url+httpData, "WidgetWindow",'height=100, width=100, top=10, left=10, toolbar=no');
}
......@@ -330,8 +359,8 @@ export default class Status extends Widget {
var pokepath = this.EditData.edit.url;
//todo：config文件
axios.defaults.timeout = 1000;
axios.get(pokepath, {
//axios.defaults.timeout = 1000;
/*axios.get(pokepath, {
headers: {
'Pragma': 'no-cache',
'Cache-Control': 'no-cache'
......@@ -342,6 +371,15 @@ export default class Status extends Widget {
}).catch(err => {
this.EditData.params.PokedPath = this.config.data.url;
this.openWindows();
});*/
console.log('defaults.timeout');
console.log(window);
window.$axios.get(pokepath).then(response => {
this.samplePoke(response.data);
this.updateUI();
}).catch(err => {
this.EditData.params.PokedPath = this.config.data.url;
this.openWindows();
});
......@@ -408,17 +446,25 @@ export default class Status extends Widget {
}
//app
refresh() {
async refresh() {
//this.viewLoad(this.EditData.params.Args);
gauge.options.percent = this.value;
if(typeof this.StatusValue == 'number'){
gauge.render();
await this.getData(this.pathwithVar);
if(typeof this.StatusValue == 'number' && this.StatusValue!=this.tempValue){
console.log("11");
this.viewLoad(this.EditData.params.Args);
//gauge.options.percent = this.value;
//gauge.render();
this.tempValue = this.StatusValue;
}
//this.getData(this.pathwithVar);
this.getData(this.pathwithVar);
//this.tempValue = this.value;
}
......@@ -431,7 +477,7 @@ export default class Status extends Widget {
async getData(url: string) {
var apiLoad = url;
await axios
/* await axios
.get(apiLoad, {
headers: {
Pragma: "no-cache",
......@@ -444,7 +490,16 @@ export default class Status extends Widget {
{
this.StatusValue = "undefined";
}
});
});*/
await window.$axios.get(apiLoad)
.then(response => {
this.StatusValue = response.data.CFET2CORE_SAMPLE_VAL;
if(this.StatusValue == undefined || typeof this.StatusValue != 'number')
{
this.StatusValue = "undefined";
}
})
}
......
src/main.ts
View file @ 2ab139cb
import 'font-awesome/css/font-awesome.min.css'
import 'buefy/dist/buefy.css'
import Vue from 'vue';
import App from './App.vue';
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
import 'font-awesome/css/font-awesome.min.css'
//import axios from './axios/index'
import axios from './axios/index'
//import hscmap from '@hscmap/vue-window'
import * as VueWindow from '@hscmap/vue-window'
import router from 'vue-router'
import ProgressBar from 'vuejs-progress-bar'
import ToggleButton from 'vue-js-toggle-button'
Vue.use(Buefy)
Vue.use(ToggleButton)
Vue.use(ProgressBar)
......@@ -26,7 +32,7 @@ import 'video.js/dist/video-js.css'
Vue.config.productionTip = false;
//Vue.use(BootstrapVue)
Vue.use(Buefy)
Vue.use(VueWindow)
Vue.use(VideoPlayer)
......@@ -58,6 +64,7 @@ var Appuse = new Vue({
}).$mount('#app');
//export default Appmain
Vue.prototype.$axios=axios;
//console.log(Appmain.$children[0].UpdateWidget('111'));
window.UpdateWidget = Appuse.$children[0].UpdateWidget;
......
vue.config.js
View file @ 2ab139cb
......@@ -12,11 +12,11 @@ module.exports = {
},
},
outputDir: '/Users/igem/Desktop/slide',
outputDir: '/Users/igem/Desktop/华科/',
devServer: {
proxy: {
"/": {
target: "http://192.168.0.197:8001",
target: "http://192.168.0.3:8001",
secure: false,
changeOrigin: true
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment