| | |
| | | <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()" |
| | |
| | | <!-- />--> |
| | | <!-- </el-select>--> |
| | | <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="请输入内容" /> |
| | |
| | | dataType: 'history', |
| | | responseJSON: null, |
| | | radio1: null, |
| | | viewOptions: ['平铺', '立体'], |
| | | viewOptions: [ |
| | | '平铺', |
| | | '立体' |
| | | ], |
| | | dateValue: [], |
| | | pickerOptions: { |
| | | disabledDate(time) { |
| | |
| | | { |
| | | sensorName: 'O3', |
| | | unit: 'ug/m³', |
| | | tab1: '100', |
| | | tab2: '160', |
| | | tab3: '215', |
| | | tab4: '265', |
| | | tab1: '160', |
| | | tab2: '200', |
| | | tab3: '300', |
| | | tab4: '400', |
| | | tab5: '800', |
| | | tab6: '800', |
| | | tab6: '1000', |
| | | }, |
| | | { |
| | | sensorName: 'TVOC', |
| | |
| | | // console.log(n) |
| | | }, |
| | | deep: true, |
| | | immediate: true, |
| | | immediate: true |
| | | // timeValue: { |
| | | // handler(newVal, oldVal) { |
| | | // this.sensorTime = this.newTime() |
| | |
| | | // 时间处理函数 |
| | | 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', |
| | | method: 'get' |
| | | }).then(res => { |
| | | this.defaultData = res.data |
| | | this.carMac = res.data[0].mac |
| | | }).catch(err => { |
| | | console.log(err) |
| | | }) |
| | | .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, |
| | | }, |
| | | 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) |
| | | }) |
| | | .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 => { |
| | | if (!res.data.length) { |
| | | this.noneData = true |
| | | this.loading = false |
| | |
| | | lng = GPS.bd_encrypt(lat, lng).lon |
| | | lat = GPS.bd_encrypt(lat, lng).lat |
| | | var point = new 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.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 |
| | | var timeArrSub = [] |
| | | that.sensorDate.map((v, i) => { |
| | | 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 (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.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')) { |
| | | point.dustld = 100 |
| | | } else { |
| | | point.dustld = value.dustld - 0 |
| | | } |
| | | } 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.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 |
| | | trackPoints.push(point) |
| | | } |
| | |
| | | autoSelect: true, // 根据鼠标位置来自动设置选中项 |
| | | riseTime: 1800, // 楼块初始化升起时间 |
| | | onClick: (e) => { |
| | | console.log(e) |
| | | // console.log(e) |
| | | }, |
| | | }) |
| | | that.shapeLayer.setData(data) |
| | |
| | | // 转为正常的10进制经纬度 |
| | | lng = (lng * 180) / Math.PI |
| | | lat = (lat * 180) / Math.PI |
| | | console.log(lng, lat) |
| | | // console.log(lng, lat) |
| | | return new BMapGL.Point(lng, lat) |
| | | } |
| | | |
| | |
| | | data2.push({ |
| | | geometry: { |
| | | type: 'Polygon', |
| | | coordinates: [polygon], |
| | | coordinates: [polygon], |
| | | }, |
| | | properties: { |
| | | height: height, |
| | |
| | | |
| | | // 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'>" + content + '<br /><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) { |
| | |
| | | fontFamily: '微软雅黑', |
| | | backgroundColor: '0.05', |
| | | fontWeight: 'bold', |
| | | } |
| | | } |
| | | label.setStyle(labelStyle) |
| | | that.map.addOverlay(label) |
| | | } |
| | |
| | | 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-radius: 0 5px 5px 0; |
| | | border-right: 1px solid #aaa; |
| | | } |
| | | .carTop { |
| | | & > .left:nth-child(1) { |
| | | |
| | | .carTop{ |
| | | &>.left:nth-child(1){ |
| | | border-radius: 5px 0 0 5px; |
| | | } |
| | | } |
| | |
| | | width: 15%; |
| | | } |
| | | </style> |
| | | |