定时时间统一设置1H

添加滑块

定时时间统一设置1H
添加滑块
qianbao
1 parent 203c834f
Showing 44 changed files with 497 additions and 125 deletions
config/dev.env.js
package.json
src/utils/request.js
src/views/bigscreenDesigner/designer/index.vue
src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-compare.js
src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-bar-stack.js
src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-barchart.js
src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-capsule-chart.js
src/views/bigscreenDesigner/designer/tools/configure/barCharts/widget-gradient-barchart.js
src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-bar-line-stack.js
src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-barlinechart.js
src/views/bigscreenDesigner/designer/tools/configure/barlineCharts/widget-more-bar-line.js
src/views/bigscreenDesigner/designer/tools/configure/funnelCharts/widget-conical-column-chart.js
src/views/bigscreenDesigner/designer/tools/configure/funnelCharts/widget-funnel.js
src/views/bigscreenDesigner/designer/tools/configure/heatmap/widget-heatmap.js
src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-compare.js
src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-line-stack.js
src/views/bigscreenDesigner/designer/tools/configure/lineCharts/widget-linechart.js
src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-airbubble-map.js
src/views/bigscreenDesigner/designer/tools/configure/mapCharts/widget-line-map.js
 'use strict'
 const merge = require('webpack-merge')
 const prodEnv = require('./prod.env')
+const isDev = false;
+const ipAddresses = isDev?"weberp.xlyprint.cn":"127.0.0.1:8080";
+  //window.location.host;
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-//  BASE_API: '"http://127.0.0.1:8080/xlyReport"',
-  BASE_API: '"http://weberp.xlyprint.cn/xlyReport"',
+  BASE_API: '"http://'+ipAddresses+'/xlyReport"',
+//  BASE_API: '"http://weberp.xlyprint.cn/xlyReport"',
   //API_WS: '"ws://127.0.0.1:8080/api/websocket"'
 })
@@ -24,6 +24,7 @@
     "element-ui": "^2.9.2",
     "js-cookie": "2.2.0",
     "jsbarcode": "^3.11.4",
+    "loading-view-vue": "^1.0.3",
     "miment": "^0.0.9",
     "moment": "^2.29.1",
     "monaco-editor": "^0.20.0",
@@ -5,7 +5,7 @@ import { getToken } from &#39;@/utils/auth&#39;
 // 创建axios实例
 const service = axios.create({
   baseURL: process.env.BASE_API, // api 的 base_url
-  timeout: 60000 // 请求超时时间
+  timeout: 20000 // 请求超时时间
 })
 // request拦截器
@@ -316,6 +316,10 @@ import { mapMutations } from &#39;vuex&#39;;
 import process from "process";
 import { debounce } from '@/utils/debounce'; // 引入防抖函数
