- <template>
- <div class="inspectionRiver">
- <!-- 地图组件 -->
- <div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0">
- <newFiberMapBox :PostionValue="AllData.PostionValue"></newFiberMapBox>
- </div>
- <!-- 底部按钮 -->
- <div class="BottomBtn">
- <div class="Btn Btn1" @click="patrolFilling(false)">问题填报</div>
- <div class="Btn Btn3" @click="EndPatrolClick">结束巡查</div>
- </div>
-
- <!-- 巡查填报表单弹窗 -->
- <van-popup v-model:show="AllData.showForm" position="bottom" closeable :style="{ width: '100%', height: '90%' }">
- <div class="TaskTItle" v-if="AllData.showForm">问题填报</div>
- <TaskForm
- class="DakaPropID"
- v-if="AllData.showForm"
- @closeFormTransition="closeFormTransition"
- :numberNum="AllData.numberNum"
- :projectName="AllData.projectName"
- :projectCode="AllData.projectCode"
- :isDisable="AllData.isDisable"
- />
- </van-popup>
- <!-- 结束巡查 -->
- <van-popup v-model:show="AllData.showCancel" position="bottom" closeable :style="{ width: '100%', height: '30%' }">
- <div class="QxBox">
- <div class="Titlediv">确认结束巡查吗?</div>
- <!-- <div class="Contentdiv"></div> -->
- <div class="QxBoxBtn">
- <van-button round @click="TaskCancelPatrol"> 结束巡查 </van-button>
- </div>
- </div>
- </van-popup>
- </div>
- </template>
-
- <script setup>
- import { reactive, ref, getCurrentInstance, watch, onMounted, onBeforeUnmount } from 'vue';
- import { timestampToTime, checkUserSystem, getCurrentPositon } from '@/utils/common.js';
- import { patrolTaskFinishPatrol, PatrolTaskID } from '@/api/xuncha';
- import CoordTransform from '@/utils/gis/CoorTransform.js';
- import WKT from 'terraformer-wkt-parser';
- import * as turf from '@turf/turf';
- import { useRouter, useRoute } from 'vue-router';
- import { useStore } from '@/pinia/store.js';
- import TaskForm from './TaskForm'; // 表单组件
- import newFiberMapBox from '@/views/xuncha/gisCommonPage/newFiberMapBox.vue';
- import user from '@/assets/images/patroLog/user.png';
- const router = useRouter();
- const route = useRoute();
- const pinias = useStore();
-
- const props = defineProps({
- patrolLogId: String,
- MarkForData: Object,
- });
- const { proxy } = getCurrentInstance();
- const AllData = reactive({
- taskID: '', //当前巡检任务ID
- longitudeNow: '',
- latitudeNow: '',
- numberNum: '',
- projectName: '',
- projectCode: '',
- IntervalKry: '', //定时器ID--获取经纬度信息
- TimerArray: [], //记录定时器数据
- num: 0,
- videoSrc: '',
- status: false,
- showForm: false, //表单弹窗显隐状态
- modeClass: ['slide-bottom'],
- countDown: 3, //倒计时时间长度
- timeOutID: null,
- NoticeFont: null, //顶部标题内容
- ScopeValue: false, //当前是否在可以打卡范围内
- patrolSectionId: null, //当前的巡查段编号
- patrolLogId: null, //当前的日志编号
- DaKaPopupShow: false, //打卡弹窗组件的加载状态
- EndPatrolShow: false, //结束巡查组件的加载状态
- socketOpen: false, //判断socket 的在线情况
- socketMsgQueue: [],
- PostionValue: {
- userName: null,
- lonLat: null,
- refType: null,
- refid: null,
- patrolDatetime: null,
- },
- option: {
- type: null,
- num: null,
- id: null,
- sectionType: null,
- }, //父页面传过来的按钮信息
- patrolPathLngLat: [], //当前巡检详情中已经巡检的路径
- MarkForData: {}, //点击图标获取到的数据
- isDisable: false, //弹窗内容是否为只读
- isOne: true, //第一次进入页面
- websock: null,
- showCancel: false, //取消的弹窗组件
- DaKaPopup: false, // 打卡的弹窗组件
- oldLonLat: {
- lon: null,
- lat: null,
- }, //储存的旧数据
- currentPath: [],
- });
-
- /**
- * 问题填报
- */
- const patrolFilling = (val) => {
- // console.log(val, 'valvalval');
- AllData.isDisable = val;
- AllData.showForm = !AllData.showForm;
- };
-
- // 结束巡查点击弹框
- const EndPatrolClick = () => {
- AllData.showCancel = true;
- };
-
- // 关闭
- const closeFormTransition = (msg) => {
- AllData.showForm = false;
- // console.log(`案件弹窗关闭事件`, msg);
- if (msg == 'AnJianUpdatas') {
- // 通知地图刷新
- // TaskMapRef.value.MaskUpdata(2);
- }
- };
-
- // 结束巡查关闭
- const TaskCancelPatrol = () => {
- getCurrentPositon((lng, lat, address) => {
- // console.log('获取安卓定位参数--', address);
- // 获取当前巡检任务的所有轨迹信息
- // patrolTaskId(route.query.id).then((res) => {
- // if (res && res.code == 200) {
- // let lengthKm = 0;
- // if (!!res.data.patrolPath) {
- // lengthKm = turf.length(WKT.parse(res.data.patrolPath));
- // } else {
- // lengthKm = 0;
- // }
- let param = {
- endPlace: address,
- // patrolTaskId: props.taskID,
- patrolLogId: route.query.id,
- patrolTaskId: route.query.id,
- // patrolName: AllData.formData.NoticeFont,
- // fileSaveRequestList: AllData.PicListData.concat(AllData.PicListData2),
- // logContent: AllData.formData.caseContent,
- // patrolLength: Number(lengthKm).toFixed(1),
- };
- patrolTaskFinishPatrol(param).then((res) => {
- if (res?.code == 200) {
- proxy.showSuccessToast('结束成功');
- router.go(-1);
- stopAndIosLocation(); // 原生安卓、ios结束websocket推送
- clearInterval(AllData.IntervalKry);
- }
- });
- // }
- // });
- });
- };
-
- // 原生安卓、ios结束websocket推送
- function stopAndIosLocation() {
- console.log('结束websocket---');
- let systems = checkUserSystem();
- if (systems == 'Android') {
- console.log('安卓结束websocket---');
- window.android.disconnect(String(route.query.id));
- } else if (systems == 'IOS') {
- console.log('ios结束websocket---');
- window.webkit.messageHandlers.stopLocation.postMessage({ data: { refid: route.query.id } });
- }
- }
- // 开始巡检--阶段性获取经纬度变化信息
- const startGetPosition = () => {
- getPostionNow();
- newfiberMap.map.setCenter(AllData.PostionValue.lonLat.split(',').map(Number));
- AllData.IntervalKry = setInterval(() => {
- getPostionNow();
- console.log('AllData.PostionValue.lonLat--', AllData.PostionValue.lonLat);
- AllData.currentPath.push(AllData.PostionValue.lonLat.split(',').map(Number));
- // console.log('AllData.currentPath--', AllData.currentPath);
- if (!newfiberMap || !newfiberMap.map) return;
- //渲染当前位置
- let currentPositionGeojson = {
- type: 'FeatureCollection',
- features: [turf.point(AllData.PostionValue.lonLat.split(',').map(Number))],
- };
- if (!newfiberMap.map.getLayer('currentPosition')) {
- addCurrentPoint(currentPositionGeojson, 'currentPosition', user);
- } else {
- newfiberMap.map.getSource('currentPosition').setData(currentPositionGeojson);
- }
- if (AllData.currentPath.length > 1) {
- let currentPathGeojson = {
- type: 'FeatureCollection',
- features: [turf.lineString(AllData.currentPath)],
- };
- if (!newfiberMap.map.getLayer('currentLine')) {
- addCurrentLine(currentPathGeojson, 'currentLine');
- } else {
- newfiberMap.map.getSource('currentLine').setData(currentPathGeojson);
- }
- }
- }, 1000);
- };
- //添加轨迹线
- const addCurrentLine = (geojson, layerId) => {
- newfiberMap.map.addSource(layerId, {
- type: 'geojson',
- data: geojson,
- });
- newfiberMap.map.addLayer({
- id: layerId,
- type: 'line',
- source: layerId,
- paint: {
- 'line-color': 'rgba(35, 217, 110,1)',
- 'line-width': 3,
- },
- });
- };
- //绘制当前坐标点
- const addCurrentPoint = (geojson, layerId, Icon) => {
- newfiberMap.map.loadImage(Icon, (error, image) => {
- if (error) throw error;
- newfiberMap.map.addImage(layerId + 'icon', image);
- });
- newfiberMap.map.addSource(layerId, {
- type: 'geojson',
- data: geojson,
- });
- newfiberMap.map.addLayer({
- id: layerId,
- type: 'symbol',
- source: layerId,
- layout: {
- 'icon-image': layerId + 'icon',
- 'icon-size': 0.2,
- 'icon-offset': [0, 0],
- 'icon-allow-overlap': true,
- },
- });
- };
- /**
- * 获取当前定位
- */
- const getPostionNow = () => {
- AllData.PostionValue = {
- patrolDatetime: null,
- lonLat: null,
- refType: null,
- refid: null,
- userName: null,
- };
- getCurrentPositon((lng, lat, address) => {
- // console.log('获取安卓定位参数--', address);
- let timer = timestampToTime(Date.now());
- let NewLonLat = CoordTransform.gcj02towgs84(Number(lng), Number(lat));
- AllData.PostionValue = {
- patrolDatetime: timer,
- lonLat: NewLonLat[0] + ',' + NewLonLat[1],
- refType: 'patrolLog',
- refid: AllData.patrolLogId,
- userName: pinias.userName,
- };
- // console.log(AllData.PostionValue, 'AllData.PostionValue');
- });
- };
- /**
- * 获取当前巡检任务详情
- */
- const getInspectionInfo = (id) => {
- PatrolTaskID(id).then((res) => {
- if (res && res.code == 200) {
- AllData.numberNum = res.data.number;
- AllData.projectName = res.data.projectName;
- AllData.projectCode = res.data.projectCodes;
- AllData.gujiData = res.data.patrolPathLngLat;
- console.log(AllData.gujiData, 'AllData.gujiData');
- // 保存当前巡检ID
- AllData.taskID = res.data.id;
- // 保存当前巡查段编号
- // AllData.patrolSectionId = res.data.patrolSectionId;
- // console.log(AllData.patrolSectionId, '2 ');
- // 保存日志编号
- AllData.patrolLogId = res.data.patrolLogId;
- // 保存巡检记录
- AllData.patrolPathLngLat = res.data.patrolPathLngLat;
- // AllData.patrolLogId = '1630380590036803588'
- startGetPosition(); //开始获取原生定位
- sendSocketMessage(); //安卓、ios原生发送websocket
- //clearInterval(AllData.IntervalKry);
- }
- });
- };
-
- // 通过socket 发送数据
- const sendSocketMessage = (msg) => {
- let systems = checkUserSystem();
- if (systems == 'Android') {
- console.log('安卓发送websocket---');
- let timer = timestampToTime(Date.now());
- let initObj = {
- patrolDatetime: timer,
- lonLat: '',
- refType: 'patrolLog',
- refid: AllData.patrolLogId,
- userName: pinias.userName,
- };
- console.log('安卓发送websocket111---', initObj);
- //给Android发送参数,通知给后端发送websocket
- window.android.initwebSocket(JSON.stringify(initObj));
- } else if (systems == 'IOS') {
- console.log('IOS开始发送websocket---');
- let timer = timestampToTime(Date.now());
- let initObj = {
- callId: 'sendCurrentLocationIOS',
- data: {
- patrolDatetime: timer,
- lonLat: '',
- refType: 'patrolLog',
- refid: AllData.patrolLogId,
- userName: pinias.userName,
- },
- };
- //给ios发送参数,通知给后端发送websocket
- window.webkit.messageHandlers.sendLocation.postMessage(initObj);
- }
- };
-
- watch(
- route,
- (val) => {
- console.log(route.query.id, 'route.query.id');
- if (!!!route.query.id) return;
- setTimeout(() => {
- //option为object类型,会序列化上个页面传递的参数
- console.log('传递的参数222--', route.query.id); //打印出上个页面传递的参数。
- //获取当前巡检任务详情
- getInspectionInfo(route.query.id);
- });
- },
- { immediate: true }
- );
- onMounted(() => {
- setTimeout(() => {
- if (newfiberMap.map.getLayer('point_start')) {
- newfiberMap.map.removeLayer('point_start');
- newfiberMap.map.removeLayer('point_end');
- newfiberMap.map.removeLayer('recordLineGeojson');
- newfiberMap.map.removeSource('point_start');
- newfiberMap.map.removeSource('point_end');
- newfiberMap.map.removeSource('recordLineGeojson');
- }
- if (newfiberMap.map.getLayer('dynamicPepoleGeojson')) {
- newfiberMap.map.removeLayer('dynamicPepoleGeojson');
- newfiberMap.map.removeSource('dynamicPepoleGeojson');
- }
- }, 1000);
- });
- </script>
-
- <style lang="less">
- .inspectionRiver {
- width: 100%;
- height: calc(100vh - var(--van-nav-bar-height));
- position: relative;
- // background: red;
-
- // 底部三个按钮
- .BottomBtn {
- width: calc(100% - 52px);
- height: 140px;
- background: rgba(255, 255, 255, 0.7);
- box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
- border-radius: 10px 10px 10px 10px;
- opacity: 1;
- position: absolute;
- bottom: 100px;
- left: 26px;
- box-sizing: border-box;
- display: flex;
- align-content: space-around;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: space-evenly;
- z-index: 111;
- .Btn {
- width: 190px;
- height: 86px;
- line-height: 86px;
- text-align: center;
- border-radius: 9px 9px 9px 9px;
- opacity: 1;
- }
-
- .Btn1 {
- background: #409eff;
- font-size: 32px;
- font-family: Source Han Sans CN-Regular, Source Han Sans CN;
- font-weight: 400;
- color: #ffffff;
- }
-
- .Btn2 {
- border: 2px solid #409eff;
- background: #eef6ff;
- font-size: 32px;
- font-family: Source Han Sans CN-Regular, Source Han Sans CN;
- font-weight: 400;
- color: #409eff;
- }
-
- .Btn3 {
- background: #fff3f3;
- border: 2px solid #ea0000;
- font-size: 32px;
- font-family: Source Han Sans CN-Regular, Source Han Sans CN;
- font-weight: 400;
- color: #ea0000;
- }
- }
- // 确认取消弹窗
- .QxBox {
- width: 100%;
- height: 350px;
- background-color: #ffffff;
-
- .Titlediv {
- width: 100%;
- height: 80px;
- line-height: 80px;
- text-align: center;
- font-size: 32px;
- font-family: Source Han Sans CN-Regular, Source Han Sans CN;
- font-weight: 400;
- box-sizing: border-box;
- padding: 0 20px;
- position: relative;
- border-bottom: 1px solid #ececec;
- }
- .QxBoxBtn {
- width: 100%;
- height: calc(350px - 80px);
- // background: red;box-sizing: border-box;
- display: flex;
- align-content: space-around;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: space-evenly;
- }
- }
- .TaskTItle {
- width: 100%;
- height: 80px;
- text-align: center;
- line-height: 80px;
- background: #fdfdfd;
- position: relative;
- font-size: 32px;
- font-family: Source Han Sans CN-Regular, Source Han Sans CN;
- font-weight: 400;
-
- .ClearClass {
- position: absolute;
- right: 10px;
- top: 0;
- }
- }
- }
- </style>