From 6d21dd8cdb40c6734c90f6a4a180cc00bae53e20 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Wed, 15 Nov 2023 08:39:43 +0800 Subject: [PATCH] Merge branch 'feature_1.0' --- src/views/UVA/index.vue | 505 +++++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 376 insertions(+), 129 deletions(-) diff --git a/src/views/UVA/index.vue b/src/views/UVA/index.vue index 045d9bc..0266911 100644 --- a/src/views/UVA/index.vue +++ b/src/views/UVA/index.vue @@ -7,18 +7,17 @@ > <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" - @blur="chooseDate1" - @focus="chooseDate" value-format="yyyy-MM-dd" style="width: 280px" - > - </el-date-picker> + @change="chooseDate" + @blur="chooseDate1" + @focus="chooseDate2" + /> </div> <!-- <el-card class="box-card" style="width: 274px; margin: 13px auto"> --> @@ -43,11 +42,7 @@ class="coll" > <!--accordion ���������������--> - <el-collapse - accordion - style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)" - v-show="shou1 === true" - > + <el-collapse v-show="shou1 === true" v-loading="loading"> <el-collapse-item style="text-indent: 2em; position: relative; padding-botton: 10px" > @@ -65,12 +60,13 @@ </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" - ref="collapse" - v-show="shou1 === false" > <el-collapse-item v-for="(item1, index) in asideData.uavTimeFly" @@ -128,36 +124,91 @@ > <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" @@ -183,12 +234,81 @@ -- <el-input class="inputtu" v-model="talltwo" ref="uvas"></el-input> </div> - </div> + </div> --> </div> <!-- <div v-if="noneData" class="noneData">������������������������������</div> --> - <div id="map_container" v-loading="loading" /> + <div id="map_container" v-loading="loading1" /> </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> @@ -256,12 +376,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 } }, @@ -315,8 +443,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 @@ -382,12 +514,15 @@ export default { filters: { sensorFilter: function (value) { - if (!value) return '' + if (!value) { + return '' + } return json[value] }, }, data() { return { + dialogFormVisible: false, chosee: 1, shou1: true, zhanK1: 1, @@ -398,7 +533,7 @@ 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' // ������������������������������������������ } @@ -406,7 +541,7 @@ }, tallone: 0, - talltwo: 500, + talltwo: 120, // ��������������� asideData: { dates: [], // ������date������ @@ -441,6 +576,7 @@ bdLon: null, bdLat: null, loading: false, + loading1: false, snesorParams: [ 'PM2.5', 'PM10', @@ -466,7 +602,9 @@ // ������������ ������������ this.timeOne = minDate.getTime() // ��������������������� ������������������ // ������������������������������������������������������������ - if (maxDate) this.timeOne = '' + if (maxDate) { + this.timeOne = '' + } }, disabledDate: (time) => { if (this.timeOne) { @@ -487,7 +625,6 @@ noneData: true, defaultData: [], carMac: null, - dialogFormVisible: false, optionsduo: [ { code: 'a34004', name: 'PM2.5' }, { code: 'a34002', name: 'PM10' }, @@ -641,7 +778,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), @@ -649,14 +786,89 @@ 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', + }, + ], } - }, - - mounted() { - this.initStart() - // this.$refs.datePick.focus() - // this.getDate() - // this.flyData() }, watch: { dataTypeValue(n, o) { @@ -681,6 +893,16 @@ deep: true, immediate: true, }, + + mounted() { + this.$nextTick(() => { + this.initStart() + }) + + // this.$refs.datePick.focus() + // this.getDate() + // this.flyData() + }, created() { this.newTime(this.timeValue) this.newDate() @@ -689,10 +911,18 @@ // this.getFlyData() }, methods: { + 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() @@ -700,13 +930,15 @@ } 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) => { @@ -714,7 +946,6 @@ this.carData = [] if (res.data === 'null') { this.noneData = true - this.loading = false return } for (var i = 0; i < res.data.length; i++) { @@ -735,6 +966,11 @@ this.getTimeAreaData(this.datenum) $('.coll').css('margin-top', '350px') }, + chooseDate2() { + // this.$refs.datePick.focus() // ��������������������������������� + // this.getTimeAreaData(this.datenum) + $('.coll').css('margin-top', '350px') + }, chooseDate1() { $('.coll').css('margin-top', '10px') // this.$refs.datePick.focus() // ��������������������������������� @@ -745,13 +981,11 @@ // return // } this.selecttrue = 2 - $('.dds').css({ height: '170px' }) - $('.numss').css({ width: '750px' }) + $('.numss').css({ width: '1050px' }) }, shou() { this.selecttrue = 1 - $('.dds').css({ height: '100px' }) - $('.numss').css({ width: '690px' }) + $('.numss').css({ width: '700px' }) }, parseTime(time, cFormat) { if (arguments.length === 0 || !time) { @@ -812,12 +1046,6 @@ }) return arr }, - // ��������������������������������� - changeCarData(e) { - this.carMac = e - this.getStart() - }, - // ��������������������������� // ��������������������������������������� Rad(d) { return (d * Math.PI) / 180.0 // ��������������������������������������������������� @@ -882,11 +1110,12 @@ } this.dataType = 'history' // this.map = null - this.getStart() } }, // ��������������������������������� getTimeAreaData(item) { + // this.asideData.uavTimeFly = [] + this.loading = true this.$request({ url: 'uav/queryTimeSlot', method: 'get', @@ -898,13 +1127,13 @@ // 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 // } @@ -931,6 +1160,7 @@ // 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 @@ -942,12 +1172,14 @@ } 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', }, @@ -956,7 +1188,6 @@ this.carData = [] if (res.data === 'null') { this.noneData = true - this.loading = false return } for (var i = 0; i < res.data.length; i++) { @@ -1003,8 +1234,10 @@ this.abc += 1 const that = this if (!res) { - console.log(1) 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({ @@ -1050,7 +1283,7 @@ ], }) showNoPoints() - + this.loading1 = false return } if (this.dataType === 'history') { @@ -1062,7 +1295,6 @@ // 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) => { @@ -1078,10 +1310,12 @@ 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.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) @@ -1104,7 +1338,7 @@ // ��������������������������������� // if (!that.showPoints) { // console.log(111) - // that.map = new BMapGL.Map('map_container') + // that.map = new window.BMapGL.Map('map_container') // } // that.map.enableScrollWheelZoom(true) // ������������������������������������������������������s // that.map.setMapType(BMAP_EARTH_MAP) // ��������������������������������� @@ -1125,7 +1359,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() } @@ -1141,6 +1375,7 @@ map: that.map, }) that.firstPlayFlag = false + that.loading1 = false } else { this.view.removeAllLayers() this.map.clearOverlays() @@ -1148,6 +1383,8 @@ that.view = new mapvgl.View({ map: that.map, }) + that.loading1 = false + // that.map.centerAndZoom(that.centerPoint, 18) } } @@ -1198,12 +1435,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) @@ -1279,6 +1516,7 @@ } } points.push(point1) + // console.log(points, 'image.png') // if (flag) { // points.push(point1) // console.log(points, 'points') @@ -1774,20 +2012,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; } @@ -1962,38 +2206,23 @@ /deep/.inputNum { width: 4% !important; } -.dateArrClass { - position: relative; -} -.dateArrClass > div ::after { - content: ''; - position: absolute; - right: 8px; - top: 23px; - width: 5px; - height: 5px; - border-radius: 50%; - z-index: 999; - background-color: #f40; -} + .numss { - width: 690px; + width: 700px; background-color: white; - padding: 10px; margin-top: 17px; display: flex; + height: 60px; } /deep/.el-select { width: 8% !important; } .Duo { - height: 60px; display: flex; overflow: hidden; background-color: white; width: 750px; padding-left: 10px; - margin-top: 17px; } .spantu { width: 190px; @@ -2002,9 +2231,10 @@ // background-color: white; // height: 40px; display: flex; - margin-left: 25px; + margin-left: 10px; line-height: 60px; font-weight: 5px; + color: #696b6f; .inputtu { width: 40%; margin-left: 5px; @@ -2013,26 +2243,20 @@ .slee { line-height: 60px; width: 100px; + margin-left: 25px; } .spantuu { - margin-left: 25px; width: 400px; line-height: 60px; + color: #696b6f; .inputtu { width: 20%; } } -.jlpMySelectPopper.el-picker-panel { - width: 280px; - height: 330px; -} -.jlpMySelectPopper.el-date-picker table { - width: 88%; -} + .BMap_cpyCtrl { display: none; } - .anchorBL { display: none; } @@ -2047,4 +2271,27 @@ .el-scrollbar__wrap { overflow-x: hidden; } -</style> \ No newline at end of file +</style> +<style > +.jlpMySelectPopper.el-picker-panel { + width: 280px; + height: 330px; +} +.jlpMySelectPopper.el-date-picker table { + width: 88%; +} +.dateArrClass { + position: relative; +} +.dateArrClass > div ::after { + content: ''; + position: absolute; + right: 8px; + top: 23px; + width: 5px; + height: 5px; + border-radius: 50%; + z-index: 999; + background-color: #f40; +} +</style> -- Gitblit v1.8.0