monitor_v3 / anji-plus-report · Commits

Go to a project

Authored by 王涛
Commit d9c49d341f891aa0584541d954c4586e91d2a9e4 2 parents 73ab1ffe 88e98bc2

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

详情表格组件嵌入其他弹框页面中的弹框样式修改



See merge request !10
Inline Side-by-side
Showing 6 changed files with 529 additions and 36 deletions
This diff could not be displayed because it is too large.
  1 +<template>
  2 + <div>
  3 + <el-button
  4 + type="primary"
  5 + size="small"
  6 + plain
  7 + @click="handleAddClick"
  8 + >配置表头</el-button
  9 + >
  10 +<!-- <el-table :data="formData" style="width: 100%">
  11 + <el-table-column prop="name" label="名称" width="60" />
  12 + <el-table-column prop="key" label="key值" width="70" />
  13 + <el-table-column prop="width" label="宽度" width="50" />
  14 + <el-table-column label="操作" width="100">
  15 + <template slot-scope="scope">
  16 + <div class="button-group">
  17 + <el-button
  18 + type="text"
  19 + size="small"
  20 + @click="handleDeleteClick(scope.$index, scope.row)"
  21 + >删除</el-button
  22 + >
  23 + </div>
  24 + </template>
  25 + </el-table-column>
  26 + </el-table>-->
  27 +
  28 + <el-dialog
  29 + title="性能指标"
  30 + :visible.sync="dialogVisible"
  31 + width="60%"
  32 + :before-close="handleClose"
  33 + >
  34 + <div class="table-search">
  35 + <el-input v-model="keyword" placeholder="请输入指标名称" clearable />
  36 + <el-button @click="searchKpi" class="search-btn" type="primary">搜索</el-button>
  37 + </div>
  38 + <el-table :data="tableData" height="350" style="width: 100%" ref="multipleTableRef" @selection-change="handleSelectionChange"
  39 + :row-key="(row) => { return row.kpiId }"
  40 + >
  41 + <el-table-column type="selection" width="55" :reserve-selection="true" />
  42 + <el-table-column prop="kpiName" label="指标名称" width="180" />
  43 + <el-table-column prop="kpiId" label="指标ID" width="180" />
  44 + <el-table-column prop="kpiCategory" label="指标分类" >
  45 + <template #default="scope">{{ scope.row.kpiCategory==0?'基本指标':'性能指标' }}</template>
  46 + </el-table-column>
  47 + <el-table-column prop="kpiUnit" label="指标单位" width="180" />
  48 + <el-table-column prop="kpiPower" label="指标权限" width="180" >
  49 + <template #default="scope">{{ scope.row.kpiPower=='hard'?'硬件':scope.row.kpiPower=='soft'?'系统':'公共' }}</template>
  50 + </el-table-column>
  51 + <el-table-column prop="policyNum" label="告警策略" width="180" >
  52 + <template #default="scope">{{ scope.row.policyNum>0?'':'暂无' }}</template>
  53 + </el-table-column>
  54 + </el-table>
  55 + <!-- 分页 -->
  56 + <div style='text-align: left;background-color: white'>
  57 + <el-pagination
  58 + v-if="currentPage"
  59 + @size-change="handleSizeChange"
  60 + @prev-click="prePage"
  61 + @next-click="nextPage"
  62 + @current-change="handleCurrentChange"
  63 + :current-page="currentPage"
  64 + :page-sizes="pageSizes"
  65 + :page-size="pageSize"
  66 + :total="total">
  67 + </el-pagination>
  68 + </div>
  69 + <span slot="footer" class="dialog-footer">
  70 + <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
  71 + <el-button size="mini" type="primary" @click="handleSaveClick"
  72 + >确 定</el-button
  73 + >
  74 + </span>
  75 + </el-dialog>
  76 + </div>
  77 +</template>
  78 +<script>
  79 +import {getKpiPage} from "@/api/platform";
  80 +import {formatDate} from "../../../../../filter";
  81 +export default {
  82 + model: {
  83 + prop: "formData",
  84 + event: "input"
  85 + },
  86 + props: {
  87 + formData: Array
  88 + },
  89 + data() {
  90 + return {
  91 + keyword:'',
  92 + currentPage:1,
  93 + pageSize:10,
  94 + pageSizes:[10,50,100, 200, 300, 400],
  95 + total:0,
  96 + layout:false,
  97 + dialogVisible: false,
  98 + rowFormData: {
  99 + name: "",
  100 + key: "",
  101 + width: ""
  102 + },
  103 + flag: true, // true 新增， false 编辑
  104 + indexEditor: -1, // 编辑第几个数据
  105 + tableData: [],
  106 + multipleSelection:[]
  107 + };
  108 + },
  109 + methods: {
  110 + //搜索指标
  111 + searchKpi(){
  112 + this.getKpi();
  113 + },
  114 + //获取性能指标列表
  115 + getKpi(){
  116 + let datas=getKpiPage();
  117 + if(datas.success){
  118 + this.tableData=datas.data;
  119 +
  120 + }
  121 + },
  122 + //回显数据
  123 + setCheckedData(){
  124 + if(this.multipleSelection && this.multipleSelection.length>0){
  125 + this.tableData.map(item=>{
  126 + this.multipleSelection.map(v=>{
  127 + if(item.kpiId==v.kpiId){
  128 + setTimeout(()=>{
  129 + this.$refs.multipleTableRef.toggleRowSelection(item)
  130 + },300)
  131 + }
  132 + })
  133 + })
  134 + }
  135 + },
  136 + //多选操作
  137 + handleSelectionChange(val) {
  138 + this.multipleSelection = val
  139 + },
  140 + // 每页展示多少条
  141 + handleSizeChange(val){
  142 + // 切换页码重置初始页
  143 + this.currentPage = 1
  144 + // console.log(`每页 ${val} 条`)
  145 + //props.pageSize = val;
  146 + this.pageSize = val;
  147 + this.getKpi();
  148 + },
  149 +
  150 + // 切换页码
  151 + handleCurrentChange(val){
  152 + // console.log(`当前页: ${val}`)
  153 + //props.currentPage = val;
  154 + this.currentPage = val;
  155 + this.getKpi();
  156 + },
  157 + // 切换页码
  158 + prePage(val) {
  159 + // console.log(`当前页: ${val}`)
  160 + // props.currentPage = val - 1;
  161 + this.currentPage = val-1;
  162 + this.getKpi();
  163 + },
  164 +
  165 + // 切换页码
  166 + nextPage(val){
  167 + // console.log(`当前页: ${val}`)
  168 + // props.currentPage = val + 1;
  169 + this.currentPage = val+1;
  170 + this.getKpi();
  171 + },
  172 + // 配置性能指标
  173 + handleAddClick() {
  174 + this.rowFormData = {};
  175 + this.flag = true;
  176 + this.dialogVisible = true;
  177 + this.getKpi();
  178 +
  179 + },
  180 + // 编辑
  181 + handleEditorClick(index, row) {
  182 + this.flag = false;
  183 + this.rowFormData = this.deepClone(row);
  184 + this.indexEditor = index;
  185 + this.dialogVisible = true;
  186 + },
  187 + // 关闭
  188 + handleClose() {
  189 + this.dialogVisible = false;
  190 + },
  191 + // 保存
  192 + handleSaveClick() {
  193 + if (this.flag) {
  194 + // 新增
  195 + // this.formData.push(this.rowFormData);
  196 + let arr=[]
  197 + this.multipleSelection.map(item=>{
  198 + arr.push({name:item.kpiName,key:item.kpiId,width:'50%'})
  199 + })
  200 + this.formData=arr;
  201 + console.log("formadata",this.formData)
  202 + this.dialogVisible = false;
  203 + } else {
  204 + // 编辑
  205 + this.formData[this.indexEditor] = this.rowFormData;
  206 + this.$set(this.formData, this.indexEditor, this.rowFormData);
  207 + this.dialogVisible = false;
  208 + }
  209 + this.$emit("input", this.formData);
  210 + this.$emit("change", this.formData);
  211 + },
  212 + // 删除
  213 + handleDeleteClick(index,row) {
  214 + this.formData.splice(index, 1);
  215 + this.setTableChecked(row.key);
  216 + this.$emit("input", this.formData);
  217 + this.$emit("change", this.formData);
  218 + },
  219 + //设置表格选中状态
  220 + setTableChecked(kpiId){
  221 + let indexId='';
  222 + this.multipleSelection.map((item,index)=>{
  223 + if(kpiId==item.kpiId){
  224 + indexId=index;
  225 + }
  226 + })
  227 + this.multipleSelection.splice(indexId, 1);
  228 + console.log("*/*/*",this.multipleSelection)
  229 + this.tableData.map(item=>{
  230 + if(item.kpiId==kpiId){
  231 + setTimeout(()=>{
  232 + this.$refs.multipleTableRef.toggleRowSelection(item)
  233 + },300)
  234 + }
  235 + })
  236 + }
  237 + }
  238 +};
  239 +</script>
  240 +<style lang="scss" scoped>
  241 +/deep/::-webkit-scrollbar-track-piece {
  242 + background-color: transparent;
  243 +}
  244 +/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  245 + width: 0; // 横向滚动条
  246 + height: 8px; // 纵向滚动条 必写
  247 +}
  248 +// 滚动条的滑块
  249 +/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  250 + border-radius: 5px;
  251 + background-color: rgba(144, 146, 152, 0.3);
  252 +}
  253 +/deep/.el-table,
  254 +/deep/.el-table__expanded-cell,
  255 +/deep/.el-table th,
  256 +/deep/.el-table tr {
  257 + background-color: transparent !important;
  258 + color: #859094 !important;
  259 + font-size: 12px !important;
  260 +}
  261 +/deep/.el-table td,
  262 +/deep/.el-table th.is-leaf {
  263 + border-bottom: none;
  264 + line-height: 26px;
  265 +}
  266 +/deep/.el-table tbody tr:hover {
  267 + background-color: #263445 !important;
  268 +}
  269 +/deep/.el-table tbody tr:hover > td {
  270 + background-color: #263445 !important;
  271 +}
  272 +/deep/.el-table::before {
  273 + height: 0;
  274 +}
  275 +.button-group .el-button {
  276 + padding: 0;
  277 +}
  278 +.table-search{
  279 + display: flex;
  280 + align-items: center;
  281 + .search-btn{
  282 + margin-left: 10px;
  283 +
  284 + }
  285 +}
  286 +</style>
  1 +<template>
  2 + <div class="dialog-div" v-if="dialogVisible" :style="heightStyle">
  3 + <div class="dialog-div-content" :style="marginStyle+widthStyle" >
  4 + <div class="dialog-div-title title-flex-between"><span>{{tableStyle.tableName}}</span> <span class="dialog-close" @click="dialogVisible = false">X</span></div>
  5 + <div v-if="dialogName=='alarm_setting'" class="txtScroll-top">
  6 + 告警设置{{pressingValue}}
  7 + </div>
  8 + <div v-if="dialogName=='filter_sheet_indicator'" class="txtScroll-top">
  9 + 过滤单指标{{pressingValue}}
  10 + </div>
  11 + <div v-if="dialogName=='filter_multiple_indicators'" class="txtScroll-top">
  12 + 过滤多指标{{pressingValue}}
  13 + </div>
  14 + <div v-if="dialogName=='performance_trends'" class="txtScroll-top">
  15 + 性能趋势{{pressingValue}}
  16 + <iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/>
  17 + </div>
  18 + <div v-if="dialogName=='pressing_times'" class="txtScroll-top">
  19 + 压制次数{{pressingValue}}
  20 + </div>
  21 + <div v-if="dialogName=='include_capacity_forecast'" class="txtScroll-top">
  22 + 纳入容量预测{{pressingValue}}
  23 + </div>
  24 + <div class="dialog-footer" v-if="dialogName!='table' && dialogName!='performance_trends'">
  25 + <el-button @click="dialogVisible = false">取消</el-button>
  26 + <el-button type="primary" @click="dialogVisible = false"
  27 + >确定</el-button
  28 + >
  29 + </div>
  30 + </div>
  31 + </div>
  32 +</template>
  33 +
  34 +<script>
  35 +export default {
  36 + name: "customDialog",
  37 + props: {
  38 + dialogVisible: Boolean,
  39 + heightStyle: String,
  40 + marginStyle: String,
  41 + widthStyle: String,
  42 + dialogName: String,
  43 + tableStyle: Object
  44 + },
  45 + data() {
  46 + return {}
  47 + },
  48 + watch: {
  49 + value: {
  50 + tableStyle(val) {
  51 +
  52 + },
  53 + deep: true
  54 + }
  55 + },
  56 + mounted() {
  57 +
  58 + },
  59 + methods: {}
  60 +}
  61 +</script>
  62 +
  63 +<style scoped>
  64 +
  65 +</style>
