| | |
| | | <!--<el-card>--> |
| | | <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick"> |
| | | <el-tab-pane label="连通性" name="first"> |
| | | <el-button type="primary" @click="linkClickStart" size="mini" style="margin-bottom: 5px;" |
| | | title="地图上点击选择需要进行连通分析的管段">起始管段 |
| | | </el-button> |
| | | <el-button type="primary" @click="linkClickEnd" size="mini" style="margin-bottom: 5px;" |
| | | title="地图上点击与所选管段连通管段">结束管段 |
| | | </el-button> |
| | | <el-button type="primary" @click="linkQuery" size="mini" style="margin-bottom: 5px;" |
| | | title="根据起始、结束管段进行连通性分析">连通性分析 |
| | | </el-button> |
| | | <el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;" |
| | | title="根据起始、结束管段进行连通性分析">清除 |
| | | </el-button> |
| | | <div> |
| | | <el-button type="primary" @click="linkClickStart" size="mini" title="地图上点击选择需要进行连通分析的管段">起始管段</el-button> |
| | | <el-button type="primary" @click="linkClickEnd" size="mini" title="地图上点击与所选管段连通管段">结束管段</el-button> |
| | | <el-button type="primary" @click="linkQuery" size="mini" title="根据起始、结束管段进行连通性分析">连通性分析</el-button> |
| | | <el-button type="primary" @click="handleClick" size="mini" title="根据起始、结束管段进行连通性分析">清除</el-button> |
| | | </div> |
| | | <!-- <el-scrollbar style="height:450px">--> |
| | | <!-- <el-card shadow="hover">--> |
| | | <span class="fixed-style">起始管段</span> |
| | | <el-table |
| | | class="tableBox" |
| | | max-height="200" |
| | | highlight-current-row |
| | | :data="tableDataLinkStart" |
| | | @row-click="linkSelectStart" |
| | | style="width: 100%" size="mini"> |
| | | <el-table-column |
| | | prop="datasource" |
| | | label="管线类型" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | sortable |
| | | width="100" |
| | | prop="pipecode" |
| | | label="管线名称" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | sortable |
| | | width="100" |
| | | prop="material" |
| | | label="起点编号" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | sortable |
| | | width="100" |
| | | prop="material" |
| | | label="终点编号" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | fixed="right" |
| | | class-name="fixed-table" |
| | | label="操作" |
| | | > |
| | | <el-table class="tableBox" height="100" max-height="200" :data="tableDataLinkStart" highlight-current-row style="width: 100%" size="mini"> |
| | | <el-table-column prop="datasource" label="管段类型"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="管段名称"></el-table-column> |
| | | <el-table-column sortable width="100" prop="material" label="起点编号"></el-table-column> |
| | | <el-table-column sortable width="100" prop="material" label="终点编号"></el-table-column> |
| | | <el-table-column fixed="right" class-name="fixed-table" label="操作" width="40"> |
| | | <template slot-scope="scope"> |
| | | <el-button @click="linkSelectStart(scope.row)" type="text" size="small">选择</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <span class="fixed-style">结束管段</span> |
| | | <el-table |
| | | class="tableBox" |
| | | height="100" |
| | | max-height="200" |
| | | highlight-current-row |
| | | :data="tableDataLinkEnd" |
| | | @row-click="linkSelectEnd" |
| | | style="width: 100%" size="mini"> |
| | | <el-table-column |
| | | prop="datasource" |
| | | label="管线类型" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | sortable |
| | | width="100" |
| | | prop="pipecode" |
| | | label="管线名称" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | sortable |
| | | width="100" |
| | | prop="material" |
| | | label="起点编号" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | sortable |
| | | width="100" |
| | | prop="material" |
| | | label="终点编号" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | class-name="fixed-table" |
| | | fixed="right" |
| | | label="操作" |
| | | > |
| | | <el-table class="tableBox" height="100" max-height="200" highlight-current-row :data="tableDataLinkEnd" @row-click="linkSelectEnd" style="width: 100%" size="mini"> |
| | | <el-table-column prop="datasource" label="管段类型"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="管段名称"></el-table-column> |
| | | <el-table-column sortable width="100" prop="material" label="起点编号"></el-table-column> |
| | | <el-table-column sortable width="100" prop="material" label="终点编号"></el-table-column> |
| | | <el-table-column class-name="fixed-table" fixed="right" label="操作" width="40"> |
| | | <template slot-scope="scope"> |
| | | <el-button @click="linkSelectEnd(scope.row)" type="text" size="small">选择</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <span class="fixed-style">分析结果:<span style="color: red;margin-left: 15px">{{ currentLinkIsTrue }}</span></span> |
| | | <el-table |
| | | class="tableBox" |
| | | highlight-current-row |
| | | max-height="200" |
| | | :data="tableDataLinkResult" |
| | | @row-click="linkResultSelect" |
| | | style="width: 100%" size="mini"> |
| | | |
| | | <el-table-column |
| | | prop="material" |
| | | label="管线类型" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | sortable |
| | | width="100" |
| | | prop="pipecode" |
| | | label="管线名称" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | sortable |
| | | width="100" |
| | | prop="material" |
| | | label="起点编号" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | sortable |
| | | width="100" |
| | | prop="material" |
| | | label="终点编号" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | class-name="fixed-table" |
| | | fixed="right" |
| | | label="操作" |
| | | > |
| | | <el-table class="tableBox" highlight-current-row max-height="200" :data="tableDataLinkResult" @row-click="linkResultSelect" style="width: 100%" size="mini"> |
| | | <el-table-column prop="material" label="管段类型"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="管段名称"></el-table-column> |
| | | <el-table-column sortable width="100" prop="material" label="起点编号"></el-table-column> |
| | | <el-table-column sortable width="100" prop="material" label="终点编号"></el-table-column> |
| | | <el-table-column class-name="fixed-table" fixed="right" label="操作" width="40"> |
| | | <template slot-scope="scope"> |
| | | <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button> |
| | | </template> |
| | |
| | | <!--</el-card>--> |
| | | <!--</el-scrollbar>--> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="爆管" style=";color: #cccccc" name="second"> |
| | | <el-tab-pane label="爆管" style="color: #cccccc" name="second"> |
| | | <el-row> |
| | | <span>爆管(相关开关)</span> |
| | | <el-button type="primary" @click="bgClick" size="mini" style="margin-bottom: 5px;" |
| | | title="地图上点击选择发生爆管的管段"> |
| | | 选择管段 |
| | | </el-button> |
| | | <el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;" title="清除绘制"> |
| | | 清除 |
| | | </el-button> |
| | | <el-button type="primary" @click="bgClick" size="mini" title="地图上点击选择发生爆管的管段">选择管段</el-button> |
| | | <el-button type="primary" @click="handleClick" size="mini" title="清除绘制">清除</el-button> |
| | | </el-row> |
| | | <!-- <el-card shadow="hover">--> |
| | | <span class="fixed-style">发生爆裂的管段</span> |
| | | <el-table |
| | | max-height="200" |
| | | class="tableBox" |
| | | ref="singleTable" |
| | | highlight-current-row |
| | | :data="bgPipeLine" |
| | | style="width: 100%" size="mini"> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | prop="pipecode" |
| | | label="管线类型" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | sortable |
| | | width="100" |
| | | prop="pipecode" |
| | | label="管线名称" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | sortable |
| | | width="100" |
| | | prop="pipecode" |
| | | label="起点编号" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | sortable |
| | | width="100" |
| | | prop="pipecode" |
| | | label="终点编号" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | class-name="fixed-table" |
| | | fixed="right" |
| | | label="操作" |
| | | > |
| | | <el-table max-height="200" class="tableBox" ref="singleTable" highlight-current-row :data="bgPipeLine" style="width: 100%" size="mini"> |
| | | <el-table-column :show-overflow-tooltip="true" prop="pipecode" label="管段类型"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="管段名称"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="起点编号"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="终点编号"></el-table-column> |
| | | <el-table-column class-name="fixed-table" fixed="right" label="操作" width="40"> |
| | | <template slot-scope="scope"> |
| | | <el-button @click="bgSelect(scope.row)" type="text" size="small">选择</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <span class="fixed-style">需要关闭的阀门</span> |
| | | <el-table |
| | | class="tableBox" |
| | | highlight-current-row |
| | | max-height="200" |
| | | :data="bgFm" |
| | | @row-click="bgFmClick" |
| | | style="width: 100%" size="mini"> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | prop="lineloopna" |
| | | label="管线类型" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | sortable |
| | | :show-overflow-tooltip="true" |
| | | width="100" |
| | | prop="pipecode" |
| | | label="管线名称" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | sortable |
| | | :show-overflow-tooltip="true" |
| | | width="100" |
| | | prop="startpoint" |
| | | label="起点编号" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | sortable |
| | | width="100" |
| | | prop="endpointnu" |
| | | label="终点编号" |
| | | > |
| | | </el-table-column> |
| | | |
| | | <el-table-column |
| | | class-name="fixed-table" |
| | | fixed="right" |
| | | label="操作" |
| | | > |
| | | <el-table class="tableBox" highlight-current-row max-height="200" :data="bgFm" @row-click="bgFmClick" style="width: 100%" size="mini"> |
| | | <el-table-column :show-overflow-tooltip="true" prop="pipecode" label="管段类型"></el-table-column> |
| | | <el-table-column sortable :show-overflow-tooltip="true" width="100" prop="pipecode" label="管段名称"></el-table-column> |
| | | <el-table-column sortable :show-overflow-tooltip="true" width="100" prop="pipecode" label="起点编号"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="终点编号"></el-table-column> |
| | | <el-table-column class-name="fixed-table" fixed="right" label="操作" width="40"> |
| | | <template slot-scope="scope"> |
| | | <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button> |
| | | </template> |
| | |
| | | <!-- </el-card>--> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="流向" name="third"> |
| | | <el-button type="primary" @click="selectPipeLine" size="mini" style="margin-bottom: 5px;" |
| | | title="地图上点击要显示流向的管线"> |
| | | 选择管段 |
| | | </el-button> |
| | | <el-table |
| | | max-height="200" |
| | | class="tableBox" |
| | | :data="tableDataLiuxiang" size="mini"> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | prop="pipecode" |
| | | label="管线类型" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | sortable |
| | | width="100" |
| | | prop="pipecode" |
| | | label="管线名称" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | sortable |
| | | width="100" |
| | | prop="pipecode" |
| | | label="起点编号" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | sortable |
| | | width="100" |
| | | prop="pipecode" |
| | | label="终点编号" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | class-name="fixed-table" |
| | | fixed="right" |
| | | label="操作" |
| | | width="100" |
| | | > |
| | | <el-button type="primary" @click="selectPipeLine" size="mini" highlight-current-row title="地图上点击要显示流向的管段">选择管段</el-button> |
| | | <el-table max-height="200" class="tableBox" highlight-current-row :data="tableDataLiuxiang" size="mini"> |
| | | <el-table-column :show-overflow-tooltip="true" prop="pipecode" label="管段类型"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="管段名称"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="起点编号"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="终点编号"></el-table-column> |
| | | <el-table-column class-name="fixed-table" fixed="right" label="操作" width="60"> |
| | | <template slot-scope="scope"> |
| | | <el-button @click="lxQuery(scope.row)" type="text" size="small">显示流向</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <span class="fixed-style">分析结果</span> |
| | | <el-table |
| | | class="tableBox" |
| | | highlight-current-row |
| | | max-height="200" |
| | | :data="lxTableDataResult" |
| | | @row-click="lxResultSelect" |
| | | style="width: 100%" size="mini"> |
| | | |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | prop="pipecode" |
| | | label="管线类型" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | width="100" |
| | | sortable |
| | | prop="pipecode" |
| | | label="管线名称" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | sortable |
| | | width="100" |
| | | prop="pipecode" |
| | | label="起点编号" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | :show-overflow-tooltip="true" |
| | | sortable |
| | | width="100" |
| | | prop="pipecode" |
| | | label="终点编号" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | class-name="fixed-table" |
| | | fixed="right" |
| | | label="操作" |
| | | > |
| | | <el-table class="tableBox" highlight-current-row max-height="200" :data="lxTableDataResult" @row-click="lxResultSelect" style="width: 100%" size="mini"> |
| | | <el-table-column :show-overflow-tooltip="true" prop="pipecode" label="管段类型"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" width="100" sortable prop="pipecode" label="管段名称"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="起点编号"></el-table-column> |
| | | <el-table-column :show-overflow-tooltip="true" sortable width="100" prop="pipecode" label="终点编号"></el-table-column> |
| | | <el-table-column class-name="fixed-table" fixed="right" label="操作" width="40"> |
| | | <template slot-scope="scope"> |
| | | <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | </el-table> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="横断面" name="fourth"> |
| | | <el-button type="primary" @click="drawLine" size="mini" style="margin-bottom: 5px;" |
| | | title="地图上绘制要进行分析截断面的线"> |
| | | 绘制线段 |
| | | </el-button> |
| | | <el-button type="primary" @click="jdmQuery" size="mini" style="margin-bottom: 5px;" title="截断面分析">截断面分析 |
| | | </el-button> |
| | | <el-button type="primary" @click="jdmClear" size="mini" style="margin-bottom: 5px;" title="清除截断面分析结果">清除 |
| | | </el-button> |
| | | <!-- <el-card class="box-card">--> |
| | | <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> |
| | | <span>管段查询结果</span> |
| | | </div> |
| | | <el-table |
| | | class="tableBox" |
| | | :data="tableData" |
| | | max-height="200" |
| | | style="width: 100%" @row-click="selectRow" size="mini"> |
| | | <el-table-column |
| | | prop="pipename" |
| | | label="管线名称" |
| | | width="180"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="mediumtype" |
| | | label="管线类型" |
| | | width="180"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | class-name="fixed-table" |
| | | fixed="right" |
| | | label="图表查看" |
| | | > |
| | | <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="pipename" label="管段名称"></el-table-column> |
| | | <el-table-column prop="mediumtype" label="管段类型" 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"> |
| | | <!-- </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> |
| | | </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" --> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | <!--</el-card>--> |
| | |
| | | import eventBus from '../../../../eventBus' |
| | | import DrawLine from './AnalysisChoose/DrawLine' |
| | | import mapApi from '../../../../api/mapApi' |
| | | import iconUrl from '../../../../assets/images/other.png' |
| | | |
| | | export default { |
| | | name: 'SewersAnalysis', |
| | |
| | | |
| | | myChart: null, |
| | | options: [], |
| | | echartsList: [], |
| | | myChartShow: false, |
| | | |
| | | flowPipeLine: null, |
| | | |
| | | // 用于判断 |
| | |
| | | // 流向 分析结果 的table表格数据 |
| | | lxTableDataResult: [], |
| | | |
| | | // 横断面 管线查询结果 的table表格数据 |
| | | tableData: [], |
| | | |
| | | echartsList: [] |
| | | // 横断面 管段查询结果 的table表格数据 |
| | | tableData: [] |
| | | |
| | | } |
| | | }, |
| | |
| | | methods: { |
| | | // tab切换 |
| | | handleClick (tab, event) { |
| | | // console.log(tab, event) |
| | | console.log(event) |
| | | // console.log(tab) |
| | | this.clearLinkPipe() |
| | | this.clearLX() |
| | | this.linkClear() |
| | |
| | | this.lxTableDataResult = [] |
| | | }, |
| | | |
| | | // 流向地图上点击 |
| | | // 地图上点击 |
| | | selectPipeLine () { |
| | | window.map.on('click', this.selectClick) |
| | | // // 关闭弹窗 |
| | | window.layerFactory.clickSwitch = false |
| | | }, |
| | | // 地图上点击回调 |
| | | selectClick (e) { |
| | | // console.log(e) |
| | | window.map.off('click', this.selectClick) |
| | | const point = [e.latlng.lng, e.latlng.lat] |
| | | this.getPipeLine(point) |
| | |
| | | const param = { |
| | | x: point[0], |
| | | y: point[1], |
| | | radius: 5 |
| | | radius: 3 |
| | | } |
| | | // 根据参数请求接口数据 |
| | | const res = await mapApi.findPipelineByClickPoint(param) |
| | | console.log(res.pipesegcode) |
| | | if (this.activeName === 'first') { |
| | | if (this.linkType === 1) { |
| | | this.tableDataLinkStart = res.data |
| | |
| | | this.tableDataLiuxiang = res.data |
| | | } else if (this.activeName === 'fourth') { |
| | | } |
| | | // debugger |
| | | console.log(res.data) |
| | | }, |
| | | // 流向显示 的方法参数封 |
| | | createFlowLine (param) { |
| | |
| | | }, |
| | | 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] |
| | | icon: window.L.icon({ |
| | | iconUrl: iconUrl, |
| | | iconSize: [30, 30], |
| | | iconAnchor: [15, 15] |
| | | }) |
| | | }) |
| | | }, |
| | | |
| | | // 连通性 ===> 地图点击起始管段e |
| | | linkClickStart (e) { |
| | | console.log(e) |
| | | console.log('地图点击起始管段') |
| | | // console.log('地图点击起始管段') |
| | | this.linkType = 1 |
| | | this.selectPipeLine() |
| | | }, |
| | | // 连通性 起始管段 table列表数据 选择数据事件 的点击事件 |
| | | linkSelectStart (e) { |
| | | console.log('选择起始管段') |
| | | // console.log(e) |
| | | // console.log('选择起始管段') |
| | | // this.$refs.singleTable.setCurrentRow(e) |
| | | this.currentSelectStart = e |
| | | if (this.currentSelectStartLine != null) { |
| | |
| | | }, |
| | | // 连通性 ===> 地图点击结束管段 |
| | | linkClickEnd () { |
| | | console.log('地图点击结束管段') |
| | | // console.log('地图点击结束管段') |
| | | this.linkType = 0 |
| | | this.selectPipeLine() |
| | | }, |
| | | // 连通性 结束管段 table列表数据 选择数据事件 的点击事件 |
| | | linkSelectEnd (e) { |
| | | console.log('选择结束管段') |
| | | // console.log('选择结束管段') |
| | | this.currentSelectEnd = e |
| | | |
| | | // 做判断remove |
| | |
| | | style: function (feature) { |
| | | return { |
| | | weight: 10, |
| | | color: 'rgba(200,0,200,.6)' |
| | | 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) => { |
| | |
| | | startLineID: this.currentSelectStart.pipesegcode, |
| | | endLineID: this.currentSelectEnd.pipesegcode |
| | | } |
| | | console.log(param) |
| | | // console.log(param) |
| | | // 请求接口和数据 |
| | | const res = await mapApi.findConnectedPipelines(param) |
| | | console.log(res) |
| | | // console.log(res) |
| | | // 判断数据结果 === 0 则没有请求到数据 |
| | | if (res.data.length === 0) { |
| | | this.$message('没有找到连通的管段') |
| | | // 进行判断 |
| | | this.currentLinkIsTrue = '不连通' |
| | | return |
| | | } |
| | |
| | | }, |
| | | // 连通性 分析结果table列表数据选择点击事件 |
| | | linkResultSelect (e) { |
| | | console.log('连通性分析结果列表点击') |
| | | console.log(e) |
| | | |
| | | // console.log('连通性分析结果列表点击') |
| | | // console.log(e) |
| | | const geom = JSON.parse(e.geomText) |
| | | if (this.currentSelectResultLine != null) { |
| | | this.currentSelectResultLine.remove() |
| | |
| | | style: function (feature) { |
| | | return { |
| | | color: 'rgba(255,0,0,.6)', |
| | | weight: 6 |
| | | weight: 10 |
| | | } |
| | | } |
| | | }).addTo(window.map) |
| | |
| | | const geom = JSON.parse(e.geomText) |
| | | this.currentSelectEndLine = window.L.geoJSON(geom, { |
| | | style: function (feature) { |
| | | return { color: 'rgba(200,0,200,.6)' } |
| | | return { |
| | | weight: 10, |
| | | color: 'rgba(200,0,200,.6)' |
| | | } |
| | | } |
| | | }).addTo(window.map) |
| | | window.map.panInsideBounds(this.currentSelectEndLine.getBounds()) |
| | |
| | | lineID: e.pipesegcode |
| | | } |
| | | const res = await mapApi.findLeakages(param) |
| | | console.log(res) |
| | | // console.log(res) |
| | | |
| | | const len = res.data.length |
| | | if (len === 0) { |
| | |
| | | } |
| | | res.data.reverse() |
| | | this.bgFm = res.data |
| | | console.log(res.data) |
| | | // console.log(res.data) |
| | | |
| | | this.bgPoint = res.data[0].startControlPoint |
| | | |
| | |
| | | const p = [point.coordinates[1], point.coordinates[0]] |
| | | |
| | | this.bgMarker = this.createFlowMarker(p) |
| | | this.bgMarker.bindTooltip(this.bgPoint.pointnumbe) |
| | | // this.bgMarker.bindTooltip(this.bgPoint.pointnumbe) |
| | | this.bgMarker.addTo(window.map) |
| | | window.map.flyTo(p) |
| | | |
| | |
| | | }) |
| | | }, |
| | | bgFmClick (e) { |
| | | console.log('点击影响的阀门') |
| | | // console.log('点击影响的阀门') |
| | | console.log(e) |
| | | const point = [e.data[0][0], e.data[0][1]] |
| | | // const point = [e.data[0][0], e.data[0][1]] |
| | | const point = [e.startControlPoint.y, e.startControlPoint.x] |
| | | const marker = this.createFlowMarker(point) |
| | | marker.addTo(this.map) |
| | | window.map.flyTo(point, 16) |
| | | marker.addTo(window.map) |
| | | window.map.flyTo(point, 17) |
| | | }, |
| | | |
| | | // 流向分析结果table列表数据点击 |
| | |
| | | } |
| | | this.currentSelectResultLine = window.L.geoJSON(geom, { |
| | | style: function (feature) { |
| | | return { color: 'rgba(0,250,255,.6)' } |
| | | return { |
| | | weight: 10, |
| | | color: 'rgba(0,250,255,.6)' |
| | | } |
| | | } |
| | | }).addTo(window.map) |
| | | window.map.panInsideBounds(this.currentSelectResultLine.getBounds()) |
| | |
| | | this.flowPipeLine = null |
| | | } |
| | | }, |
| | | // 流向-管线选择 |
| | | // 流向-管段选择 |
| | | selectRowLiuXiang (e) { |
| | | // 选择要显示的流向线 |
| | | // console.log('选择要显示的流向线') |
| | |
| | | }, |
| | | // 横断面数据请求 |
| | | async jdmQuery () { |
| | | this.tableData = [] |
| | | if (this.hdmParam == null) { |
| | | this.$message('请先在地图上绘制截断线') |
| | | return false |
| | |
| | | } |
| | | this.tableData.push(obj) |
| | | } |
| | | // console.log(this.tableData, 'this.tableData') |
| | | this.dealWithData(res) |
| | | }, |
| | | dealWithData (e) { |
| | |
| | | } |
| | | }, |
| | | grid: { |
| | | // left: '3%', |
| | | // right: '4%', |
| | | // bottom: '3%', |
| | | // containLabel: true |
| | | left: '10px', |
| | | right: '0', |
| | | top: '10px', |
| | | bottom: '5px', |
| | | containLabel: true |
| | | }, |
| | | xAxis: [ |
| | | { |
| | |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | /*****滚动条***/ |
| | | /deep/ .tableBox { |
| | | .el-table__fixed-right-patch { |
| | | display: none; |
| | | } |
| | | /deep/ .el-tabs .el-tabs__item{ |
| | | height: 20px; |
| | | line-height: 20px; |
| | | } |
| | | |
| | | /deep/ .tableBox::-webkit-scrollbar { |
| | | /*滚动条整体样式*/ |
| | | width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ |
| | | /*height: 10px;*/ |
| | | /deep/ .el-tabs--border-card>.el-tabs__content{ |
| | | padding: 5px; |
| | | } |
| | | |
| | | /deep/ .tableBox::-webkit-scrollbar-thumb { |
| | | /*滚动条里面小方块*/ |
| | | border-radius: 10px; |
| | | background: #000; |
| | | } |
| | | |
| | | /deep/ .tableBox::-webkit-scrollbar-track { |
| | | /*滚动条里面轨道*/ |
| | | box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); |
| | | background: @background-color; |
| | | border-radius: 10px; |
| | | } |
| | | |
| | | /deep/ .el-table .has-gutter tr th { |
| | | border: none !important; |
| | | } |
| | |
| | | background: none !important; |
| | | } |
| | | |
| | | /deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) { |
| | | padding-left: 20px; |
| | | } |
| | | |
| | | /deep/ .el-tabs--border-card { |
| | | background: none; |
| | | border: none; |
| | | box-shadow: none; |
| | | } |
| | | |
| | | /deep/ .el-tabs--border-card > .el-tabs__header { |
| | | background: none; |
| | | border-bottom: none; |
| | | margin: 0; |
| | | } |
| | | |
| | | /deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active { |
| | | color: #409EFF; |
| | | background: none; |
| | | border: none; |
| | | } |
| | | |
| | | /deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item { |
| | | border: none; |
| | | } |
| | | |
| | | /deep/ .panel-right ::-webkit-scrollbar-thumb { |
| | | background: none; |
| | | border: none; |
| | | } |
| | | |
| | | /deep/ .el-card { |
| | | //width: 95%; |
| | | //margin: 5px auto; |
| | | //border: none; |
| | | //background: rgba(0, 16, 30, 0.5); |
| | | //border: 0.00521rem solid @color; |
| | | //box-shadow: 0 0 0.03rem @color; |
| | | } |
| | | |
| | | /deep/ .el-card__body { |
| | | padding: 0; |
| | | } |
| | | |
| | | /deep/ .fixed-style { |
| | | font-size: 12px; |
| | | display: inline-block; |
| | | color: #ffffff; |
| | | margin: 15px; |
| | | color: #00fff6; |
| | | } |
| | | |
| | | /deep/ th.is-leaf { |
| | |
| | | /deep/ .el-table__fixed-right::before, .el-table__fixed::before { |
| | | background: none; |
| | | } |
| | | /deep/ .el-table__empty-text{ |
| | | line-height: 170px; |
| | | } |
| | | |
| | | /deep/ .el-table__fixed-right { |
| | | bottom: 0; |
| | | padding: 0; |
| | | margin: 0; |
| | | /deep/ .el-table__body .el-table__row.hover-row td { |
| | | background: none !important; |
| | | color:yellow; |
| | | } |
| | | |
| | | /deep/ .el-table__body tr.current-row > td { |
| | | background: rgba(0, 16, 30, 1) !important; |
| | | } |
| | | |
| | | /deep/ .fixed-table { |
| | | background: rgba(0, 16, 30, 0.9) !important; |
| | | background: rgba(0, 16, 30, 1) !important; |
| | | } |
| | | |
| | | /*scroll右侧占位*/ |
| | | /deep/ .el-table__fixed-right-patch { |
| | | display: none; |
| | | } |
| | | |
| | | /deep/ .el-tab-pane{ |
| | | min-height: 506.19px; |
| | | } |
| | | |
| | | /*/deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {*/ |
| | | /* padding-left: 20px;*/ |
| | | /*}*/ |
| | | |
| | | /*/deep/ .el-tabs--border-card {*/ |
| | | /* background: none;*/ |
| | | /* border: none;*/ |
| | | /* box-shadow: none;*/ |
| | | /*}*/ |
| | | |
| | | /*/deep/ .el-tabs--border-card > .el-tabs__header {*/ |
| | | /* background: none;*/ |
| | | /* border-bottom: none;*/ |
| | | /* margin: 0;*/ |
| | | /*}*/ |
| | | |
| | | /*/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {*/ |
| | | /* color: #409EFF;*/ |
| | | /* background: none;*/ |
| | | /* border: none;*/ |
| | | /*}*/ |
| | | |
| | | /*/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item {*/ |
| | | /* border: none;*/ |
| | | /*}*/ |
| | | |
| | | /*/deep/ .panel-right ::-webkit-scrollbar-thumb {*/ |
| | | /* background: none;*/ |
| | | /* border: none;*/ |
| | | /*}*/ |
| | | |
| | | /*/deep/ .el-card__body {*/ |
| | | /* padding: 0;*/ |
| | | /*}*/ |
| | | /*/deep/ .el-table__fixed-right {*/ |
| | | /* bottom: 0;*/ |
| | | /* padding: 0;*/ |
| | | /* margin: 0;*/ |
| | | /*}*/ |
| | | </style> |