monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 王涛
Commit 7f4235bd13e5ea6cc5f12d7788b0a1fc619b917c 2 parents 391c52ab 127f5f04

Merge branch 'master-ajreport-lushangqing' into 'master' 

详情表格组件功能完善-文字超出悬浮提示



See merge request !13
Inline Side-by-side
Showing 13 changed files with 421 additions and 102 deletions
@@ -77,3 +77,9 @@ @@ -77,3 +77,9 @@
77 .el-table td { 77 .el-table td {
78 padding: 6px 0; 78 padding: 6px 0;
79 } 79 }
  80 +.alarm-li{
  81 + .el-input .el-input__inner{
  82 + height: 50px;
  83 + }
  84 +}
  85 +
@@ -361,3 +361,17 @@ a:hover { @@ -361,3 +361,17 @@ a:hover {
361 border-color: rgba(249, 32, 32, 0.2); 361 border-color: rgba(249, 32, 32, 0.2);
362 color: rgb(249, 32, 32); 362 color: rgb(249, 32, 32);
363 } 363 }
  364 +/*列将内容转换成图标*/
  365 +.small-icon {
  366 + width: 22px;
  367 + height: 22px;
  368 + display: block;
  369 +}
  370 +.small-icon.small-icon-msg {
  371 + background: url('../images/monitor/icon-msg.png') no-repeat center;
  372 + background-size: contain;
  373 +}
  374 +.small-icon.small-icon-wechat {
  375 + background: url('../images/monitor/icon-wechat.png') no-repeat center;
  376 + background-size: contain;
  377 +}
@@ -36,7 +36,7 @@ @@ -36,7 +36,7 @@
36 width="30%" 36 width="30%"
37 :before-close="handleClose" 37 :before-close="handleClose"
38 > 38 >
39 - <el-form :model="rowFormData" label-width="60px"> 39 + <el-form :model="rowFormData" label-width="70px">
40 <el-form-item label="名称:"> 40 <el-form-item label="名称:">
41 <el-input 41 <el-input
42 v-model.trim="rowFormData['name']" 42 v-model.trim="rowFormData['name']"
@@ -76,6 +76,17 @@ @@ -76,6 +76,17 @@
76 controls-position="right" 76 controls-position="right"
77 /> 77 />
78 </el-form-item> 78 </el-form-item>
  79 + <el-form-item label="关联组件:">
  80 + <el-select v-model.trim="rowFormData['componentName']" size="small">
  81 + <el-option
  82 + v-for="item in componentNameData"
  83 + :key="item.value"
  84 + :label="item.label"
  85 + :value="item.value"
  86 + >
  87 + </el-option>
  88 + </el-select>
  89 + </el-form-item>
79 </el-form> 90 </el-form>
80 <span slot="footer" class="dialog-footer"> 91 <span slot="footer" class="dialog-footer">
81 <el-button size="mini" @click="editDialogVisible = false">取 消</el-button> 92 <el-button size="mini" @click="editDialogVisible = false">取 消</el-button>
@@ -160,12 +171,27 @@ export default { @@ -160,12 +171,27 @@ export default {
160 width: "", 171 width: "",
161 sort:false, 172 sort:false,
162 columnSort:0, 173 columnSort:0,
  174 + componentName:1
163 }, 175 },
164 flag: true, // true 新增， false 编辑 176 flag: true, // true 新增， false 编辑
165 indexEditor: -1, // 编辑第几个数据 177 indexEditor: -1, // 编辑第几个数据
166 tableData: [], 178 tableData: [],
167 multipleSelection:[], 179 multipleSelection:[],
168 editDialogVisible:false,//编辑列 180 editDialogVisible:false,//编辑列
  181 + componentNameData:[
  182 + {
  183 + label:'正常内容',
  184 + value:1
  185 + },
  186 + {
  187 + label:'微信图标',
  188 + value:'textToImage'
  189 + },
  190 + {
  191 + label: '级别背景',
  192 + value:'textToBg'
  193 + }
  194 + ],//关联组件