@@ -139,6 +139,12 @@ @@ -139,6 +139,12 @@
139 :dict-key="item.dictKey" 139 :dict-key="item.dictKey"
140 @change="changed($event, item.name)" 140 @change="changed($event, item.name)"
141 /> 141 />
  142 + <configureIndicators
  143 + v-if="item.type == 'dynamic-detail-table' && inputShow[item.name]"
  144 + v-model="formData[item.name]"
  145 + :chart-type="item.chartType"
  146 + @change="changed($event, item.name)"
  147 + />
142 <dynamic-add-table 148 <dynamic-add-table
143 v-if="item.type == 'dynamic-add-table' && inputShow[item.name]" 149 v-if="item.type == 'dynamic-add-table' && inputShow[item.name]"
144 v-model="formData[item.name]" 150 v-model="formData[item.name]"
@@ -276,6 +282,9 @@ import dynamicComponents from "./dynamicComponents.vue"; @@ -276,6 +282,9 @@ import dynamicComponents from "./dynamicComponents.vue";
276 import customColorComponents from "./customColorComponents"; 282 import customColorComponents from "./customColorComponents";
277 import dynamicAddTable from "./dynamicAddTable.vue"; 283 import dynamicAddTable from "./dynamicAddTable.vue";
278 import customUpload from "./customUpload.vue"; 284 import customUpload from "./customUpload.vue";
  285 +
  286 +import configureIndicators from "./configureIndicators.vue";
  287 +
