门户，普通权限，领导权限

package.json

@@ -13,6 +13,7 @@
         "dayjs": "^1.11.7",
         "echarts": "^5.4.2",
         "element-plus": "2.3.4",
+        "hc-vue3-ui": "^1.0.3",
         "js-base64": "^3.7.5",
         "js-cookie": "^3.0.5",
         "js-fast-way": "^0.1.0",
@@ -21,8 +22,7 @@
         "pinia": "^2.0.35",
         "remixicon": "^3.1.1",
         "vue": "^3.2.47",
-        "vue-router": "^4.1.6",
-        "hc-vue3-ui": "^1.0.2"
+        "vue-router": "^4.1.6"
     },
     "devDependencies": {
         "@vitejs/plugin-vue": "^4.2.1",
@@ -34,7 +34,7 @@
         "tailwindcss": "3.3.2",
         "unplugin-auto-import": "^0.15.2",
         "unplugin-vue-components": "^0.24.1",
-        "vite": "^4.3.2",
+        "vite": "^4.3.5",
         "z-vfonts": "^0.0.1"
     }
 }

src/components/dropdown/index.vue

@@ -0,0 +1,51 @@
+<template>
+    <el-dropdown>
+        <div class="el-dropdown-link">
+            <span class="mr-2">{{curKey}}</span>
+            <HcIcon name="arrow-down-s" ui="arrow-icon"/>
+        </div>
+        <template #dropdown>
+            <el-dropdown-menu>
+                <el-dropdown-item v-for="item in itemData" @click="dropdownItemClick(item)">{{item.name}}</el-dropdown-item>
+            </el-dropdown-menu>
+        </template>
+    </el-dropdown>
+</template>
+
+<script setup>
+import {ref, watch} from "vue"
+
+//初始
+const props = defineProps({
+    cur: {
+        type: [String, Number],
+        default: ''
+    },
+    datas: {
+        type: Array,
+        default: () => ([])
+    }
+})
+
+const curKey = ref(props.cur)
+const itemData = ref(props.datas)
+
+//监听
+watch(() => [
+    props.cur,
+], ([cur]) => {
+    curKey.value = cur
+})
+
+//深度监听
+watch(() => [
+    props.datas,
+], ([datas]) => {
+    itemData.value = datas
+}, {deep: true})
+
+
+const dropdownItemClick = (item) => {
+    curKey.value = item.name
+}
+</script>

src/components/echarts/BarLabelRotation.vue

