From ecb8f63a6c8aa89ec4203d4adf520d4fbbcb7557 Mon Sep 17 00:00:00 2001
From: lijunjie <jiee17@163.com>
Date: Wed, 7 Sep 2022 14:55:32 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=8B=E7=8E=AF=E6=B8=B2=E6=9F=93=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/Http/Controllers/IndexController.php |  18 +-
 resources/views/http/lora2.blade.php     |  53 +-
 resources/views/http/lora22.blade.php    | 618 +++++++++++++++++++++++
 3 files changed, 665 insertions(+), 24 deletions(-)
 create mode 100644 resources/views/http/lora22.blade.php

diff --git a/app/Http/Controllers/IndexController.php b/app/Http/Controllers/IndexController.php
index b1cb1a3..144bb44 100644
--- a/app/Http/Controllers/IndexController.php
+++ b/app/Http/Controllers/IndexController.php
@@ -326,9 +326,21 @@ class IndexController extends BaseController
     public function loraDeviceList()
     {
         return [
-            '设备1',
-            '设备2',
-            '设备3',
+            [
+                'name' => '设备1',
+                'mac' => '61',
+                'online' => 0,
+            ],
+            [
+                'name' => '设备2',
+                'mac' => '62',
+                'online' => 0,
+            ],
+            [
+                'name' => '设备3',
+                'mac' => '63',
+                'online' => 0,
+            ],
         ];
     }
 
diff --git a/resources/views/http/lora2.blade.php b/resources/views/http/lora2.blade.php
index f98bac8..6f4ffb2 100644
--- a/resources/views/http/lora2.blade.php
+++ b/resources/views/http/lora2.blade.php
@@ -14,7 +14,13 @@
     </button>
     <div id="app">
         <div v-for="device in device_list">
-            @{{ device }}
+            <div>@{{device.name}}</div>
+            <div v-if="device.online == 1">
+                在线
+            </div>
+            <div v-else>
+                离线
+            </div>
         </div>
     </div>
 </div>
@@ -32,14 +38,14 @@
     const app = {
         data() {
             return {
-                device_list: []
+                device_list: [],
+                aaaa:0,
             }
         },
         mounted() {
             var _this = this;
             axios
                 .get('/loraDeviceList')
-                // .then(response => (this.info = response.data))
                 .then(function (response) {
                     device_list = response.data
                     _this.device_list = device_list;
@@ -51,14 +57,15 @@
             // 每隔5分钟定时刷新
             this.timer = setInterval(() => {
                 this.getFxItemlist();
-            }, 1000 * 5)
+            }, 1000 * 3)
         },
         beforeDestroy() {
             clearInterval(this.timer);
         },
         methods: {
             getFxItemlist() {
-
+                this.device_list = device_list
+                this.$forceUpdate();
             }
         }
     }
