514 lines
10 KiB
Vue
514 lines
10 KiB
Vue
<template>
|
||
<div class="leftTop">
|
||
<Card title="审批数据汇总">
|
||
<div class="diy-title">（近七日）</div>
|
||
<div class="box-content" v-show="showOne">
|
||
<div id="echartsDataCountOne" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
<div class="box-content" v-show="!showOne">
|
||
<div class="change-echart" @click="showOne = true;">
|
||
<el-icon color="#54B5E9" size="22"><ArrowLeft /></el-icon>
|
||
<span>返回</span>
|
||
</div>
|
||
<div id="echartsDataCountTwo" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import Card from "@/components/card.vue";
|
||
import { GlobalStore } from "@/stores";
|
||
import { COMPANY } from "@/config/config";
|
||
import { ref, onMounted, nextTick } from "vue";
|
||
import { getPersonTypeAndEduStatisticsApi } from "@/api/modules/labor";
|
||
import * as echarts from "echarts";
|
||
const store = GlobalStore();
|
||
// ts
|
||
type Props = {
|
||
statisticsCount?: any; // 传入人员数据
|
||
};
|
||
// withDefaults 定义默认值(传入的数据类型同默认值)
|
||
const props = withDefaults(defineProps<Props>(), {
|
||
statisticsCount: {}
|
||
});
|
||
const showOne = ref(true);
|
||
let dataList = ref([
|
||
{
|
||
enumType: "",
|
||
value: 142,
|
||
show: true,
|
||
name: "人员",
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
color: "#59F7CA"
|
||
}
|
||
},
|
||
{
|
||
enumType: "",
|
||
value: 246,
|
||
show: true,
|
||
name: "车辆",
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
color: "#62F2F8"
|
||
}
|
||
},
|
||
{
|
||
enumType: "",
|
||
value: 315,
|
||
show: true,
|
||
name: "材料",
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
color: "#F2BA48"
|
||
}
|
||
},
|
||
{
|
||
enumType: "",
|
||
value: 420,
|
||
show: true,
|
||
name: "访客",
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
color: "#81C4E5"
|
||
}
|
||
},
|
||
{
|
||
enumType: "",
|
||
value: 263,
|
||
show: true,
|
||
name: "特殊作业",
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
color: "#FDFDFC"
|
||
}
|
||
}
|
||
]);
|
||
// 审批数据汇总图形
|
||
const drawOneEchart = () => {
|
||
const echartsOne = echarts.init(document.getElementById("echartsDataCountOne"));
|
||
let option = {
|
||
color: ["#26FFCB", "#24CBFF", "#2651FF"],
|
||
tooltip: {
|
||
trigger: "item"
|
||
},
|
||
series: [
|
||
{
|
||
name: "Access From",
|
||
type: "pie",
|
||
radius: ["40%", "70%"],
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
padding: [0, -50],
|
||
lineHeight: 30,
|
||
color: "#0FD4F1",
|
||
show: true,
|
||
position: "outside", // 标签位置，'outside' 表示标签在扇形外侧
|
||
formatter: "{c|{c}}\n{b|{b}}", // 标签文本格式器，{b} 显示名称，{c} 数据值
|
||
rich: {
|
||
b: {
|
||
fontFamily: "ABeeZee, ABeeZee",
|
||
fontWeight: "400",
|
||
fontSize: 15,
|
||
color: "#FFFFFF"
|
||
},
|
||
c: {
|
||
fontFamily: "ABeeZee, ABeeZee",
|
||
fontWeight: "400",
|
||
fontSize: 21,
|
||
color: "#0FD4F1"
|
||
}
|
||
}
|
||
},
|
||
labelLine: {
|
||
lineStyle: {
|
||
color: "#3FBEFF"
|
||
},
|
||
show: true, // 是否显示标签线
|
||
length: 30, // 标签线长度
|
||
length2: 80 // 第二段标签线长度，默认为长度
|
||
},
|
||
data: [
|
||
{ value: 1048, name: "审批中" },
|
||
{ value: 735, name: "已驳回" },
|
||
{ value: 580, name: "已通过" }
|
||
]
|
||
}
|
||
]
|
||
};
|
||
echartsOne.setOption(option, true);
|
||
window.addEventListener("resize", () => {
|
||
console.log(echartsOne);
|
||
echartsOne.resize();
|
||
});
|
||
|
||
//图例点击事件
|
||
// 为饼图添加点击事件
|
||
echartsOne.on("click", function (params:any) {
|
||
// 控制台输出点击的数据的信息
|
||
console.log(params);
|
||
showOne.value = false;
|
||
nextTick(() => {
|
||
drawTwoEchart();
|
||
})
|
||
// 您可以在这里添加您的逻辑代码
|
||
// 例如：弹出自定义的对话框或者执行其他操作
|
||
});
|
||
};
|
||
// 审批数据汇总图形
|
||
const drawTwoEchart = () => {
|
||
const echartsOne = echarts.init(document.getElementById("echartsDataCountTwo"));
|
||
let option = {
|
||
color: ["#59F7CA", "#62F2F8", "#F2BA48", "#81C4E5", "#FDFDFC"],
|
||
animation: false, // 取消动画
|
||
tooltip: {
|
||
trigger: "item"
|
||
},
|
||
title: {
|
||
text: "9900",
|
||
subtext: "待审批",
|
||
x: "29%",
|
||
y: "40%",
|
||
textAlign: "center",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
fontWeight: "normal",
|
||
// align: "center",
|
||
fontFamily: "ABeeZee, ABeeZee"
|
||
},
|
||
subtextStyle: {
|
||
color: "#9BB7D4",
|
||
fontSize: 16,
|
||
fontWeight: "normal",
|
||
fontFamily: "ABeeZee, ABeeZee"
|
||
// align: "center"
|
||
}
|
||
},
|
||
legend: [
|
||
{
|
||
title: "风险图",
|
||
selectedMode: true, // 取消图例上的点击事件
|
||
icon: "circle",
|
||
type: "plain",
|
||
orient: "vertical",
|
||
right: "10%",
|
||
top: "22%",
|
||
align: "left",
|
||
itemGap: 14,
|
||
itemWidth: 8, // 设置宽度
|
||
itemHeight: 15, // 设置高度
|
||
symbolKeepAspect: false,
|
||
textStyle: {
|
||
color: "#000",
|
||
rich: {
|
||
name: {
|
||
align: "left",
|
||
fontSize: 14,
|
||
color: "#9BB7D4",
|
||
width: 60
|
||
},
|
||
value: {
|
||
align: "left",
|
||
fontSize: 16,
|
||
color: "#9BB7D4"
|
||
},
|
||
value1: {
|
||
align: "left",
|
||
fontSize: 16,
|
||
color: "#FFFFFF"
|
||
}
|
||
}
|
||
},
|
||
data: dataList.value.map((item, index) => {
|
||
if (item.show) {
|
||
return item.name;
|
||
}
|
||
}),
|
||
formatter: function (data: any) {
|
||
if (dataList.value && dataList.value.length) {
|
||
for (let i = 0; i < dataList.value.length; i++) {
|
||
if (data === dataList.value[i].name) {
|
||
if (data == "无") return;
|
||
let value = dataList.value[i].value;
|
||
const greatFaultLevelNumJzrRate = Number(dataList.value[i].greatFaultLevelNumJzrRate);
|
||
let percentage =
|
||
greatFaultLevelNumJzrRate >= 0
|
||
? greatFaultLevelNumJzrRate + "%"
|
||
: greatFaultLevelNumJzrRate.toString().substr(1) + "%";
|
||
return "{name| " + data + "} {gap| }" + `{value|${value}} {gap| } {value1|${percentage}}`;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
// 外侧光线(数据只是用于占位)
|
||
{
|
||
name: "",
|
||
type: "pie",
|
||
radius: [100, 95],
|
||
center: ["30%", "50%"],
|
||
hoverAnimation: false,
|
||
tooltip: {
|
||
trigger: "none" // 内层饼图也设置 tooltip.trigger 为 'none'
|
||
},
|
||
itemStyle: {
|
||
show: false,
|
||
borderRadius: 10,
|
||
borderWidth: 10
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: "center"
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{
|
||
enumType: "",
|
||
value: 5,
|
||
show: true,
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "transparent"
|
||
}
|
||
}
|
||
},
|
||
{
|
||
enumType: "",
|
||
value: 7,
|
||
show: true,
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#F6FCFD"
|
||
}
|
||
}
|
||
},
|
||
{
|
||
enumType: "",
|
||
value: 2,
|
||
show: true,
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "transparent"
|
||
}
|
||
}
|
||
},
|
||
{
|
||
enumType: "",
|
||
value: 24,
|
||
show: true,
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#1FC1DB"
|
||
}
|
||
}
|
||
},
|
||
{
|
||
enumType: "",
|
||
value: 2,
|
||
show: true,
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "transparent"
|
||
}
|
||
}
|
||
},
|
||
{
|
||
enumType: "",
|
||
value: 7,
|
||
show: true,
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#FFFFFF"
|
||
}
|
||
}
|
||
},
|
||
{
|
||
enumType: "",
|
||
value: 3,
|
||
show: true,
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "transparent"
|
||
}
|
||
}
|
||
},
|
||
{
|
||
enumType: "",
|
||
value: 50,
|
||
show: true,
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#1FC1DB"
|
||
}
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name: "",
|
||
type: "pie",
|
||
radius: [60, 80],
|
||
center: ["30%", "50%"],
|
||
hoverAnimation: true,
|
||
itemStyle: {
|
||
borderWidth: 3,
|
||
borderColor: "#000"
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: "center"
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: dataList.value
|
||
},
|
||
{
|
||
type: "pie",
|
||
radius: ["52", "55"],
|
||
center: ["30%", "50%"],
|
||
label: {
|
||
show: false
|
||
},
|
||
tooltip: {
|
||
trigger: "none" // 内层饼图也设置 tooltip.trigger 为 'none'
|
||
},
|
||
data: [
|
||
{
|
||
value: 100,
|
||
itemStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 1,
|
||
y: 0.7,
|
||
x2: 1,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(30,216,246,1)"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(11,37,69,0)"
|
||
}
|
||
],
|
||
global: false
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
echartsOne.setOption(option, true);
|
||
window.addEventListener("resize", () => {
|
||
console.log(echartsOne);
|
||
echartsOne.resize();
|
||
});
|
||
};
|
||
onMounted(async () => {
|
||
drawOneEchart();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.leftTop {
|
||
width: 100%;
|
||
height: 100%;
|
||
.diy-title {
|
||
position: absolute;
|
||
top: 3.5%;
|
||
left: 34%;
|
||
font-family: OPPOSansH;
|
||
font-size: 14px;
|
||
color: #6b7b99;
|
||
letter-spacing: 2px; /* 设置文字间距为2像素 */
|
||
}
|
||
.box-content {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
.change-echart {
|
||
display: flex;
|
||
align-items: center;
|
||
position: absolute;
|
||
top: 3%;
|
||
right: 2%;
|
||
z-index: 10;
|
||
cursor: pointer;
|
||
> span {
|
||
color: white;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
::v-deep .h-card .content {
|
||
height: 80%;
|
||
}
|
||
</style>
|