@@ -0,0 +1,150 @@
+<template>
+    <div class="hac-echarts-box">
+        <div ref="echart" class="hac-echarts" :style="`width : ${chart?.clientWidth}px`"/>
+    </div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+const props = defineProps({
+    datas: {
+        type: Array,
+        default: () => ([])
+    }
+})
+
+//初始变量
+let chart = null;
+const echart = ref(null)
+const datas = ref(props.datas)
+
+//创建月份
+const monthData = ref([])
+for (let i = 1; i < 13; i++) {
+    monthData.value = [...monthData.value, i + '月']
+}
+
+//监听
+watch(() => [
+    props.datas
+], ([data]) => {
+    datas.value = data
+    setDatas(data)
+})
+
+//初始化图表
+const initChart = () => {
+    chart = echarts.init(echart.value)
+    setDatas(props.datas)
+}
+
+//监听浏览器窗口变化
+const windowResize = () => {
+    window.addEventListener("resize", resizeEvent);
+}
+
+const resizeEvent = () => {
+    window.requestAnimationFrame(() => {
+        chart.resize();
+    })
+}
+
+const onResize = () => {
+    nextTick(() => {
+        chart.resize();
+    })
+}
+
+//设置数据
+const setDatas = (data) => {
+    let AxisData = [], neiYeRatio = [], waiYeRatio = [];
+    for (let i = 0; i < data.length; i++) {
+        AxisData.push(data[i].title)
+        neiYeRatio.push(data[i]?.neiYeRatio)
+        waiYeRatio.push(data[i]?.waiYeRatio)
+    }
+    setOptions(AxisData,neiYeRatio,waiYeRatio)
+}
+
+//设置图表
+const setOptions = (AxisData,neiYeRatio,waiYeRatio) => {
+    chart.setOption({
+        color: ['#5087EC', '#68BBC4', '#58A55D'],
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            }
+        },
+        grid: {
+            top: '20px',
+            left: '0',
+            right: '0',
+            bottom: '0',
+            containLabel: true
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: monthData.value,
+            }
+        ],
+        yAxis: [{type: 'value'}],
+        series: [
+            {
+                name: '总计划',
+                type: 'bar',
+                data: [320, 332, 301, 334, 390]
+            },
+            {
+                name: '已完成',
+                type: 'bar',
+                data: [220, 182, 191, 234, 290]
+            },
+            {
+                name: '未完成',
+                type: 'bar',
+                data: [150, 232, 201, 154, 190]
+            }
+        ]
+    })
+}
+
+//渲染完成
+onMounted(() => {
+    nextTick(() => {
+        initChart()
+        windowResize()
+    })
+})
+
+//被卸载
+onUnmounted(() => {
+    window.removeEventListener("resize",resizeEvent);
+    chart.dispose()
+    chart = null
+})
+
+// 暴露出去
+defineExpose({
+    onResize
+})
+</script>
+
+<style lang="scss" scoped>
+.hac-echarts-box {
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    .hac-echarts {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 2;
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>

src/components/gradient-card/style.scss

@@ -7,6 +7,7 @@
         overflow: hidden;
         .hc-card-main {
             position: relative;
+            flex: 1;
             z-index: 3;
         }
     }

src/components/index.js

@@ -1,6 +1,8 @@
+import HcDropdown from './dropdown/index.vue'
 import HcGradientCard from './gradient-card/index.vue'
 
 //注册全局组件
 export const setupComponents = (App) => {
+    App.component('HcDropdown', HcDropdown)
     App.component('HcGradientCard', HcGradientCard)
 }

src/styles/home/admin.scss

@@ -0,0 +1,78 @@
+.hac-card-title.g {
+    color: black;
+    &::before {
+        background: linear-gradient(360deg, rgba(14,232,209,1) 48.67%,rgba(4,131,252,1) 94.83%);
+    }
+}
+.hac-extra-img {
+    width: 25px;
+}
+.hac-card-item-body {
+    position: relative;
+    .money {
+        color: black;
+        font-size: 22px;
+        font-weight: bold;
+    }
+    .text {
+        margin-top: 20px;
+        color: #FB6386;
+        font-size: 15px;
+    }
+}
+.hac-item-progress {
+    position: relative;
+    width: 100%;
+    .title {
+        width: 100px;
+        display: inline-block;
+        font-size: 14px;
+        position: relative;
+        top: -3px;
+    }
+    .num {
+        position: relative;
+        display: inline-block;
+        width: calc(100% - 100px);
+    }
+}
+.hac-item-progress + .hac-item-progress {
+    margin-top: 17px;
+}
+
+.hc-card-item-sub {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 20px;
+    .item-sub-content {
+        flex: 1;
+        position: relative;
+        .title {
+            font-size: 15px;
+        }
+        .num-box {
+            position: relative;
+            margin-top: 15px;
+            .num {
+                font-size: 38px;
+                font-weight: bold;
+            }
+            .text {
+                margin-left: 3px;
+                font-size: 15px;
+                color: inherit;
+            }
+        }
+    }
+    .item-sub-icon {
+        height: 56px;
+        .img {
+            height: 100%;
+        }
+    }
+}
+.hc-row-echarts-box {
+    position: relative;
+    height: 260px;
+}

src/styles/home/index.scss

@@ -0,0 +1,74 @@
+.hc-card-item-sub {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding:20px;
+    .item-sub-icon {
+        position: relative;
+        font-size: 50px;
+        margin-right: 18px;
+    }
+    .item-sub-content {
+        position: relative;
+        .num {
+            font-size: 22px;
+            font-weight: 500;
+        }
+        .title {
+            margin-top: 8px;
+            font-size: 14px;
+        }
+    }
+}
+
+.hac-card-item-table {
+    position: relative;
+    height: 290px;
+    .hac-home-notice-item {
+        position: relative;
+        background: #dfdfdf;
+        font-size: 15px;
+        border-radius: 3px;
+        padding: 10px;
+        cursor: pointer;
+        border: 1px solid var(--el-color-primary-light-7);
+        transition: background .3s;
+        .time {
+            font-size: 14px;
+            text-align: right;
+        }
+        /*even为偶数行 odd为奇数行*/
+        &:nth-child(even) {
+            background: #edf1f5;
+        }
+        &:hover {
+            background: var(--el-color-primary-light-7);
+        }
+    }
+    .hac-home-notice-item + .hac-home-notice-item {
+        margin-top: 6px;
+    }
+}
+
+.hac-row-total-item {
+    position: relative;
+    font-size: 14px;
+    padding: 16px 0;
+    border-radius: 3px;
+    text-align: center;
+    background: var(--el-color-primary-light-9);
+    border: 1px solid var(--el-color-primary-light-7);
+    .num {
+        font-size: 18px;
+        font-weight: bold;
+        color: var(--el-color-primary);
+    }
+    .text {
+        margin-top: 8px;
+    }
+}
+
+.hc-row-echarts-box {
+    position: relative;
+    height: 260px;
+}

src/styles/index.scss

@@ -2,6 +2,41 @@ html, body, #app {
     height: 100%;
     background-color: #EBF4F6;
 }
