schoolPanel/src/components/topHeader.vue

<template>
  <header>
    <h1>{{ title }}</h1>

    <!-- 下拉筛选 -->
    <div class="filterSec">
      <span>站点：</span>
      <select name="" id="" v-model="StationID">
        <option
          :value="item.StationID"
          v-for="item in siteList"
          :key="item.StationID"
        >
          {{ item.StationName }}
        </option>
      </select>
    </div>

    <!-- 当前时间  -->
    <time-menu></time-menu>

    <!-- 电子巡检小图标 -->
    <img
      class="time-icon"
      @click="goRecordTime()"
      src="@/assets/images/time-icon.png"
      alt=""
      ref="indexChart"
      :class="{ noPointer: routeName === 'recordTime' }"
    />
  </header>
</template>

<script>
import TimeMenu from "@/components/TimeMenu";

export default {
  name: "topHeader",
  components: {
    TimeMenu,
  },

  data() {
    return {
      title: "智慧安防数据分析看板",
      //当前路由
      routeName: this.$route.name,
      //站点数据
      siteList: [],
      StationID: "",

    };
  },
  watch: {
    "$store.state.wsInfo"(val) {
      this.messageHandle(val);
    },

    StationID(newVal, oldVal) {
      // console.log("watch时候的值");
      // console.log(newVal + ":" + oldVal);
      this.$store.commit("changeStationID", newVal);
      // console.log("放入store的值");
      // console.log(this.getStationId);

      //判断如果有站带，并且站点切换时，跳转至首页
      if (oldVal.length > 0) {
        if (this.$route.path == "/index") {
          this.$router.go(0);
        } else {
          this.$router.push("/index");
        }
      }
    },
    deep: true,
  },
  created() {
    this.global.sendWs({ CMD: "getStationInfo" });
    this.StationID = this.getStationId;
  },
  mounted() {
    this.navs();
  },
  computed: {
    getStationId() {
      return this.$store.state.StationID;
    },
  },

  destroyed() {},

  methods: {
    messageHandle(e) {
      if (e.data.search("{") != -1) {
        const redata = JSON.parse(e.data);

        if (redata.CMD == "getStationInfo") {
          this.siteList = redata.RESULT;
          if (this.getStationId.length == 0) {
            console.log("created走没有的逻辑");
            // 初始化时，获取下拉列表的第一个值 放入store里
            this.StationID = this.siteList[0].StationID;
            this.$store.commit("changeStationID", this.StationID); 
          } else {
            console.log("created走有的逻辑");
          }
        }
     
      }
    },

    // 页面跳转至recordTime
    goRecordTime() {
      if (this.$route.path != "/recordTime") {
        this.$router.push("/recordTime");
      }
    },

    //根据路由判断显示不同的标题内容
    navs() {
      switch (this.$route.name) {
        case "recordTime":
          return [(this.title = "电子巡检记录列表")];
      }
    },
  },
};
</script>


<style lang="scss" scoped>
</style>