UA 实时页面 历史实时数据 国际化

he wei

2023-06-01 ab01d5308aa10ded03bbae2f2a3dde2f0e05445f

UA 实时页面 历史实时数据 国际化

 src/views/dataTest/components/HistoryRealtimeData.vue

@@ -1,5 +1,9 @@
<template>
  <div class="history-realtime-data" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.4)">
  <div
    class="history-realtime-data"
    v-loading="loading"
    element-loading-background="rgba(0, 0, 0, 0.4)"
  >
    <flex-layout>
      <div class="ele-filter-container" slot="header">
        <div class="ele-filter-radio-group">
@@ -9,11 +13,11 @@
            size="mini"
            style="margin-right: 8px"
          >
            <el-radio :label="365">近一年</el-radio>
            <el-radio :label="90">近三个月</el-radio>
            <el-radio :label="30">近一个月</el-radio>
            <el-radio :label="7">近7天</el-radio>
            <el-radio :label="1">近24小时</el-radio>
            <el-radio :label="365">{{ $t("Recent1year") }}</el-radio>
            <el-radio :label="90">{{ $t("Last3months") }}</el-radio>
            <el-radio :label="30">{{ $t("Last1month") }}</el-radio>
            <el-radio :label="7">{{ $t("Last7days") }}</el-radio>
            <el-radio :label="1">{{ $t("Last24hours") }}</el-radio>
          </el-radio-group>
          <el-popover placement="top-start" trigger="click">
            <div class="time-group">
@@ -21,9 +25,9 @@
                v-model="timeRange"
                type="datetimerange"
                @change="timeRangeChange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :range-separator="$t('to')"
                :start-placeholder="$t('StartDate')"
                :end-placeholder="$t('StopDate')"
                :default-time="['00:00:00', '23:59:59']"
                :clearable="false"
                :editable="false"
@@ -33,11 +37,11 @@
              >{{ filter.txt }} <i class="el-icon-date"></i
            ></el-button>
          </el-popover>
          <span style="color: #ffffff">当前显示单体：</span>
          <span style="color: #ffffff"> {{ $t("CurrentCellDisplay") }}: </span>
          <el-select
            v-model="monSelect"
            filterable
            placeholder="请选择查看的单体"
            :placeholder="$t('Pleaseselectthecelltoview')"
            @change="monSelectChange"
            size="mini"
          >
@@ -58,42 +62,42 @@
          class="flex-layout noborder"
          @tab-click="tabClick"
        >
          <el-tab-pane label="在线电压" name="onlineVolGraph">
          <el-tab-pane :label="$t('OnlineVoltage')" name="onlineVolGraph">
            <line-chart-plus
              ref="onlineVolGraph"
              id="onlineVolGraph"
              unit="V"
            ></line-chart-plus>
          </el-tab-pane>
          <el-tab-pane label="组端电压" name="groupVolGraph">
          <el-tab-pane :label="$t('StringVoltage')" name="groupVolGraph">
            <line-chart-plus
              ref="groupVolGraph"
              id="groupVolGraph"
              unit="V"
            ></line-chart-plus>
          </el-tab-pane>
          <el-tab-pane label="组端电流" name="groupCurrGraph">
          <el-tab-pane :label="$t('StringCurrent')" name="groupCurrGraph">
            <line-chart-plus
              ref="groupCurrGraph"
              id="groupCurrGraph"
              unit="A"
            ></line-chart-plus>
          </el-tab-pane>
          <el-tab-pane label="单体电压" name="monVolGraph">
          <el-tab-pane :label="$t('CellVoltage')" name="monVolGraph">
            <line-chart-plus
              ref="monVolGraph"
              id="monVolGraph"
              unit="V"
            ></line-chart-plus>
          </el-tab-pane>
          <el-tab-pane label="单体温度" name="monTmpGraph">
          <el-tab-pane :label="$t('CellTemperature')" name="monTmpGraph">
            <line-chart-plus
              ref="monTmpGraph"
              id="monTmpGraph"
              unit="℃"
            ></line-chart-plus>
          </el-tab-pane>
          <el-tab-pane label="单体内阻" name="monResGraph">
          <el-tab-pane :label="$t('CellResistance')" name="monResGraph">
            <line-chart-plus
              ref="monResGraph"
              id="monResGraph"
