data-dashboard/src/pages/newResults.vue

<template>
  <div class="new-results" v-loading="state.loading" style="min-height:300px">
    <div v-if="!state.error && isShow">
      <div
        style="
        color:red;
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:100%;
        padding:5px 10px;
        box-sizing:border-box;
        "
        >

        <el-popover placement="top-start":width="200" trigger="hover"
          content=" 以下报表一小时更新一次">
          <template #reference>
            <i class="el-icon-warning-outline" style="font-size:22px;cursor:pointer"></i>
          </template>
        </el-popover>

        <el-switch v-model="isTenThound" active-text="万元" inactive-text="元" />
      </div>


      <div class="container">
        <result-company :companies="companies" :isTenThound="isTenThound" :costField="costField" />
        <result-department :companies="companies" :isTenThound="isTenThound" :costField="costField" />
        <result-company-month :companies="companies" :isTenThound="isTenThound" :costField="costField" />
      </div>
    </div>

    <template v-else-if="!state.loading">
      <unusual-state :hasPermission="isShow" :message="state.message" path="newReport" />
    </template>
  </div>
</template>

<script>
import PeriodDatePicker from "../components/period-date-picker";
import UnusualState from "@/components/unusual/index.vue";
import ResultCompany from "@/components/newResults/company.vue"
import ResultDepartment from "@/components/newResults/department.vue"
import ResultCompanyMonth from "@/components/newResults/company-month.vue"
import { getOpenid, getParameterByName, removeOpenid, setOpenid } from "../utils/auth";
import userRequest from "@/api/index";

export default {
  name: "newReport",
  components: {
    UnusualState,
    ResultCompany,
    ResultDepartment,
    PeriodDatePicker,
    ResultCompanyMonth
  },
  data() {
    return {
      companies: [],
      costField: false,
      zxTotal: 0,
      daytime: "",
      isDisplay: false,
      isTenThound: true,
      state: { message: '', error: false, loading: false }
    };
  },
  mounted() {
    if (!getParameterByName('code')) {
      this.login()
    } else {
      this.requestUserinfo()
    }
  },
  methods: {
    async time(e) {
      const { startTime, endTime } = e;
      this.start = startTime || "";
      this.end = endTime || "";

      const { start, end } = this;
      if ((start !== "" && end === "") || (start === "" && end !== "")) {
        this.$message.warning("时间区间不完整！");
        this.date = []
        return;
      }

      if (this.start && this.end) {
        this.date = [this.start + " 00:00:00", this.end + " 23:59:59"]
      } else {
        this.date = [this.start, this.end]
      }
    },
    async requestUserinfo() {
      this.state.loading = true
      const openid = getOpenid()
      const code = getParameterByName('code')
      const result = await userRequest.userinfo({ ...(openid ? { openid } : { code }) })

      //   const result = {
      //    "code": 0,
      //    "message": "获取成功",
      //    "data": {
      //      "openid": "oOpc26KiZFBKIm7SB8knFGvov1qg",
      //      "subscribe_time": "2022-12-21 15:52:14",
      //      "updatetime": "2023-05-09 16:22:33",
      //      "addtime": "2023-04-10 18:11:17",
      //      "is_show": ["1", "2", "4", "6", "cost_field"],
      //      "nickname": "雪寒",
      //      "addr": "\/\/",
      //      "gender": "0",
      //      "mobile": "",
      //      "avatar": "",
      //      "status": "1",
      //      "id": "1",
      //      "companyArr": [
      //        {"companyNo": "GS2302231125079621", "companyName": "北京百辰荣达国际科贸有限公司", "info": [1, 2, 6]}, 
      //        {"companyNo": "GS2302231323386950","companyName": "北京泓源广诚国际商贸有限公司", "info": [1, 2, 6]}, 
      //        {"companyNo": "GS2203161855277894","companyName": "北京万宇恒通国际科贸有限公司", "info": [1, 2, 6]},
      //        {"companyNo": "GS2304031312553746","companyName": "北京锦兴弘昌科技有限公司",  "info": [1, 2, 6]}, 
      //        {"companyNo": "GS2302231124114965","companyName": "北京普润心堂商贸有限公司", "info": [1, 2, 6]}
      //      ]
      //  	}
      //  }

      this.companies = result.data.companyArr.reduce((prev, current) => {
        return current.info.includes(6) || current.info.includes('6') ? [...prev, {
          value: current.companyNo,
          label: current.companyName
        }] : prev
      }, [])

      this.state.loading = false
      switch (Number(result.code)) {
        case 0:
          this.isShow = (result.data.is_show || []).includes(6) || (result.data.is_show || []).includes('6')
          this.costField = (result.data.is_show || []).includes('cost_field')
          setOpenid(result.data.openid)
          break
        default:
          this.state.error = true;
          this.state.message = result.message;
          openid && removeOpenid();
          break;
      }
    },
    login() {
      const redirect_url = encodeURIComponent('http://stat.caixiao365.com/accountsReceivable')
      var state = 'wx_' + Math.random().toString(36).substr(2, 15)
      const scope = 'snsapi_userinfo'
      const baseUrl = "https://open.weixin.qq.com/connect/oauth2/authorize";
      const url = `${baseUrl}?appid=${config.appId}&redirect_uri=${redirect_url}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`
      window.location.href = url;
    },
  }
}
</script>


<style lang="scss" scoped>
.new-results {
  width: 100vw;
  height: 100vh;
  position: fixed;
  overflow: auto;

  .container {
    height:calc(100vh - 40px);
    overflow:auto;
    background:white;
  }
}
</style>