1 changed files with 265 additions and 50 deletions
Split 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> | |||
| </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 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> | |||
| </template> | |||
| @@ -24,7 +123,7 @@ | |||
| export default { | |||
| data() { | |||
| return { | |||
| chartData: { | |||
| donutChartData: { | |||
| series: [{ | |||
| data: [{ | |||
| "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: { | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss"> | |||
| .dailyDetail { | |||
| background: #F3F3F3; | |||
| // position: relative; | |||
| background-color: #f7f7f7; | |||
| .title { | |||
| // position: fixed; | |||
| top: 0; | |||
| padding: 26rpx 0 0; | |||
| width: 100%; | |||
| height: 300rpx; | |||
| height: 150rpx; | |||
| background-color: #008EF2; | |||
| text { | |||
| @@ -116,7 +231,107 @@ | |||
| } | |||
| .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> | |||