From be457aee83b7d9d9bce31aa6652c3ab7af14091d Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Wed, 21 Sep 2022 17:53:49 +0800
Subject: [PATCH] 添加事件管理详情
---
src/components/OpenLayersMap/index.vue | 43 +++++
src/api/eventgm/eventgmRecord.js | 12 +
src/api/repairsorder/repairsorderRecord.js | 12 +
src/views/eventgm/eventgmDetail.vue | 306 +++++++++++++++++++++++++++++++++++++++++++
src/router/views/index.js | 24 +++
src/api/repairsorder/repairsorder.js | 6
public/img/favicon.png | 0
src/views/taskinfo/taskinfoDetail.vue | 2
src/views/eventgm/eventgm.vue | 7
9 files changed, 403 insertions(+), 9 deletions(-)
diff --git a/public/img/favicon.png b/public/img/favicon.png
new file mode 100644
index 0000000..ecd70ca
--- /dev/null
+++ b/public/img/favicon.png
Binary files differ
diff --git a/src/api/eventgm/eventgmRecord.js b/src/api/eventgm/eventgmRecord.js
index 2e13658..f7425fe 100644
--- a/src/api/eventgm/eventgmRecord.js
+++ b/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',
diff --git a/src/api/repairsorder/repairsorder.js b/src/api/repairsorder/repairsorder.js
index 05d08a2..cc5f351 100644
--- a/src/api/repairsorder/repairsorder.js
+++ b/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
})
}
diff --git a/src/api/repairsorder/repairsorderRecord.js b/src/api/repairsorder/repairsorderRecord.js
index 4ea80e4..ccc1266 100644
--- a/src/api/repairsorder/repairsorderRecord.js
+++ b/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',
diff --git a/src/components/OpenLayersMap/index.vue b/src/components/OpenLayersMap/index.vue
index 38a3ff3..eab6596 100644
--- a/src/components/OpenLayersMap/index.vue
+++ b/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(";
diff --git a/src/router/views/index.js b/src/router/views/index.js
index 4f87aeb..1977472 100644
--- a/src/router/views/index.js
+++ b/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')
+ }
+ ]
+ }
]
diff --git a/src/views/eventgm/eventgm.vue b/src/views/eventgm/eventgm.vue
index 46be7a6..9313def 100644
--- a/src/views/eventgm/eventgm.vue
+++ b/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>
diff --git a/src/views/eventgm/eventgmDetail.vue b/src/views/eventgm/eventgmDetail.vue
new file mode 100644
index 0000000..614fb5d
--- /dev/null
+++ b/src/views/eventgm/eventgmDetail.vue
@@ -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>
diff --git a/src/views/taskinfo/taskinfoDetail.vue b/src/views/taskinfo/taskinfoDetail.vue
index fd2b99e..3a520a5 100644
--- a/src/views/taskinfo/taskinfoDetail.vue
+++ b/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>
--
Gitblit v1.9.3