Skip to content

F
founder_vue
Commit 2acfecdf by 米嘉伟
Options

进度条

parent ae974228
Showing with 184 additions and 25 deletions
src/views/AllPersonnelBase/modules/fcx.vue
......@@ -19,7 +19,7 @@
</div>
<div class="right">
<div class="rightTop">
<div
<!-- <div
class='bgc_A0E7DB'
:style="{width: bgc_A0E7DB + '%', height:'100%',background:'#A0E7DB'}"
>
......@@ -27,11 +27,24 @@
class='bgc_02C89A'
:style="{width: bgc_02C89A + '%', height:'100%',background:'#02C89A'}"
></div>
</div> -->
<div
class='box'
:style="{width: 100 + '%'}"
v-for="item of byzs/10"
:key="item"
>
<div class="borderLeft"></div>
<div class="colorDiv">
<div :class='[item <= 29 ? item<=28?"color_02C89A": "color_a0e7db":""]'>
</div>
</div>
<div class="borderRight"></div>
</div>
</div>
<div class="rightBottom">
<div class='msg1'><span class="colorspan"></span> 本次预估剩余 <span class="numbspan">85</span> </div>
<div class='msg2'><span class="colorspan"></span> 本次消耗 <span class="numbspan">45</span></div>
<div class='msg1'><span class="colorspan"></span> 本次预估剩余 <span class="numbspan">{{syts-bcxh}}</span> </div>
<div class='msg2'><span class="colorspan"></span> 本次消耗 <span class="numbspan">{{bcxh}}</span></div>
<div class='msg3'><span class="colorspan"></span> 消耗前剩余 <span class="numbspan">{{syts}}</span> <span class="numbspan1">/{{byzs}}条</span></div>
</div>
</div>
......@@ -42,15 +55,7 @@
v-if="this.type== 'ry'"
>
<div class='barCodeNum'>
<div v-if='this.rowData.length>1'>
<div class="point"></div>源条码号 <span>已选择 <span>{{this.rowData.length}}</span>条</span>
</div>
<div v-else>
<div class="point"></div>源条码号 <span>{{this.rowData[0].barcode}}</span> <span>已选择 <span>1</span>枚</span>
<div class='chose'>
</div>
</div>
<div class="point"></div>源条码号 <span>已选择 <span>{{this.rowData.length}}</span>条</span>
</div>
<el-form
......@@ -205,7 +210,7 @@
</div>
</div>
<div class="Tip">
<i class="el-icon-warning-outline"></i>提示：可以用“？”代替某一个字符，如：3301*2007？？？？？？？？，表示3301开头的2007年的数据
<i class="el-icon-warning-outline"></i>提示：可以用“*”代替某一个字符，如：3301*，表示3301开头的数据
</div>
</el-form>
</el-collapse-item>
......@@ -217,7 +222,37 @@
v-else
>
<div class='barCodeNum'>
<div class="point"></div>源条码号 <span>已选择 <span>3</span> 条</span>
<div v-if='this.rowData.length>1'>
<div class="point"></div>源条码号 <span>已选择 <span>{{this.rowData.length}}</span> 条</span>
</div>
<div
class='pointChose'
v-else
>
<div class='header'>
<div class="point"></div>源条码号 <span>{{this.rowData[0].barcode}}</span> <span>已选择 <span>1</span>枚</span>
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
>全选</el-checkbox>
</div>
<div class='chose'>
<div class='scrollbar'>
<el-checkbox-group
v-model="checkedCities"
@change="handleCheckedCitiesChange"
>
<el-checkbox
v-for="(city,key) in cities"
:label="key+1"
:key="key+1"
border
>{{key+1}}</el-checkbox>
</el-checkbox-group>
</div>
</div>
</div>
</div>
<el-form
:label-position='labelPosition'
......@@ -358,7 +393,7 @@
</div>
</div>
<div class="Tip">
<i class="el-icon-warning-outline"></i>提示：可以用“？”代替某一个字符，如：3301*2007？？？？？？？？，表示3301开头的2007年的数据
<i class="el-icon-warning-outline"></i>提示：可以用“*”代替某一个字符，如：3301*，表示3301开头的数据
</div>
</el-form>
</el-collapse-item>
......@@ -382,6 +417,7 @@
<script>
const targetOptions_ry = ['基本人员库', '高危人员库', '非法人员库', '在逃人员库', '布控人员库', '前科人员库', '协查人员库'];
const targetOptions_aj = ['本地案件库', '比中案件库', '已破案件库', '重大案件库', 'B类案件库', 'C类案件库', '勘查案件库', '协查案件库'];
// const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
name: "fcx",
......@@ -399,17 +435,26 @@ export default {
},
data () {
return {
bgc_A0E7DB: 60,
bgc_02C89A: 40,
bgc_A0E7DB: 99,
bgc_02C89A: 99,
byzsArr: '', // 本月总数(5个等级数组)
byzs: '300',// 该类型下本月总数
sytsArr: '',// 剩余条数
syts: '300',
syts: '300', //该类型下剩余条数
color: 'color_a0e7db', // 进度条颜色
bcxh: '1', //本次消耗
checkAll_mbljk: false, // 目标逻辑库全选
checkedTargets: [], // 选定目标逻辑库
targets_ry: targetOptions_ry, // 目标逻辑库（人员）
targets_aj: targetOptions_aj, // 目标逻辑库（案件）
isIndeterminate_mbljk: false, // 目标逻辑库全选
checkAll: false,
checkedCities: [],
// cities: cityOptions,
cities: 21,
isIndeterminate: true,
labelPosition: 'left', // 标签对齐方式
dialogVisible: false, // 弹窗状态
title: '',
......@@ -565,6 +610,19 @@ export default {
this.checkAll_mbljk = checkedCount === this.targets_aj.length;
this.isIndeterminate_mbljk = checkedCount > 0 && checkedCount < this.targets_aj.length;
},
// 指位单选
handleCheckAllChange (val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange (value) {
console.log('案件指纹序号', value);
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
},
handleClose (done) {
this.$confirm('确认关闭？')
.then(_ => {
......@@ -687,6 +745,7 @@ export default {
if (response.data.code === 0) {
this.byzsArr = response.data.ret[0]
// console.info("发查询条数返回列表===>", this.byzsArr);
// this.colorDiv()
} else {
this.$message.error(response.data.message);
}
......@@ -717,6 +776,9 @@ export default {
/deep/.el-dialog__footer {
text-align: center;
}
/deep/.el-form-item {
margin-bottom: 0;
}
.top {
width: 828px;
height: 79px;
......@@ -785,7 +847,41 @@ export default {
.rightTop {
width: 610px;
height: 24px;
background-color: #eee;
background: #f6f8fa;
box-shadow: 0px 1px 3px 0px rgba(5, 95, 231, 0.3);
border-radius: 4px;
display: flex;
// justify-content: space-between;
padding: 6px 5px;
box-sizing: border-box;
.box {
height: 12px;
display: flex;
.borderLeft {
width: 10%;
height: 12px;
background-color: #f6f8fa;
}
.colorDiv {
width: 80%;
height: 12px;
background-color: #eeeeee;
.color_a0e7db {
background-color: #a0e7db;
height: 12px;
}
.color_02C89A {
background-color: #02c89a;
height: 12px;
}
}
.borderRight {
width: 10%;
height: 12px;
background-color: #f6f8fa;
}
}
}
.rightBottom {
display: flex;
......@@ -877,6 +973,20 @@ export default {
font-size: 16px;
font-family: MicrosoftYaHei;
color: #333333;
.pointChose {
border-radius: 4px;
border: 1px solid #eeeeee;
.header {
background: #f6f8fa;
border-radius: 4px;
}
.point {
margin-left: 10px;
}
.el-checkbox {
margin-left: 370px;
}
}
.point {
display: inline-block;
width: 8px;
......@@ -886,8 +996,56 @@ export default {
margin-right: 10px;
}
.chose {
height: 100px;
background-color: #111;
// padding-left: 5px;
.scrollbar {
margin-right: 10px;
height: 100px;
overflow: auto;
line-height: 0px;
/deep/.el-checkbox {
position: relative;
width: 64px;
height: 26px;
margin: 0;
padding: 0;
margin-left: 15px;
margin-top: 15px;
background: #f6f8fa;
border: 0;
.el-checkbox__label {
line-height: 26px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #666666;
text-align: center;
display: block;
padding: 0;
}
.el-checkbox__input {
position: absolute;
bottom: -2px;
right: 0px;
.el-checkbox__inner {
width: 13px;
height: 9px;
border: 0;
border-radius: 10px 0 6px 0;
}
}
}
}
}
.scrollbar::-webkit-scrollbar {
//滚动条整体样式
width: 6px;
height: 80px;
}
.scrollbar::-webkit-scrollbar-thumb {
//滚动条里面小方块
width: 6px;
height: 34px;
background: #dadde0;
border-radius: 3px;
}
span {
margin-left: 16px;
......@@ -919,6 +1077,7 @@ export default {
margin-left: 0;
}
}
/deep/.el-input {
width: 264px;
height: 32px;
......
src/views/AllPersonnelBase/qbalk.vue
......@@ -32,7 +32,7 @@
@click="batch"
>批量操作</div>
<el-checkbox-group
v-model="reqParam.caseStoreCustomSearchReq.checkboxQuery"
v-model="reqParam.caseStoreCustomSearchReq.caseCheckboxQuery"
@change="searchCheckList"
>
<el-checkbox label="shouwen">手纹</el-checkbox>
......@@ -368,7 +368,7 @@ export default {
caseStoreCustomSearchReq: {
barcode: '',// 搜索条码
searchOptions: '',// 通用搜索
checkboxQuery: [],// 条件查询
caseCheckboxQuery: [],// 条件查询
},
page: {
......@@ -474,8 +474,8 @@ export default {
//滚动平面等筛选条件
searchCheckList (val) {
console.log(val, '筛选条件')
this.reqParam.page.checkboxQuery = val
console.log(this.reqParam.page.checkboxQuery)
this.reqParam.page.caseCheckboxQuery = val
console.log(this.reqParam.page.caseCheckboxQuery)
this.search()
},
// 复制条码号 获取选中条码值
......
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