<template>
|
<div style="position:relative">
|
<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 amountTotal" :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 amountCurYearTotal" :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 amountYesterdayTotal" :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>
|
<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: 80vh"></div>
|
<div class="map-infos">
|
<dv-border-box-13>
|
<div class="map-title">吉木乃县</div>
|
<div class="map-item">
|
<div class="item-title">安装水表数量:</div> <div class="item-num">328个</div>
|
</div>
|
<div class="map-item">
|
<div class="item-title">累计用水量:</div> <div class="item-num">2943.8 m³</div>
|
</div>
|
<div class="map-item">
|
<div class="item-title">当前欠费数量:</div><div class="item-num">3 户</div>
|
</div>
|
</dv-border-box-13>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import * as echarts from 'echarts'
|
import echartsGL from 'echarts-gl'
|
import datajson from './jimunai'
|
import { getScAmount } from '@/api/largeScreen'
|
// import { getLargeScreenProcessInfo } from '@/cpx_sewage/api/largeScreen/largeScreen'
|
export default {
|
data() {
|
return {
|
amountTotal: [], // 今日累计处理量
|
amountCurYearTotal: [], // 本年累计处理量
|
amountYesterdayTotal: [], // 总累计处理量
|
myChart: null,
|
stationData: [],
|
processData: [],
|
data:[
|
{ name: '托普铁热克乡', centroid: [87.047533,47.875751],value: 100 },
|
{ name: '托普铁热克镇', centroid: [85.885448,47.439013],value: 100 },
|
{ name: '吉木乃镇', centroid: [85.882013,47.44893],value: 100 },
|
{ name: '喀尔交乡', centroid: [86.410528,47.201893],value: 200 },
|
{ name: '乌拉斯特镇',centroid: [85.782084,47.669236],value: 100 },
|
{ name: '托斯特乡', centroid: [86.13412,47.285077],value: 100},
|
{ name: '恰勒什海乡', centroid: [86.153288,47.535675],value: 100 },
|
{ name: '别斯铁热克乡',centroid: [85.88913,47.309702],value: 100 },
|
{ name: '兵团一八六团', centroid: [85.678458,47.556221],value: 100 }
|
// 托普铁热克镇、吉木乃镇、喀尔交乡、托斯特乡、兵团一八六团、别斯铁热克乡、恰勒什海乡、托普铁热克乡
|
]
|
}
|
},
|
created() {
|
this.getScAmount()
|
// 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: {
|
getScAmount() {
|
const param = {"orgTag":"dy"}
|
getScAmount(param).then(res=>{
|
if (res.succ == 1) {
|
this.amountTotal = res.amountTotal.toString().split("")
|
this.amountCurYearTotal = res.amountCurYearTotal.toString().split("")
|
this.amountYesterdayTotal = res.amountYesterdayTotal.toString().split("")
|
} else {
|
this.$message({
|
type: 'error',
|
message: res.message
|
})
|
}
|
})
|
},
|
initCharts() {
|
const charts = echarts.init(this.$refs['mapcontainer'])
|
const option = {
|
geo: { // 2D地图坐标系
|
show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
|
map: 'centerMap',
|
roam: false, // 禁用缩放、拖拽
|
layoutCenter: ['50%', '47%'], // 地图中心位置
|
layoutSize: '90%', // 控制地图尺寸（地图的宽度和高度都会改变）
|
aspectScale: 0.85, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
|
zlevel: 1,
|
},
|
geo3D: { // 3D地图坐标系
|
show: true, // 显示3D地图版块
|
map: "centerMap",
|
top: "-20",
|
regionHeight: 16, // 地图版块厚度
|
label: {
|
show: true,
|
borderRadius: 0,
|
distanca: 0,
|
textStyle: {
|
fontSize: 14,
|
color: "#C23531", // 地图初始化区域字体颜色
|
borderWidth: 1,
|
borderColor: '#FFFF10',
|
}
|
},
|
itemStyle: {
|
// 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
|
color: "rgba(11,59,121,0.5)", // 地图板块的颜色
|
opacity: 1, // 图形的不透明度 [ default: 1 ]
|
borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
|
borderColor: "#2FB5FA", // 图形描边的颜色。[ default: #333 ]
|
},
|
emphasis: {
|
label: {
|
show: true,
|
color: "#fff000",
|
},
|
itemStyle: {
|
color: "#146fd7",
|
opacity: 0.5,
|
},
|
},
|
light: {
|
// 光照阴影
|
main: {
|
color: "#FFFFFF", // 光照颜色
|
intensity: 2, // 光照强度
|
shadowQuality: "light", // 阴影亮度
|
shadow: true, // 是否显示阴影
|
alpha: 50,
|
beta: 10,
|
},
|
},
|
viewControl: {
|
"projection": "perspective",
|
"autoRotate": false,
|
"distance": 208, // 控制地图版块的大小
|
"alpha": 72, // 地图版块垂直方向的角度
|
"beta": 2, // 地图版块水平方向的角度
|
rotateSensitivity: 0, // 禁用旋转
|
panSensitivity: 0, // 禁用平移
|
zoomSensitivity: 0, // 禁用缩放
|
},
|
zlevel: 2,
|
},
|
series: [
|
{ // 动效散点图层，使用2D地图坐标系
|
type: 'effectScatter',
|
coordinateSystem: 'geo',
|
zlevel: 3,
|
rippleEffect: { //涟漪特效
|
period: 4, //动画时间，值越小速度越快
|
brushType: 'stroke', //波纹绘制方式 stroke, fill
|
scale: 10 //波纹圆环最大限制，值越大波纹越大
|
},
|
symbol: 'circle',
|
symbolSize: function (val) {
|
return (5 + val[2] * 5) / 150; //圆环大小
|
},
|
itemStyle: {
|
normal: {
|
show: true,
|
color: '#2FB5FA'
|
}
|
},
|
data: [],
|
},
|
]
|
|
}
|
var mapFeatures = this.data
|
console.log('mapFeatures',mapFeatures)
|
var geoCoordMap = {};
|
mapFeatures.forEach(function (v) {
|
// 地区名称
|
var name = v.name;
|
// 地区经纬度
|
geoCoordMap[name] = v.centroid;
|
});
|
|
var convertData = function (data) {
|
var res = [];
|
for (var i = 0; i < data.length; i++) {
|
var geoCoord = geoCoordMap[data[i].name];
|
if (geoCoord) {
|
res.push({
|
name: data[i].name,
|
value: geoCoord.concat(data[i].value)
|
});
|
}
|
}
|
console.log(res)
|
return res;
|
};
|
// alert(JSON.stringify(convertData(areaMapData)));
|
option.series[0].data = convertData(this.data); // 设置动效散点数据
|
// 地图注册，第一个参数的名字必须和option.geo.map一致
|
echarts.registerMap('centerMap', datajson)
|
charts.setOption(option)
|
|
}
|
}
|
}
|
</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;
|
}
|
|
}
|
.map-infos {
|
// border: 1px dashed #ddd;
|
width: 4.0rem;
|
position: absolute;
|
top: 1rem;
|
right: 0.5rem;
|
// margin-top: 0.5rem;
|
font-size: .2rem;
|
color: #d0cbcb;
|
}
|
.map-title {
|
padding: 0.15rem;
|
text-align: center;
|
}
|
.map-item {
|
display: flex;
|
padding: 0.15rem;
|
font-size: .2rem;
|
align-items: center;
|
.item-title {
|
width: 50%;
|
font-size: 0.1rem;
|
letter-spacing: 2px;
|
}
|
.item-num {
|
font-family: 'screen-font';
|
}
|
}
|
.dv-border-box-13 {
|
padding: .2rem;
|
}
|
</style>
|
