feat: 封装按钮组

src/components/LegendLabel/index.vue

@@ -1,6 +1,7 @@
 <template >
   <div class="legend-label">
-    <LegendItem v-for="(item,index) in reverse ? data.reverse() : data"
+    <LegendItem v-for="(item,index) in realData"
+      :key="index"
       :color="item.color || item.itemStyle.color"
       :name="item.name"
       :percent="item.value / total * 100"
@@ -53,14 +54,15 @@ export default {
     }
   },
   data() {
-    return {}
-  },
-  computed: {
-    total() {
-      return this.data.reduce((total, item) => total + item.value, 0)
+    this.realData =  this.data
+    return {
+      total: 1,
     }
   },
-  methods: {}
+  created() {
+    this.realData = this.reverse ? this.data.reverse() : this.data
+    this.total = this.data.reduce((total, item) => total + item.value, 0)
+  }
 }
 </script>
 

src/views/main/components/Button.vue

@@ -0,0 +1,43 @@
+<template >
+  <button v-bind="$attrs" v-on="$listeners" :class="active ? ['custom-button', 'active'] : ['custom-button']">
+    <slot />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'Button',
+  props: {
+    active: {
+      type: Boolean,
+      default: () => false
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang='less'>
+.custom-button {
+  color: #fff;
+  font-size: 12px;
+  padding: 2px 10px;
+  border: 2px solid;
+  background-color: transparent;
+  border-color: #192A66;
+  cursor: pointer;
+  
+  &:active{
+    .active();
+  }
+
+  &:hover {
+    .active();
+  }
+}
+
+.active {
+  border-image-source: linear-gradient(to right,#054b99 0%, #00f6ff 100%);
+  border-image-slice: 1;
+}
+</style>

src/views/main/components/ButtonGroup.vue

@@ -0,0 +1,51 @@
+<template >
+  <div class="button-group">
+    <Button 
+      v-for="item in buttons"
+      :key="item.key"
+      :active="item.key === active"
+      @click="() => onClickHandler(item)"
+    >
+    {{item.name}}
+    </Button>
+  </div>
+</template>
+
+<script>
+import Button from './Button.vue'
+
+export default {
+  name: 'ButtonGroup',
+  props: {
+    default: {
+      type: String
+    },
+    buttons: {
+      type: Array,
+      default: () => []
+    }
+  },
+  components: {
+    Button
+  },
+  data() {
+    return {
+      active: this.default || this.buttons[0].key
+    }
+  },
+  methods: {
+    onClickHandler(item) {
+      this.active = item.key
+      this.$emit('click', item)
+    }
+  }
+}
+</script>
+
+<style scoped lang='less'>
+.button-group {
+  .custom-button {
+    margin-right: 5px;
+  }
+}
+</style>

src/views/main/modules/left/DeviceStateChart.vue

@@ -69,12 +69,8 @@ export default {
                 color: '#1DD2F9'
               }
             }
-          ]
-    }
-  },
-  computed: {
-    options() {
-      return {
+          ],
+      options: {
         polar: {
           radius: [10, '80%']
         },
@@ -114,7 +110,43 @@ export default {
         series: {
           type: 'bar',
           showBackground: true,
-          data: this.data,
+          data: [
+            {
+              name: '其他',
+              value: 2,
+              itemStyle: {
+                color: '#EC1F84'
+              }
+            },
+            {
+              name: '异常设备',
+              value: 3,
+              itemStyle: {
+                color: '#3C1FEC'
+              }
+            },
+            {
+              name: '正常设备',
+              value: 4,
+              itemStyle: {
+                color: '#F9941D'
+              }
+            },
+            {
+              name: '离线设备',
+              value: 5,
+              itemStyle: {
+                color: '#1DF9C8'
+              }
+            },
+            {
+              name: '在线设备',
+              value: 6,
+              itemStyle: {
+                color: '#1DD2F9'
+              }
+            }
+          ],
           coordinateSystem: 'polar',
           barWidth: 4,
         }

src/views/main/modules/right/index.vue

@@ -1,15 +1,57 @@
 <template >
-  <div style="color: #fff;background-color:#631889;">Right</div>
+  <div style="color: #fff;">
+    <ContainerBorder title="隐患处理排行榜">
+      <ButtonGroup :buttons="buttons" @click="onClickHander">
+        按钮
+      </ButtonGroup>
+    </ContainerBorder>
+    <ContainerBorder title="今日隐患处理结果占比">
+      11
+    </ContainerBorder>
+  </div>
 </template>
 
 <script>
+import { ContainerBorder } from '@/components'
+import ButtonGroup from '../../components/ButtonGroup.vue'
 
 export default {
   name: 'Main.Right',
+  components: {
+    ContainerBorder,
+    ButtonGroup
+  },
+  provide() {
+    return {
+      pos: 'right'
+    }
+  },
   data() {
-    return {}
+    return {
+      buttons: [
+        {
+          name: '当日',
+          key: 'today',
+          params: '[当日] 参数'
+        },
+        {
+          name: '近一周',
+          key: 'week',
+          params: '[近一周] 参数'
+        },
+        {
+          name: '近一月',
+          key: 'mouth',
+          params: '[近一月] 参数'
+        }
+      ]
+    }
   },
-  methods: {}
+  methods: {
+    onClickHander: (data) => {
+      console.log('click', data)
+    }
+  }
 }
 </script>