电池历史数据页面

whychdw

2023-11-10 510bf2d7aca2a49c8b36a9868c8da3a2137efd9b

电池历史数据页面

 src/components/echarts/hdwChart.vue

@@ -58,9 +58,10 @@
})

watch(isCollapse, ()=>{
    setTimeout(()=>{
    // setTimeout(()=>{
    //     resize();
    // }, 300);
        resize();
    }, 300);
});
onMounted(()=>{
    init(hdwChart.value);
@@ -82,11 +83,24 @@
</script>

<template>
    <div class="e-chart-wrapper" ref="hdwChart"></div>
    <div class="e-chart-wrapper">
    <div class="e-chart-container">
      <div class="e-chart-content" ref="hdwChart"></div>
    </div>
  </div>
</template>

<style scoped lang="less">
.e-chart-wrapper {
  position: relative;
    height: 100%;
  .e-chart-container {
    position: absolute;
    width: 100%;
    height: 100%;
    .e-chart-content {
      height: 100%;
    }
  }
}
</style>

 src/components/echarts/options/normalLine.js

New file
@@ -0,0 +1,99 @@
const getNormalLine = ()=>{
  return {
    title: {
      text: ''
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: []
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      axisLine: { //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: '#f9f9f9'
        },
      },
      axisLabel: { //坐标轴刻度标签的相关设置
        textStyle: {
          color: '#d1e6eb',
          margin: 15,
        },
      },
      axisTick: {
        show: false,
      },
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: '#0a3256'
        }
      },
      axisLine: {
        show: true,
      },
      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]
      }
    ]
  }
}
export default getNormalLine;

 src/router/routes.js

@@ -31,6 +31,15 @@
        component: () => import("../views/videoShow.vue"),
      },
      {
        path: "battShow",
        name: "电池历史数据",
        meta: {
          isTechPage: true,
          title: "电池历史数据"
        },
        component: ()=>import("../views/battShow.vue"),
      },
      {
        path: "user/drivingAnalysis",
        name: "驾驶行为分析图",
        meta: {

 src/views/battShow.vue

New file
@@ -0,0 +1,182 @@
<script setup>
import FlexBox from "@/components/FlexBox.vue";
import ChartBox from "@/components/chartBox.vue";
import HdwChart from "@/components/echarts/hdwChart.vue";
import getNormalLine from "@/components/echarts/options/normalLine"
import {onMounted, ref} from "vue";

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

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

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

onMounted(()=>{
  const tempLineOption = getNormalLine();
  tempLine.value.setOption(tempLineOption);

  const volLineOption = getNormalLine();
  volLine.value.setOption(volLineOption);

  const alarmLineOption = getNormalLine();
  alarmLine.value.setOption(alarmLineOption);

  const totalVolLineOption = getNormalLine();
  totalVolLine.value.setOption(totalVolLineOption);

  resize();
});
</script>

<template>
  <div class="batt-show-wrapper">
    <div class="batt-show-layout">
      <div class="batt-show-header">
        <div class="input-list">
          <div class="input-item">
            <div class="input-wrapper">
              <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-select>
              </div>
            </div>
          </div>
          <div class="input-item">
            <div class="input-wrapper">
              <div class="input-label">日期选择:</div>
              <div class="input-content">
                <el-date-picker
                    v-model="timeRange"
                    type="datetimerange"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    format="YYYY-MM-DD HH:mm:ss"
                    date-format="YYYY/MM/DD ddd"
                    time-format="A hh:mm:ss"></el-date-picker>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="batt-show-body">
        <div class="batt-chart-list top">
          <div class="batt-chart-item left">
            <flex-box>
              <div class="flex-box-content">
                <chart-box title="单体温度">
                  <hdw-chart ref="tempLine"></hdw-chart>
                </chart-box>
              </div>
            </flex-box>
          </div>
          <div class="batt-chart-item right">
            <flex-box>
              <div class="flex-box-content">
                <chart-box title="单体电压">
                  <hdw-chart ref="volLine"></hdw-chart>
                </chart-box>
              </div>
            </flex-box>
          </div>
        </div>
        <div class="batt-chart-list bottom">
          <div class="batt-chart-item left">
            <flex-box>
              <div class="flex-box-content">
                <chart-box title="告警事件">
                  <hdw-chart ref="alarmLine"></hdw-chart>
                </chart-box>
              </div>
            </flex-box>
          </div>
          <div class="batt-chart-item right">
            <flex-box>
              <div class="flex-box-content">
                <chart-box title="总单体电压">
                  <hdw-chart ref="totalVolLine"></hdw-chart>
                </chart-box>
              </div>
            </flex-box>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.batt-show-wrapper {
  height: 100%;
  background: url("@/assets/images/dw_bg.jpg") no-repeat;
  background-size: 100% 100%;
  .batt-show-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    .batt-show-header {
      padding: 8px 8px 4px 8px;
    }
    .batt-show-body {
      flex: 1;
      padding: 4px 8px 8px 8px;
    }
  }
}
.batt-chart-list {
  display: flex;
  height: 50%;
  &.top {
    padding-bottom: 4px;
  }
  &.bottom {
    padding-top: 4px;
  }
  .batt-chart-item {
    flex:1;
    &.left {
      padding-right: 4px;
    }
    &.right {
      padding-left: 4px;
    }
  }
}
.flex-box-content {
  height: 100%;
  padding: 8px 0 8px 8px;
}
.input-list {
  .input-item {
    display: inline-block;
    margin-left: 8px;
  }
}
.input-wrapper {
  display: flex;
  .input-content {
    width: 160px;
    vertical-align: middle;
  }
  .input-label {
    display: inline-block;
    line-height: 32px;
    color: #fff;
    font-size: 14px;
    margin-right: 8px;
    vertical-align: middle;
  }
}
</style>

 src/views/mainLayout/index.vue

@@ -17,6 +17,11 @@
        path: "/videoShow",
        icon: "VideoCameraFilled"
    },
  {
    title: "电池历史数据",
    path: "/battShow",
    icon: "TrendCharts"
  },
    {
        title: "用户管理",
        path: "/user",