123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329 |
- <template>
- <div :class="[size, 'tabs']" class="tabListBox">
- <div class="tab-buttons backgroundBox">
- <div v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }" @click="changeTab(index)">
- {{ tab.title }}
- </div>
- </div>
- <vue-scroll class="tab-content" :class="tabClass" v-if="activeTab === 4" :style="{ height: '80vh', width:'100vw' }">
- <div :class="[size, 'tabs_settings']" class="tabListBoxSettings">
- <div class="tab-buttons backgroundBox" :style="{ width: 50 + '%', marginLeft: '-1.5vw' }">
- <div v-for="(tab, index) in tabs_settings" :key="index" :class="{ active: activeTabSettings === index }"
- @click="changeTabSettings(index)">
- {{ tab.title }}
- </div>
- </div>
- <vue-scroll class="tab-content-card" :class="tabClass" v-if="activeTabSettings === 0"
- :style="{ height: '60vh', marginLeft: '-1.4vw', marginTop: '0vh' }">
- <div class="tab-detail">
- <my-table class="my-tab" :columns="issueColumns" :table-data="issueTableData" :handleDelete="handleDeleteCard"
- :handleEdit="handleEditCard" :handleAdd="handleAddCard"></my-table>
- </div>
- <div class="item-detail">
- <div>
- <div class="detail-text">卡号配置</div>
- <input placeholder="1" v-model="valueCardId" class="text-input" :style="{ left: '2vw', top: '10vh' }"
- ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
- <input placeholder="人卡" v-model="valueCardType" class="text-input" :style="{ left: '3vw', top: '10vh' }"
- ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
- <input placeholder="45%" v-model="valueBattery" class="text-input" :style="{ left: '2vw', top: '14vh' }"
- ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
- </div>
- <div>
- <el-button class="cancel-button" @click="clickCancel">取消</el-button>
- <el-button class="done-button" @click="clickOK">确定</el-button>
- </div>
- </div>
- </vue-scroll>
- </div>
- </vue-scroll>
- </div>
- </template>
- <script>
- import MyTable from '../MyTable'
- export default {
- components: { MyTable },
- data() {
- return {
- value: "",
- valueCardId: "",
- valueCardType: "",
- valueBattery: "",
- activeTab: 0,
- activeTabSettings: 0,
- issueColumns: [
- { label: '卡号', prop: 'card_id', width: '200px' },
- { label: '卡类型', prop: 'card_type' },
- { label: '卡电量', prop: 'battery' },
- { label: '删除', prop: 'operationDelete', width: '70px' },
- { label: '编辑', prop: 'operationEdit', width: '70px' },
- // 其他列配置...
- ],
- issueTableData: [
- { card_id: 1, card_type: '人卡', battery: '45%', operation: '删除' },
- { card_id: 2, card_type: '人卡', battery: '35%', operation: '删除' },
- { card_id: 3, card_type: '人卡', battery: '42%', operation: '删除' },
- { card_id: 4, card_type: '人卡', battery: '45%', operation: '删除' },
- { card_id: 5, card_type: '人卡', battery: '45%', operation: '删除' },
- { card_id: 6, card_type: '人卡', battery: '45%', operation: '删除' },
- // 其他数据...
- ],
- }
- },
- props: {
- tabs: {
- type: Array,
- // required: true,
- },
- tabs_settings: {
- type: Array,
- // required: true,
- },
- tabIndex:{
- type: Number,
- },
- tabClass: {
- type: String,
- },
- size: {
- type: String,
- },
- },
- mounted() {
- this.showCardList();
- },
- methods: {
- handleDeleteCard(card_id) {
- // Your delete logic here
- console.log('Deleting card', card_id);
- var strSql = 'delete from dat_card where card_id=' + card_id;
- console.log(strSql);
- var Promise1 = this.exesql(strSql);
- console.log('sql result cards', Promise1);
- this.showCardList();
- },
- handleAddCard() {
- console.log('add');
- this.valueCardId = '0010000000001'
- this.valueCardType = '人卡'
- this.valueBattery = '45%'
- },
- handleEditCard(card) {
- // Your delete logic here
- console.log('Editing card', card, card.card_id, card.card_type, card.battery);
- this.valueCardId = card.card_id
- this.valueCardType = card.card_type
- this.valueBattery = card.battery
- },
- clickCancel: function () {
- console.log('Cancel button clicked');
- // Add any cancellation logic here
- },
- clickOK: function () {
- console.log('OK button clicked');
- 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')"
- console.log(strSql);
- var Promise1 = this.exesql(strSql);
- console.log('sql result cards', Promise1);
- this.showCardList();
- // Add any cancellation logic here
- },
- onFocus() {
- this.show = true;
- this.$emit("focus");
- },
- onInput(event) {
- this.value = event.target.value;
- this.$emit("input", this.value);
- },
- onBlur(e) {
- // this.show = false;
- // console.log('=======-------======', e.currentTarget.classList)
- // this.$emit("blur");
- },
- changeTab(index) {
- console.log("tab 切换 index", index);
- this.activeTab = index;
- this.tabIndex = index;
- this.$emit('tabIndexChanged', this.tabIndex);
- },
- changeTabSettings(index) {
- console.log("tab 切换 index", index);
- this.activeTabSettings = index;
- },
- exesql(sqlstr) {
- return new Promise((resolve, reject) => {
- console.log(sqlstr);
- let msg = {
- cmd: "query",
- data: {
- name: "name",
- sql: sqlstr,
- },
- };
- window.vm.$socket.emit("REPT", msg, (datas) => {
- if (datas.error) {
- reject(datas.error);
- } else {
- resolve(datas.data);
- }
- });
- });
- },
- showCardList() {
- var Promise1 = this.exesql('SELECT * FROM `dat_card`');
- console.log('sql result cards', Promise1);
- this.issueTableData = [];
- let promises = [Promise1];
- Promise.all(promises)
- .then((results) => {
- results.forEach((result) => {
- console.log(result);
- result.forEach((item) => {
- this.issueTableData.push(
- { card_id: item.card_id, card_type: item.card_type_id == '1' ? '人卡' : '车卡', battery: '45%', operationDelete: item.card_id, operationEdit: item.card_id }
- )
- })
- // Process result here
- });
- })
- .catch((err) => {
- // Handle error here
- console.error(err);
- });
- },
- }
- }
- </script>
- <style scoped lang="less">
- .tabs {
- display: flex;
- flex-direction: column;
- height: 100%;
- position: relative;
- }
- .tab-buttons {
- width: 100%;
- height: 5.7vh;
- padding-left: 1.56vw;
- padding-right: 1.56vw;
- padding-top: 1.48vh;
- padding-bottom: 1.48vh;
- margin-bottom: 2.13vh;
- // background: linear-gradient(179deg, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0) 100%);
- // background-image: url(../../images/tab-buttons.png);
- background-size: 100% 100%;
- border-radius: 79px 79px 79px 79px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- .tab-buttons>div {
- width: 6.87vw;
- height: 4.44vh;
- line-height: 4.44vh;
- text-align: center;
- cursor: pointer;
- color: #f8f8f8;
- }
- .tab-buttons div.active {
- background-image: url(../../images/tab-button.png);
- background-size: 100% 100%;
- /* background: rgba(248,248,258, 0.68); */
- border-radius: 74px 74px 74px 74px;
- }
- .tab-content {
- width: 100%;
- background-size: 100% 100%;
- border-radius: 2.08vw;
- // background: rgba(255, 255, 255, 0.36);
- }
- .tab-content:before {
- // background: linear-gradient(
- // 322deg,
- // rgba(255, 255, 255, 0.63) 0%,
- // rgba(255, 255, 255, 0) 73%,
- // rgba(84, 84, 84, 0) 100%
- // );
- border-radius: 2.08vw;
- opacity: 0.55;
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: -1;
- }
- .tab-detail {
- position: absolute;
- z-index: 9999;
- top: 0;
- left: 0;
- width: 70vw;
- height: 60vh;
- z-index: 3;
- background: rgba(0, 0, 0, 0.3);
- border-radius: 2.08vw;
- }
- .item-detail {
- position: absolute;
- z-index: 9999;
- top: 0;
- left: 72vw;
- width: 25vw;
- height: 60vh;
- z-index: 3;
- background: rgba(0, 0, 0, 0.3);
- border-radius: 2.08vw;
- }
- .my-tab {
- width: 70vw;
- height: 60wh;
- }
- .tabListBoxSettings {
- padding-top: 0vh;
- }
- .tabListBox {
- // padding-top: 11.29vh;
- padding-top: 2vh;
- }
- .done-button {
- width: 11.6vw;
- height: 4.25vh;
- line-height: 4.25vh;
- background: linear-gradient(180deg, #83cbfb 0%, #2e74b2 100%);
- border-radius: 67px 67px 67px 67px;
- opacity: 1;
- border: 1px solid rgba(255, 255, 255, 0.4);
- color: #fff;
- right: 0.93vw;
- }
- .cancel-button {
- width: 11.6vw;
- height: 4.25vh;
- line-height: 4.25vh;
- background: rgba(255, 255, 255, 0.5);
- border-radius: 67px 67px 67px 67px;
- opacity: 1;
- border: 1px solid rgba(255, 255, 255, 0.4);
- color: #fff;
- left: 0.93vw;
- }
- </style>
|