|
@@ -80,10 +80,84 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-scroll>
|
|
</vue-scroll>
|
|
|
|
+ <vue-scroll class="tab-content-device" :class="tabClass" v-if="activeTabSettings === 3"
|
|
|
|
+ :style="{ height: '60vh', marginLeft: '-1.4vw', marginTop: '0vh' }">
|
|
|
|
+ <div class="tab-detail">
|
|
|
|
+ <my-table class="my-tab" :columns="issueColumnsDevice" :table-data="issueTableDataDevice" :handleDelete="handleDeleteCard"
|
|
|
|
+ :handleEdit="handleEditCard" :handleAdd="handleAddCard"></my-table>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item-detail">
|
|
|
|
+ <div>
|
|
|
|
+ <div class="detail-text">设备配置</div>
|
|
|
|
+ <input placeholder="设备id" 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: '13vw', top: '6.4vh' }"
|
|
|
|
+ ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
|
|
|
|
+ <input placeholder="设备名称" v-model="valueBattery" class="text-input" :style="{ left: '2vw', top: '10vh' }"
|
|
|
|
+ ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
|
|
|
|
+ <input placeholder="X坐标" v-model="valueBattery" class="text-input" :style="{ left: '13vw', top: '6.4vh' }"
|
|
|
|
+ ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
|
|
|
|
+ <input placeholder="Y坐标" v-model="valueBattery" class="text-input" :style="{ left: '2vw', top: '10vh' }"
|
|
|
|
+ ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
|
|
|
|
+ <input placeholder="Z坐标" v-model="valueBattery" class="text-input" :style="{ left: '13vw', top: '6.4vh' }"
|
|
|
|
+ ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
|
|
|
|
+ <input placeholder="IP" v-model="valueBattery" class="text-input" :style="{ left: '2vw', top: '10vh' }"
|
|
|
|
+ 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>
|
|
<vue-scroll class="tab-content-card" :class="tabClass" v-if="activeTabSettings === 4"
|
|
<vue-scroll class="tab-content-card" :class="tabClass" v-if="activeTabSettings === 4"
|
|
:style="{ height: '60vh', marginLeft: '-1.4vw', marginTop: '0vh' }">
|
|
:style="{ height: '60vh', marginLeft: '-1.4vw', marginTop: '0vh' }">
|
|
<div><example-table :data="appTopoData" /></div>
|
|
<div><example-table :data="appTopoData" /></div>
|
|
</vue-scroll>
|
|
</vue-scroll>
|
|
|
|
+ <vue-scroll class="tab-content-user" :class="tabClass" v-if="activeTabSettings === 5"
|
|
|
|
+ :style="{ height: '60vh', marginLeft: '-1.4vw', marginTop: '0vh' }">
|
|
|
|
+ <div class="tab-detail">
|
|
|
|
+ <my-table class="my-tab" :columns="issueColumnsUser" :table-data="issueTableDataUser" :handleDelete="handleDeleteCard"
|
|
|
|
+ :handleEdit="handleEditCard" :handleAdd="handleAddCard"></my-table>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item-detail">
|
|
|
|
+ <div>
|
|
|
|
+ <div class="detail-text">用户配置</div>
|
|
|
|
+ <input placeholder="用户名" 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: '13vw', top: '6.4vh' }"
|
|
|
|
+ ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
|
|
|
|
+ <input placeholder="用户角色选择" v-model="valueBattery" class="text-input" :style="{ left: '2vw', top: '10vh' }"
|
|
|
|
+ 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>
|
|
|
|
+ <vue-scroll class="tab-content-role" :class="tabClass" v-if="activeTabSettings === 6"
|
|
|
|
+ :style="{ height: '60vh', marginLeft: '-1.4vw', marginTop: '0vh' }">
|
|
|
|
+ <div class="tab-detail">
|
|
|
|
+ <my-table class="my-tab" :columns="issueColumnsRole" :table-data="issueTableDataRole" :handleDelete="handleDeleteCard"
|
|
|
|
+ :handleEdit="handleEditCard" :handleAdd="handleAddCard"></my-table>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item-detail">
|
|
|
|
+ <div>
|
|
|
|
+ <div class="detail-text">用户角色权限配置</div>
|
|
|
|
+ <input placeholder="用户角色" 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: '13vw', top: '6.4vh' }"
|
|
|
|
+ ref="input" @focus="onFocus" @input="onInput" @blur="onBlur" />
|
|
|
|
+ <input placeholder="该角色用户列表" v-model="valueBattery" class="text-input" :style="{ left: '2vw', top: '10vh' }"
|
|
|
|
+ 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>
|
|
</div>
|
|
</vue-scroll>
|
|
</vue-scroll>
|
|
</div>
|
|
</div>
|
|
@@ -161,6 +235,34 @@ export default {
|
|
{ label: '编辑', prop: 'operationEdit', width: '70px' },
|
|
{ label: '编辑', prop: 'operationEdit', width: '70px' },
|
|
],
|
|
],
|
|
issueTableDataDept: [],
|
|
issueTableDataDept: [],
|
|
|
|
+ issueColumnsDevice: [
|
|
|
|
+ { label: '设备id', prop: 'reader_id' },
|
|
|
|
+ { label: '设备类型', prop: 'reader_type_id' },
|
|
|
|
+ { label: '设备名称', prop: 'name' },
|
|
|
|
+ { label: 'X坐标', prop: 'x' },
|
|
|
|
+ { label: 'Y坐标', prop: 'y' },
|
|
|
|
+ { label: 'Z坐标', prop: 'z' },
|
|
|
|
+ { label: 'IP', prop: 'ip' },
|
|
|
|
+ { label: '删除', prop: 'operationDelete', width: '70px' },
|
|
|
|
+ { label: '编辑', prop: 'operationEdit', width: '70px' },
|
|
|
|
+ ],
|
|
|
|
+ issueTableDataDevice: [],
|
|
|
|
+ issueColumnsUser: [
|
|
|
|
+ { label: '用户名', prop: 'user_id' },
|
|
|
|
+ { label: '用户密码', prop: 'pwd' },
|
|
|
|
+ { label: '用户角色', prop: 'role_name' },
|
|
|
|
+ { label: '删除', prop: 'operationDelete', width: '70px' },
|
|
|
|
+ { label: '编辑', prop: 'operationEdit', width: '70px' },
|
|
|
|
+ ],
|
|
|
|
+ issueTableDataUser: [],
|
|
|
|
+ issueColumnsRole: [
|
|
|
|
+ { label: '用户角色', prop: 'name' },
|
|
|
|
+ { label: '角色权限可管理的页面', prop: 'menus' },
|
|
|
|
+ { label: '该角色用户列表', prop: 'user_list' },
|
|
|
|
+ { label: '删除', prop: 'operationDelete', width: '70px' },
|
|
|
|
+ { label: '编辑', prop: 'operationEdit', width: '70px' },
|
|
|
|
+ ],
|
|
|
|
+ issueTableDataRole: [],
|
|
issueTableDataTopo: [
|
|
issueTableDataTopo: [
|
|
],
|
|
],
|
|
}
|
|
}
|
|
@@ -185,6 +287,9 @@ export default {
|
|
this.showCardList();
|
|
this.showCardList();
|
|
this.showStaffList();
|
|
this.showStaffList();
|
|
this.showDeptList();
|
|
this.showDeptList();
|
|
|
|
+ this.showDeviceList();
|
|
|
|
+ this.showUserList();
|
|
|
|
+ this.showRoleList();
|
|
this.fetchData();
|
|
this.fetchData();
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
@@ -563,6 +668,100 @@ export default {
|
|
console.error(err);
|
|
console.error(err);
|
|
});
|
|
});
|
|
},
|
|
},
|
|
|
|
+ showDeviceList() {
|
|
|
|
+ var Promise1 = this.exesql('SELECT * FROM `dat_reader`');
|
|
|
|
+ console.log('sql result readers', Promise1);
|
|
|
|
+ this.issueTableDataDevice = [];
|
|
|
|
+
|
|
|
|
+ let promises = [Promise1];
|
|
|
|
+
|
|
|
|
+ Promise.all(promises)
|
|
|
|
+ .then((results) => {
|
|
|
|
+ results.forEach((result) => {
|
|
|
|
+ console.log(result);
|
|
|
|
+ result.forEach((item) => {
|
|
|
|
+ this.issueTableDataDevice.push(
|
|
|
|
+ {
|
|
|
|
+ reader_id:item.reader_id,
|
|
|
|
+ reader_type_id:item.reader_type_id,
|
|
|
|
+ name:item.name,
|
|
|
|
+ x:item.x,
|
|
|
|
+ y:item.y,
|
|
|
|
+ z:item.z,
|
|
|
|
+ ip:item.ip,
|
|
|
|
+ operationDelete:item.staff_id,
|
|
|
|
+ operationEdit:item.staff_id,
|
|
|
|
+ }
|
|
|
|
+ )
|
|
|
|
+ })
|
|
|
|
+ // Process result here
|
|
|
|
+ });
|
|
|
|
+ })
|
|
|
|
+ .catch((err) => {
|
|
|
|
+ // Handle error here
|
|
|
|
+ console.error(err);
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ showRoleList() {
|
|
|
|
+ var Promise1 = this.exesql('SELECT * FROM `dat_role`');
|
|
|
|
+ console.log('sql result role', Promise1);
|
|
|
|
+ this.issueTableDataRole = [];
|
|
|
|
+
|
|
|
|
+ let promises = [Promise1];
|
|
|
|
+
|
|
|
|
+ Promise.all(promises)
|
|
|
|
+ .then((results) => {
|
|
|
|
+ results.forEach((result) => {
|
|
|
|
+ console.log(result);
|
|
|
|
+ result.forEach((item) => {
|
|
|
|
+ this.issueTableDataRole.push(
|
|
|
|
+ {
|
|
|
|
+ name:item.name,
|
|
|
|
+ menus:item.menus,
|
|
|
|
+ user_list:item.user_list,
|
|
|
|
+ operationDelete:item.name,
|
|
|
|
+ operationEdit:item.name,
|
|
|
|
+ }
|
|
|
|
+ )
|
|
|
|
+ })
|
|
|
|
+ // Process result here
|
|
|
|
+ });
|
|
|
|
+ })
|
|
|
|
+ .catch((err) => {
|
|
|
|
+ // Handle error here
|
|
|
|
+ console.error(err);
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ showUserList() {
|
|
|
|
+ var Promise1 = this.exesql('SELECT dat_user.*, dat_role.`name` as role_name FROM `dat_user` JOIN dat_role ON dat_user.role_id = dat_role.role_id');
|
|
|
|
+ console.log('sql result users', Promise1);
|
|
|
|
+ this.issueTableDataUser = [];
|
|
|
|
+
|
|
|
|
+ let promises = [Promise1];
|
|
|
|
+
|
|
|
|
+ Promise.all(promises)
|
|
|
|
+ .then((results) => {
|
|
|
|
+ results.forEach((result) => {
|
|
|
|
+ console.log(result);
|
|
|
|
+ result.forEach((item) => {
|
|
|
|
+ this.issueTableDataUser.push(
|
|
|
|
+ {
|
|
|
|
+ user_id:item.user_id,
|
|
|
|
+ pwd:item.pwd,
|
|
|
|
+ role_name:item.role_name,
|
|
|
|
+ operationDelete:item.staff_id,
|
|
|
|
+ operationEdit:item.staff_id,
|
|
|
|
+ }
|
|
|
|
+ )
|
|
|
|
+ })
|
|
|
|
+ // Process result here
|
|
|
|
+ });
|
|
|
|
+ })
|
|
|
|
+ .catch((err) => {
|
|
|
|
+ // Handle error here
|
|
|
|
+ console.error(err);
|
|
|
|
+ });
|
|
|
|
+ },
|
|
showDeptList() {
|
|
showDeptList() {
|
|
var Promise1 = this.exesql('SELECT * FROM `dat_dept`');
|
|
var Promise1 = this.exesql('SELECT * FROM `dat_dept`');
|
|
console.log('sql result dept', Promise1);
|
|
console.log('sql result dept', Promise1);
|