| | |
| | | > |
| | | <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" |
| | | value-format="yyyy-MM-dd" |
| | | style="width: 280px" |
| | | @change="chooseDate" |
| | | @blur="chooseDate1" |
| | | @focus="chooseDate2" |
| | | value-format="yyyy-MM-dd" |
| | | style="width: 280px" |
| | | > |
| | | </el-date-picker> |
| | | /> |
| | | </div> |
| | | <!-- <el-card class="box-card" style="width: 274px; margin: 13px auto"> --> |
| | | |
| | |
| | | class="coll" |
| | | > |
| | | <!--accordion 手风琴模式--> |
| | | <el-collapse |
| | | accordion |
| | | style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)" |
| | | v-show="shou1 === true" |
| | | v-loading="loading" |
| | | > |
| | | <el-collapse v-show="shou1 === true" v-loading="loading"> |
| | | <el-collapse-item |
| | | style="text-indent: 2em; position: relative; padding-botton: 10px" |
| | | > |
| | |
| | | </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" |
| | | v-loading="loading" |
| | | > |
| | | <el-collapse-item |
| | | v-for="(item1, index) in asideData.uavTimeFly" |
| | |
| | | > |
| | | <div class="numss"> |
| | | <el-radio-group |
| | | v-if="selecttrue === 1" |
| | | v-model="radioSeven" |
| | | size="medium" |
| | | @change="changeCode" |
| | | v-if="selecttrue === 1" |
| | | 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> |
| | | <div class="Duo" v-if="selecttrue === 2"> |
| | | <div v-if="selecttrue === 2" class="Duo"> |
| | | <div class="spantuu"> |
| | | <span>无人机飞行高度范围(米): </span> |
| | | <el-input |
| | | class="inputtu" |
| | | v-model="tallone" |
| | | ref="uvas" |
| | | ></el-input> |
| | | <el-input ref="uvas" v-model="tallone" class="inputtu" /> |
| | | -- |
| | | <el-input |
| | | class="inputtu" |
| | | v-model="talltwo" |
| | | ref="uvas" |
| | | ></el-input> |
| | | <el-input ref="uvas" v-model="talltwo" class="inputtu" /> |
| | | </div> |
| | | <!-- <el-select v-model="Duovalue" placeholder="其他因子" class="slee"> |
| | | <el-option |
| | |
| | | <div class="spantu"> |
| | | <span>图形边长(米): </span |
| | | ><el-input |
| | | class="inputtu" |
| | | ref="uvas" |
| | | v-model="uvasize" |
| | | class="inputtu" |
| | | clearable |
| | | placeholder="请输入内容" |
| | | ref="uvas" |
| | | ></el-input> |
| | | /> |
| | | </div> |
| | | <el-select v-model="Duovalue" placeholder="其他因子" class="slee"> |
| | | <el-option |
| | |
| | | :key="item.code" |
| | | :label="item.name" |
| | | :value="item.name" |
| | | > |
| | | </el-option> |
| | | /> |
| | | </el-select> |
| | | <!-- <div class="spantuu"> |
| | | <span>无人机飞行高度范围(米): </span> |
| | |
| | | </div> --> |
| | | </div> |
| | | <div v-if="selecttrue === 1" style="margin-left: 10px"> |
| | | <el-button type="primary" @click="gengD" style="margin-top: 10px" |
| | | >更多条件</el-button |
| | | > |
| | | <el-button type="primary" style="margin-top: 10px" @click="gengD"> |
| | | 更多条件 |
| | | </el-button> |
| | | </div> |
| | | <div |
| | | v-if="selecttrue === 2" |
| | |
| | | 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> |
| | | 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"> |
| | |
| | | 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> |
| | | 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> --> |
| | |
| | | </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> |
| | | <el-button @click="dialogFormVisible = false"> 取 消 </el-button> |
| | | <el-button type="primary" @click="customLevel"> 确 定 </el-button> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | |
| | | 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 } |
| | | }, |
| | |
| | | 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 |
| | |
| | | export default { |
| | | filters: { |
| | | sensorFilter: function (value) { |
| | | if (!value) return '' |
| | | if (!value) { |
| | | return '' |
| | | } |
| | | return json[value] |
| | | }, |
| | | }, |
| | |
| | | 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' // 返回值设置的是我们添加的类名 |
| | | } |
| | |
| | | // 最大时间 最小时间 |
| | | this.timeOne = minDate.getTime() // 当选一个日期时 就是最小日期 |
| | | // 如何你选择了两个日期了,就把那个变量置空 |
| | | if (maxDate) this.timeOne = '' |
| | | if (maxDate) { |
| | | this.timeOne = '' |
| | | } |
| | | }, |
| | | disabledDate: (time) => { |
| | | if (this.timeOne) { |
| | |
| | | endTime: '', |
| | | dataDate: '', |
| | | sensorTime: [], |
| | | uvasize: 50, |
| | | uvasize: 20, |
| | | timeValue: [ |
| | | new Date(2020, 1, 1, 0, 0, 0), |
| | | new Date(2022, 12, 31, 23, 59, 59), |
| | |
| | | ], |
| | | } |
| | | }, |
| | | |
| | | mounted() { |
| | | this.initStart() |
| | | // this.$refs.datePick.focus() |
| | | // this.getDate() |
| | | // this.flyData() |
| | | }, |
| | | watch: { |
| | | dataTypeValue(n, o) { |
| | | if (this.dataTypeValue === 'webSocket') { |
| | |
| | | }, |
| | | deep: true, |
| | | immediate: true, |
| | | }, |
| | | |
| | | mounted() { |
| | | this.$nextTick(() => { |
| | | this.initStart() |
| | | }) |
| | | |
| | | // this.$refs.datePick.focus() |
| | | // this.getDate() |
| | | // this.flyData() |
| | | }, |
| | | created() { |
| | | this.newTime(this.timeValue) |
| | |
| | | const that = this |
| | | if (!res) { |
| | | 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({ |
| | |
| | | // 已有地图,避免再次请求 |
| | | // 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) // 设置地图类型为地球模式 |
| | |
| | | // 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() |
| | | } |
| | |
| | | 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) |
| | |
| | | } |
| | | </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; |
| | | } |
| | |
| | | /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: 700px; |
| | | background-color: white; |
| | |
| | | width: 20%; |
| | | } |
| | | } |
| | | .jlpMySelectPopper.el-picker-panel { |
| | | width: 280px; |
| | | height: 330px; |
| | | } |
| | | .jlpMySelectPopper.el-date-picker table { |
| | | width: 88%; |
| | | } |
| | | |
| | | .BMap_cpyCtrl { |
| | | display: none; |
| | | } |
| | | |
| | | .anchorBL { |
| | | display: none; |
| | | } |
| | |
| | | .el-scrollbar__wrap { |
| | | overflow-x: hidden; |
| | | } |
| | | </style> |
| | | </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> |