right_toolbar.vue 11 KB

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