修改大屏页面

package-lock.json

@@ -1956,6 +1956,49 @@
         "webpack-merge": "^5.7.3",
         "webpack-virtual-modules": "^0.4.2",
         "whatwg-fetch": "^3.6.2"
+      },
+      "dependencies": {
+        "@vue/vue-loader-v15": {
+          "version": "npm:vue-loader@15.10.1",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.1.tgz",
+          "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
+          "dev": true,
+          "requires": {
+            "@vue/component-compiler-utils": "^3.1.0",
+            "hash-sum": "^1.0.2",
+            "loader-utils": "^1.1.0",
+            "vue-hot-reload-api": "^2.3.0",
+            "vue-style-loader": "^4.1.0"
+          },
+          "dependencies": {
+            "hash-sum": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+              "dev": true
+            }
+          }
+        },
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -2117,47 +2160,6 @@
         "eslint-plugin-import": "^2.25.3"
       }
     },
-    "@vue/vue-loader-v15": {
-      "version": "npm:vue-loader@15.10.1",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.1.tgz",
-      "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
-      "dev": true,
-      "requires": {
-        "@vue/component-compiler-utils": "^3.1.0",
-        "hash-sum": "^1.0.2",
-        "loader-utils": "^1.1.0",
-        "vue-hot-reload-api": "^2.3.0",
-        "vue-style-loader": "^4.1.0"
-      },
-      "dependencies": {
-        "hash-sum": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
-          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-          "dev": true
-        },
-        "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
-      }
-    },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
@@ -5726,6 +5728,11 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
+    "js-cookie": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz",
+      "integrity": "sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw=="
+    },
     "js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz",
@@ -7596,6 +7603,11 @@
         "ajv-keywords": "^3.5.2"
       }
     },
+    "screenfull": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.0.2.tgz",
+      "integrity": "sha512-cCF2b+L/mnEiORLN5xSAz6H3t18i2oHh9BA8+CQlAh5DRw2+NFAGQJOSYbcGw8B2k04g/lVvFcfZ83b3ysH5UQ=="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -8527,6 +8539,21 @@
         }
       }
     },
+    "vue-fullscreen": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/vue-fullscreen/-/vue-fullscreen-2.6.1.tgz",
+      "integrity": "sha512-bbMJDKj2ZhsAwLcsvh8oV8WJeqAr2zxTHysvf7H8wSqaJTn5CnHXMSMbP9Tz4L/54I7jNQIdyA7VZ+EKAG+svg==",
+      "requires": {
+        "screenfull": "^5.1.0"
+      },
+      "dependencies": {
+        "screenfull": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
+          "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA=="
+        }
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

package.json

@@ -11,8 +11,11 @@
     "core-js": "^3.8.3",
     "echarts": "^5.4.0",
     "element-ui": "^2.15.12",
+    "js-cookie": "^3.0.1",
     "postcss-pxtorem": "^6.0.0",
+    "screenfull": "^5.0.2",
     "vue": "^2.6.14",
+    "vue-fullscreen": "^2.6.1",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
   },

src/assets/js/full.js

@@ -0,0 +1,28 @@
+// 除IE外各浏览器全屏、退出全屏的方法
+export function isFullscreen(element, state) {
+  let isFullscreen =
+    document.fullScreenElement ||
+    document.msFullscreenElement ||
+    document.mozFullScreenElement ||
+    document.webkitFullscreenElement ||
+    false;
+  if (!isFullscreen) {
+    if (element.requestFullscreen) {
+      element.requestFullscreen();
+    } else if (element.mozRequestFullScreen) {
+      element.mozRequestFullScreen();
+    } else if (element.webkitRequestFullscreen) {
+      element.webkitRequestFullscreen();
+    } else if (element.msRequestFullscreen) {
+      element.msRequestFullscreen();
+    }
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    } else if (document.mozCancelFullScreen) {
+      document.mozCancelFullScreen();
+    } else if (document.webkitExitFullscreen) {
+      document.webkitExitFullscreen();
+    }
+  }
+}

src/router/index.js

