客户资料 巡检任务业务

renkang

2025-02-07 6ad07bc0ea2f00bc676fd6a724de630760544a50

 admin/src/views/operation/components/deviceDetail.vue

@@ -1,7 +1,14 @@
<template>
  <GlobalWindow width="720px" title="工单详情" :visible.sync="visible" :confirm-working="isWorking" @close="close"
  <GlobalWindow width="100%" title="设备详情" :withFooter="false" :visible.sync="visible" :confirm-working="isWorking" @close="close"
    @confirm="confirm">
    <div class="main">
    <div style="width: 100%; position: sticky; top: 0; left: 0; z-index: 999; background: #ffffff;">
      <div class="tabs">
        <div class="tab" :class="{ active: activeTabs === 0 }" @click="tabsClick(0)">设备信息</div>
        <div class="tab" :class="{ active: activeTabs === 1 }" @click="tabsClick(1)">运维记录</div>
        <div class="tab" :class="{ active: activeTabs === 2 }" @click="tabsClick(2)">巡检记录</div>
      </div>
    </div>
    <div class="main" v-if="activeTabs === 0">
      <div class="title">
        <span>基础信息</span>
      </div>
@@ -25,11 +32,23 @@
          </div>
          <div class="item">
            <div class="la">设备管理员</div>
            <div class="val">{{ info.realName }}</div>
            <div class="val">{{ info.realName || info.realname }}</div>
          </div>
          <div class="item">
            <div class="la">所在位置</div>
            <div class="val">{{ info.addr }}</div>
          </div>
          <div class="item">
            <div class="la">所属项目</div>
            <div class="val">{{ info.projectName }}</div>
          </div>
          <div class="item">
            <div class="la">关联房源</div>
            <div class="val">{{ info.buildingName }} / {{ info.floorName }} / {{info.roomName}}</div>
          </div>
          <div class="item">
            <div class="la">购入时间</div>
            <div class="val">{{ info.buyDate }}</div>
          </div>
          <div class="item">
            <div class="la">设备状态</div>
