right_toolbar.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  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 @click="lockItem" :title="isLock?'锁定':'解锁'">
  19. <Icon style="vertical-align: middle;" :name="isLock?'lock':'unlock'" />
  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="搜索" style="margin-bottom: 12px;" v-model="key" @search="onSearch" />
  28. <ul class="element-list">
  29. <li v-for="ele in elementData" :key="ele.id" @click="clickElement(ele)" v-show="key?ele.name.search(key) != -1:true">
  30. <el-image style="width: 45px; height: 26px; margin-top: 6px;" :src="ele.data.Properties.IconUrl" fit="contain"></el-image>
  31. <span class="element-name">{{ele.name}}</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. import { SImageMarkerItem } from '../../lib/items/SImageMarkerItem';
  43. import { SImageLegendItem } from '../../lib/items/SImageLegendItem';
  44. const msgList = [
  45. {
  46. msg: "",
  47. disable: false,
  48. name: "X",
  49. unit: "x"
  50. },
  51. {
  52. msg: "",
  53. disable: false,
  54. name: "Y",
  55. unit: "y"
  56. },
  57. {
  58. msg: "0°",
  59. disable: true,
  60. name: "",
  61. unit: ""
  62. },
  63. {
  64. msg: "",
  65. disable: true,
  66. name: "Width",
  67. unit: "w"
  68. },
  69. {
  70. msg: "",
  71. disable: true,
  72. name: "Height",
  73. unit: "h"
  74. }
  75. ];
  76. // import Select from "@/components/Select/Select.vue";
  77. export default {
  78. props: {
  79. focusItemList: {
  80. type: Object,
  81. default: function() {
  82. return [];
  83. },
  84. required: false
  85. }
  86. },
  87. components: {
  88. attrSelect
  89. },
  90. created() {
  91. this.listenElementData();
  92. },
  93. data() {
  94. return {
  95. msgList,
  96. attrType: "",
  97. elementData: [],
  98. key: "",
  99. isLock: true,
  100. aspectRatio: 1,// 元素宽高比
  101. };
  102. },
  103. methods: {
  104. // 获取元素数据
  105. listenElementData() {
  106. bus.$on("elementDataChange", val => {
  107. this.elementData = [];
  108. if (val.Nodes.length) {
  109. this.elementData = this.elementData.concat(val.Nodes);
  110. }
  111. if (val.Markers.length) {
  112. this.elementData = this.elementData.concat(val.Markers);
  113. }
  114. if (val.Relations.length) {
  115. this.elementData = this.elementData.concat(val.Relations);
  116. }
  117. console.log(this.elementData);
  118. });
  119. },
  120. callback(key) {
  121. console.log(key);
  122. },
  123. // 元素检索
  124. onSearch(key) {
  125. console.log(key);
  126. },
  127. // 切换锁状态
  128. lockItem() {
  129. this.isLock = !this.isLock;
  130. if (this.isLock) {
  131. let width,height;
  132. this.msgList.forEach(item => {
  133. if (item.name == "Width") {
  134. width = item.msg;
  135. } else if (item.name == "Height") {
  136. height = item.msg;
  137. }
  138. });
  139. this.aspectRatio = width / height;
  140. }
  141. },
  142. // 改变状态
  143. changeStatus(item) {
  144. if (item.name == "Width") {
  145. if (this.isLock) {
  146. const height = item.msg / this.aspectRatio;
  147. this.msgList.find(item => {
  148. return item.name == "Height"
  149. }).msg = height;
  150. bus.$emit("itemHeight", height);
  151. }
  152. bus.$emit("itemWidth", item.msg);
  153. } else if (item.name == "Height") {
  154. if (this.isLock) {
  155. const width = item.msg * this.aspectRatio;
  156. this.msgList.find(item => {
  157. return item.name == "Width"
  158. }).msg = width;
  159. bus.$emit("itemWidth", width);
  160. }
  161. bus.$emit("itemHeight", item.msg);
  162. } else if (item.name == "X" || item.name == "Y") {
  163. let x,
  164. y = "";
  165. this.msgList.forEach(t => {
  166. if (t.name == "X") {
  167. x = t.msg;
  168. } else if (t.name == "Y") {
  169. y = t.msg;
  170. }
  171. });
  172. bus.$emit("itemPositon", x, y);
  173. }
  174. },
  175. // 点击选中元素
  176. clickElement(ele){
  177. bus.$emit('toggleItem',ele)
  178. }
  179. },
  180. watch: {
  181. focusItemList: function(newVal) {
  182. this.attrType = newVal.itemType;
  183. if (newVal.itemList.length !== 1) {
  184. this.msgList.forEach(item => {
  185. if (item.name == "X") {
  186. item.msg = 0;
  187. }
  188. if (item.name == "Y") {
  189. item.msg = 0;
  190. }
  191. if (item.name == "Width") {
  192. item.msg = 0;
  193. }
  194. if (item.name == "Height") {
  195. item.msg = 0;
  196. }
  197. });
  198. this.aspectRatio = 1;
  199. } else {
  200. // 属性输入框宽高显示的数值
  201. let inputW,inputH;
  202. this.msgList.forEach(item => {
  203. const Item = newVal.itemList[0];
  204. const width = Item.boundingRect().width;
  205. const height = Item.boundingRect().height;
  206. if (item.name == "X") {
  207. item.msg = Item.mapToScene(
  208. Item.boundingRect().left,
  209. Item.boundingRect().top
  210. ).x;
  211. }
  212. if (item.name == "Y") {
  213. item.msg = Item.mapToScene(
  214. Item.boundingRect().left,
  215. Item.boundingRect().top
  216. ).y;
  217. }
  218. if (item.name == "Width") {
  219. item.msg = width;
  220. // Icon显示图片宽
  221. if (Item instanceof SImageLegendItem) {
  222. item.msg = Item.img.width;
  223. }
  224. // 针对图片及Icon
  225. if (Item instanceof SImageMarkerItem || Item instanceof SImageLegendItem) {
  226. item.disable = false;
  227. } else {
  228. item.disable = true;
  229. }
  230. inputW = item.msg;
  231. }
  232. if (item.name == "Height") {
  233. item.msg = height;
  234. // Icon显示图片高
  235. if (Item instanceof SImageLegendItem) {
  236. item.msg = Item.img.height;
  237. }
  238. // 针对图片及Icon
  239. if (Item instanceof SImageMarkerItem || Item instanceof SImageLegendItem) {
  240. item.disable = false;
  241. } else {
  242. item.disable = true;
  243. }
  244. inputH = item.msg;
  245. }
  246. });
  247. this.aspectRatio = inputW / inputH;
  248. }
  249. }
  250. }
  251. };
  252. </script>
  253. <style lang="less" scoped>
  254. ul,
  255. li {
  256. margin: 0;
  257. padding: 0;
  258. list-style: none;
  259. }
  260. #right_toolbar {
  261. width: 280px;
  262. height: 100%;
  263. background: rgba(255, 255, 255, 1);
  264. box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.11);
  265. .atabless {
  266. height: 100%;
  267. width: 100%;
  268. }
  269. .property {
  270. width: 100%;
  271. height: 100%;
  272. .formatting {
  273. display: flex;
  274. height: 50px;
  275. padding: 0 12px 0 12px;
  276. box-sizing: border-box;
  277. align-items: center;
  278. justify-content: space-around;
  279. li {
  280. width: 16px;
  281. height: 16px;
  282. cursor: pointer;
  283. img {
  284. width: 16px;
  285. height: 16px;
  286. }
  287. }
  288. }
  289. .position {
  290. display: flex;
  291. padding: 0 12px 30px 12px;
  292. box-sizing: border-box;
  293. display: flex;
  294. border-bottom: 1px solid #c3c7cb;
  295. flex-wrap: wrap;
  296. li {
  297. margin-top: 10px;
  298. width: 30%;
  299. margin-right: 8px;
  300. .lock {
  301. width: 16px;
  302. height: 16px;
  303. cursor: pointer;
  304. }
  305. }
  306. }
  307. }
  308. .element {
  309. margin: 0 12px 0 12px;
  310. height: 100%;
  311. .element-list {
  312. height: calc(100% - 44px);
  313. overflow-y: auto;
  314. box-sizing: border-box;
  315. li {
  316. width: 100%;
  317. height: 38px;
  318. line-height: 38px;
  319. padding-left: 12px;
  320. box-sizing: border-box;
  321. color: #1f2429;
  322. cursor: pointer;
  323. .element-name {
  324. display: inline-block;
  325. vertical-align: top;
  326. line-height: 38px;
  327. }
  328. &:hover {
  329. background: #f5f6f7;
  330. }
  331. }
  332. }
  333. }
  334. }
  335. /deep/ .ant-tabs .ant-tabs-top-content.ant-tabs-content-animated {
  336. height: calc(100% - 60px);
  337. }
  338. </style>