|
|
@@ -1,13 +1,376 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- 安全
|
|
|
+ <div class="w-full h-full relative flex justify-between items-center">
|
|
|
+ <!-- 左侧面板 -->
|
|
|
+ <Panel>
|
|
|
+ <CardTitle>安全问题状态</CardTitle>
|
|
|
+
|
|
|
+ <div class="w-full h-200px flex gap-25px">
|
|
|
+ <chart :options="getPieOptions(data)" />
|
|
|
+ <div class="flex flex-col justify-center items-center pr-20px">
|
|
|
+ <div
|
|
|
+ v-for="item in data"
|
|
|
+ :key="item.name"
|
|
|
+ class="w-200px flex justify-between items-center border-b border-b-dashed border-b-[#ccc] h-40px"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :style="{ borderColor: item.color }"
|
|
|
+ class="w-10px h-10px border-2 border-solid rounded-full mr-2 block"
|
|
|
+ ></span>
|
|
|
+ <span class="w-120px font-bold">{{ item.name }}</span>
|
|
|
+ <span class="font-bold italic">{{ item.value }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <CardTitle>安全问题类型</CardTitle>
|
|
|
+ <div class="w-full h-250px flex gap-10px p-10px box-border justify-between items-center">
|
|
|
+ <div class="bg-[rgba(29,66,110,0.6)] text-white w-full h-full flex-col flex-1">
|
|
|
+ <div
|
|
|
+ class="h-30px flex items-center justify-center border-b border-b-solid border-b-[#ccc] text-17px"
|
|
|
+ >
|
|
|
+ 总计
|
|
|
+ </div>
|
|
|
+ <div class="w-full flex flex-col justify-center items-center h-[calc(100%-30px)]">
|
|
|
+ <img src="@/assets/images/bg-security.png" class="w-60px h-60px" />
|
|
|
+ <!-- <span class="font-bold italic text-20px color-[#31E4CF] mt-30px">1132</span> -->
|
|
|
+ <DigitalFlop :config="config5" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bg-[rgba(29,66,110,0.6)] text-white h-full w-260px left-board">
|
|
|
+ <ScrollBoard :config="config" @mouseover="mouseoverHandler" @click="clickHandler" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <CardTitle>安全问题排名</CardTitle>
|
|
|
+ <div class="text-white h-350px w-full pt-10px left-bottom-board">
|
|
|
+ <ScrollBoard :config="config1" @mouseover="mouseoverHandler" @click="clickHandler" />
|
|
|
+ </div>
|
|
|
+ </Panel>
|
|
|
+
|
|
|
+ <!-- 中间区域 -->
|
|
|
+ <div
|
|
|
+ class="h-full box-border pr-10px pl-10px middle-content flex-1 flex flex-col gap-10px justify-center"
|
|
|
+ >
|
|
|
+ <div class="">
|
|
|
+ <CardTitle>安全教育培训</CardTitle>
|
|
|
+ <div class="text-white h-470px w-full center-board">
|
|
|
+ <ScrollBoard :config="config2" @mouseover="mouseoverHandler" @click="clickHandler" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右侧面板 -->
|
|
|
+ <Panel>
|
|
|
+ <CardTitle>安全问题通报</CardTitle>
|
|
|
+ <div class="text-white h-400px w-full center-board right-top-board">
|
|
|
+ <ScrollBoard :config="config3" @mouseover="mouseoverHandler" @click="clickHandler" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <CardTitle>分包问题数量统计</CardTitle>
|
|
|
+ <div class="w-full box-border p-10px h-450px">
|
|
|
+ <ScrollRankingBoard :config="config4" />
|
|
|
+ </div>
|
|
|
+ </Panel>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
+import { reactive } from 'vue';
|
|
|
+import { ScrollBoard, ScrollRankingBoard, DigitalFlop } from '@kjgl77/datav-vue3';
|
|
|
+import Panel from '@/components/Panel.vue';
|
|
|
+import CardTitle from '@/components/CardTitle.vue';
|
|
|
+import Chart from '@/components/Chart/index.vue';
|
|
|
+import type { EChartsOption } from 'echarts';
|
|
|
+
|
|
|
+type DataItem = {
|
|
|
+ name: string;
|
|
|
+ value: number;
|
|
|
+ color: string;
|
|
|
+};
|
|
|
+
|
|
|
+const total = 1132;
|
|
|
+const data = [
|
|
|
+ { name: '未整改', value: 280, color: '#f56c6c' },
|
|
|
+ { name: '整改中', value: 320, color: '#409EFF' },
|
|
|
+ { name: '整改完成', value: 532, color: '#67C23A' },
|
|
|
+];
|
|
|
+const getPieOptions = (data: DataItem[]): EChartsOption => {
|
|
|
+ return {
|
|
|
+ series: [
|
|
|
+ // 外层主环
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['65%', '90%'],
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ data: data.map((item) => ({
|
|
|
+ value: item.value,
|
|
|
+ name: item.name,
|
|
|
+ itemStyle: { color: item.color },
|
|
|
+ })),
|
|
|
+ label: { show: false },
|
|
|
+ labelLine: { show: false },
|
|
|
+ },
|
|
|
+ // 单条虚线环
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['59.5%', '70%'],
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ silent: true,
|
|
|
+ z: 1,
|
|
|
+ itemStyle: {
|
|
|
+ color: 'transparent',
|
|
|
+ borderColor: '#00d9ff',
|
|
|
+ borderWidth: 2,
|
|
|
+ borderType: 'dashed',
|
|
|
+ },
|
|
|
+ label: { show: false },
|
|
|
+ data: [{ value: 1 }],
|
|
|
+ },
|
|
|
+ // 中间数字
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['0%', '55%'],
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ silent: true,
|
|
|
+ label: {
|
|
|
+ position: 'center',
|
|
|
+ formatter: `{c|${total}}`,
|
|
|
+ rich: {
|
|
|
+ c: {
|
|
|
+ fontSize: 36,
|
|
|
+ fontWeight: 600,
|
|
|
+ color: '#00d9ff',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [{ value: 1, itemStyle: { color: 'transparent' } }],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+const config = reactive({
|
|
|
+ header: ['名称', '数量'],
|
|
|
+ data: [
|
|
|
+ ['高处作业安全', '253'],
|
|
|
+ ['机械使用', '209'],
|
|
|
+ ['电气安全', '320'],
|
|
|
+ ['消防安全', '123'],
|
|
|
+ ['特种设备', '642'],
|
|
|
+ ['xxxx', '234'],
|
|
|
+ ['xxx', '667'],
|
|
|
+ ['xxx', '334'],
|
|
|
+ ['xxx', '234'],
|
|
|
+ ['xxx', '567'],
|
|
|
+ ],
|
|
|
+ index: false,
|
|
|
+ headerBGC: 'rgba(29, 66, 110, 0.6)',
|
|
|
+ evenRowBGC: 'rgba(29, 66, 110, 0.6)',
|
|
|
+ oddRowBGC: 'rgba(52, 139, 199, 0.0980392156862745)',
|
|
|
+ align: ['center', 'center'],
|
|
|
+ headerHeight: 30,
|
|
|
+ rowNum: 5,
|
|
|
+ waitTime: 5000,
|
|
|
+});
|
|
|
+
|
|
|
+const config1 = reactive({
|
|
|
+ data: [
|
|
|
+ ['高处作业安全', '253'],
|
|
|
+ ['机械使用', '209'],
|
|
|
+ ['电气安全', '320'],
|
|
|
+ ['消防安全', '123'],
|
|
|
+ ['特种设备', '642'],
|
|
|
+ ['xxxx', '234'],
|
|
|
+ ['xxx', '667'],
|
|
|
+ ['xxx', '334'],
|
|
|
+ ['xxx', '234'],
|
|
|
+ ['xxx', '567'],
|
|
|
+ ],
|
|
|
+ evenRowBGC: 'rgba(29, 66, 110, 0.6)',
|
|
|
+ oddRowBGC: 'rgba(52, 139, 199, 0.0980392156862745)',
|
|
|
+ align: ['center', 'left', 'center'],
|
|
|
+ index: true,
|
|
|
+ columnWidth: [50, 300],
|
|
|
+ rowNum: 6,
|
|
|
+ waitTime: 50005000,
|
|
|
+});
|
|
|
+
|
|
|
+const config2 = reactive({
|
|
|
+ header: ['培训内容', '培训分部', '培训时间', '培训人数'],
|
|
|
+ data: [
|
|
|
+ ['《筑牢安全防线：施工安全基础1培训》', '部门一', '2023-12-11', '12'],
|
|
|
+ ['《筑牢安全防线：施工安全基础2培训》', '部门一', '2023-12-11', '12'],
|
|
|
+ ['《筑牢安全防线：施工安全基础3培训》', '部门一', '2023-12-11', '12'],
|
|
|
+ ['《筑牢安全防线：施工安全基础4培训》', '部门一', '2023-12-11', '12'],
|
|
|
+ ['《筑牢安全防线：施工安全基234础培训》', '部门一', '2023-12-11', '12'],
|
|
|
+ ['《筑牢安全防线：施工安全基础234培训》', '部门一', '2023-12-11', '12'],
|
|
|
+ ['《筑牢安全防线：施工安全基础5培训》', '部门一', '2023-12-11', '12'],
|
|
|
+ ['《筑牢安全防线：施工安全基础23培训》', '部门一', '2023-12-11', '12'],
|
|
|
+ ['《筑牢安全防线：施工安全基础445培训》', '部门一', '2023-12-11', '12'],
|
|
|
+ ['《筑牢安全防线：施工安全基础5培训》', '部门一', '2023-12-11', '12'],
|
|
|
+ ['《筑牢安全防线：施工安全基础3培训》', '部门一', '2023-12-11', '12'],
|
|
|
+ ['《筑牢安全防线：施工安全基234础培训》', '部门一', '2023-12-11', '12'],
|
|
|
+ ['《筑牢安全防线：施工安全基础6培训》', '部门一', '2023-12-11', '12'],
|
|
|
+ ],
|
|
|
+ index: false,
|
|
|
+ headerBGC: 'rgba(29, 66, 110, 0.6)',
|
|
|
+ evenRowBGC: 'rgba(52, 139, 199, 0.298039215686275)',
|
|
|
+ oddRowBGC: 'rgba(52, 139, 199, 0.0980392156862745)',
|
|
|
+ align: ['left', 'center', 'center', 'center'],
|
|
|
+ columnWidth: [500],
|
|
|
+ headerHeight: 48,
|
|
|
+ rowNum: 10,
|
|
|
+ waitTime: 5000,
|
|
|
+});
|
|
|
+
|
|
|
+const config3 = reactive({
|
|
|
+ header: ['问题描述', '发起时间', '整改人'],
|
|
|
+ data: [
|
|
|
+ ['高处作业未系安全带', '2024-11-08', '分包3-张三'],
|
|
|
+ ['高处作业未系1安全带', '2024-11-08', '分包3-张三'],
|
|
|
+ ['高处作业未系324安全带', '2024-11-08', '分包3-张三'],
|
|
|
+ ['高处作业未系23安全带', '2024-11-08', '分包3-张三'],
|
|
|
+ ['高处作业未系23安全带', '2024-11-08', '分包3-张三'],
|
|
|
+ ['高处作业未系s安全带', '2024-11-08', '分包3-张三'],
|
|
|
+ ['高处作业未系安全带', '2024-11-08', '分包3-张三'],
|
|
|
+ ['高处作业未系34安全带', '2024-11-08', '分包3-张三'],
|
|
|
+ ['高处作业未系安全带', '2024-11-08', '分包3-张三'],
|
|
|
+ ['高处作业未系安全带', '2024-11-08', '分包3-张三'],
|
|
|
+ ['高处作业未系s安全带', '2024-11-08', '分包3-张三'],
|
|
|
+ ['高处作业未系安全带', '2024-11-08', '分包3-张三'],
|
|
|
+ ],
|
|
|
+ index: false,
|
|
|
+ headerBGC: 'rgba(29, 66, 110, 0.6)',
|
|
|
+ evenRowBGC: 'rgba(52, 139, 199, 0.298039215686275)',
|
|
|
+ oddRowBGC: 'rgba(52, 139, 199, 0.0980392156862745)',
|
|
|
+ align: ['left', 'center', 'center', 'center'],
|
|
|
+ columnWidth: [200],
|
|
|
+ headerHeight: 48,
|
|
|
+ rowNum: 9,
|
|
|
+ waitTime: 5000,
|
|
|
+});
|
|
|
+
|
|
|
+const config4 = reactive({
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: 'F01',
|
|
|
+ value: 80,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'A09',
|
|
|
+ value: 72,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'A08',
|
|
|
+ value: 70,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'A07',
|
|
|
+ value: 70,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'A06',
|
|
|
+ value: 70,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'A075',
|
|
|
+ value: 70,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'A074',
|
|
|
+ value: 70,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'A073',
|
|
|
+ value: 70,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'A071',
|
|
|
+ value: 70,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'A072',
|
|
|
+ value: 70,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'A078',
|
|
|
+ value: 70,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ rowNum: 8,
|
|
|
+ waitTime: 5000,
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 17,
|
|
|
+});
|
|
|
+
|
|
|
+const config5 = reactive({
|
|
|
+ number: [1132],
|
|
|
+ content: '{nt}',
|
|
|
+});
|
|
|
+
|
|
|
+setInterval(() => {
|
|
|
+ config5.number = config5.number.map((num) => num + 100);
|
|
|
+}, 3000);
|
|
|
+
|
|
|
+const mouseoverHandler = (e: any) => {
|
|
|
+ console.log(e);
|
|
|
+};
|
|
|
|
|
|
+const clickHandler = (e: any) => {
|
|
|
+ console.log(e);
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
+<style lang="less" scoped>
|
|
|
+:deep(*) {
|
|
|
+ .el-descriptions__body {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ .el-descriptions__label {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .el-descriptions__content {
|
|
|
+ color: #ccc;
|
|
|
+ }
|
|
|
+}
|
|
|
+:deep(.left-board .dv-scroll-board .header) {
|
|
|
+ height: 30px !important;
|
|
|
+ color: #31e4cf;
|
|
|
+}
|
|
|
+:deep(.left-board .row-item) {
|
|
|
+ font-size: 17px;
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
+:deep(.left-board .header-item) {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 17px;
|
|
|
+}
|
|
|
|
|
|
-</style>
|
|
|
+:deep(.center-board .dv-scroll-board .header) {
|
|
|
+ height: 48px !important;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+:deep(.left-bottom-board .dv-scroll-board .rows .ceil) {
|
|
|
+ font-size: 17px;
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
+:deep(.center-board .dv-scroll-board .rows .ceil) {
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgba(247, 247, 247, 0.698039215686274);
|
|
|
+}
|
|
|
+:deep(.dv-scroll-ranking-board .ranking-info .rank) {
|
|
|
+ width: auto !important;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+:deep(.dv-scroll-ranking-board .ranking-column) {
|
|
|
+ height: 14px;
|
|
|
+ border: none;
|
|
|
+ background-color: rgba(232, 232, 232, 0.27843137254902);
|
|
|
+}
|
|
|
+:deep(.dv-scroll-ranking-board .ranking-column .inside-column) {
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(115, 235, 233, 1);
|
|
|
+}
|
|
|
+</style>
|
Mickey Mike