+*:focus-visible {
+    outline: none;
+}
+
+.el-scrollbar.hc-main-scrollbar .el-scrollbar__bar {
+    right: -18px;
+}
+
+.el-scrollbar:not(.hc-main-scrollbar) .el-scrollbar__bar {
+    right: 0;
+}
+
+.hc-main-row {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+}
+
+.hac-card-title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    margin-left: 8px;
+    &::before {
+        content: '';
+        position: relative;
+        display: inline-block;
+        width: 5px;
+        height: 18px;
+        border-radius: 10px;
+        background-color: var(--el-color-primary-dark-2);
+        right: 8px;
+    }
+}
 
 .bg-orange-gradient {
     background-image: linear-gradient(45deg, #ff9700, #ed1c24);
@@ -49,10 +84,10 @@ html, body, #app {
 }
 
 
-.hc-card-box.el-card {
+.el-card.hc-card-box {
     --el-card-bg-color: white;
 }
-.hc-card-box.el-card .el-card__body .hc-card-action-box {
+.el-card.hc-card-box .el-card__body .hc-card-action-box {
     background-color: white;
 }
 
@@ -67,3 +102,7 @@ html, body, #app {
         }
     }
 }
+
+.hc-table-ref-box.no-border {
+    border: 0;
+}

src/views/home/admin.vue

@@ -1,19 +1,282 @@
 <template>
