还差nivigation和样式

src/components/Common/Navigation.vue

 <template id="setBasicParams">
 <div>
-    <b-dropdown id="dropdown-1" text="Navigation" variant="primary">
-        <b-dropdown-item v-show="isShowParentPath">
-            <a class="smallFont" :href="parentPath" style="float:left">parentPath:{{ parentPath }}</a>
-        </b-dropdown-item>
-        <b-dropdown-item v-for="path in childrenPath" :key="path">
-          <a class="smallFont" :href= "path" style="float:left">childrenPath:{{path}}</a><br>
-        </b-dropdown-item>
-    </b-dropdown>  
+    <br>
+    <b-button variant="primary" class="smallFont" @click="showNavigation" style="float:right">Navigation</b-button>
+    <br>
+    <div v-show="isShowNavigation&&isShowParentPath">
+        <a class="smallFont" :href="parentPath" style="float:left">parentPath:{{ parentPath }}</a>
+    </div>
+    <div v-show="isShowNavigation" v-for="(path, index) in childrenPath" :key="index">
+        <a class="smallFont" :href= "path" style="float:left">childrenPath:{{path}}</a><br>
+    </div>
 </div>
 </template>
 
@@ -34,6 +35,7 @@ export default class Navigation extends Vue {
     parentPath!:string;
     childrenPath!:string[];
     isShowParentPath:boolean = false;
+    isShowNavigation:boolean = false;
 
     @Watch("url")
     onUrlChanged(){
@@ -52,6 +54,11 @@ export default class Navigation extends Vue {
         }
         this.$forceUpdate();
     }
+    
+    showNavigation()
+    {
+        this.isShowNavigation = !this.isShowNavigation;
+    }
 
 }
 </script>

src/components/Common/WidgetParams.vue

 <template>
   <div style="width:100%">
     <div v-for="(label, index) in userInputData.keys()" :key="index">
-      <b-input-group style="margin:5px">
-        <b-input-group-text class="smallFont">{{label}}</b-input-group-text>
-        <b-form-input class="smallFont" v-model="tempUserInputData[label]" ></b-form-input>
+      <b-input-group size="lg" style="margin:5px">
+        <b-input-group-text>{{label}}</b-input-group-text>
+        <b-form-input v-model="tempUserInputData[label]" ></b-form-input>
       </b-input-group>
     </div>
     <div style="width:100%;margin:5px">

src/components/Config/Config.vue

@@ -23,10 +23,10 @@
     <div v-show="isShowGetPath">
       <hr />
     </div>
-    <b-input-group class="smallFont" prepend="getPath" v-show="isShowGetPath">
+    <b-input-group size="lg" prepend="getPath" v-show="isShowGetPath">
       <b-form-input v-model="config.data.get.url"></b-form-input>
       <b-input-group-append>
-        <b-button @click="updateGetUI" size="sm" text="Button" variant="primary">OK</b-button>
+        <b-button @click="updateGetUI" text="Button" variant="primary">OK</b-button>
         <b-button variant="info" @click="getPathPoke">poke</b-button>
       </b-input-group-append>
     </b-input-group>
@@ -43,10 +43,10 @@
     <div>
       <hr v-show="isShowSetPath" />
     </div>
-    <b-input-group class="smallFont" prepend="setPath" v-show="isShowSetPath">
+    <b-input-group size="lg" prepend="setPath" v-show="isShowSetPath">
       <b-form-input v-model="config.data.set.url"></b-form-input>
       <b-input-group-append>
-        <b-button @click="updateSetUI" size="sm" text="Button" variant="primary">OK</b-button>
+        <b-button @click="updateSetUI" text="Button" variant="primary">OK</b-button>
         <b-button variant="info" @click="setPathPoke">poke</b-button>
       </b-input-group-append>
     </b-input-group>

src/components/Method/Method.vue

@@ -13,10 +13,10 @@
       <span style="float:left;" class="largeFont">{{ StatusValue }}</span>
       <div v-show="isShowPath"><hr /></div>
     </div>
-    <b-input-group class="smallFont" prepend="path" v-show="isShowPath">
+    <b-input-group size="lg"  prepend="path" v-show="isShowPath">
       <b-form-input v-model="config.data.url"></b-form-input>
       <b-input-group-append>
