蔡嘉凯

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/components/msg.vue

+<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

+<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/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;
       }
     }
   }