You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
626 lines
28 KiB
626 lines
28 KiB
3 months ago
|
|
||
|
|
class InterView{
|
||
|
|
constructor(args){
|
||
|
|
|
||
|
|
this.data = args.data;
|
||
|
|
|
||
|
|
|
||
|
|
this.render()
|
||
|
|
}
|
||
|
|
//入口
|
||
|
|
render(){
|
||
|
|
this.initTable()
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* table的重绘
|
||
|
|
*/
|
||
|
|
initTable(){
|
||
|
|
let trAttr = this.data.itemSort;
|
||
|
|
let showDays = this.data.showDays;
|
||
|
|
let len = showDays.length;
|
||
|
|
let content ='<thead>';
|
||
|
|
content +='<tr style="height:0">';
|
||
|
|
content +='<td width="126px" ></td>';
|
||
|
|
for(let i =0 ;i<len;i++){
|
||
|
|
content +='<td width="21px" ></td><td width="21px" ></td><td width="21px" ></td><td width="21px" ></td><td width="21px" ></td><td width="21px" ></td>';
|
||
|
|
}
|
||
|
|
content +='</tr>';
|
||
|
|
|
||
|
|
content +='<tr>';
|
||
|
|
for(let j=0;j<=len;j++){
|
||
|
|
if(j===0){
|
||
|
|
content+='<th>日 期</th>'
|
||
|
|
}else{
|
||
|
|
content+=`<th colspan="6" ><span>${showDays[j-1]}</span></th>`
|
||
|
|
}
|
||
|
|
}
|
||
|
|
content +='</tr>';
|
||
|
|
content +='<tr >';
|
||
|
|
content +='<td >时间</td>';
|
||
|
|
for(let j=0;j<len;j++){
|
||
|
|
content +='<td>3</td><td>7</td><td>11</td><td>15</td><td>19</td><td>23</td>';
|
||
|
|
}
|
||
|
|
content +='</tr>';
|
||
|
|
content +='</thead>'
|
||
|
|
|
||
|
|
content+='<tbody>'
|
||
|
|
|
||
|
|
|
||
|
|
for(let i =0;i<1;i++){
|
||
|
|
content +="<tr>";
|
||
|
|
if(i == 0){
|
||
|
|
content +=`<td valign="top">
|
||
|
|
<div style="width:120px; height:160px;display:inline; margin-top:0px">
|
||
|
|
<div style="width:120px;height:17px; float:left; line-height:20px;margin-top:-2px;"><span style="width:39px; float:left; text-align:center; color:#666666" id="dx_999_t_smtz_0_00">呼吸</span><span style="width:39px; float:left; text-align:center; color:#FF0000" id="dx_999_t_smtz_0_01">脉搏</span><span style="width:39px; float:left; text-align:center; color:#0000FF" id="dx_999_t_smtz_0_02">体温</span></div><div style="width:120px;height:18px; float:left; margin-top:0px;"><span style="width:39px; float:left; text-align:center; color:#666666"><img style="vertical-align:middle; height:18px" id="dx_999_t_smtz_0_10" src="${Utils.getRealPath()}/resources/component/iviewhx.png"></span><span style="width:39px; float:left; text-align:center; color:#FF0000"><img style="vertical-align:middle; height:18px" id="dx_999_t_smtz_0_11" src="${Utils.getRealPath()}/resources/component/iviewmb.png"></span><span style="width:39px; float:left; text-align:center; color:#FF0000"><img style="vertical-align:middle; height:18px" id="dx_999_t_smtz_0_12" src="${Utils.getRealPath()}/resources/component/iviewtw.png"></span></div><div style="width:100%; height:25px; float:left; margin-top:10px; line-height:20px; "><span style="width:39px; float:left; text-align:center; color:#666666; height:100%;line-height:25px;" id="dx_999_t_smtz_0_20">25</span><span style="width:39px; float:left; text-align:center; color:#FF0000;height:100%;line-height:25px;" id="dx_999_t_smtz_0_21">100</span><span style="width:39px; float:left; text-align:center; color:#0000FF;height:100%;line-height:25px;" id="dx_999_t_smtz_0_22">40</span></div><div style="width:100%; height:25px; float:left;line-height:20px; margin-top:5px;"><span style="width:39px; float:left; text-align:center; color:#666666; height:100%" id="dx_999_t_smtz_0_30">20</span><span style="width:39px; float:left; text-align:center; color:#FF0000;height:100%" id="dx_999_t_smtz_0_31">80</span><span style="width:39px; float:left; text-align:center; color:#0000FF;height:100%" id="dx_999_t_smtz_0_32">39</span></div><div style="width:100%; height:25px; float:left;line-height:20px; margin-top:5px;"><span style="width:39px; float:left; text-align:center; color:#666666; height:100%" id="dx_999_t_smtz_0_40">15</span><span style="width:39px; float:left; text-align:center; color:#FF0000;height:100%" id="dx_999_t_smtz_0_41">60</span><span style="width:39px; float:left; text-align:center; color:#0000FF;height:100%" id="dx_999_t_smtz_0_42">38</span></div><div style="width:100%; height:25px; float:left;line-height:20px; margin-top:5px;"><span style="width:39px; float:left; text-align:center; color:#666666; height:100%" id="dx_999_t_smtz_0_50">10</span><span style="width:39px; float:left; text-align:center; color:#FF0000;height:100%" id="dx_999_t_smtz_0_51">40</span><span style="width:39px; float:left; text-align:center; color:#0000FF;height:100%" id="dx_999_t_smtz_0_52">37</span></div><div style="width:100%; height:25px; float:left;line-height:20px; margin-top:5px;"><span style="width:39px; float:left; text-align:center; color:#666666; height:100%" id="dx_999_t_smtz_0_60">5</span><span style="width:39px; float:left; text-align:center; color:#FF0000;height:100%" id="dx_999_t_smtz_0_61">20</span><span style="width:39px; float:left; text-align:center; color:#0000FF;height:100%" id="dx_999_t_smtz_0_62">36</span></div><div style="width:100%; height:20px; float:left;line-height:20px; margin-top:0px;"><span style="width:39px; float:left; text-align:center; color:#666666; height:100%" id="dx_999_t_smtz_0_70">0</span><span style="width:39px; float:left; text-align:center; color:#FF0000;height:100%" id="dx_999_t_smtz_0_71">0</span><span style="width:39px; float:left; text-align:center; color:#0000FF;height:100%" id="dx_999_t_smtz_0_72">35</span></div></div>
|
||
|
|
</td>
|
||
|
|
<td colspan='${len*6}'>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" id="svg" preserveAspectRatio="xMaxYMax" version="1.1" height="200px" width="100%" >
|
||
|
|
<defs>
|
||
|
|
<!--体温-->
|
||
|
|
<g id="T">
|
||
|
|
<line x1="0" y1="0" x2="6" y2="6" style="stroke:rgb(0,0,255);stroke-width:2" />
|
||
|
|
<line x1="0" y1="6" x2="6" y2="0" style="stroke:rgb(0,0,255);stroke-width:2" />
|
||
|
|
</g>
|
||
|
|
<g id="R">
|
||
|
|
<rect height="6" width="6" y="0" x="0" stroke-width="0" stroke="#000" fill="#7631a1"/>
|
||
|
|
</g>
|
||
|
|
<!--脉搏-->
|
||
|
|
<g id="P">
|
||
|
|
<circle cx="0" cy="0" r="4" fill="red" />
|
||
|
|
</g>
|
||
|
|
<!--心率-->
|
||
|
|
<g id="HR">
|
||
|
|
<circle cx="0" cy="0" r="4" stroke="red" stroke-width="1" fill="transparent" />
|
||
|
|
</g>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</td>`;
|
||
|
|
}
|
||
|
|
content +="</tr>";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
for(let i=0;i<trAttr.length;i++){
|
||
|
|
content +='<tr id="'+trAttr[i].id+'">';
|
||
|
|
for(let j=0;j<=len;j++){
|
||
|
|
if(j===0){
|
||
|
|
if(trAttr[i].id=="advice"){
|
||
|
|
content += '<td valign="top"></td>'
|
||
|
|
}else{
|
||
|
|
content += '<td >'+trAttr[i].name+'</td>'
|
||
|
|
}
|
||
|
|
|
||
|
|
}else{
|
||
|
|
content+=`<td colspan="${trAttr[i].isColSpan?len*6:6}" valign="top"></td>`
|
||
|
|
if(trAttr[i].isColSpan){
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
content +='</tr>'
|
||
|
|
}
|
||
|
|
content+='<tbody>'
|
||
|
|
document.getElementById('table').innerHTML=content;
|
||
|
|
this.initData(len)
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 获取当前时间
|
||
|
|
* @returns {string}
|
||
|
|
*/
|
||
|
|
getDate(){
|
||
|
|
let now = new Date()
|
||
|
|
let year = now.getFullYear()
|
||
|
|
let month = (now.getMonth()+1)<10?('0'+(now.getMonth()+1).toString()):(now.getMonth()+1)
|
||
|
|
let day = now.getDate()<10?'0'+now.getDate().toString():now.getDate()
|
||
|
|
return year+'-'+month+'-'+day
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 计算时间
|
||
|
|
* @param day
|
||
|
|
* @param date
|
||
|
|
* @returns {string}
|
||
|
|
* @constructor
|
||
|
|
*/
|
||
|
|
InitDateTime(day,date) {
|
||
|
|
let agoDate = new Date(Date.parse(date.replace(/-/g, "/")));
|
||
|
|
let agoTime = agoDate.getDate();
|
||
|
|
let dayAgo = -day + agoTime;
|
||
|
|
agoDate.setDate(dayAgo);
|
||
|
|
|
||
|
|
let agoDay = agoDate.getDate()<10?'0'+agoDate.getDate().toString():agoDate.getDate();
|
||
|
|
let agoMonth = agoDate.getMonth()+1<10?'0'+(agoDate.getMonth()+1).toString():(agoDate.getMonth()+1);
|
||
|
|
let agoYear = agoDate.getFullYear();
|
||
|
|
|
||
|
|
let dateFrom = (agoYear.toString() + '-' + agoMonth.toString() + '-' + agoDay.toString());
|
||
|
|
return dateFrom
|
||
|
|
}
|
||
|
|
initLabelData(type,data){
|
||
|
|
data.forEach((element,index) => {
|
||
|
|
if(element){
|
||
|
|
let keys = Object.keys(element);
|
||
|
|
let len = keys.length
|
||
|
|
if(len>0){
|
||
|
|
for(let i =0 ;i<len;i++){
|
||
|
|
document.getElementById(type)
|
||
|
|
.querySelectorAll('td')[index+1].appendChild(new InViewLabel(Object.assign(element[keys[i]],{id:keys[i]})));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
initAdviceData(type,data,days=7){
|
||
|
|
data.forEach((element,index) => {
|
||
|
|
if(element){
|
||
|
|
document.getElementById(type)
|
||
|
|
.querySelectorAll('td')[0].appendChild(
|
||
|
|
new InViewLabel({'type':type,'info':element.name,'id':element.id}));
|
||
|
|
let svgLeft = (element.dose.begin)*126;
|
||
|
|
let svgTop = index * 20;
|
||
|
|
let svgInfo = element.dose.info;
|
||
|
|
let svgId = element.dose.id
|
||
|
|
let begin = element.dose.begin;
|
||
|
|
let end = element.dose.end;
|
||
|
|
let len = 0;
|
||
|
|
let arrow = true;
|
||
|
|
if(end ==-1){
|
||
|
|
len = (days-begin)*126;
|
||
|
|
}else{
|
||
|
|
len = (end-begin>0?end-begin:0.2)*126;
|
||
|
|
arrow = false;
|
||
|
|
}
|
||
|
|
let color = Utils.color16();
|
||
|
|
document.getElementById('advice').querySelectorAll('td')[1].appendChild(new InterViewSvg({'top':svgTop,'left':svgLeft,'info':svgInfo,'id':svgId,'length':len,'arrow':arrow,'color':color}));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
initData(showDays){
|
||
|
|
let check = this.data.check;
|
||
|
|
if(check){
|
||
|
|
this.initLabelData('check',check);
|
||
|
|
}
|
||
|
|
let test = this.data.test;
|
||
|
|
if(test){
|
||
|
|
this.initLabelData('test',test);
|
||
|
|
}
|
||
|
|
let emr = this.data.emr;
|
||
|
|
if(emr){
|
||
|
|
this.initLabelData('emr',emr);
|
||
|
|
}
|
||
|
|
let prescription = this.data.prescription;
|
||
|
|
if(prescription){
|
||
|
|
this.initLabelData('prescription',prescription);
|
||
|
|
}
|
||
|
|
let handle = this.data.handle;
|
||
|
|
if(handle){
|
||
|
|
this.initLabelData('handle',handle);
|
||
|
|
}
|
||
|
|
let advice = this.data.advice;
|
||
|
|
if(advice){
|
||
|
|
this.initAdviceData('advice',advice,showDays);
|
||
|
|
}
|
||
|
|
this.initSvg(showDays,126,201);
|
||
|
|
|
||
|
|
let temperatureArr = this.data.T;
|
||
|
|
this.makeTempCrossLine(temperatureArr,3);
|
||
|
|
let rArr = this.data.R;
|
||
|
|
this.makeRLine(rArr,3);
|
||
|
|
let pArr = this.data.P;
|
||
|
|
this.makePulseLine(pArr);
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 初始化svg 坐标系，tips
|
||
|
|
* @param {*} showDays
|
||
|
|
* @param {*} svgUnitWidth
|
||
|
|
* @param {*} svgHeight
|
||
|
|
*/
|
||
|
|
initSvg(showDays,svgUnitWidth,svgHeight){
|
||
|
|
let svg = d3.select("#svg");
|
||
|
|
svg.attr("width",svgUnitWidth*showDays).attr("height",svgHeight);
|
||
|
|
let damainX = showDays*6;
|
||
|
|
let xSc = d3.scaleLinear()
|
||
|
|
.domain([0, damainX])
|
||
|
|
.range([0, svgUnitWidth*showDays]);
|
||
|
|
this.xSc = xSc;
|
||
|
|
//公用X坐标轴
|
||
|
|
let xAxis = d3.axisTop(xSc).ticks(damainX).tickSize(svgHeight-1);
|
||
|
|
this.xAxis = xAxis;
|
||
|
|
svg.append("g").call(xAxis).attr("transform","translate(0,"+(svgHeight-1)+")");
|
||
|
|
//体温Y坐标轴
|
||
|
|
let ytemSc = d3.scaleLinear().domain([42,35]).range([0,svgHeight-1]);
|
||
|
|
let ytemAxis = d3.axisRight(ytemSc).ticks(8).tickSize(svgUnitWidth*showDays);
|
||
|
|
this.ytemSc = ytemSc;
|
||
|
|
this.ytemAxis = ytemAxis;
|
||
|
|
svg.append("g").call(ytemAxis)
|
||
|
|
.classed('axis_y', true);
|
||
|
|
d3.selectAll(".axis_y .tick:nth-of-type(6) line").attr('stroke','red')
|
||
|
|
//呼吸Y坐标系
|
||
|
|
let yRSc = d3.scaleLinear().domain([35,0]).range([0,svgHeight-1]);
|
||
|
|
let yRAxis = d3.axisRight(yRSc).ticks(8).tickSize(0).tickValues("");
|
||
|
|
this.yRSc = yRSc ;
|
||
|
|
this.yRAxis = yRAxis;
|
||
|
|
//脉搏Y坐标系
|
||
|
|
let yPSc = d3.scaleLinear().domain([140,0]).range([0,svgHeight-1]);
|
||
|
|
let yPAxis = d3.axisRight(yPSc).ticks(8).tickSize(0).tickValues("");
|
||
|
|
this.yPSc = yPSc;
|
||
|
|
this.yPAxis = yPAxis;
|
||
|
|
svg.append("g").call(yRAxis);
|
||
|
|
this.svg = svg;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//创建tips
|
||
|
|
let tips = svg.append ('g')
|
||
|
|
.attr('id','tips')
|
||
|
|
.attr ('class', 'tips')
|
||
|
|
.style('display','none')
|
||
|
|
this.tips = tips;
|
||
|
|
let tipsRect = tips.append ('path')
|
||
|
|
.attr('id','tipsRect')
|
||
|
|
.attr ('class' , 'tips-border' )
|
||
|
|
.attr ('d' , 'm5.99786,9.79993l0,0c0,-2.65063 2.97544,-4.79938 6.64583,-4.79938l3.02083,0l0,0l14.49999,0l27.18748,0c1.76259,0 3.45298,0.50565 4.69932,1.40571c1.24633,0.90006 1.94652,2.1208 1.94652,3.39368l0,11.99845l0,0l0,7.19907l0,0c0,2.65063 -2.97544,4.79938 -6.64583,4.79938l-27.18748,0l-18.94245,12.20371l4.44246,-12.20371l-3.02083,0c-3.67039,0 -6.64583,-2.14875 -6.64583,-4.79938l0,0l0,-7.19907l0,0l0,-11.99845z' )
|
||
|
|
.attr('fill','red')
|
||
|
|
.attr("opacity","0.3")
|
||
|
|
this.tipsRect= tipsRect;
|
||
|
|
let tipsText = tips.append ('text')
|
||
|
|
.attr('id','tipsText')
|
||
|
|
.attr('class' ,'tips-text')
|
||
|
|
.attr( 'x' , 6 )
|
||
|
|
.attr( 'y' , 25 )
|
||
|
|
.attr( 'fill',"black")
|
||
|
|
.attr('font-size','14px')
|
||
|
|
.text ( '' ) ;
|
||
|
|
this.tipsText = tipsText;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 呼吸
|
||
|
|
* @param {*} ds
|
||
|
|
* @param {*} offset
|
||
|
|
*/
|
||
|
|
makeRLine(ds,offset){
|
||
|
|
let svg = this.svg;
|
||
|
|
let xSc = this.xSc;
|
||
|
|
let ySc = this.yRSc;
|
||
|
|
let len = ds.length;
|
||
|
|
var resDs = [];
|
||
|
|
|
||
|
|
for(let i =0;i<len;i++){
|
||
|
|
//新数组，x坐标，y坐标，坐标上的值
|
||
|
|
if(ds[i].y!=""){
|
||
|
|
let newArr =[ds[i].x,ds[i].y];
|
||
|
|
resDs.push(newArr);
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
resDs = resDs.map(d => [ xSc(d[0]+0.5), ySc(d[1]) ,d[1]] );
|
||
|
|
let tipsText = this.tipsText;
|
||
|
|
let tips = this.tips;
|
||
|
|
let tipsRect = this.tipsRect;
|
||
|
|
let tems = svg.append("g")
|
||
|
|
.selectAll("R").data(resDs).enter()
|
||
|
|
.append("use")
|
||
|
|
.attr("href","#R")
|
||
|
|
.attr("data-y",d =>d[2])
|
||
|
|
.attr("transform",d=>"translate("+(d[0]-offset)+","+(d[1]-offset)+") ")
|
||
|
|
.attr("opacity",d =>d[1]==undefined ? 0 : 1)
|
||
|
|
.classed("outerData",true)
|
||
|
|
.on("mousemove",function(e){
|
||
|
|
var pt = d3.pointer( e ,tems.node());
|
||
|
|
console.log(pt,e.target.dataset.y);
|
||
|
|
tipsText.text ("R："+e.target.dataset.y) ;
|
||
|
|
tips.attr ('transform', 'translate(' + (e.pageX-126) + ',' + (e.pageY-90) + ')' )
|
||
|
|
tipsRect.attr("fill","rgb(255,140,0)")
|
||
|
|
tips.style('display', 'block');
|
||
|
|
})
|
||
|
|
.on ('mouseout' , function () {
|
||
|
|
tips.style('display', 'none');
|
||
|
|
})
|
||
|
|
var lnMaker = d3.line().defined((d,i) => d[1]==undefined ? false : true);
|
||
|
|
svg.append("g").append("path")
|
||
|
|
.attr("d",lnMaker(resDs))
|
||
|
|
.attr("fill","none")
|
||
|
|
.attr("stroke","#7631a1")
|
||
|
|
.classed("outerData",true);
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
* @param {传入数据，42个 {"y":100,type:"P"}的数组} ds
|
||
|
|
*/
|
||
|
|
makePulseLine(ds){
|
||
|
|
let svg = this.svg;
|
||
|
|
let xSc = this.xSc;
|
||
|
|
let ySc = this.yPSc;
|
||
|
|
let len = ds.length;
|
||
|
|
var resDs = []
|
||
|
|
for(let i =0;i<len;i++){
|
||
|
|
//新数组，x坐标，y坐标，坐标上的值
|
||
|
|
if(ds[i].y!=""){
|
||
|
|
let newArr =[ds[i].x , ds[i].y , ds[i].type];
|
||
|
|
resDs.push(newArr);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
resDs = resDs.map(d => [ xSc(d[0]+0.5), ySc(d[1]), d[2] ,d[1]] );
|
||
|
|
let tips = this.tips
|
||
|
|
let tipsText = this.tipsText;
|
||
|
|
let tipsRect = this.tipsRect;
|
||
|
|
let tems = svg.append("g")
|
||
|
|
.selectAll("bcuse").data(resDs).enter()
|
||
|
|
.append("use")
|
||
|
|
.attr("href",d =>d[2])
|
||
|
|
.attr("data-y",d =>("#P"==d[2]?"P：":"HR：")+d[3])
|
||
|
|
.attr("transform",d=>"translate("+(d[0])+","+(d[1])+") ")
|
||
|
|
.attr("opacity",d =>d[1]==undefined ? 0 : 1)
|
||
|
|
.classed("outerData",true)
|
||
|
|
.on("mousemove",function(e){
|
||
|
|
// var pt = d3.pointer( e,tems.node() );
|
||
|
|
// console.log(pt,e.target.dataset.y);
|
||
|
|
tipsText.text (e.target.dataset.y) ;
|
||
|
|
tips.attr ('transform', 'translate(' + (e.pageX-126) + ',' + (e.pageY-90) + ')' )
|
||
|
|
tipsRect.attr("fill","rgb(255,140,0)")
|
||
|
|
tips.style('display', 'block');
|
||
|
|
|
||
|
|
})
|
||
|
|
.on ('mouseout' , function () {
|
||
|
|
tips.style('display', 'none');
|
||
|
|
})
|
||
|
|
var lnMaker = d3.line().defined((d,i) => d[1]==undefined ? false : true);;
|
||
|
|
svg.append("g").append("path")
|
||
|
|
.attr("d",lnMaker(resDs))
|
||
|
|
.attr("fill","none")
|
||
|
|
.attr("stroke","red")
|
||
|
|
.classed("outerData",true)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 体温记录
|
||
|
|
* @param {*} ds
|
||
|
|
* @param {*} showDays
|
||
|
|
* @param {*} svgUnitWidth
|
||
|
|
* @param {*} svgHeight
|
||
|
|
* @param {*} offset
|
||
|
|
*/
|
||
|
|
makeTempCrossLine(ds,offset){
|
||
|
|
let svg = this.svg;
|
||
|
|
let xSc = this.xSc;
|
||
|
|
let ySc = this.ytemSc;
|
||
|
|
|
||
|
|
let len = ds.length;
|
||
|
|
var resDs = [];
|
||
|
|
var physicalCool = [];
|
||
|
|
for(let i =0;i<len;i++){
|
||
|
|
//新数组，x坐标，y坐标，坐标上的值
|
||
|
|
if(ds[i].y!=""){
|
||
|
|
let newArr =[ds[i].x,ds[i].y];
|
||
|
|
resDs.push(newArr);
|
||
|
|
if(ds[i].y1!=undefined){//有物理降温
|
||
|
|
let pcArr =[ds[i].x,ds[i].y,ds[i].y1]
|
||
|
|
physicalCool.push(pcArr);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
resDs = resDs.map(d => [ xSc(d[0]+0.5), ySc(d[1]) ,d[1]] );
|
||
|
|
let tipsText = this.tipsText;
|
||
|
|
let tips = this.tips;
|
||
|
|
let tipsRect = this.tipsRect;
|
||
|
|
let tems = svg.append("g")
|
||
|
|
.selectAll("bcuse").data(resDs).enter()
|
||
|
|
.append("use")
|
||
|
|
.attr("href","#T")
|
||
|
|
.attr("data-y",d =>d[2])
|
||
|
|
.attr("transform",d=>"translate("+(d[0]-offset)+","+(d[1]-offset)+") ")
|
||
|
|
.attr("opacity",d =>d[1]==undefined ? 0 : 1)
|
||
|
|
.classed("outerData",true)
|
||
|
|
.on("mousemove",function(e){
|
||
|
|
var pt = d3.pointer( e ,tems.node());
|
||
|
|
console.log(pt,e.target.dataset.y);
|
||
|
|
tipsText.text ("T："+e.target.dataset.y) ;
|
||
|
|
tips.attr ('transform', 'translate(' + (e.pageX-126) + ',' + (e.pageY-90) + ')' )
|
||
|
|
tipsRect.attr("fill","rgb(255,140,0)")
|
||
|
|
tips.style('display', 'block');
|
||
|
|
})
|
||
|
|
.on ('mouseout' , function () {
|
||
|
|
tips.style('display', 'none');
|
||
|
|
})
|
||
|
|
var lnMaker = d3.line().defined((d,i) => d[1]==undefined ? false : true);
|
||
|
|
svg.append("g").append("path")
|
||
|
|
.attr("d",lnMaker(resDs))
|
||
|
|
.attr("fill","none")
|
||
|
|
.attr("stroke","blue")
|
||
|
|
.classed("outerData",true);
|
||
|
|
|
||
|
|
//绘制物理降温
|
||
|
|
if(physicalCool.length>0){
|
||
|
|
physicalCool.forEach((d)=>{
|
||
|
|
//绘制虚线
|
||
|
|
let pcResDs = [[xSc(d[0]+0.5),ySc(d[1])],[xSc(d[0]+0.5),ySc(d[2])]];
|
||
|
|
svg.append("g").append("path")
|
||
|
|
.attr("d",lnMaker(pcResDs))
|
||
|
|
.attr("fill","none")
|
||
|
|
.attr("stroke-dasharray","5,5")
|
||
|
|
.attr("stroke","red")
|
||
|
|
.classed("outerData",true);
|
||
|
|
//绘制红色圆圈
|
||
|
|
let rhcDs = [xSc(d[0]+0.5),ySc(d[2])];
|
||
|
|
svg.append("g")
|
||
|
|
// .selectAll("bcuse").data(rhcDs).enter()
|
||
|
|
.append("circle").attr("r",4)
|
||
|
|
.attr("cx",rhcDs[0]).attr("cy",rhcDs[1])
|
||
|
|
.style("fill","none")
|
||
|
|
.attr("stroke","red")
|
||
|
|
.classed("outerData",true)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
class InViewLabel{
|
||
|
|
constructor(args){
|
||
|
|
this.title=args.title
|
||
|
|
this.type = args.type||"emr";
|
||
|
|
this.id = args.id;
|
||
|
|
this.info = args.info;
|
||
|
|
this.event = () =>{
|
||
|
|
Utils.sendDataToWat(JSON.stringify({
|
||
|
|
event : "click",
|
||
|
|
id: this.id,
|
||
|
|
type: this.type
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
return this.render();
|
||
|
|
}
|
||
|
|
render(){
|
||
|
|
let div = document.createElement("div");
|
||
|
|
div.innerHTML= Utils.createDiv(this.title,this.info,this.type);
|
||
|
|
div.onclick = this.event;
|
||
|
|
return div;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
class InterViewSvg{
|
||
|
|
constructor(args){
|
||
|
|
this.top = args.top;
|
||
|
|
this.left = args.left;
|
||
|
|
this.info = args.info;
|
||
|
|
this.id = args.id;
|
||
|
|
this.length = args.length;
|
||
|
|
this.arrow = args.arrow;
|
||
|
|
this.color = args.color;
|
||
|
|
this.event = () =>{
|
||
|
|
Utils.sendDataToWat(JSON.stringify({
|
||
|
|
event : "click",
|
||
|
|
id: this.id,
|
||
|
|
type: "advice"
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
return this.render();
|
||
|
|
}
|
||
|
|
render(){
|
||
|
|
let div = document.createElement("div");
|
||
|
|
div.innerHTML = Utils.createSvg(this.top+'px',this.left+'px',this.info,this.id,this.length,this.arrow);
|
||
|
|
div.onclick = this.event;
|
||
|
|
return div;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* 带图标标签
|
||
|
|
|
||
|
|
export class ImgLabel extends InViewLabel{
|
||
|
|
constructor(args){
|
||
|
|
super(args);
|
||
|
|
this.type=args.type||'emr';
|
||
|
|
return this.render();
|
||
|
|
}
|
||
|
|
render(){
|
||
|
|
let div = document.createElement("div");
|
||
|
|
div.innerHTML= Utils.createDiv(this.title,this.info,this.type);
|
||
|
|
div.onclick = this.event;
|
||
|
|
return div;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
*/
|
||
|
|
|
||
|
|
class Utils{
|
||
|
|
constructor(){
|
||
|
|
|
||
|
|
}
|
||
|
|
static getRealPath(){
|
||
|
|
let curWwwPath = window.document.location.href;
|
||
|
|
let pathName = window.document.location.pathname;
|
||
|
|
let pos = curWwwPath.indexOf(pathName);
|
||
|
|
let localhostPaht = curWwwPath.substring(0, pos);
|
||
|
|
let projectName = pathName.substring(0, pathName.substr(1).indexOf('/')+1);
|
||
|
|
return localhostPaht+projectName;
|
||
|
|
}
|
||
|
|
static sendDataToWat(data){
|
||
|
|
return window.parent.top.DxURLPage.action(this.GetQueryString('strwinid'),this.GetQueryString('strctrid'),data);
|
||
|
|
}
|
||
|
|
static GetQueryString(name){
|
||
|
|
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
|
||
|
|
var r = window.location.search.substr(1).match(reg);
|
||
|
|
if(r!=null){
|
||
|
|
return unescape(r[2]);
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
static createDiv(title,info,type,color) {
|
||
|
|
let divTemplate = "";
|
||
|
|
switch(type) {
|
||
|
|
case "emr":
|
||
|
|
divTemplate = `<div style="cursor:pointer;width:116px; height:50px; background:url(${this.getRealPath()}/resources/component/iviewbl.png) center no-repeat; font-size:12px; margin-top:-3px;margin-left:-1px;padding:0; text-align:left"><div style="width:116px; height:25px; line-height:27px "><div style="width:29px; height:25px; float:left; text-align:right; color:#FFFFFF;line-height:32px"></div><div nowrap="true" style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:87px; height:29px; float:left; text-align:left; line-height:42px; color:#0284fe" title=""></div></div><div nowrap="true" style="margin-left:2px;cursor:hand;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:116px;height:25px; line-height:26px; text-align:left" title=${info}> ${info}</div></div>`;
|
||
|
|
break;
|
||
|
|
case "test":
|
||
|
|
divTemplate = `<div style="cursor:pointer;width:116px; height:50px; background:url(${this.getRealPath()}/resources/component/iviewjy.png) center no-repeat; font-size:12px; margin-top:-3px;margin-left:-1px;padding:0; text-align:left"><div style="width:116px; height:25px; line-height:27px "><div style="width:29px; height:25px; float:left; text-align:right; color:#FFFFFF;line-height:32px"></div><div nowrap="true" style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:87px; height:29px; float:left; text-align:left; line-height:42px; color:red" title=${title}>${title}</div></div><div nowrap="true" style="margin-left:2px;cursor:hand;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:116px;height:25px; line-height:26px; text-align:left" title=${info}> ${info}</div></div>`;
|
||
|
|
break;
|
||
|
|
case "check":
|
||
|
|
divTemplate = `<div style="cursor:pointer;width:116px; height:50px; background:url(${this.getRealPath()}/resources/component/iviewjc.png) center no-repeat; font-size:12px; margin-top:-3px;margin-left:-1px;padding:0; text-align:left"><div style="width:116px; height:25px; line-height:27px "><div style="width:29px; height:25px;font-size:12;float:left;text-align:center; color:#FFFFFF;line-height:32px">检查</div><div nowrap="true" style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:87px; height:29px; float:left; text-align:left; line-height:42px; color:#0284fe" title=${title}>${title}</div></div><div nowrap="true" style="margin-left:2px;cursor:hand;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:116px;height:25px; line-height:26px; text-align:left" title=${info}> ${info}</div></div>`
|
||
|
|
break;
|
||
|
|
case "advice":
|
||
|
|
divTemplate = `<div nowrap="true" style="cursor:pointer;color:#000000;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:116px; height:20px; float:left; border:0px solid #999999; line-height:20px; text-align:center; margin-top:0px; " title=${info}>${info}</div>`
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
divTemplate = `<div nowrap="true" style="cursor:pointer;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:116px; height:20px; border:1px solid #999999; line-height:20px; text-align:center; margin-top:1px; " title=${info}>${info}</div>`;
|
||
|
|
}
|
||
|
|
return divTemplate;
|
||
|
|
}
|
||
|
|
static createSvg(top,left,info,id,length,arrow){
|
||
|
|
let color = this.color16();
|
||
|
|
if(arrow){
|
||
|
|
return `<div style="position:absolute;cursor:pointer;height:20px;left:${left};top:${top};width:${length}">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="20px" width="${length}">
|
||
|
|
<defs>
|
||
|
|
<marker id="idArrow${id}" viewBox="0 0 20 20" refX="0" refY="10" markerUnits="strokeWidth" markerWidth="3" markerHeight="10" orient="auto">
|
||
|
|
<path d="M 0 0 L 20 10 L 0 20 z" fill="${color}" stroke="${color}"></path>
|
||
|
|
</marker>
|
||
|
|
</defs>
|
||
|
|
<line marker-end="url(#idArrow${id})" x1="0" y1="10" x2="${length-11}" y2="10" style="stroke:${color};stroke-width:4;"></line>
|
||
|
|
</svg>
|
||
|
|
<div style="z-index:100;position:absolute;left:2px;top:2px;font-weight:bold;font-size:12;color:#060606">${info}</div>
|
||
|
|
</div>`;
|
||
|
|
}else{
|
||
|
|
return `<div style="position:absolute;cursor:pointer;height:20px;left:${left};top:${top};width:${length}">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="20px" width="${length}">
|
||
|
|
<line x1="0" y1="10" x2="${length-11}" y2="10" style="stroke:#659F63;stroke-width:4;"></line>
|
||
|
|
</svg>
|
||
|
|
<div style="z-index:100;position:absolute;left:2px;top:2px;font-weight:bold;font-size:12;color:#060606">${info}</div>
|
||
|
|
</div>`;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
static color16(){
|
||
|
|
let colors = Array.of('#78debe','#4395e2','#8bcf31','#cbc874','#7631a1',
|
||
|
|
'#b488f0','#217c62','#fddc49','#70323e','#f509f3','#a1baee','#ed7a30',
|
||
|
|
'#fa53fd','#73e50f','#254911','#c86e70','#db2dac','#395599');
|
||
|
|
let index = Math.floor((Math.random()*colors.length));
|
||
|
|
return colors[index];
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|