Skip to content

GitLab

W
WidgetUI
Commit 98b74648 authored by WuFeiyang's avatar WuFeiyang
Browse files
Options

版本1.1 修改了样式显示 添加了thing内部的逻辑

parent c2c31e1f
Show whitespace changes
Inline Side-by-side
Showing with 615 additions and 376 deletions
src/App.vue
View file @ 98b74648
......@@ -118,7 +118,7 @@ export default class App extends Vue {
var fragment = "a";
fragment = f;
console.log(fragment);
if (fragment != "#/") {
if (fragment != "#/" && fragment != "#") {
fragment = fragment.substring(1, fragment.length);
var customViewURL = "/customView/template" + fragment;
console.log(customViewURL);
......@@ -135,13 +135,10 @@ export default class App extends Vue {
}}).then(dataresponse => {
console.log(dataresponse.data);
var resourcetype = dataresponse.data.ResourceType;
var samplePath = dataresponse.data.CFET2CORE_SAMPLE_PATH;
this.addWidget(resourcetype);
if(resourcetype != "Thing")
{
console.log(resourcetype);
var tempRef = (this.lastWidgetIndex - 1).toString();
this.pokeAndUpdateUI(tempRef, dataresponse.data);
}
});
} else {
//返回有值的customview template，进行load处理
......
src/assets/css/fontSize.css
View file @ 98b74648
......@@ -2,7 +2,7 @@
font-size: 15px;
}
.largeFont{
font-size: 20px;
font-size: 25px;
}
.largeFont span{
float: left;
......
src/components/Common/Navigation.vue
View file @ 98b74648
<template id="Navigation">
<div>
<br>
<b-button variant="primary" class="smallFont" @click="showNavigation" style="float:right">Navigation</b-button>
<br>
<div>
<div style="width:100%;margin:5px">
<b-button size="lg" @click="showNavigation" style="float:right">Navigation</b-button>
</div>
<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" style="width:100%;height:25px">
<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>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import axios from "axios";
import Plotly from "plotly.js";
import global_ from '@/components/Common/global.vue';
import global_ from "@/components/Common/global.vue";
import { WidgetConfig } from "@/models/WidgetConfig";
import { UpdatePayload } from "@/models/UpdatePayload";
import PathProcessor from "@/models/PathProcessor";
......@@ -27,40 +32,37 @@ import { map } from "d3";
import WidgetParams from "@/components/Common/WidgetParams.vue";
@Component({
components:{
components: {
WidgetParams
}
})
export default class Navigation extends Vue {
@Prop() url!:string;
parentPath!:string;
childrenPath!:string[];
isShowParentPath:boolean = false;
isShowNavigation:boolean = false;
@Prop() url!: string;
parentPath!: string;
childrenPath!: string[];
isShowParentPath: boolean = false;
isShowNavigation: boolean = false;
@Watch("url")
onUrlChanged(){
onUrlChanged() {
this.getPath();
}
async getPath(){
async getPath() {
this.isShowParentPath = false;
var apiLoad = this.url;
await axios.get(apiLoad)
.then(response => {
await axios.get(apiLoad).then(response => {
this.parentPath = response.data.ParentPath as string;
this.childrenPath = response.data.ChildrenPath as string[];
})
if(this.parentPath != ''){
});
if (this.parentPath != "") {
this.isShowParentPath = true;
}
this.$forceUpdate();
}
showNavigation()
{
showNavigation() {
this.isShowNavigation = !this.isShowNavigation;
}
}
</script>
<style scoped>
......
src/components/Config/Config.vue
View file @ 98b74648
......@@ -2,7 +2,7 @@
<b-container class="bv-example-row">
<b-row style="margin-top:10px">
<b-col>
<span style="float:left;" class="largeFont">getPath: {{ getPathwithVar }}</span>
<span style="float:left;" class="smallFont">Path: {{ config.data.get.url }}</span>
</b-col>
<b-col>
<b-button @click="showPathConfig" variant="primary" style="float:right">
......@@ -10,19 +10,24 @@
</b-button>
</b-col>
</b-row>
<b-row style="margin-top:10px">
<br />
<b-row>
<b-col>
<span style="float:left" class="largeFont">setPath: {{ getSetwithVar }}</span>
<div
v-if="getConfigValue!=''&&getConfigValue!=undefined"
style="width:100%;overflow:auto;border-style: solid; border-width: 1px;"
>
<p style="float:left;margin:0px" class="largeFont">{{ getConfigValue }}</p>
</div>
</b-col>
</b-row>
<div style="width:100%">
<span style="float:left;" class="largeFont">{{ getConfigValue }}</span>
</div>
<br>
<br>
<div v-show="isShowGetPath">
<hr />
</div>
<br />
<b-row>
<b-col>
<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>
......@@ -30,19 +35,24 @@
<b-button variant="info" @click="getPathPoke">poke</b-button>
</b-input-group-append>
</b-input-group>
<div>
<hr v-show="isShowGetParams" />
</div>
</b-col>
</b-row>
<b-row>
<b-col>
<WidgetParams
ref="WidgetGetParams"
v-show="isShowGetParams"
action="get"
@updataVariables="viewGetLoad"
></WidgetParams>
<br>
<div>
<hr v-show="isShowSetPath" />
</div>
</b-col>
</b-row>
<br />
<b-row>
<b-col>
<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>
......@@ -50,17 +60,26 @@
<b-button variant="info" @click="setPathPoke">poke</b-button>
</b-input-group-append>
</b-input-group>
<div>
<hr v-show="isShowSetParams" />
</div>
</b-col>
</b-row>
<b-row>
<b-col>
<WidgetParams
ref="WidgetSetParams"
v-show="isShowSetParams"
action="set"
@updataVariables="viewSetLoad"
></WidgetParams>
<br>
</b-col>
</b-row>
<br />
<b-row>
<b-col>
<Navigation ref="FamilyLink" :url="config.data.get.url"></Navigation>
</b-col>
</b-row>
</b-container>
</template>
......@@ -79,7 +98,7 @@ 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';
import Navigation from "@/components/Common/Navigation.vue";
@Component({
components: {
......@@ -116,11 +135,14 @@ export default class Config extends Widget {
created() {
// this.config.data.userInputData = this.userInputData;
this.config.data.get.userInputData = this.strMapObjChange.strMapToObj(this.userGetInputData);
this.config.data.set.userInputData = this.strMapObjChange.strMapToObj(this.userSetInputData);
this.config.data.get.userInputData = this.strMapObjChange.strMapToObj(
this.userGetInputData
);
this.config.data.set.userInputData = this.strMapObjChange.strMapToObj(
this.userSetInputData
);
}
updateUI() {
this.updateGetUI();
this.updateSetUI();
......@@ -147,17 +169,13 @@ export default class Config extends Widget {
}
showPathConfig() {
if(this.isShowGetPath == this.isShowSetPath)
{
if (this.isShowGetPath == this.isShowSetPath) {
this.isShowGetPath = !this.isShowGetPath;
this.isShowSetPath = !this.isShowSetPath;
}
else
{
} else {
this.isShowGetPath = true;
this.isShowSetPath = true;
}
}
getConfig(): WidgetConfig {
......@@ -199,33 +217,30 @@ export default class Config extends Widget {
);
}
samplePoke(sample:any){
samplePoke(sample: any) {
var samplePath = sample.CFET2CORE_SAMPLE_PATH;
var pokedPath: string;
pokedPath = samplePath;
var count: number = 0;
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>;
var Parameters: Map<string, string>;
Parameters = temp;
console.log(Parameters);
Parameters.forEach((value , key) =>{
Parameters.forEach((value, key) => {
count++;
if(count == 1)
{
if (count == 1) {
pokedPath = pokedPath + "?";
}
pokedPath = pokedPath + key + "=$" + key + "$&";
});
if(count != 0 )
{
pokedPath = pokedPath.substring(0,pokedPath.length-1);
if (count != 0) {
pokedPath = pokedPath.substring(0, pokedPath.length - 1);
}
this.config.data.get.url = pokedPath;
}
......@@ -238,22 +253,20 @@ export default class Config extends Widget {
console.log(settemp);
settemp = JSON.parse(JSON.stringify(settemp));
settemp = this.strMapObjChange.objToStrMap(settemp);
var SetParameters:Map<string, string>;
var SetParameters: Map<string, string>;
SetParameters = settemp;
console.log(SetParameters);
SetParameters.forEach((value , key) =>{
SetParameters.forEach((value, key) => {
count++;
if(count == 1)
{
if (count == 1) {
pokedPath = pokedPath + "?";
}
pokedPath = pokedPath + key + "=$" + key + "$&";
});
if(count != 0 )
{
pokedPath = pokedPath.substring(0,pokedPath.length-1);
if (count != 0) {
pokedPath = pokedPath.substring(0, pokedPath.length - 1);
}
this.config.data.set.url = pokedPath;
}
......@@ -261,8 +274,7 @@ export default class Config extends Widget {
this.isGetPoke = false;
}
getPathPoke()
{
getPathPoke() {
var f = this.config.data.get.url;
var pokepath = "a";
pokepath = f;
......@@ -270,12 +282,10 @@ export default class Config extends Widget {
this.isGetPoke = true;
this.samplePoke(response.data);
this.updateUI();
})
});
}
setPathPoke()
{
setPathPoke() {
var f = this.config.data.set.url;
var pokepath = "a";
pokepath = f;
......@@ -283,7 +293,7 @@ export default class Config extends Widget {
this.isSetPoke = true;
this.samplePoke(response.data);
this.updateUI();
})
});
}
pathPoke() {
......@@ -359,6 +369,7 @@ export default class Config extends Widget {
console.log(this.setConfigValue);
console.log(this.setPathwithVar);
await this.setData(this.setPathwithVar);
this.refresh();
}
}
</script>
......
src/components/Method/Method.vue
View file @ 98b74648
......@@ -2,17 +2,32 @@
<b-container class="bv-example-row">
<b-row style="margin-top:10px">
<b-col>
<span style="float:left;" class="largeFont">path: {{ pathwithVar }}</span>
<span style="float:left;" class="smallFont">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-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>
<br />
<b-row>
<b-col>
<div
v-if="StatusValue!=''&&StatusValue!=undefined"
style="width:100%;overflow:auto;border-style: solid; border-width: 1px;"
>
<p style="float:left;margin:0px" class="largeFont">{{ StatusValue }}</p>
</div>
</b-col>
</b-row>
<br />
<b-row>
<b-col>
<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>
......@@ -20,15 +35,32 @@
<b-button variant="info" @click="pathPoke">poke</b-button>
</b-input-group-append>
</b-input-group>
<hr/>
<WidgetParams ref="WidgetParams" v-show="isShowParams" action="invoke" @updataVariables="viewLoad" ></WidgetParams><br>
</b-col>
</b-row>
<b-row>
<b-col>
<WidgetParams
ref="WidgetParams"
v-show="isShowParams"
action="invoke"
@updataVariables="viewLoad"
></WidgetParams>
</b-col>
</b-row>
<br />
<b-row>
<b-col>
<Navigation ref="FamilyLink" :url="config.data.url"></Navigation>
</b-col>
</b-row>
</b-container>
</template>
<script lang="ts">
import Vue from "vue";
import { VueSvgGauge } from 'vue-svg-gauge'
import { VueSvgGauge } from "vue-svg-gauge";
import Component from "vue-class-component";
import { Prop, Watch } from "vue-property-decorator";
import { WidgetConfig } from "@/models/WidgetConfig";
......@@ -41,7 +73,7 @@ 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';
import Navigation from "@/components/Common/Navigation.vue";
@Component({
components: {
......@@ -56,7 +88,7 @@ export default class Method extends Widget {
StatusValue: string = "";
pathId: string = "";
userInputData = new Map<string, string>();
pathwithVar:string ="";
pathwithVar: string = "";
isShowPath: boolean = false;
isShowParams: boolean = false;
......@@ -70,10 +102,11 @@ export default class Method extends Widget {
created() {
// this.config.data.userInputData = this.userInputData;
this.config.data.userInputData = this.strMapObjChange.strMapToObj(this.userInputData);
this.config.data.userInputData = this.strMapObjChange.strMapToObj(
this.userInputData
);
}
updateUI() {
this.isShowPath = false;
this.isShowParams = true;
......@@ -90,7 +123,9 @@ export default class Method extends Widget {
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());
this.config.data.userInputData = this.strMapObjChange.strMapToObj(
(this.$refs.WidgetParams as WidgetParams).getVariableValues()
);
return this.config;
}
......@@ -104,41 +139,39 @@ export default class Method extends Widget {
temp = this.strMapObjChange.objToStrMap(temp);
console.log(temp);
this.userInputData = temp;
console.log(this.userInputData);/* */
(this.$refs.WidgetParams as WidgetParams).setVariableInput(this.userInputData);
console.log(this.userInputData); /* */
(this.$refs.WidgetParams as WidgetParams).setVariableInput(
this.userInputData
);
}
samplePoke(sample:any)
{
samplePoke(sample: any) {
var samplePath = sample.CFET2CORE_SAMPLE_PATH;
var pokedPath:string;
var pokedPath: string;
pokedPath = samplePath;
var count:number = 0;
var count: number = 0;
var temp = sample.Actions.invoke.Parameters;
temp = JSON.parse(JSON.stringify(temp));
temp = this.strMapObjChange.objToStrMap(temp);
var Parameters:Map<string, string>;
var Parameters: Map<string, string>;
Parameters = temp;
Parameters.forEach((value , key) =>{
Parameters.forEach((value, key) => {
count++;
if(count == 1)
{
if (count == 1) {
pokedPath = pokedPath + "?";
}
pokedPath = pokedPath + key + "=$" + key + "$&";
});
if(count != 0 )
{
pokedPath = pokedPath.substring(0,pokedPath.length-1);
if (count != 0) {
pokedPath = pokedPath.substring(0, pokedPath.length - 1);
}
this.config.data.url = pokedPath;
}
pathPoke()
{
pathPoke() {
var f = this.config.data.url;
var pokepath = "a";
pokepath = f;
......@@ -147,18 +180,14 @@ export default class Method extends Widget {
console.log(resourcetype);
this.samplePoke(response.data);
this.updateUI();
})
});
}
replaceStartPath(startPath:string):void
{
this.config.data.url.replace('$startPath$', startPath);
replaceStartPath(startPath: string): void {
this.config.data.url.replace("$startPath$", startPath);
}
parentUpdate(payload: UpdatePayload): void {
}
parentUpdate(payload: UpdatePayload): void {}
refresh() {
var Args: UpdatePayload = {
......@@ -169,7 +198,6 @@ export default class Method extends Widget {
this.viewLoad(Args);
}
async getData(url: string) {
var apiLoad = url;
await axios.put(apiLoad).then(response => {
......@@ -200,5 +228,4 @@ export default class Method extends Widget {
width: 100%;
height: auto;
}
</style>
\ No newline at end of file
src/components/State/State.vue
View file @ 98b74648
......@@ -2,17 +2,32 @@
<b-container class="bv-example-row">
<b-row style="margin-top:10px">
<b-col>
<span style="float:left;" class="largeFont">path: {{ pathwithVar }}</span>
<span style="float:left;" class="smallFont">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-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%;overflow:auto">
<span style="float:left;" class="largeFont">{{ StatusValue }}</span>
<br />
<b-row>
<b-col>
<div
v-if="StatusValue!=''&&StatusValue!=undefined"
style="width:100%;overflow:auto;border-style: solid; border-width: 1px;"
>
<p style="float:left;margin:0px" class="largeFont">{{ StatusValue }}</p>
</div>
<div v-show="isShowPath"><hr /></div>
</b-col>
</b-row>
<br />
<b-row>
<b-col>
<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>
......@@ -20,16 +35,33 @@
<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>
</b-col>
</b-row>
<b-row>
<b-col>
<WidgetParams
ref="WidgetParams"
v-show="isShowParams"
action="get"
@updataVariables="viewLoad"
></WidgetParams>
</b-col>
</b-row>
<br />
<b-row>
<b-col>
<Navigation ref="FamilyLink" :url="config.data.url"></Navigation>
</b-col>
</b-row>
</b-container>
</template>
<script lang="ts">
import Vue from "vue";
import { VueSvgGauge } from 'vue-svg-gauge'
import { VueSvgGauge } from "vue-svg-gauge";
import Component from "vue-class-component";
import { Prop, Watch } from "vue-property-decorator";
import { WidgetConfig } from "@/models/WidgetConfig";
......@@ -42,7 +74,7 @@ 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';
import Navigation from "@/components/Common/Navigation.vue";
@Component({
components: {
......@@ -57,8 +89,8 @@ export default class State extends Widget {
StatusValue: string = "";
pathId: string = "";
userInputData = new Map<string, string>();
pathwithVar:string ="";
timer?:number;
pathwithVar: string = "";
timer?: number;
isShowPath: boolean = false;
isShowParams: boolean = false;
......@@ -72,16 +104,16 @@ export default class State extends Widget {
created() {
// this.config.data.userInputData = this.userInputData;
this.config.data.userInputData = this.strMapObjChange.strMapToObj(this.userInputData);
this.config.data.userInputData = this.strMapObjChange.strMapToObj(
this.userInputData
);
}
mounted()
{
this.timer = setInterval(this.refresh,1000);
mounted() {
this.timer = setInterval(this.refresh, 1000);
}
destroyed()
{
destroyed() {
clearInterval(this.timer);
}
......@@ -101,7 +133,9 @@ export default class State extends Widget {
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());
this.config.data.userInputData = this.strMapObjChange.strMapToObj(
(this.$refs.WidgetParams as WidgetParams).getVariableValues()
);
return this.config;
}
......@@ -115,58 +149,53 @@ export default class State extends Widget {
temp = this.strMapObjChange.objToStrMap(temp);
console.log(temp);
this.userInputData = temp;
console.log(this.userInputData);/* */
(this.$refs.WidgetParams as WidgetParams).setVariableInput(this.userInputData);
console.log(this.userInputData); /* */
(this.$refs.WidgetParams as WidgetParams).setVariableInput(
this.userInputData
);
}
samplePoke(sample:any)
{
samplePoke(sample: any) {
var samplePath = sample.CFET2CORE_SAMPLE_PATH;
var pokedPath:string;
var pokedPath: string;
pokedPath = samplePath;
var count:number = 0;
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>;
var Parameters: Map<string, string>;
Parameters = temp;
Parameters.forEach((value , key) =>{
Parameters.forEach((value, key) => {
count++;
if(count == 1)
{
if (count == 1) {
pokedPath = pokedPath + "?";
}
pokedPath = pokedPath + key + "=$" + key + "$&";
});
if(count != 0 )
{
pokedPath = pokedPath.substring(0,pokedPath.length-1);
if (count != 0) {
pokedPath = pokedPath.substring(0, pokedPath.length - 1);
}
this.config.data.url = pokedPath;
}
pathPoke()
{
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);
replaceStartPath(startPath: string): void {
this.config.data.url.replace("$startPath$", startPath);
}
parentUpdate(payload: UpdatePayload): void {
}
parentUpdate(payload: UpdatePayload): void {}
refresh() {
var Args: UpdatePayload = {
......@@ -177,28 +206,26 @@ export default class State extends Widget {
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"
switch (this.StatusValue.toString()) {
case "0": {
this.StatusValue = "Idle";
break;
}
case "1":{
this.StatusValue ="Ready"
case "1": {
this.StatusValue = "Ready";
break;
}
case "2":{
this.StatusValue ="Running"
case "2": {
this.StatusValue = "Running";
break;
}
case "255":{
this.StatusValue ="Error"
case "255": {
this.StatusValue = "Error";
break;
}
}
......@@ -227,5 +254,4 @@ export default class State extends Widget {
width: 100%;
height: auto;
}
</style>
\ No newline at end of file
src/components/Status/Status.vue
View file @ 98b74648
......@@ -2,17 +2,32 @@
<b-container class="bv-example-row">
<b-row style="margin-top:10px">
<b-col>
<span style="float:left;" class="largeFont">path: {{ pathwithVar }}</span>
<span style="float:left;" class="smallFont">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-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%;overflow:auto">
<span style="float:left;" class="largeFont">{{ StatusValue }}</span>
<br />
<b-row>
<b-col>
<div
v-if="StatusValue!=''&&StatusValue!=undefined"
style="width:100%;overflow:auto;border-style: solid; border-width: 1px;"
>
<p style="float:left;margin:0px" class="largeFont">{{ StatusValue }}</p>
</div>
<div v-show="isShowPath"><hr /></div>
</b-col>
</b-row>
<br />
<b-row>
<b-col>
<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>
......@@ -20,15 +35,32 @@
<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>
</b-col>
</b-row>
<b-row>
<b-col>
<WidgetParams
ref="WidgetParams"
v-show="isShowParams"
action="get"
@updataVariables="viewLoad"
></WidgetParams>
</b-col>
</b-row>
<br />
<b-row>
<b-col>
<Navigation ref="FamilyLink" :url="config.data.url"></Navigation>
</b-col>
</b-row>
</b-container>
</template>
<script lang="ts">
import Vue from "vue";
import { VueSvgGauge } from 'vue-svg-gauge'
import { VueSvgGauge } from "vue-svg-gauge";
import Component from "vue-class-component";
import { Prop, Watch } from "vue-property-decorator";
import { WidgetConfig } from "@/models/WidgetConfig";
......@@ -41,7 +73,7 @@ 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';
import Navigation from "@/components/Common/Navigation.vue";
@Component({
components: {
......@@ -56,8 +88,8 @@ export default class Status extends Widget {
StatusValue: string = "";
pathId: string = "";
userInputData = new Map<string, string>();
pathwithVar:string ="";
timer?:number;
pathwithVar: string = "";
timer?: number;
isShowPath: boolean = false;
isShowParams: boolean = false;
......@@ -71,16 +103,16 @@ export default class Status extends Widget {
created() {
// this.config.data.userInputData = this.userInputData;
this.config.data.userInputData = this.strMapObjChange.strMapToObj(this.userInputData);
this.config.data.userInputData = this.strMapObjChange.strMapToObj(
this.userInputData
);
}
mounted()
{
this.timer = setInterval(this.refresh,1000);
mounted() {
this.timer = setInterval(this.refresh, 1000);
}
destroyed()
{
destroyed() {
clearInterval(this.timer);
}
......@@ -100,7 +132,9 @@ export default class Status extends Widget {
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());
this.config.data.userInputData = this.strMapObjChange.strMapToObj(
(this.$refs.WidgetParams as WidgetParams).getVariableValues()
);
return this.config;
}
......@@ -114,58 +148,53 @@ export default class Status extends Widget {
temp = this.strMapObjChange.objToStrMap(temp);
console.log(temp);
this.userInputData = temp;
console.log(this.userInputData);/* */
(this.$refs.WidgetParams as WidgetParams).setVariableInput(this.userInputData);
console.log(this.userInputData); /* */
(this.$refs.WidgetParams as WidgetParams).setVariableInput(
this.userInputData
);
}
samplePoke(sample:any)
{
samplePoke(sample: any) {
var samplePath = sample.CFET2CORE_SAMPLE_PATH;
var pokedPath:string;
var pokedPath: string;
pokedPath = samplePath;
var count:number = 0;
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>;
var Parameters: Map<string, string>;
Parameters = temp;
Parameters.forEach((value , key) =>{
Parameters.forEach((value, key) => {
count++;
if(count == 1)
{
if (count == 1) {
pokedPath = pokedPath + "?";
}
pokedPath = pokedPath + key + "=$" + key + "$&";
});
if(count != 0 )
{
pokedPath = pokedPath.substring(0,pokedPath.length-1);
if (count != 0) {
pokedPath = pokedPath.substring(0, pokedPath.length - 1);
}
this.config.data.url = pokedPath;
}
pathPoke()
{
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);
replaceStartPath(startPath: string): void {
this.config.data.url.replace("$startPath$", startPath);
}
parentUpdate(payload: UpdatePayload): void {
}
parentUpdate(payload: UpdatePayload): void {}
refresh() {
var Args: UpdatePayload = {
......@@ -176,7 +205,6 @@ export default class Status extends Widget {
this.viewLoad(Args);
}
async getData(url: string) {
var apiLoad = url;
await axios.get(apiLoad).then(response => {
......@@ -207,5 +235,4 @@ export default class Status extends Widget {
width: 100%;
height: auto;
}
</style>
\ No newline at end of file
src/components/Thing/Thing.vue
View file @ 98b74648
......@@ -2,7 +2,52 @@
<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>
<span style="float:left;" class="smallFont">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>
</b-row>
<b-row>
<b-col>
<div v-if="StatusValue!=''&&StatusValue!=undefined" style="width:100%;overflow:auto">
<button style="float:left;" class="largeFont">{{ StatusValue }}</button>
</div>
</b-col>
</b-row>
<br />
<b-row>
<b-col>
<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" text="Button" variant="primary">OK</b-button>
<b-button variant="info" @click="pathPoke">poke</b-button>
</b-input-group-append>
</b-input-group>
</b-col>
</b-row>
<b-row>
<b-col>
<WidgetParams
ref="WidgetParams"
v-show="isShowParams"
action="get"
@updataVariables="viewLoad"
></WidgetParams>
</b-col>
</b-row>
<br />
<b-row>
<b-col>
<Navigation ref="FamilyLink" :url="config.data.url"></Navigation>
</b-col>
</b-row>
</b-container>
......@@ -10,50 +55,155 @@
<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 Thing extends Widget {
pathProcessor = new PathProcessor();
strMapObjChange = new StrMapObjChange();
WidgetComponentName: string = "Thing";
StatusValue: string = "";
pathId: string = "";
userInputData = new Map<string, string>();
pathwithVar: string = "";
timer?: number;
isShowPath: boolean = false;
isShowParams: boolean = false;
config: WidgetConfig = {
WidgetComponentName: "Thing",
data: {
url: ""
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
);
}
replaceStartPath(startPath:string):void
{
this.config.data.url.replace('$startPath$', startPath);
samplePoke(sample: any) {
var samplePath = sample.CFET2CORE_SAMPLE_PATH;
console.log(samplePath);
var pokedPath: string;
pokedPath = samplePath;
this.config.data.url = pokedPath;
}
samplePoke(sample:any){}
pathPoke(){}
parentUpdate(payload: UpdatePayload): void {
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);
}
updateUI(){
async getData(url: string) {
var apiLoad = url;
await axios.get(apiLoad).then(response => {
console.log(response);
this.StatusValue = response.data.CFET2CORE_SAMPLE_VAL;
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>
......@@ -62,5 +212,4 @@ export default class Thing extends Widget {
width: 100%;
height: auto;
}
</style>
\ No newline at end of file
src/components/WaveView/showViewInfo.vue
View file @ 98b74648
<template>
<div class="largeFont" style="float:left width:100%">
<div class="smallFont" style="float:left width:100%">
<span>Basic Path :&nbsp;{{ basePathId }}</span><br>
<span> Rate: {{ sampleId }}</span><br>
<span>length: {{ lengthId }}</span>
......
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