|
|
@@ -16,30 +16,51 @@
|
|
|
<div class="monitor-left">
|
|
|
<div class="search-box">
|
|
|
<span class="search-icon">🔍</span>
|
|
|
- <input
|
|
|
- v-model="searchText"
|
|
|
- type="text"
|
|
|
- placeholder="搜索楼栋 / 楼层 / 房间…"
|
|
|
- />
|
|
|
+ <el-input class="video-select"
|
|
|
+ @keyup.enter.native="handleEnter"
|
|
|
+ @clear="handleEnter"
|
|
|
+ clearable
|
|
|
+ v-model="queryParams.searchValue"
|
|
|
+ type="text" placeholder="搜索楼栋/楼层...." >
|
|
|
+ </el-input>
|
|
|
</div>
|
|
|
|
|
|
- <select v-model="selectedUnit" class="filter-select">
|
|
|
- <option value="">全部二级单位</option>
|
|
|
- <option>化学研究所</option>
|
|
|
- <option>物理研究所</option>
|
|
|
- <option>生物研究所</option>
|
|
|
- <option>材料研究所</option>
|
|
|
- <option>工程研究所</option>
|
|
|
- </select>
|
|
|
+ <el-select class="filter-select"
|
|
|
+ @change="handleEnter"
|
|
|
+ @clear="handleEnter"
|
|
|
+ clearable
|
|
|
+ v-model="queryParams.deptId"
|
|
|
+ placeholder="请选择二级单位">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.deptId"
|
|
|
+ :label="item.deptName"
|
|
|
+ :value="item.deptId">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
|
|
|
<div class="tree-wrap">
|
|
|
- <tree-node
|
|
|
- v-if="treeData"
|
|
|
- :node="treeData"
|
|
|
- :depth="0"
|
|
|
- :selected-label="selectedTreeLabel"
|
|
|
- @select="onTreeNodeSelect"
|
|
|
- />
|
|
|
+ <el-tree
|
|
|
+ class="dark-tree"
|
|
|
+ @node-click="nodeClickButton"
|
|
|
+ :current-node-key="treeId"
|
|
|
+ :check-on-click-node="false"
|
|
|
+ check-strictly
|
|
|
+ highlight-current
|
|
|
+ :default-expanded-keys="defaultKey"
|
|
|
+ node-key="treeId"
|
|
|
+ :data="deptOptions"
|
|
|
+ :props="defaultProps"
|
|
|
+ ref="tree"
|
|
|
+ :load="loadNode"
|
|
|
+ accordion
|
|
|
+ lazy>
|
|
|
+ <template #default="{ node, data }">
|
|
|
+ <span class="tree-node-label">
|
|
|
+ <span>{{ data.deptName }}</span>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-tree>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -47,9 +68,7 @@
|
|
|
<div class="monitor-right">
|
|
|
<div class="camera-grid-header">
|
|
|
<div class="camera-breadcrumb">
|
|
|
- <span>安科院主园区</span> ›
|
|
|
- <span>综合实验楼A</span> ›
|
|
|
- <span>3层</span>
|
|
|
+ <span>{{breadcrumb}}</span>
|
|
|
</div>
|
|
|
<div class="camera-pager">
|
|
|
<button class="pager-btn" @click="prevPage">‹</button>
|
|
|
@@ -59,38 +78,33 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="camera-grid">
|
|
|
- <div
|
|
|
+ <H5PlayerVideo v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
|
|
|
+ <!-- <div
|
|
|
v-for="(cam, idx) in cameras"
|
|
|
:key="'cam-' + idx"
|
|
|
class="camera-cell"
|
|
|
:class="{ 'ai-cam': idx === 0 }"
|
|
|
>
|
|
|
- <!-- AI badge (first cell only) -->
|
|
|
<div v-if="idx === 0" class="camera-ai-badge">🤖 AI检测</div>
|
|
|
-
|
|
|
- <!-- REC indicator -->
|
|
|
<div class="camera-rec">REC</div>
|
|
|
-
|
|
|
- <!-- Video placeholder -->
|
|
|
<div class="camera-placeholder-text">CCTV</div>
|
|
|
-
|
|
|
- <!-- AI detection box (first cell only) -->
|
|
|
<div v-if="idx === 0" class="ai-detection-box" style="left:28%;top:18%;width:22%;height:38%">
|
|
|
<div class="ai-detection-label">危险行为: 未佩戴防护</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- Camera label -->
|
|
|
<div class="camera-label">{{ cam }}</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getCameraList } from '@/api/screen'
|
|
|
+import { getCameraList,getMonitorTree,getRooms,getDeptDropList,getCameraStream } from '@/api/screen'
|
|
|
|
|
|
+import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
|
|
|
+import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
|
|
|
const TreeNode = {
|
|
|
name: 'TreeNode',
|
|
|
props: {
|
|
|
@@ -100,7 +114,7 @@ const TreeNode = {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- expanded: this.depth === 0
|
|
|
+ expanded: this.depth === 0,
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -113,6 +127,9 @@ const TreeNode = {
|
|
|
},
|
|
|
isSelected() {
|
|
|
return this.node.label === this.selectedLabel
|
|
|
+ },
|
|
|
+ totalPages() {
|
|
|
+ return Math.ceil(this.videoTotal / 9) || 1
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -157,7 +174,7 @@ const TreeNode = {
|
|
|
export default {
|
|
|
name: 'SecurityMonitor',
|
|
|
components: {
|
|
|
- TreeNode
|
|
|
+ TreeNode,H5PlayerVideo,fullH5PlayerVideo
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -166,7 +183,7 @@ export default {
|
|
|
selectedTreeLabel: '',
|
|
|
currentPage: 1,
|
|
|
totalPages: 3,
|
|
|
- cameras: [],
|
|
|
+ cameras: [{},{},{},{},{},{},{},{},{},],
|
|
|
treeData: {
|
|
|
label: '\u5B89\u79D1\u9662\u4E3B\u56ED\u533A',
|
|
|
children: [
|
|
|
@@ -194,13 +211,318 @@ export default {
|
|
|
]
|
|
|
}
|
|
|
]
|
|
|
- }
|
|
|
+ },
|
|
|
+ //左侧部分
|
|
|
+ defaultProps: {
|
|
|
+ children: "childTreeList",
|
|
|
+ label: "deptName",
|
|
|
+ isLeaf:"leaf",
|
|
|
+ },
|
|
|
+ queryParams:{
|
|
|
+ searchValue: "",
|
|
|
+ deptId: '',
|
|
|
+ },
|
|
|
+ deptOptions: [],
|
|
|
+ options:[],
|
|
|
+ treeId:null,
|
|
|
+ defaultKey:null,
|
|
|
+ // 地址部分
|
|
|
+ breadcrumb:'',
|
|
|
+ // 视频部分
|
|
|
+ videoQueryParams:{
|
|
|
+ page:1,
|
|
|
+ pageSize:4,
|
|
|
+ streamType:1,
|
|
|
+ source:0,
|
|
|
+ },
|
|
|
+ videoType:false,
|
|
|
+ videoList:[],
|
|
|
+ videoTotal:0,
|
|
|
+ //全屏视频参数
|
|
|
+ fullVideoProps:{},
|
|
|
+ fullVideoType:false,
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- this.fetchCameras()
|
|
|
+ // this.fetchCameras()
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getMonitorTree();
|
|
|
+ this.getDeptDropList();
|
|
|
},
|
|
|
methods: {
|
|
|
+
|
|
|
+ handleEnter(){
|
|
|
+ this.getMonitorTree();
|
|
|
+ },
|
|
|
+ //二级学院下拉列表
|
|
|
+ async getDeptDropList() {
|
|
|
+ let self = this;
|
|
|
+ try {
|
|
|
+ const res = await getDeptDropList({})
|
|
|
+ this.$set(this,'options',res.data[0].child);
|
|
|
+ } catch (e) {
|
|
|
+ console.error('BuildingNav:', e)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getMonitorTree() {
|
|
|
+ let self = this;
|
|
|
+ let obj = JSON.parse(JSON.stringify(this.queryParams))
|
|
|
+ try {
|
|
|
+ const res = await getMonitorTree(obj)
|
|
|
+ let list = this.forTreeId(res.data);
|
|
|
+ this.$set(self,'deptOptions',list)
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ let checkData = []
|
|
|
+ if(this.queryParams.searchValue){
|
|
|
+ checkData = list[0].childTreeList[0].childTreeList[0];
|
|
|
+ //展开列表
|
|
|
+ self.$set(self,'defaultKey',[list[0].treeId,list[0].childTreeList[0].treeId]);
|
|
|
+ setTimeout(function(){
|
|
|
+ self.$set(self,'defaultKey',[list[0].treeId,list[0].childTreeList[0].childTreeList[0].treeId]);
|
|
|
+ },200)
|
|
|
+ }else{
|
|
|
+ checkData = list[0].childTreeList[0];
|
|
|
+ //展开列表
|
|
|
+ self.$set(self,'defaultKey',[list[0].treeId,list[0].childTreeList[0].treeId]);
|
|
|
+ }
|
|
|
+ setTimeout(function(){
|
|
|
+ //选中列表
|
|
|
+ self.$refs.tree.setCurrentKey(checkData.treeId);
|
|
|
+ self.$set(self,'treeId',checkData.treeId);
|
|
|
+ //当前位置展示
|
|
|
+ self.checkAddress(checkData.treeId);
|
|
|
+ //父级视屏数据
|
|
|
+ self.getSubId(checkData);
|
|
|
+ },600);
|
|
|
+ })
|
|
|
+ } catch (e) {
|
|
|
+ console.error('BuildingNav:', e)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ nodeClickButton(e,data){
|
|
|
+ console.log('e===>',e);
|
|
|
+ console.log('data===>',data);
|
|
|
+ let self = this;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (!e.level||e.level == 2||e.level == 3) {
|
|
|
+ if(this.treeId != e.treeId){
|
|
|
+ this.treeId = e.treeId;
|
|
|
+ //等待后续逻辑-面板展示-实验室信息-视屏信息
|
|
|
+ //当前位置展示
|
|
|
+ this.checkAddress(e.treeId);
|
|
|
+ //查询楼栋/楼层下所有实验室ID
|
|
|
+ this.getSubId(e);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$refs.tree.setCurrentKey(this.treeId);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ forTreeId(list){
|
|
|
+ let self = this;
|
|
|
+ list.forEach((item,index)=>{
|
|
|
+ item.treeId = item.id;
|
|
|
+ item.deptName = item.name;
|
|
|
+ item.level = item.type;
|
|
|
+ item.childTreeList = item.buildFloorVoList;
|
|
|
+ delete item.id
|
|
|
+ delete item.name
|
|
|
+ delete item.type
|
|
|
+ delete item.buildFloorVoList
|
|
|
+ if(item.childTreeList[0]){
|
|
|
+ self.forTreeId(item.childTreeList);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return list
|
|
|
+ },
|
|
|
+ //手动加载
|
|
|
+ loadNode(node, resolve) {
|
|
|
+ console.log('node',node);
|
|
|
+ console.log('resolve',resolve);
|
|
|
+ let self = this;
|
|
|
+ if (node.data){
|
|
|
+ if(node.data.level == 3){
|
|
|
+ let obj = {
|
|
|
+ deptId:this.queryParams.deptId,
|
|
|
+ searchValue:this.queryParams.searchValue,
|
|
|
+ }
|
|
|
+ obj.floorId = node.data.treeId;
|
|
|
+ getRooms(obj).then(response => {
|
|
|
+ for(let i=0;i<response.data.length;i++){
|
|
|
+ response.data[i].deptName = response.data[i].formatRoomName;
|
|
|
+ response.data[i].leaf = true;
|
|
|
+ }
|
|
|
+ resolve(response.data[0]?response.data:[]);
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ if(node.data.childTreeList){
|
|
|
+ if(node.data.childTreeList[0]){
|
|
|
+ if(node.data.level != 2){
|
|
|
+ node.data.childTreeList.forEach((item)=>{
|
|
|
+ if(item.childTreeList){
|
|
|
+ if(!item.childTreeList[0]){
|
|
|
+ item.leaf = true;
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ item.leaf = true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ resolve(node.data.childTreeList);
|
|
|
+ }else{
|
|
|
+ resolve([]);
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ resolve([]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ //实验室ID查询
|
|
|
+ getSubId(e){
|
|
|
+ let self = this;
|
|
|
+ let obj = {
|
|
|
+ deptId:this.queryParams.deptId,
|
|
|
+ levelIds:[],
|
|
|
+ }
|
|
|
+ if(!e.level){
|
|
|
+ //实验室
|
|
|
+ // this.$parent.setVideoData([e.treeId]);
|
|
|
+ this.getVideoData([e.treeId])
|
|
|
+ }else if(e.level == 2){
|
|
|
+ //楼栋
|
|
|
+ obj.buildingId = e.treeId;
|
|
|
+ getRooms(obj).then(response => {
|
|
|
+ let list = [];
|
|
|
+ for(let i=0;i<response.data.length;i++){
|
|
|
+ list.push(response.data[i].treeId)
|
|
|
+ }
|
|
|
+ // this.$parent.setVideoData(list);
|
|
|
+ this.getVideoData(list)
|
|
|
+ })
|
|
|
+ }else if(e.level == 3){
|
|
|
+ //楼层
|
|
|
+ obj.floorId = e.treeId;
|
|
|
+ getRooms(obj).then(response => {
|
|
|
+ let list = [];
|
|
|
+ for(let i=0;i<response.data.length;i++){
|
|
|
+ list.push(response.data[i].treeId)
|
|
|
+ }
|
|
|
+ // this.$parent.setVideoData(list);
|
|
|
+ this.getVideoData(list)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //选中位置联查
|
|
|
+ checkAddress(id){
|
|
|
+ let list = this.forAddress(this.$refs.tree._data.root.childNodes,id);
|
|
|
+ // this.$parent.setAddress(list);
|
|
|
+ let text = '';
|
|
|
+ for(let i=0;i<list.length;i++){
|
|
|
+ if(i==0){
|
|
|
+ text = text + list[i];
|
|
|
+ }else{
|
|
|
+ text = text + ' - ' + list[i];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$set(this,'breadcrumb',text);
|
|
|
+ },
|
|
|
+ forAddress(list,id){
|
|
|
+ let self = this;
|
|
|
+ let nameList = [];
|
|
|
+ let name = []
|
|
|
+ for(let i=0;i<list.length;i++){
|
|
|
+ if(list[i].data.treeId == id){
|
|
|
+ return list[i].data.deptName
|
|
|
+ }else{
|
|
|
+ if(list[i].childNodes){
|
|
|
+ if(list[i].childNodes[0]){
|
|
|
+ name = self.forAddress(list[i].childNodes,id);
|
|
|
+ if(name){
|
|
|
+ nameList = [list[i].data.deptName].concat(name)
|
|
|
+ return nameList
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //视频部分
|
|
|
+ //刷新视屏
|
|
|
+ getVideoData(data){
|
|
|
+ let obj = {
|
|
|
+ page:1,
|
|
|
+ pageSize:9,
|
|
|
+ passageway:'',
|
|
|
+ protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
|
|
|
+ streamType:1,
|
|
|
+ source:4,
|
|
|
+ subIds:data,
|
|
|
+ };
|
|
|
+ this.$set(this,'videoQueryParams',obj);
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ this.videoInitialize()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async videoInitialize() {
|
|
|
+ let self = this;
|
|
|
+ self.$set(self, 'videoType', false);
|
|
|
+ self.$set(self, 'videoList', []);
|
|
|
+ try {
|
|
|
+ const res = await getCameraStream(this.videoQueryParams)
|
|
|
+ let list = [];
|
|
|
+ res.data.total = 100;
|
|
|
+ res.data.records = [
|
|
|
+ {streamUrl:'1', deviceNo:'1'},
|
|
|
+ {streamUrl:'2', deviceNo:'2'},
|
|
|
+ {streamUrl:'3', deviceNo:'3'},
|
|
|
+ {streamUrl:'4', deviceNo:'4'},
|
|
|
+ {streamUrl:'5', deviceNo:'5'},
|
|
|
+ {streamUrl:'6', deviceNo:'6'},
|
|
|
+ {streamUrl:'7', deviceNo:'7'},
|
|
|
+ {streamUrl:'8', deviceNo:'8'},
|
|
|
+ {streamUrl:'9', deviceNo:'9'},
|
|
|
+ ];
|
|
|
+ for(let i=0;i<res.data.records.length;i++){
|
|
|
+ list.push(
|
|
|
+ {
|
|
|
+ width: 1214, //(宽度:非必传-默认600)
|
|
|
+ height: 792, //(高度:非必传-默认338)
|
|
|
+ url: res.data.records[i].streamUrl,
|
|
|
+ cameraIndexCode: res.data.records[i].deviceNo,
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ this.$set(this,'videoList',list)
|
|
|
+ this.$set(this,'videoTotal',res.data.total);
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ setTimeout(function(){
|
|
|
+ self.$set(self, 'videoType', true);
|
|
|
+ },1000);
|
|
|
+ })
|
|
|
+ } catch (e) {
|
|
|
+ console.error('VideoGrid:', e)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changePage(delta) {
|
|
|
+ this.videoQueryParams.page += delta
|
|
|
+ this.videoInitialize()
|
|
|
+ },
|
|
|
+ //全屏开启-关闭轮播
|
|
|
+ stopTime(cameraIndexCode){
|
|
|
+ this.$set(this,'fullVideoProps',{cameraIndexCode:cameraIndexCode});
|
|
|
+ this.$set(this,'fullVideoType',true);
|
|
|
+ },
|
|
|
+ //全屏关闭-开启轮播
|
|
|
+ outFullScreen(){
|
|
|
+ let self = this;
|
|
|
+ this.$set(this,'fullVideoType',false);
|
|
|
+ this.$set(this,'fullVideoProps',{});
|
|
|
+ },
|
|
|
+
|
|
|
+ //旧
|
|
|
+
|
|
|
async fetchCameras() {
|
|
|
try {
|
|
|
const res = await getCameraList({ page: 1, pageSize: 9 })
|
|
|
@@ -239,7 +561,29 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-
|
|
|
+<style lang="scss">
|
|
|
+.el-select-dropdown{
|
|
|
+ background-color: rgba(8, 55, 106, 0.8);
|
|
|
+ border:1px solid rgba(8, 55, 106, 1);
|
|
|
+ color:#A8CCE8;
|
|
|
+ .el-select-dropdown__item{
|
|
|
+ color:#A8CCE8;
|
|
|
+ height:62px;
|
|
|
+ line-height:62px;
|
|
|
+ font-size:28px;
|
|
|
+ }
|
|
|
+ .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
|
|
|
+ background-color: rgba(8, 55, 106, 0.5);
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+ .el-scrollbar{
|
|
|
+ height: 500px;
|
|
|
+ .el-select-dropdown__wrap{
|
|
|
+ max-height:500px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
<style lang="scss" scoped>
|
|
|
.security-monitor {
|
|
|
display: flex;
|
|
|
@@ -309,7 +653,6 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 18px;
|
|
|
- padding: 15px 25px;
|
|
|
border-radius: 10px;
|
|
|
background: $bg-card;
|
|
|
border: 1px solid $border;
|
|
|
@@ -318,9 +661,10 @@ export default {
|
|
|
.search-icon {
|
|
|
font-size: 32px;
|
|
|
color: $text-dim;
|
|
|
+ margin:15px 0 15px 25px;
|
|
|
}
|
|
|
|
|
|
- input {
|
|
|
+ .video-select {
|
|
|
flex: 1;
|
|
|
background: none;
|
|
|
border: none;
|
|
|
@@ -333,10 +677,25 @@ export default {
|
|
|
color: $text-dim;
|
|
|
}
|
|
|
}
|
|
|
+ ::v-deep .el-input__inner{
|
|
|
+ height:70px;
|
|
|
+ color: #a8cce8;
|
|
|
+ font-size: 30px;
|
|
|
+ background: rgba(7, 22, 54, 0);
|
|
|
+ border: none;
|
|
|
+ padding-left:0;
|
|
|
+ }
|
|
|
+ ::v-deep .el-input__inner::placeholder{
|
|
|
+ color: rgba(110, 165, 210, 0.55);
|
|
|
+ }
|
|
|
+ ::v-deep .el-input .el-input__clear{
|
|
|
+ font-size:24px;
|
|
|
+ margin-right:12px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.filter-select {
|
|
|
- padding: 12px 25px;
|
|
|
+ // padding: 12px 25px;
|
|
|
border-radius: 10px;
|
|
|
width: 100%;
|
|
|
flex-shrink: 0;
|
|
|
@@ -348,11 +707,28 @@ export default {
|
|
|
outline: none;
|
|
|
cursor: pointer;
|
|
|
appearance: none;
|
|
|
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='rgba(30,144,255,0.6)'/%3E%3C/svg%3E");
|
|
|
+ // background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='rgba(30,144,255,0.6)'/%3E%3C/svg%3E");
|
|
|
background-repeat: no-repeat;
|
|
|
background-position: right 25px center;
|
|
|
+ ::v-deep .el-input__inner{
|
|
|
+ height:70px;
|
|
|
+ color: #a8cce8;
|
|
|
+ font-size: 30px;
|
|
|
+ background: rgba(7, 22, 54, 0);
|
|
|
+ border: none;
|
|
|
+ padding-left: 28px;
|
|
|
+ }
|
|
|
+ ::v-deep .el-input__icon{
|
|
|
+ margin-right:13px;
|
|
|
+ color: #a8cce8;
|
|
|
+ }
|
|
|
+ .el-input__inner::placeholder{
|
|
|
+ color: rgba(110, 165, 210, 0.55);
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep .el-select .el-input .el-select__caret{
|
|
|
+ font-size:24px;
|
|
|
}
|
|
|
-
|
|
|
// ========== Tree ==========
|
|
|
.tree-wrap {
|
|
|
flex: 1;
|
|
|
@@ -368,8 +744,32 @@ export default {
|
|
|
background: $border;
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
+ .el-tree{
|
|
|
+ background: rgba(7, 22, 54, 0);
|
|
|
+ color:#A8CCE8;
|
|
|
+ }
|
|
|
+ ::v-deep .el-tree-node__content{
|
|
|
+ height:62px;
|
|
|
+ font-size:28px;
|
|
|
+ }
|
|
|
+ ::v-deep .el-tree-node__expand-icon{
|
|
|
+ font-size:26px;
|
|
|
+ color:#3E6185;
|
|
|
+ }
|
|
|
+ ::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
|
|
|
+ background-color: rgba(8, 55, 106, 0.5);
|
|
|
+ }
|
|
|
+ ::v-deep .el-tree-node__content:hover{
|
|
|
+ background-color: rgba(8, 55, 106, 0.5);
|
|
|
+ }
|
|
|
+ ::v-deep .tree-node-label:hover{
|
|
|
+ background-color: rgba(8, 55, 106, 0);
|
|
|
+ color:#A8CCE8;
|
|
|
+ }
|
|
|
+ ::v-deep .el-tree-node:focus>.el-tree-node__content{
|
|
|
+ background-color: rgba(8, 55, 106, 0.5);
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
::v-deep .tree-node-label {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -591,4 +991,6 @@ export default {
|
|
|
box-shadow: 0 0 45px rgba(255, 59, 59, 0.7);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
</style>
|
dedsudiyu
