fuse-code/src/views/fire/index.vue

<template>
  <LeftPano>
    <div class="info" v-if="caseProject?.tmProject">
      <h2>案件信息</h2>
      <p>
        <span>事件分类：</span>
        {{ caseProject.tmProject.projectSn }}
      </p>
      <p>
        <span>详细地址：</span>
        {{ caseProject.tmProject.projectAddress }}
      </p>
      <p>
        <span>勘验信息：</span>
        {{ caseProject.tmProject.projectSite }}
      </p>

      <p>
        <span>勘验地址：</span>
        {{ caseProject.tmProject.field1 }}
      </p>
      <p>
        <span>全宗名称：</span>
        {{ caseProject.tmProject.field2 }}
      </p>
      <p>
        <span>勘验人姓名：</span>
        {{ caseProject.tmProject.field3 }}
      </p>
      <p>
        <span>勘验人单位、职务：</span>
        {{ caseProject.tmProject.field4 }}
      </p>

      <p>
        <span>承办单位：</span>
        {{ caseProject.tmProject.organizerDeptName }}
      </p>

      <p>
        <span>分类登记：</span>
        {{ caseProject.tmProject.projectName }}
      </p>
      <p>
        <span>勘验人员：</span>
        {{ caseProject.tmProject.organizerUsers }}
      </p>
      <p>
        <span>勘验日期：</span>
        {{ caseProject.tmProject.accidentDate }}
      </p>
      <p>
        <span>项目状态：</span>
        {{ caseProject.tmProject.statusDesc }}
      </p>
      <p>
        <span>教学项目：</span>
        {{ caseProject.tmProject.isTeached ? "是" : "否" }}
      </p>
      <p>
        <span>创建人：</span>
        {{ caseProject.tmProject.creatorName }}
      </p>
      <p>
        <span>编辑人：</span>
        {{ caseProject.tmProject.editorName }}
      </p>
      <p>
        <span>创建时间：</span>
        {{ caseProject.tmProject.createTime }}
      </p>
      <p>
        <span>最新编辑：</span>
        {{ caseProject.tmProject.editTime }}
      </p>
    </div>
  </LeftPano>
</template>

<script setup lang="ts">
import { showRightPanoStack } from "@/env";
import { useViewStack } from "@/hook";
import { LeftPano } from "@/layout";
import { caseProject } from "@/store/case";
import { ref } from "vue";

useViewStack(() => showRightPanoStack.push(ref(false)));
</script>

<style lang="scss" scoped>
.info {
  h2 {
    padding: 20px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    align-items: center;
    margin-bottom: 0;
  }

  p {
    padding: 0 30px;
    margin: 20px 0;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    display: flex;
    word-break: break-all;

    span {
      flex: none;
      display: inline-block;
      width: 70px;
      height: 100%;
      margin-right: 20px;
      color: rgba(255, 255, 255, 0.7);
    }
  }
}
</style>