add CustomView

package.json

@@ -8,7 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@antv/g2plot": "^2.0.1",
     "@hscmap/vue-window": "^2.4.2",
+    "@types/d3-geo": "^1.12.0",
+    "@types/d3-sankey": "^0.11.0",
     "@types/plotly.js": "^1.44.25",
     "@types/pubsub-js": "^1.5.18",
     "axios": "^0.19.2",
@@ -28,11 +31,13 @@
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.2",
     "vue-grid-layout": "^2.3.7",
+    "vue-js-toggle-button": "^1.3.3",
     "vue-property-decorator": "^8.4.n0",
     "vue-simple-context-menu": "^3.3.0",
     "vue-svg-gauge": "^1.2.1",
     "vue-video-player": "^5.0.2",
     "vue-wechat-title": "^2.0.5",
+    "vuejs-progress-bar": "^1.2.2",
     "vuex": "^3.1.2",
     "vuex-class": "^0.3.2"
   },

src/App.vue

@@ -77,7 +77,8 @@
           </nav>
 
 
-    <div id="appLeftClick">
+
+    <div id="appLeftClick" style="min-height: 100vh;">
 
 
 
@@ -150,11 +151,14 @@ 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 Navigation from "./components/Navigation/Navigation.vue";
 import WaveView from "./components/WaveView/WaveView.vue";
 import Method from "./components/Method/Method.vue";
 import Config from "./components/Config/Config.vue";
+import BoolConfig from "./components/Config/BoolConfig.vue";
 import Thing from "./components/Thing/Thing.vue";
 import State from "./components/State/State.vue";
+import BoolState from "./components/State/BoolState.vue";
 import VarBroadcast from "./components/VarBroadcast/VarBroadcast.vue";
 import AutoBroadcast from "./components/AutoBroadcast/AutoBroadcast.vue";
 import SlideShow from "./components/SlideShow/SlideShow.vue";
@@ -172,15 +176,18 @@ import Windows from "./components/Common/Windows.vue";
     WaveView,
     Method,
     Config,
+    BoolConfig,
     Thing,
     GridLayout,
     GridItem,
     State,
+    BoolState,
     VarBroadcast,
     AutoBroadcast,
     SlideShow,
     CardReader,
     Windows,
+    Navigation,
   }
 })
 
@@ -206,14 +213,17 @@ export default class App extends Vue {
   availableWidgets = [
     "Status",
     "Config",
+    "BoolConfig",
     "WaveView",
     "Method",
     "Thing",
     "State",
+    "BoolState",
     "VarBroadcast",
     "AutoBroadcast",
     "SlideShow",
-    "CardReader"
+    "CardReader",
+    "Navigation"
   ];
 
 
@@ -310,7 +320,9 @@ export default class App extends Vue {
 
      };
 
+
     var fragment = window.location.hash;
+    console.log("costum"+fragment);
     if (fragment != "#blank" && fragment != "#Blank" && fragment != "#") {
       fragment = fragment.substring(1, fragment.length);
       var customViewURL = "/customView/template" + fragment;
@@ -339,18 +351,34 @@ export default class App extends Vue {
             );
             this.widgetList = widgets.widgetList;
             this.lastWidgetIndex = Number(widgets.currentRef);
-            this.$forceUpdate();
-            //替换startpath
+            //this.$forceUpdate();
+
+            //todo:替换startpath;判断是否存在$startpath$
+
+
+
+              /*for (var wid of this.widgetList) {
+                  if((wid.widgetConfig[1].edit.url).search("startpath") != -1 ){
+                      console.log("in"+(wid.widgetConfig[1].edit.url));
+                      ((this.$refs[wid.ref] as Array<Widget>)[0] as Widget).replaceStartPath( fragment as string);
+                  }
+              }*/
+
+              //Defer the callback to be executed after the next DOM update cycle.
             Vue.nextTick(() => {
-              // fragment = fragment.substring(1,fragment.length);
-              // for (var wid of this.widgetList) {
-              //      ((this.$refs[wid.ref] as Array<Widget>)[0] as Widget).replaceStartPath( fragment as string);
-              //  }
+               /*fragment = fragment.substring(1,fragment.length);
+               for (var wid of this.widgetList) {
+                    ((this.$refs[wid.ref] as Array<Widget>)[0] as Widget).replaceStartPath( fragment as string);
+                }*/
               //刷新值
-              this.importActiveWidgetList();
+              //this.importActiveWidgetList();
               // for (var wid of this.widgetList) {
               //   ((this.$refs[wid.ref] as Array<Widget>)[0] as Widget).refresh();
               // }
+
+                fragment = fragment.substring(1,fragment.length);
+                console.log(fragment);
+                this.importActiveWidgetList(fragment);
             });
           }
           else{
@@ -360,6 +388,7 @@ export default class App extends Vue {
         }).catch(err=>{
             var dataURL = fragment;
             this.dataAccess(dataURL);
+            console.log(dataURL);
         });
     }
 
