Skip to content

GitLab

W
WidgetUI
Commit 703295f2 authored by WuFeiyang's avatar WuFeiyang
Browse files
Options

Navigation

parent d8d94a3d
Show whitespace changes
Inline Side-by-side
Showing with 111 additions and 82 deletions
package-lock.json
View file @ 703295f2
...@@ -13636,6 +13636,11 @@ ...@@ -13636,6 +13636,11 @@
"vue-class-component": "^7.0.1" "vue-class-component": "^7.0.1"
} }
}, },
"vue-router": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.3.tgz",
"integrity": "sha512-8iSa4mGNXBjyuSZFCCO4fiKfvzqk+mhL0lnKuGcQtO1eoj8nq3CmbEG8FwK5QqoqwDgsjsf1GDuisDX4cdb/aQ=="
},
"vue-style-loader": { "vue-style-loader": {
"version": "4.1.2", "version": "4.1.2",
"resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz", "resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz",
......
src/App.vue
View file @ 703295f2
...@@ -53,7 +53,8 @@ ...@@ -53,7 +53,8 @@
<script lang="ts"> <script lang="ts">
import { Component, Vue } from "vue-property-decorator"; import { Component, Vue } from "vue-property-decorator";
import axios from "axios"; import axios from "axios";
import { GridItemData,GridLayout,GridItem} from 'vue-grid-layout'; import { GridItemData, GridLayout, GridItem } from "vue-grid-layout";
import VueRouter from 'vue-router';
import { WidgetRef } from "./models/WidgetRef"; import { WidgetRef } from "./models/WidgetRef";
import { WidgetConfig, AllWidgetConfig } from "./models/WidgetConfig"; import { WidgetConfig, AllWidgetConfig } from "./models/WidgetConfig";
...@@ -67,7 +68,9 @@ import WaveView from "./components/WaveView/WaveView.vue"; ...@@ -67,7 +68,9 @@ import WaveView from "./components/WaveView/WaveView.vue";
import Method from "./components/Method/Method.vue"; import Method from "./components/Method/Method.vue";
import Config from "./components/Config/Config.vue"; import Config from "./components/Config/Config.vue";
import Thing from "./components/Thing/Thing.vue"; import Thing from "./components/Thing/Thing.vue";
import { indexOf } from 'typescript-collections/dist/lib/arrays';
Vue.use(VueRouter)
//this is the view selecotr class //this is the view selecotr class
@Component({ @Component({
components: { components: {
...@@ -89,84 +92,91 @@ export default class App extends Vue { ...@@ -89,84 +92,91 @@ export default class App extends Vue {
text: string = ""; text: string = "";
//when add more available widgets add its name here //when add more available widgets add its name here
availableWidgets = ["Status", "Config", "WaveView", "Method","Thing"]; availableWidgets = ["Status", "Config", "WaveView", "Method", "Thing"];
toggleShowAddWidget(): void { toggleShowAddWidget(): void {
this.isShowAddWidget = !this.isShowAddWidget; this.isShowAddWidget = !this.isShowAddWidget;
} }
pokeAndUpdateUI(ref:string, sample:ResourceInfo[], samplePath:string) pokeAndUpdateUI(ref: string, sample: ResourceInfo[], samplePath: string) {
{
Vue.nextTick(() => { Vue.nextTick(() => {
console.log(this.$refs[ref]); 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).samplePoke(
sample,
samplePath
);
((this.$refs[ref] as Array<Widget>)[0] as Widget).updateUI(); ((this.$refs[ref] as Array<Widget>)[0] as Widget).updateUI();
}) });
} }
mounted() { mounted() {
// var f1 = window.location.hash;
// console.log(typeof(f1));
var fragment = window.location.hash; var fragment = window.location.hash;
// var fragment = "#/dataServer/BasePath"; fragment += "a";
console.log(fragment); fragment = fragment.substring(0,fragment.length-1);
console.log(typeof(fragment));
if (fragment != "#") { if (fragment != "#") {
fragment = fragment.substring(1,fragment.length); fragment = fragment.substring(1, fragment.length);
var customViewURL = "customView/template" + fragment; var customViewURL = "/customView/template" + fragment;
console.log(customViewURL); console.log(customViewURL);
axios.get(customViewURL).then(response => { axios.get(customViewURL).then(response => {
if(response.data.CFET2CORE_SAMPLE_ISVALID == false || response.data.CFET2CORE_SAMPLE_VAL == null) if (
{ response.data.CFET2CORE_SAMPLE_ISVALID == false ||
response.data.CFET2CORE_SAMPLE_VAL == null
) {
//直接访问对应的值 //直接访问对应的值
var dataURL = fragment; var dataURL = fragment;
axios.get(fragment).then(response => { console.log(dataURL);
var resourcetype = response.data.ResourceType; axios.get(dataURL,{headers: {
var samplePath = response.data.CFET2CORE_SAMPLE_PATH; "Content-Type":"application/json"
}}).then(dataresponse => {
console.log(dataresponse.data);
var resourcetype = dataresponse.data.ResourceType;
var samplePath = dataresponse.data.CFET2CORE_SAMPLE_PATH;
var sample: ResourceInfo[] = []; var sample: ResourceInfo[] = [];
//这里不知道要以什么类型接收json，所以写的比较死。后续displaytype加上后需要加上WaveView //这里不知道要以什么类型接收json，所以写的比较死。后续displaytype加上后需要加上WaveView
switch(resourcetype){ switch (resourcetype) {
case "Thing": case "Thing": {
{ this.addWidget(resourcetype.data);
this.addWidget(resourcetype);
break; break;
} }
case "Status": case "Status": {
{
this.addWidget(resourcetype); this.addWidget(resourcetype);
var tempRef = (this.lastWidgetIndex - 1).toString(); var tempRef = (this.lastWidgetIndex - 1).toString();
sample[0] = response.data.Actions.get as ResourceInfo; sample[0] = dataresponse.data.Actions.get as ResourceInfo;
console.log(sample[0]); console.log(sample[0]);
console.log(sample[0].Parameters); console.log(sample[0].Parameters);
this.pokeAndUpdateUI(tempRef, sample,samplePath); this.pokeAndUpdateUI(tempRef, sample, samplePath);
break; break;
} }
case "Method": case "Method": {
{
this.addWidget(resourcetype); this.addWidget(resourcetype);
var tempRef = (this.lastWidgetIndex - 1).toString(); var tempRef = (this.lastWidgetIndex - 1).toString();
sample[0] = response.data.Actions.invoke as ResourceInfo; sample[0] = dataresponse.data.Actions.invoke as ResourceInfo;
this.pokeAndUpdateUI(tempRef, sample,samplePath); this.pokeAndUpdateUI(tempRef, sample, samplePath);
break; break;
} }
case "Config": case "Config": {
{
this.addWidget(resourcetype); this.addWidget(resourcetype);
var tempRef = (this.lastWidgetIndex - 1).toString(); var tempRef = (this.lastWidgetIndex - 1).toString();
//这里传的sample为数组是考虑到config，默认set位于sample[1] //这里传的sample为数组是考虑到config，默认set位于sample[1]
sample[0] = response.data.Actions.get as ResourceInfo; sample[0] = dataresponse.data.Actions.get as ResourceInfo;
sample[1] = response.data.Actions.set as ResourceInfo; sample[1] = dataresponse.data.Actions.set as ResourceInfo;
this.pokeAndUpdateUI(tempRef, sample,samplePath); this.pokeAndUpdateUI(tempRef, sample, samplePath);
break; break;
} }
} }
}) });
} } else {
else{
//返回有值的customview template，进行load处理 //返回有值的customview template，进行load处理
var customviewTemplate:string; var customviewTemplate: string;
customviewTemplate = response.data.CFET2CORE_SAMPLE_VAL; customviewTemplate = response.data.CFET2CORE_SAMPLE_VAL;
console.log(customviewTemplate); console.log(customviewTemplate);
var widgets = Object.assign( var widgets = Object.assign(
new AllWidgetConfig(), new AllWidgetConfig(),
JSON.parse(customviewTemplate)); JSON.parse(customviewTemplate)
);
console.log(widgets); console.log(widgets);
this.widgetList = widgets.widgetList; this.widgetList = widgets.widgetList;
this.lastWidgetIndex = Number(widgets.currentRef); this.lastWidgetIndex = Number(widgets.currentRef);
...@@ -183,15 +193,16 @@ export default class App extends Vue { ...@@ -183,15 +193,16 @@ export default class App extends Vue {
((this.$refs[wid.ref] as Array<Widget>)[0] as Widget).refresh(); ((this.$refs[wid.ref] as Array<Widget>)[0] as Widget).refresh();
} }
}); });
} }
}) });
} }
} }
exportActiveWidgetList(): AllWidgetConfig { exportActiveWidgetList(): AllWidgetConfig {
for (var widget of this.widgetList) { for (var widget of this.widgetList) {
widget.widgetConfig = ((this.$refs[widget.ref] as Array<Widget>)[0] as Widget).getConfig(); widget.widgetConfig = ((this.$refs[widget.ref] as Array<
Widget
>)[0] as Widget).getConfig();
} }
var widgetConfigList = new AllWidgetConfig(); var widgetConfigList = new AllWidgetConfig();
widgetConfigList.widgetList = this.widgetList; widgetConfigList.widgetList = this.widgetList;
...@@ -203,11 +214,12 @@ export default class App extends Vue { ...@@ -203,11 +214,12 @@ export default class App extends Vue {
importActiveWidgetList() { importActiveWidgetList() {
for (var wid of this.widgetList) { for (var wid of this.widgetList) {
console.log(wid.widgetConfig); console.log(wid.widgetConfig);
((this.$refs[wid.ref] as Array<Widget>)[0] as Widget).setConfig( wid.widgetConfig as WidgetConfig); ((this.$refs[wid.ref] as Array<Widget>)[0] as Widget).setConfig(
wid.widgetConfig as WidgetConfig
);
} }
} }
loadTextFromFile(ev: any) { loadTextFromFile(ev: any) {
const file = ev.target.files[0]; const file = ev.target.files[0];
const reader = new FileReader(); const reader = new FileReader();
...@@ -223,13 +235,13 @@ export default class App extends Vue { ...@@ -223,13 +235,13 @@ export default class App extends Vue {
this.widgetList = widgets.widgetList; this.widgetList = widgets.widgetList;
this.lastWidgetIndex = Number(widgets.currentRef); this.lastWidgetIndex = Number(widgets.currentRef);
this.$forceUpdate(); this.$forceUpdate();
Vue.nextTick(() => { // changed here Vue.nextTick(() => {
// changed here
this.importActiveWidgetList(); this.importActiveWidgetList();
}); });
// console.log(this.$refs); // console.log(this.$refs);
}; };
}
}
saveWidgetList(): void { saveWidgetList(): void {
var data = JSON.stringify(this.exportActiveWidgetList()); var data = JSON.stringify(this.exportActiveWidgetList());
...@@ -253,8 +265,8 @@ export default class App extends Vue { ...@@ -253,8 +265,8 @@ export default class App extends Vue {
var newWidget = new WidgetRef(); var newWidget = new WidgetRef();
newWidget.widgetComponentName = widgetName; newWidget.widgetComponentName = widgetName;
newWidget.ref = this.lastWidgetIndex.toString(); newWidget.ref = this.lastWidgetIndex.toString();
newWidget.y=this.lastWidgetIndex*6; newWidget.y = this.lastWidgetIndex * 6;
newWidget.i=Number(newWidget.ref); newWidget.i = Number(newWidget.ref);
this.lastWidgetIndex++; this.lastWidgetIndex++;
this.widgetList = [...this.widgetList, newWidget]; this.widgetList = [...this.widgetList, newWidget];
} }
......
src/components/Common/FamilyLink.vue → src/components/Common/Navigation.vue
View file @ 703295f2
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
<div> <div>
<span>parent and children link</span> <span>parent and children link</span>
<b-button variant="primary" @click="getPath">show</b-button> <b-button variant="primary" @click="getPath">show</b-button>
<div> <div style="margin-top:10px;height:80px;overflow:scroll" v-show="isShow">
<a :href="parentPath">{{ parentPath }}</a> <a :href="parentPath" style="float:left">parentPath:{{ parentPath }}</a>
<div v-for="(path,index) in childrenPath" :key="index"> <div v-for="(path,index) in childrenPath" :key="index">
<a :href= "path" >{{path}}</a><br> <a :href= "path" style="float:left">childrenPath:{{path}}</a><br>
</div> </div>
</div> </div>
</div> </div>
...@@ -29,10 +29,11 @@ import WidgetParams from "@/components/Common/WidgetParams.vue"; ...@@ -29,10 +29,11 @@ import WidgetParams from "@/components/Common/WidgetParams.vue";
WidgetParams WidgetParams
} }
}) })
export default class FamilyLink extends Vue { export default class Navigation extends Vue {
@Prop() url!:string; @Prop() url!:string;
parentPath!:string; parentPath!:string;
childrenPath!:string[]; childrenPath!:string[];
isShow:boolean = false;
async getPath(){ async getPath(){
var apiLoad = this.url; var apiLoad = this.url;
...@@ -41,6 +42,7 @@ export default class FamilyLink extends Vue { ...@@ -41,6 +42,7 @@ export default class FamilyLink extends Vue {
this.parentPath = response.data.ParentPath as string; this.parentPath = response.data.ParentPath as string;
this.childrenPath = response.data.ChildrenPath as string[]; this.childrenPath = response.data.ChildrenPath as string[];
}) })
this.isShow = true;
this.$forceUpdate(); this.$forceUpdate();
} }
......
src/components/Status/Status.vue
View file @ 703295f2
...@@ -17,11 +17,12 @@ ...@@ -17,11 +17,12 @@
<b-form-input v-model="config.data.url"></b-form-input> <b-form-input v-model="config.data.url"></b-form-input>
<b-input-group-append> <b-input-group-append>
<b-button @click="updateUI" size="sm" text="Button" variant="primary">OK</b-button> <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-append>
</b-input-group> </b-input-group>
<hr/> <hr/>
<WidgetParams ref="WidgetParams" v-show="isShowParams&&isShowPath" action="get" @updataVariables="viewLoad" ></WidgetParams> <WidgetParams ref="WidgetParams" v-show="isShowParams&&isShowPath" action="get" @updataVariables="viewLoad" ></WidgetParams>
<FamilyLink ref="FamilyLink" :url="config.data.url"></FamilyLink> <Navigation ref="FamilyLink" :url="config.data.url"></Navigation>
</b-container> </b-container>
</template> </template>
...@@ -41,12 +42,12 @@ import PathProcessor from "@/models/PathProcessor"; ...@@ -41,12 +42,12 @@ import PathProcessor from "@/models/PathProcessor";
import StrMapObjChange from "@/models/StrMapObjChange"; import StrMapObjChange from "@/models/StrMapObjChange";
import { forEach } from "typescript-collections/dist/lib/arrays"; import { forEach } from "typescript-collections/dist/lib/arrays";
import { map } from "d3"; import { map } from "d3";
import FamilyLink from '@/components/Common/FamilyLink.vue'; import Navigation from '@/components/Common/Navigation.vue';
@Component({ @Component({
components: { components: {
WidgetParams, WidgetParams,
FamilyLink Navigation
} }
}) })
export default class Status extends Widget { export default class Status extends Widget {
...@@ -151,7 +152,11 @@ export default class Status extends Widget { ...@@ -151,7 +152,11 @@ export default class Status extends Widget {
pathPoke() pathPoke()
{ {
axios.get(this.config.data.url).then(response => { axios.get(this.config.data.url).then(response => {
console.log(this.config.data.url);
console.log(response);
console.log(response.data);
var resourcetype = response.data.ResourceType; var resourcetype = response.data.ResourceType;
console.log(resourcetype);
var samplePath = response.data.CFET2CORE_SAMPLE_PATH; var samplePath = response.data.CFET2CORE_SAMPLE_PATH;
var sample: ResourceInfo[] = []; var sample: ResourceInfo[] = [];
sample[0] = response.data.Actions.get as ResourceInfo; sample[0] = response.data.Actions.get as ResourceInfo;
......
src/components/WaveView/WaveView.vue
View file @ 703295f2
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
</div> </div>
<setBasicParams ref="setBasicParams" @getPathId="getPathId" @updateConfig="updateConfig" :wave="wave" :setConfig='config'></setBasicParams> <setBasicParams ref="setBasicParams" @getPathId="getPathId" @updateConfig="updateConfig" :wave="wave" :setConfig='config'></setBasicParams>
<Navigation ref="FamilyLink" :url="config.data.url"></Navigation>
</div> </div>
</template> </template>
...@@ -12,6 +13,7 @@ ...@@ -12,6 +13,7 @@
import Vue from 'vue' import Vue from 'vue'
import setBasicParams from './setBasicParams.vue'; import setBasicParams from './setBasicParams.vue';
import showViewInfo from './showViewInfo.vue'; import showViewInfo from './showViewInfo.vue';
import Navigation from '@/components/Common/Navigation.vue';
import Component from 'vue-class-component'; import Component from 'vue-class-component';
import { Prop, Watch } from 'vue-property-decorator'; import { Prop, Watch } from 'vue-property-decorator';
import { WidgetConfig } from '@/models/WidgetConfig'; import { WidgetConfig } from '@/models/WidgetConfig';
...@@ -25,7 +27,8 @@ import axios from "axios"; ...@@ -25,7 +27,8 @@ import axios from "axios";
@Component({ @Component({
components:{ components:{
setBasicParams, setBasicParams,
showViewInfo showViewInfo,
Navigation
} }
}) })
export default class waveView extends Widget { export default class waveView extends Widget {
......
src/components/WaveView/setBasicParams.vue
View file @ 703295f2
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<b-input v-model="config.data.url" ></b-input> <b-input v-model="config.data.url" ></b-input>
<b-input-group-addon> <b-input-group-addon>
<b-button variant="primary" @click="getPathIdParams">OK<span class="glyphicon glyphicon-save"></span></b-button> <b-button variant="primary" @click="getPathIdParams">OK<span class="glyphicon glyphicon-save"></span></b-button>
<!-- <b-button variant="info" @click="">poke</b-button> -->
</b-input-group-addon> </b-input-group-addon>
</b-input-group> </b-input-group>
</div> </div>
...@@ -222,7 +223,7 @@ export default class setBasicParams extends Vue { ...@@ -222,7 +223,7 @@ export default class setBasicParams extends Vue {
displaylogo: false displaylogo: false
}; };
Plotly.newPlot(myPlot, data_update, data_layout, config); // Plotly.newPlot(myPlot, data_update, data_layout, config);
} }
async getData(url: string) { async getData(url: string) {
var apiLoad = "/dataserver" + "/DataByTimeFuzzy/" + url;//改 var apiLoad = "/dataserver" + "/DataByTimeFuzzy/" + url;//改
......
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