<template>
|
<div class="indexWarp" ref="indexWarp">
|
<div class="datav-header" :style="{backgroundColor:isBgColor?'#031d67':''}">
|
<div class="logo">
|
|
</div>
|
<div class="user">
|
<el-dropdown :hide-on-click="false" size="mini">
|
<span class="el-dropdown-link">
|
刘德华<i class="el-icon-arrow-down el-icon--right"></i>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item>退出</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</div>
|
<div class="nav-banner" ref="navBanner">
|
<div class="img"></div>
|
<div class="bigText">大屏驾驶舱数据可视化</div>
|
<div class="subText">数据管理界面</div>
|
</div>
|
|
<streamer-nav class="streamer-nav" :style="{backgroundColor:isBgColor?'#031d67':''}"></streamer-nav>
|
<!-- <div class="nav-shadow"></div> -->
|
<div class="projectList">
|
<div class="project-header">
|
<div class="text">全部应用</div>
|
</div>
|
<div class="template-list">
|
<div class="template-item --blank">
|
<div class="template-image imageFirst">
|
<el-button type="primary" @click="dialogFormVisible = true"> + 创建项目</el-button>
|
</div>
|
<!-- <div class="template-info">
|
<div class="emptyCon">空白画板</div>
|
</div> -->
|
</div>
|
<div class="template-item" v-for="(item,i) in listData" :key="i">
|
<div class="template-image"
|
:style="{backgroundImage:item.screenshot?'url(' + item.screenshot + '}':'url(' + require('../assets/images/notbg.png') + ')',backgroundSize:'cover'}">
|
<div class="screen-edit">
|
<el-tooltip class="item" effect="dark" content="删除" placement="top">
|
<i class="preview el-icon-delete" @click="skip(3,item)"></i>
|
</el-tooltip>
|
<el-tooltip class="item" effect="dark" content="查看" placement="top">
|
<i class="preview el-icon-view lookView" @click="skip(1,item)"></i>
|
</el-tooltip>
|
<el-tooltip class="item" effect="dark" content="编辑" placement="top">
|
<i class="preview el-icon-edit editview" @click="skip(2,item)"></i>
|
</el-tooltip>
|
</div>
|
</div>
|
<input type="text" class="template-info input-text" :ref="item.ref" v-model="item.name"
|
@focus="alterName(item)" @blur="overEvent(item)">
|
</div>
|
</div>
|
</div>
|
<el-dialog title="创建数据大屏" width="30%" :visible.sync="dialogFormVisible">
|
<el-form ref="form" :model="panelForm" label-width="85px">
|
<el-form-item label="数据大屏名称">
|
<el-input v-model="panelForm.name" autocomplete="off" class="input-text-alert"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
<el-button type="primary" @click="addMode(panelForm.name)">确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import streamerNav from '../components/streamerNav.vue'
|
export default {
|
components: {
|
streamerNav,
|
},
|
data() {
|
return {
|
scrollTop: null,
|
isBgColor: false,
|
dialogFormVisible: false,
|
oldName: '',
|
img: "../assets/images/notbg.png",
|
listData: [],
|
panelForm: {
|
name: ''
|
},
|
opt: ""
|
}
|
},
|
mounted() {
|
let self = this;
|
window.addEventListener('scroll', self.setHeadPosition, true)
|
// debugger
|
self.opt = self.$route.query;
|
self.getData();
|
},
|
methods: {
|
// 适应
|
setHeadPosition() {
|
let self = this;
|
this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
let thisHeight = self.$refs.navBanner.offsetHeight;
|
if (this.scrollTop > thisHeight) {
|
this.isBgColor = true
|
} else {
|
this.isBgColor = false
|
}
|
},
|
// 获取列表数据
|
getData() {
|
let self = this;
|
// let opt = self.$route.query;
|
localStorage.setItem('userId', self.opt.userId);
|
self.$axios({
|
method: "get",
|
url: "/application/all",
|
params: {
|
userId: self.opt.userId
|
}
|
}).then(res => {
|
if (res.data.code == 1) {
|
self.listData = res.data.data.map(item => {
|
return item
|
});
|
console.log(self.listData)
|
}
|
}).catch(() => {
|
this.$message({
|
type: 'error',
|
message: '网络错误!'
|
});
|
})
|
},
|
// 创建
|
addMode(name) {
|
let self = this;
|
self.$axios({
|
method: "post",
|
url: "/application",
|
data: {
|
name: name,
|
userId: self.opt.userId
|
}
|
}).then(res => {
|
if (res.data.code == 1) {
|
self.dialogFormVisible = false;
|
self.$message({
|
message: res.data.msg,
|
type: 'success'
|
});
|
}
|
// 跳转
|
setTimeout(() => {
|
self.$router.push({
|
path: '/design',
|
query: {
|
id: res.data.data.id,
|
name: name
|
}
|
});
|
}, 1000);
|
}).catch(() => {
|
this.$message({
|
type: 'error',
|
message: '网络错误!'
|
});
|
})
|
},
|
// 点击编辑项目名称
|
alterName(item) {
|
let self = this;
|
self.oldName = function () {
|
return item.name;
|
}();
|
},
|
// 失去焦点时修改项目名
|
overEvent(item) {
|
let self = this;
|
if (item.name != this.oldName) {
|
self.$axios({
|
method: "put",
|
url: "/application",
|
data: {
|
id: item.id,
|
name: item.name
|
}
|
}).then(res => {
|
if (res.data.code == 1) {
|
self.$message({
|
message: res.data.msg,
|
type: 'success'
|
});
|
self.getData();
|
}
|
}).catch(() => {
|
this.$message({
|
type: 'error',
|
message: '网络错误!'
|
});
|
})
|
}
|
},
|
// 编辑和浏览 1查看2编辑3删除
|
skip(status, item) {
|
let self = this;
|
switch (status) {
|
case 1:
|
// 查看
|
self.$router.push({
|
path: '/exhibition',
|
query: {
|
id: item.id,
|
name: item.name
|
}
|
});
|
break;
|
case 2:
|
// 编辑
|
self.$router.push({
|
path: '/design',
|
query: {
|
id: item.id,
|
name: item.name
|
}
|
});
|
break;
|
case 3:
|
// 删除
|
self.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
self.$axios({
|
method: "delete",
|
url: "/application",
|
params: {
|
appId: item.id
|
}
|
}).then(res => {
|
if (res.data.code == 1) {
|
self.$message({
|
type: 'success',
|
message: '删除成功!'
|
});
|
self.getData();
|
}
|
}).catch(() => {
|
this.$message({
|
type: 'error',
|
message: '网络错误!'
|
});
|
})
|
|
}).catch(() => {
|
|
})
|
break;
|
|
default:
|
break;
|
}
|
}
|
},
|
destroyed() {
|
window.removeEventListener("scroll", this.setHeadPosition, true);
|
},
|
}
|
</script>
|
|
<style scoped>
|
.indexWarp {
|
width: 100%;
|
min-height: 100%;
|
background: #031d67 !important;
|
-webkit-font-smoothing: antialiased;
|
}
|
|
.datav-header {
|
display: flex;
|
position: fixed;
|
top: 0;
|
justify-content: space-between;
|
z-index: 999;
|
width: 100%;
|
height: 38px;
|
padding: 0 10px;
|
text-align: right;
|
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 19%, #171717 100%);
|
}
|
|
.nav-banner {
|
display: flex;
|
position: absolute;
|
top: 0;
|
justify-content: center;
|
flex-direction: column;
|
background: #031d67;
|
height: 360px;
|
transition: .5s height cubic-bezier(.65, .05, .36, 1);
|
width: 100%;
|
}
|
|
.nav-banner .img {
|
position: absolute;
|
width: 100%;
|
height: 360px;
|
background-image: url('../assets/images/banner.png');
|
background-size: cover;
|
background-position: center;
|
transition: .5s opacity cubic-bezier(.4, 0, 1, 1);
|
z-index: 1;
|
}
|
|
.nav-banner .bigText {
|
margin-top: -80px;
|
width: 700px;
|
font-size: 52px;
|
letter-spacing: 8px;
|
/* background-image: -webkit-linear-gradient(left, #a0e5ff, #1bc5f7); */
|
background: #43f9fd;
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
font-weight: bold;
|
z-index: 2;
|
padding-left: 60px;
|
}
|
|
.nav-banner .subText {
|
font-size: 26px;
|
color: #43f9fd;
|
letter-spacing: 5px;
|
margin-top: 6px;
|
z-index: 2;
|
padding-left: 60px;
|
}
|
|
.nav-shadow {
|
/* background: linear-gradient(180deg, transparent, #171b22); */
|
height: 50px;
|
position: relative;
|
width: 100%;
|
z-index: 1;
|
}
|
|
.streamer-nav {
|
top: 38px;
|
left: 0;
|
position: sticky;
|
}
|
|
.projectList {
|
padding: 0 30px;
|
background: #031d67;
|
/* background-image: url('../assets/images/bg-box.png'); */
|
z-index: 1;
|
}
|
|
.projectList .project-header {
|
position: sticky;
|
top: 80px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 1px solid #007ed3;
|
padding-bottom: 5px;
|
padding-top: 10px;
|
height: 56px;
|
background: #031d67;
|
z-index: 1;
|
min-width: 1024px;
|
}
|
|
.projectList .project-header .text {
|
max-width: 200px;
|
font-size: 14px;
|
color: #fff;
|
padding: 0 10px;
|
border-left: 6px solid #007ed3;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
white-space: nowrap;
|
}
|
|
.template-list {
|
display: flex;
|
flex-wrap: wrap;
|
color: #fff;
|
font-size: 12px;
|
margin: 0 -16px;
|
}
|
|
.template-item {
|
width: 345px;
|
height: 230px;
|
box-shadow: 0 0 10px -6px #000;
|
border: 1px solid #007ed3;
|
margin: 16px;
|
transition: .2s;
|
outline: 1px solid transparent;
|
cursor: default;
|
position: relative;
|
}
|
|
.template-list .template-item.--blank,
|
.template-list .template-item:hover {
|
outline: 1px solid #43f9fd;
|
}
|
|
.template-list .template-image {
|
width: 100%;
|
height: 184px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
transition: .2s;
|
position: relative;
|
background: #021651;
|
}
|
|
.template-list .imageFirst {
|
height: 100%;
|
}
|
|
.template-list .template-image .el-button--primary {
|
background-color: #43f9fd;
|
color: #011751;
|
border-color: #43f9fd;
|
|
}
|
|
.template-list .template-item.--blank .template-image {
|
box-shadow: inset 0 0 46px 0 rgba(136, 215, 255, .29);
|
}
|
|
.template-list .template-info {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 10px;
|
height: 44px;
|
background: #007ed3;
|
transition: .2s;
|
}
|
|
.template-item.--blank .template-info {
|
justify-content: center;
|
font-size: 14px;
|
}
|
|
.input-text {
|
width: 100%;
|
color: #fff;
|
border: 0;
|
outline: none;
|
background-color: rgba(0, 0, 0, 0);
|
}
|
|
.template-item .template-info .emptyCon {
|
width: 100%;
|
text-align: center;
|
}
|
|
.template-list .template-item.--blank .template-info {
|
border-top: 1px solid var(--datav-main-color);
|
}
|
|
.template-item .screen-edit {
|
position: absolute;
|
opacity: 0;
|
display: flex;
|
width: 100%;
|
height: 100%;
|
pointer-events: none;
|
align-items: center;
|
justify-content: center;
|
transition: opacity .2s;
|
background: rgba(0, 0, 0, .81);
|
}
|
|
.template-item .screen-edit .preview {
|
position: absolute;
|
top: 10px;
|
right: 15px;
|
color: #fff;
|
cursor: pointer;
|
transition: color .2s;
|
padding: 5px;
|
font-size: 24px;
|
background: #007ed3;
|
border-radius: 50%;
|
}
|
|
.template-item .screen-edit .preview:hover {
|
color: #2681ff;
|
}
|
|
.template-item .screen-edit .editview {
|
right: 105px;
|
}
|
|
.template-item .screen-edit .lookView {
|
right: 60px;
|
}
|
|
.template-item:hover .screen-edit {
|
opacity: 1;
|
pointer-events: all;
|
}
|
|
.input-text-alert {
|
width: 90%;
|
}
|
|
.el-dropdown-link {
|
color: #fff;
|
}
|
</style>
|
