|
|
@@ -3,11 +3,11 @@
|
|
|
<!-- 新增风险问题 -->
|
|
|
<div style="margin-bottom: 20px; display: flex; align-items: center;">
|
|
|
<el-input
|
|
|
- v-model="form.problem"
|
|
|
+ v-model="form.description"
|
|
|
placeholder="请输入风险问题描述"
|
|
|
style="width: 400px; margin-right: 10px;"
|
|
|
/>
|
|
|
- <el-select v-model="form.level" placeholder="风险等级" style="width: 150px; margin-right: 10px;">
|
|
|
+ <el-select v-model="form.riskLevelCn" placeholder="风险等级" style="width: 150px; margin-right: 10px;">
|
|
|
<el-option label="低" value="低"></el-option>
|
|
|
<el-option label="中" value="中"></el-option>
|
|
|
<el-option label="高" value="高"></el-option>
|
|
|
@@ -22,105 +22,154 @@
|
|
|
</div>
|
|
|
<el-table :data="problemList" border style="width: 100%;" fit>
|
|
|
<el-table-column prop="id" label="编号" width="80" />
|
|
|
- <el-table-column prop="problem" label="问题描述" />
|
|
|
- <el-table-column prop="level" label="风险等级" width="120">
|
|
|
+ <el-table-column prop="description" label="问题描述" />
|
|
|
+ <el-table-column label="风险等级" width="120">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-tag :type="scope.row.level === '高' ? 'danger' : scope.row.level === '中' ? 'warning' : 'info'">
|
|
|
- {{ scope.row.level }}
|
|
|
+ <el-tag :type="scope.row.riskLevel === 'HIGH' ? 'danger' : scope.row.riskLevel === 'MEDIUM' ? 'warning' : 'info'">
|
|
|
+ {{ riskToCn(scope.row.riskLevel) }}
|
|
|
</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="status" label="状态" width="120" />
|
|
|
- <el-table-column prop="date" label="发现时间" width="180" />
|
|
|
- <el-table-column label="操作" width="180">
|
|
|
+ <el-table-column label="状态" width="120">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-button size="mini" type="primary" @click="markResolved(scope.$index)">
|
|
|
+ <el-tag :type="scope.row.status === 'PENDING' ? 'danger' : 'success'">
|
|
|
+ {{ scope.row.status === 'PENDING' ? '未整改' : '已整改' }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="foundAt" label="发现时间" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ formatDateTime(scope.row.foundAt) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="220">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="primary"
|
|
|
+ :disabled="scope.row.status === 'RECTIFIED'"
|
|
|
+ @click="markResolved(scope.row)"
|
|
|
+ >
|
|
|
标记已整改
|
|
|
</el-button>
|
|
|
- <el-button size="mini" type="danger" @click="deleteProblem(scope.$index)">
|
|
|
+ <el-button size="mini" type="danger" @click="deleteProblem(scope.row)">
|
|
|
删除
|
|
|
</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
- <div style="margin-top: 10px;">隐患总数：{{ problemList.length }}</div>
|
|
|
+ <div style="margin-top: 10px;">隐患总数：{{ total }}</div>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { fetchIssues, createIssue, updateIssueStatus, deleteIssue } from '@/api/safety/safety'
|
|
|
export default {
|
|
|
- name: "RiskWarning",
|
|
|
+ name: 'RiskWarning',
|
|
|
data() {
|
|
|
return {
|
|
|
form: {
|
|
|
- problem: "",
|
|
|
- level: "",
|
|
|
+ description: '',
|
|
|
+ riskLevelCn: '' // '高' | '中' | '低'
|
|
|
},
|
|
|
- // 死数据示例
|
|
|
- problemList: [
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- problem: "电线老化存在安全隐患",
|
|
|
- level: "高",
|
|
|
- status: "未整改",
|
|
|
- date: "2025-09-01 09:00",
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- problem: "消防器材过期",
|
|
|
- level: "中",
|
|
|
- status: "未整改",
|
|
|
- date: "2025-09-02 10:30",
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- problem: "仓库通道堆放杂物",
|
|
|
- level: "低",
|
|
|
- status: "已整改",
|
|
|
- date: "2025-09-02 15:20",
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
+ problemList: [],
|
|
|
+ total: 0,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 100,
|
|
|
+ _timer: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.loadList()
|
|
|
+ // 8 秒轮询
|
|
|
+ this._timer = setInterval(this.loadList, 8000)
|
|
|
+ this.$once('hook:beforeDestroy', () => {
|
|
|
+ if (this._timer) clearInterval(this._timer)
|
|
|
+ })
|
|
|
},
|
|
|
methods: {
|
|
|
- addProblem() {
|
|
|
- if (!this.form.problem || !this.form.level) {
|
|
|
- this.$message.warning("请填写完整问题信息！");
|
|
|
- return;
|
|
|
+ // 录入
|
|
|
+ async addProblem() {
|
|
|
+ if (!this.form.description || !this.form.riskLevelCn) {
|
|
|
+ this.$message.warning('请填写完整问题信息！')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const payload = {
|
|
|
+ description: this.form.description,
|
|
|
+ riskLevel: this.cnToRisk(this.form.riskLevelCn), // HIGH/MEDIUM/LOW
|
|
|
+ foundAt: new Date().toISOString()
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ await createIssue(payload)
|
|
|
+ this.$message.success('录入成功！')
|
|
|
+ this.form.description = ''
|
|
|
+ this.form.riskLevelCn = ''
|
|
|
+ this.loadList()
|
|
|
+ } catch (e) {
|
|
|
+ this.$message.error('录入失败')
|
|
|
+ console.error(e)
|
|
|
}
|
|
|
- const newId = this.problemList.length
|
|
|
- ? Math.max(...this.problemList.map((p) => p.id)) + 1
|
|
|
- : 1;
|
|
|
- this.problemList.push({
|
|
|
- id: newId,
|
|
|
- problem: this.form.problem,
|
|
|
- level: this.form.level,
|
|
|
- status: "未整改",
|
|
|
- date: new Date().toLocaleString(),
|
|
|
- });
|
|
|
- this.$message.success("录入成功！");
|
|
|
- this.form.problem = "";
|
|
|
- this.form.level = "";
|
|
|
},
|
|
|
- markResolved(index) {
|
|
|
- this.problemList[index].status = "已整改";
|
|
|
- this.$message.success("该问题已标记为整改完成！");
|
|
|
+
|
|
|
+ // 列表
|
|
|
+ async loadList() {
|
|
|
+ try {
|
|
|
+ const params = { pageNum: this.pageNum, pageSize: this.pageSize }
|
|
|
+ const res = await fetchIssues(params)
|
|
|
+ this.problemList = (res && res.records) || []
|
|
|
+ this.total = (res && res.total) || 0
|
|
|
+ } catch (e) {
|
|
|
+ console.error(e)
|
|
|
+ }
|
|
|
},
|
|
|
- deleteProblem(index) {
|
|
|
- this.$confirm("确认删除该问题吗？", "提示", {
|
|
|
- type: "warning",
|
|
|
- }).then(() => {
|
|
|
- this.problemList.splice(index, 1);
|
|
|
- this.$message.success("删除成功！");
|
|
|
- });
|
|
|
+
|
|
|
+ // 标记整改
|
|
|
+ async markResolved(row) {
|
|
|
+ try {
|
|
|
+ await updateIssueStatus(row.id, 'RECTIFIED')
|
|
|
+ this.$message.success('已标记为整改完成')
|
|
|
+ this.loadList()
|
|
|
+ } catch (e) {
|
|
|
+ this.$message.error('操作失败')
|
|
|
+ console.error(e)
|
|
|
+ }
|
|
|
},
|
|
|
- },
|
|
|
-};
|
|
|
+
|
|
|
+ // 删除
|
|
|
+ async deleteProblem(row) {
|
|
|
+ try {
|
|
|
+ await this.$confirm('确认删除该问题吗？', '提示', { type: 'warning' })
|
|
|
+ await deleteIssue(row.id)
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ this.loadList()
|
|
|
+ } catch (e) {
|
|
|
+ // 取消删除不提示错误
|
|
|
+ if (e !== 'cancel') console.error(e)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 工具：中英映射
|
|
|
+ cnToRisk(cn) {
|
|
|
+ if (cn === '高') return 'HIGH'
|
|
|
+ if (cn === '中') return 'MEDIUM'
|
|
|
+ return 'LOW'
|
|
|
+ },
|
|
|
+ riskToCn(en) {
|
|
|
+ if (en === 'HIGH') return '高'
|
|
|
+ if (en === 'MEDIUM') return '中'
|
|
|
+ return '低'
|
|
|
+ },
|
|
|
+ formatDateTime(dt) {
|
|
|
+ if (!dt) return ''
|
|
|
+ const d = new Date(dt)
|
|
|
+ const pad = n => (n < 10 ? '0' + n : n)
|
|
|
+ return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.app-container {
|
|
|
- padding: 20px;
|
|
|
-}
|
|
|
+.app-container { padding: 20px; }
|
|
|
</style>
|
