左侧

lixuliang

2024-07-30 0c74e7ac7f00ae90077374d62bc3a7a499b5b7b8

左侧

 src/components/index.vue

@@ -28,9 +28,9 @@
          </li>
        </ul>
      </div>
      <div v-if="layout === 'two-columns'" class="two-columns">
      <div v-show="layout === 'two-columns'" class="two-columns">
        <div class="contentTop">
          <div class="left-content wh1">
          <div class="left-content wh1" @click="jumpTo('XX概念开发与验证平台')">
            <div class="leftTopBox">
              <img src="../assets/img/index/1.png" alt />
              <img src="../assets/img/index/右双箭头.png" alt />
@@ -42,7 +42,7 @@
              <img src="../assets/img/index/icon.png" alt />
            </div>
          </div>
          <div class="right-content wh1">
          <div class="right-content wh1" @click="jumpTo('XX体系设计与评估平台')">
            <div class="leftTopBox">
              <img src="../assets/img/index/2.png" alt />
              <img src="../assets/img/index/右双箭头.png" alt />
@@ -56,7 +56,7 @@
          </div>
        </div>
        <div class="contentMid">
          <div class="left-content wh1">
          <div class="left-content wh1" @click="jumpTo('XX方案推演与分析平台')">
            <div class="leftTopBox">
              <img src="../assets/img/index/3.png" alt />
              <img src="../assets/img/index/右双箭头.png" alt />
@@ -68,7 +68,7 @@
              <img src="../assets/img/index/icon.png" alt />
            </div>
          </div>
          <div class="right-content wh1">
          <div class="right-content wh1" @click="jumpTo('XX创新与XX运用研究平台')">
            <div class="leftTopBox">
              <img src="../assets/img/index/4.png" alt />
              <img src="../assets/img/index/右双箭头.png" alt />
@@ -82,7 +82,7 @@
          </div>
        </div>
        <div class="contentBot">
          <div class="left-content wh1">
          <div class="left-content wh1" @click="jumpTo('XX综合集成研讨厅')">
            <div class="imgL">
              <img src="../assets/img/index/指挥体系.png" alt />
            </div>
@@ -98,20 +98,25 @@
            <h2>支撑分系统</h2>
          </div>
          <div class="right-content">
            <div class="industryMes wh2" v-for="(item, index) in mesList" :key="index">
            <div
              class="industryMes wh2"
              v-for="(item, index) in mesList"
              :key="index"
              @click="jumpTo(item.name)"
            >
              <img :src="item.src" class="topImg" alt />
              <h3 class="topMes">{{ item.name }}</h3>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="three-columns">
        <div class="infoBox"> 
           <!-- <mainIfo></mainIfo> -->
           </div>
      <div v-show="layout === 'three-columns'" class="three-columns">
        <div class="infoBox">
          <mainIfo></mainIfo>
        </div>
        <div class="mainBox">
          <div class="contentTop">
            <div class="left-content wh1">
            <div class="left-content wh1" @click="jumpTo('XX综合集成研讨厅')">
              <div class="leftTopBox">
                <img src="../assets/img/index/1.png" alt />
                <img src="../assets/img/index/右双箭头.png" alt />
@@ -123,7 +128,7 @@
                <img src="../assets/img/index/icon.png" alt />
              </div>
            </div>
            <div class="right-content wh1">
            <div class="right-content wh1" @click="jumpTo('XX综合集成研讨厅')">
              <div class="leftTopBox">
                <img src="../assets/img/index/2.png" alt />
                <img src="../assets/img/index/右双箭头.png" alt />
@@ -137,7 +142,7 @@
            </div>
          </div>
          <div class="contentMid">
            <div class="left-content wh1">
            <div class="left-content wh1" @click="jumpTo('XX综合集成研讨厅')">
              <div class="leftTopBox">
                <img src="../assets/img/index/3.png" alt />
                <img src="../assets/img/index/右双箭头.png" alt />
@@ -149,7 +154,7 @@
                <img src="../assets/img/index/icon.png" alt />
              </div>
            </div>
            <div class="right-content wh1">
            <div class="right-content wh1" @click="jumpTo('XX综合集成研讨厅')">
              <div class="leftTopBox">
                <img src="../assets/img/index/4.png" alt />
                <img src="../assets/img/index/右双箭头.png" alt />