-    <div class="home-styles-box">
-        111111
-    </div>
+    <el-scrollbar class="hc-main-scrollbar">
+        <div class="hc-main-row">
+            <el-row :gutter="14">
+                <el-col :span="4">
+                    <HcCardItem ui="hac-card-item">
+                        <template #header>
+                            <div class="hac-card-title g">年度合同指标</div>
+                        </template>
+                        <template #extra>
+                            <img class="hac-extra-img" :src="QImg" alt="">
+                        </template>
+                        <div class="hac-card-item-body">
+                            <div class="money">￥3,000.00</div>
+                            <div class="text">已收入：￥220</div>
+                        </div>
+                    </HcCardItem>
+                </el-col>
+                <el-col :span="4">
+                    <HcCardItem ui="hac-card-item">
+                        <template #header>
+                            <div class="hac-card-title g">年度利润指标</div>
+                        </template>
+                        <template #extra>
+                            <img class="hac-extra-img" :src="QImg" alt="">
+                        </template>
+                        <div class="hac-card-item-body">
+                            <div class="money">￥1,000.00</div>
+                            <div class="text">已盈利：￥?</div>
+                        </div>
+                    </HcCardItem>
+                </el-col>
+                <el-col :span="16">
+                    <HcCardItem ui="hac-card-item">
+                        <template #header>
+                            <div class="hac-card-title g">进度统计</div>
+                        </template>
+                        <div class="hac-card-item-body">
+                            <div class="hac-item-progress">
+                                <div class="title">年度合同指标</div>
+                                <div class="num">
+                                    <el-progress :text-inside="true" :stroke-width="18" :percentage="70" color="#8978FD"/>
+                                </div>
+                            </div>
+                            <div class="hac-item-progress">
+                                <div class="title">年度利润指标</div>
+                                <div class="num">
+                                    <el-progress :text-inside="true" :stroke-width="18" :percentage="30" color="#73A3FE"/>
+                                </div>
+                            </div>
+                        </div>
+                    </HcCardItem>
+                </el-col>
+            </el-row>
+
+            <HcCardItem ui="hac-card-item mt-4">
+                <template #header>
+                    <div class="hac-card-title text-black">年度各项费用统计</div>
+                </template>
+                <template #extra>
+                    <HcDropdown :cur="planTime" :datas="itemData"/>
+                </template>
+                <div class="hac-card-item-body mb-2">
+                    <el-row :gutter="14">
+                        <el-col :span="6">
+                            <HcGradientCard color="purple">
+                                <div class="hc-card-item-sub">
+                                    <div class="item-sub-content">
+                                        <div class="title">总合同</div>
+                                        <div class="num-box">
+                                            <span class="num">1200</span>
+                                            <span class="text">万</span>
+                                        </div>
+                                    </div>
+                                    <div class="item-sub-icon">
+                                        <img class="img" :src="HeImg" alt="">
+                                    </div>
+                                </div>
+                            </HcGradientCard>
+                        </el-col>
+                        <el-col :span="6">
+                            <HcGradientCard color="blue">
+                                <div class="hc-card-item-sub">
+                                    <div class="item-sub-content">
+                                        <div class="title">总收入</div>
+                                        <div class="num-box">
+                                            <span class="num">560</span>
+                                            <span class="text">万</span>
+                                        </div>
+                                    </div>
+                                    <div class="item-sub-icon">
+                                        <img class="img" :src="ShouImg" alt="">
+                                    </div>
+                                </div>
+                            </HcGradientCard>
+                        </el-col>
+                        <el-col :span="6">
+                            <HcGradientCard color="red">
+                                <div class="hc-card-item-sub">
+                                    <div class="item-sub-content">
+                                        <div class="title">总实际支出</div>
+                                        <div class="num-box">
+                                            <span class="num">90</span>
+                                            <span class="text">万</span>
+                                        </div>
+                                    </div>
+                                    <div class="item-sub-icon">
+                                        <img class="img" :src="ZhiImg" alt="">
+                                    </div>
+                                </div>
+                            </HcGradientCard>
+                        </el-col>
+                        <el-col :span="6">
+                            <HcGradientCard color="green">
+                                <div class="hc-card-item-sub">
+                                    <div class="item-sub-content">
+                                        <div class="title">总计划支出</div>
+                                        <div class="num-box">
+                                            <span class="num">125</span>
+                                            <span class="text">万</span>
+                                        </div>
+                                    </div>
+                                    <div class="item-sub-icon">
+                                        <img class="img" :src="Zhi1Img" alt="">
+                                    </div>
+                                </div>
+                            </HcGradientCard>
+                        </el-col>
+                    </el-row>
+                </div>
+            </HcCardItem>
+
+            <HcCardItem ui="hac-card-item mt-4">
+                <template #header>
+                    <div class="hac-card-title text-black">本年度各项目支出对比</div>
+                </template>
+                <template #extra>
+                    <HcDropdown :cur="planTime" :datas="itemData"/>
+                </template>
+                <div class="hc-row-echarts-box">
+                    <BarLabelRotation/>
+                </div>
+            </HcCardItem>
+
+            <el-row :gutter="14" class="mt-4">
+                <el-col :span="10">
+                    <HcCardItem ui="hac-card-item">
+                        <template #header>
+                            <div class="hac-card-title text-black">当月各部门计划安排比重</div>
+                        </template>
+                        <template #extra>
+                            <HcDropdown :cur="planTime" :datas="itemData"/>
+                        </template>
+                        <div class="hac-card-item-body" style="height: 410px">
+                            <HcTable ui="no-border" :isIndex="false" :column="tableColumn" :datas="tableData"/>
+                        </div>
+                    </HcCardItem>
+                </el-col>
+                <el-col :span="14">
+                    <div class="hac-card-col-item">
+                        <HcCardItem ui="hac-card-item">
+                            <template #header>
+                                <div class="hac-card-icon-title">
+                                    <HcIcon name="alarm-warning" ui="text-orange text-xl"/>
+                                    <el-badge :value="12">
+                                        <span class="ml-2 mr-3 text-black">影响回款的风险计划</span>
+                                    </el-badge>
+                                </div>
+                            </template>
+                            <div class="hac-card-item-body" style="height: 160px">
+                                1123
+                            </div>
+                        </HcCardItem>
+                    </div>
+                    <div class="hac-card-col-item mt-4">
+                        <el-row :gutter="14">
+                            <el-col :span="12">
+                                <HcCardItem ui="hac-card-item">
+                                    <template #header>
+                                        <div class="hac-card-title text-black">各项目支出占比统计</div>
+                                    </template>
+                                    <template #extra>
+                                        <HcDropdown :cur="planTime" :datas="itemData"/>
+                                    </template>
+                                    <div class="hac-card-item-body" style="height: 160px">
+                                        1123
+                                    </div>
+                                </HcCardItem>
+                            </el-col>
+                            <el-col :span="12">
+                                <HcCardItem ui="hac-card-item">
+                                    <template #header>
+                                        <div class="hac-card-title text-black">各项目收入占比统计</div>
+                                    </template>
+                                    <template #extra>
+                                        <HcDropdown :cur="planTime" :datas="itemData"/>
+                                    </template>
+                                    <div class="hac-card-item-body" style="height: 160px">
+                                        1123
+                                    </div>
+                                </HcCardItem>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </el-col>
+            </el-row>
+
+            <HcCardItem ui="hac-card-item mt-4">
+                <template #header>
+                    <div class="hac-card-title text-black">项目服务阶段进程</div>
+                </template>
+                <template #extra>
+                    <el-select v-model="value" size="small">
+                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
+                    </el-select>
+                </template>
+                <div class="hc-row-echarts-box">
+                    22222
+                </div>
+            </HcCardItem>
+        </div>
+    </el-scrollbar>
 </template>
 
 <script setup>
 import {ref, watch} from "vue";
