Merge branch 'temp' of http://123.60.103.97:3000/xuziqiang/SaaS-lib into temp
This commit is contained in:
zhaohy
@@ -49,6 +49,7 @@ export enum carbonInventoryCheck {
|
|||||||
createOrUpdate = '/carbon-smart/api/carbon/report/createOrUpdate',
|
createOrUpdate = '/carbon-smart/api/carbon/report/createOrUpdate',
|
||||||
findById = '/carbon-smart/api/carbon/report/findById',
|
findById = '/carbon-smart/api/carbon/report/findById',
|
||||||
delete = '/carbon-smart/api/carbon/report/delete',
|
delete = '/carbon-smart/api/carbon/report/delete',
|
||||||
|
downloadZip = '/carbon-smart/api/carbon/report/downloadZip',
|
||||||
// 填报页面接口
|
// 填报页面接口
|
||||||
// 最左侧碳盘查报告树
|
// 最左侧碳盘查报告树
|
||||||
getCategoryTree = '/carbon-smart/api/carbon/inventory/contact/getCategoryTree',
|
getCategoryTree = '/carbon-smart/api/carbon/inventory/contact/getCategoryTree',
|
||||||
@@ -77,6 +78,8 @@ export enum carbonAssets {
|
|||||||
createOrUpdate = '/carbon-smart/api/carbon/trade/details/createOrUpdate',
|
createOrUpdate = '/carbon-smart/api/carbon/trade/details/createOrUpdate',
|
||||||
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',
|
||||||
|
import = '/carbon-smart/api/carbon/trade/details/import',
|
||||||
|
export = '/carbon-smart/api/carbon/trade/details/export',
|
||||||
}
|
}
|
||||||
// 上传图片接口
|
// 上传图片接口
|
||||||
export enum uploadPic {
|
export enum uploadPic {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
// 设备监测
|
// 设备监测
|
||||||
export enum deviceMonitor {
|
export enum deviceMonitor {
|
||||||
getDeviceGraph = '/carbon-smart/api/monitor/getDeviceGraph',
|
getDeviceGraph = '/carbon-smart/api/monitor/getDeviceGraph',
|
||||||
getDevicePointToMonitor = '/carbon-smart//api/monitor/getDevicePointToMonitor',
|
getDevicePointToMonitor = '/carbon-smart/api/monitor/getDevicePointToMonitor',
|
||||||
}
|
}
|
||||||
|
|
||||||
// 能耗监测
|
// 能耗监测
|
||||||
|
|||||||
10
hx-ai-intelligent/src/icon/xianshiqi.svg
Normal file
10
hx-ai-intelligent/src/icon/xianshiqi.svg
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="37.921875" height="30.218994140625" viewBox="0 0 37.921875 30.218994140625" fill="none">
|
||||||
|
<path d="M37.6256 11.8506L0.296264 11.8506C0.133319 11.8506 0 11.9839 0 12.1469L0 21.9236C0 22.5791 0.529573 23.1086 1.18506 23.1086L17.4796 23.1086C17.6426 23.1086 17.7759 23.242 17.7759 23.4049L17.7759 26.3676C17.7759 26.5305 17.6426 26.6638 17.4796 26.6638L10.9618 26.6638C10.7988 26.6638 10.6655 26.7972 10.6655 26.9601L10.6655 28.8118C10.6655 28.9747 10.7988 29.108 10.9618 29.108L17.4796 29.108C17.6426 29.108 17.7759 29.2413 17.7759 29.4043L17.7759 30.0709C17.7759 30.1523 17.8425 30.219 17.924 30.219L19.9979 30.219C20.0793 30.219 20.146 30.1523 20.146 30.0709L20.146 29.4043C20.146 29.2413 20.2793 29.108 20.4422 29.108L26.9601 29.108C27.123 29.108 27.2563 28.9747 27.2563 28.8118L27.2563 26.9601C27.2563 26.7972 27.123 26.6638 26.9601 26.6638L20.4422 26.6638C20.2793 26.6638 20.146 26.5305 20.146 26.3676L20.146 23.4049C20.146 23.242 20.2793 23.1086 20.4422 23.1086L36.7368 23.1086C37.3923 23.1086 37.9219 22.5791 37.9219 21.9236L37.9219 12.1469C37.9219 11.9839 37.7885 11.8506 37.6256 11.8506ZM4.74023 16.5908C4.74023 15.9353 5.2698 15.4057 5.92529 15.4057C6.58078 15.4057 7.11035 15.9353 7.11035 16.5908C7.11035 17.2463 6.58078 17.7759 5.92529 17.7759C5.2698 17.7759 4.74023 17.2463 4.74023 16.5908ZM32.8335 17.4278C32.6187 17.6425 32.3225 17.7759 31.9966 17.7759L10.6655 17.7759C10.01 17.7759 9.48046 17.2463 9.48046 16.5908C9.48046 15.9353 10.01 15.4057 10.6655 15.4057L31.9966 15.4057C32.6521 15.4057 33.1816 15.9353 33.1816 16.5908C33.1816 16.9167 33.0483 17.213 32.8335 17.4278ZM36.7368 0L1.18506 0C0.529573 0 0 0.529572 0 1.18507L0 10.9618C0 11.1247 0.133319 11.2581 0.296264 11.2581L37.6256 11.2581C37.7885 11.2581 37.9219 11.1247 37.9219 10.9618L37.9219 1.18507C37.9219 0.529572 37.3923 0 36.7368 0ZM4.74023 4.74022C4.74023 4.08473 5.2698 3.55516 5.92529 3.55516C6.58078 3.55516 7.11035 4.08473 7.11035 4.74022C7.11035 5.39571 6.58078 5.92529 5.92529 5.92529C5.2698 5.92529 4.74023 5.39571 4.74023 4.74022ZM32.8335 5.57718C32.6187 5.79196 32.3225 5.92529 31.9966 5.92529L10.6655 5.92529C10.01 5.92529 9.48046 5.39571 9.48046 4.74022C9.48046 4.08473 10.01 3.55516 10.6655 3.55516L31.9966 3.55516C32.6521 3.55516 33.1816 4.08473 33.1816 4.74022C33.1816 5.06613 33.0483 5.36238 32.8335 5.57718Z" fill="url(#linear_fill_0_5271)" >
|
||||||
|
</path>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="linear_fill_0_5271" x1="18.9609375" y1="0" x2="18.9609375" y2="30.218994140625" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop offset="0" stop-color="#2BC69C" />
|
||||||
|
<stop offset="1" stop-color="#0CA87E" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
@@ -1 +1,10 @@
|
|||||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720430904326" class="icon" viewBox="0 0 1354 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3403" xmlns:xlink="http://www.w3.org/1999/xlink" width="21.15625" height="16"><path d="M1034.83248 645.406063l-191.508238 191.508238a53.622507 53.622507 0 0 1-75.964301 0l-191.508238-191.508238a53.622507 53.622507 0 0 1 0-75.964301 53.622507 53.622507 0 0 1 75.965301 0l102.775054 102.775054V303.884205a53.622507 53.622507 0 1 1 107.245014 0v368.332611l95.753119-102.775054a53.622507 53.622507 0 0 1 75.965301 0 53.622507 53.622507 0 0 1 1.276988 75.964301z m262.364587-175.548385a365.141641 365.141641 0 0 0-97.030108-98.94609 378.546518 378.546518 0 0 0-29.364729-123.202867 397.697341 397.697341 0 0 0-89.369178-127.671825 404.719277 404.719277 0 0 0-133.418773-91.28516A408.549242 408.549242 0 0 0 792.894706 0.026a400.251318 400.251318 0 0 0-225.977921 67.665377 410.464224 410.464224 0 0 0-97.669102 91.285161 261.088598 261.088598 0 0 0-63.836412-7.65993 247.044727 247.044727 0 0 0-176.18738 70.857348 245.129745 245.129745 0 0 0-72.134336 202.360139 324.925011 324.925011 0 0 0-84.263225 72.77333A308.965158 308.965158 0 0 0 0.053 702.22054a310.242146 310.242146 0 0 0 97.029107 228.531898 331.307952 331.307952 0 0 0 105.969025 69.58136 330.030964 330.030964 0 0 0 127.670826 23.619782h656.233963A360.034688 360.034688 0 0 0 1242.298572 919.261544a360.034688 360.034688 0 0 0 81.071254-116.181932 354.288741 354.288741 0 0 0 27.449748-138.523725 344.713829 344.713829 0 0 0-54.260501-194.699209z" fill="#16B187" p-id="3404"></path></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="14.6600341796875" viewBox="0 0 20 14.6600341796875" fill="none">
|
||||||
|
<path d="M20 11.96C20 12.2933 19.9433 12.6067 19.83 12.9C19.7167 13.1933 19.56 13.46 19.36 13.7C19.16 13.94 18.9233 14.1367 18.65 14.29C18.3767 14.4433 18.08 14.5467 17.76 14.6L17.76 14.64L17.34 14.64L17.32 14.64L4.34 14.64C4.31333 14.64 4.29667 14.6433 4.29 14.65C4.28333 14.6567 4.26667 14.66 4.24 14.66C4.21333 14.66 4.19333 14.6567 4.18 14.65C4.16667 14.6433 4.14667 14.64 4.12 14.64L4 14.64L4 14.62C3.44 14.5933 2.91667 14.4667 2.43 14.24C1.94333 14.0133 1.52 13.71 1.16 13.33C0.8 12.95 0.516667 12.51 0.31 12.01C0.103333 11.51 -7.45058e-08 10.98 0 10.42C7.45058e-08 9.86 0.103333 9.33333 0.31 8.84C0.516667 8.34666 0.796667 7.91333 1.15 7.54001C1.50333 7.16667 1.91667 6.86 2.39 6.62C2.86333 6.37999 3.37333 6.24001 3.92 6.20001C4.01333 5.33333 4.25333 4.52335 4.64 3.77C5.02667 3.01666 5.52333 2.36 6.13 1.8C6.73667 1.24001 7.43333 0.799988 8.22 0.479996C9.00667 0.160004 9.84667 0 10.74 0C11.6867 0 12.58 0.180008 13.42 0.539993C14.26 0.899994 14.99 1.39333 15.61 2.02C16.23 2.64667 16.72 3.37666 17.08 4.20999C17.44 5.04333 17.62 5.93333 17.62 6.88C17.62 7.30667 17.58 7.72334 17.5 8.13C17.42 8.53668 17.3067 8.92665 17.16 9.3C17.1867 9.3 17.2167 9.29666 17.25 9.29001C17.2833 9.28333 17.3133 9.28 17.34 9.28C17.7133 9.28 18.06 9.35001 18.38 9.48999C18.7 9.62999 18.98 9.81999 19.22 10.06C19.46 10.3 19.65 10.5833 19.79 10.91C19.93 11.2367 20 11.5867 20 11.96L20 11.96ZM13.42 9C13.58 8.73334 13.6267 8.57999 13.56 8.54001C13.4933 8.5 13.3267 8.48001 13.06 8.48001C12.9 8.48001 12.6767 8.47667 12.39 8.47C12.1033 8.46333 11.8867 8.45999 11.74 8.45999C11.5267 8.45999 11.39 8.37332 11.33 8.2C11.27 8.02666 11.24 7.78667 11.24 7.48C11.24 7.05333 11.2367 6.70999 11.23 6.45C11.2233 6.19 11.22 5.90666 11.22 5.59999C11.22 5.25333 11.1967 5 11.15 4.84C11.1033 4.67999 10.9133 4.60001 10.58 4.60001C10.34 4.60001 10.16 4.60333 10.04 4.61C9.92 4.61665 9.75333 4.61998 9.54 4.61998C9.18 4.61998 8.95667 4.72334 8.87 4.93001C8.78333 5.13666 8.74 5.34 8.74 5.53999L8.74 6.17999C8.74 6.35332 8.74333 6.52 8.75 6.68001C8.75667 6.84 8.76 7.00667 8.76 7.17999L8.76 7.75999C8.76 7.97333 8.73333 8.13667 8.68 8.25C8.62667 8.36334 8.5 8.42 8.3 8.42C8.22 8.43332 8.11 8.44333 7.97 8.45C7.83 8.45667 7.68667 8.46333 7.54 8.47C7.39333 8.47667 7.25333 8.48 7.12 8.48001L6.8 8.48001C6.52 8.48001 6.35333 8.56667 6.3 8.74001C6.24667 8.91333 6.33333 9.13333 6.56 9.40001C6.78667 9.67999 7.03 9.98334 7.29 10.31C7.55 10.6367 7.80667 10.9667 8.06 11.3C8.31333 11.6333 8.55667 11.9567 8.79 12.27C9.02333 12.5833 9.24 12.8533 9.44 13.08C9.8 13.48 10.1467 13.4733 10.48 13.06C10.68 12.8333 10.9133 12.54 11.18 12.18C11.4467 11.82 11.72 11.4433 12 11.05C12.28 10.6567 12.5467 10.2767 12.8 9.90999C13.0533 9.54332 13.26 9.24001 13.42 9L13.42 9Z" fill="url(#linear_fill_0_2380)" >
|
||||||
|
</path>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="linear_fill_0_2380" x1="10" y1="0" x2="10" y2="14.6600341796875" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop offset="0" stop-color="#2BC69C" />
|
||||||
|
<stop offset="1" stop-color="#0CA87E" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 3.1 KiB |
21
hx-ai-intelligent/src/icon/zongheshuju.svg
Normal file
21
hx-ai-intelligent/src/icon/zongheshuju.svg
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42" height="42" viewBox="0 0 42 42">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
|
||||||
|
<stop offset="0" stop-color="#50a6ff"/>
|
||||||
|
<stop offset="1" stop-color="#4182fb"/>
|
||||||
|
</linearGradient>
|
||||||
|
<filter id="矩形_8514" x="0" y="0" width="42" height="42" filterUnits="userSpaceOnUse">
|
||||||
|
<feOffset dy="6" input="SourceAlpha"/>
|
||||||
|
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||||
|
<feFlood flood-color="#4886fb" flood-opacity="0.2"/>
|
||||||
|
<feComposite operator="in" in2="blur"/>
|
||||||
|
<feComposite in="SourceGraphic"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<g id="组_21753" data-name="组 21753" transform="translate(-1578 -238)">
|
||||||
|
<g transform="matrix(1, 0, 0, 1, 1578, 238)" filter="url(#矩形_8514)">
|
||||||
|
<rect id="矩形_8514-2" data-name="矩形 8514" width="24" height="24" rx="8" transform="translate(9 3)" fill="url(#linear-gradient)"/>
|
||||||
|
</g>
|
||||||
|
<path id="wodeshenqing" d="M130.422,98.2H123.2a1.211,1.211,0,0,0-1.2,1.215v8.1a1.21,1.21,0,0,0,1.2,1.215h7.221a1.21,1.21,0,0,0,1.2-1.215v-8.1A1.21,1.21,0,0,0,130.422,98.2Zm-3.62,2.041a.606.606,0,1,1-.6.606A.606.606,0,0,1,126.8,100.241Zm-2.6,0a.606.606,0,1,1-.6.606A.6.6,0,0,1,124.206,100.241Zm-.2,2.827h4.429a.406.406,0,0,1,0,.812H124a.406.406,0,0,1,0-.812Zm5.606,3.224H124a.406.406,0,0,1,0-.812h5.606a.406.406,0,0,1,0,.812Zm-.2-4.836a.606.606,0,1,1,.6-.606A.6.6,0,0,1,129.413,101.455Z" transform="translate(1471.873 149.182)" fill="#fff"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -51,10 +51,17 @@
|
|||||||
<a-card>
|
<a-card>
|
||||||
<div class="ns-form-title">
|
<div class="ns-form-title">
|
||||||
<div class="title">交易明细</div>
|
<div class="title">交易明细</div>
|
||||||
<div class="operation">
|
<div class="operation" style="display: flex">
|
||||||
<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-upload
|
||||||
<a-button type="primary" style="margin-left: 6px">导出</a-button>
|
v-model:file-list="importFileList"
|
||||||
|
name="file"
|
||||||
|
accept=".xlsx"
|
||||||
|
:showUploadList="false"
|
||||||
|
:custom-request="importFile">
|
||||||
|
<a-button type="primary" style="margin-left: 6px">导入</a-button>
|
||||||
|
</a-upload>
|
||||||
|
<a-button type="primary" style="margin-left: 6px" @click="exportFile">导出</a-button>
|
||||||
<a-button
|
<a-button
|
||||||
type="primary"
|
type="primary"
|
||||||
style="margin-left: 6px"
|
style="margin-left: 6px"
|
||||||
@@ -196,8 +203,8 @@
|
|||||||
const orgId = ref('');
|
const orgId = ref('');
|
||||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||||
orgId.value = result;
|
orgId.value = result;
|
||||||
const fetch = (api, params = { orgId }) => {
|
const fetch = (api, params = { orgId }, config) => {
|
||||||
return http.post(api, params);
|
return http.post(api, params, config);
|
||||||
};
|
};
|
||||||
// 详情部分变量
|
// 详情部分变量
|
||||||
const selectedRowKeys = ref([]);
|
const selectedRowKeys = ref([]);
|
||||||
@@ -400,6 +407,52 @@
|
|||||||
visible.value = true;
|
visible.value = true;
|
||||||
getDictList();
|
getDictList();
|
||||||
};
|
};
|
||||||
|
const importFileList = ref<UploadProps['fileList']>([]);
|
||||||
|
const importFile = (options: UploadRequestOption) => {
|
||||||
|
const { file, onSuccess, onError } = options;
|
||||||
|
const formData = ref(new FormData());
|
||||||
|
formData.value.append('file', file as any);
|
||||||
|
formData.value.append('orgId', orgId.value);
|
||||||
|
formData.value.append('year', queryParams.value.year);
|
||||||
|
fetch(carbonAssets.import, formData.value)
|
||||||
|
.then((res) => {
|
||||||
|
message.success('操作成功！');
|
||||||
|
getDetailList();
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log('error', error);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const exportFile = () => {
|
||||||
|
const exportQuery = ref({
|
||||||
|
orgId: orgId.value,
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 999,
|
||||||
|
year: queryParams.value.year,
|
||||||
|
ids: selectedRowKeys.value,
|
||||||
|
});
|
||||||
|
const config = {
|
||||||
|
responseType: 'blob',
|
||||||
|
};
|
||||||
|
fetch(carbonAssets.export, exportQuery.value, config)
|
||||||
|
.then((res) => {
|
||||||
|
// 创建一个 URL 对象，指向图片数据的 blob
|
||||||
|
const url = window.URL.createObjectURL(new Blob([res]));
|
||||||
|
// 创建一个 <a> 标签，用于触发下载
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = url;
|
||||||
|
link.setAttribute('download', 'carbonTradeDetails.xlsx'); // 设置下载的文件名
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
|
||||||
|
// 清理 URL 对象
|
||||||
|
window.URL.revokeObjectURL(url);
|
||||||
|
selectedRowKeys.value = []
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error('下载失败：', error);
|
||||||
|
});
|
||||||
|
};
|
||||||
// 上传附件
|
// 上传附件
|
||||||
const fileList = ref<UploadProps['fileList']>([]);
|
const fileList = ref<UploadProps['fileList']>([]);
|
||||||
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
|
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
|
||||||
|
|||||||
@@ -429,7 +429,7 @@
|
|||||||
};
|
};
|
||||||
// 点击数据点的复选框
|
// 点击数据点的复选框
|
||||||
const checkedIds = ref([]);
|
const checkedIds = ref([]);
|
||||||
const emissionType = ref();
|
const emissionList = ref([]);
|
||||||
const checkTreeNode = (checkedKeys, info) => {
|
const checkTreeNode = (checkedKeys, info) => {
|
||||||
checkedTreeNodeKeys.value = checkedKeys;
|
checkedTreeNodeKeys.value = checkedKeys;
|
||||||
checkedIds.value = [];
|
checkedIds.value = [];
|
||||||
@@ -437,7 +437,7 @@
|
|||||||
checkedIds.value.push(item.id);
|
checkedIds.value.push(item.id);
|
||||||
});
|
});
|
||||||
sessionStorage.setItem('checkedTreeNode', checkedIds.value);
|
sessionStorage.setItem('checkedTreeNode', checkedIds.value);
|
||||||
emissionType.value = checkedIds.value.join(',');
|
emissionList.value = checkedIds.value;
|
||||||
mainRef.value?.nsTableRef.reload();
|
mainRef.value?.nsTableRef.reload();
|
||||||
};
|
};
|
||||||
// 点击新增树节点
|
// 点击新增树节点
|
||||||
@@ -522,7 +522,7 @@
|
|||||||
getDefaultIds(items.children);
|
getDefaultIds(items.children);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
emissionType.value = defaultIds.value.join(',');
|
emissionList.value = defaultIds.value.join(',');
|
||||||
checkedIds.value = defaultIds.value;
|
checkedIds.value = defaultIds.value;
|
||||||
sessionStorage.setItem('checkedTreeNode', checkedIds.value);
|
sessionStorage.setItem('checkedTreeNode', checkedIds.value);
|
||||||
};
|
};
|
||||||
@@ -609,7 +609,7 @@
|
|||||||
api: carbonEmissionFactorLibrary.getTableList,
|
api: carbonEmissionFactorLibrary.getTableList,
|
||||||
params: {
|
params: {
|
||||||
orgId,
|
orgId,
|
||||||
emissionType,
|
emissionList,
|
||||||
},
|
},
|
||||||
headerActions: [
|
headerActions: [
|
||||||
{
|
{
|
||||||
@@ -661,10 +661,12 @@
|
|||||||
label: '导出',
|
label: '导出',
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
handle: () => {
|
handle: () => {
|
||||||
|
// console.log( mainRef.value.nsTableRef.tableState.selectedRowKeys)
|
||||||
const exportQuery = {
|
const exportQuery = {
|
||||||
orgId: orgId.value,
|
orgId: orgId.value,
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 999,
|
pageSize: 999,
|
||||||
|
ids: mainRef.value.nsTableRef.tableState.selectedRowKeys,
|
||||||
};
|
};
|
||||||
const config = {
|
const config = {
|
||||||
responseType: 'blob',
|
responseType: 'blob',
|
||||||
@@ -682,6 +684,7 @@
|
|||||||
|
|
||||||
// 清理 URL 对象
|
// 清理 URL 对象
|
||||||
window.URL.revokeObjectURL(url);
|
window.URL.revokeObjectURL(url);
|
||||||
|
mainRef.value.nsTableRef.tableState.selectedRowKeys = [];
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
console.error('下载失败：', error);
|
console.error('下载失败：', error);
|
||||||
|
|||||||
@@ -1,952 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<!-- <a-table
|
|
||||||
:columns="tableColumns"
|
|
||||||
:data-source="data"
|
|
||||||
bordered
|
|
||||||
:pagination="false"
|
|
||||||
:scroll="{ x: 2000 }">
|
|
||||||
<template #bodyCell="{ column, text, record }">
|
|
||||||
<template v-if="column.key === 'action'">
|
|
||||||
<span>
|
|
||||||
<a @click="editData(record)">编辑</a>
|
|
||||||
<a-divider type="vertical" />
|
|
||||||
<a @click="delData(record)">删除</a>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
<template #title>
|
|
||||||
<a-date-picker v-model:value="selectYear" picker="year" @change="changeYearData" valueFormat="YYYY" />
|
|
||||||
<div class="buttonGroup">
|
|
||||||
<a-button type="primary" @click="addNewData">新增</a-button>
|
|
||||||
<a-button type="primary">导入</a-button>
|
|
||||||
<a-button type="primary">导出</a-button>
|
|
||||||
<a-button type="primary">模板下载</a-button>
|
|
||||||
<a-button type="primary" @click="uploadVoucher">上传凭证</a-button>
|
|
||||||
<a-button type="primary">凭证下载</a-button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</a-table> -->
|
|
||||||
<ns-view-list-table
|
|
||||||
v-bind="tableConfig"
|
|
||||||
:model="data"
|
|
||||||
ref="mainRef"
|
|
||||||
:scroll="{ x: 1500, y: 350 }">
|
|
||||||
<!-- <template #bodyCell="{ column, text, record }">
|
|
||||||
<template v-if="column.dataIndex === 'janFlag'">
|
|
||||||
<span v-if="record.janFlag===1" style="color: rgba(243, 97, 99, 1);">{{text}}</span>
|
|
||||||
<span v-else style="color: rgba(57, 215, 287, 1);">{{text}}</span>
|
|
||||||
</template>
|
|
||||||
</template> -->
|
|
||||||
</ns-view-list-table>
|
|
||||||
<!-- <a-pagination
|
|
||||||
:current="queryParams.pageNum"
|
|
||||||
:total="total"
|
|
||||||
:page-size="queryParams.pageSize"
|
|
||||||
style="display: flex;justify-content: center;margin-top: 16px;"
|
|
||||||
:show-size-changer="true"
|
|
||||||
:show-quick-jumper="true"
|
|
||||||
@change="onChange" /> -->
|
|
||||||
<!-- 新增数据库数据 -->
|
|
||||||
<a-drawer
|
|
||||||
:width="500"
|
|
||||||
:visible="visible"
|
|
||||||
:body-style="{ paddingBottom: '80px' }"
|
|
||||||
:footer-style="{ textAlign: 'right' }"
|
|
||||||
destroyOnClose
|
|
||||||
@close="onClose">
|
|
||||||
<a-form
|
|
||||||
ref="formRef"
|
|
||||||
:model="formState"
|
|
||||||
:rules="rules"
|
|
||||||
:label-col="labelCol"
|
|
||||||
:wrapper-col="wrapperCol">
|
|
||||||
<a-form-item ref="name" label="能耗名称" name="energyType">
|
|
||||||
<a-input v-model:value="formState.energyType" placeholder="请输入能源种类" />
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="计量单位" name="unit">
|
|
||||||
<a-cascader v-model:value="formState.unit" :options="measurementUnit" />
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="能耗类型" name="emissionType" :required="isRequired">
|
|
||||||
<a-select v-model:value="formState.emissionType" placeholder="请选择能耗类型">
|
|
||||||
<a-select-option v-for="(item, index) in energyTypeOptions" :key="index" :value="item.dicKey">
|
|
||||||
{{ item.cnValue }}
|
|
||||||
</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="自动采集节点" name="collectionNode">
|
|
||||||
<a-tree-select
|
|
||||||
v-model:value="formState.collectionNode"
|
|
||||||
:tree-line="true"
|
|
||||||
:tree-data="treeData">
|
|
||||||
</a-tree-select>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="计算碳排" name="isComputeCarbon">
|
|
||||||
<a-radio-group v-model:value="formState.isComputeCarbon" @change="changeRadio">
|
|
||||||
<a-radio :value="0">是</a-radio>
|
|
||||||
<a-radio :value="1">否</a-radio>
|
|
||||||
</a-radio-group>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="排放类型" name="emissionType" :required="isRequired">
|
|
||||||
<a-select v-model:value="formState.emissionType" placeholder="请选择排放类型">
|
|
||||||
<a-select-option v-for="(item, index) in emissionTypeDic" :key="index" :value="item.id">
|
|
||||||
{{ item.cnValue }}
|
|
||||||
</a-select-option>
|
|
||||||
</a-select>
|
|
||||||
</a-form-item>
|
|
||||||
<a-row>
|
|
||||||
<a-col :span="24" style="display: flex; justify-content: space-around">
|
|
||||||
<a-form-item
|
|
||||||
label="1月"
|
|
||||||
name="janFlag"
|
|
||||||
:label-col="switchLabelCol"
|
|
||||||
:wrapper-col="switchWrapperCol">
|
|
||||||
<a-switch
|
|
||||||
v-model:checked="formState.janFlag"
|
|
||||||
:checked-value="1"
|
|
||||||
:unCheckedValue="0" />
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
label="2月"
|
|
||||||
name="febFlag"
|
|
||||||
:label-col="switchLabelCol"
|
|
||||||
:wrapper-col="switchWrapperCol">
|
|
||||||
<a-switch
|
|
||||||
v-model:checked="formState.febFlag"
|
|
||||||
:checked-value="1"
|
|
||||||
:unCheckedValue="0" />
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
label="3月"
|
|
||||||
name="marFlag"
|
|
||||||
:label-col="switchLabelCol"
|
|
||||||
:wrapper-col="switchWrapperCol">
|
|
||||||
<a-switch
|
|
||||||
v-model:checked="formState.marFlag"
|
|
||||||
:checked-value="1"
|
|
||||||
:unCheckedValue="0" />
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="24" style="display: flex; justify-content: space-around">
|
|
||||||
<a-form-item
|
|
||||||
label="4月"
|
|
||||||
name="aprFlag"
|
|
||||||
:label-col="switchLabelCol"
|
|
||||||
:wrapper-col="switchWrapperCol">
|
|
||||||
<a-switch
|
|
||||||
v-model:checked="formState.aprFlag"
|
|
||||||
:checked-value="1"
|
|
||||||
:unCheckedValue="0" />
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
label="5月"
|
|
||||||
name="mayFlag"
|
|
||||||
:label-col="switchLabelCol"
|
|
||||||
:wrapper-col="switchWrapperCol">
|
|
||||||
<a-switch
|
|
||||||
v-model:checked="formState.mayFlag"
|
|
||||||
:checked-value="1"
|
|
||||||
:unCheckedValue="0" />
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
label="6月"
|
|
||||||
name="junFlag"
|
|
||||||
:label-col="switchLabelCol"
|
|
||||||
:wrapper-col="switchWrapperCol">
|
|
||||||
<a-switch
|
|
||||||
v-model:checked="formState.junFlag"
|
|
||||||
:checked-value="1"
|
|
||||||
:unCheckedValue="0" />
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="24" style="display: flex; justify-content: space-around">
|
|
||||||
<a-form-item
|
|
||||||
label="7月"
|
|
||||||
name="julFlag"
|
|
||||||
:label-col="switchLabelCol"
|
|
||||||
:wrapper-col="switchWrapperCol">
|
|
||||||
<a-switch
|
|
||||||
v-model:checked="formState.julFlag"
|
|
||||||
:checked-value="1"
|
|
||||||
:unCheckedValue="0" />
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
label="8月"
|
|
||||||
name="augFlag"
|
|
||||||
:label-col="switchLabelCol"
|
|
||||||
:wrapper-col="switchWrapperCol">
|
|
||||||
<a-switch
|
|
||||||
v-model:checked="formState.augFlag"
|
|
||||||
:checked-value="1"
|
|
||||||
:unCheckedValue="0" />
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
label="9月"
|
|
||||||
name="sepFlag"
|
|
||||||
:label-col="switchLabelCol"
|
|
||||||
:wrapper-col="switchWrapperCol">
|
|
||||||
<a-switch
|
|
||||||
v-model:checked="formState.sepFlag"
|
|
||||||
:checked-value="1"
|
|
||||||
:unCheckedValue="0" />
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
<a-col :span="24" style="display: flex; justify-content: space-around">
|
|
||||||
<a-form-item
|
|
||||||
label="10月"
|
|
||||||
name="octFlag"
|
|
||||||
:label-col="switchLabelCol"
|
|
||||||
:wrapper-col="switchWrapperCol">
|
|
||||||
<a-switch
|
|
||||||
v-model:checked="formState.octFlag"
|
|
||||||
:checked-value="1"
|
|
||||||
:unCheckedValue="0" />
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
label="11月"
|
|
||||||
name="novFlag"
|
|
||||||
:label-col="switchLabelCol"
|
|
||||||
:wrapper-col="switchWrapperCol">
|
|
||||||
<a-switch
|
|
||||||
v-model:checked="formState.novFlag"
|
|
||||||
:checked-value="1"
|
|
||||||
:unCheckedValue="0" />
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item
|
|
||||||
label="12月"
|
|
||||||
name="decFlag"
|
|
||||||
:label-col="switchLabelCol"
|
|
||||||
:wrapper-col="switchWrapperCol">
|
|
||||||
<a-switch
|
|
||||||
v-model:checked="formState.decFlag"
|
|
||||||
:checked-value="1"
|
|
||||||
:unCheckedValue="0" />
|
|
||||||
</a-form-item>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
<a-form-item ref="name" label="上传凭证">
|
|
||||||
<a-upload
|
|
||||||
:file-list="fileList"
|
|
||||||
name="file"
|
|
||||||
accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf"
|
|
||||||
@remove="handleFileRemove"
|
|
||||||
:before-upload="beforeUpload"
|
|
||||||
@change="handleChange">
|
|
||||||
<a-button>
|
|
||||||
<upload-outlined></upload-outlined>
|
|
||||||
上传
|
|
||||||
</a-button>
|
|
||||||
</a-upload>
|
|
||||||
</a-form-item>
|
|
||||||
</a-form>
|
|
||||||
<template #footer>
|
|
||||||
<a-button style="margin-right: 8px" @click="onClose">取消</a-button>
|
|
||||||
<a-button type="primary" @click="onSubmit">确定</a-button>
|
|
||||||
</template>
|
|
||||||
</a-drawer>
|
|
||||||
<!-- 上传凭证弹窗 -->
|
|
||||||
<!-- <a-modal :visible="openUpload" title="凭证上传" @ok="handleOk" @cancel="closeOpenUpload">
|
|
||||||
<a-upload-dragger
|
|
||||||
v-model:fileList="fileList"
|
|
||||||
name="file"
|
|
||||||
:multiple="true"
|
|
||||||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
|
||||||
@change="handleChange"
|
|
||||||
@drop="handleDrop"
|
|
||||||
>
|
|
||||||
<p class="ant-upload-drag-icon">
|
|
||||||
<inbox-outlined></inbox-outlined>
|
|
||||||
</p>
|
|
||||||
<p class="ant-upload-hint" style="display: flex;flex-direction: column;">
|
|
||||||
<p>1.仅支持pdf格式文件或文件夹</p>
|
|
||||||
<p>2.文件命名规则为【能源种类_年份】</p>
|
|
||||||
<p>3.每次上传自动覆盖</p>
|
|
||||||
</p>
|
|
||||||
</a-upload-dragger>
|
|
||||||
</a-modal> -->
|
|
||||||
<!-- 凭证下载 -->
|
|
||||||
<a-drawer
|
|
||||||
:visible="downLoadVisible"
|
|
||||||
title="凭证列表"
|
|
||||||
:width="500"
|
|
||||||
@close="onCloseDownLoad"
|
|
||||||
:footer-style="{ textAlign: 'right' }">
|
|
||||||
<div></div>
|
|
||||||
<a-table
|
|
||||||
:columns="downLoadColumns"
|
|
||||||
:data-source="downLoadData"
|
|
||||||
bordered
|
|
||||||
rowKey="id"
|
|
||||||
:rowSelection="{
|
|
||||||
selectedRowKeys: selectedRowKeysSet,
|
|
||||||
onChange: onSelectionChangeSet,
|
|
||||||
}"
|
|
||||||
:pagination="false">
|
|
||||||
<template #bodyCell="{ column, text, record }">
|
|
||||||
<template v-if="column.key === 'action'">
|
|
||||||
<span>
|
|
||||||
<a @click="downLoad(record)">下载</a>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
</a-table>
|
|
||||||
<template #footer>
|
|
||||||
<a-button style="margin-right: 8px" @click="onCloseDownLoad">取消</a-button>
|
|
||||||
<a-button type="primary" @click="onSubmitDownLoad">确定</a-button>
|
|
||||||
</template>
|
|
||||||
</a-drawer>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref, toRaw, defineExpose } from 'vue';
|
|
||||||
import type { Rule } from 'ant-design-vue/es/form';
|
|
||||||
import { Pagination, message, Modal } from 'ant-design-vue';
|
|
||||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
|
||||||
import type { TreeSelectProps, UploadChangeParam, UploadProps } from 'ant-design-vue';
|
|
||||||
import { NsMessage } from '/nerv-lib/component';
|
|
||||||
import dayjs, { Dayjs } from 'dayjs';
|
|
||||||
import { http } from '/nerv-lib/util/http';
|
|
||||||
import { Cookies } from '/nerv-lib/util/cookie';
|
|
||||||
import { tableColumns } from '../config';
|
|
||||||
import {
|
|
||||||
energyConsumption,
|
|
||||||
carbonEmissionFactorLibrary,
|
|
||||||
uploadPic,
|
|
||||||
} from '/@/api/carbonEmissionFactorLibrary';
|
|
||||||
import { dict } from '/@/api';
|
|
||||||
import { group } from '/@/api/deviceManage';
|
|
||||||
defineOptions({
|
|
||||||
energyType: 'EnergyConsumption', // 与页面路由name一致缓存才可生效
|
|
||||||
components: {
|
|
||||||
'a-pagination': Pagination,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const orgId = ref('');
|
|
||||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
|
||||||
orgId.value = result;
|
|
||||||
const fetch = (api, params = { orgId }, config) => {
|
|
||||||
return http.post(api, params, config);
|
|
||||||
};
|
|
||||||
const selectYear = ref<Dayjs>(dayjs(new Date().getFullYear().toString()));
|
|
||||||
const total = ref<number>();
|
|
||||||
const queryParams = ref({
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
orgId: orgId.value,
|
|
||||||
year: selectYear.value.format('YYYY'),
|
|
||||||
});
|
|
||||||
const isRequired = ref(false);
|
|
||||||
const visible = ref(false);
|
|
||||||
const openUpload = ref<boolean>(false);
|
|
||||||
const data = ref([]);
|
|
||||||
interface FormState {
|
|
||||||
energyType: string;
|
|
||||||
unit: string;
|
|
||||||
collectionNode: string;
|
|
||||||
emissionType: string | undefined;
|
|
||||||
isComputeCarbon: string;
|
|
||||||
janFlag: string;
|
|
||||||
febFlag: string;
|
|
||||||
marFlag: string;
|
|
||||||
aprFlag: string;
|
|
||||||
mayFlag: string;
|
|
||||||
junFlag: string;
|
|
||||||
julFlag: string;
|
|
||||||
augFlag: string;
|
|
||||||
sepFlag: string;
|
|
||||||
octFlag: string;
|
|
||||||
novFlag: string;
|
|
||||||
decFlag: string;
|
|
||||||
}
|
|
||||||
const formRef = ref();
|
|
||||||
const labelCol = { span: 5 };
|
|
||||||
const wrapperCol = { span: 19 };
|
|
||||||
const switchLabelCol = { span: 10 };
|
|
||||||
const switchWrapperCol = { span: 14 };
|
|
||||||
const formState = ref({
|
|
||||||
orgId: orgId.value,
|
|
||||||
});
|
|
||||||
// 定义form表单的必填
|
|
||||||
const rules: Record<string, Rule[]> = {
|
|
||||||
energyType: [{ required: true, message: '请输入能源种类', trigger: 'change' }],
|
|
||||||
isComputeCarbon: [{ required: true, message: '请选择是否计算碳排', trigger: 'change' }],
|
|
||||||
unit: [{ required: true, message: '请选择计量单位', trigger: 'change' }],
|
|
||||||
};
|
|
||||||
// 排放类型的变量
|
|
||||||
const emissionTypeDic = ref();
|
|
||||||
// 计量单位的变量
|
|
||||||
const measurementUnit = ref([]);
|
|
||||||
// 定义自动采集节点数的变量
|
|
||||||
const treeData = ref<TreeSelectProps['treeData']>([]);
|
|
||||||
// 年份选择改变触发
|
|
||||||
const changeYearData = () => {
|
|
||||||
queryParams.value.year = selectYear.value;
|
|
||||||
getTableList();
|
|
||||||
};
|
|
||||||
const mainRef = ref();
|
|
||||||
const year = selectYear.value.format('YYYY');
|
|
||||||
const tableConfig = ref({
|
|
||||||
title: '能耗统计',
|
|
||||||
api: energyConsumption.pageList,
|
|
||||||
params: queryParams.value,
|
|
||||||
headerActions: [
|
|
||||||
{
|
|
||||||
label: '新增',
|
|
||||||
name: 'userAdd',
|
|
||||||
type: 'primary',
|
|
||||||
handle: () => {
|
|
||||||
getDictList();
|
|
||||||
visible.value = true;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '导入',
|
|
||||||
type: 'primary',
|
|
||||||
name: 'userImport',
|
|
||||||
handle: () => {},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '导出',
|
|
||||||
type: 'primary',
|
|
||||||
name: 'userExports',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '模板下载',
|
|
||||||
type: 'primary',
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// label: '上传凭证',
|
|
||||||
// type: 'primary',
|
|
||||||
// handle: () => {
|
|
||||||
// openUpload.value = true;
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
{
|
|
||||||
label: '凭证下载',
|
|
||||||
type: 'primary',
|
|
||||||
handle: () => {
|
|
||||||
fetch(energyConsumption.voucherDownloadList, { bizType: 3 }).then((res) => {
|
|
||||||
downLoadData.value = res.data;
|
|
||||||
});
|
|
||||||
downLoadVisible.value = true;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
title: '序号',
|
|
||||||
customRender: (text: any) => {
|
|
||||||
return text.index + 1;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '能源种类',
|
|
||||||
dataIndex: 'energyType',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '计量单位',
|
|
||||||
className: 'unitName',
|
|
||||||
dataIndex: 'unitName',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '全年',
|
|
||||||
dataIndex: 'yearly',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '1月',
|
|
||||||
dataIndex: 'jan',
|
|
||||||
// customRender: ({ text }: { text: string }) => {
|
|
||||||
// return <span :style="{ color: getColor(text) }">{text}</span>;
|
|
||||||
// }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '2月',
|
|
||||||
dataIndex: 'feb',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '3月',
|
|
||||||
dataIndex: 'mar',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '4月',
|
|
||||||
dataIndex: 'apr',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '5月',
|
|
||||||
dataIndex: 'may',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '6月',
|
|
||||||
dataIndex: 'jun',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '7月',
|
|
||||||
dataIndex: 'jul',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '8月',
|
|
||||||
dataIndex: 'aug',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '9月',
|
|
||||||
dataIndex: 'sep',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '10月',
|
|
||||||
dataIndex: 'oct',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '11月',
|
|
||||||
dataIndex: 'nov',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '12月',
|
|
||||||
dataIndex: 'dec',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
columnActions: {
|
|
||||||
title: '操作',
|
|
||||||
actions: [
|
|
||||||
{
|
|
||||||
label: '编辑',
|
|
||||||
name: 'userEdit',
|
|
||||||
handle: (record: any) => {
|
|
||||||
getDictList();
|
|
||||||
visible.value = true;
|
|
||||||
fetch(energyConsumption.findById, { id: record.id }).then((res) => {
|
|
||||||
if (res.data.emissionType) {
|
|
||||||
res.data.emissionType = Number(res.data.emissionType);
|
|
||||||
}
|
|
||||||
if (res.data.unit) {
|
|
||||||
let selectDevice = ref([Number(res.data.unit)]);
|
|
||||||
findParentIds(measurementUnit.value, res.data.unit, selectDevice.value);
|
|
||||||
res.data.unit = selectDevice;
|
|
||||||
}
|
|
||||||
formState.value = res.data;
|
|
||||||
emissionType.value = res.data.emissionType;
|
|
||||||
if (formState.value.isComputeCarbon === 0) {
|
|
||||||
isRequired.value = true;
|
|
||||||
} else {
|
|
||||||
isRequired.value = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
fetch(uploadPic.select, { bizId: record.id, bizType: 3 }).then((res) => {
|
|
||||||
fileList.value = res.data.map((item) => ({
|
|
||||||
uid: item.id.toString(), // 使用文件的id作为唯一标识
|
|
||||||
name: item.fileName, // 文件名
|
|
||||||
status: 'done', // 设置默认状态为已完成
|
|
||||||
type: 'done',
|
|
||||||
url: item.filePath, // 文件的URL，这里假设用示例的URL格式
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '删除',
|
|
||||||
name: 'userDelete',
|
|
||||||
dynamicParams: { id: 'id' },
|
|
||||||
confirm: true,
|
|
||||||
isReload: true,
|
|
||||||
api: energyConsumption.del,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
|
|
||||||
formConfig: {
|
|
||||||
schemas: [
|
|
||||||
{
|
|
||||||
field: 'year',
|
|
||||||
label: '年份',
|
|
||||||
component: 'NsDatePicker',
|
|
||||||
componentProps: {
|
|
||||||
picker: 'year',
|
|
||||||
valueFormat: 'YYYY',
|
|
||||||
defaultValue: selectYear.value.format('YYYY'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
params: {},
|
|
||||||
},
|
|
||||||
rowKey: 'id',
|
|
||||||
});
|
|
||||||
const getColor = (value: string | number): string => {
|
|
||||||
debugger;
|
|
||||||
if (typeof value === 'string') {
|
|
||||||
switch (value) {
|
|
||||||
case 'active':
|
|
||||||
return 'green';
|
|
||||||
case 'inactive':
|
|
||||||
return 'red';
|
|
||||||
default:
|
|
||||||
return 'black';
|
|
||||||
}
|
|
||||||
} else if (typeof value === 'number') {
|
|
||||||
return value > 30 ? 'blue' : 'purple'; // 示例：根据年龄设置颜色
|
|
||||||
}
|
|
||||||
return 'black';
|
|
||||||
};
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
mainRef,
|
|
||||||
});
|
|
||||||
// 定义一个递归函数来查找每一级的id 设备类型回显 层级方法
|
|
||||||
function findParentIds(tree: any, targetId: number, result: any) {
|
|
||||||
for (let item of tree) {
|
|
||||||
if (item.children && item.children.length > 0) {
|
|
||||||
if (item.children.some((child: any) => child.value === targetId)) {
|
|
||||||
result.unshift(item.value); // 将当前节点的id添加到结果数组的最前面
|
|
||||||
findParentIds(tree, item.value, result); // 递归查找父级节点的id
|
|
||||||
break; // 找到后可以退出循环
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 获取表格数据
|
|
||||||
const getTableList = () => {
|
|
||||||
fetch(energyConsumption.pageList, queryParams.value).then((res) => {
|
|
||||||
data.value = res.data.records;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 分页器
|
|
||||||
const onChange = (pageNumber: number, size: number) => {
|
|
||||||
queryParams.value.pageNum = pageNumber;
|
|
||||||
queryParams.value.pageSize = size;
|
|
||||||
mainRef.value?.nsTableRef.reload();
|
|
||||||
};
|
|
||||||
// 计算碳排切换
|
|
||||||
const emissionType = ref();
|
|
||||||
const changeRadio = (e) => {
|
|
||||||
if (e.target.value === 0) {
|
|
||||||
isRequired.value = true;
|
|
||||||
if (emissionType.value) {
|
|
||||||
formState.value.emissionType = emissionType.value;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
isRequired.value = false;
|
|
||||||
formState.value.emissionType = '';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// 点击确定提交
|
|
||||||
const onSubmit = () => {
|
|
||||||
formRef.value
|
|
||||||
.validate()
|
|
||||||
.then(() => {
|
|
||||||
console.log('values', formState, toRaw(formState));
|
|
||||||
formState.value.year = selectYear.value.format('YYYY');
|
|
||||||
if (formState.value.unit) {
|
|
||||||
formState.value.unit = formState.value.unit.join(',').split(',')[1];
|
|
||||||
}
|
|
||||||
if (formState.value.id) {
|
|
||||||
fetch(energyConsumption.update, formState.value).then((res) => {
|
|
||||||
if (fileList.value.length !== 0) {
|
|
||||||
const formData = ref(new FormData());
|
|
||||||
fileList.value.forEach((file) => {
|
|
||||||
if (file.type !== 'done') {
|
|
||||||
formData.value.append('files', file.originFileObj);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
formData.value.append('bizType', 3);
|
|
||||||
formData.value.append('bizId', formState.value.id);
|
|
||||||
delIds.value.forEach((item) => {
|
|
||||||
formData.value.append('deleteList', item);
|
|
||||||
});
|
|
||||||
fetch(uploadPic.uploadfiles, formData.value)
|
|
||||||
.then((res) => {
|
|
||||||
message.success('操作成功！');
|
|
||||||
visible.value = false;
|
|
||||||
delIds.value = [];
|
|
||||||
formState.value = {
|
|
||||||
orgId: orgId.value,
|
|
||||||
};
|
|
||||||
mainRef.value?.nsTableRef.reload();
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.log('error', error);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
visible.value = false;
|
|
||||||
delIds.value = [];
|
|
||||||
formState.value = {
|
|
||||||
orgId: orgId.value,
|
|
||||||
};
|
|
||||||
message.success('操作成功！');
|
|
||||||
mainRef.value?.nsTableRef.reload();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
fetch(energyConsumption.creat, formState.value).then((res) => {
|
|
||||||
if (res.data === '新增数据已存在') {
|
|
||||||
visible.value = false;
|
|
||||||
delIds.value = [];
|
|
||||||
NsMessage.warning(res.data);
|
|
||||||
} else {
|
|
||||||
if (fileList.value.length !== 0) {
|
|
||||||
const formData = ref(new FormData());
|
|
||||||
fileList.value.forEach((file) => {
|
|
||||||
formData.value.append('files', file.originFileObj);
|
|
||||||
});
|
|
||||||
formData.value.append('bizType', 3);
|
|
||||||
formData.value.append('bizId', res.data);
|
|
||||||
fetch(uploadPic.uploadfiles, formData.value)
|
|
||||||
.then((res) => {
|
|
||||||
message.success('操作成功！');
|
|
||||||
visible.value = false;
|
|
||||||
delIds.value = [];
|
|
||||||
formState.value = {
|
|
||||||
orgId: orgId.value,
|
|
||||||
};
|
|
||||||
mainRef.value?.nsTableRef.reload();
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.log('error', error);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
visible.value = false;
|
|
||||||
delIds.value = [];
|
|
||||||
formState.value = {
|
|
||||||
orgId: orgId.value,
|
|
||||||
};
|
|
||||||
message.success('操作成功！');
|
|
||||||
mainRef.value?.nsTableRef.reload();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.log('error', error);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const energyTypeOptions = ref([]);
|
|
||||||
// 获取字典值
|
|
||||||
const getDictList = async () => {
|
|
||||||
// 获取能耗类型
|
|
||||||
const options = await dict({ params: { dicKey: 'ENERGY_TYPE' } });
|
|
||||||
energyTypeOptions.value = options.data.data
|
|
||||||
console.log(energyTypeOptions);
|
|
||||||
debugger
|
|
||||||
// 获取排放类型的数据
|
|
||||||
fetch(energyConsumption.getDicList, { grp: 'EMISSION_TYPE' }).then((res) => {
|
|
||||||
emissionTypeDic.value = res.data;
|
|
||||||
});
|
|
||||||
// 获取计量单位的数据
|
|
||||||
fetch(carbonEmissionFactorLibrary.dictionaryUnitManagement, { grp: 'MEASUREMENT_UNIT' }).then(
|
|
||||||
(res) => {
|
|
||||||
measurementUnit.value = res.data;
|
|
||||||
measurementUnit.value = measurementUnit.value.map((item) => ({
|
|
||||||
value: item.id,
|
|
||||||
label: item.cnValue,
|
|
||||||
children: item.children
|
|
||||||
? item.children.map((child) => ({
|
|
||||||
value: child.id,
|
|
||||||
label: child.cnValue,
|
|
||||||
}))
|
|
||||||
: [],
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
);
|
|
||||||
// 获取自动采集节点的数据
|
|
||||||
fetch(group.queryDeviceGroupTree, { energyType: 'ELECTRICITY_USAGE', orgId: orgId.value }).then(
|
|
||||||
(res) => {
|
|
||||||
treeData.value = res.data;
|
|
||||||
treeData.value = treeData.value.map((item) => ({
|
|
||||||
value: item.id,
|
|
||||||
label: item.pointName,
|
|
||||||
children: item.children
|
|
||||||
? item.children.map((child) => ({
|
|
||||||
value: child.id,
|
|
||||||
label: child.pointName,
|
|
||||||
}))
|
|
||||||
: [],
|
|
||||||
}));
|
|
||||||
},
|
|
||||||
);
|
|
||||||
};
|
|
||||||
// 点击新增按钮
|
|
||||||
const addNewData = () => {
|
|
||||||
getDictList();
|
|
||||||
visible.value = true;
|
|
||||||
};
|
|
||||||
// 点击编辑按钮
|
|
||||||
const editData = (record) => {
|
|
||||||
getDictList();
|
|
||||||
visible.value = true;
|
|
||||||
fetch(energyConsumption.findById, { id: record.id }).then((res) => {
|
|
||||||
if (res.data.unitName) {
|
|
||||||
res.data.unitName = res.data.unitName.split(',');
|
|
||||||
}
|
|
||||||
formState.value = res.data;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 点击删除
|
|
||||||
const delData = (record) => {
|
|
||||||
Modal.confirm({
|
|
||||||
title: '警告',
|
|
||||||
content: '确定要删除吗?',
|
|
||||||
okText: '确定',
|
|
||||||
okType: 'primary',
|
|
||||||
cancelText: '取消',
|
|
||||||
onOk() {
|
|
||||||
fetch(energyConsumption.del, { id: record.id }).then((res) => {
|
|
||||||
message.success('操作成功！');
|
|
||||||
mainRef.value?.nsTableRef.reload();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
onCancel() {
|
|
||||||
console.log('Cancel');
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 关闭新增抽屉
|
|
||||||
const onClose = () => {
|
|
||||||
visible.value = false;
|
|
||||||
delIds.value = [];
|
|
||||||
formState.value = {
|
|
||||||
orgId: orgId.value,
|
|
||||||
};
|
|
||||||
formRef.value.resetFields();
|
|
||||||
};
|
|
||||||
// 点击上传凭证按钮
|
|
||||||
const uploadVoucher = () => {
|
|
||||||
openUpload.value = true;
|
|
||||||
};
|
|
||||||
// 上传凭证弹窗点击确定
|
|
||||||
const handleOk = (e: MouseEvent) => {
|
|
||||||
console.log(e);
|
|
||||||
openUpload.value = false;
|
|
||||||
};
|
|
||||||
// 上传凭证相关方法及变量
|
|
||||||
const fileList = ref<UploadProps['fileList']>([]);
|
|
||||||
const beforeUpload: UploadProps['beforeUpload'] = (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 delIds = ref([]);
|
|
||||||
const handleFileRemove = (file) => {
|
|
||||||
delIds.value.push(file.uid);
|
|
||||||
const newFileList = [];
|
|
||||||
fileList.value.forEach((item) => {
|
|
||||||
if (item.uid !== file.uid) {
|
|
||||||
newFileList.push(item);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
fileList.value = newFileList;
|
|
||||||
};
|
|
||||||
// 关闭上传凭证弹窗
|
|
||||||
const closeOpenUpload = () => {
|
|
||||||
openUpload.value = false;
|
|
||||||
};
|
|
||||||
// 凭证下载
|
|
||||||
const downLoadVisible = ref(false);
|
|
||||||
const downLoadColumns = [
|
|
||||||
{
|
|
||||||
title: '序号',
|
|
||||||
customRender: (text: any) => {
|
|
||||||
return text.index + 1;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '能源类型',
|
|
||||||
dataIndex: 'bizName',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '文件名',
|
|
||||||
dataIndex: 'fileName',
|
|
||||||
ellipsis: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
key: 'action',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const downLoadData = ref([]);
|
|
||||||
const selectedRowKeysSet = ref([]);
|
|
||||||
const onSelectionChangeSet = (selectedKeys, selectedRows) => {
|
|
||||||
selectedRowKeysSet.value = selectedKeys;
|
|
||||||
};
|
|
||||||
const downLoad = (record) => {
|
|
||||||
const deleteId = ref(new FormData());
|
|
||||||
deleteId.value.append('id', record.id);
|
|
||||||
const config = {
|
|
||||||
headers: {
|
|
||||||
responseType: 'blob',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
fetch(uploadPic.download, deleteId.value, config)
|
|
||||||
.then((res) => {
|
|
||||||
// 创建一个 URL 对象，指向图片数据的 blob
|
|
||||||
const url = window.URL.createObjectURL(new Blob([res.data]));
|
|
||||||
// 创建一个 <a> 标签，用于触发下载
|
|
||||||
const link = document.createElement('a');
|
|
||||||
link.href = url;
|
|
||||||
link.setAttribute('download', record.fileName); // 设置下载的文件名
|
|
||||||
document.body.appendChild(link);
|
|
||||||
link.click();
|
|
||||||
|
|
||||||
// 清理 URL 对象
|
|
||||||
window.URL.revokeObjectURL(url);
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.error('下载图片失败：', error);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const onSubmitDownLoad = () => {
|
|
||||||
const deleteIds = ref(new FormData());
|
|
||||||
selectedRowKeysSet.value.forEach((item) => {
|
|
||||||
deleteIds.value.append('ids', item);
|
|
||||||
});
|
|
||||||
fetch(uploadPic.downloadZip, deleteIds.value)
|
|
||||||
.then((res) => {
|
|
||||||
// 创建一个 URL 对象，指向图片数据的 blob
|
|
||||||
const url = window.URL.createObjectURL(new Blob([res.data]));
|
|
||||||
// 创建一个 <a> 标签，用于触发下载
|
|
||||||
const link = document.createElement('a');
|
|
||||||
link.href = url;
|
|
||||||
debugger;
|
|
||||||
link.setAttribute('download', ''); // 设置下载的文件名
|
|
||||||
document.body.appendChild(link);
|
|
||||||
link.click();
|
|
||||||
|
|
||||||
// 清理 URL 对象
|
|
||||||
window.URL.revokeObjectURL(url);
|
|
||||||
onCloseDownLoad();
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.error('下载图片失败：', error);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const onCloseDownLoad = () => {
|
|
||||||
selectedRowKeysSet.value = [];
|
|
||||||
downLoadVisible.value = false;
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style scoped lang="less">
|
|
||||||
:deep(.ant-table-title) {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
:deep(.ant-table-container) {
|
|
||||||
padding: 0px 16px;
|
|
||||||
}
|
|
||||||
.buttonGroup {
|
|
||||||
margin-left: 1vw;
|
|
||||||
width: 30vw;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style scoped>
|
|
||||||
th.column-money,
|
|
||||||
td.column-money {
|
|
||||||
text-align: right !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -210,22 +210,33 @@
|
|||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
</a-table>
|
</a-table>
|
||||||
<div class="ns-form-title"><div class="title">凭证上传</div></div>
|
<div class="ns-form-title" style="display: flex">
|
||||||
|
<div class="title">凭证上传</div>
|
||||||
|
</div>
|
||||||
<a-upload
|
<a-upload
|
||||||
:file-list="fileList"
|
:file-list="fileList"
|
||||||
name="file"
|
name="file"
|
||||||
accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf"
|
accept=".pdf"
|
||||||
@remove="handleFileRemove"
|
@remove="handleFileRemove"
|
||||||
:before-upload="beforeUpload"
|
:before-upload="beforeUpload"
|
||||||
@change="handleChange">
|
@change="handleChange">
|
||||||
<a-button>
|
<a-button style="margin-left: 6px; color: #4f95ff; border-color: #4f95ff">
|
||||||
<upload-outlined></upload-outlined>
|
<upload-outlined></upload-outlined>
|
||||||
上传
|
上传凭证
|
||||||
</a-button>
|
</a-button>
|
||||||
</a-upload>
|
</a-upload>
|
||||||
<div style="display: flex; flex-direction: column">
|
<div
|
||||||
|
style="
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: rgba(250, 250, 250, 1);
|
||||||
|
color: rgba(153, 153, 153, 1);
|
||||||
|
padding: 5px;
|
||||||
|
">
|
||||||
<span>1.仅支持pdf格式文件或文件夹</span>
|
<span>1.仅支持pdf格式文件或文件夹</span>
|
||||||
<span>2.文件名命名规则为【能源种类_年份】</span>
|
<span>2.文件名命名规则为【能源种类_年份】</span>
|
||||||
|
<span>3.每次上传自动覆盖</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<template #footer>
|
<template #footer>
|
||||||
@@ -289,7 +300,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, toRaw, defineExpose, createVNode } from 'vue';
|
import { ref, toRaw, defineExpose, createVNode } from 'vue';
|
||||||
import type { Rule } from 'ant-design-vue/es/form';
|
import type { Rule } from 'ant-design-vue/es/form';
|
||||||
import { Pagination, message, Modal } from 'ant-design-vue';
|
import { Pagination, message, Modal, Upload } from 'ant-design-vue';
|
||||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||||
import type { TreeSelectProps, UploadChangeParam, UploadProps } from 'ant-design-vue';
|
import type { TreeSelectProps, UploadChangeParam, UploadProps } from 'ant-design-vue';
|
||||||
import { NsMessage } from '/nerv-lib/component';
|
import { NsMessage } from '/nerv-lib/component';
|
||||||
@@ -1058,19 +1069,29 @@
|
|||||||
};
|
};
|
||||||
// 上传凭证相关方法及变量
|
// 上传凭证相关方法及变量
|
||||||
const fileList = ref<UploadProps['fileList']>([]);
|
const fileList = ref<UploadProps['fileList']>([]);
|
||||||
|
const isValidFileName = (filename: string): boolean => {
|
||||||
|
const regex = /^[\s\S]+_\d{4}\.pdf$/;
|
||||||
|
return regex.test(filename);
|
||||||
|
};
|
||||||
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
|
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
|
||||||
|
const filename = file.name;
|
||||||
|
if (!isValidFileName(filename)) {
|
||||||
|
message.error('文件名不符合规则');
|
||||||
|
return Upload.LIST_IGNORE; // 阻止文件上传
|
||||||
|
}
|
||||||
return false;
|
return false;
|
||||||
};
|
};
|
||||||
const handleChange = (info: UploadChangeParam) => {
|
const handleChange = (info: UploadChangeParam) => {
|
||||||
fileList.value = [...info.fileList];
|
// fileList.value = [...info.fileList];
|
||||||
if (info.file.status !== 'uploading') {
|
const { fileList: newFileList } = info;
|
||||||
console.log(info.file, info.fileList);
|
delIds.value.push(info.fileList[0].uid);
|
||||||
}
|
// 删除fileList中的第一条数据
|
||||||
if (info.file.status === 'done') {
|
if (newFileList.length > 1) {
|
||||||
message.success(`${info.file.name} 文件上传成功`);
|
newFileList.shift(); // 删除第一条数据
|
||||||
} else if (info.file.status === 'error') {
|
|
||||||
message.error(`${info.file.name} 文件上传失败`);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 更新fileList
|
||||||
|
fileList.value = [...newFileList];
|
||||||
};
|
};
|
||||||
const delIds = ref([]);
|
const delIds = ref([]);
|
||||||
const handleFileRemove = (file) => {
|
const handleFileRemove = (file) => {
|
||||||
@@ -1229,6 +1250,13 @@
|
|||||||
.grey-background.ant-switch .ant-switch-handle {
|
.grey-background.ant-switch .ant-switch-handle {
|
||||||
background-color: rgba(238, 238, 238, 1) !important;
|
background-color: rgba(238, 238, 238, 1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ant-switch-checked {
|
||||||
|
background-color: rgba(57, 215, 187, 1) !important;
|
||||||
|
}
|
||||||
|
.grey-background.ant-switch .ant-switch-handle {
|
||||||
|
background-color: rgba(238, 238, 238, 1) !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
th.column-money,
|
th.column-money,
|
||||||
|
|||||||
@@ -0,0 +1,587 @@
|
|||||||
|
<template>
|
||||||
|
<div class="main">
|
||||||
|
<div class="left">
|
||||||
|
<div class="top">
|
||||||
|
<a-form style="width: 100%; margin: 0 auto">
|
||||||
|
<div class="ns-form-title"><div class="title">因子分类</div></div>
|
||||||
|
<div style="padding: 0 16px !important; width: 100%">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24" style="margin-bottom: 16px">
|
||||||
|
<a-input-search
|
||||||
|
v-model:value="searchValue"
|
||||||
|
placeholder="请输入关键词"
|
||||||
|
@search="onSearchTreeData" />
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</a-form>
|
||||||
|
<a-tree
|
||||||
|
v-if="gData && gData.length > 0"
|
||||||
|
:expanded-keys="expandedKeys"
|
||||||
|
:auto-expand-parent="autoExpandParent"
|
||||||
|
:selectedKeys="selectedKeys"
|
||||||
|
:tree-data="gData"
|
||||||
|
show-line
|
||||||
|
@expand="onExpand"
|
||||||
|
@select="onSelect"
|
||||||
|
style="padding: 0 16px !important">
|
||||||
|
<template #title="data">
|
||||||
|
<span
|
||||||
|
v-if="data.energyType && searchValue && data.energyType.indexOf(searchValue) > -1">
|
||||||
|
{{ data.energyType.substring(0, data.energyType.indexOf(searchValue)) }}
|
||||||
|
<span style="color: #f50">{{ searchValue }}</span>
|
||||||
|
{{
|
||||||
|
data.energyType.substring(data.energyType.indexOf(searchValue) + searchValue.length)
|
||||||
|
}}
|
||||||
|
</span>
|
||||||
|
<span v-else>{{ data.energyType }}</span>
|
||||||
|
</template>
|
||||||
|
</a-tree>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<!-- <a-table
|
||||||
|
:columns="columns"
|
||||||
|
:data-source="tableData"
|
||||||
|
bordered
|
||||||
|
:pagination="false">
|
||||||
|
<template #bodyCell="{ column, text, record }">
|
||||||
|
<template v-if="column.key === 'action'">
|
||||||
|
<span>
|
||||||
|
<a @click="editData(record)">编辑</a>
|
||||||
|
<a-divider type="vertical" />
|
||||||
|
<a @click="delData(record)">删除</a>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<template #title>
|
||||||
|
<div class="ns-table-title"><span>排放因子库</span></div>
|
||||||
|
<div class="buttonGroup">
|
||||||
|
<a-button type="primary" @click="addNewData">新增</a-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</a-table> -->
|
||||||
|
<ns-view-list-table
|
||||||
|
v-bind="tableConfig"
|
||||||
|
:model="tableData"
|
||||||
|
ref="mainRef"
|
||||||
|
:scroll="{ x: 1000 }" />
|
||||||
|
<a-pagination
|
||||||
|
:current="queryParams.pageNum"
|
||||||
|
:total="total"
|
||||||
|
:page-size="queryParams.pageSize"
|
||||||
|
style="display: flex; justify-content: center; margin-top: 16px"
|
||||||
|
:show-size-changer="true"
|
||||||
|
:show-quick-jumper="true"
|
||||||
|
@change="onChange" />
|
||||||
|
<!-- 新增/编辑 -->
|
||||||
|
<a-drawer
|
||||||
|
:width="500"
|
||||||
|
:visible="visible"
|
||||||
|
:body-style="{ paddingBottom: '80px' }"
|
||||||
|
:footer-style="{ textAlign: 'right' }"
|
||||||
|
destroyOnClose
|
||||||
|
@close="onClose">
|
||||||
|
<a-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formState"
|
||||||
|
:rules="rules"
|
||||||
|
:label-col="labelCol"
|
||||||
|
:wrapper-col="wrapperCol">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<a-form-item ref="name" label="日期范围" name="dateRange">
|
||||||
|
<a-range-picker
|
||||||
|
v-model:value="formState.dateRange"
|
||||||
|
picker="month"
|
||||||
|
valueFormat="YYYY-MM" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="24">
|
||||||
|
<a-form-item ref="name" label="排放因子" name="emissionFactors">
|
||||||
|
<ns-input v-model:value="formState.emissionFactors" disabled />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<span
|
||||||
|
key=""
|
||||||
|
style="font-size: 16px; font-weight: 700; color: rgba(51, 51, 51, 1); text-align: left">
|
||||||
|
因子列表
|
||||||
|
</span>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item ref="name">
|
||||||
|
<ns-input style="margin-top: 5px" v-model:value="selectData" @change="keyChange" />
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
<a-table
|
||||||
|
:columns="drawerColumns"
|
||||||
|
:data-source="newTableData"
|
||||||
|
bordered
|
||||||
|
rowKey="id"
|
||||||
|
:rowSelection="{
|
||||||
|
selectedRowKeys: selectedRowKeys,
|
||||||
|
onChange: onSelectionChange,
|
||||||
|
type: 'radio',
|
||||||
|
}"
|
||||||
|
:pagination="false">
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, watch, toRaw, defineExpose } from 'vue';
|
||||||
|
import type { TreeProps } from 'ant-design-vue';
|
||||||
|
import { Pagination, Modal } from 'ant-design-vue';
|
||||||
|
import { columns, drawerColumns } from '../config';
|
||||||
|
import { http } from '/nerv-lib/util/http';
|
||||||
|
import {
|
||||||
|
quickCalculation,
|
||||||
|
carbonEmissionFactorLibrary,
|
||||||
|
} from '/@/api/carbonEmissionFactorLibrary';
|
||||||
|
import { or } from '@vueuse/core';
|
||||||
|
defineOptions({
|
||||||
|
energyType: 'quickCalculation', // 与页面路由name一致缓存才可生效
|
||||||
|
components: {
|
||||||
|
'a-pagination': Pagination,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const orgId = ref('');
|
||||||
|
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||||
|
orgId.value = result;
|
||||||
|
const fetch = (api, params = { orgId }) => {
|
||||||
|
return http.post(api, params);
|
||||||
|
};
|
||||||
|
const mainRef = ref();
|
||||||
|
// 数结构
|
||||||
|
const x = 3;
|
||||||
|
const y = 2;
|
||||||
|
const z = 1;
|
||||||
|
const genData: TreeProps['treeData'] = [];
|
||||||
|
|
||||||
|
const generateData = (_level: number, _preKey?: string, _tns?: TreeProps['treeData']) => {
|
||||||
|
const preKey = _preKey || '0';
|
||||||
|
const tns = _tns || genData;
|
||||||
|
|
||||||
|
const children = [];
|
||||||
|
for (let i = 0; i < x; i++) {
|
||||||
|
const key = `${preKey}-${i}`;
|
||||||
|
tns.push({ title: key, key });
|
||||||
|
if (i < y) {
|
||||||
|
children.push(key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (_level < 0) {
|
||||||
|
return tns;
|
||||||
|
}
|
||||||
|
const level = _level - 1;
|
||||||
|
children.forEach((key, index) => {
|
||||||
|
tns[index].children = [];
|
||||||
|
return generateData(level, key, tns[index].children);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
generateData(z);
|
||||||
|
|
||||||
|
const dataList: TreeProps['treeData'] = [];
|
||||||
|
const generateList = (data: TreeProps['treeData']) => {
|
||||||
|
for (let i = 0; i < data.length; i++) {
|
||||||
|
const node = data[i];
|
||||||
|
const key = node.key;
|
||||||
|
dataList.push({ key, title: key });
|
||||||
|
if (node.children) {
|
||||||
|
generateList(node.children);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
generateList(genData);
|
||||||
|
|
||||||
|
const getParentKey = (
|
||||||
|
key: string | number,
|
||||||
|
tree: TreeProps['treeData'],
|
||||||
|
): string | number | undefined => {
|
||||||
|
let parentKey;
|
||||||
|
for (let i = 0; i < tree.length; i++) {
|
||||||
|
const node = tree[i];
|
||||||
|
if (node.children) {
|
||||||
|
if (node.children.some((item) => item.key === key)) {
|
||||||
|
parentKey = node.key;
|
||||||
|
} else if (getParentKey(key, node.children)) {
|
||||||
|
parentKey = getParentKey(key, node.children);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return parentKey;
|
||||||
|
};
|
||||||
|
const expandedKeys = ref<(string | number)[]>(['0-0']);
|
||||||
|
const selectedKeys = ref<string[]>(['0-0-0']);
|
||||||
|
const searchValue = ref<string>('');
|
||||||
|
const autoExpandParent = ref<boolean>(true);
|
||||||
|
const gData = ref<TreeProps['treeData']>(genData);
|
||||||
|
|
||||||
|
const onExpand = (keys: string[]) => {
|
||||||
|
expandedKeys.value = keys;
|
||||||
|
autoExpandParent.value = false;
|
||||||
|
};
|
||||||
|
// 被选中的树节点
|
||||||
|
const energyType = ref();
|
||||||
|
const onSelect = (selectedKey: string[], info: any) => {
|
||||||
|
selectedKeys.value = selectedKey;
|
||||||
|
if (info.selected) {
|
||||||
|
energyType.value = info.node.id;
|
||||||
|
statsId.value = info.node.id;
|
||||||
|
mainRef.value?.nsTableRef.reload();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(searchValue, (value) => {
|
||||||
|
const expanded = dataList
|
||||||
|
.map((item: TreeProps['treeData'][number]) => {
|
||||||
|
if (item.title.indexOf(value) > -1) {
|
||||||
|
return getParentKey(item.key, gData.value);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
})
|
||||||
|
.filter((item, i, self) => item && self.indexOf(item) === i);
|
||||||
|
expandedKeys.value = expanded;
|
||||||
|
searchValue.value = value;
|
||||||
|
autoExpandParent.value = true;
|
||||||
|
});
|
||||||
|
// 查询因子分类树数据
|
||||||
|
const onSearchTreeData = () => {};
|
||||||
|
const statsId = ref();
|
||||||
|
// 获取因子分类树数据
|
||||||
|
const getTreeData = () => {
|
||||||
|
fetch(quickCalculation.carbonQuickTree, { orgId: orgId.value }).then((res) => {
|
||||||
|
gData.value = res.data;
|
||||||
|
energyType.value = gData.value[0].children[0].id;
|
||||||
|
statsId.value = gData.value[0].children[0].id;
|
||||||
|
mainRef.value?.nsTableRef.reload();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
getTreeData();
|
||||||
|
// 列表数据
|
||||||
|
const total = ref<number>();
|
||||||
|
const queryParams = ref({
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
orgId: orgId.value,
|
||||||
|
});
|
||||||
|
const tableData = ref([]);
|
||||||
|
const emissionSources = ref();
|
||||||
|
const tableConfig = ref({
|
||||||
|
title: '排放因子库',
|
||||||
|
api: quickCalculation.queryCarbonEmissionPage,
|
||||||
|
params: {
|
||||||
|
orgId,
|
||||||
|
energyType,
|
||||||
|
},
|
||||||
|
headerActions: [
|
||||||
|
{
|
||||||
|
label: '新增',
|
||||||
|
name: 'userAdd',
|
||||||
|
type: 'primary',
|
||||||
|
handle: () => {
|
||||||
|
visible.value = true;
|
||||||
|
// getNewTable();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: '序号',
|
||||||
|
customRender: (text: any) => {
|
||||||
|
return text.index + 1;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '因子值',
|
||||||
|
dataIndex: 'emissionFactors',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '计量单位',
|
||||||
|
className: 'carbonEmissionSuffix',
|
||||||
|
dataIndex: 'carbonEmissionSuffix',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '更新时间',
|
||||||
|
className: 'updateTime',
|
||||||
|
dataIndex: 'updateTime',
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '启用时间',
|
||||||
|
className: 'startTime',
|
||||||
|
dataIndex: 'startTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '结束时间',
|
||||||
|
className: 'endTime',
|
||||||
|
dataIndex: 'endTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '数据来源',
|
||||||
|
className: 'dataSources',
|
||||||
|
dataIndex: 'dataSources',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
columnActions: {
|
||||||
|
title: '操作',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
label: '编辑',
|
||||||
|
name: 'userEdit',
|
||||||
|
handle: (record: any) => {
|
||||||
|
selectedRowKeys.value = [record.factorId];
|
||||||
|
formState.value.id = record.id;
|
||||||
|
formState.value.emissionFactors = record.emissionFactors;
|
||||||
|
formState.value.dateRange = [record.startTime, record.endTime];
|
||||||
|
formState.value.factorId = record.factorId;
|
||||||
|
visible.value = true;
|
||||||
|
emissionSources.value = record.emissionSources;
|
||||||
|
queryData.value.emissionSources = emissionSources.value;
|
||||||
|
getNewTable();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '删除',
|
||||||
|
name: 'userDelete',
|
||||||
|
dynamicParams: { id: 'id' },
|
||||||
|
confirm: true,
|
||||||
|
isReload: true,
|
||||||
|
api: quickCalculation.del,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
rowKey: 'id',
|
||||||
|
});
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
getTreeData,
|
||||||
|
});
|
||||||
|
// 获取列表数据
|
||||||
|
const getTableList = () => {
|
||||||
|
fetch(quickCalculation.queryCarbonEmissionPage, queryParams.value).then((res) => {
|
||||||
|
tableData.value = res.data.records;
|
||||||
|
total.value = res.data.total;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 分页器
|
||||||
|
const onChange = (pageNumber: number, size: number) => {
|
||||||
|
queryParams.value.pageNum = pageNumber;
|
||||||
|
queryParams.value.pageSize = size;
|
||||||
|
mainRef.value?.nsTableRef.reload();
|
||||||
|
};
|
||||||
|
// 新增/编辑
|
||||||
|
const formRef = ref();
|
||||||
|
const labelCol = { span: 6 };
|
||||||
|
const wrapperCol = { span: 18 };
|
||||||
|
const formState = ref({
|
||||||
|
orgId: orgId.value,
|
||||||
|
});
|
||||||
|
const visible = ref(false);
|
||||||
|
|
||||||
|
// 定义form表单的必填
|
||||||
|
const rules: Record<string, Rule[]> = {
|
||||||
|
dateRange: [{ required: true, message: '请选择日期范围', trigger: 'change' }],
|
||||||
|
emissionFactors: [{ required: true, message: '请输入能源种类', trigger: 'change' }],
|
||||||
|
};
|
||||||
|
// 点击新增按钮
|
||||||
|
const addNewData = () => {
|
||||||
|
visible.value = true;
|
||||||
|
// getNewTable();
|
||||||
|
};
|
||||||
|
// 获取新增页面的列表
|
||||||
|
const selectedRowKeys = ref([]);
|
||||||
|
const onSelectionChange = (selectedKeys, selectedRows) => {
|
||||||
|
selectedRowKeys.value = selectedKeys;
|
||||||
|
formState.value.emissionFactors = selectedRows[0].emissionFactors;
|
||||||
|
formState.value.factorId = selectedRows[0].id;
|
||||||
|
};
|
||||||
|
const queryData = ref({
|
||||||
|
orgId: orgId.value,
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 999,
|
||||||
|
});
|
||||||
|
const newTableData = ref([]);
|
||||||
|
const getNewTable = () => {
|
||||||
|
fetch(carbonEmissionFactorLibrary.getTableList, queryData.value).then((res) => {
|
||||||
|
newTableData.value = res.data.records;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const selectData = ref();
|
||||||
|
const keyChange = () => {
|
||||||
|
if (selectData.value === '') {
|
||||||
|
queryData.value.emissionSources = emissionSources.value;
|
||||||
|
} else {
|
||||||
|
queryData.value.emissionSources = selectData.value;
|
||||||
|
}
|
||||||
|
getNewTable();
|
||||||
|
};
|
||||||
|
// 点击编辑按钮
|
||||||
|
const editData = (record) => {
|
||||||
|
selectedRowKeys.value = [record.factorId];
|
||||||
|
formState.value.id = record.id;
|
||||||
|
formState.value.emissionFactors = record.emissionFactors;
|
||||||
|
formState.value.dateRange = [record.startTime, record.endTime];
|
||||||
|
formState.value.factorId = record.factorId;
|
||||||
|
visible.value = true;
|
||||||
|
getNewTable();
|
||||||
|
};
|
||||||
|
// 点击确定提交
|
||||||
|
const onSubmit = () => {
|
||||||
|
formRef.value
|
||||||
|
.validate()
|
||||||
|
.then(() => {
|
||||||
|
formState.value.statsId = statsId.value;
|
||||||
|
formState.value.startTime = formState.value.dateRange[0];
|
||||||
|
formState.value.endTime = formState.value.dateRange[1];
|
||||||
|
console.log('values', formState, toRaw(formState));
|
||||||
|
if (formState.value.id) {
|
||||||
|
fetch(quickCalculation.update, formState.value).then((res) => {
|
||||||
|
visible.value = false;
|
||||||
|
selectedRowKeys.value = [];
|
||||||
|
formState.value = {};
|
||||||
|
formRef.value.resetFields();
|
||||||
|
mainRef.value?.nsTableRef.reload();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
fetch(quickCalculation.creat, formState.value).then((res) => {
|
||||||
|
visible.value = false;
|
||||||
|
selectedRowKeys.value = [];
|
||||||
|
formState.value = {};
|
||||||
|
formRef.value.resetFields();
|
||||||
|
mainRef.value?.nsTableRef.reload();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.log('error', error);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 删除数据
|
||||||
|
const delData = (record) => {
|
||||||
|
Modal.confirm({
|
||||||
|
title: '警告',
|
||||||
|
content: '确定要删除吗?',
|
||||||
|
okText: '确定',
|
||||||
|
okType: 'primary',
|
||||||
|
cancelText: '取消',
|
||||||
|
onOk() {
|
||||||
|
fetch(quickCalculation.del, { id: record.id }).then((res) => {
|
||||||
|
message.success('操作成功！');
|
||||||
|
getTableList();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onCancel() {
|
||||||
|
console.log('Cancel');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 关闭新增抽屉
|
||||||
|
const onClose = () => {
|
||||||
|
visible.value = false;
|
||||||
|
selectedRowKeys.value = [];
|
||||||
|
formState.value = {};
|
||||||
|
formRef.value.resetFields();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.main {
|
||||||
|
background-color: @ns-content-bg;
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.left {
|
||||||
|
width: 300px;
|
||||||
|
margin-right: @ns-gap;
|
||||||
|
min-width: fit-content;
|
||||||
|
> div {
|
||||||
|
background-color: @white;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.top {
|
||||||
|
position: relative;
|
||||||
|
.addTreeNode {
|
||||||
|
width: 100%;
|
||||||
|
padding: 16px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
height: 100%;
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
:deep(.ant-table-container) {
|
||||||
|
padding: 0px 16px;
|
||||||
|
}
|
||||||
|
:deep(.ns-table-main) {
|
||||||
|
margin-top: unset !important;
|
||||||
|
}
|
||||||
|
.top {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.ns-form-title {
|
||||||
|
font-weight: bold;
|
||||||
|
user-select: text;
|
||||||
|
padding: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
border-bottom: 1px solid #e9e9e9;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
text-align: left;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
font-weight: bold;
|
||||||
|
user-select: text;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 9px;
|
||||||
|
}
|
||||||
|
.title::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
height: 13px;
|
||||||
|
width: 3px;
|
||||||
|
border-radius: 1px;
|
||||||
|
background-color: #2778ff;
|
||||||
|
}
|
||||||
|
:deep(.ant-table-title) {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.ns-table-title {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.buttonGroup {
|
||||||
|
margin-left: 1vw;
|
||||||
|
width: 5vw;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style scoped>
|
||||||
|
th.column-money,
|
||||||
|
td.column-money {
|
||||||
|
text-align: right !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -66,14 +66,14 @@
|
|||||||
:model="tableData"
|
:model="tableData"
|
||||||
ref="mainRef"
|
ref="mainRef"
|
||||||
:scroll="{ x: 1000 }" />
|
:scroll="{ x: 1000 }" />
|
||||||
<a-pagination
|
<!-- <a-pagination
|
||||||
:current="queryParams.pageNum"
|
:current="queryParams.pageNum"
|
||||||
:total="total"
|
:total="total"
|
||||||
:page-size="queryParams.pageSize"
|
:page-size="queryParams.pageSize"
|
||||||
style="display: flex; justify-content: center; margin-top: 16px"
|
style="display: flex; justify-content: center; margin-top: 16px"
|
||||||
:show-size-changer="true"
|
:show-size-changer="true"
|
||||||
:show-quick-jumper="true"
|
:show-quick-jumper="true"
|
||||||
@change="onChange" />
|
@change="onChange" /> -->
|
||||||
<!-- 新增/编辑 -->
|
<!-- 新增/编辑 -->
|
||||||
<a-drawer
|
<a-drawer
|
||||||
:width="500"
|
:width="500"
|
||||||
@@ -499,14 +499,19 @@
|
|||||||
background-color: @ns-content-bg;
|
background-color: @ns-content-bg;
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
padding: 16px;
|
||||||
}
|
}
|
||||||
.left {
|
.left {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
margin-right: @ns-gap;
|
margin-right: @ns-gap;
|
||||||
min-width: fit-content;
|
min-width: fit-content;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: rgba(255, 255, 255, 1);
|
||||||
|
box-shadow: 0px 2px 20px rgb(69 123 234 / 20%);
|
||||||
> div {
|
> div {
|
||||||
background-color: @white;
|
background-color: @white;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -526,6 +531,11 @@
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
|
border-radius: 8px !important;
|
||||||
|
box-shadow: 0px 2px 20px rgb(69 123 234 / 20%);
|
||||||
|
:deep(.ns-table-main) {
|
||||||
|
border-radius: 8px !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
:deep(.ant-table-container) {
|
:deep(.ant-table-container) {
|
||||||
padding: 0px 16px;
|
padding: 0px 16px;
|
||||||
|
|||||||
@@ -248,7 +248,7 @@
|
|||||||
</a-drawer>
|
</a-drawer>
|
||||||
<!-- 点击编辑弹出框 -->
|
<!-- 点击编辑弹出框 -->
|
||||||
<a-drawer
|
<a-drawer
|
||||||
:width="700"
|
:width="500"
|
||||||
:visible="editData"
|
:visible="editData"
|
||||||
:body-style="{ paddingBottom: '80px' }"
|
:body-style="{ paddingBottom: '80px' }"
|
||||||
:footer-style="{ textAlign: 'right' }"
|
:footer-style="{ textAlign: 'right' }"
|
||||||
@@ -260,7 +260,7 @@
|
|||||||
:label-col="labelCol"
|
:label-col="labelCol"
|
||||||
:wrapper-col="wrapperCol">
|
:wrapper-col="wrapperCol">
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col :span="12">
|
<a-col :span="24">
|
||||||
<a-form-item ref="name" label="数据来源" name="dataSources">
|
<a-form-item ref="name" label="数据来源" name="dataSources">
|
||||||
<a-select
|
<a-select
|
||||||
ref="select"
|
ref="select"
|
||||||
@@ -272,14 +272,14 @@
|
|||||||
</a-select>
|
</a-select>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="12">
|
<a-col :span="24">
|
||||||
<a-form-item ref="name" label="消耗量" name="consumption">
|
<a-form-item ref="name" label="消耗量" name="consumption">
|
||||||
<ns-input v-model:value="editFormState.consumption" :disabled="canEdit" />
|
<ns-input v-model:value="editFormState.consumption" :disabled="canEdit" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
<a-row v-if="automatic">
|
<a-row v-if="automatic">
|
||||||
<a-col :span="12">
|
<a-col :span="24">
|
||||||
<a-form-item ref="name" label="采集节点" name="collectionNode">
|
<a-form-item ref="name" label="采集节点" name="collectionNode">
|
||||||
<a-tree-select
|
<a-tree-select
|
||||||
v-model:value="editFormState.collectionNode"
|
v-model:value="editFormState.collectionNode"
|
||||||
@@ -291,12 +291,12 @@
|
|||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
<a-row>
|
<a-row>
|
||||||
<a-col :span="12">
|
<a-col :span="24">
|
||||||
<a-form-item ref="name" label="因子值" name="factorId">
|
<a-form-item ref="name" label="因子值" name="factorId">
|
||||||
<ns-input v-model:value="editFormState.factorId" />
|
<ns-input v-model:value="editFormState.factorId" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="12">
|
<a-col :span="24">
|
||||||
<a-form-item ref="name" label="关键字" name="emissionFactors">
|
<a-form-item ref="name" label="关键字" name="emissionFactors">
|
||||||
<a-input-search
|
<a-input-search
|
||||||
v-model:value="editFormState.emissionFactors"
|
v-model:value="editFormState.emissionFactors"
|
||||||
@@ -325,24 +325,14 @@
|
|||||||
:current="queryData.pageNum"
|
:current="queryData.pageNum"
|
||||||
:total="total"
|
:total="total"
|
||||||
:page-size="queryData.pageSize"
|
:page-size="queryData.pageSize"
|
||||||
|
:pageSizeOptions="['5']"
|
||||||
style="display: flex; justify-content: center; margin-top: 16px"
|
style="display: flex; justify-content: center; margin-top: 16px"
|
||||||
:show-size-changer="true"
|
:show-size-changer="true"
|
||||||
:show-quick-jumper="true"
|
:show-quick-jumper="true"
|
||||||
@change="onChange" />
|
@change="onChange" />
|
||||||
<!-- <a-upload
|
|
||||||
v-model:file-list="fileList"
|
|
||||||
name="file"
|
|
||||||
accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf"
|
|
||||||
@remove="handleFileRemove"
|
|
||||||
:before-upload="beforeUpload"
|
|
||||||
@change="handleChange">
|
|
||||||
<a-button>
|
|
||||||
<upload-outlined></upload-outlined>
|
|
||||||
点击上传凭证
|
|
||||||
</a-button>
|
|
||||||
</a-upload> -->
|
|
||||||
<a-upload-dragger
|
<a-upload-dragger
|
||||||
v-model:fileList="fileList"
|
v-model:fileList="fileList"
|
||||||
|
accept=".pdf"
|
||||||
name="file"
|
name="file"
|
||||||
@remove="handleFileRemove"
|
@remove="handleFileRemove"
|
||||||
:before-upload="beforeUpload"
|
:before-upload="beforeUpload"
|
||||||
@@ -365,7 +355,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, watch, toRaw, defineEmits, nextTick } from 'vue';
|
import { ref, watch, toRaw, defineEmits, nextTick } from 'vue';
|
||||||
import { http } from '/nerv-lib/util/http';
|
import { http } from '/nerv-lib/util/http';
|
||||||
import { Pagination, Modal, message } from 'ant-design-vue';
|
import { Pagination, Modal, message, Upload } from 'ant-design-vue';
|
||||||
import type { TreeProps, UploadChangeParam } from 'ant-design-vue';
|
import type { TreeProps, UploadChangeParam } from 'ant-design-vue';
|
||||||
import {
|
import {
|
||||||
EditOutlined,
|
EditOutlined,
|
||||||
@@ -935,7 +925,7 @@
|
|||||||
const queryData = ref({
|
const queryData = ref({
|
||||||
orgId: orgId.value,
|
orgId: orgId.value,
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 10,
|
pageSize: 5,
|
||||||
});
|
});
|
||||||
const edit = (record) => {
|
const edit = (record) => {
|
||||||
getDictList();
|
getDictList();
|
||||||
@@ -975,6 +965,8 @@
|
|||||||
if (value === '3') {
|
if (value === '3') {
|
||||||
canEdit.value = true;
|
canEdit.value = true;
|
||||||
automatic.value = true;
|
automatic.value = true;
|
||||||
|
} else {
|
||||||
|
automatic.value = false;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
// 定义采集节点数的变量
|
// 定义采集节点数的变量
|
||||||
@@ -997,24 +989,31 @@
|
|||||||
},
|
},
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
const selectNode = (value) => {
|
|
||||||
debugger;
|
|
||||||
};
|
|
||||||
// 上传附件
|
// 上传附件
|
||||||
const fileList = ref<UploadProps['fileList']>([]);
|
const fileList = ref<UploadProps['fileList']>([]);
|
||||||
|
const isValidFileName = (filename: string): boolean => {
|
||||||
|
const regex = /^[\s\S]+_\d{4}\.pdf$/;
|
||||||
|
return regex.test(filename);
|
||||||
|
};
|
||||||
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
|
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
|
||||||
|
const filename = file.name;
|
||||||
|
if (!isValidFileName(filename)) {
|
||||||
|
message.error('文件名不符合规则');
|
||||||
|
return Upload.LIST_IGNORE; // 阻止文件上传
|
||||||
|
}
|
||||||
return false;
|
return false;
|
||||||
};
|
};
|
||||||
const handleChange = (info: UploadChangeParam) => {
|
const handleChange = (info: UploadChangeParam) => {
|
||||||
fileList.value = [...info.fileList];
|
// fileList.value = [...info.fileList];
|
||||||
if (info.file.status !== 'uploading') {
|
const { fileList: newFileList } = info;
|
||||||
console.log(info.file, info.fileList);
|
delIds.value.push(info.fileList[0].uid);
|
||||||
}
|
// 删除fileList中的第一条数据
|
||||||
if (info.file.status === 'done') {
|
if (newFileList.length > 1) {
|
||||||
message.success(`${info.file.name} 文件上传成功`);
|
newFileList.shift(); // 删除第一条数据
|
||||||
} else if (info.file.status === 'error') {
|
|
||||||
message.error(`${info.file.name} 文件上传失败`);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 更新fileList
|
||||||
|
fileList.value = [...newFileList];
|
||||||
};
|
};
|
||||||
const delIds = ref([]);
|
const delIds = ref([]);
|
||||||
const handleFileRemove = (file) => {
|
const handleFileRemove = (file) => {
|
||||||
|
|||||||
@@ -68,8 +68,8 @@
|
|||||||
const orgId = ref('');
|
const orgId = ref('');
|
||||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||||
orgId.value = result;
|
orgId.value = result;
|
||||||
const fetch = (api, params = { orgId }) => {
|
const fetch = (api, params = { orgId }, config) => {
|
||||||
return http.post(api, params);
|
return http.post(api, params, config);
|
||||||
};
|
};
|
||||||
// 判断展示哪个页面
|
// 判断展示哪个页面
|
||||||
const isMainPage = ref(true);
|
const isMainPage = ref(true);
|
||||||
@@ -205,7 +205,30 @@
|
|||||||
{
|
{
|
||||||
label: '下载',
|
label: '下载',
|
||||||
name: 'download',
|
name: 'download',
|
||||||
handle: (record: any) => {},
|
handle: (record: any) => {
|
||||||
|
const deleteId = ref(new FormData());
|
||||||
|
deleteId.value.append('id', record.id);
|
||||||
|
const config = {
|
||||||
|
responseType: 'blob',
|
||||||
|
};
|
||||||
|
fetch(carbonInventoryCheck.downloadZip, deleteId.value, config)
|
||||||
|
.then((res) => {
|
||||||
|
// 创建一个 URL 对象，指向图片数据的 blob
|
||||||
|
const url = window.URL.createObjectURL(new Blob([res]));
|
||||||
|
// 创建一个 <a> 标签，用于触发下载
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = url;
|
||||||
|
link.setAttribute('download', '碳盘查凭证.zip'); // 设置下载的文件名
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
|
||||||
|
// 清理 URL 对象
|
||||||
|
window.URL.revokeObjectURL(url);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error('下载图片失败：', error);
|
||||||
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '删除',
|
label: '删除',
|
||||||
|
|||||||
@@ -100,8 +100,20 @@
|
|||||||
const drawEcharts = () => {
|
const drawEcharts = () => {
|
||||||
data.value.forEach((item, index) => {
|
data.value.forEach((item, index) => {
|
||||||
const chart = echarts.init(document.getElementById(`ydlChart_${index}`)!);
|
const chart = echarts.init(document.getElementById(`ydlChart_${index}`)!);
|
||||||
|
const bottomColor = [
|
||||||
const handred = 100;
|
'rgba(219, 222, 232, 1)',
|
||||||
|
'rgba(221, 226, 223, 1)',
|
||||||
|
'rgba(233, 228, 219, 1)',
|
||||||
|
'rgba(221, 216, 235, 1)',
|
||||||
|
'rgba(240, 228, 228, 1)',
|
||||||
|
];
|
||||||
|
const mianColor = [
|
||||||
|
'rgba(24, 106, 255, 1)',
|
||||||
|
'rgba(58, 194, 127, 1)',
|
||||||
|
'rgba(249, 183, 50, 1)',
|
||||||
|
'rgba(120, 76, 212, 1)',
|
||||||
|
'rgba(255, 55, 103, 1)',
|
||||||
|
];
|
||||||
let point = parseInt(item.budgetAchievement.replace('%', ''));
|
let point = parseInt(item.budgetAchievement.replace('%', ''));
|
||||||
const option = {
|
const option = {
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
@@ -127,55 +139,61 @@
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
// tooltip: {
|
|
||||||
// formatter: function (params) {
|
|
||||||
// return params.name + '：' + params.percent + ' %';
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: 'circle',
|
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
clockWise: true,
|
|
||||||
radius: ['40%', '50%'],
|
radius: ['40%', '50%'],
|
||||||
center: ['50%', '40%'],
|
center: ['50%', '40%'],
|
||||||
itemStyle: {
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
label: {
|
show: false,
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
hoverAnimation: false,
|
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
value: point,
|
name: '',
|
||||||
name: '占比',
|
value: 100,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: '#4FADFD',
|
color: bottomColor[index],
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '剩余',
|
|
||||||
value: handred - point,
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: '#E1E8EE',
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
zlevel: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'main',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['38%', '55%'],
|
||||||
|
center: ['50%', '40%'],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: point,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'center',
|
||||||
|
fontSize: 40,
|
||||||
|
},
|
||||||
|
labelLine: { show: false },
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: mianColor[index],
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowColor: mianColor[index],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 100 - point,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: 'transparent',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
zlevel: 2,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -459,7 +459,26 @@
|
|||||||
barWidth: 18,
|
barWidth: 18,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: '#6395f9',
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(45, 178, 246, 1)', // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(255, 255, 255, 0)', // 100% 处的颜色
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false,
|
||||||
|
),
|
||||||
|
borderWidth: 2,
|
||||||
|
borderColor: 'rgba(45, 178, 246, 1)',
|
||||||
|
padding: 0,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data: lastYearActualUsageList.value,
|
data: lastYearActualUsageList.value,
|
||||||
@@ -469,9 +488,26 @@
|
|||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 18,
|
barWidth: 18,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
color: new echarts.graphic.LinearGradient(
|
||||||
color: '#62daab',
|
0,
|
||||||
},
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(28, 184, 142, 1)', // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(255, 255, 255, 0)', // 100% 处的颜色
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false,
|
||||||
|
),
|
||||||
|
borderWidth: 2,
|
||||||
|
borderColor: 'rgba(28, 184, 142, 1)',
|
||||||
|
padding: 0,
|
||||||
},
|
},
|
||||||
data: actualUsageList.value,
|
data: actualUsageList.value,
|
||||||
},
|
},
|
||||||
@@ -481,7 +517,7 @@
|
|||||||
smooth: true, // 开启平滑曲线
|
smooth: true, // 开启平滑曲线
|
||||||
symbol: 'none', //标记的图形为实心圆
|
symbol: 'none', //标记的图形为实心圆
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#f4664a',
|
color: 'rgba(255, 188, 70, 1)',
|
||||||
width: 2,
|
width: 2,
|
||||||
},
|
},
|
||||||
data: budgetList.value,
|
data: budgetList.value,
|
||||||
@@ -492,7 +528,7 @@
|
|||||||
smooth: true, // 开启平滑曲线
|
smooth: true, // 开启平滑曲线
|
||||||
symbol: 'none', //标记的图形为实心圆
|
symbol: 'none', //标记的图形为实心圆
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#f4664a',
|
color: 'rgba(195, 142, 255, 1)',
|
||||||
width: 2,
|
width: 2,
|
||||||
},
|
},
|
||||||
data: referenceValueList.value,
|
data: referenceValueList.value,
|
||||||
@@ -559,6 +595,7 @@
|
|||||||
.contant {
|
.contant {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100% - 5vh);
|
height: calc(100% - 5vh);
|
||||||
|
overflow: auto;
|
||||||
.chartsPart {
|
.chartsPart {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 63%;
|
height: 63%;
|
||||||
|
|||||||
@@ -260,25 +260,45 @@
|
|||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '实际用量',
|
name: '实际用量',
|
||||||
type: 'bar',
|
type: 'pictorialBar',
|
||||||
barWidth: 18,
|
symbol: 'rect',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
|
color: '#6395f9',
|
||||||
|
},
|
||||||
|
symbolRepeat: true,
|
||||||
|
symbolSize: [14, 4],
|
||||||
|
symbolMargin: 0.5,
|
||||||
|
symbolPosition: 'start',
|
||||||
|
z: -20,
|
||||||
|
data: actualUsage.value,
|
||||||
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
color: '#6395f9',
|
show: false,
|
||||||
|
position: 'top',
|
||||||
|
verticalAlign: 'top',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data: actualUsage.value,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '预算量',
|
name: '预算量',
|
||||||
type: 'bar',
|
type: 'pictorialBar',
|
||||||
barWidth: 18,
|
symbol: 'rect',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
|
color: '#62daab',
|
||||||
|
},
|
||||||
|
symbolRepeat: true,
|
||||||
|
symbolSize: [14, 4],
|
||||||
|
symbolMargin: 0.5,
|
||||||
|
symbolPosition: 'start',
|
||||||
|
z: -20,
|
||||||
|
data: budget.value,
|
||||||
|
label: {
|
||||||
normal: {
|
normal: {
|
||||||
color: '#62daab',
|
show: false,
|
||||||
|
position: 'top',
|
||||||
|
verticalAlign: 'top',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data: budget.value,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '基准线',
|
name: '基准线',
|
||||||
|
|||||||
@@ -1,18 +1,25 @@
|
|||||||
<!-- eslint-disable vue/multi-word-component-names -->
|
<!-- eslint-disable vue/multi-word-component-names -->
|
||||||
<template>
|
<template>
|
||||||
<a-row type="flex" style="display: flex; position: relative">
|
<a-row type="flex" style="display: flex; position: relative; background: #f1f2f6">
|
||||||
<a-col :span="4">
|
<a-col :span="4">
|
||||||
<div style="padding: 0 20px; width: 100%; height: 100%">
|
<div style="width: 100%; height: 100%">
|
||||||
<tree ref="treeRef" />
|
<tree ref="treeRef" />
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="20">
|
<a-col :span="20">
|
||||||
<div style="width: 100%; height: 100%">
|
<div
|
||||||
|
style="
|
||||||
|
width: 98%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #ffffff;
|
||||||
|
margin-left: 1.5%;
|
||||||
|
">
|
||||||
<div class="ns-right-title">
|
<div class="ns-right-title">
|
||||||
<span><ns-icon name="title" size="11" style="margin-right: 3px" />历史数据</span>
|
<span><ns-icon name="title" size="11" style="margin-right: 3px" />历史数据</span>
|
||||||
<div class="button">
|
<div class="button">
|
||||||
<ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" />
|
<ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" />
|
||||||
<ns-icon :name="iconName" size="18" style="margin-right: 10px" @click="change" />
|
<ns-icon :name="iconName" size="15" style="margin-right: 10px" @click="change" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<graph ref="graphRef" v-if="isGraph" />
|
<graph ref="graphRef" v-if="isGraph" />
|
||||||
|
|||||||
@@ -33,7 +33,7 @@
|
|||||||
placeholder="请选择点位"
|
placeholder="请选择点位"
|
||||||
:style="{
|
:style="{
|
||||||
top: '50px',
|
top: '50px',
|
||||||
left: `${divWidth + 40}px`,
|
left: `${divWidth + 55}px`,
|
||||||
zIndex: 9,
|
zIndex: 9,
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
width: `${divWidth}px`,
|
width: `${divWidth}px`,
|
||||||
@@ -44,7 +44,7 @@
|
|||||||
placeholder="请选择频率"
|
placeholder="请选择频率"
|
||||||
:style="{
|
:style="{
|
||||||
top: '50px',
|
top: '50px',
|
||||||
left: `${divWidth * 2 + 50}px`,
|
left: `${divWidth * 2 + 65}px`,
|
||||||
zIndex: 9,
|
zIndex: 9,
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
width: `${divWidth}px`,
|
width: `${divWidth}px`,
|
||||||
@@ -58,7 +58,7 @@
|
|||||||
@calendarChange="onCalendarChange"
|
@calendarChange="onCalendarChange"
|
||||||
:style="{
|
:style="{
|
||||||
top: '50px',
|
top: '50px',
|
||||||
left: `${divWidth * 3 + 60}px`,
|
left: `${divWidth * 3 + 75}px`,
|
||||||
zIndex: 9,
|
zIndex: 9,
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
width: `${divWidth}px`,
|
width: `${divWidth}px`,
|
||||||
@@ -68,7 +68,7 @@
|
|||||||
type="primary"
|
type="primary"
|
||||||
:style="{
|
:style="{
|
||||||
top: '50px',
|
top: '50px',
|
||||||
left: `${divWidth * 4 + 70}px`,
|
left: `${divWidth * 4 + 85}px`,
|
||||||
zIndex: 9,
|
zIndex: 9,
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
}"
|
}"
|
||||||
@@ -212,6 +212,7 @@
|
|||||||
.post(deviceMonitor.getDevicePointToMonitor, {
|
.post(deviceMonitor.getDevicePointToMonitor, {
|
||||||
deviceIds: checkedKeys.value,
|
deviceIds: checkedKeys.value,
|
||||||
orgId: orgId.value,
|
orgId: orgId.value,
|
||||||
|
type: 0,
|
||||||
})
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (res.retcode == 0) {
|
if (res.retcode == 0) {
|
||||||
@@ -390,6 +391,10 @@
|
|||||||
}
|
}
|
||||||
.parent-container {
|
.parent-container {
|
||||||
// position: relative;
|
// position: relative;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #ffffff;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,9 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<a-row type="flex" style="height: 90%">
|
<a-row type="flex" style="height: 100%">
|
||||||
<a-col :span="8" style="height: 100%">
|
<a-col :span="8" style="height: 100%">
|
||||||
<div
|
<div
|
||||||
style="
|
style="
|
||||||
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5); /* 灰色阴影 */
|
box-shadow: 0 0 15px rgba(69, 123, 234, 0.2);
|
||||||
|
border-radius: 10px;
|
||||||
width: 98%;
|
width: 98%;
|
||||||
height: 96%;
|
height: 96%;
|
||||||
margin: 2%;
|
margin: 2%;
|
||||||
@@ -32,7 +33,8 @@
|
|||||||
style="
|
style="
|
||||||
width: 98%;
|
width: 98%;
|
||||||
height: 38%;
|
height: 38%;
|
||||||
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
|
box-shadow: 0 0 15px rgba(69, 123, 234, 0.2);
|
||||||
|
border-radius: 10px;
|
||||||
margin: 1%;
|
margin: 1%;
|
||||||
"></div>
|
"></div>
|
||||||
<div
|
<div
|
||||||
@@ -40,7 +42,8 @@
|
|||||||
style="
|
style="
|
||||||
width: 98%;
|
width: 98%;
|
||||||
height: 57%;
|
height: 57%;
|
||||||
box-shadow: 0 0 0 2px rgba(218, 218, 218, 0.5);
|
box-shadow: 0 0 15px rgba(69, 123, 234, 0.2);
|
||||||
|
border-radius: 10px;
|
||||||
margin: 1%;
|
margin: 1%;
|
||||||
"></div>
|
"></div>
|
||||||
</a-col>
|
</a-col>
|
||||||
@@ -242,7 +245,9 @@
|
|||||||
var seriesdata = [];
|
var seriesdata = [];
|
||||||
var dateX = [];
|
var dateX = [];
|
||||||
// var legendList: string | any[] = [];
|
// var legendList: string | any[] = [];
|
||||||
|
let sum = 0;
|
||||||
for (let i = 0; i < data.value.length; i++) {
|
for (let i = 0; i < data.value.length; i++) {
|
||||||
|
sum += data.value[i].value;
|
||||||
dateX.push(data.value[i].name);
|
dateX.push(data.value[i].name);
|
||||||
|
|
||||||
seriesdata.push({
|
seriesdata.push({
|
||||||
@@ -262,7 +267,7 @@
|
|||||||
clockwise: '10',
|
clockwise: '10',
|
||||||
// hoverAnimation: true,
|
// hoverAnimation: true,
|
||||||
// 圆环内径和外径
|
// 圆环内径和外径
|
||||||
radius: ['70%', '90%'],
|
radius: ['60%', '80%'],
|
||||||
center: ['30%', '50%'], // 调整环形图的位置，百分比表示相对于容器的宽高
|
center: ['30%', '50%'], // 调整环形图的位置，百分比表示相对于容器的宽高
|
||||||
// 显示折线
|
// 显示折线
|
||||||
labelLine: {
|
labelLine: {
|
||||||
@@ -294,6 +299,29 @@
|
|||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
},
|
},
|
||||||
|
graphic: [
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
left: '28%',
|
||||||
|
top: '33%',
|
||||||
|
style: {
|
||||||
|
text: '总计',
|
||||||
|
fill: '#000',
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
left: sum > 100 ? '24%' : '30%',
|
||||||
|
top: '50%',
|
||||||
|
style: {
|
||||||
|
text: sum,
|
||||||
|
fill: '#000',
|
||||||
|
fontSize: 30,
|
||||||
|
fontWeight: 700,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
// 图例
|
// 图例
|
||||||
legend: {
|
legend: {
|
||||||
@@ -334,7 +362,9 @@
|
|||||||
chartRight1.on('click', function (params) {
|
chartRight1.on('click', function (params) {
|
||||||
// 控制台输出数据的名称
|
// 控制台输出数据的名称
|
||||||
console.log(params.name + ' 被点击了');
|
console.log(params.name + ' 被点击了');
|
||||||
drawRight2(params);
|
if (params.name && params.name != '') {
|
||||||
|
drawRight2(params);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -360,18 +390,18 @@
|
|||||||
});
|
});
|
||||||
const option = {
|
const option = {
|
||||||
// 图例
|
// 图例
|
||||||
legend: {
|
// legend: {
|
||||||
data: [
|
// data: [
|
||||||
{ name: '对比值', icon: 'rect' }, // 对比值使用矩形图标
|
// { name: '对比值', icon: 'rect' }, // 对比值使用矩形图标
|
||||||
{
|
// {
|
||||||
name: '参考线',
|
// name: '参考线',
|
||||||
icon: 'path://M234.666667 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM473.6 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM934.4 490.666667h-136.533333a25.6 25.6 0 1 0 0 51.2h136.533333a25.6 25.6 0 1 0 0-51.2zM712.533333 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2z',
|
// icon: 'path://M234.666667 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM473.6 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2zM934.4 490.666667h-136.533333a25.6 25.6 0 1 0 0 51.2h136.533333a25.6 25.6 0 1 0 0-51.2zM712.533333 490.666667h-153.6a25.6 25.6 0 1 0 0 51.2h153.6a25.6 25.6 0 1 0 0-51.2z',
|
||||||
}, // 参考线使用自定义路径图标，只显示线条
|
// }, // 参考线使用自定义路径图标，只显示线条
|
||||||
],
|
// ],
|
||||||
orient: 'horizontal',
|
// orient: 'horizontal',
|
||||||
bottom: 10,
|
// bottom: 10,
|
||||||
left: 60,
|
// left: 60,
|
||||||
},
|
// },
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
@@ -409,7 +439,7 @@
|
|||||||
zoomLock: true,
|
zoomLock: true,
|
||||||
startValue: 0, // 从头开始。
|
startValue: 0, // 从头开始。
|
||||||
endValue: 5,
|
endValue: 5,
|
||||||
bottom: '0%',
|
bottom: 20,
|
||||||
height: 10,
|
height: 10,
|
||||||
showDetail: false,
|
showDetail: false,
|
||||||
},
|
},
|
||||||
@@ -526,4 +556,19 @@
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped></style>
|
<style lang="less" scoped>
|
||||||
|
::v-deep .ant-radio-button-wrapper-checked {
|
||||||
|
border: none !important; /* 移除选中时的边框 */
|
||||||
|
box-shadow: none !important; /* 移除选中时的阴影 */
|
||||||
|
background-color: #2778ff !important; /* 使用 !important 强制覆盖背景颜色 */
|
||||||
|
color: #ffffff !important; /* 使用 !important 强制覆盖文字颜色 */
|
||||||
|
}
|
||||||
|
/* 未选中时的颜色 */
|
||||||
|
::v-deep .ant-radio-button-wrapper {
|
||||||
|
// border: none !important; /* 移除所有边框 */
|
||||||
|
box-shadow: none !important; /* 去掉阴影（如果有的话） */
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
color: #2778ff;
|
||||||
|
border-color: #2778ff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div ref="graphGraphchart" style="width: 100%; height: 80%"></div>
|
<div ref="graphGraphchart" style="width: 100%; height: 100%"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
@@ -77,6 +77,10 @@
|
|||||||
legendList.push(data.value[i].name);
|
legendList.push(data.value[i].name);
|
||||||
}
|
}
|
||||||
const option = {
|
const option = {
|
||||||
|
grid: {
|
||||||
|
top: 40,
|
||||||
|
bottom: 50,
|
||||||
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: legendList,
|
data: legendList,
|
||||||
orient: 'horizontal',
|
orient: 'horizontal',
|
||||||
@@ -107,6 +111,21 @@
|
|||||||
type: 'value',
|
type: 'value',
|
||||||
},
|
},
|
||||||
series: seriesList,
|
series: seriesList,
|
||||||
|
// 使用 ECharts 的 graphic 组件来展示无数据的提示
|
||||||
|
graphic:
|
||||||
|
data.value.length === 0
|
||||||
|
? {
|
||||||
|
type: 'text',
|
||||||
|
left: 'center',
|
||||||
|
top: 'middle',
|
||||||
|
style: {
|
||||||
|
text: '无数据',
|
||||||
|
fontSize: 20,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
fill: '#999',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
chartInstance = echarts.init(graphGraphchart.value);
|
chartInstance = echarts.init(graphGraphchart.value);
|
||||||
|
|||||||
@@ -1,13 +1,20 @@
|
|||||||
<!-- eslint-disable vue/multi-word-component-names -->
|
<!-- eslint-disable vue/multi-word-component-names -->
|
||||||
<template>
|
<template>
|
||||||
<a-row type="flex" style="height: 92%; display: flex; position: relative">
|
<a-row type="flex" style="height: 100%; display: flex; position: relative; background: #f1f2f6">
|
||||||
<a-col :span="4">
|
<a-col :span="4">
|
||||||
<div style="padding: 0 20px; width: 100%; height: 100%">
|
<div style="width: 100%; height: 100%">
|
||||||
<tree ref="treeRef" />
|
<tree ref="treeRef" />
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
<a-col :span="20">
|
<a-col :span="20">
|
||||||
<div style="width: 100%; height: 100%">
|
<div
|
||||||
|
style="
|
||||||
|
width: 98%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #ffffff;
|
||||||
|
margin-left: 1.5%;
|
||||||
|
">
|
||||||
<div style="height: 22%">
|
<div style="height: 22%">
|
||||||
<div class="ns-right-title">
|
<div class="ns-right-title">
|
||||||
<a-tabs
|
<a-tabs
|
||||||
@@ -16,6 +23,9 @@
|
|||||||
@change="changeActive">
|
@change="changeActive">
|
||||||
<a-tab-pane key="1" tab="图表" />
|
<a-tab-pane key="1" tab="图表" />
|
||||||
<a-tab-pane key="2" tab="分析" />
|
<a-tab-pane key="2" tab="分析" />
|
||||||
|
<!-- <template #renderTabBar="{ DefaultTabBar, ...props }">
|
||||||
|
<component :is="DefaultTabBar" v-bind="props" :style="{ opacity: 0.5 }" />
|
||||||
|
</template> -->
|
||||||
</a-tabs>
|
</a-tabs>
|
||||||
<div class="button">
|
<div class="button">
|
||||||
<ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" />
|
<ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" />
|
||||||
@@ -27,11 +37,11 @@
|
|||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="activeKey == '1'" style="height: 82%; width: 100%">
|
<div v-if="activeKey == '1'" style="height: 72%; width: 100%">
|
||||||
<graph-graph ref="graphRef" v-if="isGraph" />
|
<graph-graph ref="graphRef" v-if="isGraph" />
|
||||||
<environment-table ref="tableRef" v-else style="width: 100%" />
|
<environment-table ref="tableRef" v-else style="width: 100%" />
|
||||||
</div>
|
</div>
|
||||||
<div v-else style="height: 82%; width: 100%">
|
<div v-else style="height: 78%; width: 100%">
|
||||||
<analysis-graph ref="analysisGraphRef" v-if="isGraph" style="height: 100%; width: 100%" />
|
<analysis-graph ref="analysisGraphRef" v-if="isGraph" style="height: 100%; width: 100%" />
|
||||||
<analysis-table ref="analysisTableRef" v-else />
|
<analysis-table ref="analysisTableRef" v-else />
|
||||||
</div>
|
</div>
|
||||||
@@ -110,4 +120,22 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
|
::v-deep .ant-tabs-tab {
|
||||||
|
font-weight: bold; /* 选中标签的加粗 */
|
||||||
|
// font-size: 16px;
|
||||||
|
// letter-spacing: 1.33px;
|
||||||
|
color: #666666 !important;
|
||||||
|
}
|
||||||
|
::v-deep .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
|
||||||
|
// background-color: #f0f0f0; /* 自定义选中背景色 */
|
||||||
|
// color: #1890ff; /* 自定义选中文字颜色 */
|
||||||
|
// border-radius: 5px; /* 选中标签的圆角 */
|
||||||
|
// font-weight: bold; /* 选中标签的加粗 */
|
||||||
|
|
||||||
|
color: #000000 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .ant-tabs-tab:hover {
|
||||||
|
color: #000000; /* 悬停时的文字颜色 */
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -11,10 +11,17 @@
|
|||||||
v-model:value="mode"
|
v-model:value="mode"
|
||||||
@change="changeMode"
|
@change="changeMode"
|
||||||
style="padding-bottom: 10px; width: 100%">
|
style="padding-bottom: 10px; width: 100%">
|
||||||
<a-radio-button value="0" style="width: 50%; text-align: center" :disabled="shebei">
|
<a-radio-button
|
||||||
|
value="0"
|
||||||
|
style="width: 47.5%; margin-right: 2.5%; text-align: center; border-radius: 4px"
|
||||||
|
:disabled="shebei">
|
||||||
设备
|
设备
|
||||||
</a-radio-button>
|
</a-radio-button>
|
||||||
<a-radio-button value="1" style="width: 50%; text-align: center">节点</a-radio-button>
|
<a-radio-button
|
||||||
|
value="1"
|
||||||
|
style="width: 47.5%; margin-left: 2.5%; text-align: center; border-radius: 4px"
|
||||||
|
>节点</a-radio-button
|
||||||
|
>
|
||||||
</a-radio-group>
|
</a-radio-group>
|
||||||
<a-input
|
<a-input
|
||||||
v-model:value="deviceName"
|
v-model:value="deviceName"
|
||||||
@@ -55,7 +62,7 @@
|
|||||||
placeholder="请选择能耗类型"
|
placeholder="请选择能耗类型"
|
||||||
:style="{
|
:style="{
|
||||||
top: '100px',
|
top: '100px',
|
||||||
left: `${divWidth + 40}px`,
|
left: `${divWidth + 55}px`,
|
||||||
zIndex: 9,
|
zIndex: 9,
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
width: `${divWidth}px`,
|
width: `${divWidth}px`,
|
||||||
@@ -67,7 +74,7 @@
|
|||||||
placeholder="请选择日期类型"
|
placeholder="请选择日期类型"
|
||||||
:style="{
|
:style="{
|
||||||
top: '100px',
|
top: '100px',
|
||||||
left: `${divWidth * 2 + 50}px`,
|
left: `${divWidth * 2 + 65}px`,
|
||||||
zIndex: 9,
|
zIndex: 9,
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
width: `${divWidth}px`,
|
width: `${divWidth}px`,
|
||||||
@@ -77,7 +84,7 @@
|
|||||||
<a-range-picker
|
<a-range-picker
|
||||||
:style="{
|
:style="{
|
||||||
top: '100px',
|
top: '100px',
|
||||||
left: `${divWidth * 3 + 60}px`,
|
left: `${divWidth * 3 + 75}px`,
|
||||||
zIndex: 9,
|
zIndex: 9,
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
width: `${divWidth}px`,
|
width: `${divWidth}px`,
|
||||||
@@ -90,7 +97,7 @@
|
|||||||
<a-date-picker
|
<a-date-picker
|
||||||
:style="{
|
:style="{
|
||||||
top: '100px',
|
top: '100px',
|
||||||
left: `${divWidth * 3 + 60}px`,
|
left: `${divWidth * 3 + 75}px`,
|
||||||
zIndex: 9,
|
zIndex: 9,
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
width: `${divWidth}px`,
|
width: `${divWidth}px`,
|
||||||
@@ -103,7 +110,7 @@
|
|||||||
type="primary"
|
type="primary"
|
||||||
:style="{
|
:style="{
|
||||||
top: '100px',
|
top: '100px',
|
||||||
left: `${divWidth * 4 + 70}px`,
|
left: `${divWidth * 4 + 85}px`,
|
||||||
zIndex: 9,
|
zIndex: 9,
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
}"
|
}"
|
||||||
@@ -601,6 +608,10 @@
|
|||||||
}
|
}
|
||||||
.parent-container {
|
.parent-container {
|
||||||
// position: relative;
|
// position: relative;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #ffffff;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -610,4 +621,22 @@
|
|||||||
// width: 100%;
|
// width: 100%;
|
||||||
// margin-bottom: 10px;
|
// margin-bottom: 10px;
|
||||||
// }
|
// }
|
||||||
|
/* 选中状态的背景色和文字颜色 */
|
||||||
|
::v-deep .ant-radio-button-wrapper-checked {
|
||||||
|
border: none !important; /* 移除选中时的边框 */
|
||||||
|
box-shadow: none !important; /* 移除选中时的阴影 */
|
||||||
|
background-color: #ecf3ff !important; /* 使用 !important 强制覆盖背景颜色 */
|
||||||
|
color: #4388fb !important; /* 使用 !important 强制覆盖文字颜色 */
|
||||||
|
}
|
||||||
|
/* 未选中时的颜色 */
|
||||||
|
::v-deep .ant-radio-button-wrapper {
|
||||||
|
border: none !important; /* 移除所有边框 */
|
||||||
|
box-shadow: none !important; /* 去掉阴影（如果有的话） */
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
// color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-radio-button-wrapper:not(:first-child)::before {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
@@ -1,19 +1,22 @@
|
|||||||
<!-- eslint-disable vue/v-on-event-hyphenation -->
|
<!-- eslint-disable vue/v-on-event-hyphenation -->
|
||||||
<template>
|
<template>
|
||||||
<!-- <a-spin :spinning="loading"> -->
|
<!-- <a-spin :spinning="loading"> -->
|
||||||
<div style="background: #ffffff; height: 95%">
|
<div style="background: #ffffff; height: 95%; position: relative">
|
||||||
<a-spin :spinning="loading">
|
<a-spin :spinning="loading">
|
||||||
<a-table
|
<a-table
|
||||||
:columns="tableColumns"
|
:columns="tableColumns"
|
||||||
:data-source="pageData"
|
:data-source="pageData"
|
||||||
bordered
|
bordered
|
||||||
:pagination="false"
|
:pagination="false"
|
||||||
|
style="height: 75%"
|
||||||
:scroll="{ x: 100, y: 450 }">
|
:scroll="{ x: 100, y: 450 }">
|
||||||
<template #title>
|
<template #title>
|
||||||
<div
|
<div
|
||||||
style="display: flex; align-items: center; justify-content: space-between; width: 100%">
|
style="display: flex; align-items: center; justify-content: space-between; width: 100%">
|
||||||
<div style="display: flex; align-items: center; width: 85%">
|
<div style="display: flex; align-items: center; width: 85%">
|
||||||
<div style="width: 10%">数据报表</div>
|
<div style="width: 10%"
|
||||||
|
><ns-icon name="title" size="11" style="margin-right: 3px" />数据报表</div
|
||||||
|
>
|
||||||
|
|
||||||
<a-select
|
<a-select
|
||||||
v-model:value="frequencyValue"
|
v-model:value="frequencyValue"
|
||||||
@@ -39,15 +42,24 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</a-table>
|
</a-table>
|
||||||
<a-pagination
|
|
||||||
:current="queryParams.pageNum"
|
|
||||||
:total="total"
|
|
||||||
:page-size="queryParams.pageSize"
|
|
||||||
style="display: flex; justify-content: center; margin-top: 16px"
|
|
||||||
:show-size-changer="true"
|
|
||||||
:show-quick-jumper="true"
|
|
||||||
@change="onChange" />
|
|
||||||
</a-spin>
|
</a-spin>
|
||||||
|
<a-pagination
|
||||||
|
:current="queryParams.pageNum"
|
||||||
|
:total="total"
|
||||||
|
:show-total="(total, range) => ` 共 ${total} 条`"
|
||||||
|
:page-size="queryParams.pageSize"
|
||||||
|
style="
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
right: 30px;
|
||||||
|
justify-content: right;
|
||||||
|
margin-top: 16px;
|
||||||
|
margin-right: 30px;
|
||||||
|
"
|
||||||
|
:show-size-changer="true"
|
||||||
|
:show-quick-jumper="true"
|
||||||
|
@change="onChange" />
|
||||||
</div>
|
</div>
|
||||||
<!-- </a-spin> -->
|
<!-- </a-spin> -->
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,18 +1,21 @@
|
|||||||
<!-- eslint-disable vue/multi-word-component-names -->
|
<!-- eslint-disable vue/multi-word-component-names -->
|
||||||
<template>
|
<template>
|
||||||
<div style="background: #ffffff; height: 95%">
|
<div style="background: #ffffff; height: 95%; position: relative">
|
||||||
<a-spin :spinning="loading">
|
<a-spin :spinning="loading" style="height: 100%">
|
||||||
<a-table
|
<a-table
|
||||||
:columns="tableColumns"
|
:columns="tableColumns"
|
||||||
:data-source="pageData"
|
:data-source="pageData"
|
||||||
bordered
|
bordered
|
||||||
:pagination="false"
|
:pagination="false"
|
||||||
:scroll="{ x: 100 }">
|
:height="500"
|
||||||
|
:scroll="{ x: 3000, y: 440 }">
|
||||||
<template #title>
|
<template #title>
|
||||||
<div
|
<div
|
||||||
style="display: flex; align-items: center; justify-content: space-between; width: 100%">
|
style="display: flex; align-items: center; justify-content: space-between; width: 100%">
|
||||||
<div style="display: flex; align-items: center; width: 85%">
|
<div style="display: flex; align-items: center; width: 85%">
|
||||||
<div style="width: 10%">数据报表</div>
|
<div style="width: 10%"
|
||||||
|
><ns-icon name="title" size="11" style="margin-right: 3px" />数据报表</div
|
||||||
|
>
|
||||||
<a-select
|
<a-select
|
||||||
v-model:value="typeValue"
|
v-model:value="typeValue"
|
||||||
placeholder="请选择环境参数"
|
placeholder="请选择环境参数"
|
||||||
@@ -20,7 +23,7 @@
|
|||||||
:options="typeList" />
|
:options="typeList" />
|
||||||
<a-tree-select
|
<a-tree-select
|
||||||
v-model:value="quyuvalue"
|
v-model:value="quyuvalue"
|
||||||
style="width: 17%; margin-left: 10px"
|
style="width: 22%; margin-left: 10px"
|
||||||
:tree-data="treeData2"
|
:tree-data="treeData2"
|
||||||
:field-names="{
|
:field-names="{
|
||||||
children: 'childList',
|
children: 'childList',
|
||||||
@@ -54,13 +57,22 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</a-table>
|
</a-table>
|
||||||
<a-pagination
|
|
||||||
:total="total"
|
|
||||||
show-size-changer
|
|
||||||
show-quick-jumper
|
|
||||||
@change="onChange"
|
|
||||||
style="display: flex; justify-content: center; margin-top: 10px" />
|
|
||||||
</a-spin>
|
</a-spin>
|
||||||
|
<a-pagination
|
||||||
|
:total="total"
|
||||||
|
:show-total="(total, range) => ` 共 ${total} 条`"
|
||||||
|
show-size-changer
|
||||||
|
show-quick-jumper
|
||||||
|
@change="onChange"
|
||||||
|
style="
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
right: 30px;
|
||||||
|
justify-content: right;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-right: 30px;
|
||||||
|
" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
@@ -138,6 +150,7 @@
|
|||||||
{
|
{
|
||||||
title: '区域名称',
|
title: '区域名称',
|
||||||
dataIndex: 'location',
|
dataIndex: 'location',
|
||||||
|
width: 100,
|
||||||
customCell: (record, rowIndex) => {
|
customCell: (record, rowIndex) => {
|
||||||
if (rowIndex == undefined) {
|
if (rowIndex == undefined) {
|
||||||
return {
|
return {
|
||||||
@@ -160,6 +173,7 @@
|
|||||||
{
|
{
|
||||||
title: '点位',
|
title: '点位',
|
||||||
dataIndex: 'pointName',
|
dataIndex: 'pointName',
|
||||||
|
width: 100,
|
||||||
customCell: (record, rowIndex) => {
|
customCell: (record, rowIndex) => {
|
||||||
if (rowIndex == undefined) {
|
if (rowIndex == undefined) {
|
||||||
return {
|
return {
|
||||||
@@ -186,6 +200,7 @@
|
|||||||
{
|
{
|
||||||
title: '日期',
|
title: '日期',
|
||||||
dataIndex: 'time',
|
dataIndex: 'time',
|
||||||
|
width: 110,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="background: #f2f6fd; width: 100%; height: 100%">
|
<div style="width: 100%; height: 100%">
|
||||||
<div style="display: flex">
|
<div style="display: flex">
|
||||||
<a-tabs v-model:activeKey="activeKey" style="height: 5%; width: 100%; background: #ffffff">
|
<a-tabs
|
||||||
|
v-model:activeKey="activeKey"
|
||||||
|
style="height: 5%; width: 100%; margin-top: 0.5%; background: #ffffff">
|
||||||
<a-tab-pane key="1" tab="综合数据" />
|
<a-tab-pane key="1" tab="综合数据" />
|
||||||
<a-tab-pane key="2" tab="历史数据" />
|
<a-tab-pane key="2" tab="历史数据" />
|
||||||
<a-tab-pane key="3" tab="平均数据" />
|
<a-tab-pane key="3" tab="平均数据" />
|
||||||
@@ -444,4 +446,23 @@
|
|||||||
queryDeviceInfoListPage();
|
queryDeviceInfoListPage();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped></style>
|
<style lang="less" scoped>
|
||||||
|
::v-deep .ant-tabs-tab {
|
||||||
|
font-weight: bold; /* 选中标签的加粗 */
|
||||||
|
// font-size: 16px;
|
||||||
|
// letter-spacing: 1.33px;
|
||||||
|
color: #666666 !important;
|
||||||
|
}
|
||||||
|
::v-deep .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
|
||||||
|
// background-color: #f0f0f0; /* 自定义选中背景色 */
|
||||||
|
// color: #1890ff; /* 自定义选中文字颜色 */
|
||||||
|
// border-radius: 5px; /* 选中标签的圆角 */
|
||||||
|
// font-weight: bold; /* 选中标签的加粗 */
|
||||||
|
|
||||||
|
color: #000000 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .ant-tabs-tab:hover {
|
||||||
|
color: #000000; /* 悬停时的文字颜色 */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user