<template>
|
<div class="trend-analysis">
|
<!-- 侧边栏 -->
|
<div class="trend-side">
|
<!-- 输入区域 -->
|
<div class="trend-input-area">
|
<span class="trend-title">趋势分析</span>
|
<el-form ref="form" :model="search" label-width="6vw">
|
<!-- <el-form-item label="类型查询">-->
|
<!-- <el-select v-model="search.type" @change="searchList" placeholder="内容信息">-->
|
<!-- <el-option v-for="option in categoryOptions" :key="option.value" :value="option.value" :label="option.label" ></el-option>-->
|
<!-- </el-select>-->
|
<!-- </el-form-item>-->
|
<el-form-item class="time-area" label="时间范围">
|
<el-date-picker @change="searchList" start-placeholder="开始时间" end-placeholder="结束时间" v-model="search.timeRange"
|
type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss">
|
</el-date-picker>
|
</el-form-item>
|
</el-form>
|
</div>
|
<!-- 数据展示 -->
|
<div class="trend-data-show">
|
<!-- 点位切换 -->
|
<div class="trend-data-header">
|
<el-button type="text" @click="tabChange(1)">高发点位</el-button>
|
<el-button type="text" @click="tabChange(2)">首次违规点位</el-button>
|
</div>
|
<!-- 对应数据 -->
|
<div class="trend-data-main">
|
<div class="point-item" v-for="item in trendAnalysisList" :key="item.id" @click="pointClick(item)">
|
<span class="point-name">{{ item.name }}</span>
|
<span>{{ item.count }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="trend-main">
|
|
<div class="map">
|
<MyMap :point="point" :zoom="zoom" :mark="mark" @fatherMethod="fatherMethod"></MyMap>
|
</div>
|
|
</div>
|
<el-dialog
|
title="提示"
|
:visible.sync="echartsDialogVisible"
|
width="30%"
|
:before-close="handleClose">
|
<div style="height: 500px;width: 500px;" id="echarts">
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts'
|
import basecase from "@/api/operate/basecase";
|
import { CATEGOTY } from "@/utils/helper";
|
import MyMap from "@/components/map";
|
|
export default {
|
components :{MyMap},
|
created() {
|
this.searchList()
|
},
|
|
mounted() {
|
// this.renderEchart();
|
},
|
|
computed: {
|
categoryOptions() {
|
return CATEGOTY;
|
}
|
},
|
|
data() {
|
return {
|
echartsList:null,
|
echartsDialogVisible:false,
|
search: {
|
type: null,
|
timeRange: null
|
},
|
timeRangeFlag: false,
|
trendAnalysisList: [],
|
highFlag: true,
|
echarts: null,
|
pointName: null,
|
point: { x: "119.27179890", y: "28.59027084" },
|
mark: null,
|
zoom: 15,
|
}
|
},
|
methods: {
|
fatherMethod(){
|
console.log('7777')
|
this.echartsDialogVisible=true
|
this.$nextTick(function (){
|
this.renderEchart(this.echartsList);
|
|
})
|
},
|
handleClose(){
|
this.echartsDialogVisible = false
|
},
|
renderEchart(dataList) {
|
if (!this.echarts) {
|
this.echarts = echarts.init(document.getElementById('echarts'));
|
}
|
// 绘制图表
|
this.echarts.setOption({
|
xAxis: {
|
name: '日/周',
|
},
|
yAxis: {
|
name: '报警量(次)',
|
},
|
series: [
|
{
|
data: dataList,
|
type: 'line',
|
smooth: true
|
}
|
]
|
});
|
},
|
async searchList() {
|
const [startTime, endTime] = this.search.timeRange ?? [null, null];
|
const trendAnalysisParam = {
|
startTime,
|
endTime,
|
type: this.search.type
|
}
|
this.trendAnalysisList = this.highFlag ? await basecase.getTrendAnalysisData(trendAnalysisParam)
|
: await basecase.getFirstTrendAnalysisData(trendAnalysisParam);
|
},
|
|
tabChange(params) {
|
this.highFlag = params === 1;
|
this.searchList();
|
},
|
|
pointClick(data) {
|
this.pointName = data.name;
|
this.point = {
|
x: data.longitude,
|
y: data.latitude,
|
};
|
this.zoom = 19;
|
this.mark = { title: data.address };
|
basecase.getPointTrendAnalysisData({ longitude: data.longitude,latitude: data.latitude })
|
.then(res => {
|
// const countList = res.map(item => +item.count);
|
this.echartsList= res.map(item => +item.count);
|
// this.renderEchart(countList);
|
})
|
.catch(err => this.$message.error(err))
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.trend-analysis {
|
height: 100%;
|
padding: 10vh 0vw;
|
color: #4b9bb7;
|
display: flex;
|
|
.trend-side {
|
width: 30vw;
|
text-align: left;
|
height: 100%;
|
border: 1px solid #09152f;
|
|
.trend-input-area {
|
display: flex;
|
flex-direction: column;
|
padding: 0 2vw;
|
|
&>span {
|
line-height: 40px;
|
}
|
|
::v-deep .el-form {
|
.el-form-item__label {
|
color: #4b9bb7;
|
}
|
}
|
}
|
|
.trend-data-show {
|
width: 100%;
|
line-height: 40px;
|
|
.trend-data-header {
|
display: flex;
|
|
.el-button {
|
flex: 1;
|
border: 2px solid #09152f;
|
}
|
|
.el-button+.el-button {
|
margin: 0;
|
}
|
}
|
|
.trend-data-main {
|
.point-item {
|
display: flex;
|
padding: 0 2vw;
|
justify-content: space-between;
|
.point-name{
|
cursor: pointer;
|
color: #66b1ff;
|
}
|
}
|
}
|
}
|
}
|
|
.trend-main {
|
flex: 1;
|
border: 1px solid #09152f;
|
display: flex;
|
.trend-main-echarts {
|
width: 500px;
|
height: 400px;
|
}
|
}
|
|
.trend-footer {
|
::v-deep .el-range-input {
|
background-color: #09152f;
|
}
|
}
|
}
|
.map {
|
height: 100%;
|
min-width: 80%;
|
}
|
</style>
|
