From 0c74e7ac7f00ae90077374d62bc3a7a499b5b7b8 Mon Sep 17 00:00:00 2001
From: lixuliang <lixuliang_hd@126.com>
Date: 星期二, 30 七月 2024 13:27:56 +0800
Subject: [PATCH] 左侧
---
src/components/mainIfo.vue | 314 ++++++++++++++++++++++++++++++++++
src/components/index.vue | 200 +++++++++++++++++++--
2 files changed, 488 insertions(+), 26 deletions(-)
diff --git a/src/components/index.vue b/src/components/index.vue
index 4e7685e..c5a8428 100644
--- a/src/components/index.vue
+++ b/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鍒涙柊涓嶺X杩愮敤鐮旂┒骞冲彴')">
<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鍒涙柊涓嶺X杩愮敤鐮旂┒骞冲彴":
+ // 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;
diff --git a/src/components/mainIfo.vue b/src/components/mainIfo.vue
new file mode 100644
index 0000000..1a44391
--- /dev/null
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.3