简柏林 / thingskit-front · Commits

Commit f25c4521b7c3af946a74017e441d90ec37616255

Authored by xp.Huang
2 parents 85df67c1 3df887c7

Merge branch 'fix/DEFECT-1362' into 'main_dev' 

Fix/defect 1362

See merge request yunteng/thingskit-front!661
Inline Side-by-side
Showing 20 changed files with 232 additions and 96 deletions
@@ -232,6 +232,11 @@ @@ -232,6 +232,11 @@
232 } catch (error) { 232 } catch (error) {
233 throw error; 233 throw error;
234 } finally { 234 } finally {
  235 + activeKey.value = TabKeyEnum.BASIC;
  236 + selectWidgetKeys.value = {
  237 + componentKey: TextComponent1Config.key,
  238 + categoryKey: PackagesCategoryEnum.TEXT,
  239 + };
235 loading.value = false; 240 loading.value = false;
236 } 241 }
237 }; 242 };
@@ -26,8 +26,8 @@ export const option: PublicPresetOptions = { @@ -26,8 +26,8 @@ export const option: PublicPresetOptions = {
26 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6', 26 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6',
27 [ComponentConfigFieldEnum.INSTRUMENT_PANEL_COLOR]: '#61D4C5', 27 [ComponentConfigFieldEnum.INSTRUMENT_PANEL_COLOR]: '#61D4C5',
28 [ComponentConfigFieldEnum.GRADIENT_INFO]: [ 28 [ComponentConfigFieldEnum.GRADIENT_INFO]: [
29 - { key: Gradient.FIRST, value: 30, color: GradientColor.FIRST },  
30 - { key: Gradient.SECOND, value: 100, color: GradientColor.SECOND }, 29 + { key: Gradient.FIRST, value: 0, color: GradientColor.FIRST },
  30 + { key: Gradient.SECOND, value: 1, color: GradientColor.SECOND },
31 ], 31 ],
32 }; 32 };
33 33
@@ -55,32 +55,12 @@ @@ -55,32 +55,12 @@
55 defaultValue: GradientColor.FIRST, 55 defaultValue: GradientColor.FIRST,
56 }, 56 },
57 { 57 {
58 - field: ComponentConfigFieldEnum.FIRST_PHASE_VALUE,  
59 - label: '起始阀值',  
60 - component: 'InputNumber',  
61 - componentProps: {  
62 - placeholder: '请输入起始阀值',  
63 - min: 0,  
64 - },  
65 - },  
66 - {  
67 field: ComponentConfigFieldEnum.SECOND_PHASE_COLOR, 58 field: ComponentConfigFieldEnum.SECOND_PHASE_COLOR,
68 label: '结尾颜色', 59 label: '结尾颜色',
69 component: 'ColorPicker', 60 component: 'ColorPicker',
70 changeEvent: 'update:value', 61 changeEvent: 'update:value',
71 defaultValue: GradientColor.SECOND, 62 defaultValue: GradientColor.SECOND,
72 }, 63 },
73 - {  
74 - field: ComponentConfigFieldEnum.SECOND_PHASE_VALUE,  
75 - label: '结尾阀值',  
76 - component: 'InputNumber',  
77 - componentProps: ({ formModel }) => {  
78 - return {  
79 - placeholder: '请输入二阶段阀值',  
80 - min: formModel[ComponentConfigFieldEnum.FIRST_PHASE_VALUE],  
81 - };  
82 - },  
83 - },  
84 ], 64 ],
85 showActionButtonGroup: false, 65 showActionButtonGroup: false,
86 labelWidth: 120, 66 labelWidth: 120,
@@ -96,12 +76,12 @@ @@ -96,12 +76,12 @@
96 gradientInfo: [ 76 gradientInfo: [
97 { 77 {
98 key: Gradient.FIRST, 78 key: Gradient.FIRST,
99 - value: item[ComponentConfigFieldEnum.FIRST_PHASE_VALUE], 79 + value: 0,
100 color: item[ComponentConfigFieldEnum.FIRST_PHASE_COLOR], 80 color: item[ComponentConfigFieldEnum.FIRST_PHASE_COLOR],
101 }, 81 },
102 { 82 {
103 key: Gradient.SECOND, 83 key: Gradient.SECOND,
104 - value: item[ComponentConfigFieldEnum.SECOND_PHASE_VALUE], 84 + value: 1,
105 color: item[ComponentConfigFieldEnum.SECOND_PHASE_COLOR], 85 color: item[ComponentConfigFieldEnum.SECOND_PHASE_COLOR],
106 }, 86 },
107 ], 87 ],
@@ -122,9 +102,9 @@ @@ -122,9 +102,9 @@
122 [ComponentConfigFieldEnum.UNIT]: unit, 102 [ComponentConfigFieldEnum.UNIT]: unit,
123 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor, 103 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
124 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName, 104 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
125 - [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: firstRecord?.value, 105 + [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: 0,
126 [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color, 106 [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
127 - [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: secondRecord?.value, 107 + [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1,
128 [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color, 108 [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color,
129 [ComponentConfigFieldEnum.POINTER_COLOR]: pointerColor, 109 [ComponentConfigFieldEnum.POINTER_COLOR]: pointerColor,
130 }; 110 };
@@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('HumidityComponent'); @@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('HumidityComponent');
5 5
6 export const HumidityComponentConfig: ConfigType = { 6 export const HumidityComponentConfig: ConfigType = {
7 ...componentKeys, 7 ...componentKeys,
8 - title: '湿度仪表盘', 8 + title: '仪表盘1',
9 package: PackagesCategoryEnum.INSTRUMENT, 9 package: PackagesCategoryEnum.INSTRUMENT,
10 }; 10 };
@@ -46,14 +46,19 @@ @@ -46,14 +46,19 @@
46 if (!isArray(array)) { 46 if (!isArray(array)) {
47 return; 47 return;
48 } 48 }
49 - const item: any = [];  
50 - array.forEach((value, index) => {  
51 - item[index] =  
52 - index == 0  
53 - ? { offset: value.value == 100 ? 1 : 0, color: value.color }  
54 - : { offset: Number((value.value / 100).toFixed(1)), color: value.color };  
55 - });  
56 - return item; 49 + // const item: any = [];
  50 + // array.forEach((value, index) => {
  51 + // item[index] =
  52 + // index == 0
  53 + // ? { offset: value.value == 100 ? 1 : 0, color: value.color }
  54 + // : { offset: Number((value.value / 100).toFixed(1)), color: value.color };
  55 + // });
  56 + const colorList = array.map((item) => ({
  57 + offset: item.value,
  58 + color: item.color,
  59 + }));
  60 + console.log(array, colorList);
  61 + return colorList as any;
57 }; 62 };
58 63
59 const options = (): EChartsOption => { 64 const options = (): EChartsOption => {
@@ -80,16 +85,6 @@ @@ -80,16 +85,6 @@
80 x2: 1, 85 x2: 1,
81 y2: 0, 86 y2: 0,
82 colorStops: instrumentPanelColor, 87 colorStops: instrumentPanelColor,
83 - // colorStops: [  
84 - // {  
85 - // offset: 0,  
86 - // color: '#07ffd6',  
87 - // },  
88 - // {  
89 - // offset: 1,  
90 - // color: '#5eff10',  
91 - // },  
92 - // ],  
93 global: false, 88 global: false,
94 }, 89 },
95 }, 90 },
@@ -100,10 +95,6 @@ @@ -100,10 +95,6 @@
100 width: unref(getRatio) ? 30 * unref(getRatio) : 30, 95 width: unref(getRatio) ? 30 * unref(getRatio) : 30,
101 }, 96 },
102 }, 97 },
103 - // itemStyle: {  
104 - // // color: instrumentPanelColor,  
105 - // color: new graphic.LinearGradient(0, 1, 0, 0, instrumentPanelColor),  
106 - // },  
107 axisTick: { 98 axisTick: {
108 show: false, 99 show: false,
109 }, 100 },
@@ -25,8 +25,8 @@ export const option: PublicPresetOptions = { @@ -25,8 +25,8 @@ export const option: PublicPresetOptions = {
25 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6', 25 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6',
26 [ComponentConfigFieldEnum.INSTRUMENT_PANEL_COLOR]: '#61D4C5', 26 [ComponentConfigFieldEnum.INSTRUMENT_PANEL_COLOR]: '#61D4C5',
27 [ComponentConfigFieldEnum.GRADIENT_INFO]: [ 27 [ComponentConfigFieldEnum.GRADIENT_INFO]: [
28 - { key: Gradient.FIRST, value: 30, color: GradientColor.FIRST },  
29 - { key: Gradient.SECOND, value: 100, color: GradientColor.SECOND }, 28 + { key: Gradient.FIRST, value: 0, color: GradientColor.FIRST },
  29 + { key: Gradient.SECOND, value: 1, color: GradientColor.SECOND },
30 ], 30 ],
31 }; 31 };
32 32
@@ -47,32 +47,12 @@ @@ -47,32 +47,12 @@
47 defaultValue: GradientColor.FIRST, 47 defaultValue: GradientColor.FIRST,
48 }, 48 },
49 { 49 {
50 - field: ComponentConfigFieldEnum.FIRST_PHASE_VALUE,  
51 - label: '起始阀值',  
52 - component: 'InputNumber',  
53 - componentProps: {  
54 - placeholder: '请输入起始阀值',  
55 - min: 0,  
56 - },  
57 - },  
58 - {  
59 field: ComponentConfigFieldEnum.SECOND_PHASE_COLOR, 50 field: ComponentConfigFieldEnum.SECOND_PHASE_COLOR,
60 label: '结尾颜色', 51 label: '结尾颜色',
61 component: 'ColorPicker', 52 component: 'ColorPicker',
62 changeEvent: 'update:value', 53 changeEvent: 'update:value',
63 defaultValue: GradientColor.SECOND, 54 defaultValue: GradientColor.SECOND,
64 }, 55 },
65 - {  
66 - field: ComponentConfigFieldEnum.SECOND_PHASE_VALUE,  
67 - label: '结尾阀值',  
68 - component: 'InputNumber',  
69 - componentProps: ({ formModel }) => {  
70 - return {  
71 - placeholder: '请输入二阶段阀值',  
72 - min: formModel[ComponentConfigFieldEnum.FIRST_PHASE_VALUE],  
73 - };  
74 - },  
75 - },  
76 ], 56 ],
77 showActionButtonGroup: false, 57 showActionButtonGroup: false,
78 labelWidth: 120, 58 labelWidth: 120,
@@ -88,12 +68,12 @@ @@ -88,12 +68,12 @@
88 gradientInfo: [ 68 gradientInfo: [
89 { 69 {
90 key: Gradient.FIRST, 70 key: Gradient.FIRST,
91 - value: item[ComponentConfigFieldEnum.FIRST_PHASE_VALUE], 71 + value: 0,
92 color: item[ComponentConfigFieldEnum.FIRST_PHASE_COLOR], 72 color: item[ComponentConfigFieldEnum.FIRST_PHASE_COLOR],
93 }, 73 },
94 { 74 {
95 key: Gradient.SECOND, 75 key: Gradient.SECOND,
96 - value: item[ComponentConfigFieldEnum.SECOND_PHASE_VALUE], 76 + value: 1,
97 color: item[ComponentConfigFieldEnum.SECOND_PHASE_COLOR], 77 color: item[ComponentConfigFieldEnum.SECOND_PHASE_COLOR],
98 }, 78 },
99 ], 79 ],
@@ -114,12 +94,13 @@ @@ -114,12 +94,13 @@
114 [ComponentConfigFieldEnum.UNIT]: unit, 94 [ComponentConfigFieldEnum.UNIT]: unit,
115 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor, 95 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
116 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName, 96 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
117 - [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: firstRecord?.value, 97 + [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: 0,
118 [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color, 98 [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
119 - [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: secondRecord?.value, 99 + [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1,
120 [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color, 100 [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color,
121 [ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE]: progressBarCircle, 101 [ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE]: progressBarCircle,
122 }; 102 };
  103 + console.log(value, 'value');
123 return setFieldsValue(value); 104 return setFieldsValue(value);
124 }; 105 };
125 106
@@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('HumidityComponent1'); @@ -5,6 +5,6 @@ const componentKeys = useComponentKeys('HumidityComponent1');
5 5
6 export const HumidityComponent1Config: ConfigType = { 6 export const HumidityComponent1Config: ConfigType = {
7 ...componentKeys, 7 ...componentKeys,
8 - title: '湿度仪表盘', 8 + title: '仪表盘2',
9 package: PackagesCategoryEnum.INSTRUMENT, 9 package: PackagesCategoryEnum.INSTRUMENT,
10 }; 10 };
@@ -48,14 +48,11 @@ @@ -48,14 +48,11 @@
48 if (!isArray(array)) { 48 if (!isArray(array)) {
49 return; 49 return;
50 } 50 }
51 - const item: any = [];  
52 - array.forEach((value, index) => {  
53 - item[index] =  
54 - index == 0  
55 - ? { offset: value.value == 100 ? 1 : 0, color: value.color }  
56 - : { offset: Number((value.value / 100).toFixed(1)), color: value.color };  
57 - });  
58 - return item; 51 + const colorList = array.map((item) => ({
  52 + offset: item.value,
  53 + color: item.color,
  54 + }));
  55 + return colorList as any;
59 }; 56 };
60 57
61 const titleValue = ref<number>(20); 58 const titleValue = ref<number>(20);
@@ -53,18 +53,19 @@ @@ -53,18 +53,19 @@
53 }, 53 },
54 progress: { 54 progress: {
55 show: true, 55 show: true,
56 - width: 30, 56 + width: unref(getRatio) ? 24 * unref(getRatio) : 24,
57 }, 57 },
58 pointer: { 58 pointer: {
59 show: false, 59 show: false,
60 }, 60 },
61 axisLine: { 61 axisLine: {
62 lineStyle: { 62 lineStyle: {
63 - width: 30, 63 + width: unref(getRatio) ? 24 * unref(getRatio) : 24,
64 }, 64 },
65 }, 65 },
66 axisTick: { 66 axisTick: {
67 - distance: -35, 67 + distance: unref(getRatio) ? -35 * unref(getRatio) : -35,
  68 + length: unref(getRatio) ? 8 * unref(getRatio) : 8,
68 splitNumber: 5, 69 splitNumber: 5,
69 lineStyle: { 70 lineStyle: {
70 width: 2, 71 width: 2,
@@ -72,8 +73,8 @@ @@ -72,8 +73,8 @@
72 }, 73 },
73 }, 74 },
74 splitLine: { 75 splitLine: {
75 - distance: -40,  
76 - length: 10, 76 + distance: unref(getRatio) ? -40 * unref(getRatio) : -40,
  77 + length: unref(getRatio) ? 12 * unref(getRatio) : 12,
77 lineStyle: { 78 lineStyle: {
78 width: 3, 79 width: 3,
79 color: '#999', 80 color: '#999',
@@ -94,8 +95,8 @@ @@ -94,8 +95,8 @@
94 width: '60%', 95 width: '60%',
95 lineHeight: 10, 96 lineHeight: 10,
96 borderRadius: 8, 97 borderRadius: 8,
97 - offsetCenter: [0, '30%'],  
98 - fontSize: 14, 98 + offsetCenter: [0, '40%'],
  99 + fontSize: unref(getRatio) ? 14 * unref(getRatio) : 14,
99 fontWeight: 'bolder', 100 fontWeight: 'bolder',
100 formatter: `{value} ${unit ?? ''}`, 101 formatter: `{value} ${unit ?? ''}`,
101 color: fontColor || 'inherit', 102 color: fontColor || 'inherit',
@@ -186,10 +187,37 @@ @@ -186,10 +187,37 @@
186 187
187 const resize = async () => { 188 const resize = async () => {
188 await nextTick(); 189 await nextTick();
  190 + unref(chartInstance)?.setOption({
  191 + series: [
  192 + {
  193 + detail: {
  194 + fontSize: 14 * unref(getRatio),
  195 + },
  196 + progress: {
  197 + width: 24 * unref(getRatio),
  198 + },
  199 + axisLine: {
  200 + lineStyle: {
  201 + width: 24 * unref(getRatio),
  202 + },
  203 + },
  204 + axisTick: {
  205 + distance: -35 * unref(getRatio),
  206 + length: 6 * unref(getRatio),
  207 + },
  208 + splitLine: {
  209 + // 分割线与轴线距离
  210 + distance: -40 * unref(getRatio),
  211 + length: 12 * unref(getRatio),
  212 + },
  213 + },
  214 + ],
  215 + });
189 unref(chartInstance)?.resize(); 216 unref(chartInstance)?.resize();
190 }; 217 };
191 218
192 useComponentScale(props, resize); 219 useComponentScale(props, resize);
  220 + const { getRatio } = useComponentScale(props, resize);
193 </script> 221 </script>
194 222
195 <template> 223 <template>
  1 +import { cloneDeep } from 'lodash-es';
  2 +import { PictureConfig } from '.';
  3 +import {
  4 + ConfigType,
  5 + CreateComponentType,
  6 + PublicComponentOptions,
  7 + PublicPresetOptions,
  8 +} from '../../../index.type';
  9 +import { PublicConfigClass, componentInitConfig } from '../../../publicConfig';
  10 +
  11 +export const option: PublicPresetOptions = {
  12 + componetDesign: false,
  13 +};
  14 +
  15 +export default class Config extends PublicConfigClass implements CreateComponentType {
  16 + public key: string = PictureConfig.key;
  17 +
  18 + public attr = { ...componentInitConfig };
  19 +
  20 + public componentConfig: ConfigType = cloneDeep(PictureConfig);
  21 +
  22 + public persetOption = cloneDeep(option);
  23 +
  24 + public option: PublicComponentOptions;
  25 +
  26 + constructor(option: PublicComponentOptions) {
  27 + super();
  28 + this.option = { ...option };
  29 + }
  30 +}
  1 +<script lang="ts" setup></script>
  2 +
  3 +<template><main></main></template>
  1 +<script lang="ts" setup>
  2 + // import { computed } from 'vue';
  3 + import { commonDataSourceSchemas } from '../../../config/common.config';
  4 + import { BasicForm, useForm } from '/@/components/Form';
  5 + import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
  6 +
  7 + // const props = defineProps<{
  8 + // values: PublicComponentDataSourceProps;
  9 + // }>();
  10 +
  11 + const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
  12 + labelWidth: 0,
  13 + showActionButtonGroup: false,
  14 + layout: 'horizontal',
  15 + labelCol: { span: 0 },
  16 + schemas: commonDataSourceSchemas(),
  17 + });
  18 +
  19 + // const getBindValues = computed(() => {
  20 + // return props.values.bindValue;
  21 + // });
  22 +
  23 + const getFormValues = () => {
  24 + return getFieldsValue();
  25 + };
  26 +
  27 + const setFormValues = (record: Recordable) => {
  28 + return setFieldsValue(record);
  29 + };
  30 +
  31 + defineExpose({
  32 + getFormValues,
  33 + setFormValues,
  34 + validate,
  35 + resetFormValues: resetFields,
  36 + } as PublicFormInstaceType);
  37 +</script>
  38 +
  39 +<template>
  40 + <BasicForm @register="register" />
  41 +</template>
  1 +import { useComponentKeys } from '../../../hook/useComponentKeys';
  2 +import { ConfigType, PackagesCategoryEnum } from '../../../index.type';
  3 +
  4 +const componentKeys = useComponentKeys('Picture');
  5 +export const PictureConfig: ConfigType = {
  6 + ...componentKeys,
  7 + title: '图片组件',
  8 + package: PackagesCategoryEnum.OTHER,
  9 +};
  1 +<script lang="ts" setup>
  2 + import { ref } from 'vue';
  3 + import { Image as AntImage } from 'ant-design-vue';
  4 + import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
  5 + import { useDataFetch } from '../../../hook/useSocket';
  6 + import { ComponentPropsConfigType, DataFetchUpdateFn } from '../../../index.type';
  7 +
  8 + const props = defineProps<{
  9 + config: ComponentPropsConfigType;
  10 + }>();
  11 +
  12 + const fallback =
  13 + 'data:image/png;base64,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';
  14 +
  15 + const time = ref<Nullable<number>>(null);
  16 +
  17 + const url = ref<string>(fallback);
  18 +
  19 + // const getImagBase64 = ref(fallback);
  20 +
  21 + // const getBase64Image = (url: string) => {
  22 + // let canvas: Nullable<HTMLCanvasElement> = document.createElement('canvas');
  23 + // const ctx = canvas.getContext('2d');
  24 + // let image: Nullable<HTMLImageElement> = new Image();
  25 +
  26 + // image.onload = function () {
  27 + // canvas!.height = image!.height;
  28 + // canvas!.width = image!.width;
  29 + // ctx?.drawImage(image!, 0, 0);
  30 + // const dataUrl = canvas!.toDataURL('image/png');
  31 + // getImagBase64.value = dataUrl;
  32 + // console.log(dataUrl);
  33 + // image = null;
  34 + // canvas = null;
  35 + // };
  36 + // image.setAttribute('crossOrigin', 'Anonymous');
  37 + // image.src = url;
  38 + // };
  39 +
  40 + const updateFn: DataFetchUpdateFn = (message, attribute) => {
  41 + const { data = {} } = message;
  42 + const [latest] = data[attribute] || [];
  43 + const [timespan, value] = latest;
  44 + time.value = timespan;
  45 + url.value = `${value}?timespan=${timespan}`;
  46 + };
  47 +
  48 + useDataFetch(props, updateFn);
  49 +</script>
  50 +
  51 +<template>
  52 + <main class="w-full h-full flex flex-col items-center">
  53 + <AntImage :src="url" :fallback="fallback" />
  54 + <UpdateTime :time="time" />
  55 + </main>
  56 +</template>
  57 +
  58 +<style scoped lang="less">
  59 + :deep(.ant-image) {
  60 + @apply flex justify-center w-auto;
  61 +
  62 + height: calc(100% - 56px);
  63 +
  64 + img {
  65 + @apply w-auto h-full;
  66 + }
  67 + }
  68 +</style>
1 import { MonitorVideoConfig } from './MonitorVideo'; 1 import { MonitorVideoConfig } from './MonitorVideo';
  2 +import { PictureConfig } from './Picture';
2 3
3 -export const OtherList = [MonitorVideoConfig]; 4 +export const OtherList = [MonitorVideoConfig, PictureConfig];
@@ -48,6 +48,7 @@ @@ -48,6 +48,7 @@
48 return { 48 return {
49 tooltip: { 49 tooltip: {
50 trigger: 'item', 50 trigger: 'item',
  51 + confine: true,
51 }, 52 },
52 legend: { 53 legend: {
53 top: '5%', 54 top: '5%',
@@ -48,6 +48,7 @@ @@ -48,6 +48,7 @@
48 return { 48 return {
49 tooltip: { 49 tooltip: {
50 trigger: 'item', 50 trigger: 'item',
  51 + confine: true,
51 }, 52 },
52 legend: { 53 legend: {
53 top: '5%', 54 top: '5%',
@@ -16,7 +16,7 @@ export enum FetchComFlagTypeEnum { @@ -16,7 +16,7 @@ export enum FetchComFlagTypeEnum {
16 export enum PackagesCategoryNameEnum { 16 export enum PackagesCategoryNameEnum {
17 TEXT = '文本组件', 17 TEXT = '文本组件',
18 INSTRUMENT = '仪表组件', 18 INSTRUMENT = '仪表组件',
19 - PICTURE = '图片组件', 19 + // PICTURE = '图片组件',
20 CONTROL = '控制组件', 20 CONTROL = '控制组件',
21 MAP = '地图组件', 21 MAP = '地图组件',
22 FLOWMETER = '流量计', 22 FLOWMETER = '流量计',
@@ -30,7 +30,7 @@ export enum PackagesCategoryNameEnum { @@ -30,7 +30,7 @@ export enum PackagesCategoryNameEnum {
30 export enum PackagesCategoryEnum { 30 export enum PackagesCategoryEnum {
31 TEXT = 'TEXT', 31 TEXT = 'TEXT',
32 INSTRUMENT = 'INSTRUMENT', 32 INSTRUMENT = 'INSTRUMENT',
33 - PICTURE = 'PICTURE', 33 + // PICTURE = 'PICTURE',
34 CONTROL = 'CONTROL', 34 CONTROL = 'CONTROL',
35 MAP = 'MAP', 35 MAP = 'MAP',
36 FLOWMETER = 'FLOWMETER', 36 FLOWMETER = 'FLOWMETER',
@@ -3,7 +3,7 @@ import { FlowmeterList } from './components/Flowmeter'; @@ -3,7 +3,7 @@ import { FlowmeterList } from './components/Flowmeter';
3 import { InstrumentList } from './components/Instrument'; 3 import { InstrumentList } from './components/Instrument';
4 import { MapList } from './components/Map'; 4 import { MapList } from './components/Map';
5 import { OtherList } from './components/Other'; 5 import { OtherList } from './components/Other';
6 -import { PictureList } from './components/Picture'; 6 +// import { PictureList } from './components/Picture';
7 import { TextList } from './components/Text'; 7 import { TextList } from './components/Text';
8 import { STATISTICSList } from './components/Statistics'; 8 import { STATISTICSList } from './components/Statistics';
9 import { PackagesCategoryEnum, PackagesType } from './index.type'; 9 import { PackagesCategoryEnum, PackagesType } from './index.type';
@@ -11,7 +11,7 @@ import { PackagesCategoryEnum, PackagesType } from './index.type'; @@ -11,7 +11,7 @@ import { PackagesCategoryEnum, PackagesType } from './index.type';
11 export const packageList: PackagesType = { 11 export const packageList: PackagesType = {
12 [PackagesCategoryEnum.TEXT]: TextList, 12 [PackagesCategoryEnum.TEXT]: TextList,
13 [PackagesCategoryEnum.INSTRUMENT]: InstrumentList, 13 [PackagesCategoryEnum.INSTRUMENT]: InstrumentList,
14 - [PackagesCategoryEnum.PICTURE]: PictureList, 14 + // [PackagesCategoryEnum.PICTURE]: PictureList,
15 [PackagesCategoryEnum.CONTROL]: ControlList, 15 [PackagesCategoryEnum.CONTROL]: ControlList,
16 [PackagesCategoryEnum.MAP]: MapList, 16 [PackagesCategoryEnum.MAP]: MapList,
17 [PackagesCategoryEnum.FLOWMETER]: FlowmeterList, 17 [PackagesCategoryEnum.FLOWMETER]: FlowmeterList,