渲染头部

public/script/http/lora2.js

@@ -0,0 +1,317 @@
+var dom1 = document.getElementById('container1');
+var dom2 = document.getElementById('container2');
+lineGraph(dom1, '温度', '℃')
+lineGraph2(dom2, '血氧', '%')
+
+function lineGraph(dom, title, unit){
+    var myChart = echarts.init(dom, null, {
+    renderer: 'canvas',
+    useDirtyRect: false
+});
+var app = {};
+var ROOT_PATH = '';
+var option;
+var dataAll = [];
+
+$.get(
+    ROOT_PATH + '/loraData',
+    function (_rawData) {
+        _rawData.forEach(value => dataAll.push(value));
+        run(_rawData);
+    }
+);
+function run(_rawData) {
+    _rawData.unshift(["Income","Life Expectancy","Population","Country","Year"])
+    // var countries = ['Australia', 'Canada', 'China', 'Cuba', 'Finland', 'France', 'Germany', 'Iceland', 'India', 'Japan', 'North Korea', 'South Korea', 'New Zealand', 'Norway', 'Poland', 'Russia', 'Turkey', 'United Kingdom', 'United States'];
+    const countries = [title];
+    const datasetWithFilters = [];
+    const seriesList = [];
+    echarts.util.each(countries, function (country) {
+        var datasetId = 'dataset_' + country;
+        datasetWithFilters.push({
+            id: datasetId,
+            fromDatasetId: 'dataset_raw',
+            transform: {
+                type: 'filter',
+                config: {
+                    and: [
+                        // { dimension: 'Year', gte: 1950 },
+                        { dimension: 'Country', '=': country }
+                    ]
+                }
+            }
+        });
+        seriesList.push({
+            type: 'line',
+            datasetId: datasetId,
+            showSymbol: false,
+            smooth: true,
+            name: country,
+            endLabel: {
+                show: true,
+                formatter: function (params) {
+                    return params.value[3] + ': ' + params.value[0] + unit;
+                }
+            },
+            labelLayout: {
+                moveOverlap: 'shiftY'
+            },
+            emphasis: {
+                focus: 'series'
+            },
+            encode: {
+                x: 'Year',
+                y: 'Income',
+                label: ['Country', 'Income'],
+                itemName: 'Year',
+                tooltip: ['Income']
+            }
+        });
+    });
+    option = {
+        animationDuration: 10000,
+        dataset: [
+            {
+                id: 'dataset_raw',
+                source: _rawData
+            },
+            ...datasetWithFilters
+        ],
+        tooltip: {
+            order: 'valueDesc',
+            trigger: 'axis'
+        },
+        xAxis: {
+            type: 'category',
+            nameLocation: 'middle'
+        },
+        yAxis: [
+            {
+                scale: false,
+                name: '体温',
+                min: 30,
+                max: 40,
+            },
+            {
+                type: 'value',
+                name: '血氧',
+                min: 0,
+                max: 100,
+                position: 'left',
+                offset: 30,
+                axisLabel: {
+                    formatter: '{value} °C'
+                }
+            }
+        ],
+        grid: {
+            right: 140
+        },
+        series: seriesList
+    };
+    myChart.setOption(option);
+}
+
+setInterval(function () {
+    $.get(
+        ROOT_PATH + '/loraData?item=' + title,
+        function (_rawData2) {
+
+            if (dataAll.length > 40){
+                dataAll.shift();
+                dataAll.shift();
+            }
+
+            _rawData2.forEach(value => dataAll.push(value));
+
+            _rawData = [["Income","Life Expectancy","Population","Country","Year"]];
+            dataAll.forEach(value => _rawData.push(value));
+
+            myChart.setOption({
+                dataset: [
+                    {
+                        source: _rawData
+                    }
+                ],
+            });
+
+            let original = '';
+            dataAll.forEach((elem, index) => {
+                original += elem[3] + elem[0];
+                if (elem[3] == "血氧") {
+                    original += '%'
+                } else {
+                    original += '℃'
+                }
+                original += ' '
+            })
+
+            $(".sound-code-chunk-default-content").html(original);
+
+
+        }
+    );
+
+
+
+}, 1000);
+
+
+if (option && typeof option === 'object') {
+    myChart.setOption(option);
+}
+
+window.addEventListener('resize', myChart.resize);
+
+}
+
+function lineGraph2(dom, title, unit){
+    var myChart = echarts.init(dom, null, {
+        renderer: 'canvas',
+        useDirtyRect: false
+    });
+    var app = {};
+    var ROOT_PATH = '';
+    var option;
+    var dataAll = [];
+
+    $.get(
+        ROOT_PATH + '/loraData',
+        function (_rawData) {
+            _rawData.forEach(value => dataAll.push(value));
+            run(_rawData);
+        }
+    );
+    function run(_rawData) {
+        _rawData.unshift(["Income","Life Expectancy","Population","Country","Year"])
+        // var countries = ['Australia', 'Canada', 'China', 'Cuba', 'Finland', 'France', 'Germany', 'Iceland', 'India', 'Japan', 'North Korea', 'South Korea', 'New Zealand', 'Norway', 'Poland', 'Russia', 'Turkey', 'United Kingdom', 'United States'];
+        const countries = [title];
+        const datasetWithFilters = [];
+        const seriesList = [];
+        echarts.util.each(countries, function (country) {
+            var datasetId = 'dataset_' + country;
+            datasetWithFilters.push({
+                id: datasetId,
+                fromDatasetId: 'dataset_raw',
+                transform: {
+                    type: 'filter',
+                    config: {
+                        and: [
+                            // { dimension: 'Year', gte: 1950 },
+                            { dimension: 'Country', '=': country }
+                        ]
+                    }
+                }
+            });
+            seriesList.push({
+                type: 'line',
+                datasetId: datasetId,
+                showSymbol: false,
+                smooth: true,
+                name: country,
+                endLabel: {
+                    show: true,
+                    formatter: function (params) {
+                        return params.value[3] + ': ' + params.value[0] + unit;
+                    }
+                },
+                labelLayout: {
+                    moveOverlap: 'shiftY'
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                encode: {
+                    x: 'Year',
+                    y: 'Income',
+                    label: ['Country', 'Income'],
+                    itemName: 'Year',
+                    tooltip: ['Income']
+                }
+            });
+        });
+        option = {
+            animationDuration: 10000,
+            dataset: [
+                {
+                    id: 'dataset_raw',
+                    source: _rawData
+                },
+                ...datasetWithFilters
+            ],
+            tooltip: {
+                order: 'valueDesc',
+                trigger: 'axis'
+            },
+            xAxis: {
+                type: 'category',
+                nameLocation: 'middle'
+            },
+            yAxis: {
+                scale: false,
+                name: 'Income'
+            },
+            grid: {
+                right: 140
+            },
+            color:[
+                'rgba(231,82,27,0.94)'
+            ],
+            series: seriesList
+        };
+        myChart.setOption(option);
+    }
+
+    setInterval(function () {
+        $.get(
+            ROOT_PATH + '/loraData?item=' + title,
+            function (_rawData2) {
+
+                if (dataAll.length > 40){
+                    dataAll.shift();
+                    dataAll.shift();
+                }
+
+                _rawData2.forEach(value => dataAll.push(value));
+
+                _rawData = [["Income","Life Expectancy","Population","Country","Year"]];
+                dataAll.forEach(value => _rawData.push(value));
+
+                myChart.setOption({
+                    dataset: [
+                        {
+                            source: _rawData
+                        }
+                    ],
+                });
+
+                let original = '';
+                dataAll.forEach((elem, index) => {
+                    original += elem[3] + elem[0];
+                    if (elem[3] == "血氧") {
+                        original += '%'
+                    } else {
+                        original += '℃'
+                    }
+                    original += ' '
+                })
+
+                $(".sound-code-chunk-default-content").html(original);
+
+
+            }
+        );
+
+
+
+    }, 1000);
+
+
+    if (option && typeof option === 'object') {
+        myChart.setOption(option);
+    }
+
+    window.addEventListener('resize', myChart.resize);
+
+}
+

public/style/http/lora2.css

@@ -0,0 +1,105 @@
+* {margin:0; padding:0;}
+html,body{height:100%;}
+.box {
+    height:100%;
+    background: #020723;
+    background-image:url("/image/lora2/background1.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+}
+
+html {
+    /*在根元素中计算基准值字体大小，设备宽度 / 设计稿宽度 * 100*/
+    font-size: calc(100vw /1920 * 100 );
+}
+.box{
+    font-size: 0.18rem;
+}
+/*头部*/
+.title{
+    height: 0.64rem;
+    display: -webkit-flex;
+    display: flex;
+    position: relative;
+}
+.school{
+    width: 2.06rem;
+    height: 0.64rem;
+    position: relative;
+}
+.school-logo{
+    width: 1.68rem;
+    height: 0.43rem;
+    position:absolute;
+    bottom: 0;
+    right: 0;
+    padding:0;
+    margin:0;
+}
+.college{
+    width: 1.71rem;
+}
+.college-text{
+    margin-top: 0.35rem;
+    margin-left: 0.15rem;
+    font-family: Source Han Sans CN;
+    font-size: 0.18rem;
+    font-weight: 400;
+    color: #FFFFFF;
+}
+.menu{
+    position:absolute;
+    left: 0;
+    right: 0;
+    margin:auto;
+    width: 15.43rem;
+    height: 0.64rem;
+    background-image:url("/image/lora2/top.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+}
+
+/*设备列表*/
+.device{
+    width: 2.99rem;
+    height: 18.56rem;
+    padding-top: 0.56rem;
+}
+.device-frame{
+    width: 2.4rem;
+    height: 100%;
+    margin-left: 0.34rem;
+}
+.device-cell1{
+    width: 2.4rem;
+    height: 0.64rem;
+    margin-bottom: 0.1rem;
+    padding-left: 0.36rem;
+
+    background: linear-gradient(90deg, rgba(0,250,255,0.84), rgba(0,250,255,0));
+    border-radius: 0.32rem;
+}
+
+.device-cell2{
+    width: 2.4rem;
+    height: 0.64rem;
+    margin-bottom: 0.1rem;
+    padding: 0.015rem;
+    background: linear-gradient(90deg, rgba(0,250,255,0.5), rgba(0,250,255,0.1));
+    border-radius: 0.32rem;
+}
+.device-cell{
+    width: 100%;
+    height: 100%;
+    background: #101010;
+    border-radius: 0.32rem;
+    background-image:url("/image/lora2/background1.png");
+}
+
+.device-online{
+    width: 0.12rem;
+    height: 0.12rem;
+    background: #31EDB1;
+    border-radius: 0.06rem;
+}
+

resources/views/http/lora2.blade.php

@@ -2,617 +2,68 @@
 <html lang="zh-CN" style="height: 100%">
 <head>
     <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="/style/http/lora2.css">
     <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>
-                离线
+</head>
+<body>
+<div class="box">
+    <div class="title">
+        <div class="school">
+            <img class="school-logo" src="/image/lora2/logo.png">
+        </div>
+        <div class="college">
+            <div class="college-text">
+                信息与计算机学院
             </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
-                        }
-                    ]
-                });
-            });
+        <div class="menu">
 
