V2

src/App.vue

@@ -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

@@ -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

 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

+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

+
+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

 <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

 <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

 <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

 <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

 <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

 <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/Status.vue

 <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

+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

@@ -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
         }