新增

src/assets/json/carService.json

@@ -0,0 +1,192 @@
+[
+    {
+        "dataName": "repairInfo",
+        "buttons": [{
+            "type": "primary",
+            "text": "管理",
+            "func": "updateObj"
+        }, {
+            "type": "danger",
+            "text": "删除",
+            "func": "deleteObj"
+        }],
+        "columns": [{
+            "placeholder": "请选择维修日期",
+            "type": "date",
+            "label": "日期",
+            "prop": "wsdate",
+            "visible": true,
+            "isTemplate": false
+        }, {
+            "placeholder": "请输入维修内容",
+            "type": "input",
+            "label": "维修内容",
+            "prop": "content",
+            "visible": true,
+            "isTemplate": false
+        }, {
+            "placeholder": "请输入金额",
+            "type": "input",
+            "label": "金额",
+            "prop": "cash",
+            "visible": true,
+            "isTemplate": false
+        }]
+    },
+    {
+        "dataName": "repairInfo",
+        "buttons": [{
+            "type": "primary",
+            "text": "管理",
+            "func": "updateObj"
+        }, {
+            "type": "danger",
+            "text": "删除",
+            "func": "deleteObj"
+        }],
+        "columns": [{
+            "placeholder": "请选择维修日期",
+            "type": "date",
+            "label": "日期",
+            "prop": "wsdate",
+            "visible": true,
+            "isTemplate": false
+        }, {
+            "placeholder": "请输入维修内容",
+            "type": "input",
+            "label": "维修内容",
+            "prop": "content",
+            "visible": true,
+            "isTemplate": false
+        }, {
+            "placeholder": "请输入金额",
+            "type": "input",
+            "label": "金额",
+            "prop": "cash",
+            "visible": true,
+            "isTemplate": false
+        }]
+    },
+    {
+        "dataName": "oilInfo",
+        "buttons": [{
+            "type": "primary",
+            "text": "管理",
+            "func": "updateObj"
+        }, {
+            "type": "danger",
+            "text": "删除",
+            "func": "deleteObj"
+        }],
+        "columns": [{
+            "placeholder": "请选择维修日期",
+            "type": "date",
+            "label": "日期",
+            "prop": "wsdate",
+            "visible": true,
+            "isTemplate": false
+        }, {
+            "placeholder": "请输入维修类型",
+            "type": "input",
+            "label": "维修类型",
+            "prop": "content",
+            "visible": true,
+            "isTemplate": false
+        }, {
+            "placeholder": "请输入金额",
+            "type": "input",
+            "label": "金额",
+            "prop": "cash",
+            "visible": true,
+            "isTemplate": false
+        },{
+            "placeholder": "请输入里程",
+            "type": "input",
+            "label": "里程",
+            "prop": "licheng",
+            "visible": true,
+            "isTemplate": false
+        },{
+            "placeholder": "请输入维修地址",
+            "type": "input",
+            "label": "里程",
+            "prop": "wsAddr",
+            "visible": true,
+            "isTemplate": false
+        },{
+            "placeholder": "请输入维修项目",
+            "type": "input",
+            "label": "维修项目",
+            "prop": "wsInfo",
+            "visible": true,
+            "isTemplate": false
+        }]
+    },
+    {
+        "dataName": "repairInfo",
+        "buttons": [{
+            "type": "primary",
+            "text": "管理",
+            "func": "updateObj"
+        }, {
+            "type": "danger",
+            "text": "删除",
+            "func": "deleteObj"
+        }],
+        "columns": [{
+            "placeholder": "请选择维修日期",
+            "type": "date",
+            "label": "日期",
+            "prop": "wsdate",
+            "visible": true,
+            "isTemplate": false,
+            "itemSpan":12,
+            "unit":""
+        }, {
+            "placeholder": "请输入维修类型",
+            "type": "input",
+            "label": "维修类型",
+            "prop": "content",
+            "visible": true,
+            "isTemplate": false,
+            "itemSpan":12,
+            "unit":""
+        }, {
+            "placeholder": "请输入金额",
+            "type": "input",
+            "label": "金额",
+            "prop": "cash",
+            "visible": true,
+            "isTemplate": false,
+            "itemSpan":12,
+            "unit":"元"
+        },{
+            "placeholder": "请输入里程",
+            "type": "input",
+            "label": "里程",
+            "prop": "licheng",
+            "visible": true,
+            "isTemplate": false,
+            "itemSpan":12,
+            "unit":"km"
+        },{
+            "placeholder": "请输入维修地址",
+            "type": "input",
+            "label": "维修地址",
+            "prop": "wsAddr",
+            "visible": true,
+            "isTemplate": false,
+            "itemSpan":24,
+            "unit":""
+        },{
+            "placeholder": "请输入维修项目",
+            "type": "input",
+            "label": "维修项目",
+            "prop": "wsInfo",
+            "visible": true,
+            "isTemplate": false,
+            "itemSpan":24,
+            "unit":""
+        }]
+    }
+]

src/components/HomeStatics/countPage.vue

