首页对接数据

longyvfengyun

2023-11-16 b537c7bccbcc20644902ad6f0e309bbe9a6eda24

首页对接数据

 src/components/echarts/options/radiusBar.js

@@ -7,7 +7,7 @@
    grid: {
      top: '15%',
      right: '3%',
      left: '8%',
      left: '10%',
      bottom: '12%'
    },
  };
@@ -28,6 +28,7 @@
        }
      },
      axisLabel: {
        interval: 0,
        margin: 10,
        color: '#e2e9ff',
        textStyle: {

 src/util/getRecentDay.js

New file
@@ -0,0 +1,30 @@
function getRecentDay(dayNum) {
  let days = [];
  for(let i=0; i<24*dayNum;i+=24){
    let dateItem=new Date(new Date().getTime() - i * 60 * 60 * 1000);    //使用当天时间戳减去以前的时间毫秒（小时*分*秒*毫秒）
    let y = dateItem.getFullYear();    //获取年份
    let m = dateItem.getMonth() + 1;    //获取月份js月份从0开始，需要+1
    let d= dateItem.getDate();    //获取日期
    m = addDate(m);    //给为单数的月份补零
    d = addDate(d);    //给为单数的日期补零
    let valueItem= y + '-' + m + '-' + d;    //组合
    days.push(valueItem);    //添加至数组
  }

  return days.reverse().map(item=>{
    return {
      date: item,
      value: 0
    }
  });
}

//给日期加0
function addDate(time) {
  if (time.toString().length === 1) {
    time = '0' + time.toString();
  }
  return time;
}

export default getRecentDay;

 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";
@@ -89,7 +89,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 +101,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: {
@@ -131,10 +122,8 @@
            }
        }
    });

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

}

const infoWinOpen = ()=>{}
@@ -142,25 +131,114 @@
    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(()=>{

    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);

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

    const alarmBarOption = getHorizontalTechnologyOption();
    alarmBar.value.setOption(alarmBarOption);
@@ -191,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-value">{{totalCarNum}}</div>
                                                </div>
                                            </el-col>
                                            <el-col :span="12">
@@ -221,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">
@@ -237,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>
@@ -255,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">
@@ -271,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>
@@ -298,9 +376,7 @@
                        <car-info-list :infos="infoWindow.content"></car-info-list>
                    </bm-info-window>
                </baidu-map>
                {{infoWindow}}
            </div>
            {{infoWindow}}
        </div>

    </div>

 src/views/moudle/battShow/apis.js

@@ -23,3 +23,25 @@
  });
}

/**
 * 统计最近7日新增的电池组
 * @return {Promise<axios.AxiosResponse<any>> | *}
 */
export const searchStatisticCreate = ()=>{
  return axios({
    method: "GET",
    url: "/monitor/bmsAlamMonitor/statisticCreate",
  });
}

/**
 * 统计电池组总数
 * @return {Promise<axios.AxiosResponse<any>> | *}
 */
export const searchStatisticSum = ()=>{
  return axios({
    method: "GET",
    url: "/monitor/bmsAlamMonitor/statisticSum",
  });
}


 src/views/moudle/battShow/battInfo.js

New file
@@ -0,0 +1,85 @@
import {ref} from "vue"
import {searchStatisticCreate, searchStatisticSum} from "./apis";
import getRecentDay from "@/util/getRecentDay";

/**
 * 最近几天新增电池数
 * @return {{getRecentDaysBattNum: (function(*): Promise<*[]>), todayBattNum: Ref<UnwrapRef<number>>}}
 */
export const recentDaysBattModule = ()=>{
  const todayBattNum = ref(0);
  /**
   * 查询最近几天电池新增数
   * @param num 天数
   * @return {Promise<*[]>}
   */
  const getRecentDaysBattNum = async (num)=>{
    try {
      const res = await searchStatisticCreate();
      const rs = res.data;
      let data = [];
      if(rs.code === 1) {
        data = rs.data;
      }
      let recentDays = getRecentDay(num);
      for(let i=0; i<recentDays.length; i++) {
        let itemDay = recentDays[i];
        for(let j=0; j<data.length; j++) {
          let item = data[j];
          if(itemDay.date === item.date) {
            itemDay.value = item.num;
            break;
          }
        }
      }
      //recentDays[recentDays.length -1].value = 100;
      // 设置当天的在线数
      if(recentDays.length !== 0) {
        todayBattNum.value = recentDays[recentDays.length -1].value;
      }
      return recentDays;
    }catch (e) {
      console.log(e);
      return []
    }
  }

  return {
    todayBattNum,
    getRecentDaysBattNum
  }

}

/**
 * 车辆总数
 * @return {{getTotalBattNum: (function(): Promise<number>), totalBattNum: *}}
 */
export const totalBattNumModule = ()=>{
  const totalBattNum = ref(0);

  /**
   * 获取车辆的总数
   * @return {Promise<number>}
   */
  const getTotalBattNum = async ()=>{
    try {
      const res = await searchStatisticSum();
      const rs = res.data;
      let num = 0;
      if(rs.code === 1) {
        num = rs.data;
      }
      totalBattNum.value = num;
      return num;
    }catch (e) {
      console.log(e);
      return 0;
    }
  }

  return {
    totalBattNum,
    getTotalBattNum
  };
}

 src/views/moudle/carInfo/apis.js

@@ -10,3 +10,27 @@
    url: "/monitor/boxGPS/select",
  });
}

/**
 * 统计最近7日在线的车辆
 * @return {Promise<axios.AxiosResponse<any>> | *}
 */
export const searchStatisticCreate = ()=>{
  return axios({
    method: "GET",
    url: "/monitor/box/statisticCreate",
  });
}