@@ -103,24 +107,21 @@
        </el-tabs>
      </div>
    </flex-layout>
    <!-- <div class="progress-container" v-if="progress.show">
      <div class="progress-content">
        <div class="progress">
          <el-progress type="circle" :percentage="progress.value"></el-progress>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import LineChartPlus from "@/components/chart/LineChartPlus";
import { searchHistoryRealtimeData } from "../js/realTime";
import i18n from "./i18n/HistoryRealtimeData";
import { createI18nOption } from "@/assets/js/tools/i18n";

const i18nMixin = createI18nOption(i18n);

let options = {
  groupVolGraph: {
    title: {
      text: "组端电压折线图",
      text: "StringVoltageLineChart",
      x: "center",
    },
    xAxis: [
@@ -135,7 +136,7 @@
  },
  groupCurrGraph: {
    title: {
      text: "组端电流折线图",
      text: "StringCurrentLineChart",
      x: "center",
    },
    xAxis: [
@@ -147,7 +148,7 @@
  },
  onlineVolGraph: {
    title: {
      text: "在线电压折线图",
      text: "OnlineVoltageLineChart",
      x: "center",
    },
    xAxis: [
@@ -159,7 +160,7 @@
  },
  monVolGraph: {
    title: {
      text: "单体电压折线图",
      text: "CellVoltageLineChart",
      x: "center",
    },
    legend: {
@@ -175,7 +176,7 @@
  },
  monTmpGraph: {
    title: {
      text: "单体温度折线图",
      text: "CellTemperatureLineChart",
      x: "center",
    },
    legend: {
@@ -191,7 +192,7 @@
  },
  monResGraph: {
    title: {
      text: "单体内阻折线图",
      text: "CellResistanceLineChart",
      x: "center",
    },
    legend: {
@@ -208,6 +209,7 @@
};
export default {
  name: "HistoryRealtimeData",
  mixins: [i18nMixin],
  components: {
    LineChartPlus,
  },
@@ -227,7 +229,7 @@
        timeType: 1,
        startTime: "",
        endTime: "",
        txt: "选择日期",
        txt: this.$t('SelectDate'),
      },
      timeRange: [],
      searchParams: {
@@ -262,7 +264,7 @@
      // 获取时间段
      const startTime = this.timeRange[1].format("yyyy-MM-dd hh:mm:ss");
      const endTime = this.timeRange[0].format("yyyy-MM-dd hh:mm:ss");
      this.filter.txt = endTime + "至" + startTime;
      this.filter.txt = endTime + ' ' + this.$t('to') + ' ' + startTime;
      // 设置时间段
      this.setRangeTime(startTime, endTime);
      // 根据查询条件获取数据
@@ -271,7 +273,7 @@
    radioChange: function () {
      // 消除日期时间段
      if (this.timeRange.length != 0) {
        this.filter.txt = "选择日期";
        this.filter.txt = this.$t('SelectDate');
        this.timeRange = [];
      }
      // 获取选中日期
@@ -299,12 +301,12 @@
      // this.progress.show = true;
      // 开始查询
      this.search({
          battGroupId,
          note: monNum,
          monNum: monFlag,
          recrodTime,
          recrodTime1,
        });
        battGroupId,
        note: monNum,
        monNum: monFlag,
        recrodTime,
        recrodTime1,
      });
    },
    search: function (params) {
      // // 结束标识
@@ -349,7 +351,7 @@
    formatData(data) {
      let groupVol = [
        {
          name: "组端电压",
          name: this.$t('StringVoltage'),
          type: "line",
          smooth: true,
          symbolSize: 0,
@@ -359,7 +361,7 @@
      ];
      let groupCurr = [
        {
          name: "组端电流",
          name: this.$t('StringCurrent'),
          type: "line",
          smooth: true,
          symbolSize: 0,
@@ -369,7 +371,7 @@
      ];
      let onlineVol = [
        {
          name: "在线电压",
          name: this.$t('OnlineVoltage'),
          type: "line",
          smooth: true,
          symbolSize: 0,
@@ -427,17 +429,28 @@
      }
      // 设置组端电压
      options.groupVolGraph.series = groupVol;
      options.groupVolGraph.title.text = this.$t('StringVoltageLineChart');

      // 设置组端电流
      options.groupCurrGraph.series = groupCurr;
      options.groupCurrGraph.title.text = this.$t('StringCurrentLineChart');

      // 设置在线电压
      options.onlineVolGraph.series = onlineVol;
      options.onlineVolGraph.title.text = this.$t('OnlineVoltageLineChart');

      // 设置单体电压
      options.monVolGraph.series = monVol;
      options.monVolGraph.title.text = this.$t('CellVoltageLineChart');

      // 设置单体温度
      options.monTmpGraph.series = monTmp;
      options.monTmpGraph.title.text = this.$t('CellTemperatureLineChart');

      // 设置单体内阻
      options.monResGraph.series = monRes;
      options.monResGraph.title.text = this.$t('CellResistanceLineChart');

      // 设置图表的配置项
      this.setOptions();
    },

 src/views/dataTest/components/i18n/HistoryRealtimeData.js

New file
@@ -0,0 +1,54 @@
export default {
  messages: {
    CN: {
      Recent1year: '近一年',
      Last3months: '近三个月',
      Last1month: '近一个月',
      Last7days: '近7天',
      Last24hours: '近24小时',
      to: '至',
      StartDate: '开始日期',
      StopDate: '结束日期',
      CurrentCellDisplay: '当前显示单体',
      Pleaseselectthecelltoview: '请选择查看的单体',
      OnlineVoltage: '在线电压',
      StringVoltage: '组端电压',
      StringCurrent: '组端电流',
      CellVoltage: '单体电压',
      CellTemperature: '单体温度',
      CellResistance: '单体内阻',
      StringVoltageLineChart: '组端电压折线图',
      StringCurrentLineChart: '组端电流折线图',
      OnlineVoltageLineChart: '在线电压折线图',
      CellVoltageLineChart: '单体电压折线图',
      CellTemperatureLineChart: '单体温度折线图',
      CellResistanceLineChart: '单体内阻折线图',
      SelectDate: '选择日期',
    },
    US: {
      Recent1year: 'recent 1 year',
      Last3months: 'last 3 months',
      Last1month: 'last 1 month',
      Last7days: 'last 7 days',
      Last24hours: 'last 24 hours',
      to: 'to',
      StartDate: 'Start Date',
      StopDate: 'Stop Date',
      CurrentCellDisplay: 'Current Cell Display',
      Pleaseselectthecelltoview: 'Please select the cell to view',
      OnlineVoltage: 'Online Voltage',
      StringVoltage: 'String Voltage',
      StringCurrent: 'String Current',
      CellVoltage: 'Cell Voltage',
      CellTemperature: 'Cell Temperature',
      CellResistance: 'Cell Resistance',
      StringVoltageLineChart: 'String Voltage Line Chart',
      StringCurrentLineChart: 'String Current Line Chart',
      OnlineVoltageLineChart: 'Online Voltage Line Chart',
      CellVoltageLineChart: 'Cell Voltage Line Chart',
      CellTemperatureLineChart: 'Cell Temperature Line Chart',
      CellResistanceLineChart: 'Cell Resistance Line Chart',
      SelectDate: 'Select Date',
    }
  }
}

 src/views/dataTest/realTimeFbo4831.vue

@@ -137,7 +137,7 @@
      </fbo-discharge-params>
    </el-dialog>
    <!-- 实时历史数据 -->
    <el-dialog :title="histroyDataTitle" width="1200px" :visible.sync="historyRealTimeDataDialog.show"
    <el-dialog :title="histroyDataTitle" width="1320px" :visible.sync="historyRealTimeDataDialog.show"
      :close-on-click-modal="false" top="0" class="dialog-center no-bg" :modal-append-to-body="false">
      <history-realtime-data :batt="batt" v-if="historyRealTimeDataDialog.show"></history-realtime-data>
    </el-dialog>