You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
439 lines
13 KiB
439 lines
13 KiB
<script>
|
|
import { MessageBox } from 'element-ui';
|
|
import SceneConfig from './sceneConfig.vue';
|
|
import layerResource from './resource.json';
|
|
import { deepClone } from '@/utils';
|
|
import LayerTree from './layerTree.vue';
|
|
|
|
export default {
|
|
name: 'RunSceneDetail',
|
|
components: {
|
|
SceneConfig,
|
|
LayerTree
|
|
},
|
|
data() {
|
|
return {
|
|
currentItem: {
|
|
name: '飞来峡水利枢纽场景',
|
|
num: 'XM_shdjj78238mjw22',
|
|
resourceNum: 5,
|
|
description: '飞来峡水利枢纽项目',
|
|
createTime: '2024/03/07',
|
|
creator: '小张',
|
|
interface_address: 'http://sy.datametatech.com:60006/sy-mixengine-ui/#/'
|
|
},
|
|
activeName: 'data',
|
|
tableData: [
|
|
{
|
|
id: 'BHA10000001',
|
|
name: '飞来峡图层数据',
|
|
addTime: '2024/03/07 12:05',
|
|
description: '图层资源目录描述'
|
|
},
|
|
{
|
|
id: 'BHA10000002',
|
|
name: '乐昌峡图层数据',
|
|
addTime: '2024/03/07 11:05',
|
|
description: '图层资源目录描述'
|
|
},
|
|
{
|
|
id: 'BHA10000003',
|
|
name: '清远峡图层数据',
|
|
addTime: '2024/03/07 09:05',
|
|
description: '图层资源目录描述'
|
|
},
|
|
{
|
|
id: 'BHA10000004',
|
|
name: '北江图层数据',
|
|
addTime: '2024/03/06 09:05',
|
|
description: '图层资源目录描述'
|
|
},
|
|
{
|
|
id: 'BHA10000005',
|
|
name: '西枝江图层数据',
|
|
addTime: '2024/03/05 09:05',
|
|
description: '图层资源目录描述'
|
|
}
|
|
],
|
|
pageData: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
pageSizes: [10, 20, 30, 40],
|
|
total: 5
|
|
},
|
|
keyword: '',
|
|
dialogVisible: false,
|
|
treeData: [],
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'name'
|
|
},
|
|
layerResourceData: null,
|
|
layerData: [],
|
|
layerPageData: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
pageSizes: [10, 20, 30, 40],
|
|
total: 5
|
|
},
|
|
currentNodeId: '',
|
|
layerTableMap: null,
|
|
checkedKeys: []
|
|
};
|
|
},
|
|
watch: {
|
|
activeName(val) {
|
|
if (val === 'scene') {
|
|
this.$nextTick(() => {
|
|
this.$refs.sceneConfig.initMap();
|
|
});
|
|
}
|
|
},
|
|
tableData: {
|
|
handler(val) {
|
|
this.checkedKeys = [];
|
|
val?.forEach((item) => {
|
|
this.checkedKeys.push(item.id);
|
|
});
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
mounted() {
|
|
this.dealResourceData();
|
|
this.layerTableMap = new Map();
|
|
},
|
|
methods: {
|
|
goBack() {
|
|
this.$router.back();
|
|
},
|
|
viewDetail(item) {
|
|
console.log(item);
|
|
},
|
|
deleteItem(item) {
|
|
MessageBox.confirm(`是否要删除图层“${item.name}”`, '删除提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then((res) => {});
|
|
},
|
|
dealResourceData() {
|
|
this.layerResourceData = [deepClone(layerResource)];
|
|
const data = [deepClone(layerResource)];
|
|
this.treeData = this.removeLeafNodes(data);
|
|
},
|
|
removeLeafNodes(tree) {
|
|
return tree.reduce((acc, node) => {
|
|
// 如果节点有子节点，则保留该节点并递归处理其子节点
|
|
if (node.children && node.children.length > 0) {
|
|
node.children = this.removeLeafNodes(node.children); // 递归处理子节点
|
|
acc.push(node); // 将非叶子节点添加到结果数组中
|
|
}
|
|
return acc;
|
|
}, []); // 初始值是一个空数组
|
|
},
|
|
// 添加数据
|
|
addData() {
|
|
this.dialogVisible = true;
|
|
},
|
|
closeDialog() {
|
|
this.dialogVisible = false;
|
|
},
|
|
handleNodeClick(node) {
|
|
this.currentNodeId = node.id;
|
|
const currentNode = this.findNodeById(this.layerResourceData, node.id);
|
|
if (currentNode?.children) {
|
|
this.layerData = currentNode.children.filter((item) => item.isLeaf);
|
|
this.$nextTick(() => {
|
|
this.tableData.forEach((element) => {
|
|
const row = this.layerData.find((row) => row.id === element.id);
|
|
if (row) {
|
|
this.$refs.layerTable.toggleRowSelection(row, true);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
},
|
|
findNodeById(data, id) {
|
|
for (let i = 0; i < data.length; i++) {
|
|
const item = data[i];
|
|
if (item.id === id) {
|
|
return item;
|
|
}
|
|
if (item.children?.length > 0) {
|
|
const shotNode = this.findNodeById(item.children, id);
|
|
if (shotNode) {
|
|
return shotNode;
|
|
}
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
handleSelectionChange(val) {
|
|
this.layerTableMap.set(this.currentNodeId, val);
|
|
},
|
|
addLayerData() {
|
|
this.tableData = [];
|
|
this.layerTableMap.forEach((value, key) => {
|
|
this.tableData = this.tableData.concat(value);
|
|
});
|
|
this.pageData.pageNum = 1;
|
|
this.pageData.total = this.tableData.length;
|
|
this.closeDialog();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="slider-right content-wrapper">
|
|
<div class="top-title">
|
|
<span class="title" @click="goBack">水利工程运行场景配置</span>
|
|
<span class="split-line">/</span>
|
|
<span>详情</span>
|
|
</div>
|
|
<div class="content-box">
|
|
<span class="title">项目详情</span>
|
|
<div class="description-box">
|
|
<div class="description-item">
|
|
<span class="label">项目名称：</span>
|
|
<span class="value">{{ currentItem.name }}</span>
|
|
</div>
|
|
<div class="description-item">
|
|
<span class="label">项目编号：</span>
|
|
<span class="value">{{ currentItem.num }}</span>
|
|
</div>
|
|
<div class="description-item">
|
|
<span class="label">关联图层资源目录数量：</span>
|
|
<span class="value">{{ currentItem.resourceNum }}</span>
|
|
</div>
|
|
<div class="description-item">
|
|
<span class="label">项目描述：</span>
|
|
<span class="value">{{ currentItem.description }}</span>
|
|
</div>
|
|
<div class="description-item">
|
|
<span class="label">创建时间：</span>
|
|
<span class="value">{{ currentItem.createTime }}</span>
|
|
</div>
|
|
<div class="description-item">
|
|
<span class="label">创建人：</span>
|
|
<span class="value">{{ currentItem.creator }}</span>
|
|
</div>
|
|
<div class="description-item">
|
|
<span class="label">项目调用接口：</span>
|
|
<span class="value">{{ currentItem.interface_address }}</span>
|
|
</div>
|
|
</div>
|
|
<el-tabs v-model="activeName" type="card">
|
|
<el-tab-pane label="项目数据配置" name="data">
|
|
<div class="table-box">
|
|
<div class="top-search">
|
|
<el-button type="primary" @click="addData">添加数据</el-button>
|
|
<el-input class="search-input" placeholder="请输入图层目录名称或编号" v-model="keyword">
|
|
<el-button slot="append">搜索</el-button>
|
|
</el-input>
|
|
</div>
|
|
<el-table height="625" :data="tableData" row-key="id" border>
|
|
<el-table-column type="index" align="left" label="序号" width="80"> </el-table-column>
|
|
<el-table-column prop="id" align="left" label="图层资源目录编号"> </el-table-column>
|
|
<el-table-column prop="name" align="left" label="图层资源目录名称"> </el-table-column>
|
|
<el-table-column prop="addTime" align="left" label="添加时间"> </el-table-column>
|
|
<el-table-column prop="description" align="left" label="描述"> </el-table-column>
|
|
<el-table-column align="center" label="操作" width="180">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" @click="viewDetail(scope.row)">目录详情</el-button>
|
|
<el-button type="text" @click="deleteItem(scope.row)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="pagination-box">
|
|
<el-pagination
|
|
background
|
|
class="pagination"
|
|
:current-page="pageData.pageNum"
|
|
:page-sizes="pageData.pageSizes"
|
|
layout="total, prev, pager, next, sizes, jumper"
|
|
:total="pageData.total"
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="项目场景初始化配置" name="scene">
|
|
<scene-config
|
|
ref="sceneConfig"
|
|
:tree-data="layerResourceData"
|
|
:default-checked-keys="checkedKeys"
|
|
></scene-config>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
<el-dialog class="sy-dialog" width="50%" title="添加数据" :visible.sync="dialogVisible" @close="closeDialog">
|
|
<div class="dialog-content">
|
|
<div class="left-panel">
|
|
<layer-tree class="filter-tree" :data="treeData" @node-click="handleNodeClick"></layer-tree>
|
|
</div>
|
|
<div class="right-panel">
|
|
<div class="table-box">
|
|
<div class="top-search">
|
|
<el-input class="search-input" placeholder="请输入图层名称或编号" v-model="keyword">
|
|
<el-button slot="append">搜索</el-button>
|
|
</el-input>
|
|
</div>
|
|
<el-table
|
|
ref="layerTable"
|
|
max-height="355"
|
|
:data="layerData"
|
|
border
|
|
@selection-change="handleSelectionChange"
|
|
>
|
|
<el-table-column type="selection" width="55"> </el-table-column>
|
|
<el-table-column type="index" align="left" label="序号" width="80"> </el-table-column>
|
|
<el-table-column prop="id" align="left" label="图层资源目录编号" width="180"> </el-table-column>
|
|
<el-table-column prop="name" align="left" label="图层资源目录名称" width="180"> </el-table-column>
|
|
<el-table-column prop="addTime" align="left" label="创建时间"> </el-table-column>
|
|
</el-table>
|
|
<div class="pagination-box">
|
|
<el-pagination
|
|
background
|
|
class="pagination"
|
|
:current-page="layerPageData.pageNum"
|
|
:page-sizes="layerPageData.pageSizes"
|
|
:total="layerPageData.total"
|
|
layout="total, prev, pager, next, sizes, jumper"
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="closeDialog">取 消</el-button>
|
|
<el-button type="primary" @click="addLayerData">添 加</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.content-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
.top-title {
|
|
height: 50px;
|
|
background-color: white;
|
|
display: flex;
|
|
padding-left: 16px;
|
|
align-items: center;
|
|
.title {
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
.split-line {
|
|
padding: 0 8px;
|
|
}
|
|
}
|
|
|
|
.content-box {
|
|
width: 100%;
|
|
height: calc(100% - 50px - 24px);
|
|
margin-top: 24px;
|
|
padding: 16px;
|
|
background-color: white;
|
|
.title {
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
}
|
|
.description-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.description-item {
|
|
width: 33%;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
&:last-child {
|
|
width: unset;
|
|
}
|
|
}
|
|
}
|
|
/deep/.el-tabs {
|
|
height: calc(100% - 130px);
|
|
margin-top: 12px;
|
|
|
|
.el-tabs__content {
|
|
width: 100%;
|
|
height: calc(100% - 56px);
|
|
.el-tab-pane {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.table-box {
|
|
.top-search {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
|
|
.search-input {
|
|
width: 300px;
|
|
.el-input-group__append .el-button {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-btn {
|
|
margin-left: 10px;
|
|
background-color: #37b29e;
|
|
border: none;
|
|
|
|
&:hover {
|
|
background-color: #5ac6b9;
|
|
}
|
|
|
|
&:active {
|
|
background-color: #2b8070;
|
|
}
|
|
}
|
|
|
|
.pagination-box {
|
|
margin-top: 16px;
|
|
margin-right: 16px;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
/deep/.sy-dialog {
|
|
.el-dialog__body {
|
|
padding: 0 20px;
|
|
.dialog-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 450px;
|
|
.left-panel {
|
|
width: 30%;
|
|
height: 100%;
|
|
border-right: 1px solid #e3e3e3;
|
|
.filter-tree {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
.right-panel {
|
|
flex: 1;
|
|
padding-left: 10px;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|