大屏英文版代码

2025-08-14 14:36:48 +08:00
parent 2963a635cf
commit a7fb35d600
15 changed files with 274 additions and 160 deletions
--- a/src/views/new-screen-zz/components/center-bottom.vue
+++ b/src/views/new-screen-zz/components/center-bottom.vue
@ -1,6 +1,6 @@
 <template>
  <div class="center-bottom-warp">
-    <item :title="'日充放电对比'">
+    <item :title="$t('screen.chargeDischargeComparison')">
      <dv-loading v-if="Loading">Loading...</dv-loading>
      <Chart v-else :options="options" />
    </item>
@ -20,6 +20,11 @@ export default {
      Loading: true
    }
  },
+  computed: {
+    lang() {
+      return this.$store.getters.language
+    }
+  },
  created() {

  },
@ -62,8 +67,8 @@ export default {
            right: 30,
            itemWidth: 14,
            data: [
-              { icon: 'image://' + dayChargeIcon, name: '充电' },
-              { icon: 'image://' + dayDischargeIcon, name: '放电' }
+              { icon: 'image://' + dayChargeIcon, name: this.$t('screen.charge') },
+              { icon: 'image://' + dayDischargeIcon, name: this.$t('screen.discharge') }
            ]

          },
@ -129,7 +134,7 @@ export default {

            // 柱体
            {
-              name: '充电',
+              name: this.$t('screen.charge'),
              type: 'bar',

              barGap: '20%',
@ -157,7 +162,7 @@ export default {
              data: dayCharge
            },
            {
-              name: '放电',
+              name: this.$t('screen.discharge'),
              type: 'bar',
              barGap: '20%',
              barCategoryGap: '50%', /* 多个并排柱子设置柱子之间的间距*/
@ -189,7 +194,7 @@ export default {
      } else {
        this.options = {
          title: {
-            text: '暂无数据',
+            text: this.$t('screen.noData'),
            x: 'center',
            y: 'center',
            textStyle: {
--- a/src/views/new-screen-zz/components/center-top.vue
+++ b/src/views/new-screen-zz/components/center-top.vue
@ -3,40 +3,40 @@
    <div class="income">
      <div class="title">
        <span class="square" />
-        <span>昨日收益</span>
+        <span>{{ $t('screen.yesEarning') }}</span>
      </div>
      <div class="value">
        <template v-for="(item,index) in info.yestProfit">
          <div :key="index" class="number">{{ item }}</div>
        </template>

-        <div class="unit">万元</div>
+        <div class="unit">{{ $t('screen.mRMB') }}</div>
      </div>
    </div>
    <div class="income">
      <div class="title">
        <span class="square" />
-        <span>年收益</span>
+        <span>{{ $t('screen.annualEarning') }}</span>
      </div>
      <div class="value">
        <template v-for="(item,index) in info.yearProfit">
          <div :key="index" class="number">{{ item }}</div>
        </template>

-        <div class="unit">万元</div>
+        <div class="unit">{{ $t('screen.mRMB') }}</div>
      </div>
    </div>
    <div class="income">
      <div class="title">
        <span class="square" />
-        <span>总收益</span>
+        <span>{{ $t('screen.totalEarning') }}</span>
      </div>
      <div class="value">
        <template v-for="(item,index) in info.totalProfit">
          <div :key="index" class="number">{{ item }}</div>
        </template>

-        <div class="unit">万元</div>
+        <div class="unit">{{ $t('screen.mRMB') }}</div>
      </div>
    </div>
  </div>
--- a/src/views/new-screen-zz/components/left-bottom.vue
+++ b/src/views/new-screen-zz/components/left-bottom.vue
@ -1,17 +1,17 @@
 <template>
  <div class="left-bottom-warp">
-    <item title="节能减排">
+    <item :title="$t('screen.energySaving')">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="top-all-box">
        <div class="top-con-box">
          <div class="top-item-box">
-            <div class="data">{{ info.treePlanting }}<span class="unit">棵</span></div>
-            <div class="title">等效植树量</div>
+            <div class="data">{{ info.treePlanting }}<span class="unit">{{ $t('screen.tree') }}</span></div>
+            <div class="title">{{ $t('screen.planted') }}</div>
            <img :src="screenItemBg" class="item-bg-img">
          </div>
          <div class="top-item-box">
            <div class="data">{{ info.reductionCO2 | kgFormat }}<span class="unit">{{ info.reductionCO2 | KgUnitFormat }}</span></div>
-            <div class="title">等效CO2减排</div>
+            <div class="title">{{ $t('screen.co2') }}</div>
            <img :src="screenItemBg" class="item-bg-img">
          </div>

@ -19,12 +19,12 @@
        <div class="top-con-box">
          <div class="top-item-box">
            <div class="data">{{ info.equivalentCoal | kgFormat }}<span class="unit">{{ info.equivalentCoal | KgUnitFormat }}</span></div>
-            <div class="title">等效节约煤</div>
+            <div class="title">{{ $t('screen.coal') }}</div>
            <img :src="screenItemBg" class="item-bg-img">
          </div>
          <div class="top-item-box">
            <div class="data">{{ info.income | moneyFormat }}<span class="unit">{{ info.income | moneyUnitFormat }}</span></div>
-            <div class="title">等效经济收入</div>
+            <div class="title">{{ $t('screen.income') }}</div>
            <img :src="screenItemBg" class="item-bg-img">
          </div>
        </div>
@ -57,9 +57,7 @@ export default {
  },
  mounted() {
  },
-
  methods: {
-
    async getData(deptId) {
      try {
        this.loading = true
--- a/src/views/new-screen-zz/components/left-center.vue
+++ b/src/views/new-screen-zz/components/left-center.vue
@ -1,7 +1,7 @@
 <template>
  <div class="left-center-warp">

-    <item :title="'电站区域分布'">
+    <item :title="$t('screen.regionStation')">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="chart-box">
        <Chart :options="options" :class-name="'chart'" />
@ -54,7 +54,7 @@ export default {
        const count = this.arrCount(ydata)
        this.options = {
          title: [{
-            text: '电站总数',
+            text: this.$t('screen.totalStation'),
            subtext: count,

            subtextStyle: {
--- a/src/views/new-screen-zz/components/left-top.vue
+++ b/src/views/new-screen-zz/components/left-top.vue
@ -1,46 +1,78 @@
 <template>
  <div class="left-top-warp">
-    <item>
+    <item :title="$t('screen.groupData')">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="top-all-box">
        <div class="value-box">
-          <div class="title">装机容量</div>
-          <div class="value">{{ info.capacity |kwhFormat }}</div>
+          <el-tooltip class="item" effect="dark" :content="$t('screen.capacity')" placement="top">
+            <div class="title">{{ $t('screen.capacity') }}</div>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" :content="info.capacity |kwhFormat" placement="top">
+            <div class="value">{{ info.capacity |kwhFormat }}</div>
+          </el-tooltip>
          <div class="unit">{{ info.capacity | kwhUnitFormat }}</div>
        </div>
        <div class="value-box">
-          <div class="title">电站个数</div>
-          <div class="value">{{ info.stationNumber }}</div>
-          <div class="unit">个</div>
+          <el-tooltip class="item" effect="dark" :content="$t('screen.stationNum')" placement="top">
+            <div class="title">{{ $t('screen.stationNum') }}</div>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" :content="info.stationNumber" placement="top">
+            <div class="value">{{ info.stationNumber }}</div>
+          </el-tooltip>
+          <div class="unit">{{ lang === 'zh'? '个':'' }}</div>
        </div>
        <div class="value-box">
-          <div class="title">{{ $t('dashboard.dailyCharge') }}</div>
-          <div class="value">{{ info.dayCharge |kwhFormat }}</div>
+          <el-tooltip class="item" effect="dark" :content="$t('screen.dailyCharge')" placement="top">
+            <div class="title">{{ $t('screen.dailyCharge') }}</div>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" :content="info.dayCharge |kwhFormat" placement="top">
+            <div class="value">{{ info.dayCharge |kwhFormat }}</div>
+          </el-tooltip>
          <div class="unit">{{ info.dayCharge |kwhUnitFormat }}</div>
        </div>
        <div class="value-box">
-          <div class="title">{{ $t('dashboard.dailyDischarge') }}</div>
-          <div class="value">{{ info.dayDischarge |kwhFormat }}</div>
+          <el-tooltip class="item" effect="dark" :content="$t('screen.dailyDischarge')" placement="top">
+            <div class="title">{{ $t('screen.dailyDischarge') }}</div>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" :content="info.dayDischarge |kwhFormat" placement="top">
+            <div class="value">{{ info.dayDischarge |kwhFormat }}</div>
+          </el-tooltip>
          <div class="unit">{{ info.dayDischarge |kwhUnitFormat }}</div>
        </div>
        <div class="value-box">
-          <div class="title">年充电量</div>
-          <div class="value">{{ info.yearCharge |kwhFormat }}</div>
+          <el-tooltip class="item" effect="dark" :content="$t('screen.yearCharge')" placement="top">
+            <div class="title">{{ $t('screen.yearCharge') }}</div>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" :content="info.yearCharge |kwhFormat" placement="top">
+            <div class="value">{{ info.yearCharge |kwhFormat }}</div>
+          </el-tooltip>
          <div class="unit">{{ info.yearCharge |kwhUnitFormat }}</div>
        </div>
        <div class="value-box">
-          <div class="title">年放电量</div>
-          <div class="value">{{ info.yearDischarge |kwhFormat }}</div>
+          <el-tooltip class="item" effect="dark" :content="$t('screen.yearDisCharge')" placement="top">
+            <div class="title">{{ $t('screen.yearDisCharge') }}</div>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" :content="info.yearDischarge |kwhFormat" placement="top">
+            <div class="value">{{ info.yearDischarge |kwhFormat }}</div>
+          </el-tooltip>
          <div class="unit">{{ info.yearDischarge |kwhUnitFormat }}</div>
        </div>
        <div class="value-box">
-          <div class="title">总充电量</div>
-          <div class="value">{{ info.totalCharge |kwhFormat }}</div>
+          <el-tooltip class="item" effect="dark" :content="$t('screen.totalCharge')" placement="top">
+            <div class="title">{{ $t('screen.totalCharge') }}</div>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" :content="info.totalCharge |kwhFormat" placement="top">
+            <div class="value">{{ info.totalCharge |kwhFormat }}</div>
+          </el-tooltip>
          <div class="unit">{{ info.totalCharge |kwhUnitFormat }}</div>
        </div>
        <div class="value-box">
-          <div class="title">{{ $t('dashboard.totalDischarge') }}</div>
-          <div class="value">{{ info.totalDischarge |kwhFormat }}</div>
+          <el-tooltip class="item" effect="dark" :content="$t('screen.totalDisCharge')" placement="top">
+            <div class="title">{{ $t('screen.totalDisCharge') }}</div>
+          </el-tooltip>
+          <el-tooltip class="item" effect="dark" :content="info.totalDischarge |kwhFormat" placement="top">
+            <div class="value">{{ info.totalDischarge |kwhFormat }}</div>
+          </el-tooltip>
          <div class="unit">{{ info.totalDischarge |kwhUnitFormat }}</div>
        </div>
      </div>
@ -64,10 +96,14 @@ export default {
      loading: true
    }
  },
+  computed: {
+    lang() {
+      return this.$store.getters.language
+    }
+  },
  watch: {
    info: {
      handler(val) {
-        console.log(1111, val)
        if (val) {
          this.loading = false
        } else {
@ -115,6 +151,10 @@ export default {

    .title{
      color: rgba(179, 221, 253, 1);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 90px;
+      max-width: 90px;
      padding-left: 16px;
      white-space: nowrap;
    }
--- a/src/views/new-screen-zz/components/map-center.vue
+++ b/src/views/new-screen-zz/components/map-center.vue
@ -14,8 +14,9 @@
  </div>
 </template>
 <script>
-import chinaMap from '@/assets/mapJson/chinaMap.json'
-import { chinaMapOutline } from '@/assets/mapJson/chinaMapOut.js'
+// import chinaMap from '@/assets/mapJson/chinaMap.json'
+import worldJson from 'echarts/map/json/world.json'
+// import { chinaMapOutline } from '@/assets/mapJson/chinaMapOut.js'
 import blue from '../../../assets/new-screen/map-blue.png'
 import { GetStationInfo, GetCapacity, GetRegionalDistribution } from '@/api/screen/zzScreen'
 export default {
@ -95,15 +96,23 @@ export default {
      this.getInitMap()
    },
    getInitMap() {
-      this.$echarts.registerMap('china', chinaMap)
-      this.$echarts.registerMap('chinaMapOutline', chinaMapOutline)
-
+      this.$echarts.registerMap('world', worldJson)
+      // this.$echarts.registerMap('china', chinaMap)
+      // this.$echarts.registerMap('chinaMapOutline', chinaMapOutline)
+      this.pointData = [
+        { name: 'Beijing', value: [116.4074, 39.9042] }, // 北京
+        { name: 'New York', value: [-74.0060, 40.7128] }, // 纽约
+        { name: 'London', value: [-0.1278, 51.5074] } // 伦敦
+      ]
      var series = [
        {
-          map: 'china',
+          // map: 'china',
+          name: '国家',
+          map: 'world',
          type: 'map',
          roam: false,
-          zoom: 1.65,
+          // zoom: 1.65,
+          zoom: 1.1,
          label: {
            normal: {
              show: false,
@ -117,7 +126,8 @@ export default {
              }
            }
          },
-          top: '29%',
+          // top: '29%',
+          top: '10%',
          tooltip: {
            show: false
          },
@ -134,7 +144,8 @@ export default {
              }
            }
          },
-          data: this.mapData
+          // data: this.mapData
+          data: [{ name: 'China', value: 100 }]
        },

        {
@ -150,11 +161,10 @@ export default {
          itemStyle: {
            normal: {
              color: '#F4E925',
-
              shadowColor: '#333'
            }
          },
-          symbolSize: 50,
+          symbolSize: 10,
          data: [this.pointData[this.pointIndex]]

          // showEffectOn: 'render' // 加载完毕显示特效
@ -167,7 +177,7 @@ export default {
          max: Math.max(...this.stationNum),
          right: 'right',
          top: 'bottom',
-          text: ['高(电站个数)', '低(电站个数)'],
+          text: [this.$t('screen.high') + '(' + this.$t('screen.stationNum') + ')', this.$t('screen.low') + '(' + this.$t('screen.stationNum') + ')'],
          calculable: true,
          inRange: {
            // color: ['#5edfd6', '#37d4cf', '#14c9c9', '#0da5aa', '#07828b']
@ -214,10 +224,11 @@ export default {
        geo: [
          {
            silent: true,
-            map: 'chinaMapOutline',
+            // map: 'chinaMapOutline',
+            map: 'world',

            zoom: 1.1,
-            top: '10%',
+            // top: '10%',
            label: {
              normal: {
                show: false,
@ -255,8 +266,8 @@ export default {
          {
            silent: true,
            map: 'chinaMapOutline',
-
-            zoom: 1.1,
+            // zoom: 1.1,
+            zoom: 1.2,
            top: '7%',
            label: {
              normal: {
--- a/src/views/new-screen-zz/components/right-bottom.vue
+++ b/src/views/new-screen-zz/components/right-bottom.vue
@ -1,7 +1,7 @@
 <template>
  <div class="left-bottom-warp">

-    <item title="系统转换效率">
+    <item :title="$t('screen.sysEff')">
      <dv-loading v-if="tableLoading">Loading...</dv-loading>
      <div v-else class="con-box">
        <SwiperTable
@ -27,9 +27,9 @@ export default {
  data() {
    return {
      tableLoading: false,
-      tableTitles: ['电站名称', '容量(kWh)', '转换效率(%)'],
+      tableTitles: [this.$t('screen.stationName'), this.$t('screen.cap'), this.$t('screen.Eff')],
      tableData: [],
-      widths: ['200', 'auto', 'auto', 'auto'],
+      widths: ['auto', 'auto', 'auto', 'auto'],
      contentHeight: 200,
      tableColumns: [
        'stationName',
@ -66,5 +66,8 @@ export default {
      width: 100%;
      padding-top: 10px;
    }
-}
+  }
+  .class1{
+    color: #F4E925;
+  }
 </style>
--- a/src/views/new-screen-zz/components/right-center.vue
+++ b/src/views/new-screen-zz/components/right-center.vue
@ -1,6 +1,6 @@
 <template>
  <div class="right-top-warp">
-    <item :title="'充放收益排名'">
+    <item :title="$t('screen.earningRanking')">
      <dv-loading v-if="tableLoading">Loading...</dv-loading>
      <div v-else class="con-box">
        <SwiperTableCenter
@ -47,7 +47,7 @@ export default {
        })
        this.tableData = res.data
        this.tableData.map((el) => {
-          el.incomeValue = el.incomeValue + '万元'
+          el.incomeValue = el.incomeValue + ' ' + this.$t('screen.mRMB')
        })
      } finally {
        this.tableLoading = false
--- a/src/views/new-screen-zz/components/right-top.vue
+++ b/src/views/new-screen-zz/components/right-top.vue
@ -1,6 +1,6 @@
 <template>
  <div class="right-top-warp">
-    <item title="集团收益">
+    <item :title="$t('screen.groupEarning')">
      <div class="box">
        <div class="button-box">
          <el-tabs
@ -8,9 +8,9 @@
            tab-position="top"
            @tab-click="handleClick"
          >
-            <el-tab-pane label="近30天" name="day" />
-            <el-tab-pane label="月度" name="month" />
-            <el-tab-pane label="年度" name="year" />
+            <el-tab-pane :label="$t('screen.daily30')" name="day" />
+            <el-tab-pane :label="$t('screen.monthly')" name="month" />
+            <el-tab-pane :label="$t('screen.yearly')" name="year" />
          </el-tabs>
        </div>
        <div class="chart-box">
@ -108,7 +108,7 @@ export default {
          yAxis: [
            {
              type: 'value',
-              name: '万元',
+              name: this.$t('screen.mRMB'),
              nameTextStyle: {
                color: '#6E7174',
                fontSize: 12,
@ -137,7 +137,7 @@ export default {
          ],
          series: [
            {
-              name: '收益',
+              name: this.$t('screen.earning'),
              type: 'line',
              data: profit_data,
              smooth: true,
@ -176,7 +176,7 @@ export default {
      } else {
        this.options = {
          title: {
-            text: '暂无数据',
+            text: this.$t('screen.noData'),
            x: 'center',
            y: 'center',
            textStyle: {
--- a/src/views/new-screen-zz/index.vue
+++ b/src/views/new-screen-zz/index.vue
@ -7,16 +7,13 @@
        <div class="title_wrap">
          <div class="title">
            <span class="left-title" />
-            <span class="title-text">中自智慧储能管控平台</span>
+            <span :class="lang === 'zh'? 'title-text' : 'en-eitle-text'">{{ $t('screen.ztscreenTitle') }}</span>
            <div class="right-title">
              <span>{{ time }}</span>
              <!-- <span class="weather">{{ weatherInfo ? weatherInfo.skyCon : '' }} {{ weatherInfo? weatherInfo.minTemperature :'' }}℃ ~  {{ weatherInfo ? weatherInfo.maxTemperature : '' }}℃</span> -->
-
            </div>
-
          </div>
        </div>
-
        <div class="box">
          <div class="left">
            <div class="left-top">
@ -97,6 +94,11 @@ export default {
      }
    }
  },
+  computed: {
+    lang() {
+      return this.$store.getters.language
+    }
+  },
  created() {
    this.changeFavicon(`./zhongzi.ico`)
    setInterval(() => {
@ -349,7 +351,16 @@ $margin: 16px;
          margin-left: 16px;
        }
      }
-
+      .en-eitle-text{
+        font-size: 18px;
+        letter-spacing: 1px;
+        font-weight: 900;
+        width: 100%;
+        background: linear-gradient(92deg, #fff, #fff 48.85254%, #fff);
+        font-family: PangMenNumber;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
      .title-text {
        font-size: 38px;
        font-weight: 900;
--- a/src/views/system/department/select.js
+++ b/src/views/system/department/select.js
@ -13,6 +13,7 @@ const leftBottomList = [
 ]
 const topCenterList = [
  { label: '215kWh', value: 'topCenter_215' },
+  { label: '261光储', value: 'gunanjieTopCenter' },
  { label: '标准', value: 'commonTopCenter' },
  { label: '单柜配置', value: 'onceTopCenter' },
  { label: '二合一', value: 'secondTopCenter' },