个体追踪完成

src/sdk/ajax.js

@@ -13,6 +13,7 @@ Vue.use(VueAxios, axios)
 
 /* 常用ajax封装 （固定URL） */
 export const ajax = function (type = "post", url, params) {
+    let token = localStorage.getItem("token")
     return new Promise((resole, reject) => {
         axios({
             method: type,
@@ -20,12 +21,18 @@ export const ajax = function (type = "post", url, params) {
             params,
             headers: {
                 'Content-Type': 'application/x-www-form-urlencoded',
-				'x-auth-token': localStorage.getItem("token")
+				'x-auth-token': token
             }
         }).then((res) => {
+            switch(res.data.errCode) {
+                case 'request_not_authorize': // 登录过期
+                    let url = window.location.protocol + "//" + window.location.host + "/#/login"
+                    window.location.replace(url)
+                    break;
+            }
             resole(res.data);
         }).catch((err) => {
-            reject(err);
+            reject(err.data);
         });
     });
 }

src/views/Login/Login.vue

@@ -72,6 +72,7 @@ export default {
             reqLogin(this.form)
                 .then(res => {
                     console.log(res);
+                    console.log(res)
                     localStorage.setItem("token", res.token);
                     this.doOrganizationChoose();
                 })
@@ -93,11 +94,11 @@ export default {
                     this.isShowDialog = true;
                     this.orgList = res;
                 } else {
-                    this.setOrganizationId(res[0].id);
+                    console.log("6666")
+                    // this.setOrganizationId(res[0].id);
                 }
             }).catch(err => {
                 console.log(err)
-            }).finally( res => {
                 this.loading = false;
             })
         },
