right_toolbar.vue 6.5 KB

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