From 1929431aba55ed59dc09564fd1ee6c0fa3ec0a9f Mon Sep 17 00:00:00 2001
From: ChenZeping <chenzeping>
Date: 星期四, 06 五月 2021 16:57:11 +0800
Subject: [PATCH] 管线分析横截面
---
src/components/table/SummarySheet.vue | 203 ++++----
src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue | 1125 ++++++++++++++++++++++++++----------------------
2 files changed, 700 insertions(+), 628 deletions(-)
diff --git a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
index f19e7c4..955ca38 100644
--- a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
+++ b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
@@ -1,420 +1,427 @@
<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
- class="tableBox"
- :data="tableDataLinkStart"
- max-height="100"
- @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"
- 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
- 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"
+ <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
+ 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="鎿嶄綔"
+ >
+ <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="鎿嶄綔"
+ >
+ <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">
- 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;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="鎿嶄綔"
+ >
+ <template slot-scope="scope">
+ <el-button @click="linkResultSelect(scope.row)" type="text" size="small">瀹氫綅</el-button>
+ </template>
+ </el-table-column>
- <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"
+ </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="鎿嶄綔"
+ >
+ <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>
- label="鎿嶄綔"
- >
- <template slot-scope="scope">
- <el-button @click="linkResultSelect(scope.row)" type="text" size="small">瀹氫綅</el-button>
- </template>
- </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
+ 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"
+ >
+ <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>
+ <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="鎿嶄綔"
+ >
+ <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
+ 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="鍥捐〃鏌ョ湅"
+ >
+ <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>-->
- <!--</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"
-
- 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
- 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"
-
- 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
- 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"
- 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
- 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"
- 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
- 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"
-
- 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>
+ <!--</transition>-->
+ </div>
</template>
<script>
@@ -472,7 +479,10 @@
lxTableDataResult: [],
// 妯柇闈� 绠＄嚎鏌ヨ缁撴灉 鐨則able琛ㄦ牸鏁版嵁
- tableData: []
+ tableData: [],
+
+ echartsList: []
+
}
},
mounted () {
@@ -786,8 +796,8 @@
console.log('鐐瑰嚮褰卞搷鐨勯榾闂�')
console.log(e)
const point = [e.data[0][0], e.data[0][1]]
- // const marker = main.createFlowMarker(point)
- // marker.addTo(this.map)
+ const marker = this.createFlowMarker(point)
+ marker.addTo(this.map)
window.map.flyTo(point, 16)
},
@@ -841,10 +851,6 @@
this.linkPipeline.push(line)
})
},
- // 鐐瑰嚮鏄剧ず娴佸悜 table鍒楄〃涓殑鏁版嵁 => 杩涜瀹樼綉娴佸悜鐨勬樉绀� 鐨勬暟鎹鐞嗘柟娉�
- // getres (res) {
- //
- // },
// 娓呴櫎娴佸悜
clearLX () {
if (this.flowPipeLine != null) {
@@ -929,10 +935,7 @@
}
// 宸茬粯鍒剁嚎鍥� 杩涜缁樺埗妯柇闈㈡暟鎹垎鏋�
const res = await mapApi.getCrossSection(this.hdmParam)
- console.log(res)
const dataPoint = res.data.point
- console.log(dataPoint)
- // this.tableData = dataPoint.pipelines.extraData
for (let i = 0; i < dataPoint.length; i++) {
const obj = {
pipename: dataPoint[i].pipelines.extraData.pipename,
@@ -940,26 +943,106 @@
}
this.tableData.push(obj)
}
+ this.dealWithData(res)
+ },
+ dealWithData (e) {
+ const dataSeries = e.data.point
+ let tempData
+ const storeData = []
+ const dataList = []
+ 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)
- // option 鏁版嵁澶勭悊 const dataSeries = e.data.pointInterval
+ selectRow (dataList) {
+ // console.log(dataList)
// 3. 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁锛屾樉绀哄浘琛�
const option = {
- xAxis: {
- type: 'category',
- // data: ['浜�1', '浜�2', '浜�3', '浜�4', '浜�5', '浜�6', '浜�7']
- data: ['浜�1', '浜�2', '浜�3', '浜�4', '浜�5', '浜�6', '浜�7']
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ backgroundColor: '#6a7985'
+ }
+ }
},
- yAxis: {
- type: 'value'
+ legend: {
+ // data: ['鐩存帴璁块棶', '鎼滅储寮曟搸']
+ data: dataList
},
- series: [{
- data: [820, 932, 901, 934, 1290, 1330, 1320],
- // data: dataSeries,
- type: 'line'
- }]
+ toolbox: {
+ show: false,
+ feature: {
+ saveAsImage: {}
+ }
+ },
+ grid: {
+ // left: '3%',
+ // right: '4%',
+ // bottom: '3%',
+ // 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)
@@ -967,6 +1050,8 @@
// 妯柇闈㈡竻闄�
jdmClear () {
this.hdmParam = null
+ this.tableData = []
+ this.myChartShow = false
if (this.measure != null) {
this.measure.destory()
}
@@ -976,104 +1061,110 @@
</script>
<style lang="less" scoped>
-/*****婊氬姩鏉�***/
-/deep/ .tableBox {
- .el-table__fixed-right-patch {
- display: none;
- }
-}
+ /*****婊氬姩鏉�***/
+ /deep/ .tableBox {
+ .el-table__fixed-right-patch {
+ display: none;
+ }
+ }
-/deep/ .tableBox::-webkit-scrollbar {
- /*婊氬姩鏉℃暣浣撴牱寮�*/
- width: 10px; /*楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉＄殑灏哄*/
- height: 10px;
-}
+ /deep/ .tableBox::-webkit-scrollbar {
+ /*婊氬姩鏉℃暣浣撴牱寮�*/
+ width: 10px; /*楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉＄殑灏哄*/
+ /*height: 10px;*/
+ }
-/deep/ .tableBox::-webkit-scrollbar-thumb {
- /*婊氬姩鏉￠噷闈㈠皬鏂瑰潡*/
- border-radius: 10px;
- background: #000;
-}
+ /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/ .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;
-}
+ /deep/ .el-table .has-gutter tr th {
+ border: none !important;
+ }
-/deep/ .el-table tbody tr:hover > td {
- background: none !important
-}
+ /deep/ .el-table tbody tr:hover > td {
+ background: none !important
+ }
-/deep/ .el-tabs__header {
- background: none !important;
-}
+ /deep/ .el-tabs__header {
+ background: none !important;
+ }
-/deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
- padding-left: 20px;
-}
+ /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 {
+ 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 {
+ 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.is-active {
+ color: #409EFF;
+ background: none;
+ border: none;
+ }
-/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item {
- 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/ .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 {
+ //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/ .el-card__body {
+ padding: 0;
+ }
-/deep/ .fixed-style {
- font-size: 12px;
- display: inline-block;
- color: #ffffff;
- margin: 15px;
-}
+ /deep/ .fixed-style {
+ font-size: 12px;
+ display: inline-block;
+ color: #ffffff;
+ margin: 15px;
+ }
-/deep/ th.is-leaf {
- border: none !important;
-}
+ /deep/ th.is-leaf {
+ border: none !important;
+ }
-/deep/ .el-table__fixed-right::before, .el-table__fixed::before {
- background: none;
-}
+ /deep/ .el-table__fixed-right::before, .el-table__fixed::before {
+ background: none;
+ }
-/deep/ .fixed-table {
- //background: rgba(0, 16, 30, 0.9) !important;
-}
+ /deep/ .el-table__fixed-right {
+ bottom: 0;
+ padding: 0;
+ margin: 0;
+ }
+
+ /deep/ .fixed-table {
+ background: rgba(0, 16, 30, 0.9) !important;
+ }
</style>
diff --git a/src/components/table/SummarySheet.vue b/src/components/table/SummarySheet.vue
index c23dcd5..741ed40 100644
--- a/src/components/table/SummarySheet.vue
+++ b/src/components/table/SummarySheet.vue
@@ -1,36 +1,36 @@
<template>
- <div class="summary-sheets">
- <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鎶ヨ〃" placement="left">
- <div :class='["iconBtn",subtopic ? "active-button" : ""]' @click="subtopicBtn">
- <i class="el-icon-tickets icon"></i>
- </div>
- </el-tooltip>
- <transition name="animationChange">
- <div class="subtopic" v-if="subtopic">
- <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="缁熻琛�" placement="bottom">
- <div :class='["iconBtn",summaryVisible ? "active-button" : ""]' @click="closeBtn('缁熻琛�')">
- <i class="icon iconfont iconbiaoge2"></i>
- <!--<span class="icon-name">缁熻琛�</span>-->
- </div>
+ <div class="summary-sheets">
+ <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鎶ヨ〃" placement="left">
+ <div :class='["iconBtn",subtopic ? "active-button" : ""]' @click="subtopicBtn">
+ <i class="el-icon-tickets icon"></i>
+ </div>
</el-tooltip>
- <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鎸囨爣" placement="bottom">
- <div :class='["iconBtn",companyVisible ? "active-button" : ""]' @click="showStatisDialog('鎸囨爣')">
- <!-- <img src="@/assets/images/map-pages/icon/map/company.png" alt="" class="icon"> -->
- <i class="el-icon-office-building icon"></i>
- </div>
- </el-tooltip>
- <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="棰勬姤璀�" placement="bottom">
- <div :class='["iconBtn",warnVisible ? "active-button" : ""]' @click="showWarnDialog('棰勬姤璀�')">
- <i class="icon iconfont iconbaojing01"></i>
- <!--<span class="icon-name">棰勬姤璀�</span>-->
- </div>
- </el-tooltip>
- </div>
- </transition>
- <tab-handover v-show="summaryVisible" ref="titleProp"></tab-handover>
- <Warn v-show="companyVisible" ref="titlePropWarn"></Warn>
- <index-statistics v-show="warnVisible" ref="titlePropStatics"></index-statistics>
- </div>
+ <transition name="animationChange">
+ <div class="subtopic" v-if="subtopic">
+ <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="缁熻琛�" placement="bottom">
+ <div :class='["iconBtn",summaryVisible ? "active-button" : ""]' @click="closeBtn('缁熻琛�')">
+ <i class="icon iconfont iconbiaoge2"></i>
+ <!--<span class="icon-name">缁熻琛�</span>-->
+ </div>
+ </el-tooltip>
+ <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鎸囨爣" placement="bottom">
+ <div :class='["iconBtn",companyVisible ? "active-button" : ""]' @click="showStatisDialog('鎸囨爣')">
+ <!-- <img src="@/assets/images/map-pages/icon/map/company.png" alt="" class="icon"> -->
+ <i class="el-icon-office-building icon"></i>
+ </div>
+ </el-tooltip>
+ <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="棰勬姤璀�" placement="bottom">
+ <div :class='["iconBtn",warnVisible ? "active-button" : ""]' @click="showWarnDialog('棰勬姤璀�')">
+ <i class="icon iconfont iconbaojing01"></i>
+ <!--<span class="icon-name">棰勬姤璀�</span>-->
+ </div>
+ </el-tooltip>
+ </div>
+ </transition>
+ <tab-handover v-show="summaryVisible" ref="titleProp"></tab-handover>
+ <Warn v-show="companyVisible" ref="titlePropWarn"></Warn>
+ <index-statistics v-show="warnVisible" ref="titlePropStatics"></index-statistics>
+ </div>
</template>
<script>
@@ -56,26 +56,15 @@
subtopic: false
}
},
- // mounted () {
- // const that = this
- // bus.$on('changeState', function (state) {
- // if (state.num !== 2 && state.type) {
- // that.subtopic = false
- // }
- // })
- // this.$nextTick(() => {
- // this.$refs.summarySheets.$on('closeDialog', () => {
- // that.summaryVisible = false
- // })
- // this.$refs.warnDialog.$on('closeDialog', () => {
- // that.warnVisible = false
- // })
- // this.$refs.indexStatisticsDialog.$on('closeDialog', () => {
- // that.companyVisible = false
- // })
- // })
- // },
methods: {
+ subtopicBtn () {
+ this.subtopic = !this.subtopic
+ const state = {
+ type: this.subtopic,
+ num: 2
+ }
+ bus.$emit('changeState', state)
+ },
closeBtn (item) {
this.$refs.titleProp.refsDatatitle(item)
this.summaryVisible = !this.summaryVisible
@@ -93,74 +82,66 @@
this.warnVisible = !this.warnVisible
this.summaryVisible = false
this.companyVisible = false
- },
- subtopicBtn () {
- this.subtopic = !this.subtopic
- const state = {
- type: this.subtopic,
- num: 2
- }
- bus.$emit('changeState', state)
}
}
}
</script>
<style lang="less">
-.summary-sheets {
- position: absolute;
- display: inline-flex;
- overflow: hidden;
- top: 0.42979rem;
- left: 0.14583rem;
- /*width: 850px;*/
- /*height: 265px;*/
- z-index: 500;
+ .summary-sheets {
+ position: absolute;
+ display: inline-flex;
+ overflow: hidden;
+ top: 0.42979rem;
+ left: 0.14583rem;
+ /*width: 850px;*/
+ /*height: 265px;*/
+ z-index: 500;
- .subtopic {
- display: inline-flex;
+ .subtopic {
+ display: inline-flex;
- .iconBtn {
- margin-left: 0.03rem;
- border-color: #00fff6;
- color: #00fff6;
+ .iconBtn {
+ margin-left: 0.03rem;
+ border-color: #00fff6;
+ color: #00fff6;
+ }
+
+ .iconBtn.active-button {
+ //border-color:#00fff6 !important;
+ //color:#00fff6 !important;
+ }
+ }
+
+ .dialog {
+ //width: 800px;
+ //height: 300px;
+ position: absolute;
+ top: 15%;
+ left: 3rem;
+ }
+
+ .animationChange-enter-active, .animationChange-leave-active {
+ transition: all 0.5s;
+ }
+
+ .animationChange-enter, .animationChange-leave-to {
+ opacity: 0;
+ transform: translateX(-100px);
+ }
+
+ /*color: #fff;*/
+
+ .el-icon-c-scale-to-original {
+ width: 30px;
+ height: 30px;
+ font-size: 30px;
+ }
+
+ .el-dialog.el-dialog--center {
+ left: 0.5rem;
+ top: 0.73979rem;
+ }
+
}
-
- .iconBtn.active-button {
- //border-color:#00fff6 !important;
- //color:#00fff6 !important;
- }
- }
-
- .dialog {
- //width: 800px;
- //height: 300px;
- position: absolute;
- top: 15%;
- left: 3rem;
- }
-
- .animationChange-enter-active, .animationChange-leave-active {
- transition: all 0.5s;
- }
-
- .animationChange-enter, .animationChange-leave-to {
- opacity: 0;
- transform: translateX(-100px);
- }
-
- /*color: #fff;*/
-
- .el-icon-c-scale-to-original {
- width: 30px;
- height: 30px;
- font-size: 30px;
- }
-
- .el-dialog.el-dialog--center {
- left: 0.5rem;
- top: 0.73979rem;
- }
-
-}
</style>
--
Gitblit v1.8.0