qiangmj / report-ui

Commit 5cedf20307768ab01baf81e016295b000fea5ea2

Authored by qianbao
1 parent ee5dc225

1、添加水位图

Inline Side-by-side
Showing 7 changed files with 269 additions and 10 deletions
src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-capsule-chart.js
  View file @5cedf20
... ... @@ -105,7 +105,7 @@ export const widgetCapsuleChart = {
105 105 relactiveDom: 'dataType',
106 106 relactiveDomValue: 'dynamicData',
107 107 chartType: 'widget-capsule-chart',
108   - dictKey: 'STACK_PROPERTIES',
  108 + dictKey: 'BAR_PROPERTIES',
109 109 value: '',
110 110 },
111 111 ],
... ...
src/views/bigscreenDesigner/designer/tools/configure/div/widget-water-level-pond.js 0 → 100644
  View file @5cedf20
  1 +/*
  2 + * @Descripttion: 水位图
  3 + */
  4 +export const widgetWaterLevelPond= {
  5 + code: 'widget-water-level-pond',
  6 + type: 'html',
  7 + tabName: '图层',
  8 + label: '水位图',
  9 + icon: 'iconshouji',
  10 + options: {
  11 + // 配置
  12 + setup: [
  13 + {
  14 + type: 'el-input-text',
  15 + label: '图层名称',
  16 + name: 'layerName',
  17 + required: false,
  18 + placeholder: '',
  19 + value: '水位图',
  20 + },
  21 + {
  22 + type: 'el-input-text',
  23 + label: '水位数据',
  24 + name: 'waterLevelPondDataText',
  25 + required: false,
  26 + placeholder: '',
  27 + value: '0',
  28 + },
  29 + {
  30 + type: 'el-select-static',
  31 + label: '主数据源数据',
  32 + name: 'slectedDataType',
  33 + require: false,
  34 + placeholder: '',
  35 + selectOptions: [],
  36 + value: '',
  37 + },
  38 + {
  39 + type: 'el-select',
  40 + label: '水位图形状',
  41 + name: 'shape',
  42 + required: false,
  43 + placeholder: '',
  44 + selectOptions: [
  45 + {code: 'rect', name: '矩形'},
  46 + {code: 'roundRect', name: '圆角矩形'},
  47 + {code: 'round', name: '圆形'}
  48 + ],
  49 + value: 'rect'
  50 + },
  51 + {
  52 + type: 'el-input-number',
  53 + label: '波浪数量',
  54 + name: 'waveNum',
  55 + required: false,
  56 + placeholder: '',
  57 + value: 1,
  58 + },
  59 + {
  60 + type: 'el-input-number',
  61 + label: '波浪高度',
  62 + name: 'waveHeight',
  63 + required: false,
  64 + placeholder: '',
  65 + value: 40,
  66 + },
  67 + {
  68 + type: 'el-slider',
  69 + label: '波浪透明度',
  70 + name: 'waveOpacity',
  71 + required: false,
  72 + placeholder: '',
  73 + value: 0.4,
  74 + },
  75 + {
  76 + type: 'el-input-text',
  77 + label: '信息格式化',
  78 + name: 'formatter',
  79 + required: false,
  80 + placeholder: '',
  81 + value: '{value}%',
  82 + },
  83 + [{
  84 + name: '水位图配色',
  85 + list: [
  86 + {
  87 + type: 'customColor',
  88 + label: '',
  89 + name: 'customColor',
  90 + required: false,
  91 + value: [{ color: '#1E90FF' }, { color: '#96bfff' }],
  92 + },
  93 + ],
  94 + }],
  95 + ],
  96 + // 数据
  97 + data: [],
  98 + // 坐标
  99 + position: [
  100 + {
  101 + type: 'el-input-number',
  102 + label: '左边距',
  103 + name: 'left',
  104 + required: false,
  105 + placeholder: '',
  106 + value: 10,
  107 + },
  108 + {
  109 + type: 'el-input-number',
  110 + label: '上边距',
  111 + name: 'top',
  112 + required: false,
  113 + placeholder: '',
  114 + value: 10,
  115 + },
  116 + {
  117 + type: 'el-input-number',
  118 + label: '宽度',
  119 + name: 'width',
  120 + required: false,
  121 + placeholder: '该容器在1920px大屏中的宽度',
  122 + value: 200,
  123 + },
  124 + {
  125 + type: 'el-input-number',
  126 + label: '高度',
  127 + name: 'height',
  128 + required: false,
  129 + placeholder: '该容器在1080px大屏中的高度',
  130 + value: 350,
  131 + },
  132 + ],
  133 + }
  134 +}
