Web_TracerMethodology/pages/calendar/calendar.vue

<template>
  <view class="calender-page">
    <view class="calender-remind" @click="toMessagePage">
      <image
        :src="
          messageType
            ? '/static/mission/消息中心未读.png'
            : '/static/mission/消息中心已读.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)"
        >
          <view class="date">
            {{
              items.time
                ? items.time.slice(9, 10) == "0"
                  ? items.time.slice(10, 11)
                  : items.time.slice(9, 11)
                : ""
            }}
          </view>
          <view class="yinDate">
            {{ items.yinTime ? items.yinTime : "" }}
          </view>
          <view :class="items.work ? 'work' : ''">
            <view class="sum">{{ items.work ? items.work : "" }}</view>
            <view class="danwei">{{ items.work ? "单位" : "" }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- <view v-for=""></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 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: [],
    };
  },
  components: {
    changeCalendar,
  },
  created() {
    // this.getMissionList();
    // var data = '2021-02-19';
    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);
  },
  beforeDestroy() {
    // 关闭ws连接
    websocket.close();
    clearInterval(this.refTimer);
  },
  mounted() {
    this.days_per_month = new Array(
      31,
      28 + this.isLeap(this.changedYear),
      31,
      30,
      31,
      30,
      31,
      31,
      30,
      31,
      30,
      31
    ); //创建月份数组
    this.getCanList2();
  },
  methods: {
    getCanList() {
      this.$store
        .dispatch({
          type: "calendar/commActions",
          payload: {
            key: "getDefault",
            data: {
              pageNum: 1,
              pageSize: 10,
            },
          },
        })
        .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);
          }
        });
    },
    init(isInitWs) {
      this.isInitWs = isInitWs;
      this.getCanList();
    },
    initWebsocket(hiId, user, permission) {
      websocket.url = `ws://192.168.1.45:8088/imed/pfm/websocket/${hiId}/${user}/${permission}`;
      websocket.createWebSocket(this.resolverWsData.bind(this));
    },
    // 解析websocket返回数据
    resolverWsData(type) {
      let types = JSON.parse(type);
      console.log(types, "iiiiiii");
      switch (types.type) {
        case "TO_READ":
          alert("99999");
          this.messageType = true;
          break;
        default:
          this.messageType = false;
          break;
      }
    },
    toMessagePage() {
      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.getCanList2();
    },
    isLeap(year) {
      return year % 4 == 0
        ? year % 100 != 0
          ? 1
          : year % 400 == 0
          ? 1
          : 0
        : 0;
    },
    getMonth(m) {
      console.log(m);
      if (m.substr(0, 1) == "0") {
        console.log(true);
        return m.substr(1, 2);
      } else {
        return m;
      }
    },
    //获取上个月的天数
    getPreMonthCount(year, month) {
      if (month === 0) {
        return getMonthCount(year - 1, 11);
      } else {
        return getMonthCount(year, month - 1);
      }
    },
    getCanList2() {
      this.$store
        .dispatch({
          type: "calendar/commActions",
          payload: {
            key: "getDefault",
            data: {
              pageNum: 1,
              pageSize: 10,
            },
          },
        })
        .then((data) => {
          let data1 = [
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: 5,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
            {
              time: "2021-02-03",
              yinTime: "二十",
              work: null,
            },
          ];

          this.firstday = new Date(
            this.changedYear,
            this.changedMonth.slice(0, 1) == "0"
              ? this.changedMonth.slice(1, 2) - 1
              : this.changedMonth - 1,
            1
          ); //获取每月第一天
          this.dayOfWeek = this.firstday.getDay(); //判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推)
          this.str_nums = Math.ceil((this.dayOfWeek + data1.length) / 7); //确定日期表格所需的行数
          let data2 = [];
          for (let i = 0; i < this.str_nums; i++) {
            data2[i] = [];
            if (i == 0 && this.dayOfWeek != 0) {
              for (let j = 0; j < this.dayOfWeek; j++) {
                data2[i].push({});
              }
              let data3 = data1.splice(0, 7 - this.dayOfWeek);
              for (let k = 0; k < data3.length; k++) {
                data2[i].push(data3[k]);
              }
            } else if (i == 0 && this.dayOfWeek == 0) {
              data2[i] = data1.splice(0, 7);
            } else {
              if (i == this.str_nums - 1 && data1.length < 7) {
                data2[i] = data1.splice(0, 7);
                for (let k = 1; k < 7 - data1.length; k++) {
                  data2[i].push({});
                }
              } else if (i == this.str_nums - 1 && data1.length == 7) {
                data2[i] = data1.splice(0, 7);
              } else {
                data2[i] = data1.splice(0, 7);
              }
            }
          }
          console.log(data2);
          this.data1 = data2;
        });
    },
    dateClick(data, i) {
      console.log(data, i);
      if (data && data.work) {
        // uni.navigateTo({
        //   url: `/pages/mission-details/mission-details?taskId=${data.businessId}`,
        // });
      }
    },
  },
};
</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;
  }
  .calendarCon {
    margin-right: 1.25rpx;
    margin-top: 1.25rpx;
    height: 168.75rpx;
    background-color: #fff;
    float: left;
    width: 14.1%;
    text-align: center;
    font-size: 35rpx;
    color: #292c33;
    .date {
      padding-top: 25rpx;
      padding-bottom: 15rpx;
    }
    .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>