1369 lines
37 KiB
Vue
1369 lines
37 KiB
Vue
<template>
|
||
<!-- <dv-full-screen-container class="app"> -->
|
||
<div id="" class="app">
|
||
<div>
|
||
<transition>
|
||
<Nav v-if="nav" @showbox="nav = false" class="transition-box"/>
|
||
</transition>
|
||
</div>
|
||
<div class="header">
|
||
<dv-decoration-8 class="header-left-decoration"/>
|
||
<dv-decoration-5 class="header-center-decoration"/>
|
||
<dv-decoration-8 class="header-right-decoration" :reverse="true"/>
|
||
<h1 class="echart_title">北京市政法大数据分析平台</h1>
|
||
<div class="time">{{ time }}</div>
|
||
<div class="nav" @click="nav = !nav">
|
||
<img src="../assets/img/nav.png" alt="">
|
||
<span class="text">导航</span>
|
||
</div>
|
||
</div>
|
||
<div class="main">
|
||
<div class="left">
|
||
<div>
|
||
<dv-border-box-11 title="政法大数据中心">
|
||
<!-- <p class="echart_title">政法大数据中心<a href="javascript:;">详情></a></p> -->
|
||
<div class="bigData">
|
||
<div>
|
||
<div>
|
||
<p>总数据</p>
|
||
<p><span class="zsj">30,000,000</span>条</p>
|
||
</div>
|
||
<div>
|
||
<p>今日接入数据</p>
|
||
<p><span class="jrsj">15,000</span>条</p>
|
||
</div>
|
||
<div>
|
||
<p>接入数据文件</p>
|
||
<p><span class="jrwj">200</span>条</p>
|
||
</div>
|
||
</div>
|
||
<ul>
|
||
<li>
|
||
<p>接入数据表</p>
|
||
<p><span class="jrsjb">700</span>个</p>
|
||
</li>
|
||
<li>
|
||
<p>委内数据源</p>
|
||
<p><span class="wnsjy">20</span>个</p>
|
||
</li>
|
||
<li>
|
||
<p>外部数据源</p>
|
||
<p><span class="wbsjy">25</span>个</p>
|
||
</li>
|
||
<li>
|
||
<p>服务器节点</p>
|
||
<p><span class="fwqjd">5</span>台</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</dv-border-box-11>
|
||
</div>
|
||
<ul>
|
||
<li>
|
||
<!-- <p class="echart_title">北京市社会稳定指数趋势<a href="javascript:;">详情></a></p> -->
|
||
<!-- <div class="echarts echarts1" id="echarts1"></div> -->
|
||
<dv-border-box-11 title="北京市社会稳定指数趋势">
|
||
<Echarts :key="echartObjKey" class="echarts echarts1" :echartObj="echartObj1"></Echarts>
|
||
</dv-border-box-11>
|
||
</li>
|
||
<li>
|
||
<dv-border-box-10>
|
||
<div class="echarts echarts23">
|
||
<Echarts :key="echartObjKey" class="echarts2" :echartObj="echartObj2"></Echarts>
|
||
<!-- <div class="echarts2" id="echarts2"></div> -->
|
||
<!-- <div class="echarts3" id="echarts3"></div> -->
|
||
<Echarts :key="echartObjKey" class="echarts3" :echartObj="echartObj3"></Echarts>
|
||
</div>
|
||
</dv-border-box-10>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="middle">
|
||
<h1 class="up">
|
||
北京市社会稳定指数
|
||
<dv-digital-flop :config="digitalFlop" class="digitalFlop" style="font-size: 40px"/>
|
||
<!-- <span class="number">
|
||
<i>8</i>
|
||
<i>8</i>
|
||
<i>.</i>
|
||
<i>5</i>
|
||
</span> -->
|
||
<span class="number2">上升12%</span>
|
||
</h1>
|
||
<dv-scroll-board :config="config" style="height: 80px;margin: 20px 0;"/>
|
||
<!-- <div class="shwdzs" style="box-sizing: border-box;position: relative;">
|
||
<ul class="infoList">
|
||
<li>
|
||
<div>
|
||
<img src="../assets/img/redWarning.png" alt="">
|
||
<span class="area">石景山</span>
|
||
<span class="val">78.6</span>
|
||
<span class="detail">连续三个月下降</span>
|
||
</div>
|
||
<div>
|
||
<img src="../assets/img/redWarning.png" alt="">
|
||
<span class="area">海淀</span>
|
||
<span class="val">78.6</span>
|
||
<span class="detail">连续三个月下降</span>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div>
|
||
<img src="../assets/img/yellowWarning.png" alt="">
|
||
<span class="area">门头沟</span>
|
||
<span class="val">72.6</span>
|
||
<span class="detail">连续三个月下降</span>
|
||
</div>
|
||
<div>
|
||
<img src="../assets/img/yellowWarning.png" alt="">
|
||
<span class="area">丰台</span>
|
||
<span class="val">72.6</span>
|
||
<span class="detail">连续三个月下降</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div> -->
|
||
|
||
<dv-border-box-1 style="flex: 1;" :color="['red', 'green']">
|
||
<Echarts :key="echartObjKey" class="echarts echarts7" :echartObj="echartObj7"></Echarts>
|
||
<!-- <div class="echarts7" id="echarts7"></div> -->
|
||
</dv-border-box-1>
|
||
|
||
<dv-border-box-10 :dur="2" style="margin-top: 20px;height: auto;">
|
||
<div class="table">
|
||
<ul class="table1">
|
||
<li>
|
||
<span>户籍人口数量</span><i>13,686,366人</i>
|
||
</li>
|
||
<li>
|
||
<span>流动人口数量</span><i>7,738,887人</i>
|
||
</li>
|
||
<li>
|
||
<span>重点人数量 (综治维稳)</span><i>1,000人</i>
|
||
</li>
|
||
<li>
|
||
<span>出租房屋数量</span><i>1,266,643间</i>
|
||
</li>
|
||
<li>
|
||
<span>两新组织数量</span><i>1,366个</i>
|
||
</li>
|
||
<li>
|
||
<span>非正常上访数量 (本年)</span><i>200次</i>
|
||
</li>
|
||
</ul>
|
||
<ul class="table2">
|
||
<li>
|
||
<span>案件数量 (治安、刑事 本年)</span><i>3,623件</i>
|
||
</li>
|
||
<li>
|
||
<span>经典案例数量</span><i>200例</i>
|
||
</li>
|
||
<li>
|
||
<span>重点组织数量</span><i>150个</i>
|
||
</li>
|
||
<li>
|
||
<span>敏感案事件数量 (本年)</span><i>187件</i>
|
||
</li>
|
||
<li>
|
||
<span>情报上报数量 (本年)</span><i>139个</i>
|
||
</li>
|
||
<li>
|
||
<span>邪教人员数量</span><i>300人</i>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</dv-border-box-10>
|
||
</div>
|
||
<div class="right">
|
||
<div>
|
||
<dv-border-box-11 title="日常办公">
|
||
<!-- <p class="echart_title">日常办公</p> -->
|
||
<ul class="dailyOffice">
|
||
<li>
|
||
<div>
|
||
<img src="../assets/img/fws.png" alt="">
|
||
</div>
|
||
<div>
|
||
<p>发文数</p>
|
||
<p><span class="fws">500</span>件</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div>
|
||
<img src="../assets/img/sws.png" alt="">
|
||
</div>
|
||
<div>
|
||
<p>收文数</p>
|
||
<p><span class="sws">200</span>件</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div>
|
||
<img src="../assets/img/tzggs.png" alt="">
|
||
</div>
|
||
<div>
|
||
<p>通知公告数</p>
|
||
<p><span class="tzggs">500</span>件</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div>
|
||
<img src="../assets/img/zlkwjs.png" alt="">
|
||
</div>
|
||
<div>
|
||
<p>资料库文件数</p>
|
||
<p><span class="zlkwjs">9000</span>件</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div>
|
||
<img src="../assets/img/nbqktbs.png" alt="">
|
||
</div>
|
||
<div>
|
||
<p>内部情况通报数</p>
|
||
<p><span class="nbqktbs">50</span>条</p>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div>
|
||
<img src="../assets/img/dykts.png" alt="">
|
||
</div>
|
||
<div>
|
||
<p>调研课题数</p>
|
||
<p><span class="dykts">186</span>个</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</dv-border-box-11>
|
||
</div>
|
||
<ul>
|
||
<li>
|
||
<dv-border-box-11 title="敏感案事件趋势">
|
||
<!-- <p class="echart_title">敏感案事件趋势</p> -->
|
||
<!-- <div class="echarts echarts4" id="echarts4"></div> -->
|
||
<Echarts :key="echartObjKey" class="echarts echarts4" :echartObj="echartObj4"></Echarts>
|
||
</dv-border-box-11>
|
||
</li>
|
||
<li>
|
||
<dv-border-box-11 title="治安、刑事案件趋势">
|
||
<!-- <p class="echart_title">治安、刑事案件趋势</p> -->
|
||
<!-- <div class="echarts echarts5" id="echarts5"></div> -->
|
||
<Echarts :key="echartObjKey" class="echarts echarts5" :echartObj="echartObj5"></Echarts>
|
||
</dv-border-box-11>
|
||
</li>
|
||
<li>
|
||
<dv-border-box-11 title="重点组织数量">
|
||
<!-- <p class="echart_title">重点组织数量</p> -->
|
||
<!-- <div class="echarts echarts6" id="echarts6"></div> -->
|
||
<Echarts :key="echartObjKey" class="echarts echarts6" :echartObj="echartObj6"></Echarts>
|
||
</dv-border-box-11>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- </dv-full-screen-container> -->
|
||
</template>
|
||
<script>
|
||
|
||
import Nav from '@/components/nav'
|
||
import Echarts from '@/components/echarts'
|
||
|
||
export default {
|
||
name: 'home',
|
||
data:function(){
|
||
return {
|
||
echartObjKey: "echartObjKey",
|
||
nav: false,
|
||
config:{
|
||
rowNum: 2,
|
||
oddRowBGC: 'rgba(33, 193, 255, 0.1)',
|
||
evenRowBGC: 'rgba(33, 193, 255, 0.2)',
|
||
data: [
|
||
[
|
||
'<img src="'+require('../assets/img/redWarning.png')+'"/>石景山78.6连续三个月下降',
|
||
'<img src="'+require('../assets/img/redWarning.png')+'"/>海淀78.6连续三个月下降'
|
||
],
|
||
[
|
||
'<img src="'+require('../assets/img/yellowWarning.png')+'"/>门头沟72.6连续三个月下降',
|
||
'<img src="'+require('../assets/img/yellowWarning.png')+'"/>丰台72.6连续三个月下降'
|
||
],
|
||
[
|
||
'<img src="'+require('../assets/img/yellowWarning.png')+'"/>西城72.6连续三个月下降',
|
||
'<img src="'+require('../assets/img/yellowWarning.png')+'"/>东城72.6连续三个月下降'
|
||
],
|
||
[
|
||
'<img src="'+require('../assets/img/redWarning.png')+'"/>大兴78.6连续三个月下降',
|
||
'<img src="'+require('../assets/img/redWarning.png')+'"/>房山78.6连续三个月下降'
|
||
],
|
||
],
|
||
},
|
||
mainLeft:[],
|
||
mainright:[],
|
||
time: '',
|
||
digitalFlop:{
|
||
number: [0],
|
||
toFixed: 2,
|
||
content: '{nt}',
|
||
style: {
|
||
fontSize: 40,
|
||
}
|
||
},
|
||
echartObj1:{
|
||
color: ['#54e9a0'], //图例颜色
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
position: 'inside',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
},
|
||
extraCssText: 'width:160px;height:auto;'
|
||
},
|
||
legend: {
|
||
top: '10',
|
||
right: '20',
|
||
data: [{ name: '市平均数', icon: 'line', }],
|
||
itemWidth: 10, //图例的宽度
|
||
textStyle: {
|
||
color: '#fff' //图例字体颜色
|
||
},
|
||
},
|
||
grid: {
|
||
top: '30',
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
boundaryGap: true,
|
||
data: ['2019-08', '2019-09', '2019-10', '2019-11', '2019-12', '2020-01', '2020-02'],
|
||
axisLine: { //轴线修改
|
||
lineStyle: {
|
||
color: '#2dd4fc', // 颜色
|
||
width: 2 // 粗细
|
||
}
|
||
},
|
||
axisLabel: { //
|
||
show: true,
|
||
textStyle: {
|
||
color: '#2dd4fc'
|
||
}
|
||
},
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
axisLine: { //轴线修改
|
||
lineStyle: {
|
||
color: '#2dd4fc', // 颜色
|
||
width: 2 // 粗细
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#2dd4fc'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#355184',
|
||
width: 1
|
||
}
|
||
},
|
||
}],
|
||
series: [{
|
||
name: '市平均数',
|
||
type: 'line',
|
||
stack: '总量',
|
||
symbol: 'none', //取消折线点圆圈
|
||
data: [120, 132, 101, 134, 90, 230, 210],
|
||
areaStyle: {
|
||
normal: {
|
||
color: '#1195a5' //修改折线下面区域颜色
|
||
}
|
||
},
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#54e9a0' //修改折线颜色
|
||
}
|
||
}
|
||
}, ]
|
||
},
|
||
echartObj2:{
|
||
color: ['#89cefb', '#ebdd7e', '#f96d5e'], //图例颜色
|
||
title: {
|
||
top: '10',
|
||
text: '重点人分析',
|
||
left: 'center',
|
||
textStyle: {
|
||
"fontSize": 14,
|
||
"color": "#27b3d8"
|
||
}
|
||
},
|
||
tooltip: {
|
||
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||
// trigger: 'axis',
|
||
// position: 'inside',
|
||
// axisPointer: {
|
||
// type: 'cross',
|
||
// label: {
|
||
// backgroundColor: '#6a7985'
|
||
// }
|
||
// },
|
||
extraCssText: 'width:160px;height:auto;',
|
||
},
|
||
legend: {
|
||
bottom: '10',
|
||
data: ['', '政治重点人', '邪教人员'],
|
||
textStyle: {
|
||
color: '#fff' //字体颜色
|
||
},
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
series: [{
|
||
label: {
|
||
position: 'inner',
|
||
},
|
||
name: '重点人分析',
|
||
type: 'pie',
|
||
radius: '70%',
|
||
center: ['50%', '50%'],
|
||
data: [
|
||
// { value: 6000, name: '',},
|
||
{ value: 6000, name: '', label: { show: false, fontSize: '8', } },
|
||
{ value: 1200, name: '政治重点人' },
|
||
{ value: 500, name: '邪教人员' },
|
||
],
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
},
|
||
// // 设置值域的那指向线
|
||
// labelLine: {
|
||
// normal: {
|
||
// // show: false // show设置线是否显示，默认为true，可选值：true ¦ false
|
||
// }
|
||
// },
|
||
// // 设置值域的标签
|
||
// label: {
|
||
// normal: {
|
||
// position: 'inner', // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
|
||
// // formatter: '{a} {b} : {c}个 ({d}%)' 设置标签显示内容 ，默认显示{b}
|
||
// // {a}指series.name {b}指series.data的name
|
||
// // {c}指series.data的value {d}%指这一部分占总数的百分比
|
||
// formatter: '{b}'
|
||
// }
|
||
// }
|
||
}]
|
||
},
|
||
echartObj3:{
|
||
color: ['#89cefb', '#ebdd7e', '#f96d5e'], //图例颜色
|
||
title: {
|
||
top: '10',
|
||
text: '员额法官、检察官分析',
|
||
left: 'center',
|
||
textStyle: {
|
||
"fontSize": 14,
|
||
"color": "#27b3d8"
|
||
}
|
||
},
|
||
tooltip: {
|
||
extraCssText: 'width:160px;height:auto;',
|
||
trigger: 'item',
|
||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||
},
|
||
legend: {
|
||
bottom: '10',
|
||
data: ['', '员额检察官', '员额法官'],
|
||
textStyle: {
|
||
color: '#fff' //字体颜色
|
||
},
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
series: [{
|
||
label: {
|
||
position: 'inner',
|
||
},
|
||
name: '员额法官、检察官分析',
|
||
type: 'pie',
|
||
radius: '70%',
|
||
center: ['50%', '50%'],
|
||
data: [
|
||
{ value: 5000, name: '' },
|
||
{ value: 2500, name: '员额检察官' },
|
||
{ value: 1500, name: '员额法官' },
|
||
],
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}]
|
||
},
|
||
echartObj4:{
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
position: 'inside',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
},
|
||
extraCssText: 'width:160px;height:auto;'
|
||
},
|
||
legend: {
|
||
top: '10',
|
||
right: '20',
|
||
data: [{ name: '市平均数', icon: 'line', }],
|
||
itemWidth: 10, //图例的宽度
|
||
textStyle: {
|
||
color: '#fff' //图例字体颜色
|
||
},
|
||
},
|
||
grid: {
|
||
top: '30',
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
boundaryGap: true,
|
||
data: ['2019-08', '2019-09', '2019-10', '2019-11', '2019-12', '2020-01', '2020-02'],
|
||
axisLine: { //轴线修改
|
||
lineStyle: {
|
||
color: '#2dd4fc', // 颜色
|
||
width: 2 // 粗细
|
||
}
|
||
},
|
||
axisLabel: { //
|
||
show: true,
|
||
textStyle: {
|
||
color: '#2dd4fc'
|
||
}
|
||
}
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
axisLine: { //轴线修改
|
||
lineStyle: {
|
||
color: '#2dd4fc', // 颜色
|
||
width: 2 // 粗细
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#2dd4fc'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#355184',
|
||
width: 1
|
||
}
|
||
},
|
||
}],
|
||
series: [{
|
||
name: '市平均数',
|
||
type: 'line',
|
||
stack: '总量',
|
||
lineStyle: {
|
||
normal: {
|
||
color: '#57c9fc' //修改折线颜色
|
||
}
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: '#57c9fc' //修改折线下面区域颜色
|
||
}
|
||
},
|
||
symbol: 'none', //取消折点圆圈
|
||
data: [120, 132, 101, 134, 90, 230, 210]
|
||
}, ]
|
||
},
|
||
echartObj5:{
|
||
color: ['#f35a6c', '#23a78c'], //图例颜色
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
position: 'inside',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
},
|
||
extraCssText: 'width:160px;height:auto;'
|
||
},
|
||
legend: {
|
||
top: '10',
|
||
right: '20',
|
||
data: [
|
||
{ name: '刑事案件', icon: 'line', },
|
||
{ name: '治安案件', icon: 'line', },
|
||
],
|
||
itemWidth: 20, //图例的宽度
|
||
textStyle: {
|
||
color: '#fff' //图例字体颜色
|
||
},
|
||
},
|
||
grid: {
|
||
top: '30',
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
boundaryGap: true,
|
||
data: ['2019-08', '2019-09', '2019-10', '2019-11', '2019-12', '2020-01', '2020-02'],
|
||
axisLine: { //轴线修改
|
||
lineStyle: {
|
||
color: '#2dd4fc', // 颜色
|
||
width: 2 // 粗细
|
||
}
|
||
},
|
||
axisLabel: { //
|
||
show: true,
|
||
textStyle: {
|
||
color: '#2dd4fc'
|
||
}
|
||
}
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
axisLine: { //轴线修改
|
||
lineStyle: {
|
||
color: '#2dd4fc', // 颜色
|
||
width: 2 // 粗细
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#2dd4fc'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#355184',
|
||
width: 1
|
||
}
|
||
},
|
||
}],
|
||
series: [{
|
||
name: '刑事案件',
|
||
type: 'line',
|
||
stack: '总量',
|
||
symbol: 'none', //取消折点圆圈
|
||
smooth: true,
|
||
data: [120, 132, 101, 134, 90, 230, 210]
|
||
},
|
||
{
|
||
name: '治安案件',
|
||
type: 'line',
|
||
stack: '总量',
|
||
symbol: 'none', //取消折点圆圈
|
||
smooth: true,
|
||
data: [120, 132, 101, 134, 90, 230, 210]
|
||
},
|
||
]
|
||
},
|
||
echartObj6:{
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
position: 'inside',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
},
|
||
extraCssText: 'width:160px;height:auto;'
|
||
},
|
||
grid: {
|
||
top: '20',
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
boundaryGap: true,
|
||
data: ['组党结社', '维权', '公益', '民族宗教', '网格组织', '其他'],
|
||
axisLine: { //轴线修改
|
||
lineStyle: {
|
||
color: '#2dd4fc', // 颜色
|
||
width: 2 // 粗细
|
||
}
|
||
},
|
||
axisLabel: { //
|
||
show: true,
|
||
textStyle: {
|
||
color: '#2dd4fc'
|
||
}
|
||
}
|
||
}],
|
||
yAxis: [{
|
||
type: 'value',
|
||
axisLine: { //轴线修改
|
||
lineStyle: {
|
||
color: '#2dd4fc', // 颜色
|
||
width: 2 // 粗细
|
||
}
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: '#2dd4fc'
|
||
}
|
||
}
|
||
}],
|
||
series: [{
|
||
name: '市平均数',
|
||
type: 'bar',
|
||
stack: '总量',
|
||
barWidth: 30, // 柱图宽度
|
||
barMaxWidth: 30, // 最大宽度
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
textStyle: {
|
||
color: 'white'
|
||
}
|
||
},
|
||
color: new this.$echarts.graphic.LinearGradient(
|
||
0, 0, 0, 1,
|
||
[
|
||
{ offset: 0, color: '#0f99bd' },
|
||
{ offset: 1, color: '#013ec5' },
|
||
]
|
||
)
|
||
},
|
||
},
|
||
data: [120, 132, 101, 134, 90, 230, 210]
|
||
}, ]
|
||
},
|
||
echartObj7:{
|
||
tooltip: {
|
||
trigger: 'item',
|
||
// backgroundColor:"#4169E1",//提示标签背景颜色
|
||
// textStyle:{color:"#fff"}, //提示标签字体颜色
|
||
formatter: function(val) {
|
||
return val.data.name + '<br>人口数量: ' + val.data.value + '万'
|
||
}
|
||
},
|
||
visualMap: {
|
||
type: 'continuous',
|
||
show: false,
|
||
// show: true, // 是否显示 visualMap-continuous 组件 如果设置为 false，不会显示，但是数据映射的功能还存在
|
||
// 指定 visualMapContinuous 组件的允许的最小/大值 min/max 必须用户指定
|
||
// min: 0,
|
||
// max: 400,
|
||
textStyle: {
|
||
fontSize: 14,
|
||
color: '#fff'
|
||
},
|
||
realtime: false,
|
||
calculable: true,
|
||
inRange: {
|
||
// color: ['#9fb5ea', '#e6ac53', '#74e2ca', '#85daef', '#9feaa5', '#5475f5']
|
||
color: ['#3aa8bc', '#decc61', '#f96858', ]
|
||
}
|
||
},
|
||
series: [{
|
||
type: 'map',
|
||
// 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
|
||
map: '北京',
|
||
zoom: 1.1,
|
||
selectedmode: "single",
|
||
boxDepth: 90,
|
||
regionHeight: 8,
|
||
// 地图类型
|
||
mapType: 'province',
|
||
// 是否开启鼠标缩放和平移漫游 默认不开启
|
||
// 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
|
||
roam: false,
|
||
// 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
|
||
top: 20,
|
||
// 图形上的文本标签
|
||
label: {
|
||
normal: {
|
||
show: true, //显示省份标签
|
||
textStyle: { color: "#fff" } //省份标签字体颜色
|
||
},
|
||
emphasis: { //对应的鼠标悬浮效果
|
||
show: true,
|
||
textStyle: { color: "#fff" }
|
||
}
|
||
},
|
||
// 地图区域的多边形 图形样式
|
||
itemStyle: {
|
||
// 地图区域的颜色 如果设置了visualMap, 这个属性将不起作用
|
||
areaColor: '#7B68EE',
|
||
// 描边线宽 为 0 时无描边
|
||
borderWidth: 0.5,
|
||
// 图形的描边颜色 支持的颜色格式同 color
|
||
borderColor: '#000',
|
||
// 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
|
||
borderType: 'solid',
|
||
normal: {
|
||
borderWidth: .5, //区域边框宽度
|
||
borderColor: '#fff', //区域边框颜色
|
||
areaColor: "#DCDCDC", //区域颜色
|
||
label: { show: true } // 默认显示地名
|
||
},
|
||
emphasis: { // 高亮状态
|
||
borderWidth: .10,
|
||
borderColor: '#4b0082',
|
||
areaColor: "#f00",
|
||
label: { show: true }
|
||
}
|
||
},
|
||
// 高亮状态
|
||
emphasis: {
|
||
// 文本标签
|
||
label: {
|
||
// 是否显示标签
|
||
show: true,
|
||
// 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
|
||
color: '#fff'
|
||
},
|
||
// 图形样式
|
||
itemStyle: {
|
||
// 地图区域的颜色
|
||
areaColor: '#FF6347'
|
||
}
|
||
},
|
||
// 地图系列中的数据内容数组，数组项可以为单个数值
|
||
data: [
|
||
{ name: '延庆区', value: 31.4, lng: 115.981186, lat: 40.462706 },
|
||
{ name: '怀柔区', value: 38.4, lng: 116.63853, lat: 40.322563 },
|
||
{ name: '密云区', value: 47.9, lng: 116.849551, lat: 40.382999 },
|
||
{ name: '昌平区', value: 196.3, lng: 116.237832, lat: 40.226854 },
|
||
{ name: '顺义区', value: 102, lng: 116.663242, lat: 40.1362 },
|
||
{ name: '平谷区', value: 42.3, lng: 117.128025, lat: 40.147115 },
|
||
{ name: '门头沟区', value: 30.8, lng: 116.108179, lat: 39.94648 },
|
||
{ name: '海淀区', value: 369.4, lng: 116.304872, lat: 39.96553 },
|
||
{ name: '石景山区', value: 65.2, lng: 116.229612, lat: 39.912017 },
|
||
{ name: '西城区', value: 129.8, lng: 116.372397, lat: 39.918561 },
|
||
{ name: '东城区', value: 90.5, lng: 116.42272, lat: 39.934579 },
|
||
{ name: '朝阳区', value: 395.5, lng: 116.449767, lat: 39.927254 },
|
||
{ name: '通州区', value: 137.8, lng: 116.662928, lat: 39.917001 },
|
||
{ name: '大兴区', value: 156.2, lng: 116.348053, lat: 39.732833 },
|
||
{ name: '房山区', value: 104.6, lng: 116.149892, lat: 39.755039 },
|
||
{ name: '丰台区', value: 232.4, lng: 116.293105, lat: 39.865042 }
|
||
]
|
||
}]
|
||
},
|
||
}
|
||
},
|
||
props: {
|
||
// config:{}
|
||
},
|
||
components: {
|
||
Nav,
|
||
Echarts,
|
||
},
|
||
mounted: function() {
|
||
this.getTime();
|
||
this.echartsS();
|
||
},
|
||
methods: {
|
||
getTime: function() {
|
||
setInterval(()=> {
|
||
this.time = toDateString(new Date(), 'yyyy年MM月dd日 HH:mm:ss')
|
||
}, 1000)
|
||
var toDateString = function(e, t) {
|
||
var digit = function(e, t) {
|
||
var i = "";
|
||
e = String(e), t = t || 2;
|
||
for (var n = e.length; n < t; n++) i += "0";
|
||
return e < Math.pow(10, t) ? i + (0 | e) : e
|
||
}
|
||
var n = new Date(e || new Date),
|
||
a = [digit(n.getFullYear(), 4), digit(n.getMonth() + 1), digit(n.getDate())],
|
||
o = [digit(n.getHours()), digit(n.getMinutes()), digit(n.getSeconds())];
|
||
return t = t || "yyyy-MM-dd HH:mm:ss", t.replace(/yyyy/g, a[0]).replace(/MM/g, a[1]).replace(/dd/g, a[2]).replace(/HH/g, o[0]).replace(/mm/g, o[1]).replace(/ss/g, o[2])
|
||
}
|
||
},
|
||
echartsS:function(){
|
||
// console.log(Style);
|
||
// console.log(getStyle)
|
||
setTimeout(()=>{
|
||
this.digitalFlop = {
|
||
number: [88.5],
|
||
toFixed: 2,
|
||
content: '{nt}',
|
||
style: {
|
||
fontSize: 40,
|
||
}
|
||
}
|
||
},1000)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="less">
|
||
.app,
|
||
#app {
|
||
background: url(../assets/img/body.jpg) no-repeat;
|
||
background-size: 100% 100%;
|
||
min-height: 100%;
|
||
color: #2dd4fc;
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.v-enter,
|
||
.v-leave-to{
|
||
opacity: 0;
|
||
transform: translateX(-100%);
|
||
}
|
||
.v-enter-active,
|
||
.v-leave-active{
|
||
transition: all 0.5s ease;
|
||
// animation: bounce-in 1.5s;
|
||
}
|
||
@keyframes bounce-in {
|
||
0% {
|
||
transform: scale(0);
|
||
}
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
.header {
|
||
// background: url(../assets/img/head.png) no-repeat;
|
||
height: 76px;
|
||
position: relative;
|
||
color: #fff;
|
||
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.header-left-decoration,
|
||
.header-center-decoration,
|
||
.header-right-decoration{
|
||
width: 20%;
|
||
}
|
||
.header-center-decoration{
|
||
width: 50%;
|
||
}
|
||
h1.title{
|
||
position: absolute;
|
||
top: 8px;
|
||
width: 100%;
|
||
font-size: 26px;
|
||
text-align: center;
|
||
}
|
||
.nav {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
top: 46px;
|
||
left: 0;
|
||
width: 90px;
|
||
height: 40px;
|
||
padding: 0 0 0 40px;
|
||
box-sizing: border-box;
|
||
line-height: 40px;
|
||
border: 1px solid #15659c;
|
||
border-left: 0;
|
||
background: #081562;
|
||
border-radius: 0 40px 40px 0;
|
||
font-size: 16px;
|
||
color: #fff;
|
||
img {
|
||
position: absolute;
|
||
top: 12px;
|
||
left: 14px;
|
||
}
|
||
}
|
||
.time {
|
||
position: absolute;
|
||
right: 20px;
|
||
bottom: 5px;
|
||
}
|
||
}
|
||
|
||
.main {
|
||
display: flex;
|
||
flex: 1;
|
||
.left,
|
||
.right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
// width: 560px;
|
||
width: 30%;
|
||
padding: 0 14px;
|
||
overflow: hidden;
|
||
.title {
|
||
font-size: 14px;
|
||
color: #2dd4fc;
|
||
padding-left: 18px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
background: url(../assets/img/title.png) no-repeat;
|
||
margin-bottom: 5px;
|
||
|
||
a {
|
||
color: #d5d8de;
|
||
font-size: 8px;
|
||
float: right;
|
||
}
|
||
}
|
||
}
|
||
.left{
|
||
ul{
|
||
flex: 1;
|
||
li{
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
position: relative;
|
||
height: 50%;
|
||
}
|
||
&>li:nth-child(1){
|
||
padding-bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
.right {
|
||
&>ul{
|
||
flex: 1;
|
||
&>li{
|
||
box-sizing: border-box;
|
||
height: 33.33%;
|
||
position: relative;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.middle {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
h1 {
|
||
.digitalFlop{
|
||
display: inline-block;
|
||
width: 110px;
|
||
height: 38px;
|
||
position: absolute;
|
||
font-weight: 600;
|
||
font-size: 32px;
|
||
}
|
||
text-align: center;
|
||
font-size: 16px;
|
||
line-height: 38px;
|
||
height: 38px;
|
||
span.number {
|
||
font-size: 0;
|
||
color: #a0f5ff;
|
||
font-weight: 600;
|
||
i {
|
||
font-size: 32px;
|
||
display: inline-block;
|
||
width: 28px;
|
||
height: 38px;
|
||
background: url(../assets/img/sy_04.png) no-repeat;
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
.number2 {
|
||
padding-left: 110px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
position: relative;
|
||
&:after {
|
||
content: "";
|
||
display: block;
|
||
width: 15px;
|
||
height: 18px;
|
||
position: absolute;
|
||
top: 0;
|
||
right: -18px;
|
||
}
|
||
}
|
||
&.up {
|
||
.number2:after {
|
||
background: url(../assets/img/up.png) no-repeat;
|
||
}
|
||
}
|
||
&.down {
|
||
.number2:after {
|
||
background: url(../assets/img/down.png) no-repeat;
|
||
}
|
||
}
|
||
}
|
||
|
||
.shwdzs {
|
||
border-top: 1px dashed #15659c;
|
||
border-bottom: 1px dashed #15659c;
|
||
|
||
li {
|
||
border-bottom: 1px dashed #15659c;
|
||
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
background: rgba(33, 193, 255, 0.1);
|
||
|
||
div {
|
||
width: 50%;
|
||
height: 26px;
|
||
line-height: 26px;
|
||
padding: 0 16px;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.table {
|
||
// background: url(../assets/img/sy_03.png) no-repeat;
|
||
// background-size: 100% 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
padding: 8px 13px;
|
||
font-size: 8px;
|
||
height: 184px;
|
||
box-sizing: border-box;
|
||
ul {
|
||
width: 50%;
|
||
height: 100%;
|
||
li {
|
||
// height: 18px;
|
||
height: 16.66%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
border-top: 2px solid #153672;
|
||
background: #1d6fb2;
|
||
position: relative;
|
||
span,
|
||
i {
|
||
padding: 0 5px;
|
||
display: table-cell;
|
||
vertical-align: middle;
|
||
}
|
||
span {
|
||
width: 88px;
|
||
}
|
||
i {
|
||
background: #195599;
|
||
color: #dfd071;
|
||
// flex: 1;
|
||
// line-height: 18px;
|
||
border-left: 2px solid #153672;
|
||
// height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 90px;
|
||
right: 0;
|
||
}
|
||
|
||
&:nth-child(1) {
|
||
border-top: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.table1 {
|
||
padding-right: 3px;
|
||
}
|
||
|
||
.table2 {
|
||
padding-left: 3px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 政法大数据中心
|
||
.bigData {
|
||
// background: url(../assets/img/sy_03.png) no-repeat;
|
||
// background-size: 100% 100%;
|
||
|
||
margin-bottom: 14px;
|
||
color: #d5d6d8;
|
||
|
||
&>div {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
&>div {
|
||
// min-width: 100px;
|
||
min-width: 66px;
|
||
background: url(../assets/img/sy_01.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-right: 5px;
|
||
padding: 16px 6px 8px 6px;
|
||
|
||
p {
|
||
font-size: 8px;
|
||
|
||
span {
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
}
|
||
|
||
&>div:nth-child(1) {
|
||
padding-left: 20px;
|
||
flex: 1;
|
||
}
|
||
|
||
&>div:nth-child(3) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
|
||
&>ul {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background: url(../assets/img/sy_01.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
padding: 12px;
|
||
padding-left: 20px;
|
||
margin-top: 3px;
|
||
|
||
p {
|
||
font-size: 8px;
|
||
|
||
span {
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 日常办公
|
||
.dailyOffice {
|
||
background-size: 100% 100%;
|
||
color: #d5d6d8;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
padding: 8px 20px;
|
||
padding-top: 60px;
|
||
li {
|
||
width: 33%;
|
||
display: flex;
|
||
margin-bottom: 3px;
|
||
img {
|
||
margin-right: 3px;
|
||
width: 30px;
|
||
// height: 30px;
|
||
// width: 100%;
|
||
// height: 100%;
|
||
}
|
||
p {
|
||
font-size: 8px;
|
||
line-height: 1em;
|
||
span {
|
||
padding-top: 5px;
|
||
line-height: 1.4em;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.zsj {
|
||
color: #57c9fc;
|
||
}
|
||
|
||
.jrsj {
|
||
color: #e9d76e;
|
||
}
|
||
|
||
.jrwj {
|
||
color: #f89c40;
|
||
}
|
||
|
||
.jrsjb {
|
||
color: #2ae29e;
|
||
}
|
||
|
||
.wnsjy {
|
||
color: #57c9fc;
|
||
}
|
||
|
||
.wbsjy {
|
||
color: #5bf0f0;
|
||
}
|
||
|
||
.fwqjd {
|
||
color: #f35a6c;
|
||
}
|
||
|
||
.echarts{
|
||
// background: url(../assets/img/sy_03.png) no-repeat;
|
||
// background-size: 100% 100%;
|
||
height: 100%;
|
||
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0px;
|
||
left: 0;
|
||
}
|
||
.echarts23 {
|
||
display: flex;
|
||
.echarts2,
|
||
.echarts3{
|
||
width: 49%;
|
||
display: inline-block;
|
||
height: 100%;
|
||
}
|
||
}
|
||
/* 标题 */
|
||
.bigData,
|
||
.echarts1,
|
||
.dailyOffice,
|
||
.echarts4,
|
||
.echarts5,
|
||
.echarts6{
|
||
padding-top: 34px;
|
||
box-sizing: border-box;
|
||
}
|
||
.dv-border-svg-container .dv-border-box-11-title {
|
||
font-weight: 700;
|
||
fill: #8cacf9;
|
||
}
|
||
</style> |