用three.js+echarts给公司写了一个站点数据大屏系统经验总结

---

时间过的好快，参加公司的新项目研发快一年了，五一机器人项目首秀，我们遇到了高并发集中下单情景，然后海量数据处理场景来了，给我在后端领域的高并发实践业务上画上了漂亮的一笔经验。人都是在磨练中成长，我很感谢这次给我的机会，虽然有点累，但也有点小成就。正好现在有空，我先聊聊首秀后给领导们做的大屏数据展示吧，领导等着看漂亮数据呢！

大屏重点是贼啦炫酷的动态特效加持

业务核心运营场景：各大地上地下停车场

这里我用的是three.js去实现的实际业务场景的场站模拟三维图，废话不多说，直接上图吧！先说一下，这里截图是看起来像2维，但实际是3维的，可以滑动翻转地图的。

如图所示，这是p4停车场的全景图，整个停车场的鸟瞰图一览无余，可以滚动鼠标放大看====》

这是我用three.js渲染的每个停车位的车位标记，这里记录了这个车场的每个车位的坐标点，方便后期，观察我们投放的100台机器人智能驾驶实时模拟。听起来是不是很牛逼plus？我告诉你，事情没那么简单！由于数据太多，既要有3D-map，也要有实时动态数据滚动展示和各种echarts图表，比如：

ps：不好意思，本人还要严格遵守劳动合同执行公司数据保密，相关数据已经打码。

然后一堆实时数据数据和图上来后，不出意外的意外来了，性能出现了问题，我遇到了内存泄漏的情况。这还怎么继续二期的机器人动态运行场景研发呢？别慌，一步一步排查代码。

1.先介绍下大屏顶部的总数统计动态数字翻牌器

这里我用了第三方插件：动态数字翻牌器vue-count-to,只要有数据变化，就会实时看到动态增长的效果

首先要在框架中安装npm install vue-count-to，并在项目入口文件中引入

import CountTo from 'vue-count-to';
Vue.use(CountTo)
new Vue({
   
  el: '#app',
  router,
  store,
  render: h => h(App)
})

实际业务开发模块中代码：

                <count-to
                    class="count-to"
                    :startVal="0" //开始数值
                    :endVal="687573.74" //结束数值
                    :duration="500000" //动态变化的时间设定
                    :decimals="1"  //每次动态增长的数量
                ></count-to>

2.然后在大屏的左侧，我写了一个实时从下到上无限滚动的动态订单列表，可以让领导看到最新的订单情况。

<template>
    <div class="scrolling-list" :style="{ transform: `translate(0px,-${scrollTop}px)` }">
      <ul ref="scrollItemBox">
        <li v-for="(item, index) in items" :key="index" class="item-li">
            <div><span class="name">订单编号：</span><span class="content"><i class="el-icon-receiving">  {
   {
    item.order_id }}</i></span></div>
            <div><span class="name">订单金额：</span><span class="content"><i class="el-icon-s-finance" style="color:#1989fa" >  {
   {
    item.pre_total_amount }}</i></span><span class="name">手机号：</span><span class="content"><i class="el-icon-mobile-phone" style="color:#1989fa">  {
   {
    item.phone }}</i></span></div>
            <div><span class="name">车牌号：</span><span class="content"> <i class="el-icon-truck" style="color:#1989fa">  {
   {
    item.vehicle_no }}</i></span><span class="name">车位号：</span><span class="content"><i class="el-icon-map-location" style="color:#1989fa">  {
   {
    item.target_slot_no }}</i></span></div>
            <div><span class="name">订单来源：</span><span class="content">{
   {
    item.order_from == 1 ? '小程序' : 'APP' }}</span><span class="name">下单时间：</span><span class="content"><i class="el-icon-time">  {
   {
    item.created_at }}</i></span></div>
        </li>
      </ul>
      <div v-html="copyHtml"></div>
    </div>
</template>
<script>
  
  export default {
   
    
  data() {
   
      return {
   
        name: "InfiniteScroll",
        scrollTop: 0, //列表滚动高度
        speed: 15, //滚动的速度
        copyHtml: '',
        items:[],
        intervalId: null
      };
    },
  mounted() {
   
    this.initScroll()
  },
  beforeDestroy() {
   
    // 清除定时任务
      clearInterval(this.intervalId);
    },
  methods: {
   
     initScroll() {
   
            this.$nextTick(() => {
   
                this.copyHtml = this.$refs.scrollItemBox.innerHTML
                this.startScroll()
            })
      },
      // 开始滚动
      startScroll() {
   
          setInterval(this.scroll, this.speed);
      },
      // 滚动处理方法
      scroll() {
   
            this.scrollTop++
            // 获取需要滚动的盒子的高度
            let scrollItemBox = this.$refs.scrollItemBox?.offsetHeight || 1000
            // 当判断滚动的高度大于等于盒子高度时，从头开始滚动
            if (this.scrollTop >= scrollItemBox) {
   
                this.scrollTop = 0
            }
      }
    }
  };
  </script>

