From de63827f36f8d0fa75d6eadeead5c6c1df83d38e Mon Sep 17 00:00:00 2001
From: zhangjun1 <zhangjun@bd-apaas.com>
Date: Thu, 2 Jul 2020 18:29:42 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=91=E8=B5=84=E6=BA=90=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/e-charts/line_chart.vue      | 268 ++++++++++++++++++++
 src/components/e-charts/multiple_circle.vue | 163 ++++++++++++
 src/components/e-charts/single_circle.vue   | 136 ++++++++++
 src/pages/data-analysis/my-service.vue      |  31 ++-
 src/pages/workbench/workPlace.vue           |   6 +-
 src/pages/workbench/yygl/app_detail.vue     |  10 +-
 6 files changed, 603 insertions(+), 11 deletions(-)
 create mode 100644 src/components/e-charts/line_chart.vue
 create mode 100644 src/components/e-charts/multiple_circle.vue
 create mode 100644 src/components/e-charts/single_circle.vue

diff --git a/src/components/e-charts/line_chart.vue b/src/components/e-charts/line_chart.vue
new file mode 100644
index 0000000..b2c32dc
--- /dev/null
+++ b/src/components/e-charts/line_chart.vue
@@ -0,0 +1,268 @@
+<template>
+  <div :id="line" class="dashboard"></div>
+</template>
+
+<script>
+import uuidv1 from "uuid/v1";
+var echarts = require("echarts");
+export default {
+  props: [],
+  components: {},
+  data() {
+    return {
+      line: uuidv1(),
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {
+    init_line_charts() {
+      let bgColor = "#fff";
+      let color = [
+        "#0090FF",
+        "#36CE9E",
+        "#FFC005",
+        "#FF515A",
+        "#8B5CFF",
+        "#00CA69",
+      ];
+      let echartData = [
+        {
+          name: "1",
+          value1: 100,
+          value2: 233,
+        },
+        {
+          name: "2",
+          value1: 138,
+          value2: 233,
+        },
+        {
+          name: "3",
+          value1: 350,
+          value2: 200,
+        },
+        {
+          name: "4",
+          value1: 173,
+          value2: 180,
+        },
+        {
+          name: "5",
+          value1: 180,
+          value2: 199,
+        },
+        {
+          name: "6",
+          value1: 150,
+          value2: 233,
+        },
+        {
+          name: "7",
+          value1: 180,
+          value2: 210,
+        },
+        {
+          name: "8",
+          value1: 230,
+          value2: 180,
+        },
+      ];
+
+      let xAxisData = echartData.map((v) => v.name);
+      //  ["1", "2", "3", "4", "5", "6", "7", "8"]
+      let yAxisData1 = echartData.map((v) => v.value1);
+      // [100, 138, 350, 173, 180, 150, 180, 230]
+      let yAxisData2 = echartData.map((v) => v.value2);
+      // [233, 233, 200, 180, 199, 233, 210, 180]
+      const hexToRgba = (hex, opacity) => {
+        let rgbaColor = "";
+        let reg = /^#[\da-f]{6}$/i;
+        if (reg.test(hex)) {
+          rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
+            "0x" + hex.slice(3, 5)
+          )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
+        }
+        return rgbaColor;
+      };
+
+      option = {
+        backgroundColor: bgColor,
+        color: color,
+        legend: {
+          //   show:false,//是否显示图例
+          right: "center",
+          bottom: 10,
+          itemWidth: 10,
+          itemHeight: 10,
+          icon: "roundRect",
+          orient: "horizontal",
+          backgroundColor: "#f4f7fc",
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            lineStyle: {
+              color: "#c3caf8",
+              width: 2,
+            },
+          },
+        },
+        grid: {
+          top: 100,
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false, //是否从起点开始画
+            axisLabel: {
+              textStyle: {
+                color: "#0d1847",
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#D9D9D9",
+              },
+            },
+            splitArea: {
+              show: true,
+              areaStyle: {
+                color: ["#fff", "#f8f9fd"],
+              },
+            },
+            data: xAxisData,
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            axisLabel: {
+              textStyle: {
+                color: "#a9aec0",
+                fontSize: 16,
+              },
+            },
+            nameTextStyle: {
+              color: "#666",
+              fontSize: 12,
+              lineHeight: 40,
+            },
+            splitLine: {
+              lineStyle: {
+                color: "#f2f2f2",
+              },
+            },
+            axisLine: {
+              // show: false,
+              lineStyle: {
+                color: "#e3e5ef",
+              },
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: "2018",
+            type: "line",
+            smooth: true,
+            showSymbol: false,
+            // symbolSize: 8,
+            zlevel: 3,
+            lineStyle: {
+              normal: {
+                color: color[0],
+                shadowBlur: 5,
+                shadowColor: hexToRgba(color[0], 0.5),
+                shadowOffsetY: 10,
+              },
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: hexToRgba(color[0], 0.3),
+                    },
+                    {
+                      offset: 1,
+                      color: hexToRgba(color[0], 0.1),
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: hexToRgba(color[0], 0.1),
+                shadowBlur: 10,
+              },
+            },
+            emphasis: {
+              itemStyle: {
+                borderWidth: 4,
+              },
+            },
+            data: yAxisData1,
+          },
+          {
+            name: "2019",
+            type: "line",
+            smooth: true,
+            showSymbol: false,
+            // symbolSize: 8,
+            zlevel: 3,
+            lineStyle: {
+              normal: {
+                color: color[1],
+                shadowBlur: 5,
+                shadowColor: hexToRgba(color[1], 0.5),
+                shadowOffsetY: 10,
+              },
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: hexToRgba(color[1], 0.3),
+                    },
+                    {
+                      offset: 1,
+                      color: hexToRgba(color[1], 0.1),
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: hexToRgba(color[1], 0.1),
+                shadowBlur: 10,
+              },
+            },
+            emphasis: {
+              itemStyle: {
+                borderWidth: 4,
+              },
+            },
+            data: yAxisData2,
+          },
+        ],
+      };
+    },
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/src/components/e-charts/multiple_circle.vue b/src/components/e-charts/multiple_circle.vue
new file mode 100644
index 0000000..1e9a818
--- /dev/null
+++ b/src/components/e-charts/multiple_circle.vue
@@ -0,0 +1,163 @@
+<template>
+  <div :id="yylx_asy" class="dashboard"></div>
+</template>
+
+<script>
+import uuidv1 from "uuid/v1";
+var echarts = require("echarts");
+export default {
+  props: ['data','text'],
+  components: {},
+  data() {
+    return {
+      yylx_asy: uuidv1(),
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {
+    this.init_yylx_asy(this.data,this.text)
+  },
+  methods: {
+    init_yylx_asy(data,text) {
+      var options = this.init_circle(data,text);
+      window[this.yylx_asy] = echarts.init(
+        document.getElementById(this.yylx_asy)
+      );
+      window[this.yylx_asy].setOption(options, true);
+    },
+    init_circle(data_val,text) {
+      // var data_val = data_val;
+      var rich = {
+        white: {
+          color: "#ddd",
+          align: "center",
+          padding: [3, 0],
+        },
+      };
+      var placeHolderStyle = {
+        normal: {
+          label: {
+            show: false,
+          },
+          labelLine: {
+            show: false,
+          },
+          color: "rgba(0, 0, 0, 0)",
+          borderColor: "rgba(0, 0, 0, 0)",
+          borderWidth: 0,
+        },
+      };
+      var data = [];
+      var total = 4;
+      var color = ["#515fe7", "#36a5ec", "#da9f2a", "#23b2a7", "#d46002"];
+      var legendarr = [];
+      var temp2_data = 0;
+      data_val.forEach((e) => {
+        temp2_data = temp2_data + e.value;
+      });
+      for (var i = 0; i < data_val.length; i++) {
+        data.push(
+          {
+            value: data_val[i].value,
+            name: data_val[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: temp2_data / 20,
+            name: "",
+            itemStyle: placeHolderStyle,
+          }
+        );
+        legendarr.push(data_val[i].name);
+      }
+      for (var i = 0; i < data_val.length; i++) {
+        total += data_val[i].value;
+      }
+      var seriesObj = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [65, 68],
+          center: ["51%", "50%"],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: true,
+                position: "outside",
+                color: "#58617a",
+                formatter: (params)=> {
+                  var percent = 0;
+                  
+                  percent = ((params.value / total) * 100).toFixed(2);
+                  if (params.name !== "") {
+                    return percent+"%";
+                  } else {
+                    return "";
+                  }
+                },
+                rich: rich,
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+
+      var options = {
+        title: {
+          text: total,
+          textStyle: {
+            color: "#000",
+            fontSize: 40,
+            fontWeight: 200,
+          },
+          subtext: text,
+          subtextStyle: {
+            color: "#c9cedd",
+          },
+          itemGap: -10, // 主副标题距离
+          left: "center",
+          top: "center",
+        },
+        color: color,
+        tooltip: {
+          show: false,
+        },
+        legend: {
+          bottom: -5,
+          left: "center",
+          itemWidth: 10,
+          itemHeight: 10,
+          orient: "horizontal",
+          data: legendarr,
+          backgroundColor: "#f4f7fc",
+        },
+        toolbox: {
+          show: false,
+        },
+
+        series: seriesObj,
+      };
+      return options;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.dashboard {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/e-charts/single_circle.vue b/src/components/e-charts/single_circle.vue
new file mode 100644
index 0000000..02ed4ec
--- /dev/null
+++ b/src/components/e-charts/single_circle.vue
@@ -0,0 +1,136 @@
+<template>
+  <div :id="health" class="dashboard"></div>
+</template>
+
+<script>
+import uuidv1 from "uuid/v1";
+var echarts = require("echarts");
+export default {
+  props: ['data'],
+  components: {},
+  data() {
+    return {
+      health: uuidv1(),
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {
+    this.init_health(this.data.num,this.data.color,this.data.text);
+  },
+  methods: {
+    init_health(num,color,text) {
+      var options = {
+        title: {
+          text: num + "%",
+          textStyle: {
+            color: "#000",
+            fontSize: 40,
+            fontWeight: 200,
+          },
+          subtext: text,
+          subtextStyle: {
+            color: "#c9cedd",
+          },
+          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",
+            silent: true,
+            data: [
+              {
+                name: "作文得分",
+                value: num,
+                itemStyle: {
+                  normal: {
+                    color: color,
+                    shadowColor: "rgba(0, 0, 0, 0.2)",
+                    shadowBlur: 20,
+                  },
+                },
+              },
+            ],
+            coordinateSystem: "polar",
+            roundCap: true,
+            barWidth: 10,
+            barGap: "-100%", // 两环重叠
+
+            z: 2,
+          },
+          {
+            // 灰色环
+            type: "bar",
+            silent: true,
+            data: [
+              {
+                value: 100,
+                itemStyle: {
+                  color: "#c9cedd",
+                  shadowColor: "rgba(0, 0, 0, 0.2)",
+                  shadowBlur: 20,
+                },
+              },
+            ],
+            coordinateSystem: "polar",
+            roundCap: true,
+            barWidth: 10,
+            barGap: "-100%", // 两环重叠
+            z: 1,
+          },
+        ],
+      };
+      window[this.health] = echarts.init(document.getElementById(this.health));
+      window[this.health].setOption(options, true);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.dashboard {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/pages/data-analysis/my-service.vue b/src/pages/data-analysis/my-service.vue
index d55d9aa..b4f7bdd 100644
--- a/src/pages/data-analysis/my-service.vue
+++ b/src/pages/data-analysis/my-service.vue
@@ -15,7 +15,9 @@
             </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
-            <block-radius class="block"></block-radius>
+            <block-radius class="block">
+              <multiple-circle :data="mult_data" :text="text"></multiple-circle>
+            </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
             <block-radius class="block"></block-radius>
@@ -31,7 +33,9 @@
             <block-radius class="block"></block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
-            <block-radius class="block"></block-radius>
+            <block-radius class="block">
+
+            </block-radius>
           </el-col>
         </el-row>
       </el-col>
@@ -41,7 +45,9 @@
             <block-radius class="block"></block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
-            <block-radius class="block"></block-radius>
+            <block-radius class="block">
+              <single-circle :data="single_data"></single-circle>
+            </block-radius>
           </el-col>
           <el-col :span="24" class="in_block">
             <block-radius class="block"></block-radius>
@@ -64,13 +70,28 @@
 <script>
 import BlockRadius from "@/components/block-radius";
 import Dashboard from "@/components/e-charts/dashboard";
+import multipleCircle from '@/components/e-charts/multiple_circle'
+import singleCircle from '@/components/e-charts/single_circle'
 export default {
   components: {
     BlockRadius,
-    Dashboard
+    Dashboard,
+    multipleCircle,
+    singleCircle
   },
   data: () => ({
-    navList: []
+    navList: [],
+    mult_data:[
+      {"name":"基础工具","value":40},
+      {"name":"通用应用","value":0},
+      {"name":"业务应用","value":2}
+    ],
+    text:'应用总数',
+    single_data:{
+      num:12,
+      color:'#515fe7',
+      text:'共享'
+    }
   }),
   mounted() {},
   methods: {}
diff --git a/src/pages/workbench/workPlace.vue b/src/pages/workbench/workPlace.vue
index 9e08958..b289958 100644
--- a/src/pages/workbench/workPlace.vue
+++ b/src/pages/workbench/workPlace.vue
@@ -1447,7 +1447,7 @@ export default {
             }
           },
           {
-            value: temp2_data / 10,
+            value: temp2_data / 20,
             name: "",
             itemStyle: placeHolderStyle
           }
@@ -1459,8 +1459,8 @@ export default {
           name: "",
           type: "pie",
           clockWise: false,
-          radius: [53, 57],
-          center: ["51%", "39%"],
+          radius: [51, 55],
+          center: ["51%", "45%"],
           hoverAnimation: false,
           itemStyle: {
             normal: {
diff --git a/src/pages/workbench/yygl/app_detail.vue b/src/pages/workbench/yygl/app_detail.vue
index 6f8ef13..789b0c8 100644
--- a/src/pages/workbench/yygl/app_detail.vue
+++ b/src/pages/workbench/yygl/app_detail.vue
@@ -105,9 +105,14 @@
               <p style="color:#8890a7;margin:20px 0;">上传新的压缩包：</p>
               <div class="uploadtips">
                   <p style="margin-left:-11px;"><i class="el-icon-warning-outline"></i>压缩包上传提示：</p>
-                  <p>1.必须包含以下文件：Chart.yaml，README.md，step.yaml，values.yaml，logo.png；</p>
+                  <p>1.必须包含以下文件：Chart.yaml，README.md，step.yaml，values.yaml，logo.png，templates/NOTES.txt；</p>
                   <p>2.上述文件必须按照上述名称进行命名；</p>
-                  <p>3.请将文件夹压缩为“.zip”、“.tgz”、“.tar.gz”格式，如：名称为redis-ha的文件夹压缩为redis-ha.zip。</p>
+                  <p>3.step.yaml文件为values.yaml中的可配置参数，templates/NOTES.txt文件为应用的部署信息;</p>
+                  <p>4.templates/NOTES.txt主要用于用户部署后的访问,可以按照如下示例进行编写：</p>
+                  <p>&nbsp;&nbsp;&nbsp;this is a postgresql.</p>
+                  <p>&nbsp;&nbsp;&nbsp;author : Tom</p>
+                  <p v-html="'&nbsp;&nbsp;&nbsp;内部地址： {{ .Release.Name }}.{{ .Release.Namespace }}:5432'"></p>
+                  <p>5.请将文件夹压缩为“.zip”、“.tgz”、“.tar.gz”格式，如：名称为redis-ha的文件夹压缩为redis-ha.zip。</p>
               </div>
                 <el-upload
                   class="upload-demo"
@@ -728,7 +733,6 @@ export default {
 }
 .uploadtips{
     width: 750px;
-	height: 141px;
 	background-color: #f8f9fd;
     border-radius: 8px;
     padding: 20px 40px;
-- 
2.26.0