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

--story=1010739 --user=郭雨琦 https://www.tapd.cn/55049933/prong/stories/view/1155049933001010739
2022-11-17 10:21:35 +08:00 · 2022-11-17 10:21:35 +08:00 · 470945e9d7
parent dfc96c3deb
commit 470945e9d7
7 changed files with 235 additions and 15 deletions
--- a/framework/sdk-parent/frontend/src/business/app-layout/index.vue
+++ b/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 {
--- a/framework/sdk-parent/frontend/src/components/MsBorderPieChart.vue
+++ b/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>
+
+
--- a/framework/sdk-parent/frontend/src/components/chart/MsChart.vue
+++ b/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"/>
--- a/framework/sdk-parent/frontend/src/i18n/lang/en-US.js
+++ b/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_issue_tip: 'No defects have been created yet, create them now',
+    creation_case_tip: 'No case,',
+    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: {
--- a/framework/sdk-parent/frontend/src/i18n/lang/zh-CN.js
+++ b/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_issue_tip: '暂时还没有创建缺陷，马上创建',
+    creation_case_tip: '暂无用例，前去',
+    creation_issue_tip: '暂无缺陷，前去',
    delNotSame: '删除用例中无法与API文档对应的参数',
    table_name: {
      track_case: '功能用例',
--- a/framework/sdk-parent/frontend/src/i18n/lang/zh-TW.js
+++ b/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_issue_tip: '暫時還沒有創建缺陷，馬上創建',
+    creation_case_tip: '暫無用例，前去',
+    creation_issue_tip: '暫無缺陷，前去',
    delNotSame: '刪除用例中無法與API文檔對應的參數',
    apply_tip:'未開啟工作台待更新設置',
    table_name: {
--- a/test-track/frontend/src/business/issue/IssueList.vue
+++ b/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()
+          });
+        }
      }
    }
  }