3.然后在大屏的右侧，用echarts写了两个饼图和折线图表，可以直观的的看到数据统计

export const timeStaticsOption = (xData,tipsArr) => {
   
  return {
   
    title: {
   
      text: '',
      subtext:'当天时间段充电订单数',
      subtextStyle:{
   
        color:'#fff',
      }
    },
    tooltip: {
   
      trigger: 'axis',
      axisPointer: {
   
        type: 'cross'
      }
    },
    xAxis: {
   
      type: 'category',
      data: xData,
      boundaryGap: false,
      axisLine: {
   
        show: false,
        lineStyle: {
   
          color: '#73B131',
          type: 'dashed'
        }
      },
    },
    yAxis: {
   
      type: 'value',
      axisPointer: {
   
        snap: true
      }
    },
    series: [
      {
   
        name: '时间段充电订单数',
        type: 'line',
        smooth: true,
        data: tipsArr,
      }
    ]
  }
}
export const botDataPieEcharts = (total,a,b)=>{
   
  console.log(total,a,b)
  return {
   
    title: {
   
      text: '',
      subtext: "Bot总数:"+ total+ '台',
      left: 'center',
      subtextStyle:{
   
        color:'#fff',
      }
    },
    tooltip: {
   
      trigger: 'item'
    },
    // legend: {
   
    //   orient: 'vertical',
    //   left: 'left'
    // },
    series: [
      {
   
        name: 'Bot数量',
        type: 'pie',
        radius: '50%',
        data: [
          {
    value: a, name: '在线:'+ a +'台' },
          {
    value: b, name: '空闲:'+ b +'台'},
        ],
        emphasis: {
   
          itemStyle: {
   
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
}

4.最后也是最耗性能的部分，用three.js写的停车场模拟实景鸟瞰图，3d-map

这里我直接把相关的方法和类，全部封装好，单独引入文件，用到以下文件，

import '../public/threejs/controls/OrbitControls.js'; 
import '../public/threejs/lines/LineSegmentsGeometry.js';
import '../public/threejs/lines/LineGeometry.js';
import '../public/threejs/lines/LineMaterial.js';
import '../public/threejs/lines/LineSegments2.js';
import '../public/threejs/lines/Line2.js';

在业务中相关代码写好工具方法，

import myWorker from './map.worker';
import FONT_JSON_DATA from './helvetiker_bold.typeface.json';
class basicThree {
   
    constructor(props) {
   
        this.from = props.from
        this.callbackSlotNo = props.callback
        console.log(props, 'props')
        this.LineGeometry
        // three 3要素
        this.renderer; //渲染器
        this.camera; //摄像头
        this.scene; //场景
        //光源
        this.ambientLight; //环境光
        this.pointLight; //平行光
        this.DirectionalLight
        //触屏开始时间
        this.touchTime = 0
        //摄像头控制
        this.controls;
        this.init()
        this.onmousedbclick = this.onMouseDblclick.bind(this);
        this.selectObject
        this.rawOption
        this.materialLine = Object()
        this.box = document.createElement("div")

        this.donX
        this.donY
        this.dataNumber
        this.originX; // 偏移量x坐标
        this.originZ; // 偏移量z坐标
        this.thinLine;
        this.wideLine;

        // 定义模型组
        this.initModalGroup();

        this.mapParams;

        this.drawModalFunc = {
   
            '0': {
   
                'func': this.RoadLineSigns.bind(this),
                'group': 'RoadLineSigns_group',
                'z': 0
            },
            '1': {
   
                'func': this.RoadLineSigns.bind(this),
                'group': 'RoadLineSigns_group',
                'z': 0
            },
            '2': {
   
                'func': this.RoadLineSigns.bind(this),
                'group': 'RoadLineSigns_group',
                'z': 2
            },
            '3': {
   
                'func': this.initNoAndArea.bind(this),
                'group': null,
                'z': 3
            },
            '4': {
   
                'func': this.basicWall.bind(this),
                'group': 'barrier_group',
                'z': 3
            },
            '5': {
   
                'func': this.initSlotLine.bind(this),
                'group': 'initSlotLine_group',
                'z': 3
            },
            '6': {
   
                'func': this.RoadLineSigns.bind(this),
                'group': 'RoadLineSigns_group',
                'z': 3
            },
            '7': {
   
                'func': this.RoadLineSigns.bind(this),
                'group': 'RoadLineSigns_group',
                'z': 3
            },
            '8': {
   
                'func': this.RoadLineSigns.bind(this),
                'group': 'RoadLineSigns_group',
                'z': 3
            },
            '9': {
   
                'func': this.initSlotLine.bind(this),
                'group': 'initSlotLine_group',
                'z': 3
            },
            '10': {
   
                'func': this.initSlotLine.bind(this),
                'group': 'initSlotLine_group',
                'z': 3
            },
            '11': {
   
                'func': this.RoadLineSigns.bind(this),
                'group': 'RoadLineSigns_group',
                'z': 3
            },
            '13': {
   
                'func': this.initSlotLine.bind(this),
                'group': 'initSlotLine_group',