yg-yygl 0.0.1

package/dist/views/navHome/index.vue

@@ -0,0 +1,479 @@
+<script setup lang="ts">
+import { computed, onMounted, onBeforeUnmount, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useAccessStore, useSystemStore, useUserStore } from '@udp/stores';
+
+import { baseList } from '../../api/sys-config';
+import { useAuthStore } from '../../store/auth';
+import { useWebSocketStore } from '../../store/websocket';
+
+import { ElMessage } from 'element-plus';
+
+import './fonts/font.css';
+
+const router = useRouter();
+const authStore = useAuthStore();
+const userStore = useUserStore();
+const accessStore = useAccessStore();
+const systemStore = useSystemStore();
+
+// 自适应缩放 - 设计稿尺寸 1920*1080
+const designWidth = 1920;
+const designHeight = 1080;
+const scaleX = ref(1);
+const scaleY = ref(1);
+
+function updateScale() {
+  scaleX.value = window.innerWidth / designWidth;
+  scaleY.value = window.innerHeight / designHeight;
+}
+
+onMounted(() => {
+  updateScale();
+  window.addEventListener('resize', updateScale);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateScale);
+});
+
+const name = computed(() => userStore.accountInfo?.nickname || '');
+
+const menuList = computed(() => accessStore.accessSystemNavs || []);
+
+const hasIdApp = computed(() => menuList.value.length > 0);
+
+const pinyinMap: Record<string, string> = {
+  网格管理: 'wggl',
+  基础数据: 'jcsj',
+  事件中心: 'sjzx',
+  任务中心: 'rwzx',
+  运营管理: 'yygl',
+  指挥调度: 'zhdd',
+  监督评价: 'jdpj',
+};
+
+const engMap: Record<string, string> = {
+  网格管理: 'Grid Management',
+  基础数据: 'Basic Data',
+  事件中心: 'Event Center',
+  任务中心: 'Task Center',
+  运营管理: 'operation management',
+  指挥调度: 'command and dispatch',
+  监督评价: 'Supervision and evaluation',
+};
+
+function getAppIcon(appName: string) {
+  const key = pinyinMap[appName];
+  if (key) {
+    return new URL(`./images/${key}.png`, import.meta.url).href;
+  }
+  return new URL('./images/temp.png', import.meta.url).href;
+}
+
+onMounted(async () => {
+  // fjl modify navHome 不走 basic layout，需要单独初始化 websocket
+  const websocketStore = useWebSocketStore();
+  websocketStore.initPageVisibilityListener();
+  websocketStore.autoConnect();
+  // fjl modify 挂载 router 实例，供 ws-notification 跳转使用
+  (window as any).__route = { path: router.currentRoute.value.path };
+  (window as any).__router = router;
+
+  if (!systemStore.systemLogo) {
+    try {
+      const res = await baseList({ tenantId: null });
+      if (res?.[0]) {
+        systemStore.setSystemName(res[0].porProjectName);
+        systemStore.setSystemLogo(res[0].avatar);
+      }
+    } catch {
+      // 获取失败使用默认值
+    }
+  }
+});
+
+function getFirstRouteName(routes: any[]): string {
+  for (const route of routes) {
+    if (route.meta?.hideInMenu || route.meta?.ignoreAccess || route.meta?.isGroup) {
+      if (route.children?.length) {
+        const name = getFirstRouteName(route.children);
+        if (name) return name;
+      }
+      continue;
+    }
+    if (route.children?.length) {
+      const name = getFirstRouteName(route.children);
+      if (name) return name;
+    } else if (route.name) {
+      return route.name;
+    }
+  }
+  return '';
+}
+
+function jump(item: any) {
+  if (!item.meta?.id) return;
+
+  // appType === 1 表示外部应用，新窗口打开
+  if (item.meta?.openInNewWindow) {
+    window.open(item.meta?.link || item.meta?.url, '_blank');
+    return;
+  }
+
+  if (!item.children?.length) {
+    ElMessage.warning('该应用暂无可用菜单');
+    return;
+  }
+
+  const firstName = getFirstRouteName(item.children);
+  if (firstName) {
+    router.push({ name: firstName });
+  } else {
+    ElMessage.warning('该应用暂无可用菜单');
+  }
+}
+
+function grzx() {
+  // 优先查找 id 为 '1' 的应用，否则取第一个应用
+  const id1App = menuList.value.find((item) => item.meta?.id === '1');
+  const targetApp = id1App || menuList.value[0];
+  if (targetApp?.children?.length) {
+    const firstName = getFirstRouteName(targetApp.children);
+    if (firstName) {
+      router.push({ name: firstName });
+      return;
+    }
+  }
+  ElMessage.warning('暂无可用菜单');
+}
+
+function logout() {
+  authStore.logout();
+}
+</script>
+
+<template>
+  <div class="nav-home-wrapper" :style="{ transform: `scale(${scaleX}, ${scaleY})` }">
+    <div class="nav-home">
+      <div class="top-bar">
+      <img class="img1" src="./images/tx.png" alt="" />
+      <div class="user">
+        {{ name }}<img class="img4" src="./images/xjt.png" alt="" />
+      </div>
+      <img class="img5" src="./images/screen.svg" alt="" @click="router.push('/screen')" />
+      <img v-if="hasIdApp" class="img2" src="./images/sz.png" alt="" @click="grzx" />
+      <img class="img3" src="./images/tc.png" alt="" @click="logout" />
+    </div>
+    <div class="title-section">
+      <img v-if="systemStore.systemLogo" :src="systemStore.systemLogo" alt="" />
+      <div class="title_box">
+        <!-- fjl modify 去掉默认文案 -->
+        <div class="title">{{ systemStore.systemName }}</div>
+      </div>
+    </div>
+    <div v-if="menuList.length" class="menu-box">
+      <el-carousel
+        v-if="menuList.length > 6"
+        trigger="click"
+        :interval="10000"
+        arrow="never"
+        indicator-position="outside"
+      >
+        <el-carousel-item
+          v-for="pageIndex in Math.ceil(menuList.length / 6)"
+          :key="pageIndex"
+        >
+          <ul>
+            <li
+              v-for="(item, index) in menuList.slice(
+                (pageIndex - 1) * 6,
+                pageIndex * 6,
+              )"
+              :key="index"
+              @click="jump(item)"
+            >
+              <div class="menu-icon-box">
+                <img
+                  class="menu-icon"
+                  :src="getAppIcon(item.meta?.title || '')"
+                  alt=""
+                />
+              </div>
+              <div class="menu-title">{{ item.meta?.title }}</div>
+              <div class="menu-eng-name">{{ engMap[item.meta?.title || ''] || '' }}</div>
+              <div class="jump-btn">
+                <span>点击进入</span>
+              </div>
+            </li>
+          </ul>
+        </el-carousel-item>
+      </el-carousel>
+      <ul v-else>
+        <li
+          v-for="(item, index) in menuList"
+          :key="index"
+          @click="jump(item)"
+        >
+          <div class="menu-icon-box">
+            <img class="menu-icon" :src="getAppIcon(item.meta?.title || '')" alt="" />
+          </div>
+          <div class="menu-title">{{ item.meta?.title }}</div>
+          <div class="menu-eng-name">{{ engMap[item.meta?.title || ''] || '' }}</div>
+          <div class="jump-btn">
+            <span>点击进入</span>
+          </div>
+        </li>
+      </ul>
+    </div>
+    </div>
+  </div>
+</template>
+
+<!-- fjl modify style lang: less -> scss -->
+<style lang="scss" scoped>
+.nav-home-wrapper {
+  width: 1920px;
+  height: 1080px;
+  transform-origin: left top;
+}
+
+.nav-home {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-image: url('./images/bg.png');
+  background-size: 100% 100%;
+  position: relative;
+  text-align: left;
+  box-sizing: border-box;
+
+  .top-bar {
+    position: absolute;
+    top: 48px;
+    right: 60px;
+    display: flex;
+    align-items: center;
+
+    .img1 {
+      width: 40px;
+      height: 40px;
+    }
+
+    .user {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #293a68;
+      line-height: 22px;
+      margin-left: 11px;
+
+      .img4 {
+        width: 20px;
+        height: 12px;
+        margin-left: 4px;
+      }
+    }
+
+    .img2 {
+      cursor: pointer;
+      width: 32px;
+      height: 36px;
+      margin-left: 30px;
+    }
+
+    .img3 {
+      cursor: pointer;
+      width: 30px;
+      height: 32px;
+      margin-left: 30px;
+    }
+
+    .img5 {
+      cursor: pointer;
+      width: 32px;
+      height: 36px;
+      margin-left: 20px;
+    }
+
+    .txxqBox {
+      width: 338px;
+      position: absolute;
+      top: 50px;
+      right: -35px;
+      z-index: 100;
+      height: 180px;
+      overflow: auto;
+
+      .txxqGb {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+
+      .txxqList {
+        width: 100%;
+        background: #fff;
+        padding-top: 8px;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+
+        .txxqName {
+          font-size: 16px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #333333;
+          line-height: 22px;
+          padding-left: 29px;
+          padding-right: 9px;
+
+          span {
+            display: inline-block;
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: #27a4fb;
+            margin-left: -14px;
+            margin-right: 8px;
+            vertical-align: middle;
+            margin-top: -3px;
+          }
+        }
+
+        .txxqTime {
+          font-size: 14px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: rgba(0, 0, 0, 0.4);
+          line-height: 20px;
+          margin-top: 4px;
+          padding-left: 27px;
+        }
+      }
+    }
+  }
+
+  .title-section {
+    margin: 167px auto 85px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      width: 106px;
+      height: 96px;
+    }
+
+    .title_box {
+      margin-left: 16px;
+
+      .title {
+        margin-top: 5px;
+        font-family: PangMenZhengDao;
+        font-size: 77px;
+        color: #2F98FF;
+        line-height: 78px;
+        letter-spacing: 21px;
+        text-shadow: 0px 2px 0px rgba(240, 237, 255, 0.5);
+        -webkit-text-stroke: 1px #FFFFFF;
+        text-align: left;
+        font-style: normal;
+      }
+    }
+  }
+
+  .menu-box {
+    padding: 0 87px;
+    width: 100%;
+
+    :deep(.el-carousel__container) {
+      height: 480px;
+    }
+
+    ul {
+      width: 100%;
+      list-style-type: none;
+      display: flex;
+      justify-content: center;
+      gap: 30px;
+
+      li {
+        padding: 59px 0 37px 0;
+        cursor: pointer;
+        background: url('./images/menu-bg.png') no-repeat 100% 100%;
+        background-size: 100% 100%;
+        box-shadow: 0 4px 20px rgba(64, 125, 252, 0.15);
+        width: 266px;
+        height: 462px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .menu-icon-box {
+          position: relative;
+          display: flex;
+          flex-direction: column;
+
+          .menu-icon {
+            width: 227px;
+            height: 188px;
+          }
+        }
+
+        .menu-title {
+          margin-top: 45px;
+          font-family: PingFangSC;
+          font-weight: 500;
+          font-size: 30px;
+          color: #407dfc;
+          line-height: 42px;
+          text-align: center;
+        }
+
+        .menu-eng-name {
+          margin-top: 10px;
+          font-family: PingFangSC;
+          font-weight: 400;
+          font-size: 11px;
+          color: #6a81b0;
+          line-height: 16px;
+          text-align: center;
+          text-transform: uppercase;
+        }
+
+        .jump-btn {
+          margin-top: 35px;
+          width: 98px;
+          height: 30px;
+          padding: 4px 0 5px 30px;
+          cursor: pointer;
+          background: url('./images/jump.png') no-repeat 100% 100%;
+          background-size: 100% 100%;
+          line-height: 20px;
+
+          span {
+            font-family: PingFang-SC;
+            font-weight: 800;
+            font-size: 14px;
+            color: #fff;
+            line-height: 20px;
+          }
+        }
+      }
+    }
+  }
+
+  :deep(.el-carousel__button) {
+    background: rgba(59, 134, 247, 1);
+  }
+
+  :deep(.el-carousel--horizontal) {
+    height: fit-content;
+  }
+}
+</style>

