Release sy v1.0.0 dev merge See merge request project/water/shuili-vue!163sy-water-data-board-ui
潘裕艺
5 months ago
@ -0,0 +1,60 @@ |
|||
import request from '@/utils/request' |
|||
|
|||
// 获取场景列表
|
|||
export const getSceneListData = async (data) => { |
|||
return request({ |
|||
url: `/map/scene/sceneList`, |
|||
method: 'post', |
|||
data: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
data: { |
|||
id: '', |
|||
name: data.name |
|||
}, |
|||
params: { |
|||
order: 'asc', |
|||
orderBy: 'pub_date' |
|||
} |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
// 根据id获取图层树
|
|||
export const getLayerData = async (sceneId) => { |
|||
return request({ |
|||
url: `/map/scene/getLayerTree/${sceneId}`, |
|||
method: 'get' |
|||
}); |
|||
}; |
|||
|
|||
// 水库基础信息详情
|
|||
export const getReservoirBaseDetailData = (id) =>{ |
|||
return request({ |
|||
url: `/sk/base/${id}`, |
|||
method: 'get' |
|||
}) |
|||
} |
|||
// 水库特征信息详情
|
|||
export const getReservoirRsppDetailData = (id) =>{ |
|||
return request({ |
|||
url: `/sk/rspp/${id}`, |
|||
method: 'get' |
|||
}) |
|||
} |
|||
|
|||
// 水库实时监测--监测站树数据
|
|||
export const getReservoirMonitorTreeData = (id) =>{ |
|||
return request({ |
|||
url: `/sk/??`, |
|||
method: 'get' |
|||
}) |
|||
} |
|||
|
|||
// 水库实时监测--降雨量等详情
|
|||
export const getReservoirRainDetailData = (id) =>{ |
|||
return request({ |
|||
url: `/sk/??`, |
|||
method: 'get' |
|||
}) |
|||
} |
|||
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 585 B |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 286 B |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 866 B |
|
After Width: | Height: | Size: 789 B |
|
After Width: | Height: | Size: 4.0 KiB |
@ -0,0 +1,36 @@ |
|||
/** |
|||
* 计算table高度的mixin |
|||
* 默认计算tableBoxRef的高度 - topBoxRef的高度 |
|||
* 如果没有ref的节点则不计算 |
|||
* |
|||
*/ |
|||
export const calcTableHeight = { |
|||
data(){ |
|||
return { |
|||
tableHeight: null, |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.calcTableHeight(); |
|||
window.addEventListener('resize', this.calcTableHeight); |
|||
}, |
|||
beforeDestroy() { |
|||
window.removeEventListener('resize', this.calcTableHeight); |
|||
}, |
|||
methods: { |
|||
calcTableHeight(){ |
|||
const tableBoxRef = this.$refs.tableBoxRef; |
|||
const topBoxRef = this.$refs.topBoxRef; |
|||
let h = null |
|||
if(tableBoxRef){ |
|||
h = tableBoxRef.offsetHeight - 32 - 60; // 32: table的padding; 60: table的分页预留空间
|
|||
if(topBoxRef){ |
|||
console.dir(topBoxRef.offsetHeight) |
|||
h -= topBoxRef.offsetHeight; |
|||
} |
|||
this.tableHeight = h < 60 ? 60:h; |
|||
} |
|||
console.log('最后计算的tableHeight >>>> ', this.tableHeight) |
|||
} |
|||
} |
|||
} |
|||
@ -1,428 +1,465 @@ |
|||
<template> |
|||
<div class="tree-wrapper"> |
|||
<div class="tree-filter" v-if="showInput"> |
|||
<el-input placeholder="请输入搜索关键字" v-model="filterText" maxlength="30" show-word-limit clearable></el-input> |
|||
<slot name="filter-btns"></slot> |
|||
</div> |
|||
<el-tree ref="tree" class="tree-main" :class="{ 'no-checkbox': noCheckbox }" :node-key="nodeKey" :data="data" |
|||
:props="defaultProps" :filter-node-method="filterNode" :default-expand-all="defaultExpandAll" |
|||
:emptyText="emptyText" :renderAfterExpand="renderAfterExpand" :checkStrictly="checkStrictly" |
|||
:expandOnClickNode="expandOnClickNode" :checkOnClickNode="checkOnClickNode" |
|||
:checkDescendants="checkDescendants" :autoExpandParent="autoExpandParent" |
|||
:defaultCheckedKeys="defaultCheckedKeys" :defaultExpandedKeys="defaultExpandedKeys" |
|||
:showCheckbox="showCheckbox" :lazy="lazy" :load="load" :draggable="draggable" :allowDrag="allowDrag" |
|||
:allowDrop="allowDrop" :highlightCurrent="highlightCurrent" :accordion="accordion" :indent="indent" |
|||
:iconClass="iconClass" :renderContent="renderContent" @node-click="handleNodeClick" |
|||
@node-expand="handleExpand" @node-collapse="handleCollapse"> |
|||
<template slot-scope="{ node, data }"> |
|||
<div class="custom-tree-node" :class="node.checked || node.indeterminate ? '' : 'opacity'"> |
|||
<div class="left"> |
|||
<!-- <iconpark-icon v-if="data && data[defaultProps.children]" class="icon" name="organization" |
|||
<div class="tree-wrapper"> |
|||
<div class="tree-filter" v-if="showInput"> |
|||
<el-input |
|||
placeholder="请输入搜索关键字" |
|||
v-model="filterText" |
|||
maxlength="30" |
|||
show-word-limit |
|||
clearable |
|||
></el-input> |
|||
<slot name="filter-btns"></slot> |
|||
</div> |
|||
<el-tree |
|||
ref="tree" |
|||
class="tree-main" |
|||
:class="{ 'no-checkbox': noCheckbox }" |
|||
:node-key="nodeKey" |
|||
:data="data" |
|||
:props="defaultProps" |
|||
:filter-node-method="filterNode" |
|||
:default-expand-all="defaultExpandAll" |
|||
:emptyText="emptyText" |
|||
:renderAfterExpand="renderAfterExpand" |
|||
:checkStrictly="checkStrictly" |
|||
:expandOnClickNode="expandOnClickNode" |
|||
:checkOnClickNode="checkOnClickNode" |
|||
:checkDescendants="checkDescendants" |
|||
:autoExpandParent="autoExpandParent" |
|||
:defaultCheckedKeys="defaultCheckedKeys" |
|||
:defaultExpandedKeys="defaultExpandedKeys" |
|||
:showCheckbox="showCheckbox" |
|||
:lazy="lazy" |
|||
:load="load" |
|||
:draggable="draggable" |
|||
:allowDrag="allowDrag" |
|||
:allowDrop="allowDrop" |
|||
:highlightCurrent="highlightCurrent" |
|||
:accordion="accordion" |
|||
:indent="indent" |
|||
:iconClass="iconClass" |
|||
:renderContent="renderContent" |
|||
@node-click="handleNodeClick" |
|||
@node-expand="handleExpand" |
|||
@node-collapse="handleCollapse" |
|||
> |
|||
<template slot-scope="{ node, data }"> |
|||
<div |
|||
class="custom-tree-node" |
|||
:class="node.checked || node.indeterminate ? '' : 'opacity'" |
|||
> |
|||
<div class="left"> |
|||
<!-- <iconpark-icon v-if="data && data[defaultProps.children]" class="icon" name="organization" |
|||
size="16"></iconpark-icon> --> |
|||
<slot v-bind="{ node, data }"></slot> |
|||
</div> |
|||
<div class="right"> |
|||
<slot name="right" v-bind="{ node, data }"></slot> |
|||
<span class="more" @mouseleave="moreMenuLeave"> |
|||
<slot name="more" v-bind="{ node, data, onMoreHandle }"></slot> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</el-tree> |
|||
<div class="more-menu-box" ref="moreMenuBox" v-show="isMoreMenuShow" @mouseleave="hideMoreMenu"> |
|||
<slot name="more-menu" v-bind="{ moreMenuData, hideMoreMenu }"></slot> |
|||
<slot v-bind="{ node, data }"></slot> |
|||
</div> |
|||
<div class="right"> |
|||
<slot name="right" v-bind="{ node, data }"></slot> |
|||
<span class="more" @mouseleave="moreMenuLeave"> |
|||
<slot name="more" v-bind="{ node, data, onMoreHandle }"></slot> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</el-tree> |
|||
<div |
|||
class="more-menu-box" |
|||
ref="moreMenuBox" |
|||
v-show="isMoreMenuShow" |
|||
@mouseleave="hideMoreMenu" |
|||
> |
|||
<slot name="more-menu" v-bind="{ moreMenuData, hideMoreMenu }"></slot> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
let timer; |
|||
export default { |
|||
name: "tree", |
|||
props: { |
|||
data: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
emptyText: { |
|||
type: String, |
|||
default () { |
|||
return "暂无数据"; |
|||
}, |
|||
}, |
|||
renderAfterExpand: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
nodeKey: { |
|||
type: String, |
|||
default: "key", |
|||
}, |
|||
checkStrictly: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
defaultExpandAll: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
expandOnClickNode: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
checkOnClickNode: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
checkDescendants: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
autoExpandParent: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
defaultCheckedKeys: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
defaultExpandedKeys: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
currentNodeKey: [String, Number], |
|||
renderContent: Function, |
|||
showCheckbox: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
draggable: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
allowDrag: Function, |
|||
allowDrop: Function, |
|||
defaultProps: { |
|||
default () { |
|||
return { |
|||
children: "children", |
|||
label: "label", |
|||
isLeaf: "isLeaf", |
|||
}; |
|||
}, |
|||
}, |
|||
lazy: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
highlightCurrent: Boolean, |
|||
load: Function, |
|||
filterNodeMethod: Function, |
|||
accordion: Boolean, |
|||
indent: { |
|||
type: Number, |
|||
default: 18, |
|||
}, |
|||
iconClass: String, |
|||
noCheckbox: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
showInput: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
name: "tree", |
|||
props: { |
|||
data: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
emptyText: { |
|||
type: String, |
|||
default() { |
|||
return "暂无数据"; |
|||
}, |
|||
}, |
|||
renderAfterExpand: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
nodeKey: { |
|||
type: String, |
|||
default: "key", |
|||
}, |
|||
checkStrictly: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
defaultExpandAll: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
expandOnClickNode: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
checkOnClickNode: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
data () { |
|||
checkDescendants: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
autoExpandParent: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
defaultCheckedKeys: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
defaultExpandedKeys: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
currentNodeKey: [String, Number], |
|||
renderContent: Function, |
|||
showCheckbox: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
draggable: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
allowDrag: Function, |
|||
allowDrop: Function, |
|||
defaultProps: { |
|||
default() { |
|||
return { |
|||
filterText: "", |
|||
isMoreMenuShow: false, |
|||
moreMenuData: null, |
|||
moreMenuTriggered: false, |
|||
children: "children", |
|||
label: "label", |
|||
isLeaf: "isLeaf", |
|||
}; |
|||
}, |
|||
}, |
|||
lazy: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
highlightCurrent: Boolean, |
|||
load: Function, |
|||
filterNodeMethod: Function, |
|||
accordion: Boolean, |
|||
indent: { |
|||
type: Number, |
|||
default: 18, |
|||
}, |
|||
iconClass: String, |
|||
noCheckbox: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
showInput: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
watch: { |
|||
filterText (val) { |
|||
this.$refs.tree.filter(val); |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
filterText: "", |
|||
isMoreMenuShow: false, |
|||
moreMenuData: null, |
|||
moreMenuTriggered: false, |
|||
}; |
|||
}, |
|||
watch: { |
|||
filterText(val) { |
|||
this.$refs.tree.filter(val); |
|||
}, |
|||
}, |
|||
|
|||
mounted () { }, |
|||
methods: { |
|||
handleNodeClick (data, node, self) { |
|||
this.$emit("node-click", data, node, self); |
|||
}, |
|||
handleExpand (data) { |
|||
this.$emit("node-expand", data); |
|||
}, |
|||
handleCollapse (data) { |
|||
this.$emit("node-collapse", data); |
|||
}, |
|||
filterNode (value, data) { |
|||
if (!value || !data || !data[this.defaultProps.label]) return true; |
|||
if (this.filterNodeMethod) { |
|||
return this.filterNodeMethod.call(null, value, data); |
|||
} |
|||
return data[this.defaultProps.label].indexOf(value) !== -1; |
|||
}, |
|||
onMoreHandle (event, data) { |
|||
this.$set(this, "moreMenuData", data); |
|||
this.isMoreMenuShow = true; |
|||
this.moreMenuTriggered = true; |
|||
this.$nextTick(() => { |
|||
this.$refs.moreMenuBox.style.top = event.clientY + 20 + "px"; |
|||
this.$refs.moreMenuBox.style.left = |
|||
event.clientX - this.$refs.moreMenuBox.offsetWidth + 15 + "px"; |
|||
}); |
|||
}, |
|||
hideMoreMenu () { |
|||
clearTimeout(timer); |
|||
timer = setTimeout(() => { |
|||
this.isMoreMenuShow = false; |
|||
}, 600); |
|||
}, |
|||
moreMenuLeave () { |
|||
if (this.moreMenuTriggered) { |
|||
clearTimeout(timer); |
|||
timer = setTimeout(() => { |
|||
this.isMoreMenuShow = false; |
|||
this.moreMenuTriggered = false; |
|||
}, 300); |
|||
} |
|||
}, |
|||
toggleShow (node, data, keyName) { |
|||
const isShow = !data[keyName]; |
|||
node.data[keyName] = isShow; |
|||
if (node.data.children) { |
|||
const traverse = function (arr) { |
|||
for (let i = 0; i < arr.length; i++) { |
|||
arr[i][keyName] = isShow; |
|||
if (arr[i].children) { |
|||
traverse(arr[i].children); |
|||
} |
|||
} |
|||
}; |
|||
traverse(node.data.children); |
|||
} |
|||
let tempNode = node.parent; |
|||
let tempTreeData = []; |
|||
while (tempNode) { |
|||
tempTreeData = tempNode.data; |
|||
if ( |
|||
tempTreeData.children && |
|||
tempTreeData.children.every((f) => f[keyName] === isShow) |
|||
) { |
|||
tempTreeData[keyName] = isShow; |
|||
} |
|||
tempNode = tempNode.parent; |
|||
mounted() {}, |
|||
methods: { |
|||
handleNodeClick(data, node, self) { |
|||
this.$emit("node-click", data, node, self); |
|||
}, |
|||
handleExpand(data) { |
|||
this.$emit("node-expand", data); |
|||
}, |
|||
handleCollapse(data) { |
|||
this.$emit("node-collapse", data); |
|||
}, |
|||
filterNode(value, data) { |
|||
if (!value || !data || !data[this.defaultProps.label]) return true; |
|||
if (this.filterNodeMethod) { |
|||
return this.filterNodeMethod.call(null, value, data); |
|||
} |
|||
return data[this.defaultProps.label].indexOf(value) !== -1; |
|||
}, |
|||
onMoreHandle(event, data) { |
|||
this.$set(this, "moreMenuData", data); |
|||
this.isMoreMenuShow = true; |
|||
this.moreMenuTriggered = true; |
|||
this.$nextTick(() => { |
|||
this.$refs.moreMenuBox.style.top = event.clientY + 20 + "px"; |
|||
this.$refs.moreMenuBox.style.left = |
|||
event.clientX - this.$refs.moreMenuBox.offsetWidth + 15 + "px"; |
|||
}); |
|||
}, |
|||
hideMoreMenu() { |
|||
clearTimeout(timer); |
|||
timer = setTimeout(() => { |
|||
this.isMoreMenuShow = false; |
|||
}, 600); |
|||
}, |
|||
moreMenuLeave() { |
|||
if (this.moreMenuTriggered) { |
|||
clearTimeout(timer); |
|||
timer = setTimeout(() => { |
|||
this.isMoreMenuShow = false; |
|||
this.moreMenuTriggered = false; |
|||
}, 300); |
|||
} |
|||
}, |
|||
toggleShow(node, data, keyName) { |
|||
const isShow = !data[keyName]; |
|||
node.data[keyName] = isShow; |
|||
if (node.data.children) { |
|||
const traverse = function (arr) { |
|||
for (let i = 0; i < arr.length; i++) { |
|||
arr[i][keyName] = isShow; |
|||
if (arr[i].children) { |
|||
traverse(arr[i].children); |
|||
} |
|||
tempTreeData = JSON.parse(JSON.stringify(tempTreeData)); |
|||
return tempTreeData; |
|||
}, |
|||
getCheckedKeys (leafOnly) { |
|||
return this.$refs?.tree?.getCheckedKeys(leafOnly); |
|||
}, |
|||
setCheckedKeys (keys, leafOnly) { |
|||
this.$refs?.tree?.setCheckedKeys(keys, leafOnly); |
|||
}, |
|||
getCheckedNode (leafOnly) { |
|||
return this.$refs?.tree?.getCheckedNodes(leafOnly); |
|||
}, |
|||
getNode (data) { |
|||
return this.$refs?.tree?.getNode(data); |
|||
}, |
|||
setChecked (key, checked, deep) { |
|||
this.$refs?.tree?.setChecked(key, checked, deep); |
|||
}, |
|||
updateKeyChildren (key, data) { |
|||
this.$refs?.tree?.updateKeyChildren(key, data); |
|||
}, |
|||
}, |
|||
beforeDestroy () { }, |
|||
} |
|||
}; |
|||
traverse(node.data.children); |
|||
} |
|||
let tempNode = node.parent; |
|||
let tempTreeData = []; |
|||
while (tempNode) { |
|||
tempTreeData = tempNode.data; |
|||
if ( |
|||
tempTreeData.children && |
|||
tempTreeData.children.every((f) => f[keyName] === isShow) |
|||
) { |
|||
tempTreeData[keyName] = isShow; |
|||
} |
|||
tempNode = tempNode.parent; |
|||
} |
|||
tempTreeData = JSON.parse(JSON.stringify(tempTreeData)); |
|||
return tempTreeData; |
|||
}, |
|||
getCheckedKeys(leafOnly) { |
|||
return this.$refs?.tree?.getCheckedKeys(leafOnly); |
|||
}, |
|||
setCheckedKeys(keys, leafOnly) { |
|||
this.$refs?.tree?.setCheckedKeys(keys, leafOnly); |
|||
}, |
|||
getCheckedNode(leafOnly) { |
|||
return this.$refs?.tree?.getCheckedNodes(leafOnly); |
|||
}, |
|||
getNode(data) { |
|||
return this.$refs?.tree?.getNode(data); |
|||
}, |
|||
setChecked(key, checked, deep) { |
|||
this.$refs?.tree?.setChecked(key, checked, deep); |
|||
}, |
|||
updateKeyChildren(key, data) { |
|||
this.$refs?.tree?.updateKeyChildren(key, data); |
|||
}, |
|||
}, |
|||
beforeDestroy() {}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.tree-wrapper { |
|||
padding: 12px 0; |
|||
min-height: 350px; |
|||
padding: 12px 0; |
|||
min-height: 350px; |
|||
|
|||
::v-deep.tree-filter { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0 16px; |
|||
margin-bottom: 8px; |
|||
::v-deep .tree-filter { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 0 16px; |
|||
margin-bottom: 8px; |
|||
|
|||
.el-input__inner, |
|||
.el-textarea__inner { |
|||
// color: #fff; |
|||
.el-input__inner, |
|||
.el-textarea__inner { |
|||
// color: #fff; |
|||
|
|||
&::placeholder { |
|||
color: rgba(255, 255, 255, 0.35); |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
&::placeholder { |
|||
color: rgba(255, 255, 255, 0.35); |
|||
font-size: 12px; |
|||
} |
|||
} |
|||
|
|||
.el-input__count .el-input__count-inner { |
|||
background: transparent; |
|||
} |
|||
.el-input__count .el-input__count-inner { |
|||
background: transparent; |
|||
} |
|||
|
|||
.el-input__inner { |
|||
//background-color: transparent; |
|||
border-color: transparent; |
|||
} |
|||
.el-input__inner { |
|||
//background-color: transparent; |
|||
border-color: transparent; |
|||
} |
|||
|
|||
.is-disabled { |
|||
background-color: transparent; |
|||
} |
|||
.is-disabled { |
|||
background-color: transparent; |
|||
} |
|||
} |
|||
|
|||
::v-deep .el-input { |
|||
.el-input__inner { |
|||
height: 32px; |
|||
line-height: 32px; |
|||
background-color: #444550; |
|||
color: rgb(38, 38, 38); |
|||
border: none; |
|||
padding-left: 8px; |
|||
} |
|||
::v-deep .el-input { |
|||
.el-input__inner { |
|||
height: 32px; |
|||
line-height: 32px; |
|||
background-color: #444550; |
|||
color: rgb(38, 38, 38); |
|||
border: none; |
|||
padding-left: 8px; |
|||
} |
|||
|
|||
.el-input__count-inner { |
|||
background: #444550; |
|||
color: rgba(255, 255, 255, 0.35); |
|||
} |
|||
.el-input__count-inner { |
|||
background: #444550; |
|||
color: rgba(255, 255, 255, 0.35); |
|||
} |
|||
|
|||
.el-input__icon { |
|||
line-height: 28px; |
|||
} |
|||
.el-input__icon { |
|||
line-height: 28px; |
|||
} |
|||
} |
|||
|
|||
::v-deep.tree-main { |
|||
background: none; |
|||
padding: 0 16px; |
|||
::v-deep .tree-main { |
|||
background: none; |
|||
padding: 0 16px; |
|||
|
|||
.el-tree-node__content { |
|||
height: 34px; |
|||
line-height: 34px; |
|||
margin-bottom: 4px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
} |
|||
.el-tree-node__content { |
|||
height: 34px; |
|||
line-height: 34px; |
|||
margin-bottom: 4px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.el-tree-node:focus>.el-tree-node__content, |
|||
.el-tree-node__content:hover { |
|||
background: #ebf7f5; |
|||
color: rgb(54, 178, 158) !important; |
|||
// border-right: 3px solid #36b29e; |
|||
} |
|||
.el-tree-node:focus > .el-tree-node__content, |
|||
.el-tree-node__content:hover { |
|||
background: #ebf7f5; |
|||
color: rgb(54, 178, 158) !important; |
|||
// border-right: 3px solid #36b29e; |
|||
} |
|||
|
|||
//.el-tree-node__expand-icon { |
|||
// color: rgba(255, 255, 255, 0.55); |
|||
// } |
|||
//.el-tree-node__expand-icon { |
|||
// color: rgba(255, 255, 255, 0.55); |
|||
// } |
|||
|
|||
.el-tree-node__expand-icon.is-leaf { |
|||
color: transparent; |
|||
cursor: default; |
|||
} |
|||
.el-tree-node__expand-icon.is-leaf { |
|||
color: transparent; |
|||
cursor: default; |
|||
} |
|||
|
|||
.custom-tree-node { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
// color: rgb(38, 38, 38); |
|||
// width: 100%; |
|||
// padding-right: 8px; |
|||
font-family: "思源黑体"; |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
letter-spacing: 0em; |
|||
flex: 1; |
|||
.custom-tree-node { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
// color: rgb(38, 38, 38); |
|||
// width: 100%; |
|||
// padding-right: 8px; |
|||
font-family: "思源黑体"; |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
letter-spacing: 0em; |
|||
flex: 1; |
|||
|
|||
.left, |
|||
.right { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.left, |
|||
.right { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.icon { |
|||
margin-right: 8px; |
|||
} |
|||
.icon { |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.name { |
|||
// flex: 1; |
|||
max-width: 120px; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
.name { |
|||
// flex: 1; |
|||
max-width: 120px; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.btn-item { |
|||
margin-right: 9px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
.btn-item { |
|||
margin-right: 9px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
&:hover { |
|||
background: rgba(255, 255, 255, 0.16); |
|||
} |
|||
} |
|||
&:hover { |
|||
background: rgba(255, 255, 255, 0.16); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.custom-tree-node.opacity { |
|||
// opacity: 0.5; |
|||
} |
|||
.custom-tree-node.opacity { |
|||
// opacity: 0.5; |
|||
} |
|||
|
|||
&.no-checkbox { |
|||
.el-tree-node__content { |
|||
.el-checkbox { |
|||
display: none; |
|||
} |
|||
} |
|||
&.no-checkbox { |
|||
.el-tree-node__content { |
|||
.el-checkbox { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.more-menu-box { |
|||
position: fixed; |
|||
background-color: #4d4f5b; |
|||
border-radius: 4px; |
|||
z-index: 1000; |
|||
padding: 8px; |
|||
border: 0.5px solid rgba(255, 255, 255, 0.16); |
|||
box-shadow: 0px 3px 14px 2px rgba(0, 0, 0, 0.05), |
|||
0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 5px 5px -3px rgba(0, 0, 0, 0.1); |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 4px; |
|||
flex-grow: 1; |
|||
.more-menu-box { |
|||
position: fixed; |
|||
background-color: #4d4f5b; |
|||
border-radius: 4px; |
|||
z-index: 1000; |
|||
padding: 8px; |
|||
border: 0.5px solid rgba(255, 255, 255, 0.16); |
|||
box-shadow: 0px 3px 14px 2px rgba(0, 0, 0, 0.05), |
|||
0px 8px 10px 1px rgba(0, 0, 0, 0.06), 0px 5px 5px -3px rgba(0, 0, 0, 0.1); |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 4px; |
|||
flex-grow: 1; |
|||
|
|||
.menu-item { |
|||
min-width: 104px; |
|||
height: 28px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
padding: 3px 8px; |
|||
gap: 8px; |
|||
align-self: stretch; |
|||
border-radius: 4px; |
|||
font-family: "思源黑体"; |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
line-height: 22px; |
|||
letter-spacing: 0em; |
|||
color: rgb(38, 38, 38); |
|||
cursor: pointer; |
|||
.menu-item { |
|||
min-width: 104px; |
|||
height: 28px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
padding: 3px 8px; |
|||
gap: 8px; |
|||
align-self: stretch; |
|||
border-radius: 4px; |
|||
font-family: "思源黑体"; |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
line-height: 22px; |
|||
letter-spacing: 0em; |
|||
color: rgb(38, 38, 38); |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
background: rgba(0, 0, 0, 0.1216); |
|||
} |
|||
&:hover { |
|||
background: rgba(0, 0, 0, 0.1216); |
|||
} |
|||
|
|||
&.red { |
|||
color: #d54941; |
|||
} |
|||
} |
|||
&.red { |
|||
color: #d54941; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
</style> |
|||
|
|||