拖拽功能优化

whyczyk

2021-03-17 58389ceb645e64820062bb4ceed8b2b7e655bd75

拖拽功能优化

 src/components/charts/abeamProChart.vue

@@ -75,10 +75,8 @@
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: chartFontsize(12),
              },
              color: '#fff',
              fontSize: chartFontsize(12),
            },
            splitLine: {
              show: false
@@ -95,10 +93,8 @@
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: chartFontsize(12),
              },
              color: '#fff',
              fontSize: chartFontsize(12),
            },
            splitLine: {
              show: false
@@ -119,7 +115,7 @@
                color: function (params) {
                  return dataColor[params.dataIndex];
                },
                barBorderRadius: [0, radius, radius, 0],
                borderRadius: [0, radius, radius, 0],
              },
              barWidth: radius,
              barCategoryGap: "0%",
@@ -136,12 +132,10 @@
                show: false
              },
              label: {
                normal: {
                  show: true,
                  position: 'insideRight',
                  fontSize: chartFontsize(18),
                  color: '#021750'
                }
                show: true,
                position: 'insideRight',
                fontSize: chartFontsize(18),
                color: '#021750'
              },
              itemStyle: {
                color: function (params) {
@@ -162,11 +156,9 @@
              barWidth: radius,
              data: maxData,
              itemStyle: {
                normal: {
                  color: function (params) {
                    return bgColor[params.dataIndex];
                  },
                }
                color: function (params) {
                  return bgColor[params.dataIndex];
                },
              },
            },
          ]

 src/components/charts/imgPieChart.vue

@@ -59,18 +59,14 @@
              type: 'pie',
              radius: ['35%', '65%'],
              itemStyle: {
                normal: {
                  borderColor: '#021651',
                  borderWidth: 6,
                }
                borderColor: '#021651',
                borderWidth: 6,
              },
              labelLine: {
                normal: {
                  length: 20,
                  length2: 0,
                  lineStyle: {
                    color: '#007ed3'
                  }
                length: 20,
                length2: 0,
                lineStyle: {
                  color: '#007ed3'
                }
              },
              label: {
@@ -107,20 +103,18 @@
              name: '',
              type: 'pie',
              radius: '50%',
              hoverAnimation: false,
              emphasis: {
                scale: false
              },
              data: [{
                value: 20,
                name: ''
              }],
              label: {
                normal: {
                  show: false
                }
                show: false
              },
              itemStyle: {
                normal: {
                  color: 'rgba(7,56,128,0.2)'
                }
                color: 'rgba(7,56,128,0.2)'
              },
              zlevel: 2
            },
@@ -128,20 +122,18 @@
              name: '',
              type: 'pie',
              radius: '46%',
              hoverAnimation: false,
              emphasis: {
                scale: false
              },
              data: [{
                value: 20,
                name: ''
              }],
              label: {
                normal: {
                  show: false
                }
                show: false
              },
              itemStyle: {
                normal: {
                  color: '#00b2e0'
                }
                color: '#00b2e0'
              },
              zlevel: 3
            },
@@ -149,20 +141,18 @@
              name: '',
              type: 'pie',
              radius: '35%',
              hoverAnimation: false,
              emphasis: {
                scale: false
              },
              data: [{
                value: 20,
                name: ''
              }],
              label: {
                normal: {
                  show: false
                }
                show: false
              },
              itemStyle: {
                normal: {
                  color: '#ffffff'
                }
                color: '#ffffff'
              },
              zlevel: 4
            },

 src/components/charts/latticeBar.vue

@@ -97,10 +97,8 @@
              }
            },
            axisLabel: {
              textStyle: {
                color: '#FFFFFF',
                fontSize: chartFontsize(12),
              },
              color: '#FFFFFF',
              fontSize: chartFontsize(12),
            },
          }],
          series: []

 src/components/charts/prossPieChart.vue

@@ -85,20 +85,18 @@
              type: 'pie',
              radius: '75%',
              center: ['50%', '40%'],
              hoverAnimation: false,
              emphasis: {
                scale: false
              },
              data: [{
                value: data,
                name: ''
              }],
              label: {
                normal: {
                  show: false
                }
                show: false
              },
              itemStyle: {
                normal: {
                  color: color
                }
                color: color
              },
              zlevel: 1
            }, {
@@ -106,22 +104,20 @@
              type: 'pie',
              radius: '61%',
              center: ['50%', '40%'],
              hoverAnimation: false,
              emphasis: {
                scale: false
              },
              data: [{
                value: data,
                name: ''
              }],
              label: {
                normal: {
                  show: false
                }
                show: false
              },
              itemStyle: {
                normal: {
                  color: 'transparent',
                  borderType: 'dashed',
                  borderColor: '#ffffff'
                }
                color: 'transparent',
                borderType: 'dashed',
                borderColor: '#ffffff'
              },
              zlevel: 2
            },
