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.value">{{ item.simple }}</el-dropdown-item>

            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <div class="itemlist">
      <div class="category" v-for="(value, key) in categoryList">
        <h2 class="category-title">{{ key }}</h2>
        <div class="category-item">
          <list v-for="res in value" :hash="res.hash" :path="res.path" :is-link="res.isLink" :title="res.title"
            :key="res.id" :url="res.url"></list>
        </div>
      </div>
      <!-- <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, languageHash } from "@/utils/languageStorage";
import { useRoute, useRouter } from 'vue-router'
import { getScreenByHash } from "@/http/rule/index"
import { imgurlAddXhr } from "@/utils/devSever"
let langicon = require("@/assets/svg/language.svg")
let route = useRoute()
let router = useRouter()
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(languageHash(val))
  location.reload()
}
function convertChineseToArabic(str) {
  const nums = {
    零: 0, 一: 1, 二: 2, 两: 2, 三: 3, 四: 4, 五: 5, 六: 6, 七: 7, 八: 8, 九: 9
  };
  let result = str.replace(/[零一二两三四五六七八九]/g, (match) => {
    return nums[match];
  });
  return parseInt(result, 10);
}
const categoryList: any = ref({})
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,
        screenType: item.screenType
      }
    })

    routerList.value.forEach(element => {
      if (element.screenType !== null) {
        if (categoryList.value.hasOwnProperty(element.screenType)) {
          categoryList.value[element.screenType].push(element)
        } else {
          categoryList.value[element.screenType] = [element]
        }
      } else {
        if (categoryList.value.hasOwnProperty('其他')) {
          categoryList.value['其他'].push(element)
        } else {
          categoryList.value['其他'] = [element]
        }
      }
    });
    console.log(categoryList.value);

  }

}
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;
  overflow: scroll !important;
}

.category {
  width: 1920px;
}

.category-title {
  padding-left: 40px;
  font-size: 32px;
  text-align: left;
  font-weight: bold;
  color: whitesmoke;

}
.category-item {
  width: 1920px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;

}

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