1461 lines
49 KiB
Vue
1461 lines
49 KiB
Vue
<template>
|
||
<scroll-view class="main" scroll-y="true">
|
||
<!-- <div style="position: fixed;right: 0;top: 20%;z-index:99999999999">-->
|
||
<!-- <commercial-type :have="2"/>-->
|
||
<!-- </div>-->
|
||
<header-top ref="headerTop" :bgUrl="bgUrl" :menu="menu" :bgColor="bgColor" :title="title" :analyseInfo="analyseInfo"
|
||
:topBg="topBg" :page="page" :backType="backType" :serverpartName="serviceInfo.SERVERPART_NAME"
|
||
:spregionTypeName="serviceInfo.SPREGIONTYPE_NAME" :serviceInfo="serviceInfo" :topLeftBg="topLeftBg"
|
||
:topLeftColor="topLeftColor" :iconObj="iconObj" :haveIconObj="haveIconObj" :detailBoxBg="detailBoxBg"
|
||
:haveFun="haveFun" :serviceTypeObj="serviceTypeObj" :serviceInfoObj="serviceInfoObj" :pageType="pageType"
|
||
:pageIndex="3" :headerBg="'linear-gradient( #a28ec3 0%, #ffffff 100%)'" />
|
||
<div class="charts"
|
||
:style="{ paddingTop: serviceInfo.SERVERPART_NAME === '安徽驿达' ? menu.bottom + 62 + 14 + 'px' : '' }">
|
||
<div class="chartsItem">
|
||
<view class="titleTop" style="justify-content: space-between">
|
||
<p class="title">营收分析</p>
|
||
<!-- <text>{{ time ? $util.getThisMonthHaveHeng(time) : '' }}</text> -->
|
||
|
||
<div class="time">
|
||
<div class="select">
|
||
<picker mode="date" fields="month" :value="single" :start="startTime" :end="endData"
|
||
@change="bindDateChange">
|
||
<view class="time">
|
||
<view class="uni-input" style="background: transparent;padding: 0;height:100%">{{ single }}</view>
|
||
<image class="icon"
|
||
src="https://eshangtech.com/ShopICO/ahyd-BID/index/arrow_bottom_managePortrait.svg"></image>
|
||
</view>
|
||
</picker>
|
||
</div>
|
||
</div>
|
||
|
||
</view>
|
||
<!-- <span class="dateText">{{lastDay}}</span>-->
|
||
<revenue-analysis :data="monthDetail" />
|
||
</div>
|
||
|
||
<div class="chartsItem" style="margin-top: 32px">
|
||
<div class="titleTop">
|
||
<p class="title">本月自营计划</p>
|
||
<div class="question" @click.stop="handleShowNotice">
|
||
<image src="https://eshangtech.com/ShopICO/ahyd-BID/index/noticeQuestion.svg"></image>
|
||
</div>
|
||
<div v-if="showNotice" class="titleTopNotice">{{ monthNoticeText }}</div>
|
||
<div v-if="showNotice" class="meng" @click.stop="handleNoShowNotice"></div>
|
||
</div>
|
||
<view class="box" @click="handleGoServiceInfo('month')">
|
||
<view class="top">
|
||
<view class="big">
|
||
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/thisMonth.svg"></image>
|
||
</view>
|
||
<view class="text">
|
||
<view class="textTop">
|
||
<view class="left">
|
||
<p class="number">{{ plan.percentageMonth ? plan.percentageMonth + '%' : '-' }}</p>
|
||
<p v-if="plan.percentageMonth >= 100" class="desc">
|
||
<image class="success" src="https://eshangtech.com/ShopICO/ahyd-BID/index/successMonth.svg"></image>
|
||
</p>
|
||
</view>
|
||
<view class="right">
|
||
<text class="comparePlan">比计划： </text>
|
||
<view class="box2">
|
||
<image class="addIcon"
|
||
:src="plan.MonthGrowth_Rate > 0 ? 'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg' : 'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'">
|
||
</image>
|
||
<p class="text">{{ monthAdd ? monthAdd + '%' : '-' }}</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<div class="progressPlan">
|
||
<div class="trans" :style="{ width: `${plan.percentageMonth >= 100 ? 100 : plan.percentageMonth}%` }">
|
||
</div>
|
||
<!-- <div class=pro :style="{width:(100 - plan.percentageMonth)+ '%'}"></div>-->
|
||
<!-- <view class="trans" :style="{width: plan.percentageMonth + '%'}"></view>-->
|
||
<!-- <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/index/progress_orange.png"></image>-->
|
||
<!-- <div class=pro :style="{width:(100 - plan.percentageMonth)+ '%'}"></div>-->
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="success" style="margin-right: 39px">
|
||
<p class="text">本月已完成<text class="unit">/元</text></p>
|
||
<p class="money">{{ plan.RevenueMonth_Amount ? plan.RevenueMonth_Amount : '-' }}</p>
|
||
</view>
|
||
<view class="success">
|
||
<p class="text">本月计划<text class="unit">/元</text></p>
|
||
<p class="money">{{ plan.BudgetMonth_Amount ? plan.BudgetMonth_Amount : '-' }}</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</div>
|
||
<div class="chartsItem" style="margin-top: 32px">
|
||
<div class="titleTop">
|
||
<p class="title">年度自营计划</p>
|
||
<div class="question" @click.stop="handleShowNoticeYear">
|
||
<image src="https://eshangtech.com/ShopICO/ahyd-BID/index/noticeQuestion.svg"></image>
|
||
</div>
|
||
<div v-if="showNoticeYear" class="titleTopNotice">{{ yearNoticeText }}</div>
|
||
<div v-if="showNoticeYear" class="meng" @click.stop="handleNoShowNoticeYear"></div>
|
||
</div>
|
||
<view class="box" @click="handleGoServiceInfo('year')">
|
||
<view class="top">
|
||
<view class="big">
|
||
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/index/planYear.svg"></image>
|
||
</view>
|
||
<view class="text">
|
||
<view class="textTop">
|
||
<view class="left">
|
||
<p class="number">{{ plan.percentageYear ? plan.percentageYear + '%' : '-' }}</p>
|
||
<p v-if="plan.percentageYear >= 100" class="desc" style="color: #4E68FF">
|
||
<image class="success" src="https://eshangtech.com/ShopICO/ahyd-BID/index/yearSuccess.svg"></image>
|
||
</p>
|
||
</view>
|
||
<view class="right">
|
||
<text class="comparePlan">比计划： </text>
|
||
<div class="box2">
|
||
<image class="addIcon"
|
||
:src="plan.YearGrowth_Rate > 0 ? 'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg' : 'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'">
|
||
</image>
|
||
<p class="text">{{ yearAdd ? yearAdd + '%' : '' }}</p>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<div class="progressPlan">
|
||
<div class="transYear" :style="{ width: `${plan.percentageYear >= 100 ? 100 : plan.percentageYear}%` }">
|
||
</div>
|
||
<!-- <image class="img" :style="{width: plan.percentageYear + '%'}" src="https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png"></image>-->
|
||
<!-- <div class=pro :style="{width:(100 - plan.percentageYear)+ '%'}"></div>-->
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="success" style="margin-right: 39px">
|
||
<p class="text">年度已完成<text class="unit">/元</text></p>
|
||
<p class="money">{{ plan.RevenueYear_Amount ? plan.RevenueYear_Amount : '-' }}</p>
|
||
</view>
|
||
<view class="success">
|
||
<p class="text">年度计划<text class="unit">/元</text></p>
|
||
<p class="money">{{ plan.BudgetYear_Amount ? plan.BudgetYear_Amount : '-' }}</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</div>
|
||
|
||
<!-- <div class="chartsItem" style="margin-top: 32px">-->
|
||
<!-- <p class="title">客流客单交易</p>-->
|
||
<!-- <contract-guarantee :data="orderTransaction"/>-->
|
||
<!-- </div>-->
|
||
<div class="chartsItem" style="margin-top: 32px">
|
||
<p class="title">同比分析</p>
|
||
<view class="tab">
|
||
<view v-for="(item, index) in tabList" :key="index"
|
||
:class="selectTab === item.value ? 'tabItem tabItemActive' : 'tabItem'"
|
||
@click="handleChangeTab(item.value)">
|
||
{{ item.name }}</view>
|
||
</view>
|
||
<div class="subItem">
|
||
<p class="title">{{ selectTab === 0 ? '营收同比' : selectTab === 1 ? '客单同比' : selectTab === 2 ? '均价同比' : '' }}</p>
|
||
<div class="money">
|
||
<div class="top">
|
||
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/blueMoney.svg"></image>
|
||
<p class="sumMoney">{{ revenue.data ? revenue.data : '-' }}</p>
|
||
</div>
|
||
<div class="bottom">
|
||
<image class="icon"
|
||
:src="revenue.add > 0 ? 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/addArrow.svg' : revenue.add < 0 ? 'https://eshangtech.com/ShopICO/ahyd-BID/commercial/decline.svg' : ''">
|
||
</image>
|
||
<p class="add">{{ revenue.add ? revenue.add + '%' : '-' }}</p>
|
||
<p class="text">(相比去年同日)</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="subItem" style="height: 230px;margin-top: 20px;">
|
||
<div style="margin-bottom: 30px;display: flex;align-items: center;justify-content: space-between">
|
||
<p class="title">{{ selectTab === 0 ? '营收特征分析' : selectTab === 1 ? '客单对比' : selectTab === 2 ? '均价对比' : '' }}
|
||
</p>
|
||
<text v-if="selectTab === 0" style="margin-top: 12px">单位: 万元</text>
|
||
<text v-if="selectTab === 1" style="margin-top: 12px">单位: 笔</text>
|
||
<text v-if="selectTab === 2" style="margin-top: 12px">单位: 元</text>
|
||
</div>
|
||
<div>
|
||
<money-compare :data="moneyCompareList" />
|
||
</div>
|
||
<!-- <no-data v-else/>-->
|
||
</div>
|
||
<div class="subItem" style="height: 230px;margin-top: 20px;">
|
||
<div style="margin-bottom: 30px;display: flex;align-items: center;justify-content: space-between">
|
||
<p class="title">营收同比分析</p>
|
||
<text style="margin-top: 12px">单位: 万元</text>
|
||
</div>
|
||
<div>
|
||
<revenue-trends :data="trendsList" />
|
||
</div>
|
||
<!-- <no-data/>-->
|
||
</div>
|
||
<analyse
|
||
:analyseInfo="{ analysisins_type: selectTab === 0 ? 1305 : selectTab === 1 ? 1306 : selectTab === 2 ? 1307 : '', analysisins_format: 2000 }" />
|
||
</div>
|
||
<div class="chartsItem" style="margin-top: 32px">
|
||
<p class="title">营收类型比例</p>
|
||
<div class="progress">
|
||
<div class="top">
|
||
<div class="left">
|
||
<text class="title">自营</text>
|
||
<text class="value" style="margin-left: 4px">{{ revenueType.own ? revenueType.own : '' }}%</text>
|
||
</div>
|
||
<div class="right">
|
||
<text class="value">{{ revenueType.ectocyst ? revenueType.ectocyst : '' }}%</text>
|
||
<text class="title" style="margin-left: 4px">外包</text>
|
||
</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<div class="first" :style="{ width: revenueType.own + '%' }"></div>
|
||
<div class="second" :style="{ width: revenueType.ectocyst + '%' }"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chartsItem" style="margin-top: 32px">
|
||
<p class="title">合同保底</p>
|
||
<contract-guarantee :data="contractList" />
|
||
</div>
|
||
|
||
</div>
|
||
</scroll-view>
|
||
</template>
|
||
|
||
<script>
|
||
import headerTop from "./components/headerTop.vue";
|
||
import RevenueAnalysis from "./components/manager/revenueAnalysis.vue";
|
||
import ContractGuarantee from "./components/manager/contractGuarantee.vue";
|
||
import MoneyCompare from "./components/manager/moneyCompare.vue";
|
||
import analyse from "./components/analyse.vue";
|
||
import RevenueTrends from "./components/manager/revenueTrends.vue";
|
||
import request from '@/util/index.js'
|
||
import NoData from "./components/noData.vue";
|
||
import { getFieldEnum, timestampToTimeMonth } from "../../../util/dateTime/index";
|
||
import SliderPage from "./components/sliderPage.vue";
|
||
|
||
export default {
|
||
name: "businessPortrait",
|
||
components: {
|
||
SliderPage,
|
||
NoData, RevenueTrends, MoneyCompare, ContractGuarantee, RevenueAnalysis, headerTop, analyse
|
||
},
|
||
data() {
|
||
return {
|
||
topBg: 'linear-gradient(180deg, #D9CCEF 0%, #DED3F2 100%);',
|
||
labelList: ['女性', '高消费', '喜爱奶茶', '浙江', '20-30岁', '江苏'],//标签
|
||
tabList: [{ name: '营收金额', value: 0 }, { name: '客单量', value: 1 }, { name: '客单均价', value: 2 }],//选项卡列表
|
||
selectTab: 0,//当前选中
|
||
title: '经营画像',//页面标题
|
||
bgColor: '180deg, #996CFF 0%, #5D43F8 100%',
|
||
bgUrl: 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/managePortraitBg.svg',//背景图片路径
|
||
page: '/pages/commercialBI/managePortrait',
|
||
|
||
pageType: 2000,
|
||
detailBoxBg: 'linear-gradient(136deg, #F3EFFE 0%, #FFFFFF 100%);',
|
||
topLeftBg: 'linear-gradient(180deg, rgba(153, 108, 255, 0.2) 0%, rgba(93, 67, 248, 0.2) 100%)',// 类别背景
|
||
topLeftColor: '#6347F9',// 类别文字颜色
|
||
iconObj: {
|
||
car: 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carPortrait.svg',
|
||
charge: 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/chargePortraitBg.svg',
|
||
bady: 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/babyPortrait.svg',
|
||
guestRoom: 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/guestRoomPortrait.svg'
|
||
},
|
||
haveIconObj: {
|
||
have: 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/havePortrait.svg',
|
||
noHave: 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/noHavePortrait.svg'
|
||
},
|
||
time: '',//跳转携带的时间
|
||
menu: {},//手机配置信息
|
||
revenueList: [],//营收分析
|
||
contractList: {},//合同保底
|
||
orderTransaction: {},//客流客单交易
|
||
revenueAll: [],//三组的营收信息
|
||
revenue: {},//营收信息
|
||
moneyCompareList: {},//营收对比
|
||
trendsList: {},//营收趋势
|
||
revenueType: {},//营收占比
|
||
plan: {},//月度和年度接口的返回参数 一起的
|
||
monthAdd: '',//月每天的相对增加
|
||
yearAdd: '', // 年度计划增加的百分比
|
||
showNotice: false,
|
||
showNoticeYear: false,
|
||
serviceInfo: {}, //当前服务区信息
|
||
backType: '',//返回的页面类型
|
||
analyseInfo: {
|
||
analysisins_type: 1301
|
||
},
|
||
monthNoticeText: '',
|
||
yearNoticeText: '',
|
||
lastDay: '',
|
||
month: '',
|
||
haveFun: {},
|
||
monthDetail: {},// 月度汇总信息 头部的内容
|
||
serviceTypeObj: {},// 服务区类型对象
|
||
serviceInfoObj: {},
|
||
|
||
single: '',//显示时间
|
||
endData: '', // 结束时间
|
||
startTime: '2023-01',// 开始时间
|
||
}
|
||
},
|
||
props: {
|
||
selectIndex: {
|
||
type: Number,
|
||
default: 0
|
||
}
|
||
},
|
||
watch: {
|
||
selectIndex: {
|
||
handler(value) {
|
||
if (value === 3) {
|
||
this.handleGetPageData()
|
||
}
|
||
},
|
||
immediate: true
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
// if (option.serviceInfo){
|
||
// this.serviceInfo = JSON.parse(option.serviceInfo)
|
||
// }
|
||
// this.backType = option.type
|
||
// //跳转的时候带上时间
|
||
// this.time = option.time
|
||
// // 服务区类型枚举
|
||
// this.handleServiceType()
|
||
},
|
||
onShow() {
|
||
// this.monthDetail = undefined
|
||
// let storeTime = uni.getStorageSync('lastDay')
|
||
// this.lastDay = uni.getStorageSync('lastDay')
|
||
// if (storeTime){
|
||
// this.time = storeTime
|
||
// }
|
||
// let date = new Date(this.time)
|
||
// let m = date.getMonth() + 1
|
||
// if (m<10){
|
||
// m = '0' + m
|
||
// }
|
||
// this.month = m
|
||
// let storeServiceInfo = uni.getStorageSync('currentService')
|
||
// if (storeServiceInfo){
|
||
// this.serviceInfo = storeServiceInfo
|
||
// }
|
||
// // 获取手机参数对页面进行适配
|
||
// let systemInfo = uni.getSystemInfoSync()
|
||
// // 把获取到的手机参数保存
|
||
// uni.setStorageSync('phoneInfo', systemInfo)
|
||
// this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||
// this.menu = uni.getMenuButtonBoundingClientRect()
|
||
// if (!storeServiceInfo){
|
||
// this.nearestService()
|
||
// }
|
||
// //营收分析
|
||
// this.getRevenueList()
|
||
// //客流客单交易
|
||
// // this.getOrderTransaction()
|
||
// //营收对比
|
||
// this.getMoneyCompareList()
|
||
// //营收趋势
|
||
// this.getTrendsList()
|
||
// //营收占比
|
||
// this.getRevenueType()
|
||
// //月度计划、年度计划
|
||
// this.monthYearPlan()
|
||
// //问号显示的内容
|
||
// this.handleNoticeMonth()
|
||
// this.handleNoticeYear()
|
||
// // 服务区基本信息
|
||
// this.getServiceInfo()
|
||
// // 月度汇总信息
|
||
// this.getSummaryMonth()
|
||
// this.handleChangeCurrent()
|
||
},
|
||
onUnload() {
|
||
this.$util.addUserBehavior()
|
||
},
|
||
methods: {
|
||
timestampToTimeMonth,
|
||
// 修改时间
|
||
bindDateChange(e) {
|
||
const date = new Date(e.detail.value)
|
||
const nowDate = new Date()
|
||
let y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
let nowYear = nowDate.getFullYear()
|
||
let nowMonth = nowDate.getMonth() + 1
|
||
if (nowYear === y && nowMonth === m) {
|
||
let d = nowDate.getDate() - 1
|
||
this.time = `${nowYear}-${nowMonth}-${d}`
|
||
} else {
|
||
let d = this.$util.getThisMonthDay(`${y}-${m}`)
|
||
this.time = `${y}-${m}-${d}`
|
||
}
|
||
this.single = this.$util.getThisMonthHave(this.time)
|
||
this.onRefresh()
|
||
},
|
||
// 拿到页面数据
|
||
handleGetPageData() {
|
||
// 服务区类型枚举
|
||
this.handleServiceType()
|
||
this.monthDetail = undefined
|
||
let storeTime = uni.getStorageSync('lastDay')
|
||
this.lastDay = uni.getStorageSync('lastDay')
|
||
if (storeTime) {
|
||
this.time = storeTime
|
||
}
|
||
this.single = this.$util.getThisMonthHave(this.time)
|
||
this.endData = uni.getStorageSync('lastDay')
|
||
let date = new Date(this.time)
|
||
let m = date.getMonth() + 1
|
||
if (m < 10) {
|
||
m = '0' + m
|
||
}
|
||
this.month = m
|
||
let storeServiceInfo = uni.getStorageSync('currentService')
|
||
if (storeServiceInfo) {
|
||
this.serviceInfo = storeServiceInfo
|
||
}
|
||
// 获取手机参数对页面进行适配
|
||
let systemInfo = uni.getSystemInfoSync()
|
||
// 把获取到的手机参数保存
|
||
uni.setStorageSync('phoneInfo', systemInfo)
|
||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||
if (!storeServiceInfo) {
|
||
this.nearestService()
|
||
}
|
||
//营收分析
|
||
this.getRevenueList()
|
||
//客流客单交易
|
||
// this.getOrderTransaction()
|
||
//营收对比
|
||
this.getMoneyCompareList()
|
||
//营收趋势
|
||
this.getTrendsList()
|
||
//营收占比
|
||
this.getRevenueType()
|
||
//月度计划、年度计划
|
||
this.monthYearPlan()
|
||
//问号显示的内容
|
||
this.handleNoticeMonth()
|
||
this.handleNoticeYear()
|
||
// 服务区基本信息
|
||
this.getServiceInfo()
|
||
// 月度汇总信息
|
||
this.getSummaryMonth()
|
||
this.handleChangeCurrent()
|
||
},
|
||
onRefresh() {
|
||
//营收分析
|
||
this.getRevenueList()
|
||
//客流客单交易
|
||
// this.getOrderTransaction()
|
||
//营收对比
|
||
this.getMoneyCompareList()
|
||
//营收趋势
|
||
this.getTrendsList()
|
||
//营收占比
|
||
this.getRevenueType()
|
||
//月度计划、年度计划
|
||
this.monthYearPlan()
|
||
//问号显示的内容
|
||
this.handleNoticeMonth()
|
||
this.handleNoticeYear()
|
||
// 服务区基本信息
|
||
this.getServiceInfo()
|
||
// 月度汇总信息
|
||
this.getSummaryMonth()
|
||
this.handleChangeCurrent()
|
||
},
|
||
handleChangeCurrent() {
|
||
this.$refs.headerTop.handleChangeCurrent()
|
||
},
|
||
// 枚举服务区类型 SERVERPART_TYPE
|
||
async handleServiceType() {
|
||
const data = await getFieldEnum({ FieldExplainField: 'SERVERPART_TYPE' });
|
||
let obj = {}
|
||
data.forEach(item => {
|
||
obj[Number(item.value)] = item.label
|
||
})
|
||
this.serviceTypeObj = obj
|
||
},
|
||
//获取服务区基本信息
|
||
async getServiceInfo() {
|
||
let req = {
|
||
ServerpartId: this.serviceInfo.Serverpart_ID
|
||
}
|
||
const total = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo', req)
|
||
this.serviceInfoObj = total.Result_Data
|
||
this.haveFun = {
|
||
car: total.Result_Data.HASPILOTLOUNGE,
|
||
charge: total.Result_Data.HASCHARGE,
|
||
bady: total.Result_Data.HASMOTHER,
|
||
gusetHome: total.Result_Data.HASGUESTROOM
|
||
}
|
||
},
|
||
// 拿到服务区详情页需要的数据 然后带着跳转过去
|
||
handleGoServiceInfo(type) {
|
||
let serviceInfo = this.serviceInfo
|
||
|
||
let num = serviceInfo.SERVERPART_NAME.indexOf('服务区')
|
||
if (num !== -1) {
|
||
serviceInfo.name = serviceInfo.SERVERPART_NAME.slice(0, num)
|
||
serviceInfo.unit = serviceInfo.SERVERPART_NAME.slice(num, 100)
|
||
} else {
|
||
serviceInfo.name = serviceInfo.SERVERPART_NAME
|
||
}
|
||
if (type === 'month') {
|
||
let service = {
|
||
Budget_Amount: this.plan.BudgetMonth_Amount,
|
||
Budget_Degree: this.plan.MonthBudget_Degree,
|
||
Growth_Rate: this.plan.MonthGrowth_Rate,
|
||
Revenue_Amount: this.plan.RevenueMonth_Amount,
|
||
Serverpart_ID: serviceInfo.Serverpart_ID,
|
||
Serverpart_Name: serviceInfo.SERVERPART_NAME,
|
||
name: serviceInfo.name,
|
||
unit: serviceInfo.unit
|
||
}
|
||
const date = new Date(this.time)
|
||
let month = date.getMonth() + 1
|
||
if (this.serviceInfo.Serverpart_ID) {
|
||
uni.navigateTo({
|
||
url: `/pages/commercialBI/serviceDetail?serviceInfo=${JSON.stringify(service)}&month=${month}&type=month`
|
||
})
|
||
} else {
|
||
this.$util.toNextRoute('navigateTo', `/pages/commercialBI/planMonth?lastDay=${this.lastDay}&type=${type}`)
|
||
}
|
||
} else {
|
||
let service = {
|
||
Budget_Amount: this.plan.BudgetYear_Amount,
|
||
Budget_Degree: this.plan.YearBudget_Degree,
|
||
Growth_Rate: this.yearAdd,
|
||
Revenue_Amount: this.plan.RevenueYear_Amount,
|
||
Serverpart_ID: serviceInfo.Serverpart_ID,
|
||
Serverpart_Name: serviceInfo.SERVERPART_NAME,
|
||
name: serviceInfo.name,
|
||
unit: serviceInfo.unit
|
||
}
|
||
if (this.serviceInfo.Serverpart_ID) {
|
||
uni.navigateTo({
|
||
url: `/pages/commercialBI/serviceDetail?serviceInfo=${JSON.stringify(service)}&type=year`
|
||
})
|
||
} else {
|
||
this.$util.toNextRoute('navigateTo', `/pages/commercialBI/planMonth?lastDay=${this.lastDay}&type=${type}`)
|
||
}
|
||
}
|
||
},
|
||
async handleNoticeMonth() {
|
||
let date = new Date(this.lastDay)
|
||
let y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
if (m < 10) {
|
||
m = '0' + m
|
||
}
|
||
//本月的
|
||
let req = {
|
||
SearchParameter: {
|
||
STATISTICS_DATE: `${y}-${m}`,
|
||
ANALYSISINS_TYPE: '1011',
|
||
ANALYSISINS_FORMAT: '3000'
|
||
},
|
||
PageIndex: 1,
|
||
PageSize: 10
|
||
}
|
||
const data = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList', req)
|
||
if (data.Result_Data.List && data.Result_Data.List.length > 0) {
|
||
this.monthNoticeText = data.Result_Data.List[0].ANALYSIS_CONTENT
|
||
}
|
||
|
||
|
||
},
|
||
async handleNoticeYear() {
|
||
let date = new Date(this.lastDay)
|
||
let y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
if (m < 10) {
|
||
m = '0' + m
|
||
}
|
||
//本年
|
||
let reqYear = {
|
||
SearchParameter: {
|
||
STATISTICS_DATE: `${y}`,
|
||
ANALYSISINS_TYPE: '1012',
|
||
ANALYSISINS_FORMAT: '3000'
|
||
},
|
||
PageIndex: 1,
|
||
PageSize: 10
|
||
}
|
||
const totalData = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList', reqYear)
|
||
if (totalData.Result_Data.List && totalData.Result_Data.List.length > 0) {
|
||
this.yearNoticeText = totalData.Result_Data.List[0].ANALYSIS_CONTENT
|
||
}
|
||
},
|
||
async nearestService() {
|
||
let seat = uni.getStorageSync('seatInfo');
|
||
let req = {
|
||
longitude: seat.longitude,
|
||
Province_Code: '340000',
|
||
latitude: seat.latitude,
|
||
}
|
||
const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartList', req)
|
||
let res = {
|
||
SERVERPART_NAME: data.Result_Data.List[0].SERVERPART_NAME,//服务区
|
||
SPREGIONTYPE_NAME: data.Result_Data.List[0].SPREGIONTYPE_NAME,//片区
|
||
Serverpart_ID: data.Result_Data.List[0].SERVERPART_ID,
|
||
longitude: data.Result_Data.List[0].SERVERPART_X,
|
||
latitude: data.Result_Data.List[0].SERVERPART_Y,
|
||
}
|
||
uni.setStorageSync('currentService', res)
|
||
},
|
||
handleShowNotice() {
|
||
this.showNotice = true
|
||
},
|
||
handleNoShowNotice() {
|
||
this.showNotice = false
|
||
},
|
||
handleShowNoticeYear() {
|
||
this.showNoticeYear = true
|
||
},
|
||
handleNoShowNoticeYear() {
|
||
this.showNoticeYear = false
|
||
},
|
||
async getSummaryMonth() {
|
||
// let currentService = uni.getStorageSync('currentService')
|
||
const date = new Date(this.time)
|
||
let y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
let d = date.getDate()
|
||
if (m < 10) {
|
||
m = '0' + m
|
||
}
|
||
if (d < 10) {
|
||
d = '0' + d
|
||
}
|
||
const req = {
|
||
pushProvinceCode: '340000',
|
||
Statistics_StartDate: `${y}-${m}-01`,
|
||
Statistics_Date: `${y}-${m}-${d}`,
|
||
Serverpart_ID: this.serviceInfo.SERVERPART_NAME === '安徽驿达' ? null : this.serviceInfo.Serverpart_ID
|
||
}
|
||
const data = await request.$webGet('CommercialApi/Revenue/GetSummaryRevenue', req)
|
||
this.monthDetail = data.Result_Data.RevenuePushModel
|
||
if (this.serviceInfo.SERVERPART_NAME !== '安徽驿达' && this.monthDetail.BudgetRevenue) {
|
||
this.monthDetail.comparePlan = Number(this.$util.getMoney(((this.monthDetail.CashPay / this.monthDetail.BudgetRevenue) - 1) * 100))
|
||
}
|
||
},
|
||
|
||
async getRevenueList() {
|
||
let req = {
|
||
statisticsDate: this.time,
|
||
provinceCode: '340000',
|
||
Serverpart_ID: this.serviceInfo.Serverpart_ID || '',
|
||
SPRegionType_ID: this.serviceInfo.SPRegionType_ID || ''
|
||
}
|
||
let totalData = await request.$webGet('CommercialApi/Contract/GetContractAnalysis', req)
|
||
this.revenueList = {
|
||
ContractProfitLoss: totalData.Result_Data.ContractProfitLoss,
|
||
ShopCount: totalData.Result_Data.ShopCount,
|
||
SalesPerSquareMeter: totalData.Result_Data.SalesPerSquareMeter,
|
||
ExpiredShopCount: totalData.Result_Data.ExpiredShopCount,
|
||
ContractList: totalData.Result_Data.ContractList
|
||
}
|
||
this.contractList = {
|
||
title: '完成率',
|
||
value: totalData.Result_Data.ContractCompletionDegree
|
||
}
|
||
this.orderTransaction = {
|
||
title: '转化率',
|
||
value: totalData.Result_Data.ConvertRate
|
||
}
|
||
},
|
||
//拿到合同列表
|
||
// async getContractList(){
|
||
// let req = {
|
||
// statisticsDate:this.time,
|
||
// provinceCode:'340000',
|
||
// Serverpart_ID:this.serviceInfo.Serverpart_ID,
|
||
// SPRegionType_ID:this.serviceInfo.SPRegionType_ID
|
||
// }
|
||
// let totalData = await request.$webGet('CommercialApi/Contract/GetContractAnalysis',req)
|
||
//
|
||
//
|
||
// },
|
||
// getOrderTransaction(){
|
||
// let res = {
|
||
// title: '转化率',
|
||
// value: 50.5
|
||
// }
|
||
// this.orderTransaction = res
|
||
// },
|
||
//选项卡改变
|
||
handleChangeTab(value) {
|
||
this.selectTab = value
|
||
this.revenue = this.revenueAll[this.selectTab]
|
||
this.moneyCompareList = this.revenue.list
|
||
},
|
||
async getMoneyCompareList() {
|
||
let req
|
||
if (this.serviceInfo.SERVERPART_NAME === '安徽驿达') {
|
||
req = {
|
||
StatisticsDate: this.time,
|
||
}
|
||
} else {
|
||
req = {
|
||
StatisticsDate: this.time,
|
||
ServerpartId: this.serviceInfo.Serverpart_ID || ''
|
||
}
|
||
}
|
||
|
||
const data = await request.$webGet('CommercialApi/Revenue/GetRevenueCompare', req)
|
||
let RevenueAmount = [] //营收金额 除以10000的金额
|
||
let normalAmount = [] //不除以10000的金额
|
||
let compareWordDay = [] //对比工作日
|
||
let RevenueMax = 0
|
||
let TicketCountList = [] // 客单量
|
||
let TicketMax = 0
|
||
let AvgTicketAmountList = [] // 客单均价
|
||
let AvgTicketMax = 0
|
||
if (data.Result_Data.RevenueAmountList && data.Result_Data.RevenueAmountList.length > 0) {
|
||
data.Result_Data.RevenueAmountList.forEach(item => {
|
||
let list = []
|
||
let listNormal = []
|
||
let qoqAddList = [] //环比增加
|
||
item.data.forEach(subItem => {
|
||
let number = (subItem[1] / 10000).toFixed(2)
|
||
if (number > RevenueMax) {
|
||
RevenueMax = number
|
||
}
|
||
list.push(number)
|
||
qoqAddList.push(subItem[2])
|
||
listNormal.push(subItem[1])
|
||
})
|
||
normalAmount.push({ name: item.name, data: listNormal })
|
||
RevenueAmount.push({ name: item.name, data: list, qoqAdd: qoqAddList, holiday: item.value })
|
||
})
|
||
}
|
||
if (data.Result_Data.TicketCountList && data.Result_Data.TicketCountList.length > 0) {
|
||
data.Result_Data.TicketCountList.forEach(item => {
|
||
let list = []
|
||
let qoqAddList = [] //环比增加
|
||
item.data.forEach(subItem => {
|
||
let number = (subItem[1]).toFixed(0)
|
||
if (number > TicketMax) {
|
||
TicketMax = Number(number)
|
||
}
|
||
qoqAddList.push(subItem[2])
|
||
list.push(number)
|
||
})
|
||
TicketCountList.push({ name: item.name, data: list, qoqAdd: qoqAddList, holiday: item.value })
|
||
})
|
||
}
|
||
if (data.Result_Data.AvgTicketAmountList && data.Result_Data.AvgTicketAmountList.length > 0) {
|
||
data.Result_Data.AvgTicketAmountList.forEach(item => {
|
||
let list = []
|
||
let qoqAddList = [] //环比增加
|
||
item.data.forEach(subItem => {
|
||
let number = (subItem[1]).toFixed(2)
|
||
if (number > AvgTicketMax) {
|
||
AvgTicketMax = number
|
||
}
|
||
list.push(number)
|
||
qoqAddList.push(subItem[2])
|
||
})
|
||
AvgTicketAmountList.push({ name: item.name, data: list, qoqAdd: qoqAddList, holiday: item.value })
|
||
})
|
||
}
|
||
// 因为有三个选项卡 把三种情况要展示的内容 放在一个对象里面 三个对象放一个数组里面 点击选项卡切换显示的对象就可以了
|
||
this.revenueAll = [
|
||
{
|
||
data: this.$util.fmoney(data.Result_Data.RevenueAmount),
|
||
add: data.Result_Data.RevenueAmountYOYRate,
|
||
list: {
|
||
categories: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
||
series: RevenueAmount,
|
||
normal: normalAmount,
|
||
max: RevenueMax,
|
||
type: 0
|
||
},
|
||
},
|
||
{
|
||
data: this.$util.noDecimal(data.Result_Data.TicketCount),
|
||
add: data.Result_Data.TicketCountYOYRate,
|
||
list: {
|
||
categories: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
||
series: TicketCountList,
|
||
max: TicketMax,
|
||
type: 1
|
||
},
|
||
},
|
||
{
|
||
data: this.$util.fmoney(data.Result_Data.AvgTicketAmount),
|
||
add: data.Result_Data.AvgTicketAmountRate,
|
||
list: {
|
||
categories: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
||
series: AvgTicketAmountList,
|
||
max: AvgTicketMax,
|
||
type: 2
|
||
},
|
||
}
|
||
]
|
||
this.revenue = this.revenueAll[this.selectTab]
|
||
// let res = {
|
||
// categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
|
||
// series: [
|
||
// {
|
||
// name: "平日平均",
|
||
// data: [7,10,8,5,8,8,9,8,5,6,7,7]
|
||
// },
|
||
// {
|
||
// name: "周末平均",
|
||
// data: [5,8,8,7,6,6,6,8,7,7,6,7]
|
||
// },
|
||
// {
|
||
// name: "节假日平均",
|
||
// data: [5,10,4,4,7,8,6,5,5,6,10,7]
|
||
// }
|
||
// ]
|
||
// }
|
||
this.moneyCompareList = this.revenue.list
|
||
},
|
||
async getTrendsList() {
|
||
let date = new Date(this.time)
|
||
let y = date.getFullYear()
|
||
// 查今年去年两年的数据
|
||
let req
|
||
let yesReq
|
||
if (this.serviceInfo.SERVERPART_NAME === '安徽驿达') {
|
||
req = {
|
||
ProvinceCode: '340000',
|
||
StatisticsDate: y,
|
||
StatisticsType: 1,
|
||
}
|
||
} else {
|
||
req = {
|
||
ProvinceCode: '340000',
|
||
StatisticsDate: y,
|
||
StatisticsType: 1,
|
||
ServerpartId: this.serviceInfo.Serverpart_ID || ''
|
||
}
|
||
}
|
||
if (this.serviceInfo.SERVERPART_NAME === '安徽驿达') {
|
||
yesReq = {
|
||
ProvinceCode: '340000',
|
||
StatisticsDate: y - 1,
|
||
StatisticsType: 1,
|
||
}
|
||
} else {
|
||
yesReq = {
|
||
ProvinceCode: '340000',
|
||
StatisticsDate: y - 1,
|
||
StatisticsType: 1,
|
||
ServerpartId: this.serviceInfo.Serverpart_ID || ''
|
||
}
|
||
}
|
||
|
||
const data = await request.$webGet('CommercialApi/Revenue/GetRevenueTrend', req)
|
||
const yesData = await request.$webGet('CommercialApi/Revenue/GetRevenueTrend', yesReq)
|
||
let list = []
|
||
let max = 0
|
||
data.Result_Data.List.forEach(item => {
|
||
item.value = Number((item.value / 10000).toFixed(1))
|
||
if (Number(item.value) > max) {
|
||
max = Number(item.value)
|
||
}
|
||
list.push(item.value)
|
||
})
|
||
let yesList = []
|
||
yesData.Result_Data.List.forEach(item => {
|
||
item.value = Number((item.value / 10000).toFixed(1))
|
||
yesList.push(item.value)
|
||
})
|
||
let res = {
|
||
categories: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
||
series: [{
|
||
name: "今年",
|
||
data: list
|
||
}, {
|
||
name: "去年",
|
||
data: yesList
|
||
}],
|
||
max: max
|
||
}
|
||
// let res={
|
||
// categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
|
||
// series:[{
|
||
// name: "",
|
||
// data: [3,4,5,4.8,5,4.2,4.5,5,5.5,5.7,8,9]
|
||
// }]
|
||
// }
|
||
this.trendsList = res
|
||
},
|
||
async getRevenueType() {
|
||
const date = new Date(this.time)
|
||
let y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
if (m < 10) {
|
||
m = '0' + m
|
||
}
|
||
const req = {
|
||
pushProvinceCode: '340000',
|
||
Statistics_StartDate: `${y}-${m}-01`,
|
||
Statistics_Date: this.time,
|
||
Serverpart_ID: this.serviceInfo.SERVERPART_NAME === '安徽驿达' ? null : this.serviceInfo.Serverpart_ID
|
||
}
|
||
const data = await request.$webGet('CommercialApi/Revenue/GetSummaryRevenue', req)
|
||
let all = 0
|
||
if (data.Result_Data && data.Result_Data.BusinessTypeList && data.Result_Data.BusinessTypeList.length > 0) {
|
||
data.Result_Data.BusinessTypeList.forEach(item => {
|
||
all += Number(item.value)
|
||
})
|
||
data.Result_Data.BusinessTypeList.forEach(item => {
|
||
item.rate = ((Number(item.value) / all) * 100).toFixed(2)
|
||
})
|
||
let res = {
|
||
own: data.Result_Data.BusinessTypeList[1].rate,
|
||
ectocyst: data.Result_Data.BusinessTypeList[0].rate
|
||
}
|
||
this.revenueType = res
|
||
} else {
|
||
this.revenueType = null
|
||
}
|
||
},
|
||
monthYearPlan() {
|
||
const monthDate = {
|
||
Province_Code: '340000',
|
||
Serverpart_ID: this.serviceInfo.SERVERPART_NAME === '安徽驿达' ? null : this.serviceInfo.Serverpart_ID,
|
||
Statistics_Date: this.time
|
||
}
|
||
request.$webGet('CommercialApi/Revenue/GetRevenueBudget', monthDate).then(res => {
|
||
// 赋值给data中的这个对象 在请求完之后会进行统一的数据处理
|
||
this.plan = res.Result_Data
|
||
if (this.plan) {
|
||
if (this.plan && this.plan.RevenueMonth_Amount) {
|
||
this.plan.percentageMonth = (res.Result_Data.RevenueMonth_Amount / res.Result_Data.BudgetMonth_Amount * 100).toFixed(2)
|
||
}
|
||
if (this.plan && this.plan.RevenueYear_Amount) {
|
||
this.plan.percentageYear = (res.Result_Data.RevenueYear_Amount / res.Result_Data.BudgetYear_Amount * 100).toFixed(2)
|
||
}
|
||
// this.plan.percentageMonth = 80
|
||
// let date = new Date(this.time)
|
||
// let nowDay = date.getDate()
|
||
// let day = this.$util.getThisMonthDay(this.time)
|
||
// //一天应该的增长率
|
||
// let oneDay = 100/day
|
||
// // 到了当天的应该有的百分比
|
||
// let thisDayShould= oneDay*nowDay
|
||
// 由于显示的时候 正负号由图片表示 所以要区绝对值展现在页面上
|
||
this.monthAdd = Math.abs(this.plan.MonthGrowth_Rate)
|
||
this.yearAdd = Math.abs(this.plan.YearGrowth_Rate)
|
||
//处理数据 保留小数
|
||
this.plan.RevenueMonth_Amount = this.$util.fmoney(res.Result_Data.RevenueMonth_Amount)
|
||
this.plan.BudgetMonth_Amount = this.$util.fmoney(res.Result_Data.BudgetMonth_Amount)
|
||
this.plan.RevenueYear_Amount = this.$util.fmoney(res.Result_Data.RevenueYear_Amount)
|
||
this.plan.BudgetYear_Amount = this.$util.fmoney(res.Result_Data.BudgetYear_Amount)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.main {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
|
||
.charts {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 28px 16px 24px;
|
||
background: #fff;
|
||
|
||
.chartsItem {
|
||
.titleTop {
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 44rpx;
|
||
|
||
}
|
||
|
||
.time {
|
||
// margin-bottom: 4px;
|
||
|
||
.thisTime {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 500;
|
||
color: #160002;
|
||
}
|
||
|
||
.select {
|
||
margin-left: 8px;
|
||
display: inline-block;
|
||
|
||
.time {
|
||
display: flex;
|
||
align-items: center;
|
||
// margin-right: 4px;
|
||
border-radius: 28rpx;
|
||
padding: 12rpx 16rpx;
|
||
background: #E9EFFF;
|
||
|
||
.day {
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #782717;
|
||
line-height: 44rpx;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.uni-input {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #9f74f7;
|
||
line-height: 36rpx;
|
||
}
|
||
|
||
.icon {
|
||
width: 24px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.question {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-left: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.titleTopNotice {
|
||
position: absolute;
|
||
padding: 12px;
|
||
left: 35%;
|
||
width: 50vw;
|
||
background: #FFFFFF;
|
||
box-shadow: 0 10px 10px 0 rgba(22, 0, 2, 0.1);
|
||
}
|
||
|
||
.meng {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
font-size: 17px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 24px;
|
||
|
||
.unit {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 20px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.dateText {
|
||
display: inline-block;
|
||
margin-left: 16rpx;
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
}
|
||
}
|
||
|
||
.progress {
|
||
width: calc(100vw - 32px);
|
||
margin-top: 12px;
|
||
|
||
.top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.left,
|
||
.right {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.title {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
}
|
||
|
||
.value {
|
||
font-size: 18px;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #160002;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
width: 100%;
|
||
height: 14px;
|
||
position: relative;
|
||
|
||
.first {
|
||
height: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
background: #1E80FF;
|
||
border-radius: 2px 0 0 2px;
|
||
}
|
||
|
||
.first:after {
|
||
position: absolute;
|
||
content: '';
|
||
right: 0;
|
||
top: 0;
|
||
background: #fff;
|
||
width: 1px;
|
||
height: 100%;
|
||
z-index: 111;
|
||
}
|
||
|
||
.second {
|
||
height: 100%;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
background: #00C2FF;
|
||
border-radius: 0 2px 2px 0;
|
||
}
|
||
|
||
.second:before {
|
||
position: absolute;
|
||
content: '';
|
||
left: 0;
|
||
top: 0;
|
||
background: #fff;
|
||
width: 1px;
|
||
height: 100%;
|
||
z-index: 111;
|
||
}
|
||
}
|
||
}
|
||
|
||
.box {
|
||
width: 100%;
|
||
padding: 12px 16px;
|
||
box-sizing: border-box;
|
||
border-radius: 8px;
|
||
background: #f5f2f2;
|
||
margin-top: 12px;
|
||
|
||
.top {
|
||
width: 100%;
|
||
display: flex;
|
||
|
||
.big {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: #ffffff;
|
||
border-radius: 8px;
|
||
border: 1px solid #ebebeb;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 8px;
|
||
|
||
.icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
}
|
||
|
||
.text {
|
||
width: calc(100% - 60px);
|
||
padding: 2px 0;
|
||
|
||
.textTop {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.number {
|
||
font-size: 36rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #150002;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.desc {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 8px;
|
||
font-size: 14px;
|
||
color: #FF7043;
|
||
|
||
.success {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
|
||
.comparePlan {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 36rpx;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.box2 {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.text {
|
||
font-size: 14px;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
color: #150002;
|
||
font-weight: bold;
|
||
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.addIcon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 2px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.progressPlan {
|
||
width: 100%;
|
||
height: 8px;
|
||
border-radius: 5px;
|
||
background: #fff;
|
||
margin-top: 8px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
.trans {
|
||
height: 8px;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
border-top-right-radius: 4px;
|
||
border-bottom-right-radius: 4px;
|
||
background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_orange.png")no-repeat 100% 100%;
|
||
}
|
||
|
||
.transYear {
|
||
height: 8px;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
border-top-right-radius: 4px;
|
||
border-bottom-right-radius: 4px;
|
||
background: url("https://eshangtech.com/ShopICO/ahyd-BID/index/progress_blue.png")no-repeat 100% 100%;
|
||
}
|
||
|
||
//.img{
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// position: absolute;
|
||
// top: 0;
|
||
// left: 0;
|
||
// z-index:1;
|
||
//}
|
||
//.pro{
|
||
// height: 100%;
|
||
// position: absolute;
|
||
// top: 0;right: 0;
|
||
// background: #fff;
|
||
// z-index:2;
|
||
//}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
display: flex;
|
||
margin-top: 16px;
|
||
padding-left: 48px;
|
||
|
||
.success {
|
||
.text {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786b6c;
|
||
line-height: 40rpx;
|
||
margin-bottom: 2px;
|
||
|
||
.unit {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 40rpx;
|
||
margin-left: 2px;
|
||
}
|
||
}
|
||
|
||
.money {
|
||
font-size: 28rpx;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab {
|
||
width: 100%;
|
||
height: 38px;
|
||
background: #F2F1F1;
|
||
border-radius: 4px;
|
||
box-sizing: border-box;
|
||
padding: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
margin-top: 12px;
|
||
|
||
.tabItem {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: calc(100% / 3);
|
||
height: 30px;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
}
|
||
|
||
.tabItemActive {
|
||
color: #160002;
|
||
background: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.subItem {
|
||
width: 100%;
|
||
|
||
.title {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.money {
|
||
width: calc(100% - 32px);
|
||
padding: 18px 16px;
|
||
background: #F7F7F7;
|
||
border-radius: 4px;
|
||
|
||
.top {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 4px;
|
||
|
||
.icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.sumMoney {
|
||
font-size: 20px;
|
||
font-family: DINAlternate-Bold, DINAlternate;
|
||
font-weight: bold;
|
||
color: #341D00;
|
||
line-height: 24px;
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 24px;
|
||
|
||
.icon {
|
||
width: 14px;
|
||
height: 14px;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.add {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #FA5151;
|
||
line-height: 20px;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.text {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|