架子已经搭好

src/utils/http.js

@@ -2,10 +2,20 @@ import axios from "axios";
 import router from "../router";
 import { Message } from 'element-ui';
 
+let pending = []; //声明一个数组用于存储每个ajax请求的取消函数和ajax标识
+let cancelToken = axios.CancelToken;
+let removePending = (ever) => {
+  for(let p in pending) {
+    if(pending[p].u === ever.url + '&' + ever.method) { //当当前请求在数组中存在时执行函数体
+      pending[p].f(); //执行取消操作
+      pending.splice(p, 1); //把这条记录从数组中移除
+    }
+  }
+}
 // 创建axios实例
 var instance = axios.create({
   timeout: 1000 * 12,
-  baseURL: 'http://192.168.1.165:8081'
+  baseURL: 'http://192.168.1.165:8082'
 })
 
 // 请求拦截器
@@ -17,6 +27,11 @@ instance.interceptors.request.use(
     // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。
     const token = localStorage.getItem('accessToken')
     token && (config.headers.accessToken = token)
+    removePending(config); //在一个ajax发送前执行一下取消操作
+    config.cancelToken = new cancelToken((c)=>{
+      // 这里的ajax标识我是用请求地址&请求方式拼接的字符串，当然你可以选择其他的一些方式
+      pending.push({ u: config.url + '&' + config.method, f: c });
+    });
     return config
   },
   error => Promise.error(error)
