跳页面形式改为当前页面打开，巡检计划双击查看详情

guoshilong

2022-09-23 223750e3a57f895e07c9c311947456664ced50c3

跳页面形式改为当前页面打开，巡检计划双击查看详情

 src/components/OpenLayersMap/index.vue

@@ -113,7 +113,6 @@
    },
    // 添加线路
    addLineDraw(toData) {
      console.log(toData,'11111111')
      // toData = 'LINESTRING(115.90505364627936 28.740342332731327,115.9119724729309 28.74040302419318,115.90766337913915 28.73566909016844)'
      if (toData) {
        // 将数据库点坐标数据转换

 src/views/eventgm/eventgm.vue

@@ -1,6 +1,6 @@
<template>
  <basic-container>
    <avue-crud :option="option"
    <avue-crud v-show="!detailVisible" :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
@@ -47,6 +47,8 @@
    <disposal v-if="disposalVisible" ref="disposal" @refreshOnLoad="refreshChange"></disposal>
    <!-- 弹窗, 生成维修工单 -->
    <repairs-order v-if="repairsOrderVisible" ref="repairsOrder" @refreshOnLoad="refreshChange"></repairs-order>
    <!--显示详情-->
    <eventgm-detail v-if="detailVisible" ref="detailVisible" :detailInfo="detailInfo" @isDetail="isDetail"></eventgm-detail>
  </basic-container>
</template>

@@ -56,9 +58,11 @@
  import {mapGetters} from "vuex";
  import disposal from "./disposal.vue"
  import RepairsOrder from "@/views/eventgm/repairsOrder";
  import EventgmDetail from "@/views/eventgm/eventgmDetail";

  export default {
    components: {
      EventgmDetail,
      RepairsOrder,
      disposal
    },
@@ -76,7 +80,9 @@
        option: option,
        data: [],
        disposalVisible: false,
        repairsOrderVisible:false
        repairsOrderVisible:false,
        detailVisible:false,
        detailInfo:{},
      };
    },
    computed: {
@@ -243,7 +249,12 @@
      createOrder(){},
      //点击当前行事件
      rowClick(val){
        this.$router.push({ path: "/eventgm/eventgmDetail", query: val });
        // this.$router.push({ path: "/eventgm/eventgmDetail", query: val });
        this.detailInfo = val
        this.isDetail();
      },
      isDetail(){
        this.detailVisible = !this.detailVisible
      }
    }
  };

 src/views/eventgm/eventgmDetail.vue

@@ -1,12 +1,14 @@
<template>
  <div>
    <el-button class="backBtn" size="small" type="success" icon="el-icon-back" plain @click="handleBack">返 回
    </el-button>
    <el-row>
      <el-col :span="12">
        <div>
          <el-card class="trackClass" style="overflow-y: auto">
            <!--事件详情信息-->
            <div
              style="margin-top: -10px"
              style=""
              role="tab"
              aria-expanded="true"
              aria-controls="el-collapse-content-823"
@@ -89,7 +91,7 @@

            <!--事件流程信息-->
            <div
              style="margin-top: 15px"
              style=""
              role="tab"
              aria-expanded="true"
              aria-controls="el-collapse-content-823"
@@ -206,6 +208,7 @@
export default {
  name: "eventgmDetail",
  components: {OpenLayersMap},
  props:["detailInfo"],
  data(){
    return{
      eventgmInfo:{},
@@ -218,7 +221,7 @@
    }
  },
  created() {
    this.form = this.$route.query;
    this.form = this.detailInfo;
    this.pointLonLat = {
      lon:this.form.longitude,
      lat:this.form.latitude
@@ -269,6 +272,9 @@
          }
        })
      }
    },
    handleBack(){
      this.$emit('isDetail');
    }
  },
}
@@ -303,4 +309,11 @@
#old_video::-webkit-media-controls-timeline {
  display: block;
}

.backBtn{
  position: fixed;
  top: 20%;
  right: 3%;
  z-index: 99999;
}
</style>

 src/views/taskinfo/taskinfo.vue

@@ -1,6 +1,6 @@
<template>
  <basic-container>
    <avue-crud :option="option"
    <avue-crud v-show="!detailVisible" :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
@@ -43,6 +43,7 @@

    </avue-crud>

    <taskinfo-detail v-if="detailVisible" ref="detailVisible" :detailInfo="detailInfo" @isDetail="isDetail"></taskinfo-detail>
  </basic-container>
</template>

@@ -52,9 +53,10 @@
  import option from "@/const/taskinfo/taskinfo";
  import {mapGetters} from "vuex";
  import OpenLayersMap from "@/components/OpenLayersMap";
  import TaskinfoDetail from "@/views/taskinfo/taskinfoDetail";

  export default {
    components: { OpenLayersMap },
    components: {TaskinfoDetail, OpenLayersMap },
    data() {
      return {
        form: {},
@@ -67,7 +69,9 @@
        },
        selectionList: [],
        option: option,
        data: []
        data: [],
        detailVisible:false,
        detailInfo:{},
      };
    },
    created() {
@@ -215,11 +219,17 @@
        this.form.routeRange = toData
      },
      goTaskinfoDetail(row){
        this.$router.push({ path: "/taskinfo/taskinfoDetail", query: row });
        // this.$router.push({ path: "/taskinfo/taskinfoDetail", query: row });
        this.rowClick(row)
      },
      //点击当前行事件
      rowClick(val){
        this.$router.push({ path: "/taskinfo/taskinfoDetail", query: val });
        // this.$router.push({ path: "/taskinfo/taskinfoDetail", query: val });
        this.detailInfo = val
        this.isDetail();
      },
      isDetail(){
        this.detailVisible = !this.detailVisible
      }
    }
  };

 src/views/taskinfo/taskinfoDetail.vue

