风险预警

src/router/menus.js

@@ -91,6 +91,20 @@ export default [
                 code: 'system-organization',
             },
 
+        ]
+    },
+    {
+        source: 'home-3',
+        name: '风险预警',
+        code: 'risk',
+        children: [
+            {
+                source: 'home-3',
+                name: '风险预警',
+                code: 'risk-warning',
+            },
+          
+            
         ]
     },
 ]

src/router/modules/base.js

@@ -157,6 +157,21 @@ export default [
 
         ],
     },
+    {
+        path: '/risk',
+        name: 'risk',
+        redirect: '/risk/warning',
+        meta: {title: '风险预警'},
+        component: Layout,
+        children: [
+            {
+                path: '/risk/warning',
+                name: 'risk-warning',
+                meta: {title: '风险预警'},
+                component: () => import('~src/views/risk/warning.vue')
+            },
+        ],
+    },
     {
         path: '/403',
         name: '403',

src/router/modules/token.js

@@ -19,4 +19,5 @@ export default [
     'system-menu',
     'system-parameter',
     'system-organization',
+    'risk-warning'
 ]

src/views/risk/warning.vue

@@ -0,0 +1,67 @@
+<template>
+   <HcCard actionSize="lg" scrollbar>
+        <template #header>
+            <div class="warn_text">
+                <HcIcon name="alert" class="warn_icon"/>
+                <span>15条</span>
+            </div>
+        </template>
+        <HcTable :column="tableColumn" :datas="tableData">
+            <template #name="{row}" >
+                <span style="color: blue;"> {{ row['name'] }}</span>
+            </template>
+            <template #realprice="{row}" >
+                <span style="color: blue;"> {{ row['realprice'] }}</span>
+            </template>
+            <template #overprice="{row}" >
+                <span style="color: red;"> {{ row['overprice'] }}</span>
+            </template>
+        </HcTable>
+        <template #action>
+                <HcPages :pages="searchForm" @change="pageChange"></HcPages>
+        </template>
+   </HcCard>
+</template>
+
+<script setup>
+import {ref, watch} from "vue";
+import {useAppStore} from "~src/store";
+
+const tableColumn = [
+    {key: 'name', name: '项目名称'},
+    {key: 'text', name: '项目进程'},
+    {key: 'color', name: '预算类型'},
+    {key: 'text', name: '任务明细'},
+    {key: 'text', name: '预算工时（天'},
+    {key: 'text', name: '成本预算'},
+    {key: 'realprice', name: '实际支出'},
+    {key: 'overprice', name: '超出预算额'},
+]
+const tableData = ref([
+    {name: '项目名称', realprice: '文本1', overprice: 'red'},
+    {name: '项目进程', realprice: '文本2', overprice: 'blue'},
+    {name: '预算类型', realprice: '文本3', overprice: '无'},
+    {name: '任务明细', realprice: '文本3', overprice: '无'},
+    {name: '预算工时（天）', realprice: '文本3', overprice: '无'},
+    {name: '预算工时（天）', realprice: '文本3', overprice: '无'},
+])
+//搜索表单
+const searchForm = ref({current: 1, size: 20, total: 60})
+
+//分页被点击
+const pageChange = ({current, size}) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+}
+</script>
+
+<style lang="scss" scoped>
+.warn_text{
+    font-size: 32px;
+    .warn_icon{
+        font-size: 36px;
+        color: red;
+        margin-right: 10px;
+    }
+}
+</style>