<template>
|
<div class="dapingzhanshi-wrap">
|
<div class="daping-main-box">
|
<div class="daping-top animate__animated animate__fadeInLeft">
|
<div class="daping-top-block">
|
<div class="top-block-inside">
|
<div class="show-top-block-icon icon1">
|
</div>
|
<div class="shichang-content">
|
<h1>{{marketObj.total}}</h1>
|
<h2>市场主体总数</h2>
|
</div>
|
</div>
|
<div class="top-block-inside2">
|
<div class="shichang-block">
|
<h1>个体</h1>
|
<h2>{{marketObj.geti}}</h2>
|
</div>
|
<div class="shichang-block">
|
<h1>公民</h1>
|
<h2>{{marketObj.gongmin}}</h2>
|
</div>
|
<div class="shichang-block">
|
<h1>经营者</h1>
|
<h2>{{marketObj.faren}}</h2>
|
</div>
|
<div class="shichang-block">
|
<h1>其它</h1>
|
<h2>{{marketObj.qita}}</h2>
|
</div>
|
</div>
|
</div>
|
<div class="daping-top-block">
|
<div class="top-block-inside">
|
<div class="show-top-block-icon icon2">
|
</div>
|
<div class="shichang-content">
|
<h1>{{falvObj.total || 0}}</h1>
|
<h2>法律法规</h2>
|
</div>
|
</div>
|
<div class="top-block-inside2">
|
<div class="shichang-block">
|
<h1>法律</h1>
|
<h2>{{falvObj.falv || 0}}</h2>
|
</div>
|
<div class="shichang-block">
|
<h1>法规</h1>
|
<h2>{{falvObj.fagui || 0}}</h2>
|
</div>
|
<div class="shichang-block">
|
<h1>规章</h1>
|
<h2>{{falvObj.guizhang || 0}}</h2>
|
</div>
|
</div>
|
</div>
|
<div class="daping-top-block">
|
<div class="top-block-inside">
|
<div class="show-top-block-icon icon3">
|
</div>
|
<div class="shichang-content">
|
<h1>{{CaseNumObj.total}}</h1>
|
<h2>案件数</h2>
|
</div>
|
</div>
|
<div class="top-block-inside2">
|
<div class="shichang-block">
|
<h1>简易程序</h1>
|
<h2>{{CaseNumObj.easyCase}}</h2>
|
|
</div>
|
<div class="shichang-block">
|
<h1>一般程序</h1>
|
<h2>{{CaseNumObj.caseNum}}</h2>
|
</div>
|
</div>
|
</div>
|
<div class="daping-top-block">
|
<div class="top-block-inside">
|
<div class="show-top-block-icon icon4">
|
</div>
|
<div class="shichang-content">
|
<h1>{{rounding(getMoneyNumObj.moneyTotal)|| 0}}<font style="font-size: 0.046875rem /* 12/256 */">万元</font></h1>
|
<h2>罚没资金</h2>
|
</div>
|
</div>
|
<div class="top-block-inside2">
|
<div class="shichang-block">
|
<h1>笔数</h1>
|
<h2>{{getMoneyNumObj.biTotal || 0}}</h2>
|
</div>
|
<div class="shichang-block">
|
<h1>案件数</h1>
|
<h2>{{getMoneyNumObj.caseTotal || 0}}</h2>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="daping-middle animate__animated animate__fadeInRight">
|
<div class="shixiang-box">
|
</div>
|
<div class="shixiang-content">
|
<h1>{{powersTotal}}</h1>
|
<h2>本年度案件数量</h2>
|
</div>
|
<div class="shixiang-content2">
|
<div class="caseNumEcharts" id="caseNumEcharts"></div>
|
<!--<div class="shixiang-content2-block" v-for="(item,index) in powersData" :key="index">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>{{item.name}}: {{item.num}}</h1>
|
</div>-->
|
<!--<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>农业农村：253</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>城市管理：166</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>发展改革：38</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>交通运输：205</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>教育体育：24</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>林业和草原：98</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>民政：45</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>民族宗教：7</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>人力资源社会保障：51</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>商务：16</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>水利：47</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>卫生健康：202</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>住房城乡建设：211</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>自然资源规划：107</h1>
|
</div>-->
|
<!--<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>水利：51</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>民政：45</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>民族宗教：7</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>农业农村：236</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>水利：51</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>民政：45</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>民族宗教：7</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>农业农村：236</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>水利：51</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>民政：45</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>民族宗教：7</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>农业农村：236</h1>
|
</div>
|
<div class="shixiang-content2-block">
|
<img src="../../assets/images/anjianIcon.png" alt="">
|
<h1>水利：51</h1>
|
</div>-->
|
</div>
|
</div>
|
<div class="daping-bottom">
|
<div class="map-left mapLeft animate__animated animate__fadeInLeft">
|
<div class="map-left-title title1">
|
<h1>案件排名</h1>
|
</div>
|
<div class="map-left-main1">
|
<vue-seamless-scroll :data="teamData" :class-option="classOption">
|
<div class="map-main-line" v-for="(item,index) in teamData" :key="index">
|
<div class="main1-block">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<h1>{{item.teamName}}</h1>
|
</div>
|
<div class="main1-block2">
|
<h1>{{item.num}}</h1>
|
<!--<h1>{{item.caseState | caseStateFilter}}</h1>-->
|
</div>
|
</div>
|
</vue-seamless-scroll>
|
<!--<div class="map-main-line">
|
<div class="main1-block">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<h1>杨凯</h1>
|
</div>
|
<div class="main1-block2">
|
<h1>办理案件：156</h1>
|
</div>
|
</div>
|
<div class="map-main-line">
|
<div class="main1-block">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<h1>蔺有智</h1>
|
</div>
|
<div class="main1-block2">
|
<h1>办理案件：145</h1>
|
</div>
|
</div>
|
<div class="map-main-line">
|
<div class="main1-block">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<h1>高超鑫</h1>
|
</div>
|
<div class="main1-block2">
|
<h1>办理案件：131</h1>
|
</div>
|
</div>
|
<div class="map-main-line">
|
<div class="main1-block">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<h1>王春杰</h1>
|
</div>
|
<div class="main1-block2">
|
<h1>办理案件：126</h1>
|
</div>
|
</div>
|
<div class="map-main-line">
|
<div class="main1-block">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<h1>马智慧</h1>
|
</div>
|
<div class="main1-block2">
|
<h1>办理案件：117</h1>
|
</div>
|
</div>-->
|
</div>
|
<div class="map-left-title title2">
|
<h1>重大行政处罚案件</h1>
|
</div>
|
<div class="map-left-main1 zhongdaxingzhenganjian-box">
|
<div class="zhongdaxingzheng-inside">
|
<vue-seamless-scroll :data="hotCaseData" :class-option="classOption">
|
<div class="map-main-line" v-for="(item,index) in hotCaseData" :key="index">
|
<div class="main1-block">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<tooltipOver class="tooltip-daping-box" ref="hotCaseRef" :content="item.name">
|
</tooltipOver>
|
</div>
|
<!--<div class="main1-block2">
|
<h1>{{item.isOver | isOverFilter}}</h1>
|
</div>-->
|
</div>
|
</vue-seamless-scroll>
|
</div>
|
<!-- <div class="map-main-line">
|
<div class="main1-block">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<el-tooltip class="item" effect="dark" content="蔺密娥涉嫌经营劣质农药案" placement="top-start">
|
<h1>蔺密娥涉嫌经营劣质农药案</h1>
|
</el-tooltip>
|
</div>
|
<!–<div class="main1-block2">
|
<h1>进行中</h1>
|
</div>–>
|
</div>
|
<div class="map-main-line">
|
<div class="main1-block">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<el-tooltip class="item" effect="dark" content="发现邯郸市峰峰新坡镇羊一农资服务站涉嫌采购、销售标签不符合规定的农药案" placement="top-start">
|
<h1>发现邯郸市峰峰新坡镇羊一农资服务站涉嫌采购、销售标签不符合规定的农药案</h1>
|
</el-tooltip>
|
</div>
|
<!–<div class="main1-block2">
|
<h1>进行中</h1>
|
</div>–>
|
</div>
|
<div class="map-main-line">
|
<div class="main1-block">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<el-tooltip class="item" effect="dark" content="常志军涉嫌运输渣土过程中未依法采取有效措施防治扬尘污染案" placement="top-start">
|
<h1>常志军涉嫌运输渣土过程中未依法采取有效措施防治扬尘污染案</h1>
|
</el-tooltip>
|
</div>
|
<!–<div class="main1-block2">
|
<h1>已结案</h1>
|
</div>–>
|
</div>
|
<div class="map-main-line">
|
<div class="main1-block">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<el-tooltip class="item" effect="dark" content="孟文江涉嫌未取得采矿许可证擅自采矿案" placement="top-start">
|
<h1>孟文江涉嫌未取得采矿许可证擅自采矿案</h1>
|
</el-tooltip>
|
</div>
|
<!–<div class="main1-block2">
|
<h1>已结案</h1>
|
</div>–>
|
</div>-->
|
</div>
|
</div>
|
<div class="map-middle animate__animated animate__fadeInUp">
|
<baidu-map
|
:center="center"
|
:zoom="zoom"
|
class="bm-view"
|
@ready="handler">
|
</baidu-map>
|
</div>
|
<div class="map-left mapRight animate__animated animate__fadeInRight">
|
<div class="map-left-title title3">
|
<h1>未办理案件</h1>
|
</div>
|
<div class="map-left-main1">
|
<div class="map-main-line" v-for="(item,index) in notCaseData" :key="index">
|
<div class="main1-block">
|
<img src="../../assets/images/zhifaIcon.png" alt="">
|
<tooltipOver class="tooltip-daping-box" ref="notCaseRef" :content="item.name">
|
</tooltipOver>
|
</div>
|
<div class="main1-block2">
|
<h1>{{item.recordTime}}</h1>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import {getLawNums,getCaseNums,getMoneyNum,getpowers,getCasePlace,getNotCase,getTeam,getHotCase} from '@/api/show/index'
|
import {getAllNums} from '@/api/company'
|
import tooltipOver from "../../components/tooltipOver/tooltipOver";
|
import VueSeamlessScroll from 'vue-seamless-scroll/src';
|
import {rounding} from "../../libs/rounding";
|
import echarts from 'echarts/lib/echarts'
|
import nowSize from "../../libs/nowSize";
|
|
export default {
|
name: "index",
|
components: {
|
tooltipOver,
|
VueSeamlessScroll
|
},
|
filters: {
|
caseStateFilter(val) {
|
if(val) {
|
if(val == 0) {
|
return '执行中'
|
}else if(val == 1) {
|
return '未执行'
|
}
|
}
|
},
|
isOverFilter(val) {
|
if(val) {
|
if(val == 0) {
|
return '进行中'
|
}else if(val == 1) {
|
return '已结案'
|
}
|
}
|
}
|
},
|
computed: {
|
classOption() {
|
return {
|
step: 0.2, // 数值越大速度滚动越快
|
limitMoveNum: 5, // 开始无缝滚动的数据量 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)
|
}
|
}
|
},
|
data() {
|
return {
|
xlist: ["滏阳东路街道", "临水镇", "峰峰镇", "新坡镇", "大社镇", "和村镇", "义井镇", "彭城镇", "界城镇", "大峪镇", "西固义乡"],
|
ylist: [
|
{
|
name: '2020',
|
list: [
|
{
|
"name": "滏阳东路街道",
|
"value":152
|
},
|
{
|
"name": "临水镇",
|
"value": 123
|
},
|
{
|
"name": "峰峰镇",
|
"value": 100
|
},
|
{
|
"name": "新坡镇",
|
"value": 99
|
},
|
{
|
"name": "大社镇",
|
"value": 93
|
},
|
{
|
"name": "和村镇",
|
"value": 89
|
},
|
{
|
"name": "义井镇",
|
"value": 78
|
},
|
{
|
"name": "彭城镇",
|
"value": 66
|
},
|
{
|
"name": "界城镇",
|
"value": 61
|
},
|
{
|
"name": "大峪镇",
|
"value": 53
|
},
|
{
|
"name": "西固义乡",
|
"value": 43
|
}
|
]
|
},
|
{
|
name: '2021',
|
list: [
|
{
|
"name": "滏阳东路街道",
|
"value":290
|
},
|
{
|
"name": "临水镇",
|
"value": 280
|
},
|
{
|
"name": "峰峰镇",
|
"value": 270
|
},
|
{
|
"name": "新坡镇",
|
"value": 266
|
},
|
{
|
"name": "大社镇",
|
"value": 256
|
},
|
{
|
"name": "和村镇",
|
"value": 208
|
},
|
{
|
"name": "义井镇",
|
"value": 180
|
},
|
{
|
"name": "彭城镇",
|
"value": 100
|
},
|
{
|
"name": "界城镇",
|
"value": 89
|
},
|
{
|
"name": "大峪镇",
|
"value": 71
|
},
|
{
|
"name": "西固义乡",
|
"value": 62
|
}
|
]
|
},
|
{
|
name: '2022',
|
list: [
|
{
|
"name": "滏阳东路街道",
|
"value":286
|
},
|
{
|
"name": "临水镇",
|
"value": 230
|
},
|
{
|
"name": "峰峰镇",
|
"value": 210
|
},
|
{
|
"name": "新坡镇",
|
"value": 198
|
},
|
{
|
"name": "大社镇",
|
"value": 180
|
},
|
{
|
"name": "和村镇",
|
"value": 165
|
},
|
{
|
"name": "义井镇",
|
"value": 130
|
},
|
{
|
"name": "彭城镇",
|
"value": 102
|
},
|
{
|
"name": "界城镇",
|
"value": 90
|
},
|
{
|
"name": "大峪镇",
|
"value": 79
|
},
|
{
|
"name": "西固义乡",
|
"value": 71
|
}
|
]
|
}
|
],
|
center: { lng: 116.395645, lat: 39.929986 },
|
zoom: 6,
|
mapObj:{},
|
marketObj:{
|
faren: 0,
|
gongmin: 0,
|
qita: 0,
|
total: 0
|
},
|
falvObj:{ //法律法规
|
falv:0, //法律
|
fagui:0, //法规
|
guizhang:0, //规章
|
total:0, //法律法规总数
|
},
|
CaseNumObj: {
|
caseNum: 0,
|
easyCase: 0,
|
total: 11
|
},
|
getMoneyNumObj: {
|
forfeit:0,
|
caseNumber:0,
|
total:0
|
},
|
powersTotal:669, //执法事项清单
|
powersData: [], //执法事项清单
|
mapData:[], //地图数据
|
notCaseData:[],
|
teamData:[{ //案件排名data
|
teamName: '综合执法二大队',
|
num:'办理案件176件'
|
},{ //案件排名data
|
teamName: '综合执法一大队',
|
num:'办理案件156件'
|
},{ //案件排名data
|
teamName: '综合执法四大队',
|
num:'办理案件128件'
|
},{ //案件排名data
|
teamName: '综合执法三大队',
|
num:'办理案件112件'
|
},{ //案件排名data
|
teamName: '综合执法七大队',
|
num:'办理案件98件'
|
},{ //案件排名data
|
teamName: '综合执法六大队',
|
num:'办理案件95件'
|
},{ //案件排名data
|
teamName: '综合执法五大队',
|
num:'办理案件85件'
|
},{ //案件排名data
|
teamName: '临水镇执法队',
|
num:'办理案件55件'
|
},{ //案件排名data
|
teamName: '峰峰执法队',
|
num:'办理案件53件'
|
},{ //案件排名data
|
teamName: '和村镇执法队',
|
num:'办理案件50件'
|
}],
|
hotCaseData:[{
|
name: '蔺密娥涉嫌经营劣质农药案'
|
},{
|
name: '发现邯郸市峰峰新坡镇羊一农资服务站涉嫌采购、销售标签不符合规定的农药案'
|
},{
|
name: '常志军涉嫌运输渣土过程中未依法采取有效措施防治扬尘污染案'
|
},{
|
name: '孟文江涉嫌未取得采矿许可证擅自采矿案'
|
},{
|
name: '孟文江涉嫌未取得采矿许可证擅自采矿案'
|
}],
|
}
|
},
|
created() {
|
this.getNotCase() //未完成案件
|
this.getAllNums() //市场主体接口
|
this.getLawNums() //法律法规接口
|
this.getCaseNums() //案件数接口
|
this.getMoneyNum() //罚没资金
|
this.getpowers() //本年度案件数量
|
// this.getTeam() //执法队员
|
// this.getHotCase() //热点案件
|
this.getCasePlace() //地图违法案件地点信息
|
|
},
|
mounted() {
|
},
|
methods: {
|
rounding, //引入保留两位小数
|
getBoundary(BMap, map){ //地图区域画分割线
|
var bdary = new BMap.Boundary();
|
bdary.get("峰峰矿区", function(rs){ //获取行政区域
|
// map.clearOverlays(); //清除地图覆盖物
|
var count = rs.boundaries.length; //行政区域的点有多少个
|
if (count === 0) {
|
return ;
|
}
|
var pointArray = [];
|
for (var i = 0; i < count; i++) {
|
var ply = new BMap.Polygon(rs.boundaries[i], {
|
strokeWeight: 4,
|
fillColor: '#00F5FF',
|
fillOpacity: '0.01',
|
strokeColor: "#ff0000"
|
}); //建立多边形覆盖物
|
map.addOverlay(ply); //添加覆盖物
|
pointArray = pointArray.concat(ply.getPath());
|
}
|
map.setViewport(pointArray); //调整视野
|
// addlabel();
|
});
|
},
|
/**本年度案件按数量排序**/
|
arraySort(key) {
|
return function (a,b) {
|
if(a[key] < b[key]) return 1;
|
if(a[key] > b[key]) return -1;
|
return 0
|
}
|
},
|
caseNumEcharts() { //本年度案件数量echarts
|
let myEcharts = this.$echarts.init(document.getElementById('caseNumEcharts'))
|
let nameData = []
|
let numData = []
|
// let newArray = []
|
// console.log(this.powersData,'this.powersData===')
|
// let powersData = JSON.parse(JSON.stringify(this.powersData))
|
// newArray = powersData.sort(this.arraySort('num'))
|
// console.log(newArray,'newArray===')
|
this.powersData.forEach(item => {
|
nameData.push(item.name)
|
numData.push(item.num)
|
let option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
},
|
backgroundColor: 'rgba(9, 24, 48, 0.5)',
|
borderColor: 'rgba(75, 253, 238, 0.4)',
|
textStyle: {
|
color: '#CFE3FC',
|
},
|
borderWidth: 1,
|
},
|
grid: {
|
top: '15%',
|
right: '5%',
|
left: "0%",
|
bottom: '20%'
|
},
|
xAxis: [{
|
name: "",
|
type: 'category',
|
data: nameData,
|
axisLine: {
|
show:false,
|
lineStyle: {
|
color: '#FFFFFF'
|
}
|
},
|
axisLabel: {
|
show:true,
|
interval: 0,
|
margin: 5,
|
color: '#e2e9ff',
|
textStyle: {
|
fontSize: nowSize(10)
|
},
|
},
|
axisTick: {
|
show: false
|
}
|
}],
|
yAxis: [{
|
name: "",
|
axisLabel: {
|
show:false,
|
formatter: '{value}',
|
color: '#e2e9ff',
|
},
|
axisTick: {
|
show: false
|
},
|
axisLine: {
|
show: false,
|
lineStyle: {
|
color: '#FFFFFF'
|
}
|
},
|
splitLine: {
|
show: false,
|
lineStyle: {
|
color: 'rgba(255,255,255,0.12)'
|
}
|
}
|
}],
|
series: [{
|
type: 'bar',
|
data: numData,
|
barWidth: '20',
|
itemStyle: {
|
normal: {
|
color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0,
|
color: 'rgba(45,226,255,1)' // 0% 处的颜色
|
}, {
|
offset: 1,
|
color: 'rgba(30,152,232,1)' // 100% 处的颜色
|
}], false),
|
shadowColor: 'rgba(0,160,221,1)',
|
shadowBlur: 0,
|
}
|
},
|
label: {
|
normal: {
|
show: true,
|
lineHeight: 10,
|
formatter: '{c}',
|
position: 'top',
|
textStyle: {
|
color: '#00D6F9',
|
fontSize: nowSize(12)
|
}
|
|
}
|
}
|
}]
|
};
|
myEcharts.setOption(option)
|
})
|
|
|
|
window.addEventListener('resize',function () {
|
myEcharts.resize()
|
})
|
},
|
|
getNotCase() { //未完成案件
|
getNotCase().then(res => {
|
if(res.data.code == 0) {
|
this.notCaseData = res.data.data
|
}
|
})
|
},
|
getAllNums() {
|
getAllNums().then(res => {
|
if(res.data.data != null) {
|
this.marketObj = res.data.data.total
|
}
|
})
|
},
|
getLawNums() { //展示页面上部法律法规接口
|
getLawNums().then(res => {
|
this.falvObj = res.data.data
|
}).catch(e => {
|
|
})
|
},
|
getCaseNums() { //展示页面上部案件数接口
|
getCaseNums().then(res => {
|
this.CaseNumObj = res.data.data
|
}).catch(e => {
|
|
})
|
},
|
getMoneyNum() { //展示页面上部罚没资金接口
|
getMoneyNum().then(res => {
|
if(res.data.code == 0) {
|
this.getMoneyNumObj = res.data.data
|
}
|
}).catch(e => {
|
|
})
|
},
|
getTeam() { //执法队员
|
getTeam().then(res => {
|
console.log(res,'执法队员---')
|
if(res.data.code == 0) {
|
this.teamData = res.data.data
|
|
}
|
}).catch(e => {
|
|
})
|
},
|
getpowers() {
|
getpowers().then(res => {
|
console.log(res,'powers====')
|
if(res.data.code == 0) {
|
// this.powersTotal = res.data.data.total
|
this.powersTotal = '669'
|
// this.powersData = res.data.data.key || []
|
this.powersData = res.data.data.key || []
|
console.log(this.powersData,'this.powersData====')
|
this.powersData = [{
|
name:"自然资源规划",
|
num:"125"
|
},{
|
name:"农业农村",
|
num:"91"
|
},{
|
name:"发展改革",
|
num:"94"
|
},{
|
name:"交通运输",
|
num:"83"
|
},{
|
name:"住房城乡建设",
|
num:"63"
|
},{
|
name:"民政",
|
num:"42"
|
},{
|
name:"城市管理",
|
num:"34"
|
},{
|
name:"教育体育",
|
num:"33"
|
},{
|
name:"民族宗教",
|
num:"32"
|
},{
|
name:"卫生健康",
|
num:"21"
|
},{
|
name:"商务",
|
num:"18"
|
},{
|
name:"水利",
|
num:"16"
|
},{
|
name:"人力资源社会保障",
|
num:"9"
|
},{
|
name:"林业和草原",
|
num:"8"
|
}]
|
this.caseNumEcharts()
|
// this.powersData = ['发展改革：166','交通运输：166']
|
// this.powersData = [{
|
// name: '发展改革',
|
// num: 166
|
// },{
|
// name: '发展改革',
|
// num: 166
|
// }]
|
}
|
})
|
},
|
getHotCase() { //热点案件
|
getHotCase().then(res => {
|
if(res.data.code == 0) {
|
this.hotCaseData = res.data.data
|
}
|
})
|
},
|
getCasePlace() { //违法案件地点地图
|
getCasePlace().then(res => {
|
console.log(res.data.code,'res===---')
|
if(res.data.code == 0) {
|
this.mapData = res.data.data
|
this.addMarker()
|
}
|
}).catch(e => {
|
|
})
|
},
|
handler({BMap, map}) {
|
this.mapObj = {BMap, map}
|
// map.setMapStyle({style:'bluish'}); //换颜色
|
let goodsData = require('../../assets/js/custom_map_config')
|
// let point = new BMap.Point(114.466666666667,36.6)
|
let point = new BMap.Point(114.238455,36.474194)
|
map.centerAndZoom(point, 16) //
|
// map.setZoom(12)
|
map.setMapStyleV2({
|
styleJson: goodsData
|
// styleId: '5f9b8a9639cf6e4ae8806379bedba141'
|
// style: 'bluish'
|
})
|
// setTimeout(() => {
|
// map.setZoom(12)
|
// },1000)
|
map.setCurrentCity('峰峰矿区') // 设置地图显示的城市 此项是必须设置的
|
map.enableScrollWheelZoom(true) //鼠标滚动缩放
|
/*setTimeout(() => {
|
map.setZoom(12)
|
},1000)*/
|
this.addMarker()
|
this.getBoundary(BMap, map)
|
},
|
addMarker() { //创建点
|
let BMap = this.mapObj.BMap
|
let map = this.mapObj.map
|
this.mapData = [{
|
latitude:'114.234862,36.521205',
|
subjectName:'雁南飞有限公司',
|
address:'河北省邯郸市峰峰矿区',
|
phone:'13932032323'
|
},{
|
latitude:'114.14906,36.402389',
|
subjectName:'张磊',
|
address:'河北省邯郸市峰峰矿区界城镇孙庄村附近',
|
phone:'15033002345'
|
},{
|
latitude:'114.248425,36.550038',
|
subjectName:'河北高通有限公司',
|
address:'河北省邯郸市峰峰矿区',
|
phone:'15383209333'
|
},{
|
latitude:'114.153274,36.37814',
|
subjectName:'房兆兰',
|
address:' 邯郸市峰峰矿区迎宾大道黄沙矿',
|
phone:'13673102552'
|
},{
|
latitude:'114.207391,36.376624',
|
subjectName:'石晓明',
|
address:'邯郸市峰峰矿区大峪镇',
|
phone:'18513451197'
|
}]
|
this.mapData.forEach(item => { //lng 经度 lat 经度
|
if(item.latitude != '' || item.latitude != null) {
|
let longitude = item.latitude.split(',')[0]
|
let latitude = item.latitude.split(',')[1]
|
let point = new BMap.Point(longitude,latitude)
|
let marker = new BMap.Marker(point,13)
|
map.addOverlay(marker)
|
map.setZoom(12)
|
// 添加鼠标划入坐标点的显示内容
|
// let str = `<div style="padding:4px 10px">
|
// <div>
|
// <h1 style="color: #2DE2FF;font-size: 13px;text-align: center;line-height: 2">{{item.subjectName}}</h1>
|
// <div style="display: flex;flex-direction: column">
|
// <div><h1 style="color: #2DE2FF;font-size: 12px;padding:2px 0"">地址：{{item.address}}</h1></div>
|
// <div><h1 style="color: #2DE2FF;font-size: 12px;padding:2px 0">电话：{{item.phone}}</h1></div>
|
// </div>
|
// </div>
|
// </div>
|
// </div>`
|
let str = '<div style="padding:4px 10px">'
|
str += '<div>'
|
str += '<h1 style="color: #2DE2FF;font-size: 13px;text-align: center;line-height: 2"> ' + item.subjectName + '</h1>'
|
str += '<div style="display: flex;flex-direction: column">'
|
str += '<div><h1 style="color: #2DE2FF;font-size: 12px;padding:2px 0"">地址：'+item.address+'</h1></div>'
|
str += '<div><h1 style="color: #2DE2FF;font-size: 12px;padding:2px 0">电话：'+item.phone+'</h1></div>'
|
str += '</div>'
|
str += '</div>'
|
let opts = {
|
position: point,
|
offset: new BMap.Size(30,-30)
|
}
|
// 创建一个文本标注实例
|
let label = new BMap.Label(str,opts);
|
// 清除百度地图自带样式
|
label.setStyle({
|
border: '1px solid rgba(36,110,221, .5)',
|
backgroundColor: 'rgba(0,0,0,0.5)',
|
padding: '6px'
|
});
|
// 默认不显示文本标注
|
label.hide()
|
// 在全景场景内添加覆盖物
|
map.addOverlay(label);
|
marker.addEventListener('mouseover', function () {
|
label.show()
|
})
|
marker.addEventListener('mouseout', function () {
|
label.hide()
|
})
|
}
|
})
|
|
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
h1,h2,h3{
|
margin:0;
|
}
|
::-webkit-scrollbar {
|
width: 8px;
|
height: 8px;
|
}
|
/*滚动区域背景*/
|
::-webkit-scrollbar-track-piece {
|
background-color: silver;
|
-webkit-border-radius: 6px;
|
}
|
/*竖向滚动条*/
|
::-webkit-scrollbar-thumb:vertical {
|
height: 8px;
|
background-color: #20f3fc;
|
-webkit-border-radius: 6px;
|
}
|
/*横向滚动条*/
|
::-webkit-scrollbar-thumb:horizontal {
|
width: 8px;
|
background-color: #20f3fc;
|
-webkit-border-radius: 6px;
|
}
|
.dapingzhanshi-wrap{
|
width: 100%;
|
height: 100%;
|
|
.daping-main-box{
|
display: flex;
|
flex-direction: column;
|
width: 100%;
|
height: calc(100% - 60px);
|
padding: 0 0.1979rem /* 38/192 */;
|
}
|
.daping-top{
|
display: flex;
|
.daping-top-block{
|
width: 2.3125rem /* 444/192 */;
|
height: 0.7396rem /* 142/192 */;
|
border: 1px solid #55cffc;
|
display: flex;
|
flex-direction: column;
|
margin: 0.1042rem /* 20/192 */ 0.0599rem /* 11.5/192 */;
|
&:first-child{
|
margin-left: 0;
|
}
|
&:last-child{
|
margin-right: 0;
|
}
|
.top-block-inside{
|
position: relative;
|
.show-top-block-icon{
|
width: 0.8333rem /* 160/192 */;
|
height: 0.84375rem /* 162/192 */;
|
position: absolute;
|
top: -0.21875rem /* -42/192 */;
|
left: 0.421875rem /* 81/192 */;
|
}
|
.icon1{
|
background: url("../../assets/images/show-top-block-icon1.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.icon2{
|
background: url("../../assets/images/show-top-block-icon2.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.icon3{
|
background: url("../../assets/images/show-top-block-icon3.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.icon4{
|
background: url("../../assets/images/show-top-block-icon4.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.shichang-content{
|
display: flex;
|
flex-direction: column;
|
margin-left: 1.25rem /* 240/192 */;
|
min-height: 0.5208rem /* 100/192 */;
|
justify-content: center;
|
h1{
|
font-size: 0.1458rem /* 28/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
|
font-weight: 700;
|
text-align: left;
|
color: #2de2ff;
|
}
|
h2{
|
font-size: 0.0833rem /* 16/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: left;
|
color: #ffffff;
|
margin-top: 0.026rem /* 5/192 */;
|
}
|
}
|
}
|
.top-block-inside2{
|
display: flex;
|
padding: 0 0.15625rem /* 30/192 */;
|
.shichang-block{
|
display: flex;
|
flex: 1;
|
h1{
|
font-size: 0.0833rem /* 16/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: center;
|
color: #ffffff;
|
margin-right: 0.03125rem /* 8/256 */;
|
}
|
h2{
|
font-size: 0.0833rem /* 16/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: center;
|
color: #2de2ff;
|
}
|
}
|
}
|
}
|
}
|
.daping-middle{
|
width: 100%;
|
height: 0.6042rem /* 116/192 */;
|
background: url("../../assets/images/show-zhifa-bj.png") no-repeat center;
|
background-size: 100% 100%;
|
display: flex;
|
position: relative;
|
.shixiang-box{
|
width: 0.8333rem /* 160/192 */;
|
height: 0.84375rem /* 162/192 */;
|
position: absolute;
|
top: -0.21875rem /* -42/192 */;
|
left: 0.3125rem /* 60/192 */;
|
background: url("../../assets/images/show-top-block-icon5.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.shixiang-content {
|
display: flex;
|
flex-direction: column;
|
margin-left: 1.1458rem /* 220/192 */;
|
min-height: 0.5208rem /* 100/192 */;
|
justify-content: center;
|
h1{
|
font-size: 0.1458rem /* 28/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
|
font-weight: 700;
|
text-align: left;
|
color: #2de2ff;
|
}
|
h2{
|
font-size: 0.0833rem /* 16/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: left;
|
color: #ffffff;
|
margin-top: 0.026rem /* 5/192 */;
|
width: max-content;
|
}
|
}
|
.shixiang-content2 {
|
display: flex;
|
flex-wrap: wrap;
|
align-items: flex-start;
|
width: calc(100% - 0.2604rem /* 50/192 */);
|
height: calc(98% - 0.0417rem /* 8/192 */);
|
overflow:hidden;
|
margin-left: 0.2083rem /* 40/192 */;
|
-ms-overflow-style: none;
|
margin-top: 0.0417rem /* 8/192 */;
|
scrollbar-width: none;
|
&::-webkit-scrollbar { width: 0 !important }
|
.caseNumEcharts{
|
width: 100%;
|
height: 100%;
|
}
|
.shixiang-content2-block{
|
display: flex;
|
width: calc(100% / 6 - 0.0833rem /* 16/192 */);
|
margin: 0.0417rem /* 8/192 */;
|
img{
|
width: 0.09375rem /* 18/192 */;
|
height: 0.09375rem /* 18/192 */;
|
margin-right: 0.0521rem /* 10/192 */;
|
}
|
h1{
|
font-size: 0.0833rem /* 16/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: left;
|
color: #ffffff;
|
line-height: 0.109375rem /* 21/192 */;
|
}
|
}
|
}
|
}
|
.daping-bottom{
|
display: flex;
|
height: calc(100% - 1.6875rem /* 324/192 */);
|
margin-top: 0.1042rem /* 20/192 */;
|
.map-left{
|
width: 2.3021rem /* 442/192 */;
|
height: 100%;
|
.map-left-title{
|
height: 7%;
|
h1{
|
font-size: 0.0885rem /* 17/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
|
font-weight: 700;
|
text-align: left;
|
color: #2de2ff;
|
margin-left:0.15625rem /* 30/192 */;
|
line-height: 0.2083rem /* 40/192 */;
|
}
|
}
|
.title1{
|
width: 2.2865rem /* 439/192 */;
|
background: url("../../assets/images/map-left-title.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.title2{
|
width: 2.03125rem /* 390/192 */;
|
background: url("../../assets/images/map-left-title2.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.title3{
|
width: 2.2865rem /* 439/192 */;
|
background: url("../../assets/images/map-right-title.png") no-repeat center;
|
background-size: 100% 100%;
|
h1{
|
text-align: right!important;
|
margin-right: 0.15625rem;
|
}
|
}
|
}
|
.mapLeft{
|
background: url("../../assets/images/map-left-bj.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.mapRight{
|
background: url("../../assets/images/map-right-bj.png") no-repeat center;
|
background-size: 100% 100%;
|
.map-left-main1{
|
margin-left: 0.2396rem /* 46/192 */;
|
}
|
.map-left-main1{
|
height: calc(100% - 7% - 0.15625rem /* 30/192 */);
|
}
|
}
|
.map-left-main1{
|
width: calc(100% - 0.2396rem /* 46/192 */);
|
height: 45%;
|
/*height: 200px;*/
|
display: flex;
|
flex-direction: column;
|
padding:0 0.1042rem /* 20/192 */;
|
overflow-y: hidden;
|
.map-main-line{
|
width: 100%;
|
display: flex;
|
padding: 0.0521rem /* 10/192 */ 0;
|
cursor: pointer;
|
.main1-block{
|
display: flex;
|
width: calc(100% - 0.5729rem /* 110/192 */);
|
img{
|
width: 0.09375rem /* 18/192 */;
|
height: 0.09375rem /* 18/192 */;
|
margin-right: 0.0521rem /* 10/192 */;
|
}
|
h1{
|
font-size: 0.0833rem /* 16/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: left;
|
color: #ffffff;
|
line-height: 0.109375rem /* 21/192 */;
|
width: 1.171875rem /* 300/256 */;
|
overflow:hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
.none-case-box{
|
flex: 3;
|
h1{
|
width: 1.09375rem /* 280/256 */;
|
}
|
}
|
.main1-block2{
|
width: 0.5729rem /* 110/192 */;
|
h1{
|
font-size: 0.0833rem /* 16/192 */;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: left;
|
color: #2de2ff;
|
line-height: 0.109375rem /* 21/192 */;
|
}
|
}
|
}
|
}
|
.zhongdaxingzhenganjian-box{
|
padding-bottom: 0.1042rem /* 20/192 */;
|
.zhongdaxingzheng-inside{
|
width: 100%;
|
height: 90%;
|
overflow-y: hidden;
|
}
|
.main1-block{
|
width: 100%!important;
|
}
|
}
|
.map-middle{
|
width: 5rem /* 960/192 */;
|
height: 100%;
|
mask: url("../../assets/images/map-bj2.png") no-repeat center;
|
mask-size: 100% 100%;
|
background: #fff;
|
.bm-view{
|
width: 100%;
|
height: 100%;
|
/*overflow: hidden;*/
|
}
|
}
|
}
|
}
|
</style>
|
