Web_TracerMethodology/pages/calendar/calendar.vue

<template>
  <view class="calender-page">
    <view class="calender-remind" @click="toMessagePage">
      <image
        :src="
          messageType
            ? '/static/message-unread.png'
            : '/static/message-read.png'
        "
        mode=""
      ></image>
    </view>
    <view class="cheanged-time" @click="clickTile"
      >{{ changedYear }}年{{ changedMonth }}月
      <!-- <text class="weekDay">{{changedDay}}</text> -->
    </view>
    <view>
      <text v-for="item in dayArray1" class="calendarTitle">{{ item }}</text>
    </view>
    <view>
      <view v-for="item in data1">
        <!-- {{item}} -->
        <view
          v-for="(items, index) in item"
          class="calendarCon"
          @click="dateClick(items, index)"
          :style="items.greyFlag ? { color: '#B8BECC' } : { color: '#292C33' }"
        >
          <view :class="items.specificDate == changedDate ? 'date2' : 'date'">
            {{ items.day ? items.day : "" }}
          </view>
          <view
            class="yinDate"
            :style="
              items.greyFlag ? { color: '#B8BECC' } : { color: '#292C33' }
            "
          >
            {{ items.chineseDay ? items.chineseDay : "" }}
          </view>
          <view :class="items.deptCount != '0' ? 'work' : ''">
            <view class="sum">{{
              items.deptCount != "0" ? items.deptCount : ""
            }}</view>
            <view class="danwei">{{
              items.deptCount != "0" ? "单位" : ""
            }}</view>
          </view>
        </view>
      </view>
    </view>
    <change-calendar
      v-if="showCC"
      :changedYear="changedYear"
      :changedMonth="changedMonth"
      @cancelCC="cancelCC"
      @sureCC="sureCC"
    ></change-calendar>
    <tm-tabbar />
  </view>
</template>

<script>
import websocket from "../../utils/ws.js"; //引入websocket
import {wsURL} from "../../utils/requestUrl.js";
import moment from "moment";
import changeCalendar from "./components/changeCalendar.vue";
export default {
  data() {
    return {
      refTimer: null,
      isInitWs: null,
      messageType: null,
      dayArray: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      dayArray1: ["日", "一", "二", "三", "四", "五", "六"],
      days_per_month: [],
      changedYear: moment().format("YYYY"),
      changedMonth: moment().format("MM"),
      changedDay: "",
      showCC: false,
      firstday: "",
      dayOfWeek: "",
      str_nums: "",
      data1: [],
      changedDate: moment().format("YYYY-MM-DD"),
    };
  },
  components: {
    changeCalendar,
  },
  created() {
    this.changedDay = this.dayArray[new Date().getDay()];
    this.init(true);
    this.refTimer = setInterval(() => {
      this.isInitWs = websocket.ws ? false : true;
      this.init(this.isInitWs);
    }, 3 * 60 * 1000);
    // this.messStatus();
  },
  beforeDestroy() {
    // 关闭ws连接
    websocket.close();
    clearInterval(this.refTimer);
  },
  // watch: {
  //   $route: {
  //     handler(route) {
  //       this.messStatus();
  //     },
  //   },
  // },
  methods: {
    getCanList() {
      this.$store
        .dispatch({
          type: "calendar/commActions",
          payload: {
            key: "getCalList",
            data: {
              years: this.changedYear + "-" + this.changedMonth,
            },
          },
        })
        .then((data) => {
          if (data) {
            let hiId = uni.getStorageSync("hiId");
            let user = uni.getStorageSync("id");
            let permission = uni.getStorageSync("nowPermission");
            this.isInitWs && this.initWebsocket(hiId, user, permission);
            this.str_nums = Math.ceil(data.length / 7); //确定日期表格所需的行数
            let data2 = [];
            for (let i = 0; i < this.str_nums; i++) {
              data2[i] = [];
              data2[i] = data.splice(0, 7);
            }
            this.data1 = data2;
          }
        });
    },
    init(isInitWs) {
      this.isInitWs = isInitWs;
      this.getCanList();
    },
    initWebsocket(hiId, user, permission) {
      websocket.url = wsURL(hiId, user, permission);
      websocket.createWebSocket(this.resolverWsData.bind(this));
    },
    // 解析websocket返回数据
    resolverWsData(type) {
      let types = JSON.parse(type);
      switch (types.type) {
        case "TO_READ":
          this.messageType = true;
          break;
        default:
          this.messageType = false;
          break;
      }
    },
    toMessagePage() {
      // this.messageType = false;
      uni.navigateTo({
        url: `/pages/messages/messages`,
      });
    },
    clickTile() {
      this.showCC = true;
    },
    cancelCC(data) {
      this.showCC = data;
    },
    sureCC(data, year, month) {
      this.showCC = data;
      this.changedYear = year;
      this.changedMonth = month;
      let day = year + "-" + month + "-01";
      this.changedDay = this.dayArray[new Date(day).getDay()];
      this.getCanList();
    },
    dateClick(data, i) {
      if (data && data.specificDate) {
        uni.navigateTo({
          url: `/pages/todayCheck/todayCheck?date=${data.specificDate}`,
        });
      }
    },
    // messStatus() {
    //   let num = 1;
    //   let timer = setInterval(() => {
    //     this.$store
    //       .dispatch({
    //         type: "calendar/commActions",
    //         payload: {
    //           key: "messagesList",
    //           data: {
    //             pageNum: num,
    //             pageSize: 100,
    //           },
    //         },
    //       })
    //       .then((res) => {
    //         if (res && res.list.length == 0) {
    //           clearInterval(timer);
    //         } else if (res && res.list.length != 0) {
    //           res.list.map((item) => {
    //             if (!item.readStatus) {
    //               this.messageType = true;
    //               return;
    //             }
    //           });
    //         }
    //       });
    //     num++;
    //   }, 100);
    // },
  },
};
</script>

