| | |
| | | <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" |
| | | > |
| | | <el-card class="box-card" style="width: 274px; margin: 13px auto"> |
| | | <div slot="header" class="clearfix"> |
| | | <div> |
| | | <img |
| | | style="float: left; width: 20px; margin: 15px 0 0 18px" |
| | | src="../../assets/images/uav/calendar.png" |
| | | alt="" |
| | | /> |
| | | <span |
| | | style=" |
| | | display: inline-block; |
| | | float: left; |
| | | font-size: 16px; |
| | | margin-left: 10px; |
| | | " |
| | | >无人机飞行日期</span |
| | | >zzzz |
| | | </div> |
| | | </div> |
| | | <el-scrollbar |
| | | v-if="asideData.dates.length > 0" |
| | | style="height: 200px; overflow-x: hidden" |
| | | class="text item" |
| | | > |
| | | <div |
| | | v-for="(item, index) in asideData.dates" |
| | | class="per-date" |
| | | :class="{ active: asideData.activeKey === index }" |
| | | @click="getTimeAreaData(item, index)" |
| | | :key="index" |
| | | > |
| | | <img |
| | | style="float: left; width: 14px; margin: 18px 0 0 0" |
| | | src="../../assets/images/uav/calendar.png" |
| | | alt="" |
| | | /> |
| | | <span |
| | | style=" |
| | | display: inline-block; |
| | | float: left; |
| | | font-size: 14px; |
| | | margin-left: 15px; |
| | | " |
| | | >{{ item }}</span |
| | | > |
| | | </div> |
| | | </el-scrollbar> |
| | | <div v-else style="height: 180px; width: 274px; overflow-x: hidden"> |
| | | <div style="width: 274px; margin: 13px auto"> |
| | | <el-date-picker |
| | | ref="datePick" |
| | | v-model="datenum" |
| | | :picker-options="pickerOptions" |
| | | placeholder="选择日期" |
| | | popper-class="jlpMySelectPopper" |
| | | value-format="yyyy-MM-dd" |
| | | 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; |
| | |
| | | > |
| | | 无飞行记录 |
| | | </div> |
| | | </div> |
| | | </el-card> |
| | | <div style="width: 274px; margin: 13px auto; border-radius: 8px"> |
| | | </div> --> |
| | | <!-- </el-card> --> |
| | | |
| | | <div |
| | | style="width: 274px; margin: 10px auto; border-radius: 8px" |
| | | class="coll" |
| | | > |
| | | <!--accordion 手风琴模式--> |
| | | <el-collapse |
| | | v-show="shou1 === true" |
| | | v-loading="loading" |
| | | accordion |
| | | style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)" |
| | | > |
| | | <el-collapse-item |
| | | 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" |
| | | > |
| | | 该日期暂无无人机数据</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" |
| | |
| | | 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 |
| | | > |
| | | {{ 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 }" |
| | | @click="getFlyData(item, index)" |
| | | :class="{ activeArea: asideData.activeKey === index }" |
| | | @click="getFlyData(item, index, item1.mac)" |
| | | > |
| | | <div style="width: 100%; margin: 0 auto"> |
| | | <span>{{ |
| | |
| | | <span>{{ |
| | | item.endTime.substr(11, item.startTime.length) |
| | | }}</span> |
| | | <span> ({{ item.total }}条) </span> |
| | | </div> |
| | | </div> |
| | | </el-scrollbar> |
| | |
| | | position: fixed; |
| | | z-index: 20; |
| | | padding-left: 20px; |
| | | height: 75px; |
| | | line-height: 80px; |
| | | height: 100px; |
| | | width: 100%; |
| | | font-size: 18px; |
| | | font-weight: bold; |
| | | background-color: rgba(192, 192, 192, 0.4); |
| | | " |
| | | class="dds" |
| | | > |
| | | <el-radio-group |
| | | v-model="radioSeven" |
| | | size="medium" |
| | | @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-group> |
| | | <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 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 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 === 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"> |
| | | <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 |
| | | class="inputtu" |
| | | v-model="uvasize" |
| | | clearable |
| | | placeholder="请输入内容" |
| | | ref="uvas" |
| | | ></el-input> |
| | | </div> |
| | | <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> |
| | | <div v-if="noneData" class="noneData">当前时间没有飞行数据</div> |
| | | <div id="map_container" v-loading="loading" /> |
| | | <!-- <div v-if="noneData" class="noneData">当前时间没有飞行数据</div> --> |
| | | <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> |
| | | |
| | |
| | | import json from '@/assets/json/sensor.json' |
| | | import $ from 'jquery' |
| | | import '@/assets/icon/iconfont.css' |
| | | import moment from 'moment' |
| | | |
| | | var GPS = { |
| | | PI: 3.14159265358979324, |
| | | x_pi: (3.14159265358979324 * 3000.0) / 180.0, |
| | | delta: function (lat, lon) { |
| | | delta: function(lat, lon) { |
| | | var a = 6378245.0 // a: 卫星椭球坐标投影到平面地图坐标系的投影因子。 |
| | | var ee = 0.00669342162296594323 // ee: 椭球的偏心率。 |
| | | var dLat = this.transformLat(lon - 105.0, lat - 35.0) |
| | |
| | | }, |
| | | |
| | | // WGS-84 to GCJ-02 |
| | | gcj_encrypt: function (wgsLat, wgsLon) { |
| | | gcj_encrypt: function(wgsLat, wgsLon) { |
| | | if (this.outOfChina(wgsLat, wgsLon)) { |
| | | return { lat: wgsLat, lon: wgsLon } |
| | | } |
| | |
| | | return { lat: wgsLat + d.lat, lon: wgsLon + d.lon } |
| | | }, |
| | | // GCJ-02 to WGS-84 |
| | | gcj_decrypt: function (gcjLat, gcjLon) { |
| | | gcj_decrypt: function(gcjLat, gcjLon) { |
| | | if (this.outOfChina(gcjLat, gcjLon)) { |
| | | return { lat: gcjLat, lon: gcjLon } |
| | | } |
| | |
| | | return { lat: gcjLat - d.lat, lon: gcjLon - d.lon } |
| | | }, |
| | | // GCJ-02 to WGS-84 exactly |
| | | gcj_decrypt_exact: function (gcjLat, gcjLon) { |
| | | gcj_decrypt_exact: function(gcjLat, gcjLon) { |
| | | var initDelta = 0.01 |
| | | var threshold = 0.000000001 |
| | | var dLat = initDelta |
| | |
| | | return { lat: wgsLat, lon: wgsLon } |
| | | }, |
| | | // GCJ-02 to BD-09 |
| | | bd_encrypt: function (gcjLat, gcjLon) { |
| | | bd_encrypt: function(gcjLat, gcjLon) { |
| | | var x = gcjLon |
| | | var y = gcjLat |
| | | var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.x_pi) |
| | |
| | | return { lat: this.bdLat, lon: this.bdLon } |
| | | }, |
| | | // BD-09 to GCJ-02 |
| | | bd_decrypt: function (bdLat, bdLon) { |
| | | bd_decrypt: function(bdLat, bdLon) { |
| | | var x = bdLon - 0.0065 |
| | | var y = bdLat - 0.006 |
| | | var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi) |
| | |
| | | }, |
| | | // WGS-84 to Web mercator |
| | | // mercatorLat -> y mercatorLon -> x |
| | | mercator_encrypt: function (wgsLat, wgsLon) { |
| | | mercator_encrypt: function(wgsLat, wgsLon) { |
| | | var x = (wgsLon * 20037508.34) / 180.0 |
| | | var y = |
| | | Math.log(Math.tan(((90.0 + wgsLat) * this.PI) / 360.0)) / |
| | |
| | | }, |
| | | // Web mercator to WGS-84 |
| | | // mercatorLat -> y mercatorLon -> x |
| | | mercator_decrypt: function (mercatorLat, mercatorLon) { |
| | | mercator_decrypt: function(mercatorLat, mercatorLon) { |
| | | var x = (mercatorLon / 20037508.34) * 180.0 |
| | | var y = (mercatorLat / 20037508.34) * 180.0 |
| | | y = |
| | |
| | | return { lat: y, lon: x } |
| | | }, |
| | | // two point's distance |
| | | distance: function (latA, lonA, latB, lonB) { |
| | | distance: function(latA, lonA, latB, lonB) { |
| | | var earthR = 6371000.0 |
| | | var x = |
| | | Math.cos((latA * this.PI) / 180.0) * |
| | |
| | | var distance = alpha * earthR |
| | | return distance |
| | | }, |
| | | outOfChina: function (lat, lon) { |
| | | outOfChina: function(lat, lon) { |
| | | if (lon < 72.004 || lon > 137.8347) { |
| | | return true |
| | | } |
| | |
| | | } |
| | | return false |
| | | }, |
| | | transformLat: function (x, y) { |
| | | transformLat: function(x, y) { |
| | | var ret = |
| | | -100.0 + |
| | | 2.0 * x + |
| | |
| | | 3.0 |
| | | return ret |
| | | }, |
| | | transformLon: function (x, y) { |
| | | transformLon: function(x, y) { |
| | | var ret = |
| | | 300.0 + |
| | | x + |
| | |
| | | 2.0) / |
| | | 3.0 |
| | | return ret |
| | | }, |
| | | } |
| | | } |
| | | export default { |
| | | filters: { |
| | | sensorFilter: function (value) { |
| | | sensorFilter: function(value) { |
| | | if (!value) return '' |
| | | return json[value] |
| | | }, |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | dialogFormVisible: false, |
| | | chosee: 1, |
| | | shou1: true, |
| | | zhanK1: 1, |
| | | zhanK: 1, |
| | | Duovalue: '', |
| | | datenum: new Date(), |
| | | // orderTime:[Date('2020-06-19'),Date('2021-06-19')] |
| | | selecttrue: 1, |
| | | pickerOptions: { |
| | | cellClassName: (time) => { |
| | | const timeDate = moment(time.getTime()).format('yyyy-MM-DD') |
| | | if (this.timeNums.includes(timeDate)) { |
| | | return 'dateArrClass' // 返回值设置的是我们添加的类名 |
| | | } |
| | | } |
| | | }, |
| | | |
| | | tallone: 0, |
| | | talltwo: 120, |
| | | // 侧边栏数据 |
| | | asideData: { |
| | | dates: [], // 存放date数组 |
| | | activeNames: [0], |
| | | uavTimeFly: [], // 存放无人机信息以及飞行时间区间 |
| | | activeKey: 0, |
| | | activeAreaKey: 0, |
| | | activeKey: -1, |
| | | activeAreaKey: 0 |
| | | }, |
| | | load: 1, |
| | | value: [], |
| | |
| | | { code: 'a21004', name: 'NO2' }, |
| | | { code: 'a21005', name: 'CO' }, |
| | | { code: 'a05024', name: 'O3' }, |
| | | { code: 'a99054', name: 'TVOC' }, |
| | | { code: 'a99054', name: 'TVOC' } |
| | | ], |
| | | valuetime: '2023-01-01', |
| | | defautRadio: { code: 'a34004', name: 'PM2.5' }, |
| | | Layler: null, // 存放图层 |
| | | textMarkers: { code: '', markers: [] }, // 存放文本标注 |
| | |
| | | radioSeven: 'PM2.5', |
| | | bdLon: null, |
| | | bdLat: null, |
| | | loading: true, |
| | | loading: false, |
| | | loading1: false, |
| | | snesorParams: [ |
| | | 'PM2.5', |
| | | 'PM10', |
| | |
| | | 'CO', |
| | | 'O3', |
| | | 'TVOC', |
| | | '尘负荷', |
| | | '尘负荷' |
| | | ], |
| | | changeColor: 0, |
| | | changeColor1: 0, |
| | |
| | | radio1: null, |
| | | viewOptions: ['平铺', '立体'], |
| | | dateValue: [], |
| | | pickerOptions: { |
| | | disabledDate(time) { |
| | | return time.getTime() > Date.now() |
| | | }, |
| | | shortcuts: [ |
| | | { |
| | | text: '今天', |
| | | onClick(picker) { |
| | | picker.$emit('pick', new Date()) |
| | | }, |
| | | }, |
| | | { |
| | | text: '昨天', |
| | | onClick(picker) { |
| | | const date = new Date() |
| | | date.setTime(date.getTime() - 3600 * 1000 * 24) |
| | | picker.$emit('pick', date) |
| | | }, |
| | | }, |
| | | { |
| | | text: '一周前', |
| | | onClick(picker) { |
| | | const date = new Date() |
| | | date.setTime(date.getTime() - 3600 * 1000 * 24 * 7) |
| | | picker.$emit('pick', date) |
| | | }, |
| | | }, |
| | | ], |
| | | }, |
| | | timeOne: '', |
| | | threeOptions: { |
| | | onPick: ({ maxDate, minDate }) => { |
| | |
| | | } else { |
| | | return time.getTime() > new Date() |
| | | } |
| | | }, |
| | | } |
| | | }, |
| | | sensorDate: null, |
| | | noneData: false, |
| | | noneData: true, |
| | | defaultData: [], |
| | | carMac: null, |
| | | dialogFormVisible: false, |
| | | optionsduo: [ |
| | | { code: 'a34004', name: 'PM2.5' }, |
| | | { code: 'a34002', name: 'PM10' }, |
| | | { code: 'a21026', name: 'SO2' }, |
| | | { code: 'a21004', name: 'NO2' }, |
| | | { code: 'a21005', name: 'CO' }, |
| | | { code: 'a05024', name: 'O3' }, |
| | | { code: 'a99054', name: 'TVOC' }, |
| | | { |
| | | code: 'a01006', |
| | | name: '气压' |
| | | }, |
| | | { |
| | | code: 'a01001', |
| | | name: '温度' |
| | | }, |
| | | { |
| | | code: 'a01002', |
| | | name: '湿度' |
| | | } |
| | | ], |
| | | sensorTableData: [ |
| | | { |
| | | sensorName: 'PM2.5', |
| | |
| | | tab3: '115', |
| | | tab4: '150', |
| | | tab5: '250', |
| | | tab6: '350', |
| | | tab6: '350' |
| | | }, |
| | | { |
| | | sensorName: 'PM10', |
| | |
| | | tab3: '250', |
| | | tab4: '350', |
| | | tab5: '420', |
| | | tab6: '500', |
| | | tab6: '500' |
| | | }, |
| | | { |
| | | sensorName: 'SO2', |
| | |
| | | tab3: '475', |
| | | tab4: '800', |
| | | tab5: '1600', |
| | | tab6: '2100', |
| | | tab6: '2100' |
| | | }, |
| | | { |
| | | sensorName: 'NO2', |
| | |
| | | tab3: '180', |
| | | tab4: '280', |
| | | tab5: '565', |
| | | tab6: '750', |
| | | tab6: '750' |
| | | }, |
| | | { |
| | | sensorName: 'CO', |
| | |
| | | tab3: '14', |
| | | tab4: '24', |
| | | tab5: '36', |
| | | tab6: '48', |
| | | tab6: '48' |
| | | }, |
| | | { |
| | | sensorName: 'O3', |
| | |
| | | tab3: '300', |
| | | tab4: '400', |
| | | tab5: '800', |
| | | tab6: '1000', |
| | | tab6: '1000' |
| | | }, |
| | | { |
| | | sensorName: 'TVOC', |
| | |
| | | tab3: '0.5', |
| | | tab4: '0.7', |
| | | tab5: '0.9', |
| | | tab6: '1', |
| | | tab6: '1' |
| | | }, |
| | | { |
| | | sensorName: '尘负荷', |
| | |
| | | tab3: '1000', |
| | | tab4: '10000', |
| | | tab5: '20000', |
| | | tab6: '50000', |
| | | tab6: '50000' |
| | | }, |
| | | |
| | | { |
| | | sensorName: '气压', |
| | | unit: 'hpa' |
| | | }, |
| | | { |
| | | sensorName: '湿度', |
| | | unit: '%' |
| | | }, |
| | | { |
| | | sensorName: '温度', |
| | | unit: '℃' |
| | | } |
| | | ], |
| | | carWs: null, |
| | | map: null, |
| | |
| | | dataTypeList: [ |
| | | { |
| | | value: 'history', |
| | | label: '历史数据', |
| | | label: '历史数据' |
| | | }, |
| | | { |
| | | value: 'webSocket', |
| | | label: '实时数据', |
| | | }, |
| | | label: '实时数据' |
| | | } |
| | | ], |
| | | dataTypeValue: 'history', |
| | | historyView: true, |
| | |
| | | endTime: '', |
| | | dataDate: '', |
| | | sensorTime: [], |
| | | uvasize: 20, |
| | | timeValue: [ |
| | | new Date(2020, 1, 1, 0, 0, 0), |
| | | new Date(2022, 12, 31, 23, 59, 59), |
| | | new Date(2022, 12, 31, 23, 59, 59) |
| | | ], |
| | | 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.getDate() |
| | | // this.flyData() |
| | | }, |
| | | watch: { |
| | | dataTypeValue(n, o) { |
| | |
| | | // console.log(n) |
| | | }, |
| | | deep: true, |
| | | immediate: true, |
| | | immediate: true |
| | | }, |
| | | |
| | | mounted() { |
| | | this.initStart() |
| | | // this.$refs.datePick.focus() |
| | | // this.getDate() |
| | | // this.flyData() |
| | | }, |
| | | created() { |
| | | this.newTime(this.timeValue) |
| | | this.newDate() |
| | | this.getDate() |
| | | // this.$watch('carMac', () => { |
| | | // }) |
| | | |
| | | // 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() |
| | | this.map.clearOverlays() |
| | | } |
| | | this.$request({ |
| | | // url: '/uav/queryDataByBatch', |
| | | url: '/uav/getUav', |
| | | // url: '/uav/test', |
| | | method: 'post', |
| | | data: { |
| | | batch: this.batchs, |
| | | uvasize: this.uvasize, |
| | | mac: this.macs, |
| | | height1: this.tallone, |
| | | height2: this.talltwo |
| | | // batch: '2023-06-16 16:21:21', |
| | | } |
| | | }).then((res) => { |
| | | // console.log(res) |
| | | this.carData = [] |
| | | if (res.data === 'null') { |
| | | this.noneData = true |
| | | return |
| | | } |
| | | for (var i = 0; i < res.data.length; i++) { |
| | | res.data[i].flyLat = res.data[i].flyLat + ' °'.toString() |
| | | res.data[i].flyLon = res.data[i].flyLon + ' °'.toString() |
| | | // res.data[i].a34004 = Math.floor(Math.random() * 100 + 1) |
| | | this.carData.push(res.data[i]) |
| | | } |
| | | if (this.Duovalue != '') { |
| | | this.radioSeven = '' |
| | | } |
| | | this.changeCode(this.Duovalue) |
| | | this.initStart(this.carData) |
| | | }) |
| | | }, |
| | | chooseDate() { |
| | | // this.$refs.datePick.focus() // 选择日期后依旧触发焦点 |
| | | 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() // 选择日期后依旧触发焦点 |
| | | }, |
| | | gengD() { |
| | | // if (this.zhanK === 1) { |
| | | // this.$message.warning('请先在左侧选择无人机和时间') |
| | | // return |
| | | // } |
| | | this.selecttrue = 2 |
| | | $('.numss').css({ width: '1050px' }) |
| | | }, |
| | | shou() { |
| | | this.selecttrue = 1 |
| | | $('.numss').css({ width: '700px' }) |
| | | }, |
| | | parseTime(time, cFormat) { |
| | | if (arguments.length === 0 || !time) { |
| | | return null |
| | | } |
| | | const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}' |
| | | let date |
| | | if (typeof time === 'object') { |
| | | date = time |
| | | } else { |
| | | if (typeof time === 'string') { |
| | | if (/^[0-9]+$/.test(time)) { |
| | | time = parseInt(time) |
| | | } else { |
| | | time = time.replace(new RegExp(/-/gm), '/') |
| | | } |
| | | } |
| | | |
| | | if (typeof time === 'number' && time.toString().length === 10) { |
| | | time = time * 1000 |
| | | } |
| | | date = new Date(time) |
| | | } |
| | | const formatObj = { |
| | | y: date.getFullYear(), |
| | | m: date.getMonth() + 1, |
| | | d: date.getDate(), |
| | | h: date.getHours(), |
| | | i: date.getMinutes(), |
| | | s: date.getSeconds(), |
| | | a: date.getDay() |
| | | } |
| | | const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => { |
| | | const value = formatObj[key] |
| | | if (key === 'a') { |
| | | return ['日', '一', '二', '三', '四', '五', '六'][value] |
| | | } |
| | | return value.toString().padStart(2, '0') |
| | | }) |
| | | return time_str |
| | | }, |
| | | newTime2(timeArr) { |
| | | var arr = [] |
| | | timeArr.map((v) => { |
| | |
| | | }) |
| | | return arr |
| | | }, |
| | | // 点击列表切换走航车数据 |
| | | changeCarData(e) { |
| | | this.carMac = e |
| | | this.getStart() |
| | | }, |
| | | // 请求走航车列表数据 |
| | | // 进行经纬度转换为距离的计算 |
| | | Rad(d) { |
| | | return (d * Math.PI) / 180.0 // 经纬度转换成三角函数中度分表形式。 |
| | |
| | | } |
| | | this.dataType = 'history' |
| | | // this.map = null |
| | | this.getStart() |
| | | } |
| | | }, |
| | | // 获取无人机以及时间区间 |
| | | getTimeAreaData(item, index) { |
| | | this.asideData.activeAreaKey = -1 |
| | | this.asideData.activeKey = index |
| | | getTimeAreaData(item) { |
| | | // this.asideData.uavTimeFly = [] |
| | | this.loading = true |
| | | this.$request({ |
| | | url: 'uav/queryTimeSlot', |
| | | method: 'get', |
| | | params: { |
| | | organizationId: this.$store.state.orgId, |
| | | date: item, |
| | | }, |
| | | date: item |
| | | } |
| | | }).then((res) => { |
| | | console.log(res.data.vos.length, '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 |
| | | return false |
| | | }else{ |
| | | // 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 |
| | | // } |
| | |
| | | this.addLayers(item) |
| | | }, |
| | | // 初始化地图 |
| | | getFlyData(item, index) { |
| | | console.log(index, 'index') |
| | | console.log(item.batch) |
| | | 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 |
| | | if (this.view) { |
| | | this.view.removeAllLayers() |
| | | this.map.clearOverlays() |
| | | } |
| | | this.$request({ |
| | | url: '/uav/queryDataByBatch', |
| | | method: 'get', |
| | | params: { |
| | | // url: '/uav/queryDataByBatch', |
| | | // url: '/uav/test', |
| | | url: '/uav/getUav', |
| | | method: 'post', |
| | | data: { |
| | | batch: item.batch, |
| | | uvasize: this.uvasize, |
| | | 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 |
| | | } |
| | | if (res.data.vos.length) { |
| | | for (var i = 0; i < res.data.vos.length; i++) { |
| | | this.carData.push(JSON.parse(res.data.vos[i].value)) |
| | | } |
| | | this.initStart(this.carData) |
| | | for (var i = 0; i < res.data.length; i++) { |
| | | res.data[i].flyLat = res.data[i].flyLat + ' °'.toString() |
| | | res.data[i].flyLon = res.data[i].flyLon + ' °'.toString() |
| | | // res.data[i].a34004 = Math.floor(Math.random() * 100 + 1) |
| | | this.carData.push(res.data[i]) |
| | | } |
| | | this.initStart(this.carData) |
| | | this.zhanK = 2 |
| | | }) |
| | | }, |
| | | // 获取组织下存在飞行记录的日期 |
| | |
| | | url: '/uav/queryDate', |
| | | method: 'get', |
| | | params: { |
| | | organizationId: this.$store.state.orgId, |
| | | }, |
| | | organizationId: this.$store.state.orgId |
| | | } |
| | | }).then((res) => { |
| | | 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) |
| | | setTimeout(() => { |
| | | if (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) |
| | | } |
| | | }, 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'); |
| | | this.abc += 1 |
| | | const that = this |
| | | if (!res) { |
| | | that.map = new window.window.BMapGL.Map('map_container') |
| | | that.map.enableScrollWheelZoom(true) // 开启鼠标滚轮,地图可以进行放大、缩小s |
| | | that.map.setMapType(BMAP_EARTH_MAP) // 设置地图类型为地球模式 |
| | | that.map.setDisplayOptions({ |
| | | street: false // 是否显示路网(只对卫星图和地球模式有效) |
| | | }) |
| | | that.map.setHeading(0) // 设置旋转角度 |
| | | if (that.viewKey === '2D') { |
| | | that.map.setTilt(0) // 地图倾斜 |
| | | } else { |
| | | that.map.setTilt(52) |
| | | } |
| | | that.map.setMapStyleV2({ |
| | | styleJson: [ |
| | | { |
| | | featureType: 'road', |
| | | elementType: 'all', |
| | | stylers: { |
| | | color: '#ffffff', |
| | | visibility: 'off' |
| | | } |
| | | }, |
| | | { |
| | | featureType: 'building', |
| | | elementType: 'all', |
| | | stylers: { |
| | | visibility: 'off' |
| | | } |
| | | }, |
| | | { |
| | | featureType: 'poilabel', |
| | | elementType: 'all', |
| | | stylers: { |
| | | visibility: 'off' |
| | | } |
| | | }, |
| | | { |
| | | featureType: 'manmade', |
| | | elementType: 'all', |
| | | stylers: { |
| | | visibility: 'off' |
| | | } |
| | | } |
| | | ] |
| | | }) |
| | | showNoPoints() |
| | | this.loading1 = false |
| | | return |
| | | } |
| | | if (this.dataType === 'history') { |
| | |
| | | // 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') { |
| | | if (typeof value.flyLon === 'undefined') { |
| | | showNoPoints() |
| | | } else { |
| | | var lng = parseFloat( |
| | | value.flylon.substr(0, value.flylon.length - 1) |
| | | value.flyLon.substr(0, value.flyLon.length - 1) |
| | | ) |
| | | var lat = parseFloat( |
| | | value.flylat.substr(0, value.flylat.length - 1) |
| | | 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) |
| | | // 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 window.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) |
| | | if ( |
| | | value.dustld - 0 !== 0 && |
| | | value.dustld - 0 < 100 && |
| | | (that.carMac === 'p5dnd7a0243622' || |
| | | that.carMac === 'p5dnd7a0243625') |
| | | ) { |
| | | point.dustld = 100 |
| | | } else { |
| | | point.dustld = value.dustld - 0 |
| | | } |
| | | // point.dustld = value.dustld - 0 |
| | | point.dustld = value.dustld - 0 |
| | | trackPoints.push(point) |
| | | } |
| | | }) |
| | | that.sensor = this.sensorKey |
| | | that.viewType = this.viewKey |
| | | that.size = 10 |
| | | that.size = this.uvasize |
| | | that.distance = that.size / 2 / Math.sin((1 * Math.PI) / 4) |
| | | // 已有地图,避免再次请求 |
| | | if (!that.showPoints) { |
| | | that.map = new BMapGL.Map('map_container') |
| | | } |
| | | that.map.enableScrollWheelZoom(true) // 开启鼠标滚轮,地图可以进行放大、缩小 |
| | | 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) |
| | | } |
| | | // 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({ |
| | | // // 设置天空颜色 |
| | | // skyColors: ['rgba(186, 0, 255, 0)', 'rgba(186, 0, 255, 0.2)'], // 天空颜色 |
| | | // building: false, // 不显示建筑物 |
| | | // poiText: true, // 显示poi文字 |
| | | // // skyColors: ['rgba(186, 0, 255, 0)', 'rgba(186, 0, 255, 0.2)'], // 天空颜色 |
| | | // 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() |
| | | } |
| | | that.showPoints = getShowPoints(that.size) |
| | | that.viewport = that.map.getViewport(eval(that.showPoints)) |
| | | console.log(eval(that.showPoints), 'eval(that.showPoints)') // 此方法仅返回视野信息(中心点坐标,缩放),不会将新的中心点和级别做用到当前地图上 |
| | | // console.log(eval(that.showPoints), 'eval(that.showPoints)') // 此方法仅返回视野信息(中心点坐标,缩放),不会将新的中心点和级别做用到当前地图上 |
| | | that.mapZoom = that.viewport.zoom |
| | | console.log(that.mapZoom, 'that.mapZoom') |
| | | // 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, |
| | | 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, |
| | | map: that.map |
| | | }) |
| | | that.loading1 = false |
| | | |
| | | // that.map.centerAndZoom(that.centerPoint, 18) |
| | | } |
| | | } |
| | |
| | | // drawStartAndEnd() // 起点和终点标注 |
| | | function draw(sensor, type, carMac) { |
| | | var levels = getGrading(sensor, type, carMac) |
| | | $.each(levels, function (index, value) { |
| | | $.each(levels, function(index, value) { |
| | | var color = value.color |
| | | var data = value.data |
| | | if (data.length > 0) { |
| | |
| | | selectedIndex: -1, // 选中项 |
| | | selectedColor: '#ee1111', // 选中项颜色 |
| | | autoSelect: true, // 根据鼠标位置来自动设置选中项 |
| | | riseTime: 1800, // 楼块初始化升起时间 |
| | | riseTime: 1800 // 楼块初始化升起时间 |
| | | }) |
| | | that.shapeLayer.setData(data) |
| | | that.view.addLayer(that.shapeLayer) |
| | |
| | | }) |
| | | that.map.setDefaultCursor('default') |
| | | if (type === '2D') { |
| | | $.each(that.showPoints, function (item, point) { |
| | | $.each(that.showPoints, function(item, point) { |
| | | setLabelStyle(point[sensor], point) |
| | | }) |
| | | } |
| | |
| | | |
| | | // 画方块,上色,添加文字 |
| | | function drawPolygon(sensor) { |
| | | $.each(that.showPoints, function (item, point) { |
| | | $.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) |
| | | var data = point[sensor] |
| | | // 根据因子浓度变换方块颜色 |
| | | var color = getColorAndLevel(sensor, data).color |
| | | var polygon = new BMapGL.Polygon( |
| | | var polygon = new window.BMapGL.Polygon( |
| | | [ |
| | | new BMapGL.Point(sw.lng, sw.lat), // 左下角 |
| | | new BMapGL.Point(ne.lng, sw.lat), // 左上角 |
| | | new BMapGL.Point(ne.lng, ne.lat), // 右上角 |
| | | new BMapGL.Point(sw.lng, ne.lat), // 右下角 |
| | | new window.BMapGL.Point(sw.lng, sw.lat), // 左下角 |
| | | new window.BMapGL.Point(ne.lng, sw.lat), // 左上角 |
| | | new window.BMapGL.Point(ne.lng, ne.lat), // 右上角 |
| | | new window.BMapGL.Point(sw.lng, ne.lat) // 右下角 |
| | | ], |
| | | { |
| | | strokeWeight: 0.5, |
| | | strokeOpacity: 0.0, |
| | | fillColor: color, |
| | | fillOpacity: 1, |
| | | strokeWeight: 0.1, // 边框线的宽度,以像素为单位 |
| | | // strokeOpacity: 0.0, //边线的透明度 |
| | | fillColor: color, // 是否需要填充色 |
| | | fillOpacity: 0.8, // 填充色的透明度,0~1之间 |
| | | strokeColor: 'black', // 边框线的颜色 |
| | | strokeStyle: 'solid' // 边线的样式,solid或dashed。 |
| | | } |
| | | ) |
| | | that.map.addOverlay(polygon) |
| | |
| | | |
| | | // 起点和终点标注 |
| | | function drawStartAndEnd() { |
| | | var startIcon = new BMapGL.Icon( |
| | | var startIcon = new window.BMapGL.Icon( |
| | | require('@/assets/images/start.png'), |
| | | new BMapGL.Size(48, 48) |
| | | new window.BMapGL.Size(48, 48) |
| | | ) |
| | | var startMark = new BMapGL.Marker(that.showPoints[0], { |
| | | var startMark = new window.BMapGL.Marker(that.showPoints[0], { |
| | | icon: startIcon, |
| | | offset: new BMapGL.Size(0, -20), |
| | | offset: new window.BMapGL.Size(0, -20) |
| | | }) |
| | | that.map.addOverlay(startMark) |
| | | var endIcon = new BMapGL.Icon( |
| | | var endIcon = new window.BMapGL.Icon( |
| | | require('@/assets/images/end.png'), |
| | | new BMapGL.Size(48, 48) |
| | | new window.BMapGL.Size(48, 48) |
| | | ) |
| | | var endMark = new BMapGL.Marker( |
| | | var endMark = new window.BMapGL.Marker( |
| | | that.showPoints[that.showPoints.length - 1], |
| | | { |
| | | icon: endIcon, |
| | | offset: new BMapGL.Size(0, -20), |
| | | offset: new window.BMapGL.Size(0, -20) |
| | | } |
| | | ) |
| | | that.map.addOverlay(endMark) |
| | |
| | | function drawLine() { |
| | | var data = [] |
| | | var points = [] |
| | | $.each(trackPoints, function (index, value) { |
| | | $.each(trackPoints, function(index, value) { |
| | | var point = [] |
| | | point.push(value['lng'], value['lat']) |
| | | points.push(point) |
| | |
| | | data.push({ |
| | | geometry: { |
| | | type: '"LineString"', |
| | | coordinates: [points], |
| | | }, |
| | | coordinates: [points] |
| | | } |
| | | }) |
| | | var lineLayer = new mapvgl.LineLayer({ |
| | | color: 'red', |
| | |
| | | animation: true, |
| | | duration: 10, // 循环时间2s |
| | | trailLength: 0.1, // 拖尾长度占间隔的0.4 |
| | | interval: 0.3, // 粒子长度占线整体长度的0.2 |
| | | interval: 0.3 // 粒子长度占线整体长度的0.2 |
| | | }) |
| | | that.view.addLayer(lineLayer) |
| | | lineLayer.setData(data) |
| | |
| | | flag = false |
| | | } |
| | | } |
| | | if (flag) { |
| | | points.push(point1) |
| | | console.log(points,'points'); |
| | | } |
| | | points.push(point1) |
| | | // console.log(points, 'image.png') |
| | | // if (flag) { |
| | | // points.push(point1) |
| | | // console.log(points, 'points') |
| | | // } |
| | | } |
| | | return points |
| | | } |
| | |
| | | lng = (lng * 180) / Math.PI |
| | | lat = (lat * 180) / Math.PI |
| | | // console.log(lng, lat) |
| | | return new BMapGL.Point(lng, lat) |
| | | return new window.BMapGL.Point(lng, lat) |
| | | } |
| | | |
| | | function getGrading(sensor, type, carMac) { |
| | |
| | | level5.color = '#99004c' |
| | | level6.color = '#7e0023' |
| | | |
| | | $.each(that.showPoints, function (index, value) { |
| | | $.each(that.showPoints, function(index, value) { |
| | | var sw = getPoint(225, value.lng, value.lat, that.distance) |
| | | var ne = getPoint(45, value.lng, value.lat, that.distance) |
| | | var ne = getPoint(45, value.lng, value.lat, 30) |
| | | var polygon = [] |
| | | var point1 = [] |
| | | var point2 = [] |
| | |
| | | data0.push({ |
| | | geometry: { |
| | | type: 'Polygon', |
| | | coordinates: [polygon], |
| | | coordinates: [polygon] |
| | | }, |
| | | properties: { |
| | | height: height, |
| | | }, |
| | | height: height |
| | | } |
| | | }) |
| | | break |
| | | case 1: |
| | | data1.push({ |
| | | geometry: { |
| | | type: 'Polygon', |
| | | coordinates: [polygon], |
| | | coordinates: [polygon] |
| | | }, |
| | | properties: { |
| | | height: height, |
| | | }, |
| | | height: height |
| | | } |
| | | }) |
| | | break |
| | | case 2: |
| | | data2.push({ |
| | | geometry: { |
| | | type: 'Polygon', |
| | | coordinates: [polygon], |
| | | coordinates: [polygon] |
| | | }, |
| | | properties: { |
| | | height: height, |
| | | }, |
| | | height: height |
| | | } |
| | | }) |
| | | break |
| | | case 3: |
| | | data3.push({ |
| | | geometry: { |
| | | type: 'Polygon', |
| | | coordinates: [polygon], |
| | | coordinates: [polygon] |
| | | }, |
| | | properties: { |
| | | height: height, |
| | | }, |
| | | height: height |
| | | } |
| | | }) |
| | | break |
| | | case 4: |
| | | data4.push({ |
| | | geometry: { |
| | | type: 'Polygon', |
| | | coordinates: [polygon], |
| | | coordinates: [polygon] |
| | | }, |
| | | properties: { |
| | | height: height, |
| | | }, |
| | | height: height |
| | | } |
| | | }) |
| | | break |
| | | case 5: |
| | | data5.push({ |
| | | geometry: { |
| | | type: 'Polygon', |
| | | coordinates: [polygon], |
| | | coordinates: [polygon] |
| | | }, |
| | | properties: { |
| | | height: height, |
| | | }, |
| | | height: height |
| | | } |
| | | }) |
| | | break |
| | | case 6: |
| | | data6.push({ |
| | | geometry: { |
| | | type: 'Polygon', |
| | | coordinates: [polygon], |
| | | coordinates: [polygon] |
| | | }, |
| | | properties: { |
| | | height: height, |
| | | }, |
| | | height: height |
| | | } |
| | | }) |
| | | break |
| | | } |
| | |
| | | level = 6 |
| | | } |
| | | break |
| | | case 'a01006': |
| | | if (data) { |
| | | color = '#00e400' |
| | | level = 1 |
| | | } |
| | | break |
| | | case 'a01001': |
| | | if (data) { |
| | | color = '#00e400' |
| | | level = 1 |
| | | } |
| | | break |
| | | case 'a01002': |
| | | if (data) { |
| | | color = '#00e400' |
| | | level = 1 |
| | | } |
| | | break |
| | | case 'dustld': |
| | | if (data < levelData[7].tab1) { |
| | | color = '#00e400' |
| | |
| | | |
| | | // point上添加label文本 |
| | | function setLabelStyle(content, point) { |
| | | var label = new BMapGL.Label( |
| | | var label = new window.BMapGL.Label( |
| | | "<span class='my-maptip'>" + content + '<br /><span>', // 为lable填写内容 |
| | | { |
| | | offset: new BMapGL.Size(-8, -10), // label的偏移量,为了让label的中心显示在点上 |
| | | position: point, |
| | | offset: new window.BMapGL.Size(-8, -10), // label的偏移量,为了让label的中心显示在点上 |
| | | position: point |
| | | } // label的位置 |
| | | ) |
| | | var offsetSize = new BMapGL.Size(0, 0) |
| | | var offsetSize = new window.BMapGL.Size(0, 0) |
| | | var size = '10px' |
| | | if (that.map.getZoom() <= 15.5) { |
| | | size = '0px' |
| | |
| | | lineHeight: '20px', |
| | | fontFamily: '微软雅黑', |
| | | backgroundColor: '0.05', |
| | | fontWeight: 'bold', |
| | | fontWeight: 'bold' |
| | | } |
| | | label.setStyle(labelStyle) |
| | | that.map.addOverlay(label) |
| | |
| | | // 无数据时,缩放至该中心 |
| | | function showNoPoints() { |
| | | that.map.centerAndZoom('苏州市', 17) |
| | | setTimeout(function () { |
| | | setTimeout(function() { |
| | | document.getElementById('cpm').style.display = 'block' |
| | | document.getElementById('data').style.display = 'none' |
| | | }, 250) |
| | | } |
| | | |
| | | // 地图缩放级别监控 |
| | | that.map.addEventListener('zoomend', function () { |
| | | that.map.addEventListener('zoomend', function() { |
| | | // 这里根据缩放显示和隐藏文本 |
| | | var zoom = that.map.getZoom() |
| | | $('span.my-maptip').parent()[zoom <= 15.5 ? 'hide' : 'show']() |
| | |
| | | case 'TVOC': |
| | | this.sensorKey = 'a99054' |
| | | break |
| | | case '湿度': |
| | | this.sensorKey = 'a01002' |
| | | break |
| | | case '温度': |
| | | this.sensorKey = 'a01001' |
| | | break |
| | | case '气压': |
| | | this.sensorKey = 'a01006' |
| | | break |
| | | case 'dustld': |
| | | this.sensorKey = 'dustld' |
| | | break |
| | | } |
| | | 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" scoped> |
| | | <style lang="scss" > |
| | | /deep/.BMap_cpyCtrl { |
| | | display: none; |
| | | } |
| | |
| | | z-index: 10; |
| | | } |
| | | |
| | | /deep/ .el-input__inner { |
| | | height: 40px; |
| | | } |
| | | /deep/ .el-picker-panel__body { |
| | | width: 280px; |
| | | } |
| | | .el-main { |
| | | padding: 0; |
| | | width: 100%; |
| | |
| | | height: 38px; |
| | | border-radius: 0; |
| | | width: 80px; |
| | | line-height: 0.5; |
| | | } |
| | | .per-date { |
| | | height: 50px; |
| | |
| | | } |
| | | .activeArea { |
| | | background-color: #f5f7fa; |
| | | color: rgb(36, 36, 36); |
| | | } |
| | | /*文本样式*/ |
| | | .textShow { |
| | |
| | | .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; |
| | |
| | | font-size: 14px; |
| | | font-family: '微软雅黑'; |
| | | } |
| | | /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; |
| | | 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%; |
| | | } |
| | | } |
| | | .jlpMySelectPopper.el-picker-panel { |
| | | width: 280px; |
| | | height: 330px; |
| | | } |
| | | .jlpMySelectPopper.el-date-picker table { |
| | | width: 88%; |
| | | } |
| | | .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; |
| | | } |
| | | </style> |
| | | |