添加危废车辆地图

src/api/index.js

@@ -111,6 +111,24 @@ export function getSoilSummry(data) {
       method: 'get',
       headers: {},
     })
+  }
+     // 危废车辆分页
+   export function vehicleList(obj) {
+    return requests({
+      url: '/zh-applet-admin/appmana/bigScreen/vehicleList',
+      method: 'post',
+      headers: {},
+      data:obj
+    })
+  }
+     // 危废车辆坐标
+   export function gpsRecordPage(obj) {
+    return requests({
+      url: '/zh-applet-admin/appmana/bigScreen/gpsRecordPage',
+      method: 'post',
+      headers: {},
+      data:obj
+    })
   }
   // 查询设备下各检测项的历史数据
   export function survItemSummary(obj) {

src/assets/css/index.css

@@ -909,4 +909,205 @@
 }
 .amap-copyright {
 	opacity:0;
-}
+}
+
+/* 危废车辆列表 */
+/* 下拉菜单容器 */
+.vehicle-dropdown-dark {
+  position: absolute;
+  z-index: 9;
+  top: 100px;
+  left: 24%;
+}
+
+/* 按钮样式 - 暗色科技风格 */
+.vehicle-dropdown-btn-dark {
+  background: rgba(0, 40, 80, 0.8) !important;
+  border: 1px solid #008cff !important;
+  border-radius: 4px !important;
+  padding: 12px 20px !important;
+  color: #00d4ff !important;
+  font-weight: 500;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
+  letter-spacing: 1px;
+  transition: all 0.3s ease;
+}
+
+.vehicle-dropdown-btn-dark:hover {
+  background: rgba(0, 212, 255, 0.15) !important;
+  box-shadow: 0 0 30px rgba(0, 212, 255, 0.4) !important;
+  border-color: #00d4ff !important;
+}
+
+.vehicle-dropdown-btn-dark i {
+  margin: 0 5px;
+}
+
+/* 下拉菜单样式 */
+.vehicle-dropdown-menu-dark {
+  background: rgba(0, 20, 40, 0.95) !important;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(0, 212, 255, 0.3) !important;
+  border-radius: 4px !important;
+  padding: 5px 0 !important;
+  box-shadow: 0 0 40px rgba(0, 212, 255, 0.1) !important;
+}
+
+/* 下拉菜单项样式 */
+.vehicle-dropdown-item-dark {
+  color: #8bb4d0 !important;
+  padding: 0px 24px !important;
+  border-bottom: 1px solid rgba(0, 212, 255, 0.05) !important;
+  transition: all 0.3s ease !important;
+  font-size: 14px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  cursor: pointer;
+}
+
+.vehicle-dropdown-item-dark:last-child {
+  border-bottom: none !important;
+}
+
+.vehicle-dropdown-item-dark:hover {
+  background: rgba(0, 212, 255, 0.1) !important;
+  color: #00d4ff !important;
+  padding-left: 30px !important;
+}
+
+/* 圆点指示器 */
+.vehicle-dot-dark {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  background: #00d4ff;
+  border-radius: 50%;
+  margin-right: 10px;
+  flex-shrink: 0;
+  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+  transition: all 0.3s ease;
+}
+
+.vehicle-dropdown-item-dark:hover .vehicle-dot-dark {
+  box-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
+  transform: scale(1.2);
+}
+
+/* 序号标签 */
+.vehicle-number-dark {
+  background: rgba(0, 212, 255, 0.1);
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 12px;
+  color: rgba(0, 212, 255, 0.5);
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+  margin-left: 10px;
+}
+
+.vehicle-dropdown-item-dark:hover .vehicle-number-dark {
+  background: rgba(0, 212, 255, 0.2);
+  color: #00d4ff;
+}
+
+/* 响应式调整 */
+@media screen and (max-width: 768px) {
+  .vehicle-dropdown-dark {
+    top: 80px;
+    left: 15%;
+  }
+  
+  .vehicle-dropdown-btn-dark {
+    padding: 6px 15px !important;
+    font-size: 14px;
+  }
+  
+  .vehicle-dropdown-item-dark {
+    padding: 8px 16px !important;
+    font-size: 13px !important;
+  }
+}
+
+/* 动画效果 */
+@keyframes glowPulse {
+  0% {
+    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
+  }
+  50% {
+    box-shadow: 0 0 40px rgba(0, 212, 255, 0.4);
+  }
+  100% {
+    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
+  }
+}
+
+.vehicle-dropdown-btn-dark {
+  animation: glowPulse 3s infinite;
+}
+
+.vehicle-dropdown-btn-dark:hover {
+  animation: none;
+}
+/* 额外炫酷效果 - 鼠标悬停时的光晕动画 */
+.vehicle-dropdown-item-dark::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 3px;
+  height: 100%;
+  background: #00d4ff;
+  transform: scaleY(0);
+  transition: transform 0.3s ease;
+}
+
+.vehicle-dropdown-item-dark:hover::before {
+  transform: scaleY(1);
+}
+
+.vehicle-dropdown-item-dark {
+  position: relative;
+  overflow: hidden;
+}
+
+/* 悬停时文字发光效果 */
+.vehicle-dropdown-item-dark:hover {
+  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
+}
+
+/* 点击波纹效果 */
+.vehicle-dropdown-item-dark:active {
+  transform: scale(0.98);
+}
+/* ==================== 信息窗口样式（深色科技风） ==================== */
+:deep(.amap-info-content) {
+  background: transparent !important;
+  padding: 0 !important;
+}
+
+:deep(.amap-info-sharp) {
+  display: none !important;
+}
+
+:deep(.amap-info-close) {
+  color: #00d4ff !important;
+  background: rgba(0, 20, 40, 0.8) !important;
+  border-radius: 50% !important;
+  width: 28px !important;
+  height: 28px !important;
+  line-height: 28px !important;
+  text-align: center !important;
+  right: 8px !important;
+  top: 8px !important;
+  border: 1px solid rgba(0, 212, 255, 0.3) !important;
+  font-size: 16px !important;
+}
+
+:deep(.amap-info-close:hover) {
+  background: rgba(255, 69, 0, 0.2) !important;
+  color: #FF4500 !important;
+  border-color: #FF4500 !important;
+}
+/* 危废车辆列表完成 */