package/dist/views/navHome/index.vue.d.ts

@@ -0,0 +1,3 @@
+import './fonts/font.css';
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/views/personal-center/components/avatar-name.d.vue.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/views/personal-center/components/avatar-name.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { VbenAvatar } from '@udp/common-ui';
+import { Dialog, Icon } from '@udp/component-ui';
+import { useUserStore } from '@udp/stores';
+
+import { saveAccountAvatar } from '../../../api/account';
+import { AvatarCropper } from '../../../components/avatar-cropper';
+import { GenderTag } from '../../../components/custom-tags';
+import { useAuthStore } from '../../../store';
+
+const userStore = useUserStore();
+const authStore = useAuthStore();
+
+const userInfo = computed(() => userStore.userInfo);
+const accountInfo = computed(() => userStore.accountInfo);
+
+const updateAvatarVisible = ref(false);
+
+const avatarCropperRef = ref();
+const updateAvatarCommit = async () => {
+  try {
+    const fileId = await avatarCropperRef.value.getImageId();
+    await saveAccountAvatar({
+      accountId: accountInfo.value!.id,
+      avatarBase64: fileId,
+    });
+    await authStore.fetchAccountInfo();
+    updateAvatarVisible.value = false;
+  } catch (error) {
+    console.error(error);
+  }
+};
+const updateAvatarClose = () => {
+  updateAvatarVisible.value = false;
+};
+</script>
+
+<template>
+  <div
+    class="relative h-[120px] w-full rounded-[var(--radius)] bg-gradient-to-r from-[#4a8efd] to-[#bad2fa] px-2 dark:from-gray-800 dark:to-gray-900"
+  >
+    <section
+      class="absolute left-0 top-0 z-10 flex h-full w-full items-center px-6"
+    >
+      <div class="relative cursor-pointer" @click="updateAvatarVisible = true">
+        <VbenAvatar
+          :alt="accountInfo?.nickname"
+          :src="accountInfo?.avatar || ''"
+          :size="64"
+          class="bg-primary size-8 rounded-full text-white"
+        />
+        <div
+          class="absolute bottom-0 right-0 flex h-5 w-5 items-center justify-center rounded-full border-2 border-white bg-[var(--el-color-warning)]"
+        >
+          <Icon name="ep:camera-filled" class="text-white" size="12" />
+        </div>
+      </div>
+      <section class="ml-4">
+        <div class="flex items-center gap-2 text-xl font-bold text-white">
+          {{ accountInfo?.nickname }}
+          <GenderTag :value="userInfo?.gender || 0" round />
+        </div>
+        <div class="text-sm text-gray-800 dark:text-gray-200">
+          {{ accountInfo?.loginCode }}
+        </div>
+      </section>
+    </section>
+    <img
+      src="../../../assets/imgs/basic-bg-left.png"
+      alt=""
+      class="pointer-events-none absolute left-0 top-0 h-full"
+    />
+    <img
+      src="../../../assets/imgs/basic-bg-right.png"
+      alt=""
+      class="pointer-events-none absolute bottom-0 right-0 h-[99px]"
+    />
+    <Dialog
+      v-model="updateAvatarVisible"
+      title="修改头像"
+      icon="mdi:crop-rotate"
+      width="800px"
+      @confirm="updateAvatarCommit"
+      @closed="updateAvatarClose"
+    >
+      <AvatarCropper ref="avatarCropperRef" :url="accountInfo?.avatar" />
+    </Dialog>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

package/dist/views/personal-center/components/avatar-name.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/views/personal-center/components/basic-info.d.vue.ts

@@ -0,0 +1,6 @@
+import type { Account } from '../../../api/account/types';
+type __VLS_Props = {
+    accountInfo: Account;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;