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 @@ ...@@ -38,7 +38,7 @@
<a class="navbar-item navpadding" @click="refactor" <a class="navbar-item navpadding" @click="refactor"
> >
Widget_layout Widget layout
</a> </a>
</div> </div>
...@@ -151,6 +151,7 @@ import { indexOf } from "typescript-collections/dist/lib/arrays"; ...@@ -151,6 +151,7 @@ import { indexOf } from "typescript-collections/dist/lib/arrays";
//when add more available widgets add ref to the widgets //when add more available widgets add ref to the widgets
import Status from "./components/Status/Status.vue"; import Status from "./components/Status/Status.vue";
import LabelStatus from "./components/Status/LabelStatus.vue";
import Navigation from "./components/Navigation/Navigation.vue"; import Navigation from "./components/Navigation/Navigation.vue";
import WaveView from "./components/WaveView/WaveView.vue"; import WaveView from "./components/WaveView/WaveView.vue";
import Method from "./components/Method/Method.vue"; import Method from "./components/Method/Method.vue";
...@@ -173,6 +174,7 @@ import Windows from "./components/Common/Windows.vue"; ...@@ -173,6 +174,7 @@ import Windows from "./components/Common/Windows.vue";
components: { components: {
//when add more available widgets add ref to the widgets //when add more available widgets add ref to the widgets
Status, Status,
LabelStatus,
WaveView, WaveView,
Method, Method,
Config, Config,
...@@ -205,6 +207,7 @@ export default class App extends Vue { ...@@ -205,6 +207,7 @@ export default class App extends Vue {
schemas?:any[]; schemas?:any[];
isShowDrag:boolean = false; isShowDrag:boolean = false;
isShowRes : boolean = false; isShowRes : boolean = false;
fragment:string = "";
...@@ -212,6 +215,7 @@ export default class App extends Vue { ...@@ -212,6 +215,7 @@ export default class App extends Vue {
//when add more available widgets add its name here //when add more available widgets add its name here
availableWidgets = [ availableWidgets = [
"Status", "Status",
"LabelStatus",
"Config", "Config",
"BoolConfig", "BoolConfig",
"WaveView", "WaveView",
...@@ -326,6 +330,7 @@ export default class App extends Vue { ...@@ -326,6 +330,7 @@ export default class App extends Vue {
if (fragment != "#blank" && fragment != "#Blank" && fragment != "#") { if (fragment != "#blank" && fragment != "#Blank" && fragment != "#") {
fragment = fragment.substring(1, fragment.length); fragment = fragment.substring(1, fragment.length);
var customViewURL = "/customView/template" + fragment; var customViewURL = "/customView/template" + fragment;
console.log(customViewURL);
var isCustomview: boolean = false; var isCustomview: boolean = false;
//axios之前出现过cache过多刷不出来的问题，所以本项目的axios都加上了禁止cache的头文件 //axios之前出现过cache过多刷不出来的问题，所以本项目的axios都加上了禁止cache的头文件
axios axios
...@@ -351,7 +356,7 @@ export default class App extends Vue { ...@@ -351,7 +356,7 @@ export default class App extends Vue {
); );
this.widgetList = widgets.widgetList; this.widgetList = widgets.widgetList;
this.lastWidgetIndex = Number(widgets.currentRef); this.lastWidgetIndex = Number(widgets.currentRef);
//this.$forceUpdate(); this.$forceUpdate();
//todo:替换startpath;判断是否存在$startpath$ //todo:替换startpath;判断是否存在$startpath$
...@@ -377,6 +382,7 @@ export default class App extends Vue { ...@@ -377,6 +382,7 @@ export default class App extends Vue {
// } // }
fragment = fragment.substring(1,fragment.length); fragment = fragment.substring(1,fragment.length);
this.fragment = fragment;
console.log(fragment); console.log(fragment);
this.importActiveWidgetList(fragment); this.importActiveWidgetList(fragment);
}); });
...@@ -386,6 +392,7 @@ export default class App extends Vue { ...@@ -386,6 +392,7 @@ export default class App extends Vue {
this.dataAccess(dataURL); this.dataAccess(dataURL);
} }
}).catch(err=>{ }).catch(err=>{
alert(err);
var dataURL = fragment; var dataURL = fragment;
this.dataAccess(dataURL); this.dataAccess(dataURL);
console.log(dataURL); console.log(dataURL);
...@@ -406,6 +413,7 @@ export default class App extends Vue { ...@@ -406,6 +413,7 @@ export default class App extends Vue {
UpdateWidget(EditData:any) { UpdateWidget(EditData:any) {
console.log(EditData); console.log(EditData);
this.$refs[EditData.edit.index][0].EditData = 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].pathPoke();
this.$refs[EditData.edit.index][0].viewLoad(EditData.params.Args); this.$refs[EditData.edit.index][0].viewLoad(EditData.params.Args);
} }
...@@ -447,7 +455,7 @@ export default class App extends Vue { ...@@ -447,7 +455,7 @@ export default class App extends Vue {
this.$forceUpdate(); this.$forceUpdate();
Vue.nextTick(() => { Vue.nextTick(() => {
// changed here // changed here
this.importActiveWidgetList(); this.importActiveWidgetList(this.fragment);
}); });
}; };
...@@ -514,14 +522,19 @@ export default class App extends Vue { ...@@ -514,14 +522,19 @@ export default class App extends Vue {
</script> </script>
<style lang="scss"> <style lang="scss" >
// Import Bulma's core // Import Bulma's core
// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";
@import "~bulma/sass/utilities/_all"; @import "~bulma/sass/utilities/_all";
$info: red; //$info: red;
$colors: ( /* $colors: (
"info": ($info, $info-invert), "info": ($info, $info-invert),
); );*/
#app { #app {
font-family: "Avenir", Helvetica, Arial, sans-serif; font-family: "Avenir", Helvetica, Arial, sans-serif;
...@@ -579,8 +592,4 @@ export default class App extends Vue { ...@@ -579,8 +592,4 @@ export default class App extends Vue {
// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";
</style> </style>
src/Windows/WindowsApp.vue
View file @ 2ab139cb
...@@ -14,8 +14,7 @@ ...@@ -14,8 +14,7 @@
<tr class="is-selected is-fullwidth"> <tr class="is-selected is-fullwidth">
<th>{{EditData.edit.type}}</th> <th>{{EditData.edit.type}}</th>
<td>Enter the Thingin the input box below, </td> <td>Enter the Thing in the input box below, </td>
<td>then the return value will Automatic updates</td>
<td>click 'POKE' to get the parameters</td> <td>click 'POKE' to get the parameters</td>
</tr> </tr>
...@@ -23,7 +22,7 @@ ...@@ -23,7 +22,7 @@
<tr v-if="EditData.edit.type == 'Navigation'"> <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><button class="button has-text-primary" style="margin-left: 15px;" @click="addInput">Add Input</button></td>
<td><table class="table"> <td><table class="table">
<tbody v-for="(data,index) in EditData.edit.url"> <tbody v-for="(data,index) in EditData.edit.UserInnputUrl">
<tr> <tr>
<input class="input has-text-primary" v-model="data.url"></tr> <input class="input has-text-primary" v-model="data.url"></tr>
<tr> <tr>
...@@ -33,12 +32,13 @@ ...@@ -33,12 +32,13 @@
</table></td> </table></td>
</tr> </tr>
<tr v-if="EditData.edit.type != 'Navigation'"> <tr>
<th>url:</th> <th>url:</th>
<td> <input class="input has-text-primary" v-model="EditData.edit.url" type="text"></td> <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> <td><button class="button has-text-primary" style="margin-left: 15px;" @click="pathPoke">POKE</button></td>
</tr> </tr>
<tr v-for="(prop,key) in EditData.props" v-if="key != 'StateIndicatorFile'"> <tr v-for="(prop,key) in EditData.props" v-if="key != 'StateIndicatorFile'">
<th>{{key}}</th> <th>{{key}}</th>
<td><input v-if="key != 'titleSize'" class="input has-text-primary" v-model="EditData.props[key]" type="text"> <td><input v-if="key != 'titleSize'" class="input has-text-primary" v-model="EditData.props[key]" type="text">
...@@ -50,6 +50,15 @@ ...@@ -50,6 +50,15 @@
</select> </select>
</div> </div>
</td> </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>--> <!--<td v-if="key == 'setPathPoke' || key == 'getPathPoke'"><button class="button has-text-primary" style="margin-left: 15px;" @click="pathPoke(key)">POKE</button></td>-->
</tr> </tr>
...@@ -163,11 +172,27 @@ export default class WindowsApp extends Vue { ...@@ -163,11 +172,27 @@ export default class WindowsApp extends Vue {
created() { 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; var localURL = location.search;
if (localURL.indexOf("?") != -1) { if (localURL.indexOf("?") != -1) {
var url = localURL.substr(1); var url = localURL.substr(1);
var jsondata = decodeURI(url); var httpData = unescape(url);
var data = JSON.parse(jsondata); //var jsondata = decodeURI(url);
var data = JSON.parse(httpData);
this.EditData = data; this.EditData = data;
} }
...@@ -187,11 +212,11 @@ export default class WindowsApp extends Vue { ...@@ -187,11 +212,11 @@ export default class WindowsApp extends Vue {
} }
addInput(){ addInput(){
this.EditData.edit.url.push({}); this.EditData.edit.UserInnputUrl.push({});
} }
deleteRow(index) { deleteRow(index) {
this.EditData.edit.url.splice(index, 1); this.EditData.edit.UserInnputUrl.splice(index, 1);
} }
/*loadTextFromStateFile(ev: any){ /*loadTextFromStateFile(ev: any){
...@@ -274,26 +299,18 @@ export default class WindowsApp extends Vue { ...@@ -274,26 +299,18 @@ export default class WindowsApp extends Vue {
<style lang="scss"> <style lang="scss">
// Import Bulma's core // Import Bulma's core
@import "~bulma/sass/utilities/_all"; @import "~bulma/sass/utilities/_all";
$info: red;
$selected: #843fdc;
$colors: ( $colors: (
"info": ($info, $info-invert), "info": ($info, $info-invert),
); );
#app { // Import Bulma and Buefy styles
font-family: "Avenir", Helvetica, Arial, sans-serif; //@import "~bulma";
-webkit-font-smoothing: antialiased; //@import "~buefy/src/scss/buefy";
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
height: 100%;
}
// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";
</style> </style>
src/Windows/main.ts
View file @ 2ab139cb
import Vue from 'vue'; import Vue from 'vue';
import WindowsApp from './WindowsApp.vue';
import Buefy from 'buefy' import Buefy from 'buefy'
import 'buefy/dist/buefy.css' import 'buefy/dist/buefy.css'
import 'font-awesome/css/font-awesome.min.css' import 'font-awesome/css/font-awesome.min.css'
import WindowsApp from './WindowsApp.vue';
//import hscmap from '@hscmap/vue-window' //import hscmap from '@hscmap/vue-window'
import * as VueWindow from '@hscmap/vue-window' import * as VueWindow from '@hscmap/vue-window'
import ToggleButton from 'vue-js-toggle-button' import ToggleButton from 'vue-js-toggle-button'
Vue.use(Buefy)
Vue.use(ToggleButton) Vue.use(ToggleButton)
import router from 'vue-router' import router from 'vue-router'
...@@ -24,7 +28,7 @@ import 'video.js/dist/video-js.css' ...@@ -24,7 +28,7 @@ import 'video.js/dist/video-js.css'
Vue.config.productionTip = false; Vue.config.productionTip = false;
//Vue.use(BootstrapVue) //Vue.use(BootstrapVue)
Vue.use(Buefy)
Vue.use(VueWindow) Vue.use(VueWindow)
Vue.use(VideoPlayer) 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> <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> <h3>{{EditData.props.title}}</h3>
</div> </div>
</div> </div>
<div class="columns" style="padding: 5px;margin-top: 5px;"> <div class="columns" style="padding: 5px;">
<toggle-button v-model="switchValue" <toggle-button v-model="switchValue"
:sync="true" :sync="true"
...@@ -200,8 +201,9 @@ ...@@ -200,8 +201,9 @@
openWindows(){ openWindows(){
var fragment = window.location.origin;
var JsonData = JSON.stringify(this.EditData); 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'); window.open(url+JsonData, "WidgetWindow",'height=100, width=100, top=10, left=10, toolbar=no');
} }
......
src/components/Config/Config.vue
View file @ 2ab139cb
<template> <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="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;"> <div class="column content-table-cell-heading-color is-narrow" style="margin: 0px;padding: 0px;">
<h3>{{EditData.props.title}}</h3> <h3>{{EditData.props.title}}</h3>
</div> </div>
</div> </div>
<div class="columns" style="margin-top:5px;padding: 5px;"> <div class="columns" style="padding: 5px;">
<div class="field-body"> <div class="field-body">
<div class="field"> <div class="field">
<div class="control"> <div class="control">
<input class="input" type="text" v-model="setUserData"> <input class="input is-info" type="text" v-model="setUserData">
</div> </div>
</div> </div>
</div> </div>
...@@ -201,10 +201,11 @@ export default class Config extends Widget { ...@@ -201,10 +201,11 @@ export default class Config extends Widget {
openWindows(){ openWindows(){
var fragment = window.location.origin;
console.log(fragment);
var JsonData = JSON.stringify(this.EditData); var JsonData = JSON.stringify(this.EditData);
var url =fragment+"/WindowsAppIndex.html/?";
var url ="http://localhost:8080/WindowsAppIndex.html/?"; window.open(url+JsonData, "WidgetWindow",'height=500, width=500, top=50, left=50, toolbar=no');
window.open(url+JsonData, "WidgetWindow",'height=100, width=100, top=10, left=10, toolbar=no');
} }
del(){ del(){
...@@ -420,6 +421,7 @@ export default class Config extends Widget { ...@@ -420,6 +421,7 @@ export default class Config extends Widget {
async setData(url: string) { async setData(url: string) {
var apiLoad = url; var apiLoad = url;
console.log(url);
await axios.post(apiLoad, { await axios.post(apiLoad, {
headers: { headers: {
'Pragma': 'no-cache', 'Pragma': 'no-cache',
...@@ -427,6 +429,7 @@ export default class Config extends Widget { ...@@ -427,6 +429,7 @@ export default class Config extends Widget {
} }
}).then(response => { }).then(response => {
this.setUserData = response.data.CFET2CORE_SAMPLE_VAL; this.setUserData = response.data.CFET2CORE_SAMPLE_VAL;
console.log(this.setUserData);
if(response.data.CFET2CORE_SAMPLE_ISVALID == true){ if(response.data.CFET2CORE_SAMPLE_ISVALID == true){
alert('success'); alert('success');
} }
...@@ -459,8 +462,10 @@ export default class Config extends Widget { ...@@ -459,8 +462,10 @@ export default class Config extends Widget {
if(Object.prototype.toString.call( Args.variables) == '[object Undefined]' ){ if(Object.prototype.toString.call( Args.variables) == '[object Undefined]' ){
this.userSetInputData.set(this.setLabel,this.setUserData); this.userSetInputData.set(this.setLabel,this.setUserData);
}else{ }else{
console.log("in");
this.userSetInputData = Args.variables; this.userSetInputData = Args.variables;
this.userSetInputData.set(this.setLabel,this.setUserData); this.userSetInputData.set(this.setLabel,this.setUserData);
console.log(this.userSetInputData);
} }
this.setPathwithVar = this.pathProcessor.FillPathWithVar(this.userSetInputData, this.config.data.set.url); this.setPathwithVar = this.pathProcessor.FillPathWithVar(this.userSetInputData, this.config.data.set.url);
......
src/components/Method/Method.vue
View file @ 2ab139cb
<template> <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="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;"> <div class="column content-table-cell-heading-color is-narrow" style="margin: 0px;padding: 0px;">
<h3>{{EditData.props.title}}</h3> <h3>{{EditData.props.title}}</h3>
</div> </div>
</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>
<div class="columns"> <div class="columns">
...@@ -140,8 +143,9 @@ export default class Method extends Widget { ...@@ -140,8 +143,9 @@ export default class Method extends Widget {
} }
openWindows(){ openWindows(){
var fragment = window.location.origin;
var JsonData = JSON.stringify(this.EditData); 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'); window.open(url+JsonData, "WidgetWindow",'height=100, width=100, top=10, left=10, toolbar=no');
} }
......
src/components/Navigation/Navigation.vue
View file @ 2ab139cb
<template> <template>
<div class="container" id="RightClick"> <div class="container" id="RightClick" style="margin-top: 10px;">
<div class="columns"> <div class="buttons">
<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> <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>
<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> <a v-bind:href="url.url" target="_blank">{{url.url}}</a>
</div> </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> </div>
...@@ -32,6 +46,7 @@ ...@@ -32,6 +46,7 @@
import { WidgetRef } from "@/models/WidgetRef"; import { WidgetRef } from "@/models/WidgetRef";
import PathProcessor from "@/models/PathProcessor"; import PathProcessor from "@/models/PathProcessor";
import StrMapObjChange from "@/models/StrMapObjChange"; import StrMapObjChange from "@/models/StrMapObjChange";
import axios from "axios";
@Component({ @Component({
...@@ -53,6 +68,9 @@ ...@@ -53,6 +68,9 @@
pathId: string = ""; pathId: string = "";
userInputData = new Map<string, string>(); userInputData = new Map<string, string>();
isShowParams: boolean = false; isShowParams: boolean = false;
parentPath!: string;
childrenPath!: string[];
config: WidgetConfig = { config: WidgetConfig = {
WidgetComponentName: "Navigation", WidgetComponentName: "Navigation",
...@@ -65,7 +83,8 @@ ...@@ -65,7 +83,8 @@
EditData = { EditData = {
edit:{ edit:{
url:[], UserInnputUrl:[],
url:'',
type:'Navigation', type:'Navigation',
index:this.refIndex, index:this.refIndex,
}, },
...@@ -75,6 +94,8 @@ ...@@ -75,6 +94,8 @@
action:'get', action:'get',
Args : {}, Args : {},
tempUserInputData:{}, tempUserInputData:{},
parentPath:'',
childrenPath:[],
}, },
}; };
...@@ -143,12 +164,25 @@ ...@@ -143,12 +164,25 @@
openWindows(){ openWindows(){
//windows.open -> another single page application //windows.open -> another single page application
var fragment = window.location.origin;
var JsonData = JSON.stringify(this.EditData); 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'); 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 //app
updateUI() { updateUI() {
......
src/components/State/BoolState.vue
View file @ 2ab139cb
<template> <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="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;"> <div class="column content-table-cell-heading-color is-narrow" style="margin: 0px;padding: 0px;">
<h3>{{EditData.props.title}}</h3> <h3>{{EditData.props.title}}</h3>
</div> </div>
</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;" <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> v-bind:style="{ backgroundColor: activeColor, height: EditData.props.fontSize + 'px' ,width: EditData.props.fontSize + 'px'}"></span>
...@@ -165,8 +165,9 @@ ...@@ -165,8 +165,9 @@
openWindows(){ openWindows(){
var fragment = window.location.origin;
var JsonData = JSON.stringify(this.EditData); 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'); window.open(url+JsonData, "WidgetWindow",'height=100, width=100, top=10, left=10, toolbar=no');
} }
......
src/components/State/State.vue
View file @ 2ab139cb
<template> <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="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;"> <div class="column content-table-cell-heading-color is-narrow" style="margin: 0px;padding: 0px;">
<h3>{{EditData.props.title}}</h3> <h3>{{EditData.props.title}}</h3>
</div> </div>
</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;" <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> 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 { ...@@ -163,8 +163,9 @@ export default class State extends Widget {
openWindows(){ openWindows(){
var fragment = window.location.origin;
var JsonData = JSON.stringify(this.EditData); 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'); 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> <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="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;"> <div class="column content-table-cell-heading-color is-narrow" style="margin: 0px;padding: 0px;">
<h3>{{EditData.props.title}}</h3> <h3>{{EditData.props.title}}</h3>
</div> </div>
</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 class="column is-four-sixths is-offset-one-sixth gauge" ref="gauge" style="height: 250px;overflow:auto;"></div>
</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 <WidgetParams
class="column" class="column"
...@@ -40,7 +41,7 @@ ...@@ -40,7 +41,7 @@
<script lang="ts"> <script lang="ts">
let gauge; //let gauge;
import Vue from "vue"; import Vue from "vue";
import { VueSvgGauge } from "vue-svg-gauge"; import { VueSvgGauge } from "vue-svg-gauge";
import Component from "vue-class-component"; import Component from "vue-class-component";
...@@ -51,7 +52,7 @@ import { Widget } from "@/models/widget"; ...@@ -51,7 +52,7 @@ import { Widget } from "@/models/widget";
import { ResourceInfo } from "@/models/Customview"; import { ResourceInfo } from "@/models/Customview";
import WidgetParams from "@/components/Common/WidgetParams.vue"; import WidgetParams from "@/components/Common/WidgetParams.vue";
import { WidgetRef } from "@/models/WidgetRef"; import { WidgetRef } from "@/models/WidgetRef";
import axios from "axios"; import axios from "../../axios/index";
import PathProcessor from "@/models/PathProcessor"; import PathProcessor from "@/models/PathProcessor";
import StrMapObjChange from "@/models/StrMapObjChange"; import StrMapObjChange from "@/models/StrMapObjChange";
import { forEach } from "typescript-collections/dist/lib/arrays"; import { forEach } from "typescript-collections/dist/lib/arrays";
...@@ -59,6 +60,7 @@ import { map } from "d3"; ...@@ -59,6 +60,7 @@ import { map } from "d3";
import Navigation from "@/components/Common/Navigation.vue"; import Navigation from "@/components/Common/Navigation.vue";
import Windows from "@/components/Common/Windows.vue"; import Windows from "@/components/Common/Windows.vue";
import g2plot from '@antv/g2plot'; import g2plot from '@antv/g2plot';
import WebSocketEvent from '@/axios/websocket';
import { Gauge } from '@antv/g2plot'; import { Gauge } from '@antv/g2plot';
...@@ -88,13 +90,13 @@ export default class Status extends Widget { ...@@ -88,13 +90,13 @@ export default class Status extends Widget {
isShowPath: boolean = false; isShowPath: boolean = false;
isShowParams: boolean = false; isShowParams: boolean = false;
EditPathPoke : string = ""; EditPathPoke : string = "";
fontSize:number = 35; //fontSize:number = 22;
activeColor:string = ''; activeColor:string = '';
value:number = 0; value:number = 0;
tempValue:number = 0; tempValue:number = 0;
gaugeTicks:number[]=[0, 0.2, 0.4, 0.75, 1]; gaugeTicks:number[]=[0, 0.2, 0.4, 0.75, 1];
gaugeColor:string[] = ['red', 'yellow', 'green']; gaugeColor:string[] = ['red', 'yellow', 'green'];
gauge:object;
config: WidgetConfig = { config: WidgetConfig = {
WidgetComponentName: "Status", WidgetComponentName: "Status",
...@@ -110,16 +112,18 @@ export default class Status extends Widget { ...@@ -110,16 +112,18 @@ export default class Status extends Widget {
type:'status', type:'status',
url:this.config.data.url, url:this.config.data.url,
index:this.refIndex, index:this.refIndex,
isShowStateVlaue:false,
}, },
props:{ props:{
fontSize:this.fontSize, fontSize:22,
title:'', title:'',
titleSize:'', titleSize:'',
unit:'',
StateIndicatorFile:{ StateIndicatorFile:{
hh:85, hh:80,
h:70, h:75,
l:20, l:40,
ll:10, ll:20,
max:100, max:100,
min:0, min:0,
}, },
...@@ -142,8 +146,30 @@ export default class Status extends Widget { ...@@ -142,8 +146,30 @@ export default class Status extends Widget {
mounted() { 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'); let containerlist = document.getElementsByClassName('container');
//CreateContainerId //CreateContainerId
...@@ -185,8 +211,9 @@ export default class Status extends Widget { ...@@ -185,8 +211,9 @@ export default class Status extends Widget {
if (menu && !menu.contains(e.target)) if (menu && !menu.contains(e.target))
menu.remove() menu.remove()
} }
console.log(this.$refs);
gauge = new Gauge(this.$refs.gauge,{ this.gauge = new Gauge(this.$refs.gauge,{
percent:0, percent:0,
range: { range: {
ticks: [0, 0.2, 0.4, 0.75, 0.8, 1], ticks: [0, 0.2, 0.4, 0.75, 0.8, 1],
...@@ -199,7 +226,7 @@ export default class Status extends Widget { ...@@ -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 { ...@@ -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[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[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; this.gaugeTicks[5] = 1;
gauge.options.percent = this.value; this.gauge.options.percent = this.value;
gauge.options.range = { this.gauge.options.range = {
ticks: this.gaugeTicks, ticks: this.gaugeTicks,
color: ['red', 'yellow', 'green','yellow','red'], color: ['red', 'yellow', 'green','yellow','red'],
}; };
gauge.render(); this.gauge.render();
if(this.StatusValue >= parseFloat(this.EditData.props.StateIndicatorFile.hh)){ if(this.StatusValue >= parseFloat(this.EditData.props.StateIndicatorFile.hh)){
this.activeColor = 'red'; this.activeColor = 'red';
...@@ -253,9 +280,11 @@ export default class Status extends Widget { ...@@ -253,9 +280,11 @@ export default class Status extends Widget {
openWindows(){ openWindows(){
//windows.open -> another single page application //windows.open -> another single page application
var fragment = window.location.origin;
var JsonData = JSON.stringify(this.EditData); var JsonData = JSON.stringify(this.EditData);
var url ="http://localhost:8080/WindowsAppIndex.html/?"; var httpData = encodeURIComponent(JsonData);
window.open(url+JsonData, "WidgetWindow",'height=100, width=100, top=10, left=10, toolbar=no'); 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 { ...@@ -330,8 +359,8 @@ export default class Status extends Widget {
var pokepath = this.EditData.edit.url; var pokepath = this.EditData.edit.url;
//todo：config文件 //todo：config文件
axios.defaults.timeout = 1000; //axios.defaults.timeout = 1000;
axios.get(pokepath, { /*axios.get(pokepath, {
headers: { headers: {
'Pragma': 'no-cache', 'Pragma': 'no-cache',
'Cache-Control': 'no-cache' 'Cache-Control': 'no-cache'
...@@ -342,6 +371,15 @@ export default class Status extends Widget { ...@@ -342,6 +371,15 @@ export default class Status extends Widget {
}).catch(err => { }).catch(err => {
this.EditData.params.PokedPath = this.config.data.url; this.EditData.params.PokedPath = this.config.data.url;
this.openWindows(); 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 { ...@@ -408,17 +446,25 @@ export default class Status extends Widget {
} }
//app //app
refresh() { async refresh() {
//this.viewLoad(this.EditData.params.Args); //this.viewLoad(this.EditData.params.Args);
gauge.options.percent = this.value; await this.getData(this.pathwithVar);
if(typeof this.StatusValue == 'number'){
gauge.render(); 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.getData(this.pathwithVar);
//this.tempValue = this.value;
} }
...@@ -431,7 +477,7 @@ export default class Status extends Widget { ...@@ -431,7 +477,7 @@ export default class Status extends Widget {
async getData(url: string) { async getData(url: string) {
var apiLoad = url; var apiLoad = url;
await axios /* await axios
.get(apiLoad, { .get(apiLoad, {
headers: { headers: {
Pragma: "no-cache", Pragma: "no-cache",
...@@ -444,7 +490,16 @@ export default class Status extends Widget { ...@@ -444,7 +490,16 @@ export default class Status extends Widget {
{ {
this.StatusValue = "undefined"; 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 Vue from 'vue';
import App from './App.vue'; import App from './App.vue';
import Buefy from 'buefy' import Buefy from 'buefy'
import 'buefy/dist/buefy.css' //import axios from './axios/index'
import 'font-awesome/css/font-awesome.min.css' import axios from './axios/index'
//import hscmap from '@hscmap/vue-window' //import hscmap from '@hscmap/vue-window'
import * as VueWindow from '@hscmap/vue-window' import * as VueWindow from '@hscmap/vue-window'
import router from 'vue-router' import router from 'vue-router'
import ProgressBar from 'vuejs-progress-bar' import ProgressBar from 'vuejs-progress-bar'
import ToggleButton from 'vue-js-toggle-button' import ToggleButton from 'vue-js-toggle-button'
Vue.use(Buefy)
Vue.use(ToggleButton) Vue.use(ToggleButton)
Vue.use(ProgressBar) Vue.use(ProgressBar)
...@@ -26,7 +32,7 @@ import 'video.js/dist/video-js.css' ...@@ -26,7 +32,7 @@ import 'video.js/dist/video-js.css'
Vue.config.productionTip = false; Vue.config.productionTip = false;
//Vue.use(BootstrapVue) //Vue.use(BootstrapVue)
Vue.use(Buefy)
Vue.use(VueWindow) Vue.use(VueWindow)
Vue.use(VideoPlayer) Vue.use(VideoPlayer)
...@@ -58,6 +64,7 @@ var Appuse = new Vue({ ...@@ -58,6 +64,7 @@ var Appuse = new Vue({
}).$mount('#app'); }).$mount('#app');
//export default Appmain //export default Appmain
Vue.prototype.$axios=axios;
//console.log(Appmain.$children[0].UpdateWidget('111')); //console.log(Appmain.$children[0].UpdateWidget('111'));
window.UpdateWidget = Appuse.$children[0].UpdateWidget; window.UpdateWidget = Appuse.$children[0].UpdateWidget;
......
vue.config.js
View file @ 2ab139cb
...@@ -12,11 +12,11 @@ module.exports = { ...@@ -12,11 +12,11 @@ module.exports = {
}, },
}, },
outputDir: '/Users/igem/Desktop/slide', outputDir: '/Users/igem/Desktop/华科/',
devServer: { devServer: {
proxy: { proxy: {
"/": { "/": {
target: "http://192.168.0.197:8001", target: "http://192.168.0.3:8001",
secure: false, secure: false,
changeOrigin: true 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