src/pages/Home/index.vue

@@ -51,10 +51,9 @@
              v-if="mapTypeFlag==true">
         <img src="@/assets/image/qiehuan.png" @click="mapTypeSwitch"
              style="position: fixed;top:5.2vw;right:3%;z-index: 999;width:12vw;cursor: pointer;" alt="" v-else>
-        <!--				<div id="container" v-if="fullscreen==false" style="width:98%;height:100%;resize:both; position: absolute;z-index:0;top:0px;left: 1%;transform:scale(1.05,1.05);"></div>-->
-        <!--				<div id="container" v-else                   style="width:98%;height:100%;resize:both; position: absolute;z-index:0;top:0px;left: 1%;"></div>-->
         <div id="container"
              style="width:98%;height:100%;resize:both; position: absolute;z-index:0;top:0px;left: 1%;"></div>
+        
         <!-- 左上头部 -->
         <transition enter-active-class="animate__animated animate__backInLeft"
                     leave-active-class="animate__animated animate__backOutLeft">
@@ -113,15 +112,6 @@
                                       :to="Number(stationCount0)" :key="stationCount0" duration="3000"></animate-number>个
                     </span>
                   </div>
-<!--                  <div-->
-<!--                      class="in1con_lf_imglf animate__animated animate__delay-1s animate__infinite animate__slow animate__pulse">-->
-<!--                    <img src="@/assets/image/xmgk05.png" class="in1con_lf_imgone" alt="">-->
-<!--                    <span class="in1con_lf_imglf_tit">太阳能诱虫灯数量</span>-->
-<!--                    <span class="in1con_lf_imglf_num">-->
-<!--                      <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0"-->
-<!--                                      :to="1" :key="stationCount0" duration="3000"></animate-number>个-->
-<!--                    </span>-->
-<!--                  </div>-->
                 </div>
               </div>
               <div style="background: #0d4e62;height: 1px;width: 94%;margin: 0 auto;margin-top: 0.4vw;"></div>
@@ -165,17 +155,17 @@
                 <el-carousel arrow="never" height="150px" style="    bottom: 20px;">
                   <el-carousel-item v-for="value in roll_info" :key="value.id">
                     <div class="sx_cov">
-											<span class="sx_covtit">
+                      <span class="sx_covtit">
-												{{ value.infoName }}
+                        {{ value.infoName }}
-											</span>
+                      </span>
                       <ul v-for="ite in value.detailList" :key="ite.id">
                         <li class="sx_cov_lt">
                           <span class="sx_cov_lt_tit">{{ ite.detailCode }}</span>
                           <span class="sx_cov_lt_num">
-														<animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="ite.detailValue"
+                            <animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="ite.detailValue"
                                             :key="ite.detailValue" duration="3000"></animate-number>
-														{{ ite.detailValue2 }}
+                            {{ ite.detailValue2 }}
-													</span>
+                          </span>
                         </li>
                       </ul>
                     </div>
@@ -185,7 +175,8 @@
             </div>
           </template>
         </transition>
-        <!--        地图左下图例-->
+        
+        <!-- 地图左下图例 -->
         <div v-if="mapTypeFlag==true" class="mapTuLi">
           <div class="scdlist" @click="switchIcon('livestock')">
             <img src="@/assets/image/icon-blue.png" class="xcdimg" alt="">
@@ -208,6 +199,7 @@
             <span class="scdlist_tit">微功率雷达监测</span>
           </div>
         </div>
+        
         <transition enter-active-class="animate__animated animate__backInUp"
                     leave-active-class="animate__animated animate__backOutDown">
           <template v-if="mapTypeFlag">
@@ -224,9 +216,6 @@
                 <el-tooltip class="item" effect="dark"
                             :content="dataTypeEchart?'监测值为正常历史监测数据。':'对比值为下游监测站数据减去上游监测站数据。'"
                             placement="top-start">
-<!--                  <span class="dataTypeEchart" @click="switchEchartType">-->
-<!--                      {{ dataTypeEchart ? '监测值' : '对比值' }}-->
-<!--                  </span>-->
                 </el-tooltip>
                 <el-select class="dataTypeEchart2" v-model="dateType" placeholder="请选择" @change="changeDateType">
                   <el-option
@@ -254,12 +243,12 @@
             </div>
           </template>
         </transition>
-        <!--        右侧展示栏-->
+        
+        <!-- 右侧展示栏 -->
         <transition enter-active-class="animate__animated animate__backInRight"
                     leave-active-class="animate__animated animate__backOutRight">
           <template v-if="mapTypeFlag">
             <div class="leftBox right baseBoxHjleft" style="width:22.5%;overflow: hidden;">
-
               <img src="@/assets/image/kuang_zuoshang.png" class="in2con_zlf" alt="">
               <img src="@/assets/image/kuang_youshang.png" class="in2con_zys" alt="">
               <img src="@/assets/image/kuang_zuoxia.png" class="in2con_zzx" alt="">
