<template>
|
<div v-drag class="layerBox">
|
<div class="layerTitle">
|
<div class="tileLeft">
|
<div @click="setCloseLayer" class="titleImg">
|
<ArrowLeft />
|
</div>
|
<div class="titleLable">图层管理</div>
|
</div>
|
<div class="titleImg set" @click="layerSetBox">
|
<Setting />
|
</div>
|
</div>
|
<div class="layerContent">
|
<el-tree
|
node-key="id"
|
:props="props"
|
:highlight-current="false"
|
:current-node-key="selectedNodeId"
|
:data="treeData"
|
:default-expanded-keys="defaultExpanded"
|
:expand-on-click-node="false"
|
show-checkbox
|
@check="handleCheckChange"
|
ref="estreeRef"
|
v-if="treeData.length"
|
:default-checked-keys="DefaultId"
|
>
|
<template #default="{ node, data }">
|
<span class="custom-tree-node">
|
<span class="label">{{ node.label }}</span>
|
<!-- <span>
|
<a @click="append(data)"> Append </a>
|
<a style="margin-left: 8px" @click="remove(node, data)">
|
Delete
|
</a>
|
</span>-->
|
<span class="button" v-if="!data.isTemporaryLayer">
|
<el-dropdown trigger="click">
|
<span class="el-dropdown-link">
|
<el-icon class="el-icon--right">
|
<MoreFilled />
|
</el-icon>
|
</span>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item
|
v-if="data.type != 6 && data.isLayer == 1"
|
@click.native="clickdropdown(1, data)"
|
>详细</el-dropdown-item>
|
<el-dropdown-item v-if="data.type == 6 && data.isLayer == 1">删除</el-dropdown-item>
|
<el-dropdown-item
|
v-if="data.type == 3 && data.isLayer == 1"
|
@click.native="clickdropdown(2, data)"
|
>属性</el-dropdown-item>
|
<el-dropdown-item
|
v-if="data.isLayer == 0"
|
@click.native="clickdropdown(3, data)"
|
>透明度</el-dropdown-item>
|
<el-dropdown-item
|
v-if="data.shpType == 'temporaryLayer'"
|
@click.native="clickdTemporary(1, data)"
|
>编辑</el-dropdown-item>
|
<el-dropdown-item
|
v-if="data.shpType == 'temporaryLayer'"
|
@click.native="clickdTemporary(2, data)"
|
>删除</el-dropdown-item>
|
<el-dropdown-item
|
v-if="data.shpType == 'temporaryLayer'"
|
@click.native="clickdTemporary(3, data)"
|
>定位</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</span>
|
</span>
|
</template>
|
</el-tree>
|
</div>
|
</div>
|
<layer-set
|
v-if="layerSetIsshow"
|
@SETstate="SETstate"
|
:layerTree="treeData"
|
@addlayer="addlayer"
|
@delLayer="delLayer"
|
@onSubmit = "editLayer"
|
></layer-set>
|
<attribute-list
|
v-if="layerAttributeIsshow"
|
:layerData="layerObjData"
|
@spatialClose="setSpatialClose"
|
></attribute-list>
|
<layer-detail :layerData="layerObjData" v-if="layerDetailIsshow" @detailClose="detailClose"></layer-detail>
|
</template>
|
|
<script lang="ts" setup>
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
nextTick,
|
watch,
|
} from "vue";
|
import layerSet from "./layerSet";
|
import attributeList from "./attributeList";
|
import layerDetail from "./layerDetail";
|
import { useStore } from "vuex"; // 引入useStore 方法
|
import {
|
perms_selectLayers,
|
mark_selectByPageAndCount,
|
mark_insert,
|
mark_deletes,
|
mark_update,
|
} from "@/api/api";
|
import server from "@/assets/js/Map/server";
|
import { ElMessage } from "element-plus";
|
import temporaryTool from "@/assets/js/Map/temporaryTools";
|
import json from "@/assets/js/colorValue";
|
import menuTool from "@/assets/js/Map/menuTool";
|
const store = useStore(); // 该方法用于返回store 实例
|
const stretchValue = ref("");
|
const emits = defineEmits(["setCloseLayer"]);
|
let estreeRef = ref();
|
const setLayer = ref();
|
const transparence = ref(0);
|
var treeData = ref([]);
|
var layerListData = ref([]);
|
let menuOption = reactive([]);
|
const defaultExpanded = ref([]);
|
const layerSetIsshow = ref(false);
|
const layerAttributeIsshow = ref(false);
|
const layerDetailIsshow = ref(false);
|
const props = {
|
label: "cnName",
|
children: "children",
|
};
|
const layerObjData = ref(null);
|
// 当前选中的节点 id
|
const selectedNodeId = ref(null as any); //做类型断言处理
|
|
//默认选中id
|
const DefaultId = ref([]);
|
//图层设置弹框
|
const layerSetBox = () => {
|
layerSetIsshow.value = !layerSetIsshow.value;
|
};
|
//关闭状态
|
const SETstate = (res) => {
|
layerSetIsshow.value = res;
|
};
|
const setCloseLayer = () => {
|
store.state.setLayerManager = false;
|
emits("setCloseLayer", false);
|
};
|
const temporary = ref(new Date().getTime());
|
const clickdTemporary = async (res, data) => {
|
if (res == 1) {
|
let son = estreeRef.value.getCheckedKeys();
|
if (son.indexOf(data.id) < 0) {
|
return ElMessage(data.cnName + "图层没有勾选,无法进行编辑");
|
}
|
if (store.state.editTemporaryId) {
|
var id = store.state.editTemporaryId;
|
var edit_id = sgworld.Creator.SimpleGraphic.SimpleGraphicObj.indexOf(id);
|
if (edit_id > -1) {
|
sgworld.Creator.SimpleGraphic.SimpleGraphicObj.splice(edit_id, 1);
|
store.state.editTemporaryId = null;
|
}
|
}
|
store.state.editTemporaryId = data.id;
|
sgworld.Creator.SimpleGraphic.SimpleGraphicObj.push(data.id);
|
sgworld.Creator.SimpleGraphic.edit(true, {
|
editProp: false,
|
tipText: {
|
ActiveText: "点击激活编辑",
|
},
|
enableDelete: false,
|
});
|
} else if (res == 2) {
|
var layerId = [];
|
layerId.push(data.sid);
|
const data1 = await mark_deletes({ ids: layerId.toString() });
|
if (data1.code != 200) return;
|
temporaryTool.removeTemporaryLayer(data);
|
|
// estreeRef.value.setCheckedKeys(checkedKeys, true);
|
// for (var i in keys) {
|
// checkedKeys.push(keys[i]);
|
// }
|
var keys = estreeRef.value.getCheckedKeys();
|
var val = treeData.value[0].children;
|
for (var i = 0; i < val.length; i++) {
|
if (val[i].id == data.id) {
|
val.splice(i, 1);
|
}
|
}
|
|
var std = [];
|
for (var i in keys) {
|
var layer_res = estreeRef.value.getNode(checkedKeys[i]).data;
|
if(layer_res.shpType && layer_res.shpType == 'temporaryLayer'){
|
std.push(checkedKeys[i]);
|
}else if(layer_res.isLayer == 1){
|
std.push(checkedKeys[i]);
|
}
|
}
|
estreeRef.value.setCheckedKeys([], true);
|
console.log(data.id);
|
nextTick(() => {
|
console.log(std);
|
estreeRef.value.setCheckedKeys(std, true);
|
});
|
} else if (res == 3) {
|
let son = estreeRef.value.getCheckedKeys();
|
if (son.indexOf(data.id) < 0) {
|
return ElMessage(data.cnName + "图层没有勾选,无法进行定位");
|
}
|
temporaryTool.locationTemporaryLayer(data);
|
}
|
};
|
//选择图层
|
const handleCheckChange = (data, checked) => {
|
layerAttributeIsshow.value = false;
|
layerDetailIsshow.value = false;
|
// let isCheck = checked.checkedKeys.indexOf(data.id) > -1;
|
|
let son = estreeRef.value.getCheckedNodes();
|
store.commit("SET_CHECKLAYER", son);
|
temporaryTool.removeTemporaryLayerAll();
|
server.delLayerAll();
|
var alphaGroup = [];
|
var idGroup = [];
|
for (var i in server.layerList) {
|
const layerData = server.layerList[i];
|
if (layerData.layerData && layerData.id != server.wmsLayerId) {
|
alphaGroup.push(layerData.layerData.alpha);
|
idGroup.push(layerData.layerData.id);
|
}
|
}
|
server.delLayerAll();
|
|
var setGeoWms = [];
|
var geoUrl = null;
|
var layerTreeDate = estreeRef.value.getCheckedNodes().reverse();
|
for (var i in layerTreeDate) {
|
var layerArr = layerTreeDate[i];
|
if (layerArr.shpType && layerArr.shpType == "temporaryLayer") {
|
temporaryTool.addTemporaryTool(layerArr);
|
} else {
|
if (layerArr.isLayer == 1) {
|
if (layerArr.category == 2 && layerArr.type == 3) {
|
if (layerArr.tab != "moon:geo_mappable_unit") {
|
var id = layerArr.id;
|
if (idGroup.indexOf(id) > -1) {
|
var alpha = alphaGroup[idGroup.indexOf(id)];
|
if (alpha == 1) {
|
setGeoWms.push(layerArr.tab);
|
geoUrl = layerArr.url;
|
} else {
|
server.setAddGeoWmsLayer(layerArr, alpha);
|
}
|
} else {
|
setGeoWms.push(layerArr.tab);
|
geoUrl = layerArr.url;
|
}
|
}
|
} else {
|
server.addTreeData(layerArr);
|
}
|
}
|
}
|
}
|
if (setGeoWms.length > 0) {
|
server.addGeoServerMmsLayers(setGeoWms, geoUrl);
|
}
|
|
menuTool.setImageLayerChange();
|
};
|
const setVisiable = (treeNode, checked) => {
|
if (checked !== undefined) {
|
treeNode.checked = checked;
|
} else {
|
treeNode.checked = !treeNode.checked;
|
}
|
|
if (treeNode.children) {
|
treeNode.children.forEach((item) => {
|
setVisiable(item, treeNode.checked);
|
});
|
return;
|
}
|
|
if (!treeNode.isAdd) {
|
// server.addTreeData(treeNode);
|
return;
|
}
|
};
|
const defaultLayer = (val) => {
|
val.forEach((e) => {
|
DefaultId.value.forEach((v) => {
|
if (e.id == v) {
|
setVisiable(e, true);
|
// return;
|
}
|
});
|
});
|
};
|
const clickdropdown = (res, e) => {
|
layerAttributeIsshow.value = false;
|
layerDetailIsshow.value = false;
|
nextTick(() => {
|
layerObjData.value = e;
|
store.state.spatialTitle = e.cnName;
|
if (res == 2) {
|
layerAttributeIsshow.value = true;
|
store.state.tab = e;
|
} else if (res == 3) {
|
let son = estreeRef.value.getCheckedKeys();
|
var layerId = getCheckedLayerPID(e, son);
|
if (layerId.length <= 0) {
|
return ElMessage.error("请先勾选图层");
|
}
|
layerDetailIsshow.value = true;
|
store.state.layerGroups = {
|
id: e.id,
|
layerIds: layerId,
|
};
|
} else {
|
var val = estreeRef.value!.getCheckedKeys(false);
|
if (val.indexOf(e.id) > -1) {
|
layerDetailIsshow.value = true;
|
} else {
|
return ElMessage.error("请先勾选图层");
|
}
|
}
|
});
|
};
|
const getCheckedLayerPID = (res, result) => {
|
var temp = [];
|
var ids = result;
|
|
let forFn = (data) => {
|
if (data.children) {
|
data.children.forEach((item) => {
|
if (item.children) {
|
forFn(item);
|
} else {
|
if (ids.indexOf(item.id) > -1) {
|
temp.push(item);
|
}
|
}
|
});
|
} else {
|
if (ids.indexOf(data.id) > -1) {
|
temp.push(data);
|
}
|
}
|
};
|
|
forFn(res);
|
return temp;
|
};
|
|
const getCheckedLayerChildren = (res) => {
|
var temp2 = [];
|
let forFn = (data) => {
|
if (data.children) {
|
data.children.forEach((item) => {
|
if (item.children) {
|
forFn(item);
|
} else {
|
temp2.push(item);
|
}
|
});
|
} else {
|
temp2.push(data);
|
}
|
};
|
forFn(res);
|
return temp2;
|
};
|
|
const setSpatialClose = (res) => {
|
layerAttributeIsshow.value = res;
|
};
|
const detailClose = (res) => {
|
if (res.type == 0) {
|
estreeRef.value.getNode(store.state.layerGroups.id).data.alpha = res.val;
|
}
|
layerDetailIsshow.value = res.flag;
|
};
|
//编辑图层树
|
const addlayer = (res) => {
|
let node;
|
layerListData.value.forEach((e) => {
|
if (e.id == res.id) {
|
node = estreeRef.value.getNode(e);
|
}
|
});
|
|
var checKey = estreeRef.value.getCheckedKeys();
|
let checkid=[];
|
for(var i in checKey){
|
if( estreeRef.value.getNode(checKey[i]).data.isLayer ==1){
|
checkid.push(checKey[i])
|
}
|
}
|
// 将变动之前的node备份
|
estreeRef.value.setCheckedKeys([], true);
|
let copyNode = { ...node };
|
copyNode.previousSibling = { ...node.previousSibling };
|
copyNode.nextSibling = { ...node.nextSibling };
|
if (res.type === 1) {
|
// 上移
|
if (node.previousSibling) {
|
// 删除原先的node
|
estreeRef.value.remove(node.data);
|
// 拿到copy的node
|
// nodeData = CircularJSON.parse(window.sessionStorage.getItem("menuNode"));
|
// 复制该node到指定位置(参数：1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node)
|
|
estreeRef.value.insertBefore(
|
copyNode.data,
|
copyNode.previousSibling.data
|
);
|
// window.sessionStorage.removeItem("menuNode");
|
}
|
} else {
|
// 下移
|
if (node.nextSibling) {
|
estreeRef.value.remove(node.data);
|
estreeRef.value.insertAfter(copyNode.data, copyNode.nextSibling.data);
|
}
|
}
|
estreeRef.value.setCheckedKeys(checkid, true);
|
};
|
//删除图层树
|
const delLayer = (res) => {
|
// menuOption = menuOption.filter((item) => {
|
// return item.id != res;
|
// });
|
// treeData = handleTree(menuOption, "id", "pid", "children");
|
};
|
const editLayer=()=>{
|
var layer =store.state.chekNowLayers;
|
var std =[];
|
for(var i in layer){
|
if(layer[i].isLayer ==1){
|
std.push(layer[i].id)
|
}
|
}
|
estreeRef.value.setCheckedKeys([], true);
|
nextTick(()=>{
|
estreeRef.value.setCheckedKeys(std, true);
|
})
|
|
}
|
const setRestLayerData = () => {
|
let son = estreeRef.value.getCheckedNodes().reverse();
|
|
var setGeoWms = [];
|
var geoUrl = null;
|
for (var i in son) {
|
var layerArr = son[i];
|
console.log(layerArr.isLayer);
|
layerArr.checked = true;
|
if (layerArr.category == 2 && layerArr.type == 3) {
|
if (layerArr.tab != "moon:geo_mappable_unit") {
|
setGeoWms.push(layerArr.tab);
|
geoUrl = layerArr.url;
|
// server.addTreeData(layerArr);
|
}
|
} else {
|
server.addTreeData(layerArr);
|
}
|
}
|
if (setGeoWms.length > 0) {
|
server.addGeoServerMmsLayers(setGeoWms, geoUrl);
|
}
|
store.commit("SET_CHECKLAYER", son);
|
};
|
const getLayer = async () => {
|
store.state.restLayer = false;
|
// server.delLayerAll();
|
const dt = await perms_selectLayers();
|
if (dt.code == 200) {
|
var va_data = dt.result.filter((res) => {
|
if (res.isLayer == 0) {
|
res.alpha = 1;
|
}
|
return res;
|
});
|
treeData.value = setTreeData(va_data).sort(function (a, b) {
|
return a.orderNum - b.orderNum;
|
});
|
const comperLayer = await mark_selectByPageAndCount({
|
pageIndex: 1,
|
pageSize: 100000,
|
name: null,
|
});
|
var children = [];
|
if (comperLayer.code == 200 && comperLayer.result) {
|
for (var i in comperLayer.result) {
|
var slayer = JSON.parse(comperLayer.result[i].wkt);
|
slayer.sid = comperLayer.result[i].id;
|
children.push(slayer);
|
}
|
}
|
treeData.value.unshift({
|
cnName: "临时图层",
|
level: 1,
|
pid: 0,
|
isLayer: 0,
|
type: 6,
|
id: temporary.value,
|
isTemporaryLayer: true,
|
children: children,
|
});
|
|
var std = [];
|
var terrainId = null;
|
var adLayer = [];
|
dt.result.filter((res) => {
|
if (res.isLayer == 1 && res.isShow == 1) {
|
if (res.type == 1 && res.data == 2) {
|
if (!terrainId) {
|
terrainId = res.id;
|
std.push(res.id);
|
adLayer.push(res);
|
}
|
} else {
|
std.push(res.id);
|
adLayer.push(res);
|
}
|
}
|
});
|
DefaultId.value = std;
|
|
//添加默认选中图层
|
layerListData.value = dt.result;
|
defaultLayer(dt.result);
|
|
nextTick(() => {
|
let son = estreeRef.value.getCheckedNodes();
|
setRestLayerData();
|
store.commit("SET_CHECKLAYER", son);
|
});
|
}
|
};
|
|
//构造树
|
function setTreeData(source) {
|
let cloneData = JSON.parse(JSON.stringify(source)); // 对源数据深度克隆
|
return cloneData.filter((father) => {
|
// 循环所有项
|
let branchArr = cloneData.filter((child) => father.id == child.pid);
|
if (branchArr.length > 0) {
|
branchArr.sort(function (a, b) {
|
return a.orderNum - b.orderNum;
|
});
|
}
|
|
branchArr.length > 0 ? (father.children = branchArr) : ""; // 给父级添加一个children属性，并赋值
|
// 属于同一对象问题，例如：令 a=b、c=1 ，然后再令 b.c=c ， 那么 a.c=b.c=c=1 ；同理，后续令 c.d=2 ,那么 a.c.d 也是=2；
|
// 由此循环多次后，就能形成相应的树形数据结构
|
return father.pid == 0; // 返回一级菜单
|
});
|
}
|
const addTemporaryLayer = async (res) => {
|
var obj = {
|
id: res.id,
|
name: res.cnName,
|
wkt: JSON.stringify(res),
|
};
|
var checkedKeys = estreeRef.value.getCheckedKeys();
|
const data = await mark_insert(obj);
|
if (data.code != 200 || !data.result) return;
|
store.state.temporaryLayer = null;
|
res.sid = data.result;
|
treeData.value[0].children.push(res);
|
|
|
nextTick(() => {
|
var std = [res.id];
|
for (var i in checkedKeys) {
|
var layer_res = estreeRef.value.getNode(checkedKeys[i]).data;
|
if(layer_res.shpType && layer_res.shpType == 'temporaryLayer'){
|
std.push(checkedKeys[i]);
|
}else if(layer_res.isLayer == 1){
|
std.push(checkedKeys[i]);
|
}
|
}
|
estreeRef.value.setCheckedKeys([], true);
|
estreeRef.value.setCheckedKeys(std, true);
|
temporaryTool.addTemporaryTool(res);
|
});
|
};
|
const editTemporaryLayerName = (res) => {
|
if (!store.state.editTemporaryId) return;
|
var id = store.state.editTemporaryId;
|
var val = treeData.value[0].children;
|
|
for (var i = 0; i < val.length; i++) {
|
if (val[i].id == id) {
|
val[i].cnName = res;
|
setEditLayerChange(val[i]);
|
}
|
}
|
defaultExpanded.value = [treeData.value[0].id];
|
};
|
const editTemporaryBackById = (res) => {
|
var obj = temporaryTool.getEntityObj(res);
|
var val = treeData.value[0].children;
|
var checkedKeys = estreeRef.value.getCheckedKeys();
|
if (checkedKeys.indexOf(temporary.value) > -1) {
|
checkedKeys.splice(checkedKeys.indexOf(temporary.value), 1);
|
}
|
for (var i = 0; i < val.length; i++) {
|
if (val[i].id == res) {
|
obj.sid = val[i].sid;
|
val[i] = obj;
|
setEditLayerChange(obj);
|
}
|
}
|
nextTick(() => {
|
estreeRef.value.setCheckedKeys(checkedKeys, true);
|
});
|
};
|
const setEditLayerChange = async (res) => {
|
var obj = {
|
id: res.sid,
|
name: res.cnName,
|
wkt: JSON.stringify(res),
|
};
|
const data = await mark_update(obj);
|
if (data.code != 200) return;
|
};
|
watch(
|
() => store.state.restLayer,
|
(nVal, oVal) => {
|
if (nVal) {
|
|
setRestLayerData();
|
}
|
},
|
{ deep: true }
|
);
|
watch(
|
() => store.state.temporaryLayer,
|
(nVal, oVal) => {
|
if (nVal) {
|
|
addTemporaryLayer(nVal);
|
}
|
},
|
{ deep: true }
|
);
|
watch(
|
() => store.state.editTemporarName,
|
(nVal, oVal) => {
|
if (nVal) {
|
|
editTemporaryLayerName(nVal);
|
}
|
},
|
{ deep: true }
|
);
|
watch(
|
() => store.state.editTemporaryback,
|
(nVal, oVal) => {
|
if (nVal) {
|
|
editTemporaryBackById(nVal);
|
}
|
},
|
{ deep: true }
|
);
|
|
onMounted(() => {
|
window.setLayer = getLayer;
|
});
|
</script>
|
|
<style lang="less" scoped>
|
.layerBox {
|
width: 359px;
|
height: 680px;
|
background: rgba(7, 8, 14, 0.8);
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
z-index: 40;
|
|
.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);
|
}
|
|
.set {
|
cursor: pointer;
|
}
|
}
|
|
.layerContent {
|
height: 625px;
|
padding: 0 8px;
|
overflow: auto;
|
overflow-y: auto;
|
}
|
|
.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);
|
}
|
|
.el-tree {
|
width: 100%;
|
overflow-y: auto;
|
}
|
|
.layerContent .el-tree-node__content {
|
overflow: hidden;
|
}
|
|
.layerContent .custom-tree-node {
|
overflow: hidden;
|
flex-shrink: 1;
|
flex-grow: 1;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-size: 16px;
|
padding-right: 8px;
|
}
|
|
.layerContent .custom-tree-node .label {
|
flex-shrink: 1;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.layerContent .custom-tree-node .button {
|
flex-grow: 0;
|
flex-shrink: 0;
|
}
|
}
|
|
.dropdown_box {
|
position: relative;
|
}
|
|
/deep/.el-select-dropdown__item {
|
font-size: 12px !important;
|
}
|
|
.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;
|
}
|
}
|
|
/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;
|
}
|
|
// .custom-tree-node {
|
// flex: 1;
|
// display: flex;
|
// align-items: center;
|
// justify-content: space-between;
|
// font-size: 16px;
|
// padding-right: 8px;
|
// }
|
|
.el-dropdown-menu {
|
background: rgba(7, 8, 14, 0.8);
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
color: #fff;
|
border: 0;
|
|
/deep/ .el-dropdown-menu__item {
|
color: #fff;
|
}
|
}
|
|
/deep/ .el-dropdown-menu__item:not(.is-disabled):focus {
|
background-color: rgba(104, 156, 255, 0.5);
|
|
color: #fff;
|
}
|
</style>
|
<style>
|
.el-popper.is-light {
|
border: 1px solid rgba(7, 8, 14, 0.8) !important;
|
}
|
|
.el-scrollbar {
|
border: 0 !important;
|
}
|
</style>
|
