页面处理

wjt

2024-06-24 69a9c21a3c4559e5ce9ec88c30955b38118e0693

 src/views/infomanger/enforcement/component/details.vue

@@ -1,75 +1,115 @@
<template>
  <el-dialog title="执法详情" width="1000px" v-model="dialogVisible" @close="closeDialog">
    <div>
  <el-dialog title="执法详情" width="900px" v-model="dialogVisible" @close="closeDialog">
    <div v-loading="loading">
      <div class="title">执法信息</div>
      <div>
      <div class="content">
        <el-row>
          <el-col :span="12">
            <div class="label">执法类型</div> <div class="value">司法检查</div>
            <div class="label">执法类型</div>
            <div class="value">司法检查</div>
          </el-col>
          <el-col :span="12">
            <div class="label">执法部门</div> <div class="value">司法检查</div>
            <div class="label">执法部门</div>
            <div class="value">{{ details.applyDeptName }}</div>
          </el-col>
          <el-col :span="12">
            <div class="label">企业</div> <div class="value">司法检查</div>
            <div class="label">企业</div>
            <div class="value">{{ details.companyName }}</div>
          </el-col>
          <el-col :span="12">
            <div class="label">执法人员</div> <div class="value">司法检查</div>
            <div class="label">执法人员</div>
            <div class="value">{{ details.executeUser || details.applyUser }}</div>
          </el-col>
          <el-col :span="12">
            <div class="label">随行人员</div> <div class="value">司法检查</div>
            <div class="label">随行人员</div>
            <div class="value">
              <div v-for="(item, index) in details.peers" :key="index">
                {{ item.peerUser }} ({{ item.peerDeptName }})
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="label">申请时间</div> <div class="value">司法检查</div>
            <div class="label">申请时间</div>
            <div class="value">{{ details.applyTime || "" }}</div>
          </el-col>
          <el-col :span="12">
            <div class="label">执法时间</div> <div class="value">司法检查</div>
            <div class="label">执法时间</div>
            <div class="value">{{ details.executeTime || details.planTime }}</div>
          </el-col>
          <el-col :span="12">
            <div class="label">状态</div> <div class="value">司法检查</div>
            <div class="label">状态</div>
            <div class="value">{{ status.orderStatusMap[details.orderStatus] }}</div>
          </el-col>
          <el-col :span="24">
            <div class="label">执法内容</div> <div class="value">1.火灾隐患整改情况以及防范措施的落实情况。

2.安全疏散通道、疏散指示标志、应急照明和安全出口情况。

3.消防车通道、消防水源情况。</div>
            <div class="label">执法内容</div>
            <div class="value">{{ details.enforceContent || "--" }}</div>
          </el-col>
        </el-row>
      </div>
      <div class="title">执法记录</div>
      <div>
        <el-row>
          <el-col :span="12">
            <div class="label">执法主题</div> <div class="value">司法检查</div>
          </el-col>
          <el-col :span="12">
            <div class="label">是否通知企业</div> <div class="value">司法检查</div>
          </el-col>
          <el-col :span="24">
            <div class="label">执法过程</div> <div class="value">司法检查</div>
          </el-col>
          <el-col :span="12">
            <div class="label">执法结果</div> <div class="value">司法检查</div>
          </el-col>
        </el-row>
      <div v-if="details.orderStatus == 4">
        <div class="title">执法记录</div>
        <div class="content">
          <el-row>
            <el-col :span="12">
              <div class="label">执法主题</div>
              <div class="value">{{ details.enforceReason || '' }}</div>
            </el-col>
            <el-col :span="12">
              <div class="label">是否通知企业</div>
              <div class="value">{{ status.isNoticeCompany[details.isNoticeCompany] }}</div>
            </el-col>
            <el-col :span="24">
              <div class="label">执法过程</div>
              <div class="value">
                <div>
                  <img :src="baseUrl + item" alt="" class="image" v-for="(item, index) in details.regionImgs"
                    :key="index" />
                </div>
                <div>
                  {{ details.enforceContent }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="label">执法结果</div>
              <div class="value">
                {{ status.regionStatus[details.regionStatus] }}
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="title">执法评价</div>
      <div>
        <el-row>
          <el-col :span="12">
            <div class="label">执法专业性</div> <div class="value">司法检查</div>
          </el-col>
          <el-col :span="12">
            <div class="label">执法合理性</div> <div class="value">司法检查</div>
          </el-col>
          <el-col :span="24">
            <div class="label">执法认真程度</div> <div class="value">司法检查</div>
          </el-col>
          <el-col :span="12">
            <div class="label">执法结果满意度</div> <div class="value">司法检查</div>
          </el-col>
        </el-row>
      <div v-if="details.orderStatus == 4 && details.evaluateVo">
        <div class="title">执法评价</div>
        <div class=" end-content" v-if="details.evaluateVo">
          <!-- <el-row> -->
            <div  v-for="(item,index) in details.evaluateVo.questionList" :key="index">
              <div class="label" >{{item.questionName}}</div>
              <div class="value" v-if="item.questionType == 2"><el-rate v-model="item.questionScore" disabled></el-rate></div>
              <div class="value" v-if="item.questionType == 1" style="margin: 10px;">
                  <!-- <el-raido-group v-model="item.remark" >
                    <el-radio v-for="(ele,inde) in item.answerList" :key="inde"  :value="ele.answerId">
                      {{ ele.answerName }} {{ele.answerId}} {{item.remark}}
                    </el-radio>
                  </el-raido-group> -->
                  {{ item.answerList.find((ele) => ele.answerId == item.remark).answerName }}
              </div>

            </div>
            <!-- <el-col :span="12">
              <div class="label">执法合理性</div>
              <div class="value">司法检查</div>
            </el-col>
            <el-col :span="24">
              <div class="label">执法认真程度</div>
              <div class="value">司法检查</div>
            </el-col>
            <el-col :span="12">
              <div class="label">执法结果满意度</div>
              <div class="value">司法检查</div>
            </el-col> -->
          <!-- </el-row> -->
        </div>
      </div>
    </div>
    <template #footer>
@@ -79,11 +119,115 @@
</template>

<script setup lang="ts">
  const dialogVisible = ref(false)
  function openDialog() {
    dialogVisible.value = true
import { getOrder } from '@/api/system/company/company'
const dialogVisible = ref(false)
const details:any = ref({
  evaluateVo: {
    questionList: []
  }
  function closeDialog() {
    dialogVisible.value = false
})
const loading = ref(false)
const status = {
  orderStatusMap: {
    '-1': '拒绝',
    0: '待提交',
    1: '已提交',
    2: '待执行',
    3: '待上报',
    4: '已结束',
  },
  regionStatus: {
    0: '正常',
    1: '停业整顿',
  },
  isNoticeCompany: {
    0: '否',
    1: '是',
  }
</script>
}
const baseUrl = import.meta.env.VITE_APP_BASE_API
function getDetails(orderId) {
  getOrder({ orderId }).then(val => {
    if (val.data.regionImgs) {
      val.data.regionImgs = val.data.regionImgs.split(',')
    }
    if(val.data.evaluateVo && val.data.evaluateVo.questionList) {
      val.data.evaluateVo.questionList.map(item => {
        item.remark = Number(item.remark)
      })
    }
    details.value = val.data
    console.log(details.value)
    loading.value = false
  }).catch(err => {
    loading.value = false
  })
}
function openDialog(item: any) {
  details.value = {}
  loading.value = true
  getDetails(item.orderId)
  dialogVisible.value = true
}


function closeDialog() {
  dialogVisible.value = false
}
defineExpose({ openDialog, closeDialog })
</script>

<style lang="scss" scoped>
.title {
  font-size: 16px;
  background-color: #f6f6f6;
  padding: 10px;
  margin-bottom: 14px;
}

.el-col {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 15px
}

.content {
  margin-bottom: 14px;

  .label {
    font-size: 14px;
    color: #999;
    width: 110px;
    text-align: justify;
    text-align-last: justify;
    margin-right: 30px;
  }

  .value {
    font-size: 14px;
    color: #333;
    width: calc(100% - 120px);
  }
}
.end-content{
  margin-bottom: 14px;
  .label {
    font-size: 14px;
    color: #999;
    margin-right: 30px;
  }

  .value {
    font-size: 14px;
    color: #333;
  }
}
.image {
  width: 80px;
  height: 80px;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px
}
</style>