Skip to content

GitLab

W
WidgetUI
Commit 75e43eaf authored by WuFeiyang's avatar WuFeiyang
Browse files
Options

加上poke

parent 4755e8ea
Hide whitespace changes
Inline Side-by-side
Showing with 156 additions and 39 deletions
src/App.vue
View file @ 75e43eaf
......@@ -58,7 +58,7 @@ import { WidgetRef } from "./models/WidgetRef";
import { WidgetConfig, AllWidgetConfig } from "./models/WidgetConfig";
import { Action, UpdatePayload } from "./models/UpdatePayload";
import { Widget } from "./models/wiget";
import { Actions } from "./models/customview";
import { ResourceInfo } from "./models/Customview";
//when add more available widgets add ref to the widgets
import Status from "./components/Status/Status.vue";
......@@ -94,6 +94,14 @@ export default class App extends Vue {
this.isShowAddWidget = !this.isShowAddWidget;
}
pokeAndUpdateUI(ref:string, sample:ResourceInfo[], samplePath:string)
{
Vue.nextTick(() => {
console.log(this.$refs[ref]);
((this.$refs[ref] as Array<Widget>)[0] as Widget).samplePoke(sample,samplePath);
((this.$refs[ref] as Array<Widget>)[0] as Widget).updateUI();
})
}
UIGenerateAutomatic() {
// var fragment = window.location.hash;
......@@ -107,31 +115,68 @@ export default class App extends Vue {
//直接访问对应的值
var dataURL = fragment;
axios.get(fragment).then(response => {
console.log(response.data.Actions);
var resourcetype = response.data.ResourceType;
var samplePath = response.data.CFET2CORE_SAMPLE_PATH;
var sample: ResourceInfo[] = [];
//这里不知道要以什么类型接收json，所以写的比较死。后续displaytype加上后需要加上WaveView
switch(resourcetype){
case "Thing":
{
this.addWidget(resourcetype);
break;
}
case "Status":
{
this.addWidget(resourcetype);
var tempRef = (this.lastWidgetIndex - 1).toString();
sample[0] = response.data.Actions.get as ResourceInfo;
console.log(sample[0]);
console.log(sample[0].Parameters);
this.pokeAndUpdateUI(tempRef, sample,samplePath);
break;
}
case "Method":
{
this.addWidget(resourcetype);
var tempRef = (this.lastWidgetIndex - 1).toString();
sample[0] = response.data.Actions.invoke as ResourceInfo;
this.pokeAndUpdateUI(tempRef, sample,samplePath);
break;
}
case "Config":
{
this.addWidget(resourcetype);
var tempRef = (this.lastWidgetIndex - 1).toString();
//这里传的sample为数组是考虑到config，默认set位于sample[1]
sample[0] = response.data.Actions.get as ResourceInfo;
sample[1] = response.data.Actions.set as ResourceInfo;
this.pokeAndUpdateUI(tempRef, sample,samplePath);
break;
}
}
})
}
else{
//返回有值的customview template，进行load处理
var customviewTemplate:string;
customviewTemplate = response.data.CFET2CORE_SAMPLE_VAL;
console.log(customviewTemplate);
var widgets;
widgets = Object.assign(
var widgets = Object.assign(
new AllWidgetConfig(),
JSON.parse(customviewTemplate));
console.log(widgets);
this.widgetList = widgets.widgetList;
this.lastWidgetIndex = Number(widgets.currentRef);
this.$forceUpdate();
this.$forceUpdate();
this.importActiveWidgetList();
//替换startpath
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();
}
//刷新值
for (var wid of this.widgetList) {
((this.$refs[wid.ref] as Array<Widget>)[0] as Widget).refresh();
}
});
}
......
src/components/Method/Method.vue
View file @ 75e43eaf
......@@ -31,6 +31,7 @@ import { Prop, Watch } from "vue-property-decorator";
import { WidgetConfig } from "@/models/WidgetConfig";
import { UpdatePayload } from "@/models/UpdatePayload";
import { Widget } from "@/models/wiget";
import { ResourceInfo } from "@/models/Customview";
import WidgetParams from "@/components/Common/WidgetParams.vue";
import axios from "axios";
import Plotly from "plotly.js";
......@@ -51,6 +52,7 @@ export default class Method extends Widget {
StatusValue: string = "";
pathId: string = "";
userInputData = new Map<string, string>();
pathwithVar:string ="";
isShowPath: boolean = false;
isShowParams: boolean = false;
......@@ -91,19 +93,58 @@ export default class Method extends Widget {
this.updateUI();
//map不能序列化，必须要单独处理，这里的处理方法仅限map<string,string>类型
var temp = this.config.data.userInputData;
var temp = JSON.parse(JSON.stringify(temp));
temp = JSON.parse(JSON.stringify(temp));
console.log(temp);
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):void
{
this.config.data.url.replace('$startPath$', startPath);
}
samplePoke(sample:ResourceInfo[],samplePath:string)
{
var pokedPath:string;
pokedPath = samplePath;
var count:number = 0;
var temp = sample[0].Parameters;
temp = JSON.parse(JSON.stringify(temp));
console.log(temp);
temp = this.strMapObjChange.objToStrMap(temp);
console.log(temp);
sample[0].Parameters = temp;
console.log(sample[0].Parameters);
sample[0].Parameters.forEach((value , key) =>{
count++;
if(count == 1)
{
pokedPath = pokedPath + "?";
}
pokedPath = pokedPath + key + "=$" + key + "$&";
});
console.log(pokedPath);
pokedPath = pokedPath.substring(0,pokedPath.length-1);
console.log(pokedPath);
this.config.data.url = pokedPath;
}
pathPoke()
{
axios.put(this.config.data.url).then(response => {
var resourcetype = response.data.ResourceType;
var samplePath = response.data.CFET2CORE_SAMPLE_PATH;
var sample: ResourceInfo[] = [];
sample[0] = response.data.Actions.get as ResourceInfo;
this.samplePoke(sample,samplePath);
})
}
replaceStartPath(startPath:string):void
{
this.config.data.url.replace('$startPath$', startPath);
}
parentUpdate(payload: UpdatePayload): void {
......@@ -121,7 +162,7 @@ export default class Method extends Widget {
async getData(url: string) {
var apiLoad = url;
await axios.put(apiLoad).then(response => {
await axios.get(apiLoad).then(response => {
this.StatusValue = response.data.ObjectVal;
});
}
......@@ -130,13 +171,13 @@ export default class Method extends Widget {
async viewLoad(Args: UpdatePayload) {
// this.config.data.userInputData = Args.variables;
this.userInputData = Args.variables;
var url = this.pathProcessor.FillPathWithVar(
this.pathwithVar = this.pathProcessor.FillPathWithVar(
// this.config.data.userInputData,
this.userInputData,
this.config.data.url
);
await this.getData(url);
await this.getData(this.pathwithVar);
}
}
</script>
......
src/components/Status/Status.vue
View file @ 75e43eaf
......@@ -31,6 +31,7 @@ import { Prop, Watch } from "vue-property-decorator";
import { WidgetConfig } from "@/models/WidgetConfig";
import { UpdatePayload } from "@/models/UpdatePayload";
import { Widget } from "@/models/wiget";
import { ResourceInfo } from "@/models/Customview";
import WidgetParams from "@/components/Common/WidgetParams.vue";
import axios from "axios";
import Plotly from "plotly.js";
......@@ -51,6 +52,7 @@ export default class Status extends Widget {
StatusValue: string = "";
pathId: string = "";
userInputData = new Map<string, string>();
pathwithVar:string ="";
isShowPath: boolean = false;
isShowParams: boolean = false;
......@@ -91,7 +93,7 @@ export default class Status extends Widget {
this.updateUI();
//map不能序列化，必须要单独处理，这里的处理方法仅限map<string,string>类型
var temp = this.config.data.userInputData;
var temp = JSON.parse(JSON.stringify(temp));
temp = JSON.parse(JSON.stringify(temp));
console.log(temp);
temp = this.strMapObjChange.objToStrMap(temp);
console.log(temp);
......@@ -100,6 +102,45 @@ export default class Status extends Widget {
(this.$refs.WidgetParams as WidgetParams).setVariableInput(this.userInputData);
}
samplePoke(sample:ResourceInfo[],samplePath:string)
{
var pokedPath:string;
pokedPath = samplePath;
var count:number = 0;
var temp = sample[0].Parameters;
temp = JSON.parse(JSON.stringify(temp));
console.log(temp);
temp = this.strMapObjChange.objToStrMap(temp);
console.log(temp);
sample[0].Parameters = temp;
console.log(sample[0].Parameters);
sample[0].Parameters.forEach((value , key) =>{
count++;
if(count == 1)
{
pokedPath = pokedPath + "?";
}
pokedPath = pokedPath + key + "=$" + key + "$&";
});
console.log(pokedPath);
pokedPath = pokedPath.substring(0,pokedPath.length-1);
console.log(pokedPath);
this.config.data.url = pokedPath;
}
pathPoke()
{
axios.get(this.config.data.url).then(response => {
var resourcetype = response.data.ResourceType;
var samplePath = response.data.CFET2CORE_SAMPLE_PATH;
var sample: ResourceInfo[] = [];
sample[0] = response.data.Actions.get as ResourceInfo;
this.samplePoke(sample,samplePath);
})
}
replaceStartPath(startPath:string):void
{
this.config.data.url.replace('$startPath$', startPath);
......@@ -130,13 +171,13 @@ export default class Status extends Widget {
async viewLoad(Args: UpdatePayload) {
// this.config.data.userInputData = Args.variables;
this.userInputData = Args.variables;
var url = this.pathProcessor.FillPathWithVar(
this.pathwithVar = this.pathProcessor.FillPathWithVar(
// this.config.data.userInputData,
this.userInputData,
this.config.data.url
);
await this.getData(url);
await this.getData(this.pathwithVar);
}
}
</script>
......
src/models/customview.ts
View file @ 75e43eaf
export interface ResourceInfo {
Parameters: any;
OutputType: any;
Parameters: Map<string, string>;
OutputType: string;
}
export class Actions {
public action?:{[key: string]: ResourceInfo};
}
\ No newline at end of file
src/models/wiget.ts
View file @ 75e43eaf
import { Vue } from 'vue-property-decorator';
import { WidgetConfig } from './WidgetConfig';
import { UpdatePayload } from './UpdatePayload';
import { ResourceInfo } from './Customview';
export interface PokePath {
getPath: string;
......@@ -16,16 +17,9 @@ export abstract class Widget extends Vue {
public abstract refresh(): void;
public abstract updateUI(): void;
public abstract replaceStartPath(startPath:string):void;
public pathPoke(path:string):void{}
public samplePoke(sample:ResourceInfo[],samplePath:string):void{}
public pathPoke()
{
}
public samplePoke()
{
}
// public poke(sample: object): PokePath
// {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment