修改页面样式及中英文切换显示

2023-05-24 09:46:48 +08:00 · 2023-05-24 09:46:48 +08:00 · 627d91adac
commit 627d91adac
parent 088cb504d9
10 changed files with 73 additions and 46 deletions
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@ -265,5 +265,10 @@ export default {
        'IoT_System':'IoT Management System',
        'environment_dust':'Environment-Dust Real-time Monitoring System',
        '加载更多':'Load More',        
+        '已调试':'Debugged',
+        '未调试':'No Debugged',        
+        '服务器机房':'server room',
+        '料场':'Raw Material Area',
+        '危废暂存间':'dangerous waste temporary storage room',
      }
  }
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@ -265,5 +265,10 @@ export default {
        'IoT_System':'物联管理系统',
        'environment_dust':'环境-粉尘 实时监测系统',
        '加载更多':'加载更多',
+        '已调试':'已调试',
+        '未调试':'未调试',
+        '服务器机房':'服务器机房',
+        '料场':'料场',
+        '危废暂存间':'危废暂存间',
      }
  }
--- a/src/store/module/Mechanics.ts
+++ b/src/store/module/Mechanics.ts
@ -11,6 +11,11 @@ import { defineStore } from "pinia";
 import { Names } from "@/store/storeName";
 import { development, production } from "@/utils/devSever";
 import { formatter } from "element-plus";
