|
|
@@ -0,0 +1,299 @@
|
|
|
+<template>
|
|
|
+ <view class="uni-container uni-container-bg">
|
|
|
+ <!-- 搜索框 -->
|
|
|
+ <uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
|
|
|
+ <uni-col :span="24">
|
|
|
+ <view class="u-page__tag-item">
|
|
|
+ <u-search placeholder="请输入培训演练名称" bgColor="#edf6f9" borderColor="#4cb2b6" v-model="keyword"
|
|
|
+ :show-action="true" @custom="search"></u-search>
|
|
|
+ </view>
|
|
|
+ </uni-col>
|
|
|
+ </uni-row>
|
|
|
+ <!-- 下拉框 -->
|
|
|
+ <view class="u-page__tag-item"
|
|
|
+ style="margin-bottom: 26upx;width: 700upx;border-bottom: 2px solid #55cbbf;background-color: #f5f7fa;">
|
|
|
+ <u-form>
|
|
|
+ <u-form-item prop="orgName" @click="
|
|
|
+ showOrg = true;
|
|
|
+ hideKeyboard();
|
|
|
+ " label="单位选择:" labelWidth="100px">
|
|
|
+ <!-- <u-picker :show="showOrg" :columns="actions"></u-picker> -->
|
|
|
+ <u--input border="none" disabled v-model="formData.orgName" placeholder="请选择所属单位"></u--input>
|
|
|
+ <u-icon slot="right" name="arrow-down"></u-icon>
|
|
|
+ </u-form-item>
|
|
|
+ </u-form>
|
|
|
+ </view>
|
|
|
+ <!-- 卡片栏 -->
|
|
|
+ <view v-if="tableData.length>0 && isLoaded">
|
|
|
+ <view v-for="(item, index) in tableData" :key="index"
|
|
|
+ v-if="formData.orgName == item.orgName || formData.orgId == item.orgId">
|
|
|
+ <uni-card>
|
|
|
+ <!-- 标题 -->
|
|
|
+ <view class="titles">{{ item.detinspect }}</view>
|
|
|
+ <!-- 简要内容 -->
|
|
|
+ <view style="display: flex;margin-bottom: 15rpx; color: #728f90;">
|
|
|
+ <text class="name-align-drill">检测项目：</text>
|
|
|
+ <text class="conts">{{ item.detinspect }}</text>
|
|
|
+ </view>
|
|
|
+ <view style="display: flex;margin-bottom: 15rpx; color: #728f90;">
|
|
|
+ <text class="name-align-drill">所属单位：</text>
|
|
|
+ <text class="conts">{{ item.orgId }}</text>
|
|
|
+ </view>
|
|
|
+ <view style="display: flex;margin-bottom: 15rpx; color: #728f90;">
|
|
|
+ <text class="name-align-drill"> 检测维保结果:</text>
|
|
|
+ <text class="conts max-width">{{ item.detresult }}</text>
|
|
|
+ </view>
|
|
|
+ <!-- 删除按钮 -->
|
|
|
+ <view class="an-niu" @click.native="showModal(item)">
|
|
|
+ <view class="detailDel">删除</view>
|
|
|
+ </view>
|
|
|
+ <view class="an-niu" @click.native="onClick(item,formData.orgName)" link><text
|
|
|
+ class="detail">查看详情</text></view>
|
|
|
+ </uni-card>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- tableData为空时显示 -->
|
|
|
+ <view v-else-if="tableData.length==0 && isLoaded" style="text-align: center;">
|
|
|
+ <view class="text-gray" style="padding-top: 20px;" v-if="tableData == 0">
|
|
|
+ <img :src="tan90" alt="暂无数据" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <image :src="Group" @click="addClick" class="tiantupian"></image>
|
|
|
+ </view>
|
|
|
+ <u-action-sheet :show="showOrg" :actions="actions" title="请选择单位" @close="showOrg = false"
|
|
|
+ @select="sexSelect"></u-action-sheet>
|
|
|
+ <u-modal :show="show" @confirm="confirm" @cancel="cancel" @close="close" asyncClose closeOnClickOverlay
|
|
|
+ showCancelButton confirmColor="red" :title="title" :content="content" ref="uModal"></u-modal>
|
|
|
+ <!-- 加载中 -->
|
|
|
+ <isLodingModel></isLodingModel>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ var that = '';
|
|
|
+ import {
|
|
|
+ createFpdDetection, //创建消防设备维护和检测台账
|
|
|
+ updateFpdDetection, //更新消防设备维护和检测台账
|
|
|
+ deleteFpdDetection, //删除消防设备维护和检测台账
|
|
|
+ getFpdDetection, //获得消防设备维护和检测台账
|
|
|
+ getFpdDetectionPage, //获得消防设备维护和检测台账分页
|
|
|
+ exportFpdDetectionExcel, //导出消防设备维护和检测台账 Excel
|
|
|
+ } from '@/api/fpdDetection/index.js';
|
|
|
+ import config from '@/config'
|
|
|
+ const baseUrlImg = config.baseUrlImg
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isLoaded: false,
|
|
|
+ Group: `${baseUrlImg}/checkActive/Group.png`,
|
|
|
+ showOrg: false,
|
|
|
+ actions: [],
|
|
|
+ // 数据
|
|
|
+ tableData: [],
|
|
|
+ title: '是否删除该数据项?',
|
|
|
+ content: '确认删除？',
|
|
|
+ id: '',
|
|
|
+ tan90: `${baseUrlImg}/tan90.png`,
|
|
|
+ // 每页数据量
|
|
|
+ pageSize: 10,
|
|
|
+ // 当前页
|
|
|
+ pageNo: 1,
|
|
|
+ // 数据总量
|
|
|
+ total: 0,
|
|
|
+ // tableData数据加载中
|
|
|
+ loading: false,
|
|
|
+ // 初始化时搜索框的值
|
|
|
+ keyword: '',
|
|
|
+ // 存放orgid,orgname
|
|
|
+ formData: {
|
|
|
+ orgName: ''
|
|
|
+ },
|
|
|
+ show: false,
|
|
|
+ showtimeStart: false,
|
|
|
+ showtimeEnd: false,
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ detdate: [],
|
|
|
+ detinspect: null,
|
|
|
+ detresult: null,
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ loading: {
|
|
|
+ handler(newLength, oldLength) {
|
|
|
+ this.$modal.isLoadingModel(this.loading)
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ // 执行查询
|
|
|
+ getFpdDetectionPage(this.queryParams).then(response => {
|
|
|
+ this.tableData = response.data.list;
|
|
|
+ this.isLoaded = true
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ body {
|
|
|
+ background-color: #f5f7f9;
|
|
|
+ }
|
|
|
+
|
|
|
+ page {
|
|
|
+ background-color: #f5f7f9;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .u-tabs__wrapper[data-v-0de61367],
|
|
|
+ /deep/ .u-tabs__wrapper.data-v-0de61367,
|
|
|
+ /deep/ .u-tabs__wrapper {
|
|
|
+ width: 99%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-tabs__wrapper__nav__item[data-v-0de61367],
|
|
|
+ /deep/.u-tabs__wrapper__nav__item.data-v-0de61367,
|
|
|
+ /deep/.u-tabs__wrapper__nav__item {
|
|
|
+ padding: 0 60rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uni-container {
|
|
|
+ height: 100vh;
|
|
|
+ padding-right: 20upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .addInsp {
|
|
|
+ width: 40px;
|
|
|
+ position: fixed;
|
|
|
+ right: 4px;
|
|
|
+ z-index: 99999;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .u-icon__icon {
|
|
|
+ margin-right: 0px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .an-niu {
|
|
|
+ float: right;
|
|
|
+ font-size: 10px;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ margin-top: -64upx;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ // margin-top: 50rpx;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ .detail {
|
|
|
+ width: 60px;
|
|
|
+ height: 60rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ border-radius: 30px;
|
|
|
+ background-color: #f7c41e;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 60rpx;
|
|
|
+ font-size: 27upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detailDel {
|
|
|
+ width: 60px;
|
|
|
+ height: 60rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ border-radius: 30px;
|
|
|
+ background-color: #ff2e31;
|
|
|
+ color: white;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 60rpx;
|
|
|
+ font-size: 30upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .solve {
|
|
|
+ width: 62px;
|
|
|
+ height: 60rpx;
|
|
|
+
|
|
|
+ margin-right: 20rpx;
|
|
|
+ border-radius: 30px;
|
|
|
+ background-color: #4cb2b6;
|
|
|
+ line-height: 60rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .padding-tb-sm {
|
|
|
+ padding-top: 0px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .deletes {
|
|
|
+ width: 62px;
|
|
|
+ height: 60rpx;
|
|
|
+ border-radius: 60rpx;
|
|
|
+ background-color: red;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.segmented-control__item--button {
|
|
|
+ background-color: rgb(76, 178, 182) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.segmented-control__item--button--active {
|
|
|
+ background-color: #ffffff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.uni-card {
|
|
|
+ box-shadow: 0px 0px 3px 0px rgba(86, 165, 168, 0.63) !important;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tiantupian {
|
|
|
+ width: 110rpx;
|
|
|
+ height: 110rpx;
|
|
|
+ position: fixed;
|
|
|
+ right: 15px;
|
|
|
+ bottom: 80rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ //列表样式
|
|
|
+ .titles {
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ color: black;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .conts {
|
|
|
+ max-width: 470rpx;
|
|
|
+ display: -webkit-box;
|
|
|
+ /*弹性伸缩盒子模型显示*/
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ /*排列方式*/
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ /*显示文本行数*/
|
|
|
+ overflow: hidden;
|
|
|
+ /*溢出隐藏*/
|
|
|
+ color: #274647;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ /*不知道干嘛的*/
|
|
|
+
|
|
|
+ .conts-title {
|
|
|
+ margin-right: 10rpx;
|
|
|
+ color: #728f90;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .max-width {
|
|
|
+ max-width: 180upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .u-form-item__body__left__content__label {
|
|
|
+ font-size: 28upx !important;
|
|
|
+ }
|
|
|
+</style>
|
liuQiang