carInsightSystem/src/lycomponents/iHeaderMa/index.vue

<template>
  <div class="iH-outter">
    <div class="iH-left">
      <a-dropdown placement="bottomLeft">
        <img class="iH-left-img1" src="../../assets/images/Index/ic_cd.png" />
        <a-menu slot="overlay" @click="handlerType">
          <a-menu-item
            v-for="item in menu"
            :key="item.link.slice(1)"
            v-menu="item.link"
          >
            <span>{{ item.text }}</span>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
      <span class="iH-left-s1">菜单</span>

      <a-select
        :default-value="1"
        :size="$vuiSize"
        class="selHead"
        v-model="selVal"
        v-if="timeShow"
        @change="handlerSelect"
      >
        <a-select-option
          :style="{ color: '#fff' }"
          v-for="item in selDatas"
          :value="item.key"
          :key="item.key"
        >
          {{ item.key }}
        </a-select-option>
      </a-select>
    </div>
    <div class="iH-center">
      <a @click="goHome">
        <img src="../../assets/images/Index/img_toubuyi.png" width="100%" />
      </a>
    </div>
    <div class="iH-right">
      <span class="s1">{{ clock }}</span>
      <span class="s2">{{ sClock }}</span>
      <span class="s2">{{ week }}</span>
      <img class="m1" src="../../assets/images/Index/ic_ry.png" />
      <span class="s3">{{ getUser.UserName }}</span>
      <a-dropdown placement="bottomRight" v-if="this.getToken">
        <a class="ant-dropdown-link">
          <a-icon type="down" />
        </a>
        <a-menu slot="overlay">
          <a-menu-item @click="handlerMyself">
            <span>个人中心</span>
          </a-menu-item>
          <a-menu-item @click="handleChatCar">
            <span>ChatCar</span>
          </a-menu-item>
          <a-menu-item @click="layout">
            <span>退出</span>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
  </div>
</template>

<script>
import { getCheZhuTime0528 } from "@/api/home";
import LS from "cz-storage";
export default {
  name: "iHeaderMa",
  inject: ["reload"],
  data() {
    return {
      selVal: "",
      clock: "",
      sClock: "",
      week: "",
      intDt: null,
      timeShow: true,
      form: {
        sTimeType: 4,
        sStartTime: "",
        sEndTime: "",
      },
      selDatas: [],
      menu: [],
    };
  },
  //  watch: {
  //     $route: {
  //         handler(val) {
  //             if (val.path === "/mcIndex") {
  //                 this.timeShow = false;
  //             } else {
  //                 this.timeShow = true;
  //             }
  //         },
  //         immediate: true,
  //     },
  // },
  created() {
    this.menu = this.getMenu;
    this.getSelect();
  },
  mounted() {
    this.intDt = self.setInterval(() => {
      let obj = this.getDatetime();
      this.clock = obj.clock;
      this.sClock = obj.sClock;
      this.week = obj.week;
    }, 1000);
  },
  destroyed() {
    if (this.intDt) {
      self.clearInterval(this.intDt);
    }
  },
  methods: {
    handleChatCar() {
      window.open(
        `http://www.swsai.com/aspx/LoginWeb.aspx?action=sws_login&token=${this.getToken}`
      );
    },
    goHome() {
      this.setHeaderType(1);
      this.$router.push("/index");
    },
    // 获取选择时间的数据
    getSelect() {
      getCheZhuTime0528().then((res) => {
        this.selDatas = res.data;
        this.selVal = this.selDatas[0].key;
        this.form.sStartTime = this.selDatas[0].starttime;
        this.form.sEndTime = this.selDatas[0].endtime;
        this.setCtime(this.form);
      });
    },
    // 选择时间
    handlerSelect(key) {
      let n = this.selDatas.findIndex((ele) => {
        return ele.key === key;
      });
      let obj = this.selDatas[n];
      this.form.sStartTime = obj.starttime;
      this.form.sEndTime = obj.endtime;
      this.setCtime(this.form);
      this.setChangeSTime(1);
      this.reload();
    },
    // 点击个人中心
    handlerMyself() {
      this.setHeaderType(4);
      this.$router.push("/myself");
    },
    // 菜单
    handlerType(obj) {
      if (obj.key === "marketingAnalysis") {
        this.setHeaderType(2);
      } else if (
        obj.key === "brandInsight" ||
        obj.key === "modelInsight" ||
        obj.key === "eventInsight" ||
        obj.key === "myBrand"
      ) {
        this.setHeaderType(3);
      } else if (obj.key === "saleRank" || obj.key === "specialAnalize") {
        this.setHeaderType(4);
      } else {
        this.setHeaderType(1);
      }
      this.$router.push({ path: `/${obj.key}` });
    },
    // 退出的方法
    layout() {
      LS.remove("token");
      LS.remove("menu");
      LS.remove("levelBtn");
      LS.remove("user");
      LS.remove("commTime");
      LS.remove("ctime");
      LS.remove("ctime2");
      LS.remove("headerType");
      LS.remove("brand");
      LS.remove("model");
      LS.remove("bComparison");
      LS.remove("bcStatus");
      LS.remove("scStatus");
      LS.remove("sComparison");
      LS.remove("mComparison");
      LS.remove("tComparison");
      LS.remove("mcStatus");
      LS.remove("specialGuid");
      this.$router.replace("/login");
    },
  },
};
</script>

<style lang="less" scoped>
.iH-outter {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 80px;
  background-image: url("../../assets/images/Index/img_toubuer.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .iH-left {
    display: flex;
    width: 657px;
    margin-left: 16px;
    justify-content: flex-start;
    margin-top: 16px;
    height: 32px;
    .iH-left-img1 {
      width: 24px;
      height: 24px;
      cursor: pointer;
    }
    .iH-left-s1 {
      display: block;
      font-size: 14px;
      font-weight: bold;
      color: #ffffff;
      margin-left: 8px;
      margin-top: 2px;
    }
  }
  .iH-center {
    width: 490px;
    height: auto;
  }
  .iH-right {
    display: flex;
    height: 32px;
    width: 657px;
    justify-content: flex-end;
    margin-right: 16px;
    margin-top: 16px;
    .s1 {
      display: inline-block;
      font-size: 16px;
      color: #ffffff;
    }
    .s2 {
      display: inline-block;
      font-size: 16px;
      color: #ffffff;
      margin-left: 24px;
    }
    .s3 {
      display: inline-block;
      font-size: 14px;
      color: #ffffff;
      margin-left: 8px;
    }
    .s4 {
      display: inline-block;
      font-size: 16px;
      color: #ffffff;
      margin-right: 8px;
    }
    .m1 {
      display: inline-block;
      margin-left: 60px;
      margin-right: 8px;
      width: 24px;
      height: 24px;
    }
  }
}
.ant-dropdown-link {
  color: #63aecc;
  margin-left: 11px;
  /deep/ .anticon svg {
    font-size: 20px !important;
    margin-top: 0px;
  }
}
.selHead {
  width: 120px;
  margin-left: 40px;
  margin-right: 8px;
}
</style>