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 | 530 ++++++++++++++++++++++++++++------------------------------
1 files changed, 255 insertions(+), 275 deletions(-)
diff --git a/src/views/car/index.vue b/src/views/car/index.vue
index 617a935..8319877 100644
--- a/src/views/car/index.vue
+++ b/src/views/car/index.vue
@@ -39,211 +39,197 @@
class="iconfont iconfaxianzuobiao"
@click="deviceDetail(item.mac, null, item, 0)"
/>
- <!-- @click="deviceDetail('p5dnd7a0245390',null,item,0)"-->
</el-menu-item>
</el-menu>
</el-aside>
<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
- v-model="inputnum"
- 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"
+ <span
+ v-if="webSocketView"
+ style="margin: 2px 10px 0 0"
>
<el-button
- slot="trigger"
- size="small"
+ size="mini"
type="primary"
+ @click="wsStart()"
+ >������������</el-button>
+ </span>
+
+ <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>
- <div
- slot="tip"
- class="el-upload__tip"
- style="color: red"
+ <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"
- />
- </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
- v-model="dateValue"
- style="float: right; margin-right: 10px"
- type="datetimerange"
- range-separator="���"
- start-placeholder="������������"
- end-placeholder="������������"
- @change="dateChange"
- />
- <!-- ������/��������������������� -->
- <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>
+ </div>
+ <div
+ v-if="!rankListShow & noneDustldData"
+ class="rightIcon"
+ @click="showRankList"
>
- <el-option
- v-for="item in dataTypeList"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
+ <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"
@@ -258,18 +244,6 @@
<!-- ������������ -->
</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"
@@ -690,7 +664,9 @@
},
sensorDate: null,
noneData: false,
+ noneDustldData: false,
defaultData: [],
+ rankList: [],
carMac: null,
dialogFormVisible: false,
sensorTableData: [
@@ -803,6 +779,7 @@
dataTypeValue: 'history',
historyView: true,
webSocketView: false,
+ rankListShow: false,
isDataList: [],
shapeLayer: null,
carData: null,
@@ -844,25 +821,6 @@
},
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 () {
// this.$watch('carMac', () => {
@@ -878,9 +836,6 @@
this.newTime(this.timeValue)
this.newDate()
this.getCarData()
- // this.$watch('carMac', () => {
- // this.getMacDate()
- // })
},
methods: {
handleRemove (file, fileList) {
@@ -900,20 +855,7 @@
// 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 == '') {
+ if (this.Lname === '') {
this.$message({
message: '������������������',
type: 'warning'
@@ -932,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])
@@ -1008,12 +936,6 @@
},
// ���������������������
deviceDetail (mac, item, items, indexs) {
- // console.log('������������������������')
- // console.log(mac)
- // console.log(item)
- // console.log(items)
- // console.log(indexs)
- // this.monitorPointInfo = item
this.$router.push({
name: 'deviceDetail',
// path: '/carDetail',
@@ -1150,24 +1072,6 @@
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 () {
// ������������������
@@ -1229,6 +1133,9 @@
}
}
},
+ showRankList () {
+ this.rankListShow = !this.rankListShow
+ },
// ���������������������
getStart () {
this.noneData = false
@@ -1260,6 +1167,27 @@
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)
}
})
},
@@ -2167,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;
}
@@ -2270,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