管线 应急修改

陈泽平

2021-05-20 ee629193f59c538ce816c25d673f7c4320a74f17

管线 应急修改

 src/components/emergency/index.vue

@@ -1,6 +1,6 @@
<template>
    <div class="emergency">
        <el-dialog :class="CZFX?'':'widt800'" :visible.sync="showSchedule" :title="tit" :modal="false" v-dialogDrag >
        <el-dialog :class="CZFX?'':'widt800'" :visible.sync="showSchedule" :title="tit" :modal="false" v-dialogDrag>
            <!-- 基础信息 -->
            <div class="basicInformation" v-if="CZFX">
                <div>
@@ -33,15 +33,16 @@
                        <el-button type="primary" class="el-icon-location" size="mini"></el-button>
                        <el-button type="primary" class="el-icon-location" size="mini"></el-button>
                        <el-select v-model="value" filterable placeholder="请选择" size="mini">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                        <el-button type="primary" class="el-icon-search" size="mini"></el-button>
                    </div>
                    <div>
                        <div class="analysis-btn">
                            <div>
                                <el-button type="primary" size="mini" >重置分析条件</el-button>
                                <el-button type="primary" size="mini" @click="CZFX=!CZFX" >开始分析</el-button>
                                <el-button type="primary" size="mini">重置分析条件</el-button>
                                <el-button type="primary" size="mini" @click="CZFX=!CZFX">开始分析</el-button>
                            </div>
                        </div>
                    </div>
@@ -96,19 +97,28 @@
                            <el-button type="primary" class="el-icon-location" size="mini"></el-button>
                            <el-button type="primary" class="el-icon-location" size="mini"></el-button>
                            <el-select v-model="value" filterable placeholder="请选择" size="mini">
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                            <el-button type="primary" class="el-icon-search" size="mini"></el-button>
                            <el-input placeholder="审批人" size="mini"  style="width: 60px"></el-input>
                            <el-input placeholder="审批人" size="mini" style="width: 60px"></el-input>
                            <el-button type="primary" size="mini">查询</el-button>
                        </div>
                    </div>
                    <div class="content">
                        <ul>
                            <li><el-button type="primary" size="mini">应急基础</el-button></li>
                            <li><el-button type="primary" size="mini">应急基础</el-button></li>
                            <li><el-button type="primary" size="mini">应急基础</el-button></li>
                            <li><el-button type="primary" size="mini">应急基础</el-button></li>
                            <li>
                                <el-button type="primary" size="mini">应急基础</el-button>
                            </li>
                            <li>
                                <el-button type="primary" size="mini">应急基础</el-button>
                            </li>
                            <li>
                                <el-button type="primary" size="mini">应急基础</el-button>
                            </li>
                            <li>
                                <el-button type="primary" size="mini">应急基础</el-button>
                            </li>
                        </ul>
                        <el-table :data="tableData2" style="width: 80%">
                            <el-table-column prop="date" label="日期" width="180"></el-table-column>
@@ -126,20 +136,55 @@
        </el-dialog>
        <el-dialog class="calculate" :visible.sync="showCalculate" title="事故水有效容积计算" :modal="false" v-dialogDrag>
            <ul>
                <li>事故水流量：<el-input size="mini"  style="width: 60px"></el-input>m3/h</li>
                <li>事故时间：<el-input size="mini"  style="width: 60px"></el-input>h</li>
                <li>事故物料量：<el-input size="mini"  style="width: 60px"></el-input>m3</li>
                <li>转存量：<el-input size="mini"  style="width: 60px"></el-input>m3</li>
                <li>消防水流量：<el-input size="mini"  style="width: 60px"></el-input>h</li>
                <li>消防时间：<el-input size="mini"  style="width: 60px"></el-input>h</li>
                <li>降雨量：<el-input size="mini"  style="width: 60px"></el-input>mm</li>
                <li>汇水面积：<el-input size="mini"  style="width: 60px"></el-input>m2</li>
                <li>生产废水量：<el-input size="mini"  style="width: 60px"></el-input>m3</li>
                <li>收集池余量：<el-input size="mini"  style="width: 60px"></el-input>m3</li>
                <li>事故水流量：
                    <el-input size="mini" style="width: 60px"></el-input>
                    m3/h
                </li>
                <li>事故时间：
                    <el-input size="mini" style="width: 60px"></el-input>
                    h
                </li>
                <li>事故物料量：
                    <el-input size="mini" style="width: 60px"></el-input>
                    m3
                </li>
                <li>转存量：
                    <el-input size="mini" style="width: 60px"></el-input>
                    m3
                </li>
                <li>消防水流量：
                    <el-input size="mini" style="width: 60px"></el-input>
                    h
                </li>
                <li>消防时间：
                    <el-input size="mini" style="width: 60px"></el-input>
                    h
                </li>
                <li>降雨量：
                    <el-input size="mini" style="width: 60px"></el-input>
                    mm
                </li>
                <li>汇水面积：
                    <el-input size="mini" style="width: 60px"></el-input>
                    m2
                </li>
                <li>生产废水量：
                    <el-input size="mini" style="width: 60px"></el-input>
                    m3
                </li>
                <li>收集池余量：
                    <el-input size="mini" style="width: 60px"></el-input>
                    m3
                </li>
            </ul>
            <ul>
                <li>事故水容积：<el-input size="mini"  style="width: 60px"></el-input>m3</li>
                <li>是否大于收集池余量：<el-input size="mini"  style="width: 60px"></el-input></li>
                <li>事故水容积：
                    <el-input size="mini" style="width: 60px"></el-input>
                    m3
                </li>
                <li>是否大于收集池余量：
                    <el-input size="mini" style="width: 60px"></el-input>
                </li>
            </ul>
            <div class="footer">
                <el-button type="primary" size="mini">计算</el-button>
@@ -151,7 +196,9 @@
</template>

<script>
import eventBus from '../../eventBus'
const cityOptions = ['上海', '北京', '广州', '深圳']

