Button.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  1. <!--button按钮组件-->
  2. <template>
  3. <div>
  4. <div v-for="item in buttonJson"
  5. :style="{
  6. position:'absolute',
  7. left:item.Left*scale+'px',
  8. top:item.Top*scale+'px',
  9. width:item.Width*scale + 'px',
  10. height:item.Height*scale + 'px',
  11. zIndex:item.ZIndex,
  12. display:item.IsVisibility ? 'block' : 'none',
  13. fontSize:item.FontSize*scale + 'px',
  14. backgroundImage:'url('+require(`../../../static/images/${item.BackIcon}`)+')',
  15. backgroundSize:'100% 100%',
  16. backgroundRepeat:'no-repeat',
  17. color:`#${item.ForegroundStr.slice(3)}`,
  18. textAlign:'center',
  19. lineHeight:item.Height*scale + 'px',
  20. cursor:'default'
  21. }"
  22. :ref="item.ID"
  23. @click="clickBtn(item)"
  24. @mousedown="mouseDown(item)"
  25. @mouseup="mouseUp(item)"
  26. >
  27. {{item.Text}}
  28. </div>
  29. </div>
  30. </template>
  31. <script>
  32. import {mapState} from 'vuex'
  33. import {getStaticFile} from "../../utils/tools"
  34. export default {
  35. data() {
  36. return {
  37. count: 0, // 音量计数器
  38. count2: 0, // 预案管理模块计数器
  39. count3: 0, // 管理控制按钮计数器
  40. count4: 0, // 3个视频按钮计数器
  41. count5: 0, // 安卓分布式按钮
  42. buttonJson:[],
  43. labelJson:[],
  44. slideJson:[]
  45. }
  46. },
  47. async mounted() {
  48. this.buttonJson = await getStaticFile('EnityButton.Data')
  49. // 获取分屏按钮数组
  50. this.arr = this.buttonJson.filter(item => (item.WindowID === '9a0dff23-8633-4e7f-89bf-cc4f68ec88e1' || item.WindowID === '08208721-41cc-4f1e-937b-3a1627389049' || item.WindowID === 'ab842585-0c91-4e65-bfed-a219bcaaeb43'))
  51. // 获取功能按钮
  52. this.funcBtnArr = this.buttonJson.filter(item => (item.WindowID === 'd80a8b6e-9f88-41ff-b3a7-1ff8d6ee37a5' || item.WindowID === 'cb2687fd-931a-4b38-a76d-9c3ea171b8d8' || item.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b' || item.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d' || item.WindowID === 'd9868551-b579-4258-9bc7-7c1f733773f5'))
  53. // 获取电源管理和电脑控制按钮
  54. this.powerAndCompBtns = this.buttonJson.filter(item => (item.WindowID === 'd80a8b6e-9f88-41ff-b3a7-1ff8d6ee37a5' || item.WindowID === 'd9868551-b579-4258-9bc7-7c1f733773f5') && item.ID !== '19554440-98bc-4644-83a0-d9cefd69153e')
  55. this.labelJson = await getStaticFile('EnityLable.Data')
  56. this.funcLabArr = this.labelJson.filter(item => (item.WindowID === 'd80a8b6e-9f88-41ff-b3a7-1ff8d6ee37a5' || item.WindowID === 'cb2687fd-931a-4b38-a76d-9c3ea171b8d8' || item.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b' || item.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d' || item.WindowID === 'd9868551-b579-4258-9bc7-7c1f733773f5'))
  57. this.slideJson = await getStaticFile('EnitySlider.Data')
  58. this.funSliderArr = res.data
  59. },
  60. computed: {
  61. ...mapState(['scale']),
  62. },
  63. methods: {
  64. // 点击按钮
  65. clickBtn(e) {
  66. // 预案管理声音开关
  67. if (e.ID === '355d3c32-1502-40b4-9ddd-663d5b8469e7') {
  68. if (this.count % 2 === 0) {
  69. this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
  70. ++this.count
  71. } else {
  72. this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.BackIcon}`) + ')'
  73. ++this.count
  74. }
  75. return
  76. }
  77. // 切换屏幕
  78. if (e.Text === 'LCD屏' || e.Text === 'LED屏' || e.Text === '投影机') {
  79. if (this.count4 === 0) {
  80. this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
  81. ++this.count4
  82. } else if(e !== this.lastData4) {
  83. this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
  84. this.lastBtn4.style.backgroundImage = 'url(' + require(`../../../static/images/${this.lastData4.BackIcon}`) + ')'
  85. }
  86. // 保存点过的这个按钮和按钮数据
  87. this.lastBtn4 = this.$refs[e.ID][0]
  88. this.lastData4 = e
  89. // 首先清屏
  90. this.$store.dispatch('clearScreen')
  91. this.arr.forEach(item => {
  92. if (e.MouseDownActionList[0].SourceID === item.WindowID) {
  93. item.IsVisibility = true
  94. } else {
  95. item.IsVisibility = false
  96. }
  97. })
  98. return
  99. }
  100. // 预案管理按钮处理
  101. if (e.Name.includes('V0') && e.Name.slice(7) * 1 > 62 && e.Name.slice(7) * 1 < 72) {
  102. if (this.count2 === 0) {
  103. this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
  104. ++this.count2
  105. } else if(e !== this.lastData) {
  106. this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
  107. this.lastBtn.style.backgroundImage = 'url(' + require(`../../../static/images/${this.lastData.BackIcon}`) + ')'
  108. }
  109. // 保存点过的按钮和按钮数据
  110. this.lastBtn = this.$refs[e.ID][0]
  111. this.lastData = e
  112. return
  113. }
  114. // 5个管理控制按钮处理
  115. if (e.Name.includes('V0--Btn6') || e.Name.includes('V0--Btn61') || e.Name.includes('V0--Btn12') || e.Name.includes('V0--Btn58') || e.Name.includes('V0--Btn77')) {
  116. // (1)背景切换
  117. if (this.count3 === 0) {
  118. this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
  119. ++this.count3
  120. } else if(e !== this.lastData3) {
  121. this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
  122. this.lastBtn3.style.backgroundImage = 'url(' + require(`../../../static/images/${this.lastData3.BackIcon}`) + ')'
  123. }
  124. // 保存点过的这个按钮和按钮数据
  125. this.lastBtn3 = this.$refs[e.ID][0]
  126. this.lastData3 = e
  127. // (2)界面切换
  128. // 按钮
  129. this.funcBtnArr.forEach((item, index) => {
  130. if (e.MouseDownActionList[0].SourceID === item.WindowID) {
  131. item.IsVisibility = true
  132. } else {
  133. item.IsVisibility = false
  134. }
  135. })
  136. // 标签
  137. this.funcLabArr.forEach((item, index) => {
  138. if (e.MouseDownActionList[0].SourceID === item.WindowID) {
  139. item.IsVisibility = true
  140. } else {
  141. item.IsVisibility = false
  142. }
  143. })
  144. // 滑块
  145. this.funSliderArr.forEach((item, index) => {
  146. if (e.MouseDownActionList[0].SourceID === item.WindowID) {
  147. item.IsVisibility = true
  148. } else {
  149. item.IsVisibility = false
  150. }
  151. })
  152. return
  153. }
  154. // 分屏和清屏操作
  155. if (e.ID === '7775e508-c6a5-4044-8264-24772a24fa97' || e.ID === '95c5d676-46a5-4c46-b550-9bc013a59937' || e.ID === 'f47e84bb-c878-4b22-a9d6-eb2e307283bc') {
  156. // 清屏
  157. this.$store.dispatch('clearScreen')
  158. return
  159. } else if (e.ID === '49653a62-99cb-40e1-a513-60e42893adb7' || e.ID === 'd55c81a8-54d7-4d90-aad7-4f34c3ba3950' || e.ID === '4142ab5b-ce52-4655-a28d-724bfabb24f0') {
  160. // 自由屏
  161. this.$store.dispatch('splitScreen',0)
  162. return
  163. } else if (e.ID === '52de9a2e-d171-423d-860f-3fe2750ec757' || e.ID === '0cabb1ba-bcae-45d9-b019-2b45486f98e3' || e.ID === '9bb5b3e3-9e21-4716-8059-f5b35b24e3fa') {
  164. // 四分屏
  165. this.$store.dispatch('splitScreen',1)
  166. return
  167. } else if (e.ID === 'ac0cc31c-a9b8-4bdf-88cf-928964b93ac5' || e.ID === '201e4bb0-c039-46c7-a55a-049d00de4769') {
  168. // 九分屏
  169. this.$store.dispatch('splitScreen',2)
  170. return
  171. } else if (e.ID === '2d4c49bc-905b-4f96-a65c-9b0a3e057b3f') {
  172. // 16分屏
  173. this.$store.dispatch('splitScreen',3)
  174. return
  175. }
  176. // 安卓和分布式按钮
  177. if (e.Text === '安卓' || e.Text === '分布式') {
  178. if (this.count5 === 0) {
  179. this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
  180. ++this.count5
  181. } else if(e !== this.lastData5){
  182. this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
  183. this.lastBtn5.style.backgroundImage = 'url(' + require(`../../../static/images/${this.lastData5.BackIcon}`) + ')'
  184. }
  185. // 保存点过的这个按钮和按钮数据
  186. this.lastBtn5 = this.$refs[e.ID][0]
  187. this.lastData5 = e
  188. return
  189. }
  190. // 电源管理和电脑管理
  191. if(this.powerAndCompBtns.some(item => item.ID === e.ID)){
  192. if(e.ActionType === 2){
  193. this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
  194. e.ActionType = -2
  195. }else {
  196. this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.BackIcon}`) + ')'
  197. e.ActionType = 2
  198. }
  199. }
  200. return
  201. },
  202. // 鼠标按下事件
  203. mouseDown(e) {
  204. if (this.arr.some(item => e === item) && e.Text !== '安卓' && e.Text !== '分布式') { // 分屏控制按钮
  205. this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
  206. }else if(e.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b') { // 视频控制按钮
  207. this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
  208. }else if(e.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d') { // 环境控制按钮
  209. this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
  210. }else if(e.ID === '19554440-98bc-4644-83a0-d9cefd69153e'){ // 电脑控制All按钮
  211. this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
  212. }
  213. return
  214. },
  215. // 鼠标松开事件
  216. mouseUp(e) {
  217. if (this.arr.some(item => e === item) && e.Text !== '安卓' && e.Text !== '分布式') { // 分屏控制按钮
  218. this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.BackIcon}`) + ')'
  219. }else if(e.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b') { // 视频控制按钮
  220. this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.BackIcon}`) + ')'
  221. }else if(e.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d') { // 环境控制按钮
  222. this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.BackIcon}`) + ')'
  223. }if(e.ID === '19554440-98bc-4644-83a0-d9cefd69153e'){ // 电脑控制All按钮
  224. this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.BackIcon}`) + ')'
  225. }
  226. return
  227. },
  228. }
  229. }
  230. </script>
  231. <style scoped>
  232. </style>