|
|
@@ -1,8 +1,6 @@
|
|
|
-<script lang="ts" setup>
|
|
|
+<script lang="ts" setup>
|
|
|
import * as echarts from 'echarts'
|
|
|
-import { VueDatePicker } from '@vuepic/vue-datepicker'
|
|
|
import '@vuepic/vue-datepicker/dist/main.css'
|
|
|
-import { zhCN } from 'date-fns/locale'
|
|
|
import {
|
|
|
AlarmClock,
|
|
|
Checked,
|
|
|
@@ -46,6 +44,7 @@ type PermitStat = {
|
|
|
type SafeDayMap = Record<string, number>
|
|
|
|
|
|
type SummaryTabValue = 'home' | 'certificate'
|
|
|
+type QhseMetricValue = 'ltir' | 'trir' | 'pmva'
|
|
|
|
|
|
const userStore = useUserStore()
|
|
|
|
|
|
@@ -83,6 +82,7 @@ const timeVal = ref(getCurrentPickerValue(type.value))
|
|
|
const wrapperRef = ref<HTMLDivElement>()
|
|
|
const hazardChartRef = ref<HTMLDivElement>()
|
|
|
const safeDayChartRef = ref<HTMLDivElement>()
|
|
|
+const qhseTrendChartRef = ref<HTMLDivElement>()
|
|
|
const socChartRef = ref<HTMLDivElement>()
|
|
|
const scale = ref(1)
|
|
|
const supportsZoom = ref(false)
|
|
|
@@ -91,6 +91,7 @@ let resizeObserver: ResizeObserver | null = null
|
|
|
let resizeRaf = 0
|
|
|
let hazardChart: echarts.ECharts | null = null
|
|
|
let safeDayChart: echarts.ECharts | null = null
|
|
|
+let qhseTrendChart: echarts.ECharts | null = null
|
|
|
let socChart: echarts.ECharts | null = null
|
|
|
|
|
|
const summaryTabs: Array<{ label: string; value: SummaryTabValue }> = [
|
|
|
@@ -109,9 +110,11 @@ watch(
|
|
|
nextTick(() => {
|
|
|
initHazardChart()
|
|
|
initSafeDayChart()
|
|
|
+ initQhseTrendChart()
|
|
|
initSocChart()
|
|
|
resizeHazardChart()
|
|
|
resizeSafeDayChart()
|
|
|
+ resizeQhseTrendChart()
|
|
|
resizeSocChart()
|
|
|
})
|
|
|
}
|
|
|
@@ -199,6 +202,64 @@ const qualificationWarnings = ref([
|
|
|
{ label: '即将到期', value: 0, accent: '#e6ab00' }
|
|
|
])
|
|
|
|
|
|
+const qhseMetricTabs = [
|
|
|
+ { label: 'LTIR(百万工时)', value: 'ltir', accent: '#3d7cff', label2: '百万工时损失工时事故率' },
|
|
|
+ { label: 'TRIR(百万工时)', value: 'trir', accent: '#17b6c5', label2: '百万工时总可记录事件率' },
|
|
|
+ {
|
|
|
+ label: 'PMVA(百万公里)',
|
|
|
+ value: 'pmva',
|
|
|
+ accent: '#f2a93b',
|
|
|
+ label2: '百万公里可预防性交通事故率'
|
|
|
+ }
|
|
|
+] as const
|
|
|
+
|
|
|
+const activeQhseMetric = ref<QhseMetricValue>('ltir')
|
|
|
+
|
|
|
+const qhseTrendSeries = ref<Record<QhseMetricValue, Array<{ year: string; value: number }>>>({
|
|
|
+ ltir: [
|
|
|
+ { year: '2026年1月', value: 0.42 },
|
|
|
+ { year: '2026年2月', value: 0.39 },
|
|
|
+ { year: '2026年3月', value: 0.36 },
|
|
|
+ { year: '2026年4月', value: 0.34 },
|
|
|
+ { year: '2026年5月', value: 0.31 },
|
|
|
+ { year: '2026年6月', value: 0.29 },
|
|
|
+ { year: '2026年7月', value: 0.27 },
|
|
|
+ { year: '2026年8月', value: 0.25 },
|
|
|
+ { year: '2026年9月', value: 0.24 },
|
|
|
+ { year: '2026年10月', value: 0.22 },
|
|
|
+ { year: '2026年11月', value: 0.21 },
|
|
|
+ { year: '2026年12月', value: 0.2 }
|
|
|
+ ],
|
|
|
+ trir: [
|
|
|
+ { year: '1月', value: 0.78 },
|
|
|
+ { year: '2月', value: 0.75 },
|
|
|
+ { year: '3月', value: 0.73 },
|
|
|
+ { year: '4月', value: 0.7 },
|
|
|
+ { year: '5月', value: 0.68 },
|
|
|
+ { year: '6月', value: 0.66 },
|
|
|
+ { year: '7月', value: 0.63 },
|
|
|
+ { year: '8月', value: 0.61 },
|
|
|
+ { year: '9月', value: 0.59 },
|
|
|
+ { year: '10月', value: 0.57 },
|
|
|
+ { year: '11月', value: 0.55 },
|
|
|
+ { year: '12月', value: 0.54 }
|
|
|
+ ],
|
|
|
+ pmva: [
|
|
|
+ { year: '1月', value: 0.22 },
|
|
|
+ { year: '2月', value: 0.21 },
|
|
|
+ { year: '3月', value: 0.2 },
|
|
|
+ { year: '4月', value: 0.18 },
|
|
|
+ { year: '5月', value: 0.17 },
|
|
|
+ { year: '6月', value: 0.16 },
|
|
|
+ { year: '7月', value: 0.15 },
|
|
|
+ { year: '8月', value: 0.14 },
|
|
|
+ { year: '9月', value: 0.14 },
|
|
|
+ { year: '10月', value: 0.13 },
|
|
|
+ { year: '11月', value: 0.12 },
|
|
|
+ { year: '12月', value: 0.12 }
|
|
|
+ ]
|
|
|
+})
|
|
|
+
|
|
|
const bottomCards = ref([
|
|
|
{
|
|
|
title: '体系合规',
|
|
|
@@ -222,11 +283,11 @@ const bottomCards = ref([
|
|
|
lines: ['年度应急演练：80次']
|
|
|
},
|
|
|
{
|
|
|
- title: '质量检验',
|
|
|
+ title: '职业健康',
|
|
|
icon: Checked,
|
|
|
accent: '#f2c11a',
|
|
|
glow: 'rgba(242, 193, 26, 0.2)',
|
|
|
- lines: ['产品合格率', '98.7%（达标）']
|
|
|
+ lines: ['职业健康体检率', '98.7%（达标）']
|
|
|
},
|
|
|
{
|
|
|
title: '环境危废',
|
|
|
@@ -273,6 +334,7 @@ function updateScale() {
|
|
|
nextTick(() => {
|
|
|
resizeHazardChart()
|
|
|
resizeSafeDayChart()
|
|
|
+ resizeQhseTrendChart()
|
|
|
resizeSocChart()
|
|
|
})
|
|
|
})
|
|
|
@@ -331,6 +393,8 @@ function getHazardChartOption(): echarts.EChartsOption {
|
|
|
},
|
|
|
tooltip: createTooltip({
|
|
|
trigger: 'axis',
|
|
|
+ confine: true,
|
|
|
+ appendToBody: false,
|
|
|
axisPointer: {
|
|
|
type: 'shadow',
|
|
|
shadowStyle: {
|
|
|
@@ -338,6 +402,7 @@ function getHazardChartOption(): echarts.EChartsOption {
|
|
|
}
|
|
|
},
|
|
|
formatter(params: any) {
|
|
|
+ if (!params || (Array.isArray(params) && params.length === 0)) return ''
|
|
|
const item = Array.isArray(params) ? params[0] : params
|
|
|
return `${item.name}<br/>数量：${item.value}`
|
|
|
}
|
|
|
@@ -357,6 +422,15 @@ function getHazardChartOption(): echarts.EChartsOption {
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
+ name: '隐患数量',
|
|
|
+ nameLocation: 'end',
|
|
|
+ nameGap: 13,
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#657897',
|
|
|
+ fontSize: 12,
|
|
|
+ // fontWeight: 600,
|
|
|
+ fontFamily: FONT_FAMILY
|
|
|
+ },
|
|
|
axisLine: { show: false },
|
|
|
axisTick: { show: false },
|
|
|
axisLabel: {
|
|
|
@@ -415,11 +489,14 @@ function initHazardChart() {
|
|
|
}
|
|
|
|
|
|
function updateHazardChart() {
|
|
|
- hazardChart?.setOption(getHazardChartOption(), true)
|
|
|
+ if (!hazardChart) return
|
|
|
+ hazardChart.clear()
|
|
|
+ hazardChart.setOption(getHazardChartOption(), { notMerge: true, lazyUpdate: false })
|
|
|
}
|
|
|
|
|
|
function resizeHazardChart() {
|
|
|
- hazardChart?.resize()
|
|
|
+ if (!hazardChart) return
|
|
|
+ hazardChart.resize({ animation: { duration: 300 } })
|
|
|
}
|
|
|
|
|
|
function destroyHazardChart() {
|
|
|
@@ -442,7 +519,7 @@ function getSafeDayChartOption(): echarts.EChartsOption {
|
|
|
return {
|
|
|
...ANIMATION,
|
|
|
grid: {
|
|
|
- left: 52,
|
|
|
+ left: 32,
|
|
|
right: 32,
|
|
|
top: 12,
|
|
|
bottom: 24,
|
|
|
@@ -450,6 +527,8 @@ function getSafeDayChartOption(): echarts.EChartsOption {
|
|
|
},
|
|
|
tooltip: createTooltip({
|
|
|
trigger: 'axis',
|
|
|
+ confine: true,
|
|
|
+ appendToBody: false,
|
|
|
axisPointer: {
|
|
|
type: 'shadow',
|
|
|
shadowStyle: {
|
|
|
@@ -457,12 +536,22 @@ function getSafeDayChartOption(): echarts.EChartsOption {
|
|
|
}
|
|
|
},
|
|
|
formatter(params: any) {
|
|
|
+ if (!params || (Array.isArray(params) && params.length === 0)) return ''
|
|
|
const item = Array.isArray(params) ? params[0] : params
|
|
|
return `${item.name}<br/>安全天数：${item.value}`
|
|
|
}
|
|
|
}),
|
|
|
xAxis: {
|
|
|
type: 'value',
|
|
|
+ name: '安全生产天数',
|
|
|
+ nameLocation: 'middle',
|
|
|
+ nameGap: 30,
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#5b6f8f',
|
|
|
+ fontSize: 12,
|
|
|
+ fontWeight: 600,
|
|
|
+ fontFamily: FONT_FAMILY
|
|
|
+ },
|
|
|
axisLine: { show: false },
|
|
|
axisTick: { show: false },
|
|
|
axisLabel: {
|
|
|
@@ -521,11 +610,14 @@ function initSafeDayChart() {
|
|
|
}
|
|
|
|
|
|
function updateSafeDayChart() {
|
|
|
- safeDayChart?.setOption(getSafeDayChartOption(), true)
|
|
|
+ if (!safeDayChart) return
|
|
|
+ safeDayChart.clear()
|
|
|
+ safeDayChart.setOption(getSafeDayChartOption(), { notMerge: true, lazyUpdate: false })
|
|
|
}
|
|
|
|
|
|
function resizeSafeDayChart() {
|
|
|
- safeDayChart?.resize()
|
|
|
+ if (!safeDayChart) return
|
|
|
+ safeDayChart.resize({ animation: { duration: 300 } })
|
|
|
}
|
|
|
|
|
|
function destroySafeDayChart() {
|
|
|
@@ -533,18 +625,152 @@ function destroySafeDayChart() {
|
|
|
safeDayChart = null
|
|
|
}
|
|
|
|
|
|
+function getQhseTrendChartOption(): echarts.EChartsOption {
|
|
|
+ const activeTab =
|
|
|
+ qhseMetricTabs.find((item) => item.value === activeQhseMetric.value) || qhseMetricTabs[0]
|
|
|
+ const seriesData = qhseTrendSeries.value[activeQhseMetric.value] || []
|
|
|
+
|
|
|
+ return {
|
|
|
+ ...ANIMATION,
|
|
|
+ grid: {
|
|
|
+ left: 32,
|
|
|
+ right: 18,
|
|
|
+ top: 28,
|
|
|
+ bottom: 28,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ tooltip: createTooltip({
|
|
|
+ trigger: 'axis',
|
|
|
+ confine: true,
|
|
|
+ appendToBody: false,
|
|
|
+ axisPointer: {
|
|
|
+ type: 'line',
|
|
|
+ lineStyle: {
|
|
|
+ color: `${activeTab.accent}99`,
|
|
|
+ width: 1.5
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formatter(params: any) {
|
|
|
+ if (!params || (Array.isArray(params) && params.length === 0)) return ''
|
|
|
+ const item = Array.isArray(params) ? params[0] : params
|
|
|
+ return `${item.axisValue}<br/>${activeTab.label}：${item.data}`
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: seriesData.map((item) => item.year),
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(106, 144, 221, 0.45)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: { show: false },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#5b6f8f',
|
|
|
+ rotate: 28,
|
|
|
+ fontSize: 13,
|
|
|
+ fontWeight: 600,
|
|
|
+ fontFamily: FONT_FAMILY
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisLine: { show: false },
|
|
|
+ axisTick: { show: false },
|
|
|
+ axisLabel: {
|
|
|
+ color: '#8a9bb5',
|
|
|
+ fontSize: 12,
|
|
|
+ fontFamily: FONT_FAMILY
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(104, 139, 205, 0.22)',
|
|
|
+ type: 'dashed'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 9,
|
|
|
+ showSymbol: true,
|
|
|
+ data: seriesData.map((item) => item.value),
|
|
|
+ lineStyle: {
|
|
|
+ width: 3,
|
|
|
+ color: activeTab.accent
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: activeTab.accent,
|
|
|
+ borderColor: '#fff',
|
|
|
+ borderWidth: 2
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: `${activeTab.accent}55` },
|
|
|
+ { offset: 1, color: `${activeTab.accent}08` }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function initQhseTrendChart() {
|
|
|
+ if (!qhseTrendChartRef.value) return
|
|
|
+ qhseTrendChart?.dispose()
|
|
|
+ qhseTrendChart = echarts.init(qhseTrendChartRef.value, undefined, {
|
|
|
+ renderer: CHART_RENDERER
|
|
|
+ })
|
|
|
+ qhseTrendChart.setOption(getQhseTrendChartOption(), { notMerge: true, lazyUpdate: false })
|
|
|
+}
|
|
|
+
|
|
|
+function updateQhseTrendChart() {
|
|
|
+ if (!qhseTrendChart) return
|
|
|
+ qhseTrendChart.clear()
|
|
|
+ qhseTrendChart.setOption(getQhseTrendChartOption(), { notMerge: true, lazyUpdate: false })
|
|
|
+}
|
|
|
+
|
|
|
+function resizeQhseTrendChart() {
|
|
|
+ if (!qhseTrendChart) return
|
|
|
+ qhseTrendChart.resize({ animation: { duration: 300 } })
|
|
|
+}
|
|
|
+
|
|
|
+function destroyQhseTrendChart() {
|
|
|
+ qhseTrendChart?.dispose()
|
|
|
+ qhseTrendChart = null
|
|
|
+}
|
|
|
+
|
|
|
function getSocChartOption(): echarts.EChartsOption {
|
|
|
return {
|
|
|
...ANIMATION,
|
|
|
+ title: {
|
|
|
+ text: 'SOC',
|
|
|
+ left: '34%',
|
|
|
+ top: '54%',
|
|
|
+ textAlign: 'center',
|
|
|
+ textVerticalAlign: 'middle',
|
|
|
+ textStyle: {
|
|
|
+ color: '#3d5f94',
|
|
|
+ fontSize: 24,
|
|
|
+ fontWeight: 800,
|
|
|
+ fontFamily: FONT_FAMILY
|
|
|
+ }
|
|
|
+ },
|
|
|
tooltip: createTooltip({
|
|
|
trigger: 'item',
|
|
|
+ confine: true,
|
|
|
+ appendToBody: false,
|
|
|
formatter(params: any) {
|
|
|
+ if (!params) return ''
|
|
|
return `${params.name}<br/>数量：${params.value}<br/>占比：${params.percent}%`
|
|
|
}
|
|
|
}),
|
|
|
legend: {
|
|
|
orient: 'vertical',
|
|
|
- right: 4,
|
|
|
+ right: 100,
|
|
|
top: 'center',
|
|
|
itemWidth: 12,
|
|
|
itemHeight: 12,
|
|
|
@@ -601,11 +827,18 @@ function initSocChart() {
|
|
|
socChart = echarts.init(socChartRef.value, undefined, {
|
|
|
renderer: CHART_RENDERER
|
|
|
})
|
|
|
- socChart.setOption(getSocChartOption(), true)
|
|
|
+ socChart.setOption(getSocChartOption(), { notMerge: true, lazyUpdate: false })
|
|
|
+}
|
|
|
+
|
|
|
+function updateSocChart() {
|
|
|
+ if (!socChart) return
|
|
|
+ socChart.clear()
|
|
|
+ socChart.setOption(getSocChartOption(), { notMerge: true, lazyUpdate: false })
|
|
|
}
|
|
|
|
|
|
function resizeSocChart() {
|
|
|
- socChart?.resize()
|
|
|
+ if (!socChart) return
|
|
|
+ socChart.resize({ animation: { duration: 300 } })
|
|
|
}
|
|
|
|
|
|
function destroySocChart() {
|
|
|
@@ -641,8 +874,11 @@ async function loadHomeBoard() {
|
|
|
nextTick(() => {
|
|
|
updateHazardChart()
|
|
|
updateSafeDayChart()
|
|
|
+ updateQhseTrendChart()
|
|
|
+ updateSocChart()
|
|
|
resizeHazardChart()
|
|
|
resizeSafeDayChart()
|
|
|
+ resizeQhseTrendChart()
|
|
|
resizeSocChart()
|
|
|
})
|
|
|
}
|
|
|
@@ -718,6 +954,7 @@ watch(
|
|
|
nextTick(() => {
|
|
|
resizeHazardChart()
|
|
|
resizeSafeDayChart()
|
|
|
+ resizeQhseTrendChart()
|
|
|
resizeSocChart()
|
|
|
})
|
|
|
}
|
|
|
@@ -732,7 +969,7 @@ watch(
|
|
|
)
|
|
|
|
|
|
onMounted(async () => {
|
|
|
- supportsZoom.value = typeof CSS !== 'undefined' && CSS.supports?.('zoom', '1') === true
|
|
|
+ // supportsZoom.value = typeof CSS !== 'undefined' && CSS.supports?.('zoom', '1') === true
|
|
|
nextTick(updateScale)
|
|
|
resizeObserver = new ResizeObserver(updateScale)
|
|
|
if (wrapperRef.value) {
|
|
|
@@ -740,10 +977,12 @@ onMounted(async () => {
|
|
|
}
|
|
|
initHazardChart()
|
|
|
initSafeDayChart()
|
|
|
+ initQhseTrendChart()
|
|
|
initSocChart()
|
|
|
window.addEventListener('resize', updateScale)
|
|
|
window.addEventListener('resize', resizeHazardChart)
|
|
|
window.addEventListener('resize', resizeSafeDayChart)
|
|
|
+ window.addEventListener('resize', resizeQhseTrendChart)
|
|
|
window.addEventListener('resize', resizeSocChart)
|
|
|
|
|
|
await loadHomeBoard()
|
|
|
@@ -754,10 +993,12 @@ onUnmounted(() => {
|
|
|
window.removeEventListener('resize', updateScale)
|
|
|
window.removeEventListener('resize', resizeHazardChart)
|
|
|
window.removeEventListener('resize', resizeSafeDayChart)
|
|
|
+ window.removeEventListener('resize', resizeQhseTrendChart)
|
|
|
window.removeEventListener('resize', resizeSocChart)
|
|
|
cancelAnimationFrame(resizeRaf)
|
|
|
destroyHazardChart()
|
|
|
destroySafeDayChart()
|
|
|
+ destroyQhseTrendChart()
|
|
|
destroySocChart()
|
|
|
})
|
|
|
</script>
|
|
|
@@ -784,37 +1025,29 @@ onUnmounted(() => {
|
|
|
<div v-if="activeSummaryTab === 'home'" class="summary-toolbar__date">
|
|
|
<span class="summary-toolbar__date-label">日期:</span>
|
|
|
|
|
|
- <div class="flex items-center">
|
|
|
- <!-- 维度切换下拉 -->
|
|
|
- <el-select v-model="type" placeholder="筛选维度" style="width: 120px">
|
|
|
- <el-option label="按日" value="day" />
|
|
|
- <el-option label="按月" value="month" />
|
|
|
- <el-option label="按季度" value="quarter" />
|
|
|
- <el-option label="按年" value="year" />
|
|
|
- </el-select>
|
|
|
-
|
|
|
- <!-- 日期组件 -->
|
|
|
- <VueDatePicker
|
|
|
- v-model="timeVal"
|
|
|
- vertical
|
|
|
- v-if="type === 'quarter'"
|
|
|
- quarter-picker
|
|
|
- :teleport="true"
|
|
|
- :locale="zhCN"
|
|
|
- @update:model-value="handelChange"
|
|
|
- style="margin-left: 10px; width: 320px" />
|
|
|
-
|
|
|
+ <div class="flex items-center gap-2">
|
|
|
<el-date-picker
|
|
|
- v-else
|
|
|
v-model="timeVal"
|
|
|
:teleport="true"
|
|
|
:type="type === 'day' ? 'date' : type === 'month' ? 'month' : 'year'"
|
|
|
+ class="summary-toolbar__picker el-date-picker"
|
|
|
+ popper-class="summary-toolbar__picker-popper"
|
|
|
value-format="YYYY-MM-DD"
|
|
|
range-separator="~"
|
|
|
start-placeholder="开始"
|
|
|
end-placeholder="结束"
|
|
|
@change="handelChange"
|
|
|
- style="width: 320px; height: 40px; margin-left: 10px" />
|
|
|
+ style="
|
|
|
+ width: 150px;
|
|
|
+ height: 40px;
|
|
|
+ margin-left: 10px;
|
|
|
+ background-color: transparent;
|
|
|
+ " />
|
|
|
+
|
|
|
+ <span class="bg-[#f5f9ff] rounded-2xl px-2 py-0 cursor-pointer">月度</span>
|
|
|
+ <span class="bg-[#f5f9ff] rounded-2xl px-2 py-0 cursor-pointer">季度</span>
|
|
|
+ <span class="bg-[#f5f9ff] rounded-2xl px-2 py-0 cursor-pointer">年度</span>
|
|
|
+ <span class="bg-[#f5f9ff] rounded-2xl px-2 py-0 cursor-pointer">初始化</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -823,7 +1056,7 @@ onUnmounted(() => {
|
|
|
<section class="panel summary-panel kb-stage-card kb-stage-card--1">
|
|
|
<div class="panel-title">
|
|
|
<span class="icon-decorator"><span></span><span></span></span>
|
|
|
- 风险总览
|
|
|
+ QHSE关键数据
|
|
|
</div>
|
|
|
<div class="summary-grid">
|
|
|
<article
|
|
|
@@ -861,7 +1094,7 @@ onUnmounted(() => {
|
|
|
<section class="panel board-panel board-panel--center kb-stage-card kb-stage-card--4">
|
|
|
<div class="panel-title panel-title--center">
|
|
|
<span class="icon-decorator"><span></span><span></span></span>
|
|
|
- 风险管控及隐患排查
|
|
|
+ 风险管控及隐患治理
|
|
|
</div>
|
|
|
<div class="risk-grid">
|
|
|
<article v-for="zone in riskZones" :key="zone.title" class="risk-card">
|
|
|
@@ -878,11 +1111,7 @@ onUnmounted(() => {
|
|
|
</article>
|
|
|
</div>
|
|
|
|
|
|
- <div class="risk-hazard-block">
|
|
|
- <div class="panel-title risk-hazard-block__title">
|
|
|
- <span class="icon-decorator"><span></span><span></span></span>
|
|
|
- 隐患排查治理统计
|
|
|
- </div>
|
|
|
+ <div class="risk-hazard-block mt-2!">
|
|
|
<div
|
|
|
ref="hazardChartRef"
|
|
|
class="chart-panel chart-panel--echart risk-hazard-block__chart"></div>
|
|
|
@@ -894,9 +1123,36 @@ onUnmounted(() => {
|
|
|
<section class="panel board-panel kb-stage-card kb-stage-card--3">
|
|
|
<div class="panel-title panel-title--center">
|
|
|
<span class="icon-decorator"><span></span><span></span></span>
|
|
|
- 结果指标
|
|
|
+ QHSE指标
|
|
|
</div>
|
|
|
- <div ref="safeDayChartRef" class="safe-day-chart-panel"></div>
|
|
|
+
|
|
|
+ <section class="board-panel kb-stage-card kb-stage-card--5">
|
|
|
+ <div ref="safeDayChartRef" class="safe-day-chart-panel"></div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="board-panel kb-stage-card kb-stage-card--5">
|
|
|
+ <div class="qhse-metric-tabs">
|
|
|
+ <button
|
|
|
+ v-for="item in qhseMetricTabs"
|
|
|
+ :key="item.value"
|
|
|
+ :title="item.label2"
|
|
|
+ type="button"
|
|
|
+ class="qhse-metric-tab"
|
|
|
+ :class="{ 'is-active': activeQhseMetric === item.value }"
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ activeQhseMetric = item.value
|
|
|
+ nextTick(() => {
|
|
|
+ updateQhseTrendChart()
|
|
|
+ resizeQhseTrendChart()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ ">
|
|
|
+ {{ item.label }}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div ref="qhseTrendChartRef" class="qhse-trend-chart-panel"></div>
|
|
|
+ </section>
|
|
|
</section>
|
|
|
</div>
|
|
|
|
|
|
@@ -904,21 +1160,13 @@ onUnmounted(() => {
|
|
|
<section class="panel board-panel board-panel--center kb-stage-card kb-stage-card--4">
|
|
|
<div class="panel-title panel-title--center">
|
|
|
<span class="icon-decorator"><span></span><span></span></span>
|
|
|
- 行为安全与风险预警
|
|
|
+ 行为安全与系统预警
|
|
|
</div>
|
|
|
<section class="board-panel kb-stage-card kb-stage-card--5 pt-2">
|
|
|
- <div class="panel-title">
|
|
|
- <!-- <span class="icon-decorator"><span></span><span></span></span> -->
|
|
|
- SOC卡类型
|
|
|
- </div>
|
|
|
<div ref="socChartRef" class="soc-chart-panel"></div>
|
|
|
</section>
|
|
|
|
|
|
<section class="board-panel kb-stage-card kb-stage-card--6 pl-4">
|
|
|
- <div class="panel-title">
|
|
|
- <span class="icon-decorator"><span></span><span></span></span>
|
|
|
- 人员资质风险预警
|
|
|
- </div>
|
|
|
<div class="qualification-panel">
|
|
|
<div class="qualification-icon">
|
|
|
<el-icon>
|
|
|
@@ -1191,11 +1439,38 @@ onUnmounted(() => {
|
|
|
background: rgb(255 255 255 / 80%);
|
|
|
border: 1px solid rgb(137 176 235 / 38%);
|
|
|
border-radius: 10px;
|
|
|
+ font-size: 14px !important;
|
|
|
box-shadow:
|
|
|
inset 0 1px 0 rgb(255 255 255 / 92%),
|
|
|
0 8px 14px rgb(63 103 171 / 6%);
|
|
|
}
|
|
|
|
|
|
+.summary-toolbar__picker :deep(.el-input__inner),
|
|
|
+.summary-toolbar__picker :deep(.el-range-input),
|
|
|
+.summary-toolbar__picker :deep(.el-input__prefix),
|
|
|
+.summary-toolbar__picker :deep(.el-input__suffix) {
|
|
|
+ font-size: 14px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.summary-toolbar__picker :deep(.el-input__inner::placeholder),
|
|
|
+.summary-toolbar__picker :deep(.el-range-input::placeholder) {
|
|
|
+ font-size: 14px !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.summary-toolbar__picker-popper) {
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.summary-toolbar__picker-popper .el-date-table),
|
|
|
+:deep(.summary-toolbar__picker-popper .el-date-table th),
|
|
|
+:deep(.summary-toolbar__picker-popper .el-date-table td),
|
|
|
+:deep(.summary-toolbar__picker-popper .el-month-table),
|
|
|
+:deep(.summary-toolbar__picker-popper .el-year-table),
|
|
|
+:deep(.summary-toolbar__picker-popper .el-picker-panel__icon-btn),
|
|
|
+:deep(.summary-toolbar__picker-popper .el-date-picker__header-label) {
|
|
|
+ font-size: 14px !important;
|
|
|
+}
|
|
|
+
|
|
|
.summary-panel {
|
|
|
padding: 0 10px 10px;
|
|
|
height: 200px;
|
|
|
@@ -1255,8 +1530,11 @@ onUnmounted(() => {
|
|
|
.right-column {
|
|
|
display: grid;
|
|
|
gap: 24px;
|
|
|
+ align-content: start;
|
|
|
+}
|
|
|
+.left-column {
|
|
|
+ height: 540px;
|
|
|
}
|
|
|
-
|
|
|
.board-panel {
|
|
|
min-height: 258px;
|
|
|
}
|
|
|
@@ -1267,6 +1545,7 @@ onUnmounted(() => {
|
|
|
|
|
|
.board-panel--center {
|
|
|
min-height: 540px;
|
|
|
+ height: 540px;
|
|
|
}
|
|
|
|
|
|
.chart-panel {
|
|
|
@@ -1281,8 +1560,59 @@ onUnmounted(() => {
|
|
|
height: 218px;
|
|
|
}
|
|
|
|
|
|
-.soc-chart-panel {
|
|
|
+.qhse-metric-tabs {
|
|
|
+ display: flex;
|
|
|
+ justify-content: left;
|
|
|
+ gap: 5px;
|
|
|
+ padding-left: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.qhse-metric-tab {
|
|
|
+ min-height: 24px;
|
|
|
+ padding: 5px 12px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 1.35;
|
|
|
+ color: #4d6487;
|
|
|
+ text-align: center;
|
|
|
+ background: linear-gradient(180deg, rgb(255 255 255 / 86%) 0%, rgb(228 239 255 / 82%) 100%);
|
|
|
+ border: 1px solid rgb(118 167 238 / 28%);
|
|
|
+ border-radius: 14px;
|
|
|
+ box-shadow:
|
|
|
+ inset 0 1px 0 rgb(255 255 255 / 92%),
|
|
|
+ 0 10px 16px rgb(52 94 164 / 8%);
|
|
|
+ cursor: pointer;
|
|
|
+ transition:
|
|
|
+ transform 0.2s ease,
|
|
|
+ box-shadow 0.2s ease,
|
|
|
+ color 0.2s ease,
|
|
|
+ background 0.2s ease,
|
|
|
+ border-color 0.2s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.qhse-metric-tab:hover {
|
|
|
+ transform: translateY(-1px);
|
|
|
+ box-shadow:
|
|
|
+ inset 0 1px 0 rgb(255 255 255 / 94%),
|
|
|
+ 0 12px 18px rgb(52 94 164 / 10%);
|
|
|
+}
|
|
|
+
|
|
|
+.qhse-metric-tab.is-active {
|
|
|
+ color: #fff;
|
|
|
+ background: linear-gradient(180deg, #63adff 0%, #347eea 100%);
|
|
|
+ border-color: rgb(62 122 223 / 76%);
|
|
|
+ box-shadow:
|
|
|
+ inset 0 1px 0 rgb(255 255 255 / 18%),
|
|
|
+ 0 12px 20px rgb(45 120 234 / 22%);
|
|
|
+}
|
|
|
+
|
|
|
+.qhse-trend-chart-panel {
|
|
|
height: 220px;
|
|
|
+ // margin-top: 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.soc-chart-panel {
|
|
|
+ height: 280px;
|
|
|
}
|
|
|
|
|
|
.panel-title--center {
|
|
|
@@ -1305,6 +1635,7 @@ onUnmounted(() => {
|
|
|
|
|
|
.risk-hazard-block {
|
|
|
padding: 0 24px 5px;
|
|
|
+ margin-top: 18px;
|
|
|
}
|
|
|
|
|
|
.risk-hazard-block__title {
|
|
|
@@ -1518,6 +1849,29 @@ onUnmounted(() => {
|
|
|
|
|
|
:deep(.el-input__inner) {
|
|
|
font-size: 14px !important;
|
|
|
+ border: none !important;
|
|
|
+ font-size: 14px !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-input__wrapper) {
|
|
|
+ background: transparent !important;
|
|
|
+ border: none !important;
|
|
|
+ font-size: 14px !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-input) {
|
|
|
+ border: none !important;
|
|
|
+ outline: none !important;
|
|
|
+ font-size: 14px !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-date-editor.el-input, .el-date-editor.el-input__inner) {
|
|
|
+ border: none !important;
|
|
|
+ font-size: 14px !important;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.el-date-editor.is-active) {
|
|
|
+ border-color: #ff6a00 !important;
|
|
|
}
|
|
|
|
|
|
.certificate-pagination {
|
|
|
@@ -1537,4 +1891,15 @@ onUnmounted(() => {
|
|
|
font-size: calc(14px * var(--kb-scale, 1));
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.summary-toolbar__picker {
|
|
|
+ :deep(*) {
|
|
|
+ font-size: 14px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(input) {
|
|
|
+ font-size: 14px !important;
|
|
|
+ line-height: 14px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
