[JavaScript知识库]长沙大屏开发

原定想使用使用DataV提供的全局容器

全局容器不起作用，我猜是因为只有使用dataV的组件，可以保证他的组件适配，而我们都是自己写的，所以不起作用吧

2. header使用定高141px，下面内容使用 height: calc(100vh - 141px);
3. 内容区域横向使用 flex 布局，宽度相加为100%，间距使用每块padding撑开
4. 内容部分纵向相加为 100% ，间距使用padding撑开
5. 无需考虑分辨率的问题，任何分辨率下全屏显示
6. 每个图表使用独立组件，随着尺寸变化自动刷新，mixins文件夹下 resize.js文件
7. 字体及边距的适配：使用flexible.js做字体适配，将所有px转为rem
8. 公共样式例如 size-20 的适配：新建一个rem.scss文件，将px转为rem单位
9. echarts图表里字体大小，线宽度等的适配：封装一个方法，放在mixin里，在组件中直接调用this.fontSize(实际大小/100)
10. 通过webSocket获取所有大屏数据，将数据传递给子组件。实时传递新数据，子组件需要监听数据变化重新渲染

6、mixins文件夹下 resize.js文件

// screen/components/mixins/resize.js
import { debounce } from '@/utils'

export default {
  data() {
    return {
      $_sidebarElm: null,
      $_resizeHandler: null
    }
  },
  mounted() {
    this.initListener()
  },
  activated() {
    if (!this.$_resizeHandler) {
      // avoid duplication init
      this.initListener()
    }

    // when keep-alive chart activated, auto resize
    this.resize()
  },
  beforeDestroy() {
    this.destroyListener()
  },
  deactivated() {
    this.destroyListener()
  },
  methods: {
    // use $_ for mixins properties
    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
    $_sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        this.$_resizeHandler()
      }
    },
    initListener() {
      this.$_resizeHandler = debounce(() => {
        this.resize()
      }, 100)
      window.addEventListener('resize', this.$_resizeHandler)

      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
    },
    destroyListener() {
      window.removeEventListener('resize', this.$_resizeHandler)
      this.$_resizeHandler = null

      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
    },
    resize() {
      const { chart } = this
      chart && chart.resize()
    }
  }
}

// utils/index.js
/**
 * @param {Function} func
 * @param {number} wait
 * @param {boolean} immediate
 * @return {*}
 */
export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result;

  const later = function () {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp;

    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;
      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      }
    }
  };

  return function (...args) {
    context = this;
    timestamp = +new Date();
    const callNow = immediate && !timeout;
    // 如果延时不存在，重新设定延时
    if (!timeout) timeout = setTimeout(later, wait);
    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }

    return result;
  };
}

8. 新建一个rem.scss文件，将px转为rem单位，144 = 分辨率/24 = 3456 / 24

@for $value from 1 through 100 {
    .pd-#{$value},
    .ptb-#{$value},
    .pt-#{$value} {
      padding-top: $value/144 * 1rem;
    }
    .pd-#{$value},
    .ptb-#{$value},
    .pb-#{$value} {
      padding-bottom: $value/144 * 1rem;
    }
    .pd-#{$value},
    .plr-#{$value},
    .pl-#{$value} {
      padding-left: $value/144 * 1rem;
    }
    .pd-#{$value},
    .plr-#{$value},
    .pr-#{$value} {
      padding-right: $value/144 * 1rem;
    }
    .mg-#{$value},
    .mtb-#{$value},
    .mt-#{$value} {
      margin-top: $value/144 * 1rem;
    }
    .mg-#{$value},
    .mtb-#{$value},
    .mb-#{$value} {
      margin-bottom: $value/144 * 1rem;
    }
    .mg-#{$value},
    .mlr-#{$value},
    .ml-#{$value} {
      margin-left: $value/144 * 1rem;
    }
    .mg-#{$value},
    .mlr-#{$value},
    .mr-#{$value} {
      margin-right: $value/144 * 1rem;
    }
  }

@for $value from 10 through 40 {
  .size-#{$value} {
    font-size: $value/144 * 1rem;
  }
}

*{
  box-sizing: border-box;
}
.s-yellow{
  color: #FFC300;
}
.s-red{
  color: #CB272C;
}
.s-blue{
  color: #00CDCF;
}
.s-gray{
  color: #979797;
}
.line-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

9. echarts图表里字体大小，线宽度等的适配，封装一个方法，放在mixin里，在组件中直接调用this.fontSize(实际大小/100)

fontSize(res) {
      let docEl = document.documentElement,
        clientWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth;
      if (!clientWidth) return;
      console.log(clientWidth);
      let fontSize = 100 * (clientWidth / 3456);
      return res * fontSize;
    },

// 使用
		//坐标值标注
            axisLabel: {
              formatter: "{value} %", //右侧Y轴文字显示
              textStyle: {
                color: "#fff",
                fontSize: this.fontSize(0.16),
              },
            },

10、子组件监听数据变化实时刷新图表

props: ["list"],
  watch: {
    list: {
      handler(val) {
        // 深度监听没有旧值
        this.month = val.map((item) => {
          return item.month + "月";
        });
        this.orderNum = val.map((item) => {
          return item.orderCount;
        });
        this.oldNum = val.map((item) => {
          return item.servedCount;
        });
        this.goodRate = val.map((item) => {
          return item.favorableRate;
        });
        let option = {
          xAxis: [
            {
              data: this.month,
            },
          ],
          series: [
            {
              data: this.orderNum, // 订单量
            },
            {
              data: this.oldNum, // 服务人数
            },
            {
              data: this.goodRate, //折线图数据
            },
          ],
        };
        this.chart.setOption(option);
      },
      // 这里是关键，代表递归监听的变化
      deep: true,
    },
  },