@ued_fpi/data-visual 1.2.15 → 1.2.20

package/dist/es/wgms/src/WaterQualityRainfall/index.vue.mjs

@@ -1,82 +1,100 @@
-import { defineComponent, ref, reactive, watch, onMounted, nextTick, openBlock, createElementBlock, createElementVNode, createVNode } from 'vue';
+import { defineComponent, ref, reactive, onMounted, watch, toRefs, openBlock, createElementBlock, createElementVNode, createVNode } from 'vue';
 import dayjs from 'dayjs';
+import 'echarts/lib/component/markLine';
 import _sfc_main$1 from '../../utils/echarts/BaseECharts.vue.mjs';
-import { rainHydrologyAnalyse, waterSurfaceListAll } from './api/index.mjs';
+import { getDateEndTime } from '../../utils/tools.mjs';
+import { surfaceWaterStandard, rainHydrologyAnalyse, waterSurfaceListAll, waterQuality } from './api/index.mjs';
 
 const _hoisted_1 = { class: "dv-wgms-water-quality-rainfall" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
-    startTime: {
-      type: Number,
-      default: dayjs().startOf("year").valueOf()
-    },
-    endTime: {
-      type: Number,
-      default: dayjs().endOf("year").valueOf()
-    },
-    timeType: {
-      type: String,
-      default: "hour"
-    },
-    // 因子名称
-    factorName: {
-      type: String,
-      default: "总磷(以 P 计）"
-    },
-    // 因子单位
-    factorUnit: {
-      type: String,
-      default: "mg/L"
-    },
-    // 经纬度
-    latitude: {
-      type: Number,
-      default: 30.3992
+    params: {
+      type: Object,
+      default: () => {
+        return {
+          // 趋势图参数
+          beginTime: dayjs().startOf("year").valueOf(),
+          // 分析时间开始
+          endTime: dayjs().endOf("year").valueOf(),
+          // 分析时间结束
+          latitude: 30.3992,
+          longitude: 119.9681,
+          queryTimeType: "hour",
+          // 下面是达标线的接口参数
+          factorName: "总磷(以 P 计）",
+          factorCode: "w21003",
+          // 监测因子
+          factorUnit: "mg/L",
+          factor: 27,
+          siteCode: "JMSZSY0008",
+          configTime: 1687536e6,
+          // 报警时间
+          baseLevel: -1
+        };
+      }
     },
-    // 经纬度
-    longitude: {
-      type: Number,
-      default: 119.9681
+    isLazy: {
+      type: Boolean,
+      default: false
     }
   },
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const chartQualityRainfall = ref();
     const option = ref(void 0);
-    const data = reactive({
-      title: "水质-雨量-水位趋势对比图",
-      unit: "mg/L",
-      factorName: "总磷(以 P 计）",
-      params: {
-        beginTime: 16706016e5,
-        endTime: 1671206399999,
-        latitude: 30.3992,
-        longitude: 119.9681,
-        queryTimeType: "hour"
+    const state = reactive({
+      factorLimitValue: {
+        // 因子达标限值
+        value: null
       }
     });
-    watch(() => [props.startTime, props.endTime, props.timeType, props.longitude, props.latitude, props.factorName, props.factorUnit], () => {
-      initData();
-    });
-    onMounted(async () => {
-      await nextTick();
-      initData();
-    });
-    const initData = () => {
-      data.params = {
-        beginTime: props?.startTime,
-        endTime: props?.endTime,
-        longitude: props.longitude,
-        latitude: props.latitude,
-        queryTimeType: props?.timeType
-      };
-      data.factorName = props?.factorName;
-      data.unit = props?.factorUnit;
+    const initData = async () => {
+      await getFactorStandard();
       getData();
     };
+    const getFactorStandard = async () => {
+      const { data: resData } = await surfaceWaterStandard({
+        accessCodeList: props?.params?.siteCode,
+        baseLevel: props?.params?.baseLevel,
+        factorFlag: false,
+        factor: props?.params?.factor,
+        configTime: props?.params?.configTime
+      });
+      const limit = resData && props.params?.siteCode && props.params?.factorCode && resData[props.params?.siteCode] && resData[props?.params?.siteCode][props.params?.factorCode] ? resData[props.params?.siteCode][props.params?.factorCode] : "";
+      state.factorLimitValue = limit;
+    };
+    const getWaterQualityData = async (timeType) => {
+      const params = {
+        beginTime: props.params?.beginTime,
+        endTime: getDateEndTime(timeType, props.params?.endTime),
+        queryTimeType: timeType,
+        accessCode: props.params?.siteCode,
+        factor: props?.params?.factor
+      };
+      const res = await waterQuality(params);
+      const waterQualityData = {
+        value: [],
+        grade: [],
+        time: []
+      };
+      res && res.data && res.data.forEach((item) => {
+        waterQualityData.time.push(item.time);
+        waterQualityData.value.push(item.value);
+        waterQualityData.grade.push(item.grade);
+      });
+      return waterQualityData;
+    };
     const getData = async () => {
-      const res = await rainHydrologyAnalyse(data.params);
+      const timeType = props.params?.queryTimeType === "day" || props.params?.queryTimeType === "hour" ? "hour" : props.params?.queryTimeType === "year" ? "month" : "day";
+      const params = {
+        beginTime: props.params?.beginTime,
+        endTime: getDateEndTime(props.params?.queryTimeType, props.params?.endTime),
+        latitude: props.params?.latitude,
+        longitude: props.params?.longitude,
+        queryTimeType: timeType
+      };
+      const res = await rainHydrologyAnalyse(params);
       const resData = res.data || [];
       const xData = [];
       const seriesData = {
@@ -85,20 +103,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         rain: [],
         quality: []
       };
-      resData.forEach((item) => {
-        if (props.timeType === "hour" || props.timeType === "day")
+      const { value, grade } = await getWaterQualityData(props.params?.queryTimeType);
+      resData.forEach((item, index) => {
+        if (timeType === "hour")
           xData.push(dayjs(item.time).format("MM-DD HH"));
+        else if (timeType === "month")
+          xData.push(dayjs(item.time).format("YYYY-MM"));
         else
           xData.push(dayjs(item.time).format("MM-DD"));
         seriesData.rain.push(item.rain);
         seriesData.hydrology.push(item.hydrology);
-        seriesData.factorValue.push(item.factorValue);
-        seriesData.quality.push(item.quality);
+        if (value && value[index])
+          seriesData.factorValue.push(value[index]);
+        else
+          seriesData.factorValue.push(null);
+        if (grade && grade[index])
+          seriesData.quality.push(grade[index]);
+        else
+          seriesData.quality.push(null);
       });
-      option.value = await initWaterQuality(xData, seriesData, data.unit, data.factorName);
+      option.value = await initWaterQuality(xData, seriesData, props?.params?.factorUnit, props.params?.factorName);
     };
-    const initWaterQuality = async (xAxis, data2, unit, factorName) => {
-      const { hydrology, factorValue, rain, quality } = data2;
+    const initWaterQuality = async (xAxis, data, unit, factorName) => {
+      const { hydrology, factorValue, rain, quality } = data;
       const res = await waterSurfaceListAll({});
       const gradeList = res?.entries ?? [];
       const option2 = {
@@ -120,7 +147,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               if (index === 0)
                 unit2 = "mm/h";
               else if (index === 1)
-                unit2 = "mg/L";
+                unit2 = props?.params?.factorUnit || "";
               else
                 unit2 = "m";
               str += `<div>${item.marker}${item.seriesName}：${item.value ? item.value : "--"}${unit2}</div>`;
@@ -136,11 +163,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           textStyle: {
             color: "var(--dv-color-text-primary)"
           },
+          // icon: 'rect',
           itemHeight: 2,
           itemWidth: 16,
           data: [
             {
-              name: "降雨量趋势",
+              name: "降雨量",
               icon: "rect"
             },
             {
@@ -148,7 +176,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               icon: "rect"
             },
             {
-              name: "水位趋势",
+              name: "水位",
               icon: "rect"
             }
           ]
@@ -213,8 +241,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           {
             // 氨氮
             type: "value",
-            name: `监测值
-(${unit})`,
+            name: unit ? `监测值
+(${unit})` : "监测值",
             nameTextStyle: {
               align: "right",
               fontFamily: "var(--dv-font-family-number)",
@@ -222,6 +250,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               color: "var(--dv-color-text-secondary)"
             },
             position: "left",
+            splitNumber: 4,
             offset: 40,
             axisLabel: {
               formatter: "{value}",
@@ -241,7 +270,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               show: false
             },
             splitLine: { show: false },
-            axisTick: { show: false }
+            axisTick: { show: false },
+            max: (value) => {
+              if (props.params?.factorCode === "w01001") {
+                if (value.max > state.factorLimitValue.upValue && state.factorLimitValue.upValue)
+                  return value.max;
+                else
+                  return state.factorLimitValue.upValue;
+              } else {
+                if (value.max < state.factorLimitValue.value && state.factorLimitValue.value)
+                  return state.factorLimitValue.value;
+                else
+                  return value.max;
+              }
+            }
           },
           {
             // 水位
@@ -272,7 +314,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ],
         series: [
           {
-            name: "降雨量趋势",
+            name: "降雨量",
             type: "line",
             // smooth: true,
             showSymbol: false,
@@ -285,6 +327,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             areaStyle: {
               color: "rgba(217, 204, 76, .5)"
             },
+            color: "rgba(217, 204, 76, 1)",
             data: rain
           },
           {
@@ -299,6 +342,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               color: "rgba(0, 221, 255, 1)",
               type: "solid"
             },
+            color: "rgba(0, 221, 255, 1)",
             markPoint: {
               show: false,
               itemStyle: {
@@ -320,39 +364,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             //     }
             // })
             data: factorValue.map((item, index) => {
-              const currData = gradeList.filter((item2) => item2.level === Number(quality[index])) || [{
-                color: "#6D7278"
-              }];
+              const currData = gradeList.filter((item2) => item2.level === Number(quality[index]));
               return {
-                value: item,
+                value: item || "",
                 itemStyle: {
-                  color: currData.length ? currData[0].color : "#6D7278"
+                  color: currData.length ? currData[0].color : "rgba(0, 221, 255, 1)"
                 }
               };
             })
-            // markArea: {
-            //     silent: true,
-            //     data: [
-            //         {
-            //             name: '达标',
-            //             label: {
-            //                 position: 'left',
-            //                 color: 'rgba(255,255,255,0.5)'
-            //             },
-            //             itemStyle: {
-            //                 color: 'transparent',
-            //                 borderColor: '#5FE81B',
-            //                 borderWidth: 7
-            //             },
-            //             x: '96.5',
-            //             yAxis: 15
-            //         },
-            //         { x: '1.5', yAxis: 10 }
-            //     ]
-            // }
           },
           {
-            name: "水位趋势",
+            name: "水位",
             type: "line",
             // smooth: true,
             showSymbol: false,
@@ -368,12 +390,72 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               opacity: 1,
               width: 0.5
             },
+            color: "rgba(238, 142, 0, 1)",
             data: hydrology
           }
         ]
       };
+      if (props.params?.factorCode === "w01001") {
+        if (state.factorLimitValue && state.factorLimitValue.upValue) {
+          option2.series[1].markLine = {
+            symbol: "none",
+            data: [
+              {
+                yAxis: state.factorLimitValue.upValue,
+                show: true,
+                lineStyle: {
+                  type: "solid",
+                  color: "#FF1744"
+                }
+              },
+              {
+                yAxis: state.factorLimitValue.downValue == null ? "" : state.factorLimitValue.downValue,
+                show: true,
+                lineStyle: {
+                  type: "solid",
+                  color: "#FF1744"
+                }
+              }
+            ],
+            label: {
+              position: "insideEndTop",
+              color: "red"
+            }
+          };
+        }
+      } else {
+        if (state.factorLimitValue.value != null) {
+          option2.series[1].markLine = {
+            symbol: "none",
+            data: [
+              {
+                yAxis: state.factorLimitValue.value,
+                show: true,
+                lineStyle: {
+                  type: "solid",
+                  color: "#FF1744"
+                }
+              }
+            ],
+            label: {
+              position: "insideEndTop",
+              color: "red"
+            }
+          };
+        }
+      }
       return option2;
     };
+    onMounted(() => {
+      !props.isLazy && initData();
+    });
+    watch([() => props.params, () => props.isLazy], () => {
+      !props.isLazy && initData();
+    }, { deep: true });
+    __expose({
+      reload: initData
+    });
+    toRefs(state);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", {

package/dist/es/wgms/src/WaterQualityStatus/index.vue.mjs

@@ -1,5 +1,4 @@
-import { defineComponent, reactive, onMounted, watch, toRefs, openBlock, createElementBlock, Fragment, renderList, unref, createElementVNode, toDisplayString, createVNode, normalizeStyle, createBlock, createCommentVNode } from 'vue';
-import dayjs from 'dayjs';
+import { defineComponent, reactive, onMounted, watch, toRefs, openBlock, createElementBlock, Fragment, renderList, unref, createElementVNode, toDisplayString, createVNode, createCommentVNode, normalizeStyle, createBlock } from 'vue';
 import _sfc_main$1 from '../common/ProgressBar.vue.mjs';
 import '../common/ProgressBar.vue2.mjs';
 import _sfc_main$2 from '../common/common-arrow.vue.mjs';
@@ -12,24 +11,31 @@ const _hoisted_3 = { class: "dv-wgms-label" };
 const _hoisted_4 = { class: "dv-wgms-rate" };
 const _hoisted_5 = { class: "dv-wgms-water-quality-status-bottom dv-wgms-flex-between-center" };
 const _hoisted_6 = { class: "dv-wgms-target" };
-const _hoisted_7 = /* @__PURE__ */ createElementVNode("span", { class: "dv-wgms-text" }, "目标", -1);
-const _hoisted_8 = { class: "dv-wgms-value" };
-const _hoisted_9 = { class: "dv-wgms-same flex-left-center" };
-const _hoisted_10 = /* @__PURE__ */ createElementVNode("span", { class: "dv-wgms-text" }, "同比", -1);
+const _hoisted_7 = /* @__PURE__ */ createElementVNode("span", { class: "dv-wgms-text" }, "总数", -1);
+const _hoisted_8 = {
+  class: "dv-wgms-value",
+  style: { "margin-right": "16px" }
+};
+const _hoisted_9 = /* @__PURE__ */ createElementVNode("span", { class: "dv-wgms-text" }, "目标", -1);
+const _hoisted_10 = { class: "dv-wgms-value" };
+const _hoisted_11 = { class: "dv-wgms-same flex-left-center" };
+const _hoisted_12 = /* @__PURE__ */ createElementVNode("span", { class: "dv-wgms-text" }, "同比", -1);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   props: {
     params: { default: () => {
       return {
-        regionCode: 3301,
-        startTime: dayjs().startOf("year").valueOf(),
-        endTime: dayjs().endOf("year").valueOf()
+        treeId: 3301,
+        timeType: "year",
+        startTime: 16725024e5,
+        endTime: 17040384e5
       };
     } },
     data: { default: () => {
       return [];
     } },
-    isLazy: { type: Boolean, default: false }
+    isLazy: { type: Boolean, default: false },
+    isShowTotal: { type: Boolean, default: false }
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
@@ -72,11 +78,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, null, 8, ["percentage"]),
             createElementVNode("div", _hoisted_5, [
               createElementVNode("div", _hoisted_6, [
-                _hoisted_7,
-                createElementVNode("span", _hoisted_8, toDisplayString(item.target === null ? "--" : `${item.target}%`), 1)
+                props.isShowTotal ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                  _hoisted_7,
+                  createElementVNode("span", _hoisted_8, toDisplayString(item.total || 0), 1)
+                ], 64)) : createCommentVNode("", true),
+                _hoisted_9,
+                createElementVNode("span", _hoisted_10, toDisplayString(item.target === null ? "--" : `${item.target}%`), 1)
               ]),
-              createElementVNode("div", _hoisted_9, [
-                _hoisted_10,
+              createElementVNode("div", _hoisted_11, [
+                _hoisted_12,
                 createElementVNode("span", {
                   style: normalizeStyle({ color: item.yoy === null ? "var(--dv-color-text-placeholder)" : item.yoy > 0 ? "var(--dv-color-success)" : item.yoy < 0 ? "var(--dv-color-danger)" : "var(--dv-color-index)" }),
                   class: "dv-wgms-value"

package/dist/es/wgms/src/WgmsSpecialSiteDetails/index.mjs

@@ -0,0 +1,7 @@
+import { install } from '../../utils/tools.mjs';
+import _sfc_main from './index.vue.mjs';
+import './index.vue2.mjs';
+
+const DvWgmsWgmsSpecialSiteDetails = install(_sfc_main);
+
+export { DvWgmsWgmsSpecialSiteDetails, _sfc_main as default };

package/dist/es/wgms/src/WgmsSpecialSiteDetails/index.vue.mjs

@@ -0,0 +1,104 @@
+import { defineComponent, ref, onMounted, watch, openBlock, createElementBlock, createElementVNode, normalizeClass, unref, normalizeStyle, toDisplayString, Fragment, renderList, createCommentVNode } from 'vue';
+import { useThemeHook } from '../../../utils.mjs';
+
+const _hoisted_1 = { class: "exhibition-center-content" };
+const _hoisted_2 = { class: "water-quality-category" };
+const _hoisted_3 = { class: "water-quality-category-warp" };
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("div", { class: "water-quality-category-title" }, " 水质类别 ", -1);
+const _hoisted_5 = { class: "grade" };
+const _hoisted_6 = /* @__PURE__ */ createElementVNode("span", { class: "grade_name" }, "类", -1);
+const _hoisted_7 = { class: "water-quality-category-target" };
+const _hoisted_8 = /* @__PURE__ */ createElementVNode("span", { class: "target" }, "目标：", -1);
+const _hoisted_9 = /* @__PURE__ */ createElementVNode("span", { class: "target_name" }, "类", -1);
+const _hoisted_10 = { class: "water-quality-status" };
+const _hoisted_11 = /* @__PURE__ */ createElementVNode("span", { class: "target" }, "水质状况：", -1);
+const _hoisted_12 = { class: "right-content" };
+const _hoisted_13 = { class: "right-content-title" };
+const _hoisted_14 = { class: "title-time" };
+const _hoisted_15 = {
+  key: 0,
+  class: "right-content-content"
+};
+const _hoisted_16 = { class: "factor-item-top" };
+const _hoisted_17 = { class: "factor-name" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    data: { default: null }
+  },
+  setup(__props) {
+    const props = __props;
+    const { isDark } = useThemeHook();
+    const waterData = ref(null);
+    onMounted(() => {
+      waterData.value = props.data;
+    });
+    watch([() => props.data], () => {
+      waterData.value = props.data;
+    }, { deep: true });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", {
+            class: normalizeClass(["water-quality-category-bg", unref(isDark) ? "bg-dark" : "bg-light"])
+          }, [
+            createElementVNode("div", _hoisted_3, [
+              _hoisted_4,
+              createElementVNode("div", {
+                style: normalizeStyle({ "--color": waterData.value?.waterQuality.gradeColor, "textAlign": "center" })
+              }, [
+                createElementVNode("span", _hoisted_5, toDisplayString(waterData.value?.waterQuality.grade), 1),
+                _hoisted_6
+              ], 4)
+            ])
+          ], 2),
+          createElementVNode("div", _hoisted_7, [
+            _hoisted_8,
+            createElementVNode("span", {
+              class: "category",
+              style: normalizeStyle({ "--color": waterData.value?.waterQuality.targetColor })
+            }, toDisplayString(waterData.value?.waterQuality.target), 5),
+            _hoisted_9
+          ]),
+          createElementVNode("div", _hoisted_10, [
+            _hoisted_11,
+            createElementVNode("span", {
+              class: "category",
+              style: normalizeStyle({ "--color": waterData.value?.waterQuality.gradeColor })
+            }, toDisplayString(waterData.value?.waterQuality.gradeName), 5)
+          ])
+        ]),
+        createElementVNode("div", _hoisted_12, [
+          createElementVNode("div", _hoisted_13, [
+            createElementVNode("div", {
+              class: normalizeClass(unref(isDark) ? "title-name" : "title-name-light")
+            }, toDisplayString(waterData.value?.site.siteName), 3),
+            createElementVNode("div", _hoisted_14, toDisplayString(waterData.value?.site.time), 1)
+          ]),
+          waterData.value?.factorList ? (openBlock(), createElementBlock("div", _hoisted_15, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(waterData.value?.factorList, (item, index) => {
+              return openBlock(), createElementBlock("div", {
+                key: item.code,
+                class: normalizeClass(["factor-item", { "last-item": index === waterData.value?.factorList.length - 1 }])
+              }, [
+                createElementVNode("div", _hoisted_16, [
+                  createElementVNode("div", _hoisted_17, toDisplayString(item.name), 1),
+                  createElementVNode("div", {
+                    class: "factor-value",
+                    style: normalizeStyle({ "--color": item.color })
+                  }, toDisplayString(item.value), 5)
+                ]),
+                createElementVNode("div", {
+                  class: "factor-item-bar",
+                  style: normalizeStyle({ "--color": item.color })
+                }, null, 4)
+              ], 2);
+            }), 128))
+          ])) : createCommentVNode("", true)
+        ])
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/es/wgms/src/WgmsSpecialSiteDetails/index.vue2.mjs

@@ -0,0 +1,3 @@
+/* unplugin-vue-components disabled */const index_vue_vue_type_style_index_0_lang = '';
+
+export { index_vue_vue_type_style_index_0_lang as default };

package/dist/es/wgms/src/WgmsSpecialSiteDetails/index.vue3.mjs

@@ -0,0 +1,6 @@
+import _sfc_main from './index.vue.mjs';
+import './index.vue2.mjs';
+
+
+
+export { _sfc_main as default };

package/dist/es/wgms/src/common/comm-btns.vue.mjs

@@ -0,0 +1,68 @@
+import { defineComponent, reactive, watch, onMounted, toRefs, openBlock, createElementBlock, Fragment, renderList, normalizeClass, unref, normalizeStyle, toDisplayString } from 'vue';
+
+const _hoisted_1 = { class: "comm-btns" };
+const _hoisted_2 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "comm-btns",
+  props: {
+    /**
+     * 按钮数据
+     */
+    tabs: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    /**
+     * 标题名称
+     */
+    selected: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    /**
+     * 面板宽度
+     */
+    width: {
+      type: Number,
+      default: void 0
+    }
+  },
+  emits: ["switchTab"],
+  setup(__props, { emit: $emit }) {
+    const props = __props;
+    const data = reactive({
+      selectedTab: {}
+    });
+    const switchTab = (item) => {
+      if (data.selectedTab.value === item.value)
+        return;
+      data.selectedTab = item;
+      $emit("switchTab", item);
+    };
+    watch(() => props.selected, () => {
+      data.selectedTab = props.selected;
+    });
+    onMounted(() => {
+      data.selectedTab = props.selected?.value ? props.selected : {};
+    });
+    const { selectedTab } = toRefs(data);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.tabs, (item, index) => {
+          return openBlock(), createElementBlock("span", {
+            key: index,
+            class: normalizeClass(["comm-btn", { active: unref(selectedTab).value === item.value }]),
+            style: normalizeStyle({ width: __props.width ? `${__props.width}px` : "auto" }),
+            onClick: ($event) => switchTab(item)
+          }, toDisplayString(item.label), 15, _hoisted_2);
+        }), 128))
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/es/wgms/src/common/comm-btns.vue2.mjs

@@ -0,0 +1,3 @@
+/* unplugin-vue-components disabled */const commBtns_vue_vue_type_style_index_0_lang = '';
+
+export { commBtns_vue_vue_type_style_index_0_lang as default };