|
|
|
@ -6,10 +6,14 @@
|
|
|
|
|
<div
|
|
|
|
|
style="width: 150px;display: inline-block;vertical-align: top;color:#fff;text-align: center;margin-top: 20px">
|
|
|
|
|
<div style="color: #3A71A8">车辆总数</div>
|
|
|
|
|
<div style="font-size: 24px">222<span style="vertical-align: top;font-size: 12px;color:#1ab394">66.6%</span>
|
|
|
|
|
<div style="font-size: 24px">{{ carData.carTotal }}<span
|
|
|
|
|
style="vertical-align: top;font-size: 12px;color:#1ab394"> </span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="color: #3A71A8">已绑定GPS</div>
|
|
|
|
|
<div style="font-size: 24px">111<span style="vertical-align: top;font-size: 12px;color:#1ab394">33.3%</span>
|
|
|
|
|
<div style="font-size: 24px">{{ carData.carBindGps }}<span
|
|
|
|
|
style="vertical-align: top;font-size: 12px;color:#1ab394">{{
|
|
|
|
|
(carData.carBindGps / carData.carTotal).toFixed(4) * 100
|
|
|
|
|
}}%</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width: 90%;border-top: 1px solid #aaa;margin: 40px 0 40px 5%"></div>
|
|
|
|
@ -17,10 +21,14 @@
|
|
|
|
|
<div
|
|
|
|
|
style="width: 150px;display: inline-block;vertical-align: top;color:#fff;text-align: center;margin-top: 20px">
|
|
|
|
|
<div style="color: #3A71A8">轮胎数</div>
|
|
|
|
|
<div style="font-size: 24px">222<span style="vertical-align: top;font-size: 12px;color:#1ab394">66.6%</span>
|
|
|
|
|
<div style="font-size: 24px">{{ tyreData.tyreTotal }}<span
|
|
|
|
|
style="vertical-align: top;font-size: 12px;color:#1ab394"></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="color: #3A71A8">已安装传感器数</div>
|
|
|
|
|
<div style="font-size: 24px">111<span style="vertical-align: top;font-size: 12px;color:#1ab394">33.3%</span>
|
|
|
|
|
<div style="font-size: 24px">{{ tyreData.tyreBindSensor }}<span
|
|
|
|
|
style="vertical-align: top;font-size: 12px;color:#1ab394">{{
|
|
|
|
|
(tyreData.tyreBindSensor / tyreData.tyreTotal).toFixed(4) * 100
|
|
|
|
|
}}%</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
@ -65,62 +73,69 @@
|
|
|
|
|
<div
|
|
|
|
|
style="width: 20%;height: calc(100% - 20px);border-right: 1px solid #ccc;margin-top: 10px;display: inline-block;text-align: center;color:#fff;padding: 20px 0 0 0 ">
|
|
|
|
|
<div style="font-size: 32px;font-weight: 600;line-height: 50px">16</div>
|
|
|
|
|
<div>预警总数</div>
|
|
|
|
|
<div>报警总数</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: inline-block;width: 15%;height:100%;color:#fff;text-align: center;position:relative;">
|
|
|
|
|
<div style="display: inline-block;width: 20%;height:100%;color:#fff;text-align: center;position:relative;">
|
|
|
|
|
<img src="../assets/icons/highTemperature.png"
|
|
|
|
|
style="width: 40px;height: 40px;left: 0px;position: absolute">
|
|
|
|
|
<div style="width: 60%;margin-left: 30%;">
|
|
|
|
|
<div>1</div>
|
|
|
|
|
<div>低温预警</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: inline-block;width: 15%;height:100%;color:#fff;text-align: center;position:relative;">
|
|
|
|
|
<img src="../assets/icons/highTemperature.png"
|
|
|
|
|
style="width: 40px;height: 40px;left: 0px;position: absolute">
|
|
|
|
|
<div style="width: 60%;margin-left: 30%;">
|
|
|
|
|
<div>1</div>
|
|
|
|
|
<div>{{ warningInfo.istemperaturehigh }}</div>
|
|
|
|
|
<div>高温预警</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: inline-block;width: 15%;height:100%;color:#fff;text-align: center;position:relative;">
|
|
|
|
|
<div style="display: inline-block;width: 20%;height:100%;color:#fff;text-align: center;position:relative;">
|
|
|
|
|
<img src="../assets/icons/highTemperature.png"
|
|
|
|
|
style="width: 40px;height: 40px;left: 0px;position: absolute">
|
|
|
|
|
<div style="width: 60%;margin-left: 30%;">
|
|
|
|
|
<div>1</div>
|
|
|
|
|
<div>低压预警</div>
|
|
|
|
|
<div>{{ warningInfo.ispresshigh }}</div>
|
|
|
|
|
<div>高压预警</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: inline-block;width: 15%;height:100%;color:#fff;text-align: center;position:relative;">
|
|
|
|
|
<div style="display: inline-block;width: 20%;height:100%;color:#fff;text-align: center;position:relative;">
|
|
|
|
|
<img src="../assets/icons/highTemperature.png"
|
|
|
|
|
style="width: 40px;height: 40px;left: 0px;position: absolute">
|
|
|
|
|
<div style="width: 60%;margin-left: 30%;">
|
|
|
|
|
<div>1</div>
|
|
|
|
|
<div>高压预警</div>
|
|
|
|
|
<div>{{ warningInfo.ispresslower }}</div>
|
|
|
|
|
<div>低压预警</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: inline-block;width: 15%;height:100%;color:#fff;text-align: center;position:relative;">
|
|
|
|
|
<div style="display: inline-block;width: 20%;height:100%;color:#fff;text-align: center;position:relative;">
|
|
|
|
|
<img src="../assets/icons/highTemperature.png"
|
|
|
|
|
style="width: 40px;height: 40px;left: 0px;position: absolute">
|
|
|
|
|
<div style="width: 60%;margin-left: 30%;">
|
|
|
|
|
<div>12</div>
|
|
|
|
|
<div>其他预警</div>
|
|
|
|
|
<div>{{ warningInfo.ispowerinvalue }}</div>
|
|
|
|
|
<div>低电压预警</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</el-footer>
|
|
|
|
|
</el-container>
|
|
|
|
|
<el-aside style="background-color: rgba(0,0,0,0.3);overflow: auto;margin-bottom: 0;height: calc(100vh - 84px)"
|
|
|
|
|
width="350px">
|
|
|
|
|
<div v-for="i in 60" style="position:relative;color:#fff;height: 120px;">
|
|
|
|
|
<img src="../assets/icons/highTemperature.png"
|
|
|
|
|
style="width: 40px;height: 40px;position: absolute;top: 10px;left: 0px">
|
|
|
|
|
<div style="position: absolute;top: 10px;left: 50px;font-size: 16px">低压</div>
|
|
|
|
|
<div style="position: absolute;top:50px;left: 0px">时间</div>
|
|
|
|
|
<div style="position: absolute;top:70px;left: 0px">信息</div>
|
|
|
|
|
<div style="position: absolute;top: 10px;right: 0px;font-size: 24px">鲁B66666</div>
|
|
|
|
|
<div style="position: absolute;top: 50px;right: 0px">2排左侧内胎</div>
|
|
|
|
|
<div style="width: 100%;border-top: 1px solid #aaa;margin: 10px 0;position:absolute;top: 100px"></div>
|
|
|
|
|
<el-aside
|
|
|
|
|
style="background-color: rgba(0,0,0,0.3);overflow: auto;margin-bottom: 0;height: calc(100vh - 84px);;padding:12px 0 "
|
|
|
|
|
width="350px">
|
|
|
|
|
<div ref="warningRefP" style="height:100%;padding:0 24px">
|
|
|
|
|
<TransitionGroup class="container" name="fade" tag="div">
|
|
|
|
|
<div v-for="(i,index) in warringList" :key='index' ref="warningRef"
|
|
|
|
|
style="position:relative;color:#fff;height: 120px;">
|
|
|
|
|
<img src="../assets/icons/highTemperature.png"
|
|
|
|
|
style="width: 40px;height: 40px;position: absolute;top: 10px;left: 0px">
|
|
|
|
|
<div style="position: absolute;top: 10px;left: 50px;font-size: 16px">
|
|
|
|
|
{{ i.ispresslower === 1 ? '低压' : '' }}
|
|
|
|
|
{{ i.ispresshigh === 1 ? '高压' : '' }} {{ i.istemperaturehigh === 1 ? '高温' : '' }}
|
|
|
|
|
{{ i.ispowerinvalue === 1 ? '低电压' : '' }}
|
|
|
|
|
</div>
|
|
|
|
|
<div style="position: absolute;top:50px;left: 0px">{{ i.createTime }}</div>
|
|
|
|
|
<div style="position: absolute;top:70px;left: 0px">传感器id:{{ i.sensorid }}</div>
|
|
|
|
|
<div style="position: absolute;top: 10px;right: 0px;font-size: 24px">{{ i.carLicense }}</div>
|
|
|
|
|
<div style="position: absolute;top: 50px;right: 0px">
|
|
|
|
|
{{ i.tyreposition?.split('-')[0] }}排{{
|
|
|
|
|
i.tyreposition?.split('-')[1] === '1' ? '左' : '右'
|
|
|
|
|
}}侧{{ i.tyreposition?.split('-')[2] === '1' ? '外' : '内' }}胎
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
style="width: 100%;border-top: 1px solid #aaa;margin: 10px 0;position:absolute;top: 100px"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</TransitionGroup>
|
|
|
|
|
</div>
|
|
|
|
|
</el-aside>
|
|
|
|
|
</el-container>
|
|
|
|
@ -133,9 +148,10 @@ import * as echarts from 'echarts';
|
|
|
|
|
// import resize from './mixins/resize'
|
|
|
|
|
import chinaMap from './china.json'
|
|
|
|
|
import {getIndexdata} from "@/api/report/report";
|
|
|
|
|
import useUserStore from "@/store/modules/user";
|
|
|
|
|
|
|
|
|
|
const animationDuration = 6000
|
|
|
|
|
const username=null
|
|
|
|
|
const username = null
|
|
|
|
|
const dataInfo = ref({
|
|
|
|
|
carTotal: '',
|
|
|
|
|
carBindGps: '',
|
|
|
|
@ -161,11 +177,20 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
items: [1, 2, 3, 4, 5],
|
|
|
|
|
chart: null,
|
|
|
|
|
carChart: null,
|
|
|
|
|
tyreChart: null,
|
|
|
|
|
mapName: 'china',
|
|
|
|
|
geoCoordMap: {},
|
|
|
|
|
warringList: [],
|
|
|
|
|
warringWaitList: [],
|
|
|
|
|
warningInfo: {
|
|
|
|
|
ispowerinvalue: 0,
|
|
|
|
|
ispresshigh: 0,
|
|
|
|
|
ispresslower: 0,
|
|
|
|
|
istemperaturehigh: 0,
|
|
|
|
|
},
|
|
|
|
|
chartData: [...(chinaMap.features.map(e => {
|
|
|
|
|
return {
|
|
|
|
|
name: e.properties.name,
|
|
|
|
@ -175,142 +200,52 @@ export default {
|
|
|
|
|
name: '南海诸岛',
|
|
|
|
|
value: Math.random() * 200
|
|
|
|
|
}],
|
|
|
|
|
toolTipData: [
|
|
|
|
|
{
|
|
|
|
|
"name": "北京",
|
|
|
|
|
"value": [116.405285, 39.904989, 177]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "天津",
|
|
|
|
|
"value": [117.190182, 39.125596, 42]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "河北",
|
|
|
|
|
"value": [114.502461, 38.045474, 102]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "山西",
|
|
|
|
|
"value": [112.549248, 37.857014, 81]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "内蒙古",
|
|
|
|
|
"value": [111.670801, 40.818311, 47]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "辽宁",
|
|
|
|
|
"value": [123.429096, 41.796767, 67]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "吉林",
|
|
|
|
|
"value": [125.3245, 43.886841, 82]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "黑龙江",
|
|
|
|
|
"value": [126.642464, 45.756967, 66]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "上海",
|
|
|
|
|
"value": [121.472644, 31.231706, 24]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "江苏",
|
|
|
|
|
"value": [118.767413, 32.041544, 92]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "浙江",
|
|
|
|
|
"value": [120.153576, 30.287459, 114]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "安徽",
|
|
|
|
|
"value": [117.283042, 31.86119, 109]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "福建",
|
|
|
|
|
"value": [119.306239, 26.075302, 116]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "江西",
|
|
|
|
|
"value": [115.892151, 28.676493, 91]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "山东",
|
|
|
|
|
"value": [117.000923, 36.675807, 119]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "河南",
|
|
|
|
|
"value": [113.665412, 34.757975, 137]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "湖北",
|
|
|
|
|
"value": [114.298572, 30.584355, 116]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "湖南",
|
|
|
|
|
"value": [112.982279, 28.19409, 114]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "重庆",
|
|
|
|
|
"value": [106.504962, 29.533155, 91]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "四川",
|
|
|
|
|
"value": [104.065735, 30.659462, 125]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "贵州",
|
|
|
|
|
"value": [106.713478, 26.578343, 62]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "云南",
|
|
|
|
|
"value": [102.712251, 25.040609, 83]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "西藏",
|
|
|
|
|
"value": [91.132212, 29.660361, 9]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "陕西",
|
|
|
|
|
"value": [108.948024, 34.263161, 80]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "甘肃",
|
|
|
|
|
"value": [103.823557, 36.058039, 56]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "青海",
|
|
|
|
|
"value": [101.778916, 36.623178, 10]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "宁夏",
|
|
|
|
|
"value": [106.278179, 38.46637, 18]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "新疆",
|
|
|
|
|
"value": [87.617733, 43.792818, 67]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "广东",
|
|
|
|
|
"value": [113.280637, 23.125178, 123]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "广西",
|
|
|
|
|
"value": [108.320004, 22.82402, 59]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"name": "海南",
|
|
|
|
|
"value": [110.33119, 20.031971, 14]
|
|
|
|
|
}]
|
|
|
|
|
toolTipData: [],
|
|
|
|
|
carData: {
|
|
|
|
|
carBindGps: 0,
|
|
|
|
|
carTotal: 0
|
|
|
|
|
},
|
|
|
|
|
tyreData: {
|
|
|
|
|
tyreBindSensor: 0,
|
|
|
|
|
tyreTotal: 0
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
|
|
|
|
|
async mounted() {
|
|
|
|
|
// this.$nextTick(async () => {
|
|
|
|
|
// this.getErrInfo()
|
|
|
|
|
await this.setInfo()
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.initChart()
|
|
|
|
|
this.initCarChart()
|
|
|
|
|
this.initTyreChart()
|
|
|
|
|
this.getErrInfo()
|
|
|
|
|
let domList = this.$refs.warningRef
|
|
|
|
|
let domParent = this.$refs.warningRefP
|
|
|
|
|
let listLength = Math.floor(domParent.clientHeight / 120)
|
|
|
|
|
this.warringWaitList = []
|
|
|
|
|
let i = 1
|
|
|
|
|
let timeout = null
|
|
|
|
|
let timeoutF = () => {
|
|
|
|
|
timeout = setInterval(() => {
|
|
|
|
|
if (i >= listLength) {
|
|
|
|
|
clearInterval(timeout)
|
|
|
|
|
}
|
|
|
|
|
this.warringList.splice(this.warringList.length, 0, this.warringWaitList.splice(0, 1)[0])
|
|
|
|
|
i++
|
|
|
|
|
}, 1000)
|
|
|
|
|
}
|
|
|
|
|
timeoutF()
|
|
|
|
|
setInterval(() => {
|
|
|
|
|
if (this.warringWaitList.length > 0) {
|
|
|
|
|
this.warringList.splice(1, 0)
|
|
|
|
|
this.warringList.splice(this.warringList.length, 0, this.warringWaitList.splice(0, 1)[0])
|
|
|
|
|
}
|
|
|
|
|
}, 1000)
|
|
|
|
|
|
|
|
|
|
// console.log(this.warringList)
|
|
|
|
|
// console.log(domList.at(-1))
|
|
|
|
|
|
|
|
|
|
// domParent.scrollTop += 100
|
|
|
|
|
})
|
|
|
|
|
// })
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
if (!this.chart) {
|
|
|
|
@ -320,6 +255,29 @@ export default {
|
|
|
|
|
this.chart = null
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
async setInfo() {
|
|
|
|
|
await getIndexdata().then(response => {
|
|
|
|
|
// console.log(response)
|
|
|
|
|
this.warringWaitList = [...response.data.warringList, ...response.data.warringList, ...response.data.warringList],
|
|
|
|
|
this.carData = {
|
|
|
|
|
carBindGps: response.data.carBindGps,
|
|
|
|
|
carTotal: response.data.carTotal,
|
|
|
|
|
}
|
|
|
|
|
this.tyreData = {
|
|
|
|
|
tyreBindSensor: response.data.tyreBindSensor,
|
|
|
|
|
tyreTotal: response.data.tyreTotal,
|
|
|
|
|
}
|
|
|
|
|
this.toolTipData = response.data.carMap.map(e => {
|
|
|
|
|
return {
|
|
|
|
|
"name": '',
|
|
|
|
|
"value": [e.longitude, e.latitude, '']
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.initChart()
|
|
|
|
|
this.initCarChart()
|
|
|
|
|
this.initTyreChart()
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
setData(e) {
|
|
|
|
|
let item = e.filter(val => !!val)
|
|
|
|
|
this.XData = item.map(val => val.time || '')
|
|
|
|
@ -328,12 +286,6 @@ export default {
|
|
|
|
|
this.initChart()
|
|
|
|
|
},
|
|
|
|
|
initChart() {
|
|
|
|
|
getIndexdata().then(response => {
|
|
|
|
|
console.log(response)
|
|
|
|
|
|
|
|
|
|
}).finally(() => {
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
echarts.registerMap('china', chinaMap);
|
|
|
|
|
this.chart = echarts.init(document.getElementById('charts'), 'macarons')
|
|
|
|
|
this.chart.showLoading();
|
|
|
|
@ -481,7 +433,7 @@ export default {
|
|
|
|
|
this.carChart.setOption({
|
|
|
|
|
title: [
|
|
|
|
|
{
|
|
|
|
|
text: "333",
|
|
|
|
|
text: this.carData.carBindGps,
|
|
|
|
|
x: "center",
|
|
|
|
|
top: "52%",
|
|
|
|
|
textStyle: {
|
|
|
|
@ -491,7 +443,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
text: "60%",
|
|
|
|
|
text: (this.carData.carBindGps / this.carData.carTotal).toFixed(4) * 100 + '%',
|
|
|
|
|
x: "center",
|
|
|
|
|
top: "32%",
|
|
|
|
|
textStyle: {
|
|
|
|
@ -506,7 +458,7 @@ export default {
|
|
|
|
|
center: ["50%", "50%"],
|
|
|
|
|
},
|
|
|
|
|
angleAxis: {
|
|
|
|
|
max: 100,
|
|
|
|
|
max: this.carData.carTotal,
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
radiusAxis: {
|
|
|
|
@ -532,7 +484,7 @@ export default {
|
|
|
|
|
backgroundStyle: {
|
|
|
|
|
color: "rgba(66, 66, 66, .3)",
|
|
|
|
|
},
|
|
|
|
|
data: [60],
|
|
|
|
|
data: [this.carData.carBindGps],
|
|
|
|
|
coordinateSystem: "polar",
|
|
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
@ -558,7 +510,7 @@ export default {
|
|
|
|
|
this.tyreChart.setOption({
|
|
|
|
|
title: [
|
|
|
|
|
{
|
|
|
|
|
text: "333",
|
|
|
|
|
text: this.tyreData.tyreBindSensor,
|
|
|
|
|
x: "center",
|
|
|
|
|
top: "52%",
|
|
|
|
|
textStyle: {
|
|
|
|
@ -568,7 +520,7 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
text: "60%",
|
|
|
|
|
text: (this.tyreData.tyreBindSensor / this.tyreData.tyreTotal).toFixed(4) * 100 + '%',
|
|
|
|
|
x: "center",
|
|
|
|
|
top: "32%",
|
|
|
|
|
textStyle: {
|
|
|
|
@ -583,7 +535,7 @@ export default {
|
|
|
|
|
center: ["50%", "50%"],
|
|
|
|
|
},
|
|
|
|
|
angleAxis: {
|
|
|
|
|
max: 100,
|
|
|
|
|
max: this.tyreData.tyreTotal,
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
radiusAxis: {
|
|
|
|
@ -609,7 +561,7 @@ export default {
|
|
|
|
|
backgroundStyle: {
|
|
|
|
|
color: "rgba(66, 66, 66, .3)",
|
|
|
|
|
},
|
|
|
|
|
data: [60],
|
|
|
|
|
data: [this.tyreData.tyreBindSensor],
|
|
|
|
|
coordinateSystem: "polar",
|
|
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
@ -635,14 +587,15 @@ export default {
|
|
|
|
|
alert("您的浏览器不支持Websocket通信协议")
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
const userStore = useUserStore()
|
|
|
|
|
|
|
|
|
|
const getWebsocket = () => {
|
|
|
|
|
let websocket = new WebSocket("ws://10.11.41.249:8080/websocket/message/admin_ny")
|
|
|
|
|
let websocket = new WebSocket("ws://10.11.41.249:8080/websocket/message/" + userStore.name)
|
|
|
|
|
websocket.onopen = function (event) {
|
|
|
|
|
console.log("服务已连接")
|
|
|
|
|
// console.log('onopen',event)
|
|
|
|
|
};
|
|
|
|
|
websocket.onmessage = function (event) {
|
|
|
|
|
console.log(event)
|
|
|
|
|
// console.log('onmessage',event)
|
|
|
|
|
}
|
|
|
|
|
websocket.onerror = function () {
|
|
|
|
|
setTimeout(getWebsocket, 1000)
|
|
|
|
@ -657,4 +610,38 @@ export default {
|
|
|
|
|
.indexBg {
|
|
|
|
|
background-image: url('../assets/images/indexBg.jpg');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-notification {
|
|
|
|
|
height: 100px;
|
|
|
|
|
background-color: #040f39;
|
|
|
|
|
color: #fff
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 30px;
|
|
|
|
|
background-color: #f3f3f3;
|
|
|
|
|
border: 1px solid #666;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 1. 声明过渡效果 */
|
|
|
|
|
.fade-move,
|
|
|
|
|
.fade-enter-active,
|
|
|
|
|
.fade-leave-active {
|
|
|
|
|
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 2. 声明进入和离开的状态 */
|
|
|
|
|
.fade-enter-from,
|
|
|
|
|
.fade-leave-to {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
transform: scaleY(0.01) translate(30px, 0);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 3. 确保离开的项目被移除出了布局流
|
|
|
|
|
以便正确地计算移动时的动画效果。 */
|
|
|
|
|
.fade-leave-active {
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|