|
|
@@ -1,15 +1,17 @@
|
|
|
<script setup name="prepare">
|
|
|
import searchCop from './components/search.vue'
|
|
|
import tableCop from './components/table.vue'
|
|
|
+import excelCop from '@/components/excel.vue'
|
|
|
+import treeCop from '@/components/tree.vue'
|
|
|
import barLineChartCop from './components/barLineChart.vue'
|
|
|
import { ElMessage } from 'element-plus';
|
|
|
import { onMounted, ref, onActivated } from 'vue'
|
|
|
import request from '@/api/axios.js'
|
|
|
import {baseURL, socketURL} from '@/api/axios.js'
|
|
|
/**配置参数 */
|
|
|
-const treeHeight = ref(window.innerHeight - 260 + 'px') //tree高度
|
|
|
-const excelHeight = ref(window.innerHeight - 260 + 'px') //excel高度
|
|
|
-const tableHeight = ref(window.innerHeight - 260 + 'px')
|
|
|
+const treeHeight = ref(window.innerHeight - 160 + 'px') //tree高度
|
|
|
+const excelHeight = ref(window.innerHeight - 160 + 'px') //excel高度
|
|
|
+const tableHeight = ref(window.innerHeight - 214 + 'px')
|
|
|
/**table 开始 */
|
|
|
const tableShowId = ref('')
|
|
|
const tableName = ref('风机绩效榜')
|
|
|
@@ -45,7 +47,11 @@ const funSummary = ({columns,data}) => {
|
|
|
|
|
|
return sums
|
|
|
}
|
|
|
-const funSubmit = async (params) => {
|
|
|
+const funSubmit = async () => {
|
|
|
+ if(!excelCheckIds.value.length){
|
|
|
+ ElMessage.error('请勾选要展现的项')
|
|
|
+ return false
|
|
|
+ }
|
|
|
tableLoading.value = true
|
|
|
tableData.value = []
|
|
|
tableShowId.value = ''
|
|
|
@@ -55,13 +61,8 @@ const funSubmit = async (params) => {
|
|
|
data: [],
|
|
|
}
|
|
|
lineData.value = []
|
|
|
- const res = await request.get('/fjjxb/index', { params: {
|
|
|
- station: params.station,
|
|
|
- line: params.line,
|
|
|
- project: params.project,
|
|
|
- type: params.type,
|
|
|
- st: params.st,
|
|
|
- et: params.et,
|
|
|
+ const res = await request.get('/fjjxb/five/loss/cal', { params: {
|
|
|
+ ids: excelCheckIds.value.join()
|
|
|
} })
|
|
|
if (res.code !== 200 || !res.data.title) {
|
|
|
tableLoading.value = false; return false
|
|
|
@@ -89,15 +90,15 @@ const funSubmit = async (params) => {
|
|
|
"性能损失",
|
|
|
],
|
|
|
data2 = []; //项目列表
|
|
|
- if (params.station) {
|
|
|
- let arr = [];
|
|
|
- let hj = res.data.data.pop();
|
|
|
- res.data.data.forEach((ele, index) => {
|
|
|
- arr[ele.id.split('_')[1] - 1] = ele
|
|
|
- })
|
|
|
- arr.push(hj);
|
|
|
- res.data.data = arr;
|
|
|
- }
|
|
|
+ // if (params.station) {
|
|
|
+ // let arr = [];
|
|
|
+ // let hj = res.data.data.pop();
|
|
|
+ // res.data.data.forEach((ele, index) => {
|
|
|
+ // arr[ele.id.split('_')[1] - 1] = ele
|
|
|
+ // })
|
|
|
+ // arr.push(hj);
|
|
|
+ // res.data.data = arr;
|
|
|
+ // }
|
|
|
|
|
|
res.data.data.forEach((item, index) => {
|
|
|
name.push(item.name);
|
|
|
@@ -146,6 +147,7 @@ const funSubmit = async (params) => {
|
|
|
|
|
|
tableLoading.value = false
|
|
|
tableShowId.value = '1'
|
|
|
+ activeTab.value = '2'
|
|
|
}
|
|
|
/**barlineChart 开始 */
|
|
|
const barData = ref({
|
|
|
@@ -159,42 +161,145 @@ const barColor = [
|
|
|
"#e17e23",
|
|
|
"#ba3237",
|
|
|
"#c531c7",
|
|
|
- "#ffffff",
|
|
|
+ "rgb(63,177,227)",
|
|
|
"#05bb4c",
|
|
|
]
|
|
|
|
|
|
+/**tabs */
|
|
|
+const activeTab = ref('1')
|
|
|
+/**excel 开始 */
|
|
|
+const excelCheckboxShow = ref(false)
|
|
|
+const excelType = ref('')
|
|
|
+const treeCopRef = ref() //treeCop ref
|
|
|
+const excelCheckIds = ref([])
|
|
|
+const excelList = ref([])
|
|
|
+const funExcelChange = async (obj) => { //点击excel项时
|
|
|
+ return false
|
|
|
+}
|
|
|
+const funExcelCheckChange = ({ checkArr, data }) => { //bug
|
|
|
+ excelCheckIds.value = checkArr
|
|
|
+ funSubmit()
|
|
|
+}
|
|
|
+
|
|
|
+/**prepare tree 开始 */
|
|
|
+const treeData = ref([])
|
|
|
+const actTreeNode = ref(null) //当前激活的treeNode
|
|
|
+const funRepeatMap = (arr) => {
|
|
|
+ return arr.map(o => {
|
|
|
+ if (o.children) {
|
|
|
+ const findIndex = o.children.findIndex(p => !!p.type)
|
|
|
+ if (findIndex !== -1) {
|
|
|
+ o.childs = o.children
|
|
|
+ o.children = []
|
|
|
+ if(!actTreeNode.value){ //判断当且仅有process获取tree时 赋值
|
|
|
+ actTreeNode.value = o
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ ...o,
|
|
|
+ children: o.children ? funRepeatMap(o.children) : []
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+const funGetTree = async () => {
|
|
|
+ actTreeNode.value = null
|
|
|
+ const res = await request.get("/power/prepare/tree")
|
|
|
+ treeData.value = funRepeatMap(res.data)
|
|
|
+ excelList.value = []
|
|
|
+ if(actTreeNode.value){
|
|
|
+ funCurrentChange({current: actTreeNode.value, currentNode: null})
|
|
|
+ if(treeCopRef.value){
|
|
|
+ treeCopRef.value.setCheckedKeys([actTreeNode.value.id])
|
|
|
+ excelCheckIds.value = actTreeNode.value.childs.map(o => o.id)
|
|
|
+ funSubmit()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+const funCurrentChange = ({ current, currentNode }) => {
|
|
|
+ excelCheckboxShow.value = true
|
|
|
+ if (current.childs) {
|
|
|
+ excelList.value = current.childs.map(o => {
|
|
|
+ return {
|
|
|
+ id: o.id,
|
|
|
+ interval: o.interval,
|
|
|
+ path: o.path,
|
|
|
+ prepareid: o.prepareid,
|
|
|
+ station: o.station,
|
|
|
+ time: o.time,
|
|
|
+ type: o.type,
|
|
|
+ windturbine: o.windturbine,
|
|
|
+ name: o.path.substring(o.path.indexOf(o.station + '_') + (o.station + '_').length)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ excelList.value = []
|
|
|
+ }
|
|
|
+}
|
|
|
+const funTreeCheckChange = ({ current, checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) => { //tree change -> excel change
|
|
|
+ funCurrentChange({ current, currentNode: '' })
|
|
|
+ const checkIds = []
|
|
|
+ if (checkedNodes.length) {
|
|
|
+ for (const node of checkedNodes) {
|
|
|
+ if (node.childs && node.childs.length) {
|
|
|
+ for (const child of node.childs) {
|
|
|
+ checkIds.push(child.id)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ excelCheckIds.value = checkIds
|
|
|
+ funSubmit()
|
|
|
+}
|
|
|
/**created */
|
|
|
/**mounted */
|
|
|
onMounted(() => {
|
|
|
- tableHeight.value = window.innerHeight - 260 + 'px'
|
|
|
- excelHeight.value = window.innerHeight - 260 + 'px'
|
|
|
- treeHeight.value = window.innerHeight - 260 + 'px'
|
|
|
+ tableHeight.value = window.innerHeight - 214 + 'px'
|
|
|
+ excelHeight.value = window.innerHeight - 160 + 'px'
|
|
|
+ treeHeight.value = window.innerHeight - 160 + 'px'
|
|
|
window.addEventListener('resize', () => {
|
|
|
- tableHeight.value = window.innerHeight - 260 + 'px'
|
|
|
- excelHeight.value = window.innerHeight - 260 + 'px'
|
|
|
- treeHeight.value = window.innerHeight - 260 + 'px'
|
|
|
+ tableHeight.value = window.innerHeight - 214 + 'px'
|
|
|
+ excelHeight.value = window.innerHeight - 160 + 'px'
|
|
|
+ treeHeight.value = window.innerHeight - 160 + 'px'
|
|
|
})
|
|
|
})
|
|
|
/**activated */
|
|
|
onActivated(() => {
|
|
|
+ funGetTree()
|
|
|
})
|
|
|
</script>
|
|
|
<template>
|
|
|
<div class="bg-white py-[10px] px-[10px] relative">
|
|
|
- <search-cop class="mb-[20px] shadow rounded-[6px] shadow-blue-500" @submit="funSubmit">
|
|
|
- </search-cop>
|
|
|
+ <!-- <search-cop class="mb-[20px] shadow rounded-[6px] shadow-blue-500 hidden" @submit="funSubmit">
|
|
|
+ </search-cop> -->
|
|
|
<div class="relative shadow rounded-[6px] shadow-blue-500 px-[10px] pt-[20px] pb-[10px]">
|
|
|
<div class="text-[14px] absolute top-[-7px] text-[#838383] left-[20px]">数据展示</div>
|
|
|
<el-row :gutter="10">
|
|
|
- <el-col :span="10" class="shadow rounded-[6px] shadow-blue-500">
|
|
|
- <bar-line-chart-cop v-if="lineData.length" :height="tableHeight" :bardata="barData" :lineData="lineData"
|
|
|
- :color="barColor" lineName="理论发电量"></bar-line-chart-cop>
|
|
|
- <el-empty v-else description="请选择条件"></el-empty>
|
|
|
+ <el-col :span="5">
|
|
|
+ <tree-cop ref="treeCopRef" :data="treeData" @checkChange="funTreeCheckChange" :show-checkbox="true" :height="treeHeight"
|
|
|
+ @currentChange="funCurrentChange" @refresh="funGetTree"></tree-cop>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3">
|
|
|
+ <excel-cop :checkIds="excelCheckIds" :showCheckbox="excelCheckboxShow" :data="excelList" :height="excelHeight"
|
|
|
+ @excelChange="funExcelChange" @checkChange="funExcelCheckChange"></excel-cop>
|
|
|
</el-col>
|
|
|
- <el-col :span="14">
|
|
|
- <div>
|
|
|
- <table-cop class="" :data="tableData" :showSummary="true" :summaryMethod="funSummary" :column="tableColumn" :loading="tableLoading" :height="tableHeight"
|
|
|
+ <el-col :span="16">
|
|
|
+ <div class="px-[10px] shadow rounded-[6px] shadow-blue-500 ">
|
|
|
+ <el-tabs v-model="activeTab">
|
|
|
+ <el-tab-pane label="表格数据" name="1">
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="图表展示" name="2">
|
|
|
+ </el-tab-pane>
|
|
|
+ <table-cop class="" v-show="activeTab === '1'" :data="tableData" :showSummary="true" :summaryMethod="funSummary" :column="tableColumn" :loading="tableLoading" :height="tableHeight"
|
|
|
:tableId="tableShowId" :tableName="tableName"></table-cop>
|
|
|
+ <div v-show="activeTab === '2'"
|
|
|
+ :style="{ height: typeof tableHeight === 'string' ? tableHeight : tableHeight + 'px' }"
|
|
|
+ class="p-[10px]">
|
|
|
+ <bar-line-chart-cop v-if="lineData.length" :height="tableHeight" :bardata="barData" :lineData="lineData"
|
|
|
+ :color="barColor" lineName="理论发电量"></bar-line-chart-cop>
|
|
|
+ <el-empty v-else description="请选择条件"></el-empty>
|
|
|
+ </div>
|
|
|
+ </el-tabs>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
moccus