From 8b29471e308be57255389b08bbc90ab33ea04584 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Thu, 04 Jul 2024 14:22:41 +0800 Subject: [PATCH] fix: 道路尘负荷排名 --- src/views/car/index.vue | 703 +++++++++++++++++++++++++++++++++++---------------------- 1 files changed, 430 insertions(+), 273 deletions(-) diff --git a/src/views/car/index.vue b/src/views/car/index.vue index ace7c2d..8319877 100644 --- a/src/views/car/index.vue +++ b/src/views/car/index.vue @@ -1,219 +1,371 @@ <template> <div class="main_body"> <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"> - <span style=" + <el-aside + v-if="$store.state.aside" + width="300px" + style="background-color: rgb(238, 241, 246); padding-top: 10px" + > + <span + style=" font-size: 13px; padding-left: 10px; font-weight: 500; color: rgb(64, 158, 255); - ">���������������</span> + " + >���������������</span> <el-menu style="margin-top: 10px"> - <el-menu-item v-for="(item, index) in defaultData" :key="index" style=" + <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)"> + " + :index="(index + 1 + '-' + index + 1).toString()" + @click="changeCarData(item)" + > <span>{{ item.name }}</span> - <i style=" + <i + style=" vertical-align: -2.5px; font-size: 20px; margin-right: 10px; margin-left: auto; - " class="iconfont iconfaxianzuobiao" @click="deviceDetail(item.mac, null, item, 0)" /> - <!-- @click="deviceDetail('p5dnd7a0245390',null,item,0)"--> + " + class="iconfont iconfaxianzuobiao" + @click="deviceDetail(item.mac, null, item, 0)" + /> </el-menu-item> </el-menu> </el-aside> - <el-dialog> </el-dialog> + <el-dialog /> <el-container style="position: relative"> - <div class="carTop"> - <span style="float: left; margin: 1px 10px 0 0"> - <el-button size="medium" type="primary" icon="el-icon-setting" @click="dialogFormVisible = true">6���������</el-button> - </span> - <span 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 }} - </span> - <span v-if="webSocketView" style="float: right; margin: 2px 10px 0 0"> - <el-button size="medium" type="primary" @click="wsStart()">������������</el-button> - </span> - <!-- <el-date-picker - v-if="historyView" - v-model="dateValue" - value-format="yyyy-MM-dd" - style="float:right;margin-right: 10px;line-height: 40px;" - align="right" - type="date" - placeholder="������������" - :picker-options="pickerOptions" - @change="dateChange" - />--> - <!-- ��������������� --> - <!-- <el-time-picker--> - <!-- :disabled="isDisTime"--> - <!-- style="float:right;width: 210px"--> - <!-- is-range--> - <!-- v-model="timeValue"--> - <!-- @blur="blurChange"--> - <!-- range-separator="���"--> - <!-- start-placeholder="������������"--> - <!-- end-placeholder="������������"--> - <!-- placeholder="������������������">--> - <!-- </el-time-picker>--> - <!-- ��������������������������� --> - <!-- <el-select v-if="historyView" v-model="dateValue" placeholder="������������" style="float:right;line-height:40px;margin-right:10px;width:140px" @change="dateChange">--> - <!-- <el-option--> - <!-- v-for="item in isDataList"--> - <!-- :key="item.value"--> - <!-- :label="item.label"--> - <!-- :value="item.value"--> - <!-- @click.native="dataChangeClick"--> - <!-- />--> - <!-- </el-select>--> + <div class="faterCar"> + <div class="carTop"> + <span + v-for="(item, index) in snesorParams" + :key="index" + class="left" + :class="{ click: changeColor == index }" + @click="changeCode(index)" + >{{ item }} + </span> + <span style="margin-left: 10px"> + <el-button + size="mini" + type="primary" + icon="el-icon-setting" + @click="dialogFormVisible = true" + >6���������</el-button> + </span> + <span + v-for="(item, index) in viewOptions" + :key="index + '-only'" + class="right" + :class="{ click: changeColor1 == index }" + @click="changeCode1(index)" + >{{ item }} + </span> - <el-button type="primary" size="small" style="margin-left: 1.5rem" @click="insertL">������</el-button> - <el-input placeholder="���������������" v-model="inputnum" class="inputNum" clearable> - </el-input> + <span + v-if="webSocketView" + style="margin: 2px 10px 0 0" + > + <el-button + size="mini" + type="primary" + @click="wsStart()" + >������������</el-button> + </span> - <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"> - ������������������������(���������������) + <el-button + size="mini" + type="primary" + @click="insertL" + > + ������ + </el-button> + <el-input + v-model="inputnum" + size="mini" + placeholder="���������������" + class="inputNum" + clearable + /> + + <div class="insLu"> + <el-upload + ref="upload" + class="upload-demo" + 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> + <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" + /> </div> - </el-upload> - <!-- <div style="display: flex"> - <span class="statspan">������������������:</span - ><el-input v-model="startL" style="width: 12rem"></el-input> + <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> - <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="������������"> - </el-date-picker> - <!-- ������/��������������������� --> - <el-select v-model="dataTypeValue" placeholder="������������" style=" - float: right; + <el-date-picker + v-model="dateValue" + size="mini" + style=" margin-right: 10px" + type="datetimerange" + range-separator="���" + start-placeholder="������������" + end-placeholder="������������" + @change="dateChange" + /> + <!-- ������/��������������������� --> + <el-select + v-model="dataTypeValue" + size="mini" + placeholder="������������" + style=" + line-height: 40px; margin-right: 10px; width: 103px; - "> - <el-option v-for="item in dataTypeList" :key="item.value" :label="item.label" :value="item.value" /> - </el-select> + " + > + <el-option + v-for="item in dataTypeList" + :key="item.value" + :label="item.label" + :value="item.value" + /> + </el-select> + </div> + <div + v-if="!rankListShow & noneDustldData" + class="rightIcon" + @click="showRankList" + > + <i class="el-icon-s-fold" /> + </div> + <div v-if="rankListShow"> + <!-- --> + <div + style="position: relative" + class="rankCar" + > + <div + class="success-checkmark" + @click="showRankList" + /> + <div> + <p>������������</p> + <ul> + <li + v-for="(item, index) in rankList" + :key="index" + > + <div class="rankCarItem"> + <div> {{ index+1 }}. {{ item.road }}</div> + <div style="margin-left: 10px"> + {{ item.value }} + </div> + </div> + </li> + </ul> + </div> + </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="loading" + /> <!-- ������������ --> </el-container> </el-container> - <!-- <div id="selectSenor"> - <span><input type="radio" value="a34004" name="sensor" checked>PM2.5</span> - <span><input type="radio" value="a34002" name="sensor">PM10</span> - <span><input type="radio" value="a99054" name="sensor">TVOC</span> - </div> - <div id="type"> - <input type="radio" value="2D" name="v" checked>2D - <input type="radio" value="3D" name="v">3D - </div> --> - <!-- <img src="/img/pollutionlevel.png" class="sensorLevel"> - <div id="cpm">���������������������</div> --> - <!-- 6��������������� --> - <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-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=" + <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 + :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="���������������" /> + <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="���������������" /> + <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="���������������" /> + <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="���������������" /> + <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="���������������" /> + <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="���������������" /> + <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 + slot="footer" + class="dialog-footer" + > + <el-button @click="dialogFormVisible = false"> + ��� ��� + </el-button> + <el-button + type="primary" + @click="customLevel" + > + ��� ��� + </el-button> </div> </el-dialog> </div> @@ -406,7 +558,7 @@ } export default { components: { index }, - data() { + data () { return { inputnum: 50, tableData: [], @@ -436,19 +588,19 @@ viewOptions: ['������', '������'], dateValue: [], pickerOptions: { - disabledDate(time) { + disabledDate (time) { return time.getTime() > Date.now() }, shortcuts: [ { text: '������', - onClick(picker) { + onClick (picker) { picker.$emit('pick', new Date()) } }, { text: '������', - onClick(picker) { + onClick (picker) { const date = new Date() date.setTime(date.getTime() - 3600 * 1000 * 24) picker.$emit('pick', date) @@ -456,7 +608,7 @@ }, { text: '���������', - onClick(picker) { + onClick (picker) { const date = new Date() date.setTime(date.getTime() - 3600 * 1000 * 24 * 7) picker.$emit('pick', date) @@ -512,7 +664,9 @@ }, sensorDate: null, noneData: false, + noneDustldData: false, defaultData: [], + rankList: [], carMac: null, dialogFormVisible: false, sensorTableData: [ @@ -625,6 +779,7 @@ dataTypeValue: 'history', historyView: true, webSocketView: false, + rankListShow: false, isDataList: [], shapeLayer: null, carData: null, @@ -645,7 +800,7 @@ } }, watch: { - dataTypeValue(n, o) { + dataTypeValue (n, o) { if (this.dataTypeValue === 'webSocket') { this.dateValue = [] this.historyView = false @@ -656,37 +811,18 @@ this.webSocketView = false } }, - dateValue(n, o) { + dateValue (n, o) { if (n === null) { this.dateValue = [] } }, - viewKey(n, o) { + viewKey (n, o) { // console.log(n) }, deep: true, immediate: true - // timeValue: { - // handler(newVal, oldVal) { - // this.sensorTime = this.newTime() - // console.log(this.sensorTime, 'this.sensorTime') - // // if (this.dataValue && this.timeValue) { - // // if (this.view) { - // // this.view.removeAllLayers() - // // this.map.clearOverlays() - // // // console.log('������������') - // // } - // // this.dataType = 'history' - // // this.sensorDate = this.dateValue - // // // this.map = null - // // this.getStart() - // // } - // }, - // deep: true, - // immediate: true - // } }, - mounted() { + mounted () { // this.$watch('carMac', () => { if (this.dataType === 'history') { this.getStart() @@ -695,21 +831,18 @@ } // }) }, - beforeDestroy() {}, - created() { + beforeDestroy () {}, + created () { this.newTime(this.timeValue) this.newDate() this.getCarData() - // this.$watch('carMac', () => { - // this.getMacDate() - // }) }, methods: { - handleRemove(file, fileList) { + handleRemove (file, fileList) { // console.log(file, fileList) }, - handleChange(file, fileList) { - var str = file.name //���������4��� + handleChange (file, fileList) { + var str = file.name // ���������4��� let a = str.substring(str.length - 3) // console.log(a) if (a === 'png') { @@ -721,21 +854,8 @@ } // 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 == '') { + insLuDuan () { + if (this.Lname === '') { this.$message({ message: '������������������', type: 'warning' @@ -754,20 +874,6 @@ 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]) @@ -794,22 +900,22 @@ }) }, - //������������ - insertL() { + // ������������ + insertL () { $('.insLu').show() }, - insqu() { + insqu () { $('.insLu').hide() this.qnull() }, - qnull() { + qnull () { // this.startL = '' // this.endL = '' this.tableData = [] this.Lname = '' }, // ������������������ - newTime2(timeArr) { + newTime2 (timeArr) { var arr = [] timeArr.map(v => { var date = new Date(v) @@ -829,13 +935,7 @@ return arr }, // ��������������������� - deviceDetail(mac, item, items, indexs) { - // console.log('������������������������') - // console.log(mac) - // console.log(item) - // console.log(items) - // console.log(indexs) - // this.monitorPointInfo = item + deviceDetail (mac, item, items, indexs) { this.$router.push({ name: 'deviceDetail', // path: '/carDetail', @@ -857,17 +957,17 @@ }) }, // 6��������������� - customLevel() { + customLevel () { this.getStart() this.dialogFormVisible = false }, // ��������������������������������� - changeCarData(e) { + changeCarData (e) { this.carMac = e.mac this.getStart() }, // ��������������������������� - getCarData() { + getCarData () { this.$request({ url: '/cruiser/selectCruisers', method: 'get' @@ -881,7 +981,7 @@ }) }, // ������mac������������������������������ - getMacDate() { + getMacDate () { this.isDataList = [] this.$request({ url: '/cruiser/getDates', @@ -906,11 +1006,11 @@ }) }, // ��������������������������������������� - Rad(d) { + Rad (d) { return (d * Math.PI) / 180.0 // ��������������������������������������������������� }, // ��������������������������������������������������������������������������������������� - GetDistance(lat1, lng1, lat2, lng2) { + GetDistance (lat1, lng1, lat2, lng2) { var radLat1 = this.Rad(lat1) var radLat2 = this.Rad(lat2) var a = radLat1 - radLat2 @@ -931,7 +1031,7 @@ return s }, // ��������������� - newDate() { + newDate () { var aData = new Date() var month = aData.getMonth() < 9 @@ -941,7 +1041,7 @@ this.sensorDate = aData.getFullYear() + '-' + month + '-' + date }, // ��������������� - newTime(timeArr) { + newTime (timeArr) { let str = '' let str2 = '' this.sensorTime = [] @@ -957,7 +1057,7 @@ }) }, // ������������ - dateChange(e) { + dateChange (e) { if (e === null) { this.sensorDate = [] } else { @@ -972,26 +1072,8 @@ this.getStart() } }, - // ������������������������ - // dataChangeClick(e) { - // if (!this.isDisTime) { - // // ������������������ - // if (this.dateValue.length <= 1) { - // this.newTime(this.timeValue) - // } - // if (this.view) { - // this.view.removeAllLayers() - // this.map.clearOverlays() - // // console.log('������������') - // } - // this.dataType = 'history' - // // this.map = null - // this.getStart() - // } - // this.isDisTime = false - // }, // ������������������������ - blurChange() { + blurChange () { // ������������������ this.newTime(this.timeValue) if (this.view) { @@ -1004,7 +1086,7 @@ this.getStart() }, // ��������������������������� - wsStart() { + wsStart () { if (this.ws) { this.ws.close() console.log('������ws') @@ -1051,8 +1133,11 @@ } } }, + showRankList () { + this.rankListShow = !this.rankListShow + }, // ��������������������� - getStart() { + getStart () { this.noneData = false if (this.ws) { this.ws.close() @@ -1082,11 +1167,32 @@ if (res.data.length) { this.carData = res this.initStart(this.carData) + if (this.sensorKey === 'dustld') { + this.getRanking() + } + } + }) + }, + getRanking () { + this.$request({ + // url: '/cruiser/cruiserTrajectory', + url: '/cruiser/sort', + method: 'get', + params: { + mac: this.carMac, + startTime: this.sensorDate[0], + endTime: this.sensorDate[1] + } + }).then(res => { + if (res.data.length > 0) { + this.noneDustldData = true + this.rankList = res.data + console.log('������', res) } }) }, // ������������������������ - initStart(res) { + initStart (res) { // console.log(res.data, 'res.data') this.abc += 1 const that = this @@ -1146,8 +1252,7 @@ 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) { @@ -1236,7 +1341,7 @@ draw(that.sensor, that.viewType, that.carMac) // drawLine()// ������ drawStartAndEnd() // ��������������������� - function draw(sensor, type, carMac, point) { + function draw (sensor, type, carMac, point) { var levels = getGrading(sensor, type, carMac, point) $.each(levels, function (index, value) { var color = value.color @@ -1265,7 +1370,7 @@ } // ��������������������������������� - function drawPolygon(sensor) { + function drawPolygon (sensor) { $.each(that.showPoints, function (item, point) { var sw = getPoint(225, point.lng, point.lat, that.distance) var ne = getPoint(45, point.lng, point.lat, that.distance) @@ -1288,7 +1393,7 @@ } // ��������������������� - function drawStartAndEnd() { + function drawStartAndEnd () { var startIcon = new BMapGL.Icon( require('@/assets/images/start.png'), new BMapGL.Size(48, 48) @@ -1313,7 +1418,7 @@ } // ��������������������� - function drawLine() { + function drawLine () { var data = [] var points = [] $.each(trackPoints, function (index, value) { @@ -1340,7 +1445,7 @@ } // ������������>=size���������points - function getShowPoints(size) { + function getShowPoints (size) { var points = [] points.push(trackPoints[0]) for (var i = 1; i < trackPoints.length; i++) { @@ -1365,7 +1470,7 @@ } // ��������������������������������������� - function getPoint(angle, lng, lat, distance) { + function getPoint (angle, lng, lat, distance) { var EARTH_RADIUS = 6378137 // ��������������������������������������� var ra = distance / EARTH_RADIUS @@ -1390,7 +1495,7 @@ return new BMapGL.Point(lng, lat) } - function getGrading(sensor, type, carMac) { + function getGrading (sensor, type, carMac) { var levels = [] var level0 = {} var level1 = {} @@ -1538,7 +1643,7 @@ levels.push(level0, level1, level2, level3, level4, level5, level6) return levels } - function getColorAndLevel(senosor, data) { + function getColorAndLevel (senosor, data) { var levelData = that.sensorTableData var colorAndLevel = {} var color @@ -1719,7 +1824,7 @@ } // point���������label������ - function setLabelStyle(content, point) { + function setLabelStyle (content, point) { var label = new BMapGL.Label( `<span class="my-maptip" data-times="${point.times}">${content}<span>`, // ���lable������������ { @@ -1773,8 +1878,8 @@ label.setStyle(labelStyle) that.map.addOverlay(label) } - //��������������������������� - function comparedate(date1, date2) { + // ��������������������������� + function comparedate (date1, date2) { let oDate1 = new Date(date1) let oDate2 = new Date(date2) if (oDate1.getTime() > oDate2.getTime()) { @@ -1792,7 +1897,7 @@ } // ������������,������������������ - function showNoPoints() { + function showNoPoints () { that.map.centerAndZoom('���������', 17) setTimeout(function () { document.getElementById('cpm').style.display = 'block' @@ -1812,7 +1917,7 @@ }) // var that = this - function clickChange() { + function clickChange () { $('.carTop').on('click', () => { // console.log('���������') that.view.removeAllLayers() @@ -1841,7 +1946,7 @@ clickChange() } }, - changeCode(index) { + changeCode (index) { this.changeColor = index // var pr = '' switch (index) { @@ -1883,7 +1988,7 @@ }) this.initStart() }, - changeCode1(index) { + changeCode1 (index) { this.changeColor1 = index if (index === 0) { this.viewKey = '2D' @@ -1990,12 +2095,15 @@ width: 100px; height: 200px; } -.carTop { +.faterCar{ position: absolute; + width: 100%; + z-index: 999; top: 0; +} +.carTop { width: 100%; padding: 5px 10px; - z-index: 999; background: rgba(204, 204, 204, 0.5); box-shadow: 1px 1px 5px #666; } @@ -2093,4 +2201,53 @@ /deep/.inputNum { width: 5% !important; } +.rightIcon{ + position: absolute; + right: 0px; + top: 300px; + z-index: 999; + cursor: pointer; + font-size: 30px; + color: #409eff; +} +.rankCar{ + float: right; + p{ + text-align: center; + } + background: rgba(204, 204, 204, 0.5); + box-shadow: 1px 1px 5px #666; + padding: 5px; + margin-top: 10px; + ul{ + font-size: 16px; + list-style: none; + max-height: 800px; + padding-bottom: 120px; + overflow: auto; + padding-left: 0; + li{ + margin: 10px; + } + } +} +.success-checkmark:after { + content: '��'; + position: absolute; + left:0; top: -1px; + width: 20px; + height: 20px; + text-align: center; + border: 1px solid #aaa; + background: #f8f8f8; + border-radius: 50%; + box-shadow: inset 0 1px 3px rgba(0,0,0,.3); + cursor: pointer; +} +.rankCarItem{ + display: flex; + justify-content: space-between; + align-items: center; + margin: 10px 0; +} </style> -- Gitblit v1.8.0