@@ -383,9 +412,9 @@ export default class App extends Vue {
 
   exportActiveWidgetList(): AllWidgetConfig {
     for (var widget of this.widgetList) {
-      widget.widgetConfig = ((this.$refs[widget.ref] as Array<
-        Widget
-      >)[0] as Widget).getConfig();
+        console.log("innn");
+      widget.widgetConfig = ((this.$refs[widget.ref] as Array<Widget>)[0] as Widget).getConfig();
+        console.log(widget.widgetConfig);
     }
     var widgetConfigList = new AllWidgetConfig();
     widgetConfigList.widgetList = this.widgetList;
@@ -393,10 +422,12 @@ export default class App extends Vue {
     return widgetConfigList;
   }
 
-  importActiveWidgetList() {
+  importActiveWidgetList(fragment:string) {
+      console.log(this.widgetList);
     for (var wid of this.widgetList) {
+        console.log('in');
       ((this.$refs[wid.ref] as Array<Widget>)[0] as Widget).setConfig(
-        wid.widgetConfig as WidgetConfig
+        wid.widgetConfig as WidgetConfig,fragment
       );
     }
   }
@@ -419,13 +450,14 @@ export default class App extends Vue {
         this.importActiveWidgetList();
       });
     };
+
+
   }
 
   saveWidgetList(): void {
     var data = JSON.stringify(this.exportActiveWidgetList());
 
     const blob = new Blob([data]);
-    /*
     if (window.navigator.msSaveOrOpenBlob) {
       // 兼容IE10
       navigator.msSaveBlob(blob, this.fileName);
@@ -436,7 +468,7 @@ export default class App extends Vue {
       aTag.href = URL.createObjectURL(blob);
       aTag.click();
       URL.revokeObjectURL(aTag.href);
-    }*/
+    }
   }
 
   addWidget(widgetName: string): void {

src/Windows/WindowsApp.vue

@@ -20,16 +20,58 @@
 
             </tr>
 
-            <tr v-if="EditData.edit.type != 'config'">
+            <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">
+                        <tr>
+                            <input class="input has-text-primary" v-model="data.url"></tr>
+                        <tr>
+                            <button @click="deleteRow(index)">删除</button>
+                        </tr>
+                    </tbody>
+                </table></td>
+            </tr>
+
+            <tr v-if="EditData.edit.type != 'Navigation'">
                 <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">
+            <tr v-for="(prop,key) in EditData.props" v-if="key != 'StateIndicatorFile'">
                 <th>{{key}}</th>
-                <td> <input class="input has-text-primary" v-model="EditData.props[key]" type="text">{{prop}}</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><input v-if="key != 'titleSize'"  class="input has-text-primary" v-model="EditData.props[key]" type="text">
+                    <div class="select" v-if="key == 'titleSize'">
+                        <select v-model="EditData.props.titleSize">
+                            <option>is-small</option>
+                            <option>is-medium</option>
+                            <option>is-large</option>
+                        </select>
+                    </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>
+
+
+
+
+            <tr v-for="(prop,key) in EditData.props.StateIndicatorFile">
+                <th>{{key}}</th>
+                <td>
+                    <input class="input has-text-primary" v-model="EditData.props.StateIndicatorFile[key]" type="text">
+                </td>
+            </tr>
+
+            <tr v-if="EditData.edit.type == 'state'">
+                <th>ShowStateValue</th>
+                <td>
+                    <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'}"/>
+                </td>
             </tr>
 
 
@@ -45,7 +87,7 @@
                             <div class="field-body">
                                 <div class="field">
                                     <div class="control">
-                                        <input class="input" type="text" v-model="tempUserInputData[label]">
+                                        <input class="input" type="text" v-model="EditData.params.tempUserInputData[label]">
                                     </div>
                                 </div>
                             </div>
@@ -65,6 +107,7 @@
         </table>
 
 
+
     </div>
 
 
@@ -128,10 +171,6 @@ export default class WindowsApp extends Vue {
             this.EditData = data;
         }
 
-        if(this.EditData.props.StateFile != null){
-            this.EditData.props.StateFile = JSON.stringify(this.EditData.props.StateFile);
-            this.EditData.props.StateIndicatorFile = JSON.stringify(this.EditData.props.StateIndicatorFile);
-        }
     }
 
         mounted(){
@@ -144,15 +183,15 @@ export default class WindowsApp extends Vue {
         this.setVariableList(
             this.pathProcessor.extractVarFromPath(this.EditData.params.PokedPath)
         );
-        if(this.EditData.edit.type == 'config'){
-            this.setVariableList(
-                this.pathProcessor.extractVarFromPath(this.EditData.params.GetPokedPath)
-            );
-            this.setVariableList(
-                this.pathProcessor.extractVarFromPath(this.EditData.params.SetPokedPath)
-            );
+
     }
 
+    addInput(){
+        this.EditData.edit.url.push({});
+    }
+
+    deleteRow(index) {
+        this.EditData.edit.url.splice(index, 1);
     }
 
         /*loadTextFromStateFile(ev: any){
@@ -188,7 +227,7 @@ export default class WindowsApp extends Vue {
             target: ["self"]
         };
         this.EditData.params.Args = Args;
-        this.EditData.params.tempUserInputData = this.tempUserInputData;
+        //this.EditData.params.tempUserInputData = this.tempUserInputData;
         window.opener.UpdateWidget(this.EditData);
 
     }
@@ -196,13 +235,8 @@ export default class WindowsApp extends Vue {
 
 
 
-    pathPoke(key:string) {
+    pathPoke() {
         this.isShowParams = true;
-        if(key == 'setPathPoke'){
-            this.EditData.params.action = 'set';
-        }else if(key == 'getPathPoke'){
-            this.EditData.params.action = 'get';
-        }
         window.opener.UpdateWidget(this.EditData);
 
     }
@@ -211,12 +245,10 @@ export default class WindowsApp extends Vue {
 
     setVariableList(path: string[]) {
 
-        console.log(path);
         this.userInputData.clear();
         path.forEach(element => {
             this.userInputData.set(element, '');
         });
-        console.log(this.userInputData);
         this.$forceUpdate();
 
     }
@@ -225,7 +257,7 @@ export default class WindowsApp extends Vue {
 
     getVariableValues(): Map<string, string> {
         for(var key of this.userInputData.keys()) {
-            this.userInputData.set(key, this.tempUserInputData[key]);
+            this.userInputData.set(key, this.EditData.params.tempUserInputData[key]);
         }
 
         return this.userInputData;

src/Windows/main.ts

@@ -5,6 +5,8 @@ import 'buefy/dist/buefy.css'
 import 'font-awesome/css/font-awesome.min.css'
 //import hscmap from '@hscmap/vue-window'
 import * as VueWindow from '@hscmap/vue-window'
+import ToggleButton from 'vue-js-toggle-button'
+Vue.use(ToggleButton)
 import router from 'vue-router'
 
 

src/Windows/models/PathProcessor.ts

@@ -5,6 +5,7 @@ export default class PathProcessor {
         let str = '';
         //取出path中的$ $，数组
         const result = path.match(urlRegExp);
+        console.log(result);
         if (result != null) {
             //遍历map和数组
             variables.forEach((value: string, key: string) => {
@@ -14,6 +15,7 @@ export default class PathProcessor {
                         str = '\$' + label + '\$';
                         //将$xxx$替换成参数值  path为/card0/length/0
                         path = path.replace(str, value);
+                        console.log(path);
                     }
                 });
             });

src/components/Navigation/Navigation.vue

+<template>
+
+
+    <div  class="container" id="RightClick">
+
+        <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>
+
+
+        <div v-for="url in EditData.edit.url" v-if="isShowParams">
+            <a v-bind:href="url.url" target="_blank">{{url.url}}</a>
+        </div>
+
+
+    </div>
+
+
+</template>
+
+
+
+<script lang="ts">
+
+
+    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 { WidgetRef } from "@/models/WidgetRef";
+    import PathProcessor from "@/models/PathProcessor";
+    import StrMapObjChange from "@/models/StrMapObjChange";
+
+
+    @Component({
+        components: {
+
+        }
+    })
+
+
+
+    export default class Navigation extends Widget {
+        @Prop() index!:number;
+        @Prop() refIndex!:number;
+        @Prop() widgetList:WidgetRef[] = [];
+
+        pathProcessor = new PathProcessor();
+        strMapObjChange = new StrMapObjChange();
+        WidgetComponentName: string = "Navigation";
+        pathId: string = "";
+        userInputData = new Map<string, string>();
+        isShowParams: boolean = false;
+
+        config: WidgetConfig = {
+            WidgetComponentName: "Navigation",
+            data: {
+                url: "",
+                displayname:"",
+                userInputData: ""
+            }
+        };
+
+        EditData = {
+            edit:{
+                url:[],
+                type:'Navigation',
+                index:this.refIndex,
+            },
+            props:{
+            },
+            params:{
+                action:'get',
+                Args : {},
+                tempUserInputData:{},
+            },
+        };
+
+
+
+        created() {
+            this.config.data.userInputData = this.strMapObjChange.strMapToObj(
+                this.userInputData
+            );
+        }
+
+
+        mounted() {
+
+            let containerlist = document.getElementsByClassName('container');
+            //CreateContainerId
+
+            var self = this;
+            let RightClickField = containerlist[this.index];
+
+            RightClickField.oncontextmenu = function (e) {
+                e.preventDefault();//demo区域停止原鼠标右击菜单
+                //this.popMenu('itemMenu',100,"100");
+                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;
+                //menu2.setAttribute("onclick", this.openWindows);
+                menu.appendChild(menu2);//menu末尾添加新的节点menu1
+                RightClickField.appendChild(menu);//body末尾添加新的节点menu
+                //盒子跟随鼠标光标。
+                //menu.style.top = $('#RightClick').offset().top;
+                menu.style.left = e.offsetX +"px";
+                menu.style.top = e.offsetY +"px";
+                menu.style.position = 'absolute';
+                //menu.style.top = '${e.clientY}px';
+                //menu.style.left = '${e.clientX}px';
+                console.log(menu.style.top);
+                console.log(menu);
+
+            };
+
+            //全局点击时消失。
+            RightClickField.onclick = e => {
+                let menu = document.querySelector('.menu')
+                if (menu && !menu.contains(e.target))
+                    menu.remove()
+            }
+
+
+        }
+
+
+
+        del(){
+            this.$emit('del', this.index);
+        }
+
+
+        openWindows(){
+            //windows.open -> another single page application
+            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');
+
+        }
+
+
+        //app
+        updateUI() {
+            this.openWindows();
+        }
+
+
+
+        //app
+        getConfig(): [WidgetConfig,object] {
+            return [this.config,this.EditData];
+
+        }
+
+        //app
+        setConfig(setConfigData: [WidgetConfig,object],fragment:string): void {
+            console.log(setConfigData);
+            this.config = setConfigData[0];
+            console.log(this.config);
+            this.EditData = setConfigData[1];
+
+        }
+
+
+
+
+
+    }
+</script>
+
+<style scoped>
+    .waveView {
+        width: 100%;
+        height: auto;
+    }
+
+    .hflex{
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: center;
+
+    }
+
+
+
+
+
+</style>
+

src/components/State/State.vue

 <template>
   <div class="container">
 
-
-    <div class="columns" style="margin-top:10px">
-
-      <span style="float:left;" v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname != ''">{{ config.data.displayname }}</span>
-      <span style="float:left;" v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname == ''">{{ config.data.url }}</span>
-      <input class="input colmumn is-8" type="text" v-show="isShowPath" v-model="config.data.displayname">
-
+    <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;">
+        <h3>{{EditData.props.title}}</h3>
+      </div>
     </div>
 
-    <div class="columns" style="margin-top:5px">
+    <div class="columns" style="padding: 5px;margin-top: 5px;">
       <span style="background-color: #bbb;border-radius: 50%;display: inline-block;"
-            v-bind:style="{ backgroundColor: activeColor, height: fontSize + 'px' ,width: fontSize + 'px'}"></span>
+            v-bind:style="{ backgroundColor: activeColor, height: EditData.props.fontSize + 'px' ,width: EditData.props.fontSize + 'px'}"></span>
+
+      <div class="column is-2" v-bind:style="{ fontColor: activeColor}" v-if="EditData.edit.isShowStateVlaue">{{stateKey}}</div>
 
     </div>
 
@@ -71,8 +70,9 @@ export default class State extends Widget {
   isShowPath: boolean = false;
   isShowParams: boolean = false;
   EditPathPoke : string =  "";
-  fontSize:number = 40;
+  fontSize:number = 60;
   activeColor:string = '#bbb';
+  stateKey:string = '';
 
   config: WidgetConfig = {
     WidgetComponentName: "State",
@@ -84,18 +84,18 @@ export default class State extends Widget {
   };
 
     EditData = {
-        props:{
+        edit:{
             type:'state',
             url:this.config.data.url,
             index:this.refIndex,
-            fontSize:this.fontSize,
-            StateFile:{
-                "0":"yellow",
-                "1":"orange",
-                "2":"green",
-                "255":"red"
+            isShowStateVlaue:false,
         },
-            StateIndicatorFile:null,
+        props:{
+            fontSize:this.fontSize,
+            title:'',
+            titleSize:'',
+            StateFile:'{"Idle":"yellow","prepare":"orange","run":"green","error":"red" }' ,
+            StateIndicator:'{"0":"Idle","1":"prepare","2":"run","255":"error"}',
         },
         params:{
             PokedPath:this.EditPathPoke,
@@ -145,10 +145,6 @@ export default class State extends Widget {
           menu.style.left = e.offsetX +"px";
           menu.style.top = e.offsetY +"px";
           menu.style.position = 'absolute';
-          //menu.style.top = '${e.clientY}px';
-          //menu.style.left = '${e.clientX}px';
-          console.log(menu.style.top);
-          console.log(menu);
 
       };
 
@@ -176,14 +172,13 @@ export default class State extends Widget {
   del()
   {
       this.$emit('del', this.index);
-      console.log("del"+this.index);
   }
 
 
     updateUI() {
         this.isShowPath = false;
         this.EditData.params.PokedPath = this.config.data.url;
-        this.EditData.props.url = this.config.data.url;
+        this.EditData.edit.url = this.config.data.url;
         this.openWindows();
     }
 
@@ -191,35 +186,39 @@ export default class State extends Widget {
     this.isShowPath = !this.isShowPath;
   }
 
-  getConfig(): WidgetConfig {
-    // 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;
+  getConfig(): [WidgetConfig,object] {
+      return [this.config,this.EditData];
   }
 
-  setConfig(widgetConfig: WidgetConfig): void {
-    this.config = widgetConfig;
-    //this.updateUI();
-      (this.$refs.WidgetParams as WidgetParams).setVariableList(
-          this.pathProcessor.extractVarFromPath(this.config.data.url)
-      );
-    //map不能序列化，必须要单独处理，这里的处理方法仅限map<string,string>类型
-    var temp = this.config.data.userInputData;
+  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.userInputData = temp;
-    (this.$refs.WidgetParams as WidgetParams).setVariableInput(
-      this.userInputData
-    );
+      //this.EditData.params.tempUserInputData = temp;
+
+
+      var Args: UpdatePayload = {
+          action: this.EditData.params.action,
+          variables: temp,
+          target: ["self"]
+      };
+
+      this.EditData.params.Args = Args;
+
+      this.viewLoad(Args);
+
   }
 
-    pathPoke(url:string) {
-        this.config.data.url = url;
-        this.EditPathPoke = url;
-        console.log("dddd");
-        var pokepath = url;
+    pathPoke() {
+        this.config.data.url = this.EditData.edit.url;
+        this.EditPathPoke = this.EditData.edit.url;
+        var pokepath = this.EditData.edit.url;
         //todo：config文件
         axios.defaults.timeout =  1000;
         axios.get(pokepath, {
@@ -228,13 +227,14 @@ export default class State extends Widget {
                 'Cache-Control': 'no-cache'
             }
         }).then(response => {
-            console.log("update");
             this.samplePoke(response.data);
             this.updateUI();
+            //test
+            //this.colourViewLoad();
         }).catch(err => {
-            console.log('catch');
+            this.colourViewLoad();
             this.EditData.params.PokedPath = this.config.data.url;
-            this.openWindows();
+            //this.openWindows();
         });
 
         //var url = this.config.data.url;
@@ -269,7 +269,8 @@ export default class State extends Widget {
 
 
   replaceStartPath(startPath: string): void {
-    this.config.data.url.replace("$startPath$", startPath);
+    this.config.data.url = this.config.data.url.replace("$startpath$", startPath);
+    this.EditData.edit.url = this.EditData.edit.url.replace("$startpath$", startPath);
   }
 
   parentUpdate(payload: UpdatePayload): void {
@@ -312,25 +313,20 @@ export default class State extends Widget {
         }
       }).then(response => {
       this.StatusValue = response.data.CFET2CORE_SAMPLE_VAL;
-      switch (this.StatusValue.toString()) {
-        case "0": {
-          this.activeColor = this.EditData.props.StateFile['0'];
-          break;
-        }
-        case "1": {
-          this.activeColor = this.EditData.props.StateFile['1'];
-          break;
-        }
-        case "2": {
-          this.activeColor = this.EditData.props.StateFile['2'];
-          break;
-        }
-        case "255": {
-          this.activeColor = this.EditData.props.StateFile['255'];
-          break;
+        //this.colourViewLoad();
+
+    });
   }
+
+  colourViewLoad(){
+       var stateFile = JSON.parse(this.EditData.props.StateFile);
+       var stateIndicator = JSON.parse(this.EditData.props.StateIndicator);
+
+       this.stateKey = stateIndicator[this.StatusValue];
+       this.activeColor = stateFile[this.stateKey];
+       if(this.activeColor == undefined){
+           this.activeColor = '#bbb';
        }
-    });
   }
 
   //called when widgetParams action clicked
@@ -343,6 +339,7 @@ export default class State extends Widget {
       this.config.data.url
     );
     await this.getData(this.pathwithVar);
+      this.colourViewLoad();
   }
 }
 </script>

src/models/WidgetRef.ts

@@ -5,7 +5,7 @@ export class WidgetRef {
   // the parameters of a resource should be probed by the widget itself
   public widgetComponentName: string = '';
   public ref: string = '';
-  public widgetConfig?: WidgetConfig;
+  public widgetConfig?: [WidgetConfig,object];
   //below is for grid layout
   public x:number=0;
   public y:number=0;

src/models/widget.ts

@@ -11,7 +11,7 @@ export interface PokePath {
 
 export abstract class Widget extends Vue {
   public WidgetComponentName?: string;
-  public abstract setConfig(wid: WidgetConfig): void;
+  public abstract setConfig(wid: WidgetConfig,fragment:string): void;
   public abstract getConfig(): WidgetConfig;
   public abstract parentUpdate(payload: UpdatePayload): void;
   public abstract refresh(): void;

tsconfig.json

 {
   "compilerOptions": {
+    //"declaration": true,  //// xjl add
+    //"resolveJsonModule": true,
+    //"declarationDir": "src/types",
+
     "target": "esnext",
+
     //"target": "es5",
     "module": "esnext",
     //"module": "commonjs",
@@ -14,9 +19,10 @@
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "baseUrl": ".",
+    "noEmit": true,
     "typeRoots": ["./src/types"],
     "types": [
-      "webpack-env"
+      "webpack-env",
     ],
     "paths": {
       "@/*": [
@@ -30,12 +36,18 @@
       "scripthost"
     ]
   },
+
+
   "include": [
     "src/**/*.ts",
     "src/**/*.tsx",
     "src/**/*.vue",
     "tests/**/*.ts",
-    "tests/**/*.tsx", "node_modules/vue-grid-layout/dist/vue-grid-item.d.ts"
+    "tests/**/*.tsx",
+    "node_modules/vue-grid-layout/dist/vue-grid-item.d.ts",
+    "/node_modules/@antv/g2plot/lib/index.d.ts",
+    "src/types/g2plot/g2plot.d.ts",
+    "src/types/g2plot/global.d.ts"
   ],
   "exclude": [
     "node_modules"

tsconfig2.json

@@ -3,7 +3,7 @@
     /* Basic Options */
     // "incremental": true,                   /* Enable incremental compilation */
     //"target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
-   // "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+   //"module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
     // "lib": [],                             /* Specify library files to be included in the compilation. */
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
@@ -15,8 +15,8 @@
     // "outDir": "./js",                        /* Redirect output structure to the directory. */
     // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
     // "composite": true,                     /* Enable project compilation */
-    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
-    // "removeComments": true,                /* Do not emit comments to output. */
+     //"tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
+     //"removeComments": true,                /* Do not emit comments to output. */
     // "noEmit": true,                        /* Do not emit outputs. */
     // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
     // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */

vue.config.js

@@ -16,7 +16,7 @@ module.exports = {
     devServer: {
       proxy: {
         "/": {
-          target: "http://192.168.0.195:8001",
+          target: "http://192.168.0.197:8001",
           secure: false,
           changeOrigin: true
         }