Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop
| | |
| | | @color-tool: #C0C4CC;//工具色 |
| | | @color-shadow: #00fff6;//显示颜色 |
| | | @background-color: rgba(0, 16, 30, .7);//背景填充色 |
| | | @background-color4: rgba(0, 16, 30, .4);//背景填充色 |
| | | @background-color-light: rgba(40, 50, 100, .4);//光晕 |
| | | @background-color-split: rgba(0, 255, 246, .14);//分割线 |
| | | @background-color-tools: #1A4951;//工具箱 |
| | |
| | | @import "_map-variable"; |
| | | |
| | | .leaflet-container, |
| | | html,body{ |
| | | // font-family: 'Microsoft YaHei'; |
| | | font: 12px/1.5 "Microsoft YaHei", Arial, Helvetica, sans-serif; |
| | | } |
| | | /*全局设置***********/ |
| | | h1, h2, h3, h4, h5, h6, ul, li, p { |
| | | padding: 0; |
| | |
| | | |
| | | /***************Company 图层 悬浮框样式。*********************************/ |
| | | .company-bindTooltip { |
| | | background: @background-color-split; |
| | | //background: @background-color-split; |
| | | background: none; |
| | | border: none; |
| | | color: red; |
| | | font-size: 16px; |
| | | font-weight: 900 !important; |
| | | text-shadow: 0 0 5px #fff; |
| | | box-shadow: none; |
| | | //text-shadow: 0 0 5px #fff; |
| | | //filter:Dropshadow(offx=1,offy=0,color=white) |
| | | //Dropshadow(offx=0,offy=1,color=white) |
| | | //Dropshadow(offx=0,offy=-1,color=white) |
| | | //Dropshadow(offx=-1,offy=0,color=white); |
| | | box-shadow: none; |
| | | -webkit-text-stroke: .5px #fff; |
| | | //box-shadow: none; |
| | | //-webkit-text-stroke: .5px #fff; |
| | | ul{ |
| | | position: relative; |
| | | li:not(:first-child){ |
| | | position: absolute; |
| | | top:0; |
| | | left:0; |
| | | width: 100%; |
| | | font-weight: 900; |
| | | } |
| | | li{ |
| | | text-shadow: 0 0 4px #fff; |
| | | } |
| | | } |
| | | } |
| | | .company-bindTooltip:before{ |
| | | display: none; |
| | | } |
| | | |
| | | .company-bindTooltip-hover h3 { |
| | |
| | | .icon{ |
| | | width: 20px; |
| | | margin: 0 auto; |
| | | font-size: 20px; |
| | | } |
| | | |
| | | } |
New file |
| | |
| | | <!-- 小时数据 --> |
| | | <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"> |
| | | <!-- :title="this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName" --> |
| | | <!-- <div class="from-search">--> |
| | | <!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">--> |
| | | <!--<!– <el-form-item label="审批人">–>--> |
| | | <!--<!– <el-input v-model="formInline.user" placeholder="审批人"></el-input>–>--> |
| | | <!--<!– </el-form-item>–>--> |
| | | <!-- <div class="block">--> |
| | | <!-- <el-date-picker--> |
| | | <!-- class="date"--> |
| | | <!-- v-model="value"--> |
| | | <!-- type="datetimerange"--> |
| | | <!-- range-separator="至"--> |
| | | <!-- start-placeholder="开始日期"--> |
| | | <!-- end-placeholder="结束日期">--> |
| | | <!-- </el-date-picker>--> |
| | | <!-- </div>--> |
| | | <!-- <el-form-item label="采样点数" class="text-size">--> |
| | | <!-- <el-select v-model="formInline.region" placeholder="0">--> |
| | | <!-- <el-option label="0" value="shanghai"></el-option>--> |
| | | <!-- <el-option label="25" value="beijing"></el-option>--> |
| | | <!-- <el-option label="50" value="beijing"></el-option>--> |
| | | <!-- <el-option label="75" value="beijing"></el-option>--> |
| | | <!-- <el-option label="100" value="beijing"></el-option>--> |
| | | <!-- </el-select>--> |
| | | <!-- </el-form-item>--> |
| | | <!-- <el-form-item>--> |
| | | <!-- <el-button type="primary" @click="onSubmit">查询</el-button>--> |
| | | <!-- </el-form-item>--> |
| | | <!-- </el-form>--> |
| | | <!-- <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: { |
| | | // PublicDetailedList |
| | | }, |
| | | data () { |
| | | return { |
| | | watchData: [], |
| | | dialogVisible: false, |
| | | dataDate: [], |
| | | value: '', |
| | | options: { |
| | | title: { |
| | | // text: '折线图堆叠' |
| | | }, |
| | | color: ['#5470c6', '#91CC75', '#EE6666', '#FF0087'], |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'cross', |
| | | label: { |
| | | color: '#1a4245' |
| | | } |
| | | } |
| | | }, |
| | | legend: { |
| | | x: '200px', |
| | | y: '30px', |
| | | data: [{ |
| | | name: '氮氧化物', |
| | | textStyle: { |
| | | color: '#00d0f9' |
| | | } |
| | | }, |
| | | { |
| | | name: '二氧化硫', |
| | | textStyle: { |
| | | color: '#00d0f9' |
| | | } |
| | | }, |
| | | { |
| | | name: '烟尘', |
| | | textStyle: { |
| | | color: '#00d0f9' |
| | | } |
| | | }, |
| | | { |
| | | name: '废气流量', |
| | | textStyle: { |
| | | color: '#00d0f9' |
| | | } |
| | | }] |
| | | }, |
| | | grid: { |
| | | left: '3%', |
| | | right: '1%', |
| | | bottom: '3%', |
| | | containLabel: true |
| | | }, |
| | | toolbox: { |
| | | }, |
| | | // 图标缩放设置 |
| | | dataZoom: [{ |
| | | type: 'inside', |
| | | start: 0, |
| | | end: 100 |
| | | }, { |
| | | start: 0, |
| | | end: 100, |
| | | show: false, |
| | | // handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z', |
| | | handleSize: '80%', |
| | | handleStyle: { |
| | | color: '#fff', |
| | | shadowBlur: 3, |
| | | shadowColor: 'rgba(0, 0, 0, 0.6)', |
| | | shadowOffsetX: 2, |
| | | shadowOffsetY: 2 |
| | | } |
| | | }], |
| | | // x轴的设置 |
| | | xAxis: { |
| | | type: 'category', |
| | | boundaryGap: false, |
| | | data: ['12:00:00', '13:00:00', '14:00:00', '15:00:00', '16:00:00', '17:00:00', '18:00:00'], |
| | | axisLabel: { // x轴全部显示 |
| | | rotate: 20, |
| | | interval: 0, |
| | | textStyle: { |
| | | color: '#fff' |
| | | } |
| | | }, |
| | | splitLine: { // 网格垂直线为虚线 |
| | | show: true, |
| | | lineStyle: { |
| | | type: 'dashed' |
| | | } |
| | | }, |
| | | axisTick: { // x 轴刻度显示 |
| | | show: false |
| | | }, |
| | | axisLine: { |
| | | lineStyle: { |
| | | color: '#FFFFFF', |
| | | width: 1 // 这里是为了突出显示加上的 |
| | | } |
| | | } |
| | | }, |
| | | // Y 轴的设置 |
| | | yAxis: [{ |
| | | type: 'value', |
| | | // position: 'left', // 多 Y 轴使用 |
| | | // name: yname, // 后期图标Y轴显示单位 |
| | | name: '浓度(mg/m³)', |
| | | axisLabel: { |
| | | formatter: '{value}', |
| | | textStyle: { |
| | | color: '#fff' // 坐标的字体颜色 |
| | | } |
| | | }, |
| | | axisPointer: { |
| | | snap: true // 自动吸附最近的点 |
| | | }, |
| | | splitLine: { |
| | | show: false // y轴 网格线不显示 |
| | | }, |
| | | axisLine: { |
| | | lineStyle: { |
| | | color: '#ffffff', // 坐标轴的颜色 |
| | | width: 1 |
| | | } |
| | | } |
| | | }], |
| | | series: [ |
| | | { |
| | | name: '氮氧化物', |
| | | type: 'line', |
| | | stack: '总量', |
| | | data: [120, 132, 101, 134, 90, 230, 210] |
| | | }, |
| | | { |
| | | name: '二氧化硫', |
| | | type: 'line', |
| | | stack: '总量', |
| | | data: [150, 232, 201, 154, 190, 330, 410] |
| | | }, |
| | | { |
| | | name: '烟尘', |
| | | type: 'line', |
| | | stack: '总量', |
| | | data: [320, 332, 301, 334, 390, 330, 320] |
| | | }, |
| | | { |
| | | name: '废气流量', |
| | | type: 'line', |
| | | stack: '总量', |
| | | data: [820, 932, 901, 934, 1290, 1330, 1320] |
| | | } |
| | | ] |
| | | }, |
| | | formInline: { |
| | | user: '', |
| | | region: '' |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | onSubmit () { |
| | | console.log('submit!') |
| | | }, |
| | | drawChart: function () { |
| | | const myChart = this.$echarts.init(this.$refs.main) |
| | | myChart.setOption(this.options) |
| | | window.onresize = function () { |
| | | var h1 = document.documentElement.clientHeight// 获取屏幕的高度 |
| | | if (h1 > 700) { |
| | | myChart.getDom().style.height = 3 + 'rem' |
| | | myChart.getDom().style.width = 6 + 'rem' |
| | | } else { |
| | | myChart.getDom().style.height = 3 + 'rem' |
| | | myChart.getDom().style.width = 6 + 'rem' |
| | | } |
| | | myChart.resize() |
| | | } |
| | | } |
| | | }, |
| | | mounted () { |
| | | 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; |
| | | height: 0.2rem; |
| | | } |
| | | |
| | | .el-tag { |
| | | height: 25px; |
| | | width: 140px; |
| | | 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> |
| | |
| | | <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("EChartsHour")'>小时数据</li> |
| | | <li @click='tabTaggle("ECharts")'>日数据</li> |
| | | <li @click='tabTaggle("ECharts")'>人工数据</li> |
| | | </ul> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import ECharts from './ECharts' |
| | | import EChartsHour from './EChartsHour' |
| | | |
| | | export default { |
| | | name: 'PublicChart', |
| | | components: { |
| | | ECharts |
| | | EChartsHour |
| | | }, |
| | | data () { |
| | | return { |
| | | currentTab: 'ECharts' |
| | | currentTab: 'EChartsHour' |
| | | } |
| | | }, |
| | | methods: { |
| | | tabTaggle (taggleMenu) { |
| | | this.currentTab = taggleMenu |
| | | debugger |
| | | // debugger |
| | | } |
| | | } |
| | | } |
| | |
| | | <template> |
| | | <div class="PublicDetailedList"> |
| | | <el-table :data="tableData" max-height="500px"> |
| | | <el-table :data="tableData" max-height="500px" border> |
| | | <el-scrollbar style="height: 50vh"> |
| | | <el-table-column prop="OnLineMonEmissPointName" label="排放点"></el-table-column> |
| | | <el-table-column prop="MonTimeStr" label="监测时间"></el-table-column> |
| | | <el-table-column label="氮氧化物"> |
| | | <el-table-column prop="MonQty" label="浓度(mg/m³)"></el-table-column> |
| | | <el-table-column prop="OrglQty" label="折算值(mg/m³)"></el-table-column> |
| | | <el-table-column prop="ConvertQty" label="标准值(mg/m³)"></el-table-column> |
| | | <el-table-column prop="EmissQty" label="排放量(kg/h)"></el-table-column> |
| | | <el-table-column prop="MonQty" label="浓度(mg/m³)" width="60"></el-table-column> |
| | | <el-table-column prop="OrglQty" label="折算值(mg/m³)" width="60"></el-table-column> |
| | | <el-table-column prop="ConvertQty" label="标准值(mg/m³)" width="60"></el-table-column> |
| | | <el-table-column prop="EmissQty" label="排放量(kg/h)" width="60"></el-table-column> |
| | | </el-table-column> |
| | | <el-table-column label="二氧化硫"> |
| | | <el-table-column prop="MonQty" label="浓度(mg/m³)"></el-table-column> |
| | | <el-table-column prop="OrglQty" label="折算值(mg/m³)"></el-table-column> |
| | | <el-table-column prop="ConvertQty" label="标准值(mg/m³)"></el-table-column> |
| | | <el-table-column prop="EmissQty" label="排放量(kg/h)"></el-table-column> |
| | | <el-table-column prop="MonQty" label="浓度(mg/m³)" width="60"></el-table-column> |
| | | <el-table-column prop="OrglQty" label="折算值(mg/m³)" width="60"></el-table-column> |
| | | <el-table-column prop="ConvertQty" label="标准值(mg/m³)" width="60"></el-table-column> |
| | | <el-table-column prop="EmissQty" label="排放量(kg/h)" width="60"></el-table-column> |
| | | </el-table-column> |
| | | <el-table-column label="烟尘"> |
| | | <el-table-column prop="MonQty" label="浓度(mg/m³)"></el-table-column> |
| | | <el-table-column prop="OrglQty" label="折算值(mg/m³)"></el-table-column> |
| | | <el-table-column prop="ConvertQty" label="标准值(mg/m³)"></el-table-column> |
| | | <el-table-column prop="EmissQty" label="排放量(kg/h)"></el-table-column> |
| | | <el-table-column prop="MonQty" label="浓度(mg/m³)" width="60"></el-table-column> |
| | | <el-table-column prop="OrglQty" label="折算值(mg/m³)" width="60"></el-table-column> |
| | | <el-table-column prop="ConvertQty" label="标准值(mg/m³)" width="60"></el-table-column> |
| | | <el-table-column prop="EmissQty" label="排放量(kg/h)" width="60"></el-table-column> |
| | | </el-table-column> |
| | | <el-table-column label="废气流量"> |
| | | <el-table-column prop="StdValue" label="气量"></el-table-column> |
| | | </el-table-column> |
| | | </el-scrollbar> |
| | | </el-table> |
| | | </div> |
| | | </template> |
| | |
| | | <el-col :span="8">生产单位:{{ setWasteGasdata.porltName }}</el-col> |
| | | <el-col :span="8">排放类型名称:{{ setWasteGasdata.MonTypeName }}</el-col> |
| | | </el-row> |
| | | <el-row type="flex" class="row-bg" justify="space-around"> |
| | | <el-row type="flex" class="row-bg row-item-two" justify="space-around"> |
| | | <el-col :span="8">排放去向:{{ setWasteGasdata.EmissDirecti }}</el-col> |
| | | <el-col :span="18">控制级别名称:{{ setWasteGasdata.ContrLevelShowName }}</el-col> |
| | | <el-col :span="18">内/外排口:{{ setWasteGasdata.OrOutPortName }}</el-col> |
| | |
| | | <el-col :span="8">生产单位:{{ setWasteWaterdata.porltName }}</el-col> |
| | | <el-col :span="8">排放类型名称:{{ setWasteWaterdata.MonTypeName }}</el-col> |
| | | </el-row> |
| | | <el-row type="flex" class="row-bg" justify="space-around"> |
| | | <el-row type="flex" class="row-bg row-item-two" justify="space-around"> |
| | | <el-col :span="8">排放去向:{{ setWasteWaterdata.EmissDirecti }}</el-col> |
| | | <el-col :span="8">控制级别名称:{{ setWasteWaterdata.ContrLevelShowName }}</el-col> |
| | | <el-col :span="8">内/外排口:{{ setWasteWaterdata.OrOutPortName }}</el-col> |
| | |
| | | margin-bottom: 10px; |
| | | background-color: rgba(33, 41, 69, 0.9); |
| | | //width: 6rem; |
| | | height: 0.5rem; |
| | | //height: 0.5rem; |
| | | } |
| | | |
| | | .main { |
| | |
| | | .main-matter { |
| | | font-size: 13px; |
| | | font-weight: normal; |
| | | //padding: 10px 6px; |
| | | padding: 0px 6px; |
| | | border: 1px solid #396d83; |
| | | |
| | | .row-item-one { |
| | | //flex-wrap: nowrap; |
| | | overflow: hidden; |
| | | margin-top: 6px; |
| | | margin-bottom: 7px; |
| | | //margin-left: 10px; |
| | | } |
| | | |
| | | .row-item-two{ |
| | | margin-bottom: 6px; |
| | | } |
| | | .el-row { |
| | | width: 100%; |
| | | color: #00d0f9; |
| | |
| | | <!-- <span class="icon-name">图层</span>--> |
| | | </div> |
| | | </el-tooltip> |
| | | <transition name="animationChange"> |
| | | <transition name="layerChange"> |
| | | <div :class="'legend-content map-background'" v-show="layerControllerVisible"> |
| | | <lc-service-layer></lc-service-layer> |
| | | <button @click="showPanel" type="button" class="el-button special-button el-button--default el-icon-d-arrow-left"></button> |
| | |
| | | </script> |
| | | |
| | | <style lang="less"> |
| | | .animationChange-enter-active, .animationChange-leave-active { |
| | | |
| | | .layerChange-enter-active { |
| | | transform-origin: top left; |
| | | animation: bounce-in .2s; |
| | | } |
| | | .layerChange-leave-active { |
| | | transform-origin: top left; |
| | | animation: bounce-in .2s reverse; |
| | | } |
| | | /* |
| | | |
| | | .layerChange-enter-active, |
| | | .layerChange-leave-active { |
| | | transition: all 0.5s; |
| | | } |
| | | |
| | | .animationChange-enter, .animationChange-leave-to { |
| | | .layerChange-enter, |
| | | .layerChange-leave-to { |
| | | opacity: 0; |
| | | transform: translateX(-100px); |
| | | } |
| | | }*/ |
| | | .float-panel.active{ |
| | | overflow: visible; |
| | | } |
| | |
| | | } |
| | | .el-button--default{ |
| | | padding: 15px 3px; |
| | | background:@background-color; |
| | | background:@background-color4; |
| | | color:@color-tool; |
| | | position: absolute; |
| | | top:0; |
| | | left: 100%; |
| | | margin-left: .02rem; |
| | | border-radius: 0.03rem 50% 50% 0.03rem; |
| | | border:1px solid @color-tool; |
| | | // border-radius: 0.03rem 50% 50% 0.03rem; |
| | | } |
| | | .el-button--default:hover{ |
| | | background:@background-color; |
| | | border:1px solid @color; |
| | | box-shadow: 0 0 2px @color; |
| | | color:@color; |
| | | } |
| | | .legend-content{ |
| | | width: 1.79167rem; |
| | |
| | | * 固废 |
| | | */ |
| | | // 区分不同类型 使用不同img |
| | | const companyImg = '/assets/images/map/company.png' |
| | | const companyImg = '/assets/images/map/company_refining.png' |
| | | |
| | | const mapApi = require('../../../api/mapApi').default |
| | | const AnimalService = require('../service/AnimalService').default |
| | |
| | | icon: L.icon({ |
| | | iconUrl: iconUrl, |
| | | iconSize: [30, 30], |
| | | iconAnchor: [13, 5] |
| | | iconAnchor: [15, 15] |
| | | }), |
| | | test: data[i] |
| | | }) |
| | | marker.bindTooltip(data[i].name, { |
| | | const htmls = '<ul><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li></ul>' |
| | | marker.bindTooltip(htmls, { |
| | | permanent: true, |
| | | offset: [0, 14], |
| | | offset: [0, 5], |
| | | direction: 'bottom', |
| | | className: 'company-bindTooltip' |
| | | }).bindPopup('<div class="company-bindTooltip-hover"><h3>污染物产生统计</h3><ul>' + |
| | |
| | | <template> |
| | | <div class="panel-right" v-show="isShow"> |
| | | <transition name="searchPanelChange"> |
| | | <div style=" display: inline-flex;"> |
| | | <div class="panel-tab"> |
| | | <!-- <div v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleGd"--> |
| | | <!-- :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}">--> |
| | | <!-- <img :src="item.icon" style="width: 24px;height: 24px;"></div>--> |
| | | <div class="container"> |
| | | <ul> |
| | | <li style="text-align: right"> |
| | | <button type="button" class="el-button special-button el-button--default el-icon-d-arrow-right"></button> |
| | | <div @click="setSearchPanelChange" type="button" class="el-button special-button el-button--default"> |
| | | <i class=" el-icon-d-arrow-right" v-if="selectGroup"></i> |
| | | <i class=" el-icon-d-arrow-left" v-else ></i> |
| | | </div> |
| | | </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> |
| | |
| | | </ul> |
| | | </div> |
| | | </div> |
| | | <!-- <div class="panel-fold-btn" >--> |
| | | <!-- <div class="btn-stretch" @click="toggleMonitorPanel"></div>--> |
| | | <!-- </div>--> |
| | | |
| | | <!-- <div class="panel-fold-btn" @click="toggleMonitorPanel" >--> |
| | | <!-- <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>--> |
| | | <!--<!– <div class="btn-stretch" v-if="isCollapse" </div>–>--> |
| | | <!--<!– <div class="btn-shrink" v-else-if="!isCollapse" ></div>–>--> |
| | | <!--<!– :style = "{width:isCollapse ? '290px' : '0px'}"–>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="right-control" v-if="!isCollapse" >--> |
| | | <div class="right-control" :class="[{ 'unfold': !isCollapse },{ 'shrink': isCollapse }] " > |
| | | <div class="panel-fold-btn" @click="toggleMonitorPanel"> |
| | | <!-- <div class="btn-stretch" v-if="isCollapse"></div>--> |
| | | <!-- <div class="btn-shrink" v-else-if="!isCollapse"></div>--> |
| | | <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div> |
| | | </div> |
| | | |
| | | <div :class="'search-container map-background'"> |
| | | <div :class="'search-container map-background'" v-show="selectGroup" > |
| | | <div class="el-message-box__content" style="padding:0 6px 6px 6px;font-size: 13px;"> |
| | | <component :title="title" :is="gcComp"></component> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </transition> |
| | | <!-- <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="搜索" placement="left" v-show="!selectGroup"> |
| | | <div :class="selectGroup === true ?'active-button':''" class="iconBtn" @click="setSearchPanelChange" style="position: absolute;top:0;right: 0" > |
| | | <i class="el-icon-search icon"></i> |
| | | </div> |
| | | </el-tooltip> --> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | toggleMonitorStyle: 'right:0px', |
| | | |
| | | title: '污雨水管网', |
| | | isCollapse: true |
| | | isCollapse: true, |
| | | selectGroup: true |
| | | } |
| | | }, |
| | | computed: {}, |
| | |
| | | handleClose (done) { |
| | | console.log(done) |
| | | }, |
| | | setSearchPanelChange () { |
| | | this.selectGroup = !this.selectGroup |
| | | if (!this.selectGroup) { |
| | | this.topicList.forEach((itm) => { |
| | | itm.checked = false |
| | | }) |
| | | } |
| | | }, |
| | | selected (val) { |
| | | // console.log(val) |
| | | this.title = val.name |
| | | this.selectGroup = true |
| | | this.topicList.forEach((itm) => { |
| | | itm.checked = val.name === itm.name |
| | | }) |
| | |
| | | </script> |
| | | |
| | | <style lang="less"> |
| | | |
| | | .searchPanelChange-enter-active { |
| | | transform-origin: top right; |
| | | animation: bounce-in .2s; |
| | | } |
| | | .searchPanelChange-leave-active { |
| | | transform-origin: top right; |
| | | animation: bounce-in .2s reverse; |
| | | } |
| | | .search-container { |
| | | position: relative; |
| | | width: 1.79167rem; |
| | |
| | | //} |
| | | .el-button--default { |
| | | padding: 15px 3px; |
| | | background: rgba(0, 16, 30, 0.7); |
| | | color: #C0C4CC; |
| | | border-radius:50% 0.03rem 0.03rem 50% ; |
| | | background:@background-color4; |
| | | color:@color-tool; |
| | | border:1px solid @color-tool; |
| | | } |
| | | .el-button--default:hover{ |
| | | background:@background-color; |
| | | border:1px solid @color; |
| | | box-shadow: 0 0 2px @color; |
| | | color:@color; |
| | | } |
| | | |
| | | .el-form-item__label { |
| | |
| | | .special-button { |
| | | width: 0.1362rem; |
| | | height: 0.2725rem; |
| | | color: #C0C4CC; |
| | | border-radius: 0.03rem 50% 50% 0.03rem; |
| | | background:@background-color4; |
| | | color:@color-tool; |
| | | border:1px solid @color-tool; |
| | | } |
| | | .special-button:hover{ |
| | | color: #00fff6; |
| | | background:@background-color; |
| | | border:1px solid @color; |
| | | box-shadow: 0 0 2px @color; |
| | | color:@color; |
| | | } |
| | | } |
| | | } |
| | |
| | | <waste-water></waste-water> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="废气" name="second"> |
| | | <waste-gas></waste-gas> |
| | | <waste-water></waste-water> |
| | | <!-- <waste-gas></waste-gas>--> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="固废" name="third"> |
| | | <solid-waste></solid-waste> |
| | |
| | | |
| | | <script> |
| | | import WasteWater from '@components/table/components/WasteWater' |
| | | import WasteGas from '@components/table/components/WasteGas' |
| | | // import WasteGas from '@components/table/components/WasteGas' |
| | | import SolidWaste from '@components/table/components/SolidWaste' |
| | | import AirQuality from '@components/table/components/AirQuality' |
| | | export default { |
| | | name: 'tabHandover', |
| | | components: { |
| | | WasteWater, |
| | | WasteGas, |
| | | // WasteGas, |
| | | SolidWaste, |
| | | AirQuality |
| | | }, |