UA 国际化初步完成

he wei

2023-04-27 8fe27f96ac6d9705d31ad19a36be1c2e8fa932e8

 src/views/home/home-conductor.vue

@@ -4,32 +4,20 @@
    <div class="main-item">
      <!-- 上 -->
      <div class="row-1">
        <card class="card row-1" title="基础资源信息" content-class="base-card">
          <total-data
            class="row-item"
            :type="0"
            :value="base.stationNum | toLarge"
          ></total-data>
          <total-data
        <card class="card row-1" :title="$t('BasicResourceInfo')" content-class="base-card">
          <total-data class="row-item" :type="0" :value="base.stationNum | toLarge"></total-data>
          <!-- <total-data
            class="row-item"
            :type="1"
            :value="base.powerNum | toLarge"
          ></total-data>
          <total-data
            class="row-item"
            :type="2"
            :value="base.battGroupCount | toLarge"
          ></total-data>
          <total-data
            class="row-item"
            :type="3"
            :value="base.hrDisNum | toLarge"
          ></total-data>
          ></total-data> -->
          <total-data class="row-item" :type="2" :value="base.battGroupCount | toLarge"></total-data>
          <total-data class="row-item" :type="3" :value="base.hrDisNum | toLarge"></total-data>
        </card>
      </div>
      <!-- 中 -->
      <div class="sub-item row-2">
        <card class="card" title="站点信息" content-class="station">
        <!-- <card class="card" title="站点信息" content-class="station">
          <template #tools>
            <el-radio-group
              size="mini"
@@ -42,21 +30,16 @@
            </el-radio-group>
            <el-tag class="cur-point mrl8" effect="dark" size="mini" type="success" @click="goToStationInfo">更多>></el-tag>
          </template>
          <!-- <bar-chart ref="station"></bar-chart> -->
          <bar3d3 ref="station"></bar3d3>
        </card>
        <card class="card" title="电池信息">
        </card> -->
        <card class="card" :title="$t('BatteryInfo')">
          <template #tools>
            <el-radio-group
              size="mini"
              :disabled="!chartData.batt.length"
              @input="battLevelChange"
              v-model="battLevel"
            >
              <el-radio-button :label="0">按品牌</el-radio-button>
              <el-radio-button :label="1">按电压类型</el-radio-button>
            <el-radio-group size="mini" :disabled="!chartData.batt.length" @input="battLevelChange" v-model="battLevel">
              <el-radio-button :label="0">{{ $t('Brand') }}</el-radio-button>
              <el-radio-button :label="1">{{ $t('VoltageType') }}</el-radio-button>
            </el-radio-group>
            <el-tag class="cur-point mrl8" effect="dark" size="mini" type="success" @click="goToBattInfo">更多>></el-tag>
            <el-tag class="cur-point mrl8" effect="dark" size="mini" type="success" @click="goToBattInfo">{{ $t('More')
            }}>></el-tag>
          </template>
          <!-- <pie-chart ref="battInfo"></pie-chart> -->
          <pie3d ref="battInfo"></pie3d>
@@ -64,24 +47,18 @@
      </div>
      <!-- 下 -->
      <div class="sub-item row-3">
        <card class="card" title="电源信息">
        <!-- <card class="card" title="电源信息">
          <template #tools>
            <el-tag class="cur-point mrl8" effect="dark" size="mini" type="success" @click="goToPowerInfo">更多>></el-tag>
          </template>
          <!-- <power-chart ref="powerChart"></power-chart> -->
          <pie3d ref="powerChart" :theme-idx="1"></pie3d>
        </card>
        <card class="card" title="测试信息" content-class="test">
        </card> -->
        <card class="card" :title="$t('TestInfo')" content-class="test">
          <template #tools>
            <el-radio-group
              size="mini"
              :disabled="!chartData.test.length"
              @input="testLevelChange"
              v-model="testLevel"
            >
              <el-radio-button :label="0">本月</el-radio-button>
              <el-radio-button :label="1">本季度</el-radio-button>
              <el-radio-button :label="2">本年</el-radio-button>
            <el-radio-group size="mini" :disabled="!chartData.test.length" @input="testLevelChange" v-model="testLevel">
              <el-radio-button :label="0">{{ $t('CurrentMonth') }}</el-radio-button>
              <el-radio-button :label="1">{{ $t('CurrentSeason') }}</el-radio-button>
              <el-radio-button :label="2">{{ $t('Currentyear') }}</el-radio-button>
            </el-radio-group>
          </template>
          <bar3d ref="bar3d"></bar3d>
