Merge remote-tracking branch 'origin/master' into master
# Conflicts:
# src/assets/css/map/map-panel-style.less
| | |
| | | <div id="app"></div> |
| | | <!-- built files will be auto injected --> |
| | | <script type="text/javascript"> |
| | | /* 这里我们利用了一个自执行函数 */ |
| | | (function(){ |
| | | change(); |
| | | function change(){ |
| | | console.log( document.documentElement.clientWidth*12/640 +'px') |
| | | //html的 font-size 的大小尺寸 |
| | | //这里的html字体大小利用了一个简单的数学公式,当我们默认设置以屏幕320px位基准此时的字体大小为20px(320 20px),那么浏览器窗口大小改变的时候新的html的fontSize(clientWidth 新的值)就是clientWidth*20/320 |
| | | document.documentElement.style.fontSize = document.documentElement.clientWidth/12 +'px'; |
| | | } |
| | | /* 监听窗口大小发生改变时*/ |
| | |
| | | @import "_map-variable"; |
| | | |
| | | .el-button--primary { |
| | | color: @color; |
| | | background-color: @background-color; |
| | |
| | | flex-shrink: 0; |
| | | } |
| | | } |
| | | |
| | | .el-tabs__header { |
| | | font-size: .08333rem; |
| | | line-height: .10938rem; |
| | | background: rgba(0, 255, 246, .14); |
| | | // background: rgba(0,255,246,.14); |
| | | } |
| | | |
| | | .el-dialog { |
| | | border: 0.00521rem solid @color; |
| | | box-shadow: 0 0 0.03rem @color; |
| | |
| | | flex-shrink: 0; |
| | | } |
| | | } |
| | | |
| | | .select-down { |
| | | border: none !important; |
| | | background-color: @background-color; |
| | |
| | | .el-select-dropdown__item.hover { |
| | | background-color: @background-color-light; |
| | | } |
| | | |
| | | .el-select-dropdown__item { |
| | | color: @color; |
| | | //background-color: @background-color; |
| | | } |
| | | |
| | | // .el-select-dropdown{ |
| | | // border: none !important; |
| | | // background-color: @background-color !important; |
| | |
| | | line-height: 40px; |
| | | } |
| | | } |
| | | |
| | | .el-table th, .el-table tr { |
| | | background-color: transparent; |
| | | } |
| | | |
| | | .el-table { |
| | | color: @color; |
| | | background: transparent; |
| | |
| | | color: #ffffff; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | thead.is-group th { |
| | | background: transparent; |
| | | } |
| | | |
| | | .el-table__expanded-cell { |
| | | background: transparent; |
| | | } |
| | | } |
| | | |
| | | .map-input { |
| | | input { |
| | | border-radius: 0; |
| | |
| | | border-radius: .03rem; |
| | | padding: .05rem; |
| | | } |
| | | |
| | | .map-btn-unactive { |
| | | color: @color; |
| | | border: .00521rem solid @color; |
| | | box-shadow: 0 0 .03rem @color; |
| | | } |
| | | |
| | | .map-btn-active { |
| | | color: @color-highlight; |
| | | border: .00521rem solid @color-highlight; |
| | | box-shadow: 0 0 .03rem @color-highlight; |
| | | } |
| | | |
| | | .map-btn-background { |
| | | background: @background-color; |
| | | //border: .00521rem solid @color; |
| | | //box-shadow: 0 0 .03rem @color; |
| | | //border-radius: .05208rem; |
| | | } |
| | | |
| | | .map-background { |
| | | //color: @color; |
| | | border: .00521rem solid @color; |
| | |
| | | //padding: .05rem !important; |
| | | border-radius: .05208rem; |
| | | } |
| | | |
| | | .map-under-line { |
| | | height: 1px; |
| | | background: @background-color-split; |
| | | margin-block-start: 0; |
| | | margin-block-end: 0; |
| | | } |
| | | |
| | | .tools-panel-content { |
| | | border: 1px solid @background-color-tools; |
| | | background: @background-color-tools; |
| | | padding: 0; |
| | | width: 90px; |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | justify-content: space-evenly; |
| | | |
| | | .el-button { |
| | | padding: 0; |
| | | margin: 5px; |
| | | width: 30px; |
| | | height: 30px; |
| | | margin: 10px; |
| | | width: 45px; |
| | | height: 45px; |
| | | background: @background-color-tools; |
| | | vertical-align: middle !important; |
| | | |
| | | img { |
| | | width: 16px; |
| | | height: 16px; |
| | | } |
| | | } |
| | | } |
| | | .el-popper[x-placement^=bottom] .popper__arrow::after { |
| | | border-bottom-color: @background-color-tools; |
| | | } |
| | |
| | | <template> |
| | | <el-tabs v-model="activeName"> |
| | | <el-tab-pane label="指标统计" name="first"><el-table |
| | | :data="tableData" |
| | | style="width: 100%"> |
| | | :data="tableData"> |
| | | <el-table-column |
| | | prop="date" |
| | | label="序号" |
| | | width="150"> |
| | | type="index" |
| | | label="序号"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="date" |
| | | label="单位名称" |
| | | width="150"> |
| | | label="单位名称"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="date" |
| | | label="工业取水量(m3)" |
| | | width="150"> |
| | | prop="province" |
| | | label="工业取水量(m3)"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="date" |
| | | label="外排废水量(m3)" |
| | | width="150"> |
| | | prop="province" |
| | | label="外排废水量(m3)"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="date" |
| | | label="工业废气排放量(m3)" |
| | | width="150"> |
| | | prop="province" |
| | | label="工业废气排放量(m3)"> |
| | | </el-table-column> |
| | | <el-table-column label="COD(t)"> |
| | | <el-table-column |
| | | prop="province" |
| | | label="累计产生量" |
| | | width="120"> |
| | | label="累计产生量"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="city" |
| | | label="当月产生量" |
| | | width="120"> |
| | | label="当月产生量"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | <el-table-column label="氨氮(t)"> |
| | | <el-table-column |
| | | prop="province" |
| | | label="累计产生量" |
| | | width="120"> |
| | | label="累计产生量"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="city" |
| | | label="当月产生量" |
| | | width="120"> |
| | | label="当月产生量"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | <el-table-column label="二氧化硫(t)"> |
| | | <el-table-column |
| | | prop="province" |
| | | label="累计产生量" |
| | | width="120"> |
| | | label="累计产生量"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="city" |
| | | label="当月产生量" |
| | | width="120"> |
| | | label="当月产生量"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | <el-table-column label="氮氧化物(t)"> |
| | | <el-table-column |
| | | prop="province" |
| | | label="累计产生量" |
| | | width="120"> |
| | | label="累计产生量"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="city" |
| | | label="当月产生量" |
| | | width="120"> |
| | | label="当月产生量"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | <el-table-column label="VOCs(t)"> |
| | | <el-table-column |
| | | prop="province" |
| | | label="累计产生量" |
| | | width="120"> |
| | | label="累计产生量"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="city" |
| | | label="当月产生量" |
| | | width="120"> |
| | | label="当月产生量"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | <el-table-column label="固废(t)"> |
| | | <el-table-column |
| | | prop="province" |
| | | label="累计产生量" |
| | | width="120"> |
| | | label="累计产生量"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="city" |
| | | label="当月产生量" |
| | | width="120"> |
| | | label="当月产生量"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | </el-table></el-tab-pane> |
| | |
| | | style="width: 100%" |
| | | max-height="250"> |
| | | <el-table-column |
| | | fixed |
| | | type="index" |
| | | label="序号"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="date" |
| | | label="企业名称" |
| | | width="150"> |
| | | label="企业名称"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="name" |
| | | label="废水达标率" |
| | | width="120"> |
| | | label="废水达标率"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="province" |
| | | label="名次" |
| | | width="120"> |
| | | label="名次"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="city" |
| | | label="废气达标率" |
| | | width="120"> |
| | | label="废气达标率"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | label="名次" |
| | | width="300"> |
| | | label="名次"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="zip" |
| | | label="传输率" |
| | | width="120"> |
| | | label="传输率"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="zip" |
| | | label="名次" |
| | | width="120"> |
| | | label="名次"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="zip" |
| | | label="设备完好率" |
| | | width="120"> |
| | | label="设备完好率"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="zip" |
| | | label="排名" |
| | | width="120"> |
| | | label="排名"> |
| | | </el-table-column> |
| | | </el-table></el-tab-pane> |
| | | <el-tab-pane label="排放点排名" name="third"><el-table |
| | | :data="tableData" |
| | | style="width: 100%" |
| | | max-height="250"> |
| | | :data="tableData"> |
| | | <el-table-column |
| | | fixed |
| | | type="index" |
| | | label="序号"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="date" |
| | | label="排放点名称" |
| | | width="150"> |
| | | label="排放点名称"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="name" |
| | | label="排放类型" |
| | | width="120"> |
| | | label="排放类型"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="province" |
| | | label="达标率" |
| | | width="120"> |
| | | label="达标率"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="city" |
| | | label="名次" |
| | | width="120"> |
| | | label="名次"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="address" |
| | | label="传输率" |
| | | width="300"> |
| | | label="传输率"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="zip" |
| | | label="名次" |
| | | width="120"> |
| | | label="名次"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="zip" |
| | | label="设备完好率" |
| | | width="120"> |
| | | label="设备完好率"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="zip" |
| | | label="名次" |
| | | width="120"> |
| | | label="名次"> |
| | | </el-table-column> |
| | | </el-table></el-tab-pane> |
| | | </el-tabs> |
| | |
| | | return { |
| | | activeName: 'first', |
| | | tableData: [{ |
| | | date: '2016-05-03', |
| | | name: '王小虎', |
| | | province: '上海', |
| | | city: '普陀区', |
| | | address: '上海市普陀区金沙江路 1518 弄', |
| | | date: '集团公司', |
| | | name: '35', |
| | | province: '23', |
| | | city: '11', |
| | | address: 235, |
| | | zip: 23 |
| | | }, { |
| | | date: '天津石化', |
| | | name: 32, |
| | | province: 33, |
| | | city: 44, |
| | | address: 53, |
| | | zip: 200333 |
| | | }, { |
| | | date: '2016-05-02', |
| | | name: '王小虎', |
| | | province: '上海', |
| | | city: '普陀区', |
| | | address: '上海市普陀区金沙江路 1518 弄', |
| | | zip: 200333 |
| | | }, { |
| | | date: '2016-05-04', |
| | | name: '王小虎', |
| | | province: '上海', |
| | | city: '普陀区', |
| | | address: '上海市普陀区金沙江路 1518 弄', |
| | | zip: 200333 |
| | | }, { |
| | | date: '2016-05-01', |
| | | name: '王小虎', |
| | | province: '上海', |
| | | city: '普陀区', |
| | | address: '上海市普陀区金沙江路 1518 弄', |
| | | zip: 200333 |
| | | }, { |
| | | date: '2016-05-08', |
| | | name: '王小虎', |
| | | province: '上海', |
| | | city: '普陀区', |
| | | address: '上海市普陀区金沙江路 1518 弄', |
| | | zip: 200333 |
| | | }, { |
| | | date: '2016-05-06', |
| | | name: '王小虎', |
| | | province: '上海', |
| | | city: '普陀区', |
| | | address: '上海市普陀区金沙江路 1518 弄', |
| | | zip: 200333 |
| | | }, { |
| | | date: '2016-05-07', |
| | | name: '王小虎', |
| | | province: '上海', |
| | | city: '普陀区', |
| | | address: '上海市普陀区金沙江路 1518 弄', |
| | | date: '济南炼化', |
| | | name: 35, |
| | | province: 13, |
| | | city: 33, |
| | | address: 44, |
| | | zip: 200333 |
| | | }] |
| | | } |
| | |
| | | <template> |
| | | <el-tabs v-model="activeName"> |
| | | <el-tab-pane label="实时统计" name="first"> |
| | | <el-scrollbar style="width:100%"> |
| | | <el-table |
| | | :data="tableData" |
| | | style="width: 100%"> |
| | | :data="tableData"> |
| | | <el-table-column |
| | | prop="date" |
| | | label="企业名称" |
| | | width="150"> |
| | | label="企业名称"> |
| | | </el-table-column> |
| | | <el-table-column label="废水(个)"> |
| | | <el-table-column |
| | | prop="name" |
| | | label="预警" |
| | | width="120"> |
| | | label="预警"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="name" |
| | | label="报警" |
| | | width="120"> |
| | | label="报警"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | <el-table-column label="废气(个)"> |
| | | <el-table-column |
| | | prop="name" |
| | | label="预警" |
| | | width="120"> |
| | | label="预警"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="name" |
| | | label="报警" |
| | | width="120"> |
| | | label="报警"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | <el-table-column label="固废(个)"> |
| | | <el-table-column |
| | | prop="name" |
| | | label="预警" |
| | | width="120"> |
| | | label="预警"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | <el-table-column label="硫化氢(个)"> |
| | | <el-table-column |
| | | prop="name" |
| | | label="预警" |
| | | width="120"> |
| | | label="预警"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | <el-table-column label="可燃气体(个)"> |
| | | <el-table-column |
| | | prop="name" |
| | | label="预警" |
| | | width="120"> |
| | | label="预警"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-scrollbar> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="当月统计" name="second"> |
| | | <el-table |
| | | :data="tableData" |
| | | style="width: 100%"> |
| | | :data="tableData"> |
| | | <el-table-column |
| | | prop="date" |
| | | label="企业名称" |
| | | width="150"> |
| | | label="企业名称"> |
| | | </el-table-column> |
| | | <el-table-column label="废水(个)"> |
| | | <el-table-column |
| | | prop="name" |
| | | label="预警" |
| | | width="120"> |
| | | label="预警"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="name" |
| | | label="报警" |
| | | width="120"> |
| | | label="报警"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | <el-table-column label="废气(个)"> |
| | | <el-table-column |
| | | prop="name" |
| | | label="预警" |
| | | width="120"> |
| | | label="预警"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="name" |
| | | label="报警" |
| | | width="120"> |
| | | label="报警"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | <el-table-column label="固废(个)"> |
| | | <el-table-column |
| | | prop="name" |
| | | label="预警" |
| | | width="120"> |
| | | label="预警"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | <el-table-column label="硫化氢(个)"> |
| | | <el-table-column |
| | | prop="name" |
| | | label="预警" |
| | | width="120"> |
| | | label="预警"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | <el-table-column label="可燃气体(个)"> |
| | | <el-table-column |
| | | prop="name" |
| | | label="预警" |
| | | width="120"> |
| | | label="预警"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="上月统计" name="third"> |
| | | <el-table |
| | | :data="tableData" |
| | | style="width: 100%"> |
| | | :data="tableData"> |
| | | <el-table-column |
| | | prop="date" |
| | | label="企业名称" |
| | | width="150"> |
| | | label="企业名称"> |
| | | </el-table-column> |
| | | <el-table-column label="废水(个)"> |
| | | <el-table-column |
| | | prop="name" |
| | | label="预警" |
| | | width="120"> |
| | | label="预警"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="name" |
| | | label="报警" |
| | | width="120"> |
| | | label="报警"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | <el-table-column label="废气(个)"> |
| | | <el-table-column |
| | | prop="name" |
| | | label="预警" |
| | | width="120"> |
| | | label="预警"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="name" |
| | | label="报警" |
| | | width="120"> |
| | | label="报警"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | <el-table-column label="固废(个)"> |
| | | <el-table-column |
| | | prop="name" |
| | | label="预警" |
| | | width="120"> |
| | | label="预警"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | <el-table-column label="硫化氢(个)"> |
| | | <el-table-column |
| | | prop="name" |
| | | label="预警" |
| | | width="120"> |
| | | label="预警"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | <el-table-column label="可燃气体(个)"> |
| | | <el-table-column |
| | | prop="name" |
| | | label="预警" |
| | | width="120"> |
| | | label="预警"> |
| | | </el-table-column> |
| | | </el-table-column> |
| | | </el-table> |
| | |
| | | return { |
| | | activeName: 'first', |
| | | tableData: [{ |
| | | date: '2016-05-03', |
| | | name: '王小虎', |
| | | province: '上海', |
| | | city: '普陀区', |
| | | address: '上海市普陀区金沙江路 1518 弄', |
| | | zip: 200333 |
| | | date: '集团公司', |
| | | name: 1, |
| | | province: 1, |
| | | city: 0, |
| | | address: 1, |
| | | zip: 0 |
| | | }, { |
| | | date: '2016-05-02', |
| | | name: '王小虎', |
| | | province: '上海', |
| | | city: '普陀区', |
| | | address: '上海市普陀区金沙江路 1518 弄', |
| | | zip: 200333 |
| | | date: '天津石化', |
| | | name: 1, |
| | | province: 0, |
| | | city: 1, |
| | | address: 1, |
| | | zip: 2 |
| | | }, { |
| | | date: '2016-05-04', |
| | | name: '王小虎', |
| | | province: '上海', |
| | | city: '普陀区', |
| | | address: '上海市普陀区金沙江路 1518 弄', |
| | | zip: 200333 |
| | | date: 'XXX炼化', |
| | | name: 1, |
| | | province: 2, |
| | | city: 0, |
| | | address: 0, |
| | | zip: 1 |
| | | }, { |
| | | date: '2016-05-01', |
| | | name: '王小虎', |
| | | province: '上海', |
| | | city: '普陀区', |
| | | address: '上海市普陀区金沙江路 1518 弄', |
| | | zip: 200333 |
| | | }, { |
| | | date: '2016-05-08', |
| | | name: '王小虎', |
| | | province: '上海', |
| | | city: '普陀区', |
| | | address: '上海市普陀区金沙江路 1518 弄', |
| | | zip: 200333 |
| | | }, { |
| | | date: '2016-05-06', |
| | | name: '王小虎', |
| | | province: '上海', |
| | | city: '普陀区', |
| | | address: '上海市普陀区金沙江路 1518 弄', |
| | | zip: 200333 |
| | | }, { |
| | | date: '2016-05-07', |
| | | name: '王小虎', |
| | | province: '上海', |
| | | city: '普陀区', |
| | | address: '上海市普陀区金沙江路 1518 弄', |
| | | zip: 200333 |
| | | date: 'XXX炼化2', |
| | | name: 1, |
| | | province: 2, |
| | | city: 0, |
| | | address: 0, |
| | | zip: 1 |
| | | }] |
| | | } |
| | | } |