Guoxiaohuan 5 anos atrás
pai
commit
1006f2e62e

+ 20 - 10
index.html

@@ -1,12 +1,22 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>sagacloud-cwc-pages</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>sagacloud-cwc-pages</title>
+</head>
+<style>
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+  }
+</style>
+
+<body>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>

Diferenças do arquivo suprimidas por serem muito extensas
+ 0 - 11724
package-lock.json


+ 8 - 0
package.json

@@ -10,7 +10,12 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "axios": "^0.19.0",
+    "echarts": "^4.2.1",
+    "element-ui": "^2.9.1",
+    "moment": "^2.24.0",
     "vue": "^2.5.2",
+    "vuex": "^3.1.1",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {
@@ -31,6 +36,7 @@
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
     "node-notifier": "^5.1.2",
+    "node-sass": "^4.13.1",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
     "portfinder": "^1.0.13",
@@ -38,8 +44,10 @@
     "postcss-loader": "^2.0.8",
     "postcss-url": "^7.2.1",
     "rimraf": "^2.6.0",
+    "sass-loader": "^7.3.1",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
+    "style-loader": "^1.1.3",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
     "vue-loader": "^13.3.0",

BIN
src/assets/finish.png


BIN
src/assets/lzzk.png


BIN
src/assets/shape.png


BIN
src/assets/wrong.png


+ 0 - 20
src/components/HelloWorld.vue

@@ -1,20 +0,0 @@
-<template>
- <div>
-
- </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  data () {
-    return {
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-
-</style>

+ 5 - 0
src/main.js

@@ -2,6 +2,11 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+Vue.use(ElementUI)
+
+
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */

+ 29 - 4
src/router/index.js

@@ -1,16 +1,41 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
+const Main = () => import('@/views/main/index')
+const Strategy = () => import('@/views/strategy/index')
+const Appeal = () => import('@/views/appeal/index')
+const DoBusiness = () => import('@/views/doBusiness/index')
+const Evaluate = () => import('@/views/evaluate/index')
+
+
 
 Vue.use(Router)
 
 export default new Router({
-  mode:'history',
+  mode: 'history',
   routes: [
     {
       path: '/',
-      name: 'HelloWorld',
-      component: HelloWorld
+      name: 'main',
+      component: Main
+    },
+    {
+      path: '/strategy',
+      name: 'strategy',
+      component: Strategy
+    },
+    {
+      path: '/appeal',
+      name: 'appeal',
+      component: Appeal
+    },
+    {
+      path: '/doBusiness',
+      name: 'doBusiness',
+      component: DoBusiness
+    }, {
+      path: '/evaluate',
+      name: 'evaluate',
+      component: Evaluate
     }
   ]
 })

+ 25 - 0
src/views/appeal/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <Head :headText="headText"></Head>
+    <div class="appealContainer">申诉审核</div>
+  </div>
+</template>
+<script>
+import Head from "../main/index";
+export default {
+  data() {
+    return {
+      headText: "申诉审核"
+    };
+  },
+  components: {
+    Head
+  }
+};
+</script>
+<style lang="scss" scoped>
+.appealContainer {
+  padding: 16px;
+  background: #fff;
+}
+</style>

+ 26 - 0
src/views/doBusiness/index.vue

@@ -0,0 +1,26 @@
+
+<template>
+  <div>
+    <Head :headText="headText"></Head>
+    <div class="doBusinessContainer">营业时间</div>
+  </div>
+</template>
+<script>
+import Head from "../main/index";
+export default {
+  data() {
+    return {
+      headText: "营业时间调整"
+    };
+  },
+  components: {
+    Head
+  }
+};
+</script>
+<style lang="scss" scoped>
+.doBusinessContainer {
+  padding: 16px;
+  background: #fff;
+}
+</style>

+ 26 - 0
src/views/evaluate/index.vue

@@ -0,0 +1,26 @@
+
+<template>
+  <div>
+    <Head :headText="headText"></Head>
+    <div class="evaluateContainer">运行评价</div>
+  </div>
+</template>
+<script>
+import Head from "../main/index";
+export default {
+  data() {
+    return {
+      headText: "运行评价"
+    };
+  },
+  components: {
+    Head
+  }
+};
+</script>
+<style lang="scss" scoped>
+.evaluateContainer {
+  padding: 16px;
+  background: #fff;
+}
+</style>

+ 368 - 0
src/views/main/index.vue

@@ -0,0 +1,368 @@
+<template>
+  <div class="mainContainer">
+    <header>
+      <div class="head-left">
+        <ul>
+          <li>
+            <div @click="navBlock" class="head-bth">
+              <span v-for="(item,index) in 3" :key="index"></span>
+            </div>
+          </li>
+          <li class="line">
+            <span></span>
+          </li>
+          <li>
+            <img class="head-icon" src="@/assets/lzzk.png" alt />
+          </li>
+          <li>
+            <span class="head-text">冷站智控</span>
+          </li>
+          <li>
+            <span class="head-circular"></span>
+          </li>
+          <li>
+            <span class="head-text">{{headText}}</span>
+          </li>
+          <li>
+            <div class="triangle_border_down"></div>
+          </li>
+        </ul>
+      </div>
+      <div class="head-right">
+        <ul>
+          <li>
+            <span class="head-text">2020.01.12 12:45</span>
+          </li>
+          <li>
+            <span class="line"></span>
+          </li>
+          <li>
+            <span class="head-text">天气:多云</span>
+          </li>
+          <li>
+            <span class="head-text">25℃</span>
+          </li>
+          <li>
+            <span class="line"></span>
+          </li>
+          <li>
+            <span class="head-bth"></span>
+          </li>
+          <li>
+            <div class="triangle_border_down"></div>
+          </li>
+        </ul>
+      </div>
+    </header>
+    <nav>
+      <div class="nav-left">
+        <el-select class="nav-select" v-model="value">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+      </div>
+      <div class="nav-right">
+        <img class="nav-icon" v-if="navText" src="@/assets/shape.png" alt />
+        <span class="nav-text1" v-if="navText">今日已收到 8 条策略,其中有 1 条未执行</span>
+        <span class="nav-text" v-else>今天已收到 8 条策略</span>
+        <span class="nav-look">查看</span>
+      </div>
+    </nav>
+    <div id="nav" class="nav">
+      <div @click="navNone" class="nav-bth">
+        <span v-for="(item,index) in 3" :key="index"></span>
+      </div>
+      <p v-for="(item,index) in menuList" :key="index" class="nav-title">
+        <router-link :to="item.path">{{item.name}}</router-link>
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      menuList: [
+        {
+          name: "当日运行策略",
+          path: "/strategy"
+        },
+        {
+          name: "申诉审核",
+          path: "/appeal"
+        },
+        {
+          name: "营业时间",
+          path: "/doBusiness"
+        },
+        {
+          name: "报警统计",
+          path: "/evaluate"
+        }
+      ],
+      options: [
+        {
+          value: "选项1",
+          label: "嘉铭东枫产业园产业园"
+        },
+        {
+          value: "选项2",
+          label: "嘉铭东枫产业园"
+        }
+      ],
+      value: "",
+      navText: true
+    };
+  },
+  props: ["headText"],
+  methods: {
+    navNone() {
+      document.getElementById("nav").className = "nav";
+    },
+    navBlock() {
+      document.getElementById("nav").className = "nav nav-hover";
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.mainContainer {
+  width: 100%;
+  height: 100%;
+  header {
+    padding: 12px 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 3px 14px 0px rgba(31, 35, 41, 0.1);
+    .head-left {
+      display: flex;
+      align-items: center;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        li {
+          margin: 0 4px;
+          .head-bth {
+            width: 16px;
+            height: 16px;
+            span {
+              display: block;
+              width: 18px;
+              height: 2px;
+              background: rgba(0, 145, 255, 1);
+              border-radius: 1px;
+              margin: 0 auto;
+            }
+            span:nth-of-type(2) {
+              margin: 5px auto;
+            }
+          }
+          .line {
+            display: inline-block;
+            width: 1px;
+            height: 16px;
+            margin: 4px 12px 0 12px;
+            background: rgba(216, 216, 216, 1);
+          }
+          .head-icon {
+            width: 20px;
+            height: 20px;
+            margin-top: 3px;
+          }
+          .head-text {
+            height: 26px;
+            font-size: 14px;
+            font-family: MicrosoftYaHei;
+            color: rgba(31, 36, 41, 1);
+            line-height: 26px;
+          }
+          .head-circular {
+            display: inline-block;
+            width: 4px;
+            height: 4px;
+            background: rgba(195, 198, 203, 1);
+            border-radius: 90px;
+            margin-bottom: 3px;
+          }
+          .triangle_border_down {
+            width: 0;
+            height: 0;
+            border-width: 8px 6px 0;
+            border-style: solid;
+            border-color: #9ca2a9 transparent transparent;
+          }
+        }
+      }
+    }
+    .head-right {
+      display: flex;
+      align-items: center;
+      ul {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        li {
+          margin: 0 4px;
+          .head-bth {
+            display: inline-block;
+            width: 24px;
+            height: 24px;
+            background: rgba(0, 145, 255, 1);
+          }
+          .line {
+            display: inline-block;
+            width: 1px;
+            height: 16px;
+            margin: 4px 8px 0 8px;
+            background: rgba(216, 216, 216, 1);
+          }
+          .head-text {
+            height: 18px;
+            font-size: 14px;
+            font-family: MicrosoftYaHei;
+            color: #646c73;
+            line-height: 19px;
+          }
+          .head-circular {
+            display: inline-block;
+            width: 4px;
+            height: 4px;
+            background: rgba(195, 198, 203, 1);
+            border-radius: 90px;
+            margin-bottom: 3px;
+          }
+          .triangle_border_down {
+            width: 0;
+            height: 0;
+            border-width: 8px 6px 0;
+            border-style: solid;
+            border-color: #9ca2a9 transparent transparent;
+          }
+        }
+      }
+    }
+  }
+  nav {
+    height: 48px;
+    background: rgba(247, 249, 250, 1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .nav-left {
+    }
+    .nav-right {
+      .nav-text {
+        height: 22px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: rgba(31, 36, 41, 1);
+        line-height: 20px;
+      }
+      .nav-text1 {
+        margin: 0 4px;
+        height: 20px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: rgba(245, 78, 69, 1);
+        line-height: 20px;
+      }
+      .nav-icon {
+        width: 16px;
+        height: 14px;
+      }
+      .nav-look {
+        height: 22px;
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: rgba(0, 145, 255, 1);
+        line-height: 22px;
+        margin: 0 12px;
+        cursor: pointer;
+      }
+    }
+  }
+  .nav {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 0px;
+    background: #004275;
+    overflow: hidden;
+    height: 1005px;
+    transition: all 0.3s;
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    -ms-transition: all 0.3s;
+    -o-transition: all 0.3s;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    .nav-bth {
+      width: 16px;
+      height: 16px;
+      margin: 24px;
+      span {
+        display: block;
+        width: 18px;
+        height: 2px;
+        background: #fff;
+        border-radius: 1px;
+        margin: 0 auto;
+      }
+      span:nth-of-type(2) {
+        margin: 5px auto;
+      }
+    }
+    .nav-title {
+      padding: 0 24px;
+      a {
+        text-decoration: none;
+        color: #fff;
+        font-size: 16px;
+        line-height: 24px;
+      }
+    }
+    .nav-title:hover {
+      opacity: 0.5;
+    }
+  }
+  .nav-hover {
+    width: 200px;
+  }
+}
+</style>
+<style lang="scss">
+.nav-left {
+  .nav-select {
+    width: 144px;
+    height: 28px;
+    border-radius: 14px;
+    margin-left: 16px;
+    .el-input--suffix .el-input__inner {
+      padding: 0 9px;
+      width: 144px;
+      height: 28px;
+      border-radius: 14px;
+      margin-left: 16px;
+    }
+    .el-input__icon {
+      line-height: 28px;
+      display: none;
+    }
+  }
+}
+</style>

+ 26 - 0
src/views/strategy/index.vue

@@ -0,0 +1,26 @@
+
+<template>
+  <div>
+    <Head :headText="headText"></Head>
+    <div class="strategyContainer">当日运行策略</div>
+  </div>
+</template>
+<script>
+import Head from "../main/index";
+export default {
+  data() {
+    return {
+      headText: "当日运行策略"
+    };
+  },
+  components: {
+    Head
+  }
+};
+</script>
+<style lang="scss" scoped>
+.strategyContainer {
+  padding: 16px;
+  background: #fff;
+}
+</style>