shenze-sysMan/src/views/robotRanking.vue

<template>
  <div class="robotRanking flex-col">
    <s-header
      :name="$t('robotRanking.machineSalesRanking')"
      :noback="true"
    ></s-header>
    <div class="box1 flex-col">
      <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">
                  <img class="label2" src="@/assets/device/searchIcon.png" />
                  <span class="txt3">{{ $t("robotRanking.rankMethod") }}</span>
                </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>
        </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-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 } from "@/common/js/utils";
// import dateUtil from "@/utils/dateUtil";
import kTabs from "@/components/commom/kTabs/index.vue";
import kDialog from "@/components/commom/kDialog/index.vue";
import moment from "moment";
import { Toast } 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 changeTypeShow = ref(false);
    // 默认选中
    const chgTypeDefaIdx = ref(1);
    const changeTypePopList = [
      {
        name: t("robotRanking.patternStatistics"),
        id: 1,
      },
      {
        name: t("robotRanking.salesStatistics"),
        id: 0,
      },
    ];
    const changeTypePopConfirm = (e) => {
      searchForm.changeType = e.id;
      searchForm.changeTypeName = e.name;
      changeTypeShow.value = false;
    };
    // 年的日期选择弹窗
    // 点击确定
    const yearPopConfirm = (e) => {
      console.log("e11", 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) {
          Toast(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);
    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：花型统计
        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: "#4D6ADD" },
                label: {
                  show: true,
                  position: "top",
                },
              },
              {
                ...data.data.series[1],
                type: "bar",
                itemStyle: { color: "#E59A6D" },
                label: {
                  show: true,
                  position: "top",
                },
              },
            ];
            dayChartOption.dataZoom[0]["startValue"] =
              data.data.categories[data.data.categories.length - 5];
            dayChartOption.dataZoom[0]["endValue"] =
              data.data.categories[data.data.categories.length - 1];
            // 解决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 () => {
      // 默认筛选选中
      searchForm.changeTypeName = t("robotRanking.salesStatistics");
      searchForm.changeType = 0;
      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: "",
    });
    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;
      }
      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,
      totalNoData,
      chgTypeDefaIdx,
    };
  },
  components: { sHeader, navBar, kTabs, kDialog, kNoData },
};
</script>

<style lang="less" scoped>
body * {
  box-sizing: border-box;
  flex-shrink: 0;
}

body {
  font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
    Arial, PingFang SC-Light, Microsoft YaHei;
}

button {
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  outline: none;
  background-color: transparent;
}

