详情表格组件功能完善-列支持将内容转成图标或图片

@@ -361,3 +361,17 @@ a:hover {
   border-color: rgba(249, 32, 32, 0.2);
   border-color: rgba(249, 32, 32, 0.2);
   color: rgb(249, 32, 32);
   color: rgb(249, 32, 32);
 }
 }
+/*列将内容转换成图标*/
+.small-icon {
+  width: 22px;
+  height: 22px;
+  display: block;
+}
+.small-icon.small-icon-msg {
+  background: url('../images/monitor/icon-msg.png') no-repeat center;
+  background-size: contain;
+}
+.small-icon.small-icon-wechat {
+  background: url('../images/monitor/icon-wechat.png') no-repeat center;
+  background-size: contain;
+}

@@ -36,7 +36,7 @@
       width="30%"
       width="30%"
       :before-close="handleClose"
       :before-close="handleClose"
     >
     >
-      <el-form :model="rowFormData" label-width="60px">
+      <el-form :model="rowFormData" label-width="70px">
         <el-form-item label="名称:">
         <el-form-item label="名称:">
           <el-input
           <el-input
             v-model.trim="rowFormData['name']"
             v-model.trim="rowFormData['name']"
@@ -76,6 +76,17 @@
             controls-position="right"
             controls-position="right"
           />
           />
         </el-form-item>
         </el-form-item>
+        <el-form-item label="关联组件:">
+          <el-select v-model.trim="rowFormData['componentName']"  size="small">
+            <el-option
+              v-for="item in componentNameData"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
       </el-form>
       </el-form>
       <span slot="footer" class="dialog-footer">
       <span slot="footer" class="dialog-footer">
         <el-button size="mini" @click="editDialogVisible = false">取 消</el-button>
         <el-button size="mini" @click="editDialogVisible = false">取 消</el-button>
@@ -160,12 +171,27 @@ export default {
         width: "",
         width: "",
         sort:false,
         sort:false,
         columnSort:0,
         columnSort:0,
+        componentName:1
       },
       },
       flag: true, // true 新增， false 编辑
       flag: true, // true 新增， false 编辑
       indexEditor: -1, // 编辑第几个数据
       indexEditor: -1, // 编辑第几个数据
       tableData: [],
       tableData: [],
       multipleSelection:[],
       multipleSelection:[],
       editDialogVisible:false,//编辑列
       editDialogVisible:false,//编辑列
+      componentNameData:[
+        {
+          label:'正常内容',
+          value:1
+        },
+        {
+          label:'微信图标',
+          value:'textToImage'
+        },
+        {
+          label: '级别背景',
+          value:'textToBg'
+        }
+      ],//关联组件
     };
     };
   },
   },
   methods: {
   methods: {
@@ -257,7 +283,7 @@ export default {
         // this.formData.push(this.rowFormData);
         // this.formData.push(this.rowFormData);
         let arr=[]
         let arr=[]
         this.multipleSelection.map((item,index)=>{
         this.multipleSelection.map((item,index)=>{
-          arr.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index})
+          arr.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1})
         })
         })
         this.formData=arr;
         this.formData=arr;
         this.dialogVisible = false;
         this.dialogVisible = false;

+<template>
+  <div class="text-bg-div">
+    <div :class="['table-level-normal',{'table-level-worse':alarmLevel=='2','table-level-worst':alarmLevel=='3'}]">
+      {{levelName}}
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "textToBg",
+  data() {
+    return {
+      levelName:'一般'
+    }
+  },
+  components: {},
+  props: {
+    alarmLevel: String,
+  },
+  computed: {},
+  mounted() {
+    this.getLeveName();
+  },
+  methods: {
+    getLeveName(){
+      if(this.alarmLevel=='1'){
+        this.levelName='一般'
+      }else if(this.alarmLevel=='2'){
+        this.levelName='重要'
+      }else if(this.alarmLevel=='3'){
+        this.levelName='严重'
+      }else{
+        this.levelName='一般'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss"  scoped>
+.text-bg-div{
+  width:80%;
+}
+.table-level-normal {
+  min-width: 28px;
+  line-height: 28px;
+  width:100%;
+  display: inline-block;
+  padding: 0 3px;
+  color: #fff;
+  background-color: #1e9fff
+}
+.table-level-worse {
+  background-color: #FF7E00;
+}
+.table-level-worst {
+  background-color: #D81E06;
+}
+</style>

+<template>
+  <div>
+    <div :class="['small-icon',{'small-icon-wechat':way=='','small-icon-msg':way=='message'}]"></div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "textToImage",
+  data() {
+    return {
+    }
+  },
+  components: {},
+  props: {
+    way: String,
+  },
+  computed: {},
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style lang="scss"  scoped>
+
+</style>

@@ -399,11 +399,11 @@ export const monitorDetailTable = {
         chartType:'detail-table',
         chartType:'detail-table',
         placeholder: '',
         placeholder: '',
         value: [
         value: [
-          {name: '文件系统挂载', key: 'KPI7AC1664E', width: '50%',isStatic:true,columnSort:0},
-          {name: '文件系统使用率', key: 'KPI449F5365', width: '50%',isStatic:true,columnSort:1},
-          {name: '文件系统总大小', key: 'KPIA91F44E7', width: '50%',isStatic:true,columnSort:2},
-          {name: '文件系统已使用大小', key: 'KPI98306224', width: '50%',isStatic:true,columnSort:3},
-          {name: '卷名称', key: 'KPI77C28BBA', width: '50%',isStatic:true,columnSort:4},
+          {name: '文件系统挂载', key: 'KPI7AC1664E', width: '50%',isStatic:true,columnSort:0,componentName:1},
+          {name: '文件系统使用率', key: 'KPI449F5365', width: '50%',isStatic:true,columnSort:1,componentName:1},
+          {name: '文件系统总大小', key: 'KPIA91F44E7', width: '50%',isStatic:true,columnSort:2,componentName:1},
+          {name: '文件系统已使用大小', key: 'KPI98306224', width: '50%',isStatic:true,columnSort:3,componentName:1},
+          {name: '卷名称', key: 'KPI77C28BBA', width: '50%',isStatic:true,columnSort:4,componentName:1},
         ]
         ]
       }
       }
     ],
     ],

