<template>
|
<div class="containerEmage">
|
<!-- <div class="left">-->
|
<!-- <div class="left1">-->
|
<!-- <div class="title"><span>园区车辆预警统计</span></div>-->
|
<!-- <div class="left1Msg">-->
|
<!-- <scroll></scroll>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div class="left2">-->
|
<!-- <div class="title"><span>车辆列表</span></div>-->
|
<!-- <tablist class="talelist"></tablist>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div class="right">-->
|
<!-- <div class="right1">-->
|
<!-- <div class="title"><span>实时车辆违章统计</span></div>-->
|
<!-- <div class="right1chart" id="AQrightchart1">-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div class="right2">-->
|
<!-- <div class="title"><span>园区实时车辆进出统计</span></div>-->
|
<!-- <div class="right2msg">-->
|
<!-- <div class="right2msg1">-->
|
<!-- <img src="../../../assets/image/Right/Emergency/实时车辆图标1.png" />-->
|
<!-- </div>-->
|
<!-- <div class="right2msg2">-->
|
<!-- <img src="../../../assets/image/Right/Emergency/实时车辆图标2.png" />-->
|
<!-- </div>-->
|
<!-- <div class="right2msg3">-->
|
<!-- <img src="../../../assets/image/Right/Emergency/实时车辆图标3.png" />-->
|
<!-- </div>-->
|
<!-- -->
|
<!-- <div class="right2msglabel">-->
|
<!-- <span class="span1"><span>{{CarStateTG.QB}}</span><span class="span11">辆</span></span>-->
|
<!-- <span class="span2">园区车辆统计总数</span>-->
|
<!-- </div>-->
|
<!-- <div class="right2msglabel">-->
|
<!-- <span class="span1"><span>{{CarStateTG.ZX}}</span><span class="span11">辆</span></span>-->
|
<!-- <span class="span2">园区车辆进入数量</span>-->
|
<!-- </div>-->
|
<!-- <div class="right2msglabel">-->
|
<!-- <span class="span1"><span>{{CarStateTG.LX}}</span><span class="span11">辆</span></span>-->
|
<!-- <span class="span2">园区车辆离开数量</span>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- <div class="right3">-->
|
<!-- <div class="title"><span>实时车位使用情况统计</span></div>-->
|
<!-- <div class="rightchart3" id="AQrightchart3">-->
|
<!-- -->
|
<!-- -->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
</div>
|
</template>
|
|
<script>
|
import {axios_get,axios_post } from '../../../until/request.js'
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
import scroll from './scroll.vue'
|
import tablist from './Tablelist.vue'
|
export default {
|
components: {
|
vueSeamlessScroll,scroll,tablist
|
},
|
data() {
|
return {
|
chart1: {},
|
chart1option: {},
|
CarStateTG:{
|
QB:0,
|
ZX:0,
|
LX:0
|
}
|
|
}
|
},
|
mounted() {
|
// this.DrawChart1();
|
// this.DrawChart2();
|
|
// this.GetCarWarn();
|
// this.GetCarState();
|
// this.GetCarType();
|
},
|
|
methods: {
|
//车辆预警信息
|
GetCarWarn(){
|
axios_post("/emergency/countCarWarning").then(response=>{
|
let echartData=[];
|
for(let i=0;i<response.data.length;i++){
|
let obj={
|
name:response.data[i].atpName,
|
value: response.data[i].countNum
|
}
|
echartData.push(obj);
|
}
|
this.DrawChart1(echartData);
|
})
|
},
|
|
//获取车辆运行状态统计
|
GetCarState(){
|
axios_post("/emergency/countCarStatus").then(response=>{
|
//console.log(response);
|
|
for(let i=0;i<response.data.length;i++){
|
if(response.data[i].vehicleStatus=="全部"){
|
this.CarStateTG.QB=response.data[i].countNum;
|
}
|
if(response.data[i].vehicleStatus=="在线"){
|
this.CarStateTG.ZX=response.data[i].countNum;
|
}
|
if(response.data[i].vehicleStatus=="离线"){
|
this.CarStateTG.LX=response.data[i].countNum;
|
}
|
}
|
})
|
|
|
},
|
|
|
//获取车辆类型统计
|
GetCarType(){
|
axios_post("/emergency/countCarType").then(response=>{
|
let dataY=[];
|
for(let i=0;i<response.data.length;i++){
|
let obj={ value: response.data[i].countNum, name: response.data[i].vehicleTypeName };
|
dataY.push(obj);
|
}
|
this.DrawChart2(dataY);
|
|
})
|
|
|
},
|
|
|
|
|
DrawChart1(echartData) {
|
|
// echartData = [{
|
// name: "A类",
|
// value: "3720"
|
// },
|
// {
|
// name: "B类",
|
// value: "2920"
|
// },
|
// {
|
// name: "C类",
|
// value: "2200"
|
// },
|
// {
|
// name: "D类",
|
// value: "1420"
|
// },
|
// {
|
// name: "E类",
|
// value: "3200"
|
// },
|
// {
|
// name: "F类",
|
// value: "2420"
|
// }
|
// ];
|
this.chart1 = this.$echarts.init(document.getElementById("AQrightchart1"));
|
let bgColor = '#001037';
|
let title = '总量';
|
let color = ['#38cafb', '#4caff9', '#4adeca', '#2aa7ee', '#0270f2', '#488cf7'];
|
|
|
let formatNumber = function(num) {
|
let reg = /(?=(\B)(\d{3})+$)/g;
|
return num.toString().replace(reg, ',');
|
}
|
let total = echartData.reduce((a, b) => {
|
return a + b.value * 1
|
}, 0);
|
|
this.chart1option = {
|
color: color,
|
tooltip: {
|
trigger: 'item',
|
textStyle: {
|
fontSize: 28
|
}
|
},
|
|
series: [{
|
type: 'pie',
|
roseType: 'radius',
|
radius: ['50%', '70%'],
|
center: ['50%', '50%'],
|
data: echartData,
|
hoverAnimation: false,
|
itemStyle: {
|
normal: {
|
borderColor: bgColor,
|
borderWidth: 2
|
}
|
},
|
labelLine: {
|
normal: {
|
length: 20,
|
length2: 120,
|
lineStyle: {
|
// color: '#e6e6e6'
|
}
|
}
|
},
|
label: {
|
normal: {
|
formatter: params => {
|
return (
|
'{icon|●}{name|' + params.name + '}\n{value|' +
|
formatNumber(params.value) + '}'
|
);
|
},
|
// padding: [0 , -100, 25, -100],
|
rich: {
|
icon: {
|
fontSize: 28,
|
color: 'inherit'
|
},
|
name: {
|
fontSize: 28,
|
padding: [0, 0, 0, 10],
|
color: '#fefefe'
|
},
|
value: {
|
fontSize: 28 ,
|
fontWeight: 'bolder',
|
padding: [10, 0, 0, 20],
|
color: 'inherit'
|
// color: '#333333'
|
}
|
}
|
}
|
},
|
}]
|
};
|
|
|
this.chart1.setOption(this.chart1option);
|
},
|
|
DrawChart2(dataY){
|
// dataY=[
|
// { value: 1048, name: '公共车位' },
|
// { value: 735, name: '临时车位' },
|
// { value: 580, name: '充电车位' },
|
// { value: 484, name: '消防车位' },
|
// { value: 300, name: ' 其他车位' }
|
// ];
|
|
|
this.chart1 = this.$echarts.init(document.getElementById("AQrightchart3"));
|
// const title = {
|
// text: '网络/安全设备',
|
// textStyle: {
|
// color: '#fff',
|
// fontSize: 16,
|
// },
|
// padding: 0,
|
// top: 35,
|
// left: 'center',
|
// };
|
const legend = {
|
//data，就是取得每个series里面的name属性。
|
// orient: 'vertical',
|
icon: 'circle', //图例形状
|
padding: 0,
|
top: 'bottom',
|
// right: 40,
|
itemWidth: 18, //小圆点宽度
|
itemHeight: 18, // 小圆点高度
|
itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
|
textStyle: {
|
fontSize: 28,
|
color: '#ffffff',
|
},
|
};
|
const tooltip = {
|
show: true,
|
formatter: '{b}:{d}%',
|
textStyle: {
|
fontSize: 28
|
}
|
};
|
const color = ['#056BBB', '#8CABF5', '#9AFFF1', '#00ED9E', '#FFD100'];
|
this.chart1option = {
|
color,
|
// title,
|
tooltip,
|
legend,
|
|
series: [
|
{
|
name: '网络安全设备',
|
type: 'pie',
|
center: ['50%', '50%'], //圆心的位置
|
top: '2%', //单单指的饼图距离上面的距离，top越大饼图越小
|
left: '0%', //单单指的饼图距离左面的距离，会改变饼图的大小
|
radius: ['40%', '80%'], //环形图的本质就在这里 [内半径!=0，外半径] 外半径越大，圆越大
|
avoidLabelOverlap: false, //做同心圆用到
|
clockwise:false, //顺时针排列
|
startAngle: 160, //起始角度 影响不大
|
// roseType:"area", //area|radius
|
itemStyle: {
|
borderRadius: 8
|
},
|
label: {
|
fontSize:28,
|
show: false, //false不显示饼图上的标签
|
position: 'outside', //inside（在饼图上显示）,outside(默认就会出现引导线) center
|
formatter: '{b}:{c}',
|
},
|
|
|
//只有设置了label:show=ture;position=outside 设置labelLine才会有效
|
labelLine: {
|
show: false, //显示引导线
|
length: 30, //连接饼图第1段线条的长度 length length2 不写自适应
|
length2: 10, //链接饼图第2段线条长度
|
smooth: true, //是否光滑连接线
|
},
|
itemStyle: {
|
//每个扇形的设置
|
borderColor: 'rgba(0,0,0,.1)', //扇形边框颜色
|
borderWidth: 0, //扇形边框大小 要先给borderColor颜色 设置borderWidth才会有效果
|
|
},
|
data:dataY , //数组从大到小排序
|
|
emphasis: {
|
scale: true,
|
scaleSize: 10,
|
|
//启用鼠标放上去放大效果，这个挺好的
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
},
|
},
|
},
|
],
|
};
|
|
this.chart1.setOption(this.chart1option);
|
|
|
}
|
|
|
},
|
|
|
|
computed: {
|
defaultOption() {
|
return {
|
step: 0.2, // 数值越大速度滚动越快
|
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
|
hoverStop: true, // 是否开启鼠标悬停stop
|
direction: 1, // 0向下 1向上 2向左 3向右
|
openWatch: true, // 开启数据实时监控刷新dom
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
}
|
}
|
|
},
|
|
|
|
|
|
}
|
</script>
|
|
<style scoped="scoped" lang="less">
|
.containerEmage {
|
height: 100%;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-around;
|
|
.left,
|
.right {
|
width: 49%;
|
height: 100%;
|
}
|
|
.left1 {
|
// background-color: blue;
|
height: 60%;
|
width: 100%;
|
.left1Msg{
|
margin-top: 20px;
|
height: calc(100% - 112px);
|
width: 100%;
|
}
|
}
|
|
.left2 {
|
// background-color: red;
|
height: 38%;
|
width: 100%;
|
.talelist{
|
margin-top: 20px;
|
height: calc(100% - 112px);
|
width: 100%;
|
}
|
|
}
|
|
.right1,
|
.right2,
|
.right3 {
|
width: 100%;
|
height: 33%;
|
}
|
|
.right1chart {
|
height: calc(100% - 72px);
|
width: 100%;
|
}
|
.right2msg{
|
margin-top: 50px;
|
height: calc(100% - 172px);
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
flex-wrap: wrap;
|
align-items: flex-start;
|
justify-content: space-around;
|
.right2msg1,.right2msg2,.right2msg3{
|
width: 30%;
|
height: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.right2msglabel{
|
height: 30%;
|
width: 30%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
.span1{
|
width: 100%;
|
height: 50%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: center;
|
font-size: 38px;
|
font-family: MyTime;
|
color: yellow;
|
.span11{
|
font-size: 28px;
|
text-indent: 20px;
|
color: #FFFFFF;
|
}
|
}
|
.span2{
|
color: #FFFFFF;
|
font-size: 28px;
|
}
|
}
|
|
|
|
|
}
|
.rightchart3{
|
margin-top: 20px;
|
height: calc(100% - 92px);
|
width: 100%;
|
}
|
|
|
|
|
}
|
|
|
.title {
|
width: 100%;
|
height: 72px;
|
background-image: url(../../../assets/image/Left/titleD.png);
|
background-size: 100% 100%;
|
font-family: MytitileName;
|
font-size: 36px;
|
display: flex;
|
align-items: center;
|
color: #98deff;
|
letter-spacing: 3px;
|
|
span {
|
width: 70%;
|
text-indent: 70px;
|
}
|
|
}
|
|
.warp::-webkit-scrollbar {
|
display: none;
|
}
|
|
.warp::-webkit-scrollbar {
|
display: none;
|
}
|
|
|
.seamless-warp {
|
overflow: hidden;
|
}
|
</style>
|
