screenFront/src/views/index.vue

<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\index.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-01-29 15:34:48
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->

<template>
  <div :class="$style['container']" ref="appRef">
    <div class="navbar">
      <el-dropdown effect="dark" @command="changelang" >
    <span class="el-dropdown-link">
      <!-- <img src="../assets/svg/gateway.svg" alt="" class="langimg" height="20px" width="20px"> -->
      <i class="iconfont icon-zhongyingwen langimg"></i>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :class="'简体中文' == lang?'select':'' " command="简体中文">简体中文</el-dropdown-item>
        <el-dropdown-item :class="'English/USD' == lang?'select':'' " command="English/USD">English/USD</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
      <!-- <el-select class="m-2" v-model="lang" effect="dark" placeholder="Select" size="large" @change="changelang">
        <el-option
          :label="'简体中文'"
          :value="'简体中文'"
        />
        <el-option
          :label="'English/USD'"
          :value="'English/USD'"
        />
      </el-select> -->
    </div>

    <div class="itemlist">
      <list
        v-for="res in routerList"
        :path="res.path"
        :is-link="res.isLink"
        :title="res.title"
        :key="res.id"
        :url="res.url"
      ></list>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import list from "@/components/assembly/indexList.vue";
import { useI18n } from "vue-i18n";
import { getStoredLanguage, saveStoredLanguage } from "@/utils/languageStorage";
let langicon=require("@/assets/svg/language.svg")
window.document.title = "大屏物联管理系统";
let { t } = useI18n();
let routerList = [
  {
    id: 1,
    isLink: false,
    path: "/energyConsume",
    title: t("messages.energyConsume"),
    url: require("../assets/indexImg/energyConsume.png"),
    // url:'../../assets/indexImg/energyConsume.png'
  },
  {
    id: 2,
    isLink: false,
    path: "/generalEnvironment",
    title: t("messages.generalEnvironment"),
    url: require("../assets/indexImg/generalEnvironment.png"),
  },
  {
    id: 3,
    isLink: false,
    path: "/InPlantProducts",
    title: t("messages.InPlantProducts"),
    url: require("../assets/indexImg/InPlantProducts.png"),
  },
  {
    id: 4,
    isLink: false,
    path: "/Mechanics",
    title: t("messages.Mechanics"),
    url: require("../assets/indexImg/Mechanics.png"),
  },
  {
    id: 5,
    isLink: false,
    path: "/MicrofactoryDev",
    title: t("messages.MicrofactoryDev"),
    url: require("../assets/indexImg/MicrofactoryDev.png"),
  },
  {
    id: 6,
    isLink: false,
    path: "/Offsite",
    title: t("messages.Offsite"),
    url: require("../assets/indexImg/Offsite.png"),
  },
  {
    id: 8,
    isLink: false,
    path: "/realtimeSecurity",
    title: t("messages.realtimeSecurity"),
    url: require("../assets/indexImg/realtimeSecurity.png"),
  },
  {
    id: 7,
    isLink: false,
    path: "/FactoryView",
    title: t("messages.FactoryView"),
    url: require("../assets/indexImg/FactoryView.png"),
  },
  // {
  //   id:9,
  //   path:'/AerialView',
  //   title:'物联传感器分布图',
  //   url:require('../assets/indexImg/AerialView.png')
  // },
  {
    id: 10,
    isLink: false,
    path: "/PaintShopView",
    title: t("messages.PaintShopView"),
    url: require("../assets/indexImg/decorationShop.png"),
  },
  {
    id: 11,
    isLink: false,
    path: "/stuffView",
    title: t("messages.stuffView"),
    url: require("../assets/indexImg/PaintShopView.png"),
  },
  {
    id: 12,
    isLink: false,
    path: "/machiningView",
    title: t("messages.machiningView"),
    url: require("../assets/indexImg/PaintShopView.png"),
  },
  {
    id: 13,
    isLink: false,
    path: "/finishView",
    title: t("messages.finishView"),
    url: require("../assets/indexImg/PaintShopView.png"),
  },
  {
    id: 14,
    isLink: false,
    path: "/weldView",
    title: t("messages.weldView"),
    url: require("../assets/indexImg/PaintShopView.png"),
  },
  {
    id: 15,
    isLink: false,
    path: "/MechanicalView",
    title: t("messages.MechanicalView"),
    url: require("../assets/indexImg/MechanicalView.png"),
  },
  {
    id: 16,
    isLink: false,
    path: "/MechanicalViewDajian",
    title: t("messages.MechanicalViewDajian"),
    url: require("../assets/indexImg/MechanicalView.png"),
  },
  {
    id: 17,
    isLink: false,
    path: "/MechanicalViewHanjie",
    title: t("messages.MechanicalViewHanjie"),
    url: require("../assets/indexImg/MechanicalView.png"),
  },
  {
    id: 18,
    isLink: false,
    path: "/MechanicalViewJijia",
    title: t("messages.MechanicalViewJijia"),
    url: require("../assets/indexImg/MechanicalView.png"),
  },
  {
    id: 19,
    isLink: false,
    path: "/MechanicalViewJingjia",
    title: t("messages.MechanicalViewJingjia"),
    url: require("../assets/indexImg/MechanicalView.png"),
  },
  {
    id: 20,
    isLink: false,
    path: "/MechanicalViewJingshi",
    title: t("messages.MechanicalViewJingshi"),
    url: require("../assets/indexImg/MechanicalView.png"),
  },
  {
    id: 21,
    isLink: false,
    path: "/realtimeSecurityJixie",
    title: t("messages.realtimeSecurityJixie"),
    url: require("../assets/indexImg/realtimeSecurity.png"),
  },
  {
    id: 22,
    isLink: false,
    path: "/energyConsumejixie",
    title: t("messages.energyConsumejixie"),
    url: require("../assets/indexImg/energyConsumeMachinery.png"),
  },
  {
    id: 23,
    isLink: false,
    path: "/generalEnvironmentjixiefenchang",
    title: t("messages.generalEnvironmentjixiefenchang"),
    url: require("../assets/indexImg/generalEnvironment.png"),
  },
  {
    id: 24,
    isLink: false,
    path: "/electronicControl",
    title: t("messages.electronicControl"),
    url: require("../assets/indexImg/electronicControl.png"),
  },
  {
    id: 25,
    isLink: false,
    path: "/electronicControlAmbient",
    title: t("messages.electronicControlAmbient"),
    url: require("../assets/indexImg/electronicControlAmbient.png"),
  },
  // {
  //   id: 2,
  //   path:'/legionProducts/3',
  //   title: '军团物联管理系统',
  //   url: require('../assets/indexImg/legionProducts.png')
  // },
  {
    id: 26,
    isLink: false,
    path: "/pmData",
    title: t("messages.pmData"),
    url: require("../assets/indexImg/pmdata.png"),
  },
  {
    id: 27,
    isLink: true,
    path: "http://8.130.165.100:8081/dashboard/0e748f30-e0ac-11ed-b217-b1f43b805208?publicId=ee1adcf0-c350-11eb-b8eb-250fadb0e449",
    title: t("messages.mechanicalPm"),
    url: require("../assets/indexImg/mechanicalPm.png"),
  },
  {
    id: 28,
    isLink: true,
    path: "http://8.130.165.100:8081/dashboard/6bfc6650-e0b1-11ed-b217-b1f43b805208?publicId=ee1adcf0-c350-11eb-b8eb-250fadb0e449",
    title: t("messages.mechanical_TVOC_CH2O"),
    url: require("../assets/indexImg/mechanical_TVOC_CH2O.png"),
  },
  {
    id: 29,
    isLink: true,
    path: "http://8.130.165.100:8081/dashboard/44dac830-e0b3-11ed-b217-b1f43b805208?publicId=ee1adcf0-c350-11eb-b8eb-250fadb0e449",
    title: t("messages.mechanical_humidity"),
    url: require("../assets/indexImg/mechanical_humidity.png"),
  },
  {
    id: 30,
    isLink: true,
    path: "http://8.130.165.100:8081/dashboard/0514ffe0-e0b8-11ed-b217-b1f43b805208?publicId=ee1adcf0-c350-11eb-b8eb-250fadb0e449",
    title: t("messages.mechanical_noise"),
    url: require("../assets/indexImg/mechanical_noise.png"),
  },
];
let lang=ref(getStoredLanguage()||'简体中文')
function changelang(val){

saveStoredLanguage(val)
location.reload()
}
onMounted(() => {});
onUnmounted(() => {});
</script>

<style module>
.container {
  height: 1080px;
  width: 1920px;
}
</style>
<style scoped>
@import '../assets/css/iconfont.css';
.langimg{
  width: 50px;
  height: 50px;
  font-size: 50px;
  color: #fff;
}
.itemlist {
  height: 1030px;
  width: 1920px;
  color: #20aec5;
  background-color: #100c2a;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: auto !important;
}
.navbar {
  height: 50px;
  font-size: 20px;
  width: 100%;
  margin: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-left: -100px;
}
.el-dropdown-link {
  font-size: 30px;
  color: #fff;
}

.el-dropdown-menu {
  background-color: #303133 !important;
  color: #fff;
}
.el-dropdown-menu__item{
  color: #fff  !important;
}
.el-popper.is-light .el-popper__arrow::before {
  background-color: #303133 !important;
  color: #fff;
}
:deep(.select) {
  background-color: #e4f5f5 !important;
  color: #409EFF !important;
}
</style>
<style>
body {
  --header: 150px;
  /* --content:calc(100vh - var(--header)) */
  overflow: hidden !important;
  -ms-overflow-style: none;
  /* IE + Edge */
  scrollbar-width: none;
  /* Firefox */
}

::-webkit-scrollbar {
  display: none;
}
</style>