@@ -39,7 +39,7 @@
                  :ref="'headerRef'+index+'-'+idx"
                  :ref="'headerRef'+index+'-'+idx"
                  :data-tip="tableFiledMaxWidth('isOverflow'+index+'-'+idx,index,idx)"
                  :data-tip="tableFiledMaxWidth('isOverflow'+index+'-'+idx,index,idx)"
             >
             >
-              <el-tooltip :disabled="isEllipsis[index+'-'+idx]"  ref="elTooltip" trigger="hover" >
+              <el-tooltip v-if="!itemChild.componentName || itemChild.componentName==1" :disabled="isEllipsis[index+'-'+idx]"  ref="elTooltip" trigger="hover" >
                 <template #content>
                 <template #content>
                   <span>{{ item[itemChild.key].kpiValue}}</span>
                   <span>{{ item[itemChild.key].kpiValue}}</span>
                 </template>
                 </template>
@@ -48,6 +48,7 @@
                   {{ item[itemChild.key].kpiValue}}
                   {{ item[itemChild.key].kpiValue}}
                 </span>
                 </span>
               </el-tooltip>
               </el-tooltip>
+              <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'" />
 
 
               <customMenuBox ref="customMenu"  v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
               <customMenuBox ref="customMenu"  v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
                     :detailMenubox="calcDetailMenubox"
                     :detailMenubox="calcDetailMenubox"
@@ -176,6 +177,8 @@ import VueSuperSlide from "vue-superslide";
 import {getDetailTableData,getDetailTableDataNoPage} from "@/api/platform";
 import {getDetailTableData,getDetailTableDataNoPage} from "@/api/platform";
 import customDialog from "../../designerComponents/customDialog";
 import customDialog from "../../designerComponents/customDialog";
 import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
 import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
+import textToImage from "../../designerComponents/textToImage";//文字转图片
+import textToBg from "../../designerComponents/textToBg";//文字转背景
 
 
 vue.use(VueSuperSlide);
 vue.use(VueSuperSlide);
 export default {
 export default {
@@ -184,7 +187,7 @@ export default {
     ispreview: Boolean
     ispreview: Boolean
   },
   },
   components:{
   components:{
-    customDialog,customMenuBox
+    customDialog,customMenuBox,textToImage,textToBg
   },
   },
   data() {
   data() {
     return {
     return {
@@ -258,6 +261,7 @@ export default {
       sortBy:'',//排序参数
       sortBy:'',//排序参数
       sortCaret:'',//正序倒序
       sortCaret:'',//正序倒序
       isEllipsis:[],//是否文字超出
       isEllipsis:[],//是否文字超出
+      componentName:'',//组件名称
     };
     };
   },
   },
   computed: {
   computed: {
@@ -652,9 +656,12 @@ export default {
       let that=this;
       let that=this;
        this.$nextTick(() => {
        this.$nextTick(() => {
           let isOverflow=that.$refs[obj];
           let isOverflow=that.$refs[obj];
-          let cWidth = isOverflow[0].parentElement.scrollWidth;//.scrollWidth;
+          if(isOverflow && isOverflow[0]){
+            let cWidth = isOverflow[0].parentElement.scrollWidth;
             let sWidth = isOverflow[0].scrollWidth;
             let sWidth = isOverflow[0].scrollWidth;
             that.isEllipsis[index+'-'+idx]=!((sWidth+10) > cWidth);
             that.isEllipsis[index+'-'+idx]=!((sWidth+10) > cWidth);
+          }
+
       })
       })
     },
     },
     //列是否排序
     //列是否排序
@@ -673,6 +680,7 @@ export default {
           if(item.key==v.key){
           if(item.key==v.key){
             v.columnSort=item.columnSort;
             v.columnSort=item.columnSort;
             v.sort=item.sort?item.sort:false;
             v.sort=item.sort?item.sort:false;
+            v.componentName=item.componentName?item.componentName:1;
           }
           }
         })
         })
         if(this.headerAll && this.headerAll.length>0){
         if(this.headerAll && this.headerAll.length>0){
@@ -680,6 +688,7 @@ export default {
             if(item.key==v.key){
             if(item.key==v.key){
               v.columnSort=item.columnSort;
               v.columnSort=item.columnSort;
               v.sort=item.sort?item.sort:false;
               v.sort=item.sort?item.sort:false;
+              v.componentName=item.componentName?item.componentName:1;
             }
             }
           })
           })
         }
         }
@@ -821,6 +830,9 @@ export default {
     //下载
     //下载
     downloadTableList(title, resId, kpiId, flagPrifix, sortBy, order){
     downloadTableList(title, resId, kpiId, flagPrifix, sortBy, order){
       let kpiIdArr=[];
       let kpiIdArr=[];
+      let param={
+        sortBy:this.sortBy
+      }
       this.header.map(item=>{
       this.header.map(item=>{
         if(item.sort){
         if(item.sort){
           kpiIdArr.push(item.key)
           kpiIdArr.push(item.key)