自定义按钮组件-引入

+/*
+* 年月季度按钮
+* author lsq
+* 2022/03/01
+* */
+export const monitorButtonGroup = {
+  code: 'monitor-button-group',
+  type: 'html',
+  label: '按钮-月/季度/年',
+  icon: 'iconbiaoge',
+  options: {
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '背景',
+      },
+      {
+        type: 'el-switch',
+        label: '加边框',
+        name: 'isBorder',
+        required: false,
+        placeholder: '',
+        value: true
+      },
+      {
+        type: 'el-switch',
+        label: '加描边',
+        name: 'isShadow',
+        required: false,
+        placeholder: '',
+        value: true
+      },
+      {
+        type: 'vue-color',
+        label: '边框颜色',
+        name: 'borderColor',
+        required: false,
+        placeholder: '',
+        value: 'rgba(151, 151, 151, 0.13)',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'bgColor',
+        required: false,
+        placeholder: '',
+        value: '#f4f5fa',
+      },
+      {
+        type: 'custom-upload',
+        label: '背景图片',
+        name: 'imageAdress',
+        required: false,
+        placeholder: '',
+        value:  '',
+      },
+
+    ],
+    position: [
+      {
+        type: 'el-input-number',
+        label: '左边距',
+        name: 'left',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '上边距',
+        name: 'top',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '宽度',
+        name: 'width',
+        required: false,
+        placeholder: '该容器在1920px大屏中的宽度',
+        value: 700,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 400,
+      },
+    ]
+  }
+}

@@ -45,6 +45,7 @@ import {monitorCustomBarStack} from "./echartsConfigJson/monitorConfigJson/monit
 import {monitorBasicInformationTwo} from "./echartsConfigJson/monitorConfigJson/monitor-basic-information-two";
 import {monitorCustomLineStack} from "./echartsConfigJson/monitorConfigJson/monitor-custom-line-stack";
 import {monitorCustomBarLineChart} from "./echartsConfigJson/monitorConfigJson/monitor-custom-bar-line-chart";
+import {monitorButtonGroup} from "./echartsConfigJson/monitorConfigJson/monitor-button-group";
 
 
 export const {widgetTool,monitor} = {
@@ -99,6 +100,8 @@ export const {widgetTool,monitor} = {
     // 折线堆叠图-多数据
     monitorCustomLineStack,
     // 柱线图-双线
-    monitorCustomBarLineChart
+    monitorCustomBarLineChart,
+    //月季度年按钮
+    monitorButtonGroup
   ]
 }

+<template>
+  <div class="basicInformation-container" :style="styleObj">
+    <el-button :type="typePrimary" @click="changeType(item)" v-for="item in btnGroup">{{item.name}}</el-button>
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "buttonGroup",
+  data() {
+    return {
+      options: {},
+      optionsSetUp: {},
+      optionsPosition:{},
+      optionsData:{},
+      //按钮组
+      btnGroup:[
+        {name:'月',code:'month'},
+        {name:'季度',code:'quarter'},
+        {name:'年',code:'year'},
+      ],
+      typePrimary:'default',//按钮颜色类型
+      btnActive:'month'
+    }
+  },
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  computed: {
+    transStyle() {
+      return this.objToOne(this.options);
+    },
+    styleObj() {
+      const allStyle = this.optionsPosition;
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: allStyle.width + "px",
+        height: allStyle.height + "px",
+        left: allStyle.left + "px",
+        top: allStyle.top + "px",
+        'background':this.transStyle.bgColor,
+        'border':this.transStyle.isBorder?'0.5px solid '+this.transStyle.borderColor:'none',
+        'box-shadow':this.transStyle.isShadow?'0px 3px 12px '+this.transStyle.borderColor:'none',
+        'background-image':'url(' + this.transStyle.imageAdress + ')',
+        // 'background-position':'center',
+        'background-repeat':'no-repeat',
+        'background-size':'contain'
+      };
+    },
+
+
+
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.options = val;
+        this.optionsSetUp = val.setup;
+        this.optionsPosition = val.position;
+        // this.handlerData();
+
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    // this.initImageUrl();
+    this.options=this.value;
+    this.optionsSetUp = this.value.setup;
+    this.optionsPosition = this.value.position;
+    // this.handlerData();
+
+  },
+  methods: {
+    changeType(item){
+      this.btnActive=item.code;
+    },
+    handlerData() {
+      const resData = this.optionsData;
+      resData.dataType == "staticData"
+        ? this.handlerStaticData(resData.staticData)
+        : this.handlerDynamicData(resData.dynamicData, resData.refreshTime);
+    },
+    handlerStaticData(data) {
+
+    },
+    handlerDynamicData(data, refreshTime) {
+      if (!data) return;
+      /* if (this.ispreview) {
+         this.getEchartData(data);
+         this.flagInter = setInterval(() => {
+           this.getEchartData(data);
+         }, refreshTime);
+       } else {
+         this.getEchartData(data);
+       }*/
+    }
+
+
+  },
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

@@ -48,6 +48,7 @@ import monitorCustomBarStack from "./monitor/customBarStack";
 import monitorBasicInformationTwo from "./monitor/basicInformationTwo";
 import monitorCustomLineStack from "./monitor/customLineStack";
 import monitorCustomBarLineChart from "./monitor/customBarLineChart";
+import monitorButtonGroup from "./monitor/buttonGroup";
 
 export default {
   name: "WidgetTemp",
@@ -88,7 +89,8 @@ export default {
     monitorCustomBarStack,
     monitorBasicInformationTwo,
     monitorCustomLineStack,
-    monitorCustomBarLineChart
+    monitorCustomBarLineChart,
+    monitorButtonGroup
   },
   model: {
     prop: "value",

@@ -59,7 +59,7 @@ import monitorCustomBarStack from "./monitor/customBarStack";
 import monitorBasicInformationTwo from "./monitor/basicInformationTwo";
 import monitorCustomLineStack from "./monitor/customLineStack";
 import monitorCustomBarLineChart from "./monitor/customBarLineChart";
-
+import monitorButtonGroup from "./monitor/buttonGroup";
 
 export default {
   name: "Widget",
@@ -99,7 +99,8 @@ export default {
     monitorCustomBarStack,
     monitorBasicInformationTwo,
     monitorCustomLineStack,
-    monitorCustomBarLineChart
+    monitorCustomBarLineChart,
+    monitorButtonGroup
   },
   model: {
     prop: "value",