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

787
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" />
<img class="title-line" src="@/assets/images/title_border_line.png" />
<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>
<!-- <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
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 tableTitle = [
{
name: '园区名称',
key: 'campus_name'
},
{
name: '累计培训次数',
key: 'examtimes'
},
{
name: '参与总人次',
key: 'exampeoplenum'
},
{
name: '累计培训时长',
key: 'examduration'
},
{
name: '平均通过率',
key: 'exampassrate'
}
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 barChartOption = ref({
legend: {
top: '10%',
right: '12%',
orient: 'vertical' as const,
textStyle: {
color: '#ffffff',
fontSize: '11px'
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[]>
}>()
const activeTab = ref<TabType>('安全类')
const emit = defineEmits<{ tabChange: [tab: TabType] }>()
// 监听props变化，更新图表数据
watch(() => props.riskStatistics, (newData) => {
if (newData) {
tabCharts.value = {
安全类: newData['安全类'] ? JSON.parse(JSON.stringify(newData['安全类'])) : [...defaultChart],
工程类: newData['工程类'] ? JSON.parse(JSON.stringify(newData['工程类'])) : [...defaultChart]
}
},
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' }
}
},
}
}, { deep: true, immediate: true })
const currentCharts = computed(() => tabCharts.value[activeTab.value])
const buildOption = (item: ChartItem): EChartsOption => ({
backgroundColor: 'transparent',
tooltip: { show: false },
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}'
}
type: 'pie' as const,
radius: ['40%', '60%'],
center: ['50%', '50%'],
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 }
}
]
})
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) => {
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 {
.title-line {
margin: 8px 0;
}
.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;
flex-direction: column;
.bottom-card-title {
display: flex;
margin-top: 5px;
margin-left: -15%;
flex-direction: column;
align-items: center;
}
align-items: center;
box-shadow: 0 4px 12px rgb(0 0 0 / 25%);
}
.donut-chart-with-labels {
width: 30vw;
height: 30vh;
margin-left: 2vw;
.chart-title {
width: 100%;
color: #ffffff;
font-size: 13px;
text-align: center;
margin-bottom: 6px;
}
.risk-chart {
width: 30vw;
height: 30vh;
margin-left: 2vw;
.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;
}
}
@media (width <=1280px) {
.left-bottom .legend-label-row {
gap: 8px;
}
.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;
}
.donut-chart-with-labels,
.risk-chart {
width: 40vw;
height: 40vh;
margin-left: 1vw;
}
.left-bottom .chart-grid {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
@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>