|
|
@ -13,23 +13,49 @@ |
|
|
<div class="chart" ref="chartRef"></div> |
|
|
<div class="chart" ref="chartRef"></div> |
|
|
<div class="contrast"> |
|
|
<div class="contrast"> |
|
|
<div class="model"> |
|
|
<div class="model"> |
|
|
<div class="quantity"><span>12,500.00</span>kwh</div> |
|
|
<div class="quantity"> |
|
|
<div class="quantityTitle">2023年实际用量</div> |
|
|
<span>{{ lastYearActualUsage }}</span> |
|
|
|
|
|
kwh |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="quantityTitle">{{ Number(props.year) - 1 }}年实际用量</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="model"> |
|
|
<div class="model"> |
|
|
<div class="quantity"><span>12,500.00</span>kwh</div> |
|
|
<div class="quantity"> |
|
|
<div class="quantityTitle">2024年实际用量</div> |
|
|
<span>{{ actualUsage }}</span> |
|
|
|
|
|
kwh |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="quantityTitle">{{ props.year }}年实际用量</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="model"> |
|
|
<div class="model"> |
|
|
<div class="quantity"><span>12,500.00</span>kwh</div> |
|
|
<div class="quantity"> |
|
|
<div class="quantityTitle">2024年预算</div> |
|
|
<span>{{ budget }}</span> |
|
|
|
|
|
kwh |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="quantityTitle">{{ props.year }}年预算</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="model"> |
|
|
<div class="model"> |
|
|
<div class="quantity"><span>12,500.00</span>kwh</div> |
|
|
<div class="quantity"> |
|
|
|
|
|
<span>{{ referenceValue }}</span> |
|
|
|
|
|
kwh |
|
|
|
|
|
</div> |
|
|
<div class="quantityTitle">基准值</div> |
|
|
<div class="quantityTitle">基准值</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="model"> |
|
|
<div class="model"> |
|
|
<div class="quantity"><span>12,500.00</span>kwh</div> |
|
|
<div class="quantity"> |
|
|
|
|
|
<img |
|
|
|
|
|
width="20px" |
|
|
|
|
|
height="28px" |
|
|
|
|
|
v-if="count < 0" |
|
|
|
|
|
src="../../../../../src/icon/carbonPlanningDown.svg" /> |
|
|
|
|
|
<span v-if="count < 0" style="margin-left: 5px">{{ Math.abs(count) }}%</span> |
|
|
|
|
|
<img |
|
|
|
|
|
width="20px" |
|
|
|
|
|
height="28px" |
|
|
|
|
|
v-if="count > 0" |
|
|
|
|
|
src="../../../../../src/icon/carbonPlanningUp.svg" /> |
|
|
|
|
|
<span v-if="count > 0" style="margin-left: 5px">{{ count }}%</span> |
|
|
|
|
|
<span v-if="count === 0" style="margin-left: 5px">{{ count }}%</span> |
|
|
|
|
|
</div> |
|
|
<div class="quantityTitle">实际|预算</div> |
|
|
<div class="quantityTitle">实际|预算</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
@ -64,6 +90,7 @@ |
|
|
selectedRowKeys: selectedRowKeys, |
|
|
selectedRowKeys: selectedRowKeys, |
|
|
onChange: onSelectionChange, |
|
|
onChange: onSelectionChange, |
|
|
}" |
|
|
}" |
|
|
|
|
|
:scroll="{ x: 1300, y: 400 }" |
|
|
:pagination="false"> |
|
|
:pagination="false"> |
|
|
<template #bodyCell="{ column, text, record }"> |
|
|
<template #bodyCell="{ column, text, record }"> |
|
|
<template v-if="column.key === 'action'"> |
|
|
<template v-if="column.key === 'action'"> |
|
|
@ -75,26 +102,26 @@ |
|
|
</a-table> |
|
|
</a-table> |
|
|
</a-card> |
|
|
</a-card> |
|
|
</div> |
|
|
</div> |
|
|
<!-- 设置 --> |
|
|
<!-- 批量设置 --> |
|
|
<a-modal :visible="open" title="批量设置" @ok="handleOk" @cancel="onCancel"> |
|
|
<a-modal :visible="open" title="批量设置" @ok="handleOk" @cancel="onCancel"> |
|
|
<a-form ref="formRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol"> |
|
|
<a-form ref="formRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol"> |
|
|
<a-form-item label="是否按去年折算"> |
|
|
<a-form-item label="是否按去年折算"> |
|
|
<a-select ref="select" :value="formState.value1"> |
|
|
<a-select ref="select" v-model:value="formState.isLastYear" @change="selectChange"> |
|
|
<a-select-option value="1">是</a-select-option> |
|
|
<a-select-option :value="1">是</a-select-option> |
|
|
<a-select-option value="0">否</a-select-option> |
|
|
<a-select-option :value="0">否</a-select-option> |
|
|
</a-select> |
|
|
</a-select> |
|
|
</a-form-item> |
|
|
</a-form-item> |
|
|
<a-form-item label="计算方式"> |
|
|
<!-- <a-form-item label="计算方式"> |
|
|
<a-select ref="select" :value="formState.value2"> |
|
|
<a-select ref="select" v-model:value="formState.countMethod"> |
|
|
<a-select-option value="1">手动</a-select-option> |
|
|
<a-select-option value="0">手动</a-select-option> |
|
|
<a-select-option value="0">自动</a-select-option> |
|
|
<a-select-option value="1">自动</a-select-option> |
|
|
</a-select> |
|
|
</a-select> |
|
|
</a-form-item> |
|
|
</a-form-item> --> |
|
|
<a-form-item label="折算率"> |
|
|
<a-form-item label="折算率"> |
|
|
<a-input :value="formState.name" suffix="%" disabled /> |
|
|
<a-input v-model:value="formState.conversionRate" suffix="%" :disabled="disabled" /> |
|
|
</a-form-item> |
|
|
</a-form-item> |
|
|
<a-form-item label="预算值"> |
|
|
<a-form-item label="预算值"> |
|
|
<a-input :value="formState.email" suffix="kWh" disabled /> |
|
|
<a-input v-model:value="formState.budget" suffix="kWh" :disabled="!disabled" /> |
|
|
</a-form-item> |
|
|
</a-form-item> |
|
|
</a-form> |
|
|
</a-form> |
|
|
</a-modal> |
|
|
</a-modal> |
|
|
@ -105,7 +132,7 @@ |
|
|
:width="500" |
|
|
:width="500" |
|
|
@close="onClose" |
|
|
@close="onClose" |
|
|
:footer-style="{ textAlign: 'right' }"> |
|
|
:footer-style="{ textAlign: 'right' }"> |
|
|
<div> 节点：站台照明 </div> |
|
|
<div> 节点：{{ props.nodeName }} </div> |
|
|
<a-table |
|
|
<a-table |
|
|
:columns="drawerColumns" |
|
|
:columns="drawerColumns" |
|
|
:data-source="newTableData" |
|
|
:data-source="newTableData" |
|
|
@ -134,15 +161,34 @@ |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
<script lang="ts" setup> |
|
|
import { ref, defineEmits, reactive } from 'vue'; |
|
|
import { ref, defineEmits, reactive, toRaw } from 'vue'; |
|
|
|
|
|
import { http } from '/nerv-lib/util/http'; |
|
|
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue'; |
|
|
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue'; |
|
|
|
|
|
import { carbonPlanning } from '/@/api/carbonEmissionFactorLibrary'; |
|
|
import * as echarts from 'echarts'; |
|
|
import * as echarts from 'echarts'; |
|
|
|
|
|
import { any, string } from 'vue-types'; |
|
|
// 父组件id |
|
|
// 父组件id |
|
|
const props = defineProps({ |
|
|
const props = defineProps({ |
|
|
parentId: { |
|
|
parentId: { |
|
|
type: Number, |
|
|
type: Number, |
|
|
}, |
|
|
}, |
|
|
|
|
|
year: { |
|
|
|
|
|
type: string, |
|
|
|
|
|
}, |
|
|
|
|
|
type: { |
|
|
|
|
|
type: Number, |
|
|
|
|
|
}, |
|
|
|
|
|
nodeName: { |
|
|
|
|
|
type: string, |
|
|
|
|
|
}, |
|
|
}); |
|
|
}); |
|
|
|
|
|
console.log(props, 'xxy'); |
|
|
|
|
|
const orgId = ref(''); |
|
|
|
|
|
const result = JSON.parse(sessionStorage.getItem('ORGID')!); |
|
|
|
|
|
orgId.value = result; |
|
|
|
|
|
const fetch = (api, params = { orgId }) => { |
|
|
|
|
|
return http.post(api, params); |
|
|
|
|
|
}; |
|
|
// 点击返回 |
|
|
// 点击返回 |
|
|
const emit = defineEmits(['change-data']); |
|
|
const emit = defineEmits(['change-data']); |
|
|
const changeParentData = () => { |
|
|
const changeParentData = () => { |
|
|
@ -152,7 +198,20 @@ |
|
|
const selectedRowKeys = ref([]); |
|
|
const selectedRowKeys = ref([]); |
|
|
const onSelectionChange = (selectedKeys, selectedRows) => { |
|
|
const onSelectionChange = (selectedKeys, selectedRows) => { |
|
|
selectedRowKeys.value = selectedKeys; |
|
|
selectedRowKeys.value = selectedKeys; |
|
|
|
|
|
formState.value.ids = selectedKeys; |
|
|
}; |
|
|
}; |
|
|
|
|
|
const queryParams = ref({ |
|
|
|
|
|
orgId: orgId.value, |
|
|
|
|
|
year: props.year, |
|
|
|
|
|
itemizeId: props.parentId, |
|
|
|
|
|
type: props.type, |
|
|
|
|
|
}); |
|
|
|
|
|
const getTableData = () => { |
|
|
|
|
|
fetch(carbonPlanning.detailedStatisticalDataTable, queryParams.value).then((res) => { |
|
|
|
|
|
data.value = res.data; |
|
|
|
|
|
}); |
|
|
|
|
|
}; |
|
|
|
|
|
getTableData(); |
|
|
const columns = ref([ |
|
|
const columns = ref([ |
|
|
{ |
|
|
{ |
|
|
title: '序号', |
|
|
title: '序号', |
|
|
@ -162,35 +221,31 @@ |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: '日期', |
|
|
title: '日期', |
|
|
dataIndex: 'name', |
|
|
dataIndex: 'yearMonth', |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: '2023年实际用量', |
|
|
title: Number(props.year) - 1 + '年实际用量', |
|
|
dataIndex: 'name', |
|
|
dataIndex: 'lastYearActualUsage', |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: '2024年实际用量', |
|
|
title: props.year + '年实际用量', |
|
|
dataIndex: 'name', |
|
|
dataIndex: 'actualUsage', |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: '基准值', |
|
|
title: '基准值', |
|
|
dataIndex: 'money', |
|
|
dataIndex: 'referenceValue', |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: '是否按去年折算', |
|
|
title: '是否按去年折算', |
|
|
dataIndex: 'address', |
|
|
dataIndex: 'lastYear', |
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
title: '计算方式', |
|
|
|
|
|
dataIndex: 'address', |
|
|
|
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: '折算率', |
|
|
title: '折算率', |
|
|
dataIndex: 'address', |
|
|
dataIndex: 'conversionRate', |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: '2024年预算', |
|
|
title: '2024年预算', |
|
|
dataIndex: 'address', |
|
|
dataIndex: 'budget', |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
title: '操作', |
|
|
title: '操作', |
|
|
@ -198,35 +253,50 @@ |
|
|
}, |
|
|
}, |
|
|
]); |
|
|
]); |
|
|
|
|
|
|
|
|
const data = [ |
|
|
const data = ref([]); |
|
|
{ |
|
|
|
|
|
key: '1', |
|
|
|
|
|
name: 'John Brown', |
|
|
|
|
|
money: '￥300,000.00', |
|
|
|
|
|
address: 'New York No. 1 Lake Park', |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
key: '2', |
|
|
|
|
|
name: 'Jim Green', |
|
|
|
|
|
money: '￥1,256,000.00', |
|
|
|
|
|
address: 'London No. 1 Lake Park', |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
key: '3', |
|
|
|
|
|
name: 'Joe Black', |
|
|
|
|
|
money: '￥120,000.00', |
|
|
|
|
|
address: 'Sidney No. 1 Lake Park', |
|
|
|
|
|
}, |
|
|
|
|
|
]; |
|
|
|
|
|
const open = ref(false); |
|
|
const open = ref(false); |
|
|
const formRef = ref(); |
|
|
const formRef = ref(); |
|
|
const formState = ref({}); |
|
|
const formState = ref({}); |
|
|
const labelCol = { span: 6 }; |
|
|
const labelCol = { span: 6 }; |
|
|
const wrapperCol = { span: 18 }; |
|
|
const wrapperCol = { span: 18 }; |
|
|
const editData = () => { |
|
|
const editData = (record) => { |
|
|
open.value = true; |
|
|
open.value = true; |
|
|
|
|
|
if (record) { |
|
|
|
|
|
formState.value.ids = [record.id]; |
|
|
|
|
|
if (record.lastYear === '是') { |
|
|
|
|
|
formState.value.isLastYear = 1; |
|
|
|
|
|
} else { |
|
|
|
|
|
formState.value.isLastYear = 0; |
|
|
|
|
|
} |
|
|
|
|
|
formState.value.conversionRate = record.conversionRate; |
|
|
|
|
|
formState.value.budget = record.budget; |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
|
|
|
const disabled = ref(true); |
|
|
|
|
|
const selectChange = (value) => { |
|
|
|
|
|
if (value === 1) { |
|
|
|
|
|
disabled.value = false; |
|
|
|
|
|
} else { |
|
|
|
|
|
disabled.value = true; |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
|
|
|
const handleOk = () => { |
|
|
|
|
|
formRef.value |
|
|
|
|
|
.validate() |
|
|
|
|
|
.then(() => { |
|
|
|
|
|
console.log('values', formState, toRaw(formState)); |
|
|
|
|
|
fetch(carbonPlanning.batchOrUpdate, formState.value).then((res) => { |
|
|
|
|
|
open.value = false; |
|
|
|
|
|
formState.value = {}; |
|
|
|
|
|
getTableData(); |
|
|
|
|
|
}); |
|
|
|
|
|
}) |
|
|
|
|
|
.catch((error) => { |
|
|
|
|
|
console.log('error', error); |
|
|
|
|
|
}); |
|
|
}; |
|
|
}; |
|
|
const onCancel = () => { |
|
|
const onCancel = () => { |
|
|
|
|
|
formState.value = {}; |
|
|
open.value = false; |
|
|
open.value = false; |
|
|
}; |
|
|
}; |
|
|
const visible = ref(false); |
|
|
const visible = ref(false); |
|
|
@ -258,6 +328,33 @@ |
|
|
// echarts图 |
|
|
// echarts图 |
|
|
const chartRef = ref(null); |
|
|
const chartRef = ref(null); |
|
|
let chartInstance: echarts.ECharts | null = null; |
|
|
let chartInstance: echarts.ECharts | null = null; |
|
|
|
|
|
const XData = ref([]); |
|
|
|
|
|
const actualUsageList = ref([]); |
|
|
|
|
|
const lastYearActualUsageList = ref([]); |
|
|
|
|
|
const budgetList = ref([]); |
|
|
|
|
|
const referenceValueList = ref(); |
|
|
|
|
|
const actualUsage = ref(); |
|
|
|
|
|
const budget = ref(); |
|
|
|
|
|
const referenceValue = ref(); |
|
|
|
|
|
const lastYearActualUsage = ref(); |
|
|
|
|
|
const count = ref(); |
|
|
|
|
|
const getChartData = () => { |
|
|
|
|
|
fetch(carbonPlanning.detailedStatisticalDataChart, queryParams.value).then((res) => { |
|
|
|
|
|
console.log(res); |
|
|
|
|
|
XData.value = res.data.yearMonth; |
|
|
|
|
|
actualUsageList.value = res.data.actualUsageList; |
|
|
|
|
|
lastYearActualUsageList.value = res.data.lastYearActualUsageList; |
|
|
|
|
|
budgetList.value = res.data.budgetList; |
|
|
|
|
|
referenceValueList.value = res.data.referenceValueList; |
|
|
|
|
|
actualUsage.value = res.data.actualUsage; |
|
|
|
|
|
budget.value = res.data.budget; |
|
|
|
|
|
referenceValue.value = res.data.referenceValue; |
|
|
|
|
|
lastYearActualUsage.value = res.data.lastYearActualUsage; |
|
|
|
|
|
count.value = res.data.count; |
|
|
|
|
|
chart(); |
|
|
|
|
|
}); |
|
|
|
|
|
}; |
|
|
|
|
|
getChartData(); |
|
|
const chart = () => { |
|
|
const chart = () => { |
|
|
chartInstance = echarts.init(chartRef.value); |
|
|
chartInstance = echarts.init(chartRef.value); |
|
|
const option = { |
|
|
const option = { |
|
|
@ -278,7 +375,12 @@ |
|
|
bottom: '10%', |
|
|
bottom: '10%', |
|
|
}, |
|
|
}, |
|
|
legend: { |
|
|
legend: { |
|
|
data: ['昨日总人数', '今日实时人数', '昨日使用率', '今日使用率'], |
|
|
data: [ |
|
|
|
|
|
Number(props.year) - 1 + '年实际用量', |
|
|
|
|
|
props.year + '年实际用量', |
|
|
|
|
|
props.year + '年预算', |
|
|
|
|
|
'基准值', |
|
|
|
|
|
], |
|
|
top: '0', |
|
|
top: '0', |
|
|
left: '0', |
|
|
left: '0', |
|
|
textStyle: { |
|
|
textStyle: { |
|
|
@ -289,7 +391,7 @@ |
|
|
itemHeight: 10, // 图例标记的高度 |
|
|
itemHeight: 10, // 图例标记的高度 |
|
|
}, |
|
|
}, |
|
|
xAxis: { |
|
|
xAxis: { |
|
|
data: ['2020', '2021', '2022', '2023', '2024'], |
|
|
data: XData.value, |
|
|
axisLine: { |
|
|
axisLine: { |
|
|
show: true, //隐藏X轴轴线 |
|
|
show: true, //隐藏X轴轴线 |
|
|
lineStyle: { |
|
|
lineStyle: { |
|
|
@ -337,7 +439,7 @@ |
|
|
], |
|
|
], |
|
|
series: [ |
|
|
series: [ |
|
|
{ |
|
|
{ |
|
|
name: '昨日总人数', |
|
|
name: Number(props.year) - 1 + '年实际用量', |
|
|
type: 'bar', |
|
|
type: 'bar', |
|
|
barWidth: 18, |
|
|
barWidth: 18, |
|
|
itemStyle: { |
|
|
itemStyle: { |
|
|
@ -345,10 +447,10 @@ |
|
|
color: '#6395f9', |
|
|
color: '#6395f9', |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
data: [24, 45, 43, 35, 76], |
|
|
data: lastYearActualUsageList.value, |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
name: '今日实时人数', |
|
|
name: props.year + '年实际用量', |
|
|
type: 'bar', |
|
|
type: 'bar', |
|
|
barWidth: 18, |
|
|
barWidth: 18, |
|
|
itemStyle: { |
|
|
itemStyle: { |
|
|
@ -356,10 +458,10 @@ |
|
|
color: '#62daab', |
|
|
color: '#62daab', |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
data: [133, 23, 114, 67, 89], |
|
|
data: actualUsageList.value, |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
name: '昨日使用率', |
|
|
name: props.year + '年预算', |
|
|
type: 'line', |
|
|
type: 'line', |
|
|
smooth: true, // 开启平滑曲线 |
|
|
smooth: true, // 开启平滑曲线 |
|
|
symbol: 'none', //标记的图形为实心圆 |
|
|
symbol: 'none', //标记的图形为实心圆 |
|
|
@ -367,10 +469,10 @@ |
|
|
color: '#f4664a', |
|
|
color: '#f4664a', |
|
|
width: 2, |
|
|
width: 2, |
|
|
}, |
|
|
}, |
|
|
data: [4.2, 3.5, 2.9, 7.8, 2], |
|
|
data: budgetList.value, |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
name: '今日使用率', |
|
|
name: '基准值', |
|
|
type: 'line', |
|
|
type: 'line', |
|
|
smooth: true, // 开启平滑曲线 |
|
|
smooth: true, // 开启平滑曲线 |
|
|
symbol: 'none', //标记的图形为实心圆 |
|
|
symbol: 'none', //标记的图形为实心圆 |
|
|
@ -378,16 +480,13 @@ |
|
|
color: '#f4664a', |
|
|
color: '#f4664a', |
|
|
width: 2, |
|
|
width: 2, |
|
|
}, |
|
|
}, |
|
|
data: [4, 6, 9, 8, 5], |
|
|
data: referenceValueList.value, |
|
|
}, |
|
|
}, |
|
|
], |
|
|
], |
|
|
}; |
|
|
}; |
|
|
chartInstance = echarts.init(chartRef.value); |
|
|
chartInstance = echarts.init(chartRef.value); |
|
|
chartInstance.setOption(option); |
|
|
chartInstance.setOption(option); |
|
|
}; |
|
|
}; |
|
|
setTimeout(() => { |
|
|
|
|
|
chart(); |
|
|
|
|
|
}, 500); |
|
|
|
|
|
// 点击隐藏/展开 |
|
|
// 点击隐藏/展开 |
|
|
const showPart = ref(true); |
|
|
const showPart = ref(true); |
|
|
const hideTopPart = () => { |
|
|
const hideTopPart = () => { |
|
|
@ -395,6 +494,7 @@ |
|
|
}; |
|
|
}; |
|
|
const showTopPart = () => { |
|
|
const showTopPart = () => { |
|
|
showPart.value = true; |
|
|
showPart.value = true; |
|
|
|
|
|
getChartData(); |
|
|
}; |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
|
fks-xuxinyue
3 months ago
