cbwqpf/ruoyi-ui/src/views/home.vue

<template>
  <div style="background-color:#000928;width:100%;height:100%">
    <div class="header"></div>
    <div class="left_content">
      <div style="width:93%;height:100%;padding-left:5%">
        <div :class="{active:showTable == 8 && menuShow == 0}" @click="showTable = 8;menuShow= 0" class="icon_class">
          <div class="icon_content">
            <img class="icon_image" src="../assets/picture/home.png"/>
          </div>
          <div>
            <div class="icon_title">首页</div>
          </div>
        </div>

        <div :class="{active:showTable == 6 && menuShow == 0}" class="icon_class" @click="showTable = 6;menuShow= 0">
          <div class="icon_content">
            <img class="icon_image" src="../assets/picture/scb.png"/>
          </div>
          <div>
            <div class="icon_title">硫含量超标船舶管理</div>
          </div>
        </div>

        <div :class="{active:showTable == 1 && menuShow == 0}" class="icon_class" @click="showTable = 1;menuShow= 0">
          <div class="icon_content">
            <img class="icon_image" src="../assets/picture/exhaust.png"/>
          </div>
          <div>
            <div class="icon_title">船舶尾气黑烟抓拍</div>
          </div>
        </div>

        <div :class="{active:showTable == 4 && menuShow == 0}" class="icon_class" @click="showTable = 4;menuShow= 0">
          <div class="icon_content">
            <img class="icon_image" src="../assets/picture/statistics.png"/>
          </div>
          <div>
            <div class="icon_title">统计分析</div>
          </div>
        </div>
        <div class="userDiv" :class="{active:menuShow == 2}" @click="menuShow = 2">
          <el-popover
            placement="right"
            style="opacity: 0"
            trigger="click"
          >
            <div class="userContent">
              <div index="1" :class="{menu:showTable == 11}" target="showHere" class="menu_title" @click="showTable =11">
                <i class="el-icon-s-custom"></i>
                <span> 嗅探设备</span>
              </div>
              <div index="2" :class="{menu:showTable == 10}" class="menu_title" @click="showTable =10">
                <i class="el-icon-user"></i>
                <span> 光谱设备</span>
              </div>
              <div index="3" :class="{menu:showTable == 9}" class="menu_title" @click="showTable =9">
                <i class="el-icon-document"></i>
                <span> 黑烟设备</span>
              </div>
            </div>
            <div class="icon_class" slot="reference">
              <div class="icon_content">
                <img class="icon_image" src="../assets/picture/equipment.png"/>
              </div>
              <div>
                <div class="icon_title">设备管理</div>
              </div>
            </div>
          </el-popover>
        </div>

        <div class="userDiv" :class="{active:menuShow == 1}" @click="menuShow = 1">
          <el-popover
            placement="right"
            style="opacity: 0"
            trigger="click"
          >
            <div class="userContent">
              <div index="1" :class="{menu:showTable == 2}" class="menu_title" @click="showTable =2">
                <i class="el-icon-s-custom"></i>
                <span> 用户管理</span>
              </div>
              <div index="2" :class="{menu:showTable == 7}" class="menu_title" @click="showTable =7">
                <i class="el-icon-user"></i>
                <span> 角色管理</span>
              </div>
              <div index="3" :class="{menu:showTable == 3}" class="menu_title" @click="showTable =3">
                <i class="el-icon-document"></i>
                <span> 机构管理</span>
              </div>
              <div index="4" :class="{menu:showTable == 5}" class="menu_title" @click="showTable =5">
                <i class="el-icon-setting"></i>
                <span> 登录日志</span>
              </div>
            </div>
            <div class="icon_class" slot="reference">
              <div class="icon_content">
                <img class="icon_image" src="../assets/picture/user.png"/>
              </div>
              <div>
                <div class="icon_title">用户管理</div>
              </div>
            </div>
          </el-popover>
        </div>
      </div>
    </div>

    <div class="center_content">
      <xtTable v-show="showTable == 1"></xtTable>
      <userTable v-if="showTable==2"></userTable>
      <deptTable v-if="showTable==3"></deptTable>
      <statisticalTable v-if="showTable==4"></statisticalTable>
      <logininforTable v-if="showTable==5"></logininforTable>
      <liuTable v-if="showTable==6"></liuTable>
      <roleTable v-if="showTable==7"></roleTable>
      <homeTable v-if="showTable==8"></homeTable>
      <!-- 9黑烟；10光谱http://101.133.159.237:8087/device.html?opt=1；11嗅探http://198.17.188.2:81/index.html?opt=1 -->
      <iframe style="height:350rem;width:100%" v-show="showTable==9" marginwidth="0" marginheight="0" vspace="0"
              hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" frameborder="0" name="showHere"
              src="http://198.17.188.6:8091/?opt=1"
      ></iframe>
      <iframe style="height:350rem;width:100%" v-show="showTable==10" marginwidth="0" marginheight="0" vspace="0"
              hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" frameborder="0" name="showHere"
              src="http://198.17.25.32:9001/device.html?opt=1"
      ></iframe>
      <iframe style="height:350rem;width:100%" v-show="showTable==11" marginwidth="0" marginheight="0" vspace="0"
              hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" frameborder="0" name="showHere"
              src="http://198.17.25.32:9011/index.html?opt=1"
      ></iframe>
    </div>


    <!-- <div v-show="showUserMenu" class="userContent">
              <div index="1" class="menu_title" @click="showTable =2">
             <i class="el-icon-s-custom"></i>
             <span>用户管理</span>
             </div>
             <div index="2" class="menu_title" @click="showTable =2">
             <i class="el-icon-user"></i>
             <span>角色管理</span>
             </div>
             <div index="3" class="menu_title" @click="showTable =3">
             <i class="el-icon-document"></i>
             <span>机构管理</span>
             </div>
             <div index="4" class="menu_title" @click="showTable =5">
             <i class="el-icon-setting"></i>
             <span>登录日志</span>
             </div>
    </div> -->
  </div>
