TuBaoSoft-Ui-Zd/pages/home/cameraList/index.vue

<template>
	<view>
		<u-navbar title="监控列表" :background="{ background: '#1669e6' }" title-color="#FFFFFF" back-icon-color="#FFFFFF">
			<view slot="right" v-if="deptName != '外部用户'" style="margin-right: 20rpx;color: #FFFFFF;" @click="addCamera">
				添加设备</view>
		</u-navbar>
		<view style="box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);margin-bottom: 20rpx">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="changetwo"></u-tabs>
		</view>
		<view v-for="(item,index) in dataList" :key="index"
			style="box-shadow: 0px 0px 8px 0px rgba(165, 189, 251, 0.4);width: 96%;border-top-right-radius: 10rpx;margin: 10rpx auto;padding-top: 10rpx;">
			<text
				style="width: 10rpx;height: 40rpx;background-color: #2979ff;display: block;float: left;margin-top: 10rpx;"></text>
			<h4 @click="editDevice(item)"
				style="width: 100rpx;border-radius: 200rpx;text-align: center;color: #2979ff;border: 2rpx solid #1785FF;float: right;margin-right: 10rpx;margin-top: 10rpx;">
				<!-- {{item.createTime.slice(0,10)}} -->
				编辑
			</h4>
			<view style="width: 90%;margin: 0 auto;margin: 0 auto;">
				<view
					style="display: flex;justify-content: space-between;height: 60rpx;line-height: 60rpx;border-bottom: 1rpx solid #eff4ff;">
					<h4>{{item.warehouseName}}</h4>
				</view>
				<view v-for="(li,i) in item.webcam" :key="i">
					<view style="width: 100%;height: 80rpx;line-height: 80rpx;border-bottom: 1rpx solid #eff4ff;" @click="singleView(item,li)">
						<view style="float: left;">设备位置</view>
						<view style="float: right; display: flex;justify-content: space-around;">
							{{li.deviceName}}
							<u-icon name="camera-fill" size="40rpx" color="#707070" style="margin-left: 20rpx;"></u-icon>
						</view>
					</view>
				</view>
				<view
					style="width: 100%;margin: 0 auto;height: 80rpx;margin: 0 auto;line-height: 80rpx;"
					@click="expenseDetails(item)">
					<view style="float: left;">
						<h3>查看全部监控</h3>
					</view>
					<view style="float: right;">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view v-if="dataList.length == 0">
			<view style="margin-top: 65%;" v-if="dataList.length == 0">
				<u-empty mode="page" text="没有可查看的监控" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</u-empty>
			</view>
		</view>
		<!-- <u-action-sheet :list="listData" v-model="show" :mask-close-able="false"></u-action-sheet> -->
		<u-select v-model="show" :list="listData" value-name="fId" @cancel="cancel" @confirm="confirm"
			label-name="text" z-index="10076"></u-select>
		<u-toast ref="uToast" />
		<u-popup v-model="open" @close="open = false" mode="bottom" length="60%" border-radius="40" :closeable="true">
			<view class="content" style="padding: 24rpx;text-align: center;">
				<view
					style="width: 100%;position:fixed;top: 0;text-align: center;height: 100rpx;line-height: 100rpx;background-color: #FFFFFF;">
					<text style="font-weight: bold;font-size: 32rpx;">修改设备信息</text>
				</view>
				<scroll-view scroll-y="true" style="height: 730rpx;margin-top: 100rpx;">
					<view>
						<view v-for="(item,index) in webcam" :key="index"
							style="box-shadow: 0px 0px 8px 0px rgba(230, 230, 230, 1.0);width: 100%;border-top-right-radius: 10rpx;margin: 10rpx auto;padding-top: 10rpx;margin-bottom: 10rpx;">
							<text
								style="width: 10rpx;height: 40rpx;background-color: #2979ff;display: block;float: left;margin-top: 10rpx;"></text>
							<view style="width: 96%;margin: 0 auto;margin: 0 auto;">
								<view
									style="display: flex;justify-content: space-between;height: 60rpx;line-height: 60rpx;border-bottom: 1rpx solid #eff4ff;">
									<h4>设备序列号：{{item.deviceSerial}}</h4>
								</view>
								<view style="width: 100%;">
									<u-field style="padding: 10px 0 10px 0;" v-model="item.deviceName" label="设备名称"
										type="text" placeholder="请填写设备名称">
									</u-field>
									<u-field style="padding: 10px 0 10px 0;" v-model="item.fWarehouseName" label="仓库"
									disabled
									@click="show = true;changeIndex = index"
										type="text" placeholder="请填写设备名称">
									</u-field>
								</view>
							</view>
						</view>
					</view>
					<view class="confrim-btn">
						<u-button type="primary" @click="confirmCompletion">确认修改</u-button>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				webcam: [],
				changeIndex:0,
				current: 0,
				total: 0,
				show: false,
				open: false,
				form: {
					pageNum: 1,
					pageSize: 10
				},
				listData: [],
				deptName: '',
				list: [{
					name: '全部'
				}, {
					name: '仓库'
				}],
			}
		},
		onShow() {
			uni.request({
				url: 'https://open.hikyun.com/artemis/oauth/token/v2', 
				data: {
					"accessKey": "16400485963408782", //开发者账户AppKey
					"secretKey": "mCRWptOImJrehsvfjwkw",
					"productCode": "1640070936703286", //项目产品标识
				},
				method: 'POST',
				success: (res) => {
					console.log(res.data.msg)
					if (res.data.code == 200) {
						uni.setStorageSync('access_token', res.data.data.access_token);
					} else {
						this.$refs.uToast.show({
							title: res.data.msg,
							position: 'bottom'
						})
					}
				}
			});
		},
		created() {
			this.deptName = uni.getStorageSync('deptName')
			this.$u.get('/basicdata/warehouse/appList').then(res => {
				console.log(res)
				for (let item in res.rows) {
					this.listData.push({
						text: res.rows[item].fName,
						fId: res.rows[item].fId
					})
				}
			})
			this.query()
		},
		methods: {
			// 确认修改
			confirmCompletion(){
				this.$u.post('/warehouse/webcam/appEdit',this.webcam).then(res=>{
					this.form = {
						pageNum: 1,
						pageSize: 10
					}
					this.dataList = []
					this.current = 0
					this.open = false
					this.query()
				})
			},
			//编辑设备
			editDevice(item) {
				this.open = true
				this.webcam = JSON.parse(JSON.stringify(item.webcam))
			},
			//仓库筛选
			confirm(item) {
				if(this.open == true){
					this.webcam[this.changeIndex].fWarehouseId = item[0].value
					this.webcam[this.changeIndex].fWarehouseName = item[0].label
				}else{
					this.form = {
						pageNum: 1,
						pageSize: 10,
						fWarehouseId: item[0].value
					}
					this.dataList = []
					this.current = null
					this.query()
				}
			},
			cancel() {
				this.current = null
			},
			changetwo(index) {
				console.log(index)
				if (index === 0) {
					this.dataList = []
					this.form = {
						pageNum: 1,
						pageSize: 10
					}
					this.query()
				} else {
					this.show = true
				}
				this.current = index;
			},
			query() {
				this.$u.get('/warehouse/webcam/appList', this.form).then(res => {
					console.log(res)
					this.dataList = this.dataList.concat(res.rows)
					this.total = res.total
					if (res.total === 0) this.status = 'nomore'
				})
			},
			expenseDetails(item) {
				this.$u.route('/pages/home/cameraList/viewMonitoring', {
					form: JSON.stringify(item)
				});
			},
			singleView(item, li) {
				let data = JSON.parse(JSON.stringify(item))
				data.webcam = []
				data.webcam.push(li)
				this.$u.route('/pages/home/cameraList/viewMonitoring', {
					form: JSON.stringify(data)
				});
			},
			addCamera() {
				this.$u.route('/pages/home/cameraList/addCamera');
			}
		}
	}
</script>

<style>
</style>