@ -0,0 +1,13 @@ |
|||||
|
// 前缀
|
||||
|
const prefix = '/carbon-smart/api'; |
||||
|
// 通风系统相关接口
|
||||
|
export enum waterSys { |
||||
|
// 获得污水池状态
|
||||
|
getPool1 = prefix + '/waterSysCtrl/getSewagePoolState', |
||||
|
// 获得阀门状态
|
||||
|
getValve = prefix + '/waterSysCtrl/getValveState', |
||||
|
// 获得集水池状态
|
||||
|
getPool2 = prefix + '/waterSysCtrl/getCollectPoolState', |
||||
|
// 获得水泵状态
|
||||
|
getPump = prefix + '/waterSysCtrl/getPumpState', |
||||
|
} |
@ -0,0 +1,220 @@ |
|||||
|
/* eslint-disable */ |
||||
|
import { saveAs } from 'file-saver' |
||||
|
import XLSX from 'xlsx' |
||||
|
|
||||
|
function generateArray(table) { |
||||
|
var out = []; |
||||
|
var rows = table.querySelectorAll('tr'); |
||||
|
var ranges = []; |
||||
|
for (var R = 0; R < rows.length; ++R) { |
||||
|
var outRow = []; |
||||
|
var row = rows[R]; |
||||
|
var columns = row.querySelectorAll('td'); |
||||
|
for (var C = 0; C < columns.length; ++C) { |
||||
|
var cell = columns[C]; |
||||
|
var colspan = cell.getAttribute('colspan'); |
||||
|
var rowspan = cell.getAttribute('rowspan'); |
||||
|
var cellValue = cell.innerText; |
||||
|
if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue; |
||||
|
|
||||
|
//Skip ranges
|
||||
|
ranges.forEach(function (range) { |
||||
|
if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) { |
||||
|
for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
//Handle Row Span
|
||||
|
if (rowspan || colspan) { |
||||
|
rowspan = rowspan || 1; |
||||
|
colspan = colspan || 1; |
||||
|
ranges.push({ |
||||
|
s: { |
||||
|
r: R, |
||||
|
c: outRow.length |
||||
|
}, |
||||
|
e: { |
||||
|
r: R + rowspan - 1, |
||||
|
c: outRow.length + colspan - 1 |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
//Handle Value
|
||||
|
outRow.push(cellValue !== "" ? cellValue : null); |
||||
|
|
||||
|
//Handle Colspan
|
||||
|
if (colspan) |
||||
|
for (var k = 0; k < colspan - 1; ++k) outRow.push(null); |
||||
|
} |
||||
|
out.push(outRow); |
||||
|
} |
||||
|
return [out, ranges]; |
||||
|
}; |
||||
|
|
||||
|
function datenum(v, date1904) { |
||||
|
if (date1904) v += 1462; |
||||
|
var epoch = Date.parse(v); |
||||
|
return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000); |
||||
|
} |
||||
|
|
||||
|
function sheet_from_array_of_arrays(data, opts) { |
||||
|
var ws = {}; |
||||
|
var range = { |
||||
|
s: { |
||||
|
c: 10000000, |
||||
|
r: 10000000 |
||||
|
}, |
||||
|
e: { |
||||
|
c: 0, |
||||
|
r: 0 |
||||
|
} |
||||
|
}; |
||||
|
for (var R = 0; R != data.length; ++R) { |
||||
|
for (var C = 0; C != data[R].length; ++C) { |
||||
|
if (range.s.r > R) range.s.r = R; |
||||
|
if (range.s.c > C) range.s.c = C; |
||||
|
if (range.e.r < R) range.e.r = R; |
||||
|
if (range.e.c < C) range.e.c = C; |
||||
|
var cell = { |
||||
|
v: data[R][C] |
||||
|
}; |
||||
|
if (cell.v == null) continue; |
||||
|
var cell_ref = XLSX.utils.encode_cell({ |
||||
|
c: C, |
||||
|
r: R |
||||
|
}); |
||||
|
|
||||
|
if (typeof cell.v === 'number') cell.t = 'n'; |
||||
|
else if (typeof cell.v === 'boolean') cell.t = 'b'; |
||||
|
else if (cell.v instanceof Date) { |
||||
|
cell.t = 'n'; |
||||
|
cell.z = XLSX.SSF._table[14]; |
||||
|
cell.v = datenum(cell.v); |
||||
|
} else cell.t = 's'; |
||||
|
|
||||
|
ws[cell_ref] = cell; |
||||
|
} |
||||
|
} |
||||
|
if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range); |
||||
|
return ws; |
||||
|
} |
||||
|
|
||||
|
function Workbook() { |
||||
|
if (!(this instanceof Workbook)) return new Workbook(); |
||||
|
this.SheetNames = []; |
||||
|
this.Sheets = {}; |
||||
|
} |
||||
|
|
||||
|
function s2ab(s) { |
||||
|
var buf = new ArrayBuffer(s.length); |
||||
|
var view = new Uint8Array(buf); |
||||
|
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF; |
||||
|
return buf; |
||||
|
} |
||||
|
|
||||
|
export function export_table_to_excel(id) { |
||||
|
var theTable = document.getElementById(id); |
||||
|
var oo = generateArray(theTable); |
||||
|
var ranges = oo[1]; |
||||
|
|
||||
|
/* original data */ |
||||
|
var data = oo[0]; |
||||
|
var ws_name = "SheetJS"; |
||||
|
|
||||
|
var wb = new Workbook(), |
||||
|
ws = sheet_from_array_of_arrays(data); |
||||
|
|
||||
|
/* add ranges to worksheet */ |
||||
|
// ws['!cols'] = ['apple', 'banan'];
|
||||
|
ws['!merges'] = ranges; |
||||
|
|
||||
|
/* add worksheet to workbook */ |
||||
|
wb.SheetNames.push(ws_name); |
||||
|
wb.Sheets[ws_name] = ws; |
||||
|
|
||||
|
var wbout = XLSX.write(wb, { |
||||
|
bookType: 'xlsx', |
||||
|
bookSST: false, |
||||
|
type: 'binary' |
||||
|
}); |
||||
|
|
||||
|
saveAs(new Blob([s2ab(wbout)], { |
||||
|
type: "application/octet-stream" |
||||
|
}), "test.xlsx") |
||||
|
} |
||||
|
|
||||
|
export function export_json_to_excel({ |
||||
|
multiHeader = [], |
||||
|
header, |
||||
|
data, |
||||
|
filename, |
||||
|
merges = [], |
||||
|
autoWidth = true, |
||||
|
bookType = 'xlsx' |
||||
|
} = {}) { |
||||
|
/* original data */ |
||||
|
filename = filename || 'excel-list' |
||||
|
data = [...data] |
||||
|
data.unshift(header); |
||||
|
|
||||
|
for (let i = multiHeader.length - 1; i > -1; i--) { |
||||
|
data.unshift(multiHeader[i]) |
||||
|
} |
||||
|
|
||||
|
var ws_name = "SheetJS"; |
||||
|
var wb = new Workbook(), |
||||
|
ws = sheet_from_array_of_arrays(data); |
||||
|
|
||||
|
if (merges.length > 0) { |
||||
|
if (!ws['!merges']) ws['!merges'] = []; |
||||
|
merges.forEach(item => { |
||||
|
ws['!merges'].push(XLSX.utils.decode_range(item)) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
if (autoWidth) { |
||||
|
/*设置worksheet每列的最大宽度*/ |
||||
|
const colWidth = data.map(row => row.map(val => { |
||||
|
/*先判断是否为null/undefined*/ |
||||
|
if (val == null) { |
||||
|
return { |
||||
|
'wch': 10 |
||||
|
}; |
||||
|
} |
||||
|
/*再判断是否为中文*/ |
||||
|
else if (val.toString().charCodeAt(0) > 255) { |
||||
|
return { |
||||
|
'wch': val.toString().length * 2 |
||||
|
}; |
||||
|
} else { |
||||
|
return { |
||||
|
'wch': val.toString().length |
||||
|
}; |
||||
|
} |
||||
|
})) |
||||
|
/*以第一行为初始值*/ |
||||
|
let result = colWidth[0]; |
||||
|
for (let i = 1; i < colWidth.length; i++) { |
||||
|
for (let j = 0; j < colWidth[i].length; j++) { |
||||
|
if (result[j]['wch'] < colWidth[i][j]['wch']) { |
||||
|
result[j]['wch'] = colWidth[i][j]['wch']; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
ws['!cols'] = result; |
||||
|
} |
||||
|
|
||||
|
/* add worksheet to workbook */ |
||||
|
wb.SheetNames.push(ws_name); |
||||
|
wb.Sheets[ws_name] = ws; |
||||
|
|
||||
|
var wbout = XLSX.write(wb, { |
||||
|
bookType: bookType, |
||||
|
bookSST: false, |
||||
|
type: 'binary' |
||||
|
}); |
||||
|
saveAs(new Blob([s2ab(wbout)], { |
||||
|
type: "application/octet-stream" |
||||
|
}), `${filename}.${bookType}`); |
||||
|
} |
@ -1,642 +0,0 @@ |
|||||
<template> |
|
||||
<div class="search"> |
|
||||
<a-card style="border-radius: 12px"> |
|
||||
<div class="ns-form-title"> |
|
||||
<div class="title">查询</div> |
|
||||
<div class="operation"> |
|
||||
<a-button type="primary" @click="changeParentData"> 返回 </a-button> |
|
||||
</div> |
|
||||
</div> |
|
||||
<a-form layout="inline"> |
|
||||
<a-form-item> |
|
||||
<a-select |
|
||||
v-model:value="queryParams.accountType" |
|
||||
style="width: 200px" |
|
||||
placeholder="请输入账户类型"> |
|
||||
<a-select-option :value="1">全国账户</a-select-option> |
|
||||
<a-select-option :value="2">地方账户</a-select-option> |
|
||||
<a-select-option :value="3">CCER</a-select-option> |
|
||||
</a-select> |
|
||||
</a-form-item> |
|
||||
<a-form-item> |
|
||||
<a-cascader |
|
||||
v-model:value="queryParams.transactionType" |
|
||||
multiple |
|
||||
style="width: 200px" |
|
||||
:options="options" |
|
||||
placeholder="请选择交易类型" |
|
||||
suffix-icon="Shopping Around"> |
|
||||
<template #tagRender="data"> |
|
||||
<a-tag :key="data.value" color="blue">{{ data.label }}</a-tag> |
|
||||
</template> |
|
||||
</a-cascader> |
|
||||
</a-form-item> |
|
||||
<a-form-item> |
|
||||
<a-date-picker |
|
||||
style="width: 200px" |
|
||||
v-model:value="queryParams.year" |
|
||||
placeholder="请选择账期" |
|
||||
picker="year" |
|
||||
valueFormat="YYYY" /> |
|
||||
</a-form-item> |
|
||||
<a-form-item> |
|
||||
<a-button type="primary" @click="searchTableList">查询</a-button> |
|
||||
<a-button html-type="submit" style="margin-left: 6px" @click="reset">重置</a-button> |
|
||||
</a-form-item> |
|
||||
</a-form> |
|
||||
</a-card> |
|
||||
</div> |
|
||||
<div style="display: flex; margin-top: 20px; height: calc(84% - 20px)"> |
|
||||
<div class="detailTable"> |
|
||||
<div class="ns-form-title"> |
|
||||
<div class="title">交易明细</div> |
|
||||
<div class="operation" style="display: flex"> |
|
||||
<a-button type="primary" @click="addDetail">新增</a-button> |
|
||||
<a-upload |
|
||||
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 |
|
||||
type="primary" |
|
||||
style="margin-left: 6px" |
|
||||
:disabled="selectedRowKeys.length === 0" |
|
||||
@click="deleteMore" |
|
||||
>批量删除</a-button |
|
||||
> |
|
||||
</div> |
|
||||
</div> |
|
||||
<a-table |
|
||||
:columns="columns" |
|
||||
:data-source="data" |
|
||||
rowKey="id" |
|
||||
@change="onChange" |
|
||||
:rowSelection="{ |
|
||||
selectedRowKeys: selectedRowKeys, |
|
||||
onChange: onSelectionChange, |
|
||||
}" |
|
||||
:scroll="{ x: 1500, y: 400 }" |
|
||||
:pagination="false"> |
|
||||
<template #bodyCell="{ column, text, record }"> |
|
||||
<template v-if="column.dataIndex === 'accountType'"> |
|
||||
<span v-if="record.accountType">{{ record.accountType.label }}</span> |
|
||||
</template> |
|
||||
<template v-if="column.key === 'action'"> |
|
||||
<span> |
|
||||
<a @click="editData(record)">编辑</a> |
|
||||
<a-divider type="vertical" /> |
|
||||
<a @click="delData(record)">删除</a> |
|
||||
</span> |
|
||||
</template> |
|
||||
</template> |
|
||||
</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" /> |
|
||||
</div> |
|
||||
<div class="total"> |
|
||||
<div class="ns-form-title"> |
|
||||
<div class="title">配额统计</div> |
|
||||
<div class="operation" style="display: flex; justify-content: space-around; width: 63%"> |
|
||||
<a-button type="primary" @click="getTotalTable(1)">全国配额</a-button> |
|
||||
<a-button type="primary" @click="getTotalTable(2)">地方配额</a-button> |
|
||||
<a-button type="primary" @click="getTotalTable(3)">CCER配额</a-button> |
|
||||
</div> |
|
||||
</div> |
|
||||
<a-table :columns="totalColumns" :data-source="totalData" bordered :pagination="false"> |
|
||||
<template #bodyCell="{ column, text }"> |
|
||||
<template v-if="column.dataIndex === 'name'"> |
|
||||
<a>{{ text }}</a> |
|
||||
</template> |
|
||||
</template> |
|
||||
</a-table> |
|
||||
</div> |
|
||||
</div> |
|
||||
<!-- 新增报告弹窗 --> |
|
||||
<a-drawer |
|
||||
:width="500" |
|
||||
:visible="visible" |
|
||||
:body-style="{ paddingBottom: '80px' }" |
|
||||
:footer-style="{ textAlign: 'right' }" |
|
||||
destroyOnClose |
|
||||
@close="onClose"> |
|
||||
<div class="ns-form-title" style="display: flex"> |
|
||||
<div class="title">{{ text }}</div> |
|
||||
</div> |
|
||||
<a-form |
|
||||
ref="formRef" |
|
||||
:model="formState" |
|
||||
:rules="rules" |
|
||||
:label-col="labelCol" |
|
||||
:wrapper-col="wrapperCol"> |
|
||||
<a-form-item ref="name" label="账户类型" name="accountType"> |
|
||||
<a-select v-model:value="formState.accountType" placeholder="请输入账户类型"> |
|
||||
<a-select-option value="1">全国账户</a-select-option> |
|
||||
<a-select-option value="2">地方账户</a-select-option> |
|
||||
<a-select-option value="3">CCER</a-select-option> |
|
||||
</a-select> |
|
||||
</a-form-item> |
|
||||
<a-form-item ref="name" label="交易类型" name="transactionType"> |
|
||||
<a-cascader |
|
||||
v-model:value="formState.transactionType" |
|
||||
:options="options" |
|
||||
placeholder="请选择交易类型" /> |
|
||||
</a-form-item> |
|
||||
<a-form-item ref="name" label="交易日期" name="transactionDate"> |
|
||||
<a-date-picker v-model:value="formState.transactionDate" valueFormat="YYYY-MM-DD" /> |
|
||||
</a-form-item> |
|
||||
<a-form-item ref="name" label="交易数量" name="transactionQuantity"> |
|
||||
<a-input v-model:value="formState.transactionQuantity" placeholder="请输入交易数量" /> |
|
||||
</a-form-item> |
|
||||
<a-form-item ref="name" label="发生金额" name="amountIncurred"> |
|
||||
<a-input v-model:value="formState.amountIncurred" placeholder="请输入发生金额" /> |
|
||||
</a-form-item> |
|
||||
<a-form-item ref="name" label="交易对象" name="tradingPartner"> |
|
||||
<a-input v-model:value="formState.tradingPartner" placeholder="请输入交易对象" /> |
|
||||
</a-form-item> |
|
||||
<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> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts" setup> |
|
||||
import { ref, defineEmits, toRaw } from 'vue'; |
|
||||
import { http } from '/nerv-lib/util/http'; |
|
||||
import { UploadOutlined } from '@ant-design/icons-vue'; |
|
||||
import type { UploadChangeParam, UploadProps } from 'ant-design-vue'; |
|
||||
import { Pagination, Modal, message } from 'ant-design-vue'; |
|
||||
import { |
|
||||
carbonAssets, |
|
||||
carbonEmissionFactorLibrary, |
|
||||
uploadPic, |
|
||||
} from '/@/api/carbonEmissionFactorLibrary'; |
|
||||
import { log } from 'console'; |
|
||||
defineOptions({ |
|
||||
energyType: 'carbonAssets', // 与页面路由name一致缓存才可生效 |
|
||||
components: { |
|
||||
'a-pagination': Pagination, |
|
||||
}, |
|
||||
}); |
|
||||
// 父组件id |
|
||||
const props = defineProps({ |
|
||||
parentId: { |
|
||||
type: Number, |
|
||||
}, |
|
||||
}); |
|
||||
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 selectedRowKeys = ref([]); |
|
||||
const onSelectionChange = (selectedKeys, selectedRows) => { |
|
||||
selectedRowKeys.value = selectedKeys; |
|
||||
}; |
|
||||
const total = ref<number>(); |
|
||||
const thisYear = ref(new Date().getFullYear().toString()); |
|
||||
const queryParams = ref({ |
|
||||
pageNum: 1, |
|
||||
pageSize: 10, |
|
||||
orgId: orgId.value, |
|
||||
accountType: props.parentId, |
|
||||
year: thisYear.value, |
|
||||
}); |
|
||||
const searchTableList = () => { |
|
||||
getDetailList(); |
|
||||
}; |
|
||||
// 获取左侧列表数据 |
|
||||
const getDetailList = () => { |
|
||||
fetch(carbonAssets.carbonDetailsList, queryParams.value).then((res) => { |
|
||||
data.value = res.data.records; |
|
||||
total.value = res.data.total; |
|
||||
}); |
|
||||
}; |
|
||||
getDetailList(); |
|
||||
const columns = [ |
|
||||
{ |
|
||||
title: '序号', |
|
||||
customRender: (text: any) => { |
|
||||
return text.index + 1; |
|
||||
}, |
|
||||
}, |
|
||||
{ |
|
||||
title: '资产类别', |
|
||||
dataIndex: 'accountType', |
|
||||
}, |
|
||||
{ |
|
||||
title: '交易方式', |
|
||||
dataIndex: 'transactionTypeName', |
|
||||
}, |
|
||||
{ |
|
||||
title: '交易日期', |
|
||||
dataIndex: 'transactionDate', |
|
||||
sorter: (a, b) => a.transactionDate - b.transactionDate, |
|
||||
}, |
|
||||
{ |
|
||||
title: '本期收入(tCO2)', |
|
||||
dataIndex: 'income', |
|
||||
sorter: (a, b) => a.income - b.income, |
|
||||
}, |
|
||||
{ |
|
||||
title: '本期支出(tCO2)', |
|
||||
dataIndex: 'expenditure', |
|
||||
sorter: (a, b) => a.expenditure - b.expenditure, |
|
||||
}, |
|
||||
{ |
|
||||
title: '发生金额(¥)', |
|
||||
dataIndex: 'amountIncurredValue', |
|
||||
}, |
|
||||
{ |
|
||||
title: '交易对象', |
|
||||
dataIndex: 'tradingPartner', |
|
||||
}, |
|
||||
{ |
|
||||
title: '更新人', |
|
||||
dataIndex: 'updateUser', |
|
||||
}, |
|
||||
{ |
|
||||
title: '更新时间', |
|
||||
dataIndex: 'updateTime', |
|
||||
}, |
|
||||
{ |
|
||||
title: '操作', |
|
||||
key: 'action', |
|
||||
width: 130, |
|
||||
}, |
|
||||
]; |
|
||||
const data = ref([]); |
|
||||
const reset = () => { |
|
||||
queryParams.value = { |
|
||||
pageNum: 1, |
|
||||
pageSize: 10, |
|
||||
orgId: orgId.value, |
|
||||
year: new Date().getFullYear(), |
|
||||
}; |
|
||||
getDetailList(); |
|
||||
}; |
|
||||
const editData = (record) => { |
|
||||
getDictList(); |
|
||||
text.value = '编辑'; |
|
||||
visible.value = true; |
|
||||
formState.value.id = record.id; |
|
||||
fetch(uploadPic.select, { bizId: record.id, bizType: 1 }).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格式 |
|
||||
})); |
|
||||
}); |
|
||||
formState.value = JSON.parse(JSON.stringify(record)); |
|
||||
if (formState.value.expenditure === 0) { |
|
||||
formState.value.transactionQuantity = formState.value.income; |
|
||||
} else { |
|
||||
formState.value.transactionQuantity = formState.value.expenditure; |
|
||||
} |
|
||||
setTimeout(() => { |
|
||||
let selectDevice = ref([Number(formState.value.transactionType)]); |
|
||||
findParentIds(options.value, formState.value.transactionType, selectDevice.value); |
|
||||
formState.value.transactionType = selectDevice; |
|
||||
formState.value.transactionType = formState.value.transactionType; |
|
||||
}, 500); |
|
||||
}; |
|
||||
// 定义一个递归函数来查找每一级的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 delData = (record) => { |
|
||||
const id = [record.id]; |
|
||||
Modal.confirm({ |
|
||||
title: '警告', |
|
||||
content: '确定要删除吗?', |
|
||||
okText: '确定', |
|
||||
okType: 'primary', |
|
||||
cancelText: '取消', |
|
||||
onOk() { |
|
||||
fetch(carbonAssets.delete, { ids: id }).then((res) => { |
|
||||
message.success('操作成功!'); |
|
||||
getDetailList(); |
|
||||
}); |
|
||||
}, |
|
||||
onCancel() { |
|
||||
console.log('Cancel'); |
|
||||
}, |
|
||||
}); |
|
||||
}; |
|
||||
const deleteMore = () => { |
|
||||
Modal.confirm({ |
|
||||
title: '警告', |
|
||||
content: '确定要删除吗?', |
|
||||
okText: '确定', |
|
||||
okType: 'primary', |
|
||||
cancelText: '取消', |
|
||||
onOk() { |
|
||||
fetch(carbonAssets.delete, { ids: selectedRowKeys.value }).then((res) => { |
|
||||
message.success('操作成功!'); |
|
||||
getDetailList(); |
|
||||
}); |
|
||||
}, |
|
||||
onCancel() { |
|
||||
console.log('Cancel'); |
|
||||
}, |
|
||||
}); |
|
||||
}; |
|
||||
// 分页器 |
|
||||
const onChange = (pageNumber: number, size: number) => { |
|
||||
queryParams.value.pageNum = pageNumber; |
|
||||
queryParams.value.pageSize = size; |
|
||||
getDetailList(); |
|
||||
}; |
|
||||
// 新增相关数据 |
|
||||
const visible = ref(false); |
|
||||
const text = ref('新增'); |
|
||||
const formState = ref({ |
|
||||
orgId: orgId.value, |
|
||||
}); |
|
||||
const formRef = ref(); |
|
||||
const labelCol = { span: 5 }; |
|
||||
const wrapperCol = { span: 19 }; |
|
||||
const options = ref([]); |
|
||||
// 获取字典值 |
|
||||
const getDictList = () => { |
|
||||
fetch(carbonEmissionFactorLibrary.dictionaryUnitManagement, { grp: 'TRANSACTION_TYPE' }).then( |
|
||||
(res) => { |
|
||||
options.value = res.data; |
|
||||
options.value = options.value.map((item) => ({ |
|
||||
value: item.id, |
|
||||
label: item.cnValue, |
|
||||
children: item.children |
|
||||
? item.children.map((child) => ({ |
|
||||
value: child.id, |
|
||||
label: child.cnValue, |
|
||||
})) |
|
||||
: [], |
|
||||
})); |
|
||||
}, |
|
||||
); |
|
||||
}; |
|
||||
getDictList(); |
|
||||
// 点击新增 |
|
||||
const addDetail = () => { |
|
||||
text.value = '新增'; |
|
||||
visible.value = true; |
|
||||
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 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 onSubmit = () => { |
|
||||
formRef.value |
|
||||
.validate() |
|
||||
.then(() => { |
|
||||
console.log('values', formState, toRaw(formState)); |
|
||||
if (formState.value.transactionType) { |
|
||||
formState.value.transactionType = formState.value.transactionType.join(',').split(',')[1]; |
|
||||
} |
|
||||
if (formState.value.accountType.value) { |
|
||||
formState.value.accountType = formState.value.accountType.value; |
|
||||
} |
|
||||
fetch(carbonAssets.createOrUpdate, formState.value).then((res) => { |
|
||||
if (res.data.id && fileList.value.length !== 0) { |
|
||||
// uploadQuery.value.bizId = res.data.id; |
|
||||
const formData = ref(new FormData()); |
|
||||
fileList.value.forEach((file) => { |
|
||||
if (file.type !== 'done') { |
|
||||
formData.value.append('files', file.originFileObj); |
|
||||
} |
|
||||
}); |
|
||||
formData.value.append('bizType', 1); |
|
||||
formData.value.append('bizId', res.data.id); |
|
||||
delIds.value.forEach((item) => { |
|
||||
formData.value.append('deleteList', item); |
|
||||
}); |
|
||||
fetch(uploadPic.uploadfiles, formData.value) |
|
||||
.then((res) => { |
|
||||
message.success('操作成功!'); |
|
||||
visible.value = false; |
|
||||
delIds.value = []; |
|
||||
getDetailList(); |
|
||||
getTotalTable(); |
|
||||
}) |
|
||||
.catch((error) => { |
|
||||
console.log('error', error); |
|
||||
}); |
|
||||
} else { |
|
||||
message.success('操作成功!'); |
|
||||
visible.value = false; |
|
||||
delIds.value = []; |
|
||||
getDetailList(); |
|
||||
} |
|
||||
}); |
|
||||
}) |
|
||||
.catch((error) => { |
|
||||
console.log('error', error); |
|
||||
}); |
|
||||
}; |
|
||||
// 定义form表单的必填 |
|
||||
const rules: Record<string, Rule[]> = { |
|
||||
accountType: [{ required: true, message: '请输入账户类型', trigger: 'change' }], |
|
||||
transactionType: [{ required: true, message: '请选择交易类型', trigger: 'change' }], |
|
||||
transactionDate: [{ required: true, message: '请选择交易日期', trigger: 'change' }], |
|
||||
transactionQuantity: [{ required: true, message: '请输入交易数量', trigger: 'change' }], |
|
||||
amountIncurred: [{ required: true, message: '请输入发生金额', trigger: 'change' }], |
|
||||
tradingPartner: [{ required: true, message: '请输入交易对象', trigger: 'change' }], |
|
||||
}; |
|
||||
// 关闭新增抽屉 |
|
||||
const onClose = () => { |
|
||||
visible.value = false; |
|
||||
delIds.value = []; |
|
||||
formState.value = {}; |
|
||||
fileList.value = []; |
|
||||
formRef.value.resetFields(); |
|
||||
}; |
|
||||
// 统计表格 |
|
||||
const getTotalTable = (type) => { |
|
||||
if (type) { |
|
||||
queryParams.value.accountType = type; |
|
||||
} |
|
||||
fetch(carbonAssets.quotaStatistics, queryParams.value).then((res) => { |
|
||||
totalData.value = res.data; |
|
||||
}); |
|
||||
}; |
|
||||
getTotalTable(); |
|
||||
const totalColumns = [ |
|
||||
{ |
|
||||
title: '统计类型', |
|
||||
dataIndex: 'statisticType', |
|
||||
}, |
|
||||
{ |
|
||||
title: '小计', |
|
||||
dataIndex: 'subtotal', |
|
||||
}, |
|
||||
{ |
|
||||
title: '合计', |
|
||||
dataIndex: 'amountTo', |
|
||||
}, |
|
||||
]; |
|
||||
|
|
||||
const totalData = ref([]); |
|
||||
// 点击返回 |
|
||||
const emit = defineEmits(['change-data']); |
|
||||
const changeParentData = () => { |
|
||||
emit('change-data', true); |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<style lang="less" scoped> |
|
||||
.ns-form-title { |
|
||||
font-weight: bold; |
|
||||
user-select: text; |
|
||||
padding-bottom: 10px; |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
} |
|
||||
.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-card-body) { |
|
||||
padding: 16px; |
|
||||
} |
|
||||
.search { |
|
||||
height: 16%; |
|
||||
} |
|
||||
.detailTable { |
|
||||
width: 65%; |
|
||||
margin-right: 20px; |
|
||||
height: 100%; |
|
||||
background: white; |
|
||||
border-radius: 12px; |
|
||||
padding: 16px; |
|
||||
} |
|
||||
.total { |
|
||||
width: calc(35% - 20px); |
|
||||
height: 100%; |
|
||||
background: white; |
|
||||
border-radius: 12px; |
|
||||
padding: 16px; |
|
||||
} |
|
||||
</style> |
|
@ -0,0 +1,966 @@ |
|||||
|
<template> |
||||
|
<div class="box-cold"> |
||||
|
<!-- 空气源热泵 --> |
||||
|
<template v-for="(item, index) in airSourceThermalCollapse" :key="index"> |
||||
|
<div |
||||
|
style=" |
||||
|
width: 135px; |
||||
|
height: 200px; |
||||
|
position: relative; |
||||
|
font-size: 12px; |
||||
|
position: absolute; |
||||
|
color: #ffff80; |
||||
|
z-index: 2; |
||||
|
" |
||||
|
:style="{ left: item.style.mLeft, bottom: item.style.mBottom }"> |
||||
|
<div style="width: 100%; height: 20px; color: rgb(128, 255, 255)"> |
||||
|
{{ item.deviceInfoName }} |
||||
|
</div> |
||||
|
<div style="width: 100%; height: 20px"> |
||||
|
模式: <span style="color: #fff">{{ item.type }}</span> |
||||
|
</div> |
||||
|
<div style="width: 100%; height: 20px"> |
||||
|
设定温度: <span style="color: #fff">{{ item.number }}</span> |
||||
|
</div> |
||||
|
<img |
||||
|
style="position: absolute; width: 135px; height: 130px; left: -20px; top: 40px" |
||||
|
:src="item.url" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
<!-- 水泵 --> |
||||
|
<div |
||||
|
style=" |
||||
|
width: 111px; |
||||
|
height: 110px; |
||||
|
position: relative; |
||||
|
left: 1%; |
||||
|
bottom: 50%; |
||||
|
position: absolute; |
||||
|
"> |
||||
|
<a-switch |
||||
|
:checked="selectAllCheckbox === 1 ? true : false" |
||||
|
size="small" |
||||
|
:disabled="true" |
||||
|
style="top: 20px; left: -10px; position: absolute" |
||||
|
:class="{ |
||||
|
'blue-background': selectAllCheckbox === 1 ? true : false, |
||||
|
'grey-background': selectAllCheckbox === 1 ? false : true, |
||||
|
}" |
||||
|
@change="toggleAllSelection" /> |
||||
|
<img style="display: flex; width: 111px; height: 100px" :src="waterPumpSrc" /> |
||||
|
<div style="width: 100%; height: 20px; color: rgb(128, 255, 255)"> 水泵 </div> |
||||
|
</div> |
||||
|
<!-- 螺杆式地源热泵 --> |
||||
|
<template v-for="(item, index) in screwGeothermalHeatPump" :key="index"> |
||||
|
<div |
||||
|
style=" |
||||
|
width: 101.21px; |
||||
|
height: 101.21px; |
||||
|
position: relative; |
||||
|
font-size: 12px; |
||||
|
position: absolute; |
||||
|
color: #ffff80; |
||||
|
z-index: 2; |
||||
|
" |
||||
|
:style="{ left: item.style.mLeft, bottom: item.style.mBottom }"> |
||||
|
<img |
||||
|
style="position: absolute; width: 101.21px; height: 101.21px; left: 42%; top: -80%" |
||||
|
:src="item.url" /> |
||||
|
<div style="width: 100%; height: 20px; color: rgb(128, 255, 255); z-index: 2"> |
||||
|
{{ item.deviceInfoName }} |
||||
|
</div> |
||||
|
<div style="width: 100%; height: 20px"> |
||||
|
模式: <span style="color: #fff">{{ item.type }}</span> |
||||
|
</div> |
||||
|
<div style="width: 100%; height: 20px"> |
||||
|
设定温度: <span style="color: #fff">{{ item.number }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<!-- 稀冷泵 --> |
||||
|
<template v-for="(item, index) in diluteCoolingPump" :key="index"> |
||||
|
<div |
||||
|
style=" |
||||
|
width: 135px; |
||||
|
height: 200px; |
||||
|
position: relative; |
||||
|
font-size: 12px; |
||||
|
position: absolute; |
||||
|
color: #ffff80; |
||||
|
z-index: 2; |
||||
|
" |
||||
|
:style="{ left: item.style.mLeft, bottom: item.style.mBottom }"> |
||||
|
<div style="width: 100%; height: 20px; color: rgb(128, 255, 255)"> |
||||
|
{{ item.deviceInfoName }} |
||||
|
</div> |
||||
|
<div style="width: 100%; height: 20px"> |
||||
|
出水温度: <span style="color: #fff">{{ item.number }}</span> |
||||
|
</div> |
||||
|
<div style="width: 100%; height: 20px"> |
||||
|
流量: <span style="color: #fff">{{ item.lNumber }}</span> |
||||
|
</div> |
||||
|
<img |
||||
|
style="position: absolute; width: 117.42px; height: 106.31px; left: -20px; top: 60px" |
||||
|
:src="item.url" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
<!-- 冷热水双蓄储能罐 --> |
||||
|
<template v-for="(item, index) in coldWater" :key="index"> |
||||
|
<div |
||||
|
style=" |
||||
|
width: 110px; |
||||
|
height: 110px; |
||||
|
position: relative; |
||||
|
font-size: 12px; |
||||
|
position: absolute; |
||||
|
color: #ffff80; |
||||
|
z-index: 2; |
||||
|
" |
||||
|
:style="{ left: item.style.mLeft, bottom: item.style.mBottom }"> |
||||
|
<div style="width: 100%; height: 20px; color: rgb(128, 255, 255)"> |
||||
|
{{ item.deviceInfoName }} |
||||
|
</div> |
||||
|
<div style="width: 100%; height: 20px"> |
||||
|
出水温度: <span style="color: #fff">{{ item.number }}</span> |
||||
|
</div> |
||||
|
<div style="width: 100%; height: 20px"> |
||||
|
容量: <span style="color: #fff">{{ item.rNumber }}</span> |
||||
|
</div> |
||||
|
<div style="width: 100%; height: 20px"> |
||||
|
流量: <span style="color: #fff">{{ item.lNumber }}</span> |
||||
|
</div> |
||||
|
<img |
||||
|
style="position: absolute; width: 110px; height: 110px; left: -20px; top: 80px" |
||||
|
:src="item.url" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
<!-- 用户水泵 --> |
||||
|
<template v-for="(item, index) in userWaterPump" :key="index"> |
||||
|
<div |
||||
|
style=" |
||||
|
width: 70.85px; |
||||
|
height: 70.85px; |
||||
|
position: relative; |
||||
|
font-size: 12px; |
||||
|
position: absolute; |
||||
|
" |
||||
|
:style="{ left: item.style.mLeft, bottom: item.style.mBottom }"> |
||||
|
<a-switch |
||||
|
:checked="item.user === 1 ? true : false" |
||||
|
size="small" |
||||
|
:disabled="true" |
||||
|
style="position: absolute; left: 30px; bottom: 0px; z-index: 2" |
||||
|
:class="{ |
||||
|
'blue-background': item.user === 1 ? true : false, |
||||
|
'grey-background': item.user === 1 ? false : true, |
||||
|
}" /> |
||||
|
<img |
||||
|
style=" |
||||
|
display: flex; |
||||
|
width: 70.85px; |
||||
|
height: 70.85px; |
||||
|
transform: rotateX(-4deg) rotateY(180deg) rotateZ(1deg); |
||||
|
" |
||||
|
:src="waterPumpSrc" /> |
||||
|
<div |
||||
|
style=" |
||||
|
color: rgb(128, 255, 255); |
||||
|
font-size: 12px; |
||||
|
position: absolute; |
||||
|
left: -40px; |
||||
|
top: 30px; |
||||
|
transform: rotateZ(-24deg); |
||||
|
" |
||||
|
>{{ item.deviceInfoName }}</div |
||||
|
> |
||||
|
</div> |
||||
|
</template> |
||||
|
<!-- 集水器 --> |
||||
|
<div |
||||
|
style=" |
||||
|
width: 226.19px; |
||||
|
height: 186.19px; |
||||
|
position: relative; |
||||
|
font-size: 12px; |
||||
|
position: absolute; |
||||
|
left: 66%; |
||||
|
bottom: 54%; |
||||
|
z-index: 2; |
||||
|
"> |
||||
|
<div style="position: absolute; left: 24%; color: rgb(128, 255, 255)">集水器</div> |
||||
|
<img |
||||
|
style="width: 226.19px; height: 176.19px; transform: rotateY(13deg)" |
||||
|
:src="manifoldSrc" /> |
||||
|
</div> |
||||
|
<!-- 定压补水装置 --> |
||||
|
<template v-for="(item, index) in pressureWater" :key="index"> |
||||
|
<div |
||||
|
style="width: 137px; height: 137px; position: relative; position: absolute; z-index: 2" |
||||
|
:style="{ left: item.style.mLeft, bottom: item.style.mBottom }"> |
||||
|
<img style="width: 137px; height: 127px; transform: rotateY(157deg)" :src="item.url" /> |
||||
|
<a-switch |
||||
|
:checked="item.user === 1 ? true : false" |
||||
|
size="small" |
||||
|
:disabled="true" |
||||
|
style="position: absolute; left: 40px; bottom: 0px" |
||||
|
:class="{ |
||||
|
'blue-background': item.user === 1 ? true : false, |
||||
|
'grey-background': item.user === 1 ? false : true, |
||||
|
}" /> |
||||
|
<div |
||||
|
style=" |
||||
|
width: 100%; |
||||
|
height: 40px; |
||||
|
color: rgb(128, 255, 255); |
||||
|
position: absolute; |
||||
|
bottom: -40px; |
||||
|
font-size: 12px; |
||||
|
"> |
||||
|
<div> {{ item.deviceInfoName }}</div> |
||||
|
<div style="width: 100%; height: 20px; color: #ffff80"> |
||||
|
压差: <span style="color: #fff">{{ item.yc }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<!-- 软化水箱 --> |
||||
|
<div |
||||
|
style=" |
||||
|
width: 110px; |
||||
|
height: 110px; |
||||
|
position: relative; |
||||
|
position: absolute; |
||||
|
left: 40%; |
||||
|
bottom: 2%; |
||||
|
z-index: 2; |
||||
|
"> |
||||
|
<img |
||||
|
style=" |
||||
|
width: 110px; |
||||
|
height: 110px; |
||||
|
transform: rotateX(3deg) rotateY(157deg) rotateZ(356deg); |
||||
|
" |
||||
|
:src="softenedWaterTankSrc" /> |
||||
|
<div style="color: rgb(128, 255, 255); font-size: 12px; position: absolute; bottom: -10px" |
||||
|
>软化水箱</div |
||||
|
> |
||||
|
</div> |
||||
|
<!-- 软化水装置 --> |
||||
|
<div |
||||
|
style=" |
||||
|
width: 110px; |
||||
|
height: 110px; |
||||
|
position: relative; |
||||
|
position: absolute; |
||||
|
left: 47%; |
||||
|
bottom: 11%; |
||||
|
z-index: 2; |
||||
|
"> |
||||
|
<img style="width: 110px; height: 110px" :src="coldWaterSrc" /> |
||||
|
<div style="color: rgb(128, 255, 255); font-size: 12px; position: absolute; left: 20px" |
||||
|
>软化水装置</div |
||||
|
> |
||||
|
</div> |
||||
|
<!-- 循环水处理器 --> |
||||
|
<div |
||||
|
style=" |
||||
|
width: 116.39px; |
||||
|
height: 116.39px; |
||||
|
position: relative; |
||||
|
position: absolute; |
||||
|
left: 54%; |
||||
|
bottom: 15%; |
||||
|
font-size: 12px; |
||||
|
z-index: 2; |
||||
|
"> |
||||
|
<img |
||||
|
style=" |
||||
|
width: 116.39px; |
||||
|
height: 116.39px; |
||||
|
transform: rotateX(3deg) rotateY(157deg) rotateZ(356deg); |
||||
|
" |
||||
|
:src="waterProcessorSrc" /> |
||||
|
<div style="position: absolute; left: 24%; color: rgb(128, 255, 255)">循环水处理器</div> |
||||
|
</div> |
||||
|
<!-- 地源水泵 --> |
||||
|
<template v-for="(item, index) in waterPump" :key="index"> |
||||
|
<div |
||||
|
style=" |
||||
|
width: 70.85px; |
||||
|
height: 70.85px; |
||||
|
position: relative; |
||||
|
font-size: 12px; |
||||
|
position: absolute; |
||||
|
" |
||||
|
:style="{ left: item.style.mLeft, bottom: item.style.mBottom }"> |
||||
|
<a-switch |
||||
|
:checked="item.user === 1 ? true : false" |
||||
|
size="small" |
||||
|
:disabled="true" |
||||
|
style="position: absolute; left: 30px; bottom: 0px; z-index: 2" |
||||
|
:class="{ |
||||
|
'blue-background': item.user === 1 ? true : false, |
||||
|
'grey-background': item.user === 1 ? false : true, |
||||
|
}" /> |
||||
|
<img |
||||
|
style=" |
||||
|
display: flex; |
||||
|
width: 70.85px; |
||||
|
height: 70.85px; |
||||
|
transform: rotateX(-4deg) rotateY(180deg) rotateZ(1deg); |
||||
|
" |
||||
|
:src="waterPumpSrc" /> |
||||
|
<div |
||||
|
style=" |
||||
|
color: rgb(128, 255, 255); |
||||
|
font-size: 12px; |
||||
|
position: absolute; |
||||
|
left: -40px; |
||||
|
top: 30px; |
||||
|
transform: rotateZ(-24deg); |
||||
|
" |
||||
|
>{{ item.deviceInfoName }}</div |
||||
|
> |
||||
|
</div> |
||||
|
</template> |
||||
|
<!-- 分水器 --> |
||||
|
<div |
||||
|
style=" |
||||
|
width: 216.19px; |
||||
|
height: 186.19px; |
||||
|
position: relative; |
||||
|
font-size: 12px; |
||||
|
position: absolute; |
||||
|
left: 80%; |
||||
|
bottom: 38%; |
||||
|
z-index: 2; |
||||
|
"> |
||||
|
<div style="position: absolute; left: 24%; color: rgb(128, 255, 255)">分水器</div> |
||||
|
<img |
||||
|
style="width: 226.19px; height: 176.19px; transform: rotateY(13deg)" |
||||
|
:src="manifoldSrc" /> |
||||
|
</div> |
||||
|
<!-- 土壤耦合器 --> |
||||
|
<div |
||||
|
style=" |
||||
|
width: 290.75px; |
||||
|
height: 215.29px; |
||||
|
position: relative; |
||||
|
font-size: 12px; |
||||
|
position: absolute; |
||||
|
left: 77%; |
||||
|
bottom: 6.5%; |
||||
|
"> |
||||
|
<div style="position: absolute; left: 60%; color: rgb(128, 255, 255); bottom: 5%" |
||||
|
>土壤耦合器</div |
||||
|
> |
||||
|
<img style="width: 290.75px; height: 215.29px" :src="soilCouplerSrc" /> |
||||
|
</div> |
||||
|
<!-- 线 --> |
||||
|
<template v-for="(item, index) in line" :key="index"> |
||||
|
<div |
||||
|
style="height: 12px; position: absolute; border-radius: 4px" |
||||
|
:style="{ |
||||
|
'background-image': 'url(' + item.url + ')', |
||||
|
left: item.style.mLeft, |
||||
|
width: item.style.width, |
||||
|
bottom: item.style.mBottom, |
||||
|
transform: item.style.transform, |
||||
|
'z-index': item.style.zIndex, |
||||
|
}"> |
||||
|
</div> |
||||
|
</template> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onMounted, onUnmounted } from 'vue'; |
||||
|
//图片资源 |
||||
|
import airSourceThermalCollapseSrc from '../image/coldAndHeatSources/airSourceThermalCollapse.png'; |
||||
|
import waterPumpSrc from '../image/coldAndHeatSources/waterPump.png'; |
||||
|
import screwGeothermalHeatPumpSrc from '../image/coldAndHeatSources/screwGeothermalHeatPump.png'; |
||||
|
import diluteCoolingPumpSrc from '../image/coldAndHeatSources/diluteCoolingPump.png'; |
||||
|
import coldWaterSrc from '../image/coldAndHeatSources/coldWater.png'; |
||||
|
import manifoldSrc from '../image/coldAndHeatSources/manifold.png'; |
||||
|
import pressureWaterSrc from '../image/coldAndHeatSources/pressureWater.png'; |
||||
|
import softenedWaterTankSrc from '../image/coldAndHeatSources/softenedWaterTank.png'; |
||||
|
import waterProcessorSrc from '../image/coldAndHeatSources/waterProcessor.png'; |
||||
|
import soilCouplerSrc from '../image/coldAndHeatSources/soilCoupler.png'; |
||||
|
import blueGif from '../image/coldAndHeatSources/blue.gif'; |
||||
|
import bluePng from '../image/coldAndHeatSources/blue.png'; |
||||
|
import greenGif from '../image/coldAndHeatSources/green.gif'; |
||||
|
import greenPng from '../image/coldAndHeatSources/green.png'; |
||||
|
const line = ref([ |
||||
|
//水泵线-热泵 |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '36%', |
||||
|
mLeft: '1%', |
||||
|
mBottom: '77%', |
||||
|
transform: 'rotateZ(-23deg)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '35%', |
||||
|
mLeft: '15%', |
||||
|
mBottom: '56%', |
||||
|
transform: 'rotateZ(-23deg) rotateY(180deg)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '16.5%', |
||||
|
mLeft: '13%', |
||||
|
mBottom: '62.5%', |
||||
|
transform: 'rotateZ(-144deg) rotateY(180deg)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '16.5%', |
||||
|
mLeft: '19%', |
||||
|
mBottom: '67.5%', |
||||
|
transform: 'rotateZ(-144deg) rotateY(180deg)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '16.5%', |
||||
|
mLeft: '25%', |
||||
|
mBottom: '73.5%', |
||||
|
transform: 'rotateZ(-144deg) rotateY(180deg)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '16.5%', |
||||
|
mLeft: '33.5%', |
||||
|
mBottom: '81.5%', |
||||
|
transform: 'rotateZ(-144deg) rotateY(180deg)', |
||||
|
}, |
||||
|
}, |
||||
|
//水泵 - 定压补水 |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '41%', |
||||
|
mLeft: '3%', |
||||
|
mBottom: '27.5%', |
||||
|
transform: 'rotateZ(213deg) rotateY(180deg)', |
||||
|
}, |
||||
|
}, |
||||
|
// 线 - 稀冷泵 |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '9%', |
||||
|
mLeft: '23.5%', |
||||
|
mBottom: '31%', |
||||
|
transform: 'rotateZ(-23deg) rotateY(180deg)', |
||||
|
}, |
||||
|
}, |
||||
|
//热泵 - 冷热水双蓄储能罐 |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '12.5%', |
||||
|
mLeft: '25.5%', |
||||
|
mBottom: '37%', |
||||
|
transform: 'rotateZ(213deg) rotateY(180deg)', |
||||
|
}, |
||||
|
}, |
||||
|
//冷热水双蓄储能罐 - 用户水泵 |
||||
|
{ |
||||
|
url: greenPng, |
||||
|
style: { |
||||
|
width: '10%', |
||||
|
mLeft: '47%', |
||||
|
mBottom: '47.8%', |
||||
|
transform: 'rotateZ(203deg)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: greenPng, |
||||
|
style: { |
||||
|
width: '20%', |
||||
|
mLeft: '37%', |
||||
|
mBottom: '41.5%', |
||||
|
transform: 'rotateZ(-28deg)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: greenPng, |
||||
|
style: { |
||||
|
width: '4%', |
||||
|
mLeft: '47%', |
||||
|
mBottom: '54%', |
||||
|
transform: 'rotateZ(-28deg)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: greenPng, |
||||
|
style: { |
||||
|
width: '4%', |
||||
|
mLeft: '56%', |
||||
|
mBottom: '46%', |
||||
|
transform: 'rotateZ(-28deg)', |
||||
|
}, |
||||
|
}, |
||||
|
//第二段线 |
||||
|
{ |
||||
|
url: greenPng, |
||||
|
style: { |
||||
|
width: '17.5%', |
||||
|
mLeft: '53%', |
||||
|
mBottom: '70%', |
||||
|
transform: 'rotateZ(-28deg)', |
||||
|
zIndex: 3, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: greenPng, |
||||
|
style: { |
||||
|
width: '2%', |
||||
|
mLeft: '68.2%', |
||||
|
mBottom: '77%', |
||||
|
transform: 'rotateZ(-28deg) rotatez(-63deg)', |
||||
|
zIndex: 3, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
url: greenPng, |
||||
|
style: { |
||||
|
width: '16.5%', |
||||
|
mLeft: '57.9%', |
||||
|
mBottom: '65%', |
||||
|
transform: 'rotateZ(-28deg)', |
||||
|
zIndex: 3, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: greenPng, |
||||
|
style: { |
||||
|
width: '1%', |
||||
|
mLeft: '72.8%', |
||||
|
mBottom: '72%', |
||||
|
transform: 'rotateZ(-28deg) rotatez(-63deg)', |
||||
|
zIndex: 3, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: greenPng, |
||||
|
style: { |
||||
|
width: '15%', |
||||
|
mLeft: '62%', |
||||
|
mBottom: '60.3%', |
||||
|
transform: 'rotateZ(-28deg)', |
||||
|
zIndex: 3, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: greenPng, |
||||
|
style: { |
||||
|
width: '1%', |
||||
|
mLeft: '75%', |
||||
|
mBottom: '68%', |
||||
|
transform: 'rotateZ(-28deg) rotatez(-63deg)', |
||||
|
zIndex: 3, |
||||
|
}, |
||||
|
}, |
||||
|
//软水箱 - 地源水泵 |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '34.5%', |
||||
|
mLeft: '38.5%', |
||||
|
mBottom: '20%', |
||||
|
transform: 'rotateZ(-27deg)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '4%', |
||||
|
mLeft: '62%', |
||||
|
mBottom: '40%', |
||||
|
transform: 'rotateZ(-28deg)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '4%', |
||||
|
mLeft: '72%', |
||||
|
mBottom: '30%', |
||||
|
transform: 'rotateZ(-28deg)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '11.5%', |
||||
|
mLeft: '62%', |
||||
|
mBottom: '33%', |
||||
|
transform: 'rotateZ(203deg)', |
||||
|
}, |
||||
|
}, |
||||
|
//第二段线 |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '16.5%', |
||||
|
mLeft: '68%', |
||||
|
mBottom: '55%', |
||||
|
transform: 'rotateZ(-28deg)', |
||||
|
zIndex: 3, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '2.5%', |
||||
|
mLeft: '82%', |
||||
|
mBottom: '61.3%', |
||||
|
transform: 'rotateZ(-28deg) rotatez(-63deg)', |
||||
|
zIndex: 3, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '15.5%', |
||||
|
mLeft: '73%', |
||||
|
mBottom: '49.5%', |
||||
|
transform: 'rotateZ(-28deg)', |
||||
|
zIndex: 3, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '1.5%', |
||||
|
mLeft: '86.5%', |
||||
|
mBottom: '56.3%', |
||||
|
transform: 'rotateZ(-28deg) rotatez(-63deg)', |
||||
|
zIndex: 3, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '13%', |
||||
|
mLeft: '78%', |
||||
|
mBottom: '44.5%', |
||||
|
transform: 'rotateZ(-32deg)', |
||||
|
zIndex: 3, |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '1%', |
||||
|
mLeft: '89%', |
||||
|
mBottom: '52.3%', |
||||
|
transform: 'rotateZ(-28deg) rotatez(-63deg)', |
||||
|
zIndex: 3, |
||||
|
}, |
||||
|
}, |
||||
|
//回温水线段 |
||||
|
{ |
||||
|
url: greenPng, |
||||
|
style: { |
||||
|
width: '2.5%', |
||||
|
mLeft: '71.5%', |
||||
|
mBottom: '61.5%', |
||||
|
transform: 'rotateZ(-28deg) rotatez(-63deg)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: greenPng, |
||||
|
style: { |
||||
|
width: '11.5%', |
||||
|
mLeft: '72%', |
||||
|
mBottom: '65%', |
||||
|
transform: 'rotateZ(-28deg)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: greenPng, |
||||
|
style: { |
||||
|
width: '22%', |
||||
|
mLeft: '80.5%', |
||||
|
mBottom: '58%', |
||||
|
transform: 'rotateZ(213deg) rotateY(180deg)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: greenPng, |
||||
|
style: { |
||||
|
width: '9%', |
||||
|
mLeft: '92.5%', |
||||
|
mBottom: '38%', |
||||
|
transform: 'rotateZ(-28deg)', |
||||
|
}, |
||||
|
}, |
||||
|
//供水水线段 |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '2.5%', |
||||
|
mLeft: '85.5%', |
||||
|
mBottom: '44.5%', |
||||
|
transform: 'rotateZ(-28deg) rotatez(-63deg)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '8%', |
||||
|
mLeft: '86%', |
||||
|
mBottom: '46%', |
||||
|
transform: 'rotateZ(-28deg)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '5%', |
||||
|
mLeft: '92.5%', |
||||
|
mBottom: '47%', |
||||
|
transform: 'rotateZ(213deg) rotateY(180deg)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '23%', |
||||
|
mLeft: '75.5%', |
||||
|
mBottom: '32.5%', |
||||
|
transform: 'rotateZ(-28deg)', |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
url: bluePng, |
||||
|
style: { |
||||
|
width: '7%', |
||||
|
mLeft: '76%', |
||||
|
mBottom: '17%', |
||||
|
transform: 'rotateZ(213deg) rotateY(180deg)', |
||||
|
}, |
||||
|
}, |
||||
|
]); |
||||
|
const airSourceThermalCollapse = ref([ |
||||
|
{ |
||||
|
deviceInfoName: '1#空气源热泵', |
||||
|
type: '制热', |
||||
|
number: '40℃', |
||||
|
style: { |
||||
|
mLeft: '17%', |
||||
|
mBottom: '54%', |
||||
|
}, |
||||
|
url: airSourceThermalCollapseSrc, |
||||
|
}, |
||||
|
{ |
||||
|
deviceInfoName: '2#空气源热泵', |
||||
|
type: '制热', |
||||
|
number: '40℃', |
||||
|
style: { |
||||
|
mLeft: '24%', |
||||
|
mBottom: '59%', |
||||
|
}, |
||||
|
url: airSourceThermalCollapseSrc, |
||||
|
}, |
||||
|
{ |
||||
|
deviceInfoName: '3#空气源热泵', |
||||
|
type: '制热', |
||||
|
number: '40℃', |
||||
|
style: { |
||||
|
mLeft: '31%', |
||||
|
mBottom: '66%', |
||||
|
}, |
||||
|
url: airSourceThermalCollapseSrc, |
||||
|
}, |
||||
|
{ |
||||
|
deviceInfoName: '4#空气源热泵', |
||||
|
type: '制热', |
||||
|
number: '40℃', |
||||
|
style: { |
||||
|
mLeft: '38%', |
||||
|
mBottom: '73%', |
||||
|
}, |
||||
|
url: airSourceThermalCollapseSrc, |
||||
|
}, |
||||
|
]); |
||||
|
//螺杆式地源热泵 |
||||
|
const screwGeothermalHeatPump = ref([ |
||||
|
{ |
||||
|
deviceInfoName: '1#螺杆式地源热泵', |
||||
|
type: '制热', |
||||
|
number: '40℃', |
||||
|
style: { |
||||
|
mLeft: '9.5%', |
||||
|
mBottom: '22.5%', |
||||
|
}, |
||||
|
url: screwGeothermalHeatPumpSrc, |
||||
|
}, |
||||
|
{ |
||||
|
deviceInfoName: '2#螺杆式地源热泵', |
||||
|
type: '制热', |
||||
|
number: '40℃', |
||||
|
style: { |
||||
|
mLeft: '18.5%', |
||||
|
mBottom: '31.5%', |
||||
|
}, |
||||
|
url: screwGeothermalHeatPumpSrc, |
||||
|
}, |
||||
|
]); |
||||
|
//稀冷泵 |
||||
|
const diluteCoolingPump = ref([ |
||||
|
{ |
||||
|
deviceInfoName: '稀冷泵', |
||||
|
number: '40℃', |
||||
|
lNumber: '139 m3/h', |
||||
|
style: { |
||||
|
mLeft: '30%', |
||||
|
mBottom: '29%', |
||||
|
}, |
||||
|
url: diluteCoolingPumpSrc, |
||||
|
}, |
||||
|
]); |
||||
|
//冷热水双蓄储能罐 |
||||
|
const coldWater = ref([ |
||||
|
{ |
||||
|
deviceInfoName: '冷热水双蓄储能罐', |
||||
|
number: '40℃', |
||||
|
lNumber: '139 m3/h', |
||||
|
rNumber: '135L', |
||||
|
style: { |
||||
|
mLeft: '36%', |
||||
|
mBottom: '39%', |
||||
|
}, |
||||
|
url: coldWaterSrc, |
||||
|
}, |
||||
|
]); |
||||
|
//用户水泵 |
||||
|
const userWaterPump = ref([ |
||||
|
{ |
||||
|
deviceInfoName: '1#用户水泵', |
||||
|
number: '40℃', |
||||
|
user: 1, |
||||
|
style: { |
||||
|
mLeft: '50%', |
||||
|
mBottom: '55.5%', |
||||
|
}, |
||||
|
url: waterPumpSrc, |
||||
|
}, |
||||
|
{ |
||||
|
deviceInfoName: '2#用户水泵', |
||||
|
number: '40℃', |
||||
|
user: 1, |
||||
|
style: { |
||||
|
mLeft: '55%', |
||||
|
mBottom: '51%', |
||||
|
}, |
||||
|
url: waterPumpSrc, |
||||
|
}, |
||||
|
{ |
||||
|
deviceInfoName: '3#用户水泵', |
||||
|
number: '40℃', |
||||
|
user: 1, |
||||
|
style: { |
||||
|
mLeft: '59%', |
||||
|
mBottom: '47%', |
||||
|
}, |
||||
|
url: waterPumpSrc, |
||||
|
}, |
||||
|
]); |
||||
|
//地源水泵 |
||||
|
const waterPump = ref([ |
||||
|
{ |
||||
|
deviceInfoName: '1#地源水泵', |
||||
|
number: '40℃', |
||||
|
user: 1, |
||||
|
style: { |
||||
|
mLeft: '65%', |
||||
|
mBottom: '41%', |
||||
|
}, |
||||
|
url: waterPumpSrc, |
||||
|
}, |
||||
|
{ |
||||
|
deviceInfoName: '2#地源水泵', |
||||
|
number: '40℃', |
||||
|
user: 1, |
||||
|
style: { |
||||
|
mLeft: '70%', |
||||
|
mBottom: '36%', |
||||
|
}, |
||||
|
url: waterPumpSrc, |
||||
|
}, |
||||
|
{ |
||||
|
deviceInfoName: '3#地源水泵', |
||||
|
number: '40℃', |
||||
|
user: 1, |
||||
|
style: { |
||||
|
mLeft: '75%', |
||||
|
mBottom: '31%', |
||||
|
}, |
||||
|
url: waterPumpSrc, |
||||
|
}, |
||||
|
]); |
||||
|
// 定压补水装置 |
||||
|
const pressureWater = ref([ |
||||
|
{ |
||||
|
deviceInfoName: '定压补水装置', |
||||
|
yc: '0.05 Bar', |
||||
|
user: 1, |
||||
|
style: { |
||||
|
mLeft: '29.4%', |
||||
|
mBottom: '8.4%', |
||||
|
}, |
||||
|
url: pressureWaterSrc, |
||||
|
}, |
||||
|
]); |
||||
|
const selectAllCheckbox = ref(1); |
||||
|
onMounted(() => {}); |
||||
|
onUnmounted(() => {}); |
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
.box-cold { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: rgba(0, 10, 48, 1); |
||||
|
border-radius: 4px; |
||||
|
display: flex; |
||||
|
position: relative; |
||||
|
color: white; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.ant-switch-checked { |
||||
|
background-color: #04d919 !important; |
||||
|
} |
||||
|
.grey-background.ant-switch .ant-switch-handle { |
||||
|
background-color: rgba(238, 238, 238, 1) !important; |
||||
|
} |
||||
|
|
||||
|
.grey-background.ant-switch { |
||||
|
background-color: grey !important; |
||||
|
} |
||||
|
:deep(.ant-switch-handle::before) { |
||||
|
background-color: rgba(0, 0, 0, 1) !important; |
||||
|
} |
||||
|
|
||||
|
.grey-background.ant-switch .ant-switch-handle { |
||||
|
background-color: grey !important; |
||||
|
} |
||||
|
:deep(.ant-switch-disabled) { |
||||
|
opacity: 1 !important; |
||||
|
} |
||||
|
</style> |
After Width: | Height: | Size: 67 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 401 B |
After Width: | Height: | Size: 7.3 KiB |
After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 24 KiB |
After Width: | Height: | Size: 409 B |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 17 KiB |
After Width: | Height: | Size: 9.9 KiB |
After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 2.5 KiB |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 24 KiB |
After Width: | Height: | Size: 440 B |
After Width: | Height: | Size: 3.3 KiB |
After Width: | Height: | Size: 4.1 KiB |
After Width: | Height: | Size: 336 B |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 2.0 KiB |