zhxf-app/pages/deviceDetail/deviceDetail.vue

<template>
	<view>
		<view class="timeBox flex justify-between align-center padding-lr-sm">
			<view class="time">{{getData.owner_name}}</view>
			<!-- <button class="cu-btn radius bg-offLine sm">
				<view class="radiusStatus offLine"></view>
				离线
			</button> -->
		</view>

		<view>
			<!-- 基本信息start -->
			<view class="basic-info">
				<view class="info-tit margin-left-xs">
					<text class="cuIcon-titles margin-right-xs"></text>
					基本信息
				</view>
				<view class="info-content">
					<view class="info-one-info ">
						<text>设备类型：</text>
						<text>{{getData.type_name}}</text>
					</view>

					<view>
						<text>设备编号：</text>
						<text>15221</text>
					</view>
					<view>
						<text>物联网卡号：</text>
						<text>{{getData.sim}}</text>
					</view>
					<view>
						<text>安装位置：</text>
						<text>{{getData.unitinfo}}</text>
					</view>
					<view>
						<text>添加时间：</text>
						<text>{{getData.install_time}}</text>
					</view>
					<view>
						<text>设备地址：</text>
						<text>{{getData.owner_address}}</text>
					</view>
				</view>
			</view>
			<!-- 基本信息end -->

			<!-- 报警主机图表start -->
			<view class="processStatus" v-if="this.getData.dwtype==1">
				<view class="info-tit margin-left-xs">
					<text class="cuIcon-titles margin-right-xs"></text>
					图表
				</view>
				<view class="info-content">
					<chart :bindData="staticData"></chart>
				</view>
			</view>
			<!-- 报警主机图表end -->



			<!-- 报警主机图表start -->
			<view class="processStatus" v-if="this.getData.dwtype==2">
				<view class="info-tit margin-left-xs">
					<text class="cuIcon-titles margin-right-xs"></text>
					图表
				</view>
				<view class="info-content">
					<water-chart :bindData="getData"></water-chart>
				</view>
			</view>
			<!-- 报警主机图表end -->


			<view class="processStatus" v-if="this.getData.dwtype!=1&&this.getData.dwtype!=2">
				<view class="info-tit margin-left-xs">
					<text class="cuIcon-titles margin-right-xs"></text>
					表格
				</view>

				<!-- 电气火灾start -->
				<fire-table v-if="this.getData.dwtype==7" :bindData="getFireData"></fire-table>
				<!-- 电气火灾end -->

				<!-- RTU start -->
				<view v-if="this.getData.dwtype==6" class="info-content padding" style="overflow:auto;width:97%">
					<table style="width:140%">
						<tr>
							<th>名称</th>
							<th>类型</th>
							<th>端口</th>
							<th>状态</th>
							<th>最后上传时间</th>
						</tr>
						<tr v-for="(item,index) in this.rtu_data" :key="index">
							<td>{{item.data4}}</td>
							<td>{{item.types}}</td>
							<td>{{item.ncmd}}</td>
							<td>{{item.data2}}</td>
							<td>{{item.time}}</td>
						</tr>
					</table>
				</view>
				<!-- RTU end -->

				<!-- 视频 start -->
				<view v-if="this.getData.dwtype==16" class="info-content padding">
					<table>
						<tr>
							<th>最后上传值</th>
							<th>最后上传时间</th>

						</tr>
						<tr>
							<td>{{this.video_data.data4}}</td>
							<td>{{this.video_data.time}}</td>

						</tr>
					</table>
				</view>
				<!-- 视频 end -->

				<!-- 井盖 start -->
				<view v-if="this.getData.dwtype==128" class="info-content padding">
					<table>
						<tr>
							<th>最后上传值</th>
							<th>最后上传时间</th>
						</tr>
						<tr>
							<td>{{this.mc_data.data4}}</td>
						</tr>
					</table>
				</view>
				<!-- 井盖 end -->
				
				<!-- 消防栓 start -->
				<view v-if="this.getData.dwtype==4" class="info-content padding">
					<table>
						<tr>
							<th>最后上传值</th>
							<th>最后上传时间</th>
						</tr>
						<tr>
							<td>
							<!-- {{this.getData.device_status}} -->
							</td>
							<td>{{this.getData.stime}}</td>
						</tr>
					</table>
				</view>
				<!-- 消防栓 end -->
				
				<!-- 液位 start -->
				<view v-if="this.getData.dwtype==5" class="info-content padding">
					<table>
						<tr>
							<th>液位水位值</th>
							<th>液位统计时间</th>
						</tr>
						<tr>
							<td>
							{{this.getData.water_data?this.getData.water_data:'-'}}
							</td>
							<td>{{this.getData.stime?this.getData.stime:'-'}}</td>
						</tr>
					</table>
				</view>
				<!-- 液位 end -->



			</view>


			<!-- 表格start -->
			<!-- <table-detail v-if="this.getData.dwtype==4"></table-detail> -->
			<!-- 表格end -->





			<br>
		</view>


	</view>
</template>

<script>
	import chart from './components/chart.vue';
	import waterChart from './components/waterChart.vue';
	import tableDetail from './components/table-detail.vue';
	import fireTable from './components/fireTable.vue';
	export default {
		components: {
			chart,
			waterChart,
			tableDetail,
			fireTable

		},
		data() {
			return {
				getData: {},
				mc_data: {},
				video_data: {}
			}
		},
		onLoad: function(option) {
			this.getDeviceDetails({
				"id": option.id
			})
		},
		methods: {
			// 设备详情数据请求
			async getDeviceDetails(params = {}) {
				const res = await this.$myRequest({
					url: 'DeviceManagement/getDeviceDetails',
					data: params,
					showLoading: true
				})
				this.getData = res.data.data[0];
				this.staticData = res.data.data[0]


				this.getFireData = res.data.data[0].electric_data;
				this.rtu_data = res.data.data[0].rtu_data;
				if (this.getData.dwtype == 16) {
					this.video_data = res.data.data[0].video_data[0];
				}
				if (this.getData.dwtype == 128) {
					this.mc_data = res.data.data[0].mc_data[0];
				}
				console.log(this.mc_data);
			},


		}
	}
</script>

<style lang="scss">

</style>