|
|
|
@ -9,23 +9,51 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="contant"> |
|
|
|
<a-card class="chartsPart"> |
|
|
|
<a-card class="chartsPart" v-if="showPart"> |
|
|
|
<div class="chart" ref="chartRef"></div> |
|
|
|
<div class="contrast"> |
|
|
|
<div class="model"> |
|
|
|
<div class="quantity"><span>12,500.00</span>kwh</div> |
|
|
|
<div class="quantityTitle">2023年实际用量</div> |
|
|
|
</div> |
|
|
|
<div class="model"></div> |
|
|
|
<div class="model"></div> |
|
|
|
<div class="model"></div> |
|
|
|
<div class="model"></div> |
|
|
|
<div class="model"> |
|
|
|
<div class="quantity"><span>12,500.00</span>kwh</div> |
|
|
|
<div class="quantityTitle">2024年实际用量</div> |
|
|
|
</div> |
|
|
|
<div class="model"> |
|
|
|
<div class="quantity"><span>12,500.00</span>kwh</div> |
|
|
|
<div class="quantityTitle">2024年预算</div> |
|
|
|
</div> |
|
|
|
<div class="model"> |
|
|
|
<div class="quantity"><span>12,500.00</span>kwh</div> |
|
|
|
<div class="quantityTitle">基准值</div> |
|
|
|
</div> |
|
|
|
<div class="model"> |
|
|
|
<div class="quantity"><span>12,500.00</span>kwh</div> |
|
|
|
<div class="quantityTitle">实际|预算</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="hide"> |
|
|
|
<div style="cursor: pointer" @click="hideTopPart"> |
|
|
|
<CaretUpOutlined /> |
|
|
|
<span>隐藏</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</a-card> |
|
|
|
<a-card class="tablePart" :bordered="false"> |
|
|
|
<div class="show" v-if="!showPart"> |
|
|
|
<div style="cursor: pointer" @click="showTopPart"> |
|
|
|
<CaretDownOutlined /> |
|
|
|
<span>展开</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="button" style="margin-bottom: 12px"> |
|
|
|
<a-button type="primary" :disabled="selectedRowKeys.length === 0">批量设置</a-button> |
|
|
|
<a-button type="primary" style="margin-left: 6px">基准值设置</a-button> |
|
|
|
<a-button type="primary" :disabled="selectedRowKeys.length === 0" @click="editData"> |
|
|
|
批量设置 |
|
|
|
</a-button> |
|
|
|
<a-button type="primary" style="margin-left: 6px" @click="setBasicData"> |
|
|
|
基准值设置 |
|
|
|
</a-button> |
|
|
|
</div> |
|
|
|
<a-table |
|
|
|
:columns="columns" |
|
|
|
@ -47,12 +75,74 @@ |
|
|
|
</a-table> |
|
|
|
</a-card> |
|
|
|
</div> |
|
|
|
<!-- 设置 --> |
|
|
|
<a-modal :visible="open" title="批量设置" @ok="handleOk" @cancel="onCancel"> |
|
|
|
<a-form ref="formRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol"> |
|
|
|
<a-form-item label="是否按去年折算"> |
|
|
|
<a-select ref="select" :value="formState.value1"> |
|
|
|
<a-select-option value="1">是</a-select-option> |
|
|
|
<a-select-option value="0">否</a-select-option> |
|
|
|
</a-select> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item label="计算方式"> |
|
|
|
<a-select ref="select" :value="formState.value2"> |
|
|
|
<a-select-option value="1">手动</a-select-option> |
|
|
|
<a-select-option value="0">自动</a-select-option> |
|
|
|
</a-select> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item label="折算率"> |
|
|
|
<a-input :value="formState.name" suffix="%" disabled /> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item label="预算值"> |
|
|
|
<a-input :value="formState.email" suffix="kWh" disabled /> |
|
|
|
</a-form-item> |
|
|
|
</a-form> |
|
|
|
</a-modal> |
|
|
|
<!-- 基准值设置 --> |
|
|
|
<a-drawer |
|
|
|
:visible="visible" |
|
|
|
title="设置基准" |
|
|
|
:width="500" |
|
|
|
@close="onClose" |
|
|
|
:footer-style="{ textAlign: 'right' }"> |
|
|
|
<div> 节点：站台照明 </div> |
|
|
|
<a-table |
|
|
|
:columns="drawerColumns" |
|
|
|
:data-source="newTableData" |
|
|
|
bordered |
|
|
|
rowKey="id" |
|
|
|
:rowSelection="{ |
|
|
|
selectedRowKeys: selectedRowKeysSet, |
|
|
|
onChange: onSelectionChangeSet, |
|
|
|
type: 'radio', |
|
|
|
}" |
|
|
|
:pagination="false"> |
|
|
|
<template #bodyCell="{ column, text, record }"> |
|
|
|
<template v-if="column.key === 'action'"> |
|
|
|
<span> |
|
|
|
<a @click="setBasic(record)">设为基准值</a> |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</a-table> |
|
|
|
<template #footer> |
|
|
|
<a-button style="margin-right: 8px" @click="onClose">取消</a-button> |
|
|
|
<a-button type="primary" @click="onSubmit">确定</a-button> |
|
|
|
</template> |
|
|
|
</a-drawer> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
import { ref, defineEmits } from 'vue'; |
|
|
|
import { ref, defineEmits, reactive } from 'vue'; |
|
|
|
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue'; |
|
|
|
import * as echarts from 'echarts'; |
|
|
|
// 父组件id |
|
|
|
const props = defineProps({ |
|
|
|
parentId: { |
|
|
|
type: Number, |
|
|
|
}, |
|
|
|
}); |
|
|
|
// 点击返回 |
|
|
|
const emit = defineEmits(['change-data']); |
|
|
|
const changeParentData = () => { |
|
|
|
@ -128,6 +218,43 @@ |
|
|
|
address: 'Sidney No. 1 Lake Park', |
|
|
|
}, |
|
|
|
]; |
|
|
|
const open = ref(false); |
|
|
|
const formRef = ref(); |
|
|
|
const formState = ref({}); |
|
|
|
const labelCol = { span: 6 }; |
|
|
|
const wrapperCol = { span: 18 }; |
|
|
|
const editData = () => { |
|
|
|
open.value = true; |
|
|
|
}; |
|
|
|
const onCancel = () => { |
|
|
|
open.value = false; |
|
|
|
}; |
|
|
|
const visible = ref(false); |
|
|
|
const selectedRowKeysSet = ref([]); |
|
|
|
const onSelectionChangeSet = (selectedKeys, selectedRows) => { |
|
|
|
selectedRowKeysSet.value = selectedKeys; |
|
|
|
}; |
|
|
|
const drawerColumns = [ |
|
|
|
{ |
|
|
|
title: '年份', |
|
|
|
dataIndex: 'emissionSources', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '用电量', |
|
|
|
dataIndex: 'emissionFactors', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '操作', |
|
|
|
key: 'action', |
|
|
|
}, |
|
|
|
]; |
|
|
|
const newTableData = ref([]); |
|
|
|
const setBasicData = () => { |
|
|
|
visible.value = true; |
|
|
|
}; |
|
|
|
const onClose = () => { |
|
|
|
visible.value = false; |
|
|
|
}; |
|
|
|
// echarts图 |
|
|
|
const chartRef = ref(null); |
|
|
|
let chartInstance: echarts.ECharts | null = null; |
|
|
|
@ -261,12 +388,19 @@ |
|
|
|
setTimeout(() => { |
|
|
|
chart(); |
|
|
|
}, 500); |
|
|
|
// 点击隐藏/展开 |
|
|
|
const showPart = ref(true); |
|
|
|
const hideTopPart = () => { |
|
|
|
showPart.value = false; |
|
|
|
}; |
|
|
|
const showTopPart = () => { |
|
|
|
showPart.value = true; |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="less" scoped> |
|
|
|
.detailContant { |
|
|
|
height: 100%; |
|
|
|
padding: 12px; |
|
|
|
} |
|
|
|
.ns-form-title { |
|
|
|
font-weight: bold; |
|
|
|
@ -312,20 +446,32 @@ |
|
|
|
height: calc(100% - 5vh); |
|
|
|
.chartsPart { |
|
|
|
width: 100%; |
|
|
|
height: 60%; |
|
|
|
height: 63%; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
.chart { |
|
|
|
width: 100%; |
|
|
|
height: 70%; |
|
|
|
height: 65%; |
|
|
|
} |
|
|
|
.contrast { |
|
|
|
width: 100%; |
|
|
|
height: 30%; |
|
|
|
height: 25%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-around; |
|
|
|
} |
|
|
|
.hide { |
|
|
|
height: 10%; |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
align-items: end; |
|
|
|
justify-content: center; |
|
|
|
color: rgba(39, 120, 255, 1); |
|
|
|
:deep(.anticon) { |
|
|
|
line-height: 17px; |
|
|
|
color: rgba(39, 120, 255, 1) !important; |
|
|
|
} |
|
|
|
} |
|
|
|
.model { |
|
|
|
width: 16%; |
|
|
|
height: 90%; |
|
|
|
@ -355,8 +501,20 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
.tablePart { |
|
|
|
height: calc(60% - 20px); |
|
|
|
height: calc(27% - 20px); |
|
|
|
margin-top: 20px; |
|
|
|
.show { |
|
|
|
height: 10%; |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
align-items: start; |
|
|
|
justify-content: center; |
|
|
|
color: rgba(39, 120, 255, 1); |
|
|
|
:deep(.anticon) { |
|
|
|
line-height: 17px; |
|
|
|
color: rgba(39, 120, 255, 1) !important; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
:deep(.ant-card-body) { |
|
|
|
|
fks-xuxinyue
4 months ago