修改冀北问题
This commit is contained in:
guanj
630
src/views/pqs/runManage/runEvaluate/index_JB.vue
Normal file
630
src/views/pqs/runManage/runEvaluate/index_JB.vue
Normal file
@@ -0,0 +1,630 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader date-picker ref="TableHeaderRef" :dateLabel="`数据统计时间`">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="运行状态">
|
||||
<el-select v-model="tableStore.table.params.lineRunFlag" clearable placeholder="请选择运行状态">
|
||||
<el-option
|
||||
v-for="item in runFlagList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选">
|
||||
<el-input v-model="tableStore.table.params.filterName" placeholder="输入关键字筛选" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
<template v-slot:operation>
|
||||
<el-button type="primary" icon="el-icon-Download" @click="onExport">导出</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<div class="card-list pt10" v-loading="tableStore.table.loading">
|
||||
<div class="monitoringPoints">
|
||||
<el-card style="height: 200px">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>终端统计</span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<statistics :params="statisticsList" />
|
||||
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="mt10">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>完整性统计</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="mb5" style="height: 40px">
|
||||
<el-segmented
|
||||
style="height: 100%"
|
||||
v-model="segmented"
|
||||
:props="props"
|
||||
:options="segmentedList"
|
||||
block
|
||||
@change="tableStore.index()"
|
||||
>
|
||||
<template #default="scope">
|
||||
<div>
|
||||
<div>{{ scope.item.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-segmented>
|
||||
</div>
|
||||
<div class="header">
|
||||
<span style="width: 110px; text-align: left">
|
||||
{{
|
||||
segmented == 'Power_Network'
|
||||
? '区域'
|
||||
: segmented == 'Manufacturer'
|
||||
? '终端厂家'
|
||||
: '电网标志'
|
||||
}}
|
||||
</span>
|
||||
<span style="width: 90px">终端总数</span>
|
||||
<span style="flex: 1">完整性(%)</span>
|
||||
<span style="width: 80px">在线率(%)</span>
|
||||
<span style="width: 80px">合格率(%)</span>
|
||||
</div>
|
||||
<div :style="indicatorHeight" style="overflow-y: auto">
|
||||
<div v-for="o in abnormal" class="abnormal mb10">
|
||||
<span style="width: 110px; height: 24px" class="iconDiv">
|
||||
<div :style="{ backgroundColor: o.citTotalOnlineRate < 90 ? '#FF9100' : '' }"></div>
|
||||
{{ o.name }}
|
||||
</span>
|
||||
<!-- 终端总数 -->
|
||||
<span
|
||||
style="width: 90px; color: #388e3c"
|
||||
class="text text-style"
|
||||
@click="renderTable(o.list, o.name+'_')"
|
||||
>
|
||||
{{ o.count }}
|
||||
</span>
|
||||
<!-- -->
|
||||
<span
|
||||
style="flex: 1; color: #ff9100"
|
||||
class="text"
|
||||
:class="` ${o.integrity < 90 ? 'text-red' : ''}`"
|
||||
>
|
||||
{{ o.integrity }}
|
||||
</span>
|
||||
<span
|
||||
style="width: 80px; color: #388e3c"
|
||||
:class="` ${o.online < 90 ? 'text-red' : ''}`"
|
||||
class="text"
|
||||
>
|
||||
{{ o.online }}
|
||||
</span>
|
||||
<span
|
||||
style="width: 80px; color: #388e3c"
|
||||
:class="` ${o.qualified < 90 ? 'text-red' : ''}`"
|
||||
class="text"
|
||||
>
|
||||
{{ o.qualified }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-card class="detail ml10" :style="pageHeight">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ title }}终端详情</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!--表格-->
|
||||
|
||||
<div :style="{ height: tableStore.table.height }" v-loading="loading">
|
||||
<vxe-table
|
||||
height="auto"
|
||||
:data="dataList.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
|
||||
v-bind="defaultAttribute"
|
||||
ref="tableRef"
|
||||
:scroll-y="{ enabled: true }"
|
||||
>
|
||||
<vxe-column type="seq" title="序号" width="80px">
|
||||
<template #default="{ rowIndex }">
|
||||
<span>
|
||||
{{
|
||||
(tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize +
|
||||
rowIndex +
|
||||
1
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="cit" title="参数地市" width="110px"></vxe-column>
|
||||
<vxe-column field="company" title="供电公司"></vxe-column>
|
||||
<vxe-column field="subName" title="变电站"></vxe-column>
|
||||
<vxe-column field="manufacturer" title="终端厂家"></vxe-column>
|
||||
<vxe-column field="name" title="终端名称"></vxe-column>
|
||||
<vxe-column field="ip" title="终端IP" :formatter="formatter" width="130px"></vxe-column>
|
||||
<vxe-column field="runFlag" title="运行状态" width="100px">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
:type="
|
||||
row.runFlag == '运行'
|
||||
? 'success'
|
||||
: row.runFlag == '停运'
|
||||
? 'danger'
|
||||
: row.runFlag == '检修'
|
||||
? 'warning'
|
||||
: row.runFlag == '调试'
|
||||
? 'warning'
|
||||
: 'danger'
|
||||
"
|
||||
>
|
||||
{{ row.runFlag }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="integrityRate" title="完整性(%)" width="100px"></vxe-column>
|
||||
<vxe-column field="onLineRate" title="在线率(%)" width="100px"></vxe-column>
|
||||
<vxe-column field="passRate" title="合格率(%)" width="100px"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
<div class="table-pagination">
|
||||
<el-pagination
|
||||
v-model:currentPage="pageNum"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100, 200]"
|
||||
background
|
||||
layout="sizes,total, ->, prev, pager, next, jumper"
|
||||
:total="dataList.length"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { onMounted, provide, ref } from 'vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import statistics from './components/statistics.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { getMonitorVerifyDay } from '@/api/device-boot/dataVerify'
|
||||
defineOptions({
|
||||
name: 'harmonic-boot/harmonic/getIntegrityData'
|
||||
})
|
||||
|
||||
const dictData = useDictData()
|
||||
//字典获取监督对象类型
|
||||
const pageHeight = mainHeight(97)
|
||||
const indicatorHeight = mainHeight(447)
|
||||
const monitoringPoints = ref({
|
||||
runNum: 0,
|
||||
abnormalNum: 0,
|
||||
totalOnlineRate: 0
|
||||
})
|
||||
const pageSize = ref(20)
|
||||
const pageNum = ref(1)
|
||||
const title = ref('')
|
||||
const statisticsList: any = ref({
|
||||
allNum: 0,
|
||||
runNum: 0,
|
||||
checkNum: 0,
|
||||
stopRunNum: 0
|
||||
})
|
||||
const loading = ref(false)
|
||||
const dataList = ref([])
|
||||
const tableRef = ref()
|
||||
const percentage = ref({})
|
||||
const TableHeaderRef = ref()
|
||||
const abnormal: any = ref([])
|
||||
const totalData: any = ref([])
|
||||
//定义终端运行状态下拉框数据
|
||||
const runFlagList = [
|
||||
{ id: 0, name: '运行' },
|
||||
{ id: 1, name: '检修' },
|
||||
{ id: 2, name: '停运' },
|
||||
{ id: 3, name: '调试' },
|
||||
{ id: 4, name: '退运' }
|
||||
]
|
||||
// Statistical_Type
|
||||
|
||||
const segmented = ref('Power_Network')
|
||||
|
||||
const segmentedList = dictData.getBasicData('Statistical_Type', ['Report_Type', 'Voltage_Level', 'Load_Type'])
|
||||
const props = {
|
||||
value: 'code',
|
||||
label: 'name'
|
||||
}
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/deviceRunEvaluate/getRunEvaluateInfo',
|
||||
method: 'POST',
|
||||
showPage: false,
|
||||
publicHeight: 145,
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.statisticalType = segmentedList.filter(item => item.code === segmented.value)[0]
|
||||
},
|
||||
loadCallback: () => {
|
||||
totalData.value = Array.from(
|
||||
tableStore.table.data
|
||||
.map((item: any) => item.list)
|
||||
.flat()
|
||||
.reduce((map: any, item: any) => {
|
||||
if (!map.has(item.id)) {
|
||||
map.set(item.id, item)
|
||||
}
|
||||
return map
|
||||
}, new Map())
|
||||
.values()
|
||||
)
|
||||
|
||||
// tableStore.table.data
|
||||
statisticsList.value.allNum = totalData.value.length
|
||||
statisticsList.value.runNum = tableStore.table.data.allNum
|
||||
statisticsList.value.checkNum = tableStore.table.data.allNum
|
||||
statisticsList.value.stopRunNum = tableStore.table.data.allNum
|
||||
|
||||
abnormal.value = tableStore.table.data
|
||||
// 合并子集数据 并去重
|
||||
|
||||
totalTable(101, '')
|
||||
// echart()
|
||||
}
|
||||
})
|
||||
|
||||
const echart = () => {
|
||||
percentage.value = {
|
||||
color: ['#FF9100'],
|
||||
options: {
|
||||
dataZoom: null,
|
||||
toolbox: {
|
||||
show: false
|
||||
},
|
||||
grid: {
|
||||
top: '0%',
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
bottom: '0%'
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false,
|
||||
data: ['']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
show: false,
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
|
||||
series: [
|
||||
{
|
||||
name: '异常总数',
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
data: [100],
|
||||
z: 0,
|
||||
zlevel: 0,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#57bc6e' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '异常占比',
|
||||
type: 'bar',
|
||||
barWidth: 13,
|
||||
data: [monitoringPoints.value.totalOnlineRate - 0],
|
||||
z: 0,
|
||||
zlevel: 0,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#FF9100' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#FF9100' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'pictorialBar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
symbolRepeat: 50,
|
||||
// symbolMargin: 300,
|
||||
symbol: 'rect',
|
||||
symbolClip: true,
|
||||
symbolSize: [2, 20],
|
||||
symbolPosition: 'start',
|
||||
symbolOffset: [0, 0],
|
||||
data: [100],
|
||||
z: 1,
|
||||
zlevel: 0
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
type: 'bar',
|
||||
barGap: '-110%',
|
||||
data: [100],
|
||||
barWidth: 18,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'transparent',
|
||||
barBorderColor: 'rgb(148,217,249)',
|
||||
barBorderWidth: 1
|
||||
}
|
||||
},
|
||||
z: 2
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
tableStore.table.params.lineRunFlag = ''
|
||||
|
||||
const formatter = (row: any) => {
|
||||
return row.cellValue || '/'
|
||||
}
|
||||
// 渲染总表格
|
||||
const totalTable = (num: number, t: string) => {
|
||||
title.value = t
|
||||
loading.value = true
|
||||
pageNum.value = 1
|
||||
dataList.value = []
|
||||
dataList.value = totalData.value.filter((item: any) => {
|
||||
return item
|
||||
})
|
||||
|
||||
loading.value = false
|
||||
}
|
||||
// 渲染表格
|
||||
const renderTable = (list: any, t: string) => {
|
||||
title.value = t
|
||||
loading.value = true
|
||||
pageNum.value = 1
|
||||
dataList.value = []
|
||||
dataList.value = list
|
||||
loading.value = false
|
||||
}
|
||||
// 导出
|
||||
const onExport = () => {
|
||||
tableRef.value?.exportData({
|
||||
filename: title.value + '完整性详情', // 文件名字
|
||||
sheetName: 'Sheet1',
|
||||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
data: dataList.value, // 数据源 // 过滤那个字段导出
|
||||
columnFilterMethod: function (column: any) {
|
||||
return !(
|
||||
column.column.title === undefined ||
|
||||
column.column.title === '序号' ||
|
||||
column.column.title === '操作'
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
// TableHeaderRef.value.setDatePicker([
|
||||
// { label: '年份', value: 1 },
|
||||
// { label: '季度', value: 2 },
|
||||
// { label: '月份', value: 3 }
|
||||
// ])
|
||||
|
||||
// 加载数据
|
||||
|
||||
tableStore.index()
|
||||
})
|
||||
|
||||
tableStore.table.params.name = ''
|
||||
provide('tableStore', tableStore)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
display: flex;
|
||||
.monitoringPoints {
|
||||
width: 460px;
|
||||
position: relative;
|
||||
.statistics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
.divBox {
|
||||
width: 200px;
|
||||
height: 70px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
|
||||
.iconfont {
|
||||
font-size: 40px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.divBox_title {
|
||||
font-weight: 550;
|
||||
}
|
||||
.divBox_num {
|
||||
font-size: 20px;
|
||||
font-weight: 550;
|
||||
margin-left: auto;
|
||||
font-family: AlimamaDongFangDaKai;
|
||||
}
|
||||
align-items: center;
|
||||
// text-align: center;
|
||||
border-radius: 5px;
|
||||
&:nth-child(1) {
|
||||
background-color: #eef8f0;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
background-color: #fff6ed;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
background-color: #e5f8f6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail {
|
||||
flex: 1;
|
||||
}
|
||||
.abnormal {
|
||||
width: 100%;
|
||||
background-color: #f3f6f9;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px 0px 5px 10px;
|
||||
.iconDiv {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
div {
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
margin-right: 5px;
|
||||
background-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
.text {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
text-align: center;
|
||||
|
||||
// font-feature-settings: 'tnum';
|
||||
}
|
||||
}
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
|
||||
font-weight: 700;
|
||||
padding: 5px;
|
||||
}
|
||||
:deep(.el-card__header) {
|
||||
padding: 10px;
|
||||
span {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
:deep(.el-card__body) {
|
||||
padding: 10px;
|
||||
}
|
||||
.iconFont {
|
||||
font-size: 18px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.form {
|
||||
position: relative;
|
||||
.form_but {
|
||||
position: absolute;
|
||||
right: -22px;
|
||||
}
|
||||
}
|
||||
.card-header {
|
||||
font-size: 16px;
|
||||
}
|
||||
:deep(.table_name) {
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
.echartTitle {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
div:nth-child(2) {
|
||||
font-size: 16px;
|
||||
color: #ff6600;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-segmented__item-selected, ) {
|
||||
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
|
||||
}
|
||||
:deep(.el-segmented__item, ) {
|
||||
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
|
||||
position: relative;
|
||||
}
|
||||
:deep(.el-segmented) {
|
||||
clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
|
||||
}
|
||||
.text-red {
|
||||
color: #ff9100 !important;
|
||||
}
|
||||
.text-style {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.segmentedIcon {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 100px;
|
||||
height: 18px !important;
|
||||
line-height: 19px;
|
||||
padding: 0 4px;
|
||||
font-size: 12px;
|
||||
background: #ff9100;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.table-pagination {
|
||||
height: 58px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: var(--ba-bg-color-overlay);
|
||||
padding: 13px 15px;
|
||||
border-left: 1px solid #e4e7e9;
|
||||
border-right: 1px solid #e4e7e9;
|
||||
border-bottom: 1px solid #e4e7e9;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user