From 571f87e61cedd6aac778e8faafbb58ff562fb5df Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Thu, 04 Jul 2024 14:23:41 +0800 Subject: [PATCH] fix: 高德密钥修改 --- src/views/deviceDetail/index.vue | 303 +++++++++++++++++++++++++++++-------------------- 1 files changed, 179 insertions(+), 124 deletions(-) diff --git a/src/views/deviceDetail/index.vue b/src/views/deviceDetail/index.vue index df36cb3..7859683 100644 --- a/src/views/deviceDetail/index.vue +++ b/src/views/deviceDetail/index.vue @@ -38,15 +38,19 @@ :key="i" style="flex: 1; display: flex" > - <span style="width: 33%; font-size: 0.9rem" @click="chuan(val)">{{ + <span + style="width: 33%; font-size: 0.9rem" + @click="chuan(val)" + >{{ val.sensorCode | sensorFilter }}</span> - <span style="width: 33%; height: 0.9rem; font-size: 0.9rem" - ><el-progress - :text-inside="true" - :percentage="val.alarm" - :color="val.colour" - style="width: 100%" + <span + style="width: 33%; height: 0.9rem; font-size: 0.9rem" + ><el-progress + :text-inside="true" + :percentage="val.alarm" + :color="val.colour" + style="width: 100%" /></span> <span style="width: 34%; text-align: right; font-size: 0.9rem">{{ val.value @@ -74,7 +78,10 @@ " > <div style="position: relative"> - <img style="width: 5.5rem; height: 5.5rem" :src="compassBg" /> + <img + style="width: 5.5rem; height: 5.5rem" + :src="compassBg" + > <img style=" font-size: 2rem; @@ -91,7 +98,7 @@ :style="{ transform: 'translate(-50%, -50%) rotate(' + windDeg + 'deg)', }" - /> + > </div> <div style="text-align: center; font-size: 1rem"> <div>{{ windDir }}</div> @@ -110,7 +117,9 @@ justify-content: center; " > - <div style="font-size: 0.9rem">������������������(������������)</div> + <div style="font-size: 0.9rem"> + ������������������(������������) + </div> <div style="font-size: 1.5rem; margin-top: 7px"> {{ aqi }}<span style="font-size: 0.8rem">(AQI)</span> </div> @@ -118,11 +127,15 @@ </div> </el-main> </el-aside> - <el-container class="border-left border-right" style="margin: 0 10px"> + <el-container + class="border-left border-right" + style="margin: 0 10px" + > <el-header class="title0" style="text-align: center; display: unset !important; margin-top: 10px" - ><h1 + > + <h1 style=" text-align: center; text-align: center; @@ -133,8 +146,8 @@ @click="websocketData()" > {{ deviceName ? deviceName : '������' }} - </h1></el-header - > + </h1> + </el-header> <el-main style=" padding-left: 0; @@ -159,6 +172,7 @@ <div v-for="(val, key, i) in coreMonitorItems" :key="i" + ref="test" style=" position: relative; width: 33%; @@ -166,7 +180,6 @@ font-size: 0.9rem; " class="circleWH" - ref="test" > <!-- <div style="position: relative;width: 155px;height: 155px;margin: 0px auto;" :class="{'alarmBg5':val.bg === 5,'alarmBg4':val.bg === 4,'alarmBg3':val.bg === 3,'alarmBg2':val.bg === 2,'alarmBg1':val.bg === 1,'alarmBg0':val.bg === 0,}">--> <div @@ -211,8 +224,15 @@ </div> </div> </div> - <div class="border-top" style="display: flex; height: 50%"> - <div ref="main" class="middle1" style="flex: 1; padding-top: 2rem" /> + <div + class="border-top" + style="display: flex; height: 50%" + > + <div + ref="main" + class="middle1" + style="flex: 1; padding-top: 2rem" + /> <!-- <line-chart :chart-data="lineChartData" /> --> <div class="border-left middle2" @@ -223,9 +243,13 @@ margin-left: 10px; " > - <h3 style="font-size: 0.9rem">���������������</h3> + <h3 style="font-size: 0.9rem"> + ��������������� + </h3> <div> - <div style="font-size: 0.9rem">{{ chartSensorName }}</div> + <div style="font-size: 0.9rem"> + {{ chartSensorName }} + </div> <div style="padding: 8px 0 0; font-size: 2.3rem; font-weight: bold" > @@ -237,7 +261,7 @@ padding-right: 10px; font-size: 0.9rem; " - ></div> + /> </div> </div> </div> @@ -265,26 +289,41 @@ > <div style="height: 100%; display: flex; flex-direction: column"> <div style="height: 30%"> - <h3 style="text-align: center; font-size: 0.9rem" v-if="macLat"> + <h3 + v-if="macLat" + style="text-align: center; font-size: 0.9rem" + > <span>���������</span> {{ macLat }}, {{ macLng }} </h3> - <h3 style="font-size: 0.9rem">������������������������</h3> + <h3 style="font-size: 0.9rem"> + ������������������������ + </h3> </div> <div style="height: 70%"> <!-- padding-top: 4%--> - <img :src="url1" alt="" style="width: 70%" /> + <img + :src="url1" + alt="" + style="width: 70%" + > </div> <div> - <img style="width: 75%" :src="url2" alt="" /> + <img + style="width: 75%" + :src="url2" + alt="" + > </div> </div> </div> <div + v-if="monitorPointInfo" class="right1" style="height: 40%; display: flex; flex-direction: column" - v-if="monitorPointInfo" > - <h3 style="text-align: center; font-size: 0.9rem">������������</h3> + <h3 style="text-align: center; font-size: 0.9rem"> + ������������ + </h3> <ul class="listUl" style=" @@ -306,11 +345,13 @@ </ul> </div> <div + v-else class="right1" style="height: 40%; display: flex; flex-direction: column" - v-else > - <h3 style="text-align: center; font-size: 0.9rem">���������</h3> + <h3 style="text-align: center; font-size: 0.9rem"> + ��������� + </h3> <ul class="listUl" style=" @@ -336,8 +377,9 @@ <script> // ���������������������������������������������������������js������������������js���json������������������������������ // ���������import������������������from'������������������'; - +import { WWindUtil } from '@/components/Wind/WRatingArr.js' import json from '@/assets/json/sensor.json' +import * as echarts from 'echarts' // import { parse } from 'path-to-regexp' // import LineChart from '@/components/Echarts/LineChart' // import draggable from 'vuedraggable' @@ -352,10 +394,10 @@ sensorFilter: function (value) { if (!value) return '' return json[value] - }, + } }, props: {}, - data() { + data () { // ������������������ return { circle: 0, @@ -363,7 +405,7 @@ url2: require('@/assets/images/alarmstate-1.png'), bg: { backgroundImage: 'url(' + require('@/assets/images/bg1.png') + ')', - backgroundRepeat: 'round', + backgroundRepeat: 'round' }, wsData1: null, wsData2: null, @@ -387,12 +429,12 @@ // ������������ alarmLevel: null, alarmLevelDome: { - a05024: '[0, 160, 200, 300, 400, 800]', //������ - a21004: '[0, 100, 200, 700, 1200, 2340]', //������������ - a21005: '[0, 5, 10, 35, 60, 90]', //������������ - a21026: '[0, 150, 500, 650, 800, 1600]', //������������ - a34002: '[0, 50, 150, 250, 350, 420]', //PM10 - a34004: '[0, 35, 75, 115, 150, 250]', //PM2.5 + a05024: '[0, 160, 200, 300, 400, 800]', // ������ + a21004: '[0, 100, 200, 700, 1200, 2340]', // ������������ + a21005: '[0, 5, 10, 35, 60, 90]', // ������������ + a21026: '[0, 150, 500, 650, 800, 1600]', // ������������ + a34002: '[0, 50, 150, 250, 350, 420]', // PM10 + a34004: '[0, 35, 75, 115, 150, 250]' // PM2.5 }, // ������������������ // ��������������� alarmProgress: {}, @@ -432,30 +474,31 @@ CO2: '', SO2: '', CO: '', - O3: '', - }, + O3: '' + } } }, // ������������ ���������data������ computed: { - leftaSide() { + leftaSide () { return this.$store.state.leftaSide - }, + } }, // ������data������������������ watch: { - PM2_5Data(val) { + PM2_5Data (val) { // console.log('���������' + val) + this.myChart = null this.drawChart() }, - leftaSide(n, o) { + leftaSide (n, o) { // this.myChart.resize() this.myChart = null // this.drawChart() - }, + } }, // ������������ - ��������������������������������� this ��������� - created() { + created () { this.$store.dispatch('app/toggleSideBar', 0) // this.$Cookies.set('sidebarStatus', 1) // setTimeout(() => { @@ -487,7 +530,7 @@ // this.ws.send('{"mac":' + '"' + this.macName + '"' + ',"accountIdInfo":' + this.$store.state.accountId + '}') }, // ������������ - ��������������������������� DOM ��������� - mounted() { + mounted () { // this.$nextTick(() => { // console.log('zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz') // this.drawChart() @@ -501,11 +544,11 @@ // ��������������������������� // this.getCircleWH() }, - beforeCreate() {}, // ������������ - ������������ - beforeMount() {}, // ������������ - ������������ - beforeUpdate() {}, // ������������ - ������������ - updated() {}, // ������������ - ������������ - beforeDestroy() { + beforeCreate () {}, // ������������ - ������������ + beforeMount () {}, // ������������ - ������������ + beforeUpdate () {}, // ������������ - ������������ + updated () {}, // ������������ - ������������ + beforeDestroy () { if (this.ws) { this.ws.close() } @@ -513,11 +556,11 @@ clearInterval(this.timer) // ���Vue������������������������������������������ } }, // ������������ - ������������ - destroyed() {}, // ������������ - ������������ - activated() {}, + destroyed () {}, // ������������ - ������������ + activated () {}, // ������������ methods: { - chuan(val) { + chuan (val) { console.log(val) this.chartSensorKey[0] = {} this.chartSensorKey[0] = val @@ -527,7 +570,7 @@ // console.log(this.chartSensorKey[0].sensorCode); // console.log(this.chartSensorKey) }, - chuan2(val) { + chuan2 (val) { console.log(val) this.chartSensorKey[0] = {} this.chartSensorKey[0] = val @@ -536,7 +579,7 @@ this.filterSensorName() }, // ��������������������� - getCircleWH() { + getCircleWH () { // var circleWHList = document.getElementsByClassName('circleWH') // var dom = this.$refs.test // var circleWHWidth = circleWHList[0].offsetWidth @@ -544,20 +587,20 @@ // console.log(circleWHWidth, circleWHeight, '������') }, // ������������������������ - filterSensorName() { + filterSensorName () { this.chartSensorName = this.$options.filters.sensorFilter( this.chartSensorKey[0].sensorCode ) }, // ������������������ - sensorLayout() { + sensorLayout () { return new Promise((resolve, reject) => { this.$request({ url: '/organizationLayout/getLayoutByMac', method: 'get', params: { - mac: this.macName, - }, + mac: this.macName + } }) .then((res) => { console.log(res, '������������������') @@ -580,13 +623,13 @@ }) }, // ������������������������ - getAlarmLevels() { + getAlarmLevels () { this.$axios .get('http://121.43.179.139:8080/screen_api_v2/screen/alarm-levels', { params: { mac: this.macName, - primaryKey: this.macName, - }, + primaryKey: this.macName + } }) .then((res) => { this.alarmLevels = res.data @@ -598,7 +641,7 @@ }) }, // ������������������������ - getTime() { + getTime () { var _this = this // ������������������������Vue������this������������������������ this.timer = setInterval(function () { _this.currentTime = // ������������date @@ -615,11 +658,11 @@ _this.appendZero(new Date().getSeconds()) }, 1000) }, - appendZero(obj) { + appendZero (obj) { return obj < 10 ? '0' + obj : obj }, // ������������������������������ - reMac(newMac, i, name) { + reMac (newMac, i, name) { this.PM2_5Data = [] this.wsData2 = null this.url1 = require('@/assets/images/alarmlevel-1.png') @@ -637,20 +680,20 @@ } }, // ������������ - getkeyName() { + getkeyName () { for (var kn in this.wsData2) { this.keyName.push(kn) alert(this.keyName) } }, // ������������������������������ - getHourlyAqi() { + getHourlyAqi () { this.$request({ url: '/deviceInfo/getHourlyAqi', method: 'get', params: { - mac: this.macName, - }, + mac: this.macName + } }) .then((res) => { // console.log('���������getHourlyAqi���������������') @@ -663,14 +706,14 @@ }) }, // ��������������������������������������� - getSensorMonthAvg() { + getSensorMonthAvg () { this.$request({ url: '/deviceInfo/getMonthAvg', method: 'get', params: { sensorCode: this.chartSensorKey[0].sensorCode, - mac: this.macName, - }, + mac: this.macName + } }) .then((res) => { // console.log(res,'123'); @@ -683,7 +726,7 @@ }) }, // ��������������������� - alarmSort() { + alarmSort () { this.sensorLayout().then(() => { var newAlarmLevel = {} for (let i = 0; i < this.totalArray.length; i++) { @@ -698,10 +741,11 @@ }) }, // ws������ - websocketData() { + websocketData () { if (this.ws) { this.ws.close() } + var that = this // ������������ // var param = this.accountId + '&' + this.orgId + '&' + this.macName @@ -709,15 +753,16 @@ // ������URL var socketUrl if (this.equipment === 'car') { - socketUrl = 'http://47.99.64.149:8081/cruiserWebsocket/' + this.macName + socketUrl = 'https://qx.7drlb.com/api/cruiserWebsocket/' + this.macName // socketUrl = 'http://192.168.0.11:8081/cruiserWebsocket/' + this.macName } else { - socketUrl = 'http://47.99.64.149:8081/singleDevice/' + this.macName + socketUrl = 'https://qx.7drlb.com/api/singleDevice/' + this.macName // socketUrl = 'http://192.168.0.11:8081/singleDevice/' + this.macName } // ������http���WS - socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws') + socketUrl = socketUrl.replace('https', 'wss').replace('http', 'ws') + console.log('socketUrl', socketUrl) this.ws = new WebSocket(socketUrl) this.ws.onopen = function () { @@ -748,20 +793,8 @@ that.windDeg = windDirs if (windDirs === 0) { that.windDir = '������' - } else if (windDirs > 0 && windDirs < 90) { - that.windDir = '���������' - } else if (windDirs === 90) { - that.windDir = '������' - } else if (windDirs > 90 && windDirs < 180) { - that.windDir = '���������' - } else if (windDirs === 180) { - that.windDir = '������' - } else if (windDirs > 180 && windDirs < 270) { - that.windDir = '���������' - } else if (windDirs === 270) { - that.windDir = '������' - } else if (windDirs > 270 && windDirs < 360) { - that.windDir = '���������' + } else { + that.windDir = WWindUtil.windValueFormat(windDirs) } } that.alarmColour = {} @@ -1195,13 +1228,13 @@ } }, // ��������������������� - queryAlarmByMac() { + queryAlarmByMac () { this.$request({ url: '/deviceInfo/queryAlarmByMac', method: 'get', params: { - mac: this.macName, - }, + mac: this.macName + } }) .then((res) => { console.log(res, 'res') @@ -1227,11 +1260,11 @@ }) }, // ��������� - drawChart() { + drawChart () { const that = this var bar_dv = this.$refs.main if (bar_dv) { - that.myChart = this.$echarts.init(bar_dv) + that.myChart = echarts.init(bar_dv) var option = { title: { left: 'center', @@ -1239,29 +1272,35 @@ Color: 'white', textStyle: { // ���������������������{"fontSize": 18,"fontWeight": "bolder","color": "#333"} - color: '#fff', - }, + color: '#fff' + } }, grid: { top: 50, - bottom: 25, + bottom: 25 }, tooltip: { - // formatter:function(res){ - // console.log(res,'res'); - // var result='' - // var html1='<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff;"></span>' - // result+=res[0].axisValue+"<br/>"+html1+res[0].value - // return result - // }, + formatter: function (res) { + console.log(res, 'res') + var result = '' + var html1 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:red;"></span>' + result += res[0].axisValue + '<br/>' + html1 + res[0].value + return result + }, trigger: 'axis', + backgroundColor: '#444', // ������������rgba������������������������������ + color: 'red', + textStyle: { // ��������������������� + color: '#fff', + fontSize: 12 + }, axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985', - color: '#fff', - }, - }, + color: '#fff' + } + } }, xAxis: { type: 'category', @@ -1269,31 +1308,47 @@ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], axisLine: { lineStyle: { - color: '#fff', - }, - }, + color: '#fff' + } + } }, yAxis: { type: 'value', axisLine: { lineStyle: { - color: '#fff', - }, - }, + color: '#fff' + } + } }, series: [ { + // prettier-ignore + itemStyle: { + normal: { + color: '#fff', // ������������ + borderColor: 'red', // ������������������ + borderWidth: 3// ������������������ + }, + emphasis: { // ������������������(������������������������) + borderColor: '#c00', // ������������������ + borderWidth: 2, // ������������������ + shadowColor: '#c00', // ������������ + shadowBlur: 3, // ������������������������ + color: 'red'// hover������������������ + } + }, + symbolSize: 6, data: this.PM2_5Data, type: 'line', label: { normal: { show: true, position: 'top', - color: '#fff', - }, - }, - }, - ], + color: '#fff' + } + } + } + ] } that.myChart.setOption(option) setTimeout(function () { @@ -1304,14 +1359,14 @@ } else { console.log('������������') } - }, + } // circles() { // for (let index = this.circle; index < 100; index++) { // index++ // this.circle++ // } // } - }, // ���������������keep-alive������������������������������������ + } // ���������������keep-alive������������������������������������ } </script> <style scoped> -- Gitblit v1.8.0