Skip to content

GitLab

C
CFET_WidgetUI
Commit 1d742ca8 authored by XieXiaohan's avatar XieXiaohan
Browse files
Options

add config edit

parent 64fd2184
Show whitespace changes
Inline Side-by-side
Showing with 619 additions and 649 deletions
src/App.vue
View file @ 1d742ca8
......@@ -83,8 +83,8 @@
<grid-layout
:layout.sync="widgetList"
:col-num="18"
:row-height="35"
:col-num="30"
:row-height="22"
:is-draggable= isShowDrag
:is-resizable= isShowRes
:is-mirrored="false"
......@@ -230,6 +230,7 @@ export default class App extends Vue {
this.OpenWindow = isOpen;
}
refactor(){
......@@ -374,20 +375,12 @@ export default class App extends Vue {
UpdateWidget(EditData:any) {
var url = (EditData.edit.url);
this.$refs[EditData.edit.index][0].pathPoke(url);
this.$refs[EditData.edit.index][0].viewLoad(EditData.params.Args);
if (EditData.params.Args != null) {
this.$refs[EditData.edit.index][0].fontSize = EditData.edit.fontSize;
console.log(EditData);
this.$refs[EditData.edit.index][0].EditData = EditData;
this.$refs[EditData.edit.index][0].pathPoke();
this.$refs[EditData.edit.index][0].viewLoad(EditData.params.Args);
this.$refs[EditData.edit.index][0].EditData.edit.fontSize = EditData.edit.fontSize;
this.$refs[EditData.edit.index][0].EditData.params.StateFile = EditData.params.StateFile;
this.$refs[EditData.edit.index][0].EditData.params.StateIndicatorFile = EditData.params.StateIndicatorFile;
}
}
exportActiveWidgetList(): AllWidgetConfig {
for (var widget of this.widgetList) {
widget.widgetConfig = ((this.$refs[widget.ref] as Array<
......
src/Windows/WindowsApp.vue
View file @ 1d742ca8
......@@ -12,61 +12,28 @@
</thead>
<tbody>
<tr class="is-selected is-fullwidth" v-if="EditData.edit.type == 'status' || EditData.edit.type == 'state'">
<th>status</th>
<tr class="is-selected is-fullwidth">
<th>{{EditData.edit.type}}</th>
<td>Enter the Thingin the input box below, </td>
<td>then the return value will Automatic updates</td>
<td>click 'POKE' to get the parameters</td>
</tr>
<tr v-if="EditData.edit.type == 'status'|| EditData.edit.type == 'state'">
<th>EDIT url:</th>
<td> <input class="input has-text-primary" v-model="config.data.url" type="text"></td>
<tr v-if="EditData.edit.type != 'config'">
<th>url:</th>
<td> <input class="input has-text-primary" v-model="EditData.edit.url" type="text"></td>
<td><button class="button has-text-primary" style="margin-left: 15px;" @click="pathPoke">POKE</button></td>
</tr>
<tr v-if="EditData.edit.type == 'status'|| EditData.edit.type == 'state'">
<th>fontSize</th>
<td> <input class="input has-text-primary" v-model="fontSize" type="text"></td>
<tr v-for="(prop,key) in EditData.props">
<th>{{key}}</th>
<td> <input class="input has-text-primary" v-model="EditData.props[key]" type="text">{{prop}}</td>
<td v-if="key == 'setPathPoke' || key == 'getPathPoke'"><button class="button has-text-primary" style="margin-left: 15px;" @click="pathPoke(key)">POKE</button></td>
</tr>
<tr v-if="EditData.edit.type == 'status'|| EditData.edit.type == 'state'">
<th>Params</th>
<td>
<div class="file" @change="loadTextFromStateFile" v-model="file">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
State
</span>
</span>
</label>
</div>
</td>
<td>
<div class="file" @change="loadTextFromStateIndicatorFile" v-model="file">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-upload"></i>
</span>
<span class="file-label">
State Indicator
</span>
</span>
</label>
</div>
</td>
</tr>
<tr v-if="EditData.edit.type == 'status'|| EditData.edit.type == 'state'">
<tr>
<th>Params</th>
<td>
<div v-for="(label, index) in userInputData.keys()" :key="index" class="column" v-show="isShowParams">
......@@ -88,7 +55,7 @@
</td>
</tr>
<tr v-if="EditData.edit.type == 'status'|| EditData.edit.type == 'state'">
<tr >
<th>Finish</th>
<td> <button class="button is-light " @click="apply"> Apply</button></td>
......@@ -127,19 +94,19 @@ import { Widget } from "./models/widget";
export default class WindowsApp extends Vue {
pathProcessor = new PathProcessor();
EditPathPoke : string = '';
//EditPathPoke : string = '';
isShowParams: boolean = true;
userInputData = new Map<string, string>();
tempUserInputData:{[key: string]: string} = {};
pathwithVar: string = "";
fontSize:number = null;
StateFile:any = {};
StateIndicatorFile:any = {};
//fontSize:number = null;
//StateFile:any = {};
//StateIndicatorFile:any = {};
config: WidgetConfig = {
WidgetComponentName: "Status",
WidgetComponentName: "",
data: {
url: "",
get: { url: "", userInputData: "" },
......@@ -149,22 +116,7 @@ export default class WindowsApp extends Vue {
}
};
EditData:any={
edit:{
type:'',
url:this.config.data.url,
fontSize:this.fontSize,
index:'',
},
params:{
PokedPath:this.EditPathPoke,
action:'',
Args : {},
StateFile : {},
StateIndicatorFile : {},
//userInputData:this.userInputData,
},
};
EditData:any={};
created() {
......@@ -176,8 +128,10 @@ export default class WindowsApp extends Vue {
this.EditData = data;
}
this.config.data.url = this.EditData.params.PokedPath;
this.fontSize = this.EditData.edit.fontSize;
if(this.EditData.props.StateFile != null){
this.EditData.props.StateFile = JSON.stringify(this.EditData.props.StateFile);
this.EditData.props.StateIndicatorFile = JSON.stringify(this.EditData.props.StateIndicatorFile);
}
}
mounted(){
......@@ -190,6 +144,14 @@ export default class WindowsApp extends Vue {
this.setVariableList(
this.pathProcessor.extractVarFromPath(this.EditData.params.PokedPath)
);
if(this.EditData.edit.type == 'config'){
this.setVariableList(
this.pathProcessor.extractVarFromPath(this.EditData.params.GetPokedPath)
);
this.setVariableList(
this.pathProcessor.extractVarFromPath(this.EditData.params.SetPokedPath)
);
}
}
......@@ -220,15 +182,13 @@ export default class WindowsApp extends Vue {
}*/
apply(){
this.EditData.edit.url = this.config.data.url;
var Args: UpdatePayload = {
action: this.EditData.params.action,
variables: this.getVariableValues(),
target: ["self"]
};
this.EditData.params.Args = Args;
this.EditData.edit.fontSize = this.fontSize;
this.EditData.params.tempUserInputData = this.tempUserInputData;
window.opener.UpdateWidget(this.EditData);
}
......@@ -236,13 +196,19 @@ export default class WindowsApp extends Vue {
pathPoke() {
pathPoke(key:string) {
this.isShowParams = true;
this.EditData.edit.url = this.config.data.url;
if(key == 'setPathPoke'){
this.EditData.params.action = 'set';
}else if(key == 'getPathPoke'){
this.EditData.params.action = 'get';
}
window.opener.UpdateWidget(this.EditData);
}
setVariableList(path: string[]) {
console.log(path);
......@@ -252,6 +218,7 @@ export default class WindowsApp extends Vue {
});
console.log(this.userInputData);
this.$forceUpdate();
}
......@@ -260,6 +227,7 @@ export default class WindowsApp extends Vue {
for(var key of this.userInputData.keys()) {
this.userInputData.set(key, this.tempUserInputData[key]);
}
return this.userInputData;
}
......
src/components/Config/Config.vue
View file @ 1d742ca8
<template>
<!--<div class="container">
<div class="columns" style="margin-top:10px">
<span style="float:left;" v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname != ''">{{ config.data.displayname }}</span>
<span style="float:left;" v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname == ''">{{ config.data.url }}</span>
<input class="input colmumn is-8" type="text" v-show="isShowPath" v-model="config.data.displayname">
</div>
<div class="columns" style="margin-top:5px">
<div class="column is-10" style="margin-left:3%;overflow:auto;border-style: solid; border-width: 1px; padding: 2px">
<p style="float:left;margin:0px;">{{ getConfigValue }}</p>
</div>
<p class="column buttons " style="padding-top: 0px;padding-bottom: 0px;margin-bottom: 0px;">
<button @click="showPathConfig" class="button" style="margin-bottom: 0px;">
<span class="icon is-small has-text-info">
<i class="fa fa-cog" aria-hidden="true"></i>
</span>
</button>
</p>
<div class="column" style="padding-top: 0px;padding-bottom: 0px;">
<a class="delete is-medium" @click="del" style="margin-top: 3px;"></a>
</div>
</div>-->
<!--<div class="columns" v-show="isShowGetPath" style="margin-bottom: 0px;">
<div class="field column is-10" style="padding-right: 0px; padding-bottom: 0px;padding-top: 9px;" >
<div class="control">
<input class="input is-info" type="text">
</div>
</div>
<div class="column" style="padding-left: 0px; padding-right: 0px;padding-bottom: 0px;padding-top: 9px;">
<button class="button is-light " @click="updateGetUI">OK</button>
</div>
<div class="column" style="padding-left: 0px;padding-bottom: 0px;padding-top: 9px;">
<button class="button is-info" @click="getPathPoke">POKE</button>
</div>
</div>
<div class="columns" style="margin-top: 0px;margin-bottom: 0px;">
<WidgetParams
class="column"
style="padding-top: 0px;padding-bottom: 5px;"
ref="WidgetGetParams"
v-show="isShowGetParams"
action="get"
@updataVariables="viewGetLoad"
></WidgetParams>
</div>-->
<!--<div class="columns" v-show="isShowSetPath" style="margin-bottom: 0px;margin-top: 0px;">
<div class="field column is-10" style="padding-right: 0px;padding-bottom: 0px;padding-top: 3px;" >
<div class="control">
<input class="input is-info" type="text">
</div>
</div>
<div class="column" style="padding-left: 0px; padding-right: 0px;padding-bottom: 0px;padding-top: 3px;">
<button class="button is-light " @click="updateSetUI">OK</button>
</div>
<div class="column" style="padding-left: 0px;padding-bottom: 0px;padding-top: 3px;">
<button class="button is-info" @click="setPathPoke">POKE</button>
</div>
</div>
<div class="columns" style="margin-bottom: 0px;">
<WidgetParams
class="column"
ref="WidgetSetParams"
v-show="isShowSetParams"
action="set"
@updataVariables="viewSetLoad"
></WidgetParams>
</div>
<Navigation ref="FamilyLink" :url="config.data.url"></Navigation>
</div>-->
<div class="container">
......@@ -101,12 +8,7 @@
<span style="float:left;" v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname != ''">{{ config.data.displayname }}</span>
<span style="float:left;" v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname == ''">{{ config.data.get.url }}</span>
<!--<input class="input colmumn is-8" type="text" v-show="isShowPath" v-model="config.data.displayname">-->
<div class="column is-1" style="margin-left: 90%;padding: 0px;margin-right: 10%" >
<a class="delete is-medium" @click="del"></a>
</div>
<span style="float:left;" v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname == ''">{{ config.data.set.url }}</span>
</div>
......@@ -116,82 +18,31 @@
<p style="float:left;margin:0px;">{{ getConfigValue }}</p>
</div>
</div>
<!--<hsc-window-style-metal >
<toggle-button v-model="myDataVariable"
width="100"
height="44"
switch-color="{checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}"
:labels="{checked: 'open', unchecked: 'close'}"/>
<hsc-window title="Edit Config" :closeButton="true" :isOpen.sync="isOpen" positionHint="5 / 5">
<fieldset style="padding: 20px;">
<div class="columns">
<div class="column is-2" style="color: #206dec;font-size: 18px;font-style: oblique;font-weight: 900;padding: 0px;">Config</div>
<i class="fa fa-question-circle-o" aria-hidden="true" style="margin-top: 5px;margin-left: 3px;"></i>
</div>
<div class="columns">Enter the Thing in the input box below,</div>
<div class="columns">
then the return value will Automatic updates ,click 'POKE' to get the parameters</div>
<div class="columns" style="margin-bottom: 0px;">
<div class="field column is-7" style="padding-right: 0px;" >
<div class="control">
<input class="input is-info" v-model="config.data.get.url" type="text">
</div>
</div>
<div class="column" style="position: relative;right: 25px;">
<button class="button is-light " @click="updateGetUI">GET</button>
</div>
<div class="column" style="position: relative;right: 50px;">
<button class="button is-info" @click="getPathPoke">POKE</button>
</div>
</div>
<div class="colmumns">
<input class="input column is-10" type="text" v-show="isShowPath" v-model="config.data.displayname">
<WidgetParams
class="column"
style="padding-top: 0px;padding-bottom: 5px;"
ref="WidgetGetParams"
v-show="isShowGetParams"
action="get"
@updataVariables="viewGetLoad"
></WidgetParams>
</div>
<hr style="size: 6px;">
<div class="columns">
<div class="column is-2" style="color: #206dec;font-size: 18px;font-style: oblique;font-weight: 900;padding: 0px;">Set Value</div>
<i class="fa fa-question-circle-o" aria-hidden="true" style="margin-top: 5px;margin-left: 3px;"></i>
</div>
<div class="columns">Enter the Thing in the input box below,</div>
<div class="columns">
click 'Set' to Set value, or click 'POKE' to get the parameters</div>
<div class="columns" style="margin-bottom: 0px;">
<div class="field column is-7" style="padding-right: 0px;" >
<div class="control">
<input class="input is-info" v-model="config.data.set.url" type="text">
</div>
</div>
<div class="column" style="position: relative;right: 25px;">
<button class="button is-light " @click="updateSetUI">SET</button>
</div>
<div class="column" style="position: relative;right: 50px;">
<button class="button is-info" @click="setPathPoke">POKE</button>
</div>
</div>
<div class="colmumns">
<input class="input column is-10" type="text" v-show="isShowPath" v-model="config.data.displayname">
<WidgetParams
class="column"
ref="WidgetSetParams"
v-show="isShowSetParams"
action="set"
@updataVariables="viewSetLoad"
></WidgetParams>
......@@ -200,164 +51,6 @@
</fieldset>
<fieldset>
<hr>
<div class="columns" style="margin-top: 5px;margin-bottom: 5px;margin-right: 20px;">
<button class="button column is-offset-9 is-3" style="background-color: #8fb9f7;padding-top: 6px;">
<i class="fa fa-flag" aria-hidden="true" style="margin-right: 4px;"></i>Navigation</button>
</div>
</fieldset>
</hsc-window>
<p class="column buttons is-1" style="margin-left: 3%;padding: 0px;margin-right: 10%;margin-top: 5%">
<button @click="isOpen = ! isOpen" class="button" style="background-color: #64a6e1">
<span class="icon is-small has-text" style="margin-right: 1px;">
<i class="fa fa-cog" aria-hidden="true"></i>
</span>
EDIT</button>
</p>
</hsc-window-style-metal>-->
<div class="colmumns">
<WidgetParams
class="column"
style="padding-top: 0px;padding-bottom: 5px;"
ref="WidgetGetParams"
v-show="isShowGetParams"
action="get"
@updataVariables="viewGetLoad"
></WidgetParams>
</div>
<div class="colmumns">
<WidgetParams
class="column"
ref="WidgetSetParams"
v-show="isShowSetParams"
action="set"
@updataVariables="viewSetLoad"
></WidgetParams>
</div>
<p class="column buttons is-1" style="margin-left: 3%;padding: 0px;margin-right: 10%;margin-top: 5%">
<button @click="openWindows" class="button" style="background-color: #64a6e1">
<span class="icon is-small has-text" style="margin-right: 1px;">
<i class="fa fa-cog" aria-hidden="true"></i>
</span>
EDIT</button>
</p>
<!--<div class="columns" >
<p class="column buttons is-1" style="margin-left: 3%;padding: 0px;margin-right: 10%;margin-top: 5%">
<button @click="showPathConfig" class="button" style="background-color: #64a6e1">
<span class="icon is-small has-text" style="margin-right: 1px;">
<i class="fa fa-cog" aria-hidden="true"></i>
</span>
EDIT</button>
</p>
</div>
<div v-show="isShowPath">
<div class="columns">
<div class="column is-1" style="color: #206dec;font-size: 18px;font-style: oblique;font-weight: 900;padding: 0px;">Get Value</div>
<i class="fa fa-question-circle-o" aria-hidden="true" style="margin-top: 5px;margin-left: 3px;"></i>
</div>
<div class="columns">Enter the Thing in the input box below,</div>
<div class="columns">
click 'Get' to get value, or click 'POKE' to get the parameters</div>
<div class="columns" style="margin-bottom: 0px;">
<div class="field column is-7" style="padding-right: 0px;" >
<div class="control">
<input class="input is-info" v-model="config.data.get.url" type="text">
</div>
</div>
<div class="column" style="position: relative;right: 40px;">
<button class="button is-light " @click="updateGetUI">GET</button>
</div>
<div class="column" style="position: relative;right: 45px;">
<button class="button is-info" @click="getPathPoke">POKE</button>
</div>
</div>
<div class="colmumns">
<input class="input column is-10" type="text" v-show="isShowPath" v-model="config.data.displayname">
<WidgetParams
class="column"
style="padding-top: 0px;padding-bottom: 5px;"
ref="WidgetGetParams"
v-show="isShowGetParams"
action="get"
@updataVariables="viewGetLoad"
></WidgetParams>
</div>
<hr style="size: 6px;">
<div class="columns">
<div class="column is-1" style="color: #206dec;font-size: 18px;font-style: oblique;font-weight: 900;padding: 0px;">Set Value</div>
<i class="fa fa-question-circle-o" aria-hidden="true" style="margin-top: 5px;margin-left: 3px;"></i>
</div>
<div class="columns">Enter the Thing in the input box below,</div>
<div class="columns">
click 'Set' to Set value, or click 'POKE' to get the parameters</div>
<div class="columns" style="margin-bottom: 0px;">
<div class="field column is-7" style="padding-right: 0px;" >
<div class="control">
<input class="input is-info" v-model="config.data.set.url" type="text">
</div>
</div>
<div class="column" style="position: relative;right: 40px;">
<button class="button is-light " @click="updateSetUI">SET</button>
</div>
<div class="column" style="position: relative;right: 45px;">
<button class="button is-info" @click="setPathPoke">POKE</button>
</div>
</div>
<div class="colmumns">
<input class="input column is-10" type="text" v-show="isShowPath" v-model="config.data.displayname">
<WidgetParams
class="column"
ref="WidgetSetParams"
v-show="isShowSetParams"
action="set"
@updataVariables="viewSetLoad"
></WidgetParams>
</div>
<hr>
<div class="columns" style="margin-top: 5px;margin-bottom: 5px;">
<button class="button column is-offset-9 is-3" style="background-color: #8fb9f7;padding-top: 6px;">
<i class="fa fa-flag" aria-hidden="true" style="margin-right: 2px;"></i>Navigation</button>
</div>
</div>-->
</div>
......@@ -396,6 +89,7 @@ import Windows from "@/components/Common/Windows.vue";
})
export default class Config extends Widget {
@Prop() index!:number;
@Prop() refIndex!:number;
@Prop() widgetList:WidgetRef[] = [];
pathProcessor = new PathProcessor();
strMapObjChange = new StrMapObjChange();
......@@ -409,11 +103,10 @@ export default class Config extends Widget {
setPathwithVar: string = "";
isShowGetPath: boolean = false;
isShowSetPath: boolean = false;
isShowGetParams: boolean = false;
isShowSetParams: boolean = false;
isOpen: boolean = true;
fontSize:number = 25;
activeColor:string = '';
EditPathPoke:string = '';
isSetPoke: boolean = false;
isGetPoke: boolean = false;
......@@ -427,13 +120,23 @@ export default class Config extends Widget {
}
};
schemas : any[]= [{
label:'confug',
key:'config-config',
EditData = {
edit:{
type:'config',
index:this.index,
index:this.refIndex,
},
props:{
fontSize:this.fontSize,
getPathPoke:this.config.data.get.url,
setPathPoke:this.config.data.set.url,
},
];
params:{
PokedPath:this.EditPathPoke,
action:'get&set',
Args : {},
tempUserInputData:{},
},
};
created() {
// this.config.data.userInputData = this.userInputData;
......@@ -445,43 +148,76 @@ export default class Config extends Widget {
);
}
openWindows(){
this.isOpen = ! this.isOpen;
mounted(){
let containerlist = document.getElementsByClassName('container');
//CreateContainerId
var self = this;
let RightClickField = containerlist[this.index];
RightClickField.oncontextmenu = function (e) {
e.preventDefault();//demo区域停止原鼠标右击菜单
//this.popMenu('itemMenu',100,"100");
let menu = document.querySelector('.menu');//获取盒子menu。
if(menu) menu.remove();//判断清除初始盒子
menu = document.createElement('div');//创建盒子。
menu.classList.add('menu');//添加类
let menu1 = document.createElement('BUTTON');//创建盒子menu1。
menu1.innerHTML = 'del';//盒子menu1添加文本XXXX
menu1.onclick = self.del;
menu.appendChild(menu1);//menu末尾添加新的节点menu1
let menu2 = document.createElement('BUTTON');//创建盒子menu1。
menu2.innerHTML = 'edit';//盒子menu1添加文本XXXX
menu2.onclick = self.openWindows;
//menu2.setAttribute("onclick", this.openWindows);
menu.appendChild(menu2);//menu末尾添加新的节点menu1
RightClickField.appendChild(menu);//body末尾添加新的节点menu
//盒子跟随鼠标光标。
//menu.style.top = $('#RightClick').offset().top;
menu.style.left = e.offsetX +"px";
menu.style.top = e.offsetY +"px";
menu.style.position = 'absolute';
//menu.style.top = '${e.clientY}px';
//menu.style.left = '${e.clientX}px';
console.log(menu.style.top);
console.log(menu);
this.$parent.$parent.$root.$children[0].OpenWindows(this.isOpen);
this.$emit('schemas', this.schemas);
};
//全局点击时消失。
RightClickField.onclick = e => {
let menu = document.querySelector('.menu')
if (menu && !menu.contains(e.target))
menu.remove()
}
}
del()
{
openWindows(){
var JsonData = JSON.stringify(this.EditData);
var url ="http://localhost:8080/WindowsAppIndex.html/?";
window.open(url+JsonData, "WidgetWindow",'height=100, width=100, top=10, left=10, toolbar=no');
}
del(){
this.$emit('del', this.index);
console.log("del"+this.index);
}
updateUI() {
//this.updateGetUI();
( this.$refs.WidgetGetParams as WidgetParams).setVariableList(
this.pathProcessor.extractVarFromPath(this.config.data.get.url)
);
//this.updateSetUI();
( this.$refs.WidgetSetParams as WidgetParams).setVariableList(
this.pathProcessor.extractVarFromPath(this.config.data.set.url)
);
this.updateGetUI();
this.updateSetUI();
}
updateGetUI(isShowGetPath:boolean,isShowGetParams:boolean,url:string) {
this.isShowGetPath = isShowGetPath;
this.isShowGetParams = isShowGetParams;
this.config.data.get.url = url;
updateGetUI() {
console.log('updateGet')
this.EditData.params.PokedPath = this.config.data.get.url;
this.EditData.props.getPathPoke = this.config.data.get.url;
this.openWindows();
}
updateSetUI(isShowSetPath:boolean,isShowSetParams:boolean,url:string) {
this.isShowSetPath = isShowSetPath;
this.isShowSetParams = isShowSetParams;
this.config.data.set.url = url;
updateSetUI() {
this.EditData.params.PokedPath = this.config.data.set.url;
this.EditData.props.setPathPoke = this.config.data.set.url;
this.openWindows();
}
showPathConfig() {
......@@ -495,7 +231,6 @@ export default class Config extends Widget {
}
getConfig(): WidgetConfig {
// this.config.data.userInputData =(this.$refs.WidgetParams as WidgetParams).getVariableValues();
this.config.data.get.userInputData = this.strMapObjChange.strMapToObj(
(this.$refs.WidgetGetParams as WidgetParams).getVariableValues()
);
......@@ -508,8 +243,6 @@ export default class Config extends Widget {
setConfig(widgetConfig: WidgetConfig): void {
this.config = widgetConfig;
this.updateUI();
//map不能序列化，必须要单独处理，这里的处理方法仅限map<string,string>类型
//布置get输入参数
var temp = this.config.data.get.userInputData;
temp = JSON.parse(JSON.stringify(temp));
temp = this.strMapObjChange.objToStrMap(temp);
......@@ -517,7 +250,6 @@ export default class Config extends Widget {
(this.$refs.WidgetGetParams as WidgetParams).setVariableInput(
this.userGetInputData
);
//布置set输入参数
temp = this.config.data.set.userInputData;
temp = JSON.parse(JSON.stringify(temp));
temp = this.strMapObjChange.objToStrMap(temp);
......@@ -552,7 +284,6 @@ export default class Config extends Widget {
pokedPath = pokedPath.substring(0, pokedPath.length - 1);
}
this.config.data.get.url = pokedPath;
this.$parent.$root.$children[0].$children[0].$children[0].config.data.get.url = pokedPath;
}
if (this.isGetPoke == false || this.isSetPoke == true) {
......@@ -577,35 +308,50 @@ export default class Config extends Widget {
pokedPath = pokedPath.substring(0, pokedPath.length - 1);
}
this.config.data.set.url = pokedPath;
this.$parent.$root.$children[0].$children[0].$children[0].config.data.set.url = pokedPath;
}
this.isSetPoke = false;
this.isGetPoke = false;
}
/*getPathPoke() {
var pokepath = this.config.data.get.url;
getPathPoke(url:string) {
console.log(url);
this.config.data.get.url = url;
var pokepath = url;
axios.defaults.timeout = 1000;
axios.get(pokepath).then(response => {
this.isGetPoke = true;
this.samplePoke(response.data);
this.updateUI();
this.updateGetUI();
}).catch(err => {
console.log('catch');
this.EditData.params.PokedPath = this.config.data.get.url;
this.openWindows();
});
}*/
}
/*setPathPoke() {
var pokepath = this.config.data.set.url;
setPathPoke(url:string) {
this.config.data.set.url = url;
var pokepath = url;
axios.defaults.timeout = 1000;
axios.get(pokepath).then(response => {
this.isSetPoke = true;
this.samplePoke(response.data);
this.updateUI();
this.updateSetUI();
}).catch(err => {
console.log('catch');
this.EditData.params.PokedPath = this.config.data.set.url;
this.openWindows();
});
}*/
}
pathPoke() {
//this.getPathPoke();
this.$parent.$root.$children[0].$children[0].$children[0].getPathPoke();
//this.setPathPoke();
this.$parent.$root.$children[0].$children[0].$children[0].setPathPoke();
if(this.EditData.params.action == 'get'){
this.EditPathPoke = this.EditData.props.getPathPoke;
this.getPathPoke(this.EditData.props.getPathPoke);
}else if(this.EditData.params.action == 'set'){
this.EditPathPoke = this.EditData.props.setPathPoke;
this.setPathPoke(this.EditData.props.setPathPoke);
}
}
replaceStartPath(startPath: string): void {
......@@ -652,26 +398,10 @@ export default class Config extends Widget {
}
}
/*refresh() {
var GetArgs: UpdatePayload = {
action: "get",
variables: (this.$refs
.WidgetGetParams as WidgetParams).getVariableValues(),
target: ["self"]
};
this.viewGetLoad(GetArgs);
var SetArgs: UpdatePayload = {
action: "set",
variables: (this.$refs
.WidgetSetParams as WidgetParams).getVariableValues(),
target: ["self"]
};
this.viewSetLoad(SetArgs);
}*/
async getData(url: string) {
var apiLoad = url;
console.log(url);
await axios.get(apiLoad, {
headers: {
'Pragma': 'no-cache',
......@@ -701,6 +431,14 @@ export default class Config extends Widget {
console.log(this.setConfigValue);
}
viewLoad(Args: UpdatePayload){
if(this.EditData.params.action == 'get'){
this.viewGetLoad(Args);
}else{
this.viewSetLoad(Args);
}
}
//called when widgetParams action clicked
async viewGetLoad(Args: UpdatePayload) {
// this.config.data.userInputData = Args.variables;
......
src/components/State/State.vue
View file @ 1d742ca8
......@@ -71,7 +71,7 @@ export default class State extends Widget {
isShowPath: boolean = false;
isShowParams: boolean = false;
EditPathPoke : string = "";
fontSize:number = 25;
fontSize:number = 40;
activeColor:string = '#bbb';
config: WidgetConfig = {
......@@ -84,20 +84,29 @@ export default class State extends Widget {
};
EditData = {
edit:{
props:{
type:'state',
url:this.config.data.url,
index:this.refIndex,
fontSize:this.fontSize,
StateFile:{
"0":"yellow",
"1":"orange",
"2":"green",
"255":"red"
},
StateIndicatorFile:null,
},
params:{
PokedPath:this.EditPathPoke,
action:'get',
StateFile:{},
StateIndicatorFile:{},
Args : {},
tempUserInputData:{},
//userInputData:this.userInputData,
},
};
created() {
// this.config.data.userInputData = this.userInputData;
this.config.data.userInputData = this.strMapObjChange.strMapToObj(
......@@ -174,6 +183,7 @@ export default class State extends Widget {
updateUI() {
this.isShowPath = false;
this.EditData.params.PokedPath = this.config.data.url;
this.EditData.props.url = this.config.data.url;
this.openWindows();
}
......@@ -290,12 +300,7 @@ export default class State extends Widget {
}
refresh() {
var Args: UpdatePayload = {
action: "get",
variables: (this.$refs.WidgetParams as WidgetParams).getVariableValues(),
target: ["self"]
};
this.viewLoad(Args);
this.viewLoad(this.EditData.params.Args);
}
async getData(url: string) {
......@@ -309,19 +314,19 @@ export default class State extends Widget {
this.StatusValue = response.data.CFET2CORE_SAMPLE_VAL;
switch (this.StatusValue.toString()) {
case "0": {
this.activeColor = this.EditData.params.StateFile['0'];
this.activeColor = this.EditData.props.StateFile['0'];
break;
}
case "1": {
this.activeColor = this.EditData.params.StateFile['1'];
this.activeColor = this.EditData.props.StateFile['1'];
break;
}
case "2": {
this.activeColor = this.EditData.params.StateFile['2'];
this.activeColor = this.EditData.props.StateFile['2'];
break;
}
case "255": {
this.activeColor = this.EditData.params.StateFile['255'];
this.activeColor = this.EditData.props.StateFile['255'];
break;
}
}
......
src/components/Status/Status.vue
View file @ 1d742ca8
......@@ -2,33 +2,22 @@
<div class="container" id="RightClick">
<div class="columns" style="margin-top:0px">
<div class="column is-4">
<span v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname != ''">{{ config.data.displayname }}</span>
<span v-show = "!isShowPath" class="largeFont" v-if = "config.data.displayname == ''">{{ config.data.url }}</span>
<div class="columns" style="margin-top:5px;">
<!--<progress-bar
:options="BarOptions"
:value="value"
/>-->
<div class="column is-11 gauge" style="height: 300px"></div>
</div>
</div>
<div class="columns">
<div class="columns" style="margin-top:5px">
<div class="column is-10" style="margin-left:3%;overflow:auto;border-style: solid; border-width: 1px; padding: 4px">
<p style="float:left;margin:0px;" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }" >{{ StatusValue }}</p>
</div>
</div>
<!--<div class="columns" style="margin-top:5px" v-if="">
<div class="column is-10">
<div>{{EditData.params.StateIndicatorFile.ll}}</div><progress class="progress is-danger" v-bind:class="value=ProgressValue" max="1">{{ProgressValue}}</progress><div>{{EditData.params.StateIndicatorFile.hh}}</div>
<div class="column is-10 is-offset-1" style="margin-left:7%;overflow:auto;">
<div style="float:left;margin:0px;" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }" >{{ StatusValue }}</div>
</div>
</div>-->
<div class="columns">
<WidgetParams
class="column"
ref="WidgetParams"
......@@ -39,14 +28,6 @@
</div>
<!-- <p class="column buttons is-1" style="margin-left: 3%;padding: 0px;margin-right: 10%;margin-top: 5%">
<button @click="openWindows" class="button" style="background-color: #64a6e1">
<span class="icon is-small has-text" style="margin-right: 1px;">
<i class="fa fa-cog" aria-hidden="true"></i>
</span>
EDIT</button>
</p>-->
</div>
......@@ -54,9 +35,9 @@
<script lang="ts">
let gauge;
import Vue from "vue";
import { VueSvgGauge } from "vue-svg-gauge";
import Component from "vue-class-component";
......@@ -74,6 +55,9 @@ import { forEach } from "typescript-collections/dist/lib/arrays";
import { map } from "d3";
import Navigation from "@/components/Common/Navigation.vue";
import Windows from "@/components/Common/Windows.vue";
import g2plot from '@antv/g2plot';
import { Gauge } from '@antv/g2plot';
@Component({
components: {
......@@ -100,23 +84,12 @@ export default class Status extends Widget {
timer?: number;
isShowPath: boolean = false;
isShowParams: boolean = false;
isShowConfig: boolean = false;
isOpen: boolean = false;
EditPathPoke : string = "";
UserUrl:string = "";
fontSize:number = 15;
fontSize:number = 25;
activeColor:string = '';
ProgressValue:string = '0%';
schemas : any[]= [{
label:'status',
key:'status-config',
type:'status',
index:this.refIndex,
},
];
value:number = 0;
gaugeTicks:number[]=[0, 0.2, 0.4, 0.75, 1];
gaugeColor:string[] = ['red', 'yellow', 'green'];
config: WidgetConfig = {
......@@ -133,14 +106,30 @@ export default class Status extends Widget {
type:'status',
url:this.config.data.url,
index:this.refIndex,
},
props:{
fontSize:this.fontSize,
StateFile:{
"hh":"red",
"h":"orange",
"l":"orange",
"ll":"red",
"normal":"green"
},
StateIndicatorFile:{
"hh":"0.85",
"h":"0.7",
"l":"0.2",
"ll":"0.1",
"max":"1",
"min":"0",
},
},
params:{
PokedPath:this.EditPathPoke,
action:'get',
StateFile:{},
StateIndicatorFile:{},
//userInputData:this.userInputData,
Args : {},
tempUserInputData:{},
},
};
......@@ -150,15 +139,11 @@ export default class Status extends Widget {
this.config.data.userInputData = this.strMapObjChange.strMapToObj(
this.userInputData
);
}
mounted() {
//console.log(this.refIndex);
//let parentDomain = window.location.hostname;
//console.log("domain",parentDomain); //localhost
//document.domain = parentDomain;
this.timer = setInterval(this.refresh, 1000);
let containerlist = document.getElementsByClassName('container');
......@@ -203,78 +188,74 @@ export default class Status extends Widget {
menu.remove()
}
let gaugeList = document.getElementsByClassName('gauge');
console.log(gaugeList[this.index]);
gauge = new Gauge(gaugeList[this.index],{
percent: this.value,
range: {
ticks: this.gaugeTicks,
color: this.gaugeColor,
},
});
console.log(gauge);
gauge.render();
}
destroyed() {
clearInterval(this.timer);
}
/*popMenu(menuDiv:any,width:number,rowControlString:string):boolean
{
//创建弹出菜单
console.log("jinjin");
var pop=window.createPopup();
//设置弹出菜单的内容
menuDiv = document.querySelector('itemMenu');
pop.document.body.innerHTML=menuDiv.innerHTML;
var rowObjs=pop.document.body.all[0].rows;
//获得弹出菜单的行数
var rowCount=rowObjs.length;
//循环设置每行的属性
for(var i=0;i<rowObjs.length;i++)
{
//如果设置该行不显示，则行数减一
var hide=rowControlString.charAt(i)!='1';
if(hide){
rowCount--;
}
//设置是否显示该行
rowObjs[i].style.display=(hide)?"none":"";
//设置鼠标滑入该行时的效果
rowObjs[i].cells[0].onmouseover=function()
{
this.style.background="#818181";
this.style.color="white";
}
//设置鼠标滑出该行时的效果
rowObjs[i].cells[0].onmouseout=function(){
this.style.background="#cccccc";
this.style.color="black";
}
}
//屏蔽菜单的菜单
pop.document.oncontextmenu=function()
{
return false;
}
pop.show(event.clientX-1,event.clientY,width,rowCount*25,document.body);
return true;
}*/
del(){
this.$emit('del', this.index);
}
ParsingStateNum(){
this.ProgressValue = (this.StatusValue - this.EditData.params.StateFile.ll)/(this.EditData.params.StateIndicatorFile.hh-this.EditData.params.StateFile.ll);
if(this.StatusValue >= this.EditData.params.StateIndicatorFile.hh){
this.activeColor = this.EditData.params.StateFile.hh;
var StatusNum = new Number(this.StatusValue);
this.value = Math.round((StatusNum - this.EditData.props.StateIndicatorFile.ll)/(this.EditData.props.StateIndicatorFile.hh-this.EditData.props.StateIndicatorFile.ll));
this.gaugeTicks[0] = parseFloat(this.EditData.props.StateIndicatorFile.min);
this.gaugeTicks[1] = parseFloat(this.EditData.props.StateIndicatorFile.ll);
this.gaugeTicks[2] = parseFloat(this.EditData.props.StateIndicatorFile.l);
this.gaugeTicks[3] = parseFloat(this.EditData.props.StateIndicatorFile.h);
this.gaugeTicks[4] = parseFloat(this.EditData.props.StateIndicatorFile.hh);
this.gaugeTicks[5] = parseFloat(this.EditData.props.StateIndicatorFile.max);
this.gaugeColor[0] = this.EditData.props.StateFile.ll;
this.gaugeColor[1] = this.EditData.props.StateFile.l;
this.gaugeColor[2] = this.EditData.props.StateFile.normal;
this.gaugeColor[3] = this.EditData.props.StateFile.h;
this.gaugeColor[4] = this.EditData.props.StateFile.hh;
console.log(gauge);
gauge.options.percent = this.value;
gauge.options.range = {
ticks: this.gaugeTicks,
color: this.gaugeColor,
};
gauge.render();
if(this.StatusValue >= this.EditData.props.StateIndicatorFile.hh){
this.activeColor = this.EditData.props.StateFile.hh;
}
if(this.StatusValue >= this.EditData.params.StateIndicatorFile.h && this.StatusValue<this.EditData.params.StateIndicatorFile.hh){
this.activeColor = this.EditData.params.StateFile.h;
if(this.StatusValue >= this.EditData.props.StateIndicatorFile.h && this.StatusValue<this.EditData.props.StateIndicatorFile.hh){
this.activeColor = this.EditData.props.StateFile.h;
}
if(this.StatusValue >= this.EditData.params.StateIndicatorFile.l && this.StatusValue<this.EditData.params.StateIndicatorFile.h){
this.activeColor = this.EditData.params.StateFile.normal;
if(this.StatusValue >= this.EditData.props.StateIndicatorFile.l && this.StatusValue<this.EditData.props.StateIndicatorFile.h){
this.activeColor = this.EditData.props.StateFile.normal;
}
if(this.StatusValue >= this.EditData.params.StateIndicatorFile.ll && this.StatusValue<this.EditData.params.StateIndicatorFile.l){
this.activeColor = this.EditData.params.StateFile.l;
if(this.StatusValue >= this.EditData.props.StateIndicatorFile.ll && this.StatusValue<this.EditData.props.StateIndicatorFile.l){
this.activeColor = this.EditData.props.StateFile.l;
}
if(this.StatusValue <= this.EditData.params.StateIndicatorFile.ll){
this.activeColor = this.EditData.params.StateFile.ll;
if(this.StatusValue <= this.EditData.props.StateIndicatorFile.ll){
this.activeColor = this.EditData.props.StateFile.ll;
}
......@@ -285,6 +266,7 @@ export default class Status extends Widget {
var JsonData = JSON.stringify(this.EditData);
var url ="http://localhost:8080/WindowsAppIndex.html/?";
window.open(url+JsonData, "WidgetWindow",'height=100, width=100, top=10, left=10, toolbar=no');
}
......@@ -292,14 +274,9 @@ export default class Status extends Widget {
updateUI() {
console.log("dd22");
this.isShowPath = false;
//this.isShowParams = true;
//var url = this.config.data.url;
this.EditData.params.PokedPath = this.config.data.url;
this.EditData.edit.url = this.config.data.url;
this.openWindows();
//this.pathId = url.slice(0, url.indexOf("/"));
/*(this.$refs.WidgetParams as WidgetParams).setVariableList(
this.pathProcessor.extractVarFromPath(url)
);*/
}
......@@ -331,11 +308,11 @@ export default class Status extends Widget {
}
pathPoke(url:string) {
this.config.data.url = url;
this.EditPathPoke = url;
pathPoke() {
this.config.data.url = this.EditData.edit.url;
this.EditPathPoke = this.EditData.edit.url;
console.log("dddd");
var pokepath = url;
var pokepath = this.EditData.edit.url;
//todo：config文件
axios.defaults.timeout = 1000;
axios.get(pokepath, {
......@@ -383,7 +360,6 @@ export default class Status extends Widget {
pokedPath = pokedPath.substring(0, pokedPath.length - 1);
}
this.config.data.url = pokedPath;
//console.log(this.$parent.$root.$children[0].$children[0].$children[0]);
}
......@@ -419,31 +395,7 @@ export default class Status extends Widget {
//app
refresh() {
/*if(this.index == top.childData.index || top.childData.url == null){
//console.log(top);
if(this.config.data.url == '' || this.EditPathPoke != top.childData.url){
this.UserUrl = top.childData.url;
this.pathPoke(top.childData.url);
this.viewLoad(top.childData.url);
}
this.EditData.edit.fontSize = top.fontSize;
this.fontSize = top.fontSize;
if(top.Args != null){
this.viewLoad(top.Args.Args);
}
}*/
/*var Args: UpdatePayload = {
action: "get",
variables: (this.$refs.WidgetParams as WidgetParams).getVariableValues(),
target: ["self"]
};
this.viewLoad(Args);*/
//this.viewLoad(this.EditData.params.Args);
}
......@@ -483,10 +435,13 @@ export default class Status extends Widget {
this.config.data.url
);
await this.getData(this.pathwithVar);
this.ParsingStateNum();
if(typeof this.StatusValue == "number"){
this.ParsingStateNum();
}
}
}
</script>
......
src/main.js
View file @ 1d742ca8
......@@ -5,6 +5,8 @@ import 'buefy/dist/buefy.css';
import 'font-awesome/css/font-awesome.min.css';
//import hscmap from '@hscmap/vue-window'
import * as VueWindow from '@hscmap/vue-window';
import ProgressBar from 'vuejs-progress-bar';
Vue.use(ProgressBar);
import 'babel-polyfill';
import VideoPlayer from 'vue-video-player';
import 'vue-video-player/src/custom-theme.css';
......
src/main.js.map
View file @ 1d742ca8
{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,KAAK,CAAC;AACtB,OAAO,GAAG,MAAM,WAAW,CAAC;AAC5B,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,sBAAsB,CAAA;AAC7B,OAAO,uCAAuC,CAAA;AAC9C,yCAAyC;AACzC,OAAO,KAAK,SAAS,MAAM,oBAAoB,CAAA;AAQ/C,OAAO,gBAAgB,CAAA;AAEvB,OAAO,WAAW,MAAM,kBAAkB,CAAA;AAC1C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,4BAA4B,CAAA;AAGnC,GAAG,CAAC,MAAM,CAAC,aAAa,GAAG,KAAK,CAAC;AAEjC,uBAAuB;AACvB,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;AACd,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;AAElB,GAAG,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;AAIpB,sBAAsB;AAEtB,mBAAmB;AACnB,0BAA0B;AAC1B,2BAA2B;AAC3B,MAAM;AACN,IAAI;AACJ,KAAK;AAEL,iCAAiC;AACjC,WAAW;AACX,MAAM;AAEN,0CAA0C;AAC1C,mCAAmC;AACnC,WAAW;AACX,KAAK;AAGL,IAAI,MAAM,GAAG,IAAI,GAAG,CAAC;IACnB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;CAEtB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AAElB,wBAAwB;AAExB,wDAAwD;AACxD,MAAM,CAAC,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC"}
\ No newline at end of file
{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,KAAK,CAAC;AACtB,OAAO,GAAG,MAAM,WAAW,CAAC;AAC5B,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,sBAAsB,CAAA;AAC7B,OAAO,uCAAuC,CAAA;AAC9C,yCAAyC;AACzC,OAAO,KAAK,SAAS,MAAM,oBAAoB,CAAA;AAE/C,OAAO,WAAW,MAAM,oBAAoB,CAAA;AAC5C,GAAG,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;AAMrB,OAAO,gBAAgB,CAAA;AAEvB,OAAO,WAAW,MAAM,kBAAkB,CAAA;AAC1C,OAAO,uCAAuC,CAAA;AAC9C,OAAO,4BAA4B,CAAA;AAGnC,GAAG,CAAC,MAAM,CAAC,aAAa,GAAG,KAAK,CAAC;AAEjC,uBAAuB;AACvB,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;AACd,GAAG,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;AAElB,GAAG,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;AAIpB,sBAAsB;AAEtB,mBAAmB;AACnB,0BAA0B;AAC1B,2BAA2B;AAC3B,MAAM;AACN,IAAI;AACJ,KAAK;AAEL,iCAAiC;AACjC,WAAW;AACX,MAAM;AAEN,0CAA0C;AAC1C,mCAAmC;AACnC,WAAW;AACX,KAAK;AAGL,IAAI,MAAM,GAAG,IAAI,GAAG,CAAC;IACnB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;CAEtB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AAElB,wBAAwB;AAExB,wDAAwD;AACxD,MAAM,CAAC,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC"}
\ No newline at end of file
src/main.ts
View file @ 1d742ca8
......@@ -6,6 +6,10 @@ import 'font-awesome/css/font-awesome.min.css'
//import hscmap from '@hscmap/vue-window'
import * as VueWindow from '@hscmap/vue-window'
import router from 'vue-router'
import ProgressBar from 'vuejs-progress-bar'
import ToggleButton from 'vue-js-toggle-button'
Vue.use(ToggleButton)
Vue.use(ProgressBar)
//import '@/assets/css/fontSize.css';
......
src/shims-tsx.d.ts
View file @ 1d742ca8
......@@ -4,6 +4,8 @@ declare global {
interface Window{
UpdateWidget:any;
}
namespace JSX {
// tslint:disable no-empty-interface
......@@ -16,3 +18,9 @@ declare global {
}
}
declare const $: {
getJSON(url: string, cb: (data: any) => void): void;
get(url: string, cb: (data: any) => void): void;
};
export {};
src/shims-vue.d.ts
View file @ 1d742ca8
......@@ -22,3 +22,7 @@ declare module 'pubsub-js';
declare module "vue-video-player";
declare module "vuejs-progress-bar";
declare module "vue-js-toggle-button";
src/types/g2plot/g2plot.d.ts 0 → 100644
View file @ 1d742ca8
import {Options, Statistic} from "@antv/g2plot/lib/types";
import {Axis} from "@antv/g2plot/lib/types/axis";
import {GaugeOptions, Indicator} from "@antv/g2plot/lib/plots/gauge/types";
import * as G2PLot from '@antv/g2plot';
import {Plot} from "@antv/g2plot/lib/core/plot";
declare global {
export const g2plot: typeof G2PLot;
}
export {};
src/types/g2plot/global.d.ts 0 → 100644
View file @ 1d742ca8
declare const $: {
getJSON(url: string, cb: (data: any) => void): void;
get(url: string, cb: (data: any) => void): void;
};
src/types_2/animation.ts 0 → 100644
View file @ 1d742ca8
import { AnimateOption } from '@antv/g2/lib/interface';
export type Animation = AnimateOption | boolean;
src/types_2/annotation.ts 0 → 100644
View file @ 1d742ca8
import {
ArcOption,
RegionFilterOption,
ImageOption,
LineOption,
TextOption,
RegionOption,
DataMarkerOption,
DataRegionOption,
} from '@antv/g2/lib/interface';
export type Annotation =
| ArcOption
| ImageOption
| LineOption
| TextOption
| RegionOption
| RegionFilterOption
| DataMarkerOption
| DataRegionOption;
src/types_2/attr.ts 0 → 100644
View file @ 1d742ca8
import { ShapeAttrs } from '@antv/g-base/lib/types';
import { Datum } from './common';
/** 图形属性 */
export type ShapeStyle = ShapeAttrs;
/** 颜色映射 */
export type ColorAttr = string | string[] | ((datum: Datum) => string);
/** 尺寸大小映射 */
export type SizeAttr = number | [number, number] | ((datum: Datum) => number);
/** 图形 shape 映射 */
export type ShapeAttr = string | string[] | ((datum: Datum) => string);
/** 图形样式 style 映射 */
export type StyleAttr = ShapeStyle | ((datum: Datum) => ShapeStyle);
src/types_2/axis.ts 0 → 100644
View file @ 1d742ca8
import { AxisOption } from '@antv/g2/lib/interface';
export type Axis = AxisOption & {
/**
* 是否美化
*/
readonly nice?: boolean;
/**
* 坐标轴最小值
*/
readonly min?: number;
/**
* 坐标轴最大值
*/
readonly max?: number;
/**
* min limit
*/
readonly minLimit?: number;
/**
* max limit
*/
readonly maxLimit?: number;
/**
* 期望的坐标轴刻度数量，非最终结果
*/
readonly tickCount?: number;
/**
* 坐标轴刻度间隔
*/
readonly tickInterval?: number;
/**
* 自定义计算 tick 的方法
*/
readonly tickMethod?: (scale: any) => any[];
};
src/types_2/common.ts 0 → 100644
View file @ 1d742ca8
import { AnnotationPosition, RegionPositionBaseOption, TextOption } from '@antv/g2/lib/interface';
import { Axis } from './axis';
import { Label } from './label';
import { Tooltip } from './tooltip';
import { Legend } from './legend';
import { Interaction } from './interaction';
import { Animation } from './animation';
import { Annotation } from './annotation';
import { State } from './state';
import { Slider } from './slider';
import { Scrollbar } from './scrollbar';
import { ColorAttr } from './attr';
/** annotation position */
export { AnnotationPosition, RegionPositionBaseOption, TextOption };
/** 一条数据记录 */
export type Datum = Record<string, any>;
/** 一个数据序列 */
export type Data = Datum[];
/** 点位置信息 */
export type Point = {
readonly x: number;
readonly y: number;
};
/** 一个区域描述 */
export type Region = {
/** the top-left corner of layer-range, range from 0 to 1, relative to parent layer's range */
readonly start: Point;
/** the bottom-right corner of layer-range, range from 0 to 1, relative to parent layer's range */
readonly end: Point;
};
/** 位置 */
export type BBox = {
readonly x: number;
readonly y: number;
readonly width: number;
readonly height: number;
};
/** 文字 */
export type TextStyle = {
/** 文本大小 */
readonly fontSize?: number;
/** 字体系列 */
readonly fontFamily?: string;
/** 文本粗细 */
readonly fontWeight?: number;
/** 文本行高 */
readonly lineHeight?: number;
/** 文本对齐方式 */
readonly textAlign?: 'center' | 'left' | 'right';
/** 文本基线 */
readonly textBaseline?: 'middle' | 'top' | 'bottom';
};
export type Size = {
readonly width: number;
readonly height: number;
};
/** scale 元信息，取名为 meta */
export type Meta = {
readonly type?: string;
readonly alias?: string;
readonly values?: string[];
readonly range?: number[];
readonly formatter?: (v: any) => string;
};
/** 基础的 Options 配置 */
export type Options = {
// 画布基本配置
/** 画布宽度 */
readonly width?: number;
/** 画布高度 */
readonly height?: number;
/** 画布是否自动适配容器大小，默认为 true */
readonly autoFit?: boolean;
/** 画布的 padding 值，或者开启 'auto' */
readonly padding?: number[] | number | 'auto';
/** 额外怎加的 padding 值 */
readonly appendPadding?: number[] | number;
/** 是否同步子 view 的 padding */
readonly syncViewPadding?: boolean;
// G 相关
/** 渲染引擎 */
readonly renderer?: 'svg' | 'canvas';
/** 屏幕像素比，默认为 window.devicePixelRatio */
readonly pixelRatio?: number;
/** 是否开启局部渲染，默认为 true */
readonly localRefresh?: boolean;
// 通用数据配置
/** 具体的数据 */
readonly data: Record<string, any>[];
/** 数据字段元信息 */
readonly meta?: Record<string, any>;
// G2 相关
/** 主题，G2 主题，字符串或者 theme object */
readonly theme?: string | object;
/** 颜色色板 */
readonly color?: ColorAttr;
/** xAxis 的配置项 */
readonly xAxis?: Axis;
/** yAxis 的配置项 */
readonly yAxis?: Axis;
/** 数据标签的配置 */
readonly label?: Label;
/** tooltip 的配置项 */
readonly tooltip?: Tooltip;
/** 图例 legend 的配置项 */
readonly legend?: Legend;
/** 缩略轴 slider 的配置项 */
readonly slider?: Slider;
/** 缩略轴 scrollbar 的配置项 */
readonly scrollbar?: Scrollbar;
readonly animation?: Animation;
readonly interactions?: Interaction[];
readonly annotations?: Annotation[];
// 配置 active，inactive，selected 三种状态的样式，也可在 Theme 主题中配置
readonly state?: State;
};
src/types_2/index.ts 0 → 100644
View file @ 1d742ca8
export * from './common';
export * from './tooltip';
export * from './tuple';
export * from './state';
export * from './attr';
export * from './statistic';
src/types_2/interaction.ts 0 → 100644
View file @ 1d742ca8
export type Interaction = {
readonly type: string;
readonly cfg?: Record<string, any>;
/** 是否开启交互, 默认开启 */
readonly enable?: boolean;
};
src/types_2/label.ts 0 → 100644
View file @ 1d742ca8
import { LabelCallback, GeometryLabelCfg } from '@antv/g2/lib/interface';
export type Label =
| false
| ({
/** 映射的字段。 */
readonly fields?: string[];
/** 回调函数。 */
readonly callback?: LabelCallback;
} & GeometryLabelCfg);
src/types_2/legend.ts 0 → 100644
View file @ 1d742ca8
import { LegendCfg } from '@antv/g2/lib/interface';
export type Legend = boolean | LegendCfg;
src/types_2/scrollbar.ts 0 → 100644
View file @ 1d742ca8
export { ScrollbarOption as Scrollbar } from '@antv/g2/lib/interface';
src/types_2/slider.ts 0 → 100644
View file @ 1d742ca8
export { SliderOption as Slider } from '@antv/g2/lib/interface';
src/types_2/state.ts 0 → 100644
View file @ 1d742ca8
import { StateOption, Datum, Data } from '@antv/g2/lib/interface';
import Element from '@antv/g2/lib/geometry/element';
import { Geometry } from '@antv/g2';
export type State = StateOption;
/** 状态名称，G2 Element 开放 'active' | 'inactive' | 'selected' 三种状态 */
export type StateName = 'active' | 'inactive' | 'selected';
/** 状态条件 */
export type StateCondition = (data: Datum | Data) => boolean;
/** 状态对象, 可通过 `plot.getStates()` 获取 */
export type StateObject = { data: Datum | Data; state: string; geometry: Geometry; element: Element };
src/types_2/statistic.ts 0 → 100644
View file @ 1d742ca8
import { StyleAttr } from './attr';
import { Data, Datum } from './common';
type StatisticText = {
/** 统计文本的样式 */
readonly style?: StyleAttr;
/** 文本的格式化 */
readonly formatter?: (datum?: Datum, data?: Data /** filterData */) => string;
readonly rotate?: number;
readonly offsetX?: number;
readonly offsetY?: number;
};
/**
* 中心文本的统计信息，统一一个数据结构
*/
export type Statistic = {
readonly title?: false | StatisticText;
readonly content?: false | StatisticText;
};
src/types_2/tooltip.ts 0 → 100644
View file @ 1d742ca8
import { TooltipOption } from '@antv/g2/lib/interface';
export type Tooltip = TooltipOption;
src/types_2/tuple.ts 0 → 100644
View file @ 1d742ca8
export const tuple = <T extends string[]>(...args: T) => args;
export const tupleNum = <T extends number[]>(...args: T) => args;
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