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

新增业务卡片组件



See merge request !79

+/*
+ * @Descripttion: 业务卡片
+ * @version:
+ * @Author: lsq
+ * @Date: 2022-05-18
+ * @LastEditors: lsq
+ * @LastEditTime: 2022-05-18
+ */
+export const monitorBusCard = {
+  code: 'monitor-bus-card',
+  type: 'chart',
+  label: '业务-卡片',
+  icon: 'iconbaifenbi',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '业务-卡片',
+      },
+      {
+        type: 'vue-color',
+        label: '背景颜色',
+        name: 'background',
+        required: false,
+        placeholder: '',
+        value: ''
+      },
+      {
+        type: 'el-switch',
+        label: '是否显示拓扑',
+        name: 'isToop',
+        required: false,
+        placeholder: '',
+        value: true
+      },
+      {
+        type: 'el-select',
+        label: '拓扑图标',
+        name: 'toop',
+        required: false,
+        placeholder: '',
+        selectOptions: [
+          {code: 'el-icon-my-toop', name: '蓝色图标'},
+          {code: 'el-icon-my-toop-white', name: '白色图标'},
+          {code: 'el-icon-my-toop-yellow', name: '黄色图标'},
+        ],
+        value: 'el-icon-my-toop'
+      },
+      {
+        type: 'el-switch',
+        label: '是否有跳转',
+        name: 'isNextPage',
+        required: false,
+        placeholder: '',
+        value: true,
+      },
+      {
+        type: 'el-input-text',
+        label: '跳转路由',
+        name: 'nextRouter',
+        required: false,
+        placeholder: '',
+        value: '',
+      },
+      [
+        {
+          name: '卡片设置',
+          list: [
+            {
+              type: 'vue-color',
+              label: '卡片背景颜色',
+              name: 'backgroundItem',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-switch',
+              label: '加边框',
+              name: 'isBorder',
+              required: false,
+              placeholder: '',
+              value: true
+            },
+            {
+              type: 'el-input-number',
+              label: '边框宽度',
+              name: 'borderWidth',
+              required: false,
+              placeholder: '',
+              value: 1,
+            },
+            {
+              type: 'vue-color',
+              label: '边框颜色',
+              name: 'borderColor',
+              required: false,
+              placeholder: '',
+              value: 'rgba(151, 151, 151, 0.13)',
+            },
+            {
+              type: 'el-input-number',
+              label: '边框圆角',
+              name: 'radiusCard',
+              required: false,
+              placeholder: '',
+              value: 3,
+            },
+            {
+              type: 'el-input-number',
+              label: '宽度',
+              name: 'widthCard',
+              required: false,
+              placeholder: '',
+              value: 450,
+            },
+            {
+              type: 'el-input-number',
+              label: '高度',
+              name: 'heightCard',
+              required: false,
+              placeholder: '',
+              value: 200,
+            },
+            {
+              type: 'vue-color',
+              label: '小圆点优颜色',
+              name: 'normalColor',
+              required: false,
+              placeholder: '',
+              value: '#0BAC33',
+            },
+            {
+              type: 'vue-color',
+              label: '小圆点良颜色',
+              name: 'worseColor',
+              required: false,
+              placeholder: '',
+              value: '#FF7E00',
+            },
+            {
+              type: 'vue-color',
+              label: '小圆点中颜色',
+              name: 'worstColor',
+              required: false,
+              placeholder: '',
+              value: '#d81e06',
+            },
+          ]
+        },
+        {
+          name: '标题设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '是否有标题',
+              name: 'isTitle',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-text',
+              label: '标题名称',
+              name: 'titleName',
+              required: false,
+              placeholder: '',
+              value: 'vmware-80.12.89.77',
+            },
+            {
+              type: 'vue-color',
+              label: '背景颜色',
+              name: 'titleBgColor',
+              required: false,
+              placeholder: '',
+              value: 'rgb(244, 245, 250)'
+
+            },
+
+            {
+              type: 'el-select',
+              label: '字体位置',
+              name: 'textAlign',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'center', name: '居中'},
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: 'center'
+            },
+
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'titleFontSize',
+              required: false,
+              placeholder: '',
+              value: '18'
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'titleColor',
+              required: false,
+              placeholder: '',
+              value: '#666'
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'titleFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+          ]
+        },
+        {
+          name: '数值设置',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '数值字体大小',
+              name: 'textNumFontSize',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'textNumFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            }
+          ],
+        },
+        {
+          name: '数值名称设置',
+          list: [
+            {
+              type: 'el-input-number',
+              label: '数值字体大小',
+              name: 'textNameFontSize',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'textNameFontWeight',
+              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:[
+          {
+            "busId": "b64bd18a248c4f08ae14a5d67d64a2c1",
+            "parentId": "0",
+            "busTypeCode": "xianbus",
+            "busTypeName": "西安公司业务",
+            "busTypeDesc": "西安公司业务",
+            "admin": "wanganjun",
+            "adminTel": null,
+            "createTime": "2022-03-03 10:55:55",
+            "streamId": null,
+            "isUse": 1,
+            "important": 1,
+            "sort": 100,
+            "isLeaf": 1,
+            "nickname": "王安军",
+            "result": null,
+            "resourceId": null,
+            "healthStatus": null,
+            "healthStatusName": null,
+            "jtopoId": null,
+            "businessNum": null,
+            "successRate": null,
+            "responseRate": null,
+            "score": null,
+            "resNum": null,
+            "normal": 4,
+            "worse": 0,
+            "worst": 4,
+            "total": 8,
+            "resType": "b64bd18a248c4f08ae14a5d67d64a2c1",
+            "resTypeName": "西安公司业务",
+            "useable": null,
+            "child": null,
+            "alarmNum": null,
+            "hostNum": null,
+            "databaseNum": null,
+            "middwareNum": null,
+            "parentName": null,
+            "userCount": null,
+            "showType": null,
+            "isOps": 0,
+            "taskType": null,
+            "isvirtual": null,
+            "system_type": null,
+            "principal": null,
+            "principalName": null
+          }, {
+            "busId": "1d4ff0198a2e440ea42e0d9099aca133",
+            "parentId": "0",
+            "busTypeCode": "fdchj",
+            "busTypeName": "房地产核价系统",
+            "busTypeDesc": "房地产核价系统",
+            "admin": "童浏靓",
+            "adminTel": "18997480219",
+            "createTime": "2019-09-04 18:49:17",
+            "streamId": null,
+            "isUse": 1,
+            "important": 1,
+            "sort": 100,
+            "isLeaf": 1,
+            "nickname": "童浏靓",
+            "result": null,
+            "resourceId": null,
+            "healthStatus": null,
+            "healthStatusName": null,
+            "jtopoId": null,
+            "businessNum": null,
+            "successRate": null,
+            "responseRate": null,
+            "score": null,
+            "resNum": null,
+            "normal": 1,
+            "worse": 0,
+            "worst": 5,
+            "total": 6,
+            "resType": "1d4ff0198a2e440ea42e0d9099aca133",
+            "resTypeName": "房地产核价系统",
+            "useable": null,
+            "child": null,
+            "alarmNum": null,
+            "hostNum": null,
+            "databaseNum": null,
+            "middwareNum": null,
+            "parentName": null,
+            "userCount": null,
+            "showType": null,
+            "isOps": 0,
+            "taskType": null,
+            "isvirtual": null,
+            "system_type": null,
+            "principal": null,
+            "principalName": null
+          }
+        ]
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        chartType: 'widget-table',
+        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: 1800,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 240,
+      },
+    ],
+  }
+}

