提交
This commit is contained in:
362
src/views/BusinessAdministrator/transport/distribution.vue
Normal file
362
src/views/BusinessAdministrator/transport/distribution.vue
Normal file
@@ -0,0 +1,362 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user