架子已经搭好

package-lock.json

@@ -4790,6 +4790,14 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
+      "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
+      "requires": {
+        "zrender": "4.3.2"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -12519,6 +12527,11 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
+      "integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
     }
   }
 }

package.json

@@ -12,6 +12,7 @@
     "axios": "^0.21.4",
     "babel-plugin-import": "^1.13.3",
     "core-js": "^3.6.5",
+    "echarts": "^4.9.0",
     "element-ui": "^2.15.6",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",

src/App.vue

@@ -6,7 +6,7 @@
 
 <style>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: 'Xsh HeiTi', Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

src/assets/ttf/font.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: 'Xsh HeiTi';
+  src: url('./OPPOSans_M_2.ttf');
+}

src/components/HeaderElement.vue

@@ -16,8 +16,8 @@
                   v-model="$store.state.mode"
                   active-color="#13ce66"
                   inactive-color="#ff4949"
-                  active-text="单一导航"
-                  inactive-text="多级导航"
+                  active-text="多级导航"
+                  inactive-text="折叠导航"
                   @change="changeMode">
               </el-switch>
             </div>
@@ -168,9 +168,15 @@ p {
   display: inline-block;
   position: relative;
 }
+/deep/.el-row {
+  margin: 0 !important;
+}
 /deep/.el-divider--vertical {
   margin: 0 15px;
 }
