主页布局 #

<template>
  <div>Home</div>
</template>

<script>
export default {
  name: 'Home',
}
</script>

<style></style>

<template>
  <div class="header"></div>
</template>

<script>
export default {}
</script>

<style>
.header {
  width: 100%;
  height: 0;
  padding-top: 32.5%;
  background: url(../assets/banner.jpg);
  background-size: cover;
}
</style>

<template>
  <div class="info">
    <p class="title">
      <i></i>
      病毒信息
    </p>
    <div class="content">
      <p>{{ covidInfo.note1 }}</p>
      <p>{{ covidInfo.note2 }}</p>
      <p>{{ covidInfo.note3 }}</p>
      <p>{{ covidInfo.remark1 }}</p>
      <p>{{ covidInfo.remark2 }}</p>
      <p>{{ covidInfo.remark3 }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Covid19Info',
  props: {
    covidInfo: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
}
</script>

<style scoped>
/* see Gitee */
</style>

<template>
  <div>
    <Header />
    <Covid19Info :covidInfo="covidInfo" />
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import Covid19Info from '@/components/Covid19Info.vue'

export default {
  components: {
    Header,
    Covid19Info,
  },
  data() {
    return {
      covidInfo: {
        note1: '',
        note2: '',
        note3: '',
        remark1: '',
        remark2: '',
        remark3: '',
      },
    }
  },
  async created() {
    const { data } = await this.$api.getNocv({
      key: '填写自己注册的key',
    })
    if (data.code === 200) {
      const desc = data.newslist[0].desc
      // 病毒信息
      this.covidInfo.note1 = desc.note1
      this.covidInfo.note2 = desc.note2
      this.covidInfo.note3 = desc.note3
      this.covidInfo.remark1 = desc.remark1
      this.covidInfo.remark2 = desc.remark2
      this.covidInfo.remark3 = desc.remark3
    }
  },
}
</script>

<template>
  <div class="case-num">
    <div class="container">
      <div class="title">
        <span
          >截至
          {{ formatDate(covidNum.modifyTime) }}
          全国数据统计</span
        >
      </div>
    </div>
    <div class="num">
      <ul class="count">
        <li>
          <div class="create-item">
            <div class="create-count">
              <b>
                较昨日<em style="color: rgb(247, 76, 49)">{{ numAddSymbol(covidNum.currentConfirmedIncr) }}</em>
              </b>
            </div>
            <strong style="color: rgb(247, 76, 49)">{{ covidNum.currentConfirmedCount }}</strong>
            <span>现存确诊</span>
          </div>
        </li>
        <li>
          <div class="create-item">
            <div class="create-count">
              <b>
                较昨日<em style="color: rgb(247, 130, 7)">{{ numAddSymbol(covidNum.confirmedIncr) }}</em>
              </b>
            </div>
            <strong style="color: rgb(247, 130, 7)">{{ covidNum.confirmedCount }}</strong>
            <span>累计确诊</span>
          </div>
        </li>
        <li>
          <div class="create-item">
            <div class="create-count">
              <b>
                较昨日<em style="color: rgb(162, 90, 78)">+{{ covidNum.suspectedIncr }}</em>
              </b>
            </div>
            <strong style="color: rgb(162, 90, 78)">{{ covidNum.suspectedCount }}</strong>
            <span>累计境外输入</span>
          </div>
        </li>
        <li>
          <div class="create-item">
            <div class="create-count">
              <b>
                较昨日<em style="color: rgb(174, 33, 44)">+{{ covidNum.curedIncr }}</em>
              </b>
            </div>
            <strong style="color: rgb(174, 33, 44)">{{ covidNum.curedCount }}</strong>
            <span>累计治愈</span>
          </div>
        </li>
        <li>
          <div class="create-item">
            <div class="create-count">
              <b>
                较昨日<em style="color: rgb(93, 112, 146)">+{{ covidNum.deadIncr }}</em>
              </b>
            </div>
            <strong style="color: rgb(93, 112, 146)">{{ covidNum.deadCount }}</strong>
            <span>累计死亡</span>
          </div>
        </li>
        <li>
          <div class="create-item">
            <div class="create-count">
              <b>
                较昨日<em style="color: rgb(40, 183, 163)">{{ numAddSymbol(covidNum.seriousIncr) }}</em>
              </b>
            </div>
            <strong style="color: rgb(40, 183, 163)">{{ covidNum.seriousCount }}</strong>
            <span>现存无症状</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Covid19Num',
  props: {
    covidNum: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  methods: {
    numAddSymbol(count) {
      return count >= 0 ? '+' + count : count
    },
    numAddZero(num) {
      return num >= 10 ? num : '0' + num
    },
    formatDate(time) {
      const date = new Date(time)
      const year = date.getFullYear()
      const month = this.numAddZero(date.getMonth() + 1)
      const day = this.numAddZero(date.getDate())
      const hour = this.numAddZero(date.getHours())
      const minute = this.numAddZero(date.getMinutes())
      const second = this.numAddZero(date.getSeconds())

      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
    },
  },
}
</script>

<style scoped>
/* see Gitee */
</style>

<template>
  <div>
    <Covid19Num :covidNum="covidNum" />
  </div>
</template>

<script>
import Covid19Num from '@/components/Covid19Num.vue'
export default {
  components: {
    Covid19Num,
  },
  data() {
    return {
      covidNum: {
        // 现存确诊
        currentConfirmedCount: 0,
        // 累计确诊
        confirmedCount: 0,
        // 累计境外输入
        suspectedCount: 0,
        // 累计治愈
        curedCount: 0,
        // 累计死亡
        deadCount: 0,
        // 现存无症状
        seriousCount: 0,
        // 较昨日
        currentConfirmedIncr: 0,
        confirmedIncr: 0,
        suspectedIncr: 0,
        curedIncr: 0,
        deadIncr: 0,
        seriousIncr: 0,
        // 截止日期
        modifyTime: 0,
      },
    }
  },
  async created() {
    const { data } = await this.$api.getNocv({
      key: 'your key',
    })
    if (data.code === 200) {
      const desc = data.newslist[0].desc
      // 今日数据
      this.covidNum.currentConfirmedCount = desc.currentConfirmedCount
      this.covidNum.confirmedCount = desc.confirmedCount
      this.covidNum.suspectedCount = desc.suspectedCount
      this.covidNum.curedCount = desc.curedCount
      this.covidNum.deadCount = desc.deadCount
      this.covidNum.seriousCount = desc.seriousCount
      // 较昨日新增
      this.covidNum.currentConfirmedIncr = desc.currentConfirmedIncr
      this.covidNum.confirmedIncr = desc.confirmedIncr
      this.covidNum.suspectedIncr = desc.suspectedIncr
      this.covidNum.curedIncr = desc.curedIncr
      this.covidNum.deadIncr = desc.deadIncr
      this.covidNum.seriousIncr = desc.seriousIncr
      // 截至日期
      this.covidNum.modifyTime = desc.modifyTime
    }
  },
}
</script>

<template>
  <div>
    <ul class="tabs-header">
      <slot></slot>
    </ul>
    <Content :tabsArr="tabsArr"></Content>
  </div>
</template>

<script>
import Content from './Content.vue'

export default {
  name: 'Tabs',
  components: {
    Content,
  },
  data() {
    return {
      currentTab: '',
      tabsArr: [],
    }
  },
  mounted() {
    this.currentTab = this.$children[0].name || ''
  },
  methods: {
    getCurrentTab(name) {
      this.currentTab = name
      this.$emit('tab-click', name)
    },
  },
}
</script>

<style scoped>
.tabs-header {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 2px solid #ededed;
}
</style>

<template>
  <li class="tab" :class="{ active: isActive }" @click="changeTab">
    {{ label }}
  </li>
</template>

<script>
export default {
  name: 'Tab',
  props: {
    label: {
      type: String,
      default: 'tab',
    },
    name: {
      type: String,
      default: 'hello',
    },
  },
  computed: {
    isActive() {
      return this.$parent.currentTab === this.name
    },
  },
  methods: {
    changeTab() {
      this.$parent.getCurrentTab(this.name)
    },
  },
  mounted() {
    this.$parent.tabsArr.push(this)
  },
}
</script>

<style scoped>
.tab {
  flex: 1;
  list-style: none;
  line-height: 40px;
  position: relative;
  text-align: center;
}

.tab.active {
  border-bottom: 2px solid blue;
}
</style>

<script>
export default {
  name: 'Content',
  props: {
    tabsArr: {
      type: Array,
      default: function () {
        return []
      },
    },
  },
  render() {
    return (
      <div>
        {this.tabsArr.map((item) => {
          // return item.isActive ? item.$slots.default : ''
          return <div style={{ display: item.isActive ? 'block' : 'none' }}>{item.$slots.default}</div>
        })}
      </div>
    )
  },
}
</script>

<style></style>

<template>
  <div>
    <p class="title"><i></i>疫情地图</p>
    <Tabs @tab-click="handleTabClick">
      <Tab label="国内疫情" name="china">
        <div id="chinaMap"></div>
      </Tab>
      <Tab label="世界疫情" name="world">
        <div id="worldMap"></div>
      </Tab>
    </Tabs>
  </div>
</template>

<script>
export default {
  name: 'Map',
  async mounted() {
    // 多重结构赋值
    const {
      data: { retdata },
    } = await this.$api.getNocvCity()

    const { data: worldData } = await this.$api.getNocvWorld({
      key: 'your key',
    })

    const allCitysNum = []
    retdata.forEach((item) => {
      const temp = {
        name: item.xArea,
        value: Number(item.curConfirm),
      }
      allCitysNum.push(temp)
    })

    const allCountryNum = []
    worldData.newslist.forEach((item) => {
      const temp = {
        name: item.provinceName,
        value: item.currentConfirmedCount,
      }
      allCountryNum.push(temp)
    })

    this.$charts.chinaMap('chinaMap', allCitysNum)
    this.$charts.worldMap('worldMap', allCountryNum)
  },
  methods: {
    handleTabClick(tab) {
      console.log(tab)
    },
  },
}
</script>

<style scoped>
#chinaMap,
#worldMap {
  width: 375px;
  height: 400px;
}
#worldMap {
  width: 375px;
  height: 400px;
}
/* see Gitee */
</style>