-import {useAppStore} from "~src/store";
+import QImg from "~src/assets/images/q.png";
+import HeImg from "~src/assets/images/he.png";
+import ShouImg from "~src/assets/images/shou.png";
+import ZhiImg from "~src/assets/images/zhi.png";
+import Zhi1Img from "~src/assets/images/zhi1.png";
+import BarLabelRotation from "~com/echarts/BarLabelRotation.vue";
+
+//选择日期时间
+const planTime = ref('汇总所有')
+const itemData = ref([{name: '2023年02月'}, {name: '2023年03月'}, {name: '2023年04月'}, {name: '汇总所有'}])
+
+const tableColumn = [
+    {key: 'name', name: '项目名称'},
+    {key: 'put1', name: '实施投入', align: 'center'},
+    {key: 'put2', name: '研发投入', align: 'center'},
+    {key: 'put3', name: '维护投入', align: 'center'}
+]
+const tableData = ref([
+    {name: '名称1', put1: '26%', put2: '26%', put3: '26%'},
+    {name: '名称2', put1: '26%', put2: '26%', put3: '26%'},
+    {name: '名称3', put1: '26%', put2: '26%', put3: '26%'},
+    {name: '名称4', put1: '26%', put2: '26%', put3: '26%'},
+    {name: '名称5', put1: '26%', put2: '26%', put3: '26%'},
+    {name: '名称6', put1: '26%', put2: '26%', put3: '26%'},
+    {name: '名称7', put1: '26%', put2: '26%', put3: '26%'},
+    {name: '名称8', put1: '26%', put2: '26%', put3: '26%'},
+])
+
+const value = ref('')
+const options = [
+    {
+        value: 'Option1',
+        label: '奉建路',
+    },
+    {
+        value: 'Option2',
+        label: '西环线',
+    },
+    {
+        value: 'Option3',
+        label: '陈油路',
+    },
+]
 
 </script>
 
 <style lang="scss" scoped>
-
+@import "~src/styles/home/admin.scss";
 </style>
 
 <style lang="scss">
-
+.hac-item-progress .num .el-progress .el-progress-bar .el-progress-bar__outer,
+.hac-item-progress .num .el-progress .el-progress-bar .el-progress-bar__inner {
+    border-radius: 3px;
+}
 </style>

