1 changed files with 265 additions and 50 deletions
Unified View
Diff Options
-
+265 -50pages/mine/daily/dailyDetail.vue
+ 265
- 50
pages/mine/daily/dailyDetail.vue
View File
| @@ -6,17 +6,116 @@ | |||||
| <text class="h4">生成时间：2022-01-27 01：22</text> | <text class="h4">生成时间：2022-01-27 01：22</text> | ||||
| </view> | </view> | ||||
| </view> | </view> | ||||
| <view class="donutChart"> | |||||
| <qiun-data-charts | |||||
| :key="000" | |||||
| type="ring" | |||||
| :chartData="chartData" | |||||
| :canvas2d="true" | |||||
| :canvasId='wangxiaohuahahahahaha000' | |||||
| :opts='opts' | |||||
| background="#FFFFFF"/> | |||||
| <view class="donutChart"> | |||||
| <qiun-data-charts :key="000" type="ring" :chartData="donutChartData" :canvas2d="true" | |||||
| :canvasId='wangxiaohuahahahahaha000' :opts='donutChartOpts' background="#FFFFFF" /> | |||||
| </view> | </view> | ||||
| <view class="tit">异动指标</view> | |||||
| <view class="lineChart"> | |||||
| <view class="lineT">平均执行率 ：98%</view> | |||||
| <view class="lineChart"> | |||||
| <qiun-data-charts type="line" :chartData="lineChartData1" :opts='lineChartOpts' background="none" | |||||
| :ontouch="true" canvasId="wangxiaohuaerlingeryilingwuyibbb" :canvas2d="true" /> | |||||
| </view> | |||||
| <view class="details"> | |||||
| <view class="statusIcon down"></view> | |||||
| <text class="textInfo"> | |||||
| 01月27日接待的平均执行率明显上涨，环比26日上涨<text class="upText">120%</text>，同比上周上涨<text class="downText">10%</text> | |||||
| </text> | |||||
| </view> | |||||
| </view> | |||||
| <view class="lineChart"> | |||||
| <view class="lineT">平均接待时长 ：66min</view> | |||||
| <view class="lineChart"> | |||||
| <qiun-data-charts type="line" :chartData="lineChartData2" :opts='lineChartOpts' background="none" | |||||
| :ontouch="true" canvasId="wangxiaohuaerlingeryilingwuyiccc" :canvas2d="true" /> | |||||
| </view> | |||||
| <view class="details"> | |||||
| <view class="statusIcon down"></view> | |||||
| <text class="textInfo"> | |||||
| 01月27日接待的平均执行率明显上涨，环比26日上涨<text class="upText">120%</text>，同比上周上涨<text class="downText">10%</text> | |||||
| </text> | |||||
| </view> | |||||
| </view> | |||||
| <view class="tit">稳定指标</view> | |||||
| <view class="stabilityItem"> | |||||
| <view class="T">平均执行率 ：98%</view> | |||||
| <view class="details"> | |||||
| <view class="statusIcon up"></view> | |||||
| <text class="textInfo"> | |||||
| 01月27日接待的平均执行率明显上涨，环比26日上涨<text class="upText">120%</text>，同比上周上涨<text class="downText">10%</text> | |||||
| </text> | |||||
| </view> | |||||
| </view> | |||||
| <view class="stabilityItem"> | |||||
| <view class="T">最低执行率 ：28%</view> | |||||
| <view class="details"> | |||||
| <view class="statusIcon up"></view> | |||||
| <text class="textInfo"> | |||||
| 01月27日接待的平均执行率明显上涨，环比26日上涨<text class="upText">120%</text>，同比上周上涨<text class="downText">10%</text> | |||||
| </text> | |||||
| </view> | |||||
| </view> | |||||
| <view class="stabilityItem"> | |||||
| <view class="T">平均执行率 ：98%</view> | |||||
| <view class="details"> | |||||
| <view class="statusIcon up"></view> | |||||
| <text class="textInfo"> | |||||
| 01月27日接待的平均执行率明显上涨，环比26日上涨<text class="upText">120%</text>，同比上周上涨<text class="downText">10%</text> | |||||
| </text> | |||||
| </view> | |||||
| </view> | |||||
| <view class="stabilityItem"> | |||||
| <view class="T">设备使用率 ：75%(在线15，离线5)</view> | |||||
| <view class="details"> | |||||
| <view class="statusIcon up"></view> | |||||
| <text class="textInfo"> | |||||
| 01月27日接待的平均执行率明显上涨，环比26日上涨<text class="upText">120%</text>，同比上周上涨<text class="downText">10%</text> | |||||
| </text> | |||||
| </view> | |||||
| </view> | |||||
| <view class="stabilityItem"> | |||||
| <view class="T">接待量 ：35</view> | |||||
| <view class="details"> | |||||
| <view class="statusIcon up"></view> | |||||
| <text class="textInfo"> | |||||
| 01月27日接待的平均执行率明显上涨，环比26日上涨<text class="upText">120%</text>，同比上周上涨<text class="downText">10%</text> | |||||
| </text> | |||||
| </view> | |||||
| </view> | |||||
| <view class="stabilityItem"> | |||||
| <view class="T">有效接待 ：18</view> | |||||
| <view class="details"> | |||||
| <view class="statusIcon up"></view> | |||||
| <text class="textInfo"> | |||||
| 01月27日接待的平均执行率明显上涨，环比26日上涨<text class="upText">120%</text>，同比上周上涨<text class="downText">10%</text> | |||||
| </text> | |||||
| </view> | |||||
| </view> | |||||
| <view class="stabilityItem"> | |||||
| <view class="T">违禁接待次数 ：18</view> | |||||
| <view class="details"> | |||||
| <view class="statusIcon up"></view> | |||||
| <text class="textInfo"> | |||||
| 01月27日接待的平均执行率明显上涨，环比26日上涨<text class="upText">120%</text>，同比上周上涨<text class="downText">10%</text> | |||||
| </text> | |||||
| </view> | |||||
| </view> | |||||
| <view class="stabilityItem"> | |||||
| <view class="T">接待顾问数 ：18</view> | |||||
| <view class="details"> | |||||
| <view class="statusIcon up"></view> | |||||
| <text class="textInfo"> | |||||
| 01月27日接待的平均执行率明显上涨，环比26日上涨<text class="upText">120%</text>，同比上周上涨<text class="downText">10%</text> | |||||
| </text> | |||||
| </view> | |||||
| </view> | |||||
| </view> | </view> | ||||
| </template> | </template> | ||||
| @@ -24,7 +123,7 @@ | |||||
| export default { | export default { | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| chartData: { | |||||
| donutChartData: { | |||||
| series: [{ | series: [{ | ||||
| data: [{ | data: [{ | ||||
| "name": "明显下跌", | "name": "明显下跌", | ||||
| @@ -42,58 +141,74 @@ | |||||
| } | } | ||||
| ], | ], | ||||
| }, | |||||
| opts:{ | |||||
| "legend":{ | |||||
| "show": false, | |||||
| }, | |||||
| "title": { | |||||
| "name": "总共", | |||||
| "fontSize": 18, | |||||
| "color": "#666666" | |||||
| }, | |||||
| "subtitle":{ | |||||
| "name": "9个", | |||||
| "fontSize": 14, | |||||
| }, | |||||
| "extra": { | |||||
| "title": { | |||||
| "name": "总共", | |||||
| }, | |||||
| "ring": { | |||||
| "ringWidth":50, | |||||
| "centerColor": "#FFFFFF", | |||||
| "activeOpacity": 0.5, | |||||
| "activeRadius": 10, | |||||
| "offsetAngle": 0, | |||||
| "customRadius": 0, | |||||
| "labelWidth": 12, | |||||
| "border": false, | |||||
| "borderWidth": 3, | |||||
| "borderColor": "#FFFFFF", | |||||
| "linearType": "none", | |||||
| }, | |||||
| } | |||||
| }, | |||||
| donutChartOpts: { | |||||
| "legend": { | |||||
| "show": false, | |||||
| }, | |||||
| "title": { | |||||
| "name": "总共", | |||||
| "fontSize": 18, | |||||
| "color": "#666666" | |||||
| }, | |||||
| "subtitle": { | |||||
| "name": "9个", | |||||
| "fontSize": 14, | |||||
| }, | |||||
| "extra": { | |||||
| "title": { | |||||
| "name": "总共", | |||||
| }, | |||||
| "ring": { | |||||
| "ringWidth": 50, | |||||
| "centerColor": "#FFFFFF", | |||||
| "activeOpacity": 0.5, | |||||
| "activeRadius": 10, | |||||
| "offsetAngle": 0, | |||||
| "customRadius": 0, | |||||
| "labelWidth": 12, | |||||
| "border": false, | |||||
| "borderWidth": 3, | |||||
| "borderColor": "#FFFFFF", | |||||
| "linearType": "none", | |||||
| }, | |||||
| } | |||||
| }, | |||||
| lineChartData1: { | |||||
| "categories": ["2016", "2017", "2018", "2019", "2020", "2021"], | |||||
| "series": [{ | |||||
| "name": "执行率", | |||||
| "data": [35, 8, 25, 37, 4, 20] | |||||
| }] | |||||
| }, | |||||
| lineChartData2: { | |||||
| "categories": ["2016", "2017", "2018", "2019", "2020", "2021"], | |||||
| "series": [{ | |||||
| "name": "时长", | |||||
| "data": [35, 8, 25, 37, 4, 20] | |||||
| }] | |||||
| }, | |||||
| lineChartOpts: { | |||||
| "legend": { | |||||
| "show": false, | |||||
| }, | |||||
| } | } | ||||
| } | } | ||||
| }, | }, | ||||
| methods: { | methods: { | ||||
| } | } | ||||
| } | } | ||||
| </script> | </script> | ||||
| <style lang="scss"> | <style lang="scss"> | ||||
| .dailyDetail { | .dailyDetail { | ||||
| background: #F3F3F3; | |||||
| // position: relative; | |||||
| background-color: #f7f7f7; | |||||
| .title { | .title { | ||||
| // position: fixed; | |||||
| top: 0; | |||||
| padding: 26rpx 0 0; | padding: 26rpx 0 0; | ||||
| width: 100%; | width: 100%; | ||||
| height: 300rpx; | |||||
| height: 150rpx; | |||||
| background-color: #008EF2; | background-color: #008EF2; | ||||
| text { | text { | ||||
| @@ -116,7 +231,107 @@ | |||||
| } | } | ||||
| .donutChart { | .donutChart { | ||||
| width: 100%; | |||||
| width: 90%; | |||||
| margin: 0 auto; | |||||
| } | |||||
| .tit { | |||||
| width: 220rpx; | |||||
| margin: 30rpx auto; | |||||
| text-align: center; | |||||
| font-size: 40rpx; | |||||
| font-weight: bold; | |||||
| border-bottom: 1rpx solid #3A8EED; | |||||
| } | |||||
| .lineChart { | |||||
| background-color: #FFFFFF; | |||||
| margin: 20rpx 0; | |||||
| padding: 20rpx; | |||||
| .lineT { | |||||
| font-size: 34rpx; | |||||
| font-weight: bold; | |||||
| } | |||||
| .lineChart { | |||||
| margin: 30rpx 0; | |||||
| } | |||||
| .details { | |||||
| display: flex; | |||||
| .statusIcon { | |||||
| width: 92rpx; | |||||
| height: 48rpx; | |||||
| } | |||||
| .up { | |||||
| background: url(img/up.png) no-repeat; | |||||
| background-size: 100%; | |||||
| } | |||||
| .down { | |||||
| background: url(img/down.png) no-repeat; | |||||
| background-size: 100%; | |||||
| } | |||||
| .textInfo { | |||||
| font-size: 30rpx; | |||||
| .upText { | |||||
| color: red; | |||||
| } | |||||
| .downText { | |||||
| color: green; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | } | ||||
| .stabilityItem{ | |||||
| background-color: #FFFFFF; | |||||
| margin: 20rpx 0; | |||||
| padding: 20rpx; | |||||
| .T { | |||||
| font-size: 34rpx; | |||||
| font-weight: bold; | |||||
| margin-bottom: 24rpx; | |||||
| } | |||||
| .details { | |||||
| display: flex; | |||||
| .statusIcon { | |||||
| width: 92rpx; | |||||
| height: 48rpx; | |||||
| } | |||||
| .up { | |||||
| background: url(img/up.png) no-repeat; | |||||
| background-size: 100%; | |||||
| } | |||||
| .down { | |||||
| background: url(img/down.png) no-repeat; | |||||
| background-size: 100%; | |||||
| } | |||||
| .textInfo { | |||||
| font-size: 30rpx; | |||||
| .upText { | |||||
| color: red; | |||||
| } | |||||
| .downText { | |||||
| color: green; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| } | } | ||||
| </style> | </style> | ||||