资产组件引入到拖拽页面

+import request from '@/utils/request'
+import { getShareToken, getToken } from "@/utils/auth";
+import axios from 'axios';
+//自监控平台接口数据联调 // Start LSQ 2022/1/13 10:52 TODO
+export function getData(data) {
+  return request({
+    url: 'reportDashboard/getData',
+    method: 'post',
+    headers: { 'Share-Token': getShareToken(), 'Authorization': getToken() },
+    data,
+  })
+}
+export function queryAllDataSet(data) {
+  return request({
+    url: 'dataSet/queryAllDataSet',
+    method: 'get',
+
+  })
+}

+/*
+* 健康度情况json
+* author lsq
+* 2022/01/13
+* */
+export const monitorHealthStatus = {
+  code: 'monitor-health-status',
+  type: 'html',
+  label: '健康度',
+  icon: 'iconbiaoge',
+  options: {
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '健康度',
+      },
+      {
+        type: 'custom-upload',
+        label: '标题图片地址',
+        name: 'imageAdress',
+        required: false,
+        placeholder: '',
+        value:  require("../../../../../../../assets/images/healthStatus/title-asset.png"),
+      },
+      {
+        type: 'el-input-number',
+        label: '显示数据数',
+        name: 'dataNum',
+        required: false,
+        placeholder: '',
+        value: '3'
+      },
+      {
+        type: 'custom-upload',
+        label: '状态默认图片地址',
+        name: 'imageAdressHealthBg',
+        required: false,
+        placeholder: '',
+        value: require("../../../../../../../assets/images/healthStatus/state_bg.png"),
+      },
+      {
+        type: 'custom-upload',
+        label: '优-图片地址',
+        name: 'imageAdressHealthGood',
+        required: false,
+        placeholder: '',
+        value: require("../../../../../../../assets/images/healthStatus/state_01.png"),
+      },
+      {
+        type: 'custom-upload',
+        label: '良-图片地址',
+        name: 'imageAdressHealthWorse',
+        required: false,
+        placeholder: '',
+        value:require("../../../../../../../assets/images/healthStatus/state_02.png"),
+      },
+      {
+        type: 'custom-upload',
+        label: '差-图片地址',
+        name: 'imageAdressHealthBad',
+        required: false,
+        placeholder: '',
+        value: require("../../../../../../../assets/images/healthStatus/state_03.png"),
+      },
+      {
+        type: 'el-select',
+        label: '标题图片位置',
+        name: 'textAlign',
+        required: false,
+        placeholder: '',
+        selectOptions: [
+          {code: 'center', name: '居中'},
+          {code: 'left', name: '左对齐'},
+          {code: 'right', name: '右对齐'},
+        ],
+        value: 'left'
+      },
+      {
+        type: 'el-input-number',
+        label: '字体大小',
+        name: 'fontSize',
+        required: false,
+        placeholder: '',
+        value: '16'
+      }
+    ],
+    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: 30000
+      },
+      {
+        type: 'el-button',
+        label: '静态数据',
+        name: 'staticData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'staticData',
+        value: [
+          {
+            name:'服务器',
+            id:'001',
+            healthStatus: 1,
+            healthStatusUrl:''
+          },
+          {
+            name:'应用',
+            id:'002',
+            healthStatus: 1,
+            healthStatusUrl:''
+          },
+          /*{
+            name:'日志',
+            id:'003',
+            healthStatus: 1,
+            healthStatusUrl:''
+          }*/
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        relactiveDomValue: 'dynamicData',
+        chartType: 'widget-table',
+        dictKey: 'TEXT_PROPERTIES', //表格的暂不起作用
+        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: 600,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 300,
+      },
+    ]
+  }
+}

@@ -34,6 +34,8 @@ import {widgetBarCompare} from "./echartsConfigJson/widget-bar-compare"
 import {widgetLineCompare} from "./echartsConfigJson/widget-line-compare"
 import {widgetLineCompare} from "./echartsConfigJson/widget-line-compare"
 import {widgetDecoratePie} from "./echartsConfigJson/widget-decorate-pie";
 import {widgetDecoratePie} from "./echartsConfigJson/widget-decorate-pie";
 
 
