fj-dc-ui/.svn/pristine/d3/d3823c8fa520188e016c6cccbffb8127c3d6e440.svn-base

<template>
  <div id="systemHeader" >
    <div id="systemInformation" class="style_for_ie" style="min-width: 260px;">
      <div id="systemInformationIcon">
        <img class="logoImg" src="../../assets/images/province_icon.png" alt="" style="width:40px;height:40px;">
      </div>
      <div id="systemInformationTitle" style="margin-left:10px;font-size:18px;font-weight: 700;">
        {{systemInformationTitle}}
      </div>
    </div>
<!--    <div class="scrollBtn" @click="pointl(0)" v-if="leftBtn && !isFujian"><i class="el-icon-arrow-left"></i></div>-->
    <div id="systemMenuContainer"
      style="overflow:hidden;width:calc(100% - 520px);font-size: 14.5px;font-family: '微软雅黑, sans-serif" ref="scroll">
      <systemMenu @addSystemMenuView='menuItemClick' :changeSystem="changeSystem" @initFinish="initFinish"></systemMenu>
    </div>
<!--    <div class="scrollBtn" @click="pointl(1)" v-if="rightBtn && !isFujian"><i class="el-icon-arrow-right"></i></div>-->
    <!-- class="systemTheme"  -->
    <div id="userInforContainer" style="width: 330px;display: flex;justify-content: center;align-items: center">
      <div id="orgListContainer" style="width: 100px;" v-if="popperClass">
        <!-- <el-form-item label="当前机构"> -->
        <el-select @change="changeOrgId" v-model="defaultOrgId"  placeholder="test">
          <el-option v-for="(item,index) in allOrg" :key="index" :label="item.orgNm" :value="item.orgId">
          </el-option>
        </el-select>
        <!-- </el-form-item> -->
      </div>
      <div id="otherSystemLinks" style="display:flex;flex-direction:row;justify-content:flex-start;align-items:center">
        <el-dropdown>
          <span class="el-dropdown-link" style="display: flex;align-items: center;font-size: 13px;color: white;padding-top: 2px;cursor:pointer;">
            <img src="../../assets/images/user.png" alt="" style="margin-top: 3px;">&nbsp;{{userName}}
          </span>
          <el-dropdown-menu slot="dropdown" style="width: 130px;">
            <span @click="showModal" style="display: flex;justify-content:left;align-items:center;cursor: pointer;color:#000000;font-size: 14px;letter-spacing: 2px;padding: 8px;font-weight:bold;"><img src="../../assets/images/password.png" style="width: 20px;height:18px;margin-right: 6px;"></img>修改密码</span>
            <el-dropdown @command="dropDownClick" v-if="(perType == '1' || perType == '2')"  style="width: 100%;">
              <span class="el-dropdown-link" style="width: 100%;display: flex;justify-content: left;align-items: center;color:#000000;font-size: 14px;font-weight:bold;padding: 8px;cursor:pointer;">
                <img src="../../assets/images/scan.png" title="app下载" style="margin-right:6px;cursor: pointer;width: 20px;height:18px;">
                <span>扫描下载app</span>
              </span>
              <el-dropdown-menu slot="dropdown">
                <div style="padding:10px;width: 200px;">
                  <img :src="qrCodeDownImg" style="width:200px;">
                </div>
              </el-dropdown-menu>
            </el-dropdown>
<!--            <el-dropdown v-if="isSc" style="width: 100%;">-->
<!--              <span class="el-dropdown-link" style="cursor:pointer;width:100%;display: flex;align-items: center;padding: 8px;font-size: 14px;font-weight:bold;color: #000000;cursor:pointer;justify-content:left;">-->
<!--                <img src="../../assets/images/pf.png" alt="" style="margin-top: 3px;width: 20px;height:18px;margin-right: 6px;">&nbsp;-->
<!--                <span>切换皮肤</span>-->
<!--              </span>-->
<!--              <el-dropdown-menu slot="dropdown">-->
<!--                <li style="width:80px;height:30px;display: flex;align-items: center;padding-left: 15px;letter-spacing: 3px;font-weight: bold;font-size: 15px;color:#00213a;border-bottom: 1px solid #cdd4d2;cursor:pointer;" @click="changeThem(0)">-->
<!--                  <span style="display: block;width: 20px;height:20px;background: #00213a;border-radius: 10px"></span>&nbsp;&nbsp;深色-->
<!--                </li>-->
<!--                <li style="width:80px;height:30px;display: flex;align-items: center;padding-left: 15px;letter-spacing: 3px;font-weight: bold;font-size: 15px;color:#37baf3;cursor:pointer;" @click="changeThem(1)">-->
<!--                  <span style="display: block;width: 20px;height:20px;background: #37baf3;border-radius: 10px"></span>&nbsp;&nbsp;浅色-->
<!--                </li>-->
<!--              </el-dropdown-menu>-->
<!--            </el-dropdown>-->
          </el-dropdown-menu>
        </el-dropdown>


