tqApp-webView/pages/realtimeWatch/module/vehInfo.vue

<template>
<view>
    <u-popup :show="isShow" @close="close" :closeOnClickOverlay="true" :overlay="false" :closeable="true">
		
		<view class="container" v-if="codeType == 'vehicle'">
			
			<template v-if="renderItem(item,'vehTypeName') == '矿卡'">
				<u--form label-width="auto" labelAlign="right"
					:labelStyle="{
						fontSize: '28rpx',
						fontWeight: '700',
					}"
				>
					<u-row>
						<u-col :span="8">
							<u-form-item label="车牌号：" >
								{{renderItem(item,'label','--')}}
							</u-form-item>
						</u-col>
						<!-- <u-col :span="4">
							<u-form-item label="速度：" >
								{{renderItem(item,'speed','--')}}km/h
							</u-form-item>
							
						</u-col> -->
					</u-row>
					
					<u-row>
						<u-col :span="6">
							<u-form-item label="驾驶员：" >
								{{renderItem(item,'driverName','--')}}
							</u-form-item>
						</u-col>
						<u-col :span="6">
							<u-form-item label="联系方式：" >
								{{renderItem(item,'driverTel','--')}}
							</u-form-item>
						</u-col>
					</u-row>
					
					<u-row>
						<u-col :span="6">
							<u-form-item label="所属单位：" >
								{{renderItem(item,'deptName','--')}}
							</u-form-item>
						</u-col>
						<u-col :span="6">
							<u-form-item label="车型：" >
								{{renderItem(item,'vehTypeName','--')}}
							</u-form-item>
						</u-col>
					</u-row>
					
					
					<u-form-item label="当前载重：" >
						{{renderItem(item,'','--')}}
					</u-form-item>
					<u-form-item label="位置：" >
						{{renderItem(item,'location','--')}}
					</u-form-item>
				</u--form>
				
				<u-row style="margin: 20rpx 0;">
					<u-col :span="2.5">
						<u-button type="primary" :plain="false" 
							text="今日轨迹" size="small" shape="circle"
							@click="goHistory(item,'vehicle','today')"
						>
						</u-button>
					</u-col>
					<u-col :span="2.5" :offset="0.4">
						<u-button type="primary" :plain="false" 
							text="近5h轨迹" size="small" shape="circle"
							@click="goHistory(item,'vehicle','five')"
						>
						</u-button>
					</u-col>
					<u-col :span="2.5" :offset="0.4" v-if="renderItem(item,'isVideo','') == 1">
						<u-button type="primary" :plain="false" 
							text="实时监控" size="small" shape="circle"
							@click="goVideo(item)"
						>
						</u-button>
					</u-col>
				    <u-col :span="2.5" :offset="0.4" v-if="renderItem(item,'isVideo','') == 1">
						<u-button type="primary" :plain="false" 
							text="视频回放" size="small" shape="circle"
							@click="goBackVideo(item)"
						>
						</u-button>
					</u-col>
				</u-row>
			</template>
			<template v-else-if="renderItem(item,'vehTypeName') == '挖机'">
				<u--form label-width="auto" labelAlign="right"
					:labelStyle="{
						fontSize: '28rpx',
						fontWeight: '700',
					}"
				>
					<u-row>
						<u-col :span="8">
							<u-form-item label="车牌号：" >
								{{renderItem(item,'label','--')}}
							</u-form-item>
						</u-col>
						<!-- <u-col :span="4">
							<u-form-item label="速度：" >
								{{renderItem(item,'speed','--')}}km/h
							</u-form-item>
							
						</u-col> -->
					</u-row>
					
					<u-row>
						<u-col :span="6">
							<u-form-item label="驾驶员：" >
								{{renderItem(item,'driverName','--')}}
							</u-form-item>
						</u-col>
						<u-col :span="6">
							<u-form-item label="联系方式：" >
								{{renderItem(item,'driverTel','--')}}
							</u-form-item>
						</u-col>
					</u-row>
					
					<u-row>
						<u-col :span="6">
							<u-form-item label="所属单位：" >
								{{renderItem(item,'deptName','--')}}
							</u-form-item>
						</u-col>
						<u-col :span="6">
							<u-form-item label="车型：" >
								{{renderItem(item,'vehTypeName','--')}}
							</u-form-item>
						</u-col>
					</u-row>
					
					<u-row>
						<u-col :span="6">
							<u-form-item label="需等待时长：" >
								{{renderItem(info,'needTime','--')}}
							</u-form-item>
						</u-col>
						<u-col :span="6">
							<u-form-item label="附近等待车数：" >
								<div class="hover-click" @click="openWaitCarList(info,true)">
									{{renderItem(info,'waitNum','--')}}
								</div>
							</u-form-item>
						</u-col>
					</u-row>
					
					
				</u--form>
				
				<u-row style="margin: 20rpx 0;">
					<u-col :span="2.5">
						<u-button type="primary" :plain="false" 
							text="今日轨迹" size="small" shape="circle"
							@click="goHistory(item,'vehicle','today')"
						>
						</u-button>
					</u-col>
					<u-col :span="2.5" :offset="0.4">
						<u-button type="primary" :plain="false" 
							text="近5h轨迹" size="small" shape="circle"
							@click="goHistory(item,'vehicle','five')"
						>
						</u-button>
					</u-col>
					<u-col :span="2.5" :offset="0.4" v-if="renderItem(item,'isVideo','') == 1">
						<u-button type="primary" :plain="false" 
							text="实时监控" size="small" shape="circle"
							@click="goVideo(item)"
						>
						</u-button>
					</u-col>
				    <u-col :span="2.5" :offset="0.4" v-if="renderItem(item,'isVideo','') == 1">
						<u-button type="primary" :plain="false" 
							text="视频回放" size="small" shape="circle"
							@click="goBackVideo(item)"
						>
						</u-button>
					</u-col>
				</u-row>
			</template>
			<template v-else>
				<u--form label-width="auto" labelAlign="right"
					:labelStyle="{
						fontSize: '28rpx',
						fontWeight: '700',
					}"
				>
					<u-row>
						<u-col :span="8">
							<u-form-item label="车牌号：" >
								{{renderItem(item,'label','--')}}
							</u-form-item>
						</u-col>
						<u-col :span="4">
							<u-form-item label="速度：" >
								{{renderItem(item,'speed','--')}}km/h
							</u-form-item>
							
						</u-col>
					</u-row>
					
					<u-row>
						<u-col :span="6">
							<u-form-item label="司机：" >
								{{renderItem(item,'driverName','--')}}
                <view class="my-col" style="width: 50%;display: flex;justify-content: flex-end" @click="callPhone">
                  <image
                    src="@/static/icon/phone.png"
                    style="width: 30rpx; height: 30rpx"
                  ></image>
				  
				  
                  <!-- <text
                    class="routine-text"
                    @click="callPhone(item)"
                    style="font-size: 32rpx"
                    >{{ item.driverTel }}</text
                  > -->
                </view>
							</u-form-item>
						</u-col>
						
						<u-col :span="3" :offset="2">
							
							<u-button type="primary" :plain="false" v-if="!intercomState"
								text="对讲" size="small" shape="circle"
								@click="handleTask(item)"
							>
							</u-button>
							
							<u-button type="warning " :plain="false" v-if="intercomState"
								text="挂断" size="small" shape="circle"
								@click="handleTask(item)"
							>
							</u-button>
							
						
						</u-col>
						
					</u-row>
					
					<u-form-item label="最新回传：" >
						{{renderItem(item,'gspTime','--')}}
					</u-form-item>
					<u-form-item label="备注：" >
						{{renderItem(item,'remark','--')}}
            <view class="my-col" style="margin-left: 20rpx; display: flex;align-items: center;">
              <image
                src="@/static/icon/edit.png"
                style="width: 30rpx; height: 30rpx"
              ></image>
              <text
                class="routine-text"
                style="margin-left: 5rpx;font-size: 28rpx; color: #498cff"
                @click="remarkEdit"
              >编辑</text>
            </view>
					</u-form-item>
					<u-form-item label="位置：" >
						{{renderItem(item,'location','--')}}
					</u-form-item>
				</u--form>
				
				<u-row style="margin: 20rpx 0;">
					<u-col :span="2.5">
						<u-button type="primary" :plain="false" 
							text="今日轨迹" size="small" shape="circle"
							@click="goHistory(item,'vehicle','today')"
						>
						</u-button>
					</u-col>
					<u-col :span="2.5" :offset="0.4">
						<u-button type="primary" :plain="false" 
							text="近5h轨迹" size="small" shape="circle"
							@click="goHistory(item,'vehicle','five')"
						>
						</u-button>
					</u-col>
					<u-col :span="2.5" :offset="0.4" v-if="renderItem(item,'isVideo','') == 1">
						<u-button type="primary" :plain="false" 
							text="实时监控" size="small" shape="circle"
							@click="goVideo(item)"
						>
						</u-button>
					</u-col>
				    <u-col :span="2.5" :offset="0.4" v-if="renderItem(item,'isVideo','') == 1">
						<u-button type="primary" :plain="false" 
							text="视频回放" size="small" shape="circle"
							@click="goBackVideo(item)"
						>
						</u-button>
					</u-col>
				</u-row>
			</template>
			
		</view>
		
		<view class="container" v-if="codeType == 'people'">
			<u--form label-width="auto" labelAlign="right"
				:labelStyle="{
					fontSize: '28rpx',
					fontWeight: '700',
				}"
			>
				<u-row>
					<u-col :span="8">
						<u-form-item label="姓名：" >
							{{renderItem(item,'label','--')}}
						</u-form-item>
					</u-col>
					<u-col :span="4">
						<u-form-item label="速度：" >
							{{renderItem(item,'speed','--')}}m/h
						</u-form-item>
						
					</u-col>
				</u-row>
				
			
				<u-form-item label="最新回传：" >
					{{renderItem(item,'gspTime','--')}}
				</u-form-item>
				<u-form-item label="备注：" >
					{{renderItem(item,'remark','--')}}
				</u-form-item>
				<u-form-item label="位置：" >
					{{renderItem(item,'location','--')}}
				</u-form-item>
			</u--form>
			
			<u-row style="margin: 20rpx 0;">
				<u-col :span="3" :offset="1">
					<u-button type="primary" :plain="false" 
						text="今日轨迹" size="small" shape="circle"
						@click="goHistory(item,'personnel','today')"
					>
					</u-button>
				</u-col>
				<u-col :span="3" :offset="1">
					<u-button type="primary" :plain="false" 
						text="近5h轨迹" size="small" shape="circle"
						@click="goHistory(item,'personnel','five')"
					>
					</u-button>
				</u-col>
				
			</u-row>
		</view>
		
	
	</u-popup>
  <u-modal
      :show="remarkShow"
      title="备注信息"
      show-cancel-button
      @confirm="updateRemark"
      @cancel="cancelRemark"
    >
      <view class="slot-content">
        <u--textarea v-model="remarkValue" placeholder="请输入备注信息" class="text-warp"></u--textarea>
      </view>
    </u-modal>
	
	<vehList ref="vehListRef"></vehList>
	
	 <intercom ref="intercom" @oNstate="(e)=>intercomState=e"></intercom>
