From 9588b78d2b6cd123aa2006196b95fdecff98f10e Mon Sep 17 00:00:00 2001
From: zhangjun1 <zhangjun@bd-apaas.com>
Date: Fri, 24 Apr 2020 11:20:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=81=A5=E5=BA=B7=E7=8E=AF=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/workPlace.vue | 545 +++++++++++++++++++++++++---------------
 1 file changed, 342 insertions(+), 203 deletions(-)

diff --git a/src/pages/workPlace.vue b/src/pages/workPlace.vue
index 50701ae..c5f54cb 100644
--- a/src/pages/workPlace.vue
+++ b/src/pages/workPlace.vue
@@ -1,221 +1,360 @@
 <template>
-    <div>
-        <div class="person_info">
-            <div class="preson">
-                <div class="person_text">
-                    <img src="../assets/imgs/img_head.png" alt="">
-                    <span>你好，{{person}}！最近登录{{login_time}}</span>
-                </div>
-                <div class="person_menu">管理功能&nbsp;&nbsp;&nbsp; <img src="../assets/imgs/home_ic_more_w.png" alt=""></div>
-            </div>
-            <div class="menu">
-                <div :class="now_user==0?'menu_box0':now_user==1?'menu_box1':'menu_box2'" v-for="(item,index) in menu_arr[now_user]" :key="index+100" >
-                    <img :src="item.pic" alt="">
-                    <div class="menu_text">
-                        <p>{{item.text}}</p>
-                        <p :style="index == menu_arr[now_user].length - 1||now_user==1&&index==0?{color:item.color,marginRight:'-20px'}:{color:item.color}"><span style="font-size:36px">{{item.num}}</span><span v-if="index == menu_arr[now_user].length - 1||now_user==1&&index==0">万</span></p>
-                    </div>
-                </div>
-            </div>
+  <div>
+    <div class="person_info">
+      <div class="preson">
+        <div class="person_text">
+          <img src="../assets/imgs/img_head.png" alt />
+          <span>你好，{{person}}！最近登录{{login_time}}</span>
         </div>
+        <div class="person_menu">
+          管理功能&nbsp;&nbsp;&nbsp;
+          <img src="../assets/imgs/home_ic_more_w.png" alt />
+        </div>
+      </div>
+      <div class="menu">
+        <div
+          :class="now_user==0?'menu_box0':now_user==1?'menu_box1':'menu_box2'"
+          v-for="(item,index) in menu_arr[now_user]"
+          :key="index+100"
+        >
+          <img :src="item.pic" alt />
+          <div class="menu_text">
+            <p>{{item.text}}</p>
+            <p
+              :style="index == menu_arr[now_user].length - 1||now_user==1&&index==0?{color:item.color,marginRight:'-20px'}:{color:item.color}"
+            >
+              <span style="font-size:36px">{{item.num}}</span>
+              <span v-if="index == menu_arr[now_user].length - 1||now_user==1&&index==0">万</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
 
-        <div class="case_box">
-            <div class="data_asy">
-                <p style="margin-top:20px;margin-bottom:10px;">数据分析中心 <img style="vertical-align:-9px;" src="../assets/imgs/home_btn_enter.png" alt=""></p>
-                <div class="data_charts">
-                    <div class="data_charts_left">
-                        <p><span></span> 服务健康状态</p>
-                        <div :id="health"></div>
-                    </div>
-                    <div class="data_charts_right">
-                        <p><span></span> 服务运营分析</p>
-                        <div :id="yy_asy"></div>
-                    </div>
-                </div>
-            </div>
-            <div class="online_tool"></div>
+    <div class="case_box">
+      <div class="data_asy">
+        <p style="margin-top:20px;margin-bottom:10px;">
+          数据分析中心
+          <img style="vertical-align:-9px;" src="../assets/imgs/home_btn_enter.png" alt />
+        </p>
+        <div class="data_charts">
+          <div class="data_charts_left">
+            <p>
+              <span></span> 服务健康状态
+            </p>
+            <div :id="health"></div>
+          </div>
+          <div class="data_charts_right">
+            <p>
+              <span></span> 服务运营分析
+            </p>
+            <div :id="yy_asy"></div>
+          </div>
         </div>
+      </div>
+      <div class="online_tool"></div>
     </div>
+  </div>
 </template>
 
 <script>
