简柏林 / thingskit-view · Commits

Commit bd009920c1d6306c6cdbbe05066c7bfc2439b4e6

Authored by fengwotao
1 parent 06278a78

perf(external/Componse): 修复摄像头更改源地址无法切换播放问题

Inline Side-by-side
Showing 4 changed files with 65 additions and 29 deletions
... ... @@ -4,7 +4,7 @@ import { CameraConfig } from './index'
4 4 import cloneDeep from 'lodash/cloneDeep'
5 5
6 6 export const option = {
7   - dataset: 'http://113.204.115.250:83/openUrl/zXuPw5y/live.m3u8'
  7 + dataset: 'http://113.204.115.250:83/openUrl/vCJagUM/live.m3u8'
8 8 }
9 9
10 10 export default class Config extends PublicConfigClass implements CreateComponentType {
... ...
... ... @@ -4,10 +4,16 @@ import { Title1Config } from './index'
4 4 import cloneDeep from 'lodash/cloneDeep'
5 5
6 6 export const option = {
7   - /**
8   - * Naive UI Date Picker部分属性
9   - */
10   - dataset: '我是标题'
  7 + dataset: '我是标题',
  8 + attribute: {
  9 + linearColors: ['#0559A3', '#0654A3', '#2AFFFF', '#2AFFFF','#2affff',' #2affff','#16d9d9'],
  10 + fontSize: 20,
  11 + fontPos: {
  12 + x: 0,
  13 + y: 20
  14 + },
  15 + fontColor: '#2AFFFF'
  16 + }
11 17 }
12 18
13 19 export default class Config extends PublicConfigClass implements CreateComponentType {
... ...
1 1 <template>
2 2 <CollapseItem name="配置" :expanded="true">
3 3 <SettingItemBox name="标题">
4   - <SettingItem name="标题">
  4 + <SettingItem name="内容">
5 5 <n-input v-model:value="optionData.dataset" />
6 6 </SettingItem>
  7 + <SettingItem name="大小">
  8 + <n-input v-model:value="optionData.attribute.fontSize" />
  9 + </SettingItem>
  10 + <SettingItem name="颜色">
  11 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>
  12 + </SettingItem>
  13 + <SettingItem name="x轴位置">
  14 + <n-input v-model:value="optionData.attribute.fontPos.x" />
  15 + </SettingItem>
  16 + <SettingItem name="y轴位置">
  17 + <n-input v-model:value="optionData.attribute.fontPos.y" />
  18 + </SettingItem>
  19 + </SettingItemBox>
  20 + <SettingItemBox
  21 + :name="`装饰颜色-${index + 1}`"
  22 + v-for="(item, index) in optionData.attribute.linearColors"
  23 + :key="index"
  24 + >
  25 + <SettingItem name="颜色">
  26 + <n-color-picker
  27 + size="small"
  28 + :modes="['hex']"
  29 + v-model:value="optionData.attribute.linearColors[index]"
  30 + ></n-color-picker>
  31 + </SettingItem>
  32 + <SettingItem>
  33 + <n-button
  34 + size="small"
  35 + @click="optionData.attribute.linearColors[index] = optionData.attribute.linearColors[index]"
  36 + >
  37 + 恢复默认
  38 + </n-button>
  39 + </SettingItem>
7 40 </SettingItemBox>
8 41 </CollapseItem>
9 42 </template>
... ...
... ... @@ -3,19 +3,18 @@
3 3 <svg
4 4 xmlns="http://www.w3.org/2000/svg"
5 5 xmlns:xlink="http://www.w3.org/1999/xlink"
6   - width="492"
7   - height="30"
8   - viewBox="0 0 492 30"
  6 + :width="w"
  7 + :height="h"
9 8 fill="none"
10 9 >
11 10 <defs>
12 11 <linearGradient id="linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
13   - <stop offset="0" stop-color="#0559A3" stop-opacity="1" />
14   - <stop offset="1" stop-color="#0654A3" stop-opacity="0" />
  12 + <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />
  13 + <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="0" />
15 14 </linearGradient>
16 15 <linearGradient id="linear_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
17   - <stop offset="0" stop-color="#2AFFFF" stop-opacity="0" />
18   - <stop offset="1" stop-color="#2AFFFF" stop-opacity="0.2" />
  16 + <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="0" />
  17 + <stop offset="1" :stop-color="attribute.linearColors[3]" stop-opacity="0.2" />
19 18 </linearGradient>
20 19 </defs>
21 20 <g opacity="1" transform="translate(0 0) rotate(0 246 15)">
... ... @@ -25,16 +24,16 @@
25 24 fill="url(#linear_0)"
26 25 transform="translate(0 0) rotate(0 246 15)"
27 26 opacity="1"
28   - d="M0,30L492,30L492,0L0,0L0,30Z "
  27 + :d="`M0,${h / 2.933333333333333} L${w},${h / 2.933333333333333} L${w},0 L0,0 L0,${h / 2.933333333333333} Z`"
29 28 />
30 29 <g opacity="1" transform="translate(34 2) rotate(0 46 13)">
31 30 <text>
32 31 <tspan
33   - x="0"
34   - y="20"
35   - font-size="20"
  32 + :x="attribute.fontPos.x"
  33 + :y="attribute.fontPos.y"
  34 + :font-size="attribute.fontSize"
36 35 line-height="0"
37   - fill="#2AFFFF"
  36 + :fill="attribute.fontColor"
38 37 opacity="1"
39 38 font-family="YouSheBiaoTiHei"
40 39 letter-spacing="0"
... ... @@ -49,32 +48,32 @@
49 48 style="fill: #2affff"
50 49 transform="translate(0 0) rotate(0 0.5 15)"
51 50 opacity="1"
52   - d="M0,30L1,30L1,0L0,0L0,30Z "
  51 + :d="`M0,${h / 2.933333333333333}L1,${h / 2.933333333333333}L1,0L0,0L0,${h / 2.933333333333333}Z`"
53 52 />
54   - <g opacity="1" transform="translate(14 8) rotate(0 6.5 7)">
  53 + <g opacity="1" :transform="`translate(14 8) rotate(0 6.5 7)`">
55 54 <path
56 55 id="矩形 22"
57 56 fill-rule="evenodd"
58   - style="fill: #2affff"
  57 + :style="{ fill: attribute.linearColors[4] }"
59 58 transform="translate(2 0) rotate(0 5.5 3.5)"
60 59 opacity="1"
61   - d="M6,7L11,7L5,0L0,0L6,7Z "
  60 + :d="`M6,7 L11,7 L5,0 L0,0 L6,7 Z`"
62 61 />
63 62 <path
64 63 id="圆形 7"
65 64 fill-rule="evenodd"
66   - style="fill: #2affff"
  65 + :style="{ fill: attribute.linearColors[5] }"
67 66 transform="translate(0 5) rotate(0 2 2)"
68 67 opacity="1"
69   - d="M2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0Z "
  68 + :d="`M2,0 C0.9,0 0,0.9 0,2 C0,3.1 0.9,4 2,4 C3.1,4 4,3.1 4,2 C4,0.9 3.1,0 2,0 Z`"
70 69 />
71 70 <path
72 71 id="矩形 22"
73 72 fill-rule="evenodd"
74   - style="fill: #16d9d9"
  73 + :style="{ fill: attribute.linearColors[6] }"
75 74 transform="translate(2 7) rotate(0 5.5 3.5)"
76 75 opacity="1"
77   - d="M6,0L0,7L5,7L11,0L6,0Z "
  76 + :d="`M6,0L0,7L5,7L11,0L6,0Z `"
78 77 />
79 78 </g>
80 79 <g opacity="1" transform="translate(396 2) rotate(0 46.5 13.5)">
... ... @@ -102,15 +101,13 @@ const props = defineProps({
102 101 }
103 102 })
104 103
105   -const { dataset } = toRefs(props.chartConfig.option)
  104 +const { dataset, attribute } = toRefs(props.chartConfig.option)
106 105
107 106 const { w, h } = toRefs(props.chartConfig.attr)
108 107 </script>
109 108
110 109 <style lang="scss" scoped>
111 110 .go-content-box {
112   - width: v-bind('w + "px"');
113   - height: v-bind('h + "px"');
114 111 display: flex;
115 112 align-items: center;
116 113 justify-content: center;
... ...