Compare commits
17 Commits
0f31b90814
...
dev
| Author | SHA1 | Date | |
|---|---|---|---|
| b106385d57 | |||
|
|
3159553a66 | ||
|
|
3a04af1e27 | ||
|
|
76de449c24 | ||
|
|
4301d64450 | ||
|
|
5f5fbe8891 | ||
|
|
ec7ef87340 | ||
| f9163eba6a | |||
| 3b265a5a5a | |||
| 87953743e2 | |||
| 7aac2e8d05 | |||
| 751794ad13 | |||
| 10611efc00 | |||
| 84aa28af3a | |||
|
|
5daba69ee5 | ||
|
|
e318f4519c | ||
|
|
0ec7c06775 |
@@ -16,7 +16,7 @@ const config: {
|
||||
/**
|
||||
* 接口请求超时时间
|
||||
*/
|
||||
request_timeout: 300000,
|
||||
request_timeout: 24 * 60 * 60 * 1000,
|
||||
|
||||
/**
|
||||
* 默认接口请求类型
|
||||
|
||||
@@ -159,6 +159,8 @@ service.interceptors.response.use(
|
||||
} else if (code === 500) {
|
||||
ElMessage.error(t('sys.api.errMsg500'))
|
||||
return Promise.reject(new Error(msg))
|
||||
} else if (code === 504) {
|
||||
return Promise.reject(new Error(msg))
|
||||
} else if (code === 901) {
|
||||
ElMessage.error({
|
||||
offset: 300,
|
||||
|
||||
@@ -77,11 +77,13 @@
|
||||
<div class="type-wrapper">
|
||||
<div class="type-item">
|
||||
<span class="type-btn yellow">重大</span>
|
||||
<span class="type-num cursor-pointer" @click="handleSeverityCountClick">{{ mockData.hiddenDangerData.severityCount }}</span>
|
||||
<span class="type-num cursor-pointer" @click="handleSeverityCountClick">{{
|
||||
mockData.hiddenDangerData.severityCount }}</span>
|
||||
</div>
|
||||
<div class="type-item">
|
||||
<span class="type-btn green">一般</span>
|
||||
<span class="type-num cursor-pointer" @click="handleGeneralCountClick">{{ mockData.hiddenDangerData.generalCount }}</span>
|
||||
<span class="type-num cursor-pointer" @click="handleGeneralCountClick">{{
|
||||
mockData.hiddenDangerData.generalCount }}</span>
|
||||
</div>
|
||||
<!-- <div class="type-item">
|
||||
<span class="type-btn blue">较大</span>
|
||||
@@ -104,7 +106,7 @@
|
||||
</div>
|
||||
<!-- 左下区域 -->
|
||||
<div class="left-bottom">
|
||||
<div class="panel-title">
|
||||
<!-- <div class="panel-title">
|
||||
<div class="tabs">
|
||||
<span class="tab" :class="{ active: activeTab === '高危作业' }" @click="handleTabClick('高危作业')">高危作业</span>
|
||||
<span class="divider">|</span>
|
||||
@@ -164,7 +166,9 @@
|
||||
<AlertList maxHeight="40vh" style="margin-left: 1vw;" :table-title="trainingTableTitle"
|
||||
:list-data="drillList" />
|
||||
</template>
|
||||
</div>
|
||||
</div> -->
|
||||
<RiskStatisticsPanel :riskStatistics="riskStatistics" :dangerDetail="dangerDetail" :park="parkValue"
|
||||
@tab-change="handleRiskTabChange" :campus_id="query.campus_id" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-wrapper">
|
||||
@@ -251,7 +255,8 @@ import ParkCenter from './components/ParkCenter.vue'
|
||||
import PointInfoPopup from './components/PointInfoPopup.vue'
|
||||
import WeatherWarning from './components/WeatherWarning.vue'
|
||||
import AlertList from './components/AlertList.vue'
|
||||
import { getTableList, getTableData, getDangerDetail, getDangerCount, getExamDetail, getDrillDetail } from './report'
|
||||
import { getTableList, getTableData, getDangerDetail, getDangerCount, getExamDetail, getDrillDetail, getWorkOrderStatistics } from './report'
|
||||
import RiskStatisticsPanel from './components/RiskStatisticsPanel.vue'
|
||||
|
||||
interface PointPosition {
|
||||
label: string
|
||||
@@ -286,10 +291,108 @@ const inProgressCount = ref<number>(0)
|
||||
const finishedCount = ref<number>(0)
|
||||
|
||||
const handleSeverityCountClick = () => {
|
||||
window.open('http://10.0.64.20/configcenter/console/device-manage', '_blank')
|
||||
window.open('http://10.0.64.20/pms/workorder-list', '_blank')
|
||||
}
|
||||
const handleGeneralCountClick = () => {
|
||||
window.open('http://10.0.64.20/configcenter/console/device-manage', '_blank')
|
||||
window.open('http://10.0.64.20/pms/workorder-list', '_blank')
|
||||
}
|
||||
|
||||
const riskStatistics = ref<any>({
|
||||
'安全类': [],
|
||||
'工程类': []
|
||||
})
|
||||
const dangerDetail = ref<any>({
|
||||
'安全类': [],
|
||||
'工程类': []
|
||||
})
|
||||
const parkValue = ref<string>('')
|
||||
|
||||
type TabType = '安全类' | '工程类'
|
||||
|
||||
|
||||
const handleRiskTabChange = async (tab: TabType) => {
|
||||
console.log('Tab changed to:', tab)
|
||||
|
||||
try {
|
||||
let workOrderType = ''
|
||||
switch (tab) {
|
||||
case '安全类':
|
||||
workOrderType = '安全生产'
|
||||
break
|
||||
case '工程类':
|
||||
workOrderType = '物业服务-工程'
|
||||
break
|
||||
default:
|
||||
workOrderType = '安全生产'
|
||||
}
|
||||
|
||||
// 同时获取维保任务和巡检任务的数据
|
||||
const [maintenanceResponse, inspectionResponse] = await Promise.all([
|
||||
getWorkOrderStatistics({ workOrderType, taskType: '维保任务', campus_id: query.campus_id }).catch(error => {
|
||||
console.error('获取维保任务数据失败:', error)
|
||||
return { records: [] }
|
||||
}),
|
||||
getWorkOrderStatistics({ workOrderType, taskType: '巡检任务', campus_id: query.campus_id }).catch(error => {
|
||||
console.error('获取巡检任务数据失败:', error)
|
||||
return { records: [] }
|
||||
})
|
||||
])
|
||||
|
||||
// 周期映射
|
||||
const cycleMap: Record<string, string> = {
|
||||
'day': '每日',
|
||||
'month': '每月',
|
||||
'year': '每年'
|
||||
}
|
||||
|
||||
// 将API数据转换为图表数据格式
|
||||
const convertToChartData = (records: any[], taskTypeName: string): any[] => {
|
||||
const charts: any[] = []
|
||||
|
||||
// 按周期分组
|
||||
const cycleGroups: Record<string, any> = {}
|
||||
records.forEach((record: any) => {
|
||||
const cycle = record.cycle || 'day'
|
||||
if (!cycleGroups[cycle]) {
|
||||
cycleGroups[cycle] = record
|
||||
}
|
||||
})
|
||||
|
||||
// 创建6个图表(3个周期 x 2个任务类型,但这里只处理一种任务类型)
|
||||
const cycles = ['day', 'month', 'year']
|
||||
cycles.forEach((cycle) => {
|
||||
const data = cycleGroups[cycle] || {}
|
||||
const title = `${cycleMap[cycle]}检查(${taskTypeName})`
|
||||
|
||||
charts.push({
|
||||
title,
|
||||
total: Number(data.total) || 0,
|
||||
status: {
|
||||
notStarted: Number(data.pending) || 0,
|
||||
inProgress: Number(data.processing) || 0,
|
||||
done: Number(data.processed) || 0,
|
||||
voided: Number(data.closed) || 0
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
return charts
|
||||
}
|
||||
|
||||
// 转换维保和巡检数据
|
||||
const maintenanceCharts = convertToChartData(maintenanceResponse.records || [], '维保类')
|
||||
const inspectionCharts = convertToChartData(inspectionResponse.records || [], '巡检类')
|
||||
|
||||
// 合并为6个图表:先维保(3个),后巡检(3个)
|
||||
const allCharts = [...maintenanceCharts, ...inspectionCharts]
|
||||
|
||||
// 更新riskStatistics
|
||||
riskStatistics.value[tab] = allCharts
|
||||
|
||||
console.log('更新后的riskStatistics:', riskStatistics.value)
|
||||
} catch (error) {
|
||||
console.error('获取风险统计数据失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const tableTitle = [
|
||||
@@ -587,6 +690,8 @@ onMounted(async () => {
|
||||
query.campus_id = route.query.parkCode as string
|
||||
}
|
||||
|
||||
handleRiskTabChange('安全类')
|
||||
|
||||
try {
|
||||
let { records } = await getTableList(
|
||||
'park_info_list'
|
||||
@@ -875,12 +980,17 @@ const handleHiddenDangerPannelData = (query) => {
|
||||
// 获取隐患排查治理数据
|
||||
getTableList('risk_status_count', query).then(res => {
|
||||
if (res.records && res.records.length > 0) {
|
||||
_data.overdue = _data.overdue + Number(res.records[0].overdueCnt)
|
||||
_data.processed = _data.processed + Number(res.records[0].processedCnt)
|
||||
_data.processing = _data.processing + Number(res.records[0].processingCnt)
|
||||
_data.pending = _data.pending
|
||||
// 接口返回的已经是百分比,直接使用
|
||||
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);
|
||||
@@ -889,18 +999,31 @@ const handleHiddenDangerPannelData = (query) => {
|
||||
mockData.hiddenDangerData.generalCount = generalCnt
|
||||
mockData.hiddenDangerData.severityCount = 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
|
||||
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)
|
||||
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'
|
||||
}
|
||||
|
||||
progressOption.series[0].data = [
|
||||
{ value: overdueCnt || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
|
||||
{ value: processedCnt || 0, name: '已处理', itemStyle: { color: '#10b981' } },
|
||||
{ value: pendingCnt || 0, name: '待排查', itemStyle: { color: '#eab308' } },
|
||||
{ value: processingCnt || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
|
||||
{ value: Number(overdueCnt) || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
|
||||
{ value: Number(processedCnt) || 0, name: '已处理', itemStyle: { color: '#10b981' } },
|
||||
{ value: Number(pendingCnt) || 0, name: '待排查', itemStyle: { color: '#eab308' } },
|
||||
{ value: Number(processingCnt) || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
|
||||
]
|
||||
console.log('合并后的图表数据:', progressOption.series[0].data)
|
||||
if (progressChart.value != null) {
|
||||
progressChart.value.setOption(progressOption)
|
||||
}
|
||||
@@ -909,17 +1032,14 @@ const handleHiddenDangerPannelData = (query) => {
|
||||
mockData.hiddenDangerData.generalCount = _data.general
|
||||
mockData.hiddenDangerData.severityCount = _data.major
|
||||
|
||||
let totalCnt = _data.general + _data.major
|
||||
let overdueCnt = (_data.overdue / totalCnt * 100).toFixed(2)
|
||||
let processedCnt = (_data.processed / totalCnt * 100).toFixed(2)
|
||||
let processingCnt = (_data.processing / totalCnt * 100).toFixed(2)
|
||||
let pendingCnt = (_data.pending / totalCnt * 100).toFixed(2)
|
||||
// 接口返回的已经是百分比,直接使用
|
||||
progressOption.series[0].data = [
|
||||
{ value: overdueCnt || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
|
||||
{ value: processedCnt || 0, name: '已处理', itemStyle: { color: '#10b981' } },
|
||||
{ value: pendingCnt || 0, name: '待排查', itemStyle: { color: '#eab308' } },
|
||||
{ value: processingCnt || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
|
||||
{ value: _data.overdue || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
|
||||
{ value: _data.processed || 0, name: '已处理', itemStyle: { color: '#10b981' } },
|
||||
{ value: _data.pending || 0, name: '待排查', itemStyle: { color: '#eab308' } },
|
||||
{ value: _data.processing || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
|
||||
]
|
||||
console.log('系统数据图表数据:', progressOption.series[0].data)
|
||||
if (progressChart.value != null) {
|
||||
progressChart.value.setOption(progressOption)
|
||||
}
|
||||
@@ -939,56 +1059,56 @@ const handleHiddenDangerPannelData = (query) => {
|
||||
|
||||
// 获取隐患排查治理处理进度数据
|
||||
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 (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
|
||||
mockData.hiddenDangerData.generalCount = generalCnt
|
||||
mockData.hiddenDangerData.severityCount = majorCnt
|
||||
// if (_data.flag) {
|
||||
// console.log("请求第三方和系统成功,合并数据", _data, _data2);
|
||||
// // 合并数据
|
||||
// let generalCnt = _data.general + _data2.general
|
||||
// let majorCnt = _data.major + _data2.major
|
||||
// mockData.hiddenDangerData.generalCount = generalCnt
|
||||
// mockData.hiddenDangerData.severityCount = 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)
|
||||
progressOption.series[0].data = [
|
||||
{ value: overdueCnt || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
|
||||
{ value: processedCnt || 0, name: '已处理', itemStyle: { color: '#10b981' } },
|
||||
{ value: pendingCnt || 0, name: '待排查', itemStyle: { color: '#eab308' } },
|
||||
{ value: processingCnt || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
|
||||
]
|
||||
if (progressChart.value != null) {
|
||||
progressChart.value.setOption(progressOption)
|
||||
}
|
||||
} else {
|
||||
//显示三方数据
|
||||
console.log("请求第三方成功,展示数据", _data, _data2);
|
||||
mockData.hiddenDangerData.generalCount = _data2.general
|
||||
mockData.hiddenDangerData.severityCount = _data2.major
|
||||
// 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)
|
||||
// progressOption.series[0].data = [
|
||||
// { value: overdueCnt || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
|
||||
// { value: processedCnt || 0, name: '已处理', itemStyle: { color: '#10b981' } },
|
||||
// { value: pendingCnt || 0, name: '待排查', itemStyle: { color: '#eab308' } },
|
||||
// { value: processingCnt || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
|
||||
// ]
|
||||
// if (progressChart.value != null) {
|
||||
// progressChart.value.setOption(progressOption)
|
||||
// }
|
||||
// } else {
|
||||
// //显示三方数据
|
||||
// console.log("请求第三方成功,展示数据", _data, _data2);
|
||||
// mockData.hiddenDangerData.generalCount = _data2.general
|
||||
// mockData.hiddenDangerData.severityCount = _data2.major
|
||||
|
||||
let overdueCnt = res.records[0].overdue
|
||||
let processedCnt = res.records[0].processed
|
||||
let processingCnt = res.records[0].processing
|
||||
let pendingCnt = res.records[0].pending
|
||||
progressOption.series[0].data = [
|
||||
{ value: overdueCnt || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
|
||||
{ value: processedCnt || 0, name: '已处理', itemStyle: { color: '#10b981' } },
|
||||
{ value: pendingCnt || 0, name: '待排查', itemStyle: { color: '#eab308' } },
|
||||
{ value: processingCnt || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
|
||||
]
|
||||
if (progressChart.value != null) {
|
||||
progressChart.value.setOption(progressOption)
|
||||
}
|
||||
}
|
||||
}
|
||||
// let overdueCnt = res.records[0].overdue
|
||||
// let processedCnt = res.records[0].processed
|
||||
// let processingCnt = res.records[0].processing
|
||||
// let pendingCnt = res.records[0].pending
|
||||
// progressOption.series[0].data = [
|
||||
// { value: overdueCnt || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
|
||||
// { value: processedCnt || 0, name: '已处理', itemStyle: { color: '#10b981' } },
|
||||
// { value: pendingCnt || 0, name: '待排查', itemStyle: { color: '#eab308' } },
|
||||
// { value: processingCnt || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
|
||||
// ]
|
||||
// if (progressChart.value != null) {
|
||||
// progressChart.value.setOption(progressOption)
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}).catch(error => {
|
||||
console.error('获取隐患排查治理处理进度数据失败:', error)
|
||||
})
|
||||
@@ -1201,6 +1321,7 @@ onUnmounted(() => {
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 响应式设计 - 自动适应不同屏幕尺寸 */
|
||||
@media (width <=1200px) {
|
||||
.dashboard-container {
|
||||
|
||||
@@ -73,7 +73,7 @@ let scrollTimer: NodeJS.Timeout | null = null
|
||||
let isScrolling = false
|
||||
|
||||
const handleItemClick = (item: AlertItem) => {
|
||||
window.open(`http://10.0.64.20/configcenter/console/device-manage`, '_blank')
|
||||
window.open(`http://10.0.64.20/pms/workorder-list`, '_blank')
|
||||
}
|
||||
|
||||
// 自动滚动功能
|
||||
|
||||
@@ -96,6 +96,12 @@ const props = defineProps<Props>()
|
||||
|
||||
// 图表引用
|
||||
const progressChartOption = ref<any>({
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c}% ({d}%)'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie' as const,
|
||||
@@ -106,6 +112,7 @@ const progressChartOption = ref<any>({
|
||||
bottom: 0,
|
||||
data: [],
|
||||
label: {
|
||||
show: true,
|
||||
alignTo: 'edge' as const,
|
||||
formatter: '{time|{c} %}\n',
|
||||
minMargin: 5,
|
||||
@@ -119,6 +126,7 @@ const progressChartOption = ref<any>({
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 5,
|
||||
length2: 0,
|
||||
maxSurfaceAngle: 10
|
||||
@@ -190,12 +198,19 @@ const top3TypesChartOption = ref<any>({
|
||||
})
|
||||
|
||||
const handleMajorClick = () => {
|
||||
window.open('http://10.0.64.20/configcenter/console/device-manage', '_blank')
|
||||
window.open('http://10.0.64.20/pms/workorder-list', '_blank')
|
||||
}
|
||||
|
||||
watch(() => props.hiddenDangerData?.progress, (newVal) => {
|
||||
watch(() => props.hiddenDangerData?.progress, (newVal, oldVal) => {
|
||||
console.log('HiddenDangerPanel watch 触发,progress 数据:', newVal, '旧数据:', oldVal)
|
||||
// 确保每次数据变化都更新图表
|
||||
if (newVal) {
|
||||
refreshProcessCharts(newVal)
|
||||
}, { deep: true })
|
||||
} else {
|
||||
// 即使数据为空,也要显示空图表
|
||||
refreshProcessCharts(null)
|
||||
}
|
||||
}, { deep: true, immediate: true })
|
||||
|
||||
// 辅助函数:安全地将值转换为数字,处理 NaN 和字符串 "NaN" 的情况
|
||||
const safeNumber = (val: any): number => {
|
||||
@@ -208,19 +223,90 @@ const safeNumber = (val: any): number => {
|
||||
|
||||
// 更新图表数据
|
||||
const refreshProcessCharts = (process): void => {
|
||||
if (!props.hiddenDangerData?.progress) {
|
||||
if (!process) {
|
||||
console.warn('process is undefined or null')
|
||||
return
|
||||
}
|
||||
// 即使没有数据,也要显示空图表,确保图表容器始终存在
|
||||
const option = { ...progressChartOption.value }
|
||||
// 确保所有 value 都是有效的数字,将字符串 "NaN" 或真正的 NaN 转换为 0
|
||||
option.series[0].data = [
|
||||
{ value: safeNumber(process.overdue), name: '已逾期', itemStyle: { color: '#ef4444' } },
|
||||
{ value: safeNumber(process.processed), name: '已处理', itemStyle: { color: '#10b981' } },
|
||||
// { value: safeNumber(process.pending), name: '待排查', itemStyle: { color: '#eab308' } },
|
||||
{ value: safeNumber(process.processing), name: '处理中', itemStyle: { color: '#3b82f6' } }
|
||||
{ value: 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
|
||||
{ value: 0, name: '已处理', itemStyle: { color: '#10b981' } },
|
||||
{ value: 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
|
||||
]
|
||||
progressChartOption.value = option
|
||||
return
|
||||
}
|
||||
|
||||
const overdue = safeNumber(process.overdue)
|
||||
const processed = safeNumber(process.processed)
|
||||
const processing = safeNumber(process.processing)
|
||||
|
||||
console.log('refreshProcessCharts 数据:', { overdue, processed, processing })
|
||||
|
||||
// 创建新的配置对象,确保 Vue 能检测到变化
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c}% ({d}%)'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie' as const,
|
||||
radius: '55%',
|
||||
center: ['50%', '50%'],
|
||||
left: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
data: [
|
||||
{ value: overdue, name: '已逾期', itemStyle: { color: '#ef4444' } },
|
||||
{ value: processed, name: '已处理', itemStyle: { color: '#10b981' } },
|
||||
{ value: processing, name: '处理中', itemStyle: { color: '#3b82f6' } }
|
||||
],
|
||||
label: {
|
||||
show: true,
|
||||
alignTo: 'edge' as const,
|
||||
formatter: '{time|{c} %}\n',
|
||||
minMargin: 5,
|
||||
edgeDistance: 10,
|
||||
lineHeight: 15,
|
||||
rich: {
|
||||
time: {
|
||||
fontSize: 10,
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 5,
|
||||
length2: 0,
|
||||
maxSurfaceAngle: 10
|
||||
},
|
||||
labelLayout: function (params: any) {
|
||||
const isLeft = params.labelRect.x < (params.labelRect.width ? params.labelRect.width : 200) / 2;
|
||||
const points = params.labelLinePoints;
|
||||
|
||||
// 添加安全检查
|
||||
if (points && points.length >= 3 && points[2]) {
|
||||
points[2][0] = isLeft
|
||||
? params.labelRect.x
|
||||
: params.labelRect.x + params.labelRect.width;
|
||||
}
|
||||
|
||||
return {
|
||||
labelLinePoints: points
|
||||
};
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
console.log('更新后的图表数据:', option.series[0].data)
|
||||
// 更新图表配置
|
||||
progressChartOption.value = option
|
||||
// 更新 key 以强制重新渲染(可选,通常不需要)
|
||||
// chartKey.value = Date.now()
|
||||
}
|
||||
|
||||
|
||||
@@ -250,7 +336,11 @@ const refreshTop3TypesCharts = (top3Types): void => {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
// 组件挂载时,如果已有数据,立即更新图表
|
||||
if (props.hiddenDangerData?.progress) {
|
||||
console.log('onMounted: 初始化图表数据', props.hiddenDangerData.progress)
|
||||
refreshProcessCharts(props.hiddenDangerData.progress)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -417,7 +507,7 @@ p:before{content:'?'; color:yellow; font-weight: bold;}
|
||||
display: flex;
|
||||
width: 77%;
|
||||
height: 77%;
|
||||
overflow: hidden;
|
||||
// overflow: hidden;
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<img class="title-line" src="@/assets/images/title_border_line.png" />
|
||||
|
||||
<div class="chart-grid">
|
||||
<div class="chart-card" v-for="item in currentCharts" :key="item.title">
|
||||
<div class="chart-card" v-for="item in currentCharts" :key="`${activeTab}-${item.title}`">
|
||||
<div class="chart-title">{{ item.title }}</div>
|
||||
<div class="chart-content">
|
||||
<div class="chart-wrapper">
|
||||
@@ -22,7 +22,7 @@
|
||||
</div>
|
||||
<div class="legend">
|
||||
<div class="legend-label-row">
|
||||
<ElTooltip v-for="status in statusList" :key="status.key" :content="status.label" effect="dark" placement="right">
|
||||
<div v-for="status in statusList" :key="status.key" :content="status.label" effect="dark" placement="right">
|
||||
<div class="legend-item">
|
||||
<span class="legend-dot" :style="{ background: status.color }"></span>
|
||||
<span class="legend-label">{{ status.label }}</span>
|
||||
@@ -30,13 +30,13 @@
|
||||
{{ item.status[status.key] }}
|
||||
</div>
|
||||
</div>
|
||||
</ElTooltip>
|
||||
</div>
|
||||
<div class="legend-value-row">
|
||||
</div>
|
||||
<!-- <div class="legend-value-row">
|
||||
<div class="legend-value" v-for="status in statusList" :key="`${status.key}-value`">
|
||||
{{ item.status[status.key] }}
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -104,7 +104,7 @@ const buildOption = (item: ChartItem): EChartsOption => ({
|
||||
series: [
|
||||
{
|
||||
type: 'pie' as const,
|
||||
radius: ['40%', '60%'],
|
||||
radius: ['70%', '90%'],
|
||||
center: ['50%', '50%'],
|
||||
startAngle: 90,
|
||||
avoidLabelOverlap: false,
|
||||
@@ -182,7 +182,7 @@ const handleTabClick = (tab: TabType) => {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
padding: 0 12px 12px;
|
||||
width: 66%;
|
||||
width: 70%;
|
||||
// margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -190,7 +190,7 @@ const handleTabClick = (tab: TabType) => {
|
||||
background: rgba(18, 34, 63, 0.65);
|
||||
border: 1px solid rgba(58, 112, 179, 0.55);
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
padding: 5px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -215,9 +215,6 @@ const handleTabClick = (tab: TabType) => {
|
||||
|
||||
.chart-wrapper {
|
||||
position: relative;
|
||||
flex: 0 0 90px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.donut-chart {
|
||||
@@ -239,26 +236,28 @@ const handleTabClick = (tab: TabType) => {
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-top: 0;
|
||||
width: auto;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// gap: 6px;
|
||||
// margin-top: 0;
|
||||
// width: auto;
|
||||
// justify-content: space-between;
|
||||
}
|
||||
|
||||
.legend-label-row {
|
||||
flex-wrap: nowrap;
|
||||
gap: 10px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
color: #cbd5e1;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -289,33 +288,71 @@ const handleTabClick = (tab: TabType) => {
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <=1280px) {
|
||||
.left-bottom .legend-label-row {
|
||||
gap: 8px;
|
||||
/* 简化版尺寸适配:只控制字体大小和图表尺寸 */
|
||||
@media (width <= 1680px) {
|
||||
.left-bottom {
|
||||
.panel-title {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.left-bottom .legend-label {
|
||||
display: none;
|
||||
.tab {
|
||||
padding: 2px 8px;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.left-bottom .legend-item {
|
||||
gap: 4px;
|
||||
.chart-title {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.left-bottom .chart-wrapper {
|
||||
flex-basis: 80px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
.legend-label-row {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <=3000px) {
|
||||
.left-bottom .legend-label {
|
||||
display: none;
|
||||
@media (width <= 1400px) {
|
||||
.left-bottom {
|
||||
.panel-title {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 1px 6px;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.legend-label-row {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >3000px) {
|
||||
@media (width <= 1200px) {
|
||||
.left-bottom {
|
||||
.panel-title {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 1px 4px;
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.legend-label-row {
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// @media (width >3000px) {
|
||||
.left-bottom .chart-content {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -323,7 +360,7 @@ const handleTabClick = (tab: TabType) => {
|
||||
}
|
||||
|
||||
.left-bottom .legend {
|
||||
align-items: center;
|
||||
// align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -331,18 +368,10 @@ const handleTabClick = (tab: TabType) => {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.left-bottom .legend-label-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.left-bottom .legend-item {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -350,35 +379,35 @@ const handleTabClick = (tab: TabType) => {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.left-bottom .legend-value-row {
|
||||
display: none;
|
||||
}
|
||||
// .left-bottom .legend-value-row {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
.left-bottom .chart-wrapper {
|
||||
flex-basis: 110px;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
}
|
||||
flex-basis: 60px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
// }
|
||||
|
||||
@media (width <=1024px) {
|
||||
.left-bottom .chart-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
// @media (width <=1024px) {
|
||||
// .left-bottom .chart-grid {
|
||||
// grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
// }
|
||||
|
||||
.left-bottom .donut-chart {
|
||||
height: 80px !important;
|
||||
}
|
||||
}
|
||||
// .left-bottom .donut-chart {
|
||||
// height: 80px !important;
|
||||
// }
|
||||
// }
|
||||
|
||||
@media (width <=768px) {
|
||||
.left-bottom .chart-grid {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
// @media (width <=768px) {
|
||||
// .left-bottom .chart-grid {
|
||||
// grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
// }
|
||||
|
||||
.left-bottom .chart-card {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
// .left-bottom .chart-card {
|
||||
// padding: 5px;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
|
||||
|
||||
@@ -431,12 +431,17 @@ const handleHiddenDangerPannelData = (query) => {
|
||||
// 获取隐患排查治理数据
|
||||
getTableList('risk_status_count', query).then(res => {
|
||||
if (res.records && res.records.length > 0) {
|
||||
_data.overdue = _data.overdue + Number(res.records[0].overdueCnt)
|
||||
_data.processed = _data.processed + Number(res.records[0].processedCnt)
|
||||
_data.processing = _data.processing + Number(res.records[0].processingCnt)
|
||||
_data.pending = _data.pending
|
||||
// 接口返回的已经是百分比,直接使用
|
||||
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);
|
||||
@@ -445,30 +450,44 @@ const handleHiddenDangerPannelData = (query) => {
|
||||
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
|
||||
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)
|
||||
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
|
||||
|
||||
let totalCnt = _data.general + _data.major
|
||||
// 显示系统数据
|
||||
// 接口返回的已经是百分比,直接使用
|
||||
dashboardData.value.hiddenDangerData.progress = {
|
||||
overdue: (_data.overdue / totalCnt * 100).toFixed(2),
|
||||
processed: (_data.processed / totalCnt * 100).toFixed(2),
|
||||
processing: (_data.processing / totalCnt * 100).toFixed(2),
|
||||
pending: (_data.pending / totalCnt * 100).toFixed(2),
|
||||
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)
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -495,46 +514,46 @@ const handleHiddenDangerPannelData = (query) => {
|
||||
|
||||
// 获取隐患排查治理处理进度数据
|
||||
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 (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
|
||||
// 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
|
||||
// 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,
|
||||
}
|
||||
}
|
||||
}
|
||||
// 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)
|
||||
})
|
||||
@@ -578,11 +597,11 @@ const handleRiskTabChange = async (tab: TabType) => {
|
||||
|
||||
// 同时获取维保任务和巡检任务的数据
|
||||
const [maintenanceResponse, inspectionResponse] = await Promise.all([
|
||||
getWorkOrderStatistics(workOrderType, '维保任务').catch(error => {
|
||||
getWorkOrderStatistics({workOrderType, taskType: '维保任务',campus_id: query.campus_id}).catch(error => {
|
||||
console.error('获取维保任务数据失败:', error)
|
||||
return { records: [] }
|
||||
}),
|
||||
getWorkOrderStatistics(workOrderType, '巡检任务').catch(error => {
|
||||
getWorkOrderStatistics({workOrderType, taskType: '巡检任务',campus_id: query.campus_id}).catch(error => {
|
||||
console.error('获取巡检任务数据失败:', error)
|
||||
return { records: [] }
|
||||
})
|
||||
|
||||
@@ -49,7 +49,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {getTableList, getTableData} from './report'
|
||||
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'
|
||||
@@ -73,7 +73,7 @@ interface RegionItem {
|
||||
code: string
|
||||
}
|
||||
|
||||
type TabType = '危险作业' | '安全考核' | '安全、保密培训'
|
||||
type TabType = '安全类' | '工程类'
|
||||
|
||||
// 响应式数据
|
||||
const currentDateTime = ref<string>('')
|
||||
@@ -95,7 +95,10 @@ const visitorCount = ref<number>(0)
|
||||
// 总体概览-各园区统计
|
||||
const parkStatistics = ref<any>()
|
||||
// 危险作业/安全考核/安全、保密培训
|
||||
const riskStatistics = ref<any>()
|
||||
const riskStatistics = ref<Record<TabType, any[]>>({
|
||||
安全类: [],
|
||||
工程类: []
|
||||
})
|
||||
const dangerDetail = ref<any>()
|
||||
// 动画相关的状态
|
||||
const isAnimating = ref<boolean>(false)
|
||||
@@ -397,7 +400,7 @@ const loadDashboardData = async (): Promise<void> => {
|
||||
} catch (error) {
|
||||
console.error('获取超期工单数据失败:', error)
|
||||
}
|
||||
handleRiskTabChange('危险作业')
|
||||
handleRiskTabChange('安全类')
|
||||
handleHiddenDangerPannelData(query)
|
||||
console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
|
||||
}
|
||||
@@ -437,12 +440,17 @@ const handleHiddenDangerPannelData = (query) => {
|
||||
// 获取隐患排查治理数据
|
||||
getTableList('risk_status_count', query).then(res => {
|
||||
if (res.records && res.records.length > 0) {
|
||||
_data.overdue = _data.overdue + Number(res.records[0].overdueCnt)
|
||||
_data.processed = _data.processed + Number(res.records[0].processedCnt)
|
||||
_data.processing = _data.processing + Number(res.records[0].processingCnt)
|
||||
_data.pending = _data.pending
|
||||
// 接口返回的已经是百分比,直接使用
|
||||
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);
|
||||
@@ -451,30 +459,44 @@ const handleHiddenDangerPannelData = (query) => {
|
||||
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
|
||||
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)
|
||||
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
|
||||
|
||||
let totalCnt = _data.general + _data.major
|
||||
// 显示系统数据
|
||||
// 接口返回的已经是百分比,直接使用
|
||||
dashboardData.value.hiddenDangerData.progress = {
|
||||
overdue: (_data.overdue / totalCnt * 100).toFixed(2),
|
||||
processed: (_data.processed / totalCnt * 100).toFixed(2),
|
||||
processing: (_data.processing / totalCnt * 100).toFixed(2),
|
||||
pending: (_data.pending / totalCnt * 100).toFixed(2),
|
||||
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)
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -501,46 +523,46 @@ const handleHiddenDangerPannelData = (query) => {
|
||||
|
||||
// 获取隐患排查治理处理进度数据
|
||||
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 (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
|
||||
// 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
|
||||
// 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,
|
||||
}
|
||||
}
|
||||
}
|
||||
// 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)
|
||||
})
|
||||
@@ -569,93 +591,103 @@ const handleHiddenDangerPannelData = (query) => {
|
||||
// 处理风险统计tab切换
|
||||
const handleRiskTabChange = async (tab: TabType) => {
|
||||
console.log('Tab changed to:', tab)
|
||||
|
||||
try {
|
||||
let code = ''
|
||||
let workOrderType = ''
|
||||
switch (tab) {
|
||||
case '危险作业':
|
||||
code = 'hazardous_operations'
|
||||
case '安全类':
|
||||
workOrderType = '安全生产'
|
||||
break
|
||||
case '安全考核':
|
||||
code = 'safety_assessment'
|
||||
break
|
||||
case '安全、保密培训':
|
||||
code = 'security_training'
|
||||
case '工程类':
|
||||
workOrderType = '物业服务-工程'
|
||||
break
|
||||
default:
|
||||
code = 'hazardous_operations'
|
||||
workOrderType = '安全生产'
|
||||
}
|
||||
if (code == 'hazardous_operations') {
|
||||
// 根据不同的tab请求不同的接口
|
||||
getTableList(
|
||||
code,
|
||||
{...query, activeTab: tab}
|
||||
).then(response => {
|
||||
// 更新风险统计数据 - 传递完整的数组数据用于饼图显示
|
||||
if (response.records && response.records.length > 0) {
|
||||
dangerDetail.value = response.records
|
||||
|
||||
// 同时获取维保任务和巡检任务的数据
|
||||
const [maintenanceResponse, inspectionResponse] = await Promise.all([
|
||||
getWorkOrderStatistics({workOrderType, taskType: '维保任务', campus_id: query.campus_id}).catch(error => {
|
||||
console.error('获取维保任务数据失败:', error)
|
||||
return { records: [] }
|
||||
}),
|
||||
getWorkOrderStatistics({workOrderType, taskType: '巡检任务', campus_id: query.campus_id}).catch(error => {
|
||||
console.error('获取巡检任务数据失败:', error)
|
||||
return { records: [] }
|
||||
})
|
||||
])
|
||||
|
||||
// 处理接口返回的数据结构:可能是数组或对象
|
||||
const getRecords = (response: any): any[] => {
|
||||
if (Array.isArray(response)) {
|
||||
return response
|
||||
} else if (response && Array.isArray(response.records)) {
|
||||
return response.records
|
||||
} else if (response && response.data && Array.isArray(response.data)) {
|
||||
return response.data
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取风险统计数据失败:', error)
|
||||
if (isFirstLoad.value) {
|
||||
// dangerDetail.value = [
|
||||
// {
|
||||
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
|
||||
// alarm_level_code: 'general',
|
||||
// alarm_status: '已关闭',
|
||||
// alarm_biz_id: '20250827164305283937'
|
||||
// },
|
||||
// {
|
||||
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
|
||||
// alarm_level_code: 'general',
|
||||
// alarm_status: '已关闭',
|
||||
// alarm_biz_id: '20250827164305283937'
|
||||
// }, {
|
||||
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
|
||||
// alarm_level_code: 'general',
|
||||
// alarm_status: '已关闭',
|
||||
// alarm_biz_id: '20250827164305283937'
|
||||
// }, {
|
||||
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
|
||||
// alarm_level_code: 'general',
|
||||
// alarm_status: '已关闭',
|
||||
// alarm_biz_id: '20250827164305283937'
|
||||
// }, {
|
||||
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
|
||||
// alarm_level_code: 'general',
|
||||
// alarm_status: '已关闭',
|
||||
// alarm_biz_id: '20250827164305283937'
|
||||
// }, {
|
||||
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
|
||||
// alarm_level_code: 'general',
|
||||
// alarm_status: '已关闭',
|
||||
// alarm_biz_id: '20250827164305283937'
|
||||
// }
|
||||
// ]
|
||||
return []
|
||||
}
|
||||
|
||||
const maintenanceRecords = getRecords(maintenanceResponse)
|
||||
const inspectionRecords = getRecords(inspectionResponse)
|
||||
|
||||
console.log('维保任务数据:', maintenanceResponse, '提取的records:', maintenanceRecords)
|
||||
console.log('巡检任务数据:', inspectionResponse, '提取的records:', inspectionRecords)
|
||||
|
||||
// 周期映射
|
||||
const cycleMap: Record<string, string> = {
|
||||
'day': '每日',
|
||||
'month': '每月',
|
||||
'year': '每年'
|
||||
}
|
||||
|
||||
// 将API数据转换为图表数据格式
|
||||
const convertToChartData = (records: any[], taskTypeName: string): any[] => {
|
||||
const charts: any[] = []
|
||||
|
||||
// 按周期分组
|
||||
const cycleGroups: Record<string, any> = {}
|
||||
records.forEach((record: any) => {
|
||||
const cycle = record.cycle || 'day'
|
||||
if (!cycleGroups[cycle]) {
|
||||
cycleGroups[cycle] = record
|
||||
}
|
||||
})
|
||||
} else {
|
||||
// 根据不同的tab请求不同的接口
|
||||
getTableList(
|
||||
code,
|
||||
{...query, activeTab: tab}
|
||||
).then(response => {
|
||||
// 更新风险统计数据 - 传递完整的数组数据用于饼图显示
|
||||
if (response.records && response.records.length > 0) {
|
||||
riskStatistics.value = response.records
|
||||
} else {
|
||||
// 如果没有数据,设置默认值
|
||||
riskStatistics.value = [
|
||||
{
|
||||
csmpus_name: "雄安新区总部",
|
||||
finishCount: "0",
|
||||
participateCount: "0"
|
||||
|
||||
// 创建6个图表(3个周期 x 2个任务类型,但这里只处理一种任务类型)
|
||||
const cycles = ['day', 'month', 'year']
|
||||
cycles.forEach((cycle) => {
|
||||
const data = cycleGroups[cycle] || {}
|
||||
const title = `${cycleMap[cycle]}检查(${taskTypeName})`
|
||||
|
||||
charts.push({
|
||||
title,
|
||||
total: Number(data.total) || 0,
|
||||
status: {
|
||||
notStarted: Number(data.pending) || 0,
|
||||
inProgress: Number(data.processing) || 0,
|
||||
done: Number(data.processed) || 0,
|
||||
voided: Number(data.closed) || 0
|
||||
}
|
||||
]
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取风险统计数据失败:', error)
|
||||
})
|
||||
})
|
||||
|
||||
return charts
|
||||
}
|
||||
|
||||
// 转换维保和巡检数据
|
||||
const maintenanceCharts = convertToChartData(maintenanceRecords, '维保类')
|
||||
const inspectionCharts = convertToChartData(inspectionRecords, '巡检类')
|
||||
|
||||
// 合并为6个图表:先维保(3个),后巡检(3个)
|
||||
const allCharts = [...maintenanceCharts, ...inspectionCharts]
|
||||
|
||||
// 更新riskStatistics
|
||||
riskStatistics.value[tab] = allCharts
|
||||
|
||||
console.log('更新后的riskStatistics:', riskStatistics.value)
|
||||
console.log('当前tab的图表数据:', allCharts)
|
||||
} catch (error) {
|
||||
console.error('获取风险统计数据失败:', error)
|
||||
}
|
||||
|
||||
@@ -135,8 +135,8 @@ export const batchGetTableList = (reportCodes: string, data?) => {
|
||||
// 参数:workOrderType:'物业服务-工程',taskType:'巡检任务'
|
||||
// 统计周期 cycle: day,month,year 对应月日年
|
||||
|
||||
export const getWorkOrderStatistics = (workOrderType: string, taskType: string) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/report_work_order_statistics', data: {workOrderType, taskType, page: 1, paseSize: 1} })
|
||||
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} })
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user