279 export default { 288 export default {
280 name: "DynamicForm", 289 name: "DynamicForm",
281 components: { 290 components: {
@@ -284,7 +293,8 @@ export default { @@ -284,7 +293,8 @@ export default {
284 dynamicComponents, 293 dynamicComponents,
285 customColorComponents, 294 customColorComponents,
286 dynamicAddTable, 295 dynamicAddTable,
287 - customUpload 296 + customUpload,
  297 + configureIndicators
288 }, 298 },
289 model: { 299 model: {
290 prop: "value", 300 prop: "value",
@@ -273,17 +273,18 @@ export const monitorDetailTable = { @@ -273,17 +273,18 @@ export const monitorDetailTable = {
273 }, 273 },
274 ], 274 ],
275 { 275 {
276 - type: 'dynamic-add-table', 276 + type: 'dynamic-detail-table',
277 label: '', 277 label: '',
278 name: 'dynamicAddTable', 278 name: 'dynamicAddTable',
279 required: false, 279 required: false,
  280 + chartType:'detail-table',
280 placeholder: '', 281 placeholder: '',
281 value: [ 282 value: [
282 - {name: '文件系统挂载', key: 'fileAddress', width: '50%',kpiIdent:0,isWarning:0},  
283 - {name: '文件系统使用率', key: 'fileUseRate', width: '50%',isWarning:1,kpiIdent:0},  
284 - {name: '文件系统总大小', key: 'fileSize', width: '50%',kpiIdent:1,isWarning:0},  
285 - {name: '文件系统已使用大小', key: 'fileSizeUsed', width: '50%',kpiIdent:1,isWarning:0},  
286 - {name: '卷名称', key: 'fileAddressName', width: '50%',kpiIdent:0,isWarning:0}, 283 + {name: '文件系统挂载', key: 'KPI7AC1664E', width: '50%',isStatic:true},
  284 + {name: '文件系统使用率', key: 'KPI449F5365', width: '50%',isStatic:true},
  285 + {name: '文件系统总大小', key: 'KPIA91F44E7', width: '50%',isStatic:true},
  286 + {name: '文件系统已使用大小', key: 'KPI98306224', width: '50%',isStatic:true},
  287 + {name: '卷名称', key: 'KPI77C28BBA', width: '50%',isStatic:true},
287 ] 288 ]
288 } 289 }
289 ], 290 ],
@@ -324,11 +325,102 @@ export const monitorDetailTable = { @@ -324,11 +325,102 @@ export const monitorDetailTable = {
324 relactiveDom: 'dataType', 325 relactiveDom: 'dataType',
325 relactiveDomValue: 'staticData', 326 relactiveDomValue: 'staticData',
326 value: [ 327 value: [
327 - {fileAddress: '/', fileUseRate: '99%', fileSize: '196.74',fileSizeUsed:'184',fileAddressName:'/dev/vda1'},  
328 - {fileAddress: '/dev', fileUseRate: '0%', fileSize: '15.74',fileSizeUsed:'0.00',fileAddressName:'devtmpfs'},  
329 - {fileAddress: '/run', fileUseRate: '1%', fileSize: '15.32',fileSizeUsed:'0.14',fileAddressName:'tmpfs'},  
330 - {fileAddress: '/run/user/0', fileUseRate: '0%', fileSize: '3.74',fileSizeUsed:'10',fileAddressName:'tmpfs'},  
331 - {fileAddress: '/run/user/0001', fileUseRate: '2', fileSize: '3.69',fileSizeUsed:'1.23',fileAddressName:'tmpfs'}, 328 + {
  329 + header: [
  330 + {
  331 + id: "KPI7AC1664E",
  332 + name: "文件系统挂载",
  333 + unit: ""
  334 + }, {
  335 + id: "KPI449F5365",
  336 + name: "文件系统使用率",
  337 + unit: "%"
  338 + }, {
  339 + id: "KPIA91F44E7",
  340 + name: "文件系统总大小",
  341 + unit: ""
  342 + }, {
  343 + id: "KPI98306224",
  344 + name: "文件系统已使用大小",
  345 + unit: ""
  346 + },{
  347 + id: "KPI77C28BBA",
  348 + name: "卷名称",
  349 + unit: ""
  350 + }, {
  351 + id: "KPIF74D9D2B",
  352 + name: "最近采集时间",
  353 + unit: ""
  354 + }
  355 + ],
  356 + content:[
  357 + [
  358 + {
  359 + kpiId: "KPI7AC1664E",
  360 + kpiName: "文件系统挂载",
  361 + flag: "inode-",
  362 + kpiValue: "/ ",
  363 + kpiUnit: "none",
  364 + kpiIdent: "0",
  365 + isWarning: 0,
  366 + isTrend: 0,
  367 + kpiLevel: 0,
  368 + },
  369 + {
  370 + kpiId: "KPI449F5365",
  371 + kpiName: "文件系统使用率",
  372 + flag: "inode-",
  373 + kpiValue: "3%",
  374 + kpiUnit: "percent",
  375 + kpiIdent: "1",
  376 + isWarning: 0,
  377 + isTrend: 0,
  378 + kpiLevel: 0,
  379 + },
  380 + {
  381 + kpiId: "KPIA91F44E7",
  382 + kpiName: "文件系统总大小",
  383 + flag: "inode-",
  384 + kpiValue: "6553600 ",
  385 + kpiUnit: "none",
  386 + kpiIdent: "1",
  387 + isWarning: 0,
  388 + isTrend: 0,
  389 + kpiLevel: 0,
  390 + }, {
  391 + kpiId: "KPI98306224",
  392 + kpiName: "文件系统已使用大小",
  393 + flag: "inode-",
  394 + kpiValue: "81699 ",
  395 + kpiUnit: "none",
  396 + kpiIdent: "1",
  397 + isWarning: 0,
  398 + isTrend: 0,
  399 + kpiLevel: 0,
  400 + }, {
  401 + kpiId: "KPI77C28BBA",
  402 + kpiName: "卷名称",
  403 + flag: "inode-",
  404 + kpiValue: "/dev/vda1 ",
  405 + kpiUnit: "none",
  406 + kpiIdent: "0",
  407 + isWarning: 0,
  408 + isTrend: 0,
  409 + kpiLevel: 0,
  410 + }, {
  411 + kpiId: "KPIF74D9D2B",
  412 + kpiName: "最近采集时间",
  413 + flag: "inode-",
  414 + kpiValue: "2022-01-17 08:51:18 ",
  415 + kpiUnit: "",
  416 + kpiIdent: "0",
  417 + isWarning: 0,
  418 + isTrend: 0,
  419 + kpiLevel: 0,
  420 + }
  421 + ],
  422 + ]
  423 + }
332 424
333 ], 425 ],
334 }, 426 },
@@ -28,9 +28,9 @@ @@ -28,9 +28,9 @@
28 :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]" 28 :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
29 > 29 >
30 <span @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)" 30 <span @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"
31 - :class="['listName',{'listName-link':item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1}]"> 31 + :class="['listName',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
32 {{ item[itemChild.key].kpiValue}} </span> 32 {{ item[itemChild.key].kpiValue}} </span>
33 - <div class="basic-img" v-if="item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1"> 33 + <div class="basic-img" v-if="item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)">
34 <el-popover ref="popoverMenu" placement="right" trigger="click" :auto-close="200"> 34 <el-popover ref="popoverMenu" placement="right" trigger="click" :auto-close="200">
35 <template #reference> 35 <template #reference>
36 <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes(index,idx)"> 36 <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes(index,idx)">
@@ -84,9 +84,10 @@ @@ -84,9 +84,10 @@
84 :key="idx" 84 :key="idx"
85 :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]" 85 :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
86 > 86 >
87 - <span @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)" :class="['listName',{'listName-link':item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1}]">  
88 - {{ item[itemChild.key].kpiValue }}</span>  
89 - <div class="basic-img" v-if="item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1"> 87 + <span @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"
  88 + :class="['listName',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
  89 + {{ item[itemChild.key]?item[itemChild.key].kpiValue:'' }}</span>
  90 + <div class="basic-img" v-if="item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)">
