qhse看板调整

src/views/pms/qhse/kanban/index.vue

@@ -224,6 +224,7 @@ const qhseMetricTabs = [
 ] as const
 
 const activeQhseMetric = ref<QhseMetricValue>('ltir')
+const dangerGradeOptions = computed(() => getStrDictOptions(DICT_TYPE.DANGER_GRADE))
 
 const qhseTrendSeries = ref<Record<QhseMetricValue, Array<{ year: string; value: number }>>>({
   ltir: [
@@ -979,6 +980,18 @@ const hazardDialogQueryParams = reactive({
   source: ''
 })
 
+const dangerDialogVisible = ref(false)
+const dangerDialogTitle = ref('')
+const dangerDialogLoading = ref(false)
+const dangerDialogList = ref<any[]>([])
+const dangerDialogTotal = ref(0)
+const dangerDialogQueryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  riskGrade: '',
+  deptId: userStore.getUser.deptId
+})
+
 const getCertificateTypeText = (type: string) => {
   const map: Record<string, string> = {
     personal: '个人证书',
@@ -1080,6 +1093,17 @@ async function getHazardDialogList() {
   }
 }
 
+async function getDangerDialogList() {
+  dangerDialogLoading.value = true
+  try {
+    const data = await IotDangerApi.getDangerList(dangerDialogQueryParams)
+    dangerDialogList.value = data.list || []
+    dangerDialogTotal.value = data.total || 0
+  } finally {
+    dangerDialogLoading.value = false
+  }
+}
+
 function openHazardDialog(barLabel: string) {
   hazardDialogQueryParams.pageNo = 1
   hazardDialogQueryParams.pageSize = 10
@@ -1102,6 +1126,19 @@ function openHazardDialog(barLabel: string) {
   getHazardDialogList()
 }
 
+function openDangerDialog(zone: { title?: string }) {
+  const riskGradeLabel = String(zone.title || '').replace(/区$/, '').trim()
+  const matchedOption = dangerGradeOptions.value.find((item) => item.label === riskGradeLabel)
+  const riskGrade = matchedOption?.value || ''
+  dangerDialogQueryParams.pageNo = 1
+  dangerDialogQueryParams.pageSize = 10
+  dangerDialogQueryParams.deptId = userStore.getUser.deptId
+  dangerDialogQueryParams.riskGrade = riskGrade
+  dangerDialogTitle.value = riskGradeLabel ? `${riskGradeLabel}风险列表` : '风险列表'
+  dangerDialogVisible.value = true
+  getDangerDialogList()
+}
+
 function handleHazardBarClick(params: { name?: string }) {
   if (!params?.name) return
   openHazardDialog(params.name)
@@ -1295,7 +1332,11 @@ onUnmounted(() => {
                   风险管控及隐患治理
                 </div>
                 <div class="risk-grid">
-                  <article v-for="zone in riskZones" :key="zone.title" class="risk-card">
+                  <article
+                    v-for="zone in riskZones"
+                    :key="zone.title"
+                    class="risk-card risk-card--clickable"
+                    @click="openDangerDialog(zone)">
                     <div class="risk-card__title">
                       <span class="risk-card__dot" :style="{ background: zone.color }"></span>
                       <span :style="{ color: zone.color }">{{ zone.title }}</span>
@@ -1749,6 +1790,72 @@ onUnmounted(() => {
       </div>
     </div>
   </Dialog>
+
+  <Dialog v-model="dangerDialogVisible" :title="dangerDialogTitle" width="1400px">
+    <div class="certificate-warning-dialog">
+      <el-table
+        :loading="dangerDialogLoading"
+        :data="dangerDialogList"
+        height="400"
+        class="device-list-table production-brief-table">
+        <el-table-column label="序号" width="80" align="center">
+          <template #default="scope">
+            {{
+              (dangerDialogQueryParams.pageNo - 1) * dangerDialogQueryParams.pageSize +
+              scope.$index +
+              1
+            }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="区域/位置"
+          align="center"
+          prop="region"
+          min-width="140"
+          show-overflow-tooltip />
+        <el-table-column
+          label="危险因素描述"
+          align="center"
+          prop="elementDescription"
+          min-width="180"
+          show-overflow-tooltip />
+        <el-table-column
+          label="可导致的后果"
+          align="center"
+          prop="maybeResult"
+          min-width="180"
+          show-overflow-tooltip />
+        <el-table-column label="可能性(L)" align="center" prop="evalKn" min-width="100" />
+        <el-table-column label="严重性(S)" align="center" prop="evalYz" min-width="100" />
+        <el-table-column label="风险值(R)" align="center" prop="evalFxz" min-width="100" />
+        <el-table-column label="风险等级" align="center" min-width="110">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.DANGER_GRADE" :value="scope.row.riskGrade" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="控制措施"
+          align="center"
+          prop="controlMethod"
+          min-width="180"
+          show-overflow-tooltip />
+        <el-table-column
+          label="责任人"
+          align="center"
+          prop="charge"
+          min-width="100"
+          show-overflow-tooltip />
+      </el-table>
+
+      <div class="certificate-pagination">
+        <Pagination
+          :total="dangerDialogTotal"
+          v-model:page="dangerDialogQueryParams.pageNo"
+          v-model:limit="dangerDialogQueryParams.pageSize"
+          @pagination="getDangerDialogList" />
+      </div>
+    </div>
+  </Dialog>
 </template>
 
 <style lang="scss" scoped>
@@ -1825,6 +1932,17 @@ onUnmounted(() => {
   color: #5c7393;
 }
 
+.risk-card--clickable {
+  cursor: pointer;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.risk-card--clickable:hover {
+  transform: translateY(-2px);
+}
+
 .summary-toolbar__picker {
   width: 190px;
 }