<template>
  <div class="city-container">
    <h3 class="title">{{ city }}疫情地图</h3>
    <div id="city"></div>
  </div>
</template>

<script>
export default {
  name: 'City',
  props: {
    city: {
      type: String,
      default: '',
    },
  },
  async mounted() {
    const {
      data: { retdata },
    } = await this.$api.getNocvSingleCity({
      city: this.city,
    })
    const cityNum = []
    retdata.subList.forEach((item) => {
      const temp = {
        name: item.city,
        value: item.confirm,
      }
      cityNum.push(temp)
    })
    this.$charts.cityMap('city', this.city, cityNum)
  },
}
</script>

<style scoped>
#city {
  width: 100%;
  height: 500px;
}
.city-container {
  text-align: center;
}
.title {
  font-size: 0.16rem;
  padding: 0.1rem 0 0.08rem 0.16rem;
  border-bottom: 1px solid #ccc;
}
</style>

<template>
  <div class="chart">
    <h3 class="title">全国疫情趋势图</h3>
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="(item, index) in swiperData" :key="index">
        <img :src="item.image" alt="" />
      </swiper-slide>
    </swiper>
    <ul class="navigator">
      <li class="navigatorItem" :class="{ active: currentIndex === index }" v-for="(item, index) in swiperData" :key="index" @click="handleActiveClick(index)">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  name: 'MySwiper',
  components: {
    Swiper,
    SwiperSlide,
  },
  directives: {
    swiper: directive,
  },
  data() {
    let that = this
    return {
      currentIndex: 0,
      swiperOptions: {
        // autoplay: true,
        autoplay: {
          delay: 1500,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
        pagination: {
          el: '.swiper-pagination',
        },
        on: {
          slideChangeTransitionEnd() {
            that.currentIndex = this.activeIndex
          },
        },
      },
      // 数据暂时使用固定图片代替
      swiperData: [
        {
          image: 'https://img1.dxycdn.com/2020/0220/014/3397684583507458039-135.png',
          title: '新增疑似/新增确诊',
        }
        ...
      ],
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    },
  },
  methods: {
    handleActiveClick(index) {
      this.swiper.slideTo(index, 1000, false)
      this.currentIndex = index
    },
  },
}
</script>

