update terminal monitor HTML
This commit is contained in:
龚祖望
parent
33507727dd
commit
8018438d6b
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
.el-card[data-v-848af06a]{-webkit-box-shadow:0 10px 20px 0 rgba(0,0,0,.2);box-shadow:0 10px 20px 0 rgba(0,0,0,.2);overflow:visible}.card-container[data-v-848af06a]{padding:0 20px}.app-container[data-v-848af06a]{font-family:Avenir}.header[data-v-848af06a]{font-family:Lato}.header .title[data-v-848af06a]{color:#174a84}.header .date[data-v-848af06a]{color:#a5c9ff}.title[data-v-848af06a]{margin-top:0;margin-bottom:10px;font-size:21px;font-family:Microsoft YaHei;font-weight:700;text-align:center}.subtitle[data-v-848af06a]{float:right;font-size:13px;color:#696969}.remark[data-v-848af06a]{text-align:center;font-size:18px;color:#696969;margin-top:0}.air-data[data-v-848af06a]{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around}.air-data .air_element[data-v-848af06a]{font-size:21px;font-weight:700;font-family:Nueva Std}.air-data .element_val[data-v-848af06a]{font-size:25px;color:#707070}.air-data .element_val .unit[data-v-848af06a]{font-family:MicrosoftYaHei;font-size:21px}.center[data-v-848af06a]{padding:0 50px}.center_top[data-v-848af06a]{height:35vh;min-height:280px}.center_btm[data-v-848af06a]{height:30vh;min-height:260px;overflow:auto;font-size:20px}.center_btm .subtext[data-v-848af06a]{text-align:end;font-size:18px;margin-top:10px}.center_btm .val[data-v-848af06a]{font-size:25px;color:#707070}.center_btm .val .unit[data-v-848af06a]{font-size:21px;font-family:MicrosoftYaHei;color:#707070}.chart[data-v-848af06a]{width:100%;min-height:100px;height:15vh}.orange[data-v-848af06a]{color:#fab05a}.purple[data-v-848af06a]{color:#724fe8}.green[data-v-848af06a]{color:#20be0b}.blue[data-v-848af06a]{color:#00ccf2}.bold[data-v-848af06a]{font-weight:700}.border_radius20[data-v-848af06a]{border-radius:20px;position:relative}.border_radius40[data-v-848af06a]{border-radius:40px;position:relative}.param_icon[data-v-848af06a]{position:absolute;top:35%;left:-30px}.center_icon[data-v-848af06a]{position:absolute;top:-40px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}ul[data-v-848af06a]{padding-left:0;margin-top:0}ul li[data-v-848af06a]{list-style:none;overflow:hidden;line-height:1.5}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
.el-card[data-v-1c72605e]{-webkit-box-shadow:0 10px 20px 0 rgba(0,0,0,.2);box-shadow:0 10px 20px 0 rgba(0,0,0,.2);overflow:visible}.card-container[data-v-1c72605e]{padding:0 20px}.app-container[data-v-1c72605e]{font-family:Avenir}.header[data-v-1c72605e]{font-family:Lato}.header .title[data-v-1c72605e]{color:#174a84}.header .date[data-v-1c72605e]{color:#a5c9ff}.title[data-v-1c72605e]{margin-top:0;margin-bottom:10px;font-size:21px;font-family:Microsoft YaHei;font-weight:700;text-align:center}.subtitle[data-v-1c72605e]{float:right;font-size:13px;color:#696969}.remark[data-v-1c72605e]{text-align:center;font-size:18px;color:#696969;margin-top:0}.air-data[data-v-1c72605e]{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around}.air-data .air_element[data-v-1c72605e]{font-size:21px;font-weight:700;font-family:Nueva Std}.air-data .element_val[data-v-1c72605e]{font-size:25px;color:#707070}.air-data .element_val .unit[data-v-1c72605e]{font-family:MicrosoftYaHei;font-size:21px}.center[data-v-1c72605e]{padding:0 50px}.center_top[data-v-1c72605e]{height:35vh;min-height:280px}.center_btm[data-v-1c72605e]{height:30vh;min-height:260px;overflow:auto;font-size:20px}.center_btm .subtext[data-v-1c72605e]{text-align:end;font-size:18px;margin-top:10px}.center_btm .val[data-v-1c72605e]{font-size:25px;color:#707070}.center_btm .val .unit[data-v-1c72605e]{font-size:21px;font-family:MicrosoftYaHei;color:#707070}.chart[data-v-1c72605e]{width:100%;min-height:100px;height:15vh}.orange[data-v-1c72605e]{color:#fab05a}.purple[data-v-1c72605e]{color:#724fe8}.green[data-v-1c72605e]{color:#20be0b}.blue[data-v-1c72605e]{color:#00ccf2}.bold[data-v-1c72605e]{font-weight:700}.border_radius20[data-v-1c72605e]{border-radius:20px;position:relative}.border_radius40[data-v-1c72605e]{border-radius:40px;position:relative}.param_icon[data-v-1c72605e]{position:absolute;top:35%;left:-30px}.center_icon[data-v-1c72605e]{position:absolute;top:-40px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}ul[data-v-1c72605e]{padding-left:0;margin-top:0}ul li[data-v-1c72605e]{list-style:none;overflow:hidden;line-height:1.5}
|
||||
|
|
@ -1 +0,0 @@
|
|||
.pm-container[data-v-6664eeec]{display:-webkit-box;display:-ms-flexbox;display:flex}.pm-chart[data-v-6664eeec]{width:33.3%;height:21vh}.chemical-container[data-v-6664eeec]{display:-webkit-box;display:-ms-flexbox;display:flex}.chemical-chart[data-v-6664eeec]{width:25%;height:18vh}.temp-container[data-v-6664eeec]{display:-webkit-box;display:-ms-flexbox;display:flex}.temp-chart[data-v-6664eeec]{width:50%;height:21vh}
|
||||
|
|
@ -0,0 +1 @@
|
|||
.pm-container[data-v-03caff1b]{display:-webkit-box;display:-ms-flexbox;display:flex}.pm-chart[data-v-03caff1b]{width:33.3%;height:21vh}.chemical-container[data-v-03caff1b]{display:-webkit-box;display:-ms-flexbox;display:flex}.chemical-chart[data-v-03caff1b]{width:25%;height:18vh}.temp-container[data-v-03caff1b]{display:-webkit-box;display:-ms-flexbox;display:flex}.temp-chart[data-v-03caff1b]{width:50%;height:21vh}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0d39cd"],{"5e07":function(n,u,c){"use strict";c.r(u);var e,l,d=c("2877"),o={},p=Object(d["a"])(o,e,l,!1,null,null,null);u["default"]=p.exports}}]);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -14,6 +14,7 @@
|
|||
"test:ci": "npm run lint && npm run test:unit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@topology/core": "^1.2.2",
|
||||
"axios": "0.18.1",
|
||||
"core-js": "3.6.5",
|
||||
"echarts": "^5.3.3",
|
||||
|
|
@ -22,6 +23,7 @@
|
|||
"normalize.css": "7.0.0",
|
||||
"nprogress": "0.2.0",
|
||||
"path-to-regexp": "2.4.0",
|
||||
"topology-vue": "^0.5.38",
|
||||
"vue": "2.6.10",
|
||||
"vue-router": "3.0.6",
|
||||
"vuex": "3.1.0"
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export function getList(data) {
|
||||
return request({
|
||||
url: '/device/data/basePage',
|
||||
method: 'get',
|
||||
params: data || {}
|
||||
})
|
||||
}
|
||||
|
||||
export function qyeryDeviceInfo(data) {
|
||||
return request({
|
||||
url: '/data/qyeryDeviceInfo',
|
||||
method: 'get',
|
||||
params: data || {}
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export function getDayAvg(data) {
|
||||
return request({
|
||||
url: '/data/getDayAvg',
|
||||
method: 'get',
|
||||
params: data || {}
|
||||
})
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 902 B |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 616 B |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1663294781359" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1053" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M768 928H128a32 32 0 0 1-32-32V256a32 32 0 0 1 32-32h195.84A132.48 132.48 0 0 1 320 192a128 128 0 0 1 256 0 132.48 132.48 0 0 1-3.84 32H768a32 32 0 0 1 32 32v195.84A132.48 132.48 0 0 1 832 448a128 128 0 0 1 0 256 132.48 132.48 0 0 1-32-3.84V896a32 32 0 0 1-32 32z m-608-64h576v-216.96a32.64 32.64 0 0 1 19.2-29.44 32.64 32.64 0 0 1 33.92 5.76 64 64 0 1 0 0-94.72 31.36 31.36 0 0 1-33.92 5.76 32.64 32.64 0 0 1-19.2-29.44V288H519.04a32.64 32.64 0 0 1-29.44-19.2 31.36 31.36 0 0 1 5.76-33.92 64 64 0 1 0-94.72 0 31.36 31.36 0 0 1 5.76 33.92 32.64 32.64 0 0 1-29.44 19.2H160z" fill="#ffffff" p-id="1054"></path></svg>
|
||||
|
After Width: | Height: | Size: 947 B |
|
|
@ -1,15 +0,0 @@
|
|||
<svg id="baseline-bar_chart-24px" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill: currentColor;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path id="路径_11394" data-name="路径 11394" class="cls-1" d="M0,0H24V24H0Z"/>
|
||||
<path id="路径_30820" data-name="路径 30820" class="cls-2" d="M154.234,191.26H140.64a.64.64,0,0,0-.64.64v9.616a.64.64,0,0,0,.64.64H146.8v1.265h-4.2a.64.64,0,0,0,0,1.28h9.675a.64.64,0,0,0,0-1.28h-4.2v-1.265h6.158a.64.64,0,0,0,.64-.64V191.9A.64.64,0,0,0,154.234,191.26Zm-.64,9.616h-5.518v-4.161l2.23,2.23a.64.64,0,0,0,.9-.9l-3.337-3.337a.64.64,0,0,0-.9,0l-3.307,3.307a.64.64,0,0,0,.9.9l2.23-2.23v4.192h-5.518v-8.337h12.315Z" transform="translate(-135.438 -185.645)"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 816 B |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1663294624233" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1023" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M346.396444 310.840889c18.375111 0 33.223111-14.848 33.223111-33.223111L379.619556 144.611556c0-18.375111-14.904889-33.223111-33.223111-33.223111-18.375111 0-33.223111 14.848-33.223111 33.223111l0 132.949333C313.173333 295.992889 328.021333 310.840889 346.396444 310.840889zM512.568889 310.840889c18.375111 0 33.223111-14.848 33.223111-33.223111L545.792 144.611556c0-18.375111-14.848-33.223111-33.223111-33.223111-18.375111 0-33.223111 14.904889-33.223111 33.223111l0 132.949333C479.345778 295.992889 494.250667 310.840889 512.568889 310.840889zM412.899556 175.104l33.223111 0 0 66.446222-33.223111 0 0-66.446222ZM579.128889 175.104l33.223111 0 0 66.446222-33.223111 0 0-66.446222ZM911.36 811.121778l0-539.875556c0.113778-55.125333-44.657778-99.726222-99.669333-99.726222L745.244444 171.52l0 66.446222 66.446222 0c18.318222 0 33.336889 14.904889 33.336889 33.223111l0 539.932444c0 18.318222-15.018667 33.28-33.336889 33.28L213.447111 844.401778c-18.261333 0-33.223111-14.961778-33.223111-33.28L179.712 811.121778l0.512-539.875556c0-18.318222 14.904889-33.223111 33.223111-33.223111L279.893333 238.023111 279.893333 171.52 213.447111 171.52C158.435556 171.52 113.777778 216.120889 113.777778 271.246222l0 539.875556c0 55.239111 44.657778 99.726222 99.669333 99.726222l598.243556 0c53.418667 0 96.654222-41.927111 99.271111-94.776889 0.056889-0.284444 0.398222-0.625778 0.398222-0.910222l0-2.958222c0-0.398222 0.113778-0.739556 0.113778-1.137778L911.36 811.064889zM678.798222 310.840889c18.318222 0 33.223111-14.848 33.223111-33.223111L712.021333 144.611556c0-18.375111-14.904889-33.223111-33.223111-33.223111s-33.223111 14.848-33.223111 33.223111l0 132.949333C645.575111 295.992889 660.309333 310.840889 678.798222 310.840889zM312.604444 444.302222l398.848 0c18.204444 0 33.223111-14.904889 33.223111-33.223111 0-18.375111-15.018667-33.223111-33.223111-33.223111L312.604444 377.856c-18.375111 0-33.223111 14.848-33.223111 33.223111C279.381333 429.397333 294.229333 444.302222 312.604444 444.302222zM711.452444 541.866667 312.604444 541.866667c-18.375111 0-33.223111 14.904889-33.223111 33.223111s14.848 33.223111 33.223111 33.223111l398.848 0c18.204444 0 33.223111-14.904889 33.223111-33.223111S729.656889 541.866667 711.452444 541.866667zM711.452444 712.305778 312.604444 712.305778c-18.375111 0-33.223111 14.904889-33.223111 33.109333 0 18.375111 14.848 33.336889 33.223111 33.336889l398.848 0c18.204444 0 33.223111-14.961778 33.223111-33.336889C744.675556 727.153778 729.656889 712.305778 711.452444 712.305778z" p-id="1024" fill="#ffffff"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: 龚祖望 573413756@qq.com
|
||||
* @Date: 2022-05-16 09:16:41
|
||||
* @LastEditors: 龚祖望 573413756@qq.com
|
||||
* @LastEditTime: 2022-08-18 16:32:11
|
||||
* @LastEditTime: 2022-09-16 10:39:39
|
||||
* @FilePath: \dashengda\src\permission.js
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -119,13 +119,13 @@ export const constantRoutes = [
|
|||
path: 'center',
|
||||
name: 'Center',
|
||||
component: () => import('@/views/terminal/center/index'),
|
||||
meta: { title: '设备中心' }
|
||||
meta: { title: '设备参数' }
|
||||
},
|
||||
{
|
||||
path: 'monitor',
|
||||
name: 'Monitor',
|
||||
component: () => import('@/views/terminal/monitor/index'),
|
||||
meta: { title: '设备监控', disabled: true }
|
||||
meta: { title: '设备监控' }
|
||||
},
|
||||
{
|
||||
path: 'alarm',
|
||||
|
|
@ -133,9 +133,9 @@ export const constantRoutes = [
|
|||
meta: { title: '设备告警', disabled: true }
|
||||
},
|
||||
{
|
||||
path: 'log',
|
||||
name: 'Log',
|
||||
meta: { title: '系统日志', disabled: true }
|
||||
path: 'plc',
|
||||
name: 'PLC',
|
||||
meta: { title: 'PLC管理', disabled: true }
|
||||
},
|
||||
{
|
||||
path: 'ota',
|
||||
|
|
@ -144,48 +144,6 @@ export const constantRoutes = [
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/customize',
|
||||
component: Layout,
|
||||
name: 'Customize',
|
||||
meta: { title: '设备接入', icon: 'customize', disabled: true },
|
||||
children: [
|
||||
{
|
||||
path: 'protocol',
|
||||
name: 'Protocol',
|
||||
// component: () => import(''),
|
||||
meta: { title: '协议管理', disabled: true }
|
||||
},
|
||||
{
|
||||
path: 'interface',
|
||||
name: 'Interface',
|
||||
// component: () => import('@/views/terminal/add/index'),
|
||||
meta: { title: '外设接口', disabled: true }
|
||||
},
|
||||
{
|
||||
path: 'internet',
|
||||
name: 'Internet',
|
||||
// component: () => import('@/views/terminal/center/index'),
|
||||
meta: { title: '网络组件', disabled: true }
|
||||
},
|
||||
{
|
||||
path: 'sensor',
|
||||
name: 'Sensor',
|
||||
// component: () => import('@/views/terminal/monitor/index'),
|
||||
meta: { title: '传感器', disabled: true }
|
||||
},
|
||||
{
|
||||
path: 'gateway',
|
||||
name: 'Gateway',
|
||||
meta: { title: '设备网关', disabled: true }
|
||||
},
|
||||
{
|
||||
path: 'device',
|
||||
name: 'Device',
|
||||
meta: { title: '工业设备', disabled: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/rule',
|
||||
component: Layout,
|
||||
|
|
@ -206,6 +164,40 @@ export const constantRoutes = [
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/configuration',
|
||||
component: Layout,
|
||||
name: 'Configuration',
|
||||
meta: { title: '组态管理', icon: 'configuration' },
|
||||
children: [
|
||||
{
|
||||
path: 'development',
|
||||
name: 'Development',
|
||||
// component: () => import(''),
|
||||
meta: { title: '组态开发' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/log',
|
||||
component: Layout,
|
||||
name: 'Log',
|
||||
meta: { title: '日志管理', icon: 'log', disabled: true },
|
||||
children: [
|
||||
{
|
||||
path: 'accessLog',
|
||||
name: 'AccessLog',
|
||||
// component: () => import(''),
|
||||
meta: { title: '访问日志', disabled: true }
|
||||
},
|
||||
{
|
||||
path: 'systemLog',
|
||||
name: 'SystemLog',
|
||||
// component: () => import('@/views/terminal/add/index'),
|
||||
meta: { title: '系统日志', disabled: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/data',
|
||||
component: Layout,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,106 @@
|
|||
<template>
|
||||
<div class="home">
|
||||
<!-- 使用topology组件 -->
|
||||
<topology :configs="topologyConfigs" :user="user" @event="onEvent" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 导入topology-vue组件
|
||||
import topology from 'topology-vue'
|
||||
// 需要导入topology-vue.css
|
||||
import 'topology-vue/topology-vue.css'
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
topology
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
topologyConfigs: {
|
||||
logo: {
|
||||
img: 'http://topology.le5le.com/assets/img/favicon.ico',
|
||||
url: 'http://topology.le5le.com',
|
||||
target: '_blank'
|
||||
},
|
||||
menus: {
|
||||
// back: {
|
||||
// icon: "t-icon t-angle-left",
|
||||
// },
|
||||
// login: true,
|
||||
left: [
|
||||
{
|
||||
name: '文件(自定义菜单1)',
|
||||
children: [
|
||||
{ name: '新建文件', keyboard: 'Ctrl+N', action: 'open1' },
|
||||
{ name: '打开文件', keyboard: 'Ctrl+O', action: 'loadNew' },
|
||||
{ name: '导入文件', keyboard: 'Ctrl+I', action: 'load' },
|
||||
{},
|
||||
{ name: '保存', keyboard: 'Ctrl+S', action: 'save' },
|
||||
{ name: '另存为', keyboard: 'Ctrl+Shift+I', action: 'saveAs' },
|
||||
{ name: '下载JSON文件', action: 'downloadJson' },
|
||||
{ name: '下载zip打包文件', action: 'downloadZip' },
|
||||
{},
|
||||
{ name: '导出为HTML', action: 'downloadHtml' },
|
||||
{},
|
||||
{ name: '下载为PNG', action: 'downloadPng' },
|
||||
{ name: '下载为SVG', action: 'downloadSvg' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '编辑(自定义菜单2)',
|
||||
children: [
|
||||
{ name: '撤销', keyboard: 'Ctrl+Z', action: 'undo' },
|
||||
{ name: '恢复 ', keyboard: 'Ctrl+Shift+Z', action: 'redo' },
|
||||
{},
|
||||
{ name: '剪切 ', keyboard: 'Ctrl+X', action: 'cut' },
|
||||
{ name: '复制 ', keyboard: 'Ctrl+C', action: 'copy' },
|
||||
{ name: '粘贴 ', keyboard: 'Ctrl+V', action: 'paste' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '我的菜单3',
|
||||
router: '/page'
|
||||
}
|
||||
]
|
||||
// middle: [],
|
||||
},
|
||||
loginUrl: 'https://account.le5le.com',
|
||||
signupUrl: 'https://account.le5le.com',
|
||||
userMenus: [
|
||||
{ name: '个人中心', router: '/user/home' },
|
||||
{},
|
||||
{
|
||||
name: '账号设置',
|
||||
url: 'https://account.le5le.com/user/profile',
|
||||
target: '_blank'
|
||||
},
|
||||
{},
|
||||
{ name: '退出', action: 'logout' }
|
||||
]
|
||||
},
|
||||
user: {
|
||||
username: 'le5le'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onEvent(e) {
|
||||
switch (e.name) {
|
||||
case 'logout':
|
||||
this.user = null
|
||||
// Do sth.
|
||||
break
|
||||
// ...
|
||||
// ...
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.home {
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -109,8 +109,9 @@ export default {
|
|||
this.initPMChart()
|
||||
this.initChemicalChart()
|
||||
this.initTempChart()
|
||||
this.mockData()
|
||||
})
|
||||
this.openSocket()
|
||||
setInterval(this.mockData, 5000)
|
||||
window.addEventListener('resize', _.debounce(this.chartResize, 200))
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -206,7 +207,7 @@ export default {
|
|||
show: true,
|
||||
lineStyle: {
|
||||
color: [
|
||||
[value / 80, 'rgb(94,229,213)'],
|
||||
[value / 80, '#46d5a0'],
|
||||
[1, 'rgb(207,248,244)']
|
||||
],
|
||||
width: 20
|
||||
|
|
@ -262,12 +263,12 @@ export default {
|
|||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#3EE7D5',
|
||||
color: '#46d5a0',
|
||||
fontSize: 14,
|
||||
fontFamily: 'SourceHanSansSC-Regular',
|
||||
fontWeight: 'bold',
|
||||
// position: "top",
|
||||
distance: -55,
|
||||
distance: -50,
|
||||
formatter: function(v) {
|
||||
return v
|
||||
}
|
||||
|
|
@ -275,7 +276,7 @@ export default {
|
|||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: [[1, 'rgb(94,229,213)']],
|
||||
color: [[1, '#46d5a0']],
|
||||
width: 2,
|
||||
opacity: 1
|
||||
}
|
||||
|
|
@ -368,7 +369,7 @@ export default {
|
|||
axisLine: {
|
||||
lineStyle: {
|
||||
color: [
|
||||
[value / 100, '#FBBA4C'],
|
||||
[value / 100, '#fab05a'],
|
||||
[1, '#F6F6F6']
|
||||
],
|
||||
width: 15
|
||||
|
|
@ -376,7 +377,7 @@ export default {
|
|||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#FBBA4C',
|
||||
color: '#fab05a',
|
||||
fontSize: 14,
|
||||
fontFamily: 'SourceHanSansSC-Regular',
|
||||
fontWeight: 'bold',
|
||||
|
|
@ -437,7 +438,7 @@ export default {
|
|||
data: [
|
||||
{
|
||||
value: 1,
|
||||
itemStyle: { color: '#FBBA4C' }
|
||||
itemStyle: { color: '#fab05a' }
|
||||
}
|
||||
],
|
||||
label: {
|
||||
|
|
@ -554,7 +555,7 @@ export default {
|
|||
show: true,
|
||||
lineStyle: {
|
||||
color: [
|
||||
[value / 100, 'rgb(61,142,253)'],
|
||||
[value / 100, '#00ccf2'],
|
||||
[1, 'rgb(191,224,254)']
|
||||
],
|
||||
width: 20
|
||||
|
|
@ -610,12 +611,12 @@ export default {
|
|||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: '#0090FF',
|
||||
color: '#00ccf2',
|
||||
fontSize: 14,
|
||||
fontFamily: 'SourceHanSansSC-Regular',
|
||||
fontWeight: 'bold',
|
||||
// position: "top",
|
||||
distance: -58,
|
||||
distance: -55,
|
||||
formatter: function(v) {
|
||||
return v
|
||||
}
|
||||
|
|
@ -623,7 +624,7 @@ export default {
|
|||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: [[1, 'rgb(61,142,253)']],
|
||||
color: [[1, '#00ccf2']],
|
||||
width: 2,
|
||||
opacity: 1
|
||||
}
|
||||
|
|
@ -726,66 +727,133 @@ export default {
|
|||
}
|
||||
)
|
||||
},
|
||||
openSocket() {
|
||||
const tid = this.guid()
|
||||
const socketUrl = 'ws://115.238.53.60:33333/websocket/' + tid
|
||||
const socket = new WebSocket(socketUrl)
|
||||
socket.onopen = () => {
|
||||
console.log('websocket已打开')
|
||||
}
|
||||
socket.onmessage = (msg) => {
|
||||
const data = JSON.parse(msg.data)
|
||||
data.forEach((item) => {
|
||||
const pmIndex = this.PMOptions.findIndex(
|
||||
(option) => option.name === item.paramsName
|
||||
)
|
||||
const tempIndex = this.tempOptions.findIndex(
|
||||
(option) => option.name === item.paramsName
|
||||
)
|
||||
const chemicalIndex = this.chemicalOptions.findIndex(
|
||||
(option) => option.name === item.paramsName
|
||||
)
|
||||
if (pmIndex !== -1) {
|
||||
const value = Math.round(item.paramsValue)
|
||||
this.PMOptions[pmIndex].title.text = value
|
||||
this.PMOptions[pmIndex].series[1].axisLine.lineStyle.color[0][0] =
|
||||
value /
|
||||
(this.PMOptions[pmIndex].series[1].max +
|
||||
this.PMOptions[pmIndex].series[1].min)
|
||||
this.PMCharts[pmIndex].setOption(this.PMOptions[pmIndex])
|
||||
} else if (tempIndex !== -1) {
|
||||
const value = parseFloat(item.paramsValue.toFixed(3))
|
||||
this.tempOptions[tempIndex].title.text = value
|
||||
this.tempOptions[
|
||||
tempIndex
|
||||
].series[0].axisLine.lineStyle.color[0][0] =
|
||||
value /
|
||||
(this.tempOptions[tempIndex].series[0].max +
|
||||
this.tempOptions[tempIndex].series[0].min)
|
||||
this.tempCharts[tempIndex].setOption(this.tempOptions[tempIndex])
|
||||
} else if (chemicalIndex !== -1) {
|
||||
const value = Math.max(0, parseFloat(item.paramsValue.toFixed(1)))
|
||||
this.chemicalOptions[chemicalIndex].title.text = value
|
||||
this.chemicalOptions[
|
||||
chemicalIndex
|
||||
].series[1].axisLine.lineStyle.color[0][0] =
|
||||
value /
|
||||
(this.chemicalOptions[chemicalIndex].series[1].max +
|
||||
this.chemicalOptions[chemicalIndex].series[1].min)
|
||||
this.chemicalCharts[chemicalIndex].setOption(
|
||||
this.chemicalOptions[chemicalIndex]
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
// 关闭事件
|
||||
socket.onclose = () => {
|
||||
console.log('websocket已关闭')
|
||||
}
|
||||
// 发生了错误事件
|
||||
socket.onerror = () => {
|
||||
console.log('websocket发生了错误')
|
||||
randomData(base, range, digits) {
|
||||
if (Math.random() > 0.5) {
|
||||
return parseFloat(base + range * Math.random()).toFixed(digits)
|
||||
} else {
|
||||
return parseFloat(base - range * Math.random()).toFixed(digits)
|
||||
}
|
||||
},
|
||||
mockData() {
|
||||
let randomVal = 0
|
||||
// PM1.0
|
||||
randomVal = this.randomData(20, 5, 1)
|
||||
this.PMOptions[0].title.text = randomVal
|
||||
this.PMOptions[0].series[1].axisLine.lineStyle.color[0][0] =
|
||||
(randomVal - this.PMOptions[0].series[1].min) /
|
||||
(this.PMOptions[0].series[1].max - this.PMOptions[0].series[1].min)
|
||||
// PM2.5
|
||||
randomVal = this.randomData(35, 10, 1)
|
||||
this.PMOptions[1].title.text = randomVal
|
||||
this.PMOptions[1].series[1].axisLine.lineStyle.color[0][0] =
|
||||
(randomVal - this.PMOptions[1].series[1].min) /
|
||||
(this.PMOptions[1].series[1].max - this.PMOptions[1].series[1].min)
|
||||
// PM10
|
||||
randomVal = this.randomData(60, 15, 1)
|
||||
this.PMOptions[2].title.text = randomVal
|
||||
this.PMOptions[2].series[1].axisLine.lineStyle.color[0][0] =
|
||||
(randomVal - this.PMOptions[2].series[1].min) /
|
||||
(this.PMOptions[2].series[1].max - this.PMOptions[2].series[1].min)
|
||||
|
||||
// 湿度
|
||||
randomVal = this.randomData(46, 10, 1)
|
||||
this.tempOptions[0].title.text = randomVal
|
||||
this.tempOptions[0].series[0].axisLine.lineStyle.color[0][0] =
|
||||
(randomVal - this.tempOptions[0].series[0].min) /
|
||||
(this.tempOptions[0].series[0].max - this.tempOptions[0].series[0].min)
|
||||
// 温度
|
||||
randomVal = this.randomData(26, 3, 1)
|
||||
this.tempOptions[1].title.text = randomVal
|
||||
this.tempOptions[1].series[0].axisLine.lineStyle.color[0][0] =
|
||||
(randomVal - this.tempOptions[1].series[0].min) /
|
||||
(this.tempOptions[1].series[0].max - this.tempOptions[1].series[0].min)
|
||||
|
||||
// 甲醛
|
||||
randomVal = this.randomData(18, 5, 1)
|
||||
this.chemicalOptions[0].title.text = randomVal
|
||||
this.chemicalOptions[0].series[1].axisLine.lineStyle.color[0][0] =
|
||||
(randomVal - this.chemicalOptions[0].series[1].min) /
|
||||
(this.chemicalOptions[0].series[1].max -
|
||||
this.chemicalOptions[0].series[1].min)
|
||||
// 乙醇
|
||||
randomVal = this.randomData(10, 3, 1)
|
||||
this.chemicalOptions[1].title.text = randomVal
|
||||
this.chemicalOptions[1].series[1].axisLine.lineStyle.color[0][0] =
|
||||
(randomVal - this.chemicalOptions[1].series[1].min) /
|
||||
(this.chemicalOptions[1].series[1].max -
|
||||
this.chemicalOptions[1].series[1].min)
|
||||
// 甲烷
|
||||
randomVal = this.randomData(1, 0.3, 1)
|
||||
this.chemicalOptions[2].title.text = randomVal
|
||||
this.chemicalOptions[2].series[1].axisLine.lineStyle.color[0][0] =
|
||||
(randomVal - this.chemicalOptions[2].series[1].min) /
|
||||
(this.chemicalOptions[2].series[1].max -
|
||||
this.chemicalOptions[2].series[1].min)
|
||||
// SO2
|
||||
randomVal = this.randomData(30, 10, 1)
|
||||
this.chemicalOptions[3].title.text = randomVal
|
||||
this.chemicalOptions[3].series[1].axisLine.lineStyle.color[0][0] =
|
||||
(randomVal - this.chemicalOptions[3].series[1].min) /
|
||||
(this.chemicalOptions[3].series[1].max -
|
||||
this.chemicalOptions[3].series[1].min)
|
||||
// CO2
|
||||
randomVal = this.randomData(380, 50, 0)
|
||||
this.chemicalOptions[4].title.text = randomVal
|
||||
this.chemicalOptions[4].series[1].axisLine.lineStyle.color[0][0] =
|
||||
(randomVal - this.chemicalOptions[4].series[1].min) /
|
||||
(this.chemicalOptions[4].series[1].max -
|
||||
this.chemicalOptions[4].series[1].min)
|
||||
// TVOC
|
||||
randomVal = this.randomData(50, 10, 1)
|
||||
this.chemicalOptions[5].title.text = randomVal
|
||||
this.chemicalOptions[5].series[1].axisLine.lineStyle.color[0][0] =
|
||||
(randomVal - this.chemicalOptions[5].series[1].min) /
|
||||
(this.chemicalOptions[5].series[1].max -
|
||||
this.chemicalOptions[5].series[1].min)
|
||||
// AQS
|
||||
randomVal = this.randomData(5.4, 1.4, 1)
|
||||
this.chemicalOptions[6].title.text = randomVal
|
||||
this.chemicalOptions[6].series[1].axisLine.lineStyle.color[0][0] =
|
||||
(randomVal - this.chemicalOptions[6].series[1].min) /
|
||||
(this.chemicalOptions[6].series[1].max -
|
||||
this.chemicalOptions[6].series[1].min)
|
||||
// 噪声
|
||||
randomVal = this.randomData(65, 20, 1)
|
||||
this.chemicalOptions[7].title.text = randomVal
|
||||
this.chemicalOptions[7].series[1].axisLine.lineStyle.color[0][0] =
|
||||
(randomVal - this.chemicalOptions[7].series[1].min) /
|
||||
(this.chemicalOptions[7].series[1].max -
|
||||
this.chemicalOptions[7].series[1].min)
|
||||
// 风速
|
||||
randomVal = this.randomData(1, 0.3, 1)
|
||||
this.chemicalOptions[8].title.text = randomVal
|
||||
this.chemicalOptions[8].series[1].axisLine.lineStyle.color[0][0] =
|
||||
(randomVal - this.chemicalOptions[8].series[1].min) /
|
||||
(this.chemicalOptions[8].series[1].max -
|
||||
this.chemicalOptions[8].series[1].min)
|
||||
// 风向
|
||||
randomVal = this.randomData(180, 20, 0)
|
||||
this.chemicalOptions[9].title.text = randomVal
|
||||
this.chemicalOptions[9].series[1].axisLine.lineStyle.color[0][0] =
|
||||
(randomVal - this.chemicalOptions[9].series[1].min) /
|
||||
(this.chemicalOptions[9].series[1].max -
|
||||
this.chemicalOptions[9].series[1].min)
|
||||
// 气压
|
||||
randomVal = this.randomData(101, 1, 1)
|
||||
this.chemicalOptions[10].title.text = randomVal
|
||||
this.chemicalOptions[10].series[1].axisLine.lineStyle.color[0][0] =
|
||||
(randomVal - this.chemicalOptions[10].series[1].min) /
|
||||
(this.chemicalOptions[10].series[1].max -
|
||||
this.chemicalOptions[10].series[1].min)
|
||||
this.chemicalCharts.forEach((chart, index) => {
|
||||
chart.setOption(this.chemicalOptions[index])
|
||||
})
|
||||
this.PMCharts.forEach((chart, index) => {
|
||||
chart.setOption(this.PMOptions[index])
|
||||
})
|
||||
this.tempCharts.forEach((chart, index) => {
|
||||
chart.setOption(this.tempOptions[index])
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,46 +42,46 @@
|
|||
<div class="air-data">
|
||||
<div>
|
||||
<p class="blue air_element">PM1.0</p>
|
||||
<p class="element_val">2<span class="unit">ug/m3</span></p>
|
||||
<p class="element_val">{{ Math.round(average.pm1d0) }}<span class="unit">ug/m3</span></p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="blue air_element">PM2.5</p>
|
||||
<p class="element_val">4<span class="unit">ug/m3</span></p>
|
||||
<p class="element_val">{{ Math.round(average.pm2d5) }}<span class="unit">ug/m3</span></p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="blue air_element">PM10</p>
|
||||
<p class="element_val">7<span class="unit">ug/m3</span></p>
|
||||
<p class="element_val">{{ Math.round(average.pm10) }}<span class="unit">ug/m3</span></p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="blue air_element">SO2</p>
|
||||
<p class="element_val">6<span class="unit">ug/m3</span></p>
|
||||
<p class="element_val">{{ Math.round(average.so2) }}<span class="unit">ug/m3</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="remark">——根据四者计算空气质量指数</p>
|
||||
</el-card>
|
||||
<el-card class="center_btm border_radius40">
|
||||
<el-col :span="12">
|
||||
<el-col :span="10" :offset="1">
|
||||
<ul>
|
||||
<li class="blue bold">温度分析：黄色预警</li>
|
||||
<li class="subtext">
|
||||
——日均数值
|
||||
</li>
|
||||
<li class="blue bold">温度</li>
|
||||
<li class="val">37<span class="unit">℃</span></li>
|
||||
<li class="val">{{ average.temperature }}<span class="unit">℃</span></li>
|
||||
<li class="blue bold">湿度</li>
|
||||
<li class="val">50<span class="unit">%rh</span></li>
|
||||
<li class="val">{{ average.humidness }}<span class="unit">%rh</span></li>
|
||||
</ul>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-col :span="10" :offset="2">
|
||||
<ul>
|
||||
<li class="blue bold">CO2分析：空气清新</li>
|
||||
<li class="subtext">
|
||||
——日均数值
|
||||
</li>
|
||||
<li class="blue bold">CO2</li>
|
||||
<li class="val">95<span class="unit">ppb</span></li>
|
||||
<li class="val">{{ average.co2 }}<span class="unit">ppb</span></li>
|
||||
<li class="blue bold">气压</li>
|
||||
<li class="val">101<span class="unit">kPa</span></li>
|
||||
<li class="val">{{ average.airpressure }}<span class="unit">kPa</span></li>
|
||||
</ul>
|
||||
</el-col>
|
||||
</el-card>
|
||||
|
|
@ -112,6 +112,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getDayAvg } from '@/api/data/value'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -267,7 +269,7 @@ export default {
|
|||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
max: 120,
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
|
|
@ -366,7 +368,7 @@ export default {
|
|||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
max: 110,
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
|
|
@ -567,7 +569,7 @@ export default {
|
|||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
max: 25,
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
|
|
@ -666,7 +668,7 @@ export default {
|
|||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
max: 15,
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
|
|
@ -718,17 +720,13 @@ export default {
|
|||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
],
|
||||
average: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const charts = document.getElementsByClassName('chart')
|
||||
charts.forEach((chart) => {
|
||||
this.myCharts.push(this.$echarts.init(chart))
|
||||
})
|
||||
this.options.forEach((option, index) => {
|
||||
this.myCharts[index].setOption(option)
|
||||
})
|
||||
this.getData()
|
||||
|
||||
this.date = new Date().toLocaleDateString()
|
||||
window.addEventListener('resize', () => {
|
||||
this.myCharts.forEach(chart => {
|
||||
|
|
@ -736,7 +734,56 @@ export default {
|
|||
})
|
||||
})
|
||||
},
|
||||
methods: {}
|
||||
methods: {
|
||||
getData() {
|
||||
getDayAvg().then(res => {
|
||||
this.average = res.data[0]
|
||||
// 风速
|
||||
this.options[0].title.text = `{a|${this.average.windspeed}} {b|m/s}`
|
||||
this.options[1].title.text = `{a|${this.average.noise}} {b|dB}`
|
||||
this.options[2].title.text = `{a|${this.average.methanal}} {b|ppb}`
|
||||
this.options[3].title.text = `{a|${this.average.tvoc}} {b|ppb}`
|
||||
this.options[4].title.text = `{a|${this.average.ethanol}} {b|ppb}`
|
||||
this.options[5].title.text = `{a|${this.average.methane}} {b|%LEL}`
|
||||
const data = res.data.filter((item, index) => index % 2 === 1)
|
||||
const cHour = new Date().getHours()
|
||||
const xData = []
|
||||
for (let i = 0; i < 12; i++) {
|
||||
xData.unshift(cHour - 2 * i > 0 ? cHour - 2 * i + '时' : cHour + 24 - 2 * i + '时')
|
||||
}
|
||||
this.options.forEach(option => {
|
||||
option.xAxis.data = xData
|
||||
})
|
||||
const wind = []
|
||||
const noise = []
|
||||
const methanal = []
|
||||
const tvoc = []
|
||||
const ethanol = []
|
||||
const methane = []
|
||||
data.forEach(item => {
|
||||
wind.unshift(item.windspeed)
|
||||
noise.unshift(item.noise)
|
||||
methanal.unshift(item.methanal)
|
||||
tvoc.unshift(item.tvoc)
|
||||
ethanol.unshift(item.ethanol)
|
||||
methane.unshift(item.methane)
|
||||
})
|
||||
this.options[0].series[0].data = wind
|
||||
this.options[1].series[0].data = noise
|
||||
this.options[2].series[0].data = methanal
|
||||
this.options[3].series[0].data = tvoc
|
||||
this.options[4].series[0].data = ethanol
|
||||
this.options[5].series[0].data = methane
|
||||
const charts = document.getElementsByClassName('chart')
|
||||
charts.forEach((chart) => {
|
||||
this.myCharts.push(this.$echarts.init(chart))
|
||||
})
|
||||
this.options.forEach((option, index) => {
|
||||
this.myCharts[index].setOption(option)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,73 @@
|
|||
<template>
|
||||
<div
|
||||
class="antenna"
|
||||
:class="[length, { active: active }]"
|
||||
>
|
||||
<span v-if="desc" class="desc" :class="{'activeText':active}">{{ desc }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
active: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
length: {
|
||||
type: String,
|
||||
default: 'short'
|
||||
},
|
||||
desc: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.antenna {
|
||||
position: relative;
|
||||
width: 6px;
|
||||
background: linear-gradient(0deg, #dbe0e7 50%, #f8fbff 100%);
|
||||
box-shadow: 6px 6px 16px 0px rgba(59, 64, 86, 0.1);
|
||||
border-radius: 16px 16px 0 0;
|
||||
opacity: 1;
|
||||
.desc{
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
white-space: nowrap;
|
||||
color: #000000;
|
||||
}
|
||||
.activeText{
|
||||
color: #f36819;
|
||||
}
|
||||
}
|
||||
.short {
|
||||
height: 10px;
|
||||
}
|
||||
.long {
|
||||
height: 20px;
|
||||
}
|
||||
.short_lg{
|
||||
height: 30px;
|
||||
}
|
||||
.long_lg{
|
||||
height: 60px;
|
||||
}
|
||||
.active {
|
||||
background: linear-gradient(0deg, #f36819 0%, #f8fbff 100%);
|
||||
animation: 1s ease-in-out 0s infinite alternate fade;
|
||||
}
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue