SmartSubstationPlatform/riis-web/src/views/task/patrolreport/index.vue

<script lang="ts">
export default {
  name: "patrolreport", // 巡视报告
};
</script>
<script setup lang="ts">
import Page from '@/components/Pagination/page.vue'
import { ref, onMounted, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getdata, DelData, exportExcel, getword, uploadTaskTodoById } from "@/api/patrolreport";
import { getSubstationBayByArea } from "@/api/task";
import { getDeviceByType } from "@/api/device";
import { getArea } from "@/api/monitordevice";
import Viewfile from '@/components/Viewfile/index.vue'
import { downloadFile } from '@/utils/index';
import { useUserStore } from '@/store/modules/user';
import moment from 'moment'
const userStore = useUserStore();
//表格所需参数
const taskName = ref()
const date: any = ref([])
const info: any = ref({
  size: 10,
  current: 1,
  stationCode: userStore.stationCode,
  startDate: '',
  endDate: '',
  taskName: '',
  type: '',
  bayId: '',
  areaId:'',
  patrolType:'',
})
const total = ref()
const treeloading = ref(false)
//表格数据
const tableData: any = ref([])
const InspectionType: any = ref([])
const interval: any = ref([])
const area: any = ref([])
const xunshi: any = ref([])
function getData(val: any) {
  info.value.taskName = taskName.value
  if (date.value.length != 0) {
    info.value.startDate = date.value[0]
    info.value.endDate = date.value[1]
  }

  treeloading.value = true
  const params = {
    dictcode: 'InspectionType'
  }
  getDeviceByType(params).then((res: any) => {
    InspectionType.value = res.data
  });
  getDeviceByType({dictcode:'PatrolEquipmentType'}).then((res: any) => {
    xunshi.value = res.data
  });
  getSubstationBayByArea({ stationCode: userStore.stationCode }).then((res: any) => {
    interval.value = res.data
  })
  getArea({ stationCode: userStore.stationCode }).then((res: any) => {
    area.value = res.data
  })
  info.value['status'] = val
  getdata(info.value).then((res: any) => {
    treeloading.value = false
    tableData.value = res.data.records
    info.value.size = res.data.size
    info.value.current = res.data.current
    total.value = res.data.total
  })
}
function currency(list: any, itemcode: any) {
  let dictname = ''
  list.forEach((element: any) => {
    if (element.itemcode == itemcode) {
      dictname = element.dictname
    }
  })
  return dictname
}
//重置
function resetting() {
  taskName.value = ''
  date.value = []
  let endDate = moment(new Date()).format('YYYY-MM-DD')
  const now = new Date(endDate)
  const year = now.getFullYear();
  const month = now.getMonth();
  const day = now.getDate();
  let startDate = moment(new Date(year, month - 1, day)).format('YYYY-MM-DD')
  date.value = [startDate, endDate]
  info.value.type = ''
  info.value.bayId = ''

  getData(1)
}
//表格多选事件
const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
}
//定义弹窗文字
const notificationText = ref('')
const index = ref()
const taskTodoId = ref()
//弹窗确定事件
function sure(index: any, taskTodoId: any) {
  if (index == 0) {
    const params = {
      taskTodoId: taskTodoId
    }
    DelData(params).then((res: any) => {
      if (res.code != 1) {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        getData(0)
      }
    })
  } else if (index == 1) {
    // 上报
  }
}
//多选删除
function delData() {
  const idList: any = ref([])
  multipleSelection.value.forEach((res: any) => {
    idList.value.push(res.taskTodoId)
  })
  ElMessageBox.confirm("确定删除选中的巡视任务吗？", "提示信息", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    }).then(() => {
      const params = {
        taskTodoId: idList.value.toString()
      }
      DelData(params).then((res: any) => {
        if (res.code != 1) {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          getData(0)
        }
      })
    })
    .catch(() => {

    })
}
//多选上报
function Escalation() {
  treeloading.value = true
  const idList: any = ref([])
  multipleSelection.value.forEach((res: any) => {
    idList.value.push(res.taskTodoId)
  })
  uploadTaskTodoById({ taskTodoId: idList.value.toString() }).then((res: any) => {
    if (res.code == 0) {
      ElMessage({
        type: "success",
        message: "上报成功"
      });
      treeloading.value = false
    }else{
      treeloading.value = false
    }
  })

}
//删除
function delOneData(row: any) {
  ElMessageBox.confirm("确定删除此巡视点位吗？", "提示信息", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    const params = {
      taskTodoId: row.taskTodoId
    }
    DelData(params).then((res: any) => {
      if (res.code != 1) {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        getData(0)
      }
    })
  })
  .catch(() => {})
}
//查看报告
const ViewfileUrl = ref("")
const title = ref('')
const isViewfile = ref(false)
function viewReport(row: any) {
  title.value = row.taskName
  ViewfileUrl.value = userStore.webApiBaseUrl + '/patroltasks/task-todo/exportTaskTodo?taskTodoId=' + row.taskTodoId
  isViewfile.value = true
}
function CloseView() {
  isViewfile.value = false
}
// 导出
function leadingOut(row: any) {
  let params = {
    taskTodoId: row.taskTodoId
  };
  treeloading.value = true
  exportExcel(params).then((response: any) => {
    treeloading.value = false
    downloadFile(response, '巡视结果报告', 'docx')
  }).catch(() => {
    treeloading.value = false
  });
}
onMounted(() => {
  let endDate = moment(new Date()).format('YYYY-MM-DD')
  const now = new Date(endDate)
  const year = now.getFullYear();
  const month = now.getMonth();
  const day = now.getDate();
  let startDate = moment(new Date(year, month - 1, day)).format('YYYY-MM-DD')
  date.value = [startDate, endDate]
  getData(1)
})
</script>
<template>
  <div style="padding:0 15px ;">
    <div style="width:100%;height:17px"></div> 
    <div class="rightNav">
      <div style="position: relative;display: flex;align-items: center; justify-content: space-between;">
        <div style="display: flex;align-items: center;">
          <div  class="screenHomepage "><el-input v-model="taskName"
              placeholder="请输入任务名称" @clear="getData(1)" @keyup.enter="getData(1)" clearable style="width: 170px;" /></div>
          <div class="screenHomepage selType">
            <el-select :teleported="false" :popper-append-to-body="false" v-model="info.type" class="m-2  selType"
              placeholder="任务类型" @change="getData(1)" clearable>
              <el-option v-for="item in InspectionType" :key="item.id" :label="item.dictname" :value="item.itemcode" />
            </el-select>
          </div>
          <div class="screenHomepage selType">
            <el-select :teleported="false" :popper-append-to-body="false" v-model="info.bayId" class="m-2  selType"
              placeholder="间隔" @change="getData(1)" clearable>
              <el-option v-for="item in interval" :key="item.bayId" :label="item.bayName" :value="item.bayId" />
            </el-select>
          </div>
          <div class="screenHomepage selType">
            <el-select :teleported="false" :popper-append-to-body="false" v-model="info.areaId" class="m-2  selType"
              placeholder="设备区域" @change="getData(1)" clearable>
              <el-option v-for="item in area" :key="item.areaId" :label="item.areaName" :value="item.areaId" />
            </el-select>
          </div><div class="screenHomepage selType">
            <el-select :teleported="false" :popper-append-to-body="false" v-model="info.patrolType" class="m-2  selType"
              placeholder="设备类型" @change="getData(1)" clearable>
              <el-option v-for="item in xunshi" :key="item.id" :label="item.dictname" :value="item.itemcode" />
            </el-select>
          </div>
          <div style="margin-left: 10px;" class="screenHomepage">
            <span style="font-size: 14px !important;color: #fff;">审核时间：</span>
            <el-date-picker style="width: 300px;" v-model="date" type="daterange" range-separator="至"
              start-placeholder="开始时间" popper-class="elDatePicker" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
              end-placeholder="结束时间" :clearable="false" @change="getData(1)" />
          </div>
          <el-button class="searchButton" type="primary" @click="getData(1)">搜索</el-button>
          <el-button class="searchButton" type="primary" @click="resetting()">重置</el-button>
        </div>
        <div>
          <el-button class="searchButton" type="primary"  @click="Escalation()" :disabled="multipleSelection.length == 0">上报</el-button>
          <el-button class="searchButton" type="primary" @click="delData" :disabled="multipleSelection.length == 0">删除</el-button>
        </div>
      </div>

      <!-- <div style="position: relative;"> -->
      <el-table :data="tableData" v-loading="treeloading"
        style="width: 100%;margin:auto;position: relative;margin: 5px 0; height:calc(78vh); overflow: auto "
        :header-cell-style="tableBg" stripe
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="30" align="center" />
        <el-table-column type="index" align="center" label="序号" width="50px" />
        <el-table-column prop="taskName" label="任务名称" />
        <el-table-column prop="type" label="任务类型" width="140px">
          <template #default="scope">
            <span>{{ currency(InspectionType, scope.row.type) }}</span>
            <!-- <span v-if="scope.row.type == 1">例行巡视</span>
            <span v-else-if="scope.row.type == 2">特殊巡视</span>
            <span v-else-if="scope.row.type == 3">专项巡视</span>
            <span v-else-if="scope.row.type == 4">自定义巡视</span>
            <span v-else>--</span> -->
          </template>
        </el-table-column>
        <el-table-column prop="deviceSumnum" label="巡视点位总数量" align="center" />
        <el-table-column label="巡视结果" align="center">
          <template #default="scope" >
            <span>成功：{{ scope.row.result.successCount }}；</span><span>失败：{{ scope.row.result.failCount }}</span><br />
            <span>正常：{{ scope.row.result.normalCount }}；</span><span style="color: #FF3300;">异常：{{
              scope.row.result.abnormalCount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="巡视开始时间" />
        <el-table-column prop="endTime" label="巡视结束时间" />
        <el-table-column prop="cexamineUserName" label="审核人" width="100px"/>
        <el-table-column prop="examineDate" label="审核时间" width="170px" align="center" />
        <el-table-column label="操作" width="120px" align="center">
          <template #default="scope">
            <div style="display: flex;justify-content: space-around;align-items: center;">
              <!-- <div class="button-style" @click="viewReport(scope.row)">查看报告</div> -->
              <!-- <div class="button-style" @click="leadingOut(scope.row)">导出</div> -->
              <!-- <div class="button-style" @click="delOneData(scope.row)">删除</div> -->
              <img title="查看报告" src="@/assets/tableIcon/u6143.png" alt="" style="cursor: pointer;" @click="viewReport(scope.row)">
              <img title="导出" src="@/assets/tableIcon/ht_daoc.png" alt="" style="cursor: pointer;" @click="leadingOut(scope.row)">
              <img title="删除" src="@/assets/tableIcon/ht_sc.png" alt="" style="cursor: pointer;" @click="delOneData(scope.row)">
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content: center;margin-top: 5px;">
        <Page style="position: relative;z-index: 100;" :total="total" v-model:size="info.size"
          v-model:current="info.current" @pagination="getData(1)"></Page>
      </div>
      <Viewfile v-if="isViewfile" :showTime="true" :title="title" :url="ViewfileUrl" :type="'docx'" :clientHeight="600"
        @update="CloseView" />
    </div>



  </div>
</template>
<style scoped lang="scss">
.imgbg {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

.searchButton {
  // border: #059a67 solid 1px;
  // background-color: #08503a;
  // color: #00F9A2;
  margin-left: 10px;
}



.rightNav {
  width: 100%;
  height: calc(89vh);
  // background-color: #131a25;
  border: none;
  border-radius: 3px;
  padding: 10px 15px 0px;
  box-sizing: border-box;
  background: url(@/assets/navigation/ty_1614x988.png) ;
  background-size: 100% 100%;

}

// 弹窗
.el-overlay {
  position: fixed;
  z-index: 2023;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: auto;

  .notification {
    width: 400px;
    height: 240px;
    position: relative;
    margin-left: 50%;
    margin-top: 25%;
    transform: translate(-50%, -50%);

    .notification-title {
      position: absolute;
      top: 3px;
      left: 180px;
      color: #fff;
      font-size: 20px;
    }

    .notification-body {
      position: absolute;
      bottom: 15px;
      left: 0;
      right: 0;
    }
  }
}
//按钮样式

.three-button {
  width: 111px;
  height: 41px;
  background: url('@/assets/patrolmonitor/anniiu5.png') no-repeat;
  background-size: 100% 100%;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  color: #009BFF;
  border: none;

  :deep(.el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover) {
    color: #009BFF !important;
    background: url('@/assets/patrolmonitor/anniiu6.png') no-repeat !important;
    background-size: 100% 100% !important;
    border: none !important;
  }

  &:focus {
    color: #009BFF;
    background: url('@/assets/patrolmonitor/anniiu6.png') no-repeat;
    background-size: 100% 100%;
  }

  &:hover {
    border: none !important;
    background: url('@/assets/patrolmonitor/anniiu6.png') no-repeat;
    background-size: 100% 100%;
    color: #009BFF;
  }
}
</style>