qiangmj / report-ui

Commit 78ceab9205cf00c17d62901acfd5c18aacddd189

Authored by qianbao
1 parent 203c834f

定时时间统一设置1H 

添加滑块
Inline Side-by-side
Showing 44 changed files with 497 additions and 125 deletions
config/dev.env.js
  View file @78ceab9
1 1 'use strict'
2 2 const merge = require('webpack-merge')
3 3 const prodEnv = require('./prod.env')
  4 +const isDev = false;
  5 +const ipAddresses = isDev?"weberp.xlyprint.cn":"127.0.0.1:8080";
  6 + //window.location.host;
4 7  
5 8 module.exports = merge(prodEnv, {
6 9 NODE_ENV: '"development"',
7   -// BASE_API: '"http://127.0.0.1:8080/xlyReport"',
8   - BASE_API: '"http://weberp.xlyprint.cn/xlyReport"',
  10 + BASE_API: '"http://'+ipAddresses+'/xlyReport"',
  11 +// BASE_API: '"http://weberp.xlyprint.cn/xlyReport"',
9 12 //API_WS: '"ws://127.0.0.1:8080/api/websocket"'
10 13 })
... ...
package.json
  View file @78ceab9
... ... @@ -24,6 +24,7 @@
24 24 "element-ui": "^2.9.2",
25 25 "js-cookie": "2.2.0",
26 26 "jsbarcode": "^3.11.4",
  27 + "loading-view-vue": "^1.0.3",
27 28 "miment": "^0.0.9",
28 29 "moment": "^2.29.1",
29 30 "monaco-editor": "^0.20.0",
... ...
src/utils/request.js
  View file @78ceab9
... ... @@ -5,7 +5,7 @@ import { getToken } from '@/utils/auth'
5 5 // 创建axios实例
6 6 const service = axios.create({
7 7 baseURL: process.env.BASE_API, // api 的 base_url
8   - timeout: 60000 // 请求超时时间
  8 + timeout: 20000 // 请求超时时间
9 9 })
10 10  
11 11 // request拦截器
... ...
src/views/bigscreenDesigner/designer/index.vue
  View file @78ceab9
... ... @@ -316,6 +316,10 @@ import { mapMutations } from 'vuex';
316 316 import process from "process";
317 317 import { debounce } from '@/utils/debounce'; // 引入防抖函数
318 318  
  319 +import loadingViewerVue from 'loading-view-vue'
  320 +import Vue from "vue";
  321 +Vue.use(loadingViewerVue,{mode:"5"});
  322 +
