From 426c8b34e6c0a6f97de69864c537cf5e0d7dbb08 Mon Sep 17 00:00:00 2001
From: odc.xiaohui <xiaohui@Q1>
Date: 星期四, 15 十二月 2022 18:13:34 +0800
Subject: [PATCH] 2022-12-15 趋势分析 地图位置 ，弹窗修改
---
src/views/intelligentPatrol/trendAnalysis/index.vue | 54 +++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 39 insertions(+), 15 deletions(-)
diff --git a/src/views/intelligentPatrol/trendAnalysis/index.vue b/src/views/intelligentPatrol/trendAnalysis/index.vue
index 11608c0..5d5a93a 100644
--- a/src/views/intelligentPatrol/trendAnalysis/index.vue
+++ b/src/views/intelligentPatrol/trendAnalysis/index.vue
@@ -6,11 +6,11 @@
<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 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">
@@ -28,7 +28,7 @@
<!-- 瀵瑰簲鏁版嵁 -->
<div class="trend-data-main">
<div class="point-item" v-for="item in trendAnalysisList" :key="item.id" @click="pointClick(item)">
- <span>{{ item.name }}</span>
+ <span class="point-name">{{ item.name }}</span>
<span>{{ item.count }}</span>
</div>
</div>
@@ -37,12 +37,18 @@
<div class="trend-main">
<div class="map">
- <MyMap :point="point" :zoom="zoom" :mark="mark"></MyMap>
+ <MyMap :point="point" :zoom="zoom" :mark="mark" @fatherMethod="fatherMethod"></MyMap>
</div>
- <div class="trend-main-echarts" id="echarts">
- </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>
@@ -59,7 +65,7 @@
},
mounted() {
- this.renderEchart();
+ // this.renderEchart();
},
computed: {
@@ -70,6 +76,8 @@
data() {
return {
+ echartsList:null,
+ echartsDialogVisible:false,
search: {
type: null,
timeRange: null
@@ -85,6 +93,17 @@
}
},
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'));
@@ -132,8 +151,9 @@
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);
+ // const countList = res.map(item => +item.count);
+ this.echartsList= res.map(item => +item.count);
+ // this.renderEchart(countList);
})
.catch(err => this.$message.error(err))
}
@@ -192,6 +212,10 @@
display: flex;
padding: 0 2vw;
justify-content: space-between;
+ .point-name{
+ cursor: pointer;
+ color: #66b1ff;
+ }
}
}
}
@@ -214,7 +238,7 @@
}
}
.map {
- height: 488px;
- min-width: 460px;
+ height: 100%;
+ min-width: 80%;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0