From dcb42da59b4cbd44f0ab57d6b1993a676324c291 Mon Sep 17 00:00:00 2001 From: fengxuefeng Date: Fri, 21 Aug 2020 09:34:25 +0800 Subject: [PATCH] modify icon when device not available --- mindinsight/ui/src/assets/images/occupy.svg | 11 +++++++++++ .../ui/src/views/train-manage/hardware-visual.vue | 7 +++++-- 2 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 mindinsight/ui/src/assets/images/occupy.svg diff --git a/mindinsight/ui/src/assets/images/occupy.svg b/mindinsight/ui/src/assets/images/occupy.svg new file mode 100644 index 0000000..5964b1e --- /dev/null +++ b/mindinsight/ui/src/assets/images/occupy.svg @@ -0,0 +1,11 @@ + + + + 设备占比 + Created with Sketch. + + + + + + \ No newline at end of file diff --git a/mindinsight/ui/src/views/train-manage/hardware-visual.vue b/mindinsight/ui/src/views/train-manage/hardware-visual.vue index f77d453..8eec65d 100644 --- a/mindinsight/ui/src/views/train-manage/hardware-visual.vue +++ b/mindinsight/ui/src/views/train-manage/hardware-visual.vue @@ -580,8 +580,10 @@ export default { dealChartData(chart, data) { if (data.others === 0) { chart.legend = ['used', 'available']; + this.pieColorArr = ['#5e7ce0', '#a6dd82']; } else { chart.legend = ['used', 'others', 'available']; + this.pieColorArr = ['#5e7ce0', '#ccc', '#a6dd82']; } chart.data = chart.legend.map((val) => { return { @@ -799,12 +801,13 @@ export default { .cl-chip-wrap { height: calc(100% - 36px); overflow: auto; - .available-fail{ + .available-fail { display: inline-block; width: 12px; height: 12px; border-radius: 12px; - background: #ffaa00; + background-image: url('../../assets/images/occupy.svg'); + background-size: 100% 100%; } .el-icon-success:before { color: #57d7ac; -- GitLab