Skip to content

F
founder_vue
Commit 17ec2e05 by li_hongchao
Options

逻辑库主页及接口

parent 3a6ab0a8
Showing with 775 additions and 3 deletions
src/netmgr/NetUtil.js
import bzxxsh from '../netmgr/bzxxgl/bzxxsh'
export default {
bzxxsh
bzxxsh,
xtfkgl,
}
src/netmgr/xtfkgl/xtfkgl.js 0 → 100644
import addrType from '../../netmgr/NetAddressType'
const _path = {
ryfkgl: addrType.api + '/logic/person/',
ajfkgl: addrType.api + ''
}
export default {
list(_parameter) {// 获取人员逻辑库
return fHttp.postJson(_path.ryfkgl + 'queryAll', _parameter)
},
}
src/router/modules/leftMenu.js
......@@ -271,6 +271,19 @@ export default [
import('@/views/SystemManage/PermissionManage.vue'),
},
{
path: '/xtfkgl',
name: 'xtfkgl',
hidden: false,
meta: {
title: '系统分库管理',
auth: 'H-4',
parentId: 'SystemManage'
},
component: () =>
import('@/views/xtfkgl/XtfkglMain.vue'),
},
{
path: '/UserPermission',
name: 'UserPermission',
hidden: true,
......
src/views/xtfkgl/AjXtljfkView.vue 0 → 100644
<template>
<div class="root-view-div">
<!-- 表格 -->
<div class="table">
<el-table
:height="height"
style="width: 100%"
highlight-current-row
ref="multipleTable"
:data="tableDate"
class="table">
<el-table-column prop="fkmc" label="分库名称" :width="width1"></el-table-column>
<el-table-column prop="sjkyh" label="数据库用户组/用户" :width="width2">
<template slot-scope="scope">
<div class="tagsBox">
<div
v-for="item in strArr(scope.row.sjkyh)"
:class="{ tags: true, tagszu: item.type === 0 }"
:key="item.id"
v-show="item !== ''">
{{ item.name }}
</div>
<el-tooltip
class="item"
effect="dark"
placement="right"
style="width: auto !important"
v-if="scope.row.sjkyh.length > 4"
>
<span style="margin-left: 5px">...</span>
<div slot="content" class="tooTipBtn">
<div
v-for="item in scope.row.sjkyh"
:class="{divtext:item.type === 0}"
:title="item.name"
:key="item.id"
>
{{ item.name }}
</div>
</div>
</el-tooltip>
</div>
</template>
</el-table-column>
<el-table-column prop="cjsj" label="创建时间" :width="width3"></el-table-column>
<el-table-column prop="qyzt" label="启用状态" :width="width4">
<template slot-scope="scope">
<div v-if="scope.row.status === 0" class="circle-red"></div>
<div v-if="scope.row.status === 1" class="circle-blue"></div>
{{
scope.row.status === 0
? '停用'
: scope.row.status === 1
? '启用'
: '无状态'
}}
</template>
</el-table-column>
<el-table-column prop="ljksm" label="逻辑库说明" :width="width5"></el-table-column>
<el-table-column prop="cz" label="操作" width="auto">
<template slot-scope="scope">
<img
style="
width: 1.125rem;
height: 1.125rem;
margin-right: 1.125rem;
cursor: pointer;
"
src="../../assets/img/qbryk/bj.png"
/>
<img
style="
width: 1.125rem;
height: 1.125rem;
margin-right: 1.125rem;
cursor: pointer;
"
src="../../assets/img/qbryk/bj.png"
/>
<img
style="
width: 1.125rem;
height: 1.125rem;
margin-right: 1.125rem;
cursor: pointer;
"
src="../../assets/img/qbryk/bj.png"
/>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页-->
<div class="footer">
<span class="count">共&nbsp;{{ total }}&nbsp;条记录 第{{ currPage }}/{{totalPage}}页</span>
<div class="page">
<el-pagination
class="paging"
@current-change="handleCurrentChange"
:current-page="currPage"
:page-sizes="[10, 20, 30, 40]"
background
layout="prev, pager, next"
:total="total"
>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'AjXtljfkView',
data() {
return {
// 用户列表的表格宽度
width1: 150, //分库名称
width2: 680, //数据库用户组/用户
width3: 160, //创建时间
width4: 136, //启用状态
width5: 260, //逻辑库说明
width6: 120, // 操作
height: 550,
tableDate: [],
currPage: 1, // 当前页数
pageSize: 10, // 每页的数据条数
total: 70, // 数据总条数
totalPage: 7, // 总共页数
}
},
created() {
let w1 = 1920
let w2 = window.innerWidth
this.height = (this.height * w2) / w1
this.width1 = (this.width1 * w2) / w1
this.width2 = (this.width2 * w2) / w1
this.width3 = (this.width3 * w2) / w1
this.width4 = (this.width4 * w2) / w1
this.width5 = (this.width5 * w2) / w1
this.width6 = (this.width6 * w2) / w1
this.initTestData()
},
methods: {
initTestData() {
// 测试数据出初始化
let _that = this
for (var i = 0; i < 10; i++) {
_that.tableDate.push({
id: i,
fkmc: '本地案件库',
sjkyh: _that.initYhData(i),
cjsj: '2021-11-20',
qyzt: i % 2 === 0 ? '启用' : '停用',
ljksm: '人员库说明信息肌肤的空间',
status: i % 2,
})
}
},
initYhData(index) {
index += 4
let yhs = []
let sta
for (let i = 0; i < index % 9 + 1; i++) {
sta = Math.floor(Math.random() * 2)
yhs.push({
name: '长沙市高级质量检查111',
type: sta,
id: i
}
)
}
return yhs
},
strArr(arr) {
let newArr = []
if (arr.length > 4) {
newArr = arr.slice(0, 4)
} else {
newArr = arr
}
return newArr
},
handleCurrentChange() {
},
},
}
</script>
<style scoped lang="scss">
@import "scss/xtfkgl_main";
</style>
src/views/xtfkgl/RyXtljfkView.vue 0 → 100644
<template>
<div class="root-view-div">
<!-- 表格 -->
<div class="table">
<el-table
:height="height"
style="width: 100%"
highlight-current-row
ref="multipleTable"
:data="tableDate"
class="table">
<el-table-column prop="fkmc" label="分库名称" :width="width1"></el-table-column>
<el-table-column prop="sjkyh" label="数据库用户组/用户" :width="width2">
<template slot-scope="scope">
<div class="tagsBox">
<div
v-for="item in strArr(scope.row.sjkyh)"
:class="{ tags: true, tagszu: item.type === 0 }"
:key="item.id"
v-show="item !== ''">
{{ item.name }}
</div>
<el-tooltip
class="item"
effect="dark"
placement="right"
style="width: auto !important"
v-if="scope.row.sjkyh.length > 4"
>
<span style="margin-left: 5px">...</span>
<div slot="content" class="tooTipBtn">
<div
v-for="item in scope.row.sjkyh"
:class="{divtext:item.type === 0}"
:title="item.name"
:key="item.id"
>
{{ item.name }}
</div>
</div>
</el-tooltip>
</div>
</template>
</el-table-column>
<el-table-column prop="cjsj" label="创建时间" :width="width3"></el-table-column>
<el-table-column prop="qyzt" label="启用状态" :width="width4">
<template slot-scope="scope">
<div v-if="scope.row.status === 0" class="circle-red"></div>
<div v-if="scope.row.status === 1" class="circle-blue"></div>
{{
scope.row.status === 0
? '停用'
: scope.row.status === 1
? '启用'
: '无状态'
}}
</template>
</el-table-column>
<el-table-column prop="ljksm" label="逻辑库说明" :width="width5"></el-table-column>
<el-table-column prop="cz" label="操作" width="auto">
<template slot-scope="scope">
<img
style="
width: 1.125rem;
height: 1.125rem;
margin-right: 1.125rem;
cursor: pointer;
"
src="../../assets/img/qbryk/bj.png"
/>
<img
style="
width: 1.125rem;
height: 1.125rem;
margin-right: 1.125rem;
cursor: pointer;
"
src="../../assets/img/qbryk/bj.png"
/>
<img
style="
width: 1.125rem;
height: 1.125rem;
margin-right: 1.125rem;
cursor: pointer;
"
src="../../assets/img/qbryk/bj.png"
/>
</template>
</el-table-column>
</el-table>
</div>
<!-- 分页-->
<div class="footer">
<span class="count">共&nbsp;{{ total }}&nbsp;条记录 第{{ currPage }}/{{totalPage}}页</span>
<div class="page">
<el-pagination
class="paging"
@current-change="handleCurrentChange"
:current-page="currPage"
:page-sizes="[10, 20, 30, 40]"
background
layout="prev, pager, next"
:total="total"
>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'RyXtljfkView',
data() {
return {
// 用户列表的表格宽度
width1: 150, //分库名称
width2: 680, //数据库用户组/用户
width3: 160, //创建时间
width4: 136, //启用状态
width5: 260, //逻辑库说明
width6: 120, // 操作
height: 550,
tableDate: [],
currPage: 1, // 当前页数
pageSize: 10, // 每页的数据条数
total: 70, // 数据总条数
totalPage: 7, // 总共页数
}
},
created() {
let w1 = 1920
let w2 = window.innerWidth
this.height = (this.height * w2) / w1
this.width1 = (this.width1 * w2) / w1
this.width2 = (this.width2 * w2) / w1
this.width3 = (this.width3 * w2) / w1
this.width4 = (this.width4 * w2) / w1
this.width5 = (this.width5 * w2) / w1
this.width6 = (this.width6 * w2) / w1
this.initTestData()
},
methods: {
initTestData() {
// 测试数据出初始化
let _that = this
for (var i = 0; i < 10; i++) {
_that.tableDate.push({
id: i,
fkmc: '本地案件库',
sjkyh: _that.initYhData(i),
cjsj: '2021-11-20',
qyzt: i % 2 === 0 ? '启用' : '停用',
ljksm: '人员库说明信息肌肤的空间',
status: i % 2,
})
}
logger.info(_that.tableDate)
},
initYhData(index) {
index += 4
let yhs = []
let sta
for (let i = 0; i < index % 9 + 1; i++) {
sta = Math.floor(Math.random() * 2)
yhs.push({
name: '长沙市高级质量检查111',
type: sta,
id: i
}
)
}
return yhs
},
strArr(arr) {
let newArr = []
if (arr.length > 4) {
newArr = arr.slice(0, 4)
} else {
newArr = arr
}
return newArr
},
handleCurrentChange() {
},
getList() {
let kk = ''
NetUtil.xtfkgl
.list()
.then(res => {
})
},
},
}
</script>
<style scoped lang="scss">
@import "scss/xtfkgl_main";
</style>
src/views/xtfkgl/XtfkglMain.vue 0 → 100644
<template>
<el-container class="manage-page" direction="vertical">
<!--逻辑分库管理-->
<div class="header">
<!-- 人员分库和案件分库切换按钮-->
<div class="btns">
<div class="btn" :class="{ active: isPerson }" @click="toggleView(true)">
人员逻辑分库
</div>
<div class="btn" :class="{ active: !isPerson }" @click="toggleView(false)">
案件逻辑分库
</div>
</div>
<div class="goadd" @click="addFk">
<svg-icon
style="
width: 0.8125rem;
height: 0.8125rem;
margin-bottom: -0.0625rem;
margin-right: 0.25rem;
"
icon-class="ic_add"
/>
新增分库
</div>
</div>
<br />
<!-- 人员逻辑库 -->
<ry-xtljfk-view v-if="isPerson" />
<!-- 案件逻辑库 -->
<aj-xtljfk-view v-else />
</el-container>
</template>
<script>
import RyXtljfkView from '../xtfkgl/RyXtljfkView.vue'
import AjXtljfkView from '../xtfkgl/AjXtljfkView.vue'
export default {
name: 'XtfkglMain',
components: {
RyXtljfkView,
AjXtljfkView
},
data() {
return {
isPerson: true,
}
},
methods: {
toggleView(state) {// true: 显示人员逻辑分库 false ：显示案件逻辑分库
this.isPerson = state
},
addFk() { // 新增分库
},
},
}
</script>
<style scoped lang="scss">
@import "scss/xtfkgl_main";
</style>
src/views/xtfkgl/scss/xtfkgl_main.scss 0 → 100644
.tooTipBtn {
padding: 10px;
max-height: 317px;
overflow: auto;
// 滚动条的宽度
&::-webkit-scrollbar {
width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
/* 滚动槽 */
&::-webkit-scrollbar-track {
height: 65px;
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
border-radius: 10px;
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
border-radius: 10px;
height: 65px;
background: #595a5a;
}
> div {
width: 134px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
word-wrap: break-word;
padding: 0 10px;
height: 24px;
background: #5e5e5e;
border-radius: 4px;
text-align: center;
margin-bottom: 15px;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #FFFFFF;
line-height: 20px;
&:last-of-type {
margin-bottom: 0;
}
}
.divtext {
color: #FA9500;
}
}
.manage-page {
width: 100%;
padding: 24px;
font-family: MicrosoftYaHei;
div {
display: inline-block;
}
//人员分库和案件分库切换按钮
.header {
width: 100%;
flex-direction: row;
justify-content: space-between;
align-items: center;
.btns {
width: 260px;
height: 40px;
.btn {
text-align: center;
width: 129px;
height: 32px;
font-size: 14px;
color: #282f3c;
background: #f6f8fa;
border-radius: 2px;
line-height: 32px;
cursor: pointer;
&.active {
background: #055fe7;
color: #ffffff;
}
}
}
.goadd {
float: right;
width: 120px;
height: 32px;
line-height: 32px;
font-size: 14px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #aeb5c2;
margin-left: 16px;
text-align: center;
cursor: pointer;
border: #055fe7 1px solid;
color: #055fe7;
&:hover {
border: #055fe7 1px solid;
color: #055fe7;
}
&:active {
border: #055fe7 1px solid;
color: #055fe7;
}
}
}
.root-view-div {
width: 100%;
height: 870px;
.table {
height: 750px;
width: 100%;
margin-top: 10px;
border-top: 1px solid #eeeeee;
.tagsBox {
display: flex;
.el-tooltip {
width: auto !important;
}
}
.tags {
flex-shrink: 0;
width: 134px;
height: 24px;
background: #F0F3F6;
border-radius: 4px;
padding: 0 13px;
text-align: center;
margin-right: 12px;
overflow: hidden;
text-overflow: ellipsis;
color: white;
white-space: nowrap;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #333333;
line-height: 20px;
}
.tagszu {
background: #FFEFD9;
border-radius: 4px;
color: #FA9500;
}
.circle-red {
width: 8px;
height: 8px;
background-color: #fe0000;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
.circle-blue {
width: 8px;
height: 8px;
background-color: #00b47a;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
}
.footer {
width: 1544px;
//width: calc(100vw - 367px);
position: absolute;
bottom: 27px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.count {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #666666;
}
.paging {
float: right;
}
/deep/ .el-pager {
.number {
background-color: transparent;
}
.number.active {
background-color: #055fe7 !important;
box-shadow: 0px 12px 16px 1px rgba(0, 21, 51, 0.03);
border-radius: 6px;
}
.el-icon.more.btn-quicknext.el-icon-more,
.el-icon.more.btn-quickprev.el-icon-more {
background-color: transparent !important;
}
}
/deep/ .btn-prev,
/deep/ .btn-next {
background-color: transparent !important;
}
/deep/ .el-pagination__sizes {
position: absolute;
right: 0;
}
/deep/ .btn-next {
//margin-right: 120px !important;
}
}
}
//表格表头样式
/deep/ .el-table th,
.el-table tr {
height: 48px;
background: #f6f8fa;
font-size: 14px;
color: #282f3c;
}
//表格内容样式
/deep/ .el-table td,
.el-table tr {
height: 47px;
background: #ffffff;
font-size: 14px;
color: #333333;
padding: 0;
font-weight: 400;
}
}
vue.config.js
......@@ -98,8 +98,8 @@ module.exports = {
// target: "http://127.0.0.1:8099",
// target: "http://47.92.225.109:5602",
// target: "http://www.meetfood.cn:2390", // 湖南-线上
target:"http://zwpt.xzclub.top:9333/",
// target: "http://192.168.128.102:8099", // 江
// target:"http://zwpt.xzclub.top:9333/",
target: "http://192.168.128.102:8099", // 江
ws: true,
changeOrigin: true,
pathRewrite: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment