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

修改样式

Browse Source
This commit is contained in:
GGJ
2024-09-29 18:15:54 +08:00
parent e140362c42
commit 83af279826
7 changed files with 291 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/views/govern/device/control/detail.vue
View File

@@ -39,6 +39,7 @@ import { reactive } from 'vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import { getDeviceDataTrend } from '@/api/cs-harmonic-boot/datatrend'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { yMethod } from '@/utils/echartMethod'
interface Props {
detail: anyObj
@@ -118,6 +119,7 @@ const init = () => {
res.data.forEach((item: any[]) => {
arr.push(...item)
})
let [min, max, interval] = yMethod(arr.map((item: any) => item.statisticalData))
echartsData.value = {
options: {
grid: {
@@ -183,25 +185,52 @@ const init = () => {
axisLine: {
show: true
},
minInterval: 0.1,
min: (
arr
.map((item: any) => item.statisticalData)
.sort((a, b) => {
return a - b
})[0] / 1.2
).toFixed(1),
max: (
arr
.map(item => item.statisticalData)
.sort((a, b) => {
return b - a
})[0] * 1.2
).toFixed(1)
min: min,
max: max,
// interval:interval,
splitNumber:5
// min: 134,
// max: 500,
// min: Math.ceil(
// arr
// .map((item: any) => item.statisticalData)
// .sort((a, b) => {
// return a - b
// })[0]
// ),
// max: Math.floor(
// arr
// .map(item => item.statisticalData)
// .sort((a, b) => {
// return b - a
// })[0]
// ),
// interval: (Math.floor(
// arr
// .map(item => item.statisticalData)
// .sort((a, b) => {
// return b - a
// })[0]
// ) - Math.ceil(
// arr
// .map((item: any) => item.statisticalData)
// .sort((a, b) => {
// return a - b
// })[0]
// )) / 5,
},
xAxis: {
type: 'time'
type: 'time',
axisLabel: {
formatter: {
day: '{MM}-{dd}',
}
}
// data: res.data[0].map((item: any) => {
// return item.time
// }),

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

@@ -4,12 +4,8 @@
<div class="home_header">
<el-form-item label="值类型选择">
<el-select @change="changeView" v-model="value" placeholder="请选择值类型">
<el-option
v-for="(item, index) in options"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
<el-option v-for="(item, index) in options" :key="index" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="">
@@ -17,29 +13,15 @@
</el-form-item>
</div>
<el-tabs class="home_body" type="border-card" v-model="activeName" @tab-click="handleClick">
<el-tab-pane
label="瞬时波形"
name="ssbx"
:style="'height:' + bxecharts + ';overflow-y: scroll;padding-bottom:200px;'"
>
<shushiboxi
v-if="isWp && wp && activeName == 'ssbx'"
:value="value"
:boxoList="boxoList"
:wp="wp"
></shushiboxi>
<el-tab-pane label="瞬时波形" name="ssbx"
:style="'height:' + bxecharts + ';overflow-y: scroll;padding-bottom:200px;'">
<shushiboxi v-if="isWp && wp && activeName == 'ssbx'" :value="value" :boxoList="boxoList" :wp="wp">
</shushiboxi>
</el-tab-pane>
<el-tab-pane
label="RMS波形"
name="rmsbx"
:style="'height:' + bxecharts + ';overflow-y: scroll;padding-bottom:200px;'"
>
<rmsboxi
v-if="isWp && wp && activeName == 'rmsbx'"
:value="value"
:boxoList="boxoList"
:wp="wp"
></rmsboxi>
<el-tab-pane label="RMS波形" name="rmsbx"
:style="'height:' + bxecharts + ';overflow-y: scroll;padding-bottom:200px;'">
<rmsboxi v-if="isWp && wp && activeName == 'rmsbx'" :value="value" :boxoList="boxoList" :wp="wp">
</rmsboxi>
</el-tab-pane>
</el-tabs>
</div>
@@ -135,13 +117,14 @@ const handleClick = (tab: any, event: any) => {
const handleBack = () => {
emit('handleHideCharts')
}
onMounted(() => {})
onMounted(() => { })
defineExpose({ getWpData })
</script>
<style lang="scss" scoped>
.tab_info {
width: 100%;
height: calc(100vh - 450px);
// overflow: auto;
// padding-bottom: 20px;
.charts {
@@ -157,6 +140,7 @@ defineExpose({ getWpData })
display: flex;
flex-direction: column;
position: relative;
.home_header {
// position: absolute;
// top: -25px;
@@ -166,10 +150,12 @@ defineExpose({ getWpData })
height: 50px;
display: flex;
align-items: center;
.el-select {
width: 200px !important;
}
}
.home_body {
// margin-top: 20px;
flex: 1;

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

@@ -1,51 +1,37 @@
<template>
<div>
<div class="history_header">
<el-form :model="searchForm" class="history_select" id="history_select">
<el-form-item>
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item label="统计指标" label-width="80px">
<el-select
multiple
:multiple-limit="3"
collapse-tags
collapse-tags-tooltip
v-model="searchForm.index"
placeholder="请选择统计指标"
@change="onIndexChange($event)"
>
<el-option
v-for="item in indexOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<div v-for="(item, index) in countData" :key="index">
<el-form-item
:label="item.name + '谐波次数'"
v-if="item.countOptions.length != 0"
label-width="180px"
>
<el-select
v-model="item.count"
multiple
collapse-tags
collapse-tags-tooltip
@change="onCountChange($event, index)"
placeholder="请选择谐波次数"
>
<el-option v-for="vv in item.countOptions" :key="vv" :label="vv" :value="vv"></el-option>
<div >
<TableHeader :showSearch="false">
<template v-slot:select>
<!-- <el-form :model="searchForm" class="history_select" id="history_select"> -->
<el-form-item>
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item label="统计指标" label-width="80px">
<el-select multiple :multiple-limit="3" collapse-tags collapse-tags-tooltip
v-model="searchForm.index" placeholder="请选择统计指标" @change="onIndexChange($event)">
<el-option v-for="item in indexOptions" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
</div>
</el-form>
<div class="history_searchBtn">
<div v-for="(item, index) in countData" :key="index">
<el-form-item :label="item.name + '谐波次数'" v-if="item.countOptions.length != 0"
label-width="180px">
<el-select v-model="item.count" multiple collapse-tags collapse-tags-tooltip
@change="onCountChange($event, index)" placeholder="请选择谐波次数">
<el-option v-for="vv in item.countOptions" :key="vv" :label="vv"
:value="vv"></el-option>
</el-select>
</el-form-item>
</div>
<!-- </el-form> -->
</template>
<template #operation>
<el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
</div>
</template>
</TableHeader>
</div>
<div class="history_chart" v-loading="loading">
<MyEchart ref="historyChart" :options="echartsData" />
@@ -280,7 +266,7 @@ const init = async () => {
width: 430,
height: 50
},
xAxis: [
{
type: 'category',
@@ -457,7 +443,7 @@ const handleExport = async () => {
if (deviceData.value.records && deviceData.value.records.length != 0) {
let csv = '',
obj:any = {}
obj: any = {}
obj = deviceData.value.records.find((item: any) => {
return item.id == activeName.value
})
@@ -612,14 +598,14 @@ const initSearchFormIndexAndCount = (list: any) => {
}
// 判断下拉框是否存在
const onCountChange = (val: any, index: any) => {
if(val.length==0){
countData.value[index].count=[countData.value[index].countOptions[0]]
}
if (val.length == 0) {
countData.value[index].count = [countData.value[index].countOptions[0]]
}
}
const onIndexChange = (val: any, ) => {
if(val.length==0){
searchForm.value.index=[indexOptions.value[0].id]
}
const onIndexChange = (val: any,) => {
if (val.length == 0) {
searchForm.value.index = [indexOptions.value[0].id]
}
}
watch(
() => searchForm.value.index,
@@ -657,13 +643,14 @@ watch(
// immediate: true
// }
// )
onMounted(() => {})
onMounted(() => { })
defineExpose({ getTrendRequest })
</script>
<style lang="scss" scoped>
.history_header {
display: flex;
// flex-wrap: wrap;
#history_select {
width: 100%;
@@ -672,10 +659,12 @@ defineExpose({ getTrendRequest })
// overflow-x: auto;
height: auto;
flex-wrap: wrap;
.el-form-item {
flex: none !important;
// max-width: 380px;
}
.el-select {
margin-right: 10px;
}
@@ -696,7 +685,7 @@ defineExpose({ getTrendRequest })
.history_chart {
width: 100%;
height: calc(100vh - 450px) !important;
height: calc(100vh - 400px) !important;
// flex: 1;
margin-top: 10px;
}