- <template>
- <div class="first">
- <div class="ditu">
- <gisMap2D style="position: relative" :initJson="`/static/libs/mapbox/style/projectIndex.json`" @map-click="clickMap"></gisMap2D>
- </div>
- <!-- 类容 -->
- <div class="dialog-form-detail flex flex-r flex-wrap" style="margin-top: 5px">
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">巡查任务名称11</div>
- <div class="detail-value flex flex-align-center">
- {{ props.DataList.taskName }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">巡查人员</div>
- <div class="detail-value flex flex-align-center">{{ props.DataList.taskUserList[0].userName }}</div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">巡查开始时间</div>
- <div class="detail-value flex flex-align-center">{{ props.DataList.planStartDatetime }}</div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">巡查结束时间</div>
- <div class="detail-value flex flex-align-center">{{ props.DataList.planEndDatetime }}</div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">任务状态</div>
- <div class="detail-value flex flex-align-center">
- <span>
- {{
- props.DataList.status == 'to_start'
- ? '未开始'
- : props.DataList.status == 'proceed'
- ? '进行中'
- : props.DataList.status == 'done'
- ? '已完成'
- : props.DataList.status == 'expired'
- ? '超时'
- : ''
- }}
- </span>
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">超时时间</div>
- <div class="detail-value flex flex-align-center">{{ props.DataList.expiredDays }}</div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">任务下发时间</div>
- <div class="detail-value flex flex-align-center">{{ props.DataList.issuedDatetime }}</div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">备注</div>
- <div class="detail-value flex flex-align-center">{{ props.DataList.remark }}</div>
- </div>
- <!-- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">巡查位置</div>
- <div class="detail-value flex flex-align-center">{{ props.DataList.projectLocationName }}</div>
- </div> -->
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">巡查项目</div>
- <div class="detail-value flex flex-align-center">
- {{ props.DataList.projectList[0].projectAbbreviation }}
- </div>
- </div>
- </div>
- <!-- 巡查照片 -->
- <!-- <div>
- <p style="color: aliceblue">巡查照片</p>
- <div v-if="dataListPhone.length">
- <el-image style="width: 150px; height: 60px; margin: 5px" v-for="i in dataListPhone" :src="i.url" :preview-src-list="[i.url]">
- </el-image>
- </div>
- <el-empty v-else description="暂无图片" :image-size="30" />
- </div> -->
-
- <el-table :data="dataList" v-loading="loadingTwo" stripe style="margin-bottom: 20px; margin-top: 10px">
- <el-table-column type="index" width="55" label="序号" />
- <el-table-column label="问题类型" prop="problemType">
- <!-- <template #default="scope">
- <dict-tag :options="problem_type" :value="String(scope.row.problemType)" />
- </template> -->
- </el-table-column>
- <el-table-column label="检查项" prop="checkItem" />
- <el-table-column label="是否整改" prop="isRectification">
- <template #default="scope">
- <span>
- {{ scope.row.isRectification == '1' ? '无需整改' : scope.row.isRectification == '2' ? '需要整改' : '' }}
- </span>
- </template>
- </el-table-column>
- <el-table-column label="问题描述" prop="problemContent" />
- <el-table-column label="上报时间" prop="createTime" />
- <el-table-column label="巡查照片" prop="sysFileList">
- <template #default="scope">
- <el-image
- style="width: 60px; height: 60px; margin: 5px"
- v-for="i in scope.row.sysFileList"
- :src="i.url"
- :preview-src-list="[i.url]"
- >
- </el-image>
- <span v-if="scope.row.sysFileList.length == ''">暂无照片</span>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </template>
-
- <script setup>
- import { patrolProblemlist } from '@/api/longoPeration/inspectiontasks';
- import gisMap2D from '@/views/gisMapPage/gisMapBox1.vue';
- import CoordTransform from '@/utils/gis/CoorTransform.js';
- import point_start from '@/assets/newImgs/point_start.png';
- import point_end from '@/assets/newImgs/point_end.png';
- import user from '@/assets/newImgs/user_1.png';
- const props = defineProps({
- // 数据
- DataList: {
- type: Array,
- default: null,
- },
- pathData: {
- type: Array,
- default: null,
- },
- pathGeometry: {
- type: String,
- default: '',
- },
- });
- const { proxy } = getCurrentInstance();
- const { problem_type } = proxy.useDict('problem_type'); // 巡查类型的字典
- const dataList = ref([]);
- const dataListPhone = ref([]);
- const queryParams = ref({
- pageNum: 1,
- pageSize: 10,
- });
-
- /** 查询列表 */
- const getList = async IdA => {
- let res = await patrolProblemlist({ patrolTaskNo: IdA });
- dataList.value = res.data;
-
- res.data.forEach(element => {
- dataListPhone.value = element.sysFileList;
- });
- };
- //添加轨迹线
- const addRecordLine = (geojson, layerId) => {
- newfiberMapbox.map.addSource(layerId, {
- type: 'geojson',
- data: geojson,
- });
- newfiberMapbox.map.addLayer({
- id: layerId,
- type: 'line',
- source: layerId,
- paint: {
- 'line-color': 'rgba(35, 217, 110,1)',
- 'line-width': 3,
- },
- });
- };
- //添加轨迹起止点
- const addStartAndEnd = (geojson, layerId, Icon) => {
- newfiberMapbox.map.loadImage(Icon, (error, image) => {
- if (error) throw error;
- newfiberMapbox.map.addImage(layerId + '_icon', image);
- });
- newfiberMapbox.map.addSource(layerId, {
- type: 'geojson',
- data: geojson,
- });
- newfiberMapbox.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,
- },
- });
- };
- watch(
- () => props.DataList,
- val => {
- if (val) {
- dataListPhone.value = [];
- getList(props.DataList.number);
- }
- },
- { deep: true, immediate: true }
- );
- watch(
- () => props.pathGeometry,
- val => {
- if (val) {
- if (newfiberMapbox.map.getLayer('recordLineGeojson')) {
- newfiberMapbox.map.removeLayer('recordLineGeojson');
- newfiberMapbox.map.removeSource('recordLineGeojson');
- }
- if (val === '') return;
-
- //轨迹线
- let recordLineGeojson = {
- type: 'FeatureCollection',
- features: [
- {
- type: 'Feature',
- geometry: Terraformer.WKT.parse(val),
- },
- ],
- };
- console.log('recordLineGeojson--', recordLineGeojson);
- gcoord.transform(recordLineGeojson.features[0], gcoord.GCJ02, gcoord.WGS84);
- setTimeout(() => {
- addRecordLine(recordLineGeojson, 'recordLineGeojson');
- gcoord.transform(recordLineGeojson.features[0], gcoord.WGS84, gcoord.GCJ02);
- }, 2000);
- }
- }
- );
- watch(
- () => props.pathData,
- val => {
- if (val) {
- console.log('val-----', val);
- if (newfiberMapbox.map.getLayer('point_start')) {
- newfiberMapbox.map.removeLayer('point_start');
- newfiberMapbox.map.removeLayer('point_end');
- newfiberMapbox.map.removeSource('point_start');
- newfiberMapbox.map.removeSource('point_end');
- newfiberMapbox.map.removeImage('point_start_icon');
- newfiberMapbox.map.removeImage('point_end_icon');
- }
- if (!val.length) return;
-
- //起止点
- let start_84 = CoordTransform.gcj02towgs84(Number(val[0].lng), Number(val[0].lat));
- let end_84 = CoordTransform.gcj02towgs84(Number(val[val.length - 1].lng), Number(val[val.length - 1].lat));
- let startPointGeojson = {
- type: 'FeatureCollection',
- features: [turf.point(start_84)],
- };
- let endPointGeojson = {
- type: 'FeatureCollection',
- features: [turf.point(end_84)],
- };
- setTimeout(() => {
- addStartAndEnd(startPointGeojson, 'point_start', point_start);
- addStartAndEnd(endPointGeojson, 'point_end', point_end);
- newfiberMapbox.map.setPitch(0);
- newfiberMapbox.map.easeTo({
- center: start_84,
- zoom: 15,
- });
- }, 2000);
- }
- },
- { deep: true, immediate: true }
- );
- onMounted(() => {});
- </script>
-
- <style scoped lang="scss">
- .first {
- .ditu {
- width: 100%;
- height: 200px;
- }
- }
- </style>