guoshilong
2022-11-23 998b75f0d4aaed03001ec4246cd4f3b4b0743b7e
src/views/taskinfo/taskinfoDetail.vue
@@ -1,8 +1,8 @@
<template>
  <div>
    <el-button class="backBtn" size="small" type="success" icon="el-icon-back" plain @click="handleBack">返 回
    </el-button>
    <el-row>
    <el-row v-if="!eventgmDetailVisible">
      <el-button class="backBtn" size="small" type="success" icon="el-icon-back" @click="handleBack">返 回
      </el-button>
     <el-col :span="12">
      <div>
        <el-card class="trackClass" style="overflow-y: auto">
@@ -84,9 +84,10 @@
              </el-row>
            </el-form>
          </el-card>
          <!--巡检人员信息-->
          <div
            style="margin-top: 70px"
            style="margin-top: 15px"
            role="tab"
            aria-expanded="true"
            aria-controls="el-collapse-content-823"
@@ -103,7 +104,6 @@
              </div>
            </div>
          </div>
          <el-card>
            <el-table
              ref="multipleTable"
@@ -112,11 +112,47 @@
              style="width: 100%"
              max-height="240"
            >
              <el-table-column prop="name" label="姓名" width="150" align="center"></el-table-column>
              <el-table-column prop="realName" label="真名" width="150" align="center"></el-table-column>
              <el-table-column prop="phone" label="联系电话" width="170" align="center"></el-table-column>
              <el-table-column prop="name" label="姓名" align="center"></el-table-column>
              <el-table-column prop="realName" label="真名" align="center"></el-table-column>
              <el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
            </el-table>
          </el-card>
          <!--事件信息-->
          <div v-if="eventgmList.length>0">
            <div
              style="margin-top: 15px"
              role="tab"
              aria-expanded="true"
              aria-controls="el-collapse-content-823"
              aria-describedby="el-collapse-content-823"
            >
              <div
                role="button"
                tabindex="0"
                class="el-collapse-item__header focusing is-active"
              >
                <div class="avue-group__header avue-group">
                  <i class="el-icon-warning avue-group__icon"></i>
                  <h1 class="avue-group__title">相关事件信息</h1>
                </div>
              </div>
            </div>
            <el-card>
              <el-table
                ref="multipleTable"
                :data="eventgmList"
                tooltip-effect="dark"
                style="width: 100%"
                max-height="240"
                @row-dblclick="rowDblclick"
              >
                <el-table-column prop="title" label="标题" align="center"></el-table-column>
                <el-table-column prop="stateName" label="状态" align="center"></el-table-column>
              </el-table>
            </el-card>
          </div>
        </el-card>
      </div>
    </el-col>
@@ -125,26 +161,37 @@
      <open-layers-map ref="OpenLayersMap" @toData="toData" :isDetail="true" :routeRange="form.routeRange"></open-layers-map>
    </el-col>
    </el-row>
    <!--显示详情-->
    <eventgm-detail v-if="eventgmDetailVisible" ref="detailVisible" :detailInfo="eventgmDetailInfo" :taskToEventgm="true" @isDetail="isDetail"></eventgm-detail>
  </div>
</template>
<script>
import OpenLayersMap from "@/components/OpenLayersMap/index";
import {getUser} from "@/api/system/user"
import {getDetail} from "@/api/taskinfo/taskinfo";
import {getDictionary} from "@/api/system/dictbiz";
import EventgmDetail from "@/views/eventgm/eventgmDetail";
export default {
  name: "taskinfoDetail",
  components: {OpenLayersMap},
  components: {EventgmDetail, OpenLayersMap},
  props:["detailInfo"],
  data(){
    return{
      taskinfo:{},
      form:{},
      accepterInfo:[]
      accepterInfo:[],
      eventgmList:[],
      eventgmDetailVisible:false,
      eventgmDetailInfo:{},
    }
  },
  created() {
    this.form = this.detailInfo;
    this.getUser()
    this.getEventgmList()
  },
  methods:{
    //获取巡检人员信息
@@ -157,8 +204,50 @@
        })
      }
    },
    //获取当前任务绑定的相关事件
    getEventgmList(){
      getDetail(this.form.id).then(res=>{
        if(res.data.code == 200){
          if (res.data.data.eventgmList.length>0){
            this.eventgmList = res.data.data.eventgmList
            getDictionary({code:"EVENT_TYPE"}).then(res=>{
              if(res.data.code == 200){
                this.eventgmList.forEach(e=>{
                  res.data.data.forEach(k=>{
                    if (e.type == k.dictKey){
                      e.typeName = k.dictValue
                    }
                  })
                })
              }
            })
            getDictionary({code:"EVENT_STATE"}).then(res=>{
              if(res.data.code == 200){
                this.eventgmList.forEach(e=>{
                  res.data.data.forEach(k=>{
                    if (e.state == k.dictKey){
                      e.stateName = k.dictValue
                    }
                  })
                })
              }
            })
          }
        }
      })
    },
    handleBack(){
      this.$emit('isDetail');
    },
    rowDblclick(row){
      this.eventgmDetailInfo = row
      this.eventgmDetailVisible = true
    },
    isDetail(){
      this.eventgmDetailVisible = !this.eventgmDetailVisible
    }
  },
}
@@ -194,10 +283,7 @@
  display: block;
}
.backBtn{
  position: fixed;
  top: 20%;
  right: 3%;
  z-index: 99999;
.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
}
</style>