songguoqiang
8 months ago
4 changed files with 202 additions and 3 deletions
@ -0,0 +1,187 @@ |
|||
<template> |
|||
<ContentWrap> |
|||
<!-- 能耗搜索工作栏 --> |
|||
<el-form :model="queryParams" ref="queryForm" :inline="true"> |
|||
<el-form-item label="日期" prop="dateRange"> |
|||
<el-date-picker |
|||
v-model="queryParams.dateRange" |
|||
style="width: 240px; height: 30px" |
|||
value-format="YYYY-MM-DD" |
|||
end-placeholder="结束日期" |
|||
start-placeholder="开始日期" |
|||
type="daterange" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="位置" prop="flag"> |
|||
<el-select v-model="queryParams.flag" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in flagList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" size="mini" @click="handleQuery">搜索</el-button> |
|||
<el-button size="mini" @click="resetQuery">重置</el-button> |
|||
<el-button type="success" @click="exportElecTotal" size="mini">导出</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</ContentWrap> |
|||
|
|||
<!-- 列表 --> |
|||
<ContentWrap> |
|||
<el-divider content-position="left"><div style="font-size:16px; float: left"><b>{{names}}</b></div></el-divider> |
|||
<el-table |
|||
v-loading="loading" :data="dataList" border="true" highlight-current-row="true" |
|||
header-row-style="height: 50px; text-align: center" :span-method="arraySpanMethod" |
|||
:row-class-name="tableRowClassName" :cell-class-name="tableCellClassName"> |
|||
<el-table-column label="" prop="name" align="right" :show-overflow-tooltip="true" width="150" /> |
|||
<el-table-column label="00:00-08:00" prop="num0008" align="center" :show-overflow-tooltip="true" /> |
|||
<el-table-column label="08:00-16:00" prop="num0816" align="center" :show-overflow-tooltip="true" /> |
|||
<el-table-column label="16:00-24:00" prop="num1624" align="center" :show-overflow-tooltip="true" /> |
|||
<el-table-column label="00:00-12:00" prop="num0012" align="center" :show-overflow-tooltip="true" /> |
|||
<el-table-column label="12:00-24:00" prop="num1224" align="center" :show-overflow-tooltip="true" /> |
|||
<el-table-column label="总(00:00-24:00)" prop="num0024" align="center" :show-overflow-tooltip="true" /> |
|||
</el-table> |
|||
</ContentWrap> |
|||
|
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import * as TjanalysisApi from '@/api/tjanalysis' |
|||
import { formatDate } from '@/utils/formatTime' |
|||
import * as DictApi from '@/utils/dict' |
|||
|
|||
defineOptions({ name: 'energyconsumption' }) |
|||
|
|||
const message = useMessage() // 消息弹窗 |
|||
const { t } = useI18n() // 国际化 |
|||
|
|||
const route = useRoute() // 路由信息 |
|||
const routeName = ref() |
|||
routeName.value = route.name |
|||
const loading = ref(true) |
|||
const dataList = ref([]) |
|||
const names = ref(''); |
|||
const queryParams = reactive({ |
|||
dateRange: [], |
|||
flag: '1' |
|||
}) |
|||
|
|||
const flagList =ref([]) |
|||
const handleQuery = async () => { |
|||
const ll = flagList.value.find(map=>map.value == queryParams.flag); |
|||
names.value = ll?.label |
|||
dataList.value = []; |
|||
getList() |
|||
} |
|||
|
|||
const resetQuery = async () => { |
|||
let today = new Date(); |
|||
|
|||
// 计算昨天的日期 |
|||
today.setDate(today.getDate() - 1); |
|||
|
|||
// 格式化日期为 "yyyy-MM-dd" |
|||
let year = today.getFullYear(); |
|||
let month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从0开始,所以需要+1,并确保是两位数 |
|||
let date = String(today.getDate()).padStart(2, '0'); // 确保日期是两位数 |
|||
|
|||
let yesterdayAsString = `${year}-${month}-${date}`; |
|||
|
|||
console.log(yesterdayAsString); |
|||
|
|||
|
|||
queryParams.dateRange=[yesterdayAsString,yesterdayAsString] |
|||
getList() |
|||
} |
|||
|
|||
const getList = async () => { |
|||
const res = await TjanalysisApi.queryEnergyConsumption(queryParams) |
|||
dataList.value = res.dataList |
|||
loading.value = false |
|||
} |
|||
|
|||
function arraySpanMethod ({ row, column, rowIndex, columnIndex }) { |
|||
if (rowIndex == 6) { |
|||
if (columnIndex == 0) { |
|||
return { |
|||
rowspan: 1, |
|||
colspan: 10 |
|||
} |
|||
} else if (columnIndex == 10) { |
|||
return { |
|||
rowspan: 1, |
|||
colspan: 2 |
|||
} |
|||
} else { |
|||
return { |
|||
rowspan: 0, |
|||
colspan: 0 |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
function tableRowClassName({row, rowIndex}) { |
|||
if (rowIndex === 7) { |
|||
return 'success-row' |
|||
} |
|||
return '' |
|||
} |
|||
|
|||
function tableCellClassName({row, column, rowIndex, columnIndex}) { |
|||
if (columnIndex == 0) { |
|||
return 'success-cols' |
|||
} |
|||
} |
|||
|
|||
const exportElecTotal = async () => { |
|||
const res = await TjanalysisApi.exportHrpuncherDay(queryParams) |
|||
if (res != null) { |
|||
let url = window.URL.createObjectURL(new Blob([res])); |
|||
let link = document.createElement("a"); |
|||
link.style.display = "none"; |
|||
link.href = url; |
|||
link.setAttribute("download", "热轧穿孔机日统计.xlsx"); |
|||
document.body.appendChild(link); |
|||
link.click(); |
|||
} |
|||
} |
|||
|
|||
/** 初始化 **/ |
|||
onMounted(async () => { |
|||
// 获取当前日期 |
|||
let today = new Date(); |
|||
// 计算昨天的日期 |
|||
today.setDate(today.getDate() - 1); |
|||
// 格式化日期为 "yyyy-MM-dd" |
|||
let year = today.getFullYear(); |
|||
let month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从0开始,所以需要+1,并确保是两位数 |
|||
let date = String(today.getDate()).padStart(2, '0'); // 确保日期是两位数 |
|||
let yesterdayAsString = `${year}-${month}-${date}`; |
|||
console.log(yesterdayAsString); |
|||
queryParams.dateRange=[yesterdayAsString,yesterdayAsString] |
|||
const res =await DictApi.getStrDictOptions(DICT_TYPE.ENERGY_CONSUMPTION_TYPE); |
|||
if (res != null && res.length>0) { |
|||
flagList.value = res |
|||
queryParams.flag= flagList.value[0].value; |
|||
const ll = flagList.value.find(map=>map.value == queryParams.flag); |
|||
names.value = ll?.label |
|||
} |
|||
getList() |
|||
}) |
|||
|
|||
</script> |
|||
|
|||
<style> |
|||
.el-table .success-row { |
|||
background: #f0f9eb; |
|||
} |
|||
|
|||
.el-table .success-cols { |
|||
font-weight: bold; |
|||
} |
|||
</style> |
|||
|
Loading…
Reference in new issue