taskId:280,remark:'commit'
This commit is contained in:
@@ -70,3 +70,8 @@ export enum carbonAssets {
|
|||||||
delete = '/carbon-smart/api/carbon/trade/details/delete',
|
delete = '/carbon-smart/api/carbon/trade/details/delete',
|
||||||
quotaStatistics = '/carbon-smart/api/carbon/trade/details/quotaStatistics',
|
quotaStatistics = '/carbon-smart/api/carbon/trade/details/quotaStatistics',
|
||||||
}
|
}
|
||||||
|
// 上传图片接口
|
||||||
|
export enum uploadPic {
|
||||||
|
uploadfiles = '/carbon-smart/api/common/file/uploadfiles',
|
||||||
|
select = '/carbon-smart/api/common/file/select',
|
||||||
|
}
|
||||||
|
@@ -55,12 +55,19 @@
|
|||||||
<a-button type="primary" @click="addDetail">新增</a-button>
|
<a-button type="primary" @click="addDetail">新增</a-button>
|
||||||
<a-button type="primary" style="margin-left: 6px">导入</a-button>
|
<a-button type="primary" style="margin-left: 6px">导入</a-button>
|
||||||
<a-button type="primary" style="margin-left: 6px">导出</a-button>
|
<a-button type="primary" style="margin-left: 6px">导出</a-button>
|
||||||
<a-button type="primary" style="margin-left: 6px">批量删除</a-button>
|
<a-button
|
||||||
|
type="primary"
|
||||||
|
style="margin-left: 6px"
|
||||||
|
:disabled="selectedRowKeys.length === 0"
|
||||||
|
@click="deleteMore"
|
||||||
|
>批量删除</a-button
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a-table
|
<a-table
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:data-source="data"
|
:data-source="data"
|
||||||
|
rowKey="id"
|
||||||
@change="onChange"
|
@change="onChange"
|
||||||
:rowSelection="{
|
:rowSelection="{
|
||||||
selectedRowKeys: selectedRowKeys,
|
selectedRowKeys: selectedRowKeys,
|
||||||
@@ -134,18 +141,19 @@
|
|||||||
<a-form-item ref="name" label="交易数量" name="transactionQuantity">
|
<a-form-item ref="name" label="交易数量" name="transactionQuantity">
|
||||||
<a-input v-model:value="formState.transactionQuantity" placeholder="请输入交易数量" />
|
<a-input v-model:value="formState.transactionQuantity" placeholder="请输入交易数量" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item ref="name" label="发生金额" name="amountIncurredValue">
|
<a-form-item ref="name" label="发生金额" name="amountIncurred">
|
||||||
<a-input v-model:value="formState.amountIncurredValue" placeholder="请输入发生金额" />
|
<a-input v-model:value="formState.amountIncurred" placeholder="请输入发生金额" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item ref="name" label="交易对象" name="tradingPartner">
|
<a-form-item ref="name" label="交易对象" name="tradingPartner">
|
||||||
<a-input v-model:value="formState.tradingPartner" placeholder="请输入交易对象" />
|
<a-input v-model:value="formState.tradingPartner" placeholder="请输入交易对象" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item ref="name" label="交易凭证" name="tradingPartner">
|
<a-form-item ref="name" label="交易凭证">
|
||||||
<a-upload
|
<a-upload
|
||||||
v-model:file-list="fileList"
|
:file-list="fileList"
|
||||||
name="file"
|
name="file"
|
||||||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf"
|
||||||
:headers="headers"
|
@remove="handleFileRemove"
|
||||||
|
:before-upload="beforeUpload"
|
||||||
@change="handleChange">
|
@change="handleChange">
|
||||||
<a-button>
|
<a-button>
|
||||||
<upload-outlined></upload-outlined>
|
<upload-outlined></upload-outlined>
|
||||||
@@ -164,10 +172,16 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, defineEmits, toRaw } from 'vue';
|
import { ref, defineEmits, toRaw } from 'vue';
|
||||||
import { http } from '/nerv-lib/util/http';
|
import { http } from '/nerv-lib/util/http';
|
||||||
|
import { NSAxios } from '/nerv-lib/util/http/axios';
|
||||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||||
import type { UploadChangeParam } from 'ant-design-vue';
|
import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
|
||||||
import { Pagination, Modal, message } from 'ant-design-vue';
|
import { Pagination, Modal, message } from 'ant-design-vue';
|
||||||
import { carbonAssets, carbonEmissionFactorLibrary } from '/@/api/carbonEmissionFactorLibrary';
|
import {
|
||||||
|
carbonAssets,
|
||||||
|
carbonEmissionFactorLibrary,
|
||||||
|
uploadPic,
|
||||||
|
} from '/@/api/carbonEmissionFactorLibrary';
|
||||||
|
import { log } from 'console';
|
||||||
defineOptions({
|
defineOptions({
|
||||||
energyType: 'carbonAssets', // 与页面路由name一致缓存才可生效
|
energyType: 'carbonAssets', // 与页面路由name一致缓存才可生效
|
||||||
components: {
|
components: {
|
||||||
@@ -207,6 +221,7 @@
|
|||||||
const getDetailList = () => {
|
const getDetailList = () => {
|
||||||
fetch(carbonAssets.carbonDetailsList, queryParams.value).then((res) => {
|
fetch(carbonAssets.carbonDetailsList, queryParams.value).then((res) => {
|
||||||
data.value = res.data.records;
|
data.value = res.data.records;
|
||||||
|
total.value = res.data.total;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
getDetailList();
|
getDetailList();
|
||||||
@@ -276,12 +291,20 @@
|
|||||||
getDictList();
|
getDictList();
|
||||||
visible.value = true;
|
visible.value = true;
|
||||||
formState.value.id = record.id;
|
formState.value.id = record.id;
|
||||||
|
fetch(uploadPic.select, { bizId: record.id, bizTpye: 1 }).then((res) => {
|
||||||
|
fileList.value = res.data;
|
||||||
|
});
|
||||||
|
formState.value = JSON.parse(JSON.stringify(record));
|
||||||
|
if (formState.value.expenditure === 0) {
|
||||||
|
formState.value.transactionQuantity = formState.value.income;
|
||||||
|
} else {
|
||||||
|
formState.value.transactionQuantity = formState.value.expenditure;
|
||||||
|
}
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
let selectDevice = ref([Number(record.transactionType)]);
|
let selectDevice = ref([Number(formState.value.transactionType)]);
|
||||||
findParentIds(options.value, record.transactionType, selectDevice.value);
|
findParentIds(options.value, formState.value.transactionType, selectDevice.value);
|
||||||
record.transactionType = selectDevice;
|
formState.value.transactionType = selectDevice;
|
||||||
formState.value.transactionType = record.transactionType;
|
formState.value.transactionType = formState.value.transactionType;
|
||||||
formState.value = record;
|
|
||||||
}, 500);
|
}, 500);
|
||||||
};
|
};
|
||||||
// 定义一个递归函数来查找每一级的id 设备类型回显 层级方法
|
// 定义一个递归函数来查找每一级的id 设备类型回显 层级方法
|
||||||
@@ -297,6 +320,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
const delData = (record) => {
|
const delData = (record) => {
|
||||||
|
const id = [record.id];
|
||||||
Modal.confirm({
|
Modal.confirm({
|
||||||
title: '警告',
|
title: '警告',
|
||||||
content: '确定要删除吗?',
|
content: '确定要删除吗?',
|
||||||
@@ -304,7 +328,26 @@
|
|||||||
okType: 'primary',
|
okType: 'primary',
|
||||||
cancelText: '取消',
|
cancelText: '取消',
|
||||||
onOk() {
|
onOk() {
|
||||||
fetch(carbonAssets.delete, { id: record.id }).then((res) => {
|
fetch(carbonAssets.delete, { ids: id }).then((res) => {
|
||||||
|
debugger;
|
||||||
|
message.success('操作成功!');
|
||||||
|
getDetailList();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onCancel() {
|
||||||
|
console.log('Cancel');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const deleteMore = () => {
|
||||||
|
Modal.confirm({
|
||||||
|
title: '警告',
|
||||||
|
content: '确定要删除吗?',
|
||||||
|
okText: '确定',
|
||||||
|
okType: 'primary',
|
||||||
|
cancelText: '取消',
|
||||||
|
onOk() {
|
||||||
|
fetch(carbonAssets.delete, { ids: selectedRowKeys.value }).then((res) => {
|
||||||
message.success('操作成功!');
|
message.success('操作成功!');
|
||||||
getDetailList();
|
getDetailList();
|
||||||
});
|
});
|
||||||
@@ -353,6 +396,55 @@
|
|||||||
visible.value = true;
|
visible.value = true;
|
||||||
getDictList();
|
getDictList();
|
||||||
};
|
};
|
||||||
|
// 上传附件
|
||||||
|
const fileList = ref<UploadProps['fileList']>([]);
|
||||||
|
// const headers = {
|
||||||
|
// authorization: 'authorization-text',
|
||||||
|
// };
|
||||||
|
// const beforeUpload = (file: File) => {
|
||||||
|
// return false; // 返回 true 表示允许上传
|
||||||
|
// };
|
||||||
|
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
|
||||||
|
// fileList.value = [...(fileList.value || []), file];
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
const handleChange = (info: UploadChangeParam) => {
|
||||||
|
fileList.value = [...info.fileList]
|
||||||
|
if (info.file.status !== 'uploading') {
|
||||||
|
console.log(info.file, info.fileList);
|
||||||
|
}
|
||||||
|
if (info.file.status === 'done') {
|
||||||
|
message.success(`${info.file.name} 文件上传成功`);
|
||||||
|
} else if (info.file.status === 'error') {
|
||||||
|
message.error(`${info.file.name} 文件上传失败`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const handleFileRemove = (file) => {
|
||||||
|
const newFileList = [];
|
||||||
|
fileList.value.forEach((item) => {
|
||||||
|
if (item.uid !== file.uid) {
|
||||||
|
newFileList.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
fileList.value = newFileList;
|
||||||
|
};
|
||||||
|
const uploadQuery = ref({
|
||||||
|
bizTpye: 1,
|
||||||
|
});
|
||||||
|
const config = {
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'multipart/form-data',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
function createHttp() {
|
||||||
|
/** todo 临时去除超时时间 */
|
||||||
|
return new NSAxios({
|
||||||
|
headers: { 'Content-Type': 'application/json;charset=UTF-8' },
|
||||||
|
withCredentials: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const uploadHttp = createHttp();
|
||||||
|
const url = '/carbon-smart/api/common/file/uploadfiles'; // 请求api
|
||||||
const onSubmit = () => {
|
const onSubmit = () => {
|
||||||
formRef.value
|
formRef.value
|
||||||
.validate()
|
.validate()
|
||||||
@@ -361,10 +453,49 @@
|
|||||||
if (formState.value.transactionType) {
|
if (formState.value.transactionType) {
|
||||||
formState.value.transactionType = formState.value.transactionType.join(',').split(',')[1];
|
formState.value.transactionType = formState.value.transactionType.join(',').split(',')[1];
|
||||||
}
|
}
|
||||||
|
if (formState.value.accountType.value) {
|
||||||
|
formState.value.accountType = formState.value.accountType.value;
|
||||||
|
}
|
||||||
fetch(carbonAssets.createOrUpdate, formState.value).then((res) => {
|
fetch(carbonAssets.createOrUpdate, formState.value).then((res) => {
|
||||||
|
if (res.data.id && fileList.value.length !== 0) {
|
||||||
|
// uploadQuery.value.bizId = res.data.id;
|
||||||
|
const formData = ref(new FormData());
|
||||||
|
fileList.value.forEach(file => {
|
||||||
|
console.log(file,'xxy');
|
||||||
|
|
||||||
|
formData.value.append('files[]', file);
|
||||||
|
});
|
||||||
|
formData.value.append('bizTpye', 1);
|
||||||
|
formData.value.append('bizId', res.data.id);
|
||||||
|
// uploadQuery.value.files = formData.value;
|
||||||
|
// uploadQuery.value.files = fileList.value;
|
||||||
|
debugger;
|
||||||
|
fetch(uploadPic.uploadfiles, formData.value)
|
||||||
|
.then((res) => {
|
||||||
message.success('操作成功!');
|
message.success('操作成功!');
|
||||||
visible.value = false;
|
visible.value = false;
|
||||||
getDetailList();
|
getDetailList();
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log('error', error);
|
||||||
|
});
|
||||||
|
console.log(config,'xxy555');
|
||||||
|
|
||||||
|
// uploadHttp
|
||||||
|
// .post(url, formData.value, config.headers)
|
||||||
|
// .then((res) => {
|
||||||
|
// console.log(res);
|
||||||
|
|
||||||
|
// })
|
||||||
|
// .catch((res) => {
|
||||||
|
// console.log(res);
|
||||||
|
|
||||||
|
// });
|
||||||
|
} else {
|
||||||
|
message.success('操作成功!');
|
||||||
|
visible.value = false;
|
||||||
|
getDetailList();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
@@ -377,13 +508,14 @@
|
|||||||
transactionType: [{ required: true, message: '请选择交易类型', trigger: 'change' }],
|
transactionType: [{ required: true, message: '请选择交易类型', trigger: 'change' }],
|
||||||
transactionDate: [{ required: true, message: '请选择交易日期', trigger: 'change' }],
|
transactionDate: [{ required: true, message: '请选择交易日期', trigger: 'change' }],
|
||||||
transactionQuantity: [{ required: true, message: '请输入交易数量', trigger: 'change' }],
|
transactionQuantity: [{ required: true, message: '请输入交易数量', trigger: 'change' }],
|
||||||
amountIncurredValue: [{ required: true, message: '请输入发生金额', trigger: 'change' }],
|
amountIncurred: [{ required: true, message: '请输入发生金额', trigger: 'change' }],
|
||||||
tradingPartner: [{ required: true, message: '请输入交易对象', trigger: 'change' }],
|
tradingPartner: [{ required: true, message: '请输入交易对象', trigger: 'change' }],
|
||||||
};
|
};
|
||||||
// 关闭新增抽屉
|
// 关闭新增抽屉
|
||||||
const onClose = () => {
|
const onClose = () => {
|
||||||
visible.value = false;
|
visible.value = false;
|
||||||
formState.value = {};
|
formState.value = {};
|
||||||
|
fileList.value = [];
|
||||||
formRef.value.resetFields();
|
formRef.value.resetFields();
|
||||||
};
|
};
|
||||||
// 统计表格
|
// 统计表格
|
||||||
|
@@ -0,0 +1,53 @@
|
|||||||
|
<template>
|
||||||
|
<div class="clearfix">
|
||||||
|
<a-upload :file-list="fileList" :before-upload="beforeUpload" @remove="handleRemove">
|
||||||
|
<a-button>
|
||||||
|
<upload-outlined></upload-outlined>
|
||||||
|
Select File
|
||||||
|
</a-button>
|
||||||
|
</a-upload>
|
||||||
|
<a-button
|
||||||
|
type="primary"
|
||||||
|
:disabled="fileList.length === 0"
|
||||||
|
:loading="uploading"
|
||||||
|
style="margin-top: 16px"
|
||||||
|
@click="handleUpload"
|
||||||
|
>
|
||||||
|
{{ uploading ? 'Uploading' : 'Start Upload' }}
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
import type { UploadProps } from 'ant-design-vue';
|
||||||
|
|
||||||
|
const fileList = ref<UploadProps['fileList']>([]);
|
||||||
|
const uploading = ref<boolean>(false);
|
||||||
|
|
||||||
|
const handleRemove: UploadProps['onRemove'] = file => {
|
||||||
|
const index = fileList.value.indexOf(file);
|
||||||
|
const newFileList = fileList.value.slice();
|
||||||
|
newFileList.splice(index, 1);
|
||||||
|
fileList.value = newFileList;
|
||||||
|
};
|
||||||
|
|
||||||
|
const beforeUpload: UploadProps['beforeUpload'] = file => {
|
||||||
|
fileList.value = [...(fileList.value || []), file];
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpload = () => {
|
||||||
|
const formData = new FormData();
|
||||||
|
fileList.value.forEach((file: UploadProps['fileList'][number]) => {
|
||||||
|
debugger
|
||||||
|
formData.append('files[]', file as any);
|
||||||
|
});
|
||||||
|
const fileBlob = formData.get('files');
|
||||||
|
console.log(fileBlob);
|
||||||
|
uploading.value = true;
|
||||||
|
debugger
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@@ -6,7 +6,9 @@
|
|||||||
><img width="68px" height="68px" src="../../../../src/icon/carbonAssetsMoney-1.svg"
|
><img width="68px" height="68px" src="../../../../src/icon/carbonAssetsMoney-1.svg"
|
||||||
/></div>
|
/></div>
|
||||||
<div class="moneyTitle">全国碳账户估值(CNY)</div>
|
<div class="moneyTitle">全国碳账户估值(CNY)</div>
|
||||||
<div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">{{nationwide.valuation}}</div>
|
<div class="moneyTotal" style="color: rgba(229, 102, 22, 1)">{{
|
||||||
|
nationwide.valuation
|
||||||
|
}}</div>
|
||||||
<div class="moneyDetail"
|
<div class="moneyDetail"
|
||||||
><img
|
><img
|
||||||
@click="viewDetail(1)"
|
@click="viewDetail(1)"
|
||||||
@@ -204,23 +206,24 @@
|
|||||||
orgId: orgId.value,
|
orgId: orgId.value,
|
||||||
year: new Date().getFullYear(),
|
year: new Date().getFullYear(),
|
||||||
});
|
});
|
||||||
const nationwide = ref()
|
const nationwide = ref();
|
||||||
const place = ref()
|
const place = ref();
|
||||||
const ccer = ref()
|
const ccer = ref();
|
||||||
const whole = ref()
|
const whole = ref();
|
||||||
const getData = () => {
|
const getData = () => {
|
||||||
fetch(carbonAssets.carbonAssets, queryParams.value).then((res) => {
|
fetch(carbonAssets.carbonAssets, queryParams.value).then((res) => {
|
||||||
console.log(res);
|
console.log(res);
|
||||||
nationwide.value = res.data.nationwide
|
nationwide.value = res.data.nationwide;
|
||||||
place.value = res.data.place
|
place.value = res.data.place;
|
||||||
ccer.value = res.data.ccer
|
ccer.value = res.data.ccer;
|
||||||
whole.value = res.data.whole
|
whole.value = res.data.whole;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
getData();
|
getData();
|
||||||
// 填报页点击返回
|
// 填报页点击返回
|
||||||
const updateData = (type) => {
|
const updateData = (type) => {
|
||||||
homePage.value = type;
|
homePage.value = type;
|
||||||
|
getData();
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@@ -283,7 +283,7 @@
|
|||||||
<a-row>
|
<a-row>
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
<a-form-item ref="name" label="因子值" name="factorId">
|
<a-form-item ref="name" label="因子值" name="factorId">
|
||||||
<ns-input v-model:value="editFormState.factorId" disabled />
|
<ns-input v-model:value="editFormState.factorId" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
|
@@ -9,21 +9,258 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="contant">
|
<div class="contant">
|
||||||
<div class="chartsPart">
|
<a-card class="chartsPart">
|
||||||
|
<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>
|
||||||
<div class="tablePart">
|
<div class="model"></div>
|
||||||
|
<div class="model"></div>
|
||||||
|
<div class="model"></div>
|
||||||
|
<div class="model"></div>
|
||||||
</div>
|
</div>
|
||||||
|
</a-card>
|
||||||
|
<a-card class="tablePart" :bordered="false">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<a-table
|
||||||
|
:columns="columns"
|
||||||
|
:data-source="data"
|
||||||
|
rowKey="id"
|
||||||
|
bordered
|
||||||
|
:rowSelection="{
|
||||||
|
selectedRowKeys: selectedRowKeys,
|
||||||
|
onChange: onSelectionChange,
|
||||||
|
}"
|
||||||
|
:pagination="false">
|
||||||
|
<template #bodyCell="{ column, text, record }">
|
||||||
|
<template v-if="column.key === 'action'">
|
||||||
|
<span>
|
||||||
|
<a @click="editData(record)">修改</a>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
</a-card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { defineEmits } from 'vue';
|
import { ref, defineEmits } from 'vue';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
// 点击返回
|
// 点击返回
|
||||||
const emit = defineEmits(['change-data']);
|
const emit = defineEmits(['change-data']);
|
||||||
const changeParentData = () => {
|
const changeParentData = () => {
|
||||||
emit('change-data', true);
|
emit('change-data', true);
|
||||||
};
|
};
|
||||||
|
// 表格
|
||||||
|
const selectedRowKeys = ref([]);
|
||||||
|
const onSelectionChange = (selectedKeys, selectedRows) => {
|
||||||
|
selectedRowKeys.value = selectedKeys;
|
||||||
|
};
|
||||||
|
const columns = ref([
|
||||||
|
{
|
||||||
|
title: '序号',
|
||||||
|
customRender: (text: any) => {
|
||||||
|
return text.index + 1;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '日期',
|
||||||
|
dataIndex: 'name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '2023年实际用量',
|
||||||
|
dataIndex: 'name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '2024年实际用量',
|
||||||
|
dataIndex: 'name',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '基准值',
|
||||||
|
dataIndex: 'money',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '是否按去年折算',
|
||||||
|
dataIndex: 'address',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '计算方式',
|
||||||
|
dataIndex: 'address',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '折算率',
|
||||||
|
dataIndex: 'address',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '2024年预算',
|
||||||
|
dataIndex: 'address',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
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',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
// echarts图
|
||||||
|
const chartRef = ref(null);
|
||||||
|
let chartInstance: echarts.ECharts | null = null;
|
||||||
|
const chart = () => {
|
||||||
|
chartInstance = echarts.init(chartRef.value);
|
||||||
|
const option = {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '4%',
|
||||||
|
top: '18%',
|
||||||
|
right: '5%',
|
||||||
|
bottom: '10%',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['昨日总人数', '今日实时人数', '昨日使用率', '今日使用率'],
|
||||||
|
top: '0',
|
||||||
|
left: '0',
|
||||||
|
textStyle: {
|
||||||
|
color: '#666',
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
itemWidth: 20, // 图例标记的宽度
|
||||||
|
itemHeight: 10, // 图例标记的高度
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: ['2020', '2021', '2022', '2023', '2024'],
|
||||||
|
axisLine: {
|
||||||
|
show: true, //隐藏X轴轴线
|
||||||
|
lineStyle: {
|
||||||
|
color: '#d9d9d9',
|
||||||
|
width: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: true, //隐藏X轴刻度
|
||||||
|
alignWithLabel: true,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#d9d9d9', //X轴文字颜色
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
interval: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
width: 1,
|
||||||
|
color: '#d9d9d9',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#d9d9d9',
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '昨日总人数',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 18,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#6395f9',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [24, 45, 43, 35, 76],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '今日实时人数',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 18,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#62daab',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [133, 23, 114, 67, 89],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '昨日使用率',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true, // 开启平滑曲线
|
||||||
|
symbol: 'none', //标记的图形为实心圆
|
||||||
|
lineStyle: {
|
||||||
|
color: '#f4664a',
|
||||||
|
width: 2,
|
||||||
|
},
|
||||||
|
data: [4.2, 3.5, 2.9, 7.8, 2],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '今日使用率',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true, // 开启平滑曲线
|
||||||
|
symbol: 'none', //标记的图形为实心圆
|
||||||
|
lineStyle: {
|
||||||
|
color: '#f4664a',
|
||||||
|
width: 2,
|
||||||
|
},
|
||||||
|
data: [4, 6, 9, 8, 5],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
chartInstance = echarts.init(chartRef.value);
|
||||||
|
chartInstance.setOption(option);
|
||||||
|
};
|
||||||
|
setTimeout(() => {
|
||||||
|
chart();
|
||||||
|
}, 500);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@@ -75,13 +312,56 @@
|
|||||||
height: calc(100% - 5vh);
|
height: calc(100% - 5vh);
|
||||||
.chartsPart {
|
.chartsPart {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 40%;
|
height: 60%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
.chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 70%;
|
||||||
|
}
|
||||||
|
.contrast {
|
||||||
|
width: 100%;
|
||||||
|
height: 30%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
.model {
|
||||||
|
width: 16%;
|
||||||
|
height: 90%;
|
||||||
|
background: #f7f9ff;
|
||||||
|
padding: 12px;
|
||||||
|
.quantity {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
line-height: 17px;
|
||||||
|
color: rgba(0, 0, 0, 1);
|
||||||
|
> span {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
line-height: 37px;
|
||||||
|
color: rgba(0, 0, 0, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.quantityTitle {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.96px;
|
||||||
|
line-height: 21px;
|
||||||
|
color: rgba(0, 0, 0, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.tablePart {
|
.tablePart {
|
||||||
height: calc(60% - 20px);
|
height: calc(60% - 20px);
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:deep(.ant-card-body) {
|
||||||
|
padding: unset;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
@@ -14,7 +14,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="contant">
|
<div class="contant">
|
||||||
<div class="chartsPart">
|
<div class="chartsPart">
|
||||||
<div class="ballChart"></div>
|
<div class="ballChart" ref="ballChartRef"></div>
|
||||||
<div class="pillarChart" ref="pillarChartRef"></div>
|
<div class="pillarChart" ref="pillarChartRef"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tablePart">
|
<div class="tablePart">
|
||||||
@@ -50,6 +50,7 @@
|
|||||||
import type { Dayjs } from 'dayjs';
|
import type { Dayjs } from 'dayjs';
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import categoryDeatil from './categoryDeatil.vue';
|
import categoryDeatil from './categoryDeatil.vue';
|
||||||
|
import 'echarts-liquidfill';
|
||||||
defineOptions({
|
defineOptions({
|
||||||
energyType: 'all', // 与页面路由name一致缓存才可生效
|
energyType: 'all', // 与页面路由name一致缓存才可生效
|
||||||
});
|
});
|
||||||
@@ -190,8 +191,25 @@
|
|||||||
chartInstance = echarts.init(pillarChartRef.value);
|
chartInstance = echarts.init(pillarChartRef.value);
|
||||||
chartInstance.setOption(option);
|
chartInstance.setOption(option);
|
||||||
};
|
};
|
||||||
|
const ballChartRef = ref(null);
|
||||||
|
let ballChartInstance: echarts.ECharts | null = null;
|
||||||
|
const drawSQ = () => {
|
||||||
|
ballChartInstance = echarts.init(ballChartRef.value);
|
||||||
|
const option = {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'liquidFill',
|
||||||
|
data: [0.6, 0.5, 0.4, 0.3],
|
||||||
|
radius: '80%',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
ballChartInstance = echarts.init(ballChartRef.value);
|
||||||
|
ballChartInstance.setOption(option);
|
||||||
|
};
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
drawPillarChart();
|
drawPillarChart();
|
||||||
|
drawSQ();
|
||||||
}, 500);
|
}, 500);
|
||||||
// 新增节点
|
// 新增节点
|
||||||
const visible = ref(false);
|
const visible = ref(false);
|
||||||
|
Reference in New Issue
Block a user