1、添加水位图

qianbao
1 parent ee5dc225
Showing 7 changed files with 269 additions and 10 deletions
src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-capsule-chart.js
src/views/bigscreenDesigner/designer/tools/configure/div/widget-water-level-pond.js
src/views/bigscreenDesigner/designer/tools/index.js
src/views/bigscreenDesigner/designer/tools/main.js
src/views/bigscreenDesigner/designer/widget/div/widgetWaterLevelPond.vue
src/views/bigscreenDesigner/designer/widget/temp.vue
src/views/bigscreenDesigner/designer/widget/widget.vue
@@ -105,7 +105,7 @@ export const widgetCapsuleChart =  {
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
         chartType: 'widget-capsule-chart',
-        dictKey: 'STACK_PROPERTIES',
+        dictKey: 'BAR_PROPERTIES',
         value: '',
       },
     ],
+/*
+ * @Descripttion: 水位图
+ */
+export const widgetWaterLevelPond=  {
+  code: 'widget-water-level-pond',
+  type: 'html',
+  tabName: '图层',
+  label: '水位图',
+  icon: 'iconshouji',
+  options: {
+    // 配置
+    setup: [
+      {
+        type: 'el-input-text',
+        label: '图层名称',
+        name: 'layerName',
+        required: false,
+        placeholder: '',
+        value: '水位图',
+      },
+      {
+        type: 'el-input-text',
+        label: '水位数据',
+        name: 'waterLevelPondDataText',
+        required: false,
+        placeholder: '',
+        value: '0',
+      },
+      {
+        type: 'el-select-static',
+        label: '主数据源数据',
+        name: 'slectedDataType',
+        require: false,
+        placeholder: '',
+        selectOptions: [],
+        value: '',
+      },
+      {
+        type: 'el-select',
+        label: '水位图形状',
+        name: 'shape',
+        required: false,
+        placeholder: '',
+        selectOptions: [
+          {code: 'rect', name: '矩形'},
+          {code: 'roundRect', name: '圆角矩形'},
+          {code: 'round', name: '圆形'}
+        ],
+        value: 'rect'
+      },
+      {
+        type: 'el-input-number',
+        label: '波浪数量',
+        name: 'waveNum',
+        required: false,
+        placeholder: '',
+        value: 1,
+      },
+      {
+        type: 'el-input-number',
+        label: '波浪高度',
+        name: 'waveHeight',
+        required: false,
+        placeholder: '',
+        value: 40,
+      },
+      {
+        type: 'el-slider',
+        label: '波浪透明度',
+        name: 'waveOpacity',
+        required: false,
+        placeholder: '',
+        value: 0.4,
+      },
+      {
+        type: 'el-input-text',
+        label: '信息格式化',
+        name: 'formatter',
+        required: false,
+        placeholder: '',
+        value: '{value}%',
+      },
+      [{
+        name: '水位图配色',
+        list: [
+          {
+            type: 'customColor',
+            label: '',
+            name: 'customColor',
+            required: false,
+            value: [{ color: '#1E90FF' }, { color: '#96bfff' }],
+          },
+        ],
+      }],
+    ],
+    // 数据
+    data: [],
+    // 坐标
+    position: [
+      {
+        type: 'el-input-number',
+        label: '左边距',
+        name: 'left',
+        required: false,
+        placeholder: '',
+        value: 10,
+      },
+      {
+        type: 'el-input-number',
+        label: '上边距',
+        name: 'top',
+        required: false,
+        placeholder: '',
+        value: 10,
+      },
+      {
+        type: 'el-input-number',
+        label: '宽度',
+        name: 'width',
+        required: false,
+        placeholder: '该容器在1920px大屏中的宽度',
+        value: 200,
+      },
+      {
+        type: 'el-input-number',
+        label: '高度',
+        name: 'height',
+        required: false,
+        placeholder: '该容器在1080px大屏中的高度',
+        value: 350,
+      },
+    ],
+  }
+}
@@ -51,7 +51,7 @@ const screenConfig = {
         label: '主数据源',
         name: 'master',
         required: false,
-        placeholder: '全局数据源[List:sName、sValue] ',/**LIST sName、sValue 后台代码自动转成 sName:sValue Map形式*/
+        placeholder: '主数据源[List:sName、sValue] ',/**LIST sName、sValue 后台代码自动转成 sName:sValue Map形式*/
         value: ''
       },
       {
@@ -115,7 +115,7 @@ const screenConfig = {
             placeholder: '',
             relactiveDom: 'dataType',
             relactiveDomValue: 'staticData',
-            value: {title:'标题', name: '测试名字', address: '上海市普陀区金沙江路 1518 弄0001'},
+            value: {title:'标题', name: '测试名字', address: '上海市普陀区金沙江路 1518 弄0001','dProductQty':100,'dProductRate':13},
           },
           {
             type: 'dycustComponents',
@@ -43,6 +43,8 @@ import { widgetHeatmap } from &quot;./configure/heatmap/widget-heatmap&quot;;
 import { widgetRadar } from "./configure/radarCharts/widget-radar";
 import { widgetBarLineStack } from "./configure/barlineCharts/widget-bar-line-stack";
 import { widgetProgress } from "./configure/percentCharts/widget-progress";
+import {widgetWaterLevelPond} from "./configure/div/widget-water-level-pond";
+
 export const widgetTool = [
   //图层
@@ -84,5 +86,7 @@ export const widgetTool = [
   widgetHeatmap,
   widgetRadar,
   widgetBarLineStack,
-  widgetProgress
+  widgetProgress,
+  widgetWaterLevelPond
+
 ]
+<!--
+  胶囊柱图
+-->
+<template>
+  <dv-water-level-pond :config="options" :style="styleObj"/>
+</template>
+<script>
+import waterLevelPond from "@jiaminghi/data-view/lib/components/waterLevelPond";
+import Vue from "vue";
+import {mapState} from "vuex";
+Vue.use(waterLevelPond)
+export default {
+  name: "WidgetWaterLevelPond",
+  props: {
+    value: Object,
+    ispreview: Boolean,
+  },
+  data() {
+    return {
+      //返回图标数据
+      options: {
+        data:[20],//水位位置
+        shape:'rect',//水位图形状
+        colors: [],//水位图配色
+        waveNum: 3,//波浪数量
+        waveHeight: 40,//波浪高度
+        waveOpacity: 40,//波浪透明度
+        formatter: '{value}%'//信息格式化
+      },
+      optionsStyle: {}, // 样式
+      optionsData: {}, // 数据
+      optionsCollapse: {}, // 图标属性
+      optionsSetup: {}
+    };
+  },
+  computed: {
+    ...mapState('dataSource', ['staticData']),
+    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
+      };
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsStyle = val.position;
+        this.optionsData = val.data;
+        this.optionsSetup = val.setup;
+        this.editorOptions();
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.optionsStyle = this.value.position;
+    this.optionsData = this.value.data;
+    this.optionsSetup = this.value.setup;
+    this.editorOptions();
+  },
+  methods: {
+    // 修改图标options属性
+    editorOptions() {
+      //颜色值修改
+      this.setOptionsColor();
+      //数据修改
+      this.setOptionsData();
+      //水位位置
+      this.showText();
+    },
+    // 颜色修改
+    setOptionsColor() {
+      const optionsSetup = this.optionsSetup;
+      const customColor = optionsSetup.customColor;
+      if (!customColor) return;
+      const arrColor = [];
+      for (let i = 0; i < customColor.length; i++) {
+        arrColor.push(customColor[i].color);
+      }
+      this.options.colors = arrColor;
+      this.options = Object.assign({}, this.options);
+    },
+    //水位位置
+    showText() {
+      const {slectedDataType,waterLevelPondDataText} = this.optionsSetup;
+      let datav = this.staticData[slectedDataType] || waterLevelPondDataText;
+      let dataArray = datav.toString().split(",");
+      this.options.data = dataArray;
+    },
+    // 数据修改
+    setOptionsData() {
+      const optionsSetup = this.optionsSetup;
+      this.options.shape=optionsSetup.shape;//水位图形状
+      this.options.waveHeight=optionsSetup.waveHeight;//波浪高度
+      let waveOpacity = optionsSetup.waveHeight||0;
+      this.options.waveOpacity= waveOpacity/100;//波浪透明度
+      this.options.formatter = optionsSetup.formatter;
+      this.options.waveNum = optionsSetup.waveNum;//波浪数量
+    },
+
+  }
+};
+
+</script>
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>
@@ -43,10 +43,12 @@ import widgetRadar from &quot;./radar/widgetRadar&quot;;
 import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
 import widgetDecorate from "./decorate/decorate.vue";
 // import widgetDiv from "./div/widgetDiv.vue";
-import widgetBorderBox from "./div/widgetBorderBox.vue";
+import widgetBorderBox from "./div/widgetBorderBox";
 import widgetProgress from "./percent/widgetProgress";
-import widgetDecoration from "./div/widgetDecoration.vue";
-import widgetCapsuleCart from "./bar/widgetCapsuleChart.vue";
+import widgetDecoration from "./div/widgetDecoration";
+import widgetCapsuleChart from "./bar/widgetCapsuleChart";
+import widgetWaterLevelPond from "./div/widgetWaterLevelPond";
+
 export default {
   name: "WidgetTemp",
@@ -85,8 +87,9 @@ export default {
     widgetBarLineStackChart,
     widgetBorderBox,
     widgetDecoration,
-    widgetCapsuleCart,
-    widgetProgress
+    widgetCapsuleChart,
+    widgetProgress,
+    widgetWaterLevelPond
   },
   model: {
     prop: "value",
@@ -52,6 +52,7 @@ import widgetBorderBox from &quot;./div/widgetBorderBox.vue&quot;;
 import widgetDecoration from "./div/widgetDecoration.vue";
 import widgetCapsuleChart from "./bar/widgetCapsuleChart";
 import widgetProgress from "./percent/widgetProgress";
+import widgetWaterLevelPond from "./div/widgetWaterLevelPond";
 export default {
   name: "Widget",
@@ -91,7 +92,8 @@ export default {
     widgetHeatmap,
     widgetRadar,
     widgetBarLineStackChart,
-    widgetProgress
+    widgetProgress,
+    widgetWaterLevelPond
   },
   model: {
     prop: "value",