<template>
|
<div id="realTimeList" class="out-div-rt">
|
<div class="top-menu">
|
<span class="iconfont iconku" style="font-size: 20px"></span>
|
<span style="font-size: 14px; margin-left: 5px; font-weight: 600"
|
>数据栈</span
|
>
|
</div>
|
<ul>
|
<li
|
v-for="(item, index) in DataStackPool.dirs"
|
:key="index"
|
@click="handleClick(item)"
|
:class="DataStackPool.selectedDir.id == item.id ? 'bg' : ''"
|
>
|
<!-- 文件夹图标 -->
|
<span
|
class="iconfont iconshipinwenjianjia-new folder"
|
v-if="item.type === 1"
|
></span>
|
<span
|
class="iconfont icontupianwenjianjia-copy folder"
|
v-else-if="item.type === 2"
|
></span>
|
<span
|
class="iconfont iconshipinwenjianjia1 folder"
|
v-else-if="item.type === 3"
|
></span>
|
<span class="iconfont iconwenjian folder" v-else></span>
|
|
<!-- <el-tooltip class="item" effect="dark" :content="item.name" placement="top" :enterable="false" transition="all 0 ease 0" > -->
|
<span class="folder-name">{{ item.name }}</span>
|
<!-- </el-tooltip> -->
|
|
<!-- 算法配置不全 -->
|
<i
|
class="iconfont iconicon-test6 folder-status"
|
v-if="item.status === 0"
|
></i>
|
<!-- 正在处理 -->
|
<i
|
class="iconfont iconicon-test11 folder-status"
|
v-else-if="item.status === 2"
|
></i>
|
<!-- 等待处理 -->
|
<i
|
class="iconfont iconicon-test5 folder-status"
|
v-else-if="item.status === 1"
|
></i>
|
<!-- 未知原因 -->
|
<i class="iconfont iconicon-test5 folder-status" v-else></i>
|
<!-- <i class="iconfont iconicon-test11 folder-status"></i> -->
|
<el-switch
|
size="mini"
|
style="float: right; margin: 2px 5px"
|
v-model="item.enable"
|
@change="switchEnable(item)"
|
></el-switch>
|
</li>
|
</ul>
|
</div>
|
</template>
|
<script>
|
import { switchDir } from "@/api/localVedio";
|
|
export default {
|
name: "localVedioList",
|
props: {
|
isMutl: {
|
type: Boolean,
|
default: true,
|
},
|
},
|
data() {
|
return {
|
list: [],
|
checkedVedio: [],
|
isShow: true,
|
dateMill: new Date(),
|
showCheckBox: false,
|
};
|
},
|
methods: {
|
handleClick(item) {
|
this.DataStackPool.selectedDir = item;
|
},
|
switchEnable(item) {
|
switchDir({ enable: item.enable, id: item.id }).then((rsp) => {
|
console.log(rsp);
|
});
|
},
|
},
|
};
|
</script>
|
<style lang="scss">
|
.out-div-rt {
|
width: 100%;
|
height: 100%;
|
.top-menu {
|
text-align: left;
|
position: absolute;
|
z-index: 1;
|
top: 54px;
|
background: #fff;
|
width: 100%;
|
}
|
|
.folder {
|
color: #3d68e1;
|
font-size: 20px;
|
float: left;
|
line-height: 25px;
|
}
|
.folder-name {
|
font-size: 14px;
|
margin-left: 5px;
|
float: left;
|
line-height: 27px;
|
max-width: 134px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
.folder-status {
|
color: #3d68e1;
|
font-size: 18px;
|
float: right;
|
line-height: 25px;
|
}
|
|
ul {
|
margin: 25px 25px 10px;
|
}
|
li {
|
width: 100%;
|
height: 25px;
|
margin-top: 2px;
|
cursor: pointer;
|
.el-switch__core {
|
width: 27px !important;
|
height: 14px;
|
}
|
.el-switch__core:after {
|
width: 10px;
|
height: 10px;
|
}
|
.el-switch.is-checked .el-switch__core::after {
|
left: 100%;
|
margin-left: -11px;
|
}
|
}
|
}
|
|
.bg {
|
background: #e1e1e1;
|
}
|
.clickStatus {
|
background: #e1e1e1;
|
}
|
</style>
|
