内容提交

longyvfengyun

2023-11-11 f9af1703cf856d8d824255025701fc76d5fc0e83

内容提交

 src/components/echarts/options/getNormalBar.js

New file
@@ -0,0 +1,7 @@
const getNormalBar = ()=>{
  return {

  }
}

export default getNormalBar;

 src/components/echarts/options/gradientLine.js

@@ -1,5 +1,10 @@
import * as echarts from 'echarts';
const getGradientLineOption = ()=> {
const getGradientLineOption = (data)=> {
  const defaultOption = {
    minRatio: 0,
    maxRatio: 1.2
  };
  const option = {...defaultOption, ...data};
  return {
    tooltip: {
      trigger: "item",
@@ -17,46 +22,52 @@
    xAxis: {
      type: 'category',
      boundaryGap: true,
      axisLine: { //坐标轴轴线相关设置。数学上的x轴
        show: true,
      axisLine: {
        lineStyle: {
          color: '#f9f9f9'
        },
          color: 'rgba(255,255,255,0.12)'
        }
      },
      axisLabel: { //坐标轴刻度标签的相关设置
      axisLabel: {
        margin: 10,
        color: '#e2e9ff',
        textStyle: {
          color: '#d1e6eb',
          margin: 15,
          fontSize: 14
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: 'value',
      min: 0,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#0a3256'
      min(data) {
        const min =data.min;
        if(isNaN(min)) {
          return 0;
        }else {
          return min * option.minRatio;
        }
      },
      max(data) {
        const max = data.max;
        if(isNaN(max)) {
          return 1;
        }else {
          return max * option.maxRatio;
        }
      },
      axisLabel: {
        formatter: '{value}',
        color: '#e2e9ff',
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#f9f9f9'
        },
          color: 'rgba(255,255,255,0.12)'
        }
      },
      axisLabel: {
        margin: 20,
        textStyle: {
          color: '#d1e6eb',
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.12)'
        }
      }
    },
    series: [
      {

 src/components/echarts/options/normalLine.js

@@ -1,4 +1,9 @@
const getNormalLine = ()=>{
const getNormalLine = (data)=>{
  const defaultOption = {
    minRatio: 0,
    maxRatio: 1.2
  };
  const option = {...defaultOption, ...data};
  return {
    title: {
      text: ''
@@ -15,85 +20,56 @@
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      axisLine: { //坐标轴轴线相关设置。数学上的x轴
        show: true,
      axisLine: {
        lineStyle: {
          color: '#f9f9f9'
        },
          color: 'rgba(255,255,255,0.12)'
        }
      },
      axisLabel: { //坐标轴刻度标签的相关设置
      axisLabel: {
        margin: 10,
        color: '#e2e9ff',
        textStyle: {
          color: '#d1e6eb',
          margin: 15,
          fontSize: 14
        },
      },
      axisTick: {
        show: false,
      },
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: '#0a3256'
      min(data) {
        const min =data.min;
        if(isNaN(min)) {
          return 0;
        }else {
          return min * option.minRatio;
        }
      },
      max(data) {
        const max = data.max;
        if(isNaN(max)) {
          return 1;
        }else {
          return max * option.maxRatio;
        }
      },
      axisLabel: {
        formatter: '{value}',
        color: '#e2e9ff',
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.12)'
        }
      },
      axisLabel: {
        margin: 20,
        textStyle: {
          color: '#d1e6eb',

        },
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: '电池组1',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '电池组2',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: '电池组3',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: '电池组5',
        type: 'line',
        stack: 'Total',
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: 'Search Engine',
        type: 'line',
        stack: 'Total',
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.12)'
        }
      }
    ]
    },
    series: []
  }
}
export default getNormalLine;
export default getNormalLine;

 src/components/echarts/options/radiusBar.js

@@ -1,6 +1,17 @@
import * as echarts from "echarts";

const getRadiusBarOption = ()=>{
const getRadiusBarOption = (data)=>{
  const defaultOption = {
    minRatio: 0,
    maxRatio: 1.2,
    grid: {
      top: '15%',
      right: '3%',
      left: '8%',
      bottom: '12%'
    },
  };
  const option = {...defaultOption, ...data};
  return {
    tooltip: {
      trigger: 'axis',
@@ -8,15 +19,9 @@
        type: 'shadow'
      }
    },
    grid: {
      top: '15%',
      right: '3%',
      left: '10%',
      bottom: '12%'
    },
    grid: option.grid,
    xAxis: [{
      type: 'category',
      data: ['9.21', '9.22', '9.23', '9.24', '9.25', '9.26', '9.27'],
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.12)'
@@ -31,12 +36,31 @@
      },
    }],
    yAxis: [{
      min(data) {
        const min =data.min;
        if(isNaN(min)) {
          return 0;
        }else {
          return min * option.minRatio;
        }
      },
      max(data) {
        const max = data.max;
        if(isNaN(max)) {
          return 1;
        }else {
          return max * option.maxRatio;
        }
      },
      axisLabel: {
        formatter: '{value}',
        color: '#e2e9ff',
      },
      axisLine: {
        show: false
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.12)'
        }
      },
      splitLine: {
        lineStyle: {
@@ -46,7 +70,8 @@
    }],
    series: [{
      type: 'bar',
      data: [300, 450, 770, 203, 255, 188, 156],
      // data: [["2021",100]],
      data: [],
      barWidth: '20px',
      itemStyle: {
        normal: {

 src/components/echarts/options/rosePie.js

@@ -29,22 +29,19 @@
        radius: '50%',
        center: ['50%', '50%'],
        color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
        data: [{
          value: 285,
          name: '黑名单查询'
        },
        data: [
          {
            value: 410,
            name: '红名单查询'
            value: 1,
            name: '急加速'
          },
          {
            value: 274,
            name: '法人行政处罚'
            value: 2,
            name: '超速'
          },
          {
            value: 235,
            name: '其它查询'
          }
            value: 4,
            name: '疲劳驾驶'
          },
        ].sort(function(a, b) {
          return a.value - b.value
        }),

 src/views/apis.js

 src/views/battShow.vue

@@ -4,28 +4,66 @@
import HdwChart from "@/components/echarts/hdwChart.vue";
import getNormalLine from "@/components/echarts/options/normalLine"
import {onMounted, ref} from "vue";
import getRadiusBarOption from "@/components/echarts/options/radiusBar";

const carName = ref("");
const timeRange = ref("");

const tempLine = ref(null);
const volLine = ref(null);
const tempBar = ref(null);
const volBar = ref(null);
const alarmLine = ref(null);
const totalVolLine = ref(null);

const resize = ()=>{
  tempLine.value.resize();
  volLine.value.resize();
  tempBar.value.resize();
  volBar.value.resize();
  alarmLine.value.resize();
  totalVolLine.value.resize();
}

onMounted(()=>{
  const tempLineOption = getNormalLine();
  tempLine.value.setOption(tempLineOption);
import carInfoModule from "@/views/moudle/battShow/carInfo";
const {carList, getCarNames} = carInfoModule();

  const volLineOption = getNormalLine();
  volLine.value.setOption(volLineOption);
import battHistoryModule from "@/views/moudle/battShow/battHistory";

const {
    getBattHistory
} = battHistoryModule();

const searchBattHistory = async ()=> {
    try {
        const rs = await getBattHistory(carName.value, timeRange.value);
        if (rs.code !== 0) {
            console.log(rs.data);
        }
    }catch (e) {
        console.log(e);
    }
}

onMounted(()=>{

    getCarNames();

  const tempBarOption = getRadiusBarOption({
      grid: {
          top: '15%',
          right: '3%',
          left: '5%',
          bottom: '5%'
      }
  });
  tempBar.value.setOption(tempBarOption);

  const volBarOption = getRadiusBarOption({
      grid: {
          top: '15%',
          right: '3%',
          left: '5%',
          bottom: '5%'
      }
  });
  volBar.value.setOption(volBarOption);

  const alarmLineOption = getNormalLine();
  alarmLine.value.setOption(alarmLineOption);
@@ -33,7 +71,7 @@
  const totalVolLineOption = getNormalLine();
  totalVolLine.value.setOption(totalVolLineOption);

  resize();
    resize();
});
</script>

@@ -47,9 +85,9 @@
              <div class="input-label">车辆名称:</div>
              <div class="input-content">
                <el-select v-model="carName" filterable>
                  <el-option value="snr" label="汽车1"></el-option>
                  <el-option value="snr1" label="汽车2"></el-option>
                  <el-option value="snr2" label="汽车3"></el-option>
                  <el-option
                      v-for="(item, key) in carList" :key="'key'+key"
                    :value="item.key" :label="item.label"></el-option>
                </el-select>
              </div>
            </div>
@@ -69,6 +107,9 @@
              </div>
            </div>
          </div>
            <div class="input-item">
                <el-button type="primary" @click="searchBattHistory">查询</el-button>
            </div>
        </div>
      </div>
      <div class="batt-show-body">
@@ -77,7 +118,7 @@
            <flex-box>
              <div class="flex-box-content">
                <chart-box title="单体温度">
                  <hdw-chart ref="tempLine"></hdw-chart>
                  <hdw-chart ref="tempBar"></hdw-chart>
                </chart-box>
              </div>
            </flex-box>
@@ -86,7 +127,7 @@
            <flex-box>
              <div class="flex-box-content">
                <chart-box title="单体电压">
                  <hdw-chart ref="volLine"></hdw-chart>
                  <hdw-chart ref="volBar"></hdw-chart>
                </chart-box>
              </div>
            </flex-box>
@@ -167,7 +208,7 @@
.input-wrapper {
  display: flex;
  .input-content {
    width: 160px;
    min-width: 160px;
    vertical-align: middle;
  }
  .input-label {
@@ -179,4 +220,4 @@
    vertical-align: middle;
  }
}
</style>
</style>

 src/views/moudle/battShow/apis.js

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

/**
 * 查询车辆名称
 * @return {Promise<AxiosResponse<any>> | *}
 */
export const searchCarNames = ()=>{
  return axios({
    method: "GET",
    url: "/monitor/box/selectNameByName",
  });
}

export const searchBattHistory= (boxSn, startTime, endTime) => {
  return axios({
    method: "GET",
    url: "/monitor/bmsMonitor/selectHistory",
    params: {
      boxSn,
      startTime,
      endTime
    }
  });
}


 src/views/moudle/battShow/battHistory.js

New file
@@ -0,0 +1,56 @@
import {ElMessage} from "element-plus";
import {searchBattHistory} from "@/views/moudle/battShow/apis";

const battHistoryModule= (carName, timeRange)=>{

  /**
   * 查询车辆电池的历史数据
   * @param carName 车辆boxSn
   * @param timeRange 时间段
   * @return {Promise<{code: number, data: *[]}>}
   */
  const getBattHistory = async (carName, timeRange)=>{
    const result = {
      code: 0,
      data: []
    };
    if(!carName) {
      ElMessage({
        message: '请输入车辆名称',
        type: 'warning',
      });
      return result;
    }
    if(!timeRange) {
      ElMessage({
        message: '请输入时间段',
        type: 'warning',
      });
      return result;
    }
    try {
      const startTime = new Date(timeRange[0]).format("yyyy-MM-dd");
      const endTime = new Date(timeRange[1]).format("yyyy-MM-dd");
      const res = await searchBattHistory(carName, startTime, endTime);
      const rs = res.data;
      let data = [];
      if(rs.code === 1) {
        result.code = 1;
        result.data = rs.data;
      }
      return result;
    }catch (e) {
      ElMessage({
        message: '查询失败，请检查网络连接！！！',
        type: 'error',
      });
      console.log(e);
      return result;
    }
  }

  return {
    getBattHistory
  }
}
export default battHistoryModule;

 src/views/moudle/battShow/carInfo.js

New file
@@ -0,0 +1,37 @@
import {ref} from "vue";
import {searchCarNames} from "./apis";

const carInfoModule = ()=>{
  const carList = ref([]);

  /**
   * 查询车辆名称
   * @return {Promise<*[]>}
   */
  const getCarNames = async ()=>{
    try {
      const res = await searchCarNames();
      const rs = res.data;
      let data = [];
      if(rs.code === 1) {
        data = rs.data;
      }
      // 设置carList
      carList.value = data.map(item=>{
        item.key = item.boxSn;
        item.label = item.name;
        return item;
      });
      return data;
    }catch (e) {
      console.log(e);
      return [];
    }
  }

  return {
    carList,
    getCarNames
  };
}
export default carInfoModule;

 src/views/user/js/cameraAlarm/lastAlarmModule.js

@@ -13,7 +13,6 @@
      if(rs.code === 1) {
        list = rs.data;
      }
      console.log(list);
      list = list.map(item=>{

        item.name = item.regularName;