first commit
This commit is contained in:
242
pages/listPage/listPage.vue
Normal file
242
pages/listPage/listPage.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user