90 <el-popover ref="popoverMenu" placement="right" trigger="click" :auto-close="200"> 91 <el-popover ref="popoverMenu" placement="right" trigger="click" :auto-close="200">
91 <template #reference> 92 <template #reference>
92 <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes(index,idx)"> 93 <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes(index,idx)">
@@ -136,7 +137,6 @@ @@ -136,7 +137,6 @@
136 > 137 >
137 </div> 138 </div>
138 </div> 139 </div>
139 -  
140 </div> 140 </div>
141 141
142 <!-- <template #footer> 142 <!-- <template #footer>
@@ -300,7 +300,7 @@ export default { @@ -300,7 +300,7 @@ export default {
300 this.handlerHead(); 300 this.handlerHead();
301 this.handlerData(); 301 this.handlerData();
302 this.visConfig(); 302 this.visConfig();
303 - this.handlerDetailData(); 303 + // this.handlerDetailData();
304 window.addEventListener("scroll", this.handleScroll, true); //监听滚动事件 304 window.addEventListener("scroll", this.handleScroll, true); //监听滚动事件
305 }, 305 },
306 visConfig(){ 306 visConfig(){
@@ -325,7 +325,6 @@ export default { @@ -325,7 +325,6 @@ export default {
325 let ybNum=rollSet.ybNum?rollSet.ybNum:80; 325 let ybNum=rollSet.ybNum?rollSet.ybNum:80;
326 let zyNum=rollSet.zyNum?rollSet.zyNum:85; 326 let zyNum=rollSet.zyNum?rollSet.zyNum:85;
327 let yzNum=rollSet.yzNum?rollSet.yzNum:95; 327 let yzNum=rollSet.yzNum?rollSet.yzNum:95;
328 - console.log("color",ybNum,rollSet.zcColor)  
329 if(val){ 328 if(val){
330 let value=val.split("%") 329 let value=val.split("%")
331 if(value && value.length>1){ 330 if(value && value.length>1){
@@ -364,22 +363,35 @@ export default { @@ -364,22 +363,35 @@ export default {
364 this.selectNum = 1; 363 this.selectNum = 1;
365 364
366 } 365 }
367 - let scroll=window.pageYOffset; 366 + // let scroll=window.pageYOffset;
  367 + let scroll=document.documentElement.scrollTop;
368 let documentHeight=document.documentElement.clientHeight; 368 let documentHeight=document.documentElement.clientHeight;
  369 + if (self != top) {
  370 + //嵌入到监控系统iframe中弹框位置样式
  371 + // let documentHeight=document.body.scrollHeight;
  372 + this.heightStyle="height:"+(documentHeight+230)+'px;top:'+scroll+'px';
  373 + if(scroll<600){
  374 + this.marginStyle+="margin-top:"+(110)+'px;';
  375 +
  376 + }else{
  377 + this.marginStyle+="margin-top:"+(230)+'px;';
  378 +
  379 + }
369 console.log("123",documentHeight,scroll) 380 console.log("123",documentHeight,scroll)
  381 + }else{
  382 + //ajreport中弹框位置样式
370 this.heightStyle="height:"+(documentHeight+scroll)+'px;'; 383 this.heightStyle="height:"+(documentHeight+scroll)+'px;';
371 - this.marginStyle+="margin-top:"+(scroll+30)+'px;';  
372 - 384 + this.marginStyle+="margin-top:"+(scroll+100)+'px;';
  385 + }
373 }, 386 },
374 387
375 handleHeadContent(headTable,flg){ 388 handleHeadContent(headTable,flg){
376 - let data = headTable.data[0]; 389 + let data = headTable;
377 let head = data.header; 390 let head = data.header;
378 let content = data.content; 391 let content = data.content;
379 let colArr = []; 392 let colArr = [];
380 let fisttd = ""; 393 let fisttd = "";
381 let datas=[]; 394 let datas=[];
382 -  
383 head.map((v) => { 395 head.map((v) => {
384 fisttd = v.id; 396 fisttd = v.id;
385 let columnObj = { 397 let columnObj = {
@@ -394,13 +406,17 @@ export default { @@ -394,13 +406,17 @@ export default {
394 if (ccv.kpiValue || ccv.kpiValue === 0) { 406 if (ccv.kpiValue || ccv.kpiValue === 0) {
395 kpi[ccv.kpiId] = ccv; 407 kpi[ccv.kpiId] = ccv;
396 } else { 408 } else {
397 - kpi[ccv.kpiId] = {}; 409 + kpi[ccv.kpiId] = {
  410 + kpiValue: "",
  411 + kpiUnit: "",
  412 + kpiIdent: "0",
  413 + isWarning: 0,
  414 + };
398 } 415 }
399 416
400 }) 417 })
401 datas.push(kpi); 418 datas.push(kpi);
402 }) 419 })
403 - console.log("col",colArr)  
404 if(flg=='all'){ 420 if(flg=='all'){
405 this.headerAll=colArr; 421 this.headerAll=colArr;
406 this.listAll=datas; 422 this.listAll=datas;
@@ -408,25 +424,45 @@ export default { @@ -408,25 +424,45 @@ export default {
408 this.list=datas; 424 this.list=datas;
409 this.header=colArr; 425 this.header=colArr;
410 } 426 }
411 - console.log("datas",datas)  
412 -  
413 }, 427 },
414 - handlerDetailData(){  
415 - let headTable = getDetailTableData(); 428 + handlerDetailData(valData){
  429 + let kpiArr=[]
  430 + let kpiIdStr='';
  431 + if(this.header && this.header.length>0){
  432 + this.header.map(item=>{
  433 + if(item.isStatic){
  434 +
  435 + }else{
  436 + kpiArr.push(item.key)
  437 + }
  438 + })
  439 + }
  440 + if(kpiArr && kpiArr.length>0){
  441 + kpiIdStr=kpiArr.join(',');
  442 + }
  443 + let param={
  444 + kpiId:kpiIdStr
  445 + }
  446 + let headTable = valData;
  447 + if(kpiIdStr){
  448 + //根据kpiId集合获取表格数据
  449 + let tableData=getDetailTableData(param);
  450 + headTable=tableData.data[0];
  451 + }
  452 +
416 this.handleHeadContent(headTable) 453 this.handleHeadContent(headTable)
417 454
418 }, 455 },
419 //打开更多表格 456 //打开更多表格
420 handlerDetailDataNoPage(){ 457 handlerDetailDataNoPage(){
421 let headTable =getDetailTableDataNoPage(); 458 let headTable =getDetailTableDataNoPage();
422 - this.handleHeadContent(headTable,'all'); 459 + this.handleHeadContent(headTable.data[0],'all');
423 this.widthStyle=''; 460 this.widthStyle='';
424 // this.setDialog('table'); 461 // this.setDialog('table');
425 this.tableVisible=true; 462 this.tableVisible=true;
426 }, 463 },
427 //打开弹框 464 //打开弹框
428 setDialog(name,flg){ 465 setDialog(name,flg){
429 - console.log("123",name,flg)  
430 /* if(flg=='dialog'){ 466 /* if(flg=='dialog'){
431 this.tableVisible=true; 467 this.tableVisible=true;
432 468
@@ -440,7 +476,6 @@ export default { @@ -440,7 +476,6 @@ export default {
440 }, 476 },
441 //点击表格内容名称事件 477 //点击表格内容名称事件
442 clickListName(obj){ 478 clickListName(obj){
443 - console.log("obj",obj)  
444 let trendsParams=obj; 479 let trendsParams=obj;
445 // this.trendSrc='http://127.0.0.1:8088/vue3/index.html#/vue3/pieDetailLine?resId=08586dba3a5b4a01ad88e8878eed6d53&kpiId=KPI7054BC34&flag=cpu&ident=1&trend=1&name=CPU%E4%BD%BF%E7%94%A8%E7%8E%87x&access_token=6e14ca48-4d05-42cf-b232-97981035824f' 480 // this.trendSrc='http://127.0.0.1:8088/vue3/index.html#/vue3/pieDetailLine?resId=08586dba3a5b4a01ad88e8878eed6d53&kpiId=KPI7054BC34&flag=cpu&ident=1&trend=1&name=CPU%E4%BD%BF%E7%94%A8%E7%8E%87x&access_token=6e14ca48-4d05-42cf-b232-97981035824f'
446 this.trendSrc='https://192.168.0.69:8088/#/user/login/redirect=%2F'; 481 this.trendSrc='https://192.168.0.69:8088/#/user/login/redirect=%2F';
@@ -451,6 +486,7 @@ export default { @@ -451,6 +486,7 @@ export default {
451 handlerHead() { 486 handlerHead() {
452 const head = this.optionsSetUp.dynamicAddTable; 487 const head = this.optionsSetUp.dynamicAddTable;
453 this.header = head; 488 this.header = head;
  489 + // this.headerAll=head;
454 }, 490 },
455 handlerData() { 491 handlerData() {
456 const tableData = this.optionsData; 492 const tableData = this.optionsData;
@@ -458,8 +494,12 @@ export default { @@ -458,8 +494,12 @@ export default {
458 ? this.handlerStaticData(tableData.staticData) 494 ? this.handlerStaticData(tableData.staticData)
459 : this.handlerDynamicData(tableData.dynamicData, tableData.refreshTime); 495 : this.handlerDynamicData(tableData.dynamicData, tableData.refreshTime);
460 }, 496 },
461 - handlerStaticData(data) {  
462 - this.list = data; 497 + handlerStaticData(headTable) {
  498 +
  499 + this.handlerDetailData(headTable[0]);
  500 +
  501 + // this.handleHeadContent(headTable[0])
  502 + // this.list = data;
463 }, 503 },
464 handlerDynamicData(data, refreshTime) { 504 handlerDynamicData(data, refreshTime) {
465 if (!data) return; 505 if (!data) return;