<style lang="less">
.calender-page {
  height: 100%;
  position: relative;
  .calender-remind {
    width: 62.5rpx;
    height: 62.5rpx;
    position: fixed;
    top: 12.5rpx;
    right: 25rpx;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    z-index: 2;
    image {
      margin-left: 17.5rpx;
      margin-top: 16.87rpx;
      width: 27.5rpx;
      height: 28.75rpx;
    }
  }
  .cheanged-time {
    padding: 25rpx 0rpx 15rpx 25rpx;
    font-size: 35rpx;
    .weekDay {
      padding-left: 15rpx;
      font-size: 20rpx;
      color: #666f80;
    }
  }
  .calendarTitle {
    background-color: #fff;
    display: inline-block;
    width: 14.286%;
    text-align: center;
    font-size: 20rpx;
    color: #666e80;
    line-height: 55rpx;
    border-bottom: 1.25rpx solid #f5f6fa;
  }
  .calendarCon {
    // margin-right: 1.25rpx;
    // margin-top: 1.25rpx;
    height: 168.75rpx;
    background-color: #fff;
    float: left;
    width: 14.2857%;
    text-align: center;
    font-size: 35rpx;
    color: #292c33;
    border-right: 1.25rpx solid #f5f6fa;
    border-bottom: 1.25rpx solid #f5f6fa;
    .date {
      margin: 16.25rpx auto 6.25rpx;
      height: 52.5rpx;
      width: 52.5rpx;
      line-height: 52.5rpx;
      border-radius: 50%;
    }
    .date2 {
      margin: 16.25rpx auto 6.25rpx;
      height: 52.5rpx;
      width: 52.5rpx;
      line-height: 52.5rpx;
      border-radius: 50%;
      background-color: #3377ff;
      color: #fff;
    }
    .yinDate {
      color: #666e80;
      font-size: 17.5rpx;
      line-height: 17.5rpx;
    }
    .work {
      width: 87.5rpx;
      height: 50rpx;
      background-color: #ff894d;
      border-radius: 5rpx;
      margin: 16.25rpx auto;
      .sum {
        font-size: 20rpx;
        color: #fff;
        font-weight: bold;
        line-height: 30rpx;
      }
      .danwei {
        font-weight: 400;
        font-size: 15rpx;
        color: #fff;
        line-height: 15rpx;
      }
    }
  }
}
</style>