AIzhushou-screen/src/views/index/right-bottom.vue

<script setup lang="ts">
import { rightBottom } from "@/api";
import SeamlessScroll from "@/components/seamless-scroll";
import { useSettingStore } from "@/stores";
import { storeToRefs } from "pinia";
import EmptyCom from "@/components/empty-com";
import { ElMessage } from "element-plus";

const settingStore = useSettingStore();
const { defaultOption, indexConfig } = storeToRefs(settingStore);
const state = reactive<any>({
  list: [],
  defaultOption: {
    ...defaultOption.value,
    singleHeight: 205, //单步运动停止的高度，与滚动盒子的高度进行适配
    limitScrollNum: 3,
    // singleWaitTime:3000, // 停顿间隔
    step:1 //滚动速度，数字越大，滚动越快
  },
  scroll: true,
});

const getData = () => {
  state.list = [
    {
      "provinceName": "北京",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "上海",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "天津",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "重庆",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "河北",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 1
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "山西",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "内蒙古",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "辽宁",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "吉林",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "黑龙江",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "江苏",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "浙江",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "安徽",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "福建",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "江西",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "山东",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 1
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "河南",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 1
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "湖北",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 2
        }
      ]
    },
    {
      "provinceName": "湖南",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "广东",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "广西",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "海南",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "四川",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "贵州",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "云南",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "西藏",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "陕西",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "甘肃",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "青海",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "宁夏",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "香港",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "澳门",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "台湾",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    },
    {
      "provinceName": "新疆",
      "progress": 0,
      "degreesDto": [
        {
          "degreesName": "统招专科",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招专升本",
          "paymentCompleted": 0,
          "nonPayment": 0
        },
        {
          "degreesName": "统招本科",
          "paymentCompleted": 0,
          "nonPayment": 0
        }
      ]
    }
  ]
};

const comName = computed(() => {
  if (indexConfig.value.rightBottomSwiper) {
    return SeamlessScroll;
  } else {
    return EmptyCom;
  }
});

onMounted(() => {
  getData();
});
</script>

<template>

  <div class="right_bottom">
    <div class="table-title">
      <div class="title-item">排名</div>
      <div class="title-item">省份/地市 </div>
      <div class="title-item">本科</div>
      <div class="title-item">专科</div>
      <div class="title-item">专升本</div>
    </div>
    <div class="right_bottom_wrap" :class="{ 'overflow-y-auto': true }">
      <!-- <component :is="comName" :list="state.list" v-model="state.scroll"
        :singleHeight="state.defaultOption.singleHeight" :step="state.defaultOption.step"
        :limitScrollNum="state.defaultOption.limitScrollNum" :hover="state.defaultOption.hover"
        :singleWaitTime="state.defaultOption.singleWaitTime" :wheel="state.defaultOption.wheel"> -->
        <div class="table-row" v-for="(item, i) in state.list">
          <div class="row-item">{{ i + 1 }}</div>
          <div class="row-item">{{ item.provinceName }}</div>
          <div class="row-item" v-for="(peo) in item.degreesDto">{{ peo.paymentCompleted }}</div>
        </div>
      <!-- </component> -->
    </div>
  </div>
</template>

<style scoped lang="scss">
.right_bottom {
  width: 100%;
  height: 100%;

  .table-title {
    display: flex;
    height: 50px;
    align-items: center;
    color: #545e70;
    border-radius: 10px 10px 0px 0px;
    border: 1px solid #33343F;

    .title-item {
      width: 100px;
      text-align: center;

    }
  }
}

.right_bottom_wrap {
  overflow: hidden;
  height: 210px;

  .table-row {
    display: flex;
    height: 50px;
    border-bottom: 1px solid #33343F;
    border-top: 1px solid #33343F;
    line-height: 50px;
    margin-bottom: 2px;
    color:#E6E6FB;
    &:hover{
      background: repeating-linear-gradient(0deg, #0042b3 0%, #0049ca 50%, #0042b3 100%);
    }

    .row-item {
      width: 100px;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.overflow-y-auto {
  overflow-y: auto;
}
::-webkit-scrollbar {
  width: 0px;
}
</style>