Merge branch 'temp' of http://123.60.103.97:3000/xuziqiang/SaaS-lib into temp
This commit is contained in:
zhaohy
12
hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts
Normal file
12
hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts
Normal file
@@ -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',
|
||||
}
|
||||
50
hx-ai-intelligent/src/router/carbonEmissionManage.ts
Normal file
50
hx-ai-intelligent/src/router/carbonEmissionManage.ts
Normal file
@@ -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
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user