123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348 |
- <template>
- <div class='equipment-page'>
- <!-- 搜索框 -->
- <div class='equipment-search-container'>
- <van-search class='equipment-search' v-model='keyword' placeholder='请输入重要事项记录' @search='onSearch' />
- <!-- TODO: 空状态 自定义图标 -->
- <!-- <template #action>
- <div class='search' @click='onSearch'>搜索</div>
- </template>-->
- <!-- </van-search> -->
- </div>
- <!-- 维保列表 -->
- <div class='equipment-list' v-if='list.length'>
- <!-- 维保 -->
- <div class='container-1' v-for="(data, index) in list" :key="data.wb_gzglid + index">
- <div class='date'>
- <div class='report-date'>
- <span>填报日期:</span>
- <span>{{data.reportdate | formatDate}}</span>
- </div>
- <div class='acceptance-date'>
- <span>验收日期:</span>
- <span>{{data.sjjssj | formatDate}}</span>
- </div>
- </div>
- <div class='detail'>{{data.matters || '--'}}</div>
- <ul class='card'>
- <!-- <li class='title'>更换配件</li> -->
- <li class='title'>{{data.description || '--'}}</li>
- <li class='name-model'>配件名称型号:{{data.model||'--'}}</li>
- <!-- <li class='cost'>费用出处:重点设备维修保养资金</li> -->
- <li class='cost'>费用出处:{{data.source ||'--'}}</li>
- <li class='num-amount'>
- <span>数量: {{data.sl || '--'}}个</span>
- <span>金额: {{data.cost ||'--'}}万元</span>
- </li>
- </ul>
- <div class='bottom'>
- <div class='photo' @click='showPhoto(data)'>现场照片: {{data.glsmsImage?data.glsmsImage.length:'--'}}张</div>
- <div class='task-No' @click='showTaskInfo(data)'>任务编号: {{data.wb_gzglid || '--'}}</div>
- </div>
- </div>
- </div>
- <!-- 无数据 -->
- <van-empty class='m-empty' v-if='!list.length' description='暂无数据'>
- <template #image>
- <img class='no-data' src='../../assets/images/search_null.png' alt />
- </template>
- </van-empty>
- <!-- 现场照片预览 -->
- <ImagePreview class='update-img-preview' :key='imgKey' :visible.sync='showImgPreview' :imgList='imgList' />
- <!-- 任务信息 -->
- <div class='task-info-container' v-show='showTask'>
- <van-nav-bar :title='taskText+"信息"' left-arrow @click-left='showTask = false' />
- <ul class='task-info'>
- <li>
- <span class='name'>{{taskText}}编号:</span>
- <span class='data'>{{taskData.No}}</span>
- </li>
- <li>
- <span class='name'>{{taskText}}状态:</span>
- <span class='data'>{{taskData.status}}</span>
- </li>
- <li>
- <span class='name'>{{taskText}}描述:</span>
- <span class='data'>{{taskData.description}}</span>
- </li>
- <li>
- <span class='name'>填报人:</span>
- <span class='data'>{{taskData.reporter}}</span>
- </li>
- <li>
- <span class='name'>联系电话:</span>
- <span class='data'>{{taskData.phone}}</span>
- </li>
- <li>
- <span class='name'>填报时间:</span>
- <span class='data'>{{taskData.reportDate | formatDate}}</span>
- </li>
- <li>
- <span class='name'>验收时间:</span>
- <span class='data'>{{taskData.acceptanceDate | formatDate}}</span>
- </li>
- </ul>
- </div>
- </div>
- </template>
- <script>
- /**
- * 设备页面(正常/或者维修或维保)
- * 点击设备卡片,跳转到改页面
- *
- */
- import Vue from 'vue'
- import { Search, Popup, Button, Empty } from 'vant'
- Vue.use(Search).use(Popup).use(Button).use(Empty)
- import { mapGetters } from 'vuex'
- import ImagePreview from '@/components/ImagePreview'
- import moment from 'moment'
- export default {
- name: 'RepairMaintenance',
- props: {
- type: {
- type: String,
- default: 'maintenance', //默认维保
- },
- list: {
- type: Array,
- default: () => {
- return []
- },
- },
- },
- data() {
- return {
- keyword: '',
- showTask: false, //是否展示工单/任务信息 页面
- showImgPreview: false, //是否展示图片预览
- imgList: [], //图片数组
- imgKey: `img${new Date().getTime()}`,
- taskText: '', //工单,任务信息 页面title
- taskData: {
- No: '--',
- status: '--',
- description: '--',
- reporter: '--',
- phone: '--',
- reportDate: '--',
- acceptanceDate: '--',
- },
- }
- },
- computed: {
- ...mapGetters(['plazaId', 'smsxt', 'categoryId']),
- },
- components: { ImagePreview },
- created() {
- },
- beforeMount() { },
- mounted() { },
- filters: {
- formatDate(value) {
- if (!value) return '--'
- return moment(value).format('YYYY-MM-DD')
- }
- },
- methods: {
- /**
- * 搜索
- */
- onSearch() {
- this.$emit("onSearch", this.keyword)
- },
- // 点击任务编号,显示任务信息
- showTaskInfo(data) {
- if (this.type === "maintenance") {
- this.taskText = '任务'
- } else {
- this.taskText = '工单'
- }
- // 维保
- this.taskData = {
- No: data.wb_gzglid || '--', //任务编号
- status: data.status || '--', //状态
- description: data.description || '--', //描述
- reporter: data.reportedby || '--', //填报人
- phone: data.phone || '--', //联系电话 // TODO: 联系电话
- reportDate: data.reportdate, //填报时间
- acceptanceDate: data.sjjssj, //验收时间
- }
- if (data.wb_gzglid || data.wonum) {
- this.showTask = true
- }
- },
- // 显示图片预览弹窗
- showPhoto(data) {
- // 图片处理
- this.imgList = []
- if (data?.glsmsImage?.length) {
- data.glsmsImage.map((item) => {
- this.imgList.push(item.url)
- })
- }
- this.imgKey = `img${new Date().getTime()}`
- this.$nextTick(() => {
- if (this.imgList?.length) {
- this.showImgPreview = true
- }
- })
- },
- },
- }
- </script>
- <style lang='less' scoped>
- .equipment-page {
- width: 100%;
- height: 100%;
- background-color: #f5f6f7;
- // 搜索
- .equipment-search-container {
- width: 100%;
- height: 55px;
- // background-color: #fff;
- text-align: center;
- .equipment-search {
- width: 80%;
- margin: 0 auto;
- background: none;
- }
- .van-search__content {
- background: #fff;
- border-radius: 50px;
- }
- }
- // 主要维保
- .equipment-list {
- width: 100%;
- min-height: 1px;
- max-height: calc(100% - 55px);
- overflow: auto;
- font-size: 14px;
- font-weight: 400;
- color: #333333;
- .container-1 {
- padding: 15px;
- margin-bottom: 10px;
- background-color: #fff;
- }
- // 维修/维保
- .container-1 {
- .date {
- width: 100%;
- height: 17px;
- display: flex;
- justify-content: space-between;
- margin: 5px 0 10px 0;
- font-size: 12px;
- font-weight: 400;
- color: #666666;
- line-height: 17px;
- }
- .detail {
- width: 100%;
- height: auto;
- margin: 10px 0;
- font-size: 16px;
- font-weight: 600;
- color: #333333;
- line-height: 20px;
- }
- .card {
- width: 100%;
- height: auto;
- padding: 8px 16px;
- background: #eff0f1;
- border-radius: 4px;
- color: #666666;
- font-size: 14px;
- .title {
- height: 20px;
- font-size: 14px;
- font-weight: 500;
- color: #333333;
- line-height: 20px;
- margin-bottom: 8px;
- }
- .name-model,
- .cost,
- .num-amount {
- margin-top: 4px;
- }
- .num-amount {
- display: flex;
- justify-content: space-between;
- }
- }
- .bottom {
- width: 100%;
- height: 17px;
- display: flex;
- justify-content: space-between;
- margin: 5px 0 10px 0;
- color: #025baa;
- line-height: 17px;
- font-size: 14px;
- font-weight: 400;
- color: #025baa;
- margin-top: 20px;
- }
- }
- }
- // 空状态
- .m-empty {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- /deep/ .van-empty__image {
- display: flex;
- justify-content: center;
- align-items: flex-end;
- img {
- width: auto;
- height: auto;
- }
- }
- }
- // 全屏的任务信息
- .task-info-container {
- width: 100%;
- height: 100%;
- position: fixed;
- top: 0;
- left: 0;
- z-index: 1000;
- background-color: #fff;
- .task-info {
- width: 100%;
- padding: 15px;
- li {
- display: flex;
- justify-content: flex-start;
- line-height: 20px;
- font-size: 14px;
- margin-bottom: 12px;
- .name {
- color: #666666;
- width: 70px;
- height: auto;
- }
- .data {
- flex: 1;
- height: auto;
- color: #333333;
- }
- }
- }
- }
- }
- </style>
|