fks-yangshouda
5 months ago
19 changed files with 4211 additions and 2216 deletions
@ -0,0 +1,12 @@ |
|||
export enum carbonEmissionFactorLibrary { |
|||
getTableList = '/carbon/emission/factor/queryCarbonFactorPage', |
|||
addNewData = '/carbon/emission/factor/creatOrUpdate', |
|||
editUser = '/carbon-smart/api/user/edit', |
|||
frozen = '/carbon-smart/api/user/frozen', |
|||
resetPwd = '/carbon-smart/api/user/resetPwd', |
|||
del = '/carbon-smart/api/user/del', |
|||
batchDel = '/carbon-smart/api/user/batchDel', |
|||
getCarbonFactorTree = '/carbon/emission/type/getCarbonFactorTree', |
|||
queryDeptTree = '/carbon-smart/api/user/queryDeptTree', |
|||
queryUserPerList = '/carbon-smart/api/user/queryUserPerList', |
|||
} |
|||
@ -0,0 +1,50 @@ |
|||
const Base = () => import('/nerv-lib/saas/view/system/layout/content.vue'); |
|||
const equipment = { |
|||
path: '/carbonEmissionManage', |
|||
name: 'CarbonEmissionManage', |
|||
meta: { title: '碳排管理', icon: 'shebeiguanli', index: 1 }, |
|||
redirect: { name: 'CarbonEmissionStatistics' }, |
|||
children: [ |
|||
{ |
|||
path: 'carbonEmissionStatistics', |
|||
name: 'CarbonEmissionStatistics', |
|||
meta: { title: '碳排统计', hideChildren: true, icon: 'shebeiguanli' }, |
|||
component: Base, |
|||
redirect: { name: 'CarbonEmissionStatisticsIndex' }, |
|||
children: [ |
|||
{ |
|||
path: 'index', |
|||
name: 'CarbonEmissionStatisticsIndex', |
|||
// component: () => import('/nerv-lib/saas/view/menuManage/index.vue'),
|
|||
component: () => import('/@/view/carbonEmissionManage/carbonEmissionStatistics/index.vue'), |
|||
meta: { |
|||
title: '碳排统计', |
|||
keepAlive: true, |
|||
// backApi: [],
|
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
path: 'carbonEmissionFactorLibrary', |
|||
name: 'CarbonEmissionFactorLibrary', |
|||
meta: { title: '碳排因子库', hideChildren: true, icon: 'shebeiguanli' }, |
|||
component: Base, |
|||
redirect: { name: 'CarbonEmissionFactorLibraryIndex' }, |
|||
children: [ |
|||
{ |
|||
path: 'index', |
|||
name: 'CarbonEmissionFactorLibraryIndex', |
|||
// component: () => import('/nerv-lib/saas/view/menuManage/index.vue'),
|
|||
component: () => import('/@/view/carbonEmissionManage/carbonEmissionFactorLibrary/index.vue'), |
|||
meta: { |
|||
title: '碳排因子库', |
|||
keepAlive: true, |
|||
// backApi: [],
|
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}; |
|||
export default equipment; |
|||
@ -0,0 +1,229 @@ |
|||
import { ref } from 'vue'; |
|||
import { http } from '/nerv-lib/util'; |
|||
import { origanizemanage } from '/@/api/origanizemanage'; |
|||
export const formConfig = (disabled) => { |
|||
return ref([ |
|||
{ |
|||
field: 'field111', |
|||
component: 'NsChildForm', |
|||
componentProps: { |
|||
schemas: [ |
|||
{ |
|||
label: '排放源', |
|||
field: 'accountNo', |
|||
component: 'NsInput', |
|||
componentProps: { |
|||
placeholder: '请输入排放源', |
|||
maxLength: 20, |
|||
disabled, |
|||
}, |
|||
rules: [ |
|||
{ |
|||
required: true, |
|||
message: '请输入排放源', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
field: 'userStatus', |
|||
label: '排放气体', |
|||
component: 'NsSelect', |
|||
componentProps: { |
|||
allowClear: true, |
|||
placeholder: '请选择排放气体', |
|||
options: [ |
|||
{ |
|||
label: '正常', |
|||
value: 0, |
|||
}, |
|||
{ |
|||
label: '冻结', |
|||
value: 1, |
|||
}, |
|||
], |
|||
}, |
|||
rules: [ |
|||
{ |
|||
required: true, |
|||
message: '请选择排放气体', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
field: 'userStatus', |
|||
label: '排放环节', |
|||
component: 'NsSelect', |
|||
componentProps: { |
|||
allowClear: true, |
|||
placeholder: '请选择排放环节', |
|||
options: [ |
|||
{ |
|||
label: '正常', |
|||
value: 0, |
|||
}, |
|||
{ |
|||
label: '冻结', |
|||
value: 1, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
label: '排放因子', |
|||
field: 'accountNo', |
|||
component: 'NsInput', |
|||
componentProps: { |
|||
placeholder: '请输入排放因子值', |
|||
maxLength: 20, |
|||
disabled, |
|||
}, |
|||
rules: [ |
|||
{ |
|||
required: true, |
|||
message: '请输入排放因子值', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
field: 'userStatus', |
|||
label: '碳排前缀', |
|||
component: 'NsSelect', |
|||
componentProps: { |
|||
allowClear: true, |
|||
placeholder: '请选择碳排前缀', |
|||
options: [ |
|||
{ |
|||
label: '正常', |
|||
value: 0, |
|||
}, |
|||
{ |
|||
label: '冻结', |
|||
value: 1, |
|||
}, |
|||
], |
|||
}, |
|||
rules: [ |
|||
{ |
|||
required: true, |
|||
message: '请选择碳排前缀', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
label: '碳排后缀', |
|||
field: 'accountNo', |
|||
component: 'NsInput', |
|||
componentProps: { |
|||
placeholder: '请输入碳排后缀', |
|||
maxLength: 20, |
|||
disabled, |
|||
}, |
|||
rules: [ |
|||
{ |
|||
required: true, |
|||
message: '请输入碳排后缀', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
label: '已引用数', |
|||
field: 'accountNo', |
|||
component: 'NsInput', |
|||
componentProps: { |
|||
disabled: true, |
|||
maxLength: 20, |
|||
}, |
|||
}, |
|||
{ |
|||
label: '参考文献', |
|||
field: 'accountNo', |
|||
component: 'NsTextarea', |
|||
componentProps: { |
|||
placeholder: '请输入参考文献', |
|||
maxLength: 20, |
|||
disabled, |
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
]); |
|||
}; |
|||
const options = ref([]); |
|||
|
|||
const getUserPerList = (transform, params = {}) => { |
|||
return http.post(origanizemanage.queryUserPerList, { ...params }).then((res) => { |
|||
return res.data?.map((item) => { |
|||
item = { ...item, ...transform(item) }; |
|||
return item; |
|||
}); |
|||
}); |
|||
}; |
|||
export const formConfig2 = (casData: any) => { |
|||
return ref([ |
|||
{ |
|||
field: 'information', |
|||
component: 'NsCascader', |
|||
componentProps: { |
|||
placeholder: '请选择', |
|||
displayRender: ({ labels, selectedOptions }: any) => { |
|||
console.log(labels, selectedOptions); |
|||
|
|||
casData.value = selectedOptions.map(({ label, value }) => { |
|||
return { label, value }; |
|||
}); |
|||
return labels.join('/'); |
|||
}, |
|||
loadData: (selectedOptions, options) => { |
|||
console.log(selectedOptions, options, 'selectedOptions, options'); |
|||
|
|||
const targetOption = selectedOptions[selectedOptions.length - 1]; |
|||
let transForm, params; |
|||
// load options lazily
|
|||
if (!selectedOptions.length) { |
|||
transForm = (data) => { |
|||
data['label'] = data.orgName; |
|||
data['value'] = data.orgId; |
|||
data['isLeaf'] = false; |
|||
data['level'] = 1; |
|||
return data; |
|||
}; |
|||
getUserPerList(transForm).then((res) => { |
|||
options.value = [...res]; |
|||
}); |
|||
} |
|||
const id = targetOption?.value; |
|||
const level = targetOption?.level; |
|||
if (targetOption) { |
|||
targetOption.loading = true; |
|||
} |
|||
|
|||
if (level === 1) { |
|||
transForm = (data) => { |
|||
data['label'] = data.deptName; |
|||
data['value'] = data.deptId; |
|||
data['isLeaf'] = false; |
|||
data['level'] = 2; |
|||
return data; |
|||
}; |
|||
params = { orgId: id }; |
|||
} else if (level === 2) { |
|||
transForm = (data) => { |
|||
data['label'] = data.roleName; |
|||
data['value'] = data.roleId; |
|||
data['level'] = 3; |
|||
return data; |
|||
}; |
|||
params = { deptId: id }; |
|||
} |
|||
if (targetOption) { |
|||
getUserPerList(transForm, { ...params }).then((res) => { |
|||
targetOption.loading = false; |
|||
targetOption.children = [...res]; |
|||
}); |
|||
} |
|||
}, |
|||
}, |
|||
}, |
|||
]); |
|||
}; |
|||
@ -0,0 +1,619 @@ |
|||
<!-- @format --> |
|||
|
|||
<template> |
|||
<div class="main"> |
|||
<div class="left"> |
|||
<div class="top"> |
|||
<a-form style="width: 100%;margin: 0 auto;"> |
|||
<div class="ns-form-title"><span>排放分类</span></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="selectTreeDataValue" |
|||
placeholder="请输入关键词" |
|||
@search="onSearchTreeData" |
|||
/> |
|||
</a-col> |
|||
</a-row> |
|||
</div> |
|||
</a-form> |
|||
<a-tree |
|||
class="draggable-tree" |
|||
style="padding: 0 16px !important;" |
|||
draggable |
|||
show-line |
|||
checkable |
|||
block-node |
|||
:tree-data="gData" |
|||
@dragenter="onDragEnter" |
|||
@drop="onDrop" |
|||
:expanded-keys="expandedKeys" |
|||
:auto-expand-parent="autoExpandParent" |
|||
@expand="onExpand" |
|||
> |
|||
<template #title="{ emissionName }"> |
|||
<span v-if="emissionName && selectTreeDataValue && emissionName.indexOf(selectTreeDataValue) > -1"> |
|||
{{ emissionName.substring(0, emissionName.indexOf(selectTreeDataValue)) }} |
|||
<span style="color: #f50">{{ selectTreeDataValue }}</span> |
|||
{{ emissionName.substring(emissionName.indexOf(selectTreeDataValue) + selectTreeDataValue.length) }} |
|||
</span> |
|||
<span v-else>{{ emissionName }}</span> |
|||
</template> |
|||
</a-tree> |
|||
<a-popover placement="rightTop" trigger="focus"> |
|||
<template #content> |
|||
<div style="display: flex;flex-direction: column;"> |
|||
<a-button type="text">编辑</a-button> |
|||
<a-button type="text">新增子节点</a-button> |
|||
<a-button type="text">删除</a-button> |
|||
</div> |
|||
</template> |
|||
<MoreOutlined style="position: absolute;right: 0;top: 16%;font-size: 25px;cursor: pointer;" /> |
|||
</a-popover> |
|||
<div class="addTreeNode"> |
|||
<a-button type="primary" style="width:100%;" @click="addTreeNodeData">新增</a-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="right"> |
|||
<ns-view-list-table v-bind="tableConfig" :model="data" ref="mainRef" :scroll="{ x: 2000}"/> |
|||
</div> |
|||
<!-- 新增树节点 --> |
|||
<ns-modal :visible="treeNodeAdd" :title="operationTree" @ok="handleOk" @cancel="handleCancel"> |
|||
<ns-input |
|||
v-model:value="latitude1" |
|||
class="input" |
|||
placeholder="请输入排放类型" |
|||
/> |
|||
</ns-modal> |
|||
<!-- 新增数据库数据 --> |
|||
<a-drawer |
|||
:width="500" |
|||
:visible="visible" |
|||
:body-style="{ paddingBottom: '80px' }" |
|||
:footer-style="{ textAlign: 'right' }" |
|||
destroyOnClose |
|||
@close="onClose"> |
|||
<ns-form |
|||
ref="formRef" |
|||
:schemas="formSchema" |
|||
:model="formData" |
|||
class="form" |
|||
:wrapperCol="{ span: 20 }" |
|||
formLayout="vertical" /> |
|||
<template #footer> |
|||
<a-button style="margin-right: 8px" @click="onClose">取消</a-button> |
|||
<a-button type="primary" @click="onEdit">确定</a-button> |
|||
</template> |
|||
</a-drawer> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { MoreOutlined } from '@ant-design/icons-vue'; |
|||
import { computed, createVNode, defineComponent, reactive, ref, watchEffect,watch } from 'vue'; |
|||
import { http } from '/nerv-lib/util/http'; |
|||
import { NsMessage, NsModal } from '/nerv-lib/component'; |
|||
import { formConfig, formConfig2 } from './config'; |
|||
import { carbonEmissionFactorLibrary } from '/@/api/carbonEmissionFactorLibrary'; |
|||
import type { |
|||
AntTreeNodeDragEnterEvent, |
|||
AntTreeNodeDropEvent, |
|||
TreeProps, |
|||
} from 'ant-design-vue/es/tree'; |
|||
import { log } from 'node:console'; |
|||
|
|||
defineOptions({ name: 'OrderListIndex' }); |
|||
const selectTreeDataValue = ref<string>(''); |
|||
const mainRef = ref(); |
|||
const data = reactive({}); |
|||
let formData = ref({}); |
|||
const formRef = ref(); |
|||
const visible = ref(false); |
|||
const searchValue = ref<string>(''); |
|||
const searchValue2 = ref<string>(''); |
|||
const disabled = ref(false); |
|||
const treeNodeAdd = ref<boolean>(false); |
|||
const operationTree = ref<string>('新增'); |
|||
|
|||
const opMap: any = ref({ |
|||
type: 'add', |
|||
fuc: () => {}, |
|||
record: {}, |
|||
}); |
|||
watchEffect(() => { |
|||
disabled.value = opMap.value.type === 'edit'; |
|||
}); |
|||
const formSchema = formConfig(disabled); |
|||
const casData = ref([]); |
|||
const treeData = ref([]); |
|||
const userAuthList = ref([]); |
|||
const orgId = JSON.parse(sessionStorage.getItem('userInfo')).orgId; |
|||
const dynamicDisabled = computed(() => { |
|||
return formRef.value?.validateResult && userAuthList.value?.length; |
|||
}); |
|||
const fetch = (api, params = { orgId }) => { |
|||
return http.post(api, params); |
|||
}; |
|||
|
|||
// 树结构 |
|||
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); |
|||
type TreeDataItem = TreeProps['treeData'][number]; |
|||
const gData = ref<TreeProps['treeData']>(genData); |
|||
const onDragEnter = (info: AntTreeNodeDragEnterEvent) => { |
|||
console.log(info); |
|||
// expandedKeys 需要展开时 |
|||
// expandedKeys.value = info.expandedKeys; |
|||
}; |
|||
|
|||
const onDrop = (info: AntTreeNodeDropEvent) => { |
|||
console.log(info); |
|||
const dropKey = info.node.key; |
|||
const dragKey = info.dragNode.key; |
|||
const dropPos = info.node.pos.split('-'); |
|||
const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]); |
|||
const loop = (data: TreeProps['treeData'], key: string | number, callback: any) => { |
|||
data.forEach((item, index) => { |
|||
if (item.key === key) { |
|||
return callback(item, index, data); |
|||
} |
|||
if (item.children) { |
|||
return loop(item.children, key, callback); |
|||
} |
|||
}); |
|||
}; |
|||
const data = [...gData.value]; |
|||
|
|||
// Find dragObject |
|||
let dragObj: TreeDataItem; |
|||
loop(data, dragKey, (item: TreeDataItem, index: number, arr: TreeProps['treeData']) => { |
|||
arr.splice(index, 1); |
|||
dragObj = item; |
|||
}); |
|||
if (!info.dropToGap) { |
|||
// Drop on the content |
|||
loop(data, dropKey, (item: TreeDataItem) => { |
|||
item.children = item.children || []; |
|||
/// where to insert 示例添加到头部，可以是随意位置 |
|||
item.children.unshift(dragObj); |
|||
}); |
|||
} else if ( |
|||
(info.node.children || []).length > 0 && // Has children |
|||
info.node.expanded && // Is expanded |
|||
dropPosition === 1 // On the bottom gap |
|||
) { |
|||
loop(data, dropKey, (item: TreeDataItem) => { |
|||
item.children = item.children || []; |
|||
// where to insert 示例添加到头部，可以是随意位置 |
|||
item.children.unshift(dragObj); |
|||
}); |
|||
} else { |
|||
let ar: TreeProps['treeData'] = []; |
|||
let i = 0; |
|||
loop(data, dropKey, (_item: TreeDataItem, index: number, arr: TreeProps['treeData']) => { |
|||
ar = arr; |
|||
i = index; |
|||
}); |
|||
if (dropPosition === -1) { |
|||
ar.splice(i, 0, dragObj); |
|||
} else { |
|||
ar.splice(i + 1, 0, dragObj); |
|||
} |
|||
} |
|||
gData.value = data; |
|||
}; |
|||
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)[]>([]); |
|||
const autoExpandParent = ref<boolean>(true); |
|||
|
|||
const onExpand = (keys: string[]) => { |
|||
expandedKeys.value = keys; |
|||
autoExpandParent.value = false; |
|||
}; |
|||
|
|||
watch(selectTreeDataValue, 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; |
|||
selectTreeDataValue.value = value; |
|||
autoExpandParent.value = true; |
|||
}); |
|||
// 筛选树结构中的数据 |
|||
const onSearchTreeData = (selectTreeDataValue: string) => { |
|||
console.log('use value', selectTreeDataValue); |
|||
console.log('or use this.value', value.value); |
|||
}; |
|||
// 点击新增树节点 |
|||
const addTreeNodeData = () => { |
|||
treeNodeAdd.value = true; |
|||
}; |
|||
const handleOk = (e: MouseEvent) => { |
|||
console.log(e); |
|||
treeNodeAdd.value = false; |
|||
}; |
|||
const handleCancel = () => { |
|||
treeNodeAdd.value = false; |
|||
}; |
|||
// 企业树 |
|||
const getOrgTree = (params?) => { |
|||
fetch(carbonEmissionFactorLibrary.getCarbonFactorTree, params).then((res) => { |
|||
gData.value = res |
|||
}); |
|||
}; |
|||
getOrgTree(); |
|||
|
|||
const onSearch = () => { |
|||
console.log(searchValue.value); |
|||
getOrgTree({ orgName: searchValue.value, orgId }); |
|||
}; |
|||
|
|||
const tableFetch = (params) => { |
|||
console.log(params, 'sdfasfasdfasdfasdf'); |
|||
|
|||
tableConfig.value.params = { |
|||
...mainRef.value.params, |
|||
...params, |
|||
}; |
|||
|
|||
setTimeout(() => { |
|||
mainRef.value?.nsTableRef.reload(); |
|||
}, 100); |
|||
}; |
|||
|
|||
const handleSelect = (selectedKeys: any, info: any) => { |
|||
fetch(carbonEmissionFactorLibrary.queryDeptTree, { orgId: info.node?.orgInfo.orgId }).then((res) => { |
|||
treeData2.value = res.data; |
|||
}); |
|||
tableFetch({ orgId: info.node?.orgInfo.orgId }); |
|||
}; |
|||
|
|||
|
|||
const onClose = () => { |
|||
visible.value = false; |
|||
formData.value = {}; |
|||
userAuthList.value.splice(0); |
|||
}; |
|||
|
|||
const onEdit = () => { |
|||
formRef.value?.triggerSubmit().then(() => { |
|||
console.log(formData.value, 'formData.value'); |
|||
if (!userAuthList.value.length) { |
|||
NsMessage.error('请添加用户权限'); |
|||
return; |
|||
} |
|||
|
|||
opMap.value.fuc && |
|||
opMap.value.fuc({ ...formData.value, userRoleList: userAuthList.value, orgId }); |
|||
}); |
|||
}; |
|||
|
|||
const tableConfig = ref({ |
|||
title: '数据库', |
|||
api: carbonEmissionFactorLibrary.getTableList, |
|||
params: { |
|||
orgId, |
|||
}, |
|||
headerActions: [ |
|||
{ |
|||
label: '新增', |
|||
name: 'userAdd', |
|||
type: 'primary', |
|||
handle: () => { |
|||
opMap.value.type = 'add'; |
|||
setTimeout(() => { |
|||
formData.value = { |
|||
// orgName: JSON.parse(sessionStorage.getItem('userInfo')).orgName, |
|||
}; |
|||
userAuthList.value.splice(0); |
|||
}); |
|||
opMap.value.fuc = (formData: any) => { |
|||
return http.post(carbonEmissionFactorLibrary.addNewData, formData).then(() => { |
|||
mainRef.value?.nsTableRef.reload(); |
|||
visible.value = false; |
|||
NsMessage.success('操作成功'); |
|||
}); |
|||
}; |
|||
visible.value = true; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '导入', |
|||
type: 'primary', |
|||
name: 'userImport', |
|||
handle: () => {}, |
|||
}, |
|||
{ |
|||
label: '导出', |
|||
type: 'primary', |
|||
name: 'userExports', |
|||
}, |
|||
{ |
|||
label: '批量删除', |
|||
type: 'primary', |
|||
name: 'userBatchDel', |
|||
dynamicDisabled: (data: any) => { |
|||
return data.list.length === 0; |
|||
}, |
|||
confirm: true, |
|||
isReload: true, |
|||
isClearCheck: true, |
|||
api: carbonEmissionFactorLibrary.batchDel, |
|||
dynamicParams: { userIds: 'userId[]' }, |
|||
}, |
|||
], |
|||
columns: [ |
|||
{ |
|||
title: 'id', |
|||
dataIndex: 'address', |
|||
customRender: (text: any) => { |
|||
return text.index + 1; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '排放源', |
|||
dataIndex: 'emissionSources', |
|||
}, |
|||
{ |
|||
title: '排放类型', |
|||
dataIndex: 'emissionType', |
|||
}, |
|||
{ |
|||
title: '排放气体', |
|||
dataIndex: 'emissionGas', |
|||
}, |
|||
{ |
|||
title: '排放环节', |
|||
dataIndex: 'emissionProcess', |
|||
}, |
|||
{ |
|||
title: '排放因子', |
|||
dataIndex: 'emissionFactors', |
|||
}, |
|||
{ |
|||
title: '排放因子单位', |
|||
dataIndex: 'emissionFactorUnits', |
|||
}, |
|||
{ |
|||
title: '数据来源', |
|||
dataIndex: 'dataSources', |
|||
}, |
|||
{ |
|||
title: '数据库', |
|||
dataIndex: 'carbonDatabase', |
|||
}, |
|||
{ |
|||
title: '参考文献', |
|||
dataIndex: 'reference', |
|||
}, |
|||
{ |
|||
title: '引用数量', |
|||
dataIndex: 'numberOfReferences', |
|||
}, |
|||
], |
|||
columnActions: { |
|||
title: '操作', |
|||
actions: [ |
|||
{ |
|||
label: '编辑', |
|||
name: 'userEdit', |
|||
handle: (record: any) => { |
|||
userAuthList.value.splice(0); |
|||
setTimeout(() => { |
|||
formData.value = record; |
|||
userAuthList.value.push(...record.userRoleInfos); |
|||
}, 10); |
|||
opMap.value.type = 'edit'; |
|||
opMap.value.fuc = (formData: any) => { |
|||
return http.post(carbonEmissionFactorLibrary.editUser, formData).then(() => { |
|||
mainRef.value?.nsTableRef.reload(); |
|||
visible.value = false; |
|||
NsMessage.success('操作成功'); |
|||
}); |
|||
}; |
|||
visible.value = true; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '删除', |
|||
name: 'userDelete', |
|||
dynamicParams: 'userId', |
|||
confirm: true, |
|||
isReload: true, |
|||
api: carbonEmissionFactorLibrary.del, |
|||
}, |
|||
], |
|||
}, |
|||
|
|||
formConfig: { |
|||
schemas: [ |
|||
{ |
|||
field: 'emissionSources', |
|||
label: '排放源', |
|||
component: 'NsInput', |
|||
componentProps: { |
|||
placeholder: '请输入排放源', |
|||
maxLength: 30, |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'userStatus', |
|||
label: '排放环节', |
|||
component: 'NsSelect', |
|||
componentProps: { |
|||
allowClear: true, |
|||
placeholder: '请选择排放环节', |
|||
options: [ |
|||
{ |
|||
label: '正常', |
|||
value: 0, |
|||
}, |
|||
{ |
|||
label: '冻结', |
|||
value: 1, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'userStatus', |
|||
label: '排放气体', |
|||
component: 'NsSelect', |
|||
componentProps: { |
|||
allowClear: true, |
|||
placeholder: '请选择排放气体', |
|||
options: [ |
|||
{ |
|||
label: '正常', |
|||
value: 0, |
|||
}, |
|||
{ |
|||
label: '冻结', |
|||
value: 1, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'userStatus', |
|||
label: '数据库名称', |
|||
component: 'NsSelect', |
|||
componentProps: { |
|||
allowClear: true, |
|||
placeholder: '请选择数据库名称', |
|||
options: [ |
|||
{ |
|||
label: '正常', |
|||
value: 0, |
|||
}, |
|||
{ |
|||
label: '冻结', |
|||
value: 1, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'accountNo', |
|||
label: '文献关键字', |
|||
component: 'NsInput', |
|||
componentProps: { |
|||
placeholder: '请输入文献关键字', |
|||
maxLength: 30, |
|||
}, |
|||
}, |
|||
], |
|||
params: {}, |
|||
}, |
|||
// pagination: { defaultPageSize: 10 }, |
|||
rowKey: 'userId', |
|||
}); |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.main { |
|||
background-color: @ns-content-bg; |
|||
display: flex; |
|||
} |
|||
.left { |
|||
width: 300px; |
|||
// max-height: calc(100vh - 96px); |
|||
margin-right: @ns-gap; |
|||
min-width: fit-content; |
|||
> div { |
|||
border-radius: @ns-border-radius; |
|||
background-color: @white; |
|||
// box-shadow: @ns-content-box-shadow; |
|||
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; |
|||
} |
|||
.top { |
|||
overflow: auto; |
|||
// height: 50%; |
|||
// border-bottom: 5px solid rgb(229, 235, 240); |
|||
// overflow-y: auto; |
|||
} |
|||
.ns-form-title{ |
|||
font-weight: bold; |
|||
user-select: text; |
|||
padding: 16px; |
|||
margin-bottom: 16px; |
|||
padding-bottom: 10px; |
|||
border-bottom: 1px solid #e9e9e9; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,45 @@ |
|||
import { ref } from 'vue'; |
|||
import { origanizemanage } from '/@/api/origanizemanage'; |
|||
import { http } from '/nerv-lib/saas'; |
|||
|
|||
export const mockData = ref([ |
|||
{ |
|||
id: 3, |
|||
zhanghao: 'axb', |
|||
name: '张三', |
|||
sex: '男', |
|||
phone: '123456789', |
|||
email: '1234567889', |
|||
relation: '1', |
|||
role: '1', |
|||
status: '1', |
|||
}, |
|||
]); |
|||
|
|||
export const mockData2 = ref([ |
|||
{ |
|||
information: '铁路局1/产品部1/产品总监1', |
|||
}, |
|||
]); |
|||
|
|||
export const treeData = ref([ |
|||
{ |
|||
title: '铁路总局', |
|||
key: '0-0', |
|||
children: [ |
|||
{ title: '济阳站', key: '0-0-0' }, |
|||
{ title: '临沂站', key: '0-0-1' }, |
|||
], |
|||
}, |
|||
]); |
|||
|
|||
export const treeData2 = [ |
|||
{ |
|||
title: '全部', |
|||
key: '0-0', |
|||
children: [ |
|||
{ title: '产品部', key: '0-0-0' }, |
|||
{ title: '运维部', key: '0-0-1' }, |
|||
], |
|||
}, |
|||
]; |
|||
@ -0,0 +1,105 @@ |
|||
import { dateUtil } from '/nerv-lib/util/date-util'; |
|||
import data from './mock.json'; |
|||
export const tableConfig = { |
|||
title: '设备台账', |
|||
// api: '/carbon_emission/device/getDeviceList',
|
|||
value: data.dataSource, |
|||
params: { |
|||
page: 0, |
|||
pageSize: 10, |
|||
}, |
|||
rowSelection: null, |
|||
columns: [ |
|||
{ |
|||
title: '设备名称', |
|||
dataIndex: 'id', |
|||
}, |
|||
{ |
|||
title: '设备型号', |
|||
dataIndex: 'deviceCode', |
|||
}, |
|||
{ |
|||
title: 'SN码', |
|||
dataIndex: 'deviceName', |
|||
textNumber: 8, |
|||
textEllipsis: true, |
|||
}, |
|||
{ |
|||
title: '设备一级区域', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '设备二级区域', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '设备详细位置', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '设备规格', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '设备厂商纳税人识别号', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '厂商联系人', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '设备描述', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: 'IP地址', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '生产日期', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '采购日期', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '启用日期', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '设备成本（元）', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '使用期限', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '额定功率', |
|||
dataIndex: 'position', |
|||
}, |
|||
{ |
|||
title: '特殊参数', |
|||
dataIndex: 'position', |
|||
}, |
|||
], |
|||
|
|||
formConfig: { |
|||
schemas: [ |
|||
{ |
|||
field: 'createTime', |
|||
label: '生产日期', |
|||
component: 'NsRangePicker', |
|||
fieldMap: ['queryStartDate', 'queryEndDate'], |
|||
componentProps: { |
|||
valueFormat: 'YYYY-MM-DD', |
|||
}, |
|||
}, |
|||
], |
|||
params: {}, |
|||
}, |
|||
// pagination: { pageSizeOptions: false },
|
|||
rowKey: 'uuid', |
|||
}; |
|||
@ -0,0 +1,18 @@ |
|||
<template> |
|||
<a-tabs v-model:activeKey="activeKey"> |
|||
<a-tab-pane key="1" tab="能耗统计"> |
|||
<ns-view-list-table v-bind="tableConfig" /> |
|||
</a-tab-pane> |
|||
<a-tab-pane key="2" tab="碳排统计" force-render>Content of Tab Pane 2</a-tab-pane> |
|||
<a-tab-pane key="3" tab="碳排速算">Content of Tab Pane 3</a-tab-pane> |
|||
</a-tabs> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { ref } from 'vue'; |
|||
import { tableConfig } from './config'; |
|||
defineOptions({ |
|||
name: 'CarbonEmissionStatisticsIndex', // 与页面路由name一致缓存才可生效 |
|||
}); |
|||
const activeKey = ref('1'); |
|||
</script> |
|||
|
|||
@ -0,0 +1,506 @@ |
|||
{ |
|||
"data":[ |
|||
{ |
|||
"title": "家居照明", |
|||
"key": "1", |
|||
"children": [ |
|||
{ |
|||
"title": "灯泡", |
|||
"key": "1-1", |
|||
"children": [ |
|||
{ |
|||
"title": "LED灯泡", |
|||
"key": "1-1-1", |
|||
"children": [ |
|||
{ |
|||
"title": "E27 LED灯泡", |
|||
"key": "1-1-1-1", |
|||
"attr": { |
|||
"瓦特": "7W", |
|||
"光通量": "500lm", |
|||
"色温": "2700K" |
|||
} |
|||
}, |
|||
{ |
|||
"title": "E14 小灯泡", |
|||
"key": "1-1-1-2", |
|||
"attr": { |
|||
"瓦特": "4W", |
|||
"光通量": "250lm", |
|||
"色温": "6500K" |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"title": "节能灯", |
|||
"key": "1-1-2", |
|||
"children": [ |
|||
{ |
|||
"title": "E27 节能灯泡", |
|||
"key": "1-1-2-1", |
|||
"attr": { |
|||
"瓦特": "11W", |
|||
"光通量": "800lm", |
|||
"色温": "6500K" |
|||
} |
|||
} |
|||
] |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"title": "灯具", |
|||
"key": "1-2", |
|||
"children": [ |
|||
{ |
|||
"title": "吊灯", |
|||
"key": "1-2-1", |
|||
"children": [ |
|||
{ |
|||
"title": "水晶吊灯", |
|||
"key": "1-2-1-1", |
|||
"attr": { |
|||
"尺寸": "Φ60cm", |
|||
"适用面积": "15-20㎡" |
|||
} |
|||
}, |
|||
{ |
|||
"title": "现代简约吊灯", |
|||
"key": "1-2-1-2", |
|||
"attr": { |
|||
"尺寸": "Φ52cm", |
|||
"适用面积": "10-15㎡" |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"title": "台灯", |
|||
"key": "1-2-2", |
|||
"children": [ |
|||
{ |
|||
"title": "护眼台灯", |
|||
"key": "1-2-2-1", |
|||
"attr": { |
|||
"瓦特": "18W", |
|||
"调光调色": "是" |
|||
} |
|||
}, |
|||
{ |
|||
"title": "折叠臂台灯", |
|||
"key": "1-2-2-2", |
|||
"attr": { |
|||
"瓦特": "14W", |
|||
"调光调色": "否" |
|||
} |
|||
} |
|||
] |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"title": "开关插座", |
|||
"key": "1-3", |
|||
"children": [ |
|||
{ |
|||
"title": "智能开关", |
|||
"key": "1-3-1", |
|||
"children": [ |
|||
{ |
|||
"title": "触控式智能开关", |
|||
"key": "1-3-1-1", |
|||
"attr": { |
|||
"控制方式": "触控/远程", |
|||
"兼容性": "ZigBee/WiFi" |
|||
} |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"title": "插座", |
|||
"key": "1-3-2", |
|||
"children": [ |
|||
{ |
|||
"title": "多功能插座", |
|||
"key": "1-3-2-1", |
|||
"attr": { |
|||
"插孔类型": "2/3插", |
|||
"USB接口": "有" |
|||
} |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"title": "电梯", |
|||
"key": "3", |
|||
"children": [ |
|||
{ |
|||
"title": "扶梯", |
|||
"key": "301" |
|||
}, |
|||
{ |
|||
"title": "直梯", |
|||
"key": "302" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"title": "冷源源", |
|||
"key": "4", |
|||
"children": [ |
|||
{ |
|||
"title": "通风及空调设备", |
|||
"key": "5", |
|||
"children": [ |
|||
{ |
|||
"title": "组合式空调机组", |
|||
"key": "501" |
|||
}, |
|||
{ |
|||
"title": "新风机组", |
|||
"key": "502" |
|||
}, |
|||
{ |
|||
"title": "精密空调", |
|||
"key": "503" |
|||
}, |
|||
{ |
|||
"title": "风机盘管", |
|||
"key": "504" |
|||
}, |
|||
{ |
|||
"title": "VAV", |
|||
"key": "505" |
|||
}, |
|||
{ |
|||
"title": "室外多联机", |
|||
"key": "506" |
|||
}, |
|||
{ |
|||
"title": "风幕机", |
|||
"key": "507" |
|||
}, |
|||
{ |
|||
"title": "球喷", |
|||
"key": "508" |
|||
}, |
|||
{ |
|||
"title": "送风机", |
|||
"key": "509" |
|||
}, |
|||
{ |
|||
"title": "排风机", |
|||
"key": "510" |
|||
}, |
|||
{ |
|||
"title": "排风兼排烟机", |
|||
"key": "511" |
|||
}, |
|||
{ |
|||
"title": "通风机", |
|||
"key": "512" |
|||
}, |
|||
{ |
|||
"title": "风阀", |
|||
"key": "513" |
|||
}, |
|||
{ |
|||
"title": "风柱式空调", |
|||
"key": "514" |
|||
} |
|||
] |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"title": "照明", |
|||
"key": "6", |
|||
"children": [ |
|||
{ |
|||
"title": "多功能传感器", |
|||
"key": "701" |
|||
}, |
|||
{ |
|||
"title": "照度传感器", |
|||
"key": "702" |
|||
}, |
|||
{ |
|||
"title": "噪声传感器", |
|||
"key": "703" |
|||
} |
|||
] |
|||
} |
|||
], |
|||
"dataSource":[ |
|||
{ |
|||
"id": "d4", |
|||
"isDel": "0", |
|||
"officesId": "84", |
|||
"deviceCode": "37430200143", |
|||
"deviceName": "地听测试电表", |
|||
"category": "1", |
|||
"type": "1001", |
|||
"energyCount": "1", |
|||
"serialNumber": "69", |
|||
"pidCode": null, |
|||
"brand": "", |
|||
"types": "", |
|||
"manufacturer": "elit non in", |
|||
"contacts": "ad reprehenderit", |
|||
"phonenumber": "34", |
|||
"position": "in esse commodo", |
|||
"activeState": "1", |
|||
"measurementDirection": "1", |
|||
"deviceMagnification": 62, |
|||
"deviceAccuracy": "89", |
|||
"frequency": "anim consequat irure", |
|||
"standardFrequency": "ut elit", |
|||
"deviceHead": "pariatur ex velit", |
|||
"constructor": "84566", |
|||
"voltageType": "cillum aliquip reprehenderit", |
|||
"pt": 61, |
|||
"ct": 64, |
|||
"communicationProtocol": "cupidatat nisi ea ad", |
|||
"ip": "", |
|||
"port": "", |
|||
"com": "", |
|||
"slaveAddress": "", |
|||
"dlt": "", |
|||
"conversionIdentifier": "48", |
|||
"multiplicationAdjustment": "1", |
|||
"accessMethod": "1", |
|||
"replacementFrequency": "0", |
|||
"dataDetail": "sit", |
|||
"insertTime": null, |
|||
"children": null, |
|||
"devicePointList": null, |
|||
"insertUser": null |
|||
}, |
|||
{ |
|||
"id": "d1", |
|||
"isDel": "0", |
|||
"officesId": "84", |
|||
"deviceCode": "37430200144", |
|||
"deviceName": "地听测试2", |
|||
"category": "1", |
|||
"type": "1001", |
|||
"energyCount": "1", |
|||
"serialNumber": "69", |
|||
"pidCode": null, |
|||
"brand": "", |
|||
"types": "", |
|||
"manufacturer": "elit non in", |
|||
"contacts": "ad reprehenderit", |
|||
"phonenumber": "34", |
|||
"position": "in esse commodo", |
|||
"activeState": "1", |
|||
"measurementDirection": "1", |
|||
"deviceMagnification": 62, |
|||
"deviceAccuracy": "89", |
|||
"frequency": "anim consequat irure", |
|||
"standardFrequency": "ut elit", |
|||
"deviceHead": "pariatur ex velit", |
|||
"constructor": "84566", |
|||
"voltageType": "cillum aliquip reprehenderit", |
|||
"pt": 61, |
|||
"ct": 64, |
|||
"communicationProtocol": "802", |
|||
"ip": "10.5.36.0", |
|||
"port": "6000", |
|||
"com": "", |
|||
"slaveAddress": "123测试", |
|||
"dlt": "", |
|||
"conversionIdentifier": "48", |
|||
"multiplicationAdjustment": "1", |
|||
"accessMethod": "1", |
|||
"replacementFrequency": "0", |
|||
"dataDetail": "sit", |
|||
"insertTime": "2024-02-28 11:26:58", |
|||
"children": null, |
|||
"devicePointList": null, |
|||
"insertUser": null |
|||
}, |
|||
{ |
|||
"id": "d2", |
|||
"isDel": "0", |
|||
"officesId": "84", |
|||
"deviceCode": "1235623", |
|||
"deviceName": "测试设备2", |
|||
"category": "1", |
|||
"type": "1001", |
|||
"energyCount": "是", |
|||
"serialNumber": "69", |
|||
"pidCode": null, |
|||
"brand": "", |
|||
"types": "", |
|||
"manufacturer": "elit non in", |
|||
"contacts": "ad reprehenderit", |
|||
"phonenumber": "34", |
|||
"position": "in esse commodo", |
|||
"activeState": "1", |
|||
"measurementDirection": "1", |
|||
"deviceMagnification": 62, |
|||
"deviceAccuracy": "89", |
|||
"frequency": "anim consequat irure", |
|||
"standardFrequency": "ut elit", |
|||
"deviceHead": "pariatur ex velit", |
|||
"constructor": null, |
|||
"voltageType": "cillum aliquip reprehenderit", |
|||
"pt": 61, |
|||
"ct": 64, |
|||
"communicationProtocol": "cupidatat nisi ea ad", |
|||
"ip": "", |
|||
"port": "", |
|||
"com": "", |
|||
"slaveAddress": "", |
|||
"dlt": "", |
|||
"conversionIdentifier": "48", |
|||
"multiplicationAdjustment": "1", |
|||
"accessMethod": "1", |
|||
"replacementFrequency": "0", |
|||
"dataDetail": "sit", |
|||
"insertTime": "2024-02-28 11:31:57", |
|||
"children": null, |
|||
"devicePointList": null, |
|||
"insertUser": null |
|||
}, |
|||
{ |
|||
"id": "d7", |
|||
"isDel": "0", |
|||
"officesId": "", |
|||
"deviceCode": "0213", |
|||
"deviceName": "测试", |
|||
"category": "1", |
|||
"type": "1001", |
|||
"energyCount": "1", |
|||
"serialNumber": "", |
|||
"pidCode": null, |
|||
"brand": "6da085e5-956d-4000-bd3c-ebb01a9c99a1", |
|||
"types": "d7a8aede-b821-4ff2-953d-601a20e5a948", |
|||
"manufacturer": "", |
|||
"contacts": "", |
|||
"phonenumber": null, |
|||
"position": "", |
|||
"activeState": "", |
|||
"measurementDirection": "", |
|||
"deviceMagnification": null, |
|||
"deviceAccuracy": null, |
|||
"frequency": "", |
|||
"standardFrequency": "", |
|||
"deviceHead": "", |
|||
"constructor": "", |
|||
"voltageType": "", |
|||
"pt": null, |
|||
"ct": null, |
|||
"communicationProtocol": "", |
|||
"ip": "", |
|||
"port": "", |
|||
"com": "", |
|||
"slaveAddress": "", |
|||
"dlt": "", |
|||
"conversionIdentifier": "1", |
|||
"multiplicationAdjustment": "1", |
|||
"accessMethod": "", |
|||
"replacementFrequency": "0", |
|||
"dataDetail": "", |
|||
"insertTime": "2024-03-14 20:01:53", |
|||
"children": null, |
|||
"devicePointList": null, |
|||
"insertUser": "" |
|||
}, |
|||
{ |
|||
"id": "d3", |
|||
"isDel": "0", |
|||
"officesId": "84", |
|||
"deviceCode": "81", |
|||
"deviceName": "设备名称1111", |
|||
"category": "1", |
|||
"type": "1001", |
|||
"energyCount": "1", |
|||
"serialNumber": "69", |
|||
"pidCode": null, |
|||
"brand": "6da085e5-956d-4000-bd3c-ebb01a9c99a1", |
|||
"types": "d7a8aede-b821-4ff2-953d-601a20e5a948", |
|||
"manufacturer": "elit non in", |
|||
"contacts": "ad reprehenderit", |
|||
"phonenumber": "34", |
|||
"position": "in esse commodo", |
|||
"activeState": "1", |
|||
"measurementDirection": "1", |
|||
"deviceMagnification": 62, |
|||
"deviceAccuracy": "89", |
|||
"frequency": "anim consequat irure", |
|||
"standardFrequency": "ut elit", |
|||
"deviceHead": "pariatur ex velit", |
|||
"constructor": "84566", |
|||
"voltageType": "cillum aliquip reprehenderit", |
|||
"pt": 61, |
|||
"ct": 64, |
|||
"communicationProtocol": "cupidatat nisi ea ad", |
|||
"ip": "", |
|||
"port": "", |
|||
"com": "", |
|||
"slaveAddress": "", |
|||
"dlt": "", |
|||
"conversionIdentifier": "48", |
|||
"multiplicationAdjustment": "1", |
|||
"accessMethod": "1", |
|||
"replacementFrequency": "0", |
|||
"dataDetail": "sit", |
|||
"insertTime": "2024-03-15 17:34:24", |
|||
"children": null, |
|||
"devicePointList": null, |
|||
"insertUser": null |
|||
}, |
|||
{ |
|||
"id": "d43fdfff_02_0001", |
|||
"isDel": "0", |
|||
"officesId": "843fdffff213d2d3", |
|||
"deviceCode": "00037430200143", |
|||
"deviceName": "应感者酸严", |
|||
"category": "1", |
|||
"type": "1001", |
|||
"energyCount": "esse consequat", |
|||
"serialNumber": "69", |
|||
"pidCode": null, |
|||
"brand": "", |
|||
"types": "", |
|||
"manufacturer": "elit non in", |
|||
"contacts": "ad reprehenderit", |
|||
"phonenumber": "34", |
|||
"position": "in esse commodo", |
|||
"activeState": "1", |
|||
"measurementDirection": "1", |
|||
"deviceMagnification": 62, |
|||
"deviceAccuracy": "89", |
|||
"frequency": "anim consequat irure", |
|||
"standardFrequency": "ut elit", |
|||
"deviceHead": "pariatur ex velit", |
|||
"constructor": "84566", |
|||
"voltageType": "cillum aliquip reprehenderit", |
|||
"pt": 61, |
|||
"ct": 64, |
|||
"communicationProtocol": "cupidatat nisi ea ad", |
|||
"ip": "", |
|||
"port": "", |
|||
"com": "", |
|||
"slaveAddress": "", |
|||
"dlt": "", |
|||
"conversionIdentifier": "48", |
|||
"multiplicationAdjustment": "1", |
|||
"accessMethod": "1", |
|||
"replacementFrequency": "0", |
|||
"dataDetail": "sit", |
|||
"insertTime": "2024-04-29 11:12:43", |
|||
"children": null, |
|||
"devicePointList": null, |
|||
"insertUser": null |
|||
} |
|||
] |
|||
|
|||
} |
|||
@ -0,0 +1,159 @@ |
|||
// 页面容器 |
|||
.lighting-box { |
|||
// width: 100%; |
|||
// height: 100%; |
|||
position: relative; |
|||
// background: linear-gradient(#badaff, #8cabeb, #7095de); |
|||
.drawer-box { |
|||
width: 30px; |
|||
height: 40px; |
|||
border-radius: 2px; |
|||
position: fixed; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
margin: auto; |
|||
background: rgba(0, 0 ,0 ,0.5); |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
.drawer-icon { |
|||
|
|||
} |
|||
} |
|||
// 照明设备功能总容器 |
|||
.lighting-img-box { |
|||
position: relative; |
|||
width: 1280px; |
|||
height: 720px; |
|||
user-select: none; |
|||
background-image: url(../image/bg.jpg); |
|||
// 由于背景是俯视图，会产生有交点的透视效果，故使用透视属性 |
|||
perspective: 1000px; |
|||
perspective-origin: 850px -160px; |
|||
// 左上角区域切换功能 |
|||
.btn-box { |
|||
width: 120px; |
|||
position: sticky; |
|||
top: 10px; |
|||
left: 10px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 8px; |
|||
.btn-item { |
|||
cursor: pointer; |
|||
width: 100%; |
|||
height: 40px; |
|||
border-radius: 4px; |
|||
background: rgba(39, 120, 255, 1); |
|||
border: 1px solid rgba(51, 199, 255, 1); |
|||
box-shadow: 0px 10px 15px rgba(0, 54, 136, 0.3); |
|||
font-size: 18px; |
|||
color: white; |
|||
} |
|||
.btn-item:hover { |
|||
color: black; |
|||
} |
|||
} |
|||
// 大区分区 |
|||
.area{ |
|||
position: absolute; |
|||
bottom: 170px; |
|||
left: 240px; |
|||
width: 780px; |
|||
height: 240px; |
|||
transform: rotateX(79deg) rotateZ(-22deg) skew(29deg); |
|||
display: flex; |
|||
gap: 8px; |
|||
.area1 { |
|||
width: 170px; |
|||
background: rgba(0, 251, 91, 0.3); |
|||
border: 2px solid rgb(0, 251, 91); |
|||
display: flex; |
|||
} |
|||
.area2 { |
|||
width: 240px; |
|||
background: rgba(255, 165, 0, 0.3); |
|||
border: 2px solid rgb(255, 165, 0); |
|||
display: flex; |
|||
} |
|||
.area3 { |
|||
width: 110px; |
|||
background: rgba(255, 0, 0, 0.3); |
|||
border: 2px solid rgb(255, 0, 0); |
|||
} |
|||
.area4 { |
|||
flex: 1; |
|||
background: rgba(80, 236, 244, 0.3); |
|||
border: 2px solid rgb(80, 236, 244); |
|||
} |
|||
.area-item:hover { |
|||
border:2px solid white; |
|||
} |
|||
.area-item { |
|||
cursor: pointer; |
|||
transition: all ease 0.2s; |
|||
>.light-group { |
|||
height: 100%; |
|||
flex: 1; |
|||
display:flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
.group-shadow1 { |
|||
width: 35px; |
|||
height: 150px; |
|||
border-radius: 20px; |
|||
background: rgba(0, 0, 0, 0.1); |
|||
} |
|||
.group-shadow2 { |
|||
width: 35px; |
|||
height: 180px; |
|||
border-radius: 20px; |
|||
background: rgba(0, 0, 0, 0.1); |
|||
} |
|||
.group-shadow3 { |
|||
width: 40px; |
|||
height: 180px; |
|||
border-radius: 20px; |
|||
background: rgba(0, 0, 0, 0.1); |
|||
} |
|||
.group-shadow4 { |
|||
width: 40px; |
|||
height: 160px; |
|||
border-radius: 20px; |
|||
background: rgba(0, 0, 0, 0.1); |
|||
} |
|||
} |
|||
.group-shadow { |
|||
transition: all ease 0.2s; |
|||
} |
|||
.group-shadow:hover { |
|||
border: 2px solid white; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.ns-content-main { |
|||
position: relative; |
|||
// 抽屉伸缩按钮 |
|||
.drawer-box { |
|||
width: 30px; |
|||
height: 40px; |
|||
border-radius: 2px; |
|||
position: fixed; |
|||
right: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
margin: auto; |
|||
background: rgba(0, 0 ,0 ,0.5); |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
.drawer-icon { |
|||
|
|||
} |
|||
} |
|||
} |
|||
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,135 @@ |
|||
<template> |
|||
<a-popover color="rgba(0, 0, 0, 0.8)"> |
|||
<template #content> |
|||
<div class="light-tag"> |
|||
<div class="light-tag-tit"> |
|||
<div> |
|||
<img src="/asset/image//bulbLogo/21962.png" alt="" /> |
|||
<span class="tag-text">{{ result.name }}</span> |
|||
</div> |
|||
<button class="right-button">{{ type == 1 ? '正常' : '关闭' }}</button> |
|||
</div> |
|||
<div class="light-tag-box"> |
|||
<div class="tag-box-item"> |
|||
<img src="/asset/image//bulbLogo/22496.png" alt="" /> |
|||
<span class="title">控制模式</span> |
|||
<span class="result">自动</span> |
|||
</div> |
|||
<div class="tag-box-item"> |
|||
<img src="/asset/image//bulbLogo/22496.png" alt="" /> |
|||
<span class="title">亮度</span> |
|||
<span class="result">{{ result.brightness }}</span> |
|||
</div> |
|||
<div class="tag-box-item"> |
|||
<img src="/asset/image//bulbLogo/22496.png" alt="" /> |
|||
<span class="title">控制场景</span> |
|||
<span class="result">{{ result.automatic2 }}</span> |
|||
</div> |
|||
<div class="tag-box-item"> |
|||
<img src="/asset/image//bulbLogo/22496.png" alt="" /> |
|||
<span class="title">色温</span> |
|||
<span class="result">{{ result.brightness3 }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<div class="icon-box" :style="styleObject"> |
|||
<img v-if="type == 1" class="icon-item" src="/asset/image/bulbLogo/22394.png" alt=""> |
|||
<img v-if="type == 2" class="icon-item" src="/asset/image/bulbLogo/22396.png" alt=""> |
|||
<img v-if="type == 3" class="icon-item" src="/asset/image/bulbLogo/22400.png" alt=""> |
|||
</div> |
|||
</a-popover> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref } from 'vue'; |
|||
defineProps({ |
|||
styleObject: Object, |
|||
type: Number |
|||
}); |
|||
|
|||
const result = ref({ |
|||
id: '1', |
|||
name: '站厅照明 1区', |
|||
manual: '手动', |
|||
automatic: '自动', |
|||
brightness: '100lux', |
|||
brightness2: '30lux', |
|||
manual2: '手动', |
|||
automatic2: '舒适', |
|||
brightness3: '4000k', |
|||
brightness4: '3800k', |
|||
}); |
|||
|
|||
</script> |
|||
<style lang="less" scoped> |
|||
.icon-box { |
|||
width: 25px; |
|||
height: 25px; |
|||
position: absolute; |
|||
.icon-item { |
|||
width: 25px; |
|||
cursor: pointer; |
|||
transition: all ease 0.1s; |
|||
} |
|||
.icon-item:active { |
|||
transform: scale(1.2); |
|||
} |
|||
} |
|||
// 悬浮窗外部 |
|||
.light-tag { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 10px; |
|||
// 悬浮窗标题 |
|||
.light-tag-tit { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
vertical-align: middle; |
|||
height: 30px; |
|||
.tag-text { |
|||
font-size: 16px; |
|||
font-weight: 700; |
|||
color: white; |
|||
padding-left: 10px; |
|||
} |
|||
.right-button { |
|||
width: 50px; |
|||
height: 26px; |
|||
background: rgba(57, 215, 187, 0.1); |
|||
border: 1px solid rgba(57, 215, 187, 1); |
|||
font-size: 12px; |
|||
color: rgba(57, 215, 187, 1); |
|||
} |
|||
} |
|||
} |
|||
// 悬浮窗底部4格子 |
|||
.light-tag-box { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr; |
|||
grid-template-rows: 1fr 1fr; |
|||
grid-gap: 10px; |
|||
.tag-box-item { |
|||
position: relative; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
img { |
|||
width: 120px; |
|||
vertical-align: middle; |
|||
} |
|||
.title { |
|||
position: absolute; |
|||
left: 60px; |
|||
top: 13px; |
|||
color: rgba(64, 255, 252, 1); |
|||
} |
|||
.result { |
|||
line-height: 50px; |
|||
font-size: 16px; |
|||
font-weight: 700; |
|||
color: white; |
|||
}; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue