Compare commits

1 Commits

Author SHA1 Message Date
chenlin
93ecebcb2e no message 2025-11-25 10:50:52 +08:00
54 changed files with 3688 additions and 13263 deletions

View File

@@ -4,7 +4,7 @@ VITE_NODE_ENV=development
VITE_DEV=true
# 请求路径 注:/api 正常不需要 当前是访问演示环境nginx转发用
VITE_BASE_URL='https://demo.jeelowcode.com/api'
VITE_BASE_URL='http://10.28.117.100'
# 文件上传类型server - 后端上传, client - 前端直连上传仅支持S3服务
VITE_UPLOAD_TYPE=server

View File

@@ -63,7 +63,7 @@ watch(
</script>
<template>
<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 />
</div>
<routerSearch />

View File

@@ -27,16 +27,16 @@ export type ProcessInstanceCCVO = {
processInstanceName: string,
processInstanceKey: string,
startUserId: string,
options: string [],
options:string [],
reason: string
}
export const getMyProcessInstancePage = async (params) => {
return await request.get({url: '/bpm/process-instance/my-page', params})
return await request.get({ url: '/bpm/process-instance/my-page', params })
}
export const createProcessInstance = async (data) => {
return await request.post({url: '/bpm/process-instance/create', data: data})
return await request.post({ url: '/bpm/process-instance/create', data: data })
}
export const cancelProcessInstance = async (id: number, reason: string) => {
@@ -44,11 +44,11 @@ export const cancelProcessInstance = async (id: number, reason: string) => {
id: id,
reason: reason
}
return await request.delete({url: '/bpm/process-instance/cancel', data: data})
return await request.delete({ url: '/bpm/process-instance/cancel', data: data })
}
export const getProcessInstance = async (id: number) => {
return await request.get({url: '/bpm/process-instance/get?id=' + id})
return await request.get({ url: '/bpm/process-instance/get?id=' + id })
}
/**
@@ -57,18 +57,14 @@ export const getProcessInstance = async (id: number) => {
* @returns 是否抄送成功
*/
export const createProcessInstanceCC = async (data) => {
return await request.post({url: '/bpm/process-instance/cc/create', data: data})
return await request.post({ url: '/bpm/process-instance/cc/create', data: data })
}
/**
* 抄送列表
* @param params
* @returns
* @param params
* @returns
*/
export const getProcessInstanceCCPage = async (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})
}
return await request.get({ url: '/bpm/process-instance/cc/my-page', params })
}

View File

@@ -1,6 +1,5 @@
import request from '@/config/axios'
import { encryptAES } from '@/components/LowDesign/src/utils/aes'
import download from '@/utils/download'
//获取表单开发列表
export const getDbList = (data) => {
@@ -159,11 +158,6 @@ export const exportExcelData = (tableId, 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) => {
return request.download({ url: `/jeelowcode/excel/exportExcelTemplate/${tableId}` })

View File

@@ -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 })
}

View File

@@ -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

View File

@@ -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>

View File

@@ -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>

File diff suppressed because it is too large Load Diff

View File

@@ -1,6 +1,5 @@
<template>
<div class="dic-table-select-box w-100%">
{{ JSON.stringify(props) }}
<div
class="table-input pos-relative"
:class="[{ disabled }, type, size]"
@@ -274,9 +273,9 @@ const getCurrTableSelect = (type?) => {
const dicObj = {}
const textList: string[] = []
const ids = tableRef.value.tableSelect.map((item) => {
if (item[props.column.dictCode]) {
dicObj[item[dicCode.value]] = item[props.column.dictCode]
textList.push(item[props.column.dictCode])
if (item[props.column.dictText]) {
dicObj[item[dicCode.value]] = item[props.column.dictText]
textList.push(item[props.column.dictText])
}
return item[dicCode.value]
})

View File

@@ -217,7 +217,7 @@ defineOptions({ name: 'UserSelect' })
* all_sub 所有下级
*/
export interface Column {
interface Column {
label: string
findType: 'all' | 'now' | 'sub' | 'all_sub' | 'direct_sub' //查询类型
columnKey: Array<'mobile' | 'email' | 'sex' | 'post' | 'deptName'> //扩展显示列

View File

@@ -34,7 +34,7 @@ const dicObj = {
{ label: '邮箱', value: 'email' }, { label: '性别', value: 'sex' }, { label: '岗位', value: 'post' }, { label: '部门', value: 'deptName' }
],
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 }],
regionType: [{ label: '全球-国家', value: 'gj' }, { label: '中国-省市区', value: 'ssq' }, { label: '中国-省市', value: 'ss' }, { label: '中国-省', value: 's' }],
dictTextFormatter: [

View File

@@ -7,7 +7,6 @@ import { encryptAES, decryptAES } from '@/components/LowDesign/src/utils/aes'
import { useUserStoreWithOut } from '@/store/modules/user'
import { useI18n } from '@/hooks/web/useI18n';
import router from '@/router/index'
import {exportExcelDataCustom} from '@/api/design/table'
const message = useMessage() // 消息弹窗
@@ -19,7 +18,6 @@ export default {
* @param options 请求配置 如:{ params:{ text:'测试' } }
*/
requestApi: (Method, url, options) => callApiFun(Method, url, options),
exportExcelCustom: (explain,tableId, data) => exportExcelDataCustom(explain,tableId, data),
cloneDeep, //深拷贝
listToTree,//列表转树结构
formatDate,//时间格式化

View File

@@ -546,15 +546,13 @@ export const formDataFormatting = (formOption, formData, formType) => {
echoObj[dicKey].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 (typeof data[key] == 'number' || typeof data[key] == 'string') {
data[key] = data[key] + ''
if (!(/[-|\/]/g.test(data[key]))) {
//如果是时间戳强制转换
const timestamp = parseInt(data[key], 10)
data[key] = formatDate(new Date(timestamp), column[key].valueFormat || 'YYYY-MM-DD HH:mm:ss')
data[key] = formatDate(new Date(data[key]), column[key].valueFormat || 'YYYY-MM-DD HH:mm:ss')
}
}
}

View File

@@ -116,7 +116,7 @@ const initColumn = (data, componentData, columnParams) => {
const summaryBottom = {}
const tableDic = {}
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
let controlType = webEntity.controlType || 'input'
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',
overHidden: isCardTable ? false : true,
className: `low-field__${fieldCode} control-${controlType}`,
labelClassName: `low-header__${fieldCode}`,
sortNum: sortNum
labelClassName: `low-header__${fieldCode}`
}
//租户字段的列表、表单权限控制

View File

@@ -171,7 +171,7 @@ const canvasClick = (e) => {
token: backToken.value
}
reqCheck(data).then((res) => {
if (res.repCode == '0000') {
if (res?.repCode == '0000') {
barAreaColor.value = '#4cae4c'
barAreaBorderColor.value = '#5cb85c'
text.value = t('captcha.success')
@@ -228,14 +228,14 @@ const getPictrue = async () => {
captchaType: captchaType.value
}
const res = await getCode(data)
if (res.repCode == '0000') {
pointBackImgBase.value = res.repData.originalImageBase64
backToken.value = res.repData.token
secretKey.value = res.repData.secretKey
poinTextList.value = res.repData.wordList
text.value = t('captcha.point') + '【' + poinTextList.value.join(',') + '】'
if (res?.repCode == '0000') {
pointBackImgBase.value = res?.repData?.originalImageBase64
backToken.value = res?.repData?.token
secretKey.value = res?.repData?.secretKey
poinTextList.value = res?.repData?.wordList || []
text.value = t('captcha.point') + '【' + poinTextList.value?.join(',') + '】'
} else {
text.value = res.repMsg
text.value = res?.repMsg
}
}
//坐标转换函数

View File

@@ -287,7 +287,7 @@ const end = () => {
token: backToken.value
}
reqCheck(data).then((res) => {
if (res.repCode == '0000') {
if (res?.repCode == '0000') {
moveBlockBackgroundColor.value = '#5cb85c'
leftBarBorderColor.value = '#5cb85c'
iconColor.value = '#fff'
@@ -364,13 +364,13 @@ const getPictrue = async () => {
captchaType: captchaType.value
}
const res = await getCode(data)
if (res.repCode == '0000') {
backImgBase.value = res.repData.originalImageBase64
blockBackImgBase.value = res.repData.jigsawImageBase64
backToken.value = res.repData.token
secretKey.value = res.repData.secretKey
if (res?.repCode == '0000') {
backImgBase.value = res?.repData?.originalImageBase64
blockBackImgBase.value = res?.repData?.jigsawImageBase64
backToken.value = res?.repData?.token
secretKey.value = res?.repData?.secretKey
} else {
tipWords.value = res.repMsg
tipWords.value = res?.repMsg
}
}
</script>

View File

@@ -16,7 +16,7 @@ const config: {
/**
* 接口请求超时时间
*/
request_timeout: 24 * 60 * 60 * 1000,
request_timeout: 30000,
/**
* 默认接口请求类型
@@ -30,4 +30,4 @@ const specificApiTimeoutObj = {
'/infra/file/jeelowcode/upload': 120000,//上传文件接口
}
export {config, specificApiTimeoutObj}
export { config, specificApiTimeoutObj }

View File

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

View File

@@ -102,17 +102,10 @@ router.beforeEach(async (to, from, next) => {
} else {
if(import.meta.env.VITE_DEFAULT_SSO =='true'){
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 =
location.origin +
'/social-login?' +
`type=100&redirect=${encodeURIComponent(redirectUrl)}`
`type=100&redirect=${to.fullPath}`
// 进行跳转
const res = await LoginApi.socialAuthRedirect(100, encodeURIComponent(redirectUri))

View File

@@ -7,8 +7,7 @@ import {
MapChart,
PictorialBarChart,
RadarChart,
GaugeChart,
CandlestickChart
GaugeChart
} from 'echarts/charts'
import {
@@ -42,8 +41,7 @@ echarts.use([
CanvasRenderer,
PictorialBarChart,
RadarChart,
GaugeChart,
CandlestickChart
GaugeChart
])
export default echarts

View File

@@ -57,17 +57,6 @@ const remainingRouter: AppRouteRecordRaw[] = [
name: 'Home',
meta: {},
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',
component: () => import('@/views/Home/Index10.vue'),
@@ -78,30 +67,6 @@ const remainingRouter: AppRouteRecordRaw[] = [
noCache: false,
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,
}
},
{
path: '/screen/powerMonitoring',
component: () => import('@/views/screen/powerMonitoring.vue'),
name: 'powerMonitoring',
meta: {
hidden: true,
title: '动环监控大屏',
noTagsView: true,
catalogue: true,
}
},
{
path: '/screen/main',
component: () => import('@/views/screen/mainScreen.vue'),

View File

@@ -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

View File

@@ -227,11 +227,13 @@ const getCookie = () => {
// 根据域名,获得租户信息
const getTenantByWebsite = async () => {
const website = location.host
const res = await LoginApi.getTenantByWebsite(website)
if (res) {
loginData.loginForm.tenantName = res.name
authUtil.setTenantId(res.id)
}
try {
const res = await LoginApi.getTenantByWebsite(website)
if (res) {
loginData.loginForm.tenantName = res.name
authUtil.setTenantId(res.id)
}
} catch (e) { }
}
const loading = ref() // ElLoading.service 返回的实例
// 登录
@@ -268,12 +270,7 @@ const handleLogin = async (params) => {
} else {
push({ path: redirect.value || permissionStore.addRouters[0].path })
}
}
catch (e) {
loginLoading.value = false
loading.value?.close()
}
finally {
} finally {
loginLoading.value = false
loading.value?.close()
}

View File

@@ -14,7 +14,7 @@
<el-input v-model="formData.processInstanceKey" disabled placeholder="请输入流程标识" />
</el-form-item>
<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
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE)"
:key="dict.value"
@@ -165,7 +165,7 @@ const open = async (row) => {
resetForm()
// 2. 再设置表单
if (row != null) {
formData.value.type = 30
formData.value.type = undefined as unknown as number
formData.value.taskName = row.name
formData.value.taskId = row.id
formData.value.processInstanceName = row.processInstance.name

View File

@@ -34,29 +34,27 @@
</el-form>
<div style="margin-bottom: 20px; margin-left: 10%; font-size: 14px">
<el-button type="success" @click="handleAudit(item, true)">
<Icon icon="ep:select"/>
<Icon icon="ep:select" />
通过
</el-button>
<el-button type="danger" @click="handleAudit(item, false)">
<Icon icon="ep:close"/>
<Icon icon="ep:close" />
不通过
</el-button>
<el-button type="primary" @click="handleCC(item)">
<Icon icon="ep:position"/>
抄送
<el-button type="primary" @click="openTaskUpdateAssigneeForm(item.id)">
<Icon icon="ep:edit" />
转办
</el-button>
<!-- <el-button type="primary" @click="handleDelegate(item)">
<el-button type="primary" @click="handleDelegate(item)">
<Icon icon="ep:position" />
委派
</el-button>
<el-button type="primary" @click="handleSign(item)">
<Icon icon="ep:plus" />
加签
</el-button> -->
<el-button type="primary" @click="handleSign(item)">
<Icon icon="ep:plus" />
加签
</el-button>
<el-button type="warning" @click="handleBack(item)">
<Icon icon="ep:back"/>
<Icon icon="ep:back" />
回退
</el-button>
</div>
@@ -64,28 +62,28 @@
</el-card>
<div id="Printer">
<!-- 申请信息 -->
<el-card v-loading="processInstanceLoading" class="box-card"
<!-- 申请信息 -->
<el-card v-loading="processInstanceLoading" class="box-card"
>
<template #header>
<span class="el-icon-document">申请信息{{ processInstance.name }}</span>
<el-button type="success" @click="printPage()">
<Icon icon="ep:printer"/>
<template #header>
<span class="el-icon-document">申请信息{{ processInstance.name }}</span>
<el-button type="success" @click="printPage()">
<Icon icon="ep:printer" />
打印表单
</el-button>
</template>
<!-- 情况一流程表单 -->
<el-col v-if="processInstance?.processDefinition?.formType === 10" :span="24">
<FormView form-type="view" show-type="view" v-bind="detailForm"></FormView>
</el-col>
<!-- 情况二业务表单 -->
<div v-if="processInstance?.processDefinition?.formType === 20">
<BusinessFormComponent :id="processInstance.businessKey"/>
</div>
</el-card>
</template>
<!-- 情况一流程表单 -->
<el-col v-if="processInstance?.processDefinition?.formType === 10" :span="24">
<FormView form-type="view" show-type="view" v-bind="detailForm"></FormView>
</el-col>
<!-- 情况二业务表单 -->
<div v-if="processInstance?.processDefinition?.formType === 20">
<BusinessFormComponent :id="processInstance.businessKey" />
</div>
</el-card>
<!-- 审批记录 -->
<ProcessInstanceTaskList :loading="tasksLoad" :tasks="tasks"/>
<!-- 审批记录 -->
<ProcessInstanceTaskList :loading="tasksLoad" :tasks="tasks" />
</div>
<!-- 高亮流程图 -->
<ProcessInstanceBpmnViewer
@@ -97,18 +95,17 @@
/>
<!-- 弹窗转派审批人 -->
<TaskUpdateAssigneeForm ref="taskUpdateAssigneeFormRef" @success="getDetail"/>
<TaskUpdateAssigneeForm ref="taskUpdateAssigneeFormRef" @success="getDetail" />
<!-- 弹窗回退节点 -->
<TaskReturnDialog ref="taskReturnDialogRef" @success="getDetail"/>
<TaskReturnDialog ref="taskReturnDialogRef" @success="getDetail" />
<!-- 委派将任务委派给别人处理处理完成后会重新回到原审批人手中-->
<TaskDelegateForm ref="taskDelegateForm" @success="getDetail"/>
<TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />
<!-- 加签当前任务审批人为A向前加签选了一个C则需要C先审批然后再是A审批向后加签BA审批完需要B再审批完才算完成这个任务节点 -->
<TaskAddSignDialogForm ref="taskAddSignDialogForm" @success="getDetail"/>
<TaskCCDialogForm ref="taskCCDialogForm"/>
<TaskAddSignDialogForm ref="taskAddSignDialogForm" @success="getDetail" />
</ContentWrap>
</template>
<script lang="ts" setup>
import {useUserStore} from '@/store/modules/user'
import { useUserStore } from '@/store/modules/user'
import * as DefinitionApi from '@/api/bpm/definition'
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
import * as TaskApi from '@/api/bpm/task'
@@ -118,21 +115,19 @@ import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
import TaskReturnDialog from './TaskReturnDialogForm.vue'
import TaskDelegateForm from './TaskDelegateForm.vue'
import TaskAddSignDialogForm from './TaskAddSignDialogForm.vue'
import {registerComponent} from '@/utils/routerHelper'
import {isEmpty} from '@/utils/is'
import { registerComponent } from '@/utils/routerHelper'
import { isEmpty } from '@/utils/is'
import router from '@/router/index'
import {$Print} from '@smallwei/avue'
import TaskCCDialogForm from '../../processInstance/detail/TaskCCDialogForm.vue'
import { $Print } from '@smallwei/avue'
defineOptions({name: 'BpmProcessInstanceDetail'})
defineOptions({ name: 'BpmProcessInstanceDetail' })
const {query} = useRoute() // 查询参数
const { query } = useRoute() // 查询参数
const message = useMessage() // 消息弹窗
const {proxy} = getCurrentInstance() as any
const { proxy } = getCurrentInstance() as any
const userId = useUserStore().getUser.id // 当前登录的编号
const id = query.id as unknown as number // 流程实例的编号
const read = query.read as unknown as boolean // 是否是待阅的标记
const processInstanceLoading = ref(false) // 流程实例的加载中
const processInstance = ref<any>({}) // 流程实例
const bpmnXML = ref('') // BPMN XML
@@ -142,7 +137,7 @@ const tasks = ref<any[]>([]) // 任务列表
const runningTasks = ref<any[]>([]) // 运行中的任务
const auditForms = ref<any[]>([]) // 审批任务的表单
const auditRule = reactive({
reason: [{required: true, message: '审批建议不能为空', trigger: 'blur'}]
reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
})
// ========== 申请信息 ==========
const detailForm = ref({
@@ -178,19 +173,11 @@ const handleAudit = async (task, pass) => {
getDetail()
}
const taskCCDialogForm = ref()
/** 处理抄送按钮 */
const handleCC = (row) => {
taskCCDialogForm.value.open(row)
}
const printPage = async () => {
const {href} = router.resolve({
name: 'BpmProcessInstanceInfo',
query: {id: String(id), isPrint: '1'}
})
const { href } = router.resolve({ name: 'BpmProcessInstanceInfo',
query: { id: String(id), isPrint: '1' }
})
window.open(href, '_blank', 'noopener,noreferrer')
}
@@ -219,15 +206,6 @@ const handleSign = async (task) => {
taskAddSignDialogForm.value.open(task.id)
}
// 处理待阅的操作
const handleRead = async () => {
if (read) {
// 向后端发送接口,让后端发起已阅接口
const data = await ProcessInstanceApi.handleProcessInstanceCC(id + '')
console.log(JSON.stringify(data))
}
}
/** 获得详情 */
const getDetail = () => {
// 1. 获得流程实例相关
@@ -253,10 +231,6 @@ const getProcessInstance = async () => {
if (processDefinition.formType === 10) {
detailForm.value.formId = processDefinition.formId
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
// setConfAndFields2(
// detailForm,
@@ -334,7 +308,7 @@ const loadRunningTask = (tasks) => {
return
}
// 2.3 添加到处理任务
runningTasks.value.push({...task})
runningTasks.value.push({ ...task })
auditForms.value.push({
reason: ''
})
@@ -342,37 +316,12 @@ const loadRunningTask = (tasks) => {
}
/** 初始化 */
onMounted(async () => {
await handleRead()
onMounted(async() => {
await getDetail()
await nextTick()
if (query.isPrint === '1') {
if (query.isPrint === '1') {
await new Promise(resolve => setTimeout(resolve, 2000))
$Print('#Printer')
}
})
</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>

View File

@@ -16,7 +16,7 @@
@current-change="currentChange"
>
<template #category="{ row }">
<dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="row.category || ''"/>
<dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="row.category || ''" />
</template>
<template #status="scope">
<dict-tag
@@ -38,9 +38,8 @@
/>
</template>
<template #menu-left>
<el-button type="primary" v-hasPermi="['bpm:process-instance:create']" @click="handleCreate">
<Icon icon="ep:plus" class="mr-5px"/>
发起流程
<el-button type="primary" v-hasPermi="['bpm:process-instance:query']" @click="handleCreate">
<Icon icon="ep:plus" class="mr-5px" /> 发起流程
</el-button>
</template>
<!-- 自定义操作栏 -->
@@ -48,34 +47,34 @@
<el-button
link
type="primary"
v-hasPermi="['bpm:process-instance:query']"
v-hasPermi="['bpm:process-instance:cancel']"
@click="handleDetail(row)"
>
详情
</el-button>
<el-button
<!-- <el-button
link
type="danger"
v-if="row.result === 1|| row.result === 2"
v-hasPermi="['bpm:process-instance:cancel']"
v-if="row.result === 1"
v-hasPermi="['bpm:process-instance:query']"
@click="handleCancel(row)"
>
取消
</el-button>
</el-button> -->
</template>
</avue-crud>
</ContentWrap>
</template>
<script lang="ts" setup>
import {DICT_TYPE, getIntDictOptions} from '@/utils/dict'
import {dateFormatter, getSearchDate} from '@/utils/formatTime'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter, getSearchDate } from '@/utils/formatTime'
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
defineOptions({name: 'BpmCCProcessInstance'})
defineOptions({ name: 'BpmCCProcessInstance' })
const router = useRouter() // 路由
const message = useMessage() // 消息弹窗
const {t} = useI18n() // 国际化
const {getCurrPermi} = useCrudPermi()
const { t } = useI18n() // 国际化
const { getCurrPermi } = useCrudPermi()
const loading = ref(true) // 列表的加载中
const tableOption = reactive({
@@ -105,7 +104,7 @@ const tableOption = reactive({
type: 'select',
span: 12,
dicData: getIntDictOptions(DICT_TYPE.BPM_MODEL_CATEGORY),
rules: [{required: true, message: '流程分类不能为空', trigger: 'blur'}]
rules: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }]
},
tasks: {
label: '当前审批任务'
@@ -116,7 +115,7 @@ const tableOption = reactive({
type: 'select',
span: 12,
dicData: getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS),
rules: [{required: true, message: '状态不能为空', trigger: 'blur'}]
rules: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
},
result: {
label: '结果',
@@ -124,7 +123,7 @@ const tableOption = reactive({
type: 'select',
span: 12,
dicData: getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT),
rules: [{required: true, message: '结果不能为空', trigger: 'blur'}]
rules: [{ required: true, message: '结果不能为空', trigger: 'blur' }]
},
createTime: {
label: '提交时间',
@@ -204,8 +203,7 @@ const searchChange = (params, done) => {
/** 清空按钮操作 */
const resetChange = () => {
searchChange({}, () => {
})
searchChange({}, () => {})
}
const sizeChange = (pageSize) => {
@@ -220,7 +218,7 @@ const currentChange = (currentPage) => {
/** 取消按钮操作 */
const handleCancel = async (row) => {
// 二次确认
const {value} = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
confirmButtonText: t('common.ok'),
cancelButtonText: t('common.cancel'),
inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空,且非空格

View File

@@ -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>

View File

@@ -26,7 +26,7 @@
</template>
<template #menu="{ row }">
<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>
</avue-crud>
<TaskCCDialogForm ref="taskCCDialogForm" />

View File

@@ -32,22 +32,22 @@
</ContentWrap>
</template>
<script lang="ts" setup>
import {DICT_TYPE, getIntDictOptions} from '@/utils/dict'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as TaskAssignRuleApi from '@/api/bpm/taskAssignRule'
import * as RoleApi from '@/api/system/role'
import * as PostApi from '@/api/system/post'
import * as UserGroupApi from '@/api/bpm/userGroup'
import {setUserAndDeptName} from '@/components/LowDesign/src/utils/getName'
import {useLowStoreWithOut} from '@/store/modules/low'
import { setUserAndDeptName } from '@/components/LowDesign/src/utils/getName'
import { useLowStoreWithOut } from '@/store/modules/low'
const message = useMessage() // 消息弹窗
const {t} = useI18n() // 国际化
const {getCurrPermi} = useCrudPermi()
const { t } = useI18n() // 国际化
const { getCurrPermi } = useCrudPermi()
const lowStore = useLowStoreWithOut()
defineOptions({name: 'BpmTaskAssignRule'})
defineOptions({ name: 'BpmTaskAssignRule' })
const {query} = useRoute() // 查询参数
const { query } = useRoute() // 查询参数
const loading = ref(true)
const getRules = (label) => {
@@ -65,7 +65,6 @@ const getUserKey = (val) => {
else if ([20, 21].includes(val)) key = 'deptIds'
else if (val == 22) key = 'postIds'
else if ([30, 31, 32].includes(val)) key = 'userIds'
else if (val == 35) key = 'userSelects'
else if (val == 40) key = 'userGroupIds'
else if (val == 50) key = 'scripts'
return key
@@ -82,8 +81,8 @@ const tableOption = reactive({
delBtn: false,
calcHeight: 20,
column: {
taskDefinitionName: {label: '任务名', disabled: true},
taskDefinitionKey: {label: '任务标识', disabled: true},
taskDefinitionName: { label: '任务名', disabled: true },
taskDefinitionKey: { label: '任务标识', disabled: true },
type: {
label: '规则类型',
type: 'select',
@@ -91,13 +90,12 @@ const tableOption = reactive({
rules: getRules('规则类型'),
control: (val) => {
const columnObj = {
roleIds: {display: false},
deptIds: {display: false},
postIds: {display: false},
userIds: {display: false},
userGroupIds: {display: false},
scripts: {display: false},
userSelects: {display: false},
roleIds: { display: false },
deptIds: { display: false },
postIds: { display: false },
userIds: { display: false },
userGroupIds: { display: false },
scripts: { display: false }
}
const key = getUserKey(val)
if (key) columnObj[key].display = true
@@ -114,7 +112,6 @@ const tableOption = reactive({
let arr = row.options.map((id) => {
if (key == 'deptIds') return lowStore.dicObj.deptSelect?.[id] || id
else if (key == 'userIds') return lowStore.dicObj.userSelect?.[id] || id
else if (key == 'userSelects') return ''
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']
if (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
}
delKey.forEach((prop) => delete form[prop])
@@ -231,14 +228,14 @@ const getDicData = () => {
const id = item.id + ''
const name = item.name
dicObj.value[key][id] = name
return {label: name, value: id}
return { label: name, value: id }
})
})
dicObj.value.scripts = {}
tableOption.column.scripts.dicData = getIntDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_SCRIPT).map(
(item) => {
dicObj.value.scripts[item.value] = item.label
return {value: item.value + '', label: item.label}
return { value: item.value + '', label: item.label }
}
) as never[]
dicObj.value.type = {}
@@ -265,7 +262,7 @@ const formattingTableData = (data): Promise<any[]> => {
}
return item
})
await setUserAndDeptName({userIdList, deptIdList})
await setUserAndDeptName({ userIdList, deptIdList })
resolve(data)
})
}

View File

@@ -61,13 +61,6 @@ const tabsPaneList = ref([
calcHeight: 200,
fixedSearch: {file_main_type: 4}
},
{
label: '工作档案',
name: 'workArchive',
formId: '1966386366515343361',
calcHeight: 200,
fixedSearch: {file_main_type: 5}
},
])
// 定义点击tab的事件动作

View File

@@ -41,7 +41,7 @@
>
<template #menu-left="{ size }">
<el-button type="primary" :size="size" @click="menuLeftHandle('aiCreated')">
<Icon :size="14" icon="jam:magic-f"/>
<Icon :size="14" icon="jam:magic-f" />
<span class="ml-3px!">AI建表</span>
</el-button>
<el-button
@@ -51,12 +51,12 @@
@click="menuLeftHandle('btn')"
class="mr-10px"
>
<Icon :size="14" icon="teenyicons:button-outline"/>
<Icon :size="14" icon="teenyicons:button-outline" />
<span class="ml-3px!">自定义按钮</span>
</el-button>
<el-dropdown @command="menuLeftHandle" v-hasPermi="['jeelowcode:web']">
<el-button type="primary" :size="size">
<Icon :size="14" icon="teenyicons:webpack-outline"/>
<Icon :size="14" icon="teenyicons:webpack-outline" />
<span class="ml-3px!">前端增强</span>
</el-button>
<template #dropdown>
@@ -74,7 +74,7 @@
@click="menuLeftHandle('sql')"
v-hasPermi="['jeelowcode:sql']"
>
<Icon :size="14" icon="devicon-plain:sqldeveloper"/>
<Icon :size="14" icon="devicon-plain:sqldeveloper" />
<span class="ml-3px!">SQL增强</span>
</el-button>
<el-button
@@ -83,20 +83,9 @@
@click="menuLeftHandle('java')"
v-hasPermi="['jeelowcode:java']"
>
<Icon :size="14" icon="hugeicons:java"/>
<Icon :size="14" icon="hugeicons:java" />
<span class="ml-3px!">JAVA增强</span>
</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 #menu="{ size, row }">
<div class="flex justify-center flex-items-center">
@@ -118,7 +107,7 @@
<div class="mt--2px cursor-pointer">
<el-text :size="size" type="primary">
更多
<Icon :size="16" icon="iconamoon:arrow-down-2-light"/>
<Icon :size="16" icon="iconamoon:arrow-down-2-light" />
</el-text>
</div>
<template #dropdown>
@@ -201,8 +190,7 @@
@click="openDataOrigin"
:disabled="!tableForm.dataOrigin"
>
<Icon :size="14" icon="lucide:text-search"></Icon>
<span>数据源SQL配置</span>
<Icon :size="14" icon="lucide:text-search"></Icon> <span>数据源SQL配置</span>
</el-button>
<el-button
type="primary"
@@ -223,12 +211,10 @@
<span>表格扩展配置</span>
</el-button>
<el-button @click="sortPopup = true">
<Icon :size="14" icon="mdi:sort"></Icon>
<span>默认排序</span>
<Icon :size="14" icon="mdi:sort"></Icon> <span>默认排序</span>
</el-button>
<el-button @click="searchPopup = true">
<Icon :size="14" icon="lucide:text-search"></Icon>
<span>默认搜索</span>
<Icon :size="14" icon="lucide:text-search"></Icon> <span>默认搜索</span>
</el-button>
</div>
</template>
@@ -314,7 +300,7 @@
</template>
<template #optionCondition="{ row }">
<template v-for="item in row.optionCondition" :key="item.key">
<el-tag v-if="item.value !== 0" size="small"> {{ item.label }}{{ item.value }}</el-tag>
<el-tag v-if="item.value !== 0" size="small"> {{ item.label }}{{ item.value }} </el-tag>
</template>
</template>
</avue-crud>
@@ -431,8 +417,7 @@
size="small"
type="primary"
@click="copySampleStr(key)"
>点击复制
</el-button
>点击复制</el-button
>
</div>
</div>
@@ -477,32 +462,32 @@ import {
DataOriginOption,
AuthConfig
} from './components'
import {TipView} from '../general/components/index'
import { TipView } from '../general/components/index'
import * as TableApi from '@/api/design/table'
import * as JsApi from '@/api/design/table/jsEnhance'
import {dicObj, pageOption, tableInfoOption} from './designData'
import {scssEnhanceExample, controlInitExample} from '@/components/LowDesign/src/utils/example'
import {formattingLengStr} from '@/utils/lowDesign'
import { dicObj, pageOption, tableInfoOption } from './designData'
import { scssEnhanceExample, controlInitExample } from '@/components/LowDesign/src/utils/example'
import { formattingLengStr } from '@/utils/lowDesign'
import controlPath from '@/components/LowDesign/src/controlPath'
import useMEDialog from '@/hooks/design/useMEDialog'
import useCopyText from '@/hooks/design/useCopyText'
import {ElButton, ElLoading} from 'element-plus'
import {cloneDeep} from 'lodash-es'
import {useRenderVxeColumn} from '../general/components/useRenderVxeColumn'
import {useGroup} from '@/hooks/design/useGroup'
import {checkPermi} from '@/utils/permission'
import {ElMessage} from 'element-plus'
import { ElButton, ElLoading } from 'element-plus'
import { cloneDeep } from 'lodash-es'
import { useRenderVxeColumn } from '../general/components/useRenderVxeColumn'
import { useGroup } from '@/hooks/design/useGroup'
import { checkPermi } from '@/utils/permission'
import { ElMessage } from 'element-plus'
defineOptions({name: 'TableDesign'})
defineOptions({ name: 'TableDesign' })
const {MEDialog, MEData, openMEDialog} = useMEDialog()
const {copyText} = useCopyText()
const { MEDialog, MEData, openMEDialog } = useMEDialog()
const { copyText } = useCopyText()
useRenderVxeColumn()
const message = useMessage() // 消息弹窗
const router = useRouter() // 路由
const {t} = useI18n() // 国际化
const {getCurrPermi} = useCrudPermi()
const { t } = useI18n() // 国际化
const { getCurrPermi } = useCrudPermi()
const loading = ref(true) // 列表的加载中
const saveLoading = ref(false)
@@ -570,7 +555,7 @@ const authPopup = ref({
show: false,
vBind: {}
})
const aiCreatedObj = ref({popup: false, loading: false, describe: '', timer: null as any})
const aiCreatedObj = ref({ popup: false, loading: false, describe: '', timer: null as any })
const basicPopup = ref({
show: false,
@@ -595,9 +580,9 @@ const samplePopup = ref(false)
const permission = getCurrPermi(['jeelowcode:dbform'])
const tableConfigList = [
{label: '表格选择', prop: 'tableSelect', valClass: 'w-75px!'},
{label: '搜索样式', prop: 'searchStyle', valClass: 'w-100px!'},
{label: '操作栏样式', prop: 'operateMenuStyle', labelWidth: '90px', valClass: 'w-100px!'},
{ label: '表格选择', prop: 'tableSelect', valClass: 'w-75px!' },
{ label: '搜索样式', prop: 'searchStyle', valClass: 'w-100px!' },
{ label: '操作栏样式', prop: 'operateMenuStyle', labelWidth: '90px', valClass: 'w-100px!' },
{
label: '操作栏最大横排数',
prop: 'maxMenuNum',
@@ -613,7 +598,7 @@ const tableConfigList = [
showKey: 'tableType',
showVal: 1,
valClass: 'w-114px!',
changeFun: ({value}) => {
changeFun: ({ value }) => {
let dicData = cloneDeep(dicObj.tableConfig)
if (value == 'card') {
dicData = dicData.filter(
@@ -647,8 +632,8 @@ const tableConfigList = [
showVal: 'expand',
valClass: 'w-90px!'
},
{label: '树表样式', prop: 'treeStyle', showKey: 'tableType', showVal: 2},
{label: '树表模式', prop: 'treeMode', showKey: 'tableType', showVal: 2}
{ label: '树表样式', prop: 'treeStyle', showKey: 'tableType', showVal: 2 },
{ label: '树表模式', prop: 'treeMode', showKey: 'tableType', showVal: 2 }
]
const menuMoreList = [
@@ -657,14 +642,14 @@ const menuMoreList = [
type: 'sync',
isShow: (row) => row.isDbSync == 'N' && checkPermi(['jeelowcode:dbform:sync'])
},
{label: '功能测试', type: 'test'},
{label: '路由地址', type: 'address'},
{label: '接口地址', type: 'apiUrl'},
{label: '租户权限配置', type: 'auth'},
{label: '复制表', type: 'copy', isShow: () => checkPermi(['jeelowcode:dbform:create'])},
{label: 'js增强解锁', type: 'jsUnlock', isShow: () => checkPermi(['jeelowcode:web'])},
{label: 'scss增强解锁', type: 'scssUnlock', isShow: () => checkPermi(['jeelowcode:web'])},
{label: '删除', type: 'del', isShow: () => checkPermi(['jeelowcode:dbform:delete'])}
{ label: '功能测试', type: 'test' },
{ label: '路由地址', type: 'address' },
{ label: '接口地址', type: 'apiUrl' },
{ label: '租户权限配置', type: 'auth' },
{ label: '复制表', type: 'copy', isShow: () => checkPermi(['jeelowcode:dbform:create']) },
{ label: 'js增强解锁', type: 'jsUnlock', isShow: () => checkPermi(['jeelowcode:web']) },
{ label: 'scss增强解锁', type: 'scssUnlock', isShow: () => checkPermi(['jeelowcode:web']) },
{ label: '删除', type: 'del', isShow: () => checkPermi(['jeelowcode:dbform:delete']) }
]
useCrudHeight(crudRef)
@@ -762,8 +747,8 @@ const tableFormVerify = (type) => {
customFormRef.value.validate((bool, done, msg) => {
done()
if (!bool) return reject(msg)
const {tableName, tableType, tableClassify} = tableForm.value
const subTable = {bool: true, len: 0}
const { tableName, tableType, tableClassify } = tableForm.value
const subTable = { bool: true, len: 0 }
if (tableClassify == 2 && tableName && tableName.indexOf('view_') != 0) {
message.warning('视图表的表名请以 view_ 开头')
return reject('message')
@@ -828,7 +813,7 @@ const tableFormVerify = (type) => {
if (messageText) {
handleVerifyError(tabKey, item._X_ROW_KEY, index)
ElMessage({dangerouslyUseHTMLString: true, message: messageText})
ElMessage({ dangerouslyUseHTMLString: true, message: messageText })
errText = 'message'
break
}
@@ -861,7 +846,7 @@ const tableFormVerify = (type) => {
: ''
}
if (key == 'summaryList') {
const {sqlType, sqlValue} = item.summaryJson
const { sqlType, sqlValue } = item.summaryJson
itemObj.summaryType = 'bottom'
itemObj.summarySql = sqlType == 'custom' ? sqlValue : sqlType
itemObj.summaryJson = JSON.stringify(item.summaryJson)
@@ -942,7 +927,7 @@ const contrastEditData = (infoData) => {
for (const k in item) {
if (item[k] != contrastObj[k]) {
item.isModify = 'Y'
break
break
}
}
}
@@ -953,7 +938,7 @@ const contrastEditData = (infoData) => {
}
const setApiDetailData = (data) => {
apiDetailData.value = {delIdVo: {}}
apiDetailData.value = { delIdVo: {} }
for (const key in data) {
let listKey = key
if (['summaryBottomList', 'summaryTopList'].includes(listKey)) listKey = 'summaryList'
@@ -1005,9 +990,9 @@ const menuLeftHandle = (type) => {
if (aiCreatedObj.value.timer) clearInterval(aiCreatedObj.value.timer)
}
}
const menuHandle = async ({type, row, index}) => {
const menuHandle = async ({ type, row, index }) => {
if (type == 'edit') crudRef.value.rowEdit(row, index)
else if (type == 'test') router.push({path: '/low/table/test/' + row.id})
else if (type == 'test') router.push({ path: '/low/table/test/' + row.id })
else if (type == 'sync') syncDbTable(row)
else if (type == 'address') showAddress(row)
else if (type == 'apiUrl') showApiUrl(row)
@@ -1017,7 +1002,7 @@ const menuHandle = async ({type, row, index}) => {
else if (type == 'auth') {
authPopup.value = {
show: true,
vBind: {dbformId: row.id, tableName: row.tableName, tableDescribe: row.tableDescribe}
vBind: { dbformId: row.id, tableName: row.tableName, tableDescribe: row.tableDescribe }
}
}
}
@@ -1029,7 +1014,7 @@ const syncDbTable = (row) => {
title: '同步数据库',
width: '400px',
isCenter: true,
dialogParams: {alignCenter: true},
dialogParams: { alignCenter: true },
footerBtn: [
{
name: '取 消',
@@ -1038,7 +1023,7 @@ const syncDbTable = (row) => {
{
name: '确 定',
loading: true,
params: {type: 'primary'},
params: { type: 'primary' },
clickFun: async (done) => {
if (syncData.value.value == 'force') {
await message.prompt(
@@ -1101,7 +1086,7 @@ const showApiUrl = async (row) => {
value: `/jeelowcode/${isOpen ? 'open' : 'dbform-data'}/save/batch/${row.id}`,
tipText: '接口参数格式data:[ { 新增的数据... },{ ... } ]'
},
{label: '编辑数据[put]', value: `/jeelowcode/dbform-data/edit/${row.id}`},
{ label: '编辑数据[put]', value: `/jeelowcode/dbform-data/edit/${row.id}` },
{
label: '批量编辑数据[put]',
value: `/jeelowcode/dbform-data/edit/batch/${row.id}`,
@@ -1122,19 +1107,19 @@ const showApiUrl = async (row) => {
let list: VNode[] = []
apiList.forEach((item) => {
list.push(
h('div', {style: {marginBottom: '10px', border: ' 1px solid #eee', padding: '10px'}}, [
h('div', { style: { marginBottom: '10px', border: ' 1px solid #eee', padding: '10px' } }, [
h('div', [
h('span', {style: {fontWeight: 600, fontSize: '14px'}}, item.label + ''),
h('span', { style: { fontWeight: 600, fontSize: '14px' } }, item.label + ''),
h(
ElButton,
{size: 'small', type: 'primary', onClick: () => copyText(item.value)},
{ size: 'small', type: 'primary', onClick: () => copyText(item.value) },
() => '复制'
)
]),
h('div', {style: {fontSize: '12px'}}, item.value),
h('div', { style: { fontSize: '12px' } }, item.value),
h(
'div',
{style: {display: !!item.tipText, fontSize: '12px', color: '#E6A23C'}},
{ style: { display: !!item.tipText, fontSize: '12px', color: '#E6A23C' } },
item.tipText
)
])
@@ -1142,11 +1127,11 @@ const showApiUrl = async (row) => {
})
message.alert('', '接口地址', {
message: () => {
return h('div', {width: '360px'}, list)
return h('div', { width: '360px' }, list)
},
confirmButtonText: '关闭',
dangerouslyUseHTMLString: true,
customStyle: {width: '384px'}
customStyle: { width: '384px' }
})
}
const copyDbTable = (row) => {
@@ -1161,7 +1146,7 @@ const copyDbTable = (row) => {
if (!RExp.test(value)) return '表名只能使用小写字母、数字、下划线,并以字母开头'
}
})
.then(async ({value}) => {
.then(async ({ value }) => {
loading.value = true
const bool = await TableApi.verifyDbName(value)
if (bool) {
@@ -1184,7 +1169,7 @@ const unlockEnhance = (type, row) => {
const openWebEnhance = async (enhanceType) => {
loading.value = true
jsEnhanceData.value = {jsJson: ''}
jsEnhanceData.value = { jsJson: '' }
const dbformId = tableSelect.value[0].id
const detailData = await JsApi.getJsDetail({
dbformId,
@@ -1232,7 +1217,7 @@ const openWebEnhance = async (enhanceType) => {
},
footerBtn: [
{
params: {type: 'primary'},
params: { type: 'primary' },
name: '保 存',
icon: 'mingcute:save-line',
loading: true,
@@ -1243,7 +1228,7 @@ const openWebEnhance = async (enhanceType) => {
}
},
{
params: {type: 'success'},
params: { type: 'success' },
name: '保存并关闭',
icon: 'mingcute:save-line',
loading: true,
@@ -1272,11 +1257,11 @@ const openWebEnhance = async (enhanceType) => {
}
if (enhanceType == 'js') {
params['providerType'] = 'tableJsEnhance'
params['otherParams'] = {type: 'simple', width: '300px', tipKeyList: ['TableJsEnhance']}
params['otherParams'] = { type: 'simple', width: '300px', tipKeyList: ['TableJsEnhance'] }
params['language'] = 'javascript'
params['headerBtn'] = [
{
params: {type: 'success'},
params: { type: 'success' },
name: '控件使用示例',
icon: 'jam:code-sample',
clickFun: async () => (samplePopup.value = true)
@@ -1294,7 +1279,7 @@ const openWebEnhance = async (enhanceType) => {
}
}
openMEDialog({params, prop: 'jsJson'}, jsEnhanceData.value)
openMEDialog({ params, prop: 'jsJson' }, jsEnhanceData.value)
isUnload.value = true
}
const handleWebEnhance = (dbformId, enhanceType) => {
@@ -1316,16 +1301,16 @@ const handleWebEnhance = (dbformId, enhanceType) => {
})
}
const cellStyle = ({row, columnIndex}) => {
const cellStyle = ({ row, columnIndex }) => {
if (columnIndex == 6) {
return {color: row.isDbSync == 'Y' ? '#67C23A' : '#F56C6C'}
return { color: row.isDbSync == 'Y' ? '#67C23A' : '#F56C6C' }
}
if (columnIndex == 5) {
let color = ''
if (row.tableClassify == 1) color = '#409EFF'
else if (row.tableClassify == 2) color = '#909399'
else if (row.tableClassify == 3) color = '#E6A23C'
return {color}
return { color }
}
}
@@ -1342,7 +1327,7 @@ const radioClick = (row) => {
const setTreeLabelDicData = (dicData) => {
if (dicData.length == 0) {
dicData = [{label: '请先添加字段', value: 'low', disabled: true}]
dicData = [{ label: '请先添加字段', value: 'low', disabled: true }]
}
customFormRef.value.updateDic('treeLabelField', dicData)
}
@@ -1369,7 +1354,7 @@ const openDataOrigin = () => {
})
const filedData = [...tableInfoRef.value.infoData.basics, ...tableInfoRef.value.tableInfoDefault]
dataOriginPopup.value.viewField = filedData.map((item) => {
return {label: item.fieldName, value: item.fieldCode}
return { label: item.fieldName, value: item.fieldCode }
})
dataOriginPopup.value.show = true
}
@@ -1406,14 +1391,14 @@ const analysisDataOrigin = async () => {
return item
})
}
let {infoData} = tableInfoOption.formattingInitData(analysisData)
let { infoData } = tableInfoOption.formattingInitData(analysisData)
infoData = infoData.map((item) => {
for (const key in item) {
if (item[key] === null || item[key] === undefined || key == 'fieldList_id') {
delete item[key]
}
}
return {...cloneDeep(tableInfoOption.infoDefaultData.basics), ...item}
return { ...cloneDeep(tableInfoOption.infoDefaultData.basics), ...item }
})
setInfoBasics(infoData)
message.success('解析成功')
@@ -1437,11 +1422,11 @@ const getSqlFormConfig = async () => {
(item) => !tableInfoOption.disabledArr.includes(item.fieldCode) || item.fieldCode == 'pid'
)
fieldList = fieldList.map((item) => {
return {...cloneDeep(tableInfoOption.infoDefaultData.basics), ...item}
return { ...cloneDeep(tableInfoOption.infoDefaultData.basics), ...item }
})
setInfoBasics(fieldList)
message.success('生成成功')
let {tableName} = customFormOption.value.column
let { tableName } = customFormOption.value.column
tableName['disabled'] = true
})
.finally(() => (sqlFormLoading.value = false))
@@ -1472,7 +1457,7 @@ const handleAiCreatedTable = async () => {
(item) => !tableInfoOption.disabledArr.includes(item.fieldCode) || item.fieldCode == 'pid'
)
data.fieldModelList = data.fieldModelList.map((item) => {
return {...cloneDeep(tableInfoOption.infoDefaultData.basics), ...item}
return { ...cloneDeep(tableInfoOption.infoDefaultData.basics), ...item }
})
aiCreatedObj.value.popup = false
crudRef.value.rowAdd()
@@ -1514,7 +1499,7 @@ const getTableData = async () => {
if (typeof item[key] == 'number') {
let val: number | string = item[key]
if (['jsCou', 'scssCou'].includes(key)) val = val > 0 ? '√' : val
item.optionCondition.push({label: couKey[key], value: val, key})
item.optionCondition.push({ label: couKey[key], value: val, key })
}
}
return item
@@ -1539,8 +1524,7 @@ const searchChange = (params, done) => {
/** 清空按钮操作 */
const resetChange = () => {
searchChange({}, () => {
})
searchChange({}, () => {})
}
const sizeChange = (pageSize) => {
@@ -1558,7 +1542,7 @@ const beforeOpen = async (done, type) => {
isTableInfo.value = false
const groupData = cloneDeep(treeData.value)
customFormOption.value.column.groupDbformId.dicData = groupData[0].children
const {tableName, subTableListStr} = customFormOption.value.column
const { tableName, subTableListStr } = customFormOption.value.column
if (['edit', 'view'].includes(type) && tableForm.value.id) {
loading.value = true
const data = await TableApi.getDbDetail(tableForm.value.id, ['all'])
@@ -1566,7 +1550,7 @@ const beforeOpen = async (done, type) => {
data.dbForm.tableConfig = data.dbForm.tableConfig?.split(',') || []
data.dbForm.dataConfig = data.dbForm.dataConfig?.split(',') || []
editInfoData.value = data
tableForm.value = {...data.dbForm}
tableForm.value = { ...data.dbForm }
tableName['disabled'] = true
tableName['rules'] = []
subTableListStr['display'] = tableForm.value.tableType == 3 && tableForm.value.subTableListStr
@@ -1601,7 +1585,7 @@ const beforeOpen = async (done, type) => {
searchStyle: 'default'
}
tableName['disabled'] = false
tableName['rules'] = [{validator: pageOption.tableName_required, trigger: 'blur'}] as any
tableName['rules'] = [{ validator: pageOption.tableName_required, trigger: 'blur' }] as any
subTableListStr['display'] = false
if (groupValue.value) tableForm.value.groupDbformId = groupValue.value
authValue.value = ''
@@ -1664,8 +1648,8 @@ const rowSave = async (formData, done, loading) => {
const form = handleApiFormData(formData)
tableFormVerify('add')
.then(async (infoData: object) => {
const elLoading = ElLoading.service({fullscreen: true})
let bool = await TableApi.saveDbData({dbForm: {...form}, ...infoData}).catch(() => false)
const elLoading = ElLoading.service({ fullscreen: true })
let bool = await TableApi.saveDbData({ dbForm: { ...form }, ...infoData }).catch(() => false)
if (bool) {
message.success(t('common.createSuccess'))
resetChange()
@@ -1678,7 +1662,7 @@ const rowSave = async (formData, done, loading) => {
let key = Object.keys(error)[0]
message.info(error[key][0].message)
} else if (error !== 'message') {
message.alert(error, '请修改', {dangerouslyUseHTMLString: true})
message.alert(error, '请修改', { dangerouslyUseHTMLString: true })
}
loading()
})
@@ -1696,7 +1680,7 @@ const rowUpdate = async (formData, index?, done?, loading?) => {
const form = handleApiFormData(formData)
tableFormVerify('edit')
.then(async (infoData: object) => {
let bool = await TableApi.updateDbData({dbForm: {...form}, ...infoData}).catch(
let bool = await TableApi.updateDbData({ dbForm: { ...form }, ...infoData }).catch(
() => false
)
if (bool) {
@@ -1718,7 +1702,7 @@ const rowUpdate = async (formData, index?, done?, loading?) => {
let key = Object.keys(error)[0]
message.info(error[key][0].message)
} else if (error !== 'message') {
message.alert(error, '请修改', {dangerouslyUseHTMLString: true})
message.alert(error, '请修改', { dangerouslyUseHTMLString: true })
}
loading()
})
@@ -1754,35 +1738,13 @@ const rowDel = async (form) => {
message.success(t('common.delSuccess'))
// 刷新列表
await getTableData()
} catch {
}
} catch {}
}
const beforeUnload = (event) => {
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 () => {
window.addEventListener('beforeunload', beforeUnload)

File diff suppressed because it is too large Load Diff

View File

@@ -5,59 +5,32 @@
<img width="50%" src="@/assets/images/line_1.png" />
</div>
<div class="list" :style="{ maxHeight: maxHeight }">
<!-- 骨架屏 -->
<template v-if="props.loading">
<!-- 表格模式骨架屏 -->
<!-- 表格头部 -->
<div v-if="tableTitle && tableTitle.length > 0" class="table-header">
<div class="header-item" v-for="(title, index) in tableTitle" :key="index">
{{ title.name }}
</div>
</div>
<div class="list-wrapper" ref="listWrapperRef" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
<!-- 表格模式 -->
<template v-if="tableTitle && tableTitle.length > 0">
<div 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 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}`">
{{ item[title.key] || '-' }}
</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 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' }]">
{{ (index + 1) }} {{ item.description }}
</span>
</div>
</template>
</template>
<!-- 实际内容 -->
<template v-else>
<!-- 表格头部 -->
<div v-if="tableTitle && tableTitle.length > 0" class="table-header">
<div class="header-item" v-for="(title, index) in tableTitle" :key="index">
{{ title.name }}
</div>
</div>
<div class="list-wrapper" ref="listWrapperRef" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
<!-- 表格模式 -->
<template v-if="tableTitle && tableTitle.length > 0">
<div @click="handleItemClick(item)" class="table-row cursor-pointer" v-for="(item, index) in listData" :key="`table-${index}`" @mouseenter="handleMouseEnter">
<div class="table-cell" v-for="(title, cellIndex) in tableTitle" :key="`cell-${index}-${cellIndex}`">
{{ item[title.key] || '-' }}
</div>
</div>
</template>
<!-- 列表模式 -->
<template v-else>
<div @click="handleItemClick(item)" class="list-item cursor-pointer" v-for="(item, index) in listData" :key="`list-${index}`" @mouseenter="handleMouseEnter">
<span class="alert-text" :class="[{ error: item.alarm_level_code == 'severity' }, { warn: item.alarm_level_code == 'major' }]">
{{ (index + 1) }} {{ item.description }}
</span>
</div>
</template>
</div>
</template>
</div>
</div>
</div>
</template>
@@ -78,7 +51,6 @@ interface TableTitle {
}
interface Props {
loading?: boolean
title?: string
listData: AlertItem[]
maxHeight?: string
@@ -86,7 +58,6 @@ interface Props {
scrollSpeed?: number
scrollInterval?: number,
tableTitle?: TableTitle[]
linkUrl?: string
}
const props = withDefaults(defineProps<Props>(), {
@@ -101,12 +72,8 @@ const listWrapperRef = ref<HTMLElement | null>(null)
let scrollTimer: NodeJS.Timeout | null = null
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
const wrapper = listWrapperRef.value
@@ -116,38 +83,20 @@ const startAutoScroll = (resetToTop: boolean = false) => {
// 只有当内容高度超过容器高度时才启动滚动
if (scrollHeight <= clientHeight) return
// 如果是首次启动或需要重置,从顶部开始
if (resetToTop) {
wrapper.scrollTop = 0
}
isScrolling = true
let currentScrollTop = listWrapperRef.value.scrollTop
const scroll = () => {
if (!isScrolling || !wrapper) return
const currentScrollTop = wrapper.scrollTop
const maxScrollTop = scrollHeight - clientHeight
currentScrollTop += props.scrollSpeed
// 向下滚动
const nextScrollTop = currentScrollTop + props.scrollSpeed
if (nextScrollTop >= maxScrollTop) {
// 滚动到底部,瞬间跳转到顶部
// 先移除平滑滚动效果,实现瞬间跳转
const originalScrollBehavior = wrapper.style.scrollBehavior
wrapper.style.scrollBehavior = 'auto'
// 如果滚动到底部,重置到顶部
if (currentScrollTop >= scrollHeight - clientHeight) {
currentScrollTop = 0
wrapper.scrollTop = 0
// 恢复平滑滚动效果
setTimeout(() => {
wrapper.style.scrollBehavior = originalScrollBehavior || 'smooth'
}, 0)
// 短暂延迟后继续滚动
scrollTimer = setTimeout(scroll, 100)
return
} else {
wrapper.scrollTop = nextScrollTop
wrapper.scrollTop = currentScrollTop
}
scrollTimer = setTimeout(scroll, 50) // 每50ms滚动一次实现平滑效果
@@ -172,9 +121,8 @@ const handleMouseEnter = () => {
const handleMouseLeave = () => {
if (props.autoScroll) {
// 延迟启动滚动,避免鼠标快速进出
// 从当前位置继续向下滚动
setTimeout(() => {
startAutoScroll(false)
startAutoScroll()
}, 500)
}
}
@@ -185,8 +133,7 @@ watch(() => props.listData, () => {
if (props.autoScroll) {
stopAutoScroll()
setTimeout(() => {
// 数据更新后从顶部重新开始
startAutoScroll(true)
startAutoScroll()
}, 1000) // 数据更新后1秒开始滚动
}
})
@@ -194,9 +141,9 @@ watch(() => props.listData, () => {
onMounted(() => {
if (props.autoScroll) {
// 组件挂载后延迟启动滚动,从顶部开始
// 组件挂载后延迟启动滚动
setTimeout(() => {
startAutoScroll(true)
startAutoScroll()
}, 2000)
}
})
@@ -207,9 +154,6 @@ onUnmounted(() => {
</script>
<style scoped lang="scss">
.cursor-pointer {
cursor: pointer;
}
.list-content {
display: flex;
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>

View File

@@ -52,7 +52,7 @@
class="alert-text"
: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>
</div>
</div>

View File

@@ -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>

View File

@@ -1,22 +1,19 @@
<template>
<div class="center-container" :data-window-width="windowWidth">
<div class="center-container">
<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" />
<span class="sub-title">隐患等级</span>
<span class="sub-title">分类风险</span>
<img width="50%" src="@/assets/images/line_1.png" />
<div class="type-wrapper">
<div class="type-item">
<span class="type-btn">重大</span>
<div style="width: 20px; height: 20px" v-if="props.loading" class="type-num skeleton-pulse"></div>
<span v-else class="type-num cursor-pointer" @click="handleMajorClick">{{ hiddenDangerData?.major || 0 }}</span>
<span class="type-num">{{ hiddenDangerData?.major || 0 }}</span>
</div>
<div class="type-item">
<span class="type-btn active">一般</span>
<div style="width: 20px; height: 20px" v-if="props.loading" class="type-num skeleton-pulse"></div>
<span v-else class="type-num cursor-pointer" @click="handleMajorClick">{{ hiddenDangerData?.general || 0 }}</span>
<span class="type-num">{{ hiddenDangerData?.general || 0 }}</span>
</div>
</div>
@@ -32,8 +29,7 @@
</div>
<div class="echart-wrapper">
<div class="lf-rt">
<div v-if="props.loading" class="skeleton-chart-circle skeleton-pulse"></div>
<Echart v-else :options="progressChartOption" class="progress-chart" height="80%" />
<Echart :options="progressChartOption" class="progress-chart" height="80%" />
<div class="progress-legend">
<div class="legend-item"><span class="dot red"></span>已逾期</div>
<div class="legend-item"><span class="dot green"></span>已处理</div>
@@ -44,45 +40,39 @@
</div>
</div>
<div class="lf-rt">
<div v-if="props.loading" class="skeleton-chart-circle skeleton-pulse"></div>
<Echart v-else :options="top3TypesChartOption" class="progress-chart" height="80%" />
<Echart :options="top3TypesChartOption" class="progress-chart" height="80%" />
<div class="progress-legend-column">
<div class="legend-item">
<span class="dot blue"></span>
<span class="legend-text" :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 class="legend-item">
<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 class="legend-item">
<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 class="safe-wrapper">
<span class="safe-title">
<img class="safe-icon" src="@/assets/images/ybp_icon.png" />
<span class="safe-title-text">安全指数:</span>
<p class="safe-tooltip" title="安全指数 = (1-逾期隐患百分比) × 40% + 安全考核通过率 × 10% + 安全培训完成率 × 10%
+ 安全类工单完成率 × 20% + 工程类工单完成率 × 20%"></p>
<img width="22" style="margin: 3px 5px 0 0" src="@/assets/images/ybp_icon.png" />
安全指数:
</span>
<span v-if="props.loading" class="pending-count skeleton-pulse"></span>
<span v-else class="pending-count">{{ hiddenDangerData?.safetyIndex || 0 }}</span>
<span class="pending-count">{{ hiddenDangerData?.safetyIndex || 0 }}</span>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
import echarts from '@/plugins/echarts'
import { ref, onMounted, watch } from 'vue'
interface Props {
loading?: boolean
hiddenDangerData?: {
general: number
major: number
@@ -103,124 +93,8 @@ interface Props {
const props = defineProps<Props>()
// 窗口尺寸响应式变量,用于强制响应式更新
const windowWidth = ref(window.innerWidth)
const windowHeight = ref(window.innerHeight)
// 防抖函数
let resizeTimer: ReturnType<typeof setTimeout> | null = null
// 手动触发 ECharts 图表 resize
const resizeEcharts = () => {
nextTick(() => {
// 查找所有 ECharts 容器并触发 resize
// Echart 组件会在内部创建 divclass 包含 progress-chart
const chartContainers = document.querySelectorAll('.center-container .progress-chart')
chartContainers.forEach((container) => {
try {
const chartInstance = echarts.getInstanceByDom(container as HTMLElement)
if (chartInstance) {
chartInstance.resize()
}
} catch (error) {
console.warn('ECharts resize 失败:', error)
}
})
// 如果上面的选择器找不到,尝试更通用的方式
if (chartContainers.length === 0) {
const allContainers = document.querySelectorAll('.center-container [class*="echart"]')
allContainers.forEach((container) => {
try {
const chartInstance = echarts.getInstanceByDom(container as HTMLElement)
if (chartInstance) {
chartInstance.resize()
}
} catch (error) {
// 忽略错误
}
})
}
})
}
// 监听窗口尺寸变化
const handleResize = () => {
// 立即更新窗口尺寸(用于响应式绑定)
windowWidth.value = window.innerWidth
windowHeight.value = window.innerHeight
// 立即触发一次 ECharts resize快速响应
resizeEcharts()
// 清除之前的定时器
if (resizeTimer) {
clearTimeout(resizeTimer)
}
// 使用防抖,延迟执行样式重新计算(优化性能)
resizeTimer = setTimeout(() => {
// 强制触发样式重新计算 - 通过读取 offsetHeight 触发重排
const container = document.querySelector('.center-container') as HTMLElement
if (container) {
// 触发重排,强制浏览器重新计算样式
void container.offsetHeight
}
// 再次触发 ECharts resize确保完全更新
resizeEcharts()
}, 100) // 100ms 防抖延迟
}
// 全屏切换处理函数(立即执行,不使用防抖)
const handleFullscreenChange = () => {
// 立即更新窗口尺寸
windowWidth.value = window.innerWidth
windowHeight.value = window.innerHeight
// 延迟一点确保 DOM 已更新
setTimeout(() => {
resizeEcharts()
// 强制触发样式重新计算
const container = document.querySelector('.center-container') as HTMLElement
if (container) {
void container.offsetHeight
}
}, 150) // 稍微延迟确保全屏切换完成
}
onMounted(() => {
window.addEventListener('resize', handleResize)
// 监听全屏变化 - 立即执行,不使用防抖
document.addEventListener('fullscreenchange', handleFullscreenChange)
document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
document.addEventListener('mozfullscreenchange', handleFullscreenChange)
document.addEventListener('MSFullscreenChange', handleFullscreenChange)
// 组件挂载时,如果已有数据,立即更新图表
if (props.hiddenDangerData?.progress) {
console.log('onMounted: 初始化图表数据', props.hiddenDangerData.progress)
refreshProcessCharts(props.hiddenDangerData.progress)
}
})
onUnmounted(() => {
if (resizeTimer) {
clearTimeout(resizeTimer)
}
window.removeEventListener('resize', handleResize)
document.removeEventListener('fullscreenchange', handleFullscreenChange)
document.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
document.removeEventListener('mozfullscreenchange', handleFullscreenChange)
document.removeEventListener('MSFullscreenChange', handleFullscreenChange)
})
// 图表引用
const progressChartOption = ref<any>({
backgroundColor: 'transparent',
tooltip: {
show: true,
trigger: 'item',
formatter: '{b}: {c}%'
},
series: [
{
type: 'pie' as const,
@@ -231,7 +105,6 @@ const progressChartOption = ref<any>({
bottom: 0,
data: [],
label: {
show: true,
alignTo: 'edge' as const,
formatter: '{time|{c} %}\n',
minMargin: 5,
@@ -245,7 +118,6 @@ const progressChartOption = ref<any>({
}
},
labelLine: {
show: true,
length: 5,
length2: 0,
maxSurfaceAngle: 10
@@ -316,107 +188,31 @@ const top3TypesChartOption = ref<any>({
]
})
const handleMajorClick = () => {
window.open('http://10.0.64.20/pms/workorder-list', '_blank')
}
// 辅助函数:安全地将值转换为数字,处理 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
}
watch(() => props.hiddenDangerData?.progress, (newVal) => {
refreshProcessCharts(newVal)
}, { deep: true })
// 更新图表数据
const refreshProcessCharts = (process): void => {
if (!process) {
if (!props.hiddenDangerData?.progress) {
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
}
const overdue = safeNumber(process.overdue)
const processed = safeNumber(process.processed)
const processing = safeNumber(process.processing)
console.log('refreshProcessCharts 数据:', { overdue, processed, processing })
// 创建新的配置对象,确保 Vue 能检测到变化
const option = {
backgroundColor: 'transparent',
tooltip: {
show: true,
trigger: 'item',
formatter: '{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
};
},
}
]
}
console.log('更新后的图表数据:', option.series[0].data)
// 更新图表配置
const option = { ...progressChartOption.value }
option.series[0].data = [
{ value: process.overdue || 0, name: '已逾期', itemStyle: { color: '#ef4444' } },
{ value: process.processed || 0, name: '已处理', itemStyle: { color: '#10b981' } },
// { value: process.pending || 0, name: '待排查', itemStyle: { color: '#eab308' } },
{ value: process.processing || 0, name: '处理中', itemStyle: { color: '#3b82f6' } }
]
progressChartOption.value = option
// 更新 key 以强制重新渲染(可选,通常不需要)
// chartKey.value = Date.now()
}
watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
refreshTop3TypesCharts(newVal)
}, { deep: true })
// 更新图表数据
const refreshTop3TypesCharts = (top3Types): void => {
if (!top3Types || !Array.isArray(top3Types) || top3Types.length === 0) {
@@ -438,54 +234,21 @@ const refreshTop3TypesCharts = (top3Types): void => {
top3TypesChartOption.value = option
}
watch(() => props.hiddenDangerData?.progress, (newVal, oldVal) => {
console.log('HiddenDangerPanel watch 触发progress 数据:', newVal, '旧数据:', oldVal)
// 确保每次数据变化都更新图表
if (newVal) {
refreshProcessCharts(newVal)
} else {
// 即使数据为空,也要显示空图表
refreshProcessCharts(null)
}
}, { deep: true, immediate: true })
onMounted(() => {
watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
refreshTop3TypesCharts(newVal)
}, { deep: true })
})
</script>
<style scoped lang="scss">
/* 响应式设计 */
@media (max-width: 1200px) {
@media (width <=1200px) {
.center-container {
width: 60vh;
height: 60vh;
.center-content {
.echart-wrapper {
.lf-rt {
.progress-legend-column {
padding: 0 4px;
.legend-item {
.legend-text {
font-size: 0.68rem;
}
}
}
}
}
.safe-wrapper {
.safe-title {
font-size: 0.75rem;
}
}
}
}
}
@media (max-width: 1024px) {
@media (width <=1024px) {
.center-container {
width: 55vh;
height: 55vh;
@@ -507,34 +270,11 @@ watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
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 {
top: 60%;
width: 50vh;
@@ -578,45 +318,16 @@ watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
.echart-wrapper {
width: 90%;
.lf-rt {
.progress-legend .legend-item {
font-size: 0.6rem;
}
.progress-legend-column {
padding: 0 2px;
.legend-item {
gap: 3px;
.legend-text {
font-size: 0.6rem;
}
}
}
.lf-rt .progress-legend .legend-item {
font-size: 0.6rem;
}
}
.safe-wrapper {
width: 50%;
flex-direction: column;
gap: 0.5vh;
.safe-title {
font-size: 0.7rem;
margin-left: 0;
justify-content: center;
.safe-icon {
width: 18px;
height: 18px;
margin: 2px 3px 0 0;
}
.safe-tooltip {
width: 15px;
height: 15px;
}
}
.pending-count {
@@ -627,7 +338,7 @@ watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
}
}
@media (max-width: 480px) {
@media (width <=480px) {
.center-container {
top: 65%;
width: 45vh;
@@ -654,43 +365,13 @@ watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
.echart-wrapper {
width: 95%;
.lf-rt {
.progress-legend-column {
padding: 0 1px;
gap: 6px;
.legend-item {
gap: 2px;
.legend-text {
font-size: 0.55rem;
}
}
}
}
}
.safe-wrapper {
width: 60%;
flex-direction: column;
gap: 0.3vh;
.safe-title {
font-size: 0.65rem;
margin-left: 0;
justify-content: center;
.safe-icon {
width: 16px;
height: 16px;
margin: 2px 2px 0 0;
}
.safe-tooltip {
width: 14px;
height: 14px;
}
}
.pending-count {
@@ -700,11 +381,7 @@ watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
}
}
}
.safe-tooltip:before {
content: '?';
color: yellow;
font-weight: bold;
}
.center-container {
position: fixed;
top: 55%;
@@ -724,7 +401,7 @@ watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
display: flex;
width: 77%;
height: 77%;
// overflow: hidden;
overflow: hidden;
border-radius: 50%;
align-items: center;
flex-direction: column;
@@ -836,19 +513,14 @@ watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
flex-direction: column;
display: flex;
justify-content: center;
align-items: flex-start;
align-items: center;
gap: 8px;
width: 100%;
padding: 0 5px;
box-sizing: border-box;
.legend-item {
display: flex;
width: 100%;
max-width: 100%;
width: 60%;
align-items: center;
gap: 4px;
min-width: 0; // 允许 flex 子元素收缩
.legend-text {
overflow: hidden;
@@ -856,7 +528,6 @@ watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0; // 关键:允许文本收缩
}
}
}
@@ -866,47 +537,15 @@ watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
.safe-wrapper {
display: flex;
width: 40%;
min-width: 0; // 允许收缩
height: 20%;
margin-bottom: 5%;
align-items: center;
column-gap: 1vw;
flex-wrap: wrap; // 允许换行
justify-content: center;
.safe-title {
display: flex;
align-items: center;
margin-left: 1vw;
flex-wrap: wrap;
gap: 2px;
min-width: 0;
flex: 1;
max-width: 100%;
.safe-icon {
width: 22px;
height: 22px;
margin: 3px 5px 0 0;
flex-shrink: 0;
}
.safe-title-text {
white-space: nowrap;
flex-shrink: 0;
}
.safe-tooltip {
width: 17px;
height: 17px;
background-color: rgb(125, 125, 152);
border-radius: 50%;
text-align: center;
flex-shrink: 0;
margin: 0;
padding: 0;
display: inline-block;
}
}
.pending-count {
@@ -914,7 +553,6 @@ watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
font-size: 1.6rem;
font-weight: 500;
color: yellow;
flex-shrink: 0;
}
}
}
@@ -942,32 +580,4 @@ watch(() => props.hiddenDangerData?.top3Types, (newVal) => {
.dot.blue {
background-color: #3b82f6;
}
// 骨架屏动画
.skeleton-pulse {
animation: skeleton-loading-hiddendanger 1.5s ease-in-out infinite;
background-color: #444;
border-radius: 4px;
}
// 圆形饼图骨架屏
.skeleton-chart-circle {
width: 120px;
height: 120px;
border-radius: 50%;
margin: 30px auto 50px auto;
background-color: #444;
}
@keyframes skeleton-loading-hiddendanger {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
</style>

View File

@@ -4,37 +4,29 @@
<div>
<img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
</div>
<!-- 骨架屏 -->
<!-- 实际内容 -->
<div class="tip-container">
<div class="tip-image">
<img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
<div v-if="props.loading" style="width: 20px; height: 20px;" class="number skeleton-pulse"></div>
<span v-else class="number">{{ alertData?.total || 0 }}</span>
<span class="number">{{ alertData?.total || 0 }}</span>
</div>
<img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
<div class="tip-content">
<div class="col-item">
<img src="@/assets/images/screen/warning_img.png" width="23" />
<span>告警总数</span>
<div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.total || 0 }}</span>
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.total || 0 }}</span>
</div>
<div class="col-item">
<span>已处理</span>
<div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: greenyellow;">{{ alertData?.processed || 0 }}</span>
<span style="font-size: 1.2rem; marker-start: 2vw; color: greenyellow;">{{ alertData?.processed || 0 }}</span>
</div>
<div class="col-item" style="display: flex; margin-left: 1vw; align-items: center;">
<span>待处理</span>
<div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.pending || 0 }}</span>
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.pending || 0 }}</span>
</div>
<div class="col-item" style="display: flex; margin-left: 1vw; align-items: center;">
<span>处理中</span>
<div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.processing }}</span>
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ alertData?.processing }}</span>
</div>
</div>
</div>
@@ -53,7 +45,7 @@
</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>
</template>
@@ -80,8 +72,6 @@ interface Props {
alertData?: AlertData
alertDetails?: AlertItem[]
sourceIndex?: number
linkUrl?: string
loading?: boolean
}
// 默认值
@@ -93,8 +83,7 @@ const props = withDefaults(defineProps<Props>(), {
processing: 0
}),
alertDetails: () => [],
sourceIndex: 1,
loading: false
sourceIndex: 1
})
</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>

View File

@@ -3,34 +3,7 @@
<div class="panel-title">人员管理</div>
<img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
<!-- 骨架屏 -->
<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">
<div class="top-card-left">
<div>
<img width="33px" src="@/assets/images/1_224520_821.png" />
@@ -46,11 +19,9 @@
<div class="top-card-right">
<div class="top-card-right-item">
<div>
<img width="18px" src="@/assets/images/v2_rel0n8.png" />
<span>正式员工</span>
</div>
<div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
<img width="18px" src="@/assets/images/v2_rel0n8.png" />
<span>正式员工</span>
<div class="type-number-wrapper" style="margin-left: 2vw">
<span class="type-number" v-for="(digit, index) in formalEmployeeDigits" :key="index">
{{ digit }}
</span>
@@ -59,11 +30,9 @@
</div>
<div class="top-card-right-item">
<div>
<img width="18px" src="@/assets/images/v2_rel0n23.png" />
<span>外协人员</span>
</div>
<div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
<img width="18px" src="@/assets/images/v2_rel0n23.png" />
<span>外协人员</span>
<div class="type-number-wrapper" style="margin-left: 1vw">
<span class="type-number" v-for="(digit, index) in externalStaffDigits" :key="index">
{{ digit }}
</span>
@@ -72,11 +41,9 @@
</div>
<div class="top-card-right-item">
<div>
<img width="18px" src="@/assets/images/24508_654.png" />
<span>访客</span>
</div>
<div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
<img width="18px" src="@/assets/images/24508_654.png" />
<span>访客</span>
<div class="type-number-wrapper">
<span class="type-number" v-for="(digit, index) in visitorDigits" :key="index">
{{ digit }}
</span>
@@ -91,7 +58,6 @@
<span>各园区统计</span>
<img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
</div>
<!-- <div v-if="props.loading" class="skeleton-chart-circle skeleton-pulse"></div> -->
<Echart :options="barChartOption" class="bar-chart" height="17.5vh" />
</div>
</div>
@@ -102,7 +68,6 @@ import { ref, onMounted, watch, computed } from 'vue'
import { rgbToHex } from '@/utils/color'
interface Props {
loading?: boolean
totalCount: number
formalEmployeeCount: number
externalStaffCount: number
@@ -122,17 +87,6 @@ const formalEmployeeDigits = computed(() => String(props.formalEmployeeCount).sp
const externalStaffDigits = computed(() => String(props.externalStaffCount).split('').map(Number))
const visitorDigits = computed(() => String(props.visitorCount).split('').map(Number))
// 计算数字区域的最大宽度
// 每个数字框宽度 14pxgap 2px
const maxNumberWidth = computed(() => {
const formalLen = formalEmployeeDigits.value.length
const externalLen = externalStaffDigits.value.length
const visitorLen = visitorDigits.value.length
const maxLen = Math.max(formalLen, externalLen, visitorLen)
// 宽度 = 数字个数 * 14px + (数字个数 - 1) * 2px
return maxLen > 0 ? maxLen * 14 + (maxLen - 1) * 2 : 0
})
// 图表引用
const barChartOption = ref({
legend: {
@@ -289,25 +243,17 @@ onMounted(() => {
.top-card-right-item {
display: flex;
align-items: center;
column-gap: 5px;
padding: 0 10px;
font-size: 0.7rem;
color: #fff;
> :first-child {
display: flex;
align-items: center;
column-gap: 5px;
width: 100px;
}
.type-number-wrapper {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 2px;
font-size: 0.8rem;
color: #fff;
margin-left: 8px;
.type-number {
display: inline-block;
@@ -317,15 +263,11 @@ onMounted(() => {
line-height: 25px;
color: #fff;
text-align: center;
background-color: #158e56;
background-color: #1afb8f;
border-radius: 2px;
transition: all 0.3s ease;
}
}
> span:last-child {
margin-left: 4px;
}
}
}
}
@@ -348,141 +290,5 @@ onMounted(() => {
min-height: 17.5vh;
}
}
// 骨架屏样式
.skeleton-container {
.skeleton-card {
display: flex;
padding: 0 20px;
column-gap: 15px;
font-size: 0.8rem;
.skeleton-left {
display: flex;
height: 12vh;
min-width: 15vw;
padding: 0 10px;
background-image: url('@/assets/imgs/total_count_card_bg.png');
background-size: cover;
column-gap: 6px;
align-items: center;
.skeleton-icon {
width: 33px;
height: 33px;
background-color: #3a3a3a;
border-radius: 4px;
}
.skeleton-text {
background-color: #3a3a3a;
border-radius: 4px;
}
.skeleton-numbers {
display: flex;
align-items: center;
gap: 2px;
font-size: 0.8rem;
.skeleton-number {
width: 26px;
height: 50px;
background-color: #3a3a3a;
border-radius: 4px;
}
}
}
.skeleton-right {
display: flex;
height: 12vh;
min-width: 20vw;
background-image: url('@/assets/imgs/staff_types_bg.png');
background-position: top center;
background-size: cover;
flex-direction: column;
justify-content: center;
row-gap: 4px;
.skeleton-item {
display: flex;
align-items: center;
column-gap: 5px;
padding: 0 10px;
.skeleton-row {
display: flex;
align-items: center;
gap: 4px;
flex: 1;
.skeleton-icon-small {
width: 18px;
height: 18px;
background-color: #3a3a3a;
border-radius: 4px;
}
.skeleton-text {
height: 16px;
width: 60px;
background-color: #3a3a3a;
border-radius: 4px;
}
}
.skeleton-numbers {
display: flex;
align-items: center;
gap: 2px;
font-size: 0.8rem;
.skeleton-number-small {
width: 14px;
height: 25px;
background-color: #3a3a3a;
border-radius: 2px;
}
}
}
}
}
}
// 骨架屏动画
.skeleton-pulse {
animation: skeleton-loading-overview 1.5s ease-in-out infinite;
}
// 圆形饼图骨架屏
.skeleton-chart-circle {
width: 120px;
height: 120px;
border-radius: 50%;
margin: 30px auto 50px auto;
background-color: #444;
}
// 柱状图骨架屏
// .skeleton-chart-bar {
// width: 100%;
// height: 17.5vh;
// background-color: #444;
// border-radius: 8px;
// }
@keyframes skeleton-loading-overview {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
}
</style>

View File

@@ -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

View File

@@ -11,12 +11,12 @@
{{ currentTime }}
</div>
</div>
<!-- <span class="weather-warning">
<span class="weather-warning">
天气预警:
<span style="color: red">
2025年08月19日13:25分中央气象台发布雄安地区于17时至夜间将有200毫米强降雨并伴有10级大风......
</span>
</span> -->
</span>
<!-- 主内容区 -->
<div class="content-container">
<div class="left-wrapper">

View File

@@ -3,21 +3,17 @@
<div class="panel-title">超时工单</div>
<img style="margin: 8px 0" src="@/assets/images/title_border_line_1.png" />
<!-- 骨架屏 -->
<!-- 实际内容 -->
<div class="tip-container">
<div class="tip-image">
<img src="@/assets/images/screen/circle_image.png" width="80" height="80" />
<div v-if="props.loading" style="width: 20px; height: 20px;" class="number skeleton-pulse"></div>
<span v-else class="number">{{ timeoutWorkOrders?.total || 0 }}</span>
<span class="number">{{ timeoutWorkOrders?.total || 0 }}</span>
</div>
<img src="@/assets/images/screen/tip_bg_image.png" width="100%" height="70" />
<div class="tip-content">
<div class="col-item">
<img src="@/assets/images/screen/warning_img.png" width="23" />
<span>超时工单数</span>
<div v-if="props.loading" style="width: 20px; height: 20px;" class="skeleton-pulse"></div>
<span v-else style="font-size: 1.2rem; marker-start: 2vw; color: red;">{{ timeoutWorkOrders?.total || 0 }}</span>
<span style="font-size: 1.2rem; marker-start: 2vw; color: red;">{{ timeoutWorkOrders?.total || 0 }}</span>
</div>
</div>
</div>
@@ -36,7 +32,7 @@
</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>
</template>
@@ -56,11 +52,9 @@ interface TimeoutWorkOrders {
// Props定义
interface Props {
loading?: boolean
timeoutWorkOrders?: TimeoutWorkOrders
alertDetails?: AlertItem[]
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>

View File

@@ -1,15 +1,15 @@
<template>
<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)` }">
<span v-for="(item, index) in weatherData" :key="index" class="weather-item"
:style="{ color: getLevelColor(item.level_code) }">
{{ item.content }}
</span>
</div>
</div> -->
</div>
</div>
</template>

View File

@@ -2,16 +2,11 @@
<div class="dashboard-container">
<!-- 顶部标题栏 -->
<div class="header-container">
<HeaderSelector
back-button-type="none"
:show-back-button="false"
display-text="集团"
:clickable="true"
:show-selector-indicator="true"
selector-type="region"
:selected-value="selectedRegion"
@selector-change="onRegionChange"
/>
<div class="header-left">
<div class="back-button" @click="openRegionSelector"> 总部
<span>···</span>
</div>
</div>
<h1 class="header-title">总部综合监控大屏</h1>
<div class="date-wrapper">
<span style="margin-top: 6%;font-size: 0.9rem;">{{ currentDate }}</span>
@@ -24,41 +19,39 @@
<!-- 主内容区 -->
<div class="content-container">
<div class="left-wrapper">
<OverviewPanel :loading="isFirstLoading"
:totalCount="dashboardData?.totalCount || 0"
:formalEmployeeCount="dashboardData?.formalEmployeeCount || 0"
:externalStaffCount="dashboardData?.externalStaffCount || 0"
:visitorCount="dashboardData?.visitorCount || 0"
:parkStatistics="dashboardData?.parkStatistics"/>
<RiskStatisticsPanel :loading="isFirstLoading" :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
@tab-change="handleRiskTabChange" :campus_id="query.campus_id"/>
<OverviewPanel
:totalCount="dashboardData?.totalCount || 0"
:formalEmployeeCount="dashboardData?.formalEmployeeCount || 0"
:externalStaffCount="dashboardData?.externalStaffCount || 0"
:visitorCount="dashboardData?.visitorCount || 0"
:parkStatistics="dashboardData?.parkStatistics"/>
<RiskStatisticsPanel
:riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
@tab-change="handleRiskTabChange" :campus_id="query.campus_id"/>
</div>
<div class="right-wrapper">
<HighRiskAlertPanel :loading="isFirstLoading"
:alertData="dashboardData?.alertData"
:alertDetails="dashboardData?.alertData.details"
linkUrl="http://10.0.64.20/security/console/command-center?p=tabl"
:sourceIndex="sourceIndex"/>
<TimeoutWorkOrderPanel :loading="isFirstLoading"
:timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
:alertDetails="dashboardData?.timeoutWorkOrders.details"
linkUrl="http://10.0.64.20/pms/workorder-list"
:sourceIndex="sourceIndex"/>
<HighRiskAlertPanel
:alertData="dashboardData?.alertData" :alertDetails="dashboardData?.alertData.details"
:sourceIndex="sourceIndex"/>
<TimeoutWorkOrderPanel
:timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
:alertDetails="dashboardData?.timeoutWorkOrders.details" :sourceIndex="sourceIndex"/>
</div>
<HiddenDangerPanel :loading="isFirstLoading" :hiddenDangerData="dashboardData?.hiddenDangerData"/>
<HiddenDangerPanel :hiddenDangerData="dashboardData?.hiddenDangerData"/>
</div>
</div>
<!-- 区域选择弹窗 -->
<RegionSelector
v-model="regionSelectorVisible" :modelSelected="selectedRegion" :regions="regionOption"
@change="onRegionChange"/>
</template>
<script setup lang="ts">
import {getTableList, getTableData, getWorkOrderStatistics} from './report'
import {ref, reactive, onMounted, watch, onUnmounted} from 'vue'
import {getTableList, getTableData} from './report'
import {ref, onMounted, watch, onUnmounted} from 'vue'
import {useRouter} from 'vue-router'
// 创建 AbortController 用于取消请求
const abortController = new AbortController()
import HeaderSelector from './components/HeaderSelector.vue'
import RegionSelector from './components/RegionSelector.vue'
import WeatherWarning from './components/WeatherWarning.vue'
import {getDashboardData, getAlertDetails, type DashboardData} from '@/api/dashboard'
@@ -79,13 +72,14 @@ interface RegionItem {
code: string
}
type TabType = '安全类事项' | '工程类事项'
type TabType = '高危作业' | '安全培训考试' | '安全培训考试'
// 响应式数据
const currentDateTime = ref<string>('')
const currentDate = ref<string>('')
const currentWeek = ref<string>('')
const currentTime = ref<string>('')
const regionSelectorVisible = ref<boolean>(false)
const selectedRegion = ref<string>('')
const sourceIndex = ref<number>(1)
@@ -100,15 +94,9 @@ const visitorCount = ref<number>(0)
// 总体概览-各园区统计
const parkStatistics = ref<any>()
// 高危作业/安全培训考试/安全培训考试
const riskStatistics = ref<any>({
安全类事项: [],
工程类事项: []
})
const riskStatistics = ref<any>()
const dangerDetail = ref<any>()
// 加载状态
const isFirstLoading = ref<boolean>(true)
// 动画相关的状态
const isAnimating = ref<boolean>(false)
const animationDuration = 2000 // 动画持续时间(毫秒)
@@ -209,6 +197,7 @@ const updateAllCounts = (counts: {
// 路由
const router = useRouter()
const regionOption = ref<RegionItem[]>([])
// 定时器ID
const dashboardTimerId = ref<ReturnType<typeof setInterval> | null>(null)
const timeUpdateTimerId = ref<ReturnType<typeof setInterval> | null>(null)
@@ -224,95 +213,71 @@ const query = reactive({
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 () => {
updateTime()
timeUpdateTimerId.value = setInterval(updateTime, 1000)
//
try {
let {records} = await getTableList(
'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) {
// 去重region字段使用Map来确保唯一性
const regionMap = new Map()
records.forEach(el => {
if (!regionMap.has(el.region)) {
regionMap.set(el.region, {
name: el.region,
code: el.region_id // 使用region_code作为code
})
}
})
// 转换为数组
regionOption.value = Array.from(regionMap.values())
// 先检查缓存
const cachedRecords = getCachedRegionOption()
let records = cachedRecords
console.log('regionOption.value>>>>', regionOption.value);
if (!records || records.length === 0) {
// 缓存不存在或已过期,调用接口
try {
let result = await getTableList('park_info_list', {}, false, { signal: abortController.signal })
records = result.records || []
// 将园区信息去重
const parkMap = new Map();
records.forEach(el => {
if (!parkMap.has(el.park_code)) {
parkMap.set(el.park_code, {
name: el.park_name,
code: el.park_code
})
}
})
// 将parkMap转换为数组
query.campus_id = Array.from(parkMap.values()).map(e1 => e1.code).join();
if (records && records.length > 0) {
// 保存到缓存
setCachedRegionOption(records)
}
} catch (error) {
console.error('初始化园区数据失败:', error)
records = []
}
} catch (error) {
console.error('初始化园区数据失败:', error)
}
if (records && records.length > 0) {
// 将园区信息去重
const parkMap = new Map();
records.forEach(el => {
if (!parkMap.has(el.park_code)) {
parkMap.set(el.park_code, {
name: el.park_name,
code: el.park_code
})
}
})
// 将parkMap转换为数组
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
}
}
// 启动定时器
timeOut1()
@@ -323,11 +288,8 @@ onMounted(async () => {
}, 2 * 60 * 1000) // 每2分钟更新一次
})
// 组件卸载时清理定时器并取消所有请求
// 组件卸载时清理定时器
onUnmounted(() => {
// 取消所有正在进行的请求
abortController.abort()
if (dashboardTimerId.value) {
clearInterval(dashboardTimerId.value)
dashboardTimerId.value = null
@@ -344,11 +306,6 @@ onUnmounted(() => {
let isFirstLoad = ref<boolean>(true)
// 数据初始化方法
const loadDashboardData = async (): Promise<void> => {
// 第一次加载时显示骨架屏
if (isFirstLoading.value) {
console.log('第一次加载,显示骨架屏');
}
const data = await getDashboardData()
if (isFirstLoad.value) {
console.log('第一次加载');
@@ -357,12 +314,9 @@ const loadDashboardData = async (): Promise<void> => {
}
console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
// 收集所有异步请求
const promises = []
// 获取总体概览数据
promises.push(
getTableList('generalTotal', query, false, { signal: abortController.signal }).then(generalTotal => {
try {
// 获取总体概览数据
getTableList('generalTotal', query).then(generalTotal => {
if (generalTotal.records && generalTotal.records.length > 0) {
dashboardData.value.totalCount = Number(generalTotal.records[0].totalCount)
dashboardData.value.formalEmployeeCount = Number(generalTotal.records[0].formalEmployeeCount)
@@ -375,14 +329,14 @@ const loadDashboardData = async (): Promise<void> => {
external: Number(dashboardData.value.externalStaffCount),
visitor: Number(dashboardData.value.visitorCount)
})
}).catch(error => {
console.error('获取总体概览数据失败:', error)
})
)
} catch (error) {
console.error('获取总体概览数据失败:', error)
}
// 获取各园区统计数据
promises.push(
getTableList('parkscreen_user_info', query, false, { signal: abortController.signal }).then(parkscreen_user_info => {
try {
// 获取各园区统计数据
getTableList('parkscreen_user_info', query).then(parkscreen_user_info => {
if (parkscreen_user_info.records && parkscreen_user_info.records.length > 0) {
dashboardData.value.parkStatistics = parkscreen_user_info.records.map(el => {
return {
@@ -393,14 +347,14 @@ const loadDashboardData = async (): Promise<void> => {
}
})
}
}).catch(error => {
console.error('获取各园区统计数据失败:', error)
})
)
} catch (error) {
console.error('获取各园区统计数据失败:', error)
}
// 获取风险预警数据
promises.push(
getTableList('risk_alert_data', query, false, { signal: abortController.signal }).then(risk_alert_data => {
try {
// 获取风险预警数据
getTableList('risk_alert_data', query).then(risk_alert_data => {
if (risk_alert_data.records && risk_alert_data.records.length > 0) {
dashboardData.value.alertData.total = risk_alert_data.records[0].total
dashboardData.value.alertData.processed = risk_alert_data.records[0].processed
@@ -410,213 +364,286 @@ const loadDashboardData = async (): Promise<void> => {
}).catch(error => {
console.error('获取风险预警数据失败:', error)
})
)
} catch (error) {
console.error('获取风险预警数据失败:', error)
}
// 获取风险预警详情数据
promises.push(
getTableList('risk_alert_detail', query, false, { signal: abortController.signal }).then(risk_alert_detail => {
try {
// 获取风险预警详情数据
getTableList('risk_alert_detail', query).then(risk_alert_detail => {
if (risk_alert_detail.records && risk_alert_detail.records.length > 0) {
dashboardData.value.alertData.details = risk_alert_detail.records
}
}).catch(error => {
console.error('获取风险预警详情数据失败:', error)
})
)
} catch (error) {
console.error('获取风险预警详情数据失败:', error)
}
// 获取超期工单数据
promises.push(
getTableList('timeout_work_order', query, false, { signal: abortController.signal }).then(timeout_work_order => {
if (timeout_work_order.records && timeout_work_order.records.length >= 0) {
try {
// 获取超期工单数据
getTableList('timeout_work_order', query).then(timeout_work_order => {
if (timeout_work_order.records && timeout_work_order.records.length > 0) {
dashboardData.value.timeoutWorkOrders.total = timeout_work_order.records.length
dashboardData.value.timeoutWorkOrders.details = timeout_work_order.records
}
}).catch(error => {
console.error('获取超期工单数据失败:', error)
})
)
// 处理风险统计和隐患数据(这些是异步的)
promises.push(
Promise.all([
handleRiskTabChange('安全类事项'),
handleHiddenDangerPannelData(query)
]).catch(error => {
console.error('处理风险统计和隐患数据失败:', error)
})
)
// 等待所有异步操作完成
try {
await Promise.all(promises)
console.log('所有数据加载完成')
// 第一次加载完成后,隐藏骨架屏
if (isFirstLoading.value) {
isFirstLoading.value = false
console.log('隐藏骨架屏')
}
} catch (error) {
console.error('数据加载过程中出现错误:', error)
// 即使出错也要隐藏骨架屏,避免界面一直处于加载状态
if (isFirstLoading.value) {
isFirstLoading.value = false
}
console.error('获取超期工单数据失败:', error)
}
handleRiskTabChange('高危作业')
handleHiddenDangerPannelData(query)
console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
}
const handleHiddenDangerPannelData = async (query) => {
const promises = []
const handleHiddenDangerPannelData = (query) => {
let _data = {
flag: false,
general: 0,
major: 0,
overdue: 0,
processed: 0,
processing: 0,
pending: 0
}
// 获取隐患排查治理数据 - 系统数据
promises.push(
getTableList('risk_level_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) {
dashboardData.value.hiddenDangerData.general = Number(res.records[0].general_count)
dashboardData.value.hiddenDangerData.major = Number(res.records[0].major_count)
_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 = {
overdue: overdueCnt,
processed: processedCnt,
processing: processingCnt,
pending: pendingCnt,
}
} else {
console.log("请求系统成功,展示数据", _data, _data2);
dashboardData.value.hiddenDangerData.general = _data.general
dashboardData.value.hiddenDangerData.major = _data.major
let totalCnt = _data.general + _data.major
// 显示系统数据
dashboardData.value.hiddenDangerData.progress = {
overdue: (_data.overdue / totalCnt * 100).toFixed(2),
processed: (_data.processed / totalCnt * 100).toFixed(2),
processing: (_data.processing / totalCnt * 100).toFixed(2),
pending: (_data.pending / totalCnt * 100).toFixed(2),
}
}
}
})
}
return getTableList('risk_status_count', query, false, { signal: abortController.signal })
}).then(res => {
if (res.records && res.records.length > 0) {
const record = res.records[0]
dashboardData.value.hiddenDangerData.progress = {
overdue: Number(record.overdueCnt).toFixed(2),
processed: Number(record.processedCnt).toFixed(2),
processing: Number(record.processingCnt).toFixed(2),
pending: '0.00'
}
}
}).catch(error => {
console.error('获取系统隐患数据失败:', error)
})
)
// 获取第三方隐患排查治理数据
promises.push(
getTableList('hidden_danger_investigation', query, false, { signal: abortController.signal }).then(res => {
if (res.records && res.records.length > 0) {
// 获取安全指数
return getTableList('hidden_danger_safety_index', query, false, { signal: abortController.signal })
}
}).then(res => {
// 获取隐患排查治理数据
getTableList('hidden_danger_investigation', query).then(res => {
if (res.records && res.records.length > 0) {
_data2.general = Number(res.records[0].general)
_data2.major = Number(res.records[0].major)
dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
// 获取隐患排查治理处理进度数据
getTableList('hidden_danger_process_progress', query).then(res => {
if (res.records && res.records.length > 0) {
_data2.flag = true
_data2.overdue = Number(res.records[0].overdue) / 100 * (_data2.general + _data2.major)
_data2.processed = Number(res.records[0].processed) / 100 * (_data2.general + _data2.major)
_data2.processing = Number(res.records[0].processing) / 100 * (_data2.general + _data2.major)
_data2.pending = Number(res.records[0].pending) / 100 * (_data2.general + _data2.major)
if (_data.flag) {
console.log("请求第三方和系统成功,合并数据", _data, _data2);
// 合并数据
let generalCnt = _data.general + _data2.general
let majorCnt = _data.major + _data2.major
dashboardData.value.hiddenDangerData.general = generalCnt
dashboardData.value.hiddenDangerData.major = majorCnt
let totalCnt = generalCnt + majorCnt
let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2)
let processedCnt = ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2)
let processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2)
let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2)
dashboardData.value.hiddenDangerData.progress = {
overdue: overdueCnt,
processed: processedCnt,
processing: processingCnt,
pending: pendingCnt,
}
} else {
//显示三方数据
console.log("请求第三方成功,展示数据", _data, _data2);
dashboardData.value.hiddenDangerData.general = _data2.general
dashboardData.value.hiddenDangerData.major = _data2.major
dashboardData.value.hiddenDangerData.progress = {
overdue: res.records[0].overdue,
processed: res.records[0].processed,
processing: res.records[0].processing,
pending: res.records[0].pending,
}
}
}
}).catch(error => {
console.error('获取隐患排查治理处理进度数据失败:', error)
})
}
}).catch(error => {
console.error('获取第三方隐患数据失败:', error)
console.error('获取隐患排查治理数据失败:', error)
})
)
} catch (error) {
console.error('获取隐患排查治理数据失败:', error)
}
// 获取隐患排查治理TOP3类型数据
promises.push(
getTableList('hidden_danger_top', query, false, { signal: abortController.signal }).then(hidden_danger_top => {
try {
// 获取隐患排查治理TOP3类型数据
getTableList('hidden_danger_top', query).then(hidden_danger_top => {
if (hidden_danger_top.records && hidden_danger_top.records.length > 0) {
dashboardData.value.hiddenDangerData.top3Types = hidden_danger_top.records
}
}).catch(error => {
console.error('获取隐患排查治理TOP3类型数据失败:', error)
})
)
return Promise.all(promises)
} catch (error) {
console.error('获取隐患排查治理TOP3类型数据失败:', error)
}
}
// 处理风险统计tab切换
const handleRiskTabChange = async (tab: TabType | '安全类事项' | '工程类事项') => {
const handleRiskTabChange = async (tab: TabType) => {
console.log('Tab changed to:', tab)
try {
// 处理类型映射:组件可能传入 '安全类事项' 或 '工程类事项'
let normalizedTab: TabType = '安全类事项'
if (tab === '安全类事项' || tab === '安全类事项') {
normalizedTab = '安全类事项'
} else if (tab === '工程类事项' || tab === '工程类事项') {
normalizedTab = '工程类事项'
}
let workOrderType = ''
let code = ''
switch (tab) {
case '安全类事项':
workOrderType = '物业服务-安全'
case '高危作业':
code = 'hazardous_operations'
break
case '工程类事项':
workOrderType = '物业服务-工程'
case '安全培训考试':
code = 'safety_assessment'
break
case '安全培训考试':
code = 'security_training'
break
default:
workOrderType = '物业服务-安全'
code = 'hazardous_operations'
}
// 同时获取维保任务和巡检任务的数据
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
if (code == 'hazardous_operations') {
// 根据不同的tab请求不同的接口
getTableList(
code,
{...query, activeTab: tab}
).then(response => {
// 更新风险统计数据 - 传递完整的数组数据用于饼图显示
if (response.records && response.records.length > 0) {
dangerDetail.value = response.records
}
}).catch(error => {
console.error('获取风险统计数据失败:', error)
if (isFirstLoad.value) {
// dangerDetail.value = [
// {
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
// alarm_level_code: 'general',
// alarm_status: '已关闭',
// alarm_biz_id: '20250827164305283937'
// },
// {
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
// alarm_level_code: 'general',
// alarm_status: '已关闭',
// alarm_biz_id: '20250827164305283937'
// }, {
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
// alarm_level_code: 'general',
// alarm_status: '已关闭',
// alarm_biz_id: '20250827164305283937'
// }, {
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
// alarm_level_code: 'general',
// alarm_status: '已关闭',
// alarm_biz_id: '20250827164305283937'
// }, {
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
// alarm_level_code: 'general',
// alarm_status: '已关闭',
// alarm_biz_id: '20250827164305283937'
// }, {
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
// alarm_level_code: 'general',
// alarm_status: '已关闭',
// alarm_biz_id: '20250827164305283937'
// }
// ]
}
})
// 创建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,
rate: Number(data.rate) || 0,
status: {
notStarted: Number(data.pending) || 0,
inProgress: Number(data.processing) || 0,
done: Number(data.processed) || 0,
voided: Number(data.closed) || 0
}
})
} else {
// 根据不同的tab请求不同的接口
getTableList(
code,
{...query, activeTab: tab}
).then(response => {
// 更新风险统计数据 - 传递完整的数组数据用于饼图显示
if (response.records && response.records.length > 0) {
riskStatistics.value = response.records
} else {
// 如果没有数据,设置默认值
riskStatistics.value = [
{
csmpus_name: "雄安新区总部",
finishCount: "0",
participateCount: "0"
}
]
}
}).catch(error => {
console.error('获取风险统计数据失败:', error)
})
return charts
}
// 转换维保和巡检数据
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) {
console.error('获取风险统计数据失败:', error)
}
@@ -631,6 +658,11 @@ const onRegionChange = (item: RegionItem): void => {
})
}
// 打开区域选择器
const openRegionSelector = (): void => {
regionSelectorVisible.value = true
}
// 更新时间
const updateTime = (): void => {
const now = new Date()
@@ -1313,7 +1345,7 @@ const timeOut1 = (): void => {
@keyframes typeFlashEffect {
0% {
background-color: #158e56;
background-color: #1afb8f;
}
50% {
@@ -1321,7 +1353,7 @@ const timeOut1 = (): void => {
}
100% {
background-color: #158e56;
background-color: #1afb8f;
}
}
@@ -1339,14 +1371,14 @@ const timeOut1 = (): void => {
line-height: 25px;
color: #fff;
text-align: center;
background-color: #158e56;
background-color: #1afb8f;
border-radius: 2px;
animation: typeNumberPulse 1.5s ease-in-out infinite;
transition: all 0.3s ease;
}
.type-number:hover {
background-color: #158e56;
background-color: #16d47a;
transform: scale(1.2);
}

View File

@@ -33,10 +33,9 @@
<div class="center-container">
<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" />
<span class="sub-title">隐患等级</span>
<span class="sub-title">分类风险</span>
<img width="50%" src="@/assets/images/line_1.png" />
<div class="type-wrapper">
<div class="type-item">

View File

@@ -60,8 +60,7 @@
</div>
<div class="bottom-card">
<div class="bottom-card-title">
<!--隐患排查治理-->
<span></span>
<span>隐患排查治理</span>
<img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
</div>
<div class="type-wrapper">

File diff suppressed because it is too large Load Diff

View File

@@ -2,18 +2,12 @@
<div class="dashboard-container">
<!-- 顶部标题栏 -->
<div class="header-container">
<HeaderSelector
back-button-type="image"
:show-back-button="true"
:on-back="returnToHeadquarters"
:display-text="selectedRegion"
:clickable="true"
:show-selector-indicator="true"
selector-type="park"
:selected-value="selectedPark"
:region-code="query.regionCode"
@selector-change="onRegionChange"
/>
<div class="header-left">
<img class="back-img" @click="returnToHeadquarters" src="@/assets/images/screen/back_image.png" />
<div class="back-button" @click="openRegionSelector"> {{ selectedRegion }}
<span>···</span>
</div>
</div>
<h1 class="header-title">{{ selectedRegion }}综合监控大屏</h1>
<div class="date-wrapper">
<span style="margin-top: 6%;font-size: 0.9rem;">{{ currentDate }}</span>
@@ -22,48 +16,39 @@
</div>
</div>
<!-- 天气预报 -->
<WeatherWarning/>
<WeatherWarning />
<!-- 主内容区 -->
<div class="content-container">
<div class="left-wrapper">
<OverviewPanel :loading="isFirstLoading"
:totalCount="dashboardData?.totalCount || 0"
:formalEmployeeCount="dashboardData?.formalEmployeeCount || 0"
:externalStaffCount="dashboardData?.externalStaffCount || 0"
:visitorCount="dashboardData?.visitorCount || 0"
:parkStatistics="dashboardData?.parkStatistics"/>
<RiskStatisticsPanel :loading="isFirstLoading" :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
:park="parkValue"
@tab-change="handleRiskTabChange" :campus_id="query.campus_id"/>
<OverviewPanel :totalCount="dashboardData?.totalCount || 0"
:formalEmployeeCount="dashboardData?.formalEmployeeCount || 0"
:externalStaffCount="dashboardData?.externalStaffCount || 0" :visitorCount="dashboardData?.visitorCount || 0"
:parkStatistics="dashboardData?.parkStatistics" />
<RiskStatisticsPanel :riskStatistics="riskStatistics" :dangerDetail="dangerDetail" :park="parkValue"
@tab-change="handleRiskTabChange" :campus_id="query.campus_id" />
</div>
<div class="right-wrapper">
<HighRiskAlertPanel :loading="isFirstLoading"
:alertData="dashboardData?.alertData"
:alertDetails="dashboardData?.alertData.details"
linkUrl="http://10.0.64.20/security/console/command-center?p=tabl"
:sourceIndex="sourceIndex"/>
<TimeoutWorkOrderPanel :loading="isFirstLoading"
:timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
:alertDetails="dashboardData?.timeoutWorkOrders.details"
linkUrl="http://10.0.64.20/pms/workorder-list"
:sourceIndex="sourceIndex"/>
<HighRiskAlertPanel :alertData="dashboardData?.alertData" :alertDetails="dashboardData?.alertData.details"
:sourceIndex="sourceIndex" />
<TimeoutWorkOrderPanel :timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
:alertDetails="dashboardData?.timeoutWorkOrders.details" :sourceIndex="sourceIndex" />
</div>
<HiddenDangerPanel :loading="isFirstLoading" :hiddenDangerData="dashboardData?.hiddenDangerData"/>
<HiddenDangerPanel :hiddenDangerData="dashboardData?.hiddenDangerData" />
</div>
</div>
<!-- 区域选择弹窗 -->
<RegionSelector v-model="regionSelectorVisible" :modelSelected="selectedPark" :regions="regionOption"
@change="onRegionChange" />
</template>
<script setup lang="ts">
import {getTableList, getTableData, getWorkOrderStatistics} from './report'
import {ref, onMounted, watch, onUnmounted} from 'vue'
import {useRoute, useRouter} from 'vue-router'
// 创建 AbortController 用于取消请求
const abortController = new AbortController()
import HeaderSelector from './components/HeaderSelector.vue'
import { getTableList, getTableData } from './report'
import { ref, onMounted, watch, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import RegionSelector from './components/RegionSelector.vue'
import WeatherWarning from './components/WeatherWarning.vue'
import {getDashboardData, getAlertDetails, type DashboardData} from '@/api/dashboard'
import { getDashboardData, getAlertDetails, type DashboardData } from '@/api/dashboard'
import OverviewPanel from './components/OverviewPanel.vue'
import RiskStatisticsPanel from './components/RiskStatisticsPanel.vue'
@@ -82,13 +67,14 @@ interface RegionItem {
code: string
}
type TabType = '安全类事项' | '工程类事项'
type TabType = '危险作业' | '安全考核' | '安全、保密培训'
// 响应式数据
const currentDateTime = ref<string>('')
const currentDate = ref<string>('')
const currentWeek = ref<string>('')
const currentTime = ref<string>('')
const regionSelectorVisible = ref<boolean>(false)
const selectedRegion = ref<string>('')
const sourceIndex = ref<number>(1)
@@ -103,18 +89,12 @@ const visitorCount = ref<number>(0)
// 总体概览-各园区统计
const parkStatistics = ref<any>()
// 危险作业/安全考核/安全、保密培训
const riskStatistics = ref<Record<TabType, any[]>>({
安全类事项: [],
工程类事项: []
})
const riskStatistics = ref<any>()
const dangerDetail = ref<any>()
// 动画相关的状态
const isAnimating = ref<boolean>(false)
const animationDuration = 2000 // 动画持续时间(毫秒)
// 首次加载状态
const isFirstLoading = ref<boolean>(true)
// 数字变化时的闪烁效果
const flashNumbers = () => {
const numberElements = document.querySelectorAll('.total-number, .type-number')
@@ -211,6 +191,7 @@ const updateAllCounts = (counts: {
const router = useRouter()
const route = useRoute()
const regionOption = ref<RegionItem[]>([])
const selectedPark = ref<string>('')
const parkValue = ref<string>('')
// 定时器ID
@@ -231,43 +212,6 @@ const query = reactive({
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 () => {
updateTime()
@@ -280,52 +224,55 @@ onMounted(async () => {
console.log("区域>>>>>", selectedRegion.value, query.regionCode);
}
// 先检查缓存
const cachedRecords = getCachedRegionOption()
let records = cachedRecords
try {
let { records } = await getTableList(
'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) {
// 去重region字段使用Map来确保唯一性
const regionMap = new Map()
records.filter((el) => el.region_id == query.regionCode)
.map(el => { return el })
.forEach(el => {
if (!regionMap.has(el.park_name)) {
regionMap.set(el.park_name, {
name: el.park_name,
code: el.park_code // 使用region_code作为code
})
}
})
// // 转换为数组
regionOption.value = Array.from(regionMap.values())
console.log('regionOption.value>>>>', regionOption.value);
if (!records || records.length === 0) {
// 缓存不存在或已过期,调用接口
try {
let result = await getTableList('park_info_list', {}, false, { signal: abortController.signal })
records = result.records || []
if (records && records.length > 0) {
// 保存到缓存
setCachedRegionOption(records)
}
} catch (error) {
console.error('初始化园区数据失败:', error)
records = []
query.campus_id = regionOption.value.map(el => el.code).join()
}
} catch (error) {
console.error('初始化园区数据失败:', error)
}
if (records && records.length > 0) {
// 根据regionCode过滤去重park_name字段
const regionMap = new Map()
records.filter((el) => el.region_id == query.regionCode)
.forEach(el => {
if (!regionMap.has(el.park_name)) {
regionMap.set(el.park_name, {
name: el.park_name,
code: el.park_code
})
}
})
// 转换为数组并设置 campus_id
const regionArray = Array.from(regionMap.values())
query.campus_id = regionArray.map(el => el.code).join()
}
// 初始化数据 - 先加载数据,再设置初始值
// 初始化数据
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()
@@ -336,11 +283,8 @@ onMounted(async () => {
}, 2 * 60 * 1000) // 每2分钟更新一次
})
// 组件卸载时清理定时器并取消所有请求
// 组件卸载时清理定时器
onUnmounted(() => {
// 取消所有正在进行的请求
abortController.abort()
if (dashboardTimerId.value) {
clearInterval(dashboardTimerId.value)
dashboardTimerId.value = null
@@ -367,7 +311,7 @@ const loadDashboardData = async (): Promise<void> => {
try {
// 获取总体概览数据
getTableList('generalTotal', query, false, { signal: abortController.signal }).then(generalTotal => {
getTableList('generalTotal', query).then(generalTotal => {
if (generalTotal.records && generalTotal.records.length > 0) {
dashboardData.value.totalCount = generalTotal.records.reduce((sum, item) => sum + Number(item.totalCount || 0), 0)
dashboardData.value.formalEmployeeCount = generalTotal.records.reduce((sum, item) => sum + Number(item.formalEmployeeCount || 0), 0)
@@ -387,7 +331,7 @@ const loadDashboardData = async (): Promise<void> => {
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) {
dashboardData.value.parkStatistics = parkscreen_user_info.records.map(el => {
return {
@@ -405,7 +349,7 @@ const loadDashboardData = async (): Promise<void> => {
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) {
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)
@@ -421,10 +365,10 @@ const loadDashboardData = async (): Promise<void> => {
try {
// 获取风险预警详情数据
getTableList('risk_alert_detail', query, false, { signal: abortController.signal }).then(risk_alert_detail => {
// if (risk_alert_detail.records && risk_alert_detail.records.length > 0) {
dashboardData.value.alertData.details = risk_alert_detail.records || []
// }
getTableList('risk_alert_detail', query).then(risk_alert_detail => {
if (risk_alert_detail.records && risk_alert_detail.records.length > 0) {
dashboardData.value.alertData.details = risk_alert_detail.records
}
}).catch(error => {
console.error('获取风险预警详情数据失败:', error)
})
@@ -434,8 +378,8 @@ const loadDashboardData = async (): Promise<void> => {
try {
// 获取超期工单数据
getTableList('timeout_work_order', query, false, { signal: abortController.signal }).then(timeout_work_order => {
if (timeout_work_order.records && timeout_work_order.records.length >= 0) {
getTableList('timeout_work_order', query).then(timeout_work_order => {
if (timeout_work_order.records && timeout_work_order.records.length > 0) {
dashboardData.value.timeoutWorkOrders.total = timeout_work_order.records.length
dashboardData.value.timeoutWorkOrders.details = timeout_work_order.records
}
@@ -445,7 +389,7 @@ const loadDashboardData = async (): Promise<void> => {
} catch (error) {
console.error('获取超期工单数据失败:', error)
}
handleRiskTabChange('安全类事项')
handleRiskTabChange('危险作业')
handleHiddenDangerPannelData(query)
console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
}
@@ -472,25 +416,25 @@ const handleHiddenDangerPannelData = (query) => {
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, false, { signal: abortController.signal }).then(res => {
getTableList('risk_level_count', query).then(res => {
if (res.records && res.records.length > 0) {
_data.general = _data.general + Number(res.records[0].general_count)
_data.major = _data.major + Number(res.records[0].major_count)
// 获取隐患排查治理数据
getTableList('risk_status_count', query, false, { signal: abortController.signal }).then(res => {
getTableList('risk_status_count', query).then(res => {
if (res.records && res.records.length > 0) {
// 接口返回的已经是百分比,直接使用
const record = res.records[0]
_data.overdue = Number(record.overdueCnt) || 0
_data.processed = Number(record.processedCnt) || 0
_data.processing = Number(record.processingCnt) || 0
_data.pending = 0 // 接口没有返回pending设为0
_data.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
console.log('risk_status_count 接口返回数据:', record)
console.log('处理后的 _data:', _data)
if (_data2.flag) {
// 合并数据
console.log("请求系统和第三方成功,合并数据", _data, _data2);
@@ -499,44 +443,30 @@ const handleHiddenDangerPannelData = (query) => {
dashboardData.value.hiddenDangerData.general = generalCnt
dashboardData.value.hiddenDangerData.major = majorCnt
// 如果第三方数据也是百分比,需要合并;否则使用系统数据
// 这里假设系统数据是百分比,第三方数据可能是数量或百分比
let overdueCnt, processedCnt, processingCnt, pendingCnt
if (_data2.overdue > 1 || _data2.processed > 1 || _data2.processing > 1) {
// 第三方数据可能是百分比,直接使用系统数据(因为系统数据更准确)
overdueCnt = _data.overdue.toFixed(2)
processedCnt = _data.processed.toFixed(2)
processingCnt = _data.processing.toFixed(2)
pendingCnt = _data.pending.toFixed(2)
} else {
// 第三方数据可能是数量,需要计算百分比
let totalCnt = generalCnt + majorCnt
overdueCnt = totalCnt > 0 ? ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2) : '0.00'
processedCnt = totalCnt > 0 ? ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2) : '0.00'
processingCnt = totalCnt > 0 ? ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2) : '0.00'
pendingCnt = totalCnt > 0 ? ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2) : '0.00'
}
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,
}
console.log('合并后的 progress:', dashboardData.value.hiddenDangerData.progress)
} else {
console.log("请求系统成功,展示数据", _data, _data2);
dashboardData.value.hiddenDangerData.general = _data.general
dashboardData.value.hiddenDangerData.major = _data.major
// 接口返回的已经是百分比,直接使用
let totalCnt = _data.general + _data.major
// 显示系统数据
dashboardData.value.hiddenDangerData.progress = {
overdue: _data.overdue.toFixed(2),
processed: _data.processed.toFixed(2),
processing: _data.processing.toFixed(2),
pending: _data.pending.toFixed(2),
overdue: (_data.overdue / totalCnt * 100).toFixed(2),
processed: (_data.processed / totalCnt * 100).toFixed(2),
processing: (_data.processing / totalCnt * 100).toFixed(2),
pending: (_data.pending / totalCnt * 100).toFixed(2),
}
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) {
_data2.general = Number(res.records[0].general)
_data2.major = Number(res.records[0].major)
// 安全指数另算,再起一个报表
// dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
// 在这里添加获取安全指数的逻辑
getTableList('hidden_danger_safety_index', query, false, { signal: abortController.signal }).then(res => {
if (res.records && res.records.length > 0) {
dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
}
}).catch(error => {
console.error('获取隐患排查治理数据失败:', error)
})
dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
// 获取隐患排查治理处理进度数据
getTableList('hidden_danger_process_progress', query, false, { signal: abortController.signal }).then(res => {
// if (res.records && res.records.length > 0) {
// _data2.flag = true
// _data2.overdue = Number(res.records[0].overdue) / 100 * (_data2.general + _data2.major)
// _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)
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
if (_data.flag) {
console.log("请求第三方和系统成功,合并数据", _data, _data2);
// 合并数据
let generalCnt = _data.general + _data2.general
let majorCnt = _data.major + _data2.major
dashboardData.value.hiddenDangerData.general = generalCnt
dashboardData.value.hiddenDangerData.major = majorCnt
// let totalCnt = generalCnt + majorCnt
// let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2)
// let processedCnt = ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2)
// let processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2)
// let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2)
// dashboardData.value.hiddenDangerData.progress = {
// overdue: overdueCnt,
// processed: processedCnt,
// processing: processingCnt,
// pending: pendingCnt,
// }
// } else {
// //显示三方数据
// console.log("请求第三方成功,展示数据", _data, _data2);
// dashboardData.value.hiddenDangerData.general = _data2.general
// dashboardData.value.hiddenDangerData.major = _data2.major
let totalCnt = generalCnt + majorCnt
let overdueCnt = ((_data.overdue + _data2.overdue) / totalCnt * 100).toFixed(2)
let processedCnt = ((_data.processed + _data2.processed) / totalCnt * 100).toFixed(2)
let processingCnt = ((_data.processing + _data2.processing) / totalCnt * 100).toFixed(2)
let pendingCnt = ((_data.pending + _data2.pending) / totalCnt * 100).toFixed(2)
dashboardData.value.hiddenDangerData.progress = {
overdue: overdueCnt,
processed: processedCnt,
processing: processingCnt,
pending: pendingCnt,
}
} else {
//显示三方数据
console.log("请求第三方成功,展示数据", _data, _data2);
dashboardData.value.hiddenDangerData.general = _data2.general
dashboardData.value.hiddenDangerData.major = _data2.major
// dashboardData.value.hiddenDangerData.progress = {
// overdue: res.records[0].overdue,
// processed: res.records[0].processed,
// processing: res.records[0].processing,
// pending: res.records[0].pending,
// }
// }
// }
dashboardData.value.hiddenDangerData.progress = {
overdue: res.records[0].overdue,
processed: res.records[0].processed,
processing: res.records[0].processing,
pending: res.records[0].pending,
}
}
}
}).catch(error => {
console.error('获取隐患排查治理处理进度数据失败:', error)
})
@@ -616,7 +537,7 @@ const handleHiddenDangerPannelData = (query) => {
try {
// 获取隐患排查治理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) {
dashboardData.value.hiddenDangerData.top3Types = res.records
}
@@ -631,120 +552,96 @@ const handleHiddenDangerPannelData = (query) => {
// 处理风险统计tab切换
const handleRiskTabChange = async (tab: TabType) => {
console.log('Tab changed to:', tab)
try {
let workOrderType = ''
let code = ''
switch (tab) {
case '安全类事项':
workOrderType = '安全生产'
case '危险作业':
code = 'hazardous_operations'
break
case '工程类事项':
workOrderType = '物业服务-工程'
case '安全考核':
code = 'safety_assessment'
break
case '安全、保密培训':
code = 'security_training'
break
default:
workOrderType = '安全生产'
code = 'hazardous_operations'
}
// 同时获取维保任务和巡检任务的数据
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 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 []
}
const maintenanceRecords = getRecords(maintenanceResponse)
const inspectionRecords = getRecords(inspectionResponse)
console.log('维保任务数据:', maintenanceResponse, '提取的records:', maintenanceRecords)
console.log('巡检任务数据:', inspectionResponse, '提取的records:', inspectionRecords)
// 周期映射
const cycleMap: Record<string, string> = {
'day': '每日',
'month': '每月',
'year': '每年'
}
// 将API数据转换为图表数据格式
const convertToChartData = (records: any[], taskTypeName: string): any[] => {
const charts: any[] = []
// 按周期分组
const cycleGroups: Record<string, any> = {}
records.forEach((record: any) => {
const cycle = record.cycle || 'day'
if (!cycleGroups[cycle]) {
cycleGroups[cycle] = record
if (code == 'hazardous_operations') {
// 根据不同的tab请求不同的接口
getTableList(
code,
{ ...query, activeTab: tab }
).then(response => {
// 更新风险统计数据 - 传递完整的数组数据用于饼图显示
if (response.records && response.records.length > 0) {
dangerDetail.value = response.records
}
}).catch(error => {
console.error('获取风险统计数据失败:', error)
if (isFirstLoad.value) {
// dangerDetail.value = [
// {
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
// alarm_level_code: 'general',
// alarm_status: '已关闭',
// alarm_biz_id: '20250827164305283937'
// },
// {
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
// alarm_level_code: 'general',
// alarm_status: '已关闭',
// alarm_biz_id: '20250827164305283937'
// }, {
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
// alarm_level_code: 'general',
// alarm_status: '已关闭',
// alarm_biz_id: '20250827164305283937'
// }, {
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
// alarm_level_code: 'general',
// alarm_status: '已关闭',
// alarm_biz_id: '20250827164305283937'
// }, {
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
// alarm_level_code: 'general',
// alarm_status: '已关闭',
// alarm_biz_id: '20250827164305283937'
// }, {
// description: '2025-08-10 上午8:00 武汉园区隐患内容管理 状态 处理',
// alarm_level_code: 'general',
// alarm_status: '已关闭',
// alarm_biz_id: '20250827164305283937'
// }
// ]
}
})
// 创建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
}
})
} else {
// 根据不同的tab请求不同的接口
getTableList(
code,
{ ...query, activeTab: tab }
).then(response => {
// 更新风险统计数据 - 传递完整的数组数据用于饼图显示
if (response.records && response.records.length > 0) {
riskStatistics.value = response.records
} else {
// 如果没有数据,设置默认值
riskStatistics.value = [
{
csmpus_name: "雄安新区总部",
finishCount: "0",
participateCount: "0"
}
]
}
}).catch(error => {
console.error('获取风险统计数据失败:', error)
})
return charts
}
// 转换维保和巡检数据
const maintenanceCharts = convertToChartData(maintenanceRecords, '维保类')
const inspectionCharts = convertToChartData(inspectionRecords, '巡检类')
// 合并为6个图表先维保3个后巡检3个
const allCharts = [...maintenanceCharts, ...inspectionCharts]
// 更新riskStatistics
riskStatistics.value[tab] = allCharts
console.log('更新后的riskStatistics:', riskStatistics.value)
console.log('当前tab的图表数据:', allCharts)
} catch (error) {
console.error('获取风险统计数据失败:', error)
}
// 第一次加载完成后,隐藏骨架屏
if (isFirstLoading.value) {
isFirstLoading.value = false
console.log('隐藏骨架屏')
}
}
// 方法定义
@@ -753,10 +650,15 @@ const onRegionChange = (item: RegionItem): void => {
parkValue.value = item.code
router.push({
path: '/screen/company',
query: {parkName: item.name, parkCode: item.code}
query: { parkName: item.name, parkCode: item.code }
})
}
// 打开区域选择器
const openRegionSelector = (): void => {
regionSelectorVisible.value = true
}
// 更新时间
const updateTime = (): void => {
const now = new Date()
@@ -1317,20 +1219,23 @@ const timeOut1 = (): void => {
.left-top {
padding: 0 5px;
background-image: url('@/assets/images/screen/left_top_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-image:
url('@/assets/images/screen/left_top_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;
background-size:
100% 90px,
cover,
100% 68px;
flex: 1;
/* 设置重复方式 */
@@ -1491,20 +1396,23 @@ const timeOut1 = (): void => {
}
.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-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;
background-size:
100% 90px,
cover,
100% 68px;
flex: 1;
/* 设置重复方式 */
@@ -1554,6 +1462,8 @@ const timeOut1 = (): void => {
row-gap: 1rem;
}
.center-container {

View File

@@ -73,24 +73,24 @@ export const exportExcelData = (reportCode, data?) => {
}
//获取报表数据
export const getTableList = (reportCode, data?, isOpen?, options = {}) => {
return request.post({ url: `/jeelowcode/${isOpen ? 'open/report' : 'report-data'}/list/${reportCode}`, data, ...options })
export const getTableList = (reportCode, data?, isOpen?) => {
return request.post({ url: `/jeelowcode/${isOpen ? 'open/report' : 'report-data'}/list/${reportCode}`, data })
}
export const getDangerDetail = (campus_id: string, options = {}) => {
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_danger_detail', data: {campus_id}, ...options })
export const getDangerDetail = (campus_id: string) => {
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_danger_detail', data: {campus_id} })
}
export const getZBDangerSum = (campus_id: string) => {
return request.post({ url: '/jeelowcode/report-data/list/dp_zb_danger_sum', data: {campus_id} })
}
export const getDangerCount = (campus_id: string, options = {}) => {
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_danger_sum', data: {campus_id}, ...options })
export const getDangerCount = (campus_id: string) => {
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_danger_sum', data: {campus_id} })
}
export const getExamDetail = (campus_id: string, options = {}) => {
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_exam_detail', data: {campus_id}, ...options })
export const getExamDetail = (campus_id: string) => {
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_exam_detail', data: {campus_id} })
}
export const getExamSum = (campus_id: string) => {
@@ -101,13 +101,13 @@ export const getDrillSum = (campus_id: string) => {
return request.post({ url: '/jeelowcode/report-data/list/dp_zb_drill_sum', data: {campus_id} })
}
export const getDrillDetail = (campus_id: string, options = {}) => {
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_drill_detail', data: {campus_id}, ...options })
export const getDrillDetail = (campus_id: string) => {
return request.post({ url: '/jeelowcode/report-data/list/dp_yq_drill_detail', data: {campus_id} })
}
//获取报表数据
export const getTableData = (tableId, data?, options = {}) => {
return request.post({ url: `/jeelowcode/dbform-data/list/${tableId}`, data, ...options })
export const getTableData = (tableId, data?) => {
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 })
}
// 总部安全类 /jeelowcode/report-data/list/report_work_order_statistics
// report_work_order_statistics
// 场景一:安全类,维保
// 参数workOrderType'安全生产'taskType'维保任务'
// 场景二:安全类,巡检
// 参数workOrderType'安全生产'taskType'巡检任务'
// 场景三:工程类,维保
// 参数workOrderType'物业服务-工程'taskType'维保任务'
// 场景四:工程类,巡检
// 参数workOrderType'物业服务-工程'taskType'巡检任务'
// 统计周期 cycle: daymonthyear 对应月日年
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 })
}

View File

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