jintan-canlian-web/src/views/record/personinfo.vue

<template>
  <div style="margin-top:10px;overflow: auto;">
    <!--    <el-button type="primary" @click="$refs.flow.addNode('测试节点')">添加节点</el-button>
    <el-button type="primary" @click="handleNext">下一个节点</el-button>
    <br /><br /> -->
    <avue-flow :height="mapHeight" width="100%" ref="flow" :option="option" v-model="form">
      <template slot-scope="scope" slot="header">
        <!-- <i class="el-icon-delete" @click="$refs.flow.deleteNode(scope.node.id)"></i> -->
        {{scope.node.name}}
      </template>
      <div slot-scope="{node}" style="width:100%">
        <div style="width:100%" v-html='node.content'></div>
      </div>
    </avue-flow>
  </div>

</template>
<script>
  import {
    show
  } from "@/api/system/baseForm.js"
  import {
    Message
  } from 'element-ui'
  export default {
    data() {
      return {
        count: 0,
        form: '',
        mapHeight: 0,
        option: {
          "name": "视图",
          "nodeList": [{
              "id": "all",
              "name": "人员",
              "left": 550,
              "top": 320,
              "content":''
            },
            {
              "id": "person",
              "name": "个人信息",
              "left": 200,
              "top": 160,
              "content":''
            },
            {
              "id": "business",
              "name": "业务信息",
              "left": 900,
              "top": 80,
            },
            {
              "id": "view",
              "name": "访视信息",
              "left": 900,
              "top": 480,
              "content":''
            }
          ],
          "lineList": [{
              "from": "all",
              "to": "person"
            },
            {
              "from": "all",
              "to": "business"
            },
            {
              "from": "all",
              "to": "view"
            }
          ]
        }
      }
    },
    mounted() {
      this.initHeight()
      // this.form = this.nodeList[this.count].id;
      this.getPerson()
    },
    methods: {
      initHeight() {
        let winHeight = document.body.clientHeight
        this.mapHeight = winHeight - 50 - 20
        console.log(winHeight)
      },
      getPerson(){
        if (this.$route.query?.id) {
          let id = this.$route.query.id
          this.showPersonInfo(id)
        }else{
          Message({
            type:'warning',
            message:'请先选择人员档案'
          })
        }
      },
      async showPersonInfo(id){
        const res = await show({
          id: id,
          table_name: 'records'
        })
        let names = `<div class="persons">${res.name}</div>`
        let contents = `<p>姓名：${res.name}</p><p>性别：${res.sex}</p><p>残疾类别：${res.disabilitytype}</p><p>残疾等级：${res?.disabilitylevel}</p><p>现居住地：${res.reside}</p>`
        let views = ''
        let workflows = ''
        if(res.idcard_viewrecords_idcard_relation.length>0){
          for(var k of res.idcard_viewrecords_idcard_relation){
            if(k.checkstatus=='通过'){
              views+=`<p>${k.viewtime?.substring(0,10)}/${k.viewscene}<p>`
            }
          }
        }
        if(res.idcard_workflows_idcard_relation.length>0){
          for(var k of res.idcard_workflows_idcard_relation){
            if(k.work_status=='通过'){
              workflows+=`<p>${k.created_at?.substring(0,10)}/${k.guanlianbiaoming}<p>`
            }
          }
        }

        this.option['nodeList'][0]['content'] = names
        this.option['nodeList'][1]['content'] = contents
        this.option['nodeList'][2]['content'] = workflows
        this.option['nodeList'][3]['content'] = views
      }

    }


  }
</script>

<style scoped>
  /deep/ .avue-grid {
    background-image: none;
  }

  /deep/ .avue-flow__node {
    height: 300px;
    width: 250px;
  }
  /deep/ .avue-flow__node-drag{
    display: none;
  }
  /deep/ .avue-flow__node--active{
    border-color: #147d38;
  }
  /deep/ .avue-flow__node-header {
    flex: none;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 24px;
    background-color:#147d38
  }

  /deep/ .avue-flow__node-body {
    height: 250px;
    flex: none;
    overflow: auto;
    text-align: left;
    padding: 15px;
    font-size:15px;
    align-items: normal;
  }
  /deep/ .jtk-droppable{
    height: 300px!important;
    width: 250px!important;
  }
  /deep/ .avue-flow__node-body .persons{
        font-size: 26px;
        text-align: center;
        height: 150px;
        width: 150px;
        background: #ddd;
        border-radius: 100%;
        line-height: 150px;
        margin: 35px auto;
  }
</style>