| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <el-form |
| | | class="responsive-form" |
| | | :model="queryParams" |
| | | ref="queryRef" |
| | | :inline="true" |
| | | v-show="showSearch" |
| | | label-width="68px" |
| | | > |
| | | <el-row type="flex" justify="left"> |
| | | <el-form-item label="ç»è®¡æ¹å¼"> |
| | | <el-select |
| | | v-model="queryParams.type" |
| | | style="width: 200px" |
| | | placeholder="Select" |
| | | @change="handleChangeSelectType" |
| | | > |
| | | <el-option |
| | | v-for="item in options" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="éæ©åºé´"> |
| | | <div v-if="!dayCom"> |
| | | <el-date-picker |
| | | v-model="queryParams.monthRange" |
| | | type="monthrange" |
| | | range-separator="To" |
| | | start-placeholder="éæ©å¼å§æä»½" |
| | | end-placeholder="éæ©ç»ææä»½" |
| | | /> |
| | | </div> |
| | | <div v-else> |
| | | <el-date-picker |
| | | v-model="value2" |
| | | type="month" |
| | | placeholder="éæ©æä»½" |
| | | /> |
| | | </div> |
| | | </el-form-item> |
| | | |
| | | <el-form-item class="column-with-margin"> |
| | | <el-button type="primary" icon="Search" @click="handleQuery" |
| | | >æ¥è¯¢</el-button |
| | | > |
| | | <el-button icon="Refresh" @click="resetQuery">éç½®</el-button> |
| | | </el-form-item> |
| | | </el-row> |
| | | </el-form> |
| | | <el-row :gutter="10" class="mb8"> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | |
| | | icon="Download" |
| | | @click="handleExport" |
| | | v-hasPermi="['apsPartRouteStat:export']" |
| | | >导åº</el-button> |
| | | >导åº</el-button |
| | | > |
| | | </el-col> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | |
| | | icon="Refresh" |
| | | @click="handleRefresh" |
| | | v-hasPermi="['apsPartRouteStat:edit']" |
| | | >æ´æ°</el-button> |
| | | >æ´æ°</el-button |
| | | > |
| | | </el-col> |
| | | <right-toolbar @queryTable="getList" :search="false"></right-toolbar> |
| | | </el-row> |
| | | <vxe-grid ref="gridRef" v-bind="gridOptions" :loading="loading"></vxe-grid> |
| | | <div class="box_container"> |
| | | <div class="title_text">管路è§å产è½è´è½½ç»è®¡</div> |
| | | <div class="tabel_container"> |
| | | <vxe-grid |
| | | ref="gridRef" |
| | | v-bind="gridOptions" |
| | | :loading="loading" |
| | | ></vxe-grid> |
| | | </div> |
| | | </div> |
| | | <div class="box_container"> |
| | | <div class="title_text">æ°æè§å产è½è´è½½ç»è®¡</div> |
| | | <div class="tabel_container"> |
| | | <vxe-grid |
| | | ref="gridRef2" |
| | | v-bind="gridOptions" |
| | | :loading="loading" |
| | | ></vxe-grid> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup name="apsPartRouteStat"> |
| | | import { query,updateStat } from "@/api/mainPlan/partRouteStat.js"; |
| | | <script setup name="gasProduceStatics"> |
| | | import { |
| | | listUpdateGasProduceStatics, |
| | | listGasProduceStatics, |
| | | } from "@/api/mainPlan/gasProduceStatics.js"; |
| | | import { ref } from "vue"; |
| | | import * as XLSX from 'xlsx'; |
| | | import * as XLSX from "xlsx"; |
| | | |
| | | const { proxy } = getCurrentInstance(); |
| | | |
| | | const loading = ref(true); |
| | | const gridRef = ref(); |
| | | const height = ref(document.documentElement.clientHeight - 130 + "px;") |
| | | const gridRef2 = ref(); |
| | | const height = ref(document.documentElement.clientHeight - 130 + "px;"); |
| | | const headers = ref([]); |
| | | const exportData = ref([]); |
| | | |
| | | const showSearch = ref(true); |
| | | const data = reactive({ |
| | | queryParams: { |
| | | monthRange: "", |
| | | type: "ææç»è®¡", |
| | | }, |
| | | }); |
| | | const options = [ |
| | | { |
| | | value: "month", |
| | | label: "ææç»è®¡", |
| | | }, |
| | | { |
| | | value: "day", |
| | | label: "ææ¥ç»è®¡", |
| | | }, |
| | | ]; |
| | | const { queryParams } = toRefs(data); |
| | | const gridOptions = reactive({ |
| | | border: true, |
| | | stripe: true, |
| | |
| | | showFooterOverflow: true, |
| | | height: height, |
| | | columnConfig: { |
| | | resizable: true |
| | | resizable: true, |
| | | }, |
| | | scrollX: { |
| | | enabled: true, |
| | | gt: 0, |
| | | threshold: 50 |
| | | threshold: 50, |
| | | }, |
| | | scrollY: { |
| | | enabled: true, |
| | | gt: 0, |
| | | threshold: 50 |
| | | } |
| | | threshold: 50, |
| | | }, |
| | | }); |
| | | |
| | | let tableColumn = [] |
| | | let tableData = [] |
| | | const dayCom = ref(false); |
| | | let tableColumn = []; |
| | | let tableData = []; |
| | | let merges = []; |
| | | |
| | | function handleChangeSelectType(e) { |
| | | console.log(e, "sjcsuhcushc"); |
| | | if (e === "day") { |
| | | dayCom.value = true; |
| | | } else { |
| | | dayCom.value = false; |
| | | } |
| | | } |
| | | /** æ¥è¯¢é¶ä»¶ç»è®¡è¡¨å表 */ |
| | | function getList() { |
| | | let rowKey = 0 |
| | | let colKey = 0 |
| | | headers.value = [] |
| | | exportData.value = [] |
| | | tableColumn = [] |
| | | tableData = [] |
| | | let rowKey = 0; |
| | | let colKey = 0; |
| | | headers.value = []; |
| | | exportData.value = []; |
| | | tableColumn = []; |
| | | tableData = []; |
| | | loading.value = true; |
| | | query().then(response => { |
| | | const colList = [] |
| | | let headersOne = [] |
| | | let headersTwo = [] |
| | | if(response.code == '200'){ |
| | | listGasProduceStatics().then((response) => { |
| | | const colList = []; |
| | | let headersOne = []; |
| | | let headersTwo = []; |
| | | if (response.code == "200") { |
| | | if (!response.planTitle) { |
| | | loading.value = false; |
| | | return; |
| | | } |
| | | headersOne.push('æ¥æ'); |
| | | headersTwo.push('èµæºç»'); |
| | | headersOne.push("æ¥æ"); |
| | | headersTwo.push("èµæºç»"); |
| | | colList.push({ |
| | | field: 'dateCol', |
| | | title: 'æ¥æ', |
| | | fixed: 'left', |
| | | field: "dateCol", |
| | | title: "æ¥æ", |
| | | fixed: "left", |
| | | children: [ |
| | | { field: `resourceName`, title: 'èµæºç»', width: 250, type: 'html'}, |
| | | { field: `resourceName`, title: "èµæºç»", width: 250, type: "html" }, |
| | | ], |
| | | width: 160 |
| | | }) |
| | | response.planTitle.forEach(item => { |
| | | width: 160, |
| | | }); |
| | | response.planTitle.forEach((item) => { |
| | | headersOne.push(item); |
| | | headersOne.push(''); |
| | | headersOne.push(''); |
| | | headersTwo.push('设计工æ¶'); |
| | | headersTwo.push('鿱工æ¶'); |
| | | headersTwo.push('产è½è´è·'); |
| | | colKey++ |
| | | headersOne.push(""); |
| | | headersOne.push(""); |
| | | headersTwo.push("设计工æ¶"); |
| | | headersTwo.push("鿱工æ¶"); |
| | | headersTwo.push("产è½è´è·"); |
| | | colKey++; |
| | | colList.push({ |
| | | field: `dateColTime${colKey}`, |
| | | title: item, |
| | | children: [ |
| | | { field: `designTimes${colKey}`, title: '设计工æ¶', width: 80}, |
| | | { field: `requireTimes${colKey}`, title: '鿱工æ¶', width: 80}, |
| | | { field: `capacityLoad${colKey}`, title: '产è½è´è·', width: 80, type: 'html'}, |
| | | { field: `designTimes${colKey}`, title: "设计工æ¶", width: 80 }, |
| | | { field: `requireTimes${colKey}`, title: "鿱工æ¶", width: 80 }, |
| | | { |
| | | field: `capacityLoad${colKey}`, |
| | | title: "产è½è´è·", |
| | | width: 80, |
| | | type: "html", |
| | | }, |
| | | ], |
| | | width: 160 |
| | | }) |
| | | width: 160, |
| | | }); |
| | | }); |
| | | |
| | | headers.value.push(headersOne); |
| | | headers.value.push(headersTwo); |
| | | |
| | | const columnList = [...tableColumn, ...colList] |
| | | const dataList = [] |
| | | const columnList = [...tableColumn, ...colList]; |
| | | const dataList = []; |
| | | let startCol = 1; |
| | | |
| | | //è·åmap |
| | | response.planTable.forEach(mapItem => { |
| | | rowKey++ |
| | | response.planTable.forEach((mapItem) => { |
| | | rowKey++; |
| | | let lastCol = startCol + 2; |
| | | merges.push({ s: { r: 0, c: startCol }, e: { r: 0, c: lastCol} }); |
| | | startCol = lastCol + 1; |
| | | let data = []; |
| | | const item = { |
| | | id: `${rowKey}` |
| | | } |
| | | id: `${rowKey}`, |
| | | }; |
| | | for (const [key, listValue] of Object.entries(mapItem)) { |
| | | data.push(key); |
| | | |
| | | let tableKey = 0; |
| | | let flag = false; |
| | | listValue.forEach(listItem => { |
| | | |
| | | tableKey++ |
| | | listValue.forEach((listItem) => { |
| | | tableKey++; |
| | | item[`designTimes${tableKey}`] = listItem.designTimes; |
| | | item[`requireTimes${tableKey}`] = listItem.requireTimes; |
| | | item[`capacityLoad${tableKey}`] = listItem.capacityLoad > 100 ? `<font color="red">${listItem.capacityLoad}%</font>` :listItem.capacityLoad+'%'; |
| | | item[`capacityLoad${tableKey}`] = |
| | | listItem.capacityLoad > 100 |
| | | ? `<font color="red">${listItem.capacityLoad}%</font>` |
| | | : listItem.capacityLoad + "%"; |
| | | data.push(listItem.designTimes); |
| | | data.push(listItem.requireTimes); |
| | | data.push(listItem.capacityLoad+'%'); |
| | | data.push(listItem.capacityLoad + "%"); |
| | | if (listItem.capacityLoad > 100) { |
| | | flag = true; |
| | | } |
| | | }); |
| | | |
| | | item[`resourceName`] = flag ? `<div class='el-badge'><sup class="el-badge__content is-fixed is-dot"></sup>${key}</div>` : key; |
| | | item[`resourceName`] = flag |
| | | ? `<div class='el-badge'><sup class="el-badge__content is-fixed is-dot"></sup>${key}</div>` |
| | | : key; |
| | | } |
| | | exportData.value.push(data); |
| | | dataList.push(item); |
| | | }); |
| | | |
| | | const $grid = gridRef.value |
| | | if ($grid) { |
| | | tableColumn = columnList |
| | | tableData = [...tableData, ...dataList] |
| | | $grid.loadColumn(tableColumn) |
| | | $grid.loadData(tableData) |
| | | gridOptions.loading = false |
| | | const $grid = gridRef.value; |
| | | const $grid2 = gridRef.value; |
| | | if ($grid || $grid2) { |
| | | tableColumn = columnList; |
| | | tableData = [...tableData, ...dataList]; |
| | | $grid.loadColumn(tableColumn); |
| | | $grid.loadData(tableData); |
| | | $grid2.loadColumn(tableColumn); |
| | | $grid2.loadData(tableData); |
| | | gridOptions.loading = false; |
| | | } |
| | | |
| | | loading.value = false; |
| | |
| | | |
| | | /** å¯¼åºæé®æä½ */ |
| | | function handleExport() { |
| | | |
| | | // åå¹¶è¡¨å¤´åæ°æ® |
| | | const finalData = [...headers.value, ...exportData.value]; |
| | | |
| | |
| | | { s: { r: 0, c: 0 }, e: { r: 0, c: 0 } } |
| | | ]; */ |
| | | |
| | | ws['!merges'] = merges; |
| | | ws["!merges"] = merges; |
| | | |
| | | // å建 workbook |
| | | const wb = XLSX.utils.book_new(); |
| | | // å° worksheet æ·»å å° workbook ä¸ |
| | | XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); |
| | | XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); |
| | | // å¯¼åºæä»¶ |
| | | XLSX.writeFile(wb, `apsPartRouteStat_${new Date().getTime()}.xlsx`); |
| | | |
| | | } |
| | | /** æç´¢æé®æä½ */ |
| | | function handleQuery() { |
| | | queryParams.value.pageNum = 1; |
| | | getList(); |
| | | } |
| | | |
| | | /** éç½®æé®æä½ */ |
| | | function resetQuery() { |
| | | proxy.resetForm("queryRef"); |
| | | handleQuery(); |
| | | } |
| | | /** å·æ°æé®æä½ */ |
| | | function handleRefresh(){ |
| | | updateStat().then(response => { |
| | | if(response.code == '200'){ |
| | | updateStat().then((response) => { |
| | | if (response.code == "200") { |
| | | getList(); |
| | | } |
| | | }); |
| | |
| | | |
| | | getList(); |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .box_container { |
| | | width: 100%; |
| | | margin: 20px auto; |
| | | background: #fff; |
| | | border-radius: 5px; |
| | | box-shadow: 1px 1px 1px 4px#f1f1f1; |
| | | .title_text { |
| | | padding-top: 20px; |
| | | margin-left: 20px; |
| | | } |
| | | .tabel_container { |
| | | width: 98%; |
| | | margin: 20px auto; |
| | | } |
| | | } |
| | | </style> |