| src/assets/images/layerManagement/cancelbtn.svg | ●●●●● patch | view | raw | blame | history | |
| src/assets/images/layerManagement/savebtn.svg | ●●●●● patch | view | raw | blame | history | |
| src/styles/element-ui.scss | ●●●●● patch | view | raw | blame | history | |
| src/views/layerManagement/components/leftList.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/layerManagement/components/rightEdit.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/layerManagement/index.vue | ●●●●● patch | view | raw | blame | history |
src/assets/images/layerManagement/cancelbtn.svg
New file @@ -0,0 +1,24 @@ <svg width="133" height="47" viewBox="0 0 133 47" fill="none" xmlns="http://www.w3.org/2000/svg"> <g id="Group 1321316178"> <g id="Rectangle 34624972" filter="url(#filter0_d_2405_1766)"> <rect x="4" width="125" height="39" rx="4" fill="#FF9011"/> </g> <path id="取消" d="M65.038 22.806L66.606 22.582V21.196H65.038V22.806ZM66.606 15.414H65.038V16.842H66.606V15.414ZM65.038 18.256V19.782H66.606V18.256H65.038ZM69.392 23.576L68.23 23.786V26.418H66.606V24.08C65.234 24.318 63.932 24.542 62.84 24.71L62.518 23.142C62.784 23.114 63.106 23.072 63.442 23.03V15.414H62.672V13.93H69.042V15.414H68.23V22.344L69.308 22.19L69.392 23.576ZM73.48 16.394H71.086C71.366 17.962 71.744 19.432 72.276 20.734C72.822 19.46 73.228 18.004 73.48 16.394ZM74.18 14.77L75.216 15.036C74.908 18.116 74.236 20.58 73.2 22.554C73.858 23.604 74.67 24.458 75.678 25.074C75.314 25.354 74.81 25.942 74.544 26.362C73.648 25.732 72.906 24.962 72.262 24.024C71.548 25.018 70.694 25.816 69.728 26.474C69.49 26.068 69.028 25.508 68.692 25.228C69.728 24.598 70.624 23.66 71.38 22.484C70.554 20.762 70.022 18.69 69.63 16.394H69.14V14.826H73.9L74.18 14.77ZM87.746 13.692L89.37 14.266C88.922 15.246 88.39 16.24 87.956 16.898L86.514 16.366C86.934 15.652 87.466 14.532 87.746 13.692ZM78.282 26.376L76.812 25.312C77.512 24.248 78.464 22.484 79.22 20.846L80.452 21.854C79.808 23.352 79.038 24.962 78.282 26.376ZM79.934 18.774L78.94 20.076C78.422 19.544 77.316 18.816 76.434 18.354L77.372 17.178C78.24 17.584 79.374 18.256 79.934 18.774ZM77.078 14.658L78.044 13.496C78.912 13.888 80.004 14.56 80.55 15.092L79.514 16.38C79.024 15.848 77.932 15.12 77.078 14.658ZM83.588 16.31L82.076 16.996C81.908 16.31 81.362 15.218 80.816 14.406L82.216 13.79C82.776 14.56 83.378 15.582 83.588 16.31ZM82.888 22.288H87.13V21.238H82.888V22.288ZM87.13 18.816H82.888V19.838H87.13V18.816ZM88.754 17.262V24.626C88.754 25.438 88.614 25.872 88.082 26.124C87.564 26.39 86.808 26.404 85.758 26.404C85.702 25.956 85.478 25.27 85.254 24.836C85.898 24.878 86.626 24.878 86.85 24.878C87.06 24.864 87.13 24.794 87.13 24.612V23.688H82.888V26.418H81.25V17.262H84.218V13.37H85.898V17.262H88.754Z" fill="white"/> <g id="Frame"> <path id="Vector" d="M53.4599 25.1179C53.2915 25.1179 53.1232 25.0536 52.9946 24.9251L43.0678 14.9981C42.8107 14.7412 42.8107 14.3244 43.0678 14.0675C43.3249 13.8105 43.7413 13.8105 43.9983 14.0675L53.9252 23.9946C54.1822 24.2514 54.1822 24.6683 53.9252 24.9251C53.7966 25.0536 53.6283 25.1179 53.4599 25.1179Z" fill="white"/> <path id="Vector_2" d="M43.5331 25.1179C43.3647 25.1179 43.1963 25.0536 43.0678 24.9251C42.8107 24.6683 42.8107 24.2514 43.0678 23.9946L52.9946 14.0675C53.2517 13.8105 53.6681 13.8105 53.9252 14.0675C54.1822 14.3244 54.1822 14.7412 53.9252 14.9981L43.9983 24.9251C43.8698 25.0536 43.7014 25.1179 43.5331 25.1179Z" fill="white"/> </g> </g> <defs> <filter id="filter0_d_2405_1766" x="0" y="0" width="133" height="47" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" result="BackgroundImageFix"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> <feOffset dy="4"/> <feGaussianBlur stdDeviation="2"/> <feComposite in2="hardAlpha" operator="out"/> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2405_1766"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2405_1766" result="shape"/> </filter> </defs> </svg> src/assets/images/layerManagement/savebtn.svg
New file @@ -0,0 +1,23 @@ <svg width="133" height="47" viewBox="0 0 133 47" fill="none" xmlns="http://www.w3.org/2000/svg"> <g id="Group 1321316177"> <g id="Rectangle 34624973" filter="url(#filter0_d_2405_1772)"> <rect x="4" width="125" height="39" rx="4" fill="#0059FF"/> </g> <path id="保存" d="M65.584 13.17L67.124 13.674C66.76 14.584 66.326 15.536 65.822 16.432V26.19H64.24V18.868C63.89 19.316 63.54 19.736 63.176 20.114C63.022 19.708 62.56 18.812 62.28 18.406C63.582 17.146 64.856 15.158 65.584 13.17ZM68.986 15.214V17.09H73.088V15.214H68.986ZM75.44 21.332H72.64C73.466 22.55 74.67 23.698 75.846 24.384C75.468 24.706 74.936 25.294 74.67 25.714C73.648 24.986 72.626 23.852 71.828 22.606V26.218H70.148V22.676C69.294 23.908 68.23 24.972 67.124 25.686C66.872 25.28 66.354 24.678 65.976 24.356C67.236 23.698 68.482 22.564 69.35 21.332H66.48V19.82H70.148V18.56H67.404V13.758H74.754V18.56H71.828V19.82H75.44V21.332ZM89.23 16.544H81.768C81.292 17.552 80.732 18.518 80.074 19.414V26.19H78.394V21.304C77.974 21.682 77.554 22.018 77.078 22.34C76.91 21.906 76.546 21.164 76.294 20.744C77.806 19.75 79.024 18.224 79.878 16.544H76.798V14.948H80.592C80.816 14.332 81.012 13.73 81.166 13.128L82.902 13.548C82.762 14.024 82.594 14.472 82.426 14.948H89.23V16.544ZM89.44 21.15V22.704H86.122V24.454C86.122 25.294 85.982 25.728 85.38 25.98C84.792 26.204 83.966 26.232 82.846 26.218C82.79 25.742 82.594 25.098 82.384 24.622C83.084 24.664 83.91 24.664 84.134 24.664C84.372 24.65 84.442 24.594 84.442 24.412V22.704H80.886V21.15H84.442V20.17C84.876 19.904 85.338 19.526 85.772 19.134H81.978V17.636H87.298L87.648 17.538L88.698 18.392C87.984 19.148 87.046 19.974 86.122 20.618V21.15H89.44Z" fill="white"/> <g id="Frame"> <path id="Vector" d="M47.3835 24.4974C47.1566 24.4974 46.9383 24.4125 46.7737 24.2583L42.0767 19.8784C41.725 19.551 41.7129 19.0069 42.049 18.6639C42.3851 18.3208 42.9447 18.3104 43.2964 18.6379L47.3073 22.3785L54.5824 13.7694C54.8925 13.4038 55.4486 13.3501 55.8246 13.6516C56.2006 13.953 56.2543 14.4936 55.9459 14.8609L48.0662 24.1856C47.9102 24.3709 47.6816 24.4836 47.4373 24.4974H47.3835Z" fill="white"/> </g> </g> <defs> <filter id="filter0_d_2405_1772" x="0" y="0" width="133" height="47" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> <feFlood flood-opacity="0" result="BackgroundImageFix"/> <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> <feOffset dy="4"/> <feGaussianBlur stdDeviation="2"/> <feComposite in2="hardAlpha" operator="out"/> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/> <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2405_1772"/> <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2405_1772" result="shape"/> </filter> </defs> </svg> src/styles/element-ui.scss
@@ -152,7 +152,8 @@ .ztzf-input { .el-input__wrapper { padding: 0 8px !important; background: #2D2D2D; // background: #2D2D2D; background-color: transparent !important; box-shadow: none !important; border: 1px solid #fff; @@ -180,6 +181,19 @@ --el-tree-node-hover-bg-color:transparent !important; color: #fff !important; } .ztzf-layer-search { background-color: transparent !important; .el-select__wrapper { background-color: transparent !important; } .el-select__popper.el-popper { background-color: transparent !important; } .el-popper.is-light { background-color: transparent !important; } } //======以下针对表格功能 增删查改样式和弹窗========= .ztzf-dialog-mange { .el-dialog__body { src/views/layerManagement/components/leftList.vue
@@ -12,25 +12,39 @@ </div> </div> <div class="btnGroups"> <el-button class="ztzf-button">新增围栏</el-button> <el-button class="ztzf-button">新增文件夹</el-button> <el-button class="ztzf-button" @click="addFence">新增围栏</el-button> <el-button class="ztzf-button" @click="addFolder">新增文件夹</el-button> <el-button class="ztzf-button" @click="selectAll">全选</el-button> </div> <div class="tableListBox"> <el-tree class="ztzf-el-tree" ref="treeRef" v-model="checkedKeys" :data="treeData" show-checkbox node-key="id" default-expand-all @check="handleCheck" :props="{ label: 'name', children: 'children', }" /> <el-tree class="ztzf-el-tree" ref="treeRef" v-model="checkedKeys" :data="treeData" show-checkbox node-key="id" default-expand-all @check="handleCheck" :props="{ label: 'name', children: 'children', }" > <!-- 自定义节点内容 --> <template #default="{ node }"> <div class="tree-node"> <!-- 节点名称 --> <span>{{ node.label }}</span> <!-- 操作按钮组 --> <div class="tree-node-actions"> <el-button icon="el-icon-location" type="text" @click="handleLocation(node)"></el-button> <el-button icon="el-icon-edit" type="text" @click="handleEdit(node)"></el-button> <el-button icon="el-icon-delete" type="text" @click="handleDelete(node)"></el-button> </div> </div> </template> </el-tree> </div> </div> </template> @@ -58,7 +72,7 @@ try { const res = await treeDataApi(); treeAllData.value = res.data.data; // console.log('接口获取数据', treeAllData.value); console.log('接口获取数据', treeAllData.value); setupWatch(); } catch (error) { console.error('获取数据失败:', error); @@ -109,7 +123,33 @@ } } }; // 定位按钮事件 const handleLocation = (node) => { console.log('定位操作，节点：', node); }; // 编辑按钮事件 const handleEdit = (node) => { console.log('编辑操作，节点：', node.data); emit('update:coverData', [node.data]); }; // 删除按钮事件 const handleDelete = (node) => { console.log('删除操作，节点：', node.data); }; // 新增围栏 const addFence =()=>{ } // 新增文件夹 const addFolder =()=>{ } onMounted(() => { gettreeDataApi(); }); @@ -126,7 +166,7 @@ width: 392px; overflow: hidden; background: rgba(0, 0, 0, 0.51); background: rgba(0, 0, 0, 0.8); border-radius: 8px 8px 8px 8px; padding: 16px 12px; } @@ -179,5 +219,24 @@ display: flex; } .tableListBox { .tree-node { display: flex; justify-content: space-between; align-items: center; width: 100%; } .tree-node-actions { display: flex; gap: 8px; // 按钮之间的间距 button { padding: 0; // 清除默认内边距 color: #fff; // 按钮图标颜色 &:hover { color: #409eff; // hover 时的颜色 } } } } </style> src/views/layerManagement/components/rightEdit.vue
@@ -1,33 +1,129 @@ <template> <div class="rightContainer"> 右侧编辑 </div> <div class="rightContainer"> <div class="contenttitle">围栏信息</div> <div class="centerBox"> <div class="itemRow"> <div class="label">文件夹名称</div> <div> <el-select class="ztzf-layer-search" v-model="value" placeholder="Select"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </div> </div> <div class="itemRow"> <div class="label">围栏名称</div> <div> <el-input class="ztzf-input inputName" v-model="input" placeholder="围栏名称" /> </div> </div> <div class="itemRow"> <div class="label">围栏备注</div> <div> <el-input v-model="textarea" :rows="5" type="textarea" placeholder="请输入" /> </div> </div> </div> <div class="detailInfo"> <div class="infpItem"> <div class="itemData"> <div class="title">围栏总数量</div> <div class="num"><span>26</span>个</div> </div> <div class="itemData"> <div class="title">围栏总面积</div> <div class="num"><span>1651561.4</span>m²</div> </div> </div> <div class="infpItem"> <div class="itemData"> <div class="title">创建时间</div> <div class="num"><span>2025年10月22日</span></div> </div> <div class="itemData"> <div class="title">创建人</div> <div class="num"><span>张三</span></div> </div> </div> </div> <div class="btnGroups"> <img src="/src/assets/images/layerManagement/savebtn.svg" alt=""> <img src="/src/assets/images/layerManagement/cancelbtn.svg" alt=""> </div> </div> </template> <script setup > /** * @description rightEdit * @date 2025-10-27 (周一) 15:06:00 */ defineOptions({ name: 'rightEdit' }) </script> <script setup></script> <style scoped lang="scss"> .rightContainer { top: 0; position: absolute; top: 0; right: 0; height: 99%; height: 95%; z-index: 99; width: 377px; height: 100%; width: 324px; overflow: hidden; background: rgba(0, 0, 0, 0.8); border-radius: 8px 8px 8px 8px; padding: 6px 10px 0 10px; padding: 16px 12px; .contenttitle { font-family: Source Han Sans CN, Source Han Sans CN; font-weight: bold; font-size: 16px; color: #ffffff; margin-bottom: 20px; } .centerBox { font-family: Source Han Sans CN, Source Han Sans CN; font-weight: 400; font-size: 14px; color: #ffffff; .itemRow { margin-bottom: 35px; } .label { margin-bottom: 5px; } } .detailInfo { .infpItem { display: flex; justify-content: space-between; align-items: center; font-family: Source Han Sans CN, Source Han Sans CN; font-weight: 400; font-size: 14px; color: #ffffff; margin-bottom: 23px; .num { span{ font-family: Source Han Sans CN, Source Han Sans CN; font-weight: bold; font-size: 20px; color: #ffffff;} } .itemData { width: 50%; } } } .btnGroups { display: flex; justify-content: center; position: absolute; bottom: 59px; left: 0; right: 0; img{ width: 125px; height: 39px; cursor: pointer;} } } </style> </style> src/views/layerManagement/index.vue
@@ -11,13 +11,14 @@ <div class="mapContainer"> <div id="layMap" class="ztzf-cesium"></div> <leftList @update:coverData="handleCoverDataUpdate" :activeName="activeName"></leftList> <rightEdit></rightEdit> </div> </div> </basic-container> </template> <script setup> import RightEdit from '@/views/layerManagement/components/rightEdit.vue'; import rightEdit from '@/views/layerManagement/components/rightEdit.vue'; import leftList from '@/views/layerManagement/components/leftList.vue'; import { DrawPolygon } from '@/views/layerManagement/components/utils'; import * as Cesium from 'cesium'; @@ -119,7 +120,7 @@ const handleCoverDataUpdate = data => { selectDataList.value = data; // console.log('获取的',selectDataList.value); console.log('获取的',selectDataList.value); if (selectDataList.value.length > 0) { loadDataToMap(selectDataList.value); @@ -179,6 +180,8 @@ const throttleLoadPlanarRoute = throttle(loadPlanarRoute, 200); drawPolygonExample.subscribe('getPolygonPositions', data => { console.log('绘制的数据',data); throttleLoadPlanarRoute(data); });