</template>

<script>
import xtTable from './components/table/xtTable.vue'
import userTable from './components/table/userTable.vue'
import deptTable from './components/table/deptTable.vue'
import roleTable from './components/table/roleTable.vue'
import statisticalTable from './components/table/statisticalTable.vue'
import logininforTable from './monitor/logininfor/index.vue'
import liuTable from './components/table/liuTable.vue'
import homeTable from './components/table/homeTable.vue'

export default {
  name: 'index',
  components: {
    xtTable,
    userTable,
    deptTable,
    roleTable,
    statisticalTable,
    logininforTable,
    liuTable,
    homeTable		//在此处注册
  },
  data() {
    return {
      // 版本号
      version: '3.6.0',
      showUserMenu: false,
      showTable: 8,
      menuShow: 0
    }
  },
  methods: {
    goTarget(href) {
      window.open(href, '_blank')
    },
    userClick() {
      this.showUserMenu = true
    },
    clickMenu(event) {
      console.log(1111)
      console.log(event)
    }
  }
}
</script>

<style lang="scss">
.header {
  height: 45rem;
  width: 100%;
  background: url("../assets/picture/title.png") no-repeat;
  background-size: cover;
}

.left_content {
  height: 350rem;
  width: 87rem;
  //    src\assets\picture\bg_menu_1.png
  background: url("../assets/picture/bg_menu_1.png") no-repeat;
  background-size: 100% 100%;
  margin-left: 10rem;
  padding-top: 2rem;
  float: left
}

.icon_content {
  text-align: center;
}

.icon_image {
  height: 27rem;
  width: 27rem;
}

.icon_title {
  padding-top: 3rem;
  font-size: 7rem;
  color: white;
  text-align: center
}

.center_content {
  background-color: white;
  width: 670rem;
  height: 350rem;
  float: right;
  margin-right: 20rem
}

.icon_class {
  width: 100%;
  height: 55rem;
  padding-top: 10rem;
}

.userContent {
  //   position: absolute;
  //   z-index:1002;
  //   top: 315rem;
  //   left: 95rem;
  width: 45rem;
  // height: 50rem;
  //   background-color:rgba(0,0,139,1);
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.menu_title {
  color: #fff;
  font-size: 6.4rem;
  margin-top: 2rem;
  padding-left: 5rem;
  line-height: 12rem;
}

.menu_title:hover {
  cursor: pointer;
}

.active {
  background-color: #041446;
}

.menu {
  color: #00ffff
}

.el-popover {
  background-color: blue;
  background: url("../assets/picture/bg_zcd.png") no-repeat;
  background-size: 100% 100%;
  border: 0px;
  min-width: 0;
}


// .popper__arrow::after{
//    /*el-popover上边三角表层的颜色---也就是视觉上的角*/
//   display: none
// }

//  .popper__arrow{
//    /*el-popover上边三角表层的颜色---也就是视觉上的角*/
//   display: none
// }
.el-popper .popper__arrow, .el-popper .popper__arrow::after {
  display: none
}

// .has-gutter{
//      //  background: linear-gradient(blue, pink);
//      background-color: #00ffff
// }

</style>