sctj-components 1.1.6 → 1.1.8

package/lib/sctj-components.es.js

@@ -5399,12 +5399,12 @@ const _sfc_main$8 = {
     };
   }
 };
-const index_vue_vue_type_style_index_0_scoped_997e9741_lang = "";
-const _hoisted_1$6 = { class: "action-container" };
-const _hoisted_2$5 = {
+const index_vue_vue_type_style_index_0_scoped_3e0679ae_lang = "";
+const _hoisted_1$6 = {
   key: 0,
-  class: "legendContainer"
+  class: "action-container"
 };
+const _hoisted_2$5 = { class: "legendContainer" };
 const _sfc_main$7 = {
   __name: "index",
   props: {
@@ -5491,8 +5491,8 @@ const _sfc_main$7 = {
   setup(__props, { expose, emit }) {
     const props = __props;
     useCssVars((_ctx) => ({
-      "11732c32": __props.width,
-      "50904db4": __props.height
+      "136dedb2": __props.width,
+      "4080cebb": __props.height
     }));
     const controlsPositionVars = computed$1(() => {
       const position = props.controlsPosition || {};
@@ -5521,6 +5521,12 @@ const _sfc_main$7 = {
     const polygonTextInstances = shallowRef([]);
     const typeVisibility = shallowRef(/* @__PURE__ */ new Map());
     const overlayGroups = shallowRef(/* @__PURE__ */ new Map());
+    const isMoreLegend = ref$1(false);
+    const showLegendConfig = computed$1(() => {
+      if (props.legendConfig.length < 6)
+        return props.legendConfig;
+      return isMoreLegend.value ? props.legendConfig : props.legendConfig.slice(0, 5);
+    });
     const state = reactive({
       currentZoom: 10,
       baseZoom: 10,
@@ -5754,7 +5760,7 @@ const _sfc_main$7 = {
         const AMap2 = await AMapLoader.load({
           key: props.amapKey,
           version: "2.0",
-          plugins: ["AMap.Marker", "AMap.Polyline", "AMap.Polygon", "AMap.BezierCurve", "AMap.Circle", "AMap.Text", "AMap.LabelMarker", "AMap.BezierCurveEditor", "AMap.TileLayer.Satellite", "AMap.ControlBar", "AMap.OverlayGroup", "AMap.ToolBar", "AMap.MapType"]
+          plugins: ["AMap.Marker", "AMap.Polyline", "AMap.Polygon", "AMap.BezierCurve", "AMap.Circle", "AMap.Text", "AMap.LabelMarker", "AMap.BezierCurveEditor", "AMap.TileLayer.Satellite", "AMap.ControlBar", "AMap.OverlayGroup", "AMap.ToolBar", "AMap.MapType", "AMap.GeometryUtil"]
         });
         const mapConfig = {
           viewMode: props.viewMode,
@@ -6341,6 +6347,7 @@ const _sfc_main$7 = {
     });
     return (_ctx, _cache) => {
       const _component_el_checkbox = resolveComponent("el-checkbox");
+      const _component_el_button = resolveComponent("el-button");
       const _component_el_checkbox_group = resolveComponent("el-checkbox-group");
       return openBlock(), createElementBlock("div", {
         class: "mapViewContainer",
@@ -6349,15 +6356,15 @@ const _sfc_main$7 = {
         ref: mapContainer,
         style: normalizeStyle(unref(controlsPositionVars))
       }, [
-        createElementVNode("div", _hoisted_1$6, [
-          __props.legendConfig.length ? (openBlock(), createElementBlock("div", _hoisted_2$5, [
+        __props.legendConfig.length ? (openBlock(), createElementBlock("div", _hoisted_1$6, [
+          createElementVNode("div", _hoisted_2$5, [
             createVNode(_component_el_checkbox_group, {
               modelValue: legend.value,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => legend.value = $event),
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => legend.value = $event),
               onChange: handleLegendChange
             }, {
               default: withCtx(() => [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(__props.legendConfig, (item) => {
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(showLegendConfig), (item) => {
                   return openBlock(), createBlock(_component_el_checkbox, {
                     key: item.value,
                     label: item.value,
@@ -6368,17 +6375,29 @@ const _sfc_main$7 = {
                     ]),
                     _: 2
                   }, 1032, ["label", "value"]);
-                }), 128))
+                }), 128)),
+                __props.legendConfig.length > 5 ? (openBlock(), createBlock(_component_el_button, {
+                  key: 0,
+                  icon: isMoreLegend.value ? "ArrowUp" : "ArrowDown",
+                  onClick: _cache[0] || (_cache[0] = ($event) => isMoreLegend.value = !isMoreLegend.value),
+                  type: "primary",
+                  link: ""
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(isMoreLegend.value ? "\u6536\u8D77" : "\u66F4\u591A"), 1)
+                  ]),
+                  _: 1
+                }, 8, ["icon"])) : createCommentVNode("", true)
               ]),
               _: 1
             }, 8, ["modelValue"])
-          ])) : createCommentVNode("", true)
-        ])
+          ])
+        ])) : createCommentVNode("", true)
       ], 4);
     };
   }
 };
-const SCTJMapViewer = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-997e9741"]]);
+const SCTJMapViewer = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-3e0679ae"]]);
 const index_vue_vue_type_style_index_0_scoped_761d2ab4_lang = "";
 const _withScopeId$4 = (n) => (pushScopeId("data-v-761d2ab4"), n = n(), popScopeId(), n);
 const _hoisted_1$5 = {