From b82c1f5e2c6daeede03f6fcf7c91ae66348d97e3 Mon Sep 17 00:00:00 2001 From: guoshipeng <3194674006@qq.com> Date: Thu, 11 May 2023 16:03:21 +0800 Subject: [PATCH] 1、道路尘负荷分析尘负荷值修改 2、6参设定修改 --- src/views/car/index.vue | 597 ++++++++++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 460 insertions(+), 137 deletions(-) diff --git a/src/views/car/index.vue b/src/views/car/index.vue index fe3e768..d5ffd6b 100644 --- a/src/views/car/index.vue +++ b/src/views/car/index.vue @@ -1,13 +1,10 @@ <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=" @@ -20,12 +17,17 @@ > <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 @@ -55,21 +57,20 @@ > </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()" @@ -109,15 +110,87 @@ <!-- @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 @@ -131,10 +204,10 @@ " > <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> @@ -172,19 +245,20 @@ <!-- <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="���������������" /> @@ -228,6 +302,7 @@ 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, @@ -410,8 +485,13 @@ }, } export default { + components: { index }, data() { return { + tableData: [], + fileList: [], + file: '', + insdialogVisible: false, bdLon: null, bdLat: null, loading: true, @@ -432,10 +512,7 @@ dataType: 'history', responseJSON: null, radio1: null, - viewOptions: [ - '������', - '������' - ], + viewOptions: ['������', '������'], dateValue: [], pickerOptions: { disabledDate(time) { @@ -489,6 +566,29 @@ } }, }, + 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: [], @@ -518,32 +618,32 @@ { 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', @@ -613,6 +713,10 @@ endTime: '', dataDate: '', sensorTime: [], + Lu: [], + startL: '', + Lname: '', + endL: '', timeValue: [ new Date(2020, 1, 1, 0, 0, 0), new Date(2022, 12, 31, 23, 59, 59), @@ -640,7 +744,7 @@ // console.log(n) }, deep: true, - immediate: true + immediate: true, // timeValue: { // handler(newVal, oldVal) { // this.sensorTime = this.newTime() @@ -680,10 +784,113 @@ // }) }, 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 @@ -742,13 +949,15 @@ 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() { @@ -757,21 +966,23 @@ 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) { @@ -783,8 +994,16 @@ 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); @@ -896,7 +1115,12 @@ 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 }) @@ -923,9 +1147,10 @@ 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 @@ -978,20 +1203,32 @@ 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 @@ -1004,25 +1241,35 @@ 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) } }) @@ -1071,8 +1318,8 @@ 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 @@ -1085,9 +1332,7 @@ selectedColor: '#ee1111', // ��������������� autoSelect: true, // ������������������������������������������ riseTime: 1800, // ��������������������������� - onClick: (e) => { - // console.log(e) - }, + onClick: (e) => {}, }) that.shapeLayer.setData(data) that.view.addLayer(that.shapeLayer) @@ -1181,7 +1426,7 @@ 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] @@ -1190,8 +1435,11 @@ flag = false } } + points.push(point1) + console.log(points,'num'); if (flag) { points.push(point1) + // console.log(points,'num'); } } @@ -1220,7 +1468,7 @@ // ���������������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) } @@ -1554,18 +1802,22 @@ // 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', @@ -1574,8 +1826,51 @@ 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 = '' + } } // ������������,������������������ @@ -1588,6 +1883,7 @@ } // ������������������������ + that.map.addEventListener('zoomend', function () { // ��������������������������������������� var zoom = that.map.getZoom() @@ -1688,7 +1984,7 @@ margin: 0; z-index: 0; font-size: 14px; - font-family: "������������"; + font-family: '������������'; } .main_body { @@ -1711,7 +2007,7 @@ 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; @@ -1804,8 +2100,8 @@ border-right: 1px solid #aaa; } -.carTop{ - &>.left:nth-child(1){ +.carTop { + & > .left:nth-child(1) { border-radius: 5px 0 0 5px; } } @@ -1846,4 +2142,31 @@ .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> -- Gitblit v1.8.0