<style scoped>
/* see Gitee */
</style>

<template>
  <div class="travel">
    <h3 class="title">疫情出行政策</h3>
    <div class="cascader">
      <van-field v-model="departure" is-link readonly label="出发地" placeholder="请选择出发地" @click="departureShow = true" />
      <van-popup v-model="departureShow" round position="bottom">
        <van-cascader v-model="fromCascaderValue" title="请选择出发地" :options="options" @close="departureShow = false" @finish="onFinishDeparture" />
      </van-popup>

      <van-field v-model="destination" is-link readonly label="目的地" placeholder="请选择目的地" @click="destinationShow = true" />
      <van-popup v-model="destinationShow" round position="bottom">
        <van-cascader v-model="toCascaderValue" title="请选择目的地" :options="options" @close="destinationShow = false" @finish="onFinishDestination" />
      </van-popup>
      <van-button type="primary" round block @click="goPolicy"> 查看出行政策 </van-button>
    </div>
  </div>
</template>

<script>
import cityId from '@/plugins/cityId'

export default {
  name: 'Travel',
  data() {
    return {
      departureShow: false,
      destinationShow: false,
      departure: '',
      destination: '',
      fromCascaderValue: '',
      toCascaderValue: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      options: cityId,
      // 出发地和目的地数组
      twoCitys: [],
    }
  },
  methods: {
    // 选择出发地完成
    onFinishDeparture({ selectedOptions }) {
      this.departureShow = false
      this.departure = selectedOptions.map((option) => option.text).join('/')
      this.twoCitys.splice(0, 1, selectedOptions[1])
      this.checkPolicy()
    },
    // 选择目的地完成
    onFinishDestination({ selectedOptions }) {
      this.destinationShow = false
      this.destination = selectedOptions.map((option) => option.text).join('/')
      this.twoCitys.splice(1, 1, selectedOptions[1])
      this.checkPolicy()
    },
    // 每次选择地点都进行查询，为了能让政策页面拿到数据
    async checkPolicy() {
      if (this.twoCitys.length === 2) {
        const fromId = this.twoCitys[0].value
        const toId = this.twoCitys[1].value
        const policyDetailURL = `https://apis.juhe.cn/springTravel/query?key=ea3295121216b176e1a6b8af7fcd3dcf&from=${fromId}&to=${toId}&callback=policyDetailHandler`
        // 使用 jsonp 解决跨域
        window.jsonp(policyDetailURL)
      }
    },
    // 前往出行政策详情页
    goPolicy() {
      if (this.twoCitys.length === 2) {
        this.$router.push('/policy')
      } else {
        this.$notify({ type: 'warning', message: '请选择出发地和目的地！' })
      }
    },
  },
  /**
   * 调用接口获取城市ID
   * 由于接口有调用次数限制，因此选择把数据保存到 cityId.js 文件中
   * 导入使用即可，但可能存在ID变化本地未更新的问题
   */
  //#region
  /*
  async created() {
    const { data } = await this.$api.getTravelPolicy({
      key: '2fc84fc60f639068c374a9d644ae2da2'
    })
    if(data.error_code === 0) {
      const allPlaces = []
      data.result.forEach(provinceItem => {
        const cityArr = []
        provinceItem.citys.forEach(cityItem => {
          const cityTemp = {
            text: cityItem.city,
            value: cityItem.city_id
          }
          cityArr.push(cityTemp)
        })
        const provinceTemp = {
          text: provinceItem.province,
          value: provinceItem.province_id,
          children: cityArr
        }
        allPlaces.push(provinceTemp)
      })
      this.options = allPlaces
    }
  }
  */
  //#endregion
}
</script>

<style scoped>
.travel {
  width: 100%;
  background-color: #fff;
}
.cascader {
  padding: 10px;
  box-sizing: border-box;
}
.travel .title {
  font-size: 0.16rem;
  margin: 0 0 0.08rem 0.16rem;
}
</style>