Newer
Older
KaiFengPC / src / views / sponeScreen / longYW / InspectionTasks.vue
@zhangdeliang zhangdeliang on 26 Jul 3 KB update
  1. <template>
  2. <div class="partTitleHM">
  3. 巡查任务
  4. <div class="head-right" style="">
  5. <el-form-item label="">
  6. <el-date-picker
  7. type="month"
  8. v-model="date"
  9. value-format="YYYY-MM"
  10. placeholder="请选择年月"
  11. size="small"
  12. style="width: 100%"
  13. ></el-date-picker>
  14. </el-form-item>
  15. </div>
  16. </div>
  17. <div class="ConstrucClass">
  18. <div class="scrollMapHM" v-loading="loading">
  19. <div class="scrollTitle flex">
  20. <p>巡查任务名称</p>
  21. <p>巡查人员</p>
  22. <p>任务状态</p>
  23. <p>操作</p>
  24. </div>
  25. <Vue3SeamlessScroll :list="tableData" :singleHeight="50" :singleWaitTime="1500" :hover="true" class="scroll">
  26. <div class="scrollCont flex" v-for="item in tableData" :key="item.id">
  27. <p class="ellipsis" :title="item.taskName">{{ item.taskName }}</p>
  28. <p class="ellipsis" v-for="item2 in item.taskUserList">{{ item2.userName }}</p>
  29. <p class="ellipsis">
  30. {{
  31. item.status == 'to_start'
  32. ? '未开始'
  33. : item.status == 'proceed'
  34. ? '进行中'
  35. : item.status == 'done'
  36. ? '已完成'
  37. : item.status == 'expired'
  38. ? '超时'
  39. : ''
  40. }}
  41. </p>
  42. <p class="ellipsis reports" @click="checkReport(item)">详情</p>
  43. </div>
  44. </Vue3SeamlessScroll>
  45. </div>
  46. </div>
  47.  
  48. <!-- 弹框 -->
  49. <el-dialog
  50. title="巡查日志详情"
  51. v-model="dialogShowXq"
  52. width="1200px"
  53. append-to-body
  54. :close-on-click-modal="false"
  55. class="dialog-detail-box"
  56. >
  57. <popupbox :DataList="DataList" :pathData="pathData" :pathGeometry="pathGeometry"></popupbox>
  58. </el-dialog>
  59. </template>
  60.  
  61. <script setup>
  62. import { patrolTaskpage, PatrolTaskID } from '@/api/longoPeration/inspectiontasks';
  63. import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
  64. import popupbox from '@/views/longoPeration/Patrolmanagement/pop-upbox'; //详情弹框
  65. const { proxy } = getCurrentInstance();
  66. const date = ref(proxy.moment(new Date()).format('YYYY-MM'));
  67. const dialogShowXq = ref(false);
  68. const tableData = ref([]);
  69. const loading = ref(true);
  70. const DataList = ref([]);
  71. const pathData = ref([]);
  72. const pathGeometry = ref([]);
  73. const AllData = reactive({
  74. queryParams: { pageNum: 1, pageSize: 20 },
  75. });
  76.  
  77. const { queryParams } = toRefs(AllData);
  78.  
  79. /** 主任务查询列表 */
  80. const getList = async () => {
  81. loading.value = true;
  82. let res = await patrolTaskpage(queryParams.value);
  83. tableData.value = res.data || [];
  84. loading.value = false;
  85. };
  86. async function checkReport(row) {
  87. dialogShowXq.value = true;
  88. DataList.value = { ...row };
  89.  
  90. let res = await PatrolTaskID(row.id);
  91. if (res && res.code == 200) {
  92. // console.log('res.data--', res.data);
  93. pathData.value = res.data.patrolPathLngLat;
  94. pathGeometry.value = res.data.patrolPath;
  95. }
  96. }
  97. getList();
  98. </script>
  99.  
  100. <style lang="scss" scoped>
  101. .ConstrucClass {
  102. width: 460px;
  103. height: 30%;
  104. background: #004565;
  105. opacity: 0.8;
  106. padding: 0px 10px;
  107. margin: auto;
  108. .scrollMapHM {
  109. height: 100%;
  110. position: relative;
  111. top: 10px;
  112. p {
  113. width: 23%;
  114. }
  115. .reports {
  116. color: #3afff8;
  117. }
  118. .scroll {
  119. width: 100%;
  120. height: 72%;
  121. overflow: hidden;
  122. display: inline-block;
  123. }
  124. }
  125. }
  126. .head-right {
  127. cursor: pointer;
  128. position: relative;
  129. left: 240px;
  130. top: -33px;
  131. width: 150px;
  132. height: 32px;
  133. // background: red;
  134. }
  135. </style>