Merge branch 'dev' of github.com:dataease/dataease into dev

2022-08-29 16:46:27 +08:00 · 2022-08-29 16:46:27 +08:00 · 42986de1fa
commit 42986de1fa
parent cfff619121 9be493cacb
38 changed files with 1272 additions and 77 deletions
--- a/backend/src/main/java/io/dataease/provider/query/ck/CKQueryProvider.java
+++ b/backend/src/main/java/io/dataease/provider/query/ck/CKQueryProvider.java
@ -1,5 +1,6 @@
 package io.dataease.provider.query.ck;

+import io.dataease.commons.utils.BeanUtils;
 import io.dataease.plugins.common.base.domain.ChartViewWithBLOBs;
 import io.dataease.plugins.common.base.domain.DatasetTableField;
 import io.dataease.plugins.common.base.domain.DatasetTableFieldExample;
@ -30,6 +31,7 @@ import javax.annotation.Resource;
 import java.text.MessageFormat;
 import java.text.SimpleDateFormat;
 import java.util.*;
+import java.util.concurrent.atomic.AtomicReference;
 import java.util.regex.Matcher;
 import java.util.regex.Pattern;
 import java.util.stream.Collectors;
@ -42,6 +44,8 @@ import static io.dataease.plugins.common.constants.datasource.SQLConstants.TABLE
 */
