Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实时数据-实时趋势页面调试

Browse Source
This commit is contained in:
zhujiyan
2024-07-31 10:42:04 +08:00
parent a545692e33
commit 44684c99ed
9 changed files with 658 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/api/cs-device-boot/EquipmentDelivery.ts
View File

@@ -25,24 +25,56 @@ export function getTabsDataByType(data: any) {
})
}
//获取实时数据列表数据
export function getRealTimeTableList() {
return createAxios({
url: '/cs-device-boot/csGroup/getGroupPortableStatistical',
method: 'GET'
})
}
//离线数据导入
export function uploadOffLineDataFile(data: any) {
return createAxios({
headers: {
'Content-Type': 'multipart/form-data'
},
url: '/cs-device-boot/portableOfflLog/importEquipment',
method: 'POST',
data
})
}
//查询实时数据中实时趋势中指标分组
export function getDeviceTrendDataGroup() {
return createAxios({
url: '/cs-device-boot/csGroup/getDeviceTrendDataGroup',
method: 'GET',
})
}
//根据指标分组查询实时数据中实时趋势
export function getDeviceTrendData(query: any) {
return createAxios({
url: '/cs-device-boot/csGroup/getDeviceTrendData',
method: 'GET',
params: query
})
}
//查询实时数据-谐波频谱-稳态指标
export function getGroupPortableStatistical() {
return createAxios({
url: '/cs-device-boot/csGroup/getGroupPortableStatistical',
method: 'GET',
})
}
//离线数据导入
export function uploadOffLineDataFile(data: any) {
//查询实时数据-谐波频谱
export function getDeviceHarmonicSpectrumData(data: any) {
return createAxios({
headers: {
'Content-Type': 'multipart/form-data',
},
url: '/cs-device-boot/portableOfflLog/importEquipment',
url: '/cs-device-boot/csGroup/getDeviceHarmonicSpectrumData',
method: 'POST',
data,
data:data
})
}
}

43
src/views/govern/device/control/index.vue
View File