@@ -29,7 +44,6 @@ instance.interceptors.response.use(
   // 请求失败
   error => {
     const { response } = error;
-    console.log(response)
     if (response) {
       errorHandle(response.status, response.data.message);
       return Promise.reject(response);
@@ -43,7 +57,7 @@ instance.interceptors.response.use(
  */
 const toLogin = () => {
   let path = '/';
-  if(router.currentRoute.fullPath !== '/login') {
+  if(router.currentRoute.fullPath.indexOf('login') === -1) {
     path =  router.currentRoute.fullPath
   }
   router.replace({

src/views/Login/Login.vue

@@ -32,7 +32,7 @@
             </el-input>
           </el-col>
           <el-col :span="9">
-            <img id="kaptchaImage" src="http://192.168.1.165:8081/my/send" @click="refset" alt="">
+            <img id="kaptchaImage" src="http://192.168.1.165:8082/my/send" @click="refset" alt="">
           </el-col>
         </el-row>
         <div style="height: 20px"></div>
@@ -81,7 +81,7 @@ export default {
     // 刷新
     refset() {
       let img = document.getElementById('kaptchaImage');
-      img.setAttribute('src', 'http://192.168.1.165:8081/my/send?'+ Math.floor(Math.random() * 100));
+      img.setAttribute('src', 'http://192.168.1.165:8082/my/send?'+ Math.floor(Math.random() * 100));
     }
   }
 }

src/views/dashboard/chart/ChartDl.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="chartDl"></div>
+  <div id="chartDl" style="width: 100%; height: 100%"></div>
 </template>
 
 <script>
@@ -12,14 +12,39 @@ export default {
   },
   methods: {
     init() {
+      let dataAxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '测试月'];
+      let start = dataAxis.length - 12;
+      let end = dataAxis.length - 1;
       let options = {
         tooltip: {
           trigger: 'axis',
         },
+        color: ['#49A9EE'],
+        dataZoom: [{
+          type: 'inside',
+          startValue: start,
+          endValue: end,
+          show: false
+          // zoomOnMouseWheel: false,
+          // zoomLock: true,
+        }],
+        // dataZoom: [
+        //
+        //   {
+        //     type: 'slider',
+        //     startValue: start,
+        //     endValue:end,
+        //     zoomOnMouseWheel: false,
+        //     zoomLock: true,
+        //   },
+        //   {
+        //     type: 'inside'
+        //   },
+        // ],
         xAxis: [
           {
             type: 'category',
-            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+            data: dataAxis,
             axisPointer: {
               type: 'shadow'
             },
@@ -37,9 +62,9 @@ export default {
         yAxis: [
           {
             type: 'value',
-            name: '湿度',
+            name: '电量统计情况',
             axisLabel: {
-              formatter: '{value} RH'
+              formatter: '{value} KW·h'
             },
             axisLine: {
               show: false,
@@ -52,9 +77,39 @@ export default {
             },
           }
         ],
+        series: [
+          {
+            name: '电量',
+            type: 'line',
+            // stack: 'Total',
+            smooth: true,
+            areaStyle: {},
+            emphasis: {
+              focus: 'series'
+            },
+            itemStyle : {
+              color:'#73C0DE',
+              borderColor:"#a3c8d8",
+              normal: {
+                label : {
+                  show: true,
+                  textStyle: {
+                    fontSize: 14
+                  }
+                }
+              }
+            },
+            data: [120, 132, 101, 134, 90, 230, 210, 210, 245, 203, 124, 214, 210]
+          }
+        ]
       }
+      this.myChart.setOption(options)
     }
   },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chartDl'));
+    this.init()
+  }
 }
 </script>
 

src/views/dashboard/chart/ChartWater.vue

@@ -0,0 +1,118 @@
+<template>
+  <div id="chartWater" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+export default {
+  name: "ChartWater",
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      let dataAxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '测试月'];
+      let start = dataAxis.length - 12;
+      let end = dataAxis.length - 1;
+      let options = {
+        tooltip: {
+          trigger: 'axis',
+        },
+        color: ['#AD7DC2'],
+        dataZoom: [{
+          type: 'inside',
+          startValue: start,
+          endValue: end,
+          show: false
+          // zoomOnMouseWheel: false,
+          // zoomLock: true,
+        }],
+        // dataZoom: [
+        //
+        //   {
+        //     type: 'slider',
+        //     startValue: start,
+        //     endValue:end,
+        //     zoomOnMouseWheel: false,
+        //     zoomLock: true,
+        //   },
+        //   {
+        //     type: 'inside'
+        //   },
+        // ],
+        xAxis: [
+          {
+            type: 'category',
+            data: dataAxis,
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '水量统计情况',
+            axisLabel: {
+              formatter: '{value} KW·h'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+          }
+        ],
+        series: [
+          {
+            name: '水量',
+            type: 'line',
+            // stack: 'Total',
+            smooth: true,
+            areaStyle: {},
+            emphasis: {
+              focus: 'series'
+            },
+            itemStyle : {
+              color:'#AD7DC2',
+              borderColor:"#AD7DC2",
+              normal: {
+                label : {
+                  show: true,
+                  textStyle: {
+                    fontSize: 14
+                  }
+                }
+              }
+            },
+            data: [120, 132, 101, 134, 90, 230, 210, 210, 245, 203, 124, 214, 210]
+          }
+        ]
+      }
+      this.myChart.setOption(options)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chartWater'));
+    this.init()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/dashboard/dashboard.vue

@@ -132,8 +132,181 @@
         </el-form>
       </div>
       <div class="pen-flex">
-        <div class="pen-left"></div>
-        <div style="width: 80%; height: 400px">
+        <div class="pen-left">
+          <div class="water">
+            <p>本月用水量</p>
+            <p>10000t</p>
+            <p>
+              <i class="el-icon-caret-top" style="color: red"></i>
+              <span style="color: red">10%</span>
+              &nbsp;
+              <span style="font-size: 16px; color: #CFDBED">同比上月</span>
+            </p>
+          </div>
+          <div class="water">
+            <p>本周用水量</p>
+            <p>10000t</p>
+            <p>
+              <i class="el-icon-caret-bottom" style="color: #1ABC9C"></i>
+              <span style="color: #1ABC9C">10%</span>
+              &nbsp;
+              <span style="font-size: 16px; color: #CFDBED">同比上周</span>
+            </p>
+          </div>
+        </div>
+        <div style="width: 85%; height: 400px">
+          <chart-water></chart-water>
+        </div>
+      </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 class="water">
+            <p>本月用电量</p>
+            <p>10000KW·h</p>
+            <p>
+              <i class="el-icon-caret-top" style="color: red"></i>
+              <span style="color: red">10%</span>
+              &nbsp;
+              <span style="font-size: 16px; color: #CFDBED">同比上月</span>
+            </p>
+          </div>
+          <div class="water">
+            <p>本周用电量</p>
+            <p>10000KW·h</p>
+            <p>
+              <i class="el-icon-caret-bottom" style="color: #1ABC9C"></i>
+              <span style="color: #1ABC9C">10%</span>
+              &nbsp;
+              <span style="font-size: 16px; color: #CFDBED">同比上周</span>
+            </p>
+          </div>
+        </div>
+        <div style="width: 85%; height: 400px">
+          <chart-dl></chart-dl>
+        </div>
+      </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 class="water">
+            <p>本月销售总量</p>
+            <p>10000</p>
+            <p>
+              <i class="el-icon-caret-top" style="color: red"></i>
+              <span style="color: red">10%</span>
+              &nbsp;
+              <span style="font-size: 16px; color: #CFDBED">同比上月</span>
+            </p>
+          </div>
+          <div class="water">
+            <p>本周用电量</p>
+            <p>10000</p>
+            <p>
+              <i class="el-icon-caret-bottom" style="color: #1ABC9C"></i>
+              <span style="color: #1ABC9C">10%</span>
+              &nbsp;
+              <span style="font-size: 16px; color: #CFDBED">同比上周</span>
+            </p>
+          </div>
+        </div>
+        <div style="width: 85%; height: 400px">
         </div>
       </div>
     </div>
@@ -143,10 +316,14 @@
 <script>
 import { mapState } from 'vuex';
 import ChartWsd from "./chart/ChartWsd";
+import ChartDl from'./chart/ChartDl';
+import ChartWater from "./chart/ChartWater";
 export default {
   name: "dashboard",
   components: {
-    ChartWsd
+    ChartWsd,
+    ChartDl,
+    ChartWater
   },
   data() {
     return {
@@ -268,8 +445,13 @@ export default {
     display: flex;
   }
   .pen-left {
-    width: 20%;
+    width: 15%;
     height: 100%;
     border-right: 1px solid #ddd;
+    text-align: center;
+  }
+  .water {
+    padding: 50px 0;
+    font-size: 20px;
   }
 </style>