zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 添加cems导出界面

This commit is contained in:
caoqianming 2024-02-01 09:32:28 +08:00
parent 24876dcf38
commit 1873f17e4c
2 changed files with 141 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
src/views/bigScreen/enpComponents/cemsExport.vue Normal file
View File

@ -0,0 +1,136 @@
<template>
<el-card header="CEMS报表导出">
<el-date-picker size="large" v-model="query.time" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
placeholder="时间选择" style=" width: 400px" />
<el-select size="large" v-model="query.type" placeholder="周期" style="margin-left:4px">
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-button size="large" type="primary" @click="exportExcel" style="margin-left: 4px"
v-loading="eLoading">导出报表</el-button>
</el-card>
<!-- <div class="exportContainer">
<div class="ecard">
<div>
<el-icon :size="80" color="#536DFE">
<Grid />
</el-icon>
</div>
<el-date-picker style="width: 90%"></el-date-picker>
<div style="height: 6px;"></div>
<p class="ecard_title">小时报表</p>
<div style="height: 6px;"></div>
<el-button type="primary" v-loading="eLoading" @click="exportXlsx('hour')">导出</el-button>
</div>
<div class="ecard">
<div>
<el-icon :size="80" color="#536DFE">
<Grid />
</el-icon>
</div>
<el-date-picker style="width: 90%"></el-date-picker>
<div style="height: 6px;"></div>
<p class="ecard_title">日报表</p>
<div style="height: 6px;"></div>
<el-button type="primary" v-loading="eLoading" @click="exportXlsx('day')">导出</el-button>
</div>
<div class="ecard">
<div>
<el-icon :size="80" color="#536DFE">
<Grid />
</el-icon>
</div>
<el-date-picker style="width: 90%"></el-date-picker>
<div style="height: 6px;"></div>
<p class="ecard_title">周报表</p>
<div style="height: 6px;"></div>
<el-button type="primary" v-loading="eLoading">导出</el-button>
</div>
<div class="ecard">
<div>
<el-icon :size="80" color="#536DFE">
<Grid />
</el-icon>
</div>
<el-date-picker style="width: 90%"></el-date-picker>
<div style="height: 6px;"></div>
<p class="ecard_title">月报表</p>
<div style="height: 6px;"></div>
<el-button type="primary" v-loading="eLoading">导出</el-button>
</div>
<div class="ecard">
<div>
<el-icon :size="80" color="#536DFE">
<Grid />
</el-icon>
</div>
<el-date-picker style="width: 90%"></el-date-picker>
<div style="height: 6px;"></div>
<p class="ecard_title">季度报表</p>
<div style="height: 6px;"></div>
<el-button type="primary" v-loading="eLoading">导出</el-button>
</div>
<div class="ecard">
<div>
<el-icon :size="80" color="#536DFE">
<Grid />
</el-icon>
</div>
<el-date-picker style="width: 90%"></el-date-picker>
<div style="height: 6px;"></div>
<p class="ecard_title">年报表</p>
<div style="height: 6px;"></div>
<el-button type="primary" v-loading="eLoading">导出</el-button>
</div>
</div> -->
</template>
<script>
export default {
data() {
return {
query: { time: '', type: 'hour' },
eLoading: false,
typeOptions: [
{ label: '小时', value: 'hour' },
{ label: '日', value: 'day' },
{ label: '周', value: 'week' },
{ label: '月', value: 'month' },
{ label: '季度', value: 'season' },
{ label: '年', value: 'year' },
]
}
},
mounted() {
this.initTime()
},
methods: {
initTime() {
let date = new Date()
this.query.time = this.$TOOL.dateFormat(date)
},
exportExcel() {
this.eLoading = true;
console.log(this.query)
this.eLoading = false;
}
},
}
</script>
<style scoped>
.exportContainer {
display: grid;
grid-template-columns: repeat(auto-fill, 210px);
grid-template-rows: repeat(3, 210px);
column-gap: 10px;
row-gap: 10px;
}
.ecard {
background-color: white;
border-radius: 4%;
text-align: center;
}
.ecard_title {
font-size: 22px
}
</style>

7
src/views/bigScreen/index_enp_blue.vue
View File

@ -22,7 +22,7 @@
<el-dropdown-item command="paikou">排放口清单</el-dropdown-item>
<el-dropdown-item command="cems">CEMS监测清单</el-dropdown-item>
<el-dropdown-item command="cems2">CEMS监测预警</el-dropdown-item>
<el-dropdown-item>CEMS报表导出</el-dropdown-item>
<el-dropdown-item command="cemsExport">CEMS报表导出</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
@ -284,6 +284,7 @@
<org-dialog v-if="activeDrawerName == 'paikou'" @close="closeDialog"></org-dialog>
<cems-drawer v-else-if="activeDrawerName == 'cems'" @close="closeDialog"></cems-drawer>
<cems2-drawer v-else-if="activeDrawerName == 'cems2'" @close="closeDialog"></cems2-drawer>
<cems-export v-else-if="activeDrawerName == 'cemsExport'" @close="closeDialog"></cems-export>
</el-drawer>
</div>
</el-main>
@ -298,13 +299,15 @@ import * as BABYLON_MATERIAL from "@/utils/babylonMaterial"
import orgDialog from "./enpComponents/orgwryList"
import cemsDrawer from './enpComponents/cems.vue'
import cems2Drawer from './enpComponents/cems2.vue'
import cemsExport from './enpComponents/cemsExport.vue'
import 'babylonjs-loaders';
import 'animate.css';
export default {
components: {
orgDialog,
cemsDrawer,
cems2Drawer
cems2Drawer,
cemsExport
},
data() {
return {