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

折线图折线点添加点击事件，表格表头与动态数据进行配置(用vuex实现) See merge request !21

Merge branch 'master-ajreport-lushangqing' into 'master'
折线图折线点添加点击事件，表格表头与动态数据进行配置(用vuex实现) See merge request !21
王涛
Commit eb4d5354027a60b5e6bcea417165b289c49df34c 2 parents 7c9e218c 3df0c44e
Showing 10 changed files with 263 additions and 58 deletions
report-ui/src/api/platform.js
report-ui/src/store/getters.js
report-ui/src/store/index.js
report-ui/src/store/modules/tableHead.js
report-ui/src/views/report/bigscreen/designer/designerComponents/configureIndicators.vue
report-ui/src/views/report/bigscreen/designer/designerComponents/dynamicComponents.vue
report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-custom-line-chart.js
report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-gauge-rate.js
report-ui/src/views/report/bigscreen/designer/widget/monitor/customLineChart.vue
report-ui/src/views/report/bigscreen/designer/widget/monitor/detailTable.vue
--- a/report-ui/src/api/platform.js
View file @eb4d535
+++ b/report-ui/src/api/platform.js
View file @eb4d535
@@ -104,6 +104,7 @@ export function getHealth(data) {
     method: 'get',
   })
 }
+//获取表格数据
 export function getDetailTableData(params,urlObj){
   let str='';
   if(params.sortBy){
@@ -118,6 +119,7 @@ export function getDetailTableData(params,urlObj){
     method: 'get',
   })
 }
