From 998dc2cf5d294380433d26c6958889d824acf9a6 Mon Sep 17 00:00:00 2001 From: lijun <457220798@qq.com> Date: Thu, 15 Jun 2023 18:10:50 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- miniProject/app.js | 9 ++ miniProject/custom-tab-bar/index.js | 2 + miniProject/custom-tab-bar/index.wxss | 28 ++-- miniProject/images/icdown.svg | 14 ++ miniProject/images/rili.png | Bin 763 -> 0 bytes miniProject/images/rili.svg | 24 +++ miniProject/index/index.js | 162 ++++++++++++------- miniProject/index/index.wxml | 8 +- miniProject/index/index.wxss | 9 +- miniProject/index/index2.js | 204 +++++++++++++++--------- miniProject/index/index2.wxml | 13 +- miniProject/index/index2.wxss | 24 ++- miniProject/index/me.wxss | 2 +- miniProject/pages/editPwd/editPwd.wxml | 2 +- miniProject/pages/editPwd/editPwd.wxss | 2 +- miniProject/pages/shopSelect/index.wxml | 4 +- miniProject/pages/shopSelect/index.wxss | 4 +- 17 files changed, 338 insertions(+), 173 deletions(-) create mode 100644 miniProject/images/icdown.svg delete mode 100644 miniProject/images/rili.png create mode 100644 miniProject/images/rili.svg diff --git a/miniProject/app.js b/miniProject/app.js index 28a0a9b..03f7df5 100644 --- a/miniProject/app.js +++ b/miniProject/app.js @@ -37,6 +37,15 @@ App({ this.globalData.navTop = navTop; this.globalData.windowHeight = res.windowHeight; this.globalData.windowWidth = res.windowWidth; + let { screenWidth, screenHeight } = res + // iphoneX 、11、Xr、 Max等设备分辨率 + let _screen = [ + {w: 375, h: 812 }, + {w: 414, h: 896 }, + {w: 390, h: 844 }, + {w: 428, h: 926 }, + ] + this.globalData.isIphoneX = _screen.some(item => item.w === screenWidth && item.h === screenHeight) }, fail(err) { console.log(err); diff --git a/miniProject/custom-tab-bar/index.js b/miniProject/custom-tab-bar/index.js index e42e5f6..293b1f1 100644 --- a/miniProject/custom-tab-bar/index.js +++ b/miniProject/custom-tab-bar/index.js @@ -1,5 +1,7 @@ +const App = getApp(); Component({ data: { + isIphoneX:App.globalData.isIphoneX, show:true, curClick: 1, color: "#7A7E83", diff --git a/miniProject/custom-tab-bar/index.wxss b/miniProject/custom-tab-bar/index.wxss index cd837cc..eaaf90d 100644 --- a/miniProject/custom-tab-bar/index.wxss +++ b/miniProject/custom-tab-bar/index.wxss @@ -1,15 +1,15 @@ .tab-bar { padding-top: 10rpx; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 110rpx; - background: white; - display: flex; - flex-direction: row; - padding-bottom: env(safe-area-inset-bottom); - pointer-events: auto; + position: absolute; + bottom: 0; + left: 0; + right: 0; + /* height: 110rpx; */ + background: white; + display: flex; + flex-direction: row; + padding-bottom: env(safe-area-inset-bottom); + pointer-events: auto; } .tab-bar-border { @@ -32,17 +32,17 @@ } .tab-bar-item image { - width: 27px; - height: 27px; + width: 48rpx; + height: 48rpx; } .tab-bar-item view { - font-size: 10px; + /* font-size: 10px; */ } .active.text { color: #597BFF; } .text { font-size: 28rpx; - margin-top: 5rpx; + /* margin-top: 5rpx; */ } diff --git a/miniProject/images/icdown.svg b/miniProject/images/icdown.svg new file mode 100644 index 0000000..89d7eff --- /dev/null +++ b/miniProject/images/icdown.svg @@ -0,0 +1,14 @@ + + + xiangxia + + + + + + + + + + + \ No newline at end of file diff --git a/miniProject/images/rili.png b/miniProject/images/rili.png deleted file mode 100644 index fe64a4796e6ac3567e0fd1da36603df32b4f06c4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 763 zcmVPx%wMj%lR5(wSlUqnsQ51&1ea>8*nZ#?-%`B3xXj)`g1Q8Ncq|Z@78A&A(MFf(G zWJOjW5=2lzbdkW2goqw`P^sua0*hV()6$wLFQdcQOmpU(9cPA7XH0T799Vm;e|>wc zwa*qLELnSYIf~u^^oWa1<*~4=s5G+e&LNVM18$f)O@Z1Cjnc5 zubT=_OC;Wye-%x!MeK~wFxCB6BKG6O$LMpdG)*1J13k=%`okh98Xn2>z@-?y(A~ja zUpr{w2rQi9ii9$K104T;1BAkZtV#yv7fg03;a1%NQEkG$0lBe=)6>t9o?1MXMYL>d z#A=I9LZ1jy`Q{7`8Q{*Q>*$%;(?=E|uB8NlT1qy)cD$6{4*I49ka#0kHFG$gK6 z6%ij|EXcAr*!Y-%=ZDGu|H{r$$jVkGh2uWf$HC01%x^BstZaI9em_Ms+Khoz1&nF% z#C_s{v%*&A!p@DLs?gdAPCM)>0TcM_Eqrm$tbJCP)e^mtvJDUnLFWfBeHEqP9)+%t zNx)30!v;rpL)&W@9FBsER=|@E7#vChX1Bt=9pEvm_yFcU5Q5S*kevptT}i;Uu7l$I zXu?k~eEtsG3n8q-%WmlXkpyfmzs5gr^WsBk2r=~na?-(JkC*xb@H+@O8BxD`1VZ6> z&G-lfqV}$#*;9li7Ajc<^PKU*;c@si25a-8{+?bK@l9z$e`YO^N?)HI2v37MWDk6t=rxfjW9cr43;zh#Z4 tkuO1=OHl$0t3`ZGangL@fOu-=`~_%dAI`a8s!;#{002ovPDHLkV1i|0XNv#; diff --git a/miniProject/images/rili.svg b/miniProject/images/rili.svg new file mode 100644 index 0000000..472a9c4 --- /dev/null +++ b/miniProject/images/rili.svg @@ -0,0 +1,24 @@ + + + rili + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/miniProject/index/index.js b/miniProject/index/index.js index c3a082b..bf743ef 100644 --- a/miniProject/index/index.js +++ b/miniProject/index/index.js @@ -187,7 +187,8 @@ Component({ startDate:startTime, endDate:endTime, dataLevel:(this.data.types==1 || this.data.types==2)?'hour':'day', - dataIndex:this.data.trendtypes + // dataIndex:this.data.trendtypes + dataIndexes:['PassengerFlow','Exposure','CustomerNum','IntoStoreRate'].toString() }).then(res => { setTimeout(()=>{ this.setData({ @@ -248,13 +249,20 @@ Component({ getLineConfig(res) { let xasix = res.xaxis.data || [] let seriesList = res.series || []; - let data = seriesList[0].data; - let isData = false; - for (let index = 0; index < data.length; index++) { - if(data[index] != null){ - isData = true; + let legendData = ['路过客流','进店客流','顾客人数','进店率'] + seriesList.forEach((item,index)=>{ + if(index==3){ + item.yAxisIndex= 1 } - } + item.name = legendData[index] + }) + let data = seriesList[0].data; + let isData = true; + // for (let index = 0; index < data.length; index++) { + // if(data[index] != null){ + // isData = true; + // } + // } if (!isData) { return { title: { @@ -270,11 +278,11 @@ Component({ } return { grid: { - top: 30, - right: 20, + top: 50, + right: 10, bottom: 20, - left: 5, - containLabel: true + left: 15, + containLabel: false }, tooltip: { trigger: 'axis', @@ -284,19 +292,24 @@ Component({ color: "#444", }, }, - formatter: function (params) { - let html = '' - params.forEach(item => { - html += item.axisValue+ ': ' + (item.value||'') - }) - return html - } + // formatter: function (params) { + // var str = ""; + // if (params.length > 0) { + // str = params[0].name + "\n"; + // } + // for (var i = 0; i < params.length; i++) { + // if (params[i].seriesName !== "") { + // str += params[i].seriesName + ":" + (params[i].value||'') + "\n"; + // } + // } + // return str; + // } }, xAxis: { axisLabel: { color: '#8C8D95' }, - boundaryGap: false, + boundaryGap: true, axisTick: { show: true }, @@ -308,9 +321,10 @@ Component({ }, data: xasix }, - yAxis: { + yAxis: [{ type: 'value', axisLabel: { + margin:-30, color: '#8C8D95', formatter: function (value, index) { if (value >= 10000 && value < 1000000) { @@ -331,50 +345,74 @@ Component({ show: false } }, - color: ['#FD8C5E', '#6FD3FF', '#BC7FF8', '#4F75FF', '#FF9AC1'], - // series:seriesList.map(item=>({...item,symbol: 'none',smooth: true,})) - series: [{ - smooth: true, - lineStyle: { - color: { - type: 'linear', - x: 0, - y: 0, - x2: 1, - y2: 0, - colorStops: [{ - offset: 0, color: '#6384FF' // 0% 处的颜色 - }, { - offset: 1, color: '#34BFFF' // 100% 处的颜色 - }], - globalCoord: false - } - }, - areaStyle: { - // 区域颜色 - color: { - type: 'linear', - x: 0, //右 - y: 0, //下 - x2: 0, //左 - y2: 1, //上 - colorStops: [{ - offset: 0.1, - color: '#EAF3FF' // 0% 处的颜色 - }, - { - offset: 1, - color: '#FFFFFF' // 100% 处的颜色 - } - ] + { + show:false, + type: 'value', + axisLabel: { + // margin:-20, + color: '#8C8D95', + formatter: function (value, index) { + return value + '%'; }, }, - data: seriesList[0].data, - type: "line", - symbol: "none", - showSymbol: false, - symbolSize: 20, - }] + axisTick: { + show: true + }, + axisLine: { + show: false + }, + splitLine: { + show: false + } + }], + legend:{ + data:['路过客流','进店客流','顾客人数','进店率'], + // bottom: 0 + }, + color: ['#FD8C5E', '#6FD3FF', '#BC7FF8', '#4F75FF', '#FF9AC1'], + series:seriesList.map(item=>({...item,symbol: 'none',smooth: true})) + // series: [{ + // smooth: true, + // lineStyle: { + // color: { + // type: 'linear', + // x: 0, + // y: 0, + // x2: 1, + // y2: 0, + // colorStops: [{ + // offset: 0, color: '#6384FF' // 0% 处的颜色 + // }, { + // offset: 1, color: '#34BFFF' // 100% 处的颜色 + // }], + // globalCoord: false + // } + // }, + // areaStyle: { + // // 区域颜色 + // color: { + // type: 'linear', + // x: 0, //右 + // y: 0, //下 + // x2: 0, //左 + // y2: 1, //上 + // colorStops: [{ + // offset: 0.1, + // color: '#EAF3FF' // 0% 处的颜色 + // }, + // { + // offset: 1, + // color: '#FFFFFF' // 100% 处的颜色 + // } + // ] + // }, + // }, + // data: seriesList[0].data, + // type: "line", + // symbol: "none", + // showSymbol: false, + // symbolSize: 20, + // }] } }, } diff --git a/miniProject/index/index.wxml b/miniProject/index/index.wxml index e01cbb9..5c8c8d2 100644 --- a/miniProject/index/index.wxml +++ b/miniProject/index/index.wxml @@ -19,7 +19,7 @@ 自定义 - + {{currentTime}} @@ -46,14 +46,14 @@ - + 客流趋势分析 - + diff --git a/miniProject/index/index.wxss b/miniProject/index/index.wxss index 1aab957..cf27d58 100644 --- a/miniProject/index/index.wxss +++ b/miniProject/index/index.wxss @@ -55,7 +55,8 @@ .actives { color: #000000; - border-bottom: 4px solid #447BFF; + border-bottom: 6rpx solid #447BFF; + border-radius: 3rpx; } .defaults { @@ -254,4 +255,10 @@ } .customColor .van-progress__portion{ background: linear-gradient(152deg, #597CFF 0%, #7998FF 100%) !important; +} +.boxPadding{ + padding:20rpx 0 +} +.boxPadding .title_chart{ + padding-left: 20rpx; } \ No newline at end of file diff --git a/miniProject/index/index2.js b/miniProject/index/index2.js index 0422263..0e7a7d8 100644 --- a/miniProject/index/index2.js +++ b/miniProject/index/index2.js @@ -239,6 +239,7 @@ Component({ mallId: this.data.selectId, startDate: startTime, endDate: endTime, + dataIndexes:['PassengerFlow','Exposure','CustomerNum','IntoStoreRate'].toString(), dataIndex, dataLevel }).then(res => { @@ -330,26 +331,33 @@ Component({ let xasix = res.xaxis.data // let legendList = res.series.map(item => item.name) let seriesList = res.series || [] - if (seriesList[0].data.every(item => !item)) { - return { - title: { - text: '暂无数据', - x: 'center', - y: 'center', - textStyle: { - fontSize: 16, - fontWeight: 'normal', - } - } + let legendData = ['路过客流','进店客流','顾客人数','进店率'] + seriesList.forEach((item,index)=>{ + if(index==3){ + item.yAxisIndex= 1 } - } + item.name = legendData[index] + }) + // if (seriesList[0].data.every(item => !item)) { + // return { + // title: { + // text: '暂无数据', + // x: 'center', + // y: 'center', + // textStyle: { + // fontSize: 16, + // fontWeight: 'normal', + // } + // } + // } + // } return { grid: { - top: 30, - right: 20, + top: 50, + right: 18, bottom: 20, - left: 5, - containLabel: true + left: 18, + containLabel: false }, tooltip: { trigger: 'axis', @@ -359,13 +367,13 @@ Component({ color: "#444", }, }, - formatter: function (params) { - let html = '' - params.forEach(item => { - html += item.axisValue + ': ' + (item.value||'') - }) - return html - } + // formatter: function (params) { + // let html = '' + // params.forEach(item => { + // html += item.axisValue + ': ' + (item.value||'') + // }) + // return html + // } }, xAxis: { axisLabel: { @@ -383,9 +391,10 @@ Component({ }, data: xasix }, - yAxis: { + yAxis: [{ type: 'value', axisLabel: { + margin:-30, color: '#8C8D95', formatter: function (value, index) { if (value >= 10000 && value < 1000000) { @@ -397,50 +406,72 @@ Component({ }, }, axisTick: { - show: true, - + show: true }, axisLine: { - show: false, - + show: false }, splitLine: { show: false } }, - color: ['#FD8C5E', '#6FD3FF', '#BC7FF8', '#4F75FF', '#FF9AC1'], - // series:seriesList.map(item=>({...item,symbol: 'none',smooth: true,})) - series: [{ - name: res.series[0] && res.series[0].name, - smooth: true, - lineStyle: { - color: '#34BFFF' - }, - areaStyle: { - // 区域颜色 - color: { - type: 'linear', - x: 0, //右 - y: 0, //下 - x2: 0, //左 - y2: 1, //上 - colorStops: [{ - offset: 0.1, - color: '#EAF3FF' // 0% 处的颜色 - }, - { - offset: 1, - color: '#FFFFFF' // 100% 处的颜色 - } - ] + { + show:false, + type: 'value', + axisLabel: { + // margin:-20, + color: '#8C8D95', + formatter: function (value, index) { + return value + '%'; }, }, - data: res.series[0] && res.series[0].data, - type: "line", - symbol: "none", - showSymbol: false, - symbolSize: 20, - }] + axisTick: { + show: true + }, + axisLine: { + show: false + }, + splitLine: { + show: false + } + }], + legend:{ + data:['路过客流','进店客流','顾客人数','进店率'], + // bottom: 0 + }, + color: ['#FD8C5E', '#6FD3FF', '#BC7FF8', '#4F75FF', '#FF9AC1'], + series:seriesList.map(item=>({...item,symbol: 'none',smooth: true})) + // series: [{ + // name: res.series[0] && res.series[0].name, + // smooth: true, + // lineStyle: { + // color: '#34BFFF' + // }, + // areaStyle: { + // // 区域颜色 + // color: { + // type: 'linear', + // x: 0, //右 + // y: 0, //下 + // x2: 0, //左 + // y2: 1, //上 + // colorStops: [{ + // offset: 0.1, + // color: '#EAF3FF' // 0% 处的颜色 + // }, + // { + // offset: 1, + // color: '#FFFFFF' // 100% 处的颜色 + // } + // ] + // }, + // }, + // data: res.series[0] && res.series[0].data, + // type: "line", + // symbol: "none", + // showSymbol: false, + // symbolSize: 20, + // }] } }, // 返回停留时长配置 @@ -469,16 +500,16 @@ Component({ data_sample.reverse() data_sample.unshift(["type", confingData.title, ""]); return { - color: ["#33CCFF", "#CCEEFF"], + color: ["#597BFF", "#CCEEFF"], legend: { show: false }, grid: { - left: "0", - right: "2%", - bottom: "3%", - top: "10px", - containLabel: true + left: "5", + right: "5", + bottom: "20", + top: "20", + containLabel: false }, xAxis: { type: "value", @@ -497,6 +528,7 @@ Component({ } }, yAxis: { + show:false, type: "category", inverse: true, axisLine: { @@ -515,23 +547,40 @@ Component({ series: [{ name: "停留时长", type: "bar", - barWidth: "40%", + barWidth: "55%", label: { - show: true, - formatter: function (params) { - return params.data[1] + "%"; - }, - position: ["102%", "0%"] + normal :{ + show: true, + position: 'insideLeft', + formatter: function (params) { + return params.data[0]; + }, + textStyle:{ + color:'#666' + }, + } }, itemStyle: { - color: "#679BFF" + color: "#597BFF" }, z: 3 //让实时在总计上面 }, { name: "", type: "bar", - barWidth: "40%", + barWidth: "55%", + label: { + normal :{ + show: true, + position: 'insideRight', + textStyle:{ + color:'#679BFF' + }, + formatter: function (params) { + return params.data[1] + "%"; + }, + } + }, itemStyle: { color: "#F5F7F9" }, @@ -543,7 +592,6 @@ Component({ }, // 返回客群性别占比配置 getGroupSexConfig(faceGender) { - console.log(faceGender.series[0] && faceGender.series[0].data) if (!(faceGender.series[0] && faceGender.series[0].data)) { return { title: { @@ -581,7 +629,7 @@ Component({ icon: "circle", right: 10, textStyle: { - color: "#000", + color: "#666", fontSize: 14 }, data: sexLabel, @@ -603,7 +651,7 @@ Component({ normal: { show: false, position: "inside", - color: "#000", + color: "#666", formatter: function (params) { return params.name + "\n" + params.percent + "%"; } @@ -656,8 +704,8 @@ Component({ }, grid: { top: "8%", - right: "5%", - left: "10%", + right: "10", + left: "30", bottom: "15%" }, diff --git a/miniProject/index/index2.wxml b/miniProject/index/index2.wxml index 9fa7ca2..e1128cc 100644 --- a/miniProject/index/index2.wxml +++ b/miniProject/index/index2.wxml @@ -7,6 +7,9 @@ {{selectName}} + + + 营业时间：{{info.startTime}}-{{info.endTime}} @@ -25,7 +28,7 @@ 自定义 - + {{currentTime}} @@ -52,14 +55,14 @@ - + 客流趋势分析 - + @@ -76,7 +79,7 @@ - + 客群年龄占比 diff --git a/miniProject/index/index2.wxss b/miniProject/index/index2.wxss index ddcc54f..a28fb22 100644 --- a/miniProject/index/index2.wxss +++ b/miniProject/index/index2.wxss @@ -57,7 +57,18 @@ width: auto; max-width: 90%; } -.shop_name::after { +.iconDown{ + /* width: 35rpx; */ + height: 56rpx; + display: inline-block; + vertical-align: top; +} +.imagesvg{ + margin-left: 20rpx; + width: 35rpx; + height: 30rpx; +} +/* .shop_name::after { content: ''; display: inline-block; width: 0; @@ -67,7 +78,7 @@ border-color: transparent; border-top-color: #fff; vertical-align: middle; -} +} */ .shop_time { position: absolute; @@ -96,7 +107,8 @@ .actives { font-weight: 500; color: #000000; - border-bottom: 4px solid #447BFF; + border-bottom: 6rpx solid #447BFF; + border-radius: 3rpx; } .defaults { @@ -218,4 +230,10 @@ font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #5A95EC; +} +.boxPadding{ + padding:20rpx 0 +} +.boxPadding .title_chart{ + padding-left: 20rpx; } \ No newline at end of file diff --git a/miniProject/index/me.wxss b/miniProject/index/me.wxss index 4e31089..4afa0e6 100644 --- a/miniProject/index/me.wxss +++ b/miniProject/index/me.wxss @@ -45,7 +45,7 @@ .zong-content { padding: 10rpx 0; width: 100%; - height: 324rpx; + /* height: 324rpx; */ margin-top: 24rpx; border-radius: 16rpx; background-color: #fff; diff --git a/miniProject/pages/editPwd/editPwd.wxml b/miniProject/pages/editPwd/editPwd.wxml index cae9806..2eb576d 100644 --- a/miniProject/pages/editPwd/editPwd.wxml +++ b/miniProject/pages/editPwd/editPwd.wxml @@ -1,4 +1,4 @@ - + diff --git a/miniProject/pages/editPwd/editPwd.wxss b/miniProject/pages/editPwd/editPwd.wxss index 32f0fdd..90e8ee9 100644 --- a/miniProject/pages/editPwd/editPwd.wxss +++ b/miniProject/pages/editPwd/editPwd.wxss @@ -2,7 +2,7 @@ .zong-content { padding: 10rpx 0; width: 100%; - height: 324rpx; + /* height: 324rpx; */ margin-top: 40rpx; border-radius: 16rpx; background-color: #fff; diff --git a/miniProject/pages/shopSelect/index.wxml b/miniProject/pages/shopSelect/index.wxml index ba7cf77..0f86534 100644 --- a/miniProject/pages/shopSelect/index.wxml +++ b/miniProject/pages/shopSelect/index.wxml @@ -1,6 +1,6 @@ - + - + diff --git a/miniProject/pages/shopSelect/index.wxss b/miniProject/pages/shopSelect/index.wxss index 8e9f54d..b299eac 100644 --- a/miniProject/pages/shopSelect/index.wxss +++ b/miniProject/pages/shopSelect/index.wxss @@ -29,8 +29,10 @@ .search { height: 80rpx; box-sizing: border-box; + margin: 10rpx auto; + width: 95%; /* background: red; */ - margin-top: 110rpx; + /* margin-top: 110rpx; */ } .tesl {