• 疫情统计页面 H5 vue3+TypeScript+Echarts

    目录🧰🧰

    功能介绍🎨🎨

    部分效果展示🌌🌌

    全部功能展示效果🗺️🗺️

    代码演示🌃🌃

    🥰🥰demo目录结构

    🍭🍭 DownRefresh.vue 下拉刷新 组件

    🪜🪜EpidemicList.vue 数据列表 组件

    🏹🏹UpRefreshAndToTop 上拉刷新 一键回到顶部 组件

    🗿🗿type index.ts 数据声明

    📕📕pageTS index.ts 数据处理

    🌃🌃App.vue 疫情页面

    📺📺vite.config.ts 代理开通 

    功能介绍🎨🎨

    下拉刷新🪄  一键回到顶部🚀 echarts中国地图运用🗺️ 数据列表展示🧰 代理🧆

    部分效果展示🌌🌌

    全部功能展示效果🗺️🗺️

    因为功能有点多 所以专门录制了一期视频介绍功能

    具体的全部素材 源码也放在评论区 大家可以去看看😁

    视频链接地址

    代码演示🌃🌃

    🥰🥰demo目录结构

    🍭🍭 DownRefresh.vue 下拉刷新 组件

    2. <template>
    3.   <div class="box">
    4.     
    5.     <div
    6.       @scroll="scrollEvent"
    7.       class="scroll-box"
    8.     >
    9.       
    10.       <slot>slot>
    11.       <div class="end-text" v-if="!isScroll">{{ endText }}div>
    12.     div>
    13.   div>
    14. template>
    15.  
    16. <script setup lang="ts">
    17. import { reactive, toRefs } from "@vue/reactivity";
    18. const props = defineProps({
    19.   //下拉高度
    20.   distance: Number ,
    21.   //判定是否下拉
    22.   isScroll: Boolean,
    23.   endText: {
    24.     type: String,
    25.     default: "没有更多了",
    26.   },
    27. });
    28. //子传父参数
    29. const $emits = defineEmits(["getList"]);
    30.  
    31. const data = reactive({
    32.   //离屏幕高度
    33.   scrollTop: 0,
    34. });
    35.  
    36. let {
    37.   scrollTop,
    38. } = toRefs(data);
    39.  
    40.  
    41. //下拉刷新 判定
    42. const scrollEvent = (e: any) => {
    43.   scrollTop = e.srcElement.scrollTop;
    44.   if (!props.isScroll) return;
    45.   if (
    46.     //判定下拉高度
    47.     scrollTop + e.srcElement.offsetHeight >
    48.     e.srcElement.scrollHeight - props.distance!
    49.   ) {
    50.     $emits("getList");
    51.   }
    52. };
    53. script>
    54.  
    55. <style lang="scss" scoped>
    56. .box {
    57.   overflow: hidden;
    58.   position: relative;
    59.   width: 100%;
    60.   height: 90vh;
    61. }
    62. .scroll-box {
    63.   height: 90vh;
    64.   width: 100%;
    65.   overflow: auto;
    66.   transition: all 0s ease 0s;
    67.   position: absolute;
    68.   right: 0;
    69.   .end-text {
    70.     text-align: center;
    71.     height: 50px;
    72.     line-height: 50px;
    73.     color: #999;
    74.   }
    75. }
    76. style>

    🪜🪜EpidemicList.vue 数据列表 组件

    2. <template>
    3.   <div class="list-box">
    4.     <div class="info-title info">
    5.       <p>地区p>
    6.       <p>现有确诊p>
    7.       <p>确诊p>
    8.       <p>死亡p>
    9.       <p>治愈p>
    10.     div>
    11.     <div class="list" v-for="item in epideList" :key="item.id">
    12.       <div class="p-box">
    13.         <div @click="getChowChildren(item.id)" class="info">
    14.           <p>{{ item.name }}p>
    15.           
    16.           <p>
    17.             {{
    18.               item.total.confirm - item.total.dead - item.total.heal >= 0
    19.                 ? item.total.confirm - item.total.dead - item.total.heal
    20.                 : 0
    21.             }}
    22.           p>
    23.           <p>
    24.             <span>{{ item.total.confirm }}span>
    25.             <span>较昨日+{{ item.today.confirm ? item.today.confirm : 0 }}span>
    26.           p>
    27.           <p>{{ item.total.dead }}p>
    28.           <p>{{ item.total.heal }}p>
    29.         div>
    30.         <div v-if="showChildren">
    31.           <div>
    32.             <div v-show="data.showChildrenId == item.id" class="children-box">
    33.               <EpidemicList :epideList="item.children" />
    34.             div>
    35.           div>
    36.         div>
    37.       div>
    38.     div>
    39.   div>
    40. template>
    42. <script name="EpidemicList" setup lang="ts">
    43. // 声明props
    44. import {  reactive } from "vue";
    45. import { IEpidData } from "../type";
    46. //无需引入
    47. const props = defineProps({
    48.   //疫情数据
    49.   epideList:Array<IEpidData>,
    50.   //是否展示子数组 省=>市 区数据
    51.   showChildren: Boolean,
    52. });
    53. //点击展示
    54. const data = reactive({
    55.   showChildrenId: "",
    56. });
    57. //判定 子列表点击是否展示 各个省下面具体的地区
    58. const getChowChildren = (id: string) => {
    59.   //原理:通过id来确定要展示的list 点击第二次则置空 不展示效果
    60.   data.showChildrenId == id ? (data.showChildrenId = ""): (data.showChildrenId = id);
    61. };
    62. //确诊案例 存在
    63. script>
    64.  
    65. <style lang="scss" scoped>
    66. .list-box {
    67.   border: 1px solid #d1d1d1;
    68.   margin: 1rem 0;
    69.   .p-box {
    70.     .children-box {
    71.       margin-left: 1rem;
    72.       .list-box {
    73.         border: none;
    74.       }
    75.       .info-title {
    76.         height: 30px;
    77.         line-height: 30px;
    78.       }
    79.       p {
    80.         &:nth-child(1) {
    81.           font-weight: 600;
    82.           color: #999;
    83.         }
    84.       }
    85.     }
    86.   }
    87. }
    88. .info-title {
    89.   font-weight: 600;
    90.   color: #000;
    91.   font-size: 16px;
    92.   height: 50px;
    93.   line-height: 50px;
    94.   background: #d1d1d1;
    95. }
    96.  
    97. .info {
    98.   display: flex;
    99.   justify-content: space-between;
    100.   align-items: center;
    101.   > p {
    102.     width: 15%;
    103.     text-align: center;
    104.     // white-space: nowrap;
    105.     &:nth-child(1) {
    106.       font-weight: 600;
    107.       color: #000;
    108.     }
    109.     &:nth-child(2) {
    110.       width: 23%;
    111.       color: red;
    112.     }
    113.     &:nth-child(3) {
    114.       width: 23%;
    115.       white-space: nowrap;
    116.       span {
    117.         display: block;
    118.         &:last-child {
    119.           color: #999;
    120.         }
    121.       }
    122.     }
    123.   }
    124. }
    125. .list {
    126.   &:nth-of-type(odd) {
    127.     background: #f6f6f6;
    128.   }
    129.   .info {
    130.     height: 80px;
    131.     line-height: 80px;
    132.     p {
    133.       line-height: 20px;
    134.     }
    135.   }
    136. }
    137. style>

    🏹🏹UpRefreshAndToTop 上拉刷新 一键回到顶部 组件

    2. <template>
    3.   <div class="box">
    4.     
    5.     <div
    6.       @touchend="touchend"
    7.       @touchmove="touchmove"
    8.       @touchstart="touchstart"
    9.       @scroll="scrollEvent"
    10.       :style="{ top: `${translateY}px` }"
    11.       class="scroll-box"
    12.     >
    13.       <div class="loadingBox" v-if="touchstartTitleShow">释放可刷新...div>
    14.       <div class="loadingBox" v-if="touchEndTitleShow">加载中...div>
    15.       
    16.       <div id="top">div>
    17.       
    18.       <slot>slot>
    19.       <div v-show="data.isShowTop" class="back-box" @click="toTop">
    20.       <img src="../assets/toTop.png">
    21.       div>
    22.     div>
    23.   div>
    24. template>
    25.  
    26. <script setup lang="ts">
    27. import { reactive, toRefs } from "@vue/reactivity";
    28.  
    29. const $emits = defineEmits(["refreshFun"]);
    30.  
    31. const data = reactive({
    32.   startText: "释放即可刷新",
    33.   scrollTop: 0,
    34.   startY: 0,
    35.   translateY: 0,
    36.   touchEndTitleShow: false, //控制手指离开屏幕的title显示
    37.   touchstartTitleShow: false, //控制手指按下屏幕的title显示
    38.   isShowTop:false
    39. });
    40.  
    41. let {
    42.   touchstartTitleShow,
    43.   touchEndTitleShow,
    44.   translateY,
    45. } = toRefs(data);
    46.  
    47. //手指触碰到屏幕
    48. const touchstart = (e: any) => {
    49.   let y = e.targetTouches[0].pageY;
    50.   data.startY = y;
    51. };
    52. const scrollEvent = (e: any) => {
    53.   data.scrollTop = e.srcElement.scrollTop;
    54.   //判定是否展示回退顶部按钮
    55.   data.scrollTop>400? (data.isShowTop=true) : (data.isShowTop=false); 
    56. }
    57. const toTop=()=>{
    58.      //定位到div->top
    59.      let anchor = document.getElementById("top")!;
    60.       anchor.scrollIntoView();
    61. }
    62. //手指开始滑动
    63. const touchmove = (e: any) => {
    64.   let y = e.targetTouches[0].pageY;
    65.   if (y > data.startY && data.scrollTop == 0) {
    66.     data.touchstartTitleShow = true;
    67.     //如果当前移动距离大于初始点击坐标，则视为是下拉。并且要处于顶部才刷新，不能影响正常的列表滑动。
    68.     data.translateY = (y - data.startY) / 2;
    69.   } else {
    70.     data.touchstartTitleShow = false;
    71.   }
    72. };
    73. //手指松开
    74. const touchend = (e: any) => {
    75.   let y = e.changedTouches[0].pageY;
    76.   if (y > data.startY && data.scrollTop == 0) {
    77.     data.translateY = 0;
    78.     data.touchstartTitleShow = false;
    79.     data.touchEndTitleShow = true;
    80.     $emits("refreshFun", () => {
    81.       data.touchEndTitleShow = false;
    82.     });
    83.     data.startY = 0;
    84.   }
    85. };
    86.  
    87. script>
    88.  
    89. <style lang="scss" scoped>
    90. .box {
    91.   overflow: hidden;
    92.   position: relative;
    93.   width: 100%;
    94.   height: 100vh;
    95.   .loadingBox {
    96.     padding: 20px;
    97.     text-align: center;
    98.   }
    99. }
    100. .scroll-box {
    101.   height: 100vh;
    102.   width: 100%;
    103.   overflow: auto;
    104.   transition: all 0s ease 0s;
    105.   position: absolute;
    106.   right: 0;
    107.    .back-box {
    108.     height: 4rem;
    109.     width: 4rem;
    110.     // 如果对小火箭不满意 可以换成阴影盒子 样式也有
    111.     // background-color: #fff;
    112.     // 圆角弧度 添加圆角边框
    113.     // border-radius: 50%;
    114.     //盒子阴影
    115.     // box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.4);
    116.     // position 属性规定元素的定位类型 fixed元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
    117.     position: fixed;
    118.     bottom: 3rem;
    119.     right: 1rem;
    120.     text-align: center;
    121.     line-height: 4rem;
    122.   }
    123. }
    124. style>

    🗿🗿type index.ts 数据声明

    1. interface IData {
    2.   //全球疫情数据树
    3.   areaTree: IEpidData[];
    4.   chinaDayList: [];
    5.   //全球疫情列表展示
    6.   showList:IEpidData[];
    7.   //全球疫情数组 用来完成分页功能 
    8.   globalEpidemic: Array<IEpidData[]>
    9.   // 疫情 中国总统计
    10.   chinaTotal: IChinaTotal;
    11.   //中国疫情
    12.   china: IEpidData[] | undefined;
    13.   //江西疫情
    14.   jxData: IEpidData | undefined;
    15.   // 进行判定 number 全国 1 江西
    16.   type: number;
    17.   // 判定展示那一个地图 全国现状 全国累计
    18.   mapType: number;
    19.   lineType: number;
    20.   //最新更新时间
    21.   lastUpdateTime: string;
    22.   //下拉刷新判定
    23.   isScroll:Boolean;
    24. }
    25. //疫情数据单位统计
    26. interface IEpidData {
    27.   today: {
    28.     confirm: number;
    29.     suspect: number;
    30.     heal: number;
    31.     dead: number;
    32.     severe: number;
    33.     storeConfirm: number;
    34.   };
    35.   total: {
    36.     confirm: number;
    37.     suspect: number;
    38.     heal: number;
    39.     dead: number;
    40.     severe: number;
    41.     input: number;
    42.   };
    43.   extData: {};
    44.   name: string;
    45.   id: string;
    46.   lastUpdateTime: string;
    47.   children: IEpidData[] | undefined;
    48. }
    49.  
    50. //疫情 中国总统计
    51. interface IChinaTotal {
    52.   total: {
    53.     confirm: number;
    54.     suspect: number;
    55.     heal: number;
    56.     dead: number;
    57.     severe: number;
    58.     input: number;
    59.   };
    60.   today: {
    61.     input: number;
    62.     storeConfirm: number;
    63.     confirm: number;
    64.     dead: number;
    65.     heal: number;
    66.   };
    67.   extData: {
    68.     noSymptom: number;
    69.     incrNoSymptom: number;
    70.   };
    71. }
    72. //中国地图数值定义
    73. interface IMap{
    74.   name: string,
    75.   value:number
    76. }
    77.  
    78. export type { IData, IChinaTotal, IEpidData ,IMap};

    📕📕pageTS index.ts 数据处理

    1. import { IChinaTotal, IData, IEpidData, IMap } from "../type";
    2. import axios from "axios";
    3. import * as echarts from "echarts";
    4. import chinaJson from "../assets/china.json";
    5. //疫情实时数据
    6. class InfoData implements IData {
    7.   areaTree: IEpidData[] = [];
    8.   chinaDayList: [] = [];
    9.   globalEpidemic:Array<IEpidData[]>=[];
    10.   showList: IEpidData[]=[];
    11.   chinaTotal: IChinaTotal = {
    12.     total: {
    13.       confirm: 0,
    14.       suspect: 0,
    15.       heal: 0,
    16.       dead: 0,
    17.       severe: 0,
    18.       input: 0,
    19.     },
    20.     today: {
    21.       input: 0,
    22.       storeConfirm: 0,
    23.       confirm: 0,
    24.       dead: 0,
    25.       heal: 0,
    26.     },
    27.     extData: {
    28.       noSymptom: 0,
    29.       incrNoSymptom: 0,
    30.     },
    31.   };
    32.   china: IEpidData[] | undefined = [];
    33.   jxData: IEpidData | undefined = {
    34.     today: {
    35.       confirm: 0,
    36.       suspect: 0,
    37.       heal: 0,
    38.       dead: 0,
    39.       severe: 0,
    40.       storeConfirm: 0,
    41.     },
    42.     total: {
    43.       confirm: 0,
    44.       suspect: 0,
    45.       heal: 0,
    46.       dead: 0,
    47.       severe: 0,
    48.       input: 0,
    49.     },
    50.     extData: {},
    51.     name: "",
    52.     id: "",
    53.     lastUpdateTime: "",
    54.     children: ([] = []),
    55.   };
    56.   // 进行判定 0 全国 1 江西
    57.   type = 0;
    58.   mapType = 1;
    59.   lineType = 0;
    60.   lastUpdateTime = "";
    61.   isScroll=true;
    62. }
    63. //数据分页处理 数组[][] 20一页
    64. const getPageList = (list: IEpidData[]) => {
    65.   const arr: Array<IEpidData[]> = [];
    66.   for (let index = 0; index < list.length; index += 20) {
    67.       arr.push(list.slice(index, index + 20))
    68.   }
    69.   return arr
    70. }
    71. const initDataFun = async (data: InfoData) => {
    72.   //疫情地图数据 初始化
    73.   //绑定要渲染的地方
    74.   let nowMapDom: HTMLElement | null = document.getElementById("nowMap");
    75.   let totalmapDom: HTMLElement | null = document.getElementById("totalMap");
    76.   //初始化echarts实例
    77.   let nowMap=echarts.getInstanceByDom(nowMapDom as HTMLElement); //有的话就获取已有echarts实例的DOM节点。
    78.   let totalMap=echarts.getInstanceByDom(totalmapDom as HTMLElement);
    79.   if(nowMap ==null || totalMap == null){ // 如果不存在，就进行初始化。
    80.     nowMap = echarts.init(nowMapDom as HTMLElement);
    81.     totalMap = echarts.init(totalmapDom as HTMLElement);
    82.   } 
    83.   //显示加载圈圈
    84.   nowMap.showLoading();
    85.   totalMap.showLoading();
    86.   //定义两个地图 类型
    87.   let nowMapData: IMap[] = [];
    88.   let totalMapData: IMap[] = [];
    89.   //导入自定义地图数据 registerMap 注册的地图名称。
    90.   echarts.registerMap("china", chinaJson as any);
    91.   //定义 图表 类型
    92.   type EChartsOption = echarts.EChartsOption;
    93.   //定义地图配置
    94.   let series = {
    95.     type: "map",
    96.     map: "china",
    97.     colorBy: "series", //按照系列分配调色盘中的颜色，同一系列中的所有数据都是用相同的颜色
    98.     zoom: 1.3, //当前视角的缩放比例
    99.     top: 80, //组件离容器上侧的距离
    100.     label: {
    101.       show: true,
    102.       color: "#333",
    103.       fontSize: 10,
    104.     },
    105.   };
    106.   //点击地图效果 
    107.   let optionMap: EChartsOption = {
    108.     title: {
    109.       //标题内容
    110.       // text: '中国疫情图',
    111.       subtext: "单击省份可查看病例数",
    112.     },
    113.     tooltip: {
    114.       //提示框组件
    115.       trigger: "item", //触发类型 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
    116.       formatter: "现有确诊病例
      {b}: {c} "      , //提示框浮层内容格式器，支持字符串模板和回调函数两种形式
    117.       //  模板变量有 { a }, { b }，{ c }，{ d }，{ e }，分别表示系列名，数据名，数据值等。
    118.       //在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 { a0 }, { a1 }, { a2 } 这种后面加索引的方式表示系列的索引。 不同图表类型下的 { a }，{ b }，{ c }，{ d } 含义不一样。 其中变量{ a }, { b }, { c }, { d } 在不同图表类型下代表数据含义为：
    119.       // 地图: { a }（系列名称），{ b }（区域名称），{ c }（合并数值）, { d }（无）
    120.     },
    121.     visualMap: {
    122.       show: false,
    123.     },
    124.   };
    125.   //获取疫情全部数据接口
    126.   //await是等待的意思，await关键字只能放在async函数里
    127.   //await配合async一起使用，相当于把异步函数变成了同步，await会等待后面表达式的返回结果之后才执行下一步。
    128.   let res=await axios("/prod-api/ug/api/wuhan/app/data/list-total");
    129.     //疫情实时数据处理
    130.     //解构 [[1-30],[31-60],....]
    131.     data.globalEpidemic = getPageList(res.data.data.areaTree);
    132.     data.showList = data.globalEpidemic[0];
    133.     //普通数据赋值
    134.     data.areaTree = res.data.data.areaTree;
    135.     data.chinaDayList = res.data.data.chinaDayList;
    136.     data.chinaTotal = res.data.data.chinaTotal;
    137.     data.lastUpdateTime=res.data.data.lastUpdateTime;
    138.     //获取中国数据
    139.     data.china = data.areaTree.find((v) => v.id === "0")?.children;
    140.     //获取江西疫情数据
    141.     data.jxData = data.china?.find((v) => v.id === "360000");
    142.     //疫情地图数据处理
    143.     data.china?.map((v:IEpidData ) => {
    144.       //对于俩地图赋值
    145.       nowMapData.push({
    146.         name: v.name,
    147.         value: v.total.confirm - v.total.dead - v.total.heal || 0,
    148.       });
    149.       totalMapData.push({
    150.         name: v.name,
    151.         value: v.total.confirm || 0,
    152.       });
    153.     });
    154.     //隐藏加载 圈圈
    155.     nowMap.hideLoading();
    156.     totalMap.hideLoading();
    157.     //数据入地图配置  绘制图表
    158.     nowMap.setOption({
    159.       ...optionMap,
    160.       series: {
    161.         ...series,
    162.         data: nowMapData,
    163.       },
    164.     });
    165.     totalMap.setOption({
    166.       ...optionMap,
    167.       series: {
    168.         ...series,
    169.         data: totalMapData,
    170.       },
    171.     });
    172. };
    173. export { InfoData, initDataFun };

    🌃🌃App.vue 疫情页面

    1. <template>
    2.   <UpRefreshAndToTop @refreshFun="refreshFun">
    3.     <div class="box">
    4.       
    5.       <div class="top-box">
    6.         <img class="bg-img" src="./assets/bt.jpg" />
    7.         <div class="title-text">
    8.           <h1>科学防护 共渡难关h1>
    9.           <h2>肺炎疫情实时动态播报h2>
    10.           <span>更新时间:{{ lastUpdateTime }}span>
    11.         div>
    12.         <div v-if="chinaTotal" class="cover-cards">
    13.           <div class="cover-tab">
    14.             <div @click="changeType(0)" :class="{ active: data.type === 0 }">
    15.               全国疫情数据(含港澳台)
    16.             div>
    17.             <div @click="changeType(1)" :class="{ active: data.type === 1 }">
    18.               江西疫情数据
    19.             div>
    20.           div>
    21.           
    22.           <div class="cover-info" v-show="data.type === 0">
    23.             <div>
    24.               <h4 class="title">境外输入h4>
    25.               <p class="number">{{ chinaTotal.total.input }}p>
    26.               <p class="tip">
    27.                 <span>较昨日span>
    28.                 <span>+{{ chinaTotal.today.input }}span>
    29.               p>
    30.             div>
    31.             <div>
    32.               <h4 class="title">无症状感染者h4>
    33.               <p class="number">{{ chinaTotal.extData.noSymptom }}p>
    34.               <p class="tip">
    35.                 <span>较昨日span>
    36.                 <span>+{{ chinaTotal.extData.incrNoSymptom }}span>
    37.               p>
    38.             div>
    39.             <div>
    40.               <h4 class="title">现有确诊h4>
    41.               <p class="number">
    42.                 {{
    43.                   chinaTotal.total.confirm -
    44.                   chinaTotal.total.dead -
    45.                   chinaTotal.total.heal
    46.                 }}
    47.               p>
    48.               <p class="tip">
    49.                 <span>较昨日span>
    50.                 <span>+{{ chinaTotal.today.storeConfirm }}span>
    51.               p>
    52.             div>
    53.             <div>
    54.               <h4 class="title">累计确诊h4>
    55.               <p class="number">{{ chinaTotal.total.confirm }}p>
    56.               <p class="tip">
    57.                 <span>较昨日span>
    58.                 <span>+{{ chinaTotal.today.confirm }}span>
    59.               p>
    60.             div>
    61.             <div>
    62.               <h4 class="title">累计死亡h4>
    63.               <p class="number">{{ chinaTotal.total.dead }}p>
    64.               <p class="tip">
    65.                 <span>较昨日span>
    66.                 <span>+{{ chinaTotal.today.dead }}span>
    67.               p>
    68.             div>
    69.             <div>
    70.               <h4 class="title">累计治愈h4>
    71.               <p class="number">{{ chinaTotal.total.heal }}p>
    72.               <p class="tip">
    73.                 <span>较昨日span>
    74.                 <span>+{{ chinaTotal.today.heal }}span>
    75.               p>
    76.             div>
    77.           div>
    78.           
    79.           <div v-if="jxData" v-show="data.type === 1" class="cover-info">
    80.             <div>
    81.               <h4 class="title">累计确诊h4>
    82.               <p class="number">{{ jxData.total.confirm }}p>
    83.               <p class="tip">
    84.                 较昨日
    85.                 <span>+{{ jxData.today.confirm }}span>
    86.               p>
    87.             div>
    88.             <div>
    89.               <h4 class="title">累计死亡h4>
    90.               <p class="number">{{ jxData.total.dead }}p>
    91.               <p class="tip">
    92.                 较昨日
    93.                 <span>+{{ jxData.today.dead }}span>
    94.               p>
    95.             div>
    96.             <div>
    97.               <h4 class="title">累计治愈h4>
    98.               <p class="number">{{ jxData.total.heal }}p>
    99.               <p class="tip">
    100.                 较昨日
    101.                 <span>+{{ jxData.today.heal }}span>
    102.               p>
    103.             div>
    104.           div>
    105.         div>
    106.       div>
    107.       
    108.       <div class="data-map content">
    109.         <h3>中国疫情h3>
    110.         <div class="map-box">
    111.           <div
    112.             :class="data.mapType == 1 ? 'to-left' : 'to-right'"
    113.             id="nowMap"
    114.           >div>
    115.           <div
    116.             :class="data.mapType == 1 ? 'to-left' : 'to-right'"
    117.             id="totalMap"
    118.           >div>
    119.         div>
    120.         <div class="map-btn">
    121.           <div @click="mapTypeChange(1)" :class="{ active: data.mapType == 1 }">
    122.             现有确诊
    123.           div>
    124.           <div @click="mapTypeChange(2)" :class="{ active: data.mapType == 2 }">
    125.             累计确诊
    126.           div>
    127.         div>
    128.       div>
    129.       
    130.       <div class="data-list content">
    131.         <h3>中国病例h3>
    132.         <span class="hint">温馨提示:点击可展示具体城市span>
    133.         <EpidemicList :epideList="china" :showChildren="true">EpidemicList>
    134.       div>
    135.       
    136.       <div v-if="data.showList.length" class="data-list content">
    137.         <h3>世界病例h3>
    138.         <DownRefresh
    139.           :distance="100"
    140.           :isScroll="data.isScroll"
    141.           @getList="getList"
    142.         >
    143.           <EpidemicList :showChildren="false" :epideList="data.showList" />
    144.         DownRefresh>
    145.       div>
    146.     div>
    147.   UpRefreshAndToTop>
    148. template>
    149.  
    150. <script setup lang="ts">
    151. import { onMounted, reactive, toRefs } from "vue";
    152. import { InfoData, initDataFun } from "./pageTs/index";
    153. import EpidemicList from "./components/EpidemicList.vue";
    154. import UpRefreshAndToTop from "./components/UpRefreshAndToTop.vue";
    155. import DownRefresh from "./components/DownRefresh.vue";
    156. const data = reactive(new InfoData());
    157. onMounted(() => {
    158.   initDataFun(data);
    159. });
    160. //解构数据
    161. const { chinaTotal, jxData, china, lastUpdateTime } = toRefs(data);
    162.  
    163. //切换 疫情实时数据 全国 江西
    164. const changeType = (toType: number) => {
    165.   data.type = toType;
    166. };
    167. //地图 切换
    168. const mapTypeChange = (type: number) => {
    169.   console.log(type);
    170.   data.mapType = type;
    171. };
    172. //下拉效果 全球疫情列表
    173. let page: number = 0;
    174. const getList = () => {
    175.   if (page === data.globalEpidemic.length - 1) {
    176.     data.isScroll = false;
    177.     return;
    178.   }
    179.   console.log("加载下一页");
    180.  
    181.   // 子组件触发,加载下一页数据
    182.   page++;
    183.   data.showList.push(...data.globalEpidemic[page]);
    184. };
    185. //重新加载数据
    186. const refreshFun = (fun: Function) => {
    187.   initDataFun(data).then(() => {
    188.     //疫情实时数据切换成全国数据
    189.     data.type = 0;
    190.     //重置全球疫情下拉功能
    191.     page = 0;
    192.     data.isScroll = true;
    193.     //控制手指按下屏幕的title显示 去除
    194.     fun();
    195.   });
    196. };
    197. script>
    198.  
    199. <style lang="scss" scoped>
    200. // 滑动动画
    201. @keyframes toRight {
    202.   from {
    203.     left: 0;
    204.   }
    205.  
    206.   to {
    207.     left: calc(0px - 100vw + 1rem);
    208.   }
    209. }
    210.  
    211. @keyframes toLeft {
    212.   from {
    213.     left: calc(0px - 100vw + 1rem);
    214.   }
    215.  
    216.   to {
    217.     left: 0;
    218.   }
    219. }
    220. .bg-img {
    221.   width: 100%;
    222. }
    223. //疫情实时数据样式
    224. .top-box {
    225.   position: relative;
    226.  
    227.   .title-text {
    228.     position: absolute;
    229.     z-index: 2;
    230.     color: #fff;
    231.     top: 20px;
    232.     left: 1rem;
    233.     span {
    234.       color: #000;
    235.     }
    236.   }
    237.  
    238.   .cover-cards {
    239.     position: absolute;
    240.     top: 12rem;
    241.     background: #fff;
    242.     border-radius: 20px;
    243.     width: calc(100% - 2rem);
    244.     left: 1rem;
    245.     overflow: hidden;
    246.     box-shadow: 0 2px 20px rgb(0 0 0 / 10%);
    247.  
    248.     > div {
    249.       display: flex;
    250.       justify-content: space-between;
    251.       align-items: center;
    252.       flex-wrap: wrap;
    253.  
    254.       &.cover-tab {
    255.         > div {
    256.           width: 50%;
    257.           background: #efefef;
    258.           text-align: center;
    259.           height: 40px;
    260.           line-height: 40px;
    261.  
    262.           &.active {
    263.             background: #fff;
    264.           }
    265.         }
    266.       }
    267.  
    268.       &.cover-info {
    269.         > div {
    270.           width: 33%;
    271.           text-align: center;
    272.           margin: 10px 0;
    273.  
    274.           &:nth-child(2) {
    275.             .number,
    276.             span {
    277.               color: #ffa352;
    278.             }
    279.           }
    280.  
    281.           &:nth-child(3) {
    282.             .number,
    283.             span {
    284.               color: #791618;
    285.             }
    286.           }
    287.  
    288.           &:nth-child(4) {
    289.             .number,
    290.             span {
    291.               color: #e44a3d;
    292.             }
    293.           }
    294.  
    295.           &:nth-child(5) {
    296.             .number,
    297.             span {
    298.               color: #333;
    299.             }
    300.           }
    301.  
    302.           &:nth-child(6) {
    303.             .number,
    304.             span {
    305.               color: #34aa70;
    306.             }
    307.           }
    308.  
    309.           .title {
    310.             font-size: 12px;
    311.           }
    312.  
    313.           .number {
    314.             font-size: 1.5rem;
    315.             font-weight: 600;
    316.             margin: 5px 0;
    317.             color: #a31d13;
    318.  
    319.             span {
    320.               color: #a31d13;
    321.             }
    322.           }
    323.  
    324.           .tip {
    325.             font-size: 12px;
    326.           }
    327.         }
    328.       }
    329.     }
    330.   }
    331. }
    332. //疫情地图 数组样式
    333. .content {
    334.   padding: 0 1rem;
    335. }
    336.  
    337. .data-map,
    338. .data-list {
    339.   margin-top: 300px;
    340.   overflow: hidden;
    341.  
    342.   h3 {
    343.     border-left: 8px solid #e10000;
    344.     padding-left: 1rem;
    345.   }
    346.   .hint{
    347.    font-size: 0.5rem;
    348.    color: coral;
    349.   }
    350. }
    351.  
    352. .map-box {
    353.   display: flex;
    354.   width: 200%;
    355. }
    356.  
    357. #nowMap,
    358. #totalMap {
    359.   height: 350px;
    360.   width: 50%;
    361.   animation-fill-mode: forwards;
    362.   left: 0;
    363. }
    364.  
    365. #nowMap {
    366.   margin-right: 1rem;
    367. }
    368.  
    369. #totalMap {
    370.   margin-left: 1rem;
    371. }
    372.  
    373. .to-left {
    374.   animation: toLeft 1s;
    375. }
    376.  
    377. .to-right {
    378.   animation: toRight 1s;
    379. }
    380.  
    381. .map-btn,
    382. .line-btn {
    383.   display: flex;
    384.   justify-content: space-between;
    385.   align-items: center;
    386.  
    387.   > div {
    388.     width: 45%;
    389.     height: 40px;
    390.     line-height: 40px;
    391.     border: 1px solid #d2d2d2;
    392.     box-shadow: 0 5px 7px 1px rgb(0 0 0 / 5%);
    393.     border-radius: 5px;
    394.     text-align: center;
    395.  
    396.     &.active {
    397.       border-color: #ce4733;
    398.       background-color: #fef7f7;
    399.       color: #ce2c1e;
    400.     }
    401.   }
    402. }
    403.  
    404. .line-btn {
    405.   > div {
    406.     width: 30%;
    407.     height: 55px;
    408.     line-height: 25px;
    409.     padding-top: 5px;
    410.   }
    411. }
    412.  
    413. .data-list {
    414.   margin-top: 20px;
    415. }
    416. style>

    📺📺vite.config.ts 代理开通 

    温馨提示:数据来源 网易云🤭

    1. import { defineConfig } from 'vite'
    2. import vue from '@vitejs/plugin-vue'
    3.  
    4. // https://vitejs.dev/config/
    5. export default defineConfig({
    6.   plugins: [vue()],
    7.   server: {
    8.     proxy: {
    9.        //网易代理
    10.       '/prod-api':
    11.        {
    12.         target: "https://c.m.163.com",
    13.         changeOrigin: true,
    14.         rewrite: (path) => path.replace(/^\/prod-api/,'')
    15.       }
    16.     }
    17.   }
    18. })

     完结

  • 相关阅读:
    JWT——讲解
    体系结构31_机群计算机
    ETCD中MVCC的运用
    外国固定资产管理系统功能有哪些
    MongoDB 文档更新update
    文件管理：目录管理
    【Kafka面试演练】那Kafka消费者手动提交、自动提交有什么区别？
    携职教育：【建议收藏】14个热门证书，最全考证时间表
    ARM接口实验—串口实验
    【力扣hot100】刷题笔记Day17
  • 原文地址：https://blog.csdn.net/Little___Turtle/article/details/126467993