<template>
|
<div>
|
<div style="display: flex; justify-content: space-around; margin-bottom: 1vh">
|
<div>
|
<div class="num-title">
|
<div><span class="high-text">昨</span>日累计处理量</div>
|
</div>
|
<div class="num-item">
|
<span class="num-style color0" :class="{ 'num-bg0': s !== '.' }" v-for="(s, i) in totayNum" :key="i">{{ s }}</span>
|
<!-- <span class="unit-text">m³</span> -->
|
</div>
|
</div>
|
<div>
|
<div class="num-title">
|
<div><span class="high-text">本</span>年度累计处理量</div>
|
</div>
|
<div class="num-item">
|
<span v-for="(s, i) in totalNum" :key="i" class="num-style color2" :class="{ 'num-bg2': s !== '.' }">{{ s }}</span>
|
<!-- <span class="unit-text">万m³</span> -->
|
</div>
|
</div>
|
<div>
|
<div class="num-title">
|
<div><span class="high-text">总</span>累计处理量</div>
|
</div>
|
<div class="num-item">
|
<span v-for="(s, i) in totalNum" :key="i" class="num-style color2" :class="{ 'num-bg2': s !== '.' }">{{ s }}</span>
|
<!-- <span class="unit-text">万m³</span> -->
|
</div>
|
</div>
|
<div v-for="(item,index) in processData" :key="index">
|
<div class="num-title">
|
<div><span class="high-text">{{ item.firstEle }}</span>{{ item.endEle }}</div>
|
<!-- <div class="unit-text">万m³</div> -->
|
</div>
|
<div class="num-item">
|
<span class="num-style color0" :class="[{ 'num-bg0': s !== '.' && index==0 },{ 'num-bg2': s !== '.' && index==1 },{'color2':index==1}]" v-for="(s, i) in item.count" :key="i">{{ s }}</span>
|
<span class="unit-text">{{ item.unit }}</span>
|
</div>
|
</div>
|
</div>
|
<div>
|
<!-- <div id="echartMap" style="width: 500px; height: 500px"></div> -->
|
<!--地图-->
|
<div id="mapcontainer" ref="mapcontainer" style="width: 9rem; height: 70vh"></div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import * as echarts from 'echarts'
|
import echartsGL from 'echarts-gl'
|
import datajson from './jimunai'
|
// import { listWsStation, listWsStationCount } from '@/cpx_sewage/api/operationManage/siteOverview'
|
// import { getLargeScreenProcessInfo } from '@/cpx_sewage/api/largeScreen/largeScreen'
|
export default {
|
data() {
|
return {
|
totayNum: '3216', // 今日累计处理量
|
yearNum: '25.2', // 本年累计处理量
|
totalNum: '25.2', // 总累计处理量
|
myChart: null,
|
stationData: [],
|
processData: [],
|
data:[
|
{ name: '托普铁热克乡', value: (Math.random() * 1000 + 100).toFixed(0), num: 0 },
|
{ name: '托普铁热克镇', value: (Math.random() * 1000 + 100).toFixed(0), num: 0 },
|
{ name: '吉木乃镇', value: (Math.random() * 1000 + 100).toFixed(0), num: 0 },
|
{ name: '喀尔交乡', value: (Math.random() * 1000 + 100).toFixed(0), num: 0 },
|
{ name: '乌拉斯特镇', value: (Math.random() * 1000 + 100).toFixed(0), num: 0 },
|
{ name: '托斯特乡', value: (Math.random() * 1000 + 100).toFixed(0), num: 0 },
|
{ name: '恰勒什海乡', value: (Math.random() * 1000 + 100).toFixed(0), num: 0 },
|
{ name: '别斯铁热克乡', value: (Math.random() * 1000 + 100).toFixed(0), num: 0 },
|
{ name: '兵团一八六团', value: (Math.random() * 1000 + 100).toFixed(0), num: 0 }
|
// 托普铁热克镇、吉木乃镇、喀尔交乡、托斯特乡、兵团一八六团、别斯铁热克乡、恰勒什海乡、托普铁热克乡
|
]
|
}
|
},
|
created() {
|
// this.handData()
|
// setTimeout(this.initChart, 5000)
|
// this.initChart()
|
// this.totalNum = (+this.baseInfos.totalProcess / 10000).toFixed(2)
|
},
|
props: {
|
baseInfos: {
|
type: Object,
|
default: () => {}
|
}
|
},
|
watch: {
|
|
|
},
|
mounted() {
|
// this.getData()
|
this.$nextTick(() => {
|
// this.getStationList()
|
this.initCharts()
|
})
|
},
|
methods: {
|
getData() {
|
getLargeScreenProcessInfo().then(res => {
|
this.processData = res.data || []
|
this.processData.forEach(ele => {
|
if (ele.code === 'waterProcessToday') {
|
this.totayNum = ele.count
|
}
|
if (ele.code === 'waterProcessSum') {
|
this.totalNum = ele.count
|
}
|
ele.firstEle = ele.name.slice(0, 1)
|
ele.endEle = ele.name.slice(1, -1)
|
})
|
})
|
},
|
handData() {
|
this.totayNum = [...this.totayNum]
|
this.yearNum = [...this.yearNum]
|
this.totalNum = [...this.totalNum]
|
},
|
initCharts() {
|
const charts = echarts.init(this.$refs['mapcontainer'])
|
let airData = this.data
|
const option = {
|
visualMap: {
|
show: false,
|
min: 200,
|
max: 1000,
|
calculable: true, // 拖拽手柄
|
realtime: false,
|
inRange: {
|
color: ['#2884db', '#244779'],
|
show: false
|
},
|
textStyle: {
|
color: '#000'
|
}
|
},
|
tooltip: {
|
trigger: 'item',
|
backgroundColor: 'rgba(0, 0, 0, 0)',
|
// formatter: function(params) {
|
// if (typeof params.value[2] == 'undefined') {
|
// return params.name + ' : ' + params.value
|
// } else {
|
// return params.name + ' : ' + params.value[2]
|
// }
|
// }
|
formatter: function(params) {
|
let res = ''
|
res += `<div style="max-height:0.8rem;border-radius:5px;border-top:1px solid #02bcf4;border-right:1px solid #02bcf4;border-bottom:1px solid #0893eb;border-left:5px solid #0990ef;padding:.1rem .2rem;max-width:2rem;background:rgba(4,26,52,0.7);">
|
<div>
|
<p style="color:#fff;">${params.name}</p>
|
<p>
|
<span>${params.data.num}</span>
|
</p>
|
</div>
|
</div>`
|
return res
|
}
|
},
|
geo: {
|
itemStyle: {
|
normal: {
|
areaColor: '#000'
|
}
|
}
|
},
|
series: [
|
{
|
tooltip: {
|
trigger: 'item'
|
},
|
zlevel: 1,
|
name: 'china',
|
type: 'map3D',
|
map: 'china',
|
boxDepth: 130, // 地图倾斜度
|
regionHeight: 4, // 地图厚度
|
label: {
|
show: true, // 是否显示市
|
// textStyle: {
|
// color: '#fff', // 文字颜色
|
// fontSize: 12, // 文字大小
|
// fontFamily: '微软雅黑',
|
// backgroundColor: 'rgba(0,10,34,0)', // 透明度0清空文字背景
|
// borderColor: '#000a22'
|
// },
|
normal: {
|
show: true,
|
// formatter: '{b}: {c}',
|
formatter: function(value) {
|
// return value.value
|
// value.data.num = value.data.num == 0 ? '' : value.data.num
|
// if (value.data.num == 0) {
|
// console.log('aaa')
|
// return ''
|
// } else {
|
// return '22222'
|
// }
|
if (value.data.num == 0 || value.data.num == '0') {
|
return ' '
|
} else {
|
return value.data.num
|
}
|
},
|
textStyle: {
|
color: '#fff',
|
fontSize: 14,
|
fontFamily: '微软雅黑',
|
backgroundColor: 'rgba(0,0,0,0)', // 透明度0清空文字背景
|
borderColor: '#000'
|
}
|
}
|
},
|
itemStyle: {
|
opacity: 0.9, // 透明度
|
borderWidth: 0.8, // 分界线宽度
|
borderColor: '#000' // 分界线颜色
|
},
|
groundplane: {
|
show: false
|
},
|
data: airData,
|
// shading: 'realistic',
|
// 真实感材质相关配置 shading: 'realistic'时有效
|
realisticMaterial: {
|
detailTexture: '#000', // 纹理贴图
|
textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
|
roughness: 1, // 材质粗糙度，0完全光滑，1完全粗糙
|
metalness: 1, // 0材质是非金属 ，1金属
|
roughnessAdjust: 0
|
},
|
viewControl: {
|
projection: 'perspective',
|
distance: 120,
|
center: [-5, -22, 0]
|
// center: [0, -10, 0]
|
}
|
}
|
],
|
// dataRange: {
|
// show: false,
|
// splitList: splitList
|
// },
|
animation: false
|
}
|
|
// 地图注册，第一个参数的名字必须和option.geo.map一致
|
echarts.registerMap('china', datajson)
|
charts.setOption(option)
|
// charts.on('click', function(value) {
|
// console.log(23232,value);
|
// })
|
},
|
// 获取乡镇站点数据
|
getStationList() {
|
const self = this
|
listWsStationCount({
|
// stationTypeCode: 'zdgw'
|
}).then((res) => {
|
this.stationData = res.data.treeData
|
// console.log(res.data.treeData)
|
this.data = this.data.map((item, index, arr) => {
|
// console.log(item.name)
|
// var test = this.stationData.find(function(ele) {
|
// console.log('ele', ele.name)
|
// return item.name === ele.name
|
// })
|
// console.log(test)
|
this.stationData.forEach(ele => {
|
// console.log('ele', ele)
|
if (item.name === ele.name) {
|
item.num = ele.notOnline + ele.online
|
}
|
})
|
return item
|
})
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.num-title {
|
color: #fff;
|
font-family: 'screen-font';
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
font-size: 0.14rem;
|
.high-text {
|
font-size: 0.24rem;
|
margin-right: 0.05rem;
|
}
|
.unit-text {
|
font-size: 0.12rem;
|
font-family: 'element-icons';
|
}
|
}
|
|
.num-item {
|
display: flex;
|
// justify-content: space-between;
|
overflow: hidden;
|
align-items: flex-end;
|
.num-style {
|
font-size: 0.36rem;
|
font-family: 'screen-font';
|
padding: 0.05rem;
|
background-size: 100% 100% !important;
|
}
|
.num-bg0 {
|
background: url('../../../image/screen/bg_num_blue.png') no-repeat;
|
|
}
|
.num-bg1 {
|
background: url('../../../image/screen/bg_num_green.png') no-repeat;
|
}
|
.num-bg2 {
|
background: url('../../../image/screen/bg_num_cyan.png') no-repeat;
|
}
|
.color0 {
|
color: #36a8ff;
|
}
|
.color1 {
|
color: #00f170;
|
}
|
.color2 {
|
color: #04ddff;
|
}
|
.unit-text {
|
color: #fff;
|
margin-left: 5px;
|
}
|
}
|
</style>
|
