Newer
Older
KaiFengPC / src / views / longoPeration / Patrolmanagement / pop-upbox.vue
@鲁yixuan 鲁yixuan on 6 Sep 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">巡查任务名称</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 user from '@/assets/newImgs/user_1.png';
  120. const props = defineProps({
  121. // 数据
  122. DataList: {
  123. type: Array,
  124. default: null,
  125. },
  126. pathData: {
  127. type: Array,
  128. default: null,
  129. },
  130. pathGeometry: {
  131. type: String,
  132. default: '',
  133. },
  134. });
  135. const { proxy } = getCurrentInstance();
  136. const { problem_type, inspection_items } = proxy.useDict('problem_type', 'inspection_items'); // 巡查类型的字典
  137. const dataList = ref([]);
  138. const dataListPhone = ref([]);
  139. const queryParams = ref({
  140. pageNum: 1,
  141. pageSize: 10,
  142. });
  143.  
  144. /** 搜索列表 */
  145. const getList = async IdA => {
  146. let res = await patrolProblemlist({ patrolTaskNo: IdA });
  147. dataList.value = res.data;
  148.  
  149. res.data.forEach(element => {
  150. dataListPhone.value = element.sysFileList;
  151. });
  152. };
  153. //添加轨迹线
  154. const addRecordLine = (geojson, layerId) => {
  155. newfiberMap_risk.map.addSource(layerId, {
  156. type: 'geojson',
  157. data: geojson,
  158. });
  159. newfiberMap_risk.map.addLayer({
  160. id: layerId,
  161. type: 'line',
  162. source: layerId,
  163. paint: {
  164. 'line-color': 'rgba(35, 217, 110,1)',
  165. 'line-width': 3,
  166. },
  167. });
  168. };
  169. //添加轨迹起止点
  170. const addStartAndEnd = (geojson, layerId, Icon) => {
  171. newfiberMap_risk.map.loadImage(Icon, (error, image) => {
  172. if (error) throw error;
  173. newfiberMap_risk.map.addImage(layerId + '_icon', image);
  174. });
  175. newfiberMap_risk.map.addSource(layerId, {
  176. type: 'geojson',
  177. data: geojson,
  178. });
  179. newfiberMap_risk.map.addLayer({
  180. id: layerId,
  181. type: 'symbol',
  182. source: layerId,
  183. layout: {
  184. 'icon-image': layerId + '_icon',
  185. 'icon-size': 0.2,
  186. 'icon-offset': [0, 0],
  187. 'icon-allow-overlap': true,
  188. },
  189. });
  190. };
  191. watch(
  192. () => props.DataList,
  193. val => {
  194. if (val) {
  195. dataListPhone.value = [];
  196. getList(props.DataList.number);
  197. }
  198. },
  199. { deep: true, immediate: true }
  200. );
  201. watch(
  202. () => props.pathGeometry,
  203. val => {
  204. if (val) {
  205. if (newfiberMap_risk.map.getLayer('recordLineGeojson')) {
  206. newfiberMap_risk.map.removeLayer('recordLineGeojson');
  207. newfiberMap_risk.map.removeSource('recordLineGeojson');
  208. }
  209. if (val === '') return;
  210.  
  211. //轨迹线
  212. let recordLineGeojson = {
  213. type: 'FeatureCollection',
  214. features: [
  215. {
  216. type: 'Feature',
  217. geometry: Terraformer.WKT.parse(val),
  218. },
  219. ],
  220. };
  221. console.log('recordLineGeojson--', recordLineGeojson);
  222. gcoord.transform(recordLineGeojson.features[0], gcoord.GCJ02, gcoord.WGS84);
  223. setTimeout(() => {
  224. addRecordLine(recordLineGeojson, 'recordLineGeojson');
  225. gcoord.transform(recordLineGeojson.features[0], gcoord.WGS84, gcoord.GCJ02);
  226. }, 2000);
  227. }
  228. }
  229. );
  230. watch(
  231. () => props.pathData,
  232. val => {
  233. if (val) {
  234. console.log('val-----', val);
  235. setTimeout(() => {
  236. if (newfiberMap_risk.map.getLayer('point_start')) {
  237. newfiberMap_risk.map.removeLayer('point_start');
  238. newfiberMap_risk.map.removeLayer('point_end');
  239. newfiberMap_risk.map.removeSource('point_start');
  240. newfiberMap_risk.map.removeSource('point_end');
  241. newfiberMap_risk.map.removeImage('point_start_icon');
  242. newfiberMap_risk.map.removeImage('point_end_icon');
  243. }
  244. }, 1000);
  245.  
  246. if (!val.length) return;
  247.  
  248. //起止点
  249. let start_84 = CoordTransform.gcj02towgs84(Number(val[0].lng), Number(val[0].lat));
  250. let end_84 = CoordTransform.gcj02towgs84(Number(val[val.length - 1].lng), Number(val[val.length - 1].lat));
  251. let startPointGeojson = {
  252. type: 'FeatureCollection',
  253. features: [turf.point(start_84)],
  254. };
  255. let endPointGeojson = {
  256. type: 'FeatureCollection',
  257. features: [turf.point(end_84)],
  258. };
  259. setTimeout(() => {
  260. addStartAndEnd(startPointGeojson, 'point_start', point_start);
  261. addStartAndEnd(endPointGeojson, 'point_end', point_end);
  262. newfiberMap_risk.map.setPitch(0);
  263. newfiberMap_risk.map.easeTo({
  264. center: start_84,
  265. zoom: 15,
  266. });
  267. }, 2000);
  268. }
  269. },
  270. { deep: true, immediate: true }
  271. );
  272. onMounted(() => {});
  273. </script>
  274.  
  275. <style scoped lang="scss">
  276. .first {
  277. .ditu {
  278. width: 100%;
  279. height: 300px;
  280. }
  281. }
  282. </style>