Skip to content

F
founder_vue
Commit 9e730d2d by li_hongchao
Options

逻辑分库功能代码

parent 20494bd6
Showing with 1166 additions and 73 deletions
src/views/xtfkgl/AddXtfkView.vue
<template> <template>
<div class="addUserDialogBg"> <div class="DialogBg">
<!-- class="addUserDialogBg"--> <!-- class="addUserDialogBg"-->
<div class="addUserDialog dialog"> <div class="addDialog dialog">
<div class="head-title"> <div class="head-title">
<div class="left">新增人员逻辑分库</div> <div class="left">{{ getTitle() }}</div>
<div class="close" @click="canceladd"> <div class="close" @click="canceladd">
<img src="@/assets/img/manage/close.png" alt="" /> <img src="@/assets/img/manage/close.png" alt="" />
</div> </div>
</div> </div>
<div class="info"> <div class="info">
<el-form <el-form
label-position="left" label-position="left"
label-width="10rem" :model="ruleForm"
:model="addFormParams"
:rules="addrules" :rules="addrules"
ref="addFormParams" ref="ruleForm">
>
<el-form-item class="info-item" label="逻辑分库名称:" prop="name"> <div class="fix-height">
<div v-show="isShowLjfk()">
<el-row v-show="isShowTitle()" class="title">
<div class="colorDiv"></div>
<div>逻辑分库信息</div>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item class="info-item" label="逻辑分库名称：">
<el-input <el-input
placeholder="请输入"
class="input-info" class="input-info"
v-model="addFormParams.name" v-model.trim="ruleForm.ljfkmc"
></el-input> placeholder="请输入"
clearable />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item class="info-item" label="数据库用户：">
<sjkyh-select></sjkyh-select>
</el-form-item> </el-form-item>
<el-form-item class="info-item" label="数据库用户:"> </el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item class="info-item" label="数据条件：">
<el-input <el-input
placeholder="请输入"
class="input-info" class="input-info"
v-model="addFormParams.describe" v-model.trim="ruleForm.sjtj"
></el-input> placeholder="请输入"
clearable />
</el-form-item> </el-form-item>
</el-col>
<el-col :span="12" />
</el-row>
<el-form-item class="info-item" label="逻辑库说明:"> <el-row>
<el-col :span="24">
<el-form-item class="input-item-sm" label="逻辑库说明：">
<el-input <el-input
placeholder="请输入" class="input-info-sm"
class="input-info" v-model.trim="ruleForm.ljksm"
v-model="addFormParams.describe" placeholder="请输入" />
></el-input>
</el-form-item> </el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item class="info-item" label="启用状态:" prop="status"> <el-form-item class="info-item" label="启用状态:" prop="status">
<el-radio-group class="radio-info" v-model="addFormParams.status"> <el-radio-group class="radio-info" v-model="ruleForm.status">
<el-radio :label="1" class="qiyong">启用</el-radio> <el-radio :label="1" class="qiyong">启用</el-radio>
<el-radio :label="0" class="tingyong">停用</el-radio> <el-radio :label="0" class="tingyong">停用</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-col>
</el-row>
<el-divider />
<el-row v-show="isShowTitle()" class="title">
<div class="colorDiv"></div>
<div>工作流设置</div>
</el-row>
</div>
<div v-show="isShowGzl()">
<el-row>
<el-col>
<el-form-item class="info-item" style=" margin-bottom: 15px;" label="工作模式:"
prop="gzms">
<el-radio-group class="radio-info" v-model="ruleForm.gzms">
<el-radio :label="1">并行模式</el-radio>
<el-radio :label="0">串行模式</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<div style="background: #F7F9FB; padding: 30px 0px;">
<el-row style="margin-bottom: 20px;">
<el-col :span="24">
<el-form-item class="dui-lie-ming-cheng-layout" label="队列名称:" prop="dlmc">
<div style="margin-left: 40px;">
<div
class="dui-lie-ming-cheng"
v-for="(item,index) in dlmcArr"
v-show="dlmcArr && dlmcArr.length > 0">
<i class="el-icon-circle-plus icon" style="color: #055fe7"
@click="addDl(item,index)" />
<div>
{{ item.name || '-'}}
<div v-if="item.type === 3">
<span class="line" />
<span v-if="isRy">
<span v-show="item.search === 3 || item.search === 1"
class="tag">倒查</span>
<span v-show="item.search === 3 || item.search === 2"
class="tag">查重</span>
</span>
<span v-else>
<span v-show="item.search === 3 || item.search === 1"
class="tag">正查</span>
<span v-show="item.search === 3 || item.search === 2"
class="tag">串查</span>
</span>
</div>
</div>
</div>
</div>
<div
v-show="!dlmcArr || dlmcArr.length <= 0"
v-for="(item, index) in getDlCount()"
:key="index + 'l'"
class="kong"
></div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-form-item class="gong-zuo-dui-lie-layout" label="工作队列:" prop="gzdl">
<div v-if="gzdlArr && gzdlArr.length > 1">
<!-- 串行模式;-->
<div v-if="ruleForm.gzms === 0"
class="gong-zuo-dui-lie-chuanxing"
v-for="(item,index) in gzdlArr">
<i class="el-icon-remove icon"
style="color: #055fe7" />
<div>
{{ item.name || '-'}}
<div v-if="item.type === 3">
<span class="gzdl-line" />
<span v-if="isRy">
<span v-show="item.search === 3 || item.search === 2"
class="gztl-tag chachong">查重</span>
<span v-show="item.search === 3 || item.search === 1"
class="gztl-tag daocha">倒查</span>
</span>
<span v-else>
<span v-show="item.search === 3 || item.search === 1"
class="gztl-tag zhengcha">正查</span>
<span v-show="item.search === 3 || item.search === 2"
class="gztl-tag chuancha">串查</span>
</span>
</div>
</div>
</div>
<!-- 并行模式;-->
<div
v-if="ruleForm.gzms === 1"
v-for="(item,index) in gzdlArr"
:class="{'gong-zuo-dui-lie-bingxing-item':true, kk:index !== 0}">
<div class="gong-zuo-dui-lie-bingxing-item-left">
<div :class="{verLine:true,verLineTrans: index === 0}" />
<div :class="{verLine:true,verLineTrans: index === gzdlArr.length -1}" />
</div>
<div class="gong-zuo-dui-lie-bingxing-item-right">
<span class="mid-line" />
<span class="mid-circle" />
<div class="gong-zuo-dui-lie-bingxing">
<i class="el-icon-remove icon" style="color: #055fe7" />
<div>
{{ item.name || '-'}}
<div v-if="item.type === 3">
<span class="gzdl-line" />
<span v-if="isRy">
<span v-show="item.search === 3 || item.search === 2"
class="gztl-tag chachong">查重</span>
<span v-show="item.search === 3 || item.search === 1"
class="gztl-tag daocha">倒查</span>
</span>
<span v-else>
<span v-show="item.search === 3 || item.search === 1"
class="gztl-tag zhengcha">正查</span>
<span v-show="item.search === 3 || item.search === 2"
class="gztl-tag chuancha">串查</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else>
<div class="chu-li-dui-lie">处理队列</div>
</div>
</el-form-item>
</el-col>
</el-row>
</div>
<el-row>
<el-col>
<el-form-item class="info-item" label="启用状态:" prop="gzlstatus">
<el-radio-group class="radio-info" v-model="ruleForm.gzlstatus">
<el-radio :label="1" class="qiyong">启用</el-radio>
<el-radio :label="0" class="tingyong">停用</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
<el-form-item class="addbtns"> <el-form-item class="addbtns">
<el-button <el-button
class="add" class="add"
type="primary" type="primary"
@click="submitForm('addFormParams')">提交 @click="submitForm('ruleForm')">提交
</el-button> </el-button>
<el-button class="cancel" @click="canceladd">取消</el-button> <el-button class="cancel" @click="canceladd">取消</el-button>
</el-form-item> </el-form-item>
...@@ -57,19 +243,36 @@ ...@@ -57,19 +243,36 @@
<br /> <br />
<!-- <gzl-view />-->
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import GzlView from '../xtfkgl/GzlView.vue' import GzlView from '../xtfkgl/GzlView.vue'
import SjkyhSelect from '../xtfkgl/SjkyhSelect.vue'
const _TYPE_ALL = {type: 1} // 显示所有
const _TYPE_LJFK = {type: 2} // 显示逻辑库信息
const _TYPE_GZL = {type: 3} // 显示工作流信息
const _LIU_CLDL = {type: 4, name: '处理队列'}
const _LIU_BJDL = {type: 1, name: '编辑队列'}
const _LIU_JCDL = {type: 2, name: '检查队列'}
const _LIU_CXDL = {type: 3, name: '查询队列', search: 3} // search: 案件：正查1 串查2 全部3 人员：倒查1 查重2 全部3
export default { export default {
name: 'AddXtfkView', name: 'AddXtfkView',
components: {GzlView}, components: {
GzlView,
SjkyhSelect
},
props: {
isRy: {
type: Boolean,
default: true,
}
},
data() { data() {
// 组名 // 组名
var validateGroupname = (rule, value, callback) => { var validateGroupname = (rule, value, callback) => {
...@@ -104,7 +307,15 @@ export default { ...@@ -104,7 +307,15 @@ export default {
} }
} }
return { return {
addFormParams: { curOpt: [
{name: '编辑队列', value: '0', icon: '#icon-shenhe2'},
{name: '编辑队列', value: '1', icon: '#icon-shenhe1'},
{name: '检查队列', value: '2', icon: '#icon-shenhe3'},
{name: '查询队列', value: '3', icon: '#icon-shenhe4'},
],
ruleForm: {
gzms: 1,
gzlstatus: 0,
name: '', // 组名称 name: '', // 组名称
describe: '', // 用户组描述 describe: '', // 用户组描述
userId: [], // 加入组用户 userId: [], // 加入组用户
...@@ -126,9 +337,106 @@ export default { ...@@ -126,9 +337,106 @@ export default {
], // 启用状态 ], // 启用状态
}, },
// isShowAddUserDialogBg = true; // isShowAddUserDialogBg = true;
gzdlArr: [
{name: '编辑队列', value: '0', icon: '#icon-shenhe2'},
{name: '编辑队列', value: '1', icon: '#icon-shenhe1'},
{name: '检查队列', value: '2', icon: '#icon-shenhe3'},
{name: '查询队列', value: '3', icon: '#icon-shenhe4'},
],
curType: _TYPE_ALL.type,
dlmcArr: [],
} }
}, },
mounted() {
this.init()
},
methods: { methods: {
addDl(item, index) {
let arrs = []
// logger.json(item)
// logger.info( this.gzdlArr)
// this.gzdlArr.forEach(info => {
// if (item.type !== info.type) {
// arrs.push(info)
// }
// })
// this.gzdlArr = arrs
// logger.info( this.gzdlArr)
// logger.info("arrs", arrs)
// if (item.type === _LIU_CXDL.type) {
// item.search = 3
// }
// this.gzdlArr.push(item)
},
getDlCount() {
return this.isRy ? 3 : 2
},
/**
* 案件： 处理队列 编辑队列 查询队列（正查、串查）*
* 人员: 处理队列 编辑队列 检查队列 查询队列（倒查、查重）
* @author: li_hongchao
* @date: 2021/12/28 13:57
*/
init() {
this.dlmcArr = []
this.gzdlArr = []
if (this.isRy) {
this.dlmcArr.push(_LIU_BJDL)
this.dlmcArr.push(_LIU_JCDL)
this.dlmcArr.push(_LIU_CXDL)
this.gzdlArr.push(_LIU_CLDL)
this.gzdlArr.push(_LIU_BJDL)
this.gzdlArr.push(_LIU_JCDL)
this.gzdlArr.push(_LIU_CXDL)
} else {
this.dlmcArr.push(_LIU_BJDL)
this.dlmcArr.push(_LIU_CXDL)
this.gzdlArr.push(_LIU_CLDL)
// this.gzdlArr.push(_LIU_BJDL)
// this.gzdlArr.push(_LIU_CXDL)
}
},
getTitle() {
let title = ''
if (this.isRy) {
title = '人员'
} else {
title = '案件'
}
switch (this.curType) {
case _TYPE_ALL.type:
return '新增' + title + '逻辑分库'
case _TYPE_GZL.type:
return title + '工作流设置'
case _TYPE_LJFK.type:
return '编辑' + title + '逻辑分库'
}
},
isShowLjfk() {
return this.curType !== _TYPE_GZL.type
},
isShowGzl() {
return this.curType !== _TYPE_LJFK.type
},
isShowTitle() {
return this.curType === _TYPE_ALL.type
},
showAll() {
this.curType = _TYPE_ALL.type
this.init()
},
showLjfk() {
this.curType = _TYPE_LJFK.type
this.init()
},
showGzl() {
this.curType = _TYPE_GZL.type
this.init()
},
submitForm() { submitForm() {
this.canceladd() this.canceladd()
}, },
...@@ -136,7 +444,12 @@ export default { ...@@ -136,7 +444,12 @@ export default {
this.$emit('close') this.$emit('close')
}, },
}, },
watch: {
// curType() {
// }
}
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
......
src/views/xtfkgl/AjXtljfkView.vue
...@@ -209,7 +209,7 @@ export default { ...@@ -209,7 +209,7 @@ export default {
}, },
methods: { methods: {
loadData() { loadData() {
// this.getList() this.getList()
}, },
initTestData() { initTestData() {
// 测试数据出初始化 // 测试数据出初始化
......
src/views/xtfkgl/SjkyhSelect.vue 0 → 100644
<template>
<div class="root-div">
<el-dropdown
ref="dropdown"
trigger="click"
:hide-on-click="true"
@visible-change="visibleChange">
<div style="float: left;" class="opt-select">
<div class="select-left">{{selValue}}</div>
<div :class="isShowing?'select-right-focus':'select-right-normal'">
<svg class="icon opt-select-right-svg" aria-hidden="true">
<use xlink:href="#icon-shenhe" />
</svg>
</div>
</div>
<el-dropdown-menu slot="dropdown" class="select-list-content">
<div class="select-list-content-left">
<div class="list-item">用户</div>
<div class="list-item">用户组</div>
</div>
<div class="select-list-content-right">
<div class="top-div">
<div v-for="item in curOpt" class="top-item">{{item.name}}</div>
</div>
<div class="bottom-div">
<div class="queding">确定</div>
<div class="quxiao">取消</div>
</div>
</div>
<!-- <div v-for="item in curOpt" :key="item.icon" class="select-list-content-item">-->
<!-- <svg class="icon opt-select-right-svg" aria-hidden="true"-->
<!-- style="margin-right: 5px;width: 20px;height: 20px;">-->
<!-- <use :xlink:href="item.icon" />-->
<!-- </svg>-->
<!-- {{item.name}}-->
<!-- </div>-->
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
<script>
export default {
name: 'SjkyhSelect',
data() {
return {
isShowing: false,
selValue: '请选择',
curOpt: [
{name: '审核0', value: '0', icon: '#icon-shenhe'},
{name: '审核1', value: '1', icon: '#icon-shenhe'},
{name: '审核2', value: '2', icon: '#icon-shenhe'},
{name: '审核3', value: '3', icon: '#icon-shenhe'},
{name: '审核4', value: '4', icon: '#icon-shenhe'},
{name: '审核5', value: '5', icon: '#icon-shenhe'},
],
}
},
methods: {
visibleChange(val) {
let _that = this
_that.isShowing = val
},
}
}
</script>
<style scoped lang="scss">
@import "../../../public/iconfont/iconfont.css";
.root-div {
width: 264px;
position: relative;
display: inline-block;
}
.opt-select-right-svg {
width: 16px;
height: 16px;
}
.opt-select {
width: 264px;
background: #FFFFFF;
box-shadow: 0px 6px 10px 2px rgba(0, 21, 51, 0.06);
border-radius: 4px;
border: 1px solid #E6E6E8;
display: flex;
align-items: center;
justify-content: space-between;
}
.btn-sh {
cursor: pointer;
width: 72px;
height: 28px;
border-radius: 4px;
border: 1px solid #fe0000;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #fe0000;
display: flex;
align-items: center;
justify-content: center;
}
.select-left {
float: left;
width: 94px;
height: 32px;
border-radius: 4px 0px 0px 4px;
border: 1px solid #D5E5FC;
border-right: 0px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
line-height: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.select-right-normal {
float: left;
width: 32px;
height: 32px;
background: #E1EDFF;
border: 1px solid #D5E5FC;
border-radius: 0px 4px 4px 0px;
display: flex;
align-items: center;
justify-content: center;
}
.select-right-focus {
float: left;
width: 32px;
height: 32px;
background: #D5E5FC;
box-shadow: 2px 2px 2px 0px rgba(2, 122, 255, 0.41);
border-radius: 0px 4px 4px 0px;
display: flex;
align-items: center;
justify-content: center;
}
.select-list-content {
margin-top: 0px;
width: 264px;
height: 216px;
display: block;
padding-top: 10px;
z-index: 999;
background: #FFFFFF;
box-shadow: 0px 6px 10px 2px rgba(0, 21, 51, 0.06);
border-radius: 4px;
border: 1px solid #E6E6E8;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.select-list-content-left {
width: 28%;
height: 216px;
/*height: 40px;*/
background: #FFFFFF;
.list-item {
width: 100%;
height: 40px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
line-height: 19px;
padding: 0px 0px 0px 15px;
display: flex;
align-items: center;
justify-content: left;
}
}
.select-list-content-right {
width: 72%;
height: 216px;
/*background: black;*/
.top-div {
width: 100%;
height: 170px;
overflow: scroll;
.top-item {
width: 100%;
height: 40px;
background: #FFFFFF;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
line-height: 19px;
}
}
.bottom-div {
width: 100%;
height: 55px;
background: #FFFFFF;
box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.06);
border-radius: 0px 0px 3px 3px;
display: flex;
align-items: center;
justify-content: center;
.queding {
width: 72px;
height: 32px;
border-radius: 4px;
border: 1px solid #AEB5C2;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #2E3846;
line-height: 16px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
cursor: pointer;
margin-right: 8px;
}
.quxiao {
width: 72px;
height: 32px;
background: #055FE7;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #FFFFFF;
line-height: 16px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.select-list-content-item {
padding: 0px;
width: 126px;
height: 32px;
display: inline-block;
/*display: block;*/
position: relative;
z-index: 9999;
/*background: black;*/
padding-left: 20px;
display: flex;
align-items: center;
justify-content: left;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
line-height: 19px;
}
.select-list-content-item:hover {
background: #F5F5F7;
}
.ysb-left {
float: left;
width: 94px;
height: 32px;
background: #FFFFFF;
border-radius: 4px 0px 0px 4px;
border: 1px solid #D9DCE2;
border-right: 0px;
font-family: MicrosoftYaHei;
color: #666666;
line-height: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.ysb-right {
float: left;
width: 32px;
height: 32px;
background: #ECEDF1;
border: 1px solid #D9DCE2;
border-radius: 0px 4px 4px 0px;
display: flex;
align-items: center;
justify-content: center;
}
// 滚动条的宽度
/deep/ .top-div::-webkit-scrollbar {
width: 6px; // 横向滚动条
height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ .top-div::-webkit-scrollbar-thumb {
background-color: #dadde0;
border-radius: 3px;
}
</style>
src/views/xtfkgl/XtfkglMain.vue
...@@ -28,23 +28,22 @@ ...@@ -28,23 +28,22 @@
</div> </div>
<br /> <br />
<!-- 人员逻辑库 --> <!-- 人员逻辑库 -->
<ry-xtljfk-view <ry-xtljfk-view
ref="ryXtfk" ref="ryXtfk"
v-show="isPerson" v-show="isPerson"
@openBj="openRyBj" @openBj="openBj"
@openGzl="openRyGzl" @openGzl="openGzl"
@openSjgl="openRySjgl" /> @openSjgl="openSjgl" />
<!-- 案件逻辑库 --> <!-- 案件逻辑库 -->
<aj-xtljfk-view <aj-xtljfk-view
ref="ajXtfk" ref="ajXtfk"
v-show="!isPerson" v-show="!isPerson"
@openBj="openAjBj" @openBj="openBj"
@openGzl="openAjGzl" @openGzl="openGzl"
@openSjgl="openAjSjgl" /> @openSjgl="openSjgl" />
<!-- 新增分库页面--> <!-- 新增分库页面-->
<add-xtfk-view ref="addXtfkViewRef" v-show="isAddFk" @close="closeXtfkView" /> <add-xtfk-view ref="addXtfk" :is-ry="isPerson" v-show="isAddFk" @close="closeXtfkView" />
<gzl-view ref="gzlView" v-show="isShowGzl" @close="closeGzlView" /> <gzl-view ref="gzlView" v-show="isShowGzl" @close="closeGzlView" />
</el-container> </el-container>
</template> </template>
...@@ -83,30 +82,29 @@ export default { ...@@ -83,30 +82,29 @@ export default {
}, },
addFk() { // 新增分库 addFk() { // 新增分库
this.isAddFk = true this.isAddFk = true
this.$refs.addXtfk.showAll()
}, },
openRyBj() { // 案件编辑
openBj() { // 人员/案件编辑
this.isAddFk = true this.isAddFk = true
this.$refs.addXtfk.showLjfk()
}, },
openRyGzl() { // 案件工作流 openGzl() {// 人员/案件工作流
this.isShowGzl = true this.isAddFk = true
this.$refs.addXtfk.showGzl()
}, },
openRySjgl() { // 案件数据管理 openSjgl() { // 人员/案件数据管理
if (this.isPerson) {
}, } else {
closeXtfkView() {
this.isAddFk = false
},
openAjBj() { // 案件编辑 }
this.isAddFk = true
},
openAjGzl() {// 案件工作流
this.isShowGzl = true
}, },
openAjSjgl() { // 案件数据管理
},
closeXtfkView() {
this.isAddFk = false
},
closeGzlView() { closeGzlView() {
this.isShowGzl = false this.isShowGzl = false
} }
......
src/views/xtfkgl/scss/dialog_table.scss
.addUserDialogBg { .DialogBg {
position: absolute; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
z-index: 500; z-index: 500;
...@@ -9,16 +9,20 @@ ...@@ -9,16 +9,20 @@
//filter: blur(2px); //filter: blur(2px);
} }
.addUserDialog { .addDialog {
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
//margin-top: 40px;
//margin-bottom: 40px;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-40%, -50%); transform: translate(-40%, -50%);
z-index: 1000; z-index: 1000;
width: 890px; width: 892px;
height: 440px; //height: 830px;
background: #ffffff; //max-height: 700px;
min-height: 581px;
background: #FFFFFF;
box-shadow: 0px 14px 30px 0px rgba(0, 21, 51, 0.25); box-shadow: 0px 14px 30px 0px rgba(0, 21, 51, 0.25);
border-radius: 6px; border-radius: 6px;
...@@ -47,20 +51,47 @@ ...@@ -47,20 +51,47 @@
} }
} }
.title {
display: flex;
padding: 30px 0 20px 0px;
div {
font-size: 16px;
font-family: MicrosoftYaHei;
color: #282f3c;
line-height: 24px;
}
.colorDiv {
width: 4px;
height: 16px;
background: #055fe7;
border-radius: 2px;
margin-right: 10px;
margin-top: 5px;
}
}
.info { .info {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
// padding-left: 200px;
padding-top: 10px;
margin-bottom: 10px;
.el-form /deep/ { .el-form /deep/ {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
justify-content: space-around; //justify-content: space-around;
align-items: center; //align-items: center;
.el-row {
margin: 0px 32px;
}
.fix-height {
min-height: 430px;
max-height: 600px;
overflow: scroll;
}
.addbtns { .addbtns {
.el-form-item__content { .el-form-item__content {
...@@ -70,14 +101,14 @@ ...@@ -70,14 +101,14 @@
.info-item { .info-item {
margin-bottom: 20px; margin-bottom: 20px;
width: 500px; width: 388px;
height: 40px; height: 40px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; //justify-content: center;
.input-info { .input-info {
width: 204px; width: 264px;
height: 35px; height: 35px;
//background: #FFFFFF; //background: #FFFFFF;
border-radius: 4px; border-radius: 4px;
...@@ -89,7 +120,406 @@ ...@@ -89,7 +120,406 @@
height: 35px; height: 35px;
} }
.el-input__inner {
border-color: #e6e6e8 !important;
color: #e60012;
box-shadow: 0px 6px 10px 2px rgba(0, 21, 51, 0.06);
}
}
.input-item-sm {
margin-bottom: 20px;
height: 76px;
//display: flex;
flex-direction: row;
.input-info-sm {
width: 670px;
height: 76px;
margin-left: 20px;
background: #F6F8FA;
box-shadow: 0px 1px 2px 0px rgba(5, 95, 231, 0.18);
border-radius: 4px;
border: 1px solid #EEEEEE;
background: black;
}
/deep/ .el-input__inner {
width: 670px;
height: 76px;
//border-color: transparent !important;
//color: #e60012;
//box-shadow: 0px 0px rgba(0, 21, 51, 0.06);
background: #F6F8FA;
background: #F6F8FA;
box-shadow: 0px 1px 2px 0px rgba(5, 95, 231, 0.18);
border-radius: 4px;
border: 1px solid #EEEEEE;
}
}
.dui-lie-ming-cheng-layout {
}
.dui-lie-ming-cheng {
min-width: 96px;
height: 32px;
border-radius: 4px;
border: 1px solid #AEB5C2;
//margin-right: 4px;
margin-left: 20px;
display: inline-block;
background: #f6f8fa;
//box-shadow: 4px 4px 4px 0px rgba(193, 216, 251, 0.8), -4px -4px 4px 0px #ffffff;
position: relative;
text-align: center;
margin-right: 25px;
//margin-top: 7px;
> div {
line-height: 32px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-sizing: border-box;
padding: 0 10px;
display: flex;
align-items: center;
justify-content: center;
.line {
margin-right: 14px;
margin-left: 14px;
width: 1px;
height: 16px;
background: #D8D8D8;
border: 1px solid #979797;
}
.tag {
width: 32px;
height: 20px;
background: #D8D8D8;
border-radius: 2px;
margin-right: 8px;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #FFFFFF;
line-height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
> .icon {
position: absolute;
top: -6px;
right: -6px;
cursor: pointer;
}
}
.kong {
min-width: 96px;
height: 32px !important;
border: 1px dashed #aeb5c2 !important;
position: relative !important;
display: inline-block;
margin-right: 25px;
border-radius: 4px;
}
.gong-zuo-dui-lie-layout {
//height: 76px;
/deep/ .el-form-item__label {
width: 94px;
}
}
.chu-li-dui-lie {
width: 96px;
height: 32px;
background: #F6F8FA;
box-shadow: 4px 4px 4px 0px rgba(193, 216, 251, 0.8), -4px -4px 4px 0px #FFFFFF;
border-radius: 4px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #999999;
line-height: 22px;
//-webkit-background-clip: text;
//-webkit-text-fill-color: transparent;
margin-left: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
}
//.gong-zuo-dui-lie-chuanxing { // 串行
// min-width: 96px;
// height: 32px;
// margin-right: 25px;
// display: inline-block;
//
// background: #F6F8FA;
// border: 1px solid #AEB5C2;
// box-shadow: 4px 4px 4px 0px rgba(193, 216, 251, 0.8), -4px -4px 4px 0px #FFFFFF;
// border-radius: 4px;
// position: relative;
// text-align: center;
//
// > div {
// line-height: 32px;
// width: 100%;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
// box-sizing: border-box;
// padding: 0 10px;
//
// display: flex;
// align-items: center;
// justify-content: center;
//
// .line {
// margin-right: 14px;
// margin-left: 14px;
//
// width: 1px;
// height: 16px;
// background: #D8D8D8;
// border: 1px solid #979797;
// }
//
// //.gztl-tag {
// // width: 32px;
// // height: 20px;
// // background: #D8D8D8;
// // border-radius: 2px;
// //
// // margin-right: 8px;
// // font-size: 12px;
// // font-family: MicrosoftYaHei;
// // color: #FFFFFF;
// // line-height: 16px;
// //
// // display: inline-flex;
// // align-items: center;
// // justify-content: center;
// //
// //}
// //
// //.zhengcha { /* 案件 正查*/
// // background: #08BD9E;
// //}
// //
// //.chuancha { /* 案件 串查*/
// // background: #055FE7;
// //}
// //
// //.chachong { /* 人员 查重*/
// // background: #FFA219;
// //}
// //
// //.daocha { /* 人员 倒查*/
// // background: #FE0000;
// //}
//
// }
//
// > .icon {
// position: absolute;
// top: -6px;
// right: -6px;
// cursor: pointer;
// }
//}
.gong-zuo-dui-lie-chuanxing { // 串行
min-width: 96px;
height: 32px;
margin-right: 0px;
display: inline-block;
background: #F6F8FA;
border: 1px solid #AEB5C2;
box-shadow: 4px 4px 4px 0px rgba(193, 216, 251, 0.8), -4px -4px 4px 0px #FFFFFF;
border-radius: 4px;
position: relative;
text-align: center;
margin-left: 30px;
> div {
line-height: 32px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-sizing: border-box;
padding: 0 10px;
display: flex;
align-items: center;
justify-content: center;
}
> .icon {
position: absolute;
top: -6px;
right: -6px;
cursor: pointer;
}
}
.kk {
margin-left: 73px;
}
.gong-zuo-dui-lie-bingxing-item {
height: 52px;
display: flex;
vertical-align: middle;
//align-items: center;
//justify-content: center; DialogBg
.gong-zuo-dui-lie-bingxing-item-left {
width: 1px;
height: 52px;
}
.verLine {
height: 50%;
background: linear-gradient(90deg, #7CD5FF 0%, #49AFFF 100%);
}
.verLineTrans {
background: transparent;
}
.mid-line {
width: 14px;
height: 2px;
background: linear-gradient(90deg, #7CD5FF 0%, #49AFFF 100%);
}
.mid-circle {
width: 7px;
height: 7px;
background: #FFFFFF;
border: 1px solid #49AFFF;
}
.gong-zuo-dui-lie-bingxing-item-right {
width: auto;
height: 52px;
/*background: black;*/
display: flex;
align-items: center;
justify-content: center;
.gong-zuo-dui-lie-bingxing { // 并行
min-width: 96px;
height: 32px;
margin-left: 12px;
display: inline-block;
background: #F6F8FA;
border: 1px solid #AEB5C2;
box-shadow: 4px 4px 4px 0px rgba(193, 216, 251, 0.8), -4px -4px 4px 0px #FFFFFF;
border-radius: 4px;
position: relative;
text-align: center;
> div {
line-height: 32px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-sizing: border-box;
padding: 0 10px;
display: flex;
align-items: center;
justify-content: center;
}
> .icon {
position: absolute;
top: -6px;
right: -6px;
cursor: pointer;
}
}
}
}
.gzdl-line {
margin-right: 14px;
margin-left: 14px;
width: 1px;
height: 16px;
background: #D8D8D8;
border: 1px solid #979797;
}
.gztl-tag {
width: 32px;
height: 20px;
background: #D8D8D8;
border-radius: 2px;
margin-right: 8px;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #FFFFFF;
line-height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.zhengcha { /* 案件 正查*/
background: #08BD9E;
}
.chuancha { /* 案件 串查*/
background: #055FE7;
}
.chachong { /* 人员 查重*/
background: #FFA219;
} }
.daocha { /* 人员 倒查*/
background: #FE0000;
}
} }
.addbtns { .addbtns {
...@@ -146,11 +576,16 @@ ...@@ -146,11 +576,16 @@
.el-form-item__label { .el-form-item__label {
position: relative; position: relative;
width: 106px;
padding: 0;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
&::before { &::before {
position: absolute; position: absolute;
left: -10px; //left: -10px;
transform: translateY(3px); //transform: translateY(3px);
} }
} }
...@@ -169,11 +604,6 @@ ...@@ -169,11 +604,6 @@
} }
} }
.el-input__inner {
border-color: #e6e6e8 !important;
color: #e60012;
box-shadow: 0px 6px 10px 2px rgba(0, 21, 51, 0.06);
}
} }
.el-radio-group { .el-radio-group {
...@@ -234,3 +664,15 @@ ...@@ -234,3 +664,15 @@
} }
} }
} }
// 滚动条的宽度
/deep/ .fix-height::-webkit-scrollbar {
width: 6px; // 横向滚动条
height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ .fix-height::-webkit-scrollbar-thumb {
background-color: #dadde0;
border-radius: 3px;
}
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