- <template>
- <div class="partTitleHM">
- 巡查任务
- <div class="head-right" style="">
- <el-form-item label="">
- <el-date-picker
- type="month"
- v-model="date"
- value-format="YYYY-MM"
- placeholder="请选择年月"
- size="small"
- style="width: 100%"
- ></el-date-picker>
- </el-form-item>
- </div>
- </div>
- <div class="ConstrucClass">
- <div class="scrollMapHM" v-loading="loading">
- <div class="scrollTitle flex">
- <p>巡查任务名称</p>
- <p>巡查人员</p>
- <p>任务状态</p>
- <p>操作</p>
- </div>
- <Vue3SeamlessScroll :list="tableData" :singleHeight="50" :singleWaitTime="1500" :hover="true" class="scroll">
- <div class="scrollCont flex" v-for="item in tableData" :key="item.id">
- <p class="ellipsis" :title="item.taskName">{{ item.taskName }}</p>
- <p class="ellipsis" v-for="item2 in item.taskUserList">{{ item2.userName }}</p>
- <p class="ellipsis">
- {{
- item.status == 'to_start'
- ? '未开始'
- : item.status == 'proceed'
- ? '进行中'
- : item.status == 'done'
- ? '已完成'
- : item.status == 'expired'
- ? '超时'
- : ''
- }}
- </p>
- <p class="ellipsis reports" @click="checkReport(item)">详情</p>
- </div>
- </Vue3SeamlessScroll>
- </div>
- </div>
- <!-- 弹框 -->
- <el-dialog
- title="巡查日志详情"
- v-model="dialogShowXq"
- width="1200px"
- append-to-body
- :close-on-click-modal="false"
- class="dialog-detail-box"
- >
- <popupbox :DataList="DataList" :pathData="pathData" :pathGeometry="pathGeometry"></popupbox>
- </el-dialog>
- </template>
- <script setup>
- import { patrolTaskpage, PatrolTaskID } from '@/api/longoPeration/inspectiontasks';
- import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
- import popupbox from '@/views/longoPeration/Patrolmanagement/pop-upbox'; //详情弹框
- const { proxy } = getCurrentInstance();
- const date = ref(proxy.moment(new Date()).format('YYYY-MM'));
- const dialogShowXq = ref(false);
- const tableData = ref([]);
- const loading = ref(true);
- const DataList = ref([]);
- const pathData = ref([]);
- const pathGeometry = ref([]);
- const AllData = reactive({
- queryParams: { pageNum: 1, pageSize: 20 },
- });
- const { queryParams } = toRefs(AllData);
- /** 主任务查询列表 */
- const getList = async () => {
- loading.value = true;
- let res = await patrolTaskpage(queryParams.value);
- tableData.value = res.data || [];
- loading.value = false;
- };
- async function checkReport(row) {
- dialogShowXq.value = true;
- DataList.value = { ...row };
- let res = await PatrolTaskID(row.id);
- if (res && res.code == 200) {
- // console.log('res.data--', res.data);
- pathData.value = res.data.patrolPathLngLat;
- pathGeometry.value = res.data.patrolPath;
- }
- }
- getList();
- </script>
- <style lang="scss" scoped>
- .ConstrucClass {
- width: 460px;
- height: 30%;
- background: #004565;
- opacity: 0.8;
- padding: 0px 10px;
- margin: auto;
- .scrollMapHM {
- height: 100%;
- position: relative;
- top: 10px;
- p {
- width: 23%;
- }
- .reports {
- color: #3afff8;
- }
- .scroll {
- width: 100%;
- height: 72%;
- overflow: hidden;
- display: inline-block;
- }
- }
- }
- .head-right {
- cursor: pointer;
- position: relative;
- left: 240px;
- top: -33px;
- width: 150px;
- height: 32px;
- // background: red;
- }
- </style>