修改itic点击波形图
This commit is contained in:
guanj
@@ -1,231 +1,231 @@
|
||||
<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: 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>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user