|
|
@@ -5,30 +5,31 @@
|
|
|
<ContentWrap style="border: 0">
|
|
|
<!-- 搜索工作栏 -->
|
|
|
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true">
|
|
|
- <el-form-item label="风险等级" prop="riskGrade">
|
|
|
- <el-select
|
|
|
- v-model="queryParams.riskGrade"
|
|
|
- placeholder="请选择风险等级"
|
|
|
- clearable
|
|
|
- style="width: 200px">
|
|
|
- <el-option
|
|
|
- v-for="dict in getStrDictOptions(DICT_TYPE.DANGER_GRADE)"
|
|
|
- :key="dict.value"
|
|
|
- :label="dict.label"
|
|
|
- :value="dict.value" />
|
|
|
- </el-select>
|
|
|
+ <el-form-item label="月报标题" prop="title">
|
|
|
+ <el-input v-model="queryParams.title" placeholder="请输入月报标题" />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="创建日期" prop="createTime">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="queryParams.createTime"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ type="daterange"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
|
|
|
+ class="!w-200px" />
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item>
|
|
|
- <el-button @click="handleQuery"
|
|
|
+ <el-button @click="handleQuery" v-hasPermi="['rq:qhse-month-report:query']"
|
|
|
><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button
|
|
|
>
|
|
|
<el-button @click="resetQuery"
|
|
|
><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button
|
|
|
>
|
|
|
- <el-button type="primary" @click="add" color="#626aef">
|
|
|
+ <!-- <el-button type="primary" @click="add" color="#626aef">
|
|
|
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
|
|
- </el-button>
|
|
|
+ </el-button> -->
|
|
|
<el-button type="success" plain @click="handleExport" :loading="exportLoading">
|
|
|
<Icon icon="ep:download" class="mr-5px" /> 导出
|
|
|
</el-button>
|
|
|
@@ -37,98 +38,31 @@
|
|
|
</ContentWrap>
|
|
|
|
|
|
<ContentWrap style="border: 0">
|
|
|
- <div v-loading="!staticData.length" class="stats-cards">
|
|
|
- <div
|
|
|
- v-for="item in statsDisplayCards"
|
|
|
- :key="item.key"
|
|
|
- class="stats-card"
|
|
|
- :style="getStatsCardStyle(item.accent, item.glow)">
|
|
|
- <div
|
|
|
- class="stats-card__decor stats-card__decor--left"
|
|
|
- :style="{ background: item.glow }"></div>
|
|
|
- <div
|
|
|
- class="stats-card__decor stats-card__decor--right"
|
|
|
- :style="{ background: item.glow }"></div>
|
|
|
- <div class="stats-card__header">
|
|
|
- <div class="stats-card__icon-wrap">
|
|
|
- <div class="stats-card__icon" :style="{ color: item.accent }">
|
|
|
- <Icon :icon="item.icon" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="stats-card__title">{{ item.label }}</div>
|
|
|
- </div>
|
|
|
- <div class="stats-card__body">
|
|
|
- <CountTo
|
|
|
- :duration="2600"
|
|
|
- :end-val="item.count"
|
|
|
- :start-val="0"
|
|
|
- class="stats-card__count"
|
|
|
- :style="{ color: item.accent }" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
<zm-table
|
|
|
:data="tableData"
|
|
|
border
|
|
|
style="width: 100%"
|
|
|
:header-cell-style="{ background: '#f5f7fa', color: '#333' }"
|
|
|
:cell-style="{ padding: '12px 8px' }"
|
|
|
- height="52.7vh">
|
|
|
- <!-- 区域/位置 列（已合并） -->
|
|
|
- <zm-table-column prop="region" label="区域/位置" align="center" fixed="left" />
|
|
|
-
|
|
|
- <!-- 其他列保持不变 -->
|
|
|
- <zm-table-column label="序号" width="70" align="center">
|
|
|
- <template #default="scope">
|
|
|
- {{ scope.$index + 1 }}
|
|
|
+ height="70.8vh">
|
|
|
+ <zm-table-column
|
|
|
+ prop="title"
|
|
|
+ label="月报标题"
|
|
|
+ align="center"
|
|
|
+ fixed="left"
|
|
|
+ show-overflow-tooltip />
|
|
|
+ <zm-table-column prop="personName" label="工单填报人" align="center" />
|
|
|
+ <zm-table-column label="创建日期" prop="createTime" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{ formatDate(row.createTime) }}
|
|
|
</template>
|
|
|
</zm-table-column>
|
|
|
- <zm-table-column prop="elementDescription" label="危害因素描述" align="center" />
|
|
|
- <zm-table-column prop="maybeResult" label="可导致的后果" align="center" />
|
|
|
-
|
|
|
- <!-- 风险评价列保持不变 -->
|
|
|
- <zm-table-column label="风险评价" align="center">
|
|
|
- <zm-table-column prop="evalKn" label="可能性 (L)" width="80" align="center">
|
|
|
- <template #default="{ row }">
|
|
|
- {{ row.evalKn }}
|
|
|
- </template>
|
|
|
- </zm-table-column>
|
|
|
- <zm-table-column prop="evalYz" label="严重性 (S)" width="80" align="center">
|
|
|
- <template #default="{ row }">
|
|
|
- {{ row.evalYz }}
|
|
|
- </template>
|
|
|
- </zm-table-column>
|
|
|
- <zm-table-column prop="evalFxz" label="风险值 (R)" width="80" align="center">
|
|
|
- <template #default="{ row }">
|
|
|
- {{ row.evalFxz }}
|
|
|
- </template>
|
|
|
- </zm-table-column>
|
|
|
- <zm-table-column prop="riskGrade" label="风险等级" width="100" align="center">
|
|
|
- <template #default="scope">
|
|
|
- <dict-tag :type="DICT_TYPE.DANGER_GRADE" :value="scope.row.riskGrade" />
|
|
|
- </template>
|
|
|
- </zm-table-column>
|
|
|
- </zm-table-column>
|
|
|
|
|
|
- <zm-table-column
|
|
|
- prop="controlMethod"
|
|
|
- label="控制措施"
|
|
|
- show-overflow-tooltip
|
|
|
- align="center" />
|
|
|
- <zm-table-column prop="charge" label="责任人" align="center" />
|
|
|
<zm-table-column label="操作" width="150" align="center" fixed="right" action>
|
|
|
<template #default="{ row }">
|
|
|
- <div class="flex gap-3 justify-center">
|
|
|
- <el-link
|
|
|
- :underline="false"
|
|
|
- size="small"
|
|
|
- type="primary"
|
|
|
- @click="openForm('edit', row)">
|
|
|
- 编辑
|
|
|
- </el-link>
|
|
|
- <el-link :underline="false" size="small" type="danger" @click="deleteRow(row)">
|
|
|
- 删除
|
|
|
- </el-link>
|
|
|
+ <div class="flex gap-1 justify-center">
|
|
|
+ <el-button text type="primary" @click="add(row)"> 填报 </el-button>
|
|
|
+ <el-button text size="small" type="success" @click="detail(row)"> 查看 </el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
</zm-table-column>
|
|
|
@@ -148,126 +82,17 @@
|
|
|
</ContentWrap>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <!-- 新增/编辑弹窗 -->
|
|
|
- <!-- 新增/编辑弹窗 -->
|
|
|
- <el-dialog v-model="dialogVisible" :title="dialogTitle" width="50%" @close="resetForm">
|
|
|
- <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
|
|
|
- <el-row :gutter="20">
|
|
|
- <!-- 第一行 -->
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="区域/位置" prop="region">
|
|
|
- <el-input v-model="formData.region" placeholder="请输入区域/位置" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="危害因素描述" prop="elementDescription">
|
|
|
- <el-input v-model="formData.elementDescription" placeholder="请输入危害因素描述" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <el-row :gutter="20">
|
|
|
- <!-- 第二行 -->
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="可能导致的后果" prop="maybeResult">
|
|
|
- <el-input
|
|
|
- v-model="formData.maybeResult"
|
|
|
- placeholder="请输入可能导致的后果"
|
|
|
- type="textarea"
|
|
|
- :rows="1" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="风险评价可能性" prop="evalKn">
|
|
|
- <el-input-number
|
|
|
- v-model="formData.evalKn"
|
|
|
- controls-position="right"
|
|
|
- style="width: 100%" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <el-row :gutter="20">
|
|
|
- <!-- 第三行 -->
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="风险评价严重性" prop="evalYz">
|
|
|
- <el-input-number
|
|
|
- v-model="formData.evalYz"
|
|
|
- controls-position="right"
|
|
|
- style="width: 100%" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="风险评价风险值" prop="evalFxz">
|
|
|
- <el-input-number v-model="formData.evalFxz" disabled style="width: 100%" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <el-row :gutter="20">
|
|
|
- <!-- 第四行 -->
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="风险等级" prop="riskGrade">
|
|
|
- <el-select
|
|
|
- v-model="formData.riskGrade"
|
|
|
- placeholder="请选择风险等级"
|
|
|
- clearable
|
|
|
- style="width: 100%">
|
|
|
- <el-option
|
|
|
- v-for="dict in getStrDictOptions(DICT_TYPE.DANGER_GRADE)"
|
|
|
- :key="dict.value"
|
|
|
- :label="dict.label"
|
|
|
- :value="dict.value" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-form-item label="责任人" prop="charge">
|
|
|
- <el-input v-model="formData.charge" placeholder="请输入责任人" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item label="备注" prop="remark">
|
|
|
- <el-input
|
|
|
- v-model="formData.remark"
|
|
|
- type="textarea"
|
|
|
- placeholder="请输入备注"
|
|
|
- :rows="1" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <!-- 控制措施单独一行（占满） -->
|
|
|
- <el-row :gutter="20">
|
|
|
- <el-col :span="24">
|
|
|
- <el-form-item label="控制措施" prop="controlMethod">
|
|
|
- <el-input
|
|
|
- v-model="formData.controlMethod"
|
|
|
- type="textarea"
|
|
|
- :rows="4"
|
|
|
- placeholder="请输入控制措施" />
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-form>
|
|
|
-
|
|
|
- <template #footer>
|
|
|
- <el-button @click="dialogVisible = false">取消</el-button>
|
|
|
- <el-button type="primary" @click="submitForm">确定</el-button>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { ref, reactive, watch, onMounted, computed } from 'vue'
|
|
|
-import { IotDangerApi } from '@/api/pms/qhse/index'
|
|
|
+import { QhseMonthReportApi } from '@/api/pms/qhse'
|
|
|
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
|
|
|
-import DeptTree from '@/views/system/user/HazardTree.vue'
|
|
|
+import DeptTree from '@/views/system/user/DeptTree2.vue'
|
|
|
import { useUserStore } from '@/store/modules/user'
|
|
|
+import { getUserProfile } from '@/api/system/user/profile'
|
|
|
import { useRouter } from 'vue-router'
|
|
|
+import { formatDate } from '@/utils/formatTime'
|
|
|
|
|
|
defineOptions({ name: 'QhseMonthlyReport' })
|
|
|
|
|
|
@@ -275,62 +100,29 @@ const userStore = useUserStore()
|
|
|
const router = useRouter()
|
|
|
// 查询参数
|
|
|
const queryParams = reactive({
|
|
|
- riskGrade: '',
|
|
|
+ createTime: null,
|
|
|
+ title: '',
|
|
|
deptId: ''
|
|
|
})
|
|
|
|
|
|
+let queryFormRef = ref(null)
|
|
|
+
|
|
|
// 表格数据
|
|
|
const tableData = ref([])
|
|
|
const isLeftContentCollapsed = ref(false)
|
|
|
-// 弹窗控制
|
|
|
-const dialogVisible = ref(false)
|
|
|
-const dialogTitle = ref('新增')
|
|
|
-const formData = reactive({
|
|
|
- region: '', // 区域/位置
|
|
|
- charge: '',
|
|
|
- elementDescription: '', // 危害因素描述
|
|
|
- maybeResult: '', // 可能导致的后果
|
|
|
- evalKn: 1, // 可能性
|
|
|
- evalYz: 1, // 严重性
|
|
|
- evalFxz: 1, // 风险值（自动计算）
|
|
|
- riskGrade: '一般风险', // 风险等级
|
|
|
- controlMethod: '', // 控制措施
|
|
|
- remark: '' // 备注
|
|
|
-})
|
|
|
|
|
|
-// 表单校验规则
|
|
|
-const rules = {
|
|
|
- region: [{ required: true, message: '请输入区域/位置', trigger: 'blur' }],
|
|
|
- charge: [{ required: true, message: '请输入责任人', trigger: 'blur' }],
|
|
|
- elementDescription: [{ required: true, message: '请输入危害因素描述', trigger: 'blur' }],
|
|
|
- maybeResult: [{ required: true, message: '请输入可能导致的后果', trigger: 'blur' }],
|
|
|
- evalKn: [{ required: true, message: '请输入风险评价可能性', trigger: 'change' }],
|
|
|
- evalYz: [{ required: true, message: '请输入风险评价严重性', trigger: 'change' }],
|
|
|
- riskGrade: [{ required: true, message: '请选择风险等级', trigger: 'change' }],
|
|
|
- controlMethod: [{ required: true, message: '请输入控制措施', trigger: 'blur' }]
|
|
|
-}
|
|
|
+const dialogTitle = ref('新增')
|
|
|
|
|
|
-watch(
|
|
|
- () => [formData.evalKn, formData.evalYz],
|
|
|
- ([kn, yz]) => {
|
|
|
- if (kn && yz) {
|
|
|
- formData.evalFxz = kn * yz
|
|
|
- }
|
|
|
- },
|
|
|
- { immediate: true }
|
|
|
-)
|
|
|
// 搜索
|
|
|
const handleQuery = () => {
|
|
|
pagination.pageNo = 1 // 搜索后回到第一页
|
|
|
loadTableData()
|
|
|
- getStatic()
|
|
|
}
|
|
|
|
|
|
const handleDeptNodeClick = async (row) => {
|
|
|
queryParams.deptId = row.id
|
|
|
pagination.pageNo = 1
|
|
|
loadTableData()
|
|
|
- getStatic()
|
|
|
}
|
|
|
|
|
|
const downloadFile = (response) => {
|
|
|
@@ -340,7 +132,7 @@ const downloadFile = (response) => {
|
|
|
})
|
|
|
|
|
|
// 获取文件名
|
|
|
- let fileName = '危险源.xlsx'
|
|
|
+ let fileName = '月报.xlsx'
|
|
|
const disposition = response.headers ? response.headers['content-disposition'] : ''
|
|
|
if (disposition) {
|
|
|
const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/
|
|
|
@@ -369,7 +161,7 @@ const handleExport = async () => {
|
|
|
try {
|
|
|
exportLoading.value = true
|
|
|
// 调用导出接口
|
|
|
- const response = await IotDangerApi.exportDanger(queryParams)
|
|
|
+ const response = await QhseMonthReportApi.exportQhseMonthReport(queryParams)
|
|
|
|
|
|
// 下载文件
|
|
|
downloadFile(response)
|
|
|
@@ -383,10 +175,9 @@ const handleExport = async () => {
|
|
|
|
|
|
// 重置查询
|
|
|
const resetQuery = () => {
|
|
|
- queryParams.riskGrade = '' // 清空风险等级筛选
|
|
|
pagination.pageNo = 1 // 重置为第一页
|
|
|
+ queryFormRef.value.resetFields()
|
|
|
loadTableData()
|
|
|
- getStatic()
|
|
|
}
|
|
|
|
|
|
// 删除确认
|
|
|
@@ -398,7 +189,7 @@ const deleteRow = async (row) => {
|
|
|
type: 'warning'
|
|
|
})
|
|
|
|
|
|
- await IotDangerApi.deleteDanger(row.id)
|
|
|
+ await QhseMonthReportApi.deleteQhseMonthReport(row.id)
|
|
|
ElMessage.success('删除成功')
|
|
|
loadTableData() // 重新加载数据
|
|
|
} catch (error) {
|
|
|
@@ -416,103 +207,40 @@ const handleSizeChange = (val) => {
|
|
|
loadTableData()
|
|
|
}
|
|
|
|
|
|
-// 预先计算合并信息
|
|
|
-const spanArr = ref([])
|
|
|
-const pos = ref(0)
|
|
|
-
|
|
|
-// 计算合并信息
|
|
|
-const getSpanArr = (data) => {
|
|
|
- spanArr.value = []
|
|
|
- pos.value = 0
|
|
|
-
|
|
|
- data.forEach((item, index) => {
|
|
|
- if (index === 0) {
|
|
|
- spanArr.value.push(1)
|
|
|
- pos.value = 0
|
|
|
- } else {
|
|
|
- if (data[index].region === data[index - 1].region) {
|
|
|
- spanArr.value[pos.value] += 1
|
|
|
- spanArr.value.push(0)
|
|
|
- } else {
|
|
|
- spanArr.value.push(1)
|
|
|
- pos.value = index
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-// 行合并方法
|
|
|
-const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
|
|
|
- if (columnIndex === 0) {
|
|
|
- const _row = spanArr.value[rowIndex]
|
|
|
- const _col = _row > 0 ? 1 : 0
|
|
|
- return {
|
|
|
- rowspan: _row,
|
|
|
- colspan: _col
|
|
|
- }
|
|
|
- }
|
|
|
- return {
|
|
|
- rowspan: 1,
|
|
|
- colspan: 1
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
// 当前页变化
|
|
|
const handleCurrentChange = (val) => {
|
|
|
pagination.pageNo = val
|
|
|
loadTableData()
|
|
|
}
|
|
|
|
|
|
-const add = () => {
|
|
|
+const add = (row) => {
|
|
|
+ if (row.dutyPerson !== userInfo.value.id) {
|
|
|
+ ElMessage.error('您没有权限进行此操作')
|
|
|
+ return
|
|
|
+ }
|
|
|
router.push({
|
|
|
- name: 'MonthlyReportAdd'
|
|
|
+ name: 'MonthlyReportAdd',
|
|
|
+ params: {
|
|
|
+ id: row.id
|
|
|
+ }
|
|
|
})
|
|
|
}
|
|
|
-// 打开表单
|
|
|
-const openForm = (type, row = null) => {
|
|
|
- dialogTitle.value = type === 'create' ? '新增' : '编辑'
|
|
|
- if (type === 'edit') {
|
|
|
- Object.assign(formData, row)
|
|
|
- // 计算风险值 R = L × S
|
|
|
- formData.riskValue = formData.possibility * formData.severity
|
|
|
- } else {
|
|
|
- resetForm()
|
|
|
- }
|
|
|
- dialogVisible.value = true
|
|
|
-}
|
|
|
|
|
|
-// 重置表单
|
|
|
-const resetForm = () => {
|
|
|
- Object.keys(formData).forEach((key) => {
|
|
|
- formData[key] = ''
|
|
|
+const detail = (row) => {
|
|
|
+ if (row.dutyPerson !== userInfo.value.id) {
|
|
|
+ ElMessage.error('您没有权限进行此操作')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ router.push({
|
|
|
+ name: 'MonthlyReportInfo',
|
|
|
+ params: {
|
|
|
+ id: row.id
|
|
|
+ }
|
|
|
})
|
|
|
}
|
|
|
|
|
|
// 提交表单
|
|
|
const formRef = ref(null)
|
|
|
-const submitForm = async () => {
|
|
|
- await formRef.value.validate()
|
|
|
- try {
|
|
|
- const params = {
|
|
|
- ...formData,
|
|
|
- evalFxz: formData.evalFxz // 使用已计算的值
|
|
|
- }
|
|
|
-
|
|
|
- if (dialogTitle.value === '新增') {
|
|
|
- await IotDangerApi.createDanger(params)
|
|
|
- ElMessage.success('新增成功')
|
|
|
- } else {
|
|
|
- params.id = formData.id
|
|
|
- await IotDangerApi.updateDanger(params)
|
|
|
- ElMessage.success('修改成功')
|
|
|
- }
|
|
|
-
|
|
|
- loadTableData()
|
|
|
- dialogVisible.value = false
|
|
|
- } catch (error) {
|
|
|
- ElMessage.error('提交失败')
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
// 加载数据
|
|
|
const exportLoading = ref(false)
|
|
|
@@ -526,110 +254,29 @@ const loadTableData = async () => {
|
|
|
const params = {
|
|
|
pageNo: pagination.pageNo,
|
|
|
pageSize: pagination.pageSize,
|
|
|
- riskGrade: queryParams.riskGrade, // 添加搜索参数
|
|
|
+ createTime: queryParams.createTime,
|
|
|
+
|
|
|
+ title: queryParams.title,
|
|
|
deptId: queryParams.deptId
|
|
|
}
|
|
|
- const res = await IotDangerApi.getDangerList(params)
|
|
|
+ const res = await QhseMonthReportApi.getQhseMonthReportPage(params)
|
|
|
tableData.value = res.list || []
|
|
|
total.value = res.total || 0
|
|
|
-
|
|
|
- // // 按 region 排序（支持中文）
|
|
|
- // tableData.value.sort((a, b) => {
|
|
|
- // return a.region.localeCompare(b.region, 'zh-CN')
|
|
|
- // })
|
|
|
-
|
|
|
- // 计算合并信息
|
|
|
- getSpanArr(tableData.value)
|
|
|
} catch (error) {
|
|
|
console.error('加载失败:', error)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-let staticData = ref([])
|
|
|
-const totalRiskCount = computed(() =>
|
|
|
- staticData.value.reduce((sum, item) => sum + (Number(item.count) || 0), 0)
|
|
|
-)
|
|
|
-
|
|
|
-const getStatsCardMeta = (classify) => {
|
|
|
- const value = String(classify || '')
|
|
|
- if (value.includes('重大') || value.includes('閲嶅ぇ')) {
|
|
|
- return {
|
|
|
- accent: '#ff5b61',
|
|
|
- glow: 'radial-gradient(circle, rgba(255, 91, 97, 0.22) 0%, rgba(255, 91, 97, 0) 72%)',
|
|
|
- icon: 'ep:warning-filled'
|
|
|
- }
|
|
|
- }
|
|
|
- if (value.includes('较大') || value.includes('杈冨ぇ')) {
|
|
|
- return {
|
|
|
- accent: '#ff9827',
|
|
|
- glow: 'radial-gradient(circle, rgba(255, 152, 39, 0.24) 0%, rgba(255, 152, 39, 0) 72%)',
|
|
|
- icon: 'ep:opportunity'
|
|
|
- }
|
|
|
- }
|
|
|
- if (value.includes('一般') || value.includes('涓€鑸')) {
|
|
|
- return {
|
|
|
- accent: '#3d7cff',
|
|
|
- glow: 'radial-gradient(circle, rgba(61, 124, 255, 0.2) 0%, rgba(61, 124, 255, 0) 72%)',
|
|
|
- icon: 'ep:info-filled'
|
|
|
- }
|
|
|
- }
|
|
|
- if (value.includes('低') || value.includes('浣')) {
|
|
|
- return {
|
|
|
- accent: '#25b36a',
|
|
|
- glow: 'radial-gradient(circle, rgba(37, 179, 106, 0.22) 0%, rgba(37, 179, 106, 0) 72%)',
|
|
|
- icon: 'ep:success-filled'
|
|
|
- }
|
|
|
- }
|
|
|
- return {
|
|
|
- accent: '#5f7da8',
|
|
|
- glow: 'radial-gradient(circle, rgba(95, 125, 168, 0.18) 0%, rgba(95, 125, 168, 0) 72%)',
|
|
|
- icon: 'ep:data-analysis'
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-const statsDisplayCards = computed(() =>
|
|
|
- staticData.value.map((item, index) => {
|
|
|
- const meta = getStatsCardMeta(item.classify)
|
|
|
- const count = Number(item.count) || 0
|
|
|
- const rate = totalRiskCount.value ? ((count / totalRiskCount.value) * 100).toFixed(1) : '0.0'
|
|
|
- return {
|
|
|
- key: `${item.classify}-${index}`,
|
|
|
- label: item.classify,
|
|
|
- count,
|
|
|
- note: `占比:${rate}%`,
|
|
|
- ...meta
|
|
|
- }
|
|
|
- })
|
|
|
-)
|
|
|
-
|
|
|
-const getStatsCardStyle = (accent, glow) => ({
|
|
|
- '--stats-accent': accent,
|
|
|
- '--stats-glow': glow
|
|
|
-})
|
|
|
-
|
|
|
-const getStatsCardClass = (classify) => {
|
|
|
- const value = String(classify || '')
|
|
|
- if (value.includes('重大')) return 'stats-card--major'
|
|
|
- if (value.includes('较大')) return 'stats-card--high'
|
|
|
- if (value.includes('一般')) return 'stats-card--medium'
|
|
|
- if (value.includes('低')) return 'stats-card--low'
|
|
|
- return 'stats-card--default'
|
|
|
-}
|
|
|
-
|
|
|
-async function getStatic() {
|
|
|
- if (queryParams.deptId) {
|
|
|
- const res = await IotDangerApi.getDangerStatistics(queryParams.deptId)
|
|
|
- staticData.value = res.classify
|
|
|
- } else {
|
|
|
- const res = await IotDangerApi.getDangerStatistics(userStore.user.deptId)
|
|
|
- staticData.value = res.classify
|
|
|
- }
|
|
|
-}
|
|
|
+let userInfo = ref({})
|
|
|
|
|
|
// 页面挂载后加载数据
|
|
|
-onMounted(() => {
|
|
|
+onMounted(async () => {
|
|
|
loadTableData()
|
|
|
- getStatic()
|
|
|
+
|
|
|
+ const users = await getUserProfile()
|
|
|
+ userInfo.value = users
|
|
|
+
|
|
|
+ console.log('xxxxxxxxxxxxxxxxxx', userInfo.value)
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
@@ -654,183 +301,4 @@ onMounted(() => {
|
|
|
background-color: #f5f7fa;
|
|
|
border-bottom: 1px solid #ddd;
|
|
|
}
|
|
|
-
|
|
|
-.sub-row {
|
|
|
- padding: 12px 0;
|
|
|
- text-align: left;
|
|
|
-}
|
|
|
-
|
|
|
-.risk-evaluation {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 4px;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.risk-item {
|
|
|
- font-size: 12px;
|
|
|
- padding: 4px 8px;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: #f5f7fa;
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-
|
|
|
-.risk-level {
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
- padding: 6px 12px;
|
|
|
- border-radius: 4px;
|
|
|
-}
|
|
|
-
|
|
|
-.stats-cards {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
|
- gap: 12px;
|
|
|
- margin-bottom: 16px;
|
|
|
-}
|
|
|
-
|
|
|
-.stats-card {
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- min-height: 132px;
|
|
|
- padding: 18px 18px 16px;
|
|
|
- border-radius: 22px;
|
|
|
- background: radial-gradient(
|
|
|
- circle at 18% 22%,
|
|
|
- rgb(255 255 255 / 92%) 0%,
|
|
|
- rgb(255 255 255 / 0%) 20%
|
|
|
- ),
|
|
|
- radial-gradient(circle at 88% 80%, rgb(255 215 158 / 22%) 0%, rgb(255 215 158 / 0%) 16%),
|
|
|
- linear-gradient(135deg, rgb(239 245 255 / 96%) 0%, rgb(217 230 248 / 88%) 100%);
|
|
|
- border: 1px solid rgb(255 255 255 / 62%);
|
|
|
- box-shadow:
|
|
|
- inset 0 1px 0 rgb(255 255 255 / 86%),
|
|
|
- 0 14px 30px rgb(116 146 191 / 12%);
|
|
|
-}
|
|
|
-
|
|
|
-.stats-card__decor {
|
|
|
- position: absolute;
|
|
|
- border-radius: 999px;
|
|
|
- pointer-events: none;
|
|
|
- filter: blur(8px);
|
|
|
- opacity: 0.95;
|
|
|
-}
|
|
|
-
|
|
|
-.stats-card__decor--left {
|
|
|
- width: 72px;
|
|
|
- height: 72px;
|
|
|
- left: -10px;
|
|
|
- top: -8px;
|
|
|
-}
|
|
|
-
|
|
|
-.stats-card__decor--right {
|
|
|
- width: 88px;
|
|
|
- height: 88px;
|
|
|
- right: -18px;
|
|
|
- bottom: -24px;
|
|
|
-}
|
|
|
-
|
|
|
-.stats-card__header {
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 14px;
|
|
|
-}
|
|
|
-
|
|
|
-.stats-card__icon-wrap {
|
|
|
- width: 48px;
|
|
|
- height: 48px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border-radius: 14px;
|
|
|
- box-shadow:
|
|
|
- inset 0 1px 0 rgb(255 255 255 / 85%),
|
|
|
- 0 10px 24px rgb(118 144 187 / 10%);
|
|
|
-}
|
|
|
-
|
|
|
-.stats-card__icon {
|
|
|
- font-size: 24px;
|
|
|
- /* line-height: 1; */
|
|
|
-}
|
|
|
-
|
|
|
-.stats-card__title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 700;
|
|
|
- color: #324b72;
|
|
|
- letter-spacing: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.stats-card__body {
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
- gap: 8px;
|
|
|
- margin-top: 14px;
|
|
|
- padding-left: 62px;
|
|
|
-}
|
|
|
-
|
|
|
-.stats-card__count {
|
|
|
- display: block;
|
|
|
- font-size: 38px !important;
|
|
|
- font-weight: 800;
|
|
|
- line-height: 0.92;
|
|
|
- letter-spacing: 1px;
|
|
|
- font-style: italic;
|
|
|
- text-shadow: 0 8px 18px rgb(68 110 183 / 10%);
|
|
|
-}
|
|
|
-
|
|
|
-.stats-card__note {
|
|
|
- padding-bottom: 4px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 700;
|
|
|
- line-height: 1;
|
|
|
-}
|
|
|
-
|
|
|
-@media (max-width: 768px) {
|
|
|
- .stats-cards {
|
|
|
- grid-template-columns: 1fr;
|
|
|
- }
|
|
|
-
|
|
|
- .stats-card {
|
|
|
- min-height: 160px;
|
|
|
- padding: 24px 22px 22px;
|
|
|
- border-radius: 22px;
|
|
|
- }
|
|
|
-
|
|
|
- .stats-card__header {
|
|
|
- gap: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- .stats-card__icon-wrap {
|
|
|
- width: 58px;
|
|
|
- height: 58px;
|
|
|
- border-radius: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- .stats-card__icon {
|
|
|
- font-size: 28px;
|
|
|
- }
|
|
|
-
|
|
|
- .stats-card__title {
|
|
|
- font-size: 17px;
|
|
|
- }
|
|
|
-
|
|
|
- .stats-card__body {
|
|
|
- margin-top: 18px;
|
|
|
- padding-left: 76px;
|
|
|
- gap: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .stats-card__count {
|
|
|
- font-size: 46px !important;
|
|
|
- }
|
|
|
-
|
|
|
- .stats-card__note {
|
|
|
- font-size: 18px;
|
|
|
- padding-bottom: 6px;
|
|
|
- }
|
|
|
-}
|
|
|
</style>
|
