This commit is contained in:
parent
6757788e4a
commit
6604680fa9
@ -1,23 +1,187 @@
|
||||
<script lang="ts" setup>
|
||||
import SvgDashboard from "../images/dashboard.svg?component" // vite-svg-loader 插件的功能
|
||||
<script>
|
||||
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">
|
||||
<SvgDashboard class="svg" />
|
||||
<p>欢迎来到智慧矿山数据管理平台</p>
|
||||
<div class="home">
|
||||
<div class="card">1</div>
|
||||
<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 {
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Microsoft YaHei", Arial, sans-serif;
|
||||
}
|
||||
.home {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
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;
|
||||
.svg {
|
||||
width: 600px;
|
||||
max-width: 100%;
|
||||
}
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
color: #1a237e;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
13
src/pages/demo/miningModule/drainageWorkshopDailyreport.vue
Normal file
13
src/pages/demo/miningModule/drainageWorkshopDailyreport.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>111</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>111</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
13
src/pages/demo/miningModule/miningWorkshopDailyreport.vue
Normal file
13
src/pages/demo/miningModule/miningWorkshopDailyreport.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>111</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
13
src/pages/demo/miningModule/miningWorkshopMonthlyreport.vue
Normal file
13
src/pages/demo/miningModule/miningWorkshopMonthlyreport.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>111</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>111</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>111</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>111</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>111</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -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品位报表",
|
||||
},
|
||||
},
|
||||
{
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
// baseUrl 用来告诉编译器到哪里去查找模块，使用非相对模块时必须配置此项
|
||||
"baseUrl": ".",
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"moduleResolution": "node",
|
||||
// 非相对模块导入的路径映射配置，根据 baseUrl 配置进行路径计算，与 vite.config 中 alias 配置同步
|
||||
"paths": {
|
||||
"@/*": ["src/*"],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user