From e955287ac83d12c1545db512d9af7ed5a15db21c Mon Sep 17 00:00:00 2001
From: chenyabin <Chenab123!>
Date: 星期一, 10 五月 2021 15:05:47 +0800
Subject: [PATCH] 管线搜索弹框整体调整
---
src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue | 921 +++++++++++++++++++++++++--------------------------------
1 files changed, 401 insertions(+), 520 deletions(-)
diff --git a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
index 74a5ea2..8f2624c 100644
--- a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
+++ b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
@@ -1,394 +1,151 @@
<template>
- <div class="sewers-analysis-tab">
- <!-- <transition name="el-fade-in-linear">-->
- <!-- <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>
- <!-- <el-scrollbar style="height:450px">-->
- <!-- <el-card shadow="hover">-->
- <span class="fixed-style">璧峰绠℃</span>
- <el-table
- :data="tableDataLinkStart"
- max-height="200"
- @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
- class-name="fixed-table"
- fixed="right"
- label="鎿嶄綔"
- >
- <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
- 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="鎿嶄綔"
- >
- <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;">{{ currentLinkIsTrue }}</span></span>
- <el-table
- highlight-current-row
- max-height="200"
- :data="tableDataLinkResult"
- @row-click="linkResultSelect"
- style="width: 100%" size="mini">
+ <div class="sewers-analysis-tab">
+ <!--<transition name="el-fade-in-linear">-->
+ <!--<el-card>-->
+ <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
+ <el-tab-pane label="杩為�氭��" name="first">
+ <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" height="100" max-height="200" :data="tableDataLinkStart" @row-click="linkSelectStart" 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="鎿嶄綔" 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="鎿嶄綔" width="40">
+ <template slot-scope="scope">
+ <el-button @click="linkResultSelect(scope.row)" type="text" size="small">瀹氫綅</el-button>
+ </template>
+ </el-table-column>
- <el-table-column
- prop="lineloopna"
- label="绠＄嚎绫诲瀷"
- >
- </el-table-column>
- <el-table-column
- sortable
- width="100"
- prop="pipecode"
- label="绠＄嚎鍚嶇О"
- >
- </el-table-column>
- <el-table-column
- sortable
- width="100"
- prop="startpoint"
- label="璧风偣缂栧彿"
- >
- </el-table-column>
- <el-table-column
- sortable
- width="100"
- prop="endpointnu"
- label="缁堢偣缂栧彿"
- >
- </el-table-column>
- <el-table-column
- class-name="fixed-table"
- fixed="right"
- label="鎿嶄綔"
- >
- <template slot-scope="scope">
- <el-button @click="linkResultSelect(scope.row)" type="text" size="small">瀹氫綅</el-button>
- </template>
- </el-table-column>
-
- </el-table>
- <!-- </el-card>-->
- <!-- </el-scrollbar>-->
- </el-tab-pane>
- <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-row>
- <!-- <el-card shadow="hover">-->
- <span class="fixed-style">鍙戠敓鐖嗚鐨勭娈�</span>
- <el-table
- ref="singleTable"
- highlight-current-row
- :data="bgPipeLine"
- style="width: 100%" size="mini">
- <el-table-column
- prop="pipecode"
- label="绠＄嚎绫诲瀷"
- >
- </el-table-column>
- <el-table-column
- sortable
- width="100"
- prop="pipecode"
- label="绠＄嚎鍚嶇О"
- >
- </el-table-column>
- <el-table-column
- sortable
- width="100"
- prop="pipecode"
- label="璧风偣缂栧彿"
- >
- </el-table-column>
- <el-table-column
- sortable
- width="100"
- prop="pipecode"
- label="缁堢偣缂栧彿"
- >
- </el-table-column>
- <el-table-column
- class-name="fixed-table"
- fixed="right"
- label="鎿嶄綔"
- >
- <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
- highlight-current-row
- :data="bgFm"
- @row-click="bgFmClick"
- style="width: 100%" size="mini">
- <el-table-column
- prop="lineloopna"
- label="绠＄嚎绫诲瀷"
- >
- </el-table-column>
- <el-table-column
- sortable
- width="100"
- prop="pipecode"
- label="绠＄嚎鍚嶇О"
- >
- </el-table-column>
- <el-table-column
- sortable
- width="100"
- prop="startpoint"
- label="璧风偣缂栧彿"
- >
- </el-table-column>
- <el-table-column
- sortable
- width="100"
- prop="endpointnu"
- label="缁堢偣缂栧彿"
- >
- </el-table-column>
-
- <el-table-column
- class-name="fixed-table"
- fixed="right"
- label="鎿嶄綔"
- >
- <template slot-scope="scope">
- <el-button @click="linkResultSelect(scope.row)" type="text" size="small">瀹氫綅</el-button>
- </template>
- </el-table-column>
- </el-table>
- <!-- </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
- :data="tableDataLiuxiang" size="mini">
- <el-table-column
- prop="lineloopna"
- label="绠＄嚎绫诲瀷"
- >
- </el-table-column>
- <el-table-column
- sortable
- width="100"
- prop="pipecode"
- label="绠＄嚎鍚嶇О"
- >
- </el-table-column>
- <el-table-column
- sortable
- width="100"
- prop="startpoint"
- label="璧风偣缂栧彿"
- >
- </el-table-column>
- <el-table-column
- sortable
- width="100"
- prop="endpointnu"
- label="缁堢偣缂栧彿"
- >
- </el-table-column>
- <el-table-column
- class-name="fixed-table"
- fixed="right"
- label="鎿嶄綔"
- width="100"
- >
- <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
- highlight-current-row
- max-height="200"
- :data="lxTableDataResult"
- @row-click="lxResultSelect"
- style="width: 100%" size="mini">
-
- <el-table-column
- prop="lineloopna"
- label="绠＄嚎绫诲瀷"
- >
- </el-table-column>
- <el-table-column
- width="100"
- sortable
- prop="pipecode"
- label="绠＄嚎鍚嶇О"
- >
- </el-table-column>
- <el-table-column
- sortable
- width="100"
- prop="startpoint"
- label="璧风偣缂栧彿"
- >
- </el-table-column>
- <el-table-column
- sortable
- width="100"
- prop="endpointnu"
- label="缁堢偣缂栧彿"
- >
- </el-table-column>
- <el-table-column
- class-name="fixed-table"
- fixed="right"
- label="鎿嶄綔"
- >
- <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">-->
- <div slot="header" class="fixed-style">
- <span>绠＄嚎鏌ヨ缁撴灉</span>
- </div>
- <el-table
- :data="tableData"
- style="width: 100%" @row-click="selectRow" size="mini">
- <el-table-column
- prop="name"
- label="绠＄嚎鍚嶇О"
- width="180">
- </el-table-column>
- <el-table-column
- prop="type"
- label="绠＄嚎绫诲瀷"
- width="180">
- </el-table-column>
- <el-table-column
- class-name="fixed-table"
- fixed="right"
- label="鍥捐〃鏌ョ湅"
- >
- <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>
- </el-tab-pane>
- </el-tabs>
- <!-- </el-card>-->
- <!-- </transition>-->
- </div>
+ </el-table>
+ <!--</el-card>-->
+ <!--</el-scrollbar>-->
+ </el-tab-pane>
+ <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-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="鎿嶄綔" 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="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-table-column>
+ </el-table>
+ <!-- </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="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="鎿嶄綔" 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">
+ <div>
+ <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>
+ </div>
+ <!-- <el-card class="box-card">-->
+ <div slot="header" class="fixed-style">
+ <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="绠℃鍚嶇О"></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">
+ <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" -->
+ </el-tab-pane>
+ </el-tabs>
+ <!--</el-card>-->
+ <!--</transition>-->
+ </div>
</template>
<script>
@@ -396,6 +153,7 @@
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',
@@ -407,6 +165,7 @@
map: window.map,
myChart: null,
+ options: [],
myChartShow: false,
flowPipeLine: null,
@@ -445,8 +204,11 @@
// 娴佸悜 鍒嗘瀽缁撴灉 鐨則able琛ㄦ牸鏁版嵁
lxTableDataResult: [],
- // 妯柇闈� 绠＄嚎鏌ヨ缁撴灉 鐨則able琛ㄦ牸鏁版嵁
- tableData: []
+ // 妯柇闈� 绠℃鏌ヨ缁撴灉 鐨則able琛ㄦ牸鏁版嵁
+ tableData: [],
+
+ echartsList: []
+
}
},
mounted () {
@@ -473,17 +235,27 @@
this.tableDataLinkStart = []
this.tableDataLinkEnd = []
this.tableDataLinkResult = []
+ 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)
+ // if () {
+ // // 鍏抽棴寮圭獥
+ // window.layerFactory.clickSwitch = false
+ // } else {
+ // window.layerFactory.clickSwitch = true
+ // }
},
// 鐐瑰嚮鑾峰彇鍒ゆ柇鏁版嵁
async getPipeLine (point) {
@@ -494,6 +266,7 @@
}
// 鏍规嵁鍙傛暟璇锋眰鎺ュ彛鏁版嵁
const res = await mapApi.findPipelineByClickPoint(param)
+ console.log(res)
if (this.activeName === 'first') {
if (this.linkType === 1) {
this.tableDataLinkStart = res.data
@@ -506,8 +279,6 @@
this.tableDataLiuxiang = res.data
} else if (this.activeName === 'fourth') {
}
- // debugger
- console.log(res.data)
},
// 娴佸悜鏄剧ず 鐨勬柟娉曞弬鏁板皝
createFlowLine (param) {
@@ -517,31 +288,24 @@
},
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(e)
+ // console.log('鍦板浘鐐瑰嚮璧峰绠℃')
this.linkType = 1
this.selectPipeLine()
},
// 杩為�氭�� 璧峰绠℃ table鍒楄〃鏁版嵁 閫夋嫨鏁版嵁浜嬩欢 鐨勭偣鍑讳簨浠�
linkSelectStart (e) {
- console.log('閫夋嫨璧峰绠℃')
+ // console.log('閫夋嫨璧峰绠℃')
// this.$refs.singleTable.setCurrentRow(e)
this.currentSelectStart = e
if (this.currentSelectStartLine != null) {
@@ -551,14 +315,17 @@
const geom = JSON.parse(e.geomText)
this.currentSelectStartLine = window.L.geoJSON(geom, {
style: function (feature) {
- return { color: 'rgba(0,255,0,.6)' }
+ return {
+ weight: 10,
+ color: 'rgba(0,255,0,.6)'
+ }
}
}).addTo(window.map)
window.map.panInsideBounds(this.currentSelectStartLine.getBounds())
},
// 杩為�氭�� ===> 鍦板浘鐐瑰嚮缁撴潫绠℃
linkClickEnd () {
- console.log('鍦板浘鐐瑰嚮缁撴潫绠℃')
+ // console.log('鍦板浘鐐瑰嚮缁撴潫绠℃')
this.linkType = 0
this.selectPipeLine()
},
@@ -576,7 +343,10 @@
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(255, 247, 0, 0.6)'
+ }
}
}).addTo(window.map)
window.map.panInsideBounds(this.currentSelectEndLine.getBounds())
@@ -602,14 +372,16 @@
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('娌℃湁鎵惧埌杩為�氱殑绠℃')
+ // if (this.tableDataLinkStart === [] && this.tableDataLinkEnd === []) {
this.currentLinkIsTrue = '涓嶈繛閫�'
+ // }
return
}
this.tableDataLinkResult = res.data
@@ -640,9 +412,8 @@
},
// 杩為�氭�� 鍒嗘瀽缁撴灉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()
@@ -652,11 +423,11 @@
style: function (feature) {
return {
color: 'rgba(255,0,0,.6)',
- weight: 6
+ weight: 10
}
}
- }).addTo(this.map)
- this.map.panInsideBounds(this.currentSelectResultLine.getBounds())
+ }).addTo(window.map)
+ window.map.panInsideBounds(this.currentSelectResultLine.getBounds())
},
// 杩為�氭�х殑娓呴櫎鍔熻兘
linkClear () {
@@ -700,7 +471,10 @@
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())
@@ -710,7 +484,7 @@
lineID: e.pipesegcode
}
const res = await mapApi.findLeakages(param)
- console.log(res)
+ // console.log(res)
const len = res.data.length
if (len === 0) {
@@ -719,7 +493,7 @@
}
res.data.reverse()
this.bgFm = res.data
- console.log(res.data)
+ // console.log(res.data)
this.bgPoint = res.data[0].startControlPoint
@@ -728,7 +502,7 @@
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)
@@ -756,18 +530,19 @@
})
},
bgFmClick (e) {
- console.log('鐐瑰嚮褰卞搷鐨勯榾闂�')
+ // console.log('鐐瑰嚮褰卞搷鐨勯榾闂�')
console.log(e)
- const point = [e.data[0][0], e.data[0][1]]
- // const marker = main.createFlowMarker(point)
- // marker.addTo(this.map)
- window.map.flyTo(point, 16)
+ // 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(window.map)
+ window.map.flyTo(point, 17)
},
// 娴佸悜鍒嗘瀽缁撴灉table鍒楄〃鏁版嵁鐐瑰嚮
lxResultSelect (e) {
- console.log('杩為�氭�у垎鏋愮粨鏋滃垪琛ㄧ偣鍑�')
- console.log(e)
+ // console.log('杩為�氭�у垎鏋愮粨鏋滃垪琛ㄧ偣鍑�')
+ // console.log(e)
const geom = JSON.parse(e.geomText)
if (this.currentSelectResultLine != null) {
@@ -776,7 +551,10 @@
}
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())
@@ -814,10 +592,6 @@
this.linkPipeline.push(line)
})
},
- // 鐐瑰嚮鏄剧ず娴佸悜 table鍒楄〃涓殑鏁版嵁 => 杩涜瀹樼綉娴佸悜鐨勬樉绀� 鐨勬暟鎹鐞嗘柟娉�
- // getres (res) {
- //
- // },
// 娓呴櫎娴佸悜
clearLX () {
if (this.flowPipeLine != null) {
@@ -825,7 +599,7 @@
this.flowPipeLine = null
}
},
- // 娴佸悜-绠＄嚎閫夋嫨
+ // 娴佸悜-绠℃閫夋嫨
selectRowLiuXiang (e) {
// 閫夋嫨瑕佹樉绀虹殑娴佸悜绾�
// console.log('閫夋嫨瑕佹樉绀虹殑娴佸悜绾�')
@@ -902,31 +676,128 @@
}
// 宸茬粯鍒剁嚎鍥� 杩涜缁樺埗妯柇闈㈡暟鎹垎鏋�
const res = await mapApi.getCrossSection(this.hdmParam)
- console.log(res)
+ const dataPoint = res.data.point
+ for (let i = 0; i < dataPoint.length; i++) {
+ const obj = {
+ pipename: dataPoint[i].pipelines.extraData.pipename,
+ mediumtype: dataPoint[i].pipelines.extraData.mediumtype
+ }
+ 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)
},
// 妯柇闈㈢粯鍒跺畬鎴愬悗 杩涜妯柇闈㈡暟鎹垎鏋� 杩涜鍥捐〃灞曠ず
- async selectRow (e) {
- console.log(e)
+ selectRow (dataList) {
+ // console.log(dataList)
// 3. 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁锛屾樉绀哄浘琛�
- const option = {
- xAxis: {
- type: 'category',
- data: ['浜�1', '浜�2', '浜�3', '浜�4', '浜�5', '浜�6', '浜�7']
+ this.option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ backgroundColor: '#6a7985'
+ }
+ }
},
- yAxis: {
- type: 'value'
+ // legend: {
+ // // data: ['鐩存帴璁块棶', '鎼滅储寮曟搸']
+ // data: dataList
+ // },
+ toolbox: {
+ show: false,
+ feature: {
+ saveAsImage: {}
+ }
},
- series: [{
- data: [820, 932, 901, 934, 1290, 1330, 1320],
- type: 'line'
- }]
+ 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.setOption(option)
+ 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()
}
@@ -936,90 +807,100 @@
</script>
<style lang="less" scoped>
-///deep/ .el-table__row:hover > td {
-// background: none !important;
-//}
-//
-///deep/ .el-table__row--striped:hover > td {
-// background: none !important;
-//}
+ /deep/ .el-tabs .el-tabs__item{
+ height: 20px;
+ line-height: 20px;
+ }
+ /deep/ .el-tabs--border-card>.el-tabs__content{
+ padding: 5px;
+ }
+ /deep/ .el-table .has-gutter tr th {
+ border: none !important;
+ }
-///deep/ .el-table__row.hover-row {
-// background: rgba(0, 16, 30, 0.9) !important
-//}
+ /deep/ .el-table tbody tr:hover > td {
+ background: none !important
+ }
-/deep/ .el-table .has-gutter tr th {
- border: none !important;
-}
+ /deep/ .el-tabs__header {
+ background: none !important;
+ }
-/deep/ .el-table tbody tr:hover > td {
- background: none !important
-}
+ /deep/ .fixed-style {
+ font-size: 12px;
+ display: inline-block;
+ color: #00fff6;
+ }
-/deep/ .el-tabs__header {
- background: none !important;
-}
+ /deep/ th.is-leaf {
+ border: none !important;
+ }
-/deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
- padding-left: 20px;
-}
+ /deep/ .el-table__fixed-right::before, .el-table__fixed::before {
+ background: none;
+ }
+ /deep/ .el-table__empty-text{
+ line-height: 170px;
+ }
-/deep/ .el-tabs--border-card {
- background: none;
- border: none;
- box-shadow: none;
-}
+ /deep/ .el-table__body .el-table__row.hover-row td {
+ background: none !important;
+ }
-/deep/ .el-tabs--border-card > .el-tabs__header {
- background: none;
- border-bottom: none;
- margin: 0;
-}
+ /deep/ .el-table__body tr.current-row > td {
+ background: rgba(0, 16, 30, 1) !important;
+ }
-/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
- color: #409EFF;
- background: none;
- border: none;
-}
+ /deep/ .fixed-table {
+ background: rgba(0, 16, 30, 1) !important;
+ }
-/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item {
- border: none;
-}
+ /*scroll鍙充晶鍗犱綅*/
+ /deep/ .el-table__fixed-right-patch {
+ display: none;
+ }
-/deep/ .panel-right ::-webkit-scrollbar-thumb {
- background: none;
- border: none;
-}
+ /deep/ .el-tab-pane{
+ min-height: 506.19px;
+ }
-/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-tabs--top .el-tabs__item.is-top:nth-child(2) {*/
+ /* padding-left: 20px;*/
+ /*}*/
-/deep/ .el-card__body {
- padding: 0;
-}
+ /*/deep/ .el-tabs--border-card {*/
+ /* background: none;*/
+ /* border: none;*/
+ /* box-shadow: none;*/
+ /*}*/
-/deep/ .fixed-style {
- font-size: 12px;
- display: inline-block;
- color: #ffffff;
- margin: 15px;
-}
+ /*/deep/ .el-tabs--border-card > .el-tabs__header {*/
+ /* background: none;*/
+ /* border-bottom: none;*/
+ /* margin: 0;*/
+ /*}*/
-/deep/ th.is-leaf {
- border: none !important;
-}
+ /*/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {*/
+ /* color: #409EFF;*/
+ /* background: none;*/
+ /* border: none;*/
+ /*}*/
-/deep/ .el-table__fixed-right::before, .el-table__fixed::before {
- background: none;
-}
+ /*/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item {*/
+ /* border: none;*/
+ /*}*/
-/deep/ .fixed-table {
- //background: rgba(0, 16, 30, 0.9) !important;
-}
+ /*/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>
--
Gitblit v1.8.0