通知登录页面

src/dashoo.cn/frontend_web/src/components/Sticky/index.vue

@@ -0,0 +1,142 @@
+<template>
+  <div :style="{height:height+'px',zIndex:zIndex}">
+    <div :class="className" :style="{top:stickyTop+'px',zIndex:zIndex,position:position,width:width,height:height+'px'}">
+      <slot>
+        <div>sticky</div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Sticky',
+  props: {
+    stickyTop: {
+      type: Number,
+      default: 0
+    },
+    zIndex: {
+      type: Number,
+      default: 1
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      active: false,
+      position: '',
+      width: undefined,
+      height: undefined,
+      isSticky: false
+    }
+  },
+  mounted() {
+    this.height = this.$el.getBoundingClientRect().height
+    window.addEventListener('scroll', this.handleScroll)
+    window.addEventListener('resize', this.handleReize)
+  },
+  activated() {
+    this.handleScroll()
+  },
+  destroyed() {
+    window.removeEventListener('scroll', this.handleScroll)
+    window.removeEventListener('resize', this.handleReize)
+  },
+  methods: {
+    sticky() {
+      if (this.active) {
+        return
+      }
+      this.position = 'fixed'
+      this.active = true
+      this.width = this.width + 'px'
+      this.isSticky = true
+    },
+    handleReset() {
+      if (!this.active) {
+        return
+      }
+      this.reset()
+    },
+    reset() {
+      this.position = ''
+      this.width = 'auto'
+      this.active = false
+      this.isSticky = false
+    },
+    handleScroll() {
+      const width = this.$el.getBoundingClientRect().width
+      this.width = width || 'auto'
+      const offsetTop = this.$el.getBoundingClientRect().top
+      if (offsetTop < this.stickyTop) {
+        this.sticky()
+        return
+      }
+      this.handleReset()
+    },
+    handleReize() {
+      if (this.isSticky) {
+        this.width = this.$el.getBoundingClientRect().width + 'px'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .components-container div {
+    margin: 10px;
+  }
+
+  .time-container {
+    display: inline-block;
+  }
+
+  .sub-navbar {
+    height: 50px;
+    line-height: 50px;
+    position: relative;
+    width: 100%;
+    text-align: right;
+    padding-right: 20px;
+    transition: 600ms ease position;
+    background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
+
+    .subtitle {
+      font-size: 20px;
+      color: #fff;
+    }
+    &.draft {
+       background: #d0d0d0;
+    }
+    &.deleted {
+       background: #d0d0d0;
+    }
+  }
+
+  .sub-navbar2 {
+    height: 50px;
+    line-height: 50px;
+    position: relative;
+    width: 100%;
+    margin:0px auto;
+    transition: 600ms ease position;
+    background-color: #004EA2; /*#EEF1F6*/
+
+    .subtitle {
+      font-size: 20px;
+      color: #fff;
+    }
+    &.draft {
+       background: #d0d0d0;
+     }
+    &.deleted {
+       background: #d0d0d0;
+     }
+  }
+
+</style>

src/dashoo.cn/frontend_web/src/layouts/site.vue

@@ -0,0 +1,8 @@
+<template>
+  <nuxt  style="height: 100%; background-color: #EEF1F6;"></nuxt>
+</template>
+
+<script>
+  export default {
+  }
+</script>

src/dashoo.cn/frontend_web/src/middleware/check-auth.js

@@ -19,7 +19,10 @@ export default function ({ isServer, store, req, route, redirect }) {
   if (route.name == 'examples-activity') {
     return
   }
+  if (route.name == 'logingf') {
+    return
+  }
   if (!store.getters['auth/loggedIn']) {
     return redirect('/login')
   }
-}
+}

src/dashoo.cn/frontend_web/src/pages/login.vue

@@ -1,223 +1,318 @@
 <template>
+  <div style="width: 100%; overflow-y: auto" >
+    <sticky class-name="sub-navbar2">
+      <div class="top-wrapper">
+        <div style="margin-top: 5px; float: left;">
+          <router-link to="/">
+            <img src="../assets/img/logo_dagang2.png" style="height:35px;" />
+          </router-link>
+        </div>
 
-  <div style="height: calc(100vh); width: 100%; background-color:#FFFFFF" >
-    <img src="../assets/img/title_gongfang.png" style="height:60px; margin-top: 20px;margin-left: 100px;"  >
-    <div class="back-width">
-      <div class="login-body">
-        <section class="login">
-          <!--<header class="login-header">
-            <h1 style="text-align:center;margin-top:70px;margin-bottom:40px;"><router-link to="/"><img src="../assets/img/logo.png" style="height:80px;"></router-link></h1>
-            <el-alert v-if="error" :title="error.title" type="warning" :description="error.message" show-icon/>
-          </header>-->
-          <el-form class="login-form" auto-complete="off" :model="model" :rules="rules" ref="user" label-position="top">
+        <div style="float: right;">
+          <router-link :to="'/signup'">
+            <el-button type="text" round>没有账户？请注册</el-button>
+          </router-link>
+
+          <router-link :to="'/logingf'">
+            <el-button type="info" size="small" round>登录供方管理系统</el-button>
+          </router-link>
+
+        </div>
+      </div>
+    </sticky>
+
+    <div>
+      <el-menu class="el-menu-demo" mode="horizontal"> <!--@select="handleSelect"-->
+        <el-menu-item index="1">通知中心</el-menu-item>
+        <el-menu-item index="2">通知中心</el-menu-item>
+        <el-menu-item index="3">登录供方管理系统</el-menu-item>
+        <el-menu-item index="4">账户注册</el-menu-item>
+      </el-menu>
+    </div>
+
+    <div class="back-width1" style="margin-top: 20px; ">
+      <div class="login-body1">
+        <!--<section class="login">
+          &lt;!&ndash;<el-form class="login-form" auto-complete="off" ref="user" label-position="top">
             <h2 class="heading">登录</h2>
-            <el-form-item label="用户名" prop="username">
-              <el-input type="text" v-model="model.username" placeholder="请输入用户名">
-                <el-select v-model="loginMode" slot="append" placeholder="登录类型" style="width: 110px;">
-                  <el-option label="普通账户" :value="1"></el-option>
-                  <el-option label="PTR认证" :value="2"></el-option>
-                </el-select>
-              </el-input>
-            </el-form-item>
-            <el-form-item label="密码" prop="password">
-              <el-input type="password" v-model="model.password" placeholder="请输入密码" @keyup.enter.native="login()" />
-            </el-form-item>
-            <el-button type="primary" :loading="loading" @click="login()">{{ loading ? '登录中...' : '登录' }}</el-button>
-          </el-form>
-
-        </section>
+
+            <el-button type="primary" :loading="loading">登录</el-button>
+          </el-form>&ndash;&gt;
+          <el-row style="margin: 0px auto;">
+            <el-col :span="12"><el-button type="info" round>我是供应商</el-button></el-col>
+            <el-col :span="12"><el-button type="primary" plain round>我是管理员</el-button></el-col>
+          </el-row>
+
+        </section>-->
+        <el-carousel indicator-position="outside">
+          <el-carousel-item key="1">
+            <div class="show-img"></div>
+          </el-carousel-item>
+          <el-carousel-item key="2">
+            <div class="show-img"></div>
+          </el-carousel-item>
+          <el-carousel-item key="3">
+            <div class="show-img"></div>
+          </el-carousel-item>
+        </el-carousel>
       </div>
     </div>
-    <div >
-      <footer class="login-footer" style="color:#A9A9A9">
-        ©大港油田信息中心 版权所有
+
+    <div class="components-container home-wrapper">
+      <el-card style="width: 1400px; background-color: #F1F3F7">
+        <el-table fit :data="noticeList"  style="width: 100%; background-color: #F1F3F7" max-height="550" >
+          <el-table-column prop="Name" label="通知标题">
+            <template slot-scope="scope">
+              <i class="el-icon-caret-right"></i>
+              <span style="margin-left: 5px">{{ scope.row.Name }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="CreateOn" label="时间" width="160">
+            <template slot-scope="scope">
+              {{ jstimehandle(scope.row.CreateOn+'') }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+
+      <el-card style="margin: 10px; width: 1400px">
+        <el-table fit :data="fileList" style="width: 100%;" height="550" @row-click="DownloadFile">
+          <el-table-column prop="Name" label="文件名">
+            <template slot-scope="scope">
+              <i class="el-icon-caret-right"></i>
+              <a style="margin-left: 5px">{{ scope.row.Name }}</a>
+            </template>
+          </el-table-column>
+          <el-table-column prop="CreateOn" label="时间" width="141">
+            <template slot-scope="scope">
+              {{ jstimehandle(scope.row.CreateOn+'') }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </div>
+
+    <div>
+      <footer class="login-footer" style="margin-top: 10px;">
+        <div class="home-wrapper" style="height: 30px; background-color: transparent; color:#A9A9A9; padding-top: 10px; text-align: right">
+          ©大港油田信息中心 版权所有
+        </div>
       </footer>
     </div>
+
   </div>
 </template>
 
 <script>
-  import Vue from 'vue'
-  import Component from 'class-component'
-  @Component({
-    data() {
-      // form model
-      // TODO: remove default values
-      const model = {
-        username: '',
-        password: ''
-      }
+import Sticky from '@/components/Sticky'
 
-      // form validate rules
-      const rules = {
-        username: [{
-          required: true,
-          message: '请输入用户名'
-        }],
-        password: [{
-          required: true,
-          message: '请输入密码'
-        }]
-      }
+export default {
+  layout () {
+    return 'site'
+  },
+  name: 'StickyDemo',
+  components: { Sticky },
+  data () {
+    return {
+      noticeList: [], //通知列表
+      fileList: [], //文档列表
+    }
+  },
+
+  created () {
+    this.initNoticeListData()
+    this.initFileListData()
+  },
 
-      return {
-        loginMode: 1,
-        model: model,
-        rules: rules,
-        error: null,
-        loading: false
+  methods: {
+    //获取通知列表
+    initNoticeListData() {
+      let _this = this
+      //传递列名
+      const params = {
+        colName: "NoticeTab"
+      }
+      _this.$axios.get("/document/getdocumentnameandtime", {params})
+        .then(function (response) {
+          _this.noticeList = response.data
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+    },
+    //获取文件列表
+    initFileListData() {
+      let _this = this
+      //传递列名
+      const params = {
+        colName: "DocTab"
+      }
+      _this.$axios.get("/document/getdocumentnameandtime", {params})
+        .then(function (response) {
+          _this.fileList = response.data
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+    },
+    //下载文件
+    DownloadFile(row){
+      let val = row.FileURL
+      let urlArr = val.split('|')
+      location.href = "http://" + urlArr[0]
+    },
+    //格式化时间
+    jstimehandle(val) {
+      if (val === '') {
+        return '----'
+      } else if (val === '0001-01-01T08:00:00+08:00') {
+        return '----'
+      } else if (val === '5000-01-01T23:59:59+08:00') {
+        return '永久'
+      } else {
+        val = val.replace('T', ' ')
+        return val.substring(0, 10)
       }
-    }
-  })
-  export default class Login extends Vue {
-    layout() {
-      return 'empty'
-    }
-    login() {
-      this.logging = true
-      this.$refs.user.validate(async (valid) => {
-        try {
-          if (valid) {
-            await this.$store.dispatch('auth/login', {
-              fields: {
-                username: this.model.username.replace(/(^\s*)|(\s*$)/g, ""),
-                password: this.model.password.replace(/(^\s*)|(\s*$)/g, "")
-              }
-            })
-            if (process.env.appclient == 'lims') {
-              this.$router.push(this.$route.query.page || '/')
-            } else if (process.env.appclient == 'cellbank') {
-              this.$router.push(this.$route.query.page || '/indexdqm')
-            } else {
-              this.$router.push(this.$route.query.page || '/')
-            }
-          }
-        } catch (e) {
-          // this.$message.warning(e.message)
-          this.$message.warning('账号或密码错误')
-        } finally {
-          this.logging = false
-        }
-      })
-    }
-    logout() {
-      this.$store.dispatch('logout')
     }
   }
 
+}
 </script>
 
-<style lang="scss">
-  @import '../assets/styles/base/variables';
-
-  .back-width {
-    background-color: #2F79F6;
-    position: fixed;
-    margin: auto;
-    left: 0;
-    right: 0;
-    top: 88px;
-    width: 100%;
-    height: 550px;
-  }
+<style scoped>
+.components-container div {
+  margin: 10px;
+}
 
-  .login-body {
-
-    background: url("../assets/img/tian.png") no-repeat left 50%;
-    font-family: 'Open Sans', sans-serif;
-    background-color: #2469E8;
-    background-size: cover;
-
-    /*background-size: cover;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;*/
-    /*min-height: 1050px;*/
-
-    position: absolute;
-
-    margin: auto;
-    left: -400px;
-    right: 0;
-    bottom: 0;
-    width: 899px;
-    height: 550px;
-    /*
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;*/
-  }
+.time-container {
+  display: inline-block;
+}
 
-  .login-footer {
-    font-size: 10px;
-    clear: both;
-    display: block;
-    text-align: center;
-    margin: 0px auto;
-    position: absolute;
-    bottom: 10px;
-    width: 100%;
-
-    a {
-      color: $brand-color;
-    }
-  }
+.top-wrapper {
+  margin: 0px auto;
+  width: 1400px;
+  /*text-align: right;
+  alignment: right;*/
+  flex-direction: row;
+}
+.home-wrapper{
+  margin:0px auto;
+  width: 1400px;
+  display: flex;
+  alignment: center;
+  align-items: center;
+  flex-direction: column;
+}
 
-  .login {
-    /*flex: 1;
-    width: 100%;*/
-    position: relative;
-    max-width: 22rem;
-    top: 60px;
-    left: 850px;
-    font-size: 0.875rem;
-    opacity: 0.9;
-
-    &-header {
-      margin-bottom: 1rem;
-
-      .brand {
-        margin: 4.5rem 0 3.5rem;
-        text-align: center;
-        letter-spacing: 0.125rem;
-
-        a {
-          margin: 0;
-          color: $brand-color;
-          font: 300 3rem sans-serif;
-
-          &:hover {
-            color: $brand-hover-color;
-            text-shadow: 0 0 1rem $brand-hover-color;
-          }
-        }
-      }
-    }
+@import '../assets/styles/base/variables';
 
-    &-form {
-      margin-bottom: 2.5rem;
-      padding: 1.875rem 1.25rem;
-      background: $login-form-background;
-      color: $login-form-color;
+.back-width1 {
+  background-color: #2F79F6;
+  margin: 0px auto;
+  left: 0;
+  right: 0;
+  top: 20px;
+  width: 1400px;
+  /*width: 100%;*/
+  height: 350px;
+}
 
-      .heading {
-        margin: 0 0 1rem;
-        font-weight: 400;
-        font-size: 1.5rem;
-      }
+.show-img {
+  background: url("../assets/img/tian.png") no-repeat left 50%;
+  font-family: 'Open Sans', sans-serif;
+  /*background-color: #2469E8;*/
+  background-size: cover;
+  margin: auto;
+  width: 1400px;
+  height: 350px;
+}
 
-      .el-button {
-        margin-top: 0.5rem;
-        width: 100%;
-      }
-    }
+.login-body1 {
+  /*background-size: cover;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;*/
+  /*min-height: 1050px;*/
+  background-color: #EEF1F6;
+  margin: auto;
+  width: 1400px;
+  height: 350px;
+  /*
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;*/
+}
 
+.login-footer {
+  background-color: #34393D;
+  font-size: 10px;
+  clear: both;
+  display: block;
+  text-align: center;
+  margin: 0px auto;
+  bottom: 10px;
+  width: 100%;
 
-  }
+a {
+  color: $brand-color;
+}
+}
 
-  .nuxt-progress {
-    display: none;
-  }
+.login {
+  /*flex: 1;
+  width: 100%;*/
+  position: relative;
+  max-width: 22rem;
+  top: 230px;
+  left: 50px;
+  font-size: 0.875rem;
+  opacity: 0.9;
+
+&-header {
+   margin-bottom: 1rem;
+
+.brand {
+  margin: 4.5rem 0 3.5rem;
+  text-align: center;
+  letter-spacing: 0.125rem;
+
+a {
+  margin: 0;
+  color: $brand-color;
+  font: 300 3rem sans-serif;
+
+&:hover {
+   color: $brand-hover-color;
+   text-shadow: 0 0 1rem $brand-hover-color;
+ }
+}
+}
+}
+
+&-form {
+   margin-bottom: 2.5rem;
+   padding: 1.875rem 1.25rem;
+   background: $login-form-background;
+   color: $login-form-color;
+
+.heading {
+  margin: 0 0 1rem;
+  font-weight: 400;
+  font-size: 1.5rem;
+}
+
+.el-button {
+  margin-top: 0.5rem;
+  width: 100%;
+}
+}
+
+
+}
+
+.nuxt-progress {
+  display: none;
+}
 
 </style>

src/dashoo.cn/frontend_web/src/pages/logingf.vue

@@ -0,0 +1,223 @@
+<template>
+
+  <div style="height: calc(100vh); width: 100%; background-color:#FFFFFF" >
+    <img src="../assets/img/title_gongfang.png" style="height:60px; margin-top: 20px;margin-left: 100px;"  >
+    <div class="back-width">
+      <div class="login-body">
+        <section class="login">
+          <!--<header class="login-header">
+            <h1 style="text-align:center;margin-top:70px;margin-bottom:40px;"><router-link to="/"><img src="../assets/img/logo.png" style="height:80px;"></router-link></h1>
+            <el-alert v-if="error" :title="error.title" type="warning" :description="error.message" show-icon/>
+          </header>-->
+          <el-form class="login-form" auto-complete="off" :model="model" :rules="rules" ref="user" label-position="top">
+            <h2 class="heading">登录</h2>
+            <el-form-item label="用户名" prop="username">
+              <el-input type="text" v-model="model.username" placeholder="请输入用户名">
+                <el-select v-model="loginMode" slot="append" placeholder="登录类型" style="width: 110px;">
+                  <el-option label="普通账户" :value="1"></el-option>
+                  <el-option label="PTR认证" :value="2"></el-option>
+                </el-select>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="密码" prop="password">
+              <el-input type="password" v-model="model.password" placeholder="请输入密码" @keyup.enter.native="login()" />
+            </el-form-item>
+            <el-button type="primary" :loading="loading" @click="login()">{{ loading ? '登录中...' : '登录' }}</el-button>
+          </el-form>
+
+        </section>
+      </div>
+    </div>
+    <div >
+      <footer class="login-footer" style="color:#A9A9A9">
+        ©大港油田信息中心 版权所有
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Vue from 'vue'
+  import Component from 'class-component'
+  @Component({
+    data() {
+      // form model
+      // TODO: remove default values
+      const model = {
+        username: '',
+        password: ''
+      }
+
+      // form validate rules
+      const rules = {
+        username: [{
+          required: true,
+          message: '请输入用户名'
+        }],
+        password: [{
+          required: true,
+          message: '请输入密码'
+        }]
+      }
+
+      return {
+        loginMode: 1,
+        model: model,
+        rules: rules,
+        error: null,
+        loading: false
+      }
+    }
+  })
+  export default class Logingf extends Vue {
+    layout() {
+      return 'empty'
+    }
+    login() {
+      this.logging = true
+      this.$refs.user.validate(async (valid) => {
+        try {
+          if (valid) {
+            await this.$store.dispatch('auth/login', {
+              fields: {
+                username: this.model.username.replace(/(^\s*)|(\s*$)/g, ""),
+                password: this.model.password.replace(/(^\s*)|(\s*$)/g, "")
+              }
+            })
+            if (process.env.appclient == 'lims') {
+              this.$router.push(this.$route.query.page || '/')
+            } else if (process.env.appclient == 'cellbank') {
+              this.$router.push(this.$route.query.page || '/indexdqm')
+            } else {
+              this.$router.push(this.$route.query.page || '/')
+            }
+          }
+        } catch (e) {
+          // this.$message.warning(e.message)
+          this.$message.warning('账号或密码错误')
+        } finally {
+          this.logging = false
+        }
+      })
+    }
+    logout() {
+      this.$store.dispatch('logout')
+    }
+  }
+
+</script>
+
+<style lang="scss">
+  @import '../assets/styles/base/variables';
+
+  .back-width {
+    background-color: #2F79F6;
+    position: fixed;
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: 88px;
+    width: 100%;
+    height: 550px;
+  }
+
+  .login-body {
+
+    background: url("../assets/img/tian.png") no-repeat left 50%;
+    font-family: 'Open Sans', sans-serif;
+    background-color: #2469E8;
+    background-size: cover;
+
+    /*background-size: cover;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;*/
+    /*min-height: 1050px;*/
+
+    position: absolute;
+
+    margin: auto;
+    left: -400px;
+    right: 0;
+    bottom: 0;
+    width: 899px;
+    height: 550px;
+    /*
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;*/
+  }
+
+  .login-footer {
+    font-size: 10px;
+    clear: both;
+    display: block;
+    text-align: center;
+    margin: 0px auto;
+    position: absolute;
+    bottom: 10px;
+    width: 100%;
+
+    a {
+      color: $brand-color;
+    }
+  }
+
+  .login {
+    /*flex: 1;
+    width: 100%;*/
+    position: relative;
+    max-width: 22rem;
+    top: 60px;
+    left: 850px;
+    font-size: 0.875rem;
+    opacity: 0.9;
+
+    &-header {
+      margin-bottom: 1rem;
+
+      .brand {
+        margin: 4.5rem 0 3.5rem;
+        text-align: center;
+        letter-spacing: 0.125rem;
+
+        a {
+          margin: 0;
+          color: $brand-color;
+          font: 300 3rem sans-serif;
+
+          &:hover {
+            color: $brand-hover-color;
+            text-shadow: 0 0 1rem $brand-hover-color;
+          }
+        }
+      }
+    }
+
+    &-form {
+      margin-bottom: 2.5rem;
+      padding: 1.875rem 1.25rem;
+      background: $login-form-background;
+      color: $login-form-color;
+
+      .heading {
+        margin: 0 0 1rem;
+        font-weight: 400;
+        font-size: 1.5rem;
+      }
+
+      .el-button {
+        margin-top: 0.5rem;
+        width: 100%;
+      }
+    }
+
+
+  }
+
+  .nuxt-progress {
+    display: none;
+  }
+
+</style>