#add message
This commit is contained in:
parent
8462eccc1f
commit
6af5d7f21a
|
|
@ -1,5 +1,5 @@
|
||||||
const baseURL = 'http://210.77.68.250:8081'
|
// const baseURL = 'http://210.77.68.250:8081'
|
||||||
// const baseURL = 'http://127.0.0.1:8000'
|
const baseURL = 'http://127.0.0.1:8000'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
baseURL
|
baseURL
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col style="height: 50px;position: absolute;z-index: 15;background-color: rgba(0,0,0,.0.6)" :xs="16" :sm="16" :md="16" :lg="16" :xl="16" :offset="4">
|
<el-col style="height: 50px;position: absolute;z-index: 15;background-color: rgba(0,0,0,0.6)" :xs="16" :sm="16" :md="16" :lg="16" :xl="16" :offset="4">
|
||||||
<!-- <div class="navlogo">-->
|
<!-- <div class="navlogo">-->
|
||||||
<el-col style="height: 50px;" :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
<el-col style="height: 50px;" :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
|
||||||
<router-link to="/" style="color: black">
|
<router-link to="/" style="color: black">
|
||||||
|
|
@ -33,7 +33,7 @@
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4" class="pro1" @mouseover.native="lineenter7" @mouseout.native="lineout7" v-if="jurisdiction === 0 || jurisdiction === 1 || jurisdiction === 2 || jurisdiction === 3">
|
<el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4" class="pro1" @mouseover.native="lineenter7" @mouseout.native="lineout7" v-if="jurisdiction === 0 || jurisdiction === 1 || jurisdiction === 2 || jurisdiction === 3">
|
||||||
<router-link class="routerlink" to="/remote/sensing/retrieval">遥感反演</router-link>
|
<router-link class="routerlink" to="/remote/sensing/retrieval">遥感反演</router-link>
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-show="linestatus7" class="proline"></el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="proline"></el-col>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4" class="pro1 sj" @mouseover.native="lineenter6" @mouseout.native="lineout6" v-if="jurisdiction === 0 || jurisdiction === 1 || jurisdiction === 2 || jurisdiction === 3">
|
<el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4" class="pro1 sj" @mouseover.native="lineenter6" @mouseout.native="lineout6" v-if="jurisdiction === 0 || jurisdiction === 1 || jurisdiction === 2 || jurisdiction === 3">
|
||||||
数据管理
|
数据管理
|
||||||
|
|
@ -294,7 +294,7 @@ export default {
|
||||||
.nav {
|
.nav {
|
||||||
/*width: 1366px;*/
|
/*width: 1366px;*/
|
||||||
height: 50px;
|
height: 50px;
|
||||||
background-color: rgba(0,0,0,.0.6);
|
background-color: rgba(0,0,0,.6);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 15;
|
z-index: 15;
|
||||||
/*border-bottom: 1px solid #14cfb2;*/
|
/*border-bottom: 1px solid #14cfb2;*/
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,174 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="vue-simple-progress-text" :style="text_style" v-if="text.length > 0 && textPosition == 'top'">{{text}}</div>
|
||||||
|
<div class="vue-simple-progress" :style="progress_style">
|
||||||
|
<div class="vue-simple-progress-text" :style="text_style" v-if="text.length > 0 && textPosition == 'middle'">{{text}}</div>
|
||||||
|
<div style="position: relative; left: -9999px" :style="text_style" v-if="text.length > 0 && textPosition == 'inside'">{{text}}</div>
|
||||||
|
<div class="vue-simple-progress-bar" :style="bar_style">
|
||||||
|
<div :style="text_style" v-if="text.length > 0 && textPosition == 'inside'">{{text}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="vue-simple-progress-text" :style="text_style" v-if="text.length > 0 && textPosition == 'bottom'">{{text}}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var isNumber = function (n) {
|
||||||
|
return !isNaN(parseFloat(n)) && isFinite(n)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
val: {
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
max: {
|
||||||
|
default: 100
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
// either a number (pixel width/height) or 'tiny', 'small',
|
||||||
|
// 'medium', 'large', 'huge', 'massive' for common sizes
|
||||||
|
default: 3
|
||||||
|
},
|
||||||
|
'bg-color': {
|
||||||
|
type: String,
|
||||||
|
default: '#eee'
|
||||||
|
},
|
||||||
|
'bar-color': {
|
||||||
|
type: String,
|
||||||
|
default: '#2196f3' // match .blue color to Material Design's 'Blue 500' color
|
||||||
|
},
|
||||||
|
'bar-transition': {
|
||||||
|
type: String,
|
||||||
|
default: 'all 0.5s ease'
|
||||||
|
},
|
||||||
|
'bar-border-radius': {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
spacing: {
|
||||||
|
type: Number,
|
||||||
|
default: 4
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
'text-align': {
|
||||||
|
type: String,
|
||||||
|
default: 'center' // 'left', 'right'
|
||||||
|
},
|
||||||
|
'text-position': {
|
||||||
|
type: String,
|
||||||
|
default: 'bottom' // 'bottom', 'top', 'middle', 'inside'
|
||||||
|
},
|
||||||
|
'font-size': {
|
||||||
|
type: Number,
|
||||||
|
default: 13
|
||||||
|
},
|
||||||
|
'text-fg-color': {
|
||||||
|
type: String,
|
||||||
|
default: '#222'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
pct () {
|
||||||
|
var pct = this.val / this.max * 100
|
||||||
|
pct = pct.toFixed(2)
|
||||||
|
return Math.min(pct, this.max)
|
||||||
|
},
|
||||||
|
size_px () {
|
||||||
|
switch (this.size) {
|
||||||
|
case 'tiny': return 2
|
||||||
|
case 'small': return 4
|
||||||
|
case 'medium': return 8
|
||||||
|
case 'large': return 12
|
||||||
|
case 'big': return 16
|
||||||
|
case 'huge': return 32
|
||||||
|
case 'massive': return 64
|
||||||
|
}
|
||||||
|
|
||||||
|
return isNumber(this.size) ? this.size : 32
|
||||||
|
},
|
||||||
|
text_padding () {
|
||||||
|
switch (this.size) {
|
||||||
|
case 'tiny':
|
||||||
|
case 'small':
|
||||||
|
case 'medium':
|
||||||
|
case 'large':
|
||||||
|
case 'big':
|
||||||
|
case 'huge':
|
||||||
|
case 'massive':
|
||||||
|
return Math.min(Math.max(Math.ceil(this.size_px / 8), 3), 12)
|
||||||
|
}
|
||||||
|
|
||||||
|
return isNumber(this.spacing) ? this.spacing : 4
|
||||||
|
},
|
||||||
|
text_font_size () {
|
||||||
|
switch (this.size) {
|
||||||
|
case 'tiny':
|
||||||
|
case 'small':
|
||||||
|
case 'medium':
|
||||||
|
case 'large':
|
||||||
|
case 'big':
|
||||||
|
case 'huge':
|
||||||
|
case 'massive':
|
||||||
|
return Math.min(Math.max(Math.ceil(this.size_px * 1.4), 11), 32)
|
||||||
|
}
|
||||||
|
|
||||||
|
return isNumber(this.fontSize) ? this.fontSize : 13
|
||||||
|
},
|
||||||
|
progress_style () {
|
||||||
|
var style = {
|
||||||
|
background: this.bgColor
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.textPosition === 'middle' || this.textPosition === 'inside') {
|
||||||
|
style.position = 'relative'
|
||||||
|
style['min-height'] = this.size_px + 'px'
|
||||||
|
style['z-index'] = '-2'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.barBorderRadius > 0) {
|
||||||
|
style['border-radius'] = this.barBorderRadius + 'px'
|
||||||
|
}
|
||||||
|
|
||||||
|
return style
|
||||||
|
},
|
||||||
|
bar_style () {
|
||||||
|
var style = {
|
||||||
|
background: this.barColor,
|
||||||
|
width: this.pct + '%',
|
||||||
|
height: this.size_px + 'px',
|
||||||
|
transition: this.barTransition
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.barBorderRadius > 0) {
|
||||||
|
style['border-radius'] = this.barBorderRadius + 'px'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.textPosition === 'middle' || this.textPosition === 'inside') {
|
||||||
|
style.position = 'absolute'
|
||||||
|
style.top = '0'
|
||||||
|
style.height = '100%'
|
||||||
|
style['min-height'] = this.size_px + 'px'
|
||||||
|
style['z-index'] = '-1'
|
||||||
|
}
|
||||||
|
|
||||||
|
return style
|
||||||
|
},
|
||||||
|
text_style () {
|
||||||
|
var style = {
|
||||||
|
color: this.textFgColor,
|
||||||
|
'font-size': this.text_font_size + 'px',
|
||||||
|
'text-align': this.textAlign
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.textPosition === 'top' || this.textPosition === 'middle' || this.textPosition === 'inside') { style['padding-bottom'] = this.text_padding + 'px' }
|
||||||
|
if (this.textPosition === 'bottom' || this.textPosition === 'middle' || this.textPosition === 'inside') { style['padding-top'] = this.text_padding + 'px' }
|
||||||
|
|
||||||
|
return style
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,124 @@
|
||||||
|
<template>
|
||||||
|
<div class="chart" :style="{height:height,width:width}">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import echarts from 'echarts'
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
barObj: {
|
||||||
|
type: Object
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%'
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '150px'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
myChart: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
const _this = this
|
||||||
|
_this.init()
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
_this.myChart.resize()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
beforeDestroy () {
|
||||||
|
if (!this.myChart) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.myChart.dispose()
|
||||||
|
this.myChart = null
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init () {
|
||||||
|
this.drawLine()
|
||||||
|
},
|
||||||
|
drawLine () {
|
||||||
|
const self = this
|
||||||
|
self.myChart = echarts.init(this.$el)
|
||||||
|
self.myChart.clear()
|
||||||
|
const data = self.barObj
|
||||||
|
// 绘制图表
|
||||||
|
self.myChart.setOption({
|
||||||
|
grid: {
|
||||||
|
top: '0',
|
||||||
|
left: '0',
|
||||||
|
bottom: '0',
|
||||||
|
right: '0'
|
||||||
|
},
|
||||||
|
yAxis: [{
|
||||||
|
type: 'category',
|
||||||
|
inverse: true,
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
xAxis: [{
|
||||||
|
type: 'value',
|
||||||
|
axisLabel: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
series: [{
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: data.barWidth,
|
||||||
|
data: data.barData,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
|
||||||
|
offset: 0,
|
||||||
|
color: data.color[0] // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: data.color[1] // 100% 处的颜色
|
||||||
|
}], false),
|
||||||
|
barBorderRadius: data.barWidth / 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: data.barWidth,
|
||||||
|
xAxisIndex: 0,
|
||||||
|
barGap: '-100%',
|
||||||
|
data: [100],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#F5F7F7',
|
||||||
|
barBorderRadius: data.barWidth / 2
|
||||||
|
}
|
||||||
|
},
|
||||||
|
zlevel: -1
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -15,64 +15,60 @@
|
||||||
<div class="yaogan">遥感反演</div>
|
<div class="yaogan">遥感反演</div>
|
||||||
<el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16" :offset="4" style="height: 150px" class="topimg"></el-col>
|
<el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16" :offset="4" style="height: 150px" class="topimg"></el-col>
|
||||||
<el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16" :offset="4" class="gis" style="margin-top: 20px">
|
<el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16" :offset="4" class="gis" style="margin-top: 20px">
|
||||||
<!-- <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3" :offset="1" class="gisleft">-->
|
<el-col :span="3" style="margin-top: 20px">
|
||||||
<!-- <el-tabs :tab-position="tabPosition" style="height: 524px;width: 100%;margin-top: 50px;"-->
|
<p style="margin: 5px"><el-button plain @click="getData('humidity')" size="small">湿度</el-button></p>
|
||||||
<!-- @tab-click="tabClick">-->
|
<p style="margin: 5px"><el-button plain @click="getData('precipitation')" size="small">降水</el-button></p>
|
||||||
<!-- <el-tab-pane style="width: 100%" name="first" label="课题组调查范围"></el-tab-pane>-->
|
<p style="margin: 5px"><el-button plain @click="getData('snowdepth')" size="small">雪深</el-button></p>
|
||||||
<!-- <el-tab-pane style="width: 100%" name="second" label="荒漠植被区域与地带"></el-tab-pane>-->
|
<p style="margin: 5px"><el-button plain @click="getData('temperature')" size="small">气温</el-button></p>
|
||||||
<!-- <el-tab-pane style="width: 100%" name="third" label="荒漠植被数据"></el-tab-pane>-->
|
<p style="margin: 5px"><el-button plain @click="getData('windspeed')" size="small">风速</el-button></p>
|
||||||
<!-- </el-tabs>-->
|
<p style="margin: 5px"><el-button plain @click="getData('surfacetemperature')" size="small">地表温度</el-button></p>
|
||||||
<!-- </el-col>-->
|
<p style="margin: 5px"><el-button plain @click="getData('lc')" size="small">土地利用</el-button></p>
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="realgis">
|
<p style="margin: 5px"><el-button plain @click="getData('soilmoi0_10')" size="small">0-10cm土壤湿度</el-button></p>
|
||||||
|
<p style="margin: 5px"><el-button plain @click="getData('soilmoi10_40')" size="small">10_40cm土壤湿度</el-button></p>
|
||||||
|
<p style="margin: 5px"><el-button plain @click="getData('soilmoi40_100')" size="small">40_100cm土壤湿度</el-button></p>
|
||||||
|
<p style="margin: 5px"><el-button plain @click="getData('soilmoi100_200')" size="small">100_200cm土壤湿度</el-button></p>
|
||||||
|
<p style="margin: 5px"><el-button plain @click="getData('soiltmp0_10')" size="small">0_10cm土壤温度</el-button></p>
|
||||||
|
<p style="margin: 5px"><el-button plain @click="getData('soiltmp10_40')" size="small">10_40cm土壤温度</el-button></p>
|
||||||
|
<p style="margin: 5px"><el-button plain @click="getData('soiltmp40_100')" size="small">40_100cm土壤温度</el-button></p>
|
||||||
|
<p style="margin: 5px"><el-button plain @click="getData('soiltmp100_200')" size="small">100_200cm土壤温度</el-button></p>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="21" class="realgis">
|
||||||
<div id="map">
|
<div id="map">
|
||||||
<div id="popup" class="ol-popup">
|
<div class="legend" style="background-color: white;">
|
||||||
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
|
|
||||||
<div id="popup-content" style="width:200px; height:180px;z-index: 9999;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="legend" v-if="value_show=='0'">
|
|
||||||
<div style="background: white;text-align: center;color: black;width: 380px">图例</div>
|
|
||||||
<img
|
|
||||||
src="http://210.77.68.250:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=30&HEIGHT=20&LAYER=DesertVegetationCommunitySurvey:zhibei&STYLES=hm_zhibei&LEGEND_OPTIONS=columns:2">
|
|
||||||
</div>
|
|
||||||
<div class="legend" v-if="value_show=='1'" style="width: 100px;height: 100px;background-color: whitesmoke;">
|
|
||||||
<div style="background: white;text-align: center;color: black">图例</div>
|
<div style="background: white;text-align: center;color: black">图例</div>
|
||||||
<div style="background: white;text-align: center;color: black;margin-top: 20px">边界</div>
|
<img :src=sr>
|
||||||
<img
|
|
||||||
src="http://210.77.68.250:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=30&HEIGHT=20&LAYER=DesertVegetationCommunitySurvey:keti1&STYLES=hm_keti&LEGEND_OPTIONS=columns:1">
|
|
||||||
</div>
|
|
||||||
<div class="legend" v-if="value_show=='2'">
|
|
||||||
<div style="background: white;text-align: center;color: black">图例</div>
|
|
||||||
<img
|
|
||||||
src="http://210.77.68.250:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=30&HEIGHT=20&LAYER=DesertVegetationCommunitySurvey:diaochadianbushe&STYLES=hm_diaochadianbushe&LEGEND_OPTIONS=columns:1">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
<el-col :span="18" :offset="3">
|
||||||
|
<span v-for="t in tableData" :key="t">
|
||||||
|
<el-button plain size="small" style="margin-top: 5px;margin-left: 5px" @click="getDataDetail( t.name )">{{ t.name }}</el-button>
|
||||||
|
</span>
|
||||||
|
</el-col>
|
||||||
<Footer></Footer>
|
<Footer></Footer>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// import axios from 'axios'
|
|
||||||
import Headernew from '../../../src/components/Headernew.vue'
|
import Headernew from '../../../src/components/Headernew.vue'
|
||||||
import Footer from '../../../src/components/Footer.vue'
|
import Footer from '../../../src/components/Footer.vue'
|
||||||
import 'ol/ol.css'
|
import 'ol/ol.css'
|
||||||
import Map from 'ol/Map'
|
import Map from 'ol/Map'
|
||||||
import View from 'ol/View'
|
import View from 'ol/View'
|
||||||
// import echarts from 'echarts'
|
|
||||||
import XYZ from 'ol/source/XYZ'
|
import XYZ from 'ol/source/XYZ'
|
||||||
// import OlFeature from 'ol/Feature'
|
// import OlFeature from 'ol/Feature'
|
||||||
// import OlGeomPoint from 'ol/geom/Point'
|
// import OlGeomPoint from 'ol/geom/Point'
|
||||||
// import OlLayerVector from 'ol/layer/Vector'
|
// import OlLayerVector from 'ol/layer/Vector'
|
||||||
// import OlSourceVector from 'ol/source/Vector'
|
// import OlSourceVector from 'ol/source/Vector'
|
||||||
import Overlay from 'ol/Overlay'
|
|
||||||
import TileWMS from 'ol/source/TileWMS'
|
import TileWMS from 'ol/source/TileWMS'
|
||||||
// import { Vector as SourceVec, Cluster } from 'ol/source'
|
// import { Vector as SourceVec, Cluster } from 'ol/source'
|
||||||
// import { Feature } from 'ol'
|
// import { Feature } from 'ol'
|
||||||
// import { Point } from 'ol/geom'
|
// import { Point } from 'ol/geom'
|
||||||
// import { Style, Fill, Text, Circle, Stroke } from 'ol/style'
|
// import { Style, Fill, Text, Circle, Stroke } from 'ol/style'
|
||||||
import { Tile as TileLayer } from 'ol/layer'
|
import { Tile as TileLayer } from 'ol/layer'
|
||||||
|
import axios from 'axios'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
Headernew,
|
Headernew,
|
||||||
|
|
@ -80,35 +76,10 @@ export default {
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
username: this.$store.state.token,
|
|
||||||
tabPosition: 'left',
|
|
||||||
map: null,
|
map: null,
|
||||||
findingstask: '',
|
|
||||||
tableData: [],
|
tableData: [],
|
||||||
tableData1: [],
|
tif: '',
|
||||||
marker: '',
|
sr: ''
|
||||||
point: [],
|
|
||||||
species_count: '',
|
|
||||||
findings_count: '',
|
|
||||||
typical_count: '',
|
|
||||||
enforcement_count: '',
|
|
||||||
gis1: false,
|
|
||||||
gis2: false,
|
|
||||||
gis3: false,
|
|
||||||
gis4: false,
|
|
||||||
zhibeiLayer: '',
|
|
||||||
diaochaquhuafenLayer: '',
|
|
||||||
diaochadianbusheLayer: '',
|
|
||||||
value_show: '',
|
|
||||||
guojie: '',
|
|
||||||
currentPage: 1,
|
|
||||||
sizes: [8],
|
|
||||||
total: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
currentPages: 1,
|
|
||||||
sizess: [10],
|
|
||||||
totals: 1,
|
|
||||||
pageSizes: 10
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
|
@ -124,40 +95,13 @@ export default {
|
||||||
],
|
],
|
||||||
view: new View({
|
view: new View({
|
||||||
projection: 'EPSG:4326',
|
projection: 'EPSG:4326',
|
||||||
center: [107.2377, 36.3632],
|
center: [100.2377, 37.2],
|
||||||
zoom: 4.5,
|
zoom: 4.5,
|
||||||
maxZoom: 18
|
maxZoom: 18
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
_this.map.getView().setMaxZoom(18)
|
_this.map.getView().setMaxZoom(18)
|
||||||
_this.map.getView().setMinZoom(3)
|
_this.map.getView().setMinZoom(3)
|
||||||
_this.zhibeiLayer = new TileLayer({
|
|
||||||
source: new TileWMS({
|
|
||||||
// url: layer.url,//地图服务地址:'http://localhost:8080/geoserver/gwc/service/wms'
|
|
||||||
url: 'http://210.77.68.250:8080/geoserver/DesertVegetationCommunitySurvey/wms',
|
|
||||||
params: {
|
|
||||||
LAYERS: 'DesertVegetationCommunitySurvey:zhibei'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
_this.diaochaquhuafenLayer = new TileLayer({
|
|
||||||
source: new TileWMS({
|
|
||||||
// url: layer.url,//地图服务地址:'http://localhost:8080/geoserver/gwc/service/wms'
|
|
||||||
url: 'http://210.77.68.250:8080/geoserver/DesertVegetationCommunitySurvey/wms',
|
|
||||||
params: {
|
|
||||||
LAYERS: 'DesertVegetationCommunitySurvey:keti1'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
_this.diaochadianbusheLayer = new TileLayer({
|
|
||||||
source: new TileWMS({
|
|
||||||
// url: layer.url,//地图服务地址:'http://localhost:8080/geoserver/gwc/service/wms'
|
|
||||||
url: 'http://210.77.68.250:8080/geoserver/DesertVegetationCommunitySurvey/wms',
|
|
||||||
params: {
|
|
||||||
LAYERS: 'DesertVegetationCommunitySurvey:diaochadianbushe'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
_this.guojie = new TileLayer({
|
_this.guojie = new TileLayer({
|
||||||
source: new TileWMS({
|
source: new TileWMS({
|
||||||
// url: layer.url,//地图服务地址:'http://localhost:8080/geoserver/gwc/service/wms'
|
// url: layer.url,//地图服务地址:'http://localhost:8080/geoserver/gwc/service/wms'
|
||||||
|
|
@ -168,36 +112,226 @@ export default {
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
_this.map.addLayer(_this.guojie)
|
_this.map.addLayer(_this.guojie)
|
||||||
var container = document.getElementById('popup')
|
_this.tif = new TileLayer({
|
||||||
var content = document.getElementById('popup-content')
|
source: new TileWMS({
|
||||||
var closer = document.getElementById('popup-closer')
|
// url: layer.url,//地图服务地址:'http://localhost:8080/geoserver/gwc/service/wms'
|
||||||
var overlay = new Overlay(/** @type {olx.OverlayOptions} */ ({
|
url: 'http://210.77.68.250:8080/geoserver/DesertVegetationCommunitySurvey/wms',
|
||||||
element: container
|
params: {
|
||||||
// autoPan: true,
|
LAYERS: 'DesertVegetationCommunitySurvey:200001_Humidity',
|
||||||
// autoPanAnimation: {
|
STYLES: 'DesertVegetationCommunitySurvey:humidity'
|
||||||
// duration: 250
|
|
||||||
// }
|
|
||||||
}))
|
|
||||||
closer.onclick = function () {
|
|
||||||
overlay.setPosition(undefined)
|
|
||||||
closer.blur()
|
|
||||||
return false
|
|
||||||
}
|
}
|
||||||
_this.map.on('click', function (e) {
|
|
||||||
_this.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
|
|
||||||
// var coordinate = getCenter(feature.getGeometry().getExtent())
|
|
||||||
var data = feature.values_.geometry.flatCoordinates
|
|
||||||
var newfeature = feature.values_.features[0].values_.data
|
|
||||||
console.log(newfeature)
|
|
||||||
console.log(data, feature, '5467890')
|
|
||||||
var coordinate = [data[0], data[1]]
|
|
||||||
content.innerHTML = '<code>' + '调查点编号:' + newfeature[0] + '</code><br><code>' + '调查人员:' + newfeature[1] + '</code><br><code>' + '调查时间:' + newfeature[2] + '</code><br><code>' + '地形:' + newfeature[3] + '</code><br><code>' + '坡度:' + newfeature[4] + '</code><br><code>' + '海拔:' + newfeature[5] + '</code><br><code>' + '坡向:' + newfeature[6] + '</code><br><code>' + '地点:' + newfeature[7] + '</code>'
|
|
||||||
overlay.setPosition(coordinate)
|
|
||||||
_this.map.addOverlay(overlay)
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
_this.sr = 'http://210.77.68.250:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=30&HEIGHT=5&LAYER=DesertVegetationCommunitySurvey:200001_Humidity&STYLE=DesertVegetationCommunitySurvey:humidity'
|
||||||
|
_this.map.addLayer(_this.tif)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getData (type) {
|
||||||
|
var _this = this
|
||||||
|
axios({
|
||||||
|
method: 'get',
|
||||||
|
url: this.GLOBAL.baseURL + '/remote/sensing/retrieval/?type=' + type
|
||||||
|
}).then(function (response) {
|
||||||
|
if (response.data.status === '1') {
|
||||||
|
_this.tableData = response.data.tif
|
||||||
|
console.log(_this.tableData)
|
||||||
|
}
|
||||||
|
}).catch(function (error) {
|
||||||
|
console.log(error)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getDataDetail (name) {
|
||||||
|
var _this = this
|
||||||
|
console.log(name)
|
||||||
|
_this.map.removeLayer(this.tif)
|
||||||
|
_this.showData(name)
|
||||||
|
},
|
||||||
|
showData (name) {
|
||||||
|
console.log(name)
|
||||||
|
this.tif = null
|
||||||
|
if (name.indexOf('Humidity') >= 0) {
|
||||||
|
this.tif = new TileLayer({
|
||||||
|
source: new TileWMS({
|
||||||
|
// url: layer.url,//地图服务地址:'http://localhost:8080/geoserver/gwc/service/wms'
|
||||||
|
url: 'http://210.77.68.250:8080/geoserver/DesertVegetationCommunitySurvey/wms',
|
||||||
|
params: {
|
||||||
|
LAYERS: 'DesertVegetationCommunitySurvey:' + name,
|
||||||
|
STYLES: 'DesertVegetationCommunitySurvey:humidity'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.sr = 'http://210.77.68.250:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=30&HEIGHT=5&LAYER=DesertVegetationCommunitySurvey:' + name + '&STYLE=DesertVegetationCommunitySurvey:humidity'
|
||||||
|
} else if (name.indexOf('Precipitation') >= 0) {
|
||||||
|
this.tif = new TileLayer({
|
||||||
|
source: new TileWMS({
|
||||||
|
// url: layer.url,//地图服务地址:'http://localhost:8080/geoserver/gwc/service/wms'
|
||||||
|
url: 'http://210.77.68.250:8080/geoserver/DesertVegetationCommunitySurvey/wms',
|
||||||
|
params: {
|
||||||
|
LAYERS: 'DesertVegetationCommunitySurvey:' + name,
|
||||||
|
STYLES: 'DesertVegetationCommunitySurvey:precipitation'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.sr = 'http://210.77.68.250:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=30&HEIGHT=5&LAYER=DesertVegetationCommunitySurvey:' + name + '&STYLE=DesertVegetationCommunitySurvey:precipitation'
|
||||||
|
} else if (name.indexOf('SnowDepth') >= 0) {
|
||||||
|
this.tif = new TileLayer({
|
||||||
|
source: new TileWMS({
|
||||||
|
// url: layer.url,//地图服务地址:'http://localhost:8080/geoserver/gwc/service/wms'
|
||||||
|
url: 'http://210.77.68.250:8080/geoserver/DesertVegetationCommunitySurvey/wms',
|
||||||
|
params: {
|
||||||
|
LAYERS: 'DesertVegetationCommunitySurvey:' + name,
|
||||||
|
STYLES: 'DesertVegetationCommunitySurvey:snowdepth'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.sr = 'http://210.77.68.250:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=30&HEIGHT=5&LAYER=DesertVegetationCommunitySurvey:' + name + '&STYLE=DesertVegetationCommunitySurvey:snowdepth'
|
||||||
|
} else if (name.indexOf('Temperature') >= 0) {
|
||||||
|
this.tif = new TileLayer({
|
||||||
|
source: new TileWMS({
|
||||||
|
// url: layer.url,//地图服务地址:'http://localhost:8080/geoserver/gwc/service/wms'
|
||||||
|
url: 'http://210.77.68.250:8080/geoserver/DesertVegetationCommunitySurvey/wms',
|
||||||
|
params: {
|
||||||
|
LAYERS: 'DesertVegetationCommunitySurvey:' + name,
|
||||||
|
STYLES: 'DesertVegetationCommunitySurvey:temperature'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.sr = 'http://210.77.68.250:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=30&HEIGHT=5&LAYER=DesertVegetationCommunitySurvey:' + name + '&STYLE=DesertVegetationCommunitySurvey:temperature'
|
||||||
|
} else if (name.indexOf('Windspeed') >= 0) {
|
||||||
|
this.tif = new TileLayer({
|
||||||
|
source: new TileWMS({
|
||||||
|
// url: layer.url,//地图服务地址:'http://localhost:8080/geoserver/gwc/service/wms'
|
||||||
|
url: 'http://210.77.68.250:8080/geoserver/DesertVegetationCommunitySurvey/wms',
|
||||||
|
params: {
|
||||||
|
LAYERS: 'DesertVegetationCommunitySurvey:' + name,
|
||||||
|
STYLES: 'DesertVegetationCommunitySurvey:windspeed'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.sr = 'http://210.77.68.250:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=30&HEIGHT=5&LAYER=DesertVegetationCommunitySurvey:' + name + '&STYLE=DesertVegetationCommunitySurvey:windspeed'
|
||||||
|
} else if (name.indexOf('SurfaceTemperature') >= 0) {
|
||||||
|
this.tif = new TileLayer({
|
||||||
|
source: new TileWMS({
|
||||||
|
// url: layer.url,//地图服务地址:'http://localhost:8080/geoserver/gwc/service/wms'
|
||||||
|
url: 'http://210.77.68.250:8080/geoserver/DesertVegetationCommunitySurvey/wms',
|
||||||
|
params: {
|
||||||
|
LAYERS: 'DesertVegetationCommunitySurvey:' + name,
|
||||||
|
STYLES: 'DesertVegetationCommunitySurvey:windspeed'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.sr = 'http://210.77.68.250:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=30&HEIGHT=5&LAYER=DesertVegetationCommunitySurvey:' + name + '&STYLE=DesertVegetationCommunitySurvey:windspeed'
|
||||||
|
} else if (name.indexOf('SoilMoi0_10') >= 0) {
|
||||||
|
this.tif = new TileLayer({
|
||||||
|
source: new TileWMS({
|
||||||
|
// url: layer.url,//地图服务地址:'http://localhost:8080/geoserver/gwc/service/wms'
|
||||||
|
url: 'http://210.77.68.250:8080/geoserver/DesertVegetationCommunitySurvey/wms',
|
||||||
|
params: {
|
||||||
|
LAYERS: 'DesertVegetationCommunitySurvey:' + name,
|
||||||
|
STYLES: 'DesertVegetationCommunitySurvey:soilmoi0_10'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.sr = 'http://210.77.68.250:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=30&HEIGHT=5&LAYER=DesertVegetationCommunitySurvey:' + name + '&STYLE=DesertVegetationCommunitySurvey:soilmoi0_10'
|
||||||
|
} else if (name.indexOf('SoilMoi10_40') >= 0) {
|
||||||
|
this.tif = new TileLayer({
|
||||||
|
source: new TileWMS({
|
||||||
|
// url: layer.url,//地图服务地址:'http://localhost:8080/geoserver/gwc/service/wms'
|
||||||
|
url: 'http://210.77.68.250:8080/geoserver/DesertVegetationCommunitySurvey/wms',
|
||||||
|
params: {
|
||||||
|
LAYERS: 'DesertVegetationCommunitySurvey:' + name,
|
||||||
|
STYLES: 'DesertVegetationCommunitySurvey:soilmoi10_40'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.sr = 'http://210.77.68.250:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=30&HEIGHT=5&LAYER=DesertVegetationCommunitySurvey:' + name + '&STYLE=DesertVegetationCommunitySurvey:soilmoi10_40'
|
||||||
|
} else if (name.indexOf('SoilMoi40_100') >= 0) {
|
||||||
|
this.tif = new TileLayer({
|
||||||
|
source: new TileWMS({
|
||||||
|
// url: layer.url,//地图服务地址:'http://localhost:8080/geoserver/gwc/service/wms'
|
||||||
|
url: 'http://210.77.68.250:8080/geoserver/DesertVegetationCommunitySurvey/wms',
|
||||||
|
params: {
|
||||||
|
LAYERS: 'DesertVegetationCommunitySurvey:' + name,
|
||||||
|
STYLES: 'DesertVegetationCommunitySurvey:soilmoi40_100'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.sr = 'http://210.77.68.250:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=30&HEIGHT=5&LAYER=DesertVegetationCommunitySurvey:' + name + '&STYLE=DesertVegetationCommunitySurvey:soilmoi40_100'
|
||||||
|
} else if (name.indexOf('SoilMoi100_200') >= 0) {
|
||||||
|
this.tif = new TileLayer({
|
||||||
|
source: new TileWMS({
|
||||||
|
// url: layer.url,//地图服务地址:'http://localhost:8080/geoserver/gwc/service/wms'
|
||||||
|
url: 'http://210.77.68.250:8080/geoserver/DesertVegetationCommunitySurvey/wms',
|
||||||
|
params: {
|
||||||
|
LAYERS: 'DesertVegetationCommunitySurvey:' + name,
|
||||||
|
STYLES: 'DesertVegetationCommunitySurvey:soilmoi100_200'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.sr = 'http://210.77.68.250:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=30&HEIGHT=5&LAYER=DesertVegetationCommunitySurvey:' + name + '&STYLE=DesertVegetationCommunitySurvey:soilmoi100_200'
|
||||||
|
} else if (name.indexOf('soilTMP0_10') >= 0) {
|
||||||
|
this.tif = new TileLayer({
|
||||||
|
source: new TileWMS({
|
||||||
|
// url: layer.url,//地图服务地址:'http://localhost:8080/geoserver/gwc/service/wms'
|
||||||
|
url: 'http://210.77.68.250:8080/geoserver/DesertVegetationCommunitySurvey/wms',
|
||||||
|
params: {
|
||||||
|
LAYERS: 'DesertVegetationCommunitySurvey:' + name,
|
||||||
|
STYLES: 'DesertVegetationCommunitySurvey:soiltemp0_10'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.sr = 'http://210.77.68.250:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=30&HEIGHT=5&LAYER=DesertVegetationCommunitySurvey:' + name + '&STYLE=DesertVegetationCommunitySurvey:soiltemp0_10'
|
||||||
|
} else if (name.indexOf('soilTMP10_40') >= 0) {
|
||||||
|
this.tif = new TileLayer({
|
||||||
|
source: new TileWMS({
|
||||||
|
// url: layer.url,//地图服务地址:'http://localhost:8080/geoserver/gwc/service/wms'
|
||||||
|
url: 'http://210.77.68.250:8080/geoserver/DesertVegetationCommunitySurvey/wms',
|
||||||
|
params: {
|
||||||
|
LAYERS: 'DesertVegetationCommunitySurvey:' + name,
|
||||||
|
STYLES: 'DesertVegetationCommunitySurvey:soiltemp0_10'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.sr = 'http://210.77.68.250:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=30&HEIGHT=5&LAYER=DesertVegetationCommunitySurvey:' + name + '&STYLE=DesertVegetationCommunitySurvey:soiltemp0_10'
|
||||||
|
} else if (name.indexOf('soilTMP40_100') >= 0) {
|
||||||
|
this.tif = new TileLayer({
|
||||||
|
source: new TileWMS({
|
||||||
|
// url: layer.url,//地图服务地址:'http://localhost:8080/geoserver/gwc/service/wms'
|
||||||
|
url: 'http://210.77.68.250:8080/geoserver/DesertVegetationCommunitySurvey/wms',
|
||||||
|
params: {
|
||||||
|
LAYERS: 'DesertVegetationCommunitySurvey:' + name,
|
||||||
|
STYLES: 'DesertVegetationCommunitySurvey:soiltemp0_10'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.sr = 'http://210.77.68.250:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=30&HEIGHT=5&LAYER=DesertVegetationCommunitySurvey:' + name + '&STYLE=DesertVegetationCommunitySurvey:soiltemp0_10'
|
||||||
|
} else if (name.indexOf('soilTMP100_200') >= 0) {
|
||||||
|
this.tif = new TileLayer({
|
||||||
|
source: new TileWMS({
|
||||||
|
// url: layer.url,//地图服务地址:'http://localhost:8080/geoserver/gwc/service/wms'
|
||||||
|
url: 'http://210.77.68.250:8080/geoserver/DesertVegetationCommunitySurvey/wms',
|
||||||
|
params: {
|
||||||
|
LAYERS: 'DesertVegetationCommunitySurvey:' + name,
|
||||||
|
STYLES: 'DesertVegetationCommunitySurvey:soiltemp0_10'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.sr = 'http://210.77.68.250:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=30&HEIGHT=5&LAYER=DesertVegetationCommunitySurvey:' + name + '&STYLE=DesertVegetationCommunitySurvey:soiltemp0_10'
|
||||||
|
} else if (name.indexOf('LC') >= 0) {
|
||||||
|
this.tif = new TileLayer({
|
||||||
|
source: new TileWMS({
|
||||||
|
// url: layer.url,//地图服务地址:'http://localhost:8080/geoserver/gwc/service/wms'
|
||||||
|
url: 'http://210.77.68.250:8080/geoserver/DesertVegetationCommunitySurvey/wms',
|
||||||
|
params: {
|
||||||
|
LAYERS: 'DesertVegetationCommunitySurvey:' + name,
|
||||||
|
STYLES: 'DesertVegetationCommunitySurvey:lc'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
this.sr = 'http://210.77.68.250:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=30&HEIGHT=5&LAYER=DesertVegetationCommunitySurvey:' + name + '&STYLE=DesertVegetationCommunitySurvey:lc'
|
||||||
|
}
|
||||||
|
this.map.addLayer(this.tif)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -629,4 +763,11 @@ export default {
|
||||||
text-align: left !important;
|
text-align: left !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
|
.legend {
|
||||||
|
position: absolute;
|
||||||
|
left: 78%;
|
||||||
|
top:350px;
|
||||||
|
opacity: 0.6;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -52,9 +52,38 @@
|
||||||
<!-- 分页 -->
|
<!-- 分页 -->
|
||||||
<el-pagination style="text-align: center;padding: 10px 0 10px;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="sizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total='total'>
|
<el-pagination style="text-align: center;padding: 10px 0 10px;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="sizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total='total'>
|
||||||
</el-pagination>
|
</el-pagination>
|
||||||
<!-- </el-col>-->
|
|
||||||
<!-- </template>-->
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box">
|
||||||
|
<div class="echarttitle"><p class="ecshujv">数据统计</p></div>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="10"><div class="grid-content bg-purple">
|
||||||
|
<el-col :span="24" class="echarts1" id="findingsEcharts-special" style="background-color: #ffffff;padding-top: 40px">
|
||||||
|
<div class="font_title">课题组调查点数据入库进度</div>
|
||||||
|
<template>
|
||||||
|
<div class="land_co land-wrap">
|
||||||
|
<div class="land_lyxz">
|
||||||
|
<jump name="不动产登记情况" :index="index"></jump>
|
||||||
|
<div class="content">
|
||||||
|
<div v-for="(item,index) in barList" :key="index" class="bar-div">
|
||||||
|
<div class="bar-title-div">
|
||||||
|
<span class="bar-title">{{item.title}}</span>
|
||||||
|
<span class="bar-val">{{item.value}}</span>
|
||||||
|
<span class="bar-ratio">{{item.ratio}}</span>
|
||||||
|
</div>
|
||||||
|
<bar-progress :bar-obj="item.barObj" height="20px"></bar-progress>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-col>
|
||||||
|
</div></el-col>
|
||||||
|
<el-col :span="14"><div class="grid-content bg-purple-light">
|
||||||
|
<el-col :span="24" class="echarts2" id="sampletypeEcharts-special" style="background-color: #ffffff;padding-top: 40px">
|
||||||
|
</el-col>
|
||||||
|
</div></el-col>
|
||||||
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
<Footer></Footer>
|
<Footer></Footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -64,10 +93,18 @@
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import Headernew from '../../../src/components/Headernew.vue'
|
import Headernew from '../../../src/components/Headernew.vue'
|
||||||
import Footer from '../../../src/components/Footer.vue'
|
import Footer from '../../../src/components/Footer.vue'
|
||||||
|
import echarts from 'echarts'
|
||||||
|
import barProgress from '../../../src/components/barProgress'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
Headernew,
|
Headernew,
|
||||||
Footer
|
Footer,
|
||||||
|
barProgress
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
index: {
|
||||||
|
default: 1
|
||||||
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
|
@ -77,10 +114,17 @@ export default {
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
sizes: [10],
|
sizes: [10],
|
||||||
total: 1,
|
total: 1,
|
||||||
pageSize: 10
|
pageSize: 10,
|
||||||
|
fingPush: [],
|
||||||
|
sample: '',
|
||||||
|
pieDatasample: [],
|
||||||
|
legendDatasample: [],
|
||||||
|
findings: '',
|
||||||
|
findingstask: [],
|
||||||
|
barList: this.barList
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created: function () {
|
mounted () {
|
||||||
var _this = this
|
var _this = this
|
||||||
axios({
|
axios({
|
||||||
method: 'post',
|
method: 'post',
|
||||||
|
|
@ -91,15 +135,39 @@ export default {
|
||||||
}).then(function (response) {
|
}).then(function (response) {
|
||||||
_this.special = response.data.special
|
_this.special = response.data.special
|
||||||
_this.jurisdiction = response.data.jurisdiction
|
_this.jurisdiction = response.data.jurisdiction
|
||||||
// _this.special.forEach(item => {
|
|
||||||
// _this.total = item.count
|
|
||||||
// console.log(_this.total)
|
|
||||||
// })
|
|
||||||
_this.total = response.data.count
|
_this.total = response.data.count
|
||||||
console.log(_this.special)
|
console.log(_this.special)
|
||||||
}).catch(function (error) {
|
}).catch(function (error) {
|
||||||
console.log(error)
|
console.log(error)
|
||||||
})
|
})
|
||||||
|
axios({
|
||||||
|
method: 'get',
|
||||||
|
url: this.GLOBAL.baseURL + '/special/findings?username=' + _this.username
|
||||||
|
}).then(function (response) {
|
||||||
|
_this.barList = response.data.findingstask
|
||||||
|
}).catch(function (error) {
|
||||||
|
console.log(error)
|
||||||
|
})
|
||||||
|
axios({
|
||||||
|
method: 'get',
|
||||||
|
url: this.GLOBAL.baseURL + '/special/sample/type/?username=' + _this.username
|
||||||
|
}).then(function (response) {
|
||||||
|
// console.log(response)
|
||||||
|
_this.product_list = response.data.product_list
|
||||||
|
_this.findings_list = response.data.findings_list
|
||||||
|
_this.sampletrees_list = response.data.sampletrees_list
|
||||||
|
_this.samplebush_list = response.data.samplebush_list
|
||||||
|
_this.sampleherbal_list = response.data.sampleherbal_list
|
||||||
|
_this.simplesoil_list = response.data.simplesoil_list
|
||||||
|
_this.barcodes_list = response.data.barcodes_list
|
||||||
|
_this.landuse_list = response.data.landuse_list
|
||||||
|
_this.weather_list = response.data.weather_list
|
||||||
|
_this.Sampletype()
|
||||||
|
// console.log(_this.findings_list)
|
||||||
|
}).catch(function (error) {
|
||||||
|
// console.log(error)
|
||||||
|
console.log(error)
|
||||||
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleSizeChange (val) {
|
handleSizeChange (val) {
|
||||||
|
|
@ -149,6 +217,225 @@ export default {
|
||||||
},
|
},
|
||||||
deletecacel () {
|
deletecacel () {
|
||||||
window.location.reload()
|
window.location.reload()
|
||||||
|
},
|
||||||
|
format (percentage) {
|
||||||
|
return '已完成' + `${percentage}%`
|
||||||
|
},
|
||||||
|
Findings () {
|
||||||
|
var _this = this // 百分比进度条 echarts
|
||||||
|
// 基于准备好的dom，初始化echarts实例
|
||||||
|
const findingsChart = echarts.init(document.getElementById('findingsEcharts-special'))
|
||||||
|
findingsChart.setOption({
|
||||||
|
title: {
|
||||||
|
text: '调查点数量比例图'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '5',
|
||||||
|
top: '0',
|
||||||
|
right: '5',
|
||||||
|
bottom: '0',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
splitLine: { show: false },
|
||||||
|
axisLabel: { show: false },
|
||||||
|
axisTick: { show: false },
|
||||||
|
axisLine: { show: false }
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
axisTick: { show: false },
|
||||||
|
axisLine: { show: false },
|
||||||
|
axisLabel: {
|
||||||
|
color: 'black',
|
||||||
|
fontSize: 13,
|
||||||
|
padding: [0, 0, 0, 0],
|
||||||
|
show: true,
|
||||||
|
formatter: function (params) { // 文字换行
|
||||||
|
var newParamsName = ''
|
||||||
|
var paramsNameNumber = params.length
|
||||||
|
var provideNumber = 17
|
||||||
|
var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
|
||||||
|
if (paramsNameNumber > provideNumber) {
|
||||||
|
for (var p = 0; p < rowNumber; p++) {
|
||||||
|
var tempStr = ''
|
||||||
|
var start = p * provideNumber
|
||||||
|
var end = start + provideNumber
|
||||||
|
if (p === rowNumber - 1) {
|
||||||
|
tempStr = params.substring(start, paramsNameNumber)
|
||||||
|
} else {
|
||||||
|
tempStr = params.substring(start, end) + '\n'
|
||||||
|
}
|
||||||
|
newParamsName += tempStr
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
newParamsName = params
|
||||||
|
}
|
||||||
|
return newParamsName
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: _this.legendDatafindingstask
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '%' + '(已完成)',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 19,
|
||||||
|
data: _this.pieDatafindingstask,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'center',
|
||||||
|
offset: [50, -20],
|
||||||
|
formatter: '{c}{a}',
|
||||||
|
color: 'black',
|
||||||
|
fontSize: 14
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
barBorderRadius: 10,
|
||||||
|
color: '#00ff00'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
zlevel: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '进度条背景',
|
||||||
|
type: 'bar',
|
||||||
|
barGap: '-100%',
|
||||||
|
barWidth: 19,
|
||||||
|
data: [100, 100, 100, 100, 100],
|
||||||
|
color: '#ff0000',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
barBorderRadius: 10
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
// 自适应图表
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
findingsChart.resize()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
Sampletype () {
|
||||||
|
var _this = this // 折线，柱状图
|
||||||
|
// // 基于准备好的dom，初始化echarts实例
|
||||||
|
const myChart = echarts.init(document.getElementById('sampletypeEcharts-special'))
|
||||||
|
myChart.setOption({
|
||||||
|
title: {
|
||||||
|
text: '课题组数据量图'
|
||||||
|
},
|
||||||
|
color: ['#69d3d3', '#72d389', '#fbda66', '#f57c90', '#f69b6f', '#4cabce'],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
// 使柱状图颜色势力竖着排
|
||||||
|
y: '10px',
|
||||||
|
data: _this.product_list
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: true,
|
||||||
|
orient: 'vertical',
|
||||||
|
left: 'right',
|
||||||
|
top: 'bottom',
|
||||||
|
feature: {
|
||||||
|
mark: { show: true },
|
||||||
|
dataView: {
|
||||||
|
show: true,
|
||||||
|
readOnly: false
|
||||||
|
},
|
||||||
|
magicType: {
|
||||||
|
show: true,
|
||||||
|
type: ['line', 'bar', 'stack', 'tiled']
|
||||||
|
},
|
||||||
|
restore: { show: true },
|
||||||
|
saveAsImage: { show: true }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
axisTick: { show: false },
|
||||||
|
// data: ['调查点', '乔木', '灌木', '草本', '土壤', 'DNA', '土地利用', '气象']
|
||||||
|
// data: ['调查点', '乔木', '灌木', '草本', '土壤', 'DNA']
|
||||||
|
data: ['调查点', '乔木', '灌木', '草本', '土壤']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
grid: {
|
||||||
|
top: '160px',
|
||||||
|
height: '230px'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: _this.product_list[0],
|
||||||
|
type: 'bar',
|
||||||
|
// barWidth: 8,
|
||||||
|
barGap: '10%',
|
||||||
|
// label: labelOption,
|
||||||
|
data: [_this.findings_list[0], _this.samplebush_list[0], _this.samplebush_list[0], _this.sampleherbal_list[0], _this.simplesoil_list[0], _this.barcodes_list[0], _this.landuse_list[0], _this.weather_list[0]]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: _this.product_list[1],
|
||||||
|
type: 'bar',
|
||||||
|
// label: labelOption,
|
||||||
|
data: [_this.findings_list[1], _this.samplebush_list[1], _this.samplebush_list[1], _this.sampleherbal_list[1], _this.simplesoil_list[1], _this.barcodes_list[1], _this.landuse_list[1], _this.weather_list[1]]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: _this.product_list[2],
|
||||||
|
type: 'bar',
|
||||||
|
// label: labelOption,
|
||||||
|
data: [_this.findings_list[2], _this.samplebush_list[2], _this.samplebush_list[2], _this.sampleherbal_list[2], _this.simplesoil_list[2], _this.barcodes_list[2], _this.landuse_list[2], _this.weather_list[2]]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: _this.product_list[3],
|
||||||
|
type: 'bar',
|
||||||
|
// label: labelOption,
|
||||||
|
data: [_this.findings_list[3], _this.samplebush_list[3], _this.samplebush_list[3], _this.sampleherbal_list[3], _this.simplesoil_list[3], _this.barcodes_list[3], _this.landuse_list[3], _this.weather_list[3]]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: _this.product_list[4],
|
||||||
|
type: 'bar',
|
||||||
|
// label: labelOption,
|
||||||
|
data: [_this.findings_list[4], _this.samplebush_list[4], _this.samplebush_list[4], _this.sampleherbal_list[4], _this.simplesoil_list[4], _this.barcodes_list[4], _this.landuse_list[4], _this.weather_list[4]]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: _this.product_list[5],
|
||||||
|
type: 'bar',
|
||||||
|
// label: labelOption,
|
||||||
|
data: [_this.findings_list[5], _this.samplebush_list[5], _this.samplebush_list[5], _this.sampleherbal_list[5], _this.simplesoil_list[5], _this.barcodes_list[5], _this.landuse_list[5], _this.weather_list[5]]
|
||||||
|
}
|
||||||
|
// {
|
||||||
|
// name: _this.product_list[6],
|
||||||
|
// type: 'bar',
|
||||||
|
// // label: labelOption,
|
||||||
|
// data: [_this.findings_list[6], _this.samplebush_list[6], _this.samplebush_list[6], _this.sampleherbal_list[6], _this.simplesoil_list[6], _this.barcodes_list[6], _this.landuse_list[6], _this.weather_list[6]]
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: _this.product_list[7],
|
||||||
|
// type: 'bar',
|
||||||
|
// // label: labelOption,
|
||||||
|
// data: [_this.findings_list[7], _this.samplebush_list[7], _this.samplebush_list[7], _this.sampleherbal_list[7], _this.simplesoil_list[7], _this.barcodes_list[7], _this.landuse_list[7], _this.weather_list[7]]
|
||||||
|
// }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
// 最关键，自动调整canvas的
|
||||||
|
// myChart.resize()
|
||||||
|
// echarts根据屏幕大小自适应
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
myChart.resize()
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -186,4 +473,242 @@ export default {
|
||||||
.el-button {
|
.el-button {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
.echarts {
|
||||||
|
/*width: 100%;*/
|
||||||
|
height: 710px;
|
||||||
|
background-color: #f3f6fb;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.echarttitle {
|
||||||
|
width: 100%;
|
||||||
|
height: 70px;
|
||||||
|
border-bottom: 1px solid #ffffff;
|
||||||
|
/*text-align: left;*/
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.ecshujv {
|
||||||
|
font-size: 24px;
|
||||||
|
font-family: "微软雅黑 Regular";
|
||||||
|
color: #706f6f;
|
||||||
|
position: absolute;
|
||||||
|
top: 30px;
|
||||||
|
left: 120px;
|
||||||
|
}
|
||||||
|
.ol-popup{
|
||||||
|
z-index: 999;
|
||||||
|
width: 180px;
|
||||||
|
height: 100px;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-popup-closer {
|
||||||
|
text-decoration: none;
|
||||||
|
position: absolute;
|
||||||
|
top: -1px;
|
||||||
|
right: -10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-popup-closer:after {
|
||||||
|
color: black;
|
||||||
|
content: "✖";
|
||||||
|
}
|
||||||
|
.ol-control {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#popup-content{
|
||||||
|
text-align: left;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 6px 0;
|
||||||
|
background-color: rgba(253, 240, 205, 0.8)
|
||||||
|
}
|
||||||
|
.legend {
|
||||||
|
position: absolute;
|
||||||
|
/*top: 732px;*/
|
||||||
|
/*left: 560px;*/
|
||||||
|
opacity: 0.6;
|
||||||
|
bottom: 20px;
|
||||||
|
left: 20px;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
.el-tabs--left .el-tabs__header.is-left {
|
||||||
|
margin-right: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.el-tabs__item {
|
||||||
|
padding: 0;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
.echdata {
|
||||||
|
position: absolute;
|
||||||
|
left: 120px;
|
||||||
|
top: 72px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-family: "微软雅黑 Light";
|
||||||
|
color: #979797;
|
||||||
|
}
|
||||||
|
.realechart {
|
||||||
|
/*position: absolute;*/
|
||||||
|
/*left: 62px;*/
|
||||||
|
/*top: 120px;*/
|
||||||
|
/*width: 1200px;*/
|
||||||
|
margin-top: 120px;
|
||||||
|
height: 540px;
|
||||||
|
/*border: 1px solid;*/
|
||||||
|
}
|
||||||
|
.echarts1 {
|
||||||
|
/*width: 500px;*/
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
.echarts2 {
|
||||||
|
/*width: 600px;*/
|
||||||
|
height: 500px;
|
||||||
|
/*position: absolute;*/
|
||||||
|
/*top: 0px;*/
|
||||||
|
/*right: 45px;*/
|
||||||
|
/*z-index: 15;*/
|
||||||
|
background-color: #ffffff;
|
||||||
|
/*display: inline-block;*/
|
||||||
|
}
|
||||||
|
.copyright {
|
||||||
|
width: 100%;
|
||||||
|
height: 110px;
|
||||||
|
font-family: "微软雅黑 Light";
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.coco {
|
||||||
|
padding-top: 30px;
|
||||||
|
}
|
||||||
|
.coco2 {
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
width: 1366px;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: absolute;
|
||||||
|
z-index: -20;
|
||||||
|
}
|
||||||
|
.middleshape {
|
||||||
|
width: 13px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #f3f6fb;
|
||||||
|
position: absolute;
|
||||||
|
left: 485px;
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
/*background: #26c3e4;*/
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.content_top {
|
||||||
|
/* min-width: 1013px; */
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
text-align: left;
|
||||||
|
color: #fff;
|
||||||
|
font-family: "微软雅黑 Light";
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 25px 0px;
|
||||||
|
/*background: #31caea;*/
|
||||||
|
margin: 15px 0;
|
||||||
|
transition: all 0.5s ease-out;
|
||||||
|
}
|
||||||
|
.btn:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
.btn_img {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 65px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn_text {
|
||||||
|
font-size: 14px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
width: 70px;
|
||||||
|
}
|
||||||
|
.aa > img {
|
||||||
|
width: 3.5vw;
|
||||||
|
}
|
||||||
|
.el-tabs--left .el-tabs__header.is-left {
|
||||||
|
margin-right: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.el-tabs__item {
|
||||||
|
padding: 0;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
/* 进度条背景色*/
|
||||||
|
.el-progress-bar__outer{
|
||||||
|
border: 1px solid ;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.el-progress-bar__innerText{
|
||||||
|
color: #fff;
|
||||||
|
/*color: green;*/
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.font_title{
|
||||||
|
text-align: left;
|
||||||
|
font-weight: bolder;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 17px;
|
||||||
|
padding: 0 0 0 5px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.font_fam {
|
||||||
|
font-size: 14px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
/*@media screen and (min-width: 780px) {*/
|
||||||
|
/* .font_fam {*/
|
||||||
|
/* font-size: 8px;*/
|
||||||
|
/* }*/
|
||||||
|
/*}*/
|
||||||
|
}
|
||||||
|
.font_text{
|
||||||
|
font-size: 12px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
/*@media screen and (min-width: 920px) {*/
|
||||||
|
/* .font_text{*/
|
||||||
|
/* font-size: 8px;*/
|
||||||
|
/* }*/
|
||||||
|
/*}*/
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
padding-right: 0px;
|
||||||
|
margin-right:0px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #191f25;
|
||||||
|
}
|
||||||
|
.bar-div {
|
||||||
|
margin-bottom: 44px;
|
||||||
|
}
|
||||||
|
.bar-title-div {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
margin-top: 20px;
|
||||||
|
position: relative;}
|
||||||
|
.bar-title {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
.bar-value {
|
||||||
|
font-size: 38px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.bar-ratio {
|
||||||
|
position: absolute;
|
||||||
|
color: #e5ff39;
|
||||||
|
font-weight: bold;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue