qiangmj / report-ui

<!--
数字翻牌器
-->
<template>
<!--  <div id="widget-digital-flop" :style="styleObj">-->
    <dv-digital-flop :config="options" :style="styleObj"/>
<!--  </div>-->
</template>
<script>

import digitalFlop from "@jiaminghi/data-view/lib/components/digitalFlop";
import {mapState} from "vuex";
import Vue from "vue";
Vue.use(digitalFlop);
export default {
  name: "WidgetDigitalFlop",
  props: {
    value: Object,
    ispreview: Boolean,
  },
  data() {
    return {
      //返回图标数据
      options: {
        number:[],//数字数值
        content:'数字{nt}',//number中的元素将被用于替换content内容模版中的{nt}标记，其替换顺序与模版标记的顺序一一对应：实际显示效果：'数字1,数字2,数字3,数字4'
        toFixed: 0,//小数位数
        rowGap: 0,//行间距 当使用\n进行换行的时候，rowGap可以控制行间距
        textAlign: 'center',//水平对齐方式 textAlign用于设置文字的水平对齐方式，可选值为'center'|'left'|'right'，该值将覆盖style属性中的textAlign属性。
        style: {
          fontSize: 30,
          fill: '#3de7c9',
          fontStyle: 'normal',
          fontWeight: 'normal',
          fontVarient: 'normal',
          textAlign: 'center',//水平对齐方式 textAlign用于设置文字的水平对齐方式，可选值为'center'|'left'|'right'，该值将覆盖style属性中的textAlign属性。
          fontFamily: '',
        },//可使用fill属性设置字体颜色、stroke属性设置字体描边颜色、fontSize属性设置文字大小
        //formatter:this.formatterNum,//格式化数字	类型： Function,
        animationCurve: 'easeOutCubic',   //动效曲线
        animationFrame:50
      },
      config:{},
      optionsStyle: {}, // 样式
      optionsData: {}, // 数据
      optionsCollapse: {}, // 图标属性
      optionsSetup: {},
      flagInter: null,
    };
  },
  beforeDestroy() {
    clearInterval(this.flagInter);
  },
  computed: {
    ...mapState('dataSource', ['staticData','staticRefreshTime']),
    styleObj() {
      /*数字初始化*/
      const {slectedDataType,numberText} = this.optionsSetup;
      let datav = this.staticData[slectedDataType] || numberText;
      let dataArray = datav.toString().split(",");
      const numArray=[];
      if(this.isNotBlankArray(dataArray)){
        dataArray.forEach(num=>{
          numArray.push(parseInt(num));
        });
      }
      this.options.number = numArray;
      this.options={...this.options};
      return {
        position: this.ispreview ? "absolute" : "static",
        width: this.optionsStyle.width + "px",
        height: this.optionsStyle.height + "px",
        left: this.optionsStyle.left + "px",
        top: this.optionsStyle.top + "px",
        background: this.optionsSetup.background
      };
    },
  },
  watch: {
    value: {
      handler(val) {
        this.optionsStyle = val.position;
        this.optionsData = val.data;
        this.optionsSetup = val.setup;
        this.editorOptions();
      },
      deep: true
    }
  },
  created() {
    this.optionsStyle = this.value.position;
    this.optionsData = this.value.data;
    this.optionsSetup = this.value.setup;
    this.editorOptions();
  },
  mounted:function()
  {
    this.$nextTick(function(){
      //样式渲染
      this.setFontStyle();
    })
  },

  methods: {
    // 修改图标options属性
    editorOptions() {
      //数据修改
      this.setOptionsData();

      //字体样式修改
      this.setFontStyle();

      //显示内容
      this.showText();
    },

    //显示的内容
    showText() {
      const {slectedDataType,numberText} = this.optionsSetup;
      let datav = this.staticData[slectedDataType] || numberText;
      if(this.isNotBlank(slectedDataType)){
        const refreshTime = this.staticRefreshTime || 300000;
        this.dynamicDataFn(refreshTime);
      }else{
        this.setShowText(datav);
      }
    },
    setShowText(datav) {
      let dataArray = datav.toString().split(",");
      const numArray=[];
      if(this.isNotBlankArray(dataArray)){
        dataArray.forEach(num=>{
          numArray.push(parseInt(num));
        });
      }
      this.options.number = numArray;
      this.options={...this.options};
    },
    //字体修改
    setFontStyle() {
      const optionsSetup = this.optionsSetup;
      const fontStyle = this.options.style;
      fontStyle.fill=optionsSetup.fill;
      fontStyle.fontSize=optionsSetup.fontSize;
      fontStyle.fontWeight=optionsSetup.fontWeight;
      fontStyle.fontStyle=optionsSetup.fontStyle;
      fontStyle.fontFamily=this.optionsSetup.fontFamily;
      this.options.textAlign =optionsSetup.textAlign;
      this.options.style = fontStyle;
    },
    //千为分隔符
    formatterNum (number) {
      const numbersA=number.toString().split('.');
      const numbersEnd=numbersA.length>1?numbersA[1]:"";
      const numbers = numbersA[0].split('').reverse();
      const segs = [];
      while (numbers.length) segs.push(numbers.splice(0, 3).join(''));
      return segs.join(',').split('').reverse().join('')+(numbersA.length>1?"."+numbersEnd:"");
    },
    // 数据修改
    setOptionsData() {
      const optionsSetup = this.optionsSetup;
      if(optionsSetup.isFormatterNum){
        this.options.formatter=this.formatterNum;
      }else{
        this.options.formatter=undefined;
      }
      this.options.isFormatterNum=optionsSetup.isFormatterNum;//千分位显示
      this.options.content=optionsSetup.content;
      this.options.toFixed=optionsSetup.toFixed;
      this.options.textAlign= this.options.style.textAlign;
      this.options.animationFrame=optionsSetup.animationFrame;
    },
    //定时动态数据获取
    dynamicDataFn(refreshTime) {
      if (this.ispreview) {
        this.flagInter = setInterval(() => {
          this.getEchartData();
        }, refreshTime);
      } else {
        this.getEchartData();
      }
    },
    getEchartData() {
      const {slectedDataType,numberText} = this.optionsSetup;
      const datav = this.staticData[slectedDataType] || numberText;
      // console.log("翻牌数值",datav)
      this.setShowText(datav);
    }
  }
};

</script>
<style scoped lang="scss">
.echarts {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>