customview自动生成界面

src/App.vue

@@ -7,10 +7,17 @@
         </b-dropdown-item>
       </b-dropdown>
       <b-button @click="saveWidgetList" style="margin-left:2%" variant="primary">Save</b-button>
-      <b-form-file  id="file" type="file" @change="loadTextFromFile" placeholder="Choose a widgetTemplate file to laod" accept=".json" style="width:30%;margin-left:2%" />
+      <b-button @click="UIGenerateAutomatic" style="margin-left:2%" variant="primary">test</b-button>
+      <b-form-file
+        id="file"
+        type="file"
+        @change="loadTextFromFile"
+        placeholder="Choose a widgetTemplate file to laod"
+        accept=".json"
+        style="width:30%;margin-left:2%"
+      />
     </b-navbar>
 
-
     <grid-layout
       :layout.sync="widgetList"
       :col-num="12"
@@ -22,18 +29,21 @@
       :margin="[10, 10]"
       :use-css-transforms="true"
     >
-       <grid-item v-for="(widget) in widgetList"
+      <grid-item
+        v-for="(widget) in widgetList"
         :x="widget.x"
         :y="widget.y"
         :w="widget.w"
         :h="widget.h"
         :i="widget.i"
-                   :key="widget.i">
-            <div style="height:20px;background-color:rgb(0, 123, 255)"> </div>
+        :key="widget.i"
+      >
+        <div style="border-color: rgb(206, 212, 218);">
+          <div style="height:20px;background-color:rgb(0, 123, 255)"></div>
           <component :is="widget.widgetComponentName" :ref="widget.ref"></component>
+        </div>
       </grid-item>
     </grid-layout>
-
   </div>
 </template>
 
@@ -81,23 +91,50 @@ export default class App extends Vue {
     this.isShowAddWidget = !this.isShowAddWidget;
   }
 