@@ -110,7 +111,7 @@ export default {
             reqOrganizationId({orgId: id}).then(res => {
                 this.isShowDialog = false;
                     //导航到 正式页面
-                    this.$router.replace("/home");
+                    this.$router.replace("/home/GroupRecord");
             }).catch(err => {
                 if (err.errMsg) this.$message.error(err.errMsg);
                     else this.$message.error("服务器发生异常");

src/views/groupManagment/UnityTrace/UnityTrace.vue

@@ -45,7 +45,6 @@
                 </el-row>
             </ul>
         </header>
-
         <section class="section">
             <el-date-picker
                 v-model="value2"
@@ -58,12 +57,14 @@
                 align="right"
                 class="date-picker"
             ></el-date-picker>
-            <article></article>
+            <article v-if="dateArr.length > 0">
+                <chart-a :dateArr="dateArr" :data="animalTempArr" class="charts"></chart-a>
+                <chart-b :dateArr="dateArr" :data="envTempArr" class="charts"></chart-b>
+                <chart-c :dateArr="dateArr" :data="batteryArr" class="charts"></chart-c>
+            </article>
+            <p v-else class="hint"> 当前时间段无数据... </p>
         </section>
-
-        <chart-a></chart-a>
-        <hr />
-        <chart-b :options="options"></chart-b>
+        
     </div>
 </template>
 
@@ -71,75 +72,135 @@
 import { reqReportList } from "@/api/groupManagment";
 
 import chart from "./charts/chart";
-import chart_a from "./charts/chart1";
-import chart_b from "./charts/chart2";
+import chart_a from "./charts/chart_a";
+import chart_b from "./charts/chart_b";
+import chart_c from "./charts/chart_c";
 import ae from "./charts/Ae";
 
 const pickerOptions = {
     shortcuts: [
         {
-            text: "最近一周",
+            text: "最近一小时",
             onClick(picker) {
                 const end = new Date();
                 const start = new Date();
-                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+                start.setTime(start.getTime() - 3600 * 1000 * 1);
+                picker.$emit("pick", [start, end]);
+            }
+        },
+        {
+            text: "最近半天",
+            onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setTime(start.getTime() - 3600 * 1000 * 12);
+                picker.$emit("pick", [start, end]);
+            }
+        },
+         {
+            text: "最近一天",
+            onClick(picker) {
+                const end = new Date();
+                const start = new Date();
+                start.setTime(start.getTime() - 3600 * 1000 * 24);
                 picker.$emit("pick", [start, end]);
             }
         },
         {
-            text: "最近一个月",
+            text: "最近三天",
             onClick(picker) {
                 const end = new Date();
                 const start = new Date();
-                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
                 picker.$emit("pick", [start, end]);
             }
         },
         {
-            text: "最近三个月",
+            text: "最近一周",
             onClick(picker) {
                 const end = new Date();
                 const start = new Date();
-                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                 picker.$emit("pick", [start, end]);
             }
         }
     ]
 };
 
+// 格式 20200718 00:00:00
+const formatTime = function(time) {
+    let FullYear = time.getFullYear(),
+        Month = time.getMonth()<9?"0"+(time.getMonth()+1):time.getMonth(),
+        Day = time.getDate()<9?"0"+time.getDate():time.getDate(),
+        Time = time.toTimeString().substr(0,8)
+    return FullYear + Month + Day +' ' +Time
+}
+
 export default {
     name: "UnityTrace",
     components: {
         // chart,
         "chart-a": chart_a,
-        "chart-b": chart_b
+        "chart-b": chart_b,
+        "chart-c": chart_c,
     },
     data() {
         return {
-            options: {
-                a: 9,
-                b: 8
-            },
+            dateArr: [],
+            animalTempArr: [],
+            envTempArr: [],
+            batteryArr: [],
             pickerOptions,
-            value2: null
+            value2: null,
+            timer_1: null,
+            SData: formatTime( new Date(new Date().getTime() - 3600 * 1000 * 6) ), // 默认最近六小时 
+            EData: formatTime( new Date() )
         };
     },
-    created() {},
+    created() {
+        // 一分钟更新一次   后端10分钟更新一次数据
+        this.getReportList({start:this.SData, end:this.EData})
+        this.timer_1 = setInterval(() => {
+            // this.getReportList({start:this.SData, end:this.EData})
+            console.log("getReportList")
+        }, 1000 * 60);
+    },
     mounted() {},
-    beforeDestroy() {},
+    beforeDestroy() {
+        window.clearInterval(this.timer_1)
+    },
     methods: {
         // 事件选择器值改变
         pickerChange(value) {
-            console.log(value);
+            let SData = formatTime(value[0])
+            let EData = formatTime(value[1])
+            this.SData = SData
+            this.EData = EData
+            console.log(SData, EData)
+            this.getReportList({start: SData, end: EData})
         },
         // 请求个体数据
-        getReportList() {
-            reqReportList()
+        getReportList(data) {
+            reqReportList(data)
                 .then(res => {
-                    console.log(res);
+                    let dateArr = [], 
+                        animalTempArr = [],
+                        envTempArr = [],
+                        batteryArr = []
+                    res.forEach((item, index) => {
+                        dateArr.push(item.created)
+                        animalTempArr.push(item.animalTemp)
+                        batteryArr.push(item.battery*100)
+                        envTempArr.push(item.envTemp)
+                    });
+                    this.dateArr = dateArr
+                    this.animalTempArr = animalTempArr
+                    this.envTempArr = envTempArr
+                    this.batteryArr = batteryArr
+
                 })
                 .catch(err => {
-                    console.log("登录失败", err);
+                    console.log( err);
                 });
         },
     }
@@ -175,6 +236,16 @@ export default {
             margin-top: 30px;
             margin-bottom: 20px;
         }
+        .charts{
+            border-top: 1px solid #ccc;
+            padding-top: 25px;
+        }
+        .hint{
+            color: #555;
+            font-size: 25px;
+            padding-left: 25%;
+            padding-top: 30px;
+        }
     }
 }
 </style>

src/views/groupManagment/UnityTrace/charts/chart2.vue

@@ -1,42 +1,44 @@
 <template>
-    <div class="chart2">
+    <div class="chart_a">
         
-        <div id="chart2" style="width: 80%;height:400px;">999</div>
+        <div id="chart_a" style="width: 80%;height:400px;"></div>
     </div>
 </template>
 
 <script>
 export default {
-    name: "chart2",
-   
     data() {
         return {
             orgOptions: {},
-            subtext: "副标题"
+            // subtext: "副标题"
         };
     },
+    props: {
+         dateArr:{type:Array},
+         data:{type:Array}
+     },
     created() {
         
     },
-     props: {
-         options:{type: Object}
-     },
-        
+    watch: {
+        dateArr(nVal,oVal) {
+            this.drawChart();
+        }
+    },
     mounted() {
-        console.log(this.options)
         this.drawChart();
     },
     methods: {
         drawChart() {
             // 基于准备好的dom，初始化echarts实例
             let myChart = this.$echarts.init(
-                document.getElementById('chart2')
+                document.getElementById('chart_a')
             );
             // 指定图表的配置项和数据
             let option = {
                 title: {
-                    text: "耳根温度  36.4℃",
-                    subtext: this.subtext,
+                    text: "耳根温度",
+                    // subtext: this.subtext,
                     left: 100
                 },
                 tooltip: {
@@ -74,15 +76,7 @@ export default {
                 xAxis: {
                     type: "category",
                     boundaryGap: false,
-                    data: [
-                        "七分钟前",
-                        "六分钟前",
-                        "五分钟前",
-                        "四分钟前",
-                        "三分钟前",
-                        "两分钟前",
-                        "当前"
-                    ]
+                    data: this.dateArr
                 },
                 yAxis: {
                     type: "value",
@@ -95,7 +89,7 @@ export default {
                     {
                         name: "耳温",
                         type: "line",
-                        data: [32.5, 32.6, 32.4, 32.5, 32.4, 32.6, 32.4],
+                        data: this.data,
                         markPoint: {
                             data: [
                                 { type: "max", name: "最大值" },

src/views/groupManagment/UnityTrace/charts/chart1.vue

@@ -1,34 +1,40 @@
 <template>
-    <div class="hello">
-        <div id="chart_1" style="width: 80%;height:400px;"></div>
+    <div class="chart_b">
+        <div id="chart_b" style="width: 80%;height:400px;"></div>
     </div>
 </template>
 
 <script>
 export default {
-    name: "HelloWorld",
-    props: [
-        'tagId'
-    ],
     data() {
         return {
-            orgOptions: {}
+            orgOptions: {},
+            // subtext: "副标题"
         };
     },
+    created() {},
+    props: {
+        dateArr:{type:Array},
+        data:{type:Array}
+    },
+    watch: {
+        dateArr(nVal,oVal) {
+            this.drawChart();
+        }
+    },
+
     mounted() {
         this.drawChart();
     },
     methods: {
         drawChart() {
             // 基于准备好的dom，初始化echarts实例
-            let myChart = this.$echarts.init(
-                document.getElementById("chart_1")
-            );
+            let myChart = this.$echarts.init(document.getElementById("chart_b"));
             // 指定图表的配置项和数据
             let option = {
                 title: {
-                    text: "耳根温度  36.4℃",
-                    subtext: "纯属虚构",
+                    text: "环境温度",
+                    // subtext: this.subtext,
                     left: 100
                 },
                 tooltip: {
@@ -66,15 +72,7 @@ export default {
                 xAxis: {
                     type: "category",
                     boundaryGap: false,
-                    data: [
-                        "七分钟前",
-                        "六分钟前",
-                        "五分钟前",
-                        "四分钟前",
-                        "三分钟前",
-                        "两分钟前",
-                        "当前"
-                    ]
+                    data: this.dateArr || []
                 },
                 yAxis: {
                     type: "value",
@@ -87,7 +85,8 @@ export default {
                     {
                         name: "耳温",
                         type: "line",
-                        data: [32.5, 32.6, 32.4, 32.5, 32.4, 32.6, 32.4],
+                        // data: [32.5, 32.6, 32.4, 32.5, 32.4, 32.6, 32.4],
+                        data: this.data,
                         markPoint: {
                             data: [
                                 { type: "max", name: "最大值" },
@@ -108,9 +107,4 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.hello {
-    .chart {
-        width: 100%;
-    }
-}
 </style>

src/views/groupManagment/UnityTrace/charts/chart_c.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="chart_c">
+        <div id="chart_c" style="width: 80%;height:400px;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            orgOptions: {},
+            // subtext: "副标题"
+        };
+    },
+    created() {},
+    props: {
+        dateArr:{type:Array},
+        data:{type:Array}
+    },
+    watch: {
+        dateArr(nVal,oVal) {
+            this.drawChart();
+        }
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(document.getElementById("chart_c"));
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    text: "电池电量",
+                    // subtext: this.subtext,
+                    left: 100
+                },
+                tooltip: {
+                    trigger: "axis"
+                },
+                toolbox: {
+                    show: true,
+                    feature: {
+                        dataZoom: {
+                            yAxisIndex: "none"
+                        },
+                        dataView: { readOnly: false },
+                        magicType: { type: ["line", "bar"] },
+                        restore: {},
+                        saveAsImage: {}
+                    }
+                },
+                color: {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                        {
+                            offset: 0,
+                            color: "red" // 0% 处的颜色
+                        },
+                        {
+                            offset: 1,
+                            color: "blue" // 100% 处的颜色
+                        }
+                    ]
+                },
+                xAxis: {
+                    type: "category",
+                    boundaryGap: false,
+                    data: this.dateArr
+                },
+                yAxis: {
+                    type: "value",
+                    axisLabel: {
+                        formatter: "{value} %"
+                    },
+                    scale: true
+                },
+                series: [
+                    {
+                        name: "电量",
+                        type: "line",
+                        // data: [32.5, 32.6, 32.4, 32.5, 32.4, 32.6, 32.4],
+                        data: this.data,
+                        markPoint: {
+                            data: [
+                                { type: "max", name: "最大值" },
+                                { type: "min", name: "最小值" }
+                            ]
+                        },
+                        markLine: {
+                            data: [{ type: "average", name: "平均值" }]
+                        }
+                    }
+                ]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>