+import {monitorHealthStatus} from "./echartsConfigJson/monitorConfigJson/monitor-health-status";
+
 export const widgetTool = [
 export const widgetTool = [
   // type=html类型的组件
   // type=html类型的组件
   widgetText,
   widgetText,
@@ -61,5 +63,6 @@ export const widgetTool = [
   widgetLineStack,
   widgetLineStack,
   widgetBarCompare,
   widgetBarCompare,
   widgetLineCompare,
   widgetLineCompare,
-  widgetDecoratePie
+  widgetDecoratePie,
+  monitorHealthStatus,
 ]
 ]

+<template>
+  <div class="healthStatus-container" :style="styleObj">
+<!--  <div class="healthStatus-container">-->
+    <div class="title-div" :style="styleColor">
+      <img :src="imgStyle.imageAdress" :style="imgStyle" alt="">
+    </div>
+    <el-row>
+      <el-col :span="8" v-for="item in healthDataComputed" :key="item.id">
+        <div class="health-service">
+          <span class="health-name">{{item.name}}</span>
+          <img v-if="item.healthStatusUrl" :src="item.healthStatusUrl" alt="">
+        </div>
+      </el-col>
+
+    </el-row>
+  </div>
+</template>
+
+<script>
+import {
+  getData
+} from "@/api/platform";
+export default {
+  name: "healthStatus",
+  data() {
+    return {
+      options: {},
+      healthData:[
+        /*{
+          name:'服务器',
+          id:'001',
+          healthStatus: 1,
+          healthStatusUrl:''
+        },
+        {
+          name:'应用',
+          healthStatus: 2,
+          id:'002',
+          healthStatusUrl:''
+        },{
+          name:'日和',
+          id:'003',
+          healthStatus: 3,
+          healthStatusUrl:''
+        },
+        {
+          name:'日志',
+          id:'004',
+          healthStatus: 3,
+          healthStatusUrl:''
+        }*/
+      ],
+      optionsSetUp: {},
+      optionsData:{}
+    }
+  },
+  components: {},
+  props: {
+    value: Object,
+     ispreview: Boolean
+  },
+  computed: {
+    transStyle() {
+      return this.objToOne(this.options);
+    },
+     styleObj() {
+        const allStyle = this.optionsSetUp;
+        return {
+          position: this.ispreview ? "absolute" : "static",
+          width: allStyle.width + "px",
+          height: allStyle.height + "px",
+          left: allStyle.left + "px",
+          top: allStyle.top + "px",
+          // background:this.transStyle.BgColor
+        };
+      },
+
+    styleColor() {
+      return {
+        "text-align": this.transStyle.textAlign,
+
+      };
+    },
+
+    imgStyle() {
+
+      return {
+        imageAdress: this.transStyle.imageAdress?this.transStyle.imageAdress:require("../../../../../../assets/images/healthStatus/title-asset.png"),
+
+        "border-radius": this.transStyle.borderRadius + "px",
+        opacity: this.transStyle.transparency / 100,
+      };
+    },
+    imgStyleHealth() {
+      return {
+        imageAdressHealthBg:this.transStyle.imageAdressHealthBg?this.transStyle.imageAdressHealthBg:require("../../../../../../assets/images/healthStatus/state_bg.png"),
+        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();
+      console.log("datanum",this.imgStyleHealth.dataNum)
+      if(this.imgStyleHealth.dataNum){
+        healthData=healthData.slice(0,this.imgStyleHealth.dataNum);
+      }
+
+      return healthData;
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.options = val;
+        this.optionsSetUp = val.setup;
+        this.optionsData=val.data;
+        this.handlerData();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    // this.initImageUrl();
+    this.optionsSetUp = this.value.setup;
+    this.optionsData = this.value.data;
+    this.handlerData();
+  },
+  methods: {
+    initImageUrl(){
+      console.log("len",this.healthData.length)
+      if(this.healthData && this.healthData.length<3){
+        let len=3-this.healthData.length;
+        for(let i=0;i<len;i++){
+          console.log("i",i)
+               this.healthData.push({
+                 name:'',
+                 healthStatusUrl:''
+               })
+        }
+      }
+      console.log("healthData",this.healthData)
+
+      this.healthData.map(item=>{
+        console.log("abc",this.imgStyleHealth.dataNum)
+        if(!item.healthStatusUrl){
+          item.healthStatusUrl=this.imgStyleHealth.imageAdressHealthBg;
+        }
+        if(item.healthStatus==1){
+          item.healthStatusUrl=this.imgStyleHealth.imageAdressHealthGood;
+        }else if(item.healthStatus==2){
+          item.healthStatusUrl=this.imgStyleHealth.imageAdressHealthWorse;
+        }else if(item.healthStatus==3){
+          item.healthStatusUrl=this.imgStyleHealth.imageAdressHealthBad;
+        }else{
+          item.healthStatusUrl=this.imgStyleHealth.imageAdressHealthBg;
+        }
+      })
+      return this.healthData;
+
+    },
+    async init(){
+      const reportCode = this.$route.query.reportCode;
+      const { code, data } = await getData(reportCode);
+      if (code != 200) return;
+    },
+    handlerData() {
+      const resData = this.optionsData;
+      console.log("resdata",resData)
+      resData.dataType == "staticData"
+        ? this.handlerStaticData(resData.staticData)
+        : this.handlerDynamicData(resData.dynamicData, resData.refreshTime);
+    },
+   handlerStaticData(data) {
+      this.healthData = data;
+    },
+    handlerDynamicData(data, refreshTime) {
+      if (!data) return;
+     /* if (this.ispreview) {
+        this.getEchartData(data);
+        this.flagInter = setInterval(() => {
+          this.getEchartData(data);
+        }, refreshTime);
+      } else {
+        this.getEchartData(data);
+      }*/
+    },
+
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.healthStatus-container{
+  max-width:700px;
+}
+.title-div{
+  text-align: left;
+  padding:10px;
+}
+.health-service{
+  position: relative;
+}
+.health-name{
+  position: absolute;
+  top:15px;
+  left:0;
+  right:0;
+  color:#FFFFFF;
+}
+</style>

@@ -37,6 +37,8 @@ import widgetBarCompareChart from "./bar/widgetBarCompareChart";
 import widgetLineCompareChart from "./line/widgetLineCompareChart";
 import widgetLineCompareChart from "./line/widgetLineCompareChart";
 import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
 import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
 
 
+import monitorHealthStatus from "./monitor/healthStatus";
+
 export default {
 export default {
   name: "WidgetTemp",
   name: "WidgetTemp",
   components: {
   components: {
@@ -64,7 +66,9 @@ export default {
     widgetLineStackChart,
     widgetLineStackChart,
     widgetBarCompareChart,
     widgetBarCompareChart,
     widgetLineCompareChart,
     widgetLineCompareChart,
-    widgetDecoratePieChart
+    widgetDecoratePieChart,
+
+    monitorHealthStatus
   },
   },
   model: {
   model: {
     prop: "value",
     prop: "value",

@@ -48,6 +48,9 @@ import widgetBarCompareChart from "./bar/widgetBarCompareChart";
 import widgetLineCompareChart from "./line/widgetLineCompareChart";
 import widgetLineCompareChart from "./line/widgetLineCompareChart";
 import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
 import widgetDecoratePieChart from "./decorate/widgetDecoratePieChart";
 
 
+import monitorHealthStatus from "./monitor/healthStatus";
+
+
 export default {
 export default {
   name: "Widget",
   name: "Widget",
   components: {
   components: {
@@ -75,7 +78,8 @@ export default {
     widgetLineStackChart,
     widgetLineStackChart,
     widgetBarCompareChart,
     widgetBarCompareChart,
     widgetLineCompareChart,
     widgetLineCompareChart,
-    widgetDecoratePieChart
+    widgetDecoratePieChart,
+    monitorHealthStatus,
   },
   },
   model: {
   model: {
     prop: "value",
     prop: "value",