src/views/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-scrollbar>
+    <el-scrollbar class="hc-main-scrollbar">
         <div class="hc-main-row">
             <el-row :gutter="14">
                 <el-col :span="6">
@@ -58,52 +58,141 @@
 
             <el-row :gutter="14" class="mt-8">
                 <el-col :span="12">
-                    22
+                    <HcCardItem ui="hac-card-item">
+                        <template #header>
+                            <div class="hac-card-title">最新预警信息</div>
+                        </template>
+                        <div class="hac-card-item-table">
+                            <HcTable ui="no-border" indexName="编号" :column="tableColumn" :datas="tableData"/>
+                        </div>
+                    </HcCardItem>
                 </el-col>
                 <el-col :span="12">
-                    333
+                    <HcCardItem ui="hac-card-item">
+                        <template #header>
+                            <div class="hac-card-title">通知</div>
+                        </template>
+                        <div class="hac-card-item-table">
+                            <el-scrollbar>
+                                <div class="hac-home-notice-item">
+                                    <div class="line-clamp-2 title">
+                                        《任务名称xxxxxx》中其中【任务描述】已被【代潘】变更为已完成状态，
+                                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx,
+                                        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+                                    </div>
+                                    <div class="time">2022-10-25</div>
+                                </div>
+                                <div class="hac-home-notice-item">
+                                    <div class="line-clamp-2 title">《任务名称xxxxxx》您有一条新任务待执行，xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
+                                    <div class="time">2022-10-25</div>
+                                </div>
+                                <div class="hac-home-notice-item">
+                                    <div class="line-clamp-2 title">《任务名称xxxxxx》您有一条新任务待执行，xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
+                                    <div class="time">2022-10-25</div>
+                                </div>
+                                <div class="hac-home-notice-item">
+                                    <div class="line-clamp-2 title">《任务名称xxxxxx》您有一条新任务待执行，xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
+                                    <div class="time">2022-10-25</div>
+                                </div>
+                            </el-scrollbar>
+                        </div>
+                    </HcCardItem>
                 </el-col>
             </el-row>
+
+            <HcCardItem ui="hac-card-item mt-4">
+                <template #header>
+                    <div class="hac-card-title">任务统计</div>
+                </template>
+                <template #extra>
+                    <HcDropdown :cur="planTime" :datas="itemData"/>
+                </template>
+                <div class="hac-card-item-body">
+                    <el-row :gutter="14">
+                        <el-col :span="4">
+                            <div class="hac-row-total-item">
+                                <div class="num">96</div>
+                                <div class="text">累计任务总数</div>
+                            </div>
+                        </el-col>
+                        <el-col :span="4">
+                            <div class="hac-row-total-item">
+                                <div class="num">33</div>
+                                <div class="text">累计未完成任务</div>
+                            </div>
+                        </el-col>
+                        <el-col :span="4">
+                            <div class="hac-row-total-item">
+                                <div class="num">3</div>
+                                <div class="text">累计取消任务</div>
+                            </div>
+                        </el-col>
+                        <el-col :span="4">
+                            <div class="hac-row-total-item">
+                                <div class="num">6</div>
+                                <div class="text">累计延期任务</div>
+                            </div>
+                        </el-col>
+                        <el-col :span="4">
+                            <div class="hac-row-total-item">
+                                <div class="num">6</div>
+                                <div class="text">累计转移任务</div>
+                            </div>
+                        </el-col>
+                        <el-col :span="4">
+                            <div class="hac-row-total-item">
+                                <div class="num">1</div>
+                                <div class="text">累计未填写日志</div>
+                            </div>
+                        </el-col>
+                    </el-row>
+                </div>
+            </HcCardItem>
+
+            <HcCardItem ui="hac-card-item mt-4">
+                <template #header>
+                    <div class="hac-card-title">计划统计图</div>
+                </template>
+                <div class="hac-card-item-body">
+                    <div class="hc-row-echarts-box">
+                        <BarLabelRotation/>
+                    </div>
+                </div>
+            </HcCardItem>
         </div>
     </el-scrollbar>
 </template>
 
 <script setup>
-import {ref, watch} from "vue";
-import {useAppStore} from "~src/store";
+import {ref} from "vue";
+import BarLabelRotation from "~com/echarts/BarLabelRotation.vue";
 
