Merge remote-tracking branch 'origin/develop' into develop
| | |
| | | .select-down { |
| | | border: none !important; |
| | | background-color: @background-color; |
| | | margin: 0; |
| | | |
| | | //.el-scrollbar{ |
| | | // |
| | |
| | | } |
| | | .el-table td, .el-table th.is-leaf { |
| | | border: none; |
| | | font-size: 0.08rem; |
| | | } |
| | | .el-table .warning-row { |
| | | background: #28304d; |
| | |
| | | } |
| | | |
| | | } |
| | | .panel-title{ |
| | | color: @color-title; |
| | | font-size: 18px; |
| | | padding: 10px; |
| | | text-align: center; |
| | | border-bottom: 1px solid @background-color-split; |
| | | } |
| | |
| | | background-color: @background-color; |
| | | /*background-color: transparent;*/ |
| | | border: .00521rem solid @color; |
| | | padding: .05rem; |
| | | //-webkit-box-shadow: 0 0 0.03125rem 0 @color; |
| | | //box-shadow: 0 0 0.03125rem 0 @color; |
| | | -webkit-box-shadow: 0 0 10px 0 @color; |
| | | box-shadow: 0 0 .03rem @color; |
| | | //border-radius: .03rem; |
| | | padding:6px; |
| | | border-radius: 10px; |
| | | .leaflet-popup-content{margin: 0} |
| | | |
| | | } |
| | | |
| | | .leaflet-popup-tip-container { |
| | |
| | | <template> |
| | | <div id="Tab"> |
| | | <div class="Infomation"> |
| | | <el-tag>氮氧化物 : 29.93 标准 : 100</el-tag> |
| | | <el-tag>二氧化硫 : 17.34 标准 : 50</el-tag> |
| | | <el-tag>烟尘 : 6.93 标准 : 30</el-tag> |
| | | <el-tag>废气流量 : 120343.18</el-tag> |
| | | </div> |
| | | <div class="form-echrts"> |
| | | <div> |
| | | <el-button size="mini" round @click="dialogVisible = true">明细表</el-button> |
| | | <el-dialog :visible.sync="dialogVisible" |
| | | :append-to-body="true" |
| | | width="68%" |
| | | center |
| | | v-dialogDrag |
| | | > |
| | | <div class="el-dialog-div" style="height: 500px"> |
| | | <public-detailed-list v-bind="$attrs"></public-detailed-list> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | <div style="width:750px;height:260px;" id="echarts" ref="main"> |
| | | </div> |
| | | <div id="Tab"> |
| | | <div class="Infomation"> |
| | | <el-tag>氮氧化物 : 29.93 标准 : 100</el-tag> |
| | | <el-tag>二氧化硫 : 17.34 标准 : 50</el-tag> |
| | | <el-tag>烟尘 : 6.93 标准 : 30</el-tag> |
| | | <el-tag>废气流量 : 120343.18</el-tag> |
| | | </div> |
| | | <div class="form-echrts"> |
| | | <div> |
| | | <el-button size="mini" round @click="dialogVisible = true">明细表</el-button> |
| | | <el-dialog :visible.sync="dialogVisible" |
| | | :append-to-body="true" |
| | | :title="this.$attrs.value==='feiqi'?this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName:this.$attrs.getWasteWaterMonitoringDetails[0].OnLineMonEmissPointName" |
| | | width="68%" |
| | | center |
| | | v-dialogDrag |
| | | > |
| | | <div class="el-dialog-div" style="height: 500px"> |
| | | <public-detailed-list v-bind="$attrs"></public-detailed-list> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | | <div style="width:100%;height:1rem;margin-top:-0.1rem;position:absolute;" id="echarts" ref="main"> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList' |
| | | |
| | | export default { |
| | | name: 'ECharts', |
| | | components: { |
| | |
| | | } |
| | | }, |
| | | mounted () { |
| | | this.drawChart() |
| | | const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getWasteWaterMonitoring)) |
| | | console.log(dataWatch) |
| | | for (var i = 0; i < dataWatch.length; i++) { |
| | | this.dataDate.push(dataWatch[i].MonTimeStr.substring(10, 17)) |
| | | } |
| | | console.log(this.dataDate) |
| | | this.$nextTick(() => { |
| | | this.drawChart() |
| | | const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getWasteWaterMonitoring)) |
| | | // console.log(dataWatch) |
| | | for (var i = 0; i < dataWatch.length; i++) { |
| | | this.dataDate.push(dataWatch[i].MonTimeStr.substring(10, 17)) |
| | | } |
| | | // console.log(this.dataDate) |
| | | }) |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped lang="less"> |
| | | .Infomation { |
| | | margin-left: 10px; |
| | | } |
| | | .Infomation { |
| | | margin-left: 10px; |
| | | height: 0.2rem; |
| | | } |
| | | |
| | | .el-tag { |
| | | height: 25px; |
| | | line-height: 25px; |
| | | margin-right: 10px; |
| | | font-size: 10px; |
| | | background-color: rgba(0, 255, 246, 0.14); |
| | | color: #00d0f9; |
| | | border: none; |
| | | padding: 0 15px; |
| | | } |
| | | .form-echrts{ |
| | | width: 100%; |
| | | height: 100%; |
| | | border: 1px solid #396d83; |
| | | //margin: 10px 10px 10px 10px; |
| | | .el-dialog-div{ |
| | | //height: 50vh!important; |
| | | overflow: auto; |
| | | //overflow: hidden; |
| | | } |
| | | #echarts { |
| | | margin: 0; |
| | | padding: 0; |
| | | //border: 1px solid #396d83; |
| | | //margin: 10px 10px 10px 10px; |
| | | } |
| | | .el-tag { |
| | | height: 25px; |
| | | line-height: 25px; |
| | | margin-right: 10px; |
| | | font-size: 10px; |
| | | background-color: rgba(0, 255, 246, 0.14); |
| | | color: #00d0f9; |
| | | border: none; |
| | | padding: 0 15px; |
| | | } |
| | | |
| | | .form-echrts { |
| | | width: 100%; |
| | | height: 1rem; |
| | | border-top: 1px solid #396d83; |
| | | //margin: 10px 10px 10px 10px; |
| | | .el-dialog-div { |
| | | //height: 50vh!important; |
| | | overflow: auto; |
| | | //overflow: hidden; |
| | | } |
| | | |
| | | #echarts { |
| | | margin: 0; |
| | | padding: 0; |
| | | //height: 3rem; |
| | | //border: 1px solid #396d83; |
| | | //margin: 10px 10px 10px 10px; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | <template> |
| | | <div class="win"> |
| | | <div class="border_corner border_corner_left_top"></div> |
| | | <div class="border_corner border_corner_right_top"></div> |
| | | <div class="border_corner border_corner_left_bottom"></div> |
| | | <div class="border_corner border_corner_right_bottom"></div> |
| | | <ul class="tab"> |
| | | <li @click='tabTaggle("ECharts")'>实时数据</li> |
| | | <li @click='tabTaggle("ECharts")'>小时数据</li> |
| | | <li @click='tabTaggle("ECharts")'>日数据</li> |
| | | <li @click='tabTaggle("ECharts")'>人工数据</li> |
| | | </ul> |
| | | <component :is="currentTab" v-bind="$attrs"></component> |
| | | </div> |
| | | <div class="win"> |
| | | <div class="border_corner border_corner_left_top"></div> |
| | | <div class="border_corner border_corner_right_top"></div> |
| | | <div class="border_corner border_corner_left_bottom"></div> |
| | | <div class="border_corner border_corner_right_bottom"></div> |
| | | <ul class="tab"> |
| | | <li @click='tabTaggle("ECharts")'>实时数据</li> |
| | | <li @click='tabTaggle("ECharts")'>小时数据</li> |
| | | <li @click='tabTaggle("ECharts")'>日数据</li> |
| | | <li @click='tabTaggle("ECharts")'>人工数据</li> |
| | | </ul> |
| | | <component :is="currentTab" v-bind="$attrs"></component> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | |
| | | </script> |
| | | |
| | | <style scoped> |
| | | *{ |
| | | margin: 0; |
| | | padding: 0; |
| | | list-style: none; |
| | | } |
| | | .win { |
| | | position: relative; |
| | | margin-bottom: 13px; |
| | | background-color: rgba(33, 41, 69,0.9); |
| | | border: 0.8px solid #396d83; |
| | | } |
| | | .border_corner{ |
| | | z-index: 999; |
| | | position: absolute; |
| | | width: 10px; |
| | | height: 10px; |
| | | background: rgba(0,0,0,0); |
| | | border: 1.5px solid #47d5ea; |
| | | } |
| | | .border_corner_left_top{ |
| | | top: 0; |
| | | left: 0; |
| | | border-right: none; |
| | | border-bottom: none; |
| | | } |
| | | .border_corner_right_top{ |
| | | top: 0; |
| | | right: 0; |
| | | border-left: none; |
| | | border-bottom: none; |
| | | } |
| | | .border_corner_left_bottom{ |
| | | bottom: 0; |
| | | left: 0; |
| | | border-right: none; |
| | | border-top: none; |
| | | } |
| | | .border_corner_right_bottom{ |
| | | bottom: 0; |
| | | right: 0; |
| | | border-left: none; |
| | | border-top: none; |
| | | } |
| | | .tab{ |
| | | display: flex; |
| | | border-bottom: 1px solid #396d83; |
| | | margin-bottom: 10px; |
| | | } |
| | | li{ |
| | | background-color: #243a55; |
| | | margin: 10px 10px 2px 10px; |
| | | /*padding: 5px 10px;*/ |
| | | width: 90px; |
| | | height: 25px; |
| | | line-height: 25px; |
| | | text-align: center; |
| | | border-radius: 5px; |
| | | } |
| | | ul li:hover{ |
| | | background-color: #0e639e; |
| | | color: #682000; |
| | | cursor: pointer; |
| | | } |
| | | * { |
| | | margin: 0; |
| | | padding: 0; |
| | | list-style: none; |
| | | } |
| | | |
| | | .win { |
| | | position: relative; |
| | | margin-bottom: 13px; |
| | | background-color: rgba(33, 41, 69, 0.9); |
| | | border: 0.8px solid #396d83; |
| | | height: 1.5rem; |
| | | } |
| | | |
| | | .border_corner { |
| | | z-index: 999; |
| | | position: absolute; |
| | | width: 10px; |
| | | height: 10px; |
| | | background: rgba(0, 0, 0, 0); |
| | | border: 1.5px solid #47d5ea; |
| | | } |
| | | |
| | | .border_corner_left_top { |
| | | top: 0; |
| | | left: 0; |
| | | border-right: none; |
| | | border-bottom: none; |
| | | } |
| | | |
| | | .border_corner_right_top { |
| | | top: 0; |
| | | right: 0; |
| | | border-left: none; |
| | | border-bottom: none; |
| | | } |
| | | |
| | | .border_corner_left_bottom { |
| | | bottom: 0; |
| | | left: 0; |
| | | border-right: none; |
| | | border-top: none; |
| | | } |
| | | |
| | | .border_corner_right_bottom { |
| | | bottom: 0; |
| | | right: 0; |
| | | border-left: none; |
| | | border-top: none; |
| | | } |
| | | |
| | | .tab { |
| | | display: flex; |
| | | border-bottom: 1px solid #396d83; |
| | | margin-bottom: 10px; |
| | | } |
| | | |
| | | li { |
| | | background-color: #243a55; |
| | | margin: 10px 10px 2px 10px; |
| | | /*padding: 5px 10px;*/ |
| | | width: 90px; |
| | | height: 25px; |
| | | line-height: 25px; |
| | | text-align: center; |
| | | border-radius: 5px; |
| | | } |
| | | |
| | | ul li:hover { |
| | | background-color: #0e639e; |
| | | color: #682000; |
| | | cursor: pointer; |
| | | } |
| | | </style> |
| | |
| | | } |
| | | }, |
| | | mounted () { |
| | | console.log('value') |
| | | if (this.$attrs.getWasteGasDetails) { |
| | | console.log(this.$attrs.value) |
| | | if (this.$attrs.value === 'feiqi') { |
| | | this.tableData = this.$attrs.getWasteGasDetails |
| | | console.log(this.$attrs.getWasteGasDetails) |
| | | } else if (this.$attrs.getWasteWaterMonitoringDetails) { |
| | | // console.log(this.$attrs.getWasteGasDetails) |
| | | } else if (this.$attrs.value === 'feishui') { |
| | | this.tableData = this.$attrs.getWasteWaterMonitoringDetails |
| | | console.log(this.$attrs.getWasteWaterMonitoringDetails) |
| | | // console.log(this.$attrs.getWasteWaterMonitoringDetails) |
| | | } |
| | | } |
| | | } |
| | |
| | | <div class="main"> |
| | | <div class="main-table"> |
| | | <el-table :data="listData" style="width: 100%" stripe='stripe' |
| | | :height="300" |
| | | tooltip-effect="dark" :row-class-name="tableRowClassName"> |
| | | <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop" :label="item.label"></el-table-column> |
| | | <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop" |
| | | :label="item.label"></el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | |
| | | .win { |
| | | position: relative; |
| | | background-color: rgba(33, 41, 69, 0.9); |
| | | //min-height: 354px; |
| | | height: 208px; |
| | | //width: 6rem; |
| | | height: 1.5rem; |
| | | } |
| | | |
| | | .main { |
| | | width: 100%; |
| | | height: 100%; |
| | | |
| | | .main-table { |
| | | width: 100%; |
| | | //min-height: 195px; |
| | | //border: 1px @color solid; |
| | | |
| | | video { |
| | | width: 100%; |
| | | height: 100%; |
| | | outline: none; |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | props: ['displayContentTab', 'value', 'setWasteGasdata', 'setWasteWaterdata'], |
| | | data () { |
| | | return { |
| | | tabData: [], |
| | | listLabel: [ |
| | | { |
| | | label: '序号', |
| | | prop: 'StoragePlaceId' |
| | | }, |
| | | { |
| | | label: '类别', |
| | | prop: 'StoragePlaceTypeName' |
| | | }, |
| | | { |
| | | label: '固废名称', |
| | | prop: 'StoragePlaceName' |
| | | }, |
| | | { |
| | | label: '代码', |
| | | prop: 'StorageZDMJ' |
| | | }, |
| | | { |
| | | label: '产生量(t)', |
| | | prop: 'StorageZCL' |
| | | }, |
| | | { |
| | | label: '贮存量(t)', |
| | | prop: 'StorageZCNL' |
| | | }, |
| | | { |
| | | label: '产生装置', |
| | | prop: 'StorageType' |
| | | } |
| | | ] |
| | | tabData: [] |
| | | } |
| | | }, |
| | | mounted () { |
| | |
| | | position: relative; |
| | | margin-bottom: 10px; |
| | | background-color: rgba(33, 41, 69, 0.9); |
| | | //width: 6rem; |
| | | height: 0.5rem; |
| | | } |
| | | |
| | | .main { |
| | | width: 100%; |
| | | height: 100%; |
| | | //width: 100%; |
| | | //height: 100%; |
| | | |
| | | .main-matter { |
| | | font-size: 13px; |
| | | font-weight: normal; |
| | | //padding: 10px 6px; |
| | | min-height: 70px; |
| | | border: 1px solid #396d83; |
| | | |
| | | .row-item-one { |
| | |
| | | } |
| | | |
| | | ul { |
| | | width: 100%; |
| | | height: 100%; |
| | | //width: 100%; |
| | | //height: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-around; |
| | |
| | | background-color: #243a55; |
| | | color: #00d0f9; |
| | | border-radius: 4px; |
| | | font-size: 0.08rem; |
| | | } |
| | | |
| | | li:last-child { |
| | |
| | | <template> |
| | | <div class="win" > |
| | | <div class="win"> |
| | | <!-- 四个角的边框效果 --> |
| | | <div class="border_corner border_corner_left_top"></div> |
| | | <div class="border_corner border_corner_right_top"></div> |
| | | <div class="border_corner border_corner_left_bottom"></div> |
| | | <div class="border_corner border_corner_right_bottom"></div> |
| | | <div class="main"> |
| | | <!-- <div class="main-video">--> |
| | | <video controls> |
| | | <source src="movie.mp4" type="video/mp4"> |
| | | <source src="movie.ogg" type="video/ogg"> |
| | | </video> |
| | | <!-- </div>--> |
| | | <!-- <div class="main-video">--> |
| | | <video controls> |
| | | <source src="movie.mp4" type="video/mp4"> |
| | | <source src="movie.ogg" type="video/ogg"> |
| | | </video> |
| | | <!-- </div>--> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | <style scoped lang="less"> |
| | | .win { |
| | | position: relative; |
| | | background-color: rgba(33, 41, 69,0.9); |
| | | height: 300px; |
| | | background-color: rgba(33, 41, 69, 0.9); |
| | | height: 2.1rem; |
| | | } |
| | | |
| | | .main { |
| | | border: 1px solid #396d83; |
| | | padding: 6px; |
| | | //.main-video { |
| | | video { |
| | | width: 100%; |
| | | height: 100%; |
| | | outline: none; |
| | | } |
| | | //} |
| | | padding: 5px; |
| | | height: 2rem; |
| | | |
| | | video { |
| | | width: 100%; |
| | | height: 100%; |
| | | outline: none; |
| | | } |
| | | } |
| | | .border_corner{ |
| | | |
| | | .border_corner { |
| | | z-index: 999; |
| | | position: absolute; |
| | | width: 14px; |
| | | height: 14px; |
| | | background: rgba(0,0,0,0); |
| | | background: rgba(0, 0, 0, 0); |
| | | border: 1px solid #47d5ea; |
| | | } |
| | | .border_corner_left_top{ |
| | | |
| | | .border_corner_left_top { |
| | | top: 0; |
| | | left: 0; |
| | | border-right: none; |
| | | border-bottom: none; |
| | | } |
| | | .border_corner_right_top{ |
| | | |
| | | .border_corner_right_top { |
| | | top: 0; |
| | | right: 0; |
| | | border-left: none; |
| | | border-bottom: none; |
| | | } |
| | | .border_corner_left_bottom{ |
| | | |
| | | .border_corner_left_bottom { |
| | | bottom: 0; |
| | | left: 0; |
| | | border-right: none; |
| | | border-top: none; |
| | | } |
| | | .border_corner_right_bottom{ |
| | | |
| | | .border_corner_right_bottom { |
| | | bottom: 0; |
| | | right: 0; |
| | | border-left: none; |
| | |
| | | <public-table v-if="value === 'gufei'" |
| | | :displayContentTable="displayContentTable"></public-table> |
| | | <public-chart v-else :getWasteGasDetails="getWasteGasDetails" |
| | | :getWasteWaterMonitoring="getWasteWaterMonitoring"></public-chart> |
| | | :value="value" |
| | | :getWasteWaterMonitoring="getWasteWaterMonitoring" |
| | | :getWasteWaterMonitoringDetails="getWasteWaterMonitoringDetails |
| | | "></public-chart> |
| | | </div> |
| | | </div> |
| | | <div class="public-bounced-content-right"> |
| | | <public-video></public-video> |
| | | </div> |
| | | </div> |
| | | <!-- <el-dialog--> |
| | | <!-- :visible.sync="flag"--> |
| | | <!-- width="70%"--> |
| | | <!-- v-drag--> |
| | | <!-- :modal="false">--> |
| | | <!-- <div class="public-bounced-title">--> |
| | | <!-- <span>{{ displayContentTitle }}</span>--> |
| | | <!-- <i class="el-icon-circle-close" @click="closePopup"></i>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="public-bounced-content">--> |
| | | <!-- <div class="public-bounced-content-left">--> |
| | | <!-- <public-tabs :displayContentTab="displayContentTab" :value="value"--> |
| | | <!-- :setWasteGasdata="setWasteGasdata" :setWasteWaterdata="setWasteWaterdata"></public-tabs>--> |
| | | <!-- <div class="public-bounced-content-left-bottom">--> |
| | | <!-- <public-table v-if="value === 'gufei'"--> |
| | | <!-- :displayContentTable="displayContentTable"></public-table>--> |
| | | <!-- <public-chart v-else :getWasteGasDetails="getWasteGasDetails"--> |
| | | <!-- :getWasteWaterMonitoring="getWasteWaterMonitoring"></public-chart>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="public-bounced-content-right">--> |
| | | <!-- <public-video></public-video>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </el-dialog>--> |
| | | <!-- <el-dialog--> |
| | | <!-- :visible.sync="flag"--> |
| | | <!-- width="70%"--> |
| | | <!-- v-drag--> |
| | | <!-- :modal="false">--> |
| | | <!-- <div class="public-bounced-title">--> |
| | | <!-- <span>{{ displayContentTitle }}</span>--> |
| | | <!-- <i class="el-icon-circle-close" @click="closePopup"></i>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="public-bounced-content">--> |
| | | <!-- <div class="public-bounced-content-left">--> |
| | | <!-- <public-tabs :displayContentTab="displayContentTab" :value="value"--> |
| | | <!-- :setWasteGasdata="setWasteGasdata" :setWasteWaterdata="setWasteWaterdata"></public-tabs>--> |
| | | <!-- <div class="public-bounced-content-left-bottom">--> |
| | | <!-- <public-table v-if="value === 'gufei'"--> |
| | | <!-- :displayContentTable="displayContentTable"></public-table>--> |
| | | <!-- <public-chart v-else :getWasteGasDetails="getWasteGasDetails"--> |
| | | <!-- :getWasteWaterMonitoring="getWasteWaterMonitoring"></public-chart>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="public-bounced-content-right">--> |
| | | <!-- <public-video></public-video>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </el-dialog>--> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | this.setWasteWaterdata = dataWater |
| | | // console.log(data) |
| | | this.getWasteWaterMonitoring = drawData |
| | | console.log(drawData) |
| | | // console.log(drawData) |
| | | this.getWasteWaterMonitoringDetails = dataDetail |
| | | this.displayContentTitle = dataWater.Name |
| | | this.flag = true |
| | |
| | | |
| | | <style lang="less" scoped> |
| | | .public-bounced { |
| | | width: 75%; |
| | | //height: 520px; |
| | | height: 40%; |
| | | width: 10rem; |
| | | //height: 2.6rem; |
| | | //width: 70vw; |
| | | //height: 30vh; |
| | | z-index: 999; |
| | | position: absolute; |
| | | bottom: 5%; |
| | | left: 15%; |
| | | top: 5%; |
| | | left: 5%; |
| | | background-color: #002432; |
| | | border: 1px #9fc5c8 solid; |
| | | |
| | | .public-bounced-title { |
| | | height: 0.1rem; |
| | | border: 1px #a4c0d8 solid; |
| | | padding: 10px 0; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | padding: 5px 0; |
| | | |
| | | span { |
| | | color: #f4f7ff; |
| | |
| | | } |
| | | |
| | | .public-bounced-content { |
| | | margin: 15px 0; |
| | | margin: 0.2rem auto !important; |
| | | display: flex; |
| | | //align-items: center; |
| | | justify-content: space-around; |
| | | padding: 10px; |
| | | |
| | | .public-bounced-content-left { |
| | | flex: 3; |
| | | height: 100%; |
| | | margin-right: 10px; |
| | | width: 6.8rem; |
| | | } |
| | | |
| | | .public-bounced-content-right { |
| | | flex: 2; |
| | | //width: 48%; |
| | | height: 100%; |
| | | width: 3rem; |
| | | } |
| | | } |
| | | } |
| | |
| | | <template> |
| | | <div :class='["float-panel",layerControllerVisible ? "active" : ""]' > |
| | | |
| | | <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="图层" placement="left"> |
| | | <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="图层控制" placement="left"> |
| | | <div @click="showPanel" class="iconBtn" :class='layerControllerVisible ? "active-button" : ""' v-show="!layerControllerVisible" style=" position: absolute;top:0;left: 0;"> |
| | | <img src="@assets/images/map-pages/icon/layer.png" alt="" class="icon"> |
| | | <!-- <span class="icon-name">图层</span>--> |
| | |
| | | min-height: 0.28rem; |
| | | min-width: 0.28rem; |
| | | overflow: hidden; |
| | | div { |
| | | color: #00fff6; |
| | | } |
| | | |
| | | .iconBtn.active{ |
| | | display: none; |
| | | } |
| | |
| | | background: #0E3565; |
| | | } |
| | | .el-button--default{ |
| | | margin-left: 10px; |
| | | padding: 15px 3px; |
| | | background:@background-color; |
| | | color:@color-tool; |
| | | position: absolute; |
| | | top:0; |
| | | right: -26px; |
| | | left: 100%; |
| | | margin-left: .02rem; |
| | | border-radius: 0.03rem 50% 50% 0.03rem; |
| | | } |
| | | .el-button--default:hover{ |
| | | background:@background-color; |
| | | } |
| | | .legend-content{ |
| | | width: 250px; |
| | | width: 1.79167rem; |
| | | } |
| | | } |
| | | |
| | |
| | | const positionY = data[i].Longitude |
| | | |
| | | var iconUrl = companyImg |
| | | const marker = L.marker.magic([positionX, positionY], { |
| | | const marker = L.marker([positionX, positionY], { |
| | | icon: L.icon({ |
| | | iconUrl: iconUrl, |
| | | iconSize: [50, 50], |
| | | iconAnchor: [25, 25] |
| | | iconSize: [30, 30], |
| | | iconAnchor: [13, 5] |
| | | }), |
| | | test: data[i] |
| | | }) |
| | |
| | | totransferData: getSolidWasteData[i], |
| | | icon: L.icon({ |
| | | iconUrl: iconUrl, |
| | | iconSize: [50, 50], |
| | | iconAnchor: [25, 25] |
| | | iconSize: [20, 20], |
| | | iconAnchor: [10, 10] |
| | | }) |
| | | }) |
| | | layer.addLayer(marker) |
| | |
| | | // 通过方法 向绑定弹框传递数据 |
| | | instance.setData(resultBasic.Result.DataInfo, resultDetailed.Result.DataInfo, 'gufei') |
| | | /* flyTo()弹出框平移事件 */ |
| | | this.setPanTo(e.latlng, 200) |
| | | this.setPanTo(e.latlng, 80) |
| | | } |
| | | |
| | | // flayTo() 弹框的可滑动事件 |
| | |
| | | this.init = async (layer, L) => { |
| | | this.animalService = new AnimalService({ L: L, layer: layer }) |
| | | const res = await mapApi.getWasteGas() |
| | | // console.log(res) |
| | | const data = res.Result.DataInfo || {} |
| | | // console.log(data) |
| | | for (let i = 0; i < data.length; i++) { |
| | |
| | | // 定义类型 用来区分数据 |
| | | const ContrLevel = data[i].ContrLevel |
| | | var iconUrl = this.differentTypes(ContrLevel) |
| | | |
| | | const marker = L.marker.magic([positionX, positionY], { |
| | | // const marker = L.canvasMarker([positionX, positionY], { |
| | | // img: { |
| | | // // url: 'assets/images/map/marker-icon.png', |
| | | // url: iconUrl, |
| | | // size: STYLES.ICON_SIZE |
| | | // } |
| | | const marker = L.marker([positionX, positionY], { |
| | | test: data[i], |
| | | icon: L.icon({ |
| | | iconUrl: iconUrl, |
| | | iconSize: [50, 50], |
| | | iconAnchor: [25, 25] |
| | | iconSize: [20, 20], |
| | | iconAnchor: [10, 10] |
| | | }) |
| | | }) |
| | | layer.addLayer(marker) |
| | |
| | | // console.log(e.layer.options.test) |
| | | instance.$mount() |
| | | document.body.appendChild(instance.$el) |
| | | this.setPanTo(e.latlng, 240) |
| | | this.setPanTo(e.latlng, 80) |
| | | } |
| | | // 不同类型图片加载 |
| | | this.differentTypes = (ContrLevel) => { |
| | |
| | | // 定义类型 用来区分数据的不同 |
| | | const testValue = data[i].ContrLevel |
| | | const iconUrl = this.differentTypes(testValue) |
| | | const marker = L.marker.magic([positionX, positionY], { |
| | | const marker = L.marker([positionX, positionY], { |
| | | test: data[i], |
| | | icon: L.icon({ |
| | | iconUrl: iconUrl, |
| | | iconSize: [50, 50], |
| | | iconAnchor: [25, 25] |
| | | iconSize: [20, 20], |
| | | iconAnchor: [10, 10] |
| | | }) |
| | | }) |
| | | layer.addLayer(marker) |
| | |
| | | // console.log(e.layer.options.test) |
| | | instance.$mount() |
| | | document.body.appendChild(instance.$el) |
| | | this.setPanTo(e.latlng, 240) |
| | | this.setPanTo(e.latlng, 80) |
| | | } |
| | | |
| | | // 根据返回值的不同标记不同图片 |
| | |
| | | <template> |
| | | <div class="inner-panel"> |
| | | <div class="title"> 图层控制 </div> |
| | | <div class="panel-title"> 图层控制 </div> |
| | | <div class="wms-panel"> |
| | | <el-scrollbar class="wms-panel-scrollbar"> |
| | | <div v-for="item in serviceLayers" :key="item.code" class="layerbox"> |
| | | <!-- 一级图层遍历 --> |
| | | <div> |
| | | <div style="padding-left:10px;padding-top:10px"> |
| | | <input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" |
| | | @change="swAllLayers(item)"/>{{ item.name }} |
| | | </div> |
| | |
| | | |
| | | <style scoped lang="less"> |
| | | .inner-panel { |
| | | .title{ |
| | | color: @color-title; |
| | | font-size: 18px; |
| | | margin: 10px; |
| | | text-align: center; |
| | | } |
| | | |
| | | .btn-filter { |
| | | cursor: pointer; |
| | | color: #ffffff; |
| | |
| | | .wms-panel { |
| | | |
| | | .wms-panel-scrollbar{ |
| | | height: 50vh; |
| | | height: 457px; |
| | | width: 100%; |
| | | font-size: 14px; |
| | | } |
| | | .layerbox { |
| | | width: 100%; |
| | | .layerbox-item { |
| | | padding-left: 20px; |
| | | padding-left: 30px; |
| | | padding-top: 5px; |
| | | .basemap-layer-item { |
| | | margin-bottom: 5px; |
| | |
| | | <div class="title"><input type="checkbox" :value="item.code" :checked="item.checked" |
| | | @change="swAllSubFilter(item)">{{item.name}} |
| | | </div> |
| | | <el-scrollbar style="height:100%"> |
| | | <!-- <el-scrollbar style="height:100%"> --> |
| | | <div class="content"> |
| | | <div v-for="filter in item.layers" :key="filter.code"> |
| | | <input type="checkbox" :value="filter.code" :checked="filter.checked" |
| | |
| | | :title="filter.name">{{filter.name}}</label> |
| | | </div> |
| | | </div> |
| | | </el-scrollbar> |
| | | <!-- </el-scrollbar> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | }, |
| | | // todo 还需要优化,在有多个需要子图层独立弹窗情况下无效 |
| | | toggle (serviceLayers) { |
| | | for (var i = 0; i < serviceLayers.length; i++) { |
| | | var serviceLayer = serviceLayers[i] |
| | | var childLayer = serviceLayer.childLayer |
| | | if (childLayer) { |
| | | if (this.checkChecked(serviceLayer.layers)) { |
| | | this.layers = childLayer |
| | | if (serviceLayers) { |
| | | for (var i = 0; i < serviceLayers.length; i++) { |
| | | var serviceLayer = serviceLayers[i] |
| | | var childLayer = serviceLayer.childLayer |
| | | if (childLayer) { |
| | | if (this.checkChecked(serviceLayer.layers)) { |
| | | this.layers = childLayer |
| | | } else { |
| | | this.layers = [] |
| | | } |
| | | break |
| | | } else { |
| | | this.layers = [] |
| | | this.toggle(serviceLayer.layers) |
| | | } |
| | | break |
| | | } else { |
| | | this.toggle(serviceLayer.layers) |
| | | } |
| | | } |
| | | }, |
| | |
| | | |
| | | <style scoped lang="less"> |
| | | .inner-panel { |
| | | color: #90c8e0; |
| | | font-size: 13px; |
| | | position: absolute; |
| | | left: 256px; |
| | | left: 1.82167rem; |
| | | z-index: 1000; |
| | | top: 50px; |
| | | .filter-group { |
| | | display: flex; |
| | | flex-flow: row; |
| | | |
| | | .filter-item { |
| | | width: 120px; |
| | | width: 0.6rem; |
| | | height: 100%; |
| | | margin-right: 5px; |
| | | |
| | | background-color: @background-color; |
| | | box-shadow: 0 0 0.03rem #00fff6; |
| | | border-radius: 0.03rem; |
| | | .title { |
| | | height: 25px; |
| | | background-color: #091331; |
| | | border: 1px solid #10488c; |
| | | border-bottom:1px solid @background-color-split; |
| | | padding: 5px 0; |
| | | background-color: @background-color; |
| | | } |
| | | |
| | | .content { |
| | | background-color: rgba(44, 62, 80, 0.6); |
| | | border: 1px solid #10488c; |
| | | max-height: 200px; |
| | | padding-bottom: 5px; |
| | | //overflow-y: hidden; |
| | | } |
| | | |
| | |
| | | <button type="button" class="el-button special-button el-button--default el-icon-d-arrow-right"></button> |
| | | </li> |
| | | </ul> |
| | | |
| | | <ul v-for="item in topicList" :key="item.name" :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'" @click="()=>{selected(item)}" > |
| | | <el-tooltip :popper-class="'map-tooltip'" effect="dark" :content="item.name" placement="left"> |
| | | <li> |
| | | <!-- <span>{{item.name}}</span>--> |
| | | <!-- <div >--> |
| | | <img src="../../assets/images/map-pages/icon/sl.png" class="icon"> |
| | | <!-- </div>--> |
| | | </li> |
| | | </el-tooltip> |
| | | <el-tooltip :popper-class="'map-tooltip'" effect="dark" :content="item.name" placement="left"> |
| | | <li> |
| | | <img src="../../assets/images/map-pages/icon/sl.png" class="icon"> |
| | | </li> |
| | | </el-tooltip> |
| | | </ul> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | |
| | | <div :class="'search-container map-background'"> |
| | | <div class="el-message-box__content" style="padding:6px;font-size: 13px;"> |
| | | <div class="el-message-box__content" style="padding:0 6px 6px 6px;font-size: 13px;"> |
| | | <component :title="title" :is="gcComp"></component> |
| | | </div> |
| | | </div> |
| | |
| | | </script> |
| | | |
| | | <style lang="less"> |
| | | .search-title{ |
| | | color:@color-title; |
| | | font-size: 18px; |
| | | margin: 5px; |
| | | } |
| | | |
| | | .search-container { |
| | | position: relative; |
| | | width: 1.79167rem; |
| | |
| | | .el-icon-search{ |
| | | width: 40px; |
| | | border:1px solid @color; |
| | | height: 26px; |
| | | line-height: 26px; |
| | | height: 28px; |
| | | line-height: 28px; |
| | | text-align: center; |
| | | color:#fff; |
| | | border-radius: 2px; |
| | | cursor:pointer; |
| | | background: rgba(0,16,30,.5); |
| | | padding:0; |
| | | } |
| | | } |
| | | /*单选按钮样式*/ |
| | |
| | | color:@color-over; |
| | | background: @background-color; |
| | | } |
| | | //.search-panel { |
| | | // border: #07325B; |
| | | // background-color: #07325B !important; |
| | | // margin-top: 0px; |
| | | // |
| | | // .el-input__inner { |
| | | // border-radius: 0px !important; |
| | | // background-color: #061e51 !important; |
| | | // } |
| | | //} |
| | | |
| | | input::-webkit-input-placeholder { |
| | | color: #569ee1; |
| | |
| | | .sewers-search{ |
| | | position: relative; |
| | | overflow: hidden; |
| | | .panel-title{} |
| | | .search-panel{ |
| | | background-color: transparent; |
| | | border: 1px solid @background-color-split; |
| | | padding: 10px 0; |
| | | border-bottom: 1px solid @background-color-split; |
| | | // .el-input{width:calc(100% - 40px);position: relative} |
| | | /deep/ input { |
| | | border-radius: 0; |
| | |
| | | <template> |
| | | <div class="sewers-search" v-if="gdVisible"> |
| | | <div class="search-title">{{title}}</div> |
| | | <div class="panel-title">{{title}}</div> |
| | | <div class="search-panel "> |
| | | <el-form ref="form" :model="form" label-width="90px" class="search-form"> |
| | | <el-form-item label="区域:" size="mini" class="search-panel-item"> |
| | |
| | | <!-- <el-form-item >--> |
| | | <div class="rightButtonSearch"> |
| | | <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"></el-input> |
| | | <el-buttom class="el-icon-search" @click="handleSearch"></el-buttom> |
| | | <el-button class="el-icon-search" @click="handleSearch"></el-button> |
| | | </div> |
| | | </el-form> |
| | | </div> |
| | |
| | | import WfsHelper from '@components/helpers/WfsHelper' |
| | | import AjaxUtils from '@utils/AjaxUtils' |
| | | export default { |
| | | name: 'SewersSearch', |
| | | name: 'DischargeSearch', |
| | | data () { |
| | | return { |
| | | gdVisible: true, |
| | |
| | | { name: '一级风险', value: '2', color: 'sandybrown' }, |
| | | { name: '二级风险', value: '3', color: 'yellow' }, |
| | | { name: '三级风险', value: '4', color: 'green' } |
| | | ] |
| | | ], |
| | | areaTypeOptions: [] |
| | | } |
| | | }, |
| | | props: ['title'], |
| | |
| | | <template> |
| | | <div class="sewers-search" v-if="gdVisible"> |
| | | <div class="search-title">{{title}}</div> |
| | | <div class="panel-title">{{title}}</div> |
| | | <div class="search-panel "> |
| | | <el-form ref="form" :model="form" label-width="90px" class="search-form"> |
| | | <el-form-item label="区域:" size="mini" class="search-panel-item"> |
| | |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="企业名称" size="mini"> |
| | | <el-form-item label="企业名称:" size="mini"> |
| | | <el-select style="width: 100%" v-model="form.enterpriseVal" @change="enterpriseType" :popper-class="'select-down'"> |
| | | <el-option |
| | | v-for="item in enterpriseTypeOptions" |
| | |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="二级单位" size="mini"> |
| | | <el-form-item label="二级单位:" size="mini"> |
| | | <el-select style="width: 100%" v-model="form.enterpriseSubunitsVal" @change="enterpriseSubunitsType" :popper-class="'select-down'"> |
| | | <el-option |
| | | v-for="item in enterpriseSubunitsTypeOptions" |
| | |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="风险级别" size="mini"></el-form-item> |
| | | <el-form-item label="风险级别:" size="mini"></el-form-item> |
| | | <el-radio-group v-model="form.type" class="levelOfRisk"> |
| | | <el-radio v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"><span class="levelOfRisk-type">{{item.name}}<i :style="'background:'+item.color"></i></span></el-radio> |
| | | </el-radio-group> |
| | | <div class="rightButtonSearch"> |
| | | <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"> |
| | | </el-input> |
| | | <el-buttom class="el-icon-search" @click="handleSearch"></el-buttom> |
| | | <el-button class="el-icon-search" @click="handleSearch"></el-button> |
| | | </div> |
| | | </el-form> |
| | | </div> |
| | |
| | | import WfsHelper from '@components/helpers/WfsHelper' |
| | | import AjaxUtils from '@utils/AjaxUtils' |
| | | export default { |
| | | name: 'SewersSearch', |
| | | name: 'EnvRiskSearch', |
| | | data () { |
| | | return { |
| | | gdVisible: true, |
| | |
| | | { name: '一级风险', value: '2', color: 'sandybrown' }, |
| | | { name: '二级风险', value: '3', color: 'yellow' }, |
| | | { name: '三级风险', value: '4', color: 'green' } |
| | | ] |
| | | ], |
| | | areaTypeOptions: [] |
| | | } |
| | | }, |
| | | props: ['title'], |
| | |
| | | <template> |
| | | <div class="sewers-search" v-if="gdVisible"> |
| | | <div class="search-title">{{title}}</div> |
| | | <div class="panel-title">{{title}}</div> |
| | | <div class="search-panel "> |
| | | <el-form ref="form" :model="form" label-width="90px" class="search-form"> |
| | | <el-form-item label="区域:" size="mini" class="search-panel-item"> |
| | |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="企业名称" size="mini"> |
| | | <el-form-item label="企业名称:" size="mini"> |
| | | <el-select style="width: 100%" v-model="form.enterpriseVal" @change="enterpriseType" :popper-class="'select-down'"> |
| | | <el-option |
| | | v-for="item in enterpriseTypeOptions" |
| | |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="二级单位" size="mini"> |
| | | <el-form-item label="二级单位:" size="mini"> |
| | | <el-select style="width: 100%" v-model="form.enterpriseSubunitsVal" @change="enterpriseSubunitsType" :popper-class="'select-down'"> |
| | | <el-option |
| | | v-for="item in enterpriseSubunitsTypeOptions" |
| | |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="三级单位" size="mini"> |
| | | <el-form-item label="三级单位:" size="mini"> |
| | | <el-select style="width: 100%" v-model="form.enterpriseSubunitsVal" @change="enterpriseSubunitsType" :popper-class="'select-down'"> |
| | | <el-option |
| | | v-for="item in enterpriseSubunitsTypeOptions" |
| | |
| | | <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i>--> |
| | | <!-- <i slot="suffix" class="search-btn el-input__icon el-icon-search" @click="handleSearch"></i> --> |
| | | </el-input> |
| | | <el-buttom class="el-icon-search" @click="handleSearch"></el-buttom> |
| | | <el-button class="el-icon-search" @click="handleSearch"></el-button> |
| | | </div> |
| | | <!-- </el-form-item>--> |
| | | <!-- <el-form-item>--> |
| | |
| | | <!-- </el-form-item>--> |
| | | </el-form> |
| | | </div> |
| | | <el-scrollbar style="height:300px"> |
| | | <el-scrollbar style="height:264px"> |
| | | <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" --> |
| | | <i class="state"></i> |
| | | <div> |
| | |
| | | <p>风险级别:<span>三级</span></p> |
| | | </div> |
| | | </div> |
| | | <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" --> |
| | | <i class="state"></i> |
| | | <div> |
| | | <h3>###炼化部</h3> |
| | | <p>所属部门:<span>炼化部</span></p> |
| | | <p>风险级别:<span>三级</span></p> |
| | | </div> |
| | | </div> |
| | | <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" --> |
| | | <i class="state"></i> |
| | | <div> |
| | | <h3>###炼化部</h3> |
| | | <p>所属部门:<span>炼化部</span></p> |
| | | <p>风险级别:<span>三级</span></p> |
| | | </div> |
| | | </div> |
| | | <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" --> |
| | | <i class="state"></i> |
| | | <div> |
| | | <h3>###炼化部</h3> |
| | | <p>所属部门:<span>炼化部</span></p> |
| | | <p>风险级别:<span>三级</span></p> |
| | | </div> |
| | | </div> |
| | | <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" --> |
| | | <i class="state"></i> |
| | | <div> |
| | | <h3>###炼化部</h3> |
| | | <p>所属部门:<span>炼化部</span></p> |
| | | <p>风险级别:<span>三级</span></p> |
| | | </div> |
| | | </div> |
| | | <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" --> |
| | | <i class="state"></i> |
| | | <div> |
| | | <h3>###炼化部</h3> |
| | | <p>所属部门:<span>炼化部</span></p> |
| | | <p>风险级别:<span>三级</span></p> |
| | | </div> |
| | | </div> |
| | | |
| | | </el-scrollbar> |
| | | <!-- <span class="location-btn" @click="handleLocation(item)">588</span> --> |
| | | <el-card class="footer-page" v-if="total > 10"> |
| | |
| | | import WfsHelper from '@components/helpers/WfsHelper' |
| | | import AjaxUtils from '@utils/AjaxUtils' |
| | | export default { |
| | | name: 'SewersSearch', |
| | | name: 'GasWasteSearch', |
| | | data () { |
| | | return { |
| | | gdVisible: true, |
| | |
| | | <template> |
| | | <div class="sewers-search" v-if="gdVisible"> |
| | | <div class="search-title">{{title}}</div> |
| | | <div class="panel-title">{{title}}</div> |
| | | <div class="search-panel "> |
| | | <el-form ref="form" :model="form" label-width="90px" class="search-form"> |
| | | <el-form-item label="设施类型:" size="mini" class="search-panel-item"> |
| | |
| | | <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i>--> |
| | | <!-- <i slot="suffix" class="search-btn el-input__icon el-icon-search" @click="handleSearch"></i> --> |
| | | </el-input> |
| | | <el-buttom class="el-icon-search" @click="handleSearch"></el-buttom> |
| | | <el-button class="el-icon-search" @click="handleSearch"></el-button> |
| | | </div> |
| | | <!-- </el-form-item>--> |
| | | <!-- <el-form-item>--> |
| | |
| | | </el-form> |
| | | </div> |
| | | <el-scrollbar style="height:380.44px;" > |
| | | <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index"> |
| | | <div class="B-TMD-table-list-title"> |
| | | <div class="B-TMD-table-list-head"> |
| | | <div class="B-TMD-table-list-title-y" |
| | | :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]"> |
| | | <!-- <span>运单号:</span>--> |
| | | <span id="waybillNumber" class="" |
| | | :title="item.properties.pipename"> |
| | | <span class="location-btn" @click="handleLocation(item)">{{ item.properties.pipename }}</span> |
| | | </span> |
| | | </div> |
| | | <!-- <div class="B-TMD-table-list-title-c">--> |
| | | <!-- {{ labelList[0] }}:--> |
| | | <!-- <span id="plateNumber_p">--> |
| | | <!-- <span id="plateNumber_n"><a href="#">{{ item.properties.item.p1 }}</a></span>--> |
| | | <!-- </span>--> |
| | | <!-- </div>--> |
| | | </div> |
| | | <!-- <div class="B-TMD-table-icons" style="float:right">--> |
| | | <!-- <ul>--> |
| | | <!-- <li class="B-TMD-table-list-title-y-adress"--> |
| | | <!-- @click="handleLocation(item)"></li>--> |
| | | <!-- <li :class="[{'B-TMD-table-list-title-y-car': item.vehicleStatus ==='910002', 'B-TMD-table-list-title-y-car-offline': item.vehicleStatus ==='910001','B-TMD-table-list-title-y-car-warning': item.vehicleStatus==='910003' }]"></li>--> |
| | | <!-- </ul>--> |
| | | <!-- </div>--> |
| | | </div> |
| | | <div class="B-TMD-table-list-content"> |
| | | |
| | | <div v-for="itm in labelList" :key="itm.label"> |
| | | <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" > |
| | | <!-- <i class="state"></i> --> |
| | | <div @click="handleLocation(item)"> |
| | | <h3 class="B-TMD-table-list-title-y" :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]" >{{ item.properties.pipename }}</h3> |
| | | <p v-for="itm in labelList" :key="itm.label"> |
| | | <span>{{ itm.label }}:</span> |
| | | <span id="b_twe_loan" :title="item.properties[itm.key] ">{{ item.properties[itm.key] }}</span> |
| | | </div> |
| | | <!-- <div><span>收货企业:</span> <span--> |
| | | <!-- id="b_twe_loan1" :title="item.recvWarehouseName">{{ item.recvWarehouseName }}</span>--> |
| | | <!-- </div>--> |
| | | <span :title="item.properties[itm.key] ">{{ item.properties[itm.key] }}</span> |
| | | </p> |
| | | </div> |
| | | <!-- <div class="B-TMD-table-list-bottom">--> |
| | | <!-- <div class="B-TMD-table-list-bottom-name">--> |
| | | <!-- 货物名称:<span :title="item.materialName">{{ item.materialName }}</span></div>--> |
| | | <!-- </div>--> |
| | | </div> |
| | | </el-scrollbar> |
| | | <el-card class="footer-page" v-if="total > 10"> |
| | |
| | | <template> |
| | | <div class="sewers-search" v-if="gdVisible"> |
| | | <div class="search-title">{{title}}</div> |
| | | <div class="panel-title">{{title}}</div> |
| | | <div class="search-panel "> |
| | | <el-form ref="form" :model="form" label-width="90px" class="search-form"> |
| | | <el-form-item label="区域:" size="mini" class="search-panel-item"> |
| | |
| | | <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i>--> |
| | | <!-- <i slot="suffix" class="search-btn el-input__icon el-icon-search" @click="handleSearch"></i> --> |
| | | </el-input> |
| | | <el-buttom class="el-icon-search" @click="handleSearch"></el-buttom> |
| | | <el-button class="el-icon-search" @click="handleSearch"></el-button> |
| | | </div> |
| | | |
| | | <!-- </el-form-item>--> |
| | |
| | | { name: '一级风险', value: '2', color: 'sandybrown' }, |
| | | { name: '二级风险', value: '3', color: 'yellow' }, |
| | | { name: '三级风险', value: '4', color: 'green' } |
| | | ] |
| | | ], |
| | | areaTypeOptions: [] |
| | | } |
| | | }, |
| | | props: ['title'], |
| | |
| | | <template> |
| | | <div class="sewers-search" v-if="judgeVisible"> |
| | | <div class="search-title">{{title}}</div> |
| | | <div class="panel-title">{{title}}</div> |
| | | <div class="search-panel "> |
| | | <el-form ref="form" :model="form" label-width="90px" class="search-form"> |
| | | <el-form-item v-for="(item,index) in solidWasteTypeOptions" :key="index" :label="item.label+':'" size="mini" |
| | |
| | | |
| | | <div class="rightButtonSearch"> |
| | | <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"></el-input> |
| | | <el-buttom class="el-icon-search" @click="handleSearch"></el-buttom> |
| | | <el-button class="el-icon-search" @click="handleSearch"></el-button> |
| | | </div> |
| | | </el-form> |
| | | </div> |
| | |
| | | <template> |
| | | <div class="sewers-search" v-if="judgeVisible"> |
| | | <div class="search-title">{{title}}</div> |
| | | <div class="panel-title">{{title}}</div> |
| | | <div class="search-panel "> |
| | | <el-form ref="form" :model="form" label-width="90px" class="search-form"> |
| | | <el-form-item v-for="(item,index) in solidWasteTypeOptions" :key="index" :label="item.label+':'" size="mini" |
| | |
| | | </el-radio-group> |
| | | <div class="rightButtonSearch"> |
| | | <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"></el-input> |
| | | <el-buttom class="el-icon-search" @click="handleSearch"></el-buttom> |
| | | <el-button class="el-icon-search" @click="handleSearch"></el-button> |
| | | </div> |
| | | </el-form> |
| | | </div> |
| | |
| | | } |
| | | |
| | | export const logicMapper = { |
| | | wasteGasJcd: 'WasteGas.js', |
| | | wasteWaterJcd: 'WasteWater.js', |
| | | solidWasteJcd: 'SolidWaste.js', |
| | | wasteGasPfk: 'WasteGas.js', |
| | | wasteWaterPfk: 'WasteWater.js', |
| | | wasteSolidCcd: 'SolidWaste.js', |
| | | sewersAreaGs: 'Company.js' |
| | | } |
| | | |
| | |
| | | /** |
| | | * 区域 |
| | | * 专题 |
| | | */ |
| | | import { LayerWasteWater } from './layers/LayerWasteWater' |
| | | import { LayerWasteGas } from './layers/LayerWasteGas' |
| | |
| | | import { LayerAirQuality } from './layers/LayerAirQuality' |
| | | import { LayerEnvRisk } from './layers/LayerEnvRisk' |
| | | import { LayerSoilGroundWater } from './layers/LayerSoilGroundWater' |
| | | import { LayerPollutionSources } from './layers/LayerPollutionSources' |
| | | |
| | | export const LayerTopic = { |
| | | code: 'sewersTopic', |
| | | name: '专题图层', |
| | | checked: true, |
| | | layers: [LayerWasteWater, LayerWasteGas, LayerWasteSolid, LayerAirQuality, LayerEnvRisk, LayerSoilGroundWater] |
| | | layers: [LayerPollutionSources, LayerWasteWater, LayerWasteGas, LayerWasteSolid, LayerAirQuality, LayerEnvRisk, LayerSoilGroundWater] |
| | | } |
| | |
| | | import { LayerSewersPoint } from './layers/LayerSewers' |
| | | import { LayerTopic } from './LayerTopic' |
| | | import { LayerPipeLine } from './LayerPipeLine' |
| | | import { LayerBasin } from './layers/LayerBasin' |
| | | |
| | | const curWwwPath = window.document.location.href |
| | | const pathname = window.document.location.pathname |
| | |
| | | IntranetBaseMaps: TDT.intranet, |
| | | InternetBaseMaps: TDT.internet, |
| | | Layers: { |
| | | LayerSewersLine: [LayerPipeLine, LayerTopic], |
| | | LayerSewersLine: [LayerBasin, LayerTopic, LayerPipeLine], |
| | | layerSewersPoint: LayerSewersPoint |
| | | } // 污雨水图层配置 |
| | | } |
New file |
| | |
| | | /** |
| | | * 污染源 |
| | | * @type {string} |
| | | */ |
| | | export const LayerPollutionSources = { |
| | | code: 'pollutionSources', |
| | | name: '污染源', |
| | | checked: true, |
| | | layers: [ |
| | | { |
| | | code: 'pollutionSourcesSczz', |
| | | name: '生产装置', |
| | | sname: '生产装置', // 表名 |
| | | checked: true, // 默认选中状态 |
| | | url: 'http://www.baidu.com', // 请求业务数据接口 |
| | | minZoom: 10 // 在指定级别显示 |
| | | }, |
| | | { |
| | | code: 'pollutionSourcesZlss', |
| | | name: '治理设施', |
| | | sname: '治理设施', // 表名 |
| | | checked: true, // 默认选中状态 |
| | | url: 'http://www.baidu.com', // 请求业务数据接口 |
| | | minZoom: 10 // 在指定级别显示 |
| | | }] |
| | | } |
| | |
| | | const APP_GIS_HOST_2 = 'http://xearth.cn:8088' |
| | | const WFS_URL = APP_GIS_HOST_2 + '/server/ogcserver/PipeLine/wfs' |
| | | // const APP_GIS_HOST_2 = 'http://localhost:3000' |
| | | // const APP_GIS_HOST_2 = 'http://192.168.31.226:8088' |
| | | export const LayerSewersLine = { |
| | | code: 'pipeline', |
| | | name: '管网数据', |
| | | type: 'geojson', |
| | | checked: true, |
| | | layers: [ |
| | | { |
| | | code: 'rainline', |
| | | name: '雨水线', |
| | | sname: '管网', // 表名 |
| | | checked: true, // 默认选中状态 |
| | | wfs: WFS_URL + '?TYPENAME=管网', |
| | | minZoom: 10, // 在指定级别显示 |
| | | childLayer: 'sewersFsss,sewersHbss' // 关联PointLayers |
| | | }, |
| | | { |
| | | code: 'oilline', |
| | | name: '含油污水线', |
| | | sname: '含油污水', |
| | | checked: true, // 默认选中状态 |
| | | wfs: WFS_URL + '?TYPENAME=含油污水', |
| | | minZoom: 10, |
| | | childLayer: 'sewersFsss,sewersHbss' // 关联PointLayers |
| | | }, |
| | | { |
| | | code: 'saltline', |
| | | name: '含盐污水线', |
| | | sname: '含盐污水', |
| | | checked: true, // 默认选中状态 |
| | | wfs: WFS_URL + '?TYPENAME=含盐污水', |
| | | minZoom: 10, |
| | | childLayer: 'sewersFsss,sewersHbss' // 关联PointLayers |
| | | }, |
| | | { |
| | | code: 'alkaliline', |
| | | name: '含碱污水线', |
| | | sname: '含碱污水', |
| | | checked: true, // 默认选中状态 |
| | | wfs: WFS_URL + '?TYPENAME=含碱污水', |
| | | minZoom: 10, |
| | | childLayer: 'sewersFsss,sewersHbss' // 关联PointLayers |
| | | }, |
| | | { |
| | | code: 'outlet', |
| | | name: '排口', |
| | | sname: '排口', |
| | | checked: true, // 默认选中状态 |
| | | wfs: WFS_URL + '?TYPENAME=排口', |
| | | minZoom: 10, |
| | | childLayer: 'pk' // 关联PointLayers |
| | | }, |
| | | { |
| | | code: 'accidentline', |
| | | name: '事故水线', |
| | | sname: '事故水', |
| | | checked: true, // 默认选中状态 |
| | | wfs: WFS_URL + '?TYPENAME=事故水', |
| | | minZoom: 10, |
| | | childLayer: 'sewersFsss,sewersHbss' // 关联PointLayers |
| | | }, |
| | | { |
| | | code: 'loopline', |
| | | name: '循环水线', |
| | | sname: '循环水', |
| | | checked: true, // 默认选中状态 |
| | | wfs: WFS_URL + '?TYPENAME=循环水', |
| | | minZoom: 10, |
| | | childLayer: 'sewersFsss,sewersHbss' // 关联PointLayers |
| | | }, |
| | | { |
| | | code: 'purifyline', |
| | | name: '净化水线', |
| | | sname: '净化水', |
| | | checked: true, // 默认选中状态 |
| | | wfs: WFS_URL + '?TYPENAME=净化水', |
| | | minZoom: 10, |
| | | childLayer: 'sewersFsss,sewersHbss' // 关联PointLayers |
| | | }, |
| | | { |
| | | code: 'lifeline', |
| | | name: '生活污水', |
| | | sname: '生活污水', |
| | | checked: true, // 默认选中状态 |
| | | wfs: WFS_URL + '?TYPENAME=生活污水', |
| | | minZoom: 10, |
| | | childLayer: 'sewersFsss,sewersHbss' // 关联PointLayers |
| | | }, |
| | | { |
| | | code: 'areainfo', |
| | | name: '区域信息', |
| | | sname: '区域信息', |
| | | checked: true, // 默认选中状态 |
| | | filter: {}, |
| | | minZoom: 10, |
| | | childLayer: 'qyxx' // 关联PointLayers |
| | | } |
| | | ] |
| | | } |
| | | |
| | | export const LayerSewersPoint = [ |
| | | { |
| | | code: 'sewersFsss', |
| | |
| | | checked: true, |
| | | layers: [ |
| | | { |
| | | code: 'wasteGasQy', |
| | | name: '企业', |
| | | sname: '企业', // 表名 |
| | | code: 'wasteGasPfk', |
| | | name: '排放口', |
| | | sname: '排放口', // 表名 |
| | | checked: true, // 默认选中状态 |
| | | url: 'http://www.baidu.com', // 请求业务数据接口 |
| | | minZoom: 10 // 在指定级别显示 |
| | | }, |
| | | { |
| | | code: 'wasteGasJcd', |
| | | name: '监测点', |
| | | sname: '监测点', |
| | | checked: true, // 默认选中状态 |
| | | url: 'http://www.baidu2.com', |
| | | minZoom: 10 |
| | | }, |
| | | { |
| | | code: 'wasteGasVocs', |
| | | name: 'VOCs', |
| | | sname: 'VOCs', |
| | | checked: true, // 默认选中状态 |
| | | url: '', |
| | | minZoom: 10 |
| | | }, |
| | | { |
| | | code: 'wasteGasKrq', |
| | |
| | | checked: true, // 默认选中状态 |
| | | url: '', |
| | | minZoom: 10 |
| | | }, |
| | | { |
| | | code: 'wasteGasVocs', |
| | | name: 'VOCs', |
| | | sname: 'VOCs', |
| | | checked: true, // 默认选中状态 |
| | | url: '', |
| | | minZoom: 10 |
| | | } |
| | | ] |
| | | } |
| | |
| | | */ |
| | | |
| | | export const LayerWasteSolid = { |
| | | code: 'solidWaste', |
| | | code: 'wasteSolid', |
| | | name: '固废', |
| | | checked: true, |
| | | layers: [ |
| | | { |
| | | code: 'solidWasteQy', |
| | | name: '企业', |
| | | sname: '企业', // 表名 |
| | | checked: true, // 默认选中状态 |
| | | url: 'http://www.baidu.com', // 请求业务数据接口 |
| | | minZoom: 10 // 在指定级别显示 |
| | | }, |
| | | { |
| | | code: 'solidWasteJcd', |
| | | name: '监测点', |
| | | sname: '监测点', |
| | | code: 'wasteSolidCcd', |
| | | name: '贮存点', |
| | | sname: '贮存点', |
| | | checked: true, // 默认选中状态 |
| | | url: 'http://www.baidu2.com', |
| | | minZoom: 10 |
| | |
| | | checked: true, |
| | | layers: [ |
| | | { |
| | | code: 'wasteWaterqy', |
| | | name: '企业', |
| | | sname: '企业', // 表名 |
| | | code: 'wasteWaterPfk', |
| | | name: '排放口', |
| | | sname: '排放口', // 表名 |
| | | checked: true, // 默认选中状态 |
| | | url: 'http://www.baidu.com', // 请求业务数据接口 |
| | | minZoom: 10 // 在指定级别显示 |
| | | }, |
| | | { |
| | | code: 'wasteWaterJcd', |
| | | name: '监测点', |
| | | sname: '监测点', |
| | | name: '流量', |
| | | sname: '流量', |
| | | checked: true, // 默认选中状态 |
| | | url: 'http://www.baidu2.com', |
| | | minZoom: 10, |
| | | childLayer: 'fsss,hbss' // 关联PointLayers |
| | | minZoom: 10 |
| | | }, |
| | | { |
| | | code: 'wasteWaterfk', |
| | | name: '排放口', |
| | | sname: '排放口', |
| | | name: '液位', |
| | | sname: '液位', |
| | | checked: true, // 默认选中状态 |
| | | url: '', |
| | | minZoom: 10, |
| | | childLayer: 'fsss,hbss' // 关联PointLayers |
| | | minZoom: 10 |
| | | } |
| | | ] |
| | | } |
| | |
| | | .el-tabs{} |
| | | |
| | | .el-tabs__header{ |
| | | border-bottom: 1px solid #26defd; |
| | | border-bottom: 1px solid @background-color-split !important; |
| | | padding: 0; |
| | | position: relative; |
| | | margin: 0 0 15px; |
| | |
| | | overflow: hidden; |
| | | position: relative; |
| | | } |
| | | |
| | | .el-tabs--card > .el-tabs__header{ |
| | | border-bottom: 1px solid @background-color-split; |
| | | } |
| | | .el-tabs--card > .el-tabs__header .el-tabs__active-bar { |
| | | display: none; |
| | | } |