Newer
Older
KaiFengPC / src / views / longoPeration / Patrolmanagement / pop-upbox.vue
@zhangdeliang zhangdeliang on 5 Dec 10 KB update
  1. <template>
  2. <div class="first">
  3. <div class="ditu">
  4. <gisMap2D style="position: relative" :initJson="`/static/libs/mapbox/style/projectIndex.json`"></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">巡查任务名称</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.realStartDatetime }}</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.realEndDatetime }}</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">
  47. <div v-if="props.DataList.expiredDays < 1">未超时</div>
  48. <div v-else style="color: red">超时 {{ props.DataList.expiredDays }} 天</div>
  49. </div>
  50. </div>
  51. <div class="flex flex-r">
  52. <div class="detail-label flex flex-align-center">任务下发时间</div>
  53. <div class="detail-value flex flex-align-center">{{ props.DataList.issuedDatetime }}</div>
  54. </div>
  55. <div class="flex flex-r">
  56. <div class="detail-label flex flex-align-center">备注</div>
  57. <div class="detail-value flex flex-align-center">{{ props.DataList.remark }}</div>
  58. </div>
  59. <!-- <div class="flex flex-r">
  60. <div class="detail-label flex flex-align-center">巡查位置</div>
  61. <div class="detail-value flex flex-align-center">{{ props.DataList.projectLocationName }}</div>
  62. </div> -->
  63. <div class="flex flex-r">
  64. <div class="detail-label flex flex-align-center">巡查项目</div>
  65. <div class="detail-value flex flex-align-center">
  66. {{ props.DataList.projectList[0].projectAbbreviation }}
  67. </div>
  68. </div>
  69. </div>
  70. <!-- 巡查照片 -->
  71. <!-- <div>
  72. <p style="color: aliceblue">巡查照片</p>
  73. <div v-if="dataListPhone.length">
  74. <el-image style="width: 150px; height: 60px; margin: 5px" v-for="i in dataListPhone" :src="i.url" :preview-src-list="[i.url]">
  75. </el-image>
  76. </div>
  77. <el-empty v-else description="暂无图片" :image-size="30" />
  78. </div> -->
  79.  
  80. <el-table :data="dataList" v-loading="loadingTwo" stripe style="margin-bottom: 20px; margin-top: 10px" :max-height="250">
  81. <el-table-column type="index" width="55" label="序号" />
  82. <el-table-column label="问题类型" prop="problemTypeName"> </el-table-column>
  83. <el-table-column label="检查项" prop="checkItemName">
  84. <!-- <template #default="scope">
  85. <dict-tag :options="inspection_items" :value="String(scope.row.checkItem)" />
  86. </template> -->
  87. </el-table-column>
  88. <el-table-column label="是否整改" prop="isRectification">
  89. <template #default="scope">
  90. <span>
  91. {{ scope.row.isRectification == '1' ? '无需整改' : scope.row.isRectification == '2' ? '需要整改' : '' }}
  92. </span>
  93. </template>
  94. </el-table-column>
  95. <el-table-column label="问题描述" prop="problemContent" />
  96. <el-table-column label="上报时间" prop="createTime" />
  97. <el-table-column label="巡查照片" prop="sysFileList">
  98. <template #default="scope">
  99. <el-image
  100. style="width: 60px; height: 60px; margin: 5px"
  101. v-for="i in scope.row.sysFileList"
  102. :src="i.url"
  103. :preview-src-list="[i.url]"
  104. >
  105. </el-image>
  106. <span v-if="scope.row.sysFileList.length == ''">暂无照片</span>
  107. </template>
  108. </el-table-column>
  109. </el-table>
  110. </div>
  111. </template>
  112.  
  113. <script setup>
  114. import { patrolProblemlist } from '@/api/longoPeration/inspectiontasks';
  115. import gisMap2D from '@/views/gisMapPage/gisMapBox.vue';
  116. import CoordTransform from '@/utils/gis/CoorTransform.js';
  117. import point_start from '@/assets/newImgs/point_start.png';
  118. import point_end from '@/assets/newImgs/point_end.png';
  119. import point_project from '@/assets/images/gisMap/in.png';
  120.  
  121. const props = defineProps({
  122. // 数据
  123. DataList: {
  124. type: Array,
  125. default: null,
  126. },
  127. pathData: {
  128. type: Array,
  129. default: null,
  130. },
  131. pathGeometry: {
  132. type: String,
  133. default: '',
  134. },
  135. });
  136. const { proxy } = getCurrentInstance();
  137. const { problem_type, inspection_items } = proxy.useDict('problem_type', 'inspection_items'); // 巡查类型的字典
  138. const dataList = ref([]);
  139. const dataListPhone = ref([]);
  140. const queryParams = ref({
  141. pageNum: 1,
  142. pageSize: 10,
  143. });
  144.  
  145. /** 搜索列表 */
  146. const getList = async IdA => {
  147. let res = await patrolProblemlist({ patrolTaskNo: IdA });
  148. dataList.value = res.data;
  149.  
  150. res.data.forEach(element => {
  151. dataListPhone.value = element.sysFileList;
  152. });
  153. };
  154. //添加轨迹线
  155. const addRecordLine = (geojson, layerId) => {
  156. newfiberMap_risk.map.addSource(layerId, {
  157. type: 'geojson',
  158. data: geojson,
  159. });
  160. newfiberMap_risk.map.addLayer({
  161. id: layerId,
  162. type: 'line',
  163. source: layerId,
  164. paint: {
  165. 'line-color': 'rgba(35, 217, 110,1)',
  166. 'line-width': 3,
  167. },
  168. });
  169. };
  170. //添加轨迹起止点
  171. const addStartAndEnd = (geojson, layerId, Icon) => {
  172. newfiberMap_risk.map.loadImage(Icon, (error, image) => {
  173. if (error) throw error;
  174. newfiberMap_risk.map.addImage(layerId + '_icon', image);
  175. });
  176. newfiberMap_risk.map.addSource(layerId, {
  177. type: 'geojson',
  178. data: geojson,
  179. });
  180. newfiberMap_risk.map.addLayer({
  181. id: layerId,
  182. type: 'symbol',
  183. source: layerId,
  184. layout: {
  185. 'icon-image': layerId + '_icon',
  186. 'icon-size': 0.2,
  187. 'icon-offset': [0, 0],
  188. 'icon-allow-overlap': true,
  189. },
  190. });
  191. };
  192.  
  193. // 添加项目点位
  194. const addProjectPoint = (map, data, layerId) => {
  195. newfiberMap_risk.map.loadImage(point_project, (error, image) => {
  196. if (error) throw error;
  197. !!!map.getSource(layerId) && map.addImage(layerId, image);
  198. !!!map.getSource(layerId) && map.addSource(layerId, { type: 'geojson', data: data });
  199. !!!map.getLayer(layerId) &&
  200. map.addLayer({
  201. id: layerId,
  202. type: 'symbol',
  203. source: layerId,
  204. layout: {
  205. 'text-field': '{name}',
  206. 'text-font': ['KlokanTech Noto Sans Regular'],
  207. 'text-size': 16,
  208. 'text-line-height': 2,
  209. 'text-anchor': 'bottom',
  210. 'text-offset': [0, 3],
  211. 'text-max-width': 50,
  212. 'icon-image': layerId,
  213. 'icon-size': 0.2,
  214. },
  215. paint: {
  216. 'text-color': 'rgba(127, 11, 147, 1)',
  217. 'text-halo-color': 'rgba(255, 255, 255, 1)',
  218. 'text-halo-width': 2,
  219. },
  220. });
  221. });
  222. };
  223.  
  224. watch(
  225. () => props.DataList,
  226. val => {
  227. if (val) {
  228. dataListPhone.value = [];
  229. getList(props.DataList.number);
  230. }
  231. },
  232. { deep: true, immediate: true }
  233. );
  234. watch(
  235. () => props.pathGeometry,
  236. val => {
  237. if (val) {
  238. if (newfiberMap_risk.map.getLayer('recordLineGeojson')) {
  239. newfiberMap_risk.map.removeLayer('recordLineGeojson');
  240. newfiberMap_risk.map.removeSource('recordLineGeojson');
  241. }
  242. if (val === '') return;
  243.  
  244. //轨迹线
  245. let recordLineGeojson = {
  246. type: 'FeatureCollection',
  247. features: [
  248. {
  249. type: 'Feature',
  250. geometry: Terraformer.WKT.parse(val),
  251. },
  252. ],
  253. };
  254. console.log('recordLineGeojson--', recordLineGeojson);
  255. gcoord.transform(recordLineGeojson.features[0], gcoord.GCJ02, gcoord.WGS84);
  256. setTimeout(() => {
  257. addRecordLine(recordLineGeojson, 'recordLineGeojson');
  258. gcoord.transform(recordLineGeojson.features[0], gcoord.WGS84, gcoord.GCJ02);
  259. }, 2000);
  260. }
  261. }
  262. );
  263. watch(
  264. () => props.pathData,
  265. val => {
  266. if (val) {
  267. setTimeout(() => {
  268. if (newfiberMap_risk.map.getLayer('point_start')) {
  269. newfiberMap_risk.map.removeLayer('point_start');
  270. newfiberMap_risk.map.removeLayer('point_end');
  271. newfiberMap_risk.map.removeSource('point_start');
  272. newfiberMap_risk.map.removeSource('point_end');
  273. newfiberMap_risk.map.removeImage('point_start_icon');
  274. newfiberMap_risk.map.removeImage('point_end_icon');
  275. }
  276. }, 1000);
  277. let drewPoint = turf.featureCollection([turf.point(props.DataList.projectLocation.split(',').map(Number))]);
  278. console.log('----', drewPoint);
  279. addProjectPoint(newfiberMap_risk.map, drewPoint, 'point_project'); // 添加项目点位
  280. setTimeout(() => {
  281. newfiberMap_risk.map.easeTo({
  282. center: props.DataList.projectLocation.split(','),
  283. zoom: 15,
  284. });
  285. }, 2000);
  286.  
  287. if (!val.length) return;
  288. console.log('val----', val);
  289. //起止点
  290. let start_84 = CoordTransform.gcj02towgs84(Number(val[0].lng), Number(val[0].lat));
  291. let end_84 = CoordTransform.gcj02towgs84(Number(val[val.length - 1].lng), Number(val[val.length - 1].lat));
  292. let startPointGeojson = {
  293. type: 'FeatureCollection',
  294. features: [turf.point(start_84)],
  295. };
  296. let endPointGeojson = {
  297. type: 'FeatureCollection',
  298. features: [turf.point(end_84)],
  299. };
  300. setTimeout(() => {
  301. addStartAndEnd(startPointGeojson, 'point_start', point_start);
  302. addStartAndEnd(endPointGeojson, 'point_end', point_end);
  303. newfiberMap_risk.map.setPitch(0);
  304. newfiberMap_risk.map.easeTo({
  305. center: start_84,
  306. zoom: 15,
  307. });
  308. }, 2000);
  309. }
  310. },
  311. { deep: true, immediate: true }
  312. );
  313. onMounted(() => {});
  314. </script>
  315.  
  316. <style scoped lang="scss">
  317. .first {
  318. .ditu {
  319. width: 100%;
  320. height: 300px;
  321. }
  322. }
  323. </style>