xuziqiang
4 months ago
23 changed files with 2377 additions and 2068 deletions
@ -0,0 +1,45 @@ |
|||||
|
<template> |
||||
|
<a-modal |
||||
|
v-model:visible="show" |
||||
|
width="1000px" |
||||
|
style="top: 50%; transform: translateY(-50%)" |
||||
|
title="添加联系人" |
||||
|
@ok="handleOk" |
||||
|
@cancel="handleCancel"> |
||||
|
<div style="width: 100%; height: 100%"> |
||||
|
<p>Some contents...</p> |
||||
|
<p>Some contents...</p> |
||||
|
<p>Some contents...</p> |
||||
|
</div> |
||||
|
</a-modal> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { ref } from 'vue'; |
||||
|
import { defineComponent } from 'vue'; |
||||
|
|
||||
|
export default defineComponent({ |
||||
|
setup(props, { emit }) { |
||||
|
const handleOk = () => { |
||||
|
// 处理确定按钮的逻辑 |
||||
|
console.log('点击了确定按钮'); |
||||
|
}; |
||||
|
const getData = () => { |
||||
|
show.value = true; |
||||
|
}; |
||||
|
const show = ref(false); |
||||
|
const handleCancel = () => { |
||||
|
// 处理取消按钮的逻辑 |
||||
|
console.log('点击了取消按钮'); |
||||
|
emit('handleCancel', null); |
||||
|
show.value = false; |
||||
|
}; |
||||
|
return { |
||||
|
handleOk, |
||||
|
show, |
||||
|
getData, |
||||
|
handleCancel, |
||||
|
}; |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
@ -0,0 +1,401 @@ |
|||||
|
<!-- @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 |
||||
|
v-if="gData && gData.length > 0" |
||||
|
class="draggable-tree" |
||||
|
style="padding: 0 16px !important;" |
||||
|
show-line |
||||
|
block-node |
||||
|
:tree-data="gData" |
||||
|
:checkedKeys="checkedTreeNodeKeys" |
||||
|
:selectedKeys="selectedKeys" |
||||
|
@check="checkTreeNode" |
||||
|
@select="onSelect" |
||||
|
: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> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<a-table :columns="columns" :data-source="tableData" bordered :pagination="false"> |
||||
|
<template #bodyCell="{ column, text }"> |
||||
|
<template v-if="column.dataIndex === 'name'"> |
||||
|
<a>{{ text }}</a> |
||||
|
</template> |
||||
|
</template> |
||||
|
<template #title>Header</template> |
||||
|
</a-table> |
||||
|
</div> |
||||
|
<!-- 新增树节点 --> |
||||
|
<ns-modal :visible="treeNodeAdd" :title="operationTree" @ok="handleOk" @cancel="handleCancel"> |
||||
|
<ns-input |
||||
|
v-model:value="addTreeNode" |
||||
|
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" |
||||
|
: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 { Modal } from 'ant-design-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 { carbonEmissionFactorLibrary } from '/@/api/carbonEmissionFactorLibrary'; |
||||
|
import type { |
||||
|
AntTreeNodeDragEnterEvent, |
||||
|
AntTreeNodeDropEvent, |
||||
|
TreeProps, |
||||
|
} from 'ant-design-vue/es/tree'; |
||||
|
import { log } from 'node:console'; |
||||
|
|
||||
|
defineOptions({ name: 'QuickCalculation' }); |
||||
|
const selectTreeDataValue = ref<string>(''); |
||||
|
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 casData = ref([]); |
||||
|
const treeData = ref([]); |
||||
|
const userAuthList = ref([]); |
||||
|
const orgId = ref(''); |
||||
|
const result = JSON.parse(sessionStorage.getItem('ORGID')!); |
||||
|
orgId.value = result; |
||||
|
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 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 checkedIds = ref([]) |
||||
|
const emissionType = ref() |
||||
|
const checkTreeNode = (checkedKeys, info) => { |
||||
|
checkedIds.value = [] |
||||
|
info.checkedNodes.forEach(item=>{ |
||||
|
checkedIds.value.push(item.id) |
||||
|
}) |
||||
|
sessionStorage.setItem('checkedTreeNode', checkedIds.value); |
||||
|
emissionType.value = checkedIds.value.join(',') |
||||
|
} |
||||
|
// 新增/编辑树节点点击确定 |
||||
|
const addTreeNode =ref() |
||||
|
const handleOk = (e: MouseEvent) => { |
||||
|
editTreeNode.value.emissionName = addTreeNode.value |
||||
|
http.post(carbonEmissionFactorLibrary.creat,editTreeNode.value).then(() => { |
||||
|
getOrgTree() |
||||
|
NsMessage.success('操作成功'); |
||||
|
addTreeNode.value = '' |
||||
|
treeNodeAdd.value = false; |
||||
|
}); |
||||
|
}; |
||||
|
const handleCancel = () => { |
||||
|
addTreeNode.value = '' |
||||
|
treeNodeAdd.value = false; |
||||
|
}; |
||||
|
// 获取排放分类树 |
||||
|
const getOrgTree = (params?) => { |
||||
|
fetch(carbonEmissionFactorLibrary.getCarbonFactorTree, params).then((res) => { |
||||
|
gData.value = res.data |
||||
|
// 找到匹配的节点数据 |
||||
|
const selectedNodes = []; |
||||
|
checkedTreeNodeKeys.value.forEach(key => { |
||||
|
const [parentId, childId] = key.split('-').map(Number); |
||||
|
if (parentId >= 0 && childId >= 0 && gData.value[parentId]?.children?.[childId]) { |
||||
|
selectedNodes.push(gData.value[parentId]); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
}; |
||||
|
getOrgTree(); |
||||
|
// 被选中的树节点 |
||||
|
const editTreeNode = ref({}) |
||||
|
const onSelect = (selectedKeys: string[], info: any) => { |
||||
|
if(info.selected){ |
||||
|
editTreeNode.value = { |
||||
|
id:info.selectedNodes[0].id, |
||||
|
level:info.selectedNodes[0].level, |
||||
|
dataNumber:info.selectedNodes[0].dataNumber, |
||||
|
sortNumber:info.selectedNodes[0].sortNumber, |
||||
|
parentEmissionId:info.selectedNodes[0].parentEmissionId, |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const onSearch = () => { |
||||
|
console.log(searchValue.value); |
||||
|
getOrgTree({ orgName: searchValue.value, orgId }); |
||||
|
}; |
||||
|
|
||||
|
const tableFetch = (params) => { |
||||
|
console.log(params, 'sdfasfasdfasdfasdf'); |
||||
|
|
||||
|
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 columns = [ |
||||
|
{ |
||||
|
title: 'Name', |
||||
|
dataIndex: 'name', |
||||
|
}, |
||||
|
{ |
||||
|
title: 'Cash Assets', |
||||
|
className: 'column-money', |
||||
|
dataIndex: 'money', |
||||
|
}, |
||||
|
{ |
||||
|
title: 'Address', |
||||
|
dataIndex: 'address', |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const tableData = [ |
||||
|
{ |
||||
|
key: '1', |
||||
|
name: 'John Brown', |
||||
|
money: '￥300,000.00', |
||||
|
address: 'New York No. 1 Lake Park', |
||||
|
}, |
||||
|
{ |
||||
|
key: '2', |
||||
|
name: 'Jim Green', |
||||
|
money: '￥1,256,000.00', |
||||
|
address: 'London No. 1 Lake Park', |
||||
|
}, |
||||
|
{ |
||||
|
key: '3', |
||||
|
name: 'Joe Black', |
||||
|
money: '￥120,000.00', |
||||
|
address: 'Sidney No. 1 Lake Park', |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
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 }); |
||||
|
}); |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
.main { |
||||
|
background-color: @ns-content-bg; |
||||
|
display: flex; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.left { |
||||
|
width: 300px; |
||||
|
// max-height: calc(100vh - 96px); |
||||
|
margin-right: @ns-gap; |
||||
|
min-width: fit-content; |
||||
|
> div { |
||||
|
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; |
||||
|
} |
||||
|
::v-deep .ant-table-container{ |
||||
|
padding: 0px 16px; |
||||
|
} |
||||
|
.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> |
||||
|
<style scoped> |
||||
|
th.column-money, |
||||
|
td.column-money { |
||||
|
text-align: right !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,141 @@ |
|||||
|
.out-dialog { |
||||
|
position: fixed; |
||||
|
right: 496px; |
||||
|
width: 500px; |
||||
|
height: 100%; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
margin: auto; |
||||
|
box-sizing: border-box; |
||||
|
color: rgb(255, 83, 0); |
||||
|
background: black; |
||||
|
display: flex; |
||||
|
padding: 25px; |
||||
|
flex-direction: column; |
||||
|
.content { |
||||
|
overflow-y: scroll; |
||||
|
.div-operation { |
||||
|
display: inline-block; |
||||
|
width: 3px; |
||||
|
height: 13px; |
||||
|
opacity: 1; |
||||
|
border-radius: 1px; |
||||
|
background: rgba(67, 136, 251, 1); |
||||
|
} |
||||
|
.text-operation { |
||||
|
display: inline-block; |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
font-size: 16px; |
||||
|
font-weight: 700; |
||||
|
margin-left: 5px; |
||||
|
} |
||||
|
.j-box { |
||||
|
background-color: #000; |
||||
|
opacity: 1; |
||||
|
z-index: 99999; |
||||
|
overflow-y: scroll; |
||||
|
.journal { |
||||
|
padding: 1% 3%; |
||||
|
width: 100%; |
||||
|
height: 150px; |
||||
|
background-color: rgba(0, 0, 0); |
||||
|
border-radius: 12px; |
||||
|
border: 2px solid transparent; |
||||
|
border-image: linear-gradient(to bottom, #0077ff, #00f6ff, #000000) 1; |
||||
|
} |
||||
|
.imgText { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.ztzm { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.cxbtn { |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
border: none; |
||||
|
border-radius: 6px; |
||||
|
width: 59.79px; |
||||
|
height: 32px; |
||||
|
opacity: 1; |
||||
|
background: linear-gradient( |
||||
|
180deg, |
||||
|
rgba(255, 187, 0, 1) 0%, |
||||
|
rgba(255, 112, 3, 1) 91.21%, |
||||
|
rgba(255, 129, 3, 1) 100% |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
.btn-box { |
||||
|
display: grid; |
||||
|
grid-template-columns: 1fr 1fr; |
||||
|
grid-template-rows: 1fr 1fr; |
||||
|
grid-row-gap: 15px; |
||||
|
.btn-item { |
||||
|
text-align: center; |
||||
|
display: flex; |
||||
|
align-content: space-between; |
||||
|
.left { |
||||
|
width: 70px; |
||||
|
height: 35px; |
||||
|
line-height: 35px; |
||||
|
border-radius: 4px; |
||||
|
background: linear-gradient( |
||||
|
180deg, |
||||
|
rgba(1, 206, 255, 1) 0%, |
||||
|
rgba(0, 150, 229, 1) 100% |
||||
|
); |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
.right { |
||||
|
width: 140px; |
||||
|
height: 35px; |
||||
|
line-height: 35px; |
||||
|
span { |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
img { |
||||
|
padding: 0 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.button-box { |
||||
|
width: 100%; |
||||
|
box-sizing: border-box; |
||||
|
padding: 10px; |
||||
|
height: 60px; |
||||
|
position: absolute; |
||||
|
background-color: transparent; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
.execute, .cancel { |
||||
|
margin-right: 10px; |
||||
|
width: 74px; |
||||
|
height: 40px; |
||||
|
opacity: 1; |
||||
|
cursor: pointer; |
||||
|
border-radius: 4px; |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
border: 0; |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
.execute { |
||||
|
background: rgb(67, 136, 251); |
||||
|
color: white; |
||||
|
} |
||||
|
.cancel { |
||||
|
background: white; |
||||
|
color: black; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
File diff suppressed because it is too large
@ -1,156 +0,0 @@ |
|||||
// 页面容器 |
|
||||
.lighting-box { |
|
||||
// width: 100%; |
|
||||
// height: 100%; |
|
||||
position: relative; |
|
||||
// background: linear-gradient(#badaff, #8cabeb, #7095de); |
|
||||
// 照明设备功能总容器 |
|
||||
.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 { |
|
||||
// transform: scale(1.05); |
|
||||
// } |
|
||||
.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 { |
|
||||
// transform: scale(1.05); |
|
||||
// } |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
// 总容器与抽屉按钮 |
|
||||
.ns-content-main { |
|
||||
position: relative; |
|
||||
// 抽屉打开按钮 |
|
||||
.drawer-box-in { |
|
||||
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-box-out { |
|
||||
width: 30px; |
|
||||
height: 40px; |
|
||||
border-radius: 2px; |
|
||||
position: fixed; |
|
||||
right: 496px; |
|
||||
top: 0; |
|
||||
bottom: 0; |
|
||||
margin: auto; |
|
||||
background: rgba(0, 0 ,0 ,0.5); |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
@ -0,0 +1,216 @@ |
|||||
|
<template> |
||||
|
<div class="div-add"> |
||||
|
<button class="add" @click="addModal">添加</button> |
||||
|
</div> |
||||
|
<table class="custom-table table1"> |
||||
|
<thead> |
||||
|
<tr :style="{ background: 'rgba(35,45,69)' }"> |
||||
|
<th>序号</th> |
||||
|
<th>执行时间</th> |
||||
|
<th>计划名称</th> |
||||
|
<th>状态</th> |
||||
|
<th>操作</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr v-for="(row, index) in dataSource" :key="index"> |
||||
|
<td>{{ row.key }}</td> |
||||
|
<td>{{ row.data }}</td> |
||||
|
<td>{{ row.planName }}</td> |
||||
|
<td v-if="row.status === '待执行'"> |
||||
|
<button |
||||
|
style=" |
||||
|
font-size: 12px; |
||||
|
background: rgba(57, 215, 187, 0.1); |
||||
|
color: rgb(57, 215, 187); |
||||
|
border: 1px solid rgb(57, 215, 187); |
||||
|
"> |
||||
|
{{ row.status }} |
||||
|
</button> |
||||
|
</td> |
||||
|
<td v-if="row.status !== '待执行'"> |
||||
|
<button |
||||
|
style=" |
||||
|
font-size: 12px; |
||||
|
background: rgba(243, 97, 99, 0.1); |
||||
|
border: 1px solid rgba(243, 97, 99); |
||||
|
color: rgba(243, 97, 99); |
||||
|
"> |
||||
|
{{ row.status }} |
||||
|
</button> |
||||
|
</td> |
||||
|
<td> |
||||
|
<button class="tabReboot" @click="handleRefClick1">重启</button> |
||||
|
<button class="tabDelete">删除</button> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
<div class="out-dialog" v-if="addVisible"> |
||||
|
<div class="content" v-if="addVisible"> |
||||
|
<div class="div-operation"></div> |
||||
|
<span class="text-operation">计划库</span> |
||||
|
</div> |
||||
|
<div style="margin-top: 20px"> |
||||
|
<a-transfer |
||||
|
v-model:target-keys="targetKeys" |
||||
|
:data-source="mockData" |
||||
|
show-search |
||||
|
:filter-option="filterOption" |
||||
|
:render="(item) => item.title" |
||||
|
@change="handleChange" |
||||
|
:style="{ color: 'rgba(255,255,255,1)' }" |
||||
|
@search="handleSearch" |
||||
|
:listStyle="{ border: '2px solid rgba(25,74,125,1)', height: 'calc(100vh - 200px)' }" /> |
||||
|
</div> |
||||
|
<div style="width: 100%; height: 60px;"></div> |
||||
|
<div class="button-box"> |
||||
|
<button class="cancel" @click="addVisible = false">取消</button> |
||||
|
<button class="execute">确定</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onMounted } from 'vue'; |
||||
|
|
||||
|
// 初始化 |
||||
|
onMounted(() => { |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
// 表格数据 |
||||
|
const dataSource = ref([ |
||||
|
{ |
||||
|
key: '1', |
||||
|
data: '2024-05-01', |
||||
|
planName: '劳动节', |
||||
|
status: '暂停中', |
||||
|
}, |
||||
|
{ |
||||
|
key: '2', |
||||
|
data: '2024-05-01', |
||||
|
planName: '国庆节', |
||||
|
status: '待执行', |
||||
|
}, |
||||
|
{ |
||||
|
key: '3', |
||||
|
data: '2024-05-01', |
||||
|
planName: '元旦', |
||||
|
status: '待执行', |
||||
|
}, |
||||
|
]); |
||||
|
const addVisible = ref<boolean>(false); |
||||
|
// 操作日志 |
||||
|
const handleRefClick1 = () => { |
||||
|
alert(111) |
||||
|
}; |
||||
|
const addModal = () => { |
||||
|
addVisible.value = true; |
||||
|
}; |
||||
|
const handleChange = (keys: string[], direction: string, moveKeys: string[]) => { |
||||
|
console.log(keys, direction, moveKeys); |
||||
|
}; |
||||
|
const handleSearch = (dir: string, value: string) => { |
||||
|
console.log('search:', dir, value); |
||||
|
}; |
||||
|
|
||||
|
// 穿梭框 相关业务 |
||||
|
interface MockData { |
||||
|
key: string; |
||||
|
title: string; |
||||
|
description: string; |
||||
|
chosen: boolean; |
||||
|
} |
||||
|
const mockData = ref([ |
||||
|
{ |
||||
|
key: '1', |
||||
|
title: '计划再开', |
||||
|
}, |
||||
|
{ |
||||
|
key: '2', |
||||
|
title: '检修模式', |
||||
|
}, |
||||
|
{ |
||||
|
key: '3', |
||||
|
title: '设备变更', |
||||
|
}, |
||||
|
]); |
||||
|
const targetKeys = ref<string[]>([]); |
||||
|
const filterOption = (inputValue: string, option: MockData) => { |
||||
|
console.log(option.description); |
||||
|
|
||||
|
return option.description.indexOf(inputValue) > -1; |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
@import "./dialogStyle.less"; |
||||
|
|
||||
|
// 右下角添加按钮 |
||||
|
.div-add { |
||||
|
height: 64px; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
margin-right: 20px; |
||||
|
.add { |
||||
|
width: 74px; |
||||
|
height: 40px; |
||||
|
opacity: 1; |
||||
|
border-radius: 4px; |
||||
|
background: rgba(67, 136, 251, 1); |
||||
|
border: rgba(67, 136, 251, 1); |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
} |
||||
|
} |
||||
|
// 表格 |
||||
|
.custom-table { |
||||
|
border-collapse: collapse; |
||||
|
width: 416px; |
||||
|
height: 60px; |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
} |
||||
|
.custom-table th, |
||||
|
.custom-table td { |
||||
|
border: 1px solid rgba(163, 192, 243, 1); |
||||
|
text-align: left; |
||||
|
padding: 8px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.table1 { |
||||
|
margin-top: 20px; |
||||
|
width: 100%; |
||||
|
border: 1px solid rgba(255, 255, 255); |
||||
|
border-radius: 5px; |
||||
|
background: rgba(255, 255, 255, 0.1); |
||||
|
// 表格中的操作按钮 |
||||
|
.tabReboot, |
||||
|
.tabDelete { |
||||
|
border: none; |
||||
|
background-color: rgba(0, 0, 0, 0); |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
letter-spacing: 0; |
||||
|
line-height: 20px; |
||||
|
color: rgba(67, 136, 251, 1); |
||||
|
} |
||||
|
.tabReboot { |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
} |
||||
|
::v-deep(.ant-transfer) { |
||||
|
// 屏蔽自带的hover效果 |
||||
|
.ant-transfer-list-content-item:hover { |
||||
|
background: black; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,255 @@ |
|||||
|
<template> |
||||
|
<table class="custom-table table1"> |
||||
|
<thead> |
||||
|
<tr :style="{ background: 'rgba(35,45,69)' }"> |
||||
|
<th>序号</th> |
||||
|
<th>执行时间</th> |
||||
|
<th>操作内容</th> |
||||
|
<th>操作人</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr v-for="(row, index) in dataSource1" :key="index" @click="handleRowClick(row.key)" |
||||
|
:class="row.key === trIndex ? 'isTrIndex' : ''"> |
||||
|
<td>{{ row.key }}</td> |
||||
|
<td>{{ row.data }}</td> |
||||
|
<td>{{ row.planName }}</td> |
||||
|
<td>{{ row.status }}</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
<div class="out-dialog" v-if="logModalVisible"> |
||||
|
<div class="content" v-if="logModalVisible"> |
||||
|
<div> |
||||
|
<div class="div-operation"></div> |
||||
|
<span class="text-operation">变更内容 </span> |
||||
|
</div> |
||||
|
<div class="jbox" v-for="item in cxList" :key="item.id"> |
||||
|
<div class="journal" style="margin-top: 20px"> |
||||
|
<div class="imgText"> |
||||
|
<div class="zjzm"> |
||||
|
<img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" /> |
||||
|
<span class="title-text" style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)">{{ |
||||
|
item.name }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="btn-box"> |
||||
|
<div class="btn-item"> |
||||
|
<div class="left">控制模式</div> |
||||
|
<div class="right"> |
||||
|
<span>手动</span> |
||||
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
||||
|
<span>自动</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="btn-item"> |
||||
|
<div class="left"> |
||||
|
亮度 |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<span>100lux</span> |
||||
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
||||
|
<span>30lux</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="btn-item"> |
||||
|
<div class="left"> |
||||
|
控制场景 |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<span>手动</span> |
||||
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
||||
|
<span>自动</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="btn-item"> |
||||
|
<div class="left"> |
||||
|
色温 |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<span>4000k</span> |
||||
|
<img src="/asset/image/bulbLogo/22406.png" alt="" /> |
||||
|
<span>3800k</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="height: 60px;"></div> |
||||
|
<div class="button-box"> |
||||
|
<button class="cancel" @click="logModalVisible = false">取消</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="div-add"> |
||||
|
<button class="add">刷新</button> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref, onMounted } from 'vue'; |
||||
|
|
||||
|
// 初始化 |
||||
|
onMounted(() => { |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
// 与父组件的交互 =================================================================== |
||||
|
const props = defineProps({ |
||||
|
// 分区结构（照明区域 > 照明回路） |
||||
|
treeData: { |
||||
|
type: Array |
||||
|
}, |
||||
|
}); |
||||
|
const emit = defineEmits(['changeArea']); |
||||
|
|
||||
|
// 表格数据 |
||||
|
const dataSource1 = ref([ |
||||
|
{ |
||||
|
key: '1', |
||||
|
data: '2024-05-01', |
||||
|
planName: '计划再开', |
||||
|
status: '张三111', |
||||
|
}, |
||||
|
{ |
||||
|
key: '2', |
||||
|
data: '2024-05-01', |
||||
|
planName: '检修模式', |
||||
|
status: '李四12', |
||||
|
}, |
||||
|
{ |
||||
|
key: '3', |
||||
|
data: '2024-05-01', |
||||
|
planName: '设备变更', |
||||
|
status: '王五33', |
||||
|
}, |
||||
|
]); |
||||
|
const cxList = ref([ |
||||
|
{ |
||||
|
id: '1', |
||||
|
name: '站厅照明 1区', |
||||
|
manual: '手动', |
||||
|
automatic: '自动', |
||||
|
brightness: '100lux', |
||||
|
brightness2: '30lux', |
||||
|
manual2: '手动', |
||||
|
automatic2: '自动', |
||||
|
brightness3: '4000k', |
||||
|
brightness4: '3800k', |
||||
|
}, |
||||
|
{ |
||||
|
id: '2', |
||||
|
name: '站厅照明 2区', |
||||
|
manual: '手动', |
||||
|
automatic: '自动', |
||||
|
brightness: '100lux', |
||||
|
brightness2: '30lux', |
||||
|
manual2: '手动', |
||||
|
automatic2: '自动', |
||||
|
brightness3: '4000k', |
||||
|
brightness4: '3800k', |
||||
|
}, |
||||
|
{ |
||||
|
id: '3', |
||||
|
name: '站厅照明 3区', |
||||
|
manual: '手动', |
||||
|
automatic: '自动', |
||||
|
brightness: '100lux', |
||||
|
brightness2: '30lux', |
||||
|
manual2: '手动', |
||||
|
automatic2: '自动', |
||||
|
brightness3: '4000k', |
||||
|
brightness4: '3800k', |
||||
|
}, |
||||
|
]); |
||||
|
let trIndex = ref('-1'); |
||||
|
const logModalVisible = ref(false); |
||||
|
const handleRowClick = (index: any) => { |
||||
|
trIndex.value = index; |
||||
|
if (index === trIndex.value) { |
||||
|
console.log('tri'); |
||||
|
} |
||||
|
// 显示模态框 |
||||
|
logModalVisible.value = true; |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
<style lang="less" scoped> |
||||
|
@import "./dialogStyle.less"; |
||||
|
|
||||
|
// 右下角添加按钮 |
||||
|
.div-add { |
||||
|
|
||||
|
height: 64px; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
margin-right: 20px; |
||||
|
.add { |
||||
|
width: 74px; |
||||
|
height: 40px; |
||||
|
opacity: 1; |
||||
|
border-radius: 4px; |
||||
|
background: rgba(67, 136, 251, 1); |
||||
|
border: rgba(67, 136, 251, 1); |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 表格 |
||||
|
.custom-table { |
||||
|
border-collapse: collapse; |
||||
|
width: 416px; |
||||
|
height: 60px; |
||||
|
color: rgba(255, 255, 255, 1); |
||||
|
} |
||||
|
|
||||
|
.custom-table th, |
||||
|
.custom-table td { |
||||
|
border: 1px solid rgba(163, 192, 243, 1); |
||||
|
text-align: left; |
||||
|
padding: 8px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.table1 { |
||||
|
margin-top: 20px; |
||||
|
width: 100%; |
||||
|
border: 1px solid rgba(255, 255, 255); |
||||
|
border-radius: 5px; |
||||
|
background: rgba(255, 255, 255, 0.1); |
||||
|
|
||||
|
.tabReboot, |
||||
|
.tabDelete { |
||||
|
border: none; |
||||
|
background-color: rgba(0, 0, 0, 0); |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
letter-spacing: 0; |
||||
|
line-height: 20px; |
||||
|
color: rgba(67, 136, 251, 1); |
||||
|
} |
||||
|
|
||||
|
.tabReboot { |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
|
||||
|
.isTrIndex { |
||||
|
background: rgba(67, 136, 251, 1); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
::v-deep(.ant-transfer) { |
||||
|
|
||||
|
// 屏蔽自带的hover效果 |
||||
|
.ant-transfer-list-content-item:hover { |
||||
|
background: black; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue