2673 lines
93 KiB
Vue
2673 lines
93 KiB
Vue
<template>
|
||
<div>
|
||
<div class="main" v-if="isHaveData">
|
||
<view class="YDBox" v-if="isShowAllProvince">
|
||
<div class="headerTopBox"
|
||
:style="{ backgroundImage: serviceInfo.SERVERPART_NAME === '安徽驿达' ? 'linear-gradient(180deg, #A8BFED 0%, #F0F5FF 100%)' : 'url(' + 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/car.svg' + ')', height: serviceInfo.SERVERPART_NAME === '安徽驿达' ? (menu.bottom + 62) + 'px' : '324px' }">
|
||
<div class="header" :style="{ height: menu.height + 'px', top: menu.top + 'px' }" v-if="false">
|
||
<image class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"
|
||
@click="handleBack" />
|
||
<div class="picker" @click="handleGoSelectService">
|
||
<div class="selectService">
|
||
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>
|
||
<view class="select">
|
||
<view class="content">
|
||
<view class="uni-input">{{ serviceInfo.SERVERPART_NAME }}</view>
|
||
<p class="area" v-if="serviceInfo.Serverpart_ID">{{ serviceInfo.SPREGIONTYPE_NAME }}</p>
|
||
<image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <view class="sliderBox" :style="{top:(menu.bottom + 19)+'px'}">-->
|
||
<!-- <SliderPage :index="1"/>-->
|
||
<!-- </view>-->
|
||
<!-- <div class="timeSelect" :style="{top:(menu.bottom + 64)+'px'}">-->
|
||
<!-- <view style="display: flex;align-items: center">-->
|
||
<!-- <img class="selectIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/selectDateIcon.svg"/>-->
|
||
<!-- <picker mode="date" :value="searchText" :end="lastDay" @change="changeAllProvinceSearch" >-->
|
||
<!-- <view class="time">-->
|
||
<!-- <view class="text">{{ searchText }}</view>-->
|
||
<!-- <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/arrow_bottom.svg"></image>-->
|
||
<!-- </view>-->
|
||
<!-- </picker>-->
|
||
<!-- </view>-->
|
||
<!-- </div>-->
|
||
|
||
</div>
|
||
<div class="otherCharts">
|
||
<div class="list">
|
||
<view class="listTop">
|
||
<view class="topLeft">
|
||
<image class="carIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/carIcon.svg" />
|
||
<span class="itemTitle">车流数据</span>
|
||
</view>
|
||
|
||
<div class="timeSelect">
|
||
<view style="display: flex;align-items: center">
|
||
<img class="selectIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/car/dateIcon.svg" />
|
||
<picker mode="date" fields="month" :value="searchText" :end="lastDay"
|
||
@change="changeAllProvinceSearch">
|
||
<view class="time">
|
||
<view class="text">{{ searchTextMonth }}</view>
|
||
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/car/dateMore.svg"></image>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</div>
|
||
</view>
|
||
|
||
<view class="sortBox">
|
||
<view class="sortItem" @click="handleChangeSortName(1)">
|
||
<text class="sortText">营收金额</text>
|
||
<view class="sortIconBox">
|
||
<image class="upIcon"
|
||
:style="{ transform: sortName === 1 ? sortType === 1 ? `` : `rotate(180deg)` : `` }"
|
||
:src="sortType === 1 ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg' : sortName === 1 ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg' : 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'" />
|
||
<image class="bottomIcon"
|
||
:style="{ transform: sortName === 1 ? sortType === 1 ? `` : `rotate(180deg)` : 'rotate(-180deg)' }"
|
||
:src="sortType === 1 && sortName === 1 ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg' : 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="sortItem" @click="handleChangeSortName(2)">
|
||
<text class="sortText">单车价值</text>
|
||
<view class="sortIconBox">
|
||
<image class="upIcon"
|
||
:style="{ transform: sortName === 2 ? sortType === 1 ? `` : `rotate(180deg)` : `` }"
|
||
:src="sortType === 1 ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg' : sortName === 2 ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg' : 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'" />
|
||
<image class="bottomIcon"
|
||
:style="{ transform: sortName === 2 ? sortType === 1 ? `` : `rotate(180deg)` : 'rotate(-180deg)' }"
|
||
:src="sortType === 1 && sortName === 2 ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg' : 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="sortItem" @click="handleChangeSortName(3)">
|
||
<text class="sortText">入区数量</text>
|
||
<view class="sortIconBox">
|
||
<image class="upIcon"
|
||
:style="{ transform: sortName === 3 ? sortType === 1 ? `` : `rotate(180deg)` : `` }"
|
||
:src="sortType === 1 ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg' : sortName === 3 ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg' : 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'" />
|
||
<image class="bottomIcon"
|
||
:style="{ transform: sortName === 3 ? sortType === 1 ? `` : `rotate(180deg)` : 'rotate(-180deg)' }"
|
||
:src="sortType === 1 && sortName === 3 ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg' : 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="sortItem" @click="handleChangeSortName(4)">
|
||
<text class="sortText">入区率</text>
|
||
<view class="sortIconBox">
|
||
<image class="upIcon"
|
||
:style="{ transform: sortName === 4 ? sortType === 1 ? `` : `rotate(180deg)` : `` }"
|
||
:src="sortType === 1 ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg' : sortName === 4 ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg' : 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'" />
|
||
<image class="bottomIcon"
|
||
:style="{ transform: sortName === 4 ? sortType === 1 ? `` : `rotate(180deg)` : 'rotate(-180deg)' }"
|
||
:src="sortType === 1 && sortName === 4 ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg' : 'https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg'" />
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<scroll-view class="listBigBox" :scroll-y="true">
|
||
<div class="listItem" v-for="(item, index) in regionList" :key="index"
|
||
@click="handleNoneChild(item, index)">
|
||
<div class="itemLeft">
|
||
<image class="bg" src="https://eshangtech.com/ShopICO/ahyd-BID/car/itemLeftBg.svg" />
|
||
<view class="statueBox"
|
||
:style="{ backgroundImage: `url(${item.RevenueAmount ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/statusHaveBg.svg' : 'https://eshangtech.com/ShopICO/ahyd-BID/car/statusNoHaveBg.svg'})` }">
|
||
{{ item.RevenueAmount ? '营业中' : '休息中' }}</view>
|
||
<view class="nameBox">
|
||
<text class="serviceName">{{ item.Serverpart_Name ? item.Serverpart_Name.split('服务区')[0] : ''
|
||
}}</text>
|
||
<text class="serviceLabel">服务区</text>
|
||
</view>
|
||
</div>
|
||
<div class="contentRight">
|
||
<div class="rightTop">
|
||
<view class="rightTopLeft">
|
||
<view class="indexBox"
|
||
:style="{ backgroundImage: `url(${index === 0 ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/1stBg.svg' : index === 1 ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/2stBg.svg' : index === 2 ? 'https://eshangtech.com/ShopICO/ahyd-BID/car/3stBg.svg' : 'https://eshangtech.com/ShopICO/ahyd-BID/car/4stBg.svg'})` }">
|
||
{{ index + 1 }}</view>
|
||
<text class="areaName">{{ item.SPRegionType_Name || '-' }}</text>
|
||
</view>
|
||
<view class="rightTopRight">
|
||
<text class="entryRateLabel">入区率</text>
|
||
<text class="entryRateValue">{{ item.Entry_Rate || '-' }}%</text>
|
||
</view>
|
||
</div>
|
||
<div class="rightBottom">
|
||
<view class="rightBottomItem">
|
||
<text class="itemLabel">营收 /万元</text>
|
||
<text class="itemValue">{{ $util.fmoney($util.getMoney(item.RevenueAmount / 10000), 2) }}</text>
|
||
</view>
|
||
<view class="rightBottomItem">
|
||
<text class="itemLabel">单车 /元</text>
|
||
<text class="itemValue">{{ item.AvgVehicleAmount || '-' }}</text>
|
||
</view>
|
||
<view class="rightBottomItem">
|
||
<text class="itemLabel">入区 /万辆</text>
|
||
<text class="itemValue">{{ $util.fmoney($util.getMoney(item.Vehicle_Count / 10000), 2) }}</text>
|
||
</view>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<view class="load-more" v-if="allRegionList && allRegionList.length > 10 * selectIndexPage">
|
||
<text @click="handleGetMore">{{ '点击加载更多' }}</text>
|
||
</view>
|
||
</scroll-view>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
<view class="swiperBox" v-else>
|
||
<view class="swiperItem">
|
||
<!-- :style="{height:`calc(100vh - ${menu.bottom + 62}px)`}"-->
|
||
<scroll-view scroll-y="true" style="height: 100vh" @scroll="handleScroll">
|
||
<div class="header"
|
||
:style="{ backgroundImage: 'url(' + 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/car.svg' + ')', height: 648 + 'rpx' }">
|
||
<div class="analyse" v-if="analyseText">
|
||
<text class="title">分析</text>
|
||
<text class="content">{{ analyseText }}</text>
|
||
</div>
|
||
<div class="headerTop" :style="{ height: (menu.bottom + 6) + 'px' }" v-if="false">
|
||
<div class="box" :style="{ top: (menu.bottom - (menu.height / 2)) + 'px' }">
|
||
<div class="icon" @click="handleBack">
|
||
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg">
|
||
</image>
|
||
</div>
|
||
<!-- <text class="title">车流画像</text>-->
|
||
<!-- <view class="sliderBox" :style="{top:46+'px'}">-->
|
||
<!-- <SliderPage :index="1"/>-->
|
||
<!-- </view>-->
|
||
<div class="pickerTop" @click="handleGoSelectService">
|
||
<div class="selectService">
|
||
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/fixed.svg"></image>
|
||
<view class="select">
|
||
<view class="content">
|
||
<view class="uni-input">{{ serviceInfo.SERVERPART_NAME }}</view>
|
||
<p class="area" v-if="serviceInfo.Serverpart_ID">{{ serviceInfo.SPREGIONTYPE_NAME }}</p>
|
||
<image class="rightArrow"
|
||
src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
|
||
</view>
|
||
</view>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 占位 -->
|
||
<div class="seize"></div>
|
||
</div>
|
||
</div>
|
||
<div class="serviceArea" :style="{ top: menu.bottom + 70 + 'px' }">
|
||
<div class="detailBox">
|
||
<div class="detailTop">
|
||
<div class="topLeft">{{ serviceInfoObj.SERVERPART_TYPE ?
|
||
serviceTypeObj[serviceInfoObj.SERVERPART_TYPE] : "" }}</div>
|
||
</div>
|
||
<div class="functionList">
|
||
<div class="functionItem">
|
||
<image class="haveFun"
|
||
:src="haveFun.car ? 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carHave.svg' : 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carNoHave.svg'" />
|
||
<image class="carIcon"
|
||
src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carCarIcon.svg" />
|
||
<text class="funText">司机之家</text>
|
||
</div>
|
||
<div class="functionItem">
|
||
<image class="haveFun"
|
||
:src="haveFun.charge ? 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carHave.svg' : 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carNoHave.svg'" />
|
||
<image class="carIcon"
|
||
src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carCharge.svg" />
|
||
<text class="funText">充电桩</text>
|
||
</div>
|
||
<div class="functionItem">
|
||
<image class="haveFun"
|
||
:src="haveFun.bady ? 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carHave.svg' : 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carNoHave.svg'" />
|
||
<image class="carIcon"
|
||
src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carBady.svg" />
|
||
<text class="funText">母婴室</text>
|
||
</div>
|
||
<div class="functionItem">
|
||
<image class="haveFun"
|
||
:src="haveFun.gusetHome ? 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carHave.svg' : 'https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carNoHave.svg'" />
|
||
<image class="carIcon"
|
||
src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/carGuestRoom.svg" />
|
||
<text class="funText">客房</text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="charts" @click.stop="handleClick($event)">
|
||
<div class="chartsItem">
|
||
<div style="display: flex;align-items: center;justify-content: space-between">
|
||
<p class="title">昨日入区车流</p>
|
||
<div class="item">
|
||
<text class="value">{{ time }}</text>
|
||
</div>
|
||
</div>
|
||
<div v-if="carData && carData.length > 0">
|
||
<entry-zone :carData="carData" :time="time" :month="thisMonth" />
|
||
<analyse :analyseInfo="{ analysisins_type: 1102, analysisins_format: 2000 }" />
|
||
</div>
|
||
<no-data v-if="!carData" :type="'car'" />
|
||
</div>
|
||
|
||
<div class="chartsItem" style="margin-top: 32px">
|
||
<p class="title">月度车流累计</p>
|
||
<div>
|
||
<month-total :monthData="monthTotalList" :scrollTop="scrollTop" />
|
||
<analyse :analyseInfo="{ analysisins_type: 1107, analysisins_format: 2000 }" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chartsItem" style="margin-top: 32px;height: 640px">
|
||
<div class="time">
|
||
<text class="thisTime"></text>
|
||
<div class="select">
|
||
<picker mode="date" fields="month" :value="single" :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.svg">
|
||
</image>
|
||
</view>
|
||
</picker>
|
||
</div>
|
||
</div>
|
||
<view class="tab" v-if="serviceInfo.Serverpart_ID">
|
||
<view v-for="(item, index) in tabList" :key="index"
|
||
:class="selectTab === item.value ? 'tabItem tabItemActive' : 'tabItem'"
|
||
@click="handleChangeTab(item.value)">{{ item.name }}</view>
|
||
</view>
|
||
|
||
<p class="title" style="margin-bottom: 32px">车辆归属地</p>
|
||
<div v-if="homePlace && homePlace.length > 0">
|
||
<home-place :selectProvinceName="selectProvinceName" :selectValue="selectValue" :homeData="homePlace"
|
||
:homeCity="cityPlace" @getHomeDate="getHomeData" />
|
||
<div style="display: flex">
|
||
<!-- <div class="selectType" >-->
|
||
<!-- <view :class="allProvince?'item itemSelect':'item itemUnSelect'" @click="handleAllProvince">全部省份</view>-->
|
||
<!-- </div>-->
|
||
<div class="selectType">
|
||
<div :class="carType === item.value ? 'item itemSelect' : 'item itemUnSelect'"
|
||
v-for="(item, index) in carTypeList" :key="index" @click="handleCarType(item)">
|
||
<div class="text">{{ item.name }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<analyse :analyseInfo="{ analysisins_type: 1103, analysisins_format: 2000 }" />
|
||
</div>
|
||
<div style="height: 450px" v-if="!homePlace">
|
||
<no-data :type="'car'" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chartsItem" style="margin-top: 32px;height:280px">
|
||
<p class="title">车型停留分析/日均</p>
|
||
<div v-if="carTypeTimeData.series && carTypeTimeData.series.length > 0">
|
||
<car-type-time :data="carTypeTimeData" />
|
||
<analyse :analyseInfo="{ analysisins_type: 1104, analysisins_format: 2000 }" />
|
||
</div>
|
||
<no-data v-if="!carTypeTimeData.series" :type="'car'" />
|
||
</div>
|
||
|
||
<div class="chartsItem" style="margin-top: 32px;height:280px">
|
||
<p class="title" style="margin-bottom: 16px">车型停留分布图/日均</p>
|
||
<div>
|
||
<time-analysis :data="timeAnalysisData" />
|
||
<analyse :analyseInfo="{ analysisins_type: 1105, analysisins_format: 2000 }" />
|
||
</div>
|
||
<!-- <no-data v-if="!timeAnalysisData.series" :type="'car'"/>-->
|
||
</div>
|
||
|
||
<div class="chartsItem" style="margin-top: 32px">
|
||
<div class="topItem">
|
||
<p class="title">入区车型占比</p>
|
||
<div class="box" v-if="allEntry">
|
||
<text class="value">{{ allEntry ? allEntry : '-' }}%</text>
|
||
<view class="right" v-if="addAllEntry">
|
||
<text class="compare">(较上月)</text>
|
||
<image class="arrowTop"
|
||
:src="Number(addAllEntry) > 0 ? 'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg' : 'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'">
|
||
</image>
|
||
<text class="text">{{ addAllEntry ? Math.abs(addAllEntry) + '%' : '-' + '%' }}</text>
|
||
</view>
|
||
</div>
|
||
</div>
|
||
<div v-if="percentEntryData && percentEntryData.length > 0">
|
||
<percent-entry :data="percentEntryData" />
|
||
<analyse :analyseInfo="{ analysisins_type: 1106, analysisins_format: 2000 }" />
|
||
</div>
|
||
<no-data v-if="!percentEntryData" :type="'car'" />
|
||
</div>
|
||
</div>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '@/util/index.js'
|
||
import EntryZone from "./components/car/entryZone.vue";
|
||
import HomePlace from "./components/car/homePlace.vue";
|
||
import CarTypeTime from "./components/car/carTypeTime.vue";
|
||
import timeAnalysis from "./components/car/timeAnalysis.vue";
|
||
import PercentEntry from "./components/car/percentEntry.vue";
|
||
import MonthTotal from "./components/car/monthTotal.vue";
|
||
import NoData from "./components/noData.vue";
|
||
import Analyse from "./components/analyse.vue";
|
||
import EntryRate from "./components/car/entryRate.vue";
|
||
import SliderPage from "./components/sliderPage.vue";
|
||
import { getFieldEnum } from "../../../util/dateTime/index";
|
||
export default {
|
||
name: "carPortrait",
|
||
data() {
|
||
const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1)
|
||
return {
|
||
menu: {}, //手机参数
|
||
serviceArray: [], // 选择服务区的列表
|
||
serviceIndex: 0, //选中的服务区列表的第几个
|
||
area: '片区', //属于哪个片区
|
||
labelList: [], //标签
|
||
time: '',//当前时间
|
||
Serverpart_ID: '',//服务区id
|
||
chartData: {},
|
||
selectTab: 0,
|
||
tabIsTrue: true,
|
||
tabList: [],//选项卡列表
|
||
carTypeList: [],//车型选项卡
|
||
carNumAll: 0,//一共的入区车流数
|
||
monthTotalList: {},//月累计
|
||
carData: [],//入区车流的数据
|
||
homePlaceAll: [],//车辆归属地两区总和列表
|
||
homePlace: [],//车辆归属地
|
||
cityPlaceAll: [],//车辆归属地的城市总和列表
|
||
cityPlace: [],//车辆归属地的城市
|
||
carTypeTimeDataAll: [{}, {}, {}],//车辆类型占比与停留时间总和列表
|
||
carTypeTimeData: [],//车辆类型占比与停留时间
|
||
timeAnalysisData: [],// 车辆价值与停留时间分析
|
||
percentEntryData: [],//入区率占比
|
||
percentEntryDataAll: [],// 入区率占比总的
|
||
serviceInfo: {}, //当前服务区信息
|
||
backType: '',//返回的页面类型
|
||
analyseText: '',//分析的文字
|
||
statusBarHeight: '',
|
||
single: '',//显示时间
|
||
lastDay: lastDay,
|
||
endTime: '',
|
||
thisMonth: '',//几月
|
||
allEntry: '',//一共的入区率占比
|
||
addAllEntry: '',//相较上月增加的入区率
|
||
endData: '',//截止日期
|
||
isFirst: true,//是不是第一次调用
|
||
carType: '',// 车辆类型
|
||
selectProvinceName: '',// 点击的省份名称
|
||
selectValue: '',// 点击的省份值
|
||
allProvince: true,// 是否选择了全省
|
||
isShowAllProvince: false,// 是否展示全省的情况
|
||
regionList: null,// 显示在页面的数据列表
|
||
allRegionList: [],// 全部页面数据列表
|
||
selectIndexPage: 1,// 页数
|
||
theRequest: null,
|
||
headMsg: null,
|
||
searchEndTime: '',
|
||
searchText: '',// 展示全省情況时显示的日期内容
|
||
searchTextMonth: '',// 展示全省情況时显示的日期内容
|
||
haveFun: {},
|
||
serviceTypeObj: {},// 服务区类型对象
|
||
serviceInfoObj: {},
|
||
carSwiperList: [],
|
||
currentSwiper: 1,
|
||
monthCategoriesList: [],// 月度累计的月份
|
||
monthSeriesList: [],// 月度累计的数据
|
||
sortType: 1,// 正序降序 0正序 1降序
|
||
sortName: 3,// 排序字段 1营收金额 2单车数量 3入区数量 4入区率
|
||
scrollTop: 0
|
||
}
|
||
},
|
||
components: {
|
||
EntryRate, MonthTotal,
|
||
Analyse, NoData, PercentEntry, CarTypeTime, HomePlace, EntryZone, timeAnalysis, SliderPage
|
||
},
|
||
computed: {
|
||
isHaveData() {
|
||
return true
|
||
}
|
||
},
|
||
props: {
|
||
selectIndex: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
serviceInfo: {
|
||
type: Object,
|
||
default: () => { }
|
||
}
|
||
},
|
||
watch: {
|
||
selectIndex: {
|
||
handler(value) {
|
||
if (value === 1) {
|
||
this.handleGetPageData()
|
||
}
|
||
},
|
||
immediate: true
|
||
}
|
||
},
|
||
created() {
|
||
// // this.isShowAllProvince = option.mustAllProvince
|
||
// // this.backType = option.type
|
||
// // 服务区类型枚举
|
||
// this.handleServiceType()
|
||
// // 造滑动框模块
|
||
// this.carSwiperList = ['previous','','next']
|
||
},
|
||
mounted() {
|
||
// this.currentSwiper=1
|
||
// this.carTypeList.forEach(item=>{
|
||
// item.select = false
|
||
// })
|
||
// this.selectProvinceName = ''
|
||
// this.carType = ''
|
||
// this.isFirst = true
|
||
// // 总的来说商业bi的五个页面都是 往组件里面传值 就可以出现图表和要求的东西
|
||
// // 外面的一层页面主要用于处理数据
|
||
// let nowTime = new Date()
|
||
// let y = nowTime.getFullYear()
|
||
// let month = nowTime.getMonth() + 1
|
||
// if (month<10){
|
||
// month = '0'+ month
|
||
// }
|
||
// this.endData = `${y}-${month}`
|
||
// let storeTime = uni.getStorageSync('lastDay')
|
||
// if (storeTime){
|
||
// this.time = storeTime
|
||
// }
|
||
// this.single = this.$util.getThisMonthHave(this.time)
|
||
// this.searchText = this.time
|
||
// this.searchTextMonth = this.$util.getThisMonthHave(this.time)
|
||
// const date = new Date(this.time)
|
||
// //设置日期选择器的开始时间和结束时间
|
||
// let searchYear = date.getFullYear()
|
||
// let m = date.getMonth() + 1
|
||
// if (m<10){
|
||
// m = '0' + m
|
||
// }
|
||
// let d = date.getDate()
|
||
// if (d<10){
|
||
// d = '0'+ d
|
||
// }
|
||
// this.thisMonth = m
|
||
//
|
||
// let systemInfo = uni.getSystemInfoSync()
|
||
// // 获取手机参数对页面进行适配
|
||
// this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||
// // 把获取到的手机参数保存
|
||
// uni.setStorageSync('phoneInfo',systemInfo)
|
||
// this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||
// this.menu = uni.getMenuButtonBoundingClientRect()
|
||
// // 把获取图表数据的方法统一放在一起 然后去请求接口拿到数据 再分批传到相对应的图标组件
|
||
// // 每个图表都是用组件的方式引入的 数据是通过prop传入的
|
||
// let storeServiceInfo = uni.getStorageSync('currentService')
|
||
// let nearServiceInfo = uni.getStorageSync('nearService')
|
||
// if (!storeServiceInfo){
|
||
// this.serviceInfo = nearServiceInfo
|
||
// }else{
|
||
// this.serviceInfo = storeServiceInfo
|
||
// }
|
||
// this.theRequest = {
|
||
// GroupType: 1000,
|
||
// ProvinceCode: 340000,
|
||
// ServerpartIds: "",
|
||
// ShopAnalysisType: 0,
|
||
// month: `${searchYear}${m}`,
|
||
// time: `${searchYear}-${m}-${d}`,
|
||
// }
|
||
// if (this.serviceInfo.SERVERPART_NAME==='安徽驿达' || this.isShowAllProvince==='true'){
|
||
// this.isShowAllProvince = true
|
||
// }
|
||
// if (this.isShowAllProvince === true){
|
||
// this.serviceInfo.SERVERPART_NAME = '安徽驿达'
|
||
// this.serviceInfo.Serverpart_ID = undefined
|
||
// this.getDetail()
|
||
// }else{
|
||
// //月累计
|
||
// this.getMonthTotalList()
|
||
// //获取服务区基本信息
|
||
// this.getServiceInfo()
|
||
// // 入区车流分析
|
||
// this.getCarData()
|
||
// // 车辆归属地
|
||
// this.getHomeData()
|
||
// // 车辆类型占比与停留时间
|
||
// this.getCarTypeTime()
|
||
// // 车辆价值与停留时间分析
|
||
// this.getTimeAnalysis('')
|
||
// //入区率占比
|
||
// this.getPercentEntry()
|
||
// //获得标签
|
||
// this.getLabelDetail()
|
||
// }
|
||
|
||
},
|
||
onHide() {
|
||
this.isShowAllProvince = false
|
||
},
|
||
onUnload() {
|
||
this.$util.addUserBehavior()
|
||
this.carTypeList.forEach(item => {
|
||
item.select = false
|
||
})
|
||
this.selectProvinceName = ''
|
||
this.carType = ''
|
||
this.searchText = ''
|
||
this.searchTextMonth = ''
|
||
},
|
||
methods: {
|
||
handleGetMore() {
|
||
this.selectIndexPage += 1
|
||
this.regionList = this.allRegionList.slice(0, this.selectIndexPage * 10)
|
||
},
|
||
handleClick(e) {
|
||
},
|
||
handleScroll(e) {
|
||
this.scrollTop = e.detail.scrollTop
|
||
},
|
||
// 修改排序字段
|
||
handleChangeSortName(value) {
|
||
if (value === this.sortName) {
|
||
if (this.sortType === 1) {
|
||
this.sortType = 0
|
||
} else {
|
||
this.sortType = 1
|
||
}
|
||
} else {
|
||
this.sortName = value
|
||
this.sortType = 1
|
||
}
|
||
this.getDetail()
|
||
},
|
||
// 获取页面数据
|
||
handleGetPageData() {
|
||
// 服务区类型枚举
|
||
this.handleServiceType()
|
||
// 造滑动框模块
|
||
this.carSwiperList = ['previous', '', 'next']
|
||
|
||
this.currentSwiper = 1
|
||
this.carTypeList.forEach(item => {
|
||
item.select = false
|
||
})
|
||
this.selectProvinceName = ''
|
||
this.carType = ''
|
||
this.isFirst = true
|
||
// 总的来说商业bi的五个页面都是 往组件里面传值 就可以出现图表和要求的东西
|
||
// 外面的一层页面主要用于处理数据
|
||
let nowTime = new Date()
|
||
let y = nowTime.getFullYear()
|
||
let month = nowTime.getMonth() + 1
|
||
if (month < 10) {
|
||
month = '0' + month
|
||
}
|
||
this.endData = `${y}-${month}`
|
||
let storeTime = uni.getStorageSync('lastDay')
|
||
if (storeTime) {
|
||
this.time = storeTime
|
||
}
|
||
this.single = this.$util.getThisMonthHave(this.time)
|
||
this.searchText = this.time
|
||
this.searchTextMonth = this.$util.getThisMonthHave(this.time)
|
||
const date = new Date(this.time)
|
||
//设置日期选择器的开始时间和结束时间
|
||
let searchYear = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
if (m < 10) {
|
||
m = '0' + m
|
||
}
|
||
let d = date.getDate()
|
||
if (d < 10) {
|
||
d = '0' + d
|
||
}
|
||
this.thisMonth = m
|
||
|
||
let systemInfo = uni.getSystemInfoSync()
|
||
// 获取手机参数对页面进行适配
|
||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||
// 把获取到的手机参数保存
|
||
uni.setStorageSync('phoneInfo', systemInfo)
|
||
this.statusBarHeight = Number(systemInfo.statusBarHeight)
|
||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||
// 把获取图表数据的方法统一放在一起 然后去请求接口拿到数据 再分批传到相对应的图标组件
|
||
// 每个图表都是用组件的方式引入的 数据是通过prop传入的
|
||
let storeServiceInfo = uni.getStorageSync('currentService')
|
||
let nearServiceInfo = uni.getStorageSync('nearService')
|
||
if (!storeServiceInfo) {
|
||
this.serviceInfo = nearServiceInfo
|
||
} else {
|
||
this.serviceInfo = storeServiceInfo
|
||
}
|
||
this.theRequest = {
|
||
GroupType: 1000,
|
||
ProvinceCode: 340000,
|
||
ServerpartIds: "",
|
||
ShopAnalysisType: 0,
|
||
month: `${searchYear}${m}`,
|
||
time: `${searchYear}-${m}-${d}`,
|
||
}
|
||
if (this.serviceInfo.SERVERPART_NAME === '安徽驿达' || this.isShowAllProvince === 'true') {
|
||
this.isShowAllProvince = true
|
||
}
|
||
if (this.isShowAllProvince === true) {
|
||
this.serviceInfo.SERVERPART_NAME = '安徽驿达'
|
||
this.serviceInfo.Serverpart_ID = undefined
|
||
this.getDetail()
|
||
} else {
|
||
//月累计
|
||
this.getMonthTotalList()
|
||
//获取服务区基本信息
|
||
this.getServiceInfo()
|
||
// 入区车流分析
|
||
this.getCarData()
|
||
// 车辆归属地
|
||
this.getHomeData()
|
||
// 车辆类型占比与停留时间
|
||
this.getCarTypeTime()
|
||
// 车辆价值与停留时间分析
|
||
this.getTimeAnalysis('')
|
||
//入区率占比
|
||
this.getPercentEntry()
|
||
//获得标签
|
||
this.getLabelDetail()
|
||
}
|
||
},
|
||
// 滚动轮播图
|
||
changeSwiper(e) {
|
||
this.currentSwiper = e.detail.current
|
||
let value = this.carSwiperList[Number(e.detail.current)]
|
||
if (value === 'previous') {
|
||
uni.redirectTo({
|
||
url: `/pages/map/detail`
|
||
})
|
||
} else if (value === 'next') {
|
||
uni.redirectTo({
|
||
url: `/pages/commercialBI/guestPortrait`
|
||
})
|
||
}
|
||
},
|
||
// 点击查看更多跳转
|
||
handleGoServiceMessage() {
|
||
this.$util.toNextRoute('navigateTo', `/pages/map/detail`)
|
||
// this.$util.toNextRoute('navigateTo', `/pages/summaryOfPortraits/index?index=0`)
|
||
},
|
||
// 枚举服务区类型 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
|
||
},
|
||
showScoreAnimation1(copyRightItems, id) {
|
||
/*
|
||
cxt_arc.arc(x, y, r, sAngle, eAngle, counterclockwise);
|
||
x Number 圆的x坐标
|
||
y Number 圆的y坐标
|
||
r Number 圆的半径
|
||
sAngle Number 起始弧度，单位弧度（在3点钟方向）
|
||
eAngle Number 终止弧度
|
||
counterclockwise Boolean 可选。指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针。
|
||
*/
|
||
let that = this
|
||
// 页面渲染完成
|
||
// 这部分是灰色底层
|
||
let cxt_arc = wx.createCanvasContext(id) //创建并返回绘图上下文context对象。
|
||
cxt_arc.setLineWidth(6) //绘线的宽度
|
||
cxt_arc.setStrokeStyle('#C5D6FF') //绘线的颜色，底色
|
||
cxt_arc.setLineCap('round') //线条端点样式
|
||
cxt_arc.beginPath() //开始一个新的路径
|
||
cxt_arc.arc(20, 20, 16, 0, 2 * Math.PI, false) //设置一个原点(53,53)，半径为50的圆的路径到当前路径
|
||
cxt_arc.stroke() //对当前路径进行描边
|
||
//这部分是绿色部分
|
||
cxt_arc.setLineWidth(6)
|
||
cxt_arc.setStrokeStyle('#1A5FFF')//可修改所需颜色
|
||
cxt_arc.setLineCap('round')
|
||
cxt_arc.beginPath() //开始一个新的路径
|
||
cxt_arc.arc(
|
||
20,
|
||
20,
|
||
16,
|
||
(-Math.PI * 1) / 2,
|
||
2 * Math.PI * (copyRightItems / 100) - (Math.PI * 1) / 2,
|
||
false
|
||
)
|
||
cxt_arc.stroke() //对当前路径进行描边
|
||
cxt_arc.draw()
|
||
},
|
||
handleNoneChild(obj, selectIndex) {
|
||
this.regionList.forEach((item, index) => {
|
||
if (item.name === obj.name && index === selectIndex) {
|
||
item.showChild = !item.showChild
|
||
}
|
||
})
|
||
this.$forceUpdate()
|
||
},
|
||
async getDetail() {
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
})
|
||
this.regionList = []
|
||
const date = new Date(this.searchText)
|
||
const y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
if (m < 10) {
|
||
m = '0' + m
|
||
}
|
||
let req
|
||
if (this.serviceInfo.SERVERPART_NAME === '安徽驿达') {
|
||
req = {
|
||
StatisticsMonth: `${y}${m}`,
|
||
SortStr: `${this.sortName === 1 ? 'RevenueAmount' : this.sortName === 2 ? 'AvgVehicleAmount' : this.sortName === 3 ? 'Vehicle_Count' : 'Entry_Rate'}${this.sortType === 1 ? ' desc' : ''}`
|
||
}
|
||
} else {
|
||
req = {
|
||
StatisticsMonth: `${y}${m}`,
|
||
Serverpart_ID: this.serviceInfo.Serverpart_ID || "",
|
||
SortStr: `${this.sortName === 1 ? 'RevenueAmount' : this.sortName === 2 ? 'AvgVehicleAmount' : this.sortName === 3 ? 'Vehicle_Count' : 'Entry_Rate'}${this.sortType === 1 ? ' desc' : ''}`
|
||
}
|
||
}
|
||
request.$webGet('CommercialApi/BigData/GetProvinceMonthAnalysis', req).then(res => {
|
||
this.carData = res.Result_Data.List
|
||
this.carData.forEach(item => {
|
||
item.Serverpart_ID = this.serviceInfo.Serverpart_ID
|
||
item.showChild = false
|
||
})
|
||
this.allRegionList = this.carData
|
||
this.regionList = this.carData.slice(0, this.selectIndexPage * 10)
|
||
uni.hideLoading()
|
||
// let sumObj = {
|
||
// Serverpart_Name:'',
|
||
// Serverpart_Region:'',
|
||
// SectionFlow_Count:0,
|
||
// Vehicle_Count:0,
|
||
// showChild:false
|
||
// }
|
||
// this.carData.forEach(item=>{
|
||
// sumObj.Serverpart_Name = item.Serverpart_Name
|
||
// sumObj.Serverpart_Region = item.Serverpart_Region
|
||
// sumObj.SectionFlow_Count += item.SectionFlow_Count
|
||
// sumObj.Vehicle_Count += item.Vehicle_Count
|
||
// })
|
||
// if (sumObj.Vehicle_Count && sumObj.SectionFlow_Count){
|
||
// sumObj.Entry_Rate = ((sumObj.Vehicle_Count / sumObj.SectionFlow_Count)*100).toFixed(2)
|
||
// }
|
||
// sumObj.Vehicle_Count = this.$util.fmoney(this.$util.getMoney(sumObj.Vehicle_Count / 10000),2)
|
||
// this.regionList = [sumObj]
|
||
})
|
||
|
||
|
||
// uni.showLoading({
|
||
// title: '正在加载...'
|
||
// })
|
||
// const requestParamas = {
|
||
// Statistics_Date: obj.time ,
|
||
// Statistics_Month: obj.month ,
|
||
// Province_Code: obj.ProvinceCode ,
|
||
// pushProvinceCode: obj.ProvinceCode ,
|
||
// Serverpart_ID: obj.GroupType != 1020 ? obj.ServerpartIds : '',
|
||
// SPRegionType_ID: obj.GroupType == 1020 ? obj.ServerpartIds : '',
|
||
// // Revenue_Include: 1
|
||
// }
|
||
//
|
||
// const bayonetCount = await request.$webGet('CommercialApi/Revenue/GetSPBayonetList', requestParamas)
|
||
// const res = bayonetCount.Result_Data.List
|
||
// let bayonetPie = [] // 区域车流饼图统计数据
|
||
// res.map(async (n, index) => {
|
||
// bayonetPie = anhuiYestodayRevenueData.getBayonetPie('Serverpart_Name', n, bayonetPie)
|
||
// })
|
||
// bayonetPie.forEach((item,index)=>{
|
||
// let entryNum = 0 // 该片区总计的入区车流
|
||
// let flowNum = 0 // 该片区总计的断面流量
|
||
// let entryNumNoZero = 0 //
|
||
// let flowNumNoZero = 0 //
|
||
// item.spList.forEach(subItem=>{
|
||
// entryNum+=subItem.Vehicle_Count
|
||
// flowNum+=subItem.SectionFlow_Count
|
||
// if (subItem.regionList && subItem.regionList.length>0){
|
||
// subItem.regionList.forEach(thirdItem=>{
|
||
// if (thirdItem.SectionFlow_Count===0 || thirdItem.Vehicle_Count===0){
|
||
// thirdItem.entryRate = 0
|
||
// }else{
|
||
// thirdItem.entryRate = Number(((thirdItem.Vehicle_Count / thirdItem.SectionFlow_Count)*100).toFixed(2))
|
||
// }
|
||
//
|
||
// if (thirdItem.Vehicle_Count<thirdItem.SectionFlow_Count && thirdItem.Vehicle_Count!==0 && thirdItem.SectionFlow_Count!==0){
|
||
// entryNumNoZero+=thirdItem.Vehicle_Count
|
||
// flowNumNoZero+=thirdItem.SectionFlow_Count
|
||
// }
|
||
// })
|
||
// }
|
||
// })
|
||
// item.entry = entryNum
|
||
// item.flow = flowNum
|
||
// item.flowRate =flowNumNoZero? ((entryNumNoZero / flowNumNoZero)*100).toFixed(2) + '%':'-'
|
||
// item.showChild = false
|
||
// item.entryList = [{name:'已入区',value:Number(item.flowRate.split('%')[0])},{name:'未入区',value:100 - item.flowRate.split('%')[0]}]
|
||
// item.bg = item.name.indexOf('皖中')!==-1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/Middle.png':item.name.indexOf('皖西')!==-1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/west.png':item.name.indexOf('皖东')!==-1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/east.png':item.name.indexOf('皖南')!==-1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/south.png':item.name.indexOf('皖北')!==-1?'https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/north.png':''
|
||
// })
|
||
// if (bayonetPie && bayonetPie.length>0){
|
||
// for (let i=0;i<=bayonetPie.length-1;i++){
|
||
// for (let j=0;j<=bayonetPie.length - i - 1;j++){
|
||
// if (bayonetPie[j] && bayonetPie[j + 1] && bayonetPie[j].entry && bayonetPie[j+1].entry){
|
||
// if (bayonetPie[j].entry < bayonetPie[j+1].entry){
|
||
// let temp = bayonetPie[j]
|
||
// bayonetPie[j] = bayonetPie[j + 1]
|
||
// bayonetPie[j + 1] = temp
|
||
// }
|
||
// }
|
||
// }
|
||
// }
|
||
// }
|
||
//
|
||
// bayonetPie.forEach(item=>{
|
||
// if (item.spList && item.spList.length>0){
|
||
// for (let i=0;i<=item.spList.length-1;i++){
|
||
// for (let j=0;j<=item.spList.length - i - 1;j++){
|
||
// if (item.spList[j] && item.spList[j + 1] && item.spList[j].Vehicle_Count && item.spList[j+1].Vehicle_Count){
|
||
// if (item.spList[j].Vehicle_Count < item.spList[j+1].Vehicle_Count){
|
||
// let temp = item.spList[j]
|
||
// item.spList[j] = item.spList[j + 1]
|
||
// item.spList[j + 1] = temp
|
||
// }
|
||
// }
|
||
// }
|
||
// }
|
||
// }
|
||
// })
|
||
// this.regionList = bayonetPie
|
||
// this.regionList.forEach((item,index)=>{
|
||
// const number = Number(item.flowRate.split('%')[0])
|
||
// this.showScoreAnimation1(number,index)
|
||
// })
|
||
// uni.hideLoading()
|
||
},
|
||
//车型选择
|
||
handleCarType(selectItem) {
|
||
if (selectItem.value === this.carType) {
|
||
this.carType = ''
|
||
} else {
|
||
this.carType = selectItem.value
|
||
}
|
||
this.selectProvinceName = ''
|
||
this.selectValue = ''
|
||
this.getHomeData(this.carType)
|
||
},
|
||
handleGetHome(ProvinceName, allCount, isCancel) {
|
||
if (isCancel) {
|
||
this.selectValue = allCount
|
||
this.selectProvinceName = ''
|
||
this.getHomeData(this.carType)
|
||
} else {
|
||
this.selectValue = allCount
|
||
if (ProvinceName.indexOf(',') !== -1) {
|
||
this.selectProvinceName = '其他'
|
||
this.getCityList(ProvinceName, this.selectValue)
|
||
} else {
|
||
this.selectProvinceName = ProvinceName
|
||
this.getCityList(this.selectProvinceName, this.selectValue)
|
||
}
|
||
}
|
||
},
|
||
|
||
//获取服务区基本信息
|
||
async getServiceInfo() {
|
||
let id = ''
|
||
let currentService = uni.getStorageSync('currentService')
|
||
let nearService = uni.getStorageSync('nearService')
|
||
if (!currentService) {
|
||
id = nearService.Serverpart_ID
|
||
} else {
|
||
id = currentService.Serverpart_ID
|
||
}
|
||
if (id) {
|
||
let req = {
|
||
ServerpartId: id
|
||
}
|
||
const total = await request.$webGet('CommercialApi/BaseInfo/GetServerpartInfo', req)
|
||
// 每次调用接口不能破坏tabList的数据格式
|
||
let tabList = [{ name: '全部', value: 0 }]
|
||
total.Result_Data.RegionInfo.forEach((item, index) => {
|
||
tabList.push({ name: item.SERVERPART_REGIONNAME, value: index + 1 })
|
||
})
|
||
this.serviceInfoObj = total.Result_Data
|
||
this.tabList = tabList
|
||
this.haveFun = {
|
||
car: total.Result_Data.HASPILOTLOUNGE,
|
||
charge: total.Result_Data.HASCHARGE,
|
||
bady: total.Result_Data.HASMOTHER,
|
||
gusetHome: total.Result_Data.HASGUESTROOM
|
||
}
|
||
}
|
||
},
|
||
async changeAllProvinceSearch(e) {
|
||
const date = new Date(e.detail.value)
|
||
const y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
if (m < 10) {
|
||
m = '0' + m
|
||
}
|
||
let d = date.getDate()
|
||
if (d < 10) {
|
||
d = '0' + d
|
||
}
|
||
this.theRequest = {
|
||
GroupType: 1000,
|
||
ProvinceCode: 340000,
|
||
ServerpartIds: "",
|
||
ShopAnalysisType: 0,
|
||
month: `${y}${m}`,
|
||
time: `${y}-${m}-${d}`,
|
||
}
|
||
this.searchText = e.detail.value
|
||
this.searchTextMonth = e.detail.value
|
||
await this.getDetail()
|
||
},
|
||
// 时间选择器改变的时间
|
||
bindDateChange(e) {
|
||
const date = new Date(e.detail.value)
|
||
let m = date.getMonth() + 1
|
||
if (m < 10) {
|
||
m = '0' + m
|
||
}
|
||
this.thisMonth = m
|
||
this.single = e.detail.value
|
||
let d = this.$util.getThisMonthDay(e.detail.value)
|
||
this.endTime = e.detail.value + '-' + d
|
||
this.onRefresh()
|
||
},
|
||
//重新调一遍页面数据的方法
|
||
onRefresh() {
|
||
// 车辆归属地
|
||
this.getHomeData()
|
||
// 车辆类型占比与停留时间
|
||
this.getCarTypeTime()
|
||
// 车辆价值与停留时间分析
|
||
this.getTimeAnalysis('')
|
||
//入区率占比
|
||
this.getPercentEntry()
|
||
},
|
||
//获得标签
|
||
async getLabelDetail() {
|
||
//六个标签
|
||
let req = {
|
||
SearchParameter: {
|
||
STATISTICS_DATE: this.time,
|
||
ANALYSISINS_TYPE: 1101,
|
||
ANALYSISINS_FORMAT: 1000,
|
||
ANALYSISINS_STATE: 1,
|
||
SERVERPART_ID: this.serviceInfo.Serverpart_ID,
|
||
},
|
||
PageIndex: 1,
|
||
PageSize: 10
|
||
}
|
||
//分析的文字
|
||
let reqText = {
|
||
SearchParameter: {
|
||
STATISTICS_DATE: this.time,
|
||
ANALYSISINS_TYPE: 1101,
|
||
ANALYSISINS_FORMAT: 2000,
|
||
ANALYSISINS_STATE: 1,
|
||
SERVERPART_ID: this.serviceInfo.Serverpart_ID,
|
||
},
|
||
PageIndex: 1,
|
||
PageSize: 10
|
||
}
|
||
//六个标签
|
||
const data = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList', req)
|
||
let list = []
|
||
data.Result_Data.List.forEach(item => {
|
||
list.push(item.ANALYSIS_CONTENT)
|
||
})
|
||
this.labelList = list
|
||
//分析的文字
|
||
const total = await request.$webPost('CommercialApi/Analysis/GetANALYSISINSList', reqText)
|
||
this.analyseText = total.Result_Data.List[0] ? total.Result_Data.List[0].ANALYSIS_CONTENT : ''
|
||
},
|
||
//当前最近的服务区数据
|
||
async nearestService() {
|
||
let storeServiceInfo = uni.getStorageSync('currentService')
|
||
let nearServiceInfo = uni.getStorageSync('nearService')
|
||
// 判断如果已经有了当前服务区 就用当前服务区 没有就用最近的服务区
|
||
if (storeServiceInfo) {
|
||
this.serviceInfo = storeServiceInfo
|
||
} else {
|
||
this.serviceInfo = nearServiceInfo
|
||
}
|
||
},
|
||
//跳转到地图
|
||
handleGoSelectService() {
|
||
uni.navigateTo({
|
||
url: `/pages/map/index?chartType=${true}&page=/pages/commercialBINew/carPortrait&serviceInfo=${JSON.stringify(this.serviceInfo)}`
|
||
})
|
||
},
|
||
handleBack() {
|
||
// 因为首页 和 用户页面都可以跳进来 做个判断
|
||
if (this.backType === 'userCenter') {
|
||
uni.switchTab({
|
||
url: '/pages/userCenter/userCenter'
|
||
})
|
||
} else {
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
})
|
||
}
|
||
},
|
||
//切换改变选项卡
|
||
// 因为只让接口调用一次 所以要把全部和不同区域的内容要放在同一个列表里面 然后通过选项卡的点击来切换展示哪一块的数据
|
||
handleChangeTab(value) {
|
||
let Serverpart_Region = ''
|
||
this.tabList.forEach(item => {
|
||
if (item.value === value && item.value !== 0) {
|
||
Serverpart_Region = item.name
|
||
}
|
||
})
|
||
// if (this.tabIsTrue){
|
||
this.selectTab = value
|
||
// 车辆归属地
|
||
this.homePlace = this.homePlaceAll[this.selectTab] ? this.homePlaceAll[this.selectTab] : []
|
||
this.cityPlace = this.cityPlaceAll[this.selectTab] ? this.cityPlaceAll[this.selectTab] : []
|
||
// 车辆类型占比与停留时间
|
||
this.carTypeTimeData = this.carTypeTimeDataAll[this.selectTab] ? this.carTypeTimeDataAll[this.selectTab] : []
|
||
// 车辆价值与停留时间分析
|
||
this.getTimeAnalysis(Serverpart_Region)
|
||
//入区率占比
|
||
this.getPercentEntry(this.tabList[this.selectTab].name)
|
||
// }
|
||
|
||
},
|
||
async getMonthTotalList() {
|
||
let time
|
||
let nowYear
|
||
let yerYear
|
||
if (this.endTime) {
|
||
const date = new Date(this.endTime)
|
||
let y = date.getFullYear() - 1
|
||
let m = date.getMonth() + 1
|
||
if (m < 10) {
|
||
m = '0' + m
|
||
}
|
||
let d = date.getDate()
|
||
time = `${y}-${m}-${d}`
|
||
nowYear = y + 1
|
||
yerYear = y
|
||
} else {
|
||
const date = new Date(this.time)
|
||
let y = date.getFullYear() - 1
|
||
let m = date.getMonth() + 1
|
||
if (m < 10) {
|
||
m = '0' + m
|
||
}
|
||
let d = date.getDate()
|
||
time = `${y}-${m}-${d}`
|
||
nowYear = y + 1
|
||
yerYear = y
|
||
}
|
||
const req = {
|
||
StatisticsDate: this.endTime ? this.endTime : this.time,
|
||
Serverpart_ID: this.serviceInfo.Serverpart_ID
|
||
}
|
||
const data = await request.$webGet('CommercialApi/BigData/GetMonthAnalysis', req)
|
||
let monthList = []
|
||
let carCount = []
|
||
let carCountMax = 0
|
||
let moneyCount = []
|
||
let monetCountMax = 0
|
||
let info = []
|
||
data.Result_Data.List.forEach(item => {
|
||
monthList.push(item.Statistics_Month + '月')
|
||
if (carCountMax < item.Vehicle_Count) {
|
||
carCountMax = item.Vehicle_Count
|
||
}
|
||
if (monetCountMax < item.RevenueAmount) {
|
||
monetCountMax = item.RevenueAmount
|
||
}
|
||
if (item.Vehicle_Count === 0) {
|
||
carCount.push(0)
|
||
} else {
|
||
carCount.push(Number((item.Vehicle_Count / 10000)))
|
||
}
|
||
moneyCount.push(Number((item.RevenueAmount / 10000)))
|
||
// showTip要展示的信息
|
||
info.push({
|
||
allCarCount: item.Vehicle_Count,
|
||
region: item.RegionList,
|
||
rate: item.Entry_Rate,
|
||
money: item.RevenueAmount,
|
||
year: nowYear
|
||
})
|
||
})
|
||
|
||
|
||
const reqYes = {
|
||
StatisticsDate: time,
|
||
Serverpart_ID: this.serviceInfo.Serverpart_ID
|
||
}
|
||
const dataYes = await request.$webGet('CommercialApi/BigData/GetMonthAnalysis', reqYes)
|
||
let monthListYes = []
|
||
let carCountYes = []
|
||
let carCountMaxYes = 0
|
||
let moneyCountYes = []
|
||
let monetCountMaxYes = 0
|
||
let infoYes = []
|
||
dataYes.Result_Data.List.forEach(item => {
|
||
monthListYes.push(item.Statistics_Month + '月')
|
||
if (carCountMaxYes < item.Vehicle_Count) {
|
||
carCountMaxYes = item.Vehicle_Count
|
||
}
|
||
if (monetCountMaxYes < item.RevenueAmount) {
|
||
monetCountMaxYes = item.RevenueAmount
|
||
}
|
||
if (item.Vehicle_Count === 0) {
|
||
carCountYes.push(0)
|
||
} else {
|
||
carCountYes.push(Number((item.Vehicle_Count / 10000)))
|
||
}
|
||
moneyCountYes.push(Number((item.RevenueAmount / 10000)))
|
||
// showTip要展示的信息
|
||
infoYes.push({
|
||
allCarCount: item.Vehicle_Count,
|
||
region: item.RegionList,
|
||
rate: item.Entry_Rate,
|
||
money: item.RevenueAmount,
|
||
year: yerYear
|
||
})
|
||
})
|
||
|
||
let res = {
|
||
categories: monthList,
|
||
series: [{ name: `${nowYear}年车流量`, data: carCount, type: 'column', index: 0, info: info, max: carCountMax / 10000, year: nowYear },
|
||
{ name: `${yerYear}年车流量`, data: carCountYes, type: 'column', index: 0, info: infoYes, max: carCountMaxYes / 10000, year: yerYear },
|
||
{ name: `${nowYear}年交易额`, data: moneyCount, type: 'line', index: 1, info: info, max: monetCountMax / 10000, year: nowYear },
|
||
{ name: `${yerYear}年交易额`, data: moneyCountYes, type: 'line', index: 1, info: infoYes, max: monetCountMaxYes / 10000, year: yerYear }]
|
||
}
|
||
this.monthTotalList = res
|
||
this.monthCategoriesList = monthList
|
||
this.monthSeriesList = res.series
|
||
this.$forceUpdate()
|
||
// categories: ["小型车","中型车","大货车","新能源车"],
|
||
// series: [{name:'新能源',data:[30,38,20,10]},
|
||
// {name:'燃油车',data:[20,17,23,32]},
|
||
// {name:'停留时间',data:[62,38,50,84]}]
|
||
},
|
||
getCarData() {
|
||
request.$webGet('CommercialApi/Revenue/GetBayonetEntryList', {
|
||
StatisticsDate: this.time,
|
||
Serverpart_ID: this.serviceInfo.Serverpart_ID !== 0 ? this.serviceInfo.Serverpart_ID : null,
|
||
ShowAddUpCount: true
|
||
}).then(res => {
|
||
this.carData = res.Result_Data.List
|
||
res.Result_Data.List.forEach(item => {
|
||
item.Serverpart_ID = this.serviceInfo.Serverpart_ID
|
||
})
|
||
})
|
||
},
|
||
getHomeData() {
|
||
uni.showLoading({
|
||
title: '加载中....'
|
||
})
|
||
const date = new Date(this.endTime ? this.endTime : this.time)
|
||
let y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
if (m < 10) {
|
||
m = '0' + m
|
||
}
|
||
let statistic = `${y}${m}`
|
||
let req
|
||
req = {
|
||
StatisticsMonth: statistic,
|
||
Serverpart_ID: this.serviceInfo.Serverpart_ID,
|
||
ContainWhole: true,
|
||
VehicleType: this.carType || '',
|
||
ProvinceName: this.selectProvinceName,
|
||
isExclude: this.selectProvinceName.indexOf(',') !== -1,
|
||
}
|
||
request.$webGet('CommercialApi/Revenue/GetBayonetOAList', req).then(res => {
|
||
if (this.isFirst) {
|
||
let list = []
|
||
res.Result_Data.OtherData.forEach(item => {
|
||
list.push({ name: item, value: item })
|
||
})
|
||
this.carTypeList = list
|
||
this.isFirst = false
|
||
}
|
||
|
||
// 因为只让接口调用一次 所以要把全部和不同区域的内容要放在同一个列表里面 然后通过选项卡的点击来切换展示哪一块的数据
|
||
let result = res.Result_Data.List
|
||
result.forEach(item => {
|
||
let priceAll = 0
|
||
item.OwnerProvinceList.forEach(subItem => {
|
||
priceAll += Number(subItem.value)
|
||
})
|
||
item.OwnerCityList.forEach(subItem => {
|
||
subItem.value = Number(subItem.value)
|
||
subItem.rate = ((Number(subItem.value) / item.Vehicle_Count) * 100)
|
||
})
|
||
item.OwnerProvinceList.forEach(subItem => {
|
||
subItem.rate = ((Number(subItem.value) / priceAll) * 100).toFixed(2)
|
||
subItem.name = subItem.name + ' ' + subItem.rate + '%'
|
||
})
|
||
})
|
||
let dataList = []
|
||
let cityList = []
|
||
result.forEach(item => {
|
||
let list = []
|
||
item.OwnerProvinceList.forEach(subItem => {
|
||
list.push({ name: subItem.name, value: Number(subItem.value) })
|
||
})
|
||
cityList.push(item.OwnerCityList)
|
||
dataList.push(list)
|
||
})
|
||
//城市
|
||
this.cityPlaceAll = cityList
|
||
this.cityPlace = cityList[this.selectTab] ? cityList[this.selectTab] : []
|
||
//省份
|
||
this.homePlaceAll = dataList
|
||
this.homePlace = dataList[this.selectTab] ? dataList[this.selectTab] : []
|
||
})
|
||
uni.hideLoading()
|
||
},
|
||
|
||
getCityList(ProvinceName, allCount) {
|
||
uni.showLoading({
|
||
title: '正在加载...'
|
||
})
|
||
const date = new Date(this.endTime ? this.endTime : this.time)
|
||
let y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
if (m < 10) {
|
||
m = '0' + m
|
||
}
|
||
let statistic = `${y}${m}`
|
||
const req = {
|
||
StatisticsMonth: statistic,
|
||
ProvinceName: ProvinceName,
|
||
Serverpart_ID: this.serviceInfo.Serverpart_ID,
|
||
VehicleType: this.carType || '',
|
||
isExclude: ProvinceName.indexOf(',') !== -1,
|
||
ContainWhole: true
|
||
}
|
||
request.$webGet('CommercialApi/Revenue/GetBayonetProvinceOAList', req).then(res => {
|
||
let result = res.Result_Data.List
|
||
result.forEach(item => {
|
||
item.OwnerCityList.forEach(subItem => {
|
||
subItem.value = Number(subItem.value)
|
||
subItem.rate = ((Number(subItem.value) / allCount) * 100)
|
||
})
|
||
})
|
||
this.cityPlace = res.Result_Data.List[0] ? res.Result_Data.List[0].OwnerCityList : []
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
|
||
getCarTypeTime() {
|
||
request.$webGet('CommercialApi/Revenue/GetBayonetSTAList', {
|
||
StatisticsDate: this.endTime ? this.endTime : this.time,
|
||
Serverpart_ID: this.serviceInfo.Serverpart_ID || '',
|
||
ContainWhole: true
|
||
}).then(res => {
|
||
let result = res.Result_Data.List
|
||
let series = []
|
||
if (result && result.length > 0) {
|
||
result.forEach(item => {
|
||
let stayTime = []
|
||
let stayTimeMax = 0
|
||
let carType = []
|
||
let valueList = []
|
||
let typeAll = 0
|
||
item.StayTimesList.forEach(subItem => {
|
||
if (stayTimeMax < Number(subItem.value)) {
|
||
stayTimeMax = Number(subItem.value)
|
||
}
|
||
stayTime.push(Number(subItem.value))
|
||
})
|
||
item.VehicleCountList.forEach(subItem => {
|
||
typeAll += Number(subItem.value)
|
||
valueList.push(subItem.value)
|
||
})
|
||
item.VehicleCountList.forEach(subItem => {
|
||
subItem.rate = ((Number(subItem.value) / typeAll) * 100).toFixed(2)
|
||
carType.push(Number(subItem.rate))
|
||
})
|
||
series.push({
|
||
index: 1,
|
||
name: '停留时间', data: stayTime,
|
||
max: stayTimeMax
|
||
})
|
||
series.push({
|
||
index: 0,
|
||
name: '车辆类型', data: carType, valueList: valueList
|
||
})
|
||
})
|
||
if (result.length === 1) {
|
||
this.carTypeTimeDataAll[0] = { categories: result[0].Vehicle_Type ? result[0].Vehicle_Type : [], series: [series[1], series[0]] }
|
||
} else if (result.length === 2) {
|
||
this.carTypeTimeDataAll[0] = { categories: result[0].Vehicle_Type ? result[0].Vehicle_Type : [], series: [series[1], series[0]] }
|
||
this.carTypeTimeDataAll[1] = { categories: result[1].Vehicle_Type ? result[1].Vehicle_Type : [], series: [series[3], series[2]] }
|
||
} else if (result.length === 3) {
|
||
this.carTypeTimeDataAll[0] = { categories: result[0].Vehicle_Type ? result[0].Vehicle_Type : [], series: [series[1], series[0]] }
|
||
this.carTypeTimeDataAll[1] = { categories: result[1].Vehicle_Type ? result[1].Vehicle_Type : [], series: [series[3], series[2]] }
|
||
this.carTypeTimeDataAll[2] = { categories: result[2].Vehicle_Type ? result[2].Vehicle_Type : [], series: [series[5], series[4]] }
|
||
}
|
||
this.carTypeTimeData = this.carTypeTimeDataAll[this.selectTab] ? this.carTypeTimeDataAll[this.selectTab] : []
|
||
} else {
|
||
this.carTypeTimeDataAll = []
|
||
this.carTypeTimeData = []
|
||
}
|
||
})
|
||
// categories: ["小型车","中型车","大货车","新能源车"],
|
||
// series: [{name:'新能源',data:[30,38,20,10]},
|
||
// {name:'燃油车',data:[20,17,23,32]},
|
||
// {name:'停留时间',data:[62,38,50,84]}]
|
||
},
|
||
getTimeAnalysis(data) {
|
||
const date = new Date(this.endTime ? this.endTime : this.time)
|
||
let y = date.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
m = m < 10 ? '0' + m : m
|
||
request.$webGet('CommercialApi/Revenue/GetBayonetSTAnalysis', {
|
||
StartMonth: `${y}${m}`,
|
||
EndMonth: `${y}${m}`,
|
||
Province_Code: '340000',
|
||
Serverpart_ID: this.serviceInfo.Serverpart_ID || '',
|
||
Serverpart_Region: data,
|
||
TimeSpan: 2
|
||
}).then(res => {
|
||
let result = res.Result_Data.List
|
||
// this.timeAnalysisData = result
|
||
let categories = [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22]
|
||
let series = []
|
||
let max = 0
|
||
result.forEach(item => {
|
||
let obj = { name: '', data: [] }
|
||
obj.name = item.name
|
||
let valueList = []
|
||
item.data.forEach(subItem => {
|
||
valueList.push(Number((subItem[1] * 60).toFixed(0)))
|
||
})
|
||
obj.data = valueList
|
||
valueList.forEach(item => {
|
||
if (item > max) {
|
||
max = item
|
||
}
|
||
})
|
||
series.push(obj)
|
||
})
|
||
let list = {
|
||
categories: categories,
|
||
series: series,
|
||
max: max
|
||
}
|
||
this.timeAnalysisData = list
|
||
})
|
||
// res = {
|
||
// categories: ["2018","2019","2020","2021","2022","2023"],
|
||
// series: [
|
||
// {name: "成交量A", data: [35,8,25,37,4,20]},
|
||
// {name: "成交量B", data: [70,40,65,100,44,68]},
|
||
// {name: "成交量C", data: [100,80,95,150,112,132]}
|
||
// ]
|
||
// }
|
||
},
|
||
getPercentEntry(type) {
|
||
const date = new Date(this.single)
|
||
const nowDate = new Date()
|
||
let nowMonth = nowDate.getMonth() + 1
|
||
let nowYear = nowDate.getFullYear()
|
||
let m = date.getMonth() + 1
|
||
let y = date.getFullYear()
|
||
let endTime = ''
|
||
if (m === nowMonth && nowYear === y) {
|
||
endTime = this.time
|
||
} else {
|
||
endTime = this.endTime
|
||
}
|
||
let req = {}
|
||
if (type === '全部' || !type) {
|
||
req = {
|
||
Statistics_Date: this.endTime ? endTime : this.time,
|
||
Province_Code: '340000',
|
||
Serverpart_ID: this.serviceInfo.Serverpart_ID ? this.serviceInfo.Serverpart_ID : '',
|
||
GroupType: 2,
|
||
ShowGrowthRate: true
|
||
}
|
||
} else {
|
||
req = {
|
||
Statistics_Date: this.endTime ? endTime : this.time,
|
||
Province_Code: '340000',
|
||
Serverpart_ID: this.serviceInfo.Serverpart_ID,
|
||
GroupType: 2,
|
||
ShowGrowthRate: true,
|
||
Serverpart_Region: type.slice(0, 1)
|
||
}
|
||
}
|
||
request.$webGet('CommercialApi/Revenue/GetSPBayonetList', req).then(res => {
|
||
this.percentEntryData = res.Result_Data.List
|
||
if (this.percentEntryData && this.percentEntryData.length > 0) {
|
||
this.allEntry = res.Result_Data.List[0].Entry_Rate
|
||
this.addAllEntry = res.Result_Data.List[0].Entry_GrowthRate
|
||
} else {
|
||
this.allEntry = ''
|
||
this.addAllEntry = ''
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import '/static/public/font/stylesheet.css';
|
||
|
||
.main {
|
||
width: 100%;
|
||
background: #fff;
|
||
|
||
.YDBox {
|
||
.headerTopBox {
|
||
width: 100%;
|
||
//height: 152px;
|
||
height: 324px;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
background: linear-gradient(90deg, #60AAFF 0%, #3E74FF 100%);
|
||
|
||
.header {
|
||
position: absolute;
|
||
width: 100%;
|
||
padding: 0 16px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.backArrow {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-right: 16px;
|
||
}
|
||
|
||
.picker {
|
||
|
||
.selectService {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.img {
|
||
width: 40px;
|
||
height: 40px;
|
||
z-index: 2;
|
||
}
|
||
|
||
.select {
|
||
height: 32px;
|
||
background: #F8F8FA;
|
||
border-radius: 0 16px 16px 0;
|
||
transform: translateX(-20px);
|
||
box-sizing: border-box;
|
||
padding-left: 25px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.content {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.uni-input {
|
||
padding: 0;
|
||
background: transparent;
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
}
|
||
|
||
.area {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 40px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.rightArrow {
|
||
width: 24px;
|
||
height: 12px;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.sliderBox {
|
||
width: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
}
|
||
|
||
.timeSelect {
|
||
position: absolute;
|
||
left: 16px;
|
||
|
||
.selectIcon {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.time {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.text {
|
||
margin: 0 5px;
|
||
color: #fff;
|
||
}
|
||
|
||
.icon {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.otherCharts {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 16px;
|
||
|
||
/*日结上传*/
|
||
.chartsTop {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.left {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
|
||
.serviceArea {
|
||
box-sizing: border-box;
|
||
|
||
.picker {
|
||
.selectService {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.img {
|
||
width: 40px;
|
||
height: 40px;
|
||
z-index: 2;
|
||
}
|
||
|
||
.select {
|
||
height: 32px;
|
||
background: #F8F8FA;
|
||
border-radius: 0 16px 16px 0;
|
||
transform: translateX(-20px);
|
||
box-sizing: border-box;
|
||
padding-left: 25px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.content {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.uni-input {
|
||
padding: 0;
|
||
background: transparent;
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
}
|
||
|
||
.area {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 40px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.rightArrow {
|
||
width: 24px;
|
||
height: 12px;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.right {
|
||
.time {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 4px;
|
||
|
||
.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: #ae664e;
|
||
line-height: 36rpx;
|
||
}
|
||
|
||
.icon {
|
||
width: 24px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.list {
|
||
margin-top: 32rpx;
|
||
box-sizing: border-box;
|
||
padding-bottom: 12px;
|
||
|
||
.listTop {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 12px;
|
||
|
||
.topLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.carIcon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.itemTitle {
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 44rpx;
|
||
}
|
||
}
|
||
|
||
.timeSelect {
|
||
border-radius: 28rpx;
|
||
padding: 12rpx 16rpx;
|
||
background: #E9EFFF;
|
||
|
||
.selectIcon {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.time {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.text {
|
||
font-size: 26rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #2363FF;
|
||
line-height: 36rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.icon {
|
||
width: 18px;
|
||
height: 12px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.sortBox {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 16rpx;
|
||
|
||
.sortItem {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.sortText {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #9A9A9A;
|
||
line-height: 36rpx;
|
||
}
|
||
|
||
.sortIconBox {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-left: 16rpx;
|
||
|
||
.upIcon {
|
||
width: 16rpx;
|
||
height: 12rpx;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.bottomIcon {
|
||
width: 16rpx;
|
||
height: 12rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.listBigBox {
|
||
width: 100%;
|
||
height: calc(100ch - 250px);
|
||
//margin-top: 24px;
|
||
box-sizing: border-box;
|
||
padding-bottom: 12px;
|
||
|
||
.listItem {
|
||
width: 100%;
|
||
padding: 24rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 16rpx;
|
||
background: #F7F7F7;
|
||
margin-bottom: 24rpx;
|
||
display: flex;
|
||
|
||
.itemLeft {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 16rpx;
|
||
//border: 2rpx solid #E6E6E6;
|
||
position: relative;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
|
||
.bg {
|
||
position: absolute;
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
}
|
||
|
||
.statueBox {
|
||
position: absolute;
|
||
z-index: 2;
|
||
top: 0;
|
||
right: 0;
|
||
width: 76rpx;
|
||
height: 32rpx;
|
||
font-size: 20rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
line-height: 28rpx;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
.nameBox {
|
||
position: absolute;
|
||
z-index: 2;
|
||
top: 32rpx;
|
||
left: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.serviceName {
|
||
font-size: 30rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
color: #7F020B;
|
||
line-height: 30rpx;
|
||
}
|
||
|
||
.serviceLabel {
|
||
font-size: 20rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
color: #7F020B;
|
||
line-height: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.contentRight {
|
||
width: calc(100% - 176rpx);
|
||
margin-left: 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.rightTop {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.rightTopLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.indexBox {
|
||
width: 36rpx;
|
||
height: 32rpx;
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #FEFFFF;
|
||
line-height: 28rpx;
|
||
text-align: center;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.areaName {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.rightTopRight {
|
||
.entryRateLabel {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #9A9A9A;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.entryRateValue {
|
||
font-size: 28rpx;
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
color: #E83944;
|
||
line-height: 32rpx;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.rightBottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.rightBottomItem {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.itemLabel {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #9A9A9A;
|
||
line-height: 36rpx;
|
||
}
|
||
|
||
.itemValue {
|
||
font-size: 28rpx;
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
color: #160002;
|
||
line-height: 32rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.load-more {
|
||
text-align: center;
|
||
width: 100%;
|
||
height: 80rpx;
|
||
color: #9999;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
//.listItem{
|
||
// margin-bottom: 12px;
|
||
// border: 1px solid #D9DBE0;
|
||
// border-radius: 8px;
|
||
// position: relative;
|
||
// .bg{
|
||
// position: absolute;
|
||
// right: 0;top: 0;
|
||
// width: 97px;
|
||
// height: 97px;
|
||
// }
|
||
// .listBox{
|
||
// width: 100%;
|
||
// box-sizing: border-box;
|
||
// padding: 12px 16px;
|
||
// background: linear-gradient(314deg, #EAEFFF 0%, #F3F5FF 32%, #F5FCFF 50%, #F0F7FF 67%, #DBE5FF 100%);
|
||
// border-bottom: 1px solid #D9DBE0;
|
||
// border-radius: 8px;
|
||
// .itemTop{
|
||
// width: 100%;
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
// align-items: center;
|
||
// .itemLeft{
|
||
// display: inline-block;
|
||
// padding: 4px 12px;
|
||
// background: rgba(26, 95, 255, 0.1);
|
||
// border-radius: 14px;
|
||
// .itemFixed{
|
||
// width: 12px;
|
||
// height: 14px;
|
||
// margin-right: 4px;
|
||
// }
|
||
// .serverName{
|
||
// font-size: 16px;
|
||
// font-family: DINAlternate-Bold, DINAlternate;
|
||
// font-weight: bold;
|
||
// white-space: nowrap;
|
||
// color: #1A5FFF;
|
||
// line-height: 22px
|
||
// }
|
||
// }
|
||
// .itemRight{
|
||
// display: flex;
|
||
// align-items: center;
|
||
// .entryRate{
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
// .entryValue{
|
||
// font-size: 16px;
|
||
// font-family: DINAlternate-Bold, DINAlternate;
|
||
// font-weight: bold;
|
||
// color: red;
|
||
// line-height: 24px;
|
||
// white-space: nowrap;
|
||
// }
|
||
// .entryLabel{
|
||
// font-size: 14px;
|
||
// font-family: PingFangSC-Regular, PingFang SC;
|
||
// font-weight: 400;
|
||
// color: #786B6C;
|
||
// line-height: 20px;
|
||
// }
|
||
// }
|
||
// .img{
|
||
// width: 26px;
|
||
// height: 14px;
|
||
// }
|
||
//
|
||
// }
|
||
// }
|
||
// .itemDetail{
|
||
// margin-top: 16px;
|
||
// width: 100%;
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
// align-items: center;
|
||
// .message{
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
// .cirRate{
|
||
// width: 40px;
|
||
// height: 40px;
|
||
// }
|
||
// .label{
|
||
// font-size: 14px;
|
||
// font-family: PingFangSC-Regular, PingFang SC;
|
||
// font-weight: 400;
|
||
// color: #786B6C;
|
||
// line-height: 20px
|
||
// }
|
||
// .value{
|
||
// font-size: 20px;
|
||
// font-family: DINAlternate-Bold, DINAlternate;
|
||
// font-weight: bold;
|
||
// color: #160002;
|
||
// line-height: 24px;
|
||
// white-space: nowrap;
|
||
// }
|
||
// }
|
||
// }
|
||
// }
|
||
// .childList{
|
||
// border-radius: 8px 8px 0 0;
|
||
// box-sizing: border-box;
|
||
// margin-left: 16px;
|
||
// width: calc(100% - 32px);
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: space-between;
|
||
// padding: 8px;
|
||
// .childItem{
|
||
// width: calc(100% / 3);
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
// .childLabel{
|
||
// font-size: 14px;
|
||
// font-family: PingFangSC-Regular, PingFang SC;
|
||
// font-weight: 400;
|
||
// color: #786B6C;
|
||
// line-height: 20px
|
||
// }
|
||
// .childValue{
|
||
// font-size: 18px;
|
||
// font-family: DINAlternate-Bold, DINAlternate;
|
||
// font-weight: bold;
|
||
// color: #160002;
|
||
// line-height: 24px;
|
||
// }
|
||
// }
|
||
// }
|
||
//}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.swiperBox {
|
||
width: 100%;
|
||
|
||
.swiperItem {
|
||
width: 100%;
|
||
|
||
.header {
|
||
width: 100%;
|
||
//height: calc(1.056 * 100vw);
|
||
padding: 0 16px;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
background-repeat: no-repeat;
|
||
//background-size: cover;
|
||
background-size: 100% 648rpx;
|
||
background-position: 100% 100%;
|
||
|
||
.car {
|
||
width: 100vw;
|
||
height: 100%;
|
||
position: absolute;
|
||
z-index: 0;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.analyse {
|
||
width: calc(100vw - 32px);
|
||
height: 48px;
|
||
box-sizing: border-box;
|
||
padding: 6px 12px;
|
||
background: #fff;
|
||
margin-top: 16px;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
position: absolute;
|
||
bottom: 16px;
|
||
|
||
.title {
|
||
width: 28px;
|
||
height: 18px;
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
line-height: 18px;
|
||
padding: 0 4px;
|
||
text-align: center;
|
||
border-radius: 4px;
|
||
background: rgba(6, 93, 255, 0.1);
|
||
}
|
||
|
||
.content {
|
||
width: calc(100% - 46px);
|
||
padding-left: 6px;
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 18px;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
}
|
||
|
||
.headerTop {
|
||
width: 100vw;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 9999999999999;
|
||
background: linear-gradient(180deg, #A2B9E8 0%, #B2C6ED 100%);
|
||
|
||
.box {
|
||
padding: 0 16px;
|
||
position: absolute;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
transform: translateY(-50%);
|
||
|
||
.icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.sliderBox {
|
||
width: 100vw;
|
||
box-sizing: border-box;
|
||
padding: 0 16rpx;
|
||
position: absolute;
|
||
z-index: 9;
|
||
left: 0;
|
||
}
|
||
|
||
.pickerTop {
|
||
margin-left: 16rpx;
|
||
|
||
.selectService {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.img {
|
||
width: 40px;
|
||
height: 40px;
|
||
z-index: 2;
|
||
}
|
||
|
||
.select {
|
||
height: 32px;
|
||
background: #F8F8FA;
|
||
border-radius: 0 16px 16px 0;
|
||
transform: translateX(-20px);
|
||
box-sizing: border-box;
|
||
padding-left: 25px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.content {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.uni-input {
|
||
padding: 0;
|
||
background: transparent;
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
}
|
||
|
||
.area {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
line-height: 40px;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.rightArrow {
|
||
width: 24px;
|
||
height: 12px;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.title {
|
||
font-size: 36rpx;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 600;
|
||
color: #1C2130;
|
||
line-height: 56rpx;
|
||
}
|
||
|
||
.seize {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.serviceArea {
|
||
position: absolute;
|
||
box-sizing: border-box;
|
||
|
||
.other {
|
||
margin-top: 12px;
|
||
width: calc(100vw - 32px);
|
||
text-align: center;
|
||
|
||
.label {
|
||
height: 54px;
|
||
position: relative;
|
||
|
||
.item {
|
||
position: absolute;
|
||
font-size: 32rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
line-height: 44rpx;
|
||
padding: 4px 12px;
|
||
border-radius: 8rpx 8rpx 0rpx 8rpx;
|
||
}
|
||
|
||
.item {
|
||
background: linear-gradient(180deg, #3190FF 0%, #1657FF 100%);
|
||
top: 0px;
|
||
}
|
||
|
||
.item0 {
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 3;
|
||
background: linear-gradient(180deg, rgba(49, 144, 255, 0.8) 0%, rgba(22, 87, 255, 0.8) 100%);
|
||
}
|
||
|
||
.item1 {
|
||
left: 25%;
|
||
top: 80%;
|
||
z-index: 2;
|
||
background: linear-gradient(180deg, rgba(49, 144, 255, 0.7) 0%, rgba(22, 87, 255, 0.7) 100%);
|
||
}
|
||
|
||
.item2 {
|
||
right: 15%;
|
||
top: 80%;
|
||
z-index: 2;
|
||
background: linear-gradient(180deg, rgba(49, 144, 255, 0.6) 0%, rgba(22, 87, 255, 0.6) 100%);
|
||
}
|
||
|
||
.item3 {
|
||
right: 2%;
|
||
top: 100%;
|
||
z-index: 1;
|
||
background: linear-gradient(180deg, rgba(49, 144, 255, 0.5) 0%, rgba(22, 87, 255, 0.5) 100%);
|
||
}
|
||
|
||
.item4 {
|
||
left: 2%;
|
||
top: 100%;
|
||
z-index: 1;
|
||
background: linear-gradient(180deg, rgba(49, 144, 255, 0.4) 0%, rgba(22, 87, 255, 0.4) 100%);
|
||
}
|
||
}
|
||
|
||
.car {
|
||
width: 228px;
|
||
height: 95px;
|
||
}
|
||
}
|
||
|
||
.detailBox {
|
||
width: 340rpx;
|
||
height: 312rpx;
|
||
background: linear-gradient(136deg, #F0F6FF 0%, #FFFFFF 100%);
|
||
border-radius: 16rpx;
|
||
box-sizing: border-box;
|
||
padding: 24rpx 32rpx;
|
||
|
||
.detailTop {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.topLeft {
|
||
background: linear-gradient(180deg, rgba(49, 144, 255, 0.2) 0%, rgba(22, 87, 255, 0.2) 100%);
|
||
border-radius: 8rpx;
|
||
padding: 0 16rpx;
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #1E67FF;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.topRight {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.rightText {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A69E9F;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.moreIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.functionList {
|
||
.functionItem {
|
||
margin-top: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.haveFun {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 18rpx;
|
||
}
|
||
|
||
.carIcon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.funText {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
color: #6C737A;
|
||
line-height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.charts {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 28px 16px 0;
|
||
|
||
.chartsItem {
|
||
.top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.title {
|
||
font-size: 34rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 48rpx;
|
||
}
|
||
|
||
.value {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
|
||
.topItem {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.title {
|
||
font-size: 17px;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.box {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.value {
|
||
font-size: 16px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 600;
|
||
color: #000;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.right {
|
||
margin-left: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.arrowTop {
|
||
width: 14px;
|
||
height: 14px;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.text {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #782717;
|
||
line-height: 20px;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.compare {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #a69e9f;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
|
||
.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: #ae664e;
|
||
line-height: 36rpx;
|
||
}
|
||
|
||
.icon {
|
||
width: 24px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.selectType {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 12px auto;
|
||
|
||
.item {
|
||
border-radius: 4px;
|
||
padding: 2px 6px;
|
||
margin-right: 6px;
|
||
margin-bottom: 6px;
|
||
box-sizing: border-box;
|
||
|
||
.icon {
|
||
width: 10px;
|
||
height: 10px;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.text {
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #786B6C;
|
||
}
|
||
}
|
||
|
||
.itemSelect {
|
||
border: 1px solid #ccc;
|
||
background: rgba(237, 239, 244, 0.2);
|
||
}
|
||
|
||
.itemUnSelect {
|
||
border: 1px solid #ccc;
|
||
background: rgba(202, 208, 218, 0.5);
|
||
}
|
||
}
|
||
|
||
.tab {
|
||
width: 100%;
|
||
height: 38px;
|
||
background: #F2F1F1;
|
||
border-radius: 4px;
|
||
box-sizing: border-box;
|
||
padding: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 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;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
font-size: 34rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 48rpx;
|
||
}
|
||
|
||
.homePlace {}
|
||
}
|
||
|
||
.chartsItem:last-child {
|
||
padding-bottom: 32px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.noData {
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: relative;
|
||
|
||
.box {
|
||
margin: 30vh auto 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.img {
|
||
width: 20vw;
|
||
height: 24vw;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.text {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #6C737A;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|