<template>
|
<div class="edit">
|
<div class="layerBox">
|
<div class="layerTitle">
|
<div class="tileLeft">
|
<div class="titleImg" @click="editState">
|
<ArrowLeft />
|
</div>
|
<div class="titleLable">图层编辑</div>
|
</div>
|
</div>
|
<div class="layerContent">
|
<el-tree
|
node-key="id"
|
:props="props"
|
:highlight-current="true"
|
:current-node-key="selectedNodeId"
|
:data="layerTree"
|
:expand-on-click-node="false"
|
@node-click="handleNodeClick"
|
ref="treeRef"
|
style="font-size: 16px"
|
/>
|
</div>
|
</div>
|
<div class="edit_box">
|
<div class="edit_box_btn btnstyle">
|
<el-button type="primary" :icon="Plus" @click="insertLayerData(1)">新增同级</el-button>
|
<el-button type="primary" :icon="Plus" @click="insertLayerData(2)">新增子级</el-button>
|
<el-button type="primary" :icon="Delete" class="delbtn" @click="delLayer">删除</el-button>
|
<el-button type="primary" :icon="Top" @click="move(1)">向上移动</el-button>
|
<el-button type="primary" :icon="Bottom" @click="move(2)">向下移动</el-button>
|
</div>
|
<div class="edit_box_form">
|
<el-form :model="formInline" label-width="120px">
|
<el-form-item label="图层类型">
|
<el-select style="width: 100%" v-model="formInline.isLayer">
|
<el-option label="图层组" value="0"></el-option>
|
<el-option label="图层" value="1"></el-option>
|
</el-select>
|
</el-form-item>
|
<!-- 服务资源-->
|
<el-form-item v-show="formInline.isLayer == 1" label="服务资源">
|
<el-button
|
size="small"
|
class="serviceButton"
|
@click="setServiceChange('0')"
|
key="0"
|
:class="{ serviceActive: !serviceActive }"
|
>否</el-button>
|
<el-button
|
size="small"
|
class="serviceButton"
|
@click="setServiceChange('1')"
|
key="1"
|
:class="{ serviceActive: serviceActive }"
|
>是</el-button>
|
</el-form-item>
|
|
<el-form-item label="图层名称">
|
<el-input v-model="formInline.cnName" placeholder="请输入图层名称" />
|
</el-form-item>
|
<!-- 服务类别 -->
|
<el-form-item v-show="formInline.isLayer == 1" label="服务类别">
|
<el-select style="width: 100%" v-model="formInline.category" :disabled="serviceActive">
|
<el-option
|
v-for="item in category_type"
|
:key="item.value"
|
:label="item.name"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="表名称" v-show="formInline.category == 2">
|
<el-input v-model="formInline.tab" placeholder="请输入表名称" :disabled="serviceActive" />
|
</el-form-item>
|
<!-- 数据类型 -->
|
<el-form-item v-show="formInline.isLayer == 1" label="数据类型">
|
<el-select
|
style="width: 100%"
|
v-model="formInline.data"
|
:disabled="serviceActive"
|
@change="setFromDataTypeClick"
|
>
|
<el-option
|
v-for="item in serveType"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<!-- 数据类型 -->
|
<el-form-item v-show="formInline.isLayer == 1" label="服务类型">
|
<el-select style="width: 100%" v-model="formInline.type" :disabled="serviceActive">
|
<el-option
|
v-for="item in dataType"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="服务地址" v-show="formInline.isLayer == 1">
|
<el-input
|
v-model="formInline.serviceUrl"
|
placeholder="请输入服务地址"
|
:disabled="serviceActive"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<div class="btnstyle editBtn">
|
<el-button type="primary" @click="onSubmit">确定</el-button>
|
<el-button class="delbtn" @click="updateRest">取消</el-button>
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
<el-dialog title="新增" v-model="dialogVisible" width="50%">
|
<div style="width: 100%; max-height: 63vh; overflow-y: auto">
|
<el-form :model="insertData" label-width="120px">
|
<el-form-item label="图层类型">
|
<el-select style="width: 100%" v-model="insertData.isLayer">
|
<el-option label="图层组" value="0"></el-option>
|
<el-option label="图层" value="1"></el-option>
|
</el-select>
|
</el-form-item>
|
<!-- 服务资源-->
|
<el-form-item v-show="insertData.isLayer == 1" label="服务资源">
|
<el-button
|
size="small"
|
class="serviceButton"
|
@click="setInsertServiceChange('0')"
|
key="0"
|
:class="{ serviceActive: !insertServiceActive }"
|
>否</el-button>
|
<el-button
|
size="small"
|
class="serviceButton"
|
@click="setInsertServiceChange('1')"
|
key="1"
|
:class="{ serviceActive: insertServiceActive }"
|
>是</el-button>
|
</el-form-item>
|
|
<el-form-item label="图层名称">
|
<el-input v-model="insertData.cnName" placeholder="请输入图层名称" />
|
</el-form-item>
|
<!-- 服务类别 -->
|
<el-form-item v-show="insertData.isLayer == 1" label="服务类别">
|
<el-select
|
style="width: 100%"
|
v-model="insertData.category"
|
:disabled="insertServiceActive"
|
>
|
<el-option
|
v-for="item in category_type"
|
:key="item.value"
|
:label="item.name"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="表名称" v-show="insertData.category == 2">
|
<el-input
|
v-model="insertData.tab"
|
placeholder="请输入表名称"
|
:disabled="insertServiceActive"
|
/>
|
</el-form-item>
|
<!-- 数据类型 -->
|
<el-form-item v-show="insertData.isLayer == 1" label="数据类型">
|
<el-select
|
style="width: 100%"
|
v-model="insertData.data"
|
@change="setFromDataTypeClick"
|
:disabled="insertServiceActive"
|
>
|
<el-option
|
v-for="item in serveType"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<!-- 数据类型 -->
|
<el-form-item v-show="insertData.isLayer == 1" label="服务类型">
|
<el-select
|
style="width: 100%"
|
v-model="insertData.type"
|
:disabled="insertServiceActive"
|
>
|
<el-option
|
v-for="item in dataType"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="服务地址" v-show="insertData.isLayer == 1">
|
<el-input
|
v-model="insertData.serviceUrl"
|
placeholder="请输入服务地址"
|
:disabled="insertServiceActive"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<div class="btnstyle editBtn">
|
<el-button type="primary" size="small" @click="added()">确定</el-button>
|
<el-button class="delbtn" type="info" size="small" @click="submitCancel()">取消</el-button>
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
</el-dialog>
|
<el-dialog v-model="dialogService" width="50%" :show-close="false">
|
<div style="width: 100%; max-height: 63vh; overflow-y: auto">
|
<div style="display: flex; justify-content: space-between" class="tableForm">
|
<div>
|
<el-input size="small" v-model="listData.name">
|
<template #suffix>
|
<el-icon class="el-input__icon el-icon-search" @click="setServiceQuery">
|
<search />
|
</el-icon>
|
</template>
|
</el-input>
|
</div>
|
<div class="btnstyle">
|
<el-button type="info" size="small" @click="setServiceRest">重置</el-button>
|
|
<el-button type="primary" size="small" @click="setServiceConfirm">确认</el-button>
|
<el-button type="info" size="small" @click="setServiceCanel" class="delbtn">取消</el-button>
|
</div>
|
</div>
|
<el-table ref="multipleTable" :data="tableData" @select="selectChange">
|
<el-table-column type="selection" width="55"></el-table-column>
|
<el-table-column align="center" type="index" label="序号" width="70px" />
|
<el-table-column align="center" prop="cnName" label="资源名称" />
|
|
<el-table-column align="center" prop="category" label="服务类型" :formatter="setResCategory" />
|
<el-table-column align="center" prop="type" label="数据类型" :formatter="setResType" />
|
</el-table>
|
<div class="pagination_box" style="margin-top: 15px">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="listData.pageIndex"
|
:page-sizes="[10, 50, 100, 200]"
|
:page-size="listData.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="listData.count"
|
></el-pagination>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
} from "vue";
|
import { Plus, Delete, Top, Bottom } from "@element-plus/icons-vue";
|
import { ElMessage } from "element-plus";
|
import { serve_type, data_type, category_type } from "./js/layerManage.js";
|
import { removeToken, getToken } from "@/utils/auth";
|
import { res_selectByPageAndCount } from "@/api/api";
|
import { Search } from "@element-plus/icons-vue";
|
const stretchValue = ref("");
|
const emits = defineEmits(["SETstate", "addlayer", "delLayer"]);
|
//defineProps 来接收组件的传值
|
const defineProp = defineProps({
|
layerTree: Array,
|
});
|
let treeRef = ref();
|
let multipleTable = ref();
|
const stretchOptions = [
|
{
|
value: "目录",
|
label: "目录",
|
},
|
{
|
value: "Option2",
|
label: "Option2",
|
},
|
{
|
value: "Option3",
|
label: "Option3",
|
},
|
{
|
value: "Option4",
|
label: "Option4",
|
},
|
{
|
value: "Option5",
|
label: "Option5",
|
},
|
];
|
|
const formInline = ref({
|
cnName: null,
|
type: null,
|
serveType: null,
|
url: null,
|
dataType: null,
|
bak: null,
|
isShow: "1",
|
isProject: "0",
|
enName: "",
|
isLayer: null,
|
category: null,
|
status: null,
|
service: "0",
|
serviceUrl: null,
|
});
|
const insertData = ref({
|
cnName: null,
|
type: null,
|
serveType: null,
|
url: null,
|
dataType: null,
|
bak: null,
|
isShow: "1",
|
isProject: "0",
|
enName: "",
|
isLayer: null,
|
category: null,
|
status: null,
|
service: "0",
|
serviceUrl: null,
|
});
|
const props = {
|
label: "cnName",
|
children: "children",
|
};
|
let dialogVisible = ref(false);
|
let dialogService = ref(false);
|
// 当前选中的节点 id
|
const selectedNodeId = ref(null as any); //做类型断言处理
|
const selectedObj = ref(null);
|
let menuOption = ref([]);
|
let serviceActive = ref(false);
|
let dataType = ref(null);
|
let serveType = ref(null);
|
let backUpData = ref(null);
|
let listData = ref({
|
pageIndex: 1,
|
pageSize: 10,
|
count: 0,
|
name: "",
|
});
|
let tableData = ref([]);
|
let multipleSelection = ref([]);
|
let insertServiceActive = ref(false);
|
let addlocation = 0;
|
let checkedStaste = false;
|
const insertStart = () => {
|
var data = serveType.value[0].value;
|
setInsertDataTypeChange(serveType.value[0].value);
|
var type = dataType.value[0].value;
|
insertData.value = {
|
cnName: null,
|
serveType: null,
|
url: null,
|
dataType: null,
|
bak: null,
|
isShow: "1",
|
isProject: "0",
|
enName: "",
|
isLayer: null,
|
category: null,
|
service: "0",
|
status: "1",
|
type: type,
|
data: data,
|
};
|
};
|
// 新增取消
|
const submitCancel = () => {
|
dialogVisible.value = false;
|
insertStart();
|
};
|
|
const handleCurrentChange = (val) => {
|
listData.value.pageIndex = val;
|
getServiceData();
|
};
|
const handleSizeChange = (val) => {
|
listData.value.pageSize = val;
|
getServiceData();
|
};
|
const setResType = (row, column) => {
|
switch (row.type) {
|
case 0:
|
return "URL";
|
case 1:
|
return "TMS";
|
case 2:
|
return "WMTS";
|
case 3:
|
return "WMS";
|
case 4:
|
return "WFS";
|
case 5:
|
return "Tileset";
|
default:
|
return "";
|
}
|
};
|
const setResCategory = (row, column) => {
|
switch (row.category) {
|
case 0:
|
return "其他";
|
case 1:
|
return "GisServer";
|
case 2:
|
return "GeoServer";
|
case 3:
|
return "数简";
|
default:
|
return "";
|
}
|
};
|
const selectChange = (selection, row) => {
|
multipleSelection.value = row;
|
if (selection.length > 1) {
|
let del_row = selection.shift();
|
multipleTable.value.toggleRowSelection(del_row, false);
|
}
|
};
|
const setServiceCanel = () => {
|
dialogService.value = false;
|
multipleSelection.value = [];
|
tableData.value = [];
|
listData.value = {
|
pageIndex: 1,
|
pageSize: 10,
|
count: 0,
|
name: "",
|
};
|
};
|
const setServiceConfirm = () => {
|
if (multipleSelection.value.length <= 0) {
|
return ElMessage("未选择资源数据");
|
}
|
var url, serviceUrl;
|
if (multipleSelection.value.status == 1) {
|
serviceUrl = multipleSelection.value.url;
|
url = multipleSelection.value.url;
|
} else if (multipleSelection.value.status == 2) {
|
var token = getToken();
|
if (
|
multipleSelection.value.proxy &&
|
multipleSelection.value.proxy.indexOf("{token}") > -1
|
) {
|
serviceUrl =
|
config.BASE_URL +
|
multipleSelection.value.proxy.replaceAll("{token}", token);
|
} else {
|
serviceUrl = multipleSelection.value.url;
|
}
|
|
url = multipleSelection.value.proxy;
|
}
|
if (dialogVisible.value) {
|
setInsertDataTypeChange(multipleSelection.value.data);
|
insertData.value.cnName = multipleSelection.value.cnName;
|
insertData.value.enName = multipleSelection.value.enName;
|
insertData.value.type = multipleSelection.value.type;
|
insertData.value.resid = multipleSelection.value.id;
|
insertData.value.serviceUrl = serviceUrl;
|
insertData.value.url = url;
|
insertData.value.data = multipleSelection.value.data;
|
insertData.value.tab = multipleSelection.value.tab;
|
insertData.value.category = multipleSelection.value.category;
|
insertServiceActive.value = true;
|
} else {
|
formInline.value.cnName = multipleSelection.value.cnName;
|
formInline.value.enName = multipleSelection.value.enName;
|
formInline.value.type = multipleSelection.value.type;
|
formInline.value.resid = multipleSelection.value.id;
|
formInline.value.serviceUrl = serviceUrl;
|
formInline.value.data = multipleSelection.value.data;
|
formInline.value.tab = multipleSelection.value.tab;
|
formInline.value.url = url;
|
serviceActive.value = true;
|
// this.formInline.status = '1';
|
}
|
dialogService.value = false;
|
};
|
const setServiceRest = () => {
|
listData.value = {
|
pageIndex: 1,
|
pageSize: 10,
|
count: 0,
|
name: "",
|
};
|
getServiceData();
|
};
|
const setServiceQuery = () => {
|
listData.value.pageIndex = 1;
|
listData.value.pageSize = 10;
|
listData.value.count = 0;
|
getServiceData();
|
};
|
const getServiceData = async () => {
|
const data = await res_selectByPageAndCount(listData.value);
|
tableData.value = data.result;
|
listData.value.count = data.count;
|
dialogService.value = true;
|
};
|
|
const insertLayerData = (res) => {
|
if (!checkedStaste) {
|
return ElMessage.warning("请先点击选中相应图层");
|
}
|
addlocation = res;
|
|
dialogVisible.value = true;
|
};
|
//修改重置
|
const updateRest = () => {
|
var res = JSON.parse(backUpData.value);
|
if (res) {
|
formInline.value = res;
|
formInline.value.isLayer = res.isLayer.toString();
|
|
if (formInline.value.status) {
|
formInline.value.status = res.status.toString();
|
}
|
}
|
dialogVisible.value = false;
|
// this.formInline.isProject = res.isProject.toString();
|
};
|
//下拉菜单初始化
|
const optionsStart = () => {
|
var std = [];
|
var ste = [];
|
for (var i in serve_type) {
|
ste.push({
|
value: serve_type[i].value,
|
label: serve_type[i].name,
|
});
|
}
|
serveType.value = std;
|
for (var i in data_type) {
|
std.push({
|
value: data_type[i].value,
|
label: data_type[i].name,
|
children: data_type[i].children,
|
});
|
}
|
dataType.value = ste;
|
};
|
const setInsertDataTypeChange = (res) => {
|
var filter = serveType.value.filter((rs) => {
|
if (rs.value == res) {
|
return rs;
|
}
|
});
|
if (filter.length <= 0) return;
|
var std = [];
|
var data = filter[0].children;
|
for (var i in data) {
|
for (var j in serve_type) {
|
if (serve_type[j].value == data[i]) {
|
std.push({
|
value: serve_type[j].value,
|
label: serve_type[j].name,
|
});
|
}
|
}
|
}
|
dataType.value = std;
|
};
|
const setFromDataTypeClick = (res) => {
|
setInsertDataTypeChange(res);
|
formInline.value.type = dataType.value[0].value;
|
};
|
const setInsertServiceChange = (res) => {
|
if (res == "1") {
|
setServiceRest();
|
} else {
|
insertServiceActive.value = false;
|
insertData.value.resid = 0;
|
}
|
};
|
const setServiceChange = (res) => {
|
if (res == "1") {
|
setServiceRest();
|
} else {
|
serviceActive.value = false;
|
formInline.value.resid = 0;
|
}
|
};
|
const handleCheckChange = (
|
data: Tree,
|
checked: boolean,
|
indeterminate: boolean
|
) => {};
|
const onSubmit = () => {
|
if (!checkedStaste) {
|
return ElMessage.warning("请先点击选中相应图层");
|
}
|
// selectedObj.value = formInline.value;
|
let node = treeRef.value.getNode(selectedObj.value);
|
// 将变动之前的node备份
|
let copyNode = { ...node };
|
copyNode.previousSibling = { ...node.previousSibling };
|
copyNode.nextSibling = { ...node.nextSibling };
|
copyNode.parent = { ...node.parent };
|
|
if (Object.keys(copyNode.previousSibling).length !== 0) {
|
// 删除原先的node
|
treeRef.value.remove(node.data);
|
// 复制该node到指定位置(参数:1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node)
|
treeRef.value.insertAfter(formInline.value, copyNode.previousSibling.data);
|
|
return;
|
} else if (Object.keys(copyNode.nextSibling).length !== 0) {
|
// 删除原先的node
|
treeRef.value.remove(node.data);
|
treeRef.value.insertBefore(formInline.value, copyNode.nextSibling.data);
|
|
return;
|
} else if (Object.keys(copyNode.parent).length !== 0) {
|
// 删除原先的node
|
treeRef.value.remove(node.data);
|
treeRef.value.append(
|
formInline.value,
|
treeRef.value.getNode(copyNode.parent.data)
|
);
|
|
return;
|
}
|
ElMessage({
|
message: "修改成功",
|
type: "success",
|
});
|
dialogVisible.value = false;
|
};
|
|
// 处理节点点击事件
|
function handleNodeClick(data: any) {
|
if (data.id === selectedNodeId.value) {
|
// 如果当前节点已经选中,则取消选中
|
selectedNodeId.value = null;
|
checkedStaste = false;
|
} else {
|
checkedStaste = true;
|
// 否则选中当前节点
|
selectedNodeId.value = data.id;
|
selectedObj.value = data;
|
backUpData.value = JSON.stringify(data);
|
// this.currentData = JSON.stringify(result)
|
formInline.value = JSON.parse(backUpData.value);
|
debugger;
|
formInline.value.isLayer = parseInt(data.isLayer) == 0 ? "0" : "1";
|
if (data.resid && data.resid > 0) {
|
serviceActive.value = true;
|
} else {
|
serviceActive.value = false;
|
}
|
var url;
|
if (!serviceActive.value) {
|
url = data.url;
|
} else if (serviceActive.value) {
|
var token = getToken();
|
if (data.url.indexOf("{token}") > -1) {
|
url = config.BASE_URL + data.url.replaceAll("{token}", token);
|
} else {
|
url = data.url;
|
}
|
}
|
formInline.value.serviceUrl = url;
|
}
|
}
|
//新增
|
const added = () => {
|
var id = "";
|
for (var i = 0; i < 7; i++) {
|
id += Math.floor(Math.random() * 10);
|
}
|
var addObj = {
|
isLayer: parseInt(insertData.value.isLayer),
|
id: id,
|
cnName: insertData.value.cnName,
|
url: insertData.value.serviceUrl,
|
type: insertData.value.type, //数据类型
|
proxy: null,
|
data: insertData.value.data, //数据类型
|
tab: insertData.value.tab, //Geoserver 名称,
|
category: insertData.value.category, //服务类别 Geoserver , 1 GisServer 2 GeoServer 3数简
|
};
|
debugger;
|
if (addlocation == 1) {
|
//新增同级
|
treeRef.value.insertAfter(addObj, treeRef.value.getNode(selectedObj.value));
|
} else if (addlocation == 2) {
|
//新增子级
|
treeRef.value.append(addObj, treeRef.value.getNode(selectedObj.value));
|
}
|
dialogVisible.value = false;
|
ElMessage({
|
message: "添加成功",
|
type: "success",
|
});
|
};
|
//删除
|
const delLayer = () => {
|
if (!selectedObj.value) {
|
return ElMessage.warning("请先点击选中相应图层");
|
}
|
|
treeRef.value.remove(treeRef.value.getNode(selectedObj.value));
|
ElMessage({
|
message: "删除成功",
|
type: "success",
|
});
|
// emits("delLayer", selectedNodeId.value);
|
};
|
//图层设置弹框
|
const layerSet = () => {};
|
//关闭状态
|
const editState = () => {
|
emits("SETstate", false);
|
};
|
const handlIsShow = (res: string) => {
|
menuOption.value.forEach((e) => {
|
if (e.name == res) {
|
e.isShow = !e.isShow;
|
}
|
});
|
};
|
//移动
|
const move = (type) => {
|
// let node = treeRef.value.getCurrentNode();
|
let node = treeRef.value.getNode(selectedObj.value);
|
let data = selectedObj.value;
|
// 将变动之前的node备份
|
let copyNode = { ...node };
|
copyNode.previousSibling = { ...node.previousSibling };
|
copyNode.nextSibling = { ...node.nextSibling };
|
// window.sessionStorage.setItem("menuNode", CircularJSON.stringify(copyNode));
|
|
if (type === 1) {
|
// 上移
|
if (node.previousSibling) {
|
// 删除原先的node
|
treeRef.value.remove(node.data);
|
// 拿到copy的node
|
// nodeData = CircularJSON.parse(window.sessionStorage.getItem("menuNode"));
|
// 复制该node到指定位置(参数:1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node)
|
|
treeRef.value.insertBefore(copyNode.data, copyNode.previousSibling.data);
|
// window.sessionStorage.removeItem("menuNode");
|
} else {
|
return ElMessage.warning("该菜单已经是当前层最上级");
|
}
|
} else {
|
// 下移
|
if (node.nextSibling) {
|
treeRef.value.remove(node.data);
|
treeRef.value.insertAfter(copyNode.data, copyNode.nextSibling.data);
|
} else {
|
return ElMessage.warning("该菜单已经是当前层最下级");
|
}
|
}
|
emits("addlayer", { type: type, id: selectedObj.value.id });
|
};
|
optionsStart();
|
</script>
|
|
<style lang="less" scoped>
|
.edit {
|
width: 1227px;
|
display: flex;
|
position: absolute;
|
top: 60px;
|
left: 395px;
|
// top: 50%;
|
// left: 50%;
|
// transform: translateX(-50%);
|
// transform: translateY(-50%);
|
background: rgba(7, 8, 14, 0.8);
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
border: 1px solid #d6e4ff;
|
z-index: 10;
|
}
|
.edit_box {
|
width: 867px;
|
padding: 30px 0;
|
.edit_box_btn {
|
display: flex;
|
justify-content: center;
|
margin-bottom: 47px;
|
}
|
.edit_box_form {
|
padding: 0 116px;
|
/deep/ .el-form-item__label {
|
color: #fff;
|
}
|
}
|
}
|
.btnstyle {
|
.el-button {
|
height: 37px;
|
background: rgba(104, 156, 255, 0.2);
|
border: 1px solid #234066;
|
border-radius: 2px;
|
font-size: 16px;
|
font-weight: 400;
|
color: #ffffff;
|
}
|
.el-button:hover {
|
border: 1px solid #689cff;
|
}
|
.delbtn {
|
background: rgba(245, 108, 108, 0.2);
|
border: 1px solid #5a0914;
|
}
|
}
|
.layerBox {
|
width: 359px;
|
height: 615px;
|
background: rgba(7, 8, 14, 0.8);
|
// padding-bottom: 60px;
|
box-sizing: border-box;
|
.layerTitle {
|
width: calc(100% - 27px);
|
height: 42px;
|
background: #0e151f;
|
box-shadow: 0px 0px 6px 0px #080c13,
|
0px 14px 16px 0px rgba(38, 47, 71, 0.68);
|
display: flex;
|
justify-content: space-between;
|
padding-left: 7px;
|
padding-right: 20px;
|
color: white;
|
.tileLeft {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
|
.titleLable {
|
font-size: 18px;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
color: #ffffff;
|
}
|
}
|
.titleImg {
|
width: 20px;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
color: rgba(104, 156, 255, 1);
|
cursor: pointer;
|
}
|
}
|
.layerContent {
|
padding: 0 8px;
|
height: 92%;
|
overflow: auto;
|
}
|
|
/deep/.el-tree-node__content {
|
font-size: 16px;
|
}
|
|
.layerContent::-webkit-scrollbar {
|
width: 8px;
|
}
|
.layerContent::-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
background: rgba(0, 0, 0, 0.2);
|
}
|
.layerContent::-webkit-scrollbar-track {
|
border-radius: 0;
|
background: rgba(0, 0, 0, 0);
|
}
|
.contentBox {
|
margin-top: 3px;
|
.content {
|
}
|
}
|
.contentTile {
|
width: 100%;
|
height: 42px;
|
background: #0d131d;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.contentLeft {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.contentImg {
|
width: 22px;
|
height: 22px;
|
background: url("../../assets/img/leftBtn/矩形 8 拷贝 3.png") no-repeat;
|
background-size: 100% 100%;
|
margin-left: 16px;
|
}
|
.contentLabel {
|
font-size: 20px;
|
font-family: Source Han Sans CN;
|
font-weight: 300;
|
color: #ffffff;
|
margin-left: 7px;
|
}
|
}
|
.contentRight {
|
margin-right: 32px;
|
display: flex;
|
align-items: center;
|
|
.contentUP {
|
width: 18px;
|
height: 11px;
|
background: url("../../assets/img/leftBtn/箭头-左 拷贝.png") no-repeat
|
center;
|
background-size: 100% 100%;
|
|
cursor: pointer;
|
}
|
.accordion {
|
transform: rotate(180deg);
|
}
|
.contentDown {
|
width: 18px;
|
height: 11px;
|
background: url("../../assets/img/leftBtn/箭头-左 拷贝 4.png");
|
}
|
}
|
}
|
.content {
|
background: #1e2a3d;
|
padding: 10px;
|
}
|
.layer_box {
|
padding: 4px;
|
margin-bottom: 4px;
|
color: #ffffff;
|
font-size: 18px;
|
font-weight: 400;
|
background: #0e151f;
|
box-shadow: 0px 0px 6px 0px #080c13,
|
0px 14px 16px 0px rgba(38, 47, 71, 0.68);
|
display: flex;
|
justify-content: space-between;
|
padding-left: 7px;
|
padding-right: 20px;
|
.contentLeft {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
.contentImg {
|
width: 22px;
|
height: 22px;
|
background: url("../../assets/img/leftBtn/矩形 8 拷贝 3.png") no-repeat;
|
background-size: 100% 100%;
|
margin-left: 16px;
|
}
|
.contentLabel {
|
font-size: 20px;
|
font-family: Source Han Sans CN;
|
font-weight: 300;
|
color: #ffffff;
|
margin-left: 7px;
|
}
|
}
|
}
|
}
|
|
.editBtn {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding-top: 36px;
|
.delbtn {
|
margin-left: 40px;
|
}
|
}
|
.el-tree {
|
background: transparent;
|
}
|
/deep/ .el-tree-node {
|
background: #0d131d;
|
color: #ffffff;
|
font-size: 20px;
|
font-weight: 300;
|
margin-top: 3px;
|
padding: 8px;
|
}
|
/deep/ .el-tree-node:focus > .el-tree-node__content {
|
background: transparent;
|
}
|
/deep/ .el-tree-node__content:hover {
|
background: #0d131d;
|
}
|
/deep/ .el-tree-node__children {
|
background: #1e2a3d;
|
.el-tree-node {
|
background: #1e2a3d;
|
margin-top: 0;
|
padding: 4px;
|
}
|
}
|
// .layerContent
|
// /deep/
|
// .el-tree--highlight-current
|
// .el-tree-node.is-current
|
// > .el-tree-node__content {
|
// background: rgba(104, 156, 255, 0.5) !important;
|
// }
|
.highlight {
|
background: rgba(104, 156, 255, 0.5) !important;
|
}
|
.serviceButton {
|
background: transparent !important;
|
color: #dcdfe6;
|
}
|
.serviceActive {
|
background: transparent !important;
|
color: #46a6ff;
|
border: 1px solid #46a6ff;
|
}
|
/deep/ .el-dialog {
|
background-color: rgba(7, 8, 14, 1) !important;
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1) !important;
|
border: 1px solid #d6e4ff !important;
|
.el-dialog__title {
|
color: #dcdfe6;
|
}
|
.el-form-item__label {
|
color: #fff;
|
}
|
}
|
.tableForm {
|
margin-bottom: 20px;
|
}
|
.el-table {
|
background: rgba(7, 8, 14, 1);
|
}
|
.el-table /deep/ td {
|
background-color: rgba(7, 8, 14, 1);
|
color: white;
|
}
|
|
.el-table /deep/ th {
|
background-color: rgba(7, 8, 14, 1);
|
color: white;
|
}
|
/deep/ .el-table__header th,
|
/deep/ .el-table__header tr,
|
.el-table /deep/ th.el-table__cell,
|
/deep/ .el-table--enable-row-transition .el-table__body td.el-table__cell {
|
background-color: rgba(7, 8, 14, 1);
|
}
|
|
/deep/ .el-table tr:hover > td {
|
background-color: rgba(7, 8, 14, 1) !important;
|
}
|
.el-table /deep/ tbody tr:hover {
|
background-color: rgba(7, 8, 14, 1) !important;
|
}
|
.el-pagination {
|
/deep/ .btn-prev,
|
/deep/ .btn-next,
|
/deep/ .number {
|
background-color: transparent;
|
color: #fff;
|
}
|
/deep/ .is-active {
|
color: #409eff;
|
}
|
}
|
</style>
|