fix

src/components/TabList/index.vue

@@ -1,20 +1,9 @@
 <template>
   <div :class="[size, 'tabs']" class="tabListBox">
-    <div
-      class="square-count backgroundBox"
-      v-if="activeTab === 0 && isOpenSquare"
-    >
-      <status-bar
-        :ready="readyCount"
-        :occupied="occupiedCount"
-        :offline="offlineCount"
-      ></status-bar>
+    <div class="square-count backgroundBox" v-if="activeTab === 0 && isOpenSquare">
+      <status-bar :ready="readyCount" :occupied="occupiedCount" :offline="offlineCount"></status-bar>
     </div>
-    <div
-      class="origin-basic backgroundBox"
-      v-if="activeTab === 0"
-      v-show="!isGoHome && currentBench.name"
-    >
+    <div class="origin-basic backgroundBox" v-if="activeTab === 0" v-show="!isGoHome && currentBench.name">
       <h2>{{ currentBench && currentBench.name }}</h2>
       <div class="originBasicRow">
         <div>
@@ -45,108 +34,85 @@
           <span>Box Version:</span>
           <span>{{
             currentBench.equipment
-              ? currentBench.equipment[0]
-                ? currentBench.equipment[0].version
-                : ""
+            ? currentBench.equipment[0]
+              ? currentBench.equipment[0].version
               : ""
+            : ""
           }}</span>
         </div>
       </div>
     </div>
-    <div
-      class="secondScreen"
-      v-if="
-        activeTab === 0 &&
+    <div class="secondScreen" v-if="activeTab === 0 &&
         benchDisplayLowerVisible &&
         !isOpenSquare &&
         isConnected
-      "
-      @click="switchScreen"
-    >
-      <img
-        class="bmBenchImg bmBenchImgLower"
-        :src="currentScreen == 'upper' ? benchImgLower : benchImgUpper"
-        alt=""
-      />
+        " @click="switchScreen">
+      <img class="bmBenchImg bmBenchImgLower" :src="currentScreen == 'upper' ? benchImgLower : benchImgUpper" alt="" />
     </div>
-    <vue-scroll
-      class="tab-content backgroundBox"
-      :class="{ short: benchDisplayLowerVisible }"
-      :style="{
-        height:
-          !isGoHome && currentBench.name
-            ? isOpenSquare
-              ? '30vh'
-              : '50vh'
-            : isOpenSquare
+    <vue-scroll class="tab-content backgroundBox" :class="{ short: benchDisplayLowerVisible }" :style="{
+      height:
+        !isGoHome && currentBench.name
+          ? isOpenSquare
+            ? '30vh'
+            : '50vh'
+          : isOpenSquare
             ? '50vh'
             : '70vh',
-      }"
-      v-if="activeTab === 0"
-    >
+    }" v-if="activeTab === 0">
       <div class="panel-container">
         <div class="list">
-          <div
-            v-for="(item, index) in activeTabItems"
-            :key="index"
-            class="item"
-          >
+          <div v-for="(item, index) in activeTabItems" :key="index" class="item">
             <div v-html="itemRender(item)"></div>
           </div>
         </div>
       </div>
-      <!-- <div class="panel-bottom">
-          <div class="bench-left-bottom-btn"></div>
-        </div> -->
     </vue-scroll>
-    <vue-scroll
-      class="tab-content backgroundBox"
-      :class="tabClass"
-      v-if="activeTab === 2"
-      :style="{ height: '70vh' }"
-    >
+    <vue-scroll class="tab-content backgroundBox" :class="tabClass" v-if="activeTab === 2" :style="{ height: '70vh' }">
       <div class="panel-container">
         <div class="list issue-list" v-if="isShowIssueList">
-          <div
-            v-for="(item, index) in activeTabItems"
-            :key="index"
-            class="item"
-          >
+          <div v-for="(item, index) in activeTabItems" :key="index" class="item">
             <div v-html="issueRender(item)"></div>
-=======
-    <div class="tab-buttons backgroundBox" :style="{ width: divWidth + '%' }">
-      <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: '85vh' }">
-      <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 }}
->>>>>>> origin
+
+            <div class="tab-buttons backgroundBox" :style="{ width: divWidth + '%' }">
+              <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: '85vh' }">
+              <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" :class="tabClass" v-if="activeTabSettings === 0"
+                  :style="{ height: '85vh', marginLeft: '-1.4vw', marginTop: '5vh' }">
+                  <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 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" />
+                    <el-button class="cancel-button" @click="clickCancel">取消</el-button>
+                    <el-button class="done-button" @click="clickOK">确定</el-button>
+                  </div>
+                </vue-scroll>
+              </div>
+            </vue-scroll>
           </div>
+
         </div>
-        <vue-scroll class="tab-content" :class="tabClass" v-if="activeTabSettings === 0"
-          :style="{ height: '85vh', marginLeft: '-1.4vw', marginTop: '5vh' }">
-          <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 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" />
-            <el-button class="cancel-button" @click="clickCancel">取消</el-button>
-            <el-button class="done-button" @click="clickOK">确定</el-button>
-          </div>
-        </vue-scroll>
+
       </div>
     </vue-scroll>
   </div>
@@ -300,8 +266,8 @@ export default {
         { label: '卡号', prop: 'card_id', width: '200px' },
         { label: '卡类型', prop: 'card_type' },
         { label: '卡电量', prop: 'battery' },
-        { label: '删除', prop: 'operationDelete', width:'70px' },
-        { label: '编辑', prop: 'operationEdit', width:'70px'  },
+        { label: '删除', prop: 'operationDelete', width: '70px' },
+        { label: '编辑', prop: 'operationEdit', width: '70px' },
         // 其他列配置...
       ],
       issueTableData: [
@@ -378,15 +344,14 @@ export default {
   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('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()
-    {
+    handleAddCard() {
       console.log('add');
       this.valueCardId = '0010000000001'
       this.valueCardType = '人卡'
@@ -399,11 +364,11 @@ export default {
       this.valueCardType = card.card_type
       this.valueBattery = card.battery
     },
-    clickCancel: function() {
+    clickCancel: function () {
       console.log('Cancel button clicked');
       // Add any cancellation logic here
     },
-    clickOK: function() {
+    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);
@@ -459,9 +424,10 @@ export default {
           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 }
-            )})
+              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
           });
         })
@@ -1110,7 +1076,8 @@ export default {
   background: rgba(0, 0, 0, 0.3);
   border-radius: 2.08vw;
 }
-.my-tab{
+
+.my-tab {
   width: 70vw;
   height: 70vh;
 }