+/deep/.el-switch__label {
+  color: white;
+}
 .headers {
   width: 100%;
   height: 50px;

src/main.js

@@ -6,10 +6,14 @@ import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css';
 import { hasBtnPermission } from './utils/permission';
 import { Modal } from 'ant-design-vue';
+import './assets/ttf/font.css';
+import echart from 'echarts';
+
 Vue.config.productionTip = false
 Vue.use(ElementUI);
 Vue.use(Modal);
 Vue.prototype.hasPerm = hasBtnPermission
+Vue.prototype.$echarts = echart
 
 new Vue({
   router,

src/utils/http.js

@@ -42,10 +42,14 @@ instance.interceptors.response.use(
  * 携带当前页面路由，以期在登录页面完成登录后返回当前页面
  */
 const toLogin = () => {
+  let path = '/';
+  if(router.currentRoute.fullPath !== '/login') {
+    path =  router.currentRoute.fullPath
+  }
   router.replace({
     path: '/login',
     query: {
-      redirect: router.currentRoute.fullPath
+      redirect: path
     }
   });
 }

src/views/Login/Login.vue

@@ -21,6 +21,21 @@
           <i class="pwd" slot="prefix"></i>
         </el-input>
         <div style="height: 20px"></div>
+        <el-row :gutter="20">
+          <el-col :span="15">
+            <el-input
+                style="height: 50px"
+                placeholder="请输入验证码"
+                v-model="code"
+                size="large">
+              <i class="pwd" slot="prefix"></i>
+            </el-input>
+          </el-col>
+          <el-col :span="9">
+            <img id="kaptchaImage" src="http://192.168.1.165:8081/my/send" @click="refset" alt="">
+          </el-col>
+        </el-row>
+        <div style="height: 20px"></div>
         <el-button @click="onSubmit" style="width: 100%; height: 50px; background-color: #1ABC9C; color: #fff;" >登录</el-button>
       </div>
     </div>
@@ -34,29 +49,40 @@ export default {
   data() {
     return {
       userName: '',
-      passWord: ''
+      passWord: '',
+      code: '',
     }
   },
   methods: {
     onSubmit() {
       let params = {
         accountName: this.userName,
-        password: this.passWord
+        password: this.passWord,
+        code: this.code,
       }
       Login(params).then(res => {
         if(res.code === 10000) {
-          localStorage.setItem('accessToken', res.token);
-          localStorage.setItem('UserName', res.accountName);
-          localStorage.setItem('UserId', res.id);
+          localStorage.setItem('accessToken', res.data.token);
+          localStorage.setItem('UserName', res.data.accountName);
+          localStorage.setItem('UserId', res.data.id);
+          this.$message.success('登录成功');
           let url = this.$route.query.redirect;
           if(url) {
             this.$router.replace(url);
           } else {
             this.$router.replace('/');
           }
+        } else {
+          this.$message.error(res.message);
+          this.refset();
         }
       })
     },
+    // 刷新
+    refset() {
+      let img = document.getElementById('kaptchaImage');
+      img.setAttribute('src', 'http://192.168.1.165:8081/my/send?'+ Math.floor(Math.random() * 100));
+    }
   }
 }
 </script>
@@ -100,10 +126,11 @@ export default {
     font-size: 28px;
     color: #1ABC9C;
     font-weight: 600;
+    padding-top: 10px;
   }
   .loginForm {
     width: 280px;
-    margin: 60px auto 0;
+    margin: 40px auto 0;
     /*height: 300px;*/
   }
   .pwd {

src/views/MainLayout.vue

@@ -102,6 +102,7 @@ export default {
    width: 100%;
    height: calc(100vh - 120px);
    overflow-y: auto;
+   background-color: #F9F9F9;
  }
  .operant::-webkit-scrollbar {
    width: 6px;

src/views/dashboard/chart/ChartDl.vue

@@ -0,0 +1,63 @@
+<template>
+  <div id="chartDl"></div>
+</template>
+
+<script>
+export default {
+  name: "ChartDl",
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        tooltip: {
+          trigger: 'axis',
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '湿度',
+            axisLabel: {
+              formatter: '{value} RH'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+          }
+        ],
+      }
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/dashboard/chart/ChartWsd.vue

@@ -0,0 +1,115 @@
+<template>
+  <div id="chartWsd" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+export default {
+  name: "ChartWsd",
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        tooltip: {
+          trigger: 'axis',
+        },
+        legend: {
+          data: ['温度', '湿度']
+        },
+        color: ['#5599FE', '#31C3A6'],
+        grid: {
+          top: '15%',
+          left: '10%',
+          bottom: '10%',
+          right: '10%'
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '温度',
+            axisLabel: {
+              formatter: '{value} °C'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+            splitLine:{
+              show:false
+            }
+          },
+          {
+            type: 'value',
+            name: '湿度',
+            axisLabel: {
+              formatter: '{value} RH'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+            // splitLine:{
+            //   show:false
+            // }
+          }
+        ],
+        series: [
+          {
+            name: '温度',
+            type: 'line',
+            smooth: true,
+            data: [20, 19, 18, 23.2, 25.6, 28.7, 35.6, 36.2, 32.6, 20.0, 16.4, 23.3]
+          },
+          {
+            name: '湿度',
+            type: 'line',
+            smooth: true,
+            yAxisIndex: 1,
+            data: [20, 22, 33, 45, 63, 102, 23, 24, 23, 65, 50, 62]
+          }
+        ]
+      }
+      this.myChart.setOption(options);
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chartWsd'));
+    this.init();
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/dashboard/dashboard.vue

@@ -1,13 +1,275 @@
 <template>
-  <div>这是首页</div>
+  <div class="box">
+    <div class="header">
+      <el-row :gutter="20">
+        <el-col v-for="item in 4" :key="item" :span="6">
+          <el-card class="box-card">
+            <div class="card-flex">
+              <div class="flex-left">
+                <i class="el-icon-s-order" :style="{ fontSize: '72px', color: color }"></i>
+              </div>
+              <div class="flex-right">
+                <p :style="{marginBottom: '8px', color: color}">今日报警总数</p>
+                <p>15</p>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+    <br/>
+    <div class="pending">
+      <div class="title" :style="{color: color}">待处理事务</div>
+      <div class="fens">
+        <el-row :gutter="40">
+          <el-col v-for="item in elements" :key="item.id" :span="8">
+            <div class="fens-text">
+              <span>{{item.name}}</span>
+              <el-tag  effect="dark" type="danger" style="float: right">{{item.data}}</el-tag>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <br/>
+    <div class="pending">
+      <div class="title" :style="{color: color}">
+        <span>猪舍温湿度</span>
+        <el-button type="text" style="float: right; margin-right: 25px">详情</el-button>
+      </div>
+      <div style="padding: 20px; border-bottom: 1px solid #ddd">
+        <el-form :inline="true" size="mini">
+          <el-row>
+            <el-col :span="5">
+              <el-form-item label="栋舍">
+                <el-select></el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="单元">
+                <el-select></el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="1">
+              <el-form-item>
+                <span class="text-size">今日</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="1">
+              <el-form-item>
+                <span class="text-size">本周</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="1">
+              <el-form-item>
+                <span class="text-size">本月</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item>
+                <el-date-picker
+                    v-model="dateRange"
+                    type="daterange"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <div style="width: 100%; height: 400px">
+        <chart-wsd></chart-wsd>
+      </div>
+    </div>
+    <br/>
+    <div class="pending">
+      <div class="title" :style="{color: color}">
+        <span>水量消耗</span>
+        <el-button type="text" style="float: right; margin-right: 25px">详情</el-button>
+      </div>
+      <div style="padding: 20px; border-bottom: 1px solid #ddd">
+        <el-form :inline="true" size="mini">
+          <el-row>
+            <el-col :span="5">
+              <el-form-item label="栋舍">
+                <el-select></el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="单元">
+                <el-select></el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="1">
+              <el-form-item>
+                <span class="text-size">今日</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="1">
+              <el-form-item>
+                <span class="text-size">本周</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="1">
+              <el-form-item>
+                <span class="text-size">本月</span>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-form-item>
+                <el-date-picker
+                    v-model="dateRange"
+                    type="daterange"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <div class="pen-flex">
+        <div class="pen-left"></div>
+        <div style="width: 80%; height: 400px">
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import { mapState } from 'vuex';
+import ChartWsd from "./chart/ChartWsd";
 export default {
-  name: "dashboard"
+  name: "dashboard",
+  components: {
+    ChartWsd
+  },
+  data() {
+    return {
+      elements: [
+        {
+          id: 1,
+          name: '事件提醒',
+          data: 10
+        },
+        {
+          id: 2,
+          name: '事件提醒',
+          data: 10
+        },
+        {
+          id: 3,
+          name: '事件提醒',
+          data: 10
+        },
+        {
+          id: 4,
+          name: '事件提醒',
+          data: 10
+        },
+        {
+          id: 5,
+          name: '事件提醒',
+          data: 10
+        },
+        {
+          id: 6,
+          name: '事件提醒',
+          data: 10
+        },
+      ],
+      dateRange: [],
+    }
+  },
+  computed: {
+    ...mapState(['color'])
+  }
 }
 </script>
 
 <style scoped>
-
+  p {
+    margin: 0;
+    padding: 0;
+  }
+  .box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 20px;
+  }
+  .header {
+    width: 100%;
+    /*height: 150px;*/
+  }
+  .box-card {
+    box-sizing: border-box;
+    height: 100%;
+  }
+  .card-flex {
+    display: flex;
+    height: 120px;
+  }
+  .flex-left {
+    width: 40%;
+    height: 100%;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .flex-right {
+    width: 60%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 30px 0;
+    font-size: 18px;
+  }
+  .pending {
+    width: 100%;
+    /*height: 300px;*/
+    border: 1px solid #ddd;
+  }
+  .title {
+    width: 100%;
+    height: 40px;
+    border-bottom: 1px solid #ddd;
+    line-height: 40px;
+    box-sizing: border-box;
+    padding-left: 20px;
+    background-color: #F3F3F3;
+    font-weight: 700;
+  }
+  .fens {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 20px;
+  }
+  .fens-text {
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    border-bottom: 1px solid #ddd;
+    box-sizing: border-box;
+    padding: 0 10px;
+    margin-bottom: 20px;
+    color: #CBBCCB;
+  }
+  .text-size {
+    cursor: pointer;
+  }
+  .pen-flex {
+    width: 100%;
+    height: 400px;
+    display: flex;
+  }
+  .pen-left {
+    width: 20%;
+    height: 100%;
+    border-right: 1px solid #ddd;
+  }
 </style>