1、鼠标批量移动

qianbao
1 parent ae498fdd
Showing 13 changed files with 367 additions and 35 deletions
config/dev.env.js
config/index.js
src/mixins/queryform.js
src/store/modules/dataSource.js
src/utils/request.js
src/views/bigScreenReport/index.vue
src/views/bigscreenDesigner/designer/components/contentMenu.vue
src/views/bigscreenDesigner/designer/index.vue
src/views/bigscreenDesigner/designer/tools/configure/div/widget-border-box.js
src/views/bigscreenDesigner/designer/widget/div/mainDiv11.vue
src/views/bigscreenDesigner/designer/widget/div/widgetBorderBox.vue
src/views/bigscreenDesigner/designer/widget/div/widgetSvg.vue
src/views/bigscreenDesigner/designer/widget/pie/widgetPiechart.vue
@@ -2,10 +2,10 @@
 const merge = require('webpack-merge')
 const prodEnv = require('./prod.env')
 //是否开发状态
-const isDev = true;
+const isDev = false;
 //开发API地址
-const devAdrress='"http://weberp.xlyprint.cn/xlyReport"';
-// const devAdrress='"http://127.0.0.1:8080/xlyReport"';
+// const devAdrress='"http://weberp.xlyprint.cn/xlyReport"';
+const devAdrress='"http://127.0.0.1:8080/xlyReport"';
 //正式打包API地址
 const ipAdrress='"http://"+location.host+"/xlyReport"';
  
