widgetDtImage.vue 16.2 KB
<template>
  <div class="imagebox" :style="styleColor" v-if="isRouterAlive">
<!--    <div class="bg" v-if="!imgStyle.imageAdress"></div>-->
    <div v-if="imageAdressShow">
      <img :class="transStyle.startRotate ? 'startImg' : ''" :style="imgStyle" :src="imageAdress" alt="" />
    </div>
  </div>
</template>
<script>
import {mapState} from "vuex";
export default {
  name: "WidgetDtImage",
  components: {},
  props: {
    value: Object,
    ispreview: Boolean
  },
  data() {
    return {
      options: {},
      optionsData: {},
      optionsSetUp: {},
      picData:[],
      imageAdress:'',
      imageAdressShow:true,
      isRouterAlive:false,
      flagInter: null,
    };
  },
  computed: {
    ...mapState('dataSource', ['staticData','staticRefreshTime']),
    transStyle() {
      return this.objToOne(this.options);
    },
    styleColor() {
      return {
        position: this.ispreview ? "absolute" : "static",
        background: this.transStyle.background,
        "text-align": this.transStyle.textAlign,
        width: this.transStyle.width + "px",
        height: this.transStyle.height + "px",
        left: this.transStyle.left + "px",
        top: this.transStyle.top + "px",
        right: this.transStyle.right + "px",
        "border-radius": this.transStyle.borderRadius + 'px'
      };
    },
    imgStyle() {
      return {
        width: this.transStyle.width + "px",
        height: this.transStyle.height + "px",
        "border-radius": this.transStyle.borderRadius + "px",
        opacity: this.transStyle.transparency / 100,
        animation: this.transStyle.startRotate ? "turn " + (101 - this.transStyle.rotationSpeed) / 10 + "s linear infinite" : "none"
      };
    }
  },
  watch: {
    value: {
      handler(val) {
        this.options = val;
        this.optionsData = val.data;
        this.optionsSetUp = val.setup;
        this.initData();
      },
      deep: true
    }
  },
  created() {
    this.options = this.value;
  },
  mounted() {
    this.options = this.value;
    this.optionsData = this.value.data;
    this.setPicValue();
  },
  methods: {
    // vue hack 之强制刷新组件
    reload(){
      this.isRouterAlive=false;
      this.$nextTick(function(){
        this.isRouterAlive=true;
      })
    },
    initData() {
      this.handlerPicData();
    },
    handlerPicData(){
      this.setPicValue();
    },
    //初始化设置pic值
    setPicValue(){
      const {slectedDataType} = this.transStyle;
      if(this.isNotBlank(slectedDataType)){
        const refreshTime = this.staticRefreshTime || 300000;
        this.dynamicDataFn(refreshTime);
      }else{
        this.getEchartData();
      }
    },
    dynamicDataFn(refreshTime) {
      if (this.ispreview) {
        this.flagInter = setInterval(() => {
          this.getEchartData();
        }, refreshTime);
      } else {
        this.getEchartData();
      }
    },
    getEchartData() {
      this.imageAdress=this.getShowPic();
      this.imageAdressShow = this.isNotBlank(this.imageAdress);
      // console.log("this.imageAdress",this.imageAdress, this.imageAdressShow)
      this.reload();
    },
    getShowPic() {
      const {textPic, slectedDataType} = this.transStyle;
      const key = this.staticData[slectedDataType] || textPic;
      const dataPic = this.value.setup.dynamicAddPicAdress;
      // if(this.isBlank(key) || this.isBlankArray(dataPic)){
      //   return this.transStyle.imageAdress;
      // }
      for (let i = 0; i < dataPic.length; i++) {
        if(dataPic[i].key==key){
          /** 控制svg图片拖动,原理在于设置svg的viewbox属性,viewbox的第一个参数控制左右位置,第二个参数设置上下位置  */
          /** 控制svg图片放大缩小,原理在于设置svg的viewbox属性,viewbox的第三个参数控制左右大小,第四个参数设置上下大小 */
            //设置svg 自适应  添加属性 viewBox="0,0,640,480"
          const pic = dataPic[i].value;
          return pic;
        }
      }
      return null;
    },
  }
};
</script>

<style scoped lang="scss">
.imagebox {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(data:image/png;base64,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) no-repeat;
    background-size: 100% 100%;
  }
}


.imagebox img {
  width: 100%;
  height: 100%;
}

.startImg {
  animation: turn 1s linear infinite;
}
</style>