shenze-sysMan/src/views/robotRanking.vue

<template>
  <div class="robotRanking flex-col">
    <div class="box1 flex-col">
      <s-header :name="$t('robotRanking.machineSalesRanking')" :noback="true" :isFixed="false"></s-header>
      <div class="box3 flex-col">
        <div class="main1 flex-col">
          <div class="mod1 flex-col">
            <div class="block1 flex-col justify-between">
              <div class="section1 flex-row justify-between">
                <div class="ImageText1 flex-col">
                  <div class="group4 flex-row justify-between">
                    <div class="layer3 flex-col"></div>
                    <div class="TextGroup1 flex-col">
                      <span class="word3">{{
                        $t("robotRanking.machineSalesRanking")
                      }}</span>
                    </div>
                  </div>
                </div>
                <div @click="noticeClk" class="l-flex-RC o-ml-70">
                  <div class="group5 flex-row justify-between">
                    <img class="label2" src="@/assets/device/searchIcon.png" />
                    <div class="TextGroup2 flex-col">
                      <span class="txt3">{{ $t("robotRanking.rankMethod") }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <img class="img1" referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a" />
            </div>
          </div>
          <div class="l-f l-flex-e o-plr-15">
            <span class="robotLabelName l-in c-text-13" style="color: #404d74">{{ $t("robotRanking.dailySalesRanking")
            }}:</span>
            <kTabs @tabclk="(e) => tabclk(e, 'day')" :tabList="tabDayList"></kTabs>
          </div>
          <div v-if="!totalNoData('day')" ref="dayChartBox" class="mod3 flex-col"></div>
          <kNoData v-else></kNoData>
          <div class="groove"></div>
          <div class="l-f l-flex-e o-plr-15">
            <span class="robotLabelName l-in o-mr-6 c-text-13" style="color: #404d74">{{
              $t("robotRanking.salesRankingThisWeek") }}:</span>
            <kTabs @tabclk="(e) => tabclk(e, 'week')" :tabList="tabWeekList"></kTabs>
          </div>
          <div v-if="!totalNoData('week')" ref="weekChartBox" class="mod5 flex-col"></div>
          <kNoData v-else></kNoData>
          <div class="groove"></div>
          <div class="l-f l-flex-e o-plr-15">
            <span class="robotLabelName l-in o-mr-6 c-text-13" style="color: #404d74">{{
              $t("robotRanking.salesRankingThisMonth") }}:</span>
            <kTabs @tabclk="(e) => tabclk(e, 'month')" :tabList="tabMonthList"></kTabs>
          </div>
          <div v-if="!totalNoData('month')" ref="monthChartBox" class="mod9 flex-col"></div>
          <kNoData v-else></kNoData>
          <div class="groove"></div>
          <div class="l-f l-flex-e o-plr-15">
            <span class="robotLabelName l-in o-mr-6 c-text-13" style="color: #404d74">{{
              $t("robotRanking.salesRankingThisYear") }}:</span>
            <kTabs @tabclk="(e) => tabclk(e, 'year')" :tabList="tabYearList"></kTabs>
          </div>
          <div v-if="!totalNoData('year')" ref="yearChartBox" class="mod11 flex-col"></div>
          <kNoData v-else></kNoData>
          <div class="groove"></div>
        </div>
      </div>
    </div>
    <!-- 筛选弹窗 -->
    <kDialog :dialogTitle="$t('subLedgerManage.search.title')" :confirmBtnTxt="$t('subLedgerManage.search.screen')"
      ref="kDialogRef" @confirmclk="confirmClk">
      <template #content>
        <div class="cust_vantBorder">
          <!-- <van-field @click-input="busiInpClk" readonly clearable  v-model="searchForm.businessName"
            :placeholder="$t('subLedgerManage.search.busiPlaceholder')" :label="$t('subLedgerManage.search.business')">
            <template #right-icon>
              <div class="l-flex-RC">
                <van-icon v-if="searchForm.businessName" @click="searchForm.businessName = ''" class="o-mr-6"
                  name="clear" />
                <van-icon @click="busiInpClk" name="arrow-down" />
              </div>
            </template>
          </van-field> -->
          <van-field @click-input="changeTypeInpClk" readonly clearable v-model="searchForm.changeTypeName"
            :placeholder="$t('robotRanking.changeTypePlace')" :label="$t('robotRanking.changeType')">
            <template #right-icon>
              <div class="l-flex-RC">
                <van-icon v-if="searchForm.changeTypeName" @click="
                  searchForm.changeTypeName = '';
                searchForm.changeType = '';
                " class="o-mr-6" name="clear" />
                <van-icon @click="changeTypeInpClk" name="arrow-down" />
              </div>
            </template>
          </van-field>
          <van-field @click-input="machineTypeInpClk" readonly clearable v-model="searchForm.machineTypeName"
            :placeholder="$t('robotRanking.machineTypePlace')" :label="$t('robotRanking.machineType')">
            <template #right-icon>
              <div class="l-flex-RC">
                <van-icon v-if="searchForm.machineTypeName" @click="
                  searchForm.machineTypeName = '';
                searchForm.machineType = '';
                " class="o-mr-6" name="clear" />
                <van-icon @click="machineTypeInpClk" name="arrow-down" />
              </div>
            </template>
          </van-field>
          <van-field v-if="isAdmin()" @click-input="companyTypeInpClk" readonly clearable
            v-model="searchForm.companyTypeName" :placeholder="$t('robotRanking.companyTypePlaceholder')"
            :label="$t('robotRanking.companyTypeLabel')">
            <template #right-icon>
              <div class="l-flex-RC">
                <van-icon v-if="searchForm.companyTypeName" @click="
                  searchForm.companyTypeName = '';
                searchForm.companyType = '';
                " class="o-mr-6" name="clear" />
                <van-icon @click="companyTypeInpClk" name="arrow-down" />
              </div>
            </template>
          </van-field>
        </div>
      </template>
    </kDialog>
    <!-- 商家选择框 -->
    <van-popup v-model:show="busiPopShow" position="bottom">
      <van-picker :title="$t('subLedgerManage.search.busiPlaceholder')" :columns="busiPopList"
        :columns-field-names="busiPopFieldName" @confirm="busiPopConfirm" @cancel="busiPopShow = false" />
    </van-popup>
    <!-- 统计方式弹窗 -->
    <van-popup v-model:show="changeTypeShow" position="bottom">
      <van-picker :default-index="chgTypeDefaIdx" :title="$t('robotRanking.changeTypePlace')" :columns="changeTypePopList"
        :columns-field-names="yearPopFieldName" @confirm="changeTypePopConfirm" @cancel="changeTypeShow = false" />
    </van-popup>
    <!-- 设备类型弹窗 -->
    <van-popup v-model:show="machineTypeShow" position="bottom">
      <van-picker :default-index="maTypeDefaIdx" :title="$t('robotRanking.machineTypePlace')"
        :columns="machineTypePopList" :columns-field-names="yearPopFieldName" @confirm="machineTypePopConfirm"
        @cancel="machineTypeShow = false" />
    </van-popup>
    <!-- 公司平台弹窗 -->
    <van-popup v-model:show="companyTypeShow" position="bottom">
      <van-picker :default-index="maTypeDefaIdx" :title="$t('robotRanking.companyTypePlaceholder')"
        :columns="companyTypePopList" :columns-field-names="yearPopFieldName" @confirm="companyTypePopConfirm"
        @cancel="companyTypeShow = false" />
    </van-popup>
    <!-- 日的日期选择弹窗 -->
    <van-calendar @confirm="calendarDayConfirm" v-model:show="dayShow" color="#4d6add" :min-date="minDate"
      :show-confirm="false" />
    <!-- 周的日期选择弹窗 -->
    <van-calendar @confirm="(e) => {
      calendarWeekOrMonConfirm(e, 1);
    }
      " v-model:show="weekShow" :allow-same-day="true" color="#4d6add" :min-date="minDate" type="range" />
    <!-- 月的日期选择弹窗 -->
    <van-calendar @confirm="(e) => {
      calendarWeekOrMonConfirm(e, 2);
    }
      " v-model:show="monthShow" :allow-same-day="true" color="#4d6add" :min-date="minDate" type="range" />
    <!-- 年的日期选择弹窗 -->
    <van-popup v-model:show="yearShow" position="bottom">
      <van-picker :title="$t('robotRanking.yearPopTitle')" :columns="yearPopList" :columns-field-names="yearPopFieldName"
        @confirm="yearPopConfirm" @cancel="yearShow = false" />
    </van-popup>
    <!-- <nav-bar></nav-bar> -->
  </div>
