From 73058211fd0cb3e608e23b7d134f0c488d271f4e Mon Sep 17 00:00:00 2001
From: zhangjun1 <zhangjun@bd-apaas.com>
Date: Fri, 24 Apr 2020 16:15:26 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9D=99=E6=80=81=E9=A1=B5=E9=9D=A2=E6=97=A0?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue             |   1 +
 src/components/menu.vue |  56 ++++-
 src/pages/workPlace.vue | 438 +++++++++++++++++++++++++++++++++++++---
 3 files changed, 462 insertions(+), 33 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b60a573..359778c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -29,6 +29,7 @@ export default {
 }
 #app{
   background-color: #f6f7fb;
+  padding-bottom: 20px;
 }
 
 </style>
diff --git a/src/components/menu.vue b/src/components/menu.vue
index 895691d..0c7d2f4 100644
--- a/src/components/menu.vue
+++ b/src/components/menu.vue
@@ -1,8 +1,14 @@
 <template>
     <div class="menu">
         <img src="../assets/imgs/home_img_logo.png" alt="" class="logo">
-        <span class="user">用户</span>
-        <img src="../assets/imgs/home_ic_user.png" alt="" class="user_pic">
+        <div style="float:right;cursor: pointer;position:relative;" class="user_hover">
+            <span class="user">用户</span>
+            <img src="../assets/imgs/home_ic_user.png" alt="" class="user_pic">
+            <div class="user_menu">
+                <div v-for="(item,index) in user_arr" :key="index+700" @click="gotopage(index)">{{item}}</div>
+            </div>
+            <div class="sj"></div>
+        </div>
         <div class="number">99+</div>
         <img src="../assets/imgs/home_ic_shop.png" alt="" class="car">
         
@@ -22,6 +28,12 @@ export default {
         return{
             menu_arr:['工作台','技术支持','服务超市'],
             now_menu:0,
+            user_arr:['个人档案','消息通知','收银中心','关于BD-aPaaS','退出登录'],
+        }
+    },
+    methods:{
+        gotopage(n){
+            console.log(n);
         }
     }
 }
