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

Compare commits

base: isoftstone:82930a7f2e322b1c55c76393f1d4d37affdb920e
Branches Tags
isoftstone:main isoftstone:dev isoftstone:dev-dataScreen
...
compare: isoftstone:dev
Branches Tags
isoftstone:dev isoftstone:dev-dataScreen isoftstone:main

23 Commits
82930a7f2e ... dev

Author SHA1 Message Date
yang chen
b106385d57 fix(config): 调整接口请求超时时间 
- 将请求超时时间从300000毫秒调整为24小时
- 确保长时间运行的请求不会因超时被中断
 2025-12-16 16:36:20 +08:00
chenlin
3159553a66 hidden_danger_process_progress 2025-12-16 16:09:37 +08:00
chenlin
3a04af1e27 tootip被遮挡 2025-12-16 15:31:13 +08:00
chenlin
76de449c24 饼图优化 2025-12-16 15:28:55 +08:00
chenlin
4301d64450 地区饼图处理 2025-12-16 15:08:05 +08:00
chenlin
5f5fbe8891 Merge branch 'dev' of http://120.46.213.136:9528/isoftstone/lc_frontend into dev 2025-12-16 15:03:04 +08:00
chenlin
ec7ef87340 饼图bug修复 2025-12-16 15:03:01 +08:00
juncaiq
f9163eba6a Merge branch 'dev' of http://120.46.213.136:9528/isoftstone/lc_frontend into dev 
# Conflicts:
#	src/views/screen/report/index.ts
 2025-12-16 14:19:36 +08:00
yang chen
3b265a5a5a refactor(axios): 优化 Axios 配置与响应处理逻辑 
- 统一导入语句格式，去除多余空格
- 优化对象解构赋值写法
- 修复授权头设置中的语法问题
- 完善 QS 参数序列化配置
- 增加对 504 状态码的处理
- 优化错误消息提示逻辑与界面展示
- 调整更多错误详情查看按钮样式
- 更新网络错误与超时提示文本
- 修复登出处理中的国际化调用
- 清理缓存并重置路由逻辑调整
- 调整错误弹窗最大宽度样式
- 导出 service 实例供外部使用
 2025-12-16 12:46:23 +08:00
juncaiq
87953743e2 合并代码 2025-12-16 12:30:55 +08:00
juncaiq
7aac2e8d05 参数修改 2025-12-16 12:28:53 +08:00
yang chen
751794ad13 fix(report): 调整工单统计接口分页大小 
- 将工单统计接口的分页大小从1调整为10
- 确保接口能返回完整的统计数据
- 避免因分页过小导致的数据截断问题
 2025-12-16 12:22:28 +08:00
yang chen
10611efc00 fix(report): 修复工单统计接口分页参数错误 
- 将请求参数中的 `page` 和 `paseSize` 更正为 `pageNo` 和 `pageSize`
- 确保分页查询能正确发送到后端接口
- 统一接口调用参数命名规范，避免因拼写错误导致的数据获取异常
 2025-12-16 12:21:16 +08:00
juncaiq
84aa28af3a 增加campusid参数 2025-12-16 10:57:55 +08:00
chenlin
5daba69ee5 tab切换渲染 2025-12-15 21:47:12 +08:00
chenlin
e318f4519c 地区左下角对接 2025-12-15 21:38:30 +08:00
chenlin
0ec7c06775 调整饼图样式 2025-12-15 21:28:16 +08:00
chenlin
0f31b90814 Merge branch 'dev' of http://120.46.213.136:9528/isoftstone/lc_frontend into dev 2025-12-15 20:57:13 +08:00
chenlin
2569fa16e5 总部左下角接口对接 2025-12-15 20:55:27 +08:00
juncaiq
36e746f4fd 接口数据调整 2025-12-14 22:35:21 +08:00
chenlin
caad49998c no message 2025-12-13 20:55:17 +08:00
chenlin
e1373b98cb Merge branch 'dev' of http://120.46.213.136:9528/isoftstone/lc_frontend into dev 2025-12-13 18:14:36 +08:00
chenlin
3e9ac2b357 bug修复 2025-12-13 18:14:32 +08:00
12 changed files with 1787 additions and 1049 deletions
Expand all files Collapse all files

2
src/config/axios/config.ts
View File