</template>

<script>
// 导入无数据组件
import kNoData from "../components/commom/kNoData/index.vue";
import { onMounted, ref, reactive, computed, nextTick } from "vue";
import sHeader from "../components/SimpleHeader";
// import navBar from "../components/NavBar";
import { getRankingList } from "../service/robotRanking";
import { getLoginUser, styleUrl } from "../common/js/utils";
import kTabs from "../components/commom/kTabs/index.vue";
import kDialog from "../components/commom/kDialog/index.vue";
import moment from "moment";
import { showToast } from "vant";
import { useI18n } from "vue-i18n";
export default {
  setup() {
    // 引入语言
    const { t } = useI18n();
    // 日周月年的数据
    const totalObj = reactive({
      dayData: {},
      weekData: {},
      monthData: {},
      yearData: {},
    });
    // 日周月年图表没有数据
    const totalNoData = computed(() => (idx) => {
      let dataObj;
      switch (idx) {
        case "day":
          dataObj = totalObj.dayData;
          break;
        case "week":
          dataObj = totalObj.weekData;
          break;
        case "month":
          dataObj = totalObj.monthData;
          break;
        case "year":
          dataObj = totalObj.yearData;
          break;
      }
      if (!dataObj || dataObj?.categories?.length === 0) {
        return true;
      }
      return false;
    });
    // 统计方式弹窗
    const changeTypeInpClk = () => {
      changeTypeShow.value = true;
    };
    // 是否管理员
    const isAdmin = () => { return (user && user.type === 0); }
    // 公司平台弹窗
    const companyTypeInpClk = () => {
      companyTypeShow.value = true;
    };
    // 设备类型弹窗
    const machineTypeInpClk = () => {
      machineTypeShow.value = true;
    };
    const changeTypeShow = ref(false);
    const machineTypeShow = ref(false);
    const companyTypeShow = ref(false);
    // 默认选中
    const chgTypeDefaIdx = ref(1);
    const maTypeDefaIdx = ref("");
    const changeTypePopList = [
      {
        name: t("robotRanking.patternStatistics"),
        id: 1,
      },
      {
        name: t("robotRanking.salesStatistics"),
        id: 0,
      },
    ];
    const machineTypePopList = [
      {
        name: t("robotRanking.whole"),
        id: "",
      },
      {
        name: t("robotRanking.MG"),
        id: "0",
      },
      {
        name: t("robotRanking.POP"),
        id: "1",
      },
    ];
    const companyTypePopList = [
      {
        name: t("robotRanking.whole"),
        id: "",
      },
      {
        name: t("robotRanking.sz"),
        id: "0",
      },
      {
        name: t("robotRanking.sc"),
        id: "1",
      },
    ];
    const changeTypePopConfirm = ({ selectedOptions }) => {
      searchForm.changeType = selectedOptions[0].id;
      searchForm.changeTypeName = selectedOptions[0].name;
      changeTypeShow.value = false;
    };
    const machineTypePopConfirm = ({ selectedOptions }) => {
      searchForm.machineType = selectedOptions[0].id;
      searchForm.machineTypeName = selectedOptions[0].name;
      machineTypeShow.value = false;
    };
    const companyTypePopConfirm = ({ selectedOptions }) => {
      searchForm.companyType = selectedOptions[0].id;
      searchForm.companyTypeName = selectedOptions[0].name;
      companyTypeShow.value = false;
    };
    // 年的日期选择弹窗
    // 点击确定
    const yearPopConfirm = (e) => {
      // console.log("e的值是11", e);
      const year = e.id;
      const startDate =
        moment().year(year).startOf("year").format("YYYY-MM-DD") + " 00:00:00";
      const endDate =
        moment().year(year).endOf("year").format("YYYY-MM-DD") + " 23:59:59";
      getEquipRankList("year", startDate, endDate);
      yearShow.value = false;
    };
    // 获取当前年前4年后1年
    let yearPopList = [];
    for (let i = -1; i < 5; i++) {
      const year = moment().subtract(i, "years").format("YYYY");
      yearPopList.push({
        name: year,
        id: year,
      });
    }
    const yearPopFieldName = reactive({
      text: "name",
      value: "id",
    });
    const yearShow = ref(false);
    const currentDate = ref(new Date());
    const yearFormatter = (type, val) => {
      if (type === "year") {
        return val;
      }
      return val;
    };
    // 周和月的日期选择弹窗
    const weekShow = ref(false);
    const monthShow = ref(false);
    const calendarWeekOrMonConfirm = (e, idx) => {
      const startDate = e[0];
      const endDate = e[1];
      let weekOrMont = "month";
      // 如果是周计算开始和结束日期相差多少天，因为周不能超过7天
      if (idx === 1) {
        weekOrMont = "week";
        const differDays = moment(endDate).diff(moment(startDate), "days");
        if (differDays >= 7) {
          showToast(t("robotRanking.seleWeekDateRangeNotSeveDays"));
          return;
        }
      }
      const startTime = moment(e[0]).format("YYYY-MM-DD") + " 00:00:00";
      const endTime = moment(e[1]).format("YYYY-MM-DD") + " 23:59:59";
      getEquipRankList(weekOrMont, startTime, endTime);
      if (idx === 1) {
        weekShow.value = false;
      } else {
        monthShow.value = false;
      }
    };
    // 日的日期选择弹窗
    // 日历选择触发
    const calendarDayConfirm = (e) => {
      const startDate = moment(e).format("YYYY-MM-DD") + " 00:00:00";
      const endDate = moment(e).format("YYYY-MM-DD") + " 23:59:59";
      getEquipRankList("day", startDate, endDate);
      dayShow.value = false;
    };
    // 最小日期选择
    const minDate = new Date(2018, 1, 1);
    const dayShow = ref(false);
    // 日，周，月，年的tab栏数据
    const tabDayList = ref([
      {
        name: t("robotRanking.today"),
        icon: "",
        id: 1,
      },
      {
        name: t("robotRanking.yesterday"),
        icon: "",
        id: 2,
      },
      {
        name: t("robotRanking.other"),
        icon: "arrow-down",
        id: 3,
      },
    ]);
    const tabWeekList = ref([
      {
        name: t("robotRanking.thisWeek"),
        icon: "",
        id: 1,
      },
      {
        name: t("robotRanking.lastWeek"),
        icon: "",
        id: 2,
      },
      {
        name: t("robotRanking.other"),
        icon: "arrow-down",
        id: 3,
      },
    ]);
    const tabMonthList = ref([
      {
        name: t("robotRanking.thisMonth"),
        icon: "",
        id: 1,
      },
      {
        name: t("robotRanking.lastMonth"),
        icon: "",
        id: 2,
      },
      {
        name: t("robotRanking.other"),
        icon: "arrow-down",
        id: 3,
      },
    ]);
    const tabYearList = ref([
      {
        name: t("robotRanking.thisYear"),
        icon: "",
        id: 1,
      },
      {
        name: t("robotRanking.lastYear"),
        icon: "",
        id: 2,
      },
      {
        name: t("robotRanking.other"),
        icon: "arrow-down",
        id: 3,
      },
    ]);
    // 默认进来的时间
    const defaultTime = reactive({
      // 今日
      todayStart: moment().format("YYYY-MM-DD") + " 00:00:00",
      todayEnd: moment().format("YYYY-MM-DD") + " 23:59:59",
      // 昨日
      colastdayStart:
        moment()
          .day(moment().day() - 1)
          .format("YYYY-MM-DD") + " 00:00:00",
      colastdayEnd:
        moment()
          .day(moment().day() - 1)
          .format("YYYY-MM-DD") + " 23:59:59",
      // 这周
      weekStart: moment().weekday(1).format("YYYY-MM-DD") + " 00:00:00",
      weekEnd: moment().weekday(7).format("YYYY-MM-DD") + " 23:59:59",
      // 上周
      lastWeekStart: moment().week(moment().week() - 1).startOf('week').add(1, 'days').format("YYYY-MM-DD") + " 00:00:00",
      // moment()
      //   .week(moment().week() - 1)
      //   .startOf("week")
      //   .format("YYYY-MM-DD") + " 00:00:00",

      lastWeekEnd: moment().week(moment().week() - 1).endOf('week').add(1, 'days').format("YYYY-MM-DD") + " 23:59:59",
      // moment()
      //   .week(moment().week() - 1)
      //   .endOf("week")
      //   .format("YYYY-MM-DD") + " 23:59:59",

      // 这个月
      monthStart: moment().startOf("month").format("YYYY-MM-DD") + " 00:00:00",
      monthEnd: moment().endOf("month").format("YYYY-MM-DD") + " 23:59:59",
      // 上个月
      lastmonthStart:
        moment()
          .month(moment().month() - 1)
          .startOf("month")
          .format("YYYY-MM-DD") + " 00:00:00",
      lastmonthEnd:
        moment()
          .month(moment().month() - 1)
          .endOf("month")
          .format("YYYY-MM-DD") + " 23:59:59",
      // 今年
      yearStart: moment().startOf("year").format("YYYY-MM-DD") + " 00:00:00",
      yearEnd: moment().endOf("year").format("YYYY-MM-DD") + " 23:59:59",
      // 上年
      lastYearStart:
        moment()
          .year(moment().year() - 1)
          .startOf("year")
          .format("YYYY-MM-DD") + " 00:00:00",
      lastYearEnd:
        moment()
          .year(moment().year() - 1)
          .endOf("year")
          .format("YYYY-MM-DD") + " 23:59:59",
    });
    // 点击tab
    const tabclk = (e, type) => {
      let startDate = "";
      let endDate = "";
      switch (type) {
        case "day":
          switch (e.name) {
            case 0:
              startDate = defaultTime.todayStart;
              endDate = defaultTime.todayEnd;
              break;
            case 1:
              startDate = defaultTime.colastdayStart;
              endDate = defaultTime.colastdayEnd;
              break;
            case 2:
              // 打开日历弹窗
              dayShow.value = true;
              break;
          }
          break;
        case "week":
          switch (e.name) {
            case 0:
              startDate = defaultTime.weekStart;
              endDate = defaultTime.weekEnd;
              break;
            case 1:
              startDate = defaultTime.lastWeekStart;
              endDate = defaultTime.lastWeekEnd;
              break;
            case 2:
              // 打开周的日期选择弹窗
              weekShow.value = true;
              break;
          }
          break;
        case "month":
          switch (e.name) {
            case 0:
              startDate = defaultTime.monthStart;
              endDate = defaultTime.monthEnd;
              break;
            case 1:
              startDate = defaultTime.lastmonthStart;
              endDate = defaultTime.lastmonthEnd;
              break;
            case 2:
              // 打开月的日期选择弹窗
              monthShow.value = true;
              break;
          }
          break;
        case "year":
          switch (e.name) {
            case 0:
              startDate = defaultTime.yearStart;
              endDate = defaultTime.yearEnd;
              break;
            case 1:
              startDate = defaultTime.lastYearStart;
              endDate = defaultTime.lastYearEnd;
              break;
            case 2:
              // 打开年的日期弹窗
              yearShow.value = true;
              break;
          }
          break;
      }
      // 如果是点击其他，不用请求
      if (e.name !== 2) {
        //  获取日、周、月、年的排行数据
        getEquipRankList(type, startDate, endDate);
      }
    };
    const changeType = ref(0);
    const companyType = ref(""); // 公司平台
    const machineType = ref(""); // 设备类型
    let chartObj = {
      day: null,
      week: null,
      month: null,
      year: null,
    };
    // 获取日、周、月、年的排行数据
    const getEquipRankList = (chartType, startDate, endDate) => {
      let param = {
        adminId: user.id,
        ifForeign: user.ifForeign,
        changeType: changeType.value, //必填，默认为一0:销售额统计，1：花型统计
        companyType: companyType.value,
        machineType: machineType.value,
        chartType,
        startDate,
        endDate,
      };
      getRankingList(param).then(async (res) => {
        const { data } = res;
        switch (chartType) {
          case "day":
            totalObj.dayData = data.data;
            // console.log("日返回值", data);
            break;
          case "week":
            totalObj.weekData = data.data;
            // console.log("周返回值", data);
            break;
          case "month":
            totalObj.monthData = data.data;
            // console.log("月返回值", data);
            break;
          case "year":
            totalObj.yearData = data.data;
            // console.log("年返回值", data);
            break;
        }
        // 有数据返回则处理
        if (data.code && data.data) {
          // echarts的配置
          const chartOption = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            // 固定屏幕显示多少个，其余的滑动
            dataZoom: [
              // {
              // 	type: 'slider',
              // 	xAxisIndex: 0,
              // 	filterMode: 'none',
              // 	// 开始的值
              // 	startValue: null,
              // 	// 结束的值
              // 	endValue: null,
              // 	// 锁定滑动的区域
              // 	// zoomLock:true,
              // },
              {
                type: "inside",
                xAxisIndex: 0,
                filterMode: "none",
                startValue: null,
                endValue: null,
                zoomLock: true,
              },
            ],
            grid: {
              left: "3%",
              right: "4%",
              bottom: "10%",
              containLabel: true,
            },
            legend: {
              bottom: 0,
              right: 10,
              itemWidth: 10,
              itemHeight: 10,
              icon: "rect",
            },
            yAxis: { type: "value" },
            xAxis: {
              type: "category",
              axisLabel: {
                rotate: 45,
              },
              data: [],
            },
            series: [],
          };
          await nextTick();
          let chartBox;
          switch (chartType) {
            case "day":
              chartBox = dayChartBox.value;
              break;
            case "week":
              chartBox = weekChartBox.value;
              break;
            case "month":
              chartBox = monthChartBox.value;
              break;
            case "year":
              chartBox = yearChartBox.value;
              break;
          }
          if (chartBox) {
            const dayChartOption = Object.assign({}, chartOption);
            dayChartOption.xAxis.data = data.data.categories;
            dayChartOption.series = [
              {
                ...data.data.series[0],
                type: "bar",
                itemStyle: { color: "#e59a6d" },
                name: t("home.productNum"),
                label: {
                  show: true,
                  position: "top",
                },
              },
              {
                ...data.data.series[1],
                type: "bar",
                itemStyle: { color: "#4d6add" },
                name: t("home.salesAmount"),
                label: {
                  show: true,
                  position: "top",
                },
              },
            ];
            dayChartOption.dataZoom[0]["startValue"] =
              data.data.categories[0];
            dayChartOption.dataZoom[0]["endValue"] =
              data.data.categories[4];
            // 解决resize不起作用，配合onMounted里的方法使用
            switch (chartType) {
              case "day":
                chartObj.day = window.echarts.init(chartBox, null, {
                  renderer: "canvas",
                  useDirtyRect: false,
                });
                chartObj.day && chartObj.day.setOption(dayChartOption);
                break;
              case "week":
                chartObj.week = window.echarts.init(chartBox, null, {
                  renderer: "canvas",
                  useDirtyRect: false,
                });
                chartObj.week && chartObj.week.setOption(dayChartOption);
                break;
              case "month":
                chartObj.month = window.echarts.init(chartBox, null, {
                  renderer: "canvas",
                  useDirtyRect: false,
                });
                chartObj.month && chartObj.month.setOption(dayChartOption);
                break;
              case "year":
                chartObj.year = window.echarts.init(chartBox, null, {
                  renderer: "canvas",
                  useDirtyRect: false,
                });
                chartObj.year && chartObj.year.setOption(dayChartOption);
                break;
            }
          }
        }
      });
    };
    const user = getLoginUser();
    // 日、周、月、年的图表
    const dayChartBox = ref();
    const weekChartBox = ref();
    const monthChartBox = ref();
    const yearChartBox = ref();
    // 初始化页面获取列表
    onMounted(async () => {
      // 加载样式
      styleUrl('robotRanking');
      // 默认筛选选中
      searchForm.changeTypeName = t("robotRanking.salesStatistics");
      searchForm.changeType = 0;
      searchForm.companyTypeName = t("robotRanking.whole");
      searchForm.machineTypeName = t("robotRanking.whole");
      // 查询是否有订单数据权限
      const isOrderData = user.menuCodeList.some((item) => {
        return item === "M4";
      })

      // 如果是type为admin或者商家或者是有订单数据权限M4的子商家才可以查看
      if (user.type === 0 || user.type === 2 || isOrderData) {
        init();
      }

      window.addEventListener("resize", () => {
        chartObj.day && chartObj.day.resize();
        chartObj.week && chartObj.week.resize();
        chartObj.month && chartObj.month.resize();
        chartObj.year && chartObj.year.resize();
      });
    });
    // 刚进页面获取
    const init = () => {
      // 获取日的排行数据
      getEquipRankList("day", defaultTime.todayStart, defaultTime.todayEnd);
      // 获取周的排行数据
      getEquipRankList("week", defaultTime.weekStart, defaultTime.weekEnd);
      // 获取月的排行数据
      getEquipRankList("month", defaultTime.monthStart, defaultTime.monthEnd);
      // 获取年的排行数据
      getEquipRankList("year", defaultTime.yearStart, defaultTime.yearEnd);
    };
    const searchForm = reactive({
      businessName: "",
      changeTypeName: "",
      changeType: "",
      machineTypeName: "",
      machineType: "",
      companyTypeName: "",
      companyType: ""
    });
    const kDialogRef = ref(null);
    const busiPopShow = ref(false);
    const busiPopList = reactive([
      {
        name: "商户1",
        id: "1",
      },
      {
        name: "商户2",
        id: "2",
      },
    ]);
    const busiPopFieldName = reactive({
      text: "name",
      value: "id",
    });
    // 点击筛选
    const noticeClk = () => {
      kDialogRef.value.openDialog();
    };
    // 点击右侧按钮
    const confirmClk = () => {
      if (searchForm.changeType === "") {
        changeType.value = 1;
      } else {
        changeType.value = searchForm.changeType;
      }
      companyType.value = searchForm.companyType;
      machineType.value = searchForm.machineType;
      init();
    };
    // 筛选弹窗
    // 点击商家输入框
    const busiInpClk = () => {
      // console.log(111111111);
      busiPopShow.value = true;
    };
    const busiPopConfirm = (e) => {
      // console.log("e的值是", e);
      busiPopShow.value = false;
      searchForm.businessName = e.name;
    };
    const busiPopCancel = () => {
      busiPopShow.value = false;
    };
    return {
      dayChartBox,
      weekChartBox,
      monthChartBox,
      yearChartBox,
      tabclk,
      tabDayList,
      tabWeekList,
      tabMonthList,
      tabYearList,
      noticeClk,
      kDialogRef,
      busiInpClk,
      busiPopShow,
      busiPopConfirm,
      busiPopList,
      busiPopFieldName,
      busiPopCancel,
      confirmClk,
      searchForm,
      dayShow,
      minDate,
      calendarDayConfirm,
      weekShow,
      monthShow,
      calendarWeekOrMonConfirm,
      yearFormatter,
      currentDate,
      yearShow,
      yearPopList,
      yearPopConfirm,
      yearPopFieldName,
      changeTypeShow,
      changeTypePopList,
      changeTypePopConfirm,
      changeTypeInpClk,

      companyTypeInpClk,
      companyTypePopConfirm,
      companyTypePopList,
      companyTypeShow,

      machineTypeInpClk,
      machineTypePopConfirm,
      machineTypePopList,
      machineTypeShow,

      totalNoData,
      maTypeDefaIdx,
      chgTypeDefaIdx,
      isAdmin,
    };
  },
  components: { sHeader, kTabs, kDialog, kNoData },
};
</script>

<style lang="less" scoped>
@import "../styles/robotRanking/index";
</style>