1111

package.json

@@ -32,6 +32,7 @@
     "devDependencies": {
         "@iconify-json/iconoir": "^1.1.42",
         "@iconify-json/ri": "^1.1.20",
+        "@iconify-json/solar": "^1.1.9",
         "@unocss/eslint-config": "^0.58.7",
         "@vitejs/plugin-vue": "^4.5.2",
         "@vue/compiler-sfc": "^3.4.21",

src/router/modules/base.js

@@ -4,7 +4,9 @@ import Layout from '~src/layout/index.vue'
 export default [
     {
         path: '/',
-        redirect: '/datav',
+        name: 'index',
+        meta: { title: '数据看板' },
+        component: () => import('~src/views/home/datav.vue'),
     },
     {
         path: '/login',
@@ -13,17 +15,23 @@ export default [
         component: () => import('~src/views/login/index.vue'),
     },
     {
-        path: '/datav',
-        name: 'datav',
-        redirect: '/datav',
-        meta: { title: '首页' },
+        path: '/anomaly',
+        name: 'anomaly',
+        redirect: '/anomaly-invest',
+        meta: { title: '异常管理' },
         component: Layout,
         children: [
             {
-                path: '/datav',
-                name: 'datav',
-                meta: { title: '首页' },
-                component: () => import('~src/views/home/datav.vue'),
+                path: '/anomaly-invest',
+                name: 'anomaly-invest',
+                meta: { title: '项目投资异常管理' },
+                component: () => import('~src/views/anomaly/index.vue'),
+            },
+            {
+                path: '/anomaly-progress?type=progress',
+                name: 'anomaly-progress',
+                meta: { title: '项目进度异常管理' },
+                component: () => import('~src/views/anomaly/index.vue'),
             },
         ],
     },

src/router/modules/token.js

@@ -1,2 +1,2 @@
 //内置路由需要验证的
-export default ['home', 'index']
+export default ['index']

src/styles/view/datav.scss

@@ -0,0 +1,40 @@
+.hc-datav-main {
+    color: white;
+    i {
+        display: inline-block;
+    }
+    .hc-datav-bg {
+        position: absolute;
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+    }
+    .hc-datav-header {
+        position: relative;
+        #datav-header-bg {
+            position: relative;
+            object-fit: cover;
+            width: 100%;
+        }
+        .header-title {
+            position: absolute;
+            height: calc(100% - 30px);
+            top: 0;
+            .name {
+                font-size: 32px;
+                font-weight: bold;
+                text-shadow: 0 0 10px rgba(255, 255, 255, .5);
+                cursor: pointer;
+            }
+            i {
+                margin-right: 10px;
+            }
+        }
+        .hc-datav-search-select {
+            position: absolute;
+            justify-content: end;
+            padding-right: 14px;
+            bottom: 12px;
+        }
+    }
+}

src/styles/view/login.scss

@@ -20,9 +20,6 @@
         .hc-login-main-content .hc-login-form-card {
             border-radius: 8px;
             box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4);
-            .login-title {
-
-            }
         }
     }
 }

src/views/anomaly/index.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>111</div>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/home/datav.vue

@@ -1,11 +1,38 @@
 <template>
-    <hc-body scrollbar padding="12px">
-        1111
-    </hc-body>
+    <div class="hc-datav-main hc-full">
+        <img class="hc-datav-bg" :src="bgPng" alt="bg">
+        <div class="hc-datav-header">
+            <img id="datav-header-bg" :src="png2" alt="头部图">
+            <div class="header-title hc-flex-center w-full">
+                <div class="name hc-flex">
+                    <i class="i-solar-graph-outline" />
+                    项目数据看板
+                </div>
+            </div>
+            <div class="hc-datav-search-select hc-flex w-full">
+                <HcDatavSelect v-model="searchForm.year" :datas="yearArr" />
+                <HcDatavSelect v-model="searchForm.quarter" :datas="quarterArr" />
+                <HcDatavSelect v-model="searchForm.level" :datas="levelArr" />
+                <HcDatavSelect v-model="searchForm.stage" :datas="stageArr" />
+                <HcDatavSelect v-model="searchForm.type" :datas="typeArr" />
+            </div>
+        </div>
+    </div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
+import bgPng from '~src/assets/images/datav-bg.png'
+import png2 from '~src/assets/images/datav-2.png'
+import HcDatavSelect from './modules/select.vue'
 