-        <b-button @click="updateUI" size="sm" text="Button" variant="primary">OK</b-button>
+        <b-button @click="updateUI" text="Button" variant="primary">OK</b-button>
         <b-button variant="info" @click="pathPoke">poke</b-button>
       </b-input-group-append>
     </b-input-group>

src/components/State/State.vue

@@ -7,16 +7,15 @@
       <b-col>
         <b-button @click="showPathConfig" variant="primary" style="float:right"><span class="glyphicon glyphicon-cog"></span></b-button>
       </b-col>
-      <div v-show="isShowPath"><hr /></div>
+      <div v-show="isShowPath"></div>
     </b-row>
-    <div style="width:100%">
-      <span style="float:left;" class="largeFont">{{ StatusValue }}</span>
-      <div v-show="isShowPath"><hr /></div>
+    <div style="width:100%;border-style: solid; border-width: 1px;">
+      <p style="float:left;" class="largeFont">{{ StatusValue }}</p>
     </div>
-    <b-input-group class="smallFont" prepend="path" v-show="isShowPath">
+    <b-input-group size="lg" prepend="path" v-show="isShowPath">
       <b-form-input v-model="config.data.url"></b-form-input>
       <b-input-group-append>
-        <b-button @click="updateUI" size="sm" text="Button" variant="primary">OK</b-button>
+        <b-button @click="updateUI" text="Button" variant="primary">OK</b-button>
         <b-button variant="info" @click="pathPoke">poke</b-button>
       </b-input-group-append>
     </b-input-group>

src/components/Status/Status.vue

@@ -13,10 +13,10 @@
       <span style="float:left;" class="largeFont">{{ StatusValue }}</span>
       <div v-show="isShowPath"><hr /></div>
     </div>
-    <b-input-group class="smallFont" prepend="path" v-show="isShowPath">
+    <b-input-group size="lg" prepend="path" v-show="isShowPath">
       <b-form-input v-model="config.data.url"></b-form-input>
       <b-input-group-append>
-        <b-button @click="updateUI" size="sm" text="Button" variant="primary">OK</b-button>
+        <b-button @click="updateUI" text="Button" variant="primary">OK</b-button>
         <b-button variant="info" @click="pathPoke">poke</b-button>
       </b-input-group-append>
     </b-input-group>
@@ -74,15 +74,15 @@ export default class Status extends Widget {
     this.config.data.userInputData = this.strMapObjChange.strMapToObj(this.userInputData);
   }
 
-  mounted()
-  {
-    this.timer = setInterval(this.refresh,1000);
-  }
+  // mounted()
+  // {
+  //   this.timer = setInterval(this.refresh,1000);
+  // }
 