export default {
  name: 'index',
  data () {
@@ -159,18 +206,58 @@
      tit: '事件处置',
      showSchedule: false,
      tableData: [
        { name: '预案A', define: '综合预案', hierarchy: '二级单位', classification: '环保' },
        { name: '预案B', define: '专项预案', hierarchy: '直属企业', classification: '环保' },
        { name: '预案C', define: '现场处置预案', hierarchy: '基层单位', classification: '生产' },
        { name: '预案D', define: '现场处置预案', hierarchy: '基层单位', classification: '生产' },
        { name: '预案E', define: '现场处置预案', hierarchy: '基层单位', classification: '生产' }
        {
          name: '预案A',
          define: '综合预案',
          hierarchy: '二级单位',
          classification: '环保'
        },
        {
          name: '预案B',
          define: '专项预案',
          hierarchy: '直属企业',
          classification: '环保'
        },
        {
          name: '预案C',
          define: '现场处置预案',
          hierarchy: '基层单位',
          classification: '生产'
        },
        {
          name: '预案D',
          define: '现场处置预案',
          hierarchy: '基层单位',
          classification: '生产'
        },
        {
          name: '预案E',
          define: '现场处置预案',
          hierarchy: '基层单位',
          classification: '生产'
        }
      ],
      checkAll: false,
      checkedCities: ['上海', '北京'],
      cities: cityOptions,
      isIndeterminate: true,
      value: '',
      options: [{ value: '500', label: '500m' }, { value: '1000', label: '1km' }, { value: '2000', label: '2km' }, { value: '5000', label: '5km' }, { value: '10000', label: '10km' }],
      options: [{
        value: '500',
        label: '500m'
      }, {
        value: '1000',
        label: '1km'
      }, {
        value: '2000',
        label: '2km'
      }, {
        value: '5000',
        label: '5km'
      }, {
        value: '10000',
        label: '10km'
      }],
      isShowFenXi: false,
      CZFX: true,
      tableData2: [{
@@ -193,78 +280,96 @@
      showCalculate: false
    }
  },
  methods: {

  },
  methods: {},
  mounted () {

    eventBus.$on('events-reported', (obj) => {
      console.log(obj)
      this.showSchedule = obj
    })
  }
}
</script>

<style scoped lang="less">
.emergency{
    /deep/ .el-dialog{
        width: 450px;
    }
    .panel-title{
        text-align: left;
        padding: 5px 0 0 0;
    }
    .basicInformation{
        .area-selected{
            display: flex;
            justify-content:flex-end;
            align-items : center;
    .emergency {
        /deep/ .el-dialog {
            width: 450px;
        }
        .analysis-btn{
            display: flex;
            justify-content:space-between;
            align-items : center;

        .panel-title {
            text-align: left;
            padding: 5px 0 0 0;
        }
    }
    .fenXiChuZhi{
        display: flex;
        flex-wrap: wrap;
        >div{width: 50%}
        .filteringInformation{
            width: 100%;
            .header{

        .basicInformation {
            .area-selected {
                display: flex;
                justify-content: flex-end;
                align-items: center;
            }

            .analysis-btn {
                display: flex;
                justify-content: space-between;
                ul{
                align-items: center;
            }
        }

        .fenXiChuZhi {
            display: flex;
            flex-wrap: wrap;

            > div {
                width: 50%
            }

            .filteringInformation {
                width: 100%;

                .header {
                    display: flex;
                    li{
                        span{
                            display: block;
                    justify-content: space-between;

                    ul {
                        display: flex;

                        li {
                            span {
                                display: block;
                            }
                        }
                    }
                }
            }
            .content{
                display: flex;

                .content {
                    display: flex;
                }
            }
        }
    }
    .footer{
        display: flex;
        justify-content:flex-end
    }
    .calculate{
        ul{

        .footer {
            display: flex;
            flex-wrap: wrap;
            li{
                width: 50%;
            justify-content: flex-end
        }

        .calculate {
            ul {
                display: flex;
                flex-wrap: wrap;

                li {
                    width: 50%;
                }
            }

            /deep/ .el-dialog {
                left: 810px;
            }
        }
        /deep/ .el-dialog{
            left: 810px;
        }
    }
}
    .emergency .widt800{
        /deep/ .el-dialog{

    .emergency .widt800 {
        /deep/ .el-dialog {
            width: 800px;
        }
    }

 src/components/panel/topicSearch/EnterpriseEmergency/ReportPopup.vue

@@ -1,14 +1,15 @@
<template>
    <div class="public-bounced-content">
        <!--        <el-dialog-->
        <!--                custom-class="public-bounced-content_dialog"-->
        <!--                title="上报事件"-->
        <!--                :visible.sync="dialogVisible"-->
        <!--                :append-to-body="true"-->
        <!--                :modal="false"-->
        <!--                v-dialogDragBottom-->
        <!--        >-->
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="search-form">
<!--    <el-dialog-->
<!--            custom-class="events-reported"-->
<!--            title="上报事件"-->
<!--            :visible.sync="eventsReported"-->
<!--            :append-to-body="true"-->
<!--            :modal="false"-->
<!--            v-dialogDrag-->
<!--    >-->
<!--    </el-dialog>-->
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="90px" class="search-form">
            <!--            事件名称-->
            <el-form-item class="input-event-name" label="事件名称" prop="nameOfEvent">
                <el-input v-model="ruleForm.nameOfEvent" placeholder="将事件命名"></el-input>
@@ -84,7 +85,7 @@
                </el-col>
            </el-row>
            <!--             点击上传-->
            <el-form-item>
            <el-form-item label="附件上传" prop="upload">
                <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
@@ -100,7 +101,7 @@
            </el-form-item>
            <!--            消息推送-->
            <el-form-item label="消息推送" prop="beingPush">
                <el-checkbox-group v-model="ruleForm.beingPushed" @change="infotsChange()">
                <el-checkbox-group v-model="ruleForm.beingPushed" @change="infotsChange">
                    <el-checkbox v-for="item in ruleForm.beingPushList"
                                 :key="item.name"
                                 :label="item.name"
@@ -110,13 +111,17 @@
            </el-form-item>
            <div v-show="wayTo">
                <el-form-item label="事件描述" prop="desc">
                    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                    <el-input type="textarea" resize="none" v-model="ruleForm.desc"
                              placeholder="带出事件类型，事件位置，事件单位，事件时间等字段自动生产一部分描述">
                    </el-input>
                    <el-button type="primary">一键<br/>生成</el-button>
                </el-form-item>
                <el-form-item label="接收人员" prop="desc">
                    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                    <el-input type="textarea" resize="none" v-model="ruleForm.desc" placeholder="张三；李四，"></el-input>
                    <el-button type="primary">+</el-button>
                </el-form-item>
            </div>
            <el-form-item>
            <el-form-item class="confirmCancel">
                <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                <el-button @click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
@@ -126,11 +131,15 @@

<script>

import eventBus from '../../../.././eventBus'

export default {
  name: 'ReportPopup',
  data () {
    return {
      dialogVisible: false,
      // eventsReported: true,
      eventsReported: false,
      saveSuccess: false,
      // 表单绑定数据
      ruleForm: {
        // 事件名称 绑定数据
@@ -274,26 +283,21 @@
    }
  },
  methods: {
    // 消息推送 选择
    // 消息推送 选择推送的对象
    infotsChange () {
      this.wayTo = !this.wayTo
      console.log(this.ruleForm.beingPushed)
      // for (let i = 0; i < this.ruleForm.beingPushed.length; i++) {
      //   // console.log(this.ruleForm.beingPushed[i])
      //   if (this.ruleForm.beingPushed[i] === '短信推送' || this.ruleForm.beingPushed[i] === '手机应用推送') {
      //     this.wayTo = true
      //   } else {
      //     this.wayTo = !this.wayTo
      //   }
      // }
      // if (this.ruleForm.beingPushed[0] === '短信推送') {
      //   console.log('短信推送')
      //   this.wayTo = true
      // }
      if (this.ruleForm.beingPushed.indexOf('短信推送') > -1 || this.ruleForm.beingPushed.indexOf('手机应用推送') > -1) {
        // console.log('包含该元素')
        this.wayTo = true
      } else {
        // console.log('不包含该元素')
        this.wayTo = false
      }
    },
    // 点击上传 的取消上传事件
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    // 点击上传 的上传事件
    handlePreview (file) {
      console.log(file)
    },
@@ -303,19 +307,30 @@
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    closePopup () {
      this.flags = false
    },
    // 表单的确认按钮点击事件
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     alert('submit!')
      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })
      // this.eventsReported = false
      // this.saveSuccess = true

      // temp临时
      window.mapManager.clickDialogSwitch = false
      this.eventsReported = false
      eventBus.$emit('events-reported', true)
    },
    // 处置分析
    disposalAnalysis () {
      this.saveSuccess = false
      eventBus.$emit('events-reported', true)
    },
    // form表单的取消按钮点击事件 重置信息
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
@@ -325,19 +340,17 @@

<style lang="less" scoped>

    /deep/ .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
        display: none;
    /deep/ .el-form-item {
        margin: 5px 0;
    }

    /deep/ .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:after {
        content: '*';
        color: #F56C6C;
        margin-left: 4px;
    }
    /deep/ .el-checkbox__label ::after {
        content: '*' !important;
        color: #F56C6C !important;
        margin-left: 4px !important;
    /deep/ .el-textarea__inner {
        width: 2rem;
        color: darkgrey;
        border: solid 1px #00fff6;
        background-color: rgba(0, 255, 246, 0.14);
        outline: none;
        font-size: 0.01rem;
    }

    /deep/ .el-checkbox__label {
@@ -345,32 +358,26 @@
    }

    /deep/ input {
        /*width: 145px;*/
        border-radius: 0;
        background-color: rgba(0, 255, 246, 0.14);
        border: solid 1px #00fff6;
        color: #C0C4CC;
        font-size: 0.01rem;
        /*padding: 0 15px;*/
    }

    /deep/ .el-input.is-disabled .el-input__inner {
        border-radius: 0;
        background-color: rgba(0, 255, 246, 0.14);
        border: solid 1px #00fff6;
        color: #C0C4CC;
        font-size: 0.01rem;
        /*padding: 0 15px;*/
        border-radius: 4px;
        background: @background-color;
        border-color: @color;
    }

    /deep/ .input-event-name {
        margin: 15px 0;
        width: 75%;

        .el-input__inner {
            width: 100%;
            border-radius: 5px;
            background: rgba(0, 16, 30, 0.5);
        }
    /deep/ .el-input__inner {
        /*width: 145px;*/
        border-radius: 5px;
        background: rgba(0, 16, 30, 0.5);
    }

    /deep/ .el-form-item__label {
@@ -380,4 +387,10 @@
    /deep/ .el-radio__label {
        color: @color;
    }

    .confirmCancel {
        text-align: right;
        /*display: flex;*/
        /*justify-content: flex-end;*/
    }
</style>

 src/components/panel/topicSearch/EnterpriseEmergency/ResourcesQuery.vue

@@ -74,8 +74,8 @@
        dataType: '',
        keyword: '',
        eventNameList: [
          { name: '金陵石化' },
          { name: '南京化学' }
          { name: '扬子石化' },
          { name: '仪征化纤' }
        ]
      },
      // 搜索到的数据绑定的active的样式
@@ -129,19 +129,18 @@
    async handleSearch () {
      this.list = []
      this.wfsHelper.clearFilter()
      // todo 现在企业应急还没区分开类型，后面改
      // console.log(this.form.dataType)
      // this.wfsHelper.setTypeName([this.form.dataType.typeName])
      this.wfsHelper.setTypeName(['sewer:emergency'])
      this.wfsHelper.setMaxFeatures(100)
      if (this.form.dataType) {
        this.wfsHelper.addEquals('orgname', '\'' + this.form.eventName + '\'')
        this.wfsHelper.addEquals('type', '\'' + this.form.dataType.name + '\'')
      }
      if (this.form.keyword) {
        this.wfsHelper.setFilter(this.form.keyword)
        this.wfsHelper.addLike('name', this.form.keyword)
      }
      const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
      console.log(res)
      // console.log(res)
      if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {
        this.list = res.features
      }

 src/components/panel/topicSearch/SewersSearch.vue

@@ -177,11 +177,12 @@
      this.wfsHelper.setTypeName([this.form.dataType.typeName])
      if (this.form.keyword) {
        this.wfsHelper.addLike('name', this.form.keyword)
        this.wfsHelper.setFilter(this.form.keyword)
      }
      const filter = this.form.dataType.filter
      if (filter) {
        this.wfsHelper.setFilter(filter)
      }
      // const filter = this.form.dataType.filter
      // if (filter) {
      //   this.wfsHelper.setFilter(filter)
      // }
      // const _this = this
      const res = await AjaxUtils.GetDataAsynByUrl(this.wfsHelper.getUrl(), {})
      if (res instanceof Object && Object.prototype.hasOwnProperty.call(res, 'features')) {

 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue

@@ -56,10 +56,12 @@
<script>

import mapApi from '../../../../../api/mapApi'
import eventBus from '../../../../../eventBus'
import { createFlowLine } from './PublicWay'

export default {
  name: 'Connectivity',
  props: ['tableData'],
  data () {
    return {
      // 连通性  // 1  连通性起始管段   0 连通性结束管段 用来判断是点击了起始  还是结束管段
@@ -81,6 +83,15 @@
      flowPipeLine: null
    }
  },
  mounted () {
    this.$nextTick(() => {
      eventBus.$on('tabData-change', (obj) => {
        if (obj) {
          this.handleClick()
        }
      })
    })
  },
  methods: {
    // 地图上点击
    selectPipeLine () {

 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue

@@ -8,8 +8,7 @@
        <div slot="header" class="fixed-style">
            <span>管段查询结果</span>
        </div>
        <el-table class="tableBox" :data="tableData" height="150" max-height="200" highlight-current-row
                  style="width: 100%" @row-click="selectRow" size="mini">
        <el-table class="tableBox" :data="tableData" height="150" max-height="200" highlight-current-row style="width: 100%" size="mini">
            <el-table-column prop="mediumtype" label="介质类型" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="x" label="断面(经度)" :show-overflow-tooltip="true" width="80"></el-table-column>
            <el-table-column prop="y" label="断面(纬度)" :show-overflow-tooltip="true" width="80"></el-table-column>
@@ -17,17 +16,15 @@
            <el-table-column prop="spacing" label="间距(m)" width="80"></el-table-column>
        </el-table>
        <span class="fixed-style">断面图</span>
        <span v-show="!myChartShow"
              style="color: #909399;font-size: 12px;height: 200px;display: block;text-align: center;line-height: 200px">暂无数据</span>
        <div v-show="myChartShow" id="echarts_box" ref="myChart"
             style="width:350px;height:200px;margin: 0 auto"></div>
        <span v-show="!myChartShow" style="color: #909399;font-size: 12px;height: 200px;display: block;text-align: center;line-height: 200px">暂无数据</span>
        <div v-show="myChartShow" id="echarts_box" ref="myChart" style="width:350px;height:200px;margin: 0 auto"></div>
    </div>
</template>

<script>
import eventBus from '../../../../../eventBus'
import mapApi from '../../../../../api/mapApi'
import DrawLine from './DrawLine'
import DrawLine from '../../../../plugin/DrawLine'

export default {
  name: 'CrossSectional',
@@ -53,7 +50,7 @@
    })
  },
  methods: {
    // 横断面绘制线段
    // 横断面 线段绘制
    drawLine () {
      if (this.measure === null) {
        this.measure = new DrawLine(window.map)
@@ -61,7 +58,7 @@
      this.measure.destory()
      this.measure.init()
    },
    // 横断面数据请求
    // 绘制的横断面 线段数据获取
    async getHdmPoint (line) {
      // 横断面数据
      this.hdmParam = {
@@ -71,7 +68,7 @@
        y2: line[1].lat
      }
    },
    // 横断面数据请求
    // 横断面 数据请求
    async jdmQuery () {
      this.tableData = []
      if (this.hdmParam == null) {
@@ -80,67 +77,26 @@
      }
      // 已绘制线图 进行绘制横断面数据分析
      const res = await mapApi.getCrossSection(this.hdmParam)
      console.log(res)
      // let obj = {}
      const dataSpacing = res.data.pointInterval
      for (let i = 0; i < dataSpacing.length; i++) {
        const objSpacing = {
          spacing: dataSpacing[i]
        }
        console.log(objSpacing)
        this.tableData.push(objSpacing)
      }
      // const dataSpacing = res.data.pointInterval
      // // for (let i = 0; i < dataSpacing.length; i++) {
      // //   this.obj.spacing = dataSpacing[i]
      // // }
      // const dataPoint = res.data.point
      // // const obj = {}
      // for (let i = 0; i < dataPoint.length; i++) {
      //   this.obj.mediumtype = dataPoint[i].pipelines.extraData.mediumtype
      //   this.obj.x = parseFloat(dataPoint[i].crossPoint3D.x).toFixed(4)
      //   this.obj.y = parseFloat(dataPoint[i].crossPoint3D.y).toFixed(4)
      //   this.obj.z = parseFloat(dataPoint[i].crossPoint3D.z).toFixed(4)
      //   this.obj.spacing = parseFloat(dataPoint[i].crossPoint3D.z).toFixed(4)
      // }
      // 调用数据处理方法
      this.dealWithData(res)
      // table数据处理
      const dataPoint = res.data.point
      // 存储间距list
      const spacingList = res.data.pointInterval.reverse()
      for (let i = 0; i < dataPoint.length; i++) {
        const obj = {
          mediumtype: dataPoint[i].pipelines.extraData.mediumtype,
          x: parseFloat(dataPoint[i].crossPoint3D.x).toFixed(4),
          y: parseFloat(dataPoint[i].crossPoint3D.y).toFixed(4),
          z: parseFloat(dataPoint[i].crossPoint3D.z).toFixed(4)
          z: parseFloat(dataPoint[i].crossPoint3D.z).toFixed(4),
          spacing: spacingList[i - 1]
        }
        this.tableData.push(obj)
      }
      this.dealWithData(res)
    },
    // 对获取到的数据进行处理
    dealWithData (e) {
      const dataSeries = e.data.point
      let tempData
      const storeData = []
      const dataList = []
      this.echartsList = []
      for (let i = 0; i < dataSeries.length; i++) {
        if (storeData.length === 0) {
          storeData.push(name)
          tempData = {
            name: dataSeries[i].pipelines.oilPipeID,
            data: e.data.pointInterval,
            type: 'line'
          }
          this.echartsList.push(tempData)
        }
        dataList.push(dataSeries[i].pipelines.oilPipeID)
      }
      // console.log(dataList)
      // const seriesList = e.data.pointInterval
      // let seriesdata
      // for (let i = 0; i < seriesList.length; i++) {
      //   console.log(seriesList[i])
      // }
      // x数据处理
      this.selectRow(dataList)
      console.log(e)
    },
    // 横断面绘制完成后 进行横断面数据分析 进行图表展示
    selectRow (dataList) {

 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue

@@ -75,6 +75,10 @@
      this.tableDataLinkEnd = []
      this.tableDataLinkResult = []
      this.lxTableDataResult = []
      if (this.currentSelectEndLine != null) {
        this.currentSelectEndLine.remove()
        this.currentSelectEndLine = null
      }
    },
    // 地图上点击
    selectPipeLine () {

 src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue

@@ -11,721 +11,39 @@
                <Flow></Flow>
            </el-tab-pane>
            <el-tab-pane label="横断面" name="fourth">
                <!--                <CrossSectional></CrossSectional>-->
                <el-row>
                    <el-button type="primary" @click="drawLine" size="mini" title="地图上绘制要进行分析截断面的线">绘制线段</el-button>
                    <el-button type="primary" @click="jdmQuery" size="mini" title="截断面分析">截断面分析</el-button>
                    <el-button type="primary" @click="jdmClear" size="mini" title="清除截断面分析结果">清除</el-button>
                </el-row>
                <!-- <el-card class="box-card">-->
                <div slot="header" class="fixed-style">
                    <span>管段查询结果</span>
                </div>
                <el-table class="tableBox" :data="tableData" height="150" max-height="200" highlight-current-row
                          style="width: 100%" @row-click="selectRow" size="mini">
                    <el-table-column prop="mediumtype" label="介质类型" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="x" label="断面(经度)" :show-overflow-tooltip="true" width="80"></el-table-column>
                    <el-table-column prop="y" label="断面(纬度)" :show-overflow-tooltip="true" width="80"></el-table-column>
                    <el-table-column prop="z" label="断面(高程)" :show-overflow-tooltip="true" width="80"></el-table-column>
                    <el-table-column prop="spacing" label="间距(m)" width="80"></el-table-column>
                    <!--                    <el-table-column class-name="fixed-table" fixed="right" label="图表" width="40">-->
                    <!--                        <template slot-scope="scope">-->
                    <!--                            <el-button @click="selectRow(scope.row)" type="text" size="small">查看</el-button>-->
                    <!--                        </template>-->
                    <!--                    </el-table-column>-->
                </el-table>
                <!--  </el-card>-->
                <!-- <el-card class="box-card">
                    <div slot="header" class="fixed-style">
                        <span>断面图</span>
                    </div>
                    <span v-show="!myChartShow" style="color: #909399;font-size: 12px;">暂无数据</span>
                    <div v-show="myChartShow" id="echarts_box" ref="myChart" style="width: 350px;height:200px;"></div>
                </el-card> -->
                <span class="fixed-style">断面图</span>
                <span v-show="!myChartShow"
                      style="color: #909399;font-size: 12px;height: 200px;display: block;text-align: center;line-height: 200px">暂无数据</span>
                <div v-show="myChartShow" id="echarts_box" ref="myChart"
                     style="width:350px;height:200px;margin: 0 auto"></div><!-- v-show="myChartShow" -->
                <CrossSectional></CrossSectional>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>

import eventBus from '../../../../eventBus'
import DrawLine from './AnalysisChoose/DrawLine'
import mapApi from '../../../../api/mapApi'
import { pulseEffect } from '../../../../utils/utils'
import Connectivity from './AnalysisChoose/Connectivity'
import Tube from './AnalysisChoose/Tube'
import Flow from './AnalysisChoose/Flow'
// import CrossSectional from './AnalysisChoose/CrossSectional'
import CrossSectional from './AnalysisChoose/CrossSectional'
import eventBus from '../../../../eventBus'

export default {
  name: 'SewersAnalysis',
  components: {
    Connectivity,
    Tube,
    Flow
    // CrossSectional
    Flow,
    CrossSectional
  },
  data () {
    return {
      // 地图点击类型 first连通性点击  second爆管点击  third流向点击 fourth横断面
      activeName: 'first',
      measure: null,
      map: window.map,

      myChart: null,
      options: [],
      echartsList: [],
      myChartShow: false,

      flowPipeLine: null,

      // 用于判断
      currentSelectStart: null,
      currentSelectEnd: null,
      currentSelectStartLine: null,
      currentSelectEndLine: null,
      currentSelectResultLine: null,
      currentResultLine: null,

      linkPipeline: [],

      bgPoint: null,
      bgMarker: null,
      hdmParam: null,

      // 连通性  // 1  连通性起始管段   0 连通性结束管段 用来判断是点击了起始  还是结束管段
      linkType: 1,
      // 连通性 起始管段 表格数据
      tableDataLinkStart: [],
      // 连通性 结束管段 表格数据
      tableDataLinkEnd: [],
      // 连通性 分析结果 展示 => 连通 || 不连通
      currentLinkIsTrue: '',
      // 连通性 分析结果 表格数据
      tableDataLinkResult: [],

      // 爆管 发生爆裂的管段 table表格数据
      bgPipeLine: [],
      // 爆管 需要关闭的阀门 table表格数据
      bgFm: [],

      // 流向 选择的管段 的table表格数据
      tableDataLiuxiang: [],
      // 流向 分析结果 的table表格数据
      lxTableDataResult: [],

      // 横断面 管段查询结果 的table表格数据
      tableData: [],
      obj: {}

      tableData: false,
      tableDataList: []
    }
  },
  mounted () {
    // 初始化echarts图表
    this.myChart = this.$echarts.init(this.$refs.myChart)
    // 使用 DrwLine方法
    eventBus.$on('draw-hdm-line', (points) => {
      this.getHdmPoint(points)
    })
  },
  methods: {
    // tab切换
    handleClick (tab, event) {
      console.log(event)
      // console.log(tab)
      this.clearLinkPipe()
      this.clearLX()
      this.linkClear()
      this.jdmClear()
      this.currentLinkIsTrue = ''
      this.bgFm = []
      this.bgPipeLine = []
      this.tableData = []
      this.tableDataLiuxiang = []
      this.tableDataLinkStart = []
      this.tableDataLinkEnd = []
      this.tableDataLinkResult = []
      this.lxTableDataResult = []
    },

    // 地图上点击
    selectPipeLine () {
      window.map.on('click', this.selectClick)
      // 关闭弹窗
      // window.mapManager.clickDialogSwitch = false
    },
    // 地图上点击回调
    selectClick (e) {
      // console.log(e)
      window.map.off('click', this.selectClick)
      const point = [e.latlng.lng, e.latlng.lat]
      this.getPipeLine(point)
    },
    // 点击获取判断数据
    async getPipeLine (point) {
      const param = {
        x: point[0],
        y: point[1],
        radius: 3
      }
      // 根据参数请求接口数据
      const res = await mapApi.findPipelineByClickPoint(param)
      console.log(res)
      if (this.activeName === 'first') {
        if (this.linkType === 1) {
          this.tableDataLinkStart = res.data
        } else {
          this.tableDataLinkEnd = res.data
        }
      } else if (this.activeName === 'second') {
        this.bgPipeLine = res.data
      } else if (this.activeName === 'third') {
        this.tableDataLiuxiang = res.data
      } else if (this.activeName === 'fourth') {
      }
    },
    // 流向显示 的方法参数封
    createFlowLine (param) {
      const flowLine = window.L.polyline(param.points, param.option)
      flowLine.addTo(window.map)
      return flowLine
    },
    createFlowMarker (point) {
      return window.L.marker(point, {
        icon: window.L.divIcon({
          className: 'dIcon',
          html: '<div class="plane live">' +
              // '<img src="'+require("../../assets/images/map/ship.png")+
              '<div style="position: absolute;' +
              '    width: 20px;' +
              '    height: 20px;' +
              '    border-radius: 50%;' +
              '  content: \'\'; background-color: #FF664A;"/>' +
              '<span></span><span></span></div></>',
          iconSize: [90, 36]
        })
      })
    },

    // 连通性 ===> 地图点击起始管段e
    linkClickStart (e) {
      // console.log('地图点击起始管段')
      this.linkType = 1
      this.selectPipeLine()
    },
    // 连通性 起始管段 table列表数据 选择数据事件 的点击事件
    linkSelectStart (e) {
      // console.log(e)
      this.currentSelectStart = e
      if (this.currentSelectStartLine != null) {
        this.currentSelectStartLine.remove()
        this.currentSelectStartLine = null
      }
      const geom = JSON.parse(e.geomText)
      this.currentSelectStartLine = window.L.geoJSON(geom, {
        style: function (feature) {
          return {
            weight: 10,
            color: 'rgba(0,255,0,.6)'
          }
        }
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectStartLine.getBounds())
    },
    // 连通性 ===> 地图点击结束管段
    linkClickEnd () {
      // console.log('地图点击结束管段')
      this.linkType = 0
      this.selectPipeLine()
    },
    // 连通性 结束管段 table列表数据 选择数据事件 的点击事件
    linkSelectEnd (e) {
      // console.log('选择结束管段')
      this.currentSelectEnd = e

      // 做判断remove
      if (this.currentSelectEndLine != null) {
        this.currentSelectEndLine.remove()
        this.currentSelectEndLine = null
      }
      // geoGson
      const geom = JSON.parse(e.geomText)
      this.currentSelectEndLine = window.L.geoJSON(geom, {
        style: function (feature) {
          return {
            weight: 10,
            color: 'rgba(255, 247, 0, 0.7)'
          }
        }
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectEndLine.getBounds())
    },
    // 连通性查询 结果
    async linkQuery () {
      // 每次查询分析结果制空
      this.tableDataLinkResult = []
      if (this.linkPipeline.length > 1) {
        this.linkPipeline.forEach((itm) => {
          itm.remove()
        })
        this.linkPipeline = []
      }
      // 判断 如果起始管段 结束管段没有数据 则返回false 提示还未选择起始/结束管段
      if (this.currentSelectStart === null || this.currentSelectEnd === null) {
        this.$message('请选择起始管段和结束管段')
        return false
      }

      // 请求数据时的参数
      const param = {
        startLineID: this.currentSelectStart.pipesegcode,
        endLineID: this.currentSelectEnd.pipesegcode
      }
      console.log(param)
      // 请求接口和数据
      const res = await mapApi.findConnectedPipelines(param)
      // console.log(res)
      // 判断数据结果 === 0 则没有请求到数据
      if (res.data.length === 0) {
        this.$message('没有找到连通的管段')
        // 进行判断
        this.currentLinkIsTrue = '不连通'
        return
      }
      this.tableDataLinkResult = res.data
      this.currentLinkIsTrue = '连通'
      // table 数组数据置空
      const linkPipe = []
      // 数据遍历geoJson
      res.data.forEach((itm, idx) => {
        const geom = JSON.parse(itm.geomText)
        const points = []
        geom.coordinates.forEach((it, id) => {
          points.push(it.reverse())
        })
        linkPipe.push(points)
      })
      linkPipe.forEach((itm, idx) => {
        const param1 = {
          points: itm,
          option: {
            dashArray: '15 15',
            dashSpeed: -30,
            color: '#ffff00'
          }
        }
        const line = this.createFlowLine(param1)
        this.linkPipeline.push(line)
      })
    },
    // 定位方法事件
    linkResultSelect (e) {
      // console.log('连通性分析结果列表点击')
      console.log(e)
      const geom = JSON.parse(e.geomText)
      if (this.currentSelectResultLine != null) {
        this.currentSelectResultLine.remove()
        this.currentSelectResultLine = null
      }
      this.currentSelectResultLine = window.L.geoJSON(geom, {
        style: function (feature) {
          return {
            color: 'rgba(255,0,0,.6)',
            weight: 10
          }
        }
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectResultLine.getBounds())
    },
    // 连通性的清除功能
    linkClear () {
      if (this.currentSelectStartLine != null) {
        this.currentSelectStartLine.remove()
        this.currentSelectStartLine = null
      }
      if (this.currentSelectEndLine != null) {
        this.currentSelectEndLine.remove()
        this.currentSelectEndLine = null
      }
      if (this.currentSelectResultLine != null) {
        this.currentSelectResultLine.remove()
        this.currentSelectResultLine = null
      }
      if (this.bgMarker != null) {
        this.bgMarker.remove()
        this.bgMarker = null
      }
    },

    // 爆管 ===> 选择管段
    bgClick () {
      this.selectPipeLine()
    },
    async bgSelect (e) {
      // console.log('选择爆管管段')
      // console.log(e)
      this.bgFm = []
      if (this.bgMarker != null) {
        this.bgMarker.remove()
        this.bgMarker = null
      }

      if (this.currentSelectEndLine != null) {
        this.currentSelectEndLine.remove()
        this.currentSelectEndLine = null
      }
      this.clearLinkPipe()
      // 给选择中的数据添加设置样式
      const geom = JSON.parse(e.geomText)
      this.currentSelectEndLine = window.L.geoJSON(geom, {
        style: function (feature) {
          return {
            weight: 10,
            color: 'rgba(200,0,200,.6)'
          }
        }
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectEndLine.getBounds())

      // 数据请求参数
      const param = {
        lineID: e.pipesegcode
      }
      const res = await mapApi.findLeakages(param)
      // console.log(res)

      const len = res.data.length
      if (len === 0) {
        this.$message('未找到需要关闭的阀门')
        return
      }
      res.data.reverse()
      this.bgFm = res.data
      // console.log(res.data)

      this.bgPoint = res.data[0].startControlPoint

      // const point = JSON.parse(this.bgPoint.geomText)
      // const p = [point.coordinates[1], point.coordinates[0]]
      // this.bgMarker = this.createFlowMarker(p)
      // this.bgMarker = pulseEffect(p)
      // this.bgMarker.bindTooltip(this.bgPoint.pointnumbe)
      // this.bgMarker.addTo(window.map)
      // window.map.flyTo(p)

      const linkPipe = []
      res.data.forEach((itm, idx) => {
        const geom = JSON.parse(itm.geomText)
        const points = []
        geom.coordinates.forEach((it, id) => {
          points.push(it.reverse())
        })
        linkPipe.push(points)
      })

      linkPipe.forEach((itm, idx) => {
        const param1 = {
          points: itm,
          option: {
            dashArray: '15 15',
            dashSpeed: -30,
            color: '#ffff00'
          }
        }
        const line = this.createFlowLine(param1)
        this.linkPipeline.push(line)
      })
    },
    bgFmClick (e) {
      // console.log('点击影响的阀门')
      // console.log(e)
      // const point = [e.data[0][0], e.data[0][1]]
      const point = [e.startControlPoint.y, e.startControlPoint.x]
      pulseEffect(point)
      // const marker = this.createFlowMarker(point)
      // marker.addTo(window.map)
      // window.map.flyTo(point, 17)
    },

    // 流向分析结果table列表数据点击
    lxResultSelect (e) {
      // console.log('连通性分析结果列表点击')
      // console.log(e)

      const geom = JSON.parse(e.geomText)
      if (this.currentSelectResultLine != null) {
        this.currentSelectResultLine.remove()
        this.currentSelectResultLine = null
      }
      this.currentSelectResultLine = window.L.geoJSON(geom, {
        style: function (feature) {
          return {
            weight: 10,
            color: 'rgba(0,250,255,.6)'
          }
        }
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectResultLine.getBounds())
    },
    // 点击显示流向 table列表中的数据 => 进行官网流向的显示
    async lxQuery (e) {
      console.log(e)
      this.clearLinkPipe()
      const param = {
        // lineNodeID: e.startpoint
        lineNodeID: e.startpointnumber
      }
      const res = await mapApi.findFlowDirection(param)
      this.lxTableDataResult = res.data
      const linkPipe = []
      res.data.forEach((itm, idx) => {
        const geom = JSON.parse(itm.geomText)
        const points = []
        geom.coordinates.forEach((it, id) => {
          points.push(it.reverse())
        })
        linkPipe.push(points)
      })

      linkPipe.forEach((itm, idx) => {
        const param1 = {
          points: itm,
          option: {
            dashArray: '15 15',
            dashSpeed: -30,
            color: '#ffff00'
          }
        }
        const line = this.createFlowLine(param1)
        this.linkPipeline.push(line)
      })
    },
    // 清除流向
    clearLX () {
      if (this.flowPipeLine != null) {
        this.flowPipeLine.remove()
        this.flowPipeLine = null
      }
    },
    // 流向-管段选择
    selectRowLiuXiang (e) {
      // 选择要显示的流向线
      // console.log('选择要显示的流向线')
      // console.log(e)
    },
    lxHandleClick (e) {
      // console.log('正流向显示')
      // console.log(e)
      //
      // // 清除流向方法
      // this.clearLX()
      // const param = {
      //   points: e.data,
      //   option: {
      //     dashArray: '15 15',
      //     dashSpeed: -30
      //   }
      // }
      // this.flowPipeLine = this.createFlowLine(param)
    },

    // 清楚分析结果
    clearLinkPipe () {
      if (this.linkPipeline.length > 0) {
        this.linkPipeline.forEach((itm, idx) => {
          itm.remove()
        })
      }
      this.linkPipeline = []
    },
    // 逆流向显示
    lxHandleClick2 (e) {
      // console.log('逆流向显示')
      // console.log(e)
      // if (this.flowPipeLine != null) {
      //   this.flowPipeLine.remove()
      //   this.flowPipeLine = null
      // }
      // const param = {
      //   points: e.data,
      //   option: {
      //     dashArray: '15 15',
      //     dashSpeed: 30
      //   }
      // }
      // this.flowPipeLine = this.createFlowLine(param)
    },
    // 横断面绘制线段
    drawLine () {
      // console.log('drawLine')
      if (this.measure === null) {
        this.measure = new DrawLine(window.map)
      }
      this.measure.destory()
      this.measure.init()
    },
    // 横断面数据请求
    async getHdmPoint (line) {
      // console.log('横断面的绘制线')
      // console.table(line)
      // 横断面数据
      this.hdmParam = {
        x1: line[0].lng,
        y1: line[0].lat,
        x2: line[1].lng,
        y2: line[1].lat
      }
    },
    // 横断面数据请求
    async jdmQuery () {
      this.tableData = []
      if (this.hdmParam == null) {
        this.$message('请先在地图上绘制截断线')
        return false
      }
      // 已绘制线图 进行绘制横断面数据分析
      const res = await mapApi.getCrossSection(this.hdmParam)
      console.log(res)
      const dataPoint = res.data.point
      // 存储间距list
      const spacingList = res.data.pointInterval.reverse()
      // console.log(spacingList)
      for (let i = 0; i < dataPoint.length; i++) {
        const obj = {
          mediumtype: dataPoint[i].pipelines.extraData.mediumtype,
          x: parseFloat(dataPoint[i].crossPoint3D.x).toFixed(4),
          y: parseFloat(dataPoint[i].crossPoint3D.y).toFixed(4),
          z: parseFloat(dataPoint[i].crossPoint3D.z).toFixed(4),
          spacing: spacingList[i - 1]
        }
        this.tableData.push(obj)
      }
      // spacingList.reverse()
      // console.log(spacingList)
      // console.log(this.tableData)
      this.dealWithData(res)
    },
    dealWithData (e) {
      const dataSeries = e.data.point
      let tempData
      const storeData = []
      const dataList = []
      this.echartsList = []
      for (let i = 0; i < dataSeries.length; i++) {
        if (storeData.length === 0) {
          storeData.push(name)
          tempData = {
            name: dataSeries[i].pipelines.oilPipeID,
            data: e.data.pointInterval,
            type: 'line'
          }
          this.echartsList.push(tempData)
        }
        dataList.push(dataSeries[i].pipelines.oilPipeID)
      }
      // console.log(dataList)
      // const seriesList = e.data.pointInterval
      // let seriesdata
      // for (let i = 0; i < seriesList.length; i++) {
      //   console.log(seriesList[i])
      // }
      // x数据处理
      this.selectRow(dataList)
    },
    // 横断面绘制完成后 进行横断面数据分析 进行图表展示
    selectRow (dataList) {
      // console.log(dataList)
      // 3. 使用刚指定的配置项和数据，显示图表
      this.option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        // legend: {
        //   // data: ['直接访问', '搜索引擎']
        //   data: dataList
        // },
        toolbox: {
          show: false,
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '10px',
          right: '0',
          top: '10px',
          bottom: '5px',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              // formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            }
            // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            // data: dataList
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              // formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            }
          }
        ],
        // series: [
        //   {
        //     name: '搜索引擎',
        //     type: 'line',
        //     stack: '总量',
        //     label: {
        //       show: true,
        //       position: 'top'
        //     },
        //     areaStyle: {},
        //     emphasis: {
        //       focus: 'series'
        //     },
        //     data: [820, 932, 901, 934, 1290, 1330, 1320]
        //   }
        // ]
        series: this.echartsList
      }
      this.myChartShow = true
      this.myChart.clear()
      this.myChart.setOption(this.option)
    },
    // 横断面清除
    jdmClear () {
      this.hdmParam = null
      this.tableData = []
      this.option = []
      this.myChartShow = false
      this.myChart.clear()
      if (this.measure != null) {
        this.measure.destory()
      }
      eventBus.$emit('tabData-change', true)
    }
  }
}

 src/components/plugin/DrawLine.js

New file
@@ -0,0 +1,55 @@
import L from 'leaflet'
// import eventBus from '../../../../../eventBus'
import eventBus from '../../eventBus'

class DrawLine {
  constructor (map) {
    this.points = []
    this.color = 'red'
    this.layers = L.layerGroup()
    this.polyline = null
    this.marker = null
    this.points = []
    this.polyline = null
    this.marker = null
    this.map = map
  }

    init = () => {
      this.map.on('click', this.click)
      this.map.on('mousemove', this.mousemove)
      this.map.on('dblclick', this.dbClick)
    }

    click = (e) => {
      this.map.doubleClickZoom.disable()
      this.points.push(e.latlng)
      if (this.points.length > 1) {
        this.dbClick()
      }
    }

    mousemove = (e) => {
      this.points.push(e.latlng)
      if (this.polyline) { this.map.removeLayer(this.polyline) }
      this.polyline = L.polyline(this.points, { showMeasurements: false, color: 'red' })
      this.polyline.addTo(this.layers)
      this.layers.addTo(this.map)
      this.points.pop()
    }

    dbClick = (e) => {
      this.polyline.addTo(this.layers)
      this.map.off('click', this.click).off('mousemove', this.mousemove).off('dblclick', this.dbClick)
      eventBus.$emit('draw-hdm-line', this.points)
    }

    destory () {
      if (this.polyline) { this.map.removeLayer(this.polyline) }
      if (this.marker) { this.marker.remove() }
      this.points = []
      this.layers.clearLayers()
    }
}

export default DrawLine

 src/views/MapTemplate.vue

@@ -17,7 +17,7 @@
        <!--    <el-button type="primary" @click="ChangeWaterState" class="Waste-water">废水</el-button>-->
        <!--    <el-button type="primary" @click="AddGasHelper" class="flue-gas">废气</el-button>-->
<!--        <PublicBounced ref="PublicBounced"></PublicBounced>-->
<!--            <ReportPopup></ReportPopup>-->
            <ReportPopup></ReportPopup>
        <Emergency ref="Emergency"></Emergency>
        <Message></Message>
    </div>
@@ -39,7 +39,7 @@
// // 公共展示数据
// import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced'
import LayerFactory from '@components/LayerController/service/LayerFactory'
// import ReportPopup from '../components/panel/topicSearch/SewersSelect/EnterpriseEmergency/ReportPopup'
import ReportPopup from '../components/panel/topicSearch/EnterpriseEmergency/ReportPopup'
import Emergency from '@components/emergency/index'
import MapManager from '../components/helpers/MapManager'
import Message from '@components/message/index'
@@ -58,8 +58,8 @@
    SummarySheet,
    // PublicBounced,
    Emergency,
    Message
    // ReportPopup
    Message,
    ReportPopup
  },
  data () {
    return {