@@ -16,7 +16,7 @@ const config: {
/** /**
* 接口请求超时时间 * 接口请求超时时间
*/ */
request_timeout: 300000, request_timeout: 24 * 60 * 60 * 1000,
/** /**
* 默认接口请求类型 * 默认接口请求类型

46
src/config/axios/service.ts
View File

@@ -6,17 +6,17 @@ import axios, {
InternalAxiosRequestConfig InternalAxiosRequestConfig
} from 'axios' } from 'axios'
import { ElMessage, ElMessageBox, ElNotification, ElButton } from 'element-plus' import {ElMessage, ElMessageBox, ElNotification, ElButton} from 'element-plus'
import qs from 'qs' import qs from 'qs'
import { config, specificApiTimeoutObj } from '@/config/axios/config' import {config, specificApiTimeoutObj} from '@/config/axios/config'
import { getAccessToken, getRefreshToken, getTenantId, removeToken, setToken } from '@/utils/auth' import {getAccessToken, getRefreshToken, getTenantId, removeToken, setToken} from '@/utils/auth'
import errorCode from './errorCode' import errorCode from './errorCode'
import { resetRouter } from '@/router' import {resetRouter} from '@/router'
import { useCache } from '@/hooks/web/useCache' import {useCache} from '@/hooks/web/useCache'
const tenantEnable = import.meta.env.VITE_APP_TENANT_ENABLE const tenantEnable = import.meta.env.VITE_APP_TENANT_ENABLE
const { result_code, base_url, request_timeout } = config const {result_code, base_url, request_timeout} = config
// 需要忽略的提示。忽略后，自动 Promise.reject('error') // 需要忽略的提示。忽略后，自动 Promise.reject('error')
const ignoreMsgs = [ const ignoreMsgs = [
@@ -24,7 +24,7 @@ const ignoreMsgs = [
'刷新令牌已过期' // 使用刷新令牌，刷新获取新的访问令牌时，结果因为过期失败，此时需要忽略。否则，会导致继续 401，无法跳转到登出界面 '刷新令牌已过期' // 使用刷新令牌，刷新获取新的访问令牌时，结果因为过期失败，此时需要忽略。否则，会导致继续 401，无法跳转到登出界面
] ]
// 是否显示重新登录 // 是否显示重新登录
export const isRelogin = { show: false } export const isRelogin = {show: false}
// Axios 无感知刷新令牌，参考 https://www.dashingdog.cn/article/11 与 https://segmentfault.com/a/1190000020210980 实现 // Axios 无感知刷新令牌，参考 https://www.dashingdog.cn/article/11 与 https://segmentfault.com/a/1190000020210980 实现
// 请求队列 // 请求队列
let requestList: any[] = [] let requestList: any[] = []
@@ -51,7 +51,7 @@ service.interceptors.request.use(
} }
}) })
if (getAccessToken() && !isToken) { if (getAccessToken() && !isToken) {
; (config as Recordable).headers.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token ;(config as Recordable).headers.Authorization = 'Bearer ' + getAccessToken() // 让每个请求携带自定义token
} }
// 设置租户 // 设置租户
if (tenantEnable && tenantEnable === 'true') { if (tenantEnable && tenantEnable === 'true') {
@@ -74,7 +74,7 @@ service.interceptors.request.use(
// get参数编码 // get参数编码
if (config.method?.toUpperCase() === 'GET' && params) { if (config.method?.toUpperCase() === 'GET' && params) {
config.params = {} config.params = {}
const paramsStr = qs.stringify(params, { allowDots: true }) const paramsStr = qs.stringify(params, {allowDots: true})
if (paramsStr) { if (paramsStr) {
config.url = config.url + '?' + paramsStr config.url = config.url + '?' + paramsStr
} }
@@ -91,13 +91,13 @@ service.interceptors.request.use(
// response 拦截器 // response 拦截器
service.interceptors.response.use( service.interceptors.response.use(
async (response: AxiosResponse<any>) => { async (response: AxiosResponse<any>) => {
let { data } = response let {data} = response
const config = response.config const config = response.config
if (!data) { if (!data) {
// 返回“[HTTP]请求没有返回值”; // 返回“[HTTP]请求没有返回值”;
throw new Error() throw new Error()
} }
const { t } = useI18n() const {t} = useI18n()
// 未设置状态码则默认成功状态 // 未设置状态码则默认成功状态
// 二进制数据则直接返回，例如说 Excel 导出 // 二进制数据则直接返回，例如说 Excel 导出
if ( if (
@@ -159,6 +159,8 @@ service.interceptors.response.use(
} else if (code === 500) { } else if (code === 500) {
ElMessage.error(t('sys.api.errMsg500')) ElMessage.error(t('sys.api.errMsg500'))
return Promise.reject(new Error(msg)) return Promise.reject(new Error(msg))
} else if (code === 504) {
return Promise.reject(new Error(msg))
} else if (code === 901) { } else if (code === 901) {
ElMessage.error({ ElMessage.error({
offset: 300, offset: 300,
@@ -174,10 +176,10 @@ service.interceptors.response.use(
title: msg, title: msg,
dangerouslyUseHTMLString: true, dangerouslyUseHTMLString: true,
message: h(ElButton, { message: h(ElButton, {
link: true, link: true,
type: 'primary', type: 'primary',
onClick: () => handleMoreError(msg, data.data) onClick: () => handleMoreError(msg, data.data)
}, },
'点击查看具体原因' '点击查看具体原因'
) )
}) })
@@ -186,7 +188,7 @@ service.interceptors.response.use(
// hard coding：忽略这个提示，直接登出 // hard coding：忽略这个提示，直接登出
console.log(msg) console.log(msg)
} else { } else {
ElNotification.error({ title: msg }) ElNotification.error({title: msg})
} }
return Promise.reject('error') return Promise.reject('error')
} else { } else {
@@ -195,8 +197,8 @@ service.interceptors.response.use(
}, },
(error: AxiosError) => { (error: AxiosError) => {
console.log('err' + error) // for debug console.log('err' + error) // for debug
let { message } = error let {message} = error
const { t } = useI18n() const {t} = useI18n()
if (message === 'Network Error') { if (message === 'Network Error') {
message = t('sys.api.errorMessage') message = t('sys.api.errorMessage')
} else if (message.includes('timeout')) { } else if (message.includes('timeout')) {
@@ -214,7 +216,7 @@ const refreshToken = async () => {
return await axios.post('/system/auth/refresh-token?refreshToken=' + getRefreshToken()) return await axios.post('/system/auth/refresh-token?refreshToken=' + getRefreshToken())
} }
const handleAuthorized = () => { const handleAuthorized = () => {
const { t } = useI18n() const {t} = useI18n()
if (!isRelogin.show) { if (!isRelogin.show) {
// 如果已经到重新登录页面则不进行弹窗提示 // 如果已经到重新登录页面则不进行弹窗提示
if (window.location.href.includes('login?redirect=')) { if (window.location.href.includes('login?redirect=')) {
@@ -228,7 +230,7 @@ const handleAuthorized = () => {
confirmButtonText: t('login.relogin'), confirmButtonText: t('login.relogin'),
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
const { wsCache } = useCache() const {wsCache} = useCache()
resetRouter() // 重置静态路由表 resetRouter() // 重置静态路由表
wsCache.clear() wsCache.clear()
removeToken() removeToken()
@@ -242,7 +244,7 @@ const handleAuthorized = () => {
const handleMoreError = (title, message) => { const handleMoreError = (title, message) => {
ElMessageBox.alert(`<div style="white-space: break-spaces;">${message}</div>`, title, { ElMessageBox.alert(`<div style="white-space: break-spaces;">${message}</div>`, title, {
dangerouslyUseHTMLString: true, dangerouslyUseHTMLString: true,
customStyle: { maxWidth: '40%' } customStyle: {maxWidth: '40%'}
}) })
} }
export { service } export {service}

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

@@ -75,13 +75,15 @@
<img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" /> <img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
</div> </div>
<div class="type-wrapper"> <div class="type-wrapper">
<div class="type-item"> <div class="type-item">
<span class="type-btn yellow">重大</span> <span class="type-btn yellow">重大</span>
<span class="type-num">{{ mockData.hiddenDangerData.severityCount }}</span> <span class="type-num cursor-pointer" @click="handleSeverityCountClick">{{
mockData.hiddenDangerData.severityCount }}</span>
</div> </div>
<div class="type-item"> <div class="type-item">
<span class="type-btn green">一般</span> <span class="type-btn green">一般</span>
<span class="type-num">{{ mockData.hiddenDangerData.generalCount }}</span> <span class="type-num cursor-pointer" @click="handleGeneralCountClick">{{
mockData.hiddenDangerData.generalCount }}</span>
</div> </div>
<!-- <div class="type-item"> <!-- <div class="type-item">
<span class="type-btn blue">较大</span> <span class="type-btn blue">较大</span>
@@ -96,7 +98,7 @@
<div class="legend-item"><span class="dot green"></span>已处理</div> <div class="legend-item"><span class="dot green"></span>已处理</div>
</div> </div>
<div class="progress-legend"> <div class="progress-legend">
<!-- <div class="legend-item"><span class="dot yellow"></span>待排查</div>--> <!-- <div class="legend-item"><span class="dot yellow"></span>待排查</div>-->
<div class="legend-item"><span class="dot blue"></span>处理中</div> <div class="legend-item"><span class="dot blue"></span>处理中</div>
</div> </div>
</div> </div>
@@ -104,66 +106,69 @@
</div> </div>
<!-- 左下区域 --> <!-- 左下区域 -->
<div class="left-bottom"> <div class="left-bottom">
<div class="panel-title"> <!-- <div class="panel-title">
<div class="tabs"> <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="divider">|</span>
<span <span class="tab" :class="{ active: activeTab === '安全培训考试' }"
class="tab" :class="{ active: activeTab === '安全培训考试' }"
@click="handleTabClick('安全培训考试')">安全培训考试</span> @click="handleTabClick('安全培训考试')">安全培训考试</span>
<span class="divider">|</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>
</div> </div>
<img style="margin: 8px 0" src="@/assets/images/title_border_line.png" /> <img style="margin: 8px 0" src="@/assets/images/title_border_line.png" />
<div style="padding-top: 10px;display: flex; flex-direction: column; justify-content: start; height: 91%;"> <div style="padding-top: 10px;display: flex; flex-direction: column; justify-content: start; height: 91%;">
<template v-if="activeTab === '高危作业'"> <template v-if="activeTab === '高危作业'">
<div class="bottom-card"> <div class="bottom-card">
<div class="bottom-card-title" style="margin-top: 0;"> <div class="bottom-card-title" style="margin-top: 0;">
<span>各园区统计</span> <span>各园区统计</span>
<img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" /> <img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
</div> </div>
</div> </div>
<div class="row-wrapper"> <div class="row-wrapper">
<div class="row-item"> <div class="row-item">
<img src="@/assets/images/screen/unfinished.png" width="20" /> <img src="@/assets/images/screen/unfinished.png" width="20" />
<span class="row-item-title">未开始数量</span> <span class="row-item-title">未开始数量</span>
<span class="row-item-number">{{unfinishedCount}}</span> <span class="row-item-number">{{ unfinishedCount }}</span>
</div> </div>
<div class="row-item"> <div class="row-item">
<img src="@/assets/images/screen/inProcess.png" width="20" /> <img src="@/assets/images/screen/inProcess.png" width="20" />
<span class="row-item-title">进行中数量</span> <span class="row-item-title">进行中数量</span>
<span class="row-item-number">{{inProgressCount}}</span> <span class="row-item-number">{{ inProgressCount }}</span>
</div> </div>
<div class="row-item"> <div class="row-item">
<img src="@/assets/images/screen/finished.png" width="20" /> <img src="@/assets/images/screen/finished.png" width="20" />
<span class="row-item-title">已完成数量</span> <span class="row-item-title">已完成数量</span>
<span class="row-item-number">{{finishedCount}}</span> <span class="row-item-number">{{ finishedCount }}</span>
</div> </div>
</div> </div>
<div style="display: flex; width: 100%;"> <div style="display: flex; width: 100%;">
<AlertList maxHeight="25vh" style="margin-left: 1vw;" :list-data="dangerList" /> <AlertList maxHeight="25vh" style="margin-left: 1vw;" :list-data="dangerList" />
</div> </div>
</template> </template>
<template v-if="activeTab === '安全培训考试'"> <template v-if="activeTab === '安全培训考试'">
<div class="bottom-card" style="margin-top: 10px;"> <div class="bottom-card" style="margin-top: 10px;">
<div class="bottom-card-title" style="margin-top: 0;"> <div class="bottom-card-title" style="margin-top: 0;">
<span>安全培训考试</span> <span>安全培训考试</span>
<img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" /> <img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
</div> </div>
</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>
<template v-if="activeTab === '应急预案及演练'"> <template v-if="activeTab === '应急预案及演练'">
<div class="bottom-card"> <div class="bottom-card">
<div class="bottom-card-title" style="margin-top: 0;"> <div class="bottom-card-title" style="margin-top: 0;">
<span>应急预案及演练</span> <span>应急预案及演练</span>
<img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" /> <img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
</div> </div>
</div> </div>
<AlertList maxHeight="40vh" style="margin-left: 1vw;" :table-title="trainingTableTitle" :list-data="drillList" /> <AlertList maxHeight="40vh" style="margin-left: 1vw;" :table-title="trainingTableTitle"
</template> :list-data="drillList" />
</div> </template>
</div> -->
<RiskStatisticsPanel :riskStatistics="riskStatistics" :dangerDetail="dangerDetail" :park="parkValue"
@tab-change="handleRiskTabChange" :campus_id="query.campus_id" />
</div> </div>
</div> </div>
<div class="right-wrapper"> <div class="right-wrapper">
@@ -192,11 +197,13 @@ class="tab" :class="{ active: activeTab === '安全培训考试' }"
</div> </div>
<div class="col-item" style=" display: flex;margin-left: 2vw; align-items: center;"> <div class="col-item" style=" display: flex;margin-left: 2vw; align-items: center;">
<span>待处理</span> <span>待处理</span>
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.pending }}</span> <span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.pending
}}</span>
</div> </div>
<div class="col-item" style=" display: flex;margin-left: 2vw; align-items: center;"> <div class="col-item" style=" display: flex;margin-left: 2vw; align-items: center;">
<span>处理中</span> <span>处理中</span>
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.processing }}</span> <span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.processing
}}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -218,7 +225,8 @@ class="tab" :class="{ active: activeTab === '安全培训考试' }"
<div class="col-item"> <div class="col-item">
<img src="@/assets/images/screen/warning_img.png" width="23" /> <img src="@/assets/images/screen/warning_img.png" width="23" />
<span>超时工单数</span> <span>超时工单数</span>
<span style="font-size: 1.2rem; marker-start: 2vw; color: red;">{{ mockData.timeoutWorkOrders.total }}</span> <span style="font-size: 1.2rem; marker-start: 2vw; color: red;">{{ mockData.timeoutWorkOrders.total
}}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -229,14 +237,12 @@ class="tab" :class="{ active: activeTab === '安全培训考试' }"
</div> </div>
<div class="center-container"> <div class="center-container">
<!-- 中部区域 --> <!-- 中部区域 -->
<ParkCenter <ParkCenter :parkName="selectedPark" :backgroundImage="backgroundImage" @point-hover="handlePointHover"
:parkName="selectedPark" :backgroundImage="backgroundImage" @point-hover="handlePointHover"
@point-leave="handlePointLeave" /> @point-leave="handlePointLeave" />
</div> </div>
<!-- 点位信息弹窗 --> <!-- 点位信息弹窗 -->
<PointInfoPopup <PointInfoPopup v-if="showPointPopup" :visible="showPointPopup" :point-info="currentPoint"
v-if="showPointPopup" :visible="showPointPopup" :point-info="currentPoint"
:park-name="selectedPark || '雄安园区'" /> :park-name="selectedPark || '雄安园区'" />
</div> </div>
</div> </div>
@@ -249,7 +255,8 @@ import ParkCenter from './components/ParkCenter.vue'
import PointInfoPopup from './components/PointInfoPopup.vue' import PointInfoPopup from './components/PointInfoPopup.vue'
import WeatherWarning from './components/WeatherWarning.vue' import WeatherWarning from './components/WeatherWarning.vue'
import AlertList from './components/AlertList.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 { interface PointPosition {
label: string label: string
@@ -283,44 +290,148 @@ const unfinishedCount = ref<number>(0)
const inProgressCount = ref<number>(0) const inProgressCount = ref<number>(0)
const finishedCount = ref<number>(0) const finishedCount = ref<number>(0)
const handleSeverityCountClick = () => {
window.open('http://10.0.64.20/pms/workorder-list', '_blank')
}
const handleGeneralCountClick = () => {
window.open('http://10.0.64.20/pms/workorder-list', '_blank')
}
const tableTitle = [ const riskStatistics = ref<any>({
{ '安全类': [],
name: '培训（考试）名称', '工程类': []
key: 'examname' })
}, const dangerDetail = ref<any>({
{ '安全类': [],
name: '参与人次', '工程类': []
key: 'exampeoplenum' })
}, const parkValue = ref<string>('')
{
name: '培训时长（小时）', type TabType = '安全类' | '工程类'
key: 'examduration',
},
{ const handleRiskTabChange = async (tab: TabType) => {
name: '考试通过率(%)', console.log('Tab changed to:', tab)
key: 'exampassrate',
try {
let workOrderType = ''
switch (tab) {
case '安全类':
workOrderType = '安全生产'
break
case '工程类':
workOrderType = '物业服务-工程'
break
default:
workOrderType = '安全生产'
} }
]
const trainingTableTitle = [ // 同时获取维保任务和巡检任务的数据
{ const [maintenanceResponse, inspectionResponse] = await Promise.all([
name: '演练名称', getWorkOrderStatistics({ workOrderType, taskType: '维保任务', campus_id: query.campus_id }).catch(error => {
key: 'drill_plan_name' console.error('获取维保任务数据失败:', error)
}, return { records: [] }
{ }),
name: '完成时间', getWorkOrderStatistics({ workOrderType, taskType: '巡检任务', campus_id: query.campus_id }).catch(error => {
key: 'drill_time' console.error('获取巡检任务数据失败:', error)
}, return { records: [] }
{ })
name: '参与人数', ])
key: 'drill_count'
// 周期映射
const cycleMap: Record<string, string> = {
'day': '每日',
'month': '每月',
'year': '每年'
} }
]
const examList = ref<any[]>([]) // 将API数据转换为图表数据格式
const convertToChartData = (records: any[], taskTypeName: string): any[] => {
const charts: any[] = []
const drillList = ref<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 = [
{
name: '培训（考试）名称',
key: 'examname'
},
{
name: '参与人次',
key: 'exampeoplenum'
},
{
name: '培训时长（小时）',
key: 'examduration',
},
{
name: '考试通过率(%)',
key: 'exampassrate',
}
]
const trainingTableTitle = [
{
name: '演练名称',
key: 'drill_plan_name'
},
{
name: '完成时间',
key: 'drill_time'
},
{
name: '参与人数',
key: 'drill_count'
}
]
const examList = ref<any[]>([])
const drillList = ref<any[]>([])
const query = reactive({ const query = reactive({
@@ -543,12 +654,14 @@ const initProgressChart = () => {
labelLayout: function (params: any) { labelLayout: function (params: any) {
const isLeft = params.labelRect.x < width / 2; const isLeft = params.labelRect.x < width / 2;
const points = params.labelLinePoints; const points = params.labelLinePoints;
points[2][0] = isLeft if (points && points.length && points[2]) {
? params.labelRect.x points[2][0] = isLeft
: params.labelRect.x + params.labelRect.width; ? params.labelRect.x
return { : params.labelRect.x + params.labelRect.width;
labelLinePoints: points return {
}; labelLinePoints: points
};
}
}, },
} }
] ]
@@ -577,6 +690,8 @@ onMounted(async () => {
query.campus_id = route.query.parkCode as string query.campus_id = route.query.parkCode as string
} }
handleRiskTabChange('安全类')
try { try {
let { records } = await getTableList( let { records } = await getTableList(
'park_info_list' 'park_info_list'
@@ -844,12 +959,14 @@ const handleHiddenDangerPannelData = (query) => {
labelLayout: function (params: any) { labelLayout: function (params: any) {
const isLeft = params.labelRect.x < width / 2; const isLeft = params.labelRect.x < width / 2;
const points = params.labelLinePoints; const points = params.labelLinePoints;
points[2][0] = isLeft if (points && points.length && points[2]) {
? params.labelRect.x points[2][0] = isLeft
: params.labelRect.x + params.labelRect.width; ? params.labelRect.x
return { : params.labelRect.x + params.labelRect.width;
labelLinePoints: points return {
}; labelLinePoints: points
};
}
}, },
} }
] ]
@@ -863,12 +980,17 @@ const handleHiddenDangerPannelData = (query) => {
// 获取隐患排查治理数据 // 获取隐患排查治理数据
getTableList('risk_status_count', query).then(res => { getTableList('risk_status_count', query).then(res => {
if (res.records && res.records.length > 0) { 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) const record = res.records[0]
_data.processing = _data.processing + Number(res.records[0].processingCnt) _data.overdue = Number(record.overdueCnt) || 0
_data.pending = _data.pending _data.processed = Number(record.processedCnt) || 0
_data.processing = Number(record.processingCnt) || 0
_data.pending = 0 // 接口没有返回pending，设为0
_data.flag = true _data.flag = true
console.log('risk_status_count 接口返回数据:', record)
console.log('处理后的 _data:', _data)
if (_data2.flag) { if (_data2.flag) {
// 合并数据 // 合并数据
console.log("请求系统和第三方成功，合并数据", _data, _data2); console.log("请求系统和第三方成功，合并数据", _data, _data2);
@@ -877,18 +999,31 @@ const handleHiddenDangerPannelData = (query) => {
mockData.hiddenDangerData.generalCount = generalCnt mockData.hiddenDangerData.generalCount = generalCnt
mockData.hiddenDangerData.severityCount = majorCnt 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 overdueCnt, processedCnt, processingCnt, pendingCnt
let processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2) if (_data2.overdue > 1 || _data2.processed > 1 || _data2.processing > 1) {
let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2) // 第三方数据可能是百分比，直接使用系统数据（因为系统数据更准确）
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'
}
progressOption.series[0].data = [ progressOption.series[0].data = [
{ value: overdueCnt || 0, name: '已逾期', itemStyle: { color: '#ef4444' } }, { value: Number(overdueCnt) || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
{ value: processedCnt || 0, name: '已处理', itemStyle: { color: '#10b981' } }, { value: Number(processedCnt) || 0, name: '已处理', itemStyle: { color: '#10b981' } },
{ value: pendingCnt || 0, name: '待排查', itemStyle: { color: '#eab308' } }, { value: Number(pendingCnt) || 0, name: '待排查', itemStyle: { color: '#eab308' } },
{ value: processingCnt || 0, name: '处理中', itemStyle: { color: '#3b82f6' } } { value: Number(processingCnt) || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
] ]
console.log('合并后的图表数据:', progressOption.series[0].data)
if (progressChart.value != null) { if (progressChart.value != null) {
progressChart.value.setOption(progressOption) progressChart.value.setOption(progressOption)
} }
@@ -897,17 +1032,14 @@ const handleHiddenDangerPannelData = (query) => {
mockData.hiddenDangerData.generalCount = _data.general mockData.hiddenDangerData.generalCount = _data.general
mockData.hiddenDangerData.severityCount = _data.major 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 = [ progressOption.series[0].data = [
{ value: overdueCnt || 0, name: '已逾期', itemStyle: { color: '#ef4444' } }, { value: _data.overdue || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
{ value: processedCnt || 0, name: '已处理', itemStyle: { color: '#10b981' } }, { value: _data.processed || 0, name: '已处理', itemStyle: { color: '#10b981' } },
{ value: pendingCnt || 0, name: '待排查', itemStyle: { color: '#eab308' } }, { value: _data.pending || 0, name: '待排查', itemStyle: { color: '#eab308' } },
{ value: processingCnt || 0, name: '处理中', itemStyle: { color: '#3b82f6' } } { value: _data.processing || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
] ]
console.log('系统数据图表数据:', progressOption.series[0].data)
if (progressChart.value != null) { if (progressChart.value != null) {
progressChart.value.setOption(progressOption) progressChart.value.setOption(progressOption)
} }
@@ -927,56 +1059,56 @@ const handleHiddenDangerPannelData = (query) => {
// 获取隐患排查治理处理进度数据 // 获取隐患排查治理处理进度数据
getTableList('hidden_danger_process_progress', query).then(res => { getTableList('hidden_danger_process_progress', query).then(res => {
if (res.records && res.records.length > 0) { // if (res.records && res.records.length > 0) {
_data2.flag = true // _data2.flag = true
_data2.overdue = Number(res.records[0].overdue) / 100 * (_data2.general + _data2.major) // _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.processed = Number(res.records[0].processed) / 100 * (_data2.general + _data2.major)
_data2.processing = Number(res.records[0].processing) / 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) // _data2.pending = Number(res.records[0].pending) / 100 * (_data2.general + _data2.major)
if (_data.flag) { // if (_data.flag) {
console.log("请求第三方和系统成功，合并数据", _data, _data2); // console.log("请求第三方和系统成功，合并数据", _data, _data2);
// 合并数据 // // 合并数据
let generalCnt = _data.general + _data2.general // let generalCnt = _data.general + _data2.general
let majorCnt = _data.major + _data2.major // let majorCnt = _data.major + _data2.major
mockData.hiddenDangerData.generalCount = generalCnt // mockData.hiddenDangerData.generalCount = generalCnt
mockData.hiddenDangerData.severityCount = majorCnt // mockData.hiddenDangerData.severityCount = majorCnt
let totalCnt = generalCnt + majorCnt // let totalCnt = generalCnt + majorCnt
let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2) // let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2)
let processedCnt = ((_data.processed + _data2.processed) / 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 processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2)
let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2) // let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2)
progressOption.series[0].data = [ // progressOption.series[0].data = [
{ value: overdueCnt || 0, name: '已逾期', itemStyle: { color: '#ef4444' } }, // { value: overdueCnt || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
{ value: processedCnt || 0, name: '已处理', itemStyle: { color: '#10b981' } }, // { value: processedCnt || 0, name: '已处理', itemStyle: { color: '#10b981' } },
{ value: pendingCnt || 0, name: '待排查', itemStyle: { color: '#eab308' } }, // { value: pendingCnt || 0, name: '待排查', itemStyle: { color: '#eab308' } },
{ value: processingCnt || 0, name: '处理中', itemStyle: { color: '#3b82f6' } } // { value: processingCnt || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
] // ]
if (progressChart.value != null) { // if (progressChart.value != null) {
progressChart.value.setOption(progressOption) // progressChart.value.setOption(progressOption)
} // }
} else { // } else {
//显示三方数据 // //显示三方数据
console.log("请求第三方成功，展示数据", _data, _data2); // console.log("请求第三方成功，展示数据", _data, _data2);
mockData.hiddenDangerData.generalCount = _data2.general // mockData.hiddenDangerData.generalCount = _data2.general
mockData.hiddenDangerData.severityCount = _data2.major // mockData.hiddenDangerData.severityCount = _data2.major
let overdueCnt = res.records[0].overdue // let overdueCnt = res.records[0].overdue
let processedCnt = res.records[0].processed // let processedCnt = res.records[0].processed
let processingCnt = res.records[0].processing // let processingCnt = res.records[0].processing
let pendingCnt = res.records[0].pending // let pendingCnt = res.records[0].pending
progressOption.series[0].data = [ // progressOption.series[0].data = [
{ value: overdueCnt || 0, name: '已逾期', itemStyle: { color: '#ef4444' } }, // { value: overdueCnt || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
{ value: processedCnt || 0, name: '已处理', itemStyle: { color: '#10b981' } }, // { value: processedCnt || 0, name: '已处理', itemStyle: { color: '#10b981' } },
{ value: pendingCnt || 0, name: '待排查', itemStyle: { color: '#eab308' } }, // { value: pendingCnt || 0, name: '待排查', itemStyle: { color: '#eab308' } },
{ value: processingCnt || 0, name: '处理中', itemStyle: { color: '#3b82f6' } } // { value: processingCnt || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
] // ]
if (progressChart.value != null) { // if (progressChart.value != null) {
progressChart.value.setOption(progressOption) // progressChart.value.setOption(progressOption)
} // }
} // }
} // }
}).catch(error => { }).catch(error => {
console.error('获取隐患排查治理处理进度数据失败:', error) console.error('获取隐患排查治理处理进度数据失败:', error)
}) })
@@ -1002,7 +1134,7 @@ const handleTabClick = async (tab: string) => {
code1 = "fire_drill_detail" code1 = "fire_drill_detail"
getDangerDetail(query.campus_id).then(res => { getDangerDetail(query.campus_id).then(res => {
const list = res.records.map((item: any) => ({description: item.contenttext})) const list = res.records.map((item: any) => ({ description: item.contenttext }))
dangerList.value = list dangerList.value = list
}) })
@@ -1186,6 +1318,10 @@ onUnmounted(() => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.cursor-pointer {
cursor: pointer;
}
/* 响应式设计 - 自动适应不同屏幕尺寸 */ /* 响应式设计 - 自动适应不同屏幕尺寸 */
@media (width <=1200px) { @media (width <=1200px) {
.dashboard-container { .dashboard-container {

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

@@ -15,7 +15,7 @@
<div class="list-wrapper" ref="listWrapperRef" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave"> <div class="list-wrapper" ref="listWrapperRef" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
<!-- 表格模式 --> <!-- 表格模式 -->
<template v-if="tableTitle && tableTitle.length > 0"> <template v-if="tableTitle && tableTitle.length > 0">
<div class="table-row" v-for="(item, index) in listData" :key="`table-${index}`" @mouseenter="handleMouseEnter"> <div @click="handleItemClick(item)" class="table-row cursor-pointer" v-for="(item, index) in listData" :key="`table-${index}`" @mouseenter="handleMouseEnter">
<div class="table-cell" v-for="(title, cellIndex) in tableTitle" :key="`cell-${index}-${cellIndex}`"> <div class="table-cell" v-for="(title, cellIndex) in tableTitle" :key="`cell-${index}-${cellIndex}`">
{{ item[title.key] || '-' }} {{ item[title.key] || '-' }}
</div> </div>
@@ -24,7 +24,7 @@
<!-- 列表模式 --> <!-- 列表模式 -->
<template v-else> <template v-else>
<div class="list-item" v-for="(item, index) in listData" :key="`list-${index}`" @mouseenter="handleMouseEnter"> <div @click="handleItemClick(item)" class="list-item cursor-pointer" v-for="(item, index) in listData" :key="`list-${index}`" @mouseenter="handleMouseEnter">
<span class="alert-text" :class="[{ error: item.alarm_level_code == 'severity' }, { warn: item.alarm_level_code == 'major' }]"> <span class="alert-text" :class="[{ error: item.alarm_level_code == 'severity' }, { warn: item.alarm_level_code == 'major' }]">
{{ (index + 1) }} {{ item.description }} {{ (index + 1) }} {{ item.description }}
</span> </span>
@@ -72,8 +72,12 @@ const listWrapperRef = ref<HTMLElement | null>(null)
let scrollTimer: NodeJS.Timeout | null = null let scrollTimer: NodeJS.Timeout | null = null
let isScrolling = false let isScrolling = false
const handleItemClick = (item: AlertItem) => {
window.open(`http://10.0.64.20/pms/workorder-list`, '_blank')
}
// 自动滚动功能 // 自动滚动功能
const startAutoScroll = () => { const startAutoScroll = (resetToTop: boolean = false) => {
if (!props.autoScroll || !listWrapperRef.value) return if (!props.autoScroll || !listWrapperRef.value) return
const wrapper = listWrapperRef.value const wrapper = listWrapperRef.value
@@ -83,20 +87,38 @@ const startAutoScroll = () => {
// 只有当内容高度超过容器高度时才启动滚动 // 只有当内容高度超过容器高度时才启动滚动
if (scrollHeight <= clientHeight) return if (scrollHeight <= clientHeight) return
// 如果是首次启动或需要重置，从顶部开始
if (resetToTop) {
wrapper.scrollTop = 0
}
isScrolling = true isScrolling = true
let currentScrollTop = listWrapperRef.value.scrollTop
const scroll = () => { const scroll = () => {
if (!isScrolling || !wrapper) return if (!isScrolling || !wrapper) return
currentScrollTop += props.scrollSpeed const currentScrollTop = wrapper.scrollTop
const maxScrollTop = scrollHeight - clientHeight
// 如果滚动到底部，重置到顶部 // 向下滚动
if (currentScrollTop >= scrollHeight - clientHeight) { const nextScrollTop = currentScrollTop + props.scrollSpeed
currentScrollTop = 0
if (nextScrollTop >= maxScrollTop) {
// 滚动到底部，瞬间跳转到顶部
// 先移除平滑滚动效果，实现瞬间跳转
const originalScrollBehavior = wrapper.style.scrollBehavior
wrapper.style.scrollBehavior = 'auto'
wrapper.scrollTop = 0 wrapper.scrollTop = 0
// 恢复平滑滚动效果
setTimeout(() => {
wrapper.style.scrollBehavior = originalScrollBehavior || 'smooth'
}, 0)
// 短暂延迟后继续滚动
scrollTimer = setTimeout(scroll, 100)
return
} else { } else {
wrapper.scrollTop = currentScrollTop wrapper.scrollTop = nextScrollTop
} }
scrollTimer = setTimeout(scroll, 50) // 每50ms滚动一次，实现平滑效果 scrollTimer = setTimeout(scroll, 50) // 每50ms滚动一次，实现平滑效果
@@ -121,8 +143,9 @@ const handleMouseEnter = () => {
const handleMouseLeave = () => { const handleMouseLeave = () => {
if (props.autoScroll) { if (props.autoScroll) {
// 延迟启动滚动，避免鼠标快速进出 // 延迟启动滚动，避免鼠标快速进出
// 从当前位置继续向下滚动
setTimeout(() => { setTimeout(() => {
startAutoScroll() startAutoScroll(false)
}, 500) }, 500)
} }
} }
@@ -133,7 +156,8 @@ watch(() => props.listData, () => {
if (props.autoScroll) { if (props.autoScroll) {
stopAutoScroll() stopAutoScroll()
setTimeout(() => { setTimeout(() => {
startAutoScroll() // 数据更新后从顶部重新开始
startAutoScroll(true)
}, 1000) // 数据更新后1秒开始滚动 }, 1000) // 数据更新后1秒开始滚动
} }
}) })
@@ -141,9 +165,9 @@ watch(() => props.listData, () => {
onMounted(() => { onMounted(() => {
if (props.autoScroll) { if (props.autoScroll) {
// 组件挂载后延迟启动滚动 // 组件挂载后延迟启动滚动，从顶部开始
setTimeout(() => { setTimeout(() => {
startAutoScroll() startAutoScroll(true)
}, 2000) }, 2000)
} }
}) })
@@ -154,6 +178,9 @@ onUnmounted(() => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.cursor-pointer {
cursor: pointer;
}
.list-content { .list-content {
display: flex; display: flex;
width: 68%; width: 68%;

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

@@ -10,11 +10,11 @@
<div class="type-wrapper"> <div class="type-wrapper">
<div class="type-item"> <div class="type-item">
<span class="type-btn">重大</span> <span class="type-btn">重大</span>
<span class="type-num">{{ hiddenDangerData?.major || 0 }}</span> <span class="type-num cursor-pointer" @click="handleMajorClick">{{ hiddenDangerData?.major || 0 }}</span>
</div> </div>
<div class="type-item"> <div class="type-item">
<span class="type-btn active">一般</span> <span class="type-btn active">一般</span>
<span class="type-num">{{ hiddenDangerData?.general || 0 }}</span> <span class="type-num cursor-pointer" @click="handleMajorClick">{{ hiddenDangerData?.general || 0 }}</span>
</div> </div>
</div> </div>
@@ -96,6 +96,12 @@ const props = defineProps<Props>()
// 图表引用 // 图表引用
const progressChartOption = ref<any>({ const progressChartOption = ref<any>({
backgroundColor: 'transparent',
tooltip: {
show: true,
trigger: 'item',
formatter: '{a} <br/>{b}: {c}% ({d}%)'
},
series: [ series: [
{ {
type: 'pie' as const, type: 'pie' as const,
@@ -106,6 +112,7 @@ const progressChartOption = ref<any>({
bottom: 0, bottom: 0,
data: [], data: [],
label: { label: {
show: true,
alignTo: 'edge' as const, alignTo: 'edge' as const,
formatter: '{time|{c} %}\n', formatter: '{time|{c} %}\n',
minMargin: 5, minMargin: 5,
@@ -119,6 +126,7 @@ const progressChartOption = ref<any>({
} }
}, },
labelLine: { labelLine: {
show: true,
length: 5, length: 5,
length2: 0, length2: 0,
maxSurfaceAngle: 10 maxSurfaceAngle: 10
@@ -189,24 +197,116 @@ const top3TypesChartOption = ref<any>({
] ]
}) })
watch(() => props.hiddenDangerData?.progress, (newVal) => { const handleMajorClick = () => {
refreshProcessCharts(newVal) window.open('http://10.0.64.20/pms/workorder-list', '_blank')
}, { deep: true }) }
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') {
return 0
}
const num = Number(val)
return isNaN(num) ? 0 : num
}
// 更新图表数据 // 更新图表数据
const refreshProcessCharts = (process): void => { const refreshProcessCharts = (process): void => {
if (!props.hiddenDangerData?.progress) { if (!process) {
console.warn('process is undefined or null') console.warn('process is undefined or null')
// 即使没有数据，也要显示空图表，确保图表容器始终存在
const option = { ...progressChartOption.value }
option.series[0].data = [
{ value: 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
{ value: 0, name: '已处理', itemStyle: { color: '#10b981' } },
{ value: 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
]
progressChartOption.value = option
return return
} }
const option = { ...progressChartOption.value }
option.series[0].data = [ const overdue = safeNumber(process.overdue)
{ value: process.overdue || 0, name: '已逾期', itemStyle: { color: '#ef4444' } }, const processed = safeNumber(process.processed)
{ value: process.processed || 0, name: '已处理', itemStyle: { color: '#10b981' } }, const processing = safeNumber(process.processing)
// { value: process.pending || 0, name: '待排查', itemStyle: { color: '#eab308' } },
{ value: process.processing || 0, name: '处理中', itemStyle: { color: '#3b82f6' } } 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 progressChartOption.value = option
// 更新 key 以强制重新渲染（可选，通常不需要）
// chartKey.value = Date.now()
} }
@@ -236,7 +336,11 @@ const refreshTop3TypesCharts = (top3Types): void => {
} }
onMounted(() => { onMounted(() => {
// 组件挂载时，如果已有数据，立即更新图表
if (props.hiddenDangerData?.progress) {
console.log('onMounted: 初始化图表数据', props.hiddenDangerData.progress)
refreshProcessCharts(props.hiddenDangerData.progress)
}
}) })
</script> </script>
@@ -403,7 +507,7 @@ p:before{content:'?'; color:yellow; font-weight: bold;}
display: flex; display: flex;
width: 77%; width: 77%;
height: 77%; height: 77%;
overflow: hidden; // overflow: hidden;
border-radius: 50%; border-radius: 50%;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;

591
src/views/screen/components/RiskStatisticsPanel copy.vue Normal file
View File

@@ -0,0 +1,591 @@
<template>
<div class="left-bottom">
<div class="panel-title">
<div class="tabs">
<span class="tab" :class="{ active: activeTab === '高危作业' }" @click="handleTabClick('高危作业')">高危作业</span>
<span class="divider">|</span>
<span class="tab" :class="{ active: activeTab === '安全培训考试' }" @click="handleTabClick('安全培训考试')">安全培训考试</span>
<span class="divider">|</span>
<span class="tab" :class="{ active: activeTab === '应急预案及演练' }" @click="handleTabClick('应急预案及演练')">应急预案及演练</span>
</div>
</div>
<img style="margin: 8px 0" src="@/assets/images/title_border_line.png" />
<div class="bottom-card-risk">
<div class="bottom-card-title">
<span>{{ activeTab === '高危作业' ? '各园区统计' : activeTab === '安全培训考试' ? '安全培训考试' : '园区演练完成率' }}</span>
<img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
</div>
</div>
<!-- <Echart v-if="activeTab !== '高危作业'" :options="riskChartOption" class="donut-chart-with-labels" height="30vh" /> -->
<AlertList maxHeight="40vh" v-if="activeTab === '安全培训考试'" :table-title="tableTitle" style="margin-left: 1vw;"
:list-data="dataList" />
<div style="width: 80%; padding-left: 1vw;">
<Echart v-if="activeTab === '高危作业'" style="height: 30vh" :options="barChartOption" class="bar-chart" />
</div>
<div ref="riskChart" class="risk-chart" v-if="activeTab === '应急预案及演练'"></div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, nextTick } from 'vue'
import AlertList from './AlertList.vue'
import { rgbToHex } from '@/utils/color'
import * as echarts from 'echarts'
import { getDrillSum, getExamSum, getZBDangerSum } from '../report'
type TabType = '高危作业' | '安全培训考试' | '应急预案及演练'
const activeTab = ref<TabType>('高危作业')
const emit = defineEmits<{
tabChange: [tab: TabType]
}>()
interface AlertItem {
description: string
alarm_level_code: string
alarm_status: string
alarm_biz_id: string
}
interface Props {
riskStatistics?: any
dangerDetail?: AlertItem[]
park?: string
campus_id?: string
}
const tableTitle = [
{
name: '园区名称',
key: 'campus_name'
},
{
name: '累计培训次数',
key: 'examtimes'
},
{
name: '参与总人次',
key: 'exampeoplenum'
},
{
name: '累计培训时长',
key: 'examduration'
},
{
name: '平均通过率',
key: 'exampassrate'
}
]
// 图表引用
const barChartOption = ref({
legend: {
top: '10%',
right: '12%',
orient: 'vertical' as const,
textStyle: {
color: '#ffffff',
fontSize: '11px'
}
},
grid: {
left: '5%',
right: '30%',
top: '10%',
bottom: '15%'
},
xAxis: {
type: 'category' as const,
data: [],
axisLabel: {
color: '#ffffff',
fontSize: 10
},
axisLine: {
lineStyle: { color: '#334155' }
}
},
yAxis: {
type: 'value' as const,
axisLabel: {
color: '#ffffff',
fontSize: 10
},
axisLine: {
lineStyle: { color: '#334155' }
},
splitLine: {
lineStyle: { color: '#334155' }
}
},
series: [
{
name: '未开始数量',
type: 'bar' as const,
data: [],
itemStyle: { color: rgbToHex(99, 196, 251) },
barWidth: '8%',
label: {
show: true,
position: 'top' as const,
color: '#ffffff',
fontSize: 12,
fontWeight: 'bold' as const,
formatter: '{c}'
}
},
{
name: '进行中数量',
type: 'bar' as const,
data: [],
itemStyle: { color: rgbToHex(251, 246, 85) },
barWidth: '8%',
label: {
show: true,
position: 'top' as const,
color: '#ffffff',
fontSize: 12,
fontWeight: 'bold' as const,
formatter: '{c}'
}
},
{
name: '已完成数量',
type: 'bar' as const,
data: [],
itemStyle: { color: rgbToHex(200, 69, 237) },
barWidth: '8%',
label: {
show: true,
position: 'top' as const,
color: '#ffffff',
fontSize: 12,
fontWeight: 'bold' as const,
formatter: '{c}'
}
}
]
})
const dataList = ref<AlertItem[]>([
])
const props = defineProps<Props>()
// 图表引用
const riskChart = ref<HTMLElement | null>(null)
let chartInstance: echarts.ECharts | null = null
// 初始化饼图
const initPieChart = async () => {
if (!riskChart.value) return
chartInstance = echarts.init(riskChart.value)
const colors = [
[
{ offset: 0, color: '#ffb74d' },
{ offset: 0.3, color: '#ff9800' },
{ offset: 0.7, color: '#f57c00' },
{ offset: 1, color: '#e65100' }
],
[
{ offset: 0, color: '#64b5f6' },
{ offset: 0.3, color: '#42a5f5' },
{ offset: 0.7, color: '#2196f3' },
{ offset: 1, color: '#1976d2' }
],
[
{ offset: 0, color: '#81c784' },
{ offset: 0.3, color: '#66bb6a' },
{ offset: 0.7, color: '#4caf50' },
{ offset: 1, color: '#388e3c' }
]
]
const res = await getDrillSum(props.campus_id || '')
const option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0, 0, 0, 0.8)',
borderColor: '#4a9eff',
borderWidth: 1,
textStyle: {
color: '#ffffff'
},
formatter: function (params: any) {
return `${params.data.name}<br/>完成率: ${params.data.value}%`
}
},
series: [
{
name: '园区演练完成率',
type: 'pie',
radius: ['30%', '70%'],
center: ['50%', '50%'],
data: res.records.map((item, index) => (
{
value: item.rate,
name: item.campus_name,
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: colors[index % 3]
}
}
}
))
// [
// {
// value: 100,
// name: '西安创新院',
// itemStyle: {
// color: {
// type: 'radial',
// x: 0.5,
// y: 0.5,
// r: 0.8,
// colorStops: [
// { offset: 0, color: '#ffb74d' },
// { offset: 0.3, color: '#ff9800' },
// { offset: 0.7, color: '#f57c00' },
// { offset: 1, color: '#e65100' }
// ]
// }
// }
// },
// {
// value: 63,
// name: '北京横毅大厦',
// itemStyle: {
// color: {
// type: 'radial',
// x: 0.5,
// y: 0.5,
// r: 0.8,
// colorStops: [
// { offset: 0, color: '#64b5f6' },
// { offset: 0.3, color: '#42a5f5' },
// { offset: 0.7, color: '#2196f3' },
// { offset: 1, color: '#1976d2' }
// ]
// }
// }
// },
// {
// value: 60,
// name: '重庆产业大厦',
// itemStyle: {
// color: {
// type: 'radial',
// x: 0.5,
// y: 0.5,
// r: 0.8,
// colorStops: [
// { offset: 0, color: '#81c784' },
// { offset: 0.3, color: '#66bb6a' },
// { offset: 0.7, color: '#4caf50' },
// { offset: 1, color: '#388e3c' }
// ]
// }
// }
// }
// ]
,
label: {
show: true,
position: 'inside',
formatter: function (params: any) {
return `${params.data.name}\n${params.data.value}%`
},
fontSize: 12,
color: '#ffffff',
fontWeight: 'bold',
textShadowColor: 'rgba(0, 0, 0, 0.8)',
textShadowBlur: 2
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
chartInstance.setOption(option)
}
// 销毁图表
const destroyChart = () => {
if (chartInstance) {
chartInstance.dispose()
chartInstance = null
}
}
const initBarChart = async () => {
try {
const res = await getZBDangerSum(props.campus_id || '')
// 更新图表数据
const newOption = {
...barChartOption.value,
xAxis: {
...barChartOption.value.xAxis,
data: res.records.map((item: any) => item.campus_name)
},
series: [
{
...barChartOption.value.series[0],
data: res.records.map((item: any) => item.ywc)
},
{
...barChartOption.value.series[1],
data: res.records.map((item: any) => item.jxz)
},
{
...barChartOption.value.series[2],
data: res.records.map((item: any) => item.wks)
}
]
}
barChartOption.value = newOption
console.log('Bar chart data updated:', {
xAxis: barChartOption.value.xAxis.data,
series: barChartOption.value.series.map(s => ({ name: s.name, data: s.data }))
})
} catch (error) {
console.error('Failed to load bar chart data:', error)
}
}
// 监听标签页切换
watchEffect(async () => {
if (activeTab.value === '应急预案及演练') {
initPieChart()
} else {
destroyChart()
}
if (activeTab.value === '高危作业') {
initBarChart()
}
if (activeTab.value === '安全培训考试') {
const res = await getExamSum(props.campus_id || '')
dataList.value = res.records
}
})
// 监听数据变化，更新图表
watch(() => props.riskStatistics, (newVal) => {
console.log('riskStatistics changed:', { newVal })
if (newVal) {
refreshCharts(newVal)
}
}, { deep: true })
// 监听数据变化，更新图表
watch(() => props.dangerDetail, (newVal) => {
console.log('dangerDetail changed:', { newVal })
}, { deep: true })
// 监听数据变化，更新图表
watch(() => props.dangerDetail, (newVal) => {
console.log('dangerDetail changed:', { newVal })
if (newVal) {
dataList.value = newVal
}
}, { deep: true })
// 更新图表数据
const refreshCharts = (riskStatistics: any): void => {
if (!riskStatistics || !Array.isArray(riskStatistics)) {
console.warn('riskStatistics is undefined, null, or not an array')
return
}
// 计算各园区的完成率
const chartData = riskStatistics.map((item: any, index: number) => {
const finishCount = Number(item.finishCount) || 0
const participateCount = Number(item.participateCount) || 0
const completionRate = participateCount > 0 ? Math.round((finishCount / participateCount) * 100) : 0
// 为每个园区分配不同的颜色
const colors = ['#ef4444', '#10b981', '#eab308', '#3b82f6', '#8b5cf6', '#f59e0b', '#06b6d4', '#84cc16']
const color = colors[index % colors.length]
return {
value: completionRate,
name: item.csmpus_name || `园区${index + 1}`,
finishCount: finishCount,
participateCount: participateCount,
itemStyle: { color: color }
}
})
console.log("Updated chart data:", chartData)
}
const handleTabClick = async (tab: TabType) => {
activeTab.value = tab
emit('tabChange', tab)
}
onMounted(() => {
// 如果没有传入数据，设置默认数据
if (!props.riskStatistics) {
const defaultData = [
{
csmpus_name: "雄安新区总部",
finishCount: "234",
participateCount: "300"
},
{
csmpus_name: "雄安二区总部",
finishCount: "180",
participateCount: "250"
},
{
csmpus_name: "雄安三区总部",
finishCount: "156",
participateCount: "200"
}
]
refreshCharts(defaultData)
}
// 如果当前是高危作业标签页，初始化柱状图
if (activeTab.value === '高危作业') {
nextTick(() => {
initBarChart()
})
}
})
// 组件卸载时销毁图表
onUnmounted(() => {
destroyChart()
})
</script>
<style scoped lang="scss">
.left-bottom {
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;
flex: 1;
.panel-title {
margin: 4px 20px 0;
font-size: 0.8rem;
font-weight: bold;
color: #fff;
}
.tabs {
display: inline-flex;
align-items: center;
column-gap: 8px;
}
.tab {
padding: 2px 10px;
color: #fff;
cursor: pointer;
border-radius: 4px;
transition: all 0.2s ease-in-out;
user-select: none;
}
.tab:hover {
color: #1afb8f;
}
.tab.active {
color: #1afb8f;
background: rgb(26 251 143 / 12%);
border: 1px solid rgb(26 251 143 / 35%);
}
.divider {
margin: 0 2px;
color: #94a3b8;
}
.bottom-card-risk {
display: flex;
flex-direction: column;
.bottom-card-title {
display: flex;
margin-top: 5px;
margin-left: -15%;
flex-direction: column;
align-items: center;
}
}
.donut-chart-with-labels {
width: 30vw;
height: 30vh;
margin-left: 2vw;
}
.risk-chart {
width: 30vw;
height: 30vh;
margin-left: 2vw;
}
}
@media (width <=1024px) {
.left-bottom .donut-chart-with-labels,
.left-bottom .risk-chart {
width: 35vw;
height: 35vh;
}
}
@media (width <=768px) {
.left-bottom {
.tabs .tab {
padding: 1px 8px;
font-size: 0.7rem;
}
.donut-chart-with-labels,
.risk-chart {
width: 40vw;
height: 40vh;
margin-left: 1vw;
}
}
}
@media (width <=480px) {
.left-bottom .donut-chart-with-labels,
.left-bottom .risk-chart {
width: 45vw;
height: 45vh;
margin-left: 0.5vw;
}
}
</style>

818
src/views/screen/components/RiskStatisticsPanel.vue
View File

@@ -2,485 +2,130 @@
<div class="left-bottom"> <div class="left-bottom">
<div class="panel-title"> <div class="panel-title">
<div class="tabs"> <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="divider">|</span>
<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>
</div> </div>
</div> </div>
<img style="margin: 8px 0" src="@/assets/images/title_border_line.png" /> <img class="title-line" src="@/assets/images/title_border_line.png" />
<div class="bottom-card-risk">
<div class="bottom-card-title"> <div class="chart-grid">
<span>{{ activeTab === '高危作业' ? '各园区统计' : activeTab === '安全培训考试' ? '安全培训考试' : '园区演练完成率' }}</span> <div class="chart-card" v-for="item in currentCharts" :key="`${activeTab}-${item.title}`">
<img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" /> <div class="chart-title">{{ item.title }}</div>
<div class="chart-content">
<div class="chart-wrapper">
<Echart class="donut-chart" :options="buildOption(item)" />
<div class="chart-center">
<div class="center-title">总数</div>
<div class="center-value">{{ item.total }}</div>
</div>
</div>
<div class="legend">
<div class="legend-label-row">
<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>
<div class="legend-value">
{{ item.status[status.key] }}
</div>
</div>
</div>
</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>
</div> </div>
<!-- <Echart v-if="activeTab !== '高危作业'" :options="riskChartOption" class="donut-chart-with-labels" height="30vh" /> -->
<AlertList maxHeight="40vh" v-if="activeTab === '安全培训考试'" :table-title="tableTitle" style="margin-left: 1vw;"
:list-data="dataList" />
<div style="width: 80%; padding-left: 1vw;">
<Echart v-if="activeTab === '高危作业'" style="height: 30vh" :options="barChartOption" class="bar-chart" />
</div>
<div ref="riskChart" class="risk-chart" v-if="activeTab === '应急预案及演练'"></div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, watch, nextTick } from 'vue' import { computed, ref, watch } from 'vue'
import AlertList from './AlertList.vue' import { ElTooltip } from 'element-plus'
import { rgbToHex } from '@/utils/color' import type { EChartsOption } from 'echarts'
import * as echarts from 'echarts'
import { getDrillSum, getExamSum, getZBDangerSum } from '../report' type TabType = '安全类' | '工程类'
type TabType = '高危作业' | '安全培训考试' | '应急预案及演练' type StatusKey = 'notStarted' | 'inProgress' | 'done' | 'voided'
const activeTab = ref<TabType>('高危作业')
const emit = defineEmits<{ interface ChartItem {
tabChange: [tab: TabType] title: string
}>() total: number
interface AlertItem { status: Record<StatusKey, number>
description: string
alarm_level_code: string
alarm_status: string
alarm_biz_id: string
}
interface Props {
riskStatistics?: any
dangerDetail?: AlertItem[]
park?: string
campus_id?: string
} }
const tableTitle = [ const statusList: { key: StatusKey; label: string; color: string }[] = [
{ { key: 'notStarted', label: '未开始', color: '#2a59ff' },
name: '园区名称', { key: 'inProgress', label: '进行中', color: '#ff8a00' },
key: 'campus_name' { key: 'done', label: '已完成', color: '#1bd9ff' },
}, { key: 'voided', label: '已作废', color: '#9fa0a6' }
{
name: '累计培训次数',
key: 'examtimes'
},
{
name: '参与总人次',
key: 'exampeoplenum'
},
{
name: '累计培训时长',
key: 'examduration'
},
{
name: '平均通过率',
key: 'exampassrate'
}
] ]
// 图表引用 const defaultChart: ChartItem[] = [
const barChartOption = ref({ { title: '每日检查(维保类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
legend: { { title: '每月检查(维保类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
top: '10%', { title: '每年检查(维保类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
right: '12%', { title: '每日检查(巡检类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
orient: 'vertical' as const, { title: '每月检查(巡检类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
textStyle: { { title: '每年检查(巡检类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } }
color: '#ffffff', ]
fontSize: '11px'
const tabCharts = ref<Record<TabType, ChartItem[]>>({
安全类: [...defaultChart],
工程类: [...defaultChart]
})
const props = defineProps<{
riskStatistics?: Record<TabType, ChartItem[]>
}>()
const activeTab = ref<TabType>('安全类')
const emit = defineEmits<{ tabChange: [tab: TabType] }>()
// 监听props变化，更新图表数据
watch(() => props.riskStatistics, (newData) => {
if (newData) {
tabCharts.value = {
安全类: newData['安全类'] ? JSON.parse(JSON.stringify(newData['安全类'])) : [...defaultChart],
工程类: newData['工程类'] ? JSON.parse(JSON.stringify(newData['工程类'])) : [...defaultChart]
} }
}, }
grid: { }, { deep: true, immediate: true })
left: '5%',
right: '30%', const currentCharts = computed(() => tabCharts.value[activeTab.value])
top: '10%',
bottom: '15%' const buildOption = (item: ChartItem): EChartsOption => ({
}, backgroundColor: 'transparent',
xAxis: { tooltip: { show: false },
type: 'category' as const,
data: [],
axisLabel: {
color: '#ffffff',
fontSize: 10
},
axisLine: {
lineStyle: { color: '#334155' }
}
},
yAxis: {
type: 'value' as const,
axisLabel: {
color: '#ffffff',
fontSize: 10
},
axisLine: {
lineStyle: { color: '#334155' }
},
splitLine: {
lineStyle: { color: '#334155' }
}
},
series: [ series: [
{ {
name: '未开始数量', type: 'pie' as const,
type: 'bar' as const, radius: ['70%', '90%'],
data: [], center: ['50%', '50%'],
itemStyle: { color: rgbToHex(99, 196, 251) }, startAngle: 90,
barWidth: '8%', avoidLabelOverlap: false,
label: { label: { show: false },
show: true, labelLine: { show: false },
position: 'top' as const, data: [
color: '#ffffff', { value: item.status.notStarted, name: '未开始', itemStyle: { color: '#2a59ff' }, label: { show: false } },
fontSize: 12, { value: item.status.inProgress, name: '进行中', itemStyle: { color: '#ff8a00' }, label: { show: false } },
fontWeight: 'bold' as const, { value: item.status.done, name: '已完成', itemStyle: { color: '#1bd9ff' }, label: { show: false } },
formatter: '{c}' { value: item.status.voided, name: '已作废', itemStyle: { color: '#9fa0a6' }, label: { show: false } }
} ],
}, emphasis: { scale: true, scaleSize: 4 }
{
name: '进行中数量',
type: 'bar' as const,
data: [],
itemStyle: { color: rgbToHex(251, 246, 85) },
barWidth: '8%',
label: {
show: true,
position: 'top' as const,
color: '#ffffff',
fontSize: 12,
fontWeight: 'bold' as const,
formatter: '{c}'
}
},
{
name: '已完成数量',
type: 'bar' as const,
data: [],
itemStyle: { color: rgbToHex(200, 69, 237) },
barWidth: '8%',
label: {
show: true,
position: 'top' as const,
color: '#ffffff',
fontSize: 12,
fontWeight: 'bold' as const,
formatter: '{c}'
}
} }
] ]
}) })
const dataList = ref<AlertItem[]>([ const handleTabClick = (tab: TabType) => {
]) if (activeTab.value === tab) return
const props = defineProps<Props>()
// 图表引用
const riskChart = ref<HTMLElement | null>(null)
let chartInstance: echarts.ECharts | null = null
// 初始化饼图
const initPieChart = async () => {
if (!riskChart.value) return
chartInstance = echarts.init(riskChart.value)
const colors = [
[
{ offset: 0, color: '#ffb74d' },
{ offset: 0.3, color: '#ff9800' },
{ offset: 0.7, color: '#f57c00' },
{ offset: 1, color: '#e65100' }
],
[
{ offset: 0, color: '#64b5f6' },
{ offset: 0.3, color: '#42a5f5' },
{ offset: 0.7, color: '#2196f3' },
{ offset: 1, color: '#1976d2' }
],
[
{ offset: 0, color: '#81c784' },
{ offset: 0.3, color: '#66bb6a' },
{ offset: 0.7, color: '#4caf50' },
{ offset: 1, color: '#388e3c' }
]
]
const res = await getDrillSum(props.campus_id || '')
const option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0, 0, 0, 0.8)',
borderColor: '#4a9eff',
borderWidth: 1,
textStyle: {
color: '#ffffff'
},
formatter: function (params: any) {
return `${params.data.name}<br/>完成率: ${params.data.value}%`
}
},
series: [
{
name: '园区演练完成率',
type: 'pie',
radius: ['30%', '70%'],
center: ['50%', '50%'],
data: res.records.map((item, index) => (
{
value: item.rate,
name: item.campus_name,
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: colors[index % 3]
}
}
}
))
// [
// {
// value: 100,
// name: '西安创新院',
// itemStyle: {
// color: {
// type: 'radial',
// x: 0.5,
// y: 0.5,
// r: 0.8,
// colorStops: [
// { offset: 0, color: '#ffb74d' },
// { offset: 0.3, color: '#ff9800' },
// { offset: 0.7, color: '#f57c00' },
// { offset: 1, color: '#e65100' }
// ]
// }
// }
// },
// {
// value: 63,
// name: '北京横毅大厦',
// itemStyle: {
// color: {
// type: 'radial',
// x: 0.5,
// y: 0.5,
// r: 0.8,
// colorStops: [
// { offset: 0, color: '#64b5f6' },
// { offset: 0.3, color: '#42a5f5' },
// { offset: 0.7, color: '#2196f3' },
// { offset: 1, color: '#1976d2' }
// ]
// }
// }
// },
// {
// value: 60,
// name: '重庆产业大厦',
// itemStyle: {
// color: {
// type: 'radial',
// x: 0.5,
// y: 0.5,
// r: 0.8,
// colorStops: [
// { offset: 0, color: '#81c784' },
// { offset: 0.3, color: '#66bb6a' },
// { offset: 0.7, color: '#4caf50' },
// { offset: 1, color: '#388e3c' }
// ]
// }
// }
// }
// ]
,
label: {
show: true,
position: 'inside',
formatter: function (params: any) {
return `${params.data.name}\n${params.data.value}%`
},
fontSize: 12,
color: '#ffffff',
fontWeight: 'bold',
textShadowColor: 'rgba(0, 0, 0, 0.8)',
textShadowBlur: 2
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
chartInstance.setOption(option)
}
// 销毁图表
const destroyChart = () => {
if (chartInstance) {
chartInstance.dispose()
chartInstance = null
}
}
const initBarChart = async () => {
try {
const res = await getZBDangerSum(props.campus_id || '')
// 更新图表数据
const newOption = {
...barChartOption.value,
xAxis: {
...barChartOption.value.xAxis,
data: res.records.map((item: any) => item.campus_name)
},
series: [
{
...barChartOption.value.series[0],
data: res.records.map((item: any) => item.ywc)
},
{
...barChartOption.value.series[1],
data: res.records.map((item: any) => item.jxz)
},
{
...barChartOption.value.series[2],
data: res.records.map((item: any) => item.wks)
}
]
}
barChartOption.value = newOption
console.log('Bar chart data updated:', {
xAxis: barChartOption.value.xAxis.data,
series: barChartOption.value.series.map(s => ({ name: s.name, data: s.data }))
})
} catch (error) {
console.error('Failed to load bar chart data:', error)
}
}
// 监听标签页切换
watchEffect(async () => {
if (activeTab.value === '应急预案及演练') {
initPieChart()
} else {
destroyChart()
}
if (activeTab.value === '高危作业') {
initBarChart()
}
if (activeTab.value === '安全培训考试') {
const res = await getExamSum(props.campus_id || '')
dataList.value = res.records
}
})
// 监听数据变化，更新图表
watch(() => props.riskStatistics, (newVal) => {
console.log('riskStatistics changed:', { newVal })
if (newVal) {
refreshCharts(newVal)
}
}, { deep: true })
// 监听数据变化，更新图表
watch(() => props.dangerDetail, (newVal) => {
console.log('dangerDetail changed:', { newVal })
}, { deep: true })
// 监听数据变化，更新图表
watch(() => props.dangerDetail, (newVal) => {
console.log('dangerDetail changed:', { newVal })
if (newVal) {
dataList.value = newVal
}
}, { deep: true })
// 更新图表数据
const refreshCharts = (riskStatistics: any): void => {
if (!riskStatistics || !Array.isArray(riskStatistics)) {
console.warn('riskStatistics is undefined, null, or not an array')
return
}
// 计算各园区的完成率
const chartData = riskStatistics.map((item: any, index: number) => {
const finishCount = Number(item.finishCount) || 0
const participateCount = Number(item.participateCount) || 0
const completionRate = participateCount > 0 ? Math.round((finishCount / participateCount) * 100) : 0
// 为每个园区分配不同的颜色
const colors = ['#ef4444', '#10b981', '#eab308', '#3b82f6', '#8b5cf6', '#f59e0b', '#06b6d4', '#84cc16']
const color = colors[index % colors.length]
return {
value: completionRate,
name: item.csmpus_name || `园区${index + 1}`,
finishCount: finishCount,
participateCount: participateCount,
itemStyle: { color: color }
}
})
console.log("Updated chart data:", chartData)
}
const handleTabClick = async (tab: TabType) => {
activeTab.value = tab activeTab.value = tab
emit('tabChange', tab) emit('tabChange', tab)
} }
onMounted(() => {
// 如果没有传入数据，设置默认数据
if (!props.riskStatistics) {
const defaultData = [
{
csmpus_name: "雄安新区总部",
finishCount: "234",
participateCount: "300"
},
{
csmpus_name: "雄安二区总部",
finishCount: "180",
participateCount: "250"
},
{
csmpus_name: "雄安三区总部",
finishCount: "156",
participateCount: "200"
}
]
refreshCharts(defaultData)
}
// 如果当前是高危作业标签页，初始化柱状图
if (activeTab.value === '高危作业') {
nextTick(() => {
initBarChart()
})
}
})
// 组件卸载时销毁图表
onUnmounted(() => {
destroyChart()
})
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@@ -528,64 +173,241 @@ onUnmounted(() => {
color: #94a3b8; color: #94a3b8;
} }
.bottom-card-risk { .title-line {
margin: 8px 0;
}
.chart-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
padding: 0 12px 12px;
width: 70%;
// margin: 0 auto;
}
.chart-card {
background: rgba(18, 34, 63, 0.65);
border: 1px solid rgba(58, 112, 179, 0.55);
border-radius: 10px;
padding: 5px 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
box-shadow: 0 4px 12px rgb(0 0 0 / 25%);
}
.bottom-card-title { .chart-title {
display: flex; width: 100%;
margin-top: 5px; color: #ffffff;
margin-left: -15%; font-size: 13px;
flex-direction: column; text-align: center;
align-items: center; margin-bottom: 6px;
}
.chart-content {
display: flex;
align-items: center;
// justify-content: flex-start;
// gap: 10px;
width: 100%;
}
.chart-wrapper {
position: relative;
}
.donut-chart {
width: 100%;
height: 100% !important; // 强制覆盖 EChart 默认高度，避免过高
}
.chart-center {
pointer-events: none;
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #ffffff;
text-align: center;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.legend {
// display: flex;
// flex-direction: column;
// gap: 6px;
// margin-top: 0;
// width: auto;
// justify-content: space-between;
}
.legend-label-row {
flex-wrap: nowrap;
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: 2px;
white-space: nowrap;
}
.legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
// display: inline-block;
}
.legend-label {
color: #cbd5e1;
white-space: nowrap;
}
.legend-value-row {
display: none;
gap: 20px;
color: #ffffff;
font-size: 14px;
font-weight: 600;
justify-content: flex-start;
}
.legend-value {
min-width: 14px;
text-align: center;
}
}
/* 简化版尺寸适配：只控制字体大小和图表尺寸 */
@media (width <= 1680px) {
.left-bottom {
.panel-title {
font-size: 0.75rem;
}
.tab {
padding: 2px 8px;
font-size: 0.78rem;
}
.chart-title {
font-size: 12px;
}
.legend-label-row {
font-size: 11px;
} }
} }
.donut-chart-with-labels {
width: 30vw;
height: 30vh;
margin-left: 2vw;
}
.risk-chart {
width: 30vw;
height: 30vh;
margin-left: 2vw;
}
} }
@media (width <=1024px) { @media (width <= 1400px) {
.left-bottom .donut-chart-with-labels,
.left-bottom .risk-chart {
width: 35vw;
height: 35vh;
}
}
@media (width <=768px) {
.left-bottom { .left-bottom {
.tabs .tab { .panel-title {
padding: 1px 8px;
font-size: 0.7rem; font-size: 0.7rem;
} }
.donut-chart-with-labels, .tab {
.risk-chart { padding: 1px 6px;
width: 40vw; font-size: 0.72rem;
height: 40vh; }
margin-left: 1vw;
.chart-title {
font-size: 11px;
}
.legend-label-row {
font-size: 10px;
} }
} }
} }
@media (width <=480px) { @media (width <= 1200px) {
.left-bottom {
.panel-title {
font-size: 0.65rem;
}
.left-bottom .donut-chart-with-labels, .tab {
.left-bottom .risk-chart { padding: 1px 4px;
width: 45vw; font-size: 0.68rem;
height: 45vh; }
margin-left: 0.5vw;
.chart-title {
font-size: 10px;
}
.legend-label-row {
font-size: 9px;
}
} }
} }
// @media (width >3000px) {
.left-bottom .chart-content {
flex-direction: column;
align-items: center;
gap: 10px;
}
.left-bottom .legend {
// align-items: center;
width: 100%;
}
.left-bottom .legend-label {
display: inline;
}
.left-bottom .legend-item {
flex-direction: column;
align-items: center;
gap: 2px;
white-space: nowrap;
}
.left-bottom .legend-label-row .legend-value {
display: block;
}
// .left-bottom .legend-value-row {
// display: none;
// }
.left-bottom .chart-wrapper {
flex-basis: 60px;
width: 60px;
height: 60px;
}
// }
// @media (width <=1024px) {
// .left-bottom .chart-grid {
// grid-template-columns: repeat(2, minmax(0, 1fr));
// }
// .left-bottom .donut-chart {
// height: 80px !important;
// }
// }
// @media (width <=768px) {
// .left-bottom .chart-grid {
// grid-template-columns: repeat(1, minmax(0, 1fr));
// }
// .left-bottom .chart-card {
// padding: 5px;
// }
// }
</style> </style>

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

@@ -3,7 +3,7 @@
<!-- 顶部标题栏 --> <!-- 顶部标题栏 -->
<div class="header-container"> <div class="header-container">
<div class="header-left"> <div class="header-left">
<div class="back-button" @click="openRegionSelector"> 总部 <div class="back-button" @click="openRegionSelector"> 集团
<span>···</span> <span>···</span>
</div> </div>
</div> </div>
@@ -15,52 +15,46 @@
</div> </div>
</div> </div>
<!-- 天气预报 --> <!-- 天气预报 -->
<WeatherWarning/> <WeatherWarning />
<!-- 主内容区 --> <!-- 主内容区 -->
<div class="content-container"> <div class="content-container">
<div class="left-wrapper"> <div class="left-wrapper">
<OverviewPanel <OverviewPanel :totalCount="dashboardData?.totalCount || 0"
:totalCount="dashboardData?.totalCount || 0"
:formalEmployeeCount="dashboardData?.formalEmployeeCount || 0" :formalEmployeeCount="dashboardData?.formalEmployeeCount || 0"
:externalStaffCount="dashboardData?.externalStaffCount || 0" :externalStaffCount="dashboardData?.externalStaffCount || 0" :visitorCount="dashboardData?.visitorCount || 0"
:visitorCount="dashboardData?.visitorCount || 0" :parkStatistics="dashboardData?.parkStatistics" />
:parkStatistics="dashboardData?.parkStatistics"/> <RiskStatisticsPanel :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
<RiskStatisticsPanel @tab-change="handleRiskTabChange" :campus_id="query.campus_id" />
:riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
@tab-change="handleRiskTabChange" :campus_id="query.campus_id"/>
</div> </div>
<div class="right-wrapper"> <div class="right-wrapper">
<HighRiskAlertPanel <HighRiskAlertPanel :alertData="dashboardData?.alertData" :alertDetails="dashboardData?.alertData.details"
:alertData="dashboardData?.alertData" :alertDetails="dashboardData?.alertData.details" :sourceIndex="sourceIndex" />
:sourceIndex="sourceIndex"/> <TimeoutWorkOrderPanel :timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
<TimeoutWorkOrderPanel :alertDetails="dashboardData?.timeoutWorkOrders.details" :sourceIndex="sourceIndex" />
:timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
:alertDetails="dashboardData?.timeoutWorkOrders.details" :sourceIndex="sourceIndex"/>
</div> </div>
<HiddenDangerPanel :hiddenDangerData="dashboardData?.hiddenDangerData"/> <HiddenDangerPanel :hiddenDangerData="dashboardData?.hiddenDangerData" />
</div> </div>
</div> </div>
<!-- 区域选择弹窗 --> <!-- 区域选择弹窗 -->
<RegionSelector <RegionSelector v-model="regionSelectorVisible" :modelSelected="selectedRegion" :regions="regionOption"
v-model="regionSelectorVisible" :modelSelected="selectedRegion" :regions="regionOption" @change="onRegionChange" />
@change="onRegionChange"/>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {getTableList, getTableData} from './report' import { getTableList, getTableData, getWorkOrderStatistics } from './report'
import {ref, onMounted, watch, onUnmounted} from 'vue' import { ref, onMounted, watch, onUnmounted } from 'vue'
import {useRouter} from 'vue-router' import { useRouter } from 'vue-router'
import RegionSelector from './components/RegionSelector.vue' import RegionSelector from './components/RegionSelector.vue'
import WeatherWarning from './components/WeatherWarning.vue' import WeatherWarning from './components/WeatherWarning.vue'
import {getDashboardData, getAlertDetails, type DashboardData} from '@/api/dashboard' import { getDashboardData, getAlertDetails, type DashboardData } from '@/api/dashboard'
import OverviewPanel from './components/OverviewPanel.vue' import OverviewPanel from './components/OverviewPanel.vue'
import RiskStatisticsPanel from './components/RiskStatisticsPanel.vue' import RiskStatisticsPanel from './components/RiskStatisticsPanel.vue'
import HighRiskAlertPanel from './components/HighRiskAlertPanel.vue' import HighRiskAlertPanel from './components/HighRiskAlertPanel.vue'
import TimeoutWorkOrderPanel from './components/TimeoutWorkOrderPanel.vue' import TimeoutWorkOrderPanel from './components/TimeoutWorkOrderPanel.vue'
import HiddenDangerPanel from './components/HiddenDangerPanel.vue' import HiddenDangerPanel from './components/HiddenDangerPanel.vue'
import {error} from "echarts/types/src/util/log"; import { error } from "echarts/types/src/util/log";
// 类型定义 // 类型定义
interface AlertItem { interface AlertItem {
@@ -73,7 +67,7 @@ interface RegionItem {
code: string code: string
} }
type TabType = '高危作业' | '安全培训考试' | '安全培训考试' type TabType = '安全类' | '工程类'
// 响应式数据 // 响应式数据
const currentDateTime = ref<string>('') const currentDateTime = ref<string>('')
@@ -95,7 +89,10 @@ const visitorCount = ref<number>(0)
// 总体概览-各园区统计 // 总体概览-各园区统计
const parkStatistics = ref<any>() const parkStatistics = ref<any>()
// 高危作业/安全培训考试/安全培训考试 // 高危作业/安全培训考试/安全培训考试
const riskStatistics = ref<any>() const riskStatistics = ref<any>({
安全类: [],
工程类: []
})
const dangerDetail = ref<any>() const dangerDetail = ref<any>()
// 动画相关的状态 // 动画相关的状态
@@ -220,7 +217,7 @@ onMounted(async () => {
timeUpdateTimerId.value = setInterval(updateTime, 1000) timeUpdateTimerId.value = setInterval(updateTime, 1000)
// //
try { try {
let {records} = await getTableList( let { records } = await getTableList(
'park_info_list' 'park_info_list'
) )
// records = [ // records = [
@@ -395,7 +392,7 @@ const loadDashboardData = async (): Promise<void> => {
} catch (error) { } catch (error) {
console.error('获取超期工单数据失败:', error) console.error('获取超期工单数据失败:', error)
} }
handleRiskTabChange('高危作业') handleRiskTabChange('安全类')
handleHiddenDangerPannelData(query) handleHiddenDangerPannelData(query)
console.log('dashboardData.value>>>>>>>>>>', dashboardData.value); console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
} }
@@ -434,12 +431,17 @@ const handleHiddenDangerPannelData = (query) => {
// 获取隐患排查治理数据 // 获取隐患排查治理数据
getTableList('risk_status_count', query).then(res => { getTableList('risk_status_count', query).then(res => {
if (res.records && res.records.length > 0) { 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) const record = res.records[0]
_data.processing = _data.processing + Number(res.records[0].processingCnt) _data.overdue = Number(record.overdueCnt) || 0
_data.pending = _data.pending _data.processed = Number(record.processedCnt) || 0
_data.processing = Number(record.processingCnt) || 0
_data.pending = 0 // 接口没有返回pending，设为0
_data.flag = true _data.flag = true
console.log('risk_status_count 接口返回数据:', record)
console.log('处理后的 _data:', _data)
if (_data2.flag) { if (_data2.flag) {
// 合并数据 // 合并数据
console.log("请求系统和第三方成功，合并数据", _data, _data2); console.log("请求系统和第三方成功，合并数据", _data, _data2);
@@ -448,30 +450,44 @@ const handleHiddenDangerPannelData = (query) => {
dashboardData.value.hiddenDangerData.general = generalCnt dashboardData.value.hiddenDangerData.general = generalCnt
dashboardData.value.hiddenDangerData.major = majorCnt 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 overdueCnt, processedCnt, processingCnt, pendingCnt
let processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2) if (_data2.overdue > 1 || _data2.processed > 1 || _data2.processing > 1) {
let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2) // 第三方数据可能是百分比，直接使用系统数据（因为系统数据更准确）
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 = { dashboardData.value.hiddenDangerData.progress = {
overdue: overdueCnt, overdue: overdueCnt,
processed: processedCnt, processed: processedCnt,
processing: processingCnt, processing: processingCnt,
pending: pendingCnt, pending: pendingCnt,
} }
console.log('合并后的 progress:', dashboardData.value.hiddenDangerData.progress)
} else { } else {
console.log("请求系统成功，展示数据", _data, _data2); console.log("请求系统成功，展示数据", _data, _data2);
dashboardData.value.hiddenDangerData.general = _data.general dashboardData.value.hiddenDangerData.general = _data.general
dashboardData.value.hiddenDangerData.major = _data.major dashboardData.value.hiddenDangerData.major = _data.major
let totalCnt = _data.general + _data.major // 接口返回的已经是百分比，直接使用
// 显示系统数据
dashboardData.value.hiddenDangerData.progress = { dashboardData.value.hiddenDangerData.progress = {
overdue: (_data.overdue / totalCnt * 100).toFixed(2), overdue: _data.overdue.toFixed(2),
processed: (_data.processed / totalCnt * 100).toFixed(2), processed: _data.processed.toFixed(2),
processing: (_data.processing / totalCnt * 100).toFixed(2), processing: _data.processing.toFixed(2),
pending: (_data.pending / totalCnt * 100).toFixed(2), pending: _data.pending.toFixed(2),
} }
console.log('系统数据 progress:', dashboardData.value.hiddenDangerData.progress)
} }
} }
}) })
@@ -498,46 +514,46 @@ const handleHiddenDangerPannelData = (query) => {
// 获取隐患排查治理处理进度数据 // 获取隐患排查治理处理进度数据
getTableList('hidden_danger_process_progress', query).then(res => { getTableList('hidden_danger_process_progress', query).then(res => {
if (res.records && res.records.length > 0) { // if (res.records && res.records.length > 0) {
_data2.flag = true // _data2.flag = true
_data2.overdue = Number(res.records[0].overdue) / 100 * (_data2.general + _data2.major) // _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.processed = Number(res.records[0].processed) / 100 * (_data2.general + _data2.major)
_data2.processing = Number(res.records[0].processing) / 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) // _data2.pending = Number(res.records[0].pending) / 100 * (_data2.general + _data2.major)
if (_data.flag) { // if (_data.flag) {
console.log("请求第三方和系统成功，合并数据", _data, _data2); // console.log("请求第三方和系统成功，合并数据", _data, _data2);
// 合并数据 // // 合并数据
let generalCnt = _data.general + _data2.general // let generalCnt = _data.general + _data2.general
let majorCnt = _data.major + _data2.major // let majorCnt = _data.major + _data2.major
dashboardData.value.hiddenDangerData.general = generalCnt // dashboardData.value.hiddenDangerData.general = generalCnt
dashboardData.value.hiddenDangerData.major = majorCnt // dashboardData.value.hiddenDangerData.major = majorCnt
let totalCnt = generalCnt + majorCnt // let totalCnt = generalCnt + majorCnt
let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2) // let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2)
let processedCnt = ((_data.processed + _data2.processed) / 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 processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2)
let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2) // let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2)
dashboardData.value.hiddenDangerData.progress = { // dashboardData.value.hiddenDangerData.progress = {
overdue: overdueCnt, // overdue: overdueCnt,
processed: processedCnt, // processed: processedCnt,
processing: processingCnt, // processing: processingCnt,
pending: pendingCnt, // pending: pendingCnt,
} // }
} else { // } else {
//显示三方数据 // //显示三方数据
console.log("请求第三方成功，展示数据", _data, _data2); // console.log("请求第三方成功，展示数据", _data, _data2);
dashboardData.value.hiddenDangerData.general = _data2.general // dashboardData.value.hiddenDangerData.general = _data2.general
dashboardData.value.hiddenDangerData.major = _data2.major // dashboardData.value.hiddenDangerData.major = _data2.major
dashboardData.value.hiddenDangerData.progress = { // dashboardData.value.hiddenDangerData.progress = {
overdue: res.records[0].overdue, // overdue: res.records[0].overdue,
processed: res.records[0].processed, // processed: res.records[0].processed,
processing: res.records[0].processing, // processing: res.records[0].processing,
pending: res.records[0].pending, // pending: res.records[0].pending,
} // }
} // }
} // }
}).catch(error => { }).catch(error => {
console.error('获取隐患排查治理处理进度数据失败:', error) console.error('获取隐患排查治理处理进度数据失败:', error)
}) })
@@ -567,93 +583,82 @@ const handleHiddenDangerPannelData = (query) => {
const handleRiskTabChange = async (tab: TabType) => { const handleRiskTabChange = async (tab: TabType) => {
console.log('Tab changed to:', tab) console.log('Tab changed to:', tab)
try { try {
let code = '' let workOrderType = ''
switch (tab) { switch (tab) {
case '高危作业': case '安全类':
code = 'hazardous_operations' workOrderType = '安全生产'
break break
case '安全培训考试': case '工程类':
code = 'safety_assessment' workOrderType = '物业服务-工程'
break
case '安全培训考试':
code = 'security_training'
break break
default: default:
code = 'hazardous_operations' workOrderType = '安全生产'
} }
if (code == 'hazardous_operations') { // 同时获取维保任务和巡检任务的数据
// 根据不同的tab请求不同的接口 const [maintenanceResponse, inspectionResponse] = await Promise.all([
getTableList( getWorkOrderStatistics({workOrderType, taskType: '维保任务',campus_id: query.campus_id}).catch(error => {
code, console.error('获取维保任务数据失败:', error)
{...query, activeTab: tab} return { records: [] }
).then(response => { }),
// 更新风险统计数据 - 传递完整的数组数据用于饼图显示 getWorkOrderStatistics({workOrderType, taskType: '巡检任务',campus_id: query.campus_id}).catch(error => {
if (response.records && response.records.length > 0) { console.error('获取巡检任务数据失败:', error)
dangerDetail.value = response.records return { records: [] }
}
}).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'
// }
// ]
}
})
} 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"
}
]
}
}).catch(error => {
console.error('获取风险统计数据失败:', error)
}) })
])
// 周期映射
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) { } catch (error) {
console.error('获取风险统计数据失败:', error) console.error('获取风险统计数据失败:', error)
} }
@@ -664,7 +669,7 @@ const onRegionChange = (item: RegionItem): void => {
selectedRegion.value = item.name selectedRegion.value = item.name
router.push({ router.push({
path: '/screen/region', path: '/screen/region',
query: {region: item.name, regionCode: item.code} query: { region: item.name, regionCode: item.code }
}) })
} }
@@ -1231,19 +1236,19 @@ const timeOut1 = (): void => {
.left-top { .left-top {
padding: 0 5px; padding: 0 5px;
background-image: url('@/assets/images/screen/left_top_img.png'), background-image: url('@/assets/images/screen/left_top_img.png'),
url('@/assets/images/screen/left_center_img.png'), url('@/assets/images/screen/left_center_img.png'),
url('@/assets/images/screen/left_bottom_img.png'); url('@/assets/images/screen/left_bottom_img.png');
background-position: top center, background-position: top center,
left center, left center,
bottom center; bottom center;
/* 设置大小，注意中间的背景图应该覆盖整个容器 */ /* 设置大小，注意中间的背景图应该覆盖整个容器 */
background-repeat: no-repeat, no-repeat, no-repeat; background-repeat: no-repeat, no-repeat, no-repeat;
/* 设置位置 */ /* 设置位置 */
background-size: 100% 90px, background-size: 100% 90px,
cover, cover,
100% 68px; 100% 68px;
flex: 1; flex: 1;
/* 设置重复方式 */ /* 设置重复方式 */
@@ -1405,19 +1410,19 @@ const timeOut1 = (): void => {
.left-bottom { .left-bottom {
background-image: url('@/assets/images/screen/left_top_2_img.png'), background-image: url('@/assets/images/screen/left_top_2_img.png'),
url('@/assets/images/screen/left_center_img.png'), url('@/assets/images/screen/left_center_img.png'),
url('@/assets/images/screen/left_bottom_img.png'); url('@/assets/images/screen/left_bottom_img.png');
background-position: top center, background-position: top center,
left center, left center,
bottom center; bottom center;
/* 设置大小，注意中间的背景图应该覆盖整个容器 */ /* 设置大小，注意中间的背景图应该覆盖整个容器 */
background-repeat: no-repeat, no-repeat, no-repeat; background-repeat: no-repeat, no-repeat, no-repeat;
/* 设置位置 */ /* 设置位置 */
background-size: 100% 90px, background-size: 100% 90px,
cover, cover,
100% 68px; 100% 68px;
flex: 1; flex: 1;
/* 设置重复方式 */ /* 设置重复方式 */

20
src/views/screen/powerMonitoring.vue
View File

@@ -15,9 +15,9 @@
<div class="card-title">总设备数</div> <div class="card-title">总设备数</div>
<div class="card-value">{{ totalDevices.toLocaleString() }}</div> <div class="card-value">{{ totalDevices.toLocaleString() }}</div>
<div class="card-trend growth"> <div class="card-trend growth">
<svg class="trend-icon" viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor"> <!-- <svg class="trend-icon" viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor">
<path d="M868 545.5L536.1 163a31.96 31.96 0 0 0-48.3 0L156 545.5a7.97 7.97 0 0 0 6 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z" /> <path d="M868 545.5L536.1 163a31.96 31.96 0 0 0-48.3 0L156 545.5a7.97 7.97 0 0 0 6 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z" />
</svg> </svg> -->
<!-- <span>较上月增长 {{ totalDevicesGrowth }}%</span> --> <!-- <span>较上月增长 {{ totalDevicesGrowth }}%</span> -->
</div> </div>
</div> </div>
@@ -442,9 +442,9 @@ const fetchTotalDevices = async () => {
pageSize: 10 pageSize: 10
}; };
const response = await getPowerEnvDeviceTotalNum(params); const response = await getPowerEnvDeviceTotalNum(params);
debugger
if (response.records?.length > 0) { if (response.records?.length > 0) {
debugger
const total = parseInt(response.records[0].total || '0', 10); const total = parseInt(response.records[0].total || '0', 10);
totalDevices.value = total; totalDevices.value = total;
onlineDevices.value = total; // 在线设备数也用total onlineDevices.value = total; // 在线设备数也用total
@@ -462,8 +462,9 @@ const fetchAlarmDistribution = async () => {
pageSize: 10 pageSize: 10
}; };
const response = await getPowerEnvDeviceAlarmDistribution(params); const response = await getPowerEnvDeviceAlarmDistribution(params);
if (response.code === 0 && response.data?.records?.length > 0) { debugger
const record = response.data.records[0]; if (response.records?.length > 0) {
const record = response.records[0];
deviceTypeData.value = [ deviceTypeData.value = [
{ name: 'UPS', value: parseInt(record.ups_num || '0', 10) }, { name: 'UPS', value: parseInt(record.ups_num || '0', 10) },
{ name: '精密空调', value: parseInt(record.jmkt_num || '0', 10) }, { name: '精密空调', value: parseInt(record.jmkt_num || '0', 10) },
@@ -486,8 +487,9 @@ const fetchAlarmTrend = async () => {
pageSize: 100 // 可能需要获取更多数据 pageSize: 100 // 可能需要获取更多数据
}; };
const response = await getPowerEnvAlarmTrend(params); const response = await getPowerEnvAlarmTrend(params);
if (response.code === 0 && response.data?.records?.length > 0) { debugger
const records = response.data.records; if (response.records?.length > 0) {
const records = response.records;
// 处理日期格式：从 "2025-12-10" 转换为 "10日" // 处理日期格式：从 "2025-12-10" 转换为 "10日"
const dates = records.map((item: any) => { const dates = records.map((item: any) => {
const date = new Date(item.alarm_date); const date = new Date(item.alarm_date);
@@ -526,7 +528,7 @@ const fetchParkList = async () => {
pageSize: parkListPage.value.pageSize pageSize: parkListPage.value.pageSize
}; };
const response = await getPowerEnvDeviceGroupTypeCampus(params); const response = await getPowerEnvDeviceGroupTypeCampus(params);
debugger
if (response.records?.length>0) { if (response.records?.length>0) {
parkListPage.value.total = response.records?.length || 0; parkListPage.value.total = response.records?.length || 0;

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

@@ -49,7 +49,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {getTableList, getTableData} from './report' import {getTableList, getTableData, getWorkOrderStatistics} from './report'
import {ref, onMounted, watch, onUnmounted} from 'vue' import {ref, onMounted, watch, onUnmounted} from 'vue'
import {useRoute, useRouter} from 'vue-router' import {useRoute, useRouter} from 'vue-router'
import RegionSelector from './components/RegionSelector.vue' import RegionSelector from './components/RegionSelector.vue'
@@ -73,7 +73,7 @@ interface RegionItem {
code: string code: string
} }
type TabType = '危险作业' | '安全考核' | '安全、保密培训' type TabType = '安全类' | '工程类'
// 响应式数据 // 响应式数据
const currentDateTime = ref<string>('') const currentDateTime = ref<string>('')
@@ -95,7 +95,10 @@ const visitorCount = ref<number>(0)
// 总体概览-各园区统计 // 总体概览-各园区统计
const parkStatistics = ref<any>() const parkStatistics = ref<any>()
// 危险作业/安全考核/安全、保密培训 // 危险作业/安全考核/安全、保密培训
const riskStatistics = ref<any>() const riskStatistics = ref<Record<TabType, any[]>>({
安全类: [],
工程类: []
})
const dangerDetail = ref<any>() const dangerDetail = ref<any>()
// 动画相关的状态 // 动画相关的状态
const isAnimating = ref<boolean>(false) const isAnimating = ref<boolean>(false)
@@ -374,9 +377,9 @@ const loadDashboardData = async (): Promise<void> => {
try { try {
// 获取风险预警详情数据 // 获取风险预警详情数据
getTableList('risk_alert_detail', query).then(risk_alert_detail => { getTableList('risk_alert_detail', query).then(risk_alert_detail => {
if (risk_alert_detail.records && risk_alert_detail.records.length > 0) { // if (risk_alert_detail.records && risk_alert_detail.records.length > 0) {
dashboardData.value.alertData.details = risk_alert_detail.records dashboardData.value.alertData.details = risk_alert_detail.records || []
} // }
}).catch(error => { }).catch(error => {
console.error('获取风险预警详情数据失败:', error) console.error('获取风险预警详情数据失败:', error)
}) })
@@ -397,7 +400,7 @@ const loadDashboardData = async (): Promise<void> => {
} catch (error) { } catch (error) {
console.error('获取超期工单数据失败:', error) console.error('获取超期工单数据失败:', error)
} }
handleRiskTabChange('危险作业') handleRiskTabChange('安全类')
handleHiddenDangerPannelData(query) handleHiddenDangerPannelData(query)
console.log('dashboardData.value>>>>>>>>>>', dashboardData.value); console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
} }
@@ -437,12 +440,17 @@ const handleHiddenDangerPannelData = (query) => {
// 获取隐患排查治理数据 // 获取隐患排查治理数据
getTableList('risk_status_count', query).then(res => { getTableList('risk_status_count', query).then(res => {
if (res.records && res.records.length > 0) { 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) const record = res.records[0]
_data.processing = _data.processing + Number(res.records[0].processingCnt) _data.overdue = Number(record.overdueCnt) || 0
_data.pending = _data.pending _data.processed = Number(record.processedCnt) || 0
_data.processing = Number(record.processingCnt) || 0
_data.pending = 0 // 接口没有返回pending，设为0
_data.flag = true _data.flag = true
console.log('risk_status_count 接口返回数据:', record)
console.log('处理后的 _data:', _data)
if (_data2.flag) { if (_data2.flag) {
// 合并数据 // 合并数据
console.log("请求系统和第三方成功，合并数据", _data, _data2); console.log("请求系统和第三方成功，合并数据", _data, _data2);
@@ -451,30 +459,44 @@ const handleHiddenDangerPannelData = (query) => {
dashboardData.value.hiddenDangerData.general = generalCnt dashboardData.value.hiddenDangerData.general = generalCnt
dashboardData.value.hiddenDangerData.major = majorCnt 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 overdueCnt, processedCnt, processingCnt, pendingCnt
let processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2) if (_data2.overdue > 1 || _data2.processed > 1 || _data2.processing > 1) {
let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2) // 第三方数据可能是百分比，直接使用系统数据（因为系统数据更准确）
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 = { dashboardData.value.hiddenDangerData.progress = {
overdue: overdueCnt, overdue: overdueCnt,
processed: processedCnt, processed: processedCnt,
processing: processingCnt, processing: processingCnt,
pending: pendingCnt, pending: pendingCnt,
} }
console.log('合并后的 progress:', dashboardData.value.hiddenDangerData.progress)
} else { } else {
console.log("请求系统成功，展示数据", _data, _data2); console.log("请求系统成功，展示数据", _data, _data2);
dashboardData.value.hiddenDangerData.general = _data.general dashboardData.value.hiddenDangerData.general = _data.general
dashboardData.value.hiddenDangerData.major = _data.major dashboardData.value.hiddenDangerData.major = _data.major
let totalCnt = _data.general + _data.major // 接口返回的已经是百分比，直接使用
// 显示系统数据
dashboardData.value.hiddenDangerData.progress = { dashboardData.value.hiddenDangerData.progress = {
overdue: (_data.overdue / totalCnt * 100).toFixed(2), overdue: _data.overdue.toFixed(2),
processed: (_data.processed / totalCnt * 100).toFixed(2), processed: _data.processed.toFixed(2),
processing: (_data.processing / totalCnt * 100).toFixed(2), processing: _data.processing.toFixed(2),
pending: (_data.pending / totalCnt * 100).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 => { getTableList('hidden_danger_process_progress', query).then(res => {
if (res.records && res.records.length > 0) { // if (res.records && res.records.length > 0) {
_data2.flag = true // _data2.flag = true
_data2.overdue = Number(res.records[0].overdue) / 100 * (_data2.general + _data2.major) // _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.processed = Number(res.records[0].processed) / 100 * (_data2.general + _data2.major)
_data2.processing = Number(res.records[0].processing) / 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) // _data2.pending = Number(res.records[0].pending) / 100 * (_data2.general + _data2.major)
if (_data.flag) { // if (_data.flag) {
console.log("请求第三方和系统成功，合并数据", _data, _data2); // console.log("请求第三方和系统成功，合并数据", _data, _data2);
// 合并数据 // // 合并数据
let generalCnt = _data.general + _data2.general // let generalCnt = _data.general + _data2.general
let majorCnt = _data.major + _data2.major // let majorCnt = _data.major + _data2.major
dashboardData.value.hiddenDangerData.general = generalCnt // dashboardData.value.hiddenDangerData.general = generalCnt
dashboardData.value.hiddenDangerData.major = majorCnt // dashboardData.value.hiddenDangerData.major = majorCnt
let totalCnt = generalCnt + majorCnt // let totalCnt = generalCnt + majorCnt
let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2) // let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2)
let processedCnt = ((_data.processed + _data2.processed) / 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 processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2)
let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2) // let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2)
dashboardData.value.hiddenDangerData.progress = { // dashboardData.value.hiddenDangerData.progress = {
overdue: overdueCnt, // overdue: overdueCnt,
processed: processedCnt, // processed: processedCnt,
processing: processingCnt, // processing: processingCnt,
pending: pendingCnt, // pending: pendingCnt,
} // }
} else { // } else {
//显示三方数据 // //显示三方数据
console.log("请求第三方成功，展示数据", _data, _data2); // console.log("请求第三方成功，展示数据", _data, _data2);
dashboardData.value.hiddenDangerData.general = _data2.general // dashboardData.value.hiddenDangerData.general = _data2.general
dashboardData.value.hiddenDangerData.major = _data2.major // dashboardData.value.hiddenDangerData.major = _data2.major
dashboardData.value.hiddenDangerData.progress = { // dashboardData.value.hiddenDangerData.progress = {
overdue: res.records[0].overdue, // overdue: res.records[0].overdue,
processed: res.records[0].processed, // processed: res.records[0].processed,
processing: res.records[0].processing, // processing: res.records[0].processing,
pending: res.records[0].pending, // pending: res.records[0].pending,
} // }
} // }
} // }
}).catch(error => { }).catch(error => {
console.error('获取隐患排查治理处理进度数据失败:', error) console.error('获取隐患排查治理处理进度数据失败:', error)
}) })
@@ -569,93 +591,103 @@ const handleHiddenDangerPannelData = (query) => {
// 处理风险统计tab切换 // 处理风险统计tab切换
const handleRiskTabChange = async (tab: TabType) => { const handleRiskTabChange = async (tab: TabType) => {
console.log('Tab changed to:', tab) console.log('Tab changed to:', tab)
try { try {
let code = '' let workOrderType = ''
switch (tab) { switch (tab) {
case '危险作业': case '安全类':
code = 'hazardous_operations' workOrderType = '安全生产'
break break
case '安全考核': case '工程类':
code = 'safety_assessment' workOrderType = '物业服务-工程'
break
case '安全、保密培训':
code = 'security_training'
break break
default: default:
code = 'hazardous_operations' workOrderType = '安全生产'
} }
if (code == 'hazardous_operations') {
// 根据不同的tab请求不同的接口 // 同时获取维保任务和巡检任务的数据
getTableList( const [maintenanceResponse, inspectionResponse] = await Promise.all([
code, getWorkOrderStatistics({workOrderType, taskType: '维保任务', campus_id: query.campus_id}).catch(error => {
{...query, activeTab: tab} console.error('获取维保任务数据失败:', error)
).then(response => { return { records: [] }
// 更新风险统计数据 - 传递完整的数组数据用于饼图显示 }),
if (response.records && response.records.length > 0) { getWorkOrderStatistics({workOrderType, taskType: '巡检任务', campus_id: query.campus_id}).catch(error => {
dangerDetail.value = response.records console.error('获取巡检任务数据失败:', error)
} return { records: [] }
}).catch(error => { })
console.error('获取风险统计数据失败:', error) ])
if (isFirstLoad.value) {
// dangerDetail.value = [ // 处理接口返回的数据结构：可能是数组或对象
// { const getRecords = (response: any): any[] => {
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理', if (Array.isArray(response)) {
// alarm_level_code: 'general', return response
// alarm_status: '已关闭', } else if (response && Array.isArray(response.records)) {
// alarm_biz_id: '20250827164305283937' return response.records
// }, } else if (response && response.data && Array.isArray(response.data)) {
// { return response.data
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理', }
// alarm_level_code: 'general', return []
// alarm_status: '已关闭', }
// alarm_biz_id: '20250827164305283937'
// }, { const maintenanceRecords = getRecords(maintenanceResponse)
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理', const inspectionRecords = getRecords(inspectionResponse)
// alarm_level_code: 'general',
// alarm_status: '已关闭', console.log('维保任务数据:', maintenanceResponse, '提取的records:', maintenanceRecords)
// alarm_biz_id: '20250827164305283937' console.log('巡检任务数据:', inspectionResponse, '提取的records:', inspectionRecords)
// }, {
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理', // 周期映射
// alarm_level_code: 'general', const cycleMap: Record<string, string> = {
// alarm_status: '已关闭', 'day': '每日',
// alarm_biz_id: '20250827164305283937' 'month': '每月',
// }, { 'year': '每年'
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理', }
// alarm_level_code: 'general',
// alarm_status: '已关闭', // 将API数据转换为图表数据格式
// alarm_biz_id: '20250827164305283937' const convertToChartData = (records: any[], taskTypeName: string): any[] => {
// }, { const charts: any[] = []
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
// alarm_level_code: 'general', // 按周期分组
// alarm_status: '已关闭', const cycleGroups: Record<string, any> = {}
// alarm_biz_id: '20250827164305283937' records.forEach((record: any) => {
// } const cycle = record.cycle || 'day'
// ] if (!cycleGroups[cycle]) {
cycleGroups[cycle] = record
} }
}) })
} else {
// 根据不同的tab请求不同的接口 // 创建6个图表（3个周期 x 2个任务类型，但这里只处理一种任务类型）
getTableList( const cycles = ['day', 'month', 'year']
code, cycles.forEach((cycle) => {
{...query, activeTab: tab} const data = cycleGroups[cycle] || {}
).then(response => { const title = `${cycleMap[cycle]}检查(${taskTypeName})`
// 更新风险统计数据 - 传递完整的数组数据用于饼图显示
if (response.records && response.records.length > 0) { charts.push({
riskStatistics.value = response.records title,
} else { total: Number(data.total) || 0,
// 如果没有数据，设置默认值 status: {
riskStatistics.value = [ notStarted: Number(data.pending) || 0,
{ inProgress: Number(data.processing) || 0,
csmpus_name: "雄安新区总部", done: Number(data.processed) || 0,
finishCount: "0", voided: Number(data.closed) || 0
participateCount: "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) { } catch (error) {
console.error('获取风险统计数据失败:', error) console.error('获取风险统计数据失败:', error)
} }

17
src/views/screen/report/index.ts
View File

@@ -122,4 +122,21 @@ export const batchGetTableList = (reportCodes: string, data?) => {
return request.post({ url: `/jeelowcode/report-data/batch/list/${reportCodes}`, data }) return request.post({ url: `/jeelowcode/report-data/batch/list/${reportCodes}`, data })
} }
// 总部安全类 /jeelowcode/report-data/list/report_work_order_statistics
// report_work_order_statistics
// 场景一：安全类，维保
// 参数：workOrderType：'安全生产'，taskType：'维保任务'
// 场景二：安全类，巡检
// 参数：workOrderType：'安全生产'，taskType：'巡检任务'
// 场景三：工程类，维保
// 参数：workOrderType：'物业服务-工程'，taskType：'维保任务'
// 场景四：工程类，巡检
// 参数：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} })
}

2
vite.config.ts
View File

@@ -32,7 +32,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
// 本地跨域代理. 目前注释的原因：暂时没有用途，server 端已经支持跨域 // 本地跨域代理. 目前注释的原因：暂时没有用途，server 端已经支持跨域
proxy: { proxy: {
['/admin-api']: { ['/admin-api']: {
target: 'http://10.28.117.48:48080', target: 'http://carson.wang:48080',
ws: false, ws: false,
changeOrigin: true, changeOrigin: true,
rewrite: (path) => path.replace(new RegExp(`^/admin-api`), ''), rewrite: (path) => path.replace(new RegExp(`^/admin-api`), ''),