@@ -291,14 +280,12 @@
                             <div class="jczbtm_lf_rt">
                               <span class="jczbtm_lf_rttit">{{ valist.name }}</span>
                               <span class="jczbtm_lf_rtnum">
-<!--																	<animate-number class="in1con_lf_imglf_num_jix" ref="reNum" from="0" :to="valist.code"-->
+                                <span class="in1con_lf_imglf_num_jix">{{valist.code?parseFloat((valist.code-0).toFixed(2)):'--'}}</span>
-<!--                                                  :key="valist.tylename+'_key'" duration="3000"></animate-number>-->
+                                {{ valist.unit }}
-                                 <span class="in1con_lf_imglf_num_jix">{{valist.code?parseFloat((valist.code-0).toFixed(2)):'--'}}</span>
+                              </span>
-																	{{ valist.unit }}</span>
                             </div>
                           </div>
                         </vue-seamless-scroll>
-
                       </div>
                     </el-carousel-item>
                   </el-carousel>
@@ -309,43 +296,33 @@
                 <div class="in1con_lf_tit " style="cursor: pointer;"  @click="taizhangDialogShowFlag=true">
                   <span class="in1con_lf_titshow1">核算与评估</span>
                   <img src="@/assets/image/title_bg.png" class="in1con_lf_titimg" alt="">
-<!--                  <span class="in1con_lf_titshow2 " style="">台账>></span>-->
                 </div>
                 <div class="mywrcov">
                   <div class="mywrcov_one mywrcov_onehover" @click="showEchartDialog({stationCode: 'S_1'}, 'dataWaterTp')">
                     <span class="mywrcov_onetit">{{ effect_assess0.detailCode }}</span>
                     <span class="mywrcov_onenum">
-											<span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{  effect_assess0.detailValue }}</span>
+                      <span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{  effect_assess0.detailValue }}</span>
-<!--                      <animate-number class="in1con_lf_imglf_num_jix mywrcov_onenumjx" :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"-->
+                    </span>
-<!--                                      :to="effect_assess0.detailValue" />-->
-										</span>
                   </div>
                   <div class="mywrcov_two mywrcov_onehover" @click="showEchartDialog({stationCode: 'S_1'}, 'dataWaterTn')">
                     <span class="mywrcov_onetit">{{ effect_assess1.detailCode }}</span>
                     <span class="mywrcov_onenum">
                       <span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess1.detailValue }}</span>
-<!--                      <animate-number class="in1con_lf_imglf_num_jix mywrcov_onenumjx" :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"-->
-<!--                                      :to="effect_assess0.detailValue" />-->
                     </span>
                   </div>
                   <div class="mywrcov_three mywrcov_onehover" @click="showEchartDialog({stationCode: 'S_1'}, 'dataWaterCod')">
                     <span class="mywrcov_onenum" style="margin-top: 1vw;">
                       <span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess2.detailValue }}</span>
-<!--                      <animate-number class="in1con_lf_imglf_num_jix mywrcov_onenumjx" :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"-->
-<!--                                      :to="effect_assess0.detailValue" />-->
                     </span>
                     <span class="mywrcov_onetit">{{ effect_assess2.detailCode }}</span>
                   </div>
                   <div class="mywrcov_four mywrcov_onehover" @click="taizhangDialogShowFlag=true">
                     <span class="mywrcov_onenum" style="margin-top: 1vw; cursor: pointer">
                       <span class="in1con_lf_imglf_num_jix mywrcov_onenumjx">{{ effect_assess3.detailValue }}</span>
-<!--                      <animate-number class="in1con_lf_imglf_num_jix mywrcov_onenumjx" :ref="(dom)=>animateObj.push(dom)" duration="3000"  from="0"-->
-<!--                                      :to="effect_assess0.detailValue" />-->
                     </span>
                     <span class="mywrcov_onetit">{{ effect_assess3.detailCode }}</span>
                   </div>
                   <div class="mywrcovcen">
-                    <!-- <img src="@/assets/image/chengg.png" class="mywrcovcen_tit" alt=""> -->
                     <span class="mywrcovcen_tit" v-if="effect_assess4.detailValue=='成功'">优</span>
                     <span class="mywrcovcen_tit" v-else>{{ effect_assess4.detailValue }}</span>
                     <span class="mywrcovcen_con">{{ effect_assess4.detailCode }}</span>
@@ -367,12 +344,10 @@
                           <span class="jcsssj_rt_tit">{{ item.stationName?item.stationName:item.deployRemark?item.deployRemark:'土壤监测站' }}</span>
                           <span class="jcsssj_rtbiao" :style="{background:(item.color)}">{{ item.name }}</span>
                           <span class="jcsssj_rt_numsy">
-															<!-- <span class="in1con_lf_imglf_num_jix">{{item.value}}</span> -->
+                            <animate-number class="in1con_lf_imglf_num_jix" ref="myNum" from="0" :to="Number(item.value)"
-															<animate-number class="in1con_lf_imglf_num_jix" ref="myNum" from="0" :to="Number(item.value)"
+                                            :key="item.value" duration="3000" :formatter="formatter"></animate-number>
-                                              :key="item.value" duration="3000" :formatter="formatter"></animate-number>
+                            {{ item.unit }}
-															{{ item.unit }}
+                          </span>
-														</span>
-                          <!-- <img src="@/assets/image/up.png" class="jcsssj_rt_up" alt=""> -->
                         </div>
                         <span class="jcsssj_rt_time">{{ item.dataDateTime?item.dataDateTime.substring(0,16):'--' }}</span>
                       </div>
@@ -384,6 +359,7 @@
           </template>
         </transition>
       </div>
