mky-vent-base/src/layouts/default/header/index.vue

<template>
  <Header
    v-if="
      ((!getShowFullHeader && !currentRoute.path.endsWith('home')) || currentRoute.path.startsWith('/micro-vent-3dModal/modelchannel/')) &&
      !noHeadeLink.includes(currentRoute.path) &&
      (currentRoute.path !== homePath || currentRoute.path.startsWith('/monitorChannel/monitor-'))
    "
    :class="[
      ...getHeaderClass,
      {
        'vent-header': currentRoute.path.startsWith('/monitorChannel/monitor-'),
        'normal-header': !currentRoute.path.startsWith('/monitorChannel/monitor-') && !currentRoute.path.startsWith('/shuizai'),
        'no-header': currentRoute.path.endsWith('home'),
        'zaihai-header': currentRoute.path.startsWith('/shuizai'),
      },
    ]"
    style="z-index: 1"
  >
    <!-- left start -->
    <div :class="`${prefixCls}-left`">
      <!-- logo -->
      <!-- <AppLogo v-if="getShowHeaderLogo || getIsMobile" :class="`${prefixCls}-logo`" :theme="getHeaderTheme" :style="getLogoWidth" /> -->
      <AppLogo :class="`${prefixCls}-logo`" :theme="getHeaderTheme" :style="getLogoWidth" />
      <div v-if="!currentRoute.path.startsWith('/monitorChannel/monitor-')" style="margin-top: 5px; color: #aaa; margin-left: 10px; font-weight: 600"
        >/{{ currentRoute.meta.title }}</div
      >
      <!-- <LayoutTrigger
        v-if="(getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile"
        :theme="getHeaderTheme"
        :sider="false"
      />
      <LayoutBreadcrumb v-if="getShowContent && getShowBread" :theme="getHeaderTheme" />
      <span v-if="getShowContent && getShowBreadTitle" :class="[prefixCls, `${prefixCls}--${getHeaderTheme}`, 'headerIntroductionClass']">
        欢迎进入 {{ title }}
      </span> -->
    </div>
    <!-- left end -->

    <!-- menu start -->
    <div v-if="currentRoute.path.startsWith('/monitorChannel/monitor-')" :class="`${prefixCls}-vent`">
      <!-- <div>主通风机监测控制</div> -->
      <div class="header-nav-title">{{ currentRoute.meta.title }} </div>
    </div>
    <div :class="`${prefixCls}-menu`" v-else-if="getShowTopMenu && !getIsMobile">
      <LayoutMenu :isHorizontal="true" :theme="getHeaderTheme" :splitType="getSplitType" :menuMode="getMenuMode" />
    </div>
    <!-- menu-end -->

    <!-- action  -->
    <div :class="`${prefixCls}-action`">
      <!-- <div class="right-position">
        <VoiceBroadcast />
        <UserDropDown v-if="showUserDropdown" :theme="getHeaderTheme" />
      </div>
      <LoginSelect ref="loginSelectRef" @success="loginSelectOk" /> -->
    </div>
  </Header>
  <div :class="`${prefixCls}-action`" style="position: fixed; top: 25px; right: 20px; z-index: 999999">
    <div class="right-position">
      <!-- 公司端不显示语音播报功能 weatherBroadcast.vue-->
      <!-- <a-radio-group v-if="hasPermission('show:modalChange')" v-model:value="programModalType" @change="changeModalType" style="display: flex">
        <a-radio :value="true">快速模式</a-radio>
        <a-radio :value="false">特效模式</a-radio>
      </a-radio-group> -->

      <div v-if="hasPermission('show:modalChange')" @click="changeModalType" style="width: 92px; color: #fff; cursor: pointer">
        <div v-if="programModalType == true"> <span class="icon">⚡</span>快速模式</div>
        <div v-if="programModalType == false"> <span class="icon">✨</span>特效模式</div>
      </div>
      <WeatherBroadcast v-if="sysOrgCode != 'sdmtjtgsd' && isShowQy && portValue != '8062' && hasPermission('show:weather')" />
      <VoiceBroadcast v-if="sysOrgCode != 'sdmtjtgsd' && portValue != '8062'" />
      <AIChat v-if="hasPermission('show:AIChat')" />
      <div style="width: 24px; height: 24px; cursor: pointer; user-select: none; margin: 0 3px">
        <img
          :src="dataPickerHoverEnabled ? AIOpenIcon : AICloseIcon"
          :title="dataPickerHoverEnabled ? '关闭AI解读' : '开启AI解读'"
          @click="toggleDataPickerHover"
        />
      </div>
      <VoiceBroadcastGsd v-if="sysOrgCode == 'sdmtjtgsd'" />
      <UserDropDown v-if="showUserDropdown" :theme="getHeaderTheme" />
      <LoginSelect ref="loginSelectRef" @success="loginSelectOk" />
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, unref, computed, ref, onMounted, toRaw } from 'vue';
  import { useGlobSetting } from '/@/hooks/setting';
  import { propTypes } from '/@/utils/propTypes';

  import { Layout } from 'ant-design-vue';
  import { AppLogo } from '/@/components/Application';
  import LayoutMenu from '../menu/index.vue';
  import LayoutTrigger from '../trigger/index.vue';

  import { AppSearch } from '/@/components/Application';

  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  import { useRootSetting } from '/@/hooks/setting/useRootSetting';

  import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
  import { SettingButtonPositionEnum } from '/@/enums/appEnum';
  import { AppLocalePicker } from '/@/components/Application';

  import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify, ErrorAction, LockScreen } from './components';
  import { useAppInject } from '/@/hooks/web/useAppInject';
  import { useDesign } from '/@/hooks/web/useDesign';

  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
  import { useLocale } from '/@/locales/useLocale';
  import { Persistent } from '/@/utils/cache/persistent';

  import WeatherBroadcast from './components/weatherBroadcast.vue';
  import VoiceBroadcast from './components/VoiceBroadcast.vue';
  import VoiceBroadcastGsd from './components/VoiceBroadcastGsd.vue';
  import AIChat from '/@/components/AIChat/MiniChat.vue';

  import LoginSelect from '/@/views/sys/login/LoginSelect.vue';
  import { useUserStore } from '/@/store/modules/user';
  import { useRouter } from 'vue-router';

  import { noHeadeLink } from '../layout.data';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { useAppStore } from '/@/store/modules/app';
  import { router } from '/@/router';
  import { dataPickerHoverEnabled, setDataPickerHoverEnabled } from '/@/views/ventAI/dataPicker';
  import AIOpenIcon from '/@/assets/images/ventAI/dataPicker/AI-open.svg';
  import AICloseIcon from '/@/assets/images/ventAI/dataPicker/AI-close.svg';

  export default defineComponent({
    name: 'LayoutHeader',
    components: {
      Header: Layout.Header,
      AppLogo,
      LayoutTrigger,
      LayoutBreadcrumb,
      LayoutMenu,
      UserDropDown,
      AppLocalePicker,
      FullScreen,
      Notify,
      AppSearch,
      ErrorAction,
      LockScreen,
      LoginSelect,
      VoiceBroadcast,
      AIChat,
      VoiceBroadcastGsd,
      WeatherBroadcast,
      SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
        loading: true,
      }),
    },
    props: {
      fixed: propTypes.bool,
    },
    setup(props) {
      const { prefixCls } = useDesign('layout-header');
      const userStore = useUserStore();
      const { currentRoute } = useRouter();
      console.log(currentRoute);
      const { hasPermission } = usePermission();
      const isShowQy = VENT_PARAM['isShowQy'];
      const { getShowTopMenu, getShowHeaderTrigger, getSplit, getIsMixMode, getMenuWidth, getIsMixSidebar } = useMenuSetting();
      const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting();
      const { title, sysOrgCode, homePath } = useGlobSetting();
      const {
        getHeaderTheme,
        getShowFullScreen,
        getShowNotice,
        getShowContent,
        getShowBread,
        getShowHeaderLogo,
        getShowHeader,
        getShowSearch,
        getUseLockPage,
        getShowBreadTitle,
        getShowFullHeaderRef,
      } = useHeaderSetting();

      const { getShowLocalePicker } = useLocale();

      const { getIsMobile } = useAppInject();

      const getHeaderClass = computed(() => {
        const theme = unref(getHeaderTheme);
        return [
          prefixCls,
          {
            [`${prefixCls}--fixed`]: props.fixed,
            [`${prefixCls}--mobile`]: unref(getIsMobile),
            [`${prefixCls}--${theme}`]: theme,
          },
        ];
      });

      const getShowFullHeader = computed(() => {
        const route = unref(currentRoute);
        return getShowFullHeaderRef && route.path.startsWith('/micro-');
      });

      const getShowSetting = computed(() => {
        if (!unref(getShowSettingButton)) {
          return false;
        }
        const settingButtonPosition = unref(getSettingButtonPosition);

        if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
          return unref(getShowHeader);
        }
        return settingButtonPosition === SettingButtonPositionEnum.HEADER;
      });

      const getLogoWidth = computed(() => {
        if (!unref(getIsMixMode) || unref(getIsMobile)) {
          return {};
        }
        const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
        return { width: `${width}px` };
      });

      const getSplitType = computed(() => {
        return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
      });

      const getMenuMode = computed(() => {
        return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
      });

      const appStore = useAppStore();
      const programModalType = ref(appStore.getProgramModalType);

      // /**
      //  * 首页多租户部门弹窗逻辑
      //  */
      const loginSelectRef = ref();
      const portValue = ref('');
      portValue.value = window.location.port;
      function showLoginSelect() {
        //update-begin---author:liusq  Date:20220101  for：判断登录进来是否需要弹窗选择租户----
        //判断是否是登陆进来
        const loginInfo = toRaw(userStore.getLoginInfo) || {};
        if (!!loginInfo.isLogin) {
          loginSelectRef.value.show(loginInfo);
        }
        //update-end---author:liusq  Date:20220101  for：判断登录进来是否需要弹窗选择租户----
      }

      function loginSelectOk() {
        console.log('成功。。。。。');
      }

      // 用户下拉框应该在以下情况中隐藏：
      // 1. 本页面是由其他页面的 iframe 嵌入的页面
      const showUserDropdown = computed(() => {
        return window.self === window.top;
      });

      const changeModalType = () => {
        programModalType.value = !Boolean(programModalType.value);
        appStore.setModalType(programModalType.value);
        window.location.reload();
      };

      const toggleDataPickerHover = () => {
        setDataPickerHoverEnabled(!dataPickerHoverEnabled.value);
      };

      onMounted(() => {
        showLoginSelect();
      });

      return {
        portValue,
        prefixCls,
        getHeaderClass,
        getShowHeaderLogo,
        getHeaderTheme,
        getShowHeaderTrigger,
        getIsMobile,
        getShowBreadTitle,
        getShowBread,
        getShowContent,
        getSplitType,
        getSplit,
        getMenuMode,
        getShowTopMenu,
        getShowLocalePicker,
        getShowFullScreen,
        getShowNotice,
        getUseErrorHandle,
        getLogoWidth,
        getIsMixSidebar,
        getShowSettingButton,
        getShowSetting,
        getShowSearch,
        getUseLockPage,
        loginSelectOk,
        loginSelectRef,
        currentRoute,
        title,
        getShowFullHeader,
        noHeadeLink,
        showUserDropdown,
        sysOrgCode,
        homePath,
        hasPermission,
        isShowQy,
        programModalType,
        changeModalType,
        dataPickerHoverEnabled,
        toggleDataPickerHover,
        AIOpenIcon,
        AICloseIcon,
      };
    },
  });
</script>
<style lang="less">
  @import './index.less';
  //update-begin---author:scott ---date:2022-09-30  for：默认隐藏顶部菜单面包屑-----------
  //顶部欢迎语展示样式
  @prefix-cls: ~'@{namespace}-layout-header';

  .@{prefix-cls} {
    display: flex;
    padding: 0 8px;
    // align-items: center;

    .headerIntroductionClass {
      margin-right: 4px;
      margin-bottom: 2px;
      border-bottom: 0px;
      border-left: 0px;
    }

    &--light {
      .headerIntroductionClass {
        color: @breadcrumb-item-normal-color;
      }
    }

    &--dark {
      .headerIntroductionClass {
        color: rgba(255, 255, 255, 0.6);
      }

      .anticon {
        color: rgba(255, 255, 255, 0.8);
      }
    }

    //update-end---author:scott ---date::2022-09-30  for：默认隐藏顶部菜单面包屑--------------
  }

  // background: linear-gradient(#003f77, #0a134c);
  //   // background: linear-gradient(#02050c 0%, #03114c 100%);
  //   // border: none;
  //   border-bottom: 1px solid #81aabf01;
  //   padding-bottom: 2px;
  //   box-shadow: 0 0 20px #44caff55 inset;
  .normal-header {
    height: 52px !important;
    line-height: 52px !important;
    background: var(--vent-header-bg-color) !important;
    // background: linear-gradient(#005177,#0a344c) !important;
    border-bottom: 1px solid #81aabf01 !important;
    padding-bottom: 2px !important;
    box-shadow: 0 0 20px #44caff55 inset !important;
    padding: 0 8px !important;
  }

  .no-header {
    height: 0px !important;
    display: none !important;
  }
  .zaihai-header {
    position: absolute;
    background: transparent !important;
  }

  .header-nav-title {
    background-image: linear-gradient(#ffffff 50%, #60f4ff);
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 600;
  }
  .right-position {
    display: flex;
    align-items: center;
    height: 48px;
    width: max-content;
  }
</style>