@zfqh/uniapp 0.1.1

package/lib/components/g-polyline-chat/g-polyline-chat.vue

@@ -0,0 +1,255 @@
+<template>
+  <view class="polyline-chat" :style="[style]" :id="id">
+    <view class="polyline-chat-wrap" :style="[wrapStyle]">
+      <view class="polyline-chat-inner" :style="[innerStyle]">
+        <view v-for="(ele, i) in bars" :key="i" class="polyline-chat-item">
+          <text :style="[textStyle]" class="polyline-chat-text">{{ ele[0] }}</text>
+          <view :style="[barStyle]" class="polyline-chat-bar">
+            <view v-if="space > 0" :style="[mainStyle]" class="polyline-chat-main"></view>
+            <view v-if="space > 0" :style="[lineStyle]" class="polyline-chat-line"></view>
+          </view>
+          <text :style="[textStyle]" class="polyline-chat-text"> {{ ele[1] }} </text>
+        </view>
+      </view>
+      <view v-if="space == 0" :style="[mainStyle]" class="polyline-chat-main"></view>
+      <view v-if="space == 0" :style="[lineStyle]" class="polyline-chat-line"></view>
+      <g-polyline-view
+        v-for="(item, p) in list"
+        :key="p"
+        :data="item.data"
+        :color="item.color"
+        :startLeft="barWidth / 2"
+        :endLeft="barWidth + barWidth / 2 + space"
+      />
+    </view>
+    <view class="polyline-chat-title">
+      <view v-for="(item, j) in list" :key="j">
+        <view :style="{ backgroundColor: item.color }"></view>
+        <text :style="[textStyle]"> {{ item.title }} </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getRectById } from '../../utils';
+
+let key = 0;
+
+export default {
+  props: {
+    bars: {
+      type: Array,
+      default: () => [
+        ['弦', '软'],
+        ['滑', '细'],
+        ['浮', '沉'],
+        ['数', '迟'],
+      ],
+    },
+    mainColor: {
+      type: String,
+      default: '#A3E5D9',
+    },
+    bgColor: {
+      type: String,
+      default: '#F7F3E9',
+    },
+    lineColor: {
+      type: String,
+      default: '#B8EAE2',
+    },
+    border: {
+      type: [String, Boolean],
+      default: false,
+    },
+    borderColor: {
+      type: String,
+      default: 'transparent',
+    },
+    borderWidth: {
+      type: [String, Number],
+      default: 1,
+    },
+    textColor: {
+      type: String,
+      default: '#333',
+    },
+    textSize: {
+      type: Number,
+      default: 18,
+    },
+    data: {
+      type: [Array, Object],
+      default: () => ({
+        title: '',
+        color: '',
+        data: [],
+      }),
+    },
+    height: {
+      type: Number,
+      default: 300,
+    },
+    width: {
+      type: Number,
+      default: 300,
+    },
+    space: {
+      type: Number,
+      default: 16,
+    },
+  },
+  data() {
+    return {
+      id: `polyline-chat-${++key}`,
+      realWidth: this.width,
+      value: [],
+    };
+  },
+  watch: {
+    data: {
+      immediate: true,
+      handler(e) {
+        if (Array.isArray(e)) {
+          this.value = e;
+        } else if (e) {
+          this.value = [e];
+        }
+      },
+    },
+  },
+  computed: {
+    step({ height }) {
+      return Math.floor(height / 100);
+    },
+    list({ value, step }) {
+      return value.map(({ data, ...rest }) => {
+        return {
+          ...rest,
+          data: data.map((e) => Math.min(Math.abs(e || 0), 100) * step),
+        };
+      });
+    },
+    style({ realWidth }) {
+      return {
+        width: `${realWidth}px`,
+      };
+    },
+    barWidth({ realWidth, bars, space }) {
+      return (realWidth - (bars.length - 1) * space) / bars.length;
+    },
+    wrapStyle({ borderColor, borderWidth, border }) {
+      const style = {};
+      if (border === true) {
+        style.border = `${borderWidth}px solid ${borderColor}`;
+      } else if (['top', 'right', 'bottom', 'left'].includes(border)) {
+        style[`border-${border}`] = `${borderWidth}px solid ${borderColor}`;
+      }
+      return style;
+    },
+    innerStyle({ space, bars }) {
+      const style = {
+        'grid-gap': `${space}px`,
+        'grid-template-columns': new Array(Number(bars.length))
+          .fill(undefined)
+          .map(() => '1fr')
+          .join(' '),
+      };
+      return style;
+    },
+    barStyle({ height, bgColor }) {
+      return {
+        height: `${height}px`,
+        backgroundColor: bgColor,
+      };
+    },
+    mainStyle({ mainColor }) {
+      return {
+        backgroundColor: mainColor,
+      };
+    },
+    lineStyle({ lineColor }) {
+      return {
+        backgroundColor: lineColor,
+      };
+    },
+    textStyle({ textSize }) {
+      return {
+        fontSize: `${textSize}px`,
+      };
+    },
+  },
+  mounted() {
+    getRectById(this.id).then((e) => {
+      this.realWidth = e.data.width;
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.polyline-chat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  &-wrap {
+    position: relative;
+    width: 100%;
+  }
+  &-inner {
+    width: 100%;
+    display: grid;
+  }
+  &-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+  &-text {
+    position: absolute;
+    z-index: 1;
+    &:first-child {
+      top: -28px;
+    }
+    &:last-child {
+      bottom: -28px;
+    }
+  }
+  &-main,
+  &-line {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    transform: translateY(-50%);
+    height: 50%;
+  }
+  &-main {
+    height: 50%;
+  }
+  &-line {
+    height: 1px;
+  }
+  &-bar {
+    width: 100%;
+    position: relative;
+  }
+  &-title {
+    padding-top: 32px;
+    & > view {
+      display: flex;
+      align-items: center;
+      margin-top: 12px;
+      & > view {
+        width: 14px;
+        height: 14px;
+        margin-right: 8px;
+      }
+    }
+  }
+}
+</style>

package/lib/components/g-polyline-view/g-polyline-view.vue

@@ -0,0 +1,104 @@
+<template>
+  <view
+    v-for="(ele, i) in list"
+    :key="i"
+    class="polyline-view"
+    :style="{ left: `${i * (endLeft - startLeft) + startLeft}px` }"
+  >
+    <view class="polyline-view-start" :style="{ bottom: `${ele[0]}px`, left: 0 }">
+      <text :style="{ backgroundColor: colors[1] }"></text>
+      <text :style="{ backgroundColor: colors[0] }"></text>
+    </view>
+    <view class="polyline-view-line" :style="[lineStyle(ele, endLeft - startLeft)]"></view>
+    <view class="polyline-view-end" :style="{ bottom: `${ele[1]}px`, left: `${endLeft - startLeft}px` }">
+      <text :style="{ backgroundColor: colors[1] }"></text>
+      <text :style="{ backgroundColor: colors[0] }"></text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    color: {
+      type: String,
+      default: '',
+    },
+    startLeft: {
+      type: Number,
+      default: 0,
+    },
+    endLeft: {
+      type: Number,
+      default: 0,
+    },
+  },
+  computed: {
+    list({ data }) {
+      const list = [];
+      data.forEach((e, i) => {
+        if (data[i + 1] != null) {
+          list.push([e, data[i + 1]]);
+        }
+      });
+      return list;
+    },
+    colors({ color }) {
+      return [color, uni.$uv.colorGradient(color, '#fff', 6)[4]];
+    },
+    lineStyle({ color }) {
+      return (y, gu) => {
+        const diff = y[1] - y[0];
+        const gou = Math.abs(diff);
+        const xian = Math.sqrt(gou * gou + gu * gu);
+        const deg = gu > 0 ? Math.atan(gou / gu) * (180 / Math.PI) : 0;
+        return {
+          width: `${xian}px`,
+          transform: `rotate(${diff > 0 ? '-' : ''}${deg}deg)`,
+          backgroundColor: color,
+          left: 0,
+          bottom: `${y[0]}px`,
+        };
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.polyline-view {
+  position: absolute;
+  &-line {
+    transform-origin: left center;
+    height: 1px;
+  }
+  & > view {
+    position: absolute;
+    &:first-child,
+    &:last-child {
+      width: 1px;
+      height: 1px;
+      & > text {
+        position: absolute;
+        z-index: 1;
+        top: 50%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        border-radius: 100px;
+        &:first-child {
+          width: 14px;
+          height: 14px;
+        }
+        &:last-child {
+          width: 10px;
+          height: 10px;
+        }
+      }
+    }
+  }
+}
+</style>