+      
       <!-- 监测站弹窗 -->
       <el-dialog :visible.sync="qcdtdialogTableVisible">
         <div class="jctc" id="modal1123123">
@@ -416,23 +392,13 @@
             <span class="jctcvban_tit">监测指标</span>
           </div>
           <div style="margin-left: 3%;">
-            <!-- survItemList -->
             <span class="jctc_text" v-for="(item,index) in qcdtinfor.survColorItems" :key="index"
                   :style="{background:(item.color)}">{{ item.name }}</span>
-            <!-- <span class="jctc_text" style="background: #445fb4;">总氮</span>
-            <span class="jctc_text" style="background: #52ac2a;">硝钛氨</span>
-            <span class="jctc_text" style="background: #ac4f2a;">空气温度</span>
-            <span class="jctc_text" style="background: #ac4f2a;">空气湿度</span>
-            <span class="jctc_text" style="background: #4c9bb5;">风速</span>
-            <span class="jctc_text" style="background: #6a4cb5;">风向</span>
-            <span class="jctc_text" style="background: #4cb585;">大气压</span>
-            <span class="jctc_text" style="background: #ad8f49;">太阳全辐射</span>
-            <span class="jctc_text" style="background: #52ac2a;">土壤温度</span>
-            <span class="jctc_text" style="background: #4c9bb5;">土壤盐分</span> -->
           </div>
           <img src="@/assets/image/ljjr.png" class="ljjr" @click="jumpStationPage(qcdtinfor)" alt="">
         </div>
       </el-dialog>
+      
       <!-- 企业弹窗 -->
       <el-dialog :visible.sync="qyinfordtdialogTableVisible">
         <div class="tz_cov" style="height:25vw;">
@@ -461,17 +427,28 @@
           </el-row>
         </div>
       </el-dialog>
-      <!-- 地图流量菜单 -->
+      
-      <el-dropdown style="position:absolute;z-index: 9;top:100px;left:24%;">
+      <!-- 危废车辆菜单 -->
-        <el-button type="primary">
+      <el-dropdown 
-          危废车辆<i class="el-icon-arrow-down el-icon--right"></i>
+        class="vehicle-dropdown-dark"
+        trigger="hover"
+        @command="handleVehicleSelect"
+      >
+        <el-button class="vehicle-dropdown-btn-dark">
+          危废车辆 ({{ vehicleList.length }})
+          <i class="el-icon-arrow-down el-icon--right"></i>
         </el-button>
-        <el-dropdown-menu slot="dropdown">
+        
-          <el-dropdown-item>危废车辆1</el-dropdown-item>
+        <el-dropdown-menu slot="dropdown" class="vehicle-dropdown-menu-dark">
-          <el-dropdown-item>危废车辆2</el-dropdown-item>
+          <el-dropdown-item 
-          <el-dropdown-item>危废车辆3</el-dropdown-item>
+            v-for="(item, index) in vehicleList"
-          <el-dropdown-item>危废车辆4</el-dropdown-item>
+            :key="index"
-          <el-dropdown-item>危废车辆5</el-dropdown-item>
+            :command="item"
+            class="vehicle-dropdown-item-dark"
+          >
+            <span class="vehicle-dot-dark"></span>
+            <span style="flex:1;">{{ item.veNotes || '未知车辆' }}</span>
+          </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
 
@@ -481,7 +458,6 @@
     <SingleEchartDialog v-if="singleEchartDialogShowFlag" :item="singleEchartData" @close="singleEchartDialogShowFlag=false"/>
     <TaizhangDialog v-if="taizhangDialogShowFlag" :resourcedirect="resourcedirect"  @close="taizhangDialogShowFlag=false"/>
   </ScaleBox>
-
 </template>
 
 <script>
@@ -493,6 +469,8 @@ import {
   getNewestData,
   getPollutionDict,
   stationInfo,
+  vehicleList,
+  gpsRecordPage,
 } from '@/api';
 import vueSeamlessScroll from 'vue-seamless-scroll'
 import hefentianqi from '@/pages/weather/weather.vue'
