派生自 wuyushui/SewerAndRainNetwork
src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
@@ -1,48 +1,1181 @@ <template> <div class="sewers-analysis-tab"> <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick"> <el-tab-pane label="连通性" name="first"> <Connectivity></Connectivity> </el-tab-pane> <el-tab-pane label="爆管" name="second"> <Tube></Tube> </el-tab-pane> <el-tab-pane label="流向" name="third"> <Flow></Flow> </el-tab-pane> <el-tab-pane label="横断面" name="four"> <CrossSectional></CrossSectional> </el-tab-pane> </el-tabs> </div> <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"> <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> <!--</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> <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-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>--> <!--</transition>--> </div> </template> <script> import Connectivity from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity' import Tube from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube' import Flow from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/Flow' import CrossSectional from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional' import eventBus from '../../../../eventBus' import DrawLine from './AnalysisChoose/DrawLine' import mapApi from '../../../../api/mapApi' export default { name: 'SewersFirstTab', components: { Connectivity, Tube, Flow, CrossSectional }, name: 'SewersAnalysis', data () { return { activeName: 'first' // 地图点击类型 first连通性点击 second爆管点击 third流向点击 fourth横断面 activeName: 'first', measure: null, map: window.map, myChart: null, options: [], myChartShow: false, flowPipeLine: null, // 用于判断 currentSelectStart: null, currentSelectEnd: null, currentSelectStartLine: null, currentSelectEndLine: null, currentSelectResultLine: null, currentResultLine: null, linkPipeline: [], bgPoint: null, bgMarker: null, hdmParam: null, // 连通性 // 1 连通性起始管段 0 连通性结束管段 用来判断是点击了起始 还是结束管段 linkType: 1, // 连通性 起始管段 表格数据 tableDataLinkStart: [], // 连通性 结束管段 表格数据 tableDataLinkEnd: [], // 连通性 分析结果 展示 => 连通 || 不连通 currentLinkIsTrue: '', // 连通性 分析结果 表格数据 tableDataLinkResult: [], // 爆管 发生爆裂的管段 table表格数据 bgPipeLine: [], // 爆管 需要关闭的阀门 table表格数据 bgFm: [], // 流向 选择的管段 的table表格数据 tableDataLiuxiang: [], // 流向 分析结果 的table表格数据 lxTableDataResult: [], // 横断面 管线查询结果 的table表格数据 tableData: [], echartsList: [] } }, mounted () { // 初始化echarts图表 this.myChart = this.$echarts.init(this.$refs.myChart) // 使用 DrwLine方法 eventBus.$on('draw-hdm-line', (points) => { this.getHdmPoint(points) }) }, methods: { // tab切换 handleClick (tab, event) { console.log(tab, event) // console.log(tab, event) this.clearLinkPipe() this.clearLX() this.linkClear() this.jdmClear() this.currentLinkIsTrue = '' this.bgFm = [] this.bgPipeLine = [] this.tableData = [] this.tableDataLiuxiang = [] this.tableDataLinkStart = [] this.tableDataLinkEnd = [] this.tableDataLinkResult = [] this.lxTableDataResult = [] }, // 流向地图上点击 selectPipeLine () { window.map.on('click', this.selectClick) }, // 地图上点击回调 selectClick (e) { window.map.off('click', this.selectClick) const point = [e.latlng.lng, e.latlng.lat] this.getPipeLine(point) }, // 点击获取判断数据 async getPipeLine (point) { const param = { x: point[0], y: point[1], radius: 5 } // 根据参数请求接口数据 const res = await mapApi.findPipelineByClickPoint(param) if (this.activeName === 'first') { if (this.linkType === 1) { this.tableDataLinkStart = res.data } else { this.tableDataLinkEnd = res.data } } else if (this.activeName === 'second') { this.bgPipeLine = res.data } else if (this.activeName === 'third') { this.tableDataLiuxiang = res.data } else if (this.activeName === 'fourth') { } // debugger console.log(res.data) }, // 流向显示 的方法参数封 createFlowLine (param) { const flowLine = window.L.polyline(param.points, param.option) flowLine.addTo(window.map) return flowLine }, createFlowMarker (point) { return window.L.marker(point, { icon: window.L.divIcon({ className: 'dIcon', html: '<div class="plane live">' + // '<img src="'+require("../../assets/images/map/ship.png")+ '<div style="position: absolute;' + ' width: 20px;' + ' height: 20px;' + ' border-radius: 50%;' + ' content: \'\'; background-color: #FF664A;"/>' + '<span></span><span></span></div></>', iconSize: [90, 36] }) }) }, // 连通性 ===> 地图点击起始管段e linkClickStart (e) { console.log(e) console.log('地图点击起始管段') this.linkType = 1 this.selectPipeLine() }, // 连通性 起始管段 table列表数据 选择数据事件 的点击事件 linkSelectStart (e) { console.log('选择起始管段') // this.$refs.singleTable.setCurrentRow(e) this.currentSelectStart = e if (this.currentSelectStartLine != null) { this.currentSelectStartLine.remove() this.currentSelectStartLine = null } const geom = JSON.parse(e.geomText) this.currentSelectStartLine = window.L.geoJSON(geom, { style: function (feature) { return { weight: 10, color: 'rgba(0,255,0,.6)' } } }).addTo(window.map) window.map.panInsideBounds(this.currentSelectStartLine.getBounds()) }, // 连通性 ===> 地图点击结束管段 linkClickEnd () { console.log('地图点击结束管段') this.linkType = 0 this.selectPipeLine() }, // 连通性 结束管段 table列表数据 选择数据事件 的点击事件 linkSelectEnd (e) { console.log('选择结束管段') this.currentSelectEnd = e // 做判断remove if (this.currentSelectEndLine != null) { this.currentSelectEndLine.remove() this.currentSelectEndLine = null } // geoGson const geom = JSON.parse(e.geomText) this.currentSelectEndLine = window.L.geoJSON(geom, { style: function (feature) { return { weight: 10, color: 'rgba(200,0,200,.6)' } } }).addTo(window.map) window.map.panInsideBounds(this.currentSelectEndLine.getBounds()) }, // 连通性查询 async linkQuery () { // 每次查询分析结果为空 this.tableDataLinkResult = [] if (this.linkPipeline.length > 1) { this.linkPipeline.forEach((itm) => { itm.remove() }) this.linkPipeline = [] } // 判断 如果起始管段 结束管段没有数据 则返回false 提示还未选择起始/结束管段 if (this.currentSelectStart === null || this.currentSelectEnd === null) { this.$message('请选择起始管段和结束管段') return false } // 请求数据时的参数 const param = { startLineID: this.currentSelectStart.pipesegcode, endLineID: this.currentSelectEnd.pipesegcode } console.log(param) // 请求接口和数据 const res = await mapApi.findConnectedPipelines(param) console.log(res) // 判断数据结果 === 0 则没有请求到数据 if (res.data.length === 0) { this.$message('没有找到连通的管段') this.currentLinkIsTrue = '不连通' return } this.tableDataLinkResult = res.data this.currentLinkIsTrue = '连通' // table 数组数据置空 const linkPipe = [] // 数据遍历geoJson res.data.forEach((itm, idx) => { const geom = JSON.parse(itm.geomText) const points = [] geom.coordinates.forEach((it, id) => { points.push(it.reverse()) }) linkPipe.push(points) }) linkPipe.forEach((itm, idx) => { const param1 = { points: itm, option: { dashArray: '15 15', dashSpeed: -30, color: '#ffff00' } } const line = this.createFlowLine(param1) this.linkPipeline.push(line) }) }, // 连通性 分析结果table列表数据选择点击事件 linkResultSelect (e) { console.log('连通性分析结果列表点击') console.log(e) const geom = JSON.parse(e.geomText) if (this.currentSelectResultLine != null) { this.currentSelectResultLine.remove() this.currentSelectResultLine = null } this.currentSelectResultLine = window.L.geoJSON(geom, { style: function (feature) { return { color: 'rgba(255,0,0,.6)', weight: 6 } } }).addTo(window.map) window.map.panInsideBounds(this.currentSelectResultLine.getBounds()) }, // 连通性的清除功能 linkClear () { if (this.currentSelectStartLine != null) { this.currentSelectStartLine.remove() this.currentSelectStartLine = null } if (this.currentSelectEndLine != null) { this.currentSelectEndLine.remove() this.currentSelectEndLine = null } if (this.currentSelectResultLine != null) { this.currentSelectResultLine.remove() this.currentSelectResultLine = null } if (this.bgMarker != null) { this.bgMarker.remove() this.bgMarker = null } }, // 爆管 ===> 选择管段 bgClick () { this.selectPipeLine() }, async bgSelect (e) { console.log('选择爆管管段') console.log(e) this.bgFm = [] if (this.bgMarker != null) { this.bgMarker.remove() this.bgMarker = null } if (this.currentSelectEndLine != null) { this.currentSelectEndLine.remove() this.currentSelectEndLine = null } this.clearLinkPipe() // 给选择中的数据添加设置样式 const geom = JSON.parse(e.geomText) this.currentSelectEndLine = window.L.geoJSON(geom, { style: function (feature) { return { color: 'rgba(200,0,200,.6)' } } }).addTo(window.map) window.map.panInsideBounds(this.currentSelectEndLine.getBounds()) // 数据请求参数 const param = { lineID: e.pipesegcode } const res = await mapApi.findLeakages(param) console.log(res) const len = res.data.length if (len === 0) { this.$message('未找到需要关闭的阀门') return } res.data.reverse() this.bgFm = res.data console.log(res.data) this.bgPoint = res.data[0].startControlPoint const point = JSON.parse(this.bgPoint.geomText) const p = [point.coordinates[1], point.coordinates[0]] this.bgMarker = this.createFlowMarker(p) this.bgMarker.bindTooltip(this.bgPoint.pointnumbe) this.bgMarker.addTo(window.map) window.map.flyTo(p) const linkPipe = [] res.data.forEach((itm, idx) => { const geom = JSON.parse(itm.geomText) const points = [] geom.coordinates.forEach((it, id) => { points.push(it.reverse()) }) linkPipe.push(points) }) linkPipe.forEach((itm, idx) => { const param1 = { points: itm, option: { dashArray: '15 15', dashSpeed: -30, color: '#ffff00' } } const line = this.createFlowLine(param1) this.linkPipeline.push(line) }) }, bgFmClick (e) { console.log('点击影响的阀门') console.log(e) const point = [e.data[0][0], e.data[0][1]] const marker = this.createFlowMarker(point) marker.addTo(this.map) window.map.flyTo(point, 16) }, // 流向分析结果table列表数据点击 lxResultSelect (e) { // console.log('连通性分析结果列表点击') // console.log(e) const geom = JSON.parse(e.geomText) if (this.currentSelectResultLine != null) { this.currentSelectResultLine.remove() this.currentSelectResultLine = null } this.currentSelectResultLine = window.L.geoJSON(geom, { style: function (feature) { return { color: 'rgba(0,250,255,.6)' } } }).addTo(window.map) window.map.panInsideBounds(this.currentSelectResultLine.getBounds()) }, // 点击显示流向 table列表中的数据 => 进行官网流向的显示 async lxQuery (e) { console.log(e) this.clearLinkPipe() const param = { // lineNodeID: e.startpoint lineNodeID: e.startpointnumber } const res = await mapApi.findFlowDirection(param) this.lxTableDataResult = res.data const linkPipe = [] res.data.forEach((itm, idx) => { const geom = JSON.parse(itm.geomText) const points = [] geom.coordinates.forEach((it, id) => { points.push(it.reverse()) }) linkPipe.push(points) }) linkPipe.forEach((itm, idx) => { const param1 = { points: itm, option: { dashArray: '15 15', dashSpeed: -30, color: '#ffff00' } } const line = this.createFlowLine(param1) this.linkPipeline.push(line) }) }, // 清除流向 clearLX () { if (this.flowPipeLine != null) { this.flowPipeLine.remove() this.flowPipeLine = null } }, // 流向-管线选择 selectRowLiuXiang (e) { // 选择要显示的流向线 // console.log('选择要显示的流向线') // console.log(e) }, lxHandleClick (e) { // console.log('正流向显示') // console.log(e) // // // 清除流向方法 // this.clearLX() // const param = { // points: e.data, // option: { // dashArray: '15 15', // dashSpeed: -30 // } // } // this.flowPipeLine = this.createFlowLine(param) }, // 清楚分析结果 clearLinkPipe () { if (this.linkPipeline.length > 0) { this.linkPipeline.forEach((itm, idx) => { itm.remove() }) } this.linkPipeline = [] }, // 逆流向显示 lxHandleClick2 (e) { // console.log('逆流向显示') // console.log(e) // if (this.flowPipeLine != null) { // this.flowPipeLine.remove() // this.flowPipeLine = null // } // const param = { // points: e.data, // option: { // dashArray: '15 15', // dashSpeed: 30 // } // } // this.flowPipeLine = this.createFlowLine(param) }, // 横断面绘制线段 drawLine () { // console.log('drawLine') if (this.measure === null) { this.measure = new DrawLine(window.map) } this.measure.destory() this.measure.init() }, // 横断面数据请求 async getHdmPoint (line) { // console.log('横断面的绘制线') // console.table(line) // 横断面数据 this.hdmParam = { x1: line[0].lng, y1: line[0].lat, x2: line[1].lng, y2: line[1].lat } }, // 横断面数据请求 async jdmQuery () { if (this.hdmParam == null) { this.$message('请先在地图上绘制截断线') return false } // 已绘制线图 进行绘制横断面数据分析 const res = await mapApi.getCrossSection(this.hdmParam) 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) }, // 横断面绘制完成后 进行横断面数据分析 进行图表展示 selectRow (dataList) { // console.log(dataList) // 3. 使用刚指定的配置项和数据，显示图表 this.option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, // legend: { // // data: ['直接访问', '搜索引擎'] // data: dataList // }, toolbox: { show: false, feature: { saveAsImage: {} } }, grid: { // left: '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.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() } } } } </script> <style lang="less" scoped> /*****滚动条***/ /deep/ .tableBox { .el-table__fixed-right-patch { display: none; } } /deep/ .tableBox::-webkit-scrollbar { /*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ /*height: 10px;*/ } /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; } /deep/ .el-table tbody tr:hover > td { 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--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; } /deep/ th.is-leaf { border: none !important; } /deep/ .el-table__fixed-right::before, .el-table__fixed::before { background: none; } /deep/ .el-table__fixed-right { bottom: 0; padding: 0; margin: 0; } /deep/ .fixed-table { background: rgba(0, 16, 30, 0.9) !important; } </style>
