electron-ban-pai/src/components/homepage.vue

<template>
  <div>
    <!-- 主体内容 -->
    <div class="main">
      <!-- 左侧 -->
      <div class="main-left">
        <!-- 班级详情 -->
        <div class="left-one">
          <div class="left-content">
            <div class="left-title">
              <div class="pultitle">班级详情</div>
            </div>
            <div class="second-title">中二班</div>
            <div class="line"></div>
            <div class="three-content">
              <div>老师：罗敏 宋春雪 王愉</div>
              <div>班级人数：21</div>
            </div>
            <div class="line"></div>
            <div class="left-last">
              <div>
                <div>0</div>
                <div>实到</div>
              </div>
              <div>
                <div>0</div>
                <div>未到</div>
              </div>
              <div>
                <div>0</div>
                <div>请假</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 宝宝食谱 -->
        <div class="left-one">
          <div class="left-content">
            <div class="left-title">
              <div class="pultitle">宝宝食谱</div>
            </div>
            <div class="eat-three">
              <div
                :class="threeMealIndex == index ? 'threeMealActive' : ''"
                v-for="(item, index) in threeMeals"
                :key="index"
                @click="chooseMeal(index)"
              >
                {{ item.Type }}
              </div>
            </div>
            <div class="line"></div>
            <div v-for="(item, index) in threeMeals" :key="index">
              <div v-if="index == threeMealIndex" class="left-last meal-box">
                <img :src="item.Images" />
                <div class="clips2">{{ item.FoodName }}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 通知公告 -->
        <div class="left-one">
          <div class="left-content">
            <div class="left-title">
              <div class="pultitle">通知公告</div>
            </div>
            <div class="second-title">中二班</div>
            <div class="line"></div>
            <div class="three-content left-notice">
              <div class="clips2">老师：罗敏 宋春</div>
            </div>
            <div class="notice-time">
              <div>2021-11-15</div>
              <div><img src="../assets/home/slices.png" />15</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中部 -->
      <div class="main-center">
        <!-- 班级动态图文 -->
        <div class="center-img-box">
          <div class="center-title">班级动态</div>
          <div class="img-box">
            <img src="../assets/seconds/tu-01.png" style="object-fit: cover" />
          </div>
        </div>
        <!-- 提醒 -->
        <div class="remind-box">
          <div class="msg-box">
            <img src="../assets/home/icon-notice.png" />
            <div>{{ noticeData }}</div>
          </div>
          <div class="msg-box">
            <div>宝宝提醒</div>
            <div>1</div>
          </div>
          <div class="msg-box">
            <div>生日提醒</div>
            <div>1</div>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="main-right">
        <div class="left-title">
          <div class="pultitle">今日活动</div>
        </div>
        <div class="right-content">
          <div v-for="(item, index) in noonArr" :key="index">
            <div class="right-title">{{ item.Ampm }}</div>
            <div class="line" style="margin: 0 6px"></div>
            <div
              class="right-item-box"
              v-for="(itemc, indexc) in item.Content"
              :class="indexc % 2 != 0 ? 'oddActive' : ''"
              :key="indexc"
            >
              <div>{{ itemc.TimePart }}</div>
              <div class="clips3">{{ itemc.Name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "homepage",
  data() {
    return {
      threeMeals: ["早餐", "午餐", "晚餐"],
      threeMealIndex: 0,
      noticeData: [],
	babyBirthdayData:"",
	dynamicPictureData:"",
      noonArr: [
        {
          title: "上午",
          children: [
            {
              time: "08：30 - 08：50",
              content: "晨检，晨间活动晨间活动晨间活动晨间活动晨间活动晨间活动",
            },
            {
              time: "08：30 - 08：50",
              content: "晨检，晨间活动",
            },
            {
              time: "08：30 - 08：50",
              content: "晨检，晨间活动",
            },
            {
              time: "08：30 - 08：50",
              content: "晨检，晨间活动",
            },
            {
              time: "08：30 - 08：50",
              content: "晨检，晨间活动",
            },
            {
              time: "08：30 - 08：50",
              content: "晨检，晨间活动",
            },
            {
              time: "08：30 - 08：50",
              content: "晨检，晨间活动",
            },
            {
              time: "08：30 - 08：50",
              content: "晨检，晨间活动",
            },
          ],
        },
        {
          title: "中午",
          children: [
            {
              time: "08：30 - 08：50",
              content: "晨检，晨间活动",
            },
            {
              time: "08：30 - 08：50",
              content: "晨检，晨间活动",
            },
            {
              time: "08：30 - 08：50",
              content: "晨检，晨间活动",
            },
            {
              time: "08：30 - 08：50",
              content: "晨检，晨间活动",
            },
            {
              time: "08：30 - 08：50",
              content: "晨检，晨间活动",
            },
            {
              time: "08：30 - 08：50",
              content: "晨检，晨间活动",
            },
            {
              time: "08：30 - 08：50",
              content: "晨检，晨间活动",
            },
          ],
        },
        {
          title: "下午",
          children: [
            {
              time: "08：30 - 08：50",
              content: "晨检，晨间活动",
            },
            {
              time: "08：30 - 08：50",
              content: "晨检，晨间活动",
            },
            {
              time: "08：30 - 08：50",
              content: "晨检，晨间活动",
            },
            {
              time: "08：30 - 08：50",
              content: "晨检，晨间活动",
            },
            {
              time: "08：30 - 08：50",
              content: "晨检，晨间活动",
            },
            {
              time: "08：30 - 08：50",
              content: "晨检，晨间活动",
            },
            {
              time: "08：30 - 08：50",
              content: "晨检，晨间活动",
            },
            {
              time: "08：30 - 08：50",
              content: "晨检，晨间活动",
            },
          ],
        },
      ],
    };
  },
  methods: {
    // 早中晚餐切换事件
    chooseMeal(e) {
      this.threeMealIndex = e;
    },
    // 宝宝食谱
    async babyRecipeEv() {
      let data = await this.$axios({
        // 调用 serviceAPI
        url: this.$https.babyRecipe,
        methods: "get",
        params: {
          EquipmentID: "yaohaotest001",
        },
      });
      this.threeMeals = data.data.data;
    },

    async notice() {
      let data = await this.$axios({
        // 调用 serviceAPI
        url: this.$https.notice,
        methods: "get",
        params: {
          EquipmentID: "yaohaotest001",
        },
      });
      this.noticeData = data.data.count;
    },
    async schedulingWeb() {
      let data = await this.$axios({
        // 调用 serviceAPI
        url: this.$https.schedulingWeb,
        methods: "get",
        params: {
          EquipmentID: "yaohaotest001",
        },
      });
      this.noonArr = data.data.data[0].WeekData;
     
    },
  async babyBirthday() {
      let data = await this.$axios({
        // 调用 serviceAPI
        url: this.$https.babyBirthday,
        methods: "get",
        params: {
          EquipmentID: "yaohaotest001",
        },
      });
      this.babyBirthdayData = data.data;
     
    },
  async dynamicPicture() {
      let data = await this.$axios({
        // 调用 serviceAPI
        url: this.$https.dynamicPicture,
        methods: "get",
        params: {
          EquipmentID: "yaohaotest001",
        },
      });
     
    },
	
	
  },
  mounted() {
    this.babyRecipeEv();
    this.schedulingWeb();
	this.babyBirthday()
	this.dynamicPicture()
  },
  created() {
    this.notice();
  },
};
</script>