-  destroyed() 
-  {
-    clearInterval(this.timer);
-  }
+  // destroyed() 
+  // {
+  //   clearInterval(this.timer);
+  // }
 
   updateUI() {
     this.isShowPath = false;

src/components/Thing/Thing.vue

@@ -39,6 +39,10 @@ export default class Thing extends Widget {
     this.config.data.url.replace('$startPath$', startPath);
   }
 
+  samplePoke(sample:any){}
+
+  pathPoke(){}
+
   parentUpdate(payload: UpdatePayload): void {
     
   }

src/components/WaveView/WaveView.vue

 <template>
 <div class="waveView">
-    <showViewInfo :pathId="pathId"></showViewInfo>
+    <showViewInfo ref="showViewInfo" :pathId="pathId" @showPathIdConfig="showPathIdConfig"></showViewInfo>
     <div ref="wave">
     
     </div>
-    <setBasicParams ref="setBasicParams" @getPathId="getPathId" @updateConfig="updateConfig" :wave="wave" :setConfig='config'></setBasicParams>
-    <Navigation ref="FamilyLink" :url="config.data.url"></Navigation>
+    <setBasicParams ref="setBasicParams" @getPathId="getPathId" @updateConfig="updateConfig" :wave="wave" :setConfig='config' @pathPoke="pathPoke"></setBasicParams>
+    <Navigation ref="FamilyLink" :url="config.data.url" style="margin-top:30px"></Navigation>
 </div>
 </template>
 
@@ -71,6 +71,9 @@ export default class waveView extends Widget {
     }
     parentUpdate(payload: UpdatePayload): void {
 
+    }
+    showPathIdConfig(){
+        (this.$refs.setBasicParams as setBasicParams).showPathIdConfig();
     }
     refresh() {
         (this.$refs.setBasicParams as setBasicParams).refresh();
@@ -87,44 +90,43 @@ export default class waveView extends Widget {
     updateConfig(data:WidgetConfig){
         this.config = data;
     }
-      samplePoke(sample:any)
-  {
-    var samplePath = sample.CFET2CORE_SAMPLE_PATH;
-    var pokedPath:string;
-    pokedPath = samplePath;
-    var count:number = 0;
+    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;
+        var temp = sample.Actions.get.Parameters;
+        temp = JSON.parse(JSON.stringify(temp));
+        console.log(temp);
+        temp = this.strMapObjChange.objToStrMap(temp);
+        console.log(temp);
+        var Parameters:Map<string, string>;
+        Parameters = temp;
 
-    Parameters.forEach((value , key) =>{
-          count++;
-          if(count == 1)
-          {
-              pokedPath = pokedPath + "?";
-          }
-           pokedPath = pokedPath + key + "=$" + key + "$&";
+        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;
   }
-
   pathPoke()
   {
-      var f = this.config.data.url; 
-      var pokepath = "a";
-      pokepath = f;
-      axios.get(pokepath).then(response => {
+    var f = this.config.data.url; 
+    var pokepath = "a";
+    pokepath = f;
+    axios.get(this.config.data.url).then(response => {
         this.samplePoke(response.data);
-        this.updateUI();
-      })
+    })
   }
 }
 </script>

src/components/WaveView/setBasicParams.vue

-<template id="setBasicParams">
-  <div class="panel-body row">
+<template>
+  <div>
     <div v-show="isShowCog" style="width:100%">
-      <b-input-group prepend="Channel Path">
+      <b-input-group size="lg" prepend="Channel Path">
         <b-input v-model="config.data.url" ></b-input>
         <b-input-group-addon>
           <b-button variant="primary" @click="getPathIdParams">OK<span class="glyphicon glyphicon-save"></span></b-button>
-          <!-- <b-button variant="info" @click="">poke</b-button> -->
+          <b-button variant="info" @click="pathPoke">poke</b-button>
         </b-input-group-addon>
       </b-input-group>
     </div>
     <WidgetParams ref="WidgetParams" v-show="isShowLoad" action="get" @updataVariables="viewLoad"></WidgetParams>
-    <b-button variant="primary" @click="showPathIdConfig" style="width:100%">
-      <span class="glyphicon glyphicon-cog"></span>
-    </b-button>
   </div>
 </template>
 
@@ -24,7 +21,7 @@ import global_ from '@/components/Common/global.vue';
 import { WidgetConfig } from "@/models/WidgetConfig";
 import { UpdatePayload } from "@/models/UpdatePayload";
 import PathProcessor from "@/models/PathProcessor";
-import { forEach } from "typescript-collections/dist/lib/arrays";
+import { forEach, indexOf } from "typescript-collections/dist/lib/arrays";
 import { map } from "d3";
 import WidgetParams from "@/components/Common/WidgetParams.vue";
 import StrMapObjChange from "@/models/StrMapObjChange";
@@ -72,6 +69,9 @@ export default class setBasicParams extends Vue {
     };
     this.viewLoad(Args);
   }
+  pathPoke(){
+    this.$emit("pathPoke");
+  }
   setConfig(config: WidgetConfig) {
     (this.$refs.WidgetParams as WidgetParams).setVariableInput(config.data.userInputData);
     this.config = config;
@@ -93,7 +93,6 @@ export default class setBasicParams extends Vue {
     }
     this.updateConfig();
     var url = this.config.data.url;
-    this.pathId = url.slice(0, url.indexOf("/"));
     (this.$refs.WidgetParams as WidgetParams).setVariableList(
       this.pathProcessor.extractVarFromPath(url)
     );
@@ -118,11 +117,23 @@ export default class setBasicParams extends Vue {
       this.config.data.userInputData,
       this.config.data.url
     );
-    console.log(this.config);
+    var first = url.indexOf("/");
+    var second = url.indexOf("/", first+1);
+    var third = url.indexOf("/", second+1)
+    this.pathId = url.slice(second+1, third);
+    var thingPath = url.slice(0, url.indexOf('/', 2))
     var path = this.pathId;
-    this.$emit("getPathId", path);
-    await this.getData(url);
-    await this.getDataTimeAxis(url);
+    var dealPath = {
+      thingPath:thingPath,
+      path:path
+    }
+    var dealFillPath = {
+      url:url.slice(url.indexOf('/', 1)+1),
+      thingPath:thingPath
+    }
+    this.$emit("getPathId", dealPath);
+    await this.getData(dealFillPath);
+    await this.getDataTimeAxis(dealFillPath);
     var myPlot = this.wave;
     var data_initial = [
       {
@@ -223,18 +234,19 @@ export default class setBasicParams extends Vue {
       displaylogo: false
     };
 
-    // Plotly.newPlot(myPlot, data_update, data_layout, config);
+    Plotly.newPlot(myPlot, data_update, data_layout, config);
   }
-  async getData(url: string) {
-    var apiLoad = "/dataserver" + "/DataByTimeFuzzy/" + url;//改
+  async getData(url: any) {
+    var apiLoad = url.thingPath + "/DataByTimeFuzzy/" + url.url;
+    console.log(apiLoad);//改
     await axios.get(apiLoad).then(response => {
-      this.temp.data = response.data.ObjectVal;
+      this.temp.data = response.data.CFET2CORE_SAMPLE_VAL;
     });
   }
-  async getDataTimeAxis(url: string) {
-    var apiLoad = "/dataerver" + "/DataByTimeFuzzyTimeAxis/" + url;
+  async getDataTimeAxis(url: any) {
+    var apiLoad = url.thingPath + "/DataByTimeFuzzyTimeAxis/" + url.url;
     await axios.get(apiLoad).then(response => {
-      this.temp.dataTimeAxis = response.data.ObjectVal;
+      this.temp.dataTimeAxis = response.data.CFET2CORE_SAMPLE_VAL;
     });
   }
 }

src/components/WaveView/showViewInfo.vue

@@ -2,7 +2,10 @@
     <div class="largeFont" style="float:left width:100%">
         <span>Basic Path :&nbsp;{{ basePathId }}</span><br>
         <span> Rate: {{ sampleId }}</span><br>
-        <span>length: {{ lengthId }}</span><br>
+        <span>length: {{ lengthId }}</span>
+        <b-button variant="primary" style="float:right">
+            <span class="glyphicon glyphicon-cog" @click="showPathIdConfig"></span>
+        </b-button>
         <hr />
     </div>
 </template>
@@ -18,34 +21,37 @@ export default class showViewInfo extends Vue {
     sampleId: string = '';
     lengthId: string = '';
     @Watch('pathId')
-    onPathIdChanged(val:string, oldVal:string) {
+    onPathIdChanged(val:any, oldVal:any) {
         this.show(val);
     }
+
+    showPathIdConfig(){
+        this.$emit("showPathIdConfig");
+    }
     async show(pathId:string) {
-        this.getBasePath();
+        this.getBasePath(pathId);
         this.getSamplerate(pathId);
         this.getLength(pathId);
     }
-    async getBasePath() {
-        var apiLoad = "/dataserver" + '/basepath';
+    async getBasePath(pathId:any) {
+        var apiLoad = pathId.thingPath + '/basepath';
         await axios.get(apiLoad)
         .then((response) => {
-            this.basePathId = response.data.ObjectVal;
+            this.basePathId = response.data.CFET2CORE_SAMPLE_VAL;
         })
     }
-    async getSamplerate(pathId:string) {
-        var apiLoad = "/dataserver" + '/samplerate/' + pathId;
+    async getSamplerate(pathId:any) {
+        var apiLoad = pathId.thingPath + '/samplerate/' + pathId.path;
         await axios.get(apiLoad)
         .then((response) => {
-            this.sampleId = response.data.ObjectVal;
+            this.sampleId = response.data.CFET2CORE_SAMPLE_VAL;
         })
     }
-    async getLength(pathId:string) {
-        var apiLoad = "/dataserver" + '/length/' + pathId;
-        console.log(apiLoad);
+    async getLength(pathId:any) {
+        var apiLoad = pathId.thingPath + '/length/' + pathId.path;
         await axios.get(apiLoad)
         .then((response) => {
-            this.lengthId = response.data.ObjectVal;
+            this.lengthId = response.data.CFET2CORE_SAMPLE_VAL;
         })
     }
 }