+//搜索表单
+const searchForm = ref({ year: '2024', quarter: '1', level: '0', stage: '1', type: '1' })
+const yearArr = [{ id: '2024', name: '2024年' }, { id: '2023', name: '2023年' }, { id: '2022', name: '2022年' }]
+const quarterArr = [{ id: '1', name: '一季度' }, { id: '2', name: '二季度' }, { id: '3', name: '三季度' }, { id: '4', name: '四季度' }, { id: '0', name: '所有' }]
+const levelArr = [{ id: '1', name: '一级' }, { id: '2', name: '二级' }, { id: '3', name: '三级' }, { id: '0', name: '所有' }]
+const stageArr = [{ id: '1', name: '项目阶段' }, { id: '2', name: '在建项目' }, { id: '3', name: '新开工项目' }, { id: '4', name: '建成项目' }]
+const typeArr = [{ id: '1', name: '公路' }, { id: '2', name: '水利' }, { id: '3', name: '房建' }, { id: '4', name: '铁路' }]
 </script>
 
 <style lang="scss">

src/views/home/modules/select.vue

@@ -0,0 +1,123 @@
+<template>
+    <div class="hc-datav-select-main">
+        <div class="hc-datav-select-name">{{ name || placeholder }}</div>
+        <el-select v-model="value" popper-class="hc-datav-select-popper" :placeholder="placeholder" size="small" :clearable="clearable" :disabled="disabled" @change="selectChange">
+            <el-option v-for="item in data" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+    </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { isNullES } from 'js-fast-way'
+
+const props = defineProps({
+    datas: {
+        type: Array,
+        default: () => [],
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    clearable: {
+        type: Boolean,
+        default: true,
+    },
+    placeholder: {
+        type: String,
+        default: '请选择',
+    },
+})
+
+//事件
+const emit = defineEmits(['change'])
+
+//双向绑定
+const value = defineModel('modelValue', {
+    default: '',
+})
+
+//监听数据变化
+const data = ref(props.datas)
+watch(() => props.datas, (val) => {
+    data.value = val
+})
+
+//监听值变化
+const name = ref('')
+watch(() => value, (val) => {
+    name.value = getDataNmae(val.value)
+})
+
+//获取数据名称
+const getDataNmae = (id) => {
+    if (isNullES(id)) return props.placeholder
+    const item = data.value.find((item) => item.id === id)
+    return item ? item.name : props.placeholder
+}
+
+//下来框被改变
+const selectChange = (id) => {
+    name.value = getDataNmae(id)
+    emit('change', id)
+}
+</script>
+
+<style lang="scss">
+.hc-datav-select-main {
+    position: relative;
+    display: inline-block;
+    .hc-datav-select-name {
+        position: relative;
+        padding-left: 16px;
+        z-index: -10;
+    }
+    .el-select {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        .el-select__wrapper {
+            font-size: 14px;
+            gap: unset;
+            line-height: unset;
+            min-height: unset;
+            padding: 0;
+            height: 100%;
+            background: unset;
+            box-shadow: unset;
+            border-radius: 0;
+        }
+        .el-select__placeholder {
+            color: white;
+        }
+        .el-select__placeholder.is-transparent {
+            color: #d6d6d6;
+        }
+        .el-select__caret {
+            color: #ffffff;
+        }
+    }
+}
+.el-popper.hc-datav-select-popper {
+    background: #565656;
+    border: 1px solid #000000;
+    .el-popper__arrow:before {
+        background: #565656;
+        border-color: #000000;
+    }
+    .el-select-dropdown__item {
+        height: 28px;
+        line-height: 28px;
+        color: #34e3ff;
+        padding: 0 28px 0 14px;
+    }
+    .el-select-dropdown__item.is-hovering {
+        background-color: #395cc6;
+    }
+}
+.hc-datav-select-main + .hc-datav-select-main {
+    margin-left: 20px;
+}
+</style>

src/views/login/index.vue

@@ -79,6 +79,7 @@ const loading = ref(false)
 const formValidateClick = async () => {
     const formRes = await formValidate(formRef.value)
     if (!formRes) return false
+    router.push({ name: 'index' })
 }
 </script>
 

yarn.lock

@@ -567,6 +567,13 @@
   dependencies:
     "@iconify/types" "*"
 
+"@iconify-json/solar@^1.1.9":
+  version "1.1.9"
+  resolved "http://39.108.216.210:9000/@iconify-json/solar/-/solar-1.1.9.tgz#a7eba734d0ff02457142334af25a937b9aa732d9"
+  integrity sha512-BcWzZqA02BiQduYizqU/J4v4RNs0MkjZUGpMbejpozH8YQSt3+S/LfV6zfVRonx/2DhXTVSqiLa1abDRAZtojQ==
+  dependencies:
+    "@iconify/types" "*"
+
 "@iconify/types@*", "@iconify/types@^2.0.0":
   version "2.0.0"
   resolved "http://39.108.216.210:9000/@iconify/types/-/types-2.0.0.tgz#ab0e9ea681d6c8a1214f30cd741fe3a20cc57f57"