@@ -92,34 +69,19 @@
    <div class="main-item">
      <!-- 上 -->
      <div class="row-1">
        <card class="card" title="蓄电池优劣分析" content-class="base-card">
          <batt-card
            class="row-item"
            :type="0"
            :value="batt.groupNum | toLarge"
          ></batt-card>
          <batt-card
            class="row-item"
            :type="1"
            :value="batt.goodSum | toLarge"
          ></batt-card>
          <batt-card
            class="row-item"
            :type="2"
            :value="batt.alarmNum | toLarge"
          ></batt-card>
          <batt-card
            class="row-item"
            :type="3"
            :value="batt.changeNum | toLarge"
          ></batt-card>
        <card class="card" :title="$t('BatteryAnalysis')" content-class="base-card">
          <batt-card class="row-item" :type="0" :value="batt.groupNum | toLarge"></batt-card>
          <batt-card class="row-item" :type="1" :value="batt.goodSum | toLarge"></batt-card>
          <batt-card class="row-item" :type="2" :value="batt.alarmNum | toLarge"></batt-card>
          <batt-card class="row-item" :type="3" :value="batt.changeNum | toLarge"></batt-card>
        </card>
      </div>
      <!-- 中 -->
      <div class="row-2">
        <card class="card" title="同一投运时间不同品牌电池性能分析">
        <card class="card" :title="$t('PerformanceAnalysisofbatteriesfromdifferentbrandsinthesameservicetime')">
          <template #tools>
            <el-tag class="cur-point mrl8" effect="dark" size="mini" type="success" @click="goToBattInfo">更多>></el-tag>
            <el-tag class="cur-point mrl8" effect="dark" size="mini" type="success" @click="goToBattInfo">{{ $t('More')
            }}>></el-tag>
          </template>
          <div class="card-contain">
            <div class="batt-chart">
@@ -128,52 +90,31 @@
              </div>
            </div>
            <div class="panel0">
              <panel title="请选择投运年限">
              <panel :title="$t('Pleaseselecttheservicestarttime')">
                <div class="content">
                  <el-select
                    v-model="year0"
                    @change="year0Change"
                    :disabled="!chartData.analysis.length"
                    size="mini"
                  >
                    <el-option
                      v-for="(item, idx) in years"
                      :key="'year0_' + idx"
                      :label="item.label"
                      :value="item.value"
                    >
                  <el-select v-model="year0" @change="year0Change" :disabled="!chartData.analysis.length" size="mini">
                    <el-option v-for="(item, idx) in years" :key="'year0_' + idx" :label="$t(item.label)"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <div class="wrap">
                    <!-- 损坏数量最多品牌 -->
                    <div class="batt-data break">
                      <div class="label">损坏数量<br />最多品牌</div>
                      <div class="label">{{ $t('DamagedQty') }}<br />{{ $t('MostBrand') }}</div>
                      <div class="value" v-if="listChange.length <= 1">
                        {{ changeProd }}
                      </div>
                      <el-tooltip
                        class="item"
                        v-else
                        effect="dark"
                        content="changeProd1"
                        placement="top-end"
                      >
                      <el-tooltip class="item" v-else effect="dark" content="changeProd1" placement="top-end">
                        <div class="value">{{ changeProd }}</div>
                      </el-tooltip>
                    </div>
                    <!-- 劣化数量最多品牌 -->
                    <div class="batt-data">
                      <div class="label">劣化数量<br />最多品牌</div>
                      <div class="label">{{ $t('DeteriorationQty') }}<br />{{ $t('MostBrand') }}</div>
                      <div class="value" v-if="listAlarm.length <= 1">
                        {{ alarmProd }}
                      </div>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        v-else
                        content="alarmProd1"
                        placement="top-end"
                      >
                      <el-tooltip class="item" effect="dark" v-else content="alarmProd1" placement="top-end">
                        <div class="value">{{ alarmProd }}</div>
                      </el-tooltip>
                    </div>
@@ -186,9 +127,10 @@
      </div>
      <!-- 下 -->
      <div class="row-3">
        <card class="card" title="同一投运时间相同品牌电池性能分析">
        <card class="card" :title="$t('PerformanceAnalysisofbatteriesfromthesamebrandinthesameservicetime')">
          <template #tools>
            <el-tag class="cur-point mrl8" effect="dark" size="mini" type="success" @click="goToBattInfo">更多>></el-tag>
            <el-tag class="cur-point mrl8" effect="dark" size="mini" type="success" @click="goToBattInfo">{{ $t('More')
            }}>></el-tag>
          </template>
          <div class="card-contain">
            <div class="chart">
