Newer
Older
KaiFengPC / src / views / sponeScreen / longYW / InspectionTasks.vue
@zhangdeliang zhangdeliang on 23 Aug 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. <div class="ellipsis">
  29. <span v-for="item2 in item.taskUserList">{{ item2.userName }}&nbsp;</span>
  30. </div>
  31. <p class="ellipsis">
  32. {{
  33. item.status == 'to_start'
  34. ? '未开始'
  35. : item.status == 'proceed'
  36. ? '进行中'
  37. : item.status == 'done'
  38. ? '已完成'
  39. : item.status == 'expired'
  40. ? '超时'
  41. : ''
  42. }}
  43. </p>
  44. <p class="ellipsis reports" @click="checkReport(item)">详情</p>
  45. </div>
  46. </Vue3SeamlessScroll>
  47. </div>
  48. </div>
  49.  
  50. <!-- 弹框 -->
  51. <el-dialog
  52. title="巡查日志详情"
  53. v-model="dialogShowXq"
  54. width="1200px"
  55. append-to-body
  56. :close-on-click-modal="false"
  57. class="dialog-detail-box"
  58. >
  59. <popupbox :DataList="DataList" :pathData="pathData" :pathGeometry="pathGeometry"></popupbox>
  60. </el-dialog>
  61. </template>
  62.  
  63. <script setup>
  64. import { patrolTaskpage, PatrolTaskID } from '@/api/longoPeration/inspectiontasks';
  65. import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
  66. import popupbox from '@/views/longoPeration/Patrolmanagement/pop-upbox'; //详情弹框
  67. const { proxy } = getCurrentInstance();
  68. const date = ref(proxy.moment(new Date()).format('YYYY-MM'));
  69. const dialogShowXq = ref(false);
  70. const tableData = ref([]);
  71. const loading = ref(true);
  72. const DataList = ref([]);
  73. const pathData = ref([]);
  74. const pathGeometry = ref([]);
  75. const AllData = reactive({
  76. queryParams: { pageNum: 1, pageSize: 20 },
  77. });
  78.  
  79. const { queryParams } = toRefs(AllData);
  80.  
  81. /** 主任务搜索列表 */
  82. const getList = async () => {
  83. loading.value = true;
  84. let res = await patrolTaskpage(queryParams.value);
  85. tableData.value = res.data || [];
  86. loading.value = false;
  87. };
  88. async function checkReport(row) {
  89. dialogShowXq.value = true;
  90. DataList.value = { ...row };
  91.  
  92. let res = await PatrolTaskID(row.id);
  93. if (res && res.code == 200) {
  94. // console.log('res.data--', res.data);
  95. pathData.value = res.data.patrolPathLngLat;
  96. pathGeometry.value = res.data.patrolPath;
  97. }
  98. }
  99. getList();
  100. </script>
  101.  
  102. <style lang="scss" scoped>
  103. .ConstrucClass {
  104. width: 460px;
  105. height: 30%;
  106. background: #004565;
  107. opacity: 0.8;
  108. padding: 0px 10px;
  109. margin-top: -3px;
  110. .scrollMapHM {
  111. height: 100%;
  112. position: relative;
  113. top: 10px;
  114. p {
  115. width: 23%;
  116. }
  117. .reports {
  118. color: #3afff8;
  119. }
  120. .scroll {
  121. width: 100%;
  122. height: 72%;
  123. overflow: hidden;
  124. display: inline-block;
  125. }
  126. }
  127. .scrollCont {
  128. .ellipsis {
  129. width: 25%;
  130. text-align: center;
  131. }
  132. }
  133. }
  134. .head-right {
  135. cursor: pointer;
  136. position: relative;
  137. left: 240px;
  138. top: -33px;
  139. width: 150px;
  140. height: 32px;
  141. // background: red;
  142. }
  143. </style>