From 0bc97726ed2c14d075557ef897d0d8b1ecfe5c4f Mon Sep 17 00:00:00 2001 From: fangyuan <527392886@qq.com> Date: 星期四, 15 十二月 2022 09:45:46 +0800 Subject: [PATCH] 趋势分析经纬度修改 --- src/views/intelligentPatrol/trendAnalysis/index.vue | 33 +++++++++++++++++++++++++++------ 1 files changed, 27 insertions(+), 6 deletions(-) diff --git a/src/views/intelligentPatrol/trendAnalysis/index.vue b/src/views/intelligentPatrol/trendAnalysis/index.vue index 1cadf21..ec296df 100644 --- a/src/views/intelligentPatrol/trendAnalysis/index.vue +++ b/src/views/intelligentPatrol/trendAnalysis/index.vue @@ -7,12 +7,13 @@ <span class="trend-title">瓒嬪娍鍒嗘瀽</span> <el-form ref="form" :model="search" label-width="6vw"> <el-form-item label="绫诲瀷鏌ヨ"> - <el-select v-model="search.type" placeholder="鍐呭淇℃伅"> + <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 v-model="search.timeRange" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"> + <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> @@ -34,6 +35,10 @@ </div> </div> <div class="trend-main"> + + <div class="map"> + <MyMap :point="point" :zoom="zoom" :mark="mark"></MyMap> + </div> <div class="trend-main-echarts" id="echarts"> </div> @@ -45,8 +50,10 @@ 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() }, @@ -71,7 +78,10 @@ trendAnalysisList: [], highFlag: true, echarts: null, - pointName: null + pointName: null, + point: null, + mark: null, + zoom: null, } }, methods: { @@ -106,6 +116,7 @@ this.trendAnalysisList = this.highFlag ? await basecase.getTrendAnalysisData(trendAnalysisParam) : await basecase.getFirstTrendAnalysisData(trendAnalysisParam); }, + tabChange(params) { this.highFlag = params === 1; this.searchList(); @@ -113,7 +124,13 @@ pointClick(data) { this.pointName = data.name; - basecase.getPointTrendAnalysisData({ id: data.id }) + 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.renderEchart(countList); @@ -127,7 +144,7 @@ <style lang="scss" scoped> .trend-analysis { height: 100%; - padding: 10vh 10vw; + padding: 10vh 0vw; color: #4b9bb7; display: flex; @@ -183,7 +200,7 @@ .trend-main { flex: 1; border: 1px solid #09152f; - + display: flex; .trend-main-echarts { width: 500px; height: 400px; @@ -196,4 +213,8 @@ } } } +.map { + height: 488px; + min-width: 460px; +} </style> \ No newline at end of file -- Gitblit v1.8.0