-  async UIAutomaticGenerated() {
-    var fragment = window.location.hash;
+
+  UIGenerateAutomatic() {
+  // var fragment = window.location.hash;
+  var fragment = "#/card";
   if (fragment != "#") {
-      fragment = fragment.substring(1,fragment.length-1);
-      var customViewURL = "/customView" + fragment;
-      await axios.get(customViewURL).then(response => {
-        var widgets = Object.assign(
+    fragment = fragment.substring(1,fragment.length);
+    var customViewURL = "customView/template" + fragment;
+    axios.get(customViewURL).then(response => {
+      if(response.data.CFET2CORE_SAMPLE_ISVALID == false || response.data.CFET2CORE_SAMPLE_VAL == null)
+      {
+        //直接访问对应的值
+        var dataURL = fragment;
+        axios.get(fragment).then(response => {
+          
+        }
+      }
+      else{
+        //返回有值的customview template，进行load处理
+          var customviewTemplate:string;
+          customviewTemplate = response.data.CFET2CORE_SAMPLE_VAL;
+           console.log(customviewTemplate);
+
+          var widgets;
+          widgets = Object.assign(
           new AllWidgetConfig(),
-        JSON.parse(response.data.ObjectVal)
-      );
+          JSON.parse(customviewTemplate));
+          console.log(widgets);
+
           this.widgetList = widgets.widgetList;
           this.lastWidgetIndex = Number(widgets.currentRef);
-       this.importActiveWidgetList();
+          this.$forceUpdate();
 
+          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);
+           }                                      
+          this.importActiveWidgetList();
       }); 
+
       }
+    })    
   }
+}
 
   exportActiveWidgetList(): AllWidgetConfig {
     for (var widget of this.widgetList) {
@@ -189,7 +226,7 @@ export default class App extends Vue {
   text-align: center;
   color: #2c3e50;
 }
-.Widget{
+.Widget {
   width: 100%;
   border-color: rgb(206, 212, 218);
 }

src/components/Common/WidgetParams.vue

@@ -7,7 +7,7 @@
       </div>
     </div>
     <div class="col-md-1">
-      <button type="button" class="btn btn-primary btn-mid" @click="update">
+      <button type="button" class="btn btn-primary btn-mid" style="float:right" @click="update">
         <b>{{ action }}</b>
         <span class="glyphicon glyphicon-save"></span>
       </button>

src/components/Method/Method.vue

 <template>
-  <div class="Method">
-    <p>{{ config.data.url }}</p>
-    <p>{{ MethodResponse }}</p>
-    <button @click="showPathConfig">Setting</button>
-    <div v-show="isShowPath">
-      <input v-model="config.data.url" />
-      <button @click="updateUI">OK</button>
-    </div>
-    <WidgetParams ref="WidgetParams" v-show="isShowParams" action="invoke" :parentUserInputData="userInputData" @updataVariables="viewLoad"></WidgetParams>
+  <b-container class="bv-example-row">
+    <b-row style="margin-top:10px">
+      <b-col>
+        <span style="float:left;font-size:20px">path: {{ config.data.url }}</span>
+      </b-col>
+      <b-col>
+        <b-button @click="showPathConfig" variant="primary" style="float:right"><span class="glyphicon glyphicon-cog"></span></b-button>
+      </b-col>
+      <hr />
+    </b-row>
+    <div style="width:100%">
+      <span style="float:left;font-size:20px">{{ StatusValue }}</span>
+      <hr />
     </div>
+    <b-input-group 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-input-group-append>
+    </b-input-group>
+    <hr/>
+    <WidgetParams ref="WidgetParams" v-show="isShowParams&&isShowPath" action="invoke"  @updataVariables="viewLoad" ></WidgetParams>
+  </b-container>
 </template>
 
 <script lang="ts">
@@ -35,7 +48,7 @@ export default class Method extends Widget {
   pathProcessor = new PathProcessor();
   strMapObjChange = new StrMapObjChange();
   WidgetComponentName: string = "Method";
-  MethodResponse: string = "";
+  StatusValue: string = "";
   pathId: string = "";
   userInputData = new Map<string, string>();
   isShowPath: boolean = false;
@@ -48,7 +61,6 @@ export default class Method extends Widget {
       userInputData: ""
     }
   };
-  tempUrl: string = "";
 
   created() {
     // this.config.data.userInputData = this.userInputData;
@@ -56,17 +68,15 @@ export default class Method extends Widget {
   }
 
   updateUI() {
+    this.isShowParams = true;
     var url = this.config.data.url;
     this.pathId = url.slice(0, url.indexOf("/"));
     (this.$refs.WidgetParams as WidgetParams).setVariableList(
       this.pathProcessor.extractVarFromPath(url)
     );
-    this.isShowParams = true;
-    this.isShowPath = false;
   }
 
   showPathConfig() {
-    this.isShowParams = !this.isShowParams;
     this.isShowPath = !this.isShowPath;
   }
 
@@ -90,9 +100,15 @@ export default class Method extends Widget {
     (this.$refs.WidgetParams as WidgetParams).setVariableInput(this.userInputData);
   }
 
+    replaceStartPath(startPath:string):void
+    {
+        this.config.data.url.replace('$startPath$', startPath);
+    }
+
   parentUpdate(payload: UpdatePayload): void {
     
   }
+
   refresh() {
     var Args: UpdatePayload = {
       action: "invoke",
@@ -106,7 +122,7 @@ export default class Method extends Widget {
   async getData(url: string) {
     var apiLoad = url;
     await axios.put(apiLoad).then(response => {
-      this.MethodResponse = response.data.ObjectVal;
+      this.StatusValue = response.data.ObjectVal;
     });
   }
 
@@ -130,4 +146,5 @@ export default class Method extends Widget {
   width: 100%;
   height: auto;
 }
+
 </style>
\ No newline at end of file

src/components/Status/Status.vue

 <template>
-  <!-- <b-card class="Status">
-    <p>{{ config.data.url }}</p>
-    <button @click="showPathConfig">Setting</button>
-    <p>{{ StatusValue }}</p>
-    <div v-show="isShowPath">
-      <input v-model="config.data.url" />
-      <button @click="updateUI">OK</button>
-    </div>
-    <WidgetParams ref="WidgetParams" v-show="isShowParams" action="get"  @updataVariables="viewLoad" ></WidgetParams>
-  </b-card> -->
   <b-container class="bv-example-row">
     <b-row style="margin-top:10px">
       <b-col>
@@ -23,11 +13,14 @@
       <span style="float:left;font-size:20px">{{ StatusValue }}</span>
       <hr />
     </div>
-    <div v-show="isShowPath">
-      <input v-model="config.data.url" />
-      <button @click="updateUI">OK</button>
-    </div>
-    <WidgetParams ref="WidgetParams" v-show="isShowParams" action="get"  @updataVariables="viewLoad" ></WidgetParams>
+    <b-input-group 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-input-group-append>
+    </b-input-group>
+    <hr/>
+    <WidgetParams ref="WidgetParams" v-show="isShowParams&&isShowPath" action="get"  @updataVariables="viewLoad" ></WidgetParams>
   </b-container>
 </template>
 
@@ -75,17 +68,15 @@ export default class Status extends Widget {
   }
 
   updateUI() {
+    this.isShowParams = true;
     var url = this.config.data.url;
     this.pathId = url.slice(0, url.indexOf("/"));
     (this.$refs.WidgetParams as WidgetParams).setVariableList(
       this.pathProcessor.extractVarFromPath(url)
     );
-    this.isShowParams = true;
-    this.isShowPath = false;
   }
 
   showPathConfig() {
-    this.isShowParams = !this.isShowParams;
     this.isShowPath = !this.isShowPath;
   }
 
@@ -105,13 +96,13 @@ export default class Status extends Widget {
     temp = this.strMapObjChange.objToStrMap(temp);
      console.log(temp);
     this.userInputData = temp;
-    console.log(this.userInputData);
+    console.log(this.userInputData);/*  */
     (this.$refs.WidgetParams as WidgetParams).setVariableInput(this.userInputData);
   }
 
-  replaceStartPath(startPath:string)
+  replaceStartPath(startPath:string):void
   {
-
+    this.config.data.url.replace('$startPath$', startPath);
   }
 
   parentUpdate(payload: UpdatePayload): void {

src/components/WaveView/WaveView.vue

@@ -67,6 +67,11 @@ export default class waveView extends Widget {
         }
     } 
     
+    replaceStartPath(startPath:string):void
+    {
+        this.config.data.url.replace('$startPath$', startPath);
+    }
+
     getConfig(): WidgetConfig {
         return this.config;
     }

src/models/customview.ts

+export class CustomViewConfig {
+    public CFET2CORE_SAMPLE_RESOURCETYPE: any;
+    public CFET2CORE_SAMPLE_VAL: any;
+    public CFET2CORE_SAMPLE_PATH: any;
+    public CFET2CORE_SAMPLE_ISREMOTE: any;
+    public CFET2CORE_SAMPLE_ISVALID: any;
+    public CFET2CORE_SAMPLE_ERRORMESSAGE: any;
+  }
\ No newline at end of file

src/models/wiget.ts

@@ -15,7 +15,17 @@ export abstract class Widget extends Vue {
   public abstract parentUpdate(paylosd: UpdatePayload): void;
   public abstract refresh(): void;
   public abstract updateUI(): void;
-  // public abstract replaceStartPath(startPath:string):void;
+  public abstract replaceStartPath(startPath:string):void;
+
+  public pathPoke()
+  {
+
+  }
+
+  public samplePoke()
+  {
+
+  }
 
 //   public poke(sample: object): PokePath
 //   {

vue.config.js

 module.exports = {
     devServer: {
       proxy: {
-        "/dataserver": {
-          target: "http://localhost:8002",
+        "/": {
+          target: "http://localhost:8001",
           secure: false,
           changeOrigin: true
         }