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

25
src/views/LN/newEnergy/highAndLowPressure/components/waveform.vue Normal file
View File

@@ -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
View 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>