232 lines
7.9 KiB
Vue
232 lines
7.9 KiB
Vue
<template>
|
|
<div :style="height" style="overflow-y: auto" class="pd10">
|
|
<!-- <MyEChart :options="options" /> -->
|
|
<div v-for="(item, index) in List">
|
|
<div class="box" @mouseenter="item.flag = false" @mouseleave="item.flag = true">
|
|
<div class="div">{{ item.name }} <span>({{ item.count }}台)</span></div>
|
|
<!-- <el-progress style="flex: 1" :percentage="(item.count / total).toFixed(2) * 100">
|
|
<span>{{ item.count }}台</span>
|
|
</el-progress> -->
|
|
<el-progress style="flex: 1" :percentage="item.score" :color="ratingColor(item.score)">
|
|
<span v-if="item.flag" :style="`color:${ratingColor(item.score)}`">
|
|
{{ ratingName(item.score) }}
|
|
</span>
|
|
<span v-else :style="`color:${ratingColor(item.score)}`">{{ item.score }}分</span>
|
|
</el-progress>
|
|
</div>
|
|
<el-divider />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import MyEChart from '@/components/echarts/MyEchart.vue'
|
|
import { mainHeight } from '@/utils/layout'
|
|
import { areaTerminalStatistic } from '@/api/device-boot/runEvaluate'
|
|
const height = mainHeight(220, 1.5)
|
|
const props = defineProps({
|
|
params: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
})
|
|
const List: any = ref([])
|
|
const total: any = ref(0)
|
|
const options = ref({})
|
|
const format = percentage => percentage + '分'
|
|
const info = () => {
|
|
areaTerminalStatistic(props.params).then(res => {
|
|
total.value = res.data.reduce((sum, item) => sum + Number(item.count), 0)
|
|
List.value = res.data
|
|
List.value.forEach(item => {
|
|
item.flag = true
|
|
})
|
|
})
|
|
// let dataSource = [
|
|
// { value: '90', name: '张家口' },
|
|
// { value: '80', name: '廊坊' },
|
|
// { value: '70', name: '秦皇岛' },
|
|
// { value: '60', name: '唐山' },
|
|
// { value: '50', name: '承德' }
|
|
// ]
|
|
// options.value = {
|
|
// grid: {
|
|
// top: '10'
|
|
// },
|
|
// toolbox: {
|
|
// show: false
|
|
// },
|
|
// options: {
|
|
// yAxis: {
|
|
// type: 'category',
|
|
// data: dataSource.map(item => item.name),
|
|
// // axisLabel: {
|
|
// // color: '#fff'
|
|
// // },
|
|
// splitLine: {
|
|
// show: false
|
|
// }
|
|
// },
|
|
// xAxis: {
|
|
// type: 'value',
|
|
// data: [1, 2, 3, 4],
|
|
// axisLabel: {
|
|
// show: true
|
|
// // textStyle: {
|
|
// // color: '#FFF'
|
|
// // },
|
|
// // formatter: function (value) {
|
|
|
|
// // }
|
|
// },
|
|
// splitLine: {
|
|
// show: false
|
|
// },
|
|
// axisTick: {
|
|
// show: false
|
|
// },
|
|
// axisLine: {
|
|
// show: true
|
|
// }
|
|
// },
|
|
// dataZoom: null,
|
|
// series: [
|
|
// {
|
|
// type: 'bar',
|
|
// itemStyle: {
|
|
// color: function (params) {
|
|
// return params.value >= 90
|
|
// ? '#00b07d'
|
|
// : params.value >= 80
|
|
// ? '#2b7fd3'
|
|
// : params.value >= 70
|
|
// ? '#ffcc33'
|
|
// : '#c00'
|
|
// }
|
|
// },
|
|
// markLine: {
|
|
// silent: false,
|
|
// symbol: 'circle',
|
|
// data: [
|
|
// {
|
|
// name: '',
|
|
// yAxis: 100,
|
|
// lineStyle: {
|
|
// color: '#2E8B57'
|
|
// },
|
|
// label: {
|
|
// show: true,
|
|
// formatter: '优质',
|
|
// color: '#2E8B57'
|
|
// }
|
|
// },
|
|
// {
|
|
// name: '',
|
|
// yAxis: 90,
|
|
// lineStyle: {
|
|
// color: '#77DA63'
|
|
// },
|
|
// label: {
|
|
// show: true,
|
|
// color: '#77DA63',
|
|
// formatter: '良好'
|
|
// }
|
|
// },
|
|
// {
|
|
// name: '',
|
|
// yAxis: 60,
|
|
// lineStyle: {
|
|
// color: '#DAA520'
|
|
// },
|
|
// label: {
|
|
// show: true,
|
|
// color: '#DAA520',
|
|
// formatter: '合格'
|
|
// }
|
|
// }
|
|
// ]
|
|
// },
|
|
// data: dataSource.map(item => item.value)
|
|
// }
|
|
// ]
|
|
// }
|
|
// }
|
|
}
|
|
const ratingColor = (num: number) => {
|
|
if (num >= 90) {
|
|
return '#00b07d'
|
|
} else if (num >= 80) {
|
|
return '#2b7fd3'
|
|
} else if (num >= 70) {
|
|
return '#ff8c00'
|
|
} else {
|
|
return '#c00'
|
|
}
|
|
}
|
|
const ratingName = (num: number) => {
|
|
if (num >= 90) {
|
|
return '优秀'
|
|
} else if (num >= 80) {
|
|
return '良好'
|
|
} else if (num >= 70) {
|
|
return '一般'
|
|
} else {
|
|
return '较差'
|
|
}
|
|
}
|
|
onMounted(() => {
|
|
// info()
|
|
})
|
|
defineExpose({
|
|
info
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.btnsBox {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
::v-deep .el-radio-button__inner {
|
|
padding: 8px 18px;
|
|
background: var(--el-color-primary);
|
|
border: 1px solid #00fff4;
|
|
border-radius: 0;
|
|
font-weight: normal;
|
|
color: #ffffff;
|
|
text-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.73);
|
|
opacity: 0.52;
|
|
}
|
|
::v-deep .el-radio-button:last-child .el-radio-button__inner {
|
|
border-radius: 0;
|
|
}
|
|
::v-deep .el-radio-button:first-child .el-radio-button__inner {
|
|
border-radius: 0;
|
|
border-left: 1px solid #00fff4;
|
|
}
|
|
::v-deep .is-active {
|
|
border: 1px solid #00fff4;
|
|
opacity: 1 !important;
|
|
color: #ffffff;
|
|
background: var(--el-color-primary);
|
|
|
|
.el-radio-button__inner {
|
|
opacity: 1 !important;
|
|
border-left: 1px solid #00fff4 !important;
|
|
}
|
|
}
|
|
.box {
|
|
cursor: pointer;
|
|
// display: flex;
|
|
.div {
|
|
// width: 100px;
|
|
font-size: 16px;
|
|
span{
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
:deep(.el-divider--horizontal) {
|
|
margin: 5px 0;
|
|
}
|
|
</style>
|