@@ -544,7 +522,6 @@ export default {
       pestLightCount: 0,
       stationCount0: 0,
       stationCount1: 0,
-      //   showData:[],
       dialogTableVisible: false,
       qcdialogTableVisible: false,
       qcdtdialogTableVisible: false,
@@ -563,7 +540,7 @@ export default {
       zoomData: 14,
       isShowLightNumber: '1',
       switchValue: true,
-      fullscreen: false, //全屏
+      fullscreen: false,
       echartIndex: 0,
       dateType: 'monthDays',
       dateTypeOptions: [{
@@ -582,6 +559,12 @@ export default {
       liulDataId:'',
       tabsLoading: false,
       lastZIndex: 1,
+      vehicleList: [],
+      // 车辆位置相关
+      vehicleMarkers: [],
+      currentVehicleInfo: null,
+      vehicleLocationMarker: null,
+      vehicleInfoWindow: null,
     };
   },
   created() {
@@ -590,49 +573,47 @@ export default {
   computed: {
     classOption() {
       return {
-        step: 0.6, // 数值越大速度滚动越快
+        step: 0.6,
-        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
+        limitMoveNum: 3,
-        hoverStop: true, // 是否开启鼠标悬停stop
+        hoverStop: true,
-        direction: 1, // 0向下 1向上 2向左 3向右
+        direction: 1,
-        openWatch: true, // 开启数据实时监控刷新dom
+        openWatch: true,
-        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleHeight: 0,
-        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        singleWidth: 0,
-        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+        waitTime: 1000,
       };
     },
     classWrwcod() {
       return {
-        step: 0.2, // 数值越大速度滚动越快
+        step: 0.2,
-        limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
+        limitMoveNum: 6,
-        hoverStop: true, // 是否开启鼠标悬停stop
+        hoverStop: true,
-        direction: 1, // 0向下 1向上 2向左 3向右
+        direction: 1,
-        openWatch: true, // 开启数据实时监控刷新dom
+        openWatch: true,
-        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleHeight: 0,
-        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        singleWidth: 0,
-        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+        waitTime: 1000,
       };
     },
     showOption() {
       return {
-        step: 0.5, // 数值越大速度滚动越快
+        step: 0.5,
-        limitMoveNum: 0, // 开始无缝滚动的数据量 this.dataList.length
+        limitMoveNum: 0,
-        hoverStop: true, // 是否开启鼠标悬停stop
+        hoverStop: true,
-        direction: 1, // 0向下 1向上 2向左 3向右
+        direction: 1,
-        openWatch: true, // 开启数据实时监控刷新dom
+        openWatch: true,
-        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleHeight: 0,
-        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        singleWidth: 0,
-        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
+        waitTime: 1000,
       };
     },
   },
   mounted() {
-    // 实时时间
     setTimeout(() => {
       this.$nextTick(() => {
         this.initMap(this.zoomData, this.isShowLightNumber);
       })
     }, 2000)
-    //初始化数据
     this.getNowTime();
     this.indexleft();
     this.getNewestDataList();
@@ -640,19 +621,263 @@ export default {
     this.infor();
     this.indexinfor();
     this.doGetIndexSummry({index: this.echartIndex});
+    this.vehicleListData();
   },
   methods: {
+    // ==================== 危废车辆位置相关方法 ====================
+    
+    // 危化车辆点击
+    handleVehicleSelect(item) {
+      this.currentVehicleInfo = item;
+      
+      // 清除之前的标记
+      this.clearVehicleMarker();
+      
+      const vehicleName = item.vePlate || item.plateNumber || '车辆';
+     
+      
+      gpsRecordPage({
+        pageNo: 1,
+        pageSize: 1000,
+        gpsId: item.gpsId,
+      }).then(res => {
+        
+        if (res.result && res.result.records && res.result.records.length > 0) {
+          let trackData = res.result.records;
+          
+          
+          // 过滤掉无效的经纬度数据
+          trackData = trackData.filter(record => {
+            const lng = parseFloat(record.jingdu || record.longitude || record.lng || record.lon);
+            const lat = parseFloat(record.weidu || record.latitude || record.lat);
+            return !isNaN(lng) && !isNaN(lat) && 
+                   lng >= -180 && lng <= 180 && 
+                   lat >= -90 && lat <= 90;
+          });
+          
+          if (trackData.length === 0) {
+            this.$message.warning(`${vehicleName} 的位置数据无效，请检查数据`);
+            return;
+          }
+          
+          // 按时间排序，获取最新位置
+          trackData.sort((a, b) => {
+            const timeA = a.createTime || a.server_time || a.updateTime || 0;
+            const timeB = b.createTime || b.server_time || b.updateTime || 0;
+            return new Date(timeA) - new Date(timeB);
+          });
+          
+          // 只取最后一个点（最新位置）
+          const latestPoint = trackData[trackData.length - 1];
+          
+          // 定位到车辆位置并添加标记
+          this.locateToVehicle(latestPoint, item);
+          
+          this.$message({
+            message: `成功加载 ${vehicleName} 的最新位置`,
+            type: 'success'
+          });
+        } else {
+          this.$message({
+            message: `${vehicleName} 暂无位置数据`,
+            type: 'warning'
+          });
+        }
+      }).catch(err => {
+        console.error('获取位置数据失败:', err);
+        this.$message({
+          message: '获取位置数据失败，请稍后重试',
+          type: 'error'
+        });
+      });
+    },
+    
+    // 定位到车辆位置
+    locateToVehicle(point, vehicleInfo) {
+      if (!this.aMap) {
+        console.error('地图未初始化');
+        return;
+      }
+      
+      const lng = parseFloat(point.jingdu || point.longitude || point.lng || point.lon);
+      const lat = parseFloat(point.weidu || point.latitude || point.lat);
+      
+      // 验证经纬度是否有效
+      if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
+        console.error('无效的经纬度:', lng, lat);
+        this.$message.warning('车辆位置数据无效');
+        return;
+      }
+      
+      // 添加车辆位置标记（普通坐标点）
+      this.addVehicleLocationMarker(lng, lat, point, vehicleInfo);
+      
+      // 平滑定位到车辆位置
+      this.aMap.panTo([lng, lat]);
+      setTimeout(() => {
+        this.aMap.setZoomAndCenter(16, [lng, lat]);
+      }, 300);
+      
+      console.log(`定位到车辆位置: ${lng}, ${lat}`);
+    },
+    
+    // 添加车辆位置标记（普通坐标点）
+    addVehicleLocationMarker(lng, lat, point, vehicleInfo) {
+      if (isNaN(lng) || isNaN(lat)) {
+        console.error('无效的经纬度:', lng, lat);
+        return;
+      }
+      
+      this.removeLocationMarker();
+      this.closeVehicleInfoWindow();
+      
+      const vehicleName = vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆';
+      
+      // 使用普通坐标点标记
+      const locationMarker = new AMap.Marker({
+        position: [lng, lat],
+        icon: new AMap.Icon({
+          size: new AMap.Size(30, 42),
+          image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
+          imageSize: new AMap.Size(30, 42)
+        }),
+        offset: new AMap.Pixel(-15, -42),
+        zIndex: 1002,
+        extData: { point: point, vehicleInfo: vehicleInfo }
+      });
+      
+      // 点击标记弹出信息窗口
+      locationMarker.on('click', (e) => {
+        const data = e.target.getExtData();
+        this.showVehicleInfoWindow(data.point, data.vehicleInfo);
+      });
+      
+      locationMarker.setMap(this.aMap);
+      this.vehicleLocationMarker = locationMarker;
+      this.vehicleMarkers.push(locationMarker);
+    },
+    
+    // 显示车辆信息窗口（深色科技风）
+    showVehicleInfoWindow(point, vehicleInfo) {
+      this.closeVehicleInfoWindow();
+      
+      const lng = parseFloat(point.jingdu || point.longitude || point.lng || point.lon);
+      const lat = parseFloat(point.weidu || point.latitude || point.lat);
+      
+      const vehicleName = vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆';
+      
+      const infoContent = `
+        <div style="
+          padding: 16px 20px; 
+          max-width: 360px; 
+          min-width: 250px; 
+          background: rgba(0, 20, 40, 0.95); 
+          border-radius: 8px; 
+          border: 1px solid rgba(0, 212, 255, 0.3);
+          box-shadow: 0 0 40px rgba(0, 212, 255, 0.1);
+          backdrop-filter: blur(10px);
+        ">
+          <div style="display: flex; align-items: center; margin-bottom: 12px; border-bottom: 1px solid rgba(0, 212, 255, 0.15); padding-bottom: 10px;">
+            <span style="font-size: 28px; margin-right: 12px;">🚛</span>
+            <span style="font-size: 18px; font-weight: bold; color: #FFD700;">${vehicleName}</span>
+          </div>
+          <div style="font-size: 13px; line-height: 2.2; color: #8bb4d0;">
+            <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
+              <span style="color: #4a8ba8;">设备ID：</span>
+              <span style="font-weight: 500; color: #ffffff;">${vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '--'}</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
+              <span style="color: #4a8ba8;">车牌号：</span>
+              <span style="font-weight: 500; color: #ffffff;">${vehicleInfo.vePlate || vehicleInfo.plateNumber || '--'}</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
+              <span style="color: #4a8ba8;">最新时间：</span>
+              <span style="font-weight: 500; color: #ffffff;">${point.createTime || point.server_time || point.updateTime || '--'}</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
+              <span style="color: #4a8ba8;">经度：</span>
+              <span style="font-weight: 500; color: #00d4ff;">${lng.toFixed(6)}</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; padding: 3px 0;">
+              <span style="color: #4a8ba8;">纬度：</span>
+              <span style="font-weight: 500; color: #00d4ff;">${lat.toFixed(6)}</span>
+            </div>
+          </div>
+          <div style="margin-top: 10px; text-align: center; font-size: 11px; color: #4a8ba8; border-top: 1px solid rgba(0, 212, 255, 0.1); padding-top: 8px;">
+            📍 点击标记查看详情
+          </div>
+        </div>
+      `;
+      
+      this.vehicleInfoWindow = new AMap.InfoWindow({
+        content: infoContent,
+        offset: new AMap.Pixel(0, -35),
+        autoMove: true,
+        closeWhenClickMap: true,
+      });
+      
+      if (!isNaN(lng) && !isNaN(lat)) {
+        this.vehicleInfoWindow.open(this.aMap, [lng, lat]);
+        this.vehicleMarkers.push(this.vehicleInfoWindow);
+      }
+    },
+    
+    // 关闭信息窗口
+    closeVehicleInfoWindow() {
+      if (this.vehicleInfoWindow) {
+        this.vehicleInfoWindow.close();
+        this.vehicleInfoWindow = null;
+      }
+    },
+    
+    // 移除位置标记
+    removeLocationMarker() {
+      if (this.vehicleLocationMarker) {
+        this.vehicleLocationMarker.setMap(null);
+        this.vehicleLocationMarker = null;
+      }
+    },
+    
+    // 清除车辆标记
+    clearVehicleMarker() {
+      this.vehicleMarkers.forEach(marker => {
+        if (marker.setMap) {
+          marker.setMap(null);
+        } else if (marker.close) {
+          marker.close();
+        }
+      });
+      this.vehicleMarkers = [];
+      
+      this.removeLocationMarker();
+      this.closeVehicleInfoWindow();
+    },
+    
+    // 危化车辆列表
+    vehicleListData() {
+      vehicleList({
+        pageNo: 1,
+        pageSize: 30,
+      }).then(res => {
+        this.vehicleList = res.result.records || [];
+        console.log('车辆列表:', this.vehicleList);
+      }).catch(err => {
+        console.error('获取车辆列表失败:', err);
+      });
+    },
+    
+    // ==================== 原有方法（保持不变） ====================
+    
     formatter: function (num) {
       return num.toFixed(3)
     },
     sbdscdBtn() {
       var url = 'https://wlw.zklsfk.com/admin/index?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiLmsrPmtKXluILlhpzkuJrlhpzmnZHlsYAiLCJleHAiOjE2ODk2MjU0ODUsImlhdCI6MTY4ODEzMDI1NiwianRpIjoiNTcxMTY5MTAtODczZC00ZjI1LWFkNzItZjA2NWU3NmFkNDIwIn0.52iF21xidGFllgfcsSgN-cLlysI0W7Ad8ie48LsV9x4'
-      //跳转1
       window.open(url, "_blank");
     },
     mapTypeSwitch() {
       this.mapTypeFlag = !this.mapTypeFlag
-      if (this.mapTypeFlag == true) {//正常模式
+      if (this.mapTypeFlag == true) {
         this.zoomData = 14
         if (this.isShowLight == undefined) {
           let isShowLight = '1'
@@ -666,7 +891,7 @@ export default {
             this.doGetIndexSummry({index: 0});
           })
         }, 1000)
-      } else {// 地图模式
+      } else {
         this.zoomData = 15
         if (this.isShowLight == undefined) {
           this.initMap(this.zoomData, '1');
@@ -685,7 +910,6 @@ export default {
         this.briefconValue = res.result.project_brief.detailList
         this.pestLightCount = res.result.pestLightCount
         this.stationCount0 = res.result.stationCount[0].stationCount
-        // this.stationCount1 = res.result.stationCount[1].stationCount
         this.climate_env = res.result.climate_env.detailList
         this.water_conser = res.result.water_conser.detailList
         this.roll_info = res.result.roll_info
@@ -716,7 +940,6 @@ export default {
             });
           }
         }
-
       })
     },
     switchBtn(value) {
@@ -735,13 +958,12 @@ export default {
       console.log("ee", e)
     },
     showEchartDialog(item, survItem) {
-      // console.log('showEchartDialog', item, survItem)
       if(survItem === 1){
-        let dom = item.target.closest(".jczbtm_lf"); // 定位元素
+        let dom = item.target.closest(".jczbtm_lf");
         if(!dom){
           dom = item.target.closest(".jcsssj");
         }
-        if (dom) { // 是否是滚动组件的某一行/列
+        if (dom) {
           let item2 = dom.dataset.item
           survItem = dom.dataset.survitem
           if(item2){
@@ -749,8 +971,6 @@ export default {
           }else{
             item2 = null;
           }
-          // console.log('showEchartDialog222', dom,item2, survItem)
-        // :data-item="item" :data-survItem="valist.tylename"
           if(item2 && survItem){
             this.showEchartDialog(item2, survItem)
           }
@@ -768,24 +988,22 @@ export default {
     },
     initMap(zoomnum, isShowLight) {
       let that = this;
-      // let isShowLight = this.isShowLightNumber
       getAllstationAndPestLight(isShowLight).then(res => {
-        // 地图
         that.aMap = new AMap.Map('container', {
           viewMode: '3D',
           resizeEnable: true,
           zoom: zoomnum,
-          center: [112.83100231396601, 36.872032399813556],//默认的地图中心经纬度
+          center: [112.83100231396601, 36.872032399813556],
           mapStyle: 'amap://styles/blue',
-          dragEnable: true,//地图是否可通过鼠标拖拽平移，默认为true。此属性可被setStatus/getStatus 方法控制
+          dragEnable: true,
-          jogEnable: true,//地图是否使用缓动效果，默认值为true。此属性可被setStatus/getStatus 方法控制
+          jogEnable: true,
-          keyboardEnable: true,//地图是否可通过键盘控制,默认为true方向键控制地图平移，"+"和"-"可以控制地图的缩放，Ctrl+“→”顺时针旋转，Ctrl+“←”逆时针旋转。此属性可被setStatus/getStatus 方法控制
+          keyboardEnable: true,
-          animateEnable: true,//地图平移过程中是否使用动画（如调用panBy、panTo、setCenter、setZoomAndCenter等函数，将对地图产生平移操作，是否使用动画平移的效果），默认为true，即使用动画
+          animateEnable: true,
           defaultCursor: 'pointer',
           turboMode: false,
-          showBuildingBlock: true,//设置地图显示3D楼块效果，移动端也可使用。推荐使用。
+          showBuildingBlock: true,
-          showIndoorMap: false, // 隐藏地图自带的室内地图图层
+          showIndoorMap: false,
-          expandZoomRange: true,//是否支持可以扩展最大缩放级别,和zooms属性配合使用设置为true的时候，zooms的最大级别在PC上可以扩大到20级，移动端还是高清19/非高清20
+          expandZoomRange: true,
           forceVector: true,
           scale: (2 , 2.5)
         });
@@ -795,14 +1013,14 @@ export default {
             if (b.type=='soil') return 1;
             if (b.type!='soil') return -1;
             return 0;
-            });//其他类型
+          });
           console.log(Marker,'Marker')
           Marker.map(item => {
             let marker = new AMap.Marker({
               zIndex: item.type == 'soil' ? that.lastZIndex : (that.lastZIndex+1),
               icon: this.urlimg + item.picUrl,
               position: [item.longitude, item.latitude],
-              offset: new AMap.Pixel(item.width, item.height),//偏移量
+              offset: new AMap.Pixel(item.width, item.height),
               title: item.name,
               extData: {
                 ids: item.ids,
@@ -813,21 +1031,20 @@ export default {
                 stationType: item.type
               }
             });
-            if (item.type == 'orient' || item.type == 'livestock' || item.type == 'watershed') {//监测站弹窗
+            if (item.type == 'orient' || item.type == 'livestock' || item.type == 'watershed') {
               marker.on('click', e => {
                 let indexnumb = e.target.getExtData().ids.slice(-1);
                 this.qcdtinfor = this.stationInfoList[indexnumb]
                 this.qcdtdialogTableVisible = true
-                // console.log('livestock or orient', this.qyinformation)
               })
               this.markersOrient.push(marker)
-            } else if(item.type == 'soil'){//土壤弹窗，长期监测站
+            } else if(item.type == 'soil'){
               marker.on('click', e => {
                 this.soilDataId = e.target.getExtData()
                 this.soidShowFlag = true
               })
               this.markersSoil.push(marker);
-            } else if(item.type == '10_flowmeter'){//土壤弹窗，长期监测站
+            } else if(item.type == '10_flowmeter'){
               marker.on('click', e => {
                 this.liulDataId = e.target.getExtData()
                 this.liulShowFlag = true
@@ -839,12 +1056,9 @@ export default {
             marker.setMap(that.aMap);
           })
           this.$forceUpdate();
-          // that.aMap.setFitView(null, false, [100,400,200,200], 16);
           that.aMap.setFitView();
           setTimeout(() => {
             that.aMap.setFitView(null, false, [130, 380, 480, 480], 16);
-            // let temp = that.aMap.getCenter();//矫正显示标点位置在正中心
-            // that.aMap.setZoomAndCenter(that.aMap.getZoom()-1, [temp.lng, temp.lat - 0.15]);
           }, 2000)
         });
       })
@@ -856,7 +1070,6 @@ export default {
           console.log(key)
           tempArray = tempArray.concat(res.result[key])
         })
-        // this.listData = res.result.soilHisSurvData
         tempArray.map(item => {
           if(!item.value){item.value = '0';}
         })
@@ -888,7 +1101,7 @@ export default {
       this.tabsLoading = true;
       this.echartIndex = tab.index - 0;
       if (this.summryAllData) {
-        this.$nextTick(() => { // 加载echarts图
+        this.$nextTick(() => {
           this.initEchartData(this.echartIndex)
         })
       } else {
@@ -898,7 +1111,7 @@ export default {
             let len = this.summryAllData.length;
             this.riverList = [];
             setTimeout(() => {
-              this.$nextTick(() => { // 加载echarts图
+              this.$nextTick(() => {
                 this.initEchartData(this.echartIndex)
               })
             }, 1000);
@@ -906,12 +1119,11 @@ export default {
         })
       }
     },
-    // 折线图数据
     initEchartData(index, times) {
       this.$nextTick(() => {
         let domKey = `myChartDiv${index}`;
         let data = this.summryAllData[index];
-        if (!this.dataTypeEchart) {// 对比数据
+        if (!this.dataTypeEchart) {
           domKey = `myChartDiv2${index}`;
           data = this.riverList[index];
         }
@@ -948,10 +1160,10 @@ export default {
             type: 'line',
             stack: '',
             lineStyle: {
-              color: item.color // 设置线的颜色为红色
+              color: item.color
             },
             itemStyle: {
-              color: item.color // 设置线的颜色为红色
+              color: item.color
             },
             smooth: true,
           }
@@ -972,12 +1184,12 @@ export default {
           toolbox: {},
           legend: {
             padding: [10, 50, 0, 0],
-            x: 'right',      //可设定图例在左、右、居中
+            x: 'right',
-            y: 'top',     //可设定图例在上、下、居中
+            y: 'top',
             data: legendData,
             textStyle: {
-              fontSize: 12,//字体大小
+              fontSize: 12,
-              color: '#ffffff'//字体颜色
+              color: '#ffffff'
             },
           },
           xAxis: {
@@ -986,8 +1198,8 @@ export default {
             data: xAxisData,
             axisLine: {
               lineStyle: {
-                color: '#2295ee', //x轴的颜色
+                color: '#2295ee',
-                width: 1, //轴线的宽度
+                width: 1,
               },
             },
           },
@@ -1000,20 +1212,17 @@ export default {
             },
             axisLine: {
               lineStyle: {
-                color: '#2295ee', //x轴的颜色
+                color: '#2295ee',
-                width: 1, //轴线的宽度
+                width: 1,
               },
             },
           },
           series: seriesData,
         };
-        //为echarts对象加载数据
         this.echartInit[domKey].setOption(optionLine);
       })
-
       this.tabsLoading = false;
     },
-    // 实时时间
     getNowTime() {
       let speed = 1000
       let that = this
@@ -1035,29 +1244,27 @@ export default {
       if (val < 10) return '0' + val
       return val
     },
-    // 跳转页面3
     jumpStationPage(e) {
       let stationCode = e.stationCode
-        this.$router.push({path: '/MywrList', query: {stationCode: stationCode}})
+      this.$router.push({path: '/MywrList', query: {stationCode: stationCode}})
     },
-    // 弹窗退出登录
     handleClosetuichu(done) {
       this.dialogVisible = false
       localStorage.clear()
       this.$router.push({path: '/Login'})
     },
-    // 弹窗个人信息
     infor() {
       var onformation = JSON.parse(window.sessionStorage.getItem('password'));
       if (onformation) {
         this.inforname = onformation.realname
       }
     },
-    qcguanbi() {//全部关闭
+    qcguanbi() {
       this.qcdialogTableVisible = false
       this.qyinfordtdialogTableVisible = false
       this.dialogTableVisible = false
       this.singleEchartDialogShowFlag = false
+      this.clearVehicleMarker();
     },
     screen() {
       let element = document.documentElement;
@@ -1079,7 +1286,6 @@ export default {
         } else if (element.mozRequestFullScreen) {
           element.mozRequestFullScreen();
         } else if (element.msRequestFullscreen) {
-          // IE11
           element.msRequestFullscreen();
         }
       }
@@ -1115,6 +1321,8 @@ export default {
 }
 </script>
 
+
+
 <style scoped>
 @import '@/assets/css/index.css';
 
@@ -1580,7 +1788,7 @@ a:hover {
   color: #fff;
   text-shadow: 0px 2px 0px rgba(4, 49, 52, 0.55);
   font-family: douyuFont;
-  //position: absolute;
+  /* position: absolute; */
   top: 1vw;
   left: 0%;
   display: block;
@@ -1609,7 +1817,7 @@ a:hover {
   font-size: 11px;
   color: #fff;
   text-shadow: 0px 2px 0px rgba(4, 49, 52, 0.55);
-  //font-family: douyuFont;
+  /* font-family: douyuFont; */
   position: absolute;
   top: 1.3vw;
   right: 18px;