|
|
@@ -1,227 +1,103 @@
|
|
|
<template>
|
|
|
- <!-- <div class="block">-->
|
|
|
- <!-- <div-->
|
|
|
- <!-- v-for="(item, index) in data"-->
|
|
|
- <!-- class="flex flex-center"-->
|
|
|
- <!-- style="-->
|
|
|
- <!-- height: 26px;-->
|
|
|
- <!-- margin-left: 10px;-->
|
|
|
- <!-- margin-right: 10px;-->
|
|
|
- <!-- margin-top: 7px;-->
|
|
|
- <!-- "-->
|
|
|
- <!-- >-->
|
|
|
- <!-- <div-->
|
|
|
- <!-- v-if="index <= 3"-->
|
|
|
- <!-- style="width: 5%; font-size: 18px; font-weight: bold; color: #ffa100"-->
|
|
|
- <!-- >-->
|
|
|
- <!-- {{ index }}.-->
|
|
|
- <!-- </div>-->
|
|
|
- <!-- <div-->
|
|
|
- <!-- v-else-->
|
|
|
- <!-- style="width: 5%; font-size: 20px; font-weight: bold; color: #ffffff"-->
|
|
|
- <!-- >-->
|
|
|
- <!-- {{ index }}.-->
|
|
|
- <!-- </div>-->
|
|
|
- <!-- <div class="flex flex-align-center" style="width: 85%">-->
|
|
|
- <!-- <div-->
|
|
|
- <!-- style="-->
|
|
|
- <!-- display: flex;-->
|
|
|
- <!-- align-items: center;-->
|
|
|
- <!-- height: 26px;-->
|
|
|
- <!-- padding-left: 5px;-->
|
|
|
- <!-- padding-right: 5px;-->
|
|
|
- <!-- background: rgba(171, 118, 48, 0.82);-->
|
|
|
- <!-- border-radius: 20px;-->
|
|
|
- <!-- color: #ffffff;-->
|
|
|
- <!-- "-->
|
|
|
- <!-- >-->
|
|
|
- <!-- {{ item.name }}-->
|
|
|
- <!-- </div>-->
|
|
|
- <!-- </div>-->
|
|
|
- <!-- <div style="width: 10%; color: rgb(6, 243, 223)">{{ item.number }}</div>-->
|
|
|
- <!-- </div>-->
|
|
|
- <!-- </div>-->
|
|
|
- <div>
|
|
|
- <charts
|
|
|
- style="margin-top: -40px"
|
|
|
- id="bizchart3"
|
|
|
- height="220px"
|
|
|
- width="440px"
|
|
|
- :option="option"
|
|
|
- />
|
|
|
+ <div class="block">
|
|
|
+ <div v-for="(item, index) in data" class="flex flex-center box">
|
|
|
+ <div v-if="index < 3" class="box1">{{ index + 1 }}.</div>
|
|
|
+ <div v-else class="box1-1">{{ index + 1 }}.</div>
|
|
|
+ <div class="flex flex-align-center box2">
|
|
|
+ <div
|
|
|
+ :style="
|
|
|
+ 'display: flex;align-items: center;height: 26px;padding-left: 5px;padding-right: 5px; background-image: linear-gradient(to right, rgba(9,45,85,0.94) , rgba(18,70,146,0.94));border-radius: 20px;color: #ffffff;' +
|
|
|
+ 'width:' +
|
|
|
+ (item.number / max) * 100 +
|
|
|
+ '%'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex flex-justify-end box3">
|
|
|
+ {{ item.number }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="js">
|
|
|
-import charts from '../../../components/echarts/index.vue'
|
|
|
-import * as echarts from 'echarts'
|
|
|
import crypto from "@/utils/crypto.js"
|
|
|
export default {
|
|
|
- components: { charts },
|
|
|
data() {
|
|
|
return {
|
|
|
data:{},
|
|
|
- option : {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: {
|
|
|
- type: 'shadow'
|
|
|
- }
|
|
|
- },
|
|
|
- legend: {},
|
|
|
- grid: {
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '3%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- type: 'value',
|
|
|
- boundaryGap: [0, 0.01],
|
|
|
- axisLabel: {
|
|
|
- show: false, // 不显示坐标轴上的文字
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color:'rgba(128,126,126,0.25)'
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- type: 'category',
|
|
|
- data: ['5.', '4.', '3.', '2.', '1.'],
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: "#a4a2a2",
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- inside: true,
|
|
|
- color: '#fff',
|
|
|
- textStyle: {
|
|
|
- fontSize: "20",
|
|
|
- color: function(params,index) {
|
|
|
- if (index > 1){
|
|
|
- return '#FFA100'
|
|
|
- }else {
|
|
|
- return '#FFFFFF'
|
|
|
- }
|
|
|
- },
|
|
|
- fontWeight:'bold'
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'right',
|
|
|
- },
|
|
|
- textStyle: {
|
|
|
- color:'rgba(6,243,223,0.74)'
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- type: 'bar',
|
|
|
- data: [],
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- barBorderRadius: 18,
|
|
|
- color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
|
|
- offset: 1,
|
|
|
- color: 'rgba(9,45,85,0.44)'
|
|
|
- }, {
|
|
|
- offset: 0,
|
|
|
- color: 'rgba(18,70,146,0.74)'
|
|
|
- }]),
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- ]
|
|
|
- }
|
|
|
+ max:0,
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.getDebtList()
|
|
|
},
|
|
|
methods: {
|
|
|
- // getDebtList() {
|
|
|
- // this.$api.biz.getDebtList({ current: 1, size: 5}).then(res => {
|
|
|
- // let result = JSON.parse(crypto.decryptDES(res, crypto.desKey))
|
|
|
- // if (result.code === 200) {
|
|
|
- // let l = 100
|
|
|
- // let s = 100
|
|
|
- // this.data = result.data.records.map((item,index) => {
|
|
|
- // if (index === 0){
|
|
|
- // l = item.viewNumber * 0.8
|
|
|
- // s = item.viewNumber * 0.5
|
|
|
- // }
|
|
|
- // if(item.viewNumber >= l){
|
|
|
- // if (item.name.length >= 16){
|
|
|
- // return {name:item.name.substring(0,14)+"...",
|
|
|
- // number:item.viewNumber}
|
|
|
- // }else {
|
|
|
- // return {name:item.name,number:item.viewNumber}
|
|
|
- // }
|
|
|
- // }else if(item.viewNumber >= s) {
|
|
|
- // if (item.name.length >= 11){
|
|
|
- // return {name:item.name.substring(0,8)+"...",number:item.viewNumber}
|
|
|
- // }else {
|
|
|
- // return {name:item.name,number:item.viewNumber}
|
|
|
- // }
|
|
|
- // }else {
|
|
|
- // if (item.name.length >= 8){
|
|
|
- // return {name:item.name.substring(0,6)+"...",number:item.viewNumber}
|
|
|
- // }else {
|
|
|
- // return {name:item.name,number:item.viewNumber}
|
|
|
- // }
|
|
|
- // }
|
|
|
- // })
|
|
|
- // }
|
|
|
- // })
|
|
|
- // },
|
|
|
getDebtList() {
|
|
|
this.$api.biz.getDebtList({ current: 1, size: 5}).then(res => {
|
|
|
let result = JSON.parse(crypto.decryptDES(res, crypto.desKey))
|
|
|
if (result.code === 200) {
|
|
|
- this.option.series[0].data = result.data.records.map((item) => {
|
|
|
- return item.viewNumber
|
|
|
- }).reverse()
|
|
|
let l = 100
|
|
|
let s = 100
|
|
|
- this.option.yAxis.data = result.data.records.map((item,index) => {
|
|
|
+ this.data = result.data.records.map((item,index) => {
|
|
|
if (index === 0){
|
|
|
+ this.max=item.viewNumber
|
|
|
l = item.viewNumber * 0.8
|
|
|
s = item.viewNumber * 0.5
|
|
|
}
|
|
|
if(item.viewNumber >= l){
|
|
|
if (item.name.length >= 16){
|
|
|
- return index+1+"."+item.name.substring(0,14)+"..."
|
|
|
+ return {name:item.name.substring(0,14)+"...",
|
|
|
+ number:item.viewNumber}
|
|
|
}else {
|
|
|
- return index+1+"."+item.name
|
|
|
+ return {name:item.name,number:item.viewNumber}
|
|
|
}
|
|
|
}else if(item.viewNumber >= s) {
|
|
|
if (item.name.length >= 11){
|
|
|
- return index+1+"."+item.name.substring(0,8)+"..."
|
|
|
+ return {name:item.name.substring(0,8)+"...",number:item.viewNumber}
|
|
|
}else {
|
|
|
- return index+1+"."+item.name
|
|
|
+ return {name:item.name,number:item.viewNumber}
|
|
|
}
|
|
|
}else {
|
|
|
if (item.name.length >= 8){
|
|
|
- return index+1+"."+item.name.substring(0,6)+"..."
|
|
|
+ return {name:item.name.substring(0,6)+"...",number:item.viewNumber}
|
|
|
}else {
|
|
|
- return index+1+"."+item.name
|
|
|
+ return {name:item.name,number:item.viewNumber}
|
|
|
}
|
|
|
}
|
|
|
- }).reverse()
|
|
|
+ })
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.box {
|
|
|
+ height: 29px;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
+.box1 {
|
|
|
+ width: 5%;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffa100;
|
|
|
+}
|
|
|
+.box1-1 {
|
|
|
+ width: 5%;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+.box2 {
|
|
|
+ width: 85%;
|
|
|
+}
|
|
|
+.box3 {
|
|
|
+ width: 10%;
|
|
|
+ color: rgb(6, 243, 223);
|
|
|
+}
|
|
|
+</style>
|