319 323 export default {
320 324 name: "Login",
321 325 components: {
... ... @@ -694,7 +698,10 @@ export default {
694 698 widgets: this.widgets,
695 699 };
696 700 // console.log(screenData);
  701 + //loading
  702 + this.$showLoading();
697 703 const { code, data } = await insertDashboard(screenData);
  704 + this.$hideLoading();
698 705 if (code == "200") {
699 706 this.$message.success("保存成功！");
700 707 }
... ...
src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-compare.js
  View file @78ceab9
... ... @@ -700,7 +700,7 @@ export const widgetBarCompare = {
700 700 name: 'refreshTime',
701 701 relactiveDom: 'dataType',
702 702 relactiveDomValue: 'dynamicData',
703   - value: 5000
  703 + value: 3600000
704 704 },
705 705 {
706 706 type: 'el-button',
... ... @@ -732,7 +732,7 @@ export const widgetBarCompare = {
732 732 relactiveDom: 'dataType',
733 733 relactiveDomValue: 'dynamicData',
734 734 chartType: 'widget-stackchart',
735   - dictKey: 'STACK_PROPERTIES',
  735 + dictKey: 'COMPARE_PROPERTIES',
736 736 value: '',
737 737 },
738 738 ],
... ...
src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-stack.js
  View file @78ceab9
... ... @@ -659,7 +659,7 @@ export const widgetBarStack = {
659 659 name: 'refreshTime',
660 660 relactiveDom: 'dataType',
661 661 relactiveDomValue: 'dynamicData',
662   - value: 5000
  662 + value: 3600000
663 663 },
664 664 {
665 665 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js
  View file @78ceab9
... ... @@ -581,7 +581,7 @@ export const widgetBarchart = {
581 581 name: 'refreshTime',
582 582 relactiveDom: 'dataType',
583 583 relactiveDomValue: 'dynamicData',
584   - value: 5000
  584 + value: 3600000
585 585 },
586 586 {
587 587 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-capsule-chart.js
  View file @78ceab9
... ... @@ -84,7 +84,7 @@ export const widgetCapsuleChart = {
84 84 name: 'refreshTime',
85 85 relactiveDom: 'dataType',
86 86 relactiveDomValue: 'dynamicData',
87   - value: 5000
  87 + value: 3600000
88 88 },
89 89 {
90 90 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-gradient-barchart.js
  View file @78ceab9
... ... @@ -582,7 +582,7 @@ export const widgetGradientBarchart = {
582 582 name: 'refreshTime',
583 583 relactiveDom: 'dataType',
584 584 relactiveDomValue: 'dynamicData',
585   - value: 5000
  585 + value: 3600000
586 586 },
587 587 {
588 588 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-bar-line-stack.js
  View file @78ceab9
... ... @@ -871,7 +871,7 @@ export const widgetBarLineStack = {
871 871 name: 'refreshTime',
872 872 relactiveDom: 'dataType',
873 873 relactiveDomValue: 'dynamicData',
874   - value: 5000
  874 + value: 3600000
875 875 },
876 876 {
877 877 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-barlinechart.js
  View file @78ceab9
... ... @@ -895,7 +895,7 @@ export const widgetBarlinechart = {
895 895 name: 'refreshTime',
896 896 relactiveDom: 'dataType',
897 897 relactiveDomValue: 'dynamicData',
898   - value: 5000
  898 + value: 3600000
899 899 },
900 900 {
901 901 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-more-bar-line.js
  View file @78ceab9
... ... @@ -887,7 +887,7 @@ export const widgetMoreBarLine = {
887 887 name: 'refreshTime',
888 888 relactiveDom: 'dataType',
889 889 relactiveDomValue: 'dynamicData',
890   - value: 5000
  890 + value: 3600000
891 891 },
892 892 {
893 893 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/configure/funnelCharts/widget-conical-column-chart.js
  View file @78ceab9
... ... @@ -102,7 +102,7 @@ export const widgetConicalColumnChart = {
102 102 name: 'refreshTime',
103 103 relactiveDom: 'dataType',
104 104 relactiveDomValue: 'dynamicData',
105   - value: 5000
  105 + value: 3600000
106 106 },
107 107 {
108 108 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/configure/funnelCharts/widget-funnel.js
  View file @78ceab9
... ... @@ -342,7 +342,7 @@ export const widgetFunnel = {
342 342 name: 'refreshTime',
343 343 relactiveDom: 'dataType',
344 344 relactiveDomValue: 'dynamicData',
345   - value: 5000
  345 + value: 3600000
346 346 },
347 347 {
348 348 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/configure/heatmap/widget-heatmap.js
  View file @78ceab9
... ... @@ -578,7 +578,7 @@ export const widgetHeatmap = {
578 578 name: 'refreshTime',
579 579 relactiveDom: 'dataType',
580 580 relactiveDomValue: 'dynamicData',
581   - value: 5000
  581 + value: 3600000
582 582 },
583 583 {
584 584 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-compare.js
  View file @78ceab9
... ... @@ -736,7 +736,7 @@ export const widgetLineCompare = {
736 736 name: 'marginBottom',
737 737 required: false,
738 738 placeholder: '',
739   - value: 40,
  739 + value: 10,
740 740 },
741 741 ],
742 742 },
... ... @@ -781,7 +781,7 @@ export const widgetLineCompare = {
781 781 name: 'refreshTime',
782 782 relactiveDom: 'dataType',
783 783 relactiveDomValue: 'dynamicData',
784   - value: 5000
  784 + value: 3600000
785 785 },
786 786 {
787 787 type: 'el-button',
... ... @@ -813,7 +813,7 @@ export const widgetLineCompare = {
813 813 relactiveDom: 'dataType',
814 814 relactiveDomValue: 'dynamicData',
815 815 chartType: 'widget-stackchart',
816   - dictKey: 'STACK_PROPERTIES',
  816 + dictKey: 'COMPARE_PROPERTIES',
817 817 value: '',
818 818 },
819 819 ],
... ...
src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-stack.js
  View file @78ceab9
... ... @@ -646,8 +646,85 @@ export const widgetLineStack = {
646 646 name: 'marginBottom',
647 647 required: false,
648 648 placeholder: '',
649   - value: 10,
  649 + value: 15,
  650 + },
  651 + ],
  652 + },
  653 + {
  654 + name: '底部滑块设置',
  655 + list: [
  656 + {
  657 + type: 'el-switch',
  658 + label: '显示',
  659 + name: 'isShowZoom',
  660 + require: false,
  661 + placeholder: '',
  662 + value: false,
650 663 },
  664 + {
  665 + type: 'el-slider',
  666 + label: '起始位置%',
  667 + name: 'startZoom',
  668 + required: false,
  669 + placeholder: '',
  670 + value: 80,
  671 + },
  672 + {
  673 + type: 'el-slider',
  674 + label: '结束位置%',
  675 + name: 'endZoom',
  676 + required: false,
  677 + placeholder: '',
  678 + value: 100,
  679 + },
  680 + {
  681 + type: 'vue-color',
  682 + label: '边框颜色',
  683 + name: 'borderColorZoom',
  684 + required: false,
  685 + placeholder: '',
  686 + value: '#05a8ee'
  687 + },
  688 + // {
  689 + // type: 'el-input-number',
  690 + // label: '边框弧度',
  691 + // name: 'borderRadiusZoom',
  692 + // required: false,
  693 + // placeholder: '',
  694 + // value: 10,
  695 + // },
  696 + {
  697 + type: 'vue-color',
  698 + label: '边框背景',
  699 + name: 'backgroundColorZoom',
  700 + required: false,
  701 + placeholder: '',
  702 + value: '#fff'
  703 + },
  704 + {
  705 + type: 'el-input-number',
  706 + label: '边框高度',
  707 + name: 'heightZoom',
  708 + required: false,
  709 + placeholder: '',
  710 + value: '12'
  711 + },
  712 + {
  713 + type: 'el-input-number',
  714 + label: '距离左边距离%',
  715 + name: 'bottomLeft',
  716 + required: false,
  717 + placeholder: '',
  718 + value: 12
  719 + },
  720 + {
  721 + type: 'el-input-number',
  722 + label: '距离底部距离',
  723 + name: 'bottomZoom',
  724 + required: false,
  725 + placeholder: '',
  726 + value: 5
  727 + }
651 728 ],
652 729 },
653 730 {
... ... @@ -658,7 +735,7 @@ export const widgetLineStack = {
658 735 label: '',
659 736 name: 'customColor',
660 737 required: false,
661   - value: [{ color: '#ff7f50' }, { color: '#87cefa' }, { color: '#da70d6' }, { color: '#32cd32' }, { color: '#6495ed' }],
  738 + value: [{ color: '#05a8ee' }, { color: '#87cefa' }, { color: '#da70d6' }, { color: '#3247cd' }, { color: '#6495ed' }],
662 739 },
663 740 ],
664 741 },
... ... @@ -691,7 +768,7 @@ export const widgetLineStack = {
691 768 name: 'refreshTime',
692 769 relactiveDom: 'dataType',
693 770 relactiveDomValue: 'dynamicData',
694   - value: 5000
  771 + value: 3600000
695 772 },
696 773 {
697 774 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-linechart.js
  View file @78ceab9
... ... @@ -452,6 +452,22 @@ export const widgetLinechart = {
452 452 placeholder: '',
453 453 value: '#fff',
454 454 },
  455 + // {
  456 + // type: 'el-switch',
  457 + // label: '虚线分割显示',
  458 + // name: 'isShowSplitLinexX',
  459 + // require: false,
  460 + // placeholder: '',
  461 + // value: false,
  462 + // },
  463 + // {
  464 + // type: 'vue-color',
  465 + // label: '虚线分割颜色',
  466 + // name: 'splitLineColorYColor',
  467 + // required: false,
  468 + // placeholder: '',
  469 + // value: '#333',
  470 + // },
455 471 {
456 472 type: 'el-input-number',
457 473 label: '分割线宽度',
... ... @@ -559,8 +575,85 @@ export const widgetLinechart = {
559 575 name: 'marginBottom',
560 576 required: false,
561 577 placeholder: '',
562   - value: 10,
  578 + value: 15,
  579 + },
  580 + ],
  581 + },
  582 + {
  583 + name: '底部滑块设置',
  584 + list: [
  585 + {
  586 + type: 'el-switch',
  587 + label: '显示',
  588 + name: 'isShowZoom',
  589 + require: false,
  590 + placeholder: '',
  591 + value: false,
563 592 },
  593 + {
  594 + type: 'el-slider',
  595 + label: '起始位置%',
  596 + name: 'startZoom',
  597 + required: false,
  598 + placeholder: '',
  599 + value: 80,
  600 + },
  601 + {
  602 + type: 'el-slider',
  603 + label: '结束位置%',
  604 + name: 'endZoom',
  605 + required: false,
  606 + placeholder: '',
  607 + value: 100,
  608 + },
  609 + {
  610 + type: 'vue-color',
  611 + label: '边框颜色',
  612 + name: 'borderColorZoom',
  613 + required: false,
  614 + placeholder: '',
  615 + value: '#05a8ee'
  616 + },
  617 + // {
  618 + // type: 'el-input-number',
  619 + // label: '边框弧度',
  620 + // name: 'borderRadiusZoom',
  621 + // required: false,
  622 + // placeholder: '',
  623 + // value: 10,
  624 + // },
  625 + {
  626 + type: 'vue-color',
  627 + label: '边框背景',
  628 + name: 'backgroundColorZoom',
  629 + required: false,
  630 + placeholder: '',
  631 + value: '#fff'
  632 + },
  633 + {
  634 + type: 'el-input-number',
  635 + label: '边框高度',
  636 + name: 'heightZoom',
  637 + required: false,
  638 + placeholder: '',
  639 + value: '12'
  640 + },
  641 + {
  642 + type: 'el-input-number',
  643 + label: '距离左边距离px',
  644 + name: 'bottomLeft',
  645 + required: false,
  646 + placeholder: '',
  647 + value: 50
  648 + },
  649 + {
  650 + type: 'el-input-number',
  651 + label: '距离底部距离',
  652 + name: 'bottomZoom',
  653 + required: false,
  654 + placeholder: '',
  655 + value: 5
  656 + }
564 657 ],
565 658 },
566 659 {
... ... @@ -604,7 +697,7 @@ export const widgetLinechart = {
604 697 name: 'refreshTime',
605 698 relactiveDom: 'dataType',
606 699 relactiveDomValue: 'dynamicData',
607   - value: 5000
  700 + value: 3600000
608 701 },
609 702 {
610 703 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-airbubble-map.js
  View file @78ceab9
... ... @@ -314,7 +314,7 @@ export const widgetAirbubbleMap = {
314 314 name: 'refreshTime',
315 315 relactiveDom: 'dataType',
316 316 relactiveDomValue: 'dynamicData',
317   - value: 5000
  317 + value: 3600000
318 318 },
319 319 {
320 320 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-line-map.js
  View file @78ceab9
... ... @@ -391,7 +391,7 @@ export const widgetLineMap = {
391 391 name: 'refreshTime',
392 392 relactiveDom: 'dataType',
393 393 relactiveDomValue: 'dynamicData',
394   - value: 5000
  394 + value: 3600000
395 395 },
396 396 {
397 397 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-gauge.js
  View file @78ceab9
... ... @@ -310,7 +310,7 @@ export const widgetGauge = {
310 310 name: 'refreshTime',
311 311 relactiveDom: 'dataType',
312 312 relactiveDomValue: 'dynamicData',
313   - value: 5000
  313 + value: 3600000
314 314 },
315 315 {
316 316 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/configure/percentCharts/widget-pie-percentage.js
  View file @78ceab9
... ... @@ -187,7 +187,7 @@ export const widgetPiePercentage = {
187 187 name: 'refreshTime',
188 188 relactiveDom: 'dataType',
189 189 relactiveDomValue: 'dynamicData',
190   - value: 5000
  190 + value: 3600000
191 191 },
192 192 {
193 193 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-active-ring-chart.js
  View file @78ceab9
... ... @@ -169,7 +169,7 @@ export const widgetActiveRingChart= {
169 169 name: 'refreshTime',
170 170 relactiveDom: 'dataType',
171 171 relactiveDomValue: 'dynamicData',
172   - value: 5000
  172 + value: 3600000
173 173 },
174 174 {
175 175 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-pie-nightingale.js
  View file @78ceab9
... ... @@ -394,7 +394,7 @@ export const widgetPieNightingale = {
394 394 name: 'refreshTime',
395 395 relactiveDom: 'dataType',
396 396 relactiveDomValue: 'dynamicData',
397   - value: 5000
  397 + value: 3600000
398 398 },
399 399 {
400 400 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/configure/pieCharts/widget-piechart.js
  View file @78ceab9
... ... @@ -392,7 +392,7 @@ export const widgetPiechart = {
392 392 name: 'refreshTime',
393 393 relactiveDom: 'dataType',
394 394 relactiveDomValue: 'dynamicData',
395   - value: 5000
  395 + value: 3600000
396 396 },
397 397 {
398 398 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/configure/radarCharts/widget-radar.js
  View file @78ceab9
... ... @@ -512,7 +512,7 @@ export const widgetRadar = {
512 512 name: 'refreshTime',
513 513 relactiveDom: 'dataType',
514 514 relactiveDomValue: 'dynamicData',
515   - value: 5000
  515 + value: 3600000
516 516 },
517 517 {
518 518 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/configure/table/widget-rotate-ranking.js
  View file @78ceab9
... ... @@ -98,7 +98,7 @@ export const widgetRotateRanking= {
98 98 name: 'refreshTime',
99 99 relactiveDom: 'dataType',
100 100 relactiveDomValue: 'dynamicData',
101   - value: 30000
  101 + value: 3600000
102 102 },
103 103 {
104 104 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/configure/table/widget-scroll-ranking-board.js
  View file @78ceab9
... ... @@ -98,7 +98,7 @@ export const widgetScrollRankingBoard= {
98 98 name: 'refreshTime',
99 99 relactiveDom: 'dataType',
100 100 relactiveDomValue: 'dynamicData',
101   - value: 30000
  101 + value: 3600000
102 102 },
103 103 {
104 104 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/configure/table/widget-table.js
  View file @78ceab9
... ... @@ -229,7 +229,7 @@ export const widgetTable = {
229 229 name: 'refreshTime',
230 230 relactiveDom: 'dataType',
231 231 relactiveDomValue: 'dynamicData',
232   - value: 30000
  232 + value: 3600000
233 233 },
234 234 {
235 235 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/configure/wordcloudCharts/widget-word-cloud.js
  View file @78ceab9
... ... @@ -244,7 +244,7 @@ export const widgetWordCloud = {
244 244 name: 'refreshTime',
245 245 relactiveDom: 'dataType',
246 246 relactiveDomValue: 'dynamicData',
247   - value: 60000
  247 + value: 3600000
248 248 },
249 249 {
250 250 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/tools/index.js
  View file @78ceab9
... ... @@ -83,7 +83,7 @@ const screenConfig = {
83 83 name: 'refreshTime',
84 84 relactiveDom: 'dataType',
85 85 relactiveDomValue: 'dynamicData',
86   - value: 600000
  86 + value: 3600000
87 87 },
88 88 {
89 89 type: 'el-button',
... ...
src/views/bigscreenDesigner/designer/widget/bar/widgetBarCompareChart.vue
  View file @78ceab9
... ... @@ -7,7 +7,6 @@
7 7 <script>
8 8 export default {
9 9 name: "WidgetBarCompareChart",
10   - //参考 https://www.makeapie.com/editor.html?c=xrJwcCF3NZ
11 10 components: {},
12 11 props: {
13 12 value: Object,
... ...
src/views/bigscreenDesigner/designer/widget/barline/widgetMoreBarLineChart.vue
  View file @78ceab9
  1 +<!-- 多柱线图-->
1 2 <template>
2 3 <div :style='styleObj'>
3 4 <v-chart :options='options' autoresize/>
... ...
src/views/bigscreenDesigner/designer/widget/div/widgetSvg.vue
  View file @78ceab9
... ... @@ -3,7 +3,7 @@
3 3 -->
4 4 <template>
5 5 <div id="formStr" :class="['div_Style']"
6   - :style="styleColor" v-html="showText">
  6 + :style="styleColor" v-html="showText" v-if="isRouterAlive">
7 7 </div>
8 8 </template>
9 9 <script>
... ... @@ -23,10 +23,16 @@ export default {
23 23 svgData:[],
24 24 optionsData: {},
25 25 optionsSetUp: {},
  26 + flagInter: null,
  27 + isRouterAlive:true,
  28 + showText:''
26 29 };
27 30 },
  31 + beforeDestroy() {
  32 + clearInterval(this.flagInter);
  33 + },
28 34 computed: {
29   - ...mapState('dataSource', ['staticData']),
  35 + ...mapState('dataSource', ['staticData','staticRefreshTime']),
30 36 transStyle() {
31 37 return this.objToOne(this.options);
32 38 },
... ... @@ -39,23 +45,10 @@ export default {
39 45 top: this.transStyle.top + "px",
40 46 right: this.transStyle.right + "px"
41 47 };
  48 + const svg=this.getShowText();
  49 + this.showText=svg;
42 50 return styleColor;
43 51 },
44   - showText() {
45   - const {text, slectedDataType} = this.transStyle;
46   - const key = this.staticData[slectedDataType] || text;
47   - const dataSvg = this.value.setup.dynamicAddSvg;
48   - for (let i = 0; i < dataSvg.length; i++) {
49   - if(dataSvg[i].key==key){
50   - /** 控制svg图片拖动，原理在于设置svg的viewbox属性，viewbox的第一个参数控制左右位置，第二个参数设置上下位置 */
51   - /** 控制svg图片放大缩小，原理在于设置svg的viewbox属性，viewbox的第三个参数控制左右大小，第四个参数设置上下大小 */
52   - //设置svg 自适应 添加属性 viewBox="0,0,640,480"
53   - let svg = dataSvg[i].value;
54   - return svg;
55   - }
56   - }
57   - return "";
58   - },
59 52 },
60 53 watch: {
61 54 value: {
... ... @@ -71,20 +64,56 @@ export default {
71 64 mounted() {
72 65 this.options = this.value;
73 66 this.optionsData = this.value.data;
  67 + this.setSvgValue();
74 68 },
75 69 methods: {
76 70 initData() {
77 71 this.handlerSvgData();
78 72 },
  73 + // vue hack 之强制刷新组件
  74 + reload(){
  75 + this.isRouterAlive=false;
  76 + this.$nextTick(function(){
  77 + this.isRouterAlive=true;
  78 + })
  79 + },
79 80 handlerSvgData(){
80 81 const data = this.optionsSetUp.dynamicAddSvg;
81 82 this.svgData = data;
82 83 },
83   - getSvgValue(key){
84   - const data = this.optionsSetUp.dynamicAddSvg;
85   - for (let i = 0; i < data.length; i++) {
86   - if(data[i].key==key){
87   - return data[i].value;
  84 + //初始化设置SVG值
  85 + setSvgValue(){
  86 + const {slectedDataType} = this.transStyle;
  87 + if(this.isNotBlank(slectedDataType)){
  88 + const refreshTime = this.staticRefreshTime || 300000;
  89 + this.dynamicDataFn(refreshTime);
  90 + }
  91 + },
  92 + dynamicDataFn(refreshTime) {
  93 + if (this.ispreview) {
  94 + this.flagInter = setInterval(() => {
  95 + this.getEchartData();
  96 + }, refreshTime);
  97 + } else {
  98 + this.getEchartData();
  99 + }
  100 + },
  101 + getEchartData() {
  102 + const svg = this.getShowText();
  103 + this.showText=svg;
  104 + this.reload();
  105 + },
  106 + getShowText() {
  107 + const {text, slectedDataType} = this.transStyle;
  108 + const key = this.staticData[slectedDataType] || text;
  109 + const dataSvg = this.value.setup.dynamicAddSvg;
  110 + for (let i = 0; i < dataSvg.length; i++) {
  111 + if(dataSvg[i].key==key){
  112 + /** 控制svg图片拖动，原理在于设置svg的viewbox属性，viewbox的第一个参数控制左右位置，第二个参数设置上下位置 */
  113 + /** 控制svg图片放大缩小，原理在于设置svg的viewbox属性，viewbox的第三个参数控制左右大小，第四个参数设置上下大小 */
  114 + //设置svg 自适应 添加属性 viewBox="0,0,640,480"
  115 + let svg = dataSvg[i].value;
  116 + return svg;
88 117 }
89 118 }
90 119 return "";
... ...
src/views/bigscreenDesigner/designer/widget/line/widgetLineCompareChart.vue
  View file @78ceab9
... ... @@ -7,7 +7,6 @@
7 7 <script>
8 8 export default {
9 9 name: "WidgetBarCompareChart",
10   - //参考 https://www.makeapie.com/editor.html?c=xOjLyozu2W
11 10 components: {},
12 11 props: {
13 12 value: Object,
... ...
src/views/bigscreenDesigner/designer/widget/line/widgetLineStackChart.vue
  View file @78ceab9
  1 +<!-- 折线堆叠图 json-->
1 2 <template>
2 3 <div :style="styleObj">
3 4 <v-chart :options="options" autoresize/>
... ... @@ -51,7 +52,8 @@ export default {
51 52 barBorderRadius: null
52 53 }
53 54 }
54   - ]
  55 + ],
  56 + dataZoom:[]
55 57 },
56 58 optionsStyle: {}, // 样式
57 59 optionsData: {}, // 数据
... ... @@ -99,6 +101,7 @@ export default {
99 101 this.setOptionsTooltip();
100 102 this.setOptionsMargin();
101 103 this.setOptionsLegend();
  104 + this.setOptionsDataZoom();
102 105 this.setOptionsData();
103 106 },
104 107 // 标题修改
... ... @@ -268,6 +271,27 @@ export default {
268 271 };
269 272 legend.itemWidth = optionsSetup.legendWidth;
270 273 },
  274 + //下方滑块设置
  275 + setOptionsDataZoom() {
  276 + const optionsSetup = this.optionsSetup;
  277 + const dataZoom ={};
  278 + const dataZoomList =[];
  279 + dataZoom.type= 'slider';
  280 + dataZoom.show= optionsSetup.isShowZoom;//显示滚动条
  281 + dataZoom.zoomLock=false;//锁定滚动条缩放，（固定滚动条长度）
  282 + dataZoom.left=optionsSetup.bottomLeft+'%';//离左边的百分比距离
  283 + dataZoom.bottom=optionsSetup.bottomZoom;//距离底部距离
  284 + dataZoom.start=optionsSetup.startZoom;//开始位置
  285 + dataZoom.end=optionsSetup.endZoom;//结束位置
  286 + dataZoom.showDataShadow=true; //屏蔽折线图，true为显示折线图
  287 + // dataZoom.barBorderRadius=optionsSetup.borderRadiusZoom;
  288 + dataZoom.borderColor=optionsSetup.borderColorZoom;
  289 + dataZoom.height=optionsSetup.heightZoom;
  290 + dataZoom.backgroundColor=optionsSetup.backgroundColorZoom;
  291 + dataZoomList.push(dataZoom);
  292 + this.options.dataZoom=dataZoomList;
  293 + this.options={...this.options};
  294 + },
271 295 // 图例名称设置
272 296 setOptionsLegendName(name) {
273 297 const optionsSetup = this.optionsSetup;
... ...
src/views/bigscreenDesigner/designer/widget/line/widgetLinechart.vue
  View file @78ceab9
... ... @@ -25,7 +25,8 @@ export default {
25 25 },
26 26 tooltip: {
27 27 trigger: "item",
28   - formatter: "{a} <br/>{b} : {c}%"
  28 + formatter: "{a} <br/>{b} : {c}%",
  29 + borderRadius: 8, //边框圆角
29 30 },
30 31 legend: {
31 32 textStyle: {
... ... @@ -51,10 +52,25 @@ export default {
51 52 }
52 53 }
53 54 },
  55 + dataZoom: [],
54 56 series: [
55 57 {
56 58 data: [],
57   - type: "line"
  59 + type: "line",
  60 + // markLine: {
  61 + // silent: true,
  62 + // lineStyle: {
  63 + // color: '#333'
  64 + // },
  65 + // data: [
  66 + // {
  67 + // yAxis: 1000
  68 + // },
  69 + // {
  70 + // yAxis: 2000
  71 + // }
  72 + // ]
  73 + // },
58 74 }
59 75 ]
60 76 },
... ... @@ -101,6 +117,7 @@ export default {
101 117 this.setOptionsTitle();
102 118 this.setOptionsX();
103 119 this.setOptionsY();
  120 + this.setOptionsDataZoom();
104 121 this.setOptionsTop();
105 122 this.setOptionsTooltip();
106 123 this.setOptionsData();
... ... @@ -252,6 +269,27 @@ export default {
252 269 }
253 270 this.options.series = series;
254 271 },
  272 + //下方滑块设置
  273 + setOptionsDataZoom() {
  274 + const optionsSetup = this.optionsSetup;
  275 + const dataZoom ={};
  276 + const dataZoomList =[];
  277 + dataZoom.type= 'slider';
  278 + dataZoom.show= optionsSetup.isShowZoom;//显示滚动条
  279 + dataZoom.zoomLock=false;//锁定滚动条缩放，（固定滚动条长度）
  280 + dataZoom.left=optionsSetup.bottomLeft+'px';//离左边的百分比距离
  281 + dataZoom.bottom=optionsSetup.bottomZoom;//距离底部距离
  282 + dataZoom.start=optionsSetup.startZoom;//开始位置
  283 + dataZoom.end=optionsSetup.endZoom;//结束位置
  284 + dataZoom.showDataShadow=true; //屏蔽折线图，true为显示折线图
  285 + // dataZoom.barBorderRadius=optionsSetup.borderRadiusZoom;
  286 + dataZoom.borderColor=optionsSetup.borderColorZoom;
  287 + dataZoom.height=optionsSetup.heightZoom;
  288 + dataZoom.backgroundColor=optionsSetup.backgroundColorZoom;
  289 + dataZoomList.push(dataZoom);
  290 + this.options.dataZoom=dataZoomList;
  291 + this.options={...this.options};
  292 + },
255 293 // tooltip 设置
256 294 setOptionsTooltip() {
257 295 const optionsSetup = this.optionsSetup;
... ... @@ -351,4 +389,7 @@ export default {
351 389 height: 100%;
352 390 overflow: hidden;
353 391 }
  392 +.echarts-slider-handle {
  393 + border-radius: 8px;
  394 +}
354 395 </style>
... ...
src/views/bigscreenDesigner/designer/widget/percent/widgetProgress.vue
  View file @78ceab9
1 1 <template>
2 2 <div class="progress" :style="styleColor">
3   - <el-progress class="progress-content" :percentage="dataList.percentage" :strokeWidth="dataList.strokeWidth"
4   - :showText="dataList.showText" :textInside="dataList.textInside" :color="dataList.color"></el-progress>
  3 + <el-progress class="progress-content" :strokeWidth="dataList.strokeWidth"
  4 + :showText="dataList.showText" :textInside="dataList.textInside" :color="dataList.color" :percentage="dataList.percentage" v-if="isRouterAlive" ></el-progress>
5 5 </div>
6 6 </template>
7 7 <script>
... ... @@ -13,15 +13,29 @@ export default {
13 13 value: Object,
14 14 ispreview: Boolean
15 15 },
  16 + created() {
  17 + this.options = this.value;
  18 + },
  19 + provide(){
  20 + return{
  21 + reload:this.reload
  22 + }
  23 + },
16 24 data() {
17 25 return {
18   - options: {}
  26 + options: {},
  27 + flagInter: null,
  28 + isRouterAlive:true
19 29 };
20 30 },
  31 + beforeDestroy() {
  32 + clearInterval(this.flagInter);
  33 + },
21 34 computed: {
22   - ...mapState('dataSource', ['staticData']),
  35 + ...mapState('dataSource', ['staticData','staticRefreshTime']),
23 36 transStyle() {
24   - return this.objToOne(this.options);
  37 + const obj = this.objToOne(this.options);
  38 + return obj;
25 39 },
26 40 styleColor() {
27 41 let result = {
... ... @@ -58,19 +72,19 @@ export default {
58 72 strokeWidth: this.transStyle.strokeWidth || 6,
59 73 showText: this.transStyle.showText,
60 74 textInside: this.transStyle.textInside,
61   - color: this.transStyle.color,
62   - percentage: 0
  75 + color : this.transStyle.color,
  76 + percentage : 40
63 77 };
64   - const percentage = this.staticData[this.transStyle.slectedDataType];
65   - const slectedDataColor = this.staticData[this.transStyle.slectedDataColor];
66   - if (percentage) {
67   - result.percentage = parseInt(percentage);
  78 + let percentage = this.getShowText();
  79 + const slectedDataColor = this.getColor();
  80 + if (this.isNotNull(percentage)) {
  81 + let percentageValue = parseInt(percentage);
  82 + percentage = (percentageValue>100)?100:percentageValue;
  83 + result.percentage= percentage;
68 84 }else{
69 85 result.percentage =0;
70 86 }
71   - if (slectedDataColor) {
72   - result.color = slectedDataColor;
73   - }
  87 + result.color = slectedDataColor;
74 88 return result;
75 89 }
76 90 },
... ... @@ -78,15 +92,60 @@ export default {
78 92 value: {
79 93 handler(val) {
80 94 this.options = val;
  95 + this.setOptionsData();
81 96 },
82 97 deep: true
83 98 }
84 99 },
85   - created() {
86   - this.options = this.value;
  100 + mounted() {
  101 + this.setOptionsData();
87 102 },
88   - mounted() { },
89   - methods: {}
  103 + methods: {
  104 + // 数据解析
  105 + setOptionsData() {
  106 + const {slectedDataType} = this.transStyle;
  107 + if(this.isNotBlank(slectedDataType)){
  108 + const refreshTime = this.staticRefreshTime || 300000;
  109 + this.dynamicDataFn(refreshTime);
  110 + }
  111 + },
  112 + dynamicDataFn(refreshTime) {
  113 + if (this.ispreview) {
  114 + this.flagInter = setInterval(() => {
  115 + this.getEchartData();
  116 + }, refreshTime);
  117 + } else {
  118 + this.getEchartData();
  119 + }
  120 + },
  121 + getEchartData() {
  122 + this.setShowText();
  123 +
  124 + },
  125 + setShowText() {
  126 + let val = this.getShowText();
  127 + val=this.isBlank(val)?0:(parseInt(val)>100)?100:parseInt(val);
  128 + const color = this.getColor();
  129 + this.dataList.percentage = val;
  130 + this.dataList.color = color;
  131 + this.reload();
  132 + },
  133 + // vue hack 之强制刷新组件
  134 + reload(){
  135 + this.isRouterAlive=false;
  136 + this.$nextTick(function(){
  137 + this.isRouterAlive=true;
  138 + })
  139 + },
  140 + getShowText() {
  141 + const {slectedDataType} = this.transStyle;
  142 + return this.staticData[slectedDataType] || 0;
  143 + },
  144 + getColor() {
  145 + const {slectedDataColor} = this.transStyle;
  146 + return this.staticData[slectedDataColor] || this.transStyle.color;
  147 + },
  148 + }
90 149 };
91 150 </script>
92 151  
... ...
src/views/bigscreenDesigner/designer/widget/text/widgetDigitalFlopSingle.vue
  View file @78ceab9
... ... @@ -9,12 +9,6 @@
9 9 >
10 10 <dv-digital-flop :config="dataValue"></dv-digital-flop>
11 11 </div>
12   -
13   -<!-- //遍历数字插入-->
14   -<!-- <div :style="cardClass()"><dv-digital-flop :config="options.data"></dv-digital-flop></div>-->
15   -<!-- <div :style="cardClass()">3</div>-->
16   -<!-- <div :style="cardClass2()">,</div>-->
17   -<!-- <div :style="cardClass()">7</div>-->
18 12 </div>
19 13 </div>
20 14 </template>
... ...
src/views/bigscreenDesigner/designer/widget/text/widgetMarquee.vue
  View file @78ceab9
1 1 <template>
2 2 <div class="text" :style="styleColor">
3   - <marquee behavior="" :direction="styleColor.direction">{{
4   - showText
5   - }}</marquee>
  3 + <marquee behavior="" :direction="styleColor.direction" v-if="isRouterAlive" v-html="showText" ></marquee>
6 4 </div>
7 5 </template>
8 6  
... ... @@ -14,16 +12,26 @@ export default {
14 12 components: {},
15 13 props: {
16 14 value: Object,
17   - ispreview: Boolean
  15 + ispreview: Boolean,
  16 + },
  17 + beforeDestroy() {
  18 + clearInterval(this.flagInter);
18 19 },
19 20 data() {
20 21 return {
21   - options: {}
  22 + options: {},
  23 + flagInter: null,
  24 + isRouterAlive:true,
  25 + showText:''
22 26 };
23 27 },
24 28 computed: {
25   - ...mapState('dataSource', ['staticData']),
  29 + ...mapState('dataSource', ['staticData','staticRefreshTime']),
26 30 transStyle() {
  31 + const obj = this.objToOne(this.options);
  32 + const {text, slectedDataType} = obj;
  33 + const val = this.staticData[slectedDataType] || text;
  34 + this.showText = val;
27 35 return this.objToOne(this.options);
28 36 },
29 37 styleColor() {
... ... @@ -48,10 +56,6 @@ export default {
48 56 isBehavior() {
49 57 return this.styleColor.marqueeSet ? "start()" : "stop()";
50 58 },
51   - showText() {
52   - const {text, slectedDataType} = this.transStyle;
53   - return this.staticData[slectedDataType] || text;
54   - }
55 59 },
56 60 watch: {
57 61 value: {
... ... @@ -71,28 +75,39 @@ export default {
71 75 methods: {
72 76 // 数据解析
73 77 setOptionsData() {
74   - const optionsData = this.optionsData; // 数据类型 静态 or 动态
75   - if (optionsData.dataType == "dynamicData") {
76   - this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
77   - } else {};
  78 + const {slectedDataType} = this.transStyle;
  79 + if(this.isNotBlank(slectedDataType)){
  80 + const refreshTime = this.staticRefreshTime || 300000;
  81 + this.dynamicDataFn(refreshTime);
  82 + }
  83 + },
  84 + setShowTextRolad(){
  85 + this.setShowText();
  86 + this.reload();
  87 + },
  88 + setShowText() {
  89 + const {text, slectedDataType} = this.transStyle;
  90 + const val = this.staticData[slectedDataType] || text;
  91 + this.showText = val;
  92 + },
  93 + // vue hack 之强制刷新组件
  94 + reload(){
  95 + this.isRouterAlive=false;
  96 + this.$nextTick(function(){
  97 + this.isRouterAlive=true;
  98 + })
78 99 },
79   - dynamicDataFn(val, refreshTime) {
80   - if (!val) return;
  100 + dynamicDataFn(refreshTime) {
81 101 if (this.ispreview) {
82   - this.getEchartData(val);
83 102 this.flagInter = setInterval(() => {
84   - this.getEchartData(val);
  103 + this.getEchartData();
85 104 }, refreshTime);
86 105 } else {
87   - this.getEchartData(val);
  106 + this.getEchartData();
88 107 }
89 108 },
90   - getEchartData(val) {
91   - const data = this.queryEchartsData(val);
92   - data.then(res => {
93   - this.styleColor.text = res[0].value;
94   - this.$forceUpdate();
95   - });
  109 + getEchartData() {
  110 + this.setShowTextRolad();
96 111 }
97 112 }
98 113 };
... ...
src/views/bigscreenDesigner/designer/widget/text/widgetStatus.vue
  View file @78ceab9
  1 +<!-- 警报状态组件 -->
1 2 <template>
2 3 <div id="dx" class="breathe-zc"></div>
3 4 <!-- <div id="cz" class="breathe-zc"></div>-->
... ...
src/views/bigscreenDesigner/designer/widget/text/widgetText.vue
  View file @78ceab9
... ... @@ -31,11 +31,11 @@ export default {
31 31 computed: {
32 32 ...mapState('dataSource', ['staticData','staticRefreshTime']),
33 33 transStyle() {
34   - const obj = this.objToOne(this.options);
35   - const {text, slectedDataType} = obj;
36   - const val = this.staticData[slectedDataType] || text;
37   - this.showText = val;
38   - return obj;
  34 + const obj = this.objToOne(this.options);
  35 + const {text, slectedDataType} = obj;
  36 + const val = this.staticData[slectedDataType] || text;
  37 + this.showText = val;
  38 + return obj;
39 39 },
40 40 styleColor() {
41 41 return {
... ... @@ -61,7 +61,6 @@ export default {
61 61 this.options = val;
62 62 this.optionsData = val.data;
63 63 this.setOptionsData();
64   - this.setShowText();
65 64 },
66 65 deep: true
67 66 },
... ... @@ -69,6 +68,7 @@ export default {
69 68 mounted() {
70 69 this.options = this.value;
71 70 this.optionsData = this.value.data;
  71 + //设置定时器
72 72 this.setOptionsData();
73 73 },
74 74 methods: {
... ...
src/views/bigscreenDesigner/designer/widget/text/widgetWaterLevelPond.vue
  View file @78ceab9
... ... @@ -36,7 +36,7 @@ export default {
36 36 };
37 37 },
38 38 computed: {
39   - ...mapState('dataSource', ['staticData']),
  39 + ...mapState('dataSource', ['staticData','staticRefreshTime']),
40 40 styleObj() {
41 41 return {
42 42 position: this.ispreview ? "absolute" : "static",
... ... @@ -68,13 +68,12 @@ export default {
68 68 methods: {
69 69 // 修改图标options属性
70 70 editorOptions() {
71   - //水位位置
72   - this.showText();
73 71 //颜色值修改
74 72 this.setOptionsColor();
75 73 //数据修改
76 74 this.setOptionsData();
77   -
  75 + //水位位置
  76 + this.showText();
78 77 },
79 78 // 颜色修改
80 79 setOptionsColor() {
... ... @@ -90,10 +89,23 @@ export default {
90 89 },
91 90 //水位位置
92 91 showText() {
  92 + const {slectedDataType} = this.optionsSetup;
  93 + let dataArray = this.getShowText();
  94 + if(this.isNotBlank(slectedDataType)){
  95 + const refreshTime = this.staticRefreshTime || 300000;
  96 + this.dynamicDataFn(refreshTime);
  97 + }else{
  98 + this.setShowText(dataArray);
  99 + }
  100 + },
  101 + getShowText() {
93 102 const {slectedDataType,waterLevelPondDataText} = this.optionsSetup;
94 103 let datav = this.staticData[slectedDataType] || waterLevelPondDataText;
95   - let dataArray = datav.toString().split(",");
  104 + return this.isNotBlank(datav)?datav.toString().split(","):[0];
  105 + },
  106 + setShowText(dataArray) {
96 107 this.options.data = dataArray;
  108 + this.options={...this.options};
97 109 },
98 110 // 数据修改
99 111 setOptionsData() {
... ... @@ -104,9 +116,21 @@ export default {
104 116 this.options.waveOpacity= waveOpacity/100;//波浪透明度
105 117 this.options.formatter = optionsSetup.formatter;
106 118 this.options.waveNum = optionsSetup.waveNum;//波浪数量
107   - this.options={...this.options};
108 119 },
109   -
  120 + //定时动态数据获取
  121 + dynamicDataFn(refreshTime) {
  122 + if (this.ispreview) {
  123 + this.flagInter = setInterval(() => {
  124 + this.getEchartData();
  125 + }, refreshTime);
  126 + } else {
  127 + this.getEchartData();
  128 + }
  129 + },
  130 + getEchartData() {
  131 + const dataArray = this.getShowText();
  132 + this.setShowText(dataArray);
  133 + }
110 134 }
111 135 };
112 136  
... ...
src/views/bigscreenDesigner/viewer/index.vue
  View file @78ceab9
... ... @@ -18,6 +18,9 @@
18 18 import widget from "../designer/widget/temp";
19 19 import { detailDashboard } from "@/api/bigscreen";
20 20 import { mapMutations } from 'vuex';
  21 +import loadingViewerVue from 'loading-view-vue'
  22 +import Vue from "vue";
  23 +Vue.use(loadingViewerVue,{mode:"5"});
21 24 export default {
22 25 name: "Login",
23 26 components: {
... ... @@ -37,7 +40,9 @@ export default {
37 40 ...mapMutations('dataSource', ['SET_STATIC_DATA','SET_REFRESHTIME']),
38 41 async getData() {
39 42 const reportCode = this.$route.query.reportCode;
  43 + this.$showLoading();
40 44 const { code, data } = await detailDashboard(reportCode);
  45 + this.$hideLoading();
41 46 if (code != 200) return;
42 47 const equipment = document.body.clientWidth;
43 48 const ratioEquipment = equipment / data.dashboard.width;
... ...