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

详情表格组件功能完善-更多页面的表格和表格样式保持一致



See merge request !14

@@ -4,6 +4,7 @@ const prodEnv = require('./prod.env')
 
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  BASE_API: '"http://127.0.0.1:9095"'
+  BASE_API: '"http://127.0.0.1:9095"',
+  BASE_API_other: '"https://192.168.0.69:8080"'
   // BASE_API: '"http://10.108.26.197:9095"'
 })

-import request from '@/utils/request'
+import request from '@/utils/request1'
 import { getShareToken, getToken } from "@/utils/auth";
 import axios from 'axios';
 //自监控平台接口数据联调 // Start LSQ 2022/1/13 10:52 TODO
-export function getData(data) {
+// export function getData(data) {
+//   return request({
+//     url: 'reportDashboard/getData',
+//     method: 'post',
+//     headers: { 'Share-Token': getShareToken(), 'Authorization': getToken() },
+//     data,
+//   })
+// }
+//性能趋势图路径
+
+export function getTrendBaseUrl() {
+  let baseUrl=process.env.BASE_API_other;
+  // baseUrl='http://localhost:8088';
+  return baseUrl;
+}
+//获取告警策略列表数据
+export function getAlarmPolicy(params) {
+  return request({
+    url: '/api-web/alarmPolicy/list?policyType=0&kpiId=' +params.kpiId+'&access_token='+params.token,
+    headers: {  'Authorization': "Bearer "+params.token },
+    method: 'get',
+  })
+}
+//获取告警订阅列表数据
+export function getAlarmSubscribe(params) {
+  return request({
+    url: '/api-web/alarmsubscribe/list?access_token='+params.token,
+    headers: {  'Authorization': "Bearer "+params.token },
+    method: 'get',
+  })
+}
+//保存告警设置
+export function saveKpiPolicy(params,urlObj) {
+  return request({
+    url: '/api-web/alarmPolicy/save/kpipolicy?access_token='+urlObj.token,
+    headers: {  'Authorization': "Bearer "+urlObj.token },
+    method: 'post',
+    data:params
+  })
+}
+//保存过滤单指标
+export function saveSetKpiFilter(params,urlObj) {
+  let paramsStr='&resId='+params.resId+'&kpiId='+params.kpiId+'&flag='+params.flag+'&subFlag='+params.subFlag+'&isOne='+params.isOne;
   return request({
-    url: 'reportDashboard/getData',
+    url: '/api-web/filterkpi/kpi/filter?access_token='+urlObj.token+paramsStr,
+    headers: {  'Authorization': "Bearer "+urlObj.token },
+    method: 'GET',
+    // data:params
+  })
+}
+//获取压制次数
+export function getKpiPressTimes(params,urlObj) {
+  let paramsStr='&resId='+params.resId+'&kpiId='+params.kpiId+'&flag='+params.flag+'&subFlag='+params.subFlag;
+  return request({
+    url: '/api-web/manage/resource/res/kpi/findIgnore?access_token='+urlObj.token+paramsStr,
+    headers: {  'Authorization': "Bearer "+urlObj.token },
+    method: 'GET',
+  })
+}
+//保存压制次数
+export function saveSetKpiPressTimes(params,urlObj) {
+  return request({
+    url: '/api-web/manage/resource/res/kpi/ignore?access_token='+urlObj.token,
+    headers: {  'Authorization': "Bearer "+urlObj.token },
     method: 'post',
-    headers: { 'Share-Token': getShareToken(), 'Authorization': getToken() },
-    data,
+    data:params
+  })
+}
+//纳入容量预测
+export function saveCaAdd(params,urlObj) {
+  let paramsStr='&resId='+params.resId+'&kpiId='+params.kpiId+'&flag='+params.flag+'&resType='+params.resType;
+  return request({
+    url: '/api-web/caUnit/add?access_token='+urlObj.token+paramsStr,
+    headers: {  'Authorization': "Bearer "+urlObj.token },
+    method: 'GET',
+  })
+}
+//获取资源类型
+export function getResType(params,urlObj) {
+  return request({
+    url: 'api-web/manage/resource/findById?resId='+params.resId+'&access_token='+urlObj.token,
+    headers: {  'Authorization': "Bearer "+urlObj.token },
+    method: 'GET',
   })
 }
 export function getHealth(data) {
@@ -140,7 +217,7 @@ export function getDetailTableData(param){
           "kpiId": "KPIA91F44E7",
           "kpiName": "文件系统总大小",
           "flag": "fs-",
-          "kpiValue": "98.30 GB",
+          "kpiValue": "9812345678912563412588.30 GB",
           "collTime": null,
           "duration": null,
           "createTime": null,
@@ -789,7 +866,7 @@ export function getDetailTableData(param){
           "kpiId": "KPI7AC1664E",
           "kpiName": "文件系统挂载",
           "flag": "fs-runuser0",
-          "kpiValue": "/run/user/0 ",
+          "kpiValue": "/run/user/0/run1/user1/01 ",
           "collTime": null,
           "duration": null,
           "createTime": null,
@@ -2508,7 +2585,9 @@ export function getDetailTableData(param){
     "str": null,
     "totalRow": null
   }
-  if(params.kpiId=='KPI7AC1664E,KPI449F5365,KPIA91F44E7,KPI98306224,KPI77C28BBA'){
+  // params.kpiId=='KPI7AC1664E,KPI449F5365,KPIA91F44E7,KPI98306224,KPI77C28BBA'
+  let kpiIdArr=params.kpiId.split(',');
+  if(kpiIdArr.length>4){
     console.log("a1")
     tableData=detailTableData1;
   }else{
@@ -2638,7 +2717,7 @@ export  function  getDetailTableDataNoPage(){
           "kpiId": "KPIA91F44E7",
           "kpiName": "文件系统总大小",
           "flag": "fs-",
-          "kpiValue": "196.74 GB",
+          "kpiValue": "123456789987654321123456789987.74 GB",
           "collTime": null,
           "duration": null,
           "createTime": null,
@@ -3287,7 +3366,7 @@ export  function  getDetailTableDataNoPage(){
           "kpiId": "KPI7AC1664E",
           "kpiName": "文件系统挂载",
           "flag": "fs-runuser0",
-          "kpiValue": "/run/user/0 ",
+          "kpiValue": "/run/user/0/run2/user3/03 ",
           "collTime": null,
           "duration": null,
           "createTime": null,

+import axios from 'axios'
+import { Message, MessageBox } from 'element-ui'
+import store from '../store'
+import { getToken } from '@/utils/auth'
+// 创建axios实例
+const service = axios.create({
+  baseURL: process.env.BASE_API_other, // api 的 base_url
+  timeout: 20000 // 请求超时时间
+})
+
+// request拦截器
+service.interceptors.request.use(
+  config => {
+    config.headers['Authorization'] = (getToken() == null || getToken() == undefined) ? '' : getToken()
+    return config
+  },
+  error => {
+    // Do something with request error
+    Promise.reject(error)
+  }
+)
+
+// response 拦截器
+service.interceptors.response.use(
+  response => {
+    /**
+     * code为非20000是抛错 可结合自己业务进行修改
+     */
+    const res = response.data
+    // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
+    if (res.code == '50008' || res.code == '50012' || res.code == '50014') {
+      MessageBox.confirm(
+        '你已被登出，可以取消继续留在该页面，或者重新登录',
+        '重新登录',
+        {
+          confirmButtonText: '重新登录',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        sessionStorage.clear()
+        localStorage.clear()
+        window.location.href = "/";
+      })
+    }
+    else if (res.code !== '200' && res.code !== 0) {
+      Message({
+        message: res.message,
+        type: 'error',
+        duration: 5 * 1000
+      })
+      return response.data
+    } else {
+      return response.data
+    }
+  },
+  error => {
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+export default service

@@ -286,16 +286,26 @@ export default {
           arr.push({name:item.kpiName,key:item.kpiId,width:'50%',sort:false,columnSort:index,componentName:1})
         })
         this.formData=arr;
+        this.formData.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.editDialogVisible = false;
       }
       this.$emit("input", this.formData);
       this.$emit("change", this.formData);
     },
+    //数组排序
+    compare(property){
+      return function(a,b){
+        let value1 = a[property];
+        let value2 = b[property];
+        return value1 - value2;
+      }
+    },
     // 删除
     handleDeleteClick(index,row) {
       this.formData.splice(index, 1);

@@ -49,7 +49,7 @@ export default {
   watch: {
     dialogVisible: {
       handler(val) {
-        console.log("dialogVisible",val)
+        // console.log("dialogVisible",val)
       },
       deep: true
     }
@@ -64,7 +64,7 @@ export default {
     },
     okFunc(){
       // this.dialogVisible = false;
-      this.$emit('okfunc');
+      this.$emit('okFunc');
     }
   }
 }

@@ -6,7 +6,7 @@
           <img class="info-img" src="@/assets/images/healthStatus/icon_row_menu.png" alt="" @click.stop="pressingTimes()">
         </template>
         <div class="info-ul" style="width:140px;" >
-          <div class="basic-pressing-times" @click.stop="pressingDialog(itemMenu,tableDataValue,flg)" v-for="itemMenu in detailMenubox">
+          <div class="basic-pressing-times" @click.stop="pressingDialog(itemMenu,tableDataValue,tableDataValueHead,flg)" v-for="itemMenu in detailMenubox">
             <i class="el-icon-link icon-div"></i>{{itemMenu.name}}
           </div>
         </div>
@@ -20,24 +20,24 @@
 <!--          告警设置{{pressingValue}}-->
           <div class="alarm-li flex-center">
             <div class="alarm-li-label">告警策略</div>
-            <el-select v-model="strategyValue" filterable  class="m-2 alarm-li-select" placeholder="选择告警策略">
+            <el-select v-model="strategyValue" filterable clearable  class="m-2 alarm-li-select" placeholder="选择告警策略">
               <el-option
                 v-for="item in strategyData"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+                :key="item.alarmPolicyId"
+                :label="item.alarmPolicyName"
+                :value="item.alarmPolicyId"
               >
               </el-option>
             </el-select>
           </div>
           <div class="alarm-li flex-center">
             <div class="alarm-li-label">告警列表</div>
-            <el-select v-model="alarmListValue" multiple  filterable class="m-2 alarm-li-select" placeholder="选择告警列表" >
+            <el-select v-model="alarmListValue" multiple clearable  filterable class="m-2 alarm-li-select" placeholder="选择告警列表" >
               <el-option
                 v-for="item in alarmListData"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+                :key="item.subId"
+                :label="item.subName"
+                :value="item.subId"
               >
               </el-option>
             </el-select>
@@ -45,17 +45,25 @@
 
         </div>
         <div v-if="dialogName=='filter_sheet_indicator'" class="txtScroll-top">
-          过滤单指标{{pressingValue}}
+<!--          过滤单指标{{pressingValue}}-->
+          您确定要对当前指标进行过滤处理？
         </div>
         <div v-if="dialogName=='filter_multiple_indicators'" class="txtScroll-top">
-          过滤多指标{{pressingValue}}
+<!--          过滤多指标{{pressingValue}}-->
+          您确定要对当前指标进行过滤处理？
         </div>
         <div v-if="dialogName=='performance_trends'" class="txtScroll-top">
-          <div>性能趋势{{pressingValue}}</div>
+          <div>性能趋势{{pressingValue.kpiValue}}</div>
           <iframe :src="trendSrc" class="layadmin-iframe"  style="height: 99.5%!important;width: 100%;"/>
         </div>
         <div v-if="dialogName=='pressing_times'" class="txtScroll-top">
-          压制次数{{pressingValue}}
+<!--          压制次数{{pressingValue}}-->
+          <el-input
+            v-model="ignoreCnt"
+            :rows="2"
+            type="textarea"
+            placeholder="压制次数（必填，建议100以内）"
+          />
         </div>
         <div v-if="dialogName=='include_capacity_forecast'" class="txtScroll-top">
           纳入容量预测{{pressingValue}}
@@ -68,6 +76,8 @@
 
 <script>
 import customDialog from "./customDialog";
+import {Message} from "_element-ui@2.15.6@element-ui";
+import {getAlarmPolicy,getAlarmSubscribe,saveKpiPolicy,saveSetKpiFilter,getKpiPressTimes,saveSetKpiPressTimes,saveCaAdd,getTrendBaseUrl} from "@/api/platform";
 
 export default {
   name: "customMenuBox",
@@ -77,15 +87,15 @@ export default {
   props: {
     heightStyle: String,
     marginStyle: String,
-    trendSrc:{
-      type:String,
-      default:'',
+    tableDataValueHead:{
+      type:Object,
+      default: {},
     },
     tableName:{
       type:String,
       default:'',
     },//弹框名称
-     detailMenubox: {
+    detailMenubox: {
       type: Array,
       default: [
         {
@@ -121,13 +131,18 @@ export default {
       ]
     },//表格下探数据
     tableDataValue: {
-      type: String,
-      default: ''
+      type: Object,
+      default: {}
     },//单元格内容
     flg: {
       type: String,
       default: ''
     },//标志
+    urlObj:{},//url地址参数对象
+    resType:{
+      type: String,
+      default: ''
+    },//资源类型
   },
   data() {
     return {
@@ -136,31 +151,16 @@ export default {
       dialogName: '',
       // trendSrc:'',//性能走势图地址
       // pressingVisible:'',
-      pressingValue:'',
-      strategyData: [{
-        label:'策略一',
-        value:'001'
-      }],//告警策略数据
+      pressingValue:'',//压制次数
+      ignoreCnt:'',
+      strategyData: [],//告警策略数据
       strategyValue:'',//告警策略值
-      alarmListData:[{
-        label:'告警列表一',
-        value:'001'
-      },{
-        label:'告警列表二',
-        value:'002'
-      },],//告警列表数据
+      alarmListData:[],//告警列表数据
       alarmListValue:[],//告警列表值
-
+      trendSrc:'',//性能趋势图地址
     }
   },
   watch: {
-    trendSrc: {
-      handler(val) {
-        console.log("trendSrc",val)
-
-      },
-      deep: true
-    },
     tableName:{
       handler(val){
         console.log("titlename",val)
@@ -168,8 +168,20 @@ export default {
       deep:true
     }
   },
+  computed: {
+    //获取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;
+    }
+  },
   mounted() {
-
   },
   methods: {
     //表格下探关闭
@@ -181,14 +193,33 @@ export default {
       this.dialogVisible=false;
     },
     okFunc(){
-      this.dialogVisible=false;
+      if(this.dialogName=='filter_sheet_indicator'){
+        //保存设置单指标过滤
+        this.setKpiFilter(true);
+        this.dialogVisible=false;
+      }else if(this.dialogName=='filter_multiple_indicators'){
+        //保存设置多指标过滤
+        this.setKpiFilter(false);
+        this.dialogVisible=false;
+      }else if(this.dialogName=='alarm_setting'){
+        //保存告警设置
+        this.alarmSetSave();
+      }else if(this.dialogName=='pressing_times'){
+        //保存压制次数
+        this.setKpiPressTimes();
+      }
+      // this.dialogVisible=false;
+
     },
     //表格下探
-    pressingDialog(itemMenu,value,flg){
-      this.pressingValue=value;
+    pressingDialog(itemMenu,tableDataValue,tableDataValueHead,flg){
+      this.pressingValue=tableDataValue;
+      let kpiId=tableDataValue.kpiId;
       let styleStr='width: 300px;height: 200px;min-height: 200px;overflow: hidden;'
+      let isDialog=true;
       if(itemMenu.type=='alarm_setting'){
         this.widthStyle='width:70%;';
+        this.getAlarmPolicyData(kpiId)
 
       }else if(itemMenu.type=='filter_sheet_indicator'){
         this.widthStyle=styleStr;
@@ -198,16 +229,23 @@ export default {
 
       }else if(itemMenu.type=='performance_trends'){
         this.widthStyle='';
+        this.setTrend(tableDataValueHead);
 
       }else if(itemMenu.type=='pressing_times'){
-        this.widthStyle=styleStr;
+        this.widthStyle='width:400px;height: 200px;min-height: 200px;overflow: hidden;';
+        //获取压制次数
+        this.getKpiPressTimesData(tableDataValue);
 
       }else if(itemMenu.type=='include_capacity_forecast'){
         this.widthStyle=styleStr;
+        isDialog=false;
+        this.caAdd();
 
       }
 
-      this.setDialog(itemMenu.type,flg);
+      if(isDialog){
+        this.setDialog(itemMenu.type,flg);
+      }
 
       this.closePopoverMenu();
 
@@ -232,6 +270,162 @@ export default {
 
       this.dialogName=name;
     },
+    //设置指标过滤,isOne true单指标过滤，false多指标过滤
+    async setKpiFilter(isOne){
+
+      let params={
+        resId:this.getUrlToken.resId,
+        kpiId:this.pressingValue.kpiId,
+        flag:this.pressingValue.flag,
+        subFlag:this.pressingValue.kpiName,
+        isOne:isOne===true?'s':'m'
+      }
+
+      const { success } = await saveSetKpiFilter(params,this.getUrlToken);
+      if (success) {
+        Message({
+          message: '过滤设置成功',
+          type: 'success',
+          duration: 3 * 1000
+        })
+      }else{
+        Message({
+          message: '过滤设置失败',
+          type: 'error',
+          duration: 3 * 1000
+        })
+      }
+    },
+    //设置性能趋势图
+    setTrend(tableDataValueHead){
+      let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.pressingValue.kpiId+'&flag='+this.pressingValue.flag+'&warning='+this.pressingValue.isWarning
+        +'&ident='+this.pressingValue.kpiIdent
+        +'&trend='+this.pressingValue.isTrend
+        +'&unit='+tableDataValueHead.unit
+        +'&name='+this.pressingValue.kpiName + " " + tableDataValueHead.name;
+      let baseUrl=getTrendBaseUrl();
+      this.trendSrc=baseUrl+'/vue3/index.html#/vue3/pieDetailLine?'+urlParams+'&access_token='+this.getUrlToken.token;
+    },
+    //获取告警策略列表数据
+    async getAlarmPolicyData(kpiId){
+      let obj=this.getUrlToken;
+      let params={
+        kpiId:kpiId,
+        token:obj.token
+      }
+      const { code, data } = await getAlarmPolicy(params);
+      if (code != 200 && code!=0) return;
+      this.strategyData=data;
+      this.getAlarmSubscribeData(params);
+
+    },
+    //获取告警订阅列表数据
+    async getAlarmSubscribeData(params){
+      const { code, data } = await getAlarmSubscribe(params);
+      if (code != 200 && code!=0) return;
+      this.alarmListData=data;
+    },
+    //保存告警设置
+    async alarmSetSave(){
+      let kpiSubscribe=this.alarmListValue.join(',');
+      if(!this.strategyValue || !kpiSubscribe){
+        Message({
+          message: '告警策略或者告警订阅不能为空',
+          type: 'warning',
+          duration: 3 * 1000
+        });
+        return;
+      }
+      let params={
+        resId:this.getUrlToken.resId,
+        kpiId:this.pressingValue.kpiId,
+        flag:this.pressingValue.flag,
+        policyId:this.strategyValue,
+        subId:kpiSubscribe
+      }
+      const { success } = await saveKpiPolicy(params,this.getUrlToken);
+      if (success){
+        Message({
+          message: '设置成功',
+          type: 'success',
+          duration: 3 * 1000
+        });
+
+      }else{
+        Message({
+          message: '设置失败',
+          type: 'error',
+          duration: 3 * 1000
+        });
+      }
+      this.dialogVisible=false;
+
+    },
+    //获取压制次数
+    async getKpiPressTimesData(obj){
+      let params= {
+        resId: this.getUrlToken.resId,
+        kpiId: obj.kpiId,
+        flag: obj.flag,
+        subFlag: obj.kpiName
+      }
+      const { code, object } = await getKpiPressTimes(params,this.getUrlToken);
+      if (code != 200 && code!=0) return;
+      this.ignoreCnt = object?object.ignoreCnt:"";
+    },
+    //保存设置压制次数
+    async setKpiPressTimes(){
+      let params= {
+        access_token:this.getUrlToken.token,
+        resId: this.getUrlToken.resId,
+        kpiId: this.pressingValue.kpiId,
+        flag: this.pressingValue.flag,
+        subFlag: this.pressingValue.kpiName,
+        ignoreCnt:this.ignoreCnt
+      }
+      const { success } = await saveSetKpiPressTimes(params,this.getUrlToken);
+      if(success){
+        Message({
+          message: '设置成功',
+          type: 'success',
+          duration: 3 * 1000
+        });
+      }else{
+        Message({
+          message: '设置失败,请与管理员联系!',
+          type: 'error',
+          duration: 3 * 1000
+        });
+      }
+      this.dialogVisible=false;
+
+    },
+    //纳入容量预测
+    async caAdd(){
+      let params= {
+        resId: this.getUrlToken.resId,
+        kpiId: this.pressingValue.kpiId,
+        flag: this.pressingValue.flag,
+        resType: this.resType,
+      }
+      const { success } = await saveCaAdd(params,this.getUrlToken);
+      if(success){
+        Message({
+          message: '纳入容量预测成功',
+          type: 'success',
+          duration: 3 * 1000
+        });
+      }else{
+        Message({
+          message: '纳入容量预测失败!',
+          type: 'error',
+          duration: 3 * 1000
+        });
+      }
+      this.dialogVisible=false;
+
+    },
+
   }
 }
 </script>

+/*
+ * @Descripttion: 仪表盘使用率 json
+ * @version:
+ * @Author: lsq
+ * @Date: 2022-2-16
+ * @LastEditors: lsq
+ * @LastEditTime: 2022-2-16
+ */
+export const monitorGaugeRate = {
+  code: 'monitor-gauge-rate',
+  type: 'chart',
+  label: '仪表盘使用率',
+  icon: 'iconyibiaopan',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '仪表盘使用率',
+      },
+      {
+        type: 'el-input-text',
+        label: '标题名称',
+        name: 'titleName',
+        required: false,
+        placeholder: '',
+        value: 'CPU使用率',
+      },
+      {
+        type: 'el-select',
+        label: '标题位置',
+        name: 'textAlign',
+        required: false,
+        placeholder: '',
+        selectOptions: [
+          {code: 'center', name: '居中'},
+          {code: 'left', name: '左对齐'},
+          {code: 'right', name: '右对齐'},
+        ],
+        value: 'left'
+      },
+      {
+        type: 'custom-upload',
+        label: '标题图片地址',
+        name: 'imageAdress',
+        required: false,
+        placeholder: '',
+        value:  '',
+      },
+      [
+        {
+          name: "下探设置",
+          list: [
+            {
+              type: 'el-switch',
+              label: '是否有下探',
+              name: 'probeDown',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-switch',
+              label: '告警设置',
+              name: 'alarm_setting',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-switch',
+              label: '过滤单指标',
+              name: 'filter_sheet_indicator',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-switch',
+              label: '过滤多指标',
+              name: 'filter_multiple_indicators',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-switch',
+              label: '性能趋势',
+              name: 'performance_trends',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-switch',
+              label: '压制次数',
+              name: 'pressing_times',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-switch',
+              label: '纳入容量预测',
+              name: 'include_capacity_forecast',
+              required: false,
+              placeholder: '',
+              value: true
+            }
+          ]
+        },
+      ],
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      [
+        {
+          name: "圆环设置",
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'ringShow',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '圆环宽度',
+              name: 'pieWeight',
+              require: false,
+              placeholder: '',
+              value: 10,
+            },
+          ]
+        },
+        {
+          name: '0%~30%渐变色',
+          list: [
+            {
+              type: 'vue-color',
+              label: '0处颜色',
+              name: 'color30p0',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 237, 3,0.1)'
+            },
+            {
+              type: 'vue-color',
+              label: '0.5处颜色',
+              name: 'color30p5',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 237, 3,0.6)'
+            },
+            {
+              type: 'vue-color',
+              label: '1处颜色',
+              name: 'color30p10',
+              required: false,
+              placeholder: '',
+              value: 'rgba(0, 237, 3,1)'
+            },
+          ]
+        },
+        {
+          name: '30%~70%渐变色',
+          list: [
+            {
+              type: 'vue-color',
+              label: '0处颜色',
+              name: 'color70p0',
+              required: false,
+              placeholder: '',
+              value: 'rgba(255, 184, 0,0.1)'
+            },
+            {
+              type: 'vue-color',
+              label: '0.5处颜色',
+              name: 'color70p5',
+              required: false,
+              placeholder: '',
+              value: 'rgba(255, 184, 0,0.6)'
+            },
+            {
+              type: 'vue-color',
+              label: '1处颜色',
+              name: 'color70p10',
+              required: false,
+              placeholder: '',
+              value: 'rgba(255, 184, 0,1)'
+            },
+          ]
+        },
+        {
+          name: '70%~100%渐变色',
+          list: [
+            {
+              type: 'vue-color',
+              label: '0处颜色',
+              name: 'color100p0',
+              required: false,
+              placeholder: '',
+              value: 'rgba(175, 36, 74,0.1)'
+            },
+            {
+              type: 'vue-color',
+              label: '0.5处颜色',
+              name: 'color100p5',
+              required: false,
+              placeholder: '',
+              value: 'rgba(255, 36, 74,0.6)'
+            },
+            {
+              type: 'vue-color',
+              label: '1处颜色',
+              name: 'color100p10',
+              required: false,
+              placeholder: '',
+              value: 'rgba(255, 36, 74,1)'
+            },
+          ]
+        },
+        {
+          name: "刻度线",
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'tickShow',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '距离',
+              name: 'tickDistance',
+              require: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-input-number',
+              label: '长度',
+              name: 'tickLength',
+              require: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'el-input-number',
+              label: '宽度',
+              name: 'tickWidth',
+              require: false,
+              placeholder: '',
+              value: 2,
+            },
+          ]
+        },
+        {
+          name: "指标线",
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'splitShow',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '距离',
+              name: 'splitDistance',
+              require: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-input-number',
+              label: '长度',
+              name: 'splitLength',
+              require: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-input-number',
+              label: '宽度',
+              name: 'splitWidth',
+              require: false,
+              placeholder: '',
+              value: 4,
+            },
+          ]
+        },
+        {
+          name: "指标",
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'labelShow',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '距离',
+              name: 'labelDistance',
+              require: false,
+              placeholder: '',
+              value: 0,
+            },
+            {
+              type: 'el-input-number',
+              label: '字号',
+              name: 'labelFontSize',
+              require: false,
+              placeholder: '',
+              value: 10,
+            },
+            {
+              type: 'vue-color',
+              label: '颜色',
+              name: 'labelColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+          ]
+        },
+        {
+          name: "数值",
+          list: [
+            {
+              type: 'vue-color',
+              label: '颜色',
+              name: 'labelColor',
+              required: false,
+              placeholder: '',
+              value: '#fff',
+            },
+            {
+              type: 'el-input-number',
+              label: '字号',
+              name: 'labelFontSize',
+              require: false,
+              placeholder: '',
+              value: 14,
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'labelFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+          ]
+        },
+      ],
+    ],
+    // 数据
+    data: [
+      {
+        type: 'el-radio-group',
+        label: '数据类型',
+        name: 'dataType',
+        require: false,
+        placeholder: '',
+        selectValue: true,
+        selectOptions: [
+          {
+            code: 'staticData',
+            name: '静态数据',
+          },
+          {
+            code: 'dynamicData',
+            name: '动态数据',
+          },
+        ],
+        value: 'staticData',
+      },
+      {
+        type: 'el-input-number',
+        label: '刷新时间(毫秒)',
+        name: 'refreshTime',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        value: 5000
+      },
+      {
+        type: 'el-button',
+        label: '静态数据',
+        name: 'staticData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'staticData',
+        value: [
+          {"num":50}
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        chartType: 'widget-text',
+        dictKey: 'TEXT_PROPERTIES',
+        relactiveDomValue: 'dynamicData',
+        value: '',
+      },
+    ],
+    // 坐标
+    position: [
+      {
+        type: 'el-input-number',
+        label: '左边距',
+        name: 'left',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '上边距',
+        name: 'top',
+        required: false,
+        placeholder: '',
+        value: 0,
+      },
+      {
+        type: 'el-input-number',
+        label: '宽度',
+        name: 'width',
+        required: false,
+        placeholder: '该容器在1920px大屏中的宽度',
+        value: 400,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 200,
+      },
+    ],
+  }
+}

@@ -63,7 +63,7 @@ export const monitorResourceStatus = {
         name: 'imageAdressHealthBg',
         required: false,
         placeholder: '',
-        value: require("../../../../../../../assets/images/healthStatus/state_bg.png"),
+        value: '',
       },
       {
         type: 'custom-upload',

@@ -39,6 +39,7 @@ import {monitorResourceStatus} from "./echartsConfigJson/monitorConfigJson/monit
 import {monitorBasicInformation} from "./echartsConfigJson/monitorConfigJson/monitor-basic-information";
 import {monitorDetailTable} from "./echartsConfigJson/monitorConfigJson/monitor-detail-table";
 import {monitorBgBorder} from "./echartsConfigJson/monitorConfigJson/monitor-bg-border";
+import {monitorGaugeRate} from "./echartsConfigJson/monitorConfigJson/monitor-gauge-rate";
 
 export const widgetTool = [
   // type=html类型的组件
@@ -72,5 +73,6 @@ export const widgetTool = [
   monitorResourceStatus,
   monitorBasicInformation,
   monitorDetailTable,
-  monitorBgBorder
+  monitorBgBorder,
+  monitorGaugeRate
 ]

@@ -17,9 +17,8 @@
           :key="index"
           :class="['padding-10',{'ascending':(sortBy==item.key && sortCaret=='ascending'),'descending':(sortBy==item.key && sortCaret=='descending')}]"
         >
-          {{ item.name }}
-<!--          <i v-if="tableFiledSort(index)" :class="['cursorClass',{'el-icon-caret-bottom':(sortBy==item.key && sortVal=='bottom'),'el-icon-caret-top':(sortBy==item.key && sortVal=='top')}]" @click="changeSort(item)"></i>-->
-          <span v-if="tableFiledSort(index)" class="caret-wrapper">
+        {{ item.name }}
+        <span v-if="tableFiledSort(index)" class="caret-wrapper">
             <i class="sort-caret ascending" @click="changeSort(item,'ascending')"></i>
             <i class="sort-caret descending" @click="changeSort(item,'descending')"></i>
           </span>
@@ -36,14 +35,13 @@
               :key="idx"
               :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
                  @mouseenter="pressingTimes(index,idx)"
-                 :ref="'headerRef'+index+'-'+idx"
-                 :data-tip="tableFiledMaxWidth('isOverflow'+index+'-'+idx,index,idx)"
+                 :data-tip="tableFiledMaxWidth('isOverflow'+index+'-'+idx,index,idx,'')"
             >
               <el-tooltip v-if="!itemChild.componentName || itemChild.componentName==1" :disabled="isEllipsis[index+'-'+idx]"  ref="elTooltip" trigger="hover" >
                 <template #content>
                   <span>{{ item[itemChild.key].kpiValue}}</span>
                 </template>
-                <span  @mouseleave=""  :ref="'isOverflow'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"
+                <span  @mouseleave=""  :ref="'isOverflow'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key].kpiValue)"
                       :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
                   {{ item[itemChild.key].kpiValue}}
                 </span>
@@ -52,9 +50,10 @@
 
               <customMenuBox ref="customMenu"  v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
                     :detailMenubox="calcDetailMenubox"
-                    :tableDataValue="item[itemChild.key].kpiValue" :flg="''" :trendSrc="trendSrc"
+                    :tableDataValue="item[itemChild.key]" :flg="''"
+                    :tableDataValueHead="itemChild"
                     :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="dialogNameStyle(item[itemChild.key])"
-
+                    :resType="resType"
                 ></customMenuBox>
             </div>
           </li>
@@ -74,10 +73,9 @@
               v-for="(item, index) in headerAll"
               :style="[headerTableStlye,tableFiledWidth(index),tableRowHeight()]"
               :key="index"
-              :class="{'ascending':(sortBy==item.key && sortCaret=='ascending'),'descending':(sortBy==item.key && sortCaret=='descending')}"
+              :class="['padding-10',{'ascending':(sortBy==item.key && sortCaret=='ascending'),'descending':(sortBy==item.key && sortCaret=='descending')}]"
             >
               {{ item.name }}
-<!--              <i v-if="tableFiledSort(index)" :class="['cursorClass',{'el-icon-caret-bottom':sortVal=='bottom','el-icon-caret-top':sortVal=='top'}]" @click="changeSort(item)"></i>-->
               <span v-if="tableFiledSort(index)" class="caret-wrapper">
                 <i class="sort-caret ascending" @click="changeSort(item,'ascending')"></i>
                 <i class="sort-caret descending" @click="changeSort(item,'descending')"></i>
@@ -90,20 +88,37 @@
               <li v-for="(item, index) in listAll" :key="index" :style="tableRowHeight()" @mouseenter="isHover=true" @mouseleave="isHover=false" >
                 <div class="infoList-flex" :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(index),tableRowHeight(),serialNumber]">
                   {{ index+1 }}</div>
-                <div class="infoList-flex"
+                <div class="infoList-flex text-overflow padding-10"
                      v-for="(itemChild, idx) in headerAll"
                      :key="idx"
                      :style="[bodyTableStyle, bodyTable(index),tableFiledWidth(idx),tableRowHeight()]"
                      @mouseenter="pressingTimes(index,idx)"
+                     :data-tip="tableFiledMaxWidth('isOverflow1'+index+'-'+idx,index,idx,'more')"
                 >
-                    <span  @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"
+                  <el-tooltip v-if="!itemChild.componentName || itemChild.componentName==1" :disabled="isEllipsisMore[index+'-'+idx]"  ref="elTooltip" trigger="hover" >
+                    <template #content>
+                      <span>{{ item[itemChild.key].kpiValue}}</span>
+                    </template>
+                    <span  @mouseleave=""  :ref="'isOverflow1'+index+'-'+idx" :data-num="index+'-'+idx" @click="clickListName(item[itemChild.key],itemChild)" :style="colorStyle(item[itemChild.key].kpiValue)"
+                           :class="['listName','width-80','text-overflow',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
+                      {{ item[itemChild.key].kpiValue}}
+                    </span>
+                  </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'" />
+
+
+
+
+
+<!--                  <span  @click="clickListName(item[itemChild.key])" :style="colorStyle(item[itemChild.key].kpiValue)"
                            :class="['listName',{'listName-link':item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)}]">
-                      {{ item[itemChild.key]?item[itemChild.key].kpiValue:'' }}</span>
+                      {{ item[itemChild.key]?item[itemChild.key].kpiValue:'' }}</span>-->
                   <customMenuBox  v-if="pressingVisible==index+'-'+idx && item[itemChild.key] && (item[itemChild.key].kpiIdent==1 || item[itemChild.key].isWarning==1)"
                                   :detailMenubox="calcDetailMenubox"
-                                  :tableDataValue="item[itemChild.key].kpiValue" :flg="''" :trendSrc="trendSrc"
+                                  :tableDataValue="item[itemChild.key]" :flg="''"
+                                  :tableDataValueHead="itemChild"
                                   :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="dialogNameStyle(item[itemChild.key])"
-
+                                  :resType="resType"
                   ></customMenuBox>
                 </div>
               </li>
@@ -132,49 +147,17 @@
     >
       <template v-slot>
         <div  class="txtScroll-top">
-          性能趋势{{pressingValue}}
           <iframe :src="trendSrc" class="layadmin-iframe"  style="height: 99.5%!important;width: 100%;"/>
         </div>
       </template>
     </customDialog>
-<!--    <div class="dialog-div" v-if="tableVisible" :style="heightStyle">
-      <div class="dialog-div-content" :style="marginStyle" >
-        <div class="dialog-div-title title-flex-between"><span>{{tableStyle.tableName}}</span> <span class="dialog-close" @click="tableVisible = false">X</span></div>
-
-      </div>
-    </div>-->
-<!--    <customDialog :dialogVisible="dialogVisible" :heightStyle="heightStyle" :marginStyle="marginStyle" :widthStyle="widthStyle" :title-name="tableStyle.tableName"
-      :showFooter="true" :showCancelBtn="true" :showOkBtn="true" @hideDialog="hideDialog" @okFunc="okFunc"
-    >
-      <template v-slot>
-        <div v-if="dialogName=='alarm_setting'" class="txtScroll-top">
-          告警设置{{pressingValue}}
-        </div>
-        <div v-if="dialogName=='filter_sheet_indicator'" class="txtScroll-top">
-          过滤单指标{{pressingValue}}
-        </div>
-        <div v-if="dialogName=='filter_multiple_indicators'" class="txtScroll-top">
-          过滤多指标{{pressingValue}}
-        </div>
-        <div v-if="dialogName=='performance_trends'" class="txtScroll-top">
-          性能趋势{{pressingValue}}
-          <iframe :src="trendSrc" class="layadmin-iframe"  style="height: 99.5%!important;width: 100%;"/>
-        </div>
-        <div v-if="dialogName=='pressing_times'" class="txtScroll-top">
-          压制次数{{pressingValue}}
-        </div>
-        <div v-if="dialogName=='include_capacity_forecast'" class="txtScroll-top">
-          纳入容量预测{{pressingValue}}
-        </div>
-      </template>
-    </customDialog>-->
 
   </div>
 </template>
 <script>
 import vue from "vue";
 import VueSuperSlide from "vue-superslide";
-import {getDetailTableData,getDetailTableDataNoPage} from "@/api/platform";
+import {getDetailTableData,getDetailTableDataNoPage,getResType,getTrendBaseUrl} from "@/api/platform";
 import customDialog from "../../designerComponents/customDialog";
 import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
 import textToImage from "../../designerComponents/textToImage";//文字转图片
@@ -219,38 +202,6 @@ export default {
       optionsData: {},
       pressingVisible:'',
       isHover:false,
-      /*detailMenubox:[
-        {
-          name:'告警设置',
-          type:'alarm_setting',
-          isDisplay:true
-        },
-        {
-          name:'过滤单指标',
-          type:'filter_sheet_indicator',
-          isDisplay:true
-        },
-        {
-          name:'过滤多指标',
-          type:'filter_multiple_indicators',
-          isDisplay:true
-        },
-        {
-          name:'性能趋势',
-          type:'performance_trends',
-          isDisplay:true
-        },
-        {
-          name:'压制次数',
-          type:'pressing_times',
-          isDisplay:true
-        },
-        {
-          name:'纳入容量预测',
-          type:'include_capacity_forecast',
-          isDisplay:true
-        }
-      ],*/
       dialogName:'',//表格名称
       pressingValue:'',//表格下探值
       trendSrc:'',//性能走势图地址
@@ -261,7 +212,9 @@ export default {
       sortBy:'',//排序参数
       sortCaret:'',//正序倒序
       isEllipsis:[],//是否文字超出
+      isEllipsisMore:[],//是否文字超出
       componentName:'',//组件名称
+      resType:'',//资源类型
     };
   },
   computed: {
@@ -367,6 +320,17 @@ export default {
         })
       }
       return detailMenuBox;
+    },
+    //获取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;
     }
   },
   watch: {
@@ -376,15 +340,18 @@ export default {
         this.optionsPosition = val.position;
         this.optionsData = val.data;
         this.initData();
+        this.getResTypeData();
       },
       deep: true
     }
   },
+
   mounted() {
     this.optionsSetUp = this.value.setup;
     this.optionsPosition = this.value.position;
     this.optionsData = this.value.data;
     this.initData();
+    this.getResTypeData();
   },
   methods: {
     initData() {
@@ -557,28 +524,27 @@ export default {
       // this.setDialog('table');
       this.tableVisible=true;
     },
-    /*//打开弹框
-    setDialog(name,flg){
-
-      this.dialogVisible=true;
-
-      this.dialogName=name;
-    },*/
     //点击表格内容名称事件
-    clickListName(obj){
+    clickListName(obj,tableDataValueHead){
       if(obj.kpiIdent==1 || obj.isWarning==1){
-        let trendsParams=obj;
-        // 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'
-        this.trendSrc='https://192.168.0.69:8088/#/user/login/redirect=%2F';
         this.widthStyle='';
-        // this.setDialog('performance_trends')
-        this.pressingValue=obj.kpiValue;
+        this.pressingValue=obj;
         this.dialogNameStyle(obj)
-
+        this.setTrend(tableDataValueHead)
         this.trendVisible=true;
       }
 
     },
+    //设置性能趋势图
+    setTrend(tableDataValueHead){
+      let urlParams='resId='+this.getUrlToken.resId+'&kpiId='+this.pressingValue.kpiId+'&flag='+this.pressingValue.flag+'&warning='+this.pressingValue.isWarning
+        +'&ident='+this.pressingValue.kpiIdent
+        +'&trend='+this.pressingValue.isTrend
+        +'&unit='+tableDataValueHead.unit
+        +'&name='+this.pressingValue.kpiName + " " + tableDataValueHead.name;
+      let baseUrl=getTrendBaseUrl();
+      this.trendSrc=baseUrl+'/vue3/index.html#/vue3/pieDetailLine?'+urlParams;
+    },
     //End LSQ 2022/1/20 10:23 TODO
     handlerHead() {
       const head = this.optionsSetUp.dynamicAddTable;
@@ -652,14 +618,20 @@ export default {
       return styleJson
     },
     //列最大宽
-    tableFiledMaxWidth(obj,index,idx){
+    tableFiledMaxWidth(obj,index,idx,flg){
       let that=this;
        this.$nextTick(() => {
           let isOverflow=that.$refs[obj];
-          if(isOverflow && isOverflow[0]){
+         if(isOverflow && isOverflow[0]){
             let cWidth = isOverflow[0].parentElement.scrollWidth;
             let sWidth = isOverflow[0].scrollWidth;
-            that.isEllipsis[index+'-'+idx]=!((sWidth+10) > cWidth);
+            if(flg=='more'){
+              that.isEllipsisMore[index+'-'+idx]=!((sWidth+10) > cWidth);
+
+            }else {
+              that.isEllipsis[index+'-'+idx]=!((sWidth+10) > cWidth);
+
+            }
           }
 
       })
@@ -704,41 +676,7 @@ export default {
         return value1 - value2;
       }
     },
-   /* //表格下探
-    pressingDialog(itemMenu,value,flg){
-      this.pressingValue=value;
-      let styleStr='width: 300px;height: 200px;min-height: 200px;overflow: hidden;'
-      if(itemMenu.type=='alarm_setting'){
-        this.widthStyle='width:70%;';
-
-      }else if(itemMenu.type=='filter_sheet_indicator'){
-        this.widthStyle=styleStr;
-
-      }else if(itemMenu.type=='filter_multiple_indicators'){
-        this.widthStyle=styleStr;
-
-      }else if(itemMenu.type=='performance_trends'){
-        this.widthStyle='';
-
-      }else if(itemMenu.type=='pressing_times'){
-        this.widthStyle=styleStr;
-
-      }else if(itemMenu.type=='include_capacity_forecast'){
-        this.widthStyle=styleStr;
 
-      }
-
-      this.setDialog(itemMenu.type,flg);
-
-      let key=this.$refs.popoverMenu;
-      if(key && key.length>0){
-        key.map(item=>{
-          item.showPopper=false
-        })
-      }
-      // this.$refs.popoverMenu.showPopper = false;
-
-    },*/
     pressingTimes(index,idx){
       this.pressingVisible=index+'-'+idx;
     },
@@ -816,7 +754,7 @@ export default {
         dialogName = tableStyleSetup.tableName + kpiName;
 
       } else {
-        let nameResType = tableStyleSetup.nameResType ? obj.resType ? obj.resType + '|' : '' : '';
+        let nameResType = tableStyleSetup.nameResType ? this.resType ? this.resType + '|' : '' : '';
         let nameIPAddress = tableStyleSetup.nameIPAddress ? obj.ipAddr ? obj.ipAddr + '|' : '' : '';
         let nameResName = tableStyleSetup.nameResName ? obj.resName ? obj.resName + '|' : '' : '';
         let nameKpiName = tableStyleSetup.nameKpiName ? obj.kpiName ? obj.kpiName + '|' : '' : '';
@@ -838,8 +776,19 @@ export default {
           kpiIdArr.push(item.key)
         }
       })
-      console.log("kpiIdArr",kpiIdArr)
-    }
+    },
+    //获取资源类型
+    async getResTypeData(){
+      let params= {
+        resId: this.getUrlToken.resId,
+      }
+      const { success,obj } = await getResType(params,this.getUrlToken);
+      if (success && obj && obj.bean && obj.bean.resType){
+        this.resType=obj.bean.resType;
+      }
+
+    },
+
   }
 };
 </script>

+<template>
+  <div :style="styleObj" @click="isDisplay=false;">
+    <div class="title-div flex-start" :style="styleColor"  @mouseenter="isDisplay=true;">
+      <img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress"  alt="">
+      <div v-if="imgStyle.titleName"  class="title-name">{{imgStyle.titleName}}</div>
+      <customMenuBox ref="customMenu"  v-if="imgStyle.probeDown && isDisplay"
+                     :detailMenubox="calcDetailMenubox"
+                     :tableDataValue="tableDataValue" :flg="''"
+                     :tableDataValueHead="tableDataValueHead"
+                     :heightStyle="heightStyle" :marginStyle="marginStyle" :tableName="imgStyle.titleName"
+                     :resType="resType"
+      ></customMenuBox>
+
+    </div>
+    <v-chart :options="options" autoresize/>
+  </div>
+</template>
+
+<script>
+import echarts from "echarts";
+import customMenuBox from "../../designerComponents/customMenuBox";//下探组件
+export default {
+  name: "gaugeRate",
+  components: {customMenuBox},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      isDisplay:false,
+      tableDataValue: {},
+      tableDataValueHead: {},
+      heightStyle:'',
+      marginStyle:'',
+      resType:'',
+      options: {
+        series: [
+          {
+            type: 'gauge',
+            z: 100,
+            axisLine: {
+              lineStyle: {
+                width: 10,
+                color: [
+                  [
+                    0.3,
+                    new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                      {
+                        offset: 0,
+                        color: 'rgba(0, 237, 3,0.1)',
+                      },
+                      {
+                        offset: 0.5,
+                        color: 'rgba(0, 237, 3,0.6)',
+                      },
+                      {
+                        offset: 1,
+                        color: 'rgba(0, 237, 3,1)',
+                      },
+                    ]),
+                  ],
+                  [
+                    0.7,
+                    new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                      {
+                        offset: 0,
+                        color: 'rgba(255, 184, 0,0.1)',
+                      },
+                      {
+                        offset: 0.5,
+                        color: 'rgba(255, 184, 0,0.6)',
+                      },
+                      {
+                        offset: 1,
+                        color: 'rgba(255, 184, 0,1)',
+                      },
+                    ]),
+                  ],
+                  [
+                    1,
+                    new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                      {
+                        offset: 0,
+                        color: 'rgba(175, 36, 74,0.1)',
+                      },
+                      {
+                        offset: 0.5,
+                        color: 'rgba(255, 36, 74,0.6)',
+                      },
+                      {
+                        offset: 1,
+                        color: 'rgba(255, 36, 74,1)',
+                      },
+                    ]),
+                  ],
+                ],
+              },
+            },
+            pointer: {
+              itemStyle: {
+                color: 'auto',
+              },
+            },
+            axisTick: {
+              show: true,
+              distance: 0,
+              length: 10,
+              lineStyle: {
+                color: 'auto',
+                width: 2,
+              },
+            },
+            splitLine: {
+              show: true,
+              distance: 0,
+              length: 14,
+              lineStyle: {
+                color: 'auto',
+                width: 4,
+              },
+            },
+            axisLabel: {
+              show: true,
+              color: 'white',
+              distance: 2,
+              fontSize: 10,
+            },
+            detail: {
+              valueAnimation: true,
+              formatter: '{value} %',
+              color: 'white',
+              fontSize: 18,
+            },
+            data: [
+              {
+                value: 70,
+              },
+            ],
+          },
+        ],
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsCollapse: {}, // 图标属性
+      optionsSetup: {}
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.background
+      };
+    },
+    styleColor() {
+      return {
+        "text-align": this.optionsSetup.textAlign,
+
+      };
+    },
+    imgStyle() {
+      return {
+        imageAdress: this.optionsSetup.imageAdress,
+        titleName:this.optionsSetup.titleName,
+        probeDown:this.optionsSetup.probeDown
+      };
+    },
+    //表格下探列表
+    calcDetailMenubox(){
+      const menubox = this.optionsSetup;
+      let detailMenuBox=[];
+      if(menubox.alarm_setting){
+        detailMenuBox.push({
+          name:'告警设置',
+          type:'alarm_setting'
+        })
+      }
+      if(menubox.filter_sheet_indicator){
+        detailMenuBox.push({
+          name:'过滤单指标',
+          type:'filter_sheet_indicator'
+        })
+      }
+      if(menubox.filter_multiple_indicators){
+        detailMenuBox.push({
+          name:'过滤多指标',
+          type:'filter_multiple_indicators'
+        })
+      }
+      if(menubox.performance_trends){
+        detailMenuBox.push({
+          name:'性能趋势',
+          type:'performance_trends'
+        })
+      }
+      if(menubox.pressing_times){
+        detailMenuBox.push({
+          name:'压制次数',
+          type:'pressing_times'
+        })
+      }
+      if(menubox.include_capacity_forecast){
+        detailMenuBox.push({
+          name:'纳入容量预测',
+          type:'include_capacity_forecast'
+        })
+      }
+      return detailMenuBox;
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position; // 位置
+        this.optionsData = val.data; // 数据
+        this.optionsCollapse = val.collapse; // 折叠数据
+        this.optionsSetup = val.setup; // 样式
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsCollapse = this.value.collapse;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    editorOptions() {
+      this.setOptions()
+      this.setOptionsData()
+    },
+    setOptions() {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      if (series[0].type == 'gauge') {
+        const axisLine = {
+          show: optionsSetup.ringShow,
+          lineStyle: {
+            width: optionsSetup.pieWeight,
+            color: [
+              [
+                0.3,
+                new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                  {
+                    offset: 0,
+                    color: optionsSetup.color30p0,
+                  },
+                  {
+                    offset: 0.5,
+                    color: optionsSetup.color30p5,
+                  },
+                  {
+                    offset: 1,
+                    color: optionsSetup.color30p10,
+                  },
+                ]),
+              ],
+              [
+                0.7,
+                new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                  {
+                    offset: 0,
+                    color: optionsSetup.color70p0,
+                  },
+                  {
+                    offset: 0.5,
+                    color: optionsSetup.color70p5,
+                  },
+                  {
+                    offset: 1,
+                    color: optionsSetup.color70p10,
+                  },
+                ]),
+              ],
+              [
+                1,
+                new echarts.graphic.LinearGradient(0, 1, 1, 0, [
+                  {
+                    offset: 0,
+                    color: optionsSetup.color100p0,
+                  },
+                  {
+                    offset: 0.5,
+                    color: optionsSetup.color100p5,
+                  },
+                  {
+                    offset: 1,
+                    color: optionsSetup.color100p10,
+                  },
+                ]),
+              ],
+            ],
+          },
+        }
+        const axisTick = {
+          show: optionsSetup.tickShow,
+          distance: optionsSetup.tickDistance,
+          length: optionsSetup.tickLength,
+          lineStyle: {
+            color: 'auto',
+            width: optionsSetup.tickWidth,
+          },
+        }
+        const splitLine = {
+          show: optionsSetup.splitShow,
+          distance: optionsSetup.splitDistance,
+          length: optionsSetup.splitLength,
+          lineStyle: {
+            color: 'auto',
+            width: optionsSetup.splitWidth,
+          },
+        }
+        series[0].axisLine = axisLine
+        series[0].axisTick = axisTick
+        series[0].splitLine = splitLine
+      }
+    },
+    setOptionsData() {
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
+    },
+    staticDataFn(val) {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const num = val[0]['num'];
+      const data = [
+        {
+          value: num
+        }
+      ]
+      const detail = {
+        valueAnimation: true,
+        formatter: '{value} %',
+        color: optionsSetup.labelColor,
+        fontSize: optionsSetup.labelFontSize,
+        fontWeight: optionsSetup.labelFontWeight,
+      }
+      series[0].data = data
+      series[0].detail = detail
+    },
+    dynamicDataFn(val, refreshTime) {
+      if (!val) return;
+      if (this.ispreview) {
+        this.getEchartData(val);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(val);
+        }, refreshTime);
+      } else {
+        this.getEchartData(val);
+      }
+    },
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        this.renderingFn(res);
+      });
+    },
+    renderingFn(val) {
+      const optionsSetup = this.optionsSetup;
+      const series = this.options.series;
+      const data = [
+        {
+          value: val[0].value
+        }
+      ]
+      const detail = {
+        valueAnimation: true,
+        formatter: '{value} %',
+        color: optionsSetup.labelColor,
+        fontSize: optionsSetup.labelFontSize,
+        fontWeight: optionsSetup.labelFontWeight,
+      }
+      series[0].data = data
+      series[0].detail = detail
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.title-div{
+  text-align: left;
+  padding:10px;
+}
+.title-name{
+  color:rgb(30,159,255);
+  font-size: 16px;
+  font-weight: bold;
+}
+.flex-start{
+  display: flex;
+  justify-content: start;
+  align-items: center;
+}
+</style>

@@ -5,7 +5,7 @@
       <img v-if="!imgStyle.titleName" :src="imgStyle.imageAdress" :style="imgStyle" alt="">
       <div v-if="imgStyle.titleName"  class="title-name">{{imgStyle.titleName}}</div>
     </div>
-    <el-row class="padding-top-30">
+    <el-row class="padding-top-30" v-if="hackReset">
 <!--      <el-col class="flex-around" :span="imgStyle.spanNum" v-for="item in healthDataComputed" :key="item.id">-->
       <el-col class="flex-around" :span="24" >
         <div class="health-service">
@@ -16,17 +16,20 @@
           <div class="health-num-item">
             <span class="health-color"></span>
             <span class="health-num-title">严重告警：</span>
-            <span class="health-num">{{ healthNumData.yz }}</span>
+            <span class="health-num" v-if="healthNumData.yz && healthNumData.yz!='null'">{{ healthNumData.yz }}</span>
+            <span class="health-num" v-if="!healthNumData.yz || healthNumData.yz=='null'">0</span>
           </div>
           <div class="health-num-item">
             <span class="health-color"></span>
             <span class="health-num-title">重要告警：</span>
-            <span class="health-num">{{ healthNumData.zy }}</span>
+            <span class="health-num" v-if="healthNumData.zy && healthNumData.zy!='null'">{{ healthNumData.zy }}</span>
+            <span class="health-num" v-if="!healthNumData.zy || healthNumData.zy=='null'">0</span>
           </div>
           <div class="health-num-item">
             <span class="health-color"></span>
             <span class="health-num-title">一般告警：</span>
-            <span class="health-num">{{ healthNumData.yb }}</span>
+            <span class="health-num" v-if="healthNumData.yb && healthNumData.yb!='null'">{{ healthNumData.yb }}</span>
+            <span class="health-num" v-if="!healthNumData.yb || healthNumData.yb=='null'">0</span>
           </div>
         </div>
       </el-col>
@@ -44,15 +47,16 @@ export default {
   name: "resourceStatus",
   data() {
     return {
+      hackReset: true,
       options: {},
       spanNum:24,//col的span的个数
       healthStatusUrl:'',
-      healthNumData:{
+      healthNumData:{/*
         icon: "worse",
-        state: "量",
+        state: "良",
         yb: "0",
         yz: "0",
-        zy: "1"
+        zy: "1"*/
       },//资源状态告警个数数据 good worse worst
       healthData:[
 
@@ -123,21 +127,13 @@ export default {
     },
     imgStyleHealth() {
       return {
-        imageAdressHealthBg:this.transStyle.imageAdressHealthBg?this.transStyle.imageAdressHealthBg:require("../../../../../../assets/images/healthStatus/state_bg.png"),
+        imageAdressHealthBg:this.transStyle.imageAdressHealthBg,
         imageAdressHealthGood:this.transStyle.imageAdressHealthGood?this.transStyle.imageAdressHealthGood:require("../../../../../../assets/images/healthStatus/state_01.png"),
         imageAdressHealthWorse:this.transStyle.imageAdressHealthWorse?this.transStyle.imageAdressHealthWorse:require("../../../../../../assets/images/healthStatus/state_02.png"),
         imageAdressHealthBad:this.transStyle.imageAdressHealthBad?this.transStyle.imageAdressHealthBad:require("../../../../../../assets/images/healthStatus/state_03.png"),
         dataNum:this.transStyle.dataNum?this.transStyle.dataNum:'3'
       };
     },
-   /* healthDataComputed(){
-      let healthData=this.healthData;
-      healthData=this.initImageUrl();
-      if(this.imgStyleHealth.dataNum){
-        healthData=healthData.slice(0,this.imgStyleHealth.dataNum);
-      }
-      return healthData;
-    }*/
   },
   watch: {
     value: {
@@ -146,10 +142,9 @@ export default {
         this.optionsSetUp = val.setup;
         this.optionsPosition = val.position;
         this.optionsData=val.data;
+        // this.init();
         this.handlerData();
-
-          this.initImageUrl();
-          this.getHealthData();
+        this.initImageUrl();
 
       },
       deep: true
@@ -161,10 +156,9 @@ export default {
     this.optionsSetUp = this.value.setup;
     this.optionsPosition = this.value.position;
     this.optionsData = this.value.data;
+    // this.init();
     this.handlerData();
-
-      this.initImageUrl();
-      this.getHealthData();
+    this.initImageUrl();
   },
   methods: {
 
@@ -188,8 +182,12 @@ export default {
     },
     async init(){
       const reportCode = this.$route.query.reportCode;
-      const { code, data } = await getData(reportCode);
-      if (code != 200) return;
+      console.log("aaa",this.$route.query)
+      let locationUrl=this.$route.query;
+      let resId=locationUrl.resId;
+      let token=locationUrl.access_token;
+      // const { code, data } = await getData(reportCode);
+      // if (code != 200) return;
     },
     handlerData() {
       const resData = this.optionsData;
@@ -200,28 +198,39 @@ export default {
     },
     handlerStaticData(data) {
       this.healthNumData = data;
+      this.initImageUrl();
     },
     handlerDynamicData(data, refreshTime) {
       if (!data) return;
-      /* if (this.ispreview) {
+      console.log("资源",data)
+       if (this.ispreview) {
          this.getEchartData(data);
          this.flagInter = setInterval(() => {
            this.getEchartData(data);
          }, refreshTime);
        } else {
          this.getEchartData(data);
-       }*/
+       }
     },
-    async getHealthData(){
-
+    getEchartData(val) {
+      const data = this.queryEchartsData(val);
+      data.then(res => {
+        console.log("def",res)
+        if(res && res[0].code==0){
+          this.healthNumData = res[0].data;
 
-      /*
-            const { code, data } = await getHealth();
-            if (code != 200) return;
-            this.healthNumData=data;
-            console.log("health",data)*/
+        }
+        this.hackResetFun();
+        this.initImageUrl();
+      });
+    },
+    // vue hack 之强制刷新组件
+    hackResetFun() {
+      this.hackReset = false;
+      this.$nextTick(() => {
+        this.hackReset = true;
+      });
     },
-
   },
 }
 </script>

@@ -42,6 +42,7 @@ import monitorResourceStatus from "./monitor/resourceStatus";
 import monitorBasicInformation from "./monitor/basicInformation";
 import monitorDetailTable from "./monitor/detailTable";
 import monitorBgBorder from "./monitor/bgBorder";
+import monitorGaugeRate from "./monitor/gaugeRate";
 
 export default {
   name: "WidgetTemp",
@@ -76,7 +77,8 @@ export default {
     monitorResourceStatus,
     monitorBasicInformation,
     monitorDetailTable,
-    monitorBgBorder
+    monitorBgBorder,
+    monitorGaugeRate
   },
   model: {
     prop: "value",

@@ -53,6 +53,7 @@ import monitorResourceStatus from "./monitor/resourceStatus";
 import monitorBasicInformation from "./monitor/basicInformation";
 import monitorDetailTable from "./monitor/detailTable";
 import monitorBgBorder from "./monitor/bgBorder";
+import monitorGaugeRate from "./monitor/gaugeRate";
 
 
 export default {
@@ -87,7 +88,8 @@ export default {
     monitorResourceStatus,
     monitorBasicInformation,
     monitorDetailTable,
-    monitorBgBorder
+    monitorBgBorder,
+    monitorGaugeRate
   },
   model: {
     prop: "value",