+ :
{{ item.alarmResponseTypeName }}
-
{{ item.alarmResponseUnit }}
-
{{ item.alarmAddress }}
+
:{{ item.alarmResponseUnit }}
+
:{{ item.alarmAddress }}
{{ item.alarmResponseContent }}
@@ -69,7 +64,7 @@ export default {
return {
value: '1',
y_data: ['其他纠纷', '家庭纠纷', '其他警情'], // y轴文字
- chart_data: [], // chart表数据
+ chart_data: ['145', '29', '101'], // chart表数据
roll_list: [
// {
// id: '1',
@@ -139,24 +134,17 @@ export default {
timer: null
}
},
- created() {
- this.onPoliceStatistics()
- this.onMetaAlarmInfo()
- },
mounted() {
- // this.init_charts()
+ this.init_charts()
this.timer = setInterval(this.scrollAnimate, 1500)
},
- watch: {
- chart_data: {
- handler(newData) {
- if (newData) this.init_charts(newData)
- },
- immediate: true
- }
+ created() {
+ this.onPoliceStatistics()
+ this.onMetaAlarmInfo()
},
+
methods: {
- init_charts(chart_data) {
+ init_charts() {
let charts = document.getElementById('charts_right')
let resize_div = document.getElementById('charts_right')
let myChart = echarts.init(charts)
@@ -200,8 +188,7 @@ export default {
},
series: [
{
- data: chart_data,
- barWidth: '20%',
+ data: this.chart_data,
type: 'bar',
showBackground: true,
itemStyle: {
@@ -209,7 +196,6 @@ export default {
colorStops: [
{
offset: 0,
- barWidth: '30%',
color: '#1A416B' // 0% 处的颜色
},
{
@@ -248,15 +234,12 @@ export default {
console.log(res, 'eacharts数据')
this.chart_data = res.data.map((item) => item.count)
console.log(this.chart_data)
- // res.data.forEach((element) => {
- // this.y_data.push(element.alarmResponseTypeName)
- // })
},
//警情信息表
async onMetaAlarmInfo() {
const res = await MetaAlarmInfo()
this.roll_list = res.rows
- // console.log(res, '警情信息表')
+ console.log(this.roll_listc, 'oooppp')
}
}
}
@@ -292,7 +275,6 @@ export default {
background-image: url('@/assets/picture/bg_5.png');
background-repeat: no-repeat;
background-size: 100% 100%;
-
.police_status_body_charts {
width: 20vw;
height: 19vh;
@@ -310,47 +292,17 @@ export default {
.rank_left_item {
width: 3vw;
height: 6vh;
- display: flex;
- justify-content: center;
- align-items: center;
- .one {
- color: #ecf4f9;
- font-size: 18px;
- font-weight: 600;
- text-align: center;
- line-height: 4vh;
- width: 2vw;
- height: 4vh;
- background: url('~@/assets/coastalMap/policeStatus/rank_one.png')
- no-repeat;
- background-size: 100% 100%;
- }
- .two {
- color: #ecf4f9;
- font-size: 18px;
- font-weight: 600;
- text-align: center;
- line-height: 4vh;
- width: 2vw;
- height: 4vh;
- background: url('~@/assets/coastalMap/policeStatus/rank_two.png')
- no-repeat;
- background-size: 100% 100%;
- }
- .three {
- color: #ecf4f9;
- font-size: 18px;
- font-weight: 600;
- text-align: center;
- line-height: 4vh;
- width: 2vw;
- height: 4vh;
- background: url('~@/assets/coastalMap/policeStatus/rank_three.png')
- no-repeat;
- background-size: 100% 100%;
- }
+ color: #ecf4f9;
+ font-size: 18px;
+ font-weight: 600;
+ text-align: center;
+ line-height: 6vh;
+ }
+ .one {
+ background: url('~@/assets/coastalMap/policeStatus/rank_one.png')
+ no-repeat;
+ background-size: 100% 100%;
}
-
.two {
background: url('~@/assets/coastalMap/policeStatus/rank_two.png')
no-repeat;
@@ -404,8 +356,8 @@ export default {
position: absolute;
width: 7vw;
height: 2vh;
- top: 0.5vh;
- right: 0.5vw;
+ top: 0px;
+ right: 0px;
color: #fff;
text-align: center;
line-height: 2vh;
diff --git a/src/views/coastalMap/index.vue b/src/views/coastalMap/index.vue
index d2304ad..f0567ed 100644
--- a/src/views/coastalMap/index.vue
+++ b/src/views/coastalMap/index.vue
@@ -26,6 +26,7 @@