+import loadingViewerVue from 'loading-view-vue'
+import Vue from "vue";
+Vue.use(loadingViewerVue,{mode:"5"});
+
 export default {
   name: "Login",
   components: {
@@ -694,7 +698,10 @@ export default {
         widgets: this.widgets,
       };
       // console.log(screenData);
+      //loading
+      this.$showLoading();
       const { code, data } = await insertDashboard(screenData);
+      this.$hideLoading();
       if (code == "200") {
         this.$message.success("保存成功！");
       }
@@ -700,7 +700,7 @@ export const widgetBarCompare = {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 5000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -732,7 +732,7 @@ export const widgetBarCompare = {
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
         chartType: 'widget-stackchart',
-        dictKey: 'STACK_PROPERTIES',
+        dictKey: 'COMPARE_PROPERTIES',
         value: '',
       },
     ],
@@ -659,7 +659,7 @@ export const widgetBarStack = {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 5000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -581,7 +581,7 @@ export const widgetBarchart = {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 5000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -84,7 +84,7 @@ export const widgetCapsuleChart =  {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 5000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -582,7 +582,7 @@ export const widgetGradientBarchart = {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 5000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -871,7 +871,7 @@ export const widgetBarLineStack = {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 5000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -895,7 +895,7 @@ export const widgetBarlinechart = {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 5000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -887,7 +887,7 @@ export const widgetMoreBarLine = {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 5000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -102,7 +102,7 @@ export const widgetConicalColumnChart = {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 5000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -342,7 +342,7 @@ export const widgetFunnel = {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 5000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -578,7 +578,7 @@ export const widgetHeatmap = {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 5000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -736,7 +736,7 @@ export const widgetLineCompare = {
               name: 'marginBottom',
               required: false,
               placeholder: '',
-              value: 40,
+              value: 10,
             },
           ],
         },
@@ -781,7 +781,7 @@ export const widgetLineCompare = {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 5000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -813,7 +813,7 @@ export const widgetLineCompare = {
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
         chartType: 'widget-stackchart',
-        dictKey: 'STACK_PROPERTIES',
+        dictKey: 'COMPARE_PROPERTIES',
         value: '',
       },
     ],
@@ -646,8 +646,85 @@ export const widgetLineStack = {
               name: 'marginBottom',
               required: false,
               placeholder: '',
-              value: 10,
+              value: 15,
+            },
+          ],
+        },
+        {
+          name: '底部滑块设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowZoom',
+              require: false,
+              placeholder: '',
+              value: false,
             },
+            {
+              type: 'el-slider',
+              label: '起始位置%',
+              name: 'startZoom',
+              required: false,
+              placeholder: '',
+              value: 80,
+            },
+            {
+              type: 'el-slider',
+              label: '结束位置%',
+              name: 'endZoom',
+              required: false,
+              placeholder: '',
+              value: 100,
+            },
+            {
+              type: 'vue-color',
+              label: '边框颜色',
+              name: 'borderColorZoom',
+              required: false,
+              placeholder: '',
+              value: '#05a8ee'
+            },
+            // {
+            //   type: 'el-input-number',
+            //   label: '边框弧度',
+            //   name: 'borderRadiusZoom',
+            //   required: false,
+            //   placeholder: '',
+            //   value: 10,
+            // },
+            {
+              type: 'vue-color',
+              label: '边框背景',
+              name: 'backgroundColorZoom',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-input-number',
+              label: '边框高度',
+              name: 'heightZoom',
+              required: false,
+              placeholder: '',
+              value: '12'
+            },
+            {
+              type: 'el-input-number',
+              label: '距离左边距离%',
+              name: 'bottomLeft',
+              required: false,
+              placeholder: '',
+              value: 12
+            },
+            {
+              type: 'el-input-number',
+              label: '距离底部距离',
+              name: 'bottomZoom',
+              required: false,
+              placeholder: '',
+              value: 5
+            }
           ],
         },
         {
@@ -658,7 +735,7 @@ export const widgetLineStack = {
               label: '',
               name: 'customColor',
               required: false,
-              value: [{ color: '#ff7f50' }, { color: '#87cefa' }, { color: '#da70d6' }, { color: '#32cd32' }, { color: '#6495ed' }],
+              value: [{ color: '#05a8ee' }, { color: '#87cefa' }, { color: '#da70d6' }, { color: '#3247cd' }, { color: '#6495ed' }],
             },
           ],
         },
@@ -691,7 +768,7 @@ export const widgetLineStack = {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 5000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -452,6 +452,22 @@ export const widgetLinechart = {
               placeholder: '',
               value: '#fff',
             },
+            // {
+            //   type: 'el-switch',
+            //   label: '虚线分割显示',
+            //   name: 'isShowSplitLinexX',
+            //   require: false,
+            //   placeholder: '',
+            //   value: false,
+            // },
+            // {
+            //   type: 'vue-color',
+            //   label: '虚线分割颜色',
+            //   name: 'splitLineColorYColor',
+            //   required: false,
+            //   placeholder: '',
+            //   value: '#333',
+            // },
             {
               type: 'el-input-number',
               label: '分割线宽度',
@@ -559,8 +575,85 @@ export const widgetLinechart = {
               name: 'marginBottom',
               required: false,
               placeholder: '',
-              value: 10,
+              value: 15,
+            },
+          ],
+        },
+        {
+          name: '底部滑块设置',
+          list: [
+            {
+              type: 'el-switch',
+              label: '显示',
+              name: 'isShowZoom',
+              require: false,
+              placeholder: '',
+              value: false,
             },
+            {
+              type: 'el-slider',
+              label: '起始位置%',
+              name: 'startZoom',
+              required: false,
+              placeholder: '',
+              value: 80,
+            },
+            {
+              type: 'el-slider',
+              label: '结束位置%',
+              name: 'endZoom',
+              required: false,
+              placeholder: '',
+              value: 100,
+            },
+            {
+              type: 'vue-color',
+              label: '边框颜色',
+              name: 'borderColorZoom',
+              required: false,
+              placeholder: '',
+              value: '#05a8ee'
+            },
+            // {
+            //   type: 'el-input-number',
+            //   label: '边框弧度',
+            //   name: 'borderRadiusZoom',
+            //   required: false,
+            //   placeholder: '',
+            //   value: 10,
+            // },
+            {
+              type: 'vue-color',
+              label: '边框背景',
+              name: 'backgroundColorZoom',
+              required: false,
+              placeholder: '',
+              value: '#fff'
+            },
+            {
+              type: 'el-input-number',
+              label: '边框高度',
+              name: 'heightZoom',
+              required: false,
+              placeholder: '',
+              value: '12'
+            },
+            {
+              type: 'el-input-number',
+              label: '距离左边距离px',
+              name: 'bottomLeft',
+              required: false,
+              placeholder: '',
+              value: 50
+            },
+            {
+              type: 'el-input-number',
+              label: '距离底部距离',
+              name: 'bottomZoom',
+              required: false,
+              placeholder: '',
+              value: 5
+            }
           ],
         },
         {
@@ -604,7 +697,7 @@ export const widgetLinechart = {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 5000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -314,7 +314,7 @@ export const widgetAirbubbleMap = {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 5000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -391,7 +391,7 @@ export const widgetLineMap = {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 5000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -310,7 +310,7 @@ export const widgetGauge = {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 5000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -187,7 +187,7 @@ export const widgetPiePercentage = {
           name: 'refreshTime',
           relactiveDom: 'dataType',
           relactiveDomValue: 'dynamicData',
-          value: 5000
+          value: 3600000
         },
         {
           type: 'el-button',
@@ -169,7 +169,7 @@ export const widgetActiveRingChart=  {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 5000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -394,7 +394,7 @@ export const widgetPieNightingale = {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 5000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -392,7 +392,7 @@ export const widgetPiechart = {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 5000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -512,7 +512,7 @@ export const widgetRadar = {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 5000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -98,7 +98,7 @@ export const widgetRotateRanking=  {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 30000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -98,7 +98,7 @@ export const widgetScrollRankingBoard=  {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 30000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -229,7 +229,7 @@ export const widgetTable = {
           name: 'refreshTime',
           relactiveDom: 'dataType',
           relactiveDomValue: 'dynamicData',
-          value: 30000
+          value: 3600000
         },
         {
           type: 'el-button',
@@ -244,7 +244,7 @@ export const widgetWordCloud = {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 60000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -83,7 +83,7 @@ const screenConfig = {
         name: 'refreshTime',
         relactiveDom: 'dataType',
         relactiveDomValue: 'dynamicData',
-        value: 600000
+        value: 3600000
       },
       {
         type: 'el-button',
@@ -7,7 +7,6 @@
 <script>
 export default {
   name: "WidgetBarCompareChart",
-  //参考 https://www.makeapie.com/editor.html?c=xrJwcCF3NZ
   components: {},
   props: {
     value: Object,
+<!-- 多柱线图-->
 <template>
   <div :style='styleObj'>
     <v-chart :options='options' autoresize/>
@@ -3,7 +3,7 @@
 -->
 <template>
   <div id="formStr" :class="['div_Style']"
-       :style="styleColor" v-html="showText">
+       :style="styleColor" v-html="showText" v-if="isRouterAlive">
   </div>
 </template>
 <script>
@@ -23,10 +23,16 @@ export default {
       svgData:[],
       optionsData: {},
       optionsSetUp: {},
+      flagInter: null,
+      isRouterAlive:true,
+      showText:''
     };
   },
+  beforeDestroy() {
+    clearInterval(this.flagInter);
+  },
   computed: {
-    ...mapState('dataSource', ['staticData']),
+    ...mapState('dataSource', ['staticData','staticRefreshTime']),
     transStyle() {
       return this.objToOne(this.options);
     },
@@ -39,23 +45,10 @@ export default {
         top: this.transStyle.top + "px",
         right: this.transStyle.right + "px"
       };
+      const svg=this.getShowText();
+      this.showText=svg;
       return styleColor;
     },
-    showText() {
-      const {text, slectedDataType} = this.transStyle;
-      const key = this.staticData[slectedDataType] || text;
-      const dataSvg = this.value.setup.dynamicAddSvg;
-      for (let i = 0; i < dataSvg.length; i++) {
-        if(dataSvg[i].key==key){
-          /** 控制svg图片拖动，原理在于设置svg的viewbox属性，viewbox的第一个参数控制左右位置，第二个参数设置上下位置  */
-          /** 控制svg图片放大缩小，原理在于设置svg的viewbox属性，viewbox的第三个参数控制左右大小，第四个参数设置上下大小 */
-            //设置svg 自适应  添加属性 viewBox="0,0,640,480"
-          let svg = dataSvg[i].value;
-          return svg;
-        }
-      }
-      return "";
-    },
   },
   watch: {
     value: {
@@ -71,20 +64,56 @@ export default {
   mounted() {
     this.options = this.value;
     this.optionsData = this.value.data;
+    this.setSvgValue();
   },
   methods: {
     initData() {
       this.handlerSvgData();
     },
+    // vue hack 之强制刷新组件
+    reload(){
+      this.isRouterAlive=false;
+      this.$nextTick(function(){
+        this.isRouterAlive=true;
+      })
+    },
     handlerSvgData(){
       const data = this.optionsSetUp.dynamicAddSvg;
       this.svgData = data;
     },
-    getSvgValue(key){
-      const data = this.optionsSetUp.dynamicAddSvg;
-      for (let i = 0; i < data.length; i++) {
-        if(data[i].key==key){
-          return data[i].value;
+    //初始化设置SVG值
+    setSvgValue(){
+      const {slectedDataType} = this.transStyle;
+      if(this.isNotBlank(slectedDataType)){
+        const refreshTime = this.staticRefreshTime || 300000;
+        this.dynamicDataFn(refreshTime);
+      }
+    },
+    dynamicDataFn(refreshTime) {
+      if (this.ispreview) {
+        this.flagInter = setInterval(() => {
+          this.getEchartData();
+        }, refreshTime);
+      } else {
+        this.getEchartData();
+      }
+    },
+    getEchartData() {
+      const svg = this.getShowText();
+      this.showText=svg;
+      this.reload();
+    },
+    getShowText() {
+      const {text, slectedDataType} = this.transStyle;
+      const key = this.staticData[slectedDataType] || text;
+      const dataSvg = this.value.setup.dynamicAddSvg;
+      for (let i = 0; i < dataSvg.length; i++) {
+        if(dataSvg[i].key==key){
+          /** 控制svg图片拖动，原理在于设置svg的viewbox属性，viewbox的第一个参数控制左右位置，第二个参数设置上下位置  */
+          /** 控制svg图片放大缩小，原理在于设置svg的viewbox属性，viewbox的第三个参数控制左右大小，第四个参数设置上下大小 */
+            //设置svg 自适应  添加属性 viewBox="0,0,640,480"
+          let svg = dataSvg[i].value;
+          return svg;
         }
       }
       return "";
@@ -7,7 +7,6 @@
 <script>
 export default {
   name: "WidgetBarCompareChart",
-  //参考 https://www.makeapie.com/editor.html?c=xOjLyozu2W
   components: {},
   props: {
     value: Object,
+<!-- 折线堆叠图 json-->
 <template>
   <div :style="styleObj">
     <v-chart :options="options" autoresize/>
@@ -51,7 +52,8 @@ export default {
               barBorderRadius: null
             }
           }
-        ]
+        ],
+        dataZoom:[]
       },
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
@@ -99,6 +101,7 @@ export default {
       this.setOptionsTooltip();
       this.setOptionsMargin();
       this.setOptionsLegend();
+      this.setOptionsDataZoom();
       this.setOptionsData();
     },
     // 标题修改
@@ -268,6 +271,27 @@ export default {
       };
       legend.itemWidth = optionsSetup.legendWidth;
     },
+    //下方滑块设置
+    setOptionsDataZoom() {
+      const optionsSetup = this.optionsSetup;
+      const dataZoom ={};
+      const dataZoomList =[];
+      dataZoom.type= 'slider';
+      dataZoom.show= optionsSetup.isShowZoom;//显示滚动条
+      dataZoom.zoomLock=false;//锁定滚动条缩放，（固定滚动条长度）
+      dataZoom.left=optionsSetup.bottomLeft+'%';//离左边的百分比距离
+      dataZoom.bottom=optionsSetup.bottomZoom;//距离底部距离
+      dataZoom.start=optionsSetup.startZoom;//开始位置
+      dataZoom.end=optionsSetup.endZoom;//结束位置
+      dataZoom.showDataShadow=true; //屏蔽折线图，true为显示折线图
+      // dataZoom.barBorderRadius=optionsSetup.borderRadiusZoom;
+      dataZoom.borderColor=optionsSetup.borderColorZoom;
+      dataZoom.height=optionsSetup.heightZoom;
+      dataZoom.backgroundColor=optionsSetup.backgroundColorZoom;
+      dataZoomList.push(dataZoom);
+      this.options.dataZoom=dataZoomList;
+      this.options={...this.options};
+    },
     // 图例名称设置
     setOptionsLegendName(name) {
       const optionsSetup = this.optionsSetup;
@@ -25,7 +25,8 @@ export default {
         },
         tooltip: {
           trigger: "item",
-          formatter: "{a} <br/>{b} : {c}%"
+          formatter: "{a} <br/>{b} : {c}%",
+          borderRadius: 8, //边框圆角
         },
         legend: {
           textStyle: {
@@ -51,10 +52,25 @@ export default {
             }
           }
         },
+        dataZoom: [],
         series: [
           {
             data: [],
-            type: "line"
+            type: "line",
+            // markLine: {
+            //   silent: true,
+            //   lineStyle: {
+            //     color: '#333'
+            //   },
+            //   data: [
+            //     {
+            //       yAxis: 1000
+            //     },
+            //     {
+            //       yAxis: 2000
+            //     }
+            //   ]
+            // },
           }
         ]
       },
@@ -101,6 +117,7 @@ export default {
       this.setOptionsTitle();
       this.setOptionsX();
       this.setOptionsY();
+      this.setOptionsDataZoom();
       this.setOptionsTop();
       this.setOptionsTooltip();
       this.setOptionsData();
@@ -252,6 +269,27 @@ export default {
       }
       this.options.series = series;
     },
+    //下方滑块设置
+    setOptionsDataZoom() {
+      const optionsSetup = this.optionsSetup;
+      const dataZoom ={};
+      const dataZoomList =[];
+      dataZoom.type= 'slider';
+      dataZoom.show= optionsSetup.isShowZoom;//显示滚动条
+      dataZoom.zoomLock=false;//锁定滚动条缩放，（固定滚动条长度）
+      dataZoom.left=optionsSetup.bottomLeft+'px';//离左边的百分比距离
+      dataZoom.bottom=optionsSetup.bottomZoom;//距离底部距离
+      dataZoom.start=optionsSetup.startZoom;//开始位置
+      dataZoom.end=optionsSetup.endZoom;//结束位置
+      dataZoom.showDataShadow=true; //屏蔽折线图，true为显示折线图
+      // dataZoom.barBorderRadius=optionsSetup.borderRadiusZoom;
+      dataZoom.borderColor=optionsSetup.borderColorZoom;
+      dataZoom.height=optionsSetup.heightZoom;
+      dataZoom.backgroundColor=optionsSetup.backgroundColorZoom;
+      dataZoomList.push(dataZoom);
+      this.options.dataZoom=dataZoomList;
+      this.options={...this.options};
+    },
     // tooltip 设置
     setOptionsTooltip() {
       const optionsSetup = this.optionsSetup;
@@ -351,4 +389,7 @@ export default {
   height: 100%;
   overflow: hidden;
 }
+.echarts-slider-handle {
+  border-radius: 8px;
+}
 </style>
 <template>
   <div class="progress" :style="styleColor">
-    <el-progress class="progress-content" :percentage="dataList.percentage" :strokeWidth="dataList.strokeWidth"
-      :showText="dataList.showText" :textInside="dataList.textInside" :color="dataList.color"></el-progress>
+    <el-progress class="progress-content" :strokeWidth="dataList.strokeWidth"
+      :showText="dataList.showText" :textInside="dataList.textInside" :color="dataList.color" :percentage="dataList.percentage" v-if="isRouterAlive" ></el-progress>
   </div>
 </template>
 <script>
@@ -13,15 +13,29 @@ export default {
     value: Object,
     ispreview: Boolean
   },
+  created() {
+    this.options = this.value;
+  },
+  provide(){
+    return{
+      reload:this.reload
+    }
+  },
   data() {
     return {
-      options: {}
+      options: {},
+      flagInter: null,
+      isRouterAlive:true
     };
   },
+  beforeDestroy() {
+    clearInterval(this.flagInter);
+  },
   computed: {
-    ...mapState('dataSource', ['staticData']),
+    ...mapState('dataSource', ['staticData','staticRefreshTime']),
     transStyle() {
-      return this.objToOne(this.options);
+      const obj = this.objToOne(this.options);
+      return obj;
     },
     styleColor() {
       let result = {
@@ -58,19 +72,19 @@ export default {
         strokeWidth: this.transStyle.strokeWidth || 6,
         showText: this.transStyle.showText,
         textInside: this.transStyle.textInside,
-        color: this.transStyle.color,
-        percentage: 0
+        color : this.transStyle.color,
+        percentage : 40
       };
-      const percentage = this.staticData[this.transStyle.slectedDataType];
-      const slectedDataColor = this.staticData[this.transStyle.slectedDataColor];
-      if (percentage) {
-        result.percentage = parseInt(percentage);
+      let percentage = this.getShowText();
+      const slectedDataColor = this.getColor();
+      if (this.isNotNull(percentage)) {
+        let percentageValue = parseInt(percentage);
+        percentage = (percentageValue>100)?100:percentageValue;
+        result.percentage= percentage;
       }else{
         result.percentage =0;
       }
-      if (slectedDataColor) {
-        result.color = slectedDataColor;
-      }
+      result.color = slectedDataColor;
       return result;
     }
   },
@@ -78,15 +92,60 @@ export default {
     value: {
       handler(val) {
         this.options = val;
+        this.setOptionsData();
       },
       deep: true
     }
   },
-  created() {
-    this.options = this.value;
+  mounted() {
+    this.setOptionsData();
   },
-  mounted() { },
-  methods: {}
+  methods: {
+    // 数据解析
+    setOptionsData() {
+      const {slectedDataType} = this.transStyle;
+      if(this.isNotBlank(slectedDataType)){
+        const refreshTime = this.staticRefreshTime || 300000;
+        this.dynamicDataFn(refreshTime);
+      }
+    },
+    dynamicDataFn(refreshTime) {
+      if (this.ispreview) {
+        this.flagInter = setInterval(() => {
+          this.getEchartData();
+        }, refreshTime);
+      } else {
+        this.getEchartData();
+      }
+    },
+    getEchartData() {
+      this.setShowText();
+
+    },
+    setShowText() {
+      let val = this.getShowText();
+      val=this.isBlank(val)?0:(parseInt(val)>100)?100:parseInt(val);
+      const color = this.getColor();
+      this.dataList.percentage = val;
+      this.dataList.color = color;
+      this.reload();
+    },
+    // vue hack 之强制刷新组件
+    reload(){
+      this.isRouterAlive=false;
+      this.$nextTick(function(){
+        this.isRouterAlive=true;
+      })
+    },
+    getShowText() {
+      const {slectedDataType} = this.transStyle;
+      return this.staticData[slectedDataType] || 0;
+    },
+    getColor() {
+      const {slectedDataColor} = this.transStyle;
+      return this.staticData[slectedDataColor] || this.transStyle.color;
+    },
+  }
 };
 </script>
@@ -9,12 +9,6 @@
       >
        <dv-digital-flop :config="dataValue"></dv-digital-flop>
       </div>
-
-<!--      //遍历数字插入-->
-<!--      <div :style="cardClass()"><dv-digital-flop :config="options.data"></dv-digital-flop></div>-->
-<!--      <div :style="cardClass()">3</div>-->
-<!--      <div :style="cardClass2()">,</div>-->
-<!--      <div :style="cardClass()">7</div>-->
     </div>
   </div>
 </template>
 <template>
   <div class="text" :style="styleColor">
-    <marquee behavior="" :direction="styleColor.direction">{{
-        showText
-    }}</marquee>
+    <marquee behavior="" :direction="styleColor.direction" v-if="isRouterAlive" v-html="showText" ></marquee>
   </div>
 </template>
@@ -14,16 +12,26 @@ export default {
   components: {},
   props: {
     value: Object,
-    ispreview: Boolean
+    ispreview: Boolean,
+  },
+  beforeDestroy() {
+    clearInterval(this.flagInter);
   },
   data() {
     return {
-      options: {}
+      options: {},
+      flagInter: null,
+      isRouterAlive:true,
+      showText:''
     };
   },
   computed: {
-    ...mapState('dataSource', ['staticData']),
+    ...mapState('dataSource', ['staticData','staticRefreshTime']),
     transStyle() {
+      const obj = this.objToOne(this.options);
+      const {text, slectedDataType} = obj;
+      const val = this.staticData[slectedDataType] || text;
+      this.showText = val;
       return this.objToOne(this.options);
     },
     styleColor() {
@@ -48,10 +56,6 @@ export default {
     isBehavior() {
       return this.styleColor.marqueeSet ? "start()" : "stop()";
     },
-    showText() {
-      const {text, slectedDataType} = this.transStyle;
-      return this.staticData[slectedDataType] || text;
-    }
   },
   watch: {
     value: {
@@ -71,28 +75,39 @@ export default {
   methods: {
     // 数据解析
     setOptionsData() {
-      const optionsData = this.optionsData; // 数据类型 静态 or 动态
-      if (optionsData.dataType == "dynamicData") {
-        this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
-      } else {};
+      const {slectedDataType} = this.transStyle;
+      if(this.isNotBlank(slectedDataType)){
+        const refreshTime = this.staticRefreshTime || 300000;
+        this.dynamicDataFn(refreshTime);
+      }
+    },
+    setShowTextRolad(){
+      this.setShowText();
+      this.reload();
+    },
+    setShowText() {
+      const {text, slectedDataType} = this.transStyle;
+      const val = this.staticData[slectedDataType] || text;
+      this.showText = val;
+    },
+    // vue hack 之强制刷新组件
+    reload(){
+      this.isRouterAlive=false;
+      this.$nextTick(function(){
+        this.isRouterAlive=true;
+      })
     },
-    dynamicDataFn(val, refreshTime) {
-      if (!val) return;
+    dynamicDataFn(refreshTime) {
       if (this.ispreview) {
-        this.getEchartData(val);
         this.flagInter = setInterval(() => {
-          this.getEchartData(val);
+          this.getEchartData();
         }, refreshTime);
       } else {
-        this.getEchartData(val);
+        this.getEchartData();
       }
     },
-    getEchartData(val) {
-      const data = this.queryEchartsData(val);
-      data.then(res => {
-        this.styleColor.text = res[0].value;
-        this.$forceUpdate();
-      });
+    getEchartData() {
+      this.setShowTextRolad();
     }
   }
 };
+<!-- 警报状态组件 -->
 <template>
   <div id="dx" class="breathe-zc"></div>
   <!--  <div id="cz" class="breathe-zc"></div>-->
@@ -31,11 +31,11 @@ export default {
   computed: {
     ...mapState('dataSource', ['staticData','staticRefreshTime']),
     transStyle() {
-      const obj = this.objToOne(this.options);
-      const {text, slectedDataType} = obj;
-      const val = this.staticData[slectedDataType] || text;
-      this.showText = val;
-      return obj;
+       const obj = this.objToOne(this.options);
+       const {text, slectedDataType} = obj;
+       const val = this.staticData[slectedDataType] || text;
+       this.showText = val;
+       return obj;
     },
     styleColor() {
       return {
@@ -61,7 +61,6 @@ export default {
         this.options = val;
         this.optionsData = val.data;
         this.setOptionsData();
-        this.setShowText();
       },
       deep: true
     },
@@ -69,6 +68,7 @@ export default {
   mounted() {
     this.options = this.value;
     this.optionsData = this.value.data;
+    //设置定时器
     this.setOptionsData();
   },
   methods: {
@@ -36,7 +36,7 @@ export default {
     };
   },
   computed: {
-    ...mapState('dataSource', ['staticData']),
+    ...mapState('dataSource', ['staticData','staticRefreshTime']),
     styleObj() {
       return {
         position: this.ispreview ? "absolute" : "static",
@@ -68,13 +68,12 @@ export default {
   methods: {
     // 修改图标options属性
     editorOptions() {
-      //水位位置
-      this.showText();
       //颜色值修改
       this.setOptionsColor();
       //数据修改
       this.setOptionsData();
-
+      //水位位置
+      this.showText();
     },
     // 颜色修改
     setOptionsColor() {
@@ -90,10 +89,23 @@ export default {
     },
     //水位位置
     showText() {
+      const {slectedDataType} = this.optionsSetup;
+      let dataArray = this.getShowText();
+      if(this.isNotBlank(slectedDataType)){
+        const refreshTime = this.staticRefreshTime || 300000;
+        this.dynamicDataFn(refreshTime);
+      }else{
+        this.setShowText(dataArray);
+      }
+    },
+    getShowText() {
       const {slectedDataType,waterLevelPondDataText} = this.optionsSetup;
       let datav = this.staticData[slectedDataType] || waterLevelPondDataText;
-      let dataArray = datav.toString().split(",");
+      return this.isNotBlank(datav)?datav.toString().split(","):[0];
+    },
+    setShowText(dataArray) {
       this.options.data = dataArray;
+      this.options={...this.options};
     },
     // 数据修改
     setOptionsData() {
@@ -104,9 +116,21 @@ export default {
       this.options.waveOpacity= waveOpacity/100;//波浪透明度
       this.options.formatter = optionsSetup.formatter;
       this.options.waveNum = optionsSetup.waveNum;//波浪数量
-      this.options={...this.options};
     },
-
+    //定时动态数据获取
+    dynamicDataFn(refreshTime) {
+      if (this.ispreview) {
+        this.flagInter = setInterval(() => {
+          this.getEchartData();
+        }, refreshTime);
+      } else {
+        this.getEchartData();
+      }
+    },
+    getEchartData() {
+      const dataArray = this.getShowText();
+      this.setShowText(dataArray);
+    }
   }
 };
@@ -18,6 +18,9 @@
 import widget from "../designer/widget/temp";
 import { detailDashboard } from "@/api/bigscreen";
 import { mapMutations } from 'vuex';
+import loadingViewerVue from 'loading-view-vue'
+import Vue from "vue";
+Vue.use(loadingViewerVue,{mode:"5"});
 export default {
   name: "Login",
   components: {
@@ -37,7 +40,9 @@ export default {
     ...mapMutations('dataSource', ['SET_STATIC_DATA','SET_REFRESHTIME']),
     async getData() {
       const reportCode = this.$route.query.reportCode;
+      this.$showLoading();
       const { code, data } = await detailDashboard(reportCode);
+      this.$hideLoading();
       if (code != 200) return;
       const equipment = document.body.clientWidth;
       const ratioEquipment = equipment / data.dashboard.width;