@@ -61,6 +61,7 @@ import {monitorJimuButton} from "./echartsConfigJson/monitorConfigJson/monitor-j
 import {monitorAjButton} from "./echartsConfigJson/monitorConfigJson/monitor-aj-button";
 import {monitorCustomScatterWeight} from "./echartsConfigJson/monitorConfigJson/monitor-custom-scatter-weight";
 import {monitorSelectOption} from "./echartsConfigJson/monitorConfigJson/monitor-select-option";
+import {monitorBusCard} from "./echartsConfigJson/monitorConfigJson/monitor-bus-card";
 
 export const {widgetTool,monitor} = {
   widgetTool : [
@@ -144,6 +145,8 @@ export const {widgetTool,monitor} = {
     // 散点图
     monitorCustomScatterWeight,
     //下拉列表
-    monitorSelectOption
+    monitorSelectOption,
+    //业务卡片
+    monitorBusCard
   ]
 }

+<template>
+  <div :style="styleObj" class="flex-div-content" >
+    <div :style="styleObjItem" class="flex-div card-item" @click="goJump(item)" v-for="(item,index) in busCardData" :key="index">
+      <div class="busCard-title" :style="titleStyle">
+        <span class="busCard-titleName"> {{item.busTypeName}}</span>
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          content="查看拓扑图"
+          placement="top"
+        >
+          <i :class="[optionsSetup.toop,'title-i']" v-if="optionsSetup.isToop" @click="resTopo(item)"></i>
+        </el-tooltip>
+      </div>
+      <div class="busCardContainer" :style="flexStyle">
+        <div class="bus-container-item bus-total">
+          <div class="bus-num" :style="busNumStyle">{{item.total}}</div>
+          <div class="bus-name" :style="busNameStyle">总量</div>
+        </div>
+        <div class="bus-container-item bus-normal">
+          <div :class="['bus-num',{'text-white':item.normal>0}]" :style="[item.normal>0?circleNormal:'',busNumStyle]">{{item.normal}}</div>
+          <div class="bus-name" :style="busNameStyle"><i class="circle-i" :style="circleNormal"></i>优</div>
+        </div>
+        <div class="bus-container-item bus-worse">
+          <div :class="['bus-num',{'text-white':item.worse>0}]" :style="[item.worse>0?circleWorse:'',busNumStyle]">{{item.worse}}</div>
+          <div class="bus-name" :style="busNameStyle"><i class="circle-i" :style="circleWorse"></i>良</div>
+        </div>
+        <div class="bus-container-item bus-worst">
+          <div :class="['bus-num',{'text-white':item.worst>0}]" :style="[item.worst>0?circleWorst:'',busNumStyle]">{{item.worst}}</div>
+          <div class="bus-name" :style="busNameStyle"><i class="circle-i" :style="circleWorst"></i>中</div>
+        </div>
+      </div>
+    </div>
+    <div :style="styleObjItemSup" class="flex-div" v-for="(item,index) in 3"></div>
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "busCard",
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      busCardData:'',//数据
+      angle: 0,
+      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,
+      };
+    },
+    styleObjItem(){
+      return{
+        width: this.optionsSetup.widthCard + "px",
+        height: this.optionsSetup.heightCard + "px",
+        cursor:this.optionsSetup.isNextPage?'pointer':'',
+        background: this.optionsSetup.backgroundItem,
+        'border-radius':this.optionsSetup.radiusCard+'px',
+        'border':this.optionsSetup.isBorder?(this.optionsSetup.borderWidth+'px'+' solid '+ this.optionsSetup.borderColor):'none'
+
+      }
+    },
+    //补充空div
+    styleObjItemSup(){
+      return{
+        width: this.optionsSetup.widthCard + "px",
+        height: this.optionsSetup.heightCard + "px",
+      }
+    },
+    flexStyle(){
+      return{
+        // 'flex-flow':this.optionsSetup.flexFlow
+      }
+    },
+    //标题样式设置
+    titleStyle(){
+      return{
+        'display':this.optionsSetup.isTitle?'flex':'none',
+        'text-align':this.optionsSetup.textAlign,
+        'justify-content':this.optionsSetup.textAlign=='left'?'start':this.optionsSetup.textAlign=='center'?'center':'flex-end',
+        'font-size':this.optionsSetup.titleFontSize+'px',
+        color: this.optionsSetup.titleColor,
+        'font-weight': this.optionsSetup.titleFontWeight,
+        'background':this.optionsSetup.titleBgColor
+      }
+    },
+    //circle小圆点样式
+    circleNormal(){
+      return{
+        background:this.optionsSetup.normalColor
+      }
+    },
+    circleWorse(){
+      return{
+        background:this.optionsSetup.worseColor
+      }
+    },
+    circleWorst(){
+      return{
+        background:this.optionsSetup.worstColor
+      }
+    },
+    //数值样式
+    busNumStyle(){
+      return{
+          'font-size':this.optionsSetup.textNumFontSize+'px',
+          'font-weight':this.optionsSetup.textNumFontWeight
+      }
+    },
+    //数值名称样式
+    busNameStyle(){
+      return{
+        'font-size':this.optionsSetup.textNameFontSize+'px',
+        'font-weight':this.optionsSetup.textNameFontWeight
+      }
+    }
+  },
+  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();
+  },
+  mounted() {
+
+  },
+  methods: {
+
+    resTopo(item) {
+      let param = {
+        type:'topology',
+        data:{
+          busId:item.busId,
+          resId: item.resId,
+          resType: item.resType
+        }
+
+      }
+      window.parent.postMessage(param, '*')
+    },
+    editorOptions() {
+      this.setOptionsData();
+    },
+    // 数据解析
+    setOptionsData() {
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(
+        optionsData.dynamicData,
+        optionsData.refreshTime
+        );
+    },
+    staticDataFn(val) {
+      this.setData(val)
+    },
+    //处理数据
+    setData(val){
+      this.busCardData=val;
+    },
+    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.setData(res)
+      });
+    },
+    goJump(item){
+      let locationUrl=this.$route.query;
+      if(this.optionsSetup.isNextPage){
+        let nextRouter=this.optionsSetup.nextRouter;
+        if( this.$route.query.second_router){
+          nextRouter=this.$route.query.second_router
+        }
+        if(nextRouter){
+          this.$router.push({
+            path: `/bigscreen/viewer`,
+            query: { reportCode: nextRouter,titleName:item.busTypeName ,busId:item.busId,resType: item.resType,access_token:locationUrl.access_token},
+          })
+        }
+
+      }
+
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.flex-div-content{
+  display: flex;
+  //justify-content: space-between;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+.card-item{
+  margin-right:10px;
+}
+.flex-div{
+  display: flex;
+  flex-flow: column;
+  margin-bottom: 20px;
+}
+.busCardContainer{
+  box-sizing: content-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  flex:1;
+
+}
+.busCard-title{
+/*  display: flex;
+  justify-content: center;*/
+  padding:20px;
+}
+.busCard-titleName{
+  flex:1;
+}
+.title-i{
+  width:16px;
+}
+.box-item{
+  margin-left:5px;
+  cursor: pointer;
+}
+.circle-i{
+  display: inline-block;
+  margin-right: 5px;
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+}
+.bus-num{
+  background:#F2F2F2;
+  margin-bottom: 20px;
+  padding: 5px 8px;
+  display: inline-block;
+  border-radius: 2px;
+
+}
+.text-white{
+  color:#fff;
+}
+.bus-container-item{
+  border-right:1px solid #F2F2F2;
+  flex:1;
+}
+.bus-container-item:last-child{
+  border:none;
+}
+</style>

@@ -64,6 +64,7 @@ import monitorJimuButton from "./monitor/monitorJimuButton";
 import monitorAjButton from "./monitor/monitorAjButton";
 import monitorCustomScatterWeight from "./monitor/monitorCustomScatterWeight.vue";
 import monitorSelectOption from "./monitor/selectOption.vue";
+import monitorBusCard from "./monitor/busCard.vue";
 
 export default {
   name: "WidgetTemp",
@@ -119,7 +120,8 @@ export default {
     monitorJimuButton,
     monitorAjButton,
     monitorCustomScatterWeight,
-    monitorSelectOption
+    monitorSelectOption,
+    monitorBusCard
   },
   model: {
     prop: "value",

@@ -75,6 +75,7 @@ import monitorJimuButton from "./monitor/monitorJimuButton";
 import monitorAjButton from "./monitor/monitorAjButton";
 import monitorCustomScatterWeight from "./monitor/monitorCustomScatterWeight";
 import monitorSelectOption from "./monitor/selectOption.vue";
+import monitorBusCard from "./monitor/busCard.vue";
 
 export default {
   name: "Widget",
@@ -129,7 +130,8 @@ export default {
     monitorJimuButton,
     monitorAjButton,
     monitorCustomScatterWeight,
-    monitorSelectOption
+    monitorSelectOption,
+    monitorBusCard
   },
   model: {
     prop: "value",