Merge branch 'dev' of http://120.46.213.136:9528/isoftstone/lc_frontend into dev
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -2,15 +2,19 @@
|
||||
<div class="dashboard-container">
|
||||
<!-- 顶部标题栏 -->
|
||||
<div class="header-container">
|
||||
<div class="header-left">
|
||||
<el-icon class="back-arrow" @click="returnToHeadquarters">
|
||||
<ArrowLeft />
|
||||
</el-icon>
|
||||
<div class="region-name-clickable" @click="openParkSelector">
|
||||
{{ selectedRegion }}
|
||||
<span>···</span>
|
||||
</div>
|
||||
</div>
|
||||
<HeaderSelector
|
||||
back-button-type="image"
|
||||
:show-back-button="true"
|
||||
:on-back="returnToHeadquarters"
|
||||
:display-text="selectedRegion"
|
||||
:clickable="true"
|
||||
:show-selector-indicator="true"
|
||||
selector-type="park"
|
||||
:selected-value="selectedPark"
|
||||
:region-code="route.query.regionCode as string"
|
||||
theme="light"
|
||||
@selector-change="onParkChange"
|
||||
/>
|
||||
<!-- <h1 class="header-title">区域视角数据看板</h1> -->
|
||||
<div class="header-right">
|
||||
<div class="date-range-wrapper">
|
||||
@@ -41,16 +45,33 @@
|
||||
<Echart :options="outsourcingChartOption" width="100%" height="200px" />
|
||||
</div>
|
||||
<div class="region-distribution">
|
||||
<div class="distribution-title">园区分布</div>
|
||||
<div class="distribution-list">
|
||||
<div class="distribution-item" v-for="item in outsourcingDistribution" :key="item.region">
|
||||
<span class="dot" :style="{ backgroundColor: item.color }"></span>
|
||||
<span class="region-name">{{ item.region }}</span>
|
||||
<span class="region-count">{{ item.count }}人</span>
|
||||
<span class="region-percent">({{ item.percent }})</span>
|
||||
</div>
|
||||
<div class="distribution-title">园区人数分布</div>
|
||||
<div class="grid-wrapper">
|
||||
<!-- 第一列：园区名称 -->
|
||||
<div class="grid-column">
|
||||
<div class="grid-header empty-header"></div>
|
||||
<div class="grid-park-name" v-for="item in outsourcingDistribution" :key="'area-' + item.region">
|
||||
{{ item.region }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 人数列 -->
|
||||
<div class="grid-column">
|
||||
<div class="grid-header">人数</div>
|
||||
<div class="grid-number" v-for="item in outsourcingDistribution"
|
||||
:key="'count-' + item.region">
|
||||
{{ item.count }}人
|
||||
</div>
|
||||
</div>
|
||||
<!-- 占比列 -->
|
||||
<div class="grid-column">
|
||||
<div class="grid-header">占比</div>
|
||||
<div class="grid-number" v-for="item in outsourcingDistribution"
|
||||
:key="'percent-' + item.region">
|
||||
{{ item.percent }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -69,28 +90,47 @@
|
||||
</div>
|
||||
<div class="risk-distribution-table">
|
||||
<div class="distribution-title">园区风险分布</div>
|
||||
<div class="table-wrapper">
|
||||
<table class="risk-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>园区</th>
|
||||
<th>低</th>
|
||||
<th>一般</th>
|
||||
<th>较大</th>
|
||||
<th>重大</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in parkRiskDistribution" :key="item.park">
|
||||
<td>{{ item.park }}</td>
|
||||
<td>{{ item.low || '' }}</td>
|
||||
<td>{{ item.general }}</td>
|
||||
<td>{{ item.moderate }}</td>
|
||||
<td>{{ item.major }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="grid-wrapper">
|
||||
<!-- 第一列：园区名称 -->
|
||||
<div class="grid-column">
|
||||
<div class="grid-header empty-header"></div>
|
||||
<div class="grid-park-name" v-for="item in parkRiskDistribution" :key="'area-' + item.park">
|
||||
{{ item.park }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 低列 -->
|
||||
<div class="grid-column">
|
||||
<div class="grid-header status-low">低</div>
|
||||
<div class="grid-number status-low" v-for="item in parkRiskDistribution"
|
||||
:key="'low-' + item.park">
|
||||
{{ item.low || '0' }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 一般列 -->
|
||||
<div class="grid-column">
|
||||
<div class="grid-header status-general">一般</div>
|
||||
<div class="grid-number status-general" v-for="item in parkRiskDistribution"
|
||||
:key="'general-' + item.park">
|
||||
{{ item.general || '0' }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 较大列 -->
|
||||
<div class="grid-column">
|
||||
<div class="grid-header status-moderate">较大</div>
|
||||
<div class="grid-number status-moderate" v-for="item in parkRiskDistribution"
|
||||
:key="'moderate-' + item.park">
|
||||
{{ item.moderate || '0' }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 重大列 -->
|
||||
<div class="grid-column">
|
||||
<div class="grid-header status-major">重大</div>
|
||||
<div class="grid-number status-major" v-for="item in parkRiskDistribution"
|
||||
:key="'major-' + item.park">
|
||||
{{ item.major || '0' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -106,11 +146,14 @@
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="line-chart-wrapper">
|
||||
<Echart :options="hiddenDangerChartOption" width="100%" height="180px" />
|
||||
</div>
|
||||
<Echart :key="hiddenDangerChartKey" :options="hiddenDangerChartOption" width="100%" height="180px" />
|
||||
</div>
|
||||
<div class="rectification-status-grid">
|
||||
<div class="distribution-title">园区整改状态</div>
|
||||
<div class="grid-wrapper">
|
||||
<div v-if="parkRectificationStatus.length === 0" class="empty-data-tip">
|
||||
暂无数据
|
||||
</div>
|
||||
<div v-else class="grid-wrapper">
|
||||
<!-- 第一列：园区名称 -->
|
||||
<div class="grid-column">
|
||||
<div class="grid-header empty-header"></div>
|
||||
@@ -122,21 +165,21 @@
|
||||
<div class="grid-column">
|
||||
<div class="grid-header status-overdue">已逾期</div>
|
||||
<div class="grid-number status-overdue" v-for="item in parkRectificationStatus" :key="'overdue-' + item.park">
|
||||
{{ item.overdue }}
|
||||
{{ item.overdue ?? 0 }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 处理中列 -->
|
||||
<div class="grid-column">
|
||||
<div class="grid-header status-processing">处理中</div>
|
||||
<div class="grid-number status-processing" v-for="item in parkRectificationStatus" :key="'processing-' + item.park">
|
||||
{{ item.processing }}
|
||||
{{ item.processing ?? 0 }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 已处理列 -->
|
||||
<div class="grid-column">
|
||||
<div class="grid-header status-processed">已处理</div>
|
||||
<div class="grid-number status-processed" v-for="item in parkRectificationStatus" :key="'processed-' + item.park">
|
||||
{{ item.processed }}
|
||||
{{ item.processed ?? 0 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -254,16 +297,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 园区选择弹窗 -->
|
||||
<RegionSelector v-model="parkSelectorVisible" :modelSelected="selectedPark" :regions="parkOption"
|
||||
@change="onParkChange" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { Refresh, ArrowLeft } from '@element-plus/icons-vue'
|
||||
import { Refresh } from '@element-plus/icons-vue'
|
||||
import Echart from '@/components/Echart/src/Echart.vue'
|
||||
import type { EChartsOption } from 'echarts'
|
||||
import dayjs from 'dayjs'
|
||||
@@ -277,8 +317,7 @@ import {
|
||||
getHiddenDangerManagementDataRegionWeek,
|
||||
getHiddenDangerManagementDataRegionMonth
|
||||
} from '@/api'
|
||||
import RegionSelector from '@/views/screen/components/RegionSelector.vue'
|
||||
import { getTableList } from '@/api/design/report'
|
||||
import HeaderSelector from '@/views/screen/components/HeaderSelector.vue'
|
||||
|
||||
defineOptions({ name: 'Home12' })
|
||||
|
||||
@@ -319,8 +358,6 @@ const route = useRoute()
|
||||
// 区域和园区选择相关
|
||||
const selectedRegion = ref<string>('')
|
||||
const selectedPark = ref<string>('')
|
||||
const parkSelectorVisible = ref<boolean>(false)
|
||||
const parkOption = ref<ParkItem[]>([])
|
||||
|
||||
// 外协管理：/person/table/view/1959187451673116674
|
||||
// 风险管理：/fx/table/view/1978723750599790594
|
||||
@@ -329,22 +366,22 @@ const parkOption = ref<ParkItem[]>([])
|
||||
// 应急预案：/yayl/table/view/1966394259751907330
|
||||
// 安全培训：/pxks/table/view/1968225010550091777
|
||||
const openOutsourcingManagement = () => {
|
||||
window.open('/person/table/view/1959187451673116674', '_blank')
|
||||
router.push('/person/table/view/1959187451673116674')
|
||||
}
|
||||
const openRiskManagement = () => {
|
||||
window.open('/fx/table/view/1978723750599790594', '_blank')
|
||||
router.push('/fx/table/view/1978723750599790594')
|
||||
}
|
||||
const openHiddenDangerManagement = () => {
|
||||
window.open('/fx/table/view/1963446160885366786', '_blank')
|
||||
router.push('/fx/table/view/1963446160885366786')
|
||||
}
|
||||
const openHighRiskManagement = () => {
|
||||
window.open('/low/table/view/1964253329070571521', '_blank')
|
||||
router.push('/low/table/view/1964253329070571521')
|
||||
}
|
||||
const openEmergencyPlanManagement = () => {
|
||||
window.open('/yayl/table/view/1966394259751907330', '_blank')
|
||||
router.push('/yayl/table/view/1966394259751907330')
|
||||
}
|
||||
const openTrainingManagement = () => {
|
||||
window.open('/pxks/table/view/1968225010550091777', '_blank')
|
||||
router.push('/pxks/table/view/1968225010550091777')
|
||||
}
|
||||
// 时间选择相关 - 默认当前月起止，如果路由中有日期范围参数则使用
|
||||
const getCurrentMonthRange = () => {
|
||||
@@ -408,35 +445,10 @@ const operationTypeColors: Record<string, string> = {
|
||||
}
|
||||
|
||||
// 初始化区域数据 - 加载园区列表
|
||||
// 初始化区域数据 - 只设置选中区域，园区列表由 HeaderSelector 组件内部管理
|
||||
const initRegionData = async () => {
|
||||
try {
|
||||
if (typeof route.query.region === 'string') {
|
||||
selectedRegion.value = route.query.region
|
||||
}
|
||||
|
||||
// 加载园区列表
|
||||
const { records } = await getTableList('park_info_list')
|
||||
|
||||
if (records && records.length > 0) {
|
||||
// 根据regionCode过滤园区
|
||||
const regionCode = route.query.regionCode as string
|
||||
const parkMap = new Map<string, ParkItem>()
|
||||
|
||||
records
|
||||
.filter((el: any) => el.region_id == regionCode)
|
||||
.forEach((el: any) => {
|
||||
if (!parkMap.has(el.park_name)) {
|
||||
parkMap.set(el.park_name, {
|
||||
name: el.park_name,
|
||||
code: el.park_code
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
parkOption.value = Array.from(parkMap.values())
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('初始化区域数据失败:', error)
|
||||
if (typeof route.query.region === 'string') {
|
||||
selectedRegion.value = route.query.region
|
||||
}
|
||||
}
|
||||
|
||||
@@ -451,15 +463,9 @@ const returnToHeadquarters = () => {
|
||||
})
|
||||
}
|
||||
|
||||
// 打开园区选择器
|
||||
const openParkSelector = (): void => {
|
||||
parkSelectorVisible.value = true
|
||||
}
|
||||
|
||||
// 园区选择变化 - 跳转到园区页面
|
||||
const onParkChange = (item: ParkItem): void => {
|
||||
selectedPark.value = item.name
|
||||
parkSelectorVisible.value = false
|
||||
router.push({
|
||||
path: '/park',
|
||||
query: {
|
||||
@@ -591,10 +597,10 @@ const initRiskData = async () => {
|
||||
|
||||
// 处理风险等级分布数据（用于环形图）
|
||||
const allLevels = [
|
||||
{ key: '低', level: '低风险', count: 0, percent: '0%', color: '#10b981' },
|
||||
{ key: '一般', level: '一般风险', count: 0, percent: '0%', color: '#f59e0b' },
|
||||
{ key: '较大', level: '较大风险', count: 0, percent: '0%', color: '#ef4444' },
|
||||
{ key: '重大', level: '重大风险', count: 0, percent: '0%', color: '#dc2626' }
|
||||
{ key: '低', level: '低风险', count: 0, percent: '0%', color: '#117cee' },
|
||||
{ key: '一般', level: '一般风险', count: 0, percent: '0%', color: '#fbde28' },
|
||||
{ key: '较大', level: '较大风险', count: 0, percent: '0%', color: '#ed740c' },
|
||||
{ key: '重大', level: '重大风险', count: 0, percent: '0%', color: '#df2a3f' }
|
||||
]
|
||||
|
||||
riskDistribution.value = allLevels.map(defaultItem => {
|
||||
@@ -632,10 +638,10 @@ const initRiskData = async () => {
|
||||
} else {
|
||||
riskTotal.value = 0
|
||||
riskDistribution.value = [
|
||||
{ level: '低风险', count: 0, percent: '0%', color: '#10b981' },
|
||||
{ level: '一般风险', count: 0, percent: '0%', color: '#f59e0b' },
|
||||
{ level: '较大风险', count: 0, percent: '0%', color: '#ef4444' },
|
||||
{ level: '重大风险', count: 0, percent: '0%', color: '#dc2626' }
|
||||
{ level: '低风险', count: 0, percent: '0%', color: '#117cee' },
|
||||
{ level: '一般风险', count: 0, percent: '0%', color: '#fbde28' },
|
||||
{ level: '较大风险', count: 0, percent: '0%', color: '#ed740c' },
|
||||
{ level: '重大风险', count: 0, percent: '0%', color: '#df2a3f' }
|
||||
]
|
||||
parkRiskDistribution.value = []
|
||||
console.log('区域风险管理无数据')
|
||||
@@ -644,10 +650,10 @@ const initRiskData = async () => {
|
||||
console.error('获取区域风险管理数据失败:', error)
|
||||
riskTotal.value = 0
|
||||
riskDistribution.value = [
|
||||
{ level: '低风险', count: 0, percent: '0%', color: '#10b981' },
|
||||
{ level: '一般风险', count: 0, percent: '0%', color: '#f59e0b' },
|
||||
{ level: '较大风险', count: 0, percent: '0%', color: '#ef4444' },
|
||||
{ level: '重大风险', count: 0, percent: '0%', color: '#dc2626' }
|
||||
{ level: '低风险', count: 0, percent: '0%', color: '#117cee' },
|
||||
{ level: '一般风险', count: 0, percent: '0%', color: '#fbde28' },
|
||||
{ level: '较大风险', count: 0, percent: '0%', color: '#ed740c' },
|
||||
{ level: '重大风险', count: 0, percent: '0%', color: '#df2a3f' }
|
||||
]
|
||||
parkRiskDistribution.value = []
|
||||
}
|
||||
@@ -1053,6 +1059,21 @@ const outsourcingChartOption = computed<EChartsOption>(() => {
|
||||
if (chartData.length === 0 || outsourcingTotal.value === 0) {
|
||||
return {
|
||||
tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
style: {
|
||||
text: `${outsourcingTotal.value}\n外协人员总数`,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
fill: '#333',
|
||||
textAlign: 'center',
|
||||
textVerticalAlign: 'middle'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [{
|
||||
name: '外协人员',
|
||||
type: 'pie',
|
||||
@@ -1060,13 +1081,8 @@ const outsourcingChartOption = computed<EChartsOption>(() => {
|
||||
center: ['50%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
formatter: () => `${outsourcingTotal.value}\n外协人员总数`,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: '#333'
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
data: [{ value: 1, name: '暂无数据', itemStyle: { color: '#e5e7eb' } }]
|
||||
}]
|
||||
@@ -1075,6 +1091,21 @@ const outsourcingChartOption = computed<EChartsOption>(() => {
|
||||
|
||||
return {
|
||||
tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
style: {
|
||||
text: `${outsourcingTotal.value}\n外协人员总数`,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
fill: '#333',
|
||||
textAlign: 'center',
|
||||
textVerticalAlign: 'middle'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [{
|
||||
name: '外协人员',
|
||||
type: 'pie',
|
||||
@@ -1083,14 +1114,9 @@ const outsourcingChartOption = computed<EChartsOption>(() => {
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
formatter: () => `${outsourcingTotal.value}\n外协人员总数`,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: '#333'
|
||||
show: false
|
||||
},
|
||||
emphasis: { label: { show: true, fontSize: 18, fontWeight: 'bold' } },
|
||||
emphasis: { label: { show: true, fontSize: 14, fontWeight: 'bold' } },
|
||||
data: chartData
|
||||
}]
|
||||
}
|
||||
@@ -1106,6 +1132,21 @@ const riskChartOption = computed<EChartsOption>(() => {
|
||||
|
||||
return {
|
||||
tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
style: {
|
||||
text: `${riskTotal.value}\n风险总数`,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
fill: '#333',
|
||||
textAlign: 'center',
|
||||
textVerticalAlign: 'middle'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [{
|
||||
name: '风险',
|
||||
type: 'pie',
|
||||
@@ -1115,23 +1156,52 @@ const riskChartOption = computed<EChartsOption>(() => {
|
||||
itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
formatter: () => `${riskTotal.value}\n风险总数`,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: '#333'
|
||||
alignTo: 'edge',
|
||||
formatter: (params: any) => {
|
||||
const value = Number(params.value) || 0
|
||||
const total = Number(riskTotal.value) || 0
|
||||
if (total === 0) {
|
||||
return '0%'
|
||||
}
|
||||
const percent = ((value / total) * 100).toFixed(2) + '%'
|
||||
return percent
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
emphasis: { label: { show: true, fontSize: 18, fontWeight: 'bold' } },
|
||||
data: chartData
|
||||
}]
|
||||
}
|
||||
})
|
||||
|
||||
// 隐患管理图表 key，用于强制刷新图表
|
||||
const hiddenDangerChartKey = computed(() => {
|
||||
// 基于数据长度和内容生成 key，确保数据变化时图表能正确刷新
|
||||
const dataLength = hiddenDangerTrend.value.length
|
||||
const dataHash = dataLength > 0
|
||||
? JSON.stringify(hiddenDangerTrend.value.map(item => `${item.date}-${item.general}-${item.major}`)).slice(0, 50)
|
||||
: 'empty'
|
||||
return `hidden-danger-${dataLength}-${dataHash}`
|
||||
})
|
||||
|
||||
// 隐患管理折线图配置
|
||||
const hiddenDangerChartOption = computed<EChartsOption>(() => {
|
||||
const dates = hiddenDangerTrend.value.map(item => item.date)
|
||||
const generalData = hiddenDangerTrend.value.map(item => item.general)
|
||||
const majorData = hiddenDangerTrend.value.map(item => item.major)
|
||||
const dates = hiddenDangerTrend.value.map(item => item.date).filter(date => date) // 过滤掉空日期
|
||||
const generalData = hiddenDangerTrend.value.map(item => item.general ?? 0)
|
||||
const majorData = hiddenDangerTrend.value.map(item => item.major ?? 0)
|
||||
|
||||
// 判断是否为空数据：只有当原始数据数组为空，或者所有数据值都为0时才认为为空
|
||||
const totalGeneral = generalData.reduce((sum, v) => sum + v, 0)
|
||||
const totalMajor = majorData.reduce((sum, v) => sum + v, 0)
|
||||
const isEmpty = hiddenDangerTrend.value.length === 0 || (totalGeneral === 0 && totalMajor === 0)
|
||||
|
||||
return {
|
||||
tooltip: { trigger: 'axis' },
|
||||
@@ -1139,14 +1209,40 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
|
||||
data: ['一般隐患', '重大隐患'],
|
||||
top: 10
|
||||
},
|
||||
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||
grid: { left: '3%', right: '4%', bottom: '3%', top: '12%', containLabel: true },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: dates
|
||||
data: isEmpty ? [] : dates,
|
||||
show: !isEmpty
|
||||
},
|
||||
yAxis: { type: 'value' },
|
||||
series: [
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: !isEmpty
|
||||
},
|
||||
graphic: isEmpty ? [
|
||||
{
|
||||
type: 'group',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
children: [
|
||||
{
|
||||
type: 'text',
|
||||
z: 100,
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
style: {
|
||||
text: '暂无数据',
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal',
|
||||
fill: '#9ca3af',
|
||||
textAlign: 'center'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
] : [],
|
||||
series: isEmpty ? [] : [
|
||||
{
|
||||
name: '一般隐患',
|
||||
type: 'line',
|
||||
@@ -1169,6 +1265,21 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
|
||||
const highRiskChartOption = computed<EChartsOption>(() => {
|
||||
return {
|
||||
tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
style: {
|
||||
text: `${highRiskTotal.value}\n累计作业`,
|
||||
fontSize: 15,
|
||||
fontWeight: 'bold',
|
||||
fill: '#333',
|
||||
textAlign: 'center',
|
||||
textVerticalAlign: 'middle'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [{
|
||||
name: '高危作业',
|
||||
type: 'pie',
|
||||
@@ -1177,14 +1288,9 @@ const highRiskChartOption = computed<EChartsOption>(() => {
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
formatter: () => `${highRiskTotal.value}\n累计作业`,
|
||||
fontSize: 15,
|
||||
fontWeight: 'bold',
|
||||
color: '#333'
|
||||
show: false
|
||||
},
|
||||
emphasis: { label: { show: true, fontSize: 20, fontWeight: 'bold' } },
|
||||
emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
|
||||
data: operationTypeDistribution.value.map(item => ({
|
||||
value: item.count,
|
||||
name: item.type,
|
||||
@@ -1559,6 +1665,14 @@ onMounted(() => {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
}
|
||||
}
|
||||
|
||||
.distribution-list {
|
||||
@@ -1595,11 +1709,104 @@ onMounted(() => {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
// 风险管理网格样式（与隐患管理一致）
|
||||
.risk-distribution-table {
|
||||
.grid-wrapper {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.grid-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
|
||||
&:first-child {
|
||||
align-items: flex-start;
|
||||
margin-right: 20px;
|
||||
flex: 0 0 auto;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
flex: 1;
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-header {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 12px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
|
||||
&.empty-header {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&.status-low {
|
||||
color: #117cee;
|
||||
}
|
||||
|
||||
&.status-general {
|
||||
color: #fbde28;
|
||||
}
|
||||
|
||||
&.status-moderate {
|
||||
color: #ed740c;
|
||||
}
|
||||
|
||||
&.status-major {
|
||||
color: #df2a3f;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-park-name {
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
text-align: left;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-number {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.status-low {
|
||||
color: #117cee;
|
||||
}
|
||||
|
||||
&.status-general {
|
||||
color: #fbde28;
|
||||
}
|
||||
|
||||
&.status-moderate {
|
||||
color: #ed740c;
|
||||
}
|
||||
|
||||
&.status-major {
|
||||
color: #df2a3f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.risk-table,
|
||||
.status-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
@@ -1616,7 +1823,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@@ -1627,6 +1834,13 @@ onMounted(() => {
|
||||
|
||||
// 九宫格样式
|
||||
.rectification-status-grid {
|
||||
.empty-data-tip {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
color: #9ca3af;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.grid-wrapper {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
@@ -1715,6 +1929,74 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
// 外协管理网格样式（与隐患管理一致）
|
||||
.region-distribution {
|
||||
.grid-wrapper {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.grid-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
|
||||
&:first-child {
|
||||
align-items: flex-start;
|
||||
margin-right: 20px;
|
||||
flex: 0 0 auto;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
flex: 1;
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-header {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 12px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
color: #374151;
|
||||
|
||||
&.empty-header {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-park-name {
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
text-align: left;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-number {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
color: #1f2937;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.high-risk-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -2,12 +2,16 @@
|
||||
<div class="dashboard-container">
|
||||
<!-- 顶部标题栏 -->
|
||||
<div class="header-container">
|
||||
<div class="header-left">
|
||||
<el-icon class="back-arrow" @click="returnToRegion">
|
||||
<ArrowLeft />
|
||||
</el-icon>
|
||||
<div class="park-name">{{ selectedPark }}</div>
|
||||
</div>
|
||||
<HeaderSelector
|
||||
back-button-type="image"
|
||||
:show-back-button="true"
|
||||
:on-back="returnToRegion"
|
||||
:display-text="selectedPark"
|
||||
:clickable="false"
|
||||
:show-selector-indicator="false"
|
||||
selector-type="none"
|
||||
theme="light"
|
||||
/>
|
||||
<!-- <h1 class="header-title">园区视角数据看板</h1> -->
|
||||
<div class="header-right">
|
||||
<div class="date-range-wrapper">
|
||||
@@ -38,16 +42,33 @@
|
||||
<Echart :options="outsourcingChartOption" width="100%" height="200px" />
|
||||
</div>
|
||||
<div class="region-distribution">
|
||||
<div class="distribution-title">供应商分布</div>
|
||||
<div class="distribution-list">
|
||||
<div class="distribution-item" v-for="item in supplierDistribution" :key="item.supplier">
|
||||
<span class="dot" :style="{ backgroundColor: item.color }"></span>
|
||||
<span class="region-name">{{ item.supplier }}</span>
|
||||
<span class="region-count">{{ item.count }}人</span>
|
||||
<span class="region-percent">({{ item.percent }})</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="distribution-title">供应商人数分布</div>
|
||||
<div class="grid-wrapper">
|
||||
<!-- 第一列：供应商名称 -->
|
||||
<div class="grid-column">
|
||||
<div class="grid-header empty-header"></div>
|
||||
<div class="grid-park-name" v-for="item in supplierDistribution" :key="'area-' + item.supplier">
|
||||
{{ item.supplier }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 人数列 -->
|
||||
<div class="grid-column">
|
||||
<div class="grid-header">人数</div>
|
||||
<div class="grid-number" v-for="item in supplierDistribution"
|
||||
:key="'count-' + item.supplier">
|
||||
{{ item.count }}人
|
||||
</div>
|
||||
</div>
|
||||
<!-- 占比列 -->
|
||||
<div class="grid-column">
|
||||
<div class="grid-header">占比</div>
|
||||
<div class="grid-number" v-for="item in supplierDistribution"
|
||||
:key="'percent-' + item.supplier">
|
||||
{{ item.percent }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -66,28 +87,47 @@
|
||||
</div>
|
||||
<div class="risk-distribution-table">
|
||||
<div class="distribution-title">地点风险分布</div>
|
||||
<div class="table-wrapper">
|
||||
<table class="risk-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>所在地点</th>
|
||||
<th>低</th>
|
||||
<th>一般</th>
|
||||
<th>较大</th>
|
||||
<th>重大</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in locationRiskDistribution" :key="item.location">
|
||||
<td>{{ item.location }}</td>
|
||||
<td>{{ item.low || '' }}</td>
|
||||
<td>{{ item.general }}</td>
|
||||
<td>{{ item.moderate }}</td>
|
||||
<td>{{ item.major }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="grid-wrapper">
|
||||
<!-- 第一列：地点名称 -->
|
||||
<div class="grid-column">
|
||||
<div class="grid-header empty-header"></div>
|
||||
<div class="grid-park-name" v-for="item in locationRiskDistribution" :key="'area-' + item.location">
|
||||
{{ item.location }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 低列 -->
|
||||
<div class="grid-column">
|
||||
<div class="grid-header status-low">低</div>
|
||||
<div class="grid-number status-low" v-for="item in locationRiskDistribution"
|
||||
:key="'low-' + item.location">
|
||||
{{ item.low || '0' }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 一般列 -->
|
||||
<div class="grid-column">
|
||||
<div class="grid-header status-general">一般</div>
|
||||
<div class="grid-number status-general" v-for="item in locationRiskDistribution"
|
||||
:key="'general-' + item.location">
|
||||
{{ item.general || '0' }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 较大列 -->
|
||||
<div class="grid-column">
|
||||
<div class="grid-header status-moderate">较大</div>
|
||||
<div class="grid-number status-moderate" v-for="item in locationRiskDistribution"
|
||||
:key="'moderate-' + item.location">
|
||||
{{ item.moderate || '0' }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 重大列 -->
|
||||
<div class="grid-column">
|
||||
<div class="grid-header status-major">重大</div>
|
||||
<div class="grid-number status-major" v-for="item in locationRiskDistribution"
|
||||
:key="'major-' + item.location">
|
||||
{{ item.major || '0' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -103,11 +143,14 @@
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="line-chart-wrapper">
|
||||
<Echart :options="hiddenDangerChartOption" width="100%" height="180px" />
|
||||
</div>
|
||||
<Echart :key="hiddenDangerChartKey" :options="hiddenDangerChartOption" width="100%" height="180px" />
|
||||
</div>
|
||||
<div class="rectification-status-grid">
|
||||
<div class="distribution-title">所属公司整改状态</div>
|
||||
<div class="grid-wrapper">
|
||||
<div v-if="companyRectificationStatus.length === 0" class="empty-data-tip">
|
||||
暂无数据
|
||||
</div>
|
||||
<div v-else class="grid-wrapper">
|
||||
<!-- 第一列：公司名称 -->
|
||||
<div class="grid-column">
|
||||
<div class="grid-header empty-header"></div>
|
||||
@@ -119,21 +162,21 @@
|
||||
<div class="grid-column">
|
||||
<div class="grid-header status-overdue">已逾期</div>
|
||||
<div class="grid-number status-overdue" v-for="item in companyRectificationStatus" :key="'overdue-' + item.company">
|
||||
{{ item.overdue }}
|
||||
{{ item.overdue ?? 0 }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 处理中列 -->
|
||||
<div class="grid-column">
|
||||
<div class="grid-header status-processing">处理中</div>
|
||||
<div class="grid-number status-processing" v-for="item in companyRectificationStatus" :key="'processing-' + item.company">
|
||||
{{ item.processing }}
|
||||
{{ item.processing ?? 0 }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 已处理列 -->
|
||||
<div class="grid-column">
|
||||
<div class="grid-header status-processed">已处理</div>
|
||||
<div class="grid-number status-processed" v-for="item in companyRectificationStatus" :key="'processed-' + item.company">
|
||||
{{ item.processed }}
|
||||
{{ item.processed ?? 0 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -258,7 +301,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { Refresh, ArrowLeft } from '@element-plus/icons-vue'
|
||||
import { Refresh } from '@element-plus/icons-vue'
|
||||
import Echart from '@/components/Echart/src/Echart.vue'
|
||||
import type { EChartsOption } from 'echarts'
|
||||
import dayjs from 'dayjs'
|
||||
@@ -272,6 +315,7 @@ import {
|
||||
getHiddenDangerManagementDataParkWeek,
|
||||
getHiddenDangerManagementDataParkMonth
|
||||
} from '@/api'
|
||||
import HeaderSelector from '@/views/screen/components/HeaderSelector.vue'
|
||||
|
||||
defineOptions({ name: 'Home13' })
|
||||
|
||||
@@ -319,22 +363,22 @@ const route = useRoute()
|
||||
// 应急预案：/yayl/table/view/1966394259751907330
|
||||
// 安全培训：/pxks/table/view/1968225010550091777
|
||||
const openOutsourcingManagement = () => {
|
||||
window.open('/person/table/view/1959187451673116674', '_blank')
|
||||
router.push('/person/table/view/1959187451673116674')
|
||||
}
|
||||
const openRiskManagement = () => {
|
||||
window.open('/fx/table/view/1978723750599790594', '_blank')
|
||||
router.push('/fx/table/view/1978723750599790594')
|
||||
}
|
||||
const openHiddenDangerManagement = () => {
|
||||
window.open('/fx/table/view/1963446160885366786', '_blank')
|
||||
router.push('/fx/table/view/1963446160885366786')
|
||||
}
|
||||
const openHighRiskManagement = () => {
|
||||
window.open('/low/table/view/1964253329070571521', '_blank')
|
||||
router.push('/low/table/view/1964253329070571521')
|
||||
}
|
||||
const openEmergencyPlanManagement = () => {
|
||||
window.open('/yayl/table/view/1966394259751907330', '_blank')
|
||||
router.push('/yayl/table/view/1966394259751907330')
|
||||
}
|
||||
const openTrainingManagement = () => {
|
||||
window.open('/pxks/table/view/1968225010550091777', '_blank')
|
||||
router.push('/pxks/table/view/1968225010550091777')
|
||||
}
|
||||
// 园区名称 - 从路由参数获取
|
||||
const selectedPark = ref<string>('')
|
||||
@@ -541,10 +585,10 @@ const initRiskData = async () => {
|
||||
|
||||
// 处理风险等级分布数据（用于环形图）
|
||||
const allLevels = [
|
||||
{ key: '低', level: '低风险', count: 0, percent: '0%', color: '#10b981' },
|
||||
{ key: '一般', level: '一般风险', count: 0, percent: '0%', color: '#f59e0b' },
|
||||
{ key: '较大', level: '较大风险', count: 0, percent: '0%', color: '#ef4444' },
|
||||
{ key: '重大', level: '重大风险', count: 0, percent: '0%', color: '#dc2626' }
|
||||
{ key: '低', level: '低风险', count: 0, percent: '0%', color: '#117cee' },
|
||||
{ key: '一般', level: '一般风险', count: 0, percent: '0%', color: '#fbde28' },
|
||||
{ key: '较大', level: '较大风险', count: 0, percent: '0%', color: '#ed740c' },
|
||||
{ key: '重大', level: '重大风险', count: 0, percent: '0%', color: '#df2a3f' }
|
||||
]
|
||||
|
||||
riskDistribution.value = allLevels.map(defaultItem => {
|
||||
@@ -582,10 +626,10 @@ const initRiskData = async () => {
|
||||
} else {
|
||||
riskTotal.value = 0
|
||||
riskDistribution.value = [
|
||||
{ level: '低风险', count: 0, percent: '0%', color: '#10b981' },
|
||||
{ level: '一般风险', count: 0, percent: '0%', color: '#f59e0b' },
|
||||
{ level: '较大风险', count: 0, percent: '0%', color: '#ef4444' },
|
||||
{ level: '重大风险', count: 0, percent: '0%', color: '#dc2626' }
|
||||
{ level: '低风险', count: 0, percent: '0%', color: '#117cee' },
|
||||
{ level: '一般风险', count: 0, percent: '0%', color: '#fbde28' },
|
||||
{ level: '较大风险', count: 0, percent: '0%', color: '#ed740c' },
|
||||
{ level: '重大风险', count: 0, percent: '0%', color: '#df2a3f' }
|
||||
]
|
||||
locationRiskDistribution.value = []
|
||||
console.log('园区风险管理无数据')
|
||||
@@ -594,10 +638,10 @@ const initRiskData = async () => {
|
||||
console.error('获取园区风险管理数据失败:', error)
|
||||
riskTotal.value = 0
|
||||
riskDistribution.value = [
|
||||
{ level: '低风险', count: 0, percent: '0%', color: '#10b981' },
|
||||
{ level: '一般风险', count: 0, percent: '0%', color: '#f59e0b' },
|
||||
{ level: '较大风险', count: 0, percent: '0%', color: '#ef4444' },
|
||||
{ level: '重大风险', count: 0, percent: '0%', color: '#dc2626' }
|
||||
{ level: '低风险', count: 0, percent: '0%', color: '#117cee' },
|
||||
{ level: '一般风险', count: 0, percent: '0%', color: '#fbde28' },
|
||||
{ level: '较大风险', count: 0, percent: '0%', color: '#ed740c' },
|
||||
{ level: '重大风险', count: 0, percent: '0%', color: '#df2a3f' }
|
||||
]
|
||||
locationRiskDistribution.value = []
|
||||
}
|
||||
@@ -974,6 +1018,21 @@ const outsourcingChartOption = computed<EChartsOption>(() => {
|
||||
if (chartData.length === 0 || outsourcingTotal.value === 0) {
|
||||
return {
|
||||
tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
style: {
|
||||
text: `${outsourcingTotal.value}\n外协人员总数`,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
fill: '#333',
|
||||
textAlign: 'center',
|
||||
textVerticalAlign: 'middle'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [{
|
||||
name: '外协人员',
|
||||
type: 'pie',
|
||||
@@ -981,13 +1040,8 @@ const outsourcingChartOption = computed<EChartsOption>(() => {
|
||||
center: ['50%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
formatter: () => `${outsourcingTotal.value}\n外协人员总数`,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: '#333'
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
data: [{ value: 1, name: '暂无数据', itemStyle: { color: '#e5e7eb' } }]
|
||||
}]
|
||||
@@ -996,6 +1050,21 @@ const outsourcingChartOption = computed<EChartsOption>(() => {
|
||||
|
||||
return {
|
||||
tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
style: {
|
||||
text: `${outsourcingTotal.value}\n外协人员总数`,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
fill: '#333',
|
||||
textAlign: 'center',
|
||||
textVerticalAlign: 'middle'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [{
|
||||
name: '外协人员',
|
||||
type: 'pie',
|
||||
@@ -1004,14 +1073,9 @@ const outsourcingChartOption = computed<EChartsOption>(() => {
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
formatter: () => `${outsourcingTotal.value}\n外协人员总数`,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: '#333'
|
||||
show: false
|
||||
},
|
||||
emphasis: { label: { show: true, fontSize: 18, fontWeight: 'bold' } },
|
||||
emphasis: { label: { show: true, fontSize: 14, fontWeight: 'bold' } },
|
||||
data: chartData
|
||||
}]
|
||||
}
|
||||
@@ -1027,6 +1091,21 @@ const riskChartOption = computed<EChartsOption>(() => {
|
||||
|
||||
return {
|
||||
tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
style: {
|
||||
text: `${riskTotal.value}\n风险总数`,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
fill: '#333',
|
||||
textAlign: 'center',
|
||||
textVerticalAlign: 'middle'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [{
|
||||
name: '风险',
|
||||
type: 'pie',
|
||||
@@ -1036,23 +1115,52 @@ const riskChartOption = computed<EChartsOption>(() => {
|
||||
itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
formatter: () => `${riskTotal.value}\n风险总数`,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: '#333'
|
||||
alignTo: 'edge',
|
||||
formatter: (params: any) => {
|
||||
const value = Number(params.value) || 0
|
||||
const total = Number(riskTotal.value) || 0
|
||||
if (total === 0) {
|
||||
return '0%'
|
||||
}
|
||||
const percent = ((value / total) * 100).toFixed(2) + '%'
|
||||
return percent
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
emphasis: { label: { show: true, fontSize: 18, fontWeight: 'bold' } },
|
||||
data: chartData
|
||||
}]
|
||||
}
|
||||
})
|
||||
|
||||
// 隐患管理图表 key，用于强制刷新图表
|
||||
const hiddenDangerChartKey = computed(() => {
|
||||
// 基于数据长度和内容生成 key，确保数据变化时图表能正确刷新
|
||||
const dataLength = hiddenDangerTrend.value.length
|
||||
const dataHash = dataLength > 0
|
||||
? JSON.stringify(hiddenDangerTrend.value.map(item => `${item.date}-${item.general}-${item.major}`)).slice(0, 50)
|
||||
: 'empty'
|
||||
return `hidden-danger-${dataLength}-${dataHash}`
|
||||
})
|
||||
|
||||
// 隐患管理折线图配置
|
||||
const hiddenDangerChartOption = computed<EChartsOption>(() => {
|
||||
const dates = hiddenDangerTrend.value.map(item => item.date)
|
||||
const generalData = hiddenDangerTrend.value.map(item => item.general)
|
||||
const majorData = hiddenDangerTrend.value.map(item => item.major)
|
||||
const dates = hiddenDangerTrend.value.map(item => item.date).filter(date => date) // 过滤掉空日期
|
||||
const generalData = hiddenDangerTrend.value.map(item => item.general ?? 0)
|
||||
const majorData = hiddenDangerTrend.value.map(item => item.major ?? 0)
|
||||
|
||||
// 判断是否为空数据：只有当原始数据数组为空，或者所有数据值都为0时才认为为空
|
||||
const totalGeneral = generalData.reduce((sum, v) => sum + v, 0)
|
||||
const totalMajor = majorData.reduce((sum, v) => sum + v, 0)
|
||||
const isEmpty = hiddenDangerTrend.value.length === 0 || (totalGeneral === 0 && totalMajor === 0)
|
||||
|
||||
return {
|
||||
tooltip: { trigger: 'axis' },
|
||||
@@ -1060,14 +1168,41 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
|
||||
data: ['一般隐患', '重大隐患'],
|
||||
top: 10
|
||||
},
|
||||
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
|
||||
grid: { left: '3%', right: '4%', bottom: '3%', top: '12%', containLabel: true },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: dates
|
||||
data: isEmpty ? [] : dates,
|
||||
show: !isEmpty
|
||||
},
|
||||
yAxis: { type: 'value', max: 45 },
|
||||
series: [
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 45,
|
||||
show: !isEmpty
|
||||
},
|
||||
graphic: isEmpty ? [
|
||||
{
|
||||
type: 'group',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
children: [
|
||||
{
|
||||
type: 'text',
|
||||
z: 100,
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
style: {
|
||||
text: '暂无数据',
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal',
|
||||
fill: '#9ca3af',
|
||||
textAlign: 'center'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
] : [],
|
||||
series: isEmpty ? [] : [
|
||||
{
|
||||
name: '一般隐患',
|
||||
type: 'line',
|
||||
@@ -1090,6 +1225,21 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
|
||||
const highRiskChartOption = computed<EChartsOption>(() => {
|
||||
return {
|
||||
tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: 'center',
|
||||
style: {
|
||||
text: `${highRiskTotal.value}\n累计作业`,
|
||||
fontSize: 15,
|
||||
fontWeight: 'bold',
|
||||
fill: '#333',
|
||||
textAlign: 'center',
|
||||
textVerticalAlign: 'middle'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [{
|
||||
name: '高危作业',
|
||||
type: 'pie',
|
||||
@@ -1098,14 +1248,9 @@ const highRiskChartOption = computed<EChartsOption>(() => {
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
|
||||
label: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
formatter: () => `${highRiskTotal.value}\n累计作业`,
|
||||
fontSize: 15,
|
||||
fontWeight: 'bold',
|
||||
color: '#333'
|
||||
show: false
|
||||
},
|
||||
emphasis: { label: { show: true, fontSize: 20, fontWeight: 'bold' } },
|
||||
emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
|
||||
data: operationTypeDistribution.value.map(item => ({
|
||||
value: item.count,
|
||||
name: item.type,
|
||||
@@ -1466,6 +1611,14 @@ onMounted(() => {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
}
|
||||
}
|
||||
|
||||
.distribution-list {
|
||||
@@ -1502,11 +1655,104 @@ onMounted(() => {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
// 风险管理网格样式（与隐患管理一致）
|
||||
.risk-distribution-table {
|
||||
.grid-wrapper {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.grid-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
|
||||
&:first-child {
|
||||
align-items: flex-start;
|
||||
margin-right: 20px;
|
||||
flex: 0 0 auto;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
flex: 1;
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-header {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 12px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
|
||||
&.empty-header {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&.status-low {
|
||||
color: #117cee;
|
||||
}
|
||||
|
||||
&.status-general {
|
||||
color: #fbde28;
|
||||
}
|
||||
|
||||
&.status-moderate {
|
||||
color: #ed740c;
|
||||
}
|
||||
|
||||
&.status-major {
|
||||
color: #df2a3f;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-park-name {
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
text-align: left;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-number {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.status-low {
|
||||
color: #117cee;
|
||||
}
|
||||
|
||||
&.status-general {
|
||||
color: #fbde28;
|
||||
}
|
||||
|
||||
&.status-moderate {
|
||||
color: #ed740c;
|
||||
}
|
||||
|
||||
&.status-major {
|
||||
color: #df2a3f;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.risk-table,
|
||||
.status-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
@@ -1535,6 +1781,13 @@ onMounted(() => {
|
||||
// 九宫格样式
|
||||
// 九宫格样式
|
||||
.rectification-status-grid {
|
||||
.empty-data-tip {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
color: #9ca3af;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.grid-wrapper {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
@@ -1623,6 +1876,74 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
// 外协管理网格样式（与隐患管理一致）
|
||||
.region-distribution {
|
||||
.grid-wrapper {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.grid-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
|
||||
&:first-child {
|
||||
align-items: flex-start;
|
||||
margin-right: 20px;
|
||||
flex: 0 0 auto;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
flex: 1;
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-header {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 12px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
color: #374151;
|
||||
|
||||
&.empty-header {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-park-name {
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
text-align: left;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-number {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
color: #1f2937;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.high-risk-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -2,10 +2,15 @@
|
||||
<div class="dashboard-container">
|
||||
<!-- 顶部标题栏 -->
|
||||
<div class="header-container">
|
||||
<div class="header-left">
|
||||
<img class="back-img" @click="returnToHeadquarters" src="@/assets/images/screen/back_image.png" />
|
||||
<div class="back-button"> {{ selectedPark }} </div>
|
||||
</div>
|
||||
<HeaderSelector
|
||||
back-button-type="image"
|
||||
:show-back-button="true"
|
||||
:on-back="returnToHeadquarters"
|
||||
:display-text="selectedPark"
|
||||
:clickable="false"
|
||||
:show-selector-indicator="false"
|
||||
selector-type="none"
|
||||
/>
|
||||
<h1 class="header-title">{{ selectedPark }}综合监控大屏</h1>
|
||||
<div class="date-wrapper">
|
||||
<span style="margin-top: 6%;font-size: 0.9rem;">{{ currentDate }}</span>
|
||||
@@ -29,7 +34,10 @@
|
||||
</div>
|
||||
<span>总计</span>
|
||||
<div class="number-wrapper">
|
||||
<span class="total-number" v-for="(digit, index) in totalCountDigits" :key="index">
|
||||
<div v-if="isFirstLoading" class="skeleton-number-wrapper">
|
||||
<div v-for="i in 4" :key="i" class="skeleton-number skeleton-pulse"></div>
|
||||
</div>
|
||||
<span v-else class="total-number" v-for="(digit, index) in totalCountDigits" :key="index">
|
||||
{{ digit }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -37,32 +45,53 @@
|
||||
</div>
|
||||
<div class="top-card-right">
|
||||
<div class="top-card-right-item">
|
||||
<img width="18px" src="@/assets/images/v2_rel0n8.png" />
|
||||
<span>正式员工</span>
|
||||
<div class="type-number-wrapper" style="margin-left: 2vw">
|
||||
<span class="type-number" v-for="(digit, index) in formalEmployeeDigits" :key="index">
|
||||
{{ digit }}
|
||||
</span>
|
||||
<div>
|
||||
<img width="18px" src="@/assets/images/v2_rel0n8.png" />
|
||||
<span>正式员工</span>
|
||||
</div>
|
||||
<div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
|
||||
<div v-if="isFirstLoading" class="skeleton-type-number-wrapper">
|
||||
<div v-for="i in formalEmployeeDigits.length" :key="i" class="skeleton-type-number skeleton-pulse"></div>
|
||||
</div>
|
||||
<div v-else class="type-number-wrapper">
|
||||
<span class="type-number" v-for="(digit, index) in formalEmployeeDigits" :key="index">
|
||||
{{ digit }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span>人</span>
|
||||
</div>
|
||||
<div class="top-card-right-item">
|
||||
<img width="18px" src="@/assets/images/v2_rel0n23.png" />
|
||||
<span>外协人员</span>
|
||||
<div class="type-number-wrapper" style="margin-left: 1vw">
|
||||
<span class="type-number" v-for="(digit, index) in externalStaffDigits" :key="index">
|
||||
{{ digit }}
|
||||
</span>
|
||||
<div>
|
||||
<img width="18px" src="@/assets/images/v2_rel0n23.png" />
|
||||
<span>外协人员</span>
|
||||
</div>
|
||||
<div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
|
||||
<div v-if="isFirstLoading" class="skeleton-type-number-wrapper">
|
||||
<div v-for="i in externalStaffDigits.length" :key="i" class="skeleton-type-number skeleton-pulse"></div>
|
||||
</div>
|
||||
<div v-else class="type-number-wrapper">
|
||||
<span class="type-number" v-for="(digit, index) in externalStaffDigits" :key="index">
|
||||
{{ digit }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span>人</span>
|
||||
</div>
|
||||
<div class="top-card-right-item">
|
||||
<img width="18px" src="@/assets/images/24508_654.png" />
|
||||
<span>访客</span>
|
||||
<div class="type-number-wrapper">
|
||||
<span class="type-number" v-for="(digit, index) in visitorDigits" :key="index">
|
||||
{{ digit }}
|
||||
</span>
|
||||
<div>
|
||||
<img width="18px" src="@/assets/images/24508_654.png" />
|
||||
<span>访客</span>
|
||||
</div>
|
||||
<div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
|
||||
<div v-if="isFirstLoading" class="skeleton-type-number-wrapper">
|
||||
<div v-for="i in visitorDigits.length" :key="i" class="skeleton-type-number skeleton-pulse"></div>
|
||||
</div>
|
||||
<div v-else class="type-number-wrapper">
|
||||
<span class="type-number" v-for="(digit, index) in visitorDigits" :key="index">
|
||||
{{ digit }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span>人</span>
|
||||
</div>
|
||||
@@ -77,12 +106,14 @@
|
||||
<div class="type-wrapper">
|
||||
<div class="type-item">
|
||||
<span class="type-btn yellow">重大</span>
|
||||
<span class="type-num cursor-pointer" @click="handleSeverityCountClick">{{
|
||||
<div v-if="isFirstLoading" class="type-num skeleton-pulse"></div>
|
||||
<span v-else 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 cursor-pointer" @click="handleGeneralCountClick">{{
|
||||
<div v-if="isFirstLoading" class="type-num skeleton-pulse"></div>
|
||||
<span v-else class="type-num cursor-pointer" @click="handleGeneralCountClick">{{
|
||||
mockData.hiddenDangerData.generalCount }}</span>
|
||||
</div>
|
||||
<!-- <div class="type-item">
|
||||
@@ -92,6 +123,7 @@
|
||||
|
||||
</div>
|
||||
<div class="hazard-wrapper">
|
||||
<!-- <div v-if="isFirstLoading" class="skeleton-chart skeleton-pulse"></div> -->
|
||||
<div ref="progressChartRef" class="progress-chart"></div>
|
||||
<div class="progress-legend">
|
||||
<div class="legend-item"><span class="dot red"></span>已逾期</div>
|
||||
@@ -154,7 +186,12 @@
|
||||
<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" />
|
||||
<AlertList
|
||||
maxHeight="40vh"
|
||||
style="margin-left: 1vw;"
|
||||
:table-title="tableTitle"
|
||||
:list-data="examList"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="activeTab === '应急预案及演练'">
|
||||
<div class="bottom-card">
|
||||
@@ -167,7 +204,7 @@
|
||||
:list-data="drillList" />
|
||||
</template>
|
||||
</div> -->
|
||||
<RiskStatisticsPanel :riskStatistics="riskStatistics" :dangerDetail="dangerDetail" :park="parkValue"
|
||||
<RiskStatisticsPanel :loading="isFirstLoading" :riskStatistics="riskStatistics" :dangerDetail="dangerDetail" :park="parkValue"
|
||||
@tab-change="handleRiskTabChange" :campus_id="query.campus_id" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -181,34 +218,39 @@
|
||||
<div class="tip-container">
|
||||
<div class="tip-image">
|
||||
<img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
|
||||
<span class="number">{{ mockData.alertData.total }}</span>
|
||||
<div v-if="isFirstLoading" style="width: 20px; height: 20px" class="number skeleton-pulse"></div>
|
||||
<span v-else class="number">{{ mockData.alertData.total }}</span>
|
||||
</div>
|
||||
<img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
|
||||
<div class="tip-content">
|
||||
<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: yellow;">{{ mockData.alertData.total }}</span>
|
||||
<div v-if="isFirstLoading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
|
||||
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.total }}</span>
|
||||
</div>
|
||||
<div class="col-item">
|
||||
<span>已处理</span>
|
||||
<span style="font-size: 1.2rem; marker-start: 2vw; color: greenyellow;">{{ mockData.alertData.processed
|
||||
<div v-if="isFirstLoading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
|
||||
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: greenyellow;">{{ mockData.alertData.processed
|
||||
}}</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.pending
|
||||
<div v-if="isFirstLoading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
|
||||
<span v-else 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
|
||||
<div v-if="isFirstLoading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
|
||||
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.processing
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style=" display: flex; width: 100%;margin-top: 1vw; flex: 1; justify-content: flex-end;">
|
||||
<AlertList linkUrl="http://10.0.64.20/security/console/command-center?p=tabl" style="margin-right: 1vw;" title="告警详情" :list-data="mockData.alertData.details" />
|
||||
<AlertList :loading="isFirstLoading" linkUrl="http://10.0.64.20/security/console/command-center?p=tabl" style="margin-right: 1vw;" title="告警详情" :list-data="mockData.alertData.details" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右下区域 -->
|
||||
@@ -218,20 +260,30 @@
|
||||
<div class="tip-container">
|
||||
<div class="tip-image">
|
||||
<img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
|
||||
<span class="number">{{ mockData.timeoutWorkOrders.total }}</span>
|
||||
<div v-if="isFirstLoading" style="width: 20px; height: 20px" class="number skeleton-pulse"></div>
|
||||
<span v-else class="number">{{ mockData.timeoutWorkOrders.total }}</span>
|
||||
</div>
|
||||
<img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
|
||||
<div class="tip-content">
|
||||
<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>
|
||||
<div v-if="isFirstLoading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
|
||||
<span
|
||||
v-else
|
||||
style="font-size: 1.2rem; marker-start: 2vw; color: red;"
|
||||
>{{ mockData.timeoutWorkOrders.total }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style=" display: flex; width: 100%;margin-top: 1vw; flex: 1; justify-content: flex-end;">
|
||||
<AlertList linkUrl="http://10.0.64.20/pms/workorder-list" style="margin-right: 1vw;" title="工单详情" :list-data="mockData.timeoutWorkOrders.details" />
|
||||
<AlertList
|
||||
:loading="isFirstLoading"
|
||||
linkUrl="http://10.0.64.20/pms/workorder-list"
|
||||
style="margin-right: 1vw;"
|
||||
title="工单详情"
|
||||
:list-data="mockData.timeoutWorkOrders.details"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -250,6 +302,9 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
// 创建 AbortController 用于取消请求
|
||||
const abortController = new AbortController()
|
||||
import * as echarts from 'echarts'
|
||||
import ParkCenter from './components/ParkCenter.vue'
|
||||
import PointInfoPopup from './components/PointInfoPopup.vue'
|
||||
@@ -257,6 +312,7 @@ import WeatherWarning from './components/WeatherWarning.vue'
|
||||
import AlertList from './components/AlertList.vue'
|
||||
import { getTableList, getTableData, getDangerDetail, getDangerCount, getExamDetail, getDrillDetail, getWorkOrderStatistics } from './report'
|
||||
import RiskStatisticsPanel from './components/RiskStatisticsPanel.vue'
|
||||
import HeaderSelector from './components/HeaderSelector.vue'
|
||||
|
||||
interface PointPosition {
|
||||
label: string
|
||||
@@ -269,6 +325,17 @@ const totalCountDigits = computed(() => String(mockData.totalCount).split('').ma
|
||||
const formalEmployeeDigits = computed(() => String(mockData.formalEmployeeCount).split('').map(Number))
|
||||
const externalStaffDigits = computed(() => String(mockData.externalStaffCount).split('').map(Number))
|
||||
const visitorDigits = computed(() => String(mockData.visitorCount).split('').map(Number))
|
||||
|
||||
// 计算数字区域的最大宽度
|
||||
// 每个数字框宽度 14px，gap 2px
|
||||
const maxNumberWidth = computed(() => {
|
||||
const formalLen = formalEmployeeDigits.value.length
|
||||
const externalLen = externalStaffDigits.value.length
|
||||
const visitorLen = visitorDigits.value.length
|
||||
const maxLen = Math.max(formalLen, externalLen, visitorLen)
|
||||
// 宽度 = 数字个数 * 14px + (数字个数 - 1) * 2px
|
||||
return maxLen > 0 ? maxLen * 14 + (maxLen - 1) * 2 : 0
|
||||
})
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
@@ -281,6 +348,9 @@ const currentTime = ref<string>('')
|
||||
const activeTab = ref<string>('高危作业')
|
||||
const showPointPopup = ref(false)
|
||||
const currentPoint = ref<PointPosition | null>(null)
|
||||
|
||||
// 首次加载状态
|
||||
const isFirstLoading = ref<boolean>(true)
|
||||
const progressChart = ref<echarts.ECharts | null>(null)
|
||||
const progressChartRef = ref<HTMLElement | null>(null)
|
||||
const timeUpdateTimerId = ref<ReturnType<typeof setInterval> | null>(null)
|
||||
@@ -298,16 +368,16 @@ const handleGeneralCountClick = () => {
|
||||
}
|
||||
|
||||
const riskStatistics = ref<any>({
|
||||
'安全类': [],
|
||||
'工程类': []
|
||||
'安全类事项': [],
|
||||
'工程类事项': []
|
||||
})
|
||||
const dangerDetail = ref<any>({
|
||||
'安全类': [],
|
||||
'工程类': []
|
||||
'安全类事项': [],
|
||||
'工程类事项': []
|
||||
})
|
||||
const parkValue = ref<string>('')
|
||||
|
||||
type TabType = '安全类' | '工程类'
|
||||
type TabType = '安全类事项' | '工程类事项'
|
||||
|
||||
|
||||
const handleRiskTabChange = async (tab: TabType) => {
|
||||
@@ -316,10 +386,10 @@ const handleRiskTabChange = async (tab: TabType) => {
|
||||
try {
|
||||
let workOrderType = ''
|
||||
switch (tab) {
|
||||
case '安全类':
|
||||
case '安全类事项':
|
||||
workOrderType = '安全生产'
|
||||
break
|
||||
case '工程类':
|
||||
case '工程类事项':
|
||||
workOrderType = '物业服务-工程'
|
||||
break
|
||||
default:
|
||||
@@ -328,11 +398,11 @@ const handleRiskTabChange = async (tab: TabType) => {
|
||||
|
||||
// 同时获取维保任务和巡检任务的数据
|
||||
const [maintenanceResponse, inspectionResponse] = await Promise.all([
|
||||
getWorkOrderStatistics({ workOrderType, taskType: '维保任务', campus_id: query.campus_id }).catch(error => {
|
||||
getWorkOrderStatistics({ workOrderType, taskType: '维保任务', campus_id: query.campus_id }, { signal: abortController.signal }).catch(error => {
|
||||
console.error('获取维保任务数据失败:', error)
|
||||
return { records: [] }
|
||||
}),
|
||||
getWorkOrderStatistics({ workOrderType, taskType: '巡检任务', campus_id: query.campus_id }).catch(error => {
|
||||
getWorkOrderStatistics({ workOrderType, taskType: '巡检任务', campus_id: query.campus_id }, { signal: abortController.signal }).catch(error => {
|
||||
console.error('获取巡检任务数据失败:', error)
|
||||
return { records: [] }
|
||||
})
|
||||
@@ -729,55 +799,70 @@ onMounted(async () => {
|
||||
updateTime()
|
||||
timeUpdateTimerId.value = setInterval(updateTime, 1000)
|
||||
|
||||
if (typeof route.query.parkName === 'string') {
|
||||
selectedPark.value = route.query.parkName
|
||||
query.campus_id = route.query.parkCode as string
|
||||
}
|
||||
|
||||
handleRiskTabChange('安全类')
|
||||
|
||||
// 先检查缓存
|
||||
const cachedRecords = getCachedRegionOption()
|
||||
let records = cachedRecords
|
||||
|
||||
if (!records || records.length === 0) {
|
||||
// 缓存不存在或已过期，调用接口
|
||||
try {
|
||||
let result = await getTableList('park_info_list')
|
||||
records = result.records || []
|
||||
|
||||
if (records && records.length > 0) {
|
||||
// 保存到缓存
|
||||
setCachedRegionOption(records)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('初始化园区数据失败:', error)
|
||||
records = []
|
||||
try {
|
||||
if (typeof route.query.parkName === 'string') {
|
||||
selectedPark.value = route.query.parkName
|
||||
query.campus_id = route.query.parkCode as string
|
||||
}
|
||||
}
|
||||
|
||||
if (records && records.length > 0) {
|
||||
// 更新为新的数据格式
|
||||
regionOption.value = records.map(el => ({
|
||||
name: el.park_name,
|
||||
code: el.park_code,
|
||||
pic_url: el.pic_url
|
||||
}))
|
||||
|
||||
for (let i = 0; i < regionOption.value.length; i++) {
|
||||
const el = regionOption.value[i];
|
||||
if (el.code == query.campus_id && el.pic_url) {
|
||||
backgroundImage.value = el.pic_url
|
||||
handleRiskTabChange('安全类事项')
|
||||
|
||||
// 先检查缓存
|
||||
const cachedRecords = getCachedRegionOption()
|
||||
let records = cachedRecords
|
||||
|
||||
if (!records || records.length === 0) {
|
||||
// 缓存不存在或已过期，调用接口
|
||||
try {
|
||||
let result = await getTableList('park_info_list', {}, false, { signal: abortController.signal })
|
||||
records = result.records || []
|
||||
|
||||
if (records && records.length > 0) {
|
||||
// 保存到缓存
|
||||
setCachedRegionOption(records)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('初始化园区数据失败:', error)
|
||||
records = []
|
||||
}
|
||||
}
|
||||
}
|
||||
// 初始化数据
|
||||
await loadDashboardData()
|
||||
|
||||
if (records && records.length > 0) {
|
||||
// 更新为新的数据格式
|
||||
regionOption.value = records.map(el => ({
|
||||
name: el.park_name,
|
||||
code: el.park_code,
|
||||
pic_url: el.pic_url
|
||||
}))
|
||||
|
||||
for (let i = 0; i < regionOption.value.length; i++) {
|
||||
const el = regionOption.value[i];
|
||||
if (el.code == query.campus_id && el.pic_url) {
|
||||
backgroundImage.value = el.pic_url
|
||||
}
|
||||
}
|
||||
}
|
||||
// 初始化数据
|
||||
await loadDashboardData()
|
||||
|
||||
// 添加周期性动画演示
|
||||
dashboardTimerId.value = setInterval(async () => {
|
||||
await loadDashboardData()
|
||||
try {
|
||||
await loadDashboardData()
|
||||
} catch (error) {
|
||||
console.error('定时数据更新失败:', error)
|
||||
}
|
||||
}, 2 * 60 * 1000) // 每2分钟更新一次
|
||||
} catch (error) {
|
||||
console.error('页面初始化失败:', error)
|
||||
// 即使出错也要隐藏骨架屏，避免界面一直处于加载状态
|
||||
setTimeout(() => {
|
||||
if (isFirstLoading.value) {
|
||||
isFirstLoading.value = false
|
||||
console.log('因错误隐藏骨架屏')
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
|
||||
const loadDashboardData = () => {
|
||||
@@ -785,7 +870,7 @@ const loadDashboardData = () => {
|
||||
isFirstLoad.value = false
|
||||
}
|
||||
// 获取总体概览数据
|
||||
getTableList('generalTotal', query).then(generalTotal => {
|
||||
getTableList('generalTotal', query, false, { signal: abortController.signal }).then(generalTotal => {
|
||||
if (generalTotal.records && generalTotal.records.length > 0) {
|
||||
mockData.totalCount = Number(generalTotal.records[0].totalCount)
|
||||
mockData.formalEmployeeCount = Number(generalTotal.records[0].formalEmployeeCount)
|
||||
@@ -893,7 +978,7 @@ const loadDashboardData = () => {
|
||||
handleTabClick("高危作业")
|
||||
|
||||
// 获取风险预警数据
|
||||
getTableList('risk_alert_data', query).then(risk_alert_data => {
|
||||
getTableList('risk_alert_data', query, false, { signal: abortController.signal }).then(risk_alert_data => {
|
||||
if (risk_alert_data.records && risk_alert_data.records.length > 0) {
|
||||
mockData.alertData.total = risk_alert_data.records[0].total
|
||||
mockData.alertData.processed = risk_alert_data.records[0].processed
|
||||
@@ -904,7 +989,7 @@ const loadDashboardData = () => {
|
||||
console.error('获取风险预警数据失败:', error)
|
||||
})
|
||||
// 获取风险预警详情数据
|
||||
getTableList('risk_alert_detail', query).then(risk_alert_detail => {
|
||||
getTableList('risk_alert_detail', query, false, { signal: abortController.signal }).then(risk_alert_detail => {
|
||||
if (risk_alert_detail.records && risk_alert_detail.records.length > 0) {
|
||||
mockData.alertData.details = risk_alert_detail.records
|
||||
}
|
||||
@@ -913,7 +998,7 @@ const loadDashboardData = () => {
|
||||
})
|
||||
|
||||
// 获取超期工单数据
|
||||
getTableList('timeout_work_order', query).then(timeout_work_order => {
|
||||
getTableList('timeout_work_order', query, false, { signal: abortController.signal }).then(timeout_work_order => {
|
||||
if (timeout_work_order.records && timeout_work_order.records.length >= 0) {
|
||||
mockData.timeoutWorkOrders.total = timeout_work_order.records.length
|
||||
mockData.timeoutWorkOrders.details = timeout_work_order.records
|
||||
@@ -923,7 +1008,7 @@ const loadDashboardData = () => {
|
||||
})
|
||||
|
||||
// 获取超期工单数据
|
||||
getTableList('park_build_info', query).then(res => {
|
||||
getTableList('park_build_info', query, false, { signal: abortController.signal }).then(res => {
|
||||
if (res.records && res.records.length > 0) {
|
||||
|
||||
}
|
||||
@@ -931,11 +1016,22 @@ const loadDashboardData = () => {
|
||||
console.error('获取超期工单数据失败:', error)
|
||||
})
|
||||
|
||||
// 调用数据处理函数
|
||||
handleHiddenDangerPannelData(query)
|
||||
|
||||
// 延迟一段时间等待异步操作完成，然后隐藏骨架屏
|
||||
setTimeout(() => {
|
||||
if (isFirstLoading.value) {
|
||||
isFirstLoading.value = false
|
||||
console.log('隐藏骨架屏')
|
||||
}
|
||||
}, 2000) // 2秒后隐藏骨架屏
|
||||
}
|
||||
|
||||
|
||||
const handleHiddenDangerPannelData = (query) => {
|
||||
const handleHiddenDangerPannelData = async (query) => {
|
||||
const promises = []
|
||||
|
||||
let _data = {
|
||||
flag: false,
|
||||
general: 0,
|
||||
@@ -955,6 +1051,8 @@ const handleHiddenDangerPannelData = (query) => {
|
||||
processing: 0,
|
||||
pending: 0
|
||||
}
|
||||
|
||||
// 初始化图表
|
||||
progressChart.value = echarts.init(progressChartRef.value)
|
||||
const width = progressChart.value.getWidth()
|
||||
const progressOption = {
|
||||
@@ -1007,12 +1105,12 @@ const handleHiddenDangerPannelData = (query) => {
|
||||
}
|
||||
try {
|
||||
// 获取隐患排查治理数据
|
||||
getTableList('risk_level_count', query).then(res => {
|
||||
getTableList('risk_level_count', query, false, { signal: abortController.signal }).then(res => {
|
||||
if (res.records && res.records.length > 0) {
|
||||
_data.general = _data.general + Number(res.records[0].general_count)
|
||||
_data.major = _data.major + Number(res.records[0].major_count)
|
||||
// 获取隐患排查治理数据
|
||||
getTableList('risk_status_count', query).then(res => {
|
||||
getTableList('risk_status_count', query, false, { signal: abortController.signal }).then(res => {
|
||||
if (res.records && res.records.length > 0) {
|
||||
// 接口返回的已经是百分比，直接使用
|
||||
const record = res.records[0]
|
||||
@@ -1086,13 +1184,13 @@ const handleHiddenDangerPannelData = (query) => {
|
||||
|
||||
|
||||
// 获取隐患排查治理数据
|
||||
getTableList('hidden_danger_investigation', query).then(res => {
|
||||
getTableList('hidden_danger_investigation', query, false, { signal: abortController.signal }).then(res => {
|
||||
if (res.records && res.records.length > 0) {
|
||||
_data2.general = Number(res.records[0].general)
|
||||
_data2.major = Number(res.records[0].major)
|
||||
|
||||
// 获取隐患排查治理处理进度数据
|
||||
getTableList('hidden_danger_process_progress', query).then(res => {
|
||||
getTableList('hidden_danger_process_progress', query, false, { signal: abortController.signal }).then(res => {
|
||||
// if (res.records && res.records.length > 0) {
|
||||
// _data2.flag = true
|
||||
// _data2.overdue = Number(res.records[0].overdue) / 100 * (_data2.general + _data2.major)
|
||||
@@ -1167,12 +1265,12 @@ const handleTabClick = async (tab: string) => {
|
||||
code = "fire_drill"
|
||||
code1 = "fire_drill_detail"
|
||||
|
||||
getDangerDetail(query.campus_id).then(res => {
|
||||
getDangerDetail(query.campus_id, { signal: abortController.signal }).then(res => {
|
||||
const list = res.records.map((item: any) => ({ description: item.contenttext }))
|
||||
dangerList.value = list
|
||||
})
|
||||
|
||||
getDangerCount(query.campus_id).then(res => {
|
||||
getDangerCount(query.campus_id, { signal: abortController.signal }).then(res => {
|
||||
unfinishedCount.value = res.records[0].wks
|
||||
inProgressCount.value = res.records[0].jxz
|
||||
finishedCount.value = res.records[0].ywc
|
||||
@@ -1183,7 +1281,7 @@ const handleTabClick = async (tab: string) => {
|
||||
code = 'security_training_count'
|
||||
code1 = 'security_training_detail'
|
||||
|
||||
const res = await getExamDetail(query.campus_id)
|
||||
const res = await getExamDetail(query.campus_id, { signal: abortController.signal })
|
||||
|
||||
examList.value = res.records
|
||||
|
||||
@@ -1192,7 +1290,7 @@ const handleTabClick = async (tab: string) => {
|
||||
code = 'security_training_count'
|
||||
code1 = 'security_training_detail'
|
||||
|
||||
const res1 = await getDrillDetail(query.campus_id)
|
||||
const res1 = await getDrillDetail(query.campus_id, { signal: abortController.signal })
|
||||
|
||||
drillList.value = res1.records
|
||||
|
||||
@@ -1340,6 +1438,9 @@ const updateTime = (): void => {
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
// 取消所有正在进行的请求
|
||||
abortController.abort()
|
||||
|
||||
if (dashboardTimerId.value) {
|
||||
clearInterval(dashboardTimerId.value)
|
||||
dashboardTimerId.value = null
|
||||
@@ -1743,17 +1844,25 @@ onUnmounted(() => {
|
||||
.top-card-right-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 5px;
|
||||
padding: 0 10px;
|
||||
font-size: 0.7rem;
|
||||
color: #fff;
|
||||
|
||||
> :first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 5px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.type-number-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 2px;
|
||||
font-size: 0.8rem;
|
||||
color: #fff;
|
||||
margin-left: 8px;
|
||||
|
||||
.type-number {
|
||||
display: inline-block;
|
||||
@@ -1767,6 +1876,10 @@ onUnmounted(() => {
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
> span:last-child {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2040,4 +2153,44 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 骨架屏样式
|
||||
.skeleton-pulse {
|
||||
animation: skeleton-loading-company 1.5s ease-in-out infinite;
|
||||
background-color: #444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.skeleton-number-wrapper {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.skeleton-number {
|
||||
width: 14px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.skeleton-type-number {
|
||||
width: 14px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.skeleton-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
@keyframes skeleton-loading-company {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,32 +5,59 @@
|
||||
<img width="50%" src="@/assets/images/line_1.png" />
|
||||
</div>
|
||||
<div class="list" :style="{ maxHeight: maxHeight }">
|
||||
<!-- 表格头部 -->
|
||||
<div v-if="tableTitle && tableTitle.length > 0" class="table-header">
|
||||
<div class="header-item" v-for="(title, index) in tableTitle" :key="index">
|
||||
{{ title.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-wrapper" ref="listWrapperRef" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
|
||||
<!-- 表格模式 -->
|
||||
<!-- 骨架屏 -->
|
||||
<template v-if="props.loading">
|
||||
<!-- 表格模式骨架屏 -->
|
||||
<template v-if="tableTitle && tableTitle.length > 0">
|
||||
<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 class="table-header">
|
||||
<div class="header-item skeleton-pulse" v-for="(title, index) in tableTitle" :key="`header-skeleton-${index}`"></div>
|
||||
</div>
|
||||
<div class="list-wrapper">
|
||||
<div class="table-row skeleton-row" v-for="i in 10" :key="`table-skeleton-${i}`">
|
||||
<div class="table-cell skeleton-pulse" v-for="(title, cellIndex) in tableTitle" :key="`cell-skeleton-${i}-${cellIndex}`"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 列表模式 -->
|
||||
|
||||
<!-- 列表模式骨架屏 -->
|
||||
<template v-else>
|
||||
<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>
|
||||
<div class="list-wrapper">
|
||||
<div class="list-item skeleton-item" v-for="i in 10" :key="`list-skeleton-${i}`">
|
||||
<div class="alert-text skeleton-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 实际内容 -->
|
||||
<template v-else>
|
||||
<!-- 表格头部 -->
|
||||
<div v-if="tableTitle && tableTitle.length > 0" class="table-header">
|
||||
<div class="header-item" v-for="(title, index) in tableTitle" :key="index">
|
||||
{{ title.name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-wrapper" ref="listWrapperRef" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
|
||||
<!-- 表格模式 -->
|
||||
<template v-if="tableTitle && tableTitle.length > 0">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 列表模式 -->
|
||||
<template v-else>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -51,6 +78,7 @@ interface TableTitle {
|
||||
}
|
||||
|
||||
interface Props {
|
||||
loading?: boolean
|
||||
title?: string
|
||||
listData: AlertItem[]
|
||||
maxHeight?: string
|
||||
@@ -313,4 +341,31 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 骨架屏样式
|
||||
.skeleton-pulse {
|
||||
animation: skeleton-loading-alertlist 1.5s ease-in-out infinite;
|
||||
background-color: #444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.skeleton-row {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.skeleton-item {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
@keyframes skeleton-loading-alertlist {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
398
src/views/screen/components/HeaderSelector.vue
Normal file
398
src/views/screen/components/HeaderSelector.vue
Normal file
@@ -0,0 +1,398 @@
|
||||
<template>
|
||||
<div :class="['header-left', `theme-${theme}`]">
|
||||
<!-- 返回按钮 - PNG图片类型（暗色系主题使用，保持原样） -->
|
||||
<img
|
||||
v-if="backButtonType === 'image' && showBackButton && theme === 'dark'"
|
||||
class="back-img"
|
||||
@click="handleBack"
|
||||
src="@/assets/images/screen/back_image.png"
|
||||
/>
|
||||
<!-- 返回按钮 - SVG图片类型（亮色系主题使用，支持主题颜色） -->
|
||||
<svg
|
||||
v-if="backButtonType === 'image' && showBackButton && theme === 'light'"
|
||||
class="back-svg"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@click="handleBack"
|
||||
>
|
||||
<path
|
||||
d="M620.8 348.16H276.48l102.4-102.4c10.24-10.24 10.24-25.6 0-35.84-10.24-10.24-25.6-10.24-35.84 0L197.12 354.56c-5.12 5.12-7.68 11.52-7.68 17.92 0 6.4 2.56 12.8 7.68 17.92l144.64 144.64c10.24 10.24 25.6 10.24 35.84 0 10.24-10.24 10.24-25.6 0-35.84L277.76 399.36h343.04C716.8 399.36 793.6 476.16 793.6 572.16S716.8 744.96 620.8 744.96H358.4c-14.08 0-25.6 11.52-25.6 25.6s11.52 25.6 25.6 25.6h262.4a223.4368 223.4368 0 0 0 224-224A223.4368 223.4368 0 0 0 620.8 348.16z"
|
||||
:fill="svgFillColor"
|
||||
/>
|
||||
</svg>
|
||||
<!-- 返回按钮 - 图标类型 -->
|
||||
<el-icon
|
||||
v-if="backButtonType === 'icon' && showBackButton"
|
||||
class="back-arrow"
|
||||
@click="handleBack"
|
||||
>
|
||||
<ArrowLeft />
|
||||
</el-icon>
|
||||
<!-- 文本按钮/显示 -->
|
||||
<div
|
||||
v-if="displayText"
|
||||
:class="[
|
||||
'back-button',
|
||||
{
|
||||
'clickable': clickable,
|
||||
'non-clickable': !clickable
|
||||
}
|
||||
]"
|
||||
@click="handleTextClick"
|
||||
>
|
||||
{{ displayText }}
|
||||
<span v-if="showSelectorIndicator">···</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 区域/园区选择弹窗 -->
|
||||
<RegionSelector
|
||||
v-model="selectorVisible"
|
||||
:modelSelected="selectedValue"
|
||||
:regions="options"
|
||||
@change="handleSelectorChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ArrowLeft } from '@element-plus/icons-vue'
|
||||
import RegionSelector from './RegionSelector.vue'
|
||||
import { getTableList } from '@/api/design/report'
|
||||
|
||||
interface OptionItem {
|
||||
name: string
|
||||
code: string
|
||||
}
|
||||
|
||||
interface Props {
|
||||
// 返回按钮类型：'image' | 'icon' | 'none'
|
||||
backButtonType?: 'image' | 'icon' | 'none'
|
||||
// 是否显示返回按钮
|
||||
showBackButton?: boolean
|
||||
// 返回按钮点击事件
|
||||
onBack?: () => void
|
||||
// 显示的文本
|
||||
displayText?: string
|
||||
// 文本是否可点击
|
||||
clickable?: boolean
|
||||
// 是否显示选择器指示器（···）
|
||||
showSelectorIndicator?: boolean
|
||||
// 选择器类型：'region' | 'park' | 'none'
|
||||
selectorType?: 'region' | 'park' | 'none'
|
||||
// 选择器选项（如果不提供，会根据 selectorType 自动获取）
|
||||
options?: OptionItem[]
|
||||
// 当前选中的值
|
||||
selectedValue?: string
|
||||
// 选择器变化事件
|
||||
onSelectorChange?: (item: OptionItem) => void
|
||||
// 区域代码（用于获取园区列表）
|
||||
regionCode?: string
|
||||
// 主题：'light' | 'dark'
|
||||
theme?: 'light' | 'dark'
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
backButtonType: 'none',
|
||||
showBackButton: false,
|
||||
clickable: true,
|
||||
showSelectorIndicator: false,
|
||||
selectorType: 'none',
|
||||
options: () => [],
|
||||
selectedValue: '',
|
||||
regionCode: '',
|
||||
theme: 'dark'
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
selectorChange: [item: OptionItem]
|
||||
}>()
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const selectorVisible = ref(false)
|
||||
const options = ref<OptionItem[]>(props.options || [])
|
||||
|
||||
// 根据主题计算 SVG 填充颜色
|
||||
const svgFillColor = computed(() => {
|
||||
return props.theme === 'light' ? '#409eff' : '#ffffff'
|
||||
})
|
||||
|
||||
// 监听 props.options 的变化
|
||||
watch(() => props.options, (newOptions) => {
|
||||
if (newOptions && newOptions.length > 0) {
|
||||
options.value = newOptions
|
||||
}
|
||||
}, { immediate: true, deep: true })
|
||||
|
||||
// 缓存工具函数
|
||||
const CACHE_KEY = 'shared_regionOption_cache'
|
||||
|
||||
interface CacheData {
|
||||
records: any[]
|
||||
timestamp: number
|
||||
}
|
||||
|
||||
const getCachedRegionOption = (): any[] | null => {
|
||||
try {
|
||||
const cached = sessionStorage.getItem(CACHE_KEY)
|
||||
if (cached) {
|
||||
const cacheData: CacheData = JSON.parse(cached)
|
||||
return cacheData.records
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('读取缓存失败:', error)
|
||||
sessionStorage.removeItem(CACHE_KEY)
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
const setCachedRegionOption = (records: any[]) => {
|
||||
try {
|
||||
const cacheData: CacheData = {
|
||||
records,
|
||||
timestamp: Date.now()
|
||||
}
|
||||
sessionStorage.setItem(CACHE_KEY, JSON.stringify(cacheData))
|
||||
console.log('regionOption 数据已缓存')
|
||||
} catch (error) {
|
||||
console.error('保存缓存失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化选项数据 - 统一从内部获取，不再依赖外部传入
|
||||
const initOptions = async () => {
|
||||
// 如果外部传入了 options，优先使用（保留兼容性）
|
||||
if (props.options && props.options.length > 0) {
|
||||
options.value = props.options
|
||||
return
|
||||
}
|
||||
|
||||
if (props.selectorType === 'none') {
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
// 先检查缓存
|
||||
const cachedRecords = getCachedRegionOption()
|
||||
let records = cachedRecords
|
||||
|
||||
if (!records || records.length === 0) {
|
||||
// 缓存不存在或已过期，调用接口
|
||||
const result = await getTableList('park_info_list')
|
||||
records = result.records || []
|
||||
|
||||
if (records && records.length > 0) {
|
||||
// 保存到缓存
|
||||
setCachedRegionOption(records)
|
||||
}
|
||||
}
|
||||
|
||||
if (records && records.length > 0) {
|
||||
if (props.selectorType === 'region') {
|
||||
// 区域选择：去重region字段
|
||||
const regionMap = new Map()
|
||||
records.forEach((el: any) => {
|
||||
if (!regionMap.has(el.region)) {
|
||||
regionMap.set(el.region, {
|
||||
name: el.region,
|
||||
code: el.region_id
|
||||
})
|
||||
}
|
||||
})
|
||||
options.value = Array.from(regionMap.values())
|
||||
} else if (props.selectorType === 'park') {
|
||||
// 园区选择：根据regionCode过滤，去重park_name字段
|
||||
if (!props.regionCode) {
|
||||
// 如果 regionCode 还没有值，等待它被设置
|
||||
console.log('等待 regionCode 设置...')
|
||||
return
|
||||
}
|
||||
const parkMap = new Map()
|
||||
const filteredRecords = records.filter((el: any) => el.region_id == props.regionCode)
|
||||
if (filteredRecords.length === 0) {
|
||||
console.warn(`未找到 regionCode 为 ${props.regionCode} 的园区数据`)
|
||||
}
|
||||
filteredRecords.forEach((el: any) => {
|
||||
if (!parkMap.has(el.park_name)) {
|
||||
parkMap.set(el.park_name, {
|
||||
name: el.park_name,
|
||||
code: el.park_code
|
||||
})
|
||||
}
|
||||
})
|
||||
options.value = Array.from(parkMap.values())
|
||||
console.log('园区选项已更新:', options.value)
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('初始化选项数据失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 处理返回按钮点击
|
||||
const handleBack = () => {
|
||||
if (props.onBack) {
|
||||
props.onBack()
|
||||
} else {
|
||||
router.back()
|
||||
}
|
||||
}
|
||||
|
||||
// 处理文本点击
|
||||
const handleTextClick = () => {
|
||||
if (!props.clickable) {
|
||||
return
|
||||
}
|
||||
|
||||
if (props.selectorType !== 'none') {
|
||||
selectorVisible.value = true
|
||||
}
|
||||
}
|
||||
|
||||
// 处理选择器变化
|
||||
const handleSelectorChange = (item: OptionItem) => {
|
||||
if (props.onSelectorChange) {
|
||||
props.onSelectorChange(item)
|
||||
}
|
||||
// 同时发出事件，供父组件使用 @selector-change 监听
|
||||
emit('selectorChange', item)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initOptions()
|
||||
})
|
||||
|
||||
// 监听 regionCode 的变化，当它变化时重新初始化选项（用于园区选择）
|
||||
watch(() => props.regionCode, (newRegionCode) => {
|
||||
if (props.selectorType === 'park' && newRegionCode) {
|
||||
initOptions()
|
||||
}
|
||||
}, { immediate: false })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header-left {
|
||||
display: flex;
|
||||
padding-left: 1vw;
|
||||
line-height: 80px;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
|
||||
.back-img {
|
||||
height: 3vh;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.back-svg {
|
||||
height: 3vh;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.back-arrow {
|
||||
font-size: 20px;
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
color: #79bbff;
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
.back-button {
|
||||
display: inline-flex;
|
||||
height: 2vh;
|
||||
min-width: 6vw;
|
||||
padding: 4px 16px;
|
||||
margin-left: 0.5vw;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.3s ease;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: white;
|
||||
|
||||
&.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.non-clickable {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 暗色系主题（默认）
|
||||
&.theme-dark {
|
||||
.back-button {
|
||||
background: rgb(13 24 84 / 80%);
|
||||
border: 1px solid rgb(59 130 246 / 40%);
|
||||
|
||||
&:hover {
|
||||
background: rgb(59 130 246 / 30%);
|
||||
border-color: rgb(59 130 246 / 60%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 亮色系主题 - 只改颜色，保持UI结构
|
||||
&.theme-light {
|
||||
.back-button {
|
||||
background: #409eff;
|
||||
border: 1px solid #e5e7eb;
|
||||
|
||||
&:hover {
|
||||
background: #79bbff;
|
||||
border-color: #cbd5e1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (width <= 1024px) {
|
||||
.header-left .back-button {
|
||||
min-width: 8vw;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 768px) {
|
||||
.header-left {
|
||||
line-height: 70px;
|
||||
|
||||
.back-button {
|
||||
min-width: 12vw;
|
||||
padding: 3px 12px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 480px) {
|
||||
.header-left {
|
||||
line-height: 60px;
|
||||
|
||||
.back-button {
|
||||
min-width: 15vw;
|
||||
padding: 2px 10px;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="center-container">
|
||||
<div class="center-container" :data-window-width="windowWidth">
|
||||
<div class="center-content">
|
||||
<!-- 隐患排查治理 这个标题需要隐藏 2025-10-31 -->
|
||||
<span class="title"></span>
|
||||
@@ -10,11 +10,13 @@
|
||||
<div class="type-wrapper">
|
||||
<div class="type-item">
|
||||
<span class="type-btn">重大</span>
|
||||
<span class="type-num cursor-pointer" @click="handleMajorClick">{{ hiddenDangerData?.major || 0 }}</span>
|
||||
<div style="width: 20px; height: 20px" v-if="props.loading" class="type-num skeleton-pulse"></div>
|
||||
<span v-else class="type-num cursor-pointer" @click="handleMajorClick">{{ hiddenDangerData?.major || 0 }}</span>
|
||||
</div>
|
||||
<div class="type-item">
|
||||
<span class="type-btn active">一般</span>
|
||||
<span class="type-num cursor-pointer" @click="handleMajorClick">{{ hiddenDangerData?.general || 0 }}</span>
|
||||
<div style="width: 20px; height: 20px" v-if="props.loading" class="type-num skeleton-pulse"></div>
|
||||
<span v-else class="type-num cursor-pointer" @click="handleMajorClick">{{ hiddenDangerData?.general || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -30,7 +32,8 @@
|
||||
</div>
|
||||
<div class="echart-wrapper">
|
||||
<div class="lf-rt">
|
||||
<Echart :options="progressChartOption" class="progress-chart" height="80%" />
|
||||
<div v-if="props.loading" class="skeleton-chart-circle skeleton-pulse"></div>
|
||||
<Echart v-else :options="progressChartOption" class="progress-chart" height="80%" />
|
||||
<div class="progress-legend">
|
||||
<div class="legend-item"><span class="dot red"></span>已逾期</div>
|
||||
<div class="legend-item"><span class="dot green"></span>已处理</div>
|
||||
@@ -41,39 +44,45 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="lf-rt">
|
||||
<Echart :options="top3TypesChartOption" class="progress-chart" height="80%" />
|
||||
<div v-if="props.loading" class="skeleton-chart-circle skeleton-pulse"></div>
|
||||
<Echart v-else :options="top3TypesChartOption" class="progress-chart" height="80%" />
|
||||
<div class="progress-legend-column">
|
||||
<div class="legend-item">
|
||||
<span class="dot blue"></span>
|
||||
<span class="legend-text">{{ props.hiddenDangerData?.top3Types?.[0]?.order_type_path_name || "--" }}</span>
|
||||
<span class="legend-text" :title="props.hiddenDangerData?.top3Types?.[0]?.order_type_path_name || '--'">{{ props.hiddenDangerData?.top3Types?.[0]?.order_type_path_name || "--" }}</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="dot green"></span>
|
||||
<span class="legend-text">{{ props.hiddenDangerData?.top3Types?.[1]?.order_type_path_name || "--" }}</span>
|
||||
<span class="legend-text" :title="props.hiddenDangerData?.top3Types?.[1]?.order_type_path_name || '--'">{{ props.hiddenDangerData?.top3Types?.[1]?.order_type_path_name || "--" }}</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="dot yellow"></span>
|
||||
<span class="legend-text">{{ props.hiddenDangerData?.top3Types?.[2]?.order_type_path_name || "--" }}</span>
|
||||
<span class="legend-text" :title="props.hiddenDangerData?.top3Types?.[2]?.order_type_path_name || '--'">{{ props.hiddenDangerData?.top3Types?.[2]?.order_type_path_name || "--" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="safe-wrapper">
|
||||
<span class="safe-title">
|
||||
<img width="22" style="margin: 3px 5px 0 0" src="@/assets/images/ybp_icon.png" />
|
||||
安全指数:<p title="安全指数 = 逾期隐患百分比 × 60% + 安全考核通过率 × 20% + 安全培训完成率 × 20%"></p>
|
||||
<img class="safe-icon" src="@/assets/images/ybp_icon.png" />
|
||||
<span class="safe-title-text">安全指数:</span>
|
||||
<p class="safe-tooltip" title="安全指数 = (1-逾期隐患百分比) × 40% + 安全考核通过率 × 10% + 安全培训完成率 × 10%
|
||||
+ 安全类工单完成率 × 20% + 工程类工单完成率 × 20%"></p>
|
||||
</span>
|
||||
<span class="pending-count">{{ hiddenDangerData?.safetyIndex || 0 }}</span>
|
||||
<span v-if="props.loading" class="pending-count skeleton-pulse"></span>
|
||||
<span v-else class="pending-count">{{ hiddenDangerData?.safetyIndex || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
|
||||
import echarts from '@/plugins/echarts'
|
||||
|
||||
|
||||
interface Props {
|
||||
loading?: boolean
|
||||
hiddenDangerData?: {
|
||||
general: number
|
||||
major: number
|
||||
@@ -94,6 +103,116 @@ interface Props {
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
// 窗口尺寸响应式变量，用于强制响应式更新
|
||||
const windowWidth = ref(window.innerWidth)
|
||||
const windowHeight = ref(window.innerHeight)
|
||||
|
||||
// 防抖函数
|
||||
let resizeTimer: ReturnType<typeof setTimeout> | null = null
|
||||
|
||||
// 手动触发 ECharts 图表 resize
|
||||
const resizeEcharts = () => {
|
||||
nextTick(() => {
|
||||
// 查找所有 ECharts 容器并触发 resize
|
||||
// Echart 组件会在内部创建 div，class 包含 progress-chart
|
||||
const chartContainers = document.querySelectorAll('.center-container .progress-chart')
|
||||
chartContainers.forEach((container) => {
|
||||
try {
|
||||
const chartInstance = echarts.getInstanceByDom(container as HTMLElement)
|
||||
if (chartInstance) {
|
||||
chartInstance.resize()
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('ECharts resize 失败:', error)
|
||||
}
|
||||
})
|
||||
|
||||
// 如果上面的选择器找不到，尝试更通用的方式
|
||||
if (chartContainers.length === 0) {
|
||||
const allContainers = document.querySelectorAll('.center-container [class*="echart"]')
|
||||
allContainers.forEach((container) => {
|
||||
try {
|
||||
const chartInstance = echarts.getInstanceByDom(container as HTMLElement)
|
||||
if (chartInstance) {
|
||||
chartInstance.resize()
|
||||
}
|
||||
} catch (error) {
|
||||
// 忽略错误
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 监听窗口尺寸变化
|
||||
const handleResize = () => {
|
||||
// 立即更新窗口尺寸（用于响应式绑定）
|
||||
windowWidth.value = window.innerWidth
|
||||
windowHeight.value = window.innerHeight
|
||||
|
||||
// 立即触发一次 ECharts resize（快速响应）
|
||||
resizeEcharts()
|
||||
|
||||
// 清除之前的定时器
|
||||
if (resizeTimer) {
|
||||
clearTimeout(resizeTimer)
|
||||
}
|
||||
|
||||
// 使用防抖，延迟执行样式重新计算（优化性能）
|
||||
resizeTimer = setTimeout(() => {
|
||||
// 强制触发样式重新计算 - 通过读取 offsetHeight 触发重排
|
||||
const container = document.querySelector('.center-container') as HTMLElement
|
||||
if (container) {
|
||||
// 触发重排，强制浏览器重新计算样式
|
||||
void container.offsetHeight
|
||||
}
|
||||
// 再次触发 ECharts resize（确保完全更新）
|
||||
resizeEcharts()
|
||||
}, 100) // 100ms 防抖延迟
|
||||
}
|
||||
|
||||
// 全屏切换处理函数（立即执行，不使用防抖）
|
||||
const handleFullscreenChange = () => {
|
||||
// 立即更新窗口尺寸
|
||||
windowWidth.value = window.innerWidth
|
||||
windowHeight.value = window.innerHeight
|
||||
// 延迟一点确保 DOM 已更新
|
||||
setTimeout(() => {
|
||||
resizeEcharts()
|
||||
// 强制触发样式重新计算
|
||||
const container = document.querySelector('.center-container') as HTMLElement
|
||||
if (container) {
|
||||
void container.offsetHeight
|
||||
}
|
||||
}, 150) // 稍微延迟确保全屏切换完成
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', handleResize)
|
||||
// 监听全屏变化 - 立即执行，不使用防抖
|
||||
document.addEventListener('fullscreenchange', handleFullscreenChange)
|
||||
document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
|
||||
document.addEventListener('mozfullscreenchange', handleFullscreenChange)
|
||||
document.addEventListener('MSFullscreenChange', handleFullscreenChange)
|
||||
|
||||
// 组件挂载时，如果已有数据，立即更新图表
|
||||
if (props.hiddenDangerData?.progress) {
|
||||
console.log('onMounted: 初始化图表数据', props.hiddenDangerData.progress)
|
||||
refreshProcessCharts(props.hiddenDangerData.progress)
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (resizeTimer) {
|
||||
clearTimeout(resizeTimer)
|
||||
}
|
||||
window.removeEventListener('resize', handleResize)
|
||||
document.removeEventListener('fullscreenchange', handleFullscreenChange)
|
||||
document.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
|
||||
document.removeEventListener('mozfullscreenchange', handleFullscreenChange)
|
||||
document.removeEventListener('MSFullscreenChange', handleFullscreenChange)
|
||||
})
|
||||
|
||||
// 图表引用
|
||||
const progressChartOption = ref<any>({
|
||||
backgroundColor: 'transparent',
|
||||
@@ -201,17 +320,6 @@ const handleMajorClick = () => {
|
||||
window.open('http://10.0.64.20/pms/workorder-list', '_blank')
|
||||
}
|
||||
|
||||
watch(() => props.hiddenDangerData?.progress, (newVal, oldVal) => {
|
||||
console.log('HiddenDangerPanel watch 触发，progress 数据:', newVal, '旧数据:', oldVal)
|
||||
// 确保每次数据变化都更新图表
|
||||
if (newVal) {
|
||||
refreshProcessCharts(newVal)
|
||||
} else {
|
||||
// 即使数据为空，也要显示空图表
|
||||
refreshProcessCharts(null)
|
||||
}
|
||||
}, { deep: true, immediate: true })
|
||||
|
||||
// 辅助函数：安全地将值转换为数字，处理 NaN 和字符串 "NaN" 的情况
|
||||
const safeNumber = (val: any): number => {
|
||||
if (val === null || val === undefined || val === '' || val === 'NaN') {
|
||||
@@ -309,11 +417,6 @@ const refreshProcessCharts = (process): void => {
|
||||
// chartKey.value = Date.now()
|
||||
}
|
||||
|
||||
|
||||
watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
|
||||
refreshTop3TypesCharts(newVal)
|
||||
}, { deep: true })
|
||||
|
||||
// 更新图表数据
|
||||
const refreshTop3TypesCharts = (top3Types): void => {
|
||||
if (!top3Types || !Array.isArray(top3Types) || top3Types.length === 0) {
|
||||
@@ -335,25 +438,54 @@ const refreshTop3TypesCharts = (top3Types): void => {
|
||||
top3TypesChartOption.value = option
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 组件挂载时，如果已有数据，立即更新图表
|
||||
if (props.hiddenDangerData?.progress) {
|
||||
console.log('onMounted: 初始化图表数据', props.hiddenDangerData.progress)
|
||||
refreshProcessCharts(props.hiddenDangerData.progress)
|
||||
watch(() => props.hiddenDangerData?.progress, (newVal, oldVal) => {
|
||||
console.log('HiddenDangerPanel watch 触发，progress 数据:', newVal, '旧数据:', oldVal)
|
||||
// 确保每次数据变化都更新图表
|
||||
if (newVal) {
|
||||
refreshProcessCharts(newVal)
|
||||
} else {
|
||||
// 即使数据为空，也要显示空图表
|
||||
refreshProcessCharts(null)
|
||||
}
|
||||
})
|
||||
}, { deep: true, immediate: true })
|
||||
|
||||
watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
|
||||
refreshTop3TypesCharts(newVal)
|
||||
}, { deep: true })
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 响应式设计 */
|
||||
@media (width <=1200px) {
|
||||
@media (max-width: 1200px) {
|
||||
.center-container {
|
||||
width: 60vh;
|
||||
height: 60vh;
|
||||
|
||||
.center-content {
|
||||
.echart-wrapper {
|
||||
.lf-rt {
|
||||
.progress-legend-column {
|
||||
padding: 0 4px;
|
||||
|
||||
.legend-item {
|
||||
.legend-text {
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.safe-wrapper {
|
||||
.safe-title {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <=1024px) {
|
||||
@media (max-width: 1024px) {
|
||||
.center-container {
|
||||
width: 55vh;
|
||||
height: 55vh;
|
||||
@@ -375,11 +507,34 @@ onMounted(() => {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
}
|
||||
|
||||
.echart-wrapper {
|
||||
.lf-rt {
|
||||
.progress-legend-column {
|
||||
padding: 0 3px;
|
||||
|
||||
.legend-item {
|
||||
.legend-text {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.safe-wrapper {
|
||||
.safe-title {
|
||||
.safe-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <=768px) {
|
||||
@media (max-width: 768px) {
|
||||
.center-container {
|
||||
top: 60%;
|
||||
width: 50vh;
|
||||
@@ -423,16 +578,45 @@ onMounted(() => {
|
||||
.echart-wrapper {
|
||||
width: 90%;
|
||||
|
||||
.lf-rt .progress-legend .legend-item {
|
||||
font-size: 0.6rem;
|
||||
.lf-rt {
|
||||
.progress-legend .legend-item {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.progress-legend-column {
|
||||
padding: 0 2px;
|
||||
|
||||
.legend-item {
|
||||
gap: 3px;
|
||||
|
||||
.legend-text {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.safe-wrapper {
|
||||
width: 50%;
|
||||
flex-direction: column;
|
||||
gap: 0.5vh;
|
||||
|
||||
.safe-title {
|
||||
font-size: 0.7rem;
|
||||
margin-left: 0;
|
||||
justify-content: center;
|
||||
|
||||
.safe-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 2px 3px 0 0;
|
||||
}
|
||||
|
||||
.safe-tooltip {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.pending-count {
|
||||
@@ -443,7 +627,7 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <=480px) {
|
||||
@media (max-width: 480px) {
|
||||
.center-container {
|
||||
top: 65%;
|
||||
width: 45vh;
|
||||
@@ -470,13 +654,43 @@ onMounted(() => {
|
||||
|
||||
.echart-wrapper {
|
||||
width: 95%;
|
||||
|
||||
.lf-rt {
|
||||
.progress-legend-column {
|
||||
padding: 0 1px;
|
||||
gap: 6px;
|
||||
|
||||
.legend-item {
|
||||
gap: 2px;
|
||||
|
||||
.legend-text {
|
||||
font-size: 0.55rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.safe-wrapper {
|
||||
width: 60%;
|
||||
flex-direction: column;
|
||||
gap: 0.3vh;
|
||||
|
||||
.safe-title {
|
||||
font-size: 0.65rem;
|
||||
margin-left: 0;
|
||||
justify-content: center;
|
||||
|
||||
.safe-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 2px 2px 0 0;
|
||||
}
|
||||
|
||||
.safe-tooltip {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.pending-count {
|
||||
@@ -486,8 +700,11 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
p{width:17px; height:17px; background-color:rgb(125, 125, 152); border-radius:50%; text-align:center; }
|
||||
p:before{content:'?'; color:yellow; font-weight: bold;}
|
||||
.safe-tooltip:before {
|
||||
content: '?';
|
||||
color: yellow;
|
||||
font-weight: bold;
|
||||
}
|
||||
.center-container {
|
||||
position: fixed;
|
||||
top: 55%;
|
||||
@@ -619,14 +836,19 @@ p:before{content:'?'; color:yellow; font-weight: bold;}
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 0 5px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
width: 60%;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 0; // 允许 flex 子元素收缩
|
||||
|
||||
.legend-text {
|
||||
overflow: hidden;
|
||||
@@ -634,6 +856,7 @@ p:before{content:'?'; color:yellow; font-weight: bold;}
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
min-width: 0; // 关键：允许文本收缩
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -643,15 +866,47 @@ p:before{content:'?'; color:yellow; font-weight: bold;}
|
||||
.safe-wrapper {
|
||||
display: flex;
|
||||
width: 40%;
|
||||
min-width: 0; // 允许收缩
|
||||
height: 20%;
|
||||
margin-bottom: 5%;
|
||||
align-items: center;
|
||||
column-gap: 1vw;
|
||||
flex-wrap: wrap; // 允许换行
|
||||
justify-content: center;
|
||||
|
||||
.safe-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 1vw;
|
||||
flex-wrap: wrap;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
|
||||
.safe-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin: 3px 5px 0 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.safe-title-text {
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.safe-tooltip {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
background-color: rgb(125, 125, 152);
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.pending-count {
|
||||
@@ -659,6 +914,7 @@ p:before{content:'?'; color:yellow; font-weight: bold;}
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
color: yellow;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -686,4 +942,32 @@ p:before{content:'?'; color:yellow; font-weight: bold;}
|
||||
.dot.blue {
|
||||
background-color: #3b82f6;
|
||||
}
|
||||
|
||||
// 骨架屏动画
|
||||
.skeleton-pulse {
|
||||
animation: skeleton-loading-hiddendanger 1.5s ease-in-out infinite;
|
||||
background-color: #444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
// 圆形饼图骨架屏
|
||||
.skeleton-chart-circle {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
margin: 30px auto 50px auto;
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
@keyframes skeleton-loading-hiddendanger {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,29 +4,37 @@
|
||||
<div>
|
||||
<img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
|
||||
</div>
|
||||
<!-- 骨架屏 -->
|
||||
|
||||
<!-- 实际内容 -->
|
||||
<div class="tip-container">
|
||||
<div class="tip-image">
|
||||
<img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
|
||||
<span class="number">{{ alertData?.total || 0 }}</span>
|
||||
<div v-if="props.loading" style="width: 20px; height: 20px;" class="number skeleton-pulse"></div>
|
||||
<span v-else class="number">{{ alertData?.total || 0 }}</span>
|
||||
</div>
|
||||
<img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
|
||||
<div class="tip-content">
|
||||
<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: yellow;">{{ alertData?.total || 0 }}</span>
|
||||
<div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
|
||||
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.total || 0 }}</span>
|
||||
</div>
|
||||
<div class="col-item">
|
||||
<span>已处理</span>
|
||||
<span style="font-size: 1.2rem; marker-start: 2vw; color: greenyellow;">{{ alertData?.processed || 0 }}</span>
|
||||
<div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
|
||||
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: greenyellow;">{{ alertData?.processed || 0 }}</span>
|
||||
</div>
|
||||
<div class="col-item" style="display: flex; margin-left: 1vw; align-items: center;">
|
||||
<span>待处理</span>
|
||||
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.pending || 0 }}</span>
|
||||
<div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
|
||||
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.pending || 0 }}</span>
|
||||
</div>
|
||||
<div class="col-item" style="display: flex; margin-left: 1vw; align-items: center;">
|
||||
<span>处理中</span>
|
||||
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.processing }}</span>
|
||||
<div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
|
||||
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.processing }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -45,7 +53,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<AlertList style="margin-right: 1vw;" title="告警详情" :list-data="alertDetails" :linkUrl="linkUrl"></AlertList>
|
||||
<AlertList style="margin-right: 1vw;" title="告警详情" :list-data="alertDetails" :linkUrl="linkUrl" :loading="props.loading"></AlertList>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -73,6 +81,7 @@ interface Props {
|
||||
alertDetails?: AlertItem[]
|
||||
sourceIndex?: number
|
||||
linkUrl?: string
|
||||
loading?: boolean
|
||||
}
|
||||
|
||||
// 默认值
|
||||
@@ -84,7 +93,8 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
processing: 0
|
||||
}),
|
||||
alertDetails: () => [],
|
||||
sourceIndex: 1
|
||||
sourceIndex: 1,
|
||||
loading: false
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -265,5 +275,104 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 骨架屏样式
|
||||
.skeleton-container {
|
||||
.skeleton-tip-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
|
||||
.skeleton-tip-image {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: 10px;
|
||||
z-index: 2;
|
||||
|
||||
.skeleton-circle {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.skeleton-number {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-bg {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.skeleton-tip-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
padding: 8px 15px;
|
||||
|
||||
.skeleton-col-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.skeleton-icon {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.skeleton-text {
|
||||
flex: 1;
|
||||
height: 16px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.skeleton-value {
|
||||
width: 40px;
|
||||
height: 18px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 骨架屏动画
|
||||
.skeleton-pulse {
|
||||
animation: skeleton-loading-highrisk 1.5s ease-in-out infinite;
|
||||
background-color: #444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@keyframes skeleton-loading-highrisk {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,7 +3,34 @@
|
||||
<div class="panel-title">人员管理</div>
|
||||
<img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
|
||||
|
||||
<div class="top-card">
|
||||
<!-- 骨架屏 -->
|
||||
<div v-if="props.loading" class="skeleton-container">
|
||||
<div class="skeleton-card">
|
||||
<div class="skeleton-left">
|
||||
<div class="skeleton-icon skeleton-pulse"></div>
|
||||
<div class="skeleton-text skeleton-pulse"></div>
|
||||
<div class="skeleton-numbers">
|
||||
<div class="skeleton-number skeleton-pulse" v-for="i in 6" :key="i"></div>
|
||||
</div>
|
||||
<div class="skeleton-text skeleton-pulse"></div>
|
||||
</div>
|
||||
<div class="skeleton-right">
|
||||
<div class="skeleton-item" v-for="i in 3" :key="i">
|
||||
<div class="skeleton-row">
|
||||
<div class="skeleton-icon-small skeleton-pulse"></div>
|
||||
<div class="skeleton-text skeleton-pulse"></div>
|
||||
</div>
|
||||
<div class="skeleton-numbers">
|
||||
<div class="skeleton-number-small skeleton-pulse" v-for="j in 4" :key="j"></div>
|
||||
</div>
|
||||
<div class="skeleton-text skeleton-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 实际内容 -->
|
||||
<div v-else class="top-card">
|
||||
<div class="top-card-left">
|
||||
<div>
|
||||
<img width="33px" src="@/assets/images/1_224520_821.png" />
|
||||
@@ -19,9 +46,11 @@
|
||||
|
||||
<div class="top-card-right">
|
||||
<div class="top-card-right-item">
|
||||
<img width="18px" src="@/assets/images/v2_rel0n8.png" />
|
||||
<span>正式员工</span>
|
||||
<div class="type-number-wrapper" style="margin-left: 2vw">
|
||||
<div>
|
||||
<img width="18px" src="@/assets/images/v2_rel0n8.png" />
|
||||
<span>正式员工</span>
|
||||
</div>
|
||||
<div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
|
||||
<span class="type-number" v-for="(digit, index) in formalEmployeeDigits" :key="index">
|
||||
{{ digit }}
|
||||
</span>
|
||||
@@ -30,9 +59,11 @@
|
||||
</div>
|
||||
|
||||
<div class="top-card-right-item">
|
||||
<img width="18px" src="@/assets/images/v2_rel0n23.png" />
|
||||
<span>外协人员</span>
|
||||
<div class="type-number-wrapper" style="margin-left: 1vw">
|
||||
<div>
|
||||
<img width="18px" src="@/assets/images/v2_rel0n23.png" />
|
||||
<span>外协人员</span>
|
||||
</div>
|
||||
<div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
|
||||
<span class="type-number" v-for="(digit, index) in externalStaffDigits" :key="index">
|
||||
{{ digit }}
|
||||
</span>
|
||||
@@ -41,9 +72,11 @@
|
||||
</div>
|
||||
|
||||
<div class="top-card-right-item">
|
||||
<img width="18px" src="@/assets/images/24508_654.png" />
|
||||
<span>访客</span>
|
||||
<div class="type-number-wrapper">
|
||||
<div>
|
||||
<img width="18px" src="@/assets/images/24508_654.png" />
|
||||
<span>访客</span>
|
||||
</div>
|
||||
<div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
|
||||
<span class="type-number" v-for="(digit, index) in visitorDigits" :key="index">
|
||||
{{ digit }}
|
||||
</span>
|
||||
@@ -58,6 +91,7 @@
|
||||
<span>各园区统计</span>
|
||||
<img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
|
||||
</div>
|
||||
<!-- <div v-if="props.loading" class="skeleton-chart-circle skeleton-pulse"></div> -->
|
||||
<Echart :options="barChartOption" class="bar-chart" height="17.5vh" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -68,6 +102,7 @@ import { ref, onMounted, watch, computed } from 'vue'
|
||||
import { rgbToHex } from '@/utils/color'
|
||||
|
||||
interface Props {
|
||||
loading?: boolean
|
||||
totalCount: number
|
||||
formalEmployeeCount: number
|
||||
externalStaffCount: number
|
||||
@@ -87,6 +122,17 @@ const formalEmployeeDigits = computed(() => String(props.formalEmployeeCount).sp
|
||||
const externalStaffDigits = computed(() => String(props.externalStaffCount).split('').map(Number))
|
||||
const visitorDigits = computed(() => String(props.visitorCount).split('').map(Number))
|
||||
|
||||
// 计算数字区域的最大宽度
|
||||
// 每个数字框宽度 14px，gap 2px
|
||||
const maxNumberWidth = computed(() => {
|
||||
const formalLen = formalEmployeeDigits.value.length
|
||||
const externalLen = externalStaffDigits.value.length
|
||||
const visitorLen = visitorDigits.value.length
|
||||
const maxLen = Math.max(formalLen, externalLen, visitorLen)
|
||||
// 宽度 = 数字个数 * 14px + (数字个数 - 1) * 2px
|
||||
return maxLen > 0 ? maxLen * 14 + (maxLen - 1) * 2 : 0
|
||||
})
|
||||
|
||||
// 图表引用
|
||||
const barChartOption = ref({
|
||||
legend: {
|
||||
@@ -243,17 +289,25 @@ onMounted(() => {
|
||||
.top-card-right-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 5px;
|
||||
padding: 0 10px;
|
||||
font-size: 0.7rem;
|
||||
color: #fff;
|
||||
|
||||
> :first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 5px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.type-number-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 2px;
|
||||
font-size: 0.8rem;
|
||||
color: #fff;
|
||||
margin-left: 8px;
|
||||
|
||||
.type-number {
|
||||
display: inline-block;
|
||||
@@ -268,6 +322,10 @@ onMounted(() => {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
> span:last-child {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -290,5 +348,141 @@ onMounted(() => {
|
||||
min-height: 17.5vh;
|
||||
}
|
||||
}
|
||||
|
||||
// 骨架屏样式
|
||||
.skeleton-container {
|
||||
.skeleton-card {
|
||||
display: flex;
|
||||
padding: 0 20px;
|
||||
column-gap: 15px;
|
||||
font-size: 0.8rem;
|
||||
|
||||
.skeleton-left {
|
||||
display: flex;
|
||||
height: 12vh;
|
||||
min-width: 15vw;
|
||||
padding: 0 10px;
|
||||
background-image: url('@/assets/imgs/total_count_card_bg.png');
|
||||
background-size: cover;
|
||||
column-gap: 6px;
|
||||
align-items: center;
|
||||
|
||||
.skeleton-icon {
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.skeleton-text {
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.skeleton-numbers {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
font-size: 0.8rem;
|
||||
|
||||
.skeleton-number {
|
||||
width: 26px;
|
||||
height: 50px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-right {
|
||||
display: flex;
|
||||
height: 12vh;
|
||||
min-width: 20vw;
|
||||
background-image: url('@/assets/imgs/staff_types_bg.png');
|
||||
background-position: top center;
|
||||
background-size: cover;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
row-gap: 4px;
|
||||
|
||||
.skeleton-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 5px;
|
||||
padding: 0 10px;
|
||||
|
||||
.skeleton-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex: 1;
|
||||
|
||||
.skeleton-icon-small {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.skeleton-text {
|
||||
height: 16px;
|
||||
width: 60px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-numbers {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
font-size: 0.8rem;
|
||||
|
||||
.skeleton-number-small {
|
||||
width: 14px;
|
||||
height: 25px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 骨架屏动画
|
||||
.skeleton-pulse {
|
||||
animation: skeleton-loading-overview 1.5s ease-in-out infinite;
|
||||
|
||||
}
|
||||
|
||||
// 圆形饼图骨架屏
|
||||
.skeleton-chart-circle {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
margin: 30px auto 50px auto;
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
// 柱状图骨架屏
|
||||
// .skeleton-chart-bar {
|
||||
// width: 100%;
|
||||
// height: 17.5vh;
|
||||
// background-color: #444;
|
||||
// border-radius: 8px;
|
||||
// }
|
||||
|
||||
@keyframes skeleton-loading-overview {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,14 +2,38 @@
|
||||
<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="tab" :class="{ active: activeTab === '工程类事项' }" @click="handleTabClick('工程类事项')">工程类事项</span>
|
||||
</div>
|
||||
</div>
|
||||
<img class="title-line" src="@/assets/images/title_border_line.png" />
|
||||
|
||||
<div class="chart-grid">
|
||||
<!-- 骨架屏 -->
|
||||
<div v-if="props.loading" class="skeleton-container">
|
||||
<div class="skeleton-grid">
|
||||
<div class="skeleton-card" v-for="i in 6" :key="i">
|
||||
<div class="skeleton-title skeleton-pulse"></div>
|
||||
<div class="skeleton-chart">
|
||||
<div class="skeleton-chart-circle skeleton-pulse"></div>
|
||||
<div class="skeleton-chart-center">
|
||||
<div class="skeleton-text-small skeleton-pulse"></div>
|
||||
<div class="skeleton-text-large skeleton-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skeleton-legend">
|
||||
<div class="skeleton-legend-item" v-for="j in 4" :key="j">
|
||||
<div class="skeleton-dot skeleton-pulse"></div>
|
||||
<div class="skeleton-text skeleton-pulse"></div>
|
||||
<div class="skeleton-value skeleton-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 实际内容 -->
|
||||
<div v-else class="chart-grid">
|
||||
<div class="chart-card" v-for="item in currentCharts" :key="`${activeTab}-${item.title}`">
|
||||
<div class="chart-title" @click="handleChartTitleClick()">{{ item.title }}</div>
|
||||
<div class="chart-content">
|
||||
@@ -40,7 +64,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -49,7 +73,7 @@ import { computed, ref, watch } from 'vue'
|
||||
import { ElTooltip } from 'element-plus'
|
||||
import type { EChartsOption } from 'echarts'
|
||||
|
||||
type TabType = '安全类' | '工程类'
|
||||
type TabType = '安全类事项' | '工程类事项'
|
||||
type StatusKey = 'notStarted' | 'inProgress' | 'done' | 'voided'
|
||||
|
||||
interface ChartItem {
|
||||
@@ -67,12 +91,12 @@ const statusList: { key: StatusKey; label: string; color: string }[] = [
|
||||
]
|
||||
|
||||
const defaultChart: ChartItem[] = [
|
||||
{ title: '每日检查(维保类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
|
||||
{ title: '每月检查(维保类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
|
||||
{ title: '每年检查(维保类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
|
||||
{ title: '每日检查(巡检类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
|
||||
{ title: '每月检查(巡检类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
|
||||
{ title: '每年检查(巡检类)', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } }
|
||||
{ title: '当日维保', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
|
||||
{ title: '本月维保', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
|
||||
{ title: '本年维保', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
|
||||
{ title: '当日巡检', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
|
||||
{ title: '本月巡检', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
|
||||
{ title: '本年巡检', total: 6, rate: 0, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } }
|
||||
]
|
||||
|
||||
const handleChartTitleClick = () => {
|
||||
@@ -80,23 +104,24 @@ const handleChartTitleClick = () => {
|
||||
}
|
||||
|
||||
const tabCharts = ref<Record<TabType, ChartItem[]>>({
|
||||
安全类: [...defaultChart],
|
||||
工程类: [...defaultChart]
|
||||
安全类事项: [...defaultChart],
|
||||
工程类事项: [...defaultChart]
|
||||
})
|
||||
|
||||
const props = defineProps<{
|
||||
loading?: boolean
|
||||
riskStatistics?: Record<TabType, ChartItem[]>
|
||||
}>()
|
||||
|
||||
const activeTab = ref<TabType>('安全类')
|
||||
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]
|
||||
安全类事项: newData['安全类事项'] ? JSON.parse(JSON.stringify(newData['安全类事项'])) : [...defaultChart],
|
||||
工程类事项: newData['工程类事项'] ? JSON.parse(JSON.stringify(newData['工程类事项'])) : [...defaultChart]
|
||||
}
|
||||
}
|
||||
}, { deep: true, immediate: true })
|
||||
@@ -415,5 +440,122 @@ const handleTabClick = (tab: TabType) => {
|
||||
// padding: 5px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// 骨架屏样式
|
||||
.skeleton-container {
|
||||
.skeleton-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
|
||||
.skeleton-card {
|
||||
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;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.skeleton-title {
|
||||
width: 120px;
|
||||
height: 16px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.skeleton-chart {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.skeleton-chart-circle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.skeleton-chart-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
|
||||
.skeleton-text-small {
|
||||
width: 40px;
|
||||
height: 12px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.skeleton-text-large {
|
||||
width: 30px;
|
||||
height: 16px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-legend {
|
||||
width: 100%;
|
||||
|
||||
.skeleton-legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
|
||||
.skeleton-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.skeleton-text {
|
||||
flex: 1;
|
||||
height: 12px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 4px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.skeleton-value {
|
||||
width: 20px;
|
||||
height: 12px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 骨架屏动画
|
||||
.skeleton-pulse {
|
||||
animation: skeleton-loading-riskstats 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes skeleton-loading-riskstats {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -3,17 +3,21 @@
|
||||
<div class="panel-title">超时工单</div>
|
||||
<img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
|
||||
|
||||
<!-- 骨架屏 -->
|
||||
<!-- 实际内容 -->
|
||||
<div class="tip-container">
|
||||
<div class="tip-image">
|
||||
<img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
|
||||
<span class="number">{{ timeoutWorkOrders?.total || 0 }}</span>
|
||||
<div v-if="props.loading" style="width: 20px; height: 20px;" class="number skeleton-pulse"></div>
|
||||
<span v-else class="number">{{ timeoutWorkOrders?.total || 0 }}</span>
|
||||
</div>
|
||||
<img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
|
||||
<div class="tip-content">
|
||||
<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;">{{ timeoutWorkOrders?.total || 0 }}</span>
|
||||
<div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
|
||||
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: red;">{{ timeoutWorkOrders?.total || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -32,7 +36,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<AlertList :linkUrl="linkUrl" style="margin-right: 1vw;" title="工单详情" :list-data="alertDetails" ></AlertList>
|
||||
<AlertList :linkUrl="linkUrl" style="margin-right: 1vw;" title="工单详情" :list-data="alertDetails" :loading="props.loading" ></AlertList>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -52,6 +56,7 @@ interface TimeoutWorkOrders {
|
||||
|
||||
// Props定义
|
||||
interface Props {
|
||||
loading?: boolean
|
||||
timeoutWorkOrders?: TimeoutWorkOrders
|
||||
alertDetails?: AlertItem[]
|
||||
sourceIndex?: number
|
||||
@@ -247,5 +252,104 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 骨架屏样式
|
||||
.skeleton-container {
|
||||
.skeleton-tip-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
|
||||
.skeleton-tip-image {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: 10px;
|
||||
z-index: 2;
|
||||
|
||||
.skeleton-circle {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.skeleton-number {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.skeleton-bg {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.skeleton-tip-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 8px 15px;
|
||||
|
||||
.skeleton-col-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.skeleton-icon {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.skeleton-text {
|
||||
flex: 1;
|
||||
height: 16px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.skeleton-value {
|
||||
width: 40px;
|
||||
height: 18px;
|
||||
background-color: #3a3a3a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 骨架屏动画
|
||||
.skeleton-pulse {
|
||||
animation: skeleton-loading-timeout 1.5s ease-in-out infinite;
|
||||
background-color: #444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@keyframes skeleton-loading-timeout {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,11 +2,16 @@
|
||||
<div class="dashboard-container">
|
||||
<!-- 顶部标题栏 -->
|
||||
<div class="header-container">
|
||||
<div class="header-left">
|
||||
<div class="back-button" @click="openRegionSelector"> 集团
|
||||
<span>···</span>
|
||||
</div>
|
||||
</div>
|
||||
<HeaderSelector
|
||||
back-button-type="none"
|
||||
:show-back-button="false"
|
||||
display-text="集团"
|
||||
:clickable="true"
|
||||
:show-selector-indicator="true"
|
||||
selector-type="region"
|
||||
:selected-value="selectedRegion"
|
||||
@selector-change="onRegionChange"
|
||||
/>
|
||||
<h1 class="header-title">总部综合监控大屏</h1>
|
||||
<div class="date-wrapper">
|
||||
<span style="margin-top: 6%;font-size: 0.9rem;">{{ currentDate }}</span>
|
||||
@@ -19,39 +24,41 @@
|
||||
<!-- 主内容区 -->
|
||||
<div class="content-container">
|
||||
<div class="left-wrapper">
|
||||
<OverviewPanel :totalCount="dashboardData?.totalCount || 0"
|
||||
<OverviewPanel :loading="isFirstLoading"
|
||||
:totalCount="dashboardData?.totalCount || 0"
|
||||
:formalEmployeeCount="dashboardData?.formalEmployeeCount || 0"
|
||||
:externalStaffCount="dashboardData?.externalStaffCount || 0"
|
||||
:visitorCount="dashboardData?.visitorCount || 0"
|
||||
:parkStatistics="dashboardData?.parkStatistics"/>
|
||||
<RiskStatisticsPanel :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
|
||||
<RiskStatisticsPanel :loading="isFirstLoading" :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
|
||||
@tab-change="handleRiskTabChange" :campus_id="query.campus_id"/>
|
||||
</div>
|
||||
<div class="right-wrapper">
|
||||
<HighRiskAlertPanel :alertData="dashboardData?.alertData"
|
||||
<HighRiskAlertPanel :loading="isFirstLoading"
|
||||
:alertData="dashboardData?.alertData"
|
||||
:alertDetails="dashboardData?.alertData.details"
|
||||
linkUrl="http://10.0.64.20/security/console/command-center?p=tabl"
|
||||
:sourceIndex="sourceIndex"/>
|
||||
<TimeoutWorkOrderPanel :timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
|
||||
<TimeoutWorkOrderPanel :loading="isFirstLoading"
|
||||
:timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
|
||||
:alertDetails="dashboardData?.timeoutWorkOrders.details"
|
||||
linkUrl="http://10.0.64.20/pms/workorder-list"
|
||||
:sourceIndex="sourceIndex"/>
|
||||
</div>
|
||||
<HiddenDangerPanel :hiddenDangerData="dashboardData?.hiddenDangerData"/>
|
||||
<HiddenDangerPanel :loading="isFirstLoading" :hiddenDangerData="dashboardData?.hiddenDangerData"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 区域选择弹窗 -->
|
||||
<RegionSelector v-model="regionSelectorVisible" :modelSelected="selectedRegion"
|
||||
:regions="regionOption"
|
||||
@change="onRegionChange"/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {getTableList, getTableData, getWorkOrderStatistics} from './report'
|
||||
import {ref, onMounted, watch, onUnmounted} from 'vue'
|
||||
import {ref, reactive, onMounted, watch, onUnmounted} from 'vue'
|
||||
import {useRouter} from 'vue-router'
|
||||
import RegionSelector from './components/RegionSelector.vue'
|
||||
|
||||
// 创建 AbortController 用于取消请求
|
||||
const abortController = new AbortController()
|
||||
import HeaderSelector from './components/HeaderSelector.vue'
|
||||
import WeatherWarning from './components/WeatherWarning.vue'
|
||||
import {getDashboardData, getAlertDetails, type DashboardData} from '@/api/dashboard'
|
||||
|
||||
@@ -60,7 +67,6 @@ import RiskStatisticsPanel from './components/RiskStatisticsPanel.vue'
|
||||
import HighRiskAlertPanel from './components/HighRiskAlertPanel.vue'
|
||||
import TimeoutWorkOrderPanel from './components/TimeoutWorkOrderPanel.vue'
|
||||
import HiddenDangerPanel from './components/HiddenDangerPanel.vue'
|
||||
import {error} from "echarts/types/src/util/log";
|
||||
|
||||
// 类型定义
|
||||
interface AlertItem {
|
||||
@@ -73,14 +79,13 @@ interface RegionItem {
|
||||
code: string
|
||||
}
|
||||
|
||||
type TabType = '安全类' | '工程类'
|
||||
type TabType = '安全类事项' | '工程类事项'
|
||||
|
||||
// 响应式数据
|
||||
const currentDateTime = ref<string>('')
|
||||
const currentDate = ref<string>('')
|
||||
const currentWeek = ref<string>('')
|
||||
const currentTime = ref<string>('')
|
||||
const regionSelectorVisible = ref<boolean>(false)
|
||||
const selectedRegion = ref<string>('')
|
||||
const sourceIndex = ref<number>(1)
|
||||
|
||||
@@ -96,11 +101,14 @@ const visitorCount = ref<number>(0)
|
||||
const parkStatistics = ref<any>()
|
||||
// 高危作业/安全培训考试/安全培训考试
|
||||
const riskStatistics = ref<any>({
|
||||
安全类: [],
|
||||
工程类: []
|
||||
安全类事项: [],
|
||||
工程类事项: []
|
||||
})
|
||||
const dangerDetail = ref<any>()
|
||||
|
||||
// 加载状态
|
||||
const isFirstLoading = ref<boolean>(true)
|
||||
|
||||
// 动画相关的状态
|
||||
const isAnimating = ref<boolean>(false)
|
||||
const animationDuration = 2000 // 动画持续时间（毫秒）
|
||||
@@ -201,7 +209,6 @@ const updateAllCounts = (counts: {
|
||||
// 路由
|
||||
const router = useRouter()
|
||||
|
||||
const regionOption = ref<RegionItem[]>([])
|
||||
// 定时器ID
|
||||
const dashboardTimerId = ref<ReturnType<typeof setInterval> | null>(null)
|
||||
const timeUpdateTimerId = ref<ReturnType<typeof setInterval> | null>(null)
|
||||
@@ -266,7 +273,7 @@ onMounted(async () => {
|
||||
if (!records || records.length === 0) {
|
||||
// 缓存不存在或已过期，调用接口
|
||||
try {
|
||||
let result = await getTableList('park_info_list')
|
||||
let result = await getTableList('park_info_list', {}, false, { signal: abortController.signal })
|
||||
records = result.records || []
|
||||
|
||||
if (records && records.length > 0) {
|
||||
@@ -280,21 +287,6 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
if (records && records.length > 0) {
|
||||
// 去重region字段，使用Map来确保唯一性
|
||||
const regionMap = new Map()
|
||||
records.forEach(el => {
|
||||
if (!regionMap.has(el.region)) {
|
||||
regionMap.set(el.region, {
|
||||
name: el.region,
|
||||
code: el.region_id // 使用region_id作为code
|
||||
})
|
||||
}
|
||||
})
|
||||
// 转换为数组
|
||||
regionOption.value = Array.from(regionMap.values())
|
||||
|
||||
console.log('regionOption.value>>>>', regionOption.value);
|
||||
|
||||
// 将园区信息去重
|
||||
const parkMap = new Map();
|
||||
records.forEach(el => {
|
||||
@@ -308,14 +300,19 @@ onMounted(async () => {
|
||||
// 将parkMap转换为数组
|
||||
query.campus_id = Array.from(parkMap.values()).map(e1 => e1.code).join();
|
||||
}
|
||||
// 将初始化的逻辑放在这里
|
||||
dashboardData.value.hiddenDangerData.general = 0
|
||||
dashboardData.value.hiddenDangerData.major = 0
|
||||
dashboardData.value.hiddenDangerData.progress.overdue = 0
|
||||
dashboardData.value.hiddenDangerData.progress.processed = 0
|
||||
dashboardData.value.hiddenDangerData.progress.processing = 0
|
||||
// 初始化数据，loadDashboardData()既然是包含初始化的逻辑，所以并不适合定时调用，不然每次都要初始化。
|
||||
await loadDashboardData()
|
||||
|
||||
// 将初始化的逻辑放在这里（在loadDashboardData之后，确保dashboardData.value已初始化）
|
||||
if (dashboardData.value && dashboardData.value.hiddenDangerData) {
|
||||
dashboardData.value.hiddenDangerData.general = dashboardData.value.hiddenDangerData.general || 0
|
||||
dashboardData.value.hiddenDangerData.major = dashboardData.value.hiddenDangerData.major || 0
|
||||
if (dashboardData.value.hiddenDangerData.progress) {
|
||||
dashboardData.value.hiddenDangerData.progress.overdue = dashboardData.value.hiddenDangerData.progress.overdue || 0
|
||||
dashboardData.value.hiddenDangerData.progress.processed = dashboardData.value.hiddenDangerData.progress.processed || 0
|
||||
dashboardData.value.hiddenDangerData.progress.processing = dashboardData.value.hiddenDangerData.progress.processing || 0
|
||||
}
|
||||
}
|
||||
|
||||
// 启动定时器
|
||||
timeOut1()
|
||||
@@ -326,8 +323,11 @@ onMounted(async () => {
|
||||
}, 2 * 60 * 1000) // 每2分钟更新一次
|
||||
})
|
||||
|
||||
// 组件卸载时清理定时器
|
||||
// 组件卸载时清理定时器并取消所有请求
|
||||
onUnmounted(() => {
|
||||
// 取消所有正在进行的请求
|
||||
abortController.abort()
|
||||
|
||||
if (dashboardTimerId.value) {
|
||||
clearInterval(dashboardTimerId.value)
|
||||
dashboardTimerId.value = null
|
||||
@@ -344,6 +344,11 @@ onUnmounted(() => {
|
||||
let isFirstLoad = ref<boolean>(true)
|
||||
// 数据初始化方法
|
||||
const loadDashboardData = async (): Promise<void> => {
|
||||
// 第一次加载时显示骨架屏
|
||||
if (isFirstLoading.value) {
|
||||
console.log('第一次加载，显示骨架屏');
|
||||
}
|
||||
|
||||
const data = await getDashboardData()
|
||||
if (isFirstLoad.value) {
|
||||
console.log('第一次加载');
|
||||
@@ -352,9 +357,12 @@ const loadDashboardData = async (): Promise<void> => {
|
||||
}
|
||||
console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
|
||||
|
||||
try {
|
||||
// 获取总体概览数据
|
||||
getTableList('generalTotal', query).then(generalTotal => {
|
||||
// 收集所有异步请求
|
||||
const promises = []
|
||||
|
||||
// 获取总体概览数据
|
||||
promises.push(
|
||||
getTableList('generalTotal', query, false, { signal: abortController.signal }).then(generalTotal => {
|
||||
if (generalTotal.records && generalTotal.records.length > 0) {
|
||||
dashboardData.value.totalCount = Number(generalTotal.records[0].totalCount)
|
||||
dashboardData.value.formalEmployeeCount = Number(generalTotal.records[0].formalEmployeeCount)
|
||||
@@ -367,14 +375,14 @@ const loadDashboardData = async (): Promise<void> => {
|
||||
external: Number(dashboardData.value.externalStaffCount),
|
||||
visitor: Number(dashboardData.value.visitorCount)
|
||||
})
|
||||
}).catch(error => {
|
||||
console.error('获取总体概览数据失败:', error)
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('获取总体概览数据失败:', error)
|
||||
}
|
||||
)
|
||||
|
||||
try {
|
||||
// 获取各园区统计数据
|
||||
getTableList('parkscreen_user_info', query).then(parkscreen_user_info => {
|
||||
// 获取各园区统计数据
|
||||
promises.push(
|
||||
getTableList('parkscreen_user_info', query, false, { signal: abortController.signal }).then(parkscreen_user_info => {
|
||||
if (parkscreen_user_info.records && parkscreen_user_info.records.length > 0) {
|
||||
dashboardData.value.parkStatistics = parkscreen_user_info.records.map(el => {
|
||||
return {
|
||||
@@ -385,14 +393,14 @@ const loadDashboardData = async (): Promise<void> => {
|
||||
}
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取各园区统计数据失败:', error)
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('获取各园区统计数据失败:', error)
|
||||
}
|
||||
)
|
||||
|
||||
try {
|
||||
// 获取风险预警数据
|
||||
getTableList('risk_alert_data', query).then(risk_alert_data => {
|
||||
// 获取风险预警数据
|
||||
promises.push(
|
||||
getTableList('risk_alert_data', query, false, { signal: abortController.signal }).then(risk_alert_data => {
|
||||
if (risk_alert_data.records && risk_alert_data.records.length > 0) {
|
||||
dashboardData.value.alertData.total = risk_alert_data.records[0].total
|
||||
dashboardData.value.alertData.processed = risk_alert_data.records[0].processed
|
||||
@@ -402,26 +410,22 @@ const loadDashboardData = async (): Promise<void> => {
|
||||
}).catch(error => {
|
||||
console.error('获取风险预警数据失败:', error)
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('获取风险预警数据失败:', error)
|
||||
}
|
||||
)
|
||||
|
||||
try {
|
||||
// 获取风险预警详情数据
|
||||
getTableList('risk_alert_detail', query).then(risk_alert_detail => {
|
||||
// 获取风险预警详情数据
|
||||
promises.push(
|
||||
getTableList('risk_alert_detail', query, false, { signal: abortController.signal }).then(risk_alert_detail => {
|
||||
if (risk_alert_detail.records && risk_alert_detail.records.length > 0) {
|
||||
dashboardData.value.alertData.details = risk_alert_detail.records
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取风险预警详情数据失败:', error)
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('获取风险预警详情数据失败:', error)
|
||||
}
|
||||
)
|
||||
|
||||
try {
|
||||
// 获取超期工单数据
|
||||
getTableList('timeout_work_order', query).then(timeout_work_order => {
|
||||
// 获取超期工单数据
|
||||
promises.push(
|
||||
getTableList('timeout_work_order', query, false, { signal: abortController.signal }).then(timeout_work_order => {
|
||||
if (timeout_work_order.records && timeout_work_order.records.length >= 0) {
|
||||
dashboardData.value.timeoutWorkOrders.total = timeout_work_order.records.length
|
||||
dashboardData.value.timeoutWorkOrders.details = timeout_work_order.records
|
||||
@@ -429,201 +433,111 @@ const loadDashboardData = async (): Promise<void> => {
|
||||
}).catch(error => {
|
||||
console.error('获取超期工单数据失败:', error)
|
||||
})
|
||||
)
|
||||
|
||||
// 处理风险统计和隐患数据（这些是异步的）
|
||||
promises.push(
|
||||
Promise.all([
|
||||
handleRiskTabChange('安全类事项'),
|
||||
handleHiddenDangerPannelData(query)
|
||||
]).catch(error => {
|
||||
console.error('处理风险统计和隐患数据失败:', error)
|
||||
})
|
||||
)
|
||||
|
||||
// 等待所有异步操作完成
|
||||
try {
|
||||
await Promise.all(promises)
|
||||
console.log('所有数据加载完成')
|
||||
|
||||
// 第一次加载完成后，隐藏骨架屏
|
||||
if (isFirstLoading.value) {
|
||||
isFirstLoading.value = false
|
||||
console.log('隐藏骨架屏')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取超期工单数据失败:', error)
|
||||
console.error('数据加载过程中出现错误:', error)
|
||||
// 即使出错也要隐藏骨架屏，避免界面一直处于加载状态
|
||||
if (isFirstLoading.value) {
|
||||
isFirstLoading.value = false
|
||||
}
|
||||
}
|
||||
handleRiskTabChange('安全类')
|
||||
handleHiddenDangerPannelData(query)
|
||||
console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
|
||||
}
|
||||
|
||||
const handleHiddenDangerPannelData = (query) => {
|
||||
let _data = {
|
||||
flag: false,
|
||||
general: 0,
|
||||
major: 0,
|
||||
overdue: 0,
|
||||
processed: 0,
|
||||
processing: 0,
|
||||
pending: 0
|
||||
}
|
||||
const handleHiddenDangerPannelData = async (query) => {
|
||||
const promises = []
|
||||
|
||||
let _data2 = {
|
||||
flag: false,
|
||||
general: 0,
|
||||
major: 0,
|
||||
overdue: 0,
|
||||
processed: 0,
|
||||
processing: 0,
|
||||
pending: 0
|
||||
}
|
||||
try {
|
||||
// 获取隐患排查治理数据
|
||||
getTableList('risk_level_count', query).then(res => {
|
||||
// 获取隐患排查治理数据 - 系统数据
|
||||
promises.push(
|
||||
getTableList('risk_level_count', query, false, { signal: abortController.signal }).then(res => {
|
||||
if (res.records && res.records.length > 0) {
|
||||
_data.general = _data.general + Number(res.records[0].general_count)
|
||||
_data.major = _data.major + Number(res.records[0].major_count)
|
||||
// 获取隐患排查治理数据
|
||||
getTableList('risk_status_count', query).then(res => {
|
||||
if (res.records && res.records.length > 0) {
|
||||
// 接口返回的已经是百分比，直接使用
|
||||
const record = res.records[0]
|
||||
_data.overdue = Number(record.overdueCnt) || 0
|
||||
_data.processed = Number(record.processedCnt) || 0
|
||||
_data.processing = Number(record.processingCnt) || 0
|
||||
_data.pending = 0 // 接口没有返回pending，设为0
|
||||
_data.flag = true
|
||||
|
||||
console.log('risk_status_count 接口返回数据:', record)
|
||||
console.log('处理后的 _data:', _data)
|
||||
|
||||
if (_data2.flag) {
|
||||
// 合并数据
|
||||
console.log("请求系统和第三方成功，合并数据", _data, _data2);
|
||||
let generalCnt = _data.general + _data2.general
|
||||
let majorCnt = _data.major + _data2.major
|
||||
dashboardData.value.hiddenDangerData.general = generalCnt
|
||||
dashboardData.value.hiddenDangerData.major = majorCnt
|
||||
|
||||
// 如果第三方数据也是百分比，需要合并；否则使用系统数据
|
||||
// 这里假设系统数据是百分比，第三方数据可能是数量或百分比
|
||||
let overdueCnt, processedCnt, processingCnt, pendingCnt
|
||||
if (_data2.overdue > 1 || _data2.processed > 1 || _data2.processing > 1) {
|
||||
// 第三方数据可能是百分比，直接使用系统数据（因为系统数据更准确）
|
||||
overdueCnt = _data.overdue.toFixed(2)
|
||||
processedCnt = _data.processed.toFixed(2)
|
||||
processingCnt = _data.processing.toFixed(2)
|
||||
pendingCnt = _data.pending.toFixed(2)
|
||||
} else {
|
||||
// 第三方数据可能是数量，需要计算百分比
|
||||
let totalCnt = generalCnt + majorCnt
|
||||
overdueCnt = totalCnt > 0 ? ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2) : '0.00'
|
||||
processedCnt = totalCnt > 0 ? ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2) : '0.00'
|
||||
processingCnt = totalCnt > 0 ? ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2) : '0.00'
|
||||
pendingCnt = totalCnt > 0 ? ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2) : '0.00'
|
||||
}
|
||||
|
||||
dashboardData.value.hiddenDangerData.progress = {
|
||||
overdue: overdueCnt,
|
||||
processed: processedCnt,
|
||||
processing: processingCnt,
|
||||
pending: pendingCnt,
|
||||
}
|
||||
console.log('合并后的 progress:', dashboardData.value.hiddenDangerData.progress)
|
||||
} else {
|
||||
console.log("请求系统成功，展示数据", _data, _data2);
|
||||
dashboardData.value.hiddenDangerData.general = _data.general
|
||||
dashboardData.value.hiddenDangerData.major = _data.major
|
||||
|
||||
// 接口返回的已经是百分比，直接使用
|
||||
dashboardData.value.hiddenDangerData.progress = {
|
||||
overdue: _data.overdue.toFixed(2),
|
||||
processed: _data.processed.toFixed(2),
|
||||
processing: _data.processing.toFixed(2),
|
||||
pending: _data.pending.toFixed(2),
|
||||
}
|
||||
console.log('系统数据 progress:', dashboardData.value.hiddenDangerData.progress)
|
||||
}
|
||||
}
|
||||
})
|
||||
dashboardData.value.hiddenDangerData.general = Number(res.records[0].general_count)
|
||||
dashboardData.value.hiddenDangerData.major = Number(res.records[0].major_count)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// 获取隐患排查治理数据
|
||||
getTableList('hidden_danger_investigation', query).then(res => {
|
||||
return getTableList('risk_status_count', query, false, { signal: abortController.signal })
|
||||
}).then(res => {
|
||||
if (res.records && res.records.length > 0) {
|
||||
_data2.general = Number(res.records[0].general)
|
||||
_data2.major = Number(res.records[0].major)
|
||||
|
||||
// 安全指数另算，再起一个报表
|
||||
// dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
|
||||
// 在这里添加获取安全指数的逻辑
|
||||
getTableList('hidden_danger_safety_index', query).then(res => {
|
||||
if (res.records && res.records.length > 0) {
|
||||
dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取隐患排查治理数据失败:', error)
|
||||
})
|
||||
|
||||
// 获取隐患排查治理处理进度数据
|
||||
getTableList('hidden_danger_process_progress', query).then(res => {
|
||||
// if (res.records && res.records.length > 0) {
|
||||
// _data2.flag = true
|
||||
// _data2.overdue = Number(res.records[0].overdue) / 100 * (_data2.general + _data2.major)
|
||||
// _data2.processed = Number(res.records[0].processed) / 100 * (_data2.general + _data2.major)
|
||||
// _data2.processing = Number(res.records[0].processing) / 100 * (_data2.general + _data2.major)
|
||||
// _data2.pending = Number(res.records[0].pending) / 100 * (_data2.general + _data2.major)
|
||||
|
||||
// if (_data.flag) {
|
||||
// console.log("请求第三方和系统成功，合并数据", _data, _data2);
|
||||
// // 合并数据
|
||||
// let generalCnt = _data.general + _data2.general
|
||||
// let majorCnt = _data.major + _data2.major
|
||||
// dashboardData.value.hiddenDangerData.general = generalCnt
|
||||
// dashboardData.value.hiddenDangerData.major = majorCnt
|
||||
|
||||
// let totalCnt = generalCnt + majorCnt
|
||||
// let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2)
|
||||
// let processedCnt = ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2)
|
||||
// let processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2)
|
||||
// let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2)
|
||||
// dashboardData.value.hiddenDangerData.progress = {
|
||||
// overdue: overdueCnt,
|
||||
// processed: processedCnt,
|
||||
// processing: processingCnt,
|
||||
// pending: pendingCnt,
|
||||
// }
|
||||
// } else {
|
||||
// //显示三方数据
|
||||
// console.log("请求第三方成功，展示数据", _data, _data2);
|
||||
// dashboardData.value.hiddenDangerData.general = _data2.general
|
||||
// dashboardData.value.hiddenDangerData.major = _data2.major
|
||||
|
||||
// dashboardData.value.hiddenDangerData.progress = {
|
||||
// overdue: res.records[0].overdue,
|
||||
// processed: res.records[0].processed,
|
||||
// processing: res.records[0].processing,
|
||||
// pending: res.records[0].pending,
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}).catch(error => {
|
||||
console.error('获取隐患排查治理处理进度数据失败:', error)
|
||||
})
|
||||
const record = res.records[0]
|
||||
dashboardData.value.hiddenDangerData.progress = {
|
||||
overdue: Number(record.overdueCnt).toFixed(2),
|
||||
processed: Number(record.processedCnt).toFixed(2),
|
||||
processing: Number(record.processingCnt).toFixed(2),
|
||||
pending: '0.00'
|
||||
}
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取隐患排查治理数据失败:', error)
|
||||
console.error('获取系统隐患数据失败:', error)
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('获取隐患排查治理数据失败:', error)
|
||||
}
|
||||
)
|
||||
|
||||
try {
|
||||
// 获取隐患排查治理TOP3类型数据
|
||||
getTableList('hidden_danger_top', query).then(hidden_danger_top => {
|
||||
// 获取第三方隐患排查治理数据
|
||||
promises.push(
|
||||
getTableList('hidden_danger_investigation', query, false, { signal: abortController.signal }).then(res => {
|
||||
if (res.records && res.records.length > 0) {
|
||||
// 获取安全指数
|
||||
return getTableList('hidden_danger_safety_index', query, false, { signal: abortController.signal })
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.records && res.records.length > 0) {
|
||||
dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取第三方隐患数据失败:', error)
|
||||
})
|
||||
)
|
||||
|
||||
// 获取隐患排查治理TOP3类型数据
|
||||
promises.push(
|
||||
getTableList('hidden_danger_top', query, false, { signal: abortController.signal }).then(hidden_danger_top => {
|
||||
if (hidden_danger_top.records && hidden_danger_top.records.length > 0) {
|
||||
dashboardData.value.hiddenDangerData.top3Types = hidden_danger_top.records
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取隐患排查治理TOP3类型数据失败:', error)
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('获取隐患排查治理TOP3类型数据失败:', error)
|
||||
}
|
||||
)
|
||||
|
||||
return Promise.all(promises)
|
||||
}
|
||||
|
||||
// 处理风险统计tab切换
|
||||
const handleRiskTabChange = async (tab: TabType) => {
|
||||
const handleRiskTabChange = async (tab: TabType | '安全类事项' | '工程类事项') => {
|
||||
console.log('Tab changed to:', tab)
|
||||
try {
|
||||
// 处理类型映射：组件可能传入 '安全类事项' 或 '工程类事项'
|
||||
let normalizedTab: TabType = '安全类事项'
|
||||
if (tab === '安全类事项' || tab === '安全类事项') {
|
||||
normalizedTab = '安全类事项'
|
||||
} else if (tab === '工程类事项' || tab === '工程类事项') {
|
||||
normalizedTab = '工程类事项'
|
||||
}
|
||||
|
||||
let workOrderType = ''
|
||||
switch (tab) {
|
||||
case '安全类':
|
||||
case '安全类事项':
|
||||
workOrderType = '物业服务-安全'
|
||||
break
|
||||
case '工程类':
|
||||
case '工程类事项':
|
||||
workOrderType = '物业服务-工程'
|
||||
break
|
||||
default:
|
||||
@@ -636,7 +550,7 @@ const handleRiskTabChange = async (tab: TabType) => {
|
||||
workOrderType,
|
||||
taskType: '维保任务',
|
||||
campus_id: query.campus_id
|
||||
}).catch(error => {
|
||||
}, { signal: abortController.signal }).catch(error => {
|
||||
console.error('获取维保任务数据失败:', error)
|
||||
return {records: []}
|
||||
}),
|
||||
@@ -644,7 +558,7 @@ const handleRiskTabChange = async (tab: TabType) => {
|
||||
workOrderType,
|
||||
taskType: '巡检任务',
|
||||
campus_id: query.campus_id
|
||||
}).catch(error => {
|
||||
}, { signal: abortController.signal }).catch(error => {
|
||||
console.error('获取巡检任务数据失败:', error)
|
||||
return {records: []}
|
||||
})
|
||||
@@ -699,8 +613,8 @@ const handleRiskTabChange = async (tab: TabType) => {
|
||||
// 合并为6个图表：先维保（3个），后巡检（3个）
|
||||
const allCharts = [...maintenanceCharts, ...inspectionCharts]
|
||||
|
||||
// 更新riskStatistics
|
||||
riskStatistics.value[tab] = allCharts
|
||||
// 更新riskStatistics（使用标准化后的tab）
|
||||
riskStatistics.value[normalizedTab] = allCharts
|
||||
|
||||
console.log('更新后的riskStatistics:', riskStatistics.value)
|
||||
} catch (error) {
|
||||
@@ -717,11 +631,6 @@ const onRegionChange = (item: RegionItem): void => {
|
||||
})
|
||||
}
|
||||
|
||||
// 打开区域选择器
|
||||
const openRegionSelector = (): void => {
|
||||
regionSelectorVisible.value = true
|
||||
}
|
||||
|
||||
// 更新时间
|
||||
const updateTime = (): void => {
|
||||
const now = new Date()
|
||||
|
||||
@@ -2,13 +2,18 @@
|
||||
<div class="dashboard-container">
|
||||
<!-- 顶部标题栏 -->
|
||||
<div class="header-container">
|
||||
<div class="header-left">
|
||||
<img class="back-img" @click="returnToHeadquarters"
|
||||
src="@/assets/images/screen/back_image.png"/>
|
||||
<div class="back-button" @click="openRegionSelector"> {{ selectedRegion }}
|
||||
<span>···</span>
|
||||
</div>
|
||||
</div>
|
||||
<HeaderSelector
|
||||
back-button-type="image"
|
||||
:show-back-button="true"
|
||||
:on-back="returnToHeadquarters"
|
||||
:display-text="selectedRegion"
|
||||
:clickable="true"
|
||||
:show-selector-indicator="true"
|
||||
selector-type="park"
|
||||
:selected-value="selectedPark"
|
||||
:region-code="query.regionCode"
|
||||
@selector-change="onRegionChange"
|
||||
/>
|
||||
<h1 class="header-title">{{ selectedRegion }}综合监控大屏</h1>
|
||||
<div class="date-wrapper">
|
||||
<span style="margin-top: 6%;font-size: 0.9rem;">{{ currentDate }}</span>
|
||||
@@ -21,40 +26,42 @@
|
||||
<!-- 主内容区 -->
|
||||
<div class="content-container">
|
||||
<div class="left-wrapper">
|
||||
<OverviewPanel :totalCount="dashboardData?.totalCount || 0"
|
||||
<OverviewPanel :loading="isFirstLoading"
|
||||
:totalCount="dashboardData?.totalCount || 0"
|
||||
:formalEmployeeCount="dashboardData?.formalEmployeeCount || 0"
|
||||
:externalStaffCount="dashboardData?.externalStaffCount || 0"
|
||||
:visitorCount="dashboardData?.visitorCount || 0"
|
||||
:parkStatistics="dashboardData?.parkStatistics"/>
|
||||
<RiskStatisticsPanel :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
|
||||
<RiskStatisticsPanel :loading="isFirstLoading" :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
|
||||
:park="parkValue"
|
||||
@tab-change="handleRiskTabChange" :campus_id="query.campus_id"/>
|
||||
</div>
|
||||
<div class="right-wrapper">
|
||||
<HighRiskAlertPanel :alertData="dashboardData?.alertData"
|
||||
<HighRiskAlertPanel :loading="isFirstLoading"
|
||||
:alertData="dashboardData?.alertData"
|
||||
:alertDetails="dashboardData?.alertData.details"
|
||||
linkUrl="http://10.0.64.20/security/console/command-center?p=tabl"
|
||||
:sourceIndex="sourceIndex"/>
|
||||
<TimeoutWorkOrderPanel :timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
|
||||
<TimeoutWorkOrderPanel :loading="isFirstLoading"
|
||||
:timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
|
||||
:alertDetails="dashboardData?.timeoutWorkOrders.details"
|
||||
linkUrl="http://10.0.64.20/pms/workorder-list"
|
||||
:sourceIndex="sourceIndex"/>
|
||||
</div>
|
||||
<HiddenDangerPanel :hiddenDangerData="dashboardData?.hiddenDangerData"/>
|
||||
<HiddenDangerPanel :loading="isFirstLoading" :hiddenDangerData="dashboardData?.hiddenDangerData"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 区域选择弹窗 -->
|
||||
<RegionSelector v-model="regionSelectorVisible" :modelSelected="selectedPark"
|
||||
:regions="regionOption"
|
||||
@change="onRegionChange"/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {getTableList, getTableData, getWorkOrderStatistics} from './report'
|
||||
import {ref, onMounted, watch, onUnmounted} from 'vue'
|
||||
import {useRoute, useRouter} from 'vue-router'
|
||||
import RegionSelector from './components/RegionSelector.vue'
|
||||
|
||||
// 创建 AbortController 用于取消请求
|
||||
const abortController = new AbortController()
|
||||
import HeaderSelector from './components/HeaderSelector.vue'
|
||||
import WeatherWarning from './components/WeatherWarning.vue'
|
||||
import {getDashboardData, getAlertDetails, type DashboardData} from '@/api/dashboard'
|
||||
|
||||
@@ -75,14 +82,13 @@ interface RegionItem {
|
||||
code: string
|
||||
}
|
||||
|
||||
type TabType = '安全类' | '工程类'
|
||||
type TabType = '安全类事项' | '工程类事项'
|
||||
|
||||
// 响应式数据
|
||||
const currentDateTime = ref<string>('')
|
||||
const currentDate = ref<string>('')
|
||||
const currentWeek = ref<string>('')
|
||||
const currentTime = ref<string>('')
|
||||
const regionSelectorVisible = ref<boolean>(false)
|
||||
const selectedRegion = ref<string>('')
|
||||
const sourceIndex = ref<number>(1)
|
||||
|
||||
@@ -98,14 +104,17 @@ const visitorCount = ref<number>(0)
|
||||
const parkStatistics = ref<any>()
|
||||
// 危险作业/安全考核/安全、保密培训
|
||||
const riskStatistics = ref<Record<TabType, any[]>>({
|
||||
安全类: [],
|
||||
工程类: []
|
||||
安全类事项: [],
|
||||
工程类事项: []
|
||||
})
|
||||
const dangerDetail = ref<any>()
|
||||
// 动画相关的状态
|
||||
const isAnimating = ref<boolean>(false)
|
||||
const animationDuration = 2000 // 动画持续时间（毫秒）
|
||||
|
||||
// 首次加载状态
|
||||
const isFirstLoading = ref<boolean>(true)
|
||||
|
||||
// 数字变化时的闪烁效果
|
||||
const flashNumbers = () => {
|
||||
const numberElements = document.querySelectorAll('.total-number, .type-number')
|
||||
@@ -202,7 +211,6 @@ const updateAllCounts = (counts: {
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const regionOption = ref<RegionItem[]>([])
|
||||
const selectedPark = ref<string>('')
|
||||
const parkValue = ref<string>('')
|
||||
// 定时器ID
|
||||
@@ -279,7 +287,7 @@ onMounted(async () => {
|
||||
if (!records || records.length === 0) {
|
||||
// 缓存不存在或已过期，调用接口
|
||||
try {
|
||||
let result = await getTableList('park_info_list')
|
||||
let result = await getTableList('park_info_list', {}, false, { signal: abortController.signal })
|
||||
records = result.records || []
|
||||
|
||||
if (records && records.length > 0) {
|
||||
@@ -304,20 +312,20 @@ onMounted(async () => {
|
||||
})
|
||||
}
|
||||
})
|
||||
// 转换为数组
|
||||
regionOption.value = Array.from(regionMap.values())
|
||||
console.log('regionOption.value>>>>', regionOption.value);
|
||||
|
||||
query.campus_id = regionOption.value.map(el => el.code).join()
|
||||
// 转换为数组并设置 campus_id
|
||||
const regionArray = Array.from(regionMap.values())
|
||||
query.campus_id = regionArray.map(el => el.code).join()
|
||||
}
|
||||
// 暂时先放在这里
|
||||
dashboardData.value.hiddenDangerData.general = 0
|
||||
dashboardData.value.hiddenDangerData.major = 0
|
||||
dashboardData.value.hiddenDangerData.progress.overdue = 0
|
||||
dashboardData.value.hiddenDangerData.progress.processed = 0
|
||||
dashboardData.value.hiddenDangerData.progress.processing = 0
|
||||
// 初始化数据
|
||||
// 初始化数据 - 先加载数据，再设置初始值
|
||||
await loadDashboardData()
|
||||
// 暂时先放在这里 - 确保 dashboardData.value 已初始化后再访问
|
||||
if (dashboardData.value && dashboardData.value.hiddenDangerData) {
|
||||
dashboardData.value.hiddenDangerData.general = 0
|
||||
dashboardData.value.hiddenDangerData.major = 0
|
||||
dashboardData.value.hiddenDangerData.progress.overdue = 0
|
||||
dashboardData.value.hiddenDangerData.progress.processed = 0
|
||||
dashboardData.value.hiddenDangerData.progress.processing = 0
|
||||
}
|
||||
|
||||
// 启动定时器
|
||||
timeOut1()
|
||||
@@ -328,8 +336,11 @@ onMounted(async () => {
|
||||
}, 2 * 60 * 1000) // 每2分钟更新一次
|
||||
})
|
||||
|
||||
// 组件卸载时清理定时器
|
||||
// 组件卸载时清理定时器并取消所有请求
|
||||
onUnmounted(() => {
|
||||
// 取消所有正在进行的请求
|
||||
abortController.abort()
|
||||
|
||||
if (dashboardTimerId.value) {
|
||||
clearInterval(dashboardTimerId.value)
|
||||
dashboardTimerId.value = null
|
||||
@@ -356,7 +367,7 @@ const loadDashboardData = async (): Promise<void> => {
|
||||
|
||||
try {
|
||||
// 获取总体概览数据
|
||||
getTableList('generalTotal', query).then(generalTotal => {
|
||||
getTableList('generalTotal', query, false, { signal: abortController.signal }).then(generalTotal => {
|
||||
if (generalTotal.records && generalTotal.records.length > 0) {
|
||||
dashboardData.value.totalCount = generalTotal.records.reduce((sum, item) => sum + Number(item.totalCount || 0), 0)
|
||||
dashboardData.value.formalEmployeeCount = generalTotal.records.reduce((sum, item) => sum + Number(item.formalEmployeeCount || 0), 0)
|
||||
@@ -376,7 +387,7 @@ const loadDashboardData = async (): Promise<void> => {
|
||||
|
||||
try {
|
||||
// 获取各园区统计数据
|
||||
getTableList('parkscreen_user_info', query).then(parkscreen_user_info => {
|
||||
getTableList('parkscreen_user_info', query, false, { signal: abortController.signal }).then(parkscreen_user_info => {
|
||||
if (parkscreen_user_info.records && parkscreen_user_info.records.length > 0) {
|
||||
dashboardData.value.parkStatistics = parkscreen_user_info.records.map(el => {
|
||||
return {
|
||||
@@ -394,7 +405,7 @@ const loadDashboardData = async (): Promise<void> => {
|
||||
|
||||
try {
|
||||
// 获取风险预警数据
|
||||
getTableList('risk_alert_data', query).then(risk_alert_data => {
|
||||
getTableList('risk_alert_data', query, false, { signal: abortController.signal }).then(risk_alert_data => {
|
||||
if (risk_alert_data.records && risk_alert_data.records.length > 0) {
|
||||
dashboardData.value.alertData.total = risk_alert_data.records.reduce((sum, item) => sum + Number(item.total || 0), 0)
|
||||
dashboardData.value.alertData.processed = risk_alert_data.records.reduce((sum, item) => sum + Number(item.processed || 0), 0)
|
||||
@@ -410,7 +421,7 @@ const loadDashboardData = async (): Promise<void> => {
|
||||
|
||||
try {
|
||||
// 获取风险预警详情数据
|
||||
getTableList('risk_alert_detail', query).then(risk_alert_detail => {
|
||||
getTableList('risk_alert_detail', query, false, { signal: abortController.signal }).then(risk_alert_detail => {
|
||||
// if (risk_alert_detail.records && risk_alert_detail.records.length > 0) {
|
||||
dashboardData.value.alertData.details = risk_alert_detail.records || []
|
||||
// }
|
||||
@@ -423,7 +434,7 @@ const loadDashboardData = async (): Promise<void> => {
|
||||
|
||||
try {
|
||||
// 获取超期工单数据
|
||||
getTableList('timeout_work_order', query).then(timeout_work_order => {
|
||||
getTableList('timeout_work_order', query, false, { signal: abortController.signal }).then(timeout_work_order => {
|
||||
if (timeout_work_order.records && timeout_work_order.records.length >= 0) {
|
||||
dashboardData.value.timeoutWorkOrders.total = timeout_work_order.records.length
|
||||
dashboardData.value.timeoutWorkOrders.details = timeout_work_order.records
|
||||
@@ -434,7 +445,7 @@ const loadDashboardData = async (): Promise<void> => {
|
||||
} catch (error) {
|
||||
console.error('获取超期工单数据失败:', error)
|
||||
}
|
||||
handleRiskTabChange('安全类')
|
||||
handleRiskTabChange('安全类事项')
|
||||
handleHiddenDangerPannelData(query)
|
||||
console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
|
||||
}
|
||||
@@ -462,12 +473,12 @@ const handleHiddenDangerPannelData = (query) => {
|
||||
}
|
||||
try {
|
||||
// 获取隐患排查治理数据
|
||||
getTableList('risk_level_count', query).then(res => {
|
||||
getTableList('risk_level_count', query, false, { signal: abortController.signal }).then(res => {
|
||||
if (res.records && res.records.length > 0) {
|
||||
_data.general = _data.general + Number(res.records[0].general_count)
|
||||
_data.major = _data.major + Number(res.records[0].major_count)
|
||||
// 获取隐患排查治理数据
|
||||
getTableList('risk_status_count', query).then(res => {
|
||||
getTableList('risk_status_count', query, false, { signal: abortController.signal }).then(res => {
|
||||
if (res.records && res.records.length > 0) {
|
||||
// 接口返回的已经是百分比，直接使用
|
||||
const record = res.records[0]
|
||||
@@ -534,7 +545,7 @@ const handleHiddenDangerPannelData = (query) => {
|
||||
|
||||
|
||||
// 获取隐患排查治理数据
|
||||
getTableList('hidden_danger_investigation', query).then(res => {
|
||||
getTableList('hidden_danger_investigation', query, false, { signal: abortController.signal }).then(res => {
|
||||
if (res.records && res.records.length > 0) {
|
||||
_data2.general = Number(res.records[0].general)
|
||||
_data2.major = Number(res.records[0].major)
|
||||
@@ -542,7 +553,7 @@ const handleHiddenDangerPannelData = (query) => {
|
||||
// 安全指数另算，再起一个报表
|
||||
// dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
|
||||
// 在这里添加获取安全指数的逻辑
|
||||
getTableList('hidden_danger_safety_index', query).then(res => {
|
||||
getTableList('hidden_danger_safety_index', query, false, { signal: abortController.signal }).then(res => {
|
||||
if (res.records && res.records.length > 0) {
|
||||
dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
|
||||
}
|
||||
@@ -551,7 +562,7 @@ const handleHiddenDangerPannelData = (query) => {
|
||||
})
|
||||
|
||||
// 获取隐患排查治理处理进度数据
|
||||
getTableList('hidden_danger_process_progress', query).then(res => {
|
||||
getTableList('hidden_danger_process_progress', query, false, { signal: abortController.signal }).then(res => {
|
||||
// if (res.records && res.records.length > 0) {
|
||||
// _data2.flag = true
|
||||
// _data2.overdue = Number(res.records[0].overdue) / 100 * (_data2.general + _data2.major)
|
||||
@@ -605,7 +616,7 @@ const handleHiddenDangerPannelData = (query) => {
|
||||
|
||||
try {
|
||||
// 获取隐患排查治理TOP3类型数据
|
||||
getTableList('hidden_danger_top', query).then(res => {
|
||||
getTableList('hidden_danger_top', query, false, { signal: abortController.signal }).then(res => {
|
||||
if (res.records && res.records.length > 0) {
|
||||
dashboardData.value.hiddenDangerData.top3Types = res.records
|
||||
}
|
||||
@@ -624,10 +635,10 @@ const handleRiskTabChange = async (tab: TabType) => {
|
||||
try {
|
||||
let workOrderType = ''
|
||||
switch (tab) {
|
||||
case '安全类':
|
||||
case '安全类事项':
|
||||
workOrderType = '安全生产'
|
||||
break
|
||||
case '工程类':
|
||||
case '工程类事项':
|
||||
workOrderType = '物业服务-工程'
|
||||
break
|
||||
default:
|
||||
@@ -640,7 +651,7 @@ const handleRiskTabChange = async (tab: TabType) => {
|
||||
workOrderType,
|
||||
taskType: '维保任务',
|
||||
campus_id: query.campus_id
|
||||
}).catch(error => {
|
||||
}, { signal: abortController.signal }).catch(error => {
|
||||
console.error('获取维保任务数据失败:', error)
|
||||
return {records: []}
|
||||
}),
|
||||
@@ -648,7 +659,7 @@ const handleRiskTabChange = async (tab: TabType) => {
|
||||
workOrderType,
|
||||
taskType: '巡检任务',
|
||||
campus_id: query.campus_id
|
||||
}).catch(error => {
|
||||
}, { signal: abortController.signal }).catch(error => {
|
||||
console.error('获取巡检任务数据失败:', error)
|
||||
return {records: []}
|
||||
})
|
||||
@@ -728,6 +739,12 @@ const handleRiskTabChange = async (tab: TabType) => {
|
||||
} catch (error) {
|
||||
console.error('获取风险统计数据失败:', error)
|
||||
}
|
||||
|
||||
// 第一次加载完成后，隐藏骨架屏
|
||||
if (isFirstLoading.value) {
|
||||
isFirstLoading.value = false
|
||||
console.log('隐藏骨架屏')
|
||||
}
|
||||
}
|
||||
|
||||
// 方法定义
|
||||
@@ -740,11 +757,6 @@ const onRegionChange = (item: RegionItem): void => {
|
||||
})
|
||||
}
|
||||
|
||||
// 打开区域选择器
|
||||
const openRegionSelector = (): void => {
|
||||
regionSelectorVisible.value = true
|
||||
}
|
||||
|
||||
// 更新时间
|
||||
const updateTime = (): void => {
|
||||
const now = new Date()
|
||||
|
||||
@@ -73,24 +73,24 @@ export const exportExcelData = (reportCode, data?) => {
|
||||
}
|
||||
|
||||
//获取报表数据
|
||||
export const getTableList = (reportCode, data?, isOpen?) => {
|
||||
return request.post({ url: `/jeelowcode/${isOpen ? 'open/report' : 'report-data'}/list/${reportCode}`, data })
|
||||
export const getTableList = (reportCode, data?, isOpen?, options = {}) => {
|
||||
return request.post({ url: `/jeelowcode/${isOpen ? 'open/report' : 'report-data'}/list/${reportCode}`, data, ...options })
|
||||
}
|
||||
|
||||
export const getDangerDetail = (campus_id: string) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_danger_detail', data: {campus_id} })
|
||||
export const getDangerDetail = (campus_id: string, options = {}) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_danger_detail', data: {campus_id}, ...options })
|
||||
}
|
||||
|
||||
export const getZBDangerSum = (campus_id: string) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/dp_zb_danger_sum', data: {campus_id} })
|
||||
}
|
||||
|
||||
export const getDangerCount = (campus_id: string) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_danger_sum', data: {campus_id} })
|
||||
export const getDangerCount = (campus_id: string, options = {}) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_danger_sum', data: {campus_id}, ...options })
|
||||
}
|
||||
|
||||
export const getExamDetail = (campus_id: string) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_exam_detail', data: {campus_id} })
|
||||
export const getExamDetail = (campus_id: string, options = {}) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_exam_detail', data: {campus_id}, ...options })
|
||||
}
|
||||
|
||||
export const getExamSum = (campus_id: string) => {
|
||||
@@ -101,13 +101,13 @@ export const getDrillSum = (campus_id: string) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/dp_zb_drill_sum', data: {campus_id} })
|
||||
}
|
||||
|
||||
export const getDrillDetail = (campus_id: string) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_drill_detail', data: {campus_id} })
|
||||
export const getDrillDetail = (campus_id: string, options = {}) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_drill_detail', data: {campus_id}, ...options })
|
||||
}
|
||||
|
||||
//获取报表数据
|
||||
export const getTableData = (tableId, data?) => {
|
||||
return request.post({ url: `/jeelowcode/dbform-data/list/${tableId}`, data })
|
||||
export const getTableData = (tableId, data?, options = {}) => {
|
||||
return request.post({ url: `/jeelowcode/dbform-data/list/${tableId}`, data, ...options })
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -135,8 +135,8 @@ export const batchGetTableList = (reportCodes: string, data?) => {
|
||||
// 参数：workOrderType：'物业服务-工程'，taskType：'巡检任务'
|
||||
// 统计周期 cycle: day，month，year 对应月日年
|
||||
|
||||
export const getWorkOrderStatistics = (data: {workOrderType: string, taskType: string, campus_id?: string}) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/report_work_order_statistics', data: {...data, pageNo: 1, pageSize: 10} })
|
||||
export const getWorkOrderStatistics = (data: {workOrderType: string, taskType: string, campus_id?: string}, options = {}) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/report_work_order_statistics', data: {...data, pageNo: 1, pageSize: 10}, ...options })
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user