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 v-for="item in language" :class="item.name == lang ? 'select' : ''" :command="item.name">{{ item.simple }}</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, reactive, 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"
import {imgurlAddXhr} from "@/utils/devSever"
let langicon = require("@/assets/svg/language.svg")
let route = useRoute()
window.document.title = "大屏物联管理系统";
let { t } = useI18n();
let language = reactive([
  {
    name: "简体中文",
    simple: "简体中文",
    value: "zh",
  },
  {
    name: "English/USD",
    simple: "English",
    value: "en",
  },
  {
    name: "Spanish/USD",
    simple: "Español",
    value: "es",
  }
])
 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) => {
      const regex = /^(http|https):\/\/[^ "]+$/;
      let isTrue = regex.test(item.img);
      return {
        id: item.id,
        isLink: false,
        path: item.path,
        title: item.title,
        url: isTrue?item.img:imgurlAddXhr(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>