bug修复
This commit is contained in:
chenlin
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user