|
|
@@ -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;
|
|
|
}
|
