index.vue 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329
  1. <template>
  2. <div :class="[size, 'tabs']" class="tabListBox">
  3. <div class="tab-buttons backgroundBox">
  4. <div v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }" @click="changeTab(index)">
  5. {{ tab.title }}
  6. </div>
  7. </div>
  8. <vue-scroll class="tab-content" :class="tabClass" v-if="activeTab === 4" :style="{ height: '80vh', width:'100vw' }">
  9. <div :class="[size, 'tabs_settings']" class="tabListBoxSettings">
  10. <div class="tab-buttons backgroundBox" :style="{ width: 50 + '%', marginLeft: '-1.5vw' }">
  11. <div v-for="(tab, index) in tabs_settings" :key="index" :class="{ active: activeTabSettings === index }"
  12. @click="changeTabSettings(index)">
  13. {{ tab.title }}
  14. </div>
  15. </div>
  16. <vue-scroll class="tab-content-card" :class="tabClass" v-if="activeTabSettings === 0"
  17. :style="{ height: '60vh', marginLeft: '-1.4vw', marginTop: '0vh' }">
  18. <div class="tab-detail">
  19. <my-table class="my-tab" :columns="issueColumns" :table-data="issueTableData" :handleDelete="handleDeleteCard"
  20. :handleEdit="handleEditCard" :handleAdd="handleAddCard"></my-table>
  21. </div>
  22. <div class="item-detail">
  23. <div>
  24. <div class="detail-text">卡号配置</div>
  25. <input placeholder="1" v-model="valueCardId" class="text-input" :style="{ left: '2vw', top: '10vh' }"
  26. ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
  27. <input placeholder="人卡" v-model="valueCardType" class="text-input" :style="{ left: '3vw', top: '10vh' }"
  28. ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
  29. <input placeholder="45%" v-model="valueBattery" class="text-input" :style="{ left: '2vw', top: '14vh' }"
  30. ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
  31. </div>
  32. <div>
  33. <el-button class="cancel-button" @click="clickCancel">取消</el-button>
  34. <el-button class="done-button" @click="clickOK">确定</el-button>
  35. </div>
  36. </div>
  37. </vue-scroll>
  38. </div>
  39. </vue-scroll>
  40. </div>
  41. </template>
  42. <script>
  43. import MyTable from '../MyTable'
  44. export default {
  45. components: { MyTable },
  46. data() {
  47. return {
  48. value: "",
  49. valueCardId: "",
  50. valueCardType: "",
  51. valueBattery: "",
  52. activeTab: 0,
  53. activeTabSettings: 0,
  54. issueColumns: [
  55. { label: '卡号', prop: 'card_id', width: '200px' },
  56. { label: '卡类型', prop: 'card_type' },
  57. { label: '卡电量', prop: 'battery' },
  58. { label: '删除', prop: 'operationDelete', width: '70px' },
  59. { label: '编辑', prop: 'operationEdit', width: '70px' },
  60. // 其他列配置...
  61. ],
  62. issueTableData: [
  63. { card_id: 1, card_type: '人卡', battery: '45%', operation: '删除' },
  64. { card_id: 2, card_type: '人卡', battery: '35%', operation: '删除' },
  65. { card_id: 3, card_type: '人卡', battery: '42%', operation: '删除' },
  66. { card_id: 4, card_type: '人卡', battery: '45%', operation: '删除' },
  67. { card_id: 5, card_type: '人卡', battery: '45%', operation: '删除' },
  68. { card_id: 6, card_type: '人卡', battery: '45%', operation: '删除' },
  69. // 其他数据...
  70. ],
  71. }
  72. },
  73. props: {
  74. tabs: {
  75. type: Array,
  76. // required: true,
  77. },
  78. tabs_settings: {
  79. type: Array,
  80. // required: true,
  81. },
  82. tabIndex:{
  83. type: Number,
  84. },
  85. tabClass: {
  86. type: String,
  87. },
  88. size: {
  89. type: String,
  90. },
  91. },
  92. mounted() {
  93. this.showCardList();
  94. },
  95. methods: {
  96. handleDeleteCard(card_id) {
  97. // Your delete logic here
  98. console.log('Deleting card', card_id);
  99. var strSql = 'delete from dat_card where card_id=' + card_id;
  100. console.log(strSql);
  101. var Promise1 = this.exesql(strSql);
  102. console.log('sql result cards', Promise1);
  103. this.showCardList();
  104. },
  105. handleAddCard() {
  106. console.log('add');
  107. this.valueCardId = '0010000000001'
  108. this.valueCardType = '人卡'
  109. this.valueBattery = '45%'
  110. },
  111. handleEditCard(card) {
  112. // Your delete logic here
  113. console.log('Editing card', card, card.card_id, card.card_type, card.battery);
  114. this.valueCardId = card.card_id
  115. this.valueCardType = card.card_type
  116. this.valueBattery = card.battery
  117. },
  118. clickCancel: function () {
  119. console.log('Cancel button clicked');
  120. // Add any cancellation logic here
  121. },
  122. clickOK: function () {
  123. console.log('OK button clicked');
  124. var strSql = 'REPLACE INTO dat_card(card_id, card_type_id, ident, state_id, freq_id, bench_id, lastUpdate) VALUES(' + this.valueCardId + ',' + (this.valueCardType == '人卡' ? '1' : '2') + ',' + "3,0,-1,0,'2024/01/01')"
  125. console.log(strSql);
  126. var Promise1 = this.exesql(strSql);
  127. console.log('sql result cards', Promise1);
  128. this.showCardList();
  129. // Add any cancellation logic here
  130. },
  131. onFocus() {
  132. this.show = true;
  133. this.$emit("focus");
  134. },
  135. onInput(event) {
  136. this.value = event.target.value;
  137. this.$emit("input", this.value);
  138. },
  139. onBlur(e) {
  140. // this.show = false;
  141. // console.log('=======-------======', e.currentTarget.classList)
  142. // this.$emit("blur");
  143. },
  144. changeTab(index) {
  145. console.log("tab 切换 index", index);
  146. this.activeTab = index;
  147. this.tabIndex = index;
  148. this.$emit('tabIndexChanged', this.tabIndex);
  149. },
  150. changeTabSettings(index) {
  151. console.log("tab 切换 index", index);
  152. this.activeTabSettings = index;
  153. },
  154. exesql(sqlstr) {
  155. return new Promise((resolve, reject) => {
  156. console.log(sqlstr);
  157. let msg = {
  158. cmd: "query",
  159. data: {
  160. name: "name",
  161. sql: sqlstr,
  162. },
  163. };
  164. window.vm.$socket.emit("REPT", msg, (datas) => {
  165. if (datas.error) {
  166. reject(datas.error);
  167. } else {
  168. resolve(datas.data);
  169. }
  170. });
  171. });
  172. },
  173. showCardList() {
  174. var Promise1 = this.exesql('SELECT * FROM `dat_card`');
  175. console.log('sql result cards', Promise1);
  176. this.issueTableData = [];
  177. let promises = [Promise1];
  178. Promise.all(promises)
  179. .then((results) => {
  180. results.forEach((result) => {
  181. console.log(result);
  182. result.forEach((item) => {
  183. this.issueTableData.push(
  184. { card_id: item.card_id, card_type: item.card_type_id == '1' ? '人卡' : '车卡', battery: '45%', operationDelete: item.card_id, operationEdit: item.card_id }
  185. )
  186. })
  187. // Process result here
  188. });
  189. })
  190. .catch((err) => {
  191. // Handle error here
  192. console.error(err);
  193. });
  194. },
  195. }
  196. }
  197. </script>
  198. <style scoped lang="less">
  199. .tabs {
  200. display: flex;
  201. flex-direction: column;
  202. height: 100%;
  203. position: relative;
  204. }
  205. .tab-buttons {
  206. width: 100%;
  207. height: 5.7vh;
  208. padding-left: 1.56vw;
  209. padding-right: 1.56vw;
  210. padding-top: 1.48vh;
  211. padding-bottom: 1.48vh;
  212. margin-bottom: 2.13vh;
  213. // background: linear-gradient(179deg, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0) 100%);
  214. // background-image: url(../../images/tab-buttons.png);
  215. background-size: 100% 100%;
  216. border-radius: 79px 79px 79px 79px;
  217. display: flex;
  218. justify-content: space-between;
  219. align-items: center;
  220. }
  221. .tab-buttons>div {
  222. width: 6.87vw;
  223. height: 4.44vh;
  224. line-height: 4.44vh;
  225. text-align: center;
  226. cursor: pointer;
  227. color: #f8f8f8;
  228. }
  229. .tab-buttons div.active {
  230. background-image: url(../../images/tab-button.png);
  231. background-size: 100% 100%;
  232. /* background: rgba(248,248,258, 0.68); */
  233. border-radius: 74px 74px 74px 74px;
  234. }
  235. .tab-content {
  236. width: 100%;
  237. background-size: 100% 100%;
  238. border-radius: 2.08vw;
  239. // background: rgba(255, 255, 255, 0.36);
  240. }
  241. .tab-content:before {
  242. // background: linear-gradient(
  243. // 322deg,
  244. // rgba(255, 255, 255, 0.63) 0%,
  245. // rgba(255, 255, 255, 0) 73%,
  246. // rgba(84, 84, 84, 0) 100%
  247. // );
  248. border-radius: 2.08vw;
  249. opacity: 0.55;
  250. content: "";
  251. position: absolute;
  252. top: 0;
  253. left: 0;
  254. width: 100%;
  255. height: 100%;
  256. z-index: -1;
  257. }
  258. .tab-detail {
  259. position: absolute;
  260. z-index: 9999;
  261. top: 0;
  262. left: 0;
  263. width: 70vw;
  264. height: 60vh;
  265. z-index: 3;
  266. background: rgba(0, 0, 0, 0.3);
  267. border-radius: 2.08vw;
  268. }
  269. .item-detail {
  270. position: absolute;
  271. z-index: 9999;
  272. top: 0;
  273. left: 72vw;
  274. width: 25vw;
  275. height: 60vh;
  276. z-index: 3;
  277. background: rgba(0, 0, 0, 0.3);
  278. border-radius: 2.08vw;
  279. }
  280. .my-tab {
  281. width: 70vw;
  282. height: 60wh;
  283. }
  284. .tabListBoxSettings {
  285. padding-top: 0vh;
  286. }
  287. .tabListBox {
  288. // padding-top: 11.29vh;
  289. padding-top: 2vh;
  290. }
  291. .done-button {
  292. width: 11.6vw;
  293. height: 4.25vh;
  294. line-height: 4.25vh;
  295. background: linear-gradient(180deg, #83cbfb 0%, #2e74b2 100%);
  296. border-radius: 67px 67px 67px 67px;
  297. opacity: 1;
  298. border: 1px solid rgba(255, 255, 255, 0.4);
  299. color: #fff;
  300. right: 0.93vw;
  301. }
  302. .cancel-button {
  303. width: 11.6vw;
  304. height: 4.25vh;
  305. line-height: 4.25vh;
  306. background: rgba(255, 255, 255, 0.5);
  307. border-radius: 67px 67px 67px 67px;
  308. opacity: 1;
  309. border: 1px solid rgba(255, 255, 255, 0.4);
  310. color: #fff;
  311. left: 0.93vw;
  312. }
  313. </style>