-</script>
+const tableColumn = [
+    {key: 'name', name: '任务名称', align: 'left'},
+    {key: 'text', name: '关联项目', align: 'left'},
+    {key: 'time', name: '完成时间', align: 'left'}
+]
+const tableData = ref([
+    {name: '名称1', text: '奉建路', time: '2023-03-20'},
+    {name: '名称2', text: '奉建路', time: '2023-03-21'},
+    {name: '名称3', text: '奉建路', time: '2023-03-22'},
+    {name: '名称4', text: '奉建路', time: '2023-03-20'},
+    {name: '名称5', text: '奉建路', time: '2023-03-21'},
+    {name: '名称6', text: '奉建路', time: '2023-03-22'},
+    {name: '名称7', text: '奉建路', time: '2023-03-20'},
+    {name: '名称8', text: '奉建路', time: '2023-03-21'},
+    {name: '名称9', text: '奉建路', time: '2023-03-22'}
+])
 
-<style lang="scss" scoped>
-.hc-main-row {
-    position: relative;
-    width: 100%;
-    overflow: hidden;
+//选择日期时间
+const planTime = ref('2023年02月')
+const itemData = ref([{name: '2023年02月'}, {name: '2023年03月'}, {name: '2023年04月'}, {name: '2023年05月'}])
+const planTimeClick = (item) => {
+    planTime.value = item.name
 }
-.hc-card-item-sub {
-    position: relative;
-    display: flex;
-    align-items: center;
-    padding: 16px;
-    .item-sub-icon {
-        position: relative;
-        font-size: 50px;
-        margin-right: 18px;
-    }
-    .item-sub-content {
-        position: relative;
-        .num {
-            font-size: 22px;
-            font-weight: 500;
-        }
-        .title {
-            margin-top: 8px;
-            font-size: 14px;
-        }
-    }
-}
-</style>
 
-<style lang="scss">
+</script>
 
+<style lang="scss" scoped>
+@import "~src/styles/home/index.scss";
 </style>

yarn.lock

@@ -837,10 +837,10 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hc-vue3-ui@^1.0.2:
-  version "1.0.2"
-  resolved "http://47.110.251.215:9000/hc-vue3-ui/-/hc-vue3-ui-1.0.2.tgz#1ca0a884dc8b7c5c6e327a13740d262c5c9867c5"
-  integrity sha512-ZpT1zKSu5wEQkigFhud3e/ZJ8i97CvwmvBHKNeB/DO/ah/8osnSwW0SYA5PpWA00PNzunVKLViEczR1RaLY0nQ==
+hc-vue3-ui@^1.0.3:
+  version "1.0.3"
+  resolved "http://47.110.251.215:9000/hc-vue3-ui/-/hc-vue3-ui-1.0.3.tgz#94c2ccf38deccbdd5f141d0b2fa0ee9869b633f9"
+  integrity sha512-020AiXzoqQzN3GpHpda9jOrHinDX8obZ6Eh7BmKSJ1fTBn0rBhC1aDPHtQCN+nFxUmI6BKN+8xQLffbukhoSSg==
   dependencies:
     axios "^1.3.6"
     dayjs "^1.11.7"
@@ -1581,10 +1581,10 @@ util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   resolved "http://47.110.251.215:9000/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
-vite@^4.3.2:
-  version "4.3.4"
-  resolved "http://47.110.251.215:9000/vite/-/vite-4.3.4.tgz#1c518d763d5a700d890c3a19ab59220f06e7a7d5"
-  integrity sha512-f90aqGBoxSFxWph2b39ae2uHAxm5jFBBdnfueNxZAT1FTpM13ccFQExCaKbR2xFW5atowjleRniQ7onjJ22QEg==
+vite@^4.3.5:
+  version "4.3.5"
+  resolved "http://47.110.251.215:9000/vite/-/vite-4.3.5.tgz#3871fe0f4b582ea7f49a85386ac80e84826367d9"
+  integrity sha512-0gEnL9wiRFxgz40o/i/eTBwm+NEbpUeTWhzKrZDSdKm6nplj+z4lKz8ANDgildxHm47Vg8EUia0aicKbawUVVA==
   dependencies:
     esbuild "^0.17.5"
     postcss "^8.4.23"