532 lines
11 KiB
Vue
532 lines
11 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, watch } 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;
|
|||
|
|
// 您可以在这里添加您的逻辑代码
|
|||
|
|
// 例如：弹出自定义的对话框或者执行其他操作
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
// 审批数据汇总图形
|
|||
|
|
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();
|
|||
|
|
});
|
|||
|
|
//图例点击事件
|
|||
|
|
// echartsTest.value.on("legendselectchanged", (params: any) => {
|
|||
|
|
// console.log(emits);
|
|||
|
|
// echartsTest.value.setOption({
|
|||
|
|
// legend: { selected: { [params.name]: true } }
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
// emits("openDialog", {
|
|||
|
|
// index: 7,
|
|||
|
|
// title: params.name + "超期未整改",
|
|||
|
|
// majorInfo: {
|
|||
|
|
// isOverdueRectification: 1,
|
|||
|
|
// isNotQualified: 0,
|
|||
|
|
// enumType: dataList.value.find(item => item.name == params.name)?.enumType,
|
|||
|
|
// inspectStartTime: dateRange.value[0],
|
|||
|
|
// inspectEndTime: dateRange.value[1]
|
|||
|
|
// }
|
|||
|
|
// });
|
|||
|
|
// });
|
|||
|
|
};
|
|||
|
|
onMounted(async () => {
|
|||
|
|
drawOneEchart();
|
|||
|
|
drawTwoEchart();
|
|||
|
|
});
|
|||
|
|
</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>
|