-        }, 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]
-                            });
-                        }
+        </div>
+    </div>
+    <div class="main">
+{{--        设备列表--}}
+        <div class="device">
+            <div class="device-frame">
+                <div class="device-cell1">
+                    <div>设备1</div>
+                    <div>
+                        <div class="device-online"></div>
+                        <div>在线</div>
+                    </div>
+                </div>
+
+                <div class="device-cell2">
+                    <div class="device-cell">
+
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="diagram">
+{{--            对比图--}}
+            <div class="compare">
 
-                        if (special_compare_data[name].length > 5) {
-                            if (special_compare_data[name][0][0] > expire) {
-                                expire = special_compare_data[name][0][0];
-                            }
+            </div>
+            <div class="compare2">
+{{--                雷达图--}}
+                <div class="radar">
 
-                        }
-                    } else {
-                        device_list[key].online = 0
-                    }
-                })
+                </div>
+{{--                原始数据--}}
+                <div class="original">
 
-                //删除过期时间，构建图表数据
-                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()
-                    }
+                </div>
+            </div>
 
-                    chart_data.push({
-                        name: key,
-                        data: special_compare_data[key],
-                        type: 'line',
-                        smooth: true,
-                    })
-                }
+        </div>
+    </div>
 
-                myChart.setOption({
-                    series: chart_data
-                });
-            });
+</div>
 
-        }, 1000 * 2);
-    }
+</body>
 
+<script type="text/javascript" src="/script/echarts.min.js"></script>
+<script type="text/javascript" src="/script/http/lora2.js"></script>
 
-</script>
-</body>
 </html>

resources/views/http/lora23.blade.php

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title></title>
+</head>
+<style>
+    * {margin:0; padding:0;}
+    html,body{height:100%;}
+    .box {height:100%;background: #020622;}
+
+    html {
+        /*在根元素中计算基准值字体大小，设备宽度 / 设计稿宽度 * 100*/
+        font-size: calc(100vw /1920 * 100 );
+    }
+
+    #box {
+        width: 19.2rem;
+        height: 1rem;
+        background-color: aqua;
+        font-size: 1rem;
+    }
+</style>
+<body>
+<div id="box">
+    测试rem
+
+</div>
+</body>
+</html>