<!--        <div-->
<!--          style="width: 30px;height:30px;display: flex;justify-content: center;align-items: center;background: #89d6f8;border-radius: 15px;margin-right: 5px;">-->
<!--          <img src="../../assets/images/user.png" alt=""></div>-->
<!--        <div-->
<!--          style="display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;align-items: center;font-size: 10px;">-->
<!--          <span class="account">{{userName}}</span>-->
<!--          &lt;!&ndash; <span class="account">{{persType}}</span> &ndash;&gt;-->
<!--        </div>-->
        <el-dropdown @command="dropDownClick" v-if="(perType == '1' || perType == '2')">
          <span class="el-dropdown-link change_system_text" style="">
            切换系统
            <!-- <img src="../../assets/img/weibiaoti-.png" title="切换主题" style="margin: 10px 0px 0 10px;cursor: pointer;"> -->
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="'2'" :class="{'isSelect':curApp==2}">切换至稽察系统</el-dropdown-item>
            <el-dropdown-item :command="'1'" :class="{'isSelect':curApp==1}">切换至督查系统</el-dropdown-item>
            <el-dropdown-item :command="'3'" v-if="isCd" :class="{'isSelect':curApp==3}">切换至日常监督系统</el-dropdown-item>
            <!--            <el-dropdown-item :command="'theme'">切换主题</el-dropdown-item>-->
          </el-dropdown-menu>
        </el-dropdown>
<!--        <img v-else src="../../assets/img/weibiaoti-.png" title="切换主题" style="margin: 5px 0px 0 10px;cursor: pointer;"-->
<!--          @click="changeTheme">-->
        <img class="exit" @click="exit" src="../../assets/images/exits.png" alt="" title="退出">
        <el-dropdown>
          <span class="el-dropdown-link" style="display: flex;align-items: center;font-size: 13px;color: white;cursor:pointer;margin-left: 10px;">
            <img src="../../assets/images/downIcon.png" alt="" style="margin-top: 3px;width: 20px;height:20px;">&nbsp;
          </span>
          <el-dropdown-menu slot="dropdown">
            <li style="width:130px;height:30px;display: flex;align-items: center;font-weight: bold;font-size: 15px;color:#37baf3;border-bottom: 1px solid #cdd4d2;cursor:pointer;">
              <a :href="isFujian?`${hostUrl}${pageOfficeUrlFj}`:pageOfficeUrl" download="posetup.exe" style="text-decoration: underline;text-indent: 10px;">PageOffice下载</a>
            </li>
            <li style="width:130px;height:30px;display: flex;align-items: center;font-weight: bold;font-size: 15px;color:#37baf3;cursor:pointer;">
              <a :href="wpsUrl" download="wps" style="text-decoration: underline;text-indent: 10px;" target="_blank">WPS下载</a>
            </li>
          </el-dropdown-menu>
        </el-dropdown>
<!--        <div v-if="isOrgIdType">-->
<!--          <span style="font-size: 12px; margin: 0 15px;"> | </span>-->
<!--          <a href="../../static/help.html" target="_blank" class="toptitle">帮助中心</a>-->
<!--        </div>-->

<!--        <ul v-show="isShow" @mouseover="showItem" @mouseout="hideItem">-->
<!--          <li @click="showModal">修改密码</li>-->
<!--          <li @click="exit">退&#x3000;&#x3000;出</li>-->
<!--        </ul>-->

      </div>
    </div>

    <!-- <m-password v-show='modalShow' @modifySuccess="modifyPwd"></m-password> -->
    <el-dialog
      title="修改密码"
      :visible.sync="dialogVisible"
      width="350px">
      <div style="width: 300px;padding-bottom: 10px">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="新密码" prop="pwd">
            <el-input v-model="form.pwd"></el-input>
          </el-form-item>
          <el-form-item label="" style="margin-top: 30px;">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="updatePass">确 定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  // import('../../assets/')
  import {ipPath} from '../../utils/component'
  import aes from '../../utils/aes';
  import theme from '../../store/theme'
  import orgStatus from '../../store/orgChange.js'
  import request from '@util/gw_ajax_request'
  import { mapGetters, mapActions } from 'vuex'
  import systemMenu from './systemMenuBar.vue'
  // import {dictList} from '../../utils/myRequest/api.js'
  // import mPassword from '../../views/Login/modifyPwd.vue'
  import {hostUrl} from '@util/global_variable'
  let validatePwd = (rule, value, callback) => {
      if (value === '') {
          callback(new Error('密码不能为空'));
      } else if(!(/^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*)(?=.*[`~!@#$%^&*()_\-+=<>.?:"{}].*).{8,20}$/.test(value))) {
          callback(new Error("密码必须包含大写字母,小写字母，数字,特殊字符,且长度为8到20位"))
      } else {
          callback();
      }
  };
  export default {
    name: 'systemHeader',
    components: {
      'systemMenu': systemMenu,
      // 'm-password': mPassword
    },
    data() {
      return {
        rules:{
            pwd: [{required: true, validator: validatePwd, trigger: "change"}],
        },
        form:{
            guid:localStorage.getItem("userid"),
            pwd:""
        },
        dialogVisible:false,
        leftBtn: false,
        rightBtn: false,
        themeName: 'light',
        systemInformationTitle: '福建水利监督',
        systemInformationIcon: '../assets/icon/lankaoLogo.png',
        userName: localStorage.getItem('account'),
        dictAll: null,
        dictTypes: [],
        dictionary: {},
        dictItem: {},
        isShow: 0,
        modalShow: 0,
        defaultOrgId: localStorage.getItem('currentOrgId'),
        allOrg: [],
        popperClass: 'hide_option',
        logoImg: '../assets/images/province_logo.png',
        //allOrg:localStorage.getItem("allOrg")
        changeSystem: false,
        perType: localStorage.getItem('persType'),
        isOrgIdType: false,
        qrCodeDownImg:"",
        pageOfficeUrl:"/pageofficePath/posetup.exe",
        pageOfficeUrlFj:"/upload/office/posetup.exe",
        wpsUrl:"https://www.wps.cn/"
      }
    },
    computed: {
      persType: function () {
        let pt = localStorage.getItem('persType');
        let re = '';
        if (pt) {
          switch (pt) {
            case '1': re = '管理员'; break;
            case '2': re = '机构领导'; break;
            case '3': re = '督查人员'; break;
          }
        }
        return re;
      },
      persId() {
        return localStorage.getItem('userid') ? localStorage.getItem('userid') : ''
      },
      ownApp() {
        return localStorage.getItem('ownApp');
      },
      isSc(){
        if(localStorage.getItem('currentRlcode').substring(0,2)=='51'){
            return true;
        }else{
            return false;
        }
      },
      isFujian(){
          if(localStorage.getItem('currentRlcode').substring(0,2)=='35'){
              return true;
          }else{
              return false;
          }
      },
      isCd(){
          var path = window.location.href;
          return path.indexOf("221.237.107.122")>-1
      },
      hostUrl(){
          return hostUrl
      },
      curApp(){
         return localStorage.getItem('ownApp')
      },
      isHb(){
        if(localStorage.getItem('currentRlcode') && localStorage.getItem('currentRlcode').substring(0,2)=="42"){
          return true;
        }else{
          return false;
        }
      }
    },
    created() {
      this.isOrgIdType = false;
      let ownApp = localStorage.getItem('ownApp')
      let currentOrgId = localStorage.getItem("currentOrgId")
      var path = window.location.href;
      if (ownApp == 1) {
        this.logoImg = '../assets/images/province_logo.png'
        if (path.indexOf('221.237.107.122')>-1) {
           this.systemInformationTitle = '成都市水务监督'
        }else if (currentOrgId == '034') {
          this.systemInformationTitle = '福建水利监督平台'
        } else if (currentOrgId == '041') {
          this.systemInformationTitle = '水利督查'
        } else if (localStorage.getItem('currentRlcode').substring(0,2)=='37') {
          this.systemInformationTitle = '山东省水利监督信息系统'
        } else if (currentOrgId == '055') {
            this.systemInformationTitle = '海南水务监督平台'
        }else if (localStorage.getItem('currentRlcode').substring(0,2)=='44') {
            this.systemInformationTitle = '广东省水利监督'
        }else {
          this.systemInformationTitle = localStorage.getItem("currentOrgNm") + '水利监督'
        }
      } else if(ownApp == 2){
        this.logoImg = '../assets/images/province_logo.png'
        if (path.indexOf('221.237.107.122')>-1) {
            this.systemInformationTitle = '成都市水务监督'
        } else if (currentOrgId == '034') {
          this.systemInformationTitle = '福建水利稽察平台'
        } else if (currentOrgId == '036'){
          this.systemInformationTitle = '浙江省水利稽察数字化应用'
        } else if (currentOrgId == '041') {
          this.systemInformationTitle = '水利稽察'
        } else if (localStorage.getItem('currentRlcode').substring(0,2)=='37') {
          this.systemInformationTitle = '山东省水利稽察信息系统'
        } else if (currentOrgId == '055') {
            this.systemInformationTitle = '海南水务稽察平台'
        } else if (localStorage.getItem('currentRlcode').substring(0,2)=='44') {
            this.systemInformationTitle = '广东省水利稽察'
        }else {
          this.systemInformationTitle = localStorage.getItem("currentOrgNm") + '水利稽察'
          this.isOrgIdType = true;
        }
      }else{
          this.systemInformationTitle = '成都市水务监督'
      }
      // this.changeTitle()
    },
    mounted() {
      // this.$nextTick(() => {
      //     this.resizeScroll();
      // });
      ipPath(this);
      window.addEventListener('resize', () => {
        this.resizeScroll();
      })
      this.allOrg = JSON.parse(localStorage.getItem("allOrg"));
      console.log(this.allOrg);
      // 是否显示切换省份下拉框  省份为一个则不显示
      this.popperClass = this.allOrg.length && this.allOrg.length > 1 ? true : false
      if(this.isHb){
        setTimeout(()=>{
          if (!localStorage.getItem('hasReloaded')) {
            localStorage.setItem('hasReloaded', 'true');
            window.location.reload();
          }
        },600)
      }
    },
    methods: {
      changeThem(type){

        if(type=="0"){
            document.cookie = "isDcTheme="+escape('1');
            localStorage.setItem("style","0");
            document.documentElement.style.setProperty('--theme_head_bar_active','#0e4f74');
            document.documentElement.style.setProperty('--theme_head_color','#003e60');
            document.documentElement.style.setProperty('--theme_head_bar','linear-gradient(0deg,rgb(0 44 76),rgb(0 60 93),rgb(0 51 80))');
            document.documentElement.style.setProperty('--main_background',`url(${require('../../assets/bjdc.png')}) no-repeat`);
            document.documentElement.style.setProperty('--header_background',`url(${require('../../assets/headerdc.png')}) no-repeat`);
            document.documentElement.style.setProperty('--bg_color','#001C2E');
            document.documentElement.style.setProperty('--border-color','#002d49');
            document.documentElement.style.setProperty('--main_color','#01c3dc');
            document.documentElement.style.setProperty('--scrollbar-color','#006397 #001C2E');
            document.documentElement.style.setProperty('--hover-bg','#07537b');
            document.documentElement.style.setProperty('--hover-color','#64b2ba');
            document.documentElement.style.setProperty('--summary-bg','linear-gradient(180deg, #FFFFFF 0%, #ADE8FA 100%)');
            document.documentElement.style.setProperty('--summary-color','#C1F053');
            document.documentElement.style.setProperty('--summary-img-bg','none');
            document.documentElement.style.setProperty('--echart_title','#084d74');
            document.documentElement.style.setProperty('--echart_border','5px solid #003d5e');
            document.documentElement.style.setProperty('--echarts_map_bg','#002845');
            document.documentElement.style.setProperty('--echarts_map_bg_start','#00497d');
            document.documentElement.style.setProperty('--echarts_map_spin','#ff9b41');
            document.documentElement.style.setProperty('--news_color','#aae0fc');
            document.documentElement.style.setProperty('--news_border','1px solid #4f8dc0');
            document.documentElement.style.setProperty('--tip_bg','#00213a');
            document.documentElement.style.setProperty('--tip_color','#2682b4');
            document.documentElement.style.setProperty('--boxborder_color','1px solid #144365');
            if(this.$route.fullPath.indexOf("/home")>-1){
                this.$router.push("/home"+"?tm="+new Date().getTime());
            }
            if(this.$route.fullPath.indexOf("/jchome")>-1){
                this.$router.push("/jchome"+"?tm="+new Date().getTime());
            }

        }
        if(type=="1"){
            document.cookie = "isDcTheme="+escape('0');
            localStorage.setItem("style","1");
            document.documentElement.style.setProperty('--theme_head_bar_active','#147DF4');
            document.documentElement.style.setProperty('--theme_head_color','#0dabf5');
            document.documentElement.style.setProperty('--theme_head_bar','linear-gradient(0deg,rgba(8,146,233,1),rgba(9,169,244,1),rgba(122,210,255,1))');
            document.documentElement.style.setProperty('--main_background',`url(${require('../../assets/scbg.jpg')}) no-repeat`);
            document.documentElement.style.setProperty('--header_background','#09a4f1');
            document.documentElement.style.setProperty('--bg_color','white');
            document.documentElement.style.setProperty('--border-color','#C0C4CC');
            document.documentElement.style.setProperty('--main_color','#0c92d5');
            document.documentElement.style.setProperty('--scrollbar-color','#0c92d5 white');
            document.documentElement.style.setProperty('--hover-bg','#0c92d5');
            document.documentElement.style.setProperty('--hover-color','white');
            document.documentElement.style.setProperty('--summary-bg','linear-gradient(180deg, #0c92d5 0%, #0c92d5 100%)');
            document.documentElement.style.setProperty('--summary-color','#e6a23c');
            document.documentElement.style.setProperty('--summary-img-bg','#0c92d5');
            document.documentElement.style.setProperty('--echart_title','#09a4f1');
            document.documentElement.style.setProperty('--echart_border','5px solid #09a4f1');
            document.documentElement.style.setProperty('--echarts_map_bg','#5aaef1');
            document.documentElement.style.setProperty('--echarts_map_bg_start','#3384da');
            document.documentElement.style.setProperty('--echarts_map_spin','#ff9b41');
            document.documentElement.style.setProperty('--news_color','#88898d');
            document.documentElement.style.setProperty('--news_border','1px solid #C0C4CC');
            document.documentElement.style.setProperty('--tip_bg','#09a4f1');
            document.documentElement.style.setProperty('--tip_color','white');
            document.documentElement.style.setProperty('--boxborder_color','1px solid #09a4f1');
            if(this.$route.fullPath.indexOf("/home")>-1){
                this.$router.push("/home"+"?tm="+new Date().getTime());
            }
            if(this.$route.fullPath.indexOf("/jchome")>-1){
                this.$router.push("/jchome"+"?tm="+new Date().getTime());
            }
        }
      },
      updatePass(){
          this.$refs['form'].validate((valid) => {
              if (valid) {
                  var obj = {
                      guid:this.form.guid,
                      pwd:aes.encrypt(this.form.pwd)
                  }
                  request.post(`/bis/insp/updatePassword`,obj).then(res => {
                      if (res.success) {
                          this.$message.success("更新成功");
                          this.dialogVisible = false;
                          this.form.pwd = "";
                      } else {
                          this.$message.error(res.message);
                      }
                  });
              } else {
                  return false
              }
          })
      },
      initFinish() {
        this.resizeScroll();
      },
      pointl(p) {
        var el = this.$refs.scroll;
        var _self = this;
        if (p == 0) {
          if (el.scrollLeft <= 100) {
            //el.scrollLeft=0;
            _self.trans(el, el.scrollLeft - 0, "left");
          } else {
            //el.scrollLeft-=50;
            _self.trans(el, 100, "left");
          }
        } else {
          if (el.scrollWidth - el.scrollLeft <= 100) {
            //el.scrollLeft=el.scrollWidth;
            _self.trans(el, el.scrollWidth - el.scrollLeft, "right");
          } else {
            //el.scrollLeft+=50;
            _self.trans(el, 100, "right");
          }
        }
      },
      resizeScroll() {
        var el = this.$refs.scroll;
        var _self = this;
        setTimeout(function () {
          if (el.scrollWidth > el.clientWidth) {
            _self.leftBtn = true;
            _self.rightBtn = true;
          } else {
            _self.leftBtn = false;
            _self.rightBtn = false;
          }
        }, 100)
      },
      trans(o, p, t) {
        var ms = 1000 / 100;
        var i = 0;
        if (p == 0) {
          return;
        }
        var myInterval = setInterval(function () {
          if (t == "left") {
            o.scrollLeft -= 1;
            i++
            if (p == i) {
              clearInterval(myInterval)
            }
          }
          if (t == "right") {
            o.scrollLeft += 1;
            i++
            if (p == i) {
              clearInterval(myInterval)
            }
          }
        }, ms)
      },
      changeTheme() {
        if (this.themeName == 'light') {
          theme.commit('changeTestMsg', 'dark');
          this.themeName = 'dark';
        } else {
          theme.commit('changeTestMsg', 'light');
          this.themeName = 'light';
        }
      },
      changeOrgId(orgId) {
        localStorage.setItem("currentOrgId", orgId);
        let currentOrgObj = this.allOrg.filter(ele => ele.orgId == orgId)
        localStorage.setItem("currentRlcode", currentOrgObj[0].rlcode);
        this.ownAdName = localStorage.getItem('currentRlcode') == '660000000000' ? '师' : "省份"
        // 改变全局adcode状态
        this.$store.commit('changeAdCode', currentOrgObj[0].rlcode)
        localStorage.setItem("currentOrgNm", currentOrgObj[0].orgNm);
        console.log(localStorage.getItem('currentOrgNm'))
        orgStatus.commit('changeOrg', orgId);
        this.initRoot();
        this.$router.go(0);
      },
      changeTitle() {
        let currentOrgId = localStorage.getItem("currentOrgId")
        if (currentOrgId == '034') {
          document.title = '福建水利监督'
        } else {
          document.title = '督查业务系统'
        }
      },
      menuItemClick: function (menuItem) {
        this.$emit('addSystemMenuView', { viewItem: menuItem.viewItem });
      },
      showItem() {
        this.isShow = 1
      },
      hideItem() {
        this.isShow = 0
      },
      showModal() {
        this.dialogVisible = true;
      },
      GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
      },
      exit() {
        this.$message.success('退出成功')
        if(localStorage.getItem("isSplit")=="1"){
            localStorage.clear();
            this.$router.push('/logindc')
        }else if(localStorage.getItem("isSplit")=="2"){
            localStorage.clear();
            this.$router.push('/loginjc')
        }else{
            localStorage.clear();
            this.$router.push('/login')
        }
      },
      modifyPwd(val) {
        this.modalShow = val
      },
      dropDownClick(val) {
          // //debugger
        if (val == 'theme') {
          this.changeTheme()
        } else {

          // let ownApp = localStorage.getItem('ownApp')
          if (val == '2') {
            localStorage.setItem('ownApp', '2')
            orgStatus.commit('changeSystem', '2')
            this.$router.push('/jchome');
          } else if(val == '1'){
            localStorage.setItem('ownApp', '1')
            orgStatus.commit('changeSystem', '1')
            this.$router.push('/home');
          }else{
            localStorage.setItem('ownApp', '3')
            orgStatus.commit('changeSystem', '3')
            this.$router.push('/cdjctz');
          }
          this.changeSystem = !this.changeSystem

          // 切换系统时默认使用浅色主题
          theme.commit('changeTestMsg', 'light');
          this.themeName = 'light';
        }
      },
      initRoot(){
        if(this.isHb){
            const scriptElement = document.createElement('script');
            scriptElement.async = true;
            scriptElement.defer = true;
            scriptElement.src="http://183.95.190.106:8000/embed.js?protocol=http&host=10.142.147.43:8080&token=2172e2f8daf74a11&t="+new Date().getTime()
            document.head.appendChild(scriptElement);
        }
      }
    }
  }
</script>

<style>
  @import url("/src/assets/iconfont/iconfont.css");
  .isSelect{
    color:#0daaf4 !important;
  }
  .scrollBtn {
    width: 15px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    margin-left: 10px;
    margin-right: 10px;
    color: #0daaf4;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
  }

  .systemTheme {
    cursor: pointer;
    width: 1vw;
    height: 1vw;
    background-image: url('/src/assets/img/weibiaoti-.png');
  }

  .el-select .el-input__inner {
    cursor: pointer;
    font-size: 10px !important;
  }

  #systemHeader.light_back {
    background: url("/src/assets/header.png") no-repeat;
    background-size: cover;
  }

  #systemHeader.dark_back {
    background-color: #0d2145;
    background-image: url("/src/assets/systemMenuBarDark.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  #systemHeader {
    background: var(--theme_head_color);
    z-index: 10;
    height: 6vh;
    width: 100%;
    max-height: 6vh;
    /* background-color: rgb(25,24,81); */
    /* 27,29,85 */
    /* background-image:linear-gradient(to bottom,rgb(25,24,81), rgb(27,29,85)); */
    /*background-color: #0069d5;*/
    /* background-image: url("https://www.transparenttextures.com/patterns/bright-squares.png"); */
    /* background: url("/src/assets/systemMenuBar.png") no-repeat; */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: aliceblue;
    border-bottom-color: rgba(255, 255, 255, 0.15);
    border-bottom-style: solid;
    border-bottom-width: 0px;
  }

  #systemInformation {
    margin-left: 10px;
    /*text-shadow: 1px 1px 10px rgb(255,255,255,1);*/
    /*font-family: inherit!important;*/
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    /*flex-basis:19%;*/
    font-family: SourceHanSansCN-Medium;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    /* text-shadow:1px 2px 0px rgba(0, 0, 0, 0.42); */

    background: linear-gradient(0deg, rgba(246, 240, 240, 1) 0%, rgba(226, 226, 226, 1) 45.556640625%, rgba(255, 255, 255, 1) 47.900390625%, rgba(243, 243, 243, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  #systemInformationIcon {
    width: 36px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background-color: rgba(255, 255, 255, .4);
    border-radius: 6px;
  }

  .change_system_text {
    color: #fff;
    font-size: 12px;
    margin-left: 10px;
    border: solid 1px #fff;
    padding: 2px;
    border-radius: 5px;
    cursor: pointer;
  }

  @media screen and (min-width: 1680px) {
    #systemInformationIcon {
      width: 42px;
    }
  }

  #otherSystemLinks {
    margin-right: 10px;
    /* line-height: 60px; */
  }

  #otherSystemLinks ul {
    position: fixed;
    top: 59px;
    right: 6px;
    padding: 10px 10px;
    background-color: #fff;
    color: #666;
    font-size: 14px;
    list-style: none;
    z-index: 2001;
  }

  #otherSystemLinks ul li {
    padding: 0 10px;
    line-height: 36px;
    cursor: pointer;
  }

  #otherSystemLinks ul li:first-child {
    border-bottom: solid 1px #eee;
  }

  #otherSystemLinks ul li:hover {
    color: #0069d5;
  }

  #otherSystemLinks a {
    font-size: 14px;
    color: white !important;
    font-family: inherit !important;
    text-decoration-line: none;
    font-weight: 50;
  }

  #otherSystemLinks a:hover {
    /* background-color: aqua; */
    color: aqua !important;
    font-family: inherit !important;
  }

  #systemMenuContainer {
    height: 100%;
  }

  .logoImg {
    width: 90%;
  }

  .account {
    display: inline-block;
    vertical-align: top;
    margin-top: 2px;
    font-size: 14px;
  }

  .exit {
    margin-left: 12px;
    margin-top: 5px;
    cursor: pointer;
  }

  .hide_option {
    opacity: 0
  }

  .show_option {
    opacity: 1
  }

  /* ie11 */
  @media all and (-ms-high-contrast:none) {
    .style_for_ie {
      background: none !important;
    }
  }

  /* ie10 */
  @media screen and (-ms-high-contrast: active),
  (-ms-high-contrast: none) {
    .style_for_ie {
      background: none !important;
    }
  }
</style>