@@ -207,9 +207,9 @@
<!-- 实时数据 -->
<div style="height: calc(100vh - 200px)" v-if="dataSet.indexOf('_realtimedata') != -1">
<div class="view_top_btn" v-if="realTimeFlag">
<el-button type="primary" size="small" :icon="Platform" @click="handleRecordWaves">
<!-- <el-button type="primary" size="small" :icon="Platform" @click="handleRecordWaves">
实时录波
</el-button>
</el-button> -->
<el-button type="primary" size="small" :icon="TrendCharts" @click="handleTrend">
实时趋势
</el-button>
@@ -225,9 +225,9 @@
<!-- 实时数据-实时录波组件 -->
<recordWoves v-if="!realTimeFlag && sonTab == 0"></recordWoves>
<!-- 实时数据-实时趋势组件 -->
<realTrend v-if="!realTimeFlag && sonTab == 1"></realTrend>
<realTrend v-show="!realTimeFlag && sonTab == 1" ref="realTrendRef"></realTrend>
<!-- 实时数据-谐波频谱组件 -->
<harmonicSpectrum v-if="!realTimeFlag && sonTab == 2" ref="harmonicSpectrumRef"></harmonicSpectrum>
<harmonicSpectrum v-show="!realTimeFlag && sonTab == 2" ref="harmonicSpectrumRef"></harmonicSpectrum>
</div>
<!-- 暂态事件 -->
<div style="height: calc(100vh - 200px)" v-show="dataSet.indexOf('_event') != -1">
@@ -244,7 +244,6 @@
<analysisList ref="analysisListRef"></analysisList>
</div>
</template>
<script setup lang="ts">
import Detail from './detail.vue'
import PointTree from '@/components/tree/govern/pointTree.vue'
@@ -338,18 +337,24 @@ const sonTab = ref()
const handleRecordWaves = () => {
realTimeFlag.value = false
sonTab.value = 0
window.clearInterval(timer.value)
}
//实时趋势
const realTrendRef = ref()
const handleTrend = () => {
realTimeFlag.value = false
sonTab.value = 1
console.log(realTrendRef.value, '++++++')
realTrendRef.value && realTrendRef.value.open({ devId: deviceId.value, lineId: lineId.value })
window.clearInterval(timer.value)
}
//谐波频谱
const harmonicSpectrumRef = ref()
const handleHarmonicSpectrum = () => {
realTimeFlag.value = false
sonTab.value = 2
harmonicSpectrumRef.value && harmonicSpectrumRef.value.init()
harmonicSpectrumRef.value && harmonicSpectrumRef.value.getHarmonicSpectrumParams({ devId: deviceId.value, lineId: lineId.value })
window.clearInterval(timer.value)
}
//返回
const handleReturn = () => {
@@ -430,14 +435,21 @@ const nodeClick = async (e: anyObj) => {
}
const realTimeRef: any = ref()
const intRealTime = async (val: any) => {
await getTabsDataByType(val).then(res => {
getTabsDataByType(val).then(res => {
realTimeRef.value && realTimeRef.value.getRealTimeData(res.data)
})
timer.value = window.setInterval(() => {
getTabsDataByType(val).then(res => {
realTimeRef.value && realTimeRef.value.getRealTimeData(res.data)
})
console.log(timer.value, '定时器时间666666 ')
}, 20000)
}
//趋势数据组件
const trendRef: any = ref()
//暂态事件组件
const eventRef: any = ref()
const timer: any = ref()
//tab点击事件
const handleClick = async (tab?: any) => {
tableLoading.value = true
@@ -449,10 +461,13 @@ const handleClick = async (tab?: any) => {
tableData.value = []
formInline.pageNum = 1
}
if (timer.value) {
window.clearInterval(timer.value)
}
// setTimeout(async () => {
//查询历史指标
if (dataSet.value.includes('_history')) {
console.log('执行次数55555')
formInline.startTime = datePickerRef.value && datePickerRef.value.timeValue[0]
formInline.endTime = datePickerRef.value && datePickerRef.value.timeValue[1]
formInline.id = dataSet.value.replace('_history', '')
@@ -461,7 +476,6 @@ const handleClick = async (tab?: any) => {
formInline.total = res.data.total
tableLoading.value = false
})
console.log(tableData.value, '++++++++++++')
}
//查询趋势数据
if (dataSet.value.includes('_trenddata')) {
@@ -492,9 +506,12 @@ const handleClick = async (tab?: any) => {
lineId: lineId.value //e.pid
}
intRealTime(obj)
await setTimeout(() => {
intRealTime(obj)
}, 20000)
}
if (!dataSet.value.includes('_realtimedata')) {
// console.log(timer.value, '=====定时球带哦用时间=====')
// if(timer.value){
// window.clearInterval(timer.value)
// }
}
//查询暂态事件
if (dataSet.value.includes('_event')) {
@@ -517,7 +534,6 @@ const handleClick = async (tab?: any) => {
// })
}
//查询当前指标
console.log(dataSet.value.indexOf('_'), '查询当前指标')
if (!dataSet.value.includes('_')) {
formInline.id = dataSet.value
await deviceRtData(formInline).then((res: any) => {
@@ -526,6 +542,7 @@ const handleClick = async (tab?: any) => {
tableLoading.value = false
})
}
// }, 100)
}
//模版下载

77
src/views/govern/device/control/tabs/components/harmonicSpectrum.vue
View File

@@ -42,6 +42,7 @@ import { ref, onMounted, watch } from 'vue'
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getDeviceHarmonicSpectrumData, getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery.ts'
const searchForm = ref({})
searchForm.value = {
index: []
@@ -59,10 +60,11 @@ queryByCode('portable-harmonic').then(res => {
})
})
const tableList: any = ref([])
for (let i = 0; i < 100; i++) {
for (let i = 0; i < 10000; i++) {
tableList.value.push({
name: i + 1,
value: Math.floor(Math.random() * 101)
// value: Math.floor(Math.random() * 101)
value: i + 2
})
}
const echartsData1: any = ref([]),
@@ -75,6 +77,21 @@ const echartsData1: any = ref([]),
const chartsTitle1 = ref('')
const chartsTitle2 = ref('')
const chartsTitle3 = ref('')
//谐波频谱参数
const params = ref({})
const getHarmonicSpectrumParams = (val: any) => {
params.value = val
params.value.list = []
console.log(params.value, '+++++++++++++')
//查询稳态指标
getRealTimeTableList().then(res => {
console.log('稳态指标', res)
})
//查询谐波频谱
getDeviceHarmonicSpectrumData(params.value).then(res => {
console.log('谐波频谱')
})
}
const init = () => {
const xDataList: any = [],
yDataList1: any = [],
@@ -83,22 +100,22 @@ const init = () => {
tableList.value.map((item: any) => {
xDataList.push(item.name)
yDataList1.push(item.value)
yDataList2.push(Math.floor(Math.random() * 101) + Math.floor(Math.random() * 101))
yDataList3.push(Math.floor(Math.random() * 101) + Math.floor(Math.random() * 101))
yDataList2.push(item.value + 1000)
yDataList3.push(item.value + 2000)
})
indexOptions.value.map((item:any)=>{
if(item.id==searchForm.value.index[0]){
chartsTitle1.value=item.name
}
if(item.id==searchForm.value.index[1]){
chartsTitle2.value=item.name
}
if(item.id==searchForm.value.index[2]){
chartsTitle3.value=item.name
}
})
console.log( chartsTitle1.value, chartsTitle2.value, chartsTitle3.value,"666677777");
indexOptions.value.map((item: any) => {
if (item.id == searchForm.value.index[0]) {
chartsTitle1.value = item.name
}
if (item.id == searchForm.value.index[1]) {
chartsTitle2.value = item.name
}
if (item.id == searchForm.value.index[2]) {
chartsTitle3.value = item.name
}
})
console.log(chartsTitle1.value, chartsTitle2.value, chartsTitle3.value, '666677777')
if (searchForm.value.index[0]) {
echartsData1.value = {
options: {
@@ -107,7 +124,7 @@ const init = () => {
{
left: '10%',
top: 0,
text:chartsTitle1.value
text: chartsTitle1.value
}
],
grid: {
@@ -163,7 +180,8 @@ const init = () => {
textStyle: {
color: '#000' //X轴文字颜色
}
}
},
boundaryGap: false
},
yAxis: [
{
@@ -180,8 +198,7 @@ const init = () => {
lineStyle: {
color: '#000'
}
},
smooth: true
}
}
],
series: [
@@ -196,6 +213,7 @@ const init = () => {
// }e
},
data: yDataList1,
smooth: true, // 这里设置平滑曲线
symbol: 'none' // 设置为 'none' 去掉折点小圆
},
{
@@ -210,6 +228,7 @@ const init = () => {
// }
},
data: yDataList2,
smooth: true, // 这里设置平滑曲线
symbol: 'none' // 设置为 'none' 去掉折点小圆
},
{
@@ -223,6 +242,7 @@ const init = () => {
// }
},
data: yDataList3,
smooth: true, // 这里设置平滑曲线
symbol: 'none' // 设置为 'none' 去掉折点小圆
}
]
@@ -238,7 +258,7 @@ const init = () => {
{
left: '10%',
top: 0,
text:chartsTitle2.value
text: chartsTitle2.value
}
],
grid: {
@@ -294,7 +314,8 @@ const init = () => {
textStyle: {
color: '#000' //X轴文字颜色
}
}
},
boundaryGap: false
},
yAxis: [
{
@@ -326,6 +347,7 @@ const init = () => {
// }e
},
data: yDataList1,
smooth: true, // 这里设置平滑曲线
symbol: 'none' // 设置为 'none' 去掉折点小圆
},
{
@@ -340,6 +362,7 @@ const init = () => {
// }
},
data: yDataList2,
smooth: true, // 这里设置平滑曲线
symbol: 'none' // 设置为 'none' 去掉折点小圆
},
{
@@ -353,6 +376,7 @@ const init = () => {
// }
},
data: yDataList3,
smooth: true, // 这里设置平滑曲线
symbol: 'none' // 设置为 'none' 去掉折点小圆
}
]
@@ -424,7 +448,8 @@ const init = () => {
textStyle: {
color: '#000' //X轴文字颜色
}
}
},
boundaryGap: false
},
yAxis: [
{
@@ -456,6 +481,7 @@ const init = () => {
// }e
},
data: yDataList1,
smooth: true, // 这里设置平滑曲线
symbol: 'none' // 设置为 'none' 去掉折点小圆
},
{
@@ -470,6 +496,7 @@ const init = () => {
// }
},
data: yDataList2,
smooth: true, // 这里设置平滑曲线
symbol: 'none' // 设置为 'none' 去掉折点小圆
},
{
@@ -483,6 +510,7 @@ const init = () => {
// }
},
data: yDataList3,
smooth: true, // 这里设置平滑曲线
symbol: 'none' // 设置为 'none' 去掉折点小圆
}
]
@@ -507,7 +535,7 @@ onMounted(() => {
console.log()
// init()
})
defineExpose({ init })
defineExpose({ getHarmonicSpectrumParams })
</script>
<style lang="scss" scoped>
.harmonic {
@@ -535,6 +563,7 @@ defineExpose({ init })
.harmonic_body_charts {
height: 200px;
margin: 15px 0;
border: 1px solid #eee;
}
}
}

464
src/views/govern/device/control/tabs/components/realtrend.vue
View File

@@ -1,8 +1,35 @@
<!-- 实时趋势 -->
<!-- 实时数据 - 实时趋势 -->
<template>
<div class="realtrend">
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="谐波电压含有率" name="0">
<el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="item.id" :key="index">
<div v-loading="loading">
<div class="realtrend_top">
<div class="thead">
<ul v-for="(table, tableIndex) in newTableList" :key="tableIndex">
<li>
{{ table[0].value }}
</li>
</ul>
</div>
<div class="table">
<ul v-for="(table, tableIndex) in newTableList" :key="tableIndex">
<span v-for="(key, keys) in table">
<li v-if="keys != 0">
{{ key?.value }}
</li>
</span>
</ul>
</div>
</div>
<div class="tab_info">
<div class="charts">
<MyEchart ref="barCharts" :options="echartsData"></MyEchart>
</div>
</div>
</div>
</el-tab-pane>
<!-- <el-tab-pane label="谐波电压含有率" name="0">
<template #label>
<span class="custom-tabs-label">
<el-icon><TrendCharts /></el-icon>
@@ -43,7 +70,7 @@
<MyEchart ref="barCharts3" :options="echartsData3"></MyEchart>
</div>
</div>
</el-tab-pane>
</el-tab-pane> -->
</el-tabs>
</div>
</template>
@@ -53,69 +80,11 @@ import { VxeGridProps, VxeGridPropTypes } from 'vxe-table'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { Platform, TrendCharts, DataLine } from '@element-plus/icons-vue'
const activeName = ref('0')
const tableList = [
{
name: '2次',
value: Math.floor(Math.random() * 101)
},
{
name: '3次',
value: Math.floor(Math.random() * 101)
},
{
name: '4次',
value: Math.floor(Math.random() * 101)
},
{
name: '5次',
value: Math.floor(Math.random() * 101)
},
{
name: '6次',
value: Math.floor(Math.random() * 101)
},
{
name: '7次',
value: Math.floor(Math.random() * 101)
},
{
name: '8次',
value: Math.floor(Math.random() * 101)
},
{
name: '9次',
value: Math.floor(Math.random() * 101)
},
{
name: '10次',
value: Math.floor(Math.random() * 101)
},
{
name: '11次',
value: Math.floor(Math.random() * 101)
},
{
name: '12次',
value: Math.floor(Math.random() * 101)
},
{
name: '13次',
value: Math.floor(Math.random() * 101)
},
{
name: '14次',
value: Math.floor(Math.random() * 101)
},
{
name: '15次',
value: Math.floor(Math.random() * 101)
},
{
name: '16次',
value: Math.floor(Math.random() * 101)
}
]
import { getDeviceTrendDataGroup, getDeviceTrendData } from '@/api/cs-device-boot/EquipmentDelivery.ts'
import Index from '@/components/wangEditor/index.vue'
const activeName = ref('')
const tableList: any = []
interface RowVO {
[key: string]: any
}
@@ -132,26 +101,101 @@ const gridOptions = ref<VxeGridProps<RowVO>>({
align: 'center'
})
gridOptions.value = { ...defaultAttribute, ...gridOptions.value }
const myColumns = ref([
{ field: 'name', title: '次数' },
{ field: 'value', title: '谐波电压含有率(%)' }
const myColumns: any = ref([
// { field: 'name', title: '次数' }
// { field: 'value', title: '谐波电压含有率(%)' }
])
const yAxisUnit: any = ref('')
myColumns.value.map(item => {
if (item.field == 'value') {
item.title =
activeName.value == '0'
? '谐波电压含有率(%)'
: activeName.value == '1'
? '间谐波电压含有率(%)'
: activeName.value == '2'
? '谐波电流幅值(A)'
: ''
yAxisUnit.value = item.title.split('(')[0]
}
})
// myColumns.value.map(item => {
// if (item.field == 'value') {
// item.title =
// activeName.value == '0'
// ? '谐波电压含有率(%)'
// : activeName.value == '1'
// ? '间谐波电压含有率(%)'
// : activeName.value == '2'
// ? '谐波电流幅值(A)'
// : ''
// yAxisUnit.value = item.title.split('(')[0]
// }
// })
const myData = tableList
const tabsList = ref([])
//接收参数
const params = ref({})
const open = (val: any) => {
//获取指标tab
getDeviceTrendDataGroup().then(res => {
tabsList.value = res.data
if (tabsList.value.length != 0) {
activeName.value = tabsList.value[0]?.id
}
params.value = { groupId: activeName.value, ...val }
findRealTrendDataByGroupId(params.value)
})
return
}
const newTableList: any = ref([])
//根据指标tab查询实时趋势
const loading: any = ref(false)
//echarts数据
const chartsData: any = ref([])
const chartsYxiasData: any = ref([])
const findRealTrendDataByGroupId = (obj: any) => {
loading.value = true
chartsData.value=[]
chartsYxiasData.value=[]
let list = []
let countList = []
for (let i = 2; i <= 50; i++) {
countList.push({ value: i + '次', count: i })
}
list[0] = countList
getDeviceTrendData(obj).then(res => {
myColumns.value = [{ field: 'name', title: '次数' }]
chartsData.value = res.data[0].thdDataTdVODatas
//处理实时趋势表格
let arr = res.data[0].thdDataVOS
arr.map((item: any, index: any) => {
myColumns.value.push({ field: item.phase, title: item.name })
chartsYxiasData.value.push({ phase: item.phase, title: item.name, phaseList: [], gbList: [] })
//循环第二层数据
item.list = []
item.data.map((vv: any, vvs: any) => {
if (!(vv.statisticalData + '')) {
vv.statisticalData = '/'
}
item.list.push({ value: vv.statisticalData, count: vv.frequency })
})
list[index + 1] = item.list
if (item.list.length == 0) {
for (let i = 0; i < countList.length; i++) {
item.list.push({
value: '/',
count: index
})
}
}
if (item.list.length != 0 && item.list.length < countList.length) {
for (let i = 0; i < countList.length - item.list.length; i++) {
item.list.push({
value: '/',
count: index
})
}
}
})
// 转换为对象数组
list.map((item: any, index: any) => {
item.unshift({ value: myColumns.value[index].title, count: '' })
})
newTableList.value = list
loading.value = false
init()
})
}
//反转表格
const reverseTable = () => {
@@ -181,14 +225,145 @@ const reverseTable = () => {
reverseTable()
const echartsData1: any = ref([]),
const echartsData: any = ref([]),
echartsData1: any = ref([]),
echartsData2: any = ref([]),
echartsData3: any = ref([]),
barCharts = ref(),
barCharts1 = ref(),
barCharts2 = ref(),
barCharts3 = ref()
//加载echarts
const init = () => {
// let list: any = []
let timeList: any = []
let xAxisList: any = []
chartsData.value.map((item: any, index: any) => {
chartsYxiasData.value.map((vv: any) => {
if (item.phase == vv.phase) {
vv.phaseList.push(item.statisticalData)
vv.gbList.push(item.internationalValue)
}
})
xAxisList.push(item.frequency + '次')
})
xAxisList = [...new Set(xAxisList)]
echartsData.value = {
options: {
// backgroundColor: '#0f375f',
grid: {
top: '22%',
bottom: '18%', //也可设置left和right设置距离来控制图表的大小
left: '3%',
right: '5%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
show: false
}
}
},
legend: {
data: [],
itemGap: 15,
type: 'scroll', // 开启滚动分页
// orient: 'vertical', // 垂直排列
right: '3%', // 位置调整
top: 0,
bottom: 20,
width: 400,
height: 50
// icon: 'icon'
// icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
// itemWidth: 14,
// itemHeight: 14,
// textStyle: {
// inside: true,
// color: '#000',
// padding: [11, 0, 10, 0],
// align: 'left',
// verticalAlign: 'center',
// fontSize: 14,
// rich: {}
// }
},
xAxis: {
name: '次数',
data: xAxisList,
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#000'
}
},
axisTick: {
show: true //隐藏X轴刻度
},
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#000' //X轴文字颜色
}
}
},
yAxis: [
{
type: 'value',
name: '单位(' + chartsData?.value[0]?.unit?chartsData?.value[0]?.unit:'' + ')',
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#000'
}
}
}
],
series: []
}
}
let list: any = []
list = []
chartsYxiasData.value.map((item: any) => {
if (item.phaseList.length != 0) {
list.push({ phase: item.phase, title: item.title, list: item.phaseList })
}
if (item.gbList.length != 0) {
list.push({ phase: item.phase, title: item.title + '国标限值', list: item.gbList })
}
})
const colorList = ['#DAA521', 'aqua', '#d81e06', 'coral', '#1DD0CE', 'cadetblue']
list.map((item: any, index: any) => {
echartsData.value.options.legend.data.push(item.title)
echartsData.value.options.series.push({
name: item.title,
type: 'bar',
barMaxWidth: 16, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
// color: '#00CC99'
// }e
color: colorList[index]
},
data: item.list
})
})
barCharts.value && barCharts.value.initChart()
return
const xDataList: any = [],
yDataList1: any = [],
yDataList2: any = []
@@ -522,96 +697,91 @@ const init = () => {
}
const handleClick = (tab: any, event: any) => {
activeName.value = tab.index
myColumns.value.map(item => {
if (item.field == 'value') {
item.title =
activeName.value == '0'
? '谐波电压含有率(%)'
: activeName.value == '1'
? '间谐波电压含有率(%)'
: activeName.value == '2'
? '谐波电流幅值(A)'
: ''
yAxisUnit.value = item.title.split('(')[0]
}
})
activeName.value = tabsList.value[tab.index].id
params.value.groupId = activeName.value
findRealTrendDataByGroupId(params.value)
reverseTable()
init()
}
onMounted(() => {
init()
})
defineExpose({ open })
</script>
<style lang="scss" scoped>
.realtrend {
width: 100%;
height: 100%;
.table_info {
.realtrend_top {
width: 100%;
height: auto;
overflow-x: auto;
.table {
width: auto;
height: auto;
border: 2px solid #eee;
display: flex;
flex-direction: column;
.thead {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.thead {
height: 100%;
overflow-y: hidden;
border: 1px solid #eee;
border-right: 0;
ul {
width: auto;
height: 40px;
display: flex;
border-bottom: 2px solid #eee;
.thead_left {
width: 200px !important;
height: 100%;
li {
flex: none;
width: 100px;
line-height: 40px;
border: 1px solid #eee;
text-align: center;
font-size: 14px;
font-weight: 800;
list-style: none;
}
.thead_right {
flex: 1;
display: flex;
.thead_right_item {
flex: none;
width: 100px;
text-align: center;
line-height: 40px;
border-left: 1px solid #eee;
}
li:nth-child(1) {
flex: none;
width: 200px;
}
}
.tbody {
width: 100%;
height: 40px;
display: flex;
.tbody_left {
width: 200px !important;
height: 100%;
line-height: 40px;
text-align: center;
font-size: 14px;
ul:nth-child(1) {
li {
font-weight: 800;
}
.tbody_right {
flex: 1;
display: flex;
.tbody_right_item {
flex: none;
width: 100px;
text-align: center;
line-height: 40px;
border-left: 1px solid #eee;
}
background: #f4f6f9;
}
}
}
.table {
flex: 1;
// min-height: 80px;
cursor: pointer;
min-height: 90px;
max-height: 170px;
border: 1px solid #eee;
overflow-x: auto;
overflow-y: hidden;
position: relative;
ul {
width: auto;
height: 40px;
display: flex;
li {
flex: none;
width: 100px;
line-height: 40px;
border: 1px solid #eee;
text-align: center;
list-style: none;
}
}
ul:nth-child(1) {
li {
font-weight: 800;
background: #f4f6f9;
}
}
}
.table::-webkit-scrollbar {
display: none;
}
}
}
.reverse-table {
// max-height:120px !important;
}
.reverse-table .vxe-body--row .vxe-body--column:first-child {
background-color: #f8f8f9;
}

187
src/views/govern/device/control/tabs/components/waveFormAnalysis.vue
View File

@@ -1,15 +1,36 @@
<!-- 波形解析组件 -->
<!-- 暂态事件-波形解析组件 -->
<template>
<div class="waveFormAnalysis">
<div class="waveFormAnalysis_header">
<el-form-item label="值类型选择">
<el-select v-model="searchForm.type" style="width: 200px">
<el-option label="一次值" :value="0"></el-option>
<el-select @change="changeView" v-model="value" placeholder="请选择值类型">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</div>
<el-tabs class="waveFormAnalysis_body" type="border-card" v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="瞬时波形" name="0">
<el-tab-pane
label="瞬时波形"
name="ssbx"
class="boxbx pt10 pb10"
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
>
<shushiboxi v-if="wp" :value="value" :boxoList="boxoList" :wp="wp"></shushiboxi>
</el-tab-pane>
<el-tab-pane
label="RMS波形"
class="boxbx pt10 pb10"
name="rmsbx"
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
>
<rmsboxi v-if="wp" :value="value" :boxoList="boxoList" :wp="wp"></rmsboxi>
</el-tab-pane>
<!-- <el-tab-pane label="瞬时波形" name="0">
<template #label>
<span class="custom-tabs-label">
<el-icon><TrendCharts /></el-icon>
@@ -34,22 +55,25 @@
<MyEchart ref="barCharts2" :options="echartsData2"></MyEchart>
</div>
</div>
</el-tab-pane>
</el-tab-pane> -->
</el-tabs>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import { ref, onMounted, reactive, defineExpose, watch } from 'vue'
import { VxeGridProps, VxeGridPropTypes } from 'vxe-table'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import shushiboxi from '@/components/echarts/shushiboxi.vue'
import rmsboxi from '@/components/echarts/rmsboxi.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { Platform, TrendCharts, DataLine } from '@element-plus/icons-vue'
import { mainHeight } from '@/utils/layout'
const props = defineProps(['wp'])
const searchForm = ref({
type: 0
})
const activeName = ref('0')
const tableList: any = ref([])
for (let i = 0; i < 500; i++) {
for (let i = 0; i < 300; i++) {
tableList.value.push({
name: i + 1,
value: Math.floor(Math.random() * 101)
@@ -80,8 +104,50 @@ const echartsData1: any = ref([]),
barCharts1 = ref(),
barCharts2 = ref(),
barCharts3 = ref()
const view = ref(true)
const view2 = ref(false)
const showBoxi = ref(true)
const activeName = ref('ssbx')
const boxoList = ref({})
const wp = ref({})
const value = ref(1)
const options = ref([
{
value: 1,
label: '一次值'
},
{
value: 2,
label: '二次值'
}
])
watch(
() => props.wp,
(val, oldVal) => {
if (val) {
console.log(val, '+++++++++++++++wp')
wp.value == val
}
},
{
immediate: true,
deep: true
}
)
const getWpData = (val: any) => {
wp.value = val
}
const changeView = () => {
// showBoxi.value = false
// setTimeout(() => {
// showBoxi.value = true
// }, 0)
}
const bxecharts = mainHeight(155).height as any
//加载echarts
const init = () => {
return
const xDataList: any = [],
yDataList1: any = [],
yDataList2: any = [],
@@ -180,7 +246,9 @@ const init = () => {
color: '#00CC99'
// }e
},
data: yDataList1
data: yDataList1,
smooth: true, // 这里设置平滑曲线
symbol: 'none' // 设置为 'none' 去掉折点小圆
},
{
name: 'B相',
@@ -193,7 +261,9 @@ const init = () => {
color: '#FF9900'
// }
},
data: yDataList2
data: yDataList2,
smooth: true, // 这里设置平滑曲线
symbol: 'none' // 设置为 'none' 去掉折点小圆
},
{
name: 'C相',
@@ -205,7 +275,9 @@ const init = () => {
// color: '#FF9900'
// }
},
data: yDataList3
data: yDataList3,
smooth: true, // 这里设置平滑曲线
symbol: 'none' // 设置为 'none' 去掉折点小圆
}
]
}
@@ -308,7 +380,6 @@ const init = () => {
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0],
color: '#FF9900'
// }
},
@@ -454,95 +525,19 @@ const init = () => {
const handleClick = (tab: any, event: any) => {
activeName.value = tab.index
if (tab.name == 'ssbx') {
activeName.value = 'ssbx'
} else if (tab.name == 'rmsbx') {
activeName.value = 'rmsbx'
}
init()
}
onMounted(() => {
init()
})
defineExpose({ getWpData })
</script>
<style lang="scss" scoped>
.realtrend {
width: 100%;
height: 100%;
.table_info {
width: 100%;
height: auto;
overflow-x: auto;
.table {
width: auto;
height: auto;
border: 2px solid #eee;
display: flex;
flex-direction: column;
.thead {
width: 100%;
height: 40px;
display: flex;
border-bottom: 2px solid #eee;
.thead_left {
width: 200px !important;
height: 100%;
line-height: 40px;
text-align: center;
font-size: 14px;
font-weight: 800;
}
.thead_right {
flex: 1;
display: flex;
.thead_right_item {
flex: none;
width: 100px;
text-align: center;
line-height: 40px;
border-left: 1px solid #eee;
}
}
}
.tbody {
width: 100%;
height: 40px;
display: flex;
.tbody_left {
width: 200px !important;
height: 100%;
line-height: 40px;
text-align: center;
font-size: 14px;
font-weight: 800;
}
.tbody_right {
flex: 1;
display: flex;
.tbody_right_item {
flex: none;
width: 100px;
text-align: center;
line-height: 40px;
border-left: 1px solid #eee;
}
}
}
}
}
}
.reverse-table {
// max-height:120px !important;
}
.reverse-table .vxe-body--row .vxe-body--column:first-child {
background-color: #f8f8f9;
}
::v-deep .vxe-table--render-wrapper {
height: 90px !important;
max-height: 90px !important;
overflow-x: auto !important;
min-height: 0 !important;
}
::v-deep .body--wrapper {
height: 90px !important;
max-height: 90px !important;
min-height: 0 !important;
}
.tab_info {
width: 100%;
height: calc(100vh - 450px);
@@ -567,9 +562,9 @@ onMounted(() => {
.waveFormAnalysis_header {
position: absolute;
top: -30px;
left:0;
left: 0;
}
.waveFormAnalysis_body{
.waveFormAnalysis_body {
margin-top: 15px;
}
}

38
src/views/govern/device/control/tabs/event.vue
View File

@@ -1,15 +1,15 @@
<template>
<div class="header_btn">
<el-button type="primary" size="small" @click="handleWaveFormAnalysis(0)" v-if="!isWaveCharts">
<!-- <el-button type="primary" size="small" @click="handleWaveFormAnalysis(0)" v-if="!isWaveCharts">
波形解析
</el-button>
</el-button> -->
<el-button type="primary" size="small" @click="handleBack" v-if="isWaveCharts" :icon="ArrowLeft">
返回
</el-button>
</div>
<div class="view">
<Table ref="tableRef" v-if="!isWaveCharts" />
<waveFormAnalysis ref="waveFormAnalysisRef" v-if="isWaveCharts" />
<waveFormAnalysis ref="waveFormAnalysisRef" v-if="isWaveCharts" :wp="wp" />
</div>
</template>
<script lang="ts" setup>
@@ -19,7 +19,16 @@ import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import waveFormAnalysis from './components/waveFormAnalysis.vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import { analyseWave } from '@/api/common'
const tableParams: any = ref({})
const refheader = ref()
const view = ref(true)
const view2 = ref(false)
const showBoxi = ref(true)
const bxactiveName = ref('ssbx')
const boxoList = ref({})
const wp = ref({})
const value = ref(1)
const tableStore: any = new TableStore({
url: '/cs-device-boot/csGroup/deviceDataByType',
publicHeight: 210,
@@ -79,8 +88,25 @@ const tableStore: any = new TableStore({
type: 'primary',
icon: 'el-icon-Check',
render: 'basicButton',
click: row => {
handleWaveFormAnalysis(row)
// disabled: row => {
// return !row.wavePath && row.evtParamTm < 20
// },
click: async row => {
row.loading = true
boxoList.value = row
await analyseWave(row.eventId)
.then(res => {
row.loading = false
if (res != undefined) {
wp.value = res.data
view.value = false
view2.value = true
}
})
.catch(() => {
row.loading = false
})
handleWaveFormAnalysis(wp.value)
}
}
]
@@ -105,9 +131,11 @@ const getTableParams = (val: any) => {
tableStore.index()
}
//波形解析组件
const waveFormAnalysisRef = ref()
const handleWaveFormAnalysis = (val: any) => {
console.log(val, '波形解析')
isWaveCharts.value = true
waveFormAnalysisRef.value.getWpData(val)
}
//返回
const handleBack = () => {

163
src/views/govern/device/control/tabs/realtime.vue
View File

@@ -53,6 +53,9 @@
</div>
</div>
</div>
<div v-else style="border: 1px solid #eee" v-loading="loading">
<el-empty description="暂无数据" />
</div>
</div>
</div>
</div>
@@ -381,7 +384,6 @@ const getColumns = () => {
//处理表格数据
const getTableData = (list: any) => {
tableData.value = list
loading.value = false
columnsData.value.map((item: any) => {
item.map((vv: any) => {
vv.statisticalData = list.find((kk: any) => {
@@ -389,93 +391,98 @@ const getTableData = (list: any) => {
})?.statisticalData
})
})
loading.value = false
}
//获取实时数据
const getRealTimeData = (val: any) => {
dataList.value = val
dataList.value.map((item: any, index: any) => {
if (item.anotherName == '相电压总有效值') {
listV.value.push(item)
}
if (item.anotherName == '线电压总有效值') {
listA.value.push(item)
}
})
if (val.length != 0) {
dataList.value = val
dataList.value.map((item: any, index: any) => {
if (item.anotherName == '相电压总有效值') {
listV.value.push(item)
}
if (item.anotherName == '线电压总有效值') {
listA.value.push(item)
}
})
echartsDataV1.value.options.series[0].data = [
{
name:
listV.value.find((item: any) => {
echartsDataV1.value.options.series[0].data = [
{
name:
listV.value.find((item: any) => {
return item.phase == 'A'
})?.phase + '相',
value: listV.value.find((item: any) => {
return item.phase == 'A'
})?.phase + '相',
value: listV.value.find((item: any) => {
return item.phase == 'A'
})?.statisticalData
}
]
pieChart1.value.initChart()
echartsDataV2.value.options.series[0].data = [
{
name:
listV.value.find((item: any) => {
})?.statisticalData
}
]
pieChart1.value.initChart()
echartsDataV2.value.options.series[0].data = [
{
name:
listV.value.find((item: any) => {
return item.phase == 'B'
})?.phase + '相',
value: listV.value.find((item: any) => {
return item.phase == 'B'
})?.phase + '相',
value: listV.value.find((item: any) => {
return item.phase == 'B'
})?.statisticalData
}
]
pieChart2.value.initChart()
echartsDataV3.value.options.series[0].data = [
{
name:
listV.value.find((item: any) => {
})?.statisticalData
}
]
pieChart2.value.initChart()
echartsDataV3.value.options.series[0].data = [
{
name:
listV.value.find((item: any) => {
return item.phase == 'C'
})?.phase + '相',
value: listV.value.find((item: any) => {
return item.phase == 'C'
})?.phase + '相',
value: listV.value.find((item: any) => {
return item.phase == 'C'
})?.statisticalData
}
]
pieChart3.value.initChart()
echartsDataA1.value.options.series[0].data = [
{
name:
listA.value.find((item: any) => {
})?.statisticalData
}
]
pieChart3.value.initChart()
echartsDataA1.value.options.series[0].data = [
{
name:
listA.value.find((item: any) => {
return item.phase == 'AB'
})?.phase + '相',
value: listA.value.find((item: any) => {
return item.phase == 'AB'
})?.phase + '相',
value: listA.value.find((item: any) => {
return item.phase == 'AB'
})?.statisticalData
}
]
pieChart4.value.initChart()
echartsDataA2.value.options.series[0].data = [
{
name:
listA.value.find((item: any) => {
})?.statisticalData
}
]
pieChart4.value.initChart()
echartsDataA2.value.options.series[0].data = [
{
name:
listA.value.find((item: any) => {
return item.phase == 'BC'
})?.phase + '相',
value: listA.value.find((item: any) => {
return item.phase == 'BC'
})?.phase + '相',
value: listA.value.find((item: any) => {
return item.phase == 'BC'
})?.statisticalData
}
]
pieChart5.value.initChart()
echartsDataA3.value.options.series[0].data = [
{
name:
listA.value.find((item: any) => {
})?.statisticalData
}
]
pieChart5.value.initChart()
echartsDataA3.value.options.series[0].data = [
{
name:
listA.value.find((item: any) => {
return item.phase == 'CA'
})?.phase + '相',
value: listA.value.find((item: any) => {
return item.phase == 'CA'
})?.phase + '相',
value: listA.value.find((item: any) => {
return item.phase == 'CA'
})?.statisticalData
}
]
pieChart6.value.initChart()
getColumns()
getTableData(val)
})?.statisticalData
}
]
pieChart6.value.initChart()
getColumns()
getTableData(val)
} else {
init()
}
}
defineExpose({ getRealTimeData })
onMounted(() => {

12
src/views/govern/device/control/tabs/trend.vue
View File

@@ -52,7 +52,7 @@
</div>
</div>
<div class="history_chart" v-loading="loading">
<MyEchart ref="historyChart" :isExport="true" :options="echartsData" />
<MyEchart ref="historyChart" :options="echartsData" />
</div>
</div>
</template>
@@ -144,6 +144,7 @@ const getTrendRequest = async (val: any) => {
}
//初始化趋势图
const init = async () => {
loading.value = true
// 选择指标的时候切换legend内容和data数据
let list: any = []
legendDictList.value?.selectedList?.map((item: any) => {
@@ -173,8 +174,7 @@ const init = async () => {
initSearchFormIndexAndCount(searchForm.value.index)
//查询历史趋势
historyDataList.value = []
loading.value = true
chartTitle.value=''
chartTitle.value = ''
searchForm.value.index.map((item: any, indexs: any) => {
indexOptions.value.map((vv: any) => {
@@ -287,15 +287,15 @@ const init = async () => {
},
grid: {
left: '3%',
right: '3%',
bottom: '10%',
right: '4%',
bottom: '5%',
top: '5%',
containLabel: true
},
xAxis: [
{
type: 'category',
name: '\n\n\n\n\n时间',
name: '时间',
axisLabel: {
color: '#A9AEB2',
fontSize: 12,

2
src/views/govern/reportCore/statistics/index.vue
View File

@@ -160,7 +160,7 @@ const exportEvent = () => {
</script>
<style lang="scss" scoped>
.splitpanes.default-theme .splitpanes__pane {
background: #eaeef1;
background: #fff;
}
.box {