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

联调 辽宁台账维护 页面 修改 冀北 bug

Browse Source
This commit is contained in:
GGJ
2024-08-15 20:31:02 +08:00
parent fd5458105e
commit 9e1bbe8dc3
23 changed files with 794 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/LN/newEnergy/newEnergyAnalysis/components/detail.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<el-dialog v-model="dialogVisible" title="越限详情" width="50%" draggable>
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="500px" :data="tableData">
<vxe-column field="num2" title="指标" />
<vxe-column field="num2" title="时间" />
<vxe-column field="num3" title="最小值" />
<vxe-column field="num3" title="最大值" />
<vxe-column field="num3" title="平均值" />
<vxe-column field="num3" title="cp95值" />
<vxe-column field="num3" title="国际限值" />
</vxe-table>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { defaultAttribute } from '@/components/table/defaultAttribute'
const dialogVisible = ref(false)
const tableData = ref([])
const open = () => {
dialogVisible.value = true
}
defineExpose({ open })
</script>
<style lang="scss" scoped></style>

106
src/views/LN/newEnergy/newEnergyAnalysis/components/timePopUpBox.vue Normal file
View File

@@ -0,0 +1,106 @@
<template>
<div class="dictiontary-list-detail child-router">
<TableHeader :showSearch="false">
<template #select>
<el-form-item label="">
<span class="text-large font-600 mr-3">{{ props.timePopUpBox.num }}</span>
</el-form-item>
<el-form-item>
<el-radio-group v-model="radio2">
<el-radio-button label="基础数据" value="1" />
<el-radio-button label="谐波电压" value="2" />
<el-radio-button label="谐波电流" value="3" />
<el-radio-button label="间谐波电压含有率" value="4" />
</el-radio-group>
</el-form-item>
</template>
<template #operation>
<el-button icon="el-icon-Back" @click="$emit('close')">返回</el-button>
</template>
</TableHeader>
<Table ref="tableRef" isGroup />
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { ElMessage } from 'element-plus'
import { dictDataDelete } from '@/api/system-boot/dicData'
defineOptions({
name: 'setting/dictionary/list/detail'
})
const radio2 = ref('1')
interface Props {
timePopUpBox: anyObj
}
const props = withDefaults(defineProps<Props>(), {
timePopUpBox: () => {
return {}
}
})
const popupEditRef = ref()
const tableStore = new TableStore({
url: '/user-boot/function/getRouteMenu',
method: 'GET',
column: [
{ title: '指标', field: 'name' },
{
title: '最小值',
field: 'code',
children: [
{ title: 'A', field: 'num' },
{ title: 'B', field: 'num' },
{ title: 'C', field: 'num' }
]
},
{
title: '最大值',
field: 'sort',
children: [
{ title: 'A', field: 'num' },
{ title: 'B', field: 'num' },
{ title: 'C', field: 'num' }
]
},
{
title: '平均值',
field: 'value',
children: [
{ title: 'A', field: 'num' },
{ title: 'B', field: 'num' },
{ title: 'C', field: 'num' }
]
},
{
title: 'cp95值',
field: 'levelName',
children: [
{ title: 'A', field: 'num' },
{ title: 'B', field: 'num' },
{ title: 'C', field: 'num' }
]
}
],
loadCallback: () => {
tableStore.table.data = [
{ name: '电压偏差(%)', num: 0.0 },
{ name: '谐波电压(%)', num: 0.0 },
{ name: '谐波电流(%)', num: 0.0 },
{ name: '三相电压不平衡度(%)', num: 0.0 },
{ name: '电压波动(%)', num: 0.0 },
{ name: '闪变(%)', num: 0.0 },
{ name: '间谐波电压含有率(%)', num: 0.0 },
{ name: '电流不平衡度', num: 0.0 }
]
}
})
provide('tableStore', tableStore)
onMounted(() => {
tableStore.index()
})
</script>

420
src/views/LN/newEnergy/newEnergyAnalysis/index.vue Normal file
View File