</view>
</template>

<script>
import {isArray,clone,isObject } from 'lodash'
import {getImages} from '@/plugins/images'
import {copyProps,clearProps} from '@/utils/gdtq.js'
import vehList from './vehList.vue'
import { queryRangeVeh, updateVehRemark, updateCleanRemark } from '@/api/realtimeWatch.js'
import Intercom from '@/components/Intercom'

export default {
	components: {
		vehList,
		Intercom,
	},
    data() {
        return {
			isShow: false,
			item: null,
			codeType: 'vehicle',
			info: null,
		  remarkShow: false,
		  remarkValue: "",
		   intercomState:false,//对接状态
        }
    },
	mounted() {
		
	},
	
  methods: {
		  handleTask(item) {
			 this.$refs.intercom.toIntercom(item.deviceId);//13306349381
		  },
		openWaitCarList(info) {
			this.$refs.vehListRef.show(info)
		},
		show(e) {
			console.log(e,'e')
			let {id} = e
			this.getVehicleDetail(id)
			setTimeout(() => {
				this.isShow= true;
				this.item = e
				this.codeType = e.code;
			},50)		
		},
		close() {
		    this.isShow = false
		},
		
		/* 获取车辆详情 */
		async getVehicleDetail(vehicleId) {
		   let {data} = await queryRangeVeh({vehicleId})
		   this.info = data
		},
		
		
		// 跳到历史轨迹
		goHistory(item,tabStyleType,time) {
		   let params = {
		      tabStyleType
		   }
		   if (tabStyleType == 'vehicle') {
		      params.vehicleId = item.id
		   } else if (tabStyleType == 'personnel') {
		      params.userId = item.id
		   }
		   if (time=='today') {
		      let s_time = this.dayjs().format('YYYY-MM-DD')
		      let startTime = `${s_time} 00:00`;
		      let endTime = `${s_time} 23:59`;
		      params.time = [startTime,endTime]
		   } else if (time=='five') {
		      let startTime = this.dayjs().subtract(5, 'hour').format('YYYY-MM-DD HH:mm');
		      let endTime = this.dayjs().format('YYYY-MM-DD HH:mm');
		      params.time = [startTime,endTime]
		   }
		   
			
			this.$store.dispatch('setParams',params)
			
			uni.navigateTo({
			  url: '/pagesMap/pastRoute/pastRoute',
			});
		  
		},
		goVideo(item) {
			const {id} = item;
			uni.navigateTo({
			  url: `/pagesVideo/monitor/monitor?id=${id}`,
			});
		},
        goBackVideo(item) {
			const {id} = item;
			uni.navigateTo({
			  url: `/pagesVideo/h5playback/index?vehicleId=${id}`,
			});
		},
    callPhone(){
      if(!this.info.driverTel){
        uni.$u.toast('号码不能为空')
        return;
      }
      uni.makePhoneCall({
        phoneNumber: this.info.driverTel //仅为示例
      });
    },
    remarkEdit(){
      // 备注编辑
      this.remarkShow = true;
      this.remarkValue = this.item.remark;
    },
    async updateRemark() {
      let obj = {
        vehicleId: this.item.id,
        remark: this.remarkValue,
      };
      let res = await updateVehRemark(obj)
      if (res.code == "0") {
        uni.$u.toast("修改备注成功");
        this.item.remark = this.remarkValue;
        this.cancelRemark()
      }
    },
    cancelRemark(){
      this.remarkShow = false;
      this.remarkValue=''
    }
	   
  },

}
</script>

<style lang="scss" scoped>
	.hover-click {
	   cursor: pointer;
	   color: #05C0F1;
	   text-decoration: underline;
	}
	
	.container {
		background: #fff;
		padding: 60rpx 0 0 20rpx;
		
		font-size: 28rpx;
	}
	.slot-content{
    width: 100%;
  }
	

</style>