isoftstone/lc_frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

总部左下角接口对接

Browse Source
This commit is contained in:
chenlin
2025-12-15 20:55:27 +08:00
parent caad49998c
commit 2569fa16e5
4 changed files with 1004 additions and 617 deletions
Download Patch File Download Diff File Expand all files Collapse all files

591
src/views/screen/components/RiskStatisticsPanel copy.vue Normal file
View File

@@ -0,0 +1,591 @@
<template>
<div class="left-bottom">
<div class="panel-title">
<div class="tabs">
<span class="tab" :class="{ active: activeTab === '高危作业' }" @click="handleTabClick('高危作业')">高危作业</span>
<span class="divider">|</span>
<span class="tab" :class="{ active: activeTab === '安全培训考试' }" @click="handleTabClick('安全培训考试')">安全培训考试</span>
<span class="divider">|</span>
<span class="tab" :class="{ active: activeTab === '应急预案及演练' }" @click="handleTabClick('应急预案及演练')">应急预案及演练</span>
</div>
</div>
<img style="margin: 8px 0" src="@/assets/images/title_border_line.png" />
<div class="bottom-card-risk">
<div class="bottom-card-title">
<span>{{ activeTab === '高危作业' ? '各园区统计' : activeTab === '安全培训考试' ? '安全培训考试' : '园区演练完成率' }}</span>
<img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
</div>
</div>
<!-- <Echart v-if="activeTab !== '高危作业'" :options="riskChartOption" class="donut-chart-with-labels" height="30vh" /> -->
<AlertList maxHeight="40vh" v-if="activeTab === '安全培训考试'" :table-title="tableTitle" style="margin-left: 1vw;"
:list-data="dataList" />
<div style="width: 80%; padding-left: 1vw;">
<Echart v-if="activeTab === '高危作业'" style="height: 30vh" :options="barChartOption" class="bar-chart" />
</div>
<div ref="riskChart" class="risk-chart" v-if="activeTab === '应急预案及演练'"></div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, nextTick } from 'vue'
import AlertList from './AlertList.vue'
import { rgbToHex } from '@/utils/color'
import * as echarts from 'echarts'
import { getDrillSum, getExamSum, getZBDangerSum } from '../report'
type TabType = '高危作业' | '安全培训考试' | '应急预案及演练'
const activeTab = ref<TabType>('高危作业')
const emit = defineEmits<{
tabChange: [tab: TabType]
}>()
interface AlertItem {
description: string
alarm_level_code: string
alarm_status: string
alarm_biz_id: string
}
interface Props {
riskStatistics?: any
dangerDetail?: AlertItem[]
park?: string
campus_id?: string
}
const tableTitle = [
{
name: '园区名称',
key: 'campus_name'
},
{
name: '累计培训次数',
key: 'examtimes'
},
{
name: '参与总人次',
key: 'exampeoplenum'
},
{
name: '累计培训时长',
key: 'examduration'
},
{
name: '平均通过率',
key: 'exampassrate'
}
]
// 图表引用
const barChartOption = ref({
legend: {
top: '10%',
right: '12%',
orient: 'vertical' as const,
textStyle: {
color: '#ffffff',
fontSize: '11px'
}
},
grid: {
left: '5%',
right: '30%',
top: '10%',
bottom: '15%'
},
xAxis: {
type: 'category' as const,
data: [],
axisLabel: {
color: '#ffffff',
fontSize: 10
},
axisLine: {
lineStyle: { color: '#334155' }
}
},
yAxis: {
type: 'value' as const,
axisLabel: {
color: '#ffffff',
fontSize: 10
},
axisLine: {
lineStyle: { color: '#334155' }
},
splitLine: {
lineStyle: { color: '#334155' }
}
},
series: [
{
name: '未开始数量',
type: 'bar' as const,
data: [],
itemStyle: { color: rgbToHex(99, 196, 251) },
barWidth: '8%',
label: {
show: true,
position: 'top' as const,
color: '#ffffff',
fontSize: 12,
fontWeight: 'bold' as const,
formatter: '{c}'
}
},
{
name: '进行中数量',
type: 'bar' as const,
data: [],
itemStyle: { color: rgbToHex(251, 246, 85) },
barWidth: '8%',
label: {
show: true,
position: 'top' as const,
color: '#ffffff',
fontSize: 12,
fontWeight: 'bold' as const,
formatter: '{c}'
}
},
{
name: '已完成数量',
type: 'bar' as const,
data: [],
itemStyle: { color: rgbToHex(200, 69, 237) },
barWidth: '8%',
label: {
show: true,
position: 'top' as const,
color: '#ffffff',
fontSize: 12,
fontWeight: 'bold' as const,
formatter: '{c}'
}
}
]
})
const dataList = ref<AlertItem[]>([
])
const props = defineProps<Props>()
// 图表引用
const riskChart = ref<HTMLElement | null>(null)
let chartInstance: echarts.ECharts | null = null
// 初始化饼图
const initPieChart = async () => {
if (!riskChart.value) return
chartInstance = echarts.init(riskChart.value)
const colors = [
[
{ offset: 0, color: '#ffb74d' },
{ offset: 0.3, color: '#ff9800' },
{ offset: 0.7, color: '#f57c00' },
{ offset: 1, color: '#e65100' }
],
[
{ offset: 0, color: '#64b5f6' },
{ offset: 0.3, color: '#42a5f5' },
{ offset: 0.7, color: '#2196f3' },
{ offset: 1, color: '#1976d2' }
],
[
{ offset: 0, color: '#81c784' },
{ offset: 0.3, color: '#66bb6a' },
{ offset: 0.7, color: '#4caf50' },
{ offset: 1, color: '#388e3c' }
]
]
const res = await getDrillSum(props.campus_id || '')
const option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0, 0, 0, 0.8)',
borderColor: '#4a9eff',
borderWidth: 1,
textStyle: {
color: '#ffffff'
},
formatter: function (params: any) {
return `${params.data.name}<br/>完成率: ${params.data.value}%`
}
},
series: [
{
name: '园区演练完成率',
type: 'pie',
radius: ['30%', '70%'],
center: ['50%', '50%'],
data: res.records.map((item, index) => (
{
value: item.rate,
name: item.campus_name,
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: colors[index % 3]
}
}
}
))
// [
// {
// value: 100,
// name: '西安创新院',
// itemStyle: {
// color: {
// type: 'radial',
// x: 0.5,
// y: 0.5,
// r: 0.8,
// colorStops: [
// { offset: 0, color: '#ffb74d' },
// { offset: 0.3, color: '#ff9800' },
// { offset: 0.7, color: '#f57c00' },
// { offset: 1, color: '#e65100' }
// ]
// }
// }
// },
// {
// value: 63,
// name: '北京横毅大厦',
// itemStyle: {
// color: {
// type: 'radial',
// x: 0.5,
// y: 0.5,
// r: 0.8,
// colorStops: [
// { offset: 0, color: '#64b5f6' },
// { offset: 0.3, color: '#42a5f5' },
// { offset: 0.7, color: '#2196f3' },
// { offset: 1, color: '#1976d2' }
// ]
// }
// }
// },
// {
// value: 60,
// name: '重庆产业大厦',
// itemStyle: {
// color: {
// type: 'radial',
// x: 0.5,
// y: 0.5,
// r: 0.8,
// colorStops: [
// { offset: 0, color: '#81c784' },
// { offset: 0.3, color: '#66bb6a' },
// { offset: 0.7, color: '#4caf50' },
// { offset: 1, color: '#388e3c' }
// ]
// }
// }
// }
// ]
,
label: {
show: true,
position: 'inside',
formatter: function (params: any) {
return `${params.data.name}\n${params.data.value}%`
},
fontSize: 12,
color: '#ffffff',
fontWeight: 'bold',
textShadowColor: 'rgba(0, 0, 0, 0.8)',
textShadowBlur: 2
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
chartInstance.setOption(option)
}
// 销毁图表
const destroyChart = () => {
if (chartInstance) {
chartInstance.dispose()
chartInstance = null
}
}
const initBarChart = async () => {
try {
const res = await getZBDangerSum(props.campus_id || '')
// 更新图表数据
const newOption = {
...barChartOption.value,
xAxis: {
...barChartOption.value.xAxis,
data: res.records.map((item: any) => item.campus_name)
},
series: [
{
...barChartOption.value.series[0],
data: res.records.map((item: any) => item.ywc)
},
{
...barChartOption.value.series[1],
data: res.records.map((item: any) => item.jxz)
},
{
...barChartOption.value.series[2],
data: res.records.map((item: any) => item.wks)
}
]
}
barChartOption.value = newOption
console.log('Bar chart data updated:', {
xAxis: barChartOption.value.xAxis.data,
series: barChartOption.value.series.map(s => ({ name: s.name, data: s.data }))
})
} catch (error) {
console.error('Failed to load bar chart data:', error)
}
}
// 监听标签页切换
watchEffect(async () => {
if (activeTab.value === '应急预案及演练') {
initPieChart()
} else {
destroyChart()
}
if (activeTab.value === '高危作业') {
initBarChart()
}
if (activeTab.value === '安全培训考试') {
const res = await getExamSum(props.campus_id || '')
dataList.value = res.records
}
})
// 监听数据变化，更新图表
watch(() => props.riskStatistics, (newVal) => {
console.log('riskStatistics changed:', { newVal })
if (newVal) {
refreshCharts(newVal)
}
}, { deep: true })
// 监听数据变化，更新图表
watch(() => props.dangerDetail, (newVal) => {
console.log('dangerDetail changed:', { newVal })
}, { deep: true })
// 监听数据变化，更新图表
watch(() => props.dangerDetail, (newVal) => {
console.log('dangerDetail changed:', { newVal })
if (newVal) {
dataList.value = newVal
}
}, { deep: true })
// 更新图表数据
const refreshCharts = (riskStatistics: any): void => {
if (!riskStatistics || !Array.isArray(riskStatistics)) {
console.warn('riskStatistics is undefined, null, or not an array')
return
}
// 计算各园区的完成率
const chartData = riskStatistics.map((item: any, index: number) => {
const finishCount = Number(item.finishCount) || 0
const participateCount = Number(item.participateCount) || 0
const completionRate = participateCount > 0 ? Math.round((finishCount / participateCount) * 100) : 0
// 为每个园区分配不同的颜色
const colors = ['#ef4444', '#10b981', '#eab308', '#3b82f6', '#8b5cf6', '#f59e0b', '#06b6d4', '#84cc16']
const color = colors[index % colors.length]
return {
value: completionRate,
name: item.csmpus_name || `园区${index + 1}`,
finishCount: finishCount,
participateCount: participateCount,
itemStyle: { color: color }
}
})
console.log("Updated chart data:", chartData)
}
const handleTabClick = async (tab: TabType) => {
activeTab.value = tab
emit('tabChange', tab)
}
onMounted(() => {
// 如果没有传入数据，设置默认数据
if (!props.riskStatistics) {
const defaultData = [
{
csmpus_name: "雄安新区总部",
finishCount: "234",
participateCount: "300"
},
{
csmpus_name: "雄安二区总部",
finishCount: "180",
participateCount: "250"
},
{
csmpus_name: "雄安三区总部",
finishCount: "156",
participateCount: "200"
}
]
refreshCharts(defaultData)
}
// 如果当前是高危作业标签页，初始化柱状图
if (activeTab.value === '高危作业') {
nextTick(() => {
initBarChart()
})
}
})
// 组件卸载时销毁图表
onUnmounted(() => {
destroyChart()
})
</script>
<style scoped lang="scss">
.left-bottom {
background-image: url('@/assets/images/screen/left_top_2_img.png'), url('@/assets/images/screen/left_center_img.png'), url('@/assets/images/screen/left_bottom_img.png');
background-position: top center, left center, bottom center;
background-repeat: no-repeat, no-repeat, no-repeat;
background-size: 100% 90px, cover, 100% 68px;
flex: 1;
.panel-title {
margin: 4px 20px 0;
font-size: 0.8rem;
font-weight: bold;
color: #fff;
}
.tabs {
display: inline-flex;
align-items: center;
column-gap: 8px;
}
.tab {
padding: 2px 10px;
color: #fff;
cursor: pointer;
border-radius: 4px;
transition: all 0.2s ease-in-out;
user-select: none;
}
.tab:hover {
color: #1afb8f;
}
.tab.active {
color: #1afb8f;
background: rgb(26 251 143 / 12%);
border: 1px solid rgb(26 251 143 / 35%);
}
.divider {
margin: 0 2px;
color: #94a3b8;
}
.bottom-card-risk {
display: flex;
flex-direction: column;
.bottom-card-title {
display: flex;
margin-top: 5px;
margin-left: -15%;
flex-direction: column;
align-items: center;
}
}
.donut-chart-with-labels {
width: 30vw;
height: 30vh;
margin-left: 2vw;
}
.risk-chart {
width: 30vw;
height: 30vh;
margin-left: 2vw;
}
}
@media (width <=1024px) {
.left-bottom .donut-chart-with-labels,
.left-bottom .risk-chart {
width: 35vw;
height: 35vh;
}
}
@media (width <=768px) {
.left-bottom {
.tabs .tab {
padding: 1px 8px;
font-size: 0.7rem;
}
.donut-chart-with-labels,
.risk-chart {
width: 40vw;
height: 40vh;
margin-left: 1vw;
}
}
}
@media (width <=480px) {
.left-bottom .donut-chart-with-labels,
.left-bottom .risk-chart {
width: 45vw;
height: 45vh;
margin-left: 0.5vw;
}
}
</style>

