Skip to content

GitLab

W
WidgetUI
Commit 32825d74 authored by WuFeiyang's avatar WuFeiyang
Browse files
Options

除wave外其他功能基本实现，添加了state

parent a7febd20
Hide whitespace changes
Inline Side-by-side
Showing with 349 additions and 146 deletions
src/App.vue
View file @ 32825d74
......@@ -61,6 +61,7 @@ import { WidgetConfig, AllWidgetConfig } from "./models/WidgetConfig";
import { Action, UpdatePayload } from "./models/UpdatePayload";
import { Widget } from "./models/wiget";
import { ResourceInfo } from "./models/Customview";
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";
......@@ -68,7 +69,8 @@ import WaveView from "./components/WaveView/WaveView.vue";
import Method from "./components/Method/Method.vue";
import Config from "./components/Config/Config.vue";
import Thing from "./components/Thing/Thing.vue";
import { indexOf } from 'typescript-collections/dist/lib/arrays';
import State from "./components/State/State.vue";
// import Gauge from "./components/Gauge/Gauge.vue";
Vue.use(VueRouter)
//this is the view selecotr class
......@@ -81,7 +83,8 @@ Vue.use(VueRouter)
Config,
Thing,
GridLayout,
GridItem
GridItem,
State
}
})
export default class App extends Vue {
......@@ -92,18 +95,17 @@ export default class App extends Vue {
text: string = "";
//when add more available widgets add its name here
availableWidgets = ["Status", "Config", "WaveView", "Method", "Thing"];
availableWidgets = ["Status", "Config", "WaveView", "Method", "Thing","State"];
toggleShowAddWidget(): void {
this.isShowAddWidget = !this.isShowAddWidget;
}
pokeAndUpdateUI(ref: string, sample: ResourceInfo[], samplePath: string) {
pokeAndUpdateUI(ref: string, sample: any) {
Vue.nextTick(() => {
console.log(this.$refs[ref]);
((this.$refs[ref] as Array<Widget>)[0] as Widget).samplePoke(
sample,
samplePath
sample
);
((this.$refs[ref] as Array<Widget>)[0] as Widget).updateUI();
});
......@@ -134,38 +136,11 @@ export default class App extends Vue {
console.log(dataresponse.data);
var resourcetype = dataresponse.data.ResourceType;
var samplePath = dataresponse.data.CFET2CORE_SAMPLE_PATH;
var sample: ResourceInfo[] = [];
//这里不知道要以什么类型接收json，所以写的比较死。后续displaytype加上后需要加上WaveView
switch (resourcetype) {
case "Thing": {
this.addWidget(resourcetype.data);
break;
}
case "Status": {
this.addWidget(resourcetype);
var tempRef = (this.lastWidgetIndex - 1).toString();
sample[0] = dataresponse.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] = dataresponse.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] = dataresponse.data.Actions.get as ResourceInfo;
sample[1] = dataresponse.data.Actions.set as ResourceInfo;
this.pokeAndUpdateUI(tempRef, sample, samplePath);
break;
}
this.addWidget(resourcetype);
if(resourcetype != "Thing")
{
var tempRef = (this.lastWidgetIndex - 1).toString();
this.pokeAndUpdateUI(tempRef, dataresponse.data);
}
});
} else {
......
src/components/Config/Config.vue
View file @ 32825d74
......@@ -104,6 +104,7 @@ export default class Config extends Widget {
isShowSetParams: boolean = false;
isSetPoke: boolean = false;
isGetPoke: boolean = false;
config: WidgetConfig = {
WidgetComponentName: "Status",
......@@ -198,79 +199,91 @@ export default class Config extends Widget {
);
}
samplePoke(sample: ResourceInfo[], samplePath: string) {
samplePoke(sample:any){
var samplePath = sample.CFET2CORE_SAMPLE_PATH;
var pokedPath: string;
pokedPath = samplePath;
var count: number = 0;
console.log(this.isSetPoke);
if (this.isSetPoke == false) {
var getTemp = sample[0].Parameters;
getTemp = JSON.parse(JSON.stringify(getTemp));
getTemp = this.strMapObjChange.objToStrMap(getTemp);
sample[0].Parameters = getTemp;
sample[0].Parameters.forEach((value, key) => {
count++;
if (count == 1) {
pokedPath = pokedPath + "?";
}
pokedPath = pokedPath + key + "=$" + key + "$&";
if (this.isSetPoke == false || this.isGetPoke == true) {
var temp = sample.Actions.get.Parameters;
temp = JSON.parse(JSON.stringify(temp));
temp = this.strMapObjChange.objToStrMap(temp);
var Parameters:Map<string, string>;
Parameters = temp;
console.log(Parameters);
Parameters.forEach((value , key) =>{
count++;
if(count == 1)
{
pokedPath = pokedPath + "?";
}
pokedPath = pokedPath + key + "=$" + key + "$&";
});
pokedPath = pokedPath.substring(0, pokedPath.length - 1);
if(count != 0 )
{
pokedPath = pokedPath.substring(0,pokedPath.length-1);
}
this.config.data.get.url = pokedPath;
}
if (sample.length == 2) {
if (this.isGetPoke == false || this.isSetPoke == true) {
pokedPath = samplePath;
count = 0;
var setTemp = sample[1].Parameters;
setTemp = JSON.parse(JSON.stringify(setTemp));
setTemp = this.strMapObjChange.objToStrMap(setTemp);
sample[1].Parameters = setTemp;
sample[1].Parameters.forEach((value, key) => {
count++;
if (count == 1) {
pokedPath = pokedPath + "?";
}
pokedPath = pokedPath + key + "=$" + key + "$&";
var settemp = sample.Actions.set.Parameters;
console.log(settemp);
settemp = JSON.parse(JSON.stringify(settemp));
settemp = this.strMapObjChange.objToStrMap(settemp);
var SetParameters:Map<string, string>;
SetParameters = settemp;
console.log(SetParameters);
SetParameters.forEach((value , key) =>{
count++;
if(count == 1)
{
pokedPath = pokedPath + "?";
}
pokedPath = pokedPath + key + "=$" + key + "$&";
});
pokedPath = pokedPath.substring(0, pokedPath.length - 1);
if(count != 0 )
{
pokedPath = pokedPath.substring(0,pokedPath.length-1);
}
this.config.data.set.url = pokedPath;
}
this.isSetPoke = false;
this.isGetPoke = false;
}
getPathPoke() {
var f = this.config.data.get.url;
var pokepath = "a";
pokepath = f;
axios.get(pokepath).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);
this.updateUI();
});
getPathPoke()
{
var f = this.config.data.get.url;
var pokepath = "a";
pokepath = f;
axios.get(pokepath).then(response => {
this.isGetPoke = true;
this.samplePoke(response.data);
this.updateUI();
})
}
setPathPoke() {
var f = this.config.data.set.url;
var pokepath = "a";
pokepath = f;
axios.get(pokepath).then(response => {
console.log(response.data);
var resourcetype = response.data.ResourceType;
var samplePath = response.data.CFET2CORE_SAMPLE_PATH;
var sample: ResourceInfo[] = [];
sample[0] = response.data.Actions.get as ResourceInfo;
sample[1] = response.data.Actions.set as ResourceInfo;
this.isSetPoke = true;
this.samplePoke(sample, samplePath);
this.updateUI();
});
setPathPoke()
{
var f = this.config.data.set.url;
var pokepath = "a";
pokepath = f;
axios.get(pokepath).then(response => {
this.isSetPoke = true;
this.samplePoke(response.data);
this.updateUI();
})
}
pathPoke() {
......
src/components/Method/Method.vue
View file @ 32825d74
......@@ -108,21 +108,20 @@ export default class Method extends Widget {
(this.$refs.WidgetParams as WidgetParams).setVariableInput(this.userInputData);
}
samplePoke(sample:ResourceInfo[],samplePath:string)
samplePoke(sample:any)
{
var samplePath = sample.CFET2CORE_SAMPLE_PATH;
var pokedPath:string;
pokedPath = samplePath;
var count:number = 0;
var temp = sample[0].Parameters;
var temp = sample.Actions.invoke.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);
var Parameters:Map<string, string>;
Parameters = temp;
sample[0].Parameters.forEach((value , key) =>{
Parameters.forEach((value , key) =>{
count++;
if(count == 1)
{
......@@ -130,12 +129,11 @@ export default class Method extends Widget {
}
pokedPath = pokedPath + key + "=$" + key + "$&";
});
console.log(pokedPath);
if(count != 0 )
{
pokedPath = pokedPath.substring(0,pokedPath.length-1);
}
console.log(pokedPath);
this.config.data.url = pokedPath;
}
......@@ -145,19 +143,14 @@ export default class Method extends Widget {
var pokepath = "a";
pokepath = f;
axios.get(pokepath).then(response => {
console.log(pokepath);
console.log(response);
console.log(response.data);
var resourcetype = response.data.ResourceType;
console.log(resourcetype);
var samplePath = response.data.CFET2CORE_SAMPLE_PATH;
var sample: ResourceInfo[] = [];
sample[0] = response.data.Actions.get as ResourceInfo;
this.samplePoke(sample,samplePath);
this.samplePoke(response.data);
this.updateUI();
})
}
replaceStartPath(startPath:string):void
{
this.config.data.url.replace('$startPath$', startPath);
......
src/components/State/State.vue 0 → 100644
View file @ 32825d74
<template>
<b-container class="bv-example-row">
<b-row style="margin-top:10px">
<b-col>
<span style="float:left;" class="largeFont">path: {{ pathwithVar }}</span>
</b-col>
<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>
</b-row>
<div style="width:100%">
<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-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 variant="info" @click="pathPoke">poke</b-button>
</b-input-group-append>
</b-input-group>
<hr/>
<WidgetParams ref="WidgetParams" v-show="isShowParams" action="get" @updataVariables="viewLoad" ></WidgetParams><br>
<Navigation ref="FamilyLink" :url="config.data.url"></Navigation>
</b-container>
</template>
<script lang="ts">
import Vue from "vue";
import { VueSvgGauge } from 'vue-svg-gauge'
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/wiget";
import { ResourceInfo } from "@/models/Customview";
import WidgetParams from "@/components/Common/WidgetParams.vue";
import axios from "axios";
import PathProcessor from "@/models/PathProcessor";
import StrMapObjChange from "@/models/StrMapObjChange";
import { forEach } from "typescript-collections/dist/lib/arrays";
import { map } from "d3";
import Navigation from '@/components/Common/Navigation.vue';
@Component({
components: {
WidgetParams,
Navigation
}
})
export default class State extends Widget {
pathProcessor = new PathProcessor();
strMapObjChange = new StrMapObjChange();
WidgetComponentName: string = "State";
StatusValue: string = "";
pathId: string = "";
userInputData = new Map<string, string>();
pathwithVar:string ="";
timer?:number;
isShowPath: boolean = false;
isShowParams: boolean = false;
config: WidgetConfig = {
WidgetComponentName: "State",
data: {
url: "",
userInputData: ""
}
};
created() {
// this.config.data.userInputData = this.userInputData;
this.config.data.userInputData = this.strMapObjChange.strMapToObj(this.userInputData);
}
mounted()
{
this.timer = setInterval(this.refresh,1000);
}
destroyed()
{
clearInterval(this.timer);
}
updateUI() {
this.isShowPath = false;
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)
);
}
showPathConfig() {
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;
}
setConfig(widgetConfig: WidgetConfig): void {
this.config = widgetConfig;
this.updateUI();
//map不能序列化，必须要单独处理，这里的处理方法仅限map<string,string>类型
var temp = this.config.data.userInputData;
temp = JSON.parse(JSON.stringify(temp));
console.log(temp);
temp = this.strMapObjChange.objToStrMap(temp);
console.log(temp);
this.userInputData = temp;
console.log(this.userInputData);/* */
(this.$refs.WidgetParams as WidgetParams).setVariableInput(this.userInputData);
}
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;
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 => {
this.samplePoke(response.data);
this.updateUI();
})
}
replaceStartPath(startPath:string):void
{
this.config.data.url.replace('$startPath$', startPath);
}
parentUpdate(payload: UpdatePayload): void {
}
refresh() {
var Args: UpdatePayload = {
action: "get",
variables: (this.$refs.WidgetParams as WidgetParams).getVariableValues(),
target: ["self"]
};
this.viewLoad(Args);
}
async getData(url: string) {
var apiLoad = url;
await axios.get(apiLoad).then(response => {
console.log(response);
this.StatusValue = response.data.CFET2CORE_SAMPLE_VAL;
switch(this.StatusValue.toString())
{
case "0":{
this.StatusValue ="Idle"
break;
}
case "1":{
this.StatusValue ="Ready"
break;
}
case "2":{
this.StatusValue ="Running"
break;
}
case "255":{
this.StatusValue ="Error"
break;
}
}
console.log(this.StatusValue);
});
}
//called when widgetParams action clicked
async viewLoad(Args: UpdatePayload) {
// this.config.data.userInputData = Args.variables;
this.userInputData = Args.variables;
this.pathwithVar = this.pathProcessor.FillPathWithVar(
// this.config.data.userInputData,
this.userInputData,
this.config.data.url
);
console.log(this.StatusValue);
console.log(this.pathwithVar);
await this.getData(this.pathwithVar);
}
}
</script>
<style scoped>
.waveView {
width: 100%;
height: auto;
}
</style>
\ No newline at end of file
src/components/Status/Status.vue
View file @ 32825d74
......@@ -118,21 +118,20 @@ export default class Status extends Widget {
(this.$refs.WidgetParams as WidgetParams).setVariableInput(this.userInputData);
}
samplePoke(sample:ResourceInfo[],samplePath:string)
samplePoke(sample:any)
{
var samplePath = sample.CFET2CORE_SAMPLE_PATH;
var pokedPath:string;
pokedPath = samplePath;
var count:number = 0;
var temp = sample[0].Parameters;
var temp = sample.Actions.get.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);
var Parameters:Map<string, string>;
Parameters = temp;
sample[0].Parameters.forEach((value , key) =>{
Parameters.forEach((value , key) =>{
count++;
if(count == 1)
{
......@@ -140,12 +139,11 @@ export default class Status extends Widget {
}
pokedPath = pokedPath + key + "=$" + key + "$&";
});
console.log(pokedPath);
if(count != 0 )
{
pokedPath = pokedPath.substring(0,pokedPath.length-1);
}
console.log(pokedPath);
this.config.data.url = pokedPath;
}
......@@ -155,15 +153,7 @@ export default class Status extends Widget {
var pokepath = "a";
pokepath = f;
axios.get(pokepath).then(response => {
console.log(pokepath);
console.log(response);
console.log(response.data);
var resourcetype = response.data.ResourceType;
console.log(resourcetype);
var samplePath = response.data.CFET2CORE_SAMPLE_PATH;
var sample: ResourceInfo[] = [];
sample[0] = response.data.Actions.get as ResourceInfo;
this.samplePoke(sample,samplePath);
this.samplePoke(response.data);
this.updateUI();
})
}
......
src/components/WaveView/WaveView.vue
View file @ 32825d74
......@@ -87,21 +87,20 @@ export default class waveView extends Widget {
updateConfig(data:WidgetConfig){
this.config = data;
}
samplePoke(sample:ResourceInfo[],samplePath:string)
{
samplePoke(sample:any)
{
var samplePath = sample.CFET2CORE_SAMPLE_PATH;
var pokedPath:string;
pokedPath = samplePath;
var count:number = 0;
var temp = sample[0].Parameters;
var temp = sample.Actions.get.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);
var Parameters:Map<string, string>;
Parameters = temp;
sample[0].Parameters.forEach((value , key) =>{
Parameters.forEach((value , key) =>{
count++;
if(count == 1)
{
......@@ -109,19 +108,22 @@ export default class waveView extends Widget {
}
pokedPath = pokedPath + key + "=$" + key + "$&";
});
console.log(pokedPath);
pokedPath = pokedPath.substring(0,pokedPath.length-1);
console.log(pokedPath);
if(count != 0 )
{
pokedPath = pokedPath.substring(0,pokedPath.length-1);
}
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);
var f = this.config.data.url;
var pokepath = "a";
pokepath = f;
axios.get(pokepath).then(response => {
this.samplePoke(response.data);
this.updateUI();
})
}
}
......
src/models/wiget.ts
View file @ 32825d74
......@@ -17,8 +17,8 @@ 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 abstract pathPoke():void;
public abstract samplePoke(sample:any):void;
// 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