forked from floraachy/xiuos_IoT
develop data value page
This commit is contained in:
龚祖望
parent
fd44740af6
commit
ff03dbf280
|
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -48,7 +48,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
showBreadcrumb() {
|
showBreadcrumb() {
|
||||||
const whiteList = ['overview', 'terminal/add']
|
const whiteList = ['overview', 'terminal/add', 'data/value']
|
||||||
return whiteList.every((item) => this.$route.path.indexOf(item) === -1)
|
return whiteList.every((item) => this.$route.path.indexOf(item) === -1)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -228,7 +228,7 @@ export const constantRoutes = [
|
||||||
path: 'value',
|
path: 'value',
|
||||||
name: 'Value',
|
name: 'Value',
|
||||||
component: () => import('@/views/data/value/index'),
|
component: () => import('@/views/data/value/index'),
|
||||||
meta: { title: '数据价值', disabled: true }
|
meta: { title: '数据价值' }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
* @Author: 龚祖望 573413756@qq.com
|
* @Author: 龚祖望 573413756@qq.com
|
||||||
* @Date: 2022-05-16 09:16:41
|
* @Date: 2022-05-16 09:16:41
|
||||||
* @LastEditors: 龚祖望 573413756@qq.com
|
* @LastEditors: 龚祖望 573413756@qq.com
|
||||||
* @LastEditTime: 2022-09-01 09:34:55
|
* @LastEditTime: 2022-09-01 20:13:59
|
||||||
* @FilePath: \dashengda\src\utils\request.js
|
* @FilePath: \dashengda\src\utils\request.js
|
||||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||||
*/
|
*/
|
||||||
|
|
@ -27,8 +27,6 @@ service.interceptors.request.use(
|
||||||
config => {
|
config => {
|
||||||
// do something before request is sent
|
// do something before request is sent
|
||||||
config.data = JSON.stringify(config.data)
|
config.data = JSON.stringify(config.data)
|
||||||
console.log('data', config.data)
|
|
||||||
console.log('config', config)
|
|
||||||
if (store.getters.token) {
|
if (store.getters.token) {
|
||||||
// let each request carry token
|
// let each request carry token
|
||||||
// ['X-Token'] is a custom headers key
|
// ['X-Token'] is a custom headers key
|
||||||
|
|
@ -67,7 +65,9 @@ service.interceptors.response.use(
|
||||||
duration: 5 * 1000
|
duration: 5 * 1000
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
if (res.code === '200300') {
|
||||||
|
|
||||||
|
}
|
||||||
// // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
|
// // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
|
||||||
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
|
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
|
||||||
// // to re-login
|
// // to re-login
|
||||||
|
|
@ -87,7 +87,6 @@ service.interceptors.response.use(
|
||||||
// }
|
// }
|
||||||
},
|
},
|
||||||
error => {
|
error => {
|
||||||
console.log('err' + error) // for debug
|
|
||||||
Message({
|
Message({
|
||||||
message: error.message,
|
message: error.message,
|
||||||
type: 'error',
|
type: 'error',
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,878 @@
|
||||||
|
<template>
|
||||||
|
<div class="app-container" style="min-height: calc(100vh - 50px)">
|
||||||
|
<el-row
|
||||||
|
type="flex"
|
||||||
|
justify="space-between"
|
||||||
|
style="align-items: baseline; margin-bottom: 25px"
|
||||||
|
>
|
||||||
|
<div class="header">
|
||||||
|
<h1 class="title">大胜达数据价值</h1>
|
||||||
|
<span class="date">{{ date }}</span>
|
||||||
|
</div>
|
||||||
|
</el-row>
|
||||||
|
<el-card class="border_radius40 card-container">
|
||||||
|
<el-row type="flex">
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-card class="border_radius40">
|
||||||
|
<img src="@/assets/images/wind.png" width="60px" class="param_icon"></img>
|
||||||
|
<p class="title orange">风速分析：无风</p>
|
||||||
|
<span class="subtitle">——日平均数据</span>
|
||||||
|
<div class="chart" />
|
||||||
|
</el-card>
|
||||||
|
<el-card class="border_radius40">
|
||||||
|
<img src="@/assets/images/noise.png" width="60px" class="param_icon"></img>
|
||||||
|
<p class="title purple">噪音分析：一级</p>
|
||||||
|
<span class="subtitle">——日平均数据</span>
|
||||||
|
<div class="chart" />
|
||||||
|
</el-card>
|
||||||
|
<el-card class="border_radius40">
|
||||||
|
<img src="@/assets/images/chemical.png" width="60px" class="param_icon"></img>
|
||||||
|
<p class="title green">甲醛分析：轻微气喘</p>
|
||||||
|
<span class="subtitle">——日平均数据</span>
|
||||||
|
<div class="chart" />
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="center">
|
||||||
|
<el-card class="border_radius20 center_top" style="margin-top:60px">
|
||||||
|
<img src="@/assets/images/leaf.png" width="80px" class="center_icon"></img>
|
||||||
|
<p class="title blue" style="font-size: 25px;margin-top: 30px;">
|
||||||
|
空气质量分析：清新舒畅
|
||||||
|
</p>
|
||||||
|
<span class="subtitle" style="font-size: 18px">——日均数值</span>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="blue air_element">PM2.5</p>
|
||||||
|
<p class="element_val">4<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>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="blue air_element">SO2</p>
|
||||||
|
<p class="element_val">6<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">
|
||||||
|
<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="blue bold">湿度</li>
|
||||||
|
<li class="val">50<span class="unit">%rh</span></li>
|
||||||
|
</ul>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<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="blue bold">气压</li>
|
||||||
|
<li class="val">101<span class="unit">kPa</span></li>
|
||||||
|
</ul>
|
||||||
|
</el-col>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-card class="border_radius40">
|
||||||
|
<img src="@/assets/images/glass.png" width="60px" class="param_icon"></img>
|
||||||
|
<p class="title orange">TVOC分析：正常</p>
|
||||||
|
<span class="subtitle">——日平均数据</span>
|
||||||
|
<div class="chart" />
|
||||||
|
</el-card>
|
||||||
|
<el-card class="border_radius40">
|
||||||
|
<img src="@/assets/images/line.png" width="60px" class="param_icon"></img>
|
||||||
|
<p class="title purple">乙醇分析：无</p>
|
||||||
|
<span class="subtitle">——日平均数据</span>
|
||||||
|
<div class="chart" />
|
||||||
|
</el-card>
|
||||||
|
<el-card class="border_radius40">
|
||||||
|
<img src="@/assets/images/ch4.png" width="60px" class="param_icon"></img>
|
||||||
|
<p class="title green">甲烷分析：黄色预警</p>
|
||||||
|
<span class="subtitle">——日平均数据</span>
|
||||||
|
<div class="chart" />
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
date: '',
|
||||||
|
myCharts: [],
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '0',
|
||||||
|
top: '40%',
|
||||||
|
containLabel: false
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: '{a|0.12} {b|m/s}',
|
||||||
|
left: 'center',
|
||||||
|
top: '10%',
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
fontSize: '25px',
|
||||||
|
color: '#707070'
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
fontSize: '18px',
|
||||||
|
color: '#707070'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
'1',
|
||||||
|
'3',
|
||||||
|
'5',
|
||||||
|
'7',
|
||||||
|
'9',
|
||||||
|
'11',
|
||||||
|
'13',
|
||||||
|
'15',
|
||||||
|
'17',
|
||||||
|
'19',
|
||||||
|
'21',
|
||||||
|
'23'
|
||||||
|
],
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '风速(m/s)',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '60%',
|
||||||
|
data: [1, 2.5, 1.3, 2.2, 3.4, 2.6, 2, 2.5, 3.2, 1.1, 0.8, 1.6],
|
||||||
|
itemStyle: {
|
||||||
|
color: '#FAB05A'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
color: '#FF0000'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '0',
|
||||||
|
top: '30%',
|
||||||
|
containLabel: false
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: '{a|32} {b|dB}',
|
||||||
|
left: 'center',
|
||||||
|
top: '10%',
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
fontSize: '25px',
|
||||||
|
color: '#707070'
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
fontSize: '18px',
|
||||||
|
color: '#707070'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
formatter: '{a} <br /> {b}：{c}dB',
|
||||||
|
axisPointer: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#FF0000'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
'1',
|
||||||
|
'3',
|
||||||
|
'5',
|
||||||
|
'7',
|
||||||
|
'9',
|
||||||
|
'11',
|
||||||
|
'13',
|
||||||
|
'15',
|
||||||
|
'17',
|
||||||
|
'19',
|
||||||
|
'21',
|
||||||
|
'23'
|
||||||
|
],
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
type: 'value',
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '噪音',
|
||||||
|
data: [20, 55, 33, 70, 44, 80, 34, 49, 57, 39, 26, 55],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
showSymbol: false,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 5,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#FF0000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#724FE8'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '0',
|
||||||
|
top: '30%',
|
||||||
|
containLabel: false
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: '{a|61} {b|ppb}',
|
||||||
|
left: 'center',
|
||||||
|
top: '10%',
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
fontSize: '25px',
|
||||||
|
color: '#707070'
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
fontSize: '18px',
|
||||||
|
color: '#707070'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
formatter: '{a} <br /> {b}：{c}ppb',
|
||||||
|
axisPointer: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#FF0000'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
'1',
|
||||||
|
'3',
|
||||||
|
'5',
|
||||||
|
'7',
|
||||||
|
'9',
|
||||||
|
'11',
|
||||||
|
'13',
|
||||||
|
'15',
|
||||||
|
'17',
|
||||||
|
'19',
|
||||||
|
'21',
|
||||||
|
'23'
|
||||||
|
],
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
type: 'value',
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '甲醛',
|
||||||
|
data: [50, 55, 43, 70, 62, 80, 34, 49, 57, 39, 66, 55],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
showAllSymbol: true,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#20BE0B',
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, .3)',
|
||||||
|
shadowBlur: 0,
|
||||||
|
shadowOffsetY: 1,
|
||||||
|
shadowOffsetX: 1
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#20BE0B'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
color: 'red',
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 3,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, .3)',
|
||||||
|
shadowBlur: 0,
|
||||||
|
shadowOffsetY: 2,
|
||||||
|
shadowOffsetX: 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '0',
|
||||||
|
top: '40%',
|
||||||
|
containLabel: false
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: '{a|235} {b|ppb}',
|
||||||
|
left: 'center',
|
||||||
|
top: '10%',
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
fontSize: '25px',
|
||||||
|
color: '#707070'
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
fontSize: '18px',
|
||||||
|
color: '#707070'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
'1',
|
||||||
|
'3',
|
||||||
|
'5',
|
||||||
|
'7',
|
||||||
|
'9',
|
||||||
|
'11',
|
||||||
|
'13',
|
||||||
|
'15',
|
||||||
|
'17',
|
||||||
|
'19',
|
||||||
|
'21',
|
||||||
|
'23'
|
||||||
|
],
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'TVOC(ppb)',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '60%',
|
||||||
|
data: [1, 2.5, 1.3, 2.2, 3.4, 2.6, 2, 2.5, 3.2, 1.1, 0.8, 1.6],
|
||||||
|
itemStyle: {
|
||||||
|
color: '#FAB05A'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
color: '#FF0000'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '0',
|
||||||
|
top: '30%',
|
||||||
|
containLabel: false
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: '{a|34} {b|ppb}',
|
||||||
|
left: 'center',
|
||||||
|
top: '10%',
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
fontSize: '25px',
|
||||||
|
color: '#707070'
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
fontSize: '18px',
|
||||||
|
color: '#707070'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
formatter: '{a} <br /> {b}：{c}ppb',
|
||||||
|
axisPointer: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#FF0000'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
'1',
|
||||||
|
'3',
|
||||||
|
'5',
|
||||||
|
'7',
|
||||||
|
'9',
|
||||||
|
'11',
|
||||||
|
'13',
|
||||||
|
'15',
|
||||||
|
'17',
|
||||||
|
'19',
|
||||||
|
'21',
|
||||||
|
'23'
|
||||||
|
],
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
type: 'value',
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '乙醇',
|
||||||
|
data: [20, 55, 33, 70, 44, 80, 34, 49, 57, 39, 26, 55],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
showSymbol: false,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 5,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#FF0000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#724FE8'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '0',
|
||||||
|
top: '20%',
|
||||||
|
containLabel: false
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: '{a|3.2} {b|%LEL}',
|
||||||
|
left: 'center',
|
||||||
|
top: '10%',
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
fontSize: '25px',
|
||||||
|
color: '#707070'
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
fontSize: '18px',
|
||||||
|
color: '#707070'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
formatter: '{a} <br /> {b}：{c}%LEL',
|
||||||
|
axisPointer: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#FF0000'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: [
|
||||||
|
'1',
|
||||||
|
'3',
|
||||||
|
'5',
|
||||||
|
'7',
|
||||||
|
'9',
|
||||||
|
'11',
|
||||||
|
'13',
|
||||||
|
'15',
|
||||||
|
'17',
|
||||||
|
'19',
|
||||||
|
'21',
|
||||||
|
'23'
|
||||||
|
],
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
type: 'value',
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '甲烷',
|
||||||
|
data: [50, 55, 43, 70, 62, 80, 34, 49, 57, 39, 66, 55],
|
||||||
|
type: 'line',
|
||||||
|
smooth: true,
|
||||||
|
showAllSymbol: true,
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#20BE0B',
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, .3)',
|
||||||
|
shadowBlur: 0,
|
||||||
|
shadowOffsetY: 1,
|
||||||
|
shadowOffsetX: 1
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#20BE0B'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
color: 'red',
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 3,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, .3)',
|
||||||
|
shadowBlur: 0,
|
||||||
|
shadowOffsetY: 2,
|
||||||
|
shadowOffsetX: 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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.date = new Date().toLocaleDateString()
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myCharts.forEach(chart => {
|
||||||
|
chart.resize()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.el-card{
|
||||||
|
box-shadow: 0 10px 20px 0 rgb(0 0 0 / 20%);
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
.card-container{
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
.app-container {
|
||||||
|
font-family: Avenir;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
font-family: Lato;
|
||||||
|
.title {
|
||||||
|
color: #174a84;
|
||||||
|
}
|
||||||
|
.date {
|
||||||
|
color: #a5c9ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: 21px;
|
||||||
|
font-family: Microsoft YaHei;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.subtitle {
|
||||||
|
float: right;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #696969;
|
||||||
|
}
|
||||||
|
.remark{
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #696969;
|
||||||
|
margin-top: 0;
|
||||||
|
// margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
.air-data {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
.air_element {
|
||||||
|
font-size: 21px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: Nueva Std;
|
||||||
|
}
|
||||||
|
.element_val {
|
||||||
|
// line-height: 1.2;
|
||||||
|
font-size: 25px;
|
||||||
|
color: #707070;
|
||||||
|
.unit {
|
||||||
|
font-family: MicrosoftYaHei;
|
||||||
|
font-size: 21px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.center{
|
||||||
|
padding: 0 50px;
|
||||||
|
}
|
||||||
|
.center_top{
|
||||||
|
height: 35vh;
|
||||||
|
min-height: 280px;
|
||||||
|
}
|
||||||
|
.center_btm{
|
||||||
|
height: 30vh;
|
||||||
|
min-height: 260px;
|
||||||
|
overflow: auto;
|
||||||
|
font-size: 20px;
|
||||||
|
.subtext{
|
||||||
|
text-align: end;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.val{
|
||||||
|
font-size: 25px;
|
||||||
|
color: #707070;
|
||||||
|
.unit{
|
||||||
|
font-size: 21px;
|
||||||
|
font-family: MicrosoftYaHei;
|
||||||
|
color: #707070;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.chart {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100px;
|
||||||
|
height: 15vh;
|
||||||
|
}
|
||||||
|
.orange {
|
||||||
|
color: #fab05a;
|
||||||
|
}
|
||||||
|
.purple {
|
||||||
|
color: #724fe8;
|
||||||
|
}
|
||||||
|
.green {
|
||||||
|
color: #20be0b;
|
||||||
|
}
|
||||||
|
.blue {
|
||||||
|
color: #00ccf2;
|
||||||
|
}
|
||||||
|
.bold{
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.border_radius20{
|
||||||
|
border-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.border_radius40{
|
||||||
|
border-radius: 40px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.param_icon{
|
||||||
|
position: absolute;
|
||||||
|
top: 35%;
|
||||||
|
left: -30px;
|
||||||
|
}
|
||||||
|
.center_icon{
|
||||||
|
position: absolute;
|
||||||
|
top: -40px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
ul{
|
||||||
|
padding-left: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
li{
|
||||||
|
list-style: none;
|
||||||
|
overflow: hidden;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<h1>产品介绍</h1>
|
<h1>产品介绍</h1>
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="18" :offset="3">
|
<el-col :span="18" :offset="3">
|
||||||
<img src="@/assets/images/M528.png" width="60%"></img>
|
<img src="@/assets/images/RV400-AR100.png" width="60%"></img>
|
||||||
<p class="intro">矽璓智能终端M528-A800-5G-HM100采用多核异构设计，由一个主控CPU和通信CPU构成。
|
<p class="intro">矽璓智能终端M528-A800-5G-HM100采用多核异构设计，由一个主控CPU和通信CPU构成。
|
||||||
主控CPU基于NXP 公司 i.MXRT1052 跨界处理器设计，搭载ARM Cortex -M7内核，集微控制器的低功耗、易用性与应用处理器的高性能、高扩展性于一体。
|
主控CPU基于NXP 公司 i.MXRT1052 跨界处理器设计，搭载ARM Cortex -M7内核，集微控制器的低功耗、易用性与应用处理器的高性能、高扩展性于一体。
|
||||||
主频528MHz，SDRAM 16MB， QSPI -Nor Flash 4MB 。
|
主频528MHz，SDRAM 16MB， QSPI -Nor Flash 4MB 。
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<h1>产品介绍</h1>
|
<h1>产品介绍</h1>
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="18" :offset="3">
|
<el-col :span="18" :offset="3">
|
||||||
<img src="@/assets/images/M168.png" width="60%"></img>
|
<img src="@/assets/images/SR100.png" width="60%"></img>
|
||||||
<p class="intro">
|
<p class="intro">
|
||||||
矽璓智能终端RV400-NPU4T-5G-SR100采用多核异构设计，集成了一个Hi3559A主核和RISCV架构从核，其中Hi3559AV100 包含了丰富的计算资源，包括单核的 A53、 双核 A73 和双核 A53 组成的 big.LITTLE 系统。
|
矽璓智能终端RV400-NPU4T-5G-SR100采用多核异构设计，集成了一个Hi3559A主核和RISCV架构从核，其中Hi3559AV100 包含了丰富的计算资源，包括单核的 A53、 双核 A73 和双核 A53 组成的 big.LITTLE 系统。
|
||||||
一个 M7、 一个 GPU、 两个 DSP 和 NNIE 加速引擎，功能齐全，技术指标高，工艺先进且整体性能相当均衡，可以满足多个行业的需求。
|
一个 M7、 一个 GPU、 两个 DSP 和 NNIE 加速引擎，功能齐全，技术指标高，工艺先进且整体性能相当均衡，可以满足多个行业的需求。
|
||||||
|
|
|
||||||
|
|
@ -176,7 +176,6 @@ export default {
|
||||||
this.date = new Date().toLocaleDateString()
|
this.date = new Date().toLocaleDateString()
|
||||||
this.getList(0)
|
this.getList(0)
|
||||||
this.getList(1)
|
this.getList(1)
|
||||||
console.log('区域', 3.3 % 2)
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
selectCompany() {
|
selectCompany() {
|
||||||
|
|
|
||||||
|
|
@ -139,7 +139,118 @@ import { getList } from '@/api/terminal/center'
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
deviceList: [],
|
deviceList: [
|
||||||
|
{
|
||||||
|
productname: '彩印车间',
|
||||||
|
status: 1,
|
||||||
|
statusdesc: '运行',
|
||||||
|
type: 'M-168-Lora-FM100',
|
||||||
|
kernel: 'rt-thread kenel',
|
||||||
|
webversion: '1.0',
|
||||||
|
no: 'A000001',
|
||||||
|
ipaddr: '192.168.131.29',
|
||||||
|
netmask: '255.255.254.0',
|
||||||
|
gateway: '192.168.130.1',
|
||||||
|
dnsserver0: '10.0.110.21',
|
||||||
|
dnsserver1: '10.0.110.20',
|
||||||
|
topic: '/broadcast/hf6mzwdVnJg/989898',
|
||||||
|
serveraddr: 'zwdVnJg.iot-as-mqtt.cn-shanghai.aliyuncs.com',
|
||||||
|
serverport: '1883',
|
||||||
|
username: 'test1&hf6mzwdVnJg',
|
||||||
|
clientid: '123|securemode=3,signmethod=hmacsha1|',
|
||||||
|
privateserveraddr: '192.168.131.30',
|
||||||
|
privateserverport: '9898',
|
||||||
|
privateserverusername: 'admin'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
productname: '生产车间',
|
||||||
|
status: 0,
|
||||||
|
statusdesc: '待机',
|
||||||
|
type: 'M528-A800-5G-HM100',
|
||||||
|
kernel: 'rt-thread kenel',
|
||||||
|
webversion: '1.0',
|
||||||
|
no: 'A000002',
|
||||||
|
ipaddr: '192.168.131.29',
|
||||||
|
netmask: '255.255.254.0',
|
||||||
|
gateway: '192.168.130.1',
|
||||||
|
dnsserver0: '10.0.110.21',
|
||||||
|
dnsserver1: '10.0.110.20',
|
||||||
|
topic: '/broadcast/hf6mzwdVnJg/989898',
|
||||||
|
serveraddr: 'zwdVnJg.iot-as-mqtt.cn-shanghai.aliyuncs.com',
|
||||||
|
serverport: '1883',
|
||||||
|
username: 'test1&hf6mzwdVnJg',
|
||||||
|
clientid: '123|securemode=3,signmethod=hmacsha1|',
|
||||||
|
privateserveraddr: '192.168.131.30',
|
||||||
|
privateserverport: '9898',
|
||||||
|
privateserverusername: 'admin'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
productname: '成型车间',
|
||||||
|
status: 1,
|
||||||
|
statusdesc: '运行',
|
||||||
|
type: 'RV400-NPU4T-5G-SR100',
|
||||||
|
kernel: 'rt-thread kenel',
|
||||||
|
webversion: '1.0',
|
||||||
|
no: 'A000003',
|
||||||
|
ipaddr: '192.168.131.29',
|
||||||
|
netmask: '255.255.254.0',
|
||||||
|
gateway: '192.168.130.1',
|
||||||
|
dnsserver0: '10.0.110.21',
|
||||||
|
dnsserver1: '10.0.110.20',
|
||||||
|
topic: '/broadcast/hf6mzwdVnJg/989898',
|
||||||
|
serveraddr: 'zwdVnJg.iot-as-mqtt.cn-shanghai.aliyuncs.com',
|
||||||
|
serverport: '1883',
|
||||||
|
username: 'test1&hf6mzwdVnJg',
|
||||||
|
clientid: '123|securemode=3,signmethod=hmacsha1|',
|
||||||
|
privateserveraddr: '192.168.131.30',
|
||||||
|
privateserverport: '9898',
|
||||||
|
privateserverusername: 'admin'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
productname: '打包车间',
|
||||||
|
status: 2,
|
||||||
|
statusdesc: '警告',
|
||||||
|
type: 'RV400-NPU16T-5G-AR100',
|
||||||
|
kernel: 'rt-thread kenel',
|
||||||
|
webversion: '1.0',
|
||||||
|
no: 'A000004',
|
||||||
|
ipaddr: '192.168.131.29',
|
||||||
|
netmask: '255.255.254.0',
|
||||||
|
gateway: '192.168.130.1',
|
||||||
|
dnsserver0: '10.0.110.21',
|
||||||
|
dnsserver1: '10.0.110.20',
|
||||||
|
topic: '/broadcast/hf6mzwdVnJg/989898',
|
||||||
|
serveraddr: 'zwdVnJg.iot-as-mqtt.cn-shanghai.aliyuncs.com',
|
||||||
|
serverport: '1883',
|
||||||
|
username: 'test1&hf6mzwdVnJg',
|
||||||
|
clientid: '123|securemode=3,signmethod=hmacsha1|',
|
||||||
|
privateserveraddr: '192.168.131.30',
|
||||||
|
privateserverport: '9898',
|
||||||
|
privateserverusername: 'admin'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
productname: '打包车间',
|
||||||
|
status: 1,
|
||||||
|
statusdesc: '运行',
|
||||||
|
type: 'RV400-NPU16T-5G-AR100',
|
||||||
|
kernel: 'rt-thread kenel',
|
||||||
|
webversion: '1.0',
|
||||||
|
no: 'A000005',
|
||||||
|
ipaddr: '192.168.131.29',
|
||||||
|
netmask: '255.255.254.0',
|
||||||
|
gateway: '192.168.130.1',
|
||||||
|
dnsserver0: '10.0.110.21',
|
||||||
|
dnsserver1: '10.0.110.20',
|
||||||
|
topic: '/broadcast/hf6mzwdVnJg/989898',
|
||||||
|
serveraddr: 'zwdVnJg.iot-as-mqtt.cn-shanghai.aliyuncs.com',
|
||||||
|
serverport: '1883',
|
||||||
|
username: 'test1&hf6mzwdVnJg',
|
||||||
|
clientid: '123|securemode=3,signmethod=hmacsha1|',
|
||||||
|
privateserveraddr: '192.168.131.30',
|
||||||
|
privateserverport: '9898',
|
||||||
|
privateserverusername: 'admin'
|
||||||
|
}
|
||||||
|
],
|
||||||
visible: false,
|
visible: false,
|
||||||
current: {},
|
current: {},
|
||||||
protocol: 'TCP/IP'
|
protocol: 'TCP/IP'
|
||||||
|
|
@ -232,6 +343,7 @@ export default {
|
||||||
getList() {
|
getList() {
|
||||||
getList({ activestatus: 1 }).then(res => {
|
getList({ activestatus: 1 }).then(res => {
|
||||||
if (res.code === '200000') {
|
if (res.code === '200000') {
|
||||||
|
this.deviceList = []
|
||||||
res.data.forEach(item => {
|
res.data.forEach(item => {
|
||||||
this.deviceList.push({ ...item, status: item.runstatus })
|
this.deviceList.push({ ...item, status: item.runstatus })
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ module.exports = {
|
||||||
publicPath: '/',
|
publicPath: '/',
|
||||||
outputDir: 'dist',
|
outputDir: 'dist',
|
||||||
assetsDir: 'static',
|
assetsDir: 'static',
|
||||||
lintOnSave: process.env.NODE_ENV === 'development',
|
lintOnSave: false,
|
||||||
productionSourceMap: false,
|
productionSourceMap: false,
|
||||||
devServer: {
|
devServer: {
|
||||||
port: port,
|
port: port,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue