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.
454 lines
13 KiB
454 lines
13 KiB
<script>
|
|
import { MessageBox } from 'element-ui';
|
|
import SceneConfig from './sceneConfig.vue';
|
|
import layerResource from './resource.json';
|
|
import {
|
|
getSceneDetail,
|
|
getLayerDirsBySceneId,
|
|
getDirectoryApi,
|
|
updateSceneLayerDirs
|
|
} from '@/api/aiSupervision/layerConfigApi';
|
|
import { deepClone } from '@/utils';
|
|
import LayerTree from '../layerTree/index.vue';
|
|
|
|
export default {
|
|
name: 'RunSceneDetail',
|
|
components: {
|
|
SceneConfig,
|
|
LayerTree
|
|
},
|
|
data() {
|
|
return {
|
|
currentItem: {},
|
|
activeName: 'data',
|
|
tableData: [],
|
|
pageData: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
pageSizes: [10, 20, 30, 40],
|
|
total: 5
|
|
},
|
|
keyword: '',
|
|
dialogVisible: false,
|
|
treeData: [],
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'name'
|
|
},
|
|
layerResourceData: null,
|
|
layerDirsData: [],
|
|
selectedLayerDirs: [],
|
|
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.initData();
|
|
});
|
|
}
|
|
},
|
|
tableData: {
|
|
handler(val) {
|
|
this.checkedKeys = [];
|
|
val?.forEach((item) => {
|
|
this.checkedKeys.push(item.id);
|
|
});
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
mounted() {
|
|
this.dealResourceData();
|
|
this.layerTableMap = new Map();
|
|
this.initData();
|
|
},
|
|
methods: {
|
|
initData() {
|
|
this.fetchSceneDetail();
|
|
this.fetchLayerDirsBySceneId();
|
|
if (!this.layerDirsData.length) {
|
|
this.fetchLayerResourceDirs();
|
|
}
|
|
},
|
|
fetchSceneDetail() {
|
|
const id = this.$route.query.id;
|
|
getSceneDetail(id).then((res) => {
|
|
if (res.success) {
|
|
this.currentItem = res.data;
|
|
}
|
|
});
|
|
},
|
|
fetchLayerDirsBySceneId() {
|
|
const id = this.$route.query.id;
|
|
getLayerDirsBySceneId(id).then((res) => {
|
|
if (res.success) {
|
|
this.tableData = res.data || [];
|
|
}
|
|
});
|
|
},
|
|
goBack() {
|
|
this.$router.back();
|
|
},
|
|
viewDetail(item) {
|
|
this.$router.push({
|
|
path: 'resourceDetails',
|
|
query: { id: item.id }
|
|
});
|
|
},
|
|
deleteItem(item) {
|
|
MessageBox.confirm(`是否要删除图层“${item.name}”`, '删除提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then((res) => {
|
|
this.selectedLayerDirs = this.selectedLayerDirs.filter((row) => row.id !== item.id);
|
|
this.addLayerData('delete');
|
|
});
|
|
},
|
|
fetchLayerResourceDirs() {
|
|
const params = {
|
|
pageNum: this.layerPageData.pageNum,
|
|
pageSize: this.layerPageData.pageSize,
|
|
ids: null,
|
|
data: {
|
|
name: this.keyword,
|
|
id: this.keyword
|
|
},
|
|
params: {
|
|
orderBy: 'pub_date',
|
|
sortBy: 'asc'
|
|
}
|
|
};
|
|
getDirectoryApi(params).then((res) => {
|
|
if (res.success) {
|
|
this.layerDirsData = res.data.children;
|
|
}
|
|
});
|
|
},
|
|
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;
|
|
this.$nextTick(() => {
|
|
this.tableData.forEach((element) => {
|
|
const row = this.layerDirsData.find((row) => row.id === element.id);
|
|
if (row) {
|
|
this.$refs.layerTable.toggleRowSelection(row, true);
|
|
}
|
|
});
|
|
});
|
|
},
|
|
closeDialog() {
|
|
this.dialogVisible = false;
|
|
},
|
|
handleNodeClick(node) {
|
|
this.currentNodeId = node.id;
|
|
const currentNode = this.findNodeById(this.layerResourceData, node.id);
|
|
if (currentNode?.children) {
|
|
this.layerDirsData = currentNode.children.filter((item) => item.isLeaf);
|
|
this.$nextTick(() => {
|
|
this.tableData.forEach((element) => {
|
|
const row = this.layerDirsData.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.selectedLayerDirs = val;
|
|
},
|
|
addLayerData(handle) {
|
|
const dirIds = this.selectedLayerDirs.map((item) => item.id).join(',');
|
|
updateSceneLayerDirs({
|
|
dirIds,
|
|
sceneId: this.currentItem.id
|
|
}).then((res) => {
|
|
const msg = handle === 'delete' ? '删除成功' : '添加成功';
|
|
if (res.success) {
|
|
this.$message.success(msg);
|
|
this.initData();
|
|
this.closeDialog();
|
|
}
|
|
});
|
|
},
|
|
setCheckedKeys(keys) {
|
|
this.checkedKeys = keys;
|
|
}
|
|
}
|
|
};
|
|
</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.id }}</span>
|
|
</div>
|
|
<div class="description-item">
|
|
<span class="label">关联图层资源目录数量：</span>
|
|
<span class="value">{{ currentItem.relationDirCount || 0 }}</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.pubDate }}</span>
|
|
</div>
|
|
<div class="description-item">
|
|
<span class="label">创建人：</span>
|
|
<span class="value">{{ currentItem.createUser }}</span>
|
|
</div>
|
|
<div class="description-item">
|
|
<span class="label">项目调用接口：</span>
|
|
<span class="value">{{ currentItem.interfaceAddress }}</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="pubDate" align="left" label="添加时间"> </el-table-column>
|
|
<el-table-column prop="directoryDescription" 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"
|
|
:default-checked-keys="checkedKeys"
|
|
:scene-id="currentItem.id"
|
|
@set-checked-keys="setCheckedKeys"
|
|
></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="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="layerDirsData"
|
|
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="图层资源目录编号"> </el-table-column>
|
|
<el-table-column prop="name" align="left" label="图层资源目录名称"> </el-table-column>
|
|
<el-table-column prop="pubDate" 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 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 {
|
|
width: 100%;
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|