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

bug修复

Browse Source
This commit is contained in:
chenlin
2025-12-13 18:14:32 +08:00
parent 8f4bf593dc
commit 3e9ac2b357
6 changed files with 210 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
src/views/screen/companyScreen.vue
View File

@@ -75,19 +75,19 @@
<img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
</div>
<div class="type-wrapper">
<div class="type-item">
<div class="type-item">
<span class="type-btn yellow">重大</span>
<span class="type-num">{{ mockData.hiddenDangerData.severityCount }}</span>
<span class="type-num cursor-pointer" @click="handleSeverityCountClick">{{ mockData.hiddenDangerData.severityCount }}</span>
</div>
<div class="type-item">
<span class="type-btn green">一般</span>
<span class="type-num">{{ mockData.hiddenDangerData.generalCount }}</span>
<span class="type-num cursor-pointer" @click="handleGeneralCountClick">{{ mockData.hiddenDangerData.generalCount }}</span>
</div>
<!-- <div class="type-item">
<span class="type-btn blue">较大</span>
<span class="type-num">{{ mockData.hiddenDangerData.majorCount }}</span>
</div> -->
</div>
<div class="hazard-wrapper">
<div ref="progressChartRef" class="progress-chart"></div>
@@ -96,7 +96,7 @@
<div class="legend-item"><span class="dot green"></span>已处理</div>
</div>
<div class="progress-legend">
<!-- <div class="legend-item"><span class="dot yellow"></span>待排查</div>-->
<!-- <div class="legend-item"><span class="dot yellow"></span>待排查</div>-->
<div class="legend-item"><span class="dot blue"></span>处理中</div>
</div>
</div>
@@ -108,62 +108,63 @@
<div class="tabs">
<span class="tab" :class="{ active: activeTab === '高危作业' }" @click="handleTabClick('高危作业')">高危作业</span>
<span class="divider">|</span>
<span
class="tab" :class="{ active: activeTab === '安全培训考试' }"
<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 style="padding-top: 10px;display: flex; flex-direction: column; justify-content: start; height: 91%;">
<template v-if="activeTab === '高危作业'">
<div class="bottom-card">
<div class="bottom-card-title" style="margin-top: 0;">
<span>各园区统计</span>
<img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
</div>
<div style="padding-top: 10px;display: flex; flex-direction: column; justify-content: start; height: 91%;">
<template v-if="activeTab === '高危作业'">
<div class="bottom-card">
<div class="bottom-card-title" style="margin-top: 0;">
<span>各园区统计</span>
<img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
</div>
</div>
<div class="row-wrapper">
<div class="row-item">
<img src="@/assets/images/screen/unfinished.png" width="20" />
<span class="row-item-title">未开始数量</span>
<span class="row-item-number">{{ unfinishedCount }}</span>
</div>
<div class="row-item">
<img src="@/assets/images/screen/inProcess.png" width="20" />
<span class="row-item-title">进行中数量</span>
<span class="row-item-number">{{ inProgressCount }}</span>
</div>
<div class="row-item">
<img src="@/assets/images/screen/finished.png" width="20" />
<span class="row-item-title">已完成数量</span>
<span class="row-item-number">{{ finishedCount }}</span>
</div>
</div>
<div style="display: flex; width: 100%;">
<AlertList maxHeight="25vh" style="margin-left: 1vw;" :list-data="dangerList" />
</div>
</template>
<template v-if="activeTab === '安全培训考试'">
<div class="bottom-card" style="margin-top: 10px;">
<div class="bottom-card-title" style="margin-top: 0;">
<span>安全培训考试</span>
<img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
</div>
</div>
<AlertList maxHeight="40vh" style="margin-left: 1vw;" :table-title="tableTitle" :list-data="examList" />
</template>
<template v-if="activeTab === '应急预案及演练'">
<div class="bottom-card">
<div class="bottom-card-title" style="margin-top: 0;">
<span>应急预案及演练</span>
<img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
</div>
</div>
<AlertList maxHeight="40vh" style="margin-left: 1vw;" :table-title="trainingTableTitle"
:list-data="drillList" />
</template>
</div>
<div class="row-wrapper">
<div class="row-item">
<img src="@/assets/images/screen/unfinished.png" width="20" />
<span class="row-item-title">未开始数量</span>
<span class="row-item-number">{{unfinishedCount}}</span>
</div>
<div class="row-item">
<img src="@/assets/images/screen/inProcess.png" width="20" />
<span class="row-item-title">进行中数量</span>
<span class="row-item-number">{{inProgressCount}}</span>
</div>
<div class="row-item">
<img src="@/assets/images/screen/finished.png" width="20" />
<span class="row-item-title">已完成数量</span>
<span class="row-item-number">{{finishedCount}}</span>
</div>
</div>
<div style="display: flex; width: 100%;">
<AlertList maxHeight="25vh" style="margin-left: 1vw;" :list-data="dangerList" />
</div>
</template>
<template v-if="activeTab === '安全培训考试'">
<div class="bottom-card" style="margin-top: 10px;">
<div class="bottom-card-title" style="margin-top: 0;">
<span>安全培训考试</span>
<img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
</div>
</div>
<AlertList maxHeight="40vh" style="margin-left: 1vw;" :table-title="tableTitle" :list-data="examList" />
</template>
<template v-if="activeTab === '应急预案及演练'">
<div class="bottom-card">
<div class="bottom-card-title" style="margin-top: 0;">
<span>应急预案及演练</span>
<img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
</div>
</div>
<AlertList maxHeight="40vh" style="margin-left: 1vw;" :table-title="trainingTableTitle" :list-data="drillList" />
</template>
</div>
</div>
</div>
<div class="right-wrapper">
@@ -192,11 +193,13 @@ class="tab" :class="{ active: activeTab === '安全培训考试' }"
</div>
<div class="col-item" style=" display: flex;margin-left: 2vw; align-items: center;">
<span>待处理</span>
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.pending }}</span>
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.pending
}}</span>
</div>
<div class="col-item" style=" display: flex;margin-left: 2vw; align-items: center;">
<span>处理中</span>
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.processing }}</span>
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.processing
}}</span>
</div>
</div>
</div>
@@ -218,7 +221,8 @@ class="tab" :class="{ active: activeTab === '安全培训考试' }"
<div class="col-item">
<img src="@/assets/images/screen/warning_img.png" width="23" />
<span>超时工单数</span>
<span style="font-size: 1.2rem; marker-start: 2vw; color: red;">{{ mockData.timeoutWorkOrders.total }}</span>
<span style="font-size: 1.2rem; marker-start: 2vw; color: red;">{{ mockData.timeoutWorkOrders.total
}}</span>
</div>
</div>
</div>
@@ -229,14 +233,12 @@ class="tab" :class="{ active: activeTab === '安全培训考试' }"
</div>
<div class="center-container">
<!-- 中部区域 -->
<ParkCenter
:parkName="selectedPark" :backgroundImage="backgroundImage" @point-hover="handlePointHover"
<ParkCenter :parkName="selectedPark" :backgroundImage="backgroundImage" @point-hover="handlePointHover"
@point-leave="handlePointLeave" />
</div>
<!-- 点位信息弹窗 -->
<PointInfoPopup
v-if="showPointPopup" :visible="showPointPopup" :point-info="currentPoint"
<PointInfoPopup v-if="showPointPopup" :visible="showPointPopup" :point-info="currentPoint"
:park-name="selectedPark || '雄安园区'" />
</div>
</div>
@@ -283,44 +285,50 @@ const unfinishedCount = ref<number>(0)
const inProgressCount = ref<number>(0)
const finishedCount = ref<number>(0)
const handleSeverityCountClick = () => {
window.open('http://10.0.64.20/configcenter/console/device-manage', '_blank')
}
const handleGeneralCountClick = () => {
window.open('http://10.0.64.20/configcenter/console/device-manage', '_blank')
}
const tableTitle = [
{
name: '培训（考试）名称',
key: 'examname'
},
{
name: '参与人次',
key: 'exampeoplenum'
},
{
name: '培训时长（小时）',
key: 'examduration',
},
{
name: '考试通过率(%)',
key: 'exampassrate',
}
]
const tableTitle = [
{
name: '培训（考试）名称',
key: 'examname'
},
{
name: '参与人次',
key: 'exampeoplenum'
},
{
name: '培训时长（小时）',
key: 'examduration',
},
{
name: '考试通过率(%)',
key: 'exampassrate',
}
]
const trainingTableTitle = [
{
name: '演练名称',
key: 'drill_plan_name'
},
{
name: '完成时间',
key: 'drill_time'
},
{
name: '参与人数',
key: 'drill_count'
}
]
const trainingTableTitle = [
{
name: '演练名称',
key: 'drill_plan_name'
},
{
name: '完成时间',
key: 'drill_time'
},
{
name: '参与人数',
key: 'drill_count'
}
]
const examList = ref<any[]>([])
const examList = ref<any[]>([])
const drillList = ref<any[]>([])
const drillList = ref<any[]>([])
const query = reactive({
@@ -543,12 +551,14 @@ const initProgressChart = () => {
labelLayout: function (params: any) {
const isLeft = params.labelRect.x < width / 2;
const points = params.labelLinePoints;
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
if (points && points.length && points[2]) {
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
}
},
}
]
@@ -844,12 +854,14 @@ const handleHiddenDangerPannelData = (query) => {
labelLayout: function (params: any) {
const isLeft = params.labelRect.x < width / 2;
const points = params.labelLinePoints;
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
if (points && points.length && points[2]) {
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
}
},
}
]
@@ -1002,7 +1014,7 @@ const handleTabClick = async (tab: string) => {
code1 = "fire_drill_detail"
getDangerDetail(query.campus_id).then(res => {
const list = res.records.map((item: any) => ({description: item.contenttext}))
const list = res.records.map((item: any) => ({ description: item.contenttext }))
dangerList.value = list
})
@@ -1011,7 +1023,7 @@ const handleTabClick = async (tab: string) => {
inProgressCount.value = res.records[0].jxz
finishedCount.value = res.records[0].ywc
})
break
case '安全培训考试':
code = 'security_training_count'
@@ -1186,6 +1198,9 @@ onUnmounted(() => {
</script>
<style scoped lang="scss">
.cursor-pointer {
cursor: pointer;
}
/* 响应式设计 - 自动适应不同屏幕尺寸 */
@media (width <=1200px) {
.dashboard-container {

79
src/views/screen/components/AlertList.vue
View File

@@ -15,7 +15,7 @@
<div class="list-wrapper" ref="listWrapperRef" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
<!-- 表格模式 -->
<template v-if="tableTitle && tableTitle.length > 0">
<div class="table-row" v-for="(item, index) in listData" :key="`table-${index}`" @mouseenter="handleMouseEnter">
<div @click="handleItemClick(item)" class="table-row cursor-pointer" v-for="(item, index) in listData" :key="`table-${index}`" @mouseenter="handleMouseEnter">
<div class="table-cell" v-for="(title, cellIndex) in tableTitle" :key="`cell-${index}-${cellIndex}`">
{{ item[title.key] || '-' }}
</div>
@@ -24,7 +24,7 @@
<!-- 列表模式 -->
<template v-else>
<div class="list-item" v-for="(item, index) in listData" :key="`list-${index}`" @mouseenter="handleMouseEnter">
<div @click="handleItemClick(item)" class="list-item cursor-pointer" v-for="(item, index) in listData" :key="`list-${index}`" @mouseenter="handleMouseEnter">
<span class="alert-text" :class="[{ error: item.alarm_level_code == 'severity' }, { warn: item.alarm_level_code == 'major' }]">
{{ (index + 1) }} {{ item.description }}
</span>
@@ -71,9 +71,14 @@ const props = withDefaults(defineProps<Props>(), {
const listWrapperRef = ref<HTMLElement | null>(null)
let scrollTimer: NodeJS.Timeout | null = null
let isScrolling = false
let scrollDirection: 'down' | 'up' = 'down' // 滚动方向：向下或向上
const handleItemClick = (item: AlertItem) => {
window.open(`http://10.0.64.20/configcenter/console/device-manage`, '_blank')
}
// 自动滚动功能
const startAutoScroll = () => {
const startAutoScroll = (resetToTop: boolean = false) => {
if (!props.autoScroll || !listWrapperRef.value) return
const wrapper = listWrapperRef.value
@@ -83,20 +88,61 @@ const startAutoScroll = () => {
// 只有当内容高度超过容器高度时才启动滚动
if (scrollHeight <= clientHeight) return
// 如果是首次启动或需要重置，从顶部开始向下滚动
if (resetToTop) {
wrapper.scrollTop = 0
scrollDirection = 'down'
} else {
// 否则根据当前位置判断滚动方向
const currentScrollTop = wrapper.scrollTop
const maxScrollTop = scrollHeight - clientHeight
if (currentScrollTop >= maxScrollTop - 1) {
// 在底部，向上滚动
scrollDirection = 'up'
} else if (currentScrollTop <= 1) {
// 在顶部，向下滚动
scrollDirection = 'down'
}
// 在中间位置，保持当前方向（或默认向下）
}
isScrolling = true
let currentScrollTop = listWrapperRef.value.scrollTop
const scroll = () => {
if (!isScrolling || !wrapper) return
currentScrollTop += props.scrollSpeed
const currentScrollTop = wrapper.scrollTop
const maxScrollTop = scrollHeight - clientHeight
// 如果滚动到底部，重置到顶部
if (currentScrollTop >= scrollHeight - clientHeight) {
currentScrollTop = 0
wrapper.scrollTop = 0
if (scrollDirection === 'down') {
// 向下滚动
const nextScrollTop = currentScrollTop + props.scrollSpeed
if (nextScrollTop >= maxScrollTop) {
// 滚动到底部，切换方向为向上
wrapper.scrollTop = maxScrollTop
scrollDirection = 'up'
// 在底部停留一小段时间后开始向上滚动
scrollTimer = setTimeout(scroll, 500)
return
} else {
wrapper.scrollTop = nextScrollTop
}
} else {
wrapper.scrollTop = currentScrollTop
// 向上滚动
const nextScrollTop = currentScrollTop - props.scrollSpeed
if (nextScrollTop <= 0) {
// 滚动到顶部，切换方向为向下
wrapper.scrollTop = 0
scrollDirection = 'down'
// 在顶部停留一小段时间后开始向下滚动
scrollTimer = setTimeout(scroll, 500)
return
} else {
wrapper.scrollTop = nextScrollTop
}
}
scrollTimer = setTimeout(scroll, 50) // 每50ms滚动一次，实现平滑效果
@@ -121,8 +167,9 @@ const handleMouseEnter = () => {
const handleMouseLeave = () => {
if (props.autoScroll) {
// 延迟启动滚动，避免鼠标快速进出
// 从当前位置继续，不重置
setTimeout(() => {
startAutoScroll()
startAutoScroll(false)
}, 500)
}
}
@@ -133,7 +180,8 @@ watch(() => props.listData, () => {
if (props.autoScroll) {
stopAutoScroll()
setTimeout(() => {
startAutoScroll()
// 数据更新后从顶部重新开始
startAutoScroll(true)
}, 1000) // 数据更新后1秒开始滚动
}
})
@@ -141,9 +189,9 @@ watch(() => props.listData, () => {
onMounted(() => {
if (props.autoScroll) {
// 组件挂载后延迟启动滚动
// 组件挂载后延迟启动滚动，从顶部开始
setTimeout(() => {
startAutoScroll()
startAutoScroll(true)
}, 2000)
}
})
@@ -154,6 +202,9 @@ onUnmounted(() => {
</script>
<style scoped lang="scss">
.cursor-pointer {
cursor: pointer;
}
.list-content {
display: flex;
width: 68%;

18
src/views/screen/components/HiddenDangerPanel.vue
View File

@@ -193,6 +193,15 @@ watch(() => props.hiddenDangerData?.progress, (newVal) => {
refreshProcessCharts(newVal)
}, { deep: true })
// 辅助函数：安全地将值转换为数字，处理 NaN 和字符串 "NaN" 的情况
const safeNumber = (val: any): number => {
if (val === null || val === undefined || val === '' || val === 'NaN') {
return 0
}
const num = Number(val)
return isNaN(num) ? 0 : num
}
// 更新图表数据
const refreshProcessCharts = (process): void => {
if (!props.hiddenDangerData?.progress) {
@@ -200,11 +209,12 @@ const refreshProcessCharts = (process): void => {
return
}
const option = { ...progressChartOption.value }
// 确保所有 value 都是有效的数字，将字符串 "NaN" 或真正的 NaN 转换为 0
option.series[0].data = [
{ value: process.overdue || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
{ value: process.processed || 0, name: '已处理', itemStyle: { color: '#10b981' } },
// { value: process.pending || 0, name: '待排查', itemStyle: { color: '#eab308' } },
{ value: process.processing || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
{ value: safeNumber(process.overdue), name: '已逾期', itemStyle: { color: '#ef4444' } },
{ value: safeNumber(process.processed), name: '已处理', itemStyle: { color: '#10b981' } },
// { value: safeNumber(process.pending), name: '待排查', itemStyle: { color: '#eab308' } },
{ value: safeNumber(process.processing), name: '处理中', itemStyle: { color: '#3b82f6' } }
]
progressChartOption.value = option
}

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

@@ -3,7 +3,7 @@
<!-- 顶部标题栏 -->
<div class="header-container">
<div class="header-left">
<div class="back-button" @click="openRegionSelector"> 总部
<div class="back-button" @click="openRegionSelector"> 集团
<span>···</span>
</div>
</div>

6
src/views/screen/regionScreen.vue
View File

@@ -374,9 +374,9 @@ const loadDashboardData = async (): Promise<void> => {
try {
// 获取风险预警详情数据
getTableList('risk_alert_detail', query).then(risk_alert_detail => {
if (risk_alert_detail.records && risk_alert_detail.records.length > 0) {
dashboardData.value.alertData.details = risk_alert_detail.records
}
// if (risk_alert_detail.records && risk_alert_detail.records.length > 0) {
dashboardData.value.alertData.details = risk_alert_detail.records || []
// }
}).catch(error => {
console.error('获取风险预警详情数据失败:', error)
})