+import uuidv1 from "uuid/v1";
 export default {
-    data(){
-        return{
-            person:'康先生',
-            login_time:'2020-03-12 10:21:22',
-            now_user:0,
-            health:'',
-            yy_asy:"",
-            menu_arr:[
-                [
-                    {
-                        text:'服务总数',
-                        pic:require('../assets/imgs/ic_fuwuzs_navy.png'),
-                        bg:'#e6ebfe',
-                        color:'#515fe7',
-                        num:'12,332',
-                    },
-                    {
-                        text:'应用总数',
-                        pic:require('../assets/imgs/ic_yingyongzs.png'),
-                        bg:'#e5f4fe',
-                        color:'#38aef9',
-                        num:'223',
-                    },
-                    {
-                        text:'收益总额',
-                        pic:require('../assets/imgs/ic_shouyize.png'),
-                        bg:'#fcefd6',
-                        color:'#ea7d19',
-                        num:'￥2,312',
-                    },
-                ],
-                [
-                    {
-                        text:'收益总额',
-                        pic:require('../assets/imgs/ic_shouyize.png'),
-                        bg:'#fcefd6',
-                        color:'#ea7d19',
-                        num:'￥2,312',
-                    },
-                    {
-                        text:'服务总数',
-                        pic:require('../assets/imgs/ic_fuwuzs_navy.png'),
-                        bg:'#e6ebfe',
-                        color:'#515fe7',
-                        num:'12,332',
-                    },
-                    {
-                        text:'应用总数',
-                        pic:require('../assets/imgs/ic_yingyongzs.png'),
-                        bg:'#e5f4fe',
-                        color:'#38aef9',
-                        num:'223',
-                    },
-                    {
-                        text:'收益总额',
-                        pic:require('../assets/imgs/ic_shouyize.png'),
-                        bg:'#fcefd6',
-                        color:'#ea7d19',
-                        num:'￥2,312',
-                    },
-                ],
+  data() {
+    return {
+      person: "康先生",
+      login_time: "2020-03-12 10:21:22",
+      now_user: 0,
+      health: uuidv1(),
+      yy_asy: uuidv1(),
+      menu_arr: [
+        [
+          {
+            text: "服务总数",
+            pic: require("../assets/imgs/ic_fuwuzs_navy.png"),
+            bg: "#e6ebfe",
+            color: "#515fe7",
+            num: "12,332"
+          },
+          {
+            text: "应用总数",
+            pic: require("../assets/imgs/ic_yingyongzs.png"),
+            bg: "#e5f4fe",
+            color: "#38aef9",
+            num: "223"
+          },
+          {
+            text: "收益总额",
+            pic: require("../assets/imgs/ic_shouyize.png"),
+            bg: "#fcefd6",
+            color: "#ea7d19",
+            num: "￥2,312"
+          }
+        ],
+        [
+          {
+            text: "收益总额",
+            pic: require("../assets/imgs/ic_shouyize.png"),
+            bg: "#fcefd6",
+            color: "#ea7d19",
+            num: "￥2,312"
+          },
+          {
+            text: "服务总数",
+            pic: require("../assets/imgs/ic_fuwuzs_navy.png"),
+            bg: "#e6ebfe",
+            color: "#515fe7",
+            num: "12,332"
+          },
+          {
+            text: "应用总数",
+            pic: require("../assets/imgs/ic_yingyongzs.png"),
+            bg: "#e5f4fe",
+            color: "#38aef9",
+            num: "223"
+          },
+          {
+            text: "收益总额",
+            pic: require("../assets/imgs/ic_shouyize.png"),
+            bg: "#fcefd6",
+            color: "#ea7d19",
+            num: "￥2,312"
+          }
+        ]
+      ]
+    };
+  },
+  mounted() {
+      this.init_health()
+  },
+  methods: {
+    init_health(num) {
+    var options = {
+        title: {
+          text: "77",
+          textStyle: {
+            color: "#01c4a3",
+            fontSize: 40
+          },
+          subtext: "健康占比",
+          subtextStyle: {
+            color: "#909090"
+          },
+          itemGap: -10, // 主副标题距离
+          left: "center",
+          top: "center"
+        },
+        angleAxis: {
+          max: 100, // 满分
+          clockwise: false, // 逆时针
+          startAngle: 90,
+          // 隐藏刻度线
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        radiusAxis: {
+          type: "category",
+          // 隐藏刻度线
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: false
+          },
+          splitLine: {
+            show: false
+          }
+        },
+        polar: {
+          center: ["50%", "50%"],
+          radius: "140%" //图形大小
+        },
+        series: [
+          {
+            type: "bar",
+            data: [
+              {
+                name: "作文得分",
+                value: 60,
+                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
+                  }
+                }
+              }
             ],
-        }
+            coordinateSystem: "polar",
+            roundCap: true,
+            barWidth: 25,
+            barGap: "-100%", // 两环重叠
+
+            z: 2
+          },
+          {
+            // 灰色环
+            type: "bar",
+            data: [
+              {
+                value: 100,
+                itemStyle: {
+                  color: "#e2e2e2",
+                  shadowColor: "rgba(0, 0, 0, 0.5)",
+                  shadowBlur: 50
+                }
+              }
+            ],
+            coordinateSystem: "polar",
+            roundCap: true,
+            barWidth: 25,
+            barGap: "-100%", // 两环重叠
+            z: 1
+          }
+        ]
+      };
+      window[this.health] = echarts.init(
+        document.getElementById(this.health)
+      );
+      window[this.health].setOption(options, true);
     }
-}
+  }
+};
 </script>
 
 <style scoped>
