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

自定义进度条组件及配置，修改背景组件标题样式



See merge request !33

@@ -18,6 +18,70 @@ export const monitorBgBorder = {
         placeholder: '',
         value: '背景',
       },
+      [{
+        name: '标题设置',
+        list: [
+          {
+            type: 'el-switch',
+            label: '是否有标题',
+            name: 'isTitle',
+            required: false,
+            placeholder: '',
+            value: false,
+          },
+          {
+            type: 'el-input-text',
+            label: '标题名称',
+            name: 'titleName',
+            required: false,
+            placeholder: '',
+            value: '性能信息',
+          },
+          {
+            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: 'titleFontSize',
+            required: false,
+            placeholder: '',
+            value: '18'
+          },
+          {
+            type: 'vue-color',
+            label: '字体颜色',
+            name: 'titleColor',
+            required: false,
+            placeholder: '',
+            value: 'rgb(30,159,255)'
+          },
+          {
+            type: 'el-select',
+            label: '字体粗细',
+            name: 'titleFontWeight',
+            required: false,
+            placeholder: '',
+            selectOptions: [
+              {code: 'normal', name: '正常'},
+              {code: 'bold', name: '粗体'},
+              {code: 'bolder', name: '特粗体'},
+              {code: 'lighter', name: '细体'}
+            ],
+            value: 'normal'
+          },
+        ]
+      }],
       {
         type: 'el-switch',
         label: '加边框',

 /*
  * @Descripttion: 百分比图 json
  * @version:
- * @Author: qianlishi
- * @Date: 2021-08-29 07:34:01
- * @LastEditors: qianlishi
- * @LastEditTime: 2021-09-28 14:18:45
+ * @Author: lsq
+ * @Date: 2022-03-03
+ * @LastEditors: lsq
+ * @LastEditTime: 2022-03-03
  */
 export const monitorCustomLiquidFillChart = {
   code: 'monitor-custom-liquid-fill-chart',

+/*
+ * @Descripttion: 进度条
+ * @version:
+ * @Author: lsq
+ * @Date: 2022-03-03
+ * @LastEditors: lsq
+ * @LastEditTime: 2022-03-03
+ */
+export const monitorProgressInformation = {
+  code: 'monitor-progress-information',
+  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-select',
+        label: '显示',
+        name: 'flexFlow',
+        required: false,
+        placeholder: '',
+        selectOptions: [
+          {code: 'row', name: '横排'},
+          {code: 'column', name: '竖排'},
+        ],
+        value: 'column'
+      },
+      [
+        {
+          name: '标题设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '是否有标题',
+              name: 'isTitle',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              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: '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-switch',
+              label: '是否有副标题',
+              name: 'isProposalTitle',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-select',
+              label: '字体位置',
+              name: 'textAlignProposal',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'center', name: '居中'},
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: 'left'
+            },
+
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'titleProposalFontSize',
+              required: false,
+              placeholder: '',
+              value: '16'
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'titleProposalColor',
+              required: false,
+              placeholder: '',
+              value: '#666'
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'titleProposalFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+          ]
+        },
+        {
+          name: '进度条设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '进度条文字显示',
+              name: 'showText',
+              required: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'el-switch',
+              label: '文字显示在内',
+              name: 'textInside',
+              required: false,
+              placeholder: '',
+              value: false,
+            },
+            {
+              type: 'el-input-number',
+              label: '进度条宽度',
+              name: 'progressWidth',
+              required: false,
+              placeholder: '',
+              value: '16'
+            },
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'progressFontSize',
+              required: false,
+              placeholder: '',
+              value: '16'
+            },
+            {
+              type: 'vue-color',
+              label: '字体颜色',
+              name: 'progressColor',
+              required: false,
+              placeholder: '',
+              value: '#666'
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'progressFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'vue-color',
+              label: '60%以下颜色',
+              name: 'progressColorGood',
+              required: false,
+              placeholder: '',
+              value: '#24ca3c'
+            },
+            {
+              type: 'vue-color',
+              label: '90%以下颜色',
+              name: 'progressColorWorse',
+              required: false,
+              placeholder: '',
+              value: '#fbb248'
+            },
+            {
+              type: 'vue-color',
+              label: '90%以上颜色',
+              name: 'progressColorWorst',
+              required: false,
+              placeholder: '',
+              value: '#ec3839'
+            },
+          ]
+        },
+
+      ],
+    ],
+    // 数据
+    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":40,'name':'CUP容量信息','proposal':'结论建议'},
+          {"num":60,'name':'内存容量信息','proposal':'结论建议'},
+          {"num":90,'name':'存储容量信息','proposal':'结论建议'}
+        ],
+      },
+      {
+        type: 'dycustComponents',
+        label: '',
+        name: 'dynamicData',
+        required: false,
+        placeholder: '',
+        relactiveDom: 'dataType',
+        chartType: 'widget-piechart',
+        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: 420,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 630,
+      },
+    ],
+  }
+}

