|
- <template>
- <div class="home">
- <swiper class="swiper top-swiper" :options="swiperOption">
- <swiper-slide>
- <div
- class="slide-item"
- :style="{
- 'background-image': `url('${require('~/assets/images/home/swiper1.png')}')`,
- }"
- >
- <h2 class="title wow animate__slideInDown" data-wow-duration="1s">聚合{{$globals.platformCnt}}家国家级AI开放平台</h2>
- <p class="subtitle wow animate__slideInUp" data-wow-duration="1s">已接入API:{{$globals.abilityCnt}}个</p>
- <p class="subtitle wow animate__slideInUp" data-wow-duration="1s">开放资源数量:{{$globals.resourceCnt}}个</p>
- <p class="subtitle wow animate__slideInUp" data-wow-duration="1s">已接入平台:{{$globals.platformCnt}}个</p>
- </div>
- </swiper-slide>
- <swiper-slide>
- <div
- class="slide-item"
- :style="{
- 'background-image': `url('${require('~/assets/images/home/swiper2.png')}')`,
- }"
- >
- <div class="slide-text-area">
- <h2 class="title">聚合{{$globals.platformCnt}}家国家级AI开放平台</h2>
- <p class="subtitle">已接入API:{{$globals.abilityCnt}}个</p>
- <p class="subtitle">开放资源数量:{{$globals.resourceCnt}}个</p>
- <p class="subtitle">已接入平台:{{$globals.platformCnt}}个</p>
- </div>
- </div>
- </swiper-slide>
- <div slot="pagination" class="swiper-pagination"></div>
- </swiper>
- <div class="main">
- <section>
- <div class="title-view">
- <div class="title wow animate__fadeInDown" data-wow-duration="2s">国家新一代人工智能开放创新平台</div>
- <p class="subtitle wow animate__fadeInUp" data-wow-duration="2s">
- National Open Innovation Platform for Next Generation Artificial
- Intelligence
- </p>
- </div>
- <a-row :gutter="[16, 16]">
- <a-col
- v-for="item in $companies"
- :key="`item-${item.id}`"
- :xs="24"
- :md="8"
- :xl="6"
- >
- <a-card
- class="platform-card"
- :class="{active: item.active}"
- :loading="loading"
- :hoverable="item.active"
- >
- <div style="height: 65px;">
- <span style="font-weight: bold">
- {{ item.platformName }}
- </span>
- {{ item.description.slice(0, 60) }}{{item.description.length > 60 ? '...' : ''}}
- </div>
- <a-row
- slot="actions"
- justify="space-between"
- align="middle"
- type="flex"
- class="ml-4 mr-4"
- >
- <a-row justify="space-around" align="middle" type="flex">
- <a-row style="display: inherit;">
- <a v-if="item.officeUrl" :href="item.officeUrl" target="_blank" >
- <svg-icon
- icon-class="platform"
- class="mr-4 icon-active"
- />
- </a>
- <a v-else>
- <svg-icon
- icon-class="platform"
- class="mr-4"
- />
- </a>
- <a v-if="item.apiUrl" :href="item.apiUrl" target="_blank">
- <svg-icon icon-class="api" class="mr-4 icon-active" />
- </a>
- <a v-else>
- <svg-icon
- icon-class="api"
- class="mr-4"
- />
- </a>
- <a v-if="item.githubUrl" :href="item.githubUrl" target="_blank">
- <svg-icon icon-class="code" class="mr-4 icon-active" />
- </a>
- <a v-else>
- <svg-icon
- icon-class="code"
- class="mr-4"
- />
- </a>
- </a-row>
- </a-row>
- {{ item.companyName }}
- </a-row>
- <div v-show="!item.active" class="mask"></div>
- </a-card>
- </a-col>
- </a-row>
- </section>
- <section>
- <div class="title-view">
- <div class="title wow animate__fadeInDown" data-wow-duration="2s">开放能力</div>
- <p class="subtitle wow animate__fadeInUp" data-wow-duration="2s">提供多家平台能力免费使用</p>
- </div>
- <LazyHomeCard :data="abilities" type="menu"></LazyHomeCard>
- <a-row type="flex" justify="center">
- <a-col :span="24" justify="center" align="middle">
- <a href="/abilities" target="_blank">查看更多</a>
- </a-col>
- </a-row>
- </section>
- <section>
- <div class="title-view">
- <div class="title wow animate__fadeInDown" data-wow-duration="2s">开放资源</div>
- <p class="subtitle wow animate__fadeInUp" data-wow-duration="2s">Open Resource</p>
- </div>
- <LazyHomeCard
- :data="resources"
- flower-align="right"
- type="flower"
- ></LazyHomeCard>
- </section>
- <section>
- <div class="title-view">
- <div class="title wow animate__fadeInDown" data-wow-duration="2s">开放社区</div>
- <p class="subtitle wow animate__fadeInUp" data-wow-duration="2s">Open Community</p>
- </div>
- <LazySquareCard :list="communities"></LazySquareCard>
- </section>
- </div>
- </div>
- </template>
-
- <script>
- import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
- import SvgIcon from '../components/SvgIcon.vue'
- if (process.browser) {
- // eslint-disable-next-line no-var
- var { WOW } = require('wowjs')
- }
-
- export default {
- components: {
- Swiper,
- SwiperSlide,
- SvgIcon,
- },
- data() {
- return {
- loading: true,
- communities: [
- { title: '启智社区', description: 'xxxxxxxxx', image: '', url: '' },
- { title: '360社区', description: 'xxxxxxxxx', image: '', url: '' },
- { title: 'jd社区', description: 'xxxxxxxxx', image: '', url: '' },
- { title: '飞桨社区', description: 'xxxxxxxxx', image: '', url: '' }
- ],
- abilityActive: 'recent',
- activeAbility: {},
- abilities: [
- {
- data: [],
- title: '热门能力',
- key: 'hot',
- },
- {
- data: [],
- title: '最近更新',
- key: 'recent',
- },
- {
- data: [],
- title: this.$configs.hot_ability_tab_1 || '文字识别',
- key: 'textrecon',
- },
- {
- data: [],
- title: this.$configs.hot_ability_tab_2 || '语音识别',
- key: 'voicerecon',
- },
- ],
- resources: [
- {
- key: 'hot',
- title: '热门资源',
- data: [],
- },
- {
- key: 'recent',
- title: '最近更新',
- data: [],
- },
- {
- key: 'dataset',
- title: this.$configs.hot_resource_category_1 || '数据集',
- data: [],
- },
- {
- key: 'code',
- title: this.$configs.hot_resource_category_2 || '源代码',
- data: [],
- },
- ],
- swiperOption: {
- loop: true,
- slidesPerView: 1,
- autoplay: {
- delay: 5000,
- },
- pagination: {
- el: '.swiper-pagination',
- clickable: true,
- },
- },
- }
- },
- mounted() {
- console.log(this.$globals)
- this.fetch();
- if (process.browser) {
- this.$nextTick(() => {
- setTimeout(() => {
- new WOW().init();
- }, 500)
- })
- }
- setTimeout(() => {
- this.loading = false
- }, 1000)
- this.activeAbility = this.abilities.find(
- (x) => x.key === this.abilityActive
- )
- },
- methods: {
- abilityActiveToggle(toggle) {
- this.abilityActive = toggle
- this.activeAbility = this.abilities.find((x) => x.key === toggle)
- },
- fetch() {
- this.$jsonApi.get('resources', {
- from: 'all',
- filter: {
- hot: true,
- },
- page: { number: 1, size: 10 },
- }).then(res => {
- const { data: resources } =res
- if (resources.length === 0) {
- this.$jsonApi.get('resources', {
- from: 'all',
- page: { number: 1, size: 10 },
- }).then(res => {
- const { data: resources } =res
- this.resources[0].data = resources
- }).catch((error) => {
- this.$apiErrorHandler(error)
- })
- } else {
- this.resources[0].data = resources
- }
- }).catch((error) => {
- this.$apiErrorHandler(error)
- })
-
- this.$jsonApi.get('resources', {
- from: 'all',
- updatedAt: this.$dayjs().subtract(1, 'month').format('YYYY-MM-DD'),
- // filter: {
- // updatedAt: this.$dayjs().subtract(1, 'month').format('YYYY-MM-DD'),
- // },
- page: { number: 1, size: 10 },
- }).then(res => {
- const { data: resources } =res
- this.resources[1].data = resources
- }).catch((error) => {
- this.$apiErrorHandler(error)
- })
-
- this.$jsonApi.get('resources', {
- from: 'all',
- filter: {
- category: this.$configs.hot_resource_category_1 || '数据集',
- },
- page: { number: 1, size: 10 },
- }).then(res => {
- const { data: resources } =res
- this.resources[2].data = resources
- }).catch((error) => {
- this.$apiErrorHandler(error)
- })
-
- this.$jsonApi.get('resources', {
- from: 'all',
- filter: {
- category: this.$configs.hot_resource_category_2 || '源代码',
- },
- page: { number: 1, size: 10 },
- }).then(res => {
- const { data: resources } =res
- this.resources[3].data = resources
- }).catch((error) => {
- this.$apiErrorHandler(error)
- })
-
- this.$jsonApi.get('open-abilities', {
- from: 'all',
- filter: {
- hot: true,
- },
- page: { number: 1, size: 10 },
- }).then(res => {
- const { data: openAbilitis } =res
- if (openAbilitis.length === 0) {
- this.$jsonApi.get('open-abilities', {
- from: 'all',
- page: { number: 1, size: 10 },
- }).then(res => {
- const { data: openAbilitis } =res
- this.abilities[0].data = openAbilitis
- }).catch((error) => {
- this.$apiErrorHandler(error)
- })
- } else {
- this.abilities[0].data = openAbilitis
- }
- }).catch((error) => {
- this.$apiErrorHandler(error)
- })
-
- this.$jsonApi.get('open-abilities', {
- from: 'all',
- updatedAt: this.$dayjs().subtract(1, 'month').format('YYYY-MM-DD'),
- // filter: {
- // updatedAt: this.$dayjs().subtract(1, 'month').format('YYYY-MM-DD'),
- // },
- page: { number: 1, size: 10 },
- }).then(res => {
- const { data: openAbilitis } =res
- this.abilities[1].data = openAbilitis
- }).catch((error) => {
- this.$apiErrorHandler(error)
- })
-
- this.$jsonApi.get('open-abilities', {
- from: 'all',
- filter: {
- category: this.$configs.hot_ability_tab_1 || '文字识别',
- },
- page: { number: 1, size: 10 },
- }).then(res => {
- const { data: openAbilitis } =res
- this.abilities[2].data = openAbilitis
- }).catch((error) => {
- this.$apiErrorHandler(error)
- })
-
- this.$jsonApi.get('open-abilities', {
- from: 'all',
- filter: {
- category: this.$configs.hot_ability_tab_2 || '语音识别',
- },
- page: { number: 1, size: 10 },
- }).then(res => {
- const { data: openAbilitis } =res
- this.abilities[3].data = openAbilitis
- }).catch((error) => {
- this.$apiErrorHandler(error)
- })
- }
- },
- }
- </script>
|