@@ -199,38 +141,20 @@
            </div>
            <!-- 中 -->
            <div class="selector">
              <panel class="big" title="请选择投运年限">
              <panel class="big" :title="$t('Pleaseselecttheservicestarttime')">
                <div class="content">
                  <el-select
                    v-model="year1"
                    @change="updateAnalysis1"
                    :disabled="!chartData.analysis1.length"
                    size="mini"
                  >
                    <el-option
                      v-for="(item, idx) in years"
                      :key="'year1_' + idx"
                      :label="item.label"
                      :value="item.value"
                    >
                  <el-select v-model="year1" @change="updateAnalysis1" :disabled="!chartData.analysis1.length"
                    size="mini">
                    <el-option v-for="(item, idx) in years" :key="'year1_' + idx" :label="$t(item.label)"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </panel>
              <panel class="small" title="请选择电池品牌">
              <panel class="small" :title="$t('Pleaseselectthebatterybrand')">
                <div class="content">
                  <el-select
                    v-model="battProd"
                    @change="updateAnalysis1"
                    :disabled="!prodList.length"
                    size="mini"
                  >
                    <el-option
                      v-for="(item, idx) in prodList"
                      :key="'prod_' + idx"
                      :label="item"
                      :value="item"
                    >
                  <el-select v-model="battProd" @change="updateAnalysis1" :placeholder="$t('Null')" :disabled="!prodList.length" size="mini">
                    <el-option v-for="(item, idx) in prodList" :key="'prod_' + idx" :label="item" :value="item">
                    </el-option>
                  </el-select>
                </div>
@@ -240,11 +164,11 @@
            <div class="card-info">
              <div class="item">
                <div class="icon break"></div>
                <div class="info">损坏数量: {{ changeCount }}</div>
                <div class="info">{{ $t('DamagedQty') }}: {{ changeCount }}</div>
              </div>
              <div class="item">
                <div class="icon bad"></div>
                <div class="info">劣化数量: {{ alarmCount }}</div>
                <div class="info">{{ $t('DeteriorationQty') }}: {{ alarmCount }}</div>
              </div>
            </div>
          </div>
@@ -272,25 +196,27 @@

import createWs from "@/assets/js/websocket";
const WSMixin = createWs("homeAdmin");