@@ -1,21 +1,21 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 import DashBoard from "../views/dashboard/dashboard.vue";
-// import HomePage from "../views/dashboard/homepage.vue";
+import HomePage from "../views/dashboard/homepage.vue";
 
 Vue.use(VueRouter);
 
 const routes = [
   {
-    path: "/",
+    path: "/dashboard",
     name: "dashboard",
     component: DashBoard,
   },
-  // {
+  {
-  //   path: "/home",
+    path: "/",
-  //   name: "homepage",
+    name: "homepage",
-  //   component: HomePage,
+    component: HomePage,
-  // },
+  },
 ];
 
 const router = new VueRouter({

src/styles/style.css

@@ -668,6 +668,18 @@ pre {
     height: 100%;
     background: url(../assets/images/line_img.png) top left repeat-y;
 }
+.full_box{
+    width: 100%;
+    height: 5%;
+    position: relative;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.full_box>img{
+    margin-right:0.5rem ;
+}
 
 .right-top {
     width: 100%;
@@ -677,6 +689,17 @@ pre {
     position: relative;
 }
 
+.right-top>.chart_box{
+    position: absolute;
+    top: 0.42rem;
+    bottom: 0;
+    width: 90%;
+    margin: auto;
+    left: 0;
+    right: 0;
+    height: 75%;
+}
+
 .right-top>.data-box,
 .right-top>.chart-box {
     top: 1rem;
@@ -758,7 +781,7 @@ pre {
 
 .right-center {
     width: 100%;
-    height: 29%;
+    height: 24%;
     position: relative;
 }
 

src/util/auth.js

@@ -0,0 +1,11 @@
+import Cookies from "js-cookie";
+/**
+ * 存token
+ * @param {*}
+ */
+export function setToken(val) {
+  if (window.location.protocol === "https:") {
+    return Cookies.set("scs_token", val, { sameSite: "none", secure: true });
+  }
+  return Cookies.set("scs_token", val);
+}

src/views/dashboard/homepage.vue

@@ -1,12 +1,75 @@
 <template>
-  <div class="content">
+  <div class="container_box">
-    <iframe
+    <div class="left_box">
-      src="/static/index.html"
+      <div class="left_top">
-      width="100%"
+        <div class="time_box">
-      height="100%"
+          <div style="font-size: 0.4rem; color: #fff">{{ time }}</div>
-      ref="iframeDom"
+          <div class="date_box">
-      frameborder="0"
+            <div style="font-size: 0.18rem; color: #fff">{{ date }}</div>
-    ></iframe>
+            <div style="font-size: 0.18rem; color: #fff">{{ week }}</div>
+          </div>
+        </div>
+        <div class="weather_box"></div>
+      </div>
+      <div class="left_cen">
+        <div class="title_box">
+          <div class="left_tit">收件量</div>
+          <div class="right_tit">
+            <div class="btn">收</div>
+            <div class="btn">发</div>
+            <div class="btn">到</div>
+            <div class="btn">派</div>
+            <div class="btn">签</div>
+          </div>
+        </div>
+        <div class="cen_con"></div>
+      </div>
+      <div class="left_bot">
+        <div class="title_box">
+          <div class="tit">村点信息</div>
+        </div>
+      </div>
+    </div>
+    <div class="center_box">
+      <div class="center_top">
+        <div class="top_tit">莒县物流服务中心</div>
+      </div>
+      <div class="cen_data">
+        <div class="data_top">
+          <div class="left_btn">
+            <div class="txt">按日</div>
+            <div class="txt">按月</div>
+          </div>
+          <div class="right_time">数据更新时间:2022-01-09</div>
+        </div>
+      </div>
+      <div class="center_cen"></div>
+      <div class="cen_bot">
+        <div class="echarts"></div>
+        <div class="echarts"></div>
+      </div>
+    </div>
+    <div class="right_box">
+      <div class="full_btn">
+        <img v-show="!isFullFlag" src="~@/assets/images/full.png" @click="clickFun" alt="">
+        <img v-show="isFullFlag" src="~@/assets/images/nofull.png" @click="clickFun" alt="">
+      </div>
+      <div class="right_top">
+        <div class="title_box">
+          <div class="tit">派件入库量占比</div>
+        </div>
+      </div>
+      <div class="right_center">
+        <div class="title_box">
+          <div class="tit">车辆行驶里程</div>
+        </div>
+      </div>
+      <div class="right_bot">
+        <div class="title_box">
+          <div class="tit">车辆报警</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -14,18 +77,364 @@
 export default {
   data() {
     return {
-            src:''
+      timer: null,
+      day: "",
+      time: "",
+      date: "",
+      week: "",
+      isFullFlag:false,
+      isSupport:false
+    };
+  },
+  created() {
+    this.getTime();
+  },
+  mounted() {
+    this.isSupport=document.fullscreenEnabled
+    
+  },
+  methods: {
+    clickFun(){
+      if (this.isSupport) {
+        if (document.fullscreenElement) {
+          //document.exitFullscreen()退出全屏模式的方法
+          document.exitFullscreen();
+          this.isFullFlag = false;
+        } else {
+          //requestFullscreen(),请求全屏的方法
+          document.documentElement.requestFullscreen();
+          this.isFullFlag = true;
         }
 	    }
+      console.log(this.isFullFlag)
+      // this.isFullFlag =!this.isFullFlag
+			// if (!screenfull.enabled) {
+			// 	this.$message({
+			// 		 message: 'Your browser does not work',
+			// 		 type: 'warning'
+			// 	})
+			// 	return false
+			// }
+			// screenfull.toggle()
+    },
     
-}
+    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>
+<style lang="scss" scoped>
-.content{
+.container_box {
   width: 100%;
   height: 100%;
-    overflow: hidden;
+  position: absolute;
+  background: url(~@/assets/images/index_bg.png);
+  background-size: 100% 100%;
+  display: flex;
+
+  .left_box {
+    width: 25%;
+    height: 100%;
+    background: url(~@/assets/images/line_img.png) top right repeat-y;
+
+    .left_top {
+      width: 90%;
+      height: 12%;
+      border: 1px solid #0e94ea;
+      margin: 0 auto;
+      margin-top: 0.1rem;
+
+      .time_box {
+        width: 49%;
+        height: 100%;
+        color: #fff;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+
+        .date_box {
+          width: 100%;
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+          color: #fff;
+          font-size: 0.18rem;
+        }
+      }
+    }
+
+    .left_cen {
+      width: 90%;
+      height: 45%;
+      margin: 0 auto;
+      margin-top: 0.1rem;
+      .title_box {
+        width: 100%;
+        height: 0.42rem;
+        background: url(~@/assets/images/box_title.png) top left no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .left_tit {
+          color: #fff;
+          width: 30%;
+          display: flex;
+          padding-left: 0.4rem;
+          align-items: center;
+          font-size: 0.2rem;
+        }
+        .right_tit {
+          width: 65%;
+          color: #fff;
+          display: flex;
+          height: 70%;
+          border: 0.5px solid #0e94ea;
+          border-radius: 10px;
+          justify-content: space-between;
+          align-items: center;
+          margin-right: 0.3rem;
+
+          .btn {
+            width: 20%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-right: 0.5px solid #0e94ea;
+            cursor: pointer;
+            font-size: 0.18rem;
+            color: #fff;
+
+            &:last-child {
+              border-right: none;
+            }
           }
+        }
+      }
+      .cen_con {
+        width: 100%;
+        height: 89%;
+      }
+    }
+
+    .left_bot {
+      width: 90%;
+      height: 39%;
+      // background: red;
+      margin: 0 auto;
+      margin-top: 0.1rem;
+
+      .title_box {
+        width: 100%;
+        height: 0.42rem;
+        background: url(~@/assets/images/box_title.png) top left no-repeat;
+        background-size: 100% 100%;
 
+        .tit {
+          width: 30%;
+          height: 100%;
+          font-size: 0.2rem;
+          color: #fff;
+          display: flex;
+          align-items: center;
+          padding-left: 0.4rem;
+        }
+      }
+    }
+  }
+  .center_box {
+    width: 45%;
+    height: 100%;
+    
+    .center_top{
+      width: 100%;
+      height: 8.8%;
+      background: red;
+      background: url(~@/assets/images/title_border.png) bottom center no-repeat;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .top_tit{
+        color: #cdddf7;
+        font-size: 0.52rem;
+      }
+    }
+    .cen_data{
+      width: 100%;
+      height: 15%;
+
+      .data_top{
+        width: 100%;
+        height: 30%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .left_btn{
+          width: 15%;
+          border: 1px solid #0e94ea;
+          height: 65%;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-radius: 0.1rem;
+          margin-left: 0.1rem;
+
+          .txt{
+            font-size: 0.18rem;
+            color: #fff;
+            width: 50%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            border-right: 1px solid #0e94ea;
+            align-items: center;
+
+            &:last-child{
+              border: none;
+            }
+          }
+        }
+        .right_time{
+          width: 25%;
+          height: 100%;
+          color: #fff;
+          font-size: 0.18rem;
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+
+    .center_cen{
+      width: 100%;
+      height: 46%;
+      background: red;
+    }
+    .cen_bot{
+      width: 100%;
+      height: 30%;
+      display: flex;
+      // background: green;
+
+      .echarts{
+        width: 50%;
+        height: 100%;
+
+      }
+    }
+  }
+  .right_box {
+    width: 30%;
+    height: 100%;
+    background: url(~@/assets/images/line_img.png) top left repeat-y;
+
+    .full_btn{
+      width: 92%;
+      height: 3%;
+      // background: red;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
+
+    .right_top{
+      width: 92%;
+      height: 30%;
+      margin: 0 auto;
+      margin-top: 0.1rem;
+
+      .title_box {
+        width: 100%;
+        height: 0.42rem;
+        background: url(~@/assets/images/box_title.png) top left no-repeat;
+        background-size:100% 100% ;
+
+        .tit {
+          width: 30%;
+          height: 100%;
+          font-size: 0.2rem;
+          color: #fff;
+          display: flex;
+          align-items: center;
+          padding-left: 0.4rem;
+        }
+      }
+    }
+
+    .right_center{
+      width: 92%;
+      height: 45%;
+      // background: red;
+      margin:0 auto;
+      .title_box {
+        width: 100%;
+        height: 0.42rem;
+        background: url(~@/assets/images/box_title.png) top left no-repeat;
+        background-size:100% 100% ;
+
+        .tit {
+          width: 30%;
+          height: 100%;
+          font-size: 0.2rem;
+          color: #fff;
+          display: flex;
+          align-items: center;
+          padding-left: 0.4rem;
+        }
+      }
+    }
+
+    .right_bot{
+      width: 92%;
+      height: 20%;
+      // background: green;
+      margin:0 auto;
+      .title_box {
+        width: 100%;
+        height: 0.42rem;
+        background: url(~@/assets/images/box_title.png) top left no-repeat;
+        background-size:100% 100% ;
+
+        .tit {
+          width: 30%;
+          height: 100%;
+          font-size: 0.2rem;
+          color: #fff;
+          display: flex;
+          align-items: center;
+          padding-left: 0.4rem;
+        }
+      }
+    }
+  }
+}
 </style>