<template>
  <div class="right_bottom">
    <CapsuleChart
      :config="config"
      style="width: 100%; height: 260px"
      :data="data"
    />
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import CapsuleChart from "@/components/datav/capsule-chart";
import Mock from "mockjs";
import {arraySortByKey} from "@/utils/tools";
const config = ref({
  showValue: true,
  unit: "次",
});
const data = ref<any>([]);
const getData = () => {
  data.value = [
    {
      "name": "公共安全",
      "value": Mock.mock('@integer(1, 100)'),
    },
    {
      "name": "交通管理",
      "value":Mock.mock('@integer(1, 100)')
    },
    {
      "name": "公共服务",
      "value": Mock.mock('@integer(1, 100)')
    },
    {
      "name": "农村管理",
      "value": Mock.mock('@integer(1, 100)')
    },
    {
      "name": "互联互通",
      "value": Mock.mock('@integer(1, 100)'),
    },
    {
      "name": "市场管理",
      "value": Mock.mock('@integer(1, 100)')
    },
    {
      "name": "城市管理",
      "value": Mock.mock('@integer(1, 100)'),
    },
    {
      "name": "非受理范围",
      "value": Mock.mock('@integer(1, 100)'),
    }
  ]
  data.value = arraySortByKey(data.value, "value");
};
onMounted(() => {
  getData();
});
</script>

<style scoped lang="scss">
.right_bottom {
  box-sizing: border-box;
  padding: 0 16px;
}
</style>