@@ -130,24 +126,22 @@
              type: 'pie',
              radius: '61%',
              center: ['50%', '40%'],
              hoverAnimation: false,
              emphasis: {
                scale: false
              },
              data: [{
                value: data,
                name: text
              }],
              label: {
                normal: {
                  show: true,
                  position: "center",
                  fontSize: chartFontsize(24),
                  fontWeight: '600',
                  color: '#ffffff'
                }
                show: true,
                position: "center",
                fontSize: chartFontsize(24),
                fontWeight: '600',
                color: '#ffffff'
              },
              itemStyle: {
                normal: {
                  color: color,
                }
                color: color,
              },
              zlevel: 3
            }, {
@@ -158,9 +152,7 @@
              data: [data],
              coordinateSystem: 'polar',
              itemStyle: {
                normal: {
                  color: '#ffffff',
                }
                color: '#ffffff',
              },
              zlevel: 4
            },

 src/components/charts/triangleBarChart.vue

@@ -110,10 +110,8 @@
              }
            },
            axisLabel: {
              textStyle: {
                color: '#FFFFFF',
                fontSize: chartFontsize(12)
              },
              color: '#FFFFFF',
              fontSize: chartFontsize(12)
            },
          }],
          series: [{
@@ -126,18 +124,16 @@
            symbol: 'path://d="M150 50 L130 130 L170 130  Z',
            zlevel: 2,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                    offset: 0,
                    color: "#65B3AD"
                  },
                  {
                    offset: 1,
                    color: "#9EFFDA"
                  }
                ]),
                opacity: 0.48
              },
              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                  offset: 0,
                  color: "#65B3AD"
                },
                {
                  offset: 1,
                  color: "#9EFFDA"
                }
              ]),
              opacity: 0.48
            },
          }, {
            name: 'inData',
@@ -149,18 +145,16 @@
            symbol: 'path://d="M150 50 L130 130 L170 130  Z',
            zlevel: 1,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                    offset: 0,
                    color: "#65B3AD"
                  },
                  {
                    offset: 1,
                    color: "#9EFFDA"
                  }
                ]),
                opacity: 1
              },
              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
                  offset: 0,
                  color: "#65B3AD"
                },
                {
                  offset: 1,
                  color: "#9EFFDA"
                }
              ]),
              opacity: 1
            },
          }]
        };

 src/components/settingModular.vue

@@ -115,6 +115,7 @@
          item.w = item.w / clientWidth;
          item.h = item.h / clientHeight;
        })
        sendData.isremoved = false;
        this.$emit('onDragstop', sendData);
      },
      //面板改变位置时
@@ -142,6 +143,7 @@
          item.w = item.w / clientWidth;
          item.h = item.h / clientHeight;
        })
        sendData.isremoved = false;
        this.$emit('onDragstop', sendData);
      },
      // 辅助线回调事件
@@ -178,7 +180,8 @@
          item.y = item.y / clientHeight;
          item.w = item.w / clientWidth;
          item.h = item.h / clientHeight;
        })
        });
        sendData.isremoved = true;
        this.$emit('removeModular', sendData);
      },
      // 加载布局数据
@@ -193,12 +196,13 @@
            let modular = require(`./charts/${item.type}.vue`).default;
            let modularExtend = Vue.extend(modular);
            let chartModular = new modularExtend().$mount();
            chartModular.id = `chart${item.id}`
            if (nowBox[0].children.length > 0) {
              nowBox[0].replaceChild(chartModular.$el, nowBox[0].children[0])
            } else {
            chartModular.id = `chart${item.id}`;
            if (nowBox[0].children.length == 0) {
              nowBox[0].appendChild(chartModular.$el)
              this.modularArr.push(chartModular);
            }
            if (this.nowlayOut.isremoved) {
              nowBox[0].replaceChild(chartModular.$el, nowBox[0].children[0])
            }
            chartModular.setData(item.setData);
            chartModular.resize();
@@ -220,7 +224,7 @@
    margin: 0;
    background: #27343e;
    z-index: 3000;
    position: absolute;
    position: fixed;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;

 src/pages/design.vue

@@ -123,21 +123,23 @@
                }
              }
            })
            this.modularTitle.map((item) => {
              item.selected = false;
              if (item.name == this.layOut.headPic) {
                item.selected = true;
                this.screenTitleBg = item.img;
              }
            });
            this.modularBg.map((item) => {
              item.selected = false;
              if (item.name == this.layOut.bgPic) {
                item.selected = true;
                this.screenBg = item.img;
              }
            });
          }
          this.layOut.headPic = 'bigscreenTitle1';
          this.layOut.bgPic = 'bigscreenbg1';
          this.modularTitle.map((item) => {
            item.selected = false;
            if (item.name == this.layOut.headPic) {
              item.selected = true;
              this.screenTitleBg = item.img;
            }
          });
          this.modularBg.map((item) => {
            item.selected = false;
            if (item.name == this.layOut.bgPic) {
              item.selected = true;
              this.screenBg = item.img;
            }
          });
        }).catch((err) => {
          console.log(err)
        });