ylj/ahyd_DIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
cclu 2023-07-10 18:30:40 +08:00
parent b569c66d33
commit 59998f36cb
18 changed files with 1095 additions and 443 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
pages.json
View File

@ -147,7 +147,8 @@
{ {
"path": "specialCase", "path": "specialCase",
"style": { "style": {
"navigationBarTitleText": "" "navigationBarTitleText": "",
"navigationStyle": "custom"
} }
}, },
{ {
@ -175,6 +176,20 @@
} }
] ]
}, },
{
// 商业BI新版
"root": "pages/commercialBINew",
"pages": [
{
"path": "flowAnalysis",
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom",
"disableScroll": true
}
}
]
},
{ {
"root": "pages/plan", "root": "pages/plan",
"pages": [ "pages": [

627
pages/commercialBI/carPortrait.vue
View File

@ -42,15 +42,31 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="isShowAllProvince" class="headerTop" >
<div v-if="isShowAllProvince" class="headerTop" :style="{height:(menu.bottom + 6) + 'px'}"> <div class="header" :style="{height:menu.height + 'px',top:menu.top+'px'}">
<div class="box" :style="{top:(menu.bottom - (menu.height / 2)) + 'px'}"> <image class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg" @click="handleBack"/>
<div class="icon" @click="handleBack"> <div class="timeSelect">
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"></image> <img class="selectIcon" src="/static/images/newCommercial/selectDateIcon.svg"/>
<picker mode="date" :value="searchText" :end="lastDay" @change="changeAllProvinceSearch" >
<view class="time">
<view class="text">{{ searchText }}</view>
<image class="icon" src="/static/images/newCommercial/arrow_bottom.svg"></image>
</view>
</picker>
</div>
</div>
<div class="picker" :style="{top:(menu.bottom + 24)+'px'}" @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>
<text class="title">车流画像</text>
<!-- 占位 -->
<div class="seize"></div>
</div> </div>
</div> </div>
<div class="charts" v-if="!isShowAllProvince"> <div class="charts" v-if="!isShowAllProvince">
@ -148,94 +164,137 @@
<no-data v-if="!percentEntryData.length" :type="'car'"/> <no-data v-if="!percentEntryData.length" :type="'car'"/>
</div> </div>
</div> </div>
<div v-else class="otherCharts" :style="{paddingTop:(menu.bottom + 18)+'px'}"> <div v-else class="otherCharts">
<div v-if="regionList.length>0">
<view class="chartsTop">
<view class="left">
<div class="serviceArea" :style="{top : (menu.bottom + 14) + 'px'}" @click="handleGoSelectService">
<div class="picker">
<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>
<view class="right">
<picker mode="date" :value="searchText" :end="lastDay" @change="changeAllProvinceSearch" >
<view class="time">
<view class="uni-input" style="background: transparent;padding: 0;height:100%">{{ searchText }}</view>
<image class="icon" src="/static/images/index/arrow_bottom.svg"></image>
</view>
</picker>
</view>
</view>
</div>
<div class="list"> <div class="list">
<div class="listItem" v-for="(item,index) in regionList" :key="index" @click="handleNoneChild(item)"> <span class="itemTitle">车流数据</span>
<div class="itemTop"> <div class="listItem" v-for="(item,index) in regionList" :key="index" @click="handleNoneChild(item)">
<div class="itemLeft"> <image class="bg" :src="item.bg"/>
<span class="serverName">{{item.name}}</span> <div class="listBox" :style="{borderBottom:item.showChild?'1px solid #D9DBE0':'0px solid #D9DBE0'}">
<span class="value">{{item.entry}} / {{item.flow}}</span> <div class="itemTop">
<!-- <span class="value">1,000,000 / 1,000,000</span>--> <div class="itemLeft">
</div> <div style="display: flex;align-items: center">
<div class="itemCenter"> <img class="itemFixed" src="/static/images/newCommercial/fixedIcon.svg"/>
<span class="serverName">入区率</span> <span class="serverName">{{item.name.split('管理中心')[0]}}</span>
<span class="value">{{item.flowRate}}</span>
</div>
<div class="itemRight">
<div style="height: 100%;display: flex;align-items: center;">
<image :style="{transform:item.showChild?`rotate(90deg)`:''}" class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
</div>
</div>
<div class="other">
</div> </div>
</div> </div>
<block v-if="item.showChild"> <img class="itemRight" :style="{transform:item.showChild?'':'rotate(-90deg)'}" src="/static/images/newCommercial/arrow_bottom.svg"/>
<scroll-view scroll-y="true" style="height: 400px"> </div>
<div class="serviceItem" v-for="(subItem,subIndex) in item.spList" :key="subIndex" :style="{background:subIndex%2===0?'#FCFCFC':'#f7f7f7'}" @click.stop="()=>{}"> <div class="itemDetail">
<div class="subItemTop"> <div class="message" style="width: 30%">
<div class="serviceItemLeft"> <span class="value">{{item.entry}}</span>
<div style="display: flex;align-items: center"> <span class="label">入区流量</span>
<image class="leftIcon" src="/static/images/authority/serverpart.png"/> </div>
<span class="name">{{subItem.name}}</span> <div class="message" style="width: 30%">
</div> <span class="value">{{item.flow}}</span>
</div> <span class="label">断面流量</span>
<div class="serviceItemCenter"> </div>
<span class="title">入区流量/断面流量</span> <div class="message" style="flex-direction: initial;width: 40%">
</div> <div style="width: 40px;height: 40px;background: red"></div>
<div class="serviceItemRight"> <!-- <EntryRate :data="item.entryList" style="width: 40px;height: 40px"/>-->
<span class="text">大/中/小车型</span> <div style="display: flex;flex-direction: column">
</div> <span class="value" style="color: red">{{item.flowRate}}</span>
</div> <span class="label">入区流量</span>
<div class="subItemBottom"> </div>
<div class="subBottomItem" v-for="(thirdItem,thirdIndex) in subItem.regionList" :key="thirdIndex"> </div>
<div class="subBottomItemTop"> </div>
<div class="topLeft">
<span :class="thirdIndex===0?'position0':'position1'">{{thirdItem.name}}区</span>
<span v-if="thirdItem.entryRate!==0 && thirdItem.Vehicle_Count<thirdItem.SectionFlow_Count">:</span>
<span class="rate" :style="{color:thirdItem.entryRate>30 || thirdItem.entryRate<5?'red':''}" v-if="thirdItem.entryRate!==0 && thirdItem.Vehicle_Count<thirdItem.SectionFlow_Count">{{thirdItem.entryRate}}%</span>
</div>
<div class="topCenter">
<span>{{thirdItem.Vehicle_Count}}/{{thirdItem.SectionFlow_Count}}</span>
</div>
<div class="topRight">
<span>{{thirdItem.LargeVehicle_Count}}/{{thirdItem.MediumVehicle_Count}}/{{thirdItem.MinVehicle_Count}}</span>
</div>
</div>
</div>
</div>
</div>
</scroll-view>
</block>
</div> </div>
<div class="childList" v-if="item.showChild" @click.stop="">
<div class="childItem" v-for="(subItem,subIndex) in item.spList" :key="subIndex" :style="{borderBottom: subIndex===item.spList.length -1 ?'0px solid #EEEEEE':'1px solid #EEEEEE'}">
<div class="childTop">
<div class="topLeft">
<div class="imgBox">
<image class="topIcon" src="/static/images/newCommercial/mapIcon.svg"/>
</div>
<span class="serviceName">{{subItem.name}}</span>
</div>
<image class="topRight" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
</div>
<div class="childDetail" v-for="(thirdItem,thirdIndex) in subItem.regionList" :key="thirdIndex">
<div class="thirdItem">
<span class="serviceFixed">{{thirdItem.name}}区</span>
<div class="itemType">
<div class="typeValue">{{thirdItem.LargeVehicle_Count}}/{{thirdItem.MediumVehicle_Count}}/{{thirdItem.MinVehicle_Count}}</div>
<div class="typeLabel">大/中/小型车</div>
</div>
<div class="itemType">
<div class="typeValue">{{thirdItem.Vehicle_Count}}/{{thirdItem.SectionFlow_Count}}</div>
<div class="typeLabel">入区/断面</div>
</div>
<div class="itemType">
<div class="typeValue" style="color: #E83944">{{thirdItem.entryRate}}%</div>
<div class="typeLabel">入区率</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="listItem" v-for="(item,index) in regionList" :key="index" @click="handleNoneChild(item)">-->
<!-- <div class="itemTop">-->
<!-- <div class="itemLeft">-->
<!-- <span class="serverName">{{item.name}}</span>-->
<!-- <span class="value">{{item.entry}} / {{item.flow}}</span>-->
<!--&lt;!&ndash; <span class="value">1,000,000 / 1,000,000</span>&ndash;&gt;-->
<!-- </div>-->
<!-- <div class="itemCenter">-->
<!-- <span class="serverName">入区率</span>-->
<!-- <span class="value">{{item.flowRate}}</span>-->
<!-- </div>-->
<!-- <div class="itemRight">-->
<!-- <div style="height: 100%;display: flex;align-items: center;">-->
<!-- <image :style="{transform:item.showChild?`rotate(90deg)`:''}" class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="other">-->
<!-- </div>-->
<!-- </div>-->
<!-- <block v-if="item.showChild">-->
<!-- <scroll-view scroll-y="true" style="height: 400px">-->
<!-- <div class="serviceItem" v-for="(subItem,subIndex) in item.spList" :key="subIndex" :style="{background:subIndex%2===0?'#FCFCFC':'#f7f7f7'}" @click.stop="()=>{}">-->
<!-- <div class="subItemTop">-->
<!-- <div class="serviceItemLeft">-->
<!-- <div style="display: flex;align-items: center">-->
<!-- <image class="leftIcon" src="/static/images/authority/serverpart.png"/>-->
<!-- <span class="name">{{subItem.name}}</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="serviceItemCenter">-->
<!-- <span class="title">入区流量/断面流量</span>-->
<!-- </div>-->
<!-- <div class="serviceItemRight">-->
<!-- <span class="text">大/中/小车型</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="subItemBottom">-->
<!-- <div class="subBottomItem" v-for="(thirdItem,thirdIndex) in subItem.regionList" :key="thirdIndex">-->
<!-- <div class="subBottomItemTop">-->
<!-- <div class="topLeft">-->
<!-- <span :class="thirdIndex===0?'position0':'position1'">{{thirdItem.name}}区</span>-->
<!-- <span v-if="thirdItem.entryRate!==0 && thirdItem.Vehicle_Count<thirdItem.SectionFlow_Count">:</span>-->
<!-- <span class="rate" :style="{color:thirdItem.entryRate>30 || thirdItem.entryRate<5?'red':''}" v-if="thirdItem.entryRate!==0 && thirdItem.Vehicle_Count<thirdItem.SectionFlow_Count">{{thirdItem.entryRate}}%</span>-->
<!-- </div>-->
<!-- <div class="topCenter">-->
<!-- <span>{{thirdItem.Vehicle_Count}}/{{thirdItem.SectionFlow_Count}}</span>-->
<!-- </div>-->
<!-- <div class="topRight">-->
<!-- <span>{{thirdItem.LargeVehicle_Count}}/{{thirdItem.MediumVehicle_Count}}/{{thirdItem.MinVehicle_Count}}</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </scroll-view>-->
<!-- </block>-->
<!-- </div>-->
</div> </div>
</div> </div>
</div> </div>
@ -254,11 +313,12 @@ import NoData from "./components/noData.vue";
import Analyse from "./components/analyse.vue"; import Analyse from "./components/analyse.vue";
import CommercialType from "./commercialType.vue"; import CommercialType from "./commercialType.vue";
import shopCell from "../everdayRenven/components/listUnit.vue"; import shopCell from "../everdayRenven/components/listUnit.vue";
import EntryRate from "./components/car/entryRate.vue";
import anhuiYestodayRevenueData from "../everdayRenven/components/anhuiYestodayRevenueData"; import anhuiYestodayRevenueData from "../everdayRenven/components/anhuiYestodayRevenueData";
export default { export default {
name: "carPortrait", name: "carPortrait",
data(){ data(){
const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1) const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1)
return { return {
menu:{}, //手机参数 menu:{}, //手机参数
serviceArray:[], // 选择服务区的列表 serviceArray:[], // 选择服务区的列表
@ -310,7 +370,7 @@ export default {
}, },
components: { components: {
shopCell, shopCell,
CommercialType, CommercialType,EntryRate,
Analyse, NoData, PercentEntry, CarTypeTime, HomePlace, EntryZone,timeAnalysis,MonthTotal}, Analyse, NoData, PercentEntry, CarTypeTime, HomePlace, EntryZone,timeAnalysis,MonthTotal},
computed:{ computed:{
isHaveData(){ isHaveData(){
@ -474,6 +534,8 @@ export default {
item.flow = flowNum item.flow = flowNum
item.flowRate = ((entryNumNoZero / flowNumNoZero)*100).toFixed(2) + '%' item.flowRate = ((entryNumNoZero / flowNumNoZero)*100).toFixed(2) + '%'
item.showChild = true item.showChild = true
item.entryList = [{name:'已入区',value:Number(item.flowRate.split('%')[0])},{name:'未入区',value:100 - item.flowRate.split('%')[0]}]
item.bg = item.name.indexOf('皖中')!==-1?'/static/images/newCommercial/Middle.png':item.name.indexOf('皖西')!==-1?'/static/images/newCommercial/west.png':item.name.indexOf('皖东')!==-1?'/static/images/newCommercial/east.png':item.name.indexOf('皖南')!==-1?'/static/images/newCommercial/south.png':item.name.indexOf('皖北')!==-1?'/static/images/newCommercial/north.png':''
}) })
for (let i=0;i<=bayonetPie.length-1;i++){ for (let i=0;i<=bayonetPie.length-1;i++){
for (let j=0;j<=bayonetPie.length - i - 1;j++){ for (let j=0;j<=bayonetPie.length - i - 1;j++){
@ -486,21 +548,22 @@ export default {
} }
} }
} }
bayonetPie.forEach(item=>{ bayonetPie.forEach(item=>{
for (let i=0;i<=item.spList.length-1;i++){ console.log('item',item)
for (let j=0;j<=item.spList.length - i - 1;j++){ // for (let i=0;i<=item.spList.length-1;i++){
if (item.spList[j] && item.spList[j + 1] && item.spList[j].Vehicle_Count && item.spList[j+1].Vehicle_Count){ // for (let j=0;j<=item.spList.length - i - 1;j++){
if (item.spList[j].Vehicle_Count < item.spList[j+1].Vehicle_Count){ // if (item.spList[j] && item.spList[j + 1] && item.spList[j].Vehicle_Count && item.spList[j+1].Vehicle_Count){
let temp = item.spList[j] // if (item.spList[j].Vehicle_Count < item.spList[j+1].Vehicle_Count){
item.spList[j] = item.spList[j + 1] // let temp = item.spList[j]
item.spList[j + 1] = temp // item.spList[j] = item.spList[j + 1]
} // item.spList[j + 1] = temp
} // }
} // }
} // }
// }
}) })
this.regionList = bayonetPie this.regionList = bayonetPie
console.log('this.regionList',this.regionList)
uni.hideLoading() uni.hideLoading()
}, },
//车型选择 //车型选择
@ -1064,6 +1127,7 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import '/static/public/font/stylesheet.css';
.main{ .main{
width:100%; width:100%;
background: #fff; background: #fff;
@ -1269,42 +1333,95 @@ export default {
} }
} }
.headerTop{ .headerTop{
width: 100vw; width: 100%;
position: fixed; height: 152px;
top: 0; box-sizing: border-box;
left: 0; position: relative;
z-index: 9999999999999; background: linear-gradient(90deg, #60AAFF 0%,#3E74FF 100%);
background: linear-gradient(180deg, #A2B9E8 0%, #B2C6ED 100%); .header{
.box{
padding: 0 16px;
position: absolute; position: absolute;
box-sizing: border-box;
width: 100%; width: 100%;
padding: 0 16px;
box-sizing: border-box;
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
transform: translateY(-50%); .backArrow{
.icon{
width: 24px; width: 24px;
height: 24px; height: 24px;
.img{ margin-right: 16px;
width: 100%; }
height: 100%; .timeSelect{
display: flex;
align-items: center;
.selectIcon{
width: 16px;
height: 16px;
}
.time{
display: flex;
align-items: center;
.text{
margin: 0 5px;
color: #fff;
}
.icon{
width: 18px;
height: 18px;
}
} }
} }
.title{ }
font-size: 36rpx; .picker{
font-family: PingFangSC-Medium, PingFang SC; position: absolute;
font-weight: 600; left: 16px;
color: #1C2130; .selectService{
line-height: 56rpx; display: flex;
} align-items: center;
.seize{ .img{
width: 24px; width: 40px;
height: 24px; 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;
}
}
}
} }
} }
} }
.charts{ .charts{
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -1491,6 +1608,7 @@ export default {
.otherCharts{ .otherCharts{
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 0 16px;
/*日结上传*/ /*日结上传*/
.chartsTop { .chartsTop {
width: 100%; width: 100%;
@ -1581,132 +1699,161 @@ export default {
} }
} }
.list{ .list{
margin-top: 20px; margin-top: 24px;
box-sizing: border-box;
padding-bottom: 12px;
.itemTitle{
display: block;
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
margin-bottom: 12px;
}
.listItem{ .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%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
.itemTop{ 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%; width: 100%;
box-sizing: border-box;
padding: 0 16px;
position: relative;
display: flex; display: flex;
.itemLeft{ justify-content: space-between;
display: flex;
flex-direction: column;
align-items: flex-start;
width: 70%;
.serverName{
color: #929292;
}
.value{
font-weight: 700;
}
}
.itemCenter{
display: flex;
flex-direction: column;
align-items: center; align-items: center;
.serverName{ .itemLeft{
color: #929292; display: inline-block;
padding: 2px 8px;
background: rgba(26, 95, 255, 0.1);
border-radius: 14px;
.itemFixed{
width: 12px;
height: 14px;
margin-right: 4px;
}
.serverName{
font-size: 16px;
font-family: Alimama ShuHeiTi;
color: #1A5FFF;
line-height: 22px
}
} }
.value{ .itemRight{
font-weight: 700; width: 26px;
height: 14px;
} }
} }
.itemRight{ .itemDetail{
display: inline-block; margin-top: 16px;
height: 100%; width: 100%;
position: absolute; display: flex;
right: 16px;bottom:0; justify-content: space-between;
.rightArrow{ align-items: center;
width: 16px; .message{
height: 16px; display: flex;
flex-direction: column;
.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;
}
} }
} }
.other{
width: 0;
}
} }
.serviceItem{ .childList{
width: 100vw; margin-top: 20px;
box-sizing: border-box; border-radius: 8px 8px 0 0;
padding: 4px 16px; box-sizing: border-box;
.subItemTop{ margin-left: 16px;
display: flex; width: calc(100% - 32px);
align-items: center; .childItem{
.serviceItemLeft{ width: 100%;
display: inline-block; border-bottom: 1px solid #EEEEEE;
width: 30%; margin-bottom: 8px;
.leftIcon{ .childTop{
width: 18px; width: 100%;
height: 18px; margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: space-between;
.topLeft{
display: flex;
align-items: center;
.imgBox{
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid #FFFFFF;
overflow: hidden;
.topIcon{
width: 100%;
height: 100%;
}
}
.serviceName{
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 22px;
margin-left: 6px;
}
} }
.name{ .topRight{
position: relative; width: 16px;
height: 16px;
} }
} }
.serviceItemCenter{ .childDetail{
display: inline-block; .thirdItem{
width: 40%;
text-align: center;
.title{
color: #868686;
}
}
.serviceItemRight{
display: inline-block;
width: 30%;
.text{
color: #868686;
}
}
}
.subItemBottom{
.subBottomItem{
.subBottomItemTop{
width: 100%; width: 100%;
.topLeft{ display: flex;
display: inline-block; justify-content: space-between;
width: 30%; margin-bottom: 12px;
.position0{ .serviceFixed{
position: relative; font-size: 14px;
margin-left: 12px; font-family: PingFangSC-Semibold, PingFang SC;
} font-weight: 600;
.position0:before{ color: #160002;
content:''; line-height: 20px;
position: absolute;
width: 4px;
height: 4px;
left: -8px;top: calc(50% - 2px);
border-radius: 50%;
background: #5596F9;
}
.position1{
position: relative;
margin-left: 12px;
}
.position1:before{
content:'';
position: absolute;
width: 4px;
height: 4px;
left: -8px;top: calc(50% - 2px);
border-radius: 50%;
background: #FE6D67;
}
.rate{
color: #EF884F;
}
} }
.topCenter{ .itemType{
display: inline-block; .typeValue{
width: 40%; font-size: 14px;
text-align: center; font-family: PingFangSC-Regular, PingFang SC;
} font-weight: 400;
.topRight{ color: #160002;
display: inline-block; line-height: 20px;
width: 30%; }
.typeLabel{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 18px;
}
} }
} }
} }

103
pages/commercialBI/components/car/entryRate.vue Normal file
View File

@ -0,0 +1,103 @@
<template>
<div>
<div className="carTypeTime">
<canvas style="width: 40px;height: 40px" className="canvas" canvas-id="carTypeTime" id="carTypeTime" @tap="handleTap"/>
<!-- <image v-if="carTypeTimePath" class="canvas" :src="carTypeTimePath"></image>-->
</div>
</div>
</template>
<script>
import uCharts from '@/components/u-charts.js';
import NoData from "../noData.vue";
import Analyse from "../analyse.vue";
var uChartsInstance = {};
export default {
name: "carTypeTime",
components: {Analyse, NoData},
data() {
return {
}
},
props: {
data: {
type: Array,
default: () => []
}
},
onReady(){
console.log('data',this.data)
this.handleCarData(this.data)
},
methods: {
//点击事件
handleTap(e) {
uChartsInstance[e.target.id].showToolTip(e, {
formatter: (item, category, index, opts) => {
}
});
uChartsInstance[e.target.id].touchLegend(e);
},
// 处理传入的数据
handleCarData(value) {
console.log('value',value)
setTimeout(() => {
let res = {
series:[{data:value}]
}
this.drawCharts('carTypeTime', res)
},500)
},
drawCharts(id,data){
const ctx = uni.createCanvasContext(id, this);
uChartsInstance[id] = new uCharts({
type: "ring",
context: ctx,
width: '40px',
height: '40px',
series: data.series,
animation: true,
rotate: false,
rotateLock: false,
background: "#FFFFFF",
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
padding: [5,5,5,5],
dataLabel: true,
enableScroll: false,
legend: {
show: false,
position: "right",
lineHeight: 25
},
extra: {
ring: {
ringWidth: 10,
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: 0,
labelWidth: 5,
border: false,
borderWidth: 1,
borderColor: "#FFFFFF"
}
}
});
},
}
}
</script>
<style scoped lang="scss">
.carTypeTime {
width: 40px;
height: 40px;
.canvas {
width: 40px;
height: 40px;
}
}
</style>

556
pages/commercialBI/specialCase.vue
View File

@ -1,58 +1,91 @@
<template> <template>
<div class="main"> <div class="main">
<div style="width: 100%;height: 40px;display: flex;align-items: center"> <div class="top">
<div class="select"> <image class="bg" src="/static/images/newCommercial/specialBg.png"/>
<div class="time"> <div class="header" :style="{height:menu.height + 'px',top:menu.top+'px'}">
<view class="uni-input" style="background: transparent;padding: 0;height:100%">{{ single }}</view> <image class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg" @click="handleBack"/>
</div> <div class="timeSelect">
<!-- 时间选择器 --> <img class="selectIcon" src="/static/images/newCommercial/selectDate.png"/>
<!-- <picker mode="date" fields="day" :value="single" :end="endData" @change="bindDateChange" >--> <picker mode="date" :value="searchText" :end="lastDay" @change="changeAllProvinceSearch" >
<!-- <view class="time">--> <view class="time">
<!-- <view class="uni-input" style="background: transparent;padding: 0;height:100%">{{ single }}</view>--> <view class="text">{{ searchText }}</view>
<!-- <image class="icon" src="/static/images/index/arrow_bottom.svg"></image>--> <image class="icon" src="/static/images/newCommercial/arrow_bottom.svg"></image>
<!-- </view>--> </view>
<!-- </picker>--> </picker>
</div>
</div>
<div class="list">
<div class="tabs">
<div :class="selectTab===1?'selectTab':'tabItem'" @click="handleTab(1)">{{`${startTime}时入区车流预警`}}</div>
<!-- 凌晨12点到1点之间查看 应该是23时到0时 这里做了个判断 -->
<div :class="selectTab===2?'selectTab':'tabItem'" @click="handleTab(2)">{{endTime===24?`${endTime - 1}-0时入区车流排行`:`0-${startTime}时入区车流排行`}}</div>
</div>
<div style="width: 100%;border-bottom: 1px solid #ccc;margin-top: 10px;padding-bottom: 4px">
<p class="notice" v-if="selectTab===1">注: 1个小时入区流量比4月同一时间流量增幅150%以上且每小时入区车辆超过100辆</p>
<p class="notice" v-if="selectTab===2">注: 前20个从今日零时起至今流量与月均同时段增幅情况</p>
</div>
<div style="height: calc(100vh - 130px);overflow: scroll;}">
<div v-if="selectTab===1" class="item" v-for="(item,index) in firstData" :key="index">
<div class="box" >
<text>{{index + 1}}、</text>
<div class="name">{{item.name}}<div class="normal">{{item.SERVERPART_REGION}}区</div></div>
<div class="enter">{{startTime}}时入区: {{item.VEHICLE_COUNT }}辆</div>
<div class="add">
<image class="addIcon" :src="Number(item.VEHICLE_RATE)>100?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':Number(item.VEHICLE_RATE)===100?'':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
<text :class="item.VEHICLE_RATE > 150?'orangeRed':''"> {{ item.VEHICLE_RATE }}%</text>
</div>
</div>
</div>
<div v-if="selectTab===2" class="item" v-for="(item,index) in secondData" :key="index">
<div class="box">
<text>{{index + 1}}、</text>
<div class="name">{{item.name}}<text class="normal">{{item.SERVERPART_REGION}}区</text></div>
<div class="enter">今日入区: {{item.VEHICLE_COUNT }}辆</div>
<div class="add">
<image class="addIcon" :src="Number(item.VEHICLE_RATE)>100?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':Number(item.VEHICLE_RATE)===100?'':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>
<text :class="item.VEHICLE_RATE > 150?'orangeRed':''"> {{ item.VEHICLE_RATE }}%</text>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="topBox">
<div class="boxLeft">
<div class="headerTitle">实时分析</div>
<span class="notice">注: 1个小时入区流量比5月同一时间流量增幅150%以上且每小时入区车辆超过100辆</span>
</div>
<div class="boxRight">
<span class="day">{{showDay}}</span>
<image class="dayBox" src="/static/images/newCommercial/dayBox.png"/>
</div>
</div>
</div>
</div> </div>
<!-- <div class="main">-->
<!-- <div style="width: 100%;height: 40px;display: flex;align-items: center">-->
<!-- <div class="select">-->
<!-- <div class="time">-->
<!-- <view class="uni-input" style="background: transparent;padding: 0;height:100%">{{ single }}</view>-->
<!-- </div>-->
<!-- &lt;!&ndash; 时间选择器 &ndash;&gt;-->
<!-- &lt;!&ndash; <picker mode="date" fields="day" :value="single" :end="endData" @change="bindDateChange" >&ndash;&gt;-->
<!-- &lt;!&ndash; <view class="time">&ndash;&gt;-->
<!-- &lt;!&ndash; <view class="uni-input" style="background: transparent;padding: 0;height:100%">{{ single }}</view>&ndash;&gt;-->
<!-- &lt;!&ndash; <image class="icon" src="/static/images/index/arrow_bottom.svg"></image>&ndash;&gt;-->
<!-- &lt;!&ndash; </view>&ndash;&gt;-->
<!-- &lt;!&ndash; </picker>&ndash;&gt;-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="list">-->
<!-- <div class="tabs">-->
<!-- <div :class="selectTab===1?'selectTab':'tabItem'" @click="handleTab(1)">{{`${startTime}时入区车流预警`}}</div>-->
<!-- &lt;!&ndash; 凌晨12点到1点之间查看 应该是23时到0时 这里做了个判断 &ndash;&gt;-->
<!-- <div :class="selectTab===2?'selectTab':'tabItem'" @click="handleTab(2)">{{endTime===24?`${endTime - 1}-0时入区车流排行`:`0-${startTime}时入区车流排行`}}</div>-->
<!-- </div>-->
<!-- <div style="width: 100%;border-bottom: 1px solid #ccc;margin-top: 10px;padding-bottom: 4px">-->
<!-- <p class="notice" v-if="selectTab===1">注: 1个小时入区流量比4月同一时间流量增幅150%以上且每小时入区车辆超过100辆</p>-->
<!-- <p class="notice" v-if="selectTab===2">注: 前20个从今日零时起至今流量与月均同时段增幅情况</p>-->
<!-- </div>-->
<!-- <div style="height: calc(100vh - 130px);overflow: scroll;}">-->
<!-- <div v-if="selectTab===1" class="item" v-for="(item,index) in firstData" :key="index">-->
<!-- <div class="box" >-->
<!-- <text>{{index + 1}}、</text>-->
<!-- <div class="name">{{item.name}}<div class="normal">{{item.SERVERPART_REGION}}区</div></div>-->
<!-- <div class="enter">{{startTime}}时入区: {{item.VEHICLE_COUNT }}辆</div>-->
<!-- <div class="add">-->
<!-- <image class="addIcon" :src="Number(item.VEHICLE_RATE)>100?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':Number(item.VEHICLE_RATE)===100?'':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>-->
<!-- <text :class="item.VEHICLE_RATE > 150?'orangeRed':''"> {{ item.VEHICLE_RATE }}%</text>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div v-if="selectTab===2" class="item" v-for="(item,index) in secondData" :key="index">-->
<!-- <div class="box">-->
<!-- <text>{{index + 1}}、</text>-->
<!-- <div class="name">{{item.name}}<text class="normal">{{item.SERVERPART_REGION}}区</text></div>-->
<!-- <div class="enter">今日入区: {{item.VEHICLE_COUNT }}辆</div>-->
<!-- <div class="add">-->
<!-- <image class="addIcon" :src="Number(item.VEHICLE_RATE)>100?'https://eshangtech.com/ShopICO/ahyd-BID/index/addIcon.svg':Number(item.VEHICLE_RATE)===100?'':'https://eshangtech.com/ShopICO/ahyd-BID/index/reduce.svg'"></image>-->
<!-- <text :class="item.VEHICLE_RATE > 150?'orangeRed':''"> {{ item.VEHICLE_RATE }}%</text>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</template> </template>
<script> <script>
@ -60,6 +93,7 @@ import request from '@/util/index.js'
export default { export default {
name: "specialCase", name: "specialCase",
data(){ data(){
const lastDay = this.$util.cutDate(new Date(), 'YYYY-MM-DD', -1)
return { return {
single:'',//显示时间 single:'',//显示时间
endData:'', // 结束时间 endData:'', // 结束时间
@ -70,48 +104,69 @@ export default {
secondData:[],// tab选项卡为2的时候的数据 secondData:[],// tab选项卡为2的时候的数据
queryTime:'',// 推送传入的时间 queryTime:'',// 推送传入的时间
time:'',// 给接口的time time:'',// 给接口的time
statusBarHeight:'',
menu:'',
searchText:'',
showDay:''// 顶部右侧显示的日期
} }
}, },
onLoad(query){ onLoad(query){
// 获取手机参数对页面进行适配
let systemInfo = uni.getSystemInfoSync()
this.statusBarHeight = Number(systemInfo.statusBarHeight)
this.menu = uni.getMenuButtonBoundingClientRect()
let storeTime = uni.getStorageSync('lastDay')
if (storeTime){
this.time = storeTime
}
this.searchText = this.time
const date = new Date(this.time)
let d = date.getDate()
if (d<10){
d = '0'+d
}
this.showDay = d
//传入的时间用在最上面的选择器上 //传入的时间用在最上面的选择器上
this.queryTime = query.time this.queryTime = query.time
let date //如果有推送按照推送走 没推送 走当前时间 // let date //如果有推送按照推送走 没推送 走当前时间
if(this.queryTime){ // if(this.queryTime){
date = new Date(this.queryTime) // date = new Date(this.queryTime)
}else{ // }else{
date = new Date() // date = new Date()
} // }
const y = date.getFullYear() // const y = date.getFullYear()
let m = date.getMonth() + 1 // let m = date.getMonth() + 1
let d = date.getDate() // let d = date.getDate()
if (m<10){ // if (m<10){
m = '0'+m // m = '0'+m
} // }
// 显示的时间范围 用当前的时间 // // 显示的时间范围 用当前的时间
//
let h = date.getHours() // let h = date.getHours()
// 如果小时减一小于0的话 天数也会往前移动一天 // // 如果小时减一小于0的话 天数也会往前移动一天
if (h-1<0){ // if (h-1<0){
d = d -1 // d = d -1
} // }
if (d<10){ // if (d<10){
d = '0'+ d // d = '0'+ d
} // }
this.endData = `${y}-${m}-${d}` // this.endData = `${y}-${m}-${d}`
this.single = `${y}-${m}-${d}` // this.single = `${y}-${m}-${d}`
this.time = `${y}-${m}-${d}` // this.time = `${y}-${m}-${d}`
console.log('h',h) // console.log('h',h)
// 12点的时候 等于0 // // 12点的时候 等于0
if (h===0){ // if (h===0){
h = 24 // h = 24
} // }
if (this.queryTime){ // if (this.queryTime){
this.startTime = h // this.startTime = h
}else{ // }else{
this.startTime = h - 1 // this.startTime = h - 1
} // }
this.endTime = h // this.endTime = h
this.handleTab(1) // this.handleTab(1)
}, },
methods:{ methods:{
// 时间器改变的方法 // 时间器改变的方法
@ -170,128 +225,227 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.main{ .main{
width: 100%; width: 100%;
box-sizing: border-box; .top{
padding: 0 16px; width: 100%;
.select{ height: 212px;
margin-left: 8px; position: relative;
display: inline-block; .bg{
.time { width: 100%;
display: flex; height: 100%;
align-items: center; position: absolute;
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{ .header{
.tabs{ position: absolute;
width: 100%; width: 100%;
display: flex; padding: 0 16px;
.tabItem{ box-sizing: border-box;
width: 50%; display: flex;
height: 40px; align-items: center;
font-size: 12px; .backArrow{
line-height: 40px; width: 24px;
text-align: center; height: 24px;
background: #f0f0f0; margin-right: 16px;
border-radius: 10px 10px 0 0;
}
.selectTab{
width: 50%;
height: 40px;
font-size: 12px;
line-height: 40px;
text-align: center;
background: #fff;
border-radius: 10px 10px 0 0;
}
} }
.item{ .timeSelect{
width: 100%;
display: flex; display: flex;
margin-bottom: 5px; align-items: center;
margin-top: 10px; .selectIcon{
.box{ width: 16px;
width: 100%; height: 16px;
display: flex;
align-items: center;
.name{
width: 40%;
font-size: 16px;
font-weight: 600;
text-align: left;
white-space: nowrap;
display: flex;
align-items: baseline;
.normal{
font-size: 12px;
font-weight: 400;
.unit{
color:#ccc;
}
}
}
.enter{
font-size: 12px;
width: 30%;
text-align: left;
white-space: nowrap;
}
.add{
font-size: 12px;
width: 30%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
.orangeRed{
color:orangered;
}
.addIcon{
width: 20px;
height: 20px;
}
}
} }
.time{
display: flex;
align-items: center;
.text{
margin: 0 5px;
color: #fff;
}
.icon{
width: 18px;
height: 18px;
}
}
}
} }
::-webkit-scrollbar { .topBox{
width: 4px; position: absolute;
height: 4px; left: 16px;
color:transparent; top: 100px;
width: calc(100% - 32px);
display: flex;
align-items: center;
.boxLeft{
.headerTitle{
font-size: 24px;
font-family: AlimamaShuHeiTi;
color: #FEFFFE;
font-weight: bold;
line-height: 24px;
margin-bottom: 6px;
}
.notice{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 16px;
display: inline-block;
width: 70%;
}
} }
.boxRight{
/*定义滚动条轨道 内阴影+圆角*/ width: 70px;
::-webkit-scrollbar-track { height: 50px;
border-radius: 10px; position: relative;
background-color:transparent; .day{
font-size: 24px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #21ADBA;
line-height: 28px;
position: absolute;
top: 50%;left: 50%;
transform: translate(-14px,-7px);
z-index:3;
}
.dayBox{
position: absolute;
top: 0;left: 0;
width: 100%;
height: 100%;
}
} }
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color:transparent;
}
.notice{
font-size: 12px;
color: gray;
} }
} }
} }
//.main{
// width: 100%;
// box-sizing: border-box;
// padding: 0 16px;
// .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;
// }
// }
// }
// .list{
// .tabs{
// width: 100%;
// display: flex;
// .tabItem{
// width: 50%;
// height: 40px;
// font-size: 12px;
// line-height: 40px;
// text-align: center;
// background: #f0f0f0;
// border-radius: 10px 10px 0 0;
// }
// .selectTab{
// width: 50%;
// height: 40px;
// font-size: 12px;
// line-height: 40px;
// text-align: center;
// background: #fff;
// border-radius: 10px 10px 0 0;
// }
// }
// .item{
// width: 100%;
// display: flex;
// margin-bottom: 5px;
// margin-top: 10px;
// .box{
// width: 100%;
// display: flex;
// align-items: center;
// .name{
// width: 40%;
// font-size: 16px;
// font-weight: 600;
// text-align: left;
// white-space: nowrap;
// display: flex;
// align-items: baseline;
// .normal{
// font-size: 12px;
// font-weight: 400;
// .unit{
// color:#ccc;
// }
// }
// }
// .enter{
// font-size: 12px;
// width: 30%;
// text-align: left;
// white-space: nowrap;
// }
// .add{
// font-size: 12px;
// width: 30%;
// text-align: center;
// display: flex;
// align-items: center;
// justify-content: center;
// .orangeRed{
// color:orangered;
// }
// .addIcon{
// width: 20px;
// height: 20px;
// }
// }
// }
// }
// ::-webkit-scrollbar {
// width: 4px;
// height: 4px;
// color:transparent;
// }
//
// /*定义滚动条轨道 内阴影+圆角*/
// ::-webkit-scrollbar-track {
// border-radius: 10px;
// background-color:transparent;
// }
//
// /*定义滑块 内阴影+圆角*/
// ::-webkit-scrollbar-thumb {
// border-radius: 10px;
// background-color:transparent;
// }
// .notice{
// font-size: 12px;
// color: gray;
// }
// }
//}
</style> </style>

152
pages/commercialBINew/flowAnalysis.vue Normal file
View File

@ -0,0 +1,152 @@
<template>
<div class="pageMain">
<div class="top">
<div class="header" :style="{height:menu.height + 'px',top:menu.top+'px'}">
<img class="backArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"/>
<div class="timeSelect">
<img class="selectIcon" src="/static/images/newCommercial/selectDateIcon.svg"/>
<picker mode="date" :value="single" :end="endData" @change="bindDateChange" >
<view class="time">
<view class="text">{{ single }}2023/07/06</view>
<image class="icon" src="/static/images/newCommercial/arrow_bottom.svg"></image>
</view>
</picker>
</div>
</div>
<div class="picker">
<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>
</div>
</template>
<script>
export default {
name: "flowAnalysis",
data() {
return {
menu:'',
statusBarHeight:'',
single:'',
thisDay:'',
endData:'',
serviceInfo:{}, //当前服务区信息
}
},
onLoad(){
// 获取手机参数对页面进行适配
let systemInfo = uni.getSystemInfoSync()
this.statusBarHeight = Number(systemInfo.statusBarHeight)
this.menu = uni.getMenuButtonBoundingClientRect()
console.log('systemInfo',systemInfo)
console.log('this.menu',this.menu)
},
methods:{
bindDateChange(){
}
}
}
</script>
<style scoped lang="scss">
.pageMain{
width: 100%;
height: 100%;
.top{
width: 100%;
height: 152px;
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;
}
.timeSelect{
display: flex;
align-items: center;
.selectIcon{
width: 16px;
height: 16px;
}
.time{
display: flex;
align-items: center;
.text{
margin: 0 5px;
}
.icon{
width: 18px;
height: 18px;
}
}
}
}
.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;
}
}
}
}
}
}
}
</style>

2
pages/index/index.vue
View File

@ -488,7 +488,7 @@ export default {
isReturn : true, isReturn : true,
isSuggestion:false,//可不可以看意见 isSuggestion:false,//可不可以看意见
loadMore:true,// 是否收缩 loadMore:true,// 是否收缩
special:false special:true
} }
}, },
watch:{ watch:{

BIN
static/images/newCommercial/Middle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

13
static/images/newCommercial/arrow_bottom.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>图标/更多@2x</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.800000012">
<g id="车流分析0706" transform="translate(-202.000000, -1661.000000)" fill="#576EFF">
<g id="图标/更多" transform="translate(202.000000, 1661.000000)">
<g id="图标/更多" transform="translate(8.000000, 8.000000) rotate(-270.000000) translate(-8.000000, -8.000000) ">
<path d="M6.10744349,2.10744349 L11.2928932,7.29289322 L11.2928932,7.29289322 C11.6834175,7.68341751 11.6834175,8.31658249 11.2928932,8.70710678 L6.10744349,13.8925565 C5.7169192,14.2830808 5.08375422,14.2830808 4.69322993,13.8925565 C4.30270564,13.5020322 4.30270564,12.8688672 4.69322993,12.4783429 L9.17133671,7.99955027 L4.69322993,3.52165705 C4.30270564,3.13113276 4.30270564,2.49796778 4.69322993,2.10744349 C5.08375422,1.7169192 5.7169192,1.7169192 6.10744349,2.10744349 Z" id="形状结合"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
static/images/newCommercial/dayBox.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
static/images/newCommercial/east.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

12
static/images/newCommercial/fixedIcon.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组@2x</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="车流分析0706" transform="translate(-140.000000, -1661.000000)">
<g id="编组" transform="translate(140.000000, 1661.000000)">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<path d="M8,1 C11.3137085,1 14,3.6862915 14,7 C14,9.209139 12,11.8758057 8,15 C4,11.8758057 2,9.209139 2,7 C2,3.6862915 4.6862915,1 8,1 Z M8,4.5 C6.61928813,4.5 5.5,5.61928813 5.5,7 C5.5,8.38071187 6.61928813,9.5 8,9.5 C9.38071187,9.5 10.5,8.38071187 10.5,7 C10.5,5.61928813 9.38071187,4.5 8,4.5 Z" id="形状结合" fill="#1A5FFF" opacity="0.5"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 948 B

32
static/images/newCommercial/mapIcon.svg Normal file
View File

@ -0,0 +1,32 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>服务区@2x</title>
<defs>
<circle id="path-1" cx="14.3492424" cy="14" r="14"></circle>
</defs>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="车流分析0706" transform="translate(-298.000000, -1661.000000)">
<g id="服务区" transform="translate(297.000000, 1661.000000)">
<g id="编组" transform="translate(1.000000, 0.000000)">
<g id="服务区/地址备份-2" transform="translate(-1.000000, 0.000000)">
<g id="编组-88" transform="translate(0.650758, 0.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="蒙版" fill="#EFEFEF" xlink:href="#path-1"></use>
<path d="M1.37741911,9.5 C3.0745178,12.6945387 5.90785113,15.527872 9.87741911,18 L25.3774191,3.5 L15.8774191,-4 C5.87741911,0 1.04408578,2 1.37741911,2 C1.87741911,2 -1.16822891,4.70819195 1.37741911,9.5 Z" id="路径-10" fill="#A3C8FF" mask="url(#mask-2)"></path>
<polygon id="路径-12" fill="#AFE881" mask="url(#mask-2)" points="4.3492424 22.5 11.8492424 16 20.3492424 21 24.8492424 27.5 12.8492424 30.5 0.349242405 26.5"></polygon>
<path d="M3.94974747,25.1066017 L1.82842712,22.9852814 L6.778,18.0350779 L-1,10.2573593 L1.12132034,8.13603897 L8.899,15.9140779 L23.0416306,1.77207794 L25.1629509,3.89339828 L21.627,7.42807794 L31.5269119,17.3284271 L29.4055916,19.4497475 L19.506,9.55007794 L15.263,13.7920779 L25.8700577,24.3994949 L23.7487373,26.5208153 L13.142,15.9140779 L11.0208153,18.0355339 L3.94974747,25.1066017 Z" id="形状结合" fill="#FFFFFF" mask="url(#mask-2)"></path>
</g>
<g id="map-pin-line" transform="translate(8.000000, 6.000000)">
<polygon id="路径" points="0 0 14 0 14 14 0 14"></polygon>
<path d="M3.28766667,9.85016667 C1.23743261,7.7999075 1.23744618,4.47580305 3.28769698,2.42556062 C5.33794777,0.375318191 8.66205223,0.375318191 10.712303,2.42556062 C12.7625538,4.47580305 12.7625674,7.7999075 10.7123333,9.85016667 L7,13.5625 L3.28766667,9.85016667 Z" id="形状" fill="#007AEB" fill-rule="nonzero"></path>
<path d="M7,8.47116667 C5.71133558,8.47116667 4.66666667,7.42649775 4.66666667,6.13783333 C4.66666667,4.84916892 5.71133558,3.8045 7,3.8045 C8.28866442,3.8045 9.33333333,4.84916892 9.33333333,6.13783333 C9.33333333,7.42649775 8.28866442,8.47116667 7,8.47116667 Z" id="形状结合" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
<circle id="椭圆形备份-8" stroke="#FFFFFF" cx="15" cy="14" r="13.5"></circle>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
static/images/newCommercial/north.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
static/images/newCommercial/selectDate.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 502 B

24
static/images/newCommercial/selectDateIcon.svg Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>首页图标/时间选择1备份_2@2x</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="车流分析0706" transform="translate(-234.000000, -1661.000000)">
<g id="编组" transform="translate(234.000000, 1661.000000)">
<rect id="矩形" fill="#CEE0FF" x="0" y="2" width="16" height="14" rx="1"></rect>
<rect id="矩形" fill="#4078FF" x="3" y="0.5" width="2" height="3.5" rx="1"></rect>
<rect id="矩形备份" fill="#4078FF" x="11" y="0.5" width="2" height="3.5" rx="1"></rect>
<path d="M1,2 L15,2 C15.5522847,2 16,2.44771525 16,3 L16,5 L16,5 L0,5 L0,3 C-6.76353751e-17,2.44771525 0.44771525,2 1,2 Z" id="矩形" fill="#4078FF"></path>
<rect id="矩形" fill="#F8F9FB" x="2.5" y="7" width="3" height="3"></rect>
<rect id="矩形备份-4" fill="#F8F9FB" x="2.5" y="11" width="3" height="3"></rect>
<rect id="矩形备份-2" fill="#F8F9FB" x="6.5" y="7" width="3" height="3"></rect>
<rect id="矩形备份-5" fill="#F8F9FB" x="6.5" y="11" width="3" height="3"></rect>
<rect id="矩形备份-3" fill="#F8F9FB" x="10.5" y="7" width="3" height="3"></rect>
<rect id="矩形备份-6" fill="#F8F9FB" x="10.5" y="11" width="3" height="3"></rect>
<g transform="translate(8.500000, 8.000000) rotate(-45.000000) translate(-8.500000, -8.000000) translate(7.000000, 7.000000)" fill="#3980FE" id="矩形">
<rect x="0" y="0" width="1" height="2"></rect>
<rect x="0" y="1" width="3" height="1"></rect>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
static/images/newCommercial/south.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
static/images/newCommercial/specialBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 182 KiB

BIN
static/images/newCommercial/west.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB