添加事件管理详情

guoshilong

2022-09-21 be457aee83b7d9d9bce31aa6652c3ab7af14091d

添加事件管理详情

 public/img/favicon.png

 src/api/eventgm/eventgmRecord.js

@@ -12,6 +12,18 @@
  })
}

export const getPage = (current, size, params) => {
  return request({
    url: '/api/eventgmRecord/eventgmRecord/page',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    }
  })
}

export const getDetail = (id) => {
  return request({
    url: '/api/eventgmRecord/eventgmRecord/detail',

 src/api/repairsorder/repairsorder.js

@@ -12,13 +12,11 @@
  })
}

export const getDetail = (id) => {
export const getDetail = (params) => {
  return request({
    url: '/api/repairsorder/repairsorder/detail',
    method: 'get',
    params: {
      id
    }
    params: params
  })
}


 src/api/repairsorder/repairsorderRecord.js

@@ -12,6 +12,18 @@
  })
}

export const getPage = (current, size, params) => {
  return request({
    url: '/api/repairsorderRecord/repairsorderRecord/page',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    }
  })
}

export const getDetail = (id) => {
  return request({
    url: '/api/repairsorderRecord/repairsorderRecord/detail',

 src/components/OpenLayersMap/index.vue

@@ -1,8 +1,8 @@
<template>
  <div>
      <div id='map' :style="{height:isTaskinfoDetail?'85vh':'40vh',width:'100%'}">
      <div id='map' :style="{height:isDetail?'85vh':'40vh',width:'100%'}">
      <div style="position: absolute;right:40%;top:-1%;z-index: 999999">
        <p style="margin-top: 10px" v-if="!isTaskinfoDetail">
        <p style="margin-top: 10px" v-if="!isDetail">
          <el-button type="primary" size="small" @click="point()">绘制路线</el-button>
          <el-button type="danger" size="small" @click="clearDraw()">重置</el-button>
        </p>
@@ -22,6 +22,8 @@
import Cluster from 'ol/source/Cluster'
import {Vector as VectorLayer, Tile as TileLayer} from 'ol/layer'
import LineString from "ol/geom/LineString";
import Point from 'ol/geom/Point';
import Icon from 'ol/style/Icon';
import {Style, Fill as StyleFill, Stroke as StyleStroke, Text as StyleText, Circle as StyleCircle} from 'ol/style'
import {Circle as GeomCircle, Point as GeomPoint, LineString as GeomLineString, Polygon as GeomPolygon} from 'ol/geom'
import Draw from 'ol/interaction/Draw'
@@ -30,7 +32,7 @@

export default {
  name: 'OpenLayersMap',
  props:['routeRange','isTaskinfoDetail'],
  props:['routeRange','isDetail',"pointLonLat"],
  data() {
    return {
      map: null,
@@ -42,6 +44,7 @@
      draw: null,
      drawLayer: null,
      lineVector: null,
      pointVector:null,
      coordinates: [],// 保存绘画坐标地址   [[115.90490549080435, 28.746101718722358],[115.93151300423209, 28.741123538790717]]
      toData: null,// 保存数据库格式坐标地址
      showTip:false,
@@ -83,8 +86,16 @@
          wrapX: false // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
        }),
      })
      _this.pointVector = new VectorLayer({
        //layer所对应的source
        source: new VectorSource({
          wrapX: false // 禁止横向无限重复（底图渲染的时候会横向无限重复），设置了这个属性，可以让绘制的图形不跟随底图横向无限重复
        }),
      })
      _this.map.addLayer(_this.lineVector)
      _this.map.addLayer(_this.pointVector)
      _this.addLineDraw(_this.routeRange)
      _this.addPoint(_this.pointLonLat)
    },
    // 绘画之后的样式
    styleFunction() {
@@ -133,6 +144,32 @@
        this.lineVector.getSource().addFeature(feature_LineString);
      }
    },
    //添加点
    addPoint(pointLonLat){
      if (pointLonLat){
        //设置点
        let feature_Point = new Feature({
          geometry: new Point([Number(pointLonLat.lon), Number(pointLonLat.lat)])
        })
        //点样式
        let style = new Style({
          image: new Icon({
            src: "/img/favicon.png",
            anchor: [0.48, 0.52],
            scale:0.5
          }),
        });
        feature_Point.setStyle(style);
        this.pointVector.getSource().addFeature(feature_Point);
        var center = [Number(pointLonLat.lon), Number(pointLonLat.lat)];
        var view = this.map.getView();
        view.setZoom(16);
        view.animate({
          center: center,
          duration: 5,
        });
      }
    },
    // 将点坐标集合转换为数据库数据
    doData(val) {
      let str = "LINESTRING(";

 src/router/views/index.js

@@ -134,4 +134,28 @@
      }
    ]
  },
  {
    path: '/eventgm',
    component: Layout,
    children: [
      {
        path: 'index',
        name: '事件管理',
        meta: {
          i18n: 'eventgm'
        },
        component: () =>
          import ( /* webpackChunkName: "views" */ '@/views/eventgm/eventgm')
      },
      {
        path: 'eventgmDetail',
        name: '事件详情信息',
        meta: {
          i18n: 'eventgmDetail',
        },
        component: () =>
          import ( /* webpackChunkName: "views" */ '@/views/eventgm/eventgmDetail')
      }
    ]
  }
]

 src/views/eventgm/eventgm.vue

@@ -11,6 +11,7 @@
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @row-click="rowClick"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
@@ -239,7 +240,11 @@
          this.$refs.repairsOrder.init(row)
        })
      },
      createOrder(){}
      createOrder(){},
      //点击当前行事件
      rowClick(val){
        this.$router.push({ path: "/eventgm/eventgmDetail", query: val });
      }
    }
  };
</script>

 src/views/eventgm/eventgmDetail.vue

New file
@@ -0,0 +1,306 @@
<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div>
          <el-card class="trackClass" style="overflow-y: auto">
            <!--事件详情信息-->
            <div
              style="margin-top: -10px"
              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-info avue-group__icon"></i>
                  <h1 class="avue-group__title">事件详情信息</h1>
                </div>
              </div>
            </div>
            <el-card>
              <el-form
                :model="form"
                label-position="right"
                size="mini"
                class="taskinfoForm"
                label-width="70px"
                style="
                margin-top: 20px;
                margin-left: 10px;
                margin-right: 10px;
                height: calc(100% - 40px);
                width: calc(100% - 20px);
              "
              >
                <el-row>
                  <el-col span="12">
                    <el-form-item label="地点">
                      <el-input disabled="true" v-model="form.address" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col span="12">
                    <el-form-item label="事件类型">
                      <el-input disabled="true" v-model="form.$type" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col span="12">
                    <el-form-item label="经度">
                      <el-input disabled="true" v-model="form.longitude" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col span="12">
                    <el-form-item label="纬度">
                      <el-input disabled="true" v-model="form.latitude" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col span="12">
                    <el-form-item label="事件状态">
                      <el-input disabled="true" v-model="form.$state" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col span="12">
                    <el-form-item label="事件来源">
                      <el-input disabled="true" v-model="form.$source" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col span="24">
                    <el-form-item label="内容">
                      <el-input disabled="true" v-model="form.remark" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>

            <!--事件流程信息-->
            <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-s-order avue-group__icon"></i>
                  <h1 class="avue-group__title">事件流程信息</h1>
                </div>
              </div>
            </div>
            <el-card>
              <el-table
                ref="multipleTable"
                :data="eventgmRecord"
                tooltip-effect="dark"
                style="width: 100%"
                max-height="240"
              >
                <el-table-column prop="person" label="处理人员"  align="center"></el-table-column>
                <el-table-column prop="remark" label="说明"  align="center"></el-table-column>
              </el-table>
            </el-card>
            <div v-if="this.form.no">
              <!--维修人员信息-->
              <div v-if="repairsDetail.toUserId != -1">
                <div
                style="margin-top: -10px"
                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-s-custom avue-group__icon"></i>
                    <h1 class="avue-group__title">维修人员信息</h1>
                  </div>
                </div>
                </div>
                <el-card>
                <el-table
                  ref="multipleTable"
                  :data="repairsPersonInfo"
                  tooltip-effect="dark"
                  style="width: 100%"
                  max-height="240"
                >
                  <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>
              <!--维修流程信息-->
              <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-s-order avue-group__icon"></i>
                    <h1 class="avue-group__title">维修流程信息</h1>
                  </div>
                </div>
              </div>
              <el-card>
                <el-table
                  ref="multipleTable"
                  :data="repairsRecord"
                  tooltip-effect="dark"
                  style="width: 100%"
                  max-height="240"
                >
                  <el-table-column prop="repairPerson" label="处理人员" align="center"></el-table-column>
                  <el-table-column prop="remark" label="说明"  align="center"></el-table-column>
                </el-table>
              </el-card>
            </div>
          </el-card>
        </div>
      </el-col>

      <el-col :span="12">
        <open-layers-map ref="OpenLayersMap" @toData="toData" :isDetail="true" :pointLonLat="pointLonLat" :routeRange="form.routeRange"></open-layers-map>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import OpenLayersMap from "@/components/OpenLayersMap/index";
import {getList as getEventgmRecordList} from "@/api/eventgm/eventgmRecord"
import {getList as getRepairsorderRecordList} from "@/api/repairsorder/repairsorderRecord";
import {getDetail} from "@/api/repairsorder/repairsorder";
import {getUser} from "@/api/system/user"

export default {
  name: "eventgmDetail",
  components: {OpenLayersMap},
  data(){
    return{
      eventgmInfo:{},
      form:{},
      pointLonLat: {},
      eventgmRecord:[],
      repairsRecord:[],
      repairsDetail:{},
      repairsPersonInfo:[],
    }
  },
  created() {
    this.form = this.$route.query;
    this.pointLonLat = {
      lon:this.form.longitude,
      lat:this.form.latitude
    }
    this.getEventgmRecordList();
    this.getRepairsorderRecordList();
    this.getRepairDetail();
  },
  methods:{
    getEventgmRecordList(){
      var params = {eventId : this.form.id}
      getEventgmRecordList(1,100,params).then(res=>{
        if (res.data.code ==200){
          res.data.data.records.forEach(e=>{
            this.eventgmRecord.push(e)
          })
        }
      })
    },
    getRepairsorderRecordList(){
      if (this.form.no){
        var params = {no : this.form.no}
        getRepairsorderRecordList(1,100,params).then(res =>{
          if (res.data.code ==200){
            res.data.data.records.forEach(e=>{
              this.repairsRecord.push(e)
            })
          }
        })
      }

    },
    getRepairDetail(){
      if (this.form.no){
        getDetail({no:this.form.no}).then(res=>{
          if (res.data.code == 200){
           this.repairsDetail = res.data.data
            this.getRepairPersonInfo();
         }
        })
      }
    },
    getRepairPersonInfo(){
      if (this.repairsDetail.toUserId != -1){
        getUser(this.repairsDetail.toUserId).then(res=>{
          if (res.data.code == 200){
            this.repairsPersonInfo.push(res.data.data)
          }
        })
      }
    }
  },
}
</script>

<style scoped lang="scss">

/deep/ .el-table tbody tr:hover > td {
  background-color: #f3ec94 !important
}

.el-col {
  height: calc(100% - 5px);
}

.trackClass {
  height: 85vh;
  overflow: auto;
  overflow-x: hidden;
}

.receiving-alarm-box {
  line-height: 32px !important;
  height: 200px;
  overflow-y: auto;

.el-card__body {
  padding: 0 10px !important;
}
}

#old_video::-webkit-media-controls-timeline {
  display: block;
}
</style>

 src/views/taskinfo/taskinfoDetail.vue

@@ -120,7 +120,7 @@
    </el-col>

    <el-col :span="12">
      <open-layers-map ref="OpenLayersMap" @toData="toData" :isTaskinfoDetail="true" :routeRange="form.routeRange"></open-layers-map>
      <open-layers-map ref="OpenLayersMap" @toData="toData" :isDetail="true" :routeRange="form.routeRange"></open-layers-map>
    </el-col>
    </el-row>
  </div>