可视化大屏设计器绑定websocket记录

679 阅读1分钟

1,遍历可以绑定了datasetId的数组 2,查找对应的图表id 3,datasetId和图表是一对多关系 4,代码:

function updateChartProps(id: undefined, option: { series: any[]; },charts: any[], changeCharts: { (charts: object[]): void; (arg0: any): void; (arg0: any): void; }){
  charts.map(chart => {
    if (chart.id === id) {
      chart.option = option;
    }
    return chart;
  });
  changeCharts(charts)
}
function updateChart(chartData: string | any[], option: { series: any[]; } | undefined, id: undefined,charts: any[], changeCharts: { (charts: object[]): void; (arg0: any): void; }){

  if (!chartData) return;

  if (option && option.series && option.series.length > 0) {
    //console.log('getProps',type,this.props, chartData);
    option.series = option.series.map((serie, index) => {
      if (!!chartData && chartData.length > 0) {
        if (chartData.length < index) {
          index = chartData.length;
        }
        const newSer = Object.assign({}, serie, chartData[index]);

        return newSer;
      } else {
        return serie; //seriesItemTemplate
      }
    });
    if (!!updateChartProps) {
      updateChartProps(id, option,charts,changeCharts);
    }
  }
}
function loadWebsocket(markPreview:boolean,charts: any[], changeCharts: { (charts: object[]): void; (arg0: any): void; },) {
  let hasDataSetIdCharts: any[] = [];
  charts.map((obj) => {
    if (obj.hasOwnProperty('dataSetId') && obj.dataSetId) {
      hasDataSetIdCharts.push(obj.dataSetId);
    }
  });
  markPreview&&changeCharts(charts);
  const socket = new WebSocket("ws://" + 'ip' + ":9080");
  //接收消息
  socket.onmessage = function (event) {
    if (event && event.data) {
      const socketData = JSON.parse(event.data);
        charts.map((item) => {
          if (item.hasOwnProperty('dataSetId') && item.dataSetId == socketData.dataSetId) {
            updateChart(JSON.parse(socketData.data),item.option, item.id, charts, changeCharts)
          }
        })
    }
  }
    //连接建立的回调函数
    socket.onopen = function (event) {
 //   console.log(event)
      socket.send(
        hasDataSetIdCharts.join(',')
      )
    }
    //连接断掉的回调函数
    socket.onclose = function (event) {
      console.log(event);

    }
}