update

src/views/3DOverview/components/TechyAnalysisBar.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="quality-analysis-bar" :class="`border-${color}`">
+    <div class="placeholder-block-wrapper">
+      <div class="justify-end">
+        <div class="placeholder-block" :class="`block-${color}-1`" />
+        <div class="placeholder-block" :class="`block-${color}-2`" />
+        <div class="placeholder-block" :class="`block-${color}-3`" />
+        <div class="placeholder-block" :class="`block-${color}-4`" />
+        <div class="placeholder-block" :class="`block-${color}-5`" />
+      </div>
+    </div>
+    <span class="quality-analysis-bar__name">
+      {{ name }}
+    </span>
+    <span class="quality-analysis-bar__amount" :title="'数量:' + amount">{{ amount | amountFilter }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TechyAnalysisBar',
+  filters: {
+    amountFilter: val => {
+      const sVal = val.toString()
+      return sVal.length > 10 ? sVal.slice(0, 8) + '...' : sVal
+    }
+  },
+  props: {
+    name: {
+      type: String,
+      default: 'null'
+    },
+    amount: {
+      type: Number,
+      default: 0
+    },
+    color: {
+      type: String,
+      default: 'green'
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+.flex {
+  display: flex;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.quality-analysis-bar {
+  border-radius: 2px;
+  padding: 2px;
+  display: flex;
+}
+
+.border-green {
+  border: 1px solid #35abad;
+}
+.border-blue {
+  border: 1px solid #49b2ff;
+}
+.border-orange {
+  border: 1px solid #ffb94d;
+}
+.border-pink {
+  border: 1px solid #ed879f;
+}
+
+.placeholder-block-wrapper {
+  flex-grow: 1;
+  overflow: hidden;
+  min-width: 32px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.placeholder-block-wrapper > div {
+  width: 200px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+}
+
+.placeholder-block {
+  width: 20px;
+  height: 20px;
+  margin-left: 3px;
+  /* border-radius: 1px; */
+}
+
+.block-green-5 {
+  background: linear-gradient(to left, #35abad, hsla(181, 53%, 44%, 0.65));
+  /* margin-left: 4px; */
+}
+.block-green-4 {
+  background: linear-gradient(to left, hsla(181, 53%, 44%, 0.65), hsla(181, 53%, 44%, 0.4));
+}
+.block-green-3 {
+  background: linear-gradient(to left, hsla(181, 53%, 44%, 0.4), hsla(181, 53%, 44%, 0.2));
+}
+.block-green-2 {
+  background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0));
+}
+.block-green-1 {
+  /* background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0)); */
+  background: transparent;
+}
+
+/* ================ blue ================ */
+.block-blue-5 {
+  background: linear-gradient(to left, hsl(205, 100%, 64%), hsla(205, 100%, 64%, 0.65));
+  /* margin-left: 4px; */
+}
+.block-blue-4 {
+  background: linear-gradient(to left, hsla(205, 100%, 64%, 0.65), hsla(205, 100%, 64%, 0.4));
+}
+.block-blue-3 {
+  background: linear-gradient(to left, hsla(205, 100%, 64%, 0.4), hsla(205, 100%, 64%, 0.2));
+}
+.block-blue-2 {
+  background: linear-gradient(to left, hsla(205, 100%, 64%, 0.2), hsla(205, 100%, 64%, 0));
+}
+.block-blue-1 {
+  /* background: linear-gradient(to left, hsla(205, 100%, 64%, 0.2), hsla(205, 100%, 64%, 0)); */
+  background: transparent;
+}
+
+/* ================ orange ================ */
+.block-orange-5 {
+  background: linear-gradient(to left, hsl(36, 100%, 65%), hsla(36, 100%, 65%, 0.65));
+  /* margin-left: 4px; */
+}
+.block-orange-4 {
+  background: linear-gradient(to left, hsla(36, 100%, 65%, 0.65), hsla(36, 100%, 65%, 0.4));
+}
+.block-orange-3 {
+  background: linear-gradient(to left, hsla(36, 100%, 65%, 0.4), hsla(36, 100%, 65%, 0.2));
+}
+.block-orange-2 {
+  background: linear-gradient(to left, hsla(36, 100%, 65%, 0.2), hsla(36, 100%, 65%, 0));
+}
+.block-orange-1 {
+  /* background: linear-gradient(to left,hsla(36, 100%, 65%, 0.2), hsla(36, 100%, 65%, 0)); */
+  background: transparent;
+}
+
+/* ================ pink ================ */
+.block-pink-5 {
+  background: linear-gradient(to left, hsl(346, 74%, 73%), hsla(346, 74%, 73%, 0.65));
+  /* margin-left: 4px; */
+}
+.block-pink-4 {
+  background: linear-gradient(to left, hsla(346, 74%, 73%, 0.65), hsla(346, 74%, 73%, 0.4));
+}
+.block-pink-3 {
+  background: linear-gradient(to left, hsla(346, 74%, 73%, 0.4), hsla(346, 74%, 73%, 0.2));
+}
+.block-pink-2 {
+  background: linear-gradient(to left, hsla(346, 74%, 73%, 0.2), hsla(346, 74%, 73%, 0));
+}
+.block-pink-1 {
+  /* background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0)); */
+  background: transparent;
+}
+
+.quality-analysis-bar__name {
+  text-align: center;
+  white-space: nowrap;
+  overflow-wrap: break-word;
+  overflow: hidden;
+  color: white;
+  display: inline-block;
+  padding: 3px 8px;
+  font-size: 14px;
+  line-height: 12px;
+}
+
+.quality-analysis-bar__amount {
+  color: rgba(255, 255, 255, 0.725);
+  display: inline-block;
+  /* min-width: 35%; */
+  width: 50%;
+  text-align: left;
+  padding: 3px 0;
+  font-size: 14px;
+  line-height: 12px;
+}
+</style>