673 lines
19 KiB
Vue
673 lines
19 KiB
Vue
<template>
|
||
<Resize>
|
||
<div style="width:100%;height:100%;position: relative;">
|
||
<!-- <div class="bgPicture" :style="{ height: vdaH }"> -->
|
||
<div class="bgPicture" style="height:100%">
|
||
<!-- 标题 -->
|
||
<div class="title"></div>
|
||
<div class="titTop">
|
||
<div>
|
||
</div>
|
||
<div class="titRight">
|
||
<span>2023年2月17日 星期四 14:26</span>
|
||
<span></span>
|
||
<span> 天气 </span>
|
||
<span>晴 12℃</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ms-login">
|
||
<!-- <div class="ms-title"></div> -->
|
||
<div class="content">
|
||
<div class="welcome">欢迎登录</div>
|
||
<el-form :model="param" :rules="rules" ref="login" label-width="100px" label-position="top" class="ms-content">
|
||
<el-form-item prop="tenantId" label="" style="margin-bottom:35px">
|
||
<el-input v-model="param.tenantId" placeholder="请输入您的租户id">
|
||
<el-button slot="prepend" icon="el-icon-user"></el-button>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="username" label="" style="margin-bottom:35px">
|
||
<el-input v-model="param.username" placeholder="请输入您的账号">
|
||
<el-button slot="prepend" icon="el-icon-user"></el-button>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="password" label="" style="margin-top: 15px;margin-bottom:35px">
|
||
<el-input type="password" placeholder="请输入密码" v-model="param.password" @keyup.enter.native="submitForm()">
|
||
<el-button slot="prepend" icon="el-icon-lock"></el-button>
|
||
</el-input>
|
||
</el-form-item>
|
||
<div class="unforget" style="margin-left:15px">
|
||
<el-checkbox v-model="checked">保存登录</el-checkbox>
|
||
</div>
|
||
</el-form>
|
||
<div class="login-btn">
|
||
<el-button type="primary" @click="submitForm()">登录</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Resize>
|
||
</template>
|
||
|
||
<script>
|
||
import BarChart from "@/components/common/BarChart";
|
||
import mdScreenPie from "@/components/common/mdScreenPie";
|
||
import Swiper from "@/components/common/carousel";
|
||
import Resize from '../utils/Resize.vue'
|
||
import {getToken} from "@/api/api";
|
||
export default {
|
||
name: "report",
|
||
components: {
|
||
mdScreenPie,
|
||
BarChart,
|
||
Swiper,
|
||
Resize
|
||
},
|
||
data() {
|
||
return {
|
||
tienum: '',
|
||
showType: true,
|
||
topicSends:[],
|
||
param: {
|
||
username: 'dlgc_pic',
|
||
password: 'e19d5cd5af0378da05f63f891c7467af',
|
||
tenantId:'748495'
|
||
},
|
||
checked: false,
|
||
rules: {
|
||
tenantId: [{ required: true, message: '账号Id不能为空', trigger: 'blur' }],
|
||
username: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
|
||
password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
|
||
}
|
||
};
|
||
},
|
||
created() {
|
||
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
||
this.vdaH = h - 0 + "px";
|
||
// this.createMqtt()
|
||
this.getWeather()
|
||
// this.getTokenData()
|
||
},
|
||
|
||
methods: {
|
||
getTokenData(){
|
||
// getToken({grant_type:'password',scope:'all',tenantId:'748495',username:'dlgc_pic',password:'e19d5cd5af0378da05f63f891c7467af',type:"account"}).then(res => {
|
||
// console.log("res",res.data)
|
||
// })
|
||
let data = {
|
||
grant_type:'password',
|
||
scope:'all',
|
||
tenantId:'748495',
|
||
username:'dlgc_pic',
|
||
password:'e19d5cd5af0378da05f63f891c7467af',
|
||
type:"account"}
|
||
|
||
getToken(data).then((res)=>{
|
||
})
|
||
// this.$axios({
|
||
// method: "post",
|
||
// // url: `${baseUrl}file/local/files`,
|
||
// url: `http://175.27.191.156:11000/api/blade-auth/oauth/token`,
|
||
// data: data,
|
||
// dataType: 'jsonp',
|
||
// headers: {
|
||
// // Authorization: "Basic " + token,
|
||
// Authorization: 'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
|
||
// TenantId: '748495'
|
||
// },
|
||
// })
|
||
// .then(function(res) {
|
||
// console.log(res.data,'================');
|
||
// // z.modelshowdata.fileList = [
|
||
// // { fileName: e.file.name, filePath: v.data.fileName },
|
||
// // ];
|
||
// // z.$message.success("上传成功");
|
||
// })
|
||
// .catch(function(err) {
|
||
// // z.$message.error("请求失败");
|
||
// });
|
||
|
||
|
||
},
|
||
getType() {
|
||
let datas = {
|
||
account:this.param.username,
|
||
passsword:this.param.password,
|
||
};
|
||
loginApi(datas).then(res => {
|
||
console.log('c', res);
|
||
});
|
||
},
|
||
submitForm() {
|
||
|
||
this.$refs.login.validate(valid => {
|
||
if (valid) {
|
||
// loginApi({
|
||
// Account:this.param.username,
|
||
// Password:this.param.password,
|
||
// }).then(res => {
|
||
// console.log('c', res);
|
||
// if(res.data.code==200){
|
||
let data = {
|
||
grant_type:'password',
|
||
scope:'all',
|
||
tenantId:this.param.tenantId,
|
||
username:this.param.username,
|
||
password:this.param.password,
|
||
type:"account"
|
||
}
|
||
getToken(data).then((res)=>{
|
||
if (res.status == 200) {
|
||
this.$message.success('登录成功');
|
||
// localStorage.setItem('ms_username', this.param.username);
|
||
this.$router.push('/index');
|
||
sessionStorage.setItem(
|
||
"token",
|
||
JSON.stringify(res.data.access_token)
|
||
);
|
||
sessionStorage.setItem(
|
||
"ms_username",
|
||
JSON.stringify(res.data.user_name)
|
||
);
|
||
}else{
|
||
this.$message.error('请输入正确的登录信息！！！');
|
||
}
|
||
})
|
||
|
||
// }else{
|
||
// this.$message({
|
||
// message: res.data.msg,
|
||
// type: 'warning'
|
||
// });
|
||
// }
|
||
// });
|
||
} else {
|
||
this.$message.error('请输入账号和密码！！！');
|
||
console.log('error submit!!');
|
||
return false;
|
||
}
|
||
});
|
||
},
|
||
createMqtt() {
|
||
|
||
this.topicSends = ['/SC/pub/uwb'];
|
||
console.log("this.topicSends",this.topicSends)
|
||
window.PubScribe(this.topicSends, this.realInfo);
|
||
},
|
||
/** 实时数据分类 */
|
||
realInfo(topic, message) {
|
||
// console.log("topic",topic)
|
||
switch (topic) {
|
||
// 接收托片
|
||
case "/SC/pub/uwb":
|
||
try {
|
||
console.log("message",message)
|
||
// const utf8decoder = new TextDecoder()
|
||
// const u8arr = new Uint8Array(message)
|
||
// const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
// const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||
// console.log("hert", msg) //msg为转换后的JSON数据
|
||
|
||
} catch (error) {
|
||
|
||
}
|
||
break;
|
||
}
|
||
},
|
||
|
||
getWeather () {
|
||
this.$axios.get('https://restapi.amap.com/v3/weather/weatherInfo?key=e979d73682c0c69059e4cb6740c9dacd&city=320100' ).then(function(reponse){
|
||
console.log("reponse.data",reponse.data)
|
||
}).catch(() => {})
|
||
} ,
|
||
|
||
changeMessage(val) {
|
||
this.tienum = val
|
||
},
|
||
disBox() {
|
||
this.boxNone = !this.boxNone
|
||
this.$refs.screenBox.style.animationPlayState = 'running'
|
||
|
||
|
||
},
|
||
tableRowClassName({ row, rowIndex }) {
|
||
if (rowIndex % 2 === 0) {
|
||
return "success-row";
|
||
} else {
|
||
return "warning-row";
|
||
|
||
}
|
||
},
|
||
// 菜单点击
|
||
childBoxClick(val) {
|
||
this.menuType = val;
|
||
if (val === 3) {
|
||
this.$router.push('/progress')
|
||
} else if (val === 2) {
|
||
this.$router.push('/videoSurveillance')
|
||
} else if (val === 4) {
|
||
this.$router.push('/management')
|
||
} else if (val === 1) {
|
||
this.$router.push('/personnel')
|
||
}
|
||
},
|
||
switchDiv() {
|
||
if (this.type) {
|
||
this.type = false;
|
||
this.$refs.switchBtn.style.display = "none";
|
||
} else {
|
||
this.type = true;
|
||
setTimeout(() => {
|
||
// 俩秒之后让模块消失
|
||
this.$refs.switchBtn.style.display = "block";
|
||
}, 800)
|
||
}
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
this.switchDiv(); window.onresize = () => {
|
||
return (() => {
|
||
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
||
this.vdaH = h - 0 + "px";
|
||
})()
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
|
||
.bgPicture {
|
||
width: 100%;
|
||
background: url('../assets/loginImg/loginBg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.titTop {
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 9px;
|
||
left: 9px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.titLeft {
|
||
width: 138px;
|
||
height: 40px;
|
||
background: #025A5F;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
|
||
span:nth-child(1),
|
||
span:nth-child(2) {
|
||
font-size: 14px;
|
||
color: #3CFFF9;
|
||
letter-spacing: 1px;
|
||
font-weight: 400;
|
||
}
|
||
|
||
span:nth-child(3) {
|
||
font-size: 14px;
|
||
color: #fff;
|
||
letter-spacing: 1px;
|
||
font-weight: bold;
|
||
|
||
}
|
||
}
|
||
|
||
.titRight {
|
||
padding-top: 11px;
|
||
padding-right: 25px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #D1FFFE;
|
||
|
||
span:nth-child(2) {
|
||
display: inline-block;
|
||
position: absolute;
|
||
right: 80px;
|
||
width: 17.5px;
|
||
height: 18px;
|
||
background: url("~@/assets/pic/sun.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.title {
|
||
width: 100%;
|
||
height: 168px;
|
||
background: url("~@/assets/pic/title1.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
|
||
.container {
|
||
display: flex;
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
right: 0px;
|
||
}
|
||
|
||
.box {
|
||
height: 784px;
|
||
overflow-x: hidden;
|
||
transition: width 1s, height 1s;
|
||
overflow-y: hidden; //重点
|
||
background: url("~@/assets/pic/closeMenu.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
flex-direction: column;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.childBoxChoose {
|
||
cursor: pointer;
|
||
width: 166px;
|
||
height: 54px;
|
||
margin-bottom: 45px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: url("~@/assets/pic/btn1.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
font-size: 19px;
|
||
font-family: SourceHanSansCN-Bold, SourceHanSansCN;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
margin-left: 20px;
|
||
|
||
span:nth-child(1) {
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
span:nth-child(3) {
|
||
display: inline-block;
|
||
width: 10px;
|
||
height: 17px;
|
||
margin-left: 10px;
|
||
background: url("~@/assets/pic/enter1.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
.childBox:hover {
|
||
background: url("~@/assets/pic/btn1.png") no-repeat;
|
||
}
|
||
|
||
.childBox {
|
||
cursor: pointer;
|
||
width: 166px;
|
||
height: 54px;
|
||
margin-bottom: 45px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: url("~@/assets/pic/btn2.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
font-size: 19px;
|
||
font-family: SourceHanSansCN-Bold, SourceHanSansCN;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
margin-left: 20px;
|
||
|
||
span:nth-child(1) {
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
span:nth-child(3) {
|
||
display: inline-block;
|
||
width: 10px;
|
||
height: 17px;
|
||
margin-left: 10px;
|
||
background: url("~@/assets/pic/enter2.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.icon1 {
|
||
background: url("~@/assets/pic/shipinjiankong.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.icon2 {
|
||
background: url("~@/assets/pic/renyuanguanli.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.icon3 {
|
||
background: url("~@/assets/pic/jinduguanli.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.icon4 {
|
||
background: url("~@/assets/pic/anquanguanli.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.closeBtn {
|
||
position: relative;
|
||
top: 343px;
|
||
height: 53px;
|
||
width: 14px;
|
||
cursor: pointer;
|
||
left: -265px;
|
||
}
|
||
|
||
.switchBtn {
|
||
position: absolute;
|
||
transform: rotateY(358deg);
|
||
left: -14px;
|
||
top: 44%;
|
||
height: 53px;
|
||
width: 14px;
|
||
background: url("~@/assets/pic/openMenu.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn {
|
||
height: 53px;
|
||
width: 14px;
|
||
}
|
||
|
||
.tabHeader {
|
||
width: 398px;
|
||
height: 35px;
|
||
background: #368d87;
|
||
display: flex;
|
||
color: #fff;
|
||
font-weight: 500;
|
||
font-size: 13px;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
</style>
|
||
<style lang="less" scoped>
|
||
.el-table__footer-wrapper,
|
||
.el-table__header-wrapper {
|
||
display: none !important;
|
||
}
|
||
|
||
.el-table {
|
||
&.el-table--scrollable-y ::-webkit-scrollbar {
|
||
display: none !important; //隐藏滚动条
|
||
}
|
||
}
|
||
|
||
/deep/ .el-table tr {
|
||
background-color: transparent;
|
||
}
|
||
|
||
/deep/ .el-table,
|
||
.el-table__expanded-cell {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
/deep/ .el-table th {
|
||
background-color: #2f807d !important;
|
||
border-bottom: none !important;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
/deep/ .el-table--enable-row-transition .el-table__body td,
|
||
/deep/ .el-table .cell {
|
||
// background-color: transparent !important;
|
||
color: rgba(255, 255, 255, 0.7) !important;
|
||
border: none !important;
|
||
padding-left: 0 !important;
|
||
padding-right: 0 !important;
|
||
}
|
||
|
||
/deep/ .el-table th>.cell {
|
||
color: rgba(254, 254, 254, 1) !important;
|
||
font-weight: 700 !important;
|
||
}
|
||
|
||
.el-table::before {
|
||
//去除底部白线
|
||
left: 0 !important;
|
||
bottom: 0 !important;
|
||
width: 100% !important;
|
||
height: 0px !important;
|
||
}
|
||
|
||
/deep/ .el-form-item__label {
|
||
color: white !important;
|
||
}
|
||
|
||
//滚动条的宽度
|
||
::-webkit-scrollbar {
|
||
width: 0px;
|
||
height: 0px;
|
||
background-color: #070c4f;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td {
|
||
background-color: transparent !important;
|
||
/* color: #f19944; */
|
||
/* 设置文字颜色，可以选择不设置 */
|
||
}
|
||
|
||
/deep/ .el-table .warning-row {
|
||
background: rgba(44, 74, 64, 0.5) !important;
|
||
}
|
||
|
||
/deep/ .el-table .success-row {
|
||
background: transparent;
|
||
}
|
||
</style>
|
||
<style>.el-carousel__indicators--outside {
|
||
display: none;
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
/deep/ .el-form-item__label {
|
||
text-align: right;
|
||
font-size: 14px;
|
||
margin-left: 15px;
|
||
padding: 0;
|
||
&::before {
|
||
display: none;
|
||
}
|
||
}
|
||
/deep/ .el-input {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 20px;
|
||
background: rgb(9,41,43);
|
||
border: none;
|
||
.el-input-group__prepend {
|
||
background: transparent;
|
||
border: none;
|
||
}
|
||
.el-input__inner {
|
||
background: transparent;
|
||
border: none;
|
||
}
|
||
}
|
||
/deep/ .el-checkbox{
|
||
color: #fff;
|
||
}
|
||
/deep/ .el-checkbox__inner{
|
||
background: transparent;
|
||
border: 1px solid rgb(0,139,146)
|
||
}
|
||
.login-wrap {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
// background: url('../assets/img/bg.gif');
|
||
background: url('~@/assets/img/newlogin-bg.png');
|
||
}
|
||
.ms-login {
|
||
width: 31%;
|
||
height: 51%;
|
||
position: absolute;
|
||
left: 35.44%;
|
||
top: 22.2%;
|
||
.ms-title {
|
||
width: 100%;
|
||
height: 42px;
|
||
background: url('~@/assets/img/login_title.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.content {
|
||
margin-top: 33px;
|
||
width: 100%;
|
||
height: calc(100% - 75px);
|
||
border-radius: 20px;
|
||
background: url('../assets/loginImg/kuang.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
align-items: center;
|
||
.welcome {
|
||
margin-top: 28px;
|
||
font-size: 20px;
|
||
letter-spacing: 1px;
|
||
color: #fff;
|
||
font-weight: 700
|
||
}
|
||
.ms-content {
|
||
width: 80%;
|
||
margin-top: 33px;
|
||
}
|
||
.login-btn {
|
||
width: 75.5%;
|
||
height: 63px;
|
||
margin-top: 45px;
|
||
/deep/ .el-button {
|
||
width: 100%;
|
||
height: 100%;
|
||
// border-radius: 20px;
|
||
display: flex;
|
||
justify-content: center;
|
||
background: url("../assets/loginImg/loginBtn.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
border: none;
|
||
align-items: center;
|
||
span {
|
||
letter-spacing: 15px;
|
||
margin-left: 15px;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |