123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346 |
- <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>
- <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="搜索" style="margin-bottom: 12px;" v-model="key" @search="onSearch" />
- <ul class="element-list">
- <li v-for="ele in elementData" :key="ele.id" @click="clickElement(ele)" 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 bus from "@/bus";
- import bus2 from "@/bus2";
- import { SImageMarkerItem } from "@/lib/items/SImageMarkerItem";
- import { SImageLegendItem } from "@/lib/items/SImageLegendItem";
- 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
- },
- created() {
- this.listenElementData();
- },
- data() {
- return {
- msgList,
- attrType: "",
- elementData: [],
- key: "",
- isLock: true,
- aspectRatio: 1,// 元素宽高比
- };
- },
- methods: {
- // 获取元素数据
- listenElementData() {
- bus2.$off('elementDataChange')
- bus2.$on("elementDataChange", val => {
- this.elementData = [];
- if (val.Nodes.length) {
- this.elementData = this.elementData.concat(val.Nodes);
- }
- 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);
- }
- },
- // 点击选中元素
- clickElement(ele){
- bus.$emit('toggleItem',ele)
- }
- },
- 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;
- }
- });
- 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;
- cursor: pointer;
- .element-name {
- display: inline-block;
- vertical-align: top;
- line-height: 38px;
- width: calc(100% - 45px);
- height: 100%;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- &:hover {
- background: #f5f6f7;
- }
- }
- }
- }
- }
- /deep/ .ant-tabs .ant-tabs-top-content.ant-tabs-content-animated {
- height: calc(100% - 60px);
- }
- </style>
|