交叉表

src/view/bireport/ReportTable.vue

@@ -66,7 +66,7 @@ export default {
 						}
 						let lastlvl = d.level === ts.datas.rowLevel - 1;
 						ths.push(h('th', {attrs:{colspan:d.colSpan, rowspan:d.rowSpan,valign:"top"}},[h('span', {class:"s_rowDim", title:d.value}, [
-							h('a',{attrs:{class:(lastlvl?"dimDrill fa fa-plus-square-o":"dimgoup fa fa-minus-square-o")}, on:{click:()=>{lastlvl?ts.drillDim(d.nodeId, 'row', d.value):ts.dirllUp(d.nodeId, 'row')}}},' '),
+							h('a',{attrs:{class:(d.nodeType==='none'?"":(lastlvl?"dimDrill fa fa-plus-square-o":"dimgoup fa fa-minus-square-o"))}, on:{click:()=>{lastlvl?ts.drillDim(d.nodeId, 'row', d.value):ts.dirllUp(d.nodeId, 'row')}}},' '),
 							h('span', d.value)
 						])]));
 					});
@@ -137,7 +137,7 @@ export default {
 						}else{ //其他是维度
 							let lastlvl = d.level === ts.datas.colLevel - 2;
 							ths.push(h('th', {attrs:{colspan:d.colSpan, rowspan:d.rowSpan}},[h('div', {class:"coldim"},[
-								h('a', {attrs:{class:lastlvl?"dimDrill fa fa-plus-square-o":"dimgoup fa fa-minus-square-o"},on:{click:()=>{lastlvl?ts.drillDim(d.nodeId, 'col', d.value):ts.dirllUp(d.nodeId, 'col')}}},' '), 
+								h('a', {attrs:{class:d.nodeType==='none'?"":(lastlvl?"dimDrill fa fa-plus-square-o":"dimgoup fa fa-minus-square-o")},on:{click:()=>{lastlvl?ts.drillDim(d.nodeId, 'col', d.value):ts.dirllUp(d.nodeId, 'col')}}},' '), 
 								h('span',{attrs:{class:"s_colDim", title:d.desc}},d.desc)
 							])]));
 						}
@@ -155,6 +155,7 @@ export default {
 	   renderKpisList(h){
 		   let ret = [];
 		   let ts = this;
+		   const comp = tools.findCompById(this.tableId, this.pageInfo);
 		   if(this.datas){
 				let trs = [];
 				$(this.datas.datas).each((a, b)=>{
@@ -163,6 +164,14 @@ export default {
 						if(d.isRow === true){
 							return true;
 						}
+						//判断是否有预警
+						let hasyj = false;
+						comp.kpiJson.forEach(element => {
+							if(element.kpi_id == d.colRef && element.warning){
+								hasyj = true;
+								return false;
+							}
+						});
 						ths.push(h('td', {attrs:{class: (a%2===0?"kpiData1":"kpiData2")+ " grid5-td", align:"right"}},[h('span', {attrs:{class:"kpiValue"}}, [h('a', {
 							attrs:{href:"javascript:;"},
 							on:{
@@ -170,7 +179,7 @@ export default {
 									ts.linkDetail(d);
 								}
 							}
-						}, d.value)])]));
+						}, hasyj?[h('span', {domProps:{innerHTML:d.value}})]:d.value)])]));
 					});
 					trs.push(h('tr', ths));
 				});
