派生自 wuyushui/SewerAndRainNetwork
src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
@@ -1,1079 +1,153 @@ <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" 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" 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" 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> <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="爆管" style="color: #cccccc" name="second"> <Tube></Tube> </el-tab-pane> <el-tab-pane label="流向" name="third"> <Flow></Flow> </el-tab-pane> <el-tab-pane label="横断面" name="fourth"> <CrossSectional></CrossSectional> </el-tab-pane> </el-tabs> </div> </template> <script> import Connectivity from './AnalysisChoose/Connectivity' import Tube from './AnalysisChoose/Tube' import Flow from './AnalysisChoose/Flow' import CrossSectional from './AnalysisChoose/CrossSectional' import eventBus from '../../../../eventBus' import DrawLine from './AnalysisChoose/DrawLine' import mapApi from '../../../../api/mapApi' export default { name: 'SewersAnalysis', components: { Connectivity, Tube, Flow, CrossSectional }, data () { return { // 地图点击类型 first连通性点击 second爆管点击 third流向点击 fourth横断面 activeName: 'first', measure: null, map: window.map, myChart: null, 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: [] tableData: false } }, 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) 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 { 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 { 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 = main.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) }) }, // 点击显示流向 table列表中的数据 => 进行官网流向的显示 的数据处理方法 // getres (res) { // // }, // 清除流向 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) 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, mediumtype: dataPoint[i].pipelines.extraData.mediumtype } this.tableData.push(obj) } }, // 横断面绘制完成后 进行横断面数据分析 进行图表展示 async selectRow (e) { console.log(e) // option 数据处理 const dataSeries = e.data.pointInterval // 3. 使用刚指定的配置项和数据，显示图表 const option = { xAxis: { type: 'category', // data: ['井1', '井2', '井3', '井4', '井5', '井6', '井7'] data: ['井1', '井2', '井3', '井4', '井5', '井6', '井7'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], // data: dataSeries, type: 'line' }] } this.myChartShow = true this.myChart.setOption(option) }, // 横断面清除 jdmClear () { this.hdmParam = null if (this.measure != null) { this.measure.destory() } handleClick () { eventBus.$emit('tabData-change', true) } } } </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/ .el-table .has-gutter tr th { border: none !important; } /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 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 { /*margin: 15px;*/ 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-tabs--border-card { background: none; border: none; box-shadow: none; } /deep/ .el-table__empty-text { line-height: 170px; } /deep/ .el-tabs--border-card > .el-tabs__header { background: none; border-bottom: none; margin: 0; } /deep/ .el-table__body .el-table__row.hover-row td { background: none !important; color: yellow; } /deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active { color: #409EFF; background: none; border: none; } /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 { border: none; } /deep/ .fixed-table { background: rgba(0, 16, 30, 1) !important; } /deep/ .panel-right ::-webkit-scrollbar-thumb { background: none; border: none; } /*scroll右侧占位*/ /deep/ .el-table__fixed-right-patch { display: 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-tab-pane { min-height: 506.19px; } /deep/ .el-card__body { padding: 0; } /*/deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {*/ /* padding-left: 20px;*/ /*}*/ /deep/ .fixed-style { font-size: 12px; display: inline-block; color: #ffffff; margin: 15px; } /*/deep/ .el-tabs--border-card {*/ /* background: none;*/ /* border: none;*/ /* box-shadow: none;*/ /*}*/ /deep/ th.is-leaf { border: none !important; } /*/deep/ .el-tabs--border-card > .el-tabs__header {*/ /* background: none;*/ /* border-bottom: none;*/ /* margin: 0;*/ /*}*/ /deep/ .el-table__fixed-right::before, .el-table__fixed::before { background: none; } /*/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, 0.9) !important; } /*/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>
