监测点管理页面
This commit is contained in:
stt
@@ -261,4 +261,13 @@ export function getSimpleLine() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function getLineExport(data:any) {
|
||||||
|
return request({
|
||||||
|
url: '/cs-harmonic-boot/eventReport/getLineExport',
|
||||||
|
method: 'post',
|
||||||
|
data: data,
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
267
src/views/govern/reportCore/lineReport/index.vue
Normal file
267
src/views/govern/reportCore/lineReport/index.vue
Normal file
@@ -0,0 +1,267 @@
|
|||||||
|
<template>
|
||||||
|
<div class="default-main" :style="height">
|
||||||
|
<splitpanes style="height: 100%" id="navigation-splitpanes">
|
||||||
|
<pane :size="size">
|
||||||
|
<CloudDeviceEntryTree
|
||||||
|
ref="TerminalRef"
|
||||||
|
@node-click="handleNodeClick"
|
||||||
|
@init="handleNodeClick"
|
||||||
|
></CloudDeviceEntryTree>
|
||||||
|
</pane>
|
||||||
|
<pane style="background: #fff" :style="height">
|
||||||
|
<TableHeader ref="TableHeaderRef" date-picker :show-search="false">
|
||||||
|
<template v-slot:select>
|
||||||
|
<!-- <el-form-item label=" 模板策略">
|
||||||
|
<el-select v-model="value" placeholder="请选择" @change="changeFn" clearable>
|
||||||
|
<el-option
|
||||||
|
v-for="item in templatePolicy"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item> -->
|
||||||
|
</template>
|
||||||
|
<template #operation>
|
||||||
|
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">生成报告</el-button>
|
||||||
|
</template>
|
||||||
|
</TableHeader>
|
||||||
|
<div class="box" :style="`height: calc(${tableStore.table.height} + 65px)`">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" class="mTop">
|
||||||
|
<div class="grid-content">
|
||||||
|
<div class="divBox">监测点详情</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="mTop">
|
||||||
|
<el-checkbox v-model="formd.xq">监测点详情</el-checkbox>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider></el-divider>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" class="mTop">
|
||||||
|
<div class="grid-content">
|
||||||
|
<div class="divBox">暂降事件列表</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="mTop">
|
||||||
|
<el-checkbox v-model="formd.lb">表格</el-checkbox>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider></el-divider>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" class="mTop">
|
||||||
|
<div class="grid-content">
|
||||||
|
<div class="divBox">暂降密度</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="mTop">
|
||||||
|
<el-checkbox v-model="formd.mdbg">表格</el-checkbox>
|
||||||
|
<el-checkbox v-model="formd.mdtx">图形</el-checkbox>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider></el-divider>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" class="mTop">
|
||||||
|
<div class="grid-content">
|
||||||
|
<div class="divBox">暂降事件点</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="mTop">
|
||||||
|
<el-checkbox v-model="formd.sjdITIC">ITIC</el-checkbox>
|
||||||
|
<el-checkbox v-model="formd.sjdF47">F47</el-checkbox>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider></el-divider>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" class="mTop">
|
||||||
|
<div class="grid-content">
|
||||||
|
<div class="divBox">概率分布</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="mTop">
|
||||||
|
<el-checkbox v-model="formd.glfbfz">暂降幅值</el-checkbox>
|
||||||
|
<el-checkbox v-model="formd.glfbsj">持续时间</el-checkbox>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider></el-divider>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" class="mTop">
|
||||||
|
<div class="grid-content">
|
||||||
|
<div class="divBox">月份统计</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="mTop">
|
||||||
|
<el-checkbox v-model="formd.tjbg">表格</el-checkbox>
|
||||||
|
<el-checkbox v-model="formd.tjtx">图形</el-checkbox>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider></el-divider>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" class="mTop">
|
||||||
|
<div class="grid-content">
|
||||||
|
<div class="divBox">暂降原因</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="mTop">
|
||||||
|
<el-checkbox v-model="formd.yybg">表格</el-checkbox>
|
||||||
|
<el-checkbox v-model="formd.yytx">图形</el-checkbox>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider></el-divider>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12" class="mTop">
|
||||||
|
<div class="grid-content">
|
||||||
|
<div class="divBox">暂降类型</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="mTop">
|
||||||
|
<el-checkbox v-model="formd.lxbg">表格</el-checkbox>
|
||||||
|
<el-checkbox v-model="formd.lxtx">图形</el-checkbox>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-divider></el-divider>
|
||||||
|
</div>
|
||||||
|
</pane>
|
||||||
|
</splitpanes>
|
||||||
|
</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 pointTreeWx from '@/components/tree/govern/pointTreeWx.vue'
|
||||||
|
import { genFileId, ElMessage, ElNotification } from 'element-plus'
|
||||||
|
import type { UploadProps, UploadUserFile } from 'element-plus'
|
||||||
|
import CloudDeviceEntryTree from '@/components/tree/govern/cloudDeviceEntryTree.vue'
|
||||||
|
import { getLineExport } from '@/api/harmonic-boot/cockpit/cockpit'
|
||||||
|
defineOptions({
|
||||||
|
name: 'TransientReport/monitoringpointReport'
|
||||||
|
})
|
||||||
|
const height = mainHeight(20)
|
||||||
|
const size = ref(0)
|
||||||
|
const dictData = useDictData()
|
||||||
|
const TableHeaderRef = ref()
|
||||||
|
const dotList: any = ref({})
|
||||||
|
const Template: any = ref({})
|
||||||
|
const uploadList: any = ref([])
|
||||||
|
|
||||||
|
const formd: any = ref({
|
||||||
|
xq: true,
|
||||||
|
lb: true,
|
||||||
|
mdbg: false,
|
||||||
|
mdtx: false,
|
||||||
|
sjdITIC: false,
|
||||||
|
sjdF47: false,
|
||||||
|
glfbfz: false,
|
||||||
|
glfbsj: false,
|
||||||
|
tjbg: false,
|
||||||
|
tjtx: false,
|
||||||
|
yybg: false,
|
||||||
|
yytx: false,
|
||||||
|
lxbg: false,
|
||||||
|
lxtx: false,
|
||||||
|
type: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
const tableStore = new TableStore({
|
||||||
|
url: '',
|
||||||
|
method: 'POST',
|
||||||
|
column: [],
|
||||||
|
beforeSearchFun: () => {},
|
||||||
|
loadCallback: () => {}
|
||||||
|
})
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
const dom = document.getElementById('navigation-splitpanes')
|
||||||
|
|
||||||
|
if (dom) {
|
||||||
|
size.value = Math.round((180 / dom.offsetHeight) * 100)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const handleNodeClick = (data: any, node: any) => {
|
||||||
|
dotList.value = data
|
||||||
|
}
|
||||||
|
// 上传
|
||||||
|
const choose = (files: any) => {
|
||||||
|
const isJPG = files.raw.type === 'image/jpg'
|
||||||
|
const isJPEG = files.raw.type === 'image/jpeg'
|
||||||
|
const isPNG = files.raw.type === 'image/png'
|
||||||
|
if (!isJPG && !isPNG && !isJPEG) {
|
||||||
|
ElMessage.warning('上传文件只能是 JPG/PNG 格式!')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
uploadList.value = files
|
||||||
|
ElMessage.success('上传成功')
|
||||||
|
}
|
||||||
|
|
||||||
|
//生成报告
|
||||||
|
const exportEvent = () => {
|
||||||
|
if (dotList.value?.level != 4) {
|
||||||
|
return ElMessage.warning('请选择监测点进行报告生成!')
|
||||||
|
}
|
||||||
|
let a = ''
|
||||||
|
|
||||||
|
// formd.value.lineId = monitoringPoint.state.lineId
|
||||||
|
// formd.value.lineName = monitoringPoint.state.lineName.split('>').at(-1)
|
||||||
|
formd.value.lineId = dotList.value.id
|
||||||
|
formd.value.lineName = dotList.value.name
|
||||||
|
formd.value.searchBeginTime = TableHeaderRef.value.datePickerRef.timeValue[0]
|
||||||
|
formd.value.searchEndTime = TableHeaderRef.value.datePickerRef.timeValue[1]
|
||||||
|
formd.value.flag = TableHeaderRef.value.datePickerRef.interval
|
||||||
|
ElMessage('生成报告中,请稍等!')
|
||||||
|
getLineExport(formd.value).then((res: any) => {
|
||||||
|
let blob = new Blob([res], {
|
||||||
|
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8'
|
||||||
|
})
|
||||||
|
// createObjectURL(blob); //创建下载的链接
|
||||||
|
const url = window.URL.createObjectURL(blob)
|
||||||
|
const link = document.createElement('a') // 创建a标签
|
||||||
|
link.href = url
|
||||||
|
link.download = '监测点报告' // 设置下载的文件名
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click() //执行下载
|
||||||
|
document.body.removeChild(link)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.splitpanes.default-theme .splitpanes__pane {
|
||||||
|
background: #eaeef1;
|
||||||
|
}
|
||||||
|
.grid-content {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.divBox {
|
||||||
|
width: 250px;
|
||||||
|
height: 31px;
|
||||||
|
margin: auto;
|
||||||
|
line-height: 32px;
|
||||||
|
border: 1px solid #c9c9c9;
|
||||||
|
&:hover {
|
||||||
|
border: 1px solid #002255;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
padding: 10px;
|
||||||
|
// margin-top: 10px;
|
||||||
|
overflow-y: auto;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.el-divider--horizontal {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
.mTop {
|
||||||
|
margin-top: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user