/**
 * 统计车辆总数
 * @return {Promise<axios.AxiosResponse<any>> | *}
 */
export const searchStatisticSum = ()=>{
  return axios({
    method: "GET",
    url: "/monitor/box/statisticSum",
  });
}



 src/views/moudle/carInfo/carInfoModule.js

New file
@@ -0,0 +1,84 @@
import {ref} from "vue"
import {searchStatisticCreate, searchStatisticSum} from "@/views/moudle/carInfo/apis";
import getRecentDay from "@/util/getRecentDay";

/**
 * 最近几天在线车辆数
 * @return {{todayCarNum: Ref<UnwrapRef<number>>, getRecentDaysCarNum: (function(*): Promise<*[]>)}}
 */
export const recentDaysCarModule = ()=>{
  const todayCarNum = ref(0);
  /**
   * 查询最近几天车辆在线数
   * @param num 天数
   * @return {Promise<*[]>}
   */
  const getRecentDaysCarNum = async (num)=>{
    try {
      const res = await searchStatisticCreate();
      const rs = res.data;
      let data = [];
      if(rs.code === 1) {
        data = rs.data;
      }
      let recentDays = getRecentDay(num);
      for(let i=0; i<recentDays.length; i++) {
        let itemDay = recentDays[i];
        for(let j=0; j<data.length; j++) {
          let item = data[j];
          if(itemDay.date === item.date) {
            itemDay.value = item.num;
            break;
          }
        }
      }
      // 设置当天的在线数
      if(recentDays.length !== 0) {
        todayCarNum.value = recentDays[recentDays.length -1].value;
      }
      return recentDays;
    }catch (e) {
      console.log(e);
      return []
    }
  }

  return {
    todayCarNum,
    getRecentDaysCarNum
  }

}

/**
 * 车辆总数
 * @return {{getTotalCarNum: (function(): Promise<number>), totalCarNum: Ref<UnwrapRef<number>>}}
 */
export const totalCarNumModule = ()=>{
  const totalCarNum = ref(0);

  /**
   * 获取车辆的总数
   * @return {Promise<number>}
   */
  const getTotalCarNum = async ()=>{
    try {
      const res = await searchStatisticSum();
      const rs = res.data;
      let num = 0;
      if(rs.code === 1) {
        num = rs.data;
      }
      totalCarNum.value = num;
      return num;
    }catch (e) {
      console.log(e);
      return 0;
    }
  }

  return {
    totalCarNum,
    getTotalCarNum
  };
}

 src/views/moudle/carInfo/carPosModule.js

@@ -7,7 +7,7 @@
  let timer = 0;
  /**
   * 获取汽车的定位信息
   * @return {Promise<*[]>}
   * @return {Promise<[]>}
   */
  const getCarPosList = async ()=>{
    try{

 src/views/moudle/videoInf/apis.js

New file
@@ -0,0 +1,23 @@
import axios from "@/assets/js/axios";

/**
 * 统计最近7日新增的摄像头
 * @return {Promise<axios.AxiosResponse<any>> | *}
 */
export const searchStatisticCreate = ()=>{
  return axios({
    method: "GET",
    url: "/monitor/cameraDevice/statisticCreate",
  });
}

/**
 * 统计摄像头总数
 * @return {Promise<axios.AxiosResponse<any>> | *}
 */
export const searchStatisticSum = ()=>{
  return axios({
    method: "GET",
    url: "/monitor/cameraDevice/statisticSum",
  });
}

 src/views/moudle/videoInf/videoInf.js

New file
@@ -0,0 +1,85 @@
import {ref} from "vue"
import {searchStatisticCreate, searchStatisticSum} from "./apis";
import getRecentDay from "@/util/getRecentDay";

/**
 * 最近几天新增摄像头数
 * @return {{getRecentDaysVideoNum: (function(*): Promise<*[]>), todayVideoNum: Ref<UnwrapRef<number>>}}
 */
export const recentDaysVideoModule = ()=>{
  const todayVideoNum = ref(0);
  /**
   * 查询最近几天摄像头新增数
   * @param num 天数
   * @return {Promise<*[]>}
   */
  const getRecentDaysVideoNum = async (num)=>{
    try {
      const res = await searchStatisticCreate();
      const rs = res.data;
      let data = [];
      if(rs.code === 1) {
        data = rs.data;
      }
      let recentDays = getRecentDay(num);
      for(let i=0; i<recentDays.length; i++) {
        let itemDay = recentDays[i];
        for(let j=0; j<data.length; j++) {
          let item = data[j];
          if(itemDay.date === item.date) {
            itemDay.value = item.num;
            break;
          }
        }
      }
      //recentDays[recentDays.length -1].value = 100;
      // 设置当天的在线数
      if(recentDays.length !== 0) {
        todayVideoNum.value = recentDays[recentDays.length -1].value;
      }
      return recentDays;
    }catch (e) {
      console.log(e);
      return []
    }
  }

  return {
    todayVideoNum,
    getRecentDaysVideoNum
  }

}

/**
 * 摄像头总数
 * @return {{totalVideoNum: Ref<UnwrapRef<number>>, getTotalVideoNum: (function(): Promise<number>)}}
 */
export const totalVideoNumModule = ()=>{
  const totalVideoNum = ref(0);

  /**
   * 获取摄像头的总数
   * @return {Promise<number>}
   */
  const getTotalVideoNum = async ()=>{
    try {
      const res = await searchStatisticSum();
      const rs = res.data;
      let num = 0;
      if(rs.code === 1) {
        num = rs.data;
      }
      totalVideoNum.value = num;
      return num;
    }catch (e) {
      console.log(e);
      return 0;
    }
  }

  return {
    totalVideoNum,
    getTotalVideoNum
  };
}