363 lines
13 KiB
Vue
363 lines
13 KiB
Vue
<template>
|
|
<div class="pd10">
|
|
<div v-show="flg" v-loading="isLoading" element-loading-text="数据加载中">
|
|
<el-form :inline="true" :model="formData">
|
|
<el-form-item label="监测点等级:">
|
|
<el-select v-model="formData.lineGrade" placeholder="监测点等级" style="width: 160px">
|
|
<el-option
|
|
v-for="item in terminalClass"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<!-- <el-form-item>
|
|
<Timeinterval ref="Timeinterval" :interval="2"></Timeinterval>
|
|
</el-form-item> -->
|
|
<el-form-item>
|
|
<el-button type="primary" @click="onSubmit" class="ml10" icon="el-icon-search">查询</el-button>
|
|
</el-form-item>
|
|
<!-- <el-form-item>
|
|
<el-button type="primary" class="ml10" icon="el-icon-upload2"
|
|
>导出</el-button
|
|
></el-form-item
|
|
> -->
|
|
</el-form>
|
|
<div class="box">
|
|
<div class="boxR" style="overflow: hidden" z>
|
|
<div style="width: 100%; height: 100%" id="electr4"></div>
|
|
</div>
|
|
|
|
<div class="boxL">
|
|
<el-table
|
|
stripe
|
|
header-cell-class-name="table_header"
|
|
:data="tableData"
|
|
style="width: 100%"
|
|
:height="vh + 'px'"
|
|
highlight-current-row
|
|
border
|
|
>
|
|
<el-table-column :resizable="false" prop="name" label="区域"></el-table-column>
|
|
<el-table-column :resizable="false" prop="value" label="监测点个数"></el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Timeinterval from '@/views/components/Timeinterval.vue'
|
|
import { dicData } from '@/assets/commjs/dictypeData'
|
|
import { getLineDistribution } from '@/api/BusinessAdministrator/distribution'
|
|
export default {
|
|
name: 'monitoringdistribution',
|
|
components: {
|
|
Timeinterval
|
|
},
|
|
props: {},
|
|
data() {
|
|
return {
|
|
flg: true,
|
|
isLoading: true,
|
|
zoom: '', //图表焦点校验
|
|
vh: undefined,
|
|
formData: {
|
|
lineGrade: '' //终端等级
|
|
// searchBeginTime: "", //开始
|
|
// searchEndTime: "", //结束
|
|
// timeFlag: "", //区分时间
|
|
},
|
|
terminalClass: [], //终端等级
|
|
tableData: []
|
|
}
|
|
},
|
|
created() {
|
|
this.getclassificationData()
|
|
},
|
|
mounted() {
|
|
this.setHeight()
|
|
window.addEventListener('resize', this.setHeight)
|
|
|
|
this.onSubmit()
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener('resize', this.setHeight)
|
|
},
|
|
methods: {
|
|
setHeight() {
|
|
this.vh = window.sessionStorage.getItem('appheight') - 55
|
|
},
|
|
//获取类型
|
|
getclassificationData() {
|
|
//监测点等级
|
|
this.terminalClass = dicData('Dev_Level', [])
|
|
this.formData.lineGrade = this.terminalClass[0].id
|
|
},
|
|
onSubmit() {
|
|
this.flg = true
|
|
this.isLoading = true
|
|
getLineDistribution(this.formData).then(res => {
|
|
this.tableData = res.data
|
|
this.chart()
|
|
this.isLoading = false
|
|
})
|
|
},
|
|
//点击切换
|
|
details(e) {
|
|
this.flg = false
|
|
},
|
|
chart() {
|
|
let _this = this
|
|
let echarts = require('echarts')
|
|
let domID2 = document.getElementById('electr4')
|
|
setTimeout(() => {
|
|
;(domID2.style.width = document.getElementById('app-main-in').offsetWidth - 430 + 'px'),
|
|
(domID2.style.height = window.sessionStorage.getItem('appheight') - 55 + 'px')
|
|
}, 0)
|
|
let myChart2 = echarts.init(domID2)
|
|
let echartsData = []
|
|
this.tableData.forEach(item => {
|
|
echartsData.push(item)
|
|
})
|
|
// let maps=await map()
|
|
let echartsColor = JSON.parse(window.localStorage.echartsColor)
|
|
// let colors = ["#0ec7aa", "#33CCFF", "#FFCC00", "#FF6600", "#FF3300"];
|
|
// let title = ["无污染", "轻微污染", "轻度污染", "中度污染", "重度污染"];
|
|
// jquery.getJSON("/api1/system-boot/map", null, function(data) {
|
|
_this.$axios.get('./static/mapjson/全国.json').then(data => {
|
|
echarts.registerMap('china', data.data)
|
|
let option = {
|
|
// backgroundColor: '#060303', //地图背景色深蓝
|
|
tooltip: {
|
|
trigger: 'item',
|
|
showDelay: 0,
|
|
hideDelay: 0,
|
|
enterable: true,
|
|
transitionDuration: 0,
|
|
//提示框组件
|
|
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
label: {
|
|
color: '#fff',
|
|
fontSize: 16
|
|
}
|
|
},
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontStyle: 'normal',
|
|
opacity: 0.35,
|
|
fontSize: 14
|
|
},
|
|
backgroundColor: 'rgba(0,0,0,0.35)',
|
|
borderWidth: 0,
|
|
extraCssText: 'z-index:100',
|
|
formatter: function (params) {
|
|
var tips = ''
|
|
if (params.data == undefined) {
|
|
;(tips += '区域:' + params.name + '<br/>'), (tips += '监测点个数:' + '暂无数据')
|
|
} else {
|
|
;(tips += '区域:' + params.name + '<br/>'),
|
|
(tips += '监测点个数:' + params.value + '个')
|
|
}
|
|
return tips
|
|
}
|
|
},
|
|
geo: {
|
|
show: true,
|
|
map: 'china',
|
|
roam: true,
|
|
top: 220,
|
|
left: 300,
|
|
zoom: 1.5,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
textStyle: {
|
|
color: echartsColor.WordColor,
|
|
fontSize: 12,
|
|
fontFamily: 'Arial'
|
|
}
|
|
}
|
|
},
|
|
select: {
|
|
// 地图选中区域样式
|
|
label: {
|
|
// 选中区域的label(文字)样式
|
|
color: '#fff'
|
|
},
|
|
itemStyle: {
|
|
// 选中区域的默认样式
|
|
areaColor: '#0075FF'
|
|
}
|
|
},
|
|
// label: {
|
|
// emphasis: {
|
|
// show: false
|
|
// }
|
|
// },
|
|
itemStyle: {
|
|
normal: {
|
|
borderColor: 'rgba(147, 235, 248, 1)',
|
|
borderWidth: 1,
|
|
areaColor: {
|
|
type: 'radial',
|
|
x: 0.5,
|
|
y: 0.5,
|
|
r: 0.8,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
|
|
}
|
|
],
|
|
globalCoord: false // 缺省为 false
|
|
},
|
|
shadowColor: 'rgba(128, 217, 248, 1)',
|
|
// shadowColor: 'rgba(255, 255, 255, 1)',
|
|
shadowOffsetX: -2,
|
|
shadowOffsetY: 2,
|
|
shadowBlur: 10
|
|
},
|
|
emphasis: {
|
|
areaColor: '#389BB7',
|
|
borderWidth: 0
|
|
}
|
|
}
|
|
},
|
|
|
|
toolbox: {
|
|
show: true,
|
|
|
|
top: '25',
|
|
// iconStyle: {
|
|
// borderColor: "crimson",
|
|
// },
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
|
|
legend: {
|
|
//各标记图例
|
|
orient: 'vertical',
|
|
// id: 1,
|
|
top: '40px',
|
|
right: '40px',
|
|
itemWidth: 16,
|
|
itemHeight: 16,
|
|
itemGap: 28,
|
|
textStyle: {
|
|
color: echartsColor.WordColor,
|
|
rich: {
|
|
a: {
|
|
verticalAlign: 'middle'
|
|
}
|
|
},
|
|
padding: [2, 0, 0, 0] //[上、右、下、左]
|
|
}
|
|
},
|
|
title: {
|
|
text: '',
|
|
left: 'left',
|
|
top: '60',
|
|
textStyle: {
|
|
color: '#C09611',
|
|
size: 20
|
|
}
|
|
},
|
|
|
|
visualMap: {
|
|
show: true,
|
|
left: '3%',
|
|
top: '6%',
|
|
itemHeight: 15,
|
|
itemWidth: 15,
|
|
pieces: [
|
|
{
|
|
gte: 0,
|
|
lt: 30,
|
|
label: '0-30(个)',
|
|
color: '#0ec7aa'
|
|
},
|
|
{
|
|
gte: 30,
|
|
lt: 60,
|
|
label: '30-60(个)',
|
|
color: '#33CCFF'
|
|
},
|
|
{
|
|
gte: 60,
|
|
lt: 80,
|
|
label: '60-80(个)',
|
|
color: '#FFCC00'
|
|
},
|
|
{
|
|
gte: 80,
|
|
lt: 100,
|
|
label: '80-100(个)',
|
|
color: '#FF6600'
|
|
},
|
|
{
|
|
gte: 100,
|
|
label: '>100(个)',
|
|
color: '#FF3300'
|
|
}
|
|
],
|
|
textStyle: {
|
|
color: echartsColor.WordColor
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: 'map', //图表类型
|
|
geoIndex: 0,
|
|
data: echartsData //图表的数据
|
|
}
|
|
]
|
|
}
|
|
myChart2.clear(option)
|
|
option && myChart2.setOption(option)
|
|
window.echartsArr.push(myChart2)
|
|
setTimeout(function () {
|
|
myChart2.resize()
|
|
}, 0)
|
|
})
|
|
}
|
|
},
|
|
|
|
computed: {},
|
|
|
|
watch: {}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
@import url('../../../styles/comStyle.less');
|
|
::v-deep .el-form-item--small .el-form-item__content,
|
|
.el-form-item--small .el-form-item__label {
|
|
height: 32px;
|
|
}
|
|
.box {
|
|
display: flex;
|
|
.boxR {
|
|
flex: 1;
|
|
}
|
|
.boxL {
|
|
width: 400px;
|
|
}
|
|
}
|
|
::v-deep .el-table .cell {
|
|
text-align: center;
|
|
}
|
|
// ::v-deep .has-gutter{
|
|
// height: 35px !important;
|
|
// }
|
|
</style>
|