@@ -34,6 +46,7 @@ export default {
     background-color: #0f2683;
     color: #8390ee;
     line-height: 84px;
+
 }
 .logo{
     float: left;
@@ -85,4 +98,43 @@ export default {
     bottom: 0px;
     left: calc(50% - 12px);
 }
+.user_menu{
+    width: 135px;
+	background-color: #ffffff;
+	box-shadow: 0px 3px 6px 0px 
+		#f4f7fc;
+	border-radius: 8px;
+    position: absolute;
+    top: 80px;
+    left: -20px;
+    overflow: hidden;
+    display: none;
+    z-index: 1;
+}
+.user_hover:hover .user_menu{
+    display: block;
+}
+.user_hover:hover .sj{
+    display: block;
+}
+.user_menu div{
+    width: 135px;
+    height: 44px;
+    line-height: 44px;
+    text-align: center;
+    color: #0d1847;
+}
+.user_menu div:hover{
+    background-color: #e56600;
+    color: #fff;
+}
+.sj{
+    width: 16px;
+    height: 16px;
+    background-color: #e56600;
+    position: absolute;
+    top: 72px;
+    transform:rotate(45deg);
+    display: none;
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/workPlace.vue b/src/pages/workPlace.vue
index c5f54cb..677491f 100644
--- a/src/pages/workPlace.vue
+++ b/src/pages/workPlace.vue
@@ -9,6 +9,10 @@
         <div class="person_menu">
           管理功能&nbsp;&nbsp;&nbsp;
           <img src="../assets/imgs/home_ic_more_w.png" alt />
+
+          <div class="manage_menu">
+            <div></div>
+          </div>
         </div>
       </div>
       <div class="menu">
@@ -33,7 +37,7 @@
 
     <div class="case_box">
       <div class="data_asy">
-        <p style="margin-top:20px;margin-bottom:10px;">
+        <p style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;">
           数据分析中心
           <img style="vertical-align:-9px;" src="../assets/imgs/home_btn_enter.png" alt />
         </p>
@@ -42,29 +46,74 @@
             <p>
               <span></span> 服务健康状态
             </p>
-            <div :id="health"></div>
+            <div :id="health" class="health"></div>
           </div>
           <div class="data_charts_right">
             <p>
               <span></span> 服务运营分析
             </p>
-            <div :id="yy_asy"></div>
+            <div :id="yy_asy" class="yy_asy"></div>
+          </div>
+        </div>
+      </div>
+      <div class="online_tool">
+        <p style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;height:28px;padding-left:20px;">
+          在线组件工具
+        </p>
+        <div class="online_contain">
+          <div v-for="(item,index) in online_tool_arr" :key="index+300" class="online_box" :style="{backgroundColor:item.bg}">
+            <img :src="item.pic" alt=""><span :style="{color:item.color}">{{item.text}}</span>
           </div>
         </div>
       </div>
-      <div class="online_tool"></div>
+    </div>
+
+    <div class="case_box">
+      <div class="data_asy">
+        <p style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;">
+          我的服务
+          <img style="vertical-align:-9px;" src="../assets/imgs/home_btn_enter.png" alt />
+        </p>
+        <div class="myservice">
+          <div class="myservice_title">
+            <div v-for="(item,index) in service_arr" :key="index+400" class="myservice_type" :style="now_type==index?{borderBottom:'4px solid #f5ab4c',color:'#e56600'}:{}" @click="now_type = index">{{item}}</div>
+            <div class="myservice_btn"><img src="../assets/imgs/home_ic_release.png" alt="">&nbsp; 服务注册</div>
+          </div>
+        </div>
+      </div>
+      <div class="online_tool">
+        <p style="margin-top:20px;margin-bottom:10px;font-size:18px;color: #0d1847;font-weight:600;padding-left:20px;">
+          我的应用
+          <img style="vertical-align:-9px;" src="../assets/imgs/home_btn_enter.png" alt />
+        </p>
+        <div class="myapp">
+          <div class="myservice_title">
+            <div v-for="(item,index) in apptype_arr" :key="index+400" class="myservice_type" :style="now_app==index?{borderBottom:'4px solid #f5ab4c',color:'#e56600'}:{}" @click="now_app = index">{{item}}</div>
+          </div>
+          <el-scrollbar class="myapp_contain">
+            <div v-for="(item,index) in app_arr" :key="index+600" class="myapp_box">
+              <img :src="item.pic" alt="" style="width:60px;height:60px;">
+              <p>{{item.name}}</p>
+              <p>{{item.version}}</p>
+            </div>
+          </el-scrollbar>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import uuidv1 from "uuid/v1";
+var echarts = require("echarts");
 export default {
   data() {
     return {
       person: "康先生",
       login_time: "2020-03-12 10:21:22",
       now_user: 0,
+      now_type:0,
+      now_app:0,
       health: uuidv1(),
       yy_asy: uuidv1(),
       menu_arr: [
@@ -121,24 +170,135 @@ export default {
             num: "￥2,312"
           }
         ]
+      ],
+      online_tool_arr:[
+        {
+          text: "智能绘图",
+          pic: require("../assets/imgs/home_tool_ic_znht.png"),
+          bg: "#e5f4fe",
+          color: "#38aef9",
+        },
+        {
+          text: "数据开发",
+          pic: require("../assets/imgs/home_tool_ic_sjkf.png"),
+          bg: "#e6ebfe",
+          color: "#515fe7",
+        },
+        {
+          text: "模型工场",
+          pic: require("../assets/imgs/home_tool_ic_mxgc.png"),
+          bg: "#e6ebfe",
+          color: "#515fe7",
+        },
+        {
+          text: "流程设计",
+          pic: require("../assets/imgs/home_tool_ic_lcsj.png"),
+          bg: "#e6ebfe",
+          color: "#515fe7",
+        },
+        {
+          text: "可视化报表",
+          pic: require("../assets/imgs/home_tool_ic_kshbb.png"),
+          bg: "#fff2e2",
+          color: "#ea7d19",
+        },
+        {
+          text: "模板应用",
+          pic: require("../assets/imgs/home_tool_ic_mbyy.png"),
+          bg: "#fff2e2",
+          color: "#ea7d19",
+        },
+        {
+          text: "应用创新",
+          pic: require("../assets/imgs/home_tool_ic_yycx.png"),
+          bg: "#e7fdfc",
+          color: "#25bdb1",
+        },
+      ],
+      service_arr:['服务列表','申请服务','服务审批','云资源'],
+      apptype_arr:['部署的应用','创新的应用'],
+      app_arr:[
+        {
+          pic:require("../assets/imgs/home_tool_ic_znht.png"),
+          name:'定定定',
+          version:'1.0.1',
+        },
+        {
+          pic:require("../assets/imgs/home_tool_ic_znht.png"),
+          name:'定定定定定定定定',
+          version:'1.0.1',
+        },
+        {
+          pic:require("../assets/imgs/home_tool_ic_znht.png"),
+          name:'定定定定定定定定',
+          version:'1.0.1',
+        },
+        {
+          pic:require("../assets/imgs/home_tool_ic_znht.png"),
+          name:'定定定定定定定定',
+          version:'1.0.1',
+        },
+        {
+          pic:require("../assets/imgs/home_tool_ic_znht.png"),
+          name:'定定定定定定定定',
+          version:'1.0.1',
+        },
+        {
+          pic:require("../assets/imgs/home_tool_ic_znht.png"),
+          name:'定定定定定定定定',
+          version:'1.0.1',
+        },
+        {
+          pic:require("../assets/imgs/home_tool_ic_znht.png"),
+          name:'定定定定定定定定',
+          version:'1.0.1',
+        },
+      ],
+      manage_arr:[
+        {
+          pic:require('../assets/imgs/home_tool_ic_key.png'),
+          text:'我的密钥',
+        },
+        {
+          pic:require('../assets/imgs/home_tool_ic_organize.png'),
+          text:'组织管理',
+        },
+        {
+          pic:require('../assets/imgs/home_tool_ic_quanxian.png'),
+          text:'权限管理',
+        },
+        {
+          pic:require(),
+          text:'容器管理',
+        },
+        {
+          pic:require(),
+          text:'数据管控',
+        },
+        {
+          pic:require(),
+          text:'消息新闻管理',
+        },
       ]
     };
   },
   mounted() {
-      this.init_health()
+    this.init_health(50);
+    this.init_yy()
   },
   methods: {
     init_health(num) {
-    var options = {
+      var options = {
         title: {
-          text: "77",
+          text: num + "%",
           textStyle: {
-            color: "#01c4a3",
-            fontSize: 40
+            color: "#000",
+            fontSize: 40,
+            fontWeight: 200
           },
           subtext: "健康占比",
           subtextStyle: {
-            color: "#909090"
+            color: "#c9cedd"
           },
           itemGap: -10, // 主副标题距离
           left: "center",
@@ -185,31 +345,23 @@ export default {
         series: [
           {
             type: "bar",
+            silent: true,
             data: [
               {
                 name: "作文得分",
-                value: 60,
+                value: num,
                 itemStyle: {
                   normal: {
-                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-                      {
-                        offset: 0,
-                        color: "#aaf14f"
-                      },
-                      {
-                        offset: 1,
-                        color: "#0acfa1"
-                      }
-                    ]),
-                    shadowColor: "rgba(0, 0, 0, 0.5)",
-                    shadowBlur: 50
+                    color: "#e56600",
+                    shadowColor: "rgba(0, 0, 0, 0.2)",
+                    shadowBlur: 20
                   }
                 }
               }
             ],
             coordinateSystem: "polar",
             roundCap: true,
-            barWidth: 25,
+            barWidth: 10,
             barGap: "-100%", // 两环重叠
 
             z: 2
@@ -217,33 +369,156 @@ export default {
           {
             // 灰色环
             type: "bar",
+            silent: true,
             data: [
               {
                 value: 100,
                 itemStyle: {
-                  color: "#e2e2e2",
-                  shadowColor: "rgba(0, 0, 0, 0.5)",
-                  shadowBlur: 50
+                  color: "#c9cedd",
+                  shadowColor: "rgba(0, 0, 0, 0.2)",
+                  shadowBlur: 20
                 }
               }
             ],
             coordinateSystem: "polar",
             roundCap: true,
-            barWidth: 25,
+            barWidth: 10,
             barGap: "-100%", // 两环重叠
             z: 1
           }
         ]
       };
-      window[this.health] = echarts.init(
-        document.getElementById(this.health)
-      );
+      window[this.health] = echarts.init(document.getElementById(this.health));
       window[this.health].setOption(options, true);
+    },
+    init_yy() {
+      var colors = ["#e56600", "#c9cedd", "#515fe7"];
+
+      var options = {
+        color: colors,
+
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross"
+          }
+        },
+        grid: {
+          top: "20",
+          bottom:'45',
+        },
+        legend: {
+          data: ["服务调用总数", "应用部署总数", "收益总额"],
+          bottom: 0,
+          itemWidth:10,
+          itemHeight:10,
+          backgroundColor:'#f4f7fc',
+        },
+        xAxis: [
+          {
+            type: "category",
+            axisTick: {
+              alignWithLabel: true
+            },
+            data: [
+              "1月",
+              "2月",
+              "3月",
+              "4月",
+              "5月",
+            ]
+          }
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "",
+            min: 0,
+            position: "right",
+            axisLine: {
+              lineStyle: {
+                color: colors[1]
+              }
+            }
+          },
+          {
+            type: "value",
+            name: "",
+            min: 0,
+            position: "left",
+            axisLine: {
+              lineStyle: {
+                color: colors[1]
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: "服务调用总数",
+            type: "bar",
+            yAxisIndex: 1,
+            data: [
+              2.0,
+              4.9,
+              7.0,
+              23.2,
+              25.6,
+            ],
+            itemStyle: {
+              barBorderRadius: 6,
+              color:colors[2]
+            },
+            barWidth: 12
+          },
+          {
+            name: "应用部署总数",
+            type: "bar",
+            yAxisIndex: 1,
+            data: [
+              2.6,
+              5.9,
+              9.0,
+              26.4,
+              28.7,
+            ],
+            itemStyle: {
+              barBorderRadius: 6,
+              color:colors[0]
+            },
+            barWidth: 12
+          },
+          {
+            name: "收益总额",
+            type: "line",
+            yAxisIndex: 0,
+            data: [
+              2.0,
+              2.2,
+              3.3,
+              4.5,
+              6.3,
+            ],
+            itemStyle: {
+              color:colors[0]
+            },
+            symbol:'circle',
+          }
+        ]
+      };
+      window[this.yy_asy] = echarts.init(document.getElementById(this.yy_asy));
+      window[this.yy_asy].setOption(options, true);
     }
   }
 };
 </script>
 
+
+<style>
+  .el-scrollbar__wrap {
+    overflow-x: hidden;
+  }
+</style>
 <style scoped>
 .person_info {
   width: 1200px;
@@ -357,4 +632,105 @@ export default {
   display: inline-block;
   margin-right: 5px;
 }
+.health {
+  width: 200px;
+  height: 200px;
+  margin: 20px 0 0 20px;
+}
+.yy_asy {
+  width: 400px;
+  height: 200px;
+  margin: 20px 0 0 0px;
+}
+.online_tool{
+  width: 460px;
+  float: right;
+}
+.online_contain{
+  width: 460px;
+	height: 270px;
+	background-color: #ffffff;
+	box-shadow: 0px 3px 6px 0px 
+		#f4f7fc;
+	border-radius: 12px;
+  padding: 32px 20px;
+  overflow: hidden;
+}
+.online_box{
+  width: 126px;
+	height: 38px;;
+	border-radius: 6px 19px 19px 19px;
+  line-height: 38px;
+  text-align: center;
+  float: left;
+  margin-right: 20px;
+  margin-bottom: 15px;
+}
+.online_contain .online_box:nth-child(3n){
+  margin-right: 0px;
+}
+.online_box img{
+  vertical-align: -4px;
+  margin-right: 10px;
+}
+.myservice,.myapp{
+  width: 720px;
+	height: 386px;
+	background-color: #ffffff;
+	box-shadow: 0px 3px 6px 0px 
+		#f4f7fc;
+	border-radius: 12px;
+  padding: 15px 20px;
+}
+.myapp{
+  width: 460px;
+}
+.myservice_title{
+  width: 100%;
+  height: 47px;
+  border-bottom: 2px solid #f4f7fc;
+}
+.myservice_type{
+  float: left;
+  margin-right: 40px;
+  height: calc(100% + 2px);
+  cursor: pointer;
+  color: #8890a7;
+} 
+.myservice_btn{
+  float: right;
+  width: 100px;
+	height: 32px;
+	background-color: #515fe7;
+	border-radius: 8px;
+  color: #e6ebfe;
+  text-align: center;
+  line-height: 32px;
+  cursor: pointer;
+}
+.myapp_contain{
+  width: 420px;
+  height: 300px;
+  margin-top: 10px;
+}
+.myapp_box{
+  width: 120px;
+  height: 110px;
+  float: left;
+  margin: 10px 20px 40px 0px;
+  text-align: center;
+}
+.myapp_box p:nth-of-type(1){
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-top: 10px;
+  margin-bottom: 5px;
+  color: #0d1847;
+}
+.myapp_box p:nth-of-type(2){
+  font-size: 12px;
+	color: #8890a7;
+}
 </style>
\ No newline at end of file
-- 
2.26.0