添加页面

src/pages/dashboard/components/Editor.vue

@@ -1,23 +1,187 @@
-<script lang="ts" setup>
+<script>
-import SvgDashboard from "../images/dashboard.svg?component" // vite-svg-loader 插件的功能
+import SvgDashboard from "../images/dashboard.svg?component"; // vite-svg-loader 插件的功能
+import * as echarts from "echarts";
+export default {
+  name: "home",
+  mounted() {
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // // 初始化图表
+      const myChart1 = echarts.init(this.$refs.overviewChart);
+      const myChart2 = echarts.init(this.$refs.transportChart);
+      // // 设置配置选项
+      const option1 = {
+        title: {
+          text: "矿山生产趋势",
+          left: "center",
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["矿石产量", "选矿量", "运输量"],
+          bottom: 0,
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "15%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            name: "矿石产量",
+            type: "line",
+            data: [120, 132, 101, 134, 90, 230, 210],
+            smooth: true,
+            lineStyle: {
+              width: 3,
+            },
+          },
+          {
+            name: "选矿量",
+            type: "line",
+            data: [85, 93, 90, 93, 65, 83, 89],
+            smooth: true,
+            lineStyle: {
+              width: 3,
+            },
+          },
+          {
+            name: "运输量",
+            type: "line",
+            data: [110, 120, 105, 125, 95, 150, 135],
+            smooth: true,
+            lineStyle: {
+              width: 3,
+            },
+          },
+        ],
+      };
+      const option2 = {
+        title: {
+          text: "运输数据统计",
+          left: "center",
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+          bottom: 0,
+        },
+        series: [
+          {
+            name: "运输方式",
+            type: "pie",
+            radius: "50%",
+            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)",
+              },
+            },
+          },
+        ],
+      };
+      myChart1.setOption(option1);
+      myChart2.setOption(option2);
+    },
+  },
+};
 </script>
 
 <template>