button:active {
  opacity: 0.6;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify-start {
  display: flex;
  justify-content: flex-start;
}

.justify-center {
  display: flex;
  justify-content: center;
}

.justify-end {
  display: flex;
  justify-content: flex-end;
}

.justify-evenly {
  display: flex;
  justify-content: space-evenly;
}

.justify-around {
  display: flex;
  justify-content: space-around;
}

.justify-between {
  display: flex;
  justify-content: space-between;
}

.align-start {
  display: flex;
  align-items: flex-start;
}

.align-center {
  display: flex;
  align-items: center;
}

.align-end {
  display: flex;
  align-items: flex-end;
}

.robotRanking {
  background-color: #fff;
  position: relative;
  width: 100%;
  padding-bottom: 60px;
  overflow: hidden;
  overflow-y: auto;

  .box1 {
    height: 100%;
    width: 100%;

    .box2 {
      height: 64px;
      background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnged210ff8540d1e20d828b0758e650612a9ea018b41f720bede87fea0f933d8d8)
        100% no-repeat;
      width: 100%;

      .layer1 {
        width: 364px;
        height: 20px;
        margin: 1px 0 0 7px;

        .group1 {
          width: 34px;
          height: 6px;
          background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga64b2ae35561e96115c75cc6dfc235eedb108ecf95df957be1ef364417a9806e)
            100% no-repeat;
          margin-top: 7px;
        }

        .word1 {
          width: 38px;
          height: 17px;
          overflow-wrap: break-word;
          color: rgba(81, 84, 106, 1);
          font-size: 12px;
          font-family: PingFangSC-Semibold;
          text-align: right;
          white-space: nowrap;
          line-height: 17px;
          margin-left: 21px;
          display: block;
        }

        .group2 {
          width: 30px;
          height: 17px;
          overflow-wrap: break-word;
          font-size: 0;
          font-family: PingFangSC-Semibold;
          text-align: right;
          white-space: nowrap;
          line-height: 17px;
          margin: 3px 0 0 73px;

          .info1 {
            width: 30px;
            height: 17px;
            overflow-wrap: break-word;
            color: rgba(81, 84, 106, 1);
            font-size: 12px;
            font-family: PingFangSC-Semibold;
            text-align: left;
            white-space: nowrap;
            line-height: 17px;
          }

          .word2 {
            width: 30px;
            height: 17px;
            overflow-wrap: break-word;
            color: rgba(81, 84, 106, 1);
            font-size: 12px;
            font-family: PingFangSC-Medium;
            text-align: left;
            white-space: nowrap;
            line-height: 17px;
          }
        }

        .group3 {
          width: 26px;
          height: 10px;
          background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2e68dee6e62554db0f6ac40572f41b7be9cc24d35fc06b24c556fed2b7b18626)
            100% no-repeat;
          margin: 5px 0 0 142px;
        }
      }

      .layer2 {
        width: 218px;
        height: 22px;
        margin: 9px 0 12px 10px;

        .label1 {
          width: 10px;
          height: 18px;
          margin-top: 4px;
        }

        .txt1 {
          width: 80px;
          height: 22px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 16px;
          font-family: PingFangSC-Medium;
          text-align: center;
          white-space: nowrap;
          line-height: 22px;
          display: block;
        }
      }
    }

    .box3 {
      background-color: rgba(255, 255, 255, 1);
      height: 100%;
      margin-top: 1px;
      width: 100%;

      .main1 {
        width: 100%;
        height: 100%;

        .groove {
          height: 10px;
          width: 100%;
          background-color: #f5f5f5;
        }

        .mod1 {
          background-color: rgba(255, 255, 255, 1);
          height: 54px;
          width: 100%;

          .block1 {
            width: 100%;
            height: 33px;
            margin-top: 21px;

            .section1 {
              width: 100%;
              height: 17px;
              padding-left: 15px;
              padding-right: 15px;

              .ImageText1 {
                height: 16px;
                margin-top: 1px;
                width: 135px;

                .group4 {
                  width: 135px;
                  height: 16px;

                  .layer3 {
                    width: 14px;
                    height: 16px;
                    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngaf434f154dc423fe53e1c1f756bb2336f532874e7b7ea909f1680d0cabd0ab9d)
                      100% no-repeat;
                  }

                  .TextGroup1 {
                    height: 14px;
                    margin-top: 2px;
                    width: 113px;

                    .word3 {
                      width: 113px;
                      height: 14px;
                      overflow-wrap: break-word;
                      color: rgba(64, 77, 116, 1);
                      font-size: 15px;
                      font-family: PingFangSC-Semibold;
                      text-align: left;
                      white-space: nowrap;
                      line-height: 15px;
                      display: block;
                    }
                  }
                }
              }

              .ImageText2 {
                height: 16px;
                width: 39px;

                .group5 {
                  width: 39px;
                  height: 16px;

                  .icon1 {
                    width: 14px;
                    height: 14px;
                    margin-top: 1px;
                  }

                  .TextGroup2 {
                    height: 16px;
                    width: 22px;

                    .word4 {
                      width: 22px;
                      height: 16px;
                      overflow-wrap: break-word;
                      color: rgba(64, 77, 116, 1);
                      font-size: 11px;
                      text-align: center;
                      white-space: nowrap;
                      line-height: 16px;
                      display: block;
                    }
                  }
                }
              }
            }

            .img1 {
              width: 100%;
              height: 2px;
              margin-top: 14px;
            }
          }
        }

        .robotLabelName {
          width: 22%;
        }

        .mod3 {
          background-color: rgba(255, 255, 255, 1);
          z-index: 24;
          height: 350px;
          width: 100%;
          position: relative;
        }

        .mod5 {
          background-color: rgba(255, 255, 255, 1);
          z-index: 84;
          height: 350px;
          width: 100%;
          position: relative;
        }

        .mod9 {
          background-color: rgba(255, 255, 255, 1);
          z-index: 156;
          height: 350px;
          width: 100%;
          position: relative;
        }

        .mod11 {
          background-color: rgba(255, 255, 255, 1);
          z-index: 217;
          height: 350px;
          width: 100%;
          position: relative;
        }
      }
    }
  }
}
</style>