静态页面

src/components/Dropdown/Dropdown.vue

@@ -0,0 +1,169 @@
+<template>
+    <div ref="dropdownRef" class="dropdown">
+        <!-- Dropdown button -->
+        <button @click="toggleDropdown" style="width: 100%;">
+            {{ selectedOption }}
+            <!-- <svg
+          :class="isOpen ? 'down' : ''"
+          aria-hidden="true"
+          class="icon icon-caret"
+          role="presentation"
+          viewBox="0 0 10 6"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z"
+            fill="currentColor"
+            fill-rule="evenodd"
+          ></path>
+        </svg> -->
+        </button>
+        <!-- Dropdown menu -->
+        <ul v-if="isOpen" class="dropdown-menu">
+            <li v-for="(option, index) in options" :key="index" @click="selectOption(option)">
+                {{ option.label }}
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, onUnmounted, nextTick } from "vue";
+
+export default {
+    name: "DropdownMenu",
+    props: {
+        options: {
+            type: Array,
+            required: true,
+        },
+        title:{
+            type: String,
+            required: true
+        }
+    },
+    setup(props) {
+        // Reactive variables
+        const isOpen = ref(false); // Dropdown open/close state
+        const selectedOption = ref(props.title); // Currently selected option 默认是标题
+        const dropdownRef = ref(null); // Reference to dropdown element
+        const { proxy } = getCurrentInstance();
+        // Toggle dropdown open/close state
+        const toggleDropdown = () => {
+            isOpen.value = !isOpen.value;
+        };
+
+        // Select an option from the dropdown
+        const selectOption = (option) => {
+            selectedOption.value = option.label; // Update selected option
+            if (!option.value) {
+                selectedOption.value = props.title
+            }
+            isOpen.value = false; // Close the dropdown
+            // 将选择的值传递给父组件
+            proxy.$emit("getOption", option.value);
+        };
+
+        // Close dropdown when clicking outside
+        const closeDropdown = (event) => {
+            if (!dropdownRef.value.contains(event.target)) {
+                isOpen.value = false;
+            }
+        };
+        // 清除选择数据
+        const clearOption = () => {
+            selectedOption.value = props.title;
+        }
+
+        // Lifecycle hook: mounted
+        onMounted(() => {
+            nextTick(() => {
+                document.addEventListener("click", closeDropdown); // Listen for click events outside dropdown
+            });
+        });
+
+        // Lifecycle hook: unmounted
+        onUnmounted(() => {
+            document.removeEventListener("click", closeDropdown); // Remove event listener when component is unmounted
+        });
+
+        return {
+            isOpen,
+            selectedOption,
+            toggleDropdown,
+            selectOption,
+            dropdownRef,
+            clearOption
+        };
+        defineExpose({
+            clearOption
+        })
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown button {
+    background: none;
+    color: inherit;
+    padding: 0;
+    border: none;
+    cursor: pointer;
+    font-size: inherit;
+    font-weight: inherit;
+}
+
+.dropdown-menu {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 10px);
+    // background-color: #f9f9f9;
+    background: rgba(0, 0, 0, 0.8);
+    min-width: 180px;
+    max-height: 300px;
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+    z-index: 1;
+    margin: 0;
+    padding: 0;
+    overflow-y: auto;
+}
+
+.dropdown-menu li {
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1.5;
+    font-weight: 500;
+}
+
+.dropdown-menu li:hover {
+    background-color: rgb(35, 83, 147);
+}
+
+.icon-caret {
+    color: #666;
+    stroke: #666;
+    height: 1.3rem;
+    width: 1.3rem;
+    margin-left: 0.3rem;
+    stroke-width: 0.02rem;
+    pointer-events: auto;
+    transition: transform 0.2s ease-in-out;
+
+    &.down {
+        transform: rotate(180deg);
+    }
+}
+
+/* 设置滚动条的宽度 */
+::-webkit-scrollbar {
+    display: none;
+}
+</style>

src/components/zk-item/zk-item.vue

@@ -54,6 +54,7 @@ $item_title_content-height: calc(100% - 38px);
     width: 100%;
     height: 2px;
     background: repeating-linear-gradient(90deg, #2C3E50 2%, #68C6DE 10%, #2C3E50 40%, #11181f 80%, #11181f 100%);
+    margin-bottom: 10px;
 }
 
 :deep(.dv-border-box-content) {

src/stores/setting/setting.ts

@@ -3,7 +3,7 @@ import { defineStore } from 'pinia'
 // import { storeToRefs } from 'pinia';
 export const useSettingStore = defineStore('setting', () => {
   const settingShow = ref(false);//设置弹窗显隐
-  const isScale = ref(true);//是否进行全局适配 --- 默认是适配的
+  const isScale = ref(false);//是否进行全局适配 --- 默认是适配的
   const indexConfig = ref({
     leftBottomSwiper: true,//左轮播
     rightBottomSwiper: true,//右下轮播

src/views/HomeView.vue

@@ -14,9 +14,10 @@ const wrapperStyle = {};
 </script>
 
 <template>
-  <scale-screen width="1920" height="1080" :delay="500" :fullScreen="false" :boxStyle="{
+  <scale-screen width="1920" height="1080" :delay="500" :fullScreen="true" :boxStyle="{
     background: '#03050C',
-    overflow: isScale ? 'hidden' : 'auto',
+    // overflow: isScale ? 'hidden' : 'auto',
+    overflow:'hidden'
     
     }" :wrapperStyle="wrapperStyle" :autoScale="isScale">
     <div class="content_wrap">

src/views/header.vue

@@ -5,10 +5,44 @@ const test = () => {
     console.log("test", res);
   })
 };
-const returnHome = () => {
+// const returnHome = () => {
-  history.go(-1)
+//   history.go(-1)
-  // window.location.href = 'http://nclg.yx.zheke.com/#/login';
+// };
-};
+const yearOptions = ref([{ label: '2024年', value: 2024 }, { label: '2023年', value: 2023 }, { label: '2022年', value: 2022 }, { label: '2021年', value: 2021 }, { label: '2020年', value: 2020 }])
+const monthOptions = ref([
+  { label: '/', value: null },
+  { label: '1月', value: 1 },
+  { label: '2月', value: 2 },
+  { label: '3月', value: 3 },
+  { label: '4月', value: 4 },
+  { label: '5月', value: 5 },
+  { label: '6月', value: 6 },
+  { label: '7月', value: 7 },
+  { label: '8月', value: 8 },
+  { label: '9月', value: 9 },
+  { label: '10月', value: 10 },
+  { label: '11月', value: 11 },
+  { label: '12月', value: 12 },
+])
+// 获取选择的年
+const getYear = (val: any) => {
+  console.log(val)
+}
+// 获取选择的月
+const getMonth = (val: any) => {
+  console.log(val)
+}
+const selectYear = ref(null)
+const selectMonth = ref(null)
+const clearSelect = () => {
+  if (selectYear.value) {
+    selectYear.value.clearOption()
+  }
+  if (selectMonth.value) {
+    selectMonth.value.clearOption()
+
+  }
+}
 </script>
 
 <template>
@@ -16,7 +50,7 @@ const returnHome = () => {
     <div class="top-left">
       <div class="title">
         <span class="title-text" @click="test()">新生报道情况</span>
-        <span style="color: yellow;" @click="returnHome()">返回</span>
+        <!-- <span style="color: yellow;" @click="returnHome()">返回</span> -->
       </div>
       <div class="en-title">
         <div class="en-line"></div>
@@ -25,8 +59,14 @@ const returnHome = () => {
     </div>
 
     <div class="change-time">
-      <div class="change-year">切换年份</div>
+      <div class="change-year">
-      <div class="change-year">切换月份</div>
+        <Dropdown :options="yearOptions" title="切换年份" @getOption="getYear" ref="selectYear"></Dropdown>
+      </div>
+
+      <div class="change-year">
+        <Dropdown :options="monthOptions" title="切换月份" @getOption="getMonth" ref="selectMonth"></Dropdown>
+      </div>
+      <div class="change-year" @click="clearSelect">选择今日</div>
     </div>
   </div>
 </template>
@@ -42,9 +82,10 @@ const returnHome = () => {
   margin-bottom: 4px;
 }
 
-.top-left{
+.top-left {
   display: flex;
 }
+
 .title {
   // position: relative;
   width: 300px;
@@ -52,6 +93,7 @@ const returnHome = () => {
   // color: transparent;
   height: 60px;
   line-height: 46px;
+
   .title-text {
     font-family: 'YouSheBiaoTiHei';
     font-size: 38px;
@@ -73,7 +115,8 @@ const returnHome = () => {
   // line-height: 40px;
   padding-top: 10px;
   text-align: center;
-  .en-line{
+
+  .en-line {
     width: 80%;
     height: 2px;
     background-color: #ADC0DE;
@@ -84,12 +127,12 @@ const returnHome = () => {
 .change-time {
   // position: relative;
   // float: right;
-  width: 300px;
+  width: 400px;
   height: 60px;
   display: flex;
   justify-content: space-between;
   font-family: 'YouSheBiaoTiHei';
-  font-size: 18px;
+  font-size: 16px;
 
 
   .change-year {

src/views/index/center-bottom.vue

@@ -1,156 +0,0 @@
-<script setup lang="ts">
-import { ref, reactive, onMounted, nextTick } from "vue";
-import { installationPlan } from "@/api";
-import { graphic } from "echarts/core";
-import { ElMessage } from "element-plus";
-
-const option = ref({});
-const getData = () => {
-  return 
-  installationPlan()
-    .then((res) => {
-      console.log("中下--安装计划", res);
-      if (res.success) {
-        setOption(res.data);
-      } else {
-        ElMessage({
-          message: res.msg,
-          type: "warning",
-        });
-      }
-    })
-    .catch((err) => {
-      ElMessage.error(err);
-    });
-};
-const setOption = async (newData: any) => {
-  option.value = {
-    tooltip: {
-      trigger: "axis",
-      backgroundColor: "rgba(0,0,0,.6)",
-      borderColor: "rgba(147, 235, 248, .8)",
-      textStyle: {
-        color: "#FFF",
-      },
-      formatter: function (params: any) {
-        // 添加单位
-        var result = params[0].name + "<br>";
-        params.forEach(function (item: any) {
-          if (item.value) {
-            if (item.seriesName == "安装率") {
-              result += item.marker + " " + item.seriesName + " : " + item.value + "%</br>";
-            } else {
-              result += item.marker + " " + item.seriesName + " : " + item.value + "个</br>";
-            }
-          } else {
-            result += item.marker + " " + item.seriesName + " :  - </br>";
-          }
-        });
-        return result;
-      },
-    },
-    legend: {
-      data: ["已安装", "计划安装", "安装率"],
-      textStyle: {
-        color: "#B4B4B4",
-      },
-      top: "0",
-    },
-    grid: {
-      left: "50px",
-      right: "40px",
-      bottom: "30px",
-      top: "20px",
-    },
-    xAxis: {
-      data: newData.category,
-      axisLine: {
-        lineStyle: {
-          color: "#B4B4B4",
-        },
-      },
-      axisTick: {
-        show: false,
-      },
-    },
-    yAxis: [
-      {
-        splitLine: { show: false },
-        axisLine: {
-          lineStyle: {
-            color: "#B4B4B4",
-          },
-        },
-
-        axisLabel: {
-          formatter: "{value}",
-        },
-      },
-      {
-        splitLine: { show: false },
-        axisLine: {
-          lineStyle: {
-            color: "#B4B4B4",
-          },
-        },
-        axisLabel: {
-          formatter: "{value}% ",
-        },
-      },
-    ],
-    series: [
-      {
-        name: "已安装",
-        type: "bar",
-        barWidth: 10,
-        itemStyle: {
-          borderRadius: 5,
-          color: new graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: "#956FD4" },
-            { offset: 1, color: "#3EACE5" },
-          ]),
-        },
-        data: newData.barData,
-      },
-      {
-        name: "计划安装",
-        type: "bar",
-        barGap: "-100%",
-        barWidth: 10,
-        itemStyle: {
-          borderRadius: 5,
-          color: new graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: "rgba(156,107,211,0.8)" },
-            { offset: 0.2, color: "rgba(156,107,211,0.5)" },
-            { offset: 1, color: "rgba(156,107,211,0.2)" },
-          ]),
-        },
-        z: -12,
-        data: newData.lineData,
-      },
-      {
-        name: "安装率",
-        type: "line",
-        smooth: true,
-        showAllSymbol: true,
-        symbol: "emptyCircle",
-        symbolSize: 8,
-        yAxisIndex: 1,
-        itemStyle: {
-          color: "#F02FC2",
-        },
-        data: newData.rateData,
-      },
-    ],
-  };
-};
-onMounted(() => {
-  getData();
-});
-</script>
-
-<template>
-  <v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
-</template>
-
-<style scoped lang="scss"></style>

src/views/index/center-map.vue

@@ -1,124 +1,210 @@
-<script setup lang="ts">
-import { ref, reactive, nextTick } from "vue";
-import { centerMap, GETNOBASE } from "@/api";
-import { registerMap, getMap } from "echarts/core";
-import { optionHandle, regionCodes } from "./center.map";
-import { ElMessage } from "element-plus";
-
-import type { MapdataType } from "./center.map";
-
-const option = ref({});
-const code = ref("china"); //china 代表中国 其他地市是行政编码
-
-withDefaults(
-  defineProps<{
-    // 结束数值
-    title: number | string;
-  }>(),
-  {
-    title: "地图",
-  }
-);
-
-const dataSetHandle = async (regionCode: string, list: object[]) => {
-  const geojson: any = await getGeojson(regionCode);
-  let cityCenter: any = {};
-  let mapData: MapdataType[] = [];
-  //获取当前地图每块行政区中心点
-  geojson.features.forEach((element: any) => {
-    cityCenter[element.properties.name] = element.properties.centroid || element.properties.center;
-  });
-  //当前中心点如果有此条数据中心点则赋值x，y当然这个x,y也可以后端返回进行大点，前端省去多行代码
-  list.forEach((item: any) => {
-    if (cityCenter[item.name]) {
-      mapData.push({
-        name: item.name,
-        value: cityCenter[item.name].concat(item.value),
-      });
-    }
-  });
-  await nextTick();
-
-  option.value = optionHandle(regionCode, list, mapData);
-};
-
-const getData = async (regionCode: string) => {
-  return
-  centerMap({ regionCode: regionCode })
-    .then((res) => {
-      console.log("中上--设备分布", res);
-      if (res.success) {
-        dataSetHandle(res.data.regionCode, res.data.dataList);
-      } else {
-        ElMessage.error(res.msg);
-      }
-    })
-    .catch((err) => {
-      ElMessage.error(err);
-    });
-};
-const getGeojson = (regionCode: string) => {
-  return new Promise<boolean>(async (resolve) => {
-    let mapjson = getMap(regionCode);
-    if (mapjson) {
-      mapjson = mapjson.geoJSON;
-      resolve(mapjson);
-    } else {
-      mapjson = await GETNOBASE(`./map-geojson/${regionCode}.json`).then((data) => data);
-      code.value = regionCode;
-      registerMap(regionCode, {
-        geoJSON: mapjson as any,
-        specialAreas: {},
-      });
-      resolve(mapjson);
-    }
-  });
-};
-getData(code.value);
-
-const mapClick = (params: any) => {
-  // console.log(params);
-  let xzqData = regionCodes[params.name];
-  if (xzqData) {
-    getData(xzqData.adcode);
-  } else {
-    window["$message"].warning("暂无下级地市");
-  }
-};
-</script>
-
 <template>
-  <div class="mapwrap">
+  <div>
-    <div class="quanguo" @click="getData('china')" v-if="code !== 'china'">中国</div>
+    <div id="mapChart" style="width: 100%; height: 100%;display: flex;justify-content: center;"></div>
-    <v-chart class="chart" :option="option" ref="centerMapRef" @click="mapClick"
-      v-if="JSON.stringify(option) != '{}'" />
   </div>
 </template>
 
-<style scoped lang="scss">
+<script setup>
-.mapwrap {
+import chinaJson from "@/utils/china.json";
-  height: 780px;
+import * as echarts from 'echarts';
-  width: 100%;
+const myChart = ref()
-  // padding: 0 0 10px 0;
+const getMapChart = (data) => {
-  box-sizing: border-box;
+  // data.forEach((item) => {
-  position: relative;
+  //   item.value = item.num1 + item.num2 + item.num3
-  border: 1px solid #f00;
+  // })
+  myChart.value = echarts.init(document.getElementById("mapChart"));
+  // 注册默认全国地图的json，小写的china
+  echarts.registerMap("china", chinaJson);
+  let option = {
+    myChart: null,
+    mapName: "china",
+    tooltip: {
+      trigger: "item",
+      borderWidth: 0, //去掉白色边框
+      backgroundColor: 'rgba(0, 0, 0, .5)', //tooltip背景色
+      borderColor: '#2BEDF6', //tooltip边框颜色
+      borderWidth: 0, //去掉白色边框
+      // formatter: function (params) { // 格式化函数，用于自定义 tooltip 的内容
+      //   var html = '<div style="width:120px;background:rgba(0, 0, 0, .5); font-size: 14px; padding-bottom: 3px;">';
+      //   html += '<span style="display:block;width:100%;text-align:center;padding:5px 0; color: #ffffff;border-bottom:1px solid #fff;font-weight:bold">' + (params.name) + '</span>'; // 显示名称
+      //   html += '<span style="margin:3px 0 0 0;padding:0;display:block;width:100%;padding-left:14px;color: #fff;font-size: 12px;">' + '统招本科：' + (params.data.num3 || 0) + '</span>'; // 显示人数
+      //   html += '<span style="margin:0;padding:0;display:block;width:100%;padding-left:14px;color: #fff;font-size: 12px;">' + '统招专科：' + (params.data.num1 || 0) + '</span>'; // 显示人数
+      //   // html += '<span style="margin:0;padding:0;display:block;width:100%;padding-left:14px;color: #fff;font-size: 12px;">'+'统招专升本：' + (params.data.num2 || 0) + '</span>'; // 显示人数
+      //   if (params.data.num2) {
+      //     html += '<span style="margin:0;padding:0;display:block;width:100%;padding-left:14px;color: #fff;font-size: 12px;">' + '统招专升本：' + (params.data.num2 || 0) + '</span>';
+      //   }
+      //   html += '</div>';
+      //   return html;
+      // }
+    },
+    visualMap: {
+      min: 0,
+      max: 100000,
+      left: 26,
+      bottom: 0,
+      showLabel: true,
+      selectedMode: false,
+      textStyle:{
+          color:"#fff"
+        },
+      pieces: [{
+        gte: 200,
+        lte: 10000,
+        label: ">200人",
+        color: "#0145b3",
         
-  .quanguo {
+      },
-    position: absolute;
+      {
-    right: 20px;
+        gte: 100,
-    top: -46px;
+        lte: 200,
-    width: 80px;
+        label: "100 - 200人",
-    height: 28px;
+        color: "#024fcc"
-    border: 1px solid #00eded;
+      },
-    border-radius: 10px;
+      {
-    color: #00f7f6;
+        gte: 80,
-    text-align: center;
+        lte: 100,
-    line-height: 26px;
+        label: "80 - 100人",
-    letter-spacing: 6px;
+        color: "#0263ff"
-    cursor: pointer;
+      },
-    box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5), 0 0 6px rgba(0, 237, 237, 0.4);
+      {
-    z-index: 10;
+        gte: 60,
-  }
+        lte: 80,
+        label: "60 - 80人",
+        color: "#1b73ff"
+      }, {
+        gte: 40,
+        lt: 60,
+        label: "40 - 60人",
+        color: "#4e92ff"
+      }, {
+        gte: 20,
+        lt: 40,
+        label: "20 - 40人",
+        color: "#81b1ff"
+      }, {
+        gte: 0,
+        lt: 20,
+        label: "0 - 20人",
+        color: "#b3d0ff"
+      }],
+      show: true
+    },
+    geo: {
+      map: "china",
+      zoom: 1.25,
+      roam: false, //放大缩小地图、可拖拽
+      label: {
+        normal: {
+          show: true, //省份名展示
+          fontSize: "12", //省份字体大小
+          color: "#FFFFFF", //省份字体颜色
+        },
+        emphasis: {
+          show: true,
+          textStyle: {
+            color: "white", //鼠标移入省份字体颜色变化
+            fontSize: "14px", //鼠标移入省份字体大小变化
+          },
+        },
+      },
+      itemStyle: {
+        borderColor: "#aaaaaa", //地图边框颜色
+        // areaColor: "#b4d9f7", //地图背景颜色
+        areaColor: {
+          type: 'linear-gradient',
+          x: 0,
+          y: 1000,
+          x2: 0,
+          y2: 0,
+          colorStops: [
+              {
+                  offset: 0.5,
+                  color: '#0D59C1', // 0% 处的颜色
+              },
+              {
+                  offset: 1,
+                  color: '#b4d9c7', // 100% 处的颜色
+              },
+          ],
+          global: true, // 缺省为 false
+        },
+        borderWidth: 1,
+        emphasis: {
+          show: true,
+          areaColor: "#0063ff", //鼠标放到地图上显示的颜色
+          borderColor: "#6beaf3",
+          shadowOffsetX: 0,
+          shadowOffsetY: 0,
+          shadowBlur: 10,
+          borderWidth: 2,
+          shadowColor: "rgba(0, 0, 0, 0.5)",
+        },
+      },
+      //点击省份后背景颜色改变
+      select: {
+        itemStyle: {
+          // color: "yellow",
+          areaColor: "rgba(0, 0, 0, 0.5)", //点击省份后背景颜色改变
+        },
+      },
+    },
+    series: [
+      {
+        type: "map",
+        map: "中国",
+        mapType: "china",
+        geoIndex: 0, // 解决设置geo后地图重影问题
+        zoom: 1.25,
+        silent: false,
+        selectedMode: false,
+        itemStyle: {
+          areaColor: 'white' // 这里使用了两个颜色值来表示渐变色
+        },
+        // data: data,
+
+        // data:[
+        //   {name: '北京', value1: 10,value:5,value:6},
+        //   {name: '上海', value: 20},
+        //   {name: '广东', value: 30},
+        //   {name: '浙江', value: 40},
+        //   {name: '江苏', value: 50}
+        // ]
+      },
+      {
+        //绘制一个新地图
+        type: 'map',
+        map: 'china',
+        zoom: 1.25,
+        // center: [105.194115019531, 35.582111640625],
+        z: -1,
+        aspectScale: 0.75, //
+        itemStyle: {
+          normal: {
+            areaColor: '#0079bb',
+            borderColor: '#0061f4',
+            borderWidth: '2',
+            shadowColor: '#33434f',
+            shadowOffsetX: 0,
+            shadowOffsetY: 20,
+          },
+        },
+      }
+    ],
+  };
+  option && myChart.value.setOption(option);
 }
-</style>
+
+
+const resize = () => {
+  myChart.value.resize();
+}
+onMounted(() => {
+  getMapChart();
+  window.addEventListener('resize', () => { resize(); getRem(1700, 100) })
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', () => { resize() })
+})
+</script>
+<style></style>

src/views/index/center-top.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+
+import { ElMessage } from "element-plus";
+
+
+</script>
+
+<template>
+  <div class="center-top">
+    <div class="top-item-img">
+      <div class="top-item-icon">
+        <img src="@/assets/img/zheke/center_top1.png">
+      </div>
+      <div class="top-item">
+        <div class="top-item-title">今日迎新人数</div>
+        <div class="top-item-content">{{ 12404 }}</div>
+      </div>
+
+    </div>
+    <div class="top-item">
+      <div class="top-item-title">今日预报到人数</div>
+      <div class="top-item-content">{{ 12404 }}</div>
+    </div>
+    <div class="top-item">
+      <div class="top-item-title">今日预报到报到率</div>
+      <div class="top-item-content"> 95% </div>
+    </div>
+    <div class="top-item-img">
+      <div class="top-item-icon">
+        <img src="@/assets/img/zheke/center_top2.png">
+      </div>
+      <div class="top-item">
+        <div class="top-item-title">预报到总人数报到率</div>
+        <div class="top-item-content"> 95% </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.center-top {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+
+  .top-item-img {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .top-item {
+    display: flex;
+    flex-direction: column;
+    margin-left: 20px;
+
+    .top-item-title {
+      font-weight: 600;
+      font-size: 16px;
+      color: #FFFFFF;
+      line-height: 32px;
+      text-shadow: 1px 2px 0px rgba(25, 27, 28, 0.22);
+      font-style: italic;
+      // background: #3652AB;
+      background: linear-gradient(180deg,rgba(0,0,0, 0.4) 0%, rgba(76, 127, 220, 0.1) 50%),linear-gradient(90deg,rgba(0,0,0, 0.14) 0%, rgba(76, 127, 220, 0.64) 30%,rgba(0,0,0, 0.14) 100%);
+
+    }
+
+    .top-item-content {
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      font-size: 26px;
+      color: #FFFFFF;
+      background: linear-gradient(80deg, rgba(112, 162, 253, 0.64) 0%, rgba(255, 255, 255, 0.94) 50%,rgba(182, 198, 229, 0.64) 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+
+}
+</style>

src/views/index/center.map.ts

@@ -1,399 +0,0 @@
-
-
-//mapData数据结构
-export interface MapdataType {
-    name: string;
-    value: [number, number, number]; //x,y,value  第一个x 第二个y  第三个value
-}
-export const optionHandle = (regionCode: string,
-    list: object[],
-    mapData: MapdataType[]) => {
-    let top = 45;
-    let zoom = ["china"].includes(regionCode) ? 1.05 : 1;
-    return {
-        backgroundColor: "rgba(0,0,0,0)",
-        tooltip: {
-            show: false,
-        },
-        legend: {
-            show: false,
-        },
-        visualMap: {
-            seriesIndex:0,
-            left: 20,
-            bottom: 20,
-            pieces: [
-                { gte: 1000, label: "1000个以上" }, // 不指定 max，表示 max 为无限大（Infinity）。
-                { gte: 600, lte: 999, label: "600-999个" },
-                { gte: 200, lte: 599, label: "200-599个" },
-                { gte: 50, lte: 199, label: "49-199个" },
-                { gte: 10, lte: 49, label: "10-49个" },
-                { lte: 9, label: "1-9个" }, // 不指定 min，表示 min 为无限大（-Infinity）。
-            ],
-            inRange: {
-                // 渐变颜色，从小到大
-                // FFFFFF,EDF7FD,DBF0FA,C9E8F8,B7E1F6,A5D9F3,93D2F1,81CAEF,6FC2EC,5DBBEA,4AB3E8,38ACE5,26A4E3,1C9AD9,1A8DC7,
-                // 1781B5,
-                // 1573A2,136790,105A7E,0E4D6C,0C405A,093348,072636,051A24,020D12
-                color: [
-                    // "#EDF7FD",
-                    "rgba(237,247,253,.8)",
-                    // "#B7E1F6",
-                    "rgba(183,225,246,.9)",
-                    // "#81CAEF",
-                    "rgba(129,202,239,.9)",
-                    // "#38ACE5",
-                    "rgba(56,172,229,.9)",
-                    // "#1781B5",
-                    "rgba(23,129,181,.9)",
-                    // "#105A7E",
-                    "rgba(16,90,126,0.9)"
-                ],
-            },
-            textStyle: {
-                color: "#fff",
-            },
-        },
-        geo: {
-            map: regionCode,
-            roam: false,
-            selectedMode: false, //是否允许选中多个区域
-            zoom: zoom,
-            top: top,
-            // aspectScale: 0.78,
-            show: false,
-        },
-        series: [
-            {
-                name: "MAP",
-                type: "map",
-                map: regionCode,
-                // aspectScale: 0.78,
-                data: list,
-                // data: [1,100],
-                selectedMode: false, //是否允许选中多个区域
-                zoom: zoom,
-                geoIndex: 1,
-                top: top,
-                tooltip: {
-                    show: true,
-                    formatter: function (params: any) {
-                        if (params.data) {
-                            return params.name + "：" + params.data["value"];
-                        } else {
-                            return params.name;
-                        }
-                    },
-                    backgroundColor: "rgba(0,0,0,.6)",
-                    borderColor: "rgba(147, 235, 248, .8)",
-                    textStyle: {
-                        color: "#FFF",
-                    },
-                },
-                label: {
-                    show: false,
-                    color: "#000",
-                    // position: [-10, 0],
-                    formatter: function (val: any) {
-                        // console.log(val)
-                        if (val.data !== undefined) {
-                            return val.name.slice(0, 2);
-                        } else {
-                            return "";
-                        }
-                    },
-                    rich: {},
-                },
-                emphasis: {
-                    label: {
-                        show: false,
-                    },
-                    itemStyle: {
-                        // areaColor: "rgba(56,155,183,.7)",
-                        areaColor:{
-                            type: "radial",
-                            x: 0.5,
-                            y: 0.5,
-                            r: 0.8,
-                            colorStops: [
-                                {
-                                    offset: 0,
-                                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
-                                },
-                                {
-                                    offset: 1,
-                                    color: "rgba(56,155,183, .8)", // 100% 处的颜色
-                                },
-                            ],
-                            globalCoord: false, // 缺为 false
-                        },
-                        borderWidth: 1,
-                    },
-                },
-                itemStyle: {
-                    borderColor: "rgba(147, 235, 248, .8)",
-                    borderWidth: 1,
-                    areaColor: {
-                        type: "radial",
-                        x: 0.5,
-                        y: 0.5,
-                        r: 0.8,
-                        colorStops: [
-                            {
-                                offset: 0,
-                                color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
-                            },
-                            {
-                                offset: 1,
-                                color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
-                            },
-                        ],
-                        globalCoord: false, // 缺为 false
-                    },
-                    shadowColor: "rgba(128, 217, 248, .3)",
-                    shadowOffsetX: -2,
-                    shadowOffsetY: 2,
-                    shadowBlur: 10,
-                },
-            },
-            {
-                data: mapData,
-                type: "effectScatter",
-                coordinateSystem: "geo",
-                symbolSize: function (val: any) {
-                    return 4;
-                    // return val[2] / 50;
-                },
-                legendHoverLink: true,
-                showEffectOn: "render",
-                rippleEffect: {
-                    // period: 4,
-                    scale: 6,
-                    color: "rgba(255,255,255, 1)",
-                    brushType: "fill",
-                },
-                tooltip: {
-                    show: true,
-                    formatter: function (params: any) {
-                        if (params.data) {
-                            return params.name + "：" + params.data["value"][2];
-                        } else {
-                            return params.name;
-                        }
-                    },
-                    backgroundColor: "rgba(0,0,0,.6)",
-                    borderColor: "rgba(147, 235, 248, .8)",
-                    textStyle: {
-                        color: "#FFF",
-                    },
-                },
-                label: {
-                    formatter: (param: any) => {
-                        return param.name.slice(0, 2);
-                    },
-
-                    fontSize: 11,
-                    offset: [0, 2],
-                    position: "bottom",
-                    textBorderColor: "#fff",
-                    textShadowColor: "#000",
-                    textShadowBlur: 10,
-                    textBorderWidth: 0,
-                    color: "#FFF",
-                    show: true,
-                },
-                // colorBy: "data",
-                itemStyle: {
-                    color: "rgba(255,255,255,1)",
-                    borderColor: "rgba(2255,255,255,2)",
-                    borderWidth: 4,
-                    shadowColor: "#000",
-                    shadowBlur: 10,
-                },
-            },
-        ],
-        //动画效果
-        // animationDuration: 1000,
-        // animationEasing: 'linear',
-        // animationDurationUpdate: 1000
-    };
-}
-
-
-export const regionCodes: any = {
-    "中国": {
-        "adcode": "100000",
-        "level": "country",
-        "name": "中华人民共和国"
-    },
-    "新疆维吾尔自治区": {
-        "adcode": "650000",
-        "level": "province",
-        "name": "新疆维吾尔自治区"
-    },
-    "湖北省": {
-        "adcode": "420000",
-        "level": "province",
-        "name": "湖北省"
-    },
-    "辽宁省": {
-        "adcode": "210000",
-        "level": "province",
-        "name": "辽宁省"
-    },
-    "广东省": {
-        "adcode": "440000",
-        "level": "province",
-        "name": "广东省"
-    },
-    "内蒙古自治区": {
-        "adcode": "150000",
-        "level": "province",
-        "name": "内蒙古自治区"
-    },
-    "黑龙江省": {
-        "adcode": "230000",
-        "level": "province",
-        "name": "黑龙江省"
-    },
-    "河南省": {
-        "adcode": "410000",
-        "level": "province",
-        "name": "河南省"
-    },
-    "山东省": {
-        "adcode": "370000",
-        "level": "province",
-        "name": "山东省"
-    },
-    "陕西省": {
-        "adcode": "610000",
-        "level": "province",
-        "name": "陕西省"
-    },
-    "贵州省": {
-        "adcode": "520000",
-        "level": "province",
-        "name": "贵州省"
-    },
-    "上海市": {
-        "adcode": "310000",
-        "level": "province",
-        "name": "上海市"
-    },
-    "重庆市": {
-        "adcode": "500000",
-        "level": "province",
-        "name": "重庆市"
-    },
-    "西藏自治区": {
-        "adcode": "540000",
-        "level": "province",
-        "name": "西藏自治区"
-    },
-    "安徽省": {
-        "adcode": "340000",
-        "level": "province",
-        "name": "安徽省"
-    },
-    "福建省": {
-        "adcode": "350000",
-        "level": "province",
-        "name": "福建省"
-    },
-    "湖南省": {
-        "adcode": "430000",
-        "level": "province",
-        "name": "湖南省"
-    },
-    "海南省": {
-        "adcode": "460000",
-        "level": "province",
-        "name": "海南省"
-    },
-    "江苏省": {
-        "adcode": "320000",
-        "level": "province",
-        "name": "江苏省"
-    },
-    "青海省": {
-        "adcode": "630000",
-        "level": "province",
-        "name": "青海省"
-    },
-    "广西壮族自治区": {
-        "adcode": "450000",
-        "level": "province",
-        "name": "广西壮族自治区"
-    },
-    "宁夏回族自治区": {
-        "adcode": "640000",
-        "level": "province",
-        "name": "宁夏回族自治区"
-    },
-    "浙江省": {
-        "adcode": "330000",
-        "level": "province",
-        "name": "浙江省"
-    },
-    "河北省": {
-        "adcode": "130000",
-        "level": "province",
-        "name": "河北省"
-    },
-    "香港特别行政区": {
-        "adcode": "810000",
-        "level": "province",
-        "name": "香港特别行政区"
-    },
-    "台湾省": {
-        "adcode": "710000",
-        "level": "province",
-        "name": "台湾省"
-    },
-    "澳门特别行政区": {
-        "adcode": "820000",
-        "level": "province",
-        "name": "澳门特别行政区"
-    },
-    "甘肃省": {
-        "adcode": "620000",
-        "level": "province",
-        "name": "甘肃省"
-    },
-    "四川省": {
-        "adcode": "510000",
-        "level": "province",
-        "name": "四川省"
-    },
-    "天津市": {
-        "adcode": "120000",
-        "level": "province",
-        "name": "天津市"
-    },
-    "江西省": {
-        "adcode": "360000",
-        "level": "province",
-        "name": "江西省"
-    },
-    "云南省": {
-        "adcode": "530000",
-        "level": "province",
-        "name": "云南省"
-    },
-    "山西省": {
-        "adcode": "140000",
-        "level": "province",
-        "name": "山西省"
-    },
-    "北京市": {
-        "adcode": "110000",
-        "level": "province",
-        "name": "北京市"
-    },
-    "吉林省": {
-        "adcode": "220000",
-        "level": "province",
-        "name": "吉林省"
-    }
-}

src/views/index/index.vue

@@ -1,51 +1,59 @@
 <script setup lang="ts">
-import ItemWrap from "@/components/item-wrap";
 import zkItem from "@/components/zk-item";
 import LeftTop from "./left-top.vue";
 import LeftCenter from "./left-center.vue";
 import LeftBottom from "./left-bottom.vue";
 import CenterMap from "./center-map.vue";
-import CenterBottom from "./center-bottom.vue";
+import CenterTop from "./center-top.vue";
 import RightTop from "./right-top.vue";
 import RightCenter from "./right-center.vue";
 import RightBottom from "./right-bottom.vue";
+import RightTopTwo from "./right-top-two.vue";
+import RightBottomTwo from "./right-bottom-two.vue";
+const showRight = ref(true)
+const changeRight = () => {
+  showRight.value = !showRight.value
+};
 </script>
 
 <template>
   <div class="index-box">
     <div class="contetn_left">
-      <zkItem class="contetn_left-top contetn_lr-item" title="迎新进度">
+      <zkItem class="contetn_left-top contetn_lt-item" title="迎新进度">
         <LeftTop />
       </zkItem>
       <zkItem class="contetn_left-center contetn_lr-item" title="">
         <LeftCenter />
       </zkItem>
-      <zkItem
+      <zkItem class="contetn_left-bottom contetn_lb-item" title="" >
-        class="contetn_left-bottom contetn_lr-item"
-        title=""
-        style="padding: 0 10px 16px 10px"
-      >
         <LeftBottom />
       </zkItem>
     </div>
     <div class="contetn_center">
-      <CenterMap class="contetn_center_top" title="全国地图" />
+      <CenterTop class="contetn_center_top" />
+      <CenterMap class="contetn_center_map" title="全国地图" />
     </div>
-    <div class="contetn_right">
+    <div class="contetn_right" v-if="showRight">
-      <zkItem class="contetn_left-bottom contetn_lr-item" title="缴费人数">
+      <div class="change-btn" @click="changeRight"></div>
+      <zkItem class="contetn_left-bottom contetn_rt-one" title="缴费人数">
         <RightTop />
       </zkItem>
-      <zkItem
+      <zkItem class="contetn_left-bottom contetn_rc-item" title="当日缴费人数" style="padding: 0 10px 16px 10px">
-        class="contetn_left-bottom contetn_lr-item"
-        title="当日缴费人数"
-        style="padding: 0 10px 16px 10px"
-      >
         <RightCenter />
       </zkItem>
-      <zkItem class="contetn_left-bottom contetn_lr-item" title="报道人数区域排名 ">
+      <zkItem class="contetn_left-bottom contetn_rb-item" title="报道人数区域排名 ">
         <RightBottom />
       </zkItem>
     </div>
+    <div class="contetn_right" v-else>
+      <div class="change-btn" @click="changeRight"></div>
+      <zkItem class="contetn_left-bottom contetn_rt_two" title="学院报到人数">
+        <RightTopTwo />
+      </zkItem>
+      <zkItem class="contetn_left-bottom contetn_rb-item" title="专业报到人数 ">
+        <RightBottomTwo />
+      </zkItem>
+    </div>
   </div>
 </template>
 
@@ -56,32 +64,75 @@ import RightBottom from "./right-bottom.vue";
   min-height: calc(100% - 64px);
   justify-content: space-between;
 }
+
 //左边 右边 结构一样
 .contetn_left,
 .contetn_right {
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+  // justify-content: space-around;
   position: relative;
-  width: 540px;
+  width: 470px;
   box-sizing: border-box;
   flex-shrink: 0;
-  border: 2px solid transparent;
+  border: 2px solid rgba(107, 163, 247, 0.2);
   border-radius: 16px;
   background-clip: padding-box, border-box;
   background-origin: padding-box, border-box;
-  background-image: linear-gradient(to bottom, #003, #000), linear-gradient(0deg,rgba(43,74,158,0.18),#5999FC);
+  background-image: linear-gradient(to bottom, rgba(0,0,51,0.1), rgba(0,0,0,0.1)), linear-gradient(0deg, rgba(43, 74, 158, 0.1), rgba(89, 153, 252,0.1));
+  .change-btn{
+    position: absolute;
+    left: -60px;
+    top: calc(50% - 200px);
+    width: 55px;
+    height: 400px;
+    background: url('@/assets/img/zheke/right_change.png');
+    cursor: pointer;
+  }
 }
+
 .contetn_center {
   flex: 1;
   // margin: 0 54px;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+  padding-top: 50px;
+  // justify-content: space-around;
+  align-items: center;
+  .contetn_center_top {
+    width: 100%;
+    padding: 0 36px;
+    margin-bottom: 30px;
+  }
+  .contetn_center_map {
+    width: 100%;
+    height: 700px;
+    display: flex;
+    justify-content: center;
+
+  }
 
 }
-
+.contetn_lt-item{
+  height: 300px;
+}
 .contetn_lr-item {
   height: 310px;
 }
+.contetn_lb-item{
+  height: 310px;
+  margin-top: 130px;
+}
+.contetn_rt-one{
+  height: 240px;
+}
+.contetn_rt_two{
+  height: 640px;
+}
+.contetn_rc-item{
+  height: 380px;
+}
+.contetn_rb-item{
+  height: 310px;
+}
 </style>

src/views/index/left-bottom copy.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { color } from "echarts";
+import { ElMessage } from "element-plus";
+
+const option = ref({});
+const getData = () => {
+  var dataValArray = 0.63;
+  var datatext = ['17.25', '20', '12', '32', '19'];
+  var datasubtext = ['体育意识', '体育技能', '体育行为', '体育知识', '体质健康'];
+  setOption(datatext, datasubtext, dataValArray)
+};
+const Green = {
+  x: 0,
+  y: 0,
+  x2: 0,
+  y2: 1,
+  colorStops: [{
+    offset: 0,
+    color: '#99da69' // 0% 处的颜色
+  }, {
+    offset: 1,
+    color: '#01babc' // 100% 处的颜色
+  }],
+  globalCoord: false // 缺省为 false
+};
+const setOption = async (datatext: any[], datasubtext: any[], dataValArray: any) => {
+  option.value = {
+    backgroundColor: 'transparent',
+    title: {
+      text: datatext[0] + '%',
+      subtext: datasubtext[0],
+      x: 'center',
+      y: 'center',
+      textStyle: {
+        fontSize: 26,
+        fontWeight: 'normal',
+        color: ['#67828c']
+      },
+      subtextStyle: {
+        color: '#67828c',
+        fontSize: 16,
+        align: 'center',
+      }
+    },
+    series: [{
+      //渐变圆环
+      name: "",
+      type: "pie",
+      radius: ["35%", "50%"],
+      startAngle: 180,
+      hoverAnimation: false,
+      avoidLabelOverlap: true,
+      z: 0,
+      zlevel: 0,
+      label: {
+        show: false,
+        normal: { show: false }
+      },
+      data: [{
+        value: 0,
+        name: "",
+        itemStyle: {
+          normal: {
+            color: Green
+          }
+        }
+      }]
+    },
+    {
+      //仪表盘样式
+      name: "",
+      type: "gauge",
+      radius: "50%",
+      startAngle: 180,
+      clockwise: true,
+      splitNumber: 50,
+      hoverAnimation: true,
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        length: 20,
+        lineStyle: {
+          width: 1,
+          color: "#fff"
+        }
+      },
+      axisLabel: {
+        show: false
+      },
+      pointer: {
+        show: false
+      },
+      axisLine: {
+        lineStyle: {
+          opacity: 0
+        }
+      },
+      detail: {
+        show: false
+      },
+      data: [{
+        value: Math.round((dataValArray * 100)),
+        name: ""
+      }]
+    },
+    {
+      //进度圆环
+      name: 'Line 1',
+      type: 'pie',
+      startAngle: 180,
+      clockWise: true,
+      radius: ['55%', '56%'],
+      itemStyle: {
+        normal: {
+          label: {
+            show: true
+          },
+          labelLine: {
+            show: false
+          },
+        }
+      },
+      hoverAnimation: false,
+
+      data: [{
+        value: Math.round((dataValArray * 100)),
+        itemStyle: {
+          normal: {
+            color: '#20da97'
+          }
+        }
+      }, {//画中间的图标
+        name: "",
+        value: 0,
+        label: {
+          position: 'inside',
+          // backgroundColor: {
+          //   image: uploadedDataURL
+          // },
+          width: 16,
+          height: 16,
+          borderRadius: 20,
+          padding: 11
+        }
+      }, {
+        value: 100 - Math.round((dataValArray * 100)),
+        name: 'invisible',
+        itemStyle: {
+          normal: {
+            color: 'transparent', //未完成的圆环的颜色
+            label: {
+              show: false
+            },
+            labelLine: {
+              show: false
+            }
+          }
+        }
+      }
+      ]
+    }
+    ]
+  };
+};
+
+onMounted(() => {
+  getData();
+});
+</script>
+
+<template>
+  <v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
+</template>
+
+<style scoped lang="scss"></style>

src/views/index/left-bottom.vue

@@ -1,229 +1,81 @@
 <script setup lang="ts">
-import { leftBottom } from "@/api";
-import SeamlessScroll from "@/components/seamless-scroll";
-import { computed, onMounted, reactive } from "vue";
-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: 256,
-    limitScrollNum: 4,
-  },
-  scroll: true,
-});
-
-const getData = () => {
-  return
-  leftBottom( { limitNum: 20 })
-    .then((res) => {
-      console.log("左下--设备提醒", res);
-      if (res.success) {
-        state.list = res.data.list;
-      } else {
-        ElMessage({
-          message: res.msg,
-          type: "warning",
-        });
-      }
-    })
-    .catch((err) => {
-      ElMessage.error(err);
-    });
-};
-const addressHandle = (item: any) => {
-  let name = item.provinceName;
-  if (item.cityName) {
-    name += "/" + item.cityName;
-    if (item.countyName) {
-      name += "/" + item.countyName;
-    }
-  }
-  return name;
-};
-const comName = computed(() => {
-  if (indexConfig.value.leftBottomSwiper) {
-    return SeamlessScroll;
-  } else {
-    return EmptyCom;
-  }
-});
-onMounted(() => {
-  getData();
-});
 </script>
 
 <template>
-  <div class="left_boottom_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !indexConfig.leftBottomSwiper }">
-    <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"
-    >
-      <ul class="left_boottom">
-        <li class="left_boottom_item" v-for="(item, i) in state.list" :key="i">
-          <span class="orderNum doudong">{{ i + 1 }}</span>
-          <div class="inner_right">
-            <div class="dibu"></div>
-            <div class="flex">
-              <div class="info">
-                <span class="labels">设备ID：</span>
-                <span class="text-content zhuyao doudong wangguan"> {{ item.gatewayno }}</span>
-              </div>
-              <div class="info">
-                <span class="labels">时间：</span>
-                <span class="text-content" style="font-size: 12px"> {{ item.createTime }}</span>
-              </div>
-            </div>
 
-            <span
+  <div class="left-bottom">
-              class="types doudong"
+    <div class="content">
-              :class="{
+      <div class="title">预报到报到率</div>
-                typeRed: item.onlineState == 0,
+      <div class="left-content"></div>
-                typeGreen: item.onlineState == 1,
+      <div class="bottom-title">
-              }"
+        <div class="icons"></div> 
-              >{{ item.onlineState == 1 ? "上线" : "下线" }}</span
+        <div class="tips">预报到填写总数</div>
-            >
+      </div>
+      <div class="bottom-title">
+        <img src="@/assets/img/zheke/fillOut.png" alt="">
+        <div class="tips">预报到填写报到人数</div>
+      </div>
+    </div>
+    <div class="content">
+      <div class="title">预报到填写率</div>
+      <div class="right-content"></div>
+      <div class="bottom-title">
+        <div class="icons"></div>
+        <div class="tips">新生总人数</div>
+      </div>
+      <div class="bottom-title">
+        <img src="@/assets/img/zheke/fillOut.png" alt="">
+        <div class="tips">预报到填写人数</div>
+      </div>
+    </div>
+
 
-            <div class="info addresswrap">
-              <span class="labels">地址：</span>
-              <span class="text-content ciyao" style="font-size: 12px"> {{ addressHandle(item) }}</span>
-            </div>
-          </div>
-        </li>
-      </ul>
-    </component>
   </div>
 </template>
 
 <style scoped lang="scss">
-.left_boottom_wrap {
+.left-bottom {
-  overflow: hidden;
+  display: flex;
-  width: 100%;
+  justify-content: space-around;
-  height: 100%;
-}
 
-.doudong {
+  .title {
-  overflow: hidden;
+    font-family: YouSheBiaoTiHei;
-  backface-visibility: hidden;
+    font-weight: 400;
-}
+    font-size: 20px;
+    color: #FFFFFF;
+    margin-bottom: 20px;
+  }
 
-.overflow-y-auto {
+  .left-content {
-  overflow-y: auto;
+    width: 105px;
-}
+    height: 105px;
+    background: url("@/assets/img/zheke/lb_left.png");
+    background-size: cover;
+    background-position: center center;
+    margin-bottom: 10px;
+  }
 
-.left_boottom {
+  .right-content {
-  width: 100%;
+    width: 105px;
-  height: 100%;
+    height: 105px;
+    background: url("@/assets/img/zheke/lb_right.png");
+    background-size: cover;
+    background-position: center center;
+    margin-bottom: 10px;
+  }
 
-  .left_boottom_item {
+  .bottom-title {
     display: flex;
-    align-items: center;
+  }
-    justify-content: center;
-    padding: 8px;
-    font-size: 14px;
-    margin: 10px 0;
-    .orderNum {
-      margin: 0 16px 0 -20px;
-    }
 
-    .info {
+  .icons {
-      margin-right: 10px;
+    width: 15px;
-      display: flex;
+    height: 15px;
-      align-items: center;
+    background: #00214d;
-      color: #fff;
+  }
-
+  .tips{
-      .labels {
+    margin-left: 10px;
-        flex-shrink: 0;
-        font-size: 12px;
-        color: rgba(255, 255, 255, 0.6);
-      }
-
-      .zhuyao {
-        color: $primary-color;
-        font-size: 15px;
-      }
-
-      .ciyao {
-        color: rgba(255, 255, 255, 0.8);
-      }
-
-      .warning {
-        color: #e6a23c;
-        font-size: 15px;
-      }
-    }
-
-    .inner_right {
-      position: relative;
-      height: 100%;
-      width: 380px;
-      flex-shrink: 0;
-      line-height: 1;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      flex-wrap: wrap;
-      .dibu {
-        position: absolute;
-        height: 2px;
-        width: 104%;
-        background-image: url("@/assets/img/zuo_xuxian.png");
-        bottom: -10px;
-        left: -2%;
-        background-size: cover;
-      }
-      .addresswrap {
-        width: 100%;
-        display: flex;
-        margin-top: 8px;
-      }
-    }
-
-    .wangguan {
-      color: #1890ff;
-      font-weight: 900;
-      font-size: 15px;
-      width: 80px;
-      flex-shrink: 0;
-    }
-
-    .time {
-      font-size: 12px;
-      // color: rgba(211, 210, 210,.8);
-      color: #fff;
-    }
-
-    .address {
-      font-size: 12px;
-      cursor: pointer;
-      // @include text-overflow(1);
-    }
-
-    .types {
-      width: 30px;
-      flex-shrink: 0;
-    }
-
-    .typeRed {
-      color: #fc1a1a;
-    }
-
-    .typeGreen {
-      color: #29fc29;
-    }
   }
 }
 </style>

src/views/index/left-center.vue

@@ -1,158 +1,141 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
-import { graphic } from "echarts/core";
-import { countUserNum } from "@/api";
-import {ElMessage} from "element-plus"
 
-let colors = ["#0BFC7F", "#A0A0A0", "#F48C02", "#F4023C"];
-const option = ref({});
-const state = reactive({
-  lockNum: 0,
-  offlineNum: 0,
-  onlineNum: 0,
-  alarmNum: 0,
-  totalNum: 0,
-});
-const echartsGraphic = (colors: string[]) => {
-  return new graphic.LinearGradient(1, 0, 0, 0, [
-    { offset: 0, color: colors[0] },
-    { offset: 1, color: colors[1] },
-  ]);
-};
-const getData = () => {
-  return
-  countUserNum().then((res) => {
-    console.log("左中--用户总览",res);
-    if (res.success) {
-      state.lockNum = res.data.lockNum;
-      state.offlineNum = res.data.offlineNum;
-      state.onlineNum = res.data.onlineNum;
-      state.totalNum = res.data.totalNum;
-      state.alarmNum = res.data.alarmNum;
-      setOption();
-    }else{
-      ElMessage.error(res.msg)
-    }
-  }).catch(err=>{
-    ElMessage.error(err)
-  });
-};
-getData();
-const setOption = () => {
-  option.value = {
-    title: {
-      top: "center",
-      left: "center",
-      text: [`{value|${state.totalNum}}`, "{name|总数}"].join("\n"),
-      textStyle: {
-        rich: {
-          value: {
-            color: "#ffffff",
-            fontSize: 24,
-            fontWeight: "bold",
-            lineHeight: 20,
-            padding:[4,0,4,0]
-          },
-          name: {
-            color: "#ffffff",
-            lineHeight: 20,
-          },
-        },
-      },
-    },
-    tooltip: {
-      trigger: "item",
-      backgroundColor: "rgba(0,0,0,.6)",
-      borderColor: "rgba(147, 235, 248, .8)",
-      textStyle: {
-        color: "#FFF",
-      },
-    },
-    series: [
-      {
-        name: "用户总览",
-        type: "pie",
-        radius: ["40%", "70%"],
-        // avoidLabelOverlap: false,
-        itemStyle: {
-          borderRadius: 6,
-          borderColor: "rgba(255,255,255,0)",
-          borderWidth: 2,
-        },
-        color: colors,
-        label: {
-          show: true,
-          formatter: "   {b|{b}}   \n   {c|{c}个}   {per|{d}%}  ",
-          //   position: "outside",
-          rich: {
-            b: {
-              color: "#fff",
-              fontSize: 12,
-              lineHeight: 26,
-            },
-            c: {
-              color: "#31ABE3",
-              fontSize: 14,
-            },
-            per: {
-              color: "#31ABE3",
-              fontSize: 14,
-            },
-          },
-        },
-        emphasis: {
-          show: false,
-        },
-        legend: {
-          show: false,
-        },
-        tooltip: { show: true },
-
-        labelLine: {
-          show: true,
-          length: 20, // 第一段线 长度
-          length2: 36, // 第二段线 长度
-          smooth: 0.2,
-          lineStyle: {},
-        },
-        data: [
-          {
-            value: state.onlineNum,
-            name: "在线",
-            itemStyle: {
-              color: echartsGraphic(["#0BFC7F", "#A3FDE0"]),
-            },
-          },
-          {
-            value: state.offlineNum,
-            name: "离线",
-            itemStyle: {
-              color: echartsGraphic(["#A0A0A0", "#DBDFDD"]),
-            },
-          },
-          {
-            value: state.lockNum,
-            name: "锁定",
-            itemStyle: {
-              color: echartsGraphic(["#F48C02", "#FDDB7D"]),
-            },
-          },
-          {
-            value: state.alarmNum,
-            name: "异常",
-            itemStyle: {
-              color: echartsGraphic(["#F4023C", "#FB6CB7"]),
-            },
-          },
-        ],
-      },
-    ],
-  };
-};
 </script>
 
 <template>
-  <v-chart class="chart" :option="option" />
+  <div class="left-center">
+    <div class="items">
+      <div class="title-bg">
+        <img class="line" src="@/assets/img/zheke/title_line1.png">
+        <img class="icons" src="@/assets/img/zheke/left_center1.png">
+      </div>
+      <div class="content">
+        <div class="content-left">
+          <div class="content-title title-top">统招本科</div>
+          <p class="item-title">统招本科总人数</p>
+          <p class="item-content">12,000</p>
+        </div>
+        <div class="content-right">
+          <div class="right-title title-top item-title">报到率
+            <span class="title-num numBlue">84.5%</span>
+          </div>
+          <p class="item-title">今日报到人数</p>
+          <p class="item-content numBlue">3,000</p>
+        </div>
+      </div>
+    </div>
+    <div class="items">
+      <div class="title-bg">
+        <img class="line" src="@/assets/img/zheke/title_line2.png">
+        <img class="icons" src="@/assets/img/zheke/left_center2.png">
+      </div>
+      <div class="content">
+        <div class="content-left">
+          <div class="content-title title-top tGreen">统招专科</div>
+          <p class="item-title">统招专科总人数</p>
+          <p class="item-content">12,000</p>
+        </div>
+        <div class="content-right">
+          <div class="right-title title-top item-title">报到率
+            <span class="title-num numGreen">84.5%</span>
+          </div>
+          <p class="item-title">今日报到人数</p>
+          <p class="item-content numGreen">3,000</p>
+        </div>
+      </div>
+    </div>
+    <div class="items">
+      <div class="title-bg">
+        <img class="line" src="@/assets/img/zheke/title_line3.png">
+        <img class="icons" src="@/assets/img/zheke/left_center3.png">
+      </div>
+      <div class="content">
+        <div class="content-left">
+          <div class="content-title title-top tGray">统招专升本</div>
+          <p class="item-title">统招专升本总人数</p>
+          <p class="item-content">12,000</p>
+        </div>
+        <div class="content-right">
+          <div class="right-title title-top item-title">报到率
+            <span class="title-num numGrey">84.5%</span>
+          </div>
+          <p class="item-title">今日报到人数</p>
+          <p class="item-content numGrey">3,000</p>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.items {
+  position: relative;
+  display: flex;
+  margin-bottom: 20px;
+
+  .line {
+    position: absolute;
+    top: 0;
+    left: 80px;
+  }
+
+  .content {
+    padding: 10px 0 0 15px;
+    display: flex;
+
+    .content-left {
+      width: 140px;
+      margin-right: 20px;
+    }
+
+    .content-title {
+      font-weight: bold;
+      font-size: 18px;
+      color: #AFCAE1;
+      font-style: italic;
+    }
+
+    .title-top {
+      height: 40px;
+
+      .title-num {
+        font-family: YouSheBiaoTiHei;
+        font-weight: 400;
+        font-size: 24px;
+      }
+    }
+
+    .item-title {
+      font-weight: 400;
+      font-size: 14px;
+      color: #BCD3DF;
+      line-height: 25px;
+      font-style: italic;
+      opacity: 0.89;
+    }
+
+    .item-content {
+      font-family: YouSheBiaoTiHei;
+      font-weight: 400;
+      font-size: 24px;
+      color: #F1F6FB;
+    }
+
+    .numBlue {
+      color: #69cbff;
+    }
+    .numGreen{
+      color: #73eba8;
+    }
+    .numGrey{
+      color: #84baef;
+    }
+    .tGreen{
+     color: #a9d9c7;
+    }
+    .tGray{
+      color: #9499b9;
+    }
+  }
+}
+</style>

src/views/index/left-top.vue

@@ -5,9 +5,115 @@
 </script>
 
 <template>
-
+    <div class="left-top">
+        <div class="top-item-img">
+            <div class="top-item-icon">
+                <img src="@/assets/img/zheke/left_top1.png">
+            </div>
+            <div class="top-item">
+                <div class="top-item-title">已报到人数</div>
+                <div class="top-item-content">{{ 11024 }}</div>
+            </div>
+        </div>
+        <div class="top-item-img">
+            <div class="top-item-icon">
+                <img src="@/assets/img/zheke/left_top2.png">
+            </div>
+            <div class="top-item">
+                <div class="top-item-title title-red">未报到人数</div>
+                <div class="top-item-content content-red"> {{ 11024 }} </div>
+            </div>
+        </div>
+    </div>
+    <div class="left-bottom">
+        <div class="bottom-item">
+            <div class="bottom-item-title">预报到总人数</div>
+            <div class="bottom-item-content"> {{ 11024 }} </div>
+        </div>
+        <div class="bottom-item">
+            <div class="bottom-item-title">录取总人数</div>
+            <div class="bottom-item-content"> {{ 11024 }} </div>
+        </div>
+        <div class="bottom-item">
+            <div class="bottom-item-title">迎新总进度</div>
+            <div class="bottom-item-content"> 95% </div>
+        </div>
+    </div>
 </template>
 
 <style scoped lang="scss">
+.left-top {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
 
+    .top-item-img {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .top-item {
+        display: flex;
+        flex-direction: column;
+        padding-top: 10px;
+
+        .top-item-title {
+            font-family: YouSheBiaoTiHei;
+            font-weight: 400;
+            font-size: 24px;
+            color: #FFFFFF;
+            line-height: 28px;
+            text-shadow: 1px 2px 0px rgba(25, 27, 28, 0.22);
+            // background: #3652AB;
+            background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(76, 127, 220, 0.1) 50%), linear-gradient(90deg, rgba(126, 219, 254, 0.14) 0%, rgba(126, 219, 254, 0.9) 10%, rgba(0, 0, 0, 0.14) 100%);
+
+        }
+
+        .top-item-content {
+            font-family: YouSheBiaoTiHei;
+            font-weight: 400;
+            font-size: 36px;
+            color: #FFFFFF;
+            background: linear-gradient(80deg, rgba(112, 162, 253, 0.64) 0%, rgba(182, 198, 229, 0.64) 50%, rgba(255, 255, 255, 0.94) 100%, );
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .title-red {
+            background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(76, 127, 220, 0.1) 50%), linear-gradient(90deg, rgba(228, 140, 140, 0.14) 0%, rgba(247, 118, 93, 0.9) 10%, rgba(0, 0, 0, 0.14) 100%);
+
+        }
+
+        .content-red {
+            background: linear-gradient(80deg, rgba(255, 131, 106, 0.8) 0%, rgba(230, 152, 152, 0.64) 50%, rgba(255, 255, 255, 0.94) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+    }
+
+
+}
+
+.left-bottom {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 30px;
+    padding: 0 20px;
+
+    .bottom-item {
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        font-size: 20px;
+        color: #fbeedb;
+        text-shadow: 0px 2px 6px rgba(27, 24, 19, 0.31);
+        font-style: italic;
+        // background: linear-gradient(0deg, rgba(152,115,58,1) 0%, rgba(205,169,114,1) 41.89453125%, rgba(232,215,190,1) 84.1796875%, rgba(255,236,221,0.27) 100%);
+        // -webkit-background-clip: text;
+        // -webkit-text-fill-color: transparent;
+        .bottom-item-content{
+            margin-top: 10px;
+            font-size: 26px;
+        }
+    }
+}
 </style>

src/views/index/right-bottom-two.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { color } from "echarts";
+import { ElMessage } from "element-plus";
+
+const option = ref({});
+const getData = () => {
+  let dateList = ['飞行棋制造工程', '航空服务艺术与管理', '空中乘务', '飞行技术', '航空航天工程', "飞行器数字化制造技术"]
+  let numList = [1, 5, 2, 4, 9, 6]
+  setOption(dateList, numList)
+};
+const setOption = async (xData: any[], yData: any[]) => {
+  option.value = {
+    xAxis: {
+      type: "category",
+      data: xData,
+      boundaryGap: true, // 是否留白，从原点开始
+      axisLabel: {
+        color: "#fff",
+        fontWeight: "500",
+      },
+    },
+    yAxis: {
+      show: false,
+    },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "rgba(0,0,0,.6)",
+      borderColor: "rgba(147, 235, 248, .8)",
+      textStyle: {
+        color: "#FFF",
+      },
+    },
+    grid: {
+      //布局
+      show: false,
+      left: "10px",
+      right: "30px",
+      bottom: "0px",
+      top: "20px",
+      containLabel: true,
+      // borderColor: "#1F63A3",
+    },
+    series: [
+      {
+        data: yData,
+        type: "bar",
+        smooth: false,
+        name: "当日缴费人数",
+        color: "#2265ff",
+        label: {
+          show: true, // 开启显示  
+          position: 'top', // 在上方显示  
+          color: '#999',
+          fontSize: 12,
+
+        }
+      }
+    ],
+  };
+};
+
+onMounted(() => {
+  getData();
+});
+</script>
+
+<template>
+  <v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
+</template>
+
+<style scoped lang="scss"></style>

src/views/index/right-bottom.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { rightBottom } from "@/api";
 import SeamlessScroll from "@/components/seamless-scroll";
-import { computed, onMounted, reactive } from "vue";
 import { useSettingStore } from "@/stores";
 import { storeToRefs } from "pinia";
 import EmptyCom from "@/components/empty-com";
@@ -13,30 +12,731 @@ const state = reactive<any>({
   list: [],
   defaultOption: {
     ...defaultOption.value,
-    singleHeight: 252,
+    singleHeight: 205, //单步运动停止的高度，与滚动盒子的高度进行适配
     limitScrollNum: 3,
-    // step:3
+    // singleWaitTime:3000, // 停顿间隔
+    step:1 //滚动速度，数字越大，滚动越快
   },
   scroll: true,
 });
 
 const getData = () => {
-  return
+  state.list = [
-  rightBottom({ limitNum: 20 })
+    {
-    .then((res) => {
+      "provinceName": "北京",
-      console.log("右下", res);
+      "progress": 0,
-      if (res.success) {
+      "degreesDto": [
-        state.list = res.data.list;
+        {
-      } else {
+          "degreesName": "统招专科",
-        ElMessage({
+          "paymentCompleted": 0,
-          message: res.msg,
+          "nonPayment": 0
-          type: "warning",
+        },
-        });
+        {
-      }
+          "degreesName": "统招专升本",
-    })
+          "paymentCompleted": 0,
-    .catch((err) => {
+          "nonPayment": 0
-      ElMessage.error(err);
+        },
-    });
+        {
+          "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(() => {
@@ -46,75 +746,34 @@ const comName = computed(() => {
     return EmptyCom;
   }
 });
-function montionFilter(val: any) {
+
-  // console.log(val);
-  return val ? Number(val).toFixed(2) : "--";
-}
-const handleAddress = (item: any) => {
-  return `${item.provinceName}/${item.cityName}/${item.countyName}`;
-};
 onMounted(() => {
   getData();
 });
 </script>
 
 <template>
-  <div class="right_bottom_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !indexConfig.rightBottomSwiper }">
-    <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"
-    >
-      <ul class="right_bottom">
-        <li class="right_center_item" v-for="(item, i) in state.list" :key="i">
-          <span class="orderNum">{{ i + 1 }}</span>
-          <div class="inner_right">
-            <div class="dibu"></div>
-            <div class="flex">
-              <div class="info">
-                <span class="labels">设备ID：</span>
-                <span class="text-content zhuyao"> {{ item.gatewayno }}</span>
-              </div>
-              <div class="info">
-                <span class="labels">型号：</span>
-                <span class="text-content"> {{ item.terminalno }}</span>
-              </div>
-              <div class="info">
-                <span class="labels">告警值：</span>
-                <span class="text-content warning"> {{ montionFilter(item.alertvalue) }}</span>
-              </div>
-            </div>
 
-            <div class="flex">
+  <div class="right_bottom">
-              <div class="info">
+    <div class="table-title">
-                <span class="labels shrink-0"> 地址：</span>
+      <div class="title-item">排名</div>
-                <span class="ciyao truncate" style="font-size: 12px; width: 220px" :title="handleAddress(item)">
+      <div class="title-item">省份/地市 </div>
-                  {{ handleAddress(item) }}</span
+      <div class="title-item">本科</div>
-                >
+      <div class="title-item">专科</div>
-              </div>
+      <div class="title-item">专升本</div>
-              <div class="info time shrink-0">
+    </div>
-                <span class="labels">时间：</span>
+    <div class="right_bottom_wrap" :class="{ 'overflow-y-auto': !indexConfig.rightBottomSwiper }">
-                <span class="text-content" style="font-size: 12px"> {{ item.createtime }}</span>
+      <component :is="comName" :list="state.list" v-model="state.scroll"
-              </div>
+        :singleHeight="state.defaultOption.singleHeight" :step="state.defaultOption.step"
-            </div>
+        :limitScrollNum="state.defaultOption.limitScrollNum" :hover="state.defaultOption.hover"
-            <div class="flex">
+        :singleWaitTime="state.defaultOption.singleWaitTime" :wheel="state.defaultOption.wheel">
-              <div class="info">
+        <div class="table-row" v-for="(item, i) in state.list">
-                <span class="labels">报警内容：</span>
+          <div class="row-item">{{ i + 1 }}</div>
-                <span class="text-content ciyao" :class="{ warning: item.alertdetail }">
+          <div class="row-item">{{ item.provinceName }}</div>
-                  {{ item.alertdetail || "无" }}</span
+          <div class="row-item" v-for="(peo) in item.degreesDto">{{ peo.paymentCompleted }}</div>
-                >
+        </div>
-              </div>
+      </component>
-            </div>
+    </div>
-          </div>
-        </li>
-      </ul>
-    </component>
   </div>
 </template>
 
@@ -123,69 +782,46 @@ onMounted(() => {
   width: 100%;
   height: 100%;
 
-  .right_center_item {
+  .table-title {
     display: flex;
+    height: 50px;
     align-items: center;
-    justify-content: center;
+    color: #545e70;
-    height: auto;
+    border-radius: 10px 10px 0px 0px;
-    padding: 10px;
+    border: 1px solid #33343F;
-    font-size: 14px;
-    color: #fff;
 
-    .orderNum {
+    .title-item {
-      margin: 0 20px 0 -20px;
+      width: 100px;
-    }
+      text-align: center;
 
-    .inner_right {
-      position: relative;
-      height: 100%;
-      width: 400px;
-      flex-shrink: 0;
-      line-height: 1.5;
-
-      .dibu {
-        position: absolute;
-        height: 2px;
-        width: 104%;
-        background-image: url("@/assets/img/zuo_xuxian.png");
-        bottom: -12px;
-        left: -2%;
-        background-size: cover;
-      }
-    }
-
-    .info {
-      margin-right: 10px;
-      display: flex;
-      align-items: center;
-
-      .labels {
-        flex-shrink: 0;
-        font-size: 12px;
-        color: rgba(255, 255, 255, 0.6);
-      }
-
-      .zhuyao {
-        color: $primary-color;
-        font-size: 15px;
-      }
-
-      .ciyao {
-        color: rgba(255, 255, 255, 0.8);
-      }
-
-      .warning {
-        color: #e6a23c;
-        font-size: 15px;
-      }
     }
   }
 }
 
 .right_bottom_wrap {
   overflow: hidden;
-  width: 100%;
+  height: 210px;
-  height: 252px;
+
+  .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 {

src/views/index/right-center.vue

@@ -1,44 +1,151 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
-import CapsuleChart from "@/components/datav/capsule-chart";
-import { ranking } from "@/api";
 import { ElMessage } from "element-plus";
 
-const config = ref({
+const option = ref({});
-  showValue: true,
-  unit: "次",
-});
-const data = ref([]);
 const getData = () => {
-  return
+  let dateList = ['2021-11', '2021-12', '2022-01', '2022-02', '2022-03', "2022-04"]
-  ranking()
+  let numList = [1, 5, 2, 4, 9, 6]
-    .then((res) => {
+  let numList2 = [6, 5, 4, 3, 2, 1]
-      console.log("右中--报警排名", res);
+  setOption(dateList, numList, numList2)
-      if (res.success) {
-        data.value = res.data;
-      } else {
-        ElMessage({
-          message: res.msg,
-          type: "warning",
-        });
-      }
-    })
-    .catch((err) => {
-      ElMessage.error(err);
-    });
 };
-getData();
+const setOption = async (xData: any[], yData: any[], yData2: any[]) => {
+  option.value = {
+    xAxis: {
+      type: "category",
+      data: xData,
+      boundaryGap: false, // 不留白，从原点开始
+      splitLine: {
+        // show: false,
+        // lineStyle: {
+        //   color: "rgba(31,99,163,.2)",
+        // },
+      },
+      axisLine: {
+        show: false, // 去除轴线
+        // lineStyle: {
+        //   color: "rgba(31,99,163,.1)",
+        // },
+      },
+      axisLabel: {
+        color: "#fff",
+        fontWeight: "500",
+      },
+    },
+    yAxis: {
+      type: "value",
+      splitLine: {
+        show: false, // 去除网格线
+        lineStyle: {
+          color: "rgba(31,99,163,.2)",
+        },
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "rgba(31,99,163,.1)",
+        },
+      },
+      axisLabel: {
+        color: "#fff", // 轴标文字颜色
+        fontWeight: "500",
+      },
+    },
+    tooltip: {
+      trigger: "axis",
+      backgroundColor: "rgba(0,0,0,.6)",
+      borderColor: "rgba(147, 235, 248, .8)",
+      textStyle: {
+        color: "#FFF",
+      },
+    },
+    grid: {
+      //布局
+      show: false,
+      left: "10px",
+      right: "30px",
+      bottom: "0px",
+      top: "100px",
+      containLabel: true,
+      // borderColor: "#1F63A3",
+    },
+    series: [
+      {
+        data: yData,
+        type: "line",
+        smooth: false,
+        symbol: "circle", // 拐点样式 -- 这里是个圆
+        symbolSize:7, // 拐点大小
+        name: "当日缴费人数",
+        // color: "rgba(9,202,243,.7)",
+        color:'#fff',
+        markPoint: {
+          data: [
+            {
+              name: "最大值",
+              type: "max",
+              valueDim: "y",
+              symbol: "circle",
+              symbolSize: [60, 26],
+              symbolOffset: [0, -20],
+              itemStyle: {
+                color: "rgba(0,0,0,0)",
+              },
+              label: {
+                color: "#09CAF3",
+                backgroundColor: "rgba(9,202,243,0.1)",
+
+                borderRadius: 6,
+                borderColor: "rgba(9,202,243,.5)",
+                padding: [7, 14],
+                formatter: "报警2：{c}",
+                borderWidth: 0.5,
+              },
+            },
+            {
+              name: "最大值",
+              type: "max",
+              valueDim: "y",
+              symbol: "circle",
+              symbolSize: 6,
+              itemStyle: {
+                color: "#09CAF3",
+                shadowColor: "#09CAF3",
+                shadowBlur: 8,
+              },
+              label: {
+                formatter: "",
+              },
+            },
+          ],
+        },
+        lineStyle: {
+          width: 4, // 线条宽度  
+          color: {
+            type: 'linear', // 线性渐变  
+            x: 0, // 渐变方向为从左到右  
+            y: 0,
+            x2: 0,
+            y2: 1, // 渐变方向也可以设置为从下到上，调整 x2 和 y2 的值  
+            colorStops: [
+              // { offset: 0, color: 'rgba(0, 254, 157, 1)' }, // 0% 处的颜色  
+              { offset: 0, color: 'rgba(2, 221, 241, 1)' }, // 50% 处的颜色  
+              { offset: 1, color: 'rgba(0, 254, 157, 1)' } // 100% 处的颜色  -- 顶点处颜色
+            ],
+            global: false // 缺省为 false  
+          },
+        },
+      }
+    ],
+  };
+};
+
+onMounted(() => {
+  getData();
+});
 </script>
 
 <template>
-  <div class="right_bottom">
+  <v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
-    <CapsuleChart :config="config" style="width: 100%; height: 260px" :data="data" />
-  </div>
 </template>
 
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-.right_bottom {
-  box-sizing: border-box;
-  padding: 0 16px;
-}
-</style>

src/views/index/right-top-two.vue

@@ -0,0 +1,260 @@
+<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: 535, //单步运动停止的高度，与滚动盒子的高度进行适配
+    limitScrollNum: 3,
+    // singleWaitTime:3000, // 停顿间隔
+    step: 1 //滚动速度，数字越大，滚动越快
+  },
+  scroll: true,
+});
+
+const getData = () => {
+  state.list = [
+    {
+      "collegeName": "机电工程学院",
+      "collegeId": "08db7155-bdf1-4633-884e-95735ef931f2",
+      "isTeacher": false,
+      "reportNumber": 0,
+      "totalNumber": 0
+    },
+    {
+      "collegeName": "美术与设计学院",
+      "collegeId": "08db81af-0a80-4dd8-8bd6-06e7020530b9",
+      "isTeacher": false,
+      "reportNumber": 0,
+      "totalNumber": 0
+    },
+    {
+      "collegeName": "人文教育学院",
+      "collegeId": "08db81af-168b-402d-87d1-bdd7ee3c4c47",
+      "isTeacher": false,
+      "reportNumber": 0,
+      "totalNumber": 0
+    },
+    {
+      "collegeName": "体育学院",
+      "collegeId": "08db81af-2af2-491e-8a45-a15a4fd43431",
+      "isTeacher": false,
+      "reportNumber": 0,
+      "totalNumber": 0
+    },
+    {
+      "collegeName": "医学院",
+      "collegeId": "08db81af-5df9-4b57-834e-3ee6bbf307d4",
+      "isTeacher": false,
+      "reportNumber": 0,
+      "totalNumber": 0
+    },
+    {
+      "collegeName": "音乐学院",
+      "collegeId": "08db81af-73b7-40e0-8103-2c38a19d03cc",
+      "isTeacher": false,
+      "reportNumber": 0,
+      "totalNumber": 0
+    },
+    {
+      "collegeName": "冰冰艺术学院",
+      "collegeId": "08dc6f26-c565-49d7-8dc8-2bc8926d8516",
+      "isTeacher": false,
+      "reportNumber": 0,
+      "totalNumber": 0
+    },
+    {
+      "collegeName": "社会科学研究院",
+      "collegeId": "08dc70b7-825a-4298-83cc-e3eaf08abf52",
+      "isTeacher": false,
+      "reportNumber": 0,
+      "totalNumber": 3
+    },
+    {
+      "collegeName": "绿色生态学院",
+      "collegeId": "08dc70b7-a640-49af-8ab7-9f520aac02d9",
+      "isTeacher": false,
+      "reportNumber": 0,
+      "totalNumber": 2
+    },
+    {
+      "collegeName": "建筑工程学院",
+      "collegeId": "08db81ae-fc5f-424e-868b-503bd234e8f2",
+      "isTeacher": false,
+      "reportNumber": 0,
+      "totalNumber": 0
+    },
+    {
+      "collegeName": "计算机信息工程学院",
+      "collegeId": "08db81ae-e39d-4155-8d7a-c118d629e422",
+      "isTeacher": false,
+      "reportNumber": 0,
+      "totalNumber": 0
+    },
+    {
+      "collegeName": "航天航空学院",
+      "collegeId": "08db7156-2004-4be4-8dfe-1ac36ebdb422",
+      "isTeacher": false,
+      "reportNumber": 0,
+      "totalNumber": 0
+    },
+    {
+      "collegeName": "外国语学院",
+      "collegeId": "08db716b-7370-4ef3-812e-7edd113ff017",
+      "isTeacher": false,
+      "reportNumber": 0,
+      "totalNumber": 0
+    },
+    {
+      "collegeName": "电子与信息学院",
+      "collegeId": "08db721b-e050-4480-8087-60a179e75d16",
+      "isTeacher": false,
+      "reportNumber": 0,
+      "totalNumber": 0
+    },
+    {
+      "collegeName": "工商管理学院",
+      "collegeId": "08db751e-3c7a-406a-814e-f81580e3e1c3",
+      "isTeacher": false,
+      "reportNumber": 0,
+      "totalNumber": 0
+    },
+    {
+      "collegeName": "财经学院",
+      "collegeId": "08db7882-089f-4105-8d01-920fa1e7327a",
+      "isTeacher": false,
+      "reportNumber": 0,
+      "totalNumber": 0
+    },
+    {
+      "collegeName": "传媒学院",
+      "collegeId": "08db81ae-3f52-4765-8c8b-459f4b947a2c",
+      "isTeacher": false,
+      "reportNumber": 0,
+      "totalNumber": 0
+    },
+    {
+      "collegeName": "法学院",
+      "collegeId": "08db81ae-721b-4e41-8fd7-4ecdb0b00508",
+      "isTeacher": false,
+      "reportNumber": 0,
+      "totalNumber": 2
+    },
+    {
+      "collegeName": "国际交流学院",
+      "collegeId": "08db81ae-9d43-4ae0-8d0f-541ba77af10d",
+      "isTeacher": false,
+      "reportNumber": 0,
+      "totalNumber": 0
+    },
+    {
+      "collegeName": "xie学院",
+      "collegeId": "08dc79fe-336b-49db-8c74-7e1a3184f2d7",
+      "isTeacher": false,
+      "reportNumber": 0,
+      "totalNumber": 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': !indexConfig.rightBottomSwiper }">
+      <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.collegeName }}</div>
+          <div class="row-item">{{ item.reportNumber }}</div>
+          <div class="row-item">{{ item.totalNumber }}</div>
+          <div class="row-item">{{ '0%' }}</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: 530px;
+
+  .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;
+}
+</style>

src/views/index/right-top.vue

@@ -1,233 +1,88 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { alarmNum } from "@/api";
-import { graphic } from "echarts/core";
-import { ElMessage } from "element-plus";
 
-const option = ref({});
-const getData = () => {
-  return
-  alarmNum()
-    .then((res) => {
-      console.log("右上--报警次数 ", res);
-      if (res.success) {
-        setOption(res.data.dateList, res.data.numList, res.data.numList2);
-      } else {
-        ElMessage({
-          message: res.msg,
-          type: "warning",
-        });
-      }
-    })
-    .catch((err) => {
-      ElMessage.error(err);
-    });
-};
-const setOption = async (xData: any[], yData: any[], yData2: any[]) => {
-  option.value = {
-    xAxis: {
-      type: "category",
-      data: xData,
-      boundaryGap: false, // 不留白，从原点开始
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: "rgba(31,99,163,.2)",
-        },
-      },
-      axisLine: {
-        // show:false,
-        lineStyle: {
-          color: "rgba(31,99,163,.1)",
-        },
-      },
-      axisLabel: {
-        color: "#7EB7FD",
-        fontWeight: "500",
-      },
-    },
-    yAxis: {
-      type: "value",
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: "rgba(31,99,163,.2)",
-        },
-      },
-      axisLine: {
-        lineStyle: {
-          color: "rgba(31,99,163,.1)",
-        },
-      },
-      axisLabel: {
-        color: "#7EB7FD",
-        fontWeight: "500",
-      },
-    },
-    tooltip: {
-      trigger: "axis",
-      backgroundColor: "rgba(0,0,0,.6)",
-      borderColor: "rgba(147, 235, 248, .8)",
-      textStyle: {
-        color: "#FFF",
-      },
-    },
-    grid: {
-      //布局
-      show: true,
-      left: "10px",
-      right: "30px",
-      bottom: "10px",
-      top: "32px",
-      containLabel: true,
-      borderColor: "#1F63A3",
-    },
-    series: [
-      {
-        data: yData,
-        type: "line",
-        smooth: true,
-        symbol: "none", //去除点
-        name: "报警1次数",
-        color: "rgba(252,144,16,.7)",
-        areaStyle: {
-          //右，下，左，上
-          color: new graphic.LinearGradient(
-            0,
-            0,
-            0,
-            1,
-            [
-              {
-                offset: 0,
-                color: "rgba(252,144,16,.7)",
-              },
-              {
-                offset: 1,
-                color: "rgba(252,144,16,.0)",
-              },
-            ],
-            false
-          ),
-        },
-        markPoint: {
-          data: [
-            {
-              name: "最大值",
-              type: "max",
-              valueDim: "y",
-              symbol: "rect",
-              symbolSize: [60, 26],
-              symbolOffset: [0, -20],
-              itemStyle: {
-                color: "rgba(0,0,0,0)",
-              },
-              label: {
-                color: "#FC9010",
-                backgroundColor: "rgba(252,144,16,0.1)",
-                borderRadius: 6,
-                padding: [7, 14],
-                borderWidth: 0.5,
-                borderColor: "rgba(252,144,16,.5)",
-                formatter: "报警1：{c}",
-              },
-            },
-            {
-              name: "最大值",
-              type: "max",
-              valueDim: "y",
-              symbol: "circle",
-              symbolSize: 6,
-              itemStyle: {
-                color: "#FC9010",
-                shadowColor: "#FC9010",
-                shadowBlur: 8,
-              },
-              label: {
-                formatter: "",
-              },
-            },
-          ],
-        },
-      },
-      {
-        data: yData2,
-        type: "line",
-        smooth: true,
-        symbol: "none", //去除点
-        name: "报警2次数",
-        color: "rgba(9,202,243,.7)",
-        areaStyle: {
-          //右，下，左，上
-          color: new graphic.LinearGradient(
-            0,
-            0,
-            0,
-            1,
-            [
-              {
-                offset: 0,
-                color: "rgba(9,202,243,.7)",
-              },
-              {
-                offset: 1,
-                color: "rgba(9,202,243,.0)",
-              },
-            ],
-            false
-          ),
-        },
-        markPoint: {
-          data: [
-            {
-              name: "最大值",
-              type: "max",
-              valueDim: "y",
-              symbol: "rect",
-              symbolSize: [60, 26],
-              symbolOffset: [0, -20],
-              itemStyle: {
-                color: "rgba(0,0,0,0)",
-              },
-              label: {
-                color: "#09CAF3",
-                backgroundColor: "rgba(9,202,243,0.1)",
-
-                borderRadius: 6,
-                borderColor: "rgba(9,202,243,.5)",
-                padding: [7, 14],
-                formatter: "报警2：{c}",
-                borderWidth: 0.5,
-              },
-            },
-            {
-              name: "最大值",
-              type: "max",
-              valueDim: "y",
-              symbol: "circle",
-              symbolSize: 6,
-              itemStyle: {
-                color: "#09CAF3",
-                shadowColor: "#09CAF3",
-                shadowBlur: 8,
-              },
-              label: {
-                formatter: "",
-              },
-            },
-          ],
-        },
-      },
-    ],
-  };
-};
-onMounted(() => {
-  getData();
-});
 </script>
 
 <template>
-  <v-chart class="chart" :option="option" v-if="JSON.stringify(option) != '{}'" />
+  <div class="right-top">
+    <div class="items">
+      <div class="item-title">已缴费人数</div>
+      <div class="item-content">12,120</div>
+    </div>
+    <div class="items item-two">
+      <div class="item-title">已报到未缴费人数</div>
+      <div class="item-content">4,049</div>
+    </div>
+    <div class="items item-three">
+      <div class="item-title">生活用品缴费人数</div>
+      <div class="item-content">4,049</div>
+    </div>
+  </div>
+
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.right-top {
+  display: flex;
+
+  .items {
+    width: 150px;
+    height: 140px;
+    background: url("@/assets/img/zheke/right_top1.png");
+    background-size: cover;
+    background-position: center center;
+    text-align: center;
+    padding-top: 20px;
+    transform: scale(0.9);
+
+    .item-title {
+      font-weight: bold;
+      font-size: 18px;
+      color: #79BFED;
+      line-height: 26px;
+    }
+
+    .item-content {
+      font-family: YouSheBiaoTiHei;
+      font-weight: 400;
+      font-size: 30px;
+      color: #F1FBFF;
+      background: linear-gradient(179deg, rgba(126, 216, 254, 1) 0%, rgba(255, 255, 255, 1) 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+  .item-two {
+    background: url("@/assets/img/zheke/right_top2.png");
+    background-size: cover;
+    background-position: center center;
+
+    .item-title {
+      color: #fd89ac;
+    }
+
+    .item-content {
+      color: #F1FBFF;
+      background: linear-gradient(179deg, rgba(253, 137, 172, 1) 0%, rgba(255, 255, 255, 1) 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+  .item-three {
+    background: url("@/assets/img/zheke/right_top3.png");
+    background-size: cover;
+    background-position: center center;
+
+    .item-title {
+      color: #4bf1d8;
+    }
+    .item-content {
+      color: #F1FBFF;
+      background: linear-gradient(179deg, rgba(75, 241, 216, 1) 0%, rgba(255, 255, 255, 1) 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+}
+</style>