602 lines
13 KiB
Vue
602 lines
13 KiB
Vue
<template>
|
|
<view class="addIssue">
|
|
<view class="fixedheader">
|
|
<headers :showBack="true" :themeType="true">
|
|
<view class="headerName">
|
|
设备列表
|
|
</view>
|
|
</headers>
|
|
</view>
|
|
<view class="search-box" :style="{paddingTop: mobileTopHeight + 44 + 'px'}">
|
|
<view class="uni-form-item">
|
|
<u-search class="uni-input" placeholder="搜索设备名称" :show-action="false" @change="loadData"
|
|
v-model="policeCameraInfo.devName"></u-search>
|
|
</view>
|
|
<u-dropdown @open="open" @close="close" :style="dropDownShow ? '' :'overflow:hidden'" :overlay="true"
|
|
active-color="#3190F3">
|
|
<u-dropdown-item
|
|
:title="policeCameraInfo.groupId == '' ? '分组' : dataListUp(policeCameraGroupList, policeCameraInfo.groupId)"
|
|
v-model="policeCameraInfo.groupId" :options="policeCameraGroupList">
|
|
<view class="slot-content">
|
|
<scroll-view scroll-y="true" class="scroll-view">
|
|
<view @click="onMenuClick(item, 1)" class="cell-box" v-for="item in policeCameraGroupList"
|
|
:key="item.id">
|
|
<view>{{item.label}}</view>
|
|
<image v-if="policeCameraInfo.groupId == item.value"
|
|
src="/static/staffAttendance/identity-success.png" mode=""></image>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</u-dropdown-item>
|
|
<u-dropdown-item @change="onMenuChage" v-model="policeCameraInfo.stateType" :options="inserviceTypeList"
|
|
:title="policeCameraInfo.stateType == '' ? '状态' : dataListUp(inserviceTypeList, policeCameraInfo.stateType)"></u-dropdown-item>
|
|
</u-dropdown>
|
|
</view>
|
|
<view class="content" :style="{paddingTop: mobileTopHeight + 130 + 'px'}">
|
|
<view class="content_main">
|
|
<view class="content_main-box" v-for="item in policeCameraItemList" :key="item.itemId">
|
|
<view>
|
|
<view>
|
|
<checkbox-group @change="onChangeClick">
|
|
<checkbox :disabled="item.bindChecked" :value="item.itemId" :checked="item.checked" />
|
|
</checkbox-group>
|
|
<view>{{item.devName}}</view>
|
|
</view>
|
|
<view :class="{'boundalready': item.bindChecked}">{{item.bindChecked ? '已绑定' : '空闲'}} </view>
|
|
</view>
|
|
<view class="">
|
|
<image v-if="item.pic" :src="url_config + 'image/' + item.pic"
|
|
mode=""></image>
|
|
<image v-else src="/static/staffAttendance/attendance-bg2.png" mode=""></image>
|
|
<view>
|
|
<view>
|
|
<view>使用人</view>
|
|
<view>{{item.userNames ? item.userNames : '--'}}</view>
|
|
</view>
|
|
<view>
|
|
<view>编号</view>
|
|
<view>{{item.devSn}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="confrim-btn">
|
|
<view @click="onNavigateBack">取消返回</view>
|
|
<view @click="onSubmit">确定添加</view>
|
|
</view>
|
|
</view>
|
|
<u-modal @cancel="onCancel" @confirm="onConfirm" v-model="submitShow" confirm-text="绑定完成" :show-cancel-button="true" cancel-text="继续添加" content="设备已绑定作业票，请选择继续添加设备或者绑定完成进行下一步操作"></u-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import TreeView from '@/components/tree-view/TreeView.vue';
|
|
export default {
|
|
components: {
|
|
TreeView
|
|
},
|
|
data() {
|
|
return {
|
|
mobileTopHeight: 0,
|
|
projectDetail: {},
|
|
searchName: "",
|
|
inserviceTypeList: [{
|
|
label: '全部',
|
|
value: ''
|
|
},
|
|
{
|
|
label: '空闲',
|
|
value: '1'
|
|
},
|
|
{
|
|
label: '已绑定',
|
|
value: '2'
|
|
}
|
|
],
|
|
dropDownShow: false,
|
|
submitShow: false,
|
|
policeCameraGroupList:[],
|
|
policeCameraItemList: [],
|
|
policeCameraInfo: {
|
|
groupId: "",
|
|
stateType: "",
|
|
devName: "",
|
|
},
|
|
selectList: [],
|
|
bindSelectList: [],
|
|
}
|
|
},
|
|
onLoad(opts) {
|
|
this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'));
|
|
this.bindSelectList = JSON.parse(opts.selectList);
|
|
this.getPoliceCameraGroupListFn();
|
|
this.getPoliceCameraItemListFn();
|
|
},
|
|
mounted() {
|
|
var that = this
|
|
uni.getSystemInfo({
|
|
success(res) {
|
|
that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
|
|
uni.setStorageSync('systemInfo', res)
|
|
console.log(res)
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
// 取消
|
|
onNavigateBack() {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
},
|
|
onChangeClick(e){
|
|
if(e.detail.value.length > 0) {
|
|
const find = this.policeCameraItemList.find(item => item.itemId == e.detail.value[0]);
|
|
if(find) {
|
|
find.checked = true;
|
|
}
|
|
}
|
|
},
|
|
onCancel(){
|
|
this.getPoliceCameraItemListFn();
|
|
this.submitShow = false;
|
|
},
|
|
onSubmit() {
|
|
const resultList = this.policeCameraItemList.filter(item => item.checked).map(item => item.itemId);
|
|
this.selectList = [...this.selectList, ...resultList];
|
|
console.log(this.selectList)
|
|
this.submitShow = true;
|
|
},
|
|
onConfirm() {
|
|
uni.$emit('updateData', JSON.stringify(this.selectList))
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
},
|
|
open() {
|
|
this.dropDownShow = true
|
|
},
|
|
close() {
|
|
this.dropDownShow = false
|
|
},
|
|
onMenuChage(event) {
|
|
this.loadData();
|
|
},
|
|
onMenuClick(row, type) {
|
|
if (type == 1) {
|
|
this.policeCameraInfo.groupId = row.value;
|
|
}
|
|
this.loadData();
|
|
},
|
|
loadData(){
|
|
this.getPoliceCameraItemListFn();
|
|
},
|
|
// 获取分组
|
|
getPoliceCameraGroupListFn() {
|
|
let that = this;
|
|
let data = {
|
|
projectSn: this.projectDetail.projectSn,
|
|
};
|
|
this.sendRequest({
|
|
url: 'xmgl/policeCameraGroup/list',
|
|
method: 'POST',
|
|
data: data,
|
|
success: res => {
|
|
if (res.code == 200) {
|
|
const resultList = res.result.map(item => {
|
|
return {
|
|
...item,
|
|
value: item.id,
|
|
label: item.groupName,
|
|
}
|
|
});
|
|
that.policeCameraGroupList = [{
|
|
value: "",
|
|
label: "全部"
|
|
}, ...resultList]
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 获取设备列表
|
|
getPoliceCameraItemListFn() {
|
|
let that = this;
|
|
let data = {
|
|
projectSn: this.projectDetail.projectSn,
|
|
groupId: this.policeCameraInfo.groupId,
|
|
devName: this.policeCameraInfo.devName,
|
|
};
|
|
this.sendRequest({
|
|
url: 'xmgl/policeCameraItem/list',
|
|
method: 'get',
|
|
data: data,
|
|
success: res => {
|
|
if (res.code == 200) {
|
|
const resultList = res.result.map(item => {
|
|
return {
|
|
...item,
|
|
bindChecked: this.bindSelectList.includes(item.itemId) || item.bindTicket == 1 ? true : false,
|
|
checked: false,
|
|
}
|
|
});
|
|
if(that.policeCameraInfo.stateType == 1) {
|
|
that.policeCameraItemList = resultList.filter(item => !item.bindChecked);
|
|
} else if(that.policeCameraInfo.stateType == 2) {
|
|
that.policeCameraItemList = resultList.filter(item => item.bindChecked);
|
|
} else {
|
|
that.policeCameraItemList = resultList;
|
|
}
|
|
|
|
}
|
|
}
|
|
})
|
|
},
|
|
},
|
|
computed: {
|
|
dataListUp() {
|
|
return (dataList, id) => {
|
|
const find = dataList.find(item => item.value == id);
|
|
return find ? find.label : '--'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
/deep/ .u-mode-center-box {
|
|
width: 698rpx !important;
|
|
.u-model__title {
|
|
padding: 0;
|
|
font-size: 32rpx;
|
|
color: #272D45;
|
|
height: 86rpx;
|
|
background-color: #FFFFFF;
|
|
box-shadow: 0rpx 8rpx 10rpx -8rpx rgba(81,129,246,0.42);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.u-model__content__message {
|
|
padding: 26rpx 26rpx 72rpx;
|
|
font-size: 28rpx;
|
|
color: #171717;
|
|
}
|
|
.u-model__footer__button {
|
|
height: 76rpx;
|
|
line-height: 76rpx;
|
|
background-color: rgba(81,129,246,0.1);
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #5181F6;
|
|
}
|
|
.hairline-left {
|
|
background-color: #5181F6;
|
|
color: white !important;
|
|
}
|
|
}
|
|
.addIssue {
|
|
min-height: 100vh;
|
|
background-color: #F2F3F7;
|
|
}
|
|
|
|
.content {
|
|
.content_main {
|
|
margin-top: 26rpx;
|
|
// background-color: white;
|
|
padding-bottom: 138rpx;
|
|
min-height: calc(100vh - 130rpx - 138rpx - 26rpx);
|
|
|
|
>.content_main-box:not(:first-child) {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.content_main-box {
|
|
height: 224rpx;
|
|
background-color: #FFFFFF;
|
|
padding: 26rpx;
|
|
|
|
/deep/ .uni-checkbox-input {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
>view:last-child {
|
|
margin-top: 22rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
>image {
|
|
width: 80rpx;
|
|
height: 104rpx;
|
|
border-radius: 6rpx;
|
|
}
|
|
|
|
>view:last-child {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
margin-left: 40rpx;
|
|
height: 104rpx;
|
|
|
|
>view {
|
|
display: flex;
|
|
|
|
>view:first-child {
|
|
width: 84rpx;
|
|
font-size: 28rpx;
|
|
color: #4D4D4D;
|
|
text-align: right;
|
|
}
|
|
|
|
>view:last-child {
|
|
margin-left: 40rpx;
|
|
font-size: 28rpx;
|
|
color: #4D4D4D;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
>view:first-child {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
>view:first-child {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
>view:last-child {
|
|
margin-left: 12rpx;
|
|
font-weight: 800;
|
|
font-size: 30rpx;
|
|
color: #171717;
|
|
}
|
|
}
|
|
|
|
>view:last-child {
|
|
width: 90rpx;
|
|
height: 42rpx;
|
|
background-color: rgba(71, 195, 147, 0.1);
|
|
border-radius: 76rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 21rpx;
|
|
color: #47C393;
|
|
}
|
|
.boundalready {
|
|
background-color: rgba(113,75,0,0.1) !important;
|
|
color: #714B00 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.confrim-btn {
|
|
width: 100%;
|
|
padding: 18rpx 26rpx;
|
|
background-color: #FFFFFF;
|
|
box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
|
|
display: flex;
|
|
position: fixed;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
|
|
>view {
|
|
width: 50%;
|
|
height: 76rpx;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
>view:first-child {
|
|
background-color: rgba(81, 129, 246, 0.1);
|
|
border-radius: 6rpx 0rpx 0rpx 6rpx;
|
|
color: #5181F6;
|
|
}
|
|
|
|
>view:last-child {
|
|
background-color: #5181F6;
|
|
border-radius: 0rpx 6rpx 6rpx 0rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fixedheader {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 999;
|
|
|
|
/deep/ .headerBox {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.headerName {
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.search-box {
|
|
background-color: white;
|
|
width: 100%;
|
|
position: fixed;
|
|
z-index: 99;
|
|
|
|
.uni-form-item {
|
|
padding: 26rpx 26rpx 0;
|
|
position: relative;
|
|
|
|
.uni-input {
|
|
border: 2rpx solid #E4E4E4;
|
|
border-radius: 68rpx;
|
|
padding: 0;
|
|
font-size: 30rpx;
|
|
color: #444444;
|
|
|
|
/deep/ .u-content {
|
|
background-color: #FFFFFF !important;
|
|
|
|
.u-input {
|
|
background-color: #FFFFFF !important;
|
|
color: #999999 !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-btn {
|
|
width: 130rpx;
|
|
height: calc(100% - 26rpx - 26rpx);
|
|
background: #2F8FF3;
|
|
border-radius: 68rpx;
|
|
font-size: 30rpx;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
right: 26rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.scroll-view {
|
|
margin: 10rpx 26rpx;
|
|
width: calc(100% - 26rpx - 26rpx);
|
|
max-height: 60vh;
|
|
border-radius: 6rpx;
|
|
}
|
|
|
|
/deep/ .u-dropdown__menu__item__text {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
/* 限制为两行 */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cell-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
padding: 13px 16px;
|
|
font-size: 14px;
|
|
line-height: 27px;
|
|
color: #606266;
|
|
background-color: #fff;
|
|
text-align: left;
|
|
|
|
>view {
|
|
flex: 1;
|
|
margin-right: 20rpx;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
/* 限制为两行 */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.box-active {
|
|
color: rgb(49, 144, 243);
|
|
}
|
|
|
|
>image {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
|
|
/deep/ .u-mask {
|
|
z-index: 10 !important;
|
|
}
|
|
|
|
/deep/ .u-dropdown__content {
|
|
// height: initial !important;
|
|
// top: 166rpx !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/deep/ .van-dropdown-item__content,
|
|
/deep/ .u-cell-item-box {
|
|
margin: 20rpx 26rpx;
|
|
width: calc(100% - 26rpx - 26rpx);
|
|
border-radius: 6rpx;
|
|
}
|
|
|
|
/deep/ .u-cell-item-box {
|
|
// max-height: 60vh;
|
|
// overflow-y: scroll;
|
|
}
|
|
|
|
/deep/ .uicon-arrow-down {
|
|
// position: absolute;
|
|
// top: 50%;
|
|
// right: -4px;
|
|
margin-top: -5px;
|
|
border: 3px solid;
|
|
border-color: transparent transparent #dcdee0 #dcdee0;
|
|
-webkit-transform: rotate(-45deg);
|
|
transform: rotate(-45deg);
|
|
opacity: .8;
|
|
content: '';
|
|
}
|
|
|
|
/deep/ .u-dropdown__menu__item__arrow--rotate .uicon-arrow-down {
|
|
border-color: transparent transparent rgb(49, 144, 243) rgb(49, 144, 243);
|
|
}
|
|
|
|
/deep/ .uicon-arrow-down::before {
|
|
display: none;
|
|
}
|
|
|
|
/deep/ .u-dropdown__menu {
|
|
flex-wrap: wrap;
|
|
// height: 166rpx !important;
|
|
box-shadow: none;
|
|
|
|
.u-dropdown__menu__item {
|
|
width: 33%;
|
|
// height: 82rpx;
|
|
flex: initial;
|
|
}
|
|
}
|
|
|
|
.new-nodata {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
>view {
|
|
width: 300rpx;
|
|
height: 300rpx;
|
|
background-image: url('@/static/staffAttendance/nodata.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
>text {
|
|
font-size: 22rpx;
|
|
color: #808080;
|
|
margin-top: 60rpx;
|
|
}
|
|
}
|
|
</style> |