内容提交

longyvfengyun

2024-03-28 e688c5abc5f87c3ce00afb094376053643fe3857

 src/views/home.vue

@@ -1,10 +1,10 @@
<script setup>
import {computed, nextTick, onMounted, reactive, ref} from 'vue';
import {nextTick, onMounted, reactive, ref} from 'vue';
import {
   BaiduMap,
   BmInfoWindow
} from "vue-baidu-map-3x";
import {View, PointLayer, IconLayer, TextLayer} from "mapvgl";
import {View, IconLayer, TextLayer} from "mapvgl";
import mapJson from "@/assets/mapJson/map_config";
import {FullScreen} from "@element-plus/icons-vue";
import BoxComponent from "@/components/boxComponent.vue";
@@ -13,6 +13,7 @@
import getRadiusBarOption from "@/components/echarts/options/radiusBar";
import getHorizontalTechnologyOption from "@/components/echarts/options/horizontalTechnologyBar";
import carPng from "@/assets/images/car.png";
import outlineCarPng from "@/assets/images/outline_car.png";
import ChartBox from "@/components/chartBox.vue";
const isFullScreen = ref(false);
const mapStyle = ref({styleJson: mapJson});
@@ -45,7 +46,8 @@
      lon: 0,
      lat: 0,
      createTime: "",
      updateTime: ""
      updateTime: "",
      online: 0
   },
});

@@ -89,7 +91,6 @@
      selectedColor: '#ff0000', // 选中项颜色
      autoSelect: true, // 根据鼠标位置来自动设置选中项
      onClick: (e)=>{
         console.log(e);
         if(e.dataIndex !== -1) {
            const point = e.dataItem.geometry.coordinates;
            const info = e.dataItem.properties.info;
@@ -102,22 +103,14 @@
            });
         }
      },
      onDblClick: e => {
         console.log('double click', e);
      },
      onRightClick: e => {
         console.log('right click', e);
      }
   });

   view.addLayer(iconLayer.value);

   searchCarPos();
}

const searchCarPos = async ()=>{
   const res = await getCarPosList();
   console.log(res);
   let data = res.map(item=>{
      return {
         geometry: {
@@ -125,16 +118,14 @@
            coordinates: [item.lon, item.lat]
         },
         properties: {
            icon: carPng,
            icon: item.online === 1?carPng:outlineCarPng,
            text: item.boxName,
            info: item
         }
      }
   });

   textLayer.value.setData(data);
   iconLayer.value.setData(data);

}

const infoWinOpen = ()=>{}
@@ -142,27 +133,138 @@
   infoWindow.show = false;
}

import {
   recentDaysCarModule,
   totalCarNumModule
} from "@/views/moudle/carInfo/carInfoModule";

const {
   todayCarNum,
   getRecentDaysCarNum
} = recentDaysCarModule();

const boxGaugeOption = getGaugeOption(0, 2000, "当前在线汽车数");
const boxBarOption = getRadiusBarOption();
const searchRecentDaysCarNum = async ()=>{
   const data = await getRecentDaysCarNum(7);
   boxBarOption.series[0].name = "在线车辆数："
   boxBarOption.series[0].data = data.map(item=>{
      return [new Date(item.date).format("MM-dd"), item.value];
   });
   boxBar.value.setOption(boxBarOption);
   boxGauge.value.setOption(getGaugeOption(todayCarNum.value, 2000, "当前在线汽车数"));
}

const {
   totalCarNum,
   getTotalCarNum
} = totalCarNumModule();


import {
   recentDaysBattModule,
   totalBattNumModule
} from "@/views/moudle/battShow/battInfo"

const battBarOption = getRadiusBarOption();
const battGaugeOption = getGaugeOption(1, 500, "今日新增电池数");

const {
   todayBattNum,
   getRecentDaysBattNum
} = recentDaysBattModule();
const searchRecentDaysBattNum = async ()=>{
   const data = await getRecentDaysBattNum(7);
   battBarOption.series[0].name = "新增电池组数：";
   battBarOption.series[0].data = data.map(item=>{
      return [new Date(item.date).format("MM-dd"), item.value];
   });
   battBar.value.setOption(battBarOption);
   battGauge.value.setOption(getGaugeOption(todayBattNum.value, 500, "今日新增电池数"));
}

const {
   totalBattNum,
   getTotalBattNum
} = totalBattNumModule();


import {
   recentDaysVideoModule,
   totalVideoNumModule
} from "@/views/moudle/videoInf/videoInf";

const videoGaugeOption = getGaugeOption(1, 500, "今日新增摄像头数");
const videoBarOption = getRadiusBarOption();

const {
   todayVideoNum,
   getRecentDaysVideoNum
} = recentDaysVideoModule();
const searchRecentDaysVideoNum = async ()=>{
   const data = await getRecentDaysVideoNum(7);
   videoBarOption.series[0].name = "新增摄像头数：";
   videoBarOption.series[0].data = data.map(item=>{
      return [new Date(item.date).format("MM-dd"), item.value];
   });
   videoBar.value.setOption(videoBarOption);
   videoGauge.value.setOption(getGaugeOption(todayVideoNum.value, 500, "今日新增摄像头数"));
}

