修改
This commit is contained in:
jingna
parent
a5061fd6ee
commit
fa395f3f8e
@ -109,7 +109,7 @@
|
||||
|
||||
</div>
|
||||
<!-- 仪表盘区域 -->
|
||||
<div style="display: flex;justify-content: space-between;padding: 10px;padding-top: 10px;">
|
||||
<div style="display: flex;justify-content: space-between;padding: 0px 10px;padding-top: 10px;">
|
||||
<div style="width: 33%;">
|
||||
<div id="headChart1" style="width: 100%;height: 140px;"></div>
|
||||
<!-- <img src="@/assets/test1.png" alt="" style="width: 100%;height: 140px;"> -->
|
||||
@ -137,10 +137,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 历史数据表格 -->
|
||||
<div style="display: flex;justify-content: center;padding: 0px 25px;">
|
||||
<div class="gauge-table-title">
|
||||
历史数据..
|
||||
</div>
|
||||
<div style="display: flex;justify-content: center;padding: 0px 25px;">
|
||||
<el-table :data="historyData" style="width: 96%;height: 160px;overflow: auto;">
|
||||
<el-table-column prop="id" label="ID" width="60" />
|
||||
<el-table-column label="最大旋转角" align="center">
|
||||
@ -402,7 +402,7 @@ let socket = null
|
||||
let frameCount = 0
|
||||
|
||||
// 后端服务器地址配置
|
||||
const BACKEND_URL = 'http://192.168.1.173:5000'
|
||||
const BACKEND_URL = 'http://192.168.1.58:5000'
|
||||
|
||||
const formattedTime = ref(0)
|
||||
const dialogVisible = ref(false)
|
||||
@ -417,52 +417,68 @@ const historyData = ref([
|
||||
{ id: 1, rotLeft: '-56.1°', rotRight: '55.7°', tiltLeft: '-17.5°', tiltRight: '18.5°', pitchDown: '-22.2°', pitchUp: '11.5°' }
|
||||
])
|
||||
const chartoption = ref({
|
||||
backgroundColor:'#000000',
|
||||
grid: { top: 0, right: 0, bottom: 0, left: 0 },
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
radius: '180%',
|
||||
center: ['50%', '90%'],
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: -90,
|
||||
max: 90,
|
||||
splitNumber: 10,
|
||||
itemStyle: {
|
||||
color: '#58D9F9',
|
||||
shadowColor: 'rgba(0,138,255,0.45)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
width: 18
|
||||
show: false,
|
||||
},
|
||||
pointer: {
|
||||
icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
|
||||
length: '75%',
|
||||
width: 10,
|
||||
offsetCenter: [0, '5%']
|
||||
},
|
||||
axisLine: {
|
||||
roundCap: true,
|
||||
lineStyle: {
|
||||
width: 18
|
||||
width: 5
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
length: 15,
|
||||
splitNumber: 2,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
distance: 25,
|
||||
color: '#999',
|
||||
fontSize: 20
|
||||
},
|
||||
anchor: {
|
||||
show: true,
|
||||
showAbove: true,
|
||||
size: 25,
|
||||
itemStyle: {
|
||||
borderWidth: 10
|
||||
splitLine: {
|
||||
length: 12,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
distance: 10,
|
||||
color: '#999',
|
||||
fontSize: 10
|
||||
},
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
fontSize: 80,
|
||||
offsetCenter: [0, '70%']
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 70
|
||||
value: 100
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1751,6 +1767,7 @@ onUnmounted(() => {
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.gauge-group-box-text1 {
|
||||
@ -1766,11 +1783,9 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.gauge-table-title {
|
||||
padding: 0px 5px;
|
||||
padding: 0px 10px;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
writing-mode: vertical-rl;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* .foot-container-left{
|
||||
@ -1852,28 +1867,30 @@ onUnmounted(() => {
|
||||
background: #1D1b26;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
:deep(.el-table__header-wrapper) {
|
||||
background: #E7e6e6;
|
||||
}
|
||||
|
||||
:deep(.dashboard-container .cell) {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
:deep(.el-table thead) {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
:deep(.el-table thead.is-group th.el-table__cell) {
|
||||
background: #d8d7d7;
|
||||
}
|
||||
|
||||
:deep(.el-table .el-table__cell) {
|
||||
padding: 4px 0px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.dashboard-container .el-table{
|
||||
background: transparent !important;
|
||||
}
|
||||
.dashboard-container .el-table tr{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.dashboard-container .el-table thead.is-group th.el-table__cell{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.dashboard-container .cell{
|
||||
color: #fff;
|
||||
}
|
||||
.dashboard-container .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.top-bar .el-button {
|
||||
height: 44px;
|
||||
border-radius: 25px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user