|
|
@@ -0,0 +1,365 @@
|
|
|
+<!-- eslint-disable vue/multi-word-component-names -->
|
|
|
+<template>
|
|
|
+ <div class="gasReport">
|
|
|
+ <customHeader>瓦斯巡检地点管理</customHeader>
|
|
|
+ <div class="report-container">
|
|
|
+ <div class="search-area">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="4">
|
|
|
+ <div class="area-item">
|
|
|
+ <div class="item-text">巡检卡ID：</div>
|
|
|
+ <a-input style="width: 240px" v-model:value="searchId" placeholder="请输入巡检卡ID" />
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="20">
|
|
|
+ <a-button type="primary" preIcon="ant-design:search-outlined" style="margin-left: 10px" @click="getSearchCardId">查询</a-button>
|
|
|
+ <a-button preIcon="ant-design:sync-outlined" style="margin: 0px 15px" @click="getReset">重置</a-button>
|
|
|
+ <a-button type="primary" preIcon="ant-design:import-outlined" @click="getupload">导入</a-button>
|
|
|
+ <a-button type="primary" preIcon="ant-design:download-outlined" style="margin: 0px 15px" @click="getdownload">导出</a-button>
|
|
|
+ <a-dropdown>
|
|
|
+ <template #overlay>
|
|
|
+ <a-menu @click="handlerFilter">
|
|
|
+ <a-menu-item key="1">
|
|
|
+ <UserOutlined />
|
|
|
+ 一次
|
|
|
+ </a-menu-item>
|
|
|
+ <a-menu-divider />
|
|
|
+ <a-menu-item key="2">
|
|
|
+ <UserOutlined />
|
|
|
+ 两次
|
|
|
+ </a-menu-item>
|
|
|
+ </a-menu>
|
|
|
+ </template>
|
|
|
+ <a-button type="primary">
|
|
|
+ 巡检次数筛选
|
|
|
+ <DownOutlined />
|
|
|
+ </a-button>
|
|
|
+ </a-dropdown>
|
|
|
+ <a-button type="primary" preIcon="ant-design:plus-outlined" style="margin-left: 15px" @click="getTjAddress">新增瓦斯巡检地址</a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ <a-table
|
|
|
+ :key="keyActive"
|
|
|
+ :columns="columns2"
|
|
|
+ size="small"
|
|
|
+ :data-source="tableData"
|
|
|
+ :scroll="{ y: 500 }"
|
|
|
+ class="tableW"
|
|
|
+ :pagination="pagination"
|
|
|
+ @change="pageChange"
|
|
|
+ >
|
|
|
+ <template #action="{ record }">
|
|
|
+ <a class="table-action-link" @click="handlerEdit(record)">编辑</a>
|
|
|
+ <a-popconfirm title="删除内容无法恢复，是否删除" ok-text="确定" cancel-text="取消" @confirm="handleDelCardInfo(record)">
|
|
|
+ <a class="table-action-link">删除</a>
|
|
|
+ </a-popconfirm>
|
|
|
+ <a class="table-action-link" @click="moveUp(record)">上移</a>
|
|
|
+ <a class="table-action-link" @click="moveDown(record)">下移</a>
|
|
|
+ </template>
|
|
|
+ <template #bodyCell="{ column, text }">
|
|
|
+ <template v-if="column.dataIndex == 'isSensor'">
|
|
|
+ <div v-if="text == '1'">
|
|
|
+ <div class="table-text text-y">是</div>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <div class="table-text text-n">否</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="column.dataIndex == 'checkState'">
|
|
|
+ <div v-if="text == '1'">
|
|
|
+ <div class="table-text text-y">已检</div>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <div class="table-text text-n">未检</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ <!-- 任务管理弹窗 -->
|
|
|
+ <a-modal v-model:visible="visibleTask" width="850px" :footer="null" :title="titleTask" centered destroyOnClose>
|
|
|
+ <inspectTask @handleTaskSubmit="handleTaskSubmit" @handleTaskCancel="handleTaskCancel" />
|
|
|
+ </a-modal>
|
|
|
+ <!-- 编辑弹窗 -->
|
|
|
+ <a-modal v-model:visible="visibleEdit" width="650px" :footer="null" :title="titleEdit" centered destroyOnClose>
|
|
|
+ <inspectEdit :inspectEditData="inspectEditData" @confirmEdit="confirmEdit" @cancelEdit="cancelEdit" />
|
|
|
+ </a-modal>
|
|
|
+
|
|
|
+ <!-- 导入弹窗 -->
|
|
|
+ <a-modal v-model:visible="visibleUploadorDown" width="450px" :footer="null" :title="titleUploadorDown" centered destroyOnClose>
|
|
|
+ <uploadOrdown :modalType="modalType" @handlerComfirm="handlerComfirm" @handlerCancel="handlerCancel" />
|
|
|
+ </a-modal>
|
|
|
+ <!-- 新增瓦斯巡检地点弹窗 -->
|
|
|
+ <a-modal v-model:visible="visibleAddress" width="450px" :footer="null" :title="titleAddress" centered destroyOnClose>
|
|
|
+ <addressAdd @confirmAddress="confirmAddress" @cancelAddress="cancelAddress" />
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+ import { ref, onMounted, reactive } from 'vue';
|
|
|
+ import customHeader from '/@/components/vent/customHeader.vue';
|
|
|
+ import inspectTask from './components/inspectTask.vue';
|
|
|
+ import inspectEdit from './components/inspectEdit.vue';
|
|
|
+ import uploadOrdown from './components/uploadOrdown.vue';
|
|
|
+ import addressAdd from './components/addressAdd.vue';
|
|
|
+ import { message } from 'ant-design-vue';
|
|
|
+ import { columns2, pagination } from './gasInspectNonfc.data';
|
|
|
+ import { list, importByExcel, exportGasByExcel, moveOrderNum, edit, taskSubmit, clearCardInfo, addGasReportAddress } from './gasInspectNonfc.api';
|
|
|
+
|
|
|
+ let keyActive = ref(0);
|
|
|
+ let searchId = ref('');
|
|
|
+ let tableData = ref<any[]>([]); //巡检列表
|
|
|
+ let visibleTask = ref(false); //控制任务管理弹窗的显示与隐藏
|
|
|
+ let titleTask = ref('');
|
|
|
+ let visibleEdit = ref(false); //控制编辑弹窗的显示与隐藏
|
|
|
+ let titleEdit = ref(''); //编辑弹窗标题
|
|
|
+ let inspectEditData = reactive({}); //编辑弹窗数据
|
|
|
+ let visibleUploadorDown = ref(false); //控制导入/导出弹窗的显示与隐藏
|
|
|
+ let titleUploadorDown = ref('');
|
|
|
+ let modalType = ref(''); //判断当前是导入/导出弹窗
|
|
|
+ let visibleAddress = ref(false); //控制巡检地址新增弹窗的显示与隐藏
|
|
|
+ let titleAddress = ref(''); //区队巡检地址新增弹窗标题
|
|
|
+
|
|
|
+ //打开任务管理弹窗
|
|
|
+ // let handlerTask = () => {
|
|
|
+ // visibleTask.value = true;
|
|
|
+ // titleTask.value = '瓦斯巡检任务管理';
|
|
|
+ // };
|
|
|
+ //任务管理下发
|
|
|
+ async function handleTaskSubmit(param) {
|
|
|
+ let res = await taskSubmit({ ...param });
|
|
|
+ if (res) {
|
|
|
+ visibleTask.value = false;
|
|
|
+ queryByIdList();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //任务管理弹窗关闭
|
|
|
+ let handleTaskCancel = () => {
|
|
|
+ visibleTask.value = false;
|
|
|
+ };
|
|
|
+ //打开编辑弹窗
|
|
|
+ let handlerEdit = (record) => {
|
|
|
+ visibleEdit.value = true;
|
|
|
+ titleEdit.value = '瓦斯巡检点编辑';
|
|
|
+ inspectEditData = Object.assign({}, record);
|
|
|
+ };
|
|
|
+ //编辑提交
|
|
|
+ async function confirmEdit(param) {
|
|
|
+ let res = await edit({ ...param });
|
|
|
+ if (res) {
|
|
|
+ queryByIdList();
|
|
|
+ visibleEdit.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //编辑取消
|
|
|
+ let cancelEdit = () => {
|
|
|
+ visibleEdit.value = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ //删除巡检卡信息
|
|
|
+ async function handleDelCardInfo(record) {
|
|
|
+ let res = await clearCardInfo({ id: record.id });
|
|
|
+ if (res) {
|
|
|
+ queryByIdList();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //通过id（巡检卡id）查询
|
|
|
+ async function queryByIdList() {
|
|
|
+ let res = await list({ id: searchId.value, pageNo: pagination.current, pageSize: pagination.pageSize });
|
|
|
+ keyActive.value = new Date().getTime();
|
|
|
+ tableData.value = res.records.map((el: any) => {
|
|
|
+ return {
|
|
|
+ morning: el.insType,
|
|
|
+ afterNoon: el.insType,
|
|
|
+ evening: el.insType,
|
|
|
+ ...el,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ pagination.total = res.total;
|
|
|
+ }
|
|
|
+ //查询
|
|
|
+ let getSearchCardId = () => {
|
|
|
+ pagination.current = 1;
|
|
|
+ queryByIdList();
|
|
|
+ };
|
|
|
+ //重置
|
|
|
+ let getReset = () => {
|
|
|
+ pagination.current = 1;
|
|
|
+ searchId.value = '';
|
|
|
+ queryByIdList();
|
|
|
+ };
|
|
|
+ //分页切换
|
|
|
+ let pageChange = (val) => {
|
|
|
+ pagination.current = val.current;
|
|
|
+ pagination.pageSize = val.pageSize;
|
|
|
+ queryByIdList();
|
|
|
+ };
|
|
|
+ //导入
|
|
|
+ let getupload = () => {
|
|
|
+ modalType.value = 'upload';
|
|
|
+ visibleUploadorDown.value = true;
|
|
|
+ titleUploadorDown.value = '导入';
|
|
|
+ };
|
|
|
+ //确定导入
|
|
|
+ async function handlerComfirm(param) {
|
|
|
+ if (modalType.value == 'upload') {
|
|
|
+ let res = await importByExcel(param);
|
|
|
+ if (res.code == 200) {
|
|
|
+ visibleUploadorDown.value = false;
|
|
|
+ message.success('导入成功');
|
|
|
+ queryByIdList();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ let res = await exportGasByExcel({ insType: param.insType });
|
|
|
+ console.log(res, '导出数据');
|
|
|
+ if (res) {
|
|
|
+ let filename = `${new Date().getTime()}.xlsx`;
|
|
|
+ downFilePublic(res, filename);
|
|
|
+ message.success('导出成功');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //导出
|
|
|
+ let getdownload = () => {
|
|
|
+ modalType.value = 'download';
|
|
|
+ visibleUploadorDown.value = true;
|
|
|
+ titleUploadorDown.value = '导出';
|
|
|
+ };
|
|
|
+ //确定导出
|
|
|
+ async function handlerCancel() {
|
|
|
+ modalType.value = '';
|
|
|
+ }
|
|
|
+ // 下载公用方法
|
|
|
+ function downFilePublic(content, fileName) {
|
|
|
+ const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
|
|
|
+ // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
|
|
|
+ // IE10以上支持blob但是依然不支持download
|
|
|
+ if ('download' in document.createElement('a')) {
|
|
|
+ // 支持a标签download的浏览器
|
|
|
+ const link = document.createElement('a'); // 创建a标签
|
|
|
+ link.download = fileName; // a标签添加属性
|
|
|
+ link.style.display = 'none';
|
|
|
+ link.href = URL.createObjectURL(blob);
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click(); // 执行下载
|
|
|
+ URL.revokeObjectURL(link.href); // 释放url
|
|
|
+ document.body.removeChild(link); // 释放标签
|
|
|
+ } else {
|
|
|
+ // 其他浏览器
|
|
|
+ // navigator.msSaveBlob(blob, fileName);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //列表上移
|
|
|
+ async function moveUp(param) {
|
|
|
+ let res = await moveOrderNum({ id: param.id, moveType: 'upp' });
|
|
|
+ console.log(res, '向上移动');
|
|
|
+ if (res) {
|
|
|
+ queryByIdList();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //列表下移
|
|
|
+ async function moveDown(param) {
|
|
|
+ let res = await moveOrderNum({ id: param.id, moveType: 'bel' });
|
|
|
+ console.log(res, '向下移动');
|
|
|
+ if (res) {
|
|
|
+ queryByIdList();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //巡检次数筛选
|
|
|
+ let handlerFilter = (param) => {
|
|
|
+ let data = param.key;
|
|
|
+ switch (data) {
|
|
|
+ case '1':
|
|
|
+ pagination.current = 1;
|
|
|
+ tableData.value = tableData.value.filter((v) => v.insType == '1');
|
|
|
+ break;
|
|
|
+ case '2':
|
|
|
+ pagination.current = 2;
|
|
|
+ tableData.value = tableData.value.filter((v) => v.insType == '2');
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ //新增瓦斯巡检地点
|
|
|
+ let getTjAddress = () => {
|
|
|
+ visibleAddress.value = true;
|
|
|
+ titleAddress.value = '新增瓦斯巡检地址';
|
|
|
+ };
|
|
|
+ //确定新增
|
|
|
+ async function confirmAddress(param) {
|
|
|
+ let res = await addGasReportAddress(param);
|
|
|
+ console.log(res, '新增瓦斯巡检地点');
|
|
|
+ if (res) {
|
|
|
+ visibleAddress.value = false;
|
|
|
+ queryByIdList();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //取消新增
|
|
|
+ let cancelAddress = () => {
|
|
|
+ visibleAddress.value = false;
|
|
|
+ };
|
|
|
+ onMounted(() => {
|
|
|
+ queryByIdList();
|
|
|
+ });
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ .gasReport {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 80px 10px 15px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .search-area {
|
|
|
+ margin: 20px 0px;
|
|
|
+
|
|
|
+ .area-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .item-text {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-text {
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-y {
|
|
|
+ color: #0be716;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-n {
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zxm-picker,
|
|
|
+ .zxm-input {
|
|
|
+ border: 1px solid #3ad8ff77 !important;
|
|
|
+ background-color: #ffffff00 !important;
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.zxm-table-thead > tr > th:last-child) {
|
|
|
+ border-right: 1px solid #91e9fe !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.zxm-picker-input > input) {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
|
|
|
+ border: 1px solid #3ad8ff77 !important;
|
|
|
+ background-color: #ffffff00 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.zxm-select-selection-item) {
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+</style>
|
