首页对接数据

longyvfengyun

2023-11-16 b537c7bccbcc20644902ad6f0e309bbe9a6eda24

 src/views/home.vue

@@ -1,6 +1,10 @@
<script setup>
import {onMounted, ref} from 'vue';
import {BaiduMap} from "vue-baidu-map-3x";
import {nextTick, onMounted, reactive, ref} from 'vue';
import {
   BaiduMap,
   BmInfoWindow
} from "vue-baidu-map-3x";
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";
@@ -8,6 +12,7 @@
import getGaugeOption from "@/components/echarts/options/gauge";
import getRadiusBarOption from "@/components/echarts/options/radiusBar";
import getHorizontalTechnologyOption from "@/components/echarts/options/horizontalTechnologyBar";
import carPng from "@/assets/images/car.png";
import ChartBox from "@/components/chartBox.vue";
const isFullScreen = ref(false);
const mapStyle = ref({styleJson: mapJson});
@@ -25,24 +30,215 @@
   isFullScreen.value = !isFullScreen.value;
}

onMounted(()=>{
   const boxGaugeOption = getGaugeOption(10, 90, "今日在线盒子数");
   boxGauge.value.setOption(boxGaugeOption);
import carPosModule from "@/views/moudle/carInfo/carPosModule";
import CarInfoList from "@/components/carInfoList.vue";

   const boxBarOption = getRadiusBarOption();
const {
   getCarPosList
} = carPosModule();

const infoWindow = reactive({
   show: false,
   content: {
      boxName: "",
      boxSn: "",
      lon: 0,
      lat: 0,
      createTime: "",
      updateTime: ""
   },
});

const mapPosition = {
   lng: 116.404,
   lat: 39.915
};
const iconLayer = ref({});
const textLayer = ref({});

const handleMapReady = ({map})=>{
   let view = new View({
      map: map
   });

   textLayer.value = new TextLayer({
      enablePicked: false,
      autoSelect: false,
      selectedColor: '#f00', // 选中项颜色
      color: '#fff',
      offset: [0, 30],
      lineWidth: 3, // 文字粗细，在设置描边时才有效
      //textMaxWidth: 500, // 文字最大宽度，超过则换行
      textMaxHeight: 50,
      textAlign: 'center', // 文字对齐方式，支持'center'、'left'
      lineHeight: 24,
      stroke: {
         color: '#000'
      }
   });

   view.addLayer(textLayer.value);

   iconLayer.value = new IconLayer({
      width: 40,
      height: 29,
      opacity: 0.8,
      icon: carPng,
      selectedIndex: -1, // 选中项
      enablePicked: true, // 是否可以拾取
      selectedColor: '#ff0000', // 选中项颜色
      autoSelect: true, // 根据鼠标位置来自动设置选中项
      onClick: (e)=>{
         if(e.dataIndex !== -1) {
            const point = e.dataItem.geometry.coordinates;
            const info = e.dataItem.properties.info;
            infoWindow.show = false;
            nextTick(()=>{
               infoWindow.show = true;
               infoWindow.content = info;
               mapPosition.lng = point[0];
               mapPosition.lat = point[1];
            });
         }
      },
   });

   view.addLayer(iconLayer.value);
   searchCarPos();
}

const searchCarPos = async ()=>{
   const res = await getCarPosList();
   let data = res.map(item=>{
      return {
         geometry: {
            type: 'Point',
            coordinates: [item.lon, item.lat]
         },
         properties: {
            icon: carPng,
            text: item.boxName,
            info: item
         }
      }
   });
   textLayer.value.setData(data);
   iconLayer.value.setData(data);
}

const infoWinOpen = ()=>{}
const infoWinClose = ()=>{
   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();

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

   searchRecentDaysVideoNum();
   getTotalVideoNum();

   searchRecentDaysBattNum();
   getTotalBattNum();
}

onMounted(()=>{
   boxGauge.value.setOption(boxGaugeOption);
   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);

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

   const alarmBarOption = getHorizontalTechnologyOption();
   alarmBar.value.setOption(alarmBarOption);
@@ -64,9 +260,6 @@
            </div>
         </div>
         <div class="baidu-map-content">
            <div class="baidu-map-tools-right" v-if="!isFullScreen">
               <el-button type="primary" @click="changeScreenState" :icon="FullScreen" />
            </div>
            <div class="baidu-map-float">
               <div class="box-container">
                  <div class="box-container-top">
@@ -76,12 +269,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-content">汽车总数:</div>
                                       <div class="text-value">{{totalCarNum}}</div>
                                    </div>
                                 </el-col>
                                 <el-col :span="12">
@@ -92,7 +285,7 @@
                              </el-row>
                           </div>
                           <div class="content-inner-body">
                              <chart-box title="最近7天在线盒子数">
                              <chart-box title="最近7天在线汽车数">
                                 <hdw-chart ref="boxBar"></hdw-chart>
                              </chart-box>
                           </div>
@@ -106,12 +299,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">
@@ -122,7 +315,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>
@@ -140,12 +333,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">
@@ -156,7 +349,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>
@@ -173,8 +366,15 @@
            <baidu-map
               class="map-container"
               ak="4GdR40xNyYI2w2XiIgYgS4TdiS3c197C"
               v="3.0" type="API"
               :center="{lng: 114.3202, lat: 30.59}" :zoom="15" :scroll-wheel-zoom="true" :mapStyle="mapStyle">
               v="3.0"
               type="WebGL"
               :center="{lng: 114.3202, lat: 30.59}"
               :zoom="5"
               :scroll-wheel-zoom="true"
               :mapStyle="mapStyle" @ready="handleMapReady">
               <bm-info-window :width="300" :position="mapPosition" title="车辆信息" :show="infoWindow.show" @close="infoWinClose" @open="infoWinOpen">
                  <car-info-list :infos="infoWindow.content"></car-info-list>
               </bm-info-window>
            </baidu-map>
         </div>
      </div>