refactor(工作台): 修改工作台UI样式

--story=1010739 --user=郭雨琦
https://www.tapd.cn/55049933/prong/stories/view/1155049933001010739

framework/sdk-parent/frontend/src/business/app-layout/index.vue

@@ -275,6 +275,7 @@ export default {
 .ms-aside-right {
   flex: 1;
   height: calc(100vh);
+  background-color: #F5F6F7;
 }
 
 .ms-right-fixed {

framework/sdk-parent/frontend/src/components/MsBorderPieChart.vue

@@ -1,10 +1,14 @@
 <template>
-  <ms-chart v-if="visible && pieData.length > 0" :options="options" :autoresize ="true" :height="height" style="width: 100%"/>
+  <div style="margin-top:22px;margin-left:18px;margin-bottom: 22px">
+    <ms-chart v-if="visible && pieData.length > 0" :options="options" :autoresize ="true" :height="height"  @mouseover="onMouseover" @mouseout="onMouseleave" ref="pieChart" />
+  </div>
+
 </template>
 
 <script>
 
 import MsChart from "./chart/MsChart";
+
 export default {
   name: "MsBorderPieChart",
   components: {MsChart},
@@ -13,35 +17,72 @@ export default {
       visible: true,
       autoresize:true,
       options: {
-        color:['#fac858','#73c0de','#ee6666', '#91cc75',   '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc','#5470c6'],
+        color:this.color,
         title: {
-          text: this.text,
+          text: "{mainTitle|" + this.textTitle + "}\n\n{number|" + this.text + "}\n\n",
+          link:this.linkText,
           subtext: this.subtext,
-          left: 'center'
+          triggerEvent: true,
+          textStyle: {
+            rich: {
+              mainTitle: {
+                color: '#646A73',
+                fontSize: 12,
+                align:'center'
+              },
+              number: {
+                fontSize: 32,
+                fontWeight: 500,
+                fontStyle: "normal",
+                fontFamily: "PinfFang SC",
+                margin: "112px 0px 0px 2px"
+              },
+            }
+          },
+          subtextStyle: {
+            color: "#1F2329",
+            fontSize: 12,
+            width: 105,
+            ellipsis: '... >',
+            overflow: "truncate",
+            align:'center',
+          },
+          itemGap: -60,
+          top: 'center',
+          textAlign: 'center',
+          left: this.getPosition()
         },
         tooltip: {
           trigger: 'item'
         },
         legend: {
           orient: 'vertical',
-          right: "1%"
+          icon:"rect",
+          right: 10,
+          y: 'center',
+          itemHeight: 8,
+          itemWidth: 8, //修改icon图形大小
+          itemStyle: {
+            borderWidth: 0.1
+          },
         },
         series: [
           {
             type: 'pie',
             radius: this.radius,
             itemStyle: {
-              borderRadius: 10,
+              borderRadius: 0,
               borderColor: '#fff',
               borderWidth: 2
             },
             label: {
-              show: true,
+              show: false,
               position:'outside',
               formatter: '{c}, {d}%',
             },
+            center: ['126', '128'],
             labelLine: {
-              show: true
+              show: false
             },
             data: this.pieData,
             colorBy: "data"
@@ -55,6 +96,10 @@ export default {
       type: String,
       default: ''
     },
+    textTitle: {
+      type: String,
+      default: ''
+    },
     name: {
       type: String,
       default: ''
@@ -75,12 +120,172 @@ export default {
         return []
       }
     },
+    color:{
+      type: Array,
+      default() {
+        return ['#AA4FBF','#FFD131','#10CECE', '#4261F6']
+      }
+    },
     height:{
       type: [Number, String],
+    },
+    width:{
+      type: [Number, String],
+    },
+    linkText:{
+      type: String,
+      default: ''
+    },
+    changeColor:{
+      type: Boolean,
+      default: false
+    },
+  },
+  methods: {
+    getPosition() {
+      //21是根据字符串大概的宽度计算出来的
+      let a = (this.height - this.textTitle.length * 4) / 2;
+      return a.toString();
+    },
+    onMouseover(param) {
+      if (this.changeColor && param.componentType==='title') {
+        this.options.title = {
+          text: "{mainTitle|" + this.textTitle + "}\n\n{number|" + this.text + "}\n\n",
+          //link:this.linkText,
+          subtext: this.subtext,
+          triggerEvent: true,
+          textStyle: {
+            rich: {
+              mainTitle: {
+                color: '#646A73',
+                fontSize: 12,
+                align:'center'
+              },
+              number: {
+                fontSize: 32,
+                fontWeight: 500,
+                color:'#783887',
+                fontStyle: "normal",
+                fontFamily: "PinfFang SC",
+                margin: "112px 0px 0px 2px",
+              },
             }
+          },
+          subtextStyle: {
+            color: "#1F2329",
+            fontSize: 12,
+            width: 105,
+            ellipsis: '... >',
+            overflow: "truncate",
+            align:'center',
+          },
+          itemGap: -60,
+          top: 'center',
+          textAlign: 'center',
+          left: this.getPosition()
+        }
+      }
+    },
+    onMouseleave(param) {
+      if (this.changeColor && param.componentType==='title') {
+        this.options.title = {
+          text: "{mainTitle|" + this.textTitle + "}\n\n{number|" + this.text + "}\n\n",
+          //link:this.linkText,
+          subtext: this.subtext,
+          triggerEvent: true,
+          textStyle: {
+            rich: {
+              mainTitle: {
+                color: '#646A73',
+                fontSize: 12,
+                align:'center'
+              },
+              number: {
+                fontSize: 32,
+                fontWeight: 500,
+                color:'#263238',
+                fontStyle: "normal",
+                fontFamily: "PinfFang SC",
+                margin: "112px 0px 0px 2px",
+              },
+            }
+          },
+          subtextStyle: {
+            color: "#1F2329",
+            fontSize: 12,
+            width: 105,
+            ellipsis: '... >',
+            overflow: "truncate",
+            align:'center',
+          },
+          itemGap: -60,
+          top: 'center',
+          textAlign: 'center',
+          left: this.getPosition()
+        }
+      }
+    },
+  },
+  created() {
+    this.$nextTick(function () {
+      let self = this;
+      this.options.legend = {
+        type:'scroll',
+        pageIconSize: 12,
+        pageIcons: {
+          vertical: [
+            "path://M325.802667 512l346.965333 346.965333a21.333333 21.333333 0 0 1 0 30.165334l-30.208 30.165333a21.333333 21.333333 0 0 1-30.165333 0l-377.088-377.130667a42.666667 42.666667 0 0 1 0-60.330666l377.088-377.130667a21.333333 21.333333 0 0 1 30.165333 0l30.208 30.165333a21.333333 21.333333 0 0 1 0 30.165334L325.802667 512z",
+            "path://M694.528 512L347.562667 165.034667a21.333333 21.333333 0 0 1 0-30.165334l30.208-30.165333a21.333333 21.333333 0 0 1 30.165333 0l377.088 377.130667a42.666667 42.666667 0 0 1 0 60.330666l-377.088 377.130667a21.333333 21.333333 0 0 1-30.165333 0l-30.208-30.165333a21.333333 21.333333 0 0 1 0-30.165334L694.528 512z"
+          ]
+        },
+        pageIconColor: "#1F2329",
+        pageIconInactiveColor: "#1F2329",
+        orient: 'vertical',
+        icon:"rect",
+        itemGap: 32,
+        left: '317px',
+        y: 'center',
+        itemHeight: 8,
+        itemWidth: 8, //修改icon图形大小
+        itemStyle: {
+          borderWidth: 0.1
+        },
+        textStyle: {
+          rich: {
+            name: {
+              fontSize: 14,
+              align: 'left',
+              width: 100,
+              fontWeight: 400,
+              color:'#646A73'
+            },
+            num: {
+              fontSize: 14,
+              align: 'right',
+              color:'#646A73',
+              fontWeight: 400,
+              padding: [0, 0, 0, 134]
+            }
+          }
+        },
+        data:this.pieData,
+        formatter:function(name){
+          //通过name获取到数组对象中的单个对象
+          let singleData = self.pieData.filter(function(item){
+            return item.name === name
+          })
+          if (!singleData[0].value) {
+            singleData[0].value = 0;
+          }
+          return [`{name|${name}}`, `{num|${singleData[0].value}}`].join("");
+        }
+      };
+    })
   }
 }
 </script>
 
 <style scoped>
 </style>
+
+

framework/sdk-parent/frontend/src/components/chart/MsChart.vue

@@ -9,6 +9,7 @@
       :group="group"
       @click="onClick"
       @datazoom="datazoom"
+      v-on="$listeners"
       :watch-shallow="watchShallow"
       :manual-update="manualUpdate"
       :autoresize="autoresize" id="chartsShow"/>

framework/sdk-parent/frontend/src/i18n/lang/en-US.js

@@ -515,6 +515,8 @@ const message = {
     custom_update_list_rule: 'Customize to-be-updated list rules',
     ignore: 'Ignore',
     past: 'past',
+    case_count:'case count',
+    issues_count:'issues count',
     api_change: 'Api Change',
     dash_board: 'My DashBoard',
     upcoming: 'My Upcoming',
@@ -522,8 +524,8 @@ const message = {
     creation: 'My Creation',
     creation_case: 'My Creation Case',
     creation_issue: 'My Creation Issue',
-    creation_case_tip: 'No use case has been created yet, create it now',
+    creation_case_tip: 'No case,',
-    creation_issue_tip: 'No defects have been created yet, create them now',
+    creation_issue_tip: 'No defects,',
     delNotSame: 'Remove parameters in use cases that cannot correspond to API documentation',
     apply_tip:'The workbench pending update setting is not enabled',
     table_name: {

framework/sdk-parent/frontend/src/i18n/lang/zh-CN.js

@@ -518,6 +518,8 @@ const message = {
     custom_update_list_rule: '自定义待更新列表规则',
     ignore: '忽略',
     past: '过去',
+    case_count:'用例数量',
+    issues_count:'缺陷数量',
     api_change: '接口变更',
     dash_board: '我的仪表盘',
     upcoming: '我的待办',
@@ -525,8 +527,8 @@ const message = {
     creation: '我创建的',
     creation_case: '我创建的用例',
     creation_issue: '我创建的缺陷',
-    creation_case_tip: '暂时还没有创建用例，马上创建',
+    creation_case_tip: '暂无用例，前去',
-    creation_issue_tip: '暂时还没有创建缺陷，马上创建',
+    creation_issue_tip: '暂无缺陷，前去',
     delNotSame: '删除用例中无法与API文档对应的参数',
     table_name: {
       track_case: '功能用例',

framework/sdk-parent/frontend/src/i18n/lang/zh-TW.js

@@ -518,6 +518,8 @@ const message = {
     custom_update_list_rule: '自定義待更新列表規則',
     ignore: '忽略',
     past: '過去',
+    case_count:'用例數量',
+    issues_count:'缺陷數量',
     api_change: '接口變更',
     dash_board: '我的儀表盤',
     upcoming: '我的待辦',
@@ -525,8 +527,8 @@ const message = {
     creation: '我創建的',
     creation_case: '我創建的用例',
     creation_issue: '我創建的缺陷',
-    creation_case_tip: '暫時還沒有創建用例，馬上創建',
+    creation_case_tip: '暫無用例，前去',
-    creation_issue_tip: '暫時還沒有創建缺陷，馬上創建',
+    creation_issue_tip: '暫無缺陷，前去',
     delNotSame: '刪除用例中無法與API文檔對應的參數',
     apply_tip:'未開啟工作台待更新設置',
     table_name: {

test-track/frontend/src/business/issue/IssueList.vue

@@ -548,6 +548,13 @@ export default {
         getIssuesById(id).then((response) => {
           this.handleEdit(response.data)
         });
+      } else {
+        let type = this.$route.query.type;
+        if (type === 'create') {
+          this.$nextTick(() => {
+            this.handleCreate()
+          });
+        }
       }
     }
   }