169 }; 195 };
170 }, 196 },
171 methods: { 197 methods: {
@@ -257,10 +283,9 @@ export default { @@ -257,10 +283,9 @@ export default {
257 // this.formData.push(this.rowFormData); 283 // this.formData.push(this.rowFormData);
258 let arr=[] 284 let arr=[]
259 this.multipleSelection.map((item,index)=>{ 285 this.multipleSelection.map((item,index)=>{
260 - arr.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index}) 286 + arr.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1})
261 }) 287 })
262 this.formData=arr; 288 this.formData=arr;
263 - console.log("formadata",this.formData)  
264 this.dialogVisible = false; 289 this.dialogVisible = false;
265 } else { 290 } else {
266 // 编辑 291 // 编辑
@@ -287,7 +312,7 @@ export default { @@ -287,7 +312,7 @@ export default {
287 } 312 }
288 }) 313 })
289 this.multipleSelection.splice(indexId, 1); 314 this.multipleSelection.splice(indexId, 1);
290 - console.log("*/*/*",this.multipleSelection) 315 +
291 this.tableData.map(item=>{ 316 this.tableData.map(item=>{
292 if(item.kpiId==kpiId){ 317 if(item.kpiId==kpiId){
293 setTimeout(()=>{ 318 setTimeout(()=>{
1 <template> 1 <template>
2 <div> 2 <div>
3 <div class="basic-img"> 3 <div class="basic-img">
4 - <el-popover ref="popoverMenu" placement="right" trigger="click" :auto-close="200"> 4 + <el-popover ref="popoverMenu" placement="right" trigger="click" auto-close="200" >
5 <template #reference> 5 <template #reference>
6 <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes()"> 6 <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes()">
7 </template> 7 </template>
8 <div class="info-ul" style="width:140px;" > 8 <div class="info-ul" style="width:140px;" >
9 - <div class="basic-pressing-times" @click="pressingDialog(itemMenu,tableDataValue,flg)" v-for="itemMenu in detailMenubox"> 9 + <div class="basic-pressing-times" @click.stop="pressingDialog(itemMenu,tableDataValue,flg)" v-for="itemMenu in detailMenubox">
10 <i class="el-icon-link icon-div"></i>{{itemMenu.name}} 10 <i class="el-icon-link icon-div"></i>{{itemMenu.name}}
11 </div> 11 </div>
12 </div> 12 </div>
@@ -17,7 +17,32 @@ @@ -17,7 +17,32 @@
17 > 17 >
18 <template v-slot> 18 <template v-slot>
19 <div v-if="dialogName=='alarm_setting'" class="txtScroll-top"> 19 <div v-if="dialogName=='alarm_setting'" class="txtScroll-top">
20 - 告警设置{{pressingValue}} 20 +<!-- 告警设置{{pressingValue}}-->
  21 + <div class="alarm-li flex-center">
  22 + <div class="alarm-li-label">告警策略</div>
  23 + <el-select v-model="strategyValue" filterable class="m-2 alarm-li-select" placeholder="选择告警策略">
  24 + <el-option
  25 + v-for="item in strategyData"
  26 + :key="item.value"
  27 + :label="item.label"
  28 + :value="item.value"
  29 + >
  30 + </el-option>
  31 + </el-select>
  32 + </div>
  33 + <div class="alarm-li flex-center">
  34 + <div class="alarm-li-label">告警列表</div>
  35 + <el-select v-model="alarmListValue" multiple filterable class="m-2 alarm-li-select" placeholder="选择告警列表" >
  36 + <el-option
  37 + v-for="item in alarmListData"
  38 + :key="item.value"
  39 + :label="item.label"
  40 + :value="item.value"
  41 + >
  42 + </el-option>
  43 + </el-select>
  44 + </div>
  45 +
21 </div> 46 </div>
22 <div v-if="dialogName=='filter_sheet_indicator'" class="txtScroll-top"> 47 <div v-if="dialogName=='filter_sheet_indicator'" class="txtScroll-top">
23 过滤单指标{{pressingValue}} 48 过滤单指标{{pressingValue}}
@@ -112,6 +137,19 @@ export default { @@ -112,6 +137,19 @@ export default {
112 // trendSrc:'',//性能走势图地址 137 // trendSrc:'',//性能走势图地址
113 // pressingVisible:'', 138 // pressingVisible:'',
114 pressingValue:'', 139 pressingValue:'',
  140 + strategyData: [{
  141 + label:'策略一',
  142 + value:'001'
  143 + }],//告警策略数据
  144 + strategyValue:'',//告警策略值
  145 + alarmListData:[{
  146 + label:'告警列表一',
  147 + value:'001'
  148 + },{
  149 + label:'告警列表二',
  150 + value:'002'
  151 + },],//告警列表数据
  152 + alarmListValue:[],//告警列表值
115 153
116 } 154 }
117 }, 155 },
@@ -122,6 +160,12 @@ export default { @@ -122,6 +160,12 @@ export default {
122 160
123 }, 161 },
124 deep: true 162 deep: true
  163 + },
  164 + tableName:{
  165 + handler(val){
  166 + console.log("titlename",val)
  167 + },
  168 + deep:true
125 } 169 }
126 }, 170 },
127 mounted() { 171 mounted() {
@@ -165,8 +209,14 @@ export default { @@ -165,8 +209,14 @@ export default {
165 209
166 this.setDialog(itemMenu.type,flg); 210 this.setDialog(itemMenu.type,flg);
167 211
  212 + this.closePopoverMenu();
  213 +
  214 + this.$emit("closeProbeDown",'')
  215 + // this.$refs.popoverMenu.showPopper = false;
  216 +
  217 + },
  218 + closePopoverMenu(){
168 let key=this.$refs.popoverMenu; 219 let key=this.$refs.popoverMenu;
169 - console.log("key",key)  
170 if(key && key.length>0){ 220 if(key && key.length>0){
171 key.map(item=>{ 221 key.map(item=>{
172 item.showPopper=false 222 item.showPopper=false
@@ -175,10 +225,6 @@ export default { @@ -175,10 +225,6 @@ export default {
175 key.showPopper=false 225 key.showPopper=false
176 226
177 } 227 }
178 -  
179 - this.$emit("closeProbeDown",'')  
180 - // this.$refs.popoverMenu.showPopper = false;  
181 -  
182 }, 228 },
183 //打开弹框 229 //打开弹框
184 setDialog(name,flg){ 230 setDialog(name,flg){
@@ -235,4 +281,29 @@ export default { @@ -235,4 +281,29 @@ export default {
235 } 281 }
236 282
237 } 283 }
  284 +.alarm-li{
  285 + width:100%;
  286 + padding:0 10px;
  287 + margin-bottom: 30px;
  288 + .alarm-li-label{
  289 + height:50px;
  290 + line-height: 50px;
  291 + background: #fbfbfb;
  292 + padding:10px;
  293 + display: flex;
  294 + align-items: center;
  295 + border:1px solid #e6e6e6;
  296 + }
  297 + .alarm-li-select{
  298 + flex:1;
  299 +
  300 + }
  301 +}
  302 +.el-input .el-input__inner{
  303 + height: 40px;
  304 +}
  305 +.flex-center{
  306 + display: flex;
  307 + justify-content: center;
  308 +}
238 </style> 309 </style>
  1 +<template>
  2 + <div class="text-bg-div">
  3 + <div :class="['table-level-normal',{'table-level-worse':alarmLevel=='2','table-level-worst':alarmLevel=='3'}]">
  4 + {{levelName}}
  5 + </div>
  6 +
  7 + </div>
  8 +</template>
  9 +
  10 +<script>
  11 +export default {
  12 + name: "textToBg",
  13 + data() {
  14 + return {
  15 + levelName:'一般'
  16 + }
  17 + },
  18 + components: {},
  19 + props: {
  20 + alarmLevel: String,
  21 + },
  22 + computed: {},
  23 + mounted() {
  24 + this.getLeveName();
  25 + },
  26 + methods: {
  27 + getLeveName(){
  28 + if(this.alarmLevel=='1'){
  29 + this.levelName='一般'
  30 + }else if(this.alarmLevel=='2'){
  31 + this.levelName='重要'
  32 + }else if(this.alarmLevel=='3'){
  33 + this.levelName='严重'
  34 + }else{
  35 + this.levelName='一般'
  36 + }
  37 + }
  38 + }
  39 +}
  40 +</script>
  41 +
  42 +<style lang="scss" scoped>
  43 +.text-bg-div{
  44 + width:80%;
  45 +}
  46 +.table-level-normal {
  47 + min-width: 28px;
  48 + line-height: 28px;
  49 + width:100%;
  50 + display: inline-block;
  51 + padding: 0 3px;
  52 + color: #fff;
  53 + background-color: #1e9fff
  54 +}
  55 +.table-level-worse {
  56 + background-color: #FF7E00;
  57 +}
  58 +.table-level-worst {
  59 + background-color: #D81E06;
  60 +}
  61 +</style>
  1 +<template>
  2 + <div>
  3 + <div :class="['small-icon',{'small-icon-wechat':way=='','small-icon-msg':way=='message'}]"></div>
  4 +
  5 + </div>
  6 +</template>
  7 +
  8 +<script>
  9 +export default {
  10 + name: "textToImage",
  11 + data() {
  12 + return {
  13 + }
  14 + },
  15 + components: {},
  16 + props: {
  17 + way: String,
  18 + },
  19 + computed: {},
  20 + mounted() {},
  21 + methods: {}
  22 +}
  23 +</script>
  24 +
  25 +<style lang="scss" scoped>
  26 +
  27 +</style>
@@ -134,56 +134,119 @@ export const monitorDetailTable = { @@ -134,56 +134,119 @@ export const monitorDetailTable = {
134 placeholder: '', 134 placeholder: '',
135 value: '#e6e6e6' 135 value: '#e6e6e6'
136 }, 136 },
  137 +
  138 + [
  139 + {
  140 + name:'下探列表设置',
  141 + list:[
  142 + {
  143 + type: 'el-switch',
  144 + label: '告警设置',
  145 + name: 'alarm_setting',
  146 + required: false,
  147 + placeholder: '',
  148 + value: true
  149 + },
  150 + {
  151 + type: 'el-switch',
  152 + label: '过滤单指标',
  153 + name: 'filter_sheet_indicator',
  154 + required: false,
  155 + placeholder: '',
  156 + value: true
  157 + },
  158 + {
  159 + type: 'el-switch',
  160 + label: '过滤多指标',
  161 + name: 'filter_multiple_indicators',
  162 + required: false,
  163 + placeholder: '',
  164 + value: true
  165 + },
  166 + {
  167 + type: 'el-switch',
  168 + label: '性能趋势',
  169 + name: 'performance_trends',
  170 + required: false,
  171 + placeholder: '',
  172 + value: true
  173 + },
  174 + {
  175 + type: 'el-switch',
  176 + label: '压制次数',
  177 + name: 'pressing_times',
  178 + required: false,
  179 + placeholder: '',
  180 + value: true
  181 + },
  182 + {
  183 + type: 'el-switch',
  184 + label: '纳入容量预测',
  185 + name: 'include_capacity_forecast',
  186 + required: false,
  187 + placeholder: '',
  188 + value: true
  189 + }
  190 + ]
  191 + }
  192 + ],
137 { 193 {
138 type: 'el-switch', 194 type: 'el-switch',
139 - label: '告警设置',  
140 - name: 'alarm_setting',  
141 - required: false,  
142 - placeholder: '',  
143 - value: true  
144 - },  
145 - {  
146 - type: 'el-switch',  
147 - label: '过滤单指标',  
148 - name: 'filter_sheet_indicator',  
149 - required: false,  
150 - placeholder: '',  
151 - value: true  
152 - },  
153 - {  
154 - type: 'el-switch',  
155 - label: '过滤多指标',  
156 - name: 'filter_multiple_indicators',  
157 - required: false,  
158 - placeholder: '',  
159 - value: true  
160 - },  
161 - {  
162 - type: 'el-switch',  
163 - label: '性能趋势',  
164 - name: 'performance_trends',  
165 - required: false,  
166 - placeholder: '',  
167 - value: true  
168 - },  
169 - {  
170 - type: 'el-switch',  
171 - label: '压制次数',  
172 - name: 'pressing_times',  
173 - required: false,  
174 - placeholder: '',  
175 - value: true  
176 - },  
177 - {  
178 - type: 'el-switch',  
179 - label: '纳入容量预测',  
180 - name: 'include_capacity_forecast', 195 + label: '弹框默认名称',
  196 + name: 'nameDefault',
181 required: false, 197 required: false,
182 placeholder: '', 198 placeholder: '',
183 value: true 199 value: true
184 }, 200 },
185 [ 201 [
186 { 202 {
  203 + name: '弹框名称设置',
  204 + list: [
  205 + {
  206 + type: 'el-switch',
  207 + label: '资源类型',
  208 + name: 'nameResType',
  209 + required: false,
  210 + placeholder: '',
  211 + value: false
  212 + },
  213 + {
  214 + type: 'el-switch',
  215 + label: 'IP地址',
  216 + name: 'nameIPAddress',
  217 + required: false,
  218 + placeholder: '',
  219 + value: false
  220 + },
  221 + {
  222 + type: 'el-switch',
  223 + label: '资源名称',
  224 + name: 'nameResName',
  225 + required: false,
  226 + placeholder: '',
  227 + value: false
  228 + },
  229 + {
  230 + type: 'el-switch',
  231 + label: '指标名称',
  232 + name: 'nameKpiName',
  233 + required: false,
  234 + placeholder: '',
  235 + value: false
  236 + },
  237 + {
  238 + type: 'el-switch',
  239 + label: '指标标识',
  240 + name: 'nameKpiFlg',
  241 + required: false,
  242 + placeholder: '',
  243 + value: false
  244 + }
  245 + ],
  246 + }
  247 + ],
  248 + [
  249 + {
187 name: '状态范围设置', 250 name: '状态范围设置',
188 list: [ 251 list: [
189 { 252 {
@@ -336,11 +399,11 @@ export const monitorDetailTable = { @@ -336,11 +399,11 @@ export const monitorDetailTable = {
336 chartType:'detail-table', 399 chartType:'detail-table',
337 placeholder: '', 400 placeholder: '',
338 value: [ 401 value: [
339 - {name: '文件系统挂载', key: 'KPI7AC1664E', width: '50%',isStatic:true,columnSort:0},  
340 - {name: '文件系统使用率', key: 'KPI449F5365', width: '50%',isStatic:true,columnSort:1},  
341 - {name: '文件系统总大小', key: 'KPIA91F44E7', width: '50%',isStatic:true,columnSort:2},  
342 - {name: '文件系统已使用大小', key: 'KPI98306224', width: '50%',isStatic:true,columnSort:3},  
343 - {name: '卷名称', key: 'KPI77C28BBA', width: '50%',isStatic:true,columnSort:4}, 402 + {name: '文件系统挂载', key: 'KPI7AC1664E', width: '50%',isStatic:true,columnSort:0,componentName:1},
  403 + {name: '文件系统使用率', key: 'KPI449F5365', width: '50%',isStatic:true,columnSort:1,componentName:1},
  404 + {name: '文件系统总大小', key: 'KPIA91F44E7', width: '50%',isStatic:true,columnSort:2,componentName:1},
  405 + {name: '文件系统已使用大小', key: 'KPI98306224', width: '50%',isStatic:true,columnSort:3,componentName:1},
  406 + {name: '卷名称', key: 'KPI77C28BBA', width: '50%',isStatic:true,columnSort:4,componentName:1},
344 ] 407 ]
345 } 408 }
346 ], 409 ],
1 <template> 1 <template>
2 - <div :style="styleObj" @click="closePressingDialog" ref="detailTable"> 2 + <div :style="styleObj" @mouseleave.stop="closePressingDialog" ref="detailTable">
3 <div class="detail-table-title title-flex-between"> 3 <div class="detail-table-title title-flex-between">
4 <div class="title-left">{{tableStyle.tableName}}</div> 4 <div class="title-left">{{tableStyle.tableName}}</div>
5 <div class="title-right"> 5 <div class="title-right">
6 <span class="title-link" @click="handlerDetailDataNoPage()">更多</span> 6 <span class="title-link" @click="handlerDetailDataNoPage()">更多</span>
7 - <span class="title-link">下载</span> 7 + <span class="title-link" @click="downloadTableList">下载</span>
8 </div> 8 </div>
9 </div> 9 </div>
10 <superslide v-if="hackReset" :options="options" class="txtScroll-top" :style="borderStyle"> 10 <superslide v-if="hackReset" :options="options" class="txtScroll-top" :style="borderStyle">
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 v-for="(item, index) in header" 15 v-for="(item, index) in header"
16 :style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]" 16 :style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"
17 :key="index" 17 :key="index"
18 - :class="{'ascending':(sortBy==item.key && sortCaret=='ascending'),'descending':(sortBy==item.key && sortCaret=='descending')}" 18 + :class="['padding-10',{'ascending':(sortBy==item.key && sortCaret=='ascending'),'descending':(sortBy==item.key && sortCaret=='descending')}]"
19 > 19 >
20 {{ item.name }} 20 {{ item.name }}
21 <!-- <i v-if="tableFiledSort(index)" :class="['cursorClass',{'el-icon-caret-bottom':(sortBy==item.key && sortVal=='bottom'),'el-icon-caret-top':(sortBy==item.key && sortVal=='top')}]" @click="changeSort(item)"></i>--> 21 <!-- <i v-if="tableFiledSort(index)" :class="['cursorClass',{'el-icon-caret-bottom':(sortBy==item.key && sortVal=='bottom'),'el-icon-caret-top':(sortBy==item.key && sortVal=='top')}]" @click="changeSort(item)"></i>-->
@@ -31,34 +31,31 @@ @@ -31,34 +31,31 @@
31 <li v-for="(item, index) in list" :key="index" :style="tableRowHeight()" @mouseenter="isHover=true" @mouseleave="isHover=false" > 31 <li v-for="(item, index) in list" :key="index" :style="tableRowHeight()" @mouseenter="isHover=true" @mouseleave="isHover=false" >
32 <div class="infoList-flex" :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(index),tableRowHeight(),serialNumber]"> 32 <div class="infoList-flex" :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(index),tableRowHeight(),serialNumber]">
33 {{ index+1 }}</div> 33 {{ index+1 }}</div>
34 - <div class="infoList-flex" 34 + <div class="infoList-flex text-overflow padding-10"
35 v-for="(itemChild, idx) in header" 35 v-for="(itemChild, idx) in header"
36 :key="idx" 36 :key="idx"
37 :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]" 37 :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
38 @mouseenter="pressingTimes(index,idx)" 38 @mouseenter="pressingTimes(index,idx)"
  39 + :ref="'headerRef'+index+'-'+idx"
  40 + :data-tip="tableFiledMaxWidth('isOverflow'+index+'-'+idx,index,idx)"
39 > 41 >
40 - <span @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"  
41 - :class="['listName',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">  
42 - {{ item[itemChild.key].kpiValue}} </span>  
43 - <!-- <div class="basic-img" v-if="item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)">  
44 - <el-popover ref="popoverMenu" placement="right" trigger="click" :auto-close="200">  
45 - <template #reference>  
46 - <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes(index,idx)">  
47 - </template>-->  
48 - <!-- <div class="info-ul" v-if="pressingVisible==index+'-'+idx">-->  
49 - <customMenuBox v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"  
50 - :detailMenubox="calcDetailMenubox"  
51 - :tableDataValue="item[itemChild.key].kpiValue" :flg="''" :trendSrc="trendSrc"  
52 - :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="dialogNameStyle(item[itemChild.key])" 42 + <el-tooltip v-if="!itemChild.componentName || itemChild.componentName==1" :disabled="isEllipsis[index+'-'+idx]" ref="elTooltip" trigger="hover" >
  43 + <template #content>
  44 + <span>{{ item[itemChild.key].kpiValue}}</span>
  45 + </template>
  46 + <span @mouseleave="" :ref="'isOverflow'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"
  47 + :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
  48 + {{ item[itemChild.key].kpiValue}}
  49 + </span>
  50 + </el-tooltip>
  51 + <component v-if="itemChild.componentName && itemChild.componentName!=1" :is="itemChild.componentName" :alarmLevel="item[itemChild.key].alarmLevel?item[itemChild.key].alarmLevel:'2'" :way="item[itemChild.key].way?item[itemChild.key].way:'message'" />
53 52
54 - ></customMenuBox>  
55 -<!-- <div class="info-ul" style="width:140px;" >  
56 - <div class="basic-pressing-times" @click="pressingDialog(itemMenu,item[itemChild.key].kpiValue,'')" v-for="itemMenu in calcDetailMenubox">  
57 - <i class="el-icon-link icon-div"></i>{{itemMenu.name}}  
58 - </div>  
59 - </div>-->  
60 -<!-- </el-popover>  
61 - </div>--> 53 + <customMenuBox ref="customMenu" v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
  54 + :detailMenubox="calcDetailMenubox"
  55 + :tableDataValue="item[itemChild.key].kpiValue" :flg="''" :trendSrc="trendSrc"
  56 + :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="dialogNameStyle(item[itemChild.key])"
  57 +
  58 + ></customMenuBox>
62 </div> 59 </div>
63 </li> 60 </li>
64 </ul> 61 </ul>
@@ -180,6 +177,8 @@ import VueSuperSlide from "vue-superslide"; @@ -180,6 +177,8 @@ import VueSuperSlide from "vue-superslide";
180 import {getDetailTableData,getDetailTableDataNoPage} from "@/api/platform"; 177 import {getDetailTableData,getDetailTableDataNoPage} from "@/api/platform";
181 import customDialog from "../../designerComponents/customDialog"; 178 import customDialog from "../../designerComponents/customDialog";
182 import customMenuBox from "../../designerComponents/customMenuBox";//下探组件 179 import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
  180 +import textToImage from "../../designerComponents/textToImage";//文字转图片
  181 +import textToBg from "../../designerComponents/textToBg";//文字转背景
183 182
184 vue.use(VueSuperSlide); 183 vue.use(VueSuperSlide);
185 export default { 184 export default {
@@ -188,7 +187,7 @@ export default { @@ -188,7 +187,7 @@ export default {
188 ispreview: Boolean 187 ispreview: Boolean
189 }, 188 },
190 components:{ 189 components:{
191 - customDialog,customMenuBox 190 + customDialog,customMenuBox,textToImage,textToBg
192 }, 191 },
193 data() { 192 data() {
194 return { 193 return {
@@ -261,11 +260,12 @@ export default { @@ -261,11 +260,12 @@ export default {
261 sortVal:'bottom',//排序方式 260 sortVal:'bottom',//排序方式
262 sortBy:'',//排序参数 261 sortBy:'',//排序参数
263 sortCaret:'',//正序倒序 262 sortCaret:'',//正序倒序
  263 + isEllipsis:[],//是否文字超出
  264 + componentName:'',//组件名称
264 }; 265 };
265 }, 266 },
266 computed: { 267 computed: {
267 styleObj() { 268 styleObj() {
268 - // console.log(this.optionsSetUp);  
269 const allStyle = this.optionsPosition; 269 const allStyle = this.optionsPosition;
270 return { 270 return {
271 position: this.ispreview ? "absolute" : "static", 271 position: this.ispreview ? "absolute" : "static",
@@ -469,7 +469,6 @@ export default { @@ -469,7 +469,6 @@ export default {
469 this.marginStyle+="margin-top:"+(230)+'px;'; 469 this.marginStyle+="margin-top:"+(230)+'px;';
470 470
471 } 471 }
472 - console.log("123",documentHeight,scroll)  
473 }else{ 472 }else{
474 //ajreport中弹框位置样式 473 //ajreport中弹框位置样式
475 this.heightStyle="height:"+(documentHeight+scroll)+'px;'; 474 this.heightStyle="height:"+(documentHeight+scroll)+'px;';
@@ -652,6 +651,19 @@ export default { @@ -652,6 +651,19 @@ export default {
652 } 651 }
653 return styleJson 652 return styleJson
654 }, 653 },
  654 + //列最大宽
  655 + tableFiledMaxWidth(obj,index,idx){
  656 + let that=this;
  657 + this.$nextTick(() => {
  658 + let isOverflow=that.$refs[obj];
  659 + if(isOverflow && isOverflow[0]){
  660 + let cWidth = isOverflow[0].parentElement.scrollWidth;
  661 + let sWidth = isOverflow[0].scrollWidth;
  662 + that.isEllipsis[index+'-'+idx]=!((sWidth+10) > cWidth);
  663 + }
  664 +
  665 + })
  666 + },
655 //列是否排序 667 //列是否排序
656 tableFiledSort(index){ 668 tableFiledSort(index){
657 let isSort=false; 669 let isSort=false;
@@ -667,12 +679,16 @@ export default { @@ -667,12 +679,16 @@ export default {
667 this.header.map(v=>{ 679 this.header.map(v=>{
668 if(item.key==v.key){ 680 if(item.key==v.key){
669 v.columnSort=item.columnSort; 681 v.columnSort=item.columnSort;
  682 + v.sort=item.sort?item.sort:false;
  683 + v.componentName=item.componentName?item.componentName:1;
670 } 684 }
671 }) 685 })
672 if(this.headerAll && this.headerAll.length>0){ 686 if(this.headerAll && this.headerAll.length>0){
673 this.headerAll.map(v=>{ 687 this.headerAll.map(v=>{
674 if(item.key==v.key){ 688 if(item.key==v.key){
675 v.columnSort=item.columnSort; 689 v.columnSort=item.columnSort;
  690 + v.sort=item.sort?item.sort:false;
  691 + v.componentName=item.componentName?item.componentName:1;
676 } 692 }
677 }) 693 })
678 } 694 }
@@ -680,7 +696,6 @@ export default { @@ -680,7 +696,6 @@ export default {
680 }) 696 })
681 this.header.sort(this.compare('columnSort')) 697 this.header.sort(this.compare('columnSort'))
682 this.headerAll.sort(this.compare('columnSort')) 698 this.headerAll.sort(this.compare('columnSort'))
683 - console.log("&&&",this.header)  
684 }, 699 },
685 compare(property){ 700 compare(property){
686 return function(a,b){ 701 return function(a,b){
@@ -728,7 +743,7 @@ export default { @@ -728,7 +743,7 @@ export default {
728 this.pressingVisible=index+'-'+idx; 743 this.pressingVisible=index+'-'+idx;
729 }, 744 },
730 closePressingDialog(){ 745 closePressingDialog(){
731 - this.pressingVisible=false; 746 + // this.pressingVisible=false;
732 }, 747 },
733 //弹框关闭确定 748 //弹框关闭确定
734 hideDialog(){ 749 hideDialog(){
@@ -761,7 +776,6 @@ export default { @@ -761,7 +776,6 @@ export default {
761 }else{ 776 }else{
762 //不排序 777 //不排序
763 } 778 }
764 - console.log('sort',item.key)  
765 // this.handlerDetailData('',item.key) 779 // this.handlerDetailData('',item.key)
766 // this.handlerDetailDataNoPage(); 780 // this.handlerDetailDataNoPage();
767 }, 781 },
@@ -769,7 +783,6 @@ export default { @@ -769,7 +783,6 @@ export default {
769 handleSizeChange(val){ 783 handleSizeChange(val){
770 // 切换页码重置初始页 784 // 切换页码重置初始页
771 this.currentPage = 1 785 this.currentPage = 1
772 - // console.log(`每页 ${val} 条`)  
773 //props.pageSize = val; 786 //props.pageSize = val;
774 this.pageSize = val; 787 this.pageSize = val;
775 this.handlerDetailDataNoPage(); 788 this.handlerDetailDataNoPage();
@@ -777,14 +790,12 @@ export default { @@ -777,14 +790,12 @@ export default {
777 790
778 // 切换页码 791 // 切换页码
779 handleCurrentChange(val){ 792 handleCurrentChange(val){
780 - // console.log(`当前页: ${val}`)  
781 //props.currentPage = val; 793 //props.currentPage = val;
782 this.currentPage = val; 794 this.currentPage = val;
783 this.handlerDetailDataNoPage(); 795 this.handlerDetailDataNoPage();
784 }, 796 },
785 // 切换页码 797 // 切换页码
786 prePage(val) { 798 prePage(val) {
787 - // console.log(`当前页: ${val}`)  
788 // props.currentPage = val - 1; 799 // props.currentPage = val - 1;
789 this.currentPage = val-1; 800 this.currentPage = val-1;
790 this.handlerDetailDataNoPage(); 801 this.handlerDetailDataNoPage();
@@ -792,20 +803,43 @@ export default { @@ -792,20 +803,43 @@ export default {
792 803
793 // 切换页码 804 // 切换页码
794 nextPage(val){ 805 nextPage(val){
795 - // console.log(`当前页: ${val}`)  
796 // props.currentPage = val + 1; 806 // props.currentPage = val + 1;
797 this.currentPage = val+1; 807 this.currentPage = val+1;
798 this.handlerDetailDataNoPage(); 808 this.handlerDetailDataNoPage();
799 }, 809 },
800 //计算弹框名称 810 //计算弹框名称
801 - dialogNameStyle(obj){  
802 - const tableStyleSetup=this.optionsSetUp;  
803 - let kpiName=obj.kpiName?'+'+obj.kpiName:'';  
804 - let dialogName=tableStyleSetup.tableName+kpiName;  
805 - this.dialogName=dialogName;  
806 - return dialogName; 811 + dialogNameStyle(obj) {
  812 + const tableStyleSetup = this.optionsSetUp;
  813 + let kpiName = obj.kpiName ? '+' + obj.kpiName : '';
  814 + let dialogName = tableStyleSetup.tableName + kpiName;
  815 + if (tableStyleSetup.nameDefault) {
  816 + dialogName = tableStyleSetup.tableName + kpiName;
807 817
  818 + } else {
  819 + let nameResType = tableStyleSetup.nameResType ? obj.resType ? obj.resType + '|' : '' : '';
  820 + let nameIPAddress = tableStyleSetup.nameIPAddress ? obj.ipAddr ? obj.ipAddr + '|' : '' : '';
  821 + let nameResName = tableStyleSetup.nameResName ? obj.resName ? obj.resName + '|' : '' : '';
  822 + let nameKpiName = tableStyleSetup.nameKpiName ? obj.kpiName ? obj.kpiName + '|' : '' : '';
  823 + let nameKpiFlg = tableStyleSetup.nameKpiFlg ? obj.flag ? obj.flag + '|' : '' : '';
  824 + let name = nameResType + nameIPAddress + nameIPAddress + nameResName + nameKpiName + nameKpiFlg;
  825 + dialogName = name.substring(0, name.length - 1);
  826 + }
  827 + this.dialogName = dialogName;
  828 + return dialogName;
808 }, 829 },
  830 + //下载
  831 + downloadTableList(title, resId, kpiId, flagPrifix, sortBy, order){
  832 + let kpiIdArr=[];
  833 + let param={
  834 + sortBy:this.sortBy
  835 + }
  836 + this.header.map(item=>{
  837 + if(item.sort){
  838 + kpiIdArr.push(item.key)
  839 + }
  840 + })
  841 + console.log("kpiIdArr",kpiIdArr)
  842 + }
809 } 843 }
810 }; 844 };
811 </script> 845 </script>
@@ -997,7 +1031,7 @@ export default { @@ -997,7 +1031,7 @@ export default {
997 flex-direction: column; 1031 flex-direction: column;
998 align-items: center; 1032 align-items: center;
999 height: 14px; 1033 height: 14px;
1000 - width: 24px; 1034 + width: 14px;
1001 vertical-align: middle; 1035 vertical-align: middle;
1002 cursor: pointer; 1036 cursor: pointer;
1003 overflow: initial; 1037 overflow: initial;
@@ -1008,7 +1042,7 @@ export default { @@ -1008,7 +1042,7 @@ export default {
1008 height: 0; 1042 height: 0;
1009 border: solid 5px transparent; 1043 border: solid 5px transparent;
1010 position: absolute; 1044 position: absolute;
1011 - left: 7px; 1045 + left: 1px;
1012 } 1046 }
1013 .title .sort-caret.ascending { 1047 .title .sort-caret.ascending {
1014 border-bottom-color: #c0c4cc; 1048 border-bottom-color: #c0c4cc;
@@ -1024,4 +1058,22 @@ export default { @@ -1024,4 +1058,22 @@ export default {
1024 .title .descending .sort-caret.descending { 1058 .title .descending .sort-caret.descending {
1025 border-top-color: #409eff; 1059 border-top-color: #409eff;
1026 } 1060 }
  1061 +.text-overflow{
  1062 + white-space:nowrap;
  1063 + overflow:hidden;
  1064 + text-overflow:ellipsis;
  1065 +
  1066 + /*word-break: break-all;
  1067 + text-overflow: ellipsis;
  1068 + overflow: hidden;
  1069 + display: -webkit-box;
  1070 + -webkit-line-clamp: 2;
  1071 + -webkit-box-orient: vertical;*/
  1072 +}
  1073 +.width-80{
  1074 + max-width:80%;
  1075 +}
  1076 +.padding-10{
  1077 + padding:5px;
  1078 +}
1027 </style> 1079 </style>