@@ -48,24 +67,189 @@
          <div v-if="info.fileFullUrl" class="item" style="width: 100%;">
            <div class="la">照片</div>
            <div class="val">
              <img class="photo" :src="info.fileFullUrl" alt="">
              <el-image
                style="width: 100px; height: 100px"
                :src="info.fileFullUrl"
                :preview-src-list="[info.fileFullUrl]">
              </el-image>
            </div>
          </div>
          <div class="item" style="width: 100%;">
            <div class="la">附件</div>
            <div class="val">
              <el-table
                :data="info.multifileList ? info.multifileList : []"
                border
                style="width: 100%">
                <el-table-column
                  prop="name"
                  label="附件名称">
                </el-table-column>
                <el-table-column
                  prop="userName"
                  label="操作人">
                </el-table-column>
                <el-table-column
                  prop="createDate"
                  label="操作时间">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <div class="title">
        <span>供应商信息</span>
      </div>
      <div class="main_content">
        <div class="list">
          <div class="item">
            <div class="la">供应商</div>
            <div class="val">{{info.supplier}}</div>
          </div>
          <div class="item">
            <div class="la">联系人</div>
            <div class="val">{{info.supplierLinker}}</div>
          </div>
          <div class="item">
            <div class="la">联系方式</div>
            <div class="val">{{info.supplierPhone}}</div>
          </div>
        </div>
      </div>
      <div class="title">
        <span>维保信息</span>
      </div>
      <div class="main_content">
        <div class="list">
          <div class="item">
            <div class="la">维保负责人</div>
            <div class="val">{{info.maintenanceUserName}}</div>
          </div>
          <div class="item">
            <div class="la">维保到期日</div>
            <div class="val">{{info.maintenanceOverDate}}</div>
          </div>
          <div class="item" style="width: 100%;">
            <div class="la">维保说明</div>
            <div class="val">{{info.maintenanceContent}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="main" v-if="activeTabs === 1">
      <el-table
        :data="infoList"
        border
        style="width: 100%">
        <el-table-column
          prop="realName"
          label="运维人员">
        </el-table-column>
        <el-table-column
          label="设备状态">
          <template slot-scope="{row}">
            <span v-if="row.status === 0">正常</span>
            <span v-if="row.status === 1">损坏</span>
            <span v-if="row.status === 2">报废</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="运维备注">
        </el-table-column>
        <el-table-column
          prop="dealDate"
          label="运维时间">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="{row}">
            <el-button type="text" @click="handleDetail(row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <div class="main" v-if="activeTabs === 2">
      <el-table
        :data="infoList"
        border
        style="width: 100%">
        <el-table-column
          prop="schemeTitle"
          label="计划名称">
        </el-table-column>
        <el-table-column
          prop="taskCode"
          label="任务编号">
        </el-table-column>
        <el-table-column
          label="任务时间">
          <template slot-scope="{row}">
            {{row.startDate}} ~ {{row.endDate}}
          </template>
        </el-table-column>
        <el-table-column
          prop="realname"
          label="巡检人">
        </el-table-column>
        <el-table-column
          label="巡检结果">
          <template slot-scope="{row}">
            <span v-if="row.dealStatus === 0">正常</span>
            <span v-if="row.dealStatus === 1">异常</span>
          </template>
        </el-table-column>
        <el-table-column
          label="巡检附件">
          <template slot-scope="{row}">
            <el-image
              v-if="row.multifileList && row.multifileList.length > 0"
              style="width: 100px; height: 100px"
              :src="row.multifileList[0].fileurlFull"
              :preview-src-list="[row.multifileList[0].fileurlFull]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="content"
          label="巡检说明">
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <Detail ref="DetailRef" />
  </GlobalWindow>
</template>

<script>
import GlobalWindow from '@/components/common/GlobalWindow'
import BaseOpera from '@/components/base/BaseOpera'
import Detail from './maintainDetail'
import { detailById } from '@/api/Inspection/device.js'
import { getUserList } from '@/api/system/user'
import { Message, Loading } from 'element-ui'
import { fetchList } from '@/api/Inspection/deviceRecord.js'
import { getDetail } from '@/api/Inspection/ywPatrolTask.js'
export default {
  components: {
    GlobalWindow
    GlobalWindow,
    Detail
  },
  extends: BaseOpera,
  data() {
@@ -73,19 +257,83 @@
      id: '',
      visible: false,
      info: {},

      activeTabs: 0,
      fileList: [],
  
      infoList: [],
      total: 0,
      pageSize: 10,
      page: 1
    }
  },
  methods: {
    handleSizeChange(e) {
      this.pageSize = e
      if (this.activeTabs === 1) {
        this.getyunwei()
      } else if (this.activeTabs === 2) {
        this.getXunJian()
      }
    },
    handleCurrentChange(e) {
      this.page = e
      if (this.activeTabs === 1) {
        this.getyunwei()
      } else if (this.activeTabs === 2) {
        this.getXunJian()
      }
    },
    getDetail() {
      this.this.activeTabs = 0
      const { id } = this
      detailById(id).then(res => {
        this.info = res
      })
    },
    handleDetail(row) {
      this.$refs.DetailRef.visible = true
      this.$refs.DetailRef.getDetail(row.id)
    },
    close() {
      this.visible = false
      this.$emit('close')
    },
    tabsClick(val) {
      this.activeTabs = val
      this.pageSize = 10
      this.page = 1
      this.infoList = []
      if (val === 1) {
        this.getyunwei()
      } else if (val === 2) {
        this.getXunJian()
      }
    },
    // 获取设备运维记录
    getyunwei() {
      fetchList({
        capacity: this.pageSize,
        page: this.page,
        model: {
          deviceId: this.id
        }
      }).then(res => {
        this.infoList = res.records
        this.total = res.total
      })
    },
    // 巡检记录
    getXunJian() {
      getDetail({
        capacity: this.pageSize,
        page: this.page,
        model: {
          deviceId: this.id
        }
      }).then(res => {
        this.infoList = res.records
        this.total = res.total
      })
    }
  }
}
@@ -93,7 +341,24 @@

<style lang="scss" scoped>
@import '@/assets/style/variables.scss';

.tabs {
  border-bottom: 1px solid #DFE2E8;
  display: flex;
  .tab {
    height: 58px;
    line-height: 58px;
    font-size: 16px;
    color: #666666;
    margin-right: 30px;
    cursor: pointer;
  }
  
  .active {
    font-weight: 500;
    color: $primary-color;
    border-bottom: 2px solid $primary-color;
  }
}
.main {
  padding-top: 20px;

@@ -138,7 +403,7 @@

    .item {
      width: 33.3%;
      margin-bottom: 12px;
      margin-bottom: 14px;

      .photo {
        width: 92px;
@@ -147,7 +412,7 @@

      .la {
        color: #7f7f7f;
        margin-top: 2px;
        margin-bottom: 6px;
      }
    }