qiangmj / report-ui

<!-- 
  Div 图层
-->
<template>
  <div :style="styleColor">

    <!-- <component :is="styleColor.divClass" :mainColor="transStyle.colorOne" :secondaryColor="transStyle.colorTwo">
    </component> -->
    <div :class="['div_Style', styleColor.divClass]" v-if="
      styleColor.divClass === 'div_Style_1' ||
      styleColor.divClass === 'div_Style_10'
    ">
      <div class="topLeft"></div>
      <div class="topRight"></div>
      <div class="bottomLeft"></div>
      <div class="bottomRight"></div>
    </div>
    <div :class="['div_Style', styleColor.divClass]" v-else></div>
  </div>
</template>

<script>
// import WidgeDiv1 from './svg/div1.vue';
// import WidgeDiv2 from './svg/div2.vue';
export default {
  name: "WidgetDiv",
  components: {
    // div_Style_1: WidgeDiv1,
    // div_Style_2: WidgeDiv2
  },
  props: {
    value: Object,
    ispreview: Boolean,
  },
  data() {
    return {
      options: {},
      optionsData: {},
    };
  },
  computed: {
    transStyle() {
      return this.objToOne(this.options);
    },
    styleColor() {
      return {
        position: this.ispreview ? "absolute" : "static",
        color: this.transStyle.colorOne,
        text: this.transStyle.text,
        divClass:
          this.transStyle.divType == undefined
            ? "div_Style_1"
            : this.transStyle.divType,
        background: this.transStyle.background,
        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",
      };
    },
  },
  watch: {
    value: {
      handler(val) {
        this.options = val;
        this.optionsData = val.data;
        this.setOptionsData();
      },
      deep: true,
    },
  },
  watch: {
    value: {
      handler(val) {
        this.options = val;
      },
      deep: true,
    },
  },
  mounted() {
    this.options = this.value;
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.div {
  width: 100%;
  height: 100%;
  border: 1em;
  border-color: aqua;
  overflow: hidden;
}

.div_Style {
  width: 100%;
  height: 100%;
}

.div_Style_1 {
  fill: red;
  position: relative;

  >div {
    position: absolute;
    width: 6em;
    height: 6em;
    background: url("../../../../../assets/images/widget/div1.svg") no-repeat;
    background-size: 100% 100%;
  }

  .topLeft {
    top: 0;
    left: 0;
  }

  .topRight {
    top: 0;
    right: 0;
    transform: rotateY(180deg);
  }

  .bottomLeft {
    left: 0;
    bottom: 0;
    transform: rotateX(180deg);
  }

  .bottomRight {
    bottom: 0;
    right: 0;
    transform: rotateX(180deg) rotateY(180deg);
  }
}

.div_Style_2 {
  background: url("../../../../../assets/images/widget/div2.svg") no-repeat;
  background-size: 100% 100%;
}

.div_Style_3 {
  background: url("../../../../../assets/images/widget/div3.svg") no-repeat;
  background-size: 100% 100%;
}

.div_Style_4 {
  background: url("../../../../../assets/images/widget/div4.svg") no-repeat;
  background-size: 100% 100%;
}

.div_Style_5 {
  background: url("../../../../../assets/images/widget/div5.svg") no-repeat;
  background-size: 100% 100%;
}

.div_Style_6 {
  background: url("../../../../../assets/images/widget/div6.svg") no-repeat;
  background-size: 100% 100%;
}

.div_Style_7 {
  box-shadow: rgb(131, 191, 246) 0px 0px 40px inset;
  border: 1px solid rgb(131, 191, 246);
  background: url("../../../../../assets/images/widget/div7.svg") no-repeat;
  background-size: 100% 100%;
}

.div_Style_8 {
  height: 100%;
  background: url("../../../../../assets/images/widget/div8.svg") no-repeat;
  background-size: 100% 100%;
}

.div_Style_9 {
  background: url("../../../../../assets/images/widget/div9.svg") no-repeat;
  background-size: 100% 100%;
}

.div_Style_10 {
  position: relative;
  box-shadow: rgb(131, 191, 246) 0px 0px 25px 3px inset;

  >div {
    position: absolute;
    width: 6em;
    height: 6em;
    background: url("../../../../../assets/images/widget/div10.svg") no-repeat;
    background-size: 100% 100%;
  }

  .topLeft {
    top: 0;
    left: 0;
  }

  .topRight {
    top: 0;
    right: 0;
    transform: rotateY(180deg);
  }

  .bottomLeft {
    left: 0;
    bottom: 0;
    transform: rotateX(180deg);
  }

  .bottomRight {
    bottom: 0;
    right: 0;
    transform: rotateX(180deg) rotateY(180deg);
  }
}

.div_Style_11 {
  width: 100%;
  background: url("../../../../../assets/images/widget/div11.svg") no-repeat;
  background-size: 100% 100%;
}

.div_Style_12 {
  background: url("../../../../../assets/images/widget/div12.svg") no-repeat;
  background-size: 100% 100%;
}
</style>