@@ -0,0 +1,420 @@
<template>
<div class="default-main" :style="height">
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
<pane :size="size">
<PointTree
:default-expand-all="false"
@node-click="handleNodeClick"
@init="handleNodeClick"
></PointTree>
</pane>
<pane :style="height" style="background: #fff">
<TableHeader ref="TableHeaderRef" datePicker>
<template v-slot:select>
<!-- <el-form-item label="有功功率区间">
<el-select
v-model="power"
multiple
collapse-tags
collapse-tags-tooltip
filterable
placeholder="请选择有功功率区间"
>
<el-option
v-for="item in powerList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="各指标越限">
<el-select
v-model="index"
multiple
collapse-tags
collapse-tags-tooltip
filterable
placeholder="请选择各指标越限"
>
<el-option
v-for="item in indexList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item> -->
</template>
<template #operation>
<el-button icon="el-icon-Download" type="primary">生成报表</el-button>
</template>
</TableHeader>
<div class="container pd10">
<div>
<el-card class="cardBox">
<div class="mb5" style="display: flex; justify-content: space-between">
<h3>有功功率趋势分析</h3>
<div>
<span>图例:　</span>
<span style="color: red">稳态越限　</span>
<span style="color: green">合格</span>
</div>
</div>
<el-card class="card-top">
<div
v-for="item in powerList1"
class="pd10"
style="cursor: pointer"
:class="flag == item.label ? 'hoverBox' : ''"
@click="handleClick(item.label)"
>
<div style="font-size: 24px; font-weight: 700">
<span :style="{ color: item.crossTheLine === '越限' ? 'red' : 'green' }">
{{ item.quantity }}
</span>
<span style="font-size: 14px; font-weight: 500">个</span>
</div>
<div>
{{ item.label }}
</div>
</div>
</el-card>
<el-card class="card-top mt15">
<div
v-for="item in powerList2"
class="pd10"
style="cursor: pointer"
:class="flag == item.label ? 'hoverBox' : ''"
@click="handleClick(item.label)"
>
<div style="font-size: 24px; font-weight: 700">
<span :style="{ color: item.crossTheLine === '越限' ? 'red' : 'green' }">
{{ item.quantity }}
</span>
<span style="font-size: 14px; font-weight: 500">个</span>
</div>
<div>
{{ item.label }}
</div>
</div>
</el-card>
</el-card>
</div>
<el-card class="echart">
<my-echart :options="options" style="height: 198px" />
</el-card>
</div>
<div class="container mt10 ml10">
<el-card class="box">
<div :style="heightB" style="overflow-y: auto">
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="auto" :data="tableData">
<vxe-column field="num" title="时间" min-width="100px">
<template #default="{ row }">
<el-link type="primary" @click="timeClick(row)">{{ row.num }}</el-link>
</template>
</vxe-column>
<vxe-column field="num1" title="电压偏差(%)" />
<vxe-column field="num2" title="谐波电压(%)" />
<vxe-column field="num3" title="谐波电流(%)" />
<vxe-column field="num4" title="三相电压不平衡度(%)" />
<vxe-column field="num5" title="电压波动(%)" />
<vxe-column field="num6" title="闪变(%)" />
<vxe-column field="num7" title="间谐波电压含有率(%)" />
<vxe-column field="num8" title="流不平衡度" />
<vxe-column field="crossTheLine" title="越限情况">
<template #default="{ row }">
<el-link :type="row.crossTheLine === '越限' ? 'danger' : 'success'">
<span @click="detailClick(row)">{{ row.crossTheLine }}</span>
</el-link>
</template>
</vxe-column>
<vxe-column field="num3" title="操作">
<el-button type="primary" link>添加</el-button>
</vxe-column>
</vxe-table>
</div>
</el-card>
<el-card class="box mr10">
<div :style="heightB" style="overflow-y: auto">
<div style="display: flex; justify-content: space-between">
<span style="font-size: 16px; font-weight: 700">报告参数</span>
<el-radio-group v-model="radio2" size="small">
<el-radio-button label="统计结果" value="1" />
<el-radio-button label="原始数据" value="2" />
</el-radio-group>
</div>
</div>
</el-card>
</div>
</pane>
</splitpanes>
<!-- 时间弹框 -->
<timePopUpBox
ref="timePopUpBoxRef"
:timePopUpBox="timePopUpBox"
@close="timePopUpBox = null"
v-if="timePopUpBox"
/>
<!-- 越限详情 -->
<detail ref="detailRef" />
</div>
</template>
<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import TableStore from '@/utils/tableStore'
import PointTree from '@/components/tree/pqs/pointTree.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import MyEchart from '@/components/echarts/MyEchart.vue'
import TimePopUpBox from './components/timePopUpBox.vue'
import detail from './components/detail.vue'
defineOptions({
name: 'newEnergy/newEnergyAnalysis'
})
const timePopUpBox = ref<anyObj | null>(null)
const flag = ref('0%~10%')
const radio2 = ref('1')
const height = mainHeight(20)
const heightB = mainHeight(395)
const size = ref(0)
const TableHeaderRef = ref()
const detailRef = ref()
const dotList: any = ref({})
const power = ref([])
const timePopUpBoxRef = ref()
const index = ref([])
const powerList1: any = ref([
{
label: '0%~10%',
quantity: '20',
percentage: '10%',
crossTheLine: '越限',
value: '0%~10%'
},
{
label: '10%~20%',
quantity: '20',
percentage: '10%',
crossTheLine: '合格',
value: '10%~10%'
},
{
label: '20%~30%',
quantity: '20',
percentage: '10%',
crossTheLine: '合格',
value: '10%~30%'
},
{
label: '30%~40%',
quantity: '20',
percentage: '10%',
crossTheLine: '合格',
value: '30%~40%'
},
{
label: '40%~50%',
quantity: '20',
percentage: '10%',
crossTheLine: '合格',
value: '40%~50%'
}
])
const powerList2: any = ref([
{
label: '50%~60%',
quantity: '20',
percentage: '10%',
crossTheLine: '合格',
value: '50%~60%'
},
{
label: '60%~70%',
quantity: '20',
percentage: '10%',
crossTheLine: '合格',
value: '60%~70%'
},
{
label: '70%~80%',
quantity: '20',
percentage: '10%',
crossTheLine: '合格',
value: '70%~80%'
},
{
label: '80%~90%',
quantity: '20',
percentage: '10%',
crossTheLine: '越限',
value: '80%~90%'
},
{
label: '90%~100%',
quantity: '20',
percentage: '10%',
crossTheLine: '越限',
value: '90%~100%'
}
])
const tableData: any = ref([
{
num: '2023-08-08 09:00:00',
num1: '0',
num2: '1',
num3: '3',
num4: '2',
num5: '1',
num6: '1',
num7: '1',
num8: '0',
crossTheLine: '越限'
}
])
const options = ref({})
const tableStore = new TableStore({
url: '',
method: 'POST',
column: [],
beforeSearchFun: () => {},
loadCallback: () => {}
})
// 卡片点击变色
const handleClick = (e: string) => {
flag.value = e
}
// 点击时间
const timeClick = (row: any) => {
timePopUpBox.value = row
}
// 点击越限
const detailClick = () => {
detailRef.value.open()
}
provide('tableStore', tableStore)
onMounted(() => {
const dom = document.getElementById('navigation-splitpanes')
if (dom) {
size.value = Math.round((180 / dom.offsetHeight) * 100)
}
options.value = {
title: {
text: '占比',
left: '10px'
},
legend: {
show: false
},
tooltip: {},
xAxis: {
show: false
},
yAxis: {
show: false
},
dataZoom: { show: false },
options: {
series: [
{
type: 'pie',
center: ['50%', '50%'],
selectedOffset: 30,
label: {
show: true,
color: '#96A2B5',
lineHeight: 8,
minMargin: 10,
formatter: function (e) {
return '{name|' + e.name + '}{percent|' + e.data.percentage + '}'
},
rich: {
name: {
fontSize: 12
},
percent: {
fontSize: 14,
color: '#000',
padding: [0, 0, 0, 5]
}
}
},
data: [
...powerList1.value.map(item => {
return { value: item.quantity, name: item.label, percentage: item.percentage }
}),
...powerList2.value.map(item => {
return { value: item.quantity, name: item.label, percentage: item.percentage }
})
]
}
]
}
}
})
const handleNodeClick = (data: any, node: any) => {
dotList.value = data
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
background: #eaeef1;
}
.cardBox {
.el-card__body {
padding: 5px 10px 10px;
}
}
.box {
.el-card__body {
padding: 10px;
}
}
.container {
display: grid;
grid-template-columns: 5fr 2.5fr;
gap: 20px;
.card-top {
background-color: var(--el-color-primary-light-9);
// color: #fff;
.el-card__body {
display: grid; /* 使用 Grid 布局 */
grid-template-columns: repeat(5, 1fr); /* 每行5列，每列占1份空间 */
text-align: center;
gap: 20px;
padding: 10px;
.img {
vertical-align: middle;
height: 16px;
}
}
}
.echart {
.el-card__body {
padding: 5px;
}
}
}
.el-card {
border-radius: 10px;
}
.hoverBox {
background-color: var(--el-color-primary-light-5);
border-radius: 10px;
}
</style>