123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302 |
- <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="formatting">
- <li v-for="(item,key) in poistionList" :key="key">
- <img
- v-show="!item.disable"
- :src="require(`./../../assets/images/${item.img}.png`)"
- alt
- />
- <img
- v-show="item.disable"
- :src="require(`./../../assets/images/${item.disableImg}.png`)"
- alt
- />
- </li>
- </ul>-->
- <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>
- <img class="lock" :src="require(`./../../assets/images/t-lock.png`)" alt />
- </li>
- </ul>
- <attrSelect v-show="attrType" :type="attrType" :focusItemList="focusItemList" />
- </div>
- </a-tab-pane>
- <a-tab-pane key="2" tab="元素" force-render>
- <div class="element">
- <a-input-search placeholder="搜索" @search="onSearch" />
- <ul class="element-list">
- <li>
- <a-icon type="play-circle" />
- <span>电梯系统</span>
- </li>
- </ul>
- </div>
- </a-tab-pane>
- </a-tabs>
- </div>
- </template>
- <script>
- import attrSelect from "@/components/edit/attr_select";
- import bus from "@/bus";
- const poistionList = [
- {
- name: "水平调整",
- disable: false,
- img: "t-level",
- disableImg: "t-level-d"
- },
- {
- name: "垂直调整",
- disable: true,
- img: "t-vertical",
- disableImg: "t-vertical-d"
- },
- {
- name: "居左调整",
- disable: false,
- img: "t-left",
- disableImg: "t-left-d"
- },
- {
- name: "居中调整",
- disable: false,
- img: "t-center",
- disableImg: "t-center-d"
- },
- {
- name: "居右调整",
- disable: false,
- img: "t-right",
- disableImg: "t-right-d"
- },
- {
- name: "居上调整",
- disable: false,
- img: "t-top",
- disableImg: "t-top-d"
- },
- {
- name: "上下居中调整",
- disable: false,
- img: "t-topandbottm",
- disableImg: "t-topandbottm-d"
- },
- {
- name: "居下调整",
- disable: false,
- img: "t-bottom",
- disableImg: "t-bottom-d"
- }
- ];
- const msgList = [
- {
- msg: "",
- disable: false,
- name: "X",
- unit: "x"
- },
- {
- msg: "",
- disable: false,
- name: "Y",
- unit: "y"
- },
- {
- msg: "0°",
- disable: true,
- name: "",
- unit: ""
- },
- {
- msg: "",
- disable: false,
- name: "Width",
- unit: "w"
- },
- {
- msg: "",
- disable: false,
- name: "Height",
- unit: "h"
- }
- ];
- // import Select from "@/components/Select/Select.vue";
- export default {
- props: {
- focusItemList: {
- type: Object,
- default: function() {
- return [];
- },
- required: false
- }
- },
- components: {
- attrSelect
- },
- data() {
- return {
- poistionList,
- msgList,
- attrType: ""
- };
- },
- methods: {
- callback(key) {
- console.log(key);
- },
- onSearch() {},
- // 改变状态
- changeStatus(item) {
- if (item.name == "Width") {
- bus.$emit("itemWidth", item.msg);
- } else if (item.name == "Height") {
- 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) {
- 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;
- }
- });
- } else {
- this.msgList.forEach(item => {
- const Item = newVal.itemList[0];
- if (item.name == "X") {
- item.msg = Item.mapToScene(
- Item.pos.x + Item.boundingRect().x,
- Item.pos.y + Item.boundingRect().y
- ).x;
- }
- if (item.name == "Y") {
- item.msg = Item.mapToScene(
- Item.pos.x + Item.boundingRect().x,
- Item.pos.y + Item.boundingRect().y
- ).y;
- }
- if (item.name == "Width") {
- item.msg = Item.boundingRect().width;
- }
- if (item.name == "Height") {
- item.msg = Item.boundingRect().height;
- }
- });
- }
- }
- }
- };
- </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;
- .element-list {
- padding-top: 12px;
- box-sizing: border-box;
- li {
- width: 100%;
- height: 38px;
- line-height: 38px;
- padding-left: 12px;
- box-sizing: border-box;
- color: #1f2429;
- &:hover {
- background: #f5f6f7;
- }
- }
- }
- }
- }
- </style>
|