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

自定义水球组件及配置



See merge request !32

@@ -19,7 +19,7 @@ import echarts from 'echarts';
 import ECharts from 'vue-echarts'
 import ECharts from 'vue-echarts'
 import 'echarts/lib/chart/bar'
 import 'echarts/lib/chart/bar'
 import 'echarts/lib/component/tooltip'
 import 'echarts/lib/component/tooltip'
-//import 'echarts-liquidfill'
+// import 'echarts-liquidfill'
 // import 'echarts-gl'
 // import 'echarts-gl'
 Vue.component('v-chart', ECharts)
 Vue.component('v-chart', ECharts)
 
 

+/*
+ * @Descripttion: 百分比图 json
+ * @version:
+ * @Author: qianlishi
+ * @Date: 2021-08-29 07:34:01
+ * @LastEditors: qianlishi
+ * @LastEditTime: 2021-09-28 14:18:45
+ */
+export const monitorCustomLiquidFillChart = {
+  code: 'monitor-custom-liquid-fill-chart',
+  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-select',
+              label: '字体位置',
+              name: 'textAlign',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'center', name: '居中'},
+                {code: 'left', name: '左对齐'},
+                {code: 'right', name: '右对齐'},
+              ],
+              value: 'center'
+            },*/
+            {
+              type: 'el-switch',
+              label: '是否有标题',
+              name: 'isTitle',
+              required: false,
+              placeholder: '',
+              value: true,
+            },
+            {
+              type: 'el-input-number',
+              label: '字体大小',
+              name: 'titleFontSize',
+              required: false,
+              placeholder: '',
+              value: '16'
+            },
+            {
+              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: 'vue-color',
+              label: '数值颜色',
+              name: 'textNumColor',
+              required: false,
+              placeholder: '',
+              value: '#666'
+            },
+            {
+              type: 'el-input-number',
+              label: '数值字体',
+              name: 'textNumFontSize',
+              required: false,
+              placeholder: '',
+              value: 40
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'textNumFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            },
+            {
+              type: 'vue-color',
+              label: '%号颜色',
+              name: 'textPerColor',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-input-number',
+              label: '%号字体',
+              name: 'textPerFontSize',
+              required: false,
+              placeholder: '',
+              value: 20
+            },
+            {
+              type: 'el-select',
+              label: '字体粗细',
+              name: 'textPerFontWeight',
+              required: false,
+              placeholder: '',
+              selectOptions: [
+                {code: 'normal', name: '正常'},
+                {code: 'bold', name: '粗体'},
+                {code: 'bolder', name: '特粗体'},
+                {code: 'lighter', name: '细体'}
+              ],
+              value: 'normal'
+            }
+          ],
+        },
+
+        {
+          name: '圆环设置',
+          list: [
+            {
+              type: 'vue-color',
+              label: '圆环颜色(上)',
+              name: 'lineColor',
+              required: false,
+              placeholder: '',
+              value: '#aeedf1'
+            },
+            {
+              type: 'vue-color',
+              label: '圆环颜色(下)',
+              name: 'lineColorDark',
+              required: false,
+              placeholder: '',
+              value: '#5a8ef5'
+            },
+            {
+              type: 'el-input-number',
+              label: '圆环宽度',
+              name: 'lineWidth',
+              required: false,
+              placeholder: '',
+              value: 3
+            },
+            {
+              type: 'el-input-number',
+              label: '圆球宽高',
+              name: 'widthHeight',
+              required: false,
+              placeholder: '',
+              value: ''
+            },
+          ]
+        },
+        {
+          name: '渐变色',
+          list: [
+            {
+              type: 'vue-color',
+              label: '0%处颜色',
+              name: 'color0Start',
+              required: false,
+              placeholder: '',
+              value: '#5a8ef5'
+            },
+            {
+              type: 'vue-color',
+              label: '100%颜色',
+              name: 'color100End',
+              required: false,
+              placeholder: '',
+              value: '#aeedf1'
+            },
+            {
+              type: 'vue-color',
+              label: '余处颜色',
+              name: 'colorsurplus',
+              required: false,
+              placeholder: '',
+              value: '#5a8ef5'
+            },
+          ]
+        }
+      ],
+    ],
+    // 数据
+    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":60},{"num":80}
+        ],
+      },
+      {
+        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: 300,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 400,
+      },
+    ],
+  }
+}

@@ -47,6 +47,7 @@ import {monitorCustomLineStack} from "./echartsConfigJson/monitorConfigJson/moni
 import {monitorCustomBarLineChart} from "./echartsConfigJson/monitorConfigJson/monitor-custom-bar-line-chart";
 import {monitorCustomBarLineChart} from "./echartsConfigJson/monitorConfigJson/monitor-custom-bar-line-chart";
 import {monitorButtonGroup} from "./echartsConfigJson/monitorConfigJson/monitor-button-group";
 import {monitorButtonGroup} from "./echartsConfigJson/monitorConfigJson/monitor-button-group";
 import {monitorCustomLineTrend} from "./echartsConfigJson/monitorConfigJson/monitor-custom-line-trend";
 import {monitorCustomLineTrend} from "./echartsConfigJson/monitorConfigJson/monitor-custom-line-trend";
