Skip to content

F
founder_vue
Commit 5497b3e9 by 蔡嘉凯
Options

蔡嘉凯

parent f6e1930a
Showing with 287 additions and 62 deletions
src/api/shouye.js
......@@ -69,3 +69,10 @@ export const getDbZlList = params =>
//首页待审批案件列表
export const getDspAjList = params =>
get(`${base.alyIP}/dbsx/getDspAjList`, params);
//获取未读消息列表
export const getMsgList = params =>
post(`${base.alyIP}/getXxList`,params);
//查看未读消息
export const updateMsgReaded = params =>
post(`${base.alyIP}/updateXxzt`,params)
\ No newline at end of file
src/assets/img/Login/LoginTitle.png
src/assets/img/Login/LoginTitle.png

21.9 KB | W: | H:

src/assets/img/Login/LoginTitle.png

12.7 KB | W: | H:

src/assets/img/Login/LoginTitle.png
src/assets/img/Login/LoginTitle.png
src/assets/img/Login/LoginTitle.png
src/assets/img/Login/LoginTitle.png
  • 2-up
  • Swipe
  • Onion skin
src/components/msg.vue 0 → 100644
<template>
<div class="msg">
<div class="msgInfo" :class="[data.sfydPdbz == 0 ? 'unRead' : '']">
<div class="msgHeader">
<span class="msgTitle">{{ data.xxbt }}</span>
<span class="msgType">{{ data.xxname }}</span>
<span class="msgSender">{{ data.fsrName }}</span>
<span class="msgSendTime">{{ data.fssj }}</span>
</div>
<div class="msgContent">{{ data.xxnr }}</div>
</div>
<div class="msgMark">
<div class="msgMarkBtn" v-if="data.sfydPdbz == 0" @click="$emit('mark')">
<span>标为已读</span>
</div>
<span class="msgMarked" v-else>已读</span>
</div>
</div>
</template>
<script>
export default {
props: { data: Object },
};
</script>
<style lang="scss" scoped>
.msg {
width: 678px;
height: 59px;
padding: 8px 13px 0 16px;
overflow: hidden;
border-bottom: solid 1px #e9e9e9;
.msgInfo {
width: 550px;
float: left;
.msgHeader {
overflow: hidden;
line-height: 20px;
> * {
float: left;
}
.msgTitle {
font-size: 15px;
color: #222222;
}
.msgType {
margin-left: 25px;
font-size: 12px;
color: #007af8;
}
.msgSender {
margin-left: 20px;
font-size: 12px;
color: #888888;
}
.msgSendTime {
margin-left: 20px;
font-size: 12px;
color: #888888;
}
}
.msgContent {
margin-top: 8px;
font-size: 12px;
line-height: 16px;
color: #666666;
}
&.unRead {
.msgTitle {
font-weight: bold;
}
.msgSender {
color: #666666;
}
.msgSendTime {
color: #666666;
}
.msgContent {
color: #222222;
}
}
}
.msgMark {
width: 64px;
height: 24px;
float: right;
margin-top: 11px;
margin-right: 20px;
text-align: center;
.msgMarkBtn {
height: 22px;
cursor: pointer;
border: solid 1px #0086fe;
border-radius: 12px;
color: #0086fe;
span {
font-size: 12px;
}
}
.msgMarked {
font-size: 12px;
color: #aaaaaa;
}
}
}
</style>
src/components/msgDetail.vue 0 → 100644
<template>
<el-dialog
custom-class="msgDetail"
:visible.sync="visible"
width="800px"
append-to-body
:data="data"
@close="handleClose"
>
<template class="title" #title>
sdsdsd
</template>
<div class="header">
<div class="title">{{ data.xxbt }}</div>
<div class="breadCrumb">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
</div>
</div>
<div style="border-top:solid 1px #AAAAAA"></div>
<div class="main">
<div class="type">
消息类型：<span>{{ data.xxname }}</span>
</div>
<div class="content">{{ data.xxnr }}</div>
</div>
<div class="footer">
<span>发送人：{{ data.fsrName }}</span>
<span>发送时间：{{ data.fssj }}</span>
</div>
</el-dialog>
</template>
<script>
export default {
props: { data: Object, visible: Boolean },
methods: {
handleClose() {
this.$emit("close");
},
},
};
</script>
<style lang="scss" scoped>
.msgDetail.el-dialog {
.el-dialog__header {
padding: 0;
}
.el-dialog__body {
.header {
padding: 4px;
overflow: hidden;
.title {
float: left;
font-size: $ns-font-size-lg;
font-weight: bold;
color: #39e;
}
.breadCrumb {
width: 40%;
float: right;
font-size: $ns-font-size-base;
color: #28d;
}
}
.main {
padding: 4px;
.type {
font-size: $ns-font-size-sm;
span {
color: #da8;
}
}
.content {
font-size: $ns-font-size-base;
}
}
.footer {
width: 100%;
position: absolute;
bottom: 4px;
font-size: $ns-font-size-sm;
}
}
}
</style>
src/views/index/shouye.vue
This source diff could not be displayed because it is too large. You can view the blob instead.
src/views/login/login.vue
<template>
<div class="login-container">
<video width="100%"
<video
width="100%"
height="100%"
id="myVideo"
class="video-js video"
style="object-fit: fill;">
<source src="../../assets/img/Login/login.mp4"
type="video/mp4" />
style="object-fit: fill;"
>
<source src="../../assets/img/Login/login.mp4" type="video/mp4" />
您的浏览器不支持 video 标签。
</video>
<div class="bgImgDiv">
<div class="bgImg">
<div class="title">
<img src="../../assets/img/Login/LoginTitle.png"
alt="">
<img src="../../assets/img/Login/LoginTitle.png" alt="" />
</div>
<div class="login_border">
<div class="left_img">
<img class="zqcj_shce"
src="../../assets/img/Login/Zqcj_Shce.png"
alt="">
<img
class="zqcj_shce"
src="../../assets/img/Login/Zqcj_Shce-2.png"
alt=""
/>
</div>
<el-form ref="loginForm"
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
autocomplete="on"
label-position="right">
label-position="right"
>
<!-- <h3 class="title">{{sjtitle}}扫黑除恶管理应用系统</h3> -->
<el-form-item prop="username"
style="text-align: center;">
<el-input ref="username"
<el-form-item prop="username" style="text-align: center;">
<el-input
ref="username"
v-model="loginForm.username"
placeholder="请输入用户名"
name="username"
type="text"
tabindex="1"
style="width:318px;margin-top:30px"
autocomplete="on">
<img slot="prefix"
autocomplete="on"
>
<img
slot="prefix"
style="margin-left:10px;width:14px;height:15px"
src="../../assets/img/Login/username.png" />
src="../../assets/img/Login/username.png"
/>
</el-input>
</el-form-item>
<el-form-item prop="password"
style="text-align: center;">
<el-input :key="passwordType"
<el-form-item prop="password" style="text-align: center;">
<el-input
:key="passwordType"
ref="password"
v-model="loginForm.password"
:type="passwordType"
......@@ -56,32 +63,40 @@
tabindex="2"
autocomplete="on"
style="width:318px"
@keyup.enter.native="handleLogin">
<img slot="prefix"
@keyup.enter.native="handleLogin"
>
<img
slot="prefix"
style="margin-left:10px;width:14px;height:15px"
src="../../assets/img/Login/password.png" />
src="../../assets/img/Login/password.png"
/>
</el-input>
</el-form-item>
<!-- 按钮事件
读取状态属性 绑定
类型: 样式内容 -->
<el-button :loading="loading"
<el-button
:loading="loading"
type="primary"
style="width:318px;background-image: linear-gradient(to right, #3666EB , #0FE6E3)"
@click.native.prevent="handleLogin">{{loading ? "加载中":"登录"}}</el-button>
@click.native.prevent="handleLogin"
>{{ loading ? "加载中" : "登录" }}</el-button
>
</el-form>
</div>
<div class="footer"
style="z-index:1000;">
<span style="margin-right:30px">{{sjtitle}}扫黑除恶管理应用系统</span>
<span style="margin-left:30px">技术支持：方正国际软件（北京）有限公司</span>
<div class="footer" style="z-index:1000;">
<span style="margin-right:30px"
>{{ sjtitle }}扫黑除恶管理应用系统</span
>
<span style="margin-left:30px"
>技术支持：方正国际软件（北京）有限公司</span
>
</div>
</div>
</div>
<!-- loginRules 对验证规则进行了包裹，通过控件中的prop绑定内容进行验证-->
<!-- <img class="" src="../../assets/img/Login/animate.gif" style="position: absolute;left:200px;top:300px;object-fit:none"/> -->
</div>
</template>
......@@ -94,17 +109,19 @@ import "video.js/dist/video-js.css";
export default {
name: "Login",
data () {
data() {
return {
loginForm: {
username: "",
password: ""
password: "",
},
loginRules: {
username: [
{ required: true, trigger: "blur", message: "用户名是必填项" }
{ required: true, trigger: "blur", message: "用户名是必填项" },
],
password: [
{ required: true, trigger: "blur", message: "密码是必填项" },
],
password: [{ required: true, trigger: "blur", message: "密码是必填项" }]
},
passwordType: "password",
capsTooltip: false,
......@@ -114,14 +131,14 @@ export default {
redirect: undefined,
otherQuery: {},
userInfo: {},
sjtitle: '内蒙古自治区'
sjtitle: "内蒙古自治区",
};
},
created () {
created() {
// window.addEventListener('storage', this.afterQRScan)
this.getTitle()
this.getTitle();
},
mounted () {
mounted() {
if (this.loginForm.username === "") {
this.$refs.username.focus();
} else if (this.loginForm.password === "") {
......@@ -129,22 +146,22 @@ export default {
}
this.initVideo();
},
destroyed () {
destroyed() {
// window.removeEventListener('storage', this.afterQRScan)
},
methods: {
getTitle () {
getTitle() {
var relUrlIp = window.location.host.substring(
0,
window.location.host.length - 5
);
if (relUrlIp == '10.142.16.177') {
this.sjtitle = '湖南省'
if (relUrlIp == "10.142.16.177") {
this.sjtitle = "湖南省";
} else {
this.sjtitle = '内蒙古自治区'
this.sjtitle = "内蒙古自治区";
}
},
showPwd () {
showPwd() {
if (this.passwordType === "password") {
this.passwordType = "";
} else {
......@@ -154,20 +171,22 @@ export default {
this.$refs.password.focus();
});
},
handleLogin () {
handleLogin() {
this.loading = true;
doLogin({
username: this.loginForm.username,
password: this.loginForm.password
password: this.loginForm.password,
})
.then(res => {
res.USER.ip = res.ip
let navList = res.USER.permissions.split(',')
res.USER.permissions = navList
debugger
.then((res) => {
res.USER.ip = res.ip;
let navList = res.USER.permissions.split(",");
res.USER.permissions = navList;
debugger;
this.$store.commit("user/SET_LoginForm", this.loginForm);
if (JSON.stringify(res) !== "{}") {
Cookies.set('JSESSIONID', res.JSESSIONID, { expires: this._expires * (30 * 1000) });
Cookies.set("JSESSIONID", res.JSESSIONID, {
expires: this._expires * (30 * 1000),
});
window.localStorage.setItem("user", JSON.stringify(res.USER));
this.userInfo =
JSON.parse(window.localStorage.getItem("user")) || "";
......@@ -178,14 +197,14 @@ export default {
}
this.loading = false;
})
.catch(err => {
.catch((err) => {
this.loading = false;
console.log(err);
});
},
//初始化视频方法
initVideo () {
initVideo() {
let myPlayer = Video("myVideo", {
//确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
controls: false,
......@@ -193,11 +212,11 @@ export default {
//自动播放属性,muted:静音播放
autoplay: "muted",
//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
preload: "auto"
preload: "auto",
//设置视频播放器的显示宽度（以像素为单位）
});
}
}
},
},
};
</script>
......@@ -313,7 +332,8 @@ $light_gray: #eee;
width: 380px;
height: 260px;
position: absolute;
top: calc(50% - 150px);
top: 311px;
left: 1173px;
max-width: 100%;
padding-top: 15px;
overflow: hidden;
......@@ -336,11 +356,10 @@ $light_gray: #eee;
width: auto;
height: 562px;
position: absolute;
top: calc(50% - 290px);
right: 50%;
top: 312px;
left: 283px;
.zqcj_shce {
width: 793px;
height: 581px;
width: 522px;
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment