Compare commits
1 Commits
87953743e2
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
93ecebcb2e |
2
.env.dev
2
.env.dev
@@ -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
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -68,7 +68,3 @@ export const createProcessInstanceCC = async (data) => {
|
||||
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})
|
||||
}
|
||||
|
||||
@@ -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}` })
|
||||
|
||||
141
src/api/index.ts
141
src/api/index.ts
@@ -1,141 +0,0 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
// 获取集团外协管理数据
|
||||
export const getOutsourcingManagementData = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_wx_jt', data })
|
||||
}
|
||||
|
||||
// 获取集团风险管理数据
|
||||
export const getRiskManagementData = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_fx_jt', data })
|
||||
}
|
||||
|
||||
// 数据看板-隐患管理-集团(天) /jeelowcode/report-data/list/kb_yh_jt_d
|
||||
export const getHiddenDangerManagementData = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_yh_jt_d', data })
|
||||
}
|
||||
|
||||
// 数据看板-隐患管理-集团(周) /jeelowcode/report-data/list/kb_yh_jt_w
|
||||
export const getHiddenDangerManagementDataWeek = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_yh_jt_w', data })
|
||||
}
|
||||
|
||||
// 数据看板-隐患管理-集团(月) /jeelowcode/report-data/list/kb_yh_jt_m
|
||||
export const getHiddenDangerManagementDataMonth = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_yh_jt_m', data })
|
||||
}
|
||||
|
||||
// 数据看板-高危作业-集团 /jeelowcode/report-data/list/kb_gw_jt
|
||||
export const getHighRiskManagementData = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_gw_jt', data })
|
||||
}
|
||||
|
||||
// 数据看板-应急预案-集团 /jeelowcode/report-data/list/kb_yj_jt
|
||||
export const getEmergencyPlanManagementData = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_yj_jt', data })
|
||||
}
|
||||
|
||||
// 数据看板-培训-集团 /jeelowcode/report-data/list/kb_px_jt
|
||||
export const getTrainingManagementData = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_px_jt', data })
|
||||
}
|
||||
|
||||
// 数据看板-外协管理-区域 /jeelowcode/report-data/list/kb_wx_qy
|
||||
export const getOutsourcingManagementDataRegion = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_wx_qy', data })
|
||||
}
|
||||
|
||||
// 数据看板-外协管理-园区 /jeelowcode/report-data/list/kb_wx_yq
|
||||
export const getOutsourcingManagementDataPark = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_wx_yq', data })
|
||||
}
|
||||
|
||||
// 数据看板-风险管理-区域 /jeelowcode/report-data/list/kb_fx_qy
|
||||
export const getRiskManagementDataRegion = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_fx_qy', data })
|
||||
}
|
||||
|
||||
// 数据看板-风险管理-园区 /jeelowcode/report-data/list/kb_fx_yq
|
||||
export const getRiskManagementDataPark = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_fx_yq', data })
|
||||
}
|
||||
|
||||
// 数据看板-隐患管理-区域(天) /jeelowcode/report-data/list/kb_yh_qy_d
|
||||
export const getHiddenDangerManagementDataRegion = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_yh_qy_d', data })
|
||||
}
|
||||
|
||||
// 数据看板-隐患管理-区域(周) /jeelowcode/report-data/list/kb_yh_qy_w
|
||||
export const getHiddenDangerManagementDataRegionWeek = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_yh_qy_w', data })
|
||||
}
|
||||
|
||||
// 数据看板-隐患管理-区域(月) /jeelowcode/report-data/list/kb_yh_qy_m
|
||||
export const getHiddenDangerManagementDataRegionMonth = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_yh_qy_m', data })
|
||||
}
|
||||
|
||||
// 数据看板-隐患管理-园区(天)
|
||||
export const getHiddenDangerManagementDataPark = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_gw_qy_d', data })
|
||||
}
|
||||
|
||||
// 数据看板-隐患管理-园区(周) /jeelowcode/report-data/list/kb_yh_yq_w
|
||||
export const getHiddenDangerManagementDataParkWeek = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_yh_yq_w', data })
|
||||
}
|
||||
|
||||
// 数据看板-隐患管理-园区(月) /jeelowcode/report-data/list/kb_yh_yq_m
|
||||
export const getHiddenDangerManagementDataParkMonth = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_yh_yq_m', data })
|
||||
}
|
||||
|
||||
// 数据看板-高危作业-区域 /jeelowcode/report-data/list/kb_gw_dq
|
||||
export const getHighRiskManagementDataRegion = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_gw_dq', data })
|
||||
}
|
||||
|
||||
// 数据看板-高危作业-园区 /jeelowcode/report-data/list/kb_gw_yq
|
||||
export const getHighRiskManagementDataPark = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_gw_yq', data })
|
||||
}
|
||||
|
||||
// 数据看板-应急预案-区域 /jeelowcode/report-data/list/kb_yj_dq
|
||||
export const getEmergencyPlanManagementDataRegion = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_yj_dq', data })
|
||||
}
|
||||
|
||||
// 数据看板-应急预案-园区 /jeelowcode/report-data/list/kb_yj_yq
|
||||
export const getEmergencyPlanManagementDataPark = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_yj_yq', data })
|
||||
}
|
||||
|
||||
// 数据看板-安全培训-区域 /jeelowcode/report-data/list/kb_px_qy
|
||||
export const getTrainingManagementDataRegion = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_px_qy', data })
|
||||
}
|
||||
|
||||
// 数据看板-安全培训-园区 /jeelowcode/report-data/list/kb_px_yq
|
||||
export const getTrainingManagementDataPark = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/kb_px_yq', data })
|
||||
}
|
||||
|
||||
// 动环监控-总设备数 /jeelowcode/power_env_device_totol_num
|
||||
export const getPowerEnvDeviceTotalNum = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/power_env_device_totol_num', data })
|
||||
}
|
||||
|
||||
// 动环监控-告警设备类型分布 /jeelowcode/power_env_device_alarm_distribution
|
||||
export const getPowerEnvDeviceAlarmDistribution = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/power_env_device_alarm_distribution', data })
|
||||
}
|
||||
|
||||
// 动环监控-当月告警趋势 /jeelowcode/power_env_alarm_trend
|
||||
export const getPowerEnvAlarmTrend = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/power_env_alarm_trend', data })
|
||||
}
|
||||
|
||||
// 动环监控-园区信息列表 /jeelowcode/power_env_device_group_type_campus
|
||||
export const getPowerEnvDeviceGroupTypeCampus = (data) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/power_env_device_group_type_campus', data })
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
<svg class="trend-icon" viewBox="0 0 1024 1024" width="16" height="16" fill="currentColor">
|
||||
<path d="M868 545.5L536.1 163a31.96 31.96 0 0 0-48.3 0L156 545.5a7.97 7.97 0 0 0 6 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 369 B |
@@ -1,107 +0,0 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
|
||||
<div v-for="taskAssignRule in props?.taskAssignRules" :key="taskAssignRule.taskDefinitionKey">
|
||||
<el-divider content-position="left">审批节点：{{ taskAssignRule?.taskDefinitionName }}</el-divider>
|
||||
<el-form-item :label="'候选人'"
|
||||
:prop="taskAssignRule.taskDefinitionKey"
|
||||
label-width="122">
|
||||
<UserSelect
|
||||
v-model="formData[taskAssignRule.taskDefinitionKey]"
|
||||
:column="userSelectColumn"
|
||||
:prop="taskAssignRule.taskDefinitionKey"
|
||||
type="edit"
|
||||
:func="(value)=>{console.log(JSON.stringify(value))}"
|
||||
>
|
||||
</UserSelect>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// 从 UserSelect 组件导入 Column 类型
|
||||
import type {Column} from '@/components/LowDesign/src/shareControl/UserSelect.vue'
|
||||
|
||||
// 定义组件选项
|
||||
defineOptions({
|
||||
name: "BpmTaskSelectAssigneeForm"
|
||||
})
|
||||
|
||||
interface TaskAssignRule {
|
||||
id: number
|
||||
modelId: string
|
||||
processDefinitionId: string
|
||||
taskDefinitionKey: string
|
||||
taskDefinitionName: string
|
||||
type: number
|
||||
options: number[]
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
taskAssignRules: TaskAssignRule[]
|
||||
modelValue: {}
|
||||
}>()
|
||||
|
||||
const formRef = ref()
|
||||
const formData = ref(props.modelValue)
|
||||
const formRules = ref({})
|
||||
const userSelectColumn: Column = {
|
||||
label: '候选人',
|
||||
findType: 'all',
|
||||
multiple: false,
|
||||
columnKey: ['sex', 'post', 'deptName']
|
||||
}
|
||||
|
||||
const emit = defineEmits(['updateModelValue'])
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val: {}) => {
|
||||
formData.value = val
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => formData.value,
|
||||
(val: {}) => {
|
||||
emit('updateModelValue', val)
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
)
|
||||
|
||||
const validateAssignee = (successCallBack: () => void, failCallback: () => void) => {
|
||||
formRef.value.validate((valid: boolean) => {
|
||||
if (valid) successCallBack()
|
||||
else failCallback()
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({validateAssignee})
|
||||
|
||||
// 初始化 formData
|
||||
onMounted(() => {
|
||||
if (props.taskAssignRules) {
|
||||
props.taskAssignRules.forEach(rule => {
|
||||
formData.value[rule.taskDefinitionKey] = ''
|
||||
formRules.value[rule.taskDefinitionKey] = [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择候选人',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@@ -18,18 +18,6 @@
|
||||
v-bind="userVBind"
|
||||
class="w-100%"
|
||||
></userSelect>
|
||||
</span>
|
||||
<span prop="delegateDictId" style="display:none">
|
||||
|
||||
<DicTableSelect
|
||||
id="costomDictSelect"
|
||||
:column="distSelectColumn"
|
||||
size="default"
|
||||
type="add"
|
||||
prop="fields_7897245"
|
||||
:scope="dictSelectScope"
|
||||
@set-form-data="handleSetFormData"
|
||||
></DicTableSelect>
|
||||
</span>
|
||||
<!-- 顶部统计 -->
|
||||
<div
|
||||
@@ -395,108 +383,12 @@ interface Props {
|
||||
dicRowKey?: string //dicTable模式 行数据的 Key
|
||||
}
|
||||
|
||||
const dictSelectScope = {
|
||||
"key": 0,
|
||||
"value": "",
|
||||
"column": {
|
||||
"type": "dicTableSelect",
|
||||
"controlType": "select",
|
||||
"label": "表格选择框",
|
||||
// "fixedSearch":{
|
||||
// "approveStatusName":"已审批"
|
||||
// },
|
||||
"separator": " | ",
|
||||
"multiple": true,
|
||||
"display": true,
|
||||
"span": 12,
|
||||
"disabled": false,
|
||||
"required": false,
|
||||
"hideLabel": false,
|
||||
"i18nCode": "fields_7897245",
|
||||
"dictTable": "1959187451673116674",
|
||||
"dictCode": "id",
|
||||
"dictText": "personName",
|
||||
"dictTableColumn": [
|
||||
"personName",
|
||||
"personAge",
|
||||
"personSex",
|
||||
"mobile",
|
||||
"approveStatusName"
|
||||
],
|
||||
"prop": "fields_7897245",
|
||||
"dataType": "string",
|
||||
"className": "control-dicTableSelect control-fields_7897245 ",
|
||||
"props": {
|
||||
"lable": "personName",
|
||||
"value": "id"
|
||||
},
|
||||
"rules": [
|
||||
|
||||
]
|
||||
},
|
||||
"size": "default",
|
||||
"disabled": false
|
||||
}
|
||||
|
||||
const distSelectColumn = {
|
||||
"type": "dicTableSelect",
|
||||
"controlType": "select",
|
||||
"multiple": true,
|
||||
"label": "表格选择框",
|
||||
"separator": " | ",
|
||||
"display": true,
|
||||
"span": 12,
|
||||
"disabled": false,
|
||||
// "fixedSearch":{
|
||||
// "approveStatusName":"已审批"
|
||||
// },
|
||||
"required": false,
|
||||
"hideLabel": false,
|
||||
"i18nCode": "fields_7897245",
|
||||
"dictTable": "1959187451673116674",
|
||||
"dictCode": "id",
|
||||
"dictText": "personName",
|
||||
"dictTableColumn": [
|
||||
"personName",
|
||||
"personAge",
|
||||
"personSex",
|
||||
"mobile",
|
||||
"approveStatusName"
|
||||
]
|
||||
,
|
||||
"prop": "fields_7897245",
|
||||
"dataType": "string",
|
||||
"className": "control-dicTableSelect control-fields_7897245 ",
|
||||
"props": {
|
||||
"lable": "personName",
|
||||
"value": "id"
|
||||
},
|
||||
"rules": [
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
model: 'default',
|
||||
fixedSearch: () => {
|
||||
return {}
|
||||
}
|
||||
})
|
||||
const handleSetFormData = (key, val) => {
|
||||
const cleaned = val.split('|').map(s => s.trim()).join(','); // "1975577437793124352 | 1965778349088899074"
|
||||
console.log(cleaned);
|
||||
// 在这里添加其他处理逻辑
|
||||
useFun.requestApi('get', '/jeelowcode/outsidePerson/importOutside?tableId='+props.tableId+'&ids=' + cleaned, {
|
||||
}).then(res => {
|
||||
if (res.length > 0) {
|
||||
message.success('下发成功')
|
||||
useFun.refreshChange()
|
||||
} else {
|
||||
message.error(res.message)
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
const userVBind = {
|
||||
prop: 'delegateUserId',
|
||||
type: 'edit',
|
||||
@@ -548,17 +440,6 @@ const userVBind = {
|
||||
}else if(props.tableId=='1968562717683908610'){ // 考试计划
|
||||
useFun.requestApi('get', '/jeelowcode/examIssus/addRecord?tableId='+props.tableId+'&ids=' + ids+'&userIds='+resultValue, {
|
||||
|
||||
}).then(res => {
|
||||
if (res.length > 0) {
|
||||
message.success('下发成功')
|
||||
useFun.refreshChange()
|
||||
} else {
|
||||
message.error(res.message)
|
||||
}
|
||||
})
|
||||
}else if(props.tableId=='1983351353033953281'){ // 工作事项
|
||||
useFun.requestApi('get', '/jeelowcode/itemIssus/addResult?tableId='+props.tableId+'&ids=' + ids+'&userIds='+resultValue, {
|
||||
|
||||
}).then(res => {
|
||||
if (res.length > 0) {
|
||||
message.success('下发成功')
|
||||
|
||||
@@ -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]
|
||||
})
|
||||
|
||||
@@ -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'> //扩展显示列
|
||||
|
||||
@@ -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: [
|
||||
|
||||
@@ -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: (tableId, data) => exportExcelDataCustom(tableId, data),
|
||||
cloneDeep, //深拷贝
|
||||
listToTree,//列表转树结构
|
||||
formatDate,//时间格式化
|
||||
|
||||
@@ -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')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
//坐标转换函数
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -16,7 +16,7 @@ const config: {
|
||||
/**
|
||||
* 接口请求超时时间
|
||||
*/
|
||||
request_timeout: 300000,
|
||||
request_timeout: 30000,
|
||||
|
||||
/**
|
||||
* 默认接口请求类型
|
||||
|
||||
@@ -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))
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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'),
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -227,11 +227,13 @@ const getCookie = () => {
|
||||
// 根据域名，获得租户信息
|
||||
const getTenantByWebsite = async () => {
|
||||
const website = location.host
|
||||
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()
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -41,20 +41,18 @@
|
||||
<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>
|
||||
<el-button type="warning" @click="handleBack(item)">
|
||||
<Icon icon="ep:back" />
|
||||
回退
|
||||
@@ -104,7 +102,6 @@
|
||||
<TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />
|
||||
<!-- 加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
|
||||
<TaskAddSignDialogForm ref="taskAddSignDialogForm" @success="getDetail" />
|
||||
<TaskCCDialogForm ref="taskCCDialogForm"/>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
@@ -122,7 +119,6 @@ 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'
|
||||
|
||||
defineOptions({ name: 'BpmProcessInstanceDetail' })
|
||||
|
||||
@@ -132,7 +128,6 @@ 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
|
||||
@@ -178,17 +173,9 @@ 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',
|
||||
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,
|
||||
@@ -343,7 +317,6 @@ const loadRunningTask = (tasks) => {
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(async() => {
|
||||
await handleRead()
|
||||
await getDetail()
|
||||
await nextTick()
|
||||
if (query.isPrint === '1') {
|
||||
|
||||
@@ -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,20 +47,20 @@
|
||||
<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>
|
||||
@@ -204,8 +203,7 @@ const searchChange = (params, done) => {
|
||||
|
||||
/** 清空按钮操作 */
|
||||
const resetChange = () => {
|
||||
searchChange({}, () => {
|
||||
})
|
||||
searchChange({}, () => {})
|
||||
}
|
||||
|
||||
const sizeChange = (pageSize) => {
|
||||
|
||||
@@ -1,175 +0,0 @@
|
||||
<!-- 工作流，抄送我的流程 -->
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<avue-crud
|
||||
ref="crudRef"
|
||||
v-model="tableForm"
|
||||
v-model:page="tablePage"
|
||||
v-model:search="tableSearch"
|
||||
:data="tableData"
|
||||
:option="tableOption"
|
||||
:permission="permission"
|
||||
@search-change="searchChange"
|
||||
@search-reset="resetChange"
|
||||
@refresh-change="getTableData"
|
||||
@size-change="sizeChange"
|
||||
@current-change="currentChange"
|
||||
>
|
||||
<template #menu="{ row }">
|
||||
<el-button link type="primary" @click="handleAudit(row)">流程</el-button>
|
||||
</template>
|
||||
</avue-crud>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {dateFormatter} from '@/utils/formatTime'
|
||||
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
|
||||
|
||||
defineOptions({
|
||||
name: 'BpmCopyTask'
|
||||
})
|
||||
|
||||
// 路由
|
||||
const {push} = useRouter()
|
||||
// 列表的加载中
|
||||
const loading = ref(true)
|
||||
|
||||
const {getCurrPermi} = useCrudPermi()
|
||||
|
||||
// 表格的配置
|
||||
const tableOption = reactive({
|
||||
addBtn: false,
|
||||
editBtn: false,
|
||||
delBtn: false,
|
||||
viewBtn: true,
|
||||
viewBtnText: '详情',
|
||||
viewBtnIcon: 'none',
|
||||
align: 'center',
|
||||
headerAlign: 'center',
|
||||
searchMenuSpan: 6,
|
||||
searchMenuPosition: 'left',
|
||||
labelSuffix: ' ',
|
||||
span: 24,
|
||||
dialogWidth: '50%',
|
||||
column: {
|
||||
taskId: {
|
||||
label: '任务编号'
|
||||
},
|
||||
taskName: {
|
||||
label: '任务名称'
|
||||
},
|
||||
processInstanceId: {
|
||||
label: '流程编号',
|
||||
search: true,
|
||||
},
|
||||
processInstanceName: {
|
||||
label: '所属流程',
|
||||
search: true,
|
||||
},
|
||||
startUserNickname: {
|
||||
label: '流程发起人',
|
||||
},
|
||||
reason: {
|
||||
label: '抄送原因'
|
||||
},
|
||||
creatorNickname: {
|
||||
label: '抄送人'
|
||||
},
|
||||
createTime: {
|
||||
label: '抄送时间',
|
||||
type: 'datetime',
|
||||
width: 180,
|
||||
formatter: (row: any, value: any, rowv: any, column: any) => {
|
||||
return dateFormatter(row, column, value)
|
||||
}
|
||||
},
|
||||
searchCreateTime: {
|
||||
label: '抄送时间',
|
||||
display: false,
|
||||
hide: true,
|
||||
search: true,
|
||||
searchType: 'datetimerange',
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
startPlaceholder: '开始时间',
|
||||
endPlaceholder: '结束时间',
|
||||
searchRange: true,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const tableForm = ref<any>({})
|
||||
const tableData = ref([])
|
||||
const tableSearch = ref<any>({})
|
||||
const tablePage = ref({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
})
|
||||
|
||||
const permission = getCurrPermi(['bpm:task'])
|
||||
|
||||
const crudRef = ref()
|
||||
useCrudHeight(crudRef)
|
||||
|
||||
const getTableData = async () => {
|
||||
// 列表的加载中...
|
||||
loading.value = true
|
||||
// 拼接查询参数
|
||||
let searchObj = {
|
||||
...tableSearch.value,
|
||||
pageNo: tablePage.value.currentPage,
|
||||
pageSize: tablePage.value.pageSize
|
||||
}
|
||||
// 处理时间参数，如果为空则去掉这个属性
|
||||
if (!searchObj.createTime?.length) delete searchObj.createTime
|
||||
// 去掉空字符串属性
|
||||
for (let key in searchObj) if (searchObj[key] === '') delete searchObj[key]
|
||||
|
||||
// 请求我的待阅数据
|
||||
try {
|
||||
const data = await ProcessInstanceApi.getProcessInstanceCCPage(searchObj)
|
||||
tableData.value = data.list
|
||||
tablePage.value.total = data.total
|
||||
} finally {
|
||||
// 无论请求成功或者失败，这里都需要将加载中关闭
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const searchChange = (params: any, done: any) => {
|
||||
tablePage.value.currentPage = 1
|
||||
// 获取数据
|
||||
getTableData().finally(() => done())
|
||||
}
|
||||
|
||||
const resetChange = () => {
|
||||
searchChange({}, () => {
|
||||
})
|
||||
}
|
||||
|
||||
const sizeChange = (pageSize) => {
|
||||
tablePage.value.pageSize = pageSize
|
||||
resetChange()
|
||||
}
|
||||
|
||||
const currentChange = (currentPage) => {
|
||||
tablePage.value.currentPage = currentPage
|
||||
getTableData()
|
||||
}
|
||||
|
||||
const handleAudit = (row: any) => {
|
||||
push({
|
||||
name: 'BpmProcessInstanceDetail',
|
||||
query: {
|
||||
id: row.processInstanceId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
onMounted(async () => {
|
||||
await getTableData()
|
||||
})
|
||||
|
||||
</script>
|
||||
@@ -26,7 +26,7 @@
|
||||
</template>
|
||||
<template #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" />
|
||||
|
||||
@@ -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
|
||||
@@ -96,8 +95,7 @@ const tableOption = reactive({
|
||||
postIds: { display: false },
|
||||
userIds: { display: false },
|
||||
userGroupIds: { display: false },
|
||||
scripts: {display: false},
|
||||
userSelects: {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])
|
||||
|
||||
@@ -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的事件动作
|
||||
|
||||
@@ -86,17 +86,6 @@
|
||||
<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">
|
||||
@@ -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>
|
||||
@@ -431,8 +417,7 @@
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="copySampleStr(key)"
|
||||
>点击复制
|
||||
</el-button
|
||||
>点击复制</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1539,8 +1524,7 @@ const searchChange = (params, done) => {
|
||||
|
||||
/** 清空按钮操作 */
|
||||
const resetChange = () => {
|
||||
searchChange({}, () => {
|
||||
})
|
||||
searchChange({}, () => {})
|
||||
}
|
||||
|
||||
const sizeChange = (pageSize) => {
|
||||
@@ -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)
|
||||
|
||||
@@ -70,20 +70,17 @@
|
||||
</div>
|
||||
<div class="bottom-card">
|
||||
<div class="bottom-card-title">
|
||||
<!-- 隐患排查治理 标题需要隐藏 2025-10-31 -->
|
||||
<span></span>
|
||||
<span>隐患排查治理</span>
|
||||
<img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
|
||||
</div>
|
||||
<div class="type-wrapper">
|
||||
<div class="type-item">
|
||||
<span class="type-btn yellow">重大</span>
|
||||
<span class="type-num cursor-pointer" @click="handleSeverityCountClick">{{
|
||||
mockData.hiddenDangerData.severityCount }}</span>
|
||||
<span class="type-num">{{ mockData.hiddenDangerData.severityCount }}</span>
|
||||
</div>
|
||||
<div class="type-item">
|
||||
<span class="type-btn green">一般</span>
|
||||
<span class="type-num cursor-pointer" @click="handleGeneralCountClick">{{
|
||||
mockData.hiddenDangerData.generalCount }}</span>
|
||||
<span class="type-num">{{ mockData.hiddenDangerData.generalCount }}</span>
|
||||
</div>
|
||||
<!-- <div class="type-item">
|
||||
<span class="type-btn blue">较大</span>
|
||||
@@ -106,15 +103,15 @@
|
||||
</div>
|
||||
<!-- 左下区域 -->
|
||||
<div class="left-bottom">
|
||||
<!-- <div class="panel-title">
|
||||
<div class="panel-title">
|
||||
<div class="tabs">
|
||||
<span class="tab" :class="{ active: activeTab === '高危作业' }" @click="handleTabClick('高危作业')">高危作业</span>
|
||||
<span class="divider">|</span>
|
||||
<span class="tab" :class="{ active: activeTab === '安全培训考试' }"
|
||||
<span
|
||||
class="tab" :class="{ active: activeTab === '安全培训考试' }"
|
||||
@click="handleTabClick('安全培训考试')">安全培训考试</span>
|
||||
<span class="divider">|</span>
|
||||
<span class="tab" :class="{ active: activeTab === '应急预案及演练' }"
|
||||
@click="handleTabClick('应急预案及演练')">应急预案及演练</span>
|
||||
<span class="tab" :class="{ active: activeTab === '应急预案及演练' }" @click="handleTabClick('应急预案及演练')">应急预案及演练</span>
|
||||
</div>
|
||||
</div>
|
||||
<img style="margin: 8px 0" src="@/assets/images/title_border_line.png" />
|
||||
@@ -163,12 +160,9 @@
|
||||
<img width="50%" style="margin: 8px 0" src="@/assets/images/line_1.png" />
|
||||
</div>
|
||||
</div>
|
||||
<AlertList maxHeight="40vh" style="margin-left: 1vw;" :table-title="trainingTableTitle"
|
||||
:list-data="drillList" />
|
||||
<AlertList maxHeight="40vh" style="margin-left: 1vw;" :table-title="trainingTableTitle" :list-data="drillList" />
|
||||
</template>
|
||||
</div> -->
|
||||
<RiskStatisticsPanel :riskStatistics="riskStatistics" :dangerDetail="dangerDetail" :park="parkValue"
|
||||
@tab-change="handleRiskTabChange" :campus_id="query.campus_id" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-wrapper">
|
||||
@@ -197,13 +191,11 @@
|
||||
</div>
|
||||
<div class="col-item" style=" display: flex;margin-left: 2vw; align-items: center;">
|
||||
<span>待处理</span>
|
||||
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.pending
|
||||
}}</span>
|
||||
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.pending }}</span>
|
||||
</div>
|
||||
<div class="col-item" style=" display: flex;margin-left: 2vw; align-items: center;">
|
||||
<span>处理中</span>
|
||||
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.processing
|
||||
}}</span>
|
||||
<span style="font-size: 1.2rem; marker-start: 2vw; color: yellow;">{{ mockData.alertData.processing }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -225,8 +217,7 @@
|
||||
<div class="col-item">
|
||||
<img src="@/assets/images/screen/warning_img.png" width="23" />
|
||||
<span>超时工单数</span>
|
||||
<span style="font-size: 1.2rem; marker-start: 2vw; color: red;">{{ mockData.timeoutWorkOrders.total
|
||||
}}</span>
|
||||
<span style="font-size: 1.2rem; marker-start: 2vw; color: red;">{{ mockData.timeoutWorkOrders.total }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -237,12 +228,14 @@
|
||||
</div>
|
||||
<div class="center-container">
|
||||
<!-- 中部区域 -->
|
||||
<ParkCenter :parkName="selectedPark" :backgroundImage="backgroundImage" @point-hover="handlePointHover"
|
||||
<ParkCenter
|
||||
:parkName="selectedPark" :backgroundImage="backgroundImage" @point-hover="handlePointHover"
|
||||
@point-leave="handlePointLeave" />
|
||||
</div>
|
||||
|
||||
<!-- 点位信息弹窗 -->
|
||||
<PointInfoPopup v-if="showPointPopup" :visible="showPointPopup" :point-info="currentPoint"
|
||||
<PointInfoPopup
|
||||
v-if="showPointPopup" :visible="showPointPopup" :point-info="currentPoint"
|
||||
:park-name="selectedPark || '雄安园区'" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -255,8 +248,7 @@ import ParkCenter from './components/ParkCenter.vue'
|
||||
import PointInfoPopup from './components/PointInfoPopup.vue'
|
||||
import WeatherWarning from './components/WeatherWarning.vue'
|
||||
import AlertList from './components/AlertList.vue'
|
||||
import { getTableList, getTableData, getDangerDetail, getDangerCount, getExamDetail, getDrillDetail, getWorkOrderStatistics } from './report'
|
||||
import RiskStatisticsPanel from './components/RiskStatisticsPanel.vue'
|
||||
import { getTableList, getTableData, getDangerDetail, getDangerCount, getExamDetail, getDrillDetail } from './report'
|
||||
|
||||
interface PointPosition {
|
||||
label: string
|
||||
@@ -290,110 +282,6 @@ const unfinishedCount = ref<number>(0)
|
||||
const inProgressCount = ref<number>(0)
|
||||
const finishedCount = ref<number>(0)
|
||||
|
||||
const handleSeverityCountClick = () => {
|
||||
window.open('http://10.0.64.20/configcenter/console/device-manage', '_blank')
|
||||
}
|
||||
const handleGeneralCountClick = () => {
|
||||
window.open('http://10.0.64.20/configcenter/console/device-manage', '_blank')
|
||||
}
|
||||
|
||||
const riskStatistics = ref<any>({
|
||||
'安全类': [],
|
||||
'工程类': []
|
||||
})
|
||||
const dangerDetail = ref<any>({
|
||||
'安全类': [],
|
||||
'工程类': []
|
||||
})
|
||||
const parkValue = ref<string>('')
|
||||
|
||||
type TabType = '安全类' | '工程类'
|
||||
|
||||
|
||||
const handleRiskTabChange = async (tab: TabType) => {
|
||||
console.log('Tab changed to:', tab)
|
||||
|
||||
try {
|
||||
let workOrderType = ''
|
||||
switch (tab) {
|
||||
case '安全类':
|
||||
workOrderType = '安全生产'
|
||||
break
|
||||
case '工程类':
|
||||
workOrderType = '物业服务-工程'
|
||||
break
|
||||
default:
|
||||
workOrderType = '安全生产'
|
||||
}
|
||||
|
||||
// 同时获取维保任务和巡检任务的数据
|
||||
const [maintenanceResponse, inspectionResponse] = await Promise.all([
|
||||
getWorkOrderStatistics({ workOrderType, taskType: '维保任务', campus_id: query.campus_id }).catch(error => {
|
||||
console.error('获取维保任务数据失败:', error)
|
||||
return { records: [] }
|
||||
}),
|
||||
getWorkOrderStatistics({ workOrderType, taskType: '巡检任务', campus_id: query.campus_id }).catch(error => {
|
||||
console.error('获取巡检任务数据失败:', error)
|
||||
return { records: [] }
|
||||
})
|
||||
])
|
||||
|
||||
// 周期映射
|
||||
const cycleMap: Record<string, string> = {
|
||||
'day': '每日',
|
||||
'month': '每月',
|
||||
'year': '每年'
|
||||
}
|
||||
|
||||
// 将API数据转换为图表数据格式
|
||||
const convertToChartData = (records: any[], taskTypeName: string): any[] => {
|
||||
const charts: any[] = []
|
||||
|
||||
// 按周期分组
|
||||
const cycleGroups: Record<string, any> = {}
|
||||
records.forEach((record: any) => {
|
||||
const cycle = record.cycle || 'day'
|
||||
if (!cycleGroups[cycle]) {
|
||||
cycleGroups[cycle] = record
|
||||
}
|
||||
})
|
||||
|
||||
// 创建6个图表（3个周期 x 2个任务类型，但这里只处理一种任务类型）
|
||||
const cycles = ['day', 'month', 'year']
|
||||
cycles.forEach((cycle) => {
|
||||
const data = cycleGroups[cycle] || {}
|
||||
const title = `${cycleMap[cycle]}检查(${taskTypeName})`
|
||||
|
||||
charts.push({
|
||||
title,
|
||||
total: Number(data.total) || 0,
|
||||
status: {
|
||||
notStarted: Number(data.pending) || 0,
|
||||
inProgress: Number(data.processing) || 0,
|
||||
done: Number(data.processed) || 0,
|
||||
voided: Number(data.closed) || 0
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
return charts
|
||||
}
|
||||
|
||||
// 转换维保和巡检数据
|
||||
const maintenanceCharts = convertToChartData(maintenanceResponse.records || [], '维保类')
|
||||
const inspectionCharts = convertToChartData(inspectionResponse.records || [], '巡检类')
|
||||
|
||||
// 合并为6个图表：先维保（3个），后巡检（3个）
|
||||
const allCharts = [...maintenanceCharts, ...inspectionCharts]
|
||||
|
||||
// 更新riskStatistics
|
||||
riskStatistics.value[tab] = allCharts
|
||||
|
||||
console.log('更新后的riskStatistics:', riskStatistics.value)
|
||||
} catch (error) {
|
||||
console.error('获取风险统计数据失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const tableTitle = [
|
||||
{
|
||||
@@ -654,14 +542,12 @@ const initProgressChart = () => {
|
||||
labelLayout: function (params: any) {
|
||||
const isLeft = params.labelRect.x < width / 2;
|
||||
const points = params.labelLinePoints;
|
||||
if (points && points.length && points[2]) {
|
||||
points[2][0] = isLeft
|
||||
? params.labelRect.x
|
||||
: params.labelRect.x + params.labelRect.width;
|
||||
return {
|
||||
labelLinePoints: points
|
||||
};
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
@@ -690,8 +576,6 @@ onMounted(async () => {
|
||||
query.campus_id = route.query.parkCode as string
|
||||
}
|
||||
|
||||
handleRiskTabChange('安全类')
|
||||
|
||||
try {
|
||||
let { records } = await getTableList(
|
||||
'park_info_list'
|
||||
@@ -959,14 +843,12 @@ const handleHiddenDangerPannelData = (query) => {
|
||||
labelLayout: function (params: any) {
|
||||
const isLeft = params.labelRect.x < width / 2;
|
||||
const points = params.labelLinePoints;
|
||||
if (points && points.length && points[2]) {
|
||||
points[2][0] = isLeft
|
||||
? params.labelRect.x
|
||||
: params.labelRect.x + params.labelRect.width;
|
||||
return {
|
||||
labelLinePoints: points
|
||||
};
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
@@ -1303,10 +1185,6 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 响应式设计 - 自动适应不同屏幕尺寸 */
|
||||
@media (width <=1200px) {
|
||||
.dashboard-container {
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<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-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>
|
||||
@@ -24,7 +24,7 @@
|
||||
|
||||
<!-- 列表模式 -->
|
||||
<template v-else>
|
||||
<div @click="handleItemClick(item)" class="list-item cursor-pointer" v-for="(item, index) in listData" :key="`list-${index}`" @mouseenter="handleMouseEnter">
|
||||
<div class="list-item" v-for="(item, index) in listData" :key="`list-${index}`" @mouseenter="handleMouseEnter">
|
||||
<span class="alert-text" :class="[{ error: item.alarm_level_code == 'severity' }, { warn: item.alarm_level_code == 'major' }]">
|
||||
{{ (index + 1) }} {{ item.description }}
|
||||
</span>
|
||||
@@ -72,12 +72,8 @@ const listWrapperRef = ref<HTMLElement | null>(null)
|
||||
let scrollTimer: NodeJS.Timeout | null = null
|
||||
let isScrolling = false
|
||||
|
||||
const handleItemClick = (item: AlertItem) => {
|
||||
window.open(`http://10.0.64.20/configcenter/console/device-manage`, '_blank')
|
||||
}
|
||||
|
||||
// 自动滚动功能
|
||||
const startAutoScroll = (resetToTop: boolean = false) => {
|
||||
const startAutoScroll = () => {
|
||||
if (!props.autoScroll || !listWrapperRef.value) return
|
||||
|
||||
const wrapper = listWrapperRef.value
|
||||
@@ -87,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滚动一次，实现平滑效果
|
||||
@@ -143,9 +121,8 @@ const handleMouseEnter = () => {
|
||||
const handleMouseLeave = () => {
|
||||
if (props.autoScroll) {
|
||||
// 延迟启动滚动，避免鼠标快速进出
|
||||
// 从当前位置继续向下滚动
|
||||
setTimeout(() => {
|
||||
startAutoScroll(false)
|
||||
startAutoScroll()
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
@@ -156,8 +133,7 @@ watch(() => props.listData, () => {
|
||||
if (props.autoScroll) {
|
||||
stopAutoScroll()
|
||||
setTimeout(() => {
|
||||
// 数据更新后从顶部重新开始
|
||||
startAutoScroll(true)
|
||||
startAutoScroll()
|
||||
}, 1000) // 数据更新后1秒开始滚动
|
||||
}
|
||||
})
|
||||
@@ -165,9 +141,9 @@ watch(() => props.listData, () => {
|
||||
|
||||
onMounted(() => {
|
||||
if (props.autoScroll) {
|
||||
// 组件挂载后延迟启动滚动，从顶部开始
|
||||
// 组件挂载后延迟启动滚动
|
||||
setTimeout(() => {
|
||||
startAutoScroll(true)
|
||||
startAutoScroll()
|
||||
}, 2000)
|
||||
}
|
||||
})
|
||||
@@ -178,9 +154,6 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.list-content {
|
||||
display: flex;
|
||||
width: 68%;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,20 +1,19 @@
|
||||
<template>
|
||||
<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>
|
||||
<span 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>
|
||||
<span class="type-num cursor-pointer" @click="handleMajorClick">{{ hiddenDangerData?.general || 0 }}</span>
|
||||
<span class="type-num">{{ hiddenDangerData?.general || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -61,7 +60,7 @@
|
||||
<div class="safe-wrapper">
|
||||
<span class="safe-title">
|
||||
<img width="22" style="margin: 3px 5px 0 0" src="@/assets/images/ybp_icon.png" />
|
||||
安全指数:<p title="安全指数 = 逾期隐患百分比 × 60% + 安全考核通过率 × 20% + 安全培训完成率 × 20%"></p>
|
||||
安全指数:
|
||||
</span>
|
||||
<span class="pending-count">{{ hiddenDangerData?.safetyIndex || 0 }}</span>
|
||||
</div>
|
||||
@@ -189,23 +188,10 @@ const top3TypesChartOption = ref<any>({
|
||||
]
|
||||
})
|
||||
|
||||
const handleMajorClick = () => {
|
||||
window.open('http://10.0.64.20/configcenter/console/device-manage', '_blank')
|
||||
}
|
||||
|
||||
watch(() => props.hiddenDangerData?.progress, (newVal) => {
|
||||
refreshProcessCharts(newVal)
|
||||
}, { deep: true })
|
||||
|
||||
// 辅助函数：安全地将值转换为数字，处理 NaN 和字符串 "NaN" 的情况
|
||||
const safeNumber = (val: any): number => {
|
||||
if (val === null || val === undefined || val === '' || val === 'NaN') {
|
||||
return 0
|
||||
}
|
||||
const num = Number(val)
|
||||
return isNaN(num) ? 0 : num
|
||||
}
|
||||
|
||||
// 更新图表数据
|
||||
const refreshProcessCharts = (process): void => {
|
||||
if (!props.hiddenDangerData?.progress) {
|
||||
@@ -213,12 +199,11 @@ const refreshProcessCharts = (process): void => {
|
||||
return
|
||||
}
|
||||
const option = { ...progressChartOption.value }
|
||||
// 确保所有 value 都是有效的数字，将字符串 "NaN" 或真正的 NaN 转换为 0
|
||||
option.series[0].data = [
|
||||
{ value: safeNumber(process.overdue), name: '已逾期', itemStyle: { color: '#ef4444' } },
|
||||
{ value: safeNumber(process.processed), name: '已处理', itemStyle: { color: '#10b981' } },
|
||||
// { value: safeNumber(process.pending), name: '待排查', itemStyle: { color: '#eab308' } },
|
||||
{ value: safeNumber(process.processing), name: '处理中', itemStyle: { color: '#3b82f6' } }
|
||||
{ value: 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
|
||||
}
|
||||
@@ -396,8 +381,7 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
p{width:17px; height:17px; background-color:rgb(125, 125, 152); border-radius:50%; text-align:center; }
|
||||
p:before{content:'?'; color:yellow; font-weight: bold;}
|
||||
|
||||
.center-container {
|
||||
position: fixed;
|
||||
top: 55%;
|
||||
|
||||
@@ -263,7 +263,7 @@ onMounted(() => {
|
||||
line-height: 25px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background-color: #158e56;
|
||||
background-color: #1afb8f;
|
||||
border-radius: 2px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
@@ -2,130 +2,485 @@
|
||||
<div class="left-bottom">
|
||||
<div class="panel-title">
|
||||
<div class="tabs">
|
||||
<span class="tab" :class="{ active: activeTab === '安全类' }" @click="handleTabClick('安全类')">安全类</span>
|
||||
<span class="tab" :class="{ active: activeTab === '高危作业' }" @click="handleTabClick('高危作业')">高危作业</span>
|
||||
<span class="divider">|</span>
|
||||
<span class="tab" :class="{ active: activeTab === '工程类' }" @click="handleTabClick('工程类')">工程类</span>
|
||||
<span class="tab" :class="{ active: activeTab === '安全培训考试' }" @click="handleTabClick('安全培训考试')">安全培训考试</span>
|
||||
<span class="divider">|</span>
|
||||
<span class="tab" :class="{ active: activeTab === '应急预案及演练' }" @click="handleTabClick('应急预案及演练')">应急预案及演练</span>
|
||||
</div>
|
||||
</div>
|
||||
<img class="title-line" src="@/assets/images/title_border_line.png" />
|
||||
<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" /> -->
|
||||
|
||||
<div class="chart-grid">
|
||||
<div class="chart-card" v-for="item in currentCharts" :key="`${activeTab}-${item.title}`">
|
||||
<div class="chart-title">{{ item.title }}</div>
|
||||
<div class="chart-content">
|
||||
<div class="chart-wrapper">
|
||||
<Echart class="donut-chart" :options="buildOption(item)" />
|
||||
<div class="chart-center">
|
||||
<div class="center-title">总数</div>
|
||||
<div class="center-value">{{ item.total }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="legend">
|
||||
<div class="legend-label-row">
|
||||
<div v-for="status in statusList" :key="status.key" :content="status.label" effect="dark" placement="right">
|
||||
<div class="legend-item">
|
||||
<span class="legend-dot" :style="{ background: status.color }"></span>
|
||||
<span class="legend-label">{{ status.label }}</span>
|
||||
<div class="legend-value">
|
||||
{{ item.status[status.key] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="legend-value-row">
|
||||
<div class="legend-value" v-for="status in statusList" :key="`${status.key}-value`">
|
||||
{{ item.status[status.key] }}
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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 { computed, ref, watch } from 'vue'
|
||||
import { ElTooltip } from 'element-plus'
|
||||
import type { EChartsOption } from 'echarts'
|
||||
|
||||
type TabType = '安全类' | '工程类'
|
||||
type StatusKey = 'notStarted' | 'inProgress' | 'done' | 'voided'
|
||||
|
||||
interface ChartItem {
|
||||
title: string
|
||||
total: number
|
||||
status: Record<StatusKey, number>
|
||||
}
|
||||
|
||||
const statusList: { key: StatusKey; label: string; color: string }[] = [
|
||||
{ key: 'notStarted', label: '未开始', color: '#2a59ff' },
|
||||
{ key: 'inProgress', label: '进行中', color: '#ff8a00' },
|
||||
{ key: 'done', label: '已完成', color: '#1bd9ff' },
|
||||
{ key: 'voided', label: '已作废', color: '#9fa0a6' }
|
||||
]
|
||||
|
||||
const defaultChart: ChartItem[] = [
|
||||
{ title: '每日检查(维保类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
|
||||
{ title: '每月检查(维保类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
|
||||
{ title: '每年检查(维保类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
|
||||
{ title: '每日检查(巡检类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
|
||||
{ title: '每月检查(巡检类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } },
|
||||
{ title: '每年检查(巡检类)', total: 6, status: { notStarted: 3, inProgress: 0, done: 3, voided: 0 } }
|
||||
]
|
||||
|
||||
const tabCharts = ref<Record<TabType, ChartItem[]>>({
|
||||
安全类: [...defaultChart],
|
||||
工程类: [...defaultChart]
|
||||
})
|
||||
|
||||
const props = defineProps<{
|
||||
riskStatistics?: Record<TabType, ChartItem[]>
|
||||
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]
|
||||
}>()
|
||||
|
||||
const activeTab = ref<TabType>('安全类')
|
||||
const emit = defineEmits<{ tabChange: [tab: TabType] }>()
|
||||
|
||||
// 监听props变化，更新图表数据
|
||||
watch(() => props.riskStatistics, (newData) => {
|
||||
if (newData) {
|
||||
tabCharts.value = {
|
||||
安全类: newData['安全类'] ? JSON.parse(JSON.stringify(newData['安全类'])) : [...defaultChart],
|
||||
工程类: newData['工程类'] ? JSON.parse(JSON.stringify(newData['工程类'])) : [...defaultChart]
|
||||
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
|
||||
}
|
||||
}, { deep: true, immediate: true })
|
||||
|
||||
const currentCharts = computed(() => tabCharts.value[activeTab.value])
|
||||
const tableTitle = [
|
||||
{
|
||||
name: '园区名称',
|
||||
key: 'campus_name'
|
||||
},
|
||||
{
|
||||
name: '累计培训次数',
|
||||
key: 'examtimes'
|
||||
},
|
||||
{
|
||||
name: '参与总人次',
|
||||
key: 'exampeoplenum'
|
||||
},
|
||||
{
|
||||
name: '累计培训时长',
|
||||
key: 'examduration'
|
||||
},
|
||||
{
|
||||
name: '平均通过率',
|
||||
key: 'exampassrate'
|
||||
}
|
||||
]
|
||||
|
||||
const buildOption = (item: ChartItem): EChartsOption => ({
|
||||
backgroundColor: 'transparent',
|
||||
tooltip: { show: false },
|
||||
// 图表引用
|
||||
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: [
|
||||
{
|
||||
type: 'pie' as const,
|
||||
radius: ['70%', '90%'],
|
||||
center: ['50%', '50%'],
|
||||
startAngle: 90,
|
||||
avoidLabelOverlap: false,
|
||||
label: { show: false },
|
||||
labelLine: { show: false },
|
||||
data: [
|
||||
{ value: item.status.notStarted, name: '未开始', itemStyle: { color: '#2a59ff' }, label: { show: false } },
|
||||
{ value: item.status.inProgress, name: '进行中', itemStyle: { color: '#ff8a00' }, label: { show: false } },
|
||||
{ value: item.status.done, name: '已完成', itemStyle: { color: '#1bd9ff' }, label: { show: false } },
|
||||
{ value: item.status.voided, name: '已作废', itemStyle: { color: '#9fa0a6' }, label: { show: false } }
|
||||
],
|
||||
emphasis: { scale: true, scaleSize: 4 }
|
||||
name: '未开始数量',
|
||||
type: 'bar' as const,
|
||||
data: [],
|
||||
itemStyle: { color: rgbToHex(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 handleTabClick = (tab: TabType) => {
|
||||
if (activeTab.value === tab) return
|
||||
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">
|
||||
@@ -173,241 +528,64 @@ const handleTabClick = (tab: TabType) => {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.title-line {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.chart-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
padding: 0 12px 12px;
|
||||
width: 70%;
|
||||
// margin: 0 auto;
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
background: rgba(18, 34, 63, 0.65);
|
||||
border: 1px solid rgba(58, 112, 179, 0.55);
|
||||
border-radius: 10px;
|
||||
padding: 5px 0;
|
||||
.bottom-card-risk {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-shadow: 0 4px 12px rgb(0 0 0 / 25%);
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
width: 100%;
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.chart-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: flex-start;
|
||||
// gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.donut-chart {
|
||||
width: 100%;
|
||||
height: 100% !important; // 强制覆盖 EChart 默认高度，避免过高
|
||||
}
|
||||
|
||||
.chart-center {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
.bottom-card-title {
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
margin-left: -15%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.legend {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// gap: 6px;
|
||||
// margin-top: 0;
|
||||
// width: auto;
|
||||
// justify-content: space-between;
|
||||
}
|
||||
|
||||
.legend-label-row {
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
color: #cbd5e1;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
// display: inline-block;
|
||||
}
|
||||
|
||||
.legend-label {
|
||||
color: #cbd5e1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.legend-value-row {
|
||||
display: none;
|
||||
gap: 20px;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.legend-value {
|
||||
min-width: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* 简化版尺寸适配：只控制字体大小和图表尺寸 */
|
||||
@media (width <= 1680px) {
|
||||
.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 {
|
||||
.panel-title {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 2px 8px;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.legend-label-row {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 1400px) {
|
||||
.left-bottom {
|
||||
.panel-title {
|
||||
.tabs .tab {
|
||||
padding: 1px 8px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 1px 6px;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.legend-label-row {
|
||||
font-size: 10px;
|
||||
.donut-chart-with-labels,
|
||||
.risk-chart {
|
||||
width: 40vw;
|
||||
height: 40vh;
|
||||
margin-left: 1vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 1200px) {
|
||||
.left-bottom {
|
||||
.panel-title {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
@media (width <=480px) {
|
||||
|
||||
.tab {
|
||||
padding: 1px 4px;
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.legend-label-row {
|
||||
font-size: 9px;
|
||||
.left-bottom .donut-chart-with-labels,
|
||||
.left-bottom .risk-chart {
|
||||
width: 45vw;
|
||||
height: 45vh;
|
||||
margin-left: 0.5vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// @media (width >3000px) {
|
||||
.left-bottom .chart-content {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.left-bottom .legend {
|
||||
// align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.left-bottom .legend-label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.left-bottom .legend-item {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.left-bottom .legend-label-row .legend-value {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// .left-bottom .legend-value-row {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
.left-bottom .chart-wrapper {
|
||||
flex-basis: 60px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
// }
|
||||
|
||||
// @media (width <=1024px) {
|
||||
// .left-bottom .chart-grid {
|
||||
// grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
// }
|
||||
|
||||
// .left-bottom .donut-chart {
|
||||
// height: 80px !important;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @media (width <=768px) {
|
||||
// .left-bottom .chart-grid {
|
||||
// grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
// }
|
||||
|
||||
// .left-bottom .chart-card {
|
||||
// padding: 5px;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<!-- 顶部标题栏 -->
|
||||
<div class="header-container">
|
||||
<div class="header-left">
|
||||
<div class="back-button" @click="openRegionSelector"> 集团
|
||||
<div class="back-button" @click="openRegionSelector"> 总部
|
||||
<span>···</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -19,17 +19,22 @@
|
||||
<!-- 主内容区 -->
|
||||
<div class="content-container">
|
||||
<div class="left-wrapper">
|
||||
<OverviewPanel :totalCount="dashboardData?.totalCount || 0"
|
||||
<OverviewPanel
|
||||
:totalCount="dashboardData?.totalCount || 0"
|
||||
:formalEmployeeCount="dashboardData?.formalEmployeeCount || 0"
|
||||
:externalStaffCount="dashboardData?.externalStaffCount || 0" :visitorCount="dashboardData?.visitorCount || 0"
|
||||
:externalStaffCount="dashboardData?.externalStaffCount || 0"
|
||||
:visitorCount="dashboardData?.visitorCount || 0"
|
||||
:parkStatistics="dashboardData?.parkStatistics"/>
|
||||
<RiskStatisticsPanel :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
|
||||
<RiskStatisticsPanel
|
||||
:riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
|
||||
@tab-change="handleRiskTabChange" :campus_id="query.campus_id"/>
|
||||
</div>
|
||||
<div class="right-wrapper">
|
||||
<HighRiskAlertPanel :alertData="dashboardData?.alertData" :alertDetails="dashboardData?.alertData.details"
|
||||
<HighRiskAlertPanel
|
||||
:alertData="dashboardData?.alertData" :alertDetails="dashboardData?.alertData.details"
|
||||
:sourceIndex="sourceIndex"/>
|
||||
<TimeoutWorkOrderPanel :timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
|
||||
<TimeoutWorkOrderPanel
|
||||
:timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
|
||||
:alertDetails="dashboardData?.timeoutWorkOrders.details" :sourceIndex="sourceIndex"/>
|
||||
</div>
|
||||
<HiddenDangerPanel :hiddenDangerData="dashboardData?.hiddenDangerData"/>
|
||||
@@ -37,12 +42,13 @@
|
||||
</div>
|
||||
|
||||
<!-- 区域选择弹窗 -->
|
||||
<RegionSelector v-model="regionSelectorVisible" :modelSelected="selectedRegion" :regions="regionOption"
|
||||
<RegionSelector
|
||||
v-model="regionSelectorVisible" :modelSelected="selectedRegion" :regions="regionOption"
|
||||
@change="onRegionChange"/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getTableList, getTableData, getWorkOrderStatistics } from './report'
|
||||
import {getTableList, getTableData} from './report'
|
||||
import {ref, onMounted, watch, onUnmounted} from 'vue'
|
||||
import {useRouter} from 'vue-router'
|
||||
import RegionSelector from './components/RegionSelector.vue'
|
||||
@@ -54,7 +60,6 @@ import RiskStatisticsPanel from './components/RiskStatisticsPanel.vue'
|
||||
import HighRiskAlertPanel from './components/HighRiskAlertPanel.vue'
|
||||
import TimeoutWorkOrderPanel from './components/TimeoutWorkOrderPanel.vue'
|
||||
import HiddenDangerPanel from './components/HiddenDangerPanel.vue'
|
||||
import { error } from "echarts/types/src/util/log";
|
||||
|
||||
// 类型定义
|
||||
interface AlertItem {
|
||||
@@ -67,7 +72,7 @@ interface RegionItem {
|
||||
code: string
|
||||
}
|
||||
|
||||
type TabType = '安全类' | '工程类'
|
||||
type TabType = '高危作业' | '安全培训考试' | '安全培训考试'
|
||||
|
||||
// 响应式数据
|
||||
const currentDateTime = ref<string>('')
|
||||
@@ -89,10 +94,7 @@ const visitorCount = ref<number>(0)
|
||||
// 总体概览-各园区统计
|
||||
const parkStatistics = ref<any>()
|
||||
// 高危作业/安全培训考试/安全培训考试
|
||||
const riskStatistics = ref<any>({
|
||||
安全类: [],
|
||||
工程类: []
|
||||
})
|
||||
const riskStatistics = ref<any>()
|
||||
const dangerDetail = ref<any>()
|
||||
|
||||
// 动画相关的状态
|
||||
@@ -392,7 +394,7 @@ const loadDashboardData = async (): Promise<void> => {
|
||||
} catch (error) {
|
||||
console.error('获取超期工单数据失败:', error)
|
||||
}
|
||||
handleRiskTabChange('安全类')
|
||||
handleRiskTabChange('高危作业')
|
||||
handleHiddenDangerPannelData(query)
|
||||
console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
|
||||
}
|
||||
@@ -482,16 +484,7 @@ const handleHiddenDangerPannelData = (query) => {
|
||||
_data2.general = Number(res.records[0].general)
|
||||
_data2.major = Number(res.records[0].major)
|
||||
|
||||
// 安全指数另算，再起一个报表
|
||||
// dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
|
||||
// 在这里添加获取安全指数的逻辑
|
||||
getTableList('hidden_danger_safety_index', query).then(res => {
|
||||
if (res.records && res.records.length > 0) {
|
||||
dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取隐患排查治理数据失败:', error)
|
||||
})
|
||||
|
||||
// 获取隐患排查治理处理进度数据
|
||||
getTableList('hidden_danger_process_progress', query).then(res => {
|
||||
@@ -564,82 +557,93 @@ const handleHiddenDangerPannelData = (query) => {
|
||||
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}).catch(error => {
|
||||
console.error('获取维保任务数据失败:', error)
|
||||
return { records: [] }
|
||||
}),
|
||||
getWorkOrderStatistics({workOrderType, taskType: '巡检任务',campus_id: query.campus_id}).catch(error => {
|
||||
console.error('获取巡检任务数据失败:', error)
|
||||
return { records: [] }
|
||||
})
|
||||
])
|
||||
|
||||
// 周期映射
|
||||
const cycleMap: Record<string, string> = {
|
||||
'day': '每日',
|
||||
'month': '每月',
|
||||
'year': '每年'
|
||||
if (code == 'hazardous_operations') {
|
||||
// 根据不同的tab请求不同的接口
|
||||
getTableList(
|
||||
code,
|
||||
{...query, activeTab: tab}
|
||||
).then(response => {
|
||||
// 更新风险统计数据 - 传递完整的数组数据用于饼图显示
|
||||
if (response.records && response.records.length > 0) {
|
||||
dangerDetail.value = response.records
|
||||
}
|
||||
|
||||
// 将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
|
||||
}).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"
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
return charts
|
||||
]
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取风险统计数据失败:', error)
|
||||
})
|
||||
}
|
||||
|
||||
// 转换维保和巡检数据
|
||||
const maintenanceCharts = convertToChartData(maintenanceResponse.records || [], '维保类')
|
||||
const inspectionCharts = convertToChartData(inspectionResponse.records || [], '巡检类')
|
||||
|
||||
// 合并为6个图表：先维保（3个），后巡检（3个）
|
||||
const allCharts = [...maintenanceCharts, ...inspectionCharts]
|
||||
|
||||
// 更新riskStatistics
|
||||
riskStatistics.value[tab] = allCharts
|
||||
|
||||
console.log('更新后的riskStatistics:', riskStatistics.value)
|
||||
} catch (error) {
|
||||
console.error('获取风险统计数据失败:', error)
|
||||
}
|
||||
@@ -1341,7 +1345,7 @@ const timeOut1 = (): void => {
|
||||
|
||||
@keyframes typeFlashEffect {
|
||||
0% {
|
||||
background-color: #158e56;
|
||||
background-color: #1afb8f;
|
||||
}
|
||||
|
||||
50% {
|
||||
@@ -1349,7 +1353,7 @@ const timeOut1 = (): void => {
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: #158e56;
|
||||
background-color: #1afb8f;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1367,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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -1,948 +0,0 @@
|
||||
<template>
|
||||
<div class="big-screen-container">
|
||||
<!-- 标题栏 -->
|
||||
<div class="screen-header">
|
||||
<h1 class="screen-title">动环监控大屏</h1>
|
||||
<div class="screen-datetime">{{ currentDateTime }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<div class="screen-content">
|
||||
<!-- 第一行：统计卡片 -->
|
||||
<div class="stats-row">
|
||||
<!-- 总设备数卡片 -->
|
||||
<div class="stat-card">
|
||||
<div class="card-title">总设备数</div>
|
||||
<div class="card-value">{{ totalDevices.toLocaleString() }}</div>
|
||||
<div class="card-trend growth">
|
||||
<!-- <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" />
|
||||
</svg> -->
|
||||
<!-- <span>较上月增长 {{ totalDevicesGrowth }}%</span> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 在线设备数卡片 -->
|
||||
<div class="stat-card">
|
||||
<div class="card-title">在线设备数</div>
|
||||
<div class="card-value">{{ onlineDevices.toLocaleString() }}</div>
|
||||
<div class="card-trend online-rate">
|
||||
<!-- <span>在线率 {{ onlineRate }}%</span> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二行：图表 -->
|
||||
<div class="charts-row">
|
||||
<!-- 告警趋势折线图 -->
|
||||
<div class="chart-card">
|
||||
<div class="chart-title">当月告警趋势</div>
|
||||
<div ref="alarmTrendChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
|
||||
<!-- 设备类型分布饼图 -->
|
||||
<div class="chart-card">
|
||||
<div class="chart-title">告警设备类型分布</div>
|
||||
<div ref="deviceTypePieChartRef" class="chart-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第三行：园区信息列表 -->
|
||||
<div class="table-row">
|
||||
<div class="table-card">
|
||||
<div class="table-title">园区信息列表</div>
|
||||
<el-table
|
||||
:data="parkList"
|
||||
:style="{ width: '100%' }"
|
||||
class="park-table"
|
||||
height="calc(100% - 50px)"
|
||||
:header-cell-style="{
|
||||
background: '#1a3a52',
|
||||
color: '#ffffff',
|
||||
borderBottom: '1px solid rgba(78, 155, 248, 0.15)',
|
||||
fontWeight: '500',
|
||||
padding: '12px 8px'
|
||||
}"
|
||||
:row-style="getRowStyle"
|
||||
:cell-style="{
|
||||
borderBottom: '1px solid rgba(78, 155, 248, 0.08)',
|
||||
color: '#ffffff',
|
||||
padding: '12px 8px'
|
||||
}"
|
||||
>
|
||||
<el-table-column prop="parkName" label="园区名称" min-width="200" align="left" />
|
||||
<el-table-column prop="totalDevices" label="设备总数" min-width="120" align="center">
|
||||
<template #default="{ row }">
|
||||
<span class="device-count">{{ row.totalDevices }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="upsStatus" label="UPS" min-width="140" align="center">
|
||||
<template #default="{ row }">
|
||||
<span :class="['status-text', row.upsStatus === '正常' ? 'status-normal' : 'status-alarm']">
|
||||
{{ row.upsStatus }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="airConditionStatus" label="精密空调" min-width="140" align="center">
|
||||
<template #default="{ row }">
|
||||
<span :class="['status-text', row.airConditionStatus === '正常' ? 'status-normal' : 'status-alarm']">
|
||||
{{ row.airConditionStatus }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="temperatureStatus" label="温湿度" min-width="140" align="center">
|
||||
<template #default="{ row }">
|
||||
<span :class="['status-text', row.temperatureStatus === '正常' ? 'status-normal' : 'status-alarm']">
|
||||
{{ row.temperatureStatus }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="otherStatus" label="其他" min-width="140" align="center">
|
||||
<template #default="{ row }">
|
||||
<span :class="['status-text', row.otherStatus === '正常' ? 'status-normal' : 'status-alarm']">
|
||||
{{ row.otherStatus }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="详情" min-width="180" align="center">
|
||||
<template #default="{ row }">
|
||||
<a
|
||||
:class="['detail-link', row.hasAlarm ? 'detail-alarm' : 'detail-normal']"
|
||||
@click="handleViewDetail(row)"
|
||||
:href="'http://10.0.64.20/configcenter/console/device-manage'"
|
||||
target="_blank"
|
||||
>
|
||||
<span v-if="row.hasAlarm" class="alarm-badge">异常</span>
|
||||
<span v-else class="normal-badge">正常</span>
|
||||
查看详情
|
||||
</a>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import type { EChartsOption } from 'echarts';
|
||||
import {
|
||||
getPowerEnvDeviceTotalNum,
|
||||
getPowerEnvDeviceAlarmDistribution,
|
||||
getPowerEnvAlarmTrend,
|
||||
getPowerEnvDeviceGroupTypeCampus
|
||||
} from '@/api/index';
|
||||
|
||||
// 定义园区信息类型
|
||||
interface ParkInfo {
|
||||
key: string;
|
||||
parkName: string;
|
||||
totalDevices: number;
|
||||
upsStatus: string;
|
||||
airConditionStatus: string;
|
||||
temperatureStatus: string | number;
|
||||
otherStatus: string;
|
||||
hasAlarm: boolean;
|
||||
}
|
||||
|
||||
// 当前日期时间
|
||||
const currentDateTime = ref('');
|
||||
|
||||
// 统计数据
|
||||
const totalDevices = ref(0);
|
||||
const onlineDevices = ref(0);
|
||||
const onlineRate = ref(100); // 在线率写死100%
|
||||
|
||||
// 图表引用
|
||||
const alarmTrendChartRef = ref<HTMLDivElement>();
|
||||
const deviceTypePieChartRef = ref<HTMLDivElement>();
|
||||
|
||||
// 图表实例
|
||||
let alarmTrendChart: echarts.ECharts | null = null;
|
||||
let deviceTypePieChart: echarts.ECharts | null = null;
|
||||
|
||||
// 告警趋势数据
|
||||
const alarmTrendData = ref({
|
||||
dates: ['5日', '10日', '15日', '20日', '25日', '30日'],
|
||||
values: [8, 4, 20, 16, 21, 9]
|
||||
});
|
||||
|
||||
// 设备类型分布数据
|
||||
const deviceTypeData = ref([
|
||||
{ name: 'UPS', value: 35 },
|
||||
{ name: '精密空调', value: 25 },
|
||||
{ name: '温湿度检测', value: 20 },
|
||||
{ name: '其他', value: 20 }
|
||||
]);
|
||||
|
||||
// 园区信息列表数据
|
||||
const parkList = ref<ParkInfo[]>([]);
|
||||
|
||||
// 分页参数
|
||||
const parkListPage = ref({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
});
|
||||
|
||||
// 更新日期时间
|
||||
const updateDateTime = () => {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(now.getDate()).padStart(2, '0');
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(now.getSeconds()).padStart(2, '0');
|
||||
currentDateTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
};
|
||||
|
||||
// 初始化告警趋势图表
|
||||
const initAlarmTrendChart = (yAxisMax: number = 25) => {
|
||||
if (!alarmTrendChartRef.value) return;
|
||||
|
||||
if (!alarmTrendChart) {
|
||||
alarmTrendChart = echarts.init(alarmTrendChartRef.value);
|
||||
}
|
||||
|
||||
// 计算峰值点（找出最大值）
|
||||
const maxValue = Math.max(...alarmTrendData.value.values, 0);
|
||||
const maxIndex = alarmTrendData.value.values.indexOf(maxValue);
|
||||
const markPointData = maxValue > 0 ? [{ name: '峰值', coord: [maxIndex, maxValue] }] : [];
|
||||
|
||||
const option: EChartsOption = {
|
||||
grid: {
|
||||
top: '15%',
|
||||
left: '8%',
|
||||
right: '5%',
|
||||
bottom: '12%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: alarmTrendData.value.dates,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#3a5165'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#8b9bb3',
|
||||
fontSize: 12
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#1e3a52',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: yAxisMax,
|
||||
interval: yAxisMax / 5,
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#8b9bb3',
|
||||
fontSize: 12
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#1e3a52',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: alarmTrendData.value.values,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
color: '#4e9bf8',
|
||||
width: 2
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#4e9bf8',
|
||||
borderWidth: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(78, 155, 248, 0.3)' },
|
||||
{ offset: 1, color: 'rgba(78, 155, 248, 0.05)' }
|
||||
]
|
||||
}
|
||||
},
|
||||
markPoint: {
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#ff5555',
|
||||
borderWidth: 2,
|
||||
borderColor: '#ff5555'
|
||||
},
|
||||
data: markPointData
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
alarmTrendChart.setOption(option);
|
||||
};
|
||||
|
||||
// 更新告警趋势图表
|
||||
const updateAlarmTrendChart = (yAxisMax: number = 25) => {
|
||||
if (!alarmTrendChart) {
|
||||
initAlarmTrendChart(yAxisMax);
|
||||
return;
|
||||
}
|
||||
|
||||
// 计算峰值点
|
||||
const maxValue = Math.max(...alarmTrendData.value.values, 0);
|
||||
const maxIndex = alarmTrendData.value.values.indexOf(maxValue);
|
||||
const markPointData = maxValue > 0 ? [{ name: '峰值', coord: [maxIndex, maxValue] }] : [];
|
||||
|
||||
alarmTrendChart.setOption({
|
||||
xAxis: {
|
||||
data: alarmTrendData.value.dates
|
||||
},
|
||||
yAxis: {
|
||||
max: yAxisMax,
|
||||
interval: yAxisMax / 5
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: alarmTrendData.value.values,
|
||||
markPoint: {
|
||||
data: markPointData
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化设备类型分布饼图
|
||||
const initDeviceTypePieChart = () => {
|
||||
if (!deviceTypePieChartRef.value) return;
|
||||
|
||||
if (!deviceTypePieChart) {
|
||||
deviceTypePieChart = echarts.init(deviceTypePieChartRef.value);
|
||||
}
|
||||
|
||||
updateDeviceTypePieChart();
|
||||
};
|
||||
|
||||
// 更新设备类型分布饼图
|
||||
const updateDeviceTypePieChart = () => {
|
||||
if (!deviceTypePieChart) {
|
||||
initDeviceTypePieChart();
|
||||
return;
|
||||
}
|
||||
|
||||
const total = deviceTypeData.value.reduce((sum, item) => sum + item.value, 0);
|
||||
|
||||
const option: EChartsOption = {
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
right: '10%',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 13
|
||||
},
|
||||
formatter: (name: string) => {
|
||||
const item = deviceTypeData.value.find(d => d.name === name);
|
||||
return `${name} (${item?.value || 0})`;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['45%', '70%'],
|
||||
center: ['35%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
formatter: () => {
|
||||
return `{value|${total}}\n{label|告警}`;
|
||||
},
|
||||
rich: {
|
||||
value: {
|
||||
color: '#ffffff',
|
||||
fontSize: 28,
|
||||
fontWeight: 'bold',
|
||||
lineHeight: 40
|
||||
},
|
||||
label: {
|
||||
color: '#8b9bb3',
|
||||
fontSize: 14,
|
||||
lineHeight: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: deviceTypeData.value.map((item, index) => {
|
||||
const colors = ['#4e9bf8', '#52c41a', '#fa8c16', '#8c8c8c'];
|
||||
return {
|
||||
name: item.name,
|
||||
value: item.value,
|
||||
itemStyle: {
|
||||
color: colors[index]
|
||||
}
|
||||
};
|
||||
})
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
deviceTypePieChart.setOption(option);
|
||||
};
|
||||
|
||||
// 获取行样式（条纹效果）
|
||||
const getRowStyle = ({ rowIndex }: { rowIndex: number }) => {
|
||||
if (rowIndex % 2 === 0) {
|
||||
return {
|
||||
background: 'rgba(78, 155, 248, 0.03)',
|
||||
color: '#ffffff'
|
||||
};
|
||||
}
|
||||
return {
|
||||
background: 'transparent',
|
||||
color: '#ffffff'
|
||||
};
|
||||
};
|
||||
|
||||
// 查看详情
|
||||
const handleViewDetail = (record: ParkInfo) => {
|
||||
console.log('查看园区详情:', record);
|
||||
// TODO: 实现详情页面跳转或弹窗
|
||||
};
|
||||
|
||||
// 获取总设备数
|
||||
const fetchTotalDevices = async () => {
|
||||
try {
|
||||
const params = {
|
||||
pageNo: 1,
|
||||
pageSize: 10
|
||||
};
|
||||
const response = await getPowerEnvDeviceTotalNum(params);
|
||||
|
||||
if (response.records?.length > 0) {
|
||||
|
||||
const total = parseInt(response.records[0].total || '0', 10);
|
||||
totalDevices.value = total;
|
||||
onlineDevices.value = total; // 在线设备数也用total
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取总设备数失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取告警设备类型分布
|
||||
const fetchAlarmDistribution = async () => {
|
||||
try {
|
||||
const params = {
|
||||
pageNo: 1,
|
||||
pageSize: 10
|
||||
};
|
||||
const response = await getPowerEnvDeviceAlarmDistribution(params);
|
||||
debugger
|
||||
if (response.records?.length > 0) {
|
||||
const record = response.records[0];
|
||||
deviceTypeData.value = [
|
||||
{ name: 'UPS', value: parseInt(record.ups_num || '0', 10) },
|
||||
{ name: '精密空调', value: parseInt(record.jmkt_num || '0', 10) },
|
||||
{ name: '温湿度检测', value: parseInt(record.wsd_num || '0', 10) },
|
||||
{ name: '其他', value: parseInt(record.other_num || '0', 10) }
|
||||
];
|
||||
// 更新饼图
|
||||
updateDeviceTypePieChart();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取告警设备类型分布失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取当月告警趋势
|
||||
const fetchAlarmTrend = async () => {
|
||||
try {
|
||||
const params = {
|
||||
pageNo: 1,
|
||||
pageSize: 100 // 可能需要获取更多数据
|
||||
};
|
||||
const response = await getPowerEnvAlarmTrend(params);
|
||||
debugger
|
||||
if (response.records?.length > 0) {
|
||||
const records = response.records;
|
||||
// 处理日期格式：从 "2025-12-10" 转换为 "10日"
|
||||
const dates = records.map((item: any) => {
|
||||
const date = new Date(item.alarm_date);
|
||||
return `${date.getDate()}日`;
|
||||
});
|
||||
const values = records.map((item: any) => parseInt(item.alarm_count || '0', 10));
|
||||
|
||||
alarmTrendData.value = {
|
||||
dates,
|
||||
values
|
||||
};
|
||||
|
||||
// 计算最大值用于设置y轴
|
||||
const maxValue = Math.max(...values, 0);
|
||||
const yAxisMax = maxValue > 0 ? Math.ceil(maxValue / 5) * 5 : 25;
|
||||
|
||||
// 更新折线图
|
||||
updateAlarmTrendChart(yAxisMax);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取当月告警趋势失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 格式化状态显示：如果数量>0显示"X个告警"，否则"正常"
|
||||
const formatStatus = (count: string | number): string => {
|
||||
const num = typeof count === 'string' ? parseInt(count || '0', 10) : count;
|
||||
return num > 0 ? `${num}个告警` : '正常';
|
||||
};
|
||||
|
||||
// 获取园区信息列表
|
||||
const fetchParkList = async () => {
|
||||
try {
|
||||
const params = {
|
||||
pageNo: parkListPage.value.pageNo,
|
||||
pageSize: parkListPage.value.pageSize
|
||||
};
|
||||
const response = await getPowerEnvDeviceGroupTypeCampus(params);
|
||||
|
||||
if (response.records?.length>0) {
|
||||
parkListPage.value.total = response.records?.length || 0;
|
||||
|
||||
if (response.records && response.records.length > 0) {
|
||||
parkList.value = response.records.map((item: any) => {
|
||||
const upsCount = parseInt(item.ups || '0', 10);
|
||||
const jmktCount = parseInt(item.jmkt || '0', 10);
|
||||
const wsdCount = parseInt(item.wsd || '0', 10);
|
||||
const otherCount = parseInt(item.other || '0', 10);
|
||||
const alarmCount = parseInt(item.alarm || '0', 10);
|
||||
|
||||
return {
|
||||
key: item.campus_id || item.row_id,
|
||||
parkName: item.campus_name || '',
|
||||
totalDevices: parseInt(item.total || '0', 10),
|
||||
upsStatus: formatStatus(upsCount),
|
||||
airConditionStatus: formatStatus(jmktCount),
|
||||
temperatureStatus: formatStatus(wsdCount),
|
||||
otherStatus: formatStatus(otherCount),
|
||||
hasAlarm: alarmCount > 0
|
||||
};
|
||||
});
|
||||
} else {
|
||||
parkList.value = [];
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取园区信息列表失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 定时器
|
||||
let dateTimeTimer: number | null = null;
|
||||
|
||||
// 组件挂载
|
||||
onMounted(async () => {
|
||||
// 更新日期时间
|
||||
updateDateTime();
|
||||
dateTimeTimer = window.setInterval(updateDateTime, 1000);
|
||||
|
||||
// 获取总设备数
|
||||
fetchTotalDevices();
|
||||
|
||||
// 获取园区信息列表
|
||||
fetchParkList();
|
||||
|
||||
// 初始化图表（先用默认数据）
|
||||
setTimeout(() => {
|
||||
initAlarmTrendChart();
|
||||
initDeviceTypePieChart();
|
||||
|
||||
// 图表初始化后再获取数据并更新
|
||||
fetchAlarmDistribution();
|
||||
fetchAlarmTrend();
|
||||
}, 100);
|
||||
|
||||
// 监听窗口大小变化
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
// 组件卸载
|
||||
onBeforeUnmount(() => {
|
||||
if (dateTimeTimer) {
|
||||
clearInterval(dateTimeTimer);
|
||||
}
|
||||
if (alarmTrendChart) {
|
||||
alarmTrendChart.dispose();
|
||||
}
|
||||
if (deviceTypePieChart) {
|
||||
deviceTypePieChart.dispose();
|
||||
}
|
||||
window.removeEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
// 处理窗口大小变化
|
||||
const handleResize = () => {
|
||||
alarmTrendChart?.resize();
|
||||
deviceTypePieChart?.resize();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.big-screen-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #0a1929 0%, #0d1e2f 100%);
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// 标题栏
|
||||
.screen-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding: 0 10px;
|
||||
|
||||
.screen-title {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.screen-datetime {
|
||||
font-size: 18px;
|
||||
color: #8b9bb3;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
}
|
||||
|
||||
// 主要内容区域
|
||||
.screen-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
// 统计卡片行
|
||||
.stats-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: linear-gradient(135deg, #1a2940 0%, #0f1e2d 100%);
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(78, 155, 248, 0.1);
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
color: #8b9bb3;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
margin-bottom: 12px;
|
||||
font-family: 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.card-trend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
|
||||
&.growth {
|
||||
color: #52c41a;
|
||||
|
||||
.trend-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.online-rate {
|
||||
color: #13c2c2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 图表行
|
||||
.charts-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
background: linear-gradient(135deg, #1a2940 0%, #0f1e2d 100%);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(78, 155, 248, 0.1);
|
||||
height: 350px;
|
||||
|
||||
.chart-title {
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
|
||||
// 表格行
|
||||
.table-row {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
background: linear-gradient(135deg, #1a2940 0%, #0f1e2d 100%);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(78, 155, 248, 0.1);
|
||||
height: 450px;
|
||||
|
||||
.table-title {
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.park-table) {
|
||||
background: transparent !important;
|
||||
|
||||
// 表格主体背景
|
||||
.el-table__inner-wrapper {
|
||||
background: transparent !important;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__body-wrapper {
|
||||
background: transparent !important;
|
||||
|
||||
// 滚动条样式
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(78, 155, 248, 0.3) transparent;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(78, 155, 248, 0.3);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__header-wrapper,
|
||||
.el-table__footer-wrapper {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
// 表格行悬浮效果
|
||||
.el-table__row {
|
||||
&:hover > td {
|
||||
background: rgba(78, 155, 248, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 空数据样式
|
||||
.el-table__empty-block {
|
||||
background: transparent !important;
|
||||
|
||||
.el-table__empty-text {
|
||||
color: #8b9bb3;
|
||||
}
|
||||
}
|
||||
|
||||
.device-count {
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
|
||||
&.status-normal {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
&.status-alarm {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-link {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
text-decoration: none;
|
||||
color: #4e9bf8;
|
||||
|
||||
.alarm-badge,
|
||||
.normal-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.alarm-badge {
|
||||
background: #ff4d4f;
|
||||
}
|
||||
|
||||
.normal-badge {
|
||||
background: #52c41a;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式布局
|
||||
@media screen and (max-width: 1600px) {
|
||||
.screen-header {
|
||||
.screen-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.screen-datetime {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 25px;
|
||||
|
||||
.card-value {
|
||||
font-size: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1280px) {
|
||||
.screen-header {
|
||||
.screen-title {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.screen-datetime {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 20px;
|
||||
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
.card-trend {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
height: 300px;
|
||||
padding: 15px;
|
||||
|
||||
.chart-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-card {
|
||||
height: 380px;
|
||||
padding: 15px;
|
||||
|
||||
.table-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 仅在非常小的屏幕（小于1024px）才改为单列
|
||||
@media screen and (max-width: 1024px) {
|
||||
.stats-row,
|
||||
.charts-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
height: 360px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,8 +3,7 @@
|
||||
<!-- 顶部标题栏 -->
|
||||
<div class="header-container">
|
||||
<div class="header-left">
|
||||
<img class="back-img" @click="returnToHeadquarters"
|
||||
src="@/assets/images/screen/back_image.png"/>
|
||||
<img class="back-img" @click="returnToHeadquarters" src="@/assets/images/screen/back_image.png" />
|
||||
<div class="back-button" @click="openRegionSelector"> {{ selectedRegion }}
|
||||
<span>···</span>
|
||||
</div>
|
||||
@@ -23,33 +22,28 @@
|
||||
<div class="left-wrapper">
|
||||
<OverviewPanel :totalCount="dashboardData?.totalCount || 0"
|
||||
:formalEmployeeCount="dashboardData?.formalEmployeeCount || 0"
|
||||
:externalStaffCount="dashboardData?.externalStaffCount || 0"
|
||||
:visitorCount="dashboardData?.visitorCount || 0"
|
||||
:externalStaffCount="dashboardData?.externalStaffCount || 0" :visitorCount="dashboardData?.visitorCount || 0"
|
||||
:parkStatistics="dashboardData?.parkStatistics" />
|
||||
<RiskStatisticsPanel :riskStatistics="riskStatistics" :dangerDetail="dangerDetail"
|
||||
:park="parkValue"
|
||||
<RiskStatisticsPanel :riskStatistics="riskStatistics" :dangerDetail="dangerDetail" :park="parkValue"
|
||||
@tab-change="handleRiskTabChange" :campus_id="query.campus_id" />
|
||||
</div>
|
||||
<div class="right-wrapper">
|
||||
<HighRiskAlertPanel :alertData="dashboardData?.alertData"
|
||||
:alertDetails="dashboardData?.alertData.details"
|
||||
<HighRiskAlertPanel :alertData="dashboardData?.alertData" :alertDetails="dashboardData?.alertData.details"
|
||||
:sourceIndex="sourceIndex" />
|
||||
<TimeoutWorkOrderPanel :timeoutWorkOrders="dashboardData?.timeoutWorkOrders"
|
||||
:alertDetails="dashboardData?.timeoutWorkOrders.details"
|
||||
:sourceIndex="sourceIndex"/>
|
||||
:alertDetails="dashboardData?.timeoutWorkOrders.details" :sourceIndex="sourceIndex" />
|
||||
</div>
|
||||
<HiddenDangerPanel :hiddenDangerData="dashboardData?.hiddenDangerData" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 区域选择弹窗 -->
|
||||
<RegionSelector v-model="regionSelectorVisible" :modelSelected="selectedPark"
|
||||
:regions="regionOption"
|
||||
<RegionSelector v-model="regionSelectorVisible" :modelSelected="selectedPark" :regions="regionOption"
|
||||
@change="onRegionChange" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {getTableList, getTableData, getWorkOrderStatistics} from './report'
|
||||
import { getTableList, getTableData } from './report'
|
||||
import { ref, onMounted, watch, onUnmounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import RegionSelector from './components/RegionSelector.vue'
|
||||
@@ -73,7 +67,7 @@ interface RegionItem {
|
||||
code: string
|
||||
}
|
||||
|
||||
type TabType = '安全类' | '工程类'
|
||||
type TabType = '危险作业' | '安全考核' | '安全、保密培训'
|
||||
|
||||
// 响应式数据
|
||||
const currentDateTime = ref<string>('')
|
||||
@@ -258,9 +252,7 @@ onMounted(async () => {
|
||||
// 去重region字段，使用Map来确保唯一性
|
||||
const regionMap = new Map()
|
||||
records.filter((el) => el.region_id == query.regionCode)
|
||||
.map(el => {
|
||||
return el
|
||||
})
|
||||
.map(el => { return el })
|
||||
.forEach(el => {
|
||||
if (!regionMap.has(el.park_name)) {
|
||||
regionMap.set(el.park_name, {
|
||||
@@ -374,9 +366,9 @@ const loadDashboardData = async (): Promise<void> => {
|
||||
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 || []
|
||||
// }
|
||||
if (risk_alert_detail.records && risk_alert_detail.records.length > 0) {
|
||||
dashboardData.value.alertData.details = risk_alert_detail.records
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取风险预警详情数据失败:', error)
|
||||
})
|
||||
@@ -397,7 +389,7 @@ const loadDashboardData = async (): Promise<void> => {
|
||||
} catch (error) {
|
||||
console.error('获取超期工单数据失败:', error)
|
||||
}
|
||||
handleRiskTabChange('安全类')
|
||||
handleRiskTabChange('危险作业')
|
||||
handleHiddenDangerPannelData(query)
|
||||
console.log('dashboardData.value>>>>>>>>>>', dashboardData.value);
|
||||
}
|
||||
@@ -488,16 +480,7 @@ const handleHiddenDangerPannelData = (query) => {
|
||||
_data2.general = Number(res.records[0].general)
|
||||
_data2.major = Number(res.records[0].major)
|
||||
|
||||
// 安全指数另算，再起一个报表
|
||||
// dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
|
||||
// 在这里添加获取安全指数的逻辑
|
||||
getTableList('hidden_danger_safety_index', query).then(res => {
|
||||
if (res.records && res.records.length > 0) {
|
||||
dashboardData.value.hiddenDangerData.safetyIndex = res.records[0].safetyIndex
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取隐患排查治理数据失败:', error)
|
||||
})
|
||||
|
||||
// 获取隐患排查治理处理进度数据
|
||||
getTableList('hidden_danger_process_progress', query).then(res => {
|
||||
@@ -569,84 +552,93 @@ 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}).catch(error => {
|
||||
console.error('获取维保任务数据失败:', error)
|
||||
return { records: [] }
|
||||
}),
|
||||
getWorkOrderStatistics({workOrderType, taskType: '巡检任务', campus_id: query.campus_id}).catch(error => {
|
||||
console.error('获取巡检任务数据失败:', error)
|
||||
return { records: [] }
|
||||
})
|
||||
])
|
||||
|
||||
// 周期映射
|
||||
const cycleMap: Record<string, string> = {
|
||||
'day': '每日',
|
||||
'month': '每月',
|
||||
'year': '每年'
|
||||
if (code == 'hazardous_operations') {
|
||||
// 根据不同的tab请求不同的接口
|
||||
getTableList(
|
||||
code,
|
||||
{ ...query, activeTab: tab }
|
||||
).then(response => {
|
||||
// 更新风险统计数据 - 传递完整的数组数据用于饼图显示
|
||||
if (response.records && response.records.length > 0) {
|
||||
dangerDetail.value = response.records
|
||||
}
|
||||
|
||||
// 将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
|
||||
}).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"
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
return charts
|
||||
]
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('获取风险统计数据失败:', error)
|
||||
})
|
||||
}
|
||||
|
||||
// 转换维保和巡检数据
|
||||
const maintenanceCharts = convertToChartData(maintenanceResponse.records || [], '维保类')
|
||||
const inspectionCharts = convertToChartData(inspectionResponse.records || [], '巡检类')
|
||||
|
||||
// 合并为6个图表：先维保（3个），后巡检（3个）
|
||||
const allCharts = [...maintenanceCharts, ...inspectionCharts]
|
||||
|
||||
// 更新riskStatistics
|
||||
riskStatistics.value[tab] = allCharts
|
||||
|
||||
console.log('更新后的riskStatistics:', riskStatistics.value)
|
||||
} catch (error) {
|
||||
console.error('获取风险统计数据失败:', error)
|
||||
}
|
||||
@@ -1227,10 +1219,12 @@ const timeOut1 = (): void => {
|
||||
|
||||
.left-top {
|
||||
padding: 0 5px;
|
||||
background-image: url('@/assets/images/screen/left_top_img.png'),
|
||||
background-image:
|
||||
url('@/assets/images/screen/left_top_img.png'),
|
||||
url('@/assets/images/screen/left_center_img.png'),
|
||||
url('@/assets/images/screen/left_bottom_img.png');
|
||||
background-position: top center,
|
||||
background-position:
|
||||
top center,
|
||||
left center,
|
||||
bottom center;
|
||||
|
||||
@@ -1238,7 +1232,8 @@ const timeOut1 = (): void => {
|
||||
background-repeat: no-repeat, no-repeat, no-repeat;
|
||||
|
||||
/* 设置位置 */
|
||||
background-size: 100% 90px,
|
||||
background-size:
|
||||
100% 90px,
|
||||
cover,
|
||||
100% 68px;
|
||||
flex: 1;
|
||||
@@ -1401,10 +1396,12 @@ const timeOut1 = (): void => {
|
||||
}
|
||||
|
||||
.left-bottom {
|
||||
background-image: url('@/assets/images/screen/left_top_2_img.png'),
|
||||
background-image:
|
||||
url('@/assets/images/screen/left_top_2_img.png'),
|
||||
url('@/assets/images/screen/left_center_img.png'),
|
||||
url('@/assets/images/screen/left_bottom_img.png');
|
||||
background-position: top center,
|
||||
background-position:
|
||||
top center,
|
||||
left center,
|
||||
bottom center;
|
||||
|
||||
@@ -1412,7 +1409,8 @@ const timeOut1 = (): void => {
|
||||
background-repeat: no-repeat, no-repeat, no-repeat;
|
||||
|
||||
/* 设置位置 */
|
||||
background-size: 100% 90px,
|
||||
background-size:
|
||||
100% 90px,
|
||||
cover,
|
||||
100% 68px;
|
||||
flex: 1;
|
||||
@@ -1464,6 +1462,8 @@ const timeOut1 = (): void => {
|
||||
row-gap: 1rem;
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.center-container {
|
||||
|
||||
@@ -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: day，month，year 对应月日年
|
||||
|
||||
export const getWorkOrderStatistics = (data: {workOrderType: string, taskType: string, campus_id?: string}) => {
|
||||
return request.post({ url: '/jeelowcode/report-data/list/report_work_order_statistics', data: {...data, pageNo: 1, pageSize: 10} })
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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`), ''),
|
||||
|
||||
Reference in New Issue
Block a user