任务管理添加查看地图详情

guoshilong

2022-09-21 414327a34ab7f4c9d9a74be8a09cb07d6aab1455

任务管理添加查看地图详情

 src/components/OpenLayersMap/index.vue

@@ -1,8 +1,8 @@
<template>
  <div>
    <div id='map' style='width: 100%; height: 400px'>
      <div id='map' :style="{height:isTaskinfoDetail?'85vh':'40vh',width:'100%'}">
      <div style="position: absolute;right:40%;top:-1%;z-index: 999999">
        <p style="margin-top: 10px">
        <p style="margin-top: 10px" v-if="!isTaskinfoDetail">
          <el-button type="primary" size="small" @click="point()">绘制路线</el-button>
          <el-button type="danger" size="small" @click="clearDraw()">重置</el-button>
        </p>
@@ -30,7 +30,7 @@

export default {
  name: 'OpenLayersMap',
  props:['routeRange'],
  props:['routeRange','isTaskinfoDetail'],
  data() {
    return {
      map: null,
@@ -84,7 +84,6 @@
        }),
      })
      _this.map.addLayer(_this.lineVector)

      _this.addLineDraw(_this.routeRange)
    },
    // 绘画之后的样式

 src/const/taskinfo/taskinfo.js

@@ -6,7 +6,7 @@
  searchMenuSpan: 6,
  border: true,
  index: true,
  viewBtn: true,
  viewBtn: false,
  selection: true,
  dialogClickModal: false,
  column: [

 src/router/views/index.js

@@ -1,6 +1,7 @@
import Layout from '@/page/index/'

export default [{
export default [
  {
  path: '/wel',
  component: Layout,
  redirect: '/wel/index',
@@ -22,7 +23,8 @@
    component: () =>
      import( /* webpackChunkName: "views" */ '@/views/wel/dashboard')
  }]
}, {
},
  {
  path: '/test',
  component: Layout,
  redirect: '/test/index',
@@ -35,7 +37,8 @@
    component: () =>
      import( /* webpackChunkName: "views" */ '@/views/util/test')
  }]
}, {
},
  {
  path: '/dict-horizontal',
  component: Layout,
  redirect: '/dict-horizontal/index',
@@ -48,7 +51,8 @@
    component: () =>
      import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-horizontal')
  }]
}, {
},
  {
  path: '/dict-vertical',
  component: Layout,
  redirect: '/dict-vertical/index',
@@ -61,7 +65,8 @@
    component: () =>
      import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-vertical')
  }]
}, {
},
  {
  path: '/info',
  component: Layout,
  redirect: '/info/index',
@@ -74,7 +79,8 @@
    component: () =>
      import( /* webpackChunkName: "views" */ '@/views/system/userinfo')
  }]
}, {
},
  {
  path: '/work/process/leave',
  component: Layout,
  redirect: '/work/process/leave/form',
@@ -103,4 +109,29 @@
    component: () =>
      import( /* webpackChunkName: "views" */ '@/views/work/process/leave/detail')
  }]
}]
},
  {
    path: '/taskinfo',
    component: Layout,
    children: [
      {
      path: 'index',
      name: '巡检任务管理',
      meta: {
        i18n: 'taskinfo'
      },
      component: () =>
        import ( /* webpackChunkName: "views" */ '@/views/taskinfo/taskinfo')
    },
      {
        path: 'taskinfoDetail',
        name: '巡检任务详情信息',
        meta: {
          i18n: 'detail',
        },
        component: () =>
          import ( /* webpackChunkName: "views" */ '@/views/taskinfo/taskinfoDetail')
      }
    ]
  },
]

 src/views/taskinfo/taskinfo.vue

@@ -12,6 +12,7 @@
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @row-click="rowClick"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
@@ -27,6 +28,14 @@
                   v-if="permission.taskinfo_delete"
                   @click="handleDelete">删 除
        </el-button>
      </template>
      <template slot-scope="{ type, size, row }" slot="menu">
        <el-button
          icon="el-icon-view"
          type="text"
          size="mini"
          @click="goTaskinfoDetail(row)"
        >查看</el-button>
      </template>
      <template slot="routeRangeForm">
        <open-layers-map ref="OpenLayersMap" @toData="toData" :routeRange="form.routeRange"></open-layers-map>
@@ -209,6 +218,13 @@
      },
      toData(toData) {
        this.form.routeRange = toData
      },
      goTaskinfoDetail(row){
        this.$router.push({ path: "/taskinfo/taskinfoDetail", query: row });
      },
      //点击当前行事件
      rowClick(val){
        this.$router.push({ path: "/taskinfo/taskinfoDetail", query: val });
      }
    }
  };

 src/views/taskinfo/taskinfoDetail.vue

New file
@@ -0,0 +1,188 @@
<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-message-solid 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="100px"
              style="
                margin-top: 20px;
                margin-left: 10px;
                margin-right: 10px;
                height: calc(100% - 40px);
                width: calc(100% - 20px);
              "
            >
              <el-row>
                <el-col span="24">
                  <el-form-item label="标题">
                    <el-input disabled="true" v-model="form.title" 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.startTime" autocomplete="off"></el-input>
                  </el-form-item>
                </el-col>
                <el-col span="12">
                  <el-form-item label="结束时间">
                    <el-input disabled="true" v-model="form.endTime" 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.content" 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-form>
          </el-card>
          <!--巡检人员信息-->
          <div
            style="margin-top: 70px"
            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="accepterInfo"
              tooltip-effect="dark"
              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>
          </el-card>
        </el-card>
      </div>
    </el-col>

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

<script>
import OpenLayersMap from "@/components/OpenLayersMap/index";
import {getUser} from "@/api/system/user"
export default {
  name: "taskinfoDetail",
  components: {OpenLayersMap},
  data(){
    return{
      taskinfo:{},
      form:{},
      accepterInfo:[]
    }
  },
  created() {
    this.form = this.$route.query;
    this.getUser()
  },
  methods:{
    //获取巡检人员信息
    getUser(){
      getUser(this.form.toUserId).then(res=>{
        if (res.data.code == 200){
          this.accepterInfo.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>