Compare commits
1 Commits
97330be09f
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
93ecebcb2e |
2
.env.dev
2
.env.dev
@@ -4,7 +4,7 @@ VITE_NODE_ENV=development
|
|||||||
VITE_DEV=true
|
VITE_DEV=true
|
||||||
|
|
||||||
# 请求路径 注:/api 正常不需要 当前是访问演示环境nginx转发用
|
# 请求路径 注:/api 正常不需要 当前是访问演示环境nginx转发用
|
||||||
VITE_BASE_URL='https://demo.jeelowcode.com/api'
|
VITE_BASE_URL='http://10.28.117.100'
|
||||||
|
|
||||||
# 文件上传类型:server - 后端上传, client - 前端直连上传,仅支持S3服务
|
# 文件上传类型:server - 后端上传, client - 前端直连上传,仅支持S3服务
|
||||||
VITE_UPLOAD_TYPE=server
|
VITE_UPLOAD_TYPE=server
|
||||||
|
|||||||
@@ -63,7 +63,7 @@ watch(
|
|||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<ConfigGlobal :size="currentSize">
|
<ConfigGlobal :size="currentSize">
|
||||||
<div class="h-100% w-100%" style="overflow-y: auto;" :class="greyMode ? `${prefixCls}-grey-mode` : ''">
|
<div class="h-100% w-100%" :class="greyMode ? `${prefixCls}-grey-mode` : ''">
|
||||||
<RouterView />
|
<RouterView />
|
||||||
</div>
|
</div>
|
||||||
<routerSearch />
|
<routerSearch />
|
||||||
|
|||||||
@@ -68,7 +68,3 @@ export const createProcessInstanceCC = async (data) => {
|
|||||||
export const getProcessInstanceCCPage = async (params) => {
|
export const getProcessInstanceCCPage = async (params) => {
|
||||||
return await request.get({ url: '/bpm/process-instance/cc/my-page', params })
|
return await request.get({ url: '/bpm/process-instance/cc/my-page', params })
|
||||||
}
|
}
|
||||||
|
|
||||||
export const handleProcessInstanceCC = async (processInstanceId: string) => {
|
|
||||||
return await request.post({url: '/bpm/process-instance/cc/process-current-user-copy/' + processInstanceId})
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import request from '@/config/axios'
|
import request from '@/config/axios'
|
||||||
import { encryptAES } from '@/components/LowDesign/src/utils/aes'
|
import { encryptAES } from '@/components/LowDesign/src/utils/aes'
|
||||||
import download from '@/utils/download'
|
|
||||||
|
|
||||||
//获取表单开发列表
|
//获取表单开发列表
|
||||||
export const getDbList = (data) => {
|
export const getDbList = (data) => {
|
||||||
@@ -159,11 +158,6 @@ export const exportExcelData = (tableId, data) => {
|
|||||||
return request.download({ url: `/jeelowcode/excel/exportExcel/${tableId}`, method: 'POST', data })
|
return request.download({ url: `/jeelowcode/excel/exportExcel/${tableId}`, method: 'POST', data })
|
||||||
}
|
}
|
||||||
|
|
||||||
//导出Excel表数据
|
|
||||||
export const exportExcelDataCustom = (explain,tableId, data) => {
|
|
||||||
return request.download({ url: `/jeelowcode/excel/exportExcelCustom/${tableId}`, method: 'POST', data }).then((data) => download.excel(data, explain, 'xlsx'))
|
|
||||||
}
|
|
||||||
|
|
||||||
//下载导入模板
|
//下载导入模板
|
||||||
export const downloadImportTemplate = (tableId) => {
|
export const downloadImportTemplate = (tableId) => {
|
||||||
return request.download({ url: `/jeelowcode/excel/exportExcelTemplate/${tableId}` })
|
return request.download({ url: `/jeelowcode/excel/exportExcelTemplate/${tableId}` })
|
||||||
|
|||||||
141
src/api/index.ts
141
src/api/index.ts
@@ -1,141 +0,0 @@
|
|||||||
import request from '@/config/axios'
|
|
||||||
|
|
||||||
// 获取集团外协管理数据
|
|
||||||
export const getOutsourcingManagementData = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_wx_jt', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取集团风险管理数据
|
|
||||||
export const getRiskManagementData = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_fx_jt', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数据看板-隐患管理-集团(天) /jeelowcode/report-data/list/kb_yh_jt_d
|
|
||||||
export const getHiddenDangerManagementData = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_yh_jt_d', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数据看板-隐患管理-集团(周) /jeelowcode/report-data/list/kb_yh_jt_w
|
|
||||||
export const getHiddenDangerManagementDataWeek = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_yh_jt_w', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数据看板-隐患管理-集团(月) /jeelowcode/report-data/list/kb_yh_jt_m
|
|
||||||
export const getHiddenDangerManagementDataMonth = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_yh_jt_m', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数据看板-高危作业-集团 /jeelowcode/report-data/list/kb_gw_jt
|
|
||||||
export const getHighRiskManagementData = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_gw_jt', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数据看板-应急预案-集团 /jeelowcode/report-data/list/kb_yj_jt
|
|
||||||
export const getEmergencyPlanManagementData = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_yj_jt', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数据看板-培训-集团 /jeelowcode/report-data/list/kb_px_jt
|
|
||||||
export const getTrainingManagementData = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_px_jt', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数据看板-外协管理-区域 /jeelowcode/report-data/list/kb_wx_qy
|
|
||||||
export const getOutsourcingManagementDataRegion = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_wx_qy', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数据看板-外协管理-园区 /jeelowcode/report-data/list/kb_wx_yq
|
|
||||||
export const getOutsourcingManagementDataPark = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_wx_yq', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数据看板-风险管理-区域 /jeelowcode/report-data/list/kb_fx_qy
|
|
||||||
export const getRiskManagementDataRegion = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_fx_qy', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数据看板-风险管理-园区 /jeelowcode/report-data/list/kb_fx_yq
|
|
||||||
export const getRiskManagementDataPark = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_fx_yq', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数据看板-隐患管理-区域(天) /jeelowcode/report-data/list/kb_yh_qy_d
|
|
||||||
export const getHiddenDangerManagementDataRegion = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_yh_qy_d', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数据看板-隐患管理-区域(周) /jeelowcode/report-data/list/kb_yh_qy_w
|
|
||||||
export const getHiddenDangerManagementDataRegionWeek = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_yh_qy_w', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数据看板-隐患管理-区域(月) /jeelowcode/report-data/list/kb_yh_qy_m
|
|
||||||
export const getHiddenDangerManagementDataRegionMonth = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_yh_qy_m', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数据看板-隐患管理-园区(天)
|
|
||||||
export const getHiddenDangerManagementDataPark = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_gw_qy_d', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数据看板-隐患管理-园区(周) /jeelowcode/report-data/list/kb_yh_yq_w
|
|
||||||
export const getHiddenDangerManagementDataParkWeek = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_yh_yq_w', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数据看板-隐患管理-园区(月) /jeelowcode/report-data/list/kb_yh_yq_m
|
|
||||||
export const getHiddenDangerManagementDataParkMonth = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_yh_yq_m', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数据看板-高危作业-区域 /jeelowcode/report-data/list/kb_gw_dq
|
|
||||||
export const getHighRiskManagementDataRegion = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_gw_dq', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数据看板-高危作业-园区 /jeelowcode/report-data/list/kb_gw_yq
|
|
||||||
export const getHighRiskManagementDataPark = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_gw_yq', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数据看板-应急预案-区域 /jeelowcode/report-data/list/kb_yj_dq
|
|
||||||
export const getEmergencyPlanManagementDataRegion = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_yj_dq', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数据看板-应急预案-园区 /jeelowcode/report-data/list/kb_yj_yq
|
|
||||||
export const getEmergencyPlanManagementDataPark = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_yj_yq', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数据看板-安全培训-区域 /jeelowcode/report-data/list/kb_px_qy
|
|
||||||
export const getTrainingManagementDataRegion = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_px_qy', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 数据看板-安全培训-园区 /jeelowcode/report-data/list/kb_px_yq
|
|
||||||
export const getTrainingManagementDataPark = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/kb_px_yq', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 动环监控-总设备数 /jeelowcode/power_env_device_totol_num
|
|
||||||
export const getPowerEnvDeviceTotalNum = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/power_env_device_totol_num', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 动环监控-告警设备类型分布 /jeelowcode/power_env_device_alarm_distribution
|
|
||||||
export const getPowerEnvDeviceAlarmDistribution = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/power_env_device_alarm_distribution', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 动环监控-当月告警趋势 /jeelowcode/power_env_alarm_trend
|
|
||||||
export const getPowerEnvAlarmTrend = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/power_env_alarm_trend', data })
|
|
||||||
}
|
|
||||||
|
|
||||||
// 动环监控-园区信息列表 /jeelowcode/power_env_device_group_type_campus
|
|
||||||
export const getPowerEnvDeviceGroupTypeCampus = (data) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/power_env_device_group_type_campus', data })
|
|
||||||
}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
<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>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 369 B |
@@ -1,107 +0,0 @@
|
|||||||
<template>
|
|
||||||
<ContentWrap>
|
|
||||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
|
|
||||||
<div v-for="taskAssignRule in props?.taskAssignRules" :key="taskAssignRule.taskDefinitionKey">
|
|
||||||
<el-divider content-position="left">审批节点:{{ taskAssignRule?.taskDefinitionName }}</el-divider>
|
|
||||||
<el-form-item :label="'候选人'"
|
|
||||||
:prop="taskAssignRule.taskDefinitionKey"
|
|
||||||
label-width="122">
|
|
||||||
<UserSelect
|
|
||||||
v-model="formData[taskAssignRule.taskDefinitionKey]"
|
|
||||||
:column="userSelectColumn"
|
|
||||||
:prop="taskAssignRule.taskDefinitionKey"
|
|
||||||
type="edit"
|
|
||||||
:func="(value)=>{console.log(JSON.stringify(value))}"
|
|
||||||
>
|
|
||||||
</UserSelect>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
</ContentWrap>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
// 从 UserSelect 组件导入 Column 类型
|
|
||||||
import type {Column} from '@/components/LowDesign/src/shareControl/UserSelect.vue'
|
|
||||||
|
|
||||||
// 定义组件选项
|
|
||||||
defineOptions({
|
|
||||||
name: "BpmTaskSelectAssigneeForm"
|
|
||||||
})
|
|
||||||
|
|
||||||
interface TaskAssignRule {
|
|
||||||
id: number
|
|
||||||
modelId: string
|
|
||||||
processDefinitionId: string
|
|
||||||
taskDefinitionKey: string
|
|
||||||
taskDefinitionName: string
|
|
||||||
type: number
|
|
||||||
options: number[]
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
taskAssignRules: TaskAssignRule[]
|
|
||||||
modelValue: {}
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const formRef = ref()
|
|
||||||
const formData = ref(props.modelValue)
|
|
||||||
const formRules = ref({})
|
|
||||||
const userSelectColumn: Column = {
|
|
||||||
label: '候选人',
|
|
||||||
findType: 'all',
|
|
||||||
multiple: false,
|
|
||||||
columnKey: ['sex', 'post', 'deptName']
|
|
||||||
}
|
|
||||||
|
|
||||||
const emit = defineEmits(['updateModelValue'])
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.modelValue,
|
|
||||||
(val: {}) => {
|
|
||||||
formData.value = val
|
|
||||||
},
|
|
||||||
{
|
|
||||||
deep: true,
|
|
||||||
immediate: true,
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => formData.value,
|
|
||||||
(val: {}) => {
|
|
||||||
emit('updateModelValue', val)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
deep: true,
|
|
||||||
immediate: true,
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
const validateAssignee = (successCallBack: () => void, failCallback: () => void) => {
|
|
||||||
formRef.value.validate((valid: boolean) => {
|
|
||||||
if (valid) successCallBack()
|
|
||||||
else failCallback()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
defineExpose({validateAssignee})
|
|
||||||
|
|
||||||
// 初始化 formData
|
|
||||||
onMounted(() => {
|
|
||||||
if (props.taskAssignRules) {
|
|
||||||
props.taskAssignRules.forEach(rule => {
|
|
||||||
formData.value[rule.taskDefinitionKey] = ''
|
|
||||||
formRules.value[rule.taskDefinitionKey] = [
|
|
||||||
{
|
|
||||||
required: true,
|
|
||||||
message: '请选择候选人',
|
|
||||||
trigger: 'blur'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1,179 +0,0 @@
|
|||||||
<template>
|
|
||||||
<ElDrawer
|
|
||||||
v-model="drawerVisible"
|
|
||||||
title="列显隐"
|
|
||||||
direction="rtl"
|
|
||||||
size="560px"
|
|
||||||
:z-index="3000"
|
|
||||||
>
|
|
||||||
<div class="column-config-drawer">
|
|
||||||
<el-table
|
|
||||||
:data="columnConfigList"
|
|
||||||
border
|
|
||||||
stripe
|
|
||||||
max-height="calc(100vh - 200px)"
|
|
||||||
style="width: 100%"
|
|
||||||
>
|
|
||||||
<el-table-column prop="label" label="列名" width="200" fixed="left">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<span>{{ row.label }}</span>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="隐藏" width="80" align="center">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-checkbox
|
|
||||||
v-model="row.hide"
|
|
||||||
@change="handleConfigChange"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="冻结" width="80" align="center">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-checkbox
|
|
||||||
:model-value="row.fixed === 'left'"
|
|
||||||
@change="(val) => { row.fixed = val ? 'left' : false; handleConfigChange() }"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column label="排序" width="80" align="center">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-checkbox
|
|
||||||
:model-value="row.sortable === 'custom'"
|
|
||||||
@change="(val) => { row.sortable = val ? 'custom' : false; handleConfigChange() }"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<!-- 导出 -->
|
|
||||||
<el-table-column label="导出" width="80" align="center">
|
|
||||||
<template #default="{ row }">
|
|
||||||
<el-checkbox
|
|
||||||
:model-value="row.isExport === 'Y'"
|
|
||||||
@change="(val) => { row.isExport = val ? 'Y' : 'N'; handleConfigChange() }"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</ElDrawer>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { debounce } from 'lodash-es'
|
|
||||||
|
|
||||||
defineOptions({ name: 'ColumnConfigDialog' })
|
|
||||||
|
|
||||||
interface ColumnConfig {
|
|
||||||
prop: string
|
|
||||||
label: string
|
|
||||||
hide: boolean
|
|
||||||
fixed: string | boolean
|
|
||||||
sortable: string | boolean
|
|
||||||
showColumn: boolean
|
|
||||||
sortNum?: number
|
|
||||||
isExport?: string // 'Y' 表示导出,'N' 表示不导出
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
modelValue: boolean
|
|
||||||
columns: Record<string, any>
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = defineProps<Props>()
|
|
||||||
const emit = defineEmits<{
|
|
||||||
'update:modelValue': [value: boolean]
|
|
||||||
'confirm': [config: Record<string, any>]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const drawerVisible = computed({
|
|
||||||
get: () => props.modelValue,
|
|
||||||
set: (val) => emit('update:modelValue', val)
|
|
||||||
})
|
|
||||||
|
|
||||||
const columnConfigList = ref<ColumnConfig[]>([])
|
|
||||||
|
|
||||||
const initColumnConfig = () => {
|
|
||||||
if (!props.columns) return
|
|
||||||
|
|
||||||
columnConfigList.value = Object.keys(props.columns)
|
|
||||||
.map(key => {
|
|
||||||
const column = props.columns[key]
|
|
||||||
return {
|
|
||||||
prop: column.prop || key,
|
|
||||||
label: column.label || key,
|
|
||||||
hide: column.hide || false,
|
|
||||||
fixed: column.fixed || false,
|
|
||||||
sortable: column.sortable || false,
|
|
||||||
showColumn: column.showColumn !== false,
|
|
||||||
sortNum: column.sortNum,
|
|
||||||
// 默认全部勾选导出,如果已有配置则使用配置值
|
|
||||||
isExport: column.isExport !== undefined ? column.isExport : 'Y'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.sort((a, b) => {
|
|
||||||
// 优先按 sortNum 排序(从小到大)
|
|
||||||
if (a.sortNum !== undefined && b.sortNum !== undefined) {
|
|
||||||
return a.sortNum - b.sortNum
|
|
||||||
}
|
|
||||||
if (a.sortNum !== undefined) return -1
|
|
||||||
if (b.sortNum !== undefined) return 1
|
|
||||||
// 如果都没有 sortNum,则按 label 排序
|
|
||||||
const labelA = a.label || ''
|
|
||||||
const labelB = b.label || ''
|
|
||||||
return labelA.localeCompare(labelB, 'zh-CN')
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 防抖保存配置
|
|
||||||
const saveConfig = debounce(() => {
|
|
||||||
const config: Record<string, any> = {}
|
|
||||||
|
|
||||||
columnConfigList.value.forEach(item => {
|
|
||||||
config[item.prop] = {
|
|
||||||
hide: item.hide,
|
|
||||||
fixed: item.fixed,
|
|
||||||
sortable: item.sortable,
|
|
||||||
isExport: item.isExport || 'Y' // 默认导出
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
emit('confirm', config)
|
|
||||||
}, 300)
|
|
||||||
|
|
||||||
const handleConfigChange = () => {
|
|
||||||
// 配置变化时直接触发保存(防抖处理)
|
|
||||||
saveConfig()
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.modelValue,
|
|
||||||
(val) => {
|
|
||||||
if (val) {
|
|
||||||
initColumnConfig()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ immediate: true }
|
|
||||||
)
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.columns,
|
|
||||||
() => {
|
|
||||||
if (props.modelValue) {
|
|
||||||
initColumnConfig()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ deep: true }
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.column-config-drawer {
|
|
||||||
:deep(.el-table) {
|
|
||||||
.el-table__header {
|
|
||||||
th {
|
|
||||||
background-color: var(--el-fill-color-light);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,73 +1,140 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="low-table relative" :class="[
|
<div
|
||||||
|
class="low-table relative"
|
||||||
|
:class="[
|
||||||
`low-table__${tableId}`,
|
`low-table__${tableId}`,
|
||||||
{
|
{
|
||||||
summary: tableOption.showSummary,
|
summary: tableOption.showSummary,
|
||||||
'low-table-grid': tableOption.grid,
|
'low-table-grid': tableOption.grid,
|
||||||
'no-menu': !tableOption.menu
|
'no-menu': !tableOption.menu
|
||||||
}
|
}
|
||||||
]">
|
]"
|
||||||
|
>
|
||||||
<span prop="delegateUserId" style="display:none">
|
<span prop="delegateUserId" style="display:none">
|
||||||
|
|
||||||
<userSelect id="costomUserSelect" v-model="formData" v-bind="userVBind" class="w-100%"></userSelect>
|
<userSelect
|
||||||
</span>
|
id="costomUserSelect"
|
||||||
<span prop="delegateDictId" style="display:none">
|
v-model="formData"
|
||||||
|
v-bind="userVBind"
|
||||||
<DicTableSelect id="costomDictSelect" :column="distSelectColumn" size="default" type="add" prop="fields_7897245"
|
class="w-100%"
|
||||||
:scope="dictSelectScope" @set-form-data="handleSetFormData"></DicTableSelect>
|
></userSelect>
|
||||||
</span>
|
</span>
|
||||||
<!-- 顶部统计 -->
|
<!-- 顶部统计 -->
|
||||||
<div v-if="summaryTop.show" class="low-table-summary absolute left-0 top-0 w-100% h-auto z-999"
|
<div
|
||||||
v-hasResize="onSummaryTopResize">
|
v-if="summaryTop.show"
|
||||||
<SummaryTop ref="summaryTopRef" v-if="tableSummary.topList?.length" :summaryList="tableSummary.topList">
|
class="low-table-summary absolute left-0 top-0 w-100% h-auto z-999"
|
||||||
</SummaryTop>
|
v-hasResize="onSummaryTopResize"
|
||||||
|
>
|
||||||
|
<SummaryTop
|
||||||
|
ref="summaryTopRef"
|
||||||
|
v-if="tableSummary.topList?.length"
|
||||||
|
:summaryList="tableSummary.topList"
|
||||||
|
></SummaryTop>
|
||||||
</div>
|
</div>
|
||||||
<div class="low-table-content gap-x-10px w-100%" :class="{
|
<div
|
||||||
|
class="low-table-content gap-x-10px w-100%"
|
||||||
|
:class="{
|
||||||
show_fixed_bar: isShowFixedBar,
|
show_fixed_bar: isShowFixedBar,
|
||||||
[`low-table-grid__${tableInfo.singleCardSpan}`]: tableOption.grid
|
[`low-table-grid__${tableInfo.singleCardSpan}`]: tableOption.grid
|
||||||
}" :style="{ paddingTop: summaryTop.height + 'px' }">
|
}"
|
||||||
|
:style="{ paddingTop: summaryTop.height + 'px' }"
|
||||||
|
>
|
||||||
<!-- 左树右表(树表) -->
|
<!-- 左树右表(树表) -->
|
||||||
<div class="left-tree-box flex-basis-200px flex-shrink-0" v-if="tableInfo.tableType == 'treeAround'">
|
<div
|
||||||
<avue-tree ref="treeRef" :option="treeAroundOption" :data="treeAroundData" @node-click="treeAroundNodeClick">
|
class="left-tree-box flex-basis-200px flex-shrink-0"
|
||||||
|
v-if="tableInfo.tableType == 'treeAround'"
|
||||||
|
>
|
||||||
|
<avue-tree
|
||||||
|
ref="treeRef"
|
||||||
|
:option="treeAroundOption"
|
||||||
|
:data="treeAroundData"
|
||||||
|
@node-click="treeAroundNodeClick"
|
||||||
|
>
|
||||||
<template #default="{ data }">
|
<template #default="{ data }">
|
||||||
<span class="el-tree-node__label" :class="{
|
<span
|
||||||
|
class="el-tree-node__label"
|
||||||
|
:class="{
|
||||||
active:
|
active:
|
||||||
data[treeAroundOption.props.value] == treeAroundRow[treeAroundOption.props.value]
|
data[treeAroundOption.props.value] == treeAroundRow[treeAroundOption.props.value]
|
||||||
}">
|
}"
|
||||||
|
>
|
||||||
{{ data[treeAroundOption.props.label] }}
|
{{ data[treeAroundOption.props.label] }}
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</avue-tree>
|
</avue-tree>
|
||||||
</div>
|
</div>
|
||||||
<!-- 列配置抽屉 -->
|
<div
|
||||||
<ColumnConfigDialog v-if="props.model === 'default'" v-model="showColumnConfigDrawer"
|
class="flex-1 w-100%"
|
||||||
:columns="tableOption.column" @confirm="handleColumnConfigConfirm" />
|
:class="{ 'table-content': tableInfo.tableType == 'treeAround' }"
|
||||||
<div class="flex-1 w-100%" :class="{ 'table-content': tableInfo.tableType == 'treeAround' }" v-if="isInit">
|
v-if="isInit"
|
||||||
|
>
|
||||||
<!-- 主体表格 -->
|
<!-- 主体表格 -->
|
||||||
<avue-crud ref="crudRef" v-model="tableForm" v-model:search="tableSearch" v-bind="crudBind"
|
<avue-crud
|
||||||
:table-loading="loading" :data="tableData" :option="tableOption" :before-open="beforeOpen"
|
ref="crudRef"
|
||||||
:before-close="beforeClose" :row-style="tableDefaultFun.rowStyle" :cell-style="tableDefaultFun.cellStyle"
|
v-model="tableForm"
|
||||||
:summary-method="tableDefaultFun.summaryMethod" :span-method="tableDefaultFun.spanMethod"
|
v-model:search="tableSearch"
|
||||||
@search-change="searchChange" @search-reset="resetChange" @row-save="rowSave" @row-update="rowUpdate"
|
v-bind="crudBind"
|
||||||
@row-del="rowDel" @refresh-change="refreshChange" @size-change="sizeChange" @current-change="currentChange"
|
:table-loading="loading"
|
||||||
@selection-change="selectionChange" @sort-change="sortChange" @select-all="selectAll"
|
:data="tableData"
|
||||||
@row-click="tableDefaultFun.rowClick" @row-dblclick="tableDefaultFun.rowDblclick"
|
:option="tableOption"
|
||||||
@cell-click="tableDefaultFun.cellClick" @cell-dblclick="tableDefaultFun.cellDblclick" @tree-load="treeLoad"
|
:before-open="beforeOpen"
|
||||||
@expand-change="expandChanges" :upload-before="uploadBefore" :upload-exceed="uploadExceed"
|
:before-close="beforeClose"
|
||||||
:upload-sized="uploadSized" :upload-preview="uploadPreview">
|
:row-style="tableDefaultFun.rowStyle"
|
||||||
|
:cell-style="tableDefaultFun.cellStyle"
|
||||||
|
:summary-method="tableDefaultFun.summaryMethod"
|
||||||
|
:span-method="tableDefaultFun.spanMethod"
|
||||||
|
@search-change="searchChange"
|
||||||
|
@search-reset="resetChange"
|
||||||
|
@row-save="rowSave"
|
||||||
|
@row-update="rowUpdate"
|
||||||
|
@row-del="rowDel"
|
||||||
|
@refresh-change="refreshChange"
|
||||||
|
@size-change="sizeChange"
|
||||||
|
@current-change="currentChange"
|
||||||
|
@selection-change="selectionChange"
|
||||||
|
@sort-change="sortChange"
|
||||||
|
@select-all="selectAll"
|
||||||
|
@row-click="tableDefaultFun.rowClick"
|
||||||
|
@row-dblclick="tableDefaultFun.rowDblclick"
|
||||||
|
@cell-click="tableDefaultFun.cellClick"
|
||||||
|
@cell-dblclick="tableDefaultFun.cellDblclick"
|
||||||
|
@tree-load="treeLoad"
|
||||||
|
@expand-change="expandChanges"
|
||||||
|
:upload-before="uploadBefore"
|
||||||
|
:upload-exceed="uploadExceed"
|
||||||
|
:upload-sized="uploadSized"
|
||||||
|
:upload-preview="uploadPreview"
|
||||||
|
>
|
||||||
<!-- 自定义表格头部操作 -->
|
<!-- 自定义表格头部操作 -->
|
||||||
<template #menu-left="{ size }">
|
<template #menu-left="{ size }">
|
||||||
<TableButton v-show="menuLeftShow" type="header" :size="size" :buttonObj="buttonObj"
|
<TableButton
|
||||||
:selectLength="tableSelect.length" @menu-left-handle="menuLeftHandle"></TableButton>
|
v-show="menuLeftShow"
|
||||||
|
type="header"
|
||||||
|
:size="size"
|
||||||
|
:buttonObj="buttonObj"
|
||||||
|
:selectLength="tableSelect.length"
|
||||||
|
@menu-left-handle="menuLeftHandle"
|
||||||
|
></TableButton>
|
||||||
</template>
|
</template>
|
||||||
<!-- 自定义操作列 -->
|
<!-- 自定义操作列 -->
|
||||||
<template #menu="{ size, row, index }">
|
<template #menu="{ size, row, index }">
|
||||||
<TableButton :type="tableInfo.menuStyle == 'more' ? 'more' : 'menu'" :max-num="tableInfo.maxMenuNum"
|
<TableButton
|
||||||
:size="size" :buttonObj="buttonObj" :row="row" :index="index" @menu-handle="menuHandle"></TableButton>
|
:type="tableInfo.menuStyle == 'more' ? 'more' : 'menu'"
|
||||||
|
:max-num="tableInfo.maxMenuNum"
|
||||||
|
:size="size"
|
||||||
|
:buttonObj="buttonObj"
|
||||||
|
:row="row"
|
||||||
|
:index="index"
|
||||||
|
@menu-handle="menuHandle"
|
||||||
|
></TableButton>
|
||||||
</template>
|
</template>
|
||||||
<!-- 自定义多选提示 -->
|
<!-- 自定义多选提示 -->
|
||||||
<template #tip>
|
<template #tip>
|
||||||
<span class="inline-block pl-10px c-#999" v-if="model == 'dicTable' && dicMaxLimit" type="danger">
|
<span
|
||||||
|
class="inline-block pl-10px c-#999"
|
||||||
|
v-if="model == 'dicTable' && dicMaxLimit"
|
||||||
|
type="danger"
|
||||||
|
>
|
||||||
{{ t('Avue.crud.selectMaxPrepend') }}
|
{{ t('Avue.crud.selectMaxPrepend') }}
|
||||||
{{ dicMaxLimit }}
|
{{ dicMaxLimit }}
|
||||||
{{ t('Avue.crud.selectMaxAppend') }}
|
{{ t('Avue.crud.selectMaxAppend') }}
|
||||||
@@ -75,22 +142,42 @@
|
|||||||
</template>
|
</template>
|
||||||
<!-- 单选 -->
|
<!-- 单选 -->
|
||||||
<template #lowSelectRadio="{ row, index }">
|
<template #lowSelectRadio="{ row, index }">
|
||||||
<el-radio class="low-select-radio" v-model="radioValue" :label="row[tableOption.rowKey || 'id']"
|
<el-radio
|
||||||
:disabled="!tableOption.selectable(row, index)" @click.stop="radioClick(row, index)" />
|
class="low-select-radio"
|
||||||
|
v-model="radioValue"
|
||||||
|
:label="row[tableOption.rowKey || 'id']"
|
||||||
|
:disabled="!tableOption.selectable(row, index)"
|
||||||
|
@click.stop="radioClick(row, index)"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
<!-- 自定义表头 -->
|
<!-- 自定义表头 -->
|
||||||
<template v-for="prop in inlineSearch" :key="prop" #[`${prop}-header`]="{ column }">
|
<template v-for="prop in inlineSearch" :key="prop" #[`${prop}-header`]="{ column }">
|
||||||
<InlineSearch v-model="tableSearch[prop]" :prop="prop" :column="column" :crudRef="crudRef"
|
<InlineSearch
|
||||||
@execute-search="searchChange"></InlineSearch>
|
v-model="tableSearch[prop]"
|
||||||
|
:prop="prop"
|
||||||
|
:column="column"
|
||||||
|
:crudRef="crudRef"
|
||||||
|
@execute-search="searchChange"
|
||||||
|
></InlineSearch>
|
||||||
</template>
|
</template>
|
||||||
<!-- 自定义表单 -->
|
<!-- 自定义表单 -->
|
||||||
<template v-for="c in slotData.form" :key="c.prop" #[`${c.prop}-form`]="scope">
|
<template v-for="c in slotData.form" :key="c.prop" #[`${c.prop}-form`]="scope">
|
||||||
<!-- <div>{{scope}}</div> -->
|
<!-- <div>{{scope}}</div> -->
|
||||||
<AvueSlot slotType="form" :scope="scope" :control="c" v-model="tableForm[c.prop]"></AvueSlot>
|
<AvueSlot
|
||||||
|
slotType="form"
|
||||||
|
:scope="scope"
|
||||||
|
:control="c"
|
||||||
|
v-model="tableForm[c.prop]"
|
||||||
|
></AvueSlot>
|
||||||
</template>
|
</template>
|
||||||
<!-- 自定义搜索 -->
|
<!-- 自定义搜索 -->
|
||||||
<template v-for="c in slotData.search" :key="c.prop" #[`${c.prop}-search`]="scope">
|
<template v-for="c in slotData.search" :key="c.prop" #[`${c.prop}-search`]="scope">
|
||||||
<AvueSlot slotType="search" :scope="scope" :control="c" v-model="tableSearch[c.prop]"></AvueSlot>
|
<AvueSlot
|
||||||
|
slotType="search"
|
||||||
|
:scope="scope"
|
||||||
|
:control="c"
|
||||||
|
v-model="tableSearch[c.prop]"
|
||||||
|
></AvueSlot>
|
||||||
</template>
|
</template>
|
||||||
<!-- 自定义列 -->
|
<!-- 自定义列 -->
|
||||||
<template v-for="c in slotData.list" :key="c.prop" #[c.prop]="scope">
|
<template v-for="c in slotData.list" :key="c.prop" #[c.prop]="scope">
|
||||||
@@ -98,18 +185,36 @@
|
|||||||
</template>
|
</template>
|
||||||
<!-- 自定义附表表单 -->
|
<!-- 自定义附表表单 -->
|
||||||
<template #lowCustomSubTable-form="{ type, disabled, column }">
|
<template #lowCustomSubTable-form="{ type, disabled, column }">
|
||||||
<avue-tabs ref="subTabsRef" :option="column.tabsOption" @change="(tab) => (subTabsValue = tab)"></avue-tabs>
|
<avue-tabs
|
||||||
|
ref="subTabsRef"
|
||||||
|
:option="column.tabsOption"
|
||||||
|
@change="(tab) => (subTabsValue = tab)"
|
||||||
|
></avue-tabs>
|
||||||
<template v-for="sub in column.tabsOption.column" :key="sub.prop">
|
<template v-for="sub in column.tabsOption.column" :key="sub.prop">
|
||||||
<template v-if="sub.subType == 'many'">
|
<template v-if="sub.subType == 'many'">
|
||||||
<SubTable :ref="(el) => (subTableRef[sub.prop] = el)" v-model="tableForm[sub.prop]"
|
<SubTable
|
||||||
v-show="sub.prop == subTabsValue.prop" :prop="sub.prop" :tableId="sub.tableId"
|
:ref="(el) => (subTableRef[sub.prop] = el)"
|
||||||
:optionData="subTableObj[sub.tableId]" :type="type" :disabled="disabled"
|
v-model="tableForm[sub.prop]"
|
||||||
@execute-custom-btn-enhance="executeCustomBtnEnhance"></SubTable>
|
v-show="sub.prop == subTabsValue.prop"
|
||||||
|
:prop="sub.prop"
|
||||||
|
:tableId="sub.tableId"
|
||||||
|
:optionData="subTableObj[sub.tableId]"
|
||||||
|
:type="type"
|
||||||
|
:disabled="disabled"
|
||||||
|
@execute-custom-btn-enhance="executeCustomBtnEnhance"
|
||||||
|
></SubTable>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="sub.subType == 'one'">
|
<template v-if="sub.subType == 'one'">
|
||||||
<SubForm :ref="(el) => (subFormRef[sub.prop] = el)" v-model="tableForm[sub.prop]"
|
<SubForm
|
||||||
v-show="sub.prop == subTabsValue.prop" :prop="sub.prop" :tableId="sub.tableId"
|
:ref="(el) => (subFormRef[sub.prop] = el)"
|
||||||
:optionData="subTableObj[sub.tableId]" :type="type" :disabled="disabled"></SubForm>
|
v-model="tableForm[sub.prop]"
|
||||||
|
v-show="sub.prop == subTabsValue.prop"
|
||||||
|
:prop="sub.prop"
|
||||||
|
:tableId="sub.tableId"
|
||||||
|
:optionData="subTableObj[sub.tableId]"
|
||||||
|
:type="type"
|
||||||
|
:disabled="disabled"
|
||||||
|
></SubForm>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
@@ -117,11 +222,18 @@
|
|||||||
<!-- 主附表内嵌 -->
|
<!-- 主附表内嵌 -->
|
||||||
<template v-if="tableInfo.subTemplate == 'innerTable'">
|
<template v-if="tableInfo.subTemplate == 'innerTable'">
|
||||||
<div class="p-20px pt-0 pb-10px" v-if="tableOption.expandRowKeys.includes(row.id)">
|
<div class="p-20px pt-0 pb-10px" v-if="tableOption.expandRowKeys.includes(row.id)">
|
||||||
<avue-tabs :option="innerTabsOption" @change="(tab) => (innerTabsValue = tab)"></avue-tabs>
|
<avue-tabs
|
||||||
|
:option="innerTabsOption"
|
||||||
|
@change="(tab) => (innerTabsValue = tab)"
|
||||||
|
></avue-tabs>
|
||||||
<template v-for="sub in innerTabsOption.column" :key="sub.prop">
|
<template v-for="sub in innerTabsOption.column" :key="sub.prop">
|
||||||
<div class="w-100%" v-show="sub.prop == innerTabsValue.prop">
|
<div class="w-100%" v-show="sub.prop == innerTabsValue.prop">
|
||||||
<LowTable :ref="(el) => (innerTableRef[sub.prop] = el)" :tableId="sub.tableId" v-bind="sub.vBind"
|
<LowTable
|
||||||
:fixedSearch="{ ...(innerSubSearch[row.id]?.[sub.prop] || {}) }"></LowTable>
|
:ref="(el) => (innerTableRef[sub.prop] = el)"
|
||||||
|
:tableId="sub.tableId"
|
||||||
|
v-bind="sub.vBind"
|
||||||
|
:fixedSearch="{ ...(innerSubSearch[row.id]?.[sub.prop] || {}) }"
|
||||||
|
></LowTable>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
@@ -130,7 +242,11 @@
|
|||||||
<template v-if="tableInfo.singleStyle == 'expand'">
|
<template v-if="tableInfo.singleStyle == 'expand'">
|
||||||
<div class="expand-table-box px-20px py-10px">
|
<div class="expand-table-box px-20px py-10px">
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-form-item v-for="prop in expandProp" :key="prop" :label="tableOption.column[prop].label + ':'">
|
<el-form-item
|
||||||
|
v-for="prop in expandProp"
|
||||||
|
:key="prop"
|
||||||
|
:label="tableOption.column[prop].label + ':'"
|
||||||
|
>
|
||||||
{{ row[`$${prop}`] || row[prop] }}
|
{{ row[`$${prop}`] || row[prop] }}
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-row>
|
</el-row>
|
||||||
@@ -143,8 +259,11 @@
|
|||||||
<avue-tabs :option="erpTabsOption" @change="(tab) => (subTabsValue = tab)"></avue-tabs>
|
<avue-tabs :option="erpTabsOption" @change="(tab) => (subTabsValue = tab)"></avue-tabs>
|
||||||
<template v-for="sub in erpTabsOption.column" :key="sub.prop">
|
<template v-for="sub in erpTabsOption.column" :key="sub.prop">
|
||||||
<div class="w-100%" v-show="sub.prop == subTabsValue.prop">
|
<div class="w-100%" v-show="sub.prop == subTabsValue.prop">
|
||||||
<LowTable :ref="(el) => (erpTableRef[sub.prop] = el)" :tableId="sub.tableId" v-bind="sub.vBind">
|
<LowTable
|
||||||
</LowTable>
|
:ref="(el) => (erpTableRef[sub.prop] = el)"
|
||||||
|
:tableId="sub.tableId"
|
||||||
|
v-bind="sub.vBind"
|
||||||
|
></LowTable>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
@@ -153,32 +272,67 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 代码编辑器 -->
|
<!-- 代码编辑器 -->
|
||||||
<DesignPopup v-if="popShowObj.mEditor" v-model="MEDialog.value" v-bind="MEDialog.params" :isBodyFull="true">
|
<DesignPopup
|
||||||
|
v-if="popShowObj.mEditor"
|
||||||
|
v-model="MEDialog.value"
|
||||||
|
v-bind="MEDialog.params"
|
||||||
|
:isBodyFull="true"
|
||||||
|
>
|
||||||
<template #default>
|
<template #default>
|
||||||
<MonacoEditor v-model="MEData.value" v-bind="MEData.params"></MonacoEditor>
|
<MonacoEditor v-model="MEData.value" v-bind="MEData.params"></MonacoEditor>
|
||||||
</template>
|
</template>
|
||||||
</DesignPopup>
|
</DesignPopup>
|
||||||
<!-- 导入 -->
|
<!-- 导入 -->
|
||||||
<DesignPopup v-if="popShowObj.import" v-model="importDialog" :title="t('Avue.crud.importTitle')" width="80%"
|
<DesignPopup
|
||||||
:dialog-params="{ alignCenter: true }" :handleClose="importRef?.handleClose">
|
v-if="popShowObj.import"
|
||||||
|
v-model="importDialog"
|
||||||
|
:title="t('Avue.crud.importTitle')"
|
||||||
|
width="80%"
|
||||||
|
:dialog-params="{ alignCenter: true }"
|
||||||
|
:handleClose="importRef?.handleClose"
|
||||||
|
>
|
||||||
<template #default="{ isFull }">
|
<template #default="{ isFull }">
|
||||||
<ImportData ref="importRef" :importId="tableId" :columns="tableOption.column"
|
<ImportData
|
||||||
:tableDescribe="tableInfo.tableDescribe" :show="importDialog" :isFull="isFull"
|
ref="importRef"
|
||||||
@close-popup="importDialog = false" @reset-change="resetData"></ImportData>
|
:importId="tableId"
|
||||||
|
:columns="tableOption.column"
|
||||||
|
:tableDescribe="tableInfo.tableDescribe"
|
||||||
|
:show="importDialog"
|
||||||
|
:isFull="isFull"
|
||||||
|
@close-popup="importDialog = false"
|
||||||
|
@reset-change="resetData"
|
||||||
|
></ImportData>
|
||||||
</template>
|
</template>
|
||||||
</DesignPopup>
|
</DesignPopup>
|
||||||
<!-- 自定义表单 -->
|
<!-- 自定义表单 -->
|
||||||
<DesignPopup v-if="popShowObj.form" v-model="customForm.open" :controlType="tableOption.dialogType || 'dialog'"
|
<DesignPopup
|
||||||
:title="tableOption[`${customForm.formType}Title`] || customForm.title" :width="tableOption.dialogWidth || '60%'"
|
v-if="popShowObj.form"
|
||||||
:footer-btn="customForm.footerBtn" :fullscreen="true">
|
v-model="customForm.open"
|
||||||
<LowForm v-if="customForm.open" ref="customFormRef" :formType="customForm.formType"
|
:controlType="tableOption.dialogType || 'dialog'"
|
||||||
:formOption="customForm.formOption" :defaultData="customForm.defaultData" :formId="tableInfo.formId"
|
:title="tableOption[`${customForm.formType}Title`] || customForm.title"
|
||||||
handleType="returnData" :beforeClose="customFormClose"></LowForm>
|
:width="tableOption.dialogWidth || '60%'"
|
||||||
|
:footer-btn="customForm.footerBtn"
|
||||||
|
:fullscreen = "true"
|
||||||
|
>
|
||||||
|
<LowForm
|
||||||
|
v-if="customForm.open"
|
||||||
|
ref="customFormRef"
|
||||||
|
:formType="customForm.formType"
|
||||||
|
:formOption="customForm.formOption"
|
||||||
|
:defaultData="customForm.defaultData"
|
||||||
|
:formId="tableInfo.formId"
|
||||||
|
handleType="returnData"
|
||||||
|
:beforeClose="customFormClose"
|
||||||
|
></LowForm>
|
||||||
</DesignPopup>
|
</DesignPopup>
|
||||||
<!-- 增强注册的控件 -->
|
<!-- 增强注册的控件 -->
|
||||||
<template v-for="item in rendControlData" :key="item.key">
|
<template v-for="item in rendControlData" :key="item.key">
|
||||||
<component :ref="(el) => (componentRef[item.key] = el)" :is="componentObj[item.random]" v-bind="item.params || {}"
|
<component
|
||||||
v-model="item.show"></component>
|
:ref="(el) => (componentRef[item.key] = el)"
|
||||||
|
:is="componentObj[item.random]"
|
||||||
|
v-bind="item.params || {}"
|
||||||
|
v-model="item.show"
|
||||||
|
></component>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
@@ -211,8 +365,6 @@ import * as Vue from 'vue'
|
|||||||
import { useAppStore } from '@/store/modules/app'
|
import { useAppStore } from '@/store/modules/app'
|
||||||
import { Value } from 'sass'
|
import { Value } from 'sass'
|
||||||
import { object } from 'vue-types'
|
import { object } from 'vue-types'
|
||||||
import ColumnConfigDialog from './components/ColumnConfigDialog.vue'
|
|
||||||
import { saveColumnConfig, getColumnConfig, type ColumnConfig } from '@/utils/indexedDB'
|
|
||||||
defineOptions({ name: 'LowTable' })
|
defineOptions({ name: 'LowTable' })
|
||||||
|
|
||||||
let funcInteface=(value1,value2)=>{}
|
let funcInteface=(value1,value2)=>{}
|
||||||
@@ -231,108 +383,12 @@ interface Props {
|
|||||||
dicRowKey?: string //dicTable模式 行数据的 Key
|
dicRowKey?: string //dicTable模式 行数据的 Key
|
||||||
}
|
}
|
||||||
|
|
||||||
const dictSelectScope = {
|
|
||||||
"key": 0,
|
|
||||||
"value": "",
|
|
||||||
"column": {
|
|
||||||
"type": "dicTableSelect",
|
|
||||||
"controlType": "select",
|
|
||||||
"label": "表格选择框",
|
|
||||||
// "fixedSearch":{
|
|
||||||
// "approveStatusName":"已审批"
|
|
||||||
// },
|
|
||||||
"separator": " | ",
|
|
||||||
"multiple": true,
|
|
||||||
"display": true,
|
|
||||||
"span": 12,
|
|
||||||
"disabled": false,
|
|
||||||
"required": false,
|
|
||||||
"hideLabel": false,
|
|
||||||
"i18nCode": "fields_7897245",
|
|
||||||
"dictTable": "1959187451673116674",
|
|
||||||
"dictCode": "id",
|
|
||||||
"dictText": "personName",
|
|
||||||
"dictTableColumn": [
|
|
||||||
"personName",
|
|
||||||
"personAge",
|
|
||||||
"personSex",
|
|
||||||
"mobile",
|
|
||||||
"approveStatusName"
|
|
||||||
],
|
|
||||||
"prop": "fields_7897245",
|
|
||||||
"dataType": "string",
|
|
||||||
"className": "control-dicTableSelect control-fields_7897245 ",
|
|
||||||
"props": {
|
|
||||||
"lable": "personName",
|
|
||||||
"value": "id"
|
|
||||||
},
|
|
||||||
"rules": [
|
|
||||||
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"size": "default",
|
|
||||||
"disabled": false
|
|
||||||
}
|
|
||||||
|
|
||||||
const distSelectColumn = {
|
|
||||||
"type": "dicTableSelect",
|
|
||||||
"controlType": "select",
|
|
||||||
"multiple": true,
|
|
||||||
"label": "表格选择框",
|
|
||||||
"separator": " | ",
|
|
||||||
"display": true,
|
|
||||||
"span": 12,
|
|
||||||
"disabled": false,
|
|
||||||
// "fixedSearch":{
|
|
||||||
// "approveStatusName":"已审批"
|
|
||||||
// },
|
|
||||||
"required": false,
|
|
||||||
"hideLabel": false,
|
|
||||||
"i18nCode": "fields_7897245",
|
|
||||||
"dictTable": "1959187451673116674",
|
|
||||||
"dictCode": "id",
|
|
||||||
"dictText": "personName",
|
|
||||||
"dictTableColumn": [
|
|
||||||
"personName",
|
|
||||||
"personAge",
|
|
||||||
"personSex",
|
|
||||||
"mobile",
|
|
||||||
"approveStatusName"
|
|
||||||
]
|
|
||||||
,
|
|
||||||
"prop": "fields_7897245",
|
|
||||||
"dataType": "string",
|
|
||||||
"className": "control-dicTableSelect control-fields_7897245 ",
|
|
||||||
"props": {
|
|
||||||
"lable": "personName",
|
|
||||||
"value": "id"
|
|
||||||
},
|
|
||||||
"rules": [
|
|
||||||
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
model: 'default',
|
model: 'default',
|
||||||
fixedSearch: () => {
|
fixedSearch: () => {
|
||||||
return {}
|
return {}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const handleSetFormData = (key, val) => {
|
|
||||||
const cleaned = val.split('|').map(s => s.trim()).join(','); // "1975577437793124352 | 1965778349088899074"
|
|
||||||
console.log(cleaned);
|
|
||||||
// 在这里添加其他处理逻辑
|
|
||||||
useFun.requestApi('get', '/jeelowcode/outsidePerson/importOutside?tableId=' + props.tableId + '&ids=' + cleaned, {
|
|
||||||
}).then(res => {
|
|
||||||
if (res.length > 0) {
|
|
||||||
message.success('下发成功')
|
|
||||||
useFun.refreshChange()
|
|
||||||
} else {
|
|
||||||
message.error(res.message)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
||||||
const userVBind = {
|
const userVBind = {
|
||||||
prop: 'delegateUserId',
|
prop: 'delegateUserId',
|
||||||
type: 'edit',
|
type: 'edit',
|
||||||
@@ -384,17 +440,6 @@ const userVBind = {
|
|||||||
}else if(props.tableId=='1968562717683908610'){ // 考试计划
|
}else if(props.tableId=='1968562717683908610'){ // 考试计划
|
||||||
useFun.requestApi('get', '/jeelowcode/examIssus/addRecord?tableId='+props.tableId+'&ids=' + ids+'&userIds='+resultValue, {
|
useFun.requestApi('get', '/jeelowcode/examIssus/addRecord?tableId='+props.tableId+'&ids=' + ids+'&userIds='+resultValue, {
|
||||||
|
|
||||||
}).then(res => {
|
|
||||||
if (res.length > 0) {
|
|
||||||
message.success('下发成功')
|
|
||||||
useFun.refreshChange()
|
|
||||||
} else {
|
|
||||||
message.error(res.message)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else if (props.tableId == '1983351353033953281') { // 工作事项
|
|
||||||
useFun.requestApi('get', '/jeelowcode/itemIssus/addResult?tableId=' + props.tableId + '&ids=' + ids + '&userIds=' + resultValue, {
|
|
||||||
|
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
if (res.length > 0) {
|
if (res.length > 0) {
|
||||||
message.success('下发成功')
|
message.success('下发成功')
|
||||||
@@ -478,10 +523,6 @@ const crudRef = ref()
|
|||||||
const componentRef = ref({})
|
const componentRef = ref({})
|
||||||
const summaryTopRef = ref()
|
const summaryTopRef = ref()
|
||||||
|
|
||||||
// 列配置相关
|
|
||||||
const showColumnConfigDrawer = ref(false)
|
|
||||||
const fieldListRef = ref<any[]>([]) // 保存 fieldList 的引用,用于修改 webEntity.isShowColumn
|
|
||||||
|
|
||||||
const { uploadBefore, uploadExceed, uploadSized, uploadPreview } = useAvueUpload(jsEnhanceObj)
|
const { uploadBefore, uploadExceed, uploadSized, uploadPreview } = useAvueUpload(jsEnhanceObj)
|
||||||
|
|
||||||
const isShowFixedBar = computed(() => {
|
const isShowFixedBar = computed(() => {
|
||||||
@@ -572,7 +613,7 @@ const fixed_bar_left = computed(() => {
|
|||||||
const initTable = async () => {
|
const initTable = async () => {
|
||||||
isInit.value = false
|
isInit.value = false
|
||||||
loading.value = true
|
loading.value = true
|
||||||
let data: any = {}
|
let data = {}
|
||||||
if (props.model == 'default') {
|
if (props.model == 'default') {
|
||||||
data = await TableApi.getWebConfig(props.tableId)
|
data = await TableApi.getWebConfig(props.tableId)
|
||||||
} else if (props.model == 'erpTable' || props.model == 'innerTable') {
|
} else if (props.model == 'erpTable' || props.model == 'innerTable') {
|
||||||
@@ -580,15 +621,6 @@ const initTable = async () => {
|
|||||||
} else if (isDicTable.value) {
|
} else if (isDicTable.value) {
|
||||||
data = await getDicTableConfig(props.tableId, props.dicConfigStr)
|
data = await getDicTableConfig(props.tableId, props.dicConfigStr)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 保存 fieldList 的引用,用于列配置时修改 webEntity.isShowColumn
|
|
||||||
if (props.model === 'default' && data.fieldList) {
|
|
||||||
fieldListRef.value = data.fieldList
|
|
||||||
|
|
||||||
// 在初始化 tableOption 之前,先从 IndexedDB 加载列配置并应用到 fieldList
|
|
||||||
await loadColumnConfigToFieldList()
|
|
||||||
}
|
|
||||||
|
|
||||||
const optionData = initTableOption(data, {
|
const optionData = initTableOption(data, {
|
||||||
tableId: props.tableId,
|
tableId: props.tableId,
|
||||||
calcHeight: props.calcHeight,
|
calcHeight: props.calcHeight,
|
||||||
@@ -704,24 +736,10 @@ const initTable = async () => {
|
|||||||
initInlineSearch()
|
initInlineSearch()
|
||||||
initExpandTable()
|
initExpandTable()
|
||||||
isInit.value = true
|
isInit.value = true
|
||||||
|
|
||||||
// 从 IndexedDB 加载列配置并应用到 crudRef(此时 tableOption 已初始化,需要同步到 crudRef)
|
|
||||||
if (props.model === 'default') {
|
|
||||||
await loadColumnConfigToCrudRef()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (optionData.tableInfo.isGetData || isDicTable.value) {
|
if (optionData.tableInfo.isGetData || isDicTable.value) {
|
||||||
getTableData(true, { type: 'init', isGetSummary: true })
|
getTableData(true, { type: 'init', isGetSummary: true })
|
||||||
} else loading.value = false
|
} else loading.value = false
|
||||||
initTableLayout()
|
initTableLayout()
|
||||||
|
|
||||||
// 初始化完成后,尝试替换列显隐按钮
|
|
||||||
if (props.model === 'default') {
|
|
||||||
await nextTick()
|
|
||||||
setTimeout(() => {
|
|
||||||
replaceColumnButton()
|
|
||||||
}, 300)
|
|
||||||
}
|
|
||||||
if (optionData.tableInfo.subTable?.length) {
|
if (optionData.tableInfo.subTable?.length) {
|
||||||
optionData.tableInfo.subTable.forEach(
|
optionData.tableInfo.subTable.forEach(
|
||||||
(id, index) => (subTableObj.value[id] = { tableId: id, index })
|
(id, index) => (subTableObj.value[id] = { tableId: id, index })
|
||||||
@@ -1395,273 +1413,6 @@ const refreshChange = () => {
|
|||||||
getTableData(true, { isGetSummary: true })
|
getTableData(true, { isGetSummary: true })
|
||||||
}
|
}
|
||||||
|
|
||||||
// 替换列显隐按钮
|
|
||||||
let buttonReplaced = false
|
|
||||||
let observerInstance: MutationObserver | null = null
|
|
||||||
|
|
||||||
const replaceColumnButton = () => {
|
|
||||||
if (buttonReplaced || props.model !== 'default') return
|
|
||||||
|
|
||||||
const tryReplace = () => {
|
|
||||||
const originalButton = document.querySelector('.avue-crud__columnBtn:not([data-custom-replaced])')
|
|
||||||
if (originalButton && !buttonReplaced) {
|
|
||||||
buttonReplaced = true
|
|
||||||
|
|
||||||
// 创建新按钮
|
|
||||||
const newButton = originalButton.cloneNode(true) as HTMLElement
|
|
||||||
newButton.setAttribute('data-custom-replaced', 'true')
|
|
||||||
|
|
||||||
// 清除原按钮的所有事件监听器
|
|
||||||
const newButtonClone = newButton.cloneNode(true) as HTMLElement
|
|
||||||
newButtonClone.setAttribute('data-custom-replaced', 'true')
|
|
||||||
|
|
||||||
// 添加新的事件监听器
|
|
||||||
newButtonClone.addEventListener('click', (e) => {
|
|
||||||
e.preventDefault()
|
|
||||||
e.stopPropagation()
|
|
||||||
showColumnConfigDrawer.value = true
|
|
||||||
})
|
|
||||||
|
|
||||||
// 替换原按钮
|
|
||||||
if (originalButton.parentNode) {
|
|
||||||
originalButton.parentNode.replaceChild(newButtonClone, originalButton)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 停止观察
|
|
||||||
if (observerInstance) {
|
|
||||||
observerInstance.disconnect()
|
|
||||||
observerInstance = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 立即尝试一次
|
|
||||||
tryReplace()
|
|
||||||
|
|
||||||
// 如果还没替换成功,使用观察者
|
|
||||||
if (!buttonReplaced) {
|
|
||||||
observerInstance = new MutationObserver(() => {
|
|
||||||
if (!buttonReplaced) {
|
|
||||||
tryReplace()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 只观察 crudRef 所在的区域,避免观察整个 body
|
|
||||||
const crudElement = crudRef.value?.$el
|
|
||||||
if (crudElement) {
|
|
||||||
observerInstance.observe(crudElement, {
|
|
||||||
childList: true,
|
|
||||||
subtree: true
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
// 如果 crudRef 还没准备好,观察 body 但限制范围
|
|
||||||
observerInstance.observe(document.body, {
|
|
||||||
childList: true,
|
|
||||||
subtree: true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 设置超时,避免无限观察
|
|
||||||
setTimeout(() => {
|
|
||||||
if (observerInstance) {
|
|
||||||
observerInstance.disconnect()
|
|
||||||
observerInstance = null
|
|
||||||
}
|
|
||||||
}, 10000) // 10秒后停止观察
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 列配置确认处理
|
|
||||||
const handleColumnConfigConfirm = async (config: Record<string, ColumnConfig>) => {
|
|
||||||
if (props.model !== 'default') return
|
|
||||||
|
|
||||||
// 修改 fieldList 中的 webEntity.isShowColumn
|
|
||||||
if (fieldListRef.value && fieldListRef.value.length > 0) {
|
|
||||||
fieldListRef.value.forEach((field: any) => {
|
|
||||||
if (field.webEntity && field.fieldCode && config[field.fieldCode] !== undefined) {
|
|
||||||
const colConfig = config[field.fieldCode]
|
|
||||||
// hide === true 表示 checkbox 选中,对应 isShowColumn = 'N'
|
|
||||||
// hide === false 表示 checkbox 不选中,对应 isShowColumn = 'Y'
|
|
||||||
if (colConfig.hide !== undefined) {
|
|
||||||
field.webEntity.isShowColumn = colConfig.hide ? 'N' : 'Y'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 应用列配置到 tableOption
|
|
||||||
Object.keys(config).forEach(prop => {
|
|
||||||
if (tableOption.value.column[prop]) {
|
|
||||||
const colConfig = config[prop]
|
|
||||||
if (colConfig.hide !== undefined) {
|
|
||||||
tableOption.value.column[prop].hide = colConfig.hide
|
|
||||||
}
|
|
||||||
if (colConfig.fixed !== undefined) {
|
|
||||||
tableOption.value.column[prop].fixed = colConfig.fixed
|
|
||||||
}
|
|
||||||
if (colConfig.sortable !== undefined) {
|
|
||||||
tableOption.value.column[prop].sortable = colConfig.sortable
|
|
||||||
}
|
|
||||||
if (colConfig.isExport !== undefined) {
|
|
||||||
tableOption.value.column[prop].isExport = colConfig.isExport
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 同步到 crudRef
|
|
||||||
await nextTick()
|
|
||||||
if (crudRef.value && crudRef.value.columnOption) {
|
|
||||||
crudRef.value.columnOption.forEach((column: any) => {
|
|
||||||
if (config[column.prop]) {
|
|
||||||
const colConfig = config[column.prop]
|
|
||||||
if (colConfig.hide !== undefined) {
|
|
||||||
column.hide = colConfig.hide
|
|
||||||
}
|
|
||||||
if (colConfig.fixed !== undefined) {
|
|
||||||
column.fixed = colConfig.fixed
|
|
||||||
}
|
|
||||||
if (colConfig.sortable !== undefined) {
|
|
||||||
column.sortable = colConfig.sortable
|
|
||||||
}
|
|
||||||
if (colConfig.isExport !== undefined) {
|
|
||||||
column.isExport = colConfig.isExport
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 强制更新表格布局和配置
|
|
||||||
await nextTick()
|
|
||||||
if (crudRef.value && crudRef.value.$refs && crudRef.value.$refs.table) {
|
|
||||||
// 强制更新表格布局
|
|
||||||
crudRef.value.$refs.table.doLayout()
|
|
||||||
// 强制 Vue 重新渲染列配置
|
|
||||||
await nextTick()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 保存到 IndexedDB(保存 isShowColumn 的值)
|
|
||||||
const pageId = (route.params.id as string) || props.tableId
|
|
||||||
const saveConfig: Record<string, ColumnConfig> = {}
|
|
||||||
Object.keys(config).forEach(prop => {
|
|
||||||
saveConfig[prop] = {
|
|
||||||
...config[prop],
|
|
||||||
isShowColumn: config[prop].hide ? 'N' : 'Y', // hide=true checkbox选中→'N',hide=false checkbox不选中→'Y'
|
|
||||||
isExport: config[prop].isExport || 'Y' // 默认导出
|
|
||||||
}
|
|
||||||
})
|
|
||||||
await saveColumnConfig(pageId, saveConfig)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 从 IndexedDB 加载列配置并应用到 fieldList(在 initTableOption 之前调用)
|
|
||||||
const loadColumnConfigToFieldList = async () => {
|
|
||||||
if (props.model !== 'default' || !fieldListRef.value || fieldListRef.value.length === 0) return
|
|
||||||
|
|
||||||
try {
|
|
||||||
const pageId = (route.params.id as string) || props.tableId
|
|
||||||
const savedConfig = await getColumnConfig(pageId)
|
|
||||||
|
|
||||||
if (savedConfig) {
|
|
||||||
// 修改 fieldList 中的 webEntity.isShowColumn
|
|
||||||
fieldListRef.value.forEach((field: any) => {
|
|
||||||
if (field.webEntity && field.fieldCode && savedConfig[field.fieldCode] !== undefined) {
|
|
||||||
const colConfig = savedConfig[field.fieldCode]
|
|
||||||
// 优先使用 isShowColumn,如果没有则使用 hide 转换
|
|
||||||
if (colConfig.isShowColumn !== undefined) {
|
|
||||||
field.webEntity.isShowColumn = colConfig.isShowColumn
|
|
||||||
} else if (colConfig.hide !== undefined) {
|
|
||||||
// hide=true checkbox选中→'N',hide=false checkbox不选中→'Y'
|
|
||||||
field.webEntity.isShowColumn = colConfig.hide ? 'N' : 'Y'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('加载列配置到 fieldList 失败:', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 从 IndexedDB 加载列配置并应用到 crudRef(在 tableOption 初始化之后调用)
|
|
||||||
const loadColumnConfigToCrudRef = async () => {
|
|
||||||
if (props.model !== 'default' || !tableOption.value.column) return
|
|
||||||
|
|
||||||
try {
|
|
||||||
const pageId = (route.params.id as string) || props.tableId
|
|
||||||
const savedConfig = await getColumnConfig(pageId)
|
|
||||||
|
|
||||||
if (savedConfig && tableOption.value.column) {
|
|
||||||
// 应用配置到 tableOption.column
|
|
||||||
Object.keys(savedConfig).forEach(prop => {
|
|
||||||
if (tableOption.value.column[prop]) {
|
|
||||||
const colConfig = savedConfig[prop]
|
|
||||||
// 优先使用 isShowColumn 转换,如果没有则使用 hide
|
|
||||||
// isShowColumn='Y' 表示 checkbox 未选中,所以 hide=false
|
|
||||||
// isShowColumn='N' 表示 checkbox 选中,所以 hide=true
|
|
||||||
if (colConfig.isShowColumn !== undefined) {
|
|
||||||
tableOption.value.column[prop].hide = colConfig.isShowColumn === 'N'
|
|
||||||
} else if (colConfig.hide !== undefined) {
|
|
||||||
tableOption.value.column[prop].hide = colConfig.hide
|
|
||||||
}
|
|
||||||
if (colConfig.fixed !== undefined) {
|
|
||||||
tableOption.value.column[prop].fixed = colConfig.fixed
|
|
||||||
}
|
|
||||||
if (colConfig.sortable !== undefined) {
|
|
||||||
tableOption.value.column[prop].sortable = colConfig.sortable
|
|
||||||
}
|
|
||||||
if (colConfig.isExport !== undefined) {
|
|
||||||
tableOption.value.column[prop].isExport = colConfig.isExport
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 等待 DOM 更新后同步到 crudRef
|
|
||||||
await nextTick()
|
|
||||||
await nextTick()
|
|
||||||
|
|
||||||
// 使用重试机制确保 crudRef 准备好
|
|
||||||
let retryCount = 0
|
|
||||||
const maxRetries = 10
|
|
||||||
const tryApplyToCrudRef = () => {
|
|
||||||
if (crudRef.value && crudRef.value.columnOption) {
|
|
||||||
crudRef.value.columnOption.forEach((column: any) => {
|
|
||||||
if (savedConfig[column.prop]) {
|
|
||||||
const colConfig = savedConfig[column.prop]
|
|
||||||
// isShowColumn='Y' 表示 checkbox 未选中,所以 hide=false
|
|
||||||
// isShowColumn='N' 表示 checkbox 选中,所以 hide=true
|
|
||||||
if (colConfig.isShowColumn !== undefined) {
|
|
||||||
column.hide = colConfig.isShowColumn === 'N'
|
|
||||||
} else if (colConfig.hide !== undefined) {
|
|
||||||
column.hide = colConfig.hide
|
|
||||||
}
|
|
||||||
if (colConfig.fixed !== undefined) {
|
|
||||||
column.fixed = colConfig.fixed
|
|
||||||
}
|
|
||||||
if (colConfig.sortable !== undefined) {
|
|
||||||
column.sortable = colConfig.sortable
|
|
||||||
}
|
|
||||||
if (colConfig.isExport !== undefined) {
|
|
||||||
column.isExport = colConfig.isExport
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
if (crudRef.value.$refs && crudRef.value.$refs.table) {
|
|
||||||
crudRef.value.$refs.table.doLayout()
|
|
||||||
}
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
while (retryCount < maxRetries && !tryApplyToCrudRef()) {
|
|
||||||
retryCount++
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 100))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('加载列配置到 crudRef 失败:', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const subDataFormatting = (data, type) => {
|
const subDataFormatting = (data, type) => {
|
||||||
if (tabsColumn.value) {
|
if (tabsColumn.value) {
|
||||||
tabsColumn.value.forEach((item) => {
|
tabsColumn.value.forEach((item) => {
|
||||||
@@ -1988,34 +1739,15 @@ const expandChanges = (row, expendList) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 计算需要导出的列字段(英文字段名)
|
|
||||||
const exportFields = computed(() => {
|
|
||||||
if (!tableOption.value.column) return []
|
|
||||||
|
|
||||||
const fields: string[] = []
|
|
||||||
Object.keys(tableOption.value.column).forEach(prop => {
|
|
||||||
const column = tableOption.value.column[prop]
|
|
||||||
// 如果 isExport 为 'Y' 或者未设置(默认导出),则添加到导出列表
|
|
||||||
if (column.isExport === 'Y' || (column.isExport === undefined && !column.hide)) {
|
|
||||||
fields.push(prop)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return fields
|
|
||||||
})
|
|
||||||
|
|
||||||
const exportTableData = async () => {
|
const exportTableData = async () => {
|
||||||
const exportBtn = buttonObj.value.header.exportBtn
|
const exportBtn = buttonObj.value.header.exportBtn
|
||||||
const isSelect = tableSelect.value.length
|
const isSelect = tableSelect.value.length
|
||||||
await message.confirm(isSelect ? t('Avue.crud.exportTip') : t('Avue.crud.exportAllTip'))
|
await message.confirm(isSelect ? t('Avue.crud.exportTip') : t('Avue.crud.exportAllTip'))
|
||||||
exportBtn.params.loading = true
|
exportBtn.params.loading = true
|
||||||
const searchObj: any = isSelect
|
const searchObj = isSelect
|
||||||
? { jeeLowCode_export_ids: selectIds.value }
|
? { jeeLowCode_export_ids: selectIds.value }
|
||||||
: await getSearchData('search')
|
: await getSearchData('search')
|
||||||
TableApi.exportExcelData(props.tableId, {
|
TableApi.exportExcelData(props.tableId, searchObj)
|
||||||
...searchObj,
|
|
||||||
jeeLowCode_export_fields: exportFields.value
|
|
||||||
})
|
|
||||||
.then((data) => download.excel(data, tableInfo.value.tableDescribe, 'xlsx'))
|
.then((data) => download.excel(data, tableInfo.value.tableDescribe, 'xlsx'))
|
||||||
.finally(() => (exportBtn.params.loading = false))
|
.finally(() => (exportBtn.params.loading = false))
|
||||||
}
|
}
|
||||||
@@ -2286,11 +2018,6 @@ const beforeUnload = (event) => {
|
|||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
window.addEventListener('beforeunload', beforeUnload)
|
window.addEventListener('beforeunload', beforeUnload)
|
||||||
|
|
||||||
// 监听并替换列显隐按钮
|
|
||||||
if (props.model === 'default') {
|
|
||||||
replaceColumnButton()
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
@@ -2335,7 +2062,15 @@ defineExpose({
|
|||||||
max-width: calc(100% - 210px);
|
max-width: calc(100% - 210px);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.show_fixed_bar>div> ::v-deep(.avue-crud)>.avue-crud__body>.el-card__body>.el-form>div>.el-table__inner-wrapper>.el-table__body-wrapper {
|
&.show_fixed_bar
|
||||||
|
> div
|
||||||
|
> ::v-deep(.avue-crud)
|
||||||
|
> .avue-crud__body
|
||||||
|
> .el-card__body
|
||||||
|
> .el-form
|
||||||
|
> div
|
||||||
|
> .el-table__inner-wrapper
|
||||||
|
> .el-table__body-wrapper {
|
||||||
.el-scrollbar__bar.is-horizontal {
|
.el-scrollbar__bar.is-horizontal {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
@@ -2450,7 +2185,6 @@ defineExpose({
|
|||||||
|
|
||||||
.el-form--default {
|
.el-form--default {
|
||||||
.el-table--border {
|
.el-table--border {
|
||||||
|
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
width: 0;
|
width: 0;
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="dic-table-select-box w-100%">
|
<div class="dic-table-select-box w-100%">
|
||||||
{{ JSON.stringify(props) }}
|
|
||||||
<div
|
<div
|
||||||
class="table-input pos-relative"
|
class="table-input pos-relative"
|
||||||
:class="[{ disabled }, type, size]"
|
:class="[{ disabled }, type, size]"
|
||||||
@@ -274,9 +273,9 @@ const getCurrTableSelect = (type?) => {
|
|||||||
const dicObj = {}
|
const dicObj = {}
|
||||||
const textList: string[] = []
|
const textList: string[] = []
|
||||||
const ids = tableRef.value.tableSelect.map((item) => {
|
const ids = tableRef.value.tableSelect.map((item) => {
|
||||||
if (item[props.column.dictCode]) {
|
if (item[props.column.dictText]) {
|
||||||
dicObj[item[dicCode.value]] = item[props.column.dictCode]
|
dicObj[item[dicCode.value]] = item[props.column.dictText]
|
||||||
textList.push(item[props.column.dictCode])
|
textList.push(item[props.column.dictText])
|
||||||
}
|
}
|
||||||
return item[dicCode.value]
|
return item[dicCode.value]
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -217,7 +217,7 @@ defineOptions({ name: 'UserSelect' })
|
|||||||
* all_sub 所有下级
|
* all_sub 所有下级
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export interface Column {
|
interface Column {
|
||||||
label: string
|
label: string
|
||||||
findType: 'all' | 'now' | 'sub' | 'all_sub' | 'direct_sub' //查询类型
|
findType: 'all' | 'now' | 'sub' | 'all_sub' | 'direct_sub' //查询类型
|
||||||
columnKey: Array<'mobile' | 'email' | 'sex' | 'post' | 'deptName'> //扩展显示列
|
columnKey: Array<'mobile' | 'email' | 'sex' | 'post' | 'deptName'> //扩展显示列
|
||||||
|
|||||||
@@ -34,7 +34,7 @@ const dicObj = {
|
|||||||
{ label: '邮箱', value: 'email' }, { label: '性别', value: 'sex' }, { label: '岗位', value: 'post' }, { label: '部门', value: 'deptName' }
|
{ label: '邮箱', value: 'email' }, { label: '性别', value: 'sex' }, { label: '岗位', value: 'post' }, { label: '部门', value: 'deptName' }
|
||||||
],
|
],
|
||||||
userFindType: [{ label: '全部用户', value: 'all' }, { label: '本级用户', value: 'now' }, { label: '本级及下级用户', value: 'sub' }],
|
userFindType: [{ label: '全部用户', value: 'all' }, { label: '本级用户', value: 'now' }, { label: '本级及下级用户', value: 'sub' }],
|
||||||
deptFindType: [{ label: '全部部门', value: 'all' }, { label: '本级部门', value: 'now' }, { label: '本级及下级部门', value: 'sub' }, { label: '外协单位', value: 'out' }, { label: '内部单位', value: 'internal' }],
|
deptFindType: [{ label: '全部部门', value: 'all' }, { label: '本级部门', value: 'now' }, { label: '本级及下级部门', value: 'sub' }],
|
||||||
customControlType: [{ label: '未全局注册', value: false }, { label: '已全局注册', value: true }],
|
customControlType: [{ label: '未全局注册', value: false }, { label: '已全局注册', value: true }],
|
||||||
regionType: [{ label: '全球-国家', value: 'gj' }, { label: '中国-省市区', value: 'ssq' }, { label: '中国-省市', value: 'ss' }, { label: '中国-省', value: 's' }],
|
regionType: [{ label: '全球-国家', value: 'gj' }, { label: '中国-省市区', value: 'ssq' }, { label: '中国-省市', value: 'ss' }, { label: '中国-省', value: 's' }],
|
||||||
dictTextFormatter: [
|
dictTextFormatter: [
|
||||||
|
|||||||
@@ -7,7 +7,6 @@ import { encryptAES, decryptAES } from '@/components/LowDesign/src/utils/aes'
|
|||||||
import { useUserStoreWithOut } from '@/store/modules/user'
|
import { useUserStoreWithOut } from '@/store/modules/user'
|
||||||
import { useI18n } from '@/hooks/web/useI18n';
|
import { useI18n } from '@/hooks/web/useI18n';
|
||||||
import router from '@/router/index'
|
import router from '@/router/index'
|
||||||
import {exportExcelDataCustom} from '@/api/design/table'
|
|
||||||
|
|
||||||
const message = useMessage() // 消息弹窗
|
const message = useMessage() // 消息弹窗
|
||||||
|
|
||||||
@@ -19,7 +18,6 @@ export default {
|
|||||||
* @param options 请求配置 如:{ params:{ text:'测试' } }
|
* @param options 请求配置 如:{ params:{ text:'测试' } }
|
||||||
*/
|
*/
|
||||||
requestApi: (Method, url, options) => callApiFun(Method, url, options),
|
requestApi: (Method, url, options) => callApiFun(Method, url, options),
|
||||||
exportExcelCustom: (explain,tableId, data) => exportExcelDataCustom(explain,tableId, data),
|
|
||||||
cloneDeep, //深拷贝
|
cloneDeep, //深拷贝
|
||||||
listToTree,//列表转树结构
|
listToTree,//列表转树结构
|
||||||
formatDate,//时间格式化
|
formatDate,//时间格式化
|
||||||
|
|||||||
@@ -546,15 +546,13 @@ export const formDataFormatting = (formOption, formData, formType) => {
|
|||||||
echoObj[dicKey].push(...data[key].split(','))
|
echoObj[dicKey].push(...data[key].split(','))
|
||||||
}
|
}
|
||||||
} else echoObj[type].push(...data[key].split(','))
|
} else echoObj[type].push(...data[key].split(','))
|
||||||
} else if (column[key]?.controlType == 'date'||key=='create_time') {
|
} else if (column[key]?.controlType == 'date') {
|
||||||
|
|
||||||
if (data[key]) {
|
if (data[key]) {
|
||||||
if (typeof data[key] == 'number' || typeof data[key] == 'string') {
|
if (typeof data[key] == 'number' || typeof data[key] == 'string') {
|
||||||
data[key] = data[key] + ''
|
data[key] = data[key] + ''
|
||||||
if (!(/[-|\/]/g.test(data[key]))) {
|
if (!(/[-|\/]/g.test(data[key]))) {
|
||||||
//如果是时间戳强制转换
|
//如果是时间戳强制转换
|
||||||
const timestamp = parseInt(data[key], 10)
|
data[key] = formatDate(new Date(data[key]), column[key].valueFormat || 'YYYY-MM-DD HH:mm:ss')
|
||||||
data[key] = formatDate(new Date(timestamp), column[key].valueFormat || 'YYYY-MM-DD HH:mm:ss')
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -116,7 +116,7 @@ const initColumn = (data, componentData, columnParams) => {
|
|||||||
const summaryBottom = {}
|
const summaryBottom = {}
|
||||||
const tableDic = {}
|
const tableDic = {}
|
||||||
data.forEach(item => {
|
data.forEach(item => {
|
||||||
const { dictEntity, webEntity, queryEntity, exportEntity, summaryEntity, fieldCode, fieldName, fieldType, fieldLen, fieldPointLen, fieldDefaultVal, sortNum } = item
|
const { dictEntity, webEntity, queryEntity, exportEntity, summaryEntity, fieldCode, fieldName, fieldType, fieldLen, fieldPointLen, fieldDefaultVal } = item
|
||||||
const { cellWidthType, cellWidth, controlsConfig, verifyConfig, isShowForm, isShowList, isDbSelect, isShowColumn, isShowSort, isRequired } = webEntity
|
const { cellWidthType, cellWidth, controlsConfig, verifyConfig, isShowForm, isShowList, isDbSelect, isShowColumn, isShowSort, isRequired } = webEntity
|
||||||
let controlType = webEntity.controlType || 'input'
|
let controlType = webEntity.controlType || 'input'
|
||||||
const { queryIsWeb, queryMode, queryConfig, queryDefaultVal } = queryEntity
|
const { queryIsWeb, queryMode, queryConfig, queryDefaultVal } = queryEntity
|
||||||
@@ -140,8 +140,7 @@ const initColumn = (data, componentData, columnParams) => {
|
|||||||
dataType: ['Integer', 'BigInt', 'BigDecimal'].includes(fieldType) || controlType == 'number' ? 'number' : 'string',
|
dataType: ['Integer', 'BigInt', 'BigDecimal'].includes(fieldType) || controlType == 'number' ? 'number' : 'string',
|
||||||
overHidden: isCardTable ? false : true,
|
overHidden: isCardTable ? false : true,
|
||||||
className: `low-field__${fieldCode} control-${controlType}`,
|
className: `low-field__${fieldCode} control-${controlType}`,
|
||||||
labelClassName: `low-header__${fieldCode}`,
|
labelClassName: `low-header__${fieldCode}`
|
||||||
sortNum: sortNum
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//租户字段的列表、表单权限控制
|
//租户字段的列表、表单权限控制
|
||||||
|
|||||||
@@ -171,7 +171,7 @@ const canvasClick = (e) => {
|
|||||||
token: backToken.value
|
token: backToken.value
|
||||||
}
|
}
|
||||||
reqCheck(data).then((res) => {
|
reqCheck(data).then((res) => {
|
||||||
if (res.repCode == '0000') {
|
if (res?.repCode == '0000') {
|
||||||
barAreaColor.value = '#4cae4c'
|
barAreaColor.value = '#4cae4c'
|
||||||
barAreaBorderColor.value = '#5cb85c'
|
barAreaBorderColor.value = '#5cb85c'
|
||||||
text.value = t('captcha.success')
|
text.value = t('captcha.success')
|
||||||
@@ -228,14 +228,14 @@ const getPictrue = async () => {
|
|||||||
captchaType: captchaType.value
|
captchaType: captchaType.value
|
||||||
}
|
}
|
||||||
const res = await getCode(data)
|
const res = await getCode(data)
|
||||||
if (res.repCode == '0000') {
|
if (res?.repCode == '0000') {
|
||||||
pointBackImgBase.value = res.repData.originalImageBase64
|
pointBackImgBase.value = res?.repData?.originalImageBase64
|
||||||
backToken.value = res.repData.token
|
backToken.value = res?.repData?.token
|
||||||
secretKey.value = res.repData.secretKey
|
secretKey.value = res?.repData?.secretKey
|
||||||
poinTextList.value = res.repData.wordList
|
poinTextList.value = res?.repData?.wordList || []
|
||||||
text.value = t('captcha.point') + '【' + poinTextList.value.join(',') + '】'
|
text.value = t('captcha.point') + '【' + poinTextList.value?.join(',') + '】'
|
||||||
} else {
|
} else {
|
||||||
text.value = res.repMsg
|
text.value = res?.repMsg
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//坐标转换函数
|
//坐标转换函数
|
||||||
|
|||||||
@@ -287,7 +287,7 @@ const end = () => {
|
|||||||
token: backToken.value
|
token: backToken.value
|
||||||
}
|
}
|
||||||
reqCheck(data).then((res) => {
|
reqCheck(data).then((res) => {
|
||||||
if (res.repCode == '0000') {
|
if (res?.repCode == '0000') {
|
||||||
moveBlockBackgroundColor.value = '#5cb85c'
|
moveBlockBackgroundColor.value = '#5cb85c'
|
||||||
leftBarBorderColor.value = '#5cb85c'
|
leftBarBorderColor.value = '#5cb85c'
|
||||||
iconColor.value = '#fff'
|
iconColor.value = '#fff'
|
||||||
@@ -364,13 +364,13 @@ const getPictrue = async () => {
|
|||||||
captchaType: captchaType.value
|
captchaType: captchaType.value
|
||||||
}
|
}
|
||||||
const res = await getCode(data)
|
const res = await getCode(data)
|
||||||
if (res.repCode == '0000') {
|
if (res?.repCode == '0000') {
|
||||||
backImgBase.value = res.repData.originalImageBase64
|
backImgBase.value = res?.repData?.originalImageBase64
|
||||||
blockBackImgBase.value = res.repData.jigsawImageBase64
|
blockBackImgBase.value = res?.repData?.jigsawImageBase64
|
||||||
backToken.value = res.repData.token
|
backToken.value = res?.repData?.token
|
||||||
secretKey.value = res.repData.secretKey
|
secretKey.value = res?.repData?.secretKey
|
||||||
} else {
|
} else {
|
||||||
tipWords.value = res.repMsg
|
tipWords.value = res?.repMsg
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ const config: {
|
|||||||
/**
|
/**
|
||||||
* 接口请求超时时间
|
* 接口请求超时时间
|
||||||
*/
|
*/
|
||||||
request_timeout: 24 * 60 * 60 * 1000,
|
request_timeout: 30000,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 默认接口请求类型
|
* 默认接口请求类型
|
||||||
|
|||||||
@@ -159,8 +159,6 @@ 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,
|
||||||
@@ -170,7 +168,6 @@ service.interceptors.response.use(
|
|||||||
t('sys.api.errMsg901') +
|
t('sys.api.errMsg901') +
|
||||||
'</div>'
|
'</div>'
|
||||||
})
|
})
|
||||||
console.log(msg);
|
|
||||||
return Promise.reject(new Error(msg))
|
return Promise.reject(new Error(msg))
|
||||||
} else if (code === 1600001003) {
|
} else if (code === 1600001003) {
|
||||||
ElNotification({
|
ElNotification({
|
||||||
|
|||||||
@@ -102,17 +102,10 @@ router.beforeEach(async (to, from, next) => {
|
|||||||
} else {
|
} else {
|
||||||
if(import.meta.env.VITE_DEFAULT_SSO =='true'){
|
if(import.meta.env.VITE_DEFAULT_SSO =='true'){
|
||||||
authUtil.setTenantId("1")
|
authUtil.setTenantId("1")
|
||||||
// 正确构造包含查询参数的重定向URL
|
|
||||||
let redirectUrl = to.fullPath;
|
|
||||||
if (Object.keys(to.query).length > 0) {
|
|
||||||
const queryParams = new URLSearchParams(to.query as Record<string, string>).toString();
|
|
||||||
redirectUrl = `${to.path}?${queryParams}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const redirectUri =
|
const redirectUri =
|
||||||
location.origin +
|
location.origin +
|
||||||
'/social-login?' +
|
'/social-login?' +
|
||||||
`type=100&redirect=${encodeURIComponent(redirectUrl)}`
|
`type=100&redirect=${to.fullPath}`
|
||||||
|
|
||||||
// 进行跳转
|
// 进行跳转
|
||||||
const res = await LoginApi.socialAuthRedirect(100, encodeURIComponent(redirectUri))
|
const res = await LoginApi.socialAuthRedirect(100, encodeURIComponent(redirectUri))
|
||||||
|
|||||||
@@ -7,8 +7,7 @@ import {
|
|||||||
MapChart,
|
MapChart,
|
||||||
PictorialBarChart,
|
PictorialBarChart,
|
||||||
RadarChart,
|
RadarChart,
|
||||||
GaugeChart,
|
GaugeChart
|
||||||
CandlestickChart
|
|
||||||
} from 'echarts/charts'
|
} from 'echarts/charts'
|
||||||
|
|
||||||
import {
|
import {
|
||||||
@@ -42,8 +41,7 @@ echarts.use([
|
|||||||
CanvasRenderer,
|
CanvasRenderer,
|
||||||
PictorialBarChart,
|
PictorialBarChart,
|
||||||
RadarChart,
|
RadarChart,
|
||||||
GaugeChart,
|
GaugeChart
|
||||||
CandlestickChart
|
|
||||||
])
|
])
|
||||||
|
|
||||||
export default echarts
|
export default echarts
|
||||||
|
|||||||
@@ -57,17 +57,6 @@ const remainingRouter: AppRouteRecordRaw[] = [
|
|||||||
name: 'Home',
|
name: 'Home',
|
||||||
meta: {},
|
meta: {},
|
||||||
children: [
|
children: [
|
||||||
// {
|
|
||||||
// path: 'index',
|
|
||||||
// component: () => import('@/views/Home/Index10.vue'),
|
|
||||||
// name: 'Index',
|
|
||||||
// meta: {
|
|
||||||
// title: t('router.home'),
|
|
||||||
// icon: 'ep:home-filled',
|
|
||||||
// noCache: false,
|
|
||||||
// affix: true
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
{
|
{
|
||||||
path: 'index',
|
path: 'index',
|
||||||
component: () => import('@/views/Home/Index10.vue'),
|
component: () => import('@/views/Home/Index10.vue'),
|
||||||
@@ -78,30 +67,6 @@ const remainingRouter: AppRouteRecordRaw[] = [
|
|||||||
noCache: false,
|
noCache: false,
|
||||||
affix: true
|
affix: true
|
||||||
}
|
}
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'region', // 区域数据看板
|
|
||||||
component: () => import('@/views/Home/Index12.vue'),
|
|
||||||
name: 'RegionIndex',
|
|
||||||
meta: {
|
|
||||||
title: '区域视角数据看板',
|
|
||||||
icon: 'ep:home-filled',
|
|
||||||
noCache: false,
|
|
||||||
hidden: true,
|
|
||||||
affix: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'park', // 园区数据看板
|
|
||||||
component: () => import('@/views/Home/Index13.vue'),
|
|
||||||
name: 'ParkIndex',
|
|
||||||
meta: {
|
|
||||||
title: '园区视角数据看板',
|
|
||||||
icon: 'ep:home-filled',
|
|
||||||
hidden: true,
|
|
||||||
noCache: false,
|
|
||||||
affix: false
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@@ -399,17 +364,6 @@ const remainingRouter: AppRouteRecordRaw[] = [
|
|||||||
catalogue: true,
|
catalogue: true,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/screen/powerMonitoring',
|
|
||||||
component: () => import('@/views/screen/powerMonitoring.vue'),
|
|
||||||
name: 'powerMonitoring',
|
|
||||||
meta: {
|
|
||||||
hidden: true,
|
|
||||||
title: '动环监控大屏',
|
|
||||||
noTagsView: true,
|
|
||||||
catalogue: true,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/screen/main',
|
path: '/screen/main',
|
||||||
component: () => import('@/views/screen/mainScreen.vue'),
|
component: () => import('@/views/screen/mainScreen.vue'),
|
||||||
|
|||||||
@@ -1,243 +0,0 @@
|
|||||||
/**
|
|
||||||
* IndexedDB 工具类
|
|
||||||
* 用于存储和读取表格列配置(显隐/冻结/过滤/排序)
|
|
||||||
*/
|
|
||||||
|
|
||||||
const DB_NAME = 'lc_frontend_db'
|
|
||||||
const DB_VERSION = 1
|
|
||||||
const STORE_NAME = 'table_column_config'
|
|
||||||
|
|
||||||
let dbInstance: IDBDatabase | null = null
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 打开数据库并确保对象存储存在
|
|
||||||
*/
|
|
||||||
const openDBWithStore = (version: number): Promise<IDBDatabase> => {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const request = indexedDB.open(DB_NAME, version)
|
|
||||||
|
|
||||||
request.onerror = () => {
|
|
||||||
reject(request.error)
|
|
||||||
}
|
|
||||||
|
|
||||||
request.onsuccess = () => {
|
|
||||||
const db = request.result
|
|
||||||
|
|
||||||
// 检查对象存储是否存在
|
|
||||||
if (!db.objectStoreNames.contains(STORE_NAME)) {
|
|
||||||
// 对象存储不存在,需要升级数据库
|
|
||||||
db.close()
|
|
||||||
|
|
||||||
// 用更高版本打开以触发升级
|
|
||||||
const upgradeRequest = indexedDB.open(DB_NAME, db.version + 1)
|
|
||||||
|
|
||||||
upgradeRequest.onerror = () => {
|
|
||||||
reject(upgradeRequest.error)
|
|
||||||
}
|
|
||||||
|
|
||||||
upgradeRequest.onupgradeneeded = (event) => {
|
|
||||||
const upgradeDb = (event.target as IDBOpenDBRequest).result
|
|
||||||
// 如果对象存储不存在,创建它
|
|
||||||
if (!upgradeDb.objectStoreNames.contains(STORE_NAME)) {
|
|
||||||
upgradeDb.createObjectStore(STORE_NAME, { keyPath: 'key' })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
upgradeRequest.onsuccess = () => {
|
|
||||||
resolve(upgradeRequest.result)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
resolve(db)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
request.onupgradeneeded = (event) => {
|
|
||||||
const db = (event.target as IDBOpenDBRequest).result
|
|
||||||
if (!db.objectStoreNames.contains(STORE_NAME)) {
|
|
||||||
db.createObjectStore(STORE_NAME, { keyPath: 'key' })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 初始化 IndexedDB
|
|
||||||
*/
|
|
||||||
const initDB = (): Promise<IDBDatabase> => {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
if (dbInstance) {
|
|
||||||
// 检查对象存储是否存在
|
|
||||||
if (dbInstance.objectStoreNames.contains(STORE_NAME)) {
|
|
||||||
resolve(dbInstance)
|
|
||||||
return
|
|
||||||
} else {
|
|
||||||
// 对象存储不存在,需要重新初始化
|
|
||||||
dbInstance.close()
|
|
||||||
dbInstance = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 先尝试获取当前数据库版本(不指定版本号打开)
|
|
||||||
const checkRequest = indexedDB.open(DB_NAME)
|
|
||||||
|
|
||||||
checkRequest.onsuccess = () => {
|
|
||||||
const checkDb = checkRequest.result
|
|
||||||
const currentVersion = checkDb.version
|
|
||||||
checkDb.close()
|
|
||||||
|
|
||||||
// 使用当前版本或更高版本打开
|
|
||||||
const targetVersion = Math.max(currentVersion, DB_VERSION)
|
|
||||||
openDBWithStore(targetVersion)
|
|
||||||
.then((db) => {
|
|
||||||
dbInstance = db
|
|
||||||
resolve(dbInstance)
|
|
||||||
})
|
|
||||||
.catch(reject)
|
|
||||||
}
|
|
||||||
|
|
||||||
checkRequest.onerror = () => {
|
|
||||||
// 如果检查失败,直接使用默认版本尝试打开
|
|
||||||
openDBWithStore(DB_VERSION)
|
|
||||||
.then((db) => {
|
|
||||||
dbInstance = db
|
|
||||||
resolve(dbInstance)
|
|
||||||
})
|
|
||||||
.catch(reject)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 列配置接口
|
|
||||||
*/
|
|
||||||
export interface ColumnConfig {
|
|
||||||
hide?: boolean
|
|
||||||
fixed?: string | boolean
|
|
||||||
sortable?: string | boolean
|
|
||||||
isShowColumn?: string // 'Y' 表示显示,'N' 表示隐藏
|
|
||||||
isExport?: string // 'Y' 表示导出,'N' 表示不导出
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 保存列配置
|
|
||||||
* @param key 唯一标识(通常是 route.params.id)
|
|
||||||
* @param config 列配置对象,格式:{ prop: { hide, fixed, sortable, isExport } }
|
|
||||||
*/
|
|
||||||
export const saveColumnConfig = async (key: string, config: Record<string, ColumnConfig>): Promise<void> => {
|
|
||||||
try {
|
|
||||||
const db = await initDB()
|
|
||||||
const transaction = db.transaction([STORE_NAME], 'readwrite')
|
|
||||||
const store = transaction.objectStore(STORE_NAME)
|
|
||||||
|
|
||||||
await new Promise<void>((resolve, reject) => {
|
|
||||||
const request = store.put({ key, config, updateTime: Date.now() })
|
|
||||||
request.onsuccess = () => resolve()
|
|
||||||
request.onerror = () => reject(request.error)
|
|
||||||
})
|
|
||||||
} catch (error) {
|
|
||||||
console.error('保存列配置失败:', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 读取列配置
|
|
||||||
* @param key 唯一标识(通常是 route.params.id)
|
|
||||||
* @returns 列配置对象,格式:{ prop: { hide, fixed, sortable, isExport } }
|
|
||||||
*/
|
|
||||||
export const getColumnConfig = async (key: string): Promise<Record<string, ColumnConfig> | null> => {
|
|
||||||
try {
|
|
||||||
const db = await initDB()
|
|
||||||
const transaction = db.transaction([STORE_NAME], 'readonly')
|
|
||||||
const store = transaction.objectStore(STORE_NAME)
|
|
||||||
|
|
||||||
return new Promise<Record<string, ColumnConfig> | null>((resolve, reject) => {
|
|
||||||
const request = store.get(key)
|
|
||||||
request.onsuccess = () => {
|
|
||||||
const result = request.result
|
|
||||||
resolve(result ? result.config : null)
|
|
||||||
}
|
|
||||||
request.onerror = () => reject(request.error)
|
|
||||||
})
|
|
||||||
} catch (error) {
|
|
||||||
console.error('读取列配置失败:', error)
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 删除列配置
|
|
||||||
* @param key 唯一标识(通常是 route.params.id)
|
|
||||||
*/
|
|
||||||
export const deleteColumnConfig = async (key: string): Promise<void> => {
|
|
||||||
try {
|
|
||||||
const db = await initDB()
|
|
||||||
const transaction = db.transaction([STORE_NAME], 'readwrite')
|
|
||||||
const store = transaction.objectStore(STORE_NAME)
|
|
||||||
|
|
||||||
await new Promise<void>((resolve, reject) => {
|
|
||||||
const request = store.delete(key)
|
|
||||||
request.onsuccess = () => resolve()
|
|
||||||
request.onerror = () => reject(request.error)
|
|
||||||
})
|
|
||||||
} catch (error) {
|
|
||||||
console.error('删除列配置失败:', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 保存搜索区域显示状态
|
|
||||||
* @param key 唯一标识(通常是 route.params.id)
|
|
||||||
* @param visible 是否显示
|
|
||||||
*/
|
|
||||||
export const saveSearchVisible = async (key: string, visible: boolean): Promise<void> => {
|
|
||||||
try {
|
|
||||||
const db = await initDB()
|
|
||||||
const transaction = db.transaction([STORE_NAME], 'readwrite')
|
|
||||||
const store = transaction.objectStore(STORE_NAME)
|
|
||||||
|
|
||||||
const data = await new Promise<any>((resolve, reject) => {
|
|
||||||
const request = store.get(key)
|
|
||||||
request.onsuccess = () => resolve(request.result)
|
|
||||||
request.onerror = () => reject(request.error)
|
|
||||||
})
|
|
||||||
|
|
||||||
const config = data?.config || {}
|
|
||||||
await new Promise<void>((resolve, reject) => {
|
|
||||||
const request = store.put({
|
|
||||||
key,
|
|
||||||
config,
|
|
||||||
searchVisible: visible,
|
|
||||||
updateTime: Date.now()
|
|
||||||
})
|
|
||||||
request.onsuccess = () => resolve()
|
|
||||||
request.onerror = () => reject(request.error)
|
|
||||||
})
|
|
||||||
} catch (error) {
|
|
||||||
console.error('保存搜索区域显示状态失败:', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 读取搜索区域显示状态
|
|
||||||
* @param key 唯一标识(通常是 route.params.id)
|
|
||||||
* @returns 是否显示
|
|
||||||
*/
|
|
||||||
export const getSearchVisible = async (key: string): Promise<boolean | null> => {
|
|
||||||
try {
|
|
||||||
const db = await initDB()
|
|
||||||
const transaction = db.transaction([STORE_NAME], 'readonly')
|
|
||||||
const store = transaction.objectStore(STORE_NAME)
|
|
||||||
|
|
||||||
return new Promise<boolean | null>((resolve, reject) => {
|
|
||||||
const request = store.get(key)
|
|
||||||
request.onsuccess = () => {
|
|
||||||
const result = request.result
|
|
||||||
resolve(result && result.searchVisible !== undefined ? result.searchVisible : null)
|
|
||||||
}
|
|
||||||
request.onerror = () => reject(request.error)
|
|
||||||
})
|
|
||||||
} catch (error) {
|
|
||||||
console.error('读取搜索区域显示状态失败:', error)
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -227,11 +227,13 @@ const getCookie = () => {
|
|||||||
// 根据域名,获得租户信息
|
// 根据域名,获得租户信息
|
||||||
const getTenantByWebsite = async () => {
|
const getTenantByWebsite = async () => {
|
||||||
const website = location.host
|
const website = location.host
|
||||||
|
try {
|
||||||
const res = await LoginApi.getTenantByWebsite(website)
|
const res = await LoginApi.getTenantByWebsite(website)
|
||||||
if (res) {
|
if (res) {
|
||||||
loginData.loginForm.tenantName = res.name
|
loginData.loginForm.tenantName = res.name
|
||||||
authUtil.setTenantId(res.id)
|
authUtil.setTenantId(res.id)
|
||||||
}
|
}
|
||||||
|
} catch (e) { }
|
||||||
}
|
}
|
||||||
const loading = ref() // ElLoading.service 返回的实例
|
const loading = ref() // ElLoading.service 返回的实例
|
||||||
// 登录
|
// 登录
|
||||||
@@ -268,12 +270,7 @@ const handleLogin = async (params) => {
|
|||||||
} else {
|
} else {
|
||||||
push({ path: redirect.value || permissionStore.addRouters[0].path })
|
push({ path: redirect.value || permissionStore.addRouters[0].path })
|
||||||
}
|
}
|
||||||
}
|
} finally {
|
||||||
catch (e) {
|
|
||||||
loginLoading.value = false
|
|
||||||
loading.value?.close()
|
|
||||||
}
|
|
||||||
finally {
|
|
||||||
loginLoading.value = false
|
loginLoading.value = false
|
||||||
loading.value?.close()
|
loading.value?.close()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
<el-input v-model="formData.processInstanceKey" disabled placeholder="请输入流程标识" />
|
<el-input v-model="formData.processInstanceKey" disabled placeholder="请输入流程标识" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="规则类型" prop="type">
|
<el-form-item label="规则类型" prop="type">
|
||||||
<el-select v-model="formData.type" clearable style="width: 100%" disabled>
|
<el-select v-model="formData.type" clearable style="width: 100%">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE)"
|
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE)"
|
||||||
:key="dict.value"
|
:key="dict.value"
|
||||||
@@ -165,7 +165,7 @@ const open = async (row) => {
|
|||||||
resetForm()
|
resetForm()
|
||||||
// 2. 再设置表单
|
// 2. 再设置表单
|
||||||
if (row != null) {
|
if (row != null) {
|
||||||
formData.value.type = 30
|
formData.value.type = undefined as unknown as number
|
||||||
formData.value.taskName = row.name
|
formData.value.taskName = row.name
|
||||||
formData.value.taskId = row.id
|
formData.value.taskId = row.id
|
||||||
formData.value.processInstanceName = row.processInstance.name
|
formData.value.processInstanceName = row.processInstance.name
|
||||||
|
|||||||
@@ -41,20 +41,18 @@
|
|||||||
<Icon icon="ep:close" />
|
<Icon icon="ep:close" />
|
||||||
不通过
|
不通过
|
||||||
</el-button>
|
</el-button>
|
||||||
|
<el-button type="primary" @click="openTaskUpdateAssigneeForm(item.id)">
|
||||||
<el-button type="primary" @click="handleCC(item)">
|
<Icon icon="ep:edit" />
|
||||||
<Icon icon="ep:position"/>
|
转办
|
||||||
抄送
|
|
||||||
</el-button>
|
</el-button>
|
||||||
<!-- <el-button type="primary" @click="handleDelegate(item)">
|
<el-button type="primary" @click="handleDelegate(item)">
|
||||||
<Icon icon="ep:position" />
|
<Icon icon="ep:position" />
|
||||||
委派
|
委派
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button type="primary" @click="handleSign(item)">
|
<el-button type="primary" @click="handleSign(item)">
|
||||||
<Icon icon="ep:plus" />
|
<Icon icon="ep:plus" />
|
||||||
加签
|
加签
|
||||||
</el-button> -->
|
</el-button>
|
||||||
|
|
||||||
<el-button type="warning" @click="handleBack(item)">
|
<el-button type="warning" @click="handleBack(item)">
|
||||||
<Icon icon="ep:back" />
|
<Icon icon="ep:back" />
|
||||||
回退
|
回退
|
||||||
@@ -104,7 +102,6 @@
|
|||||||
<TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />
|
<TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />
|
||||||
<!-- 加签,当前任务审批人为A,向前加签选了一个C,则需要C先审批,然后再是A审批,向后加签B,A审批完,需要B再审批完,才算完成这个任务节点 -->
|
<!-- 加签,当前任务审批人为A,向前加签选了一个C,则需要C先审批,然后再是A审批,向后加签B,A审批完,需要B再审批完,才算完成这个任务节点 -->
|
||||||
<TaskAddSignDialogForm ref="taskAddSignDialogForm" @success="getDetail" />
|
<TaskAddSignDialogForm ref="taskAddSignDialogForm" @success="getDetail" />
|
||||||
<TaskCCDialogForm ref="taskCCDialogForm"/>
|
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
@@ -122,7 +119,6 @@ import {registerComponent} from '@/utils/routerHelper'
|
|||||||
import { isEmpty } from '@/utils/is'
|
import { isEmpty } from '@/utils/is'
|
||||||
import router from '@/router/index'
|
import router from '@/router/index'
|
||||||
import { $Print } from '@smallwei/avue'
|
import { $Print } from '@smallwei/avue'
|
||||||
import TaskCCDialogForm from '../../processInstance/detail/TaskCCDialogForm.vue'
|
|
||||||
|
|
||||||
defineOptions({ name: 'BpmProcessInstanceDetail' })
|
defineOptions({ name: 'BpmProcessInstanceDetail' })
|
||||||
|
|
||||||
@@ -132,7 +128,6 @@ const {proxy} = getCurrentInstance() as any
|
|||||||
|
|
||||||
const userId = useUserStore().getUser.id // 当前登录的编号
|
const userId = useUserStore().getUser.id // 当前登录的编号
|
||||||
const id = query.id as unknown as number // 流程实例的编号
|
const id = query.id as unknown as number // 流程实例的编号
|
||||||
const read = query.read as unknown as boolean // 是否是待阅的标记
|
|
||||||
const processInstanceLoading = ref(false) // 流程实例的加载中
|
const processInstanceLoading = ref(false) // 流程实例的加载中
|
||||||
const processInstance = ref<any>({}) // 流程实例
|
const processInstance = ref<any>({}) // 流程实例
|
||||||
const bpmnXML = ref('') // BPMN XML
|
const bpmnXML = ref('') // BPMN XML
|
||||||
@@ -178,17 +173,9 @@ const handleAudit = async (task, pass) => {
|
|||||||
getDetail()
|
getDetail()
|
||||||
}
|
}
|
||||||
|
|
||||||
const taskCCDialogForm = ref()
|
|
||||||
/** 处理抄送按钮 */
|
|
||||||
const handleCC = (row) => {
|
|
||||||
taskCCDialogForm.value.open(row)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const printPage = async () => {
|
const printPage = async () => {
|
||||||
|
|
||||||
const {href} = router.resolve({
|
const { href } = router.resolve({ name: 'BpmProcessInstanceInfo',
|
||||||
name: 'BpmProcessInstanceInfo',
|
|
||||||
query: { id: String(id), isPrint: '1' }
|
query: { id: String(id), isPrint: '1' }
|
||||||
})
|
})
|
||||||
window.open(href, '_blank', 'noopener,noreferrer')
|
window.open(href, '_blank', 'noopener,noreferrer')
|
||||||
@@ -219,15 +206,6 @@ const handleSign = async (task) => {
|
|||||||
taskAddSignDialogForm.value.open(task.id)
|
taskAddSignDialogForm.value.open(task.id)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理待阅的操作
|
|
||||||
const handleRead = async () => {
|
|
||||||
if (read) {
|
|
||||||
// 向后端发送接口,让后端发起已阅接口
|
|
||||||
const data = await ProcessInstanceApi.handleProcessInstanceCC(id + '')
|
|
||||||
console.log(JSON.stringify(data))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 获得详情 */
|
/** 获得详情 */
|
||||||
const getDetail = () => {
|
const getDetail = () => {
|
||||||
// 1. 获得流程实例相关
|
// 1. 获得流程实例相关
|
||||||
@@ -253,10 +231,6 @@ const getProcessInstance = async () => {
|
|||||||
if (processDefinition.formType === 10) {
|
if (processDefinition.formType === 10) {
|
||||||
detailForm.value.formId = processDefinition.formId
|
detailForm.value.formId = processDefinition.formId
|
||||||
detailForm.value.optionsData = JSON.parse(processDefinition.formConf)
|
detailForm.value.optionsData = JSON.parse(processDefinition.formConf)
|
||||||
if (data.formVariables.jeelowcode_subtable_data) {
|
|
||||||
data.formVariables = {...data.formVariables, ...data.formVariables.jeelowcode_subtable_data}
|
|
||||||
delete data.formVariables.jeelowcode_subtable_data
|
|
||||||
}
|
|
||||||
detailForm.value.defaultData = data.formVariables
|
detailForm.value.defaultData = data.formVariables
|
||||||
// setConfAndFields2(
|
// setConfAndFields2(
|
||||||
// detailForm,
|
// detailForm,
|
||||||
@@ -343,7 +317,6 @@ const loadRunningTask = (tasks) => {
|
|||||||
|
|
||||||
/** 初始化 */
|
/** 初始化 */
|
||||||
onMounted(async() => {
|
onMounted(async() => {
|
||||||
await handleRead()
|
|
||||||
await getDetail()
|
await getDetail()
|
||||||
await nextTick()
|
await nextTick()
|
||||||
if (query.isPrint === '1') {
|
if (query.isPrint === '1') {
|
||||||
@@ -352,27 +325,3 @@ onMounted(async () => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<style>
|
|
||||||
/* 打印样式 */
|
|
||||||
@media print {
|
|
||||||
/* 设置页面大小 */
|
|
||||||
@page {
|
|
||||||
size: auto; /* 自动适应页面大小 */
|
|
||||||
margin: 10mm; /* 设置页面边距 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 重置页面元素的样式 */
|
|
||||||
body, html, div {
|
|
||||||
height: auto !important; /* 确保内容高度自动调整 */
|
|
||||||
width: auto !important; /* 确保内容宽度自动调整 */
|
|
||||||
overflow: visible !important; /* 允许内容超出页面 */
|
|
||||||
page-break-inside: avoid; /* 避免内容被分页拆分 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 添加分页符 */
|
|
||||||
.page-break {
|
|
||||||
display: block;
|
|
||||||
page-break-before: always; /* 在每个分页符之前强制分页 */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -38,9 +38,8 @@
|
|||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<template #menu-left>
|
<template #menu-left>
|
||||||
<el-button type="primary" v-hasPermi="['bpm:process-instance:create']" @click="handleCreate">
|
<el-button type="primary" v-hasPermi="['bpm:process-instance:query']" @click="handleCreate">
|
||||||
<Icon icon="ep:plus" class="mr-5px"/>
|
<Icon icon="ep:plus" class="mr-5px" /> 发起流程
|
||||||
发起流程
|
|
||||||
</el-button>
|
</el-button>
|
||||||
</template>
|
</template>
|
||||||
<!-- 自定义操作栏 -->
|
<!-- 自定义操作栏 -->
|
||||||
@@ -48,20 +47,20 @@
|
|||||||
<el-button
|
<el-button
|
||||||
link
|
link
|
||||||
type="primary"
|
type="primary"
|
||||||
v-hasPermi="['bpm:process-instance:query']"
|
v-hasPermi="['bpm:process-instance:cancel']"
|
||||||
@click="handleDetail(row)"
|
@click="handleDetail(row)"
|
||||||
>
|
>
|
||||||
详情
|
详情
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button
|
<!-- <el-button
|
||||||
link
|
link
|
||||||
type="danger"
|
type="danger"
|
||||||
v-if="row.result === 1|| row.result === 2"
|
v-if="row.result === 1"
|
||||||
v-hasPermi="['bpm:process-instance:cancel']"
|
v-hasPermi="['bpm:process-instance:query']"
|
||||||
@click="handleCancel(row)"
|
@click="handleCancel(row)"
|
||||||
>
|
>
|
||||||
取消
|
取消
|
||||||
</el-button>
|
</el-button> -->
|
||||||
</template>
|
</template>
|
||||||
</avue-crud>
|
</avue-crud>
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
@@ -204,8 +203,7 @@ const searchChange = (params, done) => {
|
|||||||
|
|
||||||
/** 清空按钮操作 */
|
/** 清空按钮操作 */
|
||||||
const resetChange = () => {
|
const resetChange = () => {
|
||||||
searchChange({}, () => {
|
searchChange({}, () => {})
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const sizeChange = (pageSize) => {
|
const sizeChange = (pageSize) => {
|
||||||
|
|||||||
@@ -1,175 +0,0 @@
|
|||||||
<!-- 工作流,抄送我的流程 -->
|
|
||||||
<template>
|
|
||||||
<ContentWrap>
|
|
||||||
<avue-crud
|
|
||||||
ref="crudRef"
|
|
||||||
v-model="tableForm"
|
|
||||||
v-model:page="tablePage"
|
|
||||||
v-model:search="tableSearch"
|
|
||||||
:data="tableData"
|
|
||||||
:option="tableOption"
|
|
||||||
:permission="permission"
|
|
||||||
@search-change="searchChange"
|
|
||||||
@search-reset="resetChange"
|
|
||||||
@refresh-change="getTableData"
|
|
||||||
@size-change="sizeChange"
|
|
||||||
@current-change="currentChange"
|
|
||||||
>
|
|
||||||
<template #menu="{ row }">
|
|
||||||
<el-button link type="primary" @click="handleAudit(row)">流程</el-button>
|
|
||||||
</template>
|
|
||||||
</avue-crud>
|
|
||||||
</ContentWrap>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import {dateFormatter} from '@/utils/formatTime'
|
|
||||||
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
|
|
||||||
|
|
||||||
defineOptions({
|
|
||||||
name: 'BpmCopyTask'
|
|
||||||
})
|
|
||||||
|
|
||||||
// 路由
|
|
||||||
const {push} = useRouter()
|
|
||||||
// 列表的加载中
|
|
||||||
const loading = ref(true)
|
|
||||||
|
|
||||||
const {getCurrPermi} = useCrudPermi()
|
|
||||||
|
|
||||||
// 表格的配置
|
|
||||||
const tableOption = reactive({
|
|
||||||
addBtn: false,
|
|
||||||
editBtn: false,
|
|
||||||
delBtn: false,
|
|
||||||
viewBtn: true,
|
|
||||||
viewBtnText: '详情',
|
|
||||||
viewBtnIcon: 'none',
|
|
||||||
align: 'center',
|
|
||||||
headerAlign: 'center',
|
|
||||||
searchMenuSpan: 6,
|
|
||||||
searchMenuPosition: 'left',
|
|
||||||
labelSuffix: ' ',
|
|
||||||
span: 24,
|
|
||||||
dialogWidth: '50%',
|
|
||||||
column: {
|
|
||||||
taskId: {
|
|
||||||
label: '任务编号'
|
|
||||||
},
|
|
||||||
taskName: {
|
|
||||||
label: '任务名称'
|
|
||||||
},
|
|
||||||
processInstanceId: {
|
|
||||||
label: '流程编号',
|
|
||||||
search: true,
|
|
||||||
},
|
|
||||||
processInstanceName: {
|
|
||||||
label: '所属流程',
|
|
||||||
search: true,
|
|
||||||
},
|
|
||||||
startUserNickname: {
|
|
||||||
label: '流程发起人',
|
|
||||||
},
|
|
||||||
reason: {
|
|
||||||
label: '抄送原因'
|
|
||||||
},
|
|
||||||
creatorNickname: {
|
|
||||||
label: '抄送人'
|
|
||||||
},
|
|
||||||
createTime: {
|
|
||||||
label: '抄送时间',
|
|
||||||
type: 'datetime',
|
|
||||||
width: 180,
|
|
||||||
formatter: (row: any, value: any, rowv: any, column: any) => {
|
|
||||||
return dateFormatter(row, column, value)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
searchCreateTime: {
|
|
||||||
label: '抄送时间',
|
|
||||||
display: false,
|
|
||||||
hide: true,
|
|
||||||
search: true,
|
|
||||||
searchType: 'datetimerange',
|
|
||||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
|
||||||
startPlaceholder: '开始时间',
|
|
||||||
endPlaceholder: '结束时间',
|
|
||||||
searchRange: true,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const tableForm = ref<any>({})
|
|
||||||
const tableData = ref([])
|
|
||||||
const tableSearch = ref<any>({})
|
|
||||||
const tablePage = ref({
|
|
||||||
currentPage: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
total: 0
|
|
||||||
})
|
|
||||||
|
|
||||||
const permission = getCurrPermi(['bpm:task'])
|
|
||||||
|
|
||||||
const crudRef = ref()
|
|
||||||
useCrudHeight(crudRef)
|
|
||||||
|
|
||||||
const getTableData = async () => {
|
|
||||||
// 列表的加载中...
|
|
||||||
loading.value = true
|
|
||||||
// 拼接查询参数
|
|
||||||
let searchObj = {
|
|
||||||
...tableSearch.value,
|
|
||||||
pageNo: tablePage.value.currentPage,
|
|
||||||
pageSize: tablePage.value.pageSize
|
|
||||||
}
|
|
||||||
// 处理时间参数,如果为空则去掉这个属性
|
|
||||||
if (!searchObj.createTime?.length) delete searchObj.createTime
|
|
||||||
// 去掉空字符串属性
|
|
||||||
for (let key in searchObj) if (searchObj[key] === '') delete searchObj[key]
|
|
||||||
|
|
||||||
// 请求我的待阅数据
|
|
||||||
try {
|
|
||||||
const data = await ProcessInstanceApi.getProcessInstanceCCPage(searchObj)
|
|
||||||
tableData.value = data.list
|
|
||||||
tablePage.value.total = data.total
|
|
||||||
} finally {
|
|
||||||
// 无论请求成功或者失败,这里都需要将加载中关闭
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const searchChange = (params: any, done: any) => {
|
|
||||||
tablePage.value.currentPage = 1
|
|
||||||
// 获取数据
|
|
||||||
getTableData().finally(() => done())
|
|
||||||
}
|
|
||||||
|
|
||||||
const resetChange = () => {
|
|
||||||
searchChange({}, () => {
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const sizeChange = (pageSize) => {
|
|
||||||
tablePage.value.pageSize = pageSize
|
|
||||||
resetChange()
|
|
||||||
}
|
|
||||||
|
|
||||||
const currentChange = (currentPage) => {
|
|
||||||
tablePage.value.currentPage = currentPage
|
|
||||||
getTableData()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleAudit = (row: any) => {
|
|
||||||
push({
|
|
||||||
name: 'BpmProcessInstanceDetail',
|
|
||||||
query: {
|
|
||||||
id: row.processInstanceId
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 初始化 **/
|
|
||||||
onMounted(async () => {
|
|
||||||
await getTableData()
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
@@ -26,7 +26,7 @@
|
|||||||
</template>
|
</template>
|
||||||
<template #menu="{ row }">
|
<template #menu="{ row }">
|
||||||
<el-button link type="primary" @click="handleAudit(row)">审批</el-button>
|
<el-button link type="primary" @click="handleAudit(row)">审批</el-button>
|
||||||
<el-button link type="primary" @click="handleCC(row)">抄送</el-button>
|
<!-- <el-button link type="primary" @click="handleCC(row)">抄送</el-button>-->
|
||||||
</template>
|
</template>
|
||||||
</avue-crud>
|
</avue-crud>
|
||||||
<TaskCCDialogForm ref="taskCCDialogForm" />
|
<TaskCCDialogForm ref="taskCCDialogForm" />
|
||||||
|
|||||||
@@ -65,7 +65,6 @@ const getUserKey = (val) => {
|
|||||||
else if ([20, 21].includes(val)) key = 'deptIds'
|
else if ([20, 21].includes(val)) key = 'deptIds'
|
||||||
else if (val == 22) key = 'postIds'
|
else if (val == 22) key = 'postIds'
|
||||||
else if ([30, 31, 32].includes(val)) key = 'userIds'
|
else if ([30, 31, 32].includes(val)) key = 'userIds'
|
||||||
else if (val == 35) key = 'userSelects'
|
|
||||||
else if (val == 40) key = 'userGroupIds'
|
else if (val == 40) key = 'userGroupIds'
|
||||||
else if (val == 50) key = 'scripts'
|
else if (val == 50) key = 'scripts'
|
||||||
return key
|
return key
|
||||||
@@ -96,8 +95,7 @@ const tableOption = reactive({
|
|||||||
postIds: { display: false },
|
postIds: { display: false },
|
||||||
userIds: { display: false },
|
userIds: { display: false },
|
||||||
userGroupIds: { display: false },
|
userGroupIds: { display: false },
|
||||||
scripts: {display: false},
|
scripts: { display: false }
|
||||||
userSelects: {display: false},
|
|
||||||
}
|
}
|
||||||
const key = getUserKey(val)
|
const key = getUserKey(val)
|
||||||
if (key) columnObj[key].display = true
|
if (key) columnObj[key].display = true
|
||||||
@@ -114,7 +112,6 @@ const tableOption = reactive({
|
|||||||
let arr = row.options.map((id) => {
|
let arr = row.options.map((id) => {
|
||||||
if (key == 'deptIds') return lowStore.dicObj.deptSelect?.[id] || id
|
if (key == 'deptIds') return lowStore.dicObj.deptSelect?.[id] || id
|
||||||
else if (key == 'userIds') return lowStore.dicObj.userSelect?.[id] || id
|
else if (key == 'userIds') return lowStore.dicObj.userSelect?.[id] || id
|
||||||
else if (key == 'userSelects') return ''
|
|
||||||
else return dicObj.value[key][id]
|
else return dicObj.value[key][id]
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -201,7 +198,7 @@ const rowUpdate = async (form, index, done, loading) => {
|
|||||||
const delKey = ['roleIds', 'deptIds', 'postIds', 'userIds', 'userGroupIds', 'scripts']
|
const delKey = ['roleIds', 'deptIds', 'postIds', 'userIds', 'userGroupIds', 'scripts']
|
||||||
if (key) {
|
if (key) {
|
||||||
if (typeof form[key] == 'number') form[key] = form[key] + ''
|
if (typeof form[key] == 'number') form[key] = form[key] + ''
|
||||||
const value = key === 'userSelects' ? '' : form[key]
|
const value = form[key]
|
||||||
form.options = typeof value == 'string' ? value.split(',') : value
|
form.options = typeof value == 'string' ? value.split(',') : value
|
||||||
}
|
}
|
||||||
delKey.forEach((prop) => delete form[prop])
|
delKey.forEach((prop) => delete form[prop])
|
||||||
|
|||||||
@@ -61,13 +61,6 @@ const tabsPaneList = ref([
|
|||||||
calcHeight: 200,
|
calcHeight: 200,
|
||||||
fixedSearch: {file_main_type: 4}
|
fixedSearch: {file_main_type: 4}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
label: '工作档案',
|
|
||||||
name: 'workArchive',
|
|
||||||
formId: '1966386366515343361',
|
|
||||||
calcHeight: 200,
|
|
||||||
fixedSearch: {file_main_type: 5}
|
|
||||||
},
|
|
||||||
])
|
])
|
||||||
|
|
||||||
// 定义点击tab的事件动作
|
// 定义点击tab的事件动作
|
||||||
|
|||||||
@@ -86,17 +86,6 @@
|
|||||||
<Icon :size="14" icon="hugeicons:java" />
|
<Icon :size="14" icon="hugeicons:java" />
|
||||||
<span class="ml-3px!">JAVA增强</span>
|
<span class="ml-3px!">JAVA增强</span>
|
||||||
</el-button>
|
</el-button>
|
||||||
<!-- 批量同步 -->
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
:size="size"
|
|
||||||
@click="handleBatchSync"
|
|
||||||
v-hasPermi="['jeelowcode:dbform:sync']"
|
|
||||||
>
|
|
||||||
<Icon :size="14" icon="simple-icons:oracle"/>
|
|
||||||
<span class="ml-3px!">批量同步</span>
|
|
||||||
</el-button>
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<template #menu="{ size, row }">
|
<template #menu="{ size, row }">
|
||||||
<div class="flex justify-center flex-items-center">
|
<div class="flex justify-center flex-items-center">
|
||||||
@@ -201,8 +190,7 @@
|
|||||||
@click="openDataOrigin"
|
@click="openDataOrigin"
|
||||||
:disabled="!tableForm.dataOrigin"
|
:disabled="!tableForm.dataOrigin"
|
||||||
>
|
>
|
||||||
<Icon :size="14" icon="lucide:text-search"></Icon>
|
<Icon :size="14" icon="lucide:text-search"></Icon> <span>数据源SQL配置</span>
|
||||||
<span>数据源SQL配置</span>
|
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button
|
<el-button
|
||||||
type="primary"
|
type="primary"
|
||||||
@@ -223,12 +211,10 @@
|
|||||||
<span>表格扩展配置</span>
|
<span>表格扩展配置</span>
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button @click="sortPopup = true">
|
<el-button @click="sortPopup = true">
|
||||||
<Icon :size="14" icon="mdi:sort"></Icon>
|
<Icon :size="14" icon="mdi:sort"></Icon> <span>默认排序</span>
|
||||||
<span>默认排序</span>
|
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button @click="searchPopup = true">
|
<el-button @click="searchPopup = true">
|
||||||
<Icon :size="14" icon="lucide:text-search"></Icon>
|
<Icon :size="14" icon="lucide:text-search"></Icon> <span>默认搜索</span>
|
||||||
<span>默认搜索</span>
|
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -431,8 +417,7 @@
|
|||||||
size="small"
|
size="small"
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="copySampleStr(key)"
|
@click="copySampleStr(key)"
|
||||||
>点击复制
|
>点击复制</el-button
|
||||||
</el-button
|
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1539,8 +1524,7 @@ const searchChange = (params, done) => {
|
|||||||
|
|
||||||
/** 清空按钮操作 */
|
/** 清空按钮操作 */
|
||||||
const resetChange = () => {
|
const resetChange = () => {
|
||||||
searchChange({}, () => {
|
searchChange({}, () => {})
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const sizeChange = (pageSize) => {
|
const sizeChange = (pageSize) => {
|
||||||
@@ -1754,35 +1738,13 @@ const rowDel = async (form) => {
|
|||||||
message.success(t('common.delSuccess'))
|
message.success(t('common.delSuccess'))
|
||||||
// 刷新列表
|
// 刷新列表
|
||||||
await getTableData()
|
await getTableData()
|
||||||
} catch {
|
} catch {}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const beforeUnload = (event) => {
|
const beforeUnload = (event) => {
|
||||||
if (isUnload.value) return (event.returnValue = '您确定要关闭页面吗?')
|
if (isUnload.value) return (event.returnValue = '您确定要关闭页面吗?')
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 批量同步 **/
|
|
||||||
const handleBatchSync = async () => {
|
|
||||||
// 首先需要查询有没有需要同步的表单,如果没有则提示消息并结束,如果有则打开弹窗
|
|
||||||
let searchObj = {
|
|
||||||
isDbSync: 'N',
|
|
||||||
pageNo: tablePage.value.currentPage,
|
|
||||||
pageSize: -1
|
|
||||||
}
|
|
||||||
const data = await TableApi.getDbList(searchObj)
|
|
||||||
if (data?.records?.length > 0) {
|
|
||||||
// 将data.records取出来,每个记录的id作为row.id,并且发起普通同步
|
|
||||||
const promises = data.records.map((row) => TableApi.asyncDbData(row.id, 'default'))
|
|
||||||
await Promise.all(promises).catch(() => message.alert('同步失败'))
|
|
||||||
// 刷新列表
|
|
||||||
getTableData()
|
|
||||||
} else {
|
|
||||||
// 没有需要同步的表单,提示信息并结束方法
|
|
||||||
message.info('没有需要同步的表单')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 初始化 **/
|
/** 初始化 **/
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
window.addEventListener('beforeunload', beforeUnload)
|
window.addEventListener('beforeunload', beforeUnload)
|
||||||
|
|||||||
@@ -2,15 +2,10 @@
|
|||||||
<div class="dashboard-container">
|
<div class="dashboard-container">
|
||||||
<!-- 顶部标题栏 -->
|
<!-- 顶部标题栏 -->
|
||||||
<div class="header-container">
|
<div class="header-container">
|
||||||
<HeaderSelector
|
<div class="header-left">
|
||||||
back-button-type="image"
|
<img class="back-img" @click="returnToHeadquarters" src="@/assets/images/screen/back_image.png" />
|
||||||
:show-back-button="true"
|
<div class="back-button"> {{ selectedPark }} </div>
|
||||||
:on-back="returnToHeadquarters"
|
</div>
|
||||||
:display-text="selectedPark"
|
|
||||||
:clickable="false"
|
|
||||||
:show-selector-indicator="false"
|
|
||||||
selector-type="none"
|
|
||||||
/>
|
|
||||||
<h1 class="header-title">{{ selectedPark }}综合监控大屏</h1>
|
<h1 class="header-title">{{ selectedPark }}综合监控大屏</h1>
|
||||||
<div class="date-wrapper">
|
<div class="date-wrapper">
|
||||||
<span style="margin-top: 6%;font-size: 0.9rem;">{{ currentDate }}</span>
|
<span style="margin-top: 6%;font-size: 0.9rem;">{{ currentDate }}</span>
|
||||||
@@ -34,10 +29,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<span>总计</span>
|
<span>总计</span>
|
||||||
<div class="number-wrapper">
|
<div class="number-wrapper">
|
||||||
<div v-if="isFirstLoading" class="skeleton-number-wrapper">
|
<span class="total-number" v-for="(digit, index) in totalCountDigits" :key="index">
|
||||||
<div v-for="i in 4" :key="i" class="skeleton-number skeleton-pulse"></div>
|
|
||||||
</div>
|
|
||||||
<span v-else class="total-number" v-for="(digit, index) in totalCountDigits" :key="index">
|
|
||||||
{{ digit }}
|
{{ digit }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -45,76 +37,50 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="top-card-right">
|
<div class="top-card-right">
|
||||||
<div class="top-card-right-item">
|
<div class="top-card-right-item">
|
||||||
<div>
|
|
||||||
<img width="18px" src="@/assets/images/v2_rel0n8.png" />
|
<img width="18px" src="@/assets/images/v2_rel0n8.png" />
|
||||||
<span>正式员工</span>
|
<span>正式员工</span>
|
||||||
</div>
|
<div class="type-number-wrapper" style="margin-left: 2vw">
|
||||||
<div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
|
|
||||||
<div v-if="isFirstLoading" class="skeleton-type-number-wrapper">
|
|
||||||
<div v-for="i in formalEmployeeDigits.length" :key="i" class="skeleton-type-number skeleton-pulse"></div>
|
|
||||||
</div>
|
|
||||||
<div v-else class="type-number-wrapper">
|
|
||||||
<span class="type-number" v-for="(digit, index) in formalEmployeeDigits" :key="index">
|
<span class="type-number" v-for="(digit, index) in formalEmployeeDigits" :key="index">
|
||||||
{{ digit }}
|
{{ digit }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<span>人</span>
|
<span>人</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="top-card-right-item">
|
<div class="top-card-right-item">
|
||||||
<div>
|
|
||||||
<img width="18px" src="@/assets/images/v2_rel0n23.png" />
|
<img width="18px" src="@/assets/images/v2_rel0n23.png" />
|
||||||
<span>外协人员</span>
|
<span>外协人员</span>
|
||||||
</div>
|
<div class="type-number-wrapper" style="margin-left: 1vw">
|
||||||
<div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
|
|
||||||
<div v-if="isFirstLoading" class="skeleton-type-number-wrapper">
|
|
||||||
<div v-for="i in externalStaffDigits.length" :key="i" class="skeleton-type-number skeleton-pulse"></div>
|
|
||||||
</div>
|
|
||||||
<div v-else class="type-number-wrapper">
|
|
||||||
<span class="type-number" v-for="(digit, index) in externalStaffDigits" :key="index">
|
<span class="type-number" v-for="(digit, index) in externalStaffDigits" :key="index">
|
||||||
{{ digit }}
|
{{ digit }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<span>人</span>
|
<span>人</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="top-card-right-item">
|
<div class="top-card-right-item">
|
||||||
<div>
|
|
||||||
<img width="18px" src="@/assets/images/24508_654.png" />
|
<img width="18px" src="@/assets/images/24508_654.png" />
|
||||||
<span>访客</span>
|
<span>访客</span>
|
||||||
</div>
|
<div class="type-number-wrapper">
|
||||||
<div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
|
|
||||||
<div v-if="isFirstLoading" class="skeleton-type-number-wrapper">
|
|
||||||
<div v-for="i in visitorDigits.length" :key="i" class="skeleton-type-number skeleton-pulse"></div>
|
|
||||||
</div>
|
|
||||||
<div v-else class="type-number-wrapper">
|
|
||||||
<span class="type-number" v-for="(digit, index) in visitorDigits" :key="index">
|
<span class="type-number" v-for="(digit, index) in visitorDigits" :key="index">
|
||||||
{{ digit }}
|
{{ digit }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<span>人</span>
|
<span>人</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bottom-card">
|
<div class="bottom-card">
|
||||||
<div class="bottom-card-title">
|
<div class="bottom-card-title">
|
||||||
<!-- 隐患排查治理 标题需要隐藏 2025-10-31 -->
|
<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 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>
|
||||||
<div v-if="isFirstLoading" class="type-num skeleton-pulse"></div>
|
<span class="type-num">{{ mockData.hiddenDangerData.severityCount }}</span>
|
||||||
<span v-else 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>
|
||||||
<div v-if="isFirstLoading" class="type-num skeleton-pulse"></div>
|
<span class="type-num">{{ mockData.hiddenDangerData.generalCount }}</span>
|
||||||
<span v-else 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>
|
||||||
@@ -123,7 +89,6 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="hazard-wrapper">
|
<div class="hazard-wrapper">
|
||||||
<!-- <div v-if="isFirstLoading" class="skeleton-chart skeleton-pulse"></div> -->
|
|
||||||
<div ref="progressChartRef" class="progress-chart"></div>
|
<div ref="progressChartRef" class="progress-chart"></div>
|
||||||
<div class="progress-legend">
|
<div class="progress-legend">
|
||||||
<div class="legend-item"><span class="dot red"></span>已逾期</div>
|
<div class="legend-item"><span class="dot red"></span>已逾期</div>
|
||||||
@@ -138,15 +103,15 @@
|
|||||||
</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 class="tab" :class="{ active: activeTab === '安全培训考试' }"
|
<span
|
||||||
|
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 === '应急预案及演练' }"
|
<span class="tab" :class="{ active: activeTab === '应急预案及演练' }" @click="handleTabClick('应急预案及演练')">应急预案及演练</span>
|
||||||
@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" />
|
||||||
@@ -186,12 +151,7 @@
|
|||||||
<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
|
<AlertList maxHeight="40vh" style="margin-left: 1vw;" :table-title="tableTitle" :list-data="examList" />
|
||||||
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">
|
||||||
@@ -200,12 +160,9 @@
|
|||||||
<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"
|
<AlertList maxHeight="40vh" style="margin-left: 1vw;" :table-title="trainingTableTitle" :list-data="drillList" />
|
||||||
:list-data="drillList" />
|
|
||||||
</template>
|
</template>
|
||||||
</div> -->
|
</div>
|
||||||
<RiskStatisticsPanel :loading="isFirstLoading" :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">
|
||||||
@@ -218,39 +175,32 @@
|
|||||||
<div class="tip-container">
|
<div class="tip-container">
|
||||||
<div class="tip-image">
|
<div class="tip-image">
|
||||||
<img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
|
<img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
|
||||||
<div v-if="isFirstLoading" style="width: 20px; height: 20px" class="number skeleton-pulse"></div>
|
<span class="number">{{ mockData.alertData.total }}</span>
|
||||||
<span v-else class="number">{{ mockData.alertData.total }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
|
<img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
|
||||||
<div class="tip-content">
|
<div class="tip-content">
|
||||||
<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>
|
||||||
<div v-if="isFirstLoading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
|
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.total }}</span>
|
||||||
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.total }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-item">
|
<div class="col-item">
|
||||||
<span>已处理</span>
|
<span>已处理</span>
|
||||||
<div v-if="isFirstLoading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
|
<span style="font-size: 1.2rem; marker-start: 2vw; color: greenyellow;">{{ mockData.alertData.processed
|
||||||
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: greenyellow;">{{ mockData.alertData.processed
|
|
||||||
}}</span>
|
}}</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>
|
||||||
<div v-if="isFirstLoading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
|
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.pending }}</span>
|
||||||
<span v-else 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>
|
||||||
<div v-if="isFirstLoading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
|
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.processing }}</span>
|
||||||
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.processing
|
|
||||||
}}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style=" display: flex; width: 100%;margin-top: 1vw; flex: 1; justify-content: flex-end;">
|
<div style=" display: flex; width: 100%;margin-top: 1vw; flex: 1; justify-content: flex-end;">
|
||||||
<AlertList :loading="isFirstLoading" linkUrl="http://10.0.64.20/security/console/command-center?p=tabl" style="margin-right: 1vw;" title="告警详情" :list-data="mockData.alertData.details" />
|
<AlertList style="margin-right: 1vw;" title="告警详情" :list-data="mockData.alertData.details" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 右下区域 -->
|
<!-- 右下区域 -->
|
||||||
@@ -260,41 +210,32 @@
|
|||||||
<div class="tip-container">
|
<div class="tip-container">
|
||||||
<div class="tip-image">
|
<div class="tip-image">
|
||||||
<img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
|
<img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
|
||||||
<div v-if="isFirstLoading" style="width: 20px; height: 20px" class="number skeleton-pulse"></div>
|
<span class="number">{{ mockData.timeoutWorkOrders.total }}</span>
|
||||||
<span v-else class="number">{{ mockData.timeoutWorkOrders.total }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
|
<img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
|
||||||
<div class="tip-content">
|
<div class="tip-content">
|
||||||
<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>
|
||||||
<div v-if="isFirstLoading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
|
<span style="font-size: 1.2rem; marker-start: 2vw; color: red;">{{ mockData.timeoutWorkOrders.total }}</span>
|
||||||
<span
|
|
||||||
v-else
|
|
||||||
style="font-size: 1.2rem; marker-start: 2vw; color: red;"
|
|
||||||
>{{ mockData.timeoutWorkOrders.total }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style=" display: flex; width: 100%;margin-top: 1vw; flex: 1; justify-content: flex-end;">
|
<div style=" display: flex; width: 100%;margin-top: 1vw; flex: 1; justify-content: flex-end;">
|
||||||
<AlertList
|
<AlertList style="margin-right: 1vw;" title="工单详情" :list-data="mockData.timeoutWorkOrders.details" />
|
||||||
:loading="isFirstLoading"
|
|
||||||
linkUrl="http://10.0.64.20/pms/workorder-list"
|
|
||||||
style="margin-right: 1vw;"
|
|
||||||
title="工单详情"
|
|
||||||
:list-data="mockData.timeoutWorkOrders.details"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="center-container">
|
<div class="center-container">
|
||||||
<!-- 中部区域 -->
|
<!-- 中部区域 -->
|
||||||
<ParkCenter :parkName="selectedPark" :backgroundImage="backgroundImage" @point-hover="handlePointHover"
|
<ParkCenter
|
||||||
|
:parkName="selectedPark" :backgroundImage="backgroundImage" @point-hover="handlePointHover"
|
||||||
@point-leave="handlePointLeave" />
|
@point-leave="handlePointLeave" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 点位信息弹窗 -->
|
<!-- 点位信息弹窗 -->
|
||||||
<PointInfoPopup v-if="showPointPopup" :visible="showPointPopup" :point-info="currentPoint"
|
<PointInfoPopup
|
||||||
|
v-if="showPointPopup" :visible="showPointPopup" :point-info="currentPoint"
|
||||||
:park-name="selectedPark || '雄安园区'" />
|
:park-name="selectedPark || '雄安园区'" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -302,17 +243,12 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, onUnmounted, computed } from 'vue'
|
import { ref, onMounted, onUnmounted, computed } from 'vue'
|
||||||
import { useRoute, useRouter } from 'vue-router'
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
|
|
||||||
// 创建 AbortController 用于取消请求
|
|
||||||
const abortController = new AbortController()
|
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
import ParkCenter from './components/ParkCenter.vue'
|
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, getWorkOrderStatistics } from './report'
|
import { getTableList, getTableData, getDangerDetail, getDangerCount, getExamDetail, getDrillDetail } from './report'
|
||||||
import RiskStatisticsPanel from './components/RiskStatisticsPanel.vue'
|
|
||||||
import HeaderSelector from './components/HeaderSelector.vue'
|
|
||||||
|
|
||||||
interface PointPosition {
|
interface PointPosition {
|
||||||
label: string
|
label: string
|
||||||
@@ -325,17 +261,6 @@ const totalCountDigits = computed(() => String(mockData.totalCount).split('').ma
|
|||||||
const formalEmployeeDigits = computed(() => String(mockData.formalEmployeeCount).split('').map(Number))
|
const formalEmployeeDigits = computed(() => String(mockData.formalEmployeeCount).split('').map(Number))
|
||||||
const externalStaffDigits = computed(() => String(mockData.externalStaffCount).split('').map(Number))
|
const externalStaffDigits = computed(() => String(mockData.externalStaffCount).split('').map(Number))
|
||||||
const visitorDigits = computed(() => String(mockData.visitorCount).split('').map(Number))
|
const visitorDigits = computed(() => String(mockData.visitorCount).split('').map(Number))
|
||||||
|
|
||||||
// 计算数字区域的最大宽度
|
|
||||||
// 每个数字框宽度 14px,gap 2px
|
|
||||||
const maxNumberWidth = computed(() => {
|
|
||||||
const formalLen = formalEmployeeDigits.value.length
|
|
||||||
const externalLen = externalStaffDigits.value.length
|
|
||||||
const visitorLen = visitorDigits.value.length
|
|
||||||
const maxLen = Math.max(formalLen, externalLen, visitorLen)
|
|
||||||
// 宽度 = 数字个数 * 14px + (数字个数 - 1) * 2px
|
|
||||||
return maxLen > 0 ? maxLen * 14 + (maxLen - 1) * 2 : 0
|
|
||||||
})
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
@@ -348,9 +273,6 @@ const currentTime = ref<string>('')
|
|||||||
const activeTab = ref<string>('高危作业')
|
const activeTab = ref<string>('高危作业')
|
||||||
const showPointPopup = ref(false)
|
const showPointPopup = ref(false)
|
||||||
const currentPoint = ref<PointPosition | null>(null)
|
const currentPoint = ref<PointPosition | null>(null)
|
||||||
|
|
||||||
// 首次加载状态
|
|
||||||
const isFirstLoading = ref<boolean>(true)
|
|
||||||
const progressChart = ref<echarts.ECharts | null>(null)
|
const progressChart = ref<echarts.ECharts | null>(null)
|
||||||
const progressChartRef = ref<HTMLElement | null>(null)
|
const progressChartRef = ref<HTMLElement | null>(null)
|
||||||
const timeUpdateTimerId = ref<ReturnType<typeof setInterval> | null>(null)
|
const timeUpdateTimerId = ref<ReturnType<typeof setInterval> | null>(null)
|
||||||
@@ -360,110 +282,6 @@ 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 riskStatistics = ref<any>({
|
|
||||||
'安全类事项': [],
|
|
||||||
'工程类事项': []
|
|
||||||
})
|
|
||||||
const dangerDetail = ref<any>({
|
|
||||||
'安全类事项': [],
|
|
||||||
'工程类事项': []
|
|
||||||
})
|
|
||||||
const parkValue = ref<string>('')
|
|
||||||
|
|
||||||
type TabType = '安全类事项' | '工程类事项'
|
|
||||||
|
|
||||||
|
|
||||||
const handleRiskTabChange = async (tab: TabType) => {
|
|
||||||
console.log('Tab changed to:', tab)
|
|
||||||
|
|
||||||
try {
|
|
||||||
let workOrderType = ''
|
|
||||||
switch (tab) {
|
|
||||||
case '安全类事项':
|
|
||||||
workOrderType = '安全生产'
|
|
||||||
break
|
|
||||||
case '工程类事项':
|
|
||||||
workOrderType = '物业服务-工程'
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
workOrderType = '安全生产'
|
|
||||||
}
|
|
||||||
|
|
||||||
// 同时获取维保任务和巡检任务的数据
|
|
||||||
const [maintenanceResponse, inspectionResponse] = await Promise.all([
|
|
||||||
getWorkOrderStatistics({ workOrderType, taskType: '维保任务', campus_id: query.campus_id }, { signal: abortController.signal }).catch(error => {
|
|
||||||
console.error('获取维保任务数据失败:', error)
|
|
||||||
return { records: [] }
|
|
||||||
}),
|
|
||||||
getWorkOrderStatistics({ workOrderType, taskType: '巡检任务', campus_id: query.campus_id }, { signal: abortController.signal }).catch(error => {
|
|
||||||
console.error('获取巡检任务数据失败:', error)
|
|
||||||
return { records: [] }
|
|
||||||
})
|
|
||||||
])
|
|
||||||
|
|
||||||
// 周期映射
|
|
||||||
const cycleMap: Record<string, string> = {
|
|
||||||
'day': '每日',
|
|
||||||
'month': '每月',
|
|
||||||
'year': '每年'
|
|
||||||
}
|
|
||||||
|
|
||||||
// 将API数据转换为图表数据格式
|
|
||||||
const convertToChartData = (records: any[], taskTypeName: string): any[] => {
|
|
||||||
const charts: any[] = []
|
|
||||||
|
|
||||||
// 按周期分组
|
|
||||||
const cycleGroups: Record<string, any> = {}
|
|
||||||
records.forEach((record: any) => {
|
|
||||||
const cycle = record.cycle || 'day'
|
|
||||||
if (!cycleGroups[cycle]) {
|
|
||||||
cycleGroups[cycle] = record
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 创建6个图表(3个周期 x 2个任务类型,但这里只处理一种任务类型)
|
|
||||||
const cycles = ['day', 'month', 'year']
|
|
||||||
cycles.forEach((cycle) => {
|
|
||||||
const data = cycleGroups[cycle] || {}
|
|
||||||
const title = `${cycleMap[cycle]}检查(${taskTypeName})`
|
|
||||||
|
|
||||||
charts.push({
|
|
||||||
title,
|
|
||||||
total: Number(data.total) || 0,
|
|
||||||
status: {
|
|
||||||
notStarted: Number(data.pending) || 0,
|
|
||||||
inProgress: Number(data.processing) || 0,
|
|
||||||
done: Number(data.processed) || 0,
|
|
||||||
voided: Number(data.closed) || 0
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
return charts
|
|
||||||
}
|
|
||||||
|
|
||||||
// 转换维保和巡检数据
|
|
||||||
const maintenanceCharts = convertToChartData(maintenanceResponse.records || [], '维保类')
|
|
||||||
const inspectionCharts = convertToChartData(inspectionResponse.records || [], '巡检类')
|
|
||||||
|
|
||||||
// 合并为6个图表:先维保(3个),后巡检(3个)
|
|
||||||
const allCharts = [...maintenanceCharts, ...inspectionCharts]
|
|
||||||
|
|
||||||
// 更新riskStatistics
|
|
||||||
riskStatistics.value[tab] = allCharts
|
|
||||||
|
|
||||||
console.log('更新后的riskStatistics:', riskStatistics.value)
|
|
||||||
} catch (error) {
|
|
||||||
console.error('获取风险统计数据失败:', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const tableTitle = [
|
const tableTitle = [
|
||||||
{
|
{
|
||||||
@@ -724,14 +542,12 @@ 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;
|
||||||
if (points && points.length && points[2]) {
|
|
||||||
points[2][0] = isLeft
|
points[2][0] = isLeft
|
||||||
? params.labelRect.x
|
? params.labelRect.x
|
||||||
: params.labelRect.x + params.labelRect.width;
|
: params.labelRect.x + params.labelRect.width;
|
||||||
return {
|
return {
|
||||||
labelLinePoints: points
|
labelLinePoints: points
|
||||||
};
|
};
|
||||||
}
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@@ -750,83 +566,43 @@ interface RegionItem {
|
|||||||
code: string
|
code: string
|
||||||
pic_url: string
|
pic_url: string
|
||||||
}
|
}
|
||||||
// 缓存工具函数 - 三个页面共享的缓存
|
|
||||||
const CACHE_KEY = 'shared_regionOption_cache'
|
|
||||||
const CACHE_DURATION = 5 * 60 * 1000 // 5分钟
|
|
||||||
|
|
||||||
interface CacheData {
|
|
||||||
records: any[] // 原始接口返回的数据
|
|
||||||
timestamp: number
|
|
||||||
}
|
|
||||||
|
|
||||||
const getCachedRegionOption = (): any[] | null => {
|
|
||||||
try {
|
|
||||||
const cached = sessionStorage.getItem(CACHE_KEY)
|
|
||||||
if (cached) {
|
|
||||||
const cacheData: CacheData = JSON.parse(cached)
|
|
||||||
const now = Date.now()
|
|
||||||
// 检查缓存是否在有效期内
|
|
||||||
if (now - cacheData.timestamp < CACHE_DURATION) {
|
|
||||||
console.log('使用缓存的 regionOption 数据')
|
|
||||||
return cacheData.records
|
|
||||||
} else {
|
|
||||||
console.log('缓存已过期,清除缓存')
|
|
||||||
sessionStorage.removeItem(CACHE_KEY)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('读取缓存失败:', error)
|
|
||||||
sessionStorage.removeItem(CACHE_KEY)
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
const setCachedRegionOption = (records: any[]) => {
|
|
||||||
try {
|
|
||||||
const cacheData: CacheData = {
|
|
||||||
records,
|
|
||||||
timestamp: Date.now()
|
|
||||||
}
|
|
||||||
sessionStorage.setItem(CACHE_KEY, JSON.stringify(cacheData))
|
|
||||||
console.log('regionOption 数据已缓存')
|
|
||||||
} catch (error) {
|
|
||||||
console.error('保存缓存失败:', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const regionOption = ref<RegionItem[]>([])
|
const regionOption = ref<RegionItem[]>([])
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
updateTime()
|
updateTime()
|
||||||
timeUpdateTimerId.value = setInterval(updateTime, 1000)
|
timeUpdateTimerId.value = setInterval(updateTime, 1000)
|
||||||
|
|
||||||
try {
|
|
||||||
if (typeof route.query.parkName === 'string') {
|
if (typeof route.query.parkName === 'string') {
|
||||||
selectedPark.value = route.query.parkName
|
selectedPark.value = route.query.parkName
|
||||||
query.campus_id = route.query.parkCode as string
|
query.campus_id = route.query.parkCode as string
|
||||||
}
|
}
|
||||||
|
|
||||||
handleRiskTabChange('安全类事项')
|
|
||||||
|
|
||||||
// 先检查缓存
|
|
||||||
const cachedRecords = getCachedRegionOption()
|
|
||||||
let records = cachedRecords
|
|
||||||
|
|
||||||
if (!records || records.length === 0) {
|
|
||||||
// 缓存不存在或已过期,调用接口
|
|
||||||
try {
|
try {
|
||||||
let result = await getTableList('park_info_list', {}, false, { signal: abortController.signal })
|
let { records } = await getTableList(
|
||||||
records = result.records || []
|
'park_info_list'
|
||||||
|
)
|
||||||
if (records && records.length > 0) {
|
// records = [
|
||||||
// 保存到缓存
|
// {
|
||||||
setCachedRegionOption(records)
|
// "region_id": "130601",
|
||||||
}
|
// "park_code": "1825468527486140416",
|
||||||
} catch (error) {
|
// "region": "北京",
|
||||||
console.error('初始化园区数据失败:', error)
|
// "park_name": "雄安新区总部",
|
||||||
records = []
|
// "pic_url": "1"
|
||||||
}
|
// },
|
||||||
}
|
// {
|
||||||
|
// "region_id": "130601",
|
||||||
|
// "park_code": "1825468527486140417",
|
||||||
|
// "region": "北京",
|
||||||
|
// "park_name": "雄安地面站",
|
||||||
|
// "pic_url": "2"
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// "region_id": "130603",
|
||||||
|
// "park_code": "1825468527486140426",
|
||||||
|
// "region": "武汉",
|
||||||
|
// "park_name": "花山新区总部",
|
||||||
|
// "pic_url": "3"
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
if (records && records.length > 0) {
|
if (records && records.length > 0) {
|
||||||
// 更新为新的数据格式
|
// 更新为新的数据格式
|
||||||
regionOption.value = records.map(el => ({
|
regionOption.value = records.map(el => ({
|
||||||
@@ -842,27 +618,16 @@ onMounted(async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('初始化园区数据失败:', error)
|
||||||
|
}
|
||||||
// 初始化数据
|
// 初始化数据
|
||||||
await loadDashboardData()
|
await loadDashboardData()
|
||||||
|
|
||||||
// 添加周期性动画演示
|
// 添加周期性动画演示
|
||||||
dashboardTimerId.value = setInterval(async () => {
|
dashboardTimerId.value = setInterval(async () => {
|
||||||
try {
|
|
||||||
await loadDashboardData()
|
await loadDashboardData()
|
||||||
} catch (error) {
|
|
||||||
console.error('定时数据更新失败:', error)
|
|
||||||
}
|
|
||||||
}, 2 * 60 * 1000) // 每2分钟更新一次
|
}, 2 * 60 * 1000) // 每2分钟更新一次
|
||||||
} catch (error) {
|
|
||||||
console.error('页面初始化失败:', error)
|
|
||||||
// 即使出错也要隐藏骨架屏,避免界面一直处于加载状态
|
|
||||||
setTimeout(() => {
|
|
||||||
if (isFirstLoading.value) {
|
|
||||||
isFirstLoading.value = false
|
|
||||||
console.log('因错误隐藏骨架屏')
|
|
||||||
}
|
|
||||||
}, 1000)
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const loadDashboardData = () => {
|
const loadDashboardData = () => {
|
||||||
@@ -870,7 +635,7 @@ const loadDashboardData = () => {
|
|||||||
isFirstLoad.value = false
|
isFirstLoad.value = false
|
||||||
}
|
}
|
||||||
// 获取总体概览数据
|
// 获取总体概览数据
|
||||||
getTableList('generalTotal', query, false, { signal: abortController.signal }).then(generalTotal => {
|
getTableList('generalTotal', query).then(generalTotal => {
|
||||||
if (generalTotal.records && generalTotal.records.length > 0) {
|
if (generalTotal.records && generalTotal.records.length > 0) {
|
||||||
mockData.totalCount = Number(generalTotal.records[0].totalCount)
|
mockData.totalCount = Number(generalTotal.records[0].totalCount)
|
||||||
mockData.formalEmployeeCount = Number(generalTotal.records[0].formalEmployeeCount)
|
mockData.formalEmployeeCount = Number(generalTotal.records[0].formalEmployeeCount)
|
||||||
@@ -978,7 +743,7 @@ const loadDashboardData = () => {
|
|||||||
handleTabClick("高危作业")
|
handleTabClick("高危作业")
|
||||||
|
|
||||||
// 获取风险预警数据
|
// 获取风险预警数据
|
||||||
getTableList('risk_alert_data', query, false, { signal: abortController.signal }).then(risk_alert_data => {
|
getTableList('risk_alert_data', query).then(risk_alert_data => {
|
||||||
if (risk_alert_data.records && risk_alert_data.records.length > 0) {
|
if (risk_alert_data.records && risk_alert_data.records.length > 0) {
|
||||||
mockData.alertData.total = risk_alert_data.records[0].total
|
mockData.alertData.total = risk_alert_data.records[0].total
|
||||||
mockData.alertData.processed = risk_alert_data.records[0].processed
|
mockData.alertData.processed = risk_alert_data.records[0].processed
|
||||||
@@ -989,7 +754,7 @@ const loadDashboardData = () => {
|
|||||||
console.error('获取风险预警数据失败:', error)
|
console.error('获取风险预警数据失败:', error)
|
||||||
})
|
})
|
||||||
// 获取风险预警详情数据
|
// 获取风险预警详情数据
|
||||||
getTableList('risk_alert_detail', query, false, { signal: abortController.signal }).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) {
|
||||||
mockData.alertData.details = risk_alert_detail.records
|
mockData.alertData.details = risk_alert_detail.records
|
||||||
}
|
}
|
||||||
@@ -998,8 +763,8 @@ const loadDashboardData = () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
// 获取超期工单数据
|
// 获取超期工单数据
|
||||||
getTableList('timeout_work_order', query, false, { signal: abortController.signal }).then(timeout_work_order => {
|
getTableList('timeout_work_order', query).then(timeout_work_order => {
|
||||||
if (timeout_work_order.records && timeout_work_order.records.length >= 0) {
|
if (timeout_work_order.records && timeout_work_order.records.length > 0) {
|
||||||
mockData.timeoutWorkOrders.total = timeout_work_order.records.length
|
mockData.timeoutWorkOrders.total = timeout_work_order.records.length
|
||||||
mockData.timeoutWorkOrders.details = timeout_work_order.records
|
mockData.timeoutWorkOrders.details = timeout_work_order.records
|
||||||
}
|
}
|
||||||
@@ -1008,7 +773,7 @@ const loadDashboardData = () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
// 获取超期工单数据
|
// 获取超期工单数据
|
||||||
getTableList('park_build_info', query, false, { signal: abortController.signal }).then(res => {
|
getTableList('park_build_info', query).then(res => {
|
||||||
if (res.records && res.records.length > 0) {
|
if (res.records && res.records.length > 0) {
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -1016,22 +781,11 @@ const loadDashboardData = () => {
|
|||||||
console.error('获取超期工单数据失败:', error)
|
console.error('获取超期工单数据失败:', error)
|
||||||
})
|
})
|
||||||
|
|
||||||
// 调用数据处理函数
|
|
||||||
handleHiddenDangerPannelData(query)
|
handleHiddenDangerPannelData(query)
|
||||||
|
|
||||||
// 延迟一段时间等待异步操作完成,然后隐藏骨架屏
|
|
||||||
setTimeout(() => {
|
|
||||||
if (isFirstLoading.value) {
|
|
||||||
isFirstLoading.value = false
|
|
||||||
console.log('隐藏骨架屏')
|
|
||||||
}
|
|
||||||
}, 2000) // 2秒后隐藏骨架屏
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const handleHiddenDangerPannelData = async (query) => {
|
const handleHiddenDangerPannelData = (query) => {
|
||||||
const promises = []
|
|
||||||
|
|
||||||
let _data = {
|
let _data = {
|
||||||
flag: false,
|
flag: false,
|
||||||
general: 0,
|
general: 0,
|
||||||
@@ -1051,8 +805,6 @@ const handleHiddenDangerPannelData = async (query) => {
|
|||||||
processing: 0,
|
processing: 0,
|
||||||
pending: 0
|
pending: 0
|
||||||
}
|
}
|
||||||
|
|
||||||
// 初始化图表
|
|
||||||
progressChart.value = echarts.init(progressChartRef.value)
|
progressChart.value = echarts.init(progressChartRef.value)
|
||||||
const width = progressChart.value.getWidth()
|
const width = progressChart.value.getWidth()
|
||||||
const progressOption = {
|
const progressOption = {
|
||||||
@@ -1091,38 +843,31 @@ const handleHiddenDangerPannelData = async (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;
|
||||||
if (points && points.length && points[2]) {
|
|
||||||
points[2][0] = isLeft
|
points[2][0] = isLeft
|
||||||
? params.labelRect.x
|
? params.labelRect.x
|
||||||
: params.labelRect.x + params.labelRect.width;
|
: params.labelRect.x + params.labelRect.width;
|
||||||
return {
|
return {
|
||||||
labelLinePoints: points
|
labelLinePoints: points
|
||||||
};
|
};
|
||||||
}
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
// 获取隐患排查治理数据
|
// 获取隐患排查治理数据
|
||||||
getTableList('risk_level_count', query, false, { signal: abortController.signal }).then(res => {
|
getTableList('risk_level_count', query).then(res => {
|
||||||
if (res.records && res.records.length > 0) {
|
if (res.records && res.records.length > 0) {
|
||||||
_data.general = _data.general + Number(res.records[0].general_count)
|
_data.general = _data.general + Number(res.records[0].general_count)
|
||||||
_data.major = _data.major + Number(res.records[0].major_count)
|
_data.major = _data.major + Number(res.records[0].major_count)
|
||||||
// 获取隐患排查治理数据
|
// 获取隐患排查治理数据
|
||||||
getTableList('risk_status_count', query, false, { signal: abortController.signal }).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)
|
||||||
const record = res.records[0]
|
_data.processed = _data.processed + Number(res.records[0].processedCnt)
|
||||||
_data.overdue = Number(record.overdueCnt) || 0
|
_data.processing = _data.processing + Number(res.records[0].processingCnt)
|
||||||
_data.processed = Number(record.processedCnt) || 0
|
_data.pending = _data.pending
|
||||||
_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);
|
||||||
@@ -1131,31 +876,18 @@ const handleHiddenDangerPannelData = async (query) => {
|
|||||||
mockData.hiddenDangerData.generalCount = generalCnt
|
mockData.hiddenDangerData.generalCount = generalCnt
|
||||||
mockData.hiddenDangerData.severityCount = majorCnt
|
mockData.hiddenDangerData.severityCount = majorCnt
|
||||||
|
|
||||||
// 如果第三方数据也是百分比,需要合并;否则使用系统数据
|
|
||||||
// 这里假设系统数据是百分比,第三方数据可能是数量或百分比
|
|
||||||
let overdueCnt, processedCnt, processingCnt, pendingCnt
|
|
||||||
if (_data2.overdue > 1 || _data2.processed > 1 || _data2.processing > 1) {
|
|
||||||
// 第三方数据可能是百分比,直接使用系统数据(因为系统数据更准确)
|
|
||||||
overdueCnt = _data.overdue.toFixed(2)
|
|
||||||
processedCnt = _data.processed.toFixed(2)
|
|
||||||
processingCnt = _data.processing.toFixed(2)
|
|
||||||
pendingCnt = _data.pending.toFixed(2)
|
|
||||||
} else {
|
|
||||||
// 第三方数据可能是数量,需要计算百分比
|
|
||||||
let totalCnt = generalCnt + majorCnt
|
let totalCnt = generalCnt + majorCnt
|
||||||
overdueCnt = totalCnt > 0 ? ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2) : '0.00'
|
let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2)
|
||||||
processedCnt = totalCnt > 0 ? ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2) : '0.00'
|
let processedCnt = ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2)
|
||||||
processingCnt = totalCnt > 0 ? ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2) : '0.00'
|
let processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2)
|
||||||
pendingCnt = totalCnt > 0 ? ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2) : '0.00'
|
let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2)
|
||||||
}
|
|
||||||
|
|
||||||
progressOption.series[0].data = [
|
progressOption.series[0].data = [
|
||||||
{ value: Number(overdueCnt) || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
|
{ value: overdueCnt || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
|
||||||
{ value: Number(processedCnt) || 0, name: '已处理', itemStyle: { color: '#10b981' } },
|
{ value: processedCnt || 0, name: '已处理', itemStyle: { color: '#10b981' } },
|
||||||
{ value: Number(pendingCnt) || 0, name: '待排查', itemStyle: { color: '#eab308' } },
|
{ value: pendingCnt || 0, name: '待排查', itemStyle: { color: '#eab308' } },
|
||||||
{ value: Number(processingCnt) || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
|
{ value: 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)
|
||||||
}
|
}
|
||||||
@@ -1164,14 +896,17 @@ const handleHiddenDangerPannelData = async (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: _data.overdue || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
|
{ value: overdueCnt || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
|
||||||
{ value: _data.processed || 0, name: '已处理', itemStyle: { color: '#10b981' } },
|
{ value: processedCnt || 0, name: '已处理', itemStyle: { color: '#10b981' } },
|
||||||
{ value: _data.pending || 0, name: '待排查', itemStyle: { color: '#eab308' } },
|
{ value: pendingCnt || 0, name: '待排查', itemStyle: { color: '#eab308' } },
|
||||||
{ value: _data.processing || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
|
{ value: 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)
|
||||||
}
|
}
|
||||||
@@ -1184,63 +919,63 @@ const handleHiddenDangerPannelData = async (query) => {
|
|||||||
|
|
||||||
|
|
||||||
// 获取隐患排查治理数据
|
// 获取隐患排查治理数据
|
||||||
getTableList('hidden_danger_investigation', query, false, { signal: abortController.signal }).then(res => {
|
getTableList('hidden_danger_investigation', query).then(res => {
|
||||||
if (res.records && res.records.length > 0) {
|
if (res.records && res.records.length > 0) {
|
||||||
_data2.general = Number(res.records[0].general)
|
_data2.general = Number(res.records[0].general)
|
||||||
_data2.major = Number(res.records[0].major)
|
_data2.major = Number(res.records[0].major)
|
||||||
|
|
||||||
// 获取隐患排查治理处理进度数据
|
// 获取隐患排查治理处理进度数据
|
||||||
getTableList('hidden_danger_process_progress', query, false, { signal: abortController.signal }).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)
|
||||||
})
|
})
|
||||||
@@ -1265,12 +1000,12 @@ const handleTabClick = async (tab: string) => {
|
|||||||
code = "fire_drill"
|
code = "fire_drill"
|
||||||
code1 = "fire_drill_detail"
|
code1 = "fire_drill_detail"
|
||||||
|
|
||||||
getDangerDetail(query.campus_id, { signal: abortController.signal }).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
|
||||||
})
|
})
|
||||||
|
|
||||||
getDangerCount(query.campus_id, { signal: abortController.signal }).then(res => {
|
getDangerCount(query.campus_id).then(res => {
|
||||||
unfinishedCount.value = res.records[0].wks
|
unfinishedCount.value = res.records[0].wks
|
||||||
inProgressCount.value = res.records[0].jxz
|
inProgressCount.value = res.records[0].jxz
|
||||||
finishedCount.value = res.records[0].ywc
|
finishedCount.value = res.records[0].ywc
|
||||||
@@ -1281,7 +1016,7 @@ const handleTabClick = async (tab: string) => {
|
|||||||
code = 'security_training_count'
|
code = 'security_training_count'
|
||||||
code1 = 'security_training_detail'
|
code1 = 'security_training_detail'
|
||||||
|
|
||||||
const res = await getExamDetail(query.campus_id, { signal: abortController.signal })
|
const res = await getExamDetail(query.campus_id)
|
||||||
|
|
||||||
examList.value = res.records
|
examList.value = res.records
|
||||||
|
|
||||||
@@ -1290,7 +1025,7 @@ const handleTabClick = async (tab: string) => {
|
|||||||
code = 'security_training_count'
|
code = 'security_training_count'
|
||||||
code1 = 'security_training_detail'
|
code1 = 'security_training_detail'
|
||||||
|
|
||||||
const res1 = await getDrillDetail(query.campus_id, { signal: abortController.signal })
|
const res1 = await getDrillDetail(query.campus_id)
|
||||||
|
|
||||||
drillList.value = res1.records
|
drillList.value = res1.records
|
||||||
|
|
||||||
@@ -1438,9 +1173,6 @@ const updateTime = (): void => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
// 取消所有正在进行的请求
|
|
||||||
abortController.abort()
|
|
||||||
|
|
||||||
if (dashboardTimerId.value) {
|
if (dashboardTimerId.value) {
|
||||||
clearInterval(dashboardTimerId.value)
|
clearInterval(dashboardTimerId.value)
|
||||||
dashboardTimerId.value = null
|
dashboardTimerId.value = null
|
||||||
@@ -1453,10 +1185,6 @@ 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 {
|
||||||
@@ -1844,25 +1572,17 @@ onUnmounted(() => {
|
|||||||
.top-card-right-item {
|
.top-card-right-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
column-gap: 5px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
||||||
> :first-child {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
column-gap: 5px;
|
|
||||||
width: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.type-number-wrapper {
|
.type-number-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
|
||||||
gap: 2px;
|
gap: 2px;
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin-left: 8px;
|
|
||||||
|
|
||||||
.type-number {
|
.type-number {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@@ -1876,10 +1596,6 @@ onUnmounted(() => {
|
|||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> span:last-child {
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -2153,44 +1869,4 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 骨架屏样式
|
|
||||||
.skeleton-pulse {
|
|
||||||
animation: skeleton-loading-company 1.5s ease-in-out infinite;
|
|
||||||
background-color: #444;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-number-wrapper {
|
|
||||||
display: flex;
|
|
||||||
gap: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-number {
|
|
||||||
width: 14px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-type-number {
|
|
||||||
width: 14px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-chart {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
min-height: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes skeleton-loading-company {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -5,32 +5,6 @@
|
|||||||
<img width="50%" src="@/assets/images/line_1.png" />
|
<img width="50%" src="@/assets/images/line_1.png" />
|
||||||
</div>
|
</div>
|
||||||
<div class="list" :style="{ maxHeight: maxHeight }">
|
<div class="list" :style="{ maxHeight: maxHeight }">
|
||||||
<!-- 骨架屏 -->
|
|
||||||
<template v-if="props.loading">
|
|
||||||
<!-- 表格模式骨架屏 -->
|
|
||||||
<template v-if="tableTitle && tableTitle.length > 0">
|
|
||||||
<div class="table-header">
|
|
||||||
<div class="header-item skeleton-pulse" v-for="(title, index) in tableTitle" :key="`header-skeleton-${index}`"></div>
|
|
||||||
</div>
|
|
||||||
<div class="list-wrapper">
|
|
||||||
<div class="table-row skeleton-row" v-for="i in 10" :key="`table-skeleton-${i}`">
|
|
||||||
<div class="table-cell skeleton-pulse" v-for="(title, cellIndex) in tableTitle" :key="`cell-skeleton-${i}-${cellIndex}`"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 列表模式骨架屏 -->
|
|
||||||
<template v-else>
|
|
||||||
<div class="list-wrapper">
|
|
||||||
<div class="list-item skeleton-item" v-for="i in 10" :key="`list-skeleton-${i}`">
|
|
||||||
<div class="alert-text skeleton-pulse"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 实际内容 -->
|
|
||||||
<template v-else>
|
|
||||||
<!-- 表格头部 -->
|
<!-- 表格头部 -->
|
||||||
<div v-if="tableTitle && tableTitle.length > 0" class="table-header">
|
<div v-if="tableTitle && tableTitle.length > 0" class="table-header">
|
||||||
<div class="header-item" v-for="(title, index) in tableTitle" :key="index">
|
<div class="header-item" v-for="(title, index) in tableTitle" :key="index">
|
||||||
@@ -41,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 @click="handleItemClick(item)" class="table-row cursor-pointer" v-for="(item, index) in listData" :key="`table-${index}`" @mouseenter="handleMouseEnter">
|
<div class="table-row" 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>
|
||||||
@@ -50,14 +24,13 @@
|
|||||||
|
|
||||||
<!-- 列表模式 -->
|
<!-- 列表模式 -->
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<div @click="handleItemClick(item)" class="list-item cursor-pointer" v-for="(item, index) in listData" :key="`list-${index}`" @mouseenter="handleMouseEnter">
|
<div class="list-item" 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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -78,7 +51,6 @@ interface TableTitle {
|
|||||||
}
|
}
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
loading?: boolean
|
|
||||||
title?: string
|
title?: string
|
||||||
listData: AlertItem[]
|
listData: AlertItem[]
|
||||||
maxHeight?: string
|
maxHeight?: string
|
||||||
@@ -86,7 +58,6 @@ interface Props {
|
|||||||
scrollSpeed?: number
|
scrollSpeed?: number
|
||||||
scrollInterval?: number,
|
scrollInterval?: number,
|
||||||
tableTitle?: TableTitle[]
|
tableTitle?: TableTitle[]
|
||||||
linkUrl?: string
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
@@ -101,12 +72,8 @@ 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(props.linkUrl, '_blank')
|
|
||||||
}
|
|
||||||
|
|
||||||
// 自动滚动功能
|
// 自动滚动功能
|
||||||
const startAutoScroll = (resetToTop: boolean = false) => {
|
const startAutoScroll = () => {
|
||||||
if (!props.autoScroll || !listWrapperRef.value) return
|
if (!props.autoScroll || !listWrapperRef.value) return
|
||||||
|
|
||||||
const wrapper = listWrapperRef.value
|
const wrapper = listWrapperRef.value
|
||||||
@@ -116,38 +83,20 @@ const startAutoScroll = (resetToTop: boolean = false) => {
|
|||||||
// 只有当内容高度超过容器高度时才启动滚动
|
// 只有当内容高度超过容器高度时才启动滚动
|
||||||
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
|
||||||
|
|
||||||
const currentScrollTop = wrapper.scrollTop
|
currentScrollTop += props.scrollSpeed
|
||||||
const maxScrollTop = scrollHeight - clientHeight
|
|
||||||
|
|
||||||
// 向下滚动
|
// 如果滚动到底部,重置到顶部
|
||||||
const nextScrollTop = currentScrollTop + props.scrollSpeed
|
if (currentScrollTop >= scrollHeight - clientHeight) {
|
||||||
|
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 = nextScrollTop
|
wrapper.scrollTop = currentScrollTop
|
||||||
}
|
}
|
||||||
|
|
||||||
scrollTimer = setTimeout(scroll, 50) // 每50ms滚动一次,实现平滑效果
|
scrollTimer = setTimeout(scroll, 50) // 每50ms滚动一次,实现平滑效果
|
||||||
@@ -172,9 +121,8 @@ const handleMouseEnter = () => {
|
|||||||
const handleMouseLeave = () => {
|
const handleMouseLeave = () => {
|
||||||
if (props.autoScroll) {
|
if (props.autoScroll) {
|
||||||
// 延迟启动滚动,避免鼠标快速进出
|
// 延迟启动滚动,避免鼠标快速进出
|
||||||
// 从当前位置继续向下滚动
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
startAutoScroll(false)
|
startAutoScroll()
|
||||||
}, 500)
|
}, 500)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -185,8 +133,7 @@ watch(() => props.listData, () => {
|
|||||||
if (props.autoScroll) {
|
if (props.autoScroll) {
|
||||||
stopAutoScroll()
|
stopAutoScroll()
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
// 数据更新后从顶部重新开始
|
startAutoScroll()
|
||||||
startAutoScroll(true)
|
|
||||||
}, 1000) // 数据更新后1秒开始滚动
|
}, 1000) // 数据更新后1秒开始滚动
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -194,9 +141,9 @@ watch(() => props.listData, () => {
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (props.autoScroll) {
|
if (props.autoScroll) {
|
||||||
// 组件挂载后延迟启动滚动,从顶部开始
|
// 组件挂载后延迟启动滚动
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
startAutoScroll(true)
|
startAutoScroll()
|
||||||
}, 2000)
|
}, 2000)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -207,9 +154,6 @@ 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%;
|
||||||
@@ -341,31 +285,4 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 骨架屏样式
|
|
||||||
.skeleton-pulse {
|
|
||||||
animation: skeleton-loading-alertlist 1.5s ease-in-out infinite;
|
|
||||||
background-color: #444;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-row {
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-item {
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes skeleton-loading-alertlist {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -52,7 +52,7 @@
|
|||||||
class="alert-text"
|
class="alert-text"
|
||||||
:class="[{ error: item.error }, { warn: item.warn }]"
|
:class="[{ error: item.error }, { warn: item.warn }]"
|
||||||
>
|
>
|
||||||
<a href="'http://10.0.64.20/pms/workorder-list'">{{ (index + 1) }} {{ item.text }}</a>
|
{{ (index + 1) }} {{ item.text }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,398 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div :class="['header-left', `theme-${theme}`]">
|
|
||||||
<!-- 返回按钮 - PNG图片类型(暗色系主题使用,保持原样) -->
|
|
||||||
<img
|
|
||||||
v-if="backButtonType === 'image' && showBackButton && theme === 'dark'"
|
|
||||||
class="back-img"
|
|
||||||
@click="handleBack"
|
|
||||||
src="@/assets/images/screen/back_image.png"
|
|
||||||
/>
|
|
||||||
<!-- 返回按钮 - SVG图片类型(亮色系主题使用,支持主题颜色) -->
|
|
||||||
<svg
|
|
||||||
v-if="backButtonType === 'image' && showBackButton && theme === 'light'"
|
|
||||||
class="back-svg"
|
|
||||||
viewBox="0 0 1024 1024"
|
|
||||||
version="1.1"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
@click="handleBack"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M620.8 348.16H276.48l102.4-102.4c10.24-10.24 10.24-25.6 0-35.84-10.24-10.24-25.6-10.24-35.84 0L197.12 354.56c-5.12 5.12-7.68 11.52-7.68 17.92 0 6.4 2.56 12.8 7.68 17.92l144.64 144.64c10.24 10.24 25.6 10.24 35.84 0 10.24-10.24 10.24-25.6 0-35.84L277.76 399.36h343.04C716.8 399.36 793.6 476.16 793.6 572.16S716.8 744.96 620.8 744.96H358.4c-14.08 0-25.6 11.52-25.6 25.6s11.52 25.6 25.6 25.6h262.4a223.4368 223.4368 0 0 0 224-224A223.4368 223.4368 0 0 0 620.8 348.16z"
|
|
||||||
:fill="svgFillColor"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<!-- 返回按钮 - 图标类型 -->
|
|
||||||
<el-icon
|
|
||||||
v-if="backButtonType === 'icon' && showBackButton"
|
|
||||||
class="back-arrow"
|
|
||||||
@click="handleBack"
|
|
||||||
>
|
|
||||||
<ArrowLeft />
|
|
||||||
</el-icon>
|
|
||||||
<!-- 文本按钮/显示 -->
|
|
||||||
<div
|
|
||||||
v-if="displayText"
|
|
||||||
:class="[
|
|
||||||
'back-button',
|
|
||||||
{
|
|
||||||
'clickable': clickable,
|
|
||||||
'non-clickable': !clickable
|
|
||||||
}
|
|
||||||
]"
|
|
||||||
@click="handleTextClick"
|
|
||||||
>
|
|
||||||
{{ displayText }}
|
|
||||||
<span v-if="showSelectorIndicator">···</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 区域/园区选择弹窗 -->
|
|
||||||
<RegionSelector
|
|
||||||
v-model="selectorVisible"
|
|
||||||
:modelSelected="selectedValue"
|
|
||||||
:regions="options"
|
|
||||||
@change="handleSelectorChange"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, onMounted, watch, computed } from 'vue'
|
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
import { ArrowLeft } from '@element-plus/icons-vue'
|
|
||||||
import RegionSelector from './RegionSelector.vue'
|
|
||||||
import { getTableList } from '@/api/design/report'
|
|
||||||
|
|
||||||
interface OptionItem {
|
|
||||||
name: string
|
|
||||||
code: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
// 返回按钮类型:'image' | 'icon' | 'none'
|
|
||||||
backButtonType?: 'image' | 'icon' | 'none'
|
|
||||||
// 是否显示返回按钮
|
|
||||||
showBackButton?: boolean
|
|
||||||
// 返回按钮点击事件
|
|
||||||
onBack?: () => void
|
|
||||||
// 显示的文本
|
|
||||||
displayText?: string
|
|
||||||
// 文本是否可点击
|
|
||||||
clickable?: boolean
|
|
||||||
// 是否显示选择器指示器(···)
|
|
||||||
showSelectorIndicator?: boolean
|
|
||||||
// 选择器类型:'region' | 'park' | 'none'
|
|
||||||
selectorType?: 'region' | 'park' | 'none'
|
|
||||||
// 选择器选项(如果不提供,会根据 selectorType 自动获取)
|
|
||||||
options?: OptionItem[]
|
|
||||||
// 当前选中的值
|
|
||||||
selectedValue?: string
|
|
||||||
// 选择器变化事件
|
|
||||||
onSelectorChange?: (item: OptionItem) => void
|
|
||||||
// 区域代码(用于获取园区列表)
|
|
||||||
regionCode?: string
|
|
||||||
// 主题:'light' | 'dark'
|
|
||||||
theme?: 'light' | 'dark'
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
|
||||||
backButtonType: 'none',
|
|
||||||
showBackButton: false,
|
|
||||||
clickable: true,
|
|
||||||
showSelectorIndicator: false,
|
|
||||||
selectorType: 'none',
|
|
||||||
options: () => [],
|
|
||||||
selectedValue: '',
|
|
||||||
regionCode: '',
|
|
||||||
theme: 'dark'
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
|
||||||
selectorChange: [item: OptionItem]
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
const selectorVisible = ref(false)
|
|
||||||
const options = ref<OptionItem[]>(props.options || [])
|
|
||||||
|
|
||||||
// 根据主题计算 SVG 填充颜色
|
|
||||||
const svgFillColor = computed(() => {
|
|
||||||
return props.theme === 'light' ? '#409eff' : '#ffffff'
|
|
||||||
})
|
|
||||||
|
|
||||||
// 监听 props.options 的变化
|
|
||||||
watch(() => props.options, (newOptions) => {
|
|
||||||
if (newOptions && newOptions.length > 0) {
|
|
||||||
options.value = newOptions
|
|
||||||
}
|
|
||||||
}, { immediate: true, deep: true })
|
|
||||||
|
|
||||||
// 缓存工具函数
|
|
||||||
const CACHE_KEY = 'shared_regionOption_cache'
|
|
||||||
|
|
||||||
interface CacheData {
|
|
||||||
records: any[]
|
|
||||||
timestamp: number
|
|
||||||
}
|
|
||||||
|
|
||||||
const getCachedRegionOption = (): any[] | null => {
|
|
||||||
try {
|
|
||||||
const cached = sessionStorage.getItem(CACHE_KEY)
|
|
||||||
if (cached) {
|
|
||||||
const cacheData: CacheData = JSON.parse(cached)
|
|
||||||
return cacheData.records
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('读取缓存失败:', error)
|
|
||||||
sessionStorage.removeItem(CACHE_KEY)
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
const setCachedRegionOption = (records: any[]) => {
|
|
||||||
try {
|
|
||||||
const cacheData: CacheData = {
|
|
||||||
records,
|
|
||||||
timestamp: Date.now()
|
|
||||||
}
|
|
||||||
sessionStorage.setItem(CACHE_KEY, JSON.stringify(cacheData))
|
|
||||||
console.log('regionOption 数据已缓存')
|
|
||||||
} catch (error) {
|
|
||||||
console.error('保存缓存失败:', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 初始化选项数据 - 统一从内部获取,不再依赖外部传入
|
|
||||||
const initOptions = async () => {
|
|
||||||
// 如果外部传入了 options,优先使用(保留兼容性)
|
|
||||||
if (props.options && props.options.length > 0) {
|
|
||||||
options.value = props.options
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (props.selectorType === 'none') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
// 先检查缓存
|
|
||||||
const cachedRecords = getCachedRegionOption()
|
|
||||||
let records = cachedRecords
|
|
||||||
|
|
||||||
if (!records || records.length === 0) {
|
|
||||||
// 缓存不存在或已过期,调用接口
|
|
||||||
const result = await getTableList('park_info_list')
|
|
||||||
records = result.records || []
|
|
||||||
|
|
||||||
if (records && records.length > 0) {
|
|
||||||
// 保存到缓存
|
|
||||||
setCachedRegionOption(records)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (records && records.length > 0) {
|
|
||||||
if (props.selectorType === 'region') {
|
|
||||||
// 区域选择:去重region字段
|
|
||||||
const regionMap = new Map()
|
|
||||||
records.forEach((el: any) => {
|
|
||||||
if (!regionMap.has(el.region)) {
|
|
||||||
regionMap.set(el.region, {
|
|
||||||
name: el.region,
|
|
||||||
code: el.region_id
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
options.value = Array.from(regionMap.values())
|
|
||||||
} else if (props.selectorType === 'park') {
|
|
||||||
// 园区选择:根据regionCode过滤,去重park_name字段
|
|
||||||
if (!props.regionCode) {
|
|
||||||
// 如果 regionCode 还没有值,等待它被设置
|
|
||||||
console.log('等待 regionCode 设置...')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const parkMap = new Map()
|
|
||||||
const filteredRecords = records.filter((el: any) => el.region_id == props.regionCode)
|
|
||||||
if (filteredRecords.length === 0) {
|
|
||||||
console.warn(`未找到 regionCode 为 ${props.regionCode} 的园区数据`)
|
|
||||||
}
|
|
||||||
filteredRecords.forEach((el: any) => {
|
|
||||||
if (!parkMap.has(el.park_name)) {
|
|
||||||
parkMap.set(el.park_name, {
|
|
||||||
name: el.park_name,
|
|
||||||
code: el.park_code
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
options.value = Array.from(parkMap.values())
|
|
||||||
console.log('园区选项已更新:', options.value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('初始化选项数据失败:', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理返回按钮点击
|
|
||||||
const handleBack = () => {
|
|
||||||
if (props.onBack) {
|
|
||||||
props.onBack()
|
|
||||||
} else {
|
|
||||||
router.back()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理文本点击
|
|
||||||
const handleTextClick = () => {
|
|
||||||
if (!props.clickable) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (props.selectorType !== 'none') {
|
|
||||||
selectorVisible.value = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理选择器变化
|
|
||||||
const handleSelectorChange = (item: OptionItem) => {
|
|
||||||
if (props.onSelectorChange) {
|
|
||||||
props.onSelectorChange(item)
|
|
||||||
}
|
|
||||||
// 同时发出事件,供父组件使用 @selector-change 监听
|
|
||||||
emit('selectorChange', item)
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
initOptions()
|
|
||||||
})
|
|
||||||
|
|
||||||
// 监听 regionCode 的变化,当它变化时重新初始化选项(用于园区选择)
|
|
||||||
watch(() => props.regionCode, (newRegionCode) => {
|
|
||||||
if (props.selectorType === 'park' && newRegionCode) {
|
|
||||||
initOptions()
|
|
||||||
}
|
|
||||||
}, { immediate: false })
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.header-left {
|
|
||||||
display: flex;
|
|
||||||
padding-left: 1vw;
|
|
||||||
line-height: 80px;
|
|
||||||
flex: 1;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.back-img {
|
|
||||||
height: 3vh;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-svg {
|
|
||||||
height: 3vh;
|
|
||||||
width: auto;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-arrow {
|
|
||||||
font-size: 20px;
|
|
||||||
color: #409eff;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #79bbff;
|
|
||||||
transform: translateX(-2px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-button {
|
|
||||||
display: inline-flex;
|
|
||||||
height: 2vh;
|
|
||||||
min-width: 6vw;
|
|
||||||
padding: 4px 16px;
|
|
||||||
margin-left: 0.5vw;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
color: white;
|
|
||||||
|
|
||||||
&.clickable {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.non-clickable {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 暗色系主题(默认)
|
|
||||||
&.theme-dark {
|
|
||||||
.back-button {
|
|
||||||
background: rgb(13 24 84 / 80%);
|
|
||||||
border: 1px solid rgb(59 130 246 / 40%);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgb(59 130 246 / 30%);
|
|
||||||
border-color: rgb(59 130 246 / 60%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 亮色系主题 - 只改颜色,保持UI结构
|
|
||||||
&.theme-light {
|
|
||||||
.back-button {
|
|
||||||
background: #409eff;
|
|
||||||
border: 1px solid #e5e7eb;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #79bbff;
|
|
||||||
border-color: #cbd5e1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 响应式设计 */
|
|
||||||
@media (width <= 1024px) {
|
|
||||||
.header-left .back-button {
|
|
||||||
min-width: 8vw;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (width <= 768px) {
|
|
||||||
.header-left {
|
|
||||||
line-height: 70px;
|
|
||||||
|
|
||||||
.back-button {
|
|
||||||
min-width: 12vw;
|
|
||||||
padding: 3px 12px;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (width <= 480px) {
|
|
||||||
.header-left {
|
|
||||||
line-height: 60px;
|
|
||||||
|
|
||||||
.back-button {
|
|
||||||
min-width: 15vw;
|
|
||||||
padding: 2px 10px;
|
|
||||||
font-size: 0.65rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@@ -1,22 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="center-container" :data-window-width="windowWidth">
|
<div class="center-container">
|
||||||
<div class="center-content">
|
<div class="center-content">
|
||||||
<!-- 隐患排查治理 这个标题需要隐藏 2025-10-31 -->
|
<span class="title">隐患排查治理</span>
|
||||||
<span class="title"></span>
|
|
||||||
<img class="bottom-border-line" src="@/assets/images/title_border_line_1.png" />
|
<img class="bottom-border-line" src="@/assets/images/title_border_line_1.png" />
|
||||||
<span class="sub-title">隐患等级</span>
|
<span class="sub-title">分类风险</span>
|
||||||
<img width="50%" src="@/assets/images/line_1.png" />
|
<img width="50%" src="@/assets/images/line_1.png" />
|
||||||
|
|
||||||
<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>
|
||||||
<div style="width: 20px; height: 20px" v-if="props.loading" class="type-num skeleton-pulse"></div>
|
<span class="type-num">{{ hiddenDangerData?.major || 0 }}</span>
|
||||||
<span v-else 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>
|
||||||
<div style="width: 20px; height: 20px" v-if="props.loading" class="type-num skeleton-pulse"></div>
|
<span class="type-num">{{ hiddenDangerData?.general || 0 }}</span>
|
||||||
<span v-else class="type-num cursor-pointer" @click="handleMajorClick">{{ hiddenDangerData?.general || 0 }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -32,8 +29,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="echart-wrapper">
|
<div class="echart-wrapper">
|
||||||
<div class="lf-rt">
|
<div class="lf-rt">
|
||||||
<div v-if="props.loading" class="skeleton-chart-circle skeleton-pulse"></div>
|
<Echart :options="progressChartOption" class="progress-chart" height="80%" />
|
||||||
<Echart v-else :options="progressChartOption" class="progress-chart" height="80%" />
|
|
||||||
<div class="progress-legend">
|
<div class="progress-legend">
|
||||||
<div class="legend-item"><span class="dot red"></span>已逾期</div>
|
<div class="legend-item"><span class="dot red"></span>已逾期</div>
|
||||||
<div class="legend-item"><span class="dot green"></span>已处理</div>
|
<div class="legend-item"><span class="dot green"></span>已处理</div>
|
||||||
@@ -44,45 +40,39 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="lf-rt">
|
<div class="lf-rt">
|
||||||
<div v-if="props.loading" class="skeleton-chart-circle skeleton-pulse"></div>
|
<Echart :options="top3TypesChartOption" class="progress-chart" height="80%" />
|
||||||
<Echart v-else :options="top3TypesChartOption" class="progress-chart" height="80%" />
|
|
||||||
<div class="progress-legend-column">
|
<div class="progress-legend-column">
|
||||||
<div class="legend-item">
|
<div class="legend-item">
|
||||||
<span class="dot blue"></span>
|
<span class="dot blue"></span>
|
||||||
<span class="legend-text" :title="props.hiddenDangerData?.top3Types?.[0]?.order_type_path_name || '--'">{{ props.hiddenDangerData?.top3Types?.[0]?.order_type_path_name || "--" }}</span>
|
<span class="legend-text">{{ props.hiddenDangerData?.top3Types?.[0]?.order_type_path_name || "--" }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="legend-item">
|
<div class="legend-item">
|
||||||
<span class="dot green"></span>
|
<span class="dot green"></span>
|
||||||
<span class="legend-text" :title="props.hiddenDangerData?.top3Types?.[1]?.order_type_path_name || '--'">{{ props.hiddenDangerData?.top3Types?.[1]?.order_type_path_name || "--" }}</span>
|
<span class="legend-text">{{ props.hiddenDangerData?.top3Types?.[1]?.order_type_path_name || "--" }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="legend-item">
|
<div class="legend-item">
|
||||||
<span class="dot yellow"></span>
|
<span class="dot yellow"></span>
|
||||||
<span class="legend-text" :title="props.hiddenDangerData?.top3Types?.[2]?.order_type_path_name || '--'">{{ props.hiddenDangerData?.top3Types?.[2]?.order_type_path_name || "--" }}</span>
|
<span class="legend-text">{{ props.hiddenDangerData?.top3Types?.[2]?.order_type_path_name || "--" }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="safe-wrapper">
|
<div class="safe-wrapper">
|
||||||
<span class="safe-title">
|
<span class="safe-title">
|
||||||
<img class="safe-icon" src="@/assets/images/ybp_icon.png" />
|
<img width="22" style="margin: 3px 5px 0 0" src="@/assets/images/ybp_icon.png" />
|
||||||
<span class="safe-title-text">安全指数:</span>
|
安全指数:
|
||||||
<p class="safe-tooltip" title="安全指数 = (1-逾期隐患百分比) × 40% + 安全考核通过率 × 10% + 安全培训完成率 × 10%
|
|
||||||
+ 安全类工单完成率 × 20% + 工程类工单完成率 × 20%"></p>
|
|
||||||
</span>
|
</span>
|
||||||
<span v-if="props.loading" class="pending-count skeleton-pulse"></span>
|
<span class="pending-count">{{ hiddenDangerData?.safetyIndex || 0 }}</span>
|
||||||
<span v-else class="pending-count">{{ hiddenDangerData?.safetyIndex || 0 }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
|
import { ref, onMounted, watch } from 'vue'
|
||||||
import echarts from '@/plugins/echarts'
|
|
||||||
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
loading?: boolean
|
|
||||||
hiddenDangerData?: {
|
hiddenDangerData?: {
|
||||||
general: number
|
general: number
|
||||||
major: number
|
major: number
|
||||||
@@ -103,124 +93,8 @@ interface Props {
|
|||||||
|
|
||||||
const props = defineProps<Props>()
|
const props = defineProps<Props>()
|
||||||
|
|
||||||
// 窗口尺寸响应式变量,用于强制响应式更新
|
|
||||||
const windowWidth = ref(window.innerWidth)
|
|
||||||
const windowHeight = ref(window.innerHeight)
|
|
||||||
|
|
||||||
// 防抖函数
|
|
||||||
let resizeTimer: ReturnType<typeof setTimeout> | null = null
|
|
||||||
|
|
||||||
// 手动触发 ECharts 图表 resize
|
|
||||||
const resizeEcharts = () => {
|
|
||||||
nextTick(() => {
|
|
||||||
// 查找所有 ECharts 容器并触发 resize
|
|
||||||
// Echart 组件会在内部创建 div,class 包含 progress-chart
|
|
||||||
const chartContainers = document.querySelectorAll('.center-container .progress-chart')
|
|
||||||
chartContainers.forEach((container) => {
|
|
||||||
try {
|
|
||||||
const chartInstance = echarts.getInstanceByDom(container as HTMLElement)
|
|
||||||
if (chartInstance) {
|
|
||||||
chartInstance.resize()
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.warn('ECharts resize 失败:', error)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 如果上面的选择器找不到,尝试更通用的方式
|
|
||||||
if (chartContainers.length === 0) {
|
|
||||||
const allContainers = document.querySelectorAll('.center-container [class*="echart"]')
|
|
||||||
allContainers.forEach((container) => {
|
|
||||||
try {
|
|
||||||
const chartInstance = echarts.getInstanceByDom(container as HTMLElement)
|
|
||||||
if (chartInstance) {
|
|
||||||
chartInstance.resize()
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
// 忽略错误
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// 监听窗口尺寸变化
|
|
||||||
const handleResize = () => {
|
|
||||||
// 立即更新窗口尺寸(用于响应式绑定)
|
|
||||||
windowWidth.value = window.innerWidth
|
|
||||||
windowHeight.value = window.innerHeight
|
|
||||||
|
|
||||||
// 立即触发一次 ECharts resize(快速响应)
|
|
||||||
resizeEcharts()
|
|
||||||
|
|
||||||
// 清除之前的定时器
|
|
||||||
if (resizeTimer) {
|
|
||||||
clearTimeout(resizeTimer)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 使用防抖,延迟执行样式重新计算(优化性能)
|
|
||||||
resizeTimer = setTimeout(() => {
|
|
||||||
// 强制触发样式重新计算 - 通过读取 offsetHeight 触发重排
|
|
||||||
const container = document.querySelector('.center-container') as HTMLElement
|
|
||||||
if (container) {
|
|
||||||
// 触发重排,强制浏览器重新计算样式
|
|
||||||
void container.offsetHeight
|
|
||||||
}
|
|
||||||
// 再次触发 ECharts resize(确保完全更新)
|
|
||||||
resizeEcharts()
|
|
||||||
}, 100) // 100ms 防抖延迟
|
|
||||||
}
|
|
||||||
|
|
||||||
// 全屏切换处理函数(立即执行,不使用防抖)
|
|
||||||
const handleFullscreenChange = () => {
|
|
||||||
// 立即更新窗口尺寸
|
|
||||||
windowWidth.value = window.innerWidth
|
|
||||||
windowHeight.value = window.innerHeight
|
|
||||||
// 延迟一点确保 DOM 已更新
|
|
||||||
setTimeout(() => {
|
|
||||||
resizeEcharts()
|
|
||||||
// 强制触发样式重新计算
|
|
||||||
const container = document.querySelector('.center-container') as HTMLElement
|
|
||||||
if (container) {
|
|
||||||
void container.offsetHeight
|
|
||||||
}
|
|
||||||
}, 150) // 稍微延迟确保全屏切换完成
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
window.addEventListener('resize', handleResize)
|
|
||||||
// 监听全屏变化 - 立即执行,不使用防抖
|
|
||||||
document.addEventListener('fullscreenchange', handleFullscreenChange)
|
|
||||||
document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
|
|
||||||
document.addEventListener('mozfullscreenchange', handleFullscreenChange)
|
|
||||||
document.addEventListener('MSFullscreenChange', handleFullscreenChange)
|
|
||||||
|
|
||||||
// 组件挂载时,如果已有数据,立即更新图表
|
|
||||||
if (props.hiddenDangerData?.progress) {
|
|
||||||
console.log('onMounted: 初始化图表数据', props.hiddenDangerData.progress)
|
|
||||||
refreshProcessCharts(props.hiddenDangerData.progress)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
if (resizeTimer) {
|
|
||||||
clearTimeout(resizeTimer)
|
|
||||||
}
|
|
||||||
window.removeEventListener('resize', handleResize)
|
|
||||||
document.removeEventListener('fullscreenchange', handleFullscreenChange)
|
|
||||||
document.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
|
|
||||||
document.removeEventListener('mozfullscreenchange', handleFullscreenChange)
|
|
||||||
document.removeEventListener('MSFullscreenChange', handleFullscreenChange)
|
|
||||||
})
|
|
||||||
|
|
||||||
// 图表引用
|
// 图表引用
|
||||||
const progressChartOption = ref<any>({
|
const progressChartOption = ref<any>({
|
||||||
backgroundColor: 'transparent',
|
|
||||||
tooltip: {
|
|
||||||
show: true,
|
|
||||||
trigger: 'item',
|
|
||||||
formatter: '{b}: {c}%'
|
|
||||||
},
|
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'pie' as const,
|
type: 'pie' as const,
|
||||||
@@ -231,7 +105,6 @@ 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,
|
||||||
@@ -245,7 +118,6 @@ const progressChartOption = ref<any>({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
labelLine: {
|
labelLine: {
|
||||||
show: true,
|
|
||||||
length: 5,
|
length: 5,
|
||||||
length2: 0,
|
length2: 0,
|
||||||
maxSurfaceAngle: 10
|
maxSurfaceAngle: 10
|
||||||
@@ -316,106 +188,30 @@ const top3TypesChartOption = ref<any>({
|
|||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
const handleMajorClick = () => {
|
watch(() => props.hiddenDangerData?.progress, (newVal) => {
|
||||||
window.open('http://10.0.64.20/pms/workorder-list', '_blank')
|
refreshProcessCharts(newVal)
|
||||||
}
|
}, { deep: true })
|
||||||
|
|
||||||
// 辅助函数:安全地将值转换为数字,处理 NaN 和字符串 "NaN" 的情况
|
|
||||||
const safeNumber = (val: any): number => {
|
|
||||||
if (val === null || val === undefined || val === '' || val === 'NaN') {
|
|
||||||
return 0
|
|
||||||
}
|
|
||||||
const num = Number(val)
|
|
||||||
return isNaN(num) ? 0 : num
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新图表数据
|
// 更新图表数据
|
||||||
const refreshProcessCharts = (process): void => {
|
const refreshProcessCharts = (process): void => {
|
||||||
if (!process) {
|
if (!props.hiddenDangerData?.progress) {
|
||||||
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 }
|
||||||
const overdue = safeNumber(process.overdue)
|
option.series[0].data = [
|
||||||
const processed = safeNumber(process.processed)
|
{ value: process.overdue || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
|
||||||
const processing = safeNumber(process.processing)
|
{ value: process.processed || 0, name: '已处理', itemStyle: { color: '#10b981' } },
|
||||||
|
// { value: process.pending || 0, name: '待排查', itemStyle: { color: '#eab308' } },
|
||||||
console.log('refreshProcessCharts 数据:', { overdue, processed, processing })
|
{ value: process.processing || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
|
||||||
|
|
||||||
// 创建新的配置对象,确保 Vue 能检测到变化
|
|
||||||
const option = {
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
tooltip: {
|
|
||||||
show: true,
|
|
||||||
trigger: 'item',
|
|
||||||
formatter: '{b}: {c}%'
|
|
||||||
},
|
|
||||||
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
|
|
||||||
};
|
|
||||||
},
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
|
progressChartOption.value = option
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log('更新后的图表数据:', option.series[0].data)
|
|
||||||
// 更新图表配置
|
watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
|
||||||
progressChartOption.value = option
|
refreshTop3TypesCharts(newVal)
|
||||||
// 更新 key 以强制重新渲染(可选,通常不需要)
|
}, { deep: true })
|
||||||
// chartKey.value = Date.now()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新图表数据
|
// 更新图表数据
|
||||||
const refreshTop3TypesCharts = (top3Types): void => {
|
const refreshTop3TypesCharts = (top3Types): void => {
|
||||||
@@ -438,54 +234,21 @@ const refreshTop3TypesCharts = (top3Types): void => {
|
|||||||
top3TypesChartOption.value = option
|
top3TypesChartOption.value = option
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(() => props.hiddenDangerData?.progress, (newVal, oldVal) => {
|
onMounted(() => {
|
||||||
console.log('HiddenDangerPanel watch 触发,progress 数据:', newVal, '旧数据:', oldVal)
|
|
||||||
// 确保每次数据变化都更新图表
|
|
||||||
if (newVal) {
|
|
||||||
refreshProcessCharts(newVal)
|
|
||||||
} else {
|
|
||||||
// 即使数据为空,也要显示空图表
|
|
||||||
refreshProcessCharts(null)
|
|
||||||
}
|
|
||||||
}, { deep: true, immediate: true })
|
|
||||||
|
|
||||||
watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
|
})
|
||||||
refreshTop3TypesCharts(newVal)
|
|
||||||
}, { deep: true })
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
/* 响应式设计 */
|
/* 响应式设计 */
|
||||||
@media (max-width: 1200px) {
|
@media (width <=1200px) {
|
||||||
.center-container {
|
.center-container {
|
||||||
width: 60vh;
|
width: 60vh;
|
||||||
height: 60vh;
|
height: 60vh;
|
||||||
|
|
||||||
.center-content {
|
|
||||||
.echart-wrapper {
|
|
||||||
.lf-rt {
|
|
||||||
.progress-legend-column {
|
|
||||||
padding: 0 4px;
|
|
||||||
|
|
||||||
.legend-item {
|
|
||||||
.legend-text {
|
|
||||||
font-size: 0.68rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.safe-wrapper {
|
@media (width <=1024px) {
|
||||||
.safe-title {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.center-container {
|
.center-container {
|
||||||
width: 55vh;
|
width: 55vh;
|
||||||
height: 55vh;
|
height: 55vh;
|
||||||
@@ -507,34 +270,11 @@ watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
|
|||||||
font-size: 0.65rem;
|
font-size: 0.65rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.echart-wrapper {
|
|
||||||
.lf-rt {
|
|
||||||
.progress-legend-column {
|
|
||||||
padding: 0 3px;
|
|
||||||
|
|
||||||
.legend-item {
|
|
||||||
.legend-text {
|
|
||||||
font-size: 0.65rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.safe-wrapper {
|
|
||||||
.safe-title {
|
|
||||||
.safe-icon {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (width <=768px) {
|
||||||
.center-container {
|
.center-container {
|
||||||
top: 60%;
|
top: 60%;
|
||||||
width: 50vh;
|
width: 50vh;
|
||||||
@@ -578,45 +318,16 @@ watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
|
|||||||
.echart-wrapper {
|
.echart-wrapper {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
|
|
||||||
.lf-rt {
|
.lf-rt .progress-legend .legend-item {
|
||||||
.progress-legend .legend-item {
|
|
||||||
font-size: 0.6rem;
|
font-size: 0.6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-legend-column {
|
|
||||||
padding: 0 2px;
|
|
||||||
|
|
||||||
.legend-item {
|
|
||||||
gap: 3px;
|
|
||||||
|
|
||||||
.legend-text {
|
|
||||||
font-size: 0.6rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.safe-wrapper {
|
.safe-wrapper {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5vh;
|
|
||||||
|
|
||||||
.safe-title {
|
.safe-title {
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
margin-left: 0;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.safe-icon {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
margin: 2px 3px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.safe-tooltip {
|
|
||||||
width: 15px;
|
|
||||||
height: 15px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pending-count {
|
.pending-count {
|
||||||
@@ -627,7 +338,7 @@ watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
@media (width <=480px) {
|
||||||
.center-container {
|
.center-container {
|
||||||
top: 65%;
|
top: 65%;
|
||||||
width: 45vh;
|
width: 45vh;
|
||||||
@@ -654,43 +365,13 @@ watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
|
|||||||
|
|
||||||
.echart-wrapper {
|
.echart-wrapper {
|
||||||
width: 95%;
|
width: 95%;
|
||||||
|
|
||||||
.lf-rt {
|
|
||||||
.progress-legend-column {
|
|
||||||
padding: 0 1px;
|
|
||||||
gap: 6px;
|
|
||||||
|
|
||||||
.legend-item {
|
|
||||||
gap: 2px;
|
|
||||||
|
|
||||||
.legend-text {
|
|
||||||
font-size: 0.55rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.safe-wrapper {
|
.safe-wrapper {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.3vh;
|
|
||||||
|
|
||||||
.safe-title {
|
.safe-title {
|
||||||
font-size: 0.65rem;
|
font-size: 0.65rem;
|
||||||
margin-left: 0;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.safe-icon {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
margin: 2px 2px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.safe-tooltip {
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pending-count {
|
.pending-count {
|
||||||
@@ -700,11 +381,7 @@ watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.safe-tooltip:before {
|
|
||||||
content: '?';
|
|
||||||
color: yellow;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.center-container {
|
.center-container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 55%;
|
top: 55%;
|
||||||
@@ -724,7 +401,7 @@ watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
|
|||||||
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;
|
||||||
@@ -836,19 +513,14 @@ watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: flex-start;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
width: 100%;
|
|
||||||
padding: 0 5px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.legend-item {
|
.legend-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 60%;
|
||||||
max-width: 100%;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
min-width: 0; // 允许 flex 子元素收缩
|
|
||||||
|
|
||||||
.legend-text {
|
.legend-text {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -856,7 +528,6 @@ watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0; // 关键:允许文本收缩
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -866,47 +537,15 @@ watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
|
|||||||
.safe-wrapper {
|
.safe-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 40%;
|
width: 40%;
|
||||||
min-width: 0; // 允许收缩
|
|
||||||
height: 20%;
|
height: 20%;
|
||||||
margin-bottom: 5%;
|
margin-bottom: 5%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
column-gap: 1vw;
|
column-gap: 1vw;
|
||||||
flex-wrap: wrap; // 允许换行
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.safe-title {
|
.safe-title {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-left: 1vw;
|
margin-left: 1vw;
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 2px;
|
|
||||||
min-width: 0;
|
|
||||||
flex: 1;
|
|
||||||
max-width: 100%;
|
|
||||||
|
|
||||||
.safe-icon {
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
margin: 3px 5px 0 0;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.safe-title-text {
|
|
||||||
white-space: nowrap;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.safe-tooltip {
|
|
||||||
width: 17px;
|
|
||||||
height: 17px;
|
|
||||||
background-color: rgb(125, 125, 152);
|
|
||||||
border-radius: 50%;
|
|
||||||
text-align: center;
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pending-count {
|
.pending-count {
|
||||||
@@ -914,7 +553,6 @@ watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
|
|||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: yellow;
|
color: yellow;
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -942,32 +580,4 @@ watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
|
|||||||
.dot.blue {
|
.dot.blue {
|
||||||
background-color: #3b82f6;
|
background-color: #3b82f6;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 骨架屏动画
|
|
||||||
.skeleton-pulse {
|
|
||||||
animation: skeleton-loading-hiddendanger 1.5s ease-in-out infinite;
|
|
||||||
background-color: #444;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 圆形饼图骨架屏
|
|
||||||
.skeleton-chart-circle {
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin: 30px auto 50px auto;
|
|
||||||
background-color: #444;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes skeleton-loading-hiddendanger {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -4,37 +4,29 @@
|
|||||||
<div>
|
<div>
|
||||||
<img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
|
<img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
|
||||||
</div>
|
</div>
|
||||||
<!-- 骨架屏 -->
|
|
||||||
|
|
||||||
<!-- 实际内容 -->
|
|
||||||
<div class="tip-container">
|
<div class="tip-container">
|
||||||
<div class="tip-image">
|
<div class="tip-image">
|
||||||
<img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
|
<img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
|
||||||
<div v-if="props.loading" style="width: 20px; height: 20px;" class="number skeleton-pulse"></div>
|
<span class="number">{{ alertData?.total || 0 }}</span>
|
||||||
<span v-else class="number">{{ alertData?.total || 0 }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
|
<img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
|
||||||
<div class="tip-content">
|
<div class="tip-content">
|
||||||
<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>
|
||||||
<div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
|
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.total || 0 }}</span>
|
||||||
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.total || 0 }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-item">
|
<div class="col-item">
|
||||||
<span>已处理</span>
|
<span>已处理</span>
|
||||||
<div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
|
<span style="font-size: 1.2rem; marker-start: 2vw; color: greenyellow;">{{ alertData?.processed || 0 }}</span>
|
||||||
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: greenyellow;">{{ alertData?.processed || 0 }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-item" style="display: flex; margin-left: 1vw; align-items: center;">
|
<div class="col-item" style="display: flex; margin-left: 1vw; align-items: center;">
|
||||||
<span>待处理</span>
|
<span>待处理</span>
|
||||||
<div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
|
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.pending || 0 }}</span>
|
||||||
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.pending || 0 }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-item" style="display: flex; margin-left: 1vw; align-items: center;">
|
<div class="col-item" style="display: flex; margin-left: 1vw; align-items: center;">
|
||||||
<span>处理中</span>
|
<span>处理中</span>
|
||||||
<div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
|
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.processing }}</span>
|
||||||
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.processing }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -53,7 +45,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<AlertList style="margin-right: 1vw;" title="告警详情" :list-data="alertDetails" :linkUrl="linkUrl" :loading="props.loading"></AlertList>
|
<AlertList style="margin-right: 1vw;" title="告警详情" :list-data="alertDetails" ></AlertList>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -80,8 +72,6 @@ interface Props {
|
|||||||
alertData?: AlertData
|
alertData?: AlertData
|
||||||
alertDetails?: AlertItem[]
|
alertDetails?: AlertItem[]
|
||||||
sourceIndex?: number
|
sourceIndex?: number
|
||||||
linkUrl?: string
|
|
||||||
loading?: boolean
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 默认值
|
// 默认值
|
||||||
@@ -93,8 +83,7 @@ const props = withDefaults(defineProps<Props>(), {
|
|||||||
processing: 0
|
processing: 0
|
||||||
}),
|
}),
|
||||||
alertDetails: () => [],
|
alertDetails: () => [],
|
||||||
sourceIndex: 1,
|
sourceIndex: 1
|
||||||
loading: false
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -275,104 +264,5 @@ const props = withDefaults(defineProps<Props>(), {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 骨架屏样式
|
|
||||||
.skeleton-container {
|
|
||||||
.skeleton-tip-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 70px;
|
|
||||||
|
|
||||||
.skeleton-tip-image {
|
|
||||||
position: absolute;
|
|
||||||
top: -5px;
|
|
||||||
right: 10px;
|
|
||||||
z-index: 2;
|
|
||||||
|
|
||||||
.skeleton-circle {
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
background-color: #3a3a3a;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-number {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
width: 30px;
|
|
||||||
height: 20px;
|
|
||||||
background-color: #3a3a3a;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-bg {
|
|
||||||
width: 100%;
|
|
||||||
height: 70px;
|
|
||||||
background-color: #3a3a3a;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-tip-content {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-around;
|
|
||||||
padding: 8px 15px;
|
|
||||||
|
|
||||||
.skeleton-col-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
.skeleton-icon {
|
|
||||||
width: 23px;
|
|
||||||
height: 23px;
|
|
||||||
background-color: #3a3a3a;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-text {
|
|
||||||
flex: 1;
|
|
||||||
height: 16px;
|
|
||||||
background-color: #3a3a3a;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-value {
|
|
||||||
width: 40px;
|
|
||||||
height: 18px;
|
|
||||||
background-color: #3a3a3a;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 骨架屏动画
|
|
||||||
.skeleton-pulse {
|
|
||||||
animation: skeleton-loading-highrisk 1.5s ease-in-out infinite;
|
|
||||||
background-color: #444;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes skeleton-loading-highrisk {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -3,34 +3,7 @@
|
|||||||
<div class="panel-title">人员管理</div>
|
<div class="panel-title">人员管理</div>
|
||||||
<img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
|
<img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
|
||||||
|
|
||||||
<!-- 骨架屏 -->
|
<div class="top-card">
|
||||||
<div v-if="props.loading" class="skeleton-container">
|
|
||||||
<div class="skeleton-card">
|
|
||||||
<div class="skeleton-left">
|
|
||||||
<div class="skeleton-icon skeleton-pulse"></div>
|
|
||||||
<div class="skeleton-text skeleton-pulse"></div>
|
|
||||||
<div class="skeleton-numbers">
|
|
||||||
<div class="skeleton-number skeleton-pulse" v-for="i in 6" :key="i"></div>
|
|
||||||
</div>
|
|
||||||
<div class="skeleton-text skeleton-pulse"></div>
|
|
||||||
</div>
|
|
||||||
<div class="skeleton-right">
|
|
||||||
<div class="skeleton-item" v-for="i in 3" :key="i">
|
|
||||||
<div class="skeleton-row">
|
|
||||||
<div class="skeleton-icon-small skeleton-pulse"></div>
|
|
||||||
<div class="skeleton-text skeleton-pulse"></div>
|
|
||||||
</div>
|
|
||||||
<div class="skeleton-numbers">
|
|
||||||
<div class="skeleton-number-small skeleton-pulse" v-for="j in 4" :key="j"></div>
|
|
||||||
</div>
|
|
||||||
<div class="skeleton-text skeleton-pulse"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 实际内容 -->
|
|
||||||
<div v-else class="top-card">
|
|
||||||
<div class="top-card-left">
|
<div class="top-card-left">
|
||||||
<div>
|
<div>
|
||||||
<img width="33px" src="@/assets/images/1_224520_821.png" />
|
<img width="33px" src="@/assets/images/1_224520_821.png" />
|
||||||
@@ -46,11 +19,9 @@
|
|||||||
|
|
||||||
<div class="top-card-right">
|
<div class="top-card-right">
|
||||||
<div class="top-card-right-item">
|
<div class="top-card-right-item">
|
||||||
<div>
|
|
||||||
<img width="18px" src="@/assets/images/v2_rel0n8.png" />
|
<img width="18px" src="@/assets/images/v2_rel0n8.png" />
|
||||||
<span>正式员工</span>
|
<span>正式员工</span>
|
||||||
</div>
|
<div class="type-number-wrapper" style="margin-left: 2vw">
|
||||||
<div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
|
|
||||||
<span class="type-number" v-for="(digit, index) in formalEmployeeDigits" :key="index">
|
<span class="type-number" v-for="(digit, index) in formalEmployeeDigits" :key="index">
|
||||||
{{ digit }}
|
{{ digit }}
|
||||||
</span>
|
</span>
|
||||||
@@ -59,11 +30,9 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="top-card-right-item">
|
<div class="top-card-right-item">
|
||||||
<div>
|
|
||||||
<img width="18px" src="@/assets/images/v2_rel0n23.png" />
|
<img width="18px" src="@/assets/images/v2_rel0n23.png" />
|
||||||
<span>外协人员</span>
|
<span>外协人员</span>
|
||||||
</div>
|
<div class="type-number-wrapper" style="margin-left: 1vw">
|
||||||
<div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
|
|
||||||
<span class="type-number" v-for="(digit, index) in externalStaffDigits" :key="index">
|
<span class="type-number" v-for="(digit, index) in externalStaffDigits" :key="index">
|
||||||
{{ digit }}
|
{{ digit }}
|
||||||
</span>
|
</span>
|
||||||
@@ -72,11 +41,9 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="top-card-right-item">
|
<div class="top-card-right-item">
|
||||||
<div>
|
|
||||||
<img width="18px" src="@/assets/images/24508_654.png" />
|
<img width="18px" src="@/assets/images/24508_654.png" />
|
||||||
<span>访客</span>
|
<span>访客</span>
|
||||||
</div>
|
<div class="type-number-wrapper">
|
||||||
<div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
|
|
||||||
<span class="type-number" v-for="(digit, index) in visitorDigits" :key="index">
|
<span class="type-number" v-for="(digit, index) in visitorDigits" :key="index">
|
||||||
{{ digit }}
|
{{ digit }}
|
||||||
</span>
|
</span>
|
||||||
@@ -91,7 +58,6 @@
|
|||||||
<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 v-if="props.loading" class="skeleton-chart-circle skeleton-pulse"></div> -->
|
|
||||||
<Echart :options="barChartOption" class="bar-chart" height="17.5vh" />
|
<Echart :options="barChartOption" class="bar-chart" height="17.5vh" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -102,7 +68,6 @@ import { ref, onMounted, watch, computed } from 'vue'
|
|||||||
import { rgbToHex } from '@/utils/color'
|
import { rgbToHex } from '@/utils/color'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
loading?: boolean
|
|
||||||
totalCount: number
|
totalCount: number
|
||||||
formalEmployeeCount: number
|
formalEmployeeCount: number
|
||||||
externalStaffCount: number
|
externalStaffCount: number
|
||||||
@@ -122,17 +87,6 @@ const formalEmployeeDigits = computed(() => String(props.formalEmployeeCount).sp
|
|||||||
const externalStaffDigits = computed(() => String(props.externalStaffCount).split('').map(Number))
|
const externalStaffDigits = computed(() => String(props.externalStaffCount).split('').map(Number))
|
||||||
const visitorDigits = computed(() => String(props.visitorCount).split('').map(Number))
|
const visitorDigits = computed(() => String(props.visitorCount).split('').map(Number))
|
||||||
|
|
||||||
// 计算数字区域的最大宽度
|
|
||||||
// 每个数字框宽度 14px,gap 2px
|
|
||||||
const maxNumberWidth = computed(() => {
|
|
||||||
const formalLen = formalEmployeeDigits.value.length
|
|
||||||
const externalLen = externalStaffDigits.value.length
|
|
||||||
const visitorLen = visitorDigits.value.length
|
|
||||||
const maxLen = Math.max(formalLen, externalLen, visitorLen)
|
|
||||||
// 宽度 = 数字个数 * 14px + (数字个数 - 1) * 2px
|
|
||||||
return maxLen > 0 ? maxLen * 14 + (maxLen - 1) * 2 : 0
|
|
||||||
})
|
|
||||||
|
|
||||||
// 图表引用
|
// 图表引用
|
||||||
const barChartOption = ref({
|
const barChartOption = ref({
|
||||||
legend: {
|
legend: {
|
||||||
@@ -289,25 +243,17 @@ onMounted(() => {
|
|||||||
.top-card-right-item {
|
.top-card-right-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
column-gap: 5px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
||||||
> :first-child {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
column-gap: 5px;
|
|
||||||
width: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.type-number-wrapper {
|
.type-number-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
|
||||||
gap: 2px;
|
gap: 2px;
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin-left: 8px;
|
|
||||||
|
|
||||||
.type-number {
|
.type-number {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@@ -317,15 +263,11 @@ onMounted(() => {
|
|||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: #158e56;
|
background-color: #1afb8f;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> span:last-child {
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -348,141 +290,5 @@ onMounted(() => {
|
|||||||
min-height: 17.5vh;
|
min-height: 17.5vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 骨架屏样式
|
|
||||||
.skeleton-container {
|
|
||||||
.skeleton-card {
|
|
||||||
display: flex;
|
|
||||||
padding: 0 20px;
|
|
||||||
column-gap: 15px;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
|
|
||||||
.skeleton-left {
|
|
||||||
display: flex;
|
|
||||||
height: 12vh;
|
|
||||||
min-width: 15vw;
|
|
||||||
padding: 0 10px;
|
|
||||||
background-image: url('@/assets/imgs/total_count_card_bg.png');
|
|
||||||
background-size: cover;
|
|
||||||
column-gap: 6px;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.skeleton-icon {
|
|
||||||
width: 33px;
|
|
||||||
height: 33px;
|
|
||||||
background-color: #3a3a3a;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-text {
|
|
||||||
background-color: #3a3a3a;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-numbers {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2px;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
|
|
||||||
.skeleton-number {
|
|
||||||
width: 26px;
|
|
||||||
height: 50px;
|
|
||||||
background-color: #3a3a3a;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-right {
|
|
||||||
display: flex;
|
|
||||||
height: 12vh;
|
|
||||||
min-width: 20vw;
|
|
||||||
background-image: url('@/assets/imgs/staff_types_bg.png');
|
|
||||||
background-position: top center;
|
|
||||||
background-size: cover;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
row-gap: 4px;
|
|
||||||
|
|
||||||
.skeleton-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
column-gap: 5px;
|
|
||||||
padding: 0 10px;
|
|
||||||
|
|
||||||
.skeleton-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
.skeleton-icon-small {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
background-color: #3a3a3a;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-text {
|
|
||||||
height: 16px;
|
|
||||||
width: 60px;
|
|
||||||
background-color: #3a3a3a;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-numbers {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2px;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
|
|
||||||
.skeleton-number-small {
|
|
||||||
width: 14px;
|
|
||||||
height: 25px;
|
|
||||||
background-color: #3a3a3a;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 骨架屏动画
|
|
||||||
.skeleton-pulse {
|
|
||||||
animation: skeleton-loading-overview 1.5s ease-in-out infinite;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// 圆形饼图骨架屏
|
|
||||||
.skeleton-chart-circle {
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin: 30px auto 50px auto;
|
|
||||||
background-color: #444;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 柱状图骨架屏
|
|
||||||
// .skeleton-chart-bar {
|
|
||||||
// width: 100%;
|
|
||||||
// height: 17.5vh;
|
|
||||||
// background-color: #444;
|
|
||||||
// border-radius: 8px;
|
|
||||||
// }
|
|
||||||
|
|
||||||
@keyframes skeleton-loading-overview {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,591 +0,0 @@
|
|||||||
<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>
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -11,12 +11,12 @@
|
|||||||
{{ currentTime }}
|
{{ currentTime }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <span class="weather-warning">
|
<span class="weather-warning">
|
||||||
天气预警:
|
天气预警:
|
||||||
<span style="color: red">
|
<span style="color: red">
|
||||||
2025年08月19日13:25分中央气象台发布雄安地区于17时至夜间将有200毫米强降雨,并伴有10级大风......
|
2025年08月19日13:25分中央气象台发布雄安地区于17时至夜间将有200毫米强降雨,并伴有10级大风......
|
||||||
</span>
|
</span>
|
||||||
</span> -->
|
</span>
|
||||||
<!-- 主内容区 -->
|
<!-- 主内容区 -->
|
||||||
<div class="content-container">
|
<div class="content-container">
|
||||||
<div class="left-wrapper">
|
<div class="left-wrapper">
|
||||||
|
|||||||
@@ -3,21 +3,17 @@
|
|||||||
<div class="panel-title">超时工单</div>
|
<div class="panel-title">超时工单</div>
|
||||||
<img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
|
<img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
|
||||||
|
|
||||||
<!-- 骨架屏 -->
|
|
||||||
<!-- 实际内容 -->
|
|
||||||
<div class="tip-container">
|
<div class="tip-container">
|
||||||
<div class="tip-image">
|
<div class="tip-image">
|
||||||
<img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
|
<img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
|
||||||
<div v-if="props.loading" style="width: 20px; height: 20px;" class="number skeleton-pulse"></div>
|
<span class="number">{{ timeoutWorkOrders?.total || 0 }}</span>
|
||||||
<span v-else class="number">{{ timeoutWorkOrders?.total || 0 }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
|
<img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
|
||||||
<div class="tip-content">
|
<div class="tip-content">
|
||||||
<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>
|
||||||
<div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
|
<span style="font-size: 1.2rem; marker-start: 2vw; color: red;">{{ timeoutWorkOrders?.total || 0 }}</span>
|
||||||
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: red;">{{ timeoutWorkOrders?.total || 0 }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -36,7 +32,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<AlertList :linkUrl="linkUrl" style="margin-right: 1vw;" title="工单详情" :list-data="alertDetails" :loading="props.loading" ></AlertList>
|
<AlertList style="margin-right: 1vw;" title="工单详情" :list-data="alertDetails" ></AlertList>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -56,11 +52,9 @@ interface TimeoutWorkOrders {
|
|||||||
|
|
||||||
// Props定义
|
// Props定义
|
||||||
interface Props {
|
interface Props {
|
||||||
loading?: boolean
|
|
||||||
timeoutWorkOrders?: TimeoutWorkOrders
|
timeoutWorkOrders?: TimeoutWorkOrders
|
||||||
alertDetails?: AlertItem[]
|
alertDetails?: AlertItem[]
|
||||||
sourceIndex?: number
|
sourceIndex?: number
|
||||||
linkUrl?: string
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 默认值
|
// 默认值
|
||||||
@@ -252,104 +246,5 @@ const props = withDefaults(defineProps<Props>(), {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 骨架屏样式
|
|
||||||
.skeleton-container {
|
|
||||||
.skeleton-tip-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 70px;
|
|
||||||
|
|
||||||
.skeleton-tip-image {
|
|
||||||
position: absolute;
|
|
||||||
top: -5px;
|
|
||||||
right: 10px;
|
|
||||||
z-index: 2;
|
|
||||||
|
|
||||||
.skeleton-circle {
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
background-color: #3a3a3a;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-number {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
width: 30px;
|
|
||||||
height: 20px;
|
|
||||||
background-color: #3a3a3a;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-bg {
|
|
||||||
width: 100%;
|
|
||||||
height: 70px;
|
|
||||||
background-color: #3a3a3a;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-tip-content {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 8px 15px;
|
|
||||||
|
|
||||||
.skeleton-col-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
.skeleton-icon {
|
|
||||||
width: 23px;
|
|
||||||
height: 23px;
|
|
||||||
background-color: #3a3a3a;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-text {
|
|
||||||
flex: 1;
|
|
||||||
height: 16px;
|
|
||||||
background-color: #3a3a3a;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skeleton-value {
|
|
||||||
width: 40px;
|
|
||||||
height: 18px;
|
|
||||||
background-color: #3a3a3a;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 骨架屏动画
|
|
||||||
.skeleton-pulse {
|
|
||||||
animation: skeleton-loading-timeout 1.5s ease-in-out infinite;
|
|
||||||
background-color: #444;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes skeleton-loading-timeout {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,15 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="weather-warning">
|
<div class="weather-warning">
|
||||||
<!-- <span>天气预警:</span> -->
|
<span>天气预警:</span>
|
||||||
<!-- 预报内容 -->
|
<!-- 预报内容 -->
|
||||||
<!-- <div class="weather-scroll-container" @mouseenter="stopWeatherScroll" @mouseleave="startWeatherScroll">
|
<div class="weather-scroll-container" @mouseenter="stopWeatherScroll" @mouseleave="startWeatherScroll">
|
||||||
<div class="weather-scroll-content" :style="{ transform: `translateX(${scrollPosition}px)` }">
|
<div class="weather-scroll-content" :style="{ transform: `translateX(${scrollPosition}px)` }">
|
||||||
<span v-for="(item, index) in weatherData" :key="index" class="weather-item"
|
<span v-for="(item, index) in weatherData" :key="index" class="weather-item"
|
||||||
:style="{ color: getLevelColor(item.level_code) }">
|
:style="{ color: getLevelColor(item.level_code) }">
|
||||||
{{ item.content }}
|
{{ item.content }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -2,16 +2,11 @@
|
|||||||
<div class="dashboard-container">
|
<div class="dashboard-container">
|
||||||
<!-- 顶部标题栏 -->
|
<!-- 顶部标题栏 -->
|
||||||
<div class="header-container">
|
<div class="header-container">
|
||||||
<HeaderSelector
|
<div class="header-left">
|
||||||
back-button-type="none"
|
<div class="back-button" @click="openRegionSelector"> 总部
|
||||||
:show-back-button="false"
|
<span>···</span>
|
||||||
display-text="集团"
|
</div>
|
||||||
:clickable="true"
|
</div>
|
||||||
:show-selector-indicator="true"
|
|
||||||
selector-type="region"
|
|
||||||
:selected-value="selectedRegion"
|
|
||||||
@selector-change="onRegionChange"
|
|
||||||
/>
|
|
||||||
<h1 class="header-title">总部综合监控大屏</h1>
|
<h1 class="header-title">总部综合监控大屏</h1>
|
||||||
<div class="date-wrapper">
|
<div class="date-wrapper">
|
||||||
<span style="margin-top: 6%;font-size: 0.9rem;">{{ currentDate }}</span>
|
<span style="margin-top: 6%;font-size: 0.9rem;">{{ currentDate }}</span>
|
||||||
@@ -24,41 +19,39 @@
|
|||||||
<!-- 主内容区 -->
|
<!-- 主内容区 -->
|
||||||
<div class="content-container">
|
<div class="content-container">
|
||||||
<div class="left-wrapper">
|
<div class="left-wrapper">
|
||||||
<OverviewPanel :loading="isFirstLoading"
|
<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 :loading="isFirstLoading" :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
|
<RiskStatisticsPanel
|
||||||
|
:riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
|
||||||
@tab-change="handleRiskTabChange" :campus_id="query.campus_id"/>
|
@tab-change="handleRiskTabChange" :campus_id="query.campus_id"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-wrapper">
|
<div class="right-wrapper">
|
||||||
<HighRiskAlertPanel :loading="isFirstLoading"
|
<HighRiskAlertPanel
|
||||||
:alertData="dashboardData?.alertData"
|
:alertData="dashboardData?.alertData" :alertDetails="dashboardData?.alertData.details"
|
||||||
:alertDetails="dashboardData?.alertData.details"
|
|
||||||
linkUrl="http://10.0.64.20/security/console/command-center?p=tabl"
|
|
||||||
:sourceIndex="sourceIndex"/>
|
:sourceIndex="sourceIndex"/>
|
||||||
<TimeoutWorkOrderPanel :loading="isFirstLoading"
|
<TimeoutWorkOrderPanel
|
||||||
:timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
|
:timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
|
||||||
:alertDetails="dashboardData?.timeoutWorkOrders.details"
|
:alertDetails="dashboardData?.timeoutWorkOrders.details" :sourceIndex="sourceIndex"/>
|
||||||
linkUrl="http://10.0.64.20/pms/workorder-list"
|
|
||||||
:sourceIndex="sourceIndex"/>
|
|
||||||
</div>
|
</div>
|
||||||
<HiddenDangerPanel :loading="isFirstLoading" :hiddenDangerData="dashboardData?.hiddenDangerData"/>
|
<HiddenDangerPanel :hiddenDangerData="dashboardData?.hiddenDangerData"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 区域选择弹窗 -->
|
||||||
|
<RegionSelector
|
||||||
|
v-model="regionSelectorVisible" :modelSelected="selectedRegion" :regions="regionOption"
|
||||||
|
@change="onRegionChange"/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {getTableList, getTableData, getWorkOrderStatistics} from './report'
|
import {getTableList, getTableData} from './report'
|
||||||
import {ref, reactive, 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'
|
||||||
// 创建 AbortController 用于取消请求
|
|
||||||
const abortController = new AbortController()
|
|
||||||
import HeaderSelector from './components/HeaderSelector.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'
|
||||||
|
|
||||||
@@ -79,13 +72,14 @@ interface RegionItem {
|
|||||||
code: string
|
code: string
|
||||||
}
|
}
|
||||||
|
|
||||||
type TabType = '安全类事项' | '工程类事项'
|
type TabType = '高危作业' | '安全培训考试' | '安全培训考试'
|
||||||
|
|
||||||
// 响应式数据
|
// 响应式数据
|
||||||
const currentDateTime = ref<string>('')
|
const currentDateTime = ref<string>('')
|
||||||
const currentDate = ref<string>('')
|
const currentDate = ref<string>('')
|
||||||
const currentWeek = ref<string>('')
|
const currentWeek = ref<string>('')
|
||||||
const currentTime = ref<string>('')
|
const currentTime = ref<string>('')
|
||||||
|
const regionSelectorVisible = ref<boolean>(false)
|
||||||
const selectedRegion = ref<string>('')
|
const selectedRegion = ref<string>('')
|
||||||
const sourceIndex = ref<number>(1)
|
const sourceIndex = ref<number>(1)
|
||||||
|
|
||||||
@@ -100,15 +94,9 @@ 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>()
|
||||||
|
|
||||||
// 加载状态
|
|
||||||
const isFirstLoading = ref<boolean>(true)
|
|
||||||
|
|
||||||
// 动画相关的状态
|
// 动画相关的状态
|
||||||
const isAnimating = ref<boolean>(false)
|
const isAnimating = ref<boolean>(false)
|
||||||
const animationDuration = 2000 // 动画持续时间(毫秒)
|
const animationDuration = 2000 // 动画持续时间(毫秒)
|
||||||
@@ -209,6 +197,7 @@ const updateAllCounts = (counts: {
|
|||||||
// 路由
|
// 路由
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
|
const regionOption = ref<RegionItem[]>([])
|
||||||
// 定时器ID
|
// 定时器ID
|
||||||
const dashboardTimerId = ref<ReturnType<typeof setInterval> | null>(null)
|
const dashboardTimerId = ref<ReturnType<typeof setInterval> | null>(null)
|
||||||
const timeUpdateTimerId = ref<ReturnType<typeof setInterval> | null>(null)
|
const timeUpdateTimerId = ref<ReturnType<typeof setInterval> | null>(null)
|
||||||
@@ -224,69 +213,51 @@ const query = reactive({
|
|||||||
campus_id: "",
|
campus_id: "",
|
||||||
})
|
})
|
||||||
|
|
||||||
// 缓存工具函数 - 三个页面共享的缓存
|
|
||||||
const CACHE_KEY = 'shared_regionOption_cache'
|
|
||||||
const CACHE_DURATION = 5 * 60 * 1000 // 5分钟
|
|
||||||
|
|
||||||
interface CacheData {
|
|
||||||
records: any[] // 原始接口返回的数据
|
|
||||||
timestamp: number
|
|
||||||
}
|
|
||||||
|
|
||||||
const getCachedRegionOption = (): any[] | null => {
|
|
||||||
try {
|
|
||||||
const cached = sessionStorage.getItem(CACHE_KEY)
|
|
||||||
if (cached) {
|
|
||||||
const cacheData: CacheData = JSON.parse(cached)
|
|
||||||
// 检查缓存是否在有效期内
|
|
||||||
return cacheData.records
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('读取缓存失败:', error)
|
|
||||||
sessionStorage.removeItem(CACHE_KEY)
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
const setCachedRegionOption = (records: any[]) => {
|
|
||||||
try {
|
|
||||||
const cacheData: CacheData = {
|
|
||||||
records,
|
|
||||||
timestamp: Date.now()
|
|
||||||
}
|
|
||||||
sessionStorage.setItem(CACHE_KEY, JSON.stringify(cacheData))
|
|
||||||
console.log('regionOption 数据已缓存')
|
|
||||||
} catch (error) {
|
|
||||||
console.error('保存缓存失败:', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 生命周期
|
// 生命周期
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
updateTime()
|
updateTime()
|
||||||
timeUpdateTimerId.value = setInterval(updateTime, 1000)
|
timeUpdateTimerId.value = setInterval(updateTime, 1000)
|
||||||
|
//
|
||||||
// 先检查缓存
|
|
||||||
const cachedRecords = getCachedRegionOption()
|
|
||||||
let records = cachedRecords
|
|
||||||
|
|
||||||
if (!records || records.length === 0) {
|
|
||||||
// 缓存不存在或已过期,调用接口
|
|
||||||
try {
|
try {
|
||||||
let result = await getTableList('park_info_list', {}, false, { signal: abortController.signal })
|
let {records} = await getTableList(
|
||||||
records = result.records || []
|
'park_info_list'
|
||||||
|
)
|
||||||
|
// records = [
|
||||||
|
// {
|
||||||
|
// "region_id": "130601",
|
||||||
|
// "park_code": "1825468527486140416",
|
||||||
|
// "region": "北京",
|
||||||
|
// "park_name": "雄安新区总部"
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// "region_id": "130601",
|
||||||
|
// "park_code": "1825468527486140417",
|
||||||
|
// "region": "北京",
|
||||||
|
// "park_name": "雄安地面站"
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// "region_id": "130603",
|
||||||
|
// "park_code": "1825468527486140426",
|
||||||
|
// "region": "武汉",
|
||||||
|
// "park_name": "花山新区总部"
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
if (records && records.length > 0) {
|
if (records && records.length > 0) {
|
||||||
// 保存到缓存
|
// 去重region字段,使用Map来确保唯一性
|
||||||
setCachedRegionOption(records)
|
const regionMap = new Map()
|
||||||
}
|
records.forEach(el => {
|
||||||
} catch (error) {
|
if (!regionMap.has(el.region)) {
|
||||||
console.error('初始化园区数据失败:', error)
|
regionMap.set(el.region, {
|
||||||
records = []
|
name: el.region,
|
||||||
}
|
code: el.region_id // 使用region_code作为code
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
// 转换为数组
|
||||||
|
regionOption.value = Array.from(regionMap.values())
|
||||||
|
|
||||||
|
console.log('regionOption.value>>>>', regionOption.value);
|
||||||
|
|
||||||
if (records && records.length > 0) {
|
|
||||||
// 将园区信息去重
|
// 将园区信息去重
|
||||||
const parkMap = new Map();
|
const parkMap = new Map();
|
||||||
records.forEach(el => {
|
records.forEach(el => {
|
||||||
@@ -299,21 +270,15 @@ onMounted(async () => {
|
|||||||
})
|
})
|
||||||
// 将parkMap转换为数组
|
// 将parkMap转换为数组
|
||||||
query.campus_id = Array.from(parkMap.values()).map(e1 => e1.code).join();
|
query.campus_id = Array.from(parkMap.values()).map(e1 => e1.code).join();
|
||||||
}
|
|
||||||
// 初始化数据,loadDashboardData()既然是包含初始化的逻辑,所以并不适合定时调用,不然每次都要初始化。
|
|
||||||
await loadDashboardData()
|
|
||||||
|
|
||||||
// 将初始化的逻辑放在这里(在loadDashboardData之后,确保dashboardData.value已初始化)
|
|
||||||
if (dashboardData.value && dashboardData.value.hiddenDangerData) {
|
|
||||||
dashboardData.value.hiddenDangerData.general = dashboardData.value.hiddenDangerData.general || 0
|
|
||||||
dashboardData.value.hiddenDangerData.major = dashboardData.value.hiddenDangerData.major || 0
|
|
||||||
if (dashboardData.value.hiddenDangerData.progress) {
|
|
||||||
dashboardData.value.hiddenDangerData.progress.overdue = dashboardData.value.hiddenDangerData.progress.overdue || 0
|
|
||||||
dashboardData.value.hiddenDangerData.progress.processed = dashboardData.value.hiddenDangerData.progress.processed || 0
|
|
||||||
dashboardData.value.hiddenDangerData.progress.processing = dashboardData.value.hiddenDangerData.progress.processing || 0
|
|
||||||
}
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('初始化园区数据失败:', error)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 初始化数据
|
||||||
|
await loadDashboardData()
|
||||||
|
|
||||||
// 启动定时器
|
// 启动定时器
|
||||||
timeOut1()
|
timeOut1()
|
||||||
|
|
||||||
@@ -323,11 +288,8 @@ onMounted(async () => {
|
|||||||
}, 2 * 60 * 1000) // 每2分钟更新一次
|
}, 2 * 60 * 1000) // 每2分钟更新一次
|
||||||
})
|
})
|
||||||
|
|
||||||
// 组件卸载时清理定时器并取消所有请求
|
// 组件卸载时清理定时器
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
// 取消所有正在进行的请求
|
|
||||||
abortController.abort()
|
|
||||||
|
|
||||||
if (dashboardTimerId.value) {
|
if (dashboardTimerId.value) {
|
||||||
clearInterval(dashboardTimerId.value)
|
clearInterval(dashboardTimerId.value)
|
||||||
dashboardTimerId.value = null
|
dashboardTimerId.value = null
|
||||||
@@ -344,11 +306,6 @@ onUnmounted(() => {
|
|||||||
let isFirstLoad = ref<boolean>(true)
|
let isFirstLoad = ref<boolean>(true)
|
||||||
// 数据初始化方法
|
// 数据初始化方法
|
||||||
const loadDashboardData = async (): Promise<void> => {
|
const loadDashboardData = async (): Promise<void> => {
|
||||||
// 第一次加载时显示骨架屏
|
|
||||||
if (isFirstLoading.value) {
|
|
||||||
console.log('第一次加载,显示骨架屏');
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await getDashboardData()
|
const data = await getDashboardData()
|
||||||
if (isFirstLoad.value) {
|
if (isFirstLoad.value) {
|
||||||
console.log('第一次加载');
|
console.log('第一次加载');
|
||||||
@@ -357,12 +314,9 @@ const loadDashboardData = async (): Promise<void> => {
|
|||||||
}
|
}
|
||||||
console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
|
console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
|
||||||
|
|
||||||
// 收集所有异步请求
|
try {
|
||||||
const promises = []
|
|
||||||
|
|
||||||
// 获取总体概览数据
|
// 获取总体概览数据
|
||||||
promises.push(
|
getTableList('generalTotal', query).then(generalTotal => {
|
||||||
getTableList('generalTotal', query, false, { signal: abortController.signal }).then(generalTotal => {
|
|
||||||
if (generalTotal.records && generalTotal.records.length > 0) {
|
if (generalTotal.records && generalTotal.records.length > 0) {
|
||||||
dashboardData.value.totalCount = Number(generalTotal.records[0].totalCount)
|
dashboardData.value.totalCount = Number(generalTotal.records[0].totalCount)
|
||||||
dashboardData.value.formalEmployeeCount = Number(generalTotal.records[0].formalEmployeeCount)
|
dashboardData.value.formalEmployeeCount = Number(generalTotal.records[0].formalEmployeeCount)
|
||||||
@@ -375,14 +329,14 @@ const loadDashboardData = async (): Promise<void> => {
|
|||||||
external: Number(dashboardData.value.externalStaffCount),
|
external: Number(dashboardData.value.externalStaffCount),
|
||||||
visitor: Number(dashboardData.value.visitorCount)
|
visitor: Number(dashboardData.value.visitorCount)
|
||||||
})
|
})
|
||||||
}).catch(error => {
|
|
||||||
console.error('获取总体概览数据失败:', error)
|
|
||||||
})
|
})
|
||||||
)
|
} catch (error) {
|
||||||
|
console.error('获取总体概览数据失败:', error)
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
// 获取各园区统计数据
|
// 获取各园区统计数据
|
||||||
promises.push(
|
getTableList('parkscreen_user_info', query).then(parkscreen_user_info => {
|
||||||
getTableList('parkscreen_user_info', query, false, { signal: abortController.signal }).then(parkscreen_user_info => {
|
|
||||||
if (parkscreen_user_info.records && parkscreen_user_info.records.length > 0) {
|
if (parkscreen_user_info.records && parkscreen_user_info.records.length > 0) {
|
||||||
dashboardData.value.parkStatistics = parkscreen_user_info.records.map(el => {
|
dashboardData.value.parkStatistics = parkscreen_user_info.records.map(el => {
|
||||||
return {
|
return {
|
||||||
@@ -393,14 +347,14 @@ const loadDashboardData = async (): Promise<void> => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}).catch(error => {
|
|
||||||
console.error('获取各园区统计数据失败:', error)
|
|
||||||
})
|
})
|
||||||
)
|
} catch (error) {
|
||||||
|
console.error('获取各园区统计数据失败:', error)
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
// 获取风险预警数据
|
// 获取风险预警数据
|
||||||
promises.push(
|
getTableList('risk_alert_data', query).then(risk_alert_data => {
|
||||||
getTableList('risk_alert_data', query, false, { signal: abortController.signal }).then(risk_alert_data => {
|
|
||||||
if (risk_alert_data.records && risk_alert_data.records.length > 0) {
|
if (risk_alert_data.records && risk_alert_data.records.length > 0) {
|
||||||
dashboardData.value.alertData.total = risk_alert_data.records[0].total
|
dashboardData.value.alertData.total = risk_alert_data.records[0].total
|
||||||
dashboardData.value.alertData.processed = risk_alert_data.records[0].processed
|
dashboardData.value.alertData.processed = risk_alert_data.records[0].processed
|
||||||
@@ -410,213 +364,286 @@ const loadDashboardData = async (): Promise<void> => {
|
|||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
console.error('获取风险预警数据失败:', error)
|
console.error('获取风险预警数据失败:', error)
|
||||||
})
|
})
|
||||||
)
|
} catch (error) {
|
||||||
|
console.error('获取风险预警数据失败:', error)
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
// 获取风险预警详情数据
|
// 获取风险预警详情数据
|
||||||
promises.push(
|
getTableList('risk_alert_detail', query).then(risk_alert_detail => {
|
||||||
getTableList('risk_alert_detail', query, false, { signal: abortController.signal }).then(risk_alert_detail => {
|
|
||||||
if (risk_alert_detail.records && risk_alert_detail.records.length > 0) {
|
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)
|
||||||
})
|
})
|
||||||
)
|
} catch (error) {
|
||||||
|
console.error('获取风险预警详情数据失败:', error)
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
// 获取超期工单数据
|
// 获取超期工单数据
|
||||||
promises.push(
|
getTableList('timeout_work_order', query).then(timeout_work_order => {
|
||||||
getTableList('timeout_work_order', query, false, { signal: abortController.signal }).then(timeout_work_order => {
|
if (timeout_work_order.records && timeout_work_order.records.length > 0) {
|
||||||
if (timeout_work_order.records && timeout_work_order.records.length >= 0) {
|
|
||||||
dashboardData.value.timeoutWorkOrders.total = timeout_work_order.records.length
|
dashboardData.value.timeoutWorkOrders.total = timeout_work_order.records.length
|
||||||
dashboardData.value.timeoutWorkOrders.details = timeout_work_order.records
|
dashboardData.value.timeoutWorkOrders.details = timeout_work_order.records
|
||||||
}
|
}
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
console.error('获取超期工单数据失败:', error)
|
console.error('获取超期工单数据失败:', error)
|
||||||
})
|
})
|
||||||
)
|
|
||||||
|
|
||||||
// 处理风险统计和隐患数据(这些是异步的)
|
|
||||||
promises.push(
|
|
||||||
Promise.all([
|
|
||||||
handleRiskTabChange('安全类事项'),
|
|
||||||
handleHiddenDangerPannelData(query)
|
|
||||||
]).catch(error => {
|
|
||||||
console.error('处理风险统计和隐患数据失败:', error)
|
|
||||||
})
|
|
||||||
)
|
|
||||||
|
|
||||||
// 等待所有异步操作完成
|
|
||||||
try {
|
|
||||||
await Promise.all(promises)
|
|
||||||
console.log('所有数据加载完成')
|
|
||||||
|
|
||||||
// 第一次加载完成后,隐藏骨架屏
|
|
||||||
if (isFirstLoading.value) {
|
|
||||||
isFirstLoading.value = false
|
|
||||||
console.log('隐藏骨架屏')
|
|
||||||
}
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('数据加载过程中出现错误:', error)
|
console.error('获取超期工单数据失败:', error)
|
||||||
// 即使出错也要隐藏骨架屏,避免界面一直处于加载状态
|
|
||||||
if (isFirstLoading.value) {
|
|
||||||
isFirstLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
handleRiskTabChange('高危作业')
|
||||||
|
handleHiddenDangerPannelData(query)
|
||||||
|
console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleHiddenDangerPannelData = async (query) => {
|
const handleHiddenDangerPannelData = (query) => {
|
||||||
const promises = []
|
let _data = {
|
||||||
|
flag: false,
|
||||||
// 获取隐患排查治理数据 - 系统数据
|
general: 0,
|
||||||
promises.push(
|
major: 0,
|
||||||
getTableList('risk_level_count', query, false, { signal: abortController.signal }).then(res => {
|
overdue: 0,
|
||||||
if (res.records && res.records.length > 0) {
|
processed: 0,
|
||||||
dashboardData.value.hiddenDangerData.general = Number(res.records[0].general_count)
|
processing: 0,
|
||||||
dashboardData.value.hiddenDangerData.major = Number(res.records[0].major_count)
|
pending: 0
|
||||||
}
|
}
|
||||||
return getTableList('risk_status_count', query, false, { signal: abortController.signal })
|
|
||||||
}).then(res => {
|
let _data2 = {
|
||||||
|
flag: false,
|
||||||
|
general: 0,
|
||||||
|
major: 0,
|
||||||
|
overdue: 0,
|
||||||
|
processed: 0,
|
||||||
|
processing: 0,
|
||||||
|
pending: 0
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
dashboardData.value.hiddenDangerData.general = 0
|
||||||
|
dashboardData.value.hiddenDangerData.major = 0
|
||||||
|
dashboardData.value.hiddenDangerData.progress.overdue = 0
|
||||||
|
dashboardData.value.hiddenDangerData.progress.processed = 0
|
||||||
|
dashboardData.value.hiddenDangerData.progress.processing = 0
|
||||||
|
// 获取隐患排查治理数据
|
||||||
|
getTableList('risk_level_count', query).then(res => {
|
||||||
if (res.records && res.records.length > 0) {
|
if (res.records && res.records.length > 0) {
|
||||||
const record = res.records[0]
|
_data.general = _data.general + Number(res.records[0].general_count)
|
||||||
|
_data.major = _data.major + Number(res.records[0].major_count)
|
||||||
|
// 获取隐患排查治理数据
|
||||||
|
getTableList('risk_status_count', query).then(res => {
|
||||||
|
if (res.records && res.records.length > 0) {
|
||||||
|
_data.overdue = _data.overdue + Number(res.records[0].overdueCnt)
|
||||||
|
_data.processed = _data.processed + Number(res.records[0].processedCnt)
|
||||||
|
_data.processing = _data.processing + Number(res.records[0].processingCnt)
|
||||||
|
_data.pending = _data.pending
|
||||||
|
_data.flag = true
|
||||||
|
|
||||||
|
if (_data2.flag) {
|
||||||
|
// 合并数据
|
||||||
|
console.log("请求系统和第三方成功,合并数据", _data, _data2);
|
||||||
|
let generalCnt = _data.general + _data2.general
|
||||||
|
let majorCnt = _data.major + _data2.major
|
||||||
|
dashboardData.value.hiddenDangerData.general = generalCnt
|
||||||
|
dashboardData.value.hiddenDangerData.major = majorCnt
|
||||||
|
|
||||||
|
let totalCnt = generalCnt + majorCnt
|
||||||
|
let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2)
|
||||||
|
let processedCnt = ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2)
|
||||||
|
let processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2)
|
||||||
|
let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2)
|
||||||
dashboardData.value.hiddenDangerData.progress = {
|
dashboardData.value.hiddenDangerData.progress = {
|
||||||
overdue: Number(record.overdueCnt).toFixed(2),
|
overdue: overdueCnt,
|
||||||
processed: Number(record.processedCnt).toFixed(2),
|
processed: processedCnt,
|
||||||
processing: Number(record.processingCnt).toFixed(2),
|
processing: processingCnt,
|
||||||
pending: '0.00'
|
pending: pendingCnt,
|
||||||
}
|
}
|
||||||
}
|
} else {
|
||||||
}).catch(error => {
|
console.log("请求系统成功,展示数据", _data, _data2);
|
||||||
console.error('获取系统隐患数据失败:', error)
|
dashboardData.value.hiddenDangerData.general = _data.general
|
||||||
})
|
dashboardData.value.hiddenDangerData.major = _data.major
|
||||||
)
|
|
||||||
|
|
||||||
// 获取第三方隐患排查治理数据
|
let totalCnt = _data.general + _data.major
|
||||||
promises.push(
|
// 显示系统数据
|
||||||
getTableList('hidden_danger_investigation', query, false, { signal: abortController.signal }).then(res => {
|
dashboardData.value.hiddenDangerData.progress = {
|
||||||
if (res.records && res.records.length > 0) {
|
overdue: (_data.overdue / totalCnt * 100).toFixed(2),
|
||||||
// 获取安全指数
|
processed: (_data.processed / totalCnt * 100).toFixed(2),
|
||||||
return getTableList('hidden_danger_safety_index', query, false, { signal: abortController.signal })
|
processing: (_data.processing / totalCnt * 100).toFixed(2),
|
||||||
|
pending: (_data.pending / totalCnt * 100).toFixed(2),
|
||||||
}
|
}
|
||||||
}).then(res => {
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
// 获取隐患排查治理数据
|
||||||
|
getTableList('hidden_danger_investigation', query).then(res => {
|
||||||
if (res.records && res.records.length > 0) {
|
if (res.records && res.records.length > 0) {
|
||||||
|
_data2.general = Number(res.records[0].general)
|
||||||
|
_data2.major = Number(res.records[0].major)
|
||||||
|
|
||||||
dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
|
dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
|
||||||
|
|
||||||
|
// 获取隐患排查治理处理进度数据
|
||||||
|
getTableList('hidden_danger_process_progress', query).then(res => {
|
||||||
|
if (res.records && res.records.length > 0) {
|
||||||
|
_data2.flag = true
|
||||||
|
_data2.overdue = Number(res.records[0].overdue) / 100 * (_data2.general + _data2.major)
|
||||||
|
_data2.processed = Number(res.records[0].processed) / 100 * (_data2.general + _data2.major)
|
||||||
|
_data2.processing = Number(res.records[0].processing) / 100 * (_data2.general + _data2.major)
|
||||||
|
_data2.pending = Number(res.records[0].pending) / 100 * (_data2.general + _data2.major)
|
||||||
|
|
||||||
|
if (_data.flag) {
|
||||||
|
console.log("请求第三方和系统成功,合并数据", _data, _data2);
|
||||||
|
// 合并数据
|
||||||
|
let generalCnt = _data.general + _data2.general
|
||||||
|
let majorCnt = _data.major + _data2.major
|
||||||
|
dashboardData.value.hiddenDangerData.general = generalCnt
|
||||||
|
dashboardData.value.hiddenDangerData.major = majorCnt
|
||||||
|
|
||||||
|
let totalCnt = generalCnt + majorCnt
|
||||||
|
let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2)
|
||||||
|
let processedCnt = ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2)
|
||||||
|
let processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2)
|
||||||
|
let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2)
|
||||||
|
dashboardData.value.hiddenDangerData.progress = {
|
||||||
|
overdue: overdueCnt,
|
||||||
|
processed: processedCnt,
|
||||||
|
processing: processingCnt,
|
||||||
|
pending: pendingCnt,
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
//显示三方数据
|
||||||
|
console.log("请求第三方成功,展示数据", _data, _data2);
|
||||||
|
dashboardData.value.hiddenDangerData.general = _data2.general
|
||||||
|
dashboardData.value.hiddenDangerData.major = _data2.major
|
||||||
|
|
||||||
|
dashboardData.value.hiddenDangerData.progress = {
|
||||||
|
overdue: res.records[0].overdue,
|
||||||
|
processed: res.records[0].processed,
|
||||||
|
processing: res.records[0].processing,
|
||||||
|
pending: res.records[0].pending,
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
console.error('获取第三方隐患数据失败:', error)
|
console.error('获取隐患排查治理处理进度数据失败:', error)
|
||||||
})
|
})
|
||||||
)
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
console.error('获取隐患排查治理数据失败:', error)
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取隐患排查治理数据失败:', error)
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
// 获取隐患排查治理TOP3类型数据
|
// 获取隐患排查治理TOP3类型数据
|
||||||
promises.push(
|
getTableList('hidden_danger_top', query).then(hidden_danger_top => {
|
||||||
getTableList('hidden_danger_top', query, false, { signal: abortController.signal }).then(hidden_danger_top => {
|
|
||||||
if (hidden_danger_top.records && hidden_danger_top.records.length > 0) {
|
if (hidden_danger_top.records && hidden_danger_top.records.length > 0) {
|
||||||
dashboardData.value.hiddenDangerData.top3Types = hidden_danger_top.records
|
dashboardData.value.hiddenDangerData.top3Types = hidden_danger_top.records
|
||||||
}
|
}
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
console.error('获取隐患排查治理TOP3类型数据失败:', error)
|
console.error('获取隐患排查治理TOP3类型数据失败:', error)
|
||||||
})
|
})
|
||||||
)
|
} catch (error) {
|
||||||
|
console.error('获取隐患排查治理TOP3类型数据失败:', error)
|
||||||
return Promise.all(promises)
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理风险统计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 normalizedTab: TabType = '安全类事项'
|
|
||||||
if (tab === '安全类事项' || tab === '安全类事项') {
|
|
||||||
normalizedTab = '安全类事项'
|
|
||||||
} else if (tab === '工程类事项' || tab === '工程类事项') {
|
|
||||||
normalizedTab = '工程类事项'
|
|
||||||
}
|
|
||||||
|
|
||||||
let workOrderType = ''
|
|
||||||
switch (tab) {
|
switch (tab) {
|
||||||
case '安全类事项':
|
case '高危作业':
|
||||||
workOrderType = '物业服务-安全'
|
code = 'hazardous_operations'
|
||||||
break
|
break
|
||||||
case '工程类事项':
|
case '安全培训考试':
|
||||||
workOrderType = '物业服务-工程'
|
code = 'safety_assessment'
|
||||||
|
break
|
||||||
|
case '安全培训考试':
|
||||||
|
code = 'security_training'
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
workOrderType = '物业服务-安全'
|
code = 'hazardous_operations'
|
||||||
}
|
}
|
||||||
|
|
||||||
// 同时获取维保任务和巡检任务的数据
|
if (code == 'hazardous_operations') {
|
||||||
const [maintenanceResponse, inspectionResponse] = await Promise.all([
|
// 根据不同的tab请求不同的接口
|
||||||
getWorkOrderStatistics({
|
getTableList(
|
||||||
workOrderType,
|
code,
|
||||||
taskType: '维保任务',
|
{...query, activeTab: tab}
|
||||||
campus_id: query.campus_id
|
).then(response => {
|
||||||
}, { signal: abortController.signal }).catch(error => {
|
// 更新风险统计数据 - 传递完整的数组数据用于饼图显示
|
||||||
console.error('获取维保任务数据失败:', error)
|
if (response.records && response.records.length > 0) {
|
||||||
return {records: []}
|
dangerDetail.value = response.records
|
||||||
}),
|
|
||||||
getWorkOrderStatistics({
|
|
||||||
workOrderType,
|
|
||||||
taskType: '巡检任务',
|
|
||||||
campus_id: query.campus_id
|
|
||||||
}, { signal: abortController.signal }).catch(error => {
|
|
||||||
console.error('获取巡检任务数据失败:', error)
|
|
||||||
return {records: []}
|
|
||||||
})
|
|
||||||
])
|
|
||||||
|
|
||||||
// 周期映射
|
|
||||||
const cycleMap: Record<string, string> = {
|
|
||||||
'day': '每日',
|
|
||||||
'month': '每月',
|
|
||||||
'year': '每年'
|
|
||||||
}
|
}
|
||||||
|
}).catch(error => {
|
||||||
// 将API数据转换为图表数据格式
|
console.error('获取风险统计数据失败:', error)
|
||||||
const convertToChartData = (records: any[], taskTypeName: string): any[] => {
|
if (isFirstLoad.value) {
|
||||||
const charts: any[] = []
|
// dangerDetail.value = [
|
||||||
|
// {
|
||||||
// 按周期分组
|
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
|
||||||
const cycleGroups: Record<string, any> = {}
|
// alarm_level_code: 'general',
|
||||||
records.forEach((record: any) => {
|
// alarm_status: '已关闭',
|
||||||
const cycle = record.cycle || 'day'
|
// alarm_biz_id: '20250827164305283937'
|
||||||
if (!cycleGroups[cycle]) {
|
// },
|
||||||
cycleGroups[cycle] = record
|
// {
|
||||||
|
// 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 {
|
||||||
// 创建6个图表(3个周期 x 2个任务类型,但这里只处理一种任务类型)
|
// 根据不同的tab请求不同的接口
|
||||||
const cycles = ['day', 'month', 'year']
|
getTableList(
|
||||||
cycles.forEach((cycle) => {
|
code,
|
||||||
const data = cycleGroups[cycle] || {}
|
{...query, activeTab: tab}
|
||||||
const title = `${cycleMap[cycle]}检查(${taskTypeName})`
|
).then(response => {
|
||||||
|
// 更新风险统计数据 - 传递完整的数组数据用于饼图显示
|
||||||
charts.push({
|
if (response.records && response.records.length > 0) {
|
||||||
title,
|
riskStatistics.value = response.records
|
||||||
total: Number(data.total) || 0,
|
} else {
|
||||||
rate: Number(data.rate) || 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 => {
|
||||||
return charts
|
console.error('获取风险统计数据失败:', error)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 转换维保和巡检数据
|
|
||||||
const maintenanceCharts = convertToChartData(maintenanceResponse.records || [], '维保类')
|
|
||||||
const inspectionCharts = convertToChartData(inspectionResponse.records || [], '巡检类')
|
|
||||||
|
|
||||||
// 合并为6个图表:先维保(3个),后巡检(3个)
|
|
||||||
const allCharts = [...maintenanceCharts, ...inspectionCharts]
|
|
||||||
|
|
||||||
// 更新riskStatistics(使用标准化后的tab)
|
|
||||||
riskStatistics.value[normalizedTab] = allCharts
|
|
||||||
|
|
||||||
console.log('更新后的riskStatistics:', riskStatistics.value)
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('获取风险统计数据失败:', error)
|
console.error('获取风险统计数据失败:', error)
|
||||||
}
|
}
|
||||||
@@ -631,6 +658,11 @@ const onRegionChange = (item: RegionItem): void => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 打开区域选择器
|
||||||
|
const openRegionSelector = (): void => {
|
||||||
|
regionSelectorVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
// 更新时间
|
// 更新时间
|
||||||
const updateTime = (): void => {
|
const updateTime = (): void => {
|
||||||
const now = new Date()
|
const now = new Date()
|
||||||
@@ -1313,7 +1345,7 @@ const timeOut1 = (): void => {
|
|||||||
|
|
||||||
@keyframes typeFlashEffect {
|
@keyframes typeFlashEffect {
|
||||||
0% {
|
0% {
|
||||||
background-color: #158e56;
|
background-color: #1afb8f;
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
@@ -1321,7 +1353,7 @@ const timeOut1 = (): void => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
background-color: #158e56;
|
background-color: #1afb8f;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1339,14 +1371,14 @@ const timeOut1 = (): void => {
|
|||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: #158e56;
|
background-color: #1afb8f;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
animation: typeNumberPulse 1.5s ease-in-out infinite;
|
animation: typeNumberPulse 1.5s ease-in-out infinite;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.type-number:hover {
|
.type-number:hover {
|
||||||
background-color: #158e56;
|
background-color: #16d47a;
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -33,10 +33,9 @@
|
|||||||
|
|
||||||
<div class="center-container">
|
<div class="center-container">
|
||||||
<div class="center-content">
|
<div class="center-content">
|
||||||
<!-- 隐患排查治理 -->
|
<span class="title">隐患排查治理</span>
|
||||||
<span class="title"></span>
|
|
||||||
<img class="bottom-border-line" src="@/assets/images/title_border_line_1.png" />
|
<img class="bottom-border-line" src="@/assets/images/title_border_line_1.png" />
|
||||||
<span class="sub-title">隐患等级</span>
|
<span class="sub-title">分类风险</span>
|
||||||
<img width="50%" src="@/assets/images/line_1.png" />
|
<img width="50%" src="@/assets/images/line_1.png" />
|
||||||
<div class="type-wrapper">
|
<div class="type-wrapper">
|
||||||
<div class="type-item">
|
<div class="type-item">
|
||||||
|
|||||||
@@ -60,8 +60,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="bottom-card">
|
<div class="bottom-card">
|
||||||
<div class="bottom-card-title">
|
<div class="bottom-card-title">
|
||||||
<!--隐患排查治理-->
|
<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 class="type-wrapper">
|
<div class="type-wrapper">
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -2,18 +2,12 @@
|
|||||||
<div class="dashboard-container">
|
<div class="dashboard-container">
|
||||||
<!-- 顶部标题栏 -->
|
<!-- 顶部标题栏 -->
|
||||||
<div class="header-container">
|
<div class="header-container">
|
||||||
<HeaderSelector
|
<div class="header-left">
|
||||||
back-button-type="image"
|
<img class="back-img" @click="returnToHeadquarters" src="@/assets/images/screen/back_image.png" />
|
||||||
:show-back-button="true"
|
<div class="back-button" @click="openRegionSelector"> {{ selectedRegion }}
|
||||||
:on-back="returnToHeadquarters"
|
<span>···</span>
|
||||||
:display-text="selectedRegion"
|
</div>
|
||||||
:clickable="true"
|
</div>
|
||||||
:show-selector-indicator="true"
|
|
||||||
selector-type="park"
|
|
||||||
:selected-value="selectedPark"
|
|
||||||
:region-code="query.regionCode"
|
|
||||||
@selector-change="onRegionChange"
|
|
||||||
/>
|
|
||||||
<h1 class="header-title">{{ selectedRegion }}综合监控大屏</h1>
|
<h1 class="header-title">{{ selectedRegion }}综合监控大屏</h1>
|
||||||
<div class="date-wrapper">
|
<div class="date-wrapper">
|
||||||
<span style="margin-top: 6%;font-size: 0.9rem;">{{ currentDate }}</span>
|
<span style="margin-top: 6%;font-size: 0.9rem;">{{ currentDate }}</span>
|
||||||
@@ -26,42 +20,33 @@
|
|||||||
<!-- 主内容区 -->
|
<!-- 主内容区 -->
|
||||||
<div class="content-container">
|
<div class="content-container">
|
||||||
<div class="left-wrapper">
|
<div class="left-wrapper">
|
||||||
<OverviewPanel :loading="isFirstLoading"
|
<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 :loading="isFirstLoading" :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
|
<RiskStatisticsPanel :riskStatistics="riskStatistics" :dangerDetail="dangerDetail" :park="parkValue"
|
||||||
:park="parkValue"
|
|
||||||
@tab-change="handleRiskTabChange" :campus_id="query.campus_id" />
|
@tab-change="handleRiskTabChange" :campus_id="query.campus_id" />
|
||||||
</div>
|
</div>
|
||||||
<div class="right-wrapper">
|
<div class="right-wrapper">
|
||||||
<HighRiskAlertPanel :loading="isFirstLoading"
|
<HighRiskAlertPanel :alertData="dashboardData?.alertData" :alertDetails="dashboardData?.alertData.details"
|
||||||
:alertData="dashboardData?.alertData"
|
|
||||||
:alertDetails="dashboardData?.alertData.details"
|
|
||||||
linkUrl="http://10.0.64.20/security/console/command-center?p=tabl"
|
|
||||||
:sourceIndex="sourceIndex"/>
|
|
||||||
<TimeoutWorkOrderPanel :loading="isFirstLoading"
|
|
||||||
:timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
|
|
||||||
:alertDetails="dashboardData?.timeoutWorkOrders.details"
|
|
||||||
linkUrl="http://10.0.64.20/pms/workorder-list"
|
|
||||||
:sourceIndex="sourceIndex" />
|
:sourceIndex="sourceIndex" />
|
||||||
|
<TimeoutWorkOrderPanel :timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
|
||||||
|
:alertDetails="dashboardData?.timeoutWorkOrders.details" :sourceIndex="sourceIndex" />
|
||||||
</div>
|
</div>
|
||||||
<HiddenDangerPanel :loading="isFirstLoading" :hiddenDangerData="dashboardData?.hiddenDangerData"/>
|
<HiddenDangerPanel :hiddenDangerData="dashboardData?.hiddenDangerData" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 区域选择弹窗 -->
|
||||||
|
<RegionSelector v-model="regionSelectorVisible" :modelSelected="selectedPark" :regions="regionOption"
|
||||||
|
@change="onRegionChange" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {getTableList, getTableData, getWorkOrderStatistics} from './report'
|
import { getTableList, getTableData } 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'
|
||||||
// 创建 AbortController 用于取消请求
|
|
||||||
const abortController = new AbortController()
|
|
||||||
import HeaderSelector from './components/HeaderSelector.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'
|
||||||
|
|
||||||
@@ -82,13 +67,14 @@ interface RegionItem {
|
|||||||
code: string
|
code: string
|
||||||
}
|
}
|
||||||
|
|
||||||
type TabType = '安全类事项' | '工程类事项'
|
type TabType = '危险作业' | '安全考核' | '安全、保密培训'
|
||||||
|
|
||||||
// 响应式数据
|
// 响应式数据
|
||||||
const currentDateTime = ref<string>('')
|
const currentDateTime = ref<string>('')
|
||||||
const currentDate = ref<string>('')
|
const currentDate = ref<string>('')
|
||||||
const currentWeek = ref<string>('')
|
const currentWeek = ref<string>('')
|
||||||
const currentTime = ref<string>('')
|
const currentTime = ref<string>('')
|
||||||
|
const regionSelectorVisible = ref<boolean>(false)
|
||||||
const selectedRegion = ref<string>('')
|
const selectedRegion = ref<string>('')
|
||||||
const sourceIndex = ref<number>(1)
|
const sourceIndex = ref<number>(1)
|
||||||
|
|
||||||
@@ -103,18 +89,12 @@ const visitorCount = ref<number>(0)
|
|||||||
// 总体概览-各园区统计
|
// 总体概览-各园区统计
|
||||||
const parkStatistics = ref<any>()
|
const parkStatistics = ref<any>()
|
||||||
// 危险作业/安全考核/安全、保密培训
|
// 危险作业/安全考核/安全、保密培训
|
||||||
const riskStatistics = ref<Record<TabType, any[]>>({
|
const riskStatistics = ref<any>()
|
||||||
安全类事项: [],
|
|
||||||
工程类事项: []
|
|
||||||
})
|
|
||||||
const dangerDetail = ref<any>()
|
const dangerDetail = ref<any>()
|
||||||
// 动画相关的状态
|
// 动画相关的状态
|
||||||
const isAnimating = ref<boolean>(false)
|
const isAnimating = ref<boolean>(false)
|
||||||
const animationDuration = 2000 // 动画持续时间(毫秒)
|
const animationDuration = 2000 // 动画持续时间(毫秒)
|
||||||
|
|
||||||
// 首次加载状态
|
|
||||||
const isFirstLoading = ref<boolean>(true)
|
|
||||||
|
|
||||||
// 数字变化时的闪烁效果
|
// 数字变化时的闪烁效果
|
||||||
const flashNumbers = () => {
|
const flashNumbers = () => {
|
||||||
const numberElements = document.querySelectorAll('.total-number, .type-number')
|
const numberElements = document.querySelectorAll('.total-number, .type-number')
|
||||||
@@ -211,6 +191,7 @@ const updateAllCounts = (counts: {
|
|||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
||||||
|
const regionOption = ref<RegionItem[]>([])
|
||||||
const selectedPark = ref<string>('')
|
const selectedPark = ref<string>('')
|
||||||
const parkValue = ref<string>('')
|
const parkValue = ref<string>('')
|
||||||
// 定时器ID
|
// 定时器ID
|
||||||
@@ -231,43 +212,6 @@ const query = reactive({
|
|||||||
regionCode: ""
|
regionCode: ""
|
||||||
})
|
})
|
||||||
|
|
||||||
// 缓存工具函数 - 三个页面共享的缓存
|
|
||||||
const CACHE_KEY = 'shared_regionOption_cache'
|
|
||||||
const CACHE_DURATION = 5 * 60 * 1000 // 5分钟
|
|
||||||
|
|
||||||
interface CacheData {
|
|
||||||
records: any[] // 原始接口返回的数据
|
|
||||||
timestamp: number
|
|
||||||
}
|
|
||||||
|
|
||||||
const getCachedRegionOption = (): any[] | null => {
|
|
||||||
try {
|
|
||||||
const cached = sessionStorage.getItem(CACHE_KEY)
|
|
||||||
if (cached) {
|
|
||||||
const cacheData: CacheData = JSON.parse(cached)
|
|
||||||
// 检查缓存是否在有效期内
|
|
||||||
return cacheData.records
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('读取缓存失败:', error)
|
|
||||||
sessionStorage.removeItem(CACHE_KEY)
|
|
||||||
}
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
const setCachedRegionOption = (records: any[]) => {
|
|
||||||
try {
|
|
||||||
const cacheData: CacheData = {
|
|
||||||
records,
|
|
||||||
timestamp: Date.now()
|
|
||||||
}
|
|
||||||
sessionStorage.setItem(CACHE_KEY, JSON.stringify(cacheData))
|
|
||||||
console.log('regionOption 数据已缓存')
|
|
||||||
} catch (error) {
|
|
||||||
console.error('保存缓存失败:', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 生命周期
|
// 生命周期
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
updateTime()
|
updateTime()
|
||||||
@@ -280,52 +224,55 @@ onMounted(async () => {
|
|||||||
console.log("区域>>>>>", selectedRegion.value, query.regionCode);
|
console.log("区域>>>>>", selectedRegion.value, query.regionCode);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 先检查缓存
|
|
||||||
const cachedRecords = getCachedRegionOption()
|
|
||||||
let records = cachedRecords
|
|
||||||
|
|
||||||
if (!records || records.length === 0) {
|
|
||||||
// 缓存不存在或已过期,调用接口
|
|
||||||
try {
|
try {
|
||||||
let result = await getTableList('park_info_list', {}, false, { signal: abortController.signal })
|
let { records } = await getTableList(
|
||||||
records = result.records || []
|
'park_info_list'
|
||||||
|
)
|
||||||
|
// records = [
|
||||||
|
// {
|
||||||
|
// "region_id": "130601",
|
||||||
|
// "park_code": "1825468527486140416",
|
||||||
|
// "region": "北京",
|
||||||
|
// "park_name": "雄安新区总部"
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// "region_id": "130601",
|
||||||
|
// "park_code": "1825468527486140417",
|
||||||
|
// "region": "北京",
|
||||||
|
// "park_name": "雄安地面站"
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// "region_id": "130603",
|
||||||
|
// "park_code": "1825468527486140426",
|
||||||
|
// "region": "武汉",
|
||||||
|
// "park_name": "花山新区总部"
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
if (records && records.length > 0) {
|
if (records && records.length > 0) {
|
||||||
// 保存到缓存
|
// 去重region字段,使用Map来确保唯一性
|
||||||
setCachedRegionOption(records)
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('初始化园区数据失败:', error)
|
|
||||||
records = []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (records && records.length > 0) {
|
|
||||||
// 根据regionCode过滤,去重park_name字段
|
|
||||||
const regionMap = new Map()
|
const regionMap = new Map()
|
||||||
records.filter((el) => el.region_id == query.regionCode)
|
records.filter((el) => el.region_id == query.regionCode)
|
||||||
|
.map(el => { return el })
|
||||||
.forEach(el => {
|
.forEach(el => {
|
||||||
if (!regionMap.has(el.park_name)) {
|
if (!regionMap.has(el.park_name)) {
|
||||||
regionMap.set(el.park_name, {
|
regionMap.set(el.park_name, {
|
||||||
name: el.park_name,
|
name: el.park_name,
|
||||||
code: el.park_code
|
code: el.park_code // 使用region_code作为code
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
// 转换为数组并设置 campus_id
|
// // 转换为数组
|
||||||
const regionArray = Array.from(regionMap.values())
|
regionOption.value = Array.from(regionMap.values())
|
||||||
query.campus_id = regionArray.map(el => el.code).join()
|
console.log('regionOption.value>>>>', regionOption.value);
|
||||||
|
|
||||||
|
query.campus_id = regionOption.value.map(el => el.code).join()
|
||||||
}
|
}
|
||||||
// 初始化数据 - 先加载数据,再设置初始值
|
} catch (error) {
|
||||||
|
console.error('初始化园区数据失败:', error)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化数据
|
||||||
await loadDashboardData()
|
await loadDashboardData()
|
||||||
// 暂时先放在这里 - 确保 dashboardData.value 已初始化后再访问
|
|
||||||
if (dashboardData.value && dashboardData.value.hiddenDangerData) {
|
|
||||||
dashboardData.value.hiddenDangerData.general = 0
|
|
||||||
dashboardData.value.hiddenDangerData.major = 0
|
|
||||||
dashboardData.value.hiddenDangerData.progress.overdue = 0
|
|
||||||
dashboardData.value.hiddenDangerData.progress.processed = 0
|
|
||||||
dashboardData.value.hiddenDangerData.progress.processing = 0
|
|
||||||
}
|
|
||||||
|
|
||||||
// 启动定时器
|
// 启动定时器
|
||||||
timeOut1()
|
timeOut1()
|
||||||
@@ -336,11 +283,8 @@ onMounted(async () => {
|
|||||||
}, 2 * 60 * 1000) // 每2分钟更新一次
|
}, 2 * 60 * 1000) // 每2分钟更新一次
|
||||||
})
|
})
|
||||||
|
|
||||||
// 组件卸载时清理定时器并取消所有请求
|
// 组件卸载时清理定时器
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
// 取消所有正在进行的请求
|
|
||||||
abortController.abort()
|
|
||||||
|
|
||||||
if (dashboardTimerId.value) {
|
if (dashboardTimerId.value) {
|
||||||
clearInterval(dashboardTimerId.value)
|
clearInterval(dashboardTimerId.value)
|
||||||
dashboardTimerId.value = null
|
dashboardTimerId.value = null
|
||||||
@@ -367,7 +311,7 @@ const loadDashboardData = async (): Promise<void> => {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
// 获取总体概览数据
|
// 获取总体概览数据
|
||||||
getTableList('generalTotal', query, false, { signal: abortController.signal }).then(generalTotal => {
|
getTableList('generalTotal', query).then(generalTotal => {
|
||||||
if (generalTotal.records && generalTotal.records.length > 0) {
|
if (generalTotal.records && generalTotal.records.length > 0) {
|
||||||
dashboardData.value.totalCount = generalTotal.records.reduce((sum, item) => sum + Number(item.totalCount || 0), 0)
|
dashboardData.value.totalCount = generalTotal.records.reduce((sum, item) => sum + Number(item.totalCount || 0), 0)
|
||||||
dashboardData.value.formalEmployeeCount = generalTotal.records.reduce((sum, item) => sum + Number(item.formalEmployeeCount || 0), 0)
|
dashboardData.value.formalEmployeeCount = generalTotal.records.reduce((sum, item) => sum + Number(item.formalEmployeeCount || 0), 0)
|
||||||
@@ -387,7 +331,7 @@ const loadDashboardData = async (): Promise<void> => {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
// 获取各园区统计数据
|
// 获取各园区统计数据
|
||||||
getTableList('parkscreen_user_info', query, false, { signal: abortController.signal }).then(parkscreen_user_info => {
|
getTableList('parkscreen_user_info', query).then(parkscreen_user_info => {
|
||||||
if (parkscreen_user_info.records && parkscreen_user_info.records.length > 0) {
|
if (parkscreen_user_info.records && parkscreen_user_info.records.length > 0) {
|
||||||
dashboardData.value.parkStatistics = parkscreen_user_info.records.map(el => {
|
dashboardData.value.parkStatistics = parkscreen_user_info.records.map(el => {
|
||||||
return {
|
return {
|
||||||
@@ -405,7 +349,7 @@ const loadDashboardData = async (): Promise<void> => {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
// 获取风险预警数据
|
// 获取风险预警数据
|
||||||
getTableList('risk_alert_data', query, false, { signal: abortController.signal }).then(risk_alert_data => {
|
getTableList('risk_alert_data', query).then(risk_alert_data => {
|
||||||
if (risk_alert_data.records && risk_alert_data.records.length > 0) {
|
if (risk_alert_data.records && risk_alert_data.records.length > 0) {
|
||||||
dashboardData.value.alertData.total = risk_alert_data.records.reduce((sum, item) => sum + Number(item.total || 0), 0)
|
dashboardData.value.alertData.total = risk_alert_data.records.reduce((sum, item) => sum + Number(item.total || 0), 0)
|
||||||
dashboardData.value.alertData.processed = risk_alert_data.records.reduce((sum, item) => sum + Number(item.processed || 0), 0)
|
dashboardData.value.alertData.processed = risk_alert_data.records.reduce((sum, item) => sum + Number(item.processed || 0), 0)
|
||||||
@@ -421,10 +365,10 @@ const loadDashboardData = async (): Promise<void> => {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
// 获取风险预警详情数据
|
// 获取风险预警详情数据
|
||||||
getTableList('risk_alert_detail', query, false, { signal: abortController.signal }).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)
|
||||||
})
|
})
|
||||||
@@ -434,8 +378,8 @@ const loadDashboardData = async (): Promise<void> => {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
// 获取超期工单数据
|
// 获取超期工单数据
|
||||||
getTableList('timeout_work_order', query, false, { signal: abortController.signal }).then(timeout_work_order => {
|
getTableList('timeout_work_order', query).then(timeout_work_order => {
|
||||||
if (timeout_work_order.records && timeout_work_order.records.length >= 0) {
|
if (timeout_work_order.records && timeout_work_order.records.length > 0) {
|
||||||
dashboardData.value.timeoutWorkOrders.total = timeout_work_order.records.length
|
dashboardData.value.timeoutWorkOrders.total = timeout_work_order.records.length
|
||||||
dashboardData.value.timeoutWorkOrders.details = timeout_work_order.records
|
dashboardData.value.timeoutWorkOrders.details = timeout_work_order.records
|
||||||
}
|
}
|
||||||
@@ -445,7 +389,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);
|
||||||
}
|
}
|
||||||
@@ -472,25 +416,25 @@ const handleHiddenDangerPannelData = (query) => {
|
|||||||
pending: 0
|
pending: 0
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
|
dashboardData.value.hiddenDangerData.general = 0
|
||||||
|
dashboardData.value.hiddenDangerData.major = 0
|
||||||
|
dashboardData.value.hiddenDangerData.progress.overdue = 0
|
||||||
|
dashboardData.value.hiddenDangerData.progress.processed = 0
|
||||||
|
dashboardData.value.hiddenDangerData.progress.processing = 0
|
||||||
// 获取隐患排查治理数据
|
// 获取隐患排查治理数据
|
||||||
getTableList('risk_level_count', query, false, { signal: abortController.signal }).then(res => {
|
getTableList('risk_level_count', query).then(res => {
|
||||||
if (res.records && res.records.length > 0) {
|
if (res.records && res.records.length > 0) {
|
||||||
_data.general = _data.general + Number(res.records[0].general_count)
|
_data.general = _data.general + Number(res.records[0].general_count)
|
||||||
_data.major = _data.major + Number(res.records[0].major_count)
|
_data.major = _data.major + Number(res.records[0].major_count)
|
||||||
// 获取隐患排查治理数据
|
// 获取隐患排查治理数据
|
||||||
getTableList('risk_status_count', query, false, { signal: abortController.signal }).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)
|
||||||
const record = res.records[0]
|
_data.processed = _data.processed + Number(res.records[0].processedCnt)
|
||||||
_data.overdue = Number(record.overdueCnt) || 0
|
_data.processing = _data.processing + Number(res.records[0].processingCnt)
|
||||||
_data.processed = Number(record.processedCnt) || 0
|
_data.pending = _data.pending
|
||||||
_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);
|
||||||
@@ -499,44 +443,30 @@ const handleHiddenDangerPannelData = (query) => {
|
|||||||
dashboardData.value.hiddenDangerData.general = generalCnt
|
dashboardData.value.hiddenDangerData.general = generalCnt
|
||||||
dashboardData.value.hiddenDangerData.major = majorCnt
|
dashboardData.value.hiddenDangerData.major = majorCnt
|
||||||
|
|
||||||
// 如果第三方数据也是百分比,需要合并;否则使用系统数据
|
|
||||||
// 这里假设系统数据是百分比,第三方数据可能是数量或百分比
|
|
||||||
let overdueCnt, processedCnt, processingCnt, pendingCnt
|
|
||||||
if (_data2.overdue > 1 || _data2.processed > 1 || _data2.processing > 1) {
|
|
||||||
// 第三方数据可能是百分比,直接使用系统数据(因为系统数据更准确)
|
|
||||||
overdueCnt = _data.overdue.toFixed(2)
|
|
||||||
processedCnt = _data.processed.toFixed(2)
|
|
||||||
processingCnt = _data.processing.toFixed(2)
|
|
||||||
pendingCnt = _data.pending.toFixed(2)
|
|
||||||
} else {
|
|
||||||
// 第三方数据可能是数量,需要计算百分比
|
|
||||||
let totalCnt = generalCnt + majorCnt
|
let totalCnt = generalCnt + majorCnt
|
||||||
overdueCnt = totalCnt > 0 ? ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2) : '0.00'
|
let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2)
|
||||||
processedCnt = totalCnt > 0 ? ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2) : '0.00'
|
let processedCnt = ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2)
|
||||||
processingCnt = totalCnt > 0 ? ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2) : '0.00'
|
let processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2)
|
||||||
pendingCnt = totalCnt > 0 ? ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2) : '0.00'
|
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,
|
||||||
}
|
}
|
||||||
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.toFixed(2),
|
overdue: (_data.overdue / totalCnt * 100).toFixed(2),
|
||||||
processed: _data.processed.toFixed(2),
|
processed: (_data.processed / totalCnt * 100).toFixed(2),
|
||||||
processing: _data.processing.toFixed(2),
|
processing: (_data.processing / totalCnt * 100).toFixed(2),
|
||||||
pending: _data.pending.toFixed(2),
|
pending: (_data.pending / totalCnt * 100).toFixed(2),
|
||||||
}
|
}
|
||||||
console.log('系统数据 progress:', dashboardData.value.hiddenDangerData.progress)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -545,64 +475,55 @@ const handleHiddenDangerPannelData = (query) => {
|
|||||||
|
|
||||||
|
|
||||||
// 获取隐患排查治理数据
|
// 获取隐患排查治理数据
|
||||||
getTableList('hidden_danger_investigation', query, false, { signal: abortController.signal }).then(res => {
|
getTableList('hidden_danger_investigation', query).then(res => {
|
||||||
if (res.records && res.records.length > 0) {
|
if (res.records && res.records.length > 0) {
|
||||||
_data2.general = Number(res.records[0].general)
|
_data2.general = Number(res.records[0].general)
|
||||||
_data2.major = Number(res.records[0].major)
|
_data2.major = Number(res.records[0].major)
|
||||||
|
|
||||||
// 安全指数另算,再起一个报表
|
|
||||||
// dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
|
|
||||||
// 在这里添加获取安全指数的逻辑
|
|
||||||
getTableList('hidden_danger_safety_index', query, false, { signal: abortController.signal }).then(res => {
|
|
||||||
if (res.records && res.records.length > 0) {
|
|
||||||
dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
|
dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
|
||||||
}
|
|
||||||
}).catch(error => {
|
|
||||||
console.error('获取隐患排查治理数据失败:', error)
|
|
||||||
})
|
|
||||||
|
|
||||||
// 获取隐患排查治理处理进度数据
|
// 获取隐患排查治理处理进度数据
|
||||||
getTableList('hidden_danger_process_progress', query, false, { signal: abortController.signal }).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)
|
||||||
})
|
})
|
||||||
@@ -616,7 +537,7 @@ const handleHiddenDangerPannelData = (query) => {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
// 获取隐患排查治理TOP3类型数据
|
// 获取隐患排查治理TOP3类型数据
|
||||||
getTableList('hidden_danger_top', query, false, { signal: abortController.signal }).then(res => {
|
getTableList('hidden_danger_top', query).then(res => {
|
||||||
if (res.records && res.records.length > 0) {
|
if (res.records && res.records.length > 0) {
|
||||||
dashboardData.value.hiddenDangerData.top3Types = res.records
|
dashboardData.value.hiddenDangerData.top3Types = res.records
|
||||||
}
|
}
|
||||||
@@ -631,120 +552,96 @@ 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 workOrderType = ''
|
let code = ''
|
||||||
switch (tab) {
|
switch (tab) {
|
||||||
case '安全类事项':
|
case '危险作业':
|
||||||
workOrderType = '安全生产'
|
code = 'hazardous_operations'
|
||||||
break
|
break
|
||||||
case '工程类事项':
|
case '安全考核':
|
||||||
workOrderType = '物业服务-工程'
|
code = 'safety_assessment'
|
||||||
|
break
|
||||||
|
case '安全、保密培训':
|
||||||
|
code = 'security_training'
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
workOrderType = '安全生产'
|
code = 'hazardous_operations'
|
||||||
}
|
}
|
||||||
|
if (code == 'hazardous_operations') {
|
||||||
// 同时获取维保任务和巡检任务的数据
|
// 根据不同的tab请求不同的接口
|
||||||
const [maintenanceResponse, inspectionResponse] = await Promise.all([
|
getTableList(
|
||||||
getWorkOrderStatistics({
|
code,
|
||||||
workOrderType,
|
{ ...query, activeTab: tab }
|
||||||
taskType: '维保任务',
|
).then(response => {
|
||||||
campus_id: query.campus_id
|
// 更新风险统计数据 - 传递完整的数组数据用于饼图显示
|
||||||
}, { signal: abortController.signal }).catch(error => {
|
if (response.records && response.records.length > 0) {
|
||||||
console.error('获取维保任务数据失败:', error)
|
dangerDetail.value = response.records
|
||||||
return {records: []}
|
|
||||||
}),
|
|
||||||
getWorkOrderStatistics({
|
|
||||||
workOrderType,
|
|
||||||
taskType: '巡检任务',
|
|
||||||
campus_id: query.campus_id
|
|
||||||
}, { signal: abortController.signal }).catch(error => {
|
|
||||||
console.error('获取巡检任务数据失败:', error)
|
|
||||||
return {records: []}
|
|
||||||
})
|
|
||||||
])
|
|
||||||
|
|
||||||
// 处理接口返回的数据结构:可能是数组或对象
|
|
||||||
const getRecords = (response: any): any[] => {
|
|
||||||
if (Array.isArray(response)) {
|
|
||||||
return response
|
|
||||||
} else if (response && Array.isArray(response.records)) {
|
|
||||||
return response.records
|
|
||||||
} else if (response && response.data && Array.isArray(response.data)) {
|
|
||||||
return response.data
|
|
||||||
}
|
}
|
||||||
return []
|
}).catch(error => {
|
||||||
}
|
console.error('获取风险统计数据失败:', error)
|
||||||
|
if (isFirstLoad.value) {
|
||||||
const maintenanceRecords = getRecords(maintenanceResponse)
|
// dangerDetail.value = [
|
||||||
const inspectionRecords = getRecords(inspectionResponse)
|
// {
|
||||||
|
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
|
||||||
console.log('维保任务数据:', maintenanceResponse, '提取的records:', maintenanceRecords)
|
// alarm_level_code: 'general',
|
||||||
console.log('巡检任务数据:', inspectionResponse, '提取的records:', inspectionRecords)
|
// alarm_status: '已关闭',
|
||||||
|
// alarm_biz_id: '20250827164305283937'
|
||||||
// 周期映射
|
// },
|
||||||
const cycleMap: Record<string, string> = {
|
// {
|
||||||
'day': '每日',
|
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
|
||||||
'month': '每月',
|
// alarm_level_code: 'general',
|
||||||
'year': '每年'
|
// alarm_status: '已关闭',
|
||||||
}
|
// alarm_biz_id: '20250827164305283937'
|
||||||
|
// }, {
|
||||||
// 将API数据转换为图表数据格式
|
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
|
||||||
const convertToChartData = (records: any[], taskTypeName: string): any[] => {
|
// alarm_level_code: 'general',
|
||||||
const charts: any[] = []
|
// alarm_status: '已关闭',
|
||||||
|
// alarm_biz_id: '20250827164305283937'
|
||||||
// 按周期分组
|
// }, {
|
||||||
const cycleGroups: Record<string, any> = {}
|
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
|
||||||
records.forEach((record: any) => {
|
// alarm_level_code: 'general',
|
||||||
const cycle = record.cycle || 'day'
|
// alarm_status: '已关闭',
|
||||||
if (!cycleGroups[cycle]) {
|
// alarm_biz_id: '20250827164305283937'
|
||||||
cycleGroups[cycle] = record
|
// }, {
|
||||||
|
// 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 {
|
||||||
// 创建6个图表(3个周期 x 2个任务类型,但这里只处理一种任务类型)
|
// 根据不同的tab请求不同的接口
|
||||||
const cycles = ['day', 'month', 'year']
|
getTableList(
|
||||||
cycles.forEach((cycle) => {
|
code,
|
||||||
const data = cycleGroups[cycle] || {}
|
{ ...query, activeTab: tab }
|
||||||
const title = `${cycleMap[cycle]}检查(${taskTypeName})`
|
).then(response => {
|
||||||
|
// 更新风险统计数据 - 传递完整的数组数据用于饼图显示
|
||||||
charts.push({
|
if (response.records && response.records.length > 0) {
|
||||||
title,
|
riskStatistics.value = response.records
|
||||||
total: Number(data.total) || 0,
|
} else {
|
||||||
status: {
|
// 如果没有数据,设置默认值
|
||||||
notStarted: Number(data.pending) || 0,
|
riskStatistics.value = [
|
||||||
inProgress: Number(data.processing) || 0,
|
{
|
||||||
done: Number(data.processed) || 0,
|
csmpus_name: "雄安新区总部",
|
||||||
voided: Number(data.closed) || 0
|
finishCount: "0",
|
||||||
|
participateCount: "0"
|
||||||
}
|
}
|
||||||
})
|
]
|
||||||
})
|
}
|
||||||
|
}).catch(error => {
|
||||||
return charts
|
console.error('获取风险统计数据失败:', error)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 转换维保和巡检数据
|
|
||||||
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)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 第一次加载完成后,隐藏骨架屏
|
|
||||||
if (isFirstLoading.value) {
|
|
||||||
isFirstLoading.value = false
|
|
||||||
console.log('隐藏骨架屏')
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 方法定义
|
// 方法定义
|
||||||
@@ -757,6 +654,11 @@ const onRegionChange = (item: RegionItem): void => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 打开区域选择器
|
||||||
|
const openRegionSelector = (): void => {
|
||||||
|
regionSelectorVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
// 更新时间
|
// 更新时间
|
||||||
const updateTime = (): void => {
|
const updateTime = (): void => {
|
||||||
const now = new Date()
|
const now = new Date()
|
||||||
@@ -1317,10 +1219,12 @@ 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;
|
||||||
|
|
||||||
@@ -1328,7 +1232,8 @@ const timeOut1 = (): void => {
|
|||||||
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;
|
||||||
@@ -1491,10 +1396,12 @@ 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;
|
||||||
|
|
||||||
@@ -1502,7 +1409,8 @@ const timeOut1 = (): void => {
|
|||||||
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;
|
||||||
@@ -1554,6 +1462,8 @@ const timeOut1 = (): void => {
|
|||||||
row-gap: 1rem;
|
row-gap: 1rem;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.center-container {
|
.center-container {
|
||||||
|
|||||||
@@ -73,24 +73,24 @@ export const exportExcelData = (reportCode, data?) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
//获取报表数据
|
//获取报表数据
|
||||||
export const getTableList = (reportCode, data?, isOpen?, options = {}) => {
|
export const getTableList = (reportCode, data?, isOpen?) => {
|
||||||
return request.post({ url: `/jeelowcode/${isOpen ? 'open/report' : 'report-data'}/list/${reportCode}`, data, ...options })
|
return request.post({ url: `/jeelowcode/${isOpen ? 'open/report' : 'report-data'}/list/${reportCode}`, data })
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getDangerDetail = (campus_id: string, options = {}) => {
|
export const getDangerDetail = (campus_id: string) => {
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_danger_detail', data: {campus_id}, ...options })
|
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_danger_detail', data: {campus_id} })
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getZBDangerSum = (campus_id: string) => {
|
export const getZBDangerSum = (campus_id: string) => {
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/dp_zb_danger_sum', data: {campus_id} })
|
return request.post({ url: '/jeelowcode/report-data/list/dp_zb_danger_sum', data: {campus_id} })
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getDangerCount = (campus_id: string, options = {}) => {
|
export const getDangerCount = (campus_id: string) => {
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_danger_sum', data: {campus_id}, ...options })
|
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_danger_sum', data: {campus_id} })
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getExamDetail = (campus_id: string, options = {}) => {
|
export const getExamDetail = (campus_id: string) => {
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_exam_detail', data: {campus_id}, ...options })
|
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_exam_detail', data: {campus_id} })
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getExamSum = (campus_id: string) => {
|
export const getExamSum = (campus_id: string) => {
|
||||||
@@ -101,13 +101,13 @@ export const getDrillSum = (campus_id: string) => {
|
|||||||
return request.post({ url: '/jeelowcode/report-data/list/dp_zb_drill_sum', data: {campus_id} })
|
return request.post({ url: '/jeelowcode/report-data/list/dp_zb_drill_sum', data: {campus_id} })
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getDrillDetail = (campus_id: string, options = {}) => {
|
export const getDrillDetail = (campus_id: string) => {
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_drill_detail', data: {campus_id}, ...options })
|
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_drill_detail', data: {campus_id} })
|
||||||
}
|
}
|
||||||
|
|
||||||
//获取报表数据
|
//获取报表数据
|
||||||
export const getTableData = (tableId, data?, options = {}) => {
|
export const getTableData = (tableId, data?) => {
|
||||||
return request.post({ url: `/jeelowcode/dbform-data/list/${tableId}`, data, ...options })
|
return request.post({ url: `/jeelowcode/dbform-data/list/${tableId}`, data })
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -122,21 +122,4 @@ 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}, options = {}) => {
|
|
||||||
return request.post({ url: '/jeelowcode/report-data/list/report_work_order_statistics', data: {...data, pageNo: 1, pageSize: 10}, ...options })
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
|
|||||||
// 本地跨域代理. 目前注释的原因:暂时没有用途,server 端已经支持跨域
|
// 本地跨域代理. 目前注释的原因:暂时没有用途,server 端已经支持跨域
|
||||||
proxy: {
|
proxy: {
|
||||||
['/admin-api']: {
|
['/admin-api']: {
|
||||||
target: 'http://carson.wang:48080',
|
target: 'http://10.28.117.100: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`), ''),
|
||||||
|
|||||||
Reference in New Issue
Block a user