Commit 1d742ca8 authored by XieXiaohan's avatar XieXiaohan

add config edit

parent 64fd2184
......@@ -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;
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;
}
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);
}
exportActiveWidgetList(): AllWidgetConfig {
for (var widget of this.widgetList) {
widget.widgetConfig = ((this.$refs[widget.ref] as Array<
......
......@@ -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;
}
......
This diff is collapsed.
......@@ -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,21 +84,30 @@ 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() {
created() {
// this.config.data.userInputData = this.userInputData;
this.config.data.userInputData = this.strMapObjChange.strMapToObj(
this.userInputData
......@@ -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;
}
}
......
This diff is collapsed.
......@@ -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';
......
{"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
......@@ -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';
......
......@@ -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 {};
......@@ -22,3 +22,7 @@ declare module 'pubsub-js';
declare module "vue-video-player";
declare module "vuejs-progress-bar";
declare module "vue-js-toggle-button";
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 {};
declare const $: {
getJSON(url: string, cb: (data: any) => void): void;
get(url: string, cb: (data: any) => void): void;
};
import { AnimateOption } from '@antv/g2/lib/interface';
export type Animation = AnimateOption | boolean;
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;
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);
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[];
};
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;
};
export * from './common';
export * from './tooltip';
export * from './tuple';
export * from './state';
export * from './attr';
export * from './statistic';
export type Interaction = {
readonly type: string;
readonly cfg?: Record<string, any>;
/** 是否开启交互, 默认开启 */
readonly enable?: boolean;
};
import { LabelCallback, GeometryLabelCfg } from '@antv/g2/lib/interface';
export type Label =
| false
| ({
/** 映射的字段。 */
readonly fields?: string[];
/** 回调函数。 */
readonly callback?: LabelCallback;
} & GeometryLabelCfg);
import { LegendCfg } from '@antv/g2/lib/interface';
export type Legend = boolean | LegendCfg;
export { ScrollbarOption as Scrollbar } from '@antv/g2/lib/interface';
export { SliderOption as Slider } from '@antv/g2/lib/interface';
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 };
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;
};
import { TooltipOption } from '@antv/g2/lib/interface';
export type Tooltip = TooltipOption;
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