+//获取性能指标
 export function getKpiPage(params,urlObj){
   let paramsStr=+'&resType='+params.resType
     +'&kpiIdent='+params.kpiIdent+'&kpiCategory='+params.kpiCategory+'&kpiDataType='+params.kpiDataType+'&kpiUnit='+params.kpiUnit
--- a/report-ui/src/store/getters.js
View file @eb4d535
+++ b/report-ui/src/store/getters.js
View file @eb4d535
 import cacheView from "./modules/cachaView"
+import tableHead from "./modules/tableHead"
 const getters = {
   sidebar: state => state.app.sidebar,
   device: state => state.app.device,
   token: state => state.user.token,
   accessUser: state => state.user.accessUser,
-  cacheViews: state => state.cacheView.cacheViews
+  cacheViews: state => state.cacheView.cacheViews,
+  //lsq 2022-02-25
+  tableHeads:state => state.tableHead.tableHeadData
 }
 export default getters
--- a/report-ui/src/store/index.js
View file @eb4d535
+++ b/report-ui/src/store/index.js
View file @eb4d535
@@ -7,6 +7,8 @@ import app from './modules/app'
 import user from './modules/user'
 import cacheView from './modules/cachaView'
 import help from './modules/help'
+//lsq 2022-02-25
+import tableHead from './modules/tableHead'
 Vue.use(Vuex)
@@ -18,7 +20,8 @@ const store = new Vuex.Store({
     app,
     user,
     cacheView,
-    help
+    help,
+    tableHead
   },
   state: { },
   plugins: [initPlugin],
--- a/report-ui/src/store/modules/tableHead.js 0 → 100644
View file @eb4d535
+++ b/report-ui/src/store/modules/tableHead.js 0 → 100644
View file @eb4d535
+
+const tableHead = {
+  state: {
+    tableHeadData: []
+  },
+
+  mutations: {
+    CHANGE_HEAD: (state, val) => {
+      state.tableHeadData=val;
+    }
+  },
+  actions: {
+
+  }
+}
+
+export default tableHead
--- a/report-ui/src/views/report/bigscreen/designer/designerComponents/configureIndicators.vue
View file @eb4d535
+++ b/report-ui/src/views/report/bigscreen/designer/designerComponents/configureIndicators.vue
View file @eb4d535
 <template>
   <div>
-    <el-button
+<!--    <el-button
       type="primary"
       size="small"
       plain
       @click="handleAddClick"
     >配置表头</el-button
-    >
-    <el-table :data="formData" style="width: 100%">
+    >-->
+    <span>表头设置</span>
+    <el-table :data="formDataNew" style="width: 100%">
       <el-table-column prop="name" label="名称" width="60" />
       <el-table-column prop="key" label="key值" width="70" />
       <el-table-column prop="width" label="宽度" width="50" />
@@ -104,6 +105,21 @@
       </span>
     </el-dialog>
     <el-dialog
+      title="表头数据"
+      :visible.sync="dialogVisible"
+      width="60%"
+      :before-close="handleClose"
+    >
+
+      <span slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
+
+         <el-button size="mini" type="primary" @click="handleSaveClick"
+         >确 定</el-button
+         >
+      </span>
+    </el-dialog>
+<!--    <el-dialog
       title="性能指标"
       :visible.sync="dialogVisible"
       width="60%"
@@ -135,7 +151,7 @@
           <template #default="scope">{{ scope.row.policyNum>0?'':'暂无' }}</template>
         </el-table-column>
       </el-table>
-      <!-- 分页 -->
+      &lt;!&ndash; 分页 &ndash;&gt;
       <div style='text-align: left;background-color: white'>
         <el-pagination
           v-if="currentPage"
@@ -158,12 +174,13 @@
            >
         </el-tooltip>
       </span>
-    </el-dialog>
+    </el-dialog>-->
   </div>
 </template>
 <script>
-import {getKpiPage} from "@/api/platform";
+import {getKpiPage,getDetailTableData} from "@/api/platform";
 import {formatDate} from "../../../../../filter";
+import {mapGetters} from "vuex";
 export default {
   model: {
     prop: "formData",
@@ -173,9 +190,9 @@ export default {
     formData: Array
   },
   watch:{
-    headTable:{
+    tableHeads:{
       handler(val){
-        console.log("*(*(",val)
+        this.setFormData();
       },
       deep:true
     }
@@ -219,9 +236,11 @@ export default {
           value:'textToBg'
         }
       ],//关联组件
+      formDataNew:this.formData,//表头数据
     };
   },
   computed:{
+    ...mapGetters(['tableHeads']),
     //获取url地址中的token
     getUrlToken(){
       let locationUrl=this.$route.query;
@@ -234,7 +253,15 @@ export default {
       return urlObj;
     }
   },
+  created() {
+    this.setFormData();
+  },
   methods: {
+    setFormData(){
+      if(this.tableHeads){
+        this.formDataNew=this.tableHeads;
+      }
+    },
     //搜索指标
     searchKpi(){
       this.getKpi();
@@ -252,20 +279,6 @@ export default {
         this.tableData=data;
       }
     },
-    //回显数据
-    setCheckedData(){
-      /*if(this.multipleSelection && this.multipleSelection.length>0){
-        this.tableData.map(item=>{
-          this.multipleSelection.map(v=>{
-            if(item.kpiId==v.kpiId){
-              setTimeout(()=>{
-                this.$refs.multipleTableRef.toggleRowSelection(item)
-              },300)
-            }
-          })
-        })
-      }*/
-    },
     //多选操作
     handleSelectionChange(val) {
       this.multipleSelection = val
@@ -325,7 +338,6 @@ export default {
     handleSaveClick() {
       if (this.flag) {
         // 新增
-        // this.formData.push(this.rowFormData);
         let arr=[];
         if(this.primaryTypeFlg){
           //追加
@@ -333,7 +345,7 @@ export default {
           this.multipleSelection.map((item,index)=>{
             arr1.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1})
           })
-          arr=this.formData.concat(arr1);
+          arr=this.formDataNew.concat(arr1);
         }else{
           //重新选择
           this.multipleSelection.map((item,index)=>{
@@ -341,19 +353,19 @@ export default {
           })
         }
-        this.formData=arr;
-        this.formData.sort(this.compare('columnSort'));
+        this.formDataNew=arr;
+        this.formDataNew.sort(this.compare('columnSort'));
         this.dialogVisible = false;
       } else {
         // 编辑
-        this.formData[this.indexEditor] = this.rowFormData;
-        this.$set(this.formData, this.indexEditor, this.rowFormData);
-        this.formData.sort(this.compare('columnSort'));
+        this.formDataNew[this.indexEditor] = this.rowFormData;
+        this.$set(this.formDataNew, this.indexEditor, this.rowFormData);
+        this.formDataNew.sort(this.compare('columnSort'));
         this.editDialogVisible = false;
       }
-      console.log("AVX", this.formData)
-      this.$emit("input", this.formData);
-      this.$emit("change", this.formData);
+      console.log("AVX", this.formDataNew)
+      this.$emit("input", this.formDataNew);
+      this.$emit("change", this.formDataNew);
     },
     //数组排序
     compare(property){
@@ -365,10 +377,10 @@ export default {
     },
     // 删除
     handleDeleteClick(index,row) {
-      this.formData.splice(index, 1);
+      this.formDataNew.splice(index, 1);
       this.setTableChecked(row.key);
-      this.$emit("input", this.formData);
-      this.$emit("change", this.formData);
+      this.$emit("input", this.formDataNew);
+      this.$emit("change", this.formDataNew);
     },
     //设置表格选中状态
     setTableChecked(kpiId){
--- a/report-ui/src/views/report/bigscreen/designer/designerComponents/dynamicComponents.vue
View file @eb4d535
+++ b/report-ui/src/views/report/bigscreen/designer/designerComponents/dynamicComponents.vue
View file @eb4d535
@@ -118,7 +118,6 @@ export default {
         chartProperties: this.chartProperties,
         contextData
       };
-      console.log("^&^&",params)
       this.$emit("input", params);
       this.$emit("change", params);
     },
--- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-custom-line-chart.js
View file @eb4d535
+++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-custom-line-chart.js
View file @eb4d535
@@ -49,6 +49,14 @@ export const monitorCustomLineChart = {
         ],
         value: 'KPID339D51B',
       },
+      {
+        type: 'el-input-text',
+        label: 'flag',
+        name: 'flag',
+        required: false,
+        placeholder: '',
+        value: '',
+      },
       [
         {
           name: '折线设置',
@@ -67,7 +75,7 @@ export const monitorCustomLineChart = {
               name: 'pointSize',
               required: false,
               placeholder: '',
-              value: 10,
+              value: 6,
             },
             {
               type: 'vue-color',
@@ -107,7 +115,7 @@ export const monitorCustomLineChart = {
               name: 'lineWidth',
               required: false,
               placeholder: '',
-              value: 4,
+              value: 1,
             },
           ],
         },
--- a/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-gauge-rate.js
View file @eb4d535
+++ b/report-ui/src/views/report/bigscreen/designer/tools/echartsConfigJson/monitorConfigJson/monitor-gauge-rate.js
View file @eb4d535
@@ -78,7 +78,7 @@ export const monitorGaugeRate = {
         name: 'flag',
         required: false,
         placeholder: '',
-        value: '',
+        value: 'net',
       },
       [
         {
--- a/report-ui/src/views/report/bigscreen/designer/widget/monitor/customLineChart.vue
View file @eb4d535
+++ b/report-ui/src/views/report/bigscreen/designer/widget/monitor/customLineChart.vue
View file @eb4d535
 <template>
   <div :style="styleObj">
-    <v-chart :options="options" autoresize/>
+    <v-chart ref="myEchart" :options="options" autoresize/>
+    <!-- 直接点击数据展示 性能趋势弹框-->
+    <customDialog :dialogVisible="trendVisible" :heightStyle="heightStyle" :marginStyle="marginStyle"
+                  :widthStyle="widthStyle" :title-name="optionsSetup.titleText"
+                  :showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc"
+    >
+      <template v-slot>
+        <div  class="txtScroll-top">
+          {{trendSrc}} <br/>
+          {{tableDataValue.name}}--{{tableDataValue.data}}
+          <iframe :src="trendSrc" class="layadmin-iframe"  style="height: 99.5%!important;width: 100%;"/>
+        </div>
+      </template>
+    </customDialog>
   </div>
 </template>
 <script>
+import customDialog from "../../designerComponents/customDialog";
+import {getTrendBaseUrl} from "@/api/platform";
+
 export default {
   name: "customLineChart",
-  components: {},
+  components: {customDialog},
   props: {
     value: Object,
     ispreview: Boolean
   },
   data() {
     return {
+      dynamicData:'',//动态数据值
+      refreshTime:'',//刷新时间
+      flagInter:null,//定时
+      trendVisible:false,//性能趋势弹框
+      dataValue:'',
+      trendSrc:'',//性能趋势图地址
+      marginStyle:'',//弹框距离顶部距离
+      heightStyle:'',//弹框遮罩层高度
+      widthStyle:';',//弹框宽度样式
+      tableDataValue: {kpiId:'',name:'',data:''},
+      tableDataValueHead: {},
+      resType:'',
       options: {
         grid: {},
         color: [],
@@ -74,7 +102,29 @@ export default {
         top: this.optionsStyle.top + "px",
         background: this.optionsSetup.background
       };
+    },
+    //获取url地址中的token
+    getUrlToken(){
+      let locationUrl=this.$route.query;
+      let resId=locationUrl.resId;
+      let token=locationUrl.access_token;
+      let urlObj={
+        resId:resId,
+        token:token
       }
+      return urlObj;
+    },
+    //设置
+    kpiIdStyle(){
+      this.$set(this.tableDataValue,'kpiId',this.optionsSetup.kpiId)
+      this.tableDataValue.kpiId=this.optionsSetup.kpiId;
+      let obj={
+        kpiId:this.optionsSetup.kpiId,
+        targetId:this.optionsSetup.targetId,
+        flag:this.optionsSetup.flag
+      }
+      return obj;
+    },
   },
   watch: {
     value: {
@@ -107,6 +157,7 @@ export default {
       this.setOptionsMargin();
       this.setOptionsLegend();
       this.setOptionsColor();
+      window.addEventListener("scroll", this.handleScroll, true); //监听滚动事件
     },
     // 标题修改
     setOptionsTitle() {
@@ -369,6 +420,8 @@ export default {
       if (!val) return;
       if (this.ispreview) {
         this.getEchartData(val);
+        this.dynamicData=val;
+        this.refreshTime=refreshTime;
         this.flagInter = setInterval(() => {
           this.getEchartData(val);
         }, refreshTime);
@@ -392,7 +445,88 @@ export default {
           series[i].data = val.series[i].datas;
         }
       }
+      this.echartsClick();
+    },
+    echartsClick(){
+      let that=this;
+      this.$refs.myEchart.chart.on('click',function (params){
+        console.log("()()()()()",params.name,params.data,params)
+        that.$set(that.tableDataValue,'name',params.name)
+        that.$set(that.tableDataValue,'data',params.data)
+        that.goTrend();
+      })
+    },
+    //设置性能趋势图
+    setTrend(data){
+      let flg='&flg=';
+      if(data.flag){
+        flg+=data.flag;
+      }else {
+        flg+=data.subResId;
+      }
+      let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.kpiIdStyle.kpiId+flg+'&warning='+data.isWarning
+        +'&ident='+data.ident
+        +'&trend='+data.trend
+        +'&name='+data.name;
+      let baseUrl=getTrendBaseUrl();
+      this.resType=data.resType;
+      this.trendSrc=baseUrl+'/vue3/index.html#/vue3/pieDetailLine?'+urlParams+'&access_token='+this.getUrlToken.token;
+    },
+    goTrend(){
+      this.setTrend(this.tableDataValue);
+      this.trendVisible=true;
+      if(this.flagInter){
+        clearInterval(this.flagInter);
+      }
+    },
+    //弹框关闭确定
+    hideDialog(){
+      this.trendVisible=false;
+      this.flagInter = setInterval(() => {
+        this.getEchartData(this.dynamicData);
+      }, this.refreshTime);
+    },
+    okFunc(){
+      this.trendVisible=false;
+      this.flagInter = setInterval(() => {
+        this.getEchartData(this.dynamicData);
+      }, this.refreshTime);
+    },
+    handleScroll(e){
+      let serviceTop = 44;
+
+      let hotelTop = 344;
+
+      if (e.target.scrollTop > 44 && e.target.scrollTop < 344) {
+
+        this.selectNum = 0;
+      }
+
+      if (e.target.scrollTop > 344) {
+
+        this.selectNum = 1;
+
+      }
+      // let scroll=window.pageYOffset;
+      let scroll=document.documentElement.scrollTop;
+      let documentHeight=document.documentElement.clientHeight;
+      if (self != top) {
+        //嵌入到监控系统iframe中弹框位置样式
+        // let documentHeight=document.body.scrollHeight;
+        this.heightStyle="height:"+(documentHeight+230)+'px;top:'+scroll+'px';
+        if(scroll<600){
+          this.marginStyle+="margin-top:"+(110)+'px;';
+
+        }else{
+          this.marginStyle+="margin-top:"+(230)+'px;';
+
         }
+      }else{
+        //ajreport中弹框位置样式
+        this.heightStyle="height:"+(documentHeight+scroll)+'px;';
+        this.marginStyle+="margin-top:"+(scroll+100)+'px;';
+      }
+    },
   }
 };
 </script>
--- a/report-ui/src/views/report/bigscreen/designer/widget/monitor/detailTable.vue
View file @eb4d535
+++ b/report-ui/src/views/report/bigscreen/designer/widget/monitor/detailTable.vue
View file @eb4d535
@@ -198,6 +198,8 @@ import textToImage from "../../designerComponents/textToImage";//文字转图片
 import textToBg from "../../designerComponents/textToBg";
 import {saveClearAalarm} from "../../../../../../api/platform";
 import {Message} from "element-ui";
+import {mapGetters} from "vuex";
+import tableHead from "../../../../../../store/modules/tableHead";
 //文字转背景
 vue.use(VueSuperSlide);
@@ -542,7 +544,7 @@ export default {
       }
       this.tableFiledColumnSort();
     },
-    async handlerDetailData(valData,sortBy){
+    async handlerDetailData(valData,sortBy,order){
       let kpiArr=[]
       let kpiIdStr='';
       if(this.header && this.header.length>0){
@@ -564,10 +566,13 @@ export default {
         page:this.currentPage,
         size:this.pageSize
       }
-      let sort=this.sortBy;
+      let sort=sortBy;
       if(sort){
         param.sortBy=sort;
       }
+      if(order){
+        param.order=order;
+      }
       let headTable = valData;
       if(kpiIdStr){
         //根据kpiId集合获取表格数据
@@ -585,7 +590,7 @@ export default {
       }
     },
     //打开更多表格
-    async handlerDetailDataNoPage(){
+    async handlerDetailDataNoPage(sortBy){
       let kpiArr=[];
       let kpiIdStr='';
       if(this.header && this.header.length>0){
@@ -607,7 +612,7 @@ export default {
         kpiId:kpiIdStr,
         flagPrifix:this.getUrlToken.flag,
       }
-      let sort=this.sortBy;
+      let sort=sortBy;
       if(sort){
         param.sortBy=sort;
       }
@@ -687,11 +692,12 @@ export default {
     getEchartData(val) {
       const data = this.queryEchartsData(val);
       data.then(res => {
+        let resTable='';
         if(res && res.length>0){
           // this.handlerDetailData(res[0].data[0]);
           if(!this.getUrlToken.isAlarm){
             //普通详情表格
-            console.log("lllll",res[0].data[0])
+            resTable=res[0].data[0];
             this.handleHeadContent(res[0].data[0]);
           }else{
@@ -733,9 +739,17 @@ export default {
                 header:head,
                 content:content
               }
+              resTable=obj;
               this.handleHeadContent(obj);
+
+            }
+
+          }
+        }
+        // this.list = res;
         let isNewData=false;
         let addTableData=[];
+        let head=resTable.header;
         let addTableDataOld=this.optionsSetUp.dynamicAddTable;
         addTableDataOld.map(v=>{
           head.map((item,index)=>{
@@ -768,15 +782,7 @@ export default {
             })
           })
         }
-              console.log("addTableData",addTableData)
-              // this.optionsSetUp.dynamicAddTable=addTableData;
-              console.log("this.optionsSetUp.dynamicAddTable",this.optionsSetUp.dynamicAddTable)
-
-            }
-
-          }
-        }
-        // this.list = res;
+        this.$store.commit('CHANGE_HEAD', addTableData);
         this.hackResetFun();
       });
     },
@@ -917,16 +923,37 @@ export default {
         this.sortCaret=flg;
         this.sortBy=item.key;
       }
+      console.log("      this.optionsData",      this.optionsData)
+      console.log("iiiiiiii",item)
       if(this.sortCaret=='ascending'){
         //正序
+        this.order='ASC';
       }else if(this.sortCaret=='ascending'){
         //倒序
+        this.order='DESC';
       }else{
         //不排序
+        this.order='';
       }
-      // this.handlerDetailData('',item.key)
+      this.handlerDetailData('',this.sortBy,this.order)
+
       // this.handlerDetailDataNoPage();
     },
+    //获取表格数据
+    async reGetDetailTableData(param){
+      let tableData='';
+      let headTable='';
+      const { success,data } = await getDetailTableData(param,this.getUrlToken);
+      if (success ){
+        tableData=data;
+      }
+      if(tableData && tableData.length>0){
+        headTable=tableData[0];
+      }
+      if(headTable){
+        this.handleHeadContent(headTable)
+      }
+    },
     // 每页展示多少条
     handleSizeChange(val){
       // 切换页码重置初始页