screenFront/src/views/index.vue

<!--
 * @FilePath: \code\gitscreenFront\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">
      <h2 class="title">物联大屏系统</h2>
      <div class="dropdown">
        <el-dropdown @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</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </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/realtimeSecurityJixie.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: 31,
    isLink: false,
    path: "/generalEnvironmentMechanical",
    title: t("messages.环境 实时监测系统"),
    url: require("../assets/indexImg/generalEnvironmentMechanical.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"),
  // },
  {
    id: 31,
    path: "/waterhousedata",
    title: '南门水房物联大屏',
    url: require("../assets/indexImg/waterhouse.png"),
  },
  {
    id: 31,
    path: "/MicrofactoryDevOnline",
    title: '微工厂缝纫设备看板',
    url: require("../assets/indexImg/MicrofactoryDevOnline.png"),
  },
  {
    id: 32,
    path: "/intelligentShelves",
    title: '智能货架物联管理系统',
    url: require("../assets/indexImg/intelligentShelves.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 {
  position: relative;
  height: 50px;
  font-size: 20px;
  margin: 20px;
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  font-size: 40px;
  text-align: center;
  font-weight: bold;
  color: white;
}

.dropdown {
  position: absolute;
  top: 0;
  right: 90px;
}

.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>