-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtemplate.html
128 lines (112 loc) · 6.88 KB
/
template.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<script type="text/x-template" id="bigBox">
<div class="strt-part" v-if="treeObj.isCircuit!=true">
<span class="line-h line-h-c" v-show="treeObj.level>0 && treeObj.parentLength>1 " :class="{ 'line-h-l': (treeObj.index == 0), 'line-h-r': (treeObj.index == treeObj.parentLength - 1) }">{{treeObj.index}}</span>
<div class="line-v" v-show="treeObj.level>0"><span></span></div>
<span class="strt-name" @click.stop="selTree(treeObj)" @mouseenter="getBuoyTip($event,treeObj)" @mouseleave="tipHide()" >
<div class="tip_box" v-show="tipIsShow" >
<div class="tip_bar">
<div class="tip_box_hd slh" v-text="treeObj.name"></div>
<div class="tip_box_main">
<div class="enNum"><span v-text="(treeObj.data!=null && treeObj.data!=='--' )? treeObj.data+treeObj.unit : '--'">145.6</span></div>
<div v-if="$root.selTreeObj.main" class="dingErBi">能耗占预算比例
<span v-text="treeObj.quotaRadio!=null ? (treeObj.quotaRadio).toFixed(2):'--'">8</span>
<em v-text="treeObj.quotaRadio!=null ? '%':''">%</em>
</div>
<div class="dash_line"></div>
<div v-if="$root.selTreeObj.main" class="dingErZhi">能耗预算值：<span class="slh" v-text="treeObj.quotaData==='--' ? '--' : treeObj.quotaData+treeObj.unit ">159</span> </div>
<div class="range" v-if="$root.selTreeObj.main" >合理能耗范围：<span class="slh" v-text="$root.tipData.recommendRange ? $root.tipData.recommendRange+treeObj.unit : '--~--'">58~294</span> </div>
<div class="biBar">同比
<span :class="$root.tongbi" v-text="$root.tipData.yearBasis ? ($root.tipData.yearBasis>0 ? '+':'')+$root.tipData.yearBasis.toFixed(2)+'%' : '--'">+1.3%</span>        环比
<b :class="$root.huanbi" v-text="$root.tipData.linkRelativeRatio ? ( $root.tipData.linkRelativeRatio>0 ? '+':'') +$root.tipData.linkRelativeRatio.toFixed(2)+'%' : '--'">9%</b> </div>
</div>
</div>
</div>
<value-show v-if="treeObj.level<2" :tree-obj="treeObj"></value-show>
<value-hide v-if="treeObj.level>=2" :tree-obj="treeObj"></value-hide>
</span>
<div class="line-v" v-show="treeObj.children.length>0 && treeObj.children[0].isCircuit!=true "><span></span></div>
<div class="strt-block">
<div >
<big-box v-for="(index, item) in treeObj.children" :tree-obj="item" ></big-box>
</div>
</div>
</div>
</script>
<script type="text/x-template" id="valueShow">
<div class="energy_bar">
<div class="energy_box" :class="treeObj.quotaRadio>100 ? 'redBox' : ''">
<div class="bg energy_title" v-text="treeObj.name"></div>
<div class="box_c">
<span class="data slh" v-text="treeObj.data!=null ? treeObj.data : '--'">61579.3</span>
<span class="unit energy_label" v-text="(treeObj.data!=null && treeObj.data!=='--' )? treeObj.unit : ''">kWh</span>
</div>
<div v-if="$root.selTreeObj.main" class="box_bt box_c" style="height: 44px;">
<div class="energy_label">
<div>预算值：</div>
<div class="label_data " v-text="treeObj.quotaData" :title="treeObj.quotaData">1458</div>
<div v-text="treeObj.quotaData!=='--' ? treeObj.unit: ''">kWh</div>
<div class="pro_basic_box" style=" height: 22px;">
<div class="per energy_label pro_basic_data slh" v-text="treeObj.quotaRadio !=null ? (treeObj.quotaRadio).toFixed(2) : '--'">37.5</div>
<span v-text="treeObj.quotaRadio!=null ? '%' : ' '">%</span>
</div>
</div>
<div class="pro_bg">
<div class="pro_basic" :style="{width:(treeObj.quotaRadio!=null ? treeObj.quotaRadio : 0)+'%'}"></div>
</div>
</div>
</div>
</div>
</script>
<script type="text/html" id="valueHide" >
<div class="energy_item" :class="{'hengxiang':treeObj.level==2,'redBar': treeObj.quotaRadio > 100}">
<div class="item_label" v-text="treeObj.name" :class="{'shuxiangBar':treeObj.level>2}">送排风机</div>
<div class="energy_item_pro bg">
<div class="pro_basic" :style="{width:(treeObj.quotaRadio!=null ? treeObj.quotaRadio : 0)+'%'}" ></div>
</div>
</div>
</script>
<script type="x/template" id="template-tab">
<!--tab组件
props:
tabList {Array} 循环的数组,数组格式必须是[{text:"a"},{text:"b"},...]
handle {String} vm实例events中方法名,会在Swicth方法里 $dispatch 派发父链的 events
私有方法
Swicth 内部做切换操作,并$dispatch;
-->
<div p-type="tab-button">
<div class="tab-tit">
<ul id="en_compare">
<li v-for="i in tabList" v-text="i.text" v-bind:class="$index == index?'cur':''" v-on:click="Switch($index)"></li>
</ul>
</div>
</div>
</script>
<script type="x/template" id="template-combobox">
<!--
props参数 : ["comboboxTitle", "comboboxList", "dispatch","comboboxType","keyName","addedName" ,"dispatchHd"]
comboboxTitle:{String} 当前选中(或默认文本)
comboboxList:{Array} 列表菜单 循环绑定(key)
格式:[{text:"a"},{text:"b"}] comboboxList[i].text
dispatch {function} events后,点击后执行对应 $dispatch 操作
comboboxType:菜单样式;默认form,可选form ,noborder等详见控件库
slot : 默认为"" 详见vue api
私有方法:
toggleMenu:触发点击展开收起菜单
handle :选中 selected 并且 $dispatch 对应events方法
-->
<div p-type="combobox-menu" :p-type="comboboxType === undefined ?'combobox-menu':('combobox-'+comboboxType)">
<div class="combobox-title" v-on:click.stop="toggleMenu()" >
<span>v</span>
<i v-show="icon">D</i>
<em v-text="comboboxTitle"></em>
</div>
<div class="combobox-con combobox-menu-bottom">
<ul>
<li v-for="i in comboboxList" v-on:click="handle($index,keyName,addedName,unchangeTitle)">
<b v-text="i[keyName]"></b>
</li>
<slot name="last"></slot>
</ul>
</div>
</div>
</script>