|
|
|
@ -5,63 +5,360 @@
|
|
|
|
<div class="police_status_text">警情统计</div>
|
|
|
|
<div class="police_status_text">警情统计</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="police_status_body">
|
|
|
|
<div class="police_status_body">
|
|
|
|
<div class="police_status_body_charts"></div>
|
|
|
|
<!-- 包含排名以及横向柱状图 -->
|
|
|
|
<div class="police_status_body_scroll">
|
|
|
|
<div class="police_status_body_charts">
|
|
|
|
<PoliceScroll></PoliceScroll>
|
|
|
|
<div class="police_status_box">
|
|
|
|
|
|
|
|
<!-- 左边占比 -->
|
|
|
|
|
|
|
|
<div class="rank_left">
|
|
|
|
|
|
|
|
<div class="rank_left_item one">1</div>
|
|
|
|
|
|
|
|
<div class="rank_left_item two">2</div>
|
|
|
|
|
|
|
|
<div class="rank_left_item three">3</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="charts_right" id="charts_right"></div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 滚动 -->
|
|
|
|
|
|
|
|
<div class="roll_body">
|
|
|
|
|
|
|
|
<!-- <PoliceScroll></PoliceScroll> -->
|
|
|
|
|
|
|
|
<ul class="marquee-list" :class="{ 'animate-up': animateUp }">
|
|
|
|
|
|
|
|
<li v-for="item in roll_list" :key="item.id">
|
|
|
|
|
|
|
|
<div class="roll_item">
|
|
|
|
|
|
|
|
<div class="time_box">{{ item.police_time }}</div>
|
|
|
|
|
|
|
|
<div class="roll_item_left">
|
|
|
|
|
|
|
|
<div class="roll_item_text">警情类型</div>
|
|
|
|
|
|
|
|
<div class="roll_item_text">接警单位</div>
|
|
|
|
|
|
|
|
<div class="roll_item_text">事发地址</div>
|
|
|
|
|
|
|
|
<div class="roll_item_text">报警内容</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="roll_item_right">
|
|
|
|
|
|
|
|
<div class="roll_item_value">{{ item.type }}</div>
|
|
|
|
|
|
|
|
<div class="roll_item_value">{{ item.unit }}</div>
|
|
|
|
|
|
|
|
<div class="roll_item_value">{{ item.address }}</div>
|
|
|
|
|
|
|
|
<div class="roll_item_value" :title="item.now_address">{{ item.now_address }}</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
import PoliceScroll from './policeScroll.vue'
|
|
|
|
// import PoliceScroll from "./policeScroll.vue";
|
|
|
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
|
|
|
import EleResize from "@/utils/esresize";
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
name: 'PoliceStatus',
|
|
|
|
name: "PoliceStatus",
|
|
|
|
components: { PoliceScroll },
|
|
|
|
components: {
|
|
|
|
|
|
|
|
//PoliceScroll
|
|
|
|
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return
|
|
|
|
return {
|
|
|
|
|
|
|
|
y_data: ["调解案件", "行政处罚案件", "当场处罚案件"], // y轴文字
|
|
|
|
|
|
|
|
chart_data: ["145", "29", "101"], // chart表数据
|
|
|
|
|
|
|
|
roll_list: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
id:'1',
|
|
|
|
|
|
|
|
type: "机动车",
|
|
|
|
|
|
|
|
unit:'射阳公安局',
|
|
|
|
|
|
|
|
address:'建湖县明星路与冠华路交界处北边',
|
|
|
|
|
|
|
|
police_time: "2023-11-24 13:21:17",
|
|
|
|
|
|
|
|
now_address:'报警人萧婷在建湖县明星路与冠华路交界处北边轿车苏J8MZ63、苏J3KC06相撞。(建湖64号,内线(86158110)) '
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
id:'2',
|
|
|
|
|
|
|
|
type: "机动车",
|
|
|
|
|
|
|
|
unit:'射阳公安局',
|
|
|
|
|
|
|
|
address:'建湖县明星路与冠华路交界处北边',
|
|
|
|
|
|
|
|
police_time: "2023-11-22 14:20:17",
|
|
|
|
|
|
|
|
now_address:'报警人萧婷在建湖县明星路与冠华路交界处北边轿车苏J8MZ63、苏J3KC06相撞。(建湖64号,内线(86158110)) '
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
id:'3',
|
|
|
|
|
|
|
|
type: "机动车",
|
|
|
|
|
|
|
|
unit:'射阳公安局',
|
|
|
|
|
|
|
|
address:'建湖县明星路与冠华路交界处北边',
|
|
|
|
|
|
|
|
police_time: "2023-11-21 09:20:17",
|
|
|
|
|
|
|
|
now_address:'报警人萧婷在建湖县明星路与冠华路交界处北边轿车苏J8MZ63、苏J3KC06相撞。(建湖64号,内线(86158110)) '
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
id:'4',
|
|
|
|
|
|
|
|
type: "机动车",
|
|
|
|
|
|
|
|
unit:'射阳公安局',
|
|
|
|
|
|
|
|
address:'建湖县明星路与冠华路交界处北边',
|
|
|
|
|
|
|
|
police_time: "2023-12-03 14:35:17",
|
|
|
|
|
|
|
|
now_address:'报警人萧婷在建湖县明星路与冠华路交界处北边轿车苏J8MZ63、苏J3KC06相撞。(建湖64号,内线(86158110)) '
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
id:'5',
|
|
|
|
|
|
|
|
type: "机动车",
|
|
|
|
|
|
|
|
unit:'射阳公安局',
|
|
|
|
|
|
|
|
address:'建湖县明星路与冠华路交界处北边',
|
|
|
|
|
|
|
|
police_time: "2023-12-02 13:21:16",
|
|
|
|
|
|
|
|
now_address:'报警人萧婷在建湖县明星路与冠华路交界处北边轿车苏J8MZ63、苏J3KC06相撞。(建湖64号,内线(86158110)) '
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
id:'6',
|
|
|
|
|
|
|
|
type: "机动车",
|
|
|
|
|
|
|
|
unit:'射阳公安局',
|
|
|
|
|
|
|
|
address:'建湖县明星路与冠华路交界处北边',
|
|
|
|
|
|
|
|
police_time: "2023-12-04 13:20:17",
|
|
|
|
|
|
|
|
now_address:'报警人萧婷在建湖县明星路与冠华路交界处北边轿车苏J8MZ63、苏J3KC06相撞。(建湖64号,内线(86158110)) '
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
id:'7',
|
|
|
|
|
|
|
|
type: "机动车",
|
|
|
|
|
|
|
|
unit:'射阳公安局',
|
|
|
|
|
|
|
|
address:'建湖县明星路与冠华路交界处北边',
|
|
|
|
|
|
|
|
police_time: "2023-11-15 13:23:17",
|
|
|
|
|
|
|
|
now_address:'报警人萧婷在建湖县明星路与冠华路交界处北边轿车苏J8MZ63、苏J3KC06相撞。(建湖64号,内线(86158110)) '
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
animateUp: false,
|
|
|
|
|
|
|
|
timer: null,
|
|
|
|
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {},
|
|
|
|
mounted() {
|
|
|
|
methods: {},
|
|
|
|
this.init_charts();
|
|
|
|
computed: {}
|
|
|
|
this.timer = setInterval(this.scrollAnimate, 1500);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
init_charts() {
|
|
|
|
|
|
|
|
let charts = document.getElementById("charts_right");
|
|
|
|
|
|
|
|
let resize_div = document.getElementById("charts_right");
|
|
|
|
|
|
|
|
let myChart = echarts.init(charts);
|
|
|
|
|
|
|
|
// echarts表自适应
|
|
|
|
|
|
|
|
EleResize.on(resize_div, () => {
|
|
|
|
|
|
|
|
myChart.resize();
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
let option = {
|
|
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
|
|
top: "3%",
|
|
|
|
|
|
|
|
left: "3%",
|
|
|
|
|
|
|
|
right: "10%",
|
|
|
|
|
|
|
|
bottom: "3%",
|
|
|
|
|
|
|
|
containLabel: true, // 距离是包含坐标轴上的文字
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
|
|
type: "category",
|
|
|
|
|
|
|
|
data: this.y_data,
|
|
|
|
|
|
|
|
inverse: true, // 倒叙
|
|
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
|
|
color: "#fff",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
|
|
show: false, // 轴线
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
|
|
show: false, // 刻度线
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
series: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
data: this.chart_data,
|
|
|
|
|
|
|
|
type: "bar",
|
|
|
|
|
|
|
|
showBackground: true,
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
|
|
color: {
|
|
|
|
|
|
|
|
colorStops: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
|
|
color: "#1A416B", // 0% 处的颜色
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
|
|
color: "#019FFA", // 100% 处的颜色
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
backgroundStyle: {
|
|
|
|
|
|
|
|
color: "rgba(180, 180, 180, 0.2)",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
label: {
|
|
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
|
|
position: "right",
|
|
|
|
|
|
|
|
color: "white",
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
option && myChart.setOption(option);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
// 滚动播放
|
|
|
|
|
|
|
|
scrollAnimate() {
|
|
|
|
|
|
|
|
this.animateUp = true;
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
|
|
this.roll_list.push(this.roll_list[0]);
|
|
|
|
|
|
|
|
this.roll_list.shift();
|
|
|
|
|
|
|
|
this.animateUp = false;
|
|
|
|
|
|
|
|
}, 500);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
<style lang="scss">
|
|
|
|
.police_status {
|
|
|
|
.police_status {
|
|
|
|
margin-top: 2vh;
|
|
|
|
margin-top: 1.5vh;
|
|
|
|
width: 18vw;
|
|
|
|
width: 18vw;
|
|
|
|
height: 47vh;
|
|
|
|
height: 50vh;
|
|
|
|
// background-color: #fff;
|
|
|
|
// background-color: #fff;
|
|
|
|
|
|
|
|
|
|
|
|
.police_status_header {
|
|
|
|
.police_status_header {
|
|
|
|
height: 4vh;
|
|
|
|
width: 20vw;
|
|
|
|
background-image: url('@/assets/picture/bg_small_title.png');
|
|
|
|
height: 3.5vh;
|
|
|
|
|
|
|
|
background-image: url("@/assets/picture/bg_small_title.png");
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
|
|
|
|
.police_status_text {
|
|
|
|
.police_status_text {
|
|
|
|
|
|
|
|
width: 18vw;
|
|
|
|
|
|
|
|
height: 3.5vh;
|
|
|
|
|
|
|
|
color: antiquewhite;
|
|
|
|
margin-left: 2vw;
|
|
|
|
margin-left: 2vw;
|
|
|
|
font-size: 1vw;
|
|
|
|
font-size: 16px;
|
|
|
|
color: #edf1f7;
|
|
|
|
font-weight: 700;
|
|
|
|
line-height: 4vh;
|
|
|
|
line-height: 3.5vh;
|
|
|
|
text-shadow: 0 0 10px #0b4672;
|
|
|
|
text-shadow: 0px 0px 10px #0b4672;
|
|
|
|
|
|
|
|
letter-spacing: 2px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.police_status_body {
|
|
|
|
.police_status_body {
|
|
|
|
height: 43vh;
|
|
|
|
width: 20vw;
|
|
|
|
background-image: url('@/assets/picture/bg_5.png');
|
|
|
|
height: 46.5vh;
|
|
|
|
|
|
|
|
background-image: url("@/assets/picture/bg_5.png");
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
|
|
|
|
.police_status_body_charts {
|
|
|
|
.police_status_body_charts {
|
|
|
|
height: 15vh;
|
|
|
|
width: 20vw;
|
|
|
|
// background-color: #fb3f3f;
|
|
|
|
height: 19vh;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
.police_status_box {
|
|
|
|
|
|
|
|
width: 19vw;
|
|
|
|
|
|
|
|
height: 18vh;
|
|
|
|
|
|
|
|
background: #0b4672;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
.rank_left {
|
|
|
|
|
|
|
|
width: 3vw;
|
|
|
|
|
|
|
|
height: 18vh;
|
|
|
|
|
|
|
|
.rank_left_item {
|
|
|
|
|
|
|
|
width: 3vw;
|
|
|
|
|
|
|
|
height: 6vh;
|
|
|
|
|
|
|
|
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;
|
|
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.three {
|
|
|
|
|
|
|
|
background: url("~@/assets/coastalMap/policeStatus/rank_three.png")
|
|
|
|
|
|
|
|
no-repeat;
|
|
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.charts_right {
|
|
|
|
|
|
|
|
width: 16vw;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// .police_status_body_scroll {
|
|
|
|
.police_status_body_scroll {
|
|
|
|
// height: 28vh;
|
|
|
|
height: 28vh;
|
|
|
|
// }
|
|
|
|
|
|
|
|
.roll_body {
|
|
|
|
|
|
|
|
width: 20vw;
|
|
|
|
|
|
|
|
height: 27vh;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
.marquee-list {
|
|
|
|
|
|
|
|
width: 20vw;
|
|
|
|
|
|
|
|
height: 27vh;
|
|
|
|
|
|
|
|
padding: 0px;
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
|
|
|
margin-left: 2%;
|
|
|
|
|
|
|
|
margin-right: 2%;
|
|
|
|
|
|
|
|
width: 96%;
|
|
|
|
|
|
|
|
height: 12.5vh;
|
|
|
|
|
|
|
|
background: url("~@/assets/coastalMap/keyPerson/key_li_back.png")
|
|
|
|
|
|
|
|
no-repeat;
|
|
|
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
margin-top: 1vh;
|
|
|
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
|
|
list-style: none;
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
.roll_item {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
height: 12.5vh;
|
|
|
|
|
|
|
|
.time_box {
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
width: 7vw;
|
|
|
|
|
|
|
|
height: 2vh;
|
|
|
|
|
|
|
|
top: 0px;
|
|
|
|
|
|
|
|
right: 0px;
|
|
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
line-height: 2vh;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.roll_item_left {
|
|
|
|
|
|
|
|
width: 5vw;
|
|
|
|
|
|
|
|
height: 12.5vh;
|
|
|
|
|
|
|
|
.roll_item_text {
|
|
|
|
|
|
|
|
color: #ECF4F9;
|
|
|
|
|
|
|
|
height: 25%;
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
line-height: 3vh;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.roll_item_right {
|
|
|
|
|
|
|
|
width: 10vw;
|
|
|
|
|
|
|
|
height: 12.5vh;
|
|
|
|
|
|
|
|
.roll_item_value {
|
|
|
|
|
|
|
|
color: #EDF1F7;
|
|
|
|
|
|
|
|
height: 25%;
|
|
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
|
|
line-height: 3vh;
|
|
|
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.animate-up {
|
|
|
|
|
|
|
|
transition: all 0.8s ease-in-out;
|
|
|
|
|
|
|
|
transform: translateY(-20vh);
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
独树的风
10 months ago
