|
@@ -1,5 +1,6 @@
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
|
import * as echarts from 'echarts'
|
|
import * as echarts from 'echarts'
|
|
|
|
|
+import { kanbanApi } from '@/api/pms/qhse/index'
|
|
|
import {
|
|
import {
|
|
|
AlarmClock,
|
|
AlarmClock,
|
|
|
Checked,
|
|
Checked,
|
|
@@ -27,21 +28,6 @@ defineOptions({
|
|
|
name: 'PmsQhseKanban'
|
|
name: 'PmsQhseKanban'
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
-type SummaryCard = {
|
|
|
|
|
- title: string
|
|
|
|
|
- value: string
|
|
|
|
|
- note: string
|
|
|
|
|
- accent: string
|
|
|
|
|
- glow: string
|
|
|
|
|
- icon: any
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-type MetricBar = {
|
|
|
|
|
- label: string
|
|
|
|
|
- value: number
|
|
|
|
|
- color: string
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
type RiskZone = {
|
|
type RiskZone = {
|
|
|
title: string
|
|
title: string
|
|
|
desc: string
|
|
desc: string
|
|
@@ -75,26 +61,26 @@ let socChart: echarts.ECharts | null = null
|
|
|
|
|
|
|
|
const pageTitle = 'QHSE管理看板'
|
|
const pageTitle = 'QHSE管理看板'
|
|
|
|
|
|
|
|
-const summaryCards: SummaryCard[] = [
|
|
|
|
|
|
|
+const summaryCards = ref([
|
|
|
{
|
|
{
|
|
|
title: '风险总数(处)',
|
|
title: '风险总数(处)',
|
|
|
- value: '126',
|
|
|
|
|
- note: 'R:12',
|
|
|
|
|
|
|
+ value: 0,
|
|
|
|
|
+ note: '',
|
|
|
accent: '#ff5a62',
|
|
accent: '#ff5a62',
|
|
|
glow: 'rgba(255, 90, 98, 0.26)',
|
|
glow: 'rgba(255, 90, 98, 0.26)',
|
|
|
icon: Warning
|
|
icon: Warning
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
title: '本月隐患(条)',
|
|
title: '本月隐患(条)',
|
|
|
- value: '29',
|
|
|
|
|
- note: 'Exp:2',
|
|
|
|
|
|
|
+ value: 0,
|
|
|
|
|
+ note: '',
|
|
|
accent: '#ff9f2f',
|
|
accent: '#ff9f2f',
|
|
|
glow: 'rgba(255, 159, 47, 0.24)',
|
|
glow: 'rgba(255, 159, 47, 0.24)',
|
|
|
icon: Opportunity
|
|
icon: Opportunity
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
title: '隐患整改率',
|
|
title: '隐患整改率',
|
|
|
- value: '92.3%',
|
|
|
|
|
|
|
+ value: '0%',
|
|
|
note: '',
|
|
note: '',
|
|
|
accent: '#2ac7c9',
|
|
accent: '#2ac7c9',
|
|
|
glow: 'rgba(42, 199, 201, 0.26)',
|
|
glow: 'rgba(42, 199, 201, 0.26)',
|
|
@@ -102,7 +88,7 @@ const summaryCards: SummaryCard[] = [
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
title: '本月作业许可',
|
|
title: '本月作业许可',
|
|
|
- value: '11',
|
|
|
|
|
|
|
+ value: 0,
|
|
|
note: '',
|
|
note: '',
|
|
|
accent: '#4f8dff',
|
|
accent: '#4f8dff',
|
|
|
glow: 'rgba(79, 141, 255, 0.22)',
|
|
glow: 'rgba(79, 141, 255, 0.22)',
|
|
@@ -110,19 +96,19 @@ const summaryCards: SummaryCard[] = [
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
title: '人员持证率',
|
|
title: '人员持证率',
|
|
|
- value: '97.8%',
|
|
|
|
|
|
|
+ value: 0,
|
|
|
note: 'Warn:3',
|
|
note: 'Warn:3',
|
|
|
accent: '#f2b800',
|
|
accent: '#f2b800',
|
|
|
glow: 'rgba(242, 184, 0, 0.22)',
|
|
glow: 'rgba(242, 184, 0, 0.22)',
|
|
|
icon: Postcard
|
|
icon: Postcard
|
|
|
}
|
|
}
|
|
|
-]
|
|
|
|
|
|
|
+])
|
|
|
|
|
|
|
|
-const hazardBars: MetricBar[] = [
|
|
|
|
|
- { label: '总数', value: 657, color: '#4f8dff' },
|
|
|
|
|
- { label: '已整改', value: 628, color: '#43c7ca' },
|
|
|
|
|
- { label: '未整改', value: 29, color: '#ff981f' }
|
|
|
|
|
-]
|
|
|
|
|
|
|
+const hazardBars = ref([
|
|
|
|
|
+ { label: '总数', value: 0, color: '#4f8dff' },
|
|
|
|
|
+ { label: '已整改', value: 0, color: '#43c7ca' },
|
|
|
|
|
+ { label: '未整改', value: 0, color: '#ff981f' }
|
|
|
|
|
+])
|
|
|
|
|
|
|
|
const incidentStats = [
|
|
const incidentStats = [
|
|
|
{ label: '安全事故', value: '0起', accent: '#2ac7c9' },
|
|
{ label: '安全事故', value: '0起', accent: '#2ac7c9' },
|
|
@@ -271,7 +257,7 @@ function getHazardChartOption(): echarts.EChartsOption {
|
|
|
}),
|
|
}),
|
|
|
xAxis: {
|
|
xAxis: {
|
|
|
type: 'category',
|
|
type: 'category',
|
|
|
- data: hazardBars.map((item) => item.label),
|
|
|
|
|
|
|
+ data: hazardBars.value.map((item) => item.label),
|
|
|
axisLine: {
|
|
axisLine: {
|
|
|
show: false
|
|
show: false
|
|
|
},
|
|
},
|
|
@@ -309,7 +295,7 @@ function getHazardChartOption(): echarts.EChartsOption {
|
|
|
series: [
|
|
series: [
|
|
|
{
|
|
{
|
|
|
type: 'bar',
|
|
type: 'bar',
|
|
|
- data: hazardBars.map((item) => ({
|
|
|
|
|
|
|
+ data: hazardBars.value.map((item) => ({
|
|
|
value: item.value,
|
|
value: item.value,
|
|
|
itemStyle: {
|
|
itemStyle: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
@@ -486,6 +472,37 @@ function destroySocChart() {
|
|
|
socChart = null
|
|
socChart = null
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+const getKanban = async () => {
|
|
|
|
|
+ const data = await kanbanApi.getKanban()
|
|
|
|
|
+ return data
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const summaryPanel = ref<any>(null)
|
|
|
|
|
+onMounted(async () => {
|
|
|
|
|
+ summaryPanel.value = await getKanban()
|
|
|
|
|
+ summaryCards.value[0].value = summaryPanel.value.danger
|
|
|
|
|
+ summaryCards.value[1].value = summaryPanel.value.monthHazard
|
|
|
|
|
+ summaryCards.value[2].value =
|
|
|
|
|
+ (
|
|
|
|
|
+ ((summaryPanel.value.totalHazard - summaryPanel.value.todoHazard) /
|
|
|
|
|
+ summaryPanel.value.totalHazard) *
|
|
|
|
|
+ 100
|
|
|
|
|
+ ).toFixed(1) + '%'
|
|
|
|
|
+ summaryCards.value[3].value = summaryPanel.value.ptwCount
|
|
|
|
|
+ summaryCards.value[4].value =
|
|
|
|
|
+ (
|
|
|
|
|
+ ((summaryPanel.value.totdalCert - summaryPanel.value.expiredCert) /
|
|
|
|
|
+ summaryPanel.value.totdalCert) *
|
|
|
|
|
+ 100
|
|
|
|
|
+ ).toFixed(1) + '%'
|
|
|
|
|
+
|
|
|
|
|
+ summaryCards.value[4].note = `Warn: ${summaryPanel.value.warnCert}`
|
|
|
|
|
+
|
|
|
|
|
+ hazardBars.value[0].value = summaryPanel.value.totalHazard
|
|
|
|
|
+ hazardBars.value[1].value = summaryPanel.value.totalHazard - summaryPanel.value.todoHazard
|
|
|
|
|
+ hazardBars.value[2].value = summaryPanel.value.todoHazard
|
|
|
|
|
+})
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
<template>
|