拓扑图提交

whyczyk

2021-06-04 61add4dae7aed223a695b8ff4c743ac716aabea7

拓扑图提交

 public/theme/normal.css

@@ -110,7 +110,7 @@
    background-color: #2c3377;
    border-radius: 8px;
    position: absolute;
    z-index: 10;
    z-index: 12;
    box-shadow: 4px 6px 55px 2px rgba(61, 94, 220, 0.8);
}


 src/assets/js/newDiagram/index.js

@@ -774,7 +774,6 @@
    option.right = [point[0] + option.width, point[1] + option.height / 2];
    option.top = [point[0] + option.width / 2, point[1]];
    option.bottom = [point[0] + option.width / 2, point[1] + option.height];

    // 设置执行的方法
    option.method = "drawImage";
    // 添加配置项
@@ -1314,33 +1313,33 @@
 * start起始坐标点,end结束坐标点必填项
 * start.y=end.y
 */
Diagram.prototype.drawRollAxis = function(option) {
Diagram.prototype.drawRollAxis = function (option) {
    let ctx = option.flush ? this.f_ctx : this.s_ctx; // 获取上下文
    let start = option.start;
    let end = option.end;
    let height = option.height?option.height:16;
    let height = option.height ? option.height : 16;
    let width = Math.abs(start[0] - end[0]);
    let rollAxis = this.rollAxis;

    let rollNumber = rollAxis.start;        // 旋转轴的开始点
    let rollSpeed = rollAxis.speed;         // 旋转的速度
    let color1 = option.color1?option.color1:"#cdcaca";             // 开始颜色
    let color2 = option.color2?option.color2:"#FFFFFF";             // 中间颜色
    let grd = ctx.createLinearGradient(start[0], start[0], start[0], height+start[0]);      // 渐变色
    grd.addColorStop(rollNumber-Math.floor(rollNumber), color1);
    rollNumber = rollNumber+0.25;
    grd.addColorStop(rollNumber-Math.floor(rollNumber),color2);
    rollNumber = rollNumber+0.25;
    grd.addColorStop(rollNumber-Math.floor(rollNumber), color1);
    rollNumber = rollNumber+0.25;
    grd.addColorStop(rollNumber-Math.floor(rollNumber),color2);
    rollNumber = rollNumber+0.25;
    grd.addColorStop(rollNumber-Math.floor(rollNumber), color1);
    let rollNumber = rollAxis.start; // 旋转轴的开始点
    let rollSpeed = rollAxis.speed; // 旋转的速度
    let color1 = option.color1 ? option.color1 : "#cdcaca"; // 开始颜色
    let color2 = option.color2 ? option.color2 : "#FFFFFF"; // 中间颜色
    let grd = ctx.createLinearGradient(start[0], start[0], start[0], height + start[0]); // 渐变色
    grd.addColorStop(rollNumber - Math.floor(rollNumber), color1);
    rollNumber = rollNumber + 0.25;
    grd.addColorStop(rollNumber - Math.floor(rollNumber), color2);
    rollNumber = rollNumber + 0.25;
    grd.addColorStop(rollNumber - Math.floor(rollNumber), color1);
    rollNumber = rollNumber + 0.25;
    grd.addColorStop(rollNumber - Math.floor(rollNumber), color2);
    rollNumber = rollNumber + 0.25;
    grd.addColorStop(rollNumber - Math.floor(rollNumber), color1);
    ctx.fillStyle = grd;
    ctx.fillRect(start[0], start[1],width, height);
    ctx.fillRect(start[0], start[1], width, height);

    rollAxis.start += rollSpeed;
    if(rollAxis.start>1.25) {
    if (rollAxis.start > 1.25) {
        rollAxis.start = 0;
    }

@@ -1348,8 +1347,8 @@
    option.method = "drawRollAxis";
    this.addOptions(option);
    return {
        left: [start[0], start[1]+height/2],
        bottom: [end[0], end[1]+height/2],
        left: [start[0], start[1] + height / 2],
        bottom: [end[0], end[1] + height / 2],
    }
}


 src/pages/home/topoGraph.vue

@@ -783,21 +783,58 @@
                let p = diagram.getEventPosition(e);
                let clickX = p.x;
                let clickY = p.y;
                diagram.options.map(item => {
                for (let i = 0; i < diagram.options.length; i++) {
                    let item = diagram.options[i];

                    if (item.method == "drawRadiusRect") {
                        let text = diagram.getZoomTextInfo(item.id);
                        let objLeft = text.point[0];
                        let objRight = text.point[0] + text.width;
                        let objTop = text.point[1];
                        let objBottom = text.point[1] + text.height;
                        // this['show' + item.id] = false;
                        this.showtext1 = false;
                        this.showtext2 = false;
                        this.showtext3 = false;
                        this.showtext4 = false;
                        this.showtext5 = false;
                        this.showtext6 = false;
                        this.showtext7 = false;
                        this.showtext8 = false;
                        this.showtext9 = false;
                        this.showtext10 = false;
                        if (clickX > objLeft && clickX < objRight && clickY > objTop && clickY <
                            objBottom) {
                            item.showPanel = !item.showPanel;
                            this['show' + item.id] = item.showPanel;
                            this['show' + item.id] = true;
                            break;
                        }
                    } else if (item.method == "drawImage") {
                        if (item.textId) {
                            let Xzoom = diagram.stc.clientWidth / diagram.width;
                            let Yzoom = diagram.stc.clientHeight / diagram.height;
                            let img = item;
                            let imgobjLeft = img.left[0] * Xzoom;
                            let imgobjRight = img.right[0] * Xzoom;
                            let imgobjTop = img.top[1] * Yzoom;
                            let imgobjBottom = img.bottom[1] * Yzoom;
                            this.showtext1 = false;
                            this.showtext2 = false;
                            this.showtext3 = false;
                            this.showtext4 = false;
                            this.showtext5 = false;
                            this.showtext6 = false;
                            this.showtext7 = false;
                            this.showtext8 = false;
                            this.showtext9 = false;
                            this.showtext10 = false;

                            if (clickX > imgobjLeft && clickX < imgobjRight && clickY > imgobjTop && clickY <
                                imgobjBottom) {
                                this['show' + item.textId] = true;
                                break;
                            }
                        }
                    }
                })
                }
            }, false)

            // 设置充放电的类型

 src/pages/home/topoGraphdiagram/js/gridCircuitDiagram.js

