diff --git a/god-ui/src/utils/bigscreenTool/index.js b/god-ui/src/utils/bigscreenTool/index.js
index 964108be..f4d3a83e 100644
--- a/god-ui/src/utils/bigscreenTool/index.js
+++ b/god-ui/src/utils/bigscreenTool/index.js
@@ -24,7 +24,7 @@ export const initChartStatic = (id = '', option = {}) => {
  * @param {object} Options 
  * @returns 
  */
-export const generateBaseOptions = (Options = {}) => {
+export const generateBaseOptions = (Options = {}, dark = true) => {
     return merge({
         title: {
             text: "",
@@ -33,7 +33,7 @@ export const generateBaseOptions = (Options = {}) => {
             },
         },
         textStyle: {
-            color: '#fff'
+            color: dark ? '#fff' : '#000'
         },
         color: [
             '#306fff',
@@ -91,7 +91,7 @@ export const generateBaseOptions = (Options = {}) => {
                 show: true,
                 lineStyle: {
                     type: 'dashed',
-                    color: 'rgba(255, 255, 255, 0.3)'
+                    color: dark ? '#ffffff66' : '#00000026'
                 }
             },
         },
@@ -119,7 +119,7 @@ export const generateBaseOptions = (Options = {}) => {
             itemHeight: 10, // 图例图形高度
             borderRadius: 10,
             textStyle: {
-                color: "#d7d8db",
+                color: dark ? '#d7d8db' : '#00000026',
                 fontSize: 9,
             },
             lineStyle: {
diff --git a/god-ui/src/views/pzhmyManage/home/assets/top1.png b/god-ui/src/views/pzhmyManage/home/assets/top1.png
new file mode 100644
index 00000000..d9f4178f
Binary files /dev/null and b/god-ui/src/views/pzhmyManage/home/assets/top1.png differ
diff --git a/god-ui/src/views/pzhmyManage/home/assets/top2.png b/god-ui/src/views/pzhmyManage/home/assets/top2.png
new file mode 100644
index 00000000..c1dd8120
Binary files /dev/null and b/god-ui/src/views/pzhmyManage/home/assets/top2.png differ
diff --git a/god-ui/src/views/pzhmyManage/home/assets/top3.png b/god-ui/src/views/pzhmyManage/home/assets/top3.png
new file mode 100644
index 00000000..39c4c58d
Binary files /dev/null and b/god-ui/src/views/pzhmyManage/home/assets/top3.png differ
diff --git a/god-ui/src/views/pzhmyManage/home/assets/top4.png b/god-ui/src/views/pzhmyManage/home/assets/top4.png
new file mode 100644
index 00000000..ae96d6c5
Binary files /dev/null and b/god-ui/src/views/pzhmyManage/home/assets/top4.png differ
diff --git a/god-ui/src/views/pzhmyManage/home/assets/top5.png b/god-ui/src/views/pzhmyManage/home/assets/top5.png
new file mode 100644
index 00000000..e261e0b5
Binary files /dev/null and b/god-ui/src/views/pzhmyManage/home/assets/top5.png differ
diff --git a/god-ui/src/views/pzhmyManage/home/index.vue b/god-ui/src/views/pzhmyManage/home/index.vue
new file mode 100644
index 00000000..5001c706
--- /dev/null
+++ b/god-ui/src/views/pzhmyManage/home/index.vue
@@ -0,0 +1,407 @@
+<template>
+    <div class="app-container main-outer-wrapper">
+        <div class="top-card-wrapper">
+            <div
+                class="top-card-item-extra basic-shadow"
+                v-for="(item, index) in topCardList"
+                :key="index"
+            >
+                <div :class="[
+                    'top-card-item-icon',
+                    'top-icon-' + (index + 1)
+                ]"></div>
+                <div class="top-card-item-inner">
+                    <div class="top-card-inner-title">
+                        {{ item.title }}
+                    </div>
+                    <div class="top-card-inner-value">
+                        {{ item.value }}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div
+            class="grid-main-wrapper"
+        >
+            <div class="grid-item-wrapper basic-shadow">
+                <div class="grid-item-title">设备资料查询</div>
+                <div class="grid-item-content" id="chart1"></div>
+            </div>
+            <div class="grid-item-wrapper basic-shadow" style="grid-column: span 2;">
+                <div class="grid-item-title">作业质量管理</div>
+                <div class="grid-item-content work-equ-wrapper">
+                    <div class="work-equ-item" style="background-color: #25252512;">
+                        <div class="num-wrapper">序号</div>
+                        <div class="device-wrapper">设备名</div>
+                        <div class="info-wrapper">SOP内容</div>
+                        <div class="time-wrapper">时间</div>
+                    </div>
+                    <div
+                        class="work-equ-item"
+                        v-for="(item, index) in workDataList"
+                        :key="index"
+                    >
+                        <div class="num-wrapper">{{ (index + 1) }}</div>
+                        <div class="device-wrapper">{{ item.device }}</div>
+                        <div class="info-wrapper">{{ item.info }}</div>
+                        <div class="time-wrapper">{{ item.time }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div
+            class="grid-main-wrapper"
+            style="grid-template-columns: 1fr 1fr;"
+        >
+            <div class="grid-item-wrapper basic-shadow">
+                <div class="grid-item-title">作业工时管理</div>
+                <div class="grid-item-content" id="chart2"></div>
+            </div>
+            <div class="grid-item-wrapper basic-shadow">
+                <div class="grid-item-title">当月培训统计</div>
+                <div class="grid-item-content" id="chart3"></div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import {
+    generatePieOptions,
+    generateBaseOptions,
+    initChartStatic
+} from '@/utils/bigscreenTool/index.js'
+
+export default {
+    data() {
+        const add0 = (val) => {
+            const numVal = parseInt(val)
+            return numVal < 10 ? ('0' + numVal) : numVal.toString()
+        }
+        const formatter = (offset = 0, date = new Date()) => {
+            const d = new Date(date.getTime() - offset)
+            return `${d.getFullYear()}/${add0(d.getMonth() + 1)}/${add0(d.getDate())} ${add0(d.getHours())}:${add0(d.getMinutes())}:${add0(d.getSeconds())}`
+        }
+        return {
+            topCardList: [
+                {
+                    title: '设备总数量',
+                    value: '286台'
+                },
+                {
+                    title: '在线设备',
+                    value: '251台'
+                },
+                {
+                    title: '工作中设备',
+                    value: '189台'
+                },
+                {
+                    title: '人员培训',
+                    value: '25次'
+                },
+                {
+                    title: 'SOP文件',
+                    value: '56个'
+                },
+            ],
+            workDataList: [
+                {
+                    device: '运皮带',
+                    info: '检查电机和减速箱，调整皮带张力，清理表面灰尘，检查输送带磨损情况',
+                    time: formatter(115454812)
+                },
+                {
+                    device: '采煤机',
+                    info: '检查液压系统，更换磨损零件，清洗设备表面灰尘',
+                    time: formatter(125454812)
+                },
+                {
+                    device: '水泵',
+                    info: '检查电机和水泵，检查密封圈和轴承，清理表面灰尘，检查泵的磨损情况',
+                    time: formatter(235454812)
+                },
+                {
+                    device: '掘进机',
+                    info: '检查液压系统，更换磨损零件，清理表面灰尘，检查切割头磨损情况',
+                    time: formatter(245454812)
+                },
+            ]
+        }
+    },
+    mounted() {
+        this.initChart1();
+        this.initChart2();
+        this.initChart3();
+    },
+    methods: {
+        initChart1() {
+            initChartStatic(
+                "chart1",
+                generateBaseOptions({
+                    title: {
+                        text: "",
+                    },
+                    xAxis: {
+                        data: ['投资部', '生产部', '后勤部', '运营部'],
+                    },
+                    legend: {
+                        top: "bottom",
+                        left: "center",
+                    },
+                    yAxis: {
+                        type: "value",
+                        max: 100
+                    },
+                    color: ["#609dd5", "#ec7d31"],
+                    series: [
+                        {
+                            data: [85, 98, 62, 54],
+                            type: "bar",
+                            barWidth: 25,
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true, //开启显示
+                                        position: "top", //在上方显示
+                                        textStyle: {
+                                            //数值样式
+                                            color: "#00000074",
+                                            fontSize: 13,
+                                        },
+                                    },
+                                },
+                            }
+                        },
+                    ],
+                    grid: {
+                        bottom: '17%',
+                        top: '11%',
+                    }
+                }, false),
+            );
+        },
+        initChart2() {
+            initChartStatic(
+                "chart2",
+                generateBaseOptions({
+                    title: {
+                        text: "",
+                    },
+                    legend: {
+                        x: "right", // 水平安放位置
+                        y: "top", // 垂直安放位置
+                        textStyle: {
+                            color: '#252525'
+                        },
+                    },
+                    xAxis: {
+                        data: ['采矿设备', '运输设备', '通风设备', '水利设备'],
+                        lineStyle: {
+                            color: '#000'
+                        }
+                    },
+                    yAxis: {
+                        type: "value",
+                        max: 20
+                    },
+                    color: ["#e3935d", "#7fcf52"],
+                    series: [
+                        {
+                            name: '实际工时',
+                            data: [12, 7.2, 8.5, 4.5],
+                            type: "bar",
+                            barWidth: 25,
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true, //开启显示
+                                        position: "top", //在上方显示
+                                        textStyle: {
+                                            //数值样式
+                                            color: "#00000074",
+                                            fontSize: 13,
+                                        },
+                                    },
+                                },
+                            }
+                        },
+                        {
+                            name: '标准工时',
+                            data: [15, 8, 10, 5],
+                            type: "line",
+                            smooth: true,
+                            itemStyle: {
+                                normal: {
+                                    label: {
+                                        show: true, //开启显示
+                                        position: "top", //在上方显示
+                                        textStyle: {
+                                            //数值样式
+                                            color: "#00000074",
+                                            fontSize: 13,
+                                        },
+                                    },
+                                },
+                            }
+                        },
+                    ],
+                    grid: {
+                        bottom: '15%',
+                        top: '11%',
+                    }
+                }, false)
+            );
+        },
+        initChart3() {
+            initChartStatic('chart3', generatePieOptions({
+                color: [
+                    '#61a5e8',
+                    '#7ecf51',
+                    '#eecb5f',
+                    '#e3935d',
+                    '#e16757',
+                    '#9c9071',
+                    '#3380a5'
+                ],
+                legend: {
+                    // 图例配置
+                    orient: "vertical",
+                    right: 50,
+                    itemGap: 10,
+                    top: 'center',
+                    textStyle: {
+                        color: '#252525'
+                    },
+                },
+                series: [
+                    {
+                        name: "数据详情",
+                        type: "pie",
+                        radius: ["36%", "60%"],
+                        center: ["37%", "50%"],
+                        data: [
+                            {
+                                name: '消防安全',
+                                value: 2
+                            },
+                            {
+                                name: '人员疏散',
+                                value: 3
+                            },
+                            {
+                                name: '自动化控制',
+                                value: 3
+                            },
+                            {
+                                name: '定位设备使用',
+                                value: 1
+                            },
+                        ],
+                        label: {
+                            formatter: "{c|{c}} , {per|{d}%}",
+                            rich: {
+                                c: {
+                                    color: "#252525",
+                                    fontSize: 12,
+                                    lineHeight: 33,
+                                },
+                                per: {
+                                    color: "#252525",
+                                    fontSize: 12,
+                                    lineHeight: 33,
+                                },
+                            },
+                        },
+                    }
+                ]
+            }))
+        },
+    }
+}
+</script>
+<style scoped lang="scss">
+@import url(../../../styles/mainPage.scss);
+.basic-shadow {
+    border-radius: 8px;
+    box-shadow: 2px 2px 2px #25252525, -2px -2px 2px #14141414;
+}
+.top-card-wrapper {
+    grid-template-columns: repeat(5, 1fr) !important;
+    gap: 16px !important;
+    .top-card-item-extra {
+        display: flex;
+        justify-content: space-evenly;
+        background-color: white;
+        padding: 1rem 0;
+        
+        .top-card-item-icon {
+            width: 3rem;
+            height: 3rem;
+            background-size: 100% 100%;
+        }
+        .top-card-item-inner {
+            width: 6rem;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            .top-card-inner-title {
+                font-size: .9rem;
+            }
+            .top-card-inner-value {
+                font-size: 1.2rem;
+                font-family: 'TitleFont';
+            }
+        }
+    }
+}
+
+.grid-main-wrapper {
+    margin-top: 16px;
+    gap: 16px !important;
+    .grid-item-title {
+        font-family: 'TitleFont';
+        font-weight: 500 !important;
+        color: #25252525;
+    }
+}
+
+.work-equ-wrapper {
+    padding: 10px;
+    .work-equ-item {
+        display: flex;
+        align-items:flex-start;
+        justify-content: center;
+        border-bottom: 1px solid #25252525;
+        padding: .6rem 0;
+        .num-wrapper {
+            width: 2rem;
+            font-family: 'TitleFont';
+            text-align: center;
+        }
+        .device-wrapper {
+            width: 5rem;
+            text-align: center;
+        }
+        .info-wrapper {
+            width: calc(100% - 19rem);
+            padding: .5rem;
+            padding: 0 !important;
+        }
+        .time-wrapper {
+            width: 12rem;
+            text-align: center;
+        }
+    }
+}
+
+#chart1, #chart2, #chart3 {
+    height: 250px;
+}
+
+@for $i from 1 through 5 {
+    .top-icon-#{$i} {
+        background-image: url(./assets/top#{$i}.png);
+    }
+}
+</style>
\ No newline at end of file