门户，领导权限

src/components/echarts/BorderRadius.vue

@@ -0,0 +1,140 @@
+<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 {useAppStore} from "~src/store";
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+const props = defineProps({
+    ratio: {
+        type: [Number,String],
+        default: 0
+    }
+})
+
+//初始变量
+let chart = null;
+const echart = ref(null)
+const useAppState = useAppStore()
+const AppColor = ref(useAppState.getColor);
+
+watch(() => [
+    props.ratio
+], ([ratio]) => {
+    setOptions(ratio, 100 - ratio)
+})
+
+//初始化图表
+const initChart = () => {
+    chart = echarts.init(echart.value)
+    setOptions(props.ratio, 100 - props.ratio)
+}
+
+//监听浏览器窗口变化
+const windowResize = () => {
+    window.addEventListener("resize", resizeEvent);
+}
+
+const resizeEvent = () => {
+    window.requestAnimationFrame(() => {
+        chart.resize();
+    })
+}
+
+//设置图表
+const setOptions = (val1,val2) => {
+    nextTick(() => {
+        chart.setOption({
+            tooltip: {
+                trigger: "item",
+                formatter: "{d}%"
+            },
+            legend: {
+                type: 'scroll',
+                orient: 'vertical',
+                left: '-7',
+            },
+            series: [
+                {
+                    name: 'Access From',
+                    type: 'pie',
+                    radius: ['80%', '50%'],
+                    center: ["76%", "50%"],
+                    avoidLabelOverlap: false,
+                    itemStyle: {
+                        borderRadius: 4,
+                        borderColor: '#fff',
+                        borderWidth: 1
+                    },
+                    label: {
+                        show: false,
+                        position: 'center'
+                    },
+                    emphasis: {
+                        label: {
+                            show: true,
+                        }
+                    },
+                    labelLine: {
+                        show: false
+                    },
+                    data: [
+                        { value: 1048, name: '奉建路' },
+                        { value: 735, name: '西环线' },
+                        { value: 580, name: '陈油路' },
+                        { value: 484, name: '宝北路' }
+                    ]
+                }
+            ],
+        })
+    })
+}
+
+//渲染完成
+onMounted(() => {
+    nextTick(() => {
+        initChart()
+        windowResize()
+    })
+})
+
+//被卸载
+onUnmounted(() => {
+    window.removeEventListener("resize",resizeEvent);
+    chart.dispose()
+    chart = null
+})
+
+
+const onResize = () => {
+    nextTick(() => {
+        chart.resize();
+    })
+}
+
+// 暴露出去
+defineExpose({
+    onResize
+})
+</script>
+
+<style lang="scss" scoped>
+.hac-echarts-box {
+    display: block;
+    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/echarts/SimpleChart.vue

@@ -0,0 +1,136 @@
+<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 {useAppStore} from "~src/store";
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+const props = defineProps({
+    ratio: {
+        type: [Number,String],
+        default: 0
+    }
+})
+
+//初始变量
+let chart = null;
+const echart = ref(null)
+const useAppState = useAppStore()
+const AppColor = ref(useAppState.getColor);
+
+watch(() => [
+    props.ratio
+], ([ratio]) => {
+    setOptions(ratio, 100 - ratio)
+})
+
+//初始化图表
+const initChart = () => {
+    chart = echarts.init(echart.value)
+    setOptions(props.ratio, 100 - props.ratio)
+}
+
+//监听浏览器窗口变化
+const windowResize = () => {
+    window.addEventListener("resize", resizeEvent);
+}
+
+const resizeEvent = () => {
+    window.requestAnimationFrame(() => {
+        chart.resize();
+    })
+}
+
+//设置图表
+const setOptions = (val1,val2) => {
+    nextTick(() => {
+        chart.setOption({
+            tooltip: {
+                trigger: "item",
+                formatter: "{d}%"
+            },
+            legend: {
+                type: 'scroll',
+                orient: 'vertical',
+                left: '-7',
+            },
+            series: [
+                {
+                    name: 'Access From',
+                    type: 'pie',
+                    radius: '80%',
+                    center: ["76%", "50%"],
+                    label: {
+                        show: false,
+                        position: "center",
+                    },
+                    labelLine: {
+                        show: false,
+                    },
+                    data: [
+                        { value: 1048, name: '奉建路' },
+                        { value: 735, name: '西环线' },
+                        { value: 580, name: '陈油路' },
+                        { value: 484, name: '宝北路' }
+                    ],
+                    emphasis: {
+                        itemStyle: {
+                            shadowBlur: 10,
+                            shadowOffsetX: 0,
+                            shadowColor: 'rgba(0, 0, 0, 0.5)'
+                        }
+                    }
+                }
+            ]
+        })
+    })
+}
+
+//渲染完成
+onMounted(() => {
+    nextTick(() => {
+        initChart()
+        windowResize()
+    })
+})
+
+//被卸载
+onUnmounted(() => {
+    window.removeEventListener("resize",resizeEvent);
+    chart.dispose()
+    chart = null
+})
+
+
+const onResize = () => {
+    nextTick(() => {
+        chart.resize();
+    })
+}
+
+// 暴露出去
+defineExpose({
+    onResize
+})
+</script>
+
+<style lang="scss" scoped>
+.hac-echarts-box {
+    display: block;
+    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/views/home/admin.vue

@@ -168,7 +168,11 @@
                                 </div>
                             </template>
                             <div class="hac-card-item-body" style="height: 160px">
-                                1123
+                                <HcTable ui="no-border" :isIndex="false" :column="tableColumn1" :datas="tableData1">
+                                    <template #action="{row,index}">
+                                        <el-button plain size="small" type="primary">查看</el-button>
+                                    </template>
+                                </HcTable>
                             </div>
                         </HcCardItem>
                     </div>
@@ -183,7 +187,7 @@
                                         <HcDropdown :cur="planTime" :datas="itemData"/>
                                     </template>
                                     <div class="hac-card-item-body" style="height: 160px">
-                                        1123
+                                        <BorderRadius/>
                                     </div>
                                 </HcCardItem>
                             </el-col>
@@ -196,7 +200,7 @@
                                         <HcDropdown :cur="planTime" :datas="itemData"/>
                                     </template>
                                     <div class="hac-card-item-body" style="height: 160px">
-                                        1123
+                                        <SimpleChart/>
                                     </div>
                                 </HcCardItem>
                             </el-col>
@@ -230,6 +234,8 @@ 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";
+import BorderRadius from "~com/echarts/BorderRadius.vue";
+import SimpleChart from "~com/echarts/SimpleChart.vue";
 
 //选择日期时间
 const planTime = ref('汇总所有')
@@ -252,6 +258,21 @@ const tableData = ref([
     {name: '名称8', put1: '26%', put2: '26%', put3: '26%'},
 ])
 
+const tableColumn1 = [
+    {key: 'name', name: '项目名称'},
+    {key: 'section', name: '风险部门', align: 'center'},
+    {key: 'time', name: '原计划完成时间', align: 'center'},
+    {key: 'delay', name: '延期计划条数', align: 'center'},
+    {key: 'action', name: '操作', align: 'center'},
+]
+const tableData1 = ref([
+    {name: '名称1', section: '研发部', time: '2023-04-28', delay: '26'},
+    {name: '名称2', section: '研发部', time: '2023-04-28', delay: '26'},
+    {name: '名称3', section: '业务部', time: '2023-04-28', delay: '26'},
+    {name: '名称4', section: '业务部', time: '2023-04-28', delay: '26'},
+    {name: '名称5', section: '业务部', time: '2023-04-28', delay: '26'},
+])
+
 const value = ref('')
 const options = [
     {