Merge branch 'master-500-dev-lushangqing' into 'master-500-dev'

动态传参，表格下探到layui详情页，增加更多下载按钮



See merge request !45

@@ -70,7 +70,7 @@ export default {
     setInit(){
       let box = document.getElementsByClassName('layout');
       let height=box[0].scrollHeight;
-      this.heightStyle="height:"+height+'px;max-height:'+height+'px;overflow:hidden;';
+      this.heightStyle="height:"+(height+120)+'px;max-height:'+(height+120)+'px;overflow:hidden;';
     },
     //禁止滚动
     stop(){
@@ -111,7 +111,7 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 1;
+  z-index: 9999;
 }
 .dialog-div-content{
   /* display: flex;

@@ -112,6 +112,16 @@ export default {
           i
         ].sampleItem;
       }
+      let locationUrl=this.$route.query;
+      for(let key in contextData){
+        for(let urlKey in locationUrl){
+          if(key==urlKey){
+            contextData[key]=locationUrl[urlKey]+''
+          }
+        }
+      }
+      console.log("this.contextData",contextData,this.userNameList)
+
       const params = {
         chartType: this.chartType,
         setCode: this.setCode,

@@ -56,7 +56,7 @@ export const monitorTablePage = {
         name: 'vis',
         required: false,
         placeholder: '',
-        value: '10'
+        value: 10
       },
       {
         type: 'el-input-number',

@@ -2,6 +2,10 @@
   <div :style="styleObj">
     <div class="detail-table-title title-flex-between">
       <div class="title-left">{{tableStyle.tableName}}</div>
+      <div class="title-right" >
+        <span class="title-link" @click="handlerDetailDataNoPage">更多</span>
+        <span class="title-link" @click="downloadTableList">下载</span>
+      </div>
     </div>
     <superslide v-if="hackReset" :options="options" class="txtScroll-top" :style="borderStyle">
       <!--表头-->
@@ -31,7 +35,7 @@
                   <span v-if="itemChild.key=='alarmLevel' && item[itemChild.key]=='1'" :class="['table-level-normal',{'table-level-worse':item[itemChild.key]=='2','table-level-worst':item[itemChild.key]=='3'}]" >一般</span>
                   <span v-else-if="itemChild.key=='alarmLevel' && item[itemChild.key]=='2'" :class="['table-level-normal',{'table-level-worse':item[itemChild.key]=='2','table-level-worst':item[itemChild.key]=='3'}]" >重要</span>
                   <span v-else-if="itemChild.key=='alarmLevel' && item[itemChild.key]=='3'" :class="['table-level-normal',{'table-level-worse':item[itemChild.key]=='2','table-level-worst':item[itemChild.key]=='3'}]" >严重</span>
-                  <span v-else>{{ item[itemChild.key] }}</span>
+                  <span v-else :class="{'spanLink':itemChild.key=='resTypeName'}" @click="goTrend(item,itemChild.key)">{{ item[itemChild.key] }}</span>
                 </el-tooltip>
 
               </div>
@@ -53,11 +57,72 @@
         :total="total">
       </el-pagination>
     </div>
+    <!--    更多弹框-->
+    <customDialog :dialogVisible="tableVisible" :heightStyle="heightStyle" :marginStyle="marginStyle"  :title-name="tableStyle.tableName"
+                  @hideDialog="hideDialogTable" @okFunc="okFuncTable"
+    >
+      <template v-slot>
+        <superslide v-if="hackReset" :options="options" class="txtScroll-top" :style="borderStyle">
+          <!--表头-->
+          <div class="title">
+            <div
+              v-for="(item, index) in header"
+              :style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"
+              :key="index"
+            >
+              {{ item.name }}
+            </div>
+          </div>
+          <!--数据-->
+          <div class="bd"    v-loading="loadingAll">
+            <ul class="infoList">
+              <li v-for="(item, index) in listAll" :key="index" :style="tableRowHeight()" >
+                <div
+                  class="text-overflow"
+                  v-for="(itemChild, idx) in header"
+                  :key="idx"
+                  :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
+                >
+                  <el-tooltip   ref="elTooltip" trigger="hover" >
+                    <template #content>
+                      <span>{{ item[itemChild.key] }}</span>
+                    </template>
+                    <span v-if="itemChild.key=='alarmLevel' && item[itemChild.key]=='1'" :class="['table-level-normal',{'table-level-worse':item[itemChild.key]=='2','table-level-worst':item[itemChild.key]=='3'}]" >一般</span>
+                    <span v-else-if="itemChild.key=='alarmLevel' && item[itemChild.key]=='2'" :class="['table-level-normal',{'table-level-worse':item[itemChild.key]=='2','table-level-worst':item[itemChild.key]=='3'}]" >重要</span>
+                    <span v-else-if="itemChild.key=='alarmLevel' && item[itemChild.key]=='3'" :class="['table-level-normal',{'table-level-worse':item[itemChild.key]=='2','table-level-worst':item[itemChild.key]=='3'}]" >严重</span>
+                    <span v-else :class="{'spanLink':itemChild.key=='resTypeName'}" @click="goTrend(item,itemChild.key)">{{ item[itemChild.key] }}</span>
+                  </el-tooltip>
+
+                </div>
+              </li>
+            </ul>
+          </div>
+        </superslide>
+        <!-- 分页 -->
+        <div class="pageClass" v-if="optionsSetUp.isPage && !optionsSetUp.isRoll" style='text-align: left;background-color: white'>
+          <el-pagination
+            v-if="currentPage"
+            @size-change="handleSizeChange"
+            @prev-click="prePage"
+            @next-click="nextPage"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-sizes="pageSizes"
+            :page-size="pageSize"
+            :total="totalAll">
+          </el-pagination>
+        </div>
+      </template>
+    </customDialog>
   </div>
 </template>
 <script>
 import vue from "vue";
 import VueSuperSlide from "vue-superslide";
+import customDialog from "../../designerComponents/customDialog";
+import customMenuBox from "../../designerComponents/customMenuBox";
+import textToImage from "../../designerComponents/textToImage";
+import textToBg from "../../designerComponents/textToBg";
 
 vue.use(VueSuperSlide);
 export default {
@@ -65,13 +130,21 @@ export default {
     value: Object,
     ispreview: Boolean
   },
+  components:{
+    customDialog
+  },
   data() {
     return {
+      tableVisible:false,//更多表格弹框
+      marginStyle:'',//弹框距离顶部距离
+      heightStyle:'',//弹框遮罩层高度
       loading:true,
+      loadingAll:true,//更多表格加载中
       currentPage:1,
       pageSize:10,
       pageSizes:[10,50,100, 200, 300, 400],
-      total:20,
+      total:0,
+      totalAll:0,
       hackReset: true,
       options: {
         titCell: ".hd ul",
@@ -85,6 +158,7 @@ export default {
       },
       header: [],
       list: [],
+      listAll: [],
       optionsSetUp: {},
       optionsPosition: {},
       optionsData: {}
@@ -169,10 +243,11 @@ export default {
       this.handlerHead();
       this.handlerData();
       this.visConfig();
+      window.addEventListener("scroll", this.handleScroll, true); //监听滚动事件
     },
-    visConfig(){
+    visConfig() {
       this.options.vis = this.optionsSetUp.vis;
-      this.pageSize=this.options.vis;
+      this.pageSize = this.options.vis;
       this.handleTableData();
 
     },
@@ -199,7 +274,8 @@ export default {
     },
     handlerStaticData(data) {
       this.list = data;
-      this.loading=false;
+      this.listAll=data;
+      this.loading = false;
     },
     handlerDynamicData(data, refreshTime) {
       if (!data) return;
@@ -215,11 +291,24 @@ export default {
     getEchartData(val) {
       const data = this.queryEchartsData(val);
       data.then(res => {
-        this.list = res;
-        this.loading=false;
-        if(this.list && this.list.length>0){
-          this.total=this.list[0].lineCount;
+        if(this.optionsData.dynamicData.contextData.isMore){
+          console.log("all")
+          this.listAll=res;
+          this.loadingAll = false;
+          if (this.listAll && this.listAll.length > 0) {
+            this.totalAll = this.listAll[0].lineCount;
+          }
+        }else{
+          console.log("111")
+
+          this.list = res;
+          this.loading = false;
+          if (this.list && this.list.length > 0) {
+            this.total = this.list[0].lineCount;
+          }
         }
+
+
         this.hackResetFun();
       });
     },
@@ -240,26 +329,26 @@ export default {
       }
       return styleJson;
     },
-    tableRowHeight(){
+    tableRowHeight() {
       var styleJson = {};
-      if(this.optionsSetUp.rowHeight){
-        styleJson['height'] = this.optionsSetUp.rowHeight+'px';
-        styleJson['line-height'] = this.optionsSetUp.rowHeight+'px';
-      }else{
-        styleJson['height'] =this.options.rowHeight
-        styleJson['line-height'] = this.optionsSetUp.rowHeight+'px';
+      if (this.optionsSetUp.rowHeight) {
+        styleJson['height'] = this.optionsSetUp.rowHeight + 'px';
+        styleJson['line-height'] = this.optionsSetUp.rowHeight + 'px';
+      } else {
+        styleJson['height'] = this.options.rowHeight
+        styleJson['line-height'] = this.optionsSetUp.rowHeight + 'px';
       }
       return styleJson;
     },
-    tableFiledWidth(index){
+    tableFiledWidth(index) {
       var styleJson = {};
-      if(this.optionsSetUp.dynamicAddTable[index].width ){
+      if (this.optionsSetUp.dynamicAddTable[index].width) {
         styleJson["width"] = this.optionsSetUp.dynamicAddTable[index].width
       }
       return styleJson
     },
     // 每页展示多少条
-    handleSizeChange(val){
+    handleSizeChange(val) {
       // 切换页码重置初始页
       this.currentPage = 1
       //props.pageSize = val;
@@ -268,11 +357,9 @@ export default {
     },
 
     // 切换页码
-    handleCurrentChange(val){
+    handleCurrentChange(val) {
       //props.currentPage = val;
       this.currentPage = val;
-      console.log("aaaaaaaaaaaaaa",val)
-
       this.handleTableData();
     },
     // 切换页码
@@ -283,24 +370,149 @@ export default {
     },
 
     // 切换页码
-    nextPage(val){
+    nextPage(val) {
       // props.currentPage = val + 1;
       this.currentPage = val;
       this.handleTableData();
     },
     //分页获取表格数据
-    handleTableData(){
-      let optionsData=this.optionsData;
-      if(this.optionsData.dataType=="dynamicData" && this.optionsSetUp.isPage){
-        this.loading=true;
-        let limit=parseInt(this.optionsData.dynamicData.contextData.limit);
-        let page=parseInt(this.currentPage-1)*limit;
+    handleTableData() {
+      let optionsData = this.optionsData;
+      if (this.optionsData.dataType == "dynamicData" && this.optionsSetUp.isPage) {
+        this.loading = true;
+        let limit = parseInt(this.optionsData.dynamicData.contextData.limit);
+        let page = parseInt(this.currentPage - 1) * limit;
         //改变参数值-月季度年，重新加载动态数据--待测
-        this.optionsData.dynamicData.contextData.page=page;
-        this.optionsData.dynamicData.contextData.limit=this.options.vis;
-        // this.initData();
-        this.handlerData();
+        this.optionsData.dynamicData.contextData.page = page;
+        this.optionsData.dynamicData.contextData.limit = this.options.vis;
+        // this.handlerData();
+      }
+    },
+    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 scrollHeight=e.target.documentElement.scrollTop;
+
+      if (self != top) {
+        //嵌入到监控系统iframe中弹框位置样式
+        if(scrollHeight<600){
+          // this.marginStyle+="margin-top:"+(110)+'px;';
+
+        }else{
+          // this.marginStyle+="margin-top:"+(230)+'px;';
+
+        }
+        this.marginStyle+="top:"+(scrollHeight+60)+'px;';
+
+      }else{
+        //ajreport中弹框位置样式
+        this.marginStyle+="top:"+(scrollHeight)+'px;';
       }
+    },
+    //打开详情页
+    goTrend(item, itemChildKey) {
+      if (itemChildKey == 'resTypeName') {
+        let param = {
+          type:'detail',
+          data:{
+            resId: item.resId,
+            resType: item.resType
+          }
+
+        }
+        window.parent.postMessage(param, '*')
+      }
+    },
+    //更多
+    handlerDetailDataNoPage(){
+      this.widthStyle='';
+      this.tableVisible=true;
+      let optionsData = this.optionsData;
+      if (this.optionsData.dataType == "dynamicData" ) {
+        this.loadingAll= true;
+        let limit = 30;
+        let page = parseInt(this.currentPage - 1) * limit;
+        //改变参数值-月季度年，重新加载动态数据--待测
+        console.log("&&&&&&&&&",page,limit)
+        this.optionsData.dynamicData.contextData.page = page;
+        this.optionsData.dynamicData.contextData.limit = 30;
+        this.optionsData.dynamicData.contextData.isMore = true;
+        // this.handlerData();
+      }
+    },
+    //更多弹框关闭确定
+    hideDialogTable(){
+      this.tableVisible=false;
+      this.loading=false;
+      this.loadingAll=false;
+    },
+    okFuncTable(){
+      this.tableVisible=false;
+
+    },
+    downloadFile(url, params) { // 下载文件
+      const newUrl = params ? this.build(url, params) : url
+      axios.get(newUrl, { responseType: 'blob' }).then(resp => {
+        let headers = resp.headers;
+        let contentType = headers['content-type'];
+        if (!resp.data) {
+          return false;
+        } else {
+          const blob = new Blob([resp.data], { type: contentType });
+          const contentDisposition = resp.headers['content-disposition'];
+          let fileName = 'unknown';
+          if (contentDisposition) {
+            fileName = window.decodeURI(resp.headers['content-disposition'].split('=')[1]);
+          }
+          this.downFile(blob, fileName);
+        }
+      }).catch(function (error) {
+        console.log(error);
+      });
+    },
+    downFile(blob, fileName) {
+      // 非IE下载
+      if ('download' in document.createElement('a')) {
+        let link = document.createElement('a');
+        link.href = window.URL.createObjectURL(blob); // 创建下载的链接
+        link.download = fileName; // 下载后文件名
+        link.style.display = 'none';
+        document.body.appendChild(link);
+        link.click(); // 点击下载
+        window.URL.revokeObjectURL(link.href); // 释放掉blob对象
+        document.body.removeChild(link); // 下载完成移除元素
+      } else {
+        // IE10+下载
+        window.navigator.msSaveBlob(blob, fileName);
+      }
+    },
+    build(url, params) { // URL构建方法
+      const ps = []
+      if (params) {
+        for (let p in params) {
+          if (p) {
+            ps.push(p + '=' + encodeURIComponent(params[p]));
+          }
+        }
+      }
+
+      return url + '?' + ps.join('&');
+    },
+    //下载
+    downloadTableList(){
+
     }
   }
 };
@@ -360,6 +572,11 @@ export default {
 .table-level-worst {
   background-color: #D81E06;
 }
+.spanLink{
+  color:#1E9FFF;
+  text-decoration: underline;
+  cursor: pointer;
+}
 .text-overflow{
   white-space:nowrap;
   overflow:hidden;
@@ -379,4 +596,9 @@ export default {
 .txtScroll-top .infoList li:nth-child(2n) {
   background: rgb(10, 39, 50);
 }*/
+.title-flex-between{
+  display: flex;
+  justify-content: space-between;
+
+}
 </style>