wanda-editer/src/components/edit/right_toolbar.vue

<template>
    <div id="right_toolbar">
        <!-- 右侧侧编辑器 -->
        <a-tabs class="atabless" default-active-key="1" @change="callback">
            <a-tab-pane key="1" tab="属性">
                <div class="property">
                    <ul class="position">
                        <li v-for="(item,i) in msgList" :key="i">
                            <a-input
                                :disabled="item.disable"
                                @change="changeStatus(item)"
                                size="small"
                                v-model="item.msg"
                                placeholder
                                :suffix="item.unit"
                            />
                        </li>
                        <li @click="lockItem" :title="isLock?'锁定':'解锁'">
                            <Icon style="vertical-align: middle;" :name="isLock?'lock':'unlock'" />
                        </li>
                    </ul>
                    <equipment-attr v-if="attrType === 'Equipment'" :focusItemList="focusItemList"/>
                    <attrSelect v-else :type="attrType" :focusItemList="focusItemList" />
                    <!-- <attrSelect v-show="attrType !== 'Equipment' " :type="attrType" :focusItemList="focusItemList" /> -->
                </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="元素" force-render>
                <div class="element">
                    <a-input-search placeholder="搜索" style="margin-bottom: 12px;" v-model="key" @search="onSearch" />
                    <ul class="element-list">
                        <li v-for="ele in elementData" :key="ele.id" v-show="key?ele.name.search(key) != -1:true">
                            <el-image style="width: 45px; height: 26px; margin-top: 6px;" :src="ele.data.Properties.IconUrl" fit="contain"></el-image>
                            <span class="element-name">{{ele.name}}</span>
                        </li>
                    </ul>
                </div>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>