@@ -48,6 +48,7 @@ import {monitorCustomBarLineChart} from "./echartsConfigJson/monitorConfigJson/m
 import {monitorButtonGroup} from "./echartsConfigJson/monitorConfigJson/monitor-button-group";
 import {monitorCustomLineTrend} from "./echartsConfigJson/monitorConfigJson/monitor-custom-line-trend";
 import {monitorCustomLiquidFillChart} from "./echartsConfigJson/monitorConfigJson/monitor-custom-liquid-Fill-chart";
+import {monitorProgressInformation} from "./echartsConfigJson/monitorConfigJson/monitor-progress-information";
 
 
 export const {widgetTool,monitor} = {
@@ -108,6 +109,8 @@ export const {widgetTool,monitor} = {
     //折线趋势图
     monitorCustomLineTrend,
     //水球
-    monitorCustomLiquidFillChart
+    monitorCustomLiquidFillChart,
+    //进度条
+    monitorProgressInformation
   ]
 }

 <template>
   <div class="basicInformation-container" :style="styleObj">
+    <div class="info-title" :style="titleStyle">{{optionsSetUp.titleName}}</div>
 
 
   </div>
@@ -43,7 +44,15 @@ export default {
         'background-size':'contain'
       };
     },
-
+    titleStyle(){
+      return{
+        'display':this.transStyle.isTitle?'block':'none',
+        'text-align':this.transStyle.textAlign,
+        'font-size':this.transStyle.titleFontSize+'px',
+        color: this.transStyle.titleColor,
+        'font-weight': this.transStyle.titleFontWeight
+      }
+    }
 
 
   },
@@ -96,5 +105,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
+.info-title{
+  padding:5px;
+}
 </style>