import i18n from './i18n/home-conductor';
import { createI18nOption } from '@/assets/js/tools/i18n';
const i18nMixin = createI18nOption(i18n);
export default {
  name: "",
  mixins: [WSMixin],
  mixins: [WSMixin, i18nMixin],
  data() {
    return {
      updateFlag: false,
      years: [
        {
          value: 0,
          label: "一年以内",
          label: "lt1year",
        },
        {
          value: 1,
          label: "两年以内",
          label: "lt2years",
        },
        {
          value: 2,
          label: "三年以内",
          label: "lt3years",
        },
      ],
      stationLevel: 0,
@@ -344,18 +270,18 @@
      if (1 == this.listChange.length) {
        return this.listChange[0];
      } else if (this.listChange.length > 1) {
        return this.listChange[0] + " 等";
        return this.listChange[0] + " " + this.$t('etc');
      } else {
        return "无";
        return this.$t('Null');
      }
    },
    alarmProd() {
      if (1 == this.listAlarm.length) {
        return this.listAlarm[0];
      } else if (this.listAlarm.length > 1) {
        return this.listAlarm[0] + " 等";
        return this.listAlarm[0] + " " + this.$t('etc');
      } else {
        return "无";
        return this.$t('Null');
      }
    },
    changeProd1() {
@@ -395,6 +321,12 @@
    },
    goToPowerInfo() {
      this.$router.push("/dataMager/powerMager");
    },
    onWSOpen() {
      this.sendMessage();
    },
    sendMessage() {
      this.SOCKET.send('');
    },
    onWSMessage(res) {
      res = JSON.parse(res.data);
@@ -445,7 +377,7 @@
      });
      this.chartData.station = station;
      // 站点
      this.$refs.station.setData(station[this.stationLevel]);
      // this.$refs.station.setData(station[this.stationLevel]);

      let batt = [];
      [producer, monVol].forEach((item, idx) => {
@@ -477,7 +409,7 @@
        return res;
      })();
      // 电源
      this.$refs.powerChart.setData(powerChart);
      // this.$refs.powerChart.setData(powerChart);

      let test = [];
      [month, quarter, year].forEach((item) => {
@@ -486,7 +418,7 @@
        //   sData: [item.hrdisNum, item.hrchNum, item.jcdisNum, item.jcchNum],
        // });
        test.push({
          xLabel: ["核容放电", "核容充电"],
          xLabel: ["CapacityCheckDischarge", "CapacityCheckCharge"].map((v) => this.$t(v)),
          sData: [item.hrdisNum, item.hrchNum],
        });
      });
@@ -524,9 +456,9 @@
      }
    },
    resizeChart() {
      this.$refs.station?.resize();
      // this.$refs.station?.resize();
      this.$refs.battInfo?.resize();
      this.$refs.powerChart?.resize();
      // this.$refs.powerChart?.resize();
      this.$refs.bar3d?.resize();
      this.$refs.battChart?.resize();
      this.$refs.analysis1?.resize();
@@ -550,7 +482,7 @@
          xLabel.push(v.name);
        });
      } else {
        let label = "其他";
        let label = this.$t('Other');
        let alarm = 0,
          change = 0;
        arr.splice(4).forEach((v) => {
@@ -572,14 +504,14 @@
      let res = { sData: [] };

      let arr = Object.keys(data)
        .map((v) => ({ name: idx ? v * 1 + "伏" : v, value: data[v] }))
        .map((v) => ({ name: idx ? v * 1 + this.$t('V') : v, value: data[v] }))
        .sort((a, b) => {
          return b.value - a.value;
        });
      if (arr.length <= 5) {
        res.sData = arr;
      } else {
        let name = "其他";
        let name = this.$t('Other');
        let value = 0;
        arr.splice(4).forEach((v) => {
          value += v.value * 1;
@@ -592,9 +524,9 @@
    getTestData(year, prod) {
      let data = this.chartData.analysis1;
      let arr = data[year];
      let Ores = arr.filter((v) => v.name == prod)[0];
      let Ores = arr.filter((v) => v.name == prod)[0] || {alarm: 0, change: 0};
      return {
        xLabel: ["劣化", "损坏"],
        xLabel: ["Deterioration", "Damage"].map(v => this.$t(v)),
        sData: [Ores.alarm, Ores.change],
        colorList: [
          ["#f8f38d", "#23b5f5"],
@@ -660,7 +592,11 @@
    },
  },

  mounted() {},
  mounted() {
    this.$bus.$on('langChanged', () => {
      this.sendMessage();
    });
  },
};
</script>

@@ -696,6 +632,10 @@
  flex: 1;
  display: flex;
  flex-direction: column;

  &:last-child {
    flex: 1.3;
  }
}

.sub-item {
@@ -728,6 +668,7 @@

  .panel0 {
    height: 100%;
    width: 320px;
    margin-left: 2em;

    .content {
@@ -771,6 +712,7 @@

  .selector {
    height: 100%;
    width: 320px;
    display: flex;
    flex-direction: column;
    margin-left: 1em;
@@ -797,7 +739,7 @@
  }
}

.main-item ~ .main-item {
.main-item~.main-item {
  margin-left: 10px;
}

@@ -815,21 +757,21 @@
  color: #022c44;
}

/deep/ :not(:first-child) > .el-radio-button__inner {
/deep/ :not(:first-child)>.el-radio-button__inner {
  border-left: 1px solid #0096a3;
}

/deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
/deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
  box-shadow: none;
}

/deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
/deep/ .el-radio-button__orig-radio:checked+.el-radio-button__inner {
  background-color: #2982f6;
  color: #fff;
}

.card-info {
  width: 152px;
  width: 212px;
  padding: 4px 0;
  border: 2px #00fefe solid;
  margin-left: 0.4em;
@@ -848,13 +790,11 @@
      height: 70px;

      &.bad {
        background: url("./images/batt_bad.png") center center / contain
          no-repeat;
        background: url("./images/batt_bad.png") center center / contain no-repeat;
      }

      &.break {
        background: url("./images/batt_break.png") center center / contain
          no-repeat;
        background: url("./images/batt_break.png") center center / contain no-repeat;
      }
    }

@@ -865,10 +805,11 @@
    }
  }
}

.cur-point {
  cursor: pointer;
}

.mrl8 {
  margin-left: 8px;
}
</style>
}</style>