Web/admin-sjzx
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

联调终端运行评价

Browse Source
This commit is contained in:
GGJ
2025-05-15 14:52:02 +08:00
parent 325aa7d56e
commit 67718efe57
22 changed files with 672 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

281
src/views/pqs/runManage/runEvaluate/components/region.vue
View File

@@ -1,135 +1,167 @@
<template>
<div class="mt10 mr5 btnsBox">
<el-radio-group v-model="radio2">
<el-radio-button label="区域" value="1" />
<el-radio-button label="变电站" value="2" />
<el-radio-button label="用户" value="3" />
</el-radio-group>
</div>
<div :style="height">
<MyEChart :options="options" />
<div :style="height" style="overflow-y: auto" class="pd10">
<!-- <MyEChart :options="options" /> -->
<div v-for="(item, index) in List">
<div class="box">
<div class="div">{{ item.name }}({{ item.count }}台)：</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 :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'
const radio2 = ref('1')
const height = mainHeight(300, 1.5)
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 = () => {
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'
: '#97017e'
}
},
markLine: {
silent: false,
symbol: 'circle',
data: [
{
name: '',
yAxis: 100,
lineStyle: {
color:'#009900'
},
label: {
show: true,
formatter: '优质',
color:'#009900'
}
},
{
name: '',
yAxis: 90,
lineStyle: {
color:'#77DA63'
},
label: {
show: true,
color:'#77DA63',
formatter: '良好'
}
},
{
name: '',
yAxis: 60,
lineStyle: {
color:'#FFCC00'
},
label: {
show: true,
color:'#FFCC00',
formatter: '合格'
}
}
]
},
data: dataSource.map(item => item.value)
}
]
}
areaTerminalStatistic(props.params).then(res => {
total.value = res.data.reduce((sum, item) => sum + Number(item.count), 0)
List.value = res.data
})
// 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'
// : '#97017e'
// }
// },
// markLine: {
// silent: false,
// symbol: 'circle',
// data: [
// {
// name: '',
// yAxis: 100,
// lineStyle: {
// color: '#009900'
// },
// label: {
// show: true,
// formatter: '优质',
// color: '#009900'
// }
// },
// {
// name: '',
// yAxis: 90,
// lineStyle: {
// color: '#77DA63'
// },
// label: {
// show: true,
// color: '#77DA63',
// formatter: '良好'
// }
// },
// {
// name: '',
// yAxis: 60,
// lineStyle: {
// color: '#FFCC00'
// },
// label: {
// show: true,
// color: '#FFCC00',
// formatter: '合格'
// }
// }
// ]
// },
// data: dataSource.map(item => item.value)
// }
// ]
// }
// }
}
const ratingColor = (num: number) => {
if (num >= 90) {
return '#0fff04'
} else if (num >= 80) {
return '#2b7fd3'
} else if (num >= 70) {
return '#ffcc33'
} else {
return '#97017e'
}
}
onMounted(() => {
info()
// info()
})
defineExpose({
info
})
</script>
<style lang="scss" scoped>
@@ -165,4 +197,13 @@ onMounted(() => {
border-left: 1px solid #00fff4 !important;
}
}
.box {
// display: flex;
.div {
// width: 100px;
}
}
:deep(.el-divider--horizontal) {
margin: 10px 0;
}
</style>