diff --git a/app/Http/Controllers/IndexController.php b/app/Http/Controllers/IndexController.php index d9c932b..c7489b1 100644 --- a/app/Http/Controllers/IndexController.php +++ b/app/Http/Controllers/IndexController.php @@ -11,29 +11,50 @@ class IndexController extends BaseController { return view('http.index'); } - public function index2() - { - return view('http.index2'); - } + public function tabularData() { $request_data = request()->all(); - $vague = 15; + $vague = 2; $datas = [ - 1, 1, 1, 2, 1, 1, 1, - 1, 1, 2, 4, 2, 1, 1, - 1, 2, 4, 6, 4, 2, 1, - 1, 1, 2, 8, 2, 1, 1, - 1, 1, 2, 8, 2, 1, 1, - 1, 1, 2, 8, 2, 1, 1, - 1, 1, 2, 8, 2, 1, 1, - ]; + 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, + 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, + 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, + 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, + 1, 1, 1, 1, 2, 2, 4, 4, 4, 4, 4, 4, 2, 1, 1, 1, 1, 1, 1, 1, 1, 2, 6, 6, 8, 4, 2, 1, 1, 1, 1, 1, + 1, 1, 1, 1, 2, 4, 8, 9, 8, 6, 6, 4, 2, 1, 1, 1, 1, 1, 1, 1, 2, 6, 8, 8, 8, 4, 2, 2, 1, 1, 1, 1, + 1, 1, 1, 2, 4, 6, 8, 9, 8, 6, 6, 4, 2, 2, 1, 1, 1, 1, 1, 1, 2, 6, 8, 8, 8, 8, 4, 2, 1, 1, 1, 1, + 1, 1, 1, 2, 4, 6, 8, 9, 8, 6, 6, 4, 2, 1, 1, 1, 1, 1, 1, 1, 2, 6, 8, 8, 8, 8, 6, 2, 1, 1, 1, 1, + 1, 1, 1, 2, 4, 6, 8, 9, 8, 6, 6, 4, 2, 1, 1, 1, 1, 1, 1, 1, 2, 6, 8, 8, 8, 8, 6, 2, 1, 1, 1, 1, + 1, 1, 1, 2, 4, 6, 8, 9, 8, 6, 6, 4, 2, 1, 1, 1, 1, 1, 1, 1, 2, 6, 8, 8, 8, 8, 6, 2, 1, 1, 1, 1, + 1, 1, 1, 2, 4, 6, 8, 9, 8, 6, 6, 4, 2, 1, 1, 1, 1, 1, 1, 1, 2, 6, 8, 8, 8, 8, 6, 2, 1, 1, 1, 1, + 1, 1, 1, 2, 4, 6, 8, 9, 8, 6, 6, 4, 2, 1, 1, 1, 1, 1, 1, 1, 2, 6, 8, 8, 8, 8, 6, 2, 1, 1, 1, 1, + 1, 1, 1, 2, 4, 6, 8, 9, 8, 6, 6, 4, 2, 1, 1, 1, 1, 1, 1, 1, 2, 6, 8, 8, 8, 8, 6, 2, 1, 1, 1, 1, + 1, 1, 1, 2, 4, 6, 8, 9, 8, 6, 6, 4, 2, 1, 1, 1, 1, 1, 1, 1, 2, 6, 8, 8, 8, 8, 6, 2, 2, 1, 1, 1, + 1, 1, 1, 2, 4, 6, 8, 9, 8, 6, 6, 4, 1, 1, 1, 1, 1, 1, 1, 1, 2, 6, 8, 8, 8, 8, 6, 4, 2, 1, 1, 1, + 1, 1, 1, 2, 4, 6, 8, 9, 8, 6, 6, 4, 2, 1, 1, 1, 1, 1, 1, 1, 2, 6, 8, 8, 8, 8, 6, 4, 2, 1, 1, 1, + 1, 1, 1, 2, 4, 6, 8, 9, 8, 6, 6, 4, 2, 1, 1, 1, 1, 1, 1, 1, 1, 6, 8, 8, 8, 8, 6, 4, 2, 1, 1, 1, + 1, 1, 1, 2, 4, 6, 8, 9, 8, 6, 6, 4, 2, 1, 1, 1, 1, 1, 1, 1, 1, 6, 8, 8, 8, 8, 6, 4, 2, 1, 1, 1, + 1, 1, 1, 2, 4, 6, 8, 9, 8, 6, 6, 4, 2, 1, 1, 1, 1, 1, 1, 1, 2, 6, 8, 8, 8, 8, 6, 4, 2, 1, 1, 1, + 1, 1, 1, 2, 4, 6, 8, 9, 8, 6, 6, 4, 1, 2, 1, 1, 1, 1, 1, 1, 2, 6, 8, 8, 8, 8, 6, 4, 2, 1, 1, 1, + 1, 1, 1, 2, 4, 6, 8, 9, 8, 6, 6, 4, 1, 2, 1, 1, 1, 1, 1, 1, 2, 6, 8, 8, 8, 8, 6, 4, 2, 1, 1, 1, + 1, 1, 1, 2, 4, 6, 8, 9, 8, 6, 6, 4, 1, 2, 1, 1, 1, 1, 1, 1, 2, 6, 8, 8, 8, 8, 6, 4, 2, 1, 1, 1, + 1, 1, 1, 2, 4, 6, 8, 9, 8, 6, 6, 4, 1, 2, 1, 1, 1, 1, 1, 1, 2, 6, 8, 8, 8, 8, 6, 4, 2, 2, 1, 1, + 1, 1, 1, 2, 4, 6, 8, 9, 8, 6, 6, 4, 1, 2, 1, 1, 1, 1, 1, 2, 1, 6, 8, 8, 8, 8, 6, 6, 4, 2, 1, 1, + 1, 1, 1, 2, 4, 6, 8, 9, 8, 6, 6, 4, 1, 2, 1, 1, 1, 1, 1, 2, 4, 6, 8, 8, 8, 8, 6, 6, 4, 2, 1, 1, + 1, 1, 1, 2, 4, 1, 8, 9, 8, 6, 6, 4, 4, 2, 1, 1, 1, 1, 1, 2, 4, 6, 8, 8, 8, 8, 6, 6, 4, 2, 1, 1, + 1, 1, 1, 2, 4, 4, 4, 9, 8, 6, 6, 4, 4, 2, 1, 1, 1, 1, 1, 2, 4, 6, 8, 8, 8, 6, 6, 2, 2, 2, 1, 1, + 1, 1, 1, 1, 1, 2, 2, 4, 4, 6, 6, 4, 2, 2, 1, 1, 1, 1, 1, 2, 4, 6, 4, 4, 4, 2, 2, 2, 1, 1, 1, 1, + 1, 1, 1, 1, 1, 1, 1, 2, 2, 4, 4, 4, 2, 1, 1, 1, 1, 1, 1, 2, 2, 4, 4, 2, 2, 2, 1, 1, 1, 1, 1, 1, + 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4, 2, 1, 1, 1, 1, 1, 1, 1, 1, + 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, + 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, + ]; - $datas2 = []; - for ($i = 0; $i < 49; $i++){ - $datas2[intval($i / 7)][$i % 7] = $datas[$i]; + for ($i = 0; $i < 1024; $i++){ + $datas2[intval($i / 32)][$i % 32] = $datas[$i]; } foreach ($datas2 as $key1 => $data){ @@ -218,4 +239,42 @@ class IndexController extends BaseController } + public function index2() + { + return view('http.index2'); + } + + public function loraData() + { + $request_data = request()->all(); + +// if (!empty($request_data['item']) && $request_data['item'] == '温度'){ +// $temperature = rand(359, 366) / 10; +// +// $data = [[$temperature, 0, 0, "温度", date('m:s')]]; +// +// } elseif (!empty($request_data['item']) && $request_data['item'] == '血氧'){ +// $oxygen = rand(70, 100); +// +// $data = [[$oxygen, 0, 0, "血氧", date('m:s')]]; +// +// } else { +// $temperature = rand(359, 366) / 10; +// $oxygen = rand(70, 100); +// +// $data = [[$temperature, 0, 0, "温度", date('m:s')], +// [$oxygen, 0, 0, "血氧", date('m:s')]]; +// +// } + + $temperature = rand(359, 366) / 10; + $oxygen = rand(70, 100); + + $oxygen = 80 + ((time() % 3) + 1) * 5; + + $data = [[$temperature, 0, 0, "温度", date('m:s')], + [$oxygen, 0, 0, "血氧", date('m:s')]]; + + return $data; + } } diff --git a/public/image/pelma/内容短1.png b/public/image/pelma/内容短1.png deleted file mode 100644 index 154ccc0..0000000 Binary files a/public/image/pelma/内容短1.png and /dev/null differ diff --git a/public/image/pelma/内容长1.png b/public/image/pelma/内容长1.png deleted file mode 100644 index d120e06..0000000 Binary files a/public/image/pelma/内容长1.png and /dev/null differ diff --git a/public/image/pelma/头部1.png b/public/image/pelma/头部1.png deleted file mode 100644 index 974bb94..0000000 Binary files a/public/image/pelma/头部1.png and /dev/null differ diff --git a/public/image/pelma/标题1.png b/public/image/pelma/标题1.png deleted file mode 100644 index 9d06641..0000000 Binary files a/public/image/pelma/标题1.png and /dev/null differ diff --git a/public/image/pelma/足1.png b/public/image/pelma/足1.png deleted file mode 100644 index 1508b06..0000000 Binary files a/public/image/pelma/足1.png and /dev/null differ diff --git a/public/image/pelma/边框1.png b/public/image/pelma/边框1.png deleted file mode 100644 index 04f58d7..0000000 Binary files a/public/image/pelma/边框1.png and /dev/null differ diff --git a/public/script/http/index.js b/public/script/http/index.js index c4cf793..50fc88e 100644 --- a/public/script/http/index.js +++ b/public/script/http/index.js @@ -49,12 +49,16 @@ function pressure(dom, item){ ] }); - var myDate = new Date(); var mytime = myDate.toLocaleTimeString(); let original = mytime + ' '; pressure.forEach((elem, index) => { - original += elem[2] * 64 + ' ' + if (index > 600){ + // console.log(index) + + original += Math.trunc(elem[2] * 100) + ' ' + } + }) $(".sound-code-chunk-default-content").html(original); diff --git a/public/script/http/index2.js b/public/script/http/index2.js index 3b64a28..f43630a 100644 --- a/public/script/http/index2.js +++ b/public/script/http/index2.js @@ -1,253 +1,304 @@ var dom1 = document.getElementById('container1'); -// pressure(dom1, 1); - -/** - * 绘制图 - * @param dom - * @param item - */ -function pressure(dom, item){ - var myChart = echarts.init(dom, null, { - renderer: 'canvas', - useDirtyRect: false - }); - var app = {}; +var dom2 = document.getElementById('container2'); +lineGraph(dom1, '温度', '℃') +lineGraph2(dom2, '血氧', '%') - var option; +function lineGraph(dom, title, unit){ + var myChart = echarts.init(dom, null, { + renderer: 'canvas', + useDirtyRect: false +}); +var app = {}; +var ROOT_PATH = ''; +var option; +var dataAll = []; - let noise = getNoiseHelper(); - let xData = []; - let yData = []; - noise.seed(Math.random()); - function generateData(theta, min, max) { - let data = []; - for (let i = 0; i <= 100; i++) { - xData.push(i); - } - for (let j = 0; j < 100; j++) { - yData.push(j); - } - return data; +$.get( + ROOT_PATH + '/loraData', + function (_rawData) { + _rawData.forEach(value => dataAll.push(value)); + run(_rawData); } - let data = generateData(2, -5, 5); - - setTimer(); - function setTimer () { - let timer = null - $.get('/tabularData?item=' + item).done(function(data) { - if(data){//根据返回状态判断 - let pressure = data.pressure - myChart.setOption({ - series: [ - { - data: pressure - } +); +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 } ] - }); - - - var myDate = new Date(); - var mytime = myDate.toLocaleTimeString(); - let original = mytime + ' '; - pressure.forEach((elem, index) => { - original += elem[2] * 64 + ' ' - }) - - $(".sound-code-chunk-default-content").html(original); - $("#foot-content1").html(data['foot'][0] + '℃'); - $("#foot-content2").html(data['foot'][1] + '%'); - $("#foot-content3").html(data['foot'][2] + '℃'); - $("#foot-content4").html(data['foot'][3] + '%'); - $("#foot-content5").html(data['foot'][4] + '℃'); - $("#foot-content6").html(data['foot'][5] + '%'); - $("#foot-content7").html(data['foot'][6] + '℃'); - $("#foot-content8").html(data['foot'][7] + '%'); - - timer = setTimeout(()=>{ - setTimer () - },5000)//2秒查一下 - } else { - clearTimeout(timer);//清理定时任务 + } } }); - } - - - + 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 = { - tooltip: {}, + animationDuration: 10000, + dataset: [ + { + id: 'dataset_raw', + source: _rawData + }, + ...datasetWithFilters + ], + tooltip: { + order: 'valueDesc', + trigger: 'axis' + }, xAxis: { type: 'category', - data: xData + nameLocation: 'middle' }, yAxis: { - type: 'category', - data: yData + scale: false, + name: 'Income', + min: 30, + max: 40, }, - visualMap: { - show:false, - min: 0, - max: 1, - calculable: true, - realtime: false, - inRange: { - color: [ - // '#313695', - // '#4575b4', - // '#74add1', - // '#abd9e9', - // '#e0f3f8', - // '#ffffbf', - // '#fee090', - // '#fdae61', - // '#f46d43', - // '#d73027', - // '#a50026' - - '#ffffdc', - '#ffffbf', - '#ffff71', - '#fee090', - '#ffc993', - '#fdae61', - '#f87f59', - '#f46d43', - '#e34d45', - '#d73027', - '#a50026', - ] - } + grid: { + right: 140 }, - series: [ - { - name: 'Gaussian', - type: 'heatmap', - data: data, - emphasis: { - itemStyle: { - borderColor: '#333', - borderWidth: 1 - } - }, - progressive: 1000, - animation: false - } - ] + series: seriesList }; -/////////////////////////////////////////////////////////////////////////// -// perlin noise helper from https://github.com/josephg/noisejs -/////////////////////////////////////////////////////////////////////////// - function getNoiseHelper() { - class Grad { - constructor(x, y, z) { - this.x = x; - this.y = y; - this.z = z; - } - dot2(x, y) { - return this.x * x + this.y * y; - } - dot3(x, y, z) { - return this.x * x + this.y * y + this.z * z; - } - } - const grad3 = [ - new Grad(1, 1, 0), - new Grad(-1, 1, 0), - new Grad(1, -1, 0), - new Grad(-1, -1, 0), - new Grad(1, 0, 1), - new Grad(-1, 0, 1), - new Grad(1, 0, -1), - new Grad(-1, 0, -1), - new Grad(0, 1, 1), - new Grad(0, -1, 1), - new Grad(0, 1, -1), - new Grad(0, -1, -1) - ]; - const p = [ - 151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140, - 36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, 23, 190, 6, 148, 247, 120, - 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177, 33, - 88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71, - 134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133, - 230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161, - 1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130, - 116, 188, 159, 86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250, - 124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206, 59, 227, - 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44, - 154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, - 108, 110, 79, 113, 224, 232, 178, 185, 112, 104, 218, 246, 97, 228, 251, 34, - 242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, 14, - 239, 107, 49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121, - 50, 45, 127, 4, 150, 254, 138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243, - 141, 128, 195, 78, 66, 215, 61, 156, 180 - ]; - // To remove the need for index wrapping, double the permutation table length - let perm = new Array(512); - let gradP = new Array(512); - // This isn't a very good seeding function, but it works ok. It supports 2^16 - // different seed values. Write something better if you need more seeds. - function seed(seed) { - if (seed > 0 && seed < 1) { - // Scale the seed out - seed *= 65536; - } - seed = Math.floor(seed); - if (seed < 256) { - seed |= seed << 8; + myChart.setOption(option); +} + +setInterval(function () { + $.get( + ROOT_PATH + '/loraData?item=' + title, + function (_rawData2) { + + if (dataAll.length > 40){ + dataAll.shift(); + dataAll.shift(); } - for (let i = 0; i < 256; i++) { - let v; - if (i & 1) { - v = p[i] ^ (seed & 255); + + _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 { - v = p[i] ^ ((seed >> 8) & 255); + original += '℃' } - perm[i] = perm[i + 256] = v; - gradP[i] = gradP[i + 256] = grad3[v % 12]; - } - } - seed(0); - // ##### Perlin noise stuff - function fade(t) { - return t * t * t * (t * (t * 6 - 15) + 10); - } - function lerp(a, b, t) { - return (1 - t) * a + t * b; + original += ' ' + }) + + $(".sound-code-chunk-default-content").html(original); + + } - // 2D Perlin Noise - function perlin2(x, y) { - // Find unit grid cell containing point - let X = Math.floor(x), - Y = Math.floor(y); - // Get relative xy coordinates of point within that cell - x = x - X; - y = y - Y; - // Wrap the integer cells at 255 (smaller integer period can be introduced here) - X = X & 255; - Y = Y & 255; - // Calculate noise contributions from each of the four corners - let n00 = gradP[X + perm[Y]].dot2(x, y); - let n01 = gradP[X + perm[Y + 1]].dot2(x, y - 1); - let n10 = gradP[X + 1 + perm[Y]].dot2(x - 1, y); - let n11 = gradP[X + 1 + perm[Y + 1]].dot2(x - 1, y - 1); - // Compute the fade curve value for x - let u = fade(x); - // Interpolate the four results - return lerp(lerp(n00, n10, u), lerp(n01, n11, u), fade(y)); + ); + + + +}, 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); } - return { - seed, - perlin2 + ); + 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); -} +} diff --git a/public/style/http/index.css b/public/style/http/index.css index e7e46bf..8ca4c2b 100644 --- a/public/style/http/index.css +++ b/public/style/http/index.css @@ -6,7 +6,7 @@ html,body{height:100%;} display: flex; height: 2.67rem; width: 100%; - background-image:url("/image/pelma/头部1.png"); + background-image:url("/image/pelma/image5.png"); background-size: 100% 100%; background-repeat: no-repeat; position: relative; @@ -79,7 +79,7 @@ html,body{height:100%;} .diagram-chunk-left{ width: 5%; height: 100%; - background-image:url("/image/pelma/边框1.png"); + background-image:url("/image/pelma/image1.png"); background-size: 100% 100%; background-repeat: no-repeat; } @@ -90,14 +90,14 @@ html,body{height:100%;} justify-content: center; width: 95%; height: 100%; - background-image:url("/image/pelma/内容长1.png"); + background-image:url("/image/pelma/image4.png"); background-size: 100% 100%; background-repeat: no-repeat; } .diagram-chunk-right{ width: 5%; height: 100%; - background-image:url("/image/pelma/边框1.png"); + background-image:url("/image/pelma/image1.png"); background-size: 100% 100%; background-repeat: no-repeat; transform: rotateY(180deg); @@ -114,14 +114,14 @@ html,body{height:100%;} color: #66E5F8; width: 10rem; height: 1.52rem; - background-image:url("/image/pelma/标题1.png"); + background-image:url("/image/pelma/image2.png"); background-size: 100% 100%; background-repeat: no-repeat; } .diagram-chunk-title-middle{ width: 10rem; height: 100%; - background-image:url("/image/pelma/内容短1.png"); + background-image:url("/image/pelma/image3.png"); background-size: 100% 100%; background-repeat: no-repeat; } @@ -155,7 +155,7 @@ html,body{height:100%;} width: 10rem; height: 20rem; margin: auto; - background-image:url("/image/pelma/足1.png"); + background-image:url("/image/pelma/image6.png"); background-size: 100% 100%; background-repeat: no-repeat; transform: rotateY(180deg); @@ -169,7 +169,7 @@ html,body{height:100%;} width: 10rem; height: 20rem; margin: auto; - background-image:url("/image/pelma/足1.png"); + background-image:url("/image/pelma/image6.png"); background-size: 100% 100%; background-repeat: no-repeat; } @@ -257,7 +257,7 @@ html,body{height:100%;} .sound-code-chunk-left{ width: 1.5%; height: 100%; - background-image:url("/image/pelma/边框1.png"); + background-image:url("/image/pelma/image1.png"); background-size: 100% 100%; background-repeat: no-repeat; } @@ -268,14 +268,14 @@ html,body{height:100%;} justify-content: center; width: 97%; height: 100%; - background-image:url("/image/pelma/内容长1.png"); + background-image:url("/image/pelma/image4.png"); background-size: 100% 100%; background-repeat: no-repeat; } .sound-code-chunk-right{ width: 1.5%; height: 100%; - background-image:url("/image/pelma/边框1.png"); + background-image:url("/image/pelma/image1.png"); background-size: 100% 100%; background-repeat: no-repeat; transform: rotateY(180deg); @@ -292,14 +292,14 @@ html,body{height:100%;} color: #66E5F8; width: 10rem; height: 1.52rem; - background-image:url("/image/pelma/标题1.png"); + background-image:url("/image/pelma/image2.png"); background-size: 100% 100%; background-repeat: no-repeat; } .sound-code-chunk-title-middle{ width: 10rem; height: 100%; - background-image:url("/image/pelma/内容短1.png"); + background-image:url("/image/pelma/image3.png"); background-size: 100% 100%; background-repeat: no-repeat; } diff --git a/public/style/http/index2.css b/public/style/http/index2.css index 6b9a163..b1e9533 100644 --- a/public/style/http/index2.css +++ b/public/style/http/index2.css @@ -6,7 +6,7 @@ html,body{height:100%;} display: flex; height: 2.67rem; width: 100%; - background-image:url("/image/pelma/头部1.png"); + background-image:url("/image/pelma/image5.png"); background-size: 100% 100%; background-repeat: no-repeat; position: relative; @@ -51,7 +51,7 @@ html,body{height:100%;} .detail{ margin: 1.52rem; - height: 95%; + height: 90%; display: -webkit-flex; display: flex; -webkit-flex-direction: column; @@ -63,13 +63,14 @@ html,body{height:100%;} margin: auto; display: -webkit-flex; display: flex; - height: 50%; + height: 70%; -webkit-justify-content: space-between; justify-content: space-between; width: 100%; } .diagram-chunk{ - width: 100%; + + width: 49.5%; position: relative; @@ -84,9 +85,9 @@ html,body{height:100%;} } .diagram-chunk-left{ - width: 5%; + width: 1.5%; height: 100%; - background-image:url("/image/pelma/边框1.png"); + background-image:url("/image/pelma/image1.png"); background-size: 100% 100%; background-repeat: no-repeat; } @@ -95,16 +96,16 @@ html,body{height:100%;} display: flex; -webkit-justify-content: center; justify-content: center; - width: 95%; + width: 97%; height: 100%; - background-image:url("/image/pelma/内容长1.png"); + background-image:url("/image/pelma/image4.png"); background-size: 100% 100%; background-repeat: no-repeat; } .diagram-chunk-right{ - width: 5%; + width: 1.5%; height: 100%; - background-image:url("/image/pelma/边框1.png"); + background-image:url("/image/pelma/image1.png"); background-size: 100% 100%; background-repeat: no-repeat; transform: rotateY(180deg); @@ -121,14 +122,14 @@ html,body{height:100%;} color: #66E5F8; width: 10rem; height: 1.52rem; - background-image:url("/image/pelma/标题1.png"); + background-image:url("/image/pelma/image2.png"); background-size: 100% 100%; background-repeat: no-repeat; } .diagram-chunk-title-middle{ width: 10rem; height: 100%; - background-image:url("/image/pelma/内容短1.png"); + background-image:url("/image/pelma/image3.png"); background-size: 100% 100%; background-repeat: no-repeat; } @@ -151,7 +152,7 @@ html,body{height:100%;} display: -webkit-flex; display: flex; width: 100%; - height: 35%; + height: 25%; margin-top: 1.29rem; } .sound-code-chunk{ @@ -174,7 +175,7 @@ html,body{height:100%;} .sound-code-chunk-left{ width: 1.5%; height: 100%; - background-image:url("/image/pelma/边框1.png"); + background-image:url("/image/pelma/image1.png"); background-size: 100% 100%; background-repeat: no-repeat; } @@ -185,14 +186,14 @@ html,body{height:100%;} justify-content: center; width: 97%; height: 100%; - background-image:url("/image/pelma/内容长1.png"); + background-image:url("/image/pelma/image4.png"); background-size: 100% 100%; background-repeat: no-repeat; } .sound-code-chunk-right{ width: 1.5%; height: 100%; - background-image:url("/image/pelma/边框1.png"); + background-image:url("/image/pelma/image1.png"); background-size: 100% 100%; background-repeat: no-repeat; transform: rotateY(180deg); @@ -216,7 +217,7 @@ html,body{height:100%;} .sound-code-chunk-title-middle{ width: 10rem; height: 100%; - background-image:url("/image/pelma/内容短1.png"); + background-image:url("/image/pelma/image3.png"); background-size: 100% 100%; background-repeat: no-repeat; } @@ -230,8 +231,8 @@ html,body{height:100%;} display: flex; } .sound-code-chunk-default-content{ - width: 95%; - height: 85%; + width: 90%; + height: 50%; margin: auto; color: #66E5F8; overflow: hidden; diff --git a/resources/views/http/index.blade.php b/resources/views/http/index.blade.php index 7556462..6d61079 100644 --- a/resources/views/http/index.blade.php +++ b/resources/views/http/index.blade.php @@ -80,7 +80,7 @@
- 压力图2 + 压力图3
diff --git a/resources/views/http/index2.blade.php b/resources/views/http/index2.blade.php index 5ba251d..17f1a60 100644 --- a/resources/views/http/index2.blade.php +++ b/resources/views/http/index2.blade.php @@ -30,7 +30,7 @@
- 压力图1 + 温度
@@ -50,34 +50,61 @@
-
-
-
-
-
-
-
-
- 数据 +
+ +
+
+
+
+
+ 血氧
-
+
-
+
-
-
+
+
+
+{{--
--}} +{{--
--}} +{{--
--}} +{{--
--}} +{{--
--}} +{{--
--}} +{{--
--}} +{{-- 数据--}} +{{--
--}} +{{--
--}} + +{{--
--}} +{{--
--}} +{{--
--}} +{{--
--}} + +{{--
--}} +{{--
--}} + +{{--
--}} +{{--
--}} + +{{--
--}} +{{--
--}} + +{{--
--}} +{{--
--}}
diff --git a/routes/web.php b/routes/web.php index 82b3855..08ebc57 100644 --- a/routes/web.php +++ b/routes/web.php @@ -17,5 +17,6 @@ use Illuminate\Support\Facades\Route; Route::get('/', [\App\Http\Controllers\IndexController::class, 'index']); Route::get('/index2', [\App\Http\Controllers\IndexController::class, 'index2']); Route::get('/tabularData', [\App\Http\Controllers\IndexController::class, 'tabularData']); +Route::get('/loraData', [\App\Http\Controllers\IndexController::class, 'loraData']);