@@ -386,7 +395,7 @@ export default {
 						}
 						ts.$refs['tableDailog'].dimAggre(dim, comp);
 					}else if(key == "top"){
-						getDimTop('table');
+						ts.$refs['tableDailog'].dimTop(dim, comp);
 					}else if(key == "remove"){
 						tableUtils.delJsonKpiOrDim('dim', dim.id, pos, comp, ts.pageInfo,()=>{
 							ts.tableView();
@@ -433,14 +442,14 @@ export default {
 				//curTmpInfo.parentId = o.attr("parentId");
 				//curTmpInfo.parentValue = o.attr("parentValue");
 				if(key == "prop"){
-					kpiproperty();
+					ts.$refs['tableDailog'].kpiProperty(kpi, comp);
 				}else if(key == "chart"){
 					//let linkpms = o.attr("toCharPms");
 					crtChartfromTab(JSON.parse(linkpms));
 				}else if(key == "filter"){
-					kpiFilter('table');
+					ts.$refs['tableDailog'].kpiFilter(kpi, comp);
 				}else if(key == 'warn'){
-					kpiwarning()
+					ts.$refs['tableDailog'].kpiwarning(kpi, comp);
 				}else if(key == 'asc' || key == 'desc' || key == 'def'){
 					if(key == 'def'){
 						key = "";
@@ -773,4 +782,52 @@ span.kpiname {
 	height:14px;
 	cursor:pointer;	
 }
+.warning1 {
+	display: inline-block;
+    width: 16px;
+	height:16px;
+	background-image:url(../../assets/image/j1.png);
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+.warning2 {
+	display: inline-block;
+    width: 16px;
+	height:16px;
+	background-image:url(../../assets/image/j2.png);
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+.warning3 {
+	display: inline-block;
+    width: 16px;
+	height:16px;
+	background-image:url(../../assets/image/j3.png);
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+.warning4 {
+	display: inline-block;
+    width: 16px;
+	height:16px;
+	background-image:url(../../assets/image/w1.png);
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+.warning5 {
+	display: inline-block;
+    width: 16px;
+	height:16px;
+	background-image:url(../../assets/image/w2.png);
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+.warning6 {
+	display: inline-block;
+    width: 16px;
+	height:16px;
+	background-image:url(../../assets/image/w3.png);
+	background-repeat: no-repeat;
+	background-position: center center;
+}
 </style>

src/view/bireport/ReportTableDailog.vue

@@ -1,7 +1,7 @@
 <!-- 表格对话框都放这里面 -->
 <template>
   	<el-dialog :title="title" :visible.sync="show" :close-on-click-modal="false" custom-class="nopadding">
-		  <el-form :model="val" ref="valForm">
+		  <el-form :model="val" ref="valForm" label-position="left">
 			<template v-if="type === 'dimAggre'">
 				<el-form-item label="聚合方式" label-width="100px">
 					<el-select v-model="val.aggreType" style="width:100%" placeholder="请选择">
@@ -17,6 +17,144 @@
 					<button type="button" class="btn btn-danger btn-rounded btn-outline btn-xs" @click="clearAggre()">清除聚合</button>
 				</el-form-item>
 			</template>
+			<template v-if="type === 'top'">
+				<el-form-item label="维度取Top" label-width="100px">
+					<el-input-number v-model="val.top" :min="1" :max="100" label="描述文字"></el-input-number>
+				</el-form-item>
+				<el-form-item label="" label-width="100px">
+					<el-select v-model="val.topType" placeholder="请选择">
+						<el-option
+						v-for="item in opt.tops"
+						:key="item.value"
+						:label="item.name"
+						:value="item.value">
+						</el-option>
+					</el-select>
+				</el-form-item>
+			</template>
+			<template v-if="type === 'kpiprop'">
+				<el-form-item label="度量名称" label-width="100px">
+					{{kpi.kpi_name}}
+				</el-form-item>
+				<el-form-item label="所属表" label-width="100px">
+					{{kpi.tname}}
+				</el-form-item>
+				<el-form-item label="所属表" label-width="100px">
+					{{kpi.aggre}}
+				</el-form-item>
+				<el-form-item label="度量单位" label-width="100px">
+					<el-select
+					v-model="val.unit"
+					placeholder="请选择"
+					>
+					<el-option
+						v-for="item in opt.unit"
+						:key="item.value"
+						:label="item.name"
+						:value="item.value"
+					>
+				</el-option>
+				</el-select>
+				</el-form-item>
+				<el-form-item label="格式化" label-width="100px">
+					<el-select
+						v-model="val.fmt"
+						placeholder="请选择"
+						>
+						<el-option
+							v-for="item in opt.fmt"
+							:key="item.value"
+							:label="item.text"
+							:value="item.value"
+						>
+					</el-option>
+					</el-select>
+				</el-form-item>
+			</template>
+			<template v-if="type === 'kpifilter'">
+				<el-form-item label="度量名称" label-width="100px">
+					{{kpi.kpi_name}}
+				</el-form-item>
+				<el-form-item label="操作" label-width="100px">
+					<el-select
+						v-model="val.oper"
+						placeholder="请选择"
+						>
+						<el-option
+							v-for="item in opt.oper"
+							:key="item.value"
+							:label="item.text"
+							:value="item.value"
+						>
+					</el-option>
+					</el-select>
+				</el-form-item>
+				<el-form-item label="值" label-width="100px">
+					<el-input-number v-model="val.value1" label="描述文字"></el-input-number>
+				</el-form-item>
+				<el-form-item label="值2" v-show="val.oper === 'between'" label-width="100px">
+					<el-input-number v-model="val.value2" label="描述文字"></el-input-number>
+				</el-form-item>
+			</template>
+			<template v-if="type === 'kpiwarning'">
+				<el-form-item label="图片样式" label-width="160px">
+					<el-select v-model="val.wctype" placeholder="请选择" @change="chgpic">
+						<el-option
+							v-for="item in opt.wctypes"
+							:key="item.value"
+							:label="item.text"
+							:value="item.value"
+						>
+						</el-option>
+					</el-select>
+					<el-switch
+						v-model="val.fztp"
+						inactive-text="反转图片"
+						@change="fztpfunc"
+						>
+					</el-switch>
+				</el-form-item>
+				<el-form-item label="" label-width="160px">
+					<span slot="label">
+						<span id="ww1" class="warning6"></span>
+						当前值
+					</span>
+					<el-select v-model="val.logic1" style="width:100px;" placeholder="请选择" >
+						<el-option
+							v-for="item in opt.logics"
+							:key="item.value"
+							:label="item.value"
+							:value="item.value"
+						>
+						</el-option>
+					</el-select>
+					<el-input-number v-model="val.value1" controls-position="right" @change="handleChange(1)"></el-input-number>
+				</el-form-item>
+				<el-form-item label-width="160px">
+					<span slot="label">
+						<span id="ww2" class="warning5">
+						</span> 当前值 &lt; <span id="and1"></span> 且 
+					</span>
+					<el-select v-model="val.logic2" style="width:100px;" placeholder="请选择" >
+						<el-option
+							v-for="item in opt.logics"
+							:key="item.value"
+							:label="item.value"
+							:value="item.value"
+						>
+						</el-option>
+					</el-select>
+					<el-input-number v-model="val.value2" controls-position="right" @change="handleChange(2)"></el-input-number>
+				</el-form-item>
+				<el-form-item label-width="160px">
+					<span slot="label">
+						<span id="ww3" class="warning4"></span>
+						当前值 &lt; <span id="and2"></span>
+					
+					</span>
+				</el-form-item>
+				<button type="button" class="btn btn-danger btn-rounded btn-outline btn-xs" @click="clearwarning">清除预警</button>
+			</template>
 		  </el-form>
 		<div slot="footer" class="dialog-footer">
 			<el-button type="primary" @click="save()">确 定</el-button>
@@ -55,10 +193,54 @@
 						{name:"方差",value:"var"},
 						{name:"标准差",value:"sd"},
 						{name:"中位数",value:"middle"}
-					]
+					],
+					tops:[
+						{name:"数字", value:"number"},
+						{name:"百分比", value:"percent"}
+					],
+					unit:[{
+						name:"", value:"1"
+					},{
+						name:"千", value:"1000"
+					},{
+						name:"万", value:"10000"
+					},{
+						name:"百万", value:"1000000"
+					},{
+						name:"亿", value:"100000000"
+					}],
+					fmt:[{
+						value:"#,###", text:"整数"
+						},{
+						value:"#,##0.00", text:"小数(保留两位)"
+						},{
+						value:"#,##0.0000", text:"小数(保留四位)"
+						},{
+						value:"0.00%", text: "百分比"
+						}
+					],
+					oper:[
+						{value:">", text:"大于"},
+						{value:"<", text:"小于"},
+						{value:"=", text:"等于"},
+						{value:"between", text:"区间"}
+					],
+					wctypes:[{value:"1",text:"交通灯"},{value:"2",text:"箭头"}],
+					logics:[{value:">="},{value:">"}]
 				},
 				val:{
-					aggreType:""
+					aggreType:"",
+					top:null,
+					topType:"number",
+					unit:null,
+					fmt:null,
+					oper:null,
+					value1:null,
+					value2:null,
+					wctype:"1",
+					logic1:">=",
+					logic2:">=",
+					fztp:false
 				}
 			}
 		},
@@ -76,9 +258,44 @@
 					this.val.aggreType = dim.aggre;
 				}
 			},
+			dimTop(dim, comp){
+				this.title = "维度取Top";
+				this.type = "top";
+				this.show = true;
+				this.dim = dim;
+				this.val.top = dim.top;
+				this.val.topType = dim.topType;
+			},
+			kpiProperty(kpi, comp){
+				this.title = "度量属性";
+				this.type = "kpiprop";
+				this.show = true;
+				this.kpi = kpi;
+				this.val.fmt = kpi.fmt;
+				this.val.unit = kpi.rate;
+			},
+			kpiFilter(kpi, comp){
+				this.title = "度量筛选";
+				this.type = "kpifilter";
+				this.show = true;
+				this.kpi = kpi;
+			},
+			kpiwarning(kpi, comp){
+				this.title = "指标预警";
+				this.type = "kpiwarning";
+				this.show = true;
+				this.kpi = kpi;
+				this.val.wctype = kpi.warning.pictype;
+				this.val.fztp === kpi.warning.reverse === "y";
+				this.val.logic1 = kpi.warning.logic1;
+				this.val.value1 = kpi.warning.val1;
+				this.val.logic2 = kpi.warning.logic2;
+				this.val.value2 = kpi.warning.val2;
+			},
 			save(){
+				let dim = this.dim;
+				let kpi = this.kpi;
 				if(this.type === 'dimAggre'){
-					let dim = this.dim;
 					if(dim.issum == 'y'){
 						dim.issum = "n";
 						delete dim.aggre;
@@ -86,14 +303,86 @@
 						dim.issum = 'y';
 						dim.aggre = this.val.aggreType;
 					}
-					this.show = false;
-					let o = this.$parent;
-					o.setUpdate();
-					o.tableView();
+				}else if(this.type === 'top'){
+					dim.top = this.val.top;
+					dim.topType = this.val.topType;
+				}else if(this.type === "kpiprop"){
+					kpi.fmt = this.val.fmt;
+					kpi.rate = this.val.unit;
+				}else if(this.type === 'kpifilter'){
+					var ft = this.val.oper;
+					var sv = this.val.value1;
+					var ev = this.val.value2;
+					if( !ft || !sv){
+						delete kpi.filter;
+					}else{
+						var filter = {"kpi":kpi.kpi_id,"filterType":ft,"val1":Number(sv),"val2":(ev == ""?0:Number(ev))};
+						kpi.filter = filter;
+					}
+				}else if(this.type === 'kpiwarning'){
+					var pictype = this.val.wctype;
+					var reverse = this.val.fztp?"y":"n";
+					var logic1 = this.val.logic1;
+					var val1 = this.val.value1;
+					var logic2 = this.val.logic2;
+					var val2 = this.val.value2;
+					var pic1 = $("#ww1").attr("class");
+					var pic2 = $("#ww2").attr("class");
+					var pic3 = $("#ww3").attr("class");
+					kpi.warning = {pictype:pictype,reverse:reverse,logic1:logic1,val1:val1,logic2:logic2,val2:val2,pic1:pic1,pic2:pic2,pic3:pic3}
+					
 				}
+				this.show = false;
+				let o = this.$parent;
+				o.setUpdate();
+				o.tableView();
 			},
 			clearAggre(){
 				this.val.aggreType = null;
+			},
+			handleChange(idx){
+				$("#and" + idx).text(idx === 1?this.val.value1:this.val.value2);
+			},
+			chgpic(){
+				if(this.val.wctype == 1){
+					$("#ww1").attr("class", "warning6");
+					$("#ww2").attr("class", "warning5");
+					$("#ww3").attr("class", "warning4");
+				}else if(this.val.wctype == 2){
+					$("#ww1").attr("class", "warning3");
+					$("#ww2").attr("class", "warning2");
+					$("#ww3").attr("class", "warning1");
+				}
+			},
+			fztpfunc(){
+				if(this.val.fztp === true){
+					if(this.val.wctype == 1){
+						$("#ww1").attr("class", "warning4");
+						//$("#ww2").attr("class", "warning5");
+						$("#ww3").attr("class", "warning6");
+					}else if(this.val.wctype == 2){
+						$("#ww1").attr("class", "warning1");
+						//$("#ww2").attr("class", "warning2");
+						$("#ww3").attr("class", "warning3");
+					}
+				}else{
+					if(this.val.wctype == 1){
+						$("#ww1").attr("class", "warning6");
+						//$("#ww2").attr("class", "warning5");
+						$("#ww3").attr("class", "warning4");
+					}else if(this.val.wctype == 2){
+						$("#ww1").attr("class", "warning3");
+						//$("#ww2").attr("class", "warning2");
+						$("#ww3").attr("class", "warning1");
+					}
+				}
+			},
+			clearwarning(){
+				delete this.kpi.warning;
+				this.show = false;
+				let o = this.$parent;
+				o.setUpdate();
+				o.tableView();
 			}
 		},
 		watch: {
@@ -101,5 +390,6 @@
 	}
 </script>
 
-<style lang="css" scoped>
+<style lang="less" scoped>
+
 </style>

src/view/bireport/tableUtils.js

@@ -437,7 +437,7 @@ export function fireTableScroll(comp){
 		rowLvl = 1;
 	}
 	var w = Math.round($("#T"+id).width()), h = Math.round($(".wrapper-content").height());
-	h = h - Math.round($("#d_colDims").height()) - 110;
+	h = h - Math.round($("#d_colDims").height()) - 120;
 	w = w - (127 * rowLvl);
 	if(w <0){
 		w = 200;