develop data value page

This commit is contained in:
龚祖望 2022-09-08 14:48:56 +08:00
parent fd44740af6
commit ff03dbf280
17 changed files with 999 additions and 11 deletions

View File

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 106 KiB

BIN
src/assets/images/ch4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

BIN
src/assets/images/glass.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/assets/images/leaf.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/images/line.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/images/noise.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/assets/images/wind.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -48,7 +48,7 @@ export default {
}
},
showBreadcrumb() {
const whiteList = ['overview', 'terminal/add']
const whiteList = ['overview', 'terminal/add', 'data/value']
return whiteList.every((item) => this.$route.path.indexOf(item) === -1)
}
},

View File

@ -228,7 +228,7 @@ export const constantRoutes = [
path: 'value',
name: 'Value',
component: () => import('@/views/data/value/index'),
meta: { title: '数据价值', disabled: true }
meta: { title: '数据价值' }
}
]
},

View File

@ -2,7 +2,7 @@
* @Author: 龚祖望 573413756@qq.com
* @Date: 2022-05-16 09:16:41
* @LastEditors: 龚祖望 573413756@qq.com
* @LastEditTime: 2022-09-01 09:34:55
* @LastEditTime: 2022-09-01 20:13:59
* @FilePath: \dashengda\src\utils\request.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
@ -27,8 +27,6 @@ service.interceptors.request.use(
config => {
// do something before request is sent
config.data = JSON.stringify(config.data)
console.log('data', config.data)
console.log('config', config)
if (store.getters.token) {
// let each request carry token
// ['X-Token'] is a custom headers key
@ -67,7 +65,9 @@ service.interceptors.response.use(
duration: 5 * 1000
})
}
if (res.code === '200300') {
}
// // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// // to re-login
@ -87,7 +87,6 @@ service.interceptors.response.use(
// }
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',

View File

@ -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>

View File

@ -6,7 +6,7 @@
<h1>产品介绍</h1>
<el-row>
<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构成
主控CPU基于NXP 公司 i.MXRT1052 跨界处理器设计搭载ARM Cortex -M7内核集微控制器的低功耗易用性与应用处理器的高性能高扩展性于一体
主频528MHzSDRAM 16MB QSPI -Nor Flash 4MB

View File

@ -6,7 +6,7 @@
<h1>产品介绍</h1>
<el-row>
<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">
矽璓智能终端RV400-NPU4T-5G-SR100采用多核异构设计集成了一个Hi3559A主核和RISCV架构从核其中Hi3559AV100 包含了丰富的计算资源包括单核的 A53 双核 A73 和双核 A53 组成的 big.LITTLE 系统
一个 M7 一个 GPU 两个 DSP NNIE 加速引擎功能齐全技术指标高工艺先进且整体性能相当均衡可以满足多个行业的需求

View File

@ -176,7 +176,6 @@ export default {
this.date = new Date().toLocaleDateString()
this.getList(0)
this.getList(1)
console.log('区域', 3.3 % 2)
},
methods: {
selectCompany() {

View File

@ -139,7 +139,118 @@ import { getList } from '@/api/terminal/center'
export default {
data() {
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,
current: {},
protocol: 'TCP/IP'
@ -232,6 +343,7 @@ export default {
getList() {
getList({ activestatus: 1 }).then(res => {
if (res.code === '200000') {
this.deviceList = []
res.data.forEach(item => {
this.deviceList.push({ ...item, status: item.runstatus })
})

View File

@ -24,7 +24,7 @@ module.exports = {
publicPath: '/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
lintOnSave: false,
productionSourceMap: false,
devServer: {
port: port,