430 lines
9.6 KiB
Vue
430 lines
9.6 KiB
Vue
<template>
|
|
<div class="table-box">
|
|
<div class="echart-all">
|
|
<div class="statistics-echart">
|
|
<el-card shadow="never">
|
|
<div class="count-title">人员总数统计</div>
|
|
<div ref="echartsRef" class="card content-box"></div>
|
|
</el-card>
|
|
</div>
|
|
<div class="statistics-echart">
|
|
<el-card shadow="never">
|
|
<div class="count-title">年龄分布</div>
|
|
<div ref="echartsRef2" class="card2 content-box"></div>
|
|
<div class="table">
|
|
<el-table
|
|
:data="ageStatistics"
|
|
class="el-table"
|
|
:header-cell-style="{ backgroundColor: '#D6E7FF', textAlign: 'center' }"
|
|
:cell-style="{ textAlign: 'center' }"
|
|
>
|
|
<el-table-column label="年龄" align="right" width="80">
|
|
<el-table-column prop="type" label="类型" width="80"> </el-table-column>
|
|
</el-table-column>
|
|
<el-table-column prop="data1" label="20岁以下">
|
|
<template #default="scope">
|
|
<span>{{ scope.row.personType == 1 ? "管理" : "工人" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="data2" label="21-30岁" />
|
|
<el-table-column prop="data3" label="31-50岁">
|
|
<template #default="scope">
|
|
<span>{{ scope.row.passType == 1 ? "进入" : "离开" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="data4" label="51-60岁" />
|
|
<el-table-column prop="data5" label="60岁以上" />
|
|
</el-table>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
<div class="statistics-echart">
|
|
<el-card shadow="never">
|
|
<div class="count-title">男女比例</div>
|
|
<div ref="echartsRef3" class="card content-box"></div>
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
<div class="table-all">
|
|
<div class="statistics-table">
|
|
<el-card shadow="never">
|
|
<div class="count-title">在册人员工种统计</div>
|
|
<div class="table">
|
|
<el-table
|
|
:data="workTypeList"
|
|
max-height="340"
|
|
class="el-table"
|
|
:header-cell-style="{ backgroundColor: '#F5F7FA', textAlign: 'center' }"
|
|
:cell-style="{ textAlign: 'center' }"
|
|
>
|
|
<el-table-column prop="company" label="姓名" />
|
|
</el-table>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
<div class="statistics-table">
|
|
<el-card shadow="never">
|
|
<div class="count-title">在册人员地域统计</div>
|
|
<div class="table">
|
|
<el-table
|
|
:data="workTypeList"
|
|
max-height="340"
|
|
class="el-table"
|
|
:header-cell-style="{ backgroundColor: '#F5F7FA', textAlign: 'center' }"
|
|
:cell-style="{ textAlign: 'center' }"
|
|
>
|
|
<el-table-column prop="company" label="姓名" />
|
|
</el-table>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
<div class="statistics-table">
|
|
<el-card shadow="never">
|
|
<div class="count-title">在册人员工民族统计</div>
|
|
<div class="table">
|
|
<el-table
|
|
:data="workTypeList"
|
|
max-height="340"
|
|
class="el-table"
|
|
:header-cell-style="{ backgroundColor: '#F5F7FA', textAlign: 'center' }"
|
|
:cell-style="{ textAlign: 'center' }"
|
|
>
|
|
<el-table-column prop="company" label="姓名" />
|
|
</el-table>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="tsx" name="ProjectSupervisionRecord">
|
|
import { ref, reactive, nextTick, onMounted } from "vue";
|
|
import { ColumnProps } from "@/components/ProTable/interface";
|
|
import * as echarts from "echarts";
|
|
import { useEcharts } from "@/hooks/useEcharts";
|
|
const echartsRef = ref<HTMLElement>();
|
|
const echartsRef2 = ref<HTMLElement>();
|
|
const echartsRef3 = ref<HTMLElement>();
|
|
const ageStatistics = ref([
|
|
{
|
|
type: "在册",
|
|
data1: 9915,
|
|
data2: 9915,
|
|
data3: 9915,
|
|
data4: 9915,
|
|
data5: 9915
|
|
},
|
|
{
|
|
type: "在册",
|
|
data1: 9915,
|
|
data2: 9915,
|
|
data3: 9915,
|
|
data4: 9915,
|
|
data5: 9915
|
|
}
|
|
]);
|
|
const initEcharts1 = () => {
|
|
let myChart: echarts.ECharts = echarts.init(echartsRef.value as HTMLElement);
|
|
let option: echarts.EChartsOption = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "cross",
|
|
crossStyle: {
|
|
color: "#999"
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
left: 60,
|
|
top: 80,
|
|
width: "80%"
|
|
},
|
|
legend: {
|
|
right: 0,
|
|
top: 8,
|
|
data: ["在职", "在册"]
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
|
axisPointer: {
|
|
type: "shadow"
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
name: "单位(人)",
|
|
nameTextStyle: {
|
|
align: "right"
|
|
},
|
|
min: 0,
|
|
max: 250,
|
|
interval: 50
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: "在职",
|
|
type: "bar",
|
|
barWidth: 18,
|
|
itemStyle: {
|
|
borderRadius: [11, 11, 11, 11]
|
|
},
|
|
tooltip: {
|
|
valueFormatter: function (value) {
|
|
return value + " ml";
|
|
}
|
|
},
|
|
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
|
|
},
|
|
{
|
|
name: "在册",
|
|
type: "bar",
|
|
barWidth: 18,
|
|
itemStyle: {
|
|
borderRadius: [11, 11, 11, 11]
|
|
},
|
|
tooltip: {
|
|
valueFormatter: function (value) {
|
|
return value + " ml";
|
|
}
|
|
},
|
|
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
|
|
}
|
|
]
|
|
};
|
|
useEcharts(myChart, option);
|
|
};
|
|
const initEcharts2 = () => {
|
|
let myChart: echarts.ECharts = echarts.init(echartsRef2.value as HTMLElement);
|
|
let option: echarts.EChartsOption = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "cross",
|
|
crossStyle: {
|
|
color: "#999"
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
left: 60,
|
|
top: 80,
|
|
width: "80%",
|
|
height: "66%"
|
|
},
|
|
legend: {
|
|
right: 0,
|
|
top: 8,
|
|
data: ["在职", "在册"]
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
|
axisPointer: {
|
|
type: "shadow"
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
name: "单位(人)",
|
|
nameTextStyle: {
|
|
align: "right"
|
|
},
|
|
min: 0,
|
|
max: 250,
|
|
interval: 50
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: "在职",
|
|
type: "bar",
|
|
barWidth: 18,
|
|
itemStyle: {
|
|
borderRadius: [11, 11, 11, 11]
|
|
},
|
|
tooltip: {
|
|
valueFormatter: function (value) {
|
|
return value + " ml";
|
|
}
|
|
},
|
|
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
|
|
},
|
|
{
|
|
name: "在册",
|
|
type: "bar",
|
|
barWidth: 18,
|
|
itemStyle: {
|
|
borderRadius: [11, 11, 11, 11]
|
|
},
|
|
tooltip: {
|
|
valueFormatter: function (value) {
|
|
return value + " ml";
|
|
}
|
|
},
|
|
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
|
|
}
|
|
]
|
|
};
|
|
useEcharts(myChart, option);
|
|
};
|
|
const initEcharts3 = () => {
|
|
let myChart: echarts.ECharts = echarts.init(echartsRef3.value as HTMLElement);
|
|
let option: echarts.EChartsOption = {
|
|
tooltip: {
|
|
trigger: "item"
|
|
},
|
|
legend: {
|
|
right: 0,
|
|
top: 8,
|
|
data: ["男性", "女性"]
|
|
},
|
|
series: [
|
|
{
|
|
name: "Access From",
|
|
type: "pie",
|
|
radius: ["40%", "30%"],
|
|
avoidLabelOverlap: true,
|
|
label: {
|
|
show: true,
|
|
position: "outside",
|
|
formatter: "{b}: {d}% {c}人"
|
|
},
|
|
data: [
|
|
{ value: 1048, name: "男性" },
|
|
{ value: 735, name: "女性" }
|
|
]
|
|
}
|
|
]
|
|
};
|
|
useEcharts(myChart, option);
|
|
};
|
|
const workTypeList = ref([{ company: 123 }]);
|
|
onMounted(() => {
|
|
initEcharts1();
|
|
initEcharts2();
|
|
initEcharts3();
|
|
});
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.table-box {
|
|
.echart-all {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.statistics-echart {
|
|
width: 546px;
|
|
min-width: 546px;
|
|
height: 556px;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
:deep(.el-card) {
|
|
min-width: 546px;
|
|
height: 556px;
|
|
}
|
|
.count-title {
|
|
position: absolute;
|
|
left: 30px;
|
|
top: 26px;
|
|
z-index: 1000;
|
|
font-size: 20px;
|
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
border-left: 2px solid #008bff;
|
|
padding-left: 5px;
|
|
}
|
|
.card {
|
|
width: 100%;
|
|
height: 530px;
|
|
padding: 0;
|
|
}
|
|
.card2 {
|
|
width: 100%;
|
|
height: 350px;
|
|
padding: 0;
|
|
}
|
|
.table {
|
|
:deep(.el-table thead.is-group th) {
|
|
background: none;
|
|
padding: 0px;
|
|
}
|
|
:deep(.el-table thead.is-group tr:first-of-type th:first-of-type) {
|
|
border-bottom: none;
|
|
}
|
|
:deep(.el-table thead.is-group tr:first-of-type th:first-of-type div.cell) {
|
|
text-align: right;
|
|
}
|
|
:deep(.el-table thead.is-group tr:last-of-type th:first-of-type div.cell) {
|
|
text-align: left;
|
|
}
|
|
// :deep(.el-table thead.is-group tr:first-of-type th:first-of-type:before) {
|
|
// content: "";
|
|
// position: absolute;
|
|
// width: 1px;
|
|
// height: 85px;
|
|
// top: 1px;
|
|
// left: 0;
|
|
// background-color: grey;
|
|
// opacity: 0.2;
|
|
// display: block;
|
|
// transform: rotate(-71deg);
|
|
// -webkit-transform-origin: top;
|
|
// transform-origin: top;
|
|
// }
|
|
:deep(.el-table thead.is-group tr:last-of-type th:first-of-type:before) {
|
|
content: "";
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 93px; /*斜线的长度*/
|
|
bottom: 0;
|
|
right: 0;
|
|
background-color: grey;
|
|
opacity: 0.2;
|
|
display: block;
|
|
transform: rotate(-56deg); /*调整斜线的角度*/
|
|
-webkit-transform-origin: bottom;
|
|
transform-origin: bottom;
|
|
}
|
|
:deep(.el-table thead.is-group th) {
|
|
height: 27.4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.table-all {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.statistics-table {
|
|
width: 546px;
|
|
min-width: 546px;
|
|
height: 556px;
|
|
margin-bottom: 20px;
|
|
:deep(.el-card) {
|
|
min-width: 546px;
|
|
height: 556px;
|
|
}
|
|
.count-title {
|
|
font-size: 20px;
|
|
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
border-left: 2px solid #008bff;
|
|
padding-left: 5px;
|
|
}
|
|
.table {
|
|
margin-top: 22px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|