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

<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="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  :default-active="activeIndex" @select="handleSelect" mode="horizontal">
        <el-menu-item index="0">首页</el-menu-item>
        <el-menu-item index="1">通知中心</el-menu-item>
        <el-menu-item index="2">文件下载中心</el-menu-item>
      </el-menu>
    </div>

    <div class="back-width1" style="margin-top: 10px" v-if="activeIndex==0">
      <el-carousel>
        <el-carousel-item key="1">
          <img src="../assets/img/carousel/a.jpg" style="height: 100%; width: 100%">
        </el-carousel-item>
        <el-carousel-item key="2">
          <img src="../assets/img/carousel/b.jpg" style="height: 100%; width: 100%">
        </el-carousel-item>
        <el-carousel-item key="3">
          <img src="../assets/img/carousel/c.jpg" style="height: 100%; width: 100%">
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="components-container home-wrapper" v-if="activeIndex==0">
      <el-row>
        <el-col :span="24">
          <span style="color: black; font-size: large; font-weight: bold; padding-top: 20px">| 功能介绍</span>
        </el-col>
        <el-col :span="24">
          <span style="color: black; font-size: x-small; padding-top: 20px">| 大港油田供方管理信息系统功能介绍</span>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 0px">
        <el-col :span="12">
          <el-card :body-style="{ padding: '0px' }" style="margin-top: 0px">
            <img style="height: 200px" src="http://www.ihaier.com/public/web/images/hyqy9.png" class="image">
            <div style="padding: 14px;">
              <span style="font-weight: bold">准入申请</span>
              <div class="bottom clearfix">
                <span>物资类、技术服务类和基建类的准入申请</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card :body-style="{ padding: '0px' }"  style="margin-top: 0px">
            <img style="height: 200px" src="http://www.ihaier.com/public/web/images/hyqy7.png" class="image">
            <div style="padding: 14px;">
              <span style="font-weight: bold">增项申请</span>
              <div class="bottom clearfix">
                <span>物资类、技术服务类和基建类的增项申请</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card :body-style="{ padding: '0px' }">
            <img style="height: 200px" src="http://www.ihaier.com/public/web/images/hyqy6.png" class="image">
            <div style="padding: 14px;">
              <span style="font-weight: bold">年审</span>
              <div class="bottom clearfix">
                <span>物资类、技术服务类和基建类的年审</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card :body-style="{ padding: '0px' }" >
            <img style="height: 200px" src="http://www.ihaier.com/public/web/images/hyqy2.png" class="image">
            <div style="padding: 14px;">
              <span style="font-weight: bold">资质变更</span>
              <div class="bottom clearfix">
                <span>已入网企业的资质变更</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card :body-style="{ padding: '0px' }" >
            <img style="height: 200px" src="http://www.ihaier.com/public/web/images/hyqy7.png" class="image">
            <div style="padding: 14px;">
              <span style="font-weight: bold">信息变更</span>
              <div class="bottom clearfix">
                <span>已入网企业的信息变更</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card :body-style="{ padding: '0px' }" >
            <img style="height: 200px" src="http://www.ihaier.com/public/web/images/hyqy4.png" class="image">
            <div style="padding: 14px;">
              <span style="font-weight: bold">在线缴费</span>
              <div class="bottom clearfix">
                <span>通过此信息可在线缴费</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card :body-style="{ padding: '0px' }" style="margin-bottom: 20px">
            <img style="height: 200px" src="http://www.ihaier.com/public/web/images/hyqy5.png" class="image">
            <div style="padding: 14px;">
              <span style="font-weight: bold">业务查询</span>
              <div class="bottom clearfix">
                <span>报表及图表的查询功能</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card :body-style="{ padding: '0px' }" style="margin-bottom: 20px">
            <img style="height: 200px" src="http://www.ihaier.com/public/web/images/hyqy6.png" class="image">
            <div style="padding: 14px;">
              <span style="font-weight: bold">资质管理</span>
              <div class="bottom clearfix">
                <span>资质管理的统一管理功能</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="components-container home-wrapper" v-if="activeIndex==1">
      <el-table :data="noticeList"  style="width: 100%; height: 100vh;" @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>
    </div>

    <div class="components-container home-wrapper" v-if="activeIndex==2">
      <el-table :data="fileList" style="width: 100%;  height: 100vh;" @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>
    </div>
    <!--<div>
      <el-menu  :default-active="activeIndex" @select="handleSelect" mode="horizontal">
        <el-menu-item index="1">通知中心</el-menu-item>
        <el-menu-item index="2">文件下载中心</el-menu-item>
        &lt;!&ndash;<el-menu-item index="3">登录供方管理系统</el-menu-item>
        <el-menu-item index="4">账户注册</el-menu-item>&ndash;&gt;
      </el-menu>
    </div>

    <div class="components-container home-wrapper">

      <el-card style="width: 1004px;" class="box-card" v-if="activeIndex == 1">
        <div slot="header">
          <span>
            <i class="icon icon-table2"></i> 通知中心
          </span>
        </div>
        <el-table fit :data="noticeList"  style="width: 100%; height: 100vh;" @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>

      <el-card style="width: 1004px" class="box-card" v-if="activeIndex == 2">
        <div slot="header">
          <span>
            <i class="icon icon-table2"></i> 文件下载中心
          </span>
        </div>
        <el-table fit :data="fileList" style="width: 100%;  height: 100vh;" @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-footer1" style="margin-top: 10px;">
        <div class="foot-wrapper" style="height: 30px; background-color: transparent; color:#A9A9A9; padding-top: 10px; text-align: right">
          ©大港油田信息中心 版权所有
        </div>
      </footer>
    </div>

  </div>
</template>

<script>
import Sticky from '@/components/Sticky'

export default {
  layout () {
    return 'site'
  },
  name: 'StickyDemo',
  components: {
    Sticky
  },
  data () {
    return {
      noticeList: [], //通知列表
      fileList: [], //文档列表
      activeIndex: '0',
      activeName: 'first',
    }
  },

  created () {
    this.initNoticeListData()
    this.initFileListData()
  },

  methods: {
    handleSelect (key, keyPath) {
      if (key === '0' || key === '1' || key === '2') {
        this.activeIndex = key
      }
    },
    //获取通知列表
    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)
      }
    }
  }

}
</script>

<style lang="scss" scoped>
  @import '../assets/styles/base/variables';

  .components-container div {
    margin-top: 20px;
  }

  .top-wrapper {
    margin: 0px auto;
    width: 1004px;
    /*text-align: right;
    alignment: right;*/
    flex-direction: row;
  }
  .home-wrapper{
    margin:0px auto;
    width: 1004px;
    flex-direction: column;
  }

  .foot-wrapper{
    margin:0px auto;
    width: 1004px;
    display: flex;
    alignment: center;
    align-items: center;
    flex-direction: column;
  }

  .back-width1 {
    background-color: #2F79F6;
    margin: 0px auto;
    left: 0;
    right: 0;
    top: 20px;
    width: 1004px;
  }


  .login-footer1 {
    background-color: #34393D;
    font-size: 10px;
    clear: both;
    display: block;
    text-align: center;
    margin: 0px auto;
    bottom: 10px;
    width: 100%;
  }


  /*-----------*/
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>