@@ -1,5 +1,7 @@
<template>
  <div>
    <el-button class="backBtn" size="small" type="success" icon="el-icon-back" plain @click="handleBack">返 回
    </el-button>
    <el-row>
     <el-col :span="12">
      <div>
@@ -132,6 +134,7 @@
export default {
  name: "taskinfoDetail",
  components: {OpenLayersMap},
  props:["detailInfo"],
  data(){
    return{
      taskinfo:{},
@@ -140,7 +143,7 @@
    }
  },
  created() {
    this.form = this.$route.query;
    this.form = this.detailInfo;
    this.getUser()
  },
  methods:{
@@ -152,6 +155,9 @@
        }
      })
    },
    handleBack(){
      this.$emit('isDetail');
    }
  },
}
</script>
@@ -185,4 +191,11 @@
#old_video::-webkit-media-controls-timeline {
  display: block;
}

.backBtn{
  position: fixed;
  top: 20%;
  right: 3%;
  z-index: 99999;
}
</style>

 src/views/taskinfo/taskinfoPlan.vue

@@ -1,6 +1,6 @@
<template>
  <basic-container>
    <avue-crud v-show="!isSetPlanUser" :option="option"
    <avue-crud v-show="!isSetPlanUser&&!detailVisible" :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
@@ -11,6 +11,7 @@
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @row-dblclick="rowClick"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
@@ -61,7 +62,10 @@

      </template>
    </avue-crud>
    <!--设置巡检人-->
    <taskplan-user v-show="isSetPlanUser" ref="taskplanUser" @setPlanUser="setPlanUser"></taskplan-user>
    <!--查看详情-->
    <taskinfo-plan-detail v-if="detailVisible" ref="detailVisible" :detailInfo="detailInfo" @isDetail="isDetail"></taskinfo-plan-detail>
  </basic-container>
</template>

@@ -73,9 +77,10 @@
  import {mapGetters} from "vuex";
  import TaskplanUser from "@/views/taskinfo/taskplanUser";
  import OpenLayersMap from "@/components/OpenLayersMap/index";
  import TaskinfoPlanDetail from "@/views/taskinfo/taskinfoPlanDetail";

  export default {
    components: {TaskplanUser,OpenLayersMap},
    components: {TaskinfoPlanDetail, TaskplanUser,OpenLayersMap},
    data() {
      return {
        isSetPlanUser:false,
@@ -89,7 +94,9 @@
        },
        selectionList: [],
        option: option,
        data: []
        data: [],
        detailVisible:false,
        detailInfo:{},
      };
    },
    computed: {
@@ -243,6 +250,14 @@
      toData(toData) {
        this.form.routeRange = toData
      },
      //点击当前行事件
      rowClick(val){
        this.detailInfo = val
        this.isDetail();
      },
      isDetail(){
        this.detailVisible = !this.detailVisible
      }
    }
  };
</script>

 src/views/taskinfo/taskinfoPlanDetail.vue

New file
@@ -0,0 +1,205 @@
<template>
  <div>
    <el-button class="backBtn" size="small" type="success" icon="el-icon-back" plain @click="handleBack">返 回
    </el-button>
    <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="12">
                    <el-form-item label="计划标题">
                      <el-input disabled="true" v-model="form.title" 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.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="24">
                    <el-form-item label="是否启用">
                      <el-input disabled="true" v-model="form.$status" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-card>

            <!--巡检人员信息-->
            <div>
              <div
              style="margin-top: 5px"
              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="taskplanUser"
                tooltip-effect="dark"
                style="width: 100%"
                max-height="240"
              >
                <el-table-column prop="name" label="姓名" align="center"></el-table-column>
                <el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
                <el-table-column prop="startTime" label="开始时间" align="center"></el-table-column>
                <el-table-column prop="endTime" 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" :routeRange="form.routeRange"></open-layers-map>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import OpenLayersMap from "@/components/OpenLayersMap/index";
import {getList} from "@/api/taskinfo/taskplanUser";
export default {
  name: "taskinfoPlanDetail",
  components: {OpenLayersMap},
  props:["detailInfo"],
  data(){
    return{
      taskinfo:{},
      form:{},
      taskplanUser:[]
    }
  },
  created() {
    this.form = this.detailInfo;
    this.getUserList()
  },
  methods:{
    //获取巡检人员信息
    getUserList(){
      getList(1,1000,{planId:this.form.id}).then(res=>{
        if (res.data.code == 200){
          var data = res.data.data.records
          this.taskplanUser = data
          console.log(this.taskplanUser)
        }
      })
    },
    handleBack(){
      this.$emit('isDetail');
    }
  },
}
</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;
}

.backBtn{
  position: fixed;
  top: 20%;
  right: 3%;
  z-index: 99999;
}
</style>

 src/views/taskinfo/taskplanUser.vue

@@ -22,6 +22,7 @@
          size="small"
          icon="el-icon-back"
          plain
          type="success"
          @click="handleBack">返 回
        </el-button>
        <el-button type="primary"