Newer
Older
KaiFengPC / src / views / longoPeration / Patrolmanagement / pop-upbox.vue
@鲁yixuan 鲁yixuan on 25 Jul 9 KB updata
  1. <template>
  2. <div class="first">
  3. <div class="ditu">
  4. <gisMap2D style="position: relative" :initJson="`/static/libs/mapbox/style/projectIndex.json`" @map-click="clickMap"></gisMap2D>
  5. </div>
  6. <!-- 类容 -->
  7. <div class="dialog-form-detail flex flex-r flex-wrap" style="margin-top: 5px">
  8. <div class="flex flex-r">
  9. <div class="detail-label flex flex-align-center">巡查任务名称11</div>
  10. <div class="detail-value flex flex-align-center">
  11. {{ props.DataList.taskName }}
  12. </div>
  13. </div>
  14. <div class="flex flex-r">
  15. <div class="detail-label flex flex-align-center">巡查人员</div>
  16. <div class="detail-value flex flex-align-center">{{ props.DataList.taskUserList[0].userName }}</div>
  17. </div>
  18. <div class="flex flex-r">
  19. <div class="detail-label flex flex-align-center">巡查开始时间</div>
  20. <div class="detail-value flex flex-align-center">{{ props.DataList.planStartDatetime }}</div>
  21. </div>
  22. <div class="flex flex-r">
  23. <div class="detail-label flex flex-align-center">巡查结束时间</div>
  24. <div class="detail-value flex flex-align-center">{{ props.DataList.planEndDatetime }}</div>
  25. </div>
  26. <div class="flex flex-r">
  27. <div class="detail-label flex flex-align-center">任务状态</div>
  28. <div class="detail-value flex flex-align-center">
  29. <span>
  30. {{
  31. props.DataList.status == 'to_start'
  32. ? '未开始'
  33. : props.DataList.status == 'proceed'
  34. ? '进行中'
  35. : props.DataList.status == 'done'
  36. ? '已完成'
  37. : props.DataList.status == 'expired'
  38. ? '超时'
  39. : ''
  40. }}
  41. </span>
  42. </div>
  43. </div>
  44. <div class="flex flex-r">
  45. <div class="detail-label flex flex-align-center">超时时间</div>
  46. <div class="detail-value flex flex-align-center">{{ props.DataList.expiredDays }}</div>
  47. </div>
  48. <div class="flex flex-r">
  49. <div class="detail-label flex flex-align-center">任务下发时间</div>
  50. <div class="detail-value flex flex-align-center">{{ props.DataList.issuedDatetime }}</div>
  51. </div>
  52. <div class="flex flex-r">
  53. <div class="detail-label flex flex-align-center">备注</div>
  54. <div class="detail-value flex flex-align-center">{{ props.DataList.remark }}</div>
  55. </div>
  56. <!-- <div class="flex flex-r">
  57. <div class="detail-label flex flex-align-center">巡查位置</div>
  58. <div class="detail-value flex flex-align-center">{{ props.DataList.projectLocationName }}</div>
  59. </div> -->
  60. <div class="flex flex-r">
  61. <div class="detail-label flex flex-align-center">巡查项目</div>
  62. <div class="detail-value flex flex-align-center">
  63. {{ props.DataList.projectList[0].projectAbbreviation }}
  64. </div>
  65. </div>
  66. </div>
  67. <!-- 巡查照片 -->
  68. <!-- <div>
  69. <p style="color: aliceblue">巡查照片</p>
  70. <div v-if="dataListPhone.length">
  71. <el-image style="width: 150px; height: 60px; margin: 5px" v-for="i in dataListPhone" :src="i.url" :preview-src-list="[i.url]">
  72. </el-image>
  73. </div>
  74. <el-empty v-else description="暂无图片" :image-size="30" />
  75. </div> -->
  76.  
  77. <el-table :data="dataList" v-loading="loadingTwo" stripe style="margin-bottom: 20px; margin-top: 10px">
  78. <el-table-column type="index" width="55" label="序号" />
  79. <el-table-column label="问题类型" prop="problemType">
  80. <!-- <template #default="scope">
  81. <dict-tag :options="problem_type" :value="String(scope.row.problemType)" />
  82. </template> -->
  83. </el-table-column>
  84. <el-table-column label="检查项" prop="checkItem" />
  85. <el-table-column label="是否整改" prop="isRectification">
  86. <template #default="scope">
  87. <span>
  88. {{ scope.row.isRectification == '1' ? '无需整改' : scope.row.isRectification == '2' ? '需要整改' : '' }}
  89. </span>
  90. </template>
  91. </el-table-column>
  92. <el-table-column label="问题描述" prop="problemContent" />
  93. <el-table-column label="上报时间" prop="createTime" />
  94. <el-table-column label="巡查照片" prop="sysFileList">
  95. <template #default="scope">
  96. <el-image
  97. style="width: 60px; height: 60px; margin: 5px"
  98. v-for="i in scope.row.sysFileList"
  99. :src="i.url"
  100. :preview-src-list="[i.url]"
  101. >
  102. </el-image>
  103. <span v-if="scope.row.sysFileList.length == ''">暂无照片</span>
  104. </template>
  105. </el-table-column>
  106. </el-table>
  107. </div>
  108. </template>
  109.  
  110. <script setup>
  111. import { patrolProblemlist } from '@/api/longoPeration/inspectiontasks';
  112. import gisMap2D from '@/views/gisMapPage/gisMapBox1.vue';
  113. import CoordTransform from '@/utils/gis/CoorTransform.js';
  114. import point_start from '@/assets/newImgs/point_start.png';
  115. import point_end from '@/assets/newImgs/point_end.png';
  116. import user from '@/assets/newImgs/user_1.png';
  117. const props = defineProps({
  118. // 数据
  119. DataList: {
  120. type: Array,
  121. default: null,
  122. },
  123. pathData: {
  124. type: Array,
  125. default: null,
  126. },
  127. pathGeometry: {
  128. type: String,
  129. default: '',
  130. },
  131. });
  132. const { proxy } = getCurrentInstance();
  133. const { problem_type } = proxy.useDict('problem_type'); // 巡查类型的字典
  134. const dataList = ref([]);
  135. const dataListPhone = ref([]);
  136. const queryParams = ref({
  137. pageNum: 1,
  138. pageSize: 10,
  139. });
  140.  
  141. /** 查询列表 */
  142. const getList = async IdA => {
  143. let res = await patrolProblemlist({ patrolTaskNo: IdA });
  144. dataList.value = res.data;
  145.  
  146. res.data.forEach(element => {
  147. dataListPhone.value = element.sysFileList;
  148. });
  149. };
  150. //添加轨迹线
  151. const addRecordLine = (geojson, layerId) => {
  152. newfiberMapbox.map.addSource(layerId, {
  153. type: 'geojson',
  154. data: geojson,
  155. });
  156. newfiberMapbox.map.addLayer({
  157. id: layerId,
  158. type: 'line',
  159. source: layerId,
  160. paint: {
  161. 'line-color': 'rgba(35, 217, 110,1)',
  162. 'line-width': 3,
  163. },
  164. });
  165. };
  166. //添加轨迹起止点
  167. const addStartAndEnd = (geojson, layerId, Icon) => {
  168. newfiberMapbox.map.loadImage(Icon, (error, image) => {
  169. if (error) throw error;
  170. newfiberMapbox.map.addImage(layerId + '_icon', image);
  171. });
  172. newfiberMapbox.map.addSource(layerId, {
  173. type: 'geojson',
  174. data: geojson,
  175. });
  176. newfiberMapbox.map.addLayer({
  177. id: layerId,
  178. type: 'symbol',
  179. source: layerId,
  180. layout: {
  181. 'icon-image': layerId + '_icon',
  182. 'icon-size': 0.2,
  183. 'icon-offset': [0, 0],
  184. 'icon-allow-overlap': true,
  185. },
  186. });
  187. };
  188. watch(
  189. () => props.DataList,
  190. val => {
  191. if (val) {
  192. dataListPhone.value = [];
  193. getList(props.DataList.number);
  194. }
  195. },
  196. { deep: true, immediate: true }
  197. );
  198. watch(
  199. () => props.pathGeometry,
  200. val => {
  201. if (val) {
  202. if (newfiberMapbox.map.getLayer('recordLineGeojson')) {
  203. newfiberMapbox.map.removeLayer('recordLineGeojson');
  204. newfiberMapbox.map.removeSource('recordLineGeojson');
  205. }
  206. if (val === '') return;
  207.  
  208. //轨迹线
  209. let recordLineGeojson = {
  210. type: 'FeatureCollection',
  211. features: [
  212. {
  213. type: 'Feature',
  214. geometry: Terraformer.WKT.parse(val),
  215. },
  216. ],
  217. };
  218. console.log('recordLineGeojson--', recordLineGeojson);
  219. gcoord.transform(recordLineGeojson.features[0], gcoord.GCJ02, gcoord.WGS84);
  220. setTimeout(() => {
  221. addRecordLine(recordLineGeojson, 'recordLineGeojson');
  222. gcoord.transform(recordLineGeojson.features[0], gcoord.WGS84, gcoord.GCJ02);
  223. }, 2000);
  224. }
  225. }
  226. );
  227. watch(
  228. () => props.pathData,
  229. val => {
  230. if (val) {
  231. console.log('val-----', val);
  232. if (newfiberMapbox.map.getLayer('point_start')) {
  233. newfiberMapbox.map.removeLayer('point_start');
  234. newfiberMapbox.map.removeLayer('point_end');
  235. newfiberMapbox.map.removeSource('point_start');
  236. newfiberMapbox.map.removeSource('point_end');
  237. newfiberMapbox.map.removeImage('point_start_icon');
  238. newfiberMapbox.map.removeImage('point_end_icon');
  239. }
  240. if (!val.length) return;
  241.  
  242. //起止点
  243. let start_84 = CoordTransform.gcj02towgs84(Number(val[0].lng), Number(val[0].lat));
  244. let end_84 = CoordTransform.gcj02towgs84(Number(val[val.length - 1].lng), Number(val[val.length - 1].lat));
  245. let startPointGeojson = {
  246. type: 'FeatureCollection',
  247. features: [turf.point(start_84)],
  248. };
  249. let endPointGeojson = {
  250. type: 'FeatureCollection',
  251. features: [turf.point(end_84)],
  252. };
  253. setTimeout(() => {
  254. addStartAndEnd(startPointGeojson, 'point_start', point_start);
  255. addStartAndEnd(endPointGeojson, 'point_end', point_end);
  256. newfiberMapbox.map.setPitch(0);
  257. newfiberMapbox.map.easeTo({
  258. center: start_84,
  259. zoom: 15,
  260. });
  261. }, 2000);
  262. }
  263. },
  264. { deep: true, immediate: true }
  265. );
  266. onMounted(() => {});
  267. </script>
  268.  
  269. <style scoped lang="scss">
  270. .first {
  271. .ditu {
  272. width: 100%;
  273. height: 200px;
  274. }
  275. }
  276. </style>