fit: 个人风险人员详情

src/api/sensitivePerception/riskPersonnel.ts

@@ -6,3 +6,10 @@ export function listRiskPersonnel(query) {
         query
     });
 }
+
+export function getRiskPersonnel(id) {
+    return request.get({
+        url: '/risk/personal/' + id
+    });
+}
+

src/views/sensitivePerception/RiskPersonnel.vue

@@ -102,7 +102,10 @@
 
                 <el-table-column label="操作" width="160">
                     <template #default="{ row }">
-                        <el-button type="primary" link @click="handleShowDesc(row)"
+                        <el-button
+                            type="primary"
+                            link
+                            @click="handleShowDesc(row)"
                             >查看详情</el-button
                         >
                     </template>
@@ -151,12 +154,47 @@
                     </div>
                 </div>
             </el-col>
-            <el-col :span="5"></el-col>
+            <el-col :span="5">
+                <div class="flex center column text-center">
+                    <div class="socre-box">
+                        {{ 99 }}
+                    </div>
+                    <span style="font-size: 24px" class="mt-10">风险指数</span>
+                </div>
+            </el-col>
         </el-row>
+        <div style="min-height: 50vh">
+            <div v-for="(item, index) in personal.riskClueList" :key="index">
+                <div>
+                    <span class="text-primary">{{ item.riskName }}</span>
+                </div>
+                <el-table :data="item.clues">
+                    <el-table-column
+                        label="发生时间"
+                        prop="eventTime"
+                        width="180"
+                    />
+                    <el-table-column
+                        label="风险因素"
+                        prop="riskReason"
+                        show-overflow-tooltip
+                    />
+                    <el-table-column
+                        label="风险内容"
+                        prop="thingDesc"
+                        show-overflow-tooltip
+                    />
+                    <el-table-column label="分值" prop="score" />
+                </el-table>
+            </div>
+        </div>
     </el-dialog>
 </template>
 <script lang="ts" setup>
-import { listRiskPersonnel } from "@/api/sensitivePerception/riskPersonnel";
+import {
+    listRiskPersonnel,
+    getRiskPersonnel,
+} from "@/api/sensitivePerception/riskPersonnel";
 
 const query = ref({});
 const list = ref<any[]>([]);
@@ -179,21 +217,36 @@ onMounted(() => {
     getList();
 });
 
-const activeRow = ref({})
+const activeRow = ref({});
-function handleShowDesc(row) {
+const personal = ref({
-    activeRow.value = row
+    riskClueList: [],
-    show.value = true
+});
+async function handleShowDesc(row) {
+    activeRow.value = row;
+    const data = await getRiskPersonnel(row.id);
+    show.value = true;
+    personal.value = data;
 }
 
 function getGender(val) {
     if (val == 1) {
-        return '男'
+        return "男";
     }
     if (val == 1) {
-        return '女'
+        return "女";
     }
-    return ''
+    return "";
 }
 </script>
 <style lang="scss" scoped>
+.socre-box {
+    background: linear-gradient(180deg, #ffa36a 0%, #ff0000 100%);
+    border-radius: 9px;
+    border: 2px solid #f11d16;
+    height: 153px;
+    line-height: 153px;
+    text-align: center;
+    font-size: 124px;
+    color: #fff;
+}
 </style>