right_toolbar.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  1. <template>
  2. <div id="right_toolbar">
  3. <!-- 右侧侧编辑器 -->
  4. <a-tabs class="atabless" default-active-key="1" @change="callback">
  5. <a-tab-pane key="1" tab="属性">
  6. <div class="property">
  7. <ul class="position">
  8. <li v-for="(item,i) in msgList" :key="i">
  9. <a-input
  10. :disabled="item.disable"
  11. @change="changeStatus(item)"
  12. size="small"
  13. v-model="item.msg"
  14. placeholder
  15. :suffix="item.unit"
  16. />
  17. </li>
  18. <li>
  19. <img class="lock" :src="require(`./../../assets/images/t-lock.png`)" alt />
  20. </li>
  21. </ul>
  22. <attrSelect v-show="attrType" :type="attrType" :focusItemList="focusItemList" />
  23. </div>
  24. </a-tab-pane>
  25. <a-tab-pane key="2" tab="元素" force-render>
  26. <div class="element">
  27. <a-input-search placeholder="搜索" @search="onSearch" />
  28. <ul class="element-list">
  29. <li>
  30. <a-icon type="play-circle" />
  31. <span>电梯系统</span>
  32. </li>
  33. </ul>
  34. </div>
  35. </a-tab-pane>
  36. </a-tabs>
  37. </div>
  38. </template>
  39. <script>
  40. import attrSelect from "@/components/edit/attr_select";
  41. import bus from "@/bus";
  42. const msgList = [
  43. {
  44. msg: "",
  45. disable: false,
  46. name: "X",
  47. unit: "x"
  48. },
  49. {
  50. msg: "",
  51. disable: false,
  52. name: "Y",
  53. unit: "y"
  54. },
  55. {
  56. msg: "0°",
  57. disable: true,
  58. name: "",
  59. unit: ""
  60. },
  61. {
  62. msg: "",
  63. disable: false,
  64. name: "Width",
  65. unit: "w"
  66. },
  67. {
  68. msg: "",
  69. disable: false,
  70. name: "Height",
  71. unit: "h"
  72. }
  73. ];
  74. // import Select from "@/components/Select/Select.vue";
  75. export default {
  76. props: {
  77. focusItemList: {
  78. type: Object,
  79. default: function() {
  80. return [];
  81. },
  82. required: false
  83. }
  84. },
  85. components: {
  86. attrSelect
  87. },
  88. data() {
  89. return {
  90. msgList,
  91. attrType: ""
  92. };
  93. },
  94. methods: {
  95. callback(key) {
  96. console.log(key);
  97. },
  98. onSearch() {},
  99. // 改变状态
  100. changeStatus(item) {
  101. if (item.name == "Width") {
  102. bus.$emit("itemWidth", item.msg);
  103. } else if (item.name == "Height") {
  104. bus.$emit("itemHeight", item.msg);
  105. } else if (item.name == "X" || item.name == "Y") {
  106. let x,
  107. y = "";
  108. this.msgList.forEach(t => {
  109. if (t.name == "X") {
  110. x = t.msg;
  111. } else if (t.name == "Y") {
  112. y = t.msg;
  113. }
  114. });
  115. bus.$emit("itemPositon", x, y);
  116. }
  117. }
  118. },
  119. watch: {
  120. focusItemList: function(newVal) {
  121. this.attrType = newVal.itemType;
  122. if (newVal.itemList.length !== 1) {
  123. this.msgList.forEach(item => {
  124. if (item.name == "X") {
  125. item.msg = 0;
  126. }
  127. if (item.name == "Y") {
  128. item.msg = 0;
  129. }
  130. if (item.name == "Width") {
  131. item.msg = 0;
  132. }
  133. if (item.name == "Height") {
  134. item.msg = 0;
  135. }
  136. });
  137. } else {
  138. this.msgList.forEach(item => {
  139. const Item = newVal.itemList[0];
  140. if (item.name == "X") {
  141. item.msg = Item.mapToScene(
  142. Item.boundingRect().left,
  143. Item.boundingRect().top
  144. ).x;
  145. }
  146. if (item.name == "Y") {
  147. item.msg = Item.mapToScene(
  148. Item.boundingRect().left,
  149. Item.boundingRect().top
  150. ).y;
  151. }
  152. if (item.name == "Width") {
  153. item.msg = Item.boundingRect().width;
  154. // 针对icon 以及图片
  155. if (
  156. Item.data &&
  157. Item.data.GraphElementType &&
  158. Item.data.GraphElementType == "Image"
  159. ) {
  160. item.msg = Item.width;
  161. }
  162. }
  163. if (item.name == "Height") {
  164. item.msg = Item.boundingRect().height;
  165. if (
  166. Item.data &&
  167. Item.data.GraphElementType &&
  168. Item.data.GraphElementType == "Image"
  169. ) {
  170. item.msg = Item.height;
  171. }
  172. }
  173. });
  174. }
  175. }
  176. }
  177. };
  178. </script>
  179. <style lang="less" scoped>
  180. ul,
  181. li {
  182. margin: 0;
  183. padding: 0;
  184. list-style: none;
  185. }
  186. #right_toolbar {
  187. width: 280px;
  188. height: 100%;
  189. background: rgba(255, 255, 255, 1);
  190. box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.11);
  191. .atabless {
  192. height: 100%;
  193. width: 100%;
  194. }
  195. .property {
  196. width: 100%;
  197. height: 100%;
  198. .formatting {
  199. display: flex;
  200. height: 50px;
  201. padding: 0 12px 0 12px;
  202. box-sizing: border-box;
  203. align-items: center;
  204. justify-content: space-around;
  205. li {
  206. width: 16px;
  207. height: 16px;
  208. cursor: pointer;
  209. img {
  210. width: 16px;
  211. height: 16px;
  212. }
  213. }
  214. }
  215. .position {
  216. display: flex;
  217. padding: 0 12px 30px 12px;
  218. box-sizing: border-box;
  219. display: flex;
  220. border-bottom: 1px solid #c3c7cb;
  221. flex-wrap: wrap;
  222. li {
  223. margin-top: 10px;
  224. width: 30%;
  225. margin-right: 8px;
  226. .lock {
  227. width: 16px;
  228. height: 16px;
  229. cursor: pointer;
  230. }
  231. }
  232. }
  233. }
  234. .element {
  235. margin: 0 12px 0 12px;
  236. .element-list {
  237. padding-top: 12px;
  238. box-sizing: border-box;
  239. li {
  240. width: 100%;
  241. height: 38px;
  242. line-height: 38px;
  243. padding-left: 12px;
  244. box-sizing: border-box;
  245. color: #1f2429;
  246. &:hover {
  247. background: #f5f6f7;
  248. }
  249. }
  250. }
  251. }
  252. }
  253. </style>