1、水波图添加外围边框自定义

2、水波图随着缩放跟着缩放问题处理

1、水波图添加外围边框自定义
2、水波图随着缩放跟着缩放问题处理
qianbao
1 parent 4bad9ea3
Showing 2 changed files with 88 additions and 6 deletions
src/views/bigscreenDesigner/designer/tools/configure/texts/widget-water-level-pond.js
src/views/bigscreenDesigner/designer/widget/text/widgetWaterLevelPond.vue
@@ -88,7 +88,45 @@ export const widgetWaterLevelPond=  {
         placeholder: '',
         value: ''
       },
-      [{
+      [
+        {
+          name: '自定义外圈设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isOutShow',
+              required: false,
+              placeholder: '',
+              value: false,
+            },
+            // {
+            //   type: 'el-switch',
+            //   label: '边框角度',
+            //   name: 'outBorderRadius',
+            //   required: false,
+            //   placeholder: '',
+            //   value: 0
+            // },
+            {
+              type: 'el-input-number',
+              label: '粗度设置',
+              name: 'outBorder',
+              required: false,
+              placeholder: '',
+              value: 10
+            },
+            {
+              type: 'vue-color',
+              label: '颜色',
+              name: 'outBorderColor',
+              required: false,
+              placeholder: '',
+              value: '#19c3eb'
+            }
+          ],
+        },
+        {
         name: '水位图配色',
         list: [
           {
@@ -3,7 +3,7 @@
 -->
 <template>
 <!--  <div id="widget-water-pond-level" :style="styleObj">-->
-    <dv-water-level-pond :config="options" :style="styleObj"/>
+    <dv-water-level-pond :config="options" :style="styleObj" v-if="isRouterAlive" />
 <!--  </div>-->
 </template>
 <script>
@@ -32,13 +32,23 @@ export default {
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
-      optionsSetup: {}
+      optionsSetup: {},
+      flagInter: null,
+      isRouterAlive:true
     };
   },
+  provide(){
+    return{
+      reload:this.reload
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.flagInter);
+  },
   computed: {
     ...mapState('dataSource', ['staticData','staticRefreshTime']),
     styleObj() {
-      return {
+      const style = {
         position: this.ispreview ? "absolute" : "static",
         width: this.optionsStyle.width + "px",
         height: this.optionsStyle.height + "px",
@@ -46,6 +56,21 @@ export default {
         top: this.optionsStyle.top + "px",
         background: this.optionsSetup.background
       };
+      if(this.optionsSetup.isOutShow){
+        let borderRadius = 0;
+        if(this.optionsSetup.shape=='rect'){
+          borderRadius = 0;
+        }else if(this.optionsSetup.shape=='roundRect'){
+          borderRadius = 3;
+        }else if(this.optionsSetup.shape=='round'){
+          borderRadius = 50;
+        }
+        const border = this.optionsSetup.outBorder +"px solid "+ this.optionsSetup.outBorderColor;
+        style.borderRadius= borderRadius+"%";
+        style['border']= border;
+        // console.log("style",style);
+      }
+      return style;
     },
   },
   watch: {
@@ -105,7 +130,7 @@ export default {
     },
     setShowText(dataArray) {
       this.options.data = dataArray;
-      this.options={...this.options};
+      this.reload();
     },
     // 数据修改
     setOptionsData() {
@@ -130,7 +155,14 @@ export default {
     getEchartData() {
       const dataArray = this.getShowText();
       this.setShowText(dataArray);
-    }
+    },
+    // vue hack 之强制刷新组件
+    reload(){
+      this.isRouterAlive=false;
+      this.$nextTick(function(){
+        this.isRouterAlive=true;
+      })
+    },
   }
 };
@@ -141,4 +173,16 @@ export default {
   height: 100%;
   overflow: hidden;
 }
+//.dv-water-pond-level {
+//  //max-width: 90%;
+//  border: 10px solid #19c3eb;
+//  border-radius: 50%;
+//  //ellipse {
+//  //  stroke: transparent !important;
+//  //}
+//  //
+//  //text {
+//  //  font-size: 40px;
+//  //}
+//}
 </style>