@@ -90,6 +90,7 @@
    let Image11 = diagram.drawImage({
        id: 'img11',
        url: waterStation,
        textId: 'text8',
        point: [40, 200],
        width: 89,
        height: 109
@@ -127,6 +128,7 @@
    let Image12 = diagram.drawImage({
        id: 'img12',
        url: oilStation,
        textId: 'text9',
        point: [30, 420],
        width: 124,
        height: 103
@@ -342,6 +344,7 @@

    let Image2 = diagram.drawImage({
        id: 'img2',
        textId: 'text4',
        url: rectifier,
        point: [text3.bottom[0] - 32, text3.bottom[1] + 2],
        width: 70,
@@ -372,6 +375,7 @@
    let Image3 = diagram.drawImage({
        id: 'img3',
        url: plate,
        textId: 'text5',
        point: [text6.bottom[0] - 36, text6.bottom[1] + 2],
        width: 74,
        height: 98,
@@ -477,7 +481,8 @@
    let Image8 = diagram.drawImage({
        id: 'img8',
        url: dynamometry,
        point: [line11[1][0]-6, line11[1][1] - 30],
        textId: 'text10',
        point: [line11[1][0] - 6, line11[1][1] - 30],
        width: 90,
        height: 85,
    })
@@ -506,6 +511,7 @@
    let Image9 = diagram.drawImage({
        id: 'img9',
        url: AFE,
        textId: 'text7',
        point: [line12[1][0] - 45, line12[1][1] - 83],
        width: 70,
        height: 95,
@@ -576,7 +582,7 @@
        lineWidth: lineWidth,
        points: [
            [line13[0][0], onOff4.arc1.top[1]],
            [line13[0][0], onOff4.arc1.top[1] - 45],
            [line13[0][0], onOff4.arc1.top[1] - 68],
        ]
    })