ljf
/
shuili-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: mock图层目录数据并完善其交互

sy-water-data-board-ui
chenhaojie 1 year ago
parent
43eac1ff16
commit
a8d9a306ae
4 changed files with 316 additions and 40 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 245
      src/views/aiSupervision/waterSetting/runScene/detail/index.vue
  2. 98
      src/views/aiSupervision/waterSetting/runScene/detail/resource.json
  3. 12
      src/views/aiSupervision/waterSetting/runScene/detail/sceneConfig.vue
  4. 1
      vue.config.js

245
src/views/aiSupervision/waterSetting/runScene/detail/index.vue
View File

@ -1,6 +1,9 @@
<script>
import { MessageBox } from 'element-ui';
import SceneConfig from './sceneConfig.vue';
import layerResource from './resource.json';
import { deepClone } from '@/utils';
export default {
name: 'RunSceneDetail',
components: {
@ -20,31 +23,31 @@ export default {
activeName: 'data',
tableData: [
{
num: 'BHA10000001',
id: 'BHA10000001',
name: '飞来峡图层数据',
addTime: '2024/03/07 12:05',
description: '图层资源目录描述'
},
{
num: 'BHA10000002',
id: 'BHA10000002',
name: '乐昌峡图层数据',
addTime: '2024/03/07 11:05',
description: '图层资源目录描述'
},
{
num: 'BHA10000003',
id: 'BHA10000003',
name: '清远峡图层数据',
addTime: '2024/03/07 09:05',
description: '图层资源目录描述'
},
{
num: 'BHA10000004',
id: 'BHA10000004',
name: '北江图层数据',
addTime: '2024/03/06 09:05',
description: '图层资源目录描述'
},
{
num: 'BHA10000005',
id: 'BHA10000005',
name: '西枝江图层数据',
addTime: '2024/03/05 09:05',
description: '图层资源目录描述'
@ -56,7 +59,23 @@ export default {
pageSizes: [10, 20, 30, 40],
total: 5
},
keyword: ''
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
};
},
watch: {
@ -68,6 +87,10 @@ export default {
}
}
},
mounted() {
this.dealResourceData();
this.layerTableMap = new Map();
},
methods: {
goBack() {
this.$emit('back');
@ -76,12 +99,75 @@ export default {
console.log(item);
},
deleteItem(item) {
console.log(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();
}
}
};
@ -130,17 +216,17 @@ export default {
<el-tab-pane label="项目数据配置" name="data">
<div class="table-box">
<div class="top-search">
<el-button type="primary">添加数据</el-button>
<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" border>
<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="num" 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="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="描述" width="180"> </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>
@ -166,6 +252,59 @@ export default {
</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">
<el-tree
ref="tree"
class="filter-tree"
node-key="id"
:data="treeData"
:props="defaultProps"
:expand-on-click-node="false"
default-expand-all
@node-click="handleNodeClick"
></el-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>
@ -223,40 +362,68 @@ export default {
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;
}
}
.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;
.search-btn {
margin-left: 10px;
background-color: #37b29e;
border: none;
&:hover {
background-color: #5ac6b9;
}
&:hover {
background-color: #5ac6b9;
}
&:active {
background-color: #2b8070;
}
}
.pagination-box {
margin-top: 16px;
margin-right: 16px;
text-align: right;
}
}
&:active {
background-color: #2b8070;
/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;
}
}
.pagination-box {
margin-top: 16px;
margin-right: 16px;
text-align: right;
.right-panel {
flex: 1;
padding-left: 10px;
height: 100%;
overflow: hidden;
}
}
}

98
src/views/aiSupervision/waterSetting/runScene/detail/resource.json
View File

@ -0,0 +1,98 @@
{
"id": 1,
"isLeaf": false,
"name": "全部",
"children": [
{
"id": 2,
"isLeaf": false,
"name": "一级目录1",
"children": [
{
"id": "BHA10000001",
"name": "飞来峡图层数据",
"addTime": "2024/03/07 12:05",
"description": "图层资源目录描述",
"isLeaf": true
},
{
"id": "BHA10000002",
"name": "乐昌峡图层数据",
"addTime": "2024/03/07 11:05",
"description": "图层资源目录描述",
"isLeaf": true
},
{
"id": "BHA10000003",
"name": "清远峡图层数据",
"addTime": "2024/03/07 09:05",
"description": "图层资源目录描述",
"isLeaf": true
},
{
"id": "BHA10000004",
"name": "北江图层数据",
"addTime": "2024/03/06 09:05",
"description": "图层资源目录描述",
"isLeaf": true
},
{
"id": "BHA10000005",
"name": "西枝江图层数据",
"addTime": "2024/03/05 09:05",
"description": "图层资源目录描述",
"isLeaf": true
}
]
},
{
"id": 3,
"isLeaf": false,
"name": "一级目录2",
"children": [
{
"id": 4,
"isLeaf": false,
"name": "二级目录1",
"children": [
{
"id": "BHA110000001",
"name": "飞来峡图层数据1",
"addTime": "2024/03/07 12:05",
"description": "图层资源目录描述",
"isLeaf": true
},
{
"id": "BHA110000002",
"name": "乐昌峡图层数据2",
"addTime": "2024/03/07 11:05",
"description": "图层资源目录描述",
"isLeaf": true
},
{
"id": "BHA110000003",
"name": "清远峡图层数据3",
"addTime": "2024/03/07 09:05",
"description": "图层资源目录描述",
"isLeaf": true
},
{
"id": "BHA110000004",
"name": "北江图层数据4",
"addTime": "2024/03/06 09:05",
"description": "图层资源目录描述",
"isLeaf": true
},
{
"id": "BHA110000005",
"name": "西枝江图层数据5",
"addTime": "2024/03/05 09:05",
"description": "图层资源目录描述",
"isLeaf": true
}
]
}
]
}
]
}

12
src/views/aiSupervision/waterSetting/runScene/detail/sceneConfig.vue
View File

@ -137,6 +137,18 @@ export default {
.el-form-item {
&.mix {
text-align: right;
.el-form-item__content {
display: flex;
flex-direction: column;
align-items: flex-end;
.el-button {
width: 100px;
}
.el-image {
width: 100%;
height: 300px;
}
}
}
.el-select {
width: 100%;

1
vue.config.js
View File

@ -68,7 +68,6 @@ module.exports = {
'@': resolve('src')
}
},
devtool: 'source-map',
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',

Write Preview
Loading…
Cancel
Save