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>
        <option value="ss">ss</option>
        <!-- <option value="">站点一</option>
        <option value="">站点一</option> -->
      </select>
    </div>

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

    <img
      class="time-icon"
      @click="goRecordTime()"
      src="@/assets/images/time-icon.png"
      alt=""
      ref="indexChart"
    />
  </header>
</template>

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

export default {
  // name: "header",
  components: {
    TimeMenu,
  },
  props: {
    // StationID: String,
  },

  data() {
    return {
      title: "智慧安防数据分析看板",

      siteList: [],
      flag: true,
      StationID: "",
      isOpen: false,
      msg: 1,
    };
  },
  watch: {
    "$store.state.wsInfo"(val) {
      this.messageHandle(val);
    },
    StationID(val) {
      console.log("watch时候的值");
      console.log(val);

      //监听testStationId是否发生了变化
      // console.log('监听testStationId是否发生了变化');
      this.$store.commit("changeStationID", val);

      console.log("放入store的值");
      console.log(this.getStationId);

      // this.$router.push({path: '/index'});
    },
  },
  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;

          //页面刚初始化时  获取下拉列表的第一个值 放入store里面
          console.log("created函数里获取store的值=====" + this.getStationId);

          if (!this.getStationId) {
            console.log("created走没有的逻辑");
            this.StationID = this.siteList[0].StationID;
            this.$store.commit("changeStationID", this.StationId);
          } else {
            console.log("created走有的逻辑");
          }
        }
        // if (redata.CMD == "getStationDetail") {
        //   this.homeData = redata.RESULT.LIST;
        // }
      }
    },

    goRecordTime() {
      if (this.$route.path != "/recordTime") {
        this.$router.push("/recordTime");
      //  this.$refs.indexChartstyle.display='none'
      //  this.$refs.abc.style.cssText

      }
    },
    navs() {
      switch (this.$route.name) {
        case "recordTime":
          return [(this.title = "电子巡检记录列表")];
      }
    },
  },
};
</script>


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