acc.vue

<template>
  <div class="index">
    <div class="title-wrap">
      <div class="title-box">
        <span class="title">{{ reportName }}&nbsp;{{ repTime }}&nbsp;{{$t('head.title')}}</span>
        <span class="title-icon" @click="showCollapse">
          {{$t('head.otherRep')}}
          <i class="el-icon-arrow-right title-arrow"></i>
        </span>
      </div>
      <div class="title-collapse-content" v-show="collapseVisible">
        <span
          v-for="(item, index) in reportData"
          :key="item.label"
          class="date-box"
          @click="reportHandle(item.label)"
        >
          <span
            :class="item.label === handleVal ? 'date-btn active-date' : 'date-btn'"
          >{{ i18nFormatter(item.label) }}</span>
        </span>
        <!-- v-if="!dateReport.isMonth || !dateReport.isYear" -->
        <span class="date-input-box">
          <el-date-picker
            class="date-input day-piack"
            v-show="handleVal == 'day'"
            v-model="dayVal"
            value-format="yyyy-MM-dd"
            align="right"
            type="date"
            size="mini"
            :placeholder="$t('pholder.date')"
            :picker-options="pickerOptions1"
          ></el-date-picker>
          <el-date-picker
            class="date-input week-piack"
            v-show="handleVal == 'week'"
            v-model="weekVal"
            align="right"
            type="week"
            :format="datePickerFormatter('week')"
            size="mini"
            :placeholder="$t('pholder.week')"
            :picker-options="weekPickerOpt"
          ></el-date-picker>
          <el-date-picker
            class="date-input month-piack"
            v-show="handleVal == 'month'"
            v-model="monthVal"
            align="right"
            type="month"
            :format="datePickerFormatter('month')"
            size="mini"
            :placeholder="$t('pholder.month')"
          ></el-date-picker>
          <el-date-picker
            class="date-input year-piack"
            v-show="handleVal == 'year'"
            v-model="yearVal"
            align="right"
            type="year"
            :format="datePickerFormatter('year')"
            size="mini"
            :placeholder="$t('pholder.year')"
          ></el-date-picker>
        </span>
        <div class="right-btn">
          <!-- <span class="simple-box" @click="simpleSwitch">{{i18nFormatter(label)}}</span> -->
          <!-- <span class="simple-box" @click="simpleSwitch">{{ isSmpleReport ? this.$t('reportHandle.button') : this.$t('reportHandle.simpleBtn') }}</span> -->
          <!-- <span class="refresh-box"> -->
          <!-- <el-button type="primary" class="primary-btn collapse-btn" size="samll" @click="simpleSwitch">{{$t('button.simpleBtn')}}</el-button> -->
          <!-- <el-checkbox v-model="isRefresh" text-color="#fff">{{$t('button.autoRefresh')}}</el-checkbox> -->
          <!-- </span> -->
          <span class="collapse-btn-box">
            <el-button
              type="primary"
              class="primary-btn collapse-btn"
              size="samll"
              @click="confirmCondition"
            >{{$t('button.confirm')}}</el-button>
            <el-button
              class="reset-btn collapse-btn"
              size="samll"
              @click="resetRefresh"
            >{{$t('button.reset')}}</el-button>
          </span>
        </div>
      </div>
    </div>
    <!--  ref="takeTime" -->
    <router-view
      @getMallId="mallHandle"
      :propparam="propParams"
      :orgId="orgId"
      @isCreated="domComplted"
    ></router-view>
  </div>
</template>

<script>
import Bus from "../public/eventBus";
import MyChart from "../public/mapChart";

