right_toolbar.vue 8.7 KB

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