From f752f50a484f63fc3786ab1c7ad563f3b17cce77 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Fri, 15 Nov 2024 15:58:32 +0800 Subject: [PATCH] fix: 国控站 --- src/views/UVA/index.vue | 1074 +++++++++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 783 insertions(+), 291 deletions(-) diff --git a/src/views/UVA/index.vue b/src/views/UVA/index.vue index d9f8bc1..7b12939 100644 --- a/src/views/UVA/index.vue +++ b/src/views/UVA/index.vue @@ -3,71 +3,77 @@ <el-container style="height: 100%"> <el-aside width="300px" - style="background-color: rgb(238, 241, 246); overflow-y: hidden" + style="background-color: rgb(238, 241, 246); overflow: hidden" > <div style="width: 274px; margin: 13px auto"> <el-date-picker + ref="datePick" + v-model="datenum" :picker-options="pickerOptions" placeholder="������������" popper-class="jlpMySelectPopper" - ref="datePick" - v-model="datenum" - @change="chooseDate" value-format="yyyy-MM-dd" - > - </el-date-picker> + style="width: 280px" + @change="chooseDate" + @blur="chooseDate1" + @focus="chooseDate2" + /> </div> - - <!-- <el-card class="box-card" style="width: 274px; margin: 13px auto"> --> - - <!-- <div v-else style="height: 180px; width: 274px; overflow-x: hidden"> - <div - style=" - width: 272px; - text-align: center; - height: 180px; - line-height: 140px; - font-size: 14px; - color: #5a5c60; - " - > - ��������������� - </div> - </div> --> - <!-- </el-card> --> - - <div style="width: 274px; margin: 350px auto; border-radius: 8px"> + <div + style="width: 274px; margin: 10px auto; border-radius: 8px" + class="coll" + > <!--accordion ���������������--> <el-collapse - v-model="asideData.activeNames" - accordion - style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)" - @change="handleChange" - ref="collapse" + v-show="shou1 === true" + v-loading="loading" > <el-collapse-item - v-for="(item1, index) in asideData.uavTimeFly" - :key="index" - :name="index" - style="text-indent: 2em; position: relative" + style="text-indent: 2em; position: relative; padding-botton: 10px" > <template slot="title"> <img style="position: absolute; left: 18px" src="../../assets/images/uav/uav.png" - /> + > <span style="display: inline-block; position: absolute; left: 20px" > - {{ item1.name }}</span + ������������������������������</span> + </template> + </el-collapse-item> + </el-collapse> + <el-collapse + v-show="shou1 === false" + ref="collapse" + v-model="asideData.activeNames" + v-loading="loading" + accordion + style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)" + @change="handleChange" + > + <el-collapse-item + v-for="(item1, index) in asideData.uavTimeFly" + :key="index" + :name="index" + style="text-indent: 2em; position: relative; padding-botton: 10px" + > + <template slot="title"> + <img + style="position: absolute; left: 18px" + src="../../assets/images/uav/uav.png" > + <span + style="display: inline-block; position: absolute; left: 20px" + > + {{ item1.name }}</span> </template> <el-scrollbar style="height: 200px; overflow-x: hidden"> <div v-for="(item, index) in item1.timeSlot" :key="index" class="per-date_area" - :class="{ activeArea: asideData.activeAreaKey === index }" + :class="{ activeArea: asideData.activeKey === index }" @click="getFlyData(item, index, item1.mac)" > <div style="width: 100%; margin: 0 auto"> @@ -78,6 +84,7 @@ <span>{{ item.endTime.substr(11, item.startTime.length) }}</span> + <span> ({{ item.total }}���) </span> </div> </div> </el-scrollbar> @@ -100,36 +107,122 @@ > <div class="numss"> <el-radio-group + v-if="selecttrue === 1" v-model="radioSeven" size="medium" + style="margin-top: 10px; margin-left: 10px" @change="changeCode" > - <el-radio-button label="PM2.5"></el-radio-button> - <el-radio-button label="PM10"></el-radio-button> - <el-radio-button label="SO2"></el-radio-button> - <el-radio-button label="NO2"></el-radio-button> - <el-radio-button label="CO"></el-radio-button> - <el-radio-button label="03"></el-radio-button> - <el-radio-button label="TVOC"></el-radio-button> + <el-radio-button label="PM2.5" /> + <el-radio-button label="PM10" /> + <el-radio-button label="SO2" /> + <el-radio-button label="NO2" /> + <el-radio-button label="CO" /> + <el-radio-button label="03" /> + <el-radio-button label="TVOC" /> </el-radio-group> - <!-- <el-input - placeholder="���������������" - v-model="uvasize" - class="inputNum" - clearable - > - </el-input> --> - <div v-if="selecttrue === 1" style="margin-left: 10px"> - <el-button type="primary" @click="gengD" class="gengD" - >������������</el-button + <div + v-if="selecttrue === 2" + class="Duo" + > + <div class="spantuu"> + <span>���������������������������(���): </span> + <el-input + ref="uvas" + v-model="tallone" + class="inputtu" + /> + -- + <el-input + ref="uvas" + v-model="talltwo" + class="inputtu" + /> + </div> + <!-- <el-select v-model="Duovalue" placeholder="������������" class="slee"> + <el-option + v-for="item in optionsduo" + :key="item.code" + :label="item.name" + :value="item.name" + > + </el-option> + </el-select> --> + <div class="spantu"> + <span>������������(���): </span><el-input + ref="uvas" + v-model="uvasize" + class="inputtu" + clearable + placeholder="���������������" + /> + </div> + <el-select + v-model="Duovalue" + placeholder="������������" + class="slee" > + <el-option + v-for="item in optionsduo" + :key="item.code" + :label="item.name" + :value="item.name" + /> + </el-select> + <!-- <div class="spantuu"> + <span>���������������������������(���): </span> + <el-input + class="inputtu" + v-model="tallone" + ref="uvas" + ></el-input> + -- + <el-input + class="inputtu" + v-model="talltwo" + ref="uvas" + ></el-input> + </div> --> </div> - <div v-if="selecttrue === 2" style="margin-left: 10px"> - <el-button class="gengD" @click="shou">������</el-button> - <el-button type="primary" @click="selectDuo">������</el-button> + <div + v-if="selecttrue === 1" + style="margin-left: 10px" + > + <el-button + type="primary" + style="margin-top: 10px" + @click="gengD" + > + ������������ + </el-button> + </div> + <div + v-if="selecttrue === 2" + style="margin-left: 10px; margin-top: 10px" + > + <el-button + size="medium" + type="primary" + icon="el-icon-setting" + @click="dialogFormVisible = true" + > + 6��������� + </el-button> + <el-button + class="gengD" + @click="shou" + > + ������ + </el-button> + <el-button + type="primary" + @click="selectDuo" + > + ������ + </el-button> </div> </div> - <div class="Duo" v-if="selecttrue === 2"> + <!-- <div class="Duo" v-if="selecttrue === 2"> <el-select v-model="Duovalue" placeholder="������������" class="slee"> <el-option v-for="item in optionsduo" @@ -140,7 +233,7 @@ </el-option> </el-select> <div class="spantu"> - <span>������������(���):</span + <span>������������(���): </span ><el-input class="inputtu" v-model="uvasize" @@ -150,17 +243,167 @@ ></el-input> </div> <div class="spantuu"> - <span>���������������������������(���):</span> - <el-input class="inputtu" v-model="tallone" ref="uvas"></el-input - >- + <span>���������������������������(���): </span> + <el-input class="inputtu" v-model="tallone" ref="uvas"></el-input> + -- <el-input class="inputtu" v-model="talltwo" ref="uvas"></el-input> + </div> + </div> --> + </div> + <!-- <div v-if="noneData" class="noneData">������������������������������</div> --> + <div + id="map_container" + v-loading="loading1" + /> + <div class="dataParameter"> + <dir class="item"> + <div + v-for="(item, index) in temMergeDataList" + v-show="index < 3" + :key="index" + > + <p> {{ item.name }}:{{ item.value }}</p> + </div> + </dir> + <div + class="item1" + style="margin-left: 10px;" + > + <div + v-for="(item, index) in temMergeDataList" + v-show="index > 2" + :key="index" + > + <p> {{ item.name }}:{{ item.value }}</p> </div> </div> </div> - <div v-if="noneData" class="noneData">������������������������������</div> - <div id="map_container" v-loading="loading" /> </el-main> </el-container> + <el-dialog + title="6���������" + :visible.sync="dialogFormVisible" + width="1000px" + > + <el-descriptions + title="������6���" + :column="3" + border + > + <el-descriptions-item + label="PM2.5 | ug/m��" + label-class-name="my-label" + content-class-name="my-content" + > + 22 + </el-descriptions-item> + <el-descriptions-item label="PM10 | ug/m��"> + 34 + </el-descriptions-item> + <el-descriptions-item label="SO2 | ug/m��"> + 4 + </el-descriptions-item> + <el-descriptions-item label="NO2 | ug/m��"> + 16 + </el-descriptions-item> + <el-descriptions-item label="CO | mg/m��"> + 0.5 + </el-descriptions-item> + <el-descriptions-item label="O3 | ug/m��"> + 149 + </el-descriptions-item> + </el-descriptions> + <!-- <el-descriptions title="���������������" border> + </el-descriptions> --> + <div + style=" + font-size: 16px; + font-weight: 700; + margin: 10px 0 20px 0; + font-size: 16px; + font-weight: 700; + color: #303133; + " + > + ��������������� + </div> + <el-table + :data="sensorTableData" + border + > + <el-table-column + prop="sensorName" + label="������" + /> + <el-table-column + prop="unit" + label="������" + /> + <el-table-column label="������"> + <template slot-scope="scope"> + <el-input + v-model="scope.row.tab1" + placeholder="���������������" + /> + <!-- <span v-show="!scope.row.show">{{ scope.row.tab1 }}</span> --> + </template> + </el-table-column> + <el-table-column label="������"> + <template slot-scope="scope"> + <el-input + v-model="scope.row.tab2" + placeholder="���������������" + /> + </template> + </el-table-column> + <el-table-column label="������"> + <template slot-scope="scope"> + <el-input + v-model="scope.row.tab3" + placeholder="���������������" + /> + </template> + </el-table-column> + <el-table-column label="������"> + <template slot-scope="scope"> + <el-input + v-model="scope.row.tab4" + placeholder="���������������" + /> + </template> + </el-table-column> + <el-table-column label="������"> + <template slot-scope="scope"> + <el-input + v-model="scope.row.tab5" + placeholder="���������������" + /> + </template> + </el-table-column> + <el-table-column label="������"> + <template slot-scope="scope"> + <el-input + v-model="scope.row.tab6" + placeholder="���������������" + /> + </template> + </el-table-column> + </el-table> + <div + slot="footer" + class="dialog-footer" + > + <el-button @click="dialogFormVisible = false"> + ��� ��� + </el-button> + <el-button + type="primary" + @click="customLevel" + > + ��� ��� + </el-button> + </div> + </el-dialog> </div> </template> @@ -228,12 +471,20 @@ break } - if (dLat > 0) pLat = wgsLat - else mLat = wgsLat - if (dLon > 0) pLon = wgsLon - else mLon = wgsLon + if (dLat > 0) { + pLat = wgsLat + } else { + mLat = wgsLat + } + if (dLon > 0) { + pLon = wgsLon + } else { + mLon = wgsLon + } - if (++i > 10000) break + if (++i > 10000) { + break + } } return { lat: wgsLat, lon: wgsLon } }, @@ -287,8 +538,12 @@ var y = Math.sin((latA * this.PI) / 180.0) * Math.sin((latB * this.PI) / 180.0) var s = x + y - if (s > 1) s = 1 - if (s < -1) s = -1 + if (s > 1) { + s = 1 + } + if (s < -1) { + s = -1 + } var alpha = Math.acos(s) var distance = alpha * earthR return distance @@ -354,19 +609,26 @@ export default { filters: { sensorFilter: function (value) { - if (!value) return '' + if (!value) { + return '' + } return json[value] }, }, - data() { + data () { return { + dialogFormVisible: false, + chosee: 1, + shou1: true, + zhanK1: 1, zhanK: 1, Duovalue: '', - datenum: '', + datenum: new Date(), + // orderTime:[Date('2020-06-19'),Date('2021-06-19')] selecttrue: 1, pickerOptions: { cellClassName: (time) => { - let timeDate = moment(time.getTime()).format('yyyy-MM-DD') + const timeDate = moment(time.getTime()).format('yyyy-MM-DD') if (this.timeNums.includes(timeDate)) { return 'dateArrClass' // ������������������������������������������ } @@ -374,13 +636,13 @@ }, tallone: 0, - talltwo: 500, + talltwo: 120, // ��������������� asideData: { dates: [], // ������date������ activeNames: [0], uavTimeFly: [], // ��������������������������������������������� - activeKey: 0, + activeKey: -1, activeAreaKey: 0, }, load: 1, @@ -409,6 +671,7 @@ bdLon: null, bdLat: null, loading: false, + loading1: false, snesorParams: [ 'PM2.5', 'PM10', @@ -434,7 +697,9 @@ // ������������ ������������ this.timeOne = minDate.getTime() // ��������������������� ������������������ // ������������������������������������������������������������ - if (maxDate) this.timeOne = '' + if (maxDate) { + this.timeOne = '' + } }, disabledDate: (time) => { if (this.timeOne) { @@ -455,7 +720,6 @@ noneData: true, defaultData: [], carMac: null, - dialogFormVisible: false, optionsduo: [ { code: 'a34004', name: 'PM2.5' }, { code: 'a34002', name: 'PM10' }, @@ -609,7 +873,7 @@ endTime: '', dataDate: '', sensorTime: [], - uvasize: 50, + uvasize: 20, timeValue: [ new Date(2020, 1, 1, 0, 0, 0), new Date(2022, 12, 31, 23, 59, 59), @@ -617,15 +881,93 @@ timeNums: [], batchs: '', macs: '', + sensorTableData: [ + { + sensorName: 'PM2.5', + unit: 'ug/m��', + tab1: '35', + tab2: '75', + tab3: '115', + tab4: '150', + tab5: '250', + tab6: '350', + }, + { + sensorName: 'PM10', + unit: 'ug/m��', + tab1: '50', + tab2: '150', + tab3: '250', + tab4: '350', + tab5: '420', + tab6: '500', + }, + { + sensorName: 'SO2', + unit: 'ug/m��', + tab1: '150', + tab2: '500', + tab3: '650', + tab4: '800', + tab5: '', + tab6: '', + }, + { + sensorName: 'NO2', + unit: 'ug/m��', + tab1: '100', + tab2: '200', + tab3: '700', + tab4: '1200', + tab5: '2340', + tab6: '3090', + }, + { + sensorName: 'CO', + unit: 'mg/m��', + tab1: '5', + tab2: '10', + tab3: '35', + tab4: '60', + tab5: '90', + tab6: '120', + }, + { + sensorName: 'O3', + unit: 'ug/m��', + tab1: '160', + tab2: '200', + tab3: '300', + tab4: '400', + tab5: '800', + tab6: '1000', + }, + { + sensorName: 'TVOC', + unit: 'mg/m��', + tab1: '0.1', + tab2: '0.3', + tab3: '0.5', + tab4: '0.7', + tab5: '0.9', + tab6: '1', + }, + { + sensorName: '���������', + unit: 'ug/m��', + tab1: '300', + tab2: '500', + tab3: '1000', + tab4: '10000', + tab5: '20000', + tab6: '50000', + }, + ], + temMergeDataList: [] } }, - mounted() { - this.$refs.datePick.focus() - // this.getDate() - // this.flyData() - }, watch: { - dataTypeValue(n, o) { + dataTypeValue (n, o) { if (this.dataTypeValue === 'webSocket') { this.dateValue = [] this.historyView = false @@ -636,45 +978,70 @@ this.webSocketView = false } }, - dateValue(n, o) { + dateValue (n, o) { if (n === null) { this.dateValue = [] } }, - viewKey(n, o) { + viewKey (n, o) { // console.log(n) }, deep: true, immediate: true, }, - created() { + + mounted () { + this.$nextTick(() => { + this.initStart() + }) + + // this.$refs.datePick.focus() + // this.getDate() + // this.flyData() + }, + created () { this.newTime(this.timeValue) this.newDate() this.getDate() + + // this.getFlyData() }, methods: { - selectDuo() { + customLevel () { + this.selectDuo() + this.dialogFormVisible = false + }, + selectDuo () { + // console.log(2115); + if (this.chosee === 1) { + this.$message.warning('������������������������������������') + return + } else { + // console.log('132123'); + this.loading1 = true + } if (this.view) { this.view.removeAllLayers() this.map.clearOverlays() } this.$request({ // url: '/uav/queryDataByBatch', - url: '/uav/test', + url: '/uav/getUav', + // url: '/uav/test', method: 'post', data: { batch: this.batchs, uvasize: this.uvasize, - height: 0, mac: this.macs, + height1: this.tallone, + height2: this.talltwo, // batch: '2023-06-16 16:21:21', }, }).then((res) => { - console.log(res) + // console.log(res) this.carData = [] if (res.data === 'null') { this.noneData = true - this.loading = false return } for (var i = 0; i < res.data.length; i++) { @@ -688,32 +1055,35 @@ } this.changeCode(this.Duovalue) this.initStart(this.carData) - if (res.data.vos.length) { - this.initStart(this.carData) - } }) }, - chooseDate() { - this.$refs.datePick.focus() // ��������������������������������� + chooseDate () { + // this.$refs.datePick.focus() // ��������������������������������� this.getTimeAreaData(this.datenum) + $('.coll').css('margin-top', '350px') }, - // chooseDate1() { - // this.$refs.datePick.focus() // ��������������������������������� - // this.$refs.uvas.focus() - // }, - gengD() { - if (this.zhanK === 1) { - this.$message.warning('���������������������������������������') - return - } + chooseDate2 () { + // this.$refs.datePick.focus() // ��������������������������������� + // this.getTimeAreaData(this.datenum) + $('.coll').css('margin-top', '350px') + }, + chooseDate1 () { + $('.coll').css('margin-top', '10px') + // this.$refs.datePick.focus() // ��������������������������������� + }, + gengD () { + // if (this.zhanK === 1) { + // this.$message.warning('���������������������������������������') + // return + // } this.selecttrue = 2 - $('.dds').css({ height: '150px' }) + $('.numss').css({ width: '1050px' }) }, - shou() { + shou () { this.selecttrue = 1 - $('.dds').css({ height: '100px' }) + $('.numss').css({ width: '700px' }) }, - parseTime(time, cFormat) { + parseTime (time, cFormat) { if (arguments.length === 0 || !time) { return null } @@ -753,7 +1123,7 @@ }) return time_str }, - newTime2(timeArr) { + newTime2 (timeArr) { var arr = [] timeArr.map((v) => { var date = new Date(v) @@ -772,18 +1142,12 @@ }) return arr }, - // ��������������������������������� - changeCarData(e) { - this.carMac = e - this.getStart() - }, - // ��������������������������� // ��������������������������������������� - Rad(d) { + Rad (d) { return (d * Math.PI) / 180.0 // ��������������������������������������������������� }, // ��������������������������������������������������������������������������������������� - GetDistance(lat1, lng1, lat2, lng2) { + GetDistance (lat1, lng1, lat2, lng2) { var radLat1 = this.Rad(lat1) var radLat2 = this.Rad(lat2) var a = radLat1 - radLat2 @@ -804,7 +1168,7 @@ return s }, // ��������������� - newDate() { + newDate () { var aData = new Date() var month = aData.getMonth() < 9 @@ -814,7 +1178,7 @@ this.sensorDate = aData.getFullYear() + '-' + month + '-' + date }, // ��������������� - newTime(timeArr) { + newTime (timeArr) { let str = '' let str2 = '' this.sensorTime = [] @@ -830,7 +1194,7 @@ }) }, // ������������ - dateChange(e) { + dateChange (e) { if (e === null) { this.sensorDate = [] } else { @@ -842,11 +1206,12 @@ } this.dataType = 'history' // this.map = null - this.getStart() } }, // ��������������������������������� - getTimeAreaData(item) { + getTimeAreaData (item) { + // this.asideData.uavTimeFly = [] + this.loading = true this.$request({ url: 'uav/queryTimeSlot', method: 'get', @@ -855,33 +1220,45 @@ date: item, }, }).then((res) => { - this.asideData = [] - console.log(res.data.vos, 'res.data.vos') - if (res.data.vos.length === 0) { + // console.log(res, 'res.data.vos') + if (res.code === -47) { this.noneData = true - this.loading = false + // this.asideData.uavTimeFly=res.message + this.shou1 = true } else { + this.shou1 = false this.asideData.uavTimeFly = res.data.vos } + this.loading = false // if (res.code === 0) { // this.asideData.uavTimeFly = res.data.vos // } }) }, // ������������������ - handleChange(val) { + handleChange (val) { // console.log(val, 222) }, // ��������������������������������������� XY ������ map.lngLatToGeodeticCoord // ������radio - selectRedio(item) { + selectRedio (item) { this.map.remove(this.textMarkers.markers) this.textMarkers.markers = [] this.map.remove(this.Layler) this.addLayers(item) }, // ��������������� - getFlyData(item, index, mac) { + getFlyData (item, index, mac) { + // for (var i = 0; i < this.xie.date.length; i++) { + // this.xie.date[i].flyLat = this.xie.date[i].flyLat + ' ��'.toString() + // this.xie.date[i].flyLon = this.xie.date[i].flyLon + ' ��'.toString() + // this.xie.date[i].a34004 = this.xie.date[i].a34004 + // this.carData.push(this.xie.date[i]) + // } + // this.initStart(this.carData) + this.loading1 = true + this.asideData.activeKey = index + this.chosee = 2 this.batchs = item.batch this.macs = mac this.noneData = false @@ -891,21 +1268,22 @@ } this.$request({ // url: '/uav/queryDataByBatch', - url: '/uav/test', + // url: '/uav/test', + url: '/uav/getUav', method: 'post', data: { batch: item.batch, uvasize: this.uvasize, - height: 0, + height1: this.tallone, + height2: this.talltwo, mac: mac, // batch: '2023-06-16 16:21:21', }, }).then((res) => { - console.log(res) + // console.log(res) this.carData = [] if (res.data === 'null') { this.noneData = true - this.loading = false return } for (var i = 0; i < res.data.length; i++) { @@ -919,7 +1297,7 @@ }) }, // ������������������������������������������ - getDate() { + getDate () { this.$request({ url: '/uav/queryDate', method: 'get', @@ -930,96 +1308,83 @@ this.asideData.dates = JSON.parse(JSON.stringify(res.data.datesStr)) this.timeNums = this.asideData.dates if (this.asideData.dates.length > 0) { - this.getTimeAreaData(this.asideData.dates[0], 0) - this.datenum = this.asideData.dates[0] - setTimeout(() => { - if (this.asideData.uavTimeFly[0].timeSlot) { - console.log( - this.asideData.uavTimeFly[0].timeSlot, - 'this.asideData.uavTimeFly[0].timeSlot' - ) - // console.log( - // this.asideData.uavTimeFly[0].timeSlot, - // 'this.asideData.uavTimeFly[0].timeSlot[0]' - // ) - this.getFlyData(this.asideData.uavTimeFly[0].timeSlot[0], 0, mac) - } - }, 500) + this.getTimeAreaData(this.datenum, 0) + // this.datenum = this.asideData.dates[0] + // setTimeout(() => { + // if (this.asideData.uavTimeFly[0].timeSlot) { + // console.log( + // this.asideData.uavTimeFly[0].timeSlot, + // 'this.asideData.uavTimeFly[0].timeSlot' + // ) + // // console.log( + // // this.asideData.uavTimeFly[0].timeSlot, + // // 'this.asideData.uavTimeFly[0].timeSlot[0]' + // // ) + // this.getFlyData(this.asideData.uavTimeFly[0].timeSlot[0], 0, mac) + // } + // }, 500) } }) }, - initStart(res) { - console.log(res, 'res') + initDataParams (res) { + const filteredObject = {} + for (let key in res) { + if (key.includes(this.sensorKey)) { + filteredObject[key] = res[key] + } + } + console.log('filteredObject', filteredObject) + + let options = { + MergeAvg: '������������������', + MergedHighest: '���������������������', + MergedLowest: '���������������������', + NotMergedAvg: '���������������������', + NotMergedHighest: '������������������������', + NotMergedLowest: '������������������������' + } + + let notMergedKeys = Object.keys(filteredObject).filter(k => k.match(/(NotMergedHighest|NotMergedLowest|NotMergedAvg)/i)) + let mergedKeys = Object.keys(filteredObject).filter(k => !k.match(/(NotMergedHighest|NotMergedLowest|NotMergedAvg)/i)) + + this.temMergeDataList = Object.keys(options).reduce((acc, key) => { + let valueKey = mergedKeys.find(k => k.toLowerCase().includes(key.toLowerCase())) + if (!valueKey && notMergedKeys.length) { + valueKey = notMergedKeys.find(k => k.toLowerCase().includes(key.replace('NotMerged', '').toLowerCase())) + } + if (valueKey) { + acc.push({ + key: key, + name: options[key], + value: filteredObject[valueKey] + }) + } + return acc + }, []) + + console.log(this.temMergeDataList) + }, + initStart (res) { + console.log('res', res) this.abc += 1 const that = this + if (res) this.initDataParams(res[0]) if (!res) { - return - } - if (this.dataType === 'history') { - this.responseJSON = res - } else { - this.responseJSON = res - } - // var sensorInfo = this.responseJSON - // console.log('������snesor������������') - // console.log(this.responseJSON) - var trackPoints = [] - this.loading = false - if (this.responseJSON.length > 0) { - this.noneData = false - $.each(this.responseJSON, (item, value) => { - if (typeof value.flyLon === 'undefined') { - showNoPoints() - } else { - var lng = parseFloat( - value.flyLon.substr(0, value.flyLon.length - 1) - ) - var lat = parseFloat( - value.flyLat.substr(0, value.flyLat.length - 1) - ) - if (lng < 70 || lng > 150 || lat > 60 || lat < 20) { - return true - } - lng = GPS.gcj_encrypt(lat, lng).lon - lat = GPS.gcj_encrypt(lat, lng).lat - lng = GPS.bd_encrypt(lat, lng).lon - lat = GPS.bd_encrypt(lat, lng).lat - var point = new BMapGL.Point(lng, lat) - point.a34004 = parseInt(value.a34004) - point.a34002 = parseInt(value.a34002) - point.a21026 = parseInt(value.a21026) - point.a21004 = parseInt(value.a21004) - point.a01006 = parseInt(value.a01006) - point.a01001 = parseInt(value.a01001) - point.a01002 = parseInt(value.a01002) - point.a21005 = parseFloat(value.a21005).toFixed(3) - point.a05024 = parseInt(value.a05024) - point.a99054 = parseFloat(value.a99054).toFixed(3) - point.dustld = value.dustld - 0 - trackPoints.push(point) - } - }) - that.sensor = this.sensorKey - that.viewType = this.viewKey - that.size = this.uvasize - that.distance = that.size / 2 / Math.sin((1 * Math.PI) / 4) - console.log(that.distance, 'that.distance') - // ��������������������������������� - if (!that.showPoints) { - that.map = new BMapGL.Map('map_container') - } - that.map.enableScrollWheelZoom(true) // ������������������������������������������������������ + that.map = new BMapGL.Map('map_container') + console.log('BMapGL', BMapGL) + console.log('BMapGL', BMapGL) + console.log('window', window.BMapGL) + that.map.enableScrollWheelZoom(true) // ������������������������������������������������������s that.map.setMapType(BMAP_EARTH_MAP) // ��������������������������������� that.map.setDisplayOptions({ street: false, // ������������������������������������������������������������ }) - that.map.setHeading(20) // ������������������ + that.map.setHeading(0) // ������������������ if (that.viewKey === '2D') { that.map.setTilt(0) // ������������ } else { that.map.setTilt(52) } - // ������������������v3.0������������������������ that.map.setMapStyleV2({ styleJson: [ { @@ -1053,6 +1418,76 @@ }, ], }) + showNoPoints() + this.loading1 = false + return + } + if (this.dataType === 'history') { + this.responseJSON = res + } else { + this.responseJSON = res + } + // var sensorInfo = this.responseJSON + // console.log('������snesor������������') + // console.log(this.responseJSON) + var trackPoints = [] + if (this.responseJSON.length > 0) { + this.noneData = false + $.each(this.responseJSON, (item, value) => { + if (typeof value.flyLon === 'undefined') { + showNoPoints() + } else { + var lng = parseFloat( + value.flyLon.substr(0, value.flyLon.length - 1) + ) + var lat = parseFloat( + value.flyLat.substr(0, value.flyLat.length - 1) + ) + if (lng < 70 || lng > 150 || lat > 60 || lat < 20) { + return true + } + // lng = GPS.gcj_encrypt(lat, lng).lon + // lat = GPS.gcj_encrypt(lat, lng).lat + // lng = GPS.bd_encrypt(lat, lng).lon + // lat = GPS.bd_encrypt(lat, lng).lat + // lng = GPS.bd_decrypt(lat, lng).lon + // lat = GPS.bd_decrypt(lat, lng).lat + var point = new BMapGL.Point(lng, lat) + point.a34004 = parseInt(value.a34004) + point.a34002 = parseInt(value.a34002) + point.a21026 = parseInt(value.a21026) + point.a21004 = parseInt(value.a21004) + point.a01006 = parseInt(value.a01006) + point.a01001 = parseInt(value.a01001) + point.a01002 = parseInt(value.a01002) + point.a21005 = parseFloat(value.a21005).toFixed(3) + point.a05024 = parseInt(value.a05024) + point.a99054 = parseFloat(value.a99054).toFixed(3) + point.dustld = value.dustld - 0 + trackPoints.push(point) + } + }) + that.sensor = this.sensorKey + that.viewType = this.viewKey + that.size = this.uvasize + that.distance = that.size / 2 / Math.sin((1 * Math.PI) / 4) + // ��������������������������������� + // if (!that.showPoints) { + // console.log(111) + // that.map = new window.BMapGL.Map('map_container') + // } + // that.map.enableScrollWheelZoom(true) // ������������������������������������������������������s + // that.map.setMapType(BMAP_EARTH_MAP) // ��������������������������������� + // that.map.setDisplayOptions({ + // street: false, // ������������������������������������������������������������ + // }) + // that.map.setHeading(20) // ������������������ + // if (that.viewKey === '2D') { + // that.map.setTilt(0) // ������������ + // } else { + // that.map.setTilt(52) + // } + // ������������������v3.0������������������������ // that.map.setDisplayOptions({ // // ������������������ @@ -1060,7 +1495,7 @@ // building: true, // ������������������ // poiText: false, // ������poi������ // }) - // that.map.addControl(new BMapGL.NavigationControl3D()) // ������3d������ + // that.map.addControl(new window.BMapGL.NavigationControl3D()) // ������3d������ if (this.responseJSON.length === 0) { showNoPoints() } @@ -1071,20 +1506,21 @@ // console.log(that.mapZoom, 'that.mapZoom') that.centerPoint = that.viewport.center if (that.firstPlayFlag) { - console.log(that.mapZoom, that.centerPoint, '1') that.map.centerAndZoom(that.centerPoint, that.mapZoom) that.view = new mapvgl.View({ map: that.map, }) that.firstPlayFlag = false + that.loading1 = false } else { - console.log(that.mapZoom, that.centerPoint, '2') this.view.removeAllLayers() this.map.clearOverlays() that.map.centerAndZoom(that.centerPoint, that.mapZoom) that.view = new mapvgl.View({ map: that.map, }) + that.loading1 = false + // that.map.centerAndZoom(that.centerPoint, 18) } } @@ -1092,7 +1528,7 @@ // draw(that.sensor, that.viewType, that.carMac) // drawLine()// ������(���������������������) // drawStartAndEnd() // ��������������������� - function draw(sensor, type, carMac) { + function draw (sensor, type, carMac) { var levels = getGrading(sensor, type, carMac) $.each(levels, function (index, value) { var color = value.color @@ -1120,7 +1556,7 @@ } // ��������������������������������� - function drawPolygon(sensor) { + function drawPolygon (sensor) { $.each(that.showPoints, function (item, point) { var sw = getPoint(225, point.lng, point.lat, that.distance) var ne = getPoint(45, point.lng, point.lat, that.distance) @@ -1135,12 +1571,12 @@ new BMapGL.Point(sw.lng, ne.lat), // ��������� ], { - strokeWeight: 0.1, //������������������,������������������ + strokeWeight: 0.1, // ������������������,������������������ // strokeOpacity: 0.0, //������������������ - fillColor: color, //��������������������� - fillOpacity: 0.8, //������������������������0~1������ - strokeColor: 'black', //������������������ - strokeStyle: 'solid', //������������������solid���dashed��� + fillColor: color, // ��������������������� + fillOpacity: 0.8, // ������������������������0~1������ + strokeColor: 'black', // ������������������ + strokeStyle: 'solid', // ������������������solid���dashed��� } ) that.map.addOverlay(polygon) @@ -1150,7 +1586,7 @@ } // ��������������������� - function drawStartAndEnd() { + function drawStartAndEnd () { var startIcon = new BMapGL.Icon( require('@/assets/images/start.png'), new BMapGL.Size(48, 48) @@ -1175,7 +1611,7 @@ } // ��������������������� - function drawLine() { + function drawLine () { var data = [] var points = [] $.each(trackPoints, function (index, value) { @@ -1202,7 +1638,7 @@ } // ������������>=size���������points - function getShowPoints(size) { + function getShowPoints (size) { var points = [] points.push(trackPoints[0]) for (var i = 1; i < trackPoints.length; i++) { @@ -1216,6 +1652,7 @@ } } points.push(point1) + // console.log(points, 'image.png') // if (flag) { // points.push(point1) // console.log(points, 'points') @@ -1225,7 +1662,7 @@ } // ��������������������������������������� - function getPoint(angle, lng, lat, distance) { + function getPoint (angle, lng, lat, distance) { var EARTH_RADIUS = 6378137 // ������������������m // ��������������������������������������� var ra = distance / EARTH_RADIUS @@ -1250,7 +1687,7 @@ return new BMapGL.Point(lng, lat) } - function getGrading(sensor, type, carMac) { + function getGrading (sensor, type, carMac) { var levels = [] var level0 = {} var level1 = {} @@ -1398,7 +1835,7 @@ levels.push(level0, level1, level2, level3, level4, level5, level6) return levels } - function getColorAndLevel(senosor, data) { + function getColorAndLevel (senosor, data) { var levelData = that.sensorTableData var colorAndLevel = {} var color @@ -1597,7 +2034,7 @@ } // point���������label������ - function setLabelStyle(content, point) { + function setLabelStyle (content, point) { var label = new BMapGL.Label( "<span class='my-maptip'>" + content + '<br /><span>', // ���lable������������ { @@ -1624,7 +2061,7 @@ } // ������������,������������������ - function showNoPoints() { + function showNoPoints () { that.map.centerAndZoom('���������', 17) setTimeout(function () { document.getElementById('cpm').style.display = 'block' @@ -1643,7 +2080,7 @@ }) // var that = this - function clickChange() { + function clickChange () { $('.carTop').on('click', () => { // console.log('���������') that.view.removeAllLayers() @@ -1673,7 +2110,7 @@ clickChange() } }, - changeCode(value) { + changeCode (value) { switch (value) { case 'PM2.5': this.sensorKey = 'a34004' @@ -1711,20 +2148,26 @@ } this.initStart(this.carData) }, - changeCode1(index) { - this.changeColor1 = index - if (index === 0) { - this.viewKey = '2D' - } else { - this.viewKey = '3D' - } - this.getStart() - }, }, } </script> -<style lang="scss" > +<style lang="scss" scoped> +.main-container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column; + flex-flow: column; + min-height: 100%; + -webkit-transition: margin-left 0.28s; + transition: margin-left 0.28s; + margin-left: 210px; + position: relative; + height: 100%; +} /deep/.BMap_cpyCtrl { display: none; } @@ -1816,6 +2259,7 @@ } .activeArea { background-color: #f5f7fa; + color: rgb(36, 36, 36); } /*������������*/ .textShow { @@ -1843,6 +2287,12 @@ .per-text-data:nth-last-child(1) { padding-bottom: 8px; } +.el-collapse { + border-top: 1px solid #ebeef5; + border-bottom: 1px solid #ebeef5; + width: 280px; +} + /deep/.el-scrollbar__wrap { overflow-x: hidden; //overflow-y: hidden; @@ -1892,6 +2342,94 @@ /deep/.inputNum { width: 4% !important; } + +.numss { + width: 700px; + background-color: white; + margin-top: 17px; + display: flex; + height: 60px; +} +/deep/.el-select { + width: 8% !important; +} +.Duo { + display: flex; + overflow: hidden; + background-color: white; + width: 750px; + padding-left: 10px; +} +.spantu { + width: 190px; + // margin-top: 10px; + // margin-left: 20px; + // background-color: white; + // height: 40px; + display: flex; + margin-left: 10px; + line-height: 60px; + font-weight: 5px; + color: #696b6f; + .inputtu { + width: 40%; + margin-left: 5px; + } +} +.slee { + line-height: 60px; + width: 100px; + margin-left: 25px; +} +.spantuu { + width: 400px; + line-height: 60px; + color: #696b6f; + .inputtu { + width: 20%; + } +} + +.BMap_cpyCtrl { + display: none; +} +.anchorBL { + display: none; +} +.el-collapse-item__arrow.is-active { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + position: absolute; + top: -3px; + right: -3px; +} +/* ������������������������ x ��������������� */ +.el-scrollbar__wrap { + overflow-x: hidden; +} +.dataParameter{ + background-color: rgba(192, 192, 192, 0.4); + position: absolute; + bottom: 0px; + padding: 10px; + color: #000; + font-size: 16px; + cursor: pointer; + display: flex; + .item{ + margin: 0px; + padding: 0px; + } +} +</style> +<style > +.jlpMySelectPopper.el-picker-panel { + width: 280px; + height: 330px; +} +.jlpMySelectPopper.el-date-picker table { + width: 88%; +} .dateArrClass { position: relative; } @@ -1906,51 +2444,5 @@ z-index: 999; background-color: #f40; } -.numss { - width: 750px; - background-color: white; - padding: 10px; - margin-top: 17px; - display: flex; -} -/deep/.el-select { - width: 8% !important; -} -.Duo { - height: 70px; - display: flex; - overflow: hidden; -} -.spantu { - width: 190px; - // margin-top: 10px; - // margin-left: 20px; - // background-color: white; - // height: 40px; - display: flex; - margin-left: 20px; - line-height: 70px; - font-weight: 5px; - .inputtu { - width: 35%; - } -} -.slee { - line-height: 70px; -} -.spantuu { - width: 400px; - line-height: 70px; - .inputtu { - width: 20%; - } -} -.jlpMySelectPopper.el-picker-panel { - width: 280px; - height: 330px; -} -.jlpMySelectPopper.el-date-picker table { - width: 88%; -} -</style> \ No newline at end of file +</style> -- Gitblit v1.8.0