+<template>
+  <div :style="styleObj" class="progressContainer">
+    <div class="progress-item" :style="itemStyle"  v-for="item in progressData">
+      <div class="progress-title" :style="titleStyle">{{ item.name }}</div>
+      <div class="progress-title-proposal" :style="titleProposalStyle">{{item.proposal}}</div>
+      <div class="progress-content" :style="progressStyle">
+        <div class="content-all">
+          <span class="content-total">总空间：383GHZ</span>
+        </div>
+        <div class="progress-ele">
+          <el-progress :percentage="item.num" :show-text="showTextStyle" :text-inside="textInsideStyle" :stroke-width="progressWidthStyle" :color="customColorMethod" />
+        </div>
+        <div class="content-all">
+          <span class="content-use" :style="textColor(item.num)">已用：220GHZ</span>
+          <span class="content-use">剩余：234GHZ</span>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+var per = 60;
+export default {
+  name: "progressInformation",
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      percentage:50,
+
+      progressData:[],//数据
+      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,
+        'flex-flow':this.optionsSetup.flexFlow
+      };
+    },
+    //进度条宽度样式设置
+    progressWidthStyle(){
+      return this.optionsSetup.progressWidth;
+    },
+    //进度条文字是否显示
+    showTextStyle(){
+      return this.optionsSetup.showText;
+    },
+    //进度条文字显示在进度条内或者外
+    textInsideStyle(){
+      return this.optionsSetup.textInside;
+    },
+    //横排竖排 排版设置
+    itemStyle(){
+      return{
+        width:this.optionsSetup.flexFlow=='column'?'100%':'auto'
+      }
+    },
+    //标题样式设置
+    titleStyle(){
+      return{
+        'display':this.optionsSetup.isTitle?'block':'none',
+        'text-align':this.optionsSetup.textAlign,
+        'font-size':this.optionsSetup.titleFontSize+'px',
+        color: this.optionsSetup.titleColor,
+        'font-weight': this.optionsSetup.titleFontWeight
+      }
+    },
+    //副标题样式设置
+    titleProposalStyle(){
+      return{
+        'display':this.optionsSetup.isProposalTitle?'block':'none',
+        'text-align':this.optionsSetup.textAlignProposal,
+        'font-size':this.optionsSetup.titleProposalFontSize+'px',
+        color: this.optionsSetup.titleProposalColor,
+        'font-weight': this.optionsSetup.titleProposalFontWeight
+      }
+    },
+    //进度条样式设置
+    progressStyle(){
+      return{
+        'font-size':this.optionsSetup.progressFontSize+'px',
+        color: this.optionsSetup.progressColor,
+        'font-weight': this.optionsSetup.progressFontWeight
+      }
+    }
+  },
+  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: {
+
+    editorOptions() {
+      this.setOptionsData();
+    },
+    //设置进度条不同数值的颜色
+    customColorMethod(percentage){
+      if (percentage < 60) {
+        return this.optionsSetup.progressColorGood;
+      }
+      if (percentage < 90) {
+        return this.optionsSetup.progressColorWorse;
+      }
+      return this.optionsSetup.progressColorWorst;
+    },
+    //设置文字不同数值的颜色
+    textColor(val){
+      return{
+        color:val<60?this.optionsSetup.progressColorGood:val<90?this.optionsSetup.progressColorWorse:this.optionsSetup.progressColorWorst
+      }
+    },
+    // 数据解析
+    setOptionsData() {
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(
+        optionsData.dynamicData,
+        optionsData.refreshTime
+        );
+    },
+    staticDataFn(val) {
+      if(val && val.length>0) {
+        this.progressData=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 => {
+        if(res && res.length>0){
+          this.progressData=res;
+        }
+      });
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.progressContainer{
+  box-sizing: content-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+.progress-item{
+  font-size: 14px;
+  text-align: left;
+  flex:1;
+  margin:10px 20px;
+}
+.progress-title-proposal{
+  margin-top:20px;
+}
+.progress-content{
+  margin:20px 0 15px;
+}
+.progress-ele{
+  margin:15px 0;
+}
+.content-all{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>

@@ -51,6 +51,7 @@ import monitorCustomBarLineChart from "./monitor/customBarLineChart";
 import monitorButtonGroup from "./monitor/buttonGroup";
 import monitorCustomLineTrend from "./monitor/customLineTrend";
 import monitorCustomLiquidFillChart from "./monitor/customLiquidFillChart";
+import monitorProgressInformation from "./monitor/progressInformation";
 
 export default {
   name: "WidgetTemp",
@@ -94,7 +95,8 @@ export default {
     monitorCustomBarLineChart,
     monitorButtonGroup,
     monitorCustomLineTrend,
-    monitorCustomLiquidFillChart
+    monitorCustomLiquidFillChart,
+    monitorProgressInformation
   },
   model: {
     prop: "value",

@@ -62,6 +62,7 @@ import monitorCustomBarLineChart from "./monitor/customBarLineChart";
 import monitorButtonGroup from "./monitor/buttonGroup";
 import monitorCustomLineTrend from "./monitor/customLineTrend";
 import monitorCustomLiquidFillChart from "./monitor/customLiquidFillChart";
+import monitorProgressInformation from "./monitor/progressInformation";
 
 export default {
   name: "Widget",
@@ -104,7 +105,8 @@ export default {
     monitorCustomBarLineChart,
     monitorButtonGroup,
     monitorCustomLineTrend,
-    monitorCustomLiquidFillChart
+    monitorCustomLiquidFillChart,
+    monitorProgressInformation
   },
   model: {
     prop: "value",