import{i as k}from"./index-8479db57.js";import{d as M,w as g,y as P,A as L,a as N,f as T,m as _,e as w,b as $,J as z,ac as E,g as v,aQ as A,_ as B,aC as Y}from"./index-3ac32eb9.js";import{_ as H}from"./_plugin-vue_export-helper-c27b6911.js";const R={class:"data-preview-chart"},O={class:"chart-toolbar"},U=M({__name:"DataPreviewChart",props:{pipelineId:{},dataPointId:{}},setup(x){const s=x,m=v();let a=null;const f=v(!1),l=v([new Date(Date.now()-24*60*60*1e3),new Date]),b=t=>{t&&t.length===2&&(l.value=t,c())},C=()=>{const t=[],o=l.value[0].getTime(),d=(l.value[1].getTime()-o)/50;for(let n=0;n<50;n++){const e=new Date(o+d*n),i=Math.sin(n/5)*20+50,u=(Math.random()-.5)*10,r=i+u,h=Math.sin(n/5)*20+50;t.push({timestamp:e.toISOString(),rawValue:Math.round(r*100)/100,processedValue:Math.round(h*100)/100})}return t},c=()=>{f.value=!0,setTimeout(()=>{const t=C();V(t),f.value=!1},500)},V=t=>{if(!a)return;const o=t.map(e=>e.timestamp),p=t.map(e=>e.rawValue),d=t.map(e=>e.processedValue),n={title:{text:"原始数据 vs 清洗后数据",left:"center",textStyle:{fontSize:16,fontWeight:"normal"}},tooltip:{trigger:"axis",axisPointer:{type:"cross"},formatter:e=>{if(!e||e.length===0)return"";let u=`<div style="font-weight:500;margin-bottom:4px">${e[0].axisValue}</div>`;return e.forEach(r=>{const h=r.value===null?"N/A":r.value.toFixed(2),I=r.marker,S=r.seriesName==="rawValue"?"原始数据":"清洗后数据";u+=`<div style="display:flex;justify-content:space-between;gap:16px"><span>${I} ${S}</span><span style="font-weight:500">${h}</span></div>`}),u}},legend:{data:["原始数据","清洗后数据"],bottom:10},grid:{left:60,right:40,top:60,bottom:60},xAxis:{type:"category",data:o,axisLabel:{rotate:45,formatter:e=>{const i=new Date(e);return`${i.getMonth()+1}/${i.getDate()} ${i.getHours()}:${String(i.getMinutes()).padStart(2,"0")}`}}},yAxis:[{type:"value",name:"原始数据",position:"left",axisLine:{show:!0,lineStyle:{color:"#5470C6"}},axisLabel:{formatter:"{value}"}},{type:"value",name:"清洗后数据",position:"right",axisLine:{show:!0,lineStyle:{color:"#91CC75"}},axisLabel:{formatter:"{value}"}}],dataZoom:[{type:"inside",start:0,end:100},{type:"slider",start:0,end:100,bottom:30}],series:[{name:"原始数据",type:"line",data:p,smooth:!0,symbol:"circle",symbolSize:6,lineStyle:{width:2,color:"#5470C6"},itemStyle:{color:"#5470C6"},connectNulls:!0},{name:"清洗后数据",type:"line",yAxisIndex:1,data:d,smooth:!0,symbol:"circle",symbolSize:6,lineStyle:{width:2,color:"#91CC75"},itemStyle:{color:"#91CC75"},connectNulls:!0}]};a.setOption(n,!0)},D=t=>{console.log("点击数据点",t)},y=()=>{a&&a.resize()};return g(()=>s.pipelineId,()=>{s.pipelineId&&s.dataPointId&&c()}),g(()=>s.dataPointId,()=>{s.pipelineId&&s.dataPointId&&c()}),P(()=>{m.value&&(a=k(m.value),a.on("click",D)),window.addEventListener("resize",y),s.pipelineId&&s.dataPointId&&c()}),L(()=>{a&&(a.dispose(),a=null),window.removeEventListener("resize",y)}),(t,o)=>{const p=A,d=B,n=Y;return N(),T("div",R,[_("div",O,[w(p,{modelValue:l.value,"onUpdate:modelValue":o[0]||(o[0]=e=>l.value=e),type:"datetimerange","range-separator":"至","start-placeholder":"开始时间","end-placeholder":"结束时间","value-format":"YYYY-MM-DD HH:mm:ss",onChange:b,style:{width:"400px"}},null,8,["modelValue"]),w(d,{type:"primary",onClick:c},{default:$(()=>[...o[1]||(o[1]=[z("刷新",-1)])]),_:1})]),E(_("div",{ref_key:"chartRef",ref:m,class:"chart-container"},null,512),[[n,f.value]])])}}});const Q=H(U,[["__scopeId","data-v-b4bfcb72"]]);export{Q as default};
