基本完成还差widgetparams字号

src/App.vue

@@ -72,7 +72,6 @@ import Thing from "./components/Thing/Thing.vue";
 import State from "./components/State/State.vue";
 // import Gauge from "./components/Gauge/Gauge.vue";
 
-Vue.use(VueRouter)
 //this is the view selecotr class
 @Component({
   components: {

src/components/Common/Navigation.vue

-<template id="setBasicParams">
+<template id="Navigation">
 <div>
     <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 v-show="isShowNavigation&&isShowParentPath" style="width:100%;height:25px">
+        <b-link :href="parentPath" class="smallFont" style="float:left">parentPath:{{ parentPath }}</b-link>
+        <!-- <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 v-show="isShowNavigation" v-for="(path, index) in childrenPath" :key="index" style="width:100%;height:25px">
+        <b-link :href="path" class="smallFont" style="float:left">childrenPath:{{path}}</b-link>
+        <!-- <a class="smallFont" :href= "path" style="float:left">childrenPath:{{path}}</a> -->
     </div>
 </div>
 </template>
 
-
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";
 import axios from "axios";

src/components/State/State.vue

@@ -7,10 +7,11 @@
       <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"></div>
+      <div v-show="isShowPath"><hr /></div>
     </b-row>
-    <div style="width:100%;border-style: solid; border-width: 1px;">
-      <p style="float:left;" class="largeFont">{{ StatusValue }}</p>
+    <div style="width:100%">
+      <span style="float:left;" class="largeFont">{{ StatusValue }}</span>
+      <div v-show="isShowPath"><hr /></div>
     </div>
     <b-input-group size="lg" prepend="path" v-show="isShowPath">
       <b-form-input v-model="config.data.url"></b-form-input>
@@ -25,6 +26,7 @@
   </b-container>
 </template>
 
+
 <script lang="ts">
 import Vue from "vue";
 import { VueSvgGauge } from 'vue-svg-gauge'

src/components/Status/Status.vue

@@ -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);
-  // }
-
-  // destroyed() 
-  // {
-  //   clearInterval(this.timer);
-  // }
+  mounted()
+  {
+    this.timer = setInterval(this.refresh,1000);
+  }
+
+  destroyed() 
+  {
+    clearInterval(this.timer);
+  }
 
   updateUI() {
     this.isShowPath = false;