@@ -0,0 +1,108 @@
+<template>
+    <div class="countPageClass" style="padding-left: 1vw;padding-top: 1vh;">
+        <div class="title">今日统计</div>
+        <div style="padding-left: 1vw;">
+            <div class="bgClass">
+                <img class="imgClass" src="@/assets/images/home/路径 9@2x.png" />
+                <div class="bgTitle">客流数</div>
+                <div class="countClass">1784</div>
+                <div class="unitClass">人</div>
+            </div>
+            <div class="bgClass1">
+                <img class="imgClass" src="@/assets/images/home/路径 6@2x.png" />
+                <div class="bgTitle">货流数</div>
+                <div class="countClass">5718</div>
+                <div class="unitClass">件</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup name="CarInfo" lang="ts">
+
+
+onMounted(() => {
+    // getList();
+});
+</script>
+<style scoped lang="scss">
+.countPageClass {
+    width: 24vw;
+    height: 28vh;
+    background: rgba(12, 22, 38, 0.85);
+    border-radius: 8px 8px 8px 8px;
+
+    .title {
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: bold;
+        font-size: 20px;
+        color: #FFFFFF;
+        line-height: 24px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+
+    .imgClass {
+        width: 1.5vw;
+        height: 1.5vw;
+    }
+}
+
+.bgClass1 {
+    background: url("@/assets/images/home/Bg.png") no-repeat;
+    background-size: 100% 100%;
+    width: 20vw;
+    height: 10vh;
+    margin-top: 1vh;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.bgClass {
+    background: url("@/assets/images/home/Bg(1).png") no-repeat;
+    background-size: 100% 100%;
+    width: 20vw;
+    height: 10vh;
+    margin-top: 1vh;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.bgTitle {
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    font-size: 18px;
+    color: #FFFFFF;
+    line-height: 24px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+}
+
+.countClass {
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: bold;
+    font-size: 38px;
+    color: #FFFFFF;
+    line-height: 17px;
+    text-align: right;
+    font-style: normal;
+    text-transform: none;
+}
+
+.unitClass {
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    font-size: 14px;
+    color: #FFFFFF;
+    line-height: 17px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+}
+</style>

src/components/HomeStatics/lineEcharts.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="lineEchartsClass" style="padding-left: 1vw;padding-top: 1vh;">
+    <div class="title">七日趋势</div>
+    <div ref="linechart" style="width:100%;height: 90%;"></div>
+  </div>
+</template>
+<script setup name="Index" lang="ts">
+import * as echarts from 'echarts';
+
+const linechart = ref();
+
+const drawEchart = () => {
+  let echartsObj = echarts.init(linechart.value, "macarons");
+  var dateArray = getRecentDays();
+  var option = {
+    legend: {
+      top: '2%',
+      left: 'center',
+      textStyle: {
+        color: '#C1D2E4'
+        // ...
+      }
+    },
+    color: ['#3a9ede', '#2ACB97'],
+    grid: {
+      top: "15%",
+      left: "3%",
+      right: "8%",
+      bottom: "1%",
+      containLabel: true,
+    },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data: dateArray,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#353b5a",
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        // rotate: 60,
+        textStyle: {
+          color: "#C1D2E4"
+        },
+      },
+    },
+    yAxis: {
+      show:false,
+      type: "value",
+      nameTextStyle: {
+        color: "#fff",
+        padding: [0, 0, 0, -35],
+      },
+      name: "数量",
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#48A7EF",
+        },
+      },
+      axisLabel: {
+        textStyle: {
+          color: "#fff",
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        lineStyle: {
+          color: "#353b5a",
+        },
+      },
+    },
+    series: [
+      {
+        name: "客流趋势",
+        type: "line",
+        data: [10, 20, 30, 40, 50, 40, 60],
+        smooth: false,
+        symbol: 'circle',
+        itemStyle: {
+          normal: {
+            color: "#ffffff",
+            borderColor: '#3a9ede',
+            borderWidth: 1,
+          }
+        },
+        lineStyle: {
+          color: "#3a9ede",
+          width: 2,
+        },
+        areaStyle: {
+          color: {
+            x: 0,
+            y: 1,
+            x2: 0,
+            y2: 0,
+            colorStops: [
+              {
+                offset: 0,
+                color: "rgba(72, 167, 239, 0.1)", // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: "rgba(72, 167, 239, 0.7)", // 100% 处的颜色
+              },
+            ],
+          },
+        },
+      },
+      {
+        name: "货流趋势",
+        type: "line",
+        data: [30, 10, 40, 20, 40, 30, 70],
+        smooth: false,
+        symbol: 'circle',
+        itemStyle: {
+          normal: {
+            color: "#ffffff",
+            borderColor: '#2ACB97',
+            borderWidth: 1,
+          }
+        },
+        lineStyle: {
+          color: "#2ACB97",
+          width: 2,
+        },
+        areaStyle: {
+          color: {
+            x: 0,
+            y: 1,
+            x2: 0,
+            y2: 0,
+            colorStops: [
+              {
+                offset: 0,
+                color: "rgba(42, 203, 151, 0.1)", // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: "rgba(42, 203, 151, 0.7)", // 100% 处的颜色
+              },
+            ],
+          },
+        },
+      },
+    ],
+  }
+  echartsObj.setOption(option);
+}
+
+const getRecentDays = () => {
+  const oneDay = 24 * 60 * 60 * 1000; // 这里定义一天的毫秒数
+  const resultArray = [];
+  for (let i = 6; i >= 0; i--) {
+    const currentDate = new Date(Date.now() - i * oneDay); // 计算出每天的日期
+    const year = currentDate.getFullYear();
+    const month = String(currentDate.getMonth() + 1).padStart(2, "0"); // 月份需要补零
+    const day = String(currentDate.getDate()).padStart(2, "0"); // 日期也需要补零
+    const formattedDate = `${month}-${day}`; // 格式化日期为 yyyy-mm-dd 的形式
+    resultArray.push(formattedDate);
+  }
+  return resultArray;
+}
+
+
+onMounted(() => {
+  drawEchart();
+})
+</script>
+<style>
+.lineEchartsClass {
+  width: 24vw;
+  height: 28vh;
+  background: rgba(12, 22, 38, 0.85);
+  border-radius: 8px 8px 8px 8px;
+
+  .title {
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: bold;
+    font-size: 20px;
+    color: #FFFFFF;
+    line-height: 24px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+  }
+}
+</style>

