fase()实时数据

src/api/goods/car.js

@@ -51,3 +51,33 @@ export function delCar(carId) {
     method: 'delete'
   })
 }
+
+export function read() {
+  return request({
+    url: '/rule/car/read',
+    method: 'post'
+  })
+}
+
+export function open() {
+  return request({
+    // url: 'http://129.211.23.219:9100/manage/open/JAV0VJUJYOTOK9KSY/1',
+    url: 'rule/car/open',
+    method: 'post'
+  })
+}
+
+export function close() {
+  return request({
+    // url: 'http://129.211.23.219:9100/mange/close/JAV0VJUJYOTOK9KSY/1',
+    url: 'rule/car/close',
+    method: 'post'
+  })
+}
+// 9100
+
+
+
+
+
+

src/api/goods/map.js

@@ -26,6 +26,7 @@ export function selectFenceGroupsById(carId) {
   })
 }
 
+// 将坐标传输给电子围栏
 export function getSel(data) {
   return request({
     url: '/rule/map/getSel',
@@ -34,3 +35,26 @@ export function getSel(data) {
   })
 }
 
+//删除电子围栏
+export function deleteFence(fenceId) {
+  return request({
+    url: '/rule/map/deleteFence/' + fenceId,
+    method: 'post'
+  })
+}
+
+//查看详情
+export function queryFence(fenceId) {
+  return request({
+    url: '/rule/map/queryFence/' + fenceId,
+    method: 'post'
+  })
+}
+
+// 修改围栏状态
+export function updateFence(fenceId) {
+  return request({
+    url: '/rule/map/updateFence/' + fenceId,
+    method: 'post'
+  })
+}

src/views/client/car/index.vue

@@ -156,6 +156,11 @@
           <el-button type="text" @click="fence(scope.row.carId)">查看围栏</el-button>
         </span>
       </el-table-column>
+      <el-table-column label="查看实时坐标">
+        <span slot-scope="scope">
+          <el-button type="text" @click="realTime(scope.row.vin)">查看实时坐标</el-button>
+        </span>
+      </el-table-column>
     </el-table>
 
     <pagination
@@ -283,6 +288,10 @@ export default {
     fence(carId) {
       this.$router.push({path: '/client/sever/fence',query:{carId:carId}})
     },
+    realTime(vim) {
+      this.$router.push({path: '/client/sever/random',query:{vim:vim}})
+
+    },
     /** 查询车辆信息列表 */
     getList() {
       this.loading = true;

src/views/client/sever/fence/index.vue

@@ -18,9 +18,16 @@
         </span>
       </el-table-column>
       <el-table-column prop="polygonPoints" label="坐标"></el-table-column>
-      <el-table-column label="删除">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <span slot-scope="scope">
-          <el-button type="text">删除</el-button>
+          <span v-if="scope.row.staut === 'Y'">
+            <el-button type="text" icon="el-icon-edit" @click="query(scope.row.fenceId)">禁止</el-button>
+          </span>
+          <span v-if="scope.row.staut === 'N'">
+            <el-button type="text" icon="el-icon-edit" @click="query(scope.row.fenceId)">启用</el-button>
+          </span>
+          <br>
+          <el-button size="mini" icon="el-icon-delete" type="text" @click="del(scope.row.fenceId)">删除</el-button>
         </span>
       </el-table-column>
     </el-table>
@@ -28,7 +35,7 @@
 </template>
 
 <script>
-import {selectFenceGroups, selectFenceGroupsById} from "@/api/goods/map";
+import {selectFenceGroupsById, deleteFence, updateFence} from "@/api/goods/map";
 // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 // 例如：import 《组件名称》 from '《组件路径》,
 export default {
@@ -48,15 +55,30 @@ export default {
   watch: {},
   // 方法集合",
   methods: {
+    //初始化
     getInfo() {
       selectFenceGroupsById(this.carId).then(res => {
         this.fenceGroups = res.data
         console.log(res.data)
       })
     },
+    //删除
+    del(fenceId) {
+      deleteFence(fenceId).then(res => {
+        this.$message.success(res.data)
+        this.getInfo()
+      })
+    },
+    //前往地图增加围栏
     add(groupsId) {
-      alert(groupsId)
       this.$router.push({path:'/client/sever/map',query:{groupsId:groupsId}})
+    },
+    //修改围栏状态
+    query(fenceId) {
+      updateFence(fenceId).then(res => {
+        this.$message.success(res.data)
+        this.getInfo()
+      })
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）",

src/views/client/sever/map/MapContainer.vue

@@ -5,6 +5,7 @@
     <el-button type="primary" @click="deleRectangle">删除多边形</el-button>
     <el-button type="primary" @click="sel">查看</el-button>
     <div id="amapContainer"></div>
+<!--    <div id="container"></div>-->
   </div>
 </template>
 
@@ -60,7 +61,7 @@ export default {
       this.map = new this.AMap.Map("amapContainer", {
         center: [116.409753, 39.921925],
         zoom: 14,
-        mapStyle: "amap://styles/darkblue",
+        // mapStyle: "amap://styles/darkblue",
         pitch: 80,
         rotation: -15,
         viewMode: '3D',//开启3D视图,默认为关闭

src/views/client/sever/random/index.vue

@@ -0,0 +1,218 @@
+<template>
+  <div>
+    <el-descriptions title="垂直带边框列表" direction="vertical" :column="4" :model="VehicleInfo" border>
+      <el-descriptions-item label="vin">{{VehicleInfo.vin}}</el-descriptions-item>
+      <el-descriptions-item label="时间">{{VehicleInfo.time}}</el-descriptions-item>
+      <el-descriptions-item label="经度">{{VehicleInfo.longitude}}</el-descriptions-item>
+      <el-descriptions-item label="纬度">{{VehicleInfo.latitude}}</el-descriptions-item>
+      <el-descriptions-item label="车速">{{VehicleInfo.speed}}</el-descriptions-item>
+      <el-descriptions-item label="总里程">{{VehicleInfo.totalMileage}}</el-descriptions-item>
+      <el-descriptions-item label="总电压">{{VehicleInfo.totalVoltage}}</el-descriptions-item>
+      <el-descriptions-item label="总电流">{{VehicleInfo.totalCurrent}}</el-descriptions-item>
+<!--      <el-descriptions-item label="绝缘电阻">{{VehicleInfo.insulationResistance}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="档位">{{VehicleInfo.gears}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="加速踏板行程值">{{VehicleInfo.acceleratorPedal}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="制动踏板行程值">{{VehicleInfo.brakePedal}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="燃料消耗率">{{VehicleInfo.fuelConsumptionRate}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="电机控制器温度">{{VehicleInfo.MotorControllerTemperature}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="电机转速">{{VehicleInfo.motorSpeed}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="电机转矩">{{VehicleInfo.motorTorque}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="电机温度">{{VehicleInfo.motorTemperature}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="电机电压">{{VehicleInfo.motorVoltage}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="电机电流">{{VehicleInfo.motorCurrent}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="动力电池剩余电量SOC">{{VehicleInfo.remainingPower}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="当前状态允许的最大反馈功率">{{VehicleInfo.maximumFeedbackPower}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="当前状态允许最大放电功率">{{VehicleInfo.maximumDischargePower}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="BMS自检计数器">{{VehicleInfo.selfTestCounter}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="动力电池充放电电流">{{VehicleInfo.batteryChargeOrDischargeCurrent}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="动力电池负载端总电压V3">{{VehicleInfo.totalVoltageV3}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="单次最大电压">{{VehicleInfo.maximumVoltage}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="单体电池最低电压">{{VehicleInfo.minimumBatteryVoltage}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="单体电池最高温度">{{VehicleInfo.maximumBatteryTemperature}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="单体电池最低温度">{{VehicleInfo.minimumBatteryTemperature}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="动力电池可用容量">{{VehicleInfo.usableBatteryCapacity}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="车辆状态">{{VehicleInfo.vehicleStatus}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="充电状态">{{VehicleInfo.chargeStatus}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="运行状态">{{VehicleInfo.operationalStatus}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="SOC">{{VehicleInfo.soc}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="可充电储能装置工作状态">{{VehicleInfo.energyStorageDeviceWorkingStatus}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="驱动电机状态">{{VehicleInfo.driveMotorStatus}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="定位是否有效">{{VehicleInfo.positioningIsOrNotEffective}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="EAS">{{VehicleInfo.eas}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="PTC">{{VehicleInfo.ptc}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="EPS">{{VehicleInfo.eps}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="ABS">{{VehicleInfo.abs}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="MCU">{{VehicleInfo.mcu}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="动力电池加热状态">{{VehicleInfo.batteryHeatingStatus}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="动力电池当前状态">{{VehicleInfo.batteryCurrentStatus}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="动力电池保温状态">{{VehicleInfo.batteryInsulationStatus}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="DCDC">{{VehicleInfo.dcdc}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="CHG">{{VehicleInfo.chg}}</el-descriptions-item>-->
+<!--      <el-descriptions-item label="校验位">{{VehicleInfo.checkDigit}}</el-descriptions-item>-->
+
+    </el-descriptions>
+    {{vim}}
+  </div>
+</template>
+
+<script>
+import { read, open, close } from "@/api/goods/car";
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+// 例如：import 《组件名称》 from '《组件路径》,
+export default {
+  // import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props: {},
+  data() {
+    // 这里存放数据"
+    return {
+      VehicleInfo: {
+        // vin
+        vin: '',
+        // 时间
+        time: '',
+        // 经度
+        longitude: '',
+        // 纬度
+        latitude: '',
+        // 车速
+        speed: '',
+        // 总里程
+        totalMileage: '',
+        // 总电压
+        totalVoltage: '',
+        // 总电流
+        totalCurrent: '',
+        // 绝缘电阻
+        insulationResistance: '',
+        // 档位
+        gears: '',
+        // 加速踏板行程值
+        acceleratorPedal: '',
+        // 制动踏板行程值
+        brakePedal: '',
+        // 燃料消耗率
+        fuelConsumptionRate: '',
+        // 电机控制器温度
+        MotorControllerTemperature: '',
+        // 电机转速
+        motorSpeed: '',
+        // 电机转矩
+        motorTorque: '',
+        // 电机温度
+        motorTemperature: '',
+        // 电机电压
+        motorVoltage: '',
+        // 电机电流
+        motorCurrent: '',
+        // 动力电池剩余电量SOC
+        remainingPower: '',
+        // 当前状态允许的最大反馈功率
+        maximumFeedbackPower: '',
+        // 当前状态允许最大放电功率
+        maximumDischargePower: '',
+        // BMS自检计数器
+        selfTestCounter: '',
+        // 动力电池充放电电流
+        batteryChargeOrDischargeCurrent: '',
+        // 动力电池负载端总电压V3
+        totalVoltageV3: '',
+        // 单次最大电压
+        maximumVoltage: '',
+        // 单体电池最低电压
+        minimumBatteryVoltage: '',
+        // 单体电池最高温度
+        maximumBatteryTemperature: '',
+        // 单体电池最低温度
+        minimumBatteryTemperature: '',
+        // 动力电池可用容量
+        usableBatteryCapacity: '',
+        // 车辆状态
+        vehicleStatus: '',
+        // 充电状态
+        chargeStatus: '',
+        // 运行状态
+        operationalStatus: '',
+        // SOC
+        soc: '',
+        // 可充电储能装置工作状态
+        energyStorageDeviceWorkingStatus: '',
+        // 驱动电机状态
+        driveMotorStatus: '',
+        // 定位是否有效
+        positioningIsOrNotEffective: '',
+        // EAS
+        eas: '',
+        // PTC
+        ptc: '',
+        // EPS
+        eps: '',
+        // ABS
+        abs: '',
+        // MCU
+        mcu: '',
+        // 动力电池加热状态
+        batteryHeatingStatus: '',
+        // 动力电池当前状态
+        batteryCurrentStatus: '',
+        // 动力电池保温状态
+        batteryInsulationStatus: '',
+        // DCDC
+        dcdc: '',
+        // CHG
+        chg: '',
+        // 校验位
+        checkDigit: '',
+      },
+      vim: this.$route.query.vim
+    }
+  },
+  // 计算属性 类似于data概念",
+  computed: {},
+  // 监控data中的数据变化",
+  watch: {},
+  // 方法集合",
+  methods: {
+    open() {
+      open().then(res =>{
+        console.log(res)
+      })
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.open()
+    this.timer = setInterval(() => {
+      read().then(res => {
+        this.VehicleInfo = res.data
+      })
+    },2000)
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  beforeCreate() {
+  }, // 生命周期 - 创建之前",
+  beforeMount() {
+  }, // 生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, // 生命周期 - 更新之前",
+  updated() {
+  }, // 生命周期 - 更新之后",
+  beforeDestroy() {
+    if (this.timer) {
+      close().then(res => {
+        console.log(res)
+      })
+      clearInterval(this.timer)
+    }
+  }, // 生命周期 - 销毁之前",
+  destroyed() {
+  }, // 生命周期 - 销毁完成",
+  activated() {
+  } // 如果页面有keep-alive缓存功能，这个函数会触发",
+}
+</script>
+<style scoped>
+
+</style>

src/views/client/sever/route/index.vue

@@ -0,0 +1,116 @@
+<!--<template>-->
+<!--  <div class="container">-->
+<!--    <div class="title">实时轨迹</div>-->
+<!--    {{vin}}-->
+<!--    <div id="map" style="width: 100%; height: 500px;"></div>-->
+<!--    <br>-->
+<!--    <br>-->
+<!--    <div class="title">单体电池最低电压</div>-->
+<!--    <div class="value">{{ data.lowestVoltage }}</div>-->
+<!--  </div>-->
+<!--</template>-->
+
+<!--<script>-->
+<!--import { redisList } from "@/api/fence/fence";-->
+
+<!--export default {-->
+<!--  data() {-->
+<!--    return {-->
+<!--      map: null,-->
+<!--      polyline: null,-->
+<!--      carMarker: null,-->
+<!--      vin: this.$route.params.vin,-->
+<!--      intervalId: null,-->
+<!--      data: {},-->
+<!--      lastPosition: null, // 添加一个变量来存储上一个位置-->
+<!--    };-->
+<!--  },-->
+<!--  created() {-->
+<!--    this.intervalId = setInterval(this.fetchData, 1000);-->
+<!--    this.fetchData();-->
+<!--  },-->
+<!--  methods: {-->
+<!--    fetchData() {-->
+<!--      console.log(this.vin);-->
+<!--      redisList(this.vin)-->
+<!--        .then(res => {-->
+<!--          console.log("res:{}", res);-->
+<!--          this.data = res.data;-->
+<!--          this.updateTrajectory();-->
+<!--        })-->
+<!--        .catch(err => {-->
+<!--          console.error("Error fetching data:", err);-->
+<!--        });-->
+<!--    },-->
+<!--    initMap() {-->
+<!--      this.map = new AMap.Map('map', {-->
+<!--        center: [116.397428, 39.90923],-->
+<!--        zoom: 13,-->
+<!--      });-->
+
+<!--      this.polyline = new AMap.Polyline({-->
+<!--        map: this.map,-->
+<!--        path: [],-->
+<!--        strokeColor: "#FF0000",-->
+<!--        strokeWeight: 5,-->
+<!--      });-->
+
+<!--      const carIcon = new AMap.Icon({-->
+<!--        size: new AMap.Size(40, 50),-->
+<!--        image: 'https://webapi.amap.com/images/car.png',-->
+<!--        imageSize: new AMap.Size(30, 15)-->
+<!--      });-->
+
+<!--      this.carMarker = new AMap.Marker({-->
+<!--        icon: carIcon,-->
+<!--        offset: new AMap.Pixel(-20, -25),-->
+<!--        autoRotation: true,-->
+<!--      });-->
+
+<!--      this.carMarker.setMap(this.map);-->
+<!--    },-->
+<!--    updateTrajectory() {-->
+<!--      if (this.data.latitude && this.data.longitude) {-->
+<!--        const newPoint = [this.data.longitude, this.data.latitude];-->
+<!--        const path = this.polyline.getPath();-->
+<!--        path.push(newPoint);-->
+<!--        this.polyline.setPath(path);-->
+<!--        this.map.setCenter(newPoint);-->
+
+<!--        // 计算方位角并更新小车图标的旋转角度-->
+<!--        if (this.lastPosition) {-->
+<!--          const angle = this.calculateAngle(this.lastPosition)-->
+<!--          this.calculateAngle(this.lastPosition, newPoint);-->
+<!--          this.carMarker.setAngle(angle);-->
+<!--        }-->
+
+<!--        this.carMarker.setPosition(newPoint);-->
+<!--        this.lastPosition = newPoint; // 更新上一个位置-->
+<!--      } else {-->
+<!--        console.error('Invalid latitude or longitude data:', this.data);-->
+<!--      }-->
+<!--    },-->
+<!--    calculateAngle(start, end) {-->
+<!--      const [startLng, startLat] = start;-->
+<!--      const [endLng, endLat] = end;-->
+
+<!--      const deltaLng = endLng - startLng;-->
+<!--      const deltaLat = endLat - startLat;-->
+
+<!--      const angle = Math.atan2(deltaLat, deltaLng) * (180 / Math.PI);-->
+<!--      return angle;-->
+<!--    }-->
+<!--  },-->
+<!--  mounted() {-->
+<!--    this.initMap();-->
+<!--  },-->
+<!--  beforeDestroy() {-->
+<!--    if (this.intervalId) {-->
+<!--      clearInterval(this.intervalId);-->
+<!--    }-->
+<!--    if (this.map) {-->
+<!--      this.map.destroy();-->
+<!--    }-->
+<!--  },-->
+<!--};-->
+<!--</script>-->