index.6a3ba7de.js 3.6 KB

1
  1. import{f as z,r as y,e as f,a7 as h,h as m,E as g,G as T,j as v,A as j,M as N,L as b,H as w,N as F,z as x,v as L,w as U,i as $,F as X,$ as A}from"./vue.fb807239.js";import{T as G}from"./index.c691347b.js";import{_ as D}from"./_plugin-vue_export-helper.c27b6911.js";import{X as H}from"./index.18ea3f49.js";const O={class:"metric-value"},q={class:"metric-pre"},J=z({name:"MCard",__name:"mCard",props:{modelValue:{},metricItems:{},color:{}},emits:["update:modelValue","change-metric"],setup(V,{emit:C}){const c=V,n=C,i=y(c.modelValue),l=(a,u)=>{n("update:modelValue",a),n("change-metric",a,u)},s=f(()=>{const a=c.metricItems.find(u=>u.value===i.value);return a||null}),d=f(()=>{const a={"border-top-color":"rgb(232, 244, 255)"};return c.color&&(a["border-top-color"]=c.color),a}),_=f(()=>{var a;return(((a=s.value)==null?void 0:a.gapVal)??-1)>0}),p=f(()=>_.value?"green":"red");return(a,u)=>{const e=h("Top"),o=h("Bottom"),t=h("el-icon"),r=h("el-card");return m(),g(r,{class:"metric-card"},{default:T(()=>{var I,M,k,B,S;return[v("div",{class:"metric-card__color",style:j(d.value)},null,4),N(G,{modelValue:i.value,"onUpdate:modelValue":u[0]||(u[0]=E=>i.value=E),options:c.metricItems,onChange:l},null,8,["modelValue","options"]),v("div",O,b((I=s.value)==null?void 0:I.metricVal),1),v("div",q,[v("span",null,b((M=s.value)==null?void 0:M.preVal)+"  ",1),w(N(t,{style:{display:"inline-block","padding-top":"2px"}},{default:T(()=>[_.value?(m(),g(e,{key:0,class:x(p.value)},null,8,["class"])):(m(),g(o,{key:1,class:x(p.value)},null,8,["class"]))]),_:1},512),[[F,(k=s.value)==null?void 0:k.gapVal]]),v("span",{class:x(p.value)},b((B=s.value)!=null&&B.gapVal?((S=s.value)==null?void 0:S.gapVal)+"%":""),3)])]}),_:1})}}});const K=D(J,[["__scopeId","data-v-08c63995"]]),P={class:"metrics-cards"},Q=z({__name:"index",props:{modelValue:{},metricItems:{}},emits:["change","update:modelValue"],setup(V,{emit:C}){const c={},n=V,i=C,l=y(n.modelValue),s=y([]),d=f(()=>{const e={};for(const o of n.metricItems)e[o.value]=o.label;return e});L(()=>{const e={};for(const o of l.value)s.value.push({metric:o.metric,color:o.color}),e[o.metric]=!0,o.color&&(c[o.color]=!0)});const _=()=>{for(const[e,o]of Object.entries(c))if(!o)return c[e]=!0,e;return""},p=e=>{H.has(c,e)&&(c[e]=!1)},a=(e,o)=>{for(const r of n.metricItems)r.value===e?r.disabled=!0:r.value===o&&(r.disabled=!1);const t=l.value.findIndex(r=>r.metric===o);t>-1&&(l.value[t].metric=e,l.value[t].label=d.value[e],i("update:modelValue",l.value),i("change",l.value))},u=e=>{const o=l.value.findIndex(t=>t.metric===e);if(o>-1){if(l.value.length<=1)return;const t=l.value[o];l.value.splice(o,1),p(t.color),i("update:modelValue",l.value),i("change",l.value)}else{if(l.value.length===3)l.value[2].metric=e,l.value[2].label=d.value[e];else{const t=_();l.value.push({metric:e,color:t,label:d.value[e]})}i("update:modelValue",l.value),i("change",l.value)}};return U(l.value,()=>{const e={};for(const o of l.value)e[o.metric]=o.color;for(const o of s.value){const t=e[o.metric];t?o.color=t:o.color=void 0}}),U(n.metricItems,()=>{const e={};for(const t of s.value)e[t.metric]=!0;let o=6-s.value.length;if(o>0){for(const t of n.metricItems)if(!e[t.value]&&(s.value.push({metric:t.value}),e[t.value]=!0,o--,o===0))break}for(const t of n.metricItems)e[t.value]?t.disabled=!0:t.disabled=!1}),(e,o)=>(m(),$("div",P,[(m(!0),$(X,null,A(s.value,t=>(m(),g(K,{modelValue:t.metric,"onUpdate:modelValue":r=>t.metric=r,"metric-items":n.metricItems,color:t.color,onChangeMetric:a,onClick:r=>u(t.metric)},null,8,["modelValue","onUpdate:modelValue","metric-items","color","onClick"]))),256))]))}});const ee=D(Q,[["__scopeId","data-v-3a3260d4"]]);export{ee as M};