... ...
src/views/bigscreenDesigner/designer/tools/index.js
  View file @5cedf20
... ... @@ -51,7 +51,7 @@ const screenConfig = {
51 51 label: '主数据源',
52 52 name: 'master',
53 53 required: false,
54   - placeholder: '全局数据源[List:sName、sValue] ',/**LIST sName、sValue 后台代码自动转成 sName:sValue Map形式*/
  54 + placeholder: '主数据源[List:sName、sValue] ',/**LIST sName、sValue 后台代码自动转成 sName:sValue Map形式*/
55 55 value: ''
56 56 },
57 57 {
... ... @@ -115,7 +115,7 @@ const screenConfig = {
115 115 placeholder: '',
116 116 relactiveDom: 'dataType',
117 117 relactiveDomValue: 'staticData',
118   - value: {title:'标题', name: '测试名字', address: '上海市普陀区金沙江路 1518 弄0001'},
  118 + value: {title:'标题', name: '测试名字', address: '上海市普陀区金沙江路 1518 弄0001','dProductQty':100,'dProductRate':13},
119 119 },
120 120 {
121 121 type: 'dycustComponents',
... ...
src/views/bigscreenDesigner/designer/tools/main.js
  View file @5cedf20
... ... @@ -43,6 +43,8 @@ import { widgetHeatmap } from "./configure/heatmap/widget-heatmap";
43 43 import { widgetRadar } from "./configure/radarCharts/widget-radar";
44 44 import { widgetBarLineStack } from "./configure/barlineCharts/widget-bar-line-stack";
45 45 import { widgetProgress } from "./configure/percentCharts/widget-progress";
  46 +import {widgetWaterLevelPond} from "./configure/div/widget-water-level-pond";
  47 +
46 48  
47 49 export const widgetTool = [
48 50 //图层
... ... @@ -84,5 +86,7 @@ export const widgetTool = [
84 86 widgetHeatmap,
85 87 widgetRadar,
86 88 widgetBarLineStack,
87   - widgetProgress
  89 + widgetProgress,
  90 + widgetWaterLevelPond
  91 +
88 92 ]
... ...
src/views/bigscreenDesigner/designer/widget/div/widgetWaterLevelPond.vue 0 → 100644
  View file @5cedf20
  1 +<!--
  2 + 胶囊柱图
  3 +-->
  4 +<template>
  5 + <dv-water-level-pond :config="options" :style="styleObj"/>
  6 +</template>
  7 +<script>
  8 +import waterLevelPond from "@jiaminghi/data-view/lib/components/waterLevelPond";
  9 +import Vue from "vue";
  10 +import {mapState} from "vuex";
  11 +Vue.use(waterLevelPond)
  12 +export default {
  13 + name: "WidgetWaterLevelPond",
  14 + props: {
  15 + value: Object,
  16 + ispreview: Boolean,
  17 + },
  18 + data() {
  19 + return {
  20 + //返回图标数据
  21 + options: {
  22 + data:[20],//水位位置
  23 + shape:'rect',//水位图形状
  24 + colors: [],//水位图配色
  25 + waveNum: 3,//波浪数量
  26 + waveHeight: 40,//波浪高度
  27 + waveOpacity: 40,//波浪透明度
  28 + formatter: '{value}%'//信息格式化
  29 + },
  30 + optionsStyle: {}, // 样式
  31 + optionsData: {}, // 数据
  32 + optionsCollapse: {}, // 图标属性
  33 + optionsSetup: {}
  34 + };
  35 + },
  36 + computed: {
  37 + ...mapState('dataSource', ['staticData']),
  38 + styleObj() {
  39 + return {
  40 + position: this.ispreview ? "absolute" : "static",
  41 + width: this.optionsStyle.width + "px",
  42 + height: this.optionsStyle.height + "px",
  43 + left: this.optionsStyle.left + "px",
  44 + top: this.optionsStyle.top + "px",
  45 + background: this.optionsSetup.background
  46 + };
  47 + },
  48 + },
  49 + watch: {
  50 + value: {
  51 + handler(val) {
  52 + this.optionsStyle = val.position;
  53 + this.optionsData = val.data;
  54 + this.optionsSetup = val.setup;
  55 + this.editorOptions();
  56 + },
  57 + deep: true
  58 + }
  59 + },
  60 + created() {
  61 + this.optionsStyle = this.value.position;
  62 + this.optionsData = this.value.data;
  63 + this.optionsSetup = this.value.setup;
  64 + this.editorOptions();
  65 + },
  66 + methods: {
  67 + // 修改图标options属性
  68 + editorOptions() {
  69 + //颜色值修改
  70 + this.setOptionsColor();
  71 + //数据修改
  72 + this.setOptionsData();
  73 + //水位位置
  74 + this.showText();
  75 + },
  76 + // 颜色修改
  77 + setOptionsColor() {
  78 + const optionsSetup = this.optionsSetup;
  79 + const customColor = optionsSetup.customColor;
  80 + if (!customColor) return;
  81 + const arrColor = [];
  82 + for (let i = 0; i < customColor.length; i++) {
  83 + arrColor.push(customColor[i].color);
  84 + }
  85 + this.options.colors = arrColor;
  86 + this.options = Object.assign({}, this.options);
  87 + },
  88 + //水位位置
  89 + showText() {
  90 + const {slectedDataType,waterLevelPondDataText} = this.optionsSetup;
  91 + let datav = this.staticData[slectedDataType] || waterLevelPondDataText;
  92 + let dataArray = datav.toString().split(",");
  93 + this.options.data = dataArray;
  94 + },
  95 + // 数据修改
  96 + setOptionsData() {
  97 + const optionsSetup = this.optionsSetup;
  98 + this.options.shape=optionsSetup.shape;//水位图形状
  99 + this.options.waveHeight=optionsSetup.waveHeight;//波浪高度
  100 + let waveOpacity = optionsSetup.waveHeight||0;
  101 + this.options.waveOpacity= waveOpacity/100;//波浪透明度
  102 + this.options.formatter = optionsSetup.formatter;
  103 + this.options.waveNum = optionsSetup.waveNum;//波浪数量
  104 + },
  105 +
  106 + }
  107 +};
  108 +
  109 +</script>
  110 +<style scoped lang="scss">
  111 +.echarts {
  112 + width: 100%;
  113 + height: 100%;
  114 + overflow: hidden;
  115 +}
  116 +</style>
... ...
src/views/bigscreenDesigner/designer/widget/temp.vue
  View file @5cedf20
... ... @@ -43,10 +43,12 @@ import widgetRadar from &quot;./radar/widgetRadar&quot;;
43 43 import widgetBarLineStackChart from "./barline/widgetBarLineStackChart";
44 44 import widgetDecorate from "./decorate/decorate.vue";
45 45 // import widgetDiv from "./div/widgetDiv.vue";
46   -import widgetBorderBox from "./div/widgetBorderBox.vue";
  46 +import widgetBorderBox from "./div/widgetBorderBox";
47 47 import widgetProgress from "./percent/widgetProgress";
48   -import widgetDecoration from "./div/widgetDecoration.vue";
49   -import widgetCapsuleCart from "./bar/widgetCapsuleChart.vue";
  48 +import widgetDecoration from "./div/widgetDecoration";
  49 +import widgetCapsuleChart from "./bar/widgetCapsuleChart";
  50 +import widgetWaterLevelPond from "./div/widgetWaterLevelPond";
  51 +
50 52  
51 53 export default {
52 54 name: "WidgetTemp",
... ... @@ -85,8 +87,9 @@ export default {
85 87 widgetBarLineStackChart,
86 88 widgetBorderBox,
87 89 widgetDecoration,
88   - widgetCapsuleCart,
89   - widgetProgress
  90 + widgetCapsuleChart,
  91 + widgetProgress,
  92 + widgetWaterLevelPond
90 93 },
91 94 model: {
92 95 prop: "value",
... ...
src/views/bigscreenDesigner/designer/widget/widget.vue
  View file @5cedf20
... ... @@ -52,6 +52,7 @@ import widgetBorderBox from &quot;./div/widgetBorderBox.vue&quot;;
52 52 import widgetDecoration from "./div/widgetDecoration.vue";
53 53 import widgetCapsuleChart from "./bar/widgetCapsuleChart";
54 54 import widgetProgress from "./percent/widgetProgress";
  55 +import widgetWaterLevelPond from "./div/widgetWaterLevelPond";
55 56  
56 57 export default {
57 58 name: "Widget",
... ... @@ -91,7 +92,8 @@ export default {
91 92 widgetHeatmap,
92 93 widgetRadar,
93 94 widgetBarLineStackChart,
94   - widgetProgress
  95 + widgetProgress,
  96 + widgetWaterLevelPond
95 97 },
96 98 model: {
97 99 prop: "value",
... ...