hotline-bs/src/views/judicial/right-center.vue

<template>
  <div class="right_center">
    <div class="right_center-title">
      <div class="flex items-center">
        <img src="@/assets/img/home/title_arrow.png" alt="" />
        问题类型统计
      </div>
    </div>
    <div class="right_center-content h100">
      <template v-if="list.length">
        <v-chart
          class="chart"
          :option="option"
          :loading="loading"
          :loading-options="loadingOptions"
        />
      </template>
      <empty v-else />
    </div>
  </div>
</template>
<script setup lang="ts">
import { defineAsyncComponent, onMounted, ref, watch } from "vue";
import { loadingOptions } from "@/utils/constants";
import { problemType } from "@/api/judicial";
import dayjs from "dayjs";
import mittBus from "@/utils/mitt";

const Empty = defineAsyncComponent(
  () => import("@/components/Empty/index.vue")
);

const props = defineProps({
  dateArray: {
    type: Array,
    default: () => [],
  },
});
const date = ref([]);
watch(
  () => props.dateArray,
  (val: any) => {
    date.value = val;
  },
  { immediate: true }
);

watch(
  () => props.dateArray,
  (val: any) => {
    getData();
  }
);

const list = ref<any>([]);
const loading = ref(false);
const option = ref<any>({});
const AreaCode = ref(null);
const getData = async () => {
  loading.value = true;
  try {
    const { result } = await problemType({
      StartTime: dayjs(date.value[0]).format("YYYY-MM-DD"),
      EndTime: dayjs(date.value[1]).format("YYYY-MM-DD"),
      AreaCode: AreaCode.value,
    });
    /*    const result = [
      {
        eventTypeName: "不作为",
        count: 5,
      },
      {
        eventTypeName: "乱作为",
        count: 10,
      },
      {
        eventTypeName: "程序不规范",
        count: 6,
      },
      {
        eventTypeName: "结果不公正",
        count: 12,
      },
    ];*/
    const xData = result.map((item: any) => {
      return item.eventTypeName;
    });
    list.value = result.map((item: any) => {
      return item.count;
    });
    setOption(xData, list.value);
    loading.value = false;
  } catch (e) {
    loading.value = false;
    console.log(e);
  }
};
const setOption = (xData: any, data: any) => {
  option.value = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "5%",
      right: "5%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: xData,
      axisLabel: {
        color: "#fff",
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#fff",
      },
    },
    series: [
      {
        data: data,
        type: "bar",
        barWidth: "20",
      },
    ],
  };
};
onMounted(() => {
  getData();
  mittBus.on("SelectArea", (data: any) => {
    AreaCode.value = data.areaCode;
    getData();
  });
});
</script>
<style scoped lang="scss">
.right_center {
  &-content {
    margin-top: 15px;
    height: 100%;
  }

  &-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 20px;
  }
}
</style>