+import { getStoredLanguage, saveStoredLanguage } from "@/utils/languageStorage";
+import zhMessages from "@/locales/lang/zh";
+import enMessages from "@/locales/lang/en";
+let language = getStoredLanguage() || "简体中文";
+let messages = language == "简体中文" ? zhMessages.messages : enMessages.messages;
 export const useMechanicsStore = defineStore(Names.Mechanics, {
  // 使用方式
  // const Index= useIndexStore()
@ -28,7 +33,7 @@ export const useMechanicsStore = defineStore(Names.Mechanics, {
          id: null,
          index: 1,
          title: "精加",
-          titleChild: "机械分厂设备物联图-精加车间",
+          titleChild: messages.DevDiagram_JingJia,
          titleI18n:'messages.DevDiagram_JingJia',
          type: "精加车间",
          num: null,
@ -41,7 +46,7 @@ export const useMechanicsStore = defineStore(Names.Mechanics, {
          id: null,
          index: 2,
          title: "机加",
-          titleChild: "机械分厂设备物联图-机加车间",
+          titleChild: messages.DevDiagram_JiJia,
          titleI18n:'messages.DevDiagram_JiJia',
          type: "机加车间",
          num: null,
@ -54,7 +59,7 @@ export const useMechanicsStore = defineStore(Names.Mechanics, {
          id: null,
          index: 3,
          title: "大件",
-          titleChild: "机械分厂设备物联图-大件车间",
+          titleChild: messages.DevDiagram_DaJian,
          titleI18n:'messages.DevDiagram_DaJian',
          type: "大件车间",
          num: null,
@ -67,7 +72,7 @@ export const useMechanicsStore = defineStore(Names.Mechanics, {
          id: null,
          index: 4,
          title: "精饰",
-          titleChild: "机械分厂设备物联图-精饰车间",
+          titleChild: messages.DevDiagram_JingShi,
          titleI18n:'messages.DevDiagram_JingShi',
          type: "精饰车间",
          num: null,
@ -80,7 +85,7 @@ export const useMechanicsStore = defineStore(Names.Mechanics, {
          id: null,
          index: 5,
          title: "焊接",
-          titleChild: "机械分厂设备物联图-焊接车间",
+          titleChild: messages.DevDiagram_HanJie,
          titleI18n:'messages.DevDiagram_HanJie',
          type: "焊接车间",
          num: null,
--- a/src/views/InPlantProducts/child/component/axle.vue
+++ b/src/views/InPlantProducts/child/component/axle.vue
@ -14,8 +14,8 @@
        <div class="box" :key="keynum" :style="{width:boxSize.width,height:boxSize.height,position:'relative'}">
            <div class="type">
                        <ul>
-                            <li class="on">已调试</li>
-                            <li class="off">未调试</li>
+                            <li class="on">{{t('messages.已调试')}}</li>
+                            <li class="off">{{t('messages.未调试')}}</li>
                        </ul>
                    </div>
            <div v-for="(res,index) in data" :style="{width:'120px',height:'120px'}" >
--- a/src/views/InPlantProducts/child/component/sensor2.vue
+++ b/src/views/InPlantProducts/child/component/sensor2.vue
@ -14,8 +14,8 @@
                <div class="box" :key="keynum" :style="{ width: boxSize.width, height: boxSize.height, position: 'relative' }">
                    <div class="type">
                        <ul>
-                            <li class="on">已调试</li>
-                            <li class="off">未调试</li>
+                            <li class="on">{{t('messages.已调试')}}</li>
+                            <li class="off">{{t('messages.未调试')}}</li>
                        </ul>
                    </div>
                    <div v-for="(res, index) in data" :style="{ width: '130px', height: '130px' }">
--- a/src/views/Offsite/child/childContent/chart/devImage.vue
+++ b/src/views/Offsite/child/childContent/chart/devImage.vue
@ -30,7 +30,7 @@
            }" 
            :autoplay="{  delay: 3000,  disableOnInteraction: false,}" 
            @progress="onProgress" 
-            @slidechange="onSlideChange">
+            @slidechange="onSlideChange" style="width: 97%;">
              <swiper-slide v-for="res in imageList" :key="res.id">
                <el-image style="width: 100%; height: 100%" :src="res.image" :fit="'scale-down'">
                </el-image>
--- a/src/views/Offsite/child/childContent/chart/offsitegateway.vue
+++ b/src/views/Offsite/child/childContent/chart/offsitegateway.vue
@ -11,27 +11,24 @@
  <div ref="marginbox">
    <border6 ref="refborder6">
      <template v-slot>
-        <div
-          class="box"
-          :key="keynum"
-          :style="{ width: boxWH.width, height: boxWH.height }"
-        >
+        <div class="box" :key="keynum" :style="{ width: boxWH.width, height: boxWH.height }">

-          <div class="title-box"><h2>{{ props.title }}</h2>
+          <div class="title-box">
+            <h2>{{ props.title }}</h2>
            <div class="colorTip">
-              <div ><i class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan icon-blue"></i> {{t('messages.onLine')}}</div>
-              <div style="color:#e43961"><i class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan icon-red"></i> {{t('messages.offline')}}</div>
-            </div>
+              <div><i class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan icon-blue"></i>
+                {{ t('messages.onLine') }}</div>
+              <div style="color:#e43961"><i
+                  class="iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan icon-red"></i>
+                {{ t('messages.offline') }}</div>
            </div>
+          </div>
          <ul class="gatewaystatus">
            <li v-for="item in data">
-              <i
-                :class="
-                 JSON.parse(item.status)
-                    ? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan online'
-                    : 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan noonline'
-                "
-              ></i>
+              <i :class="JSON.parse(item.status)
+                  ? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan online'
+                  : 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan noonline'
+                "></i>
              <h2 class="titlesize-name">{{ item.name }}</h2>
            </li>
          </ul>
@ -46,7 +43,7 @@ import { getCurrentInstance, onMounted, reactive, ref } from "vue";
 import { gatewayType } from "@/type/InPlantProducts";
 import border6 from "@/components/borderBox/border6.vue";
 import { useI18n } from 'vue-i18n'
-let {t} = useI18n();
+let { t } = useI18n();
 let props = defineProps<{
  title: string;
 }>();
@ -66,7 +63,7 @@ let boxWH = reactive({
 });
 // let gateway=ref()
 // let fontSize=ref()
-onMounted(() => {});
+onMounted(() => { });

 function setchartWH(width: any, height: any) {
  marginbox.value.style.height = height + "px";
@ -76,7 +73,7 @@ function setchartWH(width: any, height: any) {
  refborder6.value.resetWH();
 }
 const setData = (value?: any) => {
-  data=reactive([...value])
+  data = reactive([...value])

  keynum.value++;
  // data.value='设备名称'
@ -91,18 +88,19 @@ defineExpose({
 </script>

 <style scoped>
-
 h2 {
  color: #fff;
  font-size: 20px;
  margin-top: 10px;
 }
+
 p {
  margin: 0 10px 0 10px;
  color: #fff;
  font-weight: 800;
  font-size: 2rem;
 }
+
 .box {
  width: 100%;
  height: 100%;
@ -110,49 +108,59 @@ p {
  flex-direction: column;
  justify-content: center;
  padding: 0;
+  padding-top: 10px;
 }
+
 .gatewaystatus {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
 }
-.gatewaystatus > li {
+
+.gatewaystatus>li {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
 }
-.gatewaystatus > li {
+
+.gatewaystatus>li {
  flex-direction: column;
 }
+
 .noonline {
  font-size: 8rem;
  color: rgb(228, 57, 97);
  position: relative;
  /* top: -20px; */
 }
+
 .online {
  font-size: 8rem;
  color: rgb(32, 174, 197);
  position: relative;
  /* top: -20px; */
 }
+
 .colorTip {
-  width: 30%;
+  width: 35%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
 }
+
 .colorTip span {
  margin-right: 1rem;
 }
-.colorTip > div {
+
+.colorTip>div {
  margin-right: 1rem;
  font-size: 1rem;
 }
+
 .colorTip .icon-red {
  display: inline-block;
  /* background-color: #e43961; */
@ -161,6 +169,7 @@ p {
  width: 1rem;
  height: 1rem;
 }
+
 .colorTip .icon-blue {
  display: inline-block;
  /* background-color: #20aec5; */
@ -169,14 +178,16 @@ p {
  width: 1rem;
  height: 1rem;
 }
-.titlesize-name{
-    font-size: 1.5rem;
+
+.titlesize-name {
+  font-size: 1.5rem;
 }
-.title-box{
+
+.title-box {
  display: flex;
  justify-content: space-between;
 }
-.title-box > h2{
+
+.title-box>h2 {
  margin-left: 20px;
-}
-</style>
+}</style>
--- a/src/views/generalEnvironment/content/right.vue
+++ b/src/views/generalEnvironment/content/right.vue
@ -96,7 +96,7 @@ const threebox=(width:any,height:any)=>{
 const onebox=(width:any,height:any)=>{
  let a=calcWH(height,width,3,1,0)
  //修改高度
-  Refhumiture.value.setchartWH(a.oWidth,a.oHeight*2-40)
+  Refhumiture.value.setchartWH(a.oWidth,a.oHeight*2-49)
 }
 watch(
  () => store.humiture,
--- a/src/views/generalEnvironmentjixiefenchang/content/right.vue
+++ b/src/views/generalEnvironmentjixiefenchang/content/right.vue
@ -96,7 +96,7 @@ const threebox=(width:any,height:any)=>{
 const onebox=(width:any,height:any)=>{
  let a=calcWH(height,width,3,1,0)
  //修改高度
-  Refhumiture.value.setchartWH(a.oWidth,a.oHeight*2-40)
+  Refhumiture.value.setchartWH(a.oWidth,a.oHeight*2-49)
 }
 watch(
  () => store.humiture,
--- a/src/views/pmData/index.vue
+++ b/src/views/pmData/index.vue
@ -12,11 +12,11 @@
          <PM :title="item.title" :value="item.value"></PM>
        </Border12>
      </div>
-      <div class="test" v-for="item in pmData">
+      <!-- <div class="test" v-for="item in pmData">
        <Border12>
          <PM :title="item.title" :value="item.value"></PM>
        </Border12>
-      </div>
+      </div> -->
    </div>

  </div>
@ -81,6 +81,7 @@ function getWebsocket(val) {

    let data = JSON.parse(val);
    if (data.type == "dust") {
+      console.log(data.msg, "pm2.5/10");
      
      let index = pmData.findIndex(item => item.title == data.msg.name + "(PM2.5/PM10)")
      if (index != -1) {