代码目录调整-运营大屏添加

src/module/index/router/index_router.js

@@ -12,6 +12,7 @@ import OrderProportion from "../../databoard/databoard/order-proportion.vue";
 import LostAddCustomer from "../../databoard/databoard/lost-add-customer.vue";
 import TargetAchievement from "../../databoard/databoard/target-achievement.vue";
 import DepartmentShipment from "../../databoard/databoard/department-shipment.vue";
+import SafeQuality from "../../databoard/databoard/safe-quality.vue"
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 
@@ -20,76 +21,81 @@ Vue.use(Router)
 Vue.use(ElementUI)
 
 export default new Router({
-    routes: [
+  routes: [
+    {
+      path: '/',
+      redirect: '/index'
+    },
+    {
+      path: '/index',
+      name: 'index',
+      component: Index
+    },
+    {
+      path: '/index-sale',
+      name: 'index-sale',
+      component: IndexSale
+    },
+    {
+      path: '/ar_bar',
+      name: 'arBar',
+      component: ArBar,
+      children: [
         {
-            path: '/',
-            redirect: '/index'
+          path: '/ar_bar',
+          redirect: '/ar_bar/company'
         },
         {
-            path: '/index',
-            name: 'index',
-            component: Index
+          path: '/ar_bar/company',
+          name: 'arCompanyBar',
+          component: ArCompanyBar
         },
         {
-            path: '/index-sale',
-            name: 'index-sale',
-            component: IndexSale
+          path: '/ar_bar/company/monthly',
+          name: 'arCompanyMonthlyBar',
+          component: ArCompanyMonthlyBar
         },
         {
-            path: '/ar_bar',
-            name: 'arBar',
-            component: ArBar,
-            children: [
-                {
-                    path: '/ar_bar',
-                    redirect: '/ar_bar/company'
-                },
-                {
-                    path: '/ar_bar/company',
-                    name: 'arCompanyBar',
-                    component: ArCompanyBar
-                },
-                {
-                    path: '/ar_bar/company/monthly',
-                    name: 'arCompanyMonthlyBar',
-                    component: ArCompanyMonthlyBar
-                },
-                {
-                    path: '/ar_bar/monthly',
-                    name: 'arMonthlyBar',
-                    component: ArMonthlyBar
-                },
-                {
-                    path: '/ar_bar/monthly/company',
-                    name: 'arMonthlyCompanyBar',
-                    component: ArMonthlyCompanyBar
-                }
-            ]
+          path: '/ar_bar/monthly',
+          name: 'arMonthlyBar',
+          component: ArMonthlyBar
         },
         {
-            path: '/turnover-detail',
-            name: 'turnoverDetail',
-            component: TurnoverDetail
-        },
-        {
-            path: '/order-proportion',
-            name: 'OrderProportion',
-            component: OrderProportion
-        },
-        {
-            path: '/lost-add-customer',
-            name: 'lostAddCustomer',
-            component: LostAddCustomer
-        },
-        {
-            path: '/target-achievement',
-            name: 'TargetAchievement',
-            component: TargetAchievement
-        },
-        {
-            path: '/department-shipment',
-            name: 'DepartmentShipment',
-            component: DepartmentShipment
+          path: '/ar_bar/monthly/company',
+          name: 'arMonthlyCompanyBar',
+          component: ArMonthlyCompanyBar
         }
-    ]
+      ]
+    },
+    {
+      path: '/turnover-detail',
+      name: 'turnoverDetail',
+      component: TurnoverDetail
+    },
+    {
+      path: '/order-proportion',
+      name: 'OrderProportion',
+      component: OrderProportion
+    },
+    {
+      path: '/lost-add-customer',
+      name: 'lostAddCustomer',
+      component: LostAddCustomer
+    },
+    {
+      path: '/target-achievement',
+      name: 'TargetAchievement',
+      component: TargetAchievement
+    },
+    {
+      path: '/department-shipment',
+      name: 'DepartmentShipment',
+      component: DepartmentShipment
+    },
+    {
+      path: '/safe-quality',
+      name: 'safeQuality',
+      component: SafeQuality
+    }
+  ]
 })

src/module/operation/operation.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>联达供应链控制塔台</title>
+
+    <!-- Google MD图标 -->
+    <link href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet">
+  </head>
+
+  <body>
+    <div id="app"></div>
+  </body>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    body{
+      min-height: 900px;
+      min-width: 1440px;
+    }
+
+    body, html {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+      overflow-y: hidden;
+    }
+  </style>
+</html>

src/module/operation/operation.js

+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './operation.vue'
+import router from '../index/router/index_router'
+import '../databoard/assets/index.css'
+
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  template: '<App/>',
+  components: { App }
+})

src/module/operation/operation.vue

+<template>
+  <div class="page">
+    <div class="head">
+      <div class="text_left">
+        <input class="btn" type="button" value="返回上级" @click="goIndex">
+        <span>{{ currentDate }}</span>
+        <span>{{ currentTime }}</span>
+        <span>{{ currentWeek }}</span>
+      </div>
+      <div class="text_right">
+        <span>刷新时间：{{ countDown }}s</span>
+      </div>
+    </div>
+    <router-view style="height: 90%" v-if="isRouterAlive" :countDown="countDown"></router-view>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import {prefixZero} from "../utils/numUtil";
+window.axios = axios
+window.$ = window.jQuery = require('materialize-css/node_modules/jquery/dist/jquery.js')
+require('materialize-css')
+export default {
+  name: 'app',
+  data() {
+    return {
+      countDown: 10,
+      currentDate: null,
+      currentTime: null,
+      currentWeek: null,
+      isRouterAlive: true,
+      countDownTimer: null,
+      week: ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'],
+    }
+  },
+  methods: {
+    goIndex() {
+      this.$router.go(-1)
+    },
+    reload() {
+      this.isRouterAlive = false
+      this.$nextTick(function () {
+        this.isRouterAlive = true
+      })
+    },
+    setCurrentDateTime(){
+      let now = new Date();
+      this.currentDate = now.getFullYear() + "-" + prefixZero(now.getMonth()+1,2) + "-" + prefixZero(now.getDate(),2);
+      this.currentTime = prefixZero(now.getHours(),2) + ":" + prefixZero(now.getMinutes(),2) + ":" + prefixZero(now.getSeconds(),2);
+      this.currentWeek = this.week[now.getDay()];
+    },
+  },
+  mounted() {
+    this.$router.push("/safe-quality")
+    // 倒计时器
+    this.countDownTimer = setInterval(() => {
+      this.countDown--
+      if (this.countDown <= 0) {
+        this.countDown = 10;
+      }
+      this.setCurrentDateTime();
+    }, 1000)
+  },
+  beforeDestroy() {
+    // 倒计时器
+    if (this.countDownTimer) {
+      clearInterval(this.countDownTimer)
+    }
+  }
+}
+</script>
+
+<style>
+@import "../../../node_modules/materialize-css/bin/materialize.css";
+
+#app {
+}
+
+@media only screen and (max-width: 992px) {
+  header, main, footer {
+    padding-left: 0;
+  }
+}
+.btn{
+  height: 70%;
+  margin: 0.5%;
+  border: none;
+  font-size: 12px;
+  font-weight: bold;
+  border-radius: 25px;
+  padding: 0 10px;
+  line-height: 100%;
+  color: #00c8d6;
+  background-color: #1234a1;
+  margin: auto;
+}
+.btn:hover{
+  color: #1234a1 !important;
+  background-color: #00c8d6 !important;
+}
+</style>