@@ -543,37 +550,41 @@
 
         let special_compare_data = [];
         setInterval(function () {
-            if (show_type != 2) {
-                if (clear == 1) {
-                    special_compare_data = [];
-                    clear = 0;
-                }
-
-                return;
-            }
+            // if (show_type != 2) {
+            //     if (clear == 1) {
+            //         special_compare_data = [];
+            //         clear = 0;
+            //     }
+            //
+            //     return;
+            // }
 
 
             let chart_data = [];
             let expire = 0;
             $.get('/getSpecialCompare?compare_type=' + compare_type).done(function (rawData) {
                 //追加数据
-                device_list.forEach(function (item) {
-                    let device_data = rawData[item];
+                device_list.forEach(function (item, key) {
+                    let name = item.name;
+                    let device_data = rawData[name];
                     if (device_data) {
-                        if (special_compare_data[item]) {
-                            device_data.forEach(value => special_compare_data[item].push(value));
+                        device_list[key].online = 1
+                        if (special_compare_data[name]) {
+                            device_data.forEach(value => special_compare_data[name].push(value));
                         } else {
                             device_data.forEach(function (value) {
-                                special_compare_data[item] = [value]
+                                special_compare_data[name] = [value]
                             });
                         }
 
-                        if (special_compare_data[item].length > 5) {
-                            if (special_compare_data[item][0][0] > expire) {
-                                expire = special_compare_data[item][0][0];
+                        if (special_compare_data[name].length > 5) {
+                            if (special_compare_data[name][0][0] > expire) {
+                                expire = special_compare_data[name][0][0];
                             }
 
                         }
+                    } else {
+                        device_list[key].online = 0
                     }
                 })
 
diff --git a/resources/views/http/lora22.blade.php b/resources/views/http/lora22.blade.php
new file mode 100644
index 0000000..6f4ffb2
--- /dev/null
+++ b/resources/views/http/lora22.blade.php
@@ -0,0 +1,618 @@
+<!DOCTYPE html>
+<html lang="zh-CN" style="height: 100%">
+<head>
+    <meta charset="utf-8">
+    <script type="text/javascript" src="/script/jquery.min.js"></script>
+    <script type="text/javascript" src="/script/vue.js"></script>
+    <script src="/script/axios.min.js"></script>
+</head>
+<body style="height: 100%; margin: 0">
+
+<div>
+    <button onclick="hideDiv()">
+        隐藏
+    </button>
+    <div id="app">
+        <div v-for="device in device_list">
+            <div>@{{device.name}}</div>
+            <div v-if="device.online == 1">
+                在线
+            </div>
+            <div v-else>
+                离线
+            </div>
+        </div>
+    </div>
+</div>
+<div id="container1" style="height: 60%;"></div>
+<div id="container2" style="height: 40%;"></div>
+<div id="container3" style="height: 100%;"></div>
+
+<script type="text/javascript" src="/script/jquery.min.js"></script>
+<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
+
+
+<script type="text/javascript">
+    var device_list = [];
+
+    const app = {
+        data() {
+            return {
+                device_list: [],
+                aaaa:0,
+            }
+        },
+        mounted() {
+            var _this = this;
+            axios
+                .get('/loraDeviceList')
+                .then(function (response) {
+                    device_list = response.data
+                    _this.device_list = device_list;
+                })
+                .catch(function (error) { // 请求失败处理
+                    console.log(error);
+                });
+
+            // 每隔5分钟定时刷新
+            this.timer = setInterval(() => {
+                this.getFxItemlist();
+            }, 1000 * 3)
+        },
+        beforeDestroy() {
+            clearInterval(this.timer);
+        },
+        methods: {
+            getFxItemlist() {
+                this.device_list = device_list
+                this.$forceUpdate();
+            }
+        }
+    }
+
+    Vue.createApp(app).mount('#app')
+
+
+    var mac = '616162626363';
+    var clear = 0;
+    //默认显示各项对比
+    var show_type = 1;
+    //1血氧
+    var compare_type = 1;
+
+    var dom1 = document.getElementById('container1');
+    var dom2 = document.getElementById('container2');
+    var dom3 = document.getElementById('container3');
+
+    var data_blood = [];
+    var data_temperature = [];
+    var data_heart = [];
+    var data_humidity = [];
+    var data_total = [];
+
+    buildChart1(dom1);
+    buildChart2(dom2);
+    buildChart3(dom3);
+    $("#container3").hide();
+
+    function hideDiv() {
+        $("#container1").toggle();
+        $("#container2").toggle();
+        $("#container3").toggle();
+
+        clear = 1
+        show_type = (show_type == 1) ? 2 : 1;
+    }
+
+    /**
+     * 各项对比
+     * @param dom
+     */
+    function buildChart1(dom) {
+        var myChart = echarts.init(dom, 'dark', {
+            renderer: 'canvas',
+            useDirtyRect: false
+        });
+
+        var option = {
+            color: ['#2ec7c9', '#5ab1ef', '#f5994e', '#c05050', '#c14089', '#9a7fd1'],
+            grid: {
+                left: '25%'
+            },
+            tooltip: {
+                trigger: 'axis'
+            },
+            legend: {
+                data: [
+                    {
+                        name: '血氧',
+                        textStyle: {
+                            color: 'auto'
+                        }
+                    },
+                    {
+                        name: '温度',
+                        textStyle: {
+                            color: 'auto'
+                        }
+                    },
+                    {
+                        name: '心率',
+                        textStyle: {
+                            color: 'auto'
+                        }
+                    },
+                    {
+                        name: '湿度',
+                        textStyle: {
+                            color: 'auto'
+                        }
+                    },
+                    {
+                        name: '总体',
+                        textStyle: {
+                            color: 'auto'
+                        }
+                    }
+                ],
+                textStyle: {
+                    fontSize: 20
+                }
+            },
+            xAxis: {
+                type: 'time',
+                name: '时间（/s）',
+                axisLabel: {
+                    fontSize: 16,
+                    formatter: function (value) {
+                        return echarts.format.formatTime('mm:ss', new Date(value));
+                    }
+                },
+                nameTextStyle: {
+                    fontSize: 16
+                }
+            },
+            yAxis: [
+                {
+                    name: '血氧',
+                    min: 0,
+                    max: 100,
+                    position: 'left',
+                    nameTextStyle: {
+                        align: 'right',
+                        color: '#2ec7c9',
+                        fontSize: 16
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#2ec7c9'
+                        }
+                    },
+                    axisLabel: {
+                        formatter: '{value}%',
+                        color: '#2ec7c9',
+                        fontSize: 16
+                    },
+                },
+                {
+                    type: 'value',
+                    name: '温度',
+                    min: 30,
+                    max: 45,
+                    position: 'left',
+                    offset: 50,
+                    nameTextStyle: {
+                        align: 'right',
+                        color: '#5ab1ef',
+                        fontSize: 16
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#5ab1ef'
+                        }
+                    },
+                    axisLabel: {
+                        formatter: '{value}°C',
+                        color: '#5ab1ef',
+                        fontSize: 16
+                    },
+                },
+                {
+                    type: 'value',
+                    name: '心率',
+                    min: 0,
+                    max: 150,
+                    position: 'left',
+                    offset: 100,
+                    nameTextStyle: {
+                        align: 'right',
+                        color: '#f5994e',
+                        fontSize: 16
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#f5994e'
+                        }
+                    },
+                    axisLabel: {
+                        formatter: '{value}次',
+                        color: '#f5994e',
+                        fontSize: 16
+                    },
+                },
+                {
+                    type: 'value',
+                    name: '湿度',
+                    min: 0,
+                    max: 100,
+                    position: 'left',
+                    offset: 150,
+                    nameTextStyle: {
+                        align: 'right',
+                        color: '#c05050',
+                        fontSize: 16
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#c05050'
+                        }
+                    },
+                    axisLabel: {
+                        formatter: '{value}%',
+                        color: '#c05050',
+                        fontSize: 16
+                    },
+                },
+                {
+                    type: 'value',
+                    name: '总体',
+                    min: 0,
+                    max: 100,
+                    position: 'left',
+                    offset: 200,
+                    nameTextStyle: {
+                        align: 'right',
+                        color: '#c14089',
+                        fontSize: 16
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#c14089'
+                        }
+                    },
+                    axisLabel: {
+                        formatter: '{value}%',
+                        color: '#c14089',
+                        fontSize: 16
+                    },
+                }
+            ],
+            series: [
+                {
+                    name: '血氧',
+                    type: 'scatter',
+                    symbolSize: 10,
+                    yAxisIndex: 0,
+                    tooltip: {
+                        valueFormatter: (value) => value.toFixed(2) + ' %'
+                    }
+                },
+                {
+                    name: '温度',
+                    type: 'scatter',
+                    symbolSize: 10,
+                    yAxisIndex: 1,
+                    tooltip: {
+                        valueFormatter: (value) => value.toFixed(2) + ' ℃'
+                    }
+                },
+                {
+                    name: '心率',
+                    type: 'scatter',
+                    symbolSize: 10,
+                    yAxisIndex: 2,
+                    tooltip: {
+                        valueFormatter: (value) => value.toFixed(2) + ' 次'
+                    }
+                },
+                {
+                    name: '湿度',
+                    type: 'scatter',
+                    symbolSize: 10,
+                    yAxisIndex: 3,
+                    tooltip: {
+                        valueFormatter: (value) => value.toFixed(2) + ' %'
+                    }
+                },
+                {
+                    name: '总体',
+                    type: 'line',
+                    smooth: true,
+                    tooltip: {
+                        valueFormatter: (value) => value.toFixed(2) + ' %'
+                    }
+                }
+            ],
+
+        };
+
+
+        if (option && typeof option === 'object') {
+            myChart.setOption(option);
+        }
+
+        window.addEventListener('resize', myChart.resize);
+
+
+        setInterval(function () {
+            if (show_type != 1) {
+                if (clear == 1) {
+                    data_blood = []
+                    data_temperature = [];
+                    data_heart = [];
+                    data_humidity = [];
+                    data_total = [];
+                    clear = 0;
+                }
+
+                return;
+            }
+
+            $.get('/loraData2?mac=' + mac).done(function (_rawData) {
+                let limit = 5
+                if (data_blood.length >= limit) {
+                    data_blood.shift();
+                }
+                if (data_temperature.length >= limit) {
+                    data_temperature.shift();
+                }
+                if (data_heart.length >= limit) {
+                    data_heart.shift();
+                }
+                if (data_humidity.length >= limit) {
+                    data_humidity.shift();
+                }
+                if (data_total.length >= 10 * limit) {
+                    data_total.splice(0, 10);
+                }
+                _rawData.blood.forEach(value => data_blood.push(value));
+                _rawData.temperature.forEach(value => data_temperature.push(value));
+                _rawData.heart.forEach(value => data_heart.push(value));
+                _rawData.humidity.forEach(value => data_humidity.push(value));
+                _rawData.total_data.forEach(value => data_total.push(value));
+
+                myChart.setOption({
+                    series: [
+                        {
+                            name: '血氧',
+                            data: data_blood
+                        }, {
+                            name: '温度',
+                            data: data_temperature
+                        }, {
+                            name: '心率',
+                            data: data_heart
+                        }, {
+                            name: '湿度',
+                            data: data_humidity
+                        },
+                        {
+                            name: '总体',
+                            data: data_total
+                        }
+                    ]
+                });
+            });
+
+        }, 2000);
+    }
+
+    /**
+     * 雷达图
+     * @param dom
+     */
+    function buildChart2(dom) {
+        var myChart = echarts.init(dom, 'dark', {
+            renderer: 'canvas',
+            useDirtyRect: false
+        });
+
+        var option = {
+            color: ['#2ec7c9', '#5ab1ef', '#f5994e', '#c05050', '#c14089', '#9a7fd1'],
+
+            radar: {
+                // shape: 'circle',
+                indicator: [
+                    {name: '血氧', max: 100},
+                    {name: '温度', max: 45},
+                    {name: '心率', max: 150},
+                    {name: '湿度', max: 100},
+                ],
+                axisName: {
+                    fontSize: 18,
+                    color: '#2ec7c9',
+                },
+            },
+            series: [
+                {
+                    type: 'radar',
+                }
+            ]
+        };
+
+        if (option && typeof option === 'object') {
+            myChart.setOption(option);
+        }
+
+        window.addEventListener('resize', myChart.resize);
+
+        setInterval(buildData, 1000 * 5);
+
+        function buildData() {
+            if (show_type != 1 || data_blood.length == 0) {
+                return;
+            }
+
+            let blood = data_blood.slice(-1)[0][1];
+            let temperature = data_temperature.slice(-1)[0][1];
+            let heart = data_temperature.slice(-1)[0][1];
+            let humidity = data_humidity.slice(-1)[0][1];
+
+            myChart.setOption({
+                series: [
+                    {
+                        data: [
+                            {
+                                value: [blood, temperature, heart, humidity],
+                                areaStyle: {
+                                    color: 'rgba(255, 228, 52, 0.6)'
+                                },
+                                label: {
+                                    show: true,
+                                    textStyle: {
+                                        color: '#2ec7c9',
+                                        fontSize: 16,
+                                    },
+                                    formatter: function (params) {
+                                        return params.value;
+                                    }
+                                }
+                            }
+
+                        ]
+                    }
+                ]
+            });
+        }
+    }
+
+    function buildChart3(dom) {
+        var myChart = echarts.init(dom, 'dark', {
+            renderer: 'canvas',
+            useDirtyRect: false
+        });
+
+        var option = {
+            tooltip: {
+                trigger: 'axis'
+            },
+            legend: {
+                data: ['设备1', '设备2', '设备3',],
+                textStyle: {
+                    fontSize: 20
+                }
+            },
+            xAxis: {
+                type: 'time',
+                name: '时间（/s）',
+                axisLabel: {
+                    fontSize: 16,
+                    formatter: function (value) {
+                        return echarts.format.formatTime('mm:ss', new Date(value));
+                    }
+                },
+                nameTextStyle: {
+                    fontSize: 16
+                }
+            },
+            yAxis: [
+                {
+                    type: 'value',
+                    min: 0,
+                    max: 100,
+                    nameTextStyle: {
+                        align: 'right',
+                        fontSize: 16
+                    },
+                    axisLine: {
+                        show: true,
+                    },
+                    axisLabel: {
+                        formatter: '{value}%',
+                        fontSize: 16
+                    },
+                }
+            ],
+
+        };
+
+
+        if (option && typeof option === 'object') {
+            myChart.setOption(option);
+        }
+
+        window.addEventListener('resize', myChart.resize);
+
+        let special_compare_data = [];
+        setInterval(function () {
+            // if (show_type != 2) {
+            //     if (clear == 1) {
+            //         special_compare_data = [];
+            //         clear = 0;
+            //     }
+            //
+            //     return;
+            // }
+
+
+            let chart_data = [];
+            let expire = 0;
+            $.get('/getSpecialCompare?compare_type=' + compare_type).done(function (rawData) {
+                //追加数据
+                device_list.forEach(function (item, key) {
+                    let name = item.name;
+                    let device_data = rawData[name];
+                    if (device_data) {
+                        device_list[key].online = 1
+                        if (special_compare_data[name]) {
+                            device_data.forEach(value => special_compare_data[name].push(value));
+                        } else {
+                            device_data.forEach(function (value) {
+                                special_compare_data[name] = [value]
+                            });
+                        }
+
+                        if (special_compare_data[name].length > 5) {
+                            if (special_compare_data[name][0][0] > expire) {
+                                expire = special_compare_data[name][0][0];
+                            }
+
+                        }
+                    } else {
+                        device_list[key].online = 0
+                    }
+                })
+
+                //删除过期时间，构建图表数据
+                for (key in special_compare_data) {
+                    if (special_compare_data[key]
+                        && special_compare_data[key].length > 0
+                        && special_compare_data[key][0][0] <= expire) {
+                        special_compare_data[key].shift()
+                    }
+
+                    chart_data.push({
+                        name: key,
+                        data: special_compare_data[key],
+                        type: 'line',
+                        smooth: true,
+                    })
+                }
+
+                myChart.setOption({
+                    series: chart_data
+                });
+            });
+
+        }, 1000 * 2);
+    }
+
+
+</script>
+</body>
+</html>