src/components/HomeStatics/messageTable.vue

@@ -0,0 +1,115 @@
+<template>
+    <div class="countPageClass" style="padding-left: 1vw;padding-top: 1vh;">
+        <div class="title">到站提醒</div>
+        <div style="margin-top: 10px;overflow-y: scroll;">
+            <div v-for="(item, index) in messageList">
+                <div style="display: flex;flex-direction: row;justify-content: space-around;">
+                    <div :class="item.type == 1 ? 'carClass' : 'goodClass'">{{ item.carNum }}</div>
+                    <div class="contentClass">{{ item.content }}</div>
+                    <div class="stationClass">{{ item.station }}</div>
+                    <div class="timeClass">{{ item.time }}</div>
+                </div>
+                <el-divider />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup name="CarInfo" lang="ts">
+
+const messageList = ref([{ carNum: '闽JY3013', content: '即将到达', station: '铁湖站', time: '5/10 17:26', type: 1 },
+{ carNum: '闽JY3013', content: '即将到达', station: '铁湖站', time: '5/10 17:26', type: 2 },
+{ carNum: '闽JY3013', content: '即将到达', station: '铁湖站', time: '5/10 17:26', type: 1 },
+{ carNum: '闽JY3013', content: '即将到达', station: '铁湖站', time: '5/10 17:26', type: 1 }
+]);
+
+onMounted(() => {
+    // getList();
+});
+</script>
+<style scoped lang="scss">
+.countPageClass {
+    width: 24vw;
+    height: 28vh;
+    background: rgba(12, 22, 38, 0.85);
+    border-radius: 8px 8px 8px 8px;
+
+    .title {
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: bold;
+        font-size: 20px;
+        color: #FFFFFF;
+        line-height: 24px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+}
+
+.contentClass {
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    font-size: 14px;
+    color: #C1D2E4;
+    line-height: 24px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+}
+
+.stationClass {
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: bold;
+    font-size: 14px;
+    color: #C1D2E4;
+    line-height: 24px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+}
+
+.timeClass {
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    font-size: 14px;
+    color: #C1D2E4;
+    line-height: 24px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+}
+
+.el-divider--horizontal {
+    margin-top: 10px;
+}
+
+.carClass {
+    background: url("@/assets/images/home/Bg(2).png") no-repeat;
+    background-size: 100% 100%;
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    font-size: 14px;
+    color: #FFFFFF;
+    line-height: 20px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    width: 5vw;
+    text-align: center;
+}
+
+.goodClass {
+    background: url("@/assets/images/home/Bg(3).png") no-repeat;
+    background-size: 100% 100%;
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    font-size: 14px;
+    color: #6A4119;
+    line-height: 20px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    width: 5vw;
+    text-align: center;
+}
+</style>

src/components/HomeStatics/pieEcharts.vue

@@ -0,0 +1,121 @@
+<template>
+    <div class="lineEchartsClass" style="padding-left: 1vw;padding-top: 1vh;">
+        <div class="title">车辆统计</div>
+        <div ref="piechart" style="width:100%;height: 90%;"></div>
+    </div>
+</template>
+<script setup name="Index" lang="ts">
+import * as echarts from 'echarts';
+
+const piechart = ref();
+
+const drawEchart = () => {
+    let echartsObj = echarts.init(piechart.value, "macarons");
+    var dateArray = getRecentDays();
+    var option = {
+        series: [
+            {
+                name: 'Nightingale Chart',
+                type: 'pie',
+                radius: '55%',
+                center: ['50%', '50%'],
+                roseType: 'radius',
+                data: [
+                    {
+                        value: 40, name: 'rose 1', itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(
+                                    0, 1, 0, 0,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
+                                    [
+                                        { offset: 1, color: '#B558F6' },
+                                        { offset: 0, color: '#DB91FB' }
+                                    ]
+                                ),
+                            }
+                        }
+                    },
+
+                    {
+                        value: 38, name: 'rose 2', itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(
+                                    0, 1, 0, 0,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
+                                    [
+                                        { offset: 1, color: '#FFE400 ' },
+                                        { offset: 0, color: '#FEC400' }
+                                    ]
+                                ),
+                            }
+                        }
+                    },
+                    {
+                        value: 32, name: 'rose 3', itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(
+                                    0, 1, 0, 0,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
+                                    [
+                                        { offset: 1, color: '#53E7C8' },
+                                        { offset: 0, color: '#29CB97 ' }
+                                    ]
+                                ),
+                            }
+                        }
+                    },
+                    {
+                        value: 30, name: 'rose 4', itemStyle: {
+                            normal: {
+                                color: new echarts.graphic.LinearGradient(
+                                    0, 1, 0, 0,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
+                                    [
+                                        { offset: 1, color: '#FB9199 ' },
+                                        { offset: 0, color: '#F65860 ' }
+                                    ]
+                                ),
+                            }
+                        }
+                    }
+                ]
+            }
+        ]
+    };
+    echartsObj.setOption(option);
+}
+
+const getRecentDays = () => {
+    const oneDay = 24 * 60 * 60 * 1000; // 这里定义一天的毫秒数
+    const resultArray = [];
+    for (let i = 6; i >= 0; i--) {
+        const currentDate = new Date(Date.now() - i * oneDay); // 计算出每天的日期
+        const year = currentDate.getFullYear();
+        const month = String(currentDate.getMonth() + 1).padStart(2, "0"); // 月份需要补零
+        const day = String(currentDate.getDate()).padStart(2, "0"); // 日期也需要补零
+        const formattedDate = `${month}-${day}`; // 格式化日期为 yyyy-mm-dd 的形式
+        resultArray.push(formattedDate);
+    }
+    return resultArray;
+}
+
+
+onMounted(() => {
+    drawEchart();
+})
+</script>
+<style>
+.lineEchartsClass {
+    width: 24vw;
+    height: 28vh;
+    background: rgba(12, 22, 38, 0.85);
+    border-radius: 8px 8px 8px 8px;
+
+    .title {
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: bold;
+        font-size: 20px;
+        color: #FFFFFF;
+        line-height: 24px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+}
+</style>

src/components/HomeStatics/stationPie.vue

@@ -0,0 +1,158 @@
+<template>
+    <div class="lineEchartsClass" style="padding-left: 1vw;padding-top: 1vh;">
+        <div class="title">电子站台统计</div>
+        <div style="display: flex;flex-direction: row;margin-top: 1vh;">
+            <div ref="stationchart" style="width:11vw;height: 20vh;"></div>
+            <div style="width:12vw;padding-right: 1vw;margin-left: 1vw;">
+                <div style="display: flex;flex-direction: row;justify-content: space-around;align-items: start;">
+                    <div class="stationkeyClass">设备总数</div>
+                    <div class="stationvalueClass">1568</div>
+                    <div class="stationunitClass">台</div>
+                </div>
+                <img class="imageDiv" src="@/assets/images/home/Bg(4).png"/>
+                <div style="display: flex;flex-direction: row;justify-content: space-around;align-items: start;margin-top: 1vh;">
+                    <div class="stationkeyClass">在线设备</div>
+                    <div class="stationvalueClass">1568</div>
+                    <div class="stationunitClass">台</div>
+                </div>
+                <img class="imageDiv" src="@/assets/images/home/Bg(7).png"/>
+                <div style="display: flex;flex-direction: row;justify-content: space-around;align-items: start;margin-top: 1vh;">
+                    <div class="stationkeyClass">箱体总数</div>
+                    <div class="stationvalueClass">1568</div>
+                    <div class="stationunitClass">台</div>
+                </div>
+                <img class="imageDiv" src="@/assets/images/home/Bg(5).png"/>
+                <div style="display: flex;flex-direction: row;justify-content: space-around;align-items: start;margin-top: 1vh;">
+                    <div class="stationkeyClass">空闲箱体</div>
+                    <div class="stationvalueClass">1568</div>
+                    <div class="stationunitClass">台</div>
+                </div>
+                <img class="imageDiv" src="@/assets/images/home/Bg(6).png"/>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup name="Index" lang="ts">
+import * as echarts from 'echarts';
+
+const stationchart = ref();
+
+const drawEchart = () => {
+    let echartsObj = echarts.init(stationchart.value, "macarons");
+    var dateArray = getRecentDays();
+    var option = {
+        color:['#707070','#26EB96'],
+        title: {
+            // 图形标题(如果想要换行则使用ES6 `` 模板字符串)
+            // 例如： `示例
+            //   这里的文字会变为第二行(因为会保留格式)
+            text: '75%',
+            subtext: "在线率",
+            left: "center",//对齐方式居中
+            top: "40%",//距离顶部
+            textStyle: {//文字配置
+                color: "rgb(50,197,233)",//文字颜色
+                fontSize: 15,//字号
+                align: "center"//对齐方式
+            }
+        },
+        series: [
+            {
+                name: 'Access From',
+                type: 'pie',
+                radius: ['80%', '100%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                labelLine: {
+                    show: false
+                },
+                data: [
+                    { value: 25, name: 'Search Engine' },
+                    { value: 75, name: 'Direct' },
+                ]
+            }
+        ]
+    };
+    echartsObj.setOption(option);
+}
+
+const getRecentDays = () => {
+    const oneDay = 24 * 60 * 60 * 1000; // 这里定义一天的毫秒数
+    const resultArray = [];
+    for (let i = 6; i >= 0; i--) {
+        const currentDate = new Date(Date.now() - i * oneDay); // 计算出每天的日期
+        const year = currentDate.getFullYear();
+        const month = String(currentDate.getMonth() + 1).padStart(2, "0"); // 月份需要补零
+        const day = String(currentDate.getDate()).padStart(2, "0"); // 日期也需要补零
+        const formattedDate = `${month}-${day}`; // 格式化日期为 yyyy-mm-dd 的形式
+        resultArray.push(formattedDate);
+    }
+    return resultArray;
+}
+
+
+onMounted(() => {
+    drawEchart();
+})
+</script>
+<style lang="scss">
+.lineEchartsClass {
+    width: 24vw;
+    height: 28vh;
+    background: rgba(12, 22, 38, 0.85);
+    border-radius: 8px 8px 8px 8px;
+
+    .title {
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: bold;
+        font-size: 20px;
+        color: #FFFFFF;
+        line-height: 24px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+
+}
+
+.stationkeyClass {
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    font-size: 14px;
+    color: #C1D2E4;
+    line-height: 15px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+}
+
+.stationvalueClass {
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: bold;
+    font-size: 24px;
+    color: #FFFFFF;
+    line-height: 11px;
+    text-align: right;
+    font-style: normal;
+    text-transform: none;
+}
+
+.stationunitClass {
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    font-size: 12px;
+    color: #C1D2E4;
+    line-height: 11px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+}
+
+.imageDiv{
+    width: 11vw;
+    margin-top: 1vh;
+}
+</style>

src/components/HomeStatics/warnTable.vue

@@ -0,0 +1,117 @@
+<template>
+    <div class="countPageClass" style="padding-left: 1vw;padding-top: 1vh;">
+        <div class="title">到站提醒</div>
+        <div style="margin-top: 10px;overflow-y: scroll;">
+            <div v-for="(item, index) in messageList">
+                <div style="display: flex;flex-direction: row;justify-content: space-around;align-items: center;">
+                    <div>
+                        <img v-if="item.type == 1" src="@/assets/images/home/Rectangle 8.png" />
+                        <img v-if="item.type == 2" src="@/assets/images/home/Rectangle 8(1).png" />
+                    </div>
+                    <div class="contentClass">{{ item.content }}</div>
+                    <div class="timeClass">{{ item.time }}</div>
+                </div>
+                <el-divider />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup name="CarInfo" lang="ts">
+
+const messageList = ref([{ carNum: '闽JY3013', content: '闽J-Y3013车辆未到站报警,请及时处理。', station: '铁湖站', time: '5/10 17:26', type: 1 },
+{ carNum: '闽JY3013', content: '闽J-Y3013车辆未到站报警,请及时处理。', station: '铁湖站', time: '5/10 17:26', type: 2 },
+{ carNum: '闽JY3013', content: '闽J-Y3013车辆未到站报警,请及时处理。', station: '铁湖站', time: '5/10 17:26', type: 1 },
+{ carNum: '闽JY3013', content: '闽J-Y3013车辆未到站报警,请及时处理。', station: '铁湖站', time: '5/10 17:26', type: 1 }
+]);
+
+onMounted(() => {
+    // getList();
+});
+</script>
+<style scoped lang="scss">
+.countPageClass {
+    width: 24vw;
+    height: 28vh;
+    background: rgba(12, 22, 38, 0.85);
+    border-radius: 8px 8px 8px 8px;
+
+    .title {
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: bold;
+        font-size: 20px;
+        color: #FFFFFF;
+        line-height: 24px;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+    }
+}
+
+.contentClass {
+    font-family: Roboto, Roboto;
+    font-weight: 400;
+    font-size: 12px;
+    color: #FFFFFF;
+    line-height: 17px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+}
+
+.stationClass {
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: bold;
+    font-size: 14px;
+    color: #C1D2E4;
+    line-height: 24px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+}
+
+.timeClass {
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    font-size: 14px;
+    color: #C1D2E4;
+    line-height: 24px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+}
+
+.el-divider--horizontal {
+    margin-top: 10px;
+}
+
+.carClass {
+    background: url("@/assets/images/home/Bg(2).png") no-repeat;
+    background-size: 100% 100%;
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    font-size: 14px;
+    color: #FFFFFF;
+    line-height: 20px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    width: 5vw;
+    text-align: center;
+}
+
+.goodClass {
+    background: url("@/assets/images/home/Bg(3).png") no-repeat;
+    background-size: 100% 100%;
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    font-size: 14px;
+    color: #6A4119;
+    line-height: 20px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+    width: 5vw;
+    text-align: center;
+}
+</style>

src/components/Map/index.vue

@@ -19,10 +19,14 @@ import carImage from "@/assets/images/icon/小货车.png";
 import add from '@/views/car/carInfo/add.vue';
 
 const props = defineProps({
-  showMarket: {
-    type: Boolean,
-    default: true
-  },
+    showMarket: {
+        type: Boolean,
+        default: true
+    },
+    darkType: {
+        type: Boolean,
+        default: false
+    },
 })
 
 // const map = shallowRef(null);
@@ -83,6 +87,12 @@ const initMap = () => {
             zoom: 13,           //初始化地图级别
             center: [119.807462, 26.958413], //初始化地图中心点位置
         });
+        console.log(11111111111);
+        console.log(props.darkType)
+        if (props.darkType) {
+            var styleName = "amap://styles/darkblue";
+            map.setMapStyle(styleName);
+        }
         console.log(map)
         mapObj.value = map;
         console.log(map)
@@ -97,7 +107,7 @@ const initMap = () => {
         //     // map.addControl(new AMap.MapType()); // 实现默认图层与卫星图,实时交通图层之间切换
 
         // });
-        if(props.showMarket){
+        if (props.showMarket) {
             getDictsData("tbl_sites");
         }
         // 单击

src/components/Public/base.vue

@@ -0,0 +1,110 @@
+<template>
+    <div class="processBox">
+      <div class="timelineProcessBox">
+        <el-timeline class="timeline">
+          <el-timeline-item
+            class="lineitem"
+            :class="activity.done ? 'active' : 'inactive'"
+            v-for="(activity, index) in activities"
+            :key="index"
+            :color="activity.color"
+            :timestamp="activity.time"
+          >
+            <span style="display: flex; flex-direction: column">
+              <span style="margin: 10px 0; font-size: 16px">
+                {{ activity.index }}
+              </span>
+            </span>
+            <span style="display: flex; flex-direction: column">
+              <span style="margin: 10px 0; font-size: 16px">
+                {{ activity.content }}
+              </span>
+            </span>
+          </el-timeline-item>
+        </el-timeline>
+      </div>
+    </div>
+  </template>
+  <script lang="ts" setup>
+  const activities = [
+    {
+      content: '白下',
+      time: '7:00',
+      people: '五六七',
+      done: true,
+      color:'#06D903',
+      index:'起点'
+    },
+    {
+      content: '白下',
+      people: '吉吉国王',
+      done: false,
+      time: '8:00-9:00',
+      index:'站点1',
+      color:'#409EFF'
+    },
+    {
+      content: '白下',
+      people: '吉吉国王',
+      done: false,
+      time: '8:00-9:00',
+      index:'站点2',
+      color:'#409EFF'
+    },
+  ]
+  </script>
+  <style lang="scss" scoped>
+  .processBox {
+    background-color: #fff;
+    height: 210px;
+   
+    .title {
+      font-size: 16px;
+      font-weight: 600;
+      padding-left: 32px;
+      padding-top: 16px;
+    }
+    .timelineProcessBox {
+      .timeline {
+        display: flex;
+        width: 95%;
+        margin: 40px auto;
+        .lineitem {
+          transform: translateX(50%);
+          width: 25%;
+        }
+      }
+    }
+  }
+   
+  :deep(.el-timeline-item__tail) {
+    border-left: none;
+    border-top: 2px solid #e4e7ed;
+    width: 100%;
+    position: absolute;
+    top: 6px;
+  }
+  :deep(.el-timeline-item__wrapper) {
+    padding-left: 0;
+    position: absolute;
+    top: 20px;
+    transform: translateX(-50%);
+    text-align: center;
+  }
+  :deep(.el-timeline-item__timestamp) {
+    font-size: 14px;
+  }
+  .active {
+    :deep(.el-timeline-item__node) {
+      background-color: #06D903;
+    }
+    :deep(.el-timeline-item__tail) {
+      border-color: #06D903;
+    }
+  }
+  .active + li {
+    :deep(.el-timeline-item__node) {
+      background-color: #06D903;
+    }
+  }
+  </style>

src/views/car/carInfo/add.vue

@@ -428,7 +428,7 @@ const table = ref(tableElm)
 
 const addForm = ref({});
 
-const activeName = ref("1")
+const activeName = ref("1");
 
 const data = reactive<PageData<CarInfoForm, CarInfoQuery>>({
     form: { ...initFormData },

src/views/car/vehicleService/index.vue

@@ -1,25 +1,26 @@
 <template>
     <div style="display: flex;flex-direction: row;" class="custom-calendar">
         <el-card shadow="never" style="width: 60%;">
-            <tableElm :columns="columns" :showButton="false" ref="table"></tableElm>
+            <tableElm :columns="columns" :showButton="true" @childToParent='childrenClick' ref="table"></tableElm>
 
             <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                 v-model:limit="queryParams.pageSize" @pagination="getList" />
         </el-card>
         <el-card shadow="never" style="width: 38%;margin-left: 1%;">
             <div>
-                <el-tabs type="card" class="demo-tabs" active-name="3">
+                <el-tabs type="card" class="demo-tabs" active-name="4" v-model="activeName">
                     <el-tab-pane label="行驶" name="1">
                         <!-- <carWork></carWork> -->
                     </el-tab-pane>
                     <el-tab-pane label="加油" name="2">
+                        <oilUse @addInfoObj="openDialog"></oilUse>
                         <!-- <schedule></schedule> -->
                     </el-tab-pane>
                     <el-tab-pane label="油耗" name="3">
-                        <oilUse></oilUse>
+                        <oilUse @addInfoObj="openDialog"></oilUse>
                     </el-tab-pane>
                     <el-tab-pane label="维修" name="4">
-                        <!-- <peopleLeave></peopleLeave> -->
+                        <oilUse @addInfoObj="openDialog" ref="serviceObj"></oilUse>
                     </el-tab-pane>
                     <el-tab-pane label="其它信息" name="5">
                         <!-- <peopleLeave></peopleLeave> -->
@@ -27,16 +28,36 @@
                 </el-tabs>
             </div>
         </el-card>
+
+        <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
+            <el-form ref="" :model="form" label-width="120px">
+                <el-form-item v-for="(item, index) in formList" :label="item.label" prop="carNum">
+                    <el-input v-if="item.type == 'input'" v-model="addForm[item.prop]"
+                        :placeholder="item.placeholder" />
+                    <el-date-picker v-if="item.type == 'date'" value-format="YYYY-MM-DD HH:mm:ss"
+                        v-model="addForm[item.prop]" type="date" :placeholder="item.placeholder" />
+                </el-form-item>
+            </el-form>
+
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button type="primary" @click="submitService">确 定</el-button>
+                    <el-button @click="dialog.visible = false">取 消</el-button>
+                </div>
+            </template>
+        </el-dialog>
     </div>
 </template>
 
 <script setup name="CarInfo" lang="ts">
 import { listCarInfo, getCarInfo, delCarInfo, addCarInfo, updateCarInfo } from '@/api/carInfo';
 import { CarInfoVO, CarInfoQuery, CarInfoForm } from '@/api/carInfo/types';
+import { listCarService, getCarService, delCarService, addCarService, updateCarService } from '@/api/carService';
 import tableElm from "@/components/Public/table.vue";
 import { useRoute, useRouter } from "vue-router";
 
-import oilUse from './oilUse.vue';
+import oilUse from './serviceInfo.vue';
+import serviceJson from '@/assets/json/carService.json'
 
 const route = useRoute();
 const router = useRouter();
@@ -52,10 +73,19 @@ const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const value2 = ref('')
+const addForm = ref({});
+
+const activeName = ref("4")
 
 const queryFormRef = ref<ElFormInstance>();
 const carInfoFormRef = ref<ElFormInstance>();
 
+const formList = ref([
+    { placeholder: "请选择维修日期", type: 'date', label: '维修日期', prop: 'carNum', visible: true, isTemplate: false },
+    { placeholder: "请输入维修内容", type: 'input', label: '维修内容', prop: 'carNum', visible: true, isTemplate: false },
+    { placeholder: "请输入金额", type: 'input', label: '金额', prop: 'carNum', visible: true, isTemplate: false },
+])
+
 
 const dialog = reactive<DialogOption>({
     visible: false,
@@ -64,6 +94,8 @@ const dialog = reactive<DialogOption>({
 
 const table = ref(tableElm)
 
+const serviceObj = ref(oilUse)
+
 const times = ref([""])
 
 const columns = ref([
@@ -90,6 +122,9 @@ const initFormData: CarInfoForm = {
     ext1: undefined,
     ext2: undefined
 }
+
+const carId = ref(null);
+
 const data = reactive<PageData<CarInfoForm, CarInfoQuery>>({
     form: { ...initFormData },
     queryParams: {
@@ -168,6 +203,40 @@ const getList = async () => {
     loading.value = false;
 }
 
+const openDialog = () => {
+    formList.value = serviceJson[activeName.value - 1].columns
+    console.log(formList.value)
+    addForm.value = {}
+    dialog.visible = true
+}
+
+const childrenClick = (data) => {
+    if (data.func == "updateObj") {
+        updateObj(data.data)
+    }
+}
+
+const updateObj = (data) => {
+    carId.value = data.id
+    console.log(carId.value)
+    serviceObj.value.initData(data,activeName.value)
+}
+
+const submitService = () => {
+    var obj = {
+        carId: carId.value
+    };
+    var key = serviceJson[activeName.value - 1].dataName
+    obj[key] = JSON.stringify(addForm.value);
+    console.log(obj)
+    console.log(addForm.value)
+    addCarService(obj).then(res => {
+        if(res.code == 200){
+            dialog.visible = false
+        }
+    })
+}
+
 /** 取消按钮 */
 const cancel = () => {
     reset();
@@ -251,6 +320,11 @@ const handleExport = () => {
 
 onMounted(() => {
     getList();
+    table.value.setButton([{
+        "type": "primary",
+        "text": "管理",
+        "func": "updateObj"
+    }]);
 });
 </script>
 

src/views/car/vehicleService/oilUse.vue

@@ -1,56 +0,0 @@
-<template>
-    <div class="p-2">
-        <div style="display: flex;flex-direction: row;justify-content: space-between;">
-            <div style="display: flex;flex-direction: row;">
-                <div>苏A69213</div>
-                <dict-tag style="margin-left: 5px;" :options="energy_type" :value="1" />
-                <dict-tag style="margin-left: 5px;" :options="business_type" :value="1" />
-            </div>
-            <el-button type="primary">新增</el-button>
-        </div>
-        <div style="margin-top: 1vh;">
-            <el-card body-style="background: rgba(0, 0, 0, 0.05);">
-                <el-row style="font-size: 12px;line-height: 20px;">
-                    <el-col :span="12">
-                       时间：2024-01-23 10:00:00
-                    </el-col>
-                    <el-col :span="12">
-                       维修类型：常规保养
-                    </el-col>
-                    <el-col :span="12">
-                        维修金额：589.00元
-                    </el-col>
-                    <el-col :span="12">
-                        里程：1000km
-                    </el-col>
-                    <el-col :span="24">
-                        维修地址：江苏省某某4s店xxxxxxxxxxxxxx
-                    </el-col>
-                    <el-col :span="24">
-                        维修项目：跟换发动机油
-                    </el-col>
-                </el-row>
-            </el-card>
-        </div>
-    </div>
-</template>
-
-<script setup name="CarInfo" lang="ts">
-import { listCarInfo, getCarInfo, delCarInfo, addCarInfo, updateCarInfo } from '@/api/carInfo';
-import { CarInfoVO, CarInfoQuery, CarInfoForm } from '@/api/carInfo/types';
-import tableElm from "@/components/Public/table.vue";
-import { useRoute, useRouter } from "vue-router";
-
-const route = useRoute();
-const router = useRouter();
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-const { energy_type, business_type } = toRefs<any>(proxy?.useDict("energy_type", "business_type"));
-
-
-
-onMounted(() => {
-
-});
-</script>

src/views/car/vehicleService/serviceInfo.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="p-2">
+        <div style="display: flex;flex-direction: row;justify-content: space-between;">
+            <div style="display: flex;flex-direction: row;">
+                <div>{{ carName }}</div>
+                <dict-tag style="margin-left: 5px;" :options="energy_type" :value="energyType" />
+                <dict-tag style="margin-left: 5px;" :options="business_type" :value="businessType" />
+            </div>
+            <el-button type="primary" @click="clickChild">新增</el-button>
+        </div>
+        <div style="margin-top: 1vh;">
+            <el-card body-style="background: rgba(0, 0, 0, 0.05);" v-for="(card,pindex) in serviceList">
+                <el-row style="font-size: 12px;line-height: 20px;">
+                    <el-col :span="item.itemSpan" v-for="(item,index) in keyList">
+                       {{ item.label }}：{{ JSON.parse(card[dataName])[item.prop] }} {{ item.unit }}
+                    </el-col>
+                </el-row>
+            </el-card>
+        </div>
+    </div>
+</template>
+
+<script setup name="CarInfo" lang="ts">
+import { listCarInfo, getCarInfo, delCarInfo, addCarInfo, updateCarInfo } from '@/api/carInfo';
+import { listCarService, getCarService, delCarService, addCarService, updateCarService } from '@/api/carService';
+import { CarInfoVO, CarInfoQuery, CarInfoForm } from '@/api/carInfo/types';
+import tableElm from "@/components/Public/table.vue";
+import { useRoute, useRouter } from "vue-router";
+import {defineEmits} from 'vue'
+import serviceJson from '@/assets/json/carService.json'
+
+const emit = defineEmits(['addInfoObj'])
+
+const route = useRoute();
+const router = useRouter();
+
+const energyType = ref(2)
+const businessType = ref(1)
+const carName = ref('');
+const keyList = ref([]);
+const dataName =ref('');
+const serviceList = ref([]);
+
+const carObj: CarInfoForm = {
+    id: undefined,
+    carNum: undefined,
+    carType: undefined,
+    deviceInfos: undefined,
+    repairInfo: undefined,
+    maintenanceInfo: undefined,
+    insuranceInfo: undefined,
+    inspectionInfo: undefined,
+    trafficAccidentInfo: undefined,
+    violationInfo: undefined,
+    changeInfo: undefined,
+    ext1: undefined,
+    ext2: undefined
+}
+
+const serviceObj =ref({})
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const { energy_type, business_type } = toRefs<any>(proxy?.useDict("energy_type", "business_type"));
+
+const clickChild = () => {
+	emit('addInfoObj')
+}
+
+const initData = (data,activeName) => {
+       carName.value = data.carNum
+       businessType.value = JSON.parse(data.ext1).bussinessType;
+       energyType.value = JSON.parse(data.ext1).energyType;
+       dataName.value = serviceJson[activeName-1].dataName
+       keyList.value = serviceJson[activeName-1].columns
+       console.log(keyList.value)
+       getServiceList(data.id);
+       console.log(energyType.value)
+}
+
+const getServiceList = (id) =>{
+    var obj = {
+        carId:id,
+        pageSize:1000
+    }
+    listCarService(obj).then(res=>{
+        console.log(res)
+        serviceList.value = res.rows
+    })
+}
+
+defineExpose({
+    initData
+})
+
+onMounted(() => {
+
+});
+</script>

src/views/index.vue

@@ -1,41 +1,60 @@
 <template>
-  <div class="app-container home">
-    <el-row :gutter="20">
-      <el-col :sm="24" :lg="12" style="padding-left: 20px">
-        <h2>客货邮智能化管理系统-统计</h2>
-      </el-col>
-    </el-row>
-    <el-divider />
+  <div class="home">
+    <mapDiv :showMarket="showMarket" :darkType="darkType" style="width:100%;height:89vh;padding: 0 0 0 0" ref="mapElm"></mapDiv>
+    <countPage style="position: absolute;left: 1vw;z-index: 1000;top: 1vh;"></countPage>
+    <lineEcharts style="position: absolute;left: 1vw;z-index: 1000;top: 30vh;"></lineEcharts>
+    <messageTable style="position: absolute;left: 1vw;z-index: 1000;top: 59vh;"></messageTable>
+    <pieEcharts style="position: absolute;right: 1vw;z-index: 1000;top: 1vh;"></pieEcharts>
+    <stationPie style="position: absolute;right: 1vw;z-index: 1000;top: 30vh;"></stationPie>
+    <warnTable style="position: absolute;right: 1vw;z-index: 1000;top: 59vh;"></warnTable>
   </div>
 </template>
 
 <script setup name="Index" lang="ts">
 import { initWebSocket } from '@/utils/websocket';
+import mapDiv from "@/components/Map/index.vue"
+import countPage from "@/components/HomeStatics/countPage.vue";
+import lineEcharts from "@/components/HomeStatics/lineEcharts.vue";
+import messageTable from '@/components/HomeStatics/messageTable.vue';
+import pieEcharts from '@/components/HomeStatics/pieEcharts.vue';
+import stationPie from '@/components/HomeStatics/stationPie.vue';
+import warnTable from '@/components/HomeStatics/warnTable.vue';
+
+
+const showMarket =ref(false);
+const darkType =ref(true);
 
 onMounted(() => {
   let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'
   initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + "/resource/websocket");
 });
 
-const goTarget = (url:string) => {
+const goTarget = (url: string) => {
   window.open(url, '__blank')
 }
 </script>
 
 <style scoped lang="scss">
 .home {
+
+  height: 100%;
+  width: 100%;
+  padding: 0 0 0 0 !important;
+
   blockquote {
     padding: 10px 20px;
     margin: 0 0 20px;
     font-size: 17.5px;
     border-left: 5px solid #eee;
   }
+
   hr {
     margin-top: 20px;
     margin-bottom: 20px;
     border: 0;
     border-top: 1px solid #eee;
   }
+
   .col-item {
     margin-bottom: 20px;
   }
@@ -45,7 +64,11 @@ const goTarget = (url:string) => {
     margin: 0;
   }
 
-  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "open sans",
+  "Helvetica Neue",
+  Helvetica,
+  Arial,
+  sans-serif;
   font-size: 13px;
   color: #676a6c;
   overflow-x: hidden;