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" :hash="res.hash" :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";
import { useRoute } from 'vue-router'
import { getScreenByHash } from "@/http/rule/index"
let langicon = require("@/assets/svg/language.svg")
let route = useRoute()
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"),
//   },
// ];

/*
{
    id: 1,
    isLink: false,
    path: "/energyConsume",
    title: t("messages.energyConsume"),
    url: require("../assets/indexImg/energyConsume.png"),
    // url:'../../assets/indexImg/energyConsume.png'
  }
  */
 let routerList = ref()
let lang = ref(getStoredLanguage() || '简体中文')
function changelang(val) {
  saveStoredLanguage(val)
  location.reload()
}


async function reqScreenByHash() {
  let hash = sessionStorage.getItem('screen_hash')
  let res:any = await getScreenByHash({hash});
  if (res.code === 200) {
    let {data} = res
    routerList.value = data.map((item:any) => {
      return {
        id: item.id,
        isLink: false,
        path: item.path,
        title: item.title,
        url: item.img,
        hash: hash
      }
    })
  }

}
onMounted(() => {
  reqScreenByHash()

});
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: 990px;
  width: 1920px;
  color: #20aec5;
  background-color: #100c2a;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: auto !important;
}

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

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

.navbar {
  position: relative;
  height: 50px;
  font-size: 20px;
  margin: 20px;
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

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