稳态电能质量分析页面组件
This commit is contained in:
stt
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<div>
|
||||
<my-echart class="tall" :options="echartList_1" :style="{ width: prop.width, height: halfHeight }" />
|
||||
<vxe-table ref="tableRef" :data="tableData" height="auto" :style="{ width: prop.width, height: halfHeight }">
|
||||
<vxe-column type="seq" title="序号"></vxe-column>
|
||||
<vxe-column field="srbName" align="center" title="部门"></vxe-column>
|
||||
<!-- <vxe-column width="200" title="操作">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" size="small" link @click="tactics(row.id, 0)">自动</el-button>
|
||||
<el-button type="primary" size="small" link @click="tactics(row.id, 1)">手动</el-button>
|
||||
<el-button type="primary" size="small" link @click="tactics(row.id, 2)">排除</el-button>
|
||||
</template>
|
||||
</vxe-column> -->
|
||||
</vxe-table>
|
||||
<!-- <Table ref="tableRef" :style="{ width: prop.width, height: halfHeight }"></Table> -->
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, provide } from 'vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
const echartList_1 = ref({})
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String }
|
||||
})
|
||||
|
||||
const halfHeight = computed(() => {
|
||||
const h = parseFloat(prop.height || '400')
|
||||
return `${h / 2}px`
|
||||
})
|
||||
|
||||
const tableData = ref([])
|
||||
|
||||
const dictData = useDictData()
|
||||
const distributionData: any = ref([])
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/event-boot/area/getAreaLineDetail',
|
||||
method: 'POST',
|
||||
column: [],
|
||||
loadCallback: () => {
|
||||
tabulation(tableStore.table.data)
|
||||
histogram(tableStore.table.data)
|
||||
}
|
||||
})
|
||||
provide('tableStore', tableStore)
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.serverName = 'event-boot'
|
||||
// 表格数据处理
|
||||
const tabulation = (res: any) => {
|
||||
tableData.value = res.substationDetailVOList
|
||||
distributionData.value = []
|
||||
for (var i = 0; i < res.areaValue.length; i++) {
|
||||
distributionData.value.push({
|
||||
qy: res.areaValue[i][0],
|
||||
jcd: res.areaValue[i][1],
|
||||
zc: res.areaValue[i][2],
|
||||
zd: res.areaValue[i][3]
|
||||
})
|
||||
}
|
||||
}
|
||||
// 柱状图数据处理
|
||||
const histogram = (res: any) => {
|
||||
echartList_1.value = {
|
||||
title: {
|
||||
text: '区域'
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
// console.log(params);
|
||||
var tips = ''
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
tips += params[i].name + '</br/>'
|
||||
tips += '监测点数' + ':' + ' ' + ' ' + params[i].value + '</br/>'
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
name: '(区域)',
|
||||
data: distributionData.value.map((item: any) => item.qy)
|
||||
},
|
||||
yAxis: {
|
||||
name: '监测点数（个）' // 给X轴加单位
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
// name: '暂降次数',
|
||||
type: 'bar',
|
||||
data: distributionData.value.map((item: any) => item.jcd),
|
||||
barMaxWidth: 30,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#07CCCA'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: '#000'
|
||||
},
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
|
||||
// watch(
|
||||
// () => prop.timeKey,
|
||||
// val => {
|
||||
// tableStore.index()
|
||||
// }
|
||||
// )
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
106
src/views/cockpit/teadyStatePowerQuality/pointList.vue
Normal file
106
src/views/cockpit/teadyStatePowerQuality/pointList.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--主要监测点列表 -->
|
||||
<TableHeader :showReset="false" ref="TableHeaderRef">
|
||||
<template v-slot:select>
|
||||
<el-form-item>
|
||||
<el-input v-model="tableStore.table.params.searchValue" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" @cell-click="handleCellClick"></Table>
|
||||
<!-- 弹框组件 -->
|
||||
<el-dialog v-model="dialogVisible" title="详情信息" width="800px" append-to-body destroy-on-close>
|
||||
<p>行数据: {{ selectedRow }}</p>
|
||||
<p>列数据: {{ selectedColumn }}</p>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch } from 'vue'
|
||||
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/indexClick.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String }
|
||||
})
|
||||
const dictData = useDictData()
|
||||
const fontdveoption = dictData.getBasicData('Dev_Ops')
|
||||
const dialogVisible = ref(false)
|
||||
const selectedRow = ref(null)
|
||||
const selectedColumn = ref(null)
|
||||
|
||||
const tableStore: any = new TableStore({
|
||||
url: '/device-boot/pqsTerminalLogs/getList',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '60',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ title: '名称', field: 'createBy', width: '200', clickable: true },
|
||||
{
|
||||
title: '日志类型',
|
||||
field: 'logsType',
|
||||
width: '100',
|
||||
formatter: (row: any) => {
|
||||
return fontdveoption.find((item: any) => item.id == row.cellValue)?.name
|
||||
}
|
||||
},
|
||||
|
||||
// {
|
||||
// title: '更改人员',
|
||||
// field: 'createBy',
|
||||
// width: '100'
|
||||
// },
|
||||
{
|
||||
title: '更改时间',
|
||||
field: 'updateTime',
|
||||
width: '140'
|
||||
},
|
||||
|
||||
{ title: '描述', field: 'terminalDescribe' }
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
const timeKey = prop.timeKey ?? ''
|
||||
tableStore.table.params.searchBeginTime = getTimeOfTheMonth(timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = getTimeOfTheMonth(timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
tableStore.table.params.type = ''
|
||||
tableStore.table.params.searchValue = ''
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
|
||||
const handleCellClick = (row: any, column: any) => {
|
||||
selectedRow.value = row
|
||||
selectedColumn.value = column
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user