Merge branch 'main' of http://42.192.7.176:3000/suojin/physical_distribution into main

src/assets/font/font.css

@@ -0,0 +1,35 @@
+@font-face {  
+
+    font-family: 'ALHY';
+
+    src: url('../font/阿里汉仪智能黑体.TTF');
+
+    font-weight: normal;  
+
+    font-style: normal;  
+
+  }
+
+  @font-face {  
+
+    font-family: 'FZSK';
+
+    src: url('../font/方正尚酷简体.TTF');
+
+    font-weight: normal;  
+
+    font-style: normal;  
+
+  }
+
+  @font-face {  
+
+    font-family: '04B';
+
+    src: url('../font/04B_0.TTF');
+
+    font-weight: normal;  
+
+    font-style: normal;  
+
+  }

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from "vue";
 import VueRouter from "vue-router";
 import DashBoard from "../views/dashboard/dashboard.vue";
 import HomePage from "../views/dashboard/homepage.vue";
+import home from "../views/dashboard/home.vue";
 
 Vue.use(VueRouter);
 
@@ -12,10 +13,15 @@ const routes = [
     component: DashBoard,
   },
   {
-    path: "/",
+    path: "/homepage",
     name: "homepage",
     component: HomePage,
   },
+  {
+    path: "/",
+    name: "home",
+    component: home,
+  },
 ];
 
 const router = new VueRouter({

src/views/dashboard/home.vue

@@ -0,0 +1,330 @@
+<template>
+  <div class="container_box">
+    <div class="top_con">
+      <div class="left_con">
+        <div class="left_txt">
+          <div class="time_text">{{ time }}</div>
+          <div class="bittom_left">
+            <div class="week_txt">
+              <span>{{ date }}</span
+              ><span style="margin-left: 0.1rem">{{ week }}</span>
+            </div>
+            <div class="uodate_time">数据更新时间:<span class="time_txt">2023/01/17</span></div>
+          </div>
+        </div>
+      </div>
+      <div class="center_con">
+        <div class="con_title">莒县物流服务中心</div>
+      </div>
+      <div class="right_con">
+        <div class="right_txt">
+          <div class="left">
+            <img src="~@/assets/img/pos.png" alt="" />
+            <div class="pos_text">日照市莒县</div>
+          </div>
+          <div class="bottom_right">
+            <img src="~@/assets/img/weather.png" alt="" />
+            <div>
+              <span>{{ temp }}℃</span>
+              <span>{{ weather }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="left_box">
+      <div class="left_top">
+        <div class="top_title">
+          <div class="left_tit">
+            <span class="txt_name">收件量</span>
+            <span class="name">RECEIVING</span>
+          </div>
+          <div class="right_tit">
+            <div class="title_txt">收</div>
+            <div class="title_txt">发</div>
+            <div class="title_txt">到</div>
+            <div class="title_txt">派</div>
+            <div class="title_txt">签</div>
+          </div>
+        </div>
+      </div>
+      <div class="left_bottom"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryWeath } from "@/api/base";
+export default {
+  data() {
+    return {
+      day: "",
+      time: "",
+      date: "",
+      week: "",
+      temp: "",
+      weather: "",
+    };
+  },
+  created() {
+    this.getTime();
+  },
+  mounted() {
+    queryWeath().then((res) => {
+      this.temp = res.result.now.temp;
+      this.weather = res.result.now.text;
+    });
+  },
+  methods: {
+    fn(str) {
+      let num = null;
+      str >= 10 ? (num = str) : (num = "0" + str);
+      return num;
+    },
+    getWeek(e) {
+      let arr = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
+      this.week = arr[e];
+    },
+    getTime() {
+      //获取当前时间
+      this.timer = setInterval(() => {
+        var date = new Date();
+        var year = date.getFullYear(); //当前年份
+        var month = date.getMonth(); //当前月份
+        var data = date.getDate(); //天
+        var hours = date.getHours(); //小时
+        var minute = date.getMinutes(); //分
+        var second = date.getSeconds(); //秒
+        this.day = date.getDay(); //获取当前星期几
+        this.getWeek(this.day);
+        this.time = this.fn(hours) + ":" + this.fn(minute) + ":" + this.fn(second);
+        this.date = year + "/" + (month + 1) + "/" + data;
+      }, 1000);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/font/font.css";
+.container_box {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background: url(~@/assets/img/background.jpg);
+  background-size: 100% 100%;
+  position: relative;
+  z-index: 9;
+
+  .top_con {
+    width: 100%;
+    height: 10%;
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 0;
+
+    .left_con {
+      width: 20%;
+      display: flex;
+      justify-content: space-between;
+      height: 100%;
+      align-items: center;
+
+      .left_txt {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        height: 55%;
+        justify-content: space-between;
+
+        .time_text {
+          display: flex;
+          margin-left: 0.38rem;
+          font-size: 0.34rem;
+          font-family: "04B";
+          color: #ffffff;
+          box-shadow: -4px 5px 10px 0px rgb(64 49 49 / 56%);
+        }
+
+        .bittom_left {
+          display: flex;
+          justify-content: space-between;
+
+          .week_txt {
+            font-size: 0.14rem;
+            letter-spacing: 0px;
+            color: #ffffff;
+            margin-left: 0.38rem;
+          }
+
+          .uodate_time {
+            font-family: "FZSK";
+            font-size: 0.14rem;
+            font-weight: normal;
+            font-stretch: normal;
+            letter-spacing: 0px;
+            color: #ffffff;
+            box-shadow: -1px 2px 3px 0px rgb(64 49 49 / 60%);
+            opacity: 0.8;
+            color: #fff;
+            .time_txt {
+              font-size: 0.16rem;
+              font-family: "04B";
+            }
+          }
+        }
+      }
+    }
+
+    .center_con {
+      width: 60%;
+      height: 80%;
+      text-align: center;
+
+      .con_title {
+        font-family: "FZSK";
+        font-size: 0.44rem;
+        font-weight: normal;
+        font-style: italic;
+        font-stretch: normal;
+        letter-spacing: 0px;
+        color: #ffffff;
+        // box-shadow: -0.04rem 0.05rem 0.1rem 0px
+        //   rgba(64, 49, 49, 0.56);
+      }
+    }
+
+    .right_con {
+      width: 17%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      margin-left: 3%;
+
+      .right_txt {
+        width: 100%;
+        height: 53%;
+        display: flex;
+        justify-content: space-between;
+
+        .left {
+          display: flex;
+          align-items: flex-end;
+          img {
+            width: 0.13rem;
+            height: 0.16rem;
+            margin-right: 0.1rem;
+          }
+
+          .pos_text {
+            font-family: "FZSK";
+            font-size: 0.16rem;
+            color: #ddecff;
+          }
+        }
+
+        .bottom_right {
+          display: flex;
+          align-items: center;
+          margin-right: 0.38rem;
+          img {
+            width: 0.8rem;
+            height: 0.8rem;
+          }
+          div {
+            height: 100%;
+            font-family: "FZSK";
+            font-size: 0.16rem;
+            color: #ffffff;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+          }
+        }
+      }
+      div {
+        font-size: 0.16rem;
+        color: #fff;
+      }
+    }
+  }
+
+  .left_box {
+    width: 24%;
+    height: 80%;
+    position: absolute;
+    top: 14%;
+    left: 3%;
+
+    .left_top {
+      width: 100%;
+      height: 55%;
+
+      .top_title {
+        width: 100%;
+        height: 10%;
+        background: url(~@/assets/img/tit_bag.png);
+        background-size: 100% 100%;
+        display: flex;
+
+        .left_tit {
+          width: 50%;
+          height: 100%;
+          font-size: 0.1rem;
+          color: #fff;
+          display: flex;
+          align-items: center;
+
+          .txt_name {
+            margin: 0 0.1rem 0 0.6rem;
+            font-family: "FZSK";
+            font-size: 0.22rem;
+            letter-spacing: 0px;
+            color: #ffffff;
+          }
+
+          .name {
+            font-family: "FZSK";
+            color: #ffffff;
+            box-shadow: -4px 5px 10px 0px rgba(39, 8, 8, 0.81);
+            opacity: 0.6;
+            margin-bottom: 0.1rem;
+          }
+        }
+
+        .right_tit {
+          display: flex;
+          align-items: center;
+          margin-right: 0.18rem;
+          position: relative;
+
+          .title_txt {
+            width: 0.4rem;
+            height: 0.3rem;
+            margin: 0 0.03rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &::after {
+              content: "";
+              width: 0.4rem;
+              height: 0.3rem;
+              position: absolute;
+              border: solid 1px #127cff;
+              top: 50%;
+              transform: skew(-10deg) translateY(-50%);
+            }
+          }
+
+          div {
+            font-size: 0.18rem;
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/dashboard/homepage.vue

@@ -10,7 +10,7 @@
           </div>
         </div>
         <div class="weather_box">
-          <img src="~@/assets/images/weather/weather_img01.png" alt="" />
+          <img class="wea_img" src="~@/assets/images/weather/weather_img01.png" alt="" />
           <div>
             <div class="weather_txt">{{ temp }}℃</div>
             <div class="weather_txt">{{ weather }}</div>
@@ -273,6 +273,7 @@ export default {
   created() {
     this.getTime();
     this.readExcelFile("http://192.168.1.35:8080/excel/wuliu.xlsx");
+    // this.readExcelFile("/excelapi/ces.xlsx");
     this.$nextTick(() => {
       this.createCharts();
     });
@@ -520,7 +521,10 @@ export default {
           let sheets = wb.Sheets; // 获取文档数据
           // console.log(sheets);
           this.content = this.transformSheets(sheets);
-        });
+          // this.$message('读取成功');
+        }).catch((err) =>{
+          this.$message.error(err);
+        })
     },
     transformSheets(sheets) {
       const content1 = [];
@@ -535,6 +539,8 @@ export default {
         { name: "派件量", data: content1[0][0].日总派件量, huanbi: content1[0][0].派件量日总环比 },
         { name: "签件量", data: content1[0][0].日总签件量, huanbi: content1[0][0].签件量日总环比 }
       );
+      
+
       this.monthData.push(
         { name: "收件量", data: content1[0][0].月总收件量, huanbi: content1[0][0].收件量月总环比 },
         { name: "发件量", data: content1[0][0].月总发件量, huanbi: content1[0][0].发件量月总环比 },
@@ -548,7 +554,9 @@ export default {
         this.yData1.push(item.到件量);
         this.yData2.push(item.派件量);
       });
-      this.dateTime = content1[0][0].日期.replaceAll(".", "/");
+      // this.dateTime = content1[0][0].日期.replaceAll(".", "/");
+      this.dateTime = content1[0][0].日期.replace(/\D/g, '/');
+      // this.$message.success(content1[0][0].日期);
       content1[3].map((item) => {
         this.villageData.push({ name: item.村点名称, upData: item.上行, downData: item.下行 });
       });
@@ -1035,6 +1043,11 @@ export default {
         justify-content: center;
         align-items: center;
 
+        .wea_img{
+          width: 0.8rem;
+          height: 0.6rem
+        }
+
         .weather_txt {
           font-size: 0.18rem;
           color: #fff;