+import {monitorCustomLiquidFillChart} from "./echartsConfigJson/monitorConfigJson/monitor-custom-liquid-Fill-chart";
 
 
 
 
 export const {widgetTool,monitor} = {
 export const {widgetTool,monitor} = {
@@ -105,6 +106,8 @@ export const {widgetTool,monitor} = {
     //月季度年按钮
     //月季度年按钮
     monitorButtonGroup,
     monitorButtonGroup,
     //折线趋势图
     //折线趋势图
-    monitorCustomLineTrend
+    monitorCustomLineTrend,
+    //水球
+    monitorCustomLiquidFillChart
   ]
   ]
 }
 }

+<template>
+  <div :style="styleObj" class="fillContainer">
+    <div class="fill-item" :style="fillItemStyle" v-for="item in fillData">
+      <div class="circle" :style="circleStyle">
+        <div class="wave">
+          <div class="wave1" :style="[wave1Style,topStyle(item.num)]"></div>
+          <div class="wave-val">
+            <span :style="numStyle">{{ item.num }}</span><span :style="pieStyle">%</span>
+          </div>
+        </div>
+      </div>
+      <div class="wave-title" :style="titleStyle">当前使用率</div>
+    </div>
+
+    <!--    <v-chart :options="options" autoresize/>-->
+  </div>
+</template>
+
+<script>
+var per = 60;
+export default {
+  name: "customLiquidFillChart",//百分比图参考：https://www.makeapie.com/editor.html?c=xFkzKG-bpl
+  components: {},
+  props: {
+    value: Object,
+    ispreview: Boolean
+  },
+  data() {
+    return {
+      // topStyle:'',//水波纹的大小
+      fillData:[],//数据
+      topNum:0,//水波纹的大小
+      nums:0,
+      options: {
+        title: {
+          text: '{nums|' + per + '}{percent|%}',
+          x: 'center',
+          y: 'center',
+          textStyle: {
+            rich: {
+              nums: {
+                fontSize: 60,
+                color: '#29EEF3',
+              },
+              percent: {
+                fontSize: 30,
+                color: '#29EEF3',
+              },
+            },
+          },
+        },
+        legend: {
+          type: 'plain',
+          orient: 'vertical',
+          right: 0,
+          top: '10%',
+          align: 'auto',
+          data: [{
+            name: '1',
+            icon: "circle"
+          }, {
+            name: '2',
+            icon: "circle"
+          }, {
+            name: '3',
+            icon: "circle"
+          }, {
+            name: '4',
+            icon: "circle"
+          }],
+          textStyle: {
+            color: 'white',
+            fontSize: 16,
+            padding: [10, 1, 10, 0],
+          },
+          selectedMode: false,
+        },
+        series: [
+          {
+            type: "liquidFill",
+            data: [0.47],
+            direction: "right", //波浪方向或者静止
+            radius: "80%",
+            // 水球颜色
+            color: ["#00c2ff"],
+            center: ["50%", "50%"], //水球位置
+            // outline  外边
+            outline: {
+              // show: false
+              borderDistance: 3, //内环padding值
+              itemStyle: {
+                borderWidth: 8, //圆边线宽度
+                borderColor: "#00c2ff",
+                shadowBlur: 10,
+                shadowColor: 'rgba(63, 218, 255, 0.5)'
+              }
+            },
+            backgroundStyle: {
+              // borderWidth: 5,
+              // borderColor: 'rgb(255,0,255,0.9)',
+              color: 'rgb(255,0,255,0.01)'
+            },
+            label: {
+              show: false
+            }
+          }
+        ],
+      },
+      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
+      };
+    },
+    //圆环边框设置
+    circleStyle(){
+      return{
+        'background-image': 'linear-gradient(20deg,  '+this.optionsSetup.lineColorDark+','+this.optionsSetup.lineColor+')',
+        'padding':this.optionsSetup.lineWidth+'px'
+      }
+    },
+    //多个水球样式
+    fillItemStyle(){
+      let length=this.fillData.length;
+      let widthCirle=this.optionsSetup.flexFlow=='column'?this.optionsStyle.height:this.optionsStyle.width;
+      let num=this.optionsSetup.flexFlow=='column'?60:20;
+      let width=widthCirle/length-num;
+      return {
+        width: width + "px",
+        height: width + "px",
+      }
+    },
+    //波纹样式
+    wave1Style(){
+      let optionsSetup=this.optionsSetup;
+      return{
+        'background-color':this.optionsSetup.color0Start,
+        // 'top':this.topNum+'%',
+        'background-image':'radial-gradient( '+optionsSetup.color0Start+' , '+optionsSetup.colorsurplus+', '+optionsSetup.color100End+')',
+      }
+    },
+    //百分比样式
+    pieStyle(){
+      return{
+        'font-size':this.optionsSetup.textPerFontSize+'px',
+        color: this.optionsSetup.textPerColor,
+        'font-weight': this.optionsSetup.textPerFontWeight
+
+      }
+    },
+    //数值样式
+    numStyle(){
+      let optionsSetup=this.optionsSetup;
+      return{
+        'font-size': optionsSetup.textNumFontSize+'px',
+        color: optionsSetup.textNumColor,
+        'font-weight': optionsSetup.textNumFontWeight
+      }
+    },
+    //下方标题样式
+    titleStyle(){
+      let optionsSetup=this.optionsSetup;
+      return{
+        'display':optionsSetup.isTitle?'block':'none',
+        'font-size':optionsSetup.titleFontSize+'px',
+        color: optionsSetup.titleColor,
+        'font-weight': optionsSetup.titleFontWeight
+
+      }
+    }
+  },
+  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();
+    },
+    // 数据解析
+    setOptionsData() {
+      const optionsData = this.optionsData; // 数据类型 静态 or 动态
+      optionsData.dataType == "staticData"
+        ? this.staticDataFn(optionsData.staticData)
+        : this.dynamicDataFn(
+        optionsData.dynamicData,
+        optionsData.refreshTime
+        );
+    },
+    staticDataFn(val) {
+      const title = this.options.title;
+      const num = val[0]['num'];
+      if(val && val.length>0) {
+        this.fillData=val;
+      }
+      this.nums =  num ;
+      this.topNum=100-num;
+
+    },
+    topStyle(val){
+      let num=100-val;
+      return {
+        'top':num+'%'
+      };
+    },
+    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.nums =   res[0].value ;
+        if(res && res.length>0){
+          this.fillData=res;
+        }
+        this.topNum=100-this.nums;
+      });
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.fillContainer{
+  box-sizing: content-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+.fill-item{
+  width:100%;height:100%;
+  //flex: 1;
+  margin:10px;
+}
+.circle{
+  background-image: linear-gradient(20deg,  #5a8ef5 , #aeedf1);
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  padding:4px;
+  box-sizing: content-box;
+}
+.wave{
+  background: #FFFFFF;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  line-height: 50px;
+  margin: 0 auto;
+  font-size: 14px;
+  text-align: center;
+  overflow: hidden;
+  animation: water-wave linear infinite;
+}
+.wave1{
+  position: absolute;
+  top: 40%;
+  left: -70%;
+  background: #5a8ef5;
+  background-image: radial-gradient( #5a8ef5 , #aeedf1, #aeedf1, #5a8ef5);
+  opacity: .7;
+  width: 200%;
+  height: 200%;
+  border-radius: 40%;
+  animation: inherit;
+  animation-duration: 5s;
+}
+@keyframes  water-wave{
+  0% {transform: rotate(0deg);}
+  100% {transform: rotate(360deg);}
+}
+.wave-val{
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  font-size: 20px;
+}
+.wave-title{
+  padding:10px;
+}
+</style>

@@ -50,6 +50,7 @@ import monitorCustomLineStack from "./monitor/customLineStack";
 import monitorCustomBarLineChart from "./monitor/customBarLineChart";
 import monitorCustomBarLineChart from "./monitor/customBarLineChart";
 import monitorButtonGroup from "./monitor/buttonGroup";
 import monitorButtonGroup from "./monitor/buttonGroup";
 import monitorCustomLineTrend from "./monitor/customLineTrend";
 import monitorCustomLineTrend from "./monitor/customLineTrend";
+import monitorCustomLiquidFillChart from "./monitor/customLiquidFillChart";
 
 
 export default {
 export default {
   name: "WidgetTemp",
   name: "WidgetTemp",
@@ -92,7 +93,8 @@ export default {
     monitorCustomLineStack,
     monitorCustomLineStack,
     monitorCustomBarLineChart,
     monitorCustomBarLineChart,
     monitorButtonGroup,
     monitorButtonGroup,
-    monitorCustomLineTrend
+    monitorCustomLineTrend,
+    monitorCustomLiquidFillChart
   },
   },
   model: {
   model: {
     prop: "value",
     prop: "value",

@@ -61,6 +61,7 @@ import monitorCustomLineStack from "./monitor/customLineStack";
 import monitorCustomBarLineChart from "./monitor/customBarLineChart";
 import monitorCustomBarLineChart from "./monitor/customBarLineChart";
 import monitorButtonGroup from "./monitor/buttonGroup";
 import monitorButtonGroup from "./monitor/buttonGroup";
 import monitorCustomLineTrend from "./monitor/customLineTrend";
 import monitorCustomLineTrend from "./monitor/customLineTrend";
+import monitorCustomLiquidFillChart from "./monitor/customLiquidFillChart";
 
 
 export default {
 export default {
   name: "Widget",
   name: "Widget",
@@ -102,7 +103,8 @@ export default {
     monitorCustomLineStack,
     monitorCustomLineStack,
     monitorCustomBarLineChart,
     monitorCustomBarLineChart,
     monitorButtonGroup,
     monitorButtonGroup,
-    monitorCustomLineTrend
+    monitorCustomLineTrend,
+    monitorCustomLiquidFillChart
   },
   },
   model: {
   model: {
     prop: "value",
     prop: "value",