<template>
|
<div class="smoke-cockpit">
|
<el-dialog title="街道数据展示" :visible.sync="dialogStreetData" width="80%">
|
<el-table :data="gridData" stripe border highlight-current-row>
|
<el-table-column property="date" label="街道名" width="150"></el-table-column>
|
<el-table-column property="name" label="监测点数" width="200"></el-table-column>
|
<el-table-column property="address" label="在线数"></el-table-column>
|
<el-table-column property="address" label="在线率"></el-table-column>
|
<el-table-column property="address" label="达标数"></el-table-column>
|
<el-table-column property="address" label="达标率"></el-table-column>
|
<el-table-column property="address" label="超标数"></el-table-column>
|
<el-table-column property="address" label="超标率"></el-table-column>
|
<el-table-column property="address" label="执法工单派遣总数"></el-table-column>
|
<el-table-column property="address" label="已整改商户数目"></el-table-column>
|
<el-table-column property="address" label="商户整改率"></el-table-column>
|
|
</el-table>
|
<div class="pagination">
|
<el-pagination
|
background
|
:current-page="currentPage"
|
layout="prev, pager, next"
|
:total="totalNum"
|
:page-size="pageSize"
|
@current-change="changeCurrentPage"
|
>
|
</el-pagination>
|
</div>
|
</el-dialog>
|
<div class="smoke-title">
|
遂昌县智慧执法应用
|
</div>
|
<div class="smoke-cockpit-body">
|
<div class="smoke-echarts-title">
|
<div v-for="(item,index) in indexList" :key="index" class="smoke-echarts">
|
<div id="mychart" class="echart"></div>
|
</div>
|
</div>
|
|
<div class="smoke-map">
|
<div class="smoke-map-title">
|
<div>
|
<p> 监测点数（个）</p>
|
5
|
</div>
|
<div>
|
<p> 在线数（台）</p>
|
5
|
</div>
|
<div>
|
<p> 达标数（台）</p>
|
5
|
</div>
|
<div>
|
<p> 超标数（台）</p>
|
5
|
</div>
|
<div>
|
<p> PM2.5年减排[kgs]</p>
|
5
|
</div>
|
<div>
|
<p> PM10年减排[kgs]</p>
|
5
|
</div>
|
<div>
|
<p> 非甲烷总烃年减排[kgs]</p>
|
5
|
</div>
|
<div>
|
<p> 油烟年减排[kgs]</p>
|
5
|
</div>
|
</div>
|
<div class="Mymap">
|
<MyMap
|
:point="point"
|
:zoom="zoom"
|
:mark="mark"
|
@fatherMethod="fatherMethod"
|
>
|
|
</MyMap>
|
<div class="Mymap-foot" @click="batStreetData">
|
<span>街道数据展示</span>
|
<span>点击展开</span>
|
</div>
|
</div>
|
<div class="smoke-echarts-foot-t">
|
<div v-for="(item,index) in indexLists" :key="index" class="smoke-echarts-foot">
|
<div id="mychart2" class="echart-foot"></div>
|
</div>
|
</div>
|
</div>
|
<div class="smoke-information">
|
|
<div class="smoke-information-title">
|
报警信息
|
</div>
|
<ul v-for="(item,index) in alarmInformation " :key="index" class="smoke-information-ul">
|
<li>报警类型：{{item.alarmType}}</li>
|
<li>报警点：{{item.alarmPoint}}</li>
|
<li>报警时间：{{item.alarmTime}}</li>
|
<li>报警地址：{{item.alarmAddress}}</li>
|
</ul>
|
|
</div>
|
</div>
|
|
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from "echarts";
|
import MyMap from "@/components/map/leafletMap.vue";
|
|
export default {
|
components: {MyMap},
|
data() {
|
return {
|
totalNum: 1,
|
pageSize: 10,
|
currentPage: 1,
|
gridData: [{
|
date: '2016-05-02',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1518 弄'
|
}, {
|
date: '2016-05-04',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1518 弄'
|
}, {
|
date: '2016-05-01',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1518 弄'
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1518 弄'
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1518 弄'
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1518 弄'
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1518 弄'
|
}, {
|
date: '2016-05-03',
|
name: '王小虎',
|
address: '上海市普陀区金沙江路 1518 弄'
|
}],
|
xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
|
yData: [23, 24, 18, 25, 27, 28, 25], //数据
|
myChartStyle: {float: "left", width: "100%", height: "400px"}, //图表样式
|
indexList: [
|
{id: 0, name: "近六个月超标报警次数"},
|
{id: 1, name: "近六个月油烟键排量"}
|
],
|
indexLists:[
|
{id: 0, name: "每日在线率(%)"},
|
{id: 1, name: "每日达标率(%)"}
|
],
|
point: { x: "119.27179890", y: "28.59027084" },
|
mark: null,
|
zoom: 13,
|
alarmInformation:[
|
{id: 0, alarmType: "超标报警1",alarmPoint:"汤公酒店",alarmTime:"2023-09-18",alarmAddress:"丽水市遂昌县龙骨路10号"},
|
{id: 0, alarmType: "超标报警2",alarmPoint:"汤公酒店",alarmTime:"2023-09-18",alarmAddress:"丽水市遂昌县龙骨路10号"},
|
{id: 0, alarmType: "超标报警3",alarmPoint:"汤公酒店",alarmTime:"2023-09-18",alarmAddress:"丽水市遂昌县龙骨路10号"},
|
{id: 0, alarmType: "超标报警4",alarmPoint:"汤公酒店",alarmTime:"2023-09-18",alarmAddress:"丽水市遂昌县龙骨路10号"},
|
{id: 0, alarmType: "超标报警5",alarmPoint:"汤公酒店",alarmTime:"2023-09-18",alarmAddress:"丽水市遂昌县龙骨路10号"},
|
{id: 0, alarmType: "超标报警6",alarmPoint:"汤公酒店",alarmTime:"2023-09-18",alarmAddress:"丽水市遂昌县龙骨路10号"},
|
{id: 0, alarmType: "超标报警7",alarmPoint:"汤公酒店",alarmTime:"2023-09-18",alarmAddress:"丽水市遂昌县龙骨路10号"},
|
],
|
dialogStreetData:false,
|
};
|
},
|
mounted() {
|
this.initEcharts();
|
this.initEcharts2()
|
},
|
methods: {
|
changeCurrentPage(page) {
|
this.currentPage = page;
|
// this.getTableData();
|
},
|
batStreetData(){
|
this.dialogStreetData = true
|
},
|
fatherMethod() {
|
console.log('fatjer<emtj')
|
},
|
initEcharts2() {
|
let roseCharts = document.getElementsByClassName('echart-foot')
|
for (let i = 0; i < roseCharts.length; i++) {
|
// 基本柱状图
|
console.log(i)
|
let myChart = echarts.init(roseCharts[i])
|
let option = {
|
xAxis: {
|
data: this.xData,
|
axisLabel: {
|
interval: 0,
|
formatter: ' {value}',//Y轴左侧文字的占位
|
textStyle: {
|
fontSize: 15,
|
color: "#FFF" //Y轴文字颜色
|
}
|
},
|
axisLine: {
|
lineStyle: {
|
color: '#01FCE3'
|
}
|
},
|
|
},
|
// 图例
|
legend: {
|
data: [this.indexLists[i].name],
|
top: "0%",
|
left: "5%",
|
textStyle: {//图例文字的样式
|
color: '#25FCF2',
|
fontSize: 16
|
}
|
},
|
yAxis: {
|
axisLabel: {
|
interval: 0,
|
formatter: ' {value}',//Y轴左侧文字的占位
|
textStyle: {
|
fontSize: 15,
|
color: "#FFF" //Y轴文字颜色
|
}
|
},
|
axisLine: {
|
lineStyle: {
|
color: '#01FCE3'
|
}
|
},
|
|
},
|
|
series: [
|
{
|
type: "line", //形状为柱状图
|
data: this.yData,
|
// 同系列柱条样式
|
itemStyle: {
|
barBorderRadius: 5,
|
borderWidth: 1,
|
borderType: "solid",
|
borderColor: "#73c0de",
|
shadowColor: "#5470c6",
|
shadowBlur: 3,
|
color: "#25FCF2"
|
},
|
name: this.indexLists[i].name, // legend属性
|
label: {
|
// 柱状图上方文本标签，默认展示数值信息
|
show: true,
|
position: "top",
|
textStyle: {
|
fontSize: 13,
|
color: "#fff" //Y轴文字颜色
|
}
|
|
}
|
}
|
]
|
};
|
// const myChart = echarts.init(document.getElementById("mychart"));
|
myChart.setOption(option);
|
//随着屏幕大小调节图表
|
window.addEventListener("resize", () => {
|
myChart.resize();
|
});
|
|
}
|
|
},
|
initEcharts() {
|
let roseCharts = document.getElementsByClassName('echart')
|
for (let i = 0; i < roseCharts.length; i++) {
|
// 基本柱状图
|
console.log(i)
|
let myChart = echarts.init(roseCharts[i])
|
let option = {
|
xAxis: {
|
data: this.xData,
|
axisLabel: {
|
interval: 0,
|
formatter: ' {value}',//Y轴左侧文字的占位
|
textStyle: {
|
fontSize: 15,
|
color: "#FFF" //Y轴文字颜色
|
}
|
},
|
axisLine: {
|
lineStyle: {
|
color: '#01FCE3'
|
}
|
},
|
|
},
|
// 图例
|
legend: {
|
data: [this.indexList[i].name],
|
top: "0%",
|
left: "5%",
|
textStyle: {//图例文字的样式
|
color: '#25FCF2',
|
fontSize: 16
|
}
|
},
|
yAxis: {
|
axisLabel: {
|
interval: 0,
|
formatter: ' {value}',//Y轴左侧文字的占位
|
textStyle: {
|
fontSize: 15,
|
color: "#FFF" //Y轴文字颜色
|
}
|
},
|
axisLine: {
|
lineStyle: {
|
color: '#01FCE3'
|
}
|
},
|
|
},
|
|
series: [
|
{
|
type: "bar", //形状为柱状图
|
data: this.yData,
|
// 同系列柱条样式
|
itemStyle: {
|
barBorderRadius: 5,
|
borderWidth: 1,
|
borderType: "solid",
|
borderColor: "#73c0de",
|
shadowColor: "#5470c6",
|
shadowBlur: 3,
|
color: "#25FCF2"
|
},
|
name: this.indexList[i].name, // legend属性
|
label: {
|
// 柱状图上方文本标签，默认展示数值信息
|
show: true,
|
position: "top",
|
textStyle: {
|
fontSize: 13,
|
color: "#fff" //Y轴文字颜色
|
}
|
|
}
|
}
|
]
|
};
|
// const myChart = echarts.init(document.getElementById("mychart"));
|
myChart.setOption(option);
|
//随着屏幕大小调节图表
|
window.addEventListener("resize", () => {
|
myChart.resize();
|
});
|
|
}
|
|
}
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.smoke-cockpit{
|
height: calc(100vh - 90px);
|
|
}
|
.pagination{
|
line-height: normal;
|
text-align: right;
|
}
|
.smoke-cockpit ::v-deep .el-dialog__header{
|
color: #96D7ED!important;
|
background-color: #01242F!important;
|
span{
|
color: #96D7ED!important;
|
}
|
}
|
.smoke-cockpit ::v-deep .el-dialog__body{
|
overflow: auto;
|
background-color: #405E68;
|
padding: 10px;
|
.el-table__header{
|
line-height: normal;
|
}
|
// 更改表头背景颜色
|
.el-table thead tr>th{
|
background-color: #00191F;
|
color: #96D7ED;
|
}
|
// 更改表格每行背景颜色
|
.el-table tbody tr>td{
|
background-color: #00191F;
|
color: #96D7ED;
|
}
|
}
|
.smoke-title {
|
line-height: 60px;
|
font-size: 18px;
|
font-weight: 400;
|
}
|
|
.smoke-cockpit-body {
|
display: flex;
|
height: 93%;
|
.smoke-echarts-title {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.smoke-echarts {
|
|
background-color: #011E24;
|
height: 46%;
|
.echart {
|
height: 350px;
|
width: 350px;
|
}
|
}
|
|
}
|
|
.smoke-map {
|
flex: 2;
|
border: 1px solid black;
|
margin: 0 10px;
|
padding: 0 10px;
|
.smoke-map-title{
|
display: flex;
|
line-height: normal;
|
}
|
.Mymap {
|
height: 60%;
|
width: 100%;
|
margin: 7px 0;
|
position: relative;
|
.Mymap-foot{
|
position: absolute;
|
display: flex;
|
justify-content: space-between;
|
right: 10px;
|
width: 270px;
|
height: 35px;
|
background-color: #01242F;
|
bottom: 10px;
|
line-height: 35px;
|
padding: 0 5px;
|
cursor: pointer;
|
span{
|
color: #80DFE8;
|
}
|
}
|
}
|
.smoke-echarts-foot-t{
|
display: flex;
|
justify-content: space-between;
|
.smoke-echarts-foot{
|
background-color: #011E24;
|
.echart-foot{
|
height: 200px;
|
width: 400px;
|
}
|
}
|
}
|
}
|
|
.smoke-information {
|
flex: 1;
|
border: 1px solid black;
|
overflow: auto;
|
line-height: normal;
|
.smoke-information-title{
|
line-height: 35px;
|
}
|
.smoke-information-ul{
|
border-bottom:1px solid black;
|
border-top:1px solid black;
|
list-style-type: none;
|
text-align: left;
|
margin-block-start: 0;
|
margin-block-end: 0;
|
li{
|
margin: 5px 0;
|
}
|
}
|
}
|
}
|
</style>
|
