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