1801 lines
52 KiB
Vue
1801 lines
52 KiB
Vue
<template>
|
||
<!-- <div v-if="false" class="w-100% flex gap-x-20px">
|
||
<div :class="selectByCond(appStore.getMobile, 'w-100%', 'w-80%')">
|
||
<div
|
||
class="h-260px flex pl-10px pt-10px mb-20px bg-white big-radius .dark:bg-#1A2744"
|
||
style="width: calc(100% - 10px)"
|
||
>
|
||
<div
|
||
class="bg-#3370FF w-45% pb-10px mr-10px flex big-radius blue_box_shadow pointer"
|
||
style="height: calc(100% - 20px)"
|
||
>
|
||
<div
|
||
:class="selectByCond(isFullscreen, 'w-40% mr-9%', 'w-50%')"
|
||
class="pt-10px pb-10px pl-20px pr-20px"
|
||
>
|
||
<div class="text-white text-32px font-bold mb-5px nowrap">转化率</div>
|
||
<div
|
||
class="text-white text-14px flex items-center nowrap"
|
||
style="font-family: Arial, Helvetica, sans-serif"
|
||
>
|
||
{{ conversion?.sj }}
|
||
<div
|
||
class="w-15px h-15px bg-white rounded-md flex items-center justify-center ml-10px"
|
||
>
|
||
<Icon icon="bytesize:chevron-bottom" :size="12" class="text-black"></Icon>
|
||
</div>
|
||
</div>
|
||
<div class="mt-30px flex nowrap">
|
||
<div class="w-50% text-white b-l-0 b-t-0 b-b-0 b-r-1px b-#709BFF b-solid">
|
||
<div class="text-12px">成功客户数</div>
|
||
<div class="text-16px font-bold mt-5px">{{ conversion?.cgkhs }}</div>
|
||
</div>
|
||
<div class="w-50% text-white ml-30px">
|
||
<div class="text-12px">新增会员数</div>
|
||
<div class="text-16px font-bold mt-5px">{{ conversion?.xzhys }}</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="mt-30px flex bg-white h-49px pt-5px rounded-md text-blue-600 w-183px pl-20px .dark:bg-#1A2744"
|
||
style="align-items: baseline"
|
||
>
|
||
<span class="text-14px">客单价：</span>
|
||
<span class="text-32px font-bold ml-10px">{{ conversion?.kdj }}</span>
|
||
</div>
|
||
</div>
|
||
<div :class="selectByCond(isFullscreen, 'w-45% pl-5%', 'w-50%')">
|
||
<template v-if="isFullscreen">
|
||
<Echart :options="oilGauge_app_option" width="100%" height="250px" />
|
||
</template>
|
||
<template v-else>
|
||
<Echart :options="oilGauge_option" width="100%" height="250px" />
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<div class="oilGauge_line .dark:b-#525C73">
|
||
<div
|
||
:class="selectByCond(appStore.getMobile, 'gap-x-5px', 'gap-x-20px')"
|
||
class="grid grid-cols-4 ml-20px"
|
||
>
|
||
<div
|
||
class="truncate flex-shrink-0"
|
||
v-for="item in ConversionList"
|
||
:key="item.titleCode"
|
||
>
|
||
<div class="flex" style="align-items: baseline">
|
||
<span
|
||
:class="selectByCond(isFullscreen, 'text-16px', 'text-28px')"
|
||
class="font-bold"
|
||
>{{ item.nowNum }}</span
|
||
>
|
||
<template v-if="item.nowNum >= item.beforeNum">
|
||
<div class="arrow-top flex justify-center ml-10px">
|
||
<Icon icon="mdi:arrow-top-bold" class="text-white .dark:text-black"></Icon>
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<div class="arrow-bottom flex items-center justify-center ml-10px">
|
||
<Icon icon="mdi:arrow-bottom-bold" class="text-white .dark:text-black"></Icon>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<div class="text-14px mt-5px">
|
||
<span class="text-13px">/</span>
|
||
昨日：{{ item.beforeNum }}
|
||
</div>
|
||
<div class="mt-5px pb-5px">
|
||
<div
|
||
:class="defaultConversion == item.titleCode ? 'active-conversion' : ''"
|
||
class="text-14px c-#A2A7C2 cursor-pointer .dark:text-white"
|
||
@click="clickSelectConversion(item.titleCode)"
|
||
style="width: max-content"
|
||
>
|
||
{{ item.title }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="oilGauge_line_echart">
|
||
<Echart :options="oilGauge_line_option" width="100%" height="150px" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-100% flex gap-x-20px">
|
||
<div
|
||
class="h-390px w-50% p-10px mb-20px bg-white big-radius flex items-center .dark:bg-#1A2744"
|
||
>
|
||
<div class="w-100%">
|
||
<div class="h-150px text-25px flex items-center justify-center mb-20px">
|
||
<template v-if="typeof advertising == 'string'">
|
||
{{ advertising }}
|
||
</template>
|
||
<template v-else-if="typeof advertising == 'object'">
|
||
<el-carousel height="150px" class="w-100% rounded-xl">
|
||
<el-carousel-item
|
||
class="text-center"
|
||
v-for="(item, index) in advertising"
|
||
:key="index"
|
||
>
|
||
<el-image :src="item.imgUrl" class="h-100% w-100%" fit="cover"></el-image>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</template>
|
||
</div>
|
||
<div class="pt-10px b-solid b-l-0 b-r-0 b-b-0 b-t-1px b-#5D677D">
|
||
<div class="flex">
|
||
<div>
|
||
<span
|
||
class="c-#FF0000 font-bold .dark:text-white"
|
||
:class="
|
||
refineSelectByCond(
|
||
'text-9px',
|
||
'text-12px',
|
||
''
|
||
)
|
||
"
|
||
>
|
||
某赞商家  <span class="c-#ED6A0C font-bold .dark:text-white"
|
||
>不打烊</span
|
||
>
|
||
</span>
|
||
</div>
|
||
<div
|
||
class="flex items-center ml-20px pl-20px b-solid b-t-0 b-r-0 b-b-0 b-l-2px b-#EEF1FF"
|
||
>
|
||
<el-avatar src="/img/avatar1.png" size="small" />
|
||
<span class="c-#FF0000 font-bold text-13px ml-10px .dark:text-white">
|
||
某赞护航
|
||
<span class="ml-15px font-100">为你的生意保驾护航</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="h-155px flex mt-20px bg-#EEF1FF small-radius .dark:bg-black">
|
||
<div
|
||
:class="selectByCond(appStore.getMobile, 'w-50%', 'w-65%')"
|
||
class="h-100% flex items-center"
|
||
>
|
||
<div
|
||
class="text-12px h-90% flex justify-center p-l-25px"
|
||
style="flex-direction: column"
|
||
>
|
||
<div
|
||
v-for="(item, index) in merchantIntroduction"
|
||
:key="item.title + index"
|
||
class="flex-auto flex items-center div_to_ul"
|
||
>
|
||
<span class="mr-10px shrink-0 w-50px">{{ item.title }}</span>
|
||
<span
|
||
:class="
|
||
refineSelectByCond(
|
||
'w-75px',
|
||
'w-100px',
|
||
'w-170px'
|
||
)
|
||
"
|
||
class="truncate b-solid b-t-0 b-r-0 b-b-0 b-l-1px b-#E0E6ED pl-10px"
|
||
>
|
||
{{ item.content }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="w-35% bg-#3370FF m-10px p-20px small-radius cursor-pointer c-white blue_box_shadow"
|
||
>
|
||
<div class="text-11px"> 查看全部经验建议 </div>
|
||
<div class="text-32px h-60px" style="line-height: 60px"> {{ sjjysl }} </div>
|
||
<div class="text-13px flex items-center">
|
||
/家商家已学习
|
||
<Icon icon="si:arrow-right-fill" :size="24" class="ml-auto"></Icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="h-390px w-50% p-10px mb-20px bg-white big-radius .dark:bg-#1A2744">
|
||
<div class="p-10px flex" style="height: calc(100% - 20px)">
|
||
<div class="w-180px">
|
||
<div class="font-bold text-22px"> 智能助手 </div>
|
||
<div class="c-#A2A7C2 text-13px mt-5px .dark:text-white">
|
||
感受下某赞黑科技的力量
|
||
</div>
|
||
<div class="w-180px h-180px animation-box mt-30px">
|
||
<div
|
||
class="znzs-one w-180px h-180px bg-#f8f8fd .dark:bg-#56607A"
|
||
:class="znzsType == 'hover' ? 'hover' : ''"
|
||
>
|
||
</div>
|
||
<div
|
||
class="znzs-two w-150px h-150px bg-#e8eafb .dark:bg-#9098B4"
|
||
:class="znzsType == 'hover' ? 'hover' : ''"
|
||
>
|
||
</div>
|
||
<div class="znzs-three w-130px h-130px" :class="znzsType == 'hover' ? 'hover' : ''">
|
||
</div>
|
||
<div class="znzs-four w-110px h-110px"> </div>
|
||
<div class="znzs-xdcl text-13px text-white">项待处理 </div>
|
||
<div class="znzs-ck pointer w-60px h-60px c-white text-52px font-bold text-center">
|
||
<div
|
||
class="znzs-sz h-300px w-100%"
|
||
:class="znzsType == 'nothover' ? 'nothover' : ''"
|
||
@mouseover="znzsMouseover"
|
||
@mouseout="znzsMouseout"
|
||
>
|
||
<div
|
||
class="h-60px"
|
||
style="line-height: 60px"
|
||
v-for="item in animationList"
|
||
:key="item"
|
||
>
|
||
{{ item }}
|
||
</div>
|
||
<div class="h-76px" style="line-height: 60px">
|
||
<Icon icon="charm:chevrons-up" :size="36" class=""></Icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-center mt-50px">
|
||
<div
|
||
class="w-140px h-40px text-14px flex items-center justify-center cursor-pointer bg-#3370FF c-white small-radius"
|
||
>
|
||
去解决掉TA
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="h-100% znzs-tabs ml-10px" style="width: calc(100% - 180px)">
|
||
<div class="w-80%">
|
||
<el-tabs v-model="activeName" class="" @tab-click="handleClick">
|
||
<el-tab-pane label="全部" name="1"></el-tab-pane>
|
||
<el-tab-pane label="店铺基础" name="2"></el-tab-pane>
|
||
<el-tab-pane label="商品体验" name="3"></el-tab-pane>
|
||
<el-tab-pane label="物流体验" name="4"></el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
<div class="tabs-position-icon">
|
||
<Icon icon="material-symbols:menu" :size="26"></Icon>
|
||
</div>
|
||
<div>
|
||
<Echart
|
||
:options="znzs_option"
|
||
:width="
|
||
refineSelectByCond('150px', '250px', '300px')
|
||
"
|
||
height="190px"
|
||
/>
|
||
</div>
|
||
<div class="grid grid-rows-3 text-11px gap-y-20px mt-20px">
|
||
<div
|
||
v-for="(item, index) in znzsIntroduce"
|
||
:key="item.xxnra + index"
|
||
class="flex items-center"
|
||
>
|
||
<template v-if="item.jjcd == 1">
|
||
<el-image src="/img/hq1.png" fit="contain" class="h-15px"></el-image>
|
||
</template>
|
||
<template v-else-if="item.jjcd == 0">
|
||
<el-image src="/img/lq1.png" fit="contain" class="h-15px"></el-image>
|
||
</template>
|
||
<div
|
||
class="ml-15px flex truncate"
|
||
:class="
|
||
refineSelectByCond(
|
||
'w-80px',
|
||
'w-180px',
|
||
'w-190px'
|
||
)
|
||
"
|
||
>
|
||
<div class="truncate" style="max-width: 100%; flex-shrink: 0">
|
||
{{ item.xxnra }}
|
||
</div>
|
||
<div v-if="item.xxnrb" class="c-#C7CCD0 ml-5px truncate .dark:text-white">
|
||
{{ item.xxnrb }}</div
|
||
>
|
||
</div>
|
||
<span class="ml-auto c-#3370FF cursor-pointer .dark:text-white">
|
||
{{ item.btname }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="mt-20px text-11px c-#3370FF cursor-pointer .dark:text-white">
|
||
还有 {{ overviewPendingLen }} 条内容，查看全部内容
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-100% flex gap-x-30px">
|
||
<div
|
||
:class="
|
||
refineSelectByCond(
|
||
'w-90% h-85px gap-x-10px',
|
||
'w-93% h-85px gap-x-30px',
|
||
'w-95% h-115px gap-x-30px'
|
||
)
|
||
"
|
||
class="mb-20px big-radius flex"
|
||
>
|
||
<div
|
||
class="flex-shrink-0 bg-#1DC9B7 small-radius c-white"
|
||
style="box-shadow: 0 3px 20px rgb(29 201 183 / 29.8%)"
|
||
>
|
||
<div class="h-100% pl-20px pr-20px flex items-center">
|
||
<div class="w-75%">
|
||
<div
|
||
:class="
|
||
refineSelectByCond(
|
||
'text-12px',
|
||
'text-20px',
|
||
'text-24px'
|
||
)
|
||
"
|
||
class="font-bold mb-10px"
|
||
>微信小程序</div
|
||
>
|
||
<div
|
||
:class="
|
||
refineSelectByCond(
|
||
'text-6px',
|
||
'text-12px',
|
||
'text-13px'
|
||
)
|
||
"
|
||
class="truncate"
|
||
>抢占微信设计流量红利</div
|
||
>
|
||
</div>
|
||
<div class="w-25%">
|
||
<el-image src="/img/wxxcx1.png" fit="contain" class="h-45px" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-shrink-0 bg-#3370FF blue_box_shadow small-radius c-white">
|
||
<div class="h-100% pl-20px pr-20px flex items-center">
|
||
<div class="w-75%">
|
||
<div
|
||
:class="
|
||
refineSelectByCond(
|
||
'text-12px',
|
||
'text-20px',
|
||
'text-24px'
|
||
)
|
||
"
|
||
class="font-bold mb-10px"
|
||
>百度小程序</div
|
||
>
|
||
<div
|
||
:class="
|
||
refineSelectByCond(
|
||
'text-6px',
|
||
'text-12px',
|
||
'text-13px'
|
||
)
|
||
"
|
||
class="truncate"
|
||
>打造商家新官网</div
|
||
>
|
||
</div>
|
||
<div class="w-25%">
|
||
<el-image src="/img/wxxcx1.png" fit="contain" class="h-45px" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="flex-shrink-0 bg-#C227FC small-radius c-white"
|
||
style="box-shadow: 0 3px 20px rgb(194 39 252 / 29.8%)"
|
||
>
|
||
<div class="h-100% pl-20px pr-20px flex items-center">
|
||
<div class="w-75%">
|
||
<div
|
||
:class="
|
||
refineSelectByCond(
|
||
'text-12px',
|
||
'text-20px',
|
||
'text-24px'
|
||
)
|
||
"
|
||
class="font-bold mb-10px"
|
||
>分销市场</div
|
||
>
|
||
<div
|
||
:class="
|
||
refineSelectByCond(
|
||
'text-6px',
|
||
'text-12px',
|
||
'text-13px'
|
||
)
|
||
"
|
||
class="truncate"
|
||
>一键上架，快速补充货源</div
|
||
>
|
||
</div>
|
||
<div class="w-25%">
|
||
<el-image src="/img/fxsc.png" fit="contain" class="h-45px" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="flex-shrink-0 bg-#F2637B small-radius c-white"
|
||
style="box-shadow: 0 3px 20px rgb(242 99 123 / 29.8%)"
|
||
>
|
||
<div class="h-100% pl-20px pr-20px flex items-center">
|
||
<div class="w-75%">
|
||
<div
|
||
:class="
|
||
refineSelectByCond(
|
||
'text-12px',
|
||
'text-20px',
|
||
'text-24px'
|
||
)
|
||
"
|
||
class="font-bold mb-10px"
|
||
>多人拼团</div
|
||
>
|
||
<div
|
||
:class="
|
||
refineSelectByCond(
|
||
'text-6px',
|
||
'text-12px',
|
||
'text-13px'
|
||
)
|
||
"
|
||
class="truncate"
|
||
>裂变式营销玩法</div
|
||
>
|
||
</div>
|
||
<div class="w-25%">
|
||
<el-image src="/img/pin.png" fit="contain" class="h-45px" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
:class="
|
||
refineSelectByCond(
|
||
'w-7% h-85px',
|
||
'w-6% h-85px',
|
||
'w-5% pr-10px pl-10px h-115px'
|
||
)
|
||
"
|
||
class="mb-20px bg-#3370FF blue_box_shadow flex justify-center small-radius text-white text-12px"
|
||
>
|
||
<div
|
||
:class="selectByCond(appStore.getMobile, 'leading-4.5', 'leading-6')"
|
||
class="w-50% h-100% mt-10px cursor-pointer text-center"
|
||
>
|
||
更多最新推荐
|
||
<Icon
|
||
icon="pepicons-pop:arrow-left"
|
||
:size="selectByCond(appStore.getMobile, '18', '24')"
|
||
></Icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-100% flex gap-x-30px">
|
||
<div
|
||
:class="
|
||
refineSelectByCond(
|
||
'w-7% h-85px',
|
||
'w-6% h-85px',
|
||
'w-5% pr-10px pl-10px h-115px'
|
||
)
|
||
"
|
||
class="mb-20px bg-#3370FF blue_box_shadow flex justify-center small-radius text-white text-12px"
|
||
>
|
||
<div
|
||
:class="selectByCond(appStore.getMobile, 'leading-4.5', 'leading-6')"
|
||
class="w-50% h-100% mt-10px cursor-pointer text-center"
|
||
>
|
||
全部经营建议
|
||
<Icon
|
||
icon="pepicons-pop:arrow-right"
|
||
:size="selectByCond(appStore.getMobile, '18', '24')"
|
||
></Icon>
|
||
</div>
|
||
</div>
|
||
<div
|
||
:class="
|
||
refineSelectByCond(
|
||
'w-90% h-85px gap-x-10px',
|
||
'w-93% h-85px gap-x-30px',
|
||
'w-95% h-115px gap-x-30px'
|
||
)
|
||
"
|
||
class="mb-20px big-radius flex"
|
||
>
|
||
<div
|
||
v-for="(item, index) in jyjyList"
|
||
:key="item.title + index"
|
||
class="w-100% bg-white small-radius .dark:bg-#1A2744"
|
||
>
|
||
<div class="h-100% pl-20px pr-20px flex items-center">
|
||
<div class="w-25%">
|
||
<el-image :src="item.imgUrl" fit="contain" />
|
||
</div>
|
||
<div class="w-75% ml-5px">
|
||
<div
|
||
:class="
|
||
refineSelectByCond(
|
||
'text-12px',
|
||
'text-20px',
|
||
'text-24px'
|
||
)
|
||
"
|
||
class="font-bold mb-10px"
|
||
>{{ item.title }}</div
|
||
>
|
||
<div
|
||
:class="
|
||
refineSelectByCond(
|
||
'text-6px',
|
||
'text-10px',
|
||
'text-12px'
|
||
)
|
||
"
|
||
class="c-#A2A7C2 truncate .dark:text-white"
|
||
>{{ item.introduction }}</div
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-100% mb-20px">
|
||
<div class="h-240px p-20px pl-40px bg-white small-radius .dark:bg-#1A2744">
|
||
<div class="font-bold text-24px"> 学习交流 </div>
|
||
<div class="text-14px mt-5px c-#A2A7C2 .dark:text-white">
|
||
成长必经之路，好好看，好好学...
|
||
</div>
|
||
<div class="w-85% mt-20px flex">
|
||
<div class="w-100% grid gap-x-30px gap-y-20px grid-cols-3">
|
||
<div
|
||
class="pl-10px h-66px flex items-center bg-#EEF1FF small-radius .dark:bg-black"
|
||
v-for="(item, index) in learningExchangeList"
|
||
:key="index"
|
||
>
|
||
<div class="w-25%">
|
||
<el-image :src="item.imgUrl" fit="contain" />
|
||
</div>
|
||
<div class="w-75%">
|
||
<div class="font-bold mb-5px">{{ item.title }}</div>
|
||
<div class="text-12px c-#A2A7C2 truncate .dark:text-white">{{
|
||
item.introduce
|
||
}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="h-150px w-60px pr-10px pl-10px ml-30px bg-#3370FF blue_box_shadow flex justify-center small-radius text-white text-12px"
|
||
>
|
||
<div class="w-50% h-100% mt-10px leading-8 cursor-pointer">
|
||
更多渠道学习
|
||
<Icon icon="pepicons-pop:arrow-left" :size="24"></Icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-100%">
|
||
<div class="h-240px p-20px pl-40px bg-white small-radius .dark:bg-#1A2744">
|
||
<div class="font-bold text-24px"> 更多服务 </div>
|
||
<div class="text-14px mt-5px c-#A2A7C2 .dark:text-white"> 想要找找其他的服务 </div>
|
||
<div class="flex h-130px mt-30px">
|
||
<div class="grid grid-cols-5 grid-rows-1 h-100%">
|
||
<div
|
||
v-for="(item, index) in moreServicesList"
|
||
:key="item.title + index"
|
||
class="bg-#EEF1FF small-radius mr-20px h-130px flex items-center justify-center .dark:bg-black"
|
||
style="flex-direction: column; min-width: 90px"
|
||
>
|
||
<div class="">
|
||
<el-image :src="item.imgUrl" fit="contain" />
|
||
</div>
|
||
<div class="font-bold mt-15px"> {{ item.title }} </div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="w-70px h-100% pr-5px pl-5px bg-#3370FF blue_box_shadow small-radius text-white text-12px"
|
||
>
|
||
<div class="ml-10px mr-10px h-100% mt-10px leading-8 text-center cursor-pointer">
|
||
或者没你想要的？联系我
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<template v-if="!appStore.getMobile">
|
||
<div class="w-20% flex-shrink-0">
|
||
<div class="w-100%">
|
||
<div
|
||
class="h-300px p-20px bg-white mb-20px big-radius flex items-center .dark:bg-#1A2744"
|
||
>
|
||
<div class="w-100%">
|
||
<div class="text-21px font-bold"> 如果你需要帮助 </div>
|
||
<div class="text-13px c-#A2A7C2 mt-5px mb-20px .dark:text-white"> 随时呼叫我... </div>
|
||
<div class="w-100%">
|
||
<div
|
||
class="h-60px mb-15px bg-#EEF1FF small-radius flex items-center pl-10px pr-10px .dark:bg-black"
|
||
v-for="(item, index) in bzList"
|
||
:key="item.title + index"
|
||
>
|
||
<el-image :src="item.imgUrl" fit="contain" class="h-30px" />
|
||
<div class="ml-15px">
|
||
<div class="text-14px font-bold">{{ item.title }}</div>
|
||
<div class="c-#A2A7C2 text-11px .dark:text-white">{{ item.introduction }}</div>
|
||
</div>
|
||
<Icon
|
||
icon="pepicons-pop:arrow-right"
|
||
:size="24"
|
||
class="ml-auto cursor-pointer"
|
||
></Icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="h-300px p-20px bg-white mb-20px big-radius flex items-center .dark:bg-#1A2744"
|
||
>
|
||
<div class="w-100%">
|
||
<div class="text-21px font-bold"> 有你的服务通知 </div>
|
||
<div class="text-13px c-#A2A7C2 mt-5px mb-20px .dark:text-white">
|
||
随时关注动态...
|
||
</div>
|
||
<div class="w-100% grid gap-y-15px">
|
||
<div
|
||
class="bg-#EEF1FF small-radius p-10px pt-13px pb-13px .dark:bg-black"
|
||
v-for="(item, index) in fwtzList"
|
||
:key="index"
|
||
>
|
||
<div class="font-bold"> {{ item.title }} </div>
|
||
<div class="c-#A2A7C2 text-12px mt-5px .dark:text-white">
|
||
{{ item.content }}
|
||
</div>
|
||
<div class="flex justify-center mt-10px">
|
||
<div class="flex justify-between text-12px c-#3370FF w-60% .dark:text-white">
|
||
<div class="cursor-pointer">查看详情</div>
|
||
<div class="cursor-pointer">我知道了</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<template v-for="(item, index) in rightList" :key="item.title + index">
|
||
<div
|
||
:class="item.h == '210' ? 'h-210px' : 'h-240px'"
|
||
class="p-20px bg-white mb-20px big-radius flex items-center .dark:bg-#1A2744"
|
||
>
|
||
<div class="w-100%">
|
||
<div class="text-23px font-bold"> {{ item.title }} </div>
|
||
<div class="text-14px c-#3370FF mt-5px mb-15px cursor-pointer .dark:text-white">
|
||
查看全部
|
||
</div>
|
||
<div class="w-100%">
|
||
<div
|
||
class="bg-#EEF1FF small-radius p-10px h-130px .dark:bg-black"
|
||
style="width: calc(100% - 20px)"
|
||
>
|
||
<div class="font-bold mb-15px">{{ item.totalTitle }}</div>
|
||
<div class="c-#A2A7C2 w-100% text-11px grid grid-rows-4">
|
||
<div
|
||
v-for="(cItem, cIndex) in item.content"
|
||
:key="cItem.title + cIndex"
|
||
class="mb-5px cursor-pointer .dark:text-white"
|
||
:class="cItem.type == 'success' ? 'c-#F2637B' : 'flex'"
|
||
>
|
||
{{ cItem.title }}
|
||
<div v-if="cItem.type == 'info'" class="ml-auto">
|
||
<Icon icon="mingcute:right-line" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div> -->
|
||
<div class="shouye">
|
||
<img src="@/assets/imgs/souye.png" />
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import Icon from '@/components/Icon/src/Icon.vue'
|
||
import 'echarts/lib/component/markLine'
|
||
import 'echarts/lib/component/markPoint'
|
||
import type { TabsPaneContext } from 'element-plus'
|
||
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
|
||
import { useAppStore } from '@/store/modules/app'
|
||
import { getTableList, batchGetTableList } from '@/api/design/report'
|
||
import { cloneDeep } from 'lodash-es'
|
||
|
||
defineOptions({ name: 'Home10' })
|
||
|
||
interface Advertising {
|
||
imgUrl: string
|
||
}
|
||
interface ZnzsIntroduce {
|
||
jjcd: number
|
||
xxnra: string
|
||
xxnrb?: string
|
||
btname?: string
|
||
}
|
||
interface FwtzList {
|
||
content: string
|
||
title: string
|
||
}
|
||
interface RightListContent {
|
||
type: string
|
||
title: string
|
||
}
|
||
interface RightList {
|
||
title: string
|
||
h: string
|
||
totalTitle?: string
|
||
content?: RightListContent[]
|
||
}
|
||
interface MerchantIntroduction {
|
||
title: string
|
||
content: string
|
||
}
|
||
|
||
const appStore = useAppStore()
|
||
// 是否全屏
|
||
const isFullscreen = computed(() =>appStore.getFullscreen);
|
||
|
||
// type为true返回classOne，反之返回classTwo
|
||
const selectByCond = (type, classOne, classTwo) => {
|
||
if (typeof type === 'boolean' && type) {
|
||
return classOne
|
||
} else {
|
||
return classTwo
|
||
}
|
||
}
|
||
|
||
const refineSelectByCond = (isFullscreenClsss, mobileClass, otherClass) => {
|
||
if (isFullscreen.value) {
|
||
return isFullscreenClsss
|
||
} else if (appStore.getMobile) {// 判断是否手机端
|
||
return mobileClass
|
||
} else {
|
||
return otherClass
|
||
}
|
||
}
|
||
|
||
const conversion = ref({
|
||
cgkhs: 0,
|
||
sj: '',
|
||
kdj: 0,
|
||
xzhys: 0
|
||
})
|
||
|
||
const oilGaugeValue = ref(45)
|
||
const oilGaugeCode = ref('%')
|
||
const oilGaugeSubtext = ref('访问-支付转化率')
|
||
const oilGaugemax = ref(100)
|
||
|
||
// 访问-支付转化率
|
||
const oilGauge_app_option = ref<any>()
|
||
const oilGauge_option = ref({
|
||
title: [
|
||
{
|
||
text: `{primary|${oilGaugeValue.value}}\t{point|${oilGaugeCode.value}}`,
|
||
left: 'center',
|
||
top: 'center',
|
||
textStyle: {
|
||
rich: {
|
||
primary: {
|
||
color: 'white',
|
||
fontWeight: 'bold',
|
||
fontSize: 32,
|
||
lineHeight: 67.2
|
||
},
|
||
point: {
|
||
fontSize: 12,
|
||
lineHeight: 22,
|
||
color: 'white',
|
||
padding: [10, -10, 0, -5]
|
||
}
|
||
}
|
||
}
|
||
},
|
||
{
|
||
left: 'center',
|
||
top: '70%',
|
||
subtext: `${oilGaugeSubtext.value}`,
|
||
subtextStyle: {
|
||
color: 'white',
|
||
fontSize: 12
|
||
}
|
||
}
|
||
],
|
||
angleAxis: {
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
min: 0,
|
||
max: 6.666,
|
||
startAngle: 225
|
||
},
|
||
radiusAxis: {
|
||
type: 'category',
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
data: ['a', 'b', 'c'],
|
||
z: 10
|
||
},
|
||
polar: {
|
||
radius: '105%'
|
||
},
|
||
series: [
|
||
{
|
||
type: 'gauge',
|
||
splitNumber: 20,
|
||
max: oilGaugemax.value,
|
||
radius: '75%',
|
||
detail: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
// 坐标轴线
|
||
show: false,
|
||
lineStyle: {
|
||
color: [
|
||
[0, '#ADC6FF'],
|
||
[1, '#ADC6FF']
|
||
],
|
||
width: 0,
|
||
opacity: 0
|
||
}
|
||
},
|
||
data: [
|
||
{
|
||
name: '',
|
||
value: oilGaugeValue.value
|
||
}
|
||
],
|
||
splitLine: {
|
||
length: 20, //长刻度节点线长度
|
||
lineStyle: {
|
||
width: 4,
|
||
color: '#ADC6FF'
|
||
} //刻度节点线
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
color: '#333',
|
||
fontSize: 18
|
||
},
|
||
pointer: {
|
||
show: true,
|
||
icon: 'roundRect',
|
||
length: '60%',
|
||
offsetCenter: [0, -25],
|
||
itemStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: 'white'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(255, 255, 255, 0)'
|
||
}
|
||
]
|
||
},
|
||
opacity: 0.9
|
||
}
|
||
}
|
||
}
|
||
],
|
||
tooltip: {
|
||
show: false
|
||
}
|
||
})
|
||
|
||
// 折线图
|
||
const goTo = ref<number[]>([])
|
||
const goOut = ref<number[]>([])
|
||
const oilGaugeLineXAxis = ref<string[]>([])
|
||
const showoilGaugeLineLable = ref('')
|
||
const ConversionList = ref([
|
||
{ nowNum: 0, beforeNum: 0, title: '支付金额', titleCode: 'zfje' },
|
||
{ nowNum: 0, beforeNum: 0, title: '支付订单', titleCode: 'zfdd' },
|
||
{ nowNum: 0, beforeNum: 0, title: '浏览量', titleCode: 'lll' },
|
||
{ nowNum: 0, beforeNum: 0, title: '访客数', titleCode: 'fks' }
|
||
])
|
||
const defaultConversion = ref('')
|
||
let oilGaugeMarkPoint = computed(() => {
|
||
let str = {
|
||
goTo: ['1', goTo.value[0] || 0],
|
||
goOut: ['1', goOut.value[0] || 0]
|
||
}
|
||
return str
|
||
})
|
||
const oilGauge_line_option = ref<any>({
|
||
color: ['#F2F4F5', '#3571FE'],
|
||
grid: {
|
||
top: '15%',
|
||
bottom: '0',
|
||
left: '0',
|
||
right: '0'
|
||
},
|
||
xAxis: [
|
||
{
|
||
show: false,
|
||
boundaryGap: false,
|
||
data: oilGaugeLineXAxis.value
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
show: false
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '昨天',
|
||
type: 'line',
|
||
symbolSize: 0,
|
||
smooth: true,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 2
|
||
}
|
||
},
|
||
data: goTo.value,
|
||
silent: true
|
||
},
|
||
{
|
||
name: '今天',
|
||
type: 'line',
|
||
symbol: 'circle',
|
||
symbolSize: 0,
|
||
smooth: true,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 3
|
||
}
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: '#326ffd5f' // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#326ffd13' // 100% 处的颜色
|
||
}
|
||
],
|
||
global: false // 缺省为 false
|
||
}
|
||
},
|
||
data: goOut.value,
|
||
silent: true
|
||
},
|
||
{
|
||
type: 'line',
|
||
data: [],
|
||
markLine: {
|
||
symbol: 'none',
|
||
lineStyle: {
|
||
type: 'dashed'
|
||
},
|
||
data: [
|
||
[
|
||
{
|
||
xAxis: 0,
|
||
yAxis: 0
|
||
},
|
||
{
|
||
xAxis: 0,
|
||
yAxis: 0,
|
||
label: {
|
||
formatter: `{aa|${showoilGaugeLineLable.value}}`,
|
||
rich: {
|
||
aa: {
|
||
color: 'rgba(100, 108, 154, 0.6)',
|
||
fontSize: 12
|
||
}
|
||
}
|
||
}
|
||
}
|
||
],
|
||
[
|
||
{
|
||
xAxis: 0,
|
||
yAxis: 0
|
||
},
|
||
{
|
||
xAxis: 0,
|
||
yAxis: 0,
|
||
label: {
|
||
formatter: `{aaa|}`,
|
||
rich: {
|
||
aaa: {
|
||
color: 'rgba(100, 108, 154, 0.6)',
|
||
fontSize: 12
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
]
|
||
},
|
||
markPoint: {
|
||
data: [
|
||
{
|
||
coord: oilGaugeMarkPoint.value['goTo'],
|
||
symbol: 'circle',
|
||
symbolSize: 16,
|
||
label: {
|
||
formatter: '昨日',
|
||
color: 'rgba(100, 108, 154, 0.6)',
|
||
offset: [20, -10]
|
||
},
|
||
itemStyle: {
|
||
color: 'rgba(255, 255, 255, 0)'
|
||
}
|
||
},
|
||
{
|
||
coord: oilGaugeMarkPoint.value['goOut'],
|
||
symbol: 'circle',
|
||
symbolSize: 16,
|
||
label: {
|
||
formatter: '今日',
|
||
color: '#3571FE',
|
||
offset: [20, -10]
|
||
},
|
||
itemStyle: {
|
||
color: 'rgba(255, 255, 255, 0)',
|
||
silent: true
|
||
}
|
||
}
|
||
]
|
||
},
|
||
silent: true
|
||
}
|
||
]
|
||
})
|
||
const initConversion = (realtimeData) => {
|
||
if (!realtimeData) return
|
||
ConversionList.value.forEach((ele) => {
|
||
ele.nowNum = realtimeData[ele.titleCode].jr
|
||
ele.beforeNum = realtimeData[ele.titleCode].zr
|
||
realtimeData[ele.titleCode].flag == 1
|
||
? (defaultConversion.value = ele.titleCode)
|
||
: (defaultConversion.value = 'zfje')
|
||
})
|
||
|
||
realtimeData.data.forEach((ele) => {
|
||
goTo.value.push(ele.zr)
|
||
oilGaugeLineXAxis.value.push(ele.sj)
|
||
if (ele.jr) goOut.value.push(ele.jr)
|
||
})
|
||
|
||
let goOutLength = goOut.value.length - 1
|
||
let nowGoOut = goOut.value[goOutLength]
|
||
let nowGoTo = goTo.value[goOutLength]
|
||
|
||
nowGoOut < nowGoTo
|
||
? (showoilGaugeLineLable.value = '加把劲，就上去了...')
|
||
: (showoilGaugeLineLable.value = '')
|
||
const series2 = oilGauge_line_option.value.series[2]
|
||
|
||
series2.markLine.data[0][0].xAxis = goOutLength
|
||
series2.markLine.data[0][1].xAxis = goOutLength
|
||
series2.markLine.data[0][1].yAxis = nowGoOut
|
||
series2.markLine.data[0][1].label.formatter = `{aa|${showoilGaugeLineLable.value}}`
|
||
series2.markLine.data[1][1].label.formatter = `{aaa|更新时间：${realtimeData.gxsj}}`
|
||
series2.markLine.data[1][0].xAxis = goOutLength
|
||
series2.markLine.data[1][1].xAxis = goOutLength
|
||
series2.markLine.data[1][1].yAxis = nowGoOut + nowGoTo + 20
|
||
series2.markPoint.data[0].coord = oilGaugeMarkPoint.value.goTo
|
||
series2.markPoint.data[1].coord = oilGaugeMarkPoint.value.goOut
|
||
}
|
||
const clickSelectConversion = async (val) => {
|
||
let res = await getTableList('example_overview_realtime_data', { type: 3 })
|
||
goTo.value = []
|
||
goOut.value = []
|
||
oilGaugeLineXAxis.value = []
|
||
initConversion(res.records[0])
|
||
defaultConversion.value = val
|
||
}
|
||
|
||
const moreServicesList = ref([
|
||
{
|
||
imgUrl: '/img/gdfw.png',
|
||
title: '零售'
|
||
},
|
||
{
|
||
imgUrl: '/img/gdfw.png',
|
||
title: '教育'
|
||
},
|
||
{
|
||
imgUrl: '/img/gdfw.png',
|
||
title: '美业'
|
||
},
|
||
{
|
||
imgUrl: '/img/gdfw.png',
|
||
title: '某赞精选'
|
||
},
|
||
{
|
||
imgUrl: '/img/gdfw.png',
|
||
title: '我要推广'
|
||
}
|
||
])
|
||
|
||
const learningExchangeList = ref([
|
||
{
|
||
title: '商家论坛',
|
||
introduce: '百万商家互通互助',
|
||
imgUrl: '/img/xxjl.png'
|
||
},
|
||
{
|
||
title: '线下培训',
|
||
introduce: '点击查看全国活动',
|
||
imgUrl: '/img/xxjl.png'
|
||
},
|
||
{
|
||
title: '服务市场',
|
||
introduce: '服务商帮你经营',
|
||
imgUrl: '/img/xxjl.png'
|
||
},
|
||
{
|
||
title: '在线课堂',
|
||
introduce: '资深专家视频授课',
|
||
imgUrl: '/img/xxjl.png'
|
||
},
|
||
{
|
||
title: '本地商盟',
|
||
introduce: '加入本地商家联盟',
|
||
imgUrl: '/img/xxjl.png'
|
||
},
|
||
{
|
||
title: '定制服务',
|
||
introduce: '定制开发专享功能',
|
||
imgUrl: '/img/xxjl.png'
|
||
}
|
||
])
|
||
|
||
const rightList = ref<RightList[]>([
|
||
{
|
||
title: '规则中心',
|
||
h: '210'
|
||
},
|
||
{
|
||
title: '产品动态',
|
||
h: '240'
|
||
},
|
||
{
|
||
title: '学习中心',
|
||
h: '240'
|
||
}
|
||
])
|
||
|
||
// 广告区域
|
||
// const advertising = ref<string | Advertising[]>('广告banner')
|
||
const advertising = ref<string | Advertising[]>([{ imgUrl: '/img/sygl1.png' }])
|
||
const sjjysl = ref('')
|
||
|
||
const merchantIntroduction = ref<MerchantIntroduction[]>()
|
||
|
||
const jyjyList = ref([
|
||
{
|
||
imgUrl: '',
|
||
whiteImgUrl: '/img/whitelltz.png',
|
||
blackImgUrl: '/img/blacklltz.png',
|
||
title: '流量拓展',
|
||
introduction: '小程序分享至朋友圈'
|
||
},
|
||
{
|
||
imgUrl: '',
|
||
whiteImgUrl: '/img/whitehyzm.png',
|
||
blackImgUrl: '/img/blackhyzm.png',
|
||
title: '会员招募',
|
||
introduction: 'App端支持办理会员卡'
|
||
},
|
||
{
|
||
imgUrl: '',
|
||
whiteImgUrl: '/img/whitefyzd.png',
|
||
blackImgUrl: '/img/blackfyzd.png',
|
||
title: '费用账单',
|
||
introduction: '便捷管理店铺账目收支'
|
||
},
|
||
{
|
||
imgUrl: '',
|
||
whiteImgUrl: '/img/whitesptg.png',
|
||
blackImgUrl: '/img/blacksptg.png',
|
||
title: '商品推广',
|
||
introduction: '多平台推广商品类目信息'
|
||
}
|
||
])
|
||
|
||
const bzList = ref([
|
||
{
|
||
imgUrl: '/img/zxkf.png',
|
||
title: '在线客服',
|
||
introduction: '电话：057 - 8888 8888'
|
||
},
|
||
{
|
||
imgUrl: '/img/zmkf.png',
|
||
title: '桌面在线客服',
|
||
introduction: '即时应答客户在线咨询'
|
||
},
|
||
{
|
||
imgUrl: '/img/sjkf.png',
|
||
title: '移动客户端',
|
||
introduction: '使用手机、Pad管理店铺'
|
||
}
|
||
])
|
||
|
||
const znzsType = ref('hover')
|
||
const znzsMouseover = () => {
|
||
znzsType.value = 'hover'
|
||
}
|
||
const znzsMouseout = () => {
|
||
znzsType.value = 'nothover'
|
||
}
|
||
const activeName = ref('1')
|
||
const initZnzs = (data) => {
|
||
if (!data) return
|
||
znzsSeries.value = [data.dfhdd, data.dhfkf, data.yzxsp, data.dtkdd, data.pdzkh]
|
||
znzs_option.value.series.data = znzsSeries.value
|
||
}
|
||
// 点击智能助手tabs事件
|
||
const handleClick = async (tab: TabsPaneContext, event: Event) => {
|
||
let res = await getTableList('example_overview_intelligent_assistants', {
|
||
type: tab.props.name
|
||
})
|
||
initZnzs(res.records[0])
|
||
}
|
||
const znzsSeries = ref<number[]>([])
|
||
const znzs_option = ref({
|
||
grid: {
|
||
left: '0',
|
||
right: '0',
|
||
bottom: '20%',
|
||
top: '12%'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: ['待发货订单', '待回复客服', '已滞销商品', '待退款订单', '排队中客户'],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'white'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#C7CCD0', // x轴颜色
|
||
fontWeight: 'lighter',
|
||
fontSize: '9',
|
||
width: 30,
|
||
lineHeight: 13,
|
||
overflow: 'break'
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
},
|
||
yAxis: [
|
||
{
|
||
show: false,
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
}
|
||
],
|
||
series: {
|
||
name: '系列一',
|
||
type: 'bar',
|
||
barWidth: '16',
|
||
itemStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: '#7523FD' },
|
||
{ offset: 1, color: '#356DFF' }
|
||
]
|
||
},
|
||
borderRadius: 2
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
color: 'black',
|
||
fontSize: 12
|
||
},
|
||
data: znzsSeries.value
|
||
}
|
||
})
|
||
|
||
const animationList = ref<number[]>([])
|
||
const overviewPendingLen = ref(0)
|
||
const znzsIntroduce = ref<ZnzsIntroduce[]>([])
|
||
const numTop = ref('')
|
||
|
||
const fwtzList = ref<FwtzList[]>([])
|
||
|
||
const markData = oilGauge_line_option.value.series[2].markLine
|
||
const markPoint = oilGauge_line_option.value.series[2].markPoint
|
||
|
||
const switchMode = () => {
|
||
// 判断是否为暗色模式
|
||
const { wsCache } = useCache()
|
||
if (wsCache.get(CACHE_KEY.IS_DARK)) {
|
||
document.documentElement.style.setProperty('--tabs-item-color', 'white')
|
||
znzs_option.value.series.label.show = false
|
||
znzs_option.value.xAxis.axisLabel.color = 'white'
|
||
znzs_option.value.xAxis.axisLine.lineStyle.color = '#1A2744'
|
||
|
||
jyjyList.value.forEach((ele) => {
|
||
ele.imgUrl = ele.blackImgUrl
|
||
})
|
||
|
||
oilGauge_line_option.value.color = ['#848C9B', '#3571FE']
|
||
if (markData) {
|
||
markData.data[0][1].label.rich.aa.color = 'white'
|
||
markData.data[1][1].label.rich.aaa.color = 'white'
|
||
}
|
||
if (markPoint) {
|
||
markPoint.data[0].label.color = 'white'
|
||
markPoint.data[1].label.color = 'white'
|
||
}
|
||
} else {
|
||
jyjyList.value.forEach((ele) => {
|
||
ele.imgUrl = ele.whiteImgUrl
|
||
})
|
||
}
|
||
}
|
||
|
||
watch(
|
||
() => appStore.isDark,
|
||
(val) => {
|
||
if (val) {
|
||
document.documentElement.style.setProperty('--tabs-item-color', 'white')
|
||
znzs_option.value.series.label.show = false
|
||
znzs_option.value.xAxis.axisLabel.color = 'white'
|
||
znzs_option.value.xAxis.axisLine.lineStyle.color = '#1A2744'
|
||
jyjyList.value.forEach((ele) => {
|
||
ele.imgUrl = ele.blackImgUrl
|
||
})
|
||
oilGauge_line_option.value.color = ['#848C9B', '#3571FE']
|
||
if (markData) {
|
||
markData.data[0][1].label.rich.aa.color = 'white'
|
||
markData.data[1][1].label.rich.aaa.color = 'white'
|
||
}
|
||
if (markPoint) {
|
||
markPoint.data[0].label.color = 'white'
|
||
markPoint.data[1].label.color = 'white'
|
||
}
|
||
// 暗色
|
||
} else {
|
||
document.documentElement.style.setProperty('--tabs-item-color', 'rgb(100 108 154 / 60%)')
|
||
znzs_option.value.series.label.show = true
|
||
znzs_option.value.xAxis.axisLabel.color = '#C7CCD0'
|
||
znzs_option.value.xAxis.axisLine.lineStyle.color = 'white'
|
||
jyjyList.value.forEach((ele) => {
|
||
ele.imgUrl = ele.whiteImgUrl
|
||
})
|
||
oilGauge_line_option.value.color = ['#F2F4F5', '#3571FE']
|
||
if (markData) {
|
||
markData.data[0][1].label.rich.aa.color = 'rgba(100, 108, 154, 0.6)'
|
||
markData.data[1][1].label.rich.aaa.color = 'rgba(100, 108, 154, 0.6)'
|
||
}
|
||
if (markPoint) {
|
||
markPoint.data[0].label.color = 'rgba(100, 108, 154, 0.6)'
|
||
markPoint.data[1].label.color = 'rgba(100, 108, 154, 0.6)'
|
||
}
|
||
}
|
||
}
|
||
)
|
||
|
||
// 侦听是否为全屏，如果是就准备全屏需要echarts的变量
|
||
watch(
|
||
() => isFullscreen.value,
|
||
(val) => {
|
||
if (val) {
|
||
if (!oilGauge_app_option.value) {
|
||
oilGauge_app_option.value = cloneDeep(oilGauge_option.value)
|
||
oilGauge_app_option.value.title[0].textStyle.rich.primary.fontSize = 24
|
||
oilGauge_app_option.value.title[0].textStyle.rich.point.padding = [5, -2, 0, -3]
|
||
oilGauge_app_option.value.series[0].radius = '100%'
|
||
oilGauge_app_option.value.series[0].splitLine.length = 15
|
||
oilGauge_app_option.value.series[0].splitLine.lineStyle.width = 2
|
||
oilGauge_app_option.value.series[0].pointer.length = '52%'
|
||
oilGauge_app_option.value.series[0].pointer.offsetCenter = [0, -15]
|
||
oilGauge_app_option.value.series[0].pointer.width = 3
|
||
}
|
||
}
|
||
},
|
||
{ immediate: true }
|
||
)
|
||
|
||
const init = async () => {
|
||
let oneres = await batchGetTableList(
|
||
'example_overview_conversion,example_overview_merchant,example_overview_merchant_cou,example_overview_realtime_data,example_overview_intelligent_assistants,example_overview_pending,example_overview_service_notices'
|
||
)
|
||
|
||
conversion.value = oneres.example_overview_conversion.records[0]
|
||
oilGaugeValue.value = oneres.example_overview_conversion.records[0]?.fwzfzhl
|
||
merchantIntroduction.value = oneres.example_overview_merchant.records
|
||
sjjysl.value = oneres.example_overview_merchant_cou.records[0]?.cou
|
||
let realtimeData = oneres.example_overview_realtime_data.records[0]
|
||
let intelligentAssistants = oneres.example_overview_intelligent_assistants.records[0]
|
||
let overviewPending = oneres.example_overview_pending.records
|
||
initConversion(realtimeData)
|
||
initZnzs(intelligentAssistants)
|
||
numTop.value = '-' + overviewPending.length * 60 + 'px'
|
||
for (let i = 1; i <= overviewPending.length; i++) {
|
||
animationList.value.push(i)
|
||
}
|
||
animationList.value.reverse()
|
||
if (overviewPending.length > 3) {
|
||
overviewPendingLen.value = overviewPending.length - 3
|
||
}
|
||
znzsIntroduce.value = overviewPending.slice(0, 3)
|
||
fwtzList.value = oneres.example_overview_service_notices.records
|
||
|
||
let endres = await batchGetTableList(
|
||
'example_overview_rulescenter,example_overview_productnews,example_overview_learningcenter'
|
||
)
|
||
let rulescenter = endres.example_overview_rulescenter.records
|
||
let productnews = endres.example_overview_productnews.records
|
||
let learningcenter = endres.example_overview_learningcenter.records
|
||
rightList.value[0].content = rulescenter
|
||
rightList.value[0].totalTitle = '共计' + rulescenter.length + '条信息'
|
||
rightList.value[1].content = productnews
|
||
rightList.value[1].totalTitle = '共计' + productnews.length + '条信息'
|
||
rightList.value[2].content = learningcenter
|
||
rightList.value[2].totalTitle = '共计' + learningcenter.length + '条信息'
|
||
}
|
||
|
||
onMounted(() => {
|
||
switchMode()
|
||
init()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.shouye {
|
||
display: flex;
|
||
justify-content: center; /* 水平居中 */
|
||
align-items: center; /* 垂直居中 */
|
||
height: 300px; /* 父容器必须有高度（否则无法垂直居中） */
|
||
}
|
||
.shouye img {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
margin-top: 20%;
|
||
}
|
||
|
||
@keyframes slideBorder {
|
||
from {
|
||
width: 0;
|
||
transform: translateX(-100%);
|
||
}
|
||
|
||
to {
|
||
width: 15px;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
@keyframes znzsHoverAnimation {
|
||
from {
|
||
top: 0;
|
||
}
|
||
|
||
to {
|
||
top: v-bind('numTop');
|
||
}
|
||
}
|
||
|
||
@keyframes znzsNotHoverAnimation {
|
||
from {
|
||
top: -700px;
|
||
}
|
||
|
||
to {
|
||
top: 0;
|
||
}
|
||
}
|
||
|
||
@keyframes znzsBgHoverAnimation {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.pointer {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.big-radius {
|
||
border-radius: 15px;
|
||
}
|
||
|
||
.small-radius {
|
||
border-radius: 7px;
|
||
}
|
||
|
||
.nowrap {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.demonstration {
|
||
color: var(--el-text-color-secondary);
|
||
}
|
||
|
||
.el-carousel__item h3 {
|
||
margin: 0;
|
||
line-height: 150px;
|
||
color: #475669;
|
||
text-align: center;
|
||
opacity: 0.75;
|
||
}
|
||
|
||
.el-carousel__item:nth-child(2n) {
|
||
background-color: #99a9bf;
|
||
}
|
||
|
||
.el-carousel__item:nth-child(2n + 1) {
|
||
background-color: #d3dce6;
|
||
}
|
||
|
||
.text-white {
|
||
color: white;
|
||
}
|
||
|
||
.arrow-top {
|
||
width: 14px;
|
||
height: 14px;
|
||
background-color: #f2637b;
|
||
border-radius: 5px;
|
||
align-items: self-end;
|
||
|
||
.el-icon {
|
||
transform: scale(0.8);
|
||
}
|
||
}
|
||
|
||
.arrow-bottom {
|
||
width: 14px;
|
||
height: 14px;
|
||
background-color: #1dc9b7;
|
||
border-radius: 5px;
|
||
|
||
.el-icon {
|
||
transform: scale(0.8);
|
||
}
|
||
}
|
||
|
||
.active-conversion {
|
||
position: relative;
|
||
font-weight: bold;
|
||
color: rgb(51 112 255);
|
||
|
||
&::before {
|
||
position: absolute;
|
||
bottom: -5px;
|
||
left: 50%;
|
||
height: 2px;
|
||
background-color: #3370ff;
|
||
content: '';
|
||
animation: slideBorder 0.3s forwards;
|
||
}
|
||
}
|
||
|
||
.oilGauge_line {
|
||
position: relative;
|
||
width: calc(55% - 11px);
|
||
border-left: 1px solid #e6ebf2;
|
||
|
||
.oilGauge_line_echart {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.div_to_ul {
|
||
position: relative;
|
||
|
||
span:hover {
|
||
color: rgb(88 103 221);
|
||
}
|
||
|
||
&::before {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: -12px;
|
||
width: 5px;
|
||
height: 5px;
|
||
background-color: black;
|
||
border-radius: 50%;
|
||
content: '';
|
||
transform: translate(0, -50%);
|
||
}
|
||
}
|
||
|
||
.blue_box_shadow {
|
||
box-shadow: 0 3px 20px rgb(51 112 255 / 29.8%);
|
||
}
|
||
|
||
.animation-box {
|
||
position: relative;
|
||
|
||
.znzs-one {
|
||
border-radius: 50%;
|
||
|
||
&.hover {
|
||
animation: znzsBgHoverAnimation 3s forwards;
|
||
}
|
||
}
|
||
|
||
.znzs-two {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
border-radius: 50%;
|
||
transform: translate(-50%, -50%);
|
||
|
||
&.hover {
|
||
animation: znzsBgHoverAnimation 2s forwards;
|
||
}
|
||
}
|
||
|
||
.znzs-three {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
background-image: url('http://oss.yckxt.com/chatgpt/upload/1/2024-10-11/1/u19654.png');
|
||
background-size: 100%;
|
||
border-radius: 50%;
|
||
transform: translate(-50%, -50%);
|
||
|
||
&.hover {
|
||
animation: znzsBgHoverAnimation 1s forwards;
|
||
}
|
||
}
|
||
|
||
.znzs-four {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
background-image: url('http://oss.yckxt.com/chatgpt/upload/1/2024-10-11/1/u19655_2.png');
|
||
background-size: 100%;
|
||
border-radius: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.znzs-xdcl {
|
||
position: absolute;
|
||
top: 70%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.znzs-ck {
|
||
position: absolute;
|
||
top: 47%;
|
||
left: 50%;
|
||
overflow: hidden;
|
||
transform: translate(-50%, -50%);
|
||
|
||
.znzs-sz {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
|
||
&:hover {
|
||
animation: znzsHoverAnimation 0.5s forwards;
|
||
}
|
||
}
|
||
|
||
.znzs-sz.nothover {
|
||
animation: znzsNotHoverAnimation 0.5s forwards;
|
||
}
|
||
}
|
||
}
|
||
|
||
.znzs-tabs {
|
||
position: relative;
|
||
|
||
.tabs-position-icon {
|
||
position: absolute;
|
||
top: 22px;
|
||
right: 0;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
|
||
::v-deep(.el-tabs) {
|
||
.el-tabs__header {
|
||
margin-bottom: 0;
|
||
|
||
.el-tabs__nav-wrap {
|
||
.el-tabs__nav-scroll {
|
||
.el-tabs__active-bar {
|
||
background-color: #3370ff;
|
||
transform: translateX(5px);
|
||
}
|
||
|
||
.el-tabs__item {
|
||
$tabsItemColor: var(--tabs-item-color, rgb(100 108 154 / 60%));
|
||
|
||
padding: 0 5px;
|
||
font-size: 13px;
|
||
color: $tabsItemColor;
|
||
|
||
&:hover {
|
||
color: rgb(51 112 255);
|
||
}
|
||
|
||
&.is-active {
|
||
font-weight: bold;
|
||
color: #3370ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
&::after {
|
||
height: 0;
|
||
// color:#326ffd13
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|