243 lines
5.9 KiB
Vue
243 lines
5.9 KiB
Vue
<template>
|
||
<view>
|
||
<u-search placeholder="请输入摄像机名称或者编码" v-model="keyword" @change="change"></u-search>
|
||
<view class="tagsList">
|
||
<view class="u-page__tag-item" v-for="(item, index) in radios" :key="index">
|
||
<u-tag :text="item.type==''?'全部':item.type" :type="item.checked?'success':'info'" :name="index" @click="radioClick(index)">
|
||
</u-tag>
|
||
</view>
|
||
</view>
|
||
<z-paging ref="paging" v-model="dataList" @query="queryList" default-page-no="0">
|
||
<view v-for="(item,index) in dataList" class="cameraItem">
|
||
<u-swipe-action @click="swiperActionClick" :options="options" :index="index"
|
||
@content-click="contentClick">
|
||
<view>
|
||
<view class="cameraItemLi">
|
||
<view>设备编号：</view>
|
||
<view>{{item.number}}</view>
|
||
</view>
|
||
<view class="cameraItemLi">
|
||
<view>设备类型：</view>
|
||
<view>{{item.type}}</view>
|
||
</view>
|
||
<view class="cameraItemLi">
|
||
<view>经度：</view>
|
||
<view v-if="item.longitude">{{item.longitude}}</view>
|
||
<view class="unKnow" v-if="!item.longitude">空</view>
|
||
</view>
|
||
</view>
|
||
</u-swipe-action>
|
||
</view>
|
||
</z-paging>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import config from "../../libs/config/config.js"
|
||
export default {
|
||
data() {
|
||
return {
|
||
radios: [{
|
||
checked: true,
|
||
type:''
|
||
},
|
||
{
|
||
checked: false,
|
||
type:'变焦枪机'
|
||
},
|
||
{
|
||
checked: false,
|
||
type:'高清固定摄像机'
|
||
},{
|
||
checked: false,
|
||
type:'标清固定摄像机'
|
||
},{
|
||
checked: false,
|
||
type:'高清云台摄像机'
|
||
},{
|
||
checked: false,
|
||
type:'标清云台摄像机'
|
||
},{
|
||
checked: false,
|
||
type:'消防栓'
|
||
},{
|
||
checked: false,
|
||
type:'消防炮'
|
||
},{
|
||
checked: false,
|
||
type:'泡沫栓'
|
||
},{
|
||
checked: false,
|
||
type:'炮栓一体'
|
||
},{
|
||
checked: false,
|
||
type:'手动报警器'
|
||
},{
|
||
checked: false,
|
||
type:'消防器材箱'
|
||
},
|
||
],
|
||
keyword: '',
|
||
dataList: [],
|
||
type:'',
|
||
options: [{
|
||
text: '编辑',
|
||
style: {
|
||
backgroundColor: '#3c9cff'
|
||
}
|
||
}, {
|
||
text: '删除',
|
||
style: {
|
||
backgroundColor: '#f56c6c'
|
||
}
|
||
}],
|
||
}
|
||
},
|
||
onShow() {
|
||
//this.$refs.paging.reload();
|
||
},
|
||
onLoad() {},
|
||
methods: {
|
||
contentClick(index) {
|
||
if (this.dataList[index].isDelete) {
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: "当前设备已被删除"
|
||
})
|
||
return;
|
||
}
|
||
this.clickAction(this.dataList[index])
|
||
console.log("=====================contentClick：", index)
|
||
},
|
||
swiperActionClick(index, index1) {
|
||
if (this.dataList[index].isDelete) {
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: "当前设备已被删除"
|
||
})
|
||
return;
|
||
}
|
||
if (index1 == 0) {
|
||
console.log("编辑")
|
||
let url = "../addEquip/addEquip?cameara=" + JSON.stringify(this.dataList[index])
|
||
uni.navigateTo({
|
||
url: url
|
||
});
|
||
}
|
||
if (index1 == 1) {
|
||
console.log("删除")
|
||
console.log(this.dataList[index])
|
||
this.delete(index)
|
||
}
|
||
console.log("=============index:", index)
|
||
console.log("=============index1:", index1)
|
||
},
|
||
delete(index) {
|
||
this.$u.post(config.api + '/delete', {
|
||
id: this.dataList[index].id
|
||
}).then(res => {
|
||
if (res.status = "success") {
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: "操作成功"
|
||
})
|
||
this.dataList[index].isDelete = true;
|
||
this.$refs.paging.reload();
|
||
}
|
||
|
||
});
|
||
},
|
||
queryList(pageNo, pageSize) {
|
||
|
||
//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
||
//这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging
|
||
this.$u.post(config.api + '/xfhrshInternet/service/selfireFacilities', {
|
||
type: this.type,
|
||
number: this.keyword,
|
||
page: String(parseFloat(pageNo) + 1),
|
||
row: String(pageSize),
|
||
}).then(res => {
|
||
console.log(typeof res)
|
||
console.log(res)
|
||
this.$refs.paging.complete(res.data);
|
||
});
|
||
// this.$request.queryList({
|
||
// pageNo,
|
||
// pageSize
|
||
// }).then(res => {
|
||
// //请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
|
||
// this.$refs.paging.complete(res.data.list);
|
||
// }).catch(res => {
|
||
// //如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
|
||
// //注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
|
||
// //在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
|
||
// this.$refs.paging.complete(false);
|
||
// })
|
||
},
|
||
clickAction(item) {
|
||
this.$store.dispatch('setCurrentEquip', {data: item})
|
||
|
||
uni.$emit('updateCamera', {
|
||
cameara: item
|
||
})
|
||
uni.navigateBack()
|
||
},
|
||
change(value) {
|
||
this.keyword = value;
|
||
this.$refs.paging.reload();
|
||
},
|
||
getData(key = "") {
|
||
this.$u.post(config.api + '/camera_list', {
|
||
keyword: this.keyword,
|
||
pageNum: 0,
|
||
pageSize: 10,
|
||
}).then(res => {
|
||
this.camera_list = res;
|
||
});
|
||
},
|
||
radioClick(name) {
|
||
console.log("==============name:",name)
|
||
this.radios.map((item, index) => {
|
||
if(index === name){
|
||
item.checked = true
|
||
this.type = item.type;
|
||
this.$refs.paging.reload();
|
||
}else{
|
||
item.checked = false
|
||
}
|
||
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.tagsList{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
.z-paging-content {
|
||
margin-top: 250rpx;
|
||
}
|
||
|
||
.cameraItem {
|
||
margin: 0 24rpx;
|
||
margin-top: 30rpx !important;
|
||
border: 1px solid #A3A8A8;
|
||
border-radius: 10rpx;
|
||
padding: 10rpx;
|
||
|
||
.cameraItemLi {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
|
||
.unKnow {
|
||
color: red;
|
||
}
|
||
}
|
||
}
|
||
</style>
|