yos_web/src/components/newLayout/modules/header.vue

<template>
  <div class="flex">
    <el-popover placement="top" width="300">
      <div class="app-flex">
        <p
          class="appLink"
          v-for="app in menuApp"
          :key="app.index"
          @click="handelMenuAppClick(app, 'app')"
        >
          {{ app.systemappname }}
        </p>
      </div>
      <div slot="reference" class="search_panel">
        <input
          @focus="colorWhite = false"
          @blur="colorWhite = true"
          :placeholder="$t('输入搜索内容')"
          v-model="searchValue"
        />
        <i
          class="el-icon-search"
          :style="colorWhite ? 'color:#fff' : 'color:#000'"
        ></i>
      </div>
    </el-popover>
    <div class="right-operation flex-align-center">
      <!-- <div class="weather">
      <p>今日天气:{{weather.daily?weather.daily[0].dayText:""}}</p>
      <p>{{weather.daily?weather.daily[0].low:""}}℃ ~ {{weather.daily?weather.daily[0].high:""}}℃</p>
    </div> -->
      <!-- 语言   -->
      <!--    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link" style="color: #FFF;">
        语言<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="item in langusge" :key="item.index" :command="item.languagecode">{{item.languagename}}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>-->
      <!--    <el-divider direction="vertical"></el-divider>-->
      <el-button
        size="mint"
        type="primary"
        style="
          background-color: rgb(52 106 145);
          margin-right: 20px;
          color: #ffffff;
        "
        v-if="(usertype == 1 || usertype == 0) && (siteid == 'HY' || siteid == 'YOSTEST1')"
        @click="$router.push('/serviceDataScreen')"
        >{{ $t(`业务数据大屏`) }}</el-button
      >
      <svg
        t="1725853431060"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="9958"
        width="16"
        height="16"
      >
        <path
          d="M512 0a512 512 0 1 0 512 512A513.4848 513.4848 0 0 0 512 0z m371.2 262.4a467.968 467.968 0 0 1 76.8 217.6h-256A990.464 990.464 0 0 0 688.0256 307.2a1241.0368 1241.0368 0 0 0 195.1744-44.8zM838.4 204.8a1267.456 1267.456 0 0 1-166.4 38.4 1264.128 1264.128 0 0 0-51.2-166.4 454.1952 454.1952 0 0 1 217.6 128zM384 480a1396.1728 1396.1728 0 0 1 16.0256-166.4c35.2256 3.2256 73.6256 6.4 108.8 6.4 38.4 0 73.6256-3.1744 108.8-6.4a946.2784 946.2784 0 0 1 15.9744 166.4z m256 64a1396.1728 1396.1728 0 0 1-15.9744 166.4c-38.4-3.1744-73.5744-6.4-111.9744-6.4s-73.6256 3.2256-108.8 6.4a946.2784 946.2784 0 0 1-15.9744-166.4zM480 64h64a1058.1504 1058.1504 0 0 1 67.2256 185.6A533.7088 533.7088 0 0 1 512 256c-32 0-64-3.1744-96-3.1744a1089.8944 1089.8944 0 0 1 64-188.8256z m-76.8 12.8a843.6736 843.6736 0 0 0-51.2 166.4A1398.8352 1398.8352 0 0 1 185.6 204.8a454.1952 454.1952 0 0 1 217.6-128zM140.8 262.4A1241.0368 1241.0368 0 0 0 336.0256 307.2a990.464 990.464 0 0 0-15.9744 172.8h-256a455.68 455.68 0 0 1 76.8-217.6z m0 499.2a467.968 467.968 0 0 1-76.8-217.6h256A990.464 990.464 0 0 0 336.0256 716.8a1241.0368 1241.0368 0 0 0-195.2256 44.8zM185.6 819.2a1267.456 1267.456 0 0 1 166.4-38.4 1264.128 1264.128 0 0 0 51.2 166.4 454.1952 454.1952 0 0 1-217.6-128z m358.4 140.8h-64a1058.1504 1058.1504 0 0 1-67.1744-185.6c32-3.1744 64-3.1744 96-3.1744s64 3.2256 96 3.2256a900.7616 900.7616 0 0 1-60.7744 185.6z m76.8-12.8a843.6736 843.6736 0 0 0 51.2-166.4 1398.8352 1398.8352 0 0 1 166.4 38.4 454.1952 454.1952 0 0 1-217.6 128z m262.4-185.6A1241.0368 1241.0368 0 0 0 687.9744 716.8a990.464 990.464 0 0 0 16.0256-172.8h256a455.68 455.68 0 0 1-76.8 217.6z"
          fill="#FFFFFF"
          p-id="9959"
        ></path>
      </svg>
      <el-dropdown style="margin-left: 5px; margin-right: 30px">
        <!--      <el-button type="default" size="small" style="margin-right: 10px;">
        {{languagename}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>

      </el-button>-->
        <span class="el-dropdown-link">
          <div class="flex">
            {{ languagename }}<i class="el-icon-arrow-down el-icon--right"></i>
          </div>
        </span>

        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="item in langusge"
            :key="item.index"
            @click.native="changeLanguage(item.languagecode)"
            >{{ item.languagename }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
      <el-tooltip content="强制刷新配置" placement="bottom">
        <i
          class="el-icon-refresh"
          style="margin-left: 15px; margin-right: 15px; cursor: pointer; font-size: 16px"
          :class="{ 'is-loading': refreshing }"
          @click="refreshConfigs"
        ></i>
      </el-tooltip>
      <el-dropdown>
        <span class="el-dropdown-link">
          <div class="flex">
            {{ accountInfo.name }}-{{ accountInfo.sitename
            }}<i class="el-icon-arrow-down el-icon--right"></i>
          </div>
        </span>
        <el-dropdown-menu
          style="width: 200px; text-align: center"
          slot="dropdown"
        >
          <el-dropdown-item
            @click.native="$router.push({ path: '/user_center' })"
            >{{ $t("个人中心") }}</el-dropdown-item
          >
          <!-- <el-dropdown-item v-if="canChangeSite" @click.native="$router.replace({path:'/accounts'})">切换账号</el-dropdown-item> -->
          <el-dropdown-item
            v-for="item in accountList"
            :key="item.index"
            divided
            @click.native="selectAccount(item)"
          >
            <div class="flex-align-center flex-between">
              <p>
                <span class="avatar-mini">{{
                  item.enterprisename
                    ? item.enterprisename.substr(0, 1)
                    : item.sitename.substr(0, 1)
                }}</span
                ><span>{{
                  item.enterprisename ? item.enterprisename : item.sitename
                }}</span>
              </p>
              <small>{{ item.name }}</small>
            </div>
          </el-dropdown-item>
          <el-dropdown-item divided @click.native="loginOut()">{{
            $t("退出登录")
          }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import {
  i18nGetResources,
  i18nChangeLanguage,
  i18nAddResources,
} from "@wangeditor/editor";
import { mapGetters } from "vuex";
import axios from "axios";
import Vue from "vue";

export default {
  data() {
    return {
      accountInfo: {},
      url: "",
      weather: {},
      searchValue: "",
      accountList: [],
      colorWhite: true,
      langusge: [],
      nowType: "ZH",
      languagename: "",
      usertype: JSON.parse(sessionStorage.getItem("active_account")).usertype,
      siteid: JSON.parse(sessionStorage.getItem("active_account")).siteid,
      refreshing: false,
    };
  },
  props: ["onRender"],
  computed: {
    ...mapGetters({
      siteinfo: "siteinfo",
      menuApp: "menuApp",
    }),
    canChangeSite() {
      let accounts = JSON.parse(sessionStorage.getItem("account_list"));
      if (accounts.length > 1) return true;
    },
  },
  methods: {
    //修改富文本编辑器语言
    editorChangeLanguage() {
      console.log("zh-CN", i18nGetResources("zh-CN"));
      const types = {
        ZH: "zh-CN",
        EN: "en",
      };
      if (types[this.nowType]) {
        i18nChangeLanguage(types[this.nowType]);
      } else {
        let resources = i18nGetResources("zh-CN");
        const handleResources = (obj) => {
          for (const key in obj) {
            if (typeof obj[key] == "object") {
              handleResources(obj[key]);
            } else {
              obj[key] = this.$t(obj[key]);
            }
          }
        };
        handleResources(resources);
        i18nAddResources(this.nowType, resources);
        i18nChangeLanguage(this.nowType);
      }
    },
    // 选择登录账号
    async selectAccount(item) {
      let arr = ["module_info", "active_modules", "folderid"];
      arr.forEach((key) => {
        sessionStorage.removeItem(key);
      });
      sessionStorage.setItem("active_account", JSON.stringify(item));
      await this.basicData.query_userauth(() => {
        setTimeout(() => {
          this.$router.go(0);
        }, 1000);
      });
      this.siteInfos();
      this.accountInfo = JSON.parse(sessionStorage.getItem("active_account"));
      this.accountList = JSON.parse(
        sessionStorage.getItem("account_list")
      ).filter((e) => {
        return e.siteid !== this.accountInfo.siteid;
      });
    },
    async getWeather() {
      const res = await axios.get(this.url);
      this.weather = res.data.data;
    },
    siteInfos() {
      this.$store.dispatch("querySiteInfo", {
        classname: "webmanage.site.site",
        method: "querySite",
        content: {},
      });
    },
    loginOut() {
      this.$confirm(this.$t("是否要退出当前账号") + "?", this.$t("提示"), {
        confirmButtonText: this.$t("确定"),
        cancelButtonText: this.$t("取消"),
        type: "warning",
      })
        .then(() => {
          sessionStorage.clear();
          this.$router.push("/");
          location.reload();
        })
        .catch((err) => {
          console.log(err);
          this.$message({
            type: "info",
            message: this.$t("已取消"),
          });
        });
    },
    changeAccount() {
      this.$router.push("/accounts");
    },
    //跳转到应用,并设设置激活模块
    handelMenuAppClick(app, type) {
      let system = JSON.parse(sessionStorage.getItem("module_info"));

      let mod = system
        .filter((e) => {
          return e.systemid === app.systemid;
        })[0]
        .modules.filter((e) => {
          return e.systemmoduleid === app.systemmoduleid;
        })[0];

      let clickApp = mod.apps.filter((e) => {
        return e.systemappid === app.systemappid;
      });

      sessionStorage.setItem("active_modules", JSON.stringify(mod));

      this.$emit(
        "getModules",
        system.filter((e) => {
          return e.systemid === app.systemid;
        })[0].modules,
        type
      );

      this.$store.dispatch("setActiveApp", {
        name: app.systemappname,
        app: clickApp[0],
        val: this.searchValue,
      });

      this.$router.push({ path: clickApp[0].path });
    },
    async languagelist() {
      const res = await this.$api.requested({
        id: 10026401,
      });
      this.langusge = res.data;
      this.nowType = localStorage.getItem("lang")
        ? localStorage.getItem("lang")
        : "ZH";
      this.languagename =
        this.langusge.find((v) => v.languagecode == this.nowType)
          .languagename || "简体中文";
      localStorage.setItem("languagename", this.languagename);
      this.editorChangeLanguage();
    },
    async changeLanguage(type) {
      this.nowType = type;
      this.languagename =
        this.langusge.find((v) => v.languagecode == this.nowType)
          .languagename || "简体中文";
      localStorage.setItem("languagename", this.languagename);
      localStorage.setItem("lang", type);
      localStorage.setItem("languagename", this.languagename);
      this.$nextTick(() => {
        this.$i18n.locale = type;
        this.editorChangeLanguage();
        this.$api
          .requested({
            classname: "sysmanage.develop.userauthforweb.userauth",
            method: "query_userauth",
            content: {
              place: 1,
              date: Date.now(),
            },
          })
          .then((res) => {
            let active_modules = JSON.parse(
              sessionStorage.getItem("active_modules")
            );
            res.data.forEach((v) => {
              let item = v.modules.find((e) => {
                return e.systemmoduleid == active_modules.systemmoduleid;
              });
              if (item) {
                active_modules = item;
                try {
                  let activeApp = item.apps.find(
                    (v) =>
                      v.systemappid == this.$store.getters.activeApp.systemappid
                  );
                  const link = () => {
                    this.$router.push({ path: app.path });
                  };
                  this.$store.dispatch("setActiveApp", {
                    name: activeApp.systemappname,
                    app: activeApp,
                    val: this.searchValue,
                    link,
                  });
                } catch (error) {}
              }
            });
            sessionStorage.setItem("module_info", JSON.stringify(res.data));
            sessionStorage.setItem(
              "active_modules",
              JSON.stringify(active_modules)
            );
            this.$emit("onRender");
            this.basicData.querySite_Parameter();
          });
      });
    },
    async refreshConfigs () {
      this.refreshing = true
      try {
        await this.basicData.refreshAllConfigs()
        this.$message.success('配置刷新成功')
        setTimeout(() => {
          this.$router.go(0)
        }, 300)
      } catch (e) {
        this.refreshing = false
        this.$message.error('配置刷新失败，请重试')
      }
    },
  },
  mounted() {
    this.siteInfos();
    this.languagelist();

    this.languagename = localStorage.getItem("languagename") ||"简体中文";

    try {
      this.languagename = localStorage.getItem("languagename") || "简体中文";
    } catch (error) {
      this.languagename = "简体中文";
    }

    this.accountInfo = JSON.parse(sessionStorage.getItem("active_account"));
    this.accountList = JSON.parse(
      sessionStorage.getItem("account_list")
    ).filter((e) => {
      return e.siteid !== this.accountInfo.siteid;
    });
    this.basicData.querySite_Parameter();
  },
};
</script>
<style>
.el-header {
  height: 50px !important;
}
.search_panel {
  position: relative;
}
.search_panel i {
  position: absolute;
  right: 0px;
  height: 30px;
  width: 30px;
  text-align: center;
  line-height: 30px;
  color: #333;
}
.search_panel input {
  background: rgba(255, 255, 255, 0.2);
  height: 30px;
  line-height: 30px;
  width: 300px;
  padding: 0 30px 0 20px;
  border: none;
  border-radius: 30px;
  color: #fff;
  outline: none;
}
.search_panel input::placeholder {
  color: #fff;
}
.search_panel input:focus {
  background: #fff;
  color: #333;
}
.search_panel input:focus::placeholder {
  color: #333;
}
</style>
<style scoped>
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  color: #fff;
}
.right-operation {
  padding: 0 20px;
}
.search_panel {
  margin: 16px 0;
}
.weather {
  font-size: 12px;
  margin-right: 16px;
  color: #f1f2f3;
  transition: 0.2s linear;
  border-radius: 4px;
  padding: 5px 40px;
}
.weather:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}
.appLink {
  padding: 2px 5px;
  border: 1px solid #f1f2f3;
  border-radius: 5px;
  margin-bottom: 10px;
  margin-left: 5px;
  cursor: pointer;
  font-size: 12px;
}
.app-flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.avatar-mini {
  display: inline-block;
  position: relative;
  height: 20px;
  width: 20px;
  line-height: 20px;
  text-align: center;
  margin-right: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  border-radius: 100%;
  background: #3874f6;
}
.inactive {
  background: red !important;
}
</style>