联调 辽宁台账维护 页面 修改 冀北 bug
This commit is contained in:
@@ -0,0 +1,25 @@
|
||||
<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>
|
||||
320
src/views/LN/newEnergy/highAndLowPressure/index.vue
Normal file
320
src/views/LN/newEnergy/highAndLowPressure/index.vue
Normal file
@@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader datePicker area ref="header">
|
||||
<!-- <template v-slot:select>
|
||||
|
||||
</template> -->
|
||||
</TableHeader>
|
||||
<div v-loading="tableStore.table.loading">
|
||||
<el-row :gutter="10" class="pd10">
|
||||
<el-col :span="11" style="position: relative">
|
||||
<el-card>
|
||||
<el-radio-group v-model="tableStore.table.params.radio" class="group">
|
||||
<el-radio-button label="风电场" value="1" />
|
||||
<el-radio-button label="光伏电站" value="2" />
|
||||
</el-radio-group>
|
||||
<MyEchartMap
|
||||
ref="EchartMap"
|
||||
:options="echartMapList"
|
||||
class="map"
|
||||
@eliminate="eliminate"
|
||||
@getRegionByRegion="getRegionByRegion"
|
||||
@clickMap="clickMap"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="13">
|
||||
<el-card>
|
||||
<div class="tall">
|
||||
<h3 class="mb10">暂降列表</h3>
|
||||
<vxe-table height="auto" auto-resize :data="distributionData" v-bind="defaultAttribute">
|
||||
<vxe-column field="qy" title="风电场 " show-overflow-tooltip></vxe-column>
|
||||
<vxe-column field="jcd" title="暂降发生时刻"></vxe-column>
|
||||
<vxe-column field="zc" title="暂降(骤升)幅值(%)" sortable></vxe-column>
|
||||
<vxe-column field="zc" title="暂降原因" sortable></vxe-column>
|
||||
<vxe-column field="zc" title="严重度" sortable></vxe-column>
|
||||
<vxe-column title="操作" >
|
||||
<template #default="{ row }">
|
||||
<el-button type="text" size="small" link>查看波形</el-button>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="mt10">
|
||||
<div class="tall">
|
||||
<h3 class="mb10">暂降波形</h3>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
defineOptions({
|
||||
name: 'newEnergy/highAndLowPressure'
|
||||
})
|
||||
const EchartMap = ref()
|
||||
const dictData = useDictData()
|
||||
const options = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||
const echartMapList: any = ref({})
|
||||
const titleA = ref('')
|
||||
const header = ref()
|
||||
const distributionData: any = ref([])
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '/event-boot/area/getAreaLineDetail',
|
||||
method: 'POST',
|
||||
column: [],
|
||||
loadCallback: () => {
|
||||
titleA.value = tableStore.table.params.statisticalType.name
|
||||
header.value.areaRef.change()
|
||||
// 处理地图数据
|
||||
map(tableStore.table.data)
|
||||
tabulation(tableStore.table.data)
|
||||
EchartMap.value.GetEchar(header.value.areaRef.areaName)
|
||||
}
|
||||
})
|
||||
provide('tableStore', tableStore)
|
||||
tableStore.table.params.radio = '1'
|
||||
// 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 getRegionByRegion = (list: any) => {
|
||||
tableStore.table.params.deptIndex = list.id
|
||||
tableStore.onTableAction('search', {})
|
||||
}
|
||||
// 消除点
|
||||
const eliminate = (name: string) => {
|
||||
echartMapList.value.options.series = []
|
||||
EchartMap.value.GetEchar(name)
|
||||
}
|
||||
|
||||
// 地图数处理
|
||||
const map = (res: any) => {
|
||||
echartMapList.value = {
|
||||
title: {
|
||||
text: '高/低电压穿越'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params) {
|
||||
if (params.seriesType == 'bar3D') {
|
||||
return [params.seriesName, params.name + '：' + params.value[2] + (params.value[3] || '')].join(
|
||||
'<br />'
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
legend: {
|
||||
selectedMode: false
|
||||
},
|
||||
geo3D: {
|
||||
show: true,
|
||||
name: '浙江',
|
||||
itemStyle: {
|
||||
color: getComputedStyle(document.documentElement).getPropertyValue('--el-color-primary-light-3'),
|
||||
borderWidth: 1,
|
||||
borderColor: '#fff'
|
||||
},
|
||||
emphasis: {
|
||||
label: { show: true, fontSize: 16 },
|
||||
itemStyle: {
|
||||
color: getComputedStyle(document.documentElement).getPropertyValue('--el-color-primary-light-7')
|
||||
}
|
||||
},
|
||||
viewControl: {
|
||||
alpha: 60,
|
||||
distance: 120
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
|
||||
backgroundColor: '#fff'
|
||||
}
|
||||
},
|
||||
|
||||
data: [
|
||||
{ name: '目标数', field: 'mbs', unit: '万人' },
|
||||
{ name: '完成数', field: 'wcs', unit: '万人' }
|
||||
]
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
name: '低压',
|
||||
type: 'bar3D',
|
||||
coordinateSystem: 'geo3D',
|
||||
shading: 'lambert',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: params => {
|
||||
return params.value[2] || ''
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
adcode: 330100,
|
||||
name: '沈阳',
|
||||
wcs: 10,
|
||||
mbs: 50,
|
||||
wcl: 100,
|
||||
value: [123.364125, 41.722823, 50, '']
|
||||
},
|
||||
{
|
||||
adcode: 330200,
|
||||
name: '葫芦岛',
|
||||
wcs: 10,
|
||||
mbs: 20,
|
||||
wcl: 80,
|
||||
value: [120.80488, 40.816372, 20, '']
|
||||
},
|
||||
{
|
||||
adcode: 330300,
|
||||
name: '本溪',
|
||||
wcs: 10,
|
||||
mbs: 30,
|
||||
wcl: 100,
|
||||
value: [124.024811, 41.428257, 30, '']
|
||||
},
|
||||
{
|
||||
adcode: 330400,
|
||||
name: '大连',
|
||||
lng: '120.750865',
|
||||
lat: '30.662653',
|
||||
wcs: 10,
|
||||
mbs: 40,
|
||||
wcl: 100,
|
||||
value: [121.57391, 38.947468, 40, '']
|
||||
}
|
||||
],
|
||||
barSize: 1,
|
||||
minHeight: 1,
|
||||
itemStyle: {
|
||||
color: '#77DA63'
|
||||
},
|
||||
emphasis: {
|
||||
label: { show: true }
|
||||
},
|
||||
zlevel: 1
|
||||
},
|
||||
{
|
||||
name: '高压',
|
||||
type: 'bar3D',
|
||||
coordinateSystem: 'geo3D',
|
||||
shading: 'lambert',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: params => {
|
||||
return params.value[2] || ''
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
adcode: 330100,
|
||||
name: '沈阳',
|
||||
wcs: 10,
|
||||
mbs: 50,
|
||||
wcl: 100,
|
||||
value: [123.464125, 41.722823, 50, '']
|
||||
},
|
||||
{
|
||||
adcode: 330200,
|
||||
name: '葫芦岛',
|
||||
wcs: 10,
|
||||
mbs: 20,
|
||||
wcl: 80,
|
||||
value: [120.90488, 40.816372, 20, '']
|
||||
},
|
||||
{
|
||||
adcode: 330300,
|
||||
name: '本溪',
|
||||
wcs: 10,
|
||||
mbs: 30,
|
||||
wcl: 100,
|
||||
value: [124.124811, 41.428257, 30, '']
|
||||
},
|
||||
{
|
||||
adcode: 330400,
|
||||
name: '大连',
|
||||
|
||||
wcs: 10,
|
||||
mbs: 40,
|
||||
wcl: 100,
|
||||
value: [121.67391, 38.947468, 40, '']
|
||||
}
|
||||
],
|
||||
barSize: 1,
|
||||
minHeight: 1,
|
||||
itemStyle: {
|
||||
color: '#FFBF00'
|
||||
},
|
||||
emphasis: {
|
||||
label: { show: true }
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 表格数据处理
|
||||
const tabulation = (res: any) => {
|
||||
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 clickMap = (e: any) => {
|
||||
console.log('🚀 ~ clickMap ~ e:', e)
|
||||
}
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
const layout = mainHeight(83) as any
|
||||
const layout1 = mainHeight(93) as any
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.map {
|
||||
height: calc(v-bind('layout1.height') - 30px);
|
||||
}
|
||||
.tall {
|
||||
height: calc((v-bind('layout1.height') - 60px) / 2);
|
||||
}
|
||||
.group {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 20px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -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
420
src/views/LN/newEnergy/newEnergyAnalysis/index.vue
Normal 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>
|
||||
144
src/views/LN/newEnergy/newEnergyLedger/components/addForm.vue
Normal file
144
src/views/LN/newEnergy/newEnergyLedger/components/addForm.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<!-- 新增 -->
|
||||
<el-dialog draggable :title="title" v-model="userAdd" width="500px" :before-close="cancel">
|
||||
<el-form :inline="true" ref="formRef" :model="addData" label-width="auto" class="form-one" :rules="rules">
|
||||
<el-form-item label="新能源场站名称:" prop="name">
|
||||
<el-input v-model="addData.name" clearable placeholder="请输入新能源场站名称"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="干扰源类型:" prop="stationType">
|
||||
<el-select v-model="addData.stationType" clearable collapse-tags placeholder="请选择干扰源类型">
|
||||
<el-option v-for="item in newEnergy" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电压等级:" prop="scale">
|
||||
<el-select v-model="addData.scale" clearable collapse-tags placeholder="请选择干扰源类型">
|
||||
<el-option v-for="item in scaleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="额定有功功率:" prop="ratedPower">
|
||||
<el-input-number v-model="addData.ratedPower" :min="0" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="经度：" prop="longitude">
|
||||
<el-input v-model="addData.longitude" type="text" placeholder="请输入经度" />
|
||||
</el-form-item>
|
||||
<el-form-item label="纬度：" prop="latitude">
|
||||
<el-input v-model="addData.latitude" type="text" placeholder="请输入纬度" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="cancel">取消</el-button>
|
||||
<el-button type="primary" @click="config">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { editNewStation } from '@/api/device-boot/newEnergy'
|
||||
const dictData = useDictData()
|
||||
const userAdd = ref(false)
|
||||
const title = ref('')
|
||||
const newEnergy = dictData.getBasicData('new_station_type')
|
||||
const scaleList = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const emit = defineEmits(['onSubmit'])
|
||||
const rules = reactive({
|
||||
stationType: [{ required: true, message: '请选择干扰源类型', trigger: 'change' }],
|
||||
scale: [{ required: true, message: '请选择电压等级', trigger: 'change' }],
|
||||
name: [{ required: true, message: '请输入干扰源用户名称', trigger: 'blur' }],
|
||||
ratedPower: [{ required: true, message: '请输入额定功率', trigger: 'blur' }],
|
||||
longitude: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入经度',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!longitudeReg.test(value)) {
|
||||
callback(new Error('请输入有效的经度'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
latitude: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入纬度',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (!latitudeReg.test(value)) {
|
||||
callback(new Error('请输入有效的纬度'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
})
|
||||
// 经度正则表达式
|
||||
const longitudeReg = /^[-+]?((180(\.0{1,10})?)|(1[0-7][0-9](\.\d{1,10})?)|([1-9]?\d(\.\d{1,10})?)|(0(\.\d{1,10})?))$/
|
||||
// 纬度正则表达式
|
||||
const latitudeReg = /^[-+]?((90(\.0{1,10})?)|([1-8]?\d(\.\d{1,10})?)|(0(\.\d{1,10})?))$/
|
||||
|
||||
const addData = ref({
|
||||
scale: '',
|
||||
stationType: '',
|
||||
name: '',
|
||||
ratedPower: 0,
|
||||
longitude: '',
|
||||
latitude: ''
|
||||
})
|
||||
const formRef = ref()
|
||||
// 新增
|
||||
const config = () => {
|
||||
formRef.value.validate((valid: any) => {
|
||||
if (valid) {
|
||||
editNewStation(addData.value).then((res: any) => {
|
||||
ElMessage.success('新增成功!')
|
||||
emit('onSubmit')
|
||||
cancel()
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
// 重置
|
||||
const cancel = () => {
|
||||
// formRef.value.resetFields()
|
||||
userAdd.value = false
|
||||
}
|
||||
const open = (row: any) => {
|
||||
addData.value = {
|
||||
scale: '',
|
||||
stationType: '',
|
||||
name: '',
|
||||
ratedPower: 0,
|
||||
longitude: '',
|
||||
latitude: ''
|
||||
}
|
||||
title.value = row.title
|
||||
if (row.title === '修改') {
|
||||
addData.value = {
|
||||
id: row.row.id,
|
||||
scale: row.row.scale,
|
||||
stationType: row.row.stationType,
|
||||
name: row.row.name,
|
||||
ratedPower: row.row.ratedPower - 0,
|
||||
longitude: row.row.longitude,
|
||||
latitude: row.row.latitude
|
||||
}
|
||||
}
|
||||
userAdd.value = true
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
125
src/views/LN/newEnergy/newEnergyLedger/index.vue
Normal file
125
src/views/LN/newEnergy/newEnergyLedger/index.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader ref="TableHeaderRef">
|
||||
<template #select>
|
||||
<el-form-item label="新能源场站名称">
|
||||
<el-input v-model="tableStore.table.params.searchValue" clearable placeholder="输入关键字筛选" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" />
|
||||
<!--弹框-->
|
||||
<addForm ref="addFormRef" @onSubmit="tableStore.index()" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import addForm from './components/addForm.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import { delNewStation } from '@/api/device-boot/newEnergy'
|
||||
|
||||
const dictData = useDictData()
|
||||
//获取登陆用户姓名和部门
|
||||
const adminInfo = useAdminInfo()
|
||||
const newEnergy = dictData.getBasicData('new_station_type')
|
||||
const scaleList = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const tableRef = ref()
|
||||
const TableHeaderRef = ref()
|
||||
const addFormRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/newStation/queryPage',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{
|
||||
title: '序号',
|
||||
type: 'seq',
|
||||
align: 'center',
|
||||
width: 60,
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ field: 'name', title: '新能源场站名称' },
|
||||
{
|
||||
field: 'stationType',
|
||||
title: '新能源场站类型',
|
||||
|
||||
formatter: (row: any) => newEnergy.filter(item => item.id == row.cellValue)[0]?.name
|
||||
},
|
||||
{
|
||||
field: 'scale',
|
||||
title: '电压等级',
|
||||
|
||||
formatter: (row: any) => scaleList.filter(item => item.id == row.cellValue)[0]?.name
|
||||
},
|
||||
{ field: 'ratedPower', title: '额定有功功率' },
|
||||
{ field: 'longitude', title: '经度' },
|
||||
{ field: 'latitude', title: '维度' },
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
render: 'buttons',
|
||||
fixed: 'right',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '修改',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-edit',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
addFormRef.value.open({
|
||||
title: '修改',
|
||||
row: row
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'delete',
|
||||
title: '删除',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-Delete',
|
||||
render: 'confirmButton',
|
||||
popconfirm: {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
confirmButtonType: 'danger',
|
||||
title: '确定删除该数据吗？'
|
||||
},
|
||||
click: row => {
|
||||
delNewStation({ ids: row.id }).then(() => {
|
||||
ElMessage.success('删除成功')
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.currentPage = tableStore.table.params.pageNum
|
||||
},
|
||||
loadCallback: () => {}
|
||||
})
|
||||
tableStore.table.params.searchValue = ''
|
||||
const add = () => {
|
||||
addFormRef.value.open({
|
||||
title: '新增'
|
||||
})
|
||||
}
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
Reference in New Issue
Block a user