<script>
import attrSelect from "@/components/edit/attr_select";
import equipmentAttr from './equipmentAttr.vue'
import bus from "@/bus";
import { SImageMarkerItem } from "../../lib/items/SImageMarkerItem";
import { SImageLegendItem } from "../../lib/items/SImageLegendItem";
import { SEquipmentItem } from "../../lib/items/SEquipmentItem";
const msgList = [
    {
        msg: "",
        disable: false,
        name: "X",
        unit: "x"
    },
    {
        msg: "",
        disable: false,
        name: "Y",
        unit: "y"
    },
    {
        msg: "0°",
        disable: true,
        name: "",
        unit: ""
    },
    {
        msg: "",
        disable: true,
        name: "Width",
        unit: "w"
    },
    {
        msg: "",
        disable: true,
        name: "Height",
        unit: "h"
    }
];
// import Select from "@/components/Select/Select.vue";
export default {
    props: {
        focusItemList: {
            type: Object,
            default: function() {
                return [];
            },
            required: false
        }
    },
    components: {
        attrSelect,equipmentAttr
    },
    created() {
        this.listenElementData();
    },
    data() {
        return {
            msgList,
            attrType: "",
            elementData: [],
            key: "",
            isLock: true,
            aspectRatio: 1 // 元素宽高比
        };
    },
    methods: {
        // 获取元素数据
        listenElementData() {
            bus.$on("elementDataChange", val => {
                this.elementData = [];
                console.log(val);
                if (val.Nodes.length) {
                    // 过滤掉 设备类 SEquipmentItem,不在右侧组件中暂时组件类
                    let data = val.Nodes.filter(item => !item instanceof SEquipmentItem);
                    this.elementData = this.elementData.concat(data);
                }
                if (val.Markers.length) {
                    this.elementData = this.elementData.concat(val.Markers);
                }
                if (val.Relations.length) {
                    this.elementData = this.elementData.concat(val.Relations);
                }
                console.log(this.elementData);
            });
        },
        callback(key) {
            console.log(key);
        },
        // 元素检索
        onSearch(key) {
            console.log(key);
        },
        // 切换锁状态
        lockItem() {
            this.isLock = !this.isLock;
            if (this.isLock) {
                let width, height;
                this.msgList.forEach(item => {
                    if (item.name == "Width") {
                        width = item.msg;
                    } else if (item.name == "Height") {
                        height = item.msg;
                    }
                });
                this.aspectRatio = width / height;
            }
        },
        // 改变状态
        changeStatus(item) {
            if (item.name == "Width") {
                if (this.isLock) {
                    const height = item.msg / this.aspectRatio;
                    this.msgList.find(item => {
                        return item.name == "Height";
                    }).msg = height;
                    bus.$emit("itemHeight", height);
                }
                bus.$emit("itemWidth", item.msg);
            } else if (item.name == "Height") {
                if (this.isLock) {
                    const width = item.msg * this.aspectRatio;
                    this.msgList.find(item => {
                        return item.name == "Width";
                    }).msg = width;
                    bus.$emit("itemWidth", width);
                }
                bus.$emit("itemHeight", item.msg);
            } else if (item.name == "X" || item.name == "Y") {
                let x,
                    y = "";
                this.msgList.forEach(t => {
                    if (t.name == "X") {
                        x = t.msg;
                    } else if (t.name == "Y") {
                        y = t.msg;
                    }
                });
                bus.$emit("itemPositon", x, y);
            }
        }
    },
    watch: {
        focusItemList: function(newVal) {
            console.log('focusItemList',newVal)
            this.attrType = newVal.itemType;
            if (newVal.itemList.length !== 1) {
                this.msgList.forEach(item => {
                    if (item.name == "X") {
                        item.msg = 0;
                    }
                    if (item.name == "Y") {
                        item.msg = 0;
                    }
                    if (item.name == "Width") {
                        item.msg = 0;
                    }
                    if (item.name == "Height") {
                        item.msg = 0;
                    }
                });
                this.aspectRatio = 1;
            } else {
                // 属性输入框宽高显示的数值
                let inputW, inputH;
                this.msgList.forEach(item => {
                    const Item = newVal.itemList[0];
                    const width = Item.boundingRect().width;
                    const height = Item.boundingRect().height;
                    if (item.name == "X") {
                        item.msg = Item.mapToScene(Item.boundingRect().left, Item.boundingRect().top).x;
                    }
                    if (item.name == "Y") {
                        item.msg = Item.mapToScene(Item.boundingRect().left, Item.boundingRect().top).y;
                    }
                    if (item.name == "Width") {
                        item.msg = width;
                        // Icon显示图片宽
                        if (Item instanceof SImageLegendItem) {
                            item.msg = Item.img.width;
                        }
                        // 针对图片及Icon
                        if (Item instanceof SImageMarkerItem || Item instanceof SImageLegendItem) {
                            item.disable = false;
                        } else {
                            item.disable = true;
                        }
                        inputW = item.msg;
                    }
                    if (item.name == "Height") {
                        item.msg = height;
                        // Icon显示图片高
                        if (Item instanceof SImageLegendItem) {
                            item.msg = Item.img.height;
                        }
                        // 针对图片及Icon
                        if (Item instanceof SImageMarkerItem || Item instanceof SImageLegendItem) {
                            item.disable = false;
                        } else {
                            item.disable = true;
                        }
                        inputH = item.msg;
                    }
                });
                this.aspectRatio = inputW / inputH;
            }
        }
    }
};
</script>
<style lang="less" scoped>
ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}
#right_toolbar {
    width: 280px;
    height: 100%;
    background: rgba(255, 255, 255, 1);
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.11);
    .atabless {
        height: 100%;
        width: 100%;
    }
    .property {
        width: 100%;
        height: 100%;
        .formatting {
            display: flex;
            height: 50px;
            padding: 0 12px 0 12px;
            box-sizing: border-box;
            align-items: center;
            justify-content: space-around;
            li {
                width: 16px;
                height: 16px;
                cursor: pointer;
                img {
                    width: 16px;
                    height: 16px;
                }
            }
        }
        .position {
            display: flex;
            padding: 0 12px 30px 12px;
            box-sizing: border-box;
            display: flex;
            border-bottom: 1px solid #c3c7cb;
            flex-wrap: wrap;
            li {
                margin-top: 10px;
                width: 30%;
                margin-right: 8px;
                .lock {
                    width: 16px;
                    height: 16px;
                    cursor: pointer;
                }
            }
        }
    }
    .element {
        margin: 0 12px 0 12px;
        height: 100%;
        .element-list {
            height: calc(100% - 44px);
            overflow-y: auto;
            box-sizing: border-box;
            li {
                width: 100%;
                height: 38px;
                line-height: 38px;
                padding-left: 12px;
                box-sizing: border-box;
                color: #1f2429;
                .element-name {
                    display: inline-block;
                    vertical-align: top;
                    line-height: 38px;
                }
                &:hover {
                    background: #f5f6f7;
                }
            }
        }
    }
}
/deep/ .ant-tabs .ant-tabs-top-content.ant-tabs-content-animated {
    height: calc(100% - 60px);
}
</style>