<template>
|
<div class="leaderIndex-wrap">
|
<div class="leaderIndex-title">
|
<h1>峰峰矿区综合行政执法局智慧泊车平台</h1>
|
<div class="leader-title-left">
|
<h2>欢迎登录，{{userName}}</h2>
|
</div>
|
<div class="logout" @click="logout">
|
退出登录
|
</div>
|
<!-- <div class="leader-title-right" @click="houtaiBtn">-->
|
<!-- <h2>后台管理</h2>-->
|
<!-- </div>-->
|
<div class="weizhang-content">
|
<h2 @click="weizhangBtn(item)" v-if="index < 1" v-for="(item,index) in weizhangList" :key="index">违法车辆：{{item.carNo}}进入{{item.parkName}} {{item.createTime}}</h2>
|
</div>
|
</div>
|
<div class="leaderIndex-main">
|
<div class="leaderIndex-main-left">
|
<div class="leader-left-block">
|
<div class="leader-block-title">
|
<h1>智慧泊车订单处理记录</h1>
|
</div>
|
<div class="leader-block-main">
|
<div class="leader-block-num-box">
|
<div class="leader-block-num-line">
|
<h1><font class="teshuColor">{{tongjiNumObj.data1}}</font>单</h1>
|
<h2>（应缴<font>{{tongjiNumObj.data2}}</font>单）</h2>
|
</div>
|
<h2>今日实缴订单数量</h2>
|
</div>
|
<div class="leader-block-num-box">
|
<div class="leader-block-num-line">
|
<h1><font class="teshuColor">{{tongjiNumObj.data3}}</font>元</h1>
|
</div>
|
<h2>今日订单总金额</h2>
|
</div>
|
<img @click="handleOrderBtn" class="moreIcon" src="../../../assets/images/moreIcon.png" alt="">
|
</div>
|
</div>
|
<div class="leader-left-block">
|
<div class="leader-block-title">
|
<h1>智慧泊车实时出入场记录</h1>
|
</div>
|
<div class="leader-block-main">
|
<div class="leader-block-num-box">
|
<div class="leader-block-num-line">
|
<h1><font class="teshuColor">{{tongjiNumObj.data4}}</font>辆</h1>
|
</div>
|
<h2>今日入场数量</h2>
|
</div>
|
<div class="leader-block-num-box">
|
<div class="leader-block-num-line">
|
<h1><font class="teshuColor">{{tongjiNumObj.data5}}</font>辆</h1>
|
</div>
|
<h2>今日出场数量</h2>
|
</div>
|
<img @click="inAndOutBtn" class="moreIcon" src="../../../assets/images/moreIcon.png" alt="">
|
</div>
|
</div>
|
<div class="leader-left-block">
|
<div class="leader-block-title">
|
<h1>违章车辆执法订单记录</h1>
|
</div>
|
<div class="leader-block-main">
|
<div class="leader-block-num-box">
|
<div class="leader-block-num-line">
|
<h1><font class="teshuColor">{{tongjiNumObj.data6}}</font>单</h1>
|
<h2>（应缴<font>{{tongjiNumObj.data7}}</font>单）</h2>
|
</div>
|
<h2>今日实缴订单数量</h2>
|
</div>
|
<div class="leader-block-num-box">
|
<div class="leader-block-num-line">
|
<h1><font class="teshuColor">{{tongjiNumObj.data8}}</font>元</h1>
|
</div>
|
<h2>今日订单总金额</h2>
|
</div>
|
<img @click="breakLawOrderBtn" class="moreIcon" src="../../../assets/images/moreIcon.png" alt="">
|
</div>
|
</div>
|
</div>
|
<div class="leaderIndex-main-middle">
|
<div class="waitWork">
|
<div class="waitWork-block" @click="daibanBtn">
|
<img src="../../../assets/images/waitIcon1.png" alt="">
|
<h1>我的待办</h1>
|
</div>
|
<div class="show-main-middle-title">
|
<h1>{{nowTime}}</h1>
|
</div>
|
<div class="waitWork-block" @click="zhipaiBtn">
|
<img src="../../../assets/images/waitIcon2.png" alt="">
|
<h1>指派任务</h1>
|
</div>
|
</div>
|
<div class="map-box">
|
<div class="bmView" id="container"></div>
|
</div>
|
<div class="leader-tongji-box">
|
<div class="leader-tongji-dingdan">
|
<div class="leader-dingdan-box">
|
<h1><font class="teshuFont">{{tongjiNumObj.data9}}</font>单</h1>
|
<h1>本月泊车订单数量</h1>
|
</div>
|
<div class="leader-dingdan-box">
|
<h1><font class="teshuFont">{{tongjiNumObj.data10}}</font>元</h1>
|
<h1>本月泊车订单金额</h1>
|
</div>
|
</div>
|
<div class="leader-tongji-echarts-box">
|
<div class="tclyvEcharts" id="zhengticheweiliyonglv"></div>
|
<div class="tclyvEcharts" id="fakuancheliangchengjiaolv"></div>
|
</div>
|
<div class="leader-tongji-dingdan">
|
<div class="leader-dingdan-box">
|
<h1><font class="teshuFont">{{tongjiNumObj.data11}}</font>单</h1>
|
<h1>本月违法车辆订单数量</h1>
|
</div>
|
<div class="leader-dingdan-box">
|
<h1><font class="teshuFont">{{tongjiNumObj.data12}}</font>元</h1>
|
<h1>本月违法车辆订单金额</h1>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="leaderIndex-main-left">
|
<div class="leader-left-block">
|
<div class="leader-block-title">
|
<h1>违章车辆上级指派记录</h1>
|
</div>
|
<div class="leader-block-main">
|
<div class="leader-block-num-box">
|
<div class="leader-block-num-line">
|
<h1><font class="teshuColor">{{tongjiNumObj.data15}}</font>次</h1>
|
</div>
|
<h2>今日指派任务次数</h2>
|
</div>
|
<div class="leader-block-num-box">
|
<div class="leader-block-num-line">
|
<h1><font class="teshuColor">{{tongjiNumObj.data16}}</font>次</h1>
|
</div>
|
<h2>今日完成指派任务</h2>
|
</div>
|
<img @click="shangjiZhipaiBtn" class="moreIcon" src="../../../assets/images/moreIcon.png" alt="">
|
</div>
|
</div>
|
<div class="leader-left-block">
|
<div class="leader-block-title">
|
<h1>违章车辆日常巡街记录</h1>
|
</div>
|
<div class="leader-block-main">
|
<div class="leader-block-num-box">
|
<div class="leader-block-num-line">
|
<h1><font class="teshuColor">{{tongjiNumObj.data17}}</font>单</h1>
|
</div>
|
<h2>今日巡街订单数</h2>
|
</div>
|
<div class="leader-block-num-box">
|
<div class="leader-block-num-line">
|
<h1><font class="teshuColor">{{tongjiNumObj.data18}}</font>元</h1>
|
</div>
|
<h2>今日巡街订单金额</h2>
|
</div>
|
<img @click="xunjieOrderBtn" class="moreIcon" src="../../../assets/images/moreIcon.png" alt="">
|
</div>
|
</div>
|
<div class="leader-left-block">
|
<div class="leader-block-title">
|
<h1>黑名单重点车辆记录</h1>
|
</div>
|
<div class="leader-block-main">
|
<div class="leader-block-num-box">
|
<div class="leader-block-num-line">
|
<h1><font class="teshuColor">{{tongjiNumObj.data19}}</font>辆</h1>
|
</div>
|
<h2>黑名单车辆总数</h2>
|
</div>
|
<div class="leader-block-num-box">
|
<div class="leader-block-num-line">
|
<h1><font class="teshuColor">{{tongjiNumObj.data20}}</font>辆</h1>
|
</div>
|
<h2>今日新增黑名单车辆</h2>
|
</div>
|
<img @click="blackNameBtn" class="moreIcon" src="../../../assets/images/moreIcon.png" alt="">
|
</div>
|
</div>
|
</div>
|
</div>
|
<zhipaiForm ref="zhipaiForm" v-if="zhipaiVisiable"></zhipaiForm>
|
<daibanForm ref="daibanForm" v-if="daibanVisiable"></daibanForm>
|
<blackNameForm ref="blackNameForm" v-if="blackNameVisiable"></blackNameForm>
|
<handleOrderForm ref="handleOrderForm" v-if="handleOrderVisiable"></handleOrderForm>
|
<inAndOutForm ref="inAndOutForm" v-if="inAndOutVisiable"></inAndOutForm>
|
<breakLawOrderForm ref="breakLawOrderForm" v-if="breakLawOrderVisiable"></breakLawOrderForm>
|
<shangjiZhipaiForm ref="shangjiZhipaiForm" v-if="shangjiZhipaiVisiable"></shangjiZhipaiForm>
|
<xunjieOrderForm ref="xunjieOrderForm" v-if="xunjieOrderVisiable"></xunjieOrderForm>
|
<weizhangForm ref="weizhangForm" v-if="weizhangVisiable"></weizhangForm>
|
</div>
|
</template>
|
|
<script>
|
import echarts from "echarts/lib/echarts";
|
import zhipaiForm from "./Dialog/zhipaiForm";
|
import daibanForm from "./Dialog/daibanForm";
|
import blackNameForm from "./Dialog/blackNameForm";
|
import handleOrderForm from "./Dialog/handleOrderForm";
|
import inAndOutForm from "./Dialog/inAndOutForm";
|
import breakLawOrderForm from "./Dialog/breakLawOrderForm";
|
import shangjiZhipaiForm from "./Dialog/shangjiZhipaiForm";
|
import xunjieOrderForm from "./Dialog/xunjieOrderForm";
|
import weizhangForm from "./Dialog/weizhangForm";
|
import BaiduMap from "../../common/baiduMap";
|
export default {
|
name: "leaderIndex",
|
components: {
|
zhipaiForm, //指派
|
daibanForm, //待办
|
blackNameForm, //黑名单
|
handleOrderForm, //智慧泊车订单处理记录
|
inAndOutForm, //出入场记录
|
breakLawOrderForm, //违章车辆执法订单记录
|
shangjiZhipaiForm, //违章车辆上级指派记录
|
xunjieOrderForm, //违章车辆上级指派记录
|
weizhangForm, //违章车辆list详情
|
},
|
data() {
|
return {
|
nowTime:'',
|
nowTimes:null,
|
pageConfig: {
|
getDataUrl: this.$systemconfig.basePath + '/statistic/getData1',
|
getLogoUrl: this.$systemconfig.basePath + '/statistic/getLogo',
|
findAllUrl: this.$systemconfig.basePath + '/user/findAll',
|
illegalCarUrl: this.$systemconfig.basePath + '/notice/illegalCar2',
|
},
|
weizhangTimer:null, //违章list定时器
|
getDataTimer:null, //统计数据定时器
|
findAllTimer:null, //人员时器
|
userName:'', //登录人的名字
|
weizhangList:[], //违章车辆list
|
tongjiNumObj:{
|
data1:'', //停车场今日实缴数量
|
data2:'', //停车场今日应缴数量
|
data3:'', //停车场今日订单数量
|
|
data4:'', //停车场今日入场数量
|
data5:'', //停车场今日出场数量
|
|
data6:'', //违章今日实缴数量
|
data7:'', //违章今日应缴数量
|
data8:'', //违章今日订单总额
|
|
data9:'', //本月泊车订单数
|
data10:'', //本月泊车订总额
|
|
data11:'', //整体车位利用率
|
data12:'', //罚款车辆成交率
|
|
data13:'', //整体车位利用率
|
data14:'', //罚款车位成交率
|
|
data15:'', //今日指派任务次数
|
data16:'', //今日完成数
|
|
data17:'', //今日巡街订单数
|
data18:'', //今日巡街订总额
|
|
data19:'', //黑名单车辆总数
|
data20:'', //今日新增黑名单数
|
},
|
zhipaiVisiable:false, //指派弹框
|
daibanVisiable:false, //待办弹框
|
blackNameVisiable:false, //黑名单
|
handleOrderVisiable:false, //订单处理记录
|
inAndOutVisiable:false, //智慧泊车实时出入场记录
|
breakLawOrderVisiable:false, //违章车辆执法订单记录
|
shangjiZhipaiVisiable:false, //违章车辆日常巡街记录
|
xunjieOrderVisiable:false, //违章车辆上级指派记录
|
weizhangVisiable:false, //违章车辆list详情
|
/*center: {
|
lng: 114.21148,
|
lat: 36.41937
|
},*/
|
zoom: 12.8,
|
addressKeyword: "",
|
reliArry:[], //热力地图的数据
|
lngData:[],
|
heatmapOverlay:{},
|
map:'',
|
centerLng:'114.225914',
|
centerLat:'36.438982',
|
}
|
},
|
mounted() {
|
BaiduMap.init()
|
.then((BMap) => {
|
console.log('地图初始化')
|
this.inits()
|
})
|
this.newTimes()
|
this.userName = this.getStore('name')
|
this.getData()
|
this.$nextTick(() => {
|
this.createMap()
|
})
|
this.illegalCarUrl()
|
this.getDataTimer = setInterval(() => {
|
this.getData()
|
},7200000)
|
// this.getDataTimer = setInterval(this.getData,1000)
|
this.weizhangTimer = setInterval(() => {
|
this.illegalCarUrl()
|
},300000)
|
this.findAllTimer = setInterval(() => {
|
this.createMap()
|
},1200000)
|
},
|
beforeDestroy() {
|
if(this.weizhangTimer) {
|
clearInterval(this.weizhangTimer);
|
}
|
if(this.getDataTimer) {
|
clearInterval(this.getDataTimer);
|
}
|
if(this.findAllTimer) {
|
clearInterval(this.findAllTimer);
|
}
|
},
|
methods:{
|
logout() {
|
this.removeStore('userinfo')
|
this.$router.push('/leaderLogin');
|
},
|
// //显示当前时间（年月日时分秒）
|
timeFormate(timeStamp) {
|
let year = new Date(timeStamp).getFullYear();
|
let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
|
let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
|
let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
|
let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
|
let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
|
let week = new Date(timeStamp).getDay();
|
let weeks = ["日","一","二","三","四","五","六"];
|
let getWeek = "星期" + weeks[week];
|
this.nowTime = year + "年" + month + "月" + date +"日"+" "+hh+":"+mm+':'+ ss+ " "+ getWeek ;
|
},
|
newTimes() {
|
setInterval(()=> {
|
this.timeFormate(new Date())
|
},1000)
|
},
|
weizhangBtn(val) { //违章详情
|
this.weizhangVisiable = true
|
this.$nextTick(() => {
|
this.$refs.weizhangForm.initData(val)
|
})
|
},
|
illegalCarUrl() {
|
this.$byutil.postData4(this,this.pageConfig.illegalCarUrl,null,res => {
|
this.weizhangList = res.data
|
})
|
},
|
houtaiBtn() { //跳转后台页面
|
// window.location.href = 'http://ffkq.hesuancj.cn:38080/#/home'
|
window.open('http://ffkq.hesuancj.cn:38080/#/home','_blank') // 在新窗口打开外链接
|
},
|
getData() {
|
this.$byutil.postData4(this,this.pageConfig.getDataUrl,null,res => {
|
this.tongjiNumObj.data1 = res.data.data1
|
this.tongjiNumObj.data2 = res.data.data2
|
this.tongjiNumObj.data3 = res.data.data3
|
this.tongjiNumObj.data4 = res.data.data4
|
this.tongjiNumObj.data5 = res.data.data5
|
this.tongjiNumObj.data6 = res.data.data6
|
this.tongjiNumObj.data7 = res.data.data7
|
this.tongjiNumObj.data8 = res.data.data8
|
this.tongjiNumObj.data9 = res.data.data9
|
this.tongjiNumObj.data10 = res.data.data10
|
this.tongjiNumObj.data11 = res.data.data11
|
this.tongjiNumObj.data12 = res.data.data12
|
this.tongjiNumObj.data13 = res.data.data13
|
console.log('this.tongjiNumObj.data13--------',this.tongjiNumObj.data13)
|
this.zhengticheweiliyonglv()
|
this.tongjiNumObj.data14 = res.data.data14
|
console.log('this.tongjiNumObj.data14--------',this.tongjiNumObj.data14)
|
this.fakuancheliangchengjiaolv()
|
this.tongjiNumObj.data15 = res.data.data15
|
this.tongjiNumObj.data16 = res.data.data16
|
this.tongjiNumObj.data17 = res.data.data17
|
this.tongjiNumObj.data18 = res.data.data18
|
this.tongjiNumObj.data19 = res.data.data19
|
this.tongjiNumObj.data20 = res.data.data20
|
|
})
|
},
|
xunjieOrderBtn() { //违章车辆日常巡街记录
|
this.xunjieOrderVisiable = true
|
this.$nextTick(() => {
|
this.$refs.xunjieOrderForm.initData()
|
})
|
},
|
shangjiZhipaiBtn() { //违章车辆上级指派记录
|
this.shangjiZhipaiVisiable = true
|
this.$nextTick(() => {
|
this.$refs.shangjiZhipaiForm.initData()
|
})
|
},
|
breakLawOrderBtn() { //违章车辆执法订单记录
|
this.breakLawOrderVisiable = true
|
this.$nextTick(() => {
|
this.$refs.breakLawOrderForm.initData()
|
})
|
},
|
inAndOutBtn() { //智慧泊车实时出入场记录
|
this.inAndOutVisiable = true
|
this.$nextTick(() => {
|
this.$refs.inAndOutForm.initData()
|
})
|
},
|
handleOrderBtn() { //智慧泊车订单处理记录
|
this.handleOrderVisiable = true
|
this.$nextTick(() => {
|
this.$refs.handleOrderForm.initData()
|
})
|
},
|
blackNameBtn() { //黑名单重点车辆
|
this.blackNameVisiable = true
|
this.$nextTick(() => {
|
this.$refs.blackNameForm.initData()
|
})
|
},
|
daibanBtn() { //我的待办
|
this.daibanVisiable = true
|
this.$nextTick(() => {
|
this.$refs.daibanForm.initData()
|
})
|
},
|
zhipaiBtn() { //指派任务
|
this.zhipaiVisiable = true
|
this.$nextTick(() => {
|
this.$refs.zhipaiForm.initData()
|
})
|
},
|
createMap(){ // // 方法 - 创建地图
|
// 在百度地图容器中创建地图实例
|
let map = new BMap.Map("container");
|
// 将map变量存储在全局
|
this.map = map;
|
// let goodsData = require('../../../assets/custom_map_config.json')
|
// 设定地图的中心点和坐标
|
let point = new BMap.Point(this.centerLng, this.centerLat);
|
// let marker = new BMap.Marker(point) // 创建标注
|
// 设置中心点坐标和地图级别
|
this.map.centerAndZoom(point, 1);
|
// 添加自定义覆盖物
|
// this.map.addOverlay(marker) // 将标注添加到地图中
|
// 允许滚轮缩放
|
this.map.enableScrollWheelZoom(point, 15);
|
// 设置地图默认缩放比例
|
this.map.setZoom(15);
|
this.map.setMapStyle({
|
style:'midnight'
|
// styleJson:goodsData
|
});
|
this.addHeatMap(this.map)
|
this.addMarker(this.map,point)
|
|
},
|
addHeatMap(map) { //热力图
|
this.$byutil.postData(this,this.pageConfig.getLogoUrl,null,res => {
|
this.reliArry = res.data
|
this.reliArry.forEach(item => {
|
this.lngData.push({count:70,lat:item.lat,lng:item.lng})
|
})
|
this.heatmapOverlay = new BMapLib.HeatmapOverlay({
|
// 热力图的每个点的半径大小
|
'radius': BMAP_POINT_SIZE_SMALL * 5,
|
// 热力的透明度0~1
|
'opacity': 0.8,
|
// 其中 key 表示插值的位置0~1，value 为颜色值
|
'gradient': {
|
0:'rgb(102, 255, 0)',
|
.5:'rgb(255, 170, 0)',
|
1:'rgb(255, 0, 0)'
|
}
|
});
|
map.addOverlay(this.heatmapOverlay);
|
this.heatmapOverlay.setDataSet({data:this.lngData,max:100});
|
})
|
},
|
addMarker(map,point) { //添加自定义图标
|
this.$byutil.postData(this,this.pageConfig.findAllUrl,null,res => {
|
res.data.forEach(item => {
|
if(item.lat) {
|
point = new BMap.Point(item.lng,item.lat)
|
//设置标注的图标
|
var icon = new BMap.Icon(require('../../../assets/images/mapicon.png'),new BMap.Size(32,32), {
|
anchor: new BMap.Size(0, 0)
|
});
|
//设置标注的经纬度
|
var markers = new BMap.Marker(point,{icon:icon});
|
// var content = `
|
// <table>
|
// <tr>
|
// <td>姓名： ${item.name}</td>
|
// </tr>
|
// </table>
|
// `
|
// var infowindow = new BMap.InfoWindow(content);
|
// markers.addEventListener("click",function(){
|
// this.openInfoWindow(infowindow);
|
// });
|
|
// # 配置好图标再配置图标上的文字(Label)
|
let option = {
|
point: {lng:item.lng, lat:item.lat},
|
offset: {width:-20, height:-18},
|
enableMassClear: true
|
}
|
let label = new window.BMap.Label(item.name, option)
|
markers.setLabel(label) // 放到这个点上
|
|
// # 设置label文字的样式，并添加背景图
|
label.setStyle({
|
color: '#1fd5fc',
|
fontSize: '14px',
|
background:'transparent',
|
border:'none'
|
})
|
|
//把标注添加到地图上
|
map.addOverlay(markers);
|
}
|
})
|
})
|
},
|
getLocationPoint(e) {
|
this.center.lng = e.point.lng;
|
this.center.lat = e.point.lat;
|
/* 创建地址解析器的实例 */
|
let geoCoder = new BMap.Geocoder();
|
/* 获取位置对应的坐标 */
|
geoCoder.getPoint(this.addressKeyword, point => {
|
this.selectedLng = point.lng;
|
this.selectedLat = point.lat;
|
});
|
/* 利用坐标获取地址的详细信息 */
|
// geocoder.getLocation(e.point, res=>{
|
// console.log(res);
|
// })
|
},
|
zhengticheweiliyonglv() { //整体车位利用率
|
//https://www.makeapie.com/editor.html?c=xFkzKG-bpl
|
let myEchart = this.$echarts.init(document.getElementById('zhengticheweiliyonglv'))
|
let angle = 0;//角度，用来做简单的动画效果的
|
let value = this.tongjiNumObj.data13;
|
let option = {
|
title: {
|
text: '{a|'+ value +'}{c|%}',
|
x: 'center',
|
y: 'center',
|
textStyle: {
|
rich:{
|
a: {
|
fontSize: 26,
|
color: '#29EEF3'
|
},
|
|
c: {
|
fontSize: 12,
|
color: '#ffffff',
|
// padding: [5,0]
|
}
|
}
|
}
|
},
|
graphic: [{
|
type: 'text',
|
z: 100,
|
left: 'center',
|
top: '90%',
|
style: {
|
fill: '#34fff8',
|
text: '整体车位利用率',
|
// text: [
|
// '横轴表示温度，单位是°C',
|
// '纵轴表示高度，单位是km',
|
// '右上角有一个图片做的水印',
|
// '这个文本块可以放在图中各',
|
// '种位置'
|
// ].join('\n'),
|
font: '15px Microsoft YaHei'
|
}
|
}],
|
legend: { show: false },
|
series: [ {
|
name: "ring5",
|
type: 'custom',
|
coordinateSystem: "none",
|
renderItem: function(params, api) {
|
return {
|
type: 'arc',
|
shape: {
|
cx: api.getWidth() / 2,
|
cy: api.getHeight() / 2,
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
|
startAngle: (0+angle) * Math.PI / 180,
|
endAngle: (90+angle) * Math.PI / 180
|
},
|
style: {
|
stroke: "#0CD3DB",
|
fill: "transparent",
|
lineWidth: 1.5
|
},
|
silent: true
|
};
|
},
|
data: [0]
|
}, {
|
name: "ring5",
|
type: 'custom',
|
coordinateSystem: "none",
|
renderItem: function(params, api) {
|
return {
|
type: 'arc',
|
shape: {
|
cx: api.getWidth() / 2,
|
cy: api.getHeight() / 2,
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
|
startAngle: (180+angle) * Math.PI / 180,
|
endAngle: (270+angle) * Math.PI / 180
|
},
|
style: {
|
stroke: "#0CD3DB",
|
fill: "transparent",
|
lineWidth: 1.5
|
},
|
silent: true
|
};
|
},
|
data: [0]
|
}, {
|
name: "ring5",
|
type: 'custom',
|
coordinateSystem: "none",
|
renderItem: function(params, api) {
|
return {
|
type: 'arc',
|
shape: {
|
cx: api.getWidth() / 2,
|
cy: api.getHeight() / 2,
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
|
startAngle: (270+-angle) * Math.PI / 180,
|
endAngle: (40+-angle) * Math.PI / 180
|
},
|
style: {
|
stroke: "#0CD3DB",
|
fill: "transparent",
|
lineWidth: 1.5
|
},
|
silent: true
|
};
|
},
|
data: [0]
|
}, {
|
name: "ring5",
|
type: 'custom',
|
coordinateSystem: "none",
|
renderItem: function(params, api) {
|
return {
|
type: 'arc',
|
shape: {
|
cx: api.getWidth() / 2,
|
cy: api.getHeight() / 2,
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
|
startAngle: (90+-angle) * Math.PI / 180,
|
endAngle: (220+-angle) * Math.PI / 180
|
},
|
style: {
|
stroke: "#0CD3DB",
|
fill: "transparent",
|
lineWidth: 1.5
|
},
|
silent: true
|
};
|
},
|
data: [0]
|
}, {
|
name: "ring5",
|
type: 'custom',
|
coordinateSystem: "none",
|
renderItem: function(params, api) {
|
let x0 = api.getWidth() / 2;
|
let y0 = api.getHeight() / 2;
|
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
|
let point = getCirlPoint(x0, y0, r, (90+-angle))
|
return {
|
type: 'circle',
|
shape: {
|
cx: point.x,
|
cy: point.y,
|
r: 4
|
},
|
style: {
|
stroke: "#0CD3DB",//粉
|
fill: "#0CD3DB"
|
},
|
silent: true
|
};
|
},
|
data: [0]
|
}, {
|
name: "ring5", //绿点
|
type: 'custom',
|
coordinateSystem: "none",
|
renderItem: function(params, api) {
|
let x0 = api.getWidth() / 2;
|
let y0 = api.getHeight() / 2;
|
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
|
let point = getCirlPoint(x0, y0, r, (270+-angle))
|
return {
|
type: 'circle',
|
shape: {
|
cx: point.x,
|
cy: point.y,
|
r: 4
|
},
|
style: {
|
stroke: "#0CD3DB", //绿
|
fill: "#0CD3DB"
|
},
|
silent: true
|
};
|
},
|
data: [0]
|
}, {
|
name: '吃猪肉频率',
|
type: 'pie',
|
radius: ['58%', '45%'],
|
silent: true,
|
clockwise: true,
|
startAngle: 90,
|
z: 0,
|
zlevel: 0,
|
label: {
|
normal: {
|
position: "center",
|
|
}
|
},
|
data: [{
|
value: value,
|
name: "",
|
itemStyle: {
|
normal: {
|
color: { // 完成的圆环的颜色
|
colorStops: [{
|
offset: 0,
|
color: '#34fff8' // 0% 处的颜色
|
}, {
|
offset: 1,
|
color: '#a7fffc' // 100% 处的颜色
|
}]
|
},
|
}
|
}
|
},
|
{
|
value: 100-value,
|
name: "",
|
label: {
|
normal: {
|
show: false
|
}
|
},
|
itemStyle: {
|
normal: {
|
color: "#021c2c"
|
}
|
}
|
}
|
]
|
},
|
|
{
|
name: "",
|
type: "gauge",
|
radius: "58%",
|
center: ['50%', '50%'],
|
startAngle: 0,
|
endAngle: 359.9,
|
splitNumber: 8,
|
hoverAnimation: true,
|
axisTick: {
|
show: false
|
},
|
splitLine: {
|
length: 60,
|
lineStyle: {
|
width: 5,
|
color: "#011020"
|
}
|
},
|
axisLabel: {
|
show: false
|
},
|
pointer: {
|
show: false
|
},
|
axisLine: {
|
lineStyle: {
|
opacity: 0
|
}
|
},
|
detail: {
|
show: false
|
},
|
data: [{
|
value: 0,
|
name: ""
|
}]
|
},
|
|
]
|
};
|
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
|
function getCirlPoint(x0, y0, r, angle) {
|
let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
|
let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
|
return {
|
x: x1,
|
y: y1
|
}
|
}
|
// function draw(){
|
// angle = angle+3
|
// myEchart.setOption(option, true)
|
// //window.requestAnimationFrame(draw);
|
// }
|
// setInterval(function() {
|
// //用setInterval做动画感觉有问题
|
// draw()
|
// }, 100);
|
myEchart.setOption(option,false)
|
},
|
fakuancheliangchengjiaolv() { //整体车位利用率
|
//https://www.makeapie.com/editor.html?c=xFkzKG-bpl
|
let myEchart = this.$echarts.init(document.getElementById('fakuancheliangchengjiaolv'))
|
let angle = 0;//角度，用来做简单的动画效果的
|
let value = this.tongjiNumObj.data14;
|
let option = {
|
title: {
|
text: '{a|'+ value +'}{c|%}',
|
x: 'center',
|
y: 'center',
|
textStyle: {
|
rich:{
|
a: {
|
fontSize: 26,
|
color: '#29EEF3'
|
},
|
|
c: {
|
fontSize: 12,
|
color: '#ffffff',
|
// padding: [5,0]
|
}
|
}
|
}
|
},
|
graphic: [{
|
type: 'text',
|
z: 100,
|
left: 'center',
|
top: '90%',
|
style: {
|
fill: '#34fff8',
|
text: '罚款车辆成交率',
|
// text: [
|
// '横轴表示温度，单位是°C',
|
// '纵轴表示高度，单位是km',
|
// '右上角有一个图片做的水印',
|
// '这个文本块可以放在图中各',
|
// '种位置'
|
// ].join('\n'),
|
font: '15px Microsoft YaHei'
|
}
|
}],
|
legend: { show: false },
|
series: [ {
|
name: "ring5",
|
type: 'custom',
|
coordinateSystem: "none",
|
renderItem: function(params, api) {
|
return {
|
type: 'arc',
|
shape: {
|
cx: api.getWidth() / 2,
|
cy: api.getHeight() / 2,
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
|
startAngle: (0+angle) * Math.PI / 180,
|
endAngle: (90+angle) * Math.PI / 180
|
},
|
style: {
|
stroke: "#0CD3DB",
|
fill: "transparent",
|
lineWidth: 1.5
|
},
|
silent: true
|
};
|
},
|
data: [0]
|
}, {
|
name: "ring5",
|
type: 'custom',
|
coordinateSystem: "none",
|
renderItem: function(params, api) {
|
return {
|
type: 'arc',
|
shape: {
|
cx: api.getWidth() / 2,
|
cy: api.getHeight() / 2,
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
|
startAngle: (180+angle) * Math.PI / 180,
|
endAngle: (270+angle) * Math.PI / 180
|
},
|
style: {
|
stroke: "#0CD3DB",
|
fill: "transparent",
|
lineWidth: 1.5
|
},
|
silent: true
|
};
|
},
|
data: [0]
|
}, {
|
name: "ring5",
|
type: 'custom',
|
coordinateSystem: "none",
|
renderItem: function(params, api) {
|
return {
|
type: 'arc',
|
shape: {
|
cx: api.getWidth() / 2,
|
cy: api.getHeight() / 2,
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
|
startAngle: (270+-angle) * Math.PI / 180,
|
endAngle: (40+-angle) * Math.PI / 180
|
},
|
style: {
|
stroke: "#0CD3DB",
|
fill: "transparent",
|
lineWidth: 1.5
|
},
|
silent: true
|
};
|
},
|
data: [0]
|
}, {
|
name: "ring5",
|
type: 'custom',
|
coordinateSystem: "none",
|
renderItem: function(params, api) {
|
return {
|
type: 'arc',
|
shape: {
|
cx: api.getWidth() / 2,
|
cy: api.getHeight() / 2,
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
|
startAngle: (90+-angle) * Math.PI / 180,
|
endAngle: (220+-angle) * Math.PI / 180
|
},
|
style: {
|
stroke: "#0CD3DB",
|
fill: "transparent",
|
lineWidth: 1.5
|
},
|
silent: true
|
};
|
},
|
data: [0]
|
}, {
|
name: "ring5",
|
type: 'custom',
|
coordinateSystem: "none",
|
renderItem: function(params, api) {
|
let x0 = api.getWidth() / 2;
|
let y0 = api.getHeight() / 2;
|
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
|
let point = getCirlPoint(x0, y0, r, (90+-angle))
|
return {
|
type: 'circle',
|
shape: {
|
cx: point.x,
|
cy: point.y,
|
r: 4
|
},
|
style: {
|
stroke: "#0CD3DB",//粉
|
fill: "#0CD3DB"
|
},
|
silent: true
|
};
|
},
|
data: [0]
|
}, {
|
name: "ring5", //绿点
|
type: 'custom',
|
coordinateSystem: "none",
|
renderItem: function(params, api) {
|
let x0 = api.getWidth() / 2;
|
let y0 = api.getHeight() / 2;
|
let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
|
let point = getCirlPoint(x0, y0, r, (270+-angle))
|
return {
|
type: 'circle',
|
shape: {
|
cx: point.x,
|
cy: point.y,
|
r: 4
|
},
|
style: {
|
stroke: "#0CD3DB", //绿
|
fill: "#0CD3DB"
|
},
|
silent: true
|
};
|
},
|
data: [0]
|
}, {
|
name: '吃猪肉频率',
|
type: 'pie',
|
radius: ['58%', '45%'],
|
silent: true,
|
clockwise: true,
|
startAngle: 90,
|
z: 0,
|
zlevel: 0,
|
label: {
|
normal: {
|
position: "center",
|
|
}
|
},
|
data: [{
|
value: value,
|
name: "",
|
itemStyle: {
|
normal: {
|
color: { // 完成的圆环的颜色
|
colorStops: [{
|
offset: 0,
|
color: '#34fff8' // 0% 处的颜色
|
}, {
|
offset: 1,
|
color: '#a7fffc' // 100% 处的颜色
|
}]
|
},
|
}
|
}
|
},
|
{
|
value: 100-value,
|
name: "",
|
label: {
|
normal: {
|
show: false
|
}
|
},
|
itemStyle: {
|
normal: {
|
color: "#021c2c"
|
}
|
}
|
}
|
]
|
},
|
|
{
|
name: "",
|
type: "gauge",
|
radius: "58%",
|
center: ['50%', '50%'],
|
startAngle: 0,
|
endAngle: 359.9,
|
splitNumber: 8,
|
hoverAnimation: true,
|
axisTick: {
|
show: false
|
},
|
splitLine: {
|
length: 60,
|
lineStyle: {
|
width: 5,
|
color: "#011020"
|
}
|
},
|
axisLabel: {
|
show: false
|
},
|
pointer: {
|
show: false
|
},
|
axisLine: {
|
lineStyle: {
|
opacity: 0
|
}
|
},
|
detail: {
|
show: false
|
},
|
data: [{
|
value: 0,
|
name: ""
|
}]
|
},
|
|
]
|
};
|
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
|
function getCirlPoint(x0, y0, r, angle) {
|
let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
|
let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
|
return {
|
x: x1,
|
y: y1
|
}
|
}
|
// function draw(){
|
// angle = angle+3
|
// myEchart.setOption(option, true)
|
// //window.requestAnimationFrame(draw);
|
// }
|
// setInterval(function() {
|
// //用setInterval做动画感觉有问题
|
// draw()
|
// }, 100);
|
myEchart.setOption(option,false)
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.BMap_cpyCtrl { /*百度地图logo*/
|
display: none;
|
}
|
.anchorBL { /*百度地图logo*/
|
display: none;
|
}
|
</style>
|
<style lang="scss" scoped>
|
h1,h2,h3,h4,h5,h6{
|
font-weight: normal;
|
}
|
|
.leaderIndex-wrap{
|
width: 100%;
|
height: 100%;
|
background:url("../../../assets/images/leader-index-bj.jpg") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.leaderIndex-title{
|
width: 100%;
|
height: 0.46875rem /* 90/192 */;
|
background:url("../../../assets/images/leaderShow-title.png") no-repeat center;
|
background-size: 100% 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
h1{
|
font-size: 0.1146rem /* 22/192 */;
|
color: #eff6ff;
|
font-family: '苹方 常规';
|
font-weight: normal;
|
margin-bottom: 22px;
|
}
|
.leader-title-left{
|
position: absolute;
|
left: 0.3183rem /* 40/192 */;
|
top:0.0521rem /* 10/192 */;
|
cursor: pointer;
|
h2{
|
font-size: 0.0625rem /* 12/192 */;
|
color: #fff;
|
}
|
}
|
.leader-title-right{
|
position: absolute;
|
right: 0.2083rem /* 40/192 */;
|
top:0.1042rem /* 20/192 */;
|
cursor: pointer;
|
h2{
|
font-size: 0.0625rem /* 12/192 */;
|
color: #fff;
|
}
|
}
|
.weizhang-content{
|
position: absolute;
|
right: 0.4167rem /* 80/192 */;
|
top:0.3125rem /* 60/192 */;
|
cursor: pointer;
|
h2{
|
font-size: 0.0729rem /* 14/192 */;
|
color: #fff;
|
max-width: 1.4583rem /* 280/192 */;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
}
|
}
|
.leaderIndex-main{
|
width: calc(98% - 0.4167rem /* 80/192 */);
|
height: calc(100% - 0.46875rem );
|
margin:0 auto;
|
display: flex;
|
justify-content: space-between;
|
}
|
.leader-left-block{
|
width: 1.6042rem /* 308/192 */;
|
/*height: 1.4583rem !* 280/192 *!;*/
|
height: calc(33.3% - 0.0521rem);
|
background:rgba(61,136,234,0.14);
|
border:1px solid #0f2d54;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
margin-top: 0.0521rem /* 10/192 */;
|
}
|
.leader-block-title{
|
width: 1.4583rem /* 280/192 */;
|
height: 0.25rem /* 48/192 */;
|
background:url("../../../assets/images/leaderShow-block-title.png") no-repeat center;
|
background-size: 100% 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
h1{
|
color: #fff;
|
font-size: 0.09375rem /* 18/192 */;
|
font-weight: 600;
|
}
|
}
|
.leader-block-main{
|
width: 1.4583rem /* 280/192 */;
|
height: 0.9375rem /* 180/192 */;
|
background:url("../../../assets/images/leaderShow-block-main.png") no-repeat center;
|
background-size: 100% 100%;
|
margin-top: 0.0521rem /* 10/192 */;
|
display: flex;
|
flex-direction: column;
|
padding:0.0521rem /* 10/192 */ 0.1042rem /* 20/192 */;
|
box-sizing: border-box;
|
position: relative;
|
.moreIcon{
|
position: absolute;
|
right: 0.15625rem /* 30/192 */;
|
bottom: 0.0521rem /* 10/192 */;
|
cursor: pointer;
|
width: 0.1042rem /* 20/192 */;
|
height: 0.1042rem /* 20/192 */;
|
}
|
.leader-block-num-box{
|
display: flex;
|
flex-direction: column;
|
margin:0.026rem /* 5/192 */ 0 0 0.0521rem /* 10/192 */;
|
.leader-block-num-line{
|
display: flex;
|
align-items: flex-end;
|
h1{
|
color:#ffffff;
|
font-size: 0.0729rem /* 14/192 */;
|
.teshuColor{
|
font-size: 0.1458rem /* 28/192 */;
|
color: #ffc600;
|
}
|
}
|
}
|
h2{
|
color:#fff;
|
font-size: 0.0729rem /* 14/192 */;
|
}
|
}
|
}
|
.leaderIndex-main-middle{
|
width:5.46875rem /* 1050/192 */;
|
margin:0 0.1042rem /* 20/192 */;
|
height: 100%;
|
}
|
.waitWork{
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.waitWork-block{
|
width: 1.125rem /* 216/192 */;
|
height: 0.3021rem /* 58/192 */;
|
background:url("../../../assets/images/wait-bj.png") no-repeat center;
|
background-size: 100% 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
cursor: pointer;
|
img{
|
width: 0.125rem /* 24/192 */;
|
height: 0.125rem /* 24/192 */;
|
margin-right: 0.0521rem /* 10/192 */;
|
}
|
h1{
|
font-size: 0.0833rem /* 16/192 */;
|
color:#fff;
|
}
|
}
|
.show-main-middle-title{
|
width:2.09375rem /* 402/192 */;
|
height: 0.2083rem /* 40/192 */;
|
background:url("../../../assets/images/midlle-title-bj.png") no-repeat center;
|
background-size: 100% 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
h1{
|
color:#20fbf4;
|
font-size: 0.1042rem /* 20/192 */;
|
}
|
}
|
}
|
.map-box{
|
background:rgba(14,32,76,0.6);
|
border:1px solid #006fff;
|
width: 5.4167rem /* 1040/192 */;
|
margin:0.1042rem /* 20/192 */ auto 0.0521rem /* 10/192 */;
|
height: 2.8125rem /* 540/192 */;
|
.show-main-middle-inside{
|
width: 100%;
|
height: 100%;
|
}
|
.bmView{
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.leader-tongji-box{
|
display: flex;
|
width: 100%;
|
height:1.1979rem /* 230/192 */;
|
max-height: calc(100% - 3.3229rem /* 638/192 */ - 0.1042rem /* 20/192 */);
|
justify-content: space-between;
|
}
|
.leader-tongji-dingdan{
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
}
|
.leader-dingdan-box{
|
width: 0.9792rem /* 188/192 */;
|
height: 0.4167rem /* 80/192 */;
|
background:url("../../../assets/images/leader-dingdan-bj.png") no-repeat center;
|
background-size: 100% 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
margin-top: 0.0521rem /* 10/192 */;
|
h1{
|
font-size: 0.0729rem /* 14/192 */;
|
color: #fff;
|
}
|
.teshuFont{
|
font-size: 0.1146rem /* 22/192 */;
|
color: #fff;
|
}
|
}
|
.tclyvEcharts{
|
width: 1.1458rem /* 220/192 */;
|
height: 100%;
|
}
|
.leader-tongji-echarts-box{
|
display: flex;
|
}
|
.logout{
|
width: 0.5208rem /* 100/192 */;
|
height: 0.1667rem /* 32/192 */;
|
background: url('../../../assets/images/wait-bj.png') no-repeat center;
|
background-size: 100% 100%;
|
position: absolute;
|
right: 0.3183rem /* 50/75 */;
|
top:0.0729rem /* 14/192 */;
|
color: #fff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor:pointer;
|
}
|
</style>
|
