zhaohy
4 months ago
13 changed files with 4139 additions and 2176 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