@Service("ckQueryProvider")
 public class CKQueryProvider extends QueryProvider {
+
+    private static final String toDateTime64 = "toDateTime64(%s, 3, '')";
    @Resource
    private DatasetTableFieldMapper datasetTableFieldMapper;

@ -1060,6 +1064,25 @@ public class CKQueryProvider extends QueryProvider {
        if (CollectionUtils.isEmpty(requestList)) {
            return null;
        }
+
+        AtomicReference<ChartExtFilterRequest> atomicReference = new AtomicReference<>();
+        requestList.forEach(request -> {
+            DatasetTableField datasetTableField = request.getDatasetTableField();
+            List<String> requestValue = request.getValue();
+            if (ObjectUtils.isNotEmpty(datasetTableField) && datasetTableField.getDeType() == DeTypeConstants.DE_TIME && StringUtils.equalsIgnoreCase(request.getOperator(), "between")) {
+                SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss.SSS");
+                request.setOperator("ge");
+                request.setValue(new ArrayList<String>(){{add(String.format(toDateTime64, "'" + simpleDateFormat.format(new Date(Long.parseLong(requestValue.get(0)))) + "'"));}});
+                ChartExtFilterRequest requestCopy = BeanUtils.copyBean(new ChartExtFilterRequest(), request);
+                requestCopy.setOperator("le");
+                requestCopy.setValue(new ArrayList<String>(){{add(String.format(toDateTime64, "'" + simpleDateFormat.format(new Date(Long.parseLong(requestValue.get(1)))) + "'"));}});
+                atomicReference.set(requestCopy);
+            }
+        });
+
+        if (ObjectUtils.isNotEmpty(atomicReference.get())) {
+            requestList.add(atomicReference.get());
+        }
        List<SQLObj> list = new ArrayList<>();
        for (ChartExtFilterRequest request : requestList) {
            List<String> value = request.getValue();
@ -1138,7 +1161,7 @@ public class CKQueryProvider extends QueryProvider {
                    whereValue = String.format(CKConstants.WHERE_BETWEEN, value.get(0), value.get(1));
                }
            } else {
-                whereValue = String.format(CKConstants.WHERE_VALUE_VALUE, value.get(0));
+                whereValue = isCompleteField(value.get(0)) ? value.get(0) : String.format(CKConstants.WHERE_VALUE_VALUE, value.get(0));
            }

            if (!request.getIsTree() && fieldList.get(0).getDeType() == DeTypeConstants.DE_TIME && StringUtils.equalsIgnoreCase(request.getOperator(), "null")) {
@ -1163,6 +1186,10 @@ public class CKQueryProvider extends QueryProvider {
        return CollectionUtils.isNotEmpty(list) ? "(" + String.join(" AND ", strList) + ")" : null;
    }

+    private boolean isCompleteField(String field) {
+        return StringUtils.isNotBlank(field) && StringUtils.startsWith(field, "toDateTime64('") && StringUtils.endsWith(field, "')");
+    }
+
    private String sqlFix(String sql) {
        if (sql.lastIndexOf(";") == (sql.length() - 1)) {
            sql = sql.substring(0, sql.length() - 1);
--- a/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java
+++ b/backend/src/main/java/io/dataease/service/panel/PanelGroupService.java
@ -412,6 +412,9 @@ public class PanelGroupService {
                mobileLayout = panelViewService.havaMobileLayout(templateData);
            }
            Map<String, String> dynamicDataMap = gson.fromJson(dynamicData, Map.class);
+            if(dynamicDataMap == null){
+                DataEaseException.throwException("Please use the template after v1.9");
+            }

            List<PanelViewInsertDTO> panelViews = new ArrayList<>();
            List<PanelGroupExtendDataDTO> viewsData = new ArrayList<>();
--- a/backend/src/main/java/io/dataease/service/wizard/ReptileService.java
+++ b/backend/src/main/java/io/dataease/service/wizard/ReptileService.java
@ -19,7 +19,7 @@ import java.util.*;
 public class ReptileService {
    String blogUrl = "https://blog.fit2cloud.com/?cat=321";
    //获取最新的前几条数据
-    private static int infoCount=1;
+    private static int infoCount=5;

    public List lastActive() {
        List result = new ArrayList();
--- a/frontend/src/assets/wizard_enterprise.png
+++ b/frontend/src/assets/wizard_enterprise.png
--- a/frontend/src/assets/wizard_enterprise.svg
+++ b/frontend/src/assets/wizard_enterprise.svg
@ -0,0 +1,81 @@
+<svg width="160" height="190" viewBox="0 0 160 190" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3828_138376)">
+<g opacity="0.5" filter="url(#filter0_d_3828_138376)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.9111 49.7578C42.9111 45.8918 46.0451 42.7578 49.9111 42.7578H124.771C128.637 42.7578 131.771 45.8918 131.771 49.7578V151.42C131.771 154.138 128.875 155.876 126.477 154.597L122.358 152.4C121.299 151.835 120.028 151.835 118.97 152.4L111.25 156.517C110.191 157.081 108.921 157.081 107.862 156.517L100.143 152.4C99.0839 151.835 97.8133 151.835 96.7545 152.4L89.0352 156.517C87.9764 157.081 86.7058 157.081 85.647 156.517L77.9277 152.4C76.8689 151.835 75.5983 151.835 74.5395 152.4L66.8202 156.517C65.7614 157.081 64.4908 157.081 63.432 156.517L55.7127 152.4C54.6539 151.835 53.3833 151.835 52.3245 152.4L48.2052 154.597C45.8073 155.876 42.9111 154.138 42.9111 151.42V49.7578Z" fill="#FCFDFF"/>
+</g>
+<g filter="url(#filter1_d_3828_138376)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.9111 59.7578C32.9111 55.8918 36.0451 52.7578 39.9111 52.7578H114.771C118.637 52.7578 121.771 55.8918 121.771 59.7578V161.42C121.771 164.138 118.875 165.876 116.477 164.597L112.358 162.4C111.299 161.835 110.028 161.835 108.97 162.4L101.25 166.517C100.191 167.081 98.9208 167.081 97.862 166.517L90.1427 162.4C89.0839 161.835 87.8133 161.835 86.7545 162.4L79.0352 166.517C77.9764 167.081 76.7058 167.081 75.647 166.517L67.9277 162.4C66.8689 161.835 65.5983 161.835 64.5395 162.4L56.8202 166.517C55.7614 167.081 54.4908 167.081 53.432 166.517L45.7127 162.4C44.6539 161.835 43.3833 161.835 42.3245 162.4L38.2052 164.597C35.8073 165.876 32.9111 164.138 32.9111 161.42V59.7578Z" fill="#FCFDFF"/>
+</g>
+<path d="M139 54C139 65.0457 130.046 74 119 74C107.954 74 99 65.0457 99 54C99 42.9543 107.954 34 119 34C130.046 34 139 42.9543 139 54Z" fill="url(#paint0_linear_3828_138376)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M119 35C108.507 35 100 43.5066 100 54C100 64.4934 108.507 73 119 73C129.493 73 138 64.4934 138 54C138 43.5066 129.493 35 119 35ZM98 54C98 42.402 107.402 33 119 33C130.598 33 140 42.402 140 54C140 65.598 130.598 75 119 75C107.402 75 98 65.598 98 54Z" fill="white"/>
+<path d="M113.5 50V49.5C113.5 46.46 115.963 44 119 44C122.037 44 124.5 46.46 124.5 49.5V50H127C127.552 50 128 50.45 128 51V63C128 63.55 127.552 64 127 64H111C110.447 64 110 63.55 110 63V51C110 50.45 110.447 50 111 50H113.5ZM122.5 49.5C122.5 47.565 120.933 46 119 46C118.54 45.9999 118.085 46.0903 117.66 46.2662C117.236 46.442 116.85 46.6998 116.525 47.0248C116.2 47.3499 115.942 47.7358 115.766 48.1605C115.59 48.5852 115.5 49.0403 115.5 49.5V50H122.5V49.5ZM119 59.5C119.663 59.5 120.299 59.2366 120.768 58.7678C121.237 58.2989 121.5 57.663 121.5 57C121.5 56.337 121.237 55.7011 120.768 55.2322C120.299 54.7634 119.663 54.5 119 54.5C118.337 54.5 117.701 54.7634 117.232 55.2322C116.763 55.7011 116.5 56.337 116.5 57C116.5 57.663 116.763 58.2989 117.232 58.7678C117.701 59.2366 118.337 59.5 119 59.5V59.5Z" fill="white"/>
+<mask id="mask0_3828_138376" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="53" y="59" width="46" height="46">
+<circle cx="75.9255" cy="81.616" r="22.616" fill="white"/>
+</mask>
+<g mask="url(#mask0_3828_138376)">
+<path d="M75.9254 81.6162L84.5582 102.521C88.6963 100.812 92.2333 97.9134 94.7226 94.1914C97.2119 90.4695 98.5414 86.094 98.5414 81.6162H75.9254Z" fill="url(#paint1_linear_3828_138376)"/>
+<path d="M75.9255 81.616L79.4276 59.2719C78.2702 59.0898 77.0979 59 75.9255 59C63.5188 59 53.3096 69.2104 53.3096 81.6184C53.3096 83.7413 53.6089 85.8543 54.1975 87.8948L75.9255 81.616Z" fill="#3370FF"/>
+<path d="M75.9263 81.6162L54.1709 87.7878C56.9221 97.4893 65.8443 104.232 75.9263 104.232C78.9519 104.232 81.9451 103.626 84.7338 102.446L75.9263 81.6162Z" fill="#3370FF"/>
+</g>
+<circle cx="75.9255" cy="81.6158" r="7.53865" fill="white"/>
+<path d="M54.4467 113.808H49V119.254H54.4467V113.808Z" fill="#3370FF"/>
+<path d="M99 113.808H58.7625V119.254H99V113.808Z" fill="url(#paint2_linear_3828_138376)"/>
+<path d="M54.4467 123.608H49V129.055H54.4467V123.608Z" fill="url(#paint3_linear_3828_138376)"/>
+<path d="M99 123.608H58.7625V129.055H99V123.608Z" fill="url(#paint4_linear_3828_138376)"/>
+<path d="M54.4467 134.936H49V140.382H54.4467V134.936Z" fill="url(#paint5_linear_3828_138376)"/>
+<path d="M99 134.936H58.7625V140.382H99V134.936Z" fill="url(#paint6_linear_3828_138376)"/>
+</g>
+<defs>
+<filter id="filter0_d_3828_138376" x="18.9111" y="24.7578" width="136.86" height="162.183" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.745833 0 0 0 0 0.562113 0 0 0 0 0.152274 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3828_138376"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3828_138376" result="shape"/>
+</filter>
+<filter id="filter1_d_3828_138376" x="8.91113" y="34.7578" width="136.86" height="162.183" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.745833 0 0 0 0 0.562113 0 0 0 0 0.152274 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3828_138376"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3828_138376" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_3828_138376" x1="99" y1="54.0183" x2="139" y2="54.0183" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EF713A"/>
+<stop offset="1" stop-color="#FFAE5A"/>
+</linearGradient>
+<linearGradient id="paint1_linear_3828_138376" x1="75.9254" y1="92.0781" x2="98.5414" y2="92.0781" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EF713A"/>
+<stop offset="1" stop-color="#FFAE5A"/>
+</linearGradient>
+<linearGradient id="paint2_linear_3828_138376" x1="71.483" y1="110.978" x2="111.83" y2="110.978" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EFEFFB"/>
+<stop offset="1" stop-color="#D0D7F6"/>
+</linearGradient>
+<linearGradient id="paint3_linear_3828_138376" x1="32.1082" y1="136.282" x2="37.5683" y2="136.282" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FA2853"/>
+<stop offset="1" stop-color="#FF5676"/>
+</linearGradient>
+<linearGradient id="paint4_linear_3828_138376" x1="71.483" y1="120.454" x2="111.83" y2="120.454" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EFEFFB"/>
+<stop offset="1" stop-color="#D0D7F6"/>
+</linearGradient>
+<linearGradient id="paint5_linear_3828_138376" x1="49" y1="137.661" x2="54.4467" y2="137.661" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EF713A"/>
+<stop offset="1" stop-color="#FFAE5A"/>
+</linearGradient>
+<linearGradient id="paint6_linear_3828_138376" x1="71.483" y1="131.139" x2="111.83" y2="131.139" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EFEFFB"/>
+<stop offset="1" stop-color="#D0D7F6"/>
+</linearGradient>
+<clipPath id="clip0_3828_138376">
+<rect width="160" height="190" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/frontend/src/assets/wizard_help.png
+++ b/frontend/src/assets/wizard_help.png
--- a/frontend/src/assets/wizard_help.svg
+++ b/frontend/src/assets/wizard_help.svg
@ -0,0 +1,44 @@
+<svg width="160" height="190" viewBox="0 0 160 190" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.9">
+<path d="M64.7415 83.2426C65.0559 83.2302 65.3703 83.2666 65.6735 83.3507L132.113 102.287C133.774 102.76 134.72 104.624 134.652 106.947L122.186 103.395H121.956H121.591L121.308 103.287C120.82 103.371 120.358 103.565 119.957 103.854C119.822 103.936 119.696 104.031 119.579 104.137L119.268 104.421C118.975 104.723 118.713 105.054 118.485 105.407L115.527 110.04C115.031 110.857 114.315 111.517 113.46 111.944C113.14 112.087 112.797 112.169 112.447 112.187H112.137H111.839L71.4949 100.585C71.2936 100.553 71.0884 100.553 70.8871 100.585H70.617C69.9876 100.746 69.3995 101.038 68.8918 101.443C68.3842 101.849 67.9685 102.357 67.6725 102.935C67.578 103.111 67.4834 103.273 67.4024 103.462C67.2917 103.671 67.1969 103.888 67.1187 104.11L41.0508 138.526C41.1523 137.984 41.2968 137.451 41.483 136.932L59.0417 88.6318C60.1358 85.4982 62.5535 83.2831 64.7415 83.2426Z" fill="#BC770A"/>
+<g opacity="0.9">
+<path d="M138.405 82.7308L110.567 136.393L61.7812 111.081L89.6186 57.3652L138.405 82.7308ZM113.62 123.994L115.727 119.942L119.063 113.513L134.096 84.5272L90.7802 62.0521L73.5591 95.184L70.304 101.465L80.6906 106.867L113.62 123.994Z" fill="white"/>
+<path d="M112.499 128.112L114.849 123.574L118.577 116.389L135.379 84.0129L90.3345 60.6328L71.1009 97.7357L67.4541 104.746L78.2595 110.351L112.499 128.112Z" fill="#FBFBFF"/>
+<path d="M76.6533 103.29L106.449 118.728L107.975 115.783L108.273 115.23L100.06 110.975L78.6253 99.8184L76.6533 103.29Z" fill="#CCCCCC"/>
+<path d="M112.229 108.338L108.447 106.38L82.5273 92.873L80.3662 96.709L110.27 112.296C110.918 110.972 111.567 109.648 112.229 108.338Z" fill="#D8D8D8"/>
+<path d="M115.309 102.249L107.556 98.1967L85.8507 86.9727L83.9463 90.4169L113.526 105.76L115.309 102.249Z" fill="#D8D8D8"/>
+<path d="M87.5391 83.8903L120.185 100.828C120.874 99.477 121.535 98.2209 122.224 96.9107L115.903 93.6421L89.6461 80.0273L87.5391 83.8903Z" fill="#D8D8D8"/>
+</g>
+<path d="M69.6975 104.135C69.603 104.297 69.5084 104.473 69.4274 104.648L67.4014 103.406C67.4824 103.217 67.577 103.054 67.6715 102.879L69.6975 104.135Z" fill="#F1C270"/>
+<path d="M69.4268 104.639C69.3186 104.849 69.2238 105.065 69.1432 105.287L67.1172 104.045C67.1953 103.822 67.2901 103.605 67.4008 103.396L69.4268 104.639Z" fill="#F1C270"/>
+<path d="M67.1187 104.057L69.1447 105.299L43.0768 139.768L41.0508 138.526L67.1187 104.057Z" fill="#F1C270"/>
+<path d="M72.6832 101.788C72.0516 101.944 71.4614 102.234 70.953 102.64C70.4447 103.046 70.0304 103.557 69.7387 104.138L68.6312 103.517L68.361 103.355L68.1044 103.193L67.8478 103.031L67.6182 102.882C67.9259 102.308 68.3526 101.806 68.8696 101.41C69.3867 101.015 69.9823 100.733 70.6167 100.586L72.6832 101.788Z" fill="#F1C270"/>
+<path d="M72.9114 101.76H72.6412L72.3981 101.612L72.155 101.45L71.8849 101.301L71.6282 101.125L71.3311 100.99L71.0745 100.842L70.8178 100.68L70.6152 100.585H70.8854L72.8979 101.828L72.6818 101.612L72.4251 101.463L72.1685 101.301L71.8984 101.139L71.6417 100.977L71.3311 100.815L71.0745 100.653L70.8448 100.518L72.8709 101.76H72.9114Z" fill="#F1C270"/>
+<path d="M73.5181 101.842C73.3192 101.792 73.1153 101.765 72.9103 101.761L72.6807 101.612L72.4375 101.464L72.1674 101.301L71.9108 101.139L71.6406 100.977L71.33 100.815L71.0734 100.653L70.8438 100.518C71.0451 100.486 71.2502 100.486 71.4516 100.518L73.5181 101.842Z" fill="#F1C270"/>
+<path d="M111.853 112.094L113.866 113.35L73.5211 101.842L71.4951 100.586L111.853 112.094Z" fill="#F1C270"/>
+<path d="M114.161 113.404H113.864L111.852 112.094H112.149L114.161 113.404Z" fill="#F1C270"/>
+<path d="M113.676 113.108L113.932 113.256L112.136 112.162L113.676 113.108Z" fill="#F1C270"/>
+<path d="M114.162 113.405H114.094H114.027L113.838 113.283L113.635 113.162L113.081 112.743L112.892 112.621L112.69 112.5L112.5 112.378L112.311 112.27L112.136 112.162H112.446L114.472 113.405H114.162Z" fill="#F1C270"/>
+<path d="M115.484 113.174C115.167 113.323 114.822 113.406 114.471 113.417L112.445 112.175C112.795 112.157 113.138 112.074 113.458 111.932L115.484 113.174Z" fill="#F1C270"/>
+<path d="M117.551 111.268C117.063 112.092 116.344 112.754 115.484 113.173L113.458 111.93C114.311 111.506 115.027 110.851 115.525 110.039L117.551 111.268Z" fill="#F1C270"/>
+<path d="M118.456 105.461L120.482 106.704L117.551 111.269L115.525 110.026L118.456 105.461Z" fill="#F1C270"/>
+<path d="M121.307 105.729C121.012 106.029 120.749 106.359 120.524 106.715L118.498 105.459C118.73 105.108 118.992 104.778 119.281 104.473L121.307 105.716L119.281 104.473L119.592 104.189L121.618 105.446C121.508 105.533 121.404 105.627 121.307 105.729V105.729Z" fill="#F1C270"/>
+<path d="M121.955 105.149L121.577 105.446L119.551 104.19C119.668 104.084 119.794 103.989 119.929 103.906L121.955 105.149Z" fill="#F1C270"/>
+<path d="M123.265 104.638C122.778 104.717 122.316 104.906 121.914 105.192L121.671 105.043L121.414 104.894L121.198 104.638L120.942 104.476L120.672 104.314L120.415 104.152L120.158 103.989L119.929 103.854C120.338 103.561 120.809 103.367 121.306 103.287L123.265 104.638Z" fill="#F1C270"/>
+<path d="M123.562 104.638C123.464 104.624 123.364 104.624 123.265 104.638L123.035 104.489L122.779 104.327L122.522 104.165L122.252 104.003L121.982 103.841L121.725 103.679L121.482 103.53L121.307 103.287H121.604L123.63 104.53L123.387 104.395L123.144 104.233L122.887 104.071L122.617 103.908L122.36 103.746L122.09 103.584L121.847 103.436L121.536 103.287H121.901L123.927 104.53C123.802 104.552 123.679 104.588 123.562 104.638V104.638Z" fill="#F1C270"/>
+<path d="M124.156 104.638H123.926L123.697 104.503L123.44 104.341L123.184 104.179L122.913 104.016L122.657 103.8L122.387 103.638L122.144 103.49L121.9 103.287H122.13L124.156 104.638Z" fill="#F1C270"/>
+<path d="M134.598 106.949L136.624 108.205L124.157 104.639L122.131 103.396L134.598 106.949Z" fill="#F1C270"/>
+<path d="M107.746 120.035L32 116.158L36.5112 28L97.8722 31.1471L111.528 46.2746L107.746 120.035Z" fill="white"/>
+<path d="M49.6396 56.1357L49.9367 50.1793L45.1284 49.9362L44.8177 55.8926L42.0488 55.744L42.7647 41.5215L45.5471 41.6566L45.2499 47.4779L50.0718 47.7211L50.369 41.9132L53.1378 42.0482L52.422 56.2843L49.6396 56.1357Z" fill="#8F959E"/>
+<path d="M55.7314 56.4472L56.4743 42.2246L65.848 42.6973L65.7129 45.2096L59.1757 44.8449L59.0136 48.1811L64.6189 48.4647L64.4973 50.9364L58.811 50.6123L58.6354 54.07L65.2267 54.4077L65.1051 56.8929L55.7314 56.4472Z" fill="#8F959E"/>
+<path d="M67.8203 57.0661L68.5497 42.8301L71.3321 42.9787L70.7243 54.7295L77.1805 55.0537L77.0589 57.5389L67.8203 57.0661Z" fill="#8F959E"/>
+<path d="M89.6196 50.0851C89.3808 50.598 89.0408 51.0574 88.6201 51.4358C88.1759 51.8285 87.6567 52.1271 87.0938 52.3137C86.4563 52.5334 85.7807 52.6207 85.1084 52.5703L82.407 52.4353L82.1369 57.8379L79.3545 57.7029L80.0839 43.4668L85.5946 43.7504C86.2693 43.7772 86.9332 43.9283 87.5531 44.1962C88.061 44.4427 88.5154 44.7869 88.8902 45.2092C89.2771 45.6349 89.5714 46.1362 89.7547 46.6814C90.121 47.803 90.0584 49.0205 89.5791 50.0986L89.6196 50.0851ZM86.7697 46.803C86.5772 46.604 86.3462 46.4463 86.0907 46.3394C85.8353 46.2326 85.5608 46.1789 85.2839 46.1816L82.6907 46.0466L82.488 49.95L85.0948 50.0716C85.3662 50.1048 85.6415 50.0825 85.9039 50.0058C86.1663 49.9292 86.4103 49.7999 86.6211 49.6259C86.9941 49.259 87.2163 48.7657 87.2438 48.2433C87.2713 47.7208 87.1021 47.207 86.7697 46.803V46.803Z" fill="#8F959E"/>
+<path d="M100.414 64.3116L40.9404 61.2676L40.7292 65.3952L100.202 68.4392L100.414 64.3116Z" fill="#DEE0E3"/>
+<path d="M99.8697 74.9717L40.3965 71.9277L40.1852 76.0554L99.6585 79.0994L99.8697 74.9717Z" fill="#DEE0E3"/>
+<path d="M99.3394 85.6358L39.8662 82.5918L39.6549 86.7194L99.1282 89.7634L99.3394 85.6358Z" fill="#DEE0E3"/>
+<path d="M98.7808 96.3213L39.3076 93.2773L39.0964 97.405L98.5696 100.449L98.7808 96.3213Z" fill="#DEE0E3"/>
+<path d="M98.2359 106.989L38.7627 103.945L38.5514 108.073L98.0247 111.117L98.2359 106.989Z" fill="#DEE0E3"/>
+<path d="M111.527 46.276L97.1289 45.5331L97.8718 31.1484L111.527 46.276Z" fill="#DEE0E3"/>
+<path d="M70.8846 100.586C71.0324 100.565 71.1826 100.565 71.3304 100.586L111.85 112.135H112.148C112.61 112.162 113.072 112.084 113.498 111.905C114.333 111.483 115.034 110.838 115.524 110.041L118.455 105.476C118.68 105.124 118.943 104.798 119.239 104.503L119.549 104.206C119.666 104.1 119.793 104.005 119.928 103.923C120.33 103.605 120.802 103.388 121.305 103.288H121.602H121.967L134.663 106.894L144.267 109.717C145.82 110.163 146.387 112.418 145.617 114.741L115.794 160.232C115.052 162.312 113.458 163.784 112.013 163.811C111.816 163.845 111.615 163.845 111.418 163.811L42.2369 144.01C41.6014 143.266 41.1603 142.375 40.9529 141.418C40.7455 140.461 40.7783 139.468 41.0483 138.527L67.1163 104.058C67.1944 103.835 67.2892 103.618 67.3999 103.409C67.481 103.22 67.5755 103.058 67.6701 102.883C67.972 102.314 68.3903 101.816 68.8976 101.421C69.4049 101.025 69.99 100.741 70.6145 100.586H70.8846Z" fill="#F4C04C"/>
+</g>
+</svg>
--- a/frontend/src/assets/wizard_main_bg.png
+++ b/frontend/src/assets/wizard_main_bg.png
--- a/frontend/src/assets/wizard_main_bg.svg
+++ b/frontend/src/assets/wizard_main_bg.svg
@ -0,0 +1,20 @@
+<svg width="1440" height="500" viewBox="0 0 1440 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3828_138290)">
+<rect width="1440" height="500" fill="#698CF7"/>
+<mask id="mask0_3828_138290" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="1440" height="500">
+<rect width="1440" height="500" fill="#E1EAFF"/>
+</mask>
+<g mask="url(#mask0_3828_138290)">
+<rect opacity="0.3" x="997.615" y="-520.646" width="649.042" height="904.316" rx="324.521" transform="rotate(30 997.615 -520.646)" fill="url(#paint0_linear_3828_138290)"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_3828_138290" x1="896.257" y1="-118.555" x2="1412.82" y2="314.888" gradientUnits="userSpaceOnUse">
+<stop stop-color="#698CF7"/>
+<stop offset="1" stop-color="#2C49F1" stop-opacity="0.301737"/>
+</linearGradient>
+<clipPath id="clip0_3828_138290">
+<rect width="1440" height="500" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/frontend/src/assets/wizard_main_bg_inner.png
+++ b/frontend/src/assets/wizard_main_bg_inner.png
--- a/frontend/src/assets/wizard_main_bg_inner.svg
+++ b/frontend/src/assets/wizard_main_bg_inner.svg
--- a/frontend/src/assets/wizard_quick_start.png
+++ b/frontend/src/assets/wizard_quick_start.png
--- a/frontend/src/assets/wizard_quick_start.svg
+++ b/frontend/src/assets/wizard_quick_start.svg
--- a/frontend/src/assets/wizard_video1.png
+++ b/frontend/src/assets/wizard_video1.png
--- a/frontend/src/assets/wizard_video1.svg
+++ b/frontend/src/assets/wizard_video1.svg
--- a/frontend/src/assets/wizard_video2.png
+++ b/frontend/src/assets/wizard_video2.png
--- a/frontend/src/assets/wizard_video2.svg
+++ b/frontend/src/assets/wizard_video2.svg
--- a/frontend/src/assets/wizard_video3.png
+++ b/frontend/src/assets/wizard_video3.png
--- a/frontend/src/assets/wizard_video3.svg
+++ b/frontend/src/assets/wizard_video3.svg
--- a/frontend/src/assets/wizard_wechat-group.png
+++ b/frontend/src/assets/wizard_wechat-group.png
--- a/frontend/src/assets/wizard_wechat-official.png
+++ b/frontend/src/assets/wizard_wechat-official.png
--- a/frontend/src/assets/wizard_wechat_group.svg
+++ b/frontend/src/assets/wizard_wechat_group.svg
--- a/frontend/src/assets/wizard_wechat_official
+++ b/frontend/src/assets/wizard_wechat_official
--- a/frontend/src/components/canvas/custom-component/UserViewDialog.vue
+++ b/frontend/src/components/canvas/custom-component/UserViewDialog.vue
@ -3,12 +3,12 @@
    <de-main-container v-show="showChartCanvas" class="">
      <div id="chartCanvas" class="canvas-class" :style="customStyle">
        <div class="canvas-class" :style="commonStyle">
-<!--          <svg-icon v-show="svgInnerEnable" :style="{'color':this.element.commonBackground.innerImageColor}" class="svg-background" :icon-class="mainSlotSvgInner" />-->
          <plugin-com
            v-if="chart.isPlugin"
            :component-name="chart.type + '-view'"
            :obj="{chart: mapChart || chart}"
            :chart="mapChart || chart"
+            :theme-style="element.commonBackground"
            class="chart-class"
          />
          <chart-component v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'" :theme-style="element.commonBackground" class="chart-class" :chart="mapChart || chart" />
@ -42,7 +42,7 @@ import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
 import { exportDetails, innerExportDetails } from '@/api/panel/panel'
 import html2canvas from 'html2canvasde'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
-import {deepCopy, exportImg, imgUrlTrans} from '@/components/canvas/utils/utils'
+import { deepCopy, exportImg, imgUrlTrans } from '@/components/canvas/utils/utils'
 import { getLinkToken, getToken } from '@/utils/auth'
 export default {
  name: 'UserViewDialog',
@ -101,7 +101,7 @@ export default {
    },

    svgInnerEnable() {
-      return !this.screenShot&&this.element.commonBackground.enable && this.element.commonBackground.backgroundType === 'innerImage' && typeof this.element.commonBackground.innerImage === 'string'
+      return !this.screenShot && this.element.commonBackground.enable && this.element.commonBackground.backgroundType === 'innerImage' && typeof this.element.commonBackground.innerImage === 'string'
    },
    mainSlotSvgInner() {
      if (this.svgInnerEnable) {
@ -124,7 +124,7 @@ export default {
        }
        if (this.element.commonBackground.enable) {
          if (this.screenShot && this.element.commonBackground.backgroundType === 'innerImage' && typeof this.element.commonBackground.innerImage === 'string') {
-            let innerImage = this.element.commonBackground.innerImage.replace('svg', 'png')
+            const innerImage = this.element.commonBackground.innerImage.replace('svg', 'png')
            style['background'] = `url(${imgUrlTrans(innerImage)}) no-repeat ${colorRGBA}`
          } else if (this.element.commonBackground.backgroundType === 'outerImage' && typeof this.element.commonBackground.outerImage === 'string') {
            style['background'] = `url(${imgUrlTrans(this.element.commonBackground.outerImage)}) no-repeat ${colorRGBA}`
--- a/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue
+++ b/frontend/src/components/canvas/custom-component/UserViewMobileDialog.vue
@ -7,6 +7,7 @@
          :component-name="chart.type + '-view'"
          :obj="{chart: mapChart || chart}"
          :chart="mapChart || chart"
+          :theme-style="element.commonBackground"
          class="chart-class"
        />
        <chart-component v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'" :theme-style="element.commonBackground" class="chart-class" :chart="mapChart || chart" />
@ -34,8 +35,8 @@ import DeContainer from '@/components/dataease/DeContainer'
 import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
 import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import PluginCom from '@/views/system/plugin/PluginCom'
-import {deepCopy, imgUrlTrans} from '@/components/canvas/utils/utils'
-import {hexColorToRGBA} from "@/views/chart/chart/util";
+import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
+import { hexColorToRGBA } from '@/views/chart/chart/util'
 export default {
  name: 'UserViewMobileDialog',
  components: { ChartComponentS2, LabelNormalText, DeContainer, DeMainContainer, ChartComponentG2, ChartComponent, TableNormal, LabelNormal, PluginCom },
@ -83,7 +84,7 @@ export default {
    },

    svgInnerEnable() {
-      return !this.screenShot&&this.element.commonBackground.enable && this.element.commonBackground.backgroundType === 'innerImage' && typeof this.element.commonBackground.innerImage === 'string'
+      return !this.screenShot && this.element.commonBackground.enable && this.element.commonBackground.backgroundType === 'innerImage' && typeof this.element.commonBackground.innerImage === 'string'
    },
    mainSlotSvgInner() {
      if (this.svgInnerEnable) {
@ -106,7 +107,7 @@ export default {
        }
        if (this.element.commonBackground.enable) {
          if (this.screenShot && this.element.commonBackground.backgroundType === 'innerImage' && typeof this.element.commonBackground.innerImage === 'string') {
-            let innerImage = this.element.commonBackground.innerImage.replace('svg', 'png')
+            const innerImage = this.element.commonBackground.innerImage.replace('svg', 'png')
            style['background'] = `url(${imgUrlTrans(innerImage)}) no-repeat ${colorRGBA}`
          } else if (this.element.commonBackground.backgroundType === 'outerImage' && typeof this.element.commonBackground.outerImage === 'string') {
            style['background'] = `url(${imgUrlTrans(this.element.commonBackground.outerImage)}) no-repeat ${colorRGBA}`
--- a/frontend/src/components/canvas/custom-component/component-list.js
+++ b/frontend/src/components/canvas/custom-component/component-list.js
@ -431,7 +431,7 @@ const list = [
      openMode: '0',
      showWeek: false,
      showDate: true,
-      dateFormat: 'yyyy年-MM月-dd日',
+      dateFormat: 'yyyy-MM-dd',
      timeFormat: 'hh:mm:ss'
    },
    x: 1,
--- a/frontend/src/icons/svg/round_play.svg
+++ b/frontend/src/icons/svg/round_play.svg
@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.9999 1.3335C24.0999 1.3335 30.6666 7.90016 30.6666 16.0002C30.6666 24.1002 24.0999 30.6668 15.9999 30.6668C7.89992 30.6668 1.33325 24.1002 1.33325 16.0002C1.33325 7.90016 7.89992 1.3335 15.9999 1.3335ZM13.1586 9.3335C12.8519 9.33397 12.5575 9.45403 12.3379 9.66816C12.1206 9.8815 11.9986 10.1702 11.9999 10.4708V21.5308C11.9999 21.7435 12.0613 21.9515 12.1759 22.1328C12.3402 22.3898 12.5995 22.5713 12.8973 22.6375C13.1973 22.7055 13.5119 22.6542 13.7726 22.4942L22.7893 16.9648C23.1279 16.7555 23.3333 16.3915 23.3333 16.0002C23.3333 15.6088 23.1279 15.2455 22.7893 15.0355L13.7733 9.50683C13.5882 9.39363 13.3755 9.33387 13.1586 9.33416V9.3335Z" fill="white"/>
+</svg>
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@ -2393,7 +2393,9 @@ export default {
    click_inner: 'Click To Enter',
    email: 'Email:',
    tel: 'Tel:',
-    web: 'Web:'
+    web: 'Web:',
+    apply: 'Free Trial Application',
+    more: 'More'
  },
  kettle: {
    add: 'Add Kettle',
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@ -2399,7 +2399,9 @@ export default {
    click_inner: '點擊進入',
    email: '郵箱：',
    tel: '電話：',
-    web: '網址：'
+    web: '網址：',
+    apply: '免费试用申请',
+    more: '更多'
  },
  kettle: {
    add: '添加 Kettle 服務',
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@ -2411,7 +2411,9 @@ export default {
    show_more: '查看更多',
    email: '邮箱：',
    tel: '电话：',
-    web: '网址：'
+    web: '网址：',
+    apply: '免费试用申请',
+    more: '更多'
  },
  kettle: {
    add: '添加 Kettle 服务',
--- a/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisExtSelector.vue
@ -126,10 +126,6 @@
              </el-form-item>
            </span>
          </span>
-          <el-divider v-if="showProperty('axisLabel')" />
-          <el-form-item v-show="showProperty('axisLabel')"  :label="$t('chart.content_formatter')" class="form-item">
-            <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle('axisLabel')" />
-          </el-form-item>
        </div>
      </el-form>
    </el-col>
--- a/frontend/src/views/chart/components/component-style/YAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
@ -126,10 +126,6 @@
              </el-form-item>
            </span>
          </span>
-          <el-divider v-if="showProperty('axisLabel')" />
-          <el-form-item v-show="showProperty('axisLabel')" :label="$t('chart.content_formatter')" class="form-item">
-            <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle('axisLabel')" />
-          </el-form-item>
        </div>
      </el-form>
    </el-col>
--- a/frontend/src/views/panel/filter/ButtonDialog.vue
+++ b/frontend/src/views/panel/filter/ButtonDialog.vue
@ -16,7 +16,7 @@
      </el-form-item>

      <el-form-item v-if="myAttrs.customRange" :label="$t('desearchbutton.relative')">
-        <el-select v-model="myAttrs.filterIds" style="width: 280px;" multiple clearable>
+        <el-select v-model="myAttrs.filterIds" style="width: 100%;" multiple clearable>
          <el-option v-for="(filter, index) in filters" :key="filter.id + index" :label="filter.showName" :value="filter.id" />
        </el-select>
      </el-form-item>
--- a/frontend/src/views/wizard/index.vue
+++ b/frontend/src/views/wizard/index.vue
@ -3,20 +3,83 @@
    v-if="loading"
    v-loading="loading"
    style="position:absolute;top:55px;width: 100%;height: calc(100% - 55px);"
+    class="main_outer"
  />
  <div v-else-if="homeLink">
    <iframe id="mobsf" :src="homeLink" frameborder="0" style="position:absolute;top:55px;width: 100%;height: calc(100% - 55px);" />
  </div>
-  <el-row v-else class="main_container">
-    <el-row class="head">
-      <span class="hint_head">{{ $t('wizard.welcome_title') }}</span> <br>
-      <span class="hint_content">{{ $t('wizard.welcome_hint') }}</span>
-    </el-row>
-    <el-row class="card_container">
-      <info-card v-for="(cardDetail,index) in cardList" :key="index">
-        <component :is="cardDetail.component" :img-index="index" :details="cardDetail" />
-      </info-card>
+  <el-row v-else class="main_container_outer">
+    <el-row class="main_container">
+      <el-row class="main_content">
+        <el-row class="content_top_banner">
+          <div class="top_banner_content">
+            <div class="hint_head">{{ $t('wizard.welcome_title') }}</div>
+            <div class="hint_content">{{ $t('wizard.welcome_hint') }}</div>
+          </div>
+          <img class="top_banner_img" src="../../assets/wizard_main_bg_inner.png"></img>
+        </el-row>
+        <el-row class="top_banner_card">
+          <wizard-card :details="cardList[0]"></wizard-card>
+          <wizard-card :details="cardList[1]" style="margin:0 24px 0 24px"></wizard-card>
+          <wizard-card-enterprise :details="cardList[2]"></wizard-card-enterprise>
+        </el-row>
+        <el-row class="content_middle">
+          <div class="content_middle_left">
+            <el-row>
+              <span class="content_middle_title">{{ $t('wizard.teaching_video') }}</span>
+              <div class="content_middle_more"><a target="_blank" href="https://space.bilibili.com/510493147/channel/collectiondetail?sid=262774">{{ $t('wizard.more') }}<i class="el-icon-arrow-right" /></a></div>
+            </el-row>
+            <el-row style="margin-top: 12px">
+              <video-card :details="videoList[0]"></video-card>
+              <video-card style="margin:0 12px 0 12px" :details="videoList[1]"></video-card>
+              <video-card :details="videoList[2]"></video-card>
+            </el-row>
+          </div>
+          <div class="content_middle_right">
+            <el-row>
+              <span class="content_middle_title">{{ $t('wizard.latest_developments') }}</span>
+              <div class="content_middle_more"><a target="_blank" href="https://blog.fit2cloud.com/?cat=321">{{ $t('wizard.more') }}<i class="el-icon-arrow-right" /></a></div>
+            </el-row>
+            <el-row >
+              <ul class="ul-custom">
+                <li class="li-custom" v-for="blogItem in blogsInfo"><a target="_blank" :href="blogItem.href" :title="blogItem.title" >{{blogItem.title}}</a></li>
+              </ul>
+            </el-row>
+          </div>
+        </el-row>
+
+        <el-row class="content_bottom">
+          <div class="content_bottom_contact">
+            <el-row class="contact_title">
+              <span>{{$t('wizard.contact_us')}}</span>
+            </el-row>
+            <el-row class="contact_content">
+              <span>{{$t('wizard.email')}}dataease@fit2cloud.com</span>
+            </el-row>
+            <el-row class="contact_content">
+              <span>{{$t('wizard.tel')}}400-052-0755</span>
+            </el-row>
+            <el-row class="contact_content">
+              {{$t('wizard.web')}}<a style="text-decoration:underline;" target="_blank" href="https://www.dataease.io">www.dataease.io</a>
+            </el-row>
+          </div>
+
+          <div class="content_bottom_qr_code">
+            <div class="contact_wechat_official">
+              <div class="contact_title_qr">微信公众号</div>
+              <img class="contact_wechat_official_img" src="@/assets/wizard_wechat-official.png"></img>
+            </div>
+            <div class="contact_wechat_group">
+              <div class="contact_title_qr">技术交流群</div>
+              <img class="contact_wechat_group_img"  src="@/assets/wizard_wechat-group.png"></img>
+            </div>
+          </div>
+        </el-row>
+
+      </el-row>
    </el-row>
+
+
  </el-row>
 </template>

@ -32,54 +95,57 @@ import ContactUs from '@/views/wizard/details/ContactUs'
 import InfoCard from '@/views/wizard/infoCard'
 import CardDetail from '@/views/wizard/details/CardDetail'
 import { blogLastActive } from '@/api/wizard/wizard'
+import WizardCard from "@/views/wizard/wizardCard";
+import VideoCard from "@/views/wizard/videoCard";
+import WizardCardEnterprise from "@/views/wizard/wizardCardEnterprise";

 export default {
  name: 'Wizard',
-  components: { InfoCard, Card, DemoVideo, OnlineDocument, LatestDevelopments, TeachingVideo, EnterpriseEdition, ContactUs, CardDetail },
+  components: {
+    WizardCardEnterprise,
+    VideoCard,
+    WizardCard, InfoCard, Card, DemoVideo, OnlineDocument, LatestDevelopments, TeachingVideo, EnterpriseEdition, ContactUs, CardDetail },
  data() {
    return {
+      blogsInfo:[],
      cardList: [
        {
          head: this.$t('wizard.quick_start'),
          content: this.$t('wizard.demo_video_hint'),
-          bottom: '',
-          href: 'https://www.bilibili.com/video/BV1i34y1v7hq/',
-          component: 'CardDetail'
+          img: 'wizard_quick_start.png',
+          bgColor: '#E7F2FF',
+          href: 'https://www.bilibili.com/video/BV1i34y1v7hq/'
        },
        {
          head: this.$t('wizard.online_document'),
          content: this.$t('wizard.online_document_hint'),
-          bottom: '',
+          img: 'wizard_help.png',
+          bgColor: '#F3F2FF',
          href: 'https://dataease.io/docs/index.html',
-          component: 'CardDetail'
-        },
-        {
-          head: this.$t('wizard.latest_developments'),
-          content: '',
-          bottom: '',
-          href: 'https://blog.fit2cloud.com/?cat=321',
-          component: 'CardDetail'
-        },
-        {
-          head: this.$t('wizard.teaching_video'),
-          content: '<a href="https://www.bilibili.com/video/BV15P4y1u7Pa?spm_id_from=333.999.0.0" target="_blank">1.1 连接数据库并添加数据集</a><br><a href="https://www.bilibili.com/video/BV1cU4y1d77S?spm_id_from=333.999.0.0" target="_blank">1.2 Excel 数据集和 API 数据集</a><br><a href="https://www.bilibili.com/video/BV1zY411n7Q1?spm_id_from=333.999.0.0" target="_blank">1.3 数据集整合</a>',
-          bottom: '',
-          href: 'https://space.bilibili.com/510493147/channel/collectiondetail?sid=262774',
-          component: 'CardDetail'
        },
        {
          head: this.$t('wizard.enterprise_edition'),
          content: this.$t('wizard.enterprise_edition_hint1') + '<br>' + this.$t('wizard.enterprise_edition_hint2') + '<br>' + this.$t('wizard.enterprise_edition_hint3'),
-          bottom: '',
+          img: 'wizard_enterprise.png',
+          bgColor: '#FFFAF0',
          href: 'https://jinshuju.net/f/TK5TTd',
-          component: 'CardDetail'
+        },
+      ],
+      videoList: [
+        {
+          content: '1.1 连接数据库并添加数据集',
+          img: 'wizard_video1.png',
+          href: 'https://www.bilibili.com/video/BV15P4y1u7Pa?spm_id_from=333.999.0.0'
        },
        {
-          head: this.$t('wizard.contact_us'),
-          content: this.$t('wizard.email') + 'dataease@fit2cloud.com<br>' + this.$t('wizard.tel') + '400-052-0755<br>' + this.$t('wizard.web') + '<a target="_blank" href="https://www.dataease.io">www.dataease.io</a>',
-          bottom: '',
-          href: 'https://www.dataease.io',
-          component: 'CardDetail'
+          content: '1.2 Excel 数据集和 API 数据集',
+          img: 'wizard_video2.png',
+          href: 'https://www.bilibili.com/video/BV1cU4y1d77S?spm_id_from=333.999.0.0'
+        },
+        {
+          content: '1.3 数据集整合',
+          img: 'wizard_video3.png',
+          href: 'https://www.bilibili.com/video/BV1zY411n7Q1?spm_id_from=333.999.0.0'
        }
      ],
      loading: true
@ -106,9 +172,7 @@ export default {
  methods: {
    init() {
      blogLastActive().then(res => {
-        const blogsInfo = res.data[0]
-        this.cardList[2].content = blogsInfo.title
-        this.cardList[2].bottom = blogsInfo.time
+        this.blogsInfo = res.data
      })
    }
  }
@ -117,28 +181,225 @@ export default {
 </script>

 <style lang="scss" scoped>
+  .main_outer{
+    background-color: var(--MainBG, #f5f6f7)
+  }
  .main_container {
+    min-width: 1250px;
+    padding: 0 24px 0 24px;
+    overflow: auto;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-size: 100% 444px !important;
+    background: url('../../assets/wizard_main_bg.png') no-repeat;
  }
-  .head {
-    text-align: center;
-    color: white;
-    padding: 10px;
-    margin-top: 35px;
-    background-size: 100% 100% !important;
-    background-image: url('../../assets/banner.png');
+  .main_content {
+    width: 1200px;
  }
+  .content_top_banner{
+    color: var(--ContentBG, #FFFFFF);
+    position: relative;
+    width: 100%;
+    height: 230px;
+  }
+
+  .top_banner_content{
+    position: absolute;
+    top: 62px;
+    height: 230px;
+  }
+
+  .top_banner_img{
+    position: absolute;
+    width: 520px;
+    height: 230px;
+    top: 0;
+    right: 50px;
+  }
+
+  .top_banner_card{
+    position: relative;
+    width: 100%;
+    height: 224px;
+  }
+
  .hint_head {
-    line-height: 50px;
-    font-weight: bold;
-    font-size: 25px;
+    line-height: 48px;
+    font-weight: 600;
+    font-size: 48px;
  }
  .hint_content {
-    line-height: 50px;
-    font-size: 15px;
+    margin-top: 12px;
+    line-height: 26px;
+    font-weight: 400;
+    font-size: 18px;
  }

-  .card_container {
-   vertical-align: middle;
-
+  .content_middle{
+    height: 290px;
+    width: 100%;
+    margin-top: 24px;
  }
+
+  .content_middle_left{
+    float: left;
+    width: 792px;
+    height: 290px;
+    padding: 24px;
+    border-radius: 4px;
+    background-color: var(--ContentBG, #FFFFFF);
+  }
+  .content_middle_title{
+    float: left;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 38px;
+    color: var(--TextPrimary, #1F2329);
+  }
+  .content_middle_more{
+    float: right;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    color: #646A73;
+    border-radius: 4px;
+    height: 26px;
+    padding: 2px;
+  }
+
+  .content_middle_more :hover{
+    border-radius: 4px;
+    height: 26px;
+    background: rgba(31, 35, 41, 0.1);
+  }
+  .content_middle_more i:hover{
+    background: none;
+  }
+
+  .content_middle_right {
+    float: left;
+    height: 290px;
+    width: 384px;
+    margin-left: 24px;
+    padding: 24px;
+    border-radius: 4px;
+    background-color: var(--ContentBG, #FFFFFF);
+  }
+
+  .content_middle_left{
+    float: left;
+    width: 792px;
+    height: 290px;
+    padding: 24px;
+    border-radius: 4px;
+    background-color: var(--ContentBG, #FFFFFF);
+  }
+
+  .li-custom {
+    margin-top: 16px;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--TextPrimary, #1F2329);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    list-style-type : disc;
+    list-style-position: inside;
+  }
+
+  .li-custom :hover {
+    background: rgba(31, 35, 41, 0.1);
+    border-radius: 4px;
+    color: #3370FF;
+  }
+
+  .ul-custom {
+    padding-inline-start:0px;
+  }
+
+  .content_bottom{
+    width: 100%;
+    height: 208px;
+  }
+
+  .content_bottom_contact{
+    float: left;
+    margin-left: 278px;
+    width: 300px;
+    margin-top: 40px;
+  }
+
+  .contact_title{
+    font-style: normal;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--TextPrimary, #1F2329);
+  }
+
+  .contact_content{
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    color: #646A73;
+  }
+  .contact_content a:hover{
+    color: #3370FF;
+  }
+
+  .content_bottom_qr_code{
+    width: 300px;
+    float: right;
+    text-align: right;
+    margin-right: 280px;
+    margin-top: 40px;
+  }
+
+  .contact_title_qr{
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 20px;
+    text-align: center;
+    color: #646A73;
+  }
+
+  .contact_wechat_official{
+    width: 100px;
+    float: right;
+  }
+
+  .contact_wechat_official_img{
+    box-sizing: border-box;
+    width: 100px;
+    height: 100px;
+    border: 2px solid #FFFFFF;
+  }
+
+  .contact_wechat_group{
+    width: 100px;
+    float: right;
+    margin-right: 40px;
+  }
+
+  .contact_wechat_group_img{
+    box-sizing: border-box;
+    width: 100px;
+    height: 100px;
+    border: 2px solid #FFFFFF;
+  }
+
+  .main_container_outer{
+    width: 100%;
+    height: calc(100vh - 56px);
+    background-color: var(--MainBG, #f5f6f7);
+    overflow: auto;
+  }
+
 </style>
--- a/frontend/src/views/wizard/index_back.vue
+++ b/frontend/src/views/wizard/index_back.vue
@ -0,0 +1,144 @@
+<template>
+  <div
+    v-if="loading"
+    v-loading="loading"
+    style="position:absolute;top:55px;width: 100%;height: calc(100% - 55px);"
+  />
+  <div v-else-if="homeLink">
+    <iframe id="mobsf" :src="homeLink" frameborder="0" style="position:absolute;top:55px;width: 100%;height: calc(100% - 55px);" />
+  </div>
+  <el-row v-else class="main_container">
+    <el-row class="head">
+      <span class="hint_head">{{ $t('wizard.welcome_title') }}</span> <br>
+      <span class="hint_content">{{ $t('wizard.welcome_hint') }}</span>
+    </el-row>
+    <el-row class="card_container">
+      <info-card v-for="(cardDetail,index) in cardList" :key="index">
+        <component :is="cardDetail.component" :img-index="index" :details="cardDetail" />
+      </info-card>
+    </el-row>
+  </el-row>
+</template>
+
+<script>
+
+import Card from '@/views/wizard/card'
+import DemoVideo from '@/views/wizard/details/DemoVideo'
+import OnlineDocument from '@/views/wizard/details/OnlineDocument'
+import LatestDevelopments from '@/views/wizard/details/LatestDevelopments'
+import TeachingVideo from '@/views/wizard/details/TeachingVideo'
+import EnterpriseEdition from '@/views/wizard/details/EnterpriseEdition'
+import ContactUs from '@/views/wizard/details/ContactUs'
+import InfoCard from '@/views/wizard/infoCard'
+import CardDetail from '@/views/wizard/details/CardDetail'
+import { blogLastActive } from '@/api/wizard/wizard'
+
+export default {
+  name: 'Wizard',
+  components: { InfoCard, Card, DemoVideo, OnlineDocument, LatestDevelopments, TeachingVideo, EnterpriseEdition, ContactUs, CardDetail },
+  data() {
+    return {
+      cardList: [
+        {
+          head: this.$t('wizard.quick_start'),
+          content: this.$t('wizard.demo_video_hint'),
+          bottom: '',
+          href: 'https://www.bilibili.com/video/BV1i34y1v7hq/',
+          component: 'CardDetail'
+        },
+        {
+          head: this.$t('wizard.online_document'),
+          content: this.$t('wizard.online_document_hint'),
+          bottom: '',
+          href: 'https://dataease.io/docs/index.html',
+          component: 'CardDetail'
+        },
+        {
+          head: this.$t('wizard.latest_developments'),
+          content: '',
+          bottom: '',
+          href: 'https://blog.fit2cloud.com/?cat=321',
+          component: 'CardDetail'
+        },
+        {
+          head: this.$t('wizard.teaching_video'),
+          content: '<a href="https://www.bilibili.com/video/BV15P4y1u7Pa?spm_id_from=333.999.0.0" target="_blank">1.1 连接数据库并添加数据集</a><br><a href="https://www.bilibili.com/video/BV1cU4y1d77S?spm_id_from=333.999.0.0" target="_blank">1.2 Excel 数据集和 API 数据集</a><br><a href="https://www.bilibili.com/video/BV1zY411n7Q1?spm_id_from=333.999.0.0" target="_blank">1.3 数据集整合</a>',
+          bottom: '',
+          href: 'https://space.bilibili.com/510493147/channel/collectiondetail?sid=262774',
+          component: 'CardDetail'
+        },
+        {
+          head: this.$t('wizard.enterprise_edition'),
+          content: this.$t('wizard.enterprise_edition_hint1') + '<br>' + this.$t('wizard.enterprise_edition_hint2') + '<br>' + this.$t('wizard.enterprise_edition_hint3'),
+          bottom: '',
+          href: 'https://jinshuju.net/f/TK5TTd',
+          component: 'CardDetail'
+        },
+        {
+          head: this.$t('wizard.contact_us'),
+          content: this.$t('wizard.email') + 'dataease@fit2cloud.com<br>' + this.$t('wizard.tel') + '400-052-0755<br>' + this.$t('wizard.web') + '<a target="_blank" href="https://www.dataease.io">www.dataease.io</a>',
+          bottom: '',
+          href: 'https://www.dataease.io',
+          component: 'CardDetail'
+        }
+      ],
+      loading: true
+
+    }
+  },
+  computed: {
+    homeLink() {
+      if (this.$store.getters.uiInfo && this.$store.getters.uiInfo['ui.homeLink'] && this.$store.getters.uiInfo['ui.homeLink'].paramValue) {
+        return this.$store.getters.uiInfo['ui.homeLink'].paramValue
+      }
+      return null
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.loading = false
+    }, 1000)
+  },
+
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+      blogLastActive().then(res => {
+        const blogsInfo = res.data[0]
+        this.cardList[2].content = blogsInfo.title
+        this.cardList[2].bottom = blogsInfo.time
+      })
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+  .main_container {
+  }
+  .head {
+    text-align: center;
+    color: white;
+    padding: 10px;
+    margin-top: 35px;
+    background-size: 100% 100% !important;
+    background-image: url('../../assets/banner.png');
+  }
+  .hint_head {
+    line-height: 50px;
+    font-weight: bold;
+    font-size: 25px;
+  }
+  .hint_content {
+    line-height: 50px;
+    font-size: 15px;
+  }
+
+  .card_container {
+   vertical-align: middle;
+
+  }
+</style>
--- a/frontend/src/views/wizard/videoCard.vue
+++ b/frontend/src/views/wizard/videoCard.vue
@ -0,0 +1,71 @@
+<template>
+  <el-row class="video_main">
+    <div class="video_top" >
+      <a :href="details.href" target="_blank">
+        <img :src="require('@/assets/'+details.img)" alt="404">
+        <svg-icon class="play-icon" icon-class="round_play"></svg-icon>
+      </a>
+    </div>
+    <div class="video_content">
+      <a :href="details.href" target="_blank">
+        {{details.content}}
+      </a>
+    </div>
+  </el-row>
+</template>
+<script>
+export default {
+  name: 'VideoCard',
+  props: {
+    details: {
+      type: Object,
+      required: false
+    }
+  },
+  data() {
+    return {}
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+  .video_main{
+    width: 240px;
+    height: 192px;
+    border: 1px solid #DEE0E3;
+    float: left;
+    border-radius: 4px;
+  }
+  .video_top{
+    position: relative;
+    width: 240px;
+    height: 135px;
+  }
+
+  .video_top img{
+    width: 238px;
+    height: 135px;
+  }
+
+  .video_content{
+    width: 240px;
+    padding: 12px;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+    color: var(--TextPrimary, #1F2329);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .play-icon{
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    left: 105px;
+    top:53px
+  }
+
+</style>
--- a/frontend/src/views/wizard/wizardCard.vue
+++ b/frontend/src/views/wizard/wizardCard.vue
@ -0,0 +1,92 @@
+<template>
+  <el-col :style='{background:details.bgColor}' class="card_main">
+    <el-col style="width: 200px">
+      <el-row class="card_head">
+        {{details.head}}
+      </el-row>
+      <el-row  class="card_content">
+        <span v-html="details.content"></span>
+      </el-row>
+      <el-row class="card_bottom">
+        <a target="_blank" :href="details.href">
+          {{$t('wizard.click_show') }}
+          <i class="el-icon-arrow-right" />
+        </a>
+      </el-row >
+    </el-col>
+    <el-col style="width: 136px">
+      <img style="width: 136px"  :src="require('@/assets/'+details.img)"/>
+    </el-col>
+  </el-col>
+</template>
+
+<script>
+
+export default {
+  name: 'wizardCard',
+  props: {
+    details: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {}
+  },
+  computed:{
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+  .card_main{
+    width: 384px;
+    height: 190px;
+    padding: 24px;
+    opacity: 0.9;
+    border-radius: 8px;
+  }
+
+  .card_main:hover {
+    box-shadow: 0px 6px 24px rgba(31, 35, 41, 0.5)
+  }
+  .card_head{
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 28px;
+    width: 200px;
+  }
+  .card_content{
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    width: 200px;
+    height: 66px;
+    margin-top: 12px;
+    color: #646A73;
+    overflow-y: auto;
+  }
+  .card_bottom{
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    margin-top: 14px;
+    line-height: 22px;
+    color: #3370FF;
+  }
+  .triangle{
+    width: 0;
+    height: 0;
+    border-bottom: 30px solid var(--MenuActiveBG, #409EFF);
+    border-right: 30px solid transparent;
+    -webkit-transform: rotate(180deg);
+    transform: rotate(0deg);
+  }
+
+</style>
--- a/frontend/src/views/wizard/wizardCardEnterprise.vue
+++ b/frontend/src/views/wizard/wizardCardEnterprise.vue
@ -0,0 +1,92 @@
+<template>
+  <el-col :style='{background:details.bgColor}' class="card_main">
+    <el-col style="width: 230px">
+      <el-row class="card_head">
+        {{details.head}}
+      </el-row>
+      <el-row  class="card_content">
+        <span v-html="details.content"></span>
+      </el-row>
+      <el-row class="card_bottom">
+        <a target="_blank" :href="details.href">
+          {{$t('wizard.apply') }}
+          <i class="el-icon-arrow-right" />
+        </a>
+      </el-row >
+    </el-col>
+    <el-col style="width: 106px">
+      <img  style="width: 106px" src="../../assets/wizard_enterprise.png"></img>
+    </el-col>
+  </el-col>
+</template>
+
+<script>
+
+export default {
+  name: 'WizardCardEnterprise',
+  props: {
+    details: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {}
+  },
+  computed:{
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+  .card_main{
+    width: 384px;
+    height: 190px;
+    padding: 24px;
+    opacity: 0.9;
+    border-radius: 8px;
+  }
+
+  .card_main:hover {
+    box-shadow: 0px 6px 24px rgba(31, 35, 41, 0.5)
+  }
+  .card_head{
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 28px;
+    width: 230px;
+  }
+  .card_content{
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    width: 230px;
+    height: 66px;
+    margin-top: 12px;
+    color: #646A73;
+    overflow-y: auto;
+  }
+  .card_bottom{
+    font-family: 'PingFang SC';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    margin-top: 14px;
+    line-height: 22px;
+    color: #3370FF;
+  }
+  .triangle{
+    width: 0;
+    height: 0;
+    border-bottom: 30px solid var(--MenuActiveBG, #409EFF);
+    border-right: 30px solid transparent;
+    -webkit-transform: rotate(180deg);
+    transform: rotate(0deg);
+  }
+
+</style>