export default {
  props: {
    orgId: {
      type: [String, Number],
      required: true
    },
    reportName: {
      type: String,
      default: ""
    }
  },
  components: {
    MyChart
  },
  data() {
    return {
      collapseVisible: false,
      reportData: [
        {
          label: "day",
          is_active: "date-btn"
        },
        {
          label: "week",
          is_active: "date-btn"
        },
        {
          label: "month",
          is_active: "date-btn"
        },
        {
          label: "year",
          is_active: "date-btn"
        }
      ],
      timeVal: "",
      repTime: "", // 报表时间
      dayVal: "", // 日时间
      weekVal: "", // 周时间
      monthVal: "", // 月时间
      yearVal: "", // 年时间
      floorVal: "",
      activeSimple: "1",
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: this.$t("reportHandle.today"),
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: this.$t("reportHandle.yesterday"),
            onClick(picker) {
              let date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: this.$t("reportHandle.lastweek"),
            onClick(picker) {
              let date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      weekPickerOpt: {
        firstDayOfWeek: window._vionConfig.firstDayOfWeek || 1
      },
      isRefresh: false,
      propParams: {},
      label: "button",
      isSmpleReport: true,
      handleVal: "day"
    };
  },
  watch: {
    reportName(val) {
      this.init();
    },
    propParams(val) {
      if (val.dateType == "/account") {
        this.reportHandle("day");
      } else if (val.dateType == "/account/weekly") {
        this.reportHandle("week");
      } else if (val.dateType == "/account/monthly") {
        this.reportHandle("month");
      } else if (val.dateType == "/account/yearly") {
        this.reportHandle("year");
      }
    },
    $route(to, from) {},
    dayVal(val) {
      this.sessionDate("dayDate", val);
    },
    weekVal(val) {
      this.sessionDate("weekDate", val);
    },
    monthVal(val) {
      this.sessionDate("monthDate", val);
    },
    yearVal(val) {
      this.sessionDate("yearDate", val);
    }
  },
  errorCaptured(err, vm, info) {
    // eval("console.log(err)");
    return false;
  },
  created() {
    let { dayDate, weekDate, monthDate, yearDate } = this.createDate();
    this.dayVal = dayDate;
    this.weekVal = weekDate;
    this.monthVal = monthDate;
    this.yearVal = yearDate;
    this.setSessionLocal("path", "/account");
  },
  mounted() {
    // let week_now_num = this.getWeekTime(new Date()) + 6;
    // this.$router.push('/account');
    let routeHandler = {
      "/account": "day",
      "/account/weekly": "week",
      "/account/monthly": "month",
      "/account/yearly": "year"
    };
    const storageDateType = this.getSessionLocal('homeDateType') || routeHandler[this.$router.history.current.fullPath]
    this.reportHandle(storageDateType);
    this.showCollapse();
    this.init();
  },
  methods: {
    // changeCount() {
    //     this.$store.commit('computedCount', 20)
    // },
    i18nFormatter(label) {
      let languageLabel = "reportHandle." + label;
      return this.$t(languageLabel);
    },
    init() {
      // this.reportTitle = this.
      const storageDateType = this.getSessionLocal('homeDateType')
      let type = (storageDateType ? `/account/${storageDateType}ly` : '') || this.$router.history.current.fullPath;
      this.repTime = $(`.${this.handleVal}-piack input`)[0].value;
      this.propParams = {
        dateType: type,
        timeVal: this[this.handleVal + "Val"]
      };
      // this.activeSimple = '1';
      // this.label = 'button'
      // Bus.$emit('simpleEvent',this.activeSimple);
    },
    reportHandle(label) {
      this.handleVal = label;
    },
    showCollapse() {
      // 获取上面元素的高度
      let headerH = "",
        titleH = "",
        collapseH = "",
        mt = "",
        activePx = null;
      activePx =
        window.innerWidth <= 1680 ? (window.innerWidth <= 1440 ? 8 : 10) : 12;
      headerH = this.getStyleFn(".el-header", "height");
      titleH = this.getStyleFn(".title-box", "height");
      if ($(".title-icon").hasClass("is-active")) {
        // $('.title-collapse-content').hide();
        this.collapseVisible = false;
        $(".title-icon").removeClass("is-active");
        mt = headerH + titleH + activePx + "px";
        try {
          // setTimeout(() => {
          $(".daily").animate({ marginTop: mt });
          $(".weekly").animate({ marginTop: mt });
          $(".monthly").animate({ marginTop: mt });
          $(".yearly").animate({ marginTop: mt });
          // }, 200)
        } catch (e) {}
      } else {
        collapseH = this.getStyleFn(".title-collapse-content", "height");
        // $('.title-collapse-content').show();
        this.collapseVisible = true;
        $(".title-icon").addClass("is-active");
        mt = headerH + titleH + collapseH + activePx + "px";
        try {
          // setTimeout(() => {
          $(".daily").animate({ marginTop: mt });
          $(".weekly").animate({ marginTop: mt });
          $(".monthly").animate({ marginTop: mt });
          $(".yearly").animate({ marginTop: mt });
          // }, 200)
        } catch (e) {}
      }
    },
    classHandle(index) {
      let dateBtnList = document.getElementsByClassName("date-btn");
      for (let i = 0, len = dateBtnList.length; i < len; i++) {
        if (i === index) {
          dateBtnList[i].className = "date-btn active-date";
        } else {
          dateBtnList[i].className = "date-btn";
        }
      }
    },
    chooseFloor(val) {
      this.$router.push("/floor");
    },
    resetRefresh() {
      this.reportHandle("day");
      this.setSessionLocal('homeDateType', '')
      this.isRefresh = false;
      this.dayVal = dateUnit.dateFormat(new Date(), "yyyy-MM-dd"); // 日时间
      this.weekVal = new Date(); // 周时间
      this.monthVal = new Date(); // 月时间
      this.yearVal = new Date(); // 年时间
    },
    mallHandle(name, id) {
      window.sessionStorage.setItem("mallId", id);
      this.$cookie.set("orgId", id);
      this.$cookie.set("mallName", name);
      this.$emit("accToMall", name, id);
    },
    domComplted(completed, type) {
      let _this = this,
        activePx;
      activePx =
        window.innerWidth <= 1680 ? (window.innerWidth <= 1440 ? 8 : 10) : 12;
      let marginT = "";
      if (completed) {
        let headerH = "",
          titleH = "",
          collapseH = "",
          mt = "";
        setTimeout(function() {
          headerH = _this.getStyleFn(".el-header", "height");
          titleH = _this.getStyleFn(".title-box", "height");
          if (_this.collapseVisible) {
            collapseH = _this.getStyleFn(".title-collapse-content", "height");
            if (document.documentMode) {
              collapseH =
                collapseH +
                _this.getStyleFn(".title-collapse-content", "paddingTop") +
                _this.getStyleFn(".title-collapse-content", "paddingBottom");
            }
          } else {
            collapseH = 0;
          }
          marginT = headerH + titleH + collapseH + activePx + "px";
        }, 0);
        switch (type) {
          case "day":
            setTimeout(function() {
              $(".daily").animate({ marginTop: marginT });
            }, 0);
            break;
          case "weekly":
            setTimeout(function() {
              $(".weekly").animate({ marginTop: marginT });
            }, 0);
            break;
          case "monthly":
            setTimeout(function() {
              $(".monthly").animate({ marginTop: marginT });
            }, 0);
            break;
          case "yearly":
            setTimeout(function() {
              $(".yearly").animate({ marginTop: marginT });
            }, 0);
            break;
          default:
            break;
        }
      }
    },
    simpleSwitch() {
      if (this.isSmpleReport) {
        this.isSmpleReport = false;
        Bus.$emit("simpleEvent", this.isSmpleReport);
      } else {
        this.isSmpleReport = true;
        Bus.$emit("simpleEvent", this.isSmpleReport);
      }
    },
    confirmCondition() {
      this.isSmpleReport = true;
      if (this.handleVal === "day") {
        this.setSessionLocal('homeDateType', '')
        this.$router.push("/account");
        this.repTime = this.dayVal;
        this.propParams = {
          dateType: "/account",
          timeVal: this.dayVal
        };
      } else {
        this.setSessionLocal('homeDateType', this.handleVal)
        this.$router.push(`/account/${this.handleVal}ly`);
        this.repTime = $(`.${this.handleVal}-piack input`)[0].value;
        this.propParams = {
          dateType: `/account/${this.handleVal}ly`,
          timeVal: this[this.handleVal + "Val"]
        };
      }
      // Bus.$emit('simpleEvent',this.activeSimple)
      let headerH = "",
        titleH = "",
        collapseH = "",
        mt = "";
      headerH = this.getStyleFn(".el-header", "height");
      titleH = this.getStyleFn(".title-box", "height");
      collapseH = this.getStyleFn(".title-collapse-content", "height");
      if (document.documentMode) {
        collapseH =
          collapseH +
          this.getStyleFn(".title-collapse-content", "paddingTop") +
          this.getStyleFn(".title-collapse-content", "paddingBottom");
      }
      mt = headerH + titleH + collapseH + 8 + "px";
      try {
        if (this.$refs.takeTime) {
          $(".daily").animate({ marginTop: mt });
          $(".weekly").animate({ marginTop: mt });
          $(".monthly").animate({ marginTop: mt });
          $(".yearly").animate({ marginTop: mt });
        } else {
          setTimeout(() => {
            $(".daily").animate({ marginTop: mt });
            $(".weekly").animate({ marginTop: mt });
            $(".monthly").animate({ marginTop: mt });
            $(".yearly").animate({ marginTop: mt });
          }, 500);
        }
      } catch (e) {}
    }
  }
};
</script>

<style scoped>
@media only screen and (max-width: 1366px) {
  .date-input-box {
    position: relative;
    top: -1px;
  }
}
</style>