259 lines
8.3 KiB
Vue
259 lines
8.3 KiB
Vue
<template>
|
|
<!-- 终端 -->
|
|
<el-dialog draggable title="终端统计" v-model="dialogVisible" width="1400px" :before-close="handleClose">
|
|
<el-row style="height: 300px" :gutter="20">
|
|
<el-col :span="12">
|
|
<div class="title">
|
|
<span>趋势分析</span>
|
|
<el-select v-model="time" style="width: 80px; margin-right: 80px" @change="analysis">
|
|
<el-option label="年" value="1" />
|
|
<el-option label="月" value="3" />
|
|
</el-select>
|
|
</div>
|
|
<MyEChart style="height: 260px" :options="trendEChart" />
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div class="title">
|
|
<span>分布统计</span>
|
|
</div>
|
|
<div class="pie">
|
|
<MyEChart style="height: 260px; width: 50%" :options="picEChart" />
|
|
<el-table size="small" height="260px" style="width: 50%" :data="picList">
|
|
<el-table-column prop="orgName" width="80px" align="center"></el-table-column>
|
|
<el-table-column prop="onlineEvaluate" label="终端评价" align="center">
|
|
<template #default="scope">
|
|
<span
|
|
:style="{
|
|
color:
|
|
scope.row.onlineEvaluate < 60
|
|
? 'red'
|
|
: scope.row.onlineEvaluate < 90
|
|
? 'orange'
|
|
: 'green'
|
|
}"
|
|
>
|
|
{{
|
|
scope.row.onlineEvaluate < 60
|
|
? '差'
|
|
: scope.row.onlineEvaluate < 90
|
|
? '良'
|
|
: '优'
|
|
}}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="devCount" label="在运终端数" align="center" />
|
|
<el-table-column prop="devOnCount" label="在线终端数" align="center" />
|
|
</el-table>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<div>
|
|
<div class="title">
|
|
<span>区域终端统计</span>
|
|
</div>
|
|
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="325px" :data="tableData">
|
|
<vxe-column field="orgName" title="区域" />
|
|
<vxe-column field="runNum" sortable title="运行个数 " />
|
|
<vxe-column field="overhaulNum" sortable title="检修个数 " />
|
|
<vxe-column field="refundNum" sortable title="退役个数" />
|
|
<vxe-column field="onLineRate" sortable title="终端在线率(%)" />
|
|
</vxe-table>
|
|
</div>
|
|
</el-dialog>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useDictData } from '@/stores/dictData'
|
|
import MyEChart from '@/components/echarts/MyEchart.vue'
|
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
|
import { getGridDiagramDevTendency, getGridDiagramDevData, getGridDiagramDevDataList } from '@/api/device-boot/panorama'
|
|
const dictData = useDictData()
|
|
const dialogVisible: any = ref(false)
|
|
const time = ref('1')
|
|
const rowList: any = ref({})
|
|
const tableData: any = ref()
|
|
|
|
const picList = ref([])
|
|
|
|
const trendEChart: any = ref({})
|
|
|
|
const picEChart = ref()
|
|
const open = async (row: any) => {
|
|
rowList.value = {
|
|
deviceInfoParam: {
|
|
...row
|
|
},
|
|
pageNum: 1,
|
|
pageSize: 1000,
|
|
...row
|
|
}
|
|
// 趋势分析
|
|
analysis(1)
|
|
dialogVisible.value = true
|
|
//分布统计
|
|
getGridDiagramDevData(rowList.value).then(res => {
|
|
picList.value = res.data
|
|
let picData: any = []
|
|
res.data.forEach((item: any) => {
|
|
picData.push({
|
|
value: item.devCount,
|
|
name: `${item.orgName}`,
|
|
itemStyle: {
|
|
color: item.onlineEvaluate < 60 ? 'red' : item.onlineEvaluate < 90 ? 'orange' : 'green'
|
|
}
|
|
})
|
|
})
|
|
|
|
picEChart.value = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b} :在运终端数 {c} 台'
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
xAxis: {
|
|
show: false
|
|
},
|
|
yAxis: {
|
|
show: false
|
|
},
|
|
options: {
|
|
dataZoom: null,
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
startAngle: 360,
|
|
center: ['50%', '55%'],
|
|
radius: ['40%', '60%'],
|
|
endAngle: 0,
|
|
labelLine: {
|
|
length: 8,
|
|
length2: 30,
|
|
show: true
|
|
},
|
|
label: {
|
|
padding: [0, -30],
|
|
formatter: '{b}\n\n'
|
|
},
|
|
itemStyle: {
|
|
borderColor: '#fff',
|
|
borderWidth: 1
|
|
},
|
|
|
|
data: picData
|
|
}
|
|
]
|
|
}
|
|
}
|
|
})
|
|
// 列表
|
|
getGridDiagramDevDataList({
|
|
deviceInfoParam: {
|
|
...row,
|
|
serverName: 'pqs-common',
|
|
ids: [row.id],
|
|
runFlag: [],
|
|
comFlag: [],
|
|
manufacturer: dictData.getBasicData('Dev_Manufacturers'),
|
|
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
|
|
},
|
|
...row,
|
|
serverName: 'pqs-common',
|
|
ids: [row.id],
|
|
runFlag: [],
|
|
comFlag: [],
|
|
manufacturer: dictData.getBasicData('Dev_Manufacturers'),
|
|
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
|
|
}).then((res: any) => {
|
|
tableData.value = res.data
|
|
})
|
|
}
|
|
|
|
const analysis = (e: any) => {
|
|
let time = rowList.value.searchBeginTime.slice(0, 4) + `-01-01`
|
|
|
|
getGridDiagramDevTendency({ ...rowList.value, searchBeginTime: time, type: e }).then(res => {
|
|
let name = []
|
|
let data = []
|
|
let num = 0
|
|
for (let k in res.data) {
|
|
name.push(k)
|
|
num = num + res.data[k]
|
|
data.push(num)
|
|
}
|
|
|
|
trendEChart.value = {
|
|
title: {
|
|
text: '终端接入总数量'
|
|
},
|
|
xAxis: {
|
|
name: '时间',
|
|
data: name
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
yAxis: {
|
|
name: '台'
|
|
},
|
|
|
|
options: {
|
|
dataZoom: null,
|
|
series: [
|
|
{
|
|
name: '接入',
|
|
type: 'line',
|
|
data: data,
|
|
smooth: true,
|
|
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
fontSize: 12
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
})
|
|
}
|
|
const formatter = (row: any) => {
|
|
if (row.column.field == 'onlineEvaluate') {
|
|
return row.cellValue == 3.14159 ? '/' : row.cellValue * 100
|
|
} else {
|
|
return row.cellValue
|
|
}
|
|
}
|
|
const handleClose = () => {
|
|
tableData.value = []
|
|
dialogVisible.value = false
|
|
}
|
|
defineExpose({ open })
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
:deep(.el-select) {
|
|
min-width: 80px;
|
|
}
|
|
.title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 10px;
|
|
span {
|
|
font-weight: 550;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
.pie {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
:deep(.el-table thead) {
|
|
color: #000;
|
|
}
|
|
:deep(.el-dialog__body) {
|
|
max-height: none !important;
|
|
}
|
|
</style>
|