|
|
@@ -2,17 +2,27 @@
|
|
|
<div class="left_bottom">
|
|
|
<div class="left_bottom-title flex">
|
|
|
<div class="flex items-center">
|
|
|
- <img src="@/assets/img/home/title_arrow.png" alt="">
|
|
|
+ <img src="@/assets/img/home/title_arrow.png" alt="" />
|
|
|
占比分析
|
|
|
</div>
|
|
|
<div class="left_bottom-title-tabs">
|
|
|
- <span :class="{active: activeIndex === 0}" class="mr-5 left_bottom-title-tabs-item" @click="change(0)">来源方式</span>
|
|
|
- <span :class="{active: activeIndex === 1}" class="left_bottom-title-tabs-item" @click="change(1)">受理类型</span>
|
|
|
+ <span
|
|
|
+ :class="{ active: activeIndex === 0 }"
|
|
|
+ class="mr-5 left_bottom-title-tabs-item"
|
|
|
+ @click="change(0)"
|
|
|
+ >来源方式</span
|
|
|
+ >
|
|
|
+ <!-- <span :class="{active: activeIndex === 1}" class="left_bottom-title-tabs-item" @click="change(1)" @click="change(0)">受理类型</span>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="left_bottom-content">
|
|
|
<template v-if="dataList.length">
|
|
|
- <v-chart class="chart" :option="option" :loading="loading" :loading-options="loadingOptions"/>
|
|
|
+ <v-chart
|
|
|
+ class="chart"
|
|
|
+ :option="option"
|
|
|
+ :loading="loading"
|
|
|
+ :loading-options="loadingOptions"
|
|
|
+ />
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
<EmptyCom></EmptyCom>
|
|
|
@@ -21,54 +31,65 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
-import {ref, onMounted, watch, computed} from "vue";
|
|
|
+import { ref, onMounted, watch, computed } from "vue";
|
|
|
import dayjs from "dayjs";
|
|
|
import EmptyCom from "@/components/empty-com";
|
|
|
-import {loadingOptions} from "@/utils/constants";
|
|
|
-import {rightBottomData} from "api/judicial";
|
|
|
+import { loadingOptions } from "@/utils/constants";
|
|
|
+import { rightBottomData } from "api/judicial";
|
|
|
|
|
|
const props = defineProps({
|
|
|
dateArray: {
|
|
|
type: Array,
|
|
|
- default: () => []
|
|
|
- }
|
|
|
-})
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+});
|
|
|
const date = ref([]);
|
|
|
-watch(() => props.dateArray, (val: any) => {
|
|
|
- date.value = val;
|
|
|
-}, {immediate: true})
|
|
|
+watch(
|
|
|
+ () => props.dateArray,
|
|
|
+ (val: any) => {
|
|
|
+ date.value = val;
|
|
|
+ },
|
|
|
+ { immediate: true }
|
|
|
+);
|
|
|
|
|
|
-watch(() => props.dateArray, (val: any) => {
|
|
|
- getData();
|
|
|
-})
|
|
|
+watch(
|
|
|
+ () => props.dateArray,
|
|
|
+ (val: any) => {
|
|
|
+ getData();
|
|
|
+ }
|
|
|
+);
|
|
|
|
|
|
const activeIndex = ref(0);
|
|
|
const option = ref<any>({});
|
|
|
const activeText = computed(() => {
|
|
|
- return activeIndex.value === 0 ? '来源占比' : '类型占比';
|
|
|
+ return activeIndex.value === 0 ? "来源占比" : "类型占比";
|
|
|
});
|
|
|
const change = (index: number) => {
|
|
|
- activeIndex.value = index;
|
|
|
- getData();
|
|
|
+ /* activeIndex.value = index;
|
|
|
+ getData();*/
|
|
|
};
|
|
|
-const dataList = ref([])
|
|
|
+const dataList = ref([]);
|
|
|
const loading = ref(false);
|
|
|
const getData = async () => {
|
|
|
loading.value = true;
|
|
|
try {
|
|
|
- const {result} = await rightBottomData({
|
|
|
- StartTime: dayjs(date.value[0]).format('YYYY-MM-DD'),
|
|
|
- EndTime: dayjs(date.value[1]).format('YYYY-MM-DD'),
|
|
|
- IsSource: activeIndex.value === 0
|
|
|
+ const { result } = await rightBottomData({
|
|
|
+ StartTime: dayjs(date.value[0]).format("YYYY-MM-DD"),
|
|
|
+ EndTime: dayjs(date.value[1]).format("YYYY-MM-DD"),
|
|
|
+ IsSource: activeIndex.value === 0,
|
|
|
});
|
|
|
- const legEndTime = result.map((item: any) => item.name).filter((item: any) => item);
|
|
|
- dataList.value = result.map((item: any) => {
|
|
|
- return {
|
|
|
- name: item.name ?? '',
|
|
|
- value: item.hasCount,
|
|
|
- ...item
|
|
|
- }
|
|
|
- }).filter((item: any) => item.name)
|
|
|
+ const legEndTime = result
|
|
|
+ .map((item: any) => item.name)
|
|
|
+ .filter((item: any) => item);
|
|
|
+ dataList.value = result
|
|
|
+ .map((item: any) => {
|
|
|
+ return {
|
|
|
+ name: item.name ?? "",
|
|
|
+ value: item.hasCount,
|
|
|
+ ...item,
|
|
|
+ };
|
|
|
+ })
|
|
|
+ .filter((item: any) => item.name);
|
|
|
setOption(legEndTime, dataList.value);
|
|
|
loading.value = false;
|
|
|
} catch (e) {
|
|
|
@@ -77,137 +98,137 @@ const getData = async () => {
|
|
|
}
|
|
|
};
|
|
|
const setOption = (legEndTime: any, data: any) => {
|
|
|
- option.value =
|
|
|
+ option.value = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ type: "scroll",
|
|
|
+ pageIconColor: "#fff",
|
|
|
+ pageIconInactiveColor: "#333",
|
|
|
+ height: "180",
|
|
|
+ icon: "circle",
|
|
|
+ top: "center",
|
|
|
+ right: "0",
|
|
|
+ orient: "vertical",
|
|
|
+ itemGap: 20,
|
|
|
+ data: legEndTime,
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ formatter: (name) => {
|
|
|
+ const item = dataList.value.find((item) => item.name == name);
|
|
|
+ const len = name.length;
|
|
|
+ let str = "";
|
|
|
+ if (len > 5) {
|
|
|
+ name = name.slice(0, 8) + "...";
|
|
|
+ } else {
|
|
|
+ name = name + str;
|
|
|
+ }
|
|
|
+ return `${name} ${item.hasRate}% (${item.hasCount}件)`; //返回出图例所显示的内容是名称+百分比
|
|
|
+ },
|
|
|
+ },
|
|
|
+ graphic: [
|
|
|
{
|
|
|
- tooltip: {
|
|
|
- trigger: 'item'
|
|
|
+ type: "text",
|
|
|
+ z: 100,
|
|
|
+ left: "23%",
|
|
|
+ top: "40%",
|
|
|
+ style: {
|
|
|
+ fill: "#fff",
|
|
|
+ text: "100%",
|
|
|
+ font: "28px Microsoft YaHei",
|
|
|
},
|
|
|
- legend: {
|
|
|
- type: 'scroll',
|
|
|
- pageIconColor: '#fff',
|
|
|
- pageIconInactiveColor: '#333',
|
|
|
- height: '180',
|
|
|
- icon: 'circle',
|
|
|
- top: 'center',
|
|
|
- right: '0',
|
|
|
- orient: "vertical",
|
|
|
- itemGap: 20,
|
|
|
- data: legEndTime,
|
|
|
- textStyle: {
|
|
|
- color: '#fff',
|
|
|
- fontSize: 14,
|
|
|
- },
|
|
|
- formatter: name => {
|
|
|
- const item = dataList.value.find(item => item.name == name)
|
|
|
- const len = name.length;
|
|
|
- let str = ''
|
|
|
- if (len > 5) {
|
|
|
- name = name.slice(0, 8) + '...';
|
|
|
- } else {
|
|
|
- name = name + str;
|
|
|
- }
|
|
|
- return `${name} ${item.hasRate}% (${item.hasCount}件)`; //返回出图例所显示的内容是名称+百分比
|
|
|
- }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "text",
|
|
|
+ z: 100,
|
|
|
+ left: "24%",
|
|
|
+ top: "56%",
|
|
|
+ style: {
|
|
|
+ fill: "#fff",
|
|
|
+ text: activeText.value,
|
|
|
+ font: "16px Microsoft YaHei",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ type: "gauge",
|
|
|
+ splitNumber: 10,
|
|
|
+ radius: "65%",
|
|
|
+ center: ["30%", "50%"],
|
|
|
+ startAngle: 0,
|
|
|
+ endAngle: 360,
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
},
|
|
|
- graphic: [
|
|
|
- {
|
|
|
- type: 'text',
|
|
|
- z: 100,
|
|
|
- left: '23%',
|
|
|
- top: '40%',
|
|
|
- style: {
|
|
|
- fill: '#fff',
|
|
|
- text: '100%',
|
|
|
- font: '28px Microsoft YaHei',
|
|
|
- }
|
|
|
- }, {
|
|
|
- type: 'text',
|
|
|
- z: 100,
|
|
|
- left: '24%',
|
|
|
- top: '56%',
|
|
|
- style: {
|
|
|
- fill: '#fff',
|
|
|
- text: activeText.value,
|
|
|
- font: '16px Microsoft YaHei'
|
|
|
- }
|
|
|
- }],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '',
|
|
|
- type: 'gauge',
|
|
|
- splitNumber: 10,
|
|
|
- radius: '65%',
|
|
|
- center: ['30%', '50%'],
|
|
|
- startAngle: 0,
|
|
|
- endAngle: 360,
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- width: 4,
|
|
|
- },
|
|
|
- length: 8,
|
|
|
- splitNumber: 3
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- detail: {
|
|
|
- show: false
|
|
|
- }
|
|
|
+ axisTick: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ width: 4,
|
|
|
},
|
|
|
- {
|
|
|
- name: "数量",//内部圆
|
|
|
- type: "pie",
|
|
|
- animation: false,
|
|
|
- clockwise: false,
|
|
|
- radius: "38%",
|
|
|
- center: ["30%", "50%"],
|
|
|
- data: [10],
|
|
|
- itemStyle: {
|
|
|
- color: '#082141',
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
-
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- show: false,
|
|
|
- textStyle: {
|
|
|
- fontSize: "14",
|
|
|
- },
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
+ length: 8,
|
|
|
+ splitNumber: 3,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "数量", //内部圆
|
|
|
+ type: "pie",
|
|
|
+ animation: false,
|
|
|
+ clockwise: false,
|
|
|
+ radius: "38%",
|
|
|
+ center: ["30%", "50%"],
|
|
|
+ data: [10],
|
|
|
+ itemStyle: {
|
|
|
+ color: "#082141",
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ show: false,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: "14",
|
|
|
},
|
|
|
- {
|
|
|
- name: '',
|
|
|
- type: 'pie',
|
|
|
- radius: ['55%', '80%'],
|
|
|
- center: ['30%', '50%'],
|
|
|
- avoidLabelOverlap: false,
|
|
|
- itemStyle: {
|
|
|
- borderRadius: 0,
|
|
|
- borderColor: '#050D0E',
|
|
|
- borderWidth: 10,
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- formatter: '{b}：{d}%', // 用来换行
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- data: data
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "",
|
|
|
+ type: "pie",
|
|
|
+ radius: ["55%", "80%"],
|
|
|
+ center: ["30%", "50%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 0,
|
|
|
+ borderColor: "#050D0E",
|
|
|
+ borderWidth: 10,
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ formatter: "{b}：{d}%", // 用来换行
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ data: data,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
};
|
|
|
onMounted(() => {
|
|
|
getData();
|
|
|
@@ -225,7 +246,7 @@ onMounted(() => {
|
|
|
|
|
|
&-tabs {
|
|
|
font-size: 14px;
|
|
|
- color: #7DBDEC;
|
|
|
+ color: #7dbdec;
|
|
|
|
|
|
&-item {
|
|
|
padding: 5px 10px;
|
|
|
@@ -234,8 +255,8 @@ onMounted(() => {
|
|
|
}
|
|
|
|
|
|
.active {
|
|
|
- color: #B4D7EC;
|
|
|
- border: 1px solid #B4D7EC;
|
|
|
+ color: #b4d7ec;
|
|
|
+ border: 1px solid #b4d7ec;
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
}
|
|
|
@@ -244,4 +265,4 @@ onMounted(() => {
|
|
|
height: calc(100% - 40px);
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
zhangchong