@@ -48,8 +48,8 @@ module.exports = {
  
     // Paths
     assetsRoot: path.resolve(__dirname, '../dist'),
-    //assetsSubDirectory: 'BI/static', //正式打包 因为nginx转发原因，需要指定路径
-    assetsSubDirectory: 'static',
+    // assetsSubDirectory: 'static', //正式打包 因为nginx转发原因，需要指定路径
+    assetsSubDirectory: '/static',
  
     /**
      * You can set by youself according to actual condition
@@ -58,7 +58,7 @@ module.exports = {
      * then assetsPublicPath should be set to "/bar/".
      * In most cases please use '/' !!!
      */
-    assetsPublicPath: '/BI/',//正式打包 因为nginx转发原因，需要指定路径
+    assetsPublicPath: '/',//正式打包 因为nginx转发原因，需要指定路径
  
     /**
      * Source Maps
@@ -98,6 +98,7 @@ export default {
     queryEchartsData(params) {
       return new Promise(async (resolve) => {
         const { code, data } = await getData(params);
+        // console.log(data,2222222);
         if (code != 200) return
         const analysisData = this.analysisChartsData(params, data);
         resolve(analysisData)
@@ -105,7 +106,7 @@ export default {
     },
     // 解析不同图标的数据
     analysisChartsData(params, data) {
-      // widget-barchart 柱线图、widget-linechart 折线图、 widget-barlinechart 柱线图
+      // widget-barchart 柱线图、widget-linechart 折线图、 widget-barlinechart 柱线图  widget-more-bar-line
       // widget-piechart 饼图、widget-funnel 漏斗图
       // widget-text 文本框
       // widge-table 表格(数据不要转)
@@ -114,7 +115,9 @@ export default {
       // widget-mapline 中国地图-路线图
       // widget-radar 雷达图
       // widget-select 下拉框
+      //barlineCharts 下拉框
       const chartType = params.chartType
+      // console.log(data,chartType,'33333');
       if (chartType == "widget-linechart") {
         return this.barOrLineChartFn(params.chartProperties, data);
       }else if (chartType == "widget-barlinechart" ) {
@@ -168,12 +171,15 @@ export default {
       // legend: {
       //   data: ['Forest']
       // },
+
       for (const key in chartProperties) {
         const obj = {};
         const seriesData = [];
         const value = chartProperties[key];
         obj["type"] = value;
         obj["name"] = key;
+        console.log("3333333",value,key);
+        console.log("22222222",chartProperties,data);
         for (let i = 0; i < data.length; i++) {
           if (value.startsWith("xAxis")) {
             // 代表为x轴
@@ -183,7 +189,8 @@ export default {
             seriesData[i] = data[i][key];
           }
         }
-        // console.log("seriesData",seriesData);
+
+        // console.log("seriesData",chartProperties);
         // console.log("xAxisList",xAxisList);
         obj["data"] = seriesData;
         if (!obj["type"].startsWith("xAxis")) {
@@ -209,6 +216,7 @@ export default {
         const value = chartProperties[key];
         obj["type"] = value;
         obj["name"] = key;
+        console.log("value",value);
         if(value=='xAxis' || value=='bar'|| value=='line'){
           for (let i = 0; i < data.length; i++) {
             if (value.startsWith("xAxis")) {
@@ -216,7 +224,8 @@ export default {
               xAxisList[i] = data[i][key];
             } else {
               // 其他的均为series展示数据
-              seriesData[i] = data[i][value];
+              // console.log("seriesData",data[i][key]);
+              seriesData[i] = data[i][key];
             }
           }
           // console.log("seriesData",seriesData);
@@ -229,7 +238,7 @@ export default {
       }
       ananysicData["xAxis"] = xAxisList;
       ananysicData["series"] = series;
-      console.log("11111",ananysicData);
+      // console.log("11111",ananysicData);
       return ananysicData;
     },
     //堆叠图
@@ -8,12 +8,14 @@ const dataSource = {
  
   mutations: {
     SET_STATIC_DATA: (state, data) => {
+      state.staticData=[];
       state.staticData = data;
     },
     SET_REFRESHTIME: (state, data) => {
       state.staticRefreshTime = data;
     },
     SET_DYNAMIC_DATA: (state, data) => {
+      state.dynamicData=[];
       state.dynamicData = data;
     }
   },
@@ -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: 20000 // 请求超时时间
+  timeout: 8000000 // 请求超时时间
 })
  
 // request拦截器
@@ -55,18 +55,12 @@ service.interceptors.response.use(
     }
   },
   error => {
-   //  Message({
-   //    message: error.message,
-   //    type: 'error',
-   //    duration: 5 * 1000
-   //  })
-   // return Promise.reject(error)
     Message({
       message: error.message,
       type: 'error',
       duration: 5 * 1000
-    });
-    return {code:-1};
+    })
+    return Promise.reject(error)
   }
 )
  
@@ -120,6 +120,7 @@ export default {
         reportName: "",
         reportType: "report_screen",
         pageNumber: 1,
+        enableFlag: 1,
         pageSize: 8,
         order: "DESC",
         sort: "update_time"
@@ -36,6 +36,9 @@
     <div class="contentmenu__item" @click="delGroupLayer">
       <i class="iconfont iconzhankai"></i> 移除分组
     </div>
+    <div class="contentmenu__item" @click="copylayerAll">
+      <i class="iconfont iconzhankai"></i> 复制全部
+    </div>
   </div>
 </template>
 <script>
@@ -97,6 +100,10 @@ export default {
     delGroupLayer() {
       this.$emit("delGroupLayer");
     },
+    //复制全部
+    copylayerAll() {
+      this.$emit("copylayerAll");
+    },
     copyLayer() {
       this.$emit("copylayer");
     },
@@ -324,6 +324,7 @@
       @lockLayer="lockLayer"
       @noLockLayer="noLockLayer"
       @copylayer="copylayer"
+      @copylayerAll="copylayerAll"
       @istopLayer="istopLayer"
       @setlowLayer="setlowLayer"
       @moveupLayer="moveupLayer"
@@ -332,6 +333,7 @@
       @setTopAlignment="setTopAlignment"
       @delGroupLayer="delGroupLayer"
       @addGroupLayer="addGroupLayer"
+      @delSelectMore="delSelectMore"
     />
   </div>
 </template>
@@ -1305,15 +1307,27 @@ export default {
     // 多选复制
     copylayer() {
       //首先复制右选节点，再复制其他选择节点
-      this.copylayerOne(this.rightClickIndex)
-      // if(this.isNotBlankArray(this.selectMore)){
-      //    for(let i = 0; i< this.selectMore.length;i++){
-      //       const copyIndex = this.selectMore[i];
-      //       if(this.rightClickIndex != copyIndex){
-      //         this.copylayerOne(copyIndex);
-      //       }
-      //    }
-      // }
+      // this.copylayerOne(this.rightClickIndex)
+      if(this.isNotBlankArray(this.selectMore)){
+         for(let i = 0; i< this.selectMore.length;i++){
+            const copyIndex = this.selectMore[i];
+            if(this.rightClickIndex != copyIndex){
+              this.copylayerOne(copyIndex);
+            }
+         }
+      }
+    },  // 多选复制
+    copylayerAll() {
+      //首先复制右选节点，再复制其他选择节点
+      // this.copylayerOne(this.rightClickIndex)
+      if(this.isNotBlankArray(this.selectMore)){
+         for(let i = 0; i< this.selectMore.length;i++){
+            const copyIndex = this.selectMore[i];
+            if(this.rightClickIndex != copyIndex){
+              this.copylayerOne(copyIndex);
+            }
+         }
+      }
     },
     // 复制
     copylayerOne(index) {
@@ -92,6 +92,22 @@ export const widgetBorderBox =  {
       },
       {
         type: 'el-input-number',
+        label: '标题字体大小',
+        name: 'titleFont',
+        require: false,
+        placeholder: '',
+        value: 18,
+      },
+      {
+        type: 'vue-color',
+        label: '标题字体颜色',
+        name: 'titleColor',
+        required: false,
+        placeholder: '',
+        value: 'rgba(255, 0, 0, 0)',
+      },
+      {
+        type: 'el-input-number',
         label: '标题宽度',
         name: 'titleWidth',
         require: false,
+<template>
+  <div class="dv-border-box-11" :ref="ref">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
+      <defs>
+        <filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
+          <feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thicken" />
+          <feGaussianBlur in="thicken" stdDeviation="3" result="blurred" />
+          <feFlood :flood-color="mergedColor[1]" result="glowColor" />
+          <feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
+          <feMerge>
+            <feMergeNode in="softGlowColored"/>
+            <feMergeNode in="SourceGraphic"/>
+          </feMerge>
+        </filter>
+      </defs>
+
+      <polygon :fill="backgroundColor" :points="`
+        20, 32 ${width * 0.5 - titleWidth / 2}, 32 ${width * 0.5 - titleWidth / 2 + 20}, 53
+        ${width * 0.5 + titleWidth / 2 - 20}, 53 ${width * 0.5 + titleWidth / 2}, 32
+        ${width - 20}, 32 ${width - 8}, 48 ${width - 8}, ${height - 25} ${width - 20}, ${height - 8}
+        20, ${height - 8} 8, ${height - 25} 8, 50
+      `" />
+
+      <polyline
+        :stroke="mergedColor[0]"
+        :filter="`url(#${filterId})`"
+        :points="`
+          ${(width - titleWidth) / 2}, 30
+          20, 30 7, 50 7, ${50 + (height - 167) / 2}
+          13, ${55 + (height - 167) / 2} 13, ${135 + (height - 167) / 2}
+          7, ${140 + (height - 167) / 2} 7, ${height - 27}
+          20, ${height - 7} ${width - 20}, ${height - 7} ${width - 7}, ${height - 27}
+          ${width - 7}, ${140 + (height - 167) / 2} ${width - 13}, ${135 + (height - 167) / 2}
+          ${width - 13}, ${55 + (height - 167) / 2} ${width - 7}, ${50 + (height - 167) / 2}
+          ${width - 7}, 50 ${width - 20}, 30 ${(width + titleWidth) / 2}, 30
+          ${(width + titleWidth) / 2 - 20}, 7 ${(width - titleWidth) / 2 + 20}, 7
+          ${(width - titleWidth) / 2}, 30 ${(width - titleWidth) / 2 + 20}, 52
+          ${(width + titleWidth) / 2 - 20}, 52 ${(width + titleWidth) / 2}, 30
+        `"
+      />
+
+      <polygon
+        :stroke="mergedColor[0]"
+        fill="transparent"
+        :points="`
+          ${(width + titleWidth) / 2 - 5}, 30 ${(width + titleWidth) / 2 - 21}, 11
+          ${(width + titleWidth) / 2 - 27}, 11 ${(width + titleWidth) / 2 - 8}, 34
+        `"
+      />
+
+      <polygon
+        :stroke="mergedColor[0]"
+        fill="transparent"
+        :points="`
+          ${(width - titleWidth) / 2 + 5}, 30 ${(width - titleWidth) / 2 + 22}, 49
+          ${(width - titleWidth) / 2 + 28}, 49 ${(width - titleWidth) / 2 + 8}, 26
+        `"
+      />
+
+      <polygon
+        :stroke="mergedColor[0]"
+        :fill="fade(mergedColor[1] || defaultColor[1], 30)"
+        :filter="`url(#${filterId})`"
+        :points="`
+          ${(width + titleWidth) / 2 - 11}, 37 ${(width + titleWidth) / 2 - 32}, 11
+          ${(width - titleWidth) / 2 + 23}, 11 ${(width - titleWidth) / 2 + 11}, 23
+          ${(width - titleWidth) / 2 + 33}, 49 ${(width + titleWidth) / 2 - 22}, 49
+        `"
+      />
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="1"
+        :points="`
+          ${(width - titleWidth) / 2 - 10}, 37 ${(width - titleWidth) / 2 - 31}, 37
+          ${(width - titleWidth) / 2 - 25}, 46 ${(width - titleWidth) / 2 - 4}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="1;0.7;1"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="0.7"
+        :points="`
+          ${(width - titleWidth) / 2 - 40}, 37 ${(width - titleWidth) / 2 - 61}, 37
+          ${(width - titleWidth) / 2 - 55}, 46 ${(width - titleWidth) / 2 - 34}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="0.7;0.4;0.7"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="0.5"
+        :points="`
+          ${(width - titleWidth) / 2 - 70}, 37 ${(width - titleWidth) / 2 - 91}, 37
+          ${(width - titleWidth) / 2 - 85}, 46 ${(width - titleWidth) / 2 - 64}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="0.5;0.2;0.5"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="1"
+        :points="`
+          ${(width + titleWidth) / 2 + 30}, 37 ${(width + titleWidth) / 2 + 9}, 37
+          ${(width + titleWidth) / 2 + 3}, 46 ${(width + titleWidth) / 2 + 24}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="1;0.7;1"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="0.7"
+        :points="`
+          ${(width + titleWidth) / 2 + 60}, 37 ${(width + titleWidth) / 2 + 39}, 37
+          ${(width + titleWidth) / 2 + 33}, 46 ${(width + titleWidth) / 2 + 54}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="0.7;0.4;0.7"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="0.5"
+        :points="`
+          ${(width + titleWidth) / 2 + 90}, 37 ${(width + titleWidth) / 2 + 69}, 37
+          ${(width + titleWidth) / 2 + 63}, 46 ${(width + titleWidth) / 2 + 84}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="0.5;0.2;0.5"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <text
+        class="dv-border-box-11-title"
+        :x="`${width / 2}`"
+        y="32"
+        :fill="`${titleColor}`"
+        :font-size="`${titleFont}`"
+        text-anchor="middle"
+        dominant-baseline="middle"
+      >
+        {{ title }}
+      </text>
+
+      <polygon
+        :fill="mergedColor[0]"
+        :filter="`url(#${filterId})`"
+        :points="`
+          7, ${53 + (height - 167) / 2} 11, ${57 + (height - 167) / 2}
+          11, ${133 + (height - 167) / 2} 7, ${137 + (height - 167) / 2}
+        `"
+      />
+
+      <polygon
+        :fill="mergedColor[0]"
+        :filter="`url(#${filterId})`"
+        :points="`
+          ${width - 7}, ${53 + (height - 167) / 2} ${width - 11}, ${57 + (height - 167) / 2}
+          ${width - 11}, ${133 + (height - 167) / 2} ${width - 7}, ${137 + (height - 167) / 2}
+        `"
+      />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+import { fade } from '@jiaminghi/color'
+
+export default {
+  name: 'DvBorderBox11',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    titleWidth: {
+      type: Number,
+      default: 250
+    },
+    titleFont: {
+      type: Number,
+      default: 18
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    titleColor: {
+      type: String,
+      default: '#fff'
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
+  data () {
+    const id = uuid()
+    return {
+      ref: 'border-box-11',
+      filterId: `border-box-11-filterId-${id}`,
+
+      defaultColor: ['#8aaafb', '#1f33a2'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    },
+    fade
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>
@@ -26,6 +26,8 @@
     <dv-border-Box-10 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
                       v-else-if="styleColor.divClass === 'dv-border-Box-10'"></dv-border-Box-10>
     <dv-border-Box-11 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
+                      :titleFont="transStyle.titleFont"
+                      :titleColor="transStyle.titleColor"
                       :title="transStyle.title"  :titleWidth="transStyle.titleWidth"
                       v-else-if="styleColor.divClass === 'dv-border-Box-11'"></dv-border-Box-11>
     <dv-border-Box-12 :style="styleColor" :color="transStyle.color" :backgroundColor="transStyle.backgroundColor"
@@ -106,14 +106,12 @@ export default {
     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){
+      for (let i = 0; i < this.value.setup.dynamicAddSvg.length; i++) {
+        if(this.value.setup.dynamicAddSvg[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 this.value.setup.dynamicAddSvg[i].value;
         }
       }
       return "";
@@ -47,7 +47,8 @@ export default {
       optionsStyle: {}, // 样式
       optionsData: {}, // 数据
       optionsCollapse: {}, // 图标属性
-      optionsSetup: {}
+      optionsSetup: {},
+      color:[]
     };
   },
   computed: {
@@ -90,7 +91,7 @@ export default {
       this.setOptionsLegend();
       this.setOptionsData();
       this.setOptionsPiechartStyle();
-      // this.setOptionsColor();
+      this.setOptionsColor();
     },
     // 饼图样式
     setOptionsPiechartStyle() {