Skip to content

GitLab

W
WidgetUI
Commit 41c35bc8 authored by WuFeiyang's avatar WuFeiyang
Browse files
Options

Initial commit

parent 9dc20e53
Pipeline #30 canceled with stages
      Show whitespace changes
      Inline Side-by-side
      Showing with 4828 additions and 230 deletions
      package-lock.json
      View file @ 41c35bc8
      This source diff could not be displayed because it is too large. You can view the blob instead.
      public/index.html
      View file @ 41c35bc8
      <!DOCTYPE html> <!DOCTYPE html>
      <html lang="en"> <html lang="en">
      <head>
      <head>
      <meta charset="utf-8"> <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
      <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
      <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
      <title>vue</title> <title>vue</title>
      </head> </head>
      <body>
      <body>
      <noscript> <noscript>
      <strong>We're sorry but vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
      </noscript> </noscript>
      <div id="app"></div> <div id="app">
      </div>
      <!-- built files will be auto injected --> <!-- built files will be auto injected -->
      </body> </body>
      </html> </html>
      \ No newline at end of file
      src/App.vue
      View file @ 41c35bc8
      <template> <template>
      <div id="app"> <div id="app">
      <img alt="Vue logo" src="./assets/logo.png"> <div class="btn-group">
      <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> <ul>
      <div>{{ message }}</div> <div v-for="(availableWidget,index) in availableWidgets" :key="index">
      <li>
      <a href="#" v-on:click="addWidget(availableWidget)">{{availableWidget}}</a>
      </li>
      </div>
      </ul>
      </div>
      <button @click="saveWidgetList">Save</button>
      <input id="file" type="file" @change="loadTextFromFile" />
      <!-- <button @click="toggleShowAddWidget">Add</button>
      <div v-show="isShowAddWidget">
      <div v-for="(availableWidget,index) in availableWidgets" :key="index">
      <button v-on:click="addWidget(availableWidget)">{{availableWidget}}</button>
      </div>
      </div>-->
      <div v-for="(widget,index) in widgetList" :key="index">
      <component :is="widget.widgetComponentName" :ref="widget.ref"></component>
      </div>
      </div> </div>
      </template> </template>
      <script lang="ts"> <script lang="ts">
      import { Component, Vue } from 'vue-property-decorator'; import { Component, Vue } from "vue-property-decorator";
      import HelloWorld from './components/HelloWorld.vue'; import axios from "axios";
      import { WidgetRef } from "./models/WidgetRef";
      import { WidgetConfig, AllWidgetConfig } from "./models/WidgetConfig";
      import { Action, UpdatePayload } from "./models/UpdatePayload";
      import { Widget } from "./models/wiget";
      //when add more available widgets add ref to the widgets
      import Status from "./components/Status/Status.vue";
      import WaveView from "./components/WaveView/WaveView.vue";
      import Method from "./components/Method/Method.vue";
      import Config from "./components/Config/Config.vue";
      //this is the view selecotr class
      @Component({ @Component({
      components: { components: {
      HelloWorld, //when add more available widgets add ref to the widgets
      }, Status,
      WaveView,
      Method,
      Config
      }
      }) })
      export default class App extends Vue { export default class App extends Vue {
      widgetList: WidgetRef[] = [];
      fileName: string = "config.json";
      private lastWidgetIndex: number = 0;
      isShowAddWidget: Boolean = false;
      text: string = "";
      //when add more available widgets add its name here
      availableWidgets = ["Status", "Config", "WaveView", "Method"];
      toggleShowAddWidget(): void {
      this.isShowAddWidget = !this.isShowAddWidget;
      }
      UIAutomaticGenerated() {
      var fragment = window.location.hash;
      if (fragment != "#") {
      axios
      .get(" ")
      .then(function(response) {
      // handle success
      console.log(response);
      })
      .catch(function(error) {
      // handle error
      console.log(error);
      })
      .then(function() {
      // always executed
      });
      }
      }
      exportActiveWidgetList(): AllWidgetConfig {
      for (var widget of this.widgetList) {
      widget.widgetConfig = ((this.$refs[widget.ref] as Array<Widget>)[0] as Widget).getConfig();
      }
      var widgetConfigList = new AllWidgetConfig();
      widgetConfigList.widgetList = this.widgetList;
      widgetConfigList.currentRef = this.lastWidgetIndex.toString();
      console.log(widgetConfigList);
      return widgetConfigList;
      }
      importActiveWidgetList() {
      for (var wid of this.widgetList) {
      ((this.$refs[wid.ref] as Array<Widget>)[0] as Widget).setConfig( wid.widgetConfig as WidgetConfig);
      }
      }
      loadTextFromFile(ev: any) {
      const file = ev.target.files[0];
      const reader = new FileReader();
      reader.readAsText(file);
      var widgets;
      // console.log(this.$refs);
      reader.onload = e => {
      widgets = Object.assign(
      new AllWidgetConfig(),
      JSON.parse((e.target as any).result)
      );
      // console.log(widgets);
      this.widgetList = widgets.widgetList;
      this.lastWidgetIndex = Number(widgets.currentRef);
      this.$forceUpdate();
      Vue.nextTick(() => { // changed here
      this.importActiveWidgetList();
      });
      // console.log(this.$refs);
      };
      }
      saveWidgetList(): void {
      var data = JSON.stringify(this.exportActiveWidgetList());
      console.log(data);
      const blob = new Blob([data]);
      if (window.navigator.msSaveOrOpenBlob) {
      // 兼容IE10
      navigator.msSaveBlob(blob, this.fileName);
      } else {
      // chrome/firefox
      let aTag = document.createElement("a");
      aTag.download = this.fileName;
      aTag.href = URL.createObjectURL(blob);
      aTag.click();
      URL.revokeObjectURL(aTag.href);
      }
      }
      addWidget(widgetName: string): void {
      var newWidget = new WidgetRef();
      newWidget.widgetComponentName = widgetName;
      this.lastWidgetIndex++;
      newWidget.ref = "widget" + this.lastWidgetIndex.toString();
      this.widgetList = [...this.widgetList, newWidget];
      }
      update(payload: UpdatePayload) {
      for (var wid of this.widgetList) {
      (this.$refs[wid.ref] as Widget).parentUpdate(payload);
      }
      if (payload.action == "") {
      for (var wid of this.widgetList) {
      (this.$refs[wid.ref] as Widget).refresh();
      }
      }
      }
      } }
      </script> </script>
      <style> <style>
      #app { #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif; font-family: "Avenir", Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
      text-align: center; text-align: center;
      ......
      src/components/Common/WidgetParams.vue 0 → 100644
      View file @ 41c35bc8
      <template>
      <div style="margin-left: 0px">
      <div v-for="(label, index) in userInputData.keys()" :key="index" class="col-md-3">
      <div class="input-group">
      <span class="input-group-addon">{{ label }}</span>
      <input v-model="tempUserInputData[label]" type="text" class="form-control" />
      </div>
      </div>
      <div class="col-md-1">
      <button type="button" class="btn btn-primary btn-mid" @click="update">
      <b>{{ action }}</b>
      <span class="glyphicon glyphicon-save"></span>
      </button>
      </div>
      </div>
      </template>
      <script lang="ts">
      import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator';
      import { UpdatePayload } from '../../models/UpdatePayload';
      import { values, keys } from 'd3';
      import { forEach } from "typescript-collections/dist/lib/arrays";
      @Component
      export default class WidgetParams extends Vue{
      @Prop() action!: string;
      userInputData= new Map<string, string>();
      tempUserInputData:{[key: string]: string} = {};
      setVariableList(path: string[]) {
      this.userInputData.clear();
      path.forEach(element => {
      this.userInputData.set(element, '');
      });
      this.$forceUpdate();
      }
      setVariableInput(parentUserInputData:Map<string, string>)
      {
      console.log(parentUserInputData);
      for (var key of parentUserInputData.keys()) {
      this.tempUserInputData[key] = parentUserInputData.get(key) as string;
      }
      }
      getVariableValues(): Map<string, string> {
      for(var key of this.userInputData.keys()) {
      this.userInputData.set(key, this.tempUserInputData[key]);
      }
      return this.userInputData;
      }
      update(){
      var Args:UpdatePayload = {
      action: this.action,
      variables: this.getVariableValues(),
      target:['self']
      }
      this.$emit('updataVariables', Args)
      }
      }
      </script>
      src/components/Common/global.vue 0 → 100644
      View file @ 41c35bc8
      <script>
      const thingPath = "/dataserver";
      export default {
      thingPath
      }
      </script>
      src/components/HelloWorld.vue deleted 100644 → 0
      View file @ 9dc20e53
      <template>
      <div class="hello">
      <h1>{{ msg }}</h1>
      <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
      </p>
      <h3>Installed CLI Plugins</h3>
      <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
      </ul>
      <h3>Essential Links</h3>
      <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
      </ul>
      <h3>Ecosystem</h3>
      <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
      </ul>
      </div>
      </template>
      <script lang="ts">
      import { Component, Prop, Vue } from 'vue-property-decorator';
      @Component
      export default class HelloWorld extends Vue {
      @Prop() private msg!: string;
      }
      </script>
      <!-- Add "scoped" attribute to limit CSS to this component only -->
      <style scoped>
      h3 {
      margin: 40px 0 0;
      }
      ul {
      list-style-type: none;
      padding: 0;
      }
      li {
      display: inline-block;
      margin: 0 10px;
      }
      a {
      color: #42b983;
      }
      </style>
      src/components/Method/Method.vue 0 → 100644
      View file @ 41c35bc8
      <template>
      <div class="Method">
      <p>{{ config.data.url }}</p>
      <p>{{ MethodResponse }}</p>
      <button @click="showPathConfig">Setting</button>
      <div v-show="isShowPath">
      <input v-model="config.data.url" />
      <button @click="updateUI">OK</button>
      </div>
      <WidgetParams ref="WidgetParams" v-show="isShowParams" action="invoke" :parentUserInputData="userInputData" @updataVariables="viewLoad"></WidgetParams>
      </div>
      </template>
      <script lang="ts">
      import Vue from "vue";
      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 WidgetParams from "@/components/Common/WidgetParams.vue";
      import axios from "axios";
      import Plotly from "plotly.js";
      import PathProcessor from "@/models/PathProcessor";
      import StrMapObjChange from "@/models/StrMapObjChange";
      import { forEach } from "typescript-collections/dist/lib/arrays";
      import { map } from "d3";
      @Component({
      components: {
      WidgetParams
      }
      })
      export default class Method extends Widget {
      pathProcessor = new PathProcessor();
      strMapObjChange = new StrMapObjChange();
      WidgetComponentName: string = "Method";
      MethodResponse: string = "";
      pathId: string = "";
      userInputData = new Map<string, string>();
      isShowPath: boolean = false;
      isShowParams: boolean = false;
      config: WidgetConfig = {
      WidgetComponentName: "Method",
      data: {
      url: "",
      userInputData: ""
      }
      };
      tempUrl: string = "";
      created() {
      // this.config.data.userInputData = this.userInputData;
      this.config.data.userInputData = this.strMapObjChange.strMapToObj(this.userInputData);
      }
      updateUI() {
      var url = this.config.data.url;
      this.pathId = url.slice(0, url.indexOf("/"));
      (this.$refs.WidgetParams as WidgetParams).setVariableList(
      this.pathProcessor.extractVarFromPath(url)
      );
      this.isShowParams = true;
      this.isShowPath = false;
      }
      showPathConfig() {
      this.isShowParams = !this.isShowParams;
      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;
      var 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);
      }
      parentUpdate(payload: UpdatePayload): void {
      }
      refresh() {
      var Args: UpdatePayload = {
      action: "invoke",
      variables: (this.$refs.WidgetParams as WidgetParams).getVariableValues(),
      target: ["self"]
      };
      this.viewLoad(Args);
      }
      async getData(url: string) {
      var apiLoad = url;
      await axios.put(apiLoad).then(response => {
      this.MethodResponse = response.data.ObjectVal;
      });
      }
      //called when widgetParams action clicked
      async viewLoad(Args: UpdatePayload) {
      // this.config.data.userInputData = Args.variables;
      this.userInputData = Args.variables;
      var url = this.pathProcessor.FillPathWithVar(
      // this.config.data.userInputData,
      this.userInputData,
      this.config.data.url
      );
      await this.getData(url);
      }
      }
      </script>
      <style scoped>
      .waveView {
      width: 100%;
      height: auto;
      }
      </style>
      \ No newline at end of file
      src/components/Status/Status.vue 0 → 100644
      View file @ 41c35bc8
      <template>
      <div class="Status">
      <p>{{ config.data.url }}</p>
      <p>{{ StatusValue }}</p>
      <button @click="showPathConfig">Setting</button>
      <div v-show="isShowPath">
      <input v-model="config.data.url" />
      <button @click="updateUI">OK</button>
      </div>
      <WidgetParams ref="WidgetParams" v-show="isShowParams" action="get" @updataVariables="viewLoad" ></WidgetParams>
      </div>
      </template>
      <script lang="ts">
      import Vue from "vue";
      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 WidgetParams from "@/components/Common/WidgetParams.vue";
      import axios from "axios";
      import Plotly from "plotly.js";
      import PathProcessor from "@/models/PathProcessor";
      import StrMapObjChange from "@/models/StrMapObjChange";
      import { forEach } from "typescript-collections/dist/lib/arrays";
      import { map } from "d3";
      @Component({
      components: {
      WidgetParams
      }
      })
      export default class Status extends Widget {
      pathProcessor = new PathProcessor();
      strMapObjChange = new StrMapObjChange();
      WidgetComponentName: string = "Status";
      StatusValue: string = "";
      pathId: string = "";
      userInputData = new Map<string, string>();
      isShowPath: boolean = false;
      isShowParams: boolean = false;
      config: WidgetConfig = {
      WidgetComponentName: "Status",
      data: {
      url: "",
      userInputData: ""
      }
      };
      tempUrl: string = "";
      created() {
      // this.config.data.userInputData = this.userInputData;
      this.config.data.userInputData = this.strMapObjChange.strMapToObj(this.userInputData);
      }
      updateUI() {
      var url = this.config.data.url;
      this.pathId = url.slice(0, url.indexOf("/"));
      (this.$refs.WidgetParams as WidgetParams).setVariableList(
      this.pathProcessor.extractVarFromPath(url)
      );
      this.isShowParams = true;
      this.isShowPath = false;
      }
      showPathConfig() {
      this.isShowParams = !this.isShowParams;
      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;
      var 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);
      }
      parentUpdate(payload: UpdatePayload): void {
      }
      refresh() {
      var Args: UpdatePayload = {
      action: "get",
      variables: (this.$refs.WidgetParams as WidgetParams).getVariableValues(),
      target: ["self"]
      };
      this.viewLoad(Args);
      }
      async getData(url: string) {
      var apiLoad = url;
      await axios.get(apiLoad).then(response => {
      this.StatusValue = response.data.ObjectVal;
      });
      }
      //called when widgetParams action clicked
      async viewLoad(Args: UpdatePayload) {
      // this.config.data.userInputData = Args.variables;
      this.userInputData = Args.variables;
      var url = this.pathProcessor.FillPathWithVar(
      // this.config.data.userInputData,
      this.userInputData,
      this.config.data.url
      );
      await this.getData(url);
      }
      }
      </script>
      <style scoped>
      .waveView {
      width: 100%;
      height: auto;
      }
      </style>
      \ No newline at end of file
      src/components/WaveView/WaveView.vue 0 → 100644
      View file @ 41c35bc8
      <template>
      <div class="waveView">
      <div class="panel panel-default">
      <button type="button" class="btn btn-primary btn-mid" @click="minus" style="float:right">
      <span class="glyphicon glyphicon-minus"></span>
      </button>
      <button type="button" class="btn btn-primary btn-mid" @click="add" style="float:right">
      <span class="glyphicon glyphicon-plus"></span>
      </button>
      <showViewInfo :pathId="pathId"></showViewInfo>
      <div class="panel-body">
      <div ref="wave">
      </div>
      </div>
      <setBasicParams ref="setBasicParams" @getPathId="getPathId" @updateConfig="updateConfig" :wave="wave" :setConfig='config'></setBasicParams>
      </div>
      </div>
      </template>
      <script lang="ts">
      import Vue from 'vue'
      import setBasicParams from './setBasicParams.vue';
      import showViewInfo from './showViewInfo.vue';
      import Component from 'vue-class-component';
      import { Prop, Watch } from 'vue-property-decorator';
      import global_ from '@/components/Common/global.vue';
      import { WidgetConfig } from '@/models/WidgetConfig';
      import { UpdatePayload } from '@/models/UpdatePayload';
      import { Widget } from '@/models/wiget';
      @Component({
      components:{
      setBasicParams,
      showViewInfo
      }
      })
      export default class waveView extends Widget {
      WidgetComponentName: string = 'waveView';
      wave: any = '';
      pathId: string = '';
      config: WidgetConfig = {
      WidgetComponentName: 'WaveView',
      data: {
      url:'',
      userInputData:'',
      position:{
      x1:'',
      x2:'',
      y1:'',
      y2:''
      }
      }
      };
      testConfig: WidgetConfig = {
      WidgetComponentName:'waveView',
      data:{
      url:'12306.data.0/$startTime$/$endTime$/$dotNum$',
      userInputData:'',
      position:{
      x1:'',
      x2:'',
      y1:'',
      y2:''
      }
      }
      }
      getConfig(): WidgetConfig {
      return this.config;
      }
      setConfig(wid:WidgetConfig): void {
      // this.config = wid;
      // this.updateUI();
      // (this.$refs.setBasicParams as setBasicParams).
      // this.refresh();
      }
      parentUpdate(payload: UpdatePayload): void {
      }
      refresh() {
      // (this.$refs.setBasicParams as setBasicParams).viewLoad();
      }
      updateUI() {
      (this.$refs.setBasicParams as setBasicParams).getPathIdParams();
      }
      add() {
      this.setConfig(this.testConfig);
      }
      minus() {
      console.log(this.getConfig());
      }
      getPathId(pathId: string) {
      this.pathId = pathId;
      }
      mounted() {
      this.wave = this.$refs.wave;
      }
      updateConfig(data:WidgetConfig){
      this.config = data;
      }
      }
      </script>
      <style scoped>
      .waveView{
      width:100%;
      height: auto;
      }
      </style>
      \ No newline at end of file
      src/components/WaveView/setBasicParams.vue 0 → 100644
      View file @ 41c35bc8
      <template id="setBasicParams">
      <div class="panel-body row">
      <div v-show="isShowCog">
      <div class="col-md-8">
      <div class="input-group">
      <span class="input-group-addon">Channel Path</span>
      <input v-model="config.data.url" type="text" class="form-control" />
      </div>
      </div>
      <div class="col-md-2">
      <button type="button" class="btn btn-primary btn-mid" @click="getPathIdParams">
      <b>&nbsp;ok&nbsp;</b>
      <span class="glyphicon glyphicon-save"></span>
      </button>
      </div>
      </div>
      <WidgetParams ref="WidgetParams" v-show="isShowLoad" action="get" @updataVariables="viewLoad"></WidgetParams>
      <button class="btn btn-primary btn-mid" style="float:right" @click="showPathIdConfig">
      <span class="glyphicon glyphicon-cog"></span>
      </button>
      </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 { WidgetConfig } from "@/models/WidgetConfig";
      import { UpdatePayload } from "@/models/UpdatePayload";
      import PathProcessor from "@/models/PathProcessor";
      import { forEach } from "typescript-collections/dist/lib/arrays";
      import { map } from "d3";
      import WidgetParams from "@/components/Common/WidgetParams.vue";
      @Component({
      components:{
      WidgetParams
      }
      })
      export default class setBasicParams extends Vue {
      @Prop() wave!: any;
      pathProcessor = new PathProcessor();
      isShowLoad: boolean = false;
      isShowCog: boolean = false;
      pathId!: string;
      userInputData = new Map<string, string>();
      config: WidgetConfig = {
      WidgetComponentName: "WaveView",
      data: {
      url: "10086.data.0/$startTime$/$endTime$/$dotNum$",
      userInputData: "",
      position: {
      x1: "",
      x2: "",
      y1: "",
      y2: ""
      }
      }
      };
      getConfig!: WidgetConfig;
      tempUrl: string = "";
      temp: any = {};
      created() {
      this.config.data.userInputData = this.userInputData;
      this.getConfig = this.config;
      this.updateConfig();
      }
      updateConfig() {
      this.getConfig = this.config;
      this.$emit("updateConfig", this.getConfig);
      }
      getPathIdParams() {
      if (this.tempUrl != this.config.data.url) {
      this.config.data.userInputData.clear();
      this.tempUrl = this.config.data.url;
      }
      this.updateConfig();
      var url = this.config.data.url;
      this.pathId = url.slice(0, url.indexOf("/"));
      (this.$refs.WidgetParams as WidgetParams).setVariableList(
      this.pathProcessor.extractVarFromPath(url)
      );
      this.isShowLoad = true;
      this.isShowCog = false;
      }
      showPathIdConfig() {
      this.isShowLoad = false;
      this.isShowCog = true;
      }
      async viewLoad(Args: any) {
      this.getConfig.data.position.x1 = "";
      this.getConfig.data.position.x2 = "";
      this.getConfig.data.position.y1 = "";
      this.getConfig.data.position.y2 = "";
      console.log(Args);
      this.config.data.userInputData = Args.Variables;
      var url = this.pathProcessor.FillPathWithVar(
      this.config.data.userInputData,
      this.config.data.url
      );
      var path = this.pathId;
      this.$emit("getPathId", path);
      await this.getData(url);
      await this.getDataTimeAxis(url);
      var myPlot = this.wave;
      var data_initial = [
      {
      x: this.temp.dataTimeAxis,
      y: this.temp.data
      }
      ];
      var layout_initial = {
      xaxis: {
      range: [this.config.data.position.x1, this.config.data.position.x2]
      },
      yaxis: {
      range: [this.config.data.position.y1, this.config.data.position.y2]
      }
      };
      this.createChannelChart(myPlot, data_initial, layout_initial);
      this.updateConfig();
      var requiredDotNum = this.temp.dataTimeAxis.length;
      var reAskDataScale = 0.8;
      var zoom_xmax = this.temp.dataTimeAxis[this.temp.dataTimeAxis.length - 1];
      var zoom_xmin = this.temp.dataTimeAxis[0];
      var nowRange = zoom_xmax - zoom_xmin;
      var nowDotNum = this.temp.dataTimeAxis.length;
      var getData = this.getData;
      var getDataTimeAxis = this.getDataTimeAxis;
      var createChannelChart = this.createChannelChart;
      var temp = this.temp;
      var getConfig = this.getConfig;
      var updateConfig = this.updateConfig;
      zoom();
      function zoom() {
      myPlot.on("plotly_relayout", function(data: any) {
      if (!data["xaxis.autorange"]) {
      var nowZoom_xmin = data["xaxis.range[0]"];
      var nowZoom_xmax = data["xaxis.range[1]"];
      var x_range = nowZoom_xmax - nowZoom_xmin;
      var newZoomedDotNum = Math.round((x_range * nowDotNum) / nowRange);
      nowRange = x_range;
      nowDotNum = newZoomedDotNum;
      if (
      nowDotNum < requiredDotNum * 0.5 ||
      nowZoom_xmin < zoom_xmin ||
      nowZoom_xmax > zoom_xmax
      ) {
      zoom_xmax = nowZoom_xmax;
      zoom_xmin = nowZoom_xmin;
      var zoom_ymin = data["yaxis.range[0]"];
      var zoom_ymax = data["yaxis.range[1]"];
      var url =
      path +
      "/" +
      (zoom_xmin * reAskDataScale).toString() +
      "/" +
      (zoom_xmax / reAskDataScale).toString() +
      "/" +
      requiredDotNum;
      getConfig.data.position.x1 = zoom_xmin;
      getConfig.data.position.x2 = zoom_xmax;
      getConfig.data.position.y1 = zoom_ymin;
      getConfig.data.position.y2 = zoom_ymax;
      updateConfig();
      getData(url);
      getDataTimeAxis(url);
      var data_update = [
      {
      x: temp.dataTimeAxis,
      y: temp.data
      }
      ];
      var layout_update = {
      xaxis: {
      range: [zoom_xmin, zoom_xmax]
      },
      yaxis: {
      range: [zoom_ymin, zoom_ymax]
      }
      };
      createChannelChart(myPlot, data_update, layout_update);
      zoom();
      }
      }
      });
      myPlot.on("plotly_doubleclick", function() {
      nowRange = temp.dataTimeAxis[temp.dataTimeAxis.length - 1];
      nowDotNum = temp.dataTimeAxis.length;
      createChannelChart(myPlot, data_initial);
      zoom();
      });
      }
      }
      createChannelChart(myPlot: any, data_update: any, data_layout: any = {}) {
      data_layout.margin = { t: 20 };
      var config = {
      modeBarButtonsToRemove: ["resetScale2d"],
      displaylogo: false
      };
      Plotly.newPlot(myPlot, data_update, data_layout, config);
      }
      async getData(url: string) {
      var apiLoad = global_.thingPath + "/DataByTimeFuzzy/" + url;
      await axios.get(apiLoad).then(response => {
      this.temp.data = response.data.ObjectVal;
      });
      }
      async getDataTimeAxis(url: string) {
      var apiLoad = global_.thingPath + "/DataByTimeFuzzyTimeAxis/" + url;
      await axios.get(apiLoad).then(response => {
      this.temp.dataTimeAxis = response.data.ObjectVal;
      });
      }
      }
      </script>
      <style scoped>
      </style>
      src/components/WaveView/showViewInfo.vue 0 → 100644
      View file @ 41c35bc8
      <template>
      <div class="panel-heading">
      <h2 class="panel-title">
      <font>
      Basic Path :&nbsp;
      </font>
      <font color="RoyalBlue" id="basePathId">{{ basePathId }}</font>
      &nbsp;&nbsp;
      <font id="sampleId">sample Rate: {{ sampleId }}</font>
      &nbsp;&nbsp;
      <font id="lengthId">length: {{ lengthId }}</font>
      </h2>
      </div>
      </template>
      <script lang="ts">
      import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
      import axios from 'axios';
      import global_ from '@/components/Common/global.vue';
      @Component
      export default class showViewInfo extends Vue {
      @Prop() pathId!:string;
      basePathId: string = '';
      sampleId: string = '';
      lengthId: string = '';
      @Watch('pathId')
      onPathIdChanged(val:string, oldVal:string) {
      this.show(val);
      }
      async show(pathId:string) {
      this.getBasePath();
      this.getSamplerate(pathId);
      this.getLength(pathId);
      }
      async getBasePath() {
      var apiLoad = global_.thingPath + '/basepath';
      await axios.get(apiLoad)
      .then((response) => {
      this.basePathId = response.data.ObjectVal;
      })
      }
      async getSamplerate(pathId:string) {
      var apiLoad = global_.thingPath + '/samplerate/' + pathId;
      await axios.get(apiLoad)
      .then((response) => {
      this.sampleId = response.data.ObjectVal;
      })
      }
      async getLength(pathId:string) {
      var apiLoad = global_.thingPath + '/length/' + pathId;
      await axios.get(apiLoad)
      .then((response) => {
      this.lengthId = response.data.ObjectVal;
      })
      }
      }
      </script>
      \ No newline at end of file
      src/main.ts
      View file @ 41c35bc8
      import Vue from 'vue'; import Vue from 'vue';
      import App from './App.vue'; import App from './App.vue';
      import 'bootstrap/dist/css/bootstrap.css'
      import 'bootstrap-vue/dist/bootstrap-vue.css'
      import BootstrapVue from 'bootstrap-vue'
      Vue.config.productionTip = false; Vue.config.productionTip = false;
      Vue.use(BootstrapVue)
      new Vue({ new Vue({
      render: (h) => h(App), render: (h) => h(App),
      ......
      src/models/PathProcessor.ts 0 → 100644
      View file @ 41c35bc8
      export default class PathProcessor {
      public FillPathWithVar(variables: Map<string, string>, path: string): string {
      const urlRegExp = /(?<=\$)\w*(?=\$)/g;
      let str = '';
      const result = path.match(urlRegExp);
      if (result != null) {
      variables.forEach((value: string, key: string) => {
      result.forEach((label) => {
      // tslint:disable-next-line:triple-equals
      if (label == key) {
      str = '\$' + label + '\$';
      path = path.replace(str, value);
      }
      });
      });
      }
      return path;
      }
      public extractVarFromPath(path: string): string[] {
      let inputLabel: string[];
      inputLabel = [];
      const urlRegExp = /(?<=\$)\w*(?=\$)/g;
      const result = path.match(urlRegExp);
      if (result != null) {
      result.forEach((element: string) => {
      inputLabel.push(element);
      });
      }
      return inputLabel;
      }
      }
      src/models/StrMapObjChange.ts 0 → 100644
      View file @ 41c35bc8
      export default class StrMapObjChange {
      public strMapToObj(strMap: Map<string, string>): any {
      let obj = Object.create(null);
      for (let [k, v] of strMap) {
      // We don’t escape the key '__proto__'
      // which can cause problems on older engines
      obj[k] = v;
      }
      return obj;
      }
      public objToStrMap(obj: any) :Map<string, string>{
      let strMap = new Map();
      for (let k of Object.keys(obj)) {
      strMap.set(k, obj[k]);
      }
      return strMap;
      }
      }
      src/models/UpdatePayload.ts 0 → 100644
      View file @ 41c35bc8
      import * as Collections from "typescript-collections";
      export enum Action {
      Get,
      Set,
      Invoke,
      Broadcast,
      BroadcastAndRefresh
      }
      export interface UpdatePayload {
      target: string[];
      action: string;
      variables: Map<string, string>;
      }
      export interface ParamRef {
      paramName:string;
      value: string;
      ref: string;
      }
      src/models/WidgetConfig.ts 0 → 100644
      View file @ 41c35bc8
      import { WidgetRef } from './WidgetRef';
      import { GridItemData } from 'vue-grid-layout';
      export interface WidgetConfig {
      WidgetComponentName: string;
      data: any;
      }
      export class AllWidgetConfig {
      public currentRef?: string;
      public widgetList: WidgetRef[] = [];
      }
      src/models/WidgetRef.ts 0 → 100644
      View file @ 41c35bc8
      import { WidgetConfig } from './WidgetConfig';
      export class WidgetRef {
      // this is not quite right, the config for a resource should only be visual-wise,
      // the parameters of a resource should be probed by the widget itself
      public widgetComponentName: string = '';
      public ref: string = '';
      public widgetConfig?: WidgetConfig;
      }
      src/models/configParameter.ts 0 → 100644
      View file @ 41c35bc8
      export interface TimeParameter {
      pathId: string;
      startTime: string;
      endTime: string;
      dotNum: string;
      }
      src/models/wiget.ts 0 → 100644
      View file @ 41c35bc8
      import { Vue } from 'vue-property-decorator';
      import { WidgetConfig } from './WidgetConfig';
      import { UpdatePayload } from './UpdatePayload';
      export interface PokePath {
      getPath: string;
      setPath: string;
      invokePath: string;
      }
      export abstract class Widget extends Vue {
      public WidgetComponentName?: string;
      public abstract setConfig(wid: WidgetConfig): void;
      public abstract getConfig(): WidgetConfig;
      public abstract parentUpdate(paylosd: UpdatePayload): void;
      public abstract refresh(): void;
      public abstract updateUI(): void;
      // public poke(sample: object): PokePath
      // {
      // let pokePath:PokePath;
      // return pokePath;
      // }
      }
      src/types/vue-grid-layout/index.d.ts 0 → 100644
      View file @ 41c35bc8
      declare module 'vue-grid-layout' {
      import Vue from 'vue';
      export class GridLayout extends Vue {}
      export class GridItem extends Vue {}
      export interface GridItemData {
      x: number;
      y: number;
      w: number;
      h: number;
      i: string;
      }
      }
      \ No newline at end of file
      tsconfig.json
      View file @ 41c35bc8
      ...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
      "allowSyntheticDefaultImports": true, "allowSyntheticDefaultImports": true,
      "sourceMap": true, "sourceMap": true,
      "baseUrl": ".", "baseUrl": ".",
      "typeRoots": ["./src/types"],
      "types": [ "types": [
      "webpack-env" "webpack-env"
      ], ],
      ...@@ -31,7 +32,7 @@ ...@@ -31,7 +32,7 @@
      "src/**/*.tsx", "src/**/*.tsx",
      "src/**/*.vue", "src/**/*.vue",
      "tests/**/*.ts", "tests/**/*.ts",
      "tests/**/*.tsx" "tests/**/*.tsx", "node_modules/vue-grid-layout/dist/vue-grid-item.d.ts"
      ], ],
      "exclude": [ "exclude": [
      "node_modules" "node_modules"
      ......
      vue.config.js
      View file @ 41c35bc8
      module.exports = { module.exports = {
      devServer: { devServer: {
      proxy: { proxy: {
      "/basepath": { "/dataserver": {
      target: "http://localhost:8002/dataserver", target: "http://localhost:8002",
      secure: false, secure: false,
      changeOrigin: true changeOrigin: true
      } }
      ......
      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