-  <div class="app-container center">
+  <div class="home">
-    <SvgDashboard class="svg" />
+    <div class="card">1</div>
-    <p>欢迎来到智慧矿山数据管理平台</p>
+    <div class="card">2</div>
+    <div class="card">
+      <div class="card-header">
+        <div class="card-title">矿山生产总览</div>
+      </div>
+      <div class="chart-container" ref="overviewChart"></div>
+    </div>
+    <div class="card">
+      <div class="card-header">
+        <div class="card-title">运输数据统计</div>
+      </div>
+      <div class="chart-container" ref="transportChart"></div>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.center {
+* {
-  display: flex;
+  margin: 0;
-  flex-direction: column;
+  padding: 0;
-  justify-content: center;
+  box-sizing: border-box;
-  align-items: center;
+  font-family: "Microsoft YaHei", Arial, sans-serif;
-  .svg {
-    width: 600px;
-    max-width: 100%;
 }
+.home {
+  display: flex;
+  flex-wrap: wrap;
+}
+body {
+  background-color: #f5f7fa;
+  color: #333;
+  overflow-x: hidden;
+}
+
+.container {
+  display: flex;
+  min-height: 100vh;
+}
+/* 图表容器 */
+.chart-container {
+  height: 300px;
+  width: 100%;
+}
+
+/* 卡片样式 */
+.card {
+  width: 48%;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  padding: 20px;
+  margin: 20px 10px;
+  transition: all 0.3s;
+}
+
+.card:hover {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  justify-content: between;
+  align-items: center;
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.card-title {
+  font-size: 18px;
+  color: #1a237e;
+  font-weight: bold;
 }
 </style>

src/pages/demo/miningModule/drainageWorkshopDailyreport.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>111</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/pages/demo/miningModule/drainageWorkshopMonthlyreport.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>111</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/pages/demo/miningModule/miningWorkshopDailyreport.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>111</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/pages/demo/miningModule/miningWorkshopMonthlyreport.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>111</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/pages/demo/miningModule/motorVehicleWorkshopDailyreport.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>111</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/pages/demo/miningModule/motorVehicleWorkshopMonthlyreport.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>111</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/pages/demo/miningModule/roadMaintenanceTeamDailyreport.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>111</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/pages/demo/miningModule/roadMaintenanceTeamMonthlyreport.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>111</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/router/index.ts

@@ -63,6 +63,121 @@ export const constantRoutes: RouteRecordRaw[] = [
       },
     ],
   },
+  {
+    path: "/miningModule",
+    component: Layouts,
+    redirect: "/miningModule",
+    meta: {
+      title: "采矿模块",
+      icon: "icon-weixin",
+    },
+    children: [
+      {
+        path: "miningWorkshop",
+        component: Layouts,
+        name: "miningWorkshop",
+        meta: {
+          title: "采矿车间",
+        },
+        children: [
+          {
+            path: "miningWorkshopDailyreport",
+            component: () => import("@/pages/demo/miningModule/miningWorkshopDailyreport.vue"),
+            name: "miningWorkshopDailyreport",
+            meta: {
+              title: "日报",
+            },
+          },
+          {
+            path: "miningWorkshopMonthlyreport",
+            component: () => import("@/pages/demo/miningModule/miningWorkshopMonthlyreport.vue"),
+            name: "miningWorkshopMonthlyreport",
+            meta: {
+              title: "月报",
+            },
+          },
+        ]
+      },
+      {
+        path: "motorVehicleWorkshop",
+        component: Layouts,
+        name: "motorVehicleWorkshop",
+        meta: {
+          title: "电机车车间",
+        },
+        children: [
+          {
+            path: "motorVehicleWorkshopDailyreport",
+            component: () => import("@/pages/demo/miningModule/motorVehicleWorkshopDailyreport.vue"),
+            name: "motorVehicleWorkshopDailyreport",
+            meta: {
+              title: "日报",
+            },
+          },
+          {
+            path: "motorVehicleWorkshopMonthlyreport",
+            component: () => import("@/pages/demo/miningModule/motorVehicleWorkshopMonthlyreport.vue"),
+            name: "motorVehicleWorkshopMonthlyreport",
+            meta: {
+              title: "月报",
+            },
+          },
+        ]
+      },
+      {
+        path: "roadMaintenanceTeam",
+        component: Layouts,
+        name: "roadMaintenanceTeam",
+        meta: {
+          title: "养路队车间",
+        },
+        children: [
+          {
+            path: "roadMaintenanceTeamDailyreport",
+            component: () => import("@/pages/demo/miningModule/roadMaintenanceTeamDailyreport.vue"),
+            name: "roadMaintenanceTeamDailyreport",
+            meta: {
+              title: "日报",
+            },
+          },
+          {
+            path: "roadMaintenanceTeamMonthlyreport",
+            component: () => import("@/pages/demo/miningModule/roadMaintenanceTeamMonthlyreport.vue"),
+            name: "roadMaintenanceTeamMonthlyreport",
+            meta: {
+              title: "月报",
+            },
+          },
+        ]
+      },
+      {
+        path: "drainageWorkshop",
+        component: Layouts,
+        name: "drainageWorkshop",
+        meta: {
+          title: "排水车间",
+        },
+        children: [
+          {
+            path: "drainageWorkshopDailyreport",
+            component: () => import("@/pages/demo/miningModule/drainageWorkshopDailyreport.vue"),
+            name: "drainageWorkshopDailyreport",
+            meta: {
+              title: "日报",
+            },
+          },
+          {
+            path: "drainageWorkshopMonthlyreport",
+            component: () => import("@/pages/demo/miningModule/drainageWorkshopMonthlyreport.vue"),
+            name: "drainageWorkshopMonthlyreport",
+            meta: {
+              title: "月报",
+            },
+          },
+        ]
+      },
+    ],
+  },
   {
     path: "/diceke",
     component: Layouts,
@@ -93,7 +208,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         component: () => import("@/pages/demo/diceke/DicekeMiningrecord.vue"),
         name: "dicekeMiningrecord",
         meta: {
-          title: "Mo品味报表",
+          title: "Mo品位报表",
         },
       },
       {

tsconfig.json

@@ -15,7 +15,7 @@
     // baseUrl 用来告诉编译器到哪里去查找模块，使用非相对模块时必须配置此项
     "baseUrl": ".",
     "module": "esnext",
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     // 非相对模块导入的路径映射配置，根据 baseUrl 配置进行路径计算，与 vite.config 中 alias 配置同步
     "paths": {
       "@/*": ["src/*"],