const {
   totalVideoNum,
   getTotalVideoNum
} = totalVideoNumModule();


import {
   bmsStaticAlarmModule
} from "@/views/moudle/bmsInf/bmsInf";

const {
   getBmsStaticAlarm
} = bmsStaticAlarmModule();

let alarmBarOption = getHorizontalTechnologyOption();
const searchBmsStaticAlarm = async ()=>{
   let res = await getBmsStaticAlarm();

   alarmBarOption = getHorizontalTechnologyOption(res.map(item=>{
      return {
         name: item.bmsAlarmName,
         value: item.num
      }
   }));
   alarmBar.value.setOption(alarmBarOption);
}

/**
 * 查询车辆，电池，摄像头，告警的图表数据
 */
const searchEchartsData = ()=>{
   searchRecentDaysCarNum();
   getTotalCarNum();

   searchRecentDaysVideoNum();
   getTotalVideoNum();

   searchRecentDaysBattNum();
   getTotalBattNum();

   searchBmsStaticAlarm();
}

onMounted(()=>{

   const boxGaugeOption = getGaugeOption(10, 90, "今日在线汽车数");
   boxGauge.value.setOption(boxGaugeOption);

   const boxBarOption = getRadiusBarOption();
   boxBar.value.setOption(boxBarOption);

   const videoGaugeOption = getGaugeOption(1, 500, "今日在线摄像头数");
   videoGauge.value.setOption(videoGaugeOption);

   const videoBarOption = getRadiusBarOption();
   videoBar.value.setOption(videoBarOption);

   const battGaugeOption = getGaugeOption(1, 500, "今日在线电池数");
   battGauge.value.setOption(videoGaugeOption);
   battGauge.value.setOption(battGaugeOption);
   battBar.value.setOption(battBarOption);
   searchEchartsData();

   const battBarOption = getRadiusBarOption();
   battBar.value.setOption(videoBarOption);

   const alarmBarOption = getHorizontalTechnologyOption();
   alarmBar.value.setOption(alarmBarOption);
});
</script>
@@ -191,12 +293,12 @@
                              <el-row>
                                 <el-col :span="12">
                                    <div class="box-value-wrapper">
                                       <div class="text-content">今日在线汽车数:</div>
                                       <div class="text-value">0</div>
                                       <div class="text-content">当前在线汽车数:</div>
                                       <div class="text-value">{{todayCarNum}}</div>
                                    </div>
                                    <div class="box-value-wrapper">
                                       <div class="text-content">汽车总数:</div>
                                       <div class="text-value">0</div>
                                       <div class="text-value">{{totalCarNum}}</div>
                                    </div>
                                 </el-col>
                                 <el-col :span="12">
@@ -221,12 +323,12 @@
                              <el-row>
                                 <el-col :span="12">
                                    <div class="box-value-wrapper">
                                       <div class="text-content">今日在线摄像头数:</div>
                                       <div class="text-value">0</div>
                                       <div class="text-content">今日新增摄像头数:</div>
                                       <div class="text-value">{{todayVideoNum}}</div>
                                    </div>
                                    <div class="box-value-wrapper">
                                       <div class="text-content">摄像头总数:</div>
                                       <div class="text-value">0</div>
                                       <div class="text-value">{{ totalVideoNum }}</div>
                                    </div>
                                 </el-col>
                                 <el-col :span="12">
@@ -237,7 +339,7 @@
                              </el-row>
                           </div>
                           <div class="content-inner-body">
                              <chart-box title="最近7天在线摄像头数">
                              <chart-box title="最近7天新增摄像头数">
                                 <hdw-chart ref="videoBar"></hdw-chart>
                              </chart-box>
                           </div>
@@ -255,12 +357,12 @@
                              <el-row>
                                 <el-col :span="12">
                                    <div class="box-value-wrapper">
                                       <div class="text-content">今日在电池数:</div>
                                       <div class="text-value">0</div>
                                       <div class="text-content">今日新增电池数:</div>
                                       <div class="text-value">{{todayBattNum}}</div>
                                    </div>
                                    <div class="box-value-wrapper">
                                       <div class="text-content">电池总数:</div>
                                       <div class="text-value">0</div>
                                       <div class="text-value">{{totalBattNum}}</div>
                                    </div>
                                 </el-col>
                                 <el-col :span="12">
@@ -271,7 +373,7 @@
                              </el-row>
                           </div>
                           <div class="content-inner-body">
                              <chart-box title="最近7天在线电池数">
                              <chart-box title="最近7天新增电池数">
                                 <hdw-chart ref="battBar"></hdw-chart>
                              </chart-box>
                           </div>
@@ -298,9 +400,7 @@
                  <car-info-list :infos="infoWindow.content"></car-info-list>
               </bm-info-window>
            </baidu-map>
            {{infoWindow}}
         </div>
         {{infoWindow}}
      </div>

   </div>