Merge branch 'master-ajreport-lushangqing' into 'master'
折线图折线点添加点击事件,表格表头与动态数据进行配置(用vuex实现) See merge request !21
Showing
10 changed files
with
292 additions
and
87 deletions
@@ -104,6 +104,7 @@ export function getHealth(data) { | @@ -104,6 +104,7 @@ export function getHealth(data) { | ||
104 | method: 'get', | 104 | method: 'get', |
105 | }) | 105 | }) |
106 | } | 106 | } |
107 | +//获取表格数据 | ||
107 | export function getDetailTableData(params,urlObj){ | 108 | export function getDetailTableData(params,urlObj){ |
108 | let str=''; | 109 | let str=''; |
109 | if(params.sortBy){ | 110 | if(params.sortBy){ |
@@ -118,6 +119,7 @@ export function getDetailTableData(params,urlObj){ | @@ -118,6 +119,7 @@ export function getDetailTableData(params,urlObj){ | ||
118 | method: 'get', | 119 | method: 'get', |
119 | }) | 120 | }) |
120 | } | 121 | } |
122 | +//获取性能指标 | ||
121 | export function getKpiPage(params,urlObj){ | 123 | export function getKpiPage(params,urlObj){ |
122 | let paramsStr=+'&resType='+params.resType | 124 | let paramsStr=+'&resType='+params.resType |
123 | +'&kpiIdent='+params.kpiIdent+'&kpiCategory='+params.kpiCategory+'&kpiDataType='+params.kpiDataType+'&kpiUnit='+params.kpiUnit | 125 | +'&kpiIdent='+params.kpiIdent+'&kpiCategory='+params.kpiCategory+'&kpiDataType='+params.kpiDataType+'&kpiUnit='+params.kpiUnit |
1 | import cacheView from "./modules/cachaView" | 1 | import cacheView from "./modules/cachaView" |
2 | +import tableHead from "./modules/tableHead" | ||
2 | 3 | ||
3 | const getters = { | 4 | const getters = { |
4 | sidebar: state => state.app.sidebar, | 5 | sidebar: state => state.app.sidebar, |
5 | device: state => state.app.device, | 6 | device: state => state.app.device, |
6 | token: state => state.user.token, | 7 | token: state => state.user.token, |
7 | accessUser: state => state.user.accessUser, | 8 | accessUser: state => state.user.accessUser, |
8 | - cacheViews: state => state.cacheView.cacheViews | 9 | + cacheViews: state => state.cacheView.cacheViews, |
10 | + //lsq 2022-02-25 | ||
11 | + tableHeads:state => state.tableHead.tableHeadData | ||
9 | } | 12 | } |
10 | export default getters | 13 | export default getters |
@@ -7,6 +7,8 @@ import app from './modules/app' | @@ -7,6 +7,8 @@ import app from './modules/app' | ||
7 | import user from './modules/user' | 7 | import user from './modules/user' |
8 | import cacheView from './modules/cachaView' | 8 | import cacheView from './modules/cachaView' |
9 | import help from './modules/help' | 9 | import help from './modules/help' |
10 | +//lsq 2022-02-25 | ||
11 | +import tableHead from './modules/tableHead' | ||
10 | 12 | ||
11 | Vue.use(Vuex) | 13 | Vue.use(Vuex) |
12 | 14 | ||
@@ -18,7 +20,8 @@ const store = new Vuex.Store({ | @@ -18,7 +20,8 @@ const store = new Vuex.Store({ | ||
18 | app, | 20 | app, |
19 | user, | 21 | user, |
20 | cacheView, | 22 | cacheView, |
21 | - help | 23 | + help, |
24 | + tableHead | ||
22 | }, | 25 | }, |
23 | state: { }, | 26 | state: { }, |
24 | plugins: [initPlugin], | 27 | plugins: [initPlugin], |
report-ui/src/store/modules/tableHead.js
0 → 100644
1 | <template> | 1 | <template> |
2 | <div> | 2 | <div> |
3 | - <el-button | 3 | +<!-- <el-button |
4 | type="primary" | 4 | type="primary" |
5 | size="small" | 5 | size="small" |
6 | plain | 6 | plain |
7 | @click="handleAddClick" | 7 | @click="handleAddClick" |
8 | >配置表头</el-button | 8 | >配置表头</el-button |
9 | - > | ||
10 | - <el-table :data="formData" style="width: 100%"> | 9 | + >--> |
10 | + <span>表头设置</span> | ||
11 | + <el-table :data="formDataNew" style="width: 100%"> | ||
11 | <el-table-column prop="name" label="名称" width="60" /> | 12 | <el-table-column prop="name" label="名称" width="60" /> |
12 | <el-table-column prop="key" label="key值" width="70" /> | 13 | <el-table-column prop="key" label="key值" width="70" /> |
13 | <el-table-column prop="width" label="宽度" width="50" /> | 14 | <el-table-column prop="width" label="宽度" width="50" /> |
@@ -104,6 +105,21 @@ | @@ -104,6 +105,21 @@ | ||
104 | </span> | 105 | </span> |
105 | </el-dialog> | 106 | </el-dialog> |
106 | <el-dialog | 107 | <el-dialog |
108 | + title="表头数据" | ||
109 | + :visible.sync="dialogVisible" | ||
110 | + width="60%" | ||
111 | + :before-close="handleClose" | ||
112 | + > | ||
113 | + | ||
114 | + <span slot="footer" class="dialog-footer"> | ||
115 | + <el-button size="mini" @click="dialogVisible = false">取 消</el-button> | ||
116 | + | ||
117 | + <el-button size="mini" type="primary" @click="handleSaveClick" | ||
118 | + >确 定</el-button | ||
119 | + > | ||
120 | + </span> | ||
121 | + </el-dialog> | ||
122 | +<!-- <el-dialog | ||
107 | title="性能指标" | 123 | title="性能指标" |
108 | :visible.sync="dialogVisible" | 124 | :visible.sync="dialogVisible" |
109 | width="60%" | 125 | width="60%" |
@@ -135,7 +151,7 @@ | @@ -135,7 +151,7 @@ | ||
135 | <template #default="scope">{{ scope.row.policyNum>0?'':'暂无' }}</template> | 151 | <template #default="scope">{{ scope.row.policyNum>0?'':'暂无' }}</template> |
136 | </el-table-column> | 152 | </el-table-column> |
137 | </el-table> | 153 | </el-table> |
138 | - <!-- 分页 --> | 154 | + <!– 分页 –> |
139 | <div style='text-align: left;background-color: white'> | 155 | <div style='text-align: left;background-color: white'> |
140 | <el-pagination | 156 | <el-pagination |
141 | v-if="currentPage" | 157 | v-if="currentPage" |
@@ -158,12 +174,13 @@ | @@ -158,12 +174,13 @@ | ||
158 | > | 174 | > |
159 | </el-tooltip> | 175 | </el-tooltip> |
160 | </span> | 176 | </span> |
161 | - </el-dialog> | 177 | + </el-dialog>--> |
162 | </div> | 178 | </div> |
163 | </template> | 179 | </template> |
164 | <script> | 180 | <script> |
165 | -import {getKpiPage} from "@/api/platform"; | 181 | +import {getKpiPage,getDetailTableData} from "@/api/platform"; |
166 | import {formatDate} from "../../../../../filter"; | 182 | import {formatDate} from "../../../../../filter"; |
183 | +import {mapGetters} from "vuex"; | ||
167 | export default { | 184 | export default { |
168 | model: { | 185 | model: { |
169 | prop: "formData", | 186 | prop: "formData", |
@@ -173,9 +190,9 @@ export default { | @@ -173,9 +190,9 @@ export default { | ||
173 | formData: Array | 190 | formData: Array |
174 | }, | 191 | }, |
175 | watch:{ | 192 | watch:{ |
176 | - headTable:{ | 193 | + tableHeads:{ |
177 | handler(val){ | 194 | handler(val){ |
178 | - console.log("*(*(",val) | 195 | + this.setFormData(); |
179 | }, | 196 | }, |
180 | deep:true | 197 | deep:true |
181 | } | 198 | } |
@@ -219,9 +236,11 @@ export default { | @@ -219,9 +236,11 @@ export default { | ||
219 | value:'textToBg' | 236 | value:'textToBg' |
220 | } | 237 | } |
221 | ],//关联组件 | 238 | ],//关联组件 |
239 | + formDataNew:this.formData,//表头数据 | ||
222 | }; | 240 | }; |
223 | }, | 241 | }, |
224 | computed:{ | 242 | computed:{ |
243 | + ...mapGetters(['tableHeads']), | ||
225 | //获取url地址中的token | 244 | //获取url地址中的token |
226 | getUrlToken(){ | 245 | getUrlToken(){ |
227 | let locationUrl=this.$route.query; | 246 | let locationUrl=this.$route.query; |
@@ -234,7 +253,15 @@ export default { | @@ -234,7 +253,15 @@ export default { | ||
234 | return urlObj; | 253 | return urlObj; |
235 | } | 254 | } |
236 | }, | 255 | }, |
256 | + created() { | ||
257 | + this.setFormData(); | ||
258 | + }, | ||
237 | methods: { | 259 | methods: { |
260 | + setFormData(){ | ||
261 | + if(this.tableHeads){ | ||
262 | + this.formDataNew=this.tableHeads; | ||
263 | + } | ||
264 | + }, | ||
238 | //搜索指标 | 265 | //搜索指标 |
239 | searchKpi(){ | 266 | searchKpi(){ |
240 | this.getKpi(); | 267 | this.getKpi(); |
@@ -252,20 +279,6 @@ export default { | @@ -252,20 +279,6 @@ export default { | ||
252 | this.tableData=data; | 279 | this.tableData=data; |
253 | } | 280 | } |
254 | }, | 281 | }, |
255 | - //回显数据 | ||
256 | - setCheckedData(){ | ||
257 | - /*if(this.multipleSelection && this.multipleSelection.length>0){ | ||
258 | - this.tableData.map(item=>{ | ||
259 | - this.multipleSelection.map(v=>{ | ||
260 | - if(item.kpiId==v.kpiId){ | ||
261 | - setTimeout(()=>{ | ||
262 | - this.$refs.multipleTableRef.toggleRowSelection(item) | ||
263 | - },300) | ||
264 | - } | ||
265 | - }) | ||
266 | - }) | ||
267 | - }*/ | ||
268 | - }, | ||
269 | //多选操作 | 282 | //多选操作 |
270 | handleSelectionChange(val) { | 283 | handleSelectionChange(val) { |
271 | this.multipleSelection = val | 284 | this.multipleSelection = val |
@@ -325,7 +338,6 @@ export default { | @@ -325,7 +338,6 @@ export default { | ||
325 | handleSaveClick() { | 338 | handleSaveClick() { |
326 | if (this.flag) { | 339 | if (this.flag) { |
327 | // 新增 | 340 | // 新增 |
328 | - // this.formData.push(this.rowFormData); | ||
329 | let arr=[]; | 341 | let arr=[]; |
330 | if(this.primaryTypeFlg){ | 342 | if(this.primaryTypeFlg){ |
331 | //追加 | 343 | //追加 |
@@ -333,7 +345,7 @@ export default { | @@ -333,7 +345,7 @@ export default { | ||
333 | this.multipleSelection.map((item,index)=>{ | 345 | this.multipleSelection.map((item,index)=>{ |
334 | arr1.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1}) | 346 | arr1.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1}) |
335 | }) | 347 | }) |
336 | - arr=this.formData.concat(arr1); | 348 | + arr=this.formDataNew.concat(arr1); |
337 | }else{ | 349 | }else{ |
338 | //重新选择 | 350 | //重新选择 |
339 | this.multipleSelection.map((item,index)=>{ | 351 | this.multipleSelection.map((item,index)=>{ |
@@ -341,19 +353,19 @@ export default { | @@ -341,19 +353,19 @@ export default { | ||
341 | }) | 353 | }) |
342 | } | 354 | } |
343 | 355 | ||
344 | - this.formData=arr; | ||
345 | - this.formData.sort(this.compare('columnSort')); | 356 | + this.formDataNew=arr; |
357 | + this.formDataNew.sort(this.compare('columnSort')); | ||
346 | this.dialogVisible = false; | 358 | this.dialogVisible = false; |
347 | } else { | 359 | } else { |
348 | // 编辑 | 360 | // 编辑 |
349 | - this.formData[this.indexEditor] = this.rowFormData; | ||
350 | - this.$set(this.formData, this.indexEditor, this.rowFormData); | ||
351 | - this.formData.sort(this.compare('columnSort')); | 361 | + this.formDataNew[this.indexEditor] = this.rowFormData; |
362 | + this.$set(this.formDataNew, this.indexEditor, this.rowFormData); | ||
363 | + this.formDataNew.sort(this.compare('columnSort')); | ||
352 | this.editDialogVisible = false; | 364 | this.editDialogVisible = false; |
353 | } | 365 | } |
354 | - console.log("AVX", this.formData) | ||
355 | - this.$emit("input", this.formData); | ||
356 | - this.$emit("change", this.formData); | 366 | + console.log("AVX", this.formDataNew) |
367 | + this.$emit("input", this.formDataNew); | ||
368 | + this.$emit("change", this.formDataNew); | ||
357 | }, | 369 | }, |
358 | //数组排序 | 370 | //数组排序 |
359 | compare(property){ | 371 | compare(property){ |
@@ -365,10 +377,10 @@ export default { | @@ -365,10 +377,10 @@ export default { | ||
365 | }, | 377 | }, |
366 | // 删除 | 378 | // 删除 |
367 | handleDeleteClick(index,row) { | 379 | handleDeleteClick(index,row) { |
368 | - this.formData.splice(index, 1); | 380 | + this.formDataNew.splice(index, 1); |
369 | this.setTableChecked(row.key); | 381 | this.setTableChecked(row.key); |
370 | - this.$emit("input", this.formData); | ||
371 | - this.$emit("change", this.formData); | 382 | + this.$emit("input", this.formDataNew); |
383 | + this.$emit("change", this.formDataNew); | ||
372 | }, | 384 | }, |
373 | //设置表格选中状态 | 385 | //设置表格选中状态 |
374 | setTableChecked(kpiId){ | 386 | setTableChecked(kpiId){ |
@@ -118,7 +118,6 @@ export default { | @@ -118,7 +118,6 @@ export default { | ||
118 | chartProperties: this.chartProperties, | 118 | chartProperties: this.chartProperties, |
119 | contextData | 119 | contextData |
120 | }; | 120 | }; |
121 | - console.log("^&^&",params) | ||
122 | this.$emit("input", params); | 121 | this.$emit("input", params); |
123 | this.$emit("change", params); | 122 | this.$emit("change", params); |
124 | }, | 123 | }, |
@@ -49,6 +49,14 @@ export const monitorCustomLineChart = { | @@ -49,6 +49,14 @@ export const monitorCustomLineChart = { | ||
49 | ], | 49 | ], |
50 | value: 'KPID339D51B', | 50 | value: 'KPID339D51B', |
51 | }, | 51 | }, |
52 | + { | ||
53 | + type: 'el-input-text', | ||
54 | + label: 'flag', | ||
55 | + name: 'flag', | ||
56 | + required: false, | ||
57 | + placeholder: '', | ||
58 | + value: '', | ||
59 | + }, | ||
52 | [ | 60 | [ |
53 | { | 61 | { |
54 | name: '折线设置', | 62 | name: '折线设置', |
@@ -67,7 +75,7 @@ export const monitorCustomLineChart = { | @@ -67,7 +75,7 @@ export const monitorCustomLineChart = { | ||
67 | name: 'pointSize', | 75 | name: 'pointSize', |
68 | required: false, | 76 | required: false, |
69 | placeholder: '', | 77 | placeholder: '', |
70 | - value: 10, | 78 | + value: 6, |
71 | }, | 79 | }, |
72 | { | 80 | { |
73 | type: 'vue-color', | 81 | type: 'vue-color', |
@@ -107,7 +115,7 @@ export const monitorCustomLineChart = { | @@ -107,7 +115,7 @@ export const monitorCustomLineChart = { | ||
107 | name: 'lineWidth', | 115 | name: 'lineWidth', |
108 | required: false, | 116 | required: false, |
109 | placeholder: '', | 117 | placeholder: '', |
110 | - value: 4, | 118 | + value: 1, |
111 | }, | 119 | }, |
112 | ], | 120 | ], |
113 | }, | 121 | }, |
1 | <template> | 1 | <template> |
2 | <div :style="styleObj"> | 2 | <div :style="styleObj"> |
3 | - <v-chart :options="options" autoresize/> | 3 | + <v-chart ref="myEchart" :options="options" autoresize/> |
4 | + <!-- 直接点击数据展示 性能趋势弹框--> | ||
5 | + <customDialog :dialogVisible="trendVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" | ||
6 | + :widthStyle="widthStyle" :title-name="optionsSetup.titleText" | ||
7 | + :showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc" | ||
8 | + > | ||
9 | + <template v-slot> | ||
10 | + <div class="txtScroll-top"> | ||
11 | + {{trendSrc}} <br/> | ||
12 | + {{tableDataValue.name}}--{{tableDataValue.data}} | ||
13 | + <iframe :src="trendSrc" class="layadmin-iframe" style="height: 99.5%!important;width: 100%;"/> | ||
14 | + </div> | ||
15 | + </template> | ||
16 | + </customDialog> | ||
4 | </div> | 17 | </div> |
5 | </template> | 18 | </template> |
6 | 19 | ||
7 | <script> | 20 | <script> |
21 | +import customDialog from "../../designerComponents/customDialog"; | ||
22 | +import {getTrendBaseUrl} from "@/api/platform"; | ||
23 | + | ||
8 | export default { | 24 | export default { |
9 | name: "customLineChart", | 25 | name: "customLineChart", |
10 | - components: {}, | 26 | + components: {customDialog}, |
11 | props: { | 27 | props: { |
12 | value: Object, | 28 | value: Object, |
13 | ispreview: Boolean | 29 | ispreview: Boolean |
14 | }, | 30 | }, |
15 | data() { | 31 | data() { |
16 | return { | 32 | return { |
33 | + dynamicData:'',//动态数据值 | ||
34 | + refreshTime:'',//刷新时间 | ||
35 | + flagInter:null,//定时 | ||
36 | + trendVisible:false,//性能趋势弹框 | ||
37 | + dataValue:'', | ||
38 | + trendSrc:'',//性能趋势图地址 | ||
39 | + marginStyle:'',//弹框距离顶部距离 | ||
40 | + heightStyle:'',//弹框遮罩层高度 | ||
41 | + widthStyle:';',//弹框宽度样式 | ||
42 | + tableDataValue: {kpiId:'',name:'',data:''}, | ||
43 | + tableDataValueHead: {}, | ||
44 | + resType:'', | ||
17 | options: { | 45 | options: { |
18 | grid: {}, | 46 | grid: {}, |
19 | color: [], | 47 | color: [], |
@@ -74,7 +102,29 @@ export default { | @@ -74,7 +102,29 @@ export default { | ||
74 | top: this.optionsStyle.top + "px", | 102 | top: this.optionsStyle.top + "px", |
75 | background: this.optionsSetup.background | 103 | background: this.optionsSetup.background |
76 | }; | 104 | }; |
77 | - } | 105 | + }, |
106 | + //获取url地址中的token | ||
107 | + getUrlToken(){ | ||
108 | + let locationUrl=this.$route.query; | ||
109 | + let resId=locationUrl.resId; | ||
110 | + let token=locationUrl.access_token; | ||
111 | + let urlObj={ | ||
112 | + resId:resId, | ||
113 | + token:token | ||
114 | + } | ||
115 | + return urlObj; | ||
116 | + }, | ||
117 | + //设置 | ||
118 | + kpiIdStyle(){ | ||
119 | + this.$set(this.tableDataValue,'kpiId',this.optionsSetup.kpiId) | ||
120 | + this.tableDataValue.kpiId=this.optionsSetup.kpiId; | ||
121 | + let obj={ | ||
122 | + kpiId:this.optionsSetup.kpiId, | ||
123 | + targetId:this.optionsSetup.targetId, | ||
124 | + flag:this.optionsSetup.flag | ||
125 | + } | ||
126 | + return obj; | ||
127 | + }, | ||
78 | }, | 128 | }, |
79 | watch: { | 129 | watch: { |
80 | value: { | 130 | value: { |
@@ -107,6 +157,7 @@ export default { | @@ -107,6 +157,7 @@ export default { | ||
107 | this.setOptionsMargin(); | 157 | this.setOptionsMargin(); |
108 | this.setOptionsLegend(); | 158 | this.setOptionsLegend(); |
109 | this.setOptionsColor(); | 159 | this.setOptionsColor(); |
160 | + window.addEventListener("scroll", this.handleScroll, true); //监听滚动事件 | ||
110 | }, | 161 | }, |
111 | // 标题修改 | 162 | // 标题修改 |
112 | setOptionsTitle() { | 163 | setOptionsTitle() { |
@@ -369,6 +420,8 @@ export default { | @@ -369,6 +420,8 @@ export default { | ||
369 | if (!val) return; | 420 | if (!val) return; |
370 | if (this.ispreview) { | 421 | if (this.ispreview) { |
371 | this.getEchartData(val); | 422 | this.getEchartData(val); |
423 | + this.dynamicData=val; | ||
424 | + this.refreshTime=refreshTime; | ||
372 | this.flagInter = setInterval(() => { | 425 | this.flagInter = setInterval(() => { |
373 | this.getEchartData(val); | 426 | this.getEchartData(val); |
374 | }, refreshTime); | 427 | }, refreshTime); |
@@ -392,7 +445,88 @@ export default { | @@ -392,7 +445,88 @@ export default { | ||
392 | series[i].data = val.series[i].datas; | 445 | series[i].data = val.series[i].datas; |
393 | } | 446 | } |
394 | } | 447 | } |
395 | - } | 448 | + this.echartsClick(); |
449 | + }, | ||
450 | + echartsClick(){ | ||
451 | + let that=this; | ||
452 | + this.$refs.myEchart.chart.on('click',function (params){ | ||
453 | + console.log("()()()()()",params.name,params.data,params) | ||
454 | + that.$set(that.tableDataValue,'name',params.name) | ||
455 | + that.$set(that.tableDataValue,'data',params.data) | ||
456 | + that.goTrend(); | ||
457 | + }) | ||
458 | + }, | ||
459 | + //设置性能趋势图 | ||
460 | + setTrend(data){ | ||
461 | + let flg='&flg='; | ||
462 | + if(data.flag){ | ||
463 | + flg+=data.flag; | ||
464 | + }else { | ||
465 | + flg+=data.subResId; | ||
466 | + } | ||
467 | + let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.kpiIdStyle.kpiId+flg+'&warning='+data.isWarning | ||
468 | + +'&ident='+data.ident | ||
469 | + +'&trend='+data.trend | ||
470 | + +'&name='+data.name; | ||
471 | + let baseUrl=getTrendBaseUrl(); | ||
472 | + this.resType=data.resType; | ||
473 | + this.trendSrc=baseUrl+'/vue3/index.html#/vue3/pieDetailLine?'+urlParams+'&access_token='+this.getUrlToken.token; | ||
474 | + }, | ||
475 | + goTrend(){ | ||
476 | + this.setTrend(this.tableDataValue); | ||
477 | + this.trendVisible=true; | ||
478 | + if(this.flagInter){ | ||
479 | + clearInterval(this.flagInter); | ||
480 | + } | ||
481 | + }, | ||
482 | + //弹框关闭确定 | ||
483 | + hideDialog(){ | ||
484 | + this.trendVisible=false; | ||
485 | + this.flagInter = setInterval(() => { | ||
486 | + this.getEchartData(this.dynamicData); | ||
487 | + }, this.refreshTime); | ||
488 | + }, | ||
489 | + okFunc(){ | ||
490 | + this.trendVisible=false; | ||
491 | + this.flagInter = setInterval(() => { | ||
492 | + this.getEchartData(this.dynamicData); | ||
493 | + }, this.refreshTime); | ||
494 | + }, | ||
495 | + handleScroll(e){ | ||
496 | + let serviceTop = 44; | ||
497 | + | ||
498 | + let hotelTop = 344; | ||
499 | + | ||
500 | + if (e.target.scrollTop > 44 && e.target.scrollTop < 344) { | ||
501 | + | ||
502 | + this.selectNum = 0; | ||
503 | + } | ||
504 | + | ||
505 | + if (e.target.scrollTop > 344) { | ||
506 | + | ||
507 | + this.selectNum = 1; | ||
508 | + | ||
509 | + } | ||
510 | + // let scroll=window.pageYOffset; | ||
511 | + let scroll=document.documentElement.scrollTop; | ||
512 | + let documentHeight=document.documentElement.clientHeight; | ||
513 | + if (self != top) { | ||
514 | + //嵌入到监控系统iframe中弹框位置样式 | ||
515 | + // let documentHeight=document.body.scrollHeight; | ||
516 | + this.heightStyle="height:"+(documentHeight+230)+'px;top:'+scroll+'px'; | ||
517 | + if(scroll<600){ | ||
518 | + this.marginStyle+="margin-top:"+(110)+'px;'; | ||
519 | + | ||
520 | + }else{ | ||
521 | + this.marginStyle+="margin-top:"+(230)+'px;'; | ||
522 | + | ||
523 | + } | ||
524 | + }else{ | ||
525 | + //ajreport中弹框位置样式 | ||
526 | + this.heightStyle="height:"+(documentHeight+scroll)+'px;'; | ||
527 | + this.marginStyle+="margin-top:"+(scroll+100)+'px;'; | ||
528 | + } | ||
529 | + }, | ||
396 | } | 530 | } |
397 | }; | 531 | }; |
398 | </script> | 532 | </script> |
@@ -198,6 +198,8 @@ import textToImage from "../../designerComponents/textToImage";//文字转图片 | @@ -198,6 +198,8 @@ import textToImage from "../../designerComponents/textToImage";//文字转图片 | ||
198 | import textToBg from "../../designerComponents/textToBg"; | 198 | import textToBg from "../../designerComponents/textToBg"; |
199 | import {saveClearAalarm} from "../../../../../../api/platform"; | 199 | import {saveClearAalarm} from "../../../../../../api/platform"; |
200 | import {Message} from "element-ui"; | 200 | import {Message} from "element-ui"; |
201 | +import {mapGetters} from "vuex"; | ||
202 | +import tableHead from "../../../../../../store/modules/tableHead"; | ||
201 | //文字转背景 | 203 | //文字转背景 |
202 | 204 | ||
203 | vue.use(VueSuperSlide); | 205 | vue.use(VueSuperSlide); |
@@ -542,7 +544,7 @@ export default { | @@ -542,7 +544,7 @@ export default { | ||
542 | } | 544 | } |
543 | this.tableFiledColumnSort(); | 545 | this.tableFiledColumnSort(); |
544 | }, | 546 | }, |
545 | - async handlerDetailData(valData,sortBy){ | 547 | + async handlerDetailData(valData,sortBy,order){ |
546 | let kpiArr=[] | 548 | let kpiArr=[] |
547 | let kpiIdStr=''; | 549 | let kpiIdStr=''; |
548 | if(this.header && this.header.length>0){ | 550 | if(this.header && this.header.length>0){ |
@@ -564,10 +566,13 @@ export default { | @@ -564,10 +566,13 @@ export default { | ||
564 | page:this.currentPage, | 566 | page:this.currentPage, |
565 | size:this.pageSize | 567 | size:this.pageSize |
566 | } | 568 | } |
567 | - let sort=this.sortBy; | 569 | + let sort=sortBy; |
568 | if(sort){ | 570 | if(sort){ |
569 | param.sortBy=sort; | 571 | param.sortBy=sort; |
570 | } | 572 | } |
573 | + if(order){ | ||
574 | + param.order=order; | ||
575 | + } | ||
571 | let headTable = valData; | 576 | let headTable = valData; |
572 | if(kpiIdStr){ | 577 | if(kpiIdStr){ |
573 | //根据kpiId集合获取表格数据 | 578 | //根据kpiId集合获取表格数据 |
@@ -585,7 +590,7 @@ export default { | @@ -585,7 +590,7 @@ export default { | ||
585 | } | 590 | } |
586 | }, | 591 | }, |
587 | //打开更多表格 | 592 | //打开更多表格 |
588 | - async handlerDetailDataNoPage(){ | 593 | + async handlerDetailDataNoPage(sortBy){ |
589 | let kpiArr=[]; | 594 | let kpiArr=[]; |
590 | let kpiIdStr=''; | 595 | let kpiIdStr=''; |
591 | if(this.header && this.header.length>0){ | 596 | if(this.header && this.header.length>0){ |
@@ -607,7 +612,7 @@ export default { | @@ -607,7 +612,7 @@ export default { | ||
607 | kpiId:kpiIdStr, | 612 | kpiId:kpiIdStr, |
608 | flagPrifix:this.getUrlToken.flag, | 613 | flagPrifix:this.getUrlToken.flag, |
609 | } | 614 | } |
610 | - let sort=this.sortBy; | 615 | + let sort=sortBy; |
611 | if(sort){ | 616 | if(sort){ |
612 | param.sortBy=sort; | 617 | param.sortBy=sort; |
613 | } | 618 | } |
@@ -687,11 +692,12 @@ export default { | @@ -687,11 +692,12 @@ export default { | ||
687 | getEchartData(val) { | 692 | getEchartData(val) { |
688 | const data = this.queryEchartsData(val); | 693 | const data = this.queryEchartsData(val); |
689 | data.then(res => { | 694 | data.then(res => { |
695 | + let resTable=''; | ||
690 | if(res && res.length>0){ | 696 | if(res && res.length>0){ |
691 | // this.handlerDetailData(res[0].data[0]); | 697 | // this.handlerDetailData(res[0].data[0]); |
692 | if(!this.getUrlToken.isAlarm){ | 698 | if(!this.getUrlToken.isAlarm){ |
693 | //普通详情表格 | 699 | //普通详情表格 |
694 | - console.log("lllll",res[0].data[0]) | 700 | + resTable=res[0].data[0]; |
695 | this.handleHeadContent(res[0].data[0]); | 701 | this.handleHeadContent(res[0].data[0]); |
696 | 702 | ||
697 | }else{ | 703 | }else{ |
@@ -733,50 +739,50 @@ export default { | @@ -733,50 +739,50 @@ export default { | ||
733 | header:head, | 739 | header:head, |
734 | content:content | 740 | content:content |
735 | } | 741 | } |
742 | + resTable=obj; | ||
736 | this.handleHeadContent(obj); | 743 | this.handleHeadContent(obj); |
737 | - let isNewData=false; | ||
738 | - let addTableData=[]; | ||
739 | - let addTableDataOld=this.optionsSetUp.dynamicAddTable; | ||
740 | - addTableDataOld.map(v=>{ | ||
741 | - head.map((item,index)=>{ | ||
742 | - if(v.key==item.key){ | ||
743 | - isNewData=false; | ||
744 | - addTableData.push({ | ||
745 | - columnSort:v.columnSort?v.columnSort:index, | ||
746 | - componentName:v.componentName?v.componentName:1, | ||
747 | - isStatic:false, | ||
748 | - key:item.id, | ||
749 | - name:item.name, | ||
750 | - width:v.width | ||
751 | - }) | ||
752 | - }else{ | ||
753 | - isNewData=true; | ||
754 | 744 | ||
755 | - } | 745 | + } |
756 | 746 | ||
757 | - }) | 747 | + } |
748 | + } | ||
749 | + // this.list = res; | ||
750 | + let isNewData=false; | ||
751 | + let addTableData=[]; | ||
752 | + let head=resTable.header; | ||
753 | + let addTableDataOld=this.optionsSetUp.dynamicAddTable; | ||
754 | + addTableDataOld.map(v=>{ | ||
755 | + head.map((item,index)=>{ | ||
756 | + if(v.key==item.key){ | ||
757 | + isNewData=false; | ||
758 | + addTableData.push({ | ||
759 | + columnSort:v.columnSort?v.columnSort:index, | ||
760 | + componentName:v.componentName?v.componentName:1, | ||
761 | + isStatic:false, | ||
762 | + key:item.id, | ||
763 | + name:item.name, | ||
764 | + width:v.width | ||
758 | }) | 765 | }) |
759 | - if(isNewData){ | ||
760 | - head.map((item,index)=>{ | ||
761 | - addTableData.push({ | ||
762 | - columnSort:index, | ||
763 | - componentName:1, | ||
764 | - isStatic:false, | ||
765 | - key:item.id, | ||
766 | - name:item.name, | ||
767 | - width:"50%" | ||
768 | - }) | ||
769 | - }) | ||
770 | - } | ||
771 | - console.log("addTableData",addTableData) | ||
772 | - // this.optionsSetUp.dynamicAddTable=addTableData; | ||
773 | - console.log("this.optionsSetUp.dynamicAddTable",this.optionsSetUp.dynamicAddTable) | 766 | + }else{ |
767 | + isNewData=true; | ||
774 | 768 | ||
775 | } | 769 | } |
776 | 770 | ||
777 | - } | 771 | + }) |
772 | + }) | ||
773 | + if(isNewData){ | ||
774 | + head.map((item,index)=>{ | ||
775 | + addTableData.push({ | ||
776 | + columnSort:index, | ||
777 | + componentName:1, | ||
778 | + isStatic:false, | ||
779 | + key:item.id, | ||
780 | + name:item.name, | ||
781 | + width:"50%" | ||
782 | + }) | ||
783 | + }) | ||
778 | } | 784 | } |
779 | - // this.list = res; | 785 | + this.$store.commit('CHANGE_HEAD', addTableData); |
780 | this.hackResetFun(); | 786 | this.hackResetFun(); |
781 | }); | 787 | }); |
782 | }, | 788 | }, |
@@ -917,16 +923,37 @@ export default { | @@ -917,16 +923,37 @@ export default { | ||
917 | this.sortCaret=flg; | 923 | this.sortCaret=flg; |
918 | this.sortBy=item.key; | 924 | this.sortBy=item.key; |
919 | } | 925 | } |
926 | + console.log(" this.optionsData", this.optionsData) | ||
927 | + console.log("iiiiiiii",item) | ||
920 | if(this.sortCaret=='ascending'){ | 928 | if(this.sortCaret=='ascending'){ |
921 | //正序 | 929 | //正序 |
930 | + this.order='ASC'; | ||
922 | }else if(this.sortCaret=='ascending'){ | 931 | }else if(this.sortCaret=='ascending'){ |
923 | //倒序 | 932 | //倒序 |
933 | + this.order='DESC'; | ||
924 | }else{ | 934 | }else{ |
925 | //不排序 | 935 | //不排序 |
936 | + this.order=''; | ||
926 | } | 937 | } |
927 | - // this.handlerDetailData('',item.key) | 938 | + this.handlerDetailData('',this.sortBy,this.order) |
939 | + | ||
928 | // this.handlerDetailDataNoPage(); | 940 | // this.handlerDetailDataNoPage(); |
929 | }, | 941 | }, |
942 | + //获取表格数据 | ||
943 | + async reGetDetailTableData(param){ | ||
944 | + let tableData=''; | ||
945 | + let headTable=''; | ||
946 | + const { success,data } = await getDetailTableData(param,this.getUrlToken); | ||
947 | + if (success ){ | ||
948 | + tableData=data; | ||
949 | + } | ||
950 | + if(tableData && tableData.length>0){ | ||
951 | + headTable=tableData[0]; | ||
952 | + } | ||
953 | + if(headTable){ | ||
954 | + this.handleHeadContent(headTable) | ||
955 | + } | ||
956 | + }, | ||
930 | // 每页展示多少条 | 957 | // 每页展示多少条 |
931 | handleSizeChange(val){ | 958 | handleSizeChange(val){ |
932 | // 切换页码重置初始页 | 959 | // 切换页码重置初始页 |
-
Please register or login to post a comment