-.person_info{
-    width: 1200px;
-	height: 206px;
-	background-color: #ffffff;
-	box-shadow: 0px 3px 6px 0px 
-		#f4f7fc;
-    border-radius: 12px;
-    padding: 20px;
-}
-.preson{
-    width: 100%;
-    height: 52px;
-    line-height: 52px;
-    border-bottom: 2px solid #f4f7fc;
-}
-.person_text{
-    float: left;
-    padding: 0 10px;
-}
-.person_text img{
-    border-radius: 18px;
-    margin-right: 10px;
-    vertical-align: -10px;
-}
-.person_menu{
-    float: right;
-    width: 100px;
-    height: 32px;
-    line-height: 32px;
-    text-align: center;
-	background-color: #e56600;
-	border-radius: 8px;
-    color: #fff;
-    cursor: pointer;
-    margin-top: 10px;
-}
-.menu{
-    width: 100%;
-    height: 102px;
-    margin-top: 20px;
-}
-.menu_box0,.menu_box1{
-    float: left;
-    width: calc((100% - 60px)/3);
-    margin-right: 30px;
-    width: 366px;
-	height: 92px;
-	background-color: #e6ebfe;
-	border-radius: 12px 12px 12px 46px;
-}
-.menu_box0:nth-last-of-type(1),.menu_box1:nth-last-of-type(1){
-    margin-right: 0px;
-}
-.menu_box1{
-    width: calc((100% - 60px)/4);
-    margin-right: 20px;
-}
-.menu img{
-    float: left;
-    margin: 28px 0 0 28px;
-}
-.menu .menu_text{
-    float: right;
-    margin-top: 15px;
-    margin-right: 29px;
-} 
-.menu_text p{
-    text-align: right;
+.person_info {
+  width: 1200px;
+  height: 206px;
+  background-color: #ffffff;
+  box-shadow: 0px 3px 6px 0px #f4f7fc;
+  border-radius: 12px;
+  padding: 20px;
+}
+.preson {
+  width: 100%;
+  height: 52px;
+  line-height: 52px;
+  border-bottom: 2px solid #f4f7fc;
+}
+.person_text {
+  float: left;
+  padding: 0 10px;
+}
+.person_text img {
+  border-radius: 18px;
+  margin-right: 10px;
+  vertical-align: -10px;
+}
+.person_menu {
+  float: right;
+  width: 100px;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  background-color: #e56600;
+  border-radius: 8px;
+  color: #fff;
+  cursor: pointer;
+  margin-top: 10px;
+}
+.menu {
+  width: 100%;
+  height: 102px;
+  margin-top: 20px;
+}
+.menu_box0,
+.menu_box1 {
+  float: left;
+  width: calc((100% - 60px) / 3);
+  margin-right: 30px;
+  width: 366px;
+  height: 92px;
+  background-color: #e6ebfe;
+  border-radius: 12px 12px 12px 46px;
+}
+.menu_box0:nth-last-of-type(1),
+.menu_box1:nth-last-of-type(1) {
+  margin-right: 0px;
+}
+.menu_box1 {
+  width: calc((100% - 60px) / 4);
+  margin-right: 20px;
+}
+.menu img {
+  float: left;
+  margin: 28px 0 0 28px;
+}
+.menu .menu_text {
+  float: right;
+  margin-top: 15px;
+  margin-right: 29px;
+}
+.menu_text p {
+  text-align: right;
 }
 
-.case_box{
-    width: 100%;
-    overflow: hidden;
-}
-.data_asy{
-    width: 720px;
-    float: left;
-    margin-right: 20px;
-}
-.data_charts{
-    width: 720px;
-	height: 270px;
-	background-color: #ffffff;
-	box-shadow: 0px 3px 6px 0px 
-		#f4f7fc;
-    border-radius: 12px;
-    padding: 20px;
-}
-.data_charts_left{
-    height: 100%;
-    width: 220px;
-    float: left;
-}
-.data_charts_right{
-    height: 100%;
-    width: 420px;
-    float: right;
-}
-.data_charts_left p,.data_charts_right p{
-    font-size: 16px;
-    color: #707693;
-}
-.data_charts_left p span,.data_charts_right p span{
-    width: 8px;
-	height: 8px;
-    background-color: #515fe7;
-    border-radius: 4px;
-    display: inline-block;
-    margin-right: 5px;
+.case_box {
+  width: 100%;
+  overflow: hidden;
+}
+.data_asy {
+  width: 720px;
+  float: left;
+  margin-right: 20px;
+}
+.data_charts {
+  width: 720px;
+  height: 270px;
+  background-color: #ffffff;
+  box-shadow: 0px 3px 6px 0px #f4f7fc;
+  border-radius: 12px;
+  padding: 20px;
+}
+.data_charts_left {
+  height: 100%;
+  width: 220px;
+  float: left;
+}
+.data_charts_right {
+  height: 100%;
+  width: 420px;
+  float: right;
+}
+.data_charts_left p,
+.data_charts_right p {
+  font-size: 16px;
+  color: #707693;
+}
+.data_charts_left p span,
+.data_charts_right p span {
+  width: 8px;
+  height: 8px;
+  background-color: #515fe7;
+  border-radius: 4px;
+  display: inline-block;
+  margin-right: 5px;
 }
 </style>
\ No newline at end of file
-- 
2.26.0