Kaynağa Gözat

Merge branch 'ribao'

Jyt
jyt 2 yıl önce
ebeveyn
işleme
f797aefd9b
1 değiştirilmiş dosya ile 265 ekleme ve 50 silme
  1. +265
    -50
      pages/mine/daily/dailyDetail.vue

+ 265
- 50
pages/mine/daily/dailyDetail.vue Dosyayı Görüntüle

@@ -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>

Yükleniyor…
İptal
Kaydet