@@ -163,7 +168,7 @@
            </div>
          </div>
          <div class="contentBot">
            <div class="left-content wh1">
            <div class="left-content wh1" @click="jumpTo('XX综合集成研讨厅')">
              <div class="textBox">
                <h1>XX综合集成研讨厅</h1>
              </div>
@@ -180,7 +185,12 @@
              <h2>支撑分系统</h2>
            </div>
            <div class="right-content">
              <div class="industryMes wh2" v-for="(item, index) in mesList2" :key="index">
              <div
                class="industryMes wh2"
                v-for="(item, index) in mesList2"
                :key="index"
                @click="jumpTo(item.name)"
              >
                <img :src="item.src" class="topImg" alt />
                <h3 class="topMes">{{ item.name }}</h3>
              </div>
@@ -193,11 +203,11 @@
</template>

<script>
// import mainIfo from './mainIfo.vue';
import mainIfo from "./mainIfo.vue";
export default {
  name: "index",

//  components: { mainIfo },
  components: { mainIfo },
  data() {
    return {
      topTitle: "XX实验条件建设",
@@ -245,13 +255,52 @@
      ]
    };
  },
 

  methods: {
    toggleLayout() {
      this.layout =
        this.layout === "three-columns" ? "two-columns" : "three-columns";
    },
   
    jumpTo(name) {
      switch (name) {
        case "XX概念开发与验证平台":
          console.log(name);
          // window.open("");
          break;
        case "XX体系设计与评估平台":
          console.log(name);
          // window.open("");
          break;
        case "XX方案推演与分析平台":
          console.log(name);
          // window.open("");
          break;
        case "XX创新与XX运用研究平台":
          // window.open("");
          console.log(name);
          break;
        case "XX综合集成研讨厅":
          // window.open("");
          console.log(name);
          break;
        case "态势显示分系统":
          // window.open("");
          console.log(name);
          break;
        case "数据管理分系统":
          // window.open("");
          console.log(name);
          break;
        case "装备库":
          // window.open("");
          console.log(name);
          break;
        case "仿真资源管理分系统":
          // window.open("");
          console.log(name);
          break;
      }
    }
  }
};
</script>
@@ -342,8 +391,7 @@
    align-items: center;
    justify-content: space-evenly;
  }
  .contentTop,
  .contentMid {
  .contentTop {
    .left-content,
    .right-content {
      background: url("../assets/img/index//boxBg.png") center center/100% 100%
@@ -389,6 +437,99 @@
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .contentMid .left-content {
    background: url("../assets/img/index//boxBg.png") center center/100% 100%
      no-repeat;
    padding: 30px;
    height: 90%;
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    box-sizing: border-box;
    position: relative;
    .leftTopBox {
      position: absolute;
      top: 20px;
      left: 40px;
      width: 100px;
      height: 30px;
      background: url("../assets/img/index//arrow.png") center center/100% 100%
        no-repeat;
      display: flex;
      justify-content: space-around;
      img {
        display: block;
        height: 100%;
      }
    }
    .textBox {
      // background-color: #fff;

      h1 {
        font-size: 42px;
        width: 6em;
        font-family: AdobeHeitiStd-Regular;
        color: #fff;
      }
    }
    .imgBox {
      width: 180px;
      height: 180px;
      // background-color: #bfa;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .contentMid .right-content {
    background: url("../assets/img/index//boxBg.png") center center/100% 100%
      no-repeat;
    padding: 30px;
    height: 90%;
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    box-sizing: border-box;
    position: relative;
    .leftTopBox {
      position: absolute;
      top: 20px;
      left: 40px;
      width: 100px;
      height: 30px;
      background: url("../assets/img/index//arrow.png") center center/100% 100%
        no-repeat;
      display: flex;
      justify-content: space-around;
      img {
        display: block;
        height: 100%;
      }
    }
    .textBox {
      // background-color: #fff;

      h1 {
        font-size: 42px;
        width: 6em;
        font-family: AdobeHeitiStd-Regular;
        color: #fff;
      }
    }
    .imgBox {
      width: 180px;
      height: 180px;
      // background-color: #bfa;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
@@ -497,10 +638,17 @@
  justify-content: space-around;
  overflow: auto;
  .infoBox {
    width: 25%;
    width: 26%;
    height: 100%;
    // background-color: #bfa;
  }
  .mainBox {
    width: 70%;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
    // background-color: #bfa;
    width: 74%;
    height: 100%;
    .contentTop,
    .contentMid,
@@ -612,7 +760,7 @@
      .fxtTitle {
        position: absolute;
        top: 50px;
        left: 51.5%;
        left: 51%;
        color: #fff;
        h2 {
          font-size: 28px;

 src/components/mainIfo.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,314 @@
<template>
  <div class="contentBox">
    <div class="meuItem">
      <div class="userInfo"></div>
      <div class="userMesg">
        <div>
          <div>用户名:{{ userNmae }}</div>
          <div>职位:{{ userInfo }}</div>
        </div>
      </div>
      <div class="userMenu">
        <span>{{ loginTime }}</span>
        <el-button plain type="info" size="small">登出</el-button>
      </div>
    </div>
    <div class="menuList">
      <div class="itemMenu" v-for="(item, key) in menuList" :key="key">
        <div>{{ item.name }}</div>
        <div>{{ item.val }}</div>
      </div>
    </div>
    <div class="menuBox">
      <div class="title">常用系统统计</div>
      <div class="menuContent">
        <dv-scroll-board :config="configList1" />
      </div>
    </div>
    <div class="menuBox">
      <div class="title">系统登录日志</div>
      <div class="menuContent">
        <dv-scroll-board :config="configList2" />
      </div>
    </div>
    <div class="menuBox">
      <div class="title">系统状态信息</div>
      <div class="menuEchart">
        <div class="myEcahrt">
          <span>CPU占比</span>
          <div id="echart1"></div>
          <!-- <dv-water-level-pond :config="config" style="width:150px;height:200px" /> -->
          <!-- <div>
            <dv-percent-pond :config="config" style="margin-top:10px;width:70px;height:30px;" />
          </div>-->
        </div>
        <div class="myEcahrt">
          <span>内存占比</span>
          <div id="echart2"></div>
        </div>
        <div class="myEcahrt">
          <span>性能占比</span>
          <div id="echart3"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-liquidfill";
export default {
  data() {
    return {
      loginTime: null,
      userNmae: "Admin",
      userInfo: "系统管理员",
      menuList: [
        { name: "PV统计", val: 30 },
        { name: "访问数量", val: 30 },
        { name: "新增用户统计", val: 30 }
      ],
      config: {
        data: [66, 45],
        shape: "roundRect"
      },
      configList1: {
        // header: ["列1", "列2", "列3"],
        data: [
          ["行1列1", "行1列2", "行1列3"],
          ["行2列1", "行2列2", "行2列3"],
          ["行3列1", "行3列2", "行3列3"],
          ["行4列1", "行4列2", "行4列3"],
          ["行5列1", "行5列2", "行5列3"],
          ["行6列1", "行6列2", "行6列3"]
        ],
        index: false,
        align: ["center"]
      },
      configList2: {
        // header: ["列1", "列2", "列3"],
        data: [
          ["行1列1", "行1列2", "行1列3"],
          ["行2列1", "行2列2", "行2列3"],
          ["行3列1", "行3列2", "行3列3"],
          ["行4列1", "行4列2", "行4列3"],
          ["行5列1", "行5列2", "行5列3"],
          ["行6列1", "行6列2", "行6列3"]
        ],
        index: true,
        align: ["center"]
      },

      config1: {
        data: [
          {
            name: "CPU占比",
            value: 55
          }
        ],
        digitalFlopStyle: {
          fontSize: 20
        }
      }
    };
  },
  mounted() {
    this.getLoginTime();
    this.setMyChcart1();
    this.setMyChcart2();
    this.setMyChcart3();
  },
  methods: {
    getLoginTime() {
      let date = new Date(),
        year = date.getFullYear(), //获取完整的年份(4位)
        month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
        strDate = date.getDate(); // èŽ·å–当前日(1-31)
      if (month < 10) month = `0${month}`; // å¦‚果月份是个位数，在前面补0
      if (strDate < 10) strDate = `0${strDate}`; // å¦‚果日是个位数，在前面补0

      this.loginTime = year + "/" + month + "/" + strDate;
    },
    setMyChcart1() {
      var chart = echarts.init(document.getElementById("echart1"));
      // æŒ‡å®šå›¾è¡¨çš„配置项和数据
      var option = this.getOption(0.8);
      // ä½¿ç”¨æŒ‡å®šçš„配置项和数据显示图表。
      chart.setOption(option);
    },
    setMyChcart2() {
      var chart = echarts.init(document.getElementById("echart2"));
      // æŒ‡å®šå›¾è¡¨çš„配置项和数据
      var option = this.getOption(0.5);
      // ä½¿ç”¨æŒ‡å®šçš„配置项和数据显示图表。
      chart.setOption(option);
    },
    setMyChcart3() {
      var chart = echarts.init(document.getElementById("echart3"));
      // æŒ‡å®šå›¾è¡¨çš„配置项和数据
      var option = this.getOption(0.4);
      // ä½¿ç”¨æŒ‡å®šçš„配置项和数据显示图表。
      chart.setOption(option);
    },

    getOption(res) {
      return {
        series: [
          {
            type: "liquidFill",
            data: [res], // æ°´çº¹å æ¯”数据
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderColor: "#156ACF",
                borderWidth: 2
              }
            },
            backgroundStyle: {
              color: "rgba(255, 255, 255,.4)",
              textStyle: {
                color: "#293441"
              }
            },
            label: {
              normal: {
                textStyle: {
                  color: "#293441",
                  insideColor: "#fff",
                  fontSize: 18
                }
              }
            }
          }
        ]
      };
    }
  }
};
</script>

<style lang="less" scoped>
.contentBox {
  // background-color: #fff;
  width: calc(100%);
  height: calc(100%);
  display: flex;
  flex-direction: column;
  padding: 15px;
  justify-content: space-between;

  .meuItem {
    width: calc(100% - 60px);
    height: calc(15% - 60px);
    background: url("../assets/img/index//boxBg.png") center center/100% 100%
      no-repeat;
    display: flex;
    padding: 30px;

    .userInfo {
      width: 15%;
      height: 100%;
      background: red;
    }

    .userMesg {
      flex: 1;
      margin: 0px 10px;
      display: flex;
      align-items: center;
      justify-content: center;

      div {
        line-height: 30px;
        font-family: AdobeHeitiStd-Regular;
        color: #fff;
        font-size: 18px;
      }
    }

    .userMenu {
      display: flex;
      align-items: center;

      span {
        color: white;
        margin: 0px 10px;
      }
    }
  }

  .menuList {
    width: calc(100%);
    height: calc(10%);
    //
    display: flex;
    line-height: 30px;

    color: #fff;
    justify-content: space-around;

    .itemMenu {
      height: calc(100% - 40px);
      width: 30%;
      background: url("../assets/img/index//boxBg.png") center center/100% 100%
        no-repeat;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px 0px;

      div {
        width: 100%;
        display: flex;
        justify-content: center;
        font-family: AdobeHeitiStd-Regular;
      }

      :first-child {
        font-size: 17px;
      }
    }
  }

  .menuBox {
    height: calc(22% - 50px);
    width: calc(100% - 50px);
    background: url("../assets/img/index//boxBg.png") center center/100% 100%
      no-repeat;
    padding: 25px;
    font-family: AdobeHeitiStd-Regular;
    color: #fff;
    display: flex;
    flex-direction: column;

    .title {
      font-size: 20px;
      margin-bottom: 10px;
    }

    .menuContent {
      flex: 1;
    }

    .menuEchart {
      flex: 1;
      display: flex;
      justify-content: space-between;

      .myEcahrt {
        width: 32%;
        height: 100%;
        position: relative;

        div {
          width: 100%;
          height: 100%;
          position: absolute;
        }
      }
    }
  }
}
</style>