| | |
| | | <template> |
| | | <div class="main_body"> |
| | | <el-container |
| | | style="height: 100%" |
| | | > |
| | | <el-container style="height: 100%"> |
| | | <el-aside |
| | | v-if="this.$store.state.aside" |
| | | width="300px" |
| | | style="background-color: rgb(238, 241, 246);padding-top:10px" |
| | | |
| | | v-if="this.$store.state.aside" |
| | | width="300px" |
| | | style="background-color: rgb(238, 241, 246); padding-top: 10px" |
| | | > |
| | | <span |
| | | style=" |
| | |
| | | > |
| | | <el-menu style="margin-top: 10px"> |
| | | <el-menu-item |
| | | |
| | | v-for="(item,index) in defaultData" |
| | | :key="index" |
| | | style="display: flex;justify-content: space-between;align-items: center;padding-right: 0;border-bottom:1px solid #eee" |
| | | :index="(index+1 + '-' + index + 1).toString()" |
| | | @click="changeCarData(item)" |
| | | v-for="(item, index) in defaultData" |
| | | :key="index" |
| | | style=" |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | padding-right: 0; |
| | | border-bottom: 1px solid #eee; |
| | | " |
| | | :index="(index + 1 + '-' + index + 1).toString()" |
| | | @click="changeCarData(item)" |
| | | > |
| | | <span>{{ item.name }}</span> |
| | | <i |
| | |
| | | > |
| | | </span> |
| | | <span |
| | | |
| | | v-for="(item, index) in snesorParams" |
| | | :key="index" |
| | | class="left" |
| | | :class="{ click: changeColor == index }" |
| | | @click="changeCode(index)" |
| | | >{{ item }} |
| | | v-for="(item, index) in snesorParams" |
| | | :key="index" |
| | | class="left" |
| | | :class="{ click: changeColor == index }" |
| | | @click="changeCode(index)" |
| | | >{{ item }} |
| | | </span> |
| | | <span |
| | | v-for="(item,index) in viewOptions" |
| | | :key="index+ '-only'" |
| | | class="right" |
| | | :class="{ click: changeColor1 == index }" |
| | | @click="changeCode1(index)" |
| | | >{{ item }} |
| | | v-for="(item, index) in viewOptions" |
| | | :key="index + '-only'" |
| | | class="right" |
| | | :class="{ click: changeColor1 == index }" |
| | | @click="changeCode1(index)" |
| | | >{{ item }} |
| | | </span> |
| | | <span v-if="webSocketView" style="float: right; margin: 2px 10px 0 0"> |
| | | <el-button size="medium" type="primary" @click="wsStart()" |
| | |
| | | <!-- @click.native="dataChangeClick"--> |
| | | <!-- />--> |
| | | <!-- </el-select>--> |
| | | |
| | | <el-button |
| | | type="primary" |
| | | size="small" |
| | | style="margin-left: 1.5rem" |
| | | @click="insertL" |
| | | >添加</el-button |
| | | > |
| | | <div class="insLu"> |
| | | <el-upload |
| | | class="upload-demo" |
| | | ref="upload" |
| | | action="" |
| | | :on-change="handleChange" |
| | | :on-remove="handleRemove" |
| | | :file-list="fileList" |
| | | :auto-upload="false" |
| | | :limit="1" |
| | | > |
| | | <el-button slot="trigger" size="small" type="primary" |
| | | >选取文件</el-button |
| | | > |
| | | <div slot="tip" class="el-upload__tip" style="color: red"> |
| | | 上传走航轨迹图片(可选可不选) |
| | | </div> |
| | | </el-upload> |
| | | <!-- <div style="display: flex"> |
| | | <span class="statspan">开始点的时间:</span |
| | | ><el-input v-model="startL" style="width: 12rem"></el-input> |
| | | </div> |
| | | <div style="display: flex"> |
| | | <span class="statspan">结束点的时间:</span |
| | | ><el-input v-model="endL" style="width: 12rem"></el-input> |
| | | </div> |
| | | <div style="display: flex"> |
| | | <span class="statspan">路段名称:</span |
| | | ><el-input |
| | | v-model="Lname" |
| | | style="width: 12rem; margin-left: 1.7rem" |
| | | ></el-input> |
| | | </div> |
| | | <div style="display: flex; margin-left: 4rem"> |
| | | <el-button type="primary" @click="insLuDuan">保存</el-button> |
| | | <el-button @click="insqu">取消</el-button> |
| | | <el-button @click="qnull">清空</el-button> |
| | | </div> --> |
| | | <el-table :data="tableData" style="width: 100%"> |
| | | <el-table-column label="开始时间" width="180"> |
| | | <template slot-scope="scope"> |
| | | <span style="margin-left: 10px">{{ scope.row.start }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="结束时间" width="180"> |
| | | <template slot-scope="scope"> |
| | | <span style="margin-left: 10px">{{ scope.row.end }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <div style="display: flex"> |
| | | <span class="statspan">路段名称:</span |
| | | ><el-input |
| | | v-model="Lname" |
| | | style="width: 12rem; margin-left: 1.7rem" |
| | | ></el-input> |
| | | </div> |
| | | <div style="display: flex; margin-left: 4rem"> |
| | | <el-button type="primary" @click="insLuDuan">保存</el-button> |
| | | <el-button @click="insqu">关闭</el-button> |
| | | <el-button @click="qnull">清空</el-button> |
| | | </div> |
| | | </div> |
| | | <el-date-picker |
| | | style="float:right;margin-right:10px;" |
| | | @change="dateChange" |
| | | v-model="dateValue" |
| | | type="datetimerange" |
| | | :picker-options="threeOptions" |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期"> |
| | | style="float: right; margin-right: 10px" |
| | | @change="dateChange" |
| | | v-model="dateValue" |
| | | type="datetimerange" |
| | | :picker-options="threeOptions" |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | > |
| | | </el-date-picker> |
| | | <!-- 历史/实时切换下拉框 --> |
| | | <el-select |
| | |
| | | " |
| | | > |
| | | <el-option |
| | | v-for="item in dataTypeList" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | v-for="item in dataTypeList" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | </div> |
| | |
| | | <!-- <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> |
| | | 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 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="请输入内容" /> |
| | |
| | | import $ from 'jquery' |
| | | import '@/assets/icon/iconfont.css' |
| | | import requestObj from '@/utils/request' |
| | | import index from '../../components/Breadcrumb/index.vue' |
| | | var GPS = { |
| | | PI: 3.14159265358979324, |
| | | x_pi: (3.14159265358979324 * 3000.0) / 180.0, |
| | |
| | | }, |
| | | } |
| | | export default { |
| | | components: { index }, |
| | | data() { |
| | | return { |
| | | tableData: [], |
| | | fileList: [], |
| | | file: '', |
| | | insdialogVisible: false, |
| | | bdLon: null, |
| | | bdLat: null, |
| | | loading: true, |
| | |
| | | dataType: 'history', |
| | | responseJSON: null, |
| | | radio1: null, |
| | | viewOptions: [ |
| | | '平铺', |
| | | '立体' |
| | | ], |
| | | viewOptions: ['平铺', '立体'], |
| | | dateValue: [], |
| | | pickerOptions: { |
| | | disabledDate(time) { |
| | |
| | | } |
| | | }, |
| | | }, |
| | | timeOne: '', |
| | | threeOptions: { |
| | | onPick: ({ maxDate, minDate }) => { |
| | | // 最大时间 最小时间 |
| | | this.timeOne = minDate.getTime() // 当选一个日期时 就是最小日期 |
| | | // 如何你选择了两个日期了,就把那个变量置空 |
| | | if (maxDate) this.timeOne = '' |
| | | }, |
| | | disabledDate: (time) => { |
| | | if (this.timeOne) { |
| | | const WEEK = 3 * 24 * 3600 * 1000 - 1 // 这里乘以3再减去1相当于 限制3天以内 |
| | | const minTime = this.timeOne // 三天之前 |
| | | const maxTime = this.timeOne + WEEK // 三天之后 |
| | | return ( |
| | | time.getTime() < minTime || |
| | | time.getTime() > maxTime || |
| | | time.getTime() > new Date() |
| | | ) |
| | | } else { |
| | | return time.getTime() > new Date() |
| | | } |
| | | }, |
| | | }, |
| | | sensorDate: null, |
| | | noneData: false, |
| | | defaultData: [], |
| | |
| | | { |
| | | sensorName: 'SO2', |
| | | unit: 'ug/m³', |
| | | tab1: '50', |
| | | tab2: '150', |
| | | tab3: '475', |
| | | tab1: '150', |
| | | tab2: '500', |
| | | tab3: '650', |
| | | tab4: '800', |
| | | tab5: '1600', |
| | | tab6: '2100', |
| | | tab5: '', |
| | | tab6: '', |
| | | }, |
| | | { |
| | | sensorName: 'NO2', |
| | | unit: 'ug/m³', |
| | | tab1: '40', |
| | | tab2: '80', |
| | | tab3: '180', |
| | | tab4: '280', |
| | | tab5: '565', |
| | | tab6: '750', |
| | | tab1: '100', |
| | | tab2: '200', |
| | | tab3: '700', |
| | | tab4: '1200', |
| | | tab5: '2340', |
| | | tab6: '3090', |
| | | }, |
| | | { |
| | | sensorName: 'CO', |
| | | unit: 'mg/m³', |
| | | tab1: '2', |
| | | tab2: '4', |
| | | tab3: '14', |
| | | tab4: '24', |
| | | tab5: '36', |
| | | tab6: '48', |
| | | tab1: '5', |
| | | tab2: '10', |
| | | tab3: '35', |
| | | tab4: '60', |
| | | tab5: '90', |
| | | tab6: '120', |
| | | }, |
| | | { |
| | | sensorName: 'O3', |
| | |
| | | endTime: '', |
| | | dataDate: '', |
| | | sensorTime: [], |
| | | Lu: [], |
| | | startL: '', |
| | | Lname: '', |
| | | endL: '', |
| | | timeValue: [ |
| | | new Date(2020, 1, 1, 0, 0, 0), |
| | | new Date(2022, 12, 31, 23, 59, 59), |
| | |
| | | // console.log(n) |
| | | }, |
| | | deep: true, |
| | | immediate: true |
| | | immediate: true, |
| | | // timeValue: { |
| | | // handler(newVal, oldVal) { |
| | | // this.sensorTime = this.newTime() |
| | |
| | | // }) |
| | | }, |
| | | methods: { |
| | | handleRemove(file, fileList) { |
| | | // console.log(file, fileList) |
| | | }, |
| | | handleChange(file, fileList) { |
| | | var str = file.name //截取后4位 |
| | | let a = str.substring(str.length - 3) |
| | | // console.log(a) |
| | | if (a === 'png') { |
| | | this.file = file.raw |
| | | console.log(this.file.raw) |
| | | this.fileList = fileList |
| | | } else { |
| | | this.$message('请插入png格式的图片') |
| | | } |
| | | // console.log(file.name, 'file') |
| | | }, |
| | | insLuDuan() { |
| | | // if (this.startL == '') { |
| | | // this.$message({ |
| | | // message: '请点击开始时间', |
| | | // type: 'warning', |
| | | // }) |
| | | // return false |
| | | // } else if (this.endL == '') { |
| | | // this.$message({ |
| | | // message: '请点击结束时间', |
| | | // type: 'warning', |
| | | // }) |
| | | // return false |
| | | // } else |
| | | if (this.Lname == '') { |
| | | this.$message({ |
| | | message: '请输入路段名', |
| | | type: 'warning', |
| | | }) |
| | | return false |
| | | } |
| | | if (this.tableData.length === 0) { |
| | | this.$message({ |
| | | message: '请点击时间', |
| | | type: 'warning', |
| | | }) |
| | | // console.log(1); |
| | | return false |
| | | } |
| | | // console.log(this.tableData); |
| | | var times = this.newTime2(this.dateValue) |
| | | const formData = new FormData() |
| | | let pv = JSON.stringify(this.tableData) |
| | | // let big = { |
| | | // table: pv, |
| | | // road: this.Lname, |
| | | // time3: times[0], |
| | | // time4: times[1], |
| | | // mac: this.carMac, |
| | | // files: this.file, |
| | | // } |
| | | // console.log(big) |
| | | |
| | | // console.log(pv); |
| | | // formData.append(`time1`, this.startL) |
| | | // formData.append(`time2`, this.endL) |
| | | |
| | | formData.append(`table`, pv) |
| | | formData.append(`road`, this.Lname) |
| | | formData.append(`time3`, times[0]) |
| | | formData.append(`time4`, times[1]) |
| | | formData.append(`mac`, this.carMac) |
| | | this.fileList.map((v) => { |
| | | formData.append(`files`, v.raw) |
| | | }) |
| | | this.$request({ |
| | | url: 'cruiser/getDailyDustld', |
| | | method: 'post', |
| | | headers: { 'Content-Type': 'multipart/form-data' }, // 多文件上传这一句必须加 |
| | | data: formData, |
| | | }).then((res) => { |
| | | console.log(res) |
| | | if (res.code === 0) { |
| | | this.$message({ |
| | | message: '添加路段成功', |
| | | type: 'success', |
| | | }) |
| | | this.tableData = [] |
| | | this.Lname = '' |
| | | } |
| | | }) |
| | | }, |
| | | |
| | | //添加弹框 |
| | | insertL() { |
| | | $('.insLu').show() |
| | | }, |
| | | insqu() { |
| | | $('.insLu').hide() |
| | | this.qnull() |
| | | }, |
| | | qnull() { |
| | | // this.startL = '' |
| | | // this.endL = '' |
| | | this.tableData = [] |
| | | this.Lname = '' |
| | | }, |
| | | // 时间处理函数 |
| | | newTime2(timeArr) { |
| | | var arr = [] |
| | | timeArr.map(v => { |
| | | timeArr.map((v) => { |
| | | var date = new Date(v) |
| | | var y = date.getFullYear() |
| | | var m = date.getMonth() + 1 |
| | |
| | | getCarData() { |
| | | this.$request({ |
| | | url: '/cruiser/selectCruisers', |
| | | method: 'get' |
| | | }).then(res => { |
| | | this.defaultData = res.data |
| | | this.carMac = res.data[0].mac |
| | | }).catch(err => { |
| | | console.log(err) |
| | | method: 'get', |
| | | }) |
| | | .then((res) => { |
| | | this.defaultData = res.data |
| | | this.carMac = res.data[0].mac |
| | | }) |
| | | .catch((err) => { |
| | | console.log(err) |
| | | }) |
| | | }, |
| | | // 通过mac请求设备有数据的日期 |
| | | getMacDate() { |
| | |
| | | url: '/cruiser/getDates', |
| | | method: 'get', |
| | | params: { |
| | | mac: this.carMac |
| | | } |
| | | }).then(res => { |
| | | for (let i = 0; i < res.data.length; i++) { |
| | | // this.isDataList[i].value = res.data.data[i] |
| | | // this.isDataList[i].label = res.data.data[i] |
| | | // this.isDataList[i] = { value: res.data.data[i], label: res.data.data[i] } |
| | | this.isDataList.push({ |
| | | value: res.data[i], |
| | | label: res.data[i] |
| | | }) |
| | | } |
| | | }).catch(err => { |
| | | console.log(err) |
| | | mac: this.carMac, |
| | | }, |
| | | }) |
| | | .then((res) => { |
| | | for (let i = 0; i < res.data.length; i++) { |
| | | // this.isDataList[i].value = res.data.data[i] |
| | | // this.isDataList[i].label = res.data.data[i] |
| | | // this.isDataList[i] = { value: res.data.data[i], label: res.data.data[i] } |
| | | this.isDataList.push({ |
| | | value: res.data[i], |
| | | label: res.data[i], |
| | | }) |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | console.log(err) |
| | | }) |
| | | }, |
| | | // 进行经纬度转换为距离的计算 |
| | | Rad(d) { |
| | |
| | | var radLat2 = this.Rad(lat2) |
| | | var a = radLat1 - radLat2 |
| | | var b = this.Rad(lng1) - this.Rad(lng2) |
| | | var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + |
| | | Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2))) |
| | | var s = |
| | | 2 * |
| | | Math.asin( |
| | | Math.sqrt( |
| | | Math.pow(Math.sin(a / 2), 2) + |
| | | Math.cos(radLat1) * |
| | | Math.cos(radLat2) * |
| | | Math.pow(Math.sin(b / 2), 2) |
| | | ) |
| | | ) |
| | | s = s * 6378.137 // EARTH_RADIUS; |
| | | s = Math.round(s * 10000) / 10000 // 输出为公里 |
| | | // s=s.toFixed(4); |
| | |
| | | if (that.msgTemp.length < 2) { |
| | | that.msgTemp.push({ lat: lat, lon: lon }) |
| | | } |
| | | var distance = that.GetDistance(that.msgTemp[0].lat, that.msgTemp[0].lon, that.msgTemp[1].lat, that.msgTemp[1].lon) |
| | | var distance = that.GetDistance( |
| | | that.msgTemp[0].lat, |
| | | that.msgTemp[0].lon, |
| | | that.msgTemp[1].lat, |
| | | that.msgTemp[1].lon |
| | | ) |
| | | if (distance >= 0.05) { |
| | | that.msgTemp.shift() |
| | | that.msgTemp.push({ lat: lat, lon: lon }) |
| | |
| | | params: { |
| | | mac: this.carMac, |
| | | time1: this.sensorDate[0], |
| | | time2: this.sensorDate[1] |
| | | } |
| | | }).then(res => { |
| | | time2: this.sensorDate[1], |
| | | }, |
| | | }).then((res) => { |
| | | console.log(res) |
| | | if (!res.data.length) { |
| | | this.noneData = true |
| | | this.loading = false |
| | |
| | | timeArrSub[i] = v.split(' ')[0] |
| | | if (i === 1) timeArrSub[2] = v.split(' ')[1] |
| | | }) |
| | | if (that.carMac === 'p5dnd7a0243626' && timeArrSub[0] === '2022-12-11' && (timeArrSub[1] === '2022-12-11' || timeArrSub[1] === '2022-12-12' && timeArrSub[2] === '00:00:00')) { |
| | | if ( |
| | | that.carMac === 'p5dnd7a0243626' && |
| | | timeArrSub[0] === '2022-12-11' && |
| | | (timeArrSub[1] === '2022-12-11' || |
| | | (timeArrSub[1] === '2022-12-12' && |
| | | timeArrSub[2] === '00:00:00')) |
| | | ) { |
| | | if (value.a34004) point.a34004 = parseInt(value.a34004 * 2.7) |
| | | if (value.a34002) point.a34002 = parseInt(value.a34002 * 2.2) |
| | | if (value.a21026) point.a21026 = parseInt(value.a21026 - 0 + 5) |
| | | if (value.a21004) point.a21004 = parseInt(value.a21004 - 20) |
| | | // point.a21004 = parseInt(value.a21004) |
| | | if (value.a21005) point.a21005 = parseFloat(value.a21005 - 0 + 0.85).toFixed(3) |
| | | if (value.a21005) |
| | | point.a21005 = parseFloat(value.a21005 - 0 + 0.85).toFixed(3) |
| | | if (value.a05024 < 15) { |
| | | point.a05024 = parseInt(value.a05024 + 3) |
| | | } else if (value.a05024 > 18) { |
| | | point.a05024 = parseInt(value.a05024 - 3) |
| | | } else 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')) { |
| | | 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.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 |
| | | } |
| | | // if ( |
| | | // value.dustld - 0 !== 0 && |
| | | // value.dustld - 0 < 150 && |
| | | // (that.carMac === 'p5dnd7a0243622' || |
| | | // that.carMac === 'p5dnd7a0243625') |
| | | // ) { |
| | | // point.dustld = 200 |
| | | // } else if ( |
| | | // value.dustld - 0 !== 0 && |
| | | // value.dustld - 0 >= 150 && |
| | | // value.dustld - 0 <= 180 && |
| | | // (that.carMac === 'p5dnd7a0243622' || |
| | | // that.carMac === 'p5dnd7a0243625') |
| | | // ) { |
| | | // point.dustld = 220 |
| | | // } else if ( |
| | | // value.dustld - 0 !== 0 && |
| | | // value.dustld - 0 > 180 && |
| | | // value.dustld - 0 <= 200 && |
| | | // (that.carMac === 'p5dnd7a0243622' || |
| | | // that.carMac === 'p5dnd7a0243625') |
| | | // ) { |
| | | // point.dustld = 230 |
| | | // } else { |
| | | // point.dustld = value.dustld - 0 |
| | | // } |
| | | } |
| | | // point.a34004 = parseInt(value.a34004) |
| | | // point.a34002 = parseInt(value.a34002) |
| | | // point.a21026 = parseInt(value.a21026) |
| | | // point.a21004 = parseInt(value.a21004) |
| | | // 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 |
| | | point.times = value.time |
| | | trackPoints.push(point) |
| | | } |
| | | }) |
| | |
| | | draw(that.sensor, that.viewType, that.carMac) |
| | | // drawLine()// 轨迹 |
| | | drawStartAndEnd() // 起点和终点标注 |
| | | function draw(sensor, type, carMac) { |
| | | var levels = getGrading(sensor, type, carMac) |
| | | function draw(sensor, type, carMac, point) { |
| | | var levels = getGrading(sensor, type, carMac, point) |
| | | $.each(levels, function (index, value) { |
| | | var color = value.color |
| | | var data = value.data |
| | |
| | | selectedColor: '#ee1111', // 选中项颜色 |
| | | autoSelect: true, // 根据鼠标位置来自动设置选中项 |
| | | riseTime: 1800, // 楼块初始化升起时间 |
| | | onClick: (e) => { |
| | | // console.log(e) |
| | | }, |
| | | onClick: (e) => {}, |
| | | }) |
| | | that.shapeLayer.setData(data) |
| | | that.view.addLayer(that.shapeLayer) |
| | |
| | | var points = [] |
| | | points.push(trackPoints[0]) |
| | | for (var i = 1; i < trackPoints.length; i++) { |
| | | var flag = true |
| | | // var flag = true |
| | | var point1 = trackPoints[i] |
| | | for (var j = 0; j < points.length; j++) { |
| | | var point2 = points[j] |
| | |
| | | flag = false |
| | | } |
| | | } |
| | | points.push(point1) |
| | | console.log(points,'num'); |
| | | if (flag) { |
| | | points.push(point1) |
| | | // console.log(points,'num'); |
| | | } |
| | | } |
| | | |
| | |
| | | // 转为正常的10进制经纬度 |
| | | lng = (lng * 180) / Math.PI |
| | | lat = (lat * 180) / Math.PI |
| | | // console.log(lng, lat) |
| | | // console.log(lng, lat,123) |
| | | return new BMapGL.Point(lng, lat) |
| | | } |
| | | |
| | |
| | | |
| | | // point上添加label文本 |
| | | function setLabelStyle(content, point) { |
| | | var label = new BMapGL.Label("<span class='my-maptip'>" + content + '<br /><span>', // 为lable填写内容 |
| | | { |
| | | offset: new BMapGL.Size(-8, -10), // label的偏移量,为了让label的中心显示在点上 |
| | | position: point |
| | | } |
| | | )// label的位置 |
| | | var label = new BMapGL.Label( |
| | | `<span class="my-maptip" data-times="${point.times}">${content}<span>`, // 为lable填写内容 |
| | | { |
| | | offset: new BMapGL.Size(-8, -10), // label的偏移量,为了让label的中心显示在点上 |
| | | position: point, |
| | | } |
| | | ) |
| | | // label的位置 |
| | | var offsetSize = new BMapGL.Size(0, 0) |
| | | var size = '10px' |
| | | if (that.map.getZoom() <= 15.5) { |
| | | size = '0px' |
| | | } |
| | | var labelStyle = { |
| | | display: 'block', |
| | | width: '20px', |
| | | border: '0', |
| | | fontSize: size, |
| | | height: '20px', |
| | |
| | | backgroundColor: '0.05', |
| | | fontWeight: 'bold', |
| | | } |
| | | label.addEventListener('click', (e) => { |
| | | // console.log(e) |
| | | // var ps = e.target.latLng.lat |
| | | // var ps1 = e.target.latLng.lng |
| | | // var p1 = new BMap.Point(ps1, ps); |
| | | // var marker = new BMap.Marker(p1);; |
| | | // that.map.addOverlay(marker); |
| | | var times = e.target.domElement.children[0].getAttribute('data-times') |
| | | // console.log(times) |
| | | if (that.startL == '') { |
| | | that.startL = times |
| | | // that.Lu.startLu.push(that.startL) |
| | | // console.log(that.Lu.startLu, 'start') |
| | | } else { |
| | | // that.tableData=[] |
| | | that.endL = times |
| | | comparedate(that.startL, that.endL) |
| | | // var endLu = [] |
| | | // that.Lu.endLu.push(that.endL) |
| | | // console.log(that.Lu.endLu, 'end') |
| | | // that.startL = '' |
| | | // that.endL = '' |
| | | // that.tableData.push(that.Lu) |
| | | // console.log(that.tableData, 'table') |
| | | } |
| | | }) |
| | | label.setStyle(labelStyle) |
| | | that.map.addOverlay(label) |
| | | } |
| | | //比较两个日期的大小 |
| | | function comparedate(date1, date2) { |
| | | let oDate1 = new Date(date1) |
| | | let oDate2 = new Date(date2) |
| | | if (oDate1.getTime() > oDate2.getTime()) { |
| | | that.startL = '' |
| | | that.endL = '' |
| | | that.$message('请重新选择,开始时间需小于结束时间') |
| | | return false |
| | | } else if (oDate1.getTime() < oDate2.getTime()) { |
| | | var cardNumObj = { start: that.startL, end: that.endL } |
| | | that.tableData.push(cardNumObj) |
| | | console.log(that.tableData, 'that.tableData') |
| | | that.startL = '' |
| | | that.endL = '' |
| | | } |
| | | } |
| | | |
| | | // 无数据时,缩放至该中心 |
| | |
| | | } |
| | | |
| | | // 地图缩放级别监控 |
| | | |
| | | that.map.addEventListener('zoomend', function () { |
| | | // 这里根据缩放显示和隐藏文本 |
| | | var zoom = that.map.getZoom() |
| | |
| | | margin: 0; |
| | | z-index: 0; |
| | | font-size: 14px; |
| | | font-family: "微软雅黑"; |
| | | font-family: '微软雅黑'; |
| | | } |
| | | |
| | | .main_body { |
| | |
| | | margin-top: -50px; |
| | | z-index: 11; |
| | | color: #000000; |
| | | border: 2px solid #FF7F50; |
| | | border: 2px solid #ff7f50; |
| | | font-size: 28px; |
| | | line-height: 100px; |
| | | text-align: center; |
| | |
| | | border-right: 1px solid #aaa; |
| | | } |
| | | |
| | | .carTop{ |
| | | &>.left:nth-child(1){ |
| | | .carTop { |
| | | & > .left:nth-child(1) { |
| | | border-radius: 5px 0 0 5px; |
| | | } |
| | | } |
| | |
| | | .main_body /deep/ .el-date-editor .el-range-separator { |
| | | width: 15%; |
| | | } |
| | | |
| | | /deep/ .BMapLabel .my-maptip { |
| | | display: block !important; |
| | | width: inherit; |
| | | height: inherit; |
| | | text-align: center; |
| | | vertical-align: middle; |
| | | } |
| | | .insLu { |
| | | border: 1px solid white; |
| | | background-color: white; |
| | | width: 20rem; |
| | | height: 30rem; |
| | | position: absolute; |
| | | top: 3rem; |
| | | left: 1rem; |
| | | z-index: 99; |
| | | display: none; |
| | | padding: 0.5rem; |
| | | } |
| | | .statspan { |
| | | font-size: 0.5rem; |
| | | margin-top: 2rem; |
| | | } |
| | | .insLu div { |
| | | margin-top: 0.8rem; |
| | | } |
| | | </style> |