perf: variable image component add default image

ww
1 parent d7612c10
Showing 2 changed files with 143 additions and 50 deletions
src/main/webapp/js/grapheditor/Format.js
src/main/webapp/styles/formatChange.css
--- a/src/main/webapp/js/grapheditor/Format.js
View file @a9468f6
+++ b/src/main/webapp/js/grapheditor/Format.js
View file @a9468f6
@@ -5972,46 +5972,20 @@ DataFormatPanel.prototype.addDataFont = function (container) {
              * @description
              */
             DATA_SOURCE_COMP_EL: 'varImgDataSourceEl',
-        }
-
-        const enumConst = {
-
-            /**
-             * @description 最小值
-             */
-            MIN: 'min',
-
-            /**
-             * @description 最大值
-             */
-            MAX: 'max',
-
-            /**
-             * @description 图片字段 key
-             */
-            IMAGE: 'image',
             /**
-             * @description 颜色
+             * @description 默认图片
              */
-            COLOR: 'color',
+            DEFAULT_IMAGE_EL: 'defaultImageEl',
             /**
-             * @description 图片来源
-             */
-            IMAGE_ORIGIN: 'imageOrigin',
-
-            /**
-             * @description 图库图形类别
+             * @description 默认图片filter
              */
-            IMAGE_GALLERY_CATEGORY: 'category',
-
-            /**
-             * @description 图表图形路径
-             */
-            IMAGE_GALLERY_IMAGE_PATH: 'imagePath',
+            DEFAULT_IMAGE_FILTER: 'defaultImageFilter'
         }
+        const enumConst = HandleDynamicEffect.enumVarImageConst
+
         let addRowNumber = 0
         let getDataSourceValue = () => {
@@ -6030,6 +6004,45 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             createDelRowEvent()
             createSetImgEvent()
             createDelPreviewImgEvent()
+            createSelectDefaultImageEvent()
+            createDelDefaultImageEvent()
+        }
+
+        /**
+         * @description 选择默认图片
+         */
+        function createSelectDefaultImageEvent() {
+            $(`#${enumActionEl.DEFAULT_IMAGE_EL}`).on('click', `.${enumActionEl.SET_IMG_EL}`, event => {
+                if ($(event.target).hasClass(enumActionEl.DEL_PREVIEW_IMG)) return
+                generatorUploadLayerComponent((imageState) => {
+                    $(`#${enumActionEl.DEFAULT_IMAGE_EL}`)
+                        .find('img').attr('src', imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH])
+
+                    form.val(enumActionEl.DEFAULT_IMAGE_FILTER, {
+                        [enumConst.IMAGE_ORIGIN]: imageState[enumConst.IMAGE_ORIGIN],
+                        [enumConst.IMAGE_GALLERY_CATEGORY]: imageState[enumConst.IMAGE_GALLERY_CATEGORY],
+                        [enumConst.IMAGE_GALLERY_IMAGE_PATH]: imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH],
+                    })
+
+                })
+            })
+        }
+
+        /**
+         * @description 删除默认图片
+         */
+        function createDelDefaultImageEvent() {
+            $(`#${enumActionEl.DEFAULT_IMAGE_EL}`).on('click', `.${enumActionEl.DEL_PREVIEW_IMG}`, (event) => {
+                $(event.target)
+                    .parents(`div.${enumActionEl.PREVIEW_IMG_CONTAINER}`).find('img').attr('src', '')
+
+                form.val(enumActionEl.DEFAULT_IMAGE_FILTER, {
+                    [enumConst.IMAGE_ORIGIN]: null,
+                    [enumConst.IMAGE_GALLERY_CATEGORY]: null,
+                    [enumConst.IMAGE_GALLERY_IMAGE_PATH]: null,
+                })
+
+            })
         }
         /**
@@ -6143,25 +6156,12 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                         </div>
                     </div>
                 </td>
-<!--                <td>-->
-<!--                    <div style="display: flex">-->
-<!--	                    <input class="layui-input" style="border-width: 1px; border-right: none;" autocomplete="off" ype="number" name="${enumConst.COLOR}" lay-filter="${enumConst.COLOR}" lay-verType="tips" lay-verify="required" />-->
-<!--	                    <div id="${getColorPickerFilter(addRowNumber)}"></div>-->
-<!--										</div>-->
-<!--                </td>-->
                 <td style="text-align: center">
                   <button type="button" class="layui-btn layui-btn-primary layui-border-red ${enumActionEl.DEL_ROW_EL}">删除</button>
                 </td>
               </tr>
             `
             $(`#${enumActionEl.TABLE_BODY_EL}`).append(content)
-            // colorpicker.render({
-            // 	elem: $(`#${getColorPickerFilter(addRowNumber)}`),
-            // 	done(color) {
-            // 		$(`#${enumActionEl.TABLE_BODY_EL} tr[lay-filter="${rowFormFilter}"]`).find(`input[lay-filter="${enumConst.COLOR}"]`).val(color)
-            // 	},
-            // 	predefine: true,
-            // });
             form.render()
             addRowNumber++
         }
@@ -6172,12 +6172,23 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          */
         function echoFormData(info) {
             const { condition = [] } = info
-            condition.forEach((item, index) => {
+            for (let index = 0; index < condition.length; index++) {
+                const item = condition[index]
+                if (item[enumConst.DEFAULT_IMAGE_FLAG]) continue
                 addRecord()
                 const rowFilter = getRowFilter(index)
                 $(`#${enumActionEl.TABLE_BODY_EL}`).find(`tr[lay-filter="${rowFilter}"] .${enumActionEl.PREVIEW_IMG_CONTAINER}>img`).attr('src', item[enumConst.IMAGE_GALLERY_IMAGE_PATH])
                 form.val(rowFilter, { ...item })
-            })
+            }
+        }
+
+        function echoDefaultImage(info) {
+            const { condition } = info
+            const data = condition.find(item => item[enumConst.DEFAULT_IMAGE_FLAG])
+            if (data) {
+                $(`#${enumActionEl.DEFAULT_IMAGE_EL}`).find(`.${enumActionEl.PREVIEW_IMG_CONTAINER}>img`).attr('src', data[enumConst.IMAGE_GALLERY_IMAGE_PATH])
+                form.val(enumActionEl.DEFAULT_IMAGE_FILTER, { ...data })
+            }
         }
         /**
@@ -6207,6 +6218,9 @@ DataFormatPanel.prototype.addDataFont = function (container) {
          */
         async function submit(callback) {
             const data = Array.from({ length: addRowNumber }).map((_, row) => form.val(getRowFilter(row))).filter(item => Object.keys(item).length)
+            const defaultImageConfig = form.val(enumActionEl.DEFAULT_IMAGE_FILTER)
+            defaultImageConfig[enumConst.DEFAULT_IMAGE_FLAG] = true
+            data.push(defaultImageConfig)
             if (!validate(data)) return
             const formVal = getDataSourceValue()
             const formModel = {
@@ -6226,7 +6240,20 @@ DataFormatPanel.prototype.addDataFont = function (container) {
         function createLayerForm(type) {
             const content = `
-				<div style="width: 300px; padding: 20px 0 0 20px;" id="${enumActionEl.DATA_SOURCE_COMP_EL}"></div>
+                <div id="${enumActionEl.DEFAULT_IMAGE_EL}" class="layui-form" lay-filter="${enumActionEl.DEFAULT_IMAGE_FILTER}">
+                    <div style="width: 60px; padding-left: 10px;">默认图片</div>
+                    <div class="${enumActionEl.SET_IMG_EL}">
+                        <input name="${enumConst.IMAGE_GALLERY_CATEGORY}" type="text" style="display: none">
+                        <input name="${enumConst.IMAGE_GALLERY_IMAGE_PATH}" type="text" style="display: none">
+                        <input name="${enumConst.IMAGE_ORIGIN}" type="text" style="display: none">
+                        <div class="${enumActionEl.PREVIEW_IMG_CONTAINER}">
+                            <img src="" alt="">
+                            <div class="${enumActionEl.DEL_PREVIEW_IMG}">x</div>
+                            <div class="add__button">+</div>
+                        </div>
+                    </div>
+                </div>
+				<div style="width: 300px; padding: 0 0 0 20px;" id="${enumActionEl.DATA_SOURCE_COMP_EL}"></div>
                 <div class="override__table" style="padding: 0 20px">
                     <table class="layui-table" >
                         <thead>
@@ -6234,7 +6261,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
 	                            <th style="text-align:center">最小值(>=)</th>
 	                            <th style="text-align:center">最大值(<=)</th>
 	                            <th style="text-align:center">对应图片</th>
-<!--	                            <th style="text-align:center">对应的颜色</th>-->
 	                            <th style="text-align:center">操作</th>
 	                        </tr>
                         </thead>
@@ -6282,6 +6308,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
                     } else {
                         echoDataSource(info)
                         echoFormData(info)
+                        echoDefaultImage(info)
                     }
                     generatorEventListen()
                 },
@@ -13465,6 +13492,49 @@ class HandleDynamicEffect {
         VIDEO_FLAG: 'videoComponentFlag'
     }
+    static enumVarImageConst = {
+
+        /**
+         * @description 最小值
+         */
+        MIN: 'min',
+
+        /**
+         * @description 最大值
+         */
+        MAX: 'max',
+
+        /**
+         * @description 图片字段 key
+         */
+        IMAGE: 'image',
+
+        /**
+         * @description 颜色
+         */
+        COLOR: 'color',
+
+        /**
+         * @description 图片来源
+         */
+        IMAGE_ORIGIN: 'imageOrigin',
+
+        /**
+         * @description 图库图形类别
+         */
+        IMAGE_GALLERY_CATEGORY: 'category',
+
+        /**
+         * @description 图表图形路径
+         */
+        IMAGE_GALLERY_IMAGE_PATH: 'imagePath',
+
+        /**
+         * @description 默认图片 flag
+         */
+        DEFAULT_IMAGE_FLAG: 'defaultImageFlag'
+    }
+
     static enumVideoAccessMode = {
         MANUAL_ENTER: 0,
         STREAMING: 1
@@ -13717,6 +13787,19 @@ class HandleDynamicEffect {
                 () => {
                     node.setStyle(`image;image=${imagePath};imageAspect=0;`)
                 })
+        } else if (!flag && node) {
+            const { condition = [], attr } = this.getBindData(subscriptionId, HandleDynamicEffect.enumActType.IMAGE)
+            const flag = HandleDynamicEffect.enumVarImageConst.DEFAULT_IMAGE_FLAG
+            const defaultBindData = condition.find(item => item[flag])
+            if (defaultBindData) {
+                const { imagePath } = defaultBindData
+                if (!imagePath) return
+                this.insertOnceUpdateFn(
+                    node,
+                    () => {
+                        node.setStyle(`image;image=${imagePath};imageAspect=0;`)
+                    })
+            }
         }
     }
--- a/src/main/webapp/styles/formatChange.css
View file @a9468f6
+++ b/src/main/webapp/styles/formatChange.css
View file @a9468f6
@@ -440,7 +440,17 @@
   opacity: 0;
 }
-/* ===== 数据动效   */
+#defaultImageEl {
+  display: flex;
+  align-items: center;
+  padding: 20px 0 0 20px;
+}
+
+#defaultImageEl {
+  
+}
+
+/* ===== 数据动效 =========  */
 .dynamic-effect__data-source-comp--override {
   padding: 0;
 }