773
src/views/screen/components/RiskStatisticsPanel.vue
View File

@@ -2,485 +2,130 @@
<div class="left-bottom">
<div class="panel-title">
<div class="tabs">
<span class="tab" :class="{ active: activeTab === '高危作业' }" @click="handleTabClick('高危作业')">高危作业</span>
<span class="tab" :class="{ active: activeTab === '安全类' }" @click="handleTabClick('安全类')">安全类</span>
<span class="divider">|</span>
<span class="tab" :class="{ active: activeTab === '安全培训考试' }" @click="handleTabClick('安全培训考试')">安全培训考试</span>
<span class="divider">|</span>
<span class="tab" :class="{ active: activeTab === '应急预案及演练' }" @click="handleTabClick('应急预案及演练')">应急预案及演练</span>
<span class="tab" :class="{ active: activeTab === '工程类' }" @click="handleTabClick('工程类')">工程类</span>
</div>
</div>
<img style="margin: 8px 0" src="@/assets/images/title_border_line.png" />
<div class="bottom-card-risk">
<div class="bottom-card-title">
<span>{{ activeTab === '高危作业' ? '各园区统计' : activeTab === '安全培训考试' ? '安全培训考试' : '园区演练完成率' }}</span>
<img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
</div>
</div>
<!-- <Echart v-if="activeTab !== '高危作业'" :options="riskChartOption" class="donut-chart-with-labels" height="30vh" /> -->
<img class="title-line" src="@/assets/images/title_border_line.png" />
<AlertList maxHeight="40vh" v-if="activeTab === '安全培训考试'" :table-title="tableTitle" style="margin-left: 1vw;"
:list-data="dataList" />
<div style="width: 80%; padding-left: 1vw;">
<Echart v-if="activeTab === '高危作业'" style="height: 30vh" :options="barChartOption" class="bar-chart" />
<div class="chart-grid">
<div class="chart-card" v-for="item in currentCharts" :key="item.title">
<div class="chart-title">{{ item.title }}</div>
<div class="chart-content">
<div class="chart-wrapper">
<Echart class="donut-chart" :options="buildOption(item)" />
<div class="chart-center">
<div class="center-title">总数</div>
<div class="center-value">{{ item.total }}</div>
</div>
</div>
<div class="legend">
<div class="legend-label-row">
<ElTooltip v-for="status in statusList" :key="status.key" :content="status.label" effect="dark" placement="right">
<div class="legend-item">
<span class="legend-dot" :style="{ background: status.color }"></span>
<span class="legend-label">{{ status.label }}</span>
<div class="legend-value">
{{ item.status[status.key] }}
</div>
</div>
</ElTooltip>
</div>
<div class="legend-value-row">
<div class="legend-value" v-for="status in statusList" :key="`${status.key}-value`">
{{ item.status[status.key] }}
</div>
</div>
</div>
</div>
</div>
</div>
<div ref="riskChart" class="risk-chart" v-if="activeTab === '应急预案及演练'"></div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, nextTick } from 'vue'
import AlertList from './AlertList.vue'
import { rgbToHex } from '@/utils/color'
import * as echarts from 'echarts'
import { getDrillSum, getExamSum, getZBDangerSum } from '../report'
type TabType = '高危作业' | '安全培训考试' | '应急预案及演练'
const activeTab = ref<TabType>('高危作业')
const emit = defineEmits<{
tabChange: [tab: TabType]
import { computed, ref, watch } from 'vue'
import { ElTooltip } from 'element-plus'
import type { EChartsOption } from 'echarts'
type TabType = '安全类' | '工程类'
type StatusKey = 'notStarted' | 'inProgress' | 'done' | 'voided'
interface ChartItem {
title: string
total: number
status: Record<StatusKey, number>
}
const statusList: { key: StatusKey; label: string; color: string }[] = [
{ key: 'notStarted', label: '未开始', color: '#2a59ff' },
{ key: 'inProgress', label: '进行中', color: '#ff8a00' },
{ key: 'done', label: '已完成', color: '#1bd9ff' },
{ key: 'voided', label: '已作废', color: '#9fa0a6' }
]
const defaultChart: ChartItem[] = [
{ title: '每日检查(维保类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
{ title: '每月检查(维保类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
{ title: '每年检查(维保类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
{ title: '每日检查(巡检类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
{ title: '每月检查(巡检类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
{ title: '每年检查(巡检类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } }
]
const tabCharts = ref<Record<TabType, ChartItem[]>>({
安全类: [...defaultChart],
工程类: [...defaultChart]
})
const props = defineProps<{
riskStatistics?: Record<TabType, ChartItem[]>
}>()
interface AlertItem {
description: string
alarm_level_code: string
alarm_status: string
alarm_biz_id: string
}
interface Props {
riskStatistics?: any
dangerDetail?: AlertItem[]
park?: string
campus_id?: string
}
const tableTitle = [
{
name: '园区名称',
key: 'campus_name'
},
{
name: '累计培训次数',
key: 'examtimes'
},
{
name: '参与总人次',
key: 'exampeoplenum'
},
{
name: '累计培训时长',
key: 'examduration'
},
{
name: '平均通过率',
key: 'exampassrate'
}
]
const activeTab = ref<TabType>('安全类')
const emit = defineEmits<{ tabChange: [tab: TabType] }>()
// 图表引用
const barChartOption = ref({
legend: {
top: '10%',
right: '12%',
orient: 'vertical' as const,
textStyle: {
color: '#ffffff',
fontSize: '11px'
}
},
grid: {
left: '5%',
right: '30%',
top: '10%',
bottom: '15%'
},
xAxis: {
type: 'category' as const,
data: [],
axisLabel: {
color: '#ffffff',
fontSize: 10
},
axisLine: {
lineStyle: { color: '#334155' }
}
},
yAxis: {
type: 'value' as const,
axisLabel: {
color: '#ffffff',
fontSize: 10
},
axisLine: {
lineStyle: { color: '#334155' }
},
splitLine: {
lineStyle: { color: '#334155' }
}
},
series: [
{
name: '未开始数量',
type: 'bar' as const,
data: [],
itemStyle: { color: rgbToHex(99, 196, 251) },
barWidth: '8%',
label: {
show: true,
position: 'top' as const,
color: '#ffffff',
fontSize: 12,
fontWeight: 'bold' as const,
formatter: '{c}'
}
},
{
name: '进行中数量',
type: 'bar' as const,
data: [],
itemStyle: { color: rgbToHex(251, 246, 85) },
barWidth: '8%',
label: {
show: true,
position: 'top' as const,
color: '#ffffff',
fontSize: 12,
fontWeight: 'bold' as const,
formatter: '{c}'
}
},
{
name: '已完成数量',
type: 'bar' as const,
data: [],
itemStyle: { color: rgbToHex(200, 69, 237) },
barWidth: '8%',
label: {
show: true,
position: 'top' as const,
color: '#ffffff',
fontSize: 12,
fontWeight: 'bold' as const,
formatter: '{c}'
// 监听props变化，更新图表数据
watch(() => props.riskStatistics, (newData) => {
if (newData) {
tabCharts.value = {
安全类: newData['安全类'] ? JSON.parse(JSON.stringify(newData['安全类'])) : [...defaultChart],
工程类: newData['工程类'] ? JSON.parse(JSON.stringify(newData['工程类'])) : [...defaultChart]
}
}
]
})
}, { deep: true, immediate: true })
const dataList = ref<AlertItem[]>([
])
const currentCharts = computed(() => tabCharts.value[activeTab.value])
const props = defineProps<Props>()
// 图表引用
const riskChart = ref<HTMLElement | null>(null)
let chartInstance: echarts.ECharts | null = null
// 初始化饼图
const initPieChart = async () => {
if (!riskChart.value) return
chartInstance = echarts.init(riskChart.value)
const colors = [
[
{ offset: 0, color: '#ffb74d' },
{ offset: 0.3, color: '#ff9800' },
{ offset: 0.7, color: '#f57c00' },
{ offset: 1, color: '#e65100' }
],
[
{ offset: 0, color: '#64b5f6' },
{ offset: 0.3, color: '#42a5f5' },
{ offset: 0.7, color: '#2196f3' },
{ offset: 1, color: '#1976d2' }
],
[
{ offset: 0, color: '#81c784' },
{ offset: 0.3, color: '#66bb6a' },
{ offset: 0.7, color: '#4caf50' },
{ offset: 1, color: '#388e3c' }
]
]
const res = await getDrillSum(props.campus_id || '')
const option = {
const buildOption = (item: ChartItem): EChartsOption => ({
backgroundColor: 'transparent',
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0, 0, 0, 0.8)',
borderColor: '#4a9eff',
borderWidth: 1,
textStyle: {
color: '#ffffff'
},
formatter: function (params: any) {
return `${params.data.name}<br/>完成率: ${params.data.value}%`
}
},
tooltip: { show: false },
series: [
{
name: '园区演练完成率',
type: 'pie',
radius: ['30%', '70%'],
type: 'pie' as const,
radius: ['40%', '60%'],
center: ['50%', '50%'],
data: res.records.map((item, index) => (
{
value: item.rate,
name: item.campus_name,
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: colors[index % 3]
}
}
}
))
// [
// {
// value: 100,
// name: '西安创新院',
// itemStyle: {
// color: {
// type: 'radial',
// x: 0.5,
// y: 0.5,
// r: 0.8,
// colorStops: [
// { offset: 0, color: '#ffb74d' },
// { offset: 0.3, color: '#ff9800' },
// { offset: 0.7, color: '#f57c00' },
// { offset: 1, color: '#e65100' }
// ]
// }
// }
// },
// {
// value: 63,
// name: '北京横毅大厦',
// itemStyle: {
// color: {
// type: 'radial',
// x: 0.5,
// y: 0.5,
// r: 0.8,
// colorStops: [
// { offset: 0, color: '#64b5f6' },
// { offset: 0.3, color: '#42a5f5' },
// { offset: 0.7, color: '#2196f3' },
// { offset: 1, color: '#1976d2' }
// ]
// }
// }
// },
// {
// value: 60,
// name: '重庆产业大厦',
// itemStyle: {
// color: {
// type: 'radial',
// x: 0.5,
// y: 0.5,
// r: 0.8,
// colorStops: [
// { offset: 0, color: '#81c784' },
// { offset: 0.3, color: '#66bb6a' },
// { offset: 0.7, color: '#4caf50' },
// { offset: 1, color: '#388e3c' }
// ]
// }
// }
// }
// ]
,
label: {
show: true,
position: 'inside',
formatter: function (params: any) {
return `${params.data.name}\n${params.data.value}%`
},
fontSize: 12,
color: '#ffffff',
fontWeight: 'bold',
textShadowColor: 'rgba(0, 0, 0, 0.8)',
textShadowBlur: 2
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
startAngle: 90,
avoidLabelOverlap: false,
label: { show: false },
labelLine: { show: false },
data: [
{ value: item.status.notStarted, name: '未开始', itemStyle: { color: '#2a59ff' }, label: { show: false } },
{ value: item.status.inProgress, name: '进行中', itemStyle: { color: '#ff8a00' }, label: { show: false } },
{ value: item.status.done, name: '已完成', itemStyle: { color: '#1bd9ff' }, label: { show: false } },
{ value: item.status.voided, name: '已作废', itemStyle: { color: '#9fa0a6' }, label: { show: false } }
],
emphasis: { scale: true, scaleSize: 4 }
}
]
}
chartInstance.setOption(option)
}
// 销毁图表
const destroyChart = () => {
if (chartInstance) {
chartInstance.dispose()
chartInstance = null
}
}
const initBarChart = async () => {
try {
const res = await getZBDangerSum(props.campus_id || '')
// 更新图表数据
const newOption = {
...barChartOption.value,
xAxis: {
...barChartOption.value.xAxis,
data: res.records.map((item: any) => item.campus_name)
},
series: [
{
...barChartOption.value.series[0],
data: res.records.map((item: any) => item.ywc)
},
{
...barChartOption.value.series[1],
data: res.records.map((item: any) => item.jxz)
},
{
...barChartOption.value.series[2],
data: res.records.map((item: any) => item.wks)
}
]
}
barChartOption.value = newOption
console.log('Bar chart data updated:', {
xAxis: barChartOption.value.xAxis.data,
series: barChartOption.value.series.map(s => ({ name: s.name, data: s.data }))
})
} catch (error) {
console.error('Failed to load bar chart data:', error)
}
}
// 监听标签页切换
watchEffect(async () => {
if (activeTab.value === '应急预案及演练') {
initPieChart()
} else {
destroyChart()
}
if (activeTab.value === '高危作业') {
initBarChart()
}
if (activeTab.value === '安全培训考试') {
const res = await getExamSum(props.campus_id || '')
dataList.value = res.records
}
})
// 监听数据变化，更新图表
watch(() => props.riskStatistics, (newVal) => {
console.log('riskStatistics changed:', { newVal })
if (newVal) {
refreshCharts(newVal)
}
}, { deep: true })
// 监听数据变化，更新图表
watch(() => props.dangerDetail, (newVal) => {
console.log('dangerDetail changed:', { newVal })
}, { deep: true })
// 监听数据变化，更新图表
watch(() => props.dangerDetail, (newVal) => {
console.log('dangerDetail changed:', { newVal })
if (newVal) {
dataList.value = newVal
}
}, { deep: true })
// 更新图表数据
const refreshCharts = (riskStatistics: any): void => {
if (!riskStatistics || !Array.isArray(riskStatistics)) {
console.warn('riskStatistics is undefined, null, or not an array')
return
}
// 计算各园区的完成率
const chartData = riskStatistics.map((item: any, index: number) => {
const finishCount = Number(item.finishCount) || 0
const participateCount = Number(item.participateCount) || 0
const completionRate = participateCount > 0 ? Math.round((finishCount / participateCount) * 100) : 0
// 为每个园区分配不同的颜色
const colors = ['#ef4444', '#10b981', '#eab308', '#3b82f6', '#8b5cf6', '#f59e0b', '#06b6d4', '#84cc16']
const color = colors[index % colors.length]
return {
value: completionRate,
name: item.csmpus_name || `园区${index + 1}`,
finishCount: finishCount,
participateCount: participateCount,
itemStyle: { color: color }
}
})
console.log("Updated chart data:", chartData)
}
const handleTabClick = async (tab: TabType) => {
const handleTabClick = (tab: TabType) => {
if (activeTab.value === tab) return
activeTab.value = tab
emit('tabChange', tab)
}
onMounted(() => {
// 如果没有传入数据，设置默认数据
if (!props.riskStatistics) {
const defaultData = [
{
csmpus_name: "雄安新区总部",
finishCount: "234",
participateCount: "300"
},
{
csmpus_name: "雄安二区总部",
finishCount: "180",
participateCount: "250"
},
{
csmpus_name: "雄安三区总部",
finishCount: "156",
participateCount: "200"
}
]
refreshCharts(defaultData)
}
// 如果当前是高危作业标签页，初始化柱状图
if (activeTab.value === '高危作业') {
nextTick(() => {
initBarChart()
})
}
})
// 组件卸载时销毁图表
onUnmounted(() => {
destroyChart()
})
</script>
<style scoped lang="scss">
@@ -528,64 +173,212 @@ onUnmounted(() => {
color: #94a3b8;
}
.bottom-card-risk {
display: flex;
flex-direction: column;
.title-line {
margin: 8px 0;
}
.bottom-card-title {
.chart-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
padding: 0 12px 12px;
width: 66%;
// margin: 0 auto;
}
.chart-card {
background: rgba(18, 34, 63, 0.65);
border: 1px solid rgba(58, 112, 179, 0.55);
border-radius: 10px;
padding: 5px;
display: flex;
margin-top: 5px;
margin-left: -15%;
flex-direction: column;
align-items: center;
box-shadow: 0 4px 12px rgb(0 0 0 / 25%);
}
.chart-title {
width: 100%;
color: #ffffff;
font-size: 13px;
text-align: center;
margin-bottom: 6px;
}
.chart-content {
display: flex;
align-items: center;
// justify-content: flex-start;
// gap: 10px;
width: 100%;
}
.chart-wrapper {
position: relative;
flex: 0 0 90px;
width: 90px;
height: 90px;
}
.donut-chart {
width: 100%;
height: 100% !important; // 强制覆盖 EChart 默认高度，避免过高
}
.chart-center {
pointer-events: none;
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #ffffff;
text-align: center;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.legend {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 0;
width: auto;
}
.legend-label-row {
flex-wrap: nowrap;
gap: 10px;
justify-content: flex-start;
align-items: center;
color: #cbd5e1;
font-size: 12px;
}
.legend-item {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
// display: inline-block;
}
.legend-label {
color: #cbd5e1;
white-space: nowrap;
}
.legend-value-row {
display: none;
gap: 20px;
color: #ffffff;
font-size: 14px;
font-weight: 600;
justify-content: flex-start;
}
.legend-value {
min-width: 14px;
text-align: center;
}
}
.donut-chart-with-labels {
width: 30vw;
height: 30vh;
margin-left: 2vw;
@media (width <=1280px) {
.left-bottom .legend-label-row {
gap: 8px;
}
.risk-chart {
width: 30vw;
height: 30vh;
margin-left: 2vw;
.left-bottom .legend-label {
display: none;
}
.left-bottom .legend-item {
gap: 4px;
}
.left-bottom .chart-wrapper {
flex-basis: 80px;
width: 80px;
height: 80px;
}
}
@media (width <=3000px) {
.left-bottom .legend-label {
display: none;
}
}
@media (width >3000px) {
.left-bottom .chart-content {
flex-direction: column;
align-items: center;
gap: 10px;
}
.left-bottom .legend {
align-items: center;
width: 100%;
}
.left-bottom .legend-label {
display: inline;
}
.left-bottom .legend-label-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 18px;
}
.left-bottom .legend-item {
flex-direction: column;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.left-bottom .legend-label-row .legend-value {
display: block;
}
.left-bottom .legend-value-row {
display: none;
}
.left-bottom .chart-wrapper {
flex-basis: 110px;
width: 110px;
height: 110px;
}
}
@media (width <=1024px) {
.left-bottom .chart-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.left-bottom .donut-chart-with-labels,
.left-bottom .risk-chart {
width: 35vw;
height: 35vh;
.left-bottom .donut-chart {
height: 80px !important;
}
}
@media (width <=768px) {
.left-bottom {
.tabs .tab {
padding: 1px 8px;
font-size: 0.7rem;
.left-bottom .chart-grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.donut-chart-with-labels,
.risk-chart {
width: 40vw;
height: 40vh;
margin-left: 1vw;
}
}
}
@media (width <=480px) {
.left-bottom .donut-chart-with-labels,
.left-bottom .risk-chart {
width: 45vw;
height: 45vh;
margin-left: 0.5vw;
.left-bottom .chart-card {
padding: 5px;
}
}
</style>

168
src/views/screen/mainScreen.vue
View File

@@ -19,22 +19,17 @@
<!-- 主内容区 -->
<div class="content-container">
<div class="left-wrapper">
<OverviewPanel
:totalCount="dashboardData?.totalCount || 0"
<OverviewPanel :totalCount="dashboardData?.totalCount || 0"
:formalEmployeeCount="dashboardData?.formalEmployeeCount || 0"
:externalStaffCount="dashboardData?.externalStaffCount || 0"
:visitorCount="dashboardData?.visitorCount || 0"
:externalStaffCount="dashboardData?.externalStaffCount || 0" :visitorCount="dashboardData?.visitorCount || 0"
:parkStatistics="dashboardData?.parkStatistics" />
<RiskStatisticsPanel
:riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
<RiskStatisticsPanel :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
@tab-change="handleRiskTabChange" :campus_id="query.campus_id" />
</div>
<div class="right-wrapper">
<HighRiskAlertPanel
:alertData="dashboardData?.alertData" :alertDetails="dashboardData?.alertData.details"
<HighRiskAlertPanel :alertData="dashboardData?.alertData" :alertDetails="dashboardData?.alertData.details"
:sourceIndex="sourceIndex" />
<TimeoutWorkOrderPanel
:timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
<TimeoutWorkOrderPanel :timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
:alertDetails="dashboardData?.timeoutWorkOrders.details" :sourceIndex="sourceIndex" />
</div>
<HiddenDangerPanel :hiddenDangerData="dashboardData?.hiddenDangerData" />
@@ -42,13 +37,12 @@
</div>
<!-- 区域选择弹窗 -->
<RegionSelector
v-model="regionSelectorVisible" :modelSelected="selectedRegion" :regions="regionOption"
<RegionSelector v-model="regionSelectorVisible" :modelSelected="selectedRegion" :regions="regionOption"
@change="onRegionChange" />
</template>
<script setup lang="ts">
import {getTableList, getTableData} from './report'
import { getTableList, getTableData, getWorkOrderStatistics } from './report'
import { ref, onMounted, watch, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import RegionSelector from './components/RegionSelector.vue'
@@ -73,7 +67,7 @@ interface RegionItem {
code: string
}
type TabType = '高危作业' | '安全培训考试' | '安全培训考试'
type TabType = '安全类' | '工程类'
// 响应式数据
const currentDateTime = ref<string>('')
@@ -95,7 +89,10 @@ const visitorCount = ref<number>(0)
// 总体概览-各园区统计
const parkStatistics = ref<any>()
// 高危作业/安全培训考试/安全培训考试
const riskStatistics = ref<any>()
const riskStatistics = ref<any>({
安全类: [],
工程类: []
})
const dangerDetail = ref<any>()
// 动画相关的状态
@@ -395,7 +392,7 @@ const loadDashboardData = async (): Promise<void> => {
} catch (error) {
console.error('获取超期工单数据失败:', error)
}
handleRiskTabChange('高危作业')
handleRiskTabChange('安全类')
handleHiddenDangerPannelData(query)
console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
}
@@ -567,93 +564,82 @@ const handleHiddenDangerPannelData = (query) => {
const handleRiskTabChange = async (tab: TabType) => {
console.log('Tab changed to:', tab)
try {
let code = ''
let workOrderType = ''
switch (tab) {
case '高危作业':
code = 'hazardous_operations'
case '安全类':
workOrderType = '安全生产'
break
case '安全培训考试':
code = 'safety_assessment'
break
case '安全培训考试':
code = 'security_training'
case '工程类':
workOrderType = '物业服务-工程'
break
default:
code = 'hazardous_operations'
workOrderType = '安全生产'
}
if (code == 'hazardous_operations') {
// 根据不同的tab请求不同的接口
getTableList(
code,
{...query, activeTab: tab}
).then(response => {
// 更新风险统计数据 - 传递完整的数组数据用于饼图显示
if (response.records && response.records.length > 0) {
dangerDetail.value = response.records
// 同时获取维保任务和巡检任务的数据
const [maintenanceResponse, inspectionResponse] = await Promise.all([
getWorkOrderStatistics(workOrderType, '维保任务').catch(error => {
console.error('获取维保任务数据失败:', error)
return { records: [] }
}),
getWorkOrderStatistics(workOrderType, '巡检任务').catch(error => {
console.error('获取巡检任务数据失败:', error)
return { records: [] }
})
])
// 周期映射
const cycleMap: Record<string, string> = {
'day': '每日',
'month': '每月',
'year': '每年'
}
}).catch(error => {
console.error('获取风险统计数据失败:', error)
if (isFirstLoad.value) {
// dangerDetail.value = [
// {
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
// alarm_level_code: 'general',
// alarm_status: '已关闭',
// alarm_biz_id: '20250827164305283937'
// },
// {
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
// alarm_level_code: 'general',
// alarm_status: '已关闭',
// alarm_biz_id: '20250827164305283937'
// }, {
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
// alarm_level_code: 'general',
// alarm_status: '已关闭',
// alarm_biz_id: '20250827164305283937'
// }, {
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
// alarm_level_code: 'general',
// alarm_status: '已关闭',
// alarm_biz_id: '20250827164305283937'
// }, {
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
// alarm_level_code: 'general',
// alarm_status: '已关闭',
// alarm_biz_id: '20250827164305283937'
// }, {
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
// alarm_level_code: 'general',
// alarm_status: '已关闭',
// alarm_biz_id: '20250827164305283937'
// }
// ]
// 将API数据转换为图表数据格式
const convertToChartData = (records: any[], taskTypeName: string): any[] => {
const charts: any[] = []
// 按周期分组
const cycleGroups: Record<string, any> = {}
records.forEach((record: any) => {
const cycle = record.cycle || 'day'
if (!cycleGroups[cycle]) {
cycleGroups[cycle] = record
}
})
} else {
// 根据不同的tab请求不同的接口
getTableList(
code,
{...query, activeTab: tab}
).then(response => {
// 更新风险统计数据 - 传递完整的数组数据用于饼图显示
if (response.records && response.records.length > 0) {
riskStatistics.value = response.records
} else {
// 如果没有数据，设置默认值
riskStatistics.value = [
{
csmpus_name: "雄安新区总部",
finishCount: "0",
participateCount: "0"
// 创建6个图表（3个周期 x 2个任务类型，但这里只处理一种任务类型）
const cycles = ['day', 'month', 'year']
cycles.forEach((cycle) => {
const data = cycleGroups[cycle] || {}
const title = `${cycleMap[cycle]}检查(${taskTypeName})`
charts.push({
title,
total: Number(data.total) || 0,
status: {
notStarted: Number(data.pending) || 0,
inProgress: Number(data.processing) || 0,
done: Number(data.processed) || 0,
voided: Number(data.closed) || 0
}
]
}
}).catch(error => {
console.error('获取风险统计数据失败:', error)
})
})
return charts
}
// 转换维保和巡检数据
const maintenanceCharts = convertToChartData(maintenanceResponse.records || [], '维保类')
const inspectionCharts = convertToChartData(inspectionResponse.records || [], '巡检类')
// 合并为6个图表：先维保（3个），后巡检（3个）
const allCharts = [...maintenanceCharts, ...inspectionCharts]
// 更新riskStatistics
riskStatistics.value[tab] = allCharts
console.log('更新后的riskStatistics:', riskStatistics.value)
} catch (error) {
console.error('获取风险统计数据失败:', error)
}

17
src/views/screen/report/index.ts
View File

@@ -122,4 +122,21 @@ export const batchGetTableList = (reportCodes: string, data?) => {
return request.post({ url: `/jeelowcode/report-data/batch/list/${reportCodes}`, data })
}
// 总部安全类 /jeelowcode/report-data/list/report_work_order_statistics
// report_work_order_statistics
// 场景一：安全类，维保
// 参数：workOrderType：'安全生产'，taskType：'维保任务'
// 场景二：安全类，巡检
// 参数：workOrderType：'安全生产'，taskType：'巡检任务'
// 场景三：工程类，维保
// 参数：workOrderType：'物业服务-工程'，taskType：'维保任务'
// 场景四：工程类，巡检
// 参数：workOrderType：'物业服务-工程'，taskType：'巡检任务'
// 统计周期 cycle: day，month，year 对应月日年
export const getWorkOrderStatistics = (workOrderType: string, taskType: string) => {
return request.post({ url: